diff --git a/.env b/.env
index 909023cdb8..831aeb2a24 100644
--- a/.env
+++ b/.env
@@ -1,3 +1,4 @@
+APP_ID='authoring'
 NODE_ENV='production'
 ACCESS_TOKEN_COOKIE_NAME=''
 BASE_URL=''
@@ -5,20 +6,42 @@ CREDENTIALS_BASE_URL=''
 CSRF_TOKEN_API_PATH=''
 DISCOVERY_API_BASE_URL=''
 ECOMMERCE_BASE_URL=''
+EXAMS_BASE_URL=''
 FAVICON_URL=''
 LANGUAGE_PREFERENCE_COOKIE_NAME=''
 LMS_BASE_URL=''
+LEARNING_BASE_URL=''
 LOGIN_URL=''
 LOGO_TRADEMARK_URL=''
 LOGO_URL=''
 LOGO_WHITE_URL=''
 LOGOUT_URL=null
 MARKETING_SITE_BASE_URL=''
+TERMS_OF_SERVICE_URL=''
+PRIVACY_POLICY_URL=''
 ORDER_HISTORY_URL=''
 PUBLISHER_BASE_URL=''
 REFRESH_ACCESS_TOKEN_ENDPOINT=''
 SEGMENT_KEY=''
 SITE_NAME=''
+STUDIO_SHORT_NAME='Studio'
 SUPPORT_EMAIL=''
 SUPPORT_URL=''
 USER_INFO_COOKIE_NAME=''
+ENABLE_ACCESSIBILITY_PAGE=false
+ENABLE_PROGRESS_GRAPH_SETTINGS=false
+ENABLE_TEAM_TYPE_SETTING=false
+ENABLE_UNIT_PAGE=false
+ENABLE_ASSETS_PAGE=false
+ENABLE_VIDEO_UPLOAD_PAGE_LINK_IN_CONTENT_DROPDOWN=false
+ENABLE_TAGGING_TAXONOMY_PAGES=true
+ENABLE_CERTIFICATE_PAGE=true
+BBB_LEARN_MORE_URL=''
+HOTJAR_APP_ID=''
+HOTJAR_VERSION=6
+HOTJAR_DEBUG=false
+INVITE_STUDENTS_EMAIL_TO=''
+ENABLE_HOME_PAGE_COURSE_API_V2=true
+ENABLE_CHECKLIST_QUALITY=''
+ENABLE_GRADING_METHOD_IN_PROBLEMS=false
+LIBRARY_SUPPORTED_BLOCKS="problem,video,html"
diff --git a/.env.development b/.env.development
index 89165d5052..23b726e5e6 100644
--- a/.env.development
+++ b/.env.development
@@ -1,26 +1,50 @@
+APP_ID='authoring'
 NODE_ENV='development'
 ACCESS_TOKEN_COOKIE_NAME='edx-jwt-cookie-header-payload'
-BASE_URL='localhost:2001'
+BASE_URL='http://localhost:2001'
 CREDENTIALS_BASE_URL='http://localhost:18150'
 CSRF_TOKEN_API_PATH='/csrf/api/v1/token'
 DISCOVERY_API_BASE_URL=
+EXAMS_BASE_URL=
 ECOMMERCE_BASE_URL='http://localhost:18130'
 FAVICON_URL='https://edx-cdn.org/v3/default/favicon.ico'
 LANGUAGE_PREFERENCE_COOKIE_NAME='openedx-language-preference'
 LMS_BASE_URL='http://localhost:18000'
+LEARNING_BASE_URL='http://localhost:2000'
 LOGIN_URL='http://localhost:18000/login'
 LOGO_TRADEMARK_URL=https://edx-cdn.org/v3/default/logo-trademark.svg
 LOGO_URL=https://edx-cdn.org/v3/default/logo.svg
 LOGO_WHITE_URL=https://edx-cdn.org/v3/default/logo-white.svg
 LOGOUT_URL='http://localhost:18000/logout'
 MARKETING_SITE_BASE_URL='http://localhost:18000'
+TERMS_OF_SERVICE_URL=
+PRIVACY_POLICY_URL=
 ORDER_HISTORY_URL='localhost:1996/orders'
 PORT=2001
 PUBLISHER_BASE_URL=
 REFRESH_ACCESS_TOKEN_ENDPOINT='http://localhost:18000/login_refresh'
 SEGMENT_KEY=null
-SITE_NAME='edX'
+SITE_NAME='Your Plaform Name Here'
 STUDIO_BASE_URL='http://localhost:18010'
-SUPPORT_EMAIL='support@example.com'
+STUDIO_SHORT_NAME='Studio'
+SUPPORT_EMAIL=
 SUPPORT_URL='https://support.edx.org'
 USER_INFO_COOKIE_NAME='edx-user-info'
+ENABLE_ACCESSIBILITY_PAGE=false
+ENABLE_PROGRESS_GRAPH_SETTINGS=false
+ENABLE_TEAM_TYPE_SETTING=false
+ENABLE_UNIT_PAGE=false
+ENABLE_ASSETS_PAGE=false
+ENABLE_VIDEO_UPLOAD_PAGE_LINK_IN_CONTENT_DROPDOWN=true
+ENABLE_CERTIFICATE_PAGE=true
+ENABLE_NEW_VIDEO_UPLOAD_PAGE=true
+ENABLE_TAGGING_TAXONOMY_PAGES=true
+BBB_LEARN_MORE_URL=''
+HOTJAR_APP_ID=''
+HOTJAR_VERSION=6
+HOTJAR_DEBUG=true
+INVITE_STUDENTS_EMAIL_TO="someone@domain.com"
+ENABLE_HOME_PAGE_COURSE_API_V2=true
+ENABLE_CHECKLIST_QUALITY=true
+ENABLE_GRADING_METHOD_IN_PROBLEMS=false
+LIBRARY_SUPPORTED_BLOCKS="problem,video,html"
diff --git a/.env.test b/.env.test
index cc3e9abd21..b9e352ebc8 100644
--- a/.env.test
+++ b/.env.test
@@ -1,12 +1,15 @@
+APP_ID='authoring'
 ACCESS_TOKEN_COOKIE_NAME='edx-jwt-cookie-header-payload'
-BASE_URL='localhost:2001'
+BASE_URL='http://localhost:2001'
 CREDENTIALS_BASE_URL='http://localhost:18150'
 CSRF_TOKEN_API_PATH='/csrf/api/v1/token'
 DISCOVERY_API_BASE_URL='http://localhost:18381'
 ECOMMERCE_BASE_URL='http://localhost:18130'
+EXAMS_BASE_URL=
 FAVICON_URL='https://edx-cdn.org/v3/default/favicon.ico'
 LANGUAGE_PREFERENCE_COOKIE_NAME='openedx-language-preference'
 LMS_BASE_URL='http://localhost:18000'
+LEARNING_BASE_URL='http://localhost:2000'
 LOGIN_URL='http://localhost:18000/login'
 LOGO_TRADEMARK_URL=https://edx-cdn.org/v3/default/logo-trademark.svg
 LOGO_URL=https://edx-cdn.org/v3/default/logo.svg
@@ -20,6 +23,20 @@ REFRESH_ACCESS_TOKEN_ENDPOINT='http://localhost:18000/login_refresh'
 SEGMENT_KEY=null
 SITE_NAME='edX'
 STUDIO_BASE_URL='http://localhost:18010'
+STUDIO_SHORT_NAME='Studio'
 SUPPORT_EMAIL='support@example.com'
 SUPPORT_URL='https://support.edx.org'
 USER_INFO_COOKIE_NAME='edx-user-info'
+ENABLE_PROGRESS_GRAPH_SETTINGS=false
+ENABLE_TEAM_TYPE_SETTING=false
+ENABLE_UNIT_PAGE=true
+ENABLE_ASSETS_PAGE=false
+ENABLE_VIDEO_UPLOAD_PAGE_LINK_IN_CONTENT_DROPDOWN=true
+ENABLE_CERTIFICATE_PAGE=true
+ENABLE_TAGGING_TAXONOMY_PAGES=true
+BBB_LEARN_MORE_URL=''
+INVITE_STUDENTS_EMAIL_TO="someone@domain.com"
+ENABLE_HOME_PAGE_COURSE_API_V2=true
+ENABLE_CHECKLIST_QUALITY=true
+ENABLE_GRADING_METHOD_IN_PROBLEMS=false
+LIBRARY_SUPPORTED_BLOCKS="problem,video,html"
diff --git a/.eslintignore b/.eslintignore
index 6e1aa5ede1..9c46e7b475 100755
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,4 +1,6 @@
 coverage/*
 dist/
 node_modules/
-jest.config.js
\ No newline at end of file
+jest.config.js
+env.config.jsx
+example.env.config.jsx
diff --git a/.eslintrc.js b/.eslintrc.js
index e08c90a1ab..6fc94024bf 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,12 +1,35 @@
-const { createConfig } = require('@edx/frontend-build');
+const path = require('path');
+// eslint-disable-next-line import/no-extraneous-dependencies
+const { createConfig } = require('@openedx/frontend-build');
 
-module.exports = createConfig('eslint',
-{
-    "rules": {
-      "jsx-a11y/label-has-associated-control": [ 2, {
-        "controlComponents": ["Input"],
+module.exports = createConfig(
+  'eslint',
+  {
+    rules: {
+      'jsx-a11y/label-has-associated-control': [2, {
+        controlComponents: ['Input'],
       }],
-    }
-  }
+      'template-curly-spacing': 'off',
+      'react-hooks/exhaustive-deps': 'off',
+      'no-restricted-exports': 'off',
+      // There is no reason to disallow this syntax anymore; we don't use regenerator-runtime in new browsers
+      'no-restricted-syntax': 'off',
+    },
+    settings: {
+      // Import URLs should be resolved using aliases
+      'import/resolver': {
+        webpack: {
+          config: path.resolve(__dirname, 'webpack.dev.config.js'),
+        },
+      },
+    },
+    overrides: [
+      {
+        files: ['plugins/**/*.test.jsx'],
+        rules: {
+          'import/no-extraneous-dependencies': 'off',
+        },
+      },
+    ],
+  },
 );
-
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
new file mode 100644
index 0000000000..9186f7421b
--- /dev/null
+++ b/.github/dependabot.yml
@@ -0,0 +1,7 @@
+version: 2
+updates:
+    # Adding new check for github-actions
+  - package-ecosystem: "github-actions"
+    directory: "/"
+    schedule:
+        interval: "weekly"
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
new file mode 100644
index 0000000000..d71c07ce67
--- /dev/null
+++ b/.github/pull_request_template.md
@@ -0,0 +1,27 @@
+## Description
+
+Describe what this pull request changes, and why. Include implications for people using this change.
+Design decisions and their rationales should be documented in the repo (docstring / ADR), per
+
+Useful information to include:
+- Which edX user roles will this change impact? Common user roles are "Learner", "Course Author",
+"Developer", and "Operator".
+- Include screenshots for changes to the UI (ideally, both "before" and "after" screenshots, if applicable).
+- Provide links to the description of corresponding configuration changes. Remember to correctly annotate these
+changes.
+
+## Supporting information
+
+Link to other information about the change, such as Jira issues, GitHub issues, or Discourse discussions.
+Be sure to check they are publicly readable, or if not, repeat the information here.
+
+## Testing instructions
+
+Please provide detailed step-by-step instructions for testing this change.
+
+
+## Other information
+
+Include anything else that will help reviewers and consumers understand the change.
+- Does this change depend on other changes elsewhere?
+- Any special concerns or limitations? For example: deprecations, migrations, security, or accessibility.
\ No newline at end of file
diff --git a/.github/workflows/add-depr-ticket-to-depr-board.yml b/.github/workflows/add-depr-ticket-to-depr-board.yml
new file mode 100644
index 0000000000..250e394abc
--- /dev/null
+++ b/.github/workflows/add-depr-ticket-to-depr-board.yml
@@ -0,0 +1,19 @@
+# Run the workflow that adds new tickets that are either:
+# - labelled "DEPR"
+# - title starts with "[DEPR]"
+# - body starts with "Proposal Date" (this is the first template field)
+# to the org-wide DEPR project board
+
+name: Add newly created DEPR issues to the DEPR project board
+
+on:
+  issues:
+    types: [opened]
+
+jobs:
+  routeissue:
+    uses: openedx/.github/.github/workflows/add-depr-ticket-to-depr-board.yml@master
+    secrets:
+      GITHUB_APP_ID: ${{ secrets.GRAPHQL_AUTH_APP_ID }}
+      GITHUB_APP_PRIVATE_KEY: ${{ secrets.GRAPHQL_AUTH_APP_PEM }}
+      SLACK_BOT_TOKEN: ${{ secrets.SLACK_ISSUE_BOT_TOKEN }}
diff --git a/.github/workflows/add-remove-label-on-comment.yml b/.github/workflows/add-remove-label-on-comment.yml
new file mode 100644
index 0000000000..0f369db7d2
--- /dev/null
+++ b/.github/workflows/add-remove-label-on-comment.yml
@@ -0,0 +1,20 @@
+# This workflow runs when a comment is made on the ticket
+# If the comment starts with "label: " it tries to apply
+# the label indicated in rest of comment.
+# If the comment starts with "remove label: ", it tries
+# to remove the indicated label.
+# Note: Labels are allowed to have spaces and this script does
+# not parse spaces (as often a space is legitimate), so the command
+# "label: really long lots of words label" will apply the
+# label "really long lots of words label"
+
+name: Allows for the adding and removing of labels via comment
+
+on:
+  issue_comment:
+    types: [created]
+
+jobs:
+  add_remove_labels:
+    uses: openedx/.github/.github/workflows/add-remove-label-on-comment.yml@master
+
diff --git a/.github/workflows/commitlint.yml b/.github/workflows/commitlint.yml
new file mode 100644
index 0000000000..fec11d6c25
--- /dev/null
+++ b/.github/workflows/commitlint.yml
@@ -0,0 +1,10 @@
+# Run commitlint on the commit messages in a pull request.
+
+name: Lint Commit Messages
+
+on:
+  - pull_request
+
+jobs:
+  commitlint:
+    uses: openedx/.github/.github/workflows/commitlint.yml@master
diff --git a/.github/workflows/lockfileversion-check.yml b/.github/workflows/lockfileversion-check.yml
new file mode 100644
index 0000000000..916dcb40d2
--- /dev/null
+++ b/.github/workflows/lockfileversion-check.yml
@@ -0,0 +1,13 @@
+#check package-lock file version
+
+name: Lockfile Version check
+
+on:
+  push:
+    branches:
+    - master
+  pull_request:
+
+jobs:
+  version-check:
+    uses: openedx/.github/.github/workflows/lockfileversion-check-v3.yml@master
diff --git a/.github/workflows/self-assign-issue.yml b/.github/workflows/self-assign-issue.yml
new file mode 100644
index 0000000000..37522fd57b
--- /dev/null
+++ b/.github/workflows/self-assign-issue.yml
@@ -0,0 +1,12 @@
+# This workflow runs when a comment is made on the ticket
+# If the comment starts with "assign me" it assigns the author to the
+# ticket (case insensitive)
+
+name: Assign comment author to ticket if they say "assign me"
+on:
+  issue_comment:
+    types: [created]
+
+jobs:
+  self_assign_by_comment:
+    uses: openedx/.github/.github/workflows/self-assign-issue.yml@master
diff --git a/.github/workflows/update-browserslist-db.yml b/.github/workflows/update-browserslist-db.yml
new file mode 100644
index 0000000000..db4346efe0
--- /dev/null
+++ b/.github/workflows/update-browserslist-db.yml
@@ -0,0 +1,12 @@
+name: Update Browserslist DB
+on:
+  schedule:
+    - cron:  '0 0 * * 1'
+  workflow_dispatch:
+
+jobs:
+  update-browserslist:
+    uses: openedx/.github/.github/workflows/update-browserslist-db.yml@master
+
+    secrets:
+        requirements_bot_github_token: ${{ secrets.requirements_bot_github_token }}
diff --git a/.github/workflows/validate.yml b/.github/workflows/validate.yml
index 4bfaf73a27..eb1b783775 100644
--- a/.github/workflows/validate.yml
+++ b/.github/workflows/validate.yml
@@ -1,21 +1,37 @@
 name: validate
 on:
-- push
-- pull_request
+  push:
+    branches:
+    - 'master'
+  pull_request:
+    branches:
+    - '**'
 jobs:
-  build:
+  tests:
     runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node-version:
-        - 12
+
     steps:
-    - uses: actions/checkout@v2
-    - uses: actions/setup-node@v1
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
       with:
-        node-version: ${{ matrix.node-version }}
+        node-version-file: '.nvmrc'
     - run: make validate.ci
+    - name: Archive code coverage results
+      uses: actions/upload-artifact@v4
+      with:
+        name: code-coverage-report
+        path: coverage/*.*
+  coverage:
+    runs-on: ubuntu-latest
+    needs: tests
+    steps:
+    - uses: actions/checkout@v4
+    - name: Download code coverage results
+      uses: actions/download-artifact@v4
+      with:
+        name: code-coverage-report
     - name: Upload coverage
-      uses: codecov/codecov-action@v1
+      uses: codecov/codecov-action@v4
       with:
         fail_ci_if_error: true
+        token: ${{ secrets.CODECOV_TOKEN }}
diff --git a/.gitignore b/.gitignore
index 7ba8a0e7fd..925d1768a4 100755
--- a/.gitignore
+++ b/.gitignore
@@ -20,3 +20,12 @@ temp/babel-plugin-react-intl
 /temp
 /.vscode
 /module.config.js
+
+# Local environment overrides
+.env.private
+
+# Messages .json files fetched by atlas
+src/i18n/messages/
+
+# environment js config
+env.config.jsx
diff --git a/.nvmrc b/.nvmrc
new file mode 100644
index 0000000000..209e3ef4b6
--- /dev/null
+++ b/.nvmrc
@@ -0,0 +1 @@
+20
diff --git a/.stylelintrc.json b/.stylelintrc.json
new file mode 100644
index 0000000000..3990f7720e
--- /dev/null
+++ b/.stylelintrc.json
@@ -0,0 +1,35 @@
+{
+  "extends": ["@edx/stylelint-config-edx"],
+  "rules": {
+    "selector-pseudo-class-no-unknown": [true, {
+      "ignorePseudoClasses": ["export"]
+    }],
+    "unit-no-unknown": [true, {
+      "ignoreUnits": ["\\.5"]
+    }],
+    "property-no-vendor-prefix": [true, {
+      "ignoreProperties": ["animation", "filter", "transform", "transition"]
+    }],
+    "value-no-vendor-prefix": [true, {
+      "ignoreValues": ["fill-available"]
+    }],
+    "function-no-unknown": null,
+    "number-leading-zero": "never",
+    "no-descending-specificity": null,
+    "selector-class-pattern": null,
+    "scss/no-global-function-names": null,
+    "color-hex-case": "upper",
+    "color-hex-length": "long",
+    "scss/dollar-variable-empty-line-before": null,
+    "scss/dollar-variable-colon-space-after": "at-least-one-space",
+    "at-rule-no-unknown": null,
+    "scss/at-rule-no-unknown": true,
+    "scss/at-import-partial-extension": null,
+    "scss/comment-no-empty": null,
+    "import-notation": "string",
+    "property-no-unknown": [true, {
+      "ignoreProperties": ["xs", "sm", "md", "lg", "xl", "xxl"]
+    }],
+    "alpha-value-notation": "number"
+  }
+}
diff --git a/.tx/config b/.tx/config
deleted file mode 100644
index e4ce018970..0000000000
--- a/.tx/config
+++ /dev/null
@@ -1,8 +0,0 @@
-[main]
-host = https://www.transifex.com
-
-[edx-platform.frontend-app-course-authoring]
-file_filter = src/i18n/messages/<lang>.json
-source_file = src/i18n/transifex_input.json
-source_lang = en
-type = KEYVALUEJSON
diff --git a/CODEOWNERS b/CODEOWNERS
new file mode 100644
index 0000000000..0ed4f80a66
--- /dev/null
+++ b/CODEOWNERS
@@ -0,0 +1,2 @@
+# The following users are the maintainers of all frontend-app-authoring files
+*       @openedx/2u-tnl
diff --git a/Makefile b/Makefile
old mode 100755
new mode 100644
index cd540b602a..3d705bfb10
--- a/Makefile
+++ b/Makefile
@@ -1,21 +1,17 @@
-transifex_resource = frontend-app-course-authoring
-transifex_langs = "ar,fr,es_419,zh_CN"
-
+intl_imports = ./node_modules/.bin/intl-imports.js
 transifex_utils = ./node_modules/.bin/transifex-utils.js
 i18n = ./src/i18n
 transifex_input = $(i18n)/transifex_input.json
-tx_url1 = https://www.transifex.com/api/2/project/edx-platform/resource/$(transifex_resource)/translation/en/strings/
-tx_url2 = https://www.transifex.com/api/2/project/edx-platform/resource/$(transifex_resource)/source/
 
 # This directory must match .babelrc .
-transifex_temp = ./temp/babel-plugin-react-intl
+transifex_temp = ./temp/babel-plugin-formatjs
 
 precommit:
 	npm run lint
 	npm audit
 
 requirements:
-	npm install
+	npm ci
 
 i18n.extract:
 	# Pulling display strings from .jsx files into .json files...
@@ -33,20 +29,18 @@ detect_changed_source_translations:
 	# Checking for changed translations...
 	git diff --exit-code $(i18n)
 
-# Pushes translations to Transifex.  You must run make extract_translations first.
-push_translations:
-	# Pushing strings to Transifex...
-	tx push -s
-	# Fetching hashes from Transifex...
-	./node_modules/reactifex/bash_scripts/get_hashed_strings.sh $(tx_url1)
-	# Writing out comments to file...
-	$(transifex_utils) $(transifex_temp) --comments
-	# Pushing comments to Transifex...
-	./node_modules/reactifex/bash_scripts/put_comments.sh $(tx_url2)
-
-# Pulls translations from Transifex.
 pull_translations:
-	tx pull -f --mode reviewed --language=$(transifex_langs)
+	rm -rf src/i18n/messages
+	mkdir src/i18n/messages
+	cd src/i18n/messages \
+	   && atlas pull $(ATLAS_OPTIONS) \
+	            translations/frontend-component-ai-translations/src/i18n/messages:frontend-component-ai-translations \
+	            translations/frontend-platform/src/i18n/messages:frontend-platform \
+	            translations/paragon/src/i18n/messages:paragon \
+	            translations/frontend-component-footer/src/i18n/messages:frontend-component-footer \
+	            translations/frontend-app-course-authoring/src/i18n/messages:frontend-app-course-authoring
+
+	$(intl_imports) frontend-component-ai-translations frontend-platform paragon frontend-component-footer frontend-app-course-authoring
 
 # This target is used by Travis.
 validate-no-uncommitted-package-lock-changes:
@@ -58,9 +52,9 @@ validate:
 	make validate-no-uncommitted-package-lock-changes
 	npm run i18n_extract
 	npm run lint -- --max-warnings 0
-	npm run test
+	npm run types
+	npm run test:ci
 	npm run build
-	npm run is-es5
 
 .PHONY: validate.ci
 validate.ci:
diff --git a/README.rst b/README.rst
index 4e3b35f590..0ce1b7808e 100644
--- a/README.rst
+++ b/README.rst
@@ -1,39 +1,342 @@
-|Build Status| |Codecov| |license|
+frontend-app-authoring
+######################
 
-frontend-app-course-authoring
-=============================
+|license-badge| |status-badge| |codecov-badge|
 
-Please tag `@edx/teaching-and-learning <https://github.com/orgs/edx/teams/teaching-and-learning>`_ on any PRs or issues.  Thanks.
 
-Prerequisite
+Purpose
+*******
+
+This implements most of the frontend for **Open edX Studio**, allowing authors to create and edit courses, libraries, and their learning components.
+
+A few parts of Studio still default to the `"legacy" pages defined in edx-platform <https://github.com/openedx/edx-platform/tree/master/cms>`_, but those are rapidly being deprecated and replaced with the React- and Paragon-based pages defined here.
+
+
+Getting Started
+************
+
+Prerequisites
+=============
+
+`Tutor`_ is currently recommended as a development environment for the Authoring
+MFE. Most likely, it already has this MFE configured; however, you'll need to
+make some changes in order to run it in development mode. You can refer
+to the `relevant tutor-mfe documentation`_ for details, or follow the quick
+guide below.
+
+.. _Tutor: https://github.com/overhangio/tutor
+
+.. _relevant tutor-mfe documentation: https://github.com/overhangio/tutor-mfe#mfe-development
+
+
+Cloning and Setup
+=================
+
+1. Clone your new repo:
+
+.. code-block:: bash
+
+    git clone https://github.com/openedx/frontend-app-authoring.git
+
+2. Use node v20.x.
+
+  The current version of the micro-frontend build scripts supports node 20.
+  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. Stop the Tutor devstack, if it's running: ``tutor dev stop``
+
+4. Next, we need to tell Tutor that we're going to be running this repo in
+   development mode, and it should be excluded from the ``mfe`` container that
+   otherwise runs every MFE. Run this:
+
+.. code-block:: bash
+
+    tutor mounts add /path/to/frontend-app-authoring
+
+5. Start Tutor in development mode. This command will start the LMS and Studio,
+   and other required MFEs like ``authn`` and ``account``, but will not start
+   the Authoring MFE, which we're going to run on the host instead of in a
+   container managed by Tutor. Run:
+
+.. code-block:: bash
+
+    tutor dev start lms cms mfe
+
+Startup
+=======
+
+1. Install npm dependencies:
+
+.. code-block:: bash
+
+  cd frontend-app-authoring && npm ci
+
+2. Start the dev server:
+
+.. code-block:: bash
+
+  npm run dev
+
+Then you can access the app at http://apps.local.openedx.io:2001/course-authoring/home
+
+Troubleshooting
+---------------
+
+* If you see an "Invalid Host header" error, then you're probably using a different domain name for your devstack such as
+  ``local.edly.io`` or ``local.overhang.io`` (not the new recommended default, ``local.openedx.io``). In that case, run
+  these commands to update your devstack's domain names:
+
+.. code-block:: bash
+
+  tutor dev stop
+  tutor config save --set LMS_HOST=local.openedx.io --set CMS_HOST=studio.local.openedx.io
+  tutor dev launch -I --skip-build
+  tutor dev stop authoring  # We will run this MFE on the host
+
+* If tutor-mfe is not starting the authoring MFE in development mode (eg. `tutor dev start authoring` fails), it may be due to
+  using a tutor version that expects the MFE name to be frontend-app-course-authoring (the previous name of this repo). To fix
+  this, you can rename the cloned repo directory to frontend-app-course-authoring. More information can be found in 
+  `this forum post <https://discuss.openedx.org/t/repo-rename-frontend-app-course-authoring-frontend-app-authoring/13930/2>`__.
+
+
+Features
+********
+
+Feature: Pages and Resources Studio Tab
+=======================================
+
+Enables a "Pages & Resources" menu item in Studio, under the "Content" menu.
+
+.. image:: ./docs/readme-images/feature-pages-resources.png
+
+Requirements
 ------------
 
-`Devstack <https://edx.readthedocs.io/projects/edx-installing-configuring-and-running/en/latest/installation/index.html>`_.  If you start Devstack with ``make dev.up.studio`` that should give you everything you need as a companion to this frontend.
+The following are requirements for this feature to function correctly:
+
+* ``edx-platform`` Waffle flags:
+
+  * ``discussions.pages_and_resources_mfe``: must be enabled for the set of users meant to access this feature.
+
+* `frontend-app-learning <https://github.com/openedx/frontend-app-learning>`_: This MFE expects it to be the LMS frontend.
+* `frontend-app-discussions <https://github.com/openedx/frontend-app-discussions/>`_: This is what the "Discussions" configuration provided by this feature actually configures.  Without it, discussion settings are ignored.
+
+Configuration
+-------------
+
+In additional to the standard settings, the following local configuration items are required:
+
+* ``LEARNING_BASE_URL``: points to Learning MFE; necessary so that the `View Live` button works
+* ``ENABLE_PROGRESS_GRAPH_SETTINGS``: allow enabling or disabling the learner progress graph course-wide
+
+Feature Description
+-------------------
+
+Clicking on the "Pages & Resources" menu item takes the user to the course's ``pages-and-resources`` standalone page in this MFE.  (In a devstack, for instance: http://localhost:2001/course/course-v1:edX+DemoX+Demo_Course/pages-and-resources.)
+
+UX-wise, **Pages & Resources** is meant to look like a Studio tab, so reproduces Studio's header.
+
+For a particular course, this page allows one to:
+
+* Configure the new Discussions MFE (making this a requirement for it).  This includes:
+
+  * Enabling/disabling the feature entirely
+  * Picking a different discussion provider, while showing a comparison matrix between them:
+
+    * edX
+    * Ed Discussion
+    * InScribe
+    * Piazza
+    * Yellowdig
+
+  * Allowing to configure the selected provider
+
+* Enable/Disable learner progress
+* Enable/Disable learner notes
+* Enable/Disable the learner wiki
+* Enable/Disable the LMS calculator
+* Go to the textbook management page in Studio (in a devstack: http://localhost:18010/textbooks/course-v1:edX+DemoX+Demo_Course)
+* Go to the custom page management page in Studio(in a devstack http://localhost:18010/tabs/course-v1:edX+DemoX+Demo_Course)
+
+Feature: New React XBlock Editors
+=================================
+
+.. image:: ./docs/readme-images/feature-problem-editor.png
+
+This allows an operator to enable the use of new React editors for the HTML, Video, and Problem XBlocks, all of which are provided here.
+
+Requirements
+------------
+
+* ``edx-platform`` Waffle flags:
+
+  * ``new_core_editors.use_new_text_editor``: must be enabled for the new HTML Xblock editor to be used in Studio
+  * ``new_core_editors.use_new_video_editor``: must be enabled for the new Video Xblock editor to be used in Studio
+  * ``new_core_editors.use_new_problem_editor``: must be enabled for the new Problem Xblock editor to be used in Studio
+
+Feature Description
+-------------------
+
+When a corresponding waffle flag is set, upon editing a block in Studio, the view is rendered by this MFE instead of by the XBlock's authoring view.  The user remains in Studio.
+
+Feature: New Proctoring Exams View
+==================================
+
+.. image:: ./docs/readme-images/feature-proctored-exams.png
+
+Requirements
+------------
+
+* ``edx-platform`` Django settings:
+
+  * ``ZENDESK_*``: necessary if automatic ZenDesk ticket creation is desired
+
+* ``edx-platform`` Feature flags:
+
+  * ``ENABLE_EXAM_SETTINGS_HTML_VIEW``: this feature flag must be enabled for the link to the settings view to be shown
+
+* `edx-exams <https://github.com/edx/edx-exams>`_: for this feature to work, the ``edx-exams`` IDA must be deployed and its API accessible by the browser
+
+Configuration
+-------------
+
+In additional to the standard settings, the following local configuration item is required:
+
+* ``EXAMS_BASE_URL``: URL to the ``edx-exams`` deployment
+
+Feature Description
+-------------------
 
-Installation and Startup
-------------------------
+In Studio, a new item ("Proctored Exam Settings") is added to "Other Course Settings" in the course's "Certificates" settings page.  When clicked, this takes the author to the corresponding page in the Course Authoring MFE, where one can:
 
-1. Clone the repo:
+* Enable proctored exams for the course
+* Allow opting out of proctored exams
+* Select a proctoring provider
+* Enable automatic creation of Zendesk tickets for "suspicious" proctored exam attempts
 
-  ``git clone https://github.com/edx/frontend-app-course-authoring.git``
+Feature: Advanced Settings
+==========================
 
-2. Install npm dependencies:
+.. image:: ./docs/readme-images/feature-advanced-settings.png
 
-  ``cd frontend-app-course-authoring && npm install``
+Requirements
+------------
+
+* ``edx-platform`` Waffle flags:
+
+  * ``contentstore.new_studio_mfe.use_new_advanced_settings_page``: this feature flag must be enabled for the link to the settings view to be shown. It can be enabled on a per-course basis.
+
+Feature Description
+-------------------
+
+In Studio, the "Advanced Settings" page for each enabled course will now be served by this frontend, instead of the UI built into edx-platform. The advanced settings page holds many different settings for the course, such as what features or XBlocks are enabled.
+
+Feature: Files & Uploads
+==========================
+
+.. image:: ./docs/readme-images/feature-files-uploads.png
+
+Requirements
+------------
+
+* ``edx-platform`` Waffle flags:
+
+  * ``contentstore.new_studio_mfe.use_new_files_uploads_page``: this feature flag must be enabled for the link to the Files & Uploads page to go to the MFE. It can be enabled on a per-course basis.
+
+Feature Description
+-------------------
+
+In Studio, the "Files & Uploads" page for each enabled course will now be served by this frontend, instead of the UI built into edx-platform. This page allows managing static asset files like PDFs, images, etc. used for the course.
+
+Feature: Course Updates
+==========================
+
+.. image:: ./docs/readme-images/feature-course-updates.png
+
+Requirements
+------------
+
+* ``edx-platform`` Waffle flags:
+
+  * ``contentstore.new_studio_mfe.use_new_updates_page``: this feature flag must be enabled.
+
+Feature: Import/Export Pages
+============================
 
-3. Start the dev server:
+.. image:: ./docs/readme-images/feature-export.png
 
-  ``npm start``
+Requirements
+------------
+
+* ``edx-platform`` Waffle flags:
+
+  * ``contentstore.new_studio_mfe.use_new_export_page``: this feature flag will change the CMS to link to the new export page.
+  * ``contentstore.new_studio_mfe.use_new_import_page``: this feature flag will change the CMS to link to the new import page.
+
+Feature: Tagging/Taxonomy Pages
+================================
+
+.. image:: ./docs/readme-images/feature-tagging-taxonomy-pages.png
+
+Requirements
+------------
+
+* ``edx-platform`` Waffle flags:
+
+  * ``new_studio_mfe.use_tagging_taxonomy_list_page``: this feature flag must be enabled.
+
+Configuration
+-------------
+
+In additional to the standard settings, the following local configuration items are required:
+
+* ``ENABLE_TAGGING_TAXONOMY_PAGES``: must be enabled (which it is by default) in order to actually enable/show the new 
+Tagging/Taxonomy functionality.
+
+
+Feature: Libraries V2/Legacy Tabs
+=================================
+
+Configuration
+-------------
+
+In additional to the standard settings, the following local configurations can be set to switch between different library modes:
+
+* ``MEILISEARCH_ENABLED``: Studio setting which is enabled when the `meilisearch plugin`_ is installed.
+* ``edx-platform`` Waffle flags:
+
+  * ``contentstore.new_studio_mfe.disable_legacy_libraries``: this feature flag must be OFF to show legacy Libraries V1
+  * ``contentstore.new_studio_mfe.disable_new_libraries``: this feature flag must be OFF to show Content Libraries V2
+
+.. _meilisearch plugin: https://github.com/open-craft/tutor-contrib-meilisearch
+
+Developing
+**********
+
+`Devstack <https://edx.readthedocs.io/projects/edx-installing-configuring-and-running/en/latest/installation/index.html>`_.  If you start Devstack with ``make dev.up.studio`` that should give you everything you need as a companion to this frontend.
 
-The dev server is running at `http://localhost:2001 <http://localhost:2001>`_.
 
 If your devstack includes the default Demo course, you can visit the following URLs to see content:
 
-- `Proctored Exam Settings <http://localhost:2001/course/course-v1:edX+DemoX+Demo_Course/proctored-exam-settings>`_
-- `Pages and Resources <http://localhost:2001/course/course-v1:edX+DemoX+Demo_Course/pages-and-resources>`_ (work in progress)
+- `Pages and Resources <http://localhost:2001/course/course-v1:edX+DemoX+Demo_Course/pages-and-resources>`_
+
+Troubleshooting
+========================
+
+* ``npm ERR! gyp ERR! build error`` while running npm install on Macs with M1 processors: Probably due to a compatibility issue of node-canvas with M1.
+  
+  Run ``brew install pkg-config pixman cairo pango libpng jpeg giflib librsvg`` before ``npm install`` to get the correct versions of the dependencies.
+  If there is still an error, look for "no package [...] found" in the error message and install missing package via brew.
+  (https://github.com/Automattic/node-canvas/issues/1733)
+
+
+Deploying
+*********
 
 Production Build
-----------------
+================
 
 The production build is created with ``npm run build``.
 
@@ -41,5 +344,94 @@ The production build is created with ``npm run build``.
    :target: https://travis-ci.com/edx/frontend-app-course-authoring
 .. |Codecov| image:: https://codecov.io/gh/edx/frontend-app-course-authoring/branch/master/graph/badge.svg
    :target: https://codecov.io/gh/edx/frontend-app-course-authoring
-.. |license| image:: https://img.shields.io/npm/l/@edx/frontend-app-course-authoring.svg
-   :target: @edx/frontend-app-course-authoring
+.. |license| image:: https://img.shields.io/npm/l/@edx/frontend-app-authoring.svg
+   :target: @edx/frontend-app-authoring
+
+Internationalization
+====================
+
+Please see refer to the `frontend-platform i18n howto`_ for documentation on
+internationalization.
+
+.. _frontend-platform i18n howto: https://github.com/openedx/frontend-platform/blob/master/docs/how_tos/i18n.rst
+
+
+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-app-course-authoring/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
+
+
+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.
+
+
+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/
+
+People
+******
+
+The assigned maintainers for this component and other project details may be
+found in `Backstage`_. Backstage pulls this data from the ``catalog-info.yaml``
+file in this repo.
+
+.. _Backstage: https://open-edx-backstage.herokuapp.com/catalog/default/component/frontend-app-course-authoring
+
+
+Reporting Security Issues
+*************************
+
+Please do not report security issues in public, and email security@openedx.org instead.
+
+.. |license-badge| image:: https://img.shields.io/github/license/openedx/frontend-app-course-authoring.svg
+    :target: https://github.com/openedx/frontend-app-course-authoring/blob/master/LICENSE
+    :alt: License
+
+.. |status-badge| image:: https://img.shields.io/badge/Status-Maintained-brightgreen
+
+.. |codecov-badge| image:: https://codecov.io/github/openedx/frontend-app-course-authoring/coverage.svg?branch=master
+    :target: https://codecov.io/github/openedx/frontend-app-course-authoring?branch=master
+    :alt: Codecov
diff --git a/catalog-info.yaml b/catalog-info.yaml
new file mode 100644
index 0000000000..9eec06ff6c
--- /dev/null
+++ b/catalog-info.yaml
@@ -0,0 +1,18 @@
+# This file records information about this repo. Its use is described in OEP-55:
+# https://open-edx-proposals.readthedocs.io/en/latest/processes/oep-0055-proc-project-maintainers.html
+
+apiVersion: backstage.io/v1alpha1
+kind: Component
+metadata:
+  name: 'frontend-app-authoring'
+  description: "The frontend (MFE) for Open edX Authoring (aka Studio)"
+  links:
+    - url: "https://github.com/openedx/frontend-app-authoring"
+      title: "Frontend app authoring"
+      icon: "Web"
+  annotations:
+    openedx.org/arch-interest-groups: ""
+spec:
+  owner: group:2u-tnl
+  type: 'website'
+  lifecycle: 'production'
diff --git a/codecov.yml b/codecov.yml
index c41479bad7..64b8f80010 100644
--- a/codecov.yml
+++ b/codecov.yml
@@ -8,3 +8,6 @@ coverage:
       default:
         target: auto
         threshold: 0%
+ignore:
+  - "src/grading-settings/grading-scale/react-ranger.js"
+  - "src/index.js"
diff --git a/docs/how_tos/i18n.rst b/docs/how_tos/i18n.rst
index 898f0f531a..8fbb1896f7 100644
--- a/docs/how_tos/i18n.rst
+++ b/docs/how_tos/i18n.rst
@@ -2,4 +2,4 @@
 React App i18n HOWTO
 ####################
 
-This document has moved to the frontend-platform repo: https://github.com/edx/frontend-platform/blob/master/docs/how_tos/i18n.rst
+This document has moved to the frontend-platform repo: https://github.com/openedx/frontend-platform/blob/master/docs/how_tos/i18n.rst
diff --git a/docs/readme-images/feature-advanced-settings.png b/docs/readme-images/feature-advanced-settings.png
new file mode 100644
index 0000000000..73df080e17
Binary files /dev/null and b/docs/readme-images/feature-advanced-settings.png differ
diff --git a/docs/readme-images/feature-course-updates.png b/docs/readme-images/feature-course-updates.png
new file mode 100644
index 0000000000..2bc9620fd7
Binary files /dev/null and b/docs/readme-images/feature-course-updates.png differ
diff --git a/docs/readme-images/feature-export.png b/docs/readme-images/feature-export.png
new file mode 100644
index 0000000000..fbbec31d66
Binary files /dev/null and b/docs/readme-images/feature-export.png differ
diff --git a/docs/readme-images/feature-files-uploads.png b/docs/readme-images/feature-files-uploads.png
new file mode 100644
index 0000000000..a13132223b
Binary files /dev/null and b/docs/readme-images/feature-files-uploads.png differ
diff --git a/docs/readme-images/feature-pages-resources.png b/docs/readme-images/feature-pages-resources.png
new file mode 100644
index 0000000000..8b2316f280
Binary files /dev/null and b/docs/readme-images/feature-pages-resources.png differ
diff --git a/docs/readme-images/feature-problem-editor.png b/docs/readme-images/feature-problem-editor.png
new file mode 100644
index 0000000000..75f3504e62
Binary files /dev/null and b/docs/readme-images/feature-problem-editor.png differ
diff --git a/docs/readme-images/feature-proctored-exams.png b/docs/readme-images/feature-proctored-exams.png
new file mode 100644
index 0000000000..e0b25d9f27
Binary files /dev/null and b/docs/readme-images/feature-proctored-exams.png differ
diff --git a/docs/readme-images/feature-tagging-taxonomy-pages.png b/docs/readme-images/feature-tagging-taxonomy-pages.png
new file mode 100644
index 0000000000..e27c469c51
Binary files /dev/null and b/docs/readme-images/feature-tagging-taxonomy-pages.png differ
diff --git a/example.env.config.jsx b/example.env.config.jsx
new file mode 100644
index 0000000000..e57c7d7668
--- /dev/null
+++ b/example.env.config.jsx
@@ -0,0 +1,24 @@
+import WholeCourseTranslation from '@edx/course-app-translation-plugin';
+import { PLUGIN_OPERATIONS, DIRECT_PLUGIN } from '@openedx/frontend-plugin-framework';
+
+// Load environment variables from .env file
+const config = {
+  ...process.env,
+  pluginSlots: {
+    additional_course_plugin: {
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'whole-course-translation-plugin',
+            type: DIRECT_PLUGIN,
+            priority: 1,
+            RenderWidget: WholeCourseTranslation,
+          },
+        },
+      ],
+    },
+  },
+};
+
+export default config;
diff --git a/jest.config.js b/jest.config.js
index dc38c063ea..0af1e62af2 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -1,11 +1,19 @@
-const { createConfig } = require('@edx/frontend-build');
+const { createConfig } = require('@openedx/frontend-build');
 
 module.exports = createConfig('jest', {
   setupFilesAfterEnv: [
+    'jest-expect-message',
     '<rootDir>/src/setupTest.js',
   ],
   coveragePathIgnorePatterns: [
     'src/setupTest.js',
     'src/i18n',
   ],
+  moduleNameMapper: {
+    '^lodash-es$': 'lodash',
+    '^CourseAuthoring/(.*)$': '<rootDir>/src/$1',
+  },
+  modulePathIgnorePatterns: [
+    '/src/pages-and-resources/utils.test.jsx',
+  ],
 });
diff --git a/openedx.yaml b/openedx.yaml
index ffbf76f540..4e57270214 100644
--- a/openedx.yaml
+++ b/openedx.yaml
@@ -4,3 +4,8 @@
 nick: cath
 oeps: {}
 owner: edx/platform-core-tnl
+openedx-release:
+  # The openedx-release key is described in OEP-10:
+  #   https://open-edx-proposals.readthedocs.io/en/latest/oep-0010-proc-openedx-releases.html
+  # The FAQ might also be helpful: https://openedx.atlassian.net/wiki/spaces/COMM/pages/1331268879/Open+edX+Release+FAQ
+  ref: master
diff --git a/package-lock.json b/package-lock.json
index 7c9e66a93e..6689a22cee 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,56338 +1,21162 @@
 {
-  "name": "@edx/frontend-app-course-authoring",
+  "name": "@edx/frontend-app-authoring",
   "version": "0.1.0",
-  "lockfileVersion": 2,
+  "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "@edx/frontend-app-course-authoring",
+      "name": "@edx/frontend-app-authoring",
       "version": "0.1.0",
       "license": "AGPL-3.0",
       "dependencies": {
-        "@edx/brand": "npm:@edx/brand-openedx@1.1.0",
-        "@edx/frontend-component-footer": "10.0.11",
-        "@edx/frontend-platform": "1.11.0",
-        "@edx/paragon": "16.6.4",
-        "@fortawesome/fontawesome-svg-core": "1.2.28",
-        "@fortawesome/free-brands-svg-icons": "5.11.2",
-        "@fortawesome/free-regular-svg-icons": "5.11.2",
-        "@fortawesome/free-solid-svg-icons": "5.11.2",
-        "@fortawesome/react-fontawesome": "0.1.9",
-        "@reduxjs/toolkit": "1.5.0",
-        "classnames": "2.2.6",
-        "core-js": "3.8.1",
+        "@codemirror/lang-html": "^6.0.0",
+        "@codemirror/lang-xml": "^6.0.0",
+        "@codemirror/lint": "^6.2.1",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "@dnd-kit/core": "^6.1.0",
+        "@dnd-kit/modifiers": "^7.0.0",
+        "@dnd-kit/sortable": "^8.0.0",
+        "@dnd-kit/utilities": "^3.2.2",
+        "@edx/brand": "npm:@openedx/brand-openedx@^1.2.3",
+        "@edx/browserslist-config": "1.2.0",
+        "@edx/frontend-component-footer": "^14.1.0",
+        "@edx/frontend-component-header": "^5.8.0",
+        "@edx/frontend-enterprise-hotjar": "^2.0.0",
+        "@edx/frontend-platform": "^8.0.3",
+        "@edx/openedx-atlas": "^0.6.0",
+        "@openedx-plugins/course-app-calculator": "file:plugins/course-apps/calculator",
+        "@openedx-plugins/course-app-edxnotes": "file:plugins/course-apps/edxnotes",
+        "@openedx-plugins/course-app-learning_assistant": "file:plugins/course-apps/learning_assistant",
+        "@openedx-plugins/course-app-live": "file:plugins/course-apps/live",
+        "@openedx-plugins/course-app-ora_settings": "file:plugins/course-apps/ora_settings",
+        "@openedx-plugins/course-app-proctoring": "file:plugins/course-apps/proctoring",
+        "@openedx-plugins/course-app-progress": "file:plugins/course-apps/progress",
+        "@openedx-plugins/course-app-teams": "file:plugins/course-apps/teams",
+        "@openedx-plugins/course-app-wiki": "file:plugins/course-apps/wiki",
+        "@openedx-plugins/course-app-xpert_unit_summary": "file:plugins/course-apps/xpert_unit_summary",
+        "@openedx/frontend-build": "^14.2.0",
+        "@openedx/frontend-plugin-framework": "^1.2.1",
+        "@openedx/paragon": "^22.8.1",
+        "@redux-devtools/extension": "^3.3.0",
+        "@reduxjs/toolkit": "1.9.7",
+        "@tanstack/react-query": "4.36.1",
+        "@tinymce/tinymce-react": "^3.14.0",
+        "classnames": "2.5.1",
+        "codemirror": "^6.0.0",
         "email-validator": "2.0.4",
-        "formik": "2.2.6",
+        "fast-xml-parser": "^4.0.10",
+        "file-saver": "^2.0.5",
+        "formik": "2.4.6",
+        "frontend-components-tinymce-advanced-plugins": "^1.0.3",
+        "jszip": "^3.10.1",
         "lodash": "4.17.21",
-        "moment": "2.27.0",
-        "prop-types": "15.7.2",
-        "react": "16.14.0",
-        "react-dom": "16.14.0",
-        "react-redux": "7.1.3",
-        "react-responsive": "8.1.0",
-        "react-router": "5.1.2",
-        "react-router-dom": "5.1.2",
-        "react-transition-group": "4.4.1",
+        "meilisearch": "^0.41.0",
+        "moment": "2.30.1",
+        "moment-shortformat": "^2.1.0",
+        "npm": "^10.8.1",
+        "prop-types": "^15.8.1",
+        "react": "17.0.2",
+        "react-datepicker": "^4.13.0",
+        "react-dom": "17.0.2",
+        "react-error-boundary": "^4.0.13",
+        "react-helmet": "^6.1.0",
+        "react-onclickoutside": "^6.13.0",
+        "react-redux": "7.2.9",
+        "react-responsive": "9.0.2",
+        "react-router": "6.27.0",
+        "react-router-dom": "6.27.0",
+        "react-select": "5.8.0",
+        "react-textarea-autosize": "^8.5.3",
+        "react-transition-group": "4.4.5",
         "redux": "4.0.5",
-        "regenerator-runtime": "0.13.7",
+        "redux-logger": "^3.0.6",
+        "redux-thunk": "^2.4.1",
+        "reselect": "^4.1.5",
+        "start": "^5.1.0",
+        "tinymce": "^5.10.4",
+        "universal-cookie": "^4.0.4",
         "uuid": "^3.4.0",
+        "xmlchecker": "^0.1.0",
         "yup": "0.31.1"
       },
       "devDependencies": {
-        "@edx/frontend-build": "7.0.0",
-        "@testing-library/jest-dom": "5.11.10",
-        "@testing-library/react": "10.4.7",
-        "@testing-library/user-event": "^13.1.5",
-        "axios-mock-adapter": "1.18.1",
-        "codecov": "3.7.1",
-        "es-check": "5.1.0",
-        "glob": "7.1.6",
-        "husky": "3.1.0",
-        "jest": "24.9.0",
-        "react-test-renderer": "16.9.0",
-        "reactifex": "1.1.1"
+        "@edx/react-unit-test-utils": "3.0.0",
+        "@edx/stylelint-config-edx": "2.3.3",
+        "@edx/typescript-config": "^1.0.1",
+        "@testing-library/jest-dom": "5.17.0",
+        "@testing-library/react": "12.1.5",
+        "@testing-library/react-hooks": "^8.0.1",
+        "@testing-library/user-event": "^13.2.1",
+        "@types/lodash": "^4.17.7",
+        "axios-mock-adapter": "1.22.0",
+        "eslint-import-resolver-webpack": "^0.13.8",
+        "fetch-mock-jest": "^1.5.1",
+        "husky": "7.0.4",
+        "jest-canvas-mock": "^2.5.2",
+        "jest-expect-message": "^1.1.3",
+        "react-test-renderer": "17.0.2",
+        "redux-mock-store": "^1.5.4"
+      }
+    },
+    "node_modules/@adobe/css-tools": {
+      "version": "4.4.0",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@ampproject/remapping": {
+      "version": "2.3.0",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      },
+      "engines": {
+        "node": ">=6.0.0"
       }
     },
     "node_modules/@babel/cli": {
-      "version": "7.10.5",
-      "resolved": "https://registry.npmjs.org/@babel/cli/-/cli-7.10.5.tgz",
-      "integrity": "sha512-j9H9qSf3kLdM0Ao3aGPbGZ73mEA9XazuupcS6cDGWuiyAcANoguhP0r2Lx32H5JGw4sSSoHG3x/mxVnHgvOoyA==",
-      "dev": true,
+      "version": "7.24.8",
+      "license": "MIT",
       "dependencies": {
-        "chokidar": "^2.1.8",
-        "commander": "^4.0.1",
-        "convert-source-map": "^1.1.0",
+        "@jridgewell/trace-mapping": "^0.3.25",
+        "commander": "^6.2.0",
+        "convert-source-map": "^2.0.0",
         "fs-readdir-recursive": "^1.1.0",
-        "glob": "^7.0.0",
-        "lodash": "^4.17.19",
+        "glob": "^7.2.0",
         "make-dir": "^2.1.0",
-        "slash": "^2.0.0",
-        "source-map": "^0.5.0"
+        "slash": "^2.0.0"
       },
       "bin": {
         "babel": "bin/babel.js",
         "babel-external-helpers": "bin/babel-external-helpers.js"
-      }
-    },
-    "node_modules/@babel/cli/node_modules/source-map": {
-      "version": "0.5.7",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-      "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
-      "dev": true,
+      },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=6.9.0"
+      },
+      "optionalDependencies": {
+        "@nicolo-ribaudo/chokidar-2": "2.1.8-no-fsevents.3",
+        "chokidar": "^3.4.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
     "node_modules/@babel/code-frame": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz",
-      "integrity": "sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==",
-      "dev": true,
+      "version": "7.24.7",
+      "license": "MIT",
       "dependencies": {
-        "@babel/highlight": "^7.10.4"
+        "@babel/highlight": "^7.24.7",
+        "picocolors": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/compat-data": {
-      "version": "7.14.7",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.14.7.tgz",
-      "integrity": "sha512-nS6dZaISCXJ3+518CWiBfEr//gHyMO02uDxBkXTKZDN5POruCnOZ1N4YBRZDCabwF8nZMWBpRxIicmXtBs+fvw==",
-      "dev": true,
+      "version": "7.25.2",
+      "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/core": {
-      "version": "7.9.0",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.9.0.tgz",
-      "integrity": "sha512-kWc7L0fw1xwvI0zi8OKVBuxRVefwGOrKSQMvrQ3dW+bIIavBY3/NpXmpjMy7bQnLgwgzWQZ8TlM57YHpHNHz4w==",
-      "dev": true,
-      "dependencies": {
-        "@babel/code-frame": "^7.8.3",
-        "@babel/generator": "^7.9.0",
-        "@babel/helper-module-transforms": "^7.9.0",
-        "@babel/helpers": "^7.9.0",
-        "@babel/parser": "^7.9.0",
-        "@babel/template": "^7.8.6",
-        "@babel/traverse": "^7.9.0",
-        "@babel/types": "^7.9.0",
-        "convert-source-map": "^1.7.0",
+      "version": "7.24.9",
+      "license": "MIT",
+      "dependencies": {
+        "@ampproject/remapping": "^2.2.0",
+        "@babel/code-frame": "^7.24.7",
+        "@babel/generator": "^7.24.9",
+        "@babel/helper-compilation-targets": "^7.24.8",
+        "@babel/helper-module-transforms": "^7.24.9",
+        "@babel/helpers": "^7.24.8",
+        "@babel/parser": "^7.24.8",
+        "@babel/template": "^7.24.7",
+        "@babel/traverse": "^7.24.8",
+        "@babel/types": "^7.24.9",
+        "convert-source-map": "^2.0.0",
         "debug": "^4.1.0",
-        "gensync": "^1.0.0-beta.1",
-        "json5": "^2.1.2",
-        "lodash": "^4.17.13",
-        "resolve": "^1.3.2",
-        "semver": "^5.4.1",
-        "source-map": "^0.5.0"
+        "gensync": "^1.0.0-beta.2",
+        "json5": "^2.2.3",
+        "semver": "^6.3.1"
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/babel"
       }
     },
-    "node_modules/@babel/core/node_modules/debug": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
-      "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
-      "dev": true,
+    "node_modules/@babel/eslint-parser": {
+      "version": "7.22.9",
+      "license": "MIT",
       "dependencies": {
-        "ms": "^2.1.1"
-      }
-    },
-    "node_modules/@babel/core/node_modules/ms": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-      "dev": true
-    },
-    "node_modules/@babel/core/node_modules/source-map": {
-      "version": "0.5.7",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-      "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
-      "dev": true,
+        "@nicolo-ribaudo/eslint-scope-5-internals": "5.1.1-v1",
+        "eslint-visitor-keys": "^2.1.0",
+        "semver": "^6.3.1"
+      },
       "engines": {
-        "node": ">=0.10.0"
+        "node": "^10.13.0 || ^12.13.0 || >=14.0.0"
+      },
+      "peerDependencies": {
+        "@babel/core": ">=7.11.0",
+        "eslint": "^7.5.0 || ^8.0.0"
       }
     },
     "node_modules/@babel/generator": {
-      "version": "7.10.5",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.10.5.tgz",
-      "integrity": "sha512-3vXxr3FEW7E7lJZiWQ3bM4+v/Vyr9C+hpolQ8BGFr9Y8Ri2tFLWTixmwKBafDujO1WVah4fhZBeU1bieKdghig==",
-      "dev": true,
-      "dependencies": {
-        "@babel/types": "^7.10.5",
-        "jsesc": "^2.5.1",
-        "source-map": "^0.5.0"
-      }
-    },
-    "node_modules/@babel/generator/node_modules/source-map": {
-      "version": "0.5.7",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-      "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/@babel/helper-annotate-as-pure": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.14.5.tgz",
-      "integrity": "sha512-EivH9EgBIb+G8ij1B2jAwSH36WnGvkQSEC6CkX/6v6ZFlw5fVOHvsgGF4uiEHO2GzMvunZb6tDLQEQSdrdocrA==",
-      "dev": true,
+      "version": "7.25.0",
+      "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.14.5"
+        "@babel/types": "^7.25.0",
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.25",
+        "jsesc": "^2.5.1"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@babel/helper-annotate-as-pure/node_modules/@babel/helper-validator-identifier": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz",
-      "integrity": "sha512-5lsetuxCLilmVGyiLEfoHBRX8UCFD+1m2x3Rj97WrW3V7H3u4RWRXA4evMjImCsin2J2YT0QaVDGf+z8ondbAg==",
-      "dev": true,
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-annotate-as-pure/node_modules/@babel/types": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.5.tgz",
-      "integrity": "sha512-M/NzBpEL95I5Hh4dwhin5JlE7EzO5PHMAuzjxss3tiOBD46KfQvVedN/3jEPZvdRvtsK2222XfdHogNIttFgcg==",
-      "dev": true,
+    "node_modules/@babel/helper-annotate-as-pure": {
+      "version": "7.24.7",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-validator-identifier": "^7.14.5",
-        "to-fast-properties": "^2.0.0"
+        "@babel/types": "^7.24.7"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-builder-binary-assignment-operator-visitor": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.14.5.tgz",
-      "integrity": "sha512-YTA/Twn0vBXDVGJuAX6PwW7x5zQei1luDDo2Pl6q1qZ7hVNl0RZrhHCQG/ArGpR29Vl7ETiB8eJyrvpuRp300w==",
-      "dev": true,
+      "version": "7.24.7",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-explode-assignable-expression": "^7.14.5",
-        "@babel/types": "^7.14.5"
+        "@babel/traverse": "^7.24.7",
+        "@babel/types": "^7.24.7"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@babel/helper-builder-binary-assignment-operator-visitor/node_modules/@babel/helper-validator-identifier": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz",
-      "integrity": "sha512-5lsetuxCLilmVGyiLEfoHBRX8UCFD+1m2x3Rj97WrW3V7H3u4RWRXA4evMjImCsin2J2YT0QaVDGf+z8ondbAg==",
-      "dev": true,
+    "node_modules/@babel/helper-compilation-targets": {
+      "version": "7.25.2",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/compat-data": "^7.25.2",
+        "@babel/helper-validator-option": "^7.24.8",
+        "browserslist": "^4.23.1",
+        "lru-cache": "^5.1.1",
+        "semver": "^6.3.1"
+      },
       "engines": {
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@babel/helper-builder-binary-assignment-operator-visitor/node_modules/@babel/types": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.5.tgz",
-      "integrity": "sha512-M/NzBpEL95I5Hh4dwhin5JlE7EzO5PHMAuzjxss3tiOBD46KfQvVedN/3jEPZvdRvtsK2222XfdHogNIttFgcg==",
-      "dev": true,
+    "node_modules/@babel/helper-create-class-features-plugin": {
+      "version": "7.25.0",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-validator-identifier": "^7.14.5",
-        "to-fast-properties": "^2.0.0"
+        "@babel/helper-annotate-as-pure": "^7.24.7",
+        "@babel/helper-member-expression-to-functions": "^7.24.8",
+        "@babel/helper-optimise-call-expression": "^7.24.7",
+        "@babel/helper-replace-supers": "^7.25.0",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.24.7",
+        "@babel/traverse": "^7.25.0",
+        "semver": "^6.3.1"
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
       }
     },
-    "node_modules/@babel/helper-compilation-targets": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.14.5.tgz",
-      "integrity": "sha512-v+QtZqXEiOnpO6EYvlImB6zCD2Lel06RzOPzmkz/D/XgQiUu3C/Jb1LOqSt/AIA34TYi/Q+KlT8vTQrgdxkbLw==",
-      "dev": true,
+    "node_modules/@babel/helper-create-regexp-features-plugin": {
+      "version": "7.25.2",
+      "license": "MIT",
       "dependencies": {
-        "@babel/compat-data": "^7.14.5",
-        "@babel/helper-validator-option": "^7.14.5",
-        "browserslist": "^4.16.6",
-        "semver": "^6.3.0"
+        "@babel/helper-annotate-as-pure": "^7.24.7",
+        "regexpu-core": "^5.3.1",
+        "semver": "^6.3.1"
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
       }
     },
-    "node_modules/@babel/helper-compilation-targets/node_modules/semver": {
-      "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-      "dev": true,
-      "bin": {
-        "semver": "bin/semver.js"
+    "node_modules/@babel/helper-define-polyfill-provider": {
+      "version": "0.6.2",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-compilation-targets": "^7.22.6",
+        "@babel/helper-plugin-utils": "^7.22.5",
+        "debug": "^4.1.1",
+        "lodash.debounce": "^4.0.8",
+        "resolve": "^1.14.2"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
       }
     },
-    "node_modules/@babel/helper-create-class-features-plugin": {
-      "version": "7.14.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.14.6.tgz",
-      "integrity": "sha512-Z6gsfGofTxH/+LQXqYEK45kxmcensbzmk/oi8DmaQytlQCgqNZt9XQF8iqlI/SeXWVjaMNxvYvzaYw+kh42mDg==",
-      "dev": true,
+    "node_modules/@babel/helper-member-expression-to-functions": {
+      "version": "7.24.8",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-annotate-as-pure": "^7.14.5",
-        "@babel/helper-function-name": "^7.14.5",
-        "@babel/helper-member-expression-to-functions": "^7.14.5",
-        "@babel/helper-optimise-call-expression": "^7.14.5",
-        "@babel/helper-replace-supers": "^7.14.5",
-        "@babel/helper-split-export-declaration": "^7.14.5"
+        "@babel/traverse": "^7.24.8",
+        "@babel/types": "^7.24.8"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@babel/helper-create-class-features-plugin/node_modules/@babel/code-frame": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.14.5.tgz",
-      "integrity": "sha512-9pzDqyc6OLDaqe+zbACgFkb6fKMNG6CObKpnYXChRsvYGyEdc7CA2BaqeOM+vOtCS5ndmJicPJhKAwYRI6UfFw==",
-      "dev": true,
+    "node_modules/@babel/helper-module-imports": {
+      "version": "7.24.7",
+      "license": "MIT",
       "dependencies": {
-        "@babel/highlight": "^7.14.5"
+        "@babel/traverse": "^7.24.7",
+        "@babel/types": "^7.24.7"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@babel/helper-create-class-features-plugin/node_modules/@babel/generator": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.14.5.tgz",
-      "integrity": "sha512-y3rlP+/G25OIX3mYKKIOlQRcqj7YgrvHxOLbVmyLJ9bPmi5ttvUmpydVjcFjZphOktWuA7ovbx91ECloWTfjIA==",
-      "dev": true,
+    "node_modules/@babel/helper-module-transforms": {
+      "version": "7.25.2",
+      "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.14.5",
-        "jsesc": "^2.5.1",
-        "source-map": "^0.5.0"
+        "@babel/helper-module-imports": "^7.24.7",
+        "@babel/helper-simple-access": "^7.24.7",
+        "@babel/helper-validator-identifier": "^7.24.7",
+        "@babel/traverse": "^7.25.2"
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
       }
     },
-    "node_modules/@babel/helper-create-class-features-plugin/node_modules/@babel/helper-function-name": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.14.5.tgz",
-      "integrity": "sha512-Gjna0AsXWfFvrAuX+VKcN/aNNWonizBj39yGwUzVDVTlMYJMK2Wp6xdpy72mfArFq5uK+NOuexfzZlzI1z9+AQ==",
-      "dev": true,
+    "node_modules/@babel/helper-optimise-call-expression": {
+      "version": "7.24.7",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-get-function-arity": "^7.14.5",
-        "@babel/template": "^7.14.5",
-        "@babel/types": "^7.14.5"
+        "@babel/types": "^7.24.7"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@babel/helper-create-class-features-plugin/node_modules/@babel/helper-get-function-arity": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.14.5.tgz",
-      "integrity": "sha512-I1Db4Shst5lewOM4V+ZKJzQ0JGGaZ6VY1jYvMghRjqs6DWgxLCIyFt30GlnKkfUeFLpJt2vzbMVEXVSXlIFYUg==",
-      "dev": true,
-      "dependencies": {
-        "@babel/types": "^7.14.5"
-      },
+    "node_modules/@babel/helper-plugin-utils": {
+      "version": "7.24.8",
+      "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@babel/helper-create-class-features-plugin/node_modules/@babel/helper-member-expression-to-functions": {
-      "version": "7.14.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.14.7.tgz",
-      "integrity": "sha512-TMUt4xKxJn6ccjcOW7c4hlwyJArizskAhoSTOCkA0uZ+KghIaci0Qg9R043kUMWI9mtQfgny+NQ5QATnZ+paaA==",
-      "dev": true,
+    "node_modules/@babel/helper-remap-async-to-generator": {
+      "version": "7.25.0",
+      "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.14.5"
+        "@babel/helper-annotate-as-pure": "^7.24.7",
+        "@babel/helper-wrap-function": "^7.25.0",
+        "@babel/traverse": "^7.25.0"
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
       }
     },
-    "node_modules/@babel/helper-create-class-features-plugin/node_modules/@babel/helper-optimise-call-expression": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.14.5.tgz",
-      "integrity": "sha512-IqiLIrODUOdnPU9/F8ib1Fx2ohlgDhxnIDU7OEVi+kAbEZcyiF7BLU8W6PfvPi9LzztjS7kcbzbmL7oG8kD6VA==",
-      "dev": true,
+    "node_modules/@babel/helper-replace-supers": {
+      "version": "7.25.0",
+      "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.14.5"
+        "@babel/helper-member-expression-to-functions": "^7.24.8",
+        "@babel/helper-optimise-call-expression": "^7.24.7",
+        "@babel/traverse": "^7.25.0"
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
       }
     },
-    "node_modules/@babel/helper-create-class-features-plugin/node_modules/@babel/helper-replace-supers": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.14.5.tgz",
-      "integrity": "sha512-3i1Qe9/8x/hCHINujn+iuHy+mMRLoc77b2nI9TB0zjH1hvn9qGlXjWlggdwUcju36PkPCy/lpM7LLUdcTyH4Ow==",
-      "dev": true,
+    "node_modules/@babel/helper-simple-access": {
+      "version": "7.24.7",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-member-expression-to-functions": "^7.14.5",
-        "@babel/helper-optimise-call-expression": "^7.14.5",
-        "@babel/traverse": "^7.14.5",
-        "@babel/types": "^7.14.5"
+        "@babel/traverse": "^7.24.7",
+        "@babel/types": "^7.24.7"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@babel/helper-create-class-features-plugin/node_modules/@babel/helper-split-export-declaration": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.14.5.tgz",
-      "integrity": "sha512-hprxVPu6e5Kdp2puZUmvOGjaLv9TCe58E/Fl6hRq4YiVQxIcNvuq6uTM2r1mT/oPskuS9CgR+I94sqAYv0NGKA==",
-      "dev": true,
+    "node_modules/@babel/helper-skip-transparent-expression-wrappers": {
+      "version": "7.24.7",
+      "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.14.5"
+        "@babel/traverse": "^7.24.7",
+        "@babel/types": "^7.24.7"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@babel/helper-create-class-features-plugin/node_modules/@babel/helper-validator-identifier": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz",
-      "integrity": "sha512-5lsetuxCLilmVGyiLEfoHBRX8UCFD+1m2x3Rj97WrW3V7H3u4RWRXA4evMjImCsin2J2YT0QaVDGf+z8ondbAg==",
-      "dev": true,
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.24.8",
+      "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@babel/helper-create-class-features-plugin/node_modules/@babel/highlight": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.14.5.tgz",
-      "integrity": "sha512-qf9u2WFWVV0MppaL877j2dBtQIDgmidgjGk5VIMw3OadXvYaXn66U1BFlH2t4+t3i+8PhedppRv+i40ABzd+gg==",
-      "dev": true,
-      "dependencies": {
-        "@babel/helper-validator-identifier": "^7.14.5",
-        "chalk": "^2.0.0",
-        "js-tokens": "^4.0.0"
-      },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.24.7",
+      "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@babel/helper-create-class-features-plugin/node_modules/@babel/parser": {
-      "version": "7.14.7",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.14.7.tgz",
-      "integrity": "sha512-X67Z5y+VBJuHB/RjwECp8kSl5uYi0BvRbNeWqkaJCVh+LiTPl19WBUfG627psSgp9rSf6ojuXghQM3ha6qHHdA==",
-      "dev": true,
-      "bin": {
-        "parser": "bin/babel-parser.js"
-      },
+    "node_modules/@babel/helper-validator-option": {
+      "version": "7.24.8",
+      "license": "MIT",
       "engines": {
-        "node": ">=6.0.0"
+        "node": ">=6.9.0"
       }
     },
-    "node_modules/@babel/helper-create-class-features-plugin/node_modules/@babel/template": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.14.5.tgz",
-      "integrity": "sha512-6Z3Po85sfxRGachLULUhOmvAaOo7xCvqGQtxINai2mEGPFm6pQ4z5QInFnUrRpfoSV60BnjyF5F3c+15fxFV1g==",
-      "dev": true,
+    "node_modules/@babel/helper-wrap-function": {
+      "version": "7.25.0",
+      "license": "MIT",
       "dependencies": {
-        "@babel/code-frame": "^7.14.5",
-        "@babel/parser": "^7.14.5",
-        "@babel/types": "^7.14.5"
+        "@babel/template": "^7.25.0",
+        "@babel/traverse": "^7.25.0",
+        "@babel/types": "^7.25.0"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@babel/helper-create-class-features-plugin/node_modules/@babel/traverse": {
-      "version": "7.14.7",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.14.7.tgz",
-      "integrity": "sha512-9vDr5NzHu27wgwejuKL7kIOm4bwEtaPQ4Z6cpCmjSuaRqpH/7xc4qcGEscwMqlkwgcXl6MvqoAjZkQ24uSdIZQ==",
-      "dev": true,
+    "node_modules/@babel/helpers": {
+      "version": "7.25.0",
+      "license": "MIT",
       "dependencies": {
-        "@babel/code-frame": "^7.14.5",
-        "@babel/generator": "^7.14.5",
-        "@babel/helper-function-name": "^7.14.5",
-        "@babel/helper-hoist-variables": "^7.14.5",
-        "@babel/helper-split-export-declaration": "^7.14.5",
-        "@babel/parser": "^7.14.7",
-        "@babel/types": "^7.14.5",
-        "debug": "^4.1.0",
-        "globals": "^11.1.0"
+        "@babel/template": "^7.25.0",
+        "@babel/types": "^7.25.0"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@babel/helper-create-class-features-plugin/node_modules/@babel/types": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.5.tgz",
-      "integrity": "sha512-M/NzBpEL95I5Hh4dwhin5JlE7EzO5PHMAuzjxss3tiOBD46KfQvVedN/3jEPZvdRvtsK2222XfdHogNIttFgcg==",
-      "dev": true,
+    "node_modules/@babel/highlight": {
+      "version": "7.24.7",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-validator-identifier": "^7.14.5",
-        "to-fast-properties": "^2.0.0"
+        "@babel/helper-validator-identifier": "^7.24.7",
+        "chalk": "^2.4.2",
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.0.0"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@babel/helper-create-class-features-plugin/node_modules/source-map": {
-      "version": "0.5.7",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-      "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
-      "dev": true,
+    "node_modules/@babel/highlight/node_modules/ansi-styles": {
+      "version": "3.2.1",
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^1.9.0"
+      },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=4"
       }
     },
-    "node_modules/@babel/helper-create-regexp-features-plugin": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.14.5.tgz",
-      "integrity": "sha512-TLawwqpOErY2HhWbGJ2nZT5wSkR192QpN+nBg1THfBfftrlvOh+WbhrxXCH4q4xJ9Gl16BGPR/48JA+Ryiho/A==",
-      "dev": true,
+    "node_modules/@babel/highlight/node_modules/chalk": {
+      "version": "2.4.2",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-annotate-as-pure": "^7.14.5",
-        "regexpu-core": "^4.7.1"
+        "ansi-styles": "^3.2.1",
+        "escape-string-regexp": "^1.0.5",
+        "supports-color": "^5.3.0"
       },
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=4"
       }
     },
-    "node_modules/@babel/helper-define-polyfill-provider": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.2.3.tgz",
-      "integrity": "sha512-RH3QDAfRMzj7+0Nqu5oqgO5q9mFtQEVvCRsi8qCEfzLR9p2BHfn5FzhSB2oj1fF7I2+DcTORkYaQ6aTR9Cofew==",
-      "dev": true,
+    "node_modules/@babel/highlight/node_modules/color-convert": {
+      "version": "1.9.3",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-compilation-targets": "^7.13.0",
-        "@babel/helper-module-imports": "^7.12.13",
-        "@babel/helper-plugin-utils": "^7.13.0",
-        "@babel/traverse": "^7.13.0",
-        "debug": "^4.1.1",
-        "lodash.debounce": "^4.0.8",
-        "resolve": "^1.14.2",
-        "semver": "^6.1.2"
+        "color-name": "1.1.3"
       }
     },
-    "node_modules/@babel/helper-define-polyfill-provider/node_modules/@babel/code-frame": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.14.5.tgz",
-      "integrity": "sha512-9pzDqyc6OLDaqe+zbACgFkb6fKMNG6CObKpnYXChRsvYGyEdc7CA2BaqeOM+vOtCS5ndmJicPJhKAwYRI6UfFw==",
-      "dev": true,
-      "dependencies": {
-        "@babel/highlight": "^7.14.5"
-      },
+    "node_modules/@babel/highlight/node_modules/color-name": {
+      "version": "1.1.3",
+      "license": "MIT"
+    },
+    "node_modules/@babel/highlight/node_modules/escape-string-regexp": {
+      "version": "1.0.5",
+      "license": "MIT",
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=0.8.0"
       }
     },
-    "node_modules/@babel/helper-define-polyfill-provider/node_modules/@babel/generator": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.14.5.tgz",
-      "integrity": "sha512-y3rlP+/G25OIX3mYKKIOlQRcqj7YgrvHxOLbVmyLJ9bPmi5ttvUmpydVjcFjZphOktWuA7ovbx91ECloWTfjIA==",
-      "dev": true,
-      "dependencies": {
-        "@babel/types": "^7.14.5",
-        "jsesc": "^2.5.1",
-        "source-map": "^0.5.0"
-      },
+    "node_modules/@babel/highlight/node_modules/has-flag": {
+      "version": "3.0.0",
+      "license": "MIT",
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=4"
       }
     },
-    "node_modules/@babel/helper-define-polyfill-provider/node_modules/@babel/helper-function-name": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.14.5.tgz",
-      "integrity": "sha512-Gjna0AsXWfFvrAuX+VKcN/aNNWonizBj39yGwUzVDVTlMYJMK2Wp6xdpy72mfArFq5uK+NOuexfzZlzI1z9+AQ==",
-      "dev": true,
+    "node_modules/@babel/highlight/node_modules/supports-color": {
+      "version": "5.5.0",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-get-function-arity": "^7.14.5",
-        "@babel/template": "^7.14.5",
-        "@babel/types": "^7.14.5"
+        "has-flag": "^3.0.0"
       },
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=4"
       }
     },
-    "node_modules/@babel/helper-define-polyfill-provider/node_modules/@babel/helper-get-function-arity": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.14.5.tgz",
-      "integrity": "sha512-I1Db4Shst5lewOM4V+ZKJzQ0JGGaZ6VY1jYvMghRjqs6DWgxLCIyFt30GlnKkfUeFLpJt2vzbMVEXVSXlIFYUg==",
-      "dev": true,
+    "node_modules/@babel/parser": {
+      "version": "7.25.3",
+      "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.14.5"
+        "@babel/types": "^7.25.2"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
       },
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=6.0.0"
       }
     },
-    "node_modules/@babel/helper-define-polyfill-provider/node_modules/@babel/helper-module-imports": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.14.5.tgz",
-      "integrity": "sha512-SwrNHu5QWS84XlHwGYPDtCxcA0hrSlL2yhWYLgeOc0w7ccOl2qv4s/nARI0aYZW+bSwAL5CukeXA47B/1NKcnQ==",
-      "dev": true,
+    "node_modules/@babel/plugin-bugfix-firefox-class-in-computed-class-key": {
+      "version": "7.25.3",
+      "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.14.5"
+        "@babel/helper-plugin-utils": "^7.24.8",
+        "@babel/traverse": "^7.25.3"
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
       }
     },
-    "node_modules/@babel/helper-define-polyfill-provider/node_modules/@babel/helper-plugin-utils": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-      "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-      "dev": true,
+    "node_modules/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": {
+      "version": "7.25.0",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.24.8"
+      },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
       }
     },
-    "node_modules/@babel/helper-define-polyfill-provider/node_modules/@babel/helper-split-export-declaration": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.14.5.tgz",
-      "integrity": "sha512-hprxVPu6e5Kdp2puZUmvOGjaLv9TCe58E/Fl6hRq4YiVQxIcNvuq6uTM2r1mT/oPskuS9CgR+I94sqAYv0NGKA==",
-      "dev": true,
+    "node_modules/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": {
+      "version": "7.24.7",
+      "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.14.5"
+        "@babel/helper-plugin-utils": "^7.24.7",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.24.7",
+        "@babel/plugin-transform-optional-chaining": "^7.24.7"
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.13.0"
       }
     },
-    "node_modules/@babel/helper-define-polyfill-provider/node_modules/@babel/helper-validator-identifier": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz",
-      "integrity": "sha512-5lsetuxCLilmVGyiLEfoHBRX8UCFD+1m2x3Rj97WrW3V7H3u4RWRXA4evMjImCsin2J2YT0QaVDGf+z8ondbAg==",
-      "dev": true,
+    "node_modules/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": {
+      "version": "7.25.0",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.24.8",
+        "@babel/traverse": "^7.25.0"
+      },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
       }
     },
-    "node_modules/@babel/helper-define-polyfill-provider/node_modules/@babel/highlight": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.14.5.tgz",
-      "integrity": "sha512-qf9u2WFWVV0MppaL877j2dBtQIDgmidgjGk5VIMw3OadXvYaXn66U1BFlH2t4+t3i+8PhedppRv+i40ABzd+gg==",
-      "dev": true,
+    "node_modules/@babel/plugin-proposal-class-properties": {
+      "version": "7.18.6",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-validator-identifier": "^7.14.5",
-        "chalk": "^2.0.0",
-        "js-tokens": "^4.0.0"
+        "@babel/helper-create-class-features-plugin": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6"
       },
       "engines": {
         "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-define-polyfill-provider/node_modules/@babel/parser": {
-      "version": "7.14.7",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.14.7.tgz",
-      "integrity": "sha512-X67Z5y+VBJuHB/RjwECp8kSl5uYi0BvRbNeWqkaJCVh+LiTPl19WBUfG627psSgp9rSf6ojuXghQM3ha6qHHdA==",
-      "dev": true,
-      "bin": {
-        "parser": "bin/babel-parser.js"
       },
-      "engines": {
-        "node": ">=6.0.0"
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/helper-define-polyfill-provider/node_modules/@babel/template": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.14.5.tgz",
-      "integrity": "sha512-6Z3Po85sfxRGachLULUhOmvAaOo7xCvqGQtxINai2mEGPFm6pQ4z5QInFnUrRpfoSV60BnjyF5F3c+15fxFV1g==",
-      "dev": true,
+    "node_modules/@babel/plugin-proposal-object-rest-spread": {
+      "version": "7.20.7",
+      "license": "MIT",
       "dependencies": {
-        "@babel/code-frame": "^7.14.5",
-        "@babel/parser": "^7.14.5",
-        "@babel/types": "^7.14.5"
+        "@babel/compat-data": "^7.20.5",
+        "@babel/helper-compilation-targets": "^7.20.7",
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
+        "@babel/plugin-transform-parameters": "^7.20.7"
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/helper-define-polyfill-provider/node_modules/@babel/traverse": {
-      "version": "7.14.7",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.14.7.tgz",
-      "integrity": "sha512-9vDr5NzHu27wgwejuKL7kIOm4bwEtaPQ4Z6cpCmjSuaRqpH/7xc4qcGEscwMqlkwgcXl6MvqoAjZkQ24uSdIZQ==",
-      "dev": true,
-      "dependencies": {
-        "@babel/code-frame": "^7.14.5",
-        "@babel/generator": "^7.14.5",
-        "@babel/helper-function-name": "^7.14.5",
-        "@babel/helper-hoist-variables": "^7.14.5",
-        "@babel/helper-split-export-declaration": "^7.14.5",
-        "@babel/parser": "^7.14.7",
-        "@babel/types": "^7.14.5",
-        "debug": "^4.1.0",
-        "globals": "^11.1.0"
-      },
+    "node_modules/@babel/plugin-proposal-private-property-in-object": {
+      "version": "7.21.0-placeholder-for-preset-env.2",
+      "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/helper-define-polyfill-provider/node_modules/@babel/types": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.5.tgz",
-      "integrity": "sha512-M/NzBpEL95I5Hh4dwhin5JlE7EzO5PHMAuzjxss3tiOBD46KfQvVedN/3jEPZvdRvtsK2222XfdHogNIttFgcg==",
-      "dev": true,
+    "node_modules/@babel/plugin-syntax-async-generators": {
+      "version": "7.8.4",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-validator-identifier": "^7.14.5",
-        "to-fast-properties": "^2.0.0"
+        "@babel/helper-plugin-utils": "^7.8.0"
       },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-define-polyfill-provider/node_modules/semver": {
-      "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-      "dev": true,
-      "bin": {
-        "semver": "bin/semver.js"
-      }
-    },
-    "node_modules/@babel/helper-define-polyfill-provider/node_modules/source-map": {
-      "version": "0.5.7",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-      "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/helper-explode-assignable-expression": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.14.5.tgz",
-      "integrity": "sha512-Htb24gnGJdIGT4vnRKMdoXiOIlqOLmdiUYpAQ0mYfgVT/GDm8GOYhgi4GL+hMKrkiPRohO4ts34ELFsGAPQLDQ==",
-      "dev": true,
+    "node_modules/@babel/plugin-syntax-bigint": {
+      "version": "7.8.3",
+      "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.14.5"
+        "@babel/helper-plugin-utils": "^7.8.0"
       },
-      "engines": {
-        "node": ">=6.9.0"
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/helper-explode-assignable-expression/node_modules/@babel/helper-validator-identifier": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz",
-      "integrity": "sha512-5lsetuxCLilmVGyiLEfoHBRX8UCFD+1m2x3Rj97WrW3V7H3u4RWRXA4evMjImCsin2J2YT0QaVDGf+z8ondbAg==",
-      "dev": true,
-      "engines": {
-        "node": ">=6.9.0"
+    "node_modules/@babel/plugin-syntax-class-properties": {
+      "version": "7.12.13",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.12.13"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/helper-explode-assignable-expression/node_modules/@babel/types": {
+    "node_modules/@babel/plugin-syntax-class-static-block": {
       "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.5.tgz",
-      "integrity": "sha512-M/NzBpEL95I5Hh4dwhin5JlE7EzO5PHMAuzjxss3tiOBD46KfQvVedN/3jEPZvdRvtsK2222XfdHogNIttFgcg==",
-      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-validator-identifier": "^7.14.5",
-        "to-fast-properties": "^2.0.0"
+        "@babel/helper-plugin-utils": "^7.14.5"
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/helper-function-name": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.10.4.tgz",
-      "integrity": "sha512-YdaSyz1n8gY44EmN7x44zBn9zQ1Ry2Y+3GTA+3vH6Mizke1Vw0aWDM66FOYEPw8//qKkmqOckrGgTYa+6sceqQ==",
-      "dev": true,
+    "node_modules/@babel/plugin-syntax-dynamic-import": {
+      "version": "7.8.3",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-get-function-arity": "^7.10.4",
-        "@babel/template": "^7.10.4",
-        "@babel/types": "^7.10.4"
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/helper-get-function-arity": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.10.4.tgz",
-      "integrity": "sha512-EkN3YDB+SRDgiIUnNgcmiD361ti+AVbL3f3Henf6dqqUyr5dMsorno0lJWJuLhDhkI5sYEpgj6y9kB8AOU1I2A==",
-      "dev": true,
+    "node_modules/@babel/plugin-syntax-export-namespace-from": {
+      "version": "7.8.3",
+      "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.10.4"
+        "@babel/helper-plugin-utils": "^7.8.3"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/helper-hoist-variables": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.14.5.tgz",
-      "integrity": "sha512-R1PXiz31Uc0Vxy4OEOm07x0oSjKAdPPCh3tPivn/Eo8cvz6gveAeuyUUPB21Hoiif0uoPQSSdhIPS3352nvdyQ==",
-      "dev": true,
+    "node_modules/@babel/plugin-syntax-import-assertions": {
+      "version": "7.24.7",
+      "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.14.5"
+        "@babel/helper-plugin-utils": "^7.24.7"
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/helper-hoist-variables/node_modules/@babel/helper-validator-identifier": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz",
-      "integrity": "sha512-5lsetuxCLilmVGyiLEfoHBRX8UCFD+1m2x3Rj97WrW3V7H3u4RWRXA4evMjImCsin2J2YT0QaVDGf+z8ondbAg==",
-      "dev": true,
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/helper-hoist-variables/node_modules/@babel/types": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.5.tgz",
-      "integrity": "sha512-M/NzBpEL95I5Hh4dwhin5JlE7EzO5PHMAuzjxss3tiOBD46KfQvVedN/3jEPZvdRvtsK2222XfdHogNIttFgcg==",
-      "dev": true,
+    "node_modules/@babel/plugin-syntax-import-attributes": {
+      "version": "7.24.7",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-validator-identifier": "^7.14.5",
-        "to-fast-properties": "^2.0.0"
+        "@babel/helper-plugin-utils": "^7.24.7"
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/helper-member-expression-to-functions": {
-      "version": "7.10.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.10.5.tgz",
-      "integrity": "sha512-HiqJpYD5+WopCXIAbQDG0zye5XYVvcO9w/DHp5GsaGkRUaamLj2bEtu6i8rnGGprAhHM3qidCMgp71HF4endhA==",
-      "dev": true,
+    "node_modules/@babel/plugin-syntax-import-meta": {
+      "version": "7.10.4",
+      "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.10.5"
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/helper-module-imports": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.10.4.tgz",
-      "integrity": "sha512-nEQJHqYavI217oD9+s5MUBzk6x1IlvoS9WTPfgG43CbMEeStE0v+r+TucWdx8KFGowPGvyOkDT9+7DHedIDnVw==",
-      "dev": true,
+    "node_modules/@babel/plugin-syntax-json-strings": {
+      "version": "7.8.3",
+      "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.10.4"
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/helper-module-transforms": {
-      "version": "7.10.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.10.5.tgz",
-      "integrity": "sha512-4P+CWMJ6/j1W915ITJaUkadLObmCRRSC234uctJfn/vHrsLNxsR8dwlcXv9ZhJWzl77awf+mWXSZEKt5t0OnlA==",
-      "dev": true,
+    "node_modules/@babel/plugin-syntax-jsx": {
+      "version": "7.24.7",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-module-imports": "^7.10.4",
-        "@babel/helper-replace-supers": "^7.10.4",
-        "@babel/helper-simple-access": "^7.10.4",
-        "@babel/helper-split-export-declaration": "^7.10.4",
-        "@babel/template": "^7.10.4",
-        "@babel/types": "^7.10.5",
-        "lodash": "^4.17.19"
+        "@babel/helper-plugin-utils": "^7.24.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/helper-optimise-call-expression": {
+    "node_modules/@babel/plugin-syntax-logical-assignment-operators": {
       "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.10.4.tgz",
-      "integrity": "sha512-n3UGKY4VXwXThEiKrgRAoVPBMqeoPgHVqiHZOanAJCG9nQUL2pLRQirUzl0ioKclHGpGqRgIOkgcIJaIWLpygg==",
-      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.10.4"
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/helper-plugin-utils": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.10.4.tgz",
-      "integrity": "sha512-O4KCvQA6lLiMU9l2eawBPMf1xPP8xPfB3iEQw150hOVTqj/rfXz0ThTb4HEzqQfs2Bmo5Ay8BzxfzVtBrr9dVg==",
-      "dev": true
-    },
-    "node_modules/@babel/helper-remap-async-to-generator": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.14.5.tgz",
-      "integrity": "sha512-rLQKdQU+HYlxBwQIj8dk4/0ENOUEhA/Z0l4hN8BexpvmSMN9oA9EagjnhnDpNsRdWCfjwa4mn/HyBXO9yhQP6A==",
-      "dev": true,
+    "node_modules/@babel/plugin-syntax-nullish-coalescing-operator": {
+      "version": "7.8.3",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-annotate-as-pure": "^7.14.5",
-        "@babel/helper-wrap-function": "^7.14.5",
-        "@babel/types": "^7.14.5"
+        "@babel/helper-plugin-utils": "^7.8.0"
       },
-      "engines": {
-        "node": ">=6.9.0"
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/helper-remap-async-to-generator/node_modules/@babel/helper-validator-identifier": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz",
-      "integrity": "sha512-5lsetuxCLilmVGyiLEfoHBRX8UCFD+1m2x3Rj97WrW3V7H3u4RWRXA4evMjImCsin2J2YT0QaVDGf+z8ondbAg==",
-      "dev": true,
-      "engines": {
-        "node": ">=6.9.0"
+    "node_modules/@babel/plugin-syntax-numeric-separator": {
+      "version": "7.10.4",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/helper-remap-async-to-generator/node_modules/@babel/types": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.5.tgz",
-      "integrity": "sha512-M/NzBpEL95I5Hh4dwhin5JlE7EzO5PHMAuzjxss3tiOBD46KfQvVedN/3jEPZvdRvtsK2222XfdHogNIttFgcg==",
-      "dev": true,
+    "node_modules/@babel/plugin-syntax-object-rest-spread": {
+      "version": "7.8.3",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-validator-identifier": "^7.14.5",
-        "to-fast-properties": "^2.0.0"
+        "@babel/helper-plugin-utils": "^7.8.0"
       },
-      "engines": {
-        "node": ">=6.9.0"
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/helper-replace-supers": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.10.4.tgz",
-      "integrity": "sha512-sPxZfFXocEymYTdVK1UNmFPBN+Hv5mJkLPsYWwGBxZAxaWfFu+xqp7b6qWD0yjNuNL2VKc6L5M18tOXUP7NU0A==",
-      "dev": true,
+    "node_modules/@babel/plugin-syntax-optional-catch-binding": {
+      "version": "7.8.3",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-member-expression-to-functions": "^7.10.4",
-        "@babel/helper-optimise-call-expression": "^7.10.4",
-        "@babel/traverse": "^7.10.4",
-        "@babel/types": "^7.10.4"
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/helper-simple-access": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.10.4.tgz",
-      "integrity": "sha512-0fMy72ej/VEvF8ULmX6yb5MtHG4uH4Dbd6I/aHDb/JVg0bbivwt9Wg+h3uMvX+QSFtwr5MeItvazbrc4jtRAXw==",
-      "dev": true,
+    "node_modules/@babel/plugin-syntax-optional-chaining": {
+      "version": "7.8.3",
+      "license": "MIT",
       "dependencies": {
-        "@babel/template": "^7.10.4",
-        "@babel/types": "^7.10.4"
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/helper-skip-transparent-expression-wrappers": {
+    "node_modules/@babel/plugin-syntax-private-property-in-object": {
       "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.14.5.tgz",
-      "integrity": "sha512-dmqZB7mrb94PZSAOYtr+ZN5qt5owZIAgqtoTuqiFbHFtxgEcmQlRJVI+bO++fciBunXtB6MK7HrzrfcAzIz2NQ==",
-      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.14.5"
+        "@babel/helper-plugin-utils": "^7.14.5"
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/helper-skip-transparent-expression-wrappers/node_modules/@babel/helper-validator-identifier": {
+    "node_modules/@babel/plugin-syntax-top-level-await": {
       "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz",
-      "integrity": "sha512-5lsetuxCLilmVGyiLEfoHBRX8UCFD+1m2x3Rj97WrW3V7H3u4RWRXA4evMjImCsin2J2YT0QaVDGf+z8ondbAg==",
-      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.14.5"
+      },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/helper-skip-transparent-expression-wrappers/node_modules/@babel/types": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.5.tgz",
-      "integrity": "sha512-M/NzBpEL95I5Hh4dwhin5JlE7EzO5PHMAuzjxss3tiOBD46KfQvVedN/3jEPZvdRvtsK2222XfdHogNIttFgcg==",
-      "dev": true,
+    "node_modules/@babel/plugin-syntax-typescript": {
+      "version": "7.24.7",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-validator-identifier": "^7.14.5",
-        "to-fast-properties": "^2.0.0"
+        "@babel/helper-plugin-utils": "^7.24.7"
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/helper-split-export-declaration": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.10.4.tgz",
-      "integrity": "sha512-pySBTeoUff56fL5CBU2hWm9TesA4r/rOkI9DyJLvvgz09MB9YtfIYe3iBriVaYNaPe+Alua0vBIOVOLs2buWhg==",
-      "dev": true,
+    "node_modules/@babel/plugin-syntax-unicode-sets-regex": {
+      "version": "7.18.6",
+      "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.10.4"
-      }
-    },
-    "node_modules/@babel/helper-validator-identifier": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.4.tgz",
-      "integrity": "sha512-3U9y+43hz7ZM+rzG24Qe2mufW5KhvFg/NhnNph+i9mgCtdTCtMJuI1TMkrIUiK7Ix4PYlRF9I5dhqaLYA/ADXw==",
-      "dev": true
-    },
-    "node_modules/@babel/helper-validator-option": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.14.5.tgz",
-      "integrity": "sha512-OX8D5eeX4XwcroVW45NMvoYaIuFI+GQpA2a8Gi+X/U/cDUIRsV37qQfF905F0htTRCREQIB4KqPeaveRJUl3Ow==",
-      "dev": true,
+        "@babel/helper-create-regexp-features-plugin": "^7.18.6",
+        "@babel/helper-plugin-utils": "^7.18.6"
+      },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
       }
     },
-    "node_modules/@babel/helper-wrap-function": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.14.5.tgz",
-      "integrity": "sha512-YEdjTCq+LNuNS1WfxsDCNpgXkJaIyqco6DAelTUjT4f2KIWC1nBcaCaSdHTBqQVLnTBexBcVcFhLSU1KnYuePQ==",
-      "dev": true,
+    "node_modules/@babel/plugin-transform-arrow-functions": {
+      "version": "7.24.7",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-function-name": "^7.14.5",
-        "@babel/template": "^7.14.5",
-        "@babel/traverse": "^7.14.5",
-        "@babel/types": "^7.14.5"
+        "@babel/helper-plugin-utils": "^7.24.7"
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/helper-wrap-function/node_modules/@babel/code-frame": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.14.5.tgz",
-      "integrity": "sha512-9pzDqyc6OLDaqe+zbACgFkb6fKMNG6CObKpnYXChRsvYGyEdc7CA2BaqeOM+vOtCS5ndmJicPJhKAwYRI6UfFw==",
-      "dev": true,
+    "node_modules/@babel/plugin-transform-async-generator-functions": {
+      "version": "7.25.0",
+      "license": "MIT",
       "dependencies": {
-        "@babel/highlight": "^7.14.5"
+        "@babel/helper-plugin-utils": "^7.24.8",
+        "@babel/helper-remap-async-to-generator": "^7.25.0",
+        "@babel/plugin-syntax-async-generators": "^7.8.4",
+        "@babel/traverse": "^7.25.0"
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/helper-wrap-function/node_modules/@babel/generator": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.14.5.tgz",
-      "integrity": "sha512-y3rlP+/G25OIX3mYKKIOlQRcqj7YgrvHxOLbVmyLJ9bPmi5ttvUmpydVjcFjZphOktWuA7ovbx91ECloWTfjIA==",
-      "dev": true,
+    "node_modules/@babel/plugin-transform-async-to-generator": {
+      "version": "7.24.7",
+      "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.14.5",
-        "jsesc": "^2.5.1",
-        "source-map": "^0.5.0"
+        "@babel/helper-module-imports": "^7.24.7",
+        "@babel/helper-plugin-utils": "^7.24.7",
+        "@babel/helper-remap-async-to-generator": "^7.24.7"
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/helper-wrap-function/node_modules/@babel/helper-function-name": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.14.5.tgz",
-      "integrity": "sha512-Gjna0AsXWfFvrAuX+VKcN/aNNWonizBj39yGwUzVDVTlMYJMK2Wp6xdpy72mfArFq5uK+NOuexfzZlzI1z9+AQ==",
-      "dev": true,
+    "node_modules/@babel/plugin-transform-block-scoped-functions": {
+      "version": "7.24.7",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-get-function-arity": "^7.14.5",
-        "@babel/template": "^7.14.5",
-        "@babel/types": "^7.14.5"
+        "@babel/helper-plugin-utils": "^7.24.7"
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/helper-wrap-function/node_modules/@babel/helper-get-function-arity": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.14.5.tgz",
-      "integrity": "sha512-I1Db4Shst5lewOM4V+ZKJzQ0JGGaZ6VY1jYvMghRjqs6DWgxLCIyFt30GlnKkfUeFLpJt2vzbMVEXVSXlIFYUg==",
-      "dev": true,
+    "node_modules/@babel/plugin-transform-block-scoping": {
+      "version": "7.25.0",
+      "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.14.5"
+        "@babel/helper-plugin-utils": "^7.24.8"
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/helper-wrap-function/node_modules/@babel/helper-split-export-declaration": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.14.5.tgz",
-      "integrity": "sha512-hprxVPu6e5Kdp2puZUmvOGjaLv9TCe58E/Fl6hRq4YiVQxIcNvuq6uTM2r1mT/oPskuS9CgR+I94sqAYv0NGKA==",
-      "dev": true,
+    "node_modules/@babel/plugin-transform-class-properties": {
+      "version": "7.24.7",
+      "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.14.5"
+        "@babel/helper-create-class-features-plugin": "^7.24.7",
+        "@babel/helper-plugin-utils": "^7.24.7"
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/helper-wrap-function/node_modules/@babel/helper-validator-identifier": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz",
-      "integrity": "sha512-5lsetuxCLilmVGyiLEfoHBRX8UCFD+1m2x3Rj97WrW3V7H3u4RWRXA4evMjImCsin2J2YT0QaVDGf+z8ondbAg==",
-      "dev": true,
+    "node_modules/@babel/plugin-transform-class-static-block": {
+      "version": "7.24.7",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-create-class-features-plugin": "^7.24.7",
+        "@babel/helper-plugin-utils": "^7.24.7",
+        "@babel/plugin-syntax-class-static-block": "^7.14.5"
+      },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.12.0"
       }
     },
-    "node_modules/@babel/helper-wrap-function/node_modules/@babel/highlight": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.14.5.tgz",
-      "integrity": "sha512-qf9u2WFWVV0MppaL877j2dBtQIDgmidgjGk5VIMw3OadXvYaXn66U1BFlH2t4+t3i+8PhedppRv+i40ABzd+gg==",
-      "dev": true,
-      "dependencies": {
-        "@babel/helper-validator-identifier": "^7.14.5",
-        "chalk": "^2.0.0",
-        "js-tokens": "^4.0.0"
+    "node_modules/@babel/plugin-transform-classes": {
+      "version": "7.25.0",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.24.7",
+        "@babel/helper-compilation-targets": "^7.24.8",
+        "@babel/helper-plugin-utils": "^7.24.8",
+        "@babel/helper-replace-supers": "^7.25.0",
+        "@babel/traverse": "^7.25.0",
+        "globals": "^11.1.0"
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/helper-wrap-function/node_modules/@babel/parser": {
-      "version": "7.14.7",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.14.7.tgz",
-      "integrity": "sha512-X67Z5y+VBJuHB/RjwECp8kSl5uYi0BvRbNeWqkaJCVh+LiTPl19WBUfG627psSgp9rSf6ojuXghQM3ha6qHHdA==",
-      "dev": true,
-      "bin": {
-        "parser": "bin/babel-parser.js"
+    "node_modules/@babel/plugin-transform-computed-properties": {
+      "version": "7.24.7",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.24.7",
+        "@babel/template": "^7.24.7"
       },
       "engines": {
-        "node": ">=6.0.0"
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/helper-wrap-function/node_modules/@babel/template": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.14.5.tgz",
-      "integrity": "sha512-6Z3Po85sfxRGachLULUhOmvAaOo7xCvqGQtxINai2mEGPFm6pQ4z5QInFnUrRpfoSV60BnjyF5F3c+15fxFV1g==",
-      "dev": true,
+    "node_modules/@babel/plugin-transform-destructuring": {
+      "version": "7.24.8",
+      "license": "MIT",
       "dependencies": {
-        "@babel/code-frame": "^7.14.5",
-        "@babel/parser": "^7.14.5",
-        "@babel/types": "^7.14.5"
+        "@babel/helper-plugin-utils": "^7.24.8"
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/helper-wrap-function/node_modules/@babel/traverse": {
-      "version": "7.14.7",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.14.7.tgz",
-      "integrity": "sha512-9vDr5NzHu27wgwejuKL7kIOm4bwEtaPQ4Z6cpCmjSuaRqpH/7xc4qcGEscwMqlkwgcXl6MvqoAjZkQ24uSdIZQ==",
-      "dev": true,
+    "node_modules/@babel/plugin-transform-dotall-regex": {
+      "version": "7.24.7",
+      "license": "MIT",
       "dependencies": {
-        "@babel/code-frame": "^7.14.5",
-        "@babel/generator": "^7.14.5",
-        "@babel/helper-function-name": "^7.14.5",
-        "@babel/helper-hoist-variables": "^7.14.5",
-        "@babel/helper-split-export-declaration": "^7.14.5",
-        "@babel/parser": "^7.14.7",
-        "@babel/types": "^7.14.5",
-        "debug": "^4.1.0",
-        "globals": "^11.1.0"
+        "@babel/helper-create-regexp-features-plugin": "^7.24.7",
+        "@babel/helper-plugin-utils": "^7.24.7"
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/helper-wrap-function/node_modules/@babel/types": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.5.tgz",
-      "integrity": "sha512-M/NzBpEL95I5Hh4dwhin5JlE7EzO5PHMAuzjxss3tiOBD46KfQvVedN/3jEPZvdRvtsK2222XfdHogNIttFgcg==",
-      "dev": true,
+    "node_modules/@babel/plugin-transform-duplicate-keys": {
+      "version": "7.24.7",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-validator-identifier": "^7.14.5",
-        "to-fast-properties": "^2.0.0"
+        "@babel/helper-plugin-utils": "^7.24.7"
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/helper-wrap-function/node_modules/source-map": {
-      "version": "0.5.7",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-      "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
-      "dev": true,
+    "node_modules/@babel/plugin-transform-dynamic-import": {
+      "version": "7.24.7",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.24.7",
+        "@babel/plugin-syntax-dynamic-import": "^7.8.3"
+      },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/helpers": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.10.4.tgz",
-      "integrity": "sha512-L2gX/XeUONeEbI78dXSrJzGdz4GQ+ZTA/aazfUsFaWjSe95kiCuOZ5HsXvkiw3iwF+mFHSRUfJU8t6YavocdXA==",
-      "dev": true,
+    "node_modules/@babel/plugin-transform-exponentiation-operator": {
+      "version": "7.24.7",
+      "license": "MIT",
       "dependencies": {
-        "@babel/template": "^7.10.4",
-        "@babel/traverse": "^7.10.4",
-        "@babel/types": "^7.10.4"
+        "@babel/helper-builder-binary-assignment-operator-visitor": "^7.24.7",
+        "@babel/helper-plugin-utils": "^7.24.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/highlight": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.10.4.tgz",
-      "integrity": "sha512-i6rgnR/YgPEQzZZnbTHHuZdlE8qyoBNalD6F+q4vAFlcMEcqmkoG+mPqJYJCo63qPf74+Y1UZsl3l6f7/RIkmA==",
-      "dev": true,
+    "node_modules/@babel/plugin-transform-export-namespace-from": {
+      "version": "7.24.7",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-validator-identifier": "^7.10.4",
-        "chalk": "^2.0.0",
-        "js-tokens": "^4.0.0"
+        "@babel/helper-plugin-utils": "^7.24.7",
+        "@babel/plugin-syntax-export-namespace-from": "^7.8.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/parser": {
-      "version": "7.10.5",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.10.5.tgz",
-      "integrity": "sha512-wfryxy4bE1UivvQKSQDU4/X6dr+i8bctjUjj8Zyt3DQy7NtPizJXT8M52nqpNKL+nq2PW8lxk4ZqLj0fD4B4hQ==",
-      "dev": true,
-      "bin": {
-        "parser": "bin/babel-parser.js"
+    "node_modules/@babel/plugin-transform-for-of": {
+      "version": "7.24.7",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.24.7",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.24.7"
       },
       "engines": {
-        "node": ">=6.0.0"
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.14.5.tgz",
-      "integrity": "sha512-ZoJS2XCKPBfTmL122iP6NM9dOg+d4lc9fFk3zxc8iDjvt8Pk4+TlsHSKhIPf6X+L5ORCdBzqMZDjL/WHj7WknQ==",
-      "dev": true,
+    "node_modules/@babel/plugin-transform-function-name": {
+      "version": "7.25.1",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.14.5",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.14.5",
-        "@babel/plugin-proposal-optional-chaining": "^7.14.5"
+        "@babel/helper-compilation-targets": "^7.24.8",
+        "@babel/helper-plugin-utils": "^7.24.8",
+        "@babel/traverse": "^7.25.1"
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/node_modules/@babel/helper-plugin-utils": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-      "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-      "dev": true,
+    "node_modules/@babel/plugin-transform-json-strings": {
+      "version": "7.24.7",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.24.7",
+        "@babel/plugin-syntax-json-strings": "^7.8.3"
+      },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-proposal-async-generator-functions": {
-      "version": "7.14.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.14.7.tgz",
-      "integrity": "sha512-RK8Wj7lXLY3bqei69/cc25gwS5puEc3dknoFPFbqfy3XxYQBQFvu4ioWpafMBAB+L9NyptQK4nMOa5Xz16og8Q==",
-      "dev": true,
+    "node_modules/@babel/plugin-transform-literals": {
+      "version": "7.25.2",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.14.5",
-        "@babel/helper-remap-async-to-generator": "^7.14.5",
-        "@babel/plugin-syntax-async-generators": "^7.8.4"
+        "@babel/helper-plugin-utils": "^7.24.8"
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-proposal-async-generator-functions/node_modules/@babel/helper-plugin-utils": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-      "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-      "dev": true,
+    "node_modules/@babel/plugin-transform-logical-assignment-operators": {
+      "version": "7.24.7",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.24.7",
+        "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4"
+      },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-proposal-class-properties": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.10.4.tgz",
-      "integrity": "sha512-vhwkEROxzcHGNu2mzUC0OFFNXdZ4M23ib8aRRcJSsW8BZK9pQMD7QB7csl97NBbgGZO7ZyHUyKDnxzOaP4IrCg==",
-      "dev": true,
+    "node_modules/@babel/plugin-transform-member-expression-literals": {
+      "version": "7.24.7",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-create-class-features-plugin": "^7.10.4",
-        "@babel/helper-plugin-utils": "^7.10.4"
+        "@babel/helper-plugin-utils": "^7.24.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-proposal-class-static-block": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-static-block/-/plugin-proposal-class-static-block-7.14.5.tgz",
-      "integrity": "sha512-KBAH5ksEnYHCegqseI5N9skTdxgJdmDoAOc0uXa+4QMYKeZD0w5IARh4FMlTNtaHhbB8v+KzMdTgxMMzsIy6Yg==",
-      "dev": true,
+    "node_modules/@babel/plugin-transform-modules-amd": {
+      "version": "7.24.7",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-create-class-features-plugin": "^7.14.5",
-        "@babel/helper-plugin-utils": "^7.14.5",
-        "@babel/plugin-syntax-class-static-block": "^7.14.5"
+        "@babel/helper-module-transforms": "^7.24.7",
+        "@babel/helper-plugin-utils": "^7.24.7"
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-proposal-class-static-block/node_modules/@babel/helper-plugin-utils": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-      "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-      "dev": true,
+    "node_modules/@babel/plugin-transform-modules-commonjs": {
+      "version": "7.24.8",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-transforms": "^7.24.8",
+        "@babel/helper-plugin-utils": "^7.24.8",
+        "@babel/helper-simple-access": "^7.24.7"
+      },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-proposal-dynamic-import": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.14.5.tgz",
-      "integrity": "sha512-ExjiNYc3HDN5PXJx+bwC50GIx/KKanX2HiggnIUAYedbARdImiCU4RhhHfdf0Kd7JNXGpsBBBCOm+bBVy3Gb0g==",
-      "dev": true,
+    "node_modules/@babel/plugin-transform-modules-systemjs": {
+      "version": "7.25.0",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.14.5",
-        "@babel/plugin-syntax-dynamic-import": "^7.8.3"
+        "@babel/helper-module-transforms": "^7.25.0",
+        "@babel/helper-plugin-utils": "^7.24.8",
+        "@babel/helper-validator-identifier": "^7.24.7",
+        "@babel/traverse": "^7.25.0"
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-proposal-dynamic-import/node_modules/@babel/helper-plugin-utils": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-      "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-      "dev": true,
+    "node_modules/@babel/plugin-transform-modules-umd": {
+      "version": "7.24.7",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-transforms": "^7.24.7",
+        "@babel/helper-plugin-utils": "^7.24.7"
+      },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-proposal-export-namespace-from": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.14.5.tgz",
-      "integrity": "sha512-g5POA32bXPMmSBu5Dx/iZGLGnKmKPc5AiY7qfZgurzrCYgIztDlHFbznSNCoQuv57YQLnQfaDi7dxCtLDIdXdA==",
-      "dev": true,
+    "node_modules/@babel/plugin-transform-named-capturing-groups-regex": {
+      "version": "7.24.7",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.14.5",
-        "@babel/plugin-syntax-export-namespace-from": "^7.8.3"
+        "@babel/helper-create-regexp-features-plugin": "^7.24.7",
+        "@babel/helper-plugin-utils": "^7.24.7"
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
       }
     },
-    "node_modules/@babel/plugin-proposal-export-namespace-from/node_modules/@babel/helper-plugin-utils": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-      "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-      "dev": true,
+    "node_modules/@babel/plugin-transform-new-target": {
+      "version": "7.24.7",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.24.7"
+      },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-proposal-json-strings": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.14.5.tgz",
-      "integrity": "sha512-NSq2fczJYKVRIsUJyNxrVUMhB27zb7N7pOFGQOhBKJrChbGcgEAqyZrmZswkPk18VMurEeJAaICbfm57vUeTbQ==",
-      "dev": true,
+    "node_modules/@babel/plugin-transform-nullish-coalescing-operator": {
+      "version": "7.24.7",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.14.5",
-        "@babel/plugin-syntax-json-strings": "^7.8.3"
+        "@babel/helper-plugin-utils": "^7.24.7",
+        "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3"
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-proposal-json-strings/node_modules/@babel/helper-plugin-utils": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-      "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-      "dev": true,
+    "node_modules/@babel/plugin-transform-numeric-separator": {
+      "version": "7.24.7",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.24.7",
+        "@babel/plugin-syntax-numeric-separator": "^7.10.4"
+      },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-proposal-logical-assignment-operators": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.14.5.tgz",
-      "integrity": "sha512-YGn2AvZAo9TwyhlLvCCWxD90Xq8xJ4aSgaX3G5D/8DW94L8aaT+dS5cSP+Z06+rCJERGSr9GxMBZ601xoc2taw==",
-      "dev": true,
+    "node_modules/@babel/plugin-transform-object-rest-spread": {
+      "version": "7.24.7",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.14.5",
-        "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4"
+        "@babel/helper-compilation-targets": "^7.24.7",
+        "@babel/helper-plugin-utils": "^7.24.7",
+        "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
+        "@babel/plugin-transform-parameters": "^7.24.7"
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-proposal-logical-assignment-operators/node_modules/@babel/helper-plugin-utils": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-      "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-      "dev": true,
+    "node_modules/@babel/plugin-transform-object-super": {
+      "version": "7.24.7",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.24.7",
+        "@babel/helper-replace-supers": "^7.24.7"
+      },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-proposal-nullish-coalescing-operator": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.14.5.tgz",
-      "integrity": "sha512-gun/SOnMqjSb98Nkaq2rTKMwervfdAoz6NphdY0vTfuzMfryj+tDGb2n6UkDKwez+Y8PZDhE3D143v6Gepp4Hg==",
-      "dev": true,
+    "node_modules/@babel/plugin-transform-optional-catch-binding": {
+      "version": "7.24.7",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.14.5",
-        "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3"
+        "@babel/helper-plugin-utils": "^7.24.7",
+        "@babel/plugin-syntax-optional-catch-binding": "^7.8.3"
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-proposal-nullish-coalescing-operator/node_modules/@babel/helper-plugin-utils": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-      "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-      "dev": true,
+    "node_modules/@babel/plugin-transform-optional-chaining": {
+      "version": "7.24.8",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.24.8",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.24.7",
+        "@babel/plugin-syntax-optional-chaining": "^7.8.3"
+      },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-proposal-numeric-separator": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.14.5.tgz",
-      "integrity": "sha512-yiclALKe0vyZRZE0pS6RXgjUOt87GWv6FYa5zqj15PvhOGFO69R5DusPlgK/1K5dVnCtegTiWu9UaBSrLLJJBg==",
-      "dev": true,
+    "node_modules/@babel/plugin-transform-parameters": {
+      "version": "7.24.7",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.14.5",
-        "@babel/plugin-syntax-numeric-separator": "^7.10.4"
+        "@babel/helper-plugin-utils": "^7.24.7"
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-proposal-numeric-separator/node_modules/@babel/helper-plugin-utils": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-      "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-      "dev": true,
+    "node_modules/@babel/plugin-transform-private-methods": {
+      "version": "7.24.7",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-create-class-features-plugin": "^7.24.7",
+        "@babel/helper-plugin-utils": "^7.24.7"
+      },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-proposal-object-rest-spread": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.10.4.tgz",
-      "integrity": "sha512-6vh4SqRuLLarjgeOf4EaROJAHjvu9Gl+/346PbDH9yWbJyfnJ/ah3jmYKYtswEyCoWZiidvVHjHshd4WgjB9BA==",
-      "dev": true,
+    "node_modules/@babel/plugin-transform-private-property-in-object": {
+      "version": "7.24.7",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.10.4",
-        "@babel/plugin-syntax-object-rest-spread": "^7.8.0",
-        "@babel/plugin-transform-parameters": "^7.10.4"
+        "@babel/helper-annotate-as-pure": "^7.24.7",
+        "@babel/helper-create-class-features-plugin": "^7.24.7",
+        "@babel/helper-plugin-utils": "^7.24.7",
+        "@babel/plugin-syntax-private-property-in-object": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-proposal-optional-catch-binding": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.14.5.tgz",
-      "integrity": "sha512-3Oyiixm0ur7bzO5ybNcZFlmVsygSIQgdOa7cTfOYCMY+wEPAYhZAJxi3mixKFCTCKUhQXuCTtQ1MzrpL3WT8ZQ==",
-      "dev": true,
+    "node_modules/@babel/plugin-transform-property-literals": {
+      "version": "7.24.7",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.14.5",
-        "@babel/plugin-syntax-optional-catch-binding": "^7.8.3"
+        "@babel/helper-plugin-utils": "^7.24.7"
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-proposal-optional-catch-binding/node_modules/@babel/helper-plugin-utils": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-      "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-      "dev": true,
+    "node_modules/@babel/plugin-transform-react-constant-elements": {
+      "version": "7.25.1",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.24.8"
+      },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-proposal-optional-chaining": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.14.5.tgz",
-      "integrity": "sha512-ycz+VOzo2UbWNI1rQXxIuMOzrDdHGrI23fRiz/Si2R4kv2XZQ1BK8ccdHwehMKBlcH/joGW/tzrUmo67gbJHlQ==",
-      "dev": true,
+    "node_modules/@babel/plugin-transform-react-display-name": {
+      "version": "7.24.7",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.14.5",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.14.5",
-        "@babel/plugin-syntax-optional-chaining": "^7.8.3"
+        "@babel/helper-plugin-utils": "^7.24.7"
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-proposal-optional-chaining/node_modules/@babel/helper-plugin-utils": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-      "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-      "dev": true,
+    "node_modules/@babel/plugin-transform-react-jsx": {
+      "version": "7.25.2",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.24.7",
+        "@babel/helper-module-imports": "^7.24.7",
+        "@babel/helper-plugin-utils": "^7.24.8",
+        "@babel/plugin-syntax-jsx": "^7.24.7",
+        "@babel/types": "^7.25.2"
+      },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-proposal-private-methods": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.14.5.tgz",
-      "integrity": "sha512-838DkdUA1u+QTCplatfq4B7+1lnDa/+QMI89x5WZHBcnNv+47N8QEj2k9I2MUU9xIv8XJ4XvPCviM/Dj7Uwt9g==",
-      "dev": true,
+    "node_modules/@babel/plugin-transform-react-jsx-development": {
+      "version": "7.24.7",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-create-class-features-plugin": "^7.14.5",
-        "@babel/helper-plugin-utils": "^7.14.5"
+        "@babel/plugin-transform-react-jsx": "^7.24.7"
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-proposal-private-methods/node_modules/@babel/helper-plugin-utils": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-      "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-      "dev": true,
+    "node_modules/@babel/plugin-transform-react-pure-annotations": {
+      "version": "7.24.7",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.24.7",
+        "@babel/helper-plugin-utils": "^7.24.7"
+      },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-proposal-private-property-in-object": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.14.5.tgz",
-      "integrity": "sha512-62EyfyA3WA0mZiF2e2IV9mc9Ghwxcg8YTu8BS4Wss4Y3PY725OmS9M0qLORbJwLqFtGh+jiE4wAmocK2CTUK2Q==",
-      "dev": true,
+    "node_modules/@babel/plugin-transform-regenerator": {
+      "version": "7.24.7",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-annotate-as-pure": "^7.14.5",
-        "@babel/helper-create-class-features-plugin": "^7.14.5",
-        "@babel/helper-plugin-utils": "^7.14.5",
-        "@babel/plugin-syntax-private-property-in-object": "^7.14.5"
+        "@babel/helper-plugin-utils": "^7.24.7",
+        "regenerator-transform": "^0.15.2"
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-proposal-private-property-in-object/node_modules/@babel/helper-plugin-utils": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-      "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-      "dev": true,
+    "node_modules/@babel/plugin-transform-reserved-words": {
+      "version": "7.24.7",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.24.7"
+      },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-proposal-unicode-property-regex": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.14.5.tgz",
-      "integrity": "sha512-6axIeOU5LnY471KenAB9vI8I5j7NQ2d652hIYwVyRfgaZT5UpiqFKCuVXCDMSrU+3VFafnu2c5m3lrWIlr6A5Q==",
-      "dev": true,
+    "node_modules/@babel/plugin-transform-shorthand-properties": {
+      "version": "7.24.7",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-create-regexp-features-plugin": "^7.14.5",
-        "@babel/helper-plugin-utils": "^7.14.5"
+        "@babel/helper-plugin-utils": "^7.24.7"
       },
       "engines": {
-        "node": ">=4"
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-proposal-unicode-property-regex/node_modules/@babel/helper-plugin-utils": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-      "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-      "dev": true,
+    "node_modules/@babel/plugin-transform-spread": {
+      "version": "7.24.7",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.24.7",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.24.7"
+      },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-syntax-async-generators": {
-      "version": "7.8.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz",
-      "integrity": "sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==",
-      "dev": true,
+    "node_modules/@babel/plugin-transform-sticky-regex": {
+      "version": "7.24.7",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.8.0"
+        "@babel/helper-plugin-utils": "^7.24.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-syntax-bigint": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-bigint/-/plugin-syntax-bigint-7.8.3.tgz",
-      "integrity": "sha512-wnTnFlG+YxQm3vDxpGE57Pj0srRU4sHE/mDkt1qv2YJJSeUAec2ma4WLUnUPeKjyrfntVwe/N6dCXpU+zL3Npg==",
-      "dev": true,
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.8.0"
-      }
-    },
-    "node_modules/@babel/plugin-syntax-class-properties": {
-      "version": "7.12.13",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.12.13.tgz",
-      "integrity": "sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==",
-      "dev": true,
+    "node_modules/@babel/plugin-transform-template-literals": {
+      "version": "7.24.7",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.12.13"
-      }
-    },
-    "node_modules/@babel/plugin-syntax-class-properties/node_modules/@babel/helper-plugin-utils": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-      "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-      "dev": true,
+        "@babel/helper-plugin-utils": "^7.24.7"
+      },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-syntax-class-static-block": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-static-block/-/plugin-syntax-class-static-block-7.14.5.tgz",
-      "integrity": "sha512-b+YyPmr6ldyNnM6sqYeMWE+bgJcJpO6yS4QD7ymxgH34GBPNDM/THBh8iunyvKIZztiwLH4CJZ0RxTk9emgpjw==",
-      "dev": true,
+    "node_modules/@babel/plugin-transform-typeof-symbol": {
+      "version": "7.24.8",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.14.5"
+        "@babel/helper-plugin-utils": "^7.24.8"
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-syntax-class-static-block/node_modules/@babel/helper-plugin-utils": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-      "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-      "dev": true,
+    "node_modules/@babel/plugin-transform-typescript": {
+      "version": "7.25.2",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.24.7",
+        "@babel/helper-create-class-features-plugin": "^7.25.0",
+        "@babel/helper-plugin-utils": "^7.24.8",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.24.7",
+        "@babel/plugin-syntax-typescript": "^7.24.7"
+      },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-syntax-dynamic-import": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz",
-      "integrity": "sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==",
-      "dev": true,
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.8.0"
-      }
-    },
-    "node_modules/@babel/plugin-syntax-export-namespace-from": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-export-namespace-from/-/plugin-syntax-export-namespace-from-7.8.3.tgz",
-      "integrity": "sha512-MXf5laXo6c1IbEbegDmzGPwGNTsHZmEy6QGznu5Sh2UCWvueywb2ee+CCE4zQiZstxU9BMoQO9i6zUFSY0Kj0Q==",
-      "dev": true,
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.8.3"
-      }
-    },
-    "node_modules/@babel/plugin-syntax-import-meta": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-meta/-/plugin-syntax-import-meta-7.10.4.tgz",
-      "integrity": "sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==",
-      "dev": true,
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.10.4"
-      }
-    },
-    "node_modules/@babel/plugin-syntax-json-strings": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz",
-      "integrity": "sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==",
-      "dev": true,
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.8.0"
-      }
-    },
-    "node_modules/@babel/plugin-syntax-jsx": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.14.5.tgz",
-      "integrity": "sha512-ohuFIsOMXJnbOMRfX7/w7LocdR6R7whhuRD4ax8IipLcLPlZGJKkBxgHp++U4N/vKyU16/YDQr2f5seajD3jIw==",
-      "dev": true,
+    "node_modules/@babel/plugin-transform-unicode-escapes": {
+      "version": "7.24.7",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.14.5"
+        "@babel/helper-plugin-utils": "^7.24.7"
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-syntax-jsx/node_modules/@babel/helper-plugin-utils": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-      "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-      "dev": true,
+    "node_modules/@babel/plugin-transform-unicode-property-regex": {
+      "version": "7.24.7",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-create-regexp-features-plugin": "^7.24.7",
+        "@babel/helper-plugin-utils": "^7.24.7"
+      },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-syntax-logical-assignment-operators": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz",
-      "integrity": "sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==",
-      "dev": true,
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.10.4"
-      }
-    },
-    "node_modules/@babel/plugin-syntax-nullish-coalescing-operator": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz",
-      "integrity": "sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==",
-      "dev": true,
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.8.0"
-      }
-    },
-    "node_modules/@babel/plugin-syntax-numeric-separator": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.10.4.tgz",
-      "integrity": "sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==",
-      "dev": true,
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.10.4"
-      }
-    },
-    "node_modules/@babel/plugin-syntax-object-rest-spread": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz",
-      "integrity": "sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==",
-      "dev": true,
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.8.0"
-      }
-    },
-    "node_modules/@babel/plugin-syntax-optional-catch-binding": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.8.3.tgz",
-      "integrity": "sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==",
-      "dev": true,
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.8.0"
-      }
-    },
-    "node_modules/@babel/plugin-syntax-optional-chaining": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz",
-      "integrity": "sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==",
-      "dev": true,
+    "node_modules/@babel/plugin-transform-unicode-regex": {
+      "version": "7.24.7",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.8.0"
+        "@babel/helper-create-regexp-features-plugin": "^7.24.7",
+        "@babel/helper-plugin-utils": "^7.24.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-syntax-private-property-in-object": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-private-property-in-object/-/plugin-syntax-private-property-in-object-7.14.5.tgz",
-      "integrity": "sha512-0wVnp9dxJ72ZUJDV27ZfbSj6iHLoytYZmh3rFcxNnvsJF3ktkzLDZPy/mA17HGsaQT3/DQsWYX1f1QGWkCoVUg==",
-      "dev": true,
+    "node_modules/@babel/plugin-transform-unicode-sets-regex": {
+      "version": "7.24.7",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.14.5"
+        "@babel/helper-create-regexp-features-plugin": "^7.24.7",
+        "@babel/helper-plugin-utils": "^7.24.7"
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
       }
     },
-    "node_modules/@babel/plugin-syntax-private-property-in-object/node_modules/@babel/helper-plugin-utils": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-      "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-      "dev": true,
+    "node_modules/@babel/preset-env": {
+      "version": "7.24.8",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/compat-data": "^7.24.8",
+        "@babel/helper-compilation-targets": "^7.24.8",
+        "@babel/helper-plugin-utils": "^7.24.8",
+        "@babel/helper-validator-option": "^7.24.8",
+        "@babel/plugin-bugfix-firefox-class-in-computed-class-key": "^7.24.7",
+        "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "^7.24.7",
+        "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "^7.24.7",
+        "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": "^7.24.7",
+        "@babel/plugin-proposal-private-property-in-object": "7.21.0-placeholder-for-preset-env.2",
+        "@babel/plugin-syntax-async-generators": "^7.8.4",
+        "@babel/plugin-syntax-class-properties": "^7.12.13",
+        "@babel/plugin-syntax-class-static-block": "^7.14.5",
+        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+        "@babel/plugin-syntax-export-namespace-from": "^7.8.3",
+        "@babel/plugin-syntax-import-assertions": "^7.24.7",
+        "@babel/plugin-syntax-import-attributes": "^7.24.7",
+        "@babel/plugin-syntax-import-meta": "^7.10.4",
+        "@babel/plugin-syntax-json-strings": "^7.8.3",
+        "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4",
+        "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3",
+        "@babel/plugin-syntax-numeric-separator": "^7.10.4",
+        "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
+        "@babel/plugin-syntax-optional-catch-binding": "^7.8.3",
+        "@babel/plugin-syntax-optional-chaining": "^7.8.3",
+        "@babel/plugin-syntax-private-property-in-object": "^7.14.5",
+        "@babel/plugin-syntax-top-level-await": "^7.14.5",
+        "@babel/plugin-syntax-unicode-sets-regex": "^7.18.6",
+        "@babel/plugin-transform-arrow-functions": "^7.24.7",
+        "@babel/plugin-transform-async-generator-functions": "^7.24.7",
+        "@babel/plugin-transform-async-to-generator": "^7.24.7",
+        "@babel/plugin-transform-block-scoped-functions": "^7.24.7",
+        "@babel/plugin-transform-block-scoping": "^7.24.7",
+        "@babel/plugin-transform-class-properties": "^7.24.7",
+        "@babel/plugin-transform-class-static-block": "^7.24.7",
+        "@babel/plugin-transform-classes": "^7.24.8",
+        "@babel/plugin-transform-computed-properties": "^7.24.7",
+        "@babel/plugin-transform-destructuring": "^7.24.8",
+        "@babel/plugin-transform-dotall-regex": "^7.24.7",
+        "@babel/plugin-transform-duplicate-keys": "^7.24.7",
+        "@babel/plugin-transform-dynamic-import": "^7.24.7",
+        "@babel/plugin-transform-exponentiation-operator": "^7.24.7",
+        "@babel/plugin-transform-export-namespace-from": "^7.24.7",
+        "@babel/plugin-transform-for-of": "^7.24.7",
+        "@babel/plugin-transform-function-name": "^7.24.7",
+        "@babel/plugin-transform-json-strings": "^7.24.7",
+        "@babel/plugin-transform-literals": "^7.24.7",
+        "@babel/plugin-transform-logical-assignment-operators": "^7.24.7",
+        "@babel/plugin-transform-member-expression-literals": "^7.24.7",
+        "@babel/plugin-transform-modules-amd": "^7.24.7",
+        "@babel/plugin-transform-modules-commonjs": "^7.24.8",
+        "@babel/plugin-transform-modules-systemjs": "^7.24.7",
+        "@babel/plugin-transform-modules-umd": "^7.24.7",
+        "@babel/plugin-transform-named-capturing-groups-regex": "^7.24.7",
+        "@babel/plugin-transform-new-target": "^7.24.7",
+        "@babel/plugin-transform-nullish-coalescing-operator": "^7.24.7",
+        "@babel/plugin-transform-numeric-separator": "^7.24.7",
+        "@babel/plugin-transform-object-rest-spread": "^7.24.7",
+        "@babel/plugin-transform-object-super": "^7.24.7",
+        "@babel/plugin-transform-optional-catch-binding": "^7.24.7",
+        "@babel/plugin-transform-optional-chaining": "^7.24.8",
+        "@babel/plugin-transform-parameters": "^7.24.7",
+        "@babel/plugin-transform-private-methods": "^7.24.7",
+        "@babel/plugin-transform-private-property-in-object": "^7.24.7",
+        "@babel/plugin-transform-property-literals": "^7.24.7",
+        "@babel/plugin-transform-regenerator": "^7.24.7",
+        "@babel/plugin-transform-reserved-words": "^7.24.7",
+        "@babel/plugin-transform-shorthand-properties": "^7.24.7",
+        "@babel/plugin-transform-spread": "^7.24.7",
+        "@babel/plugin-transform-sticky-regex": "^7.24.7",
+        "@babel/plugin-transform-template-literals": "^7.24.7",
+        "@babel/plugin-transform-typeof-symbol": "^7.24.8",
+        "@babel/plugin-transform-unicode-escapes": "^7.24.7",
+        "@babel/plugin-transform-unicode-property-regex": "^7.24.7",
+        "@babel/plugin-transform-unicode-regex": "^7.24.7",
+        "@babel/plugin-transform-unicode-sets-regex": "^7.24.7",
+        "@babel/preset-modules": "0.1.6-no-external-plugins",
+        "babel-plugin-polyfill-corejs2": "^0.4.10",
+        "babel-plugin-polyfill-corejs3": "^0.10.4",
+        "babel-plugin-polyfill-regenerator": "^0.6.1",
+        "core-js-compat": "^3.37.1",
+        "semver": "^6.3.1"
+      },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-syntax-top-level-await": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.14.5.tgz",
-      "integrity": "sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==",
-      "dev": true,
+    "node_modules/@babel/preset-modules": {
+      "version": "0.1.6-no-external-plugins",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.14.5"
+        "@babel/helper-plugin-utils": "^7.0.0",
+        "@babel/types": "^7.4.4",
+        "esutils": "^2.0.2"
       },
-      "engines": {
-        "node": ">=6.9.0"
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0 || ^8.0.0-0 <8.0.0"
       }
     },
-    "node_modules/@babel/plugin-syntax-top-level-await/node_modules/@babel/helper-plugin-utils": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-      "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-      "dev": true,
+    "node_modules/@babel/preset-react": {
+      "version": "7.24.7",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.24.7",
+        "@babel/helper-validator-option": "^7.24.7",
+        "@babel/plugin-transform-react-display-name": "^7.24.7",
+        "@babel/plugin-transform-react-jsx": "^7.24.7",
+        "@babel/plugin-transform-react-jsx-development": "^7.24.7",
+        "@babel/plugin-transform-react-pure-annotations": "^7.24.7"
+      },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-transform-arrow-functions": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.14.5.tgz",
-      "integrity": "sha512-KOnO0l4+tD5IfOdi4x8C1XmEIRWUjNRV8wc6K2vz/3e8yAOoZZvsRXRRIF/yo/MAOFb4QjtAw9xSxMXbSMRy8A==",
-      "dev": true,
+    "node_modules/@babel/preset-typescript": {
+      "version": "7.24.7",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.14.5"
+        "@babel/helper-plugin-utils": "^7.24.7",
+        "@babel/helper-validator-option": "^7.24.7",
+        "@babel/plugin-syntax-jsx": "^7.24.7",
+        "@babel/plugin-transform-modules-commonjs": "^7.24.7",
+        "@babel/plugin-transform-typescript": "^7.24.7"
       },
       "engines": {
         "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-transform-arrow-functions/node_modules/@babel/helper-plugin-utils": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-      "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=6.9.0"
-      }
+    "node_modules/@babel/regjsgen": {
+      "version": "0.8.0",
+      "license": "MIT"
     },
-    "node_modules/@babel/plugin-transform-async-to-generator": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.14.5.tgz",
-      "integrity": "sha512-szkbzQ0mNk0rpu76fzDdqSyPu0MuvpXgC+6rz5rpMb5OIRxdmHfQxrktL8CYolL2d8luMCZTR0DpIMIdL27IjA==",
-      "dev": true,
+    "node_modules/@babel/runtime": {
+      "version": "7.25.0",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-module-imports": "^7.14.5",
-        "@babel/helper-plugin-utils": "^7.14.5",
-        "@babel/helper-remap-async-to-generator": "^7.14.5"
+        "regenerator-runtime": "^0.14.0"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@babel/plugin-transform-async-to-generator/node_modules/@babel/helper-module-imports": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.14.5.tgz",
-      "integrity": "sha512-SwrNHu5QWS84XlHwGYPDtCxcA0hrSlL2yhWYLgeOc0w7ccOl2qv4s/nARI0aYZW+bSwAL5CukeXA47B/1NKcnQ==",
-      "dev": true,
+    "node_modules/@babel/runtime-corejs3": {
+      "version": "7.25.0",
+      "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.14.5"
+        "core-js-pure": "^3.30.2",
+        "regenerator-runtime": "^0.14.0"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@babel/plugin-transform-async-to-generator/node_modules/@babel/helper-plugin-utils": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-      "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-      "dev": true,
+    "node_modules/@babel/template": {
+      "version": "7.25.0",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.24.7",
+        "@babel/parser": "^7.25.0",
+        "@babel/types": "^7.25.0"
+      },
       "engines": {
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@babel/plugin-transform-async-to-generator/node_modules/@babel/helper-validator-identifier": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz",
-      "integrity": "sha512-5lsetuxCLilmVGyiLEfoHBRX8UCFD+1m2x3Rj97WrW3V7H3u4RWRXA4evMjImCsin2J2YT0QaVDGf+z8ondbAg==",
-      "dev": true,
+    "node_modules/@babel/traverse": {
+      "version": "7.25.3",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.24.7",
+        "@babel/generator": "^7.25.0",
+        "@babel/parser": "^7.25.3",
+        "@babel/template": "^7.25.0",
+        "@babel/types": "^7.25.2",
+        "debug": "^4.3.1",
+        "globals": "^11.1.0"
+      },
       "engines": {
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@babel/plugin-transform-async-to-generator/node_modules/@babel/types": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.5.tgz",
-      "integrity": "sha512-M/NzBpEL95I5Hh4dwhin5JlE7EzO5PHMAuzjxss3tiOBD46KfQvVedN/3jEPZvdRvtsK2222XfdHogNIttFgcg==",
-      "dev": true,
+    "node_modules/@babel/types": {
+      "version": "7.25.2",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-validator-identifier": "^7.14.5",
+        "@babel/helper-string-parser": "^7.24.8",
+        "@babel/helper-validator-identifier": "^7.24.7",
         "to-fast-properties": "^2.0.0"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@babel/plugin-transform-block-scoped-functions": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.14.5.tgz",
-      "integrity": "sha512-dtqWqdWZ5NqBX3KzsVCWfQI3A53Ft5pWFCT2eCVUftWZgjc5DpDponbIF1+c+7cSGk2wN0YK7HGL/ezfRbpKBQ==",
-      "dev": true,
+    "node_modules/@bcoe/v8-coverage": {
+      "version": "0.2.3",
+      "license": "MIT"
+    },
+    "node_modules/@codemirror/autocomplete": {
+      "version": "6.18.0",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.14.5"
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.17.0",
+        "@lezer/common": "^1.0.0"
       },
-      "engines": {
-        "node": ">=6.9.0"
+      "peerDependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "@lezer/common": "^1.0.0"
       }
     },
-    "node_modules/@babel/plugin-transform-block-scoped-functions/node_modules/@babel/helper-plugin-utils": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-      "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=6.9.0"
+    "node_modules/@codemirror/commands": {
+      "version": "6.6.0",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.4.0",
+        "@codemirror/view": "^6.27.0",
+        "@lezer/common": "^1.1.0"
       }
     },
-    "node_modules/@babel/plugin-transform-block-scoping": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.14.5.tgz",
-      "integrity": "sha512-LBYm4ZocNgoCqyxMLoOnwpsmQ18HWTQvql64t3GvMUzLQrNoV1BDG0lNftC8QKYERkZgCCT/7J5xWGObGAyHDw==",
-      "dev": true,
+    "node_modules/@codemirror/lang-css": {
+      "version": "6.2.1",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@lezer/common": "^1.0.2",
+        "@lezer/css": "^1.0.0"
       }
     },
-    "node_modules/@babel/plugin-transform-block-scoping/node_modules/@babel/helper-plugin-utils": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-      "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=6.9.0"
+    "node_modules/@codemirror/lang-html": {
+      "version": "6.4.9",
+      "license": "MIT",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/lang-css": "^6.0.0",
+        "@codemirror/lang-javascript": "^6.0.0",
+        "@codemirror/language": "^6.4.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.17.0",
+        "@lezer/common": "^1.0.0",
+        "@lezer/css": "^1.1.0",
+        "@lezer/html": "^1.3.0"
       }
     },
-    "node_modules/@babel/plugin-transform-classes": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.14.5.tgz",
-      "integrity": "sha512-J4VxKAMykM06K/64z9rwiL6xnBHgB1+FVspqvlgCdwD1KUbQNfszeKVVOMh59w3sztHYIZDgnhOC4WbdEfHFDA==",
-      "dev": true,
+    "node_modules/@codemirror/lang-javascript": {
+      "version": "6.2.2",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-annotate-as-pure": "^7.14.5",
-        "@babel/helper-function-name": "^7.14.5",
-        "@babel/helper-optimise-call-expression": "^7.14.5",
-        "@babel/helper-plugin-utils": "^7.14.5",
-        "@babel/helper-replace-supers": "^7.14.5",
-        "@babel/helper-split-export-declaration": "^7.14.5",
-        "globals": "^11.1.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/language": "^6.6.0",
+        "@codemirror/lint": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.17.0",
+        "@lezer/common": "^1.0.0",
+        "@lezer/javascript": "^1.0.0"
       }
     },
-    "node_modules/@babel/plugin-transform-classes/node_modules/@babel/code-frame": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.14.5.tgz",
-      "integrity": "sha512-9pzDqyc6OLDaqe+zbACgFkb6fKMNG6CObKpnYXChRsvYGyEdc7CA2BaqeOM+vOtCS5ndmJicPJhKAwYRI6UfFw==",
-      "dev": true,
+    "node_modules/@codemirror/lang-xml": {
+      "version": "6.1.0",
+      "license": "MIT",
       "dependencies": {
-        "@babel/highlight": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/language": "^6.4.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "@lezer/common": "^1.0.0",
+        "@lezer/xml": "^1.0.0"
       }
     },
-    "node_modules/@babel/plugin-transform-classes/node_modules/@babel/generator": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.14.5.tgz",
-      "integrity": "sha512-y3rlP+/G25OIX3mYKKIOlQRcqj7YgrvHxOLbVmyLJ9bPmi5ttvUmpydVjcFjZphOktWuA7ovbx91ECloWTfjIA==",
-      "dev": true,
+    "node_modules/@codemirror/language": {
+      "version": "6.10.2",
+      "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.14.5",
-        "jsesc": "^2.5.1",
-        "source-map": "^0.5.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.23.0",
+        "@lezer/common": "^1.1.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0",
+        "style-mod": "^4.0.0"
       }
     },
-    "node_modules/@babel/plugin-transform-classes/node_modules/@babel/helper-function-name": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.14.5.tgz",
-      "integrity": "sha512-Gjna0AsXWfFvrAuX+VKcN/aNNWonizBj39yGwUzVDVTlMYJMK2Wp6xdpy72mfArFq5uK+NOuexfzZlzI1z9+AQ==",
-      "dev": true,
+    "node_modules/@codemirror/lint": {
+      "version": "6.8.1",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-get-function-arity": "^7.14.5",
-        "@babel/template": "^7.14.5",
-        "@babel/types": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "crelt": "^1.0.5"
       }
     },
-    "node_modules/@babel/plugin-transform-classes/node_modules/@babel/helper-get-function-arity": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.14.5.tgz",
-      "integrity": "sha512-I1Db4Shst5lewOM4V+ZKJzQ0JGGaZ6VY1jYvMghRjqs6DWgxLCIyFt30GlnKkfUeFLpJt2vzbMVEXVSXlIFYUg==",
-      "dev": true,
+    "node_modules/@codemirror/search": {
+      "version": "6.5.6",
+      "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0",
+        "crelt": "^1.0.5"
       }
     },
-    "node_modules/@babel/plugin-transform-classes/node_modules/@babel/helper-member-expression-to-functions": {
-      "version": "7.14.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.14.7.tgz",
-      "integrity": "sha512-TMUt4xKxJn6ccjcOW7c4hlwyJArizskAhoSTOCkA0uZ+KghIaci0Qg9R043kUMWI9mtQfgny+NQ5QATnZ+paaA==",
-      "dev": true,
+    "node_modules/@codemirror/state": {
+      "version": "6.4.1",
+      "license": "MIT"
+    },
+    "node_modules/@codemirror/view": {
+      "version": "6.32.0",
+      "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+        "@codemirror/state": "^6.4.0",
+        "style-mod": "^4.1.0",
+        "w3c-keyname": "^2.2.4"
       }
     },
-    "node_modules/@babel/plugin-transform-classes/node_modules/@babel/helper-optimise-call-expression": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.14.5.tgz",
-      "integrity": "sha512-IqiLIrODUOdnPU9/F8ib1Fx2ohlgDhxnIDU7OEVi+kAbEZcyiF7BLU8W6PfvPi9LzztjS7kcbzbmL7oG8kD6VA==",
-      "dev": true,
-      "dependencies": {
-        "@babel/types": "^7.14.5"
-      },
+    "node_modules/@cospired/i18n-iso-languages": {
+      "version": "4.2.0",
+      "license": "MIT",
       "engines": {
-        "node": ">=6.9.0"
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
-    "node_modules/@babel/plugin-transform-classes/node_modules/@babel/helper-plugin-utils": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-      "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-      "dev": true,
+    "node_modules/@csstools/cascade-layer-name-parser": {
+      "version": "1.0.13",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
       "engines": {
-        "node": ">=6.9.0"
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^2.7.1",
+        "@csstools/css-tokenizer": "^2.4.1"
       }
     },
-    "node_modules/@babel/plugin-transform-classes/node_modules/@babel/helper-replace-supers": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.14.5.tgz",
-      "integrity": "sha512-3i1Qe9/8x/hCHINujn+iuHy+mMRLoc77b2nI9TB0zjH1hvn9qGlXjWlggdwUcju36PkPCy/lpM7LLUdcTyH4Ow==",
-      "dev": true,
-      "dependencies": {
-        "@babel/helper-member-expression-to-functions": "^7.14.5",
-        "@babel/helper-optimise-call-expression": "^7.14.5",
-        "@babel/traverse": "^7.14.5",
-        "@babel/types": "^7.14.5"
-      },
+    "node_modules/@csstools/css-parser-algorithms": {
+      "version": "2.7.1",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
       "engines": {
-        "node": ">=6.9.0"
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "@csstools/css-tokenizer": "^2.4.1"
       }
     },
-    "node_modules/@babel/plugin-transform-classes/node_modules/@babel/helper-split-export-declaration": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.14.5.tgz",
-      "integrity": "sha512-hprxVPu6e5Kdp2puZUmvOGjaLv9TCe58E/Fl6hRq4YiVQxIcNvuq6uTM2r1mT/oPskuS9CgR+I94sqAYv0NGKA==",
-      "dev": true,
-      "dependencies": {
-        "@babel/types": "^7.14.5"
-      },
+    "node_modules/@csstools/css-tokenizer": {
+      "version": "2.4.1",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
       "engines": {
-        "node": ">=6.9.0"
+        "node": "^14 || ^16 || >=18"
       }
     },
-    "node_modules/@babel/plugin-transform-classes/node_modules/@babel/helper-validator-identifier": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz",
-      "integrity": "sha512-5lsetuxCLilmVGyiLEfoHBRX8UCFD+1m2x3Rj97WrW3V7H3u4RWRXA4evMjImCsin2J2YT0QaVDGf+z8ondbAg==",
-      "dev": true,
+    "node_modules/@csstools/media-query-list-parser": {
+      "version": "2.1.13",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
       "engines": {
-        "node": ">=6.9.0"
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^2.7.1",
+        "@csstools/css-tokenizer": "^2.4.1"
       }
     },
-    "node_modules/@babel/plugin-transform-classes/node_modules/@babel/highlight": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.14.5.tgz",
-      "integrity": "sha512-qf9u2WFWVV0MppaL877j2dBtQIDgmidgjGk5VIMw3OadXvYaXn66U1BFlH2t4+t3i+8PhedppRv+i40ABzd+gg==",
+    "node_modules/@csstools/selector-specificity": {
+      "version": "3.1.1",
       "dev": true,
-      "dependencies": {
-        "@babel/helper-validator-identifier": "^7.14.5",
-        "chalk": "^2.0.0",
-        "js-tokens": "^4.0.0"
-      },
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT-0",
       "engines": {
-        "node": ">=6.9.0"
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss-selector-parser": "^6.0.13"
       }
     },
-    "node_modules/@babel/plugin-transform-classes/node_modules/@babel/parser": {
-      "version": "7.14.7",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.14.7.tgz",
-      "integrity": "sha512-X67Z5y+VBJuHB/RjwECp8kSl5uYi0BvRbNeWqkaJCVh+LiTPl19WBUfG627psSgp9rSf6ojuXghQM3ha6qHHdA==",
-      "dev": true,
-      "bin": {
-        "parser": "bin/babel-parser.js"
-      },
+    "node_modules/@discoveryjs/json-ext": {
+      "version": "0.5.7",
+      "license": "MIT",
       "engines": {
-        "node": ">=6.0.0"
+        "node": ">=10.0.0"
       }
     },
-    "node_modules/@babel/plugin-transform-classes/node_modules/@babel/template": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.14.5.tgz",
-      "integrity": "sha512-6Z3Po85sfxRGachLULUhOmvAaOo7xCvqGQtxINai2mEGPFm6pQ4z5QInFnUrRpfoSV60BnjyF5F3c+15fxFV1g==",
-      "dev": true,
+    "node_modules/@dnd-kit/accessibility": {
+      "version": "3.1.0",
+      "license": "MIT",
       "dependencies": {
-        "@babel/code-frame": "^7.14.5",
-        "@babel/parser": "^7.14.5",
-        "@babel/types": "^7.14.5"
+        "tslib": "^2.0.0"
       },
-      "engines": {
-        "node": ">=6.9.0"
+      "peerDependencies": {
+        "react": ">=16.8.0"
       }
     },
-    "node_modules/@babel/plugin-transform-classes/node_modules/@babel/traverse": {
-      "version": "7.14.7",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.14.7.tgz",
-      "integrity": "sha512-9vDr5NzHu27wgwejuKL7kIOm4bwEtaPQ4Z6cpCmjSuaRqpH/7xc4qcGEscwMqlkwgcXl6MvqoAjZkQ24uSdIZQ==",
-      "dev": true,
+    "node_modules/@dnd-kit/core": {
+      "version": "6.1.0",
+      "license": "MIT",
       "dependencies": {
-        "@babel/code-frame": "^7.14.5",
-        "@babel/generator": "^7.14.5",
-        "@babel/helper-function-name": "^7.14.5",
-        "@babel/helper-hoist-variables": "^7.14.5",
-        "@babel/helper-split-export-declaration": "^7.14.5",
-        "@babel/parser": "^7.14.7",
-        "@babel/types": "^7.14.5",
-        "debug": "^4.1.0",
-        "globals": "^11.1.0"
+        "@dnd-kit/accessibility": "^3.1.0",
+        "@dnd-kit/utilities": "^3.2.2",
+        "tslib": "^2.0.0"
       },
-      "engines": {
-        "node": ">=6.9.0"
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
       }
     },
-    "node_modules/@babel/plugin-transform-classes/node_modules/@babel/types": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.5.tgz",
-      "integrity": "sha512-M/NzBpEL95I5Hh4dwhin5JlE7EzO5PHMAuzjxss3tiOBD46KfQvVedN/3jEPZvdRvtsK2222XfdHogNIttFgcg==",
-      "dev": true,
+    "node_modules/@dnd-kit/modifiers": {
+      "version": "7.0.0",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-validator-identifier": "^7.14.5",
-        "to-fast-properties": "^2.0.0"
+        "@dnd-kit/utilities": "^3.2.2",
+        "tslib": "^2.0.0"
       },
-      "engines": {
-        "node": ">=6.9.0"
+      "peerDependencies": {
+        "@dnd-kit/core": "^6.1.0",
+        "react": ">=16.8.0"
       }
     },
-    "node_modules/@babel/plugin-transform-classes/node_modules/source-map": {
-      "version": "0.5.7",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-      "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
+    "node_modules/@dnd-kit/sortable": {
+      "version": "8.0.0",
+      "license": "MIT",
+      "dependencies": {
+        "@dnd-kit/utilities": "^3.2.2",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "@dnd-kit/core": "^6.1.0",
+        "react": ">=16.8.0"
       }
     },
-    "node_modules/@babel/plugin-transform-computed-properties": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.14.5.tgz",
-      "integrity": "sha512-pWM+E4283UxaVzLb8UBXv4EIxMovU4zxT1OPnpHJcmnvyY9QbPPTKZfEj31EUvG3/EQRbYAGaYEUZ4yWOBC2xg==",
-      "dev": true,
+    "node_modules/@dnd-kit/utilities": {
+      "version": "3.2.2",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.14.5"
+        "tslib": "^2.0.0"
       },
-      "engines": {
-        "node": ">=6.9.0"
+      "peerDependencies": {
+        "react": ">=16.8.0"
       }
     },
-    "node_modules/@babel/plugin-transform-computed-properties/node_modules/@babel/helper-plugin-utils": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-      "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=6.9.0"
+    "node_modules/@edx/brand": {
+      "name": "@openedx/brand-openedx",
+      "version": "1.2.3",
+      "license": "GPL-3.0-or-later"
+    },
+    "node_modules/@edx/browserslist-config": {
+      "version": "1.2.0",
+      "license": "AGPL-3.0"
+    },
+    "node_modules/@edx/eslint-config": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/@edx/eslint-config/-/eslint-config-4.3.0.tgz",
+      "integrity": "sha512-4W9wFG4ALr3xocakCsncgJbK67RHfSmDwHDXKHReFtjxl/FRkxhS6qayz189oChqfANieeV3zRCLaq44bLf+/A==",
+      "peerDependencies": {
+        "@typescript-eslint/eslint-plugin": "^5.62.0",
+        "@typescript-eslint/parser": "^5.62.0",
+        "eslint": "^7.32.0 || ^8.2.0",
+        "eslint-config-airbnb": "^18.0.1 || ^19.0.0",
+        "eslint-config-airbnb-typescript": "^17.0.0",
+        "eslint-plugin-import": "^2.25.3",
+        "eslint-plugin-jsx-a11y": "^6.2.3",
+        "eslint-plugin-react": "^7.18.0",
+        "eslint-plugin-react-hooks": "^1.7.0 || ^4.0.0"
       }
     },
-    "node_modules/@babel/plugin-transform-destructuring": {
-      "version": "7.14.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.14.7.tgz",
-      "integrity": "sha512-0mDE99nK+kVh3xlc5vKwB6wnP9ecuSj+zQCa/n0voENtP/zymdT4HH6QEb65wjjcbqr1Jb/7z9Qp7TF5FtwYGw==",
-      "dev": true,
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.14.5"
+    "node_modules/@edx/frontend-component-footer": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-component-footer/-/frontend-component-footer-14.1.0.tgz",
+      "integrity": "sha512-hdQEGbZosa5Lp8d4sLCu7+e0+X2dQDQZgd5stABbGNbDD1UPU7Efb3duJ5HhcNscpCHMhtYeNbajfUU5K+tKrg==",
+      "dependencies": {
+        "@fortawesome/fontawesome-svg-core": "6.6.0",
+        "@fortawesome/free-brands-svg-icons": "6.6.0",
+        "@fortawesome/free-regular-svg-icons": "6.6.0",
+        "@fortawesome/free-solid-svg-icons": "6.6.0",
+        "@fortawesome/react-fontawesome": "0.2.2",
+        "classnames": "^2.5.1",
+        "jest-environment-jsdom": "^29.7.0",
+        "lodash": "^4.17.21",
+        "ts-jest": "^29.1.2"
       },
-      "engines": {
-        "node": ">=6.9.0"
+      "peerDependencies": {
+        "@edx/frontend-platform": "^7.0.0 || ^8.0.0",
+        "@openedx/paragon": ">= 21.11.3 < 23.0.0",
+        "prop-types": "^15.5.10",
+        "react": "^16.9.0 || ^17.0.0",
+        "react-dom": "^16.9.0 || ^17.0.0"
       }
     },
-    "node_modules/@babel/plugin-transform-destructuring/node_modules/@babel/helper-plugin-utils": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-      "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=6.9.0"
+    "node_modules/@edx/frontend-component-header": {
+      "version": "5.8.0",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-component-header/-/frontend-component-header-5.8.0.tgz",
+      "integrity": "sha512-AgLgt1y5vrqx6cU3IDr7HKngJImTN48gCIaXdCQ4YhR4PpX3p+ZS9R5Ih0dapWtvnX0Oo2hT2ggUKORV0h90rw==",
+      "license": "AGPL-3.0",
+      "dependencies": {
+        "@fortawesome/fontawesome-svg-core": "6.6.0",
+        "@fortawesome/free-brands-svg-icons": "6.6.0",
+        "@fortawesome/free-regular-svg-icons": "6.6.0",
+        "@fortawesome/free-solid-svg-icons": "6.6.0",
+        "@fortawesome/react-fontawesome": "^0.2.0",
+        "@openedx/frontend-plugin-framework": "^1.3.0",
+        "axios-mock-adapter": "1.22.0",
+        "babel-polyfill": "6.26.0",
+        "classnames": "^2.5.1",
+        "jest-environment-jsdom": "^29.7.0",
+        "react-responsive": "8.2.0",
+        "react-transition-group": "4.4.5"
+      },
+      "peerDependencies": {
+        "@edx/frontend-platform": "^7.0.0 || ^8.0.0",
+        "@openedx/paragon": ">= 21.5.7 < 23.0.0",
+        "prop-types": "^15.5.10",
+        "react": "^16.9.0 || ^17.0.0",
+        "react-dom": "^16.9.0 || ^17.0.0",
+        "react-router-dom": "^6.14.2"
       }
     },
-    "node_modules/@babel/plugin-transform-dotall-regex": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.14.5.tgz",
-      "integrity": "sha512-loGlnBdj02MDsFaHhAIJzh7euK89lBrGIdM9EAtHFo6xKygCUGuuWe07o1oZVk287amtW1n0808sQM99aZt3gw==",
-      "dev": true,
+    "node_modules/@edx/frontend-component-header/node_modules/react-responsive": {
+      "version": "8.2.0",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-create-regexp-features-plugin": "^7.14.5",
-        "@babel/helper-plugin-utils": "^7.14.5"
+        "hyphenate-style-name": "^1.0.0",
+        "matchmediaquery": "^0.3.0",
+        "prop-types": "^15.6.1",
+        "shallow-equal": "^1.1.0"
       },
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">= 0.10"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
       }
     },
-    "node_modules/@babel/plugin-transform-dotall-regex/node_modules/@babel/helper-plugin-utils": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-      "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=6.9.0"
+    "node_modules/@edx/frontend-enterprise-hotjar": {
+      "version": "2.0.0",
+      "license": "AGPL-3.0",
+      "peerDependencies": {
+        "react": "^16.12.0 || ^17.0.0",
+        "react-dom": "^16.12.0 || ^17.0.0",
+        "react-router-dom": "^6.0.0"
       }
     },
-    "node_modules/@babel/plugin-transform-duplicate-keys": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.14.5.tgz",
-      "integrity": "sha512-iJjbI53huKbPDAsJ8EmVmvCKeeq21bAze4fu9GBQtSLqfvzj2oRuHVx4ZkDwEhg1htQ+5OBZh/Ab0XDf5iBZ7A==",
-      "dev": true,
+    "node_modules/@edx/frontend-platform": {
+      "version": "8.1.1",
+      "license": "AGPL-3.0",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.14.5"
+        "@cospired/i18n-iso-languages": "4.2.0",
+        "@formatjs/intl-pluralrules": "4.3.3",
+        "@formatjs/intl-relativetimeformat": "10.0.1",
+        "axios": "1.6.7",
+        "axios-cache-interceptor": "1.3.2",
+        "form-urlencoded": "4.1.4",
+        "glob": "7.2.3",
+        "history": "4.10.1",
+        "i18n-iso-countries": "4.3.1",
+        "jwt-decode": "3.1.2",
+        "localforage": "1.10.0",
+        "localforage-memoryStorageDriver": "0.9.2",
+        "lodash.camelcase": "4.3.0",
+        "lodash.memoize": "4.1.2",
+        "lodash.merge": "4.6.2",
+        "lodash.snakecase": "4.1.1",
+        "pubsub-js": "1.9.4",
+        "react-intl": "6.6.8",
+        "universal-cookie": "4.0.4"
       },
-      "engines": {
-        "node": ">=6.9.0"
+      "bin": {
+        "intl-imports.js": "i18n/scripts/intl-imports.js",
+        "transifex-utils.js": "i18n/scripts/transifex-utils.js"
+      },
+      "peerDependencies": {
+        "@openedx/frontend-build": ">= 14.0.0",
+        "@openedx/paragon": ">= 21.5.7 < 23.0.0",
+        "prop-types": ">=15.7.2 <16.0.0",
+        "react": "^16.9.0 || ^17.0.0",
+        "react-dom": "^16.9.0 || ^17.0.0",
+        "react-redux": "^7.1.1 || ^8.1.1",
+        "react-router-dom": "^6.0.0",
+        "redux": "^4.0.4"
       }
     },
-    "node_modules/@babel/plugin-transform-duplicate-keys/node_modules/@babel/helper-plugin-utils": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-      "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=6.9.0"
+    "node_modules/@edx/frontend-platform/node_modules/axios": {
+      "version": "1.6.7",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.15.4",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
       }
     },
-    "node_modules/@babel/plugin-transform-exponentiation-operator": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.14.5.tgz",
-      "integrity": "sha512-jFazJhMBc9D27o9jDnIE5ZErI0R0m7PbKXVq77FFvqFbzvTMuv8jaAwLZ5PviOLSFttqKIW0/wxNSDbjLk0tYA==",
-      "dev": true,
+    "node_modules/@edx/frontend-platform/node_modules/axios-cache-interceptor": {
+      "version": "1.3.2",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-builder-binary-assignment-operator-visitor": "^7.14.5",
-        "@babel/helper-plugin-utils": "^7.14.5"
+        "cache-parser": "^1.2.4",
+        "fast-defer": "^1.1.7",
+        "object-code": "^1.3.0"
       },
       "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/plugin-transform-exponentiation-operator/node_modules/@babel/helper-plugin-utils": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-      "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=6.9.0"
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/arthurfiorette/axios-cache-interceptor?sponsor=1"
+      },
+      "peerDependencies": {
+        "axios": "^1"
       }
     },
-    "node_modules/@babel/plugin-transform-for-of": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.14.5.tgz",
-      "integrity": "sha512-CfmqxSUZzBl0rSjpoQSFoR9UEj3HzbGuGNL21/iFTmjb5gFggJp3ph0xR1YBhexmLoKRHzgxuFvty2xdSt6gTA==",
-      "dev": true,
+    "node_modules/@edx/new-relic-source-map-webpack-plugin": {
+      "version": "2.1.0",
+      "license": "AGPL-3.0",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+        "@newrelic/publish-sourcemap": "^5.0.1"
       }
     },
-    "node_modules/@babel/plugin-transform-for-of/node_modules/@babel/helper-plugin-utils": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-      "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=6.9.0"
+    "node_modules/@edx/openedx-atlas": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/@edx/openedx-atlas/-/openedx-atlas-0.6.2.tgz",
+      "integrity": "sha512-28Q8vzJDMS4wUxdkbIUBQpzWJ3HTdMaGlaEhFjrVGfuZkh++1AG6Tn/7FMD88cegalYAkphu530VQCHEkMZQhw==",
+      "license": "AGPL-3.0",
+      "bin": {
+        "atlas": "atlas"
       }
     },
-    "node_modules/@babel/plugin-transform-function-name": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.14.5.tgz",
-      "integrity": "sha512-vbO6kv0fIzZ1GpmGQuvbwwm+O4Cbm2NrPzwlup9+/3fdkuzo1YqOZcXw26+YUJB84Ja7j9yURWposEHLYwxUfQ==",
+    "node_modules/@edx/react-unit-test-utils": {
+      "version": "3.0.0",
       "dev": true,
+      "license": "AGPL-3.0",
       "dependencies": {
-        "@babel/helper-function-name": "^7.14.5",
-        "@babel/helper-plugin-utils": "^7.14.5"
+        "@edx/browserslist-config": "^1.1.1",
+        "@reduxjs/toolkit": "^1.5.1",
+        "@testing-library/dom": "^9.3.0",
+        "@testing-library/jest-dom": "^5.16.5",
+        "@testing-library/react": "^12.1.5",
+        "@testing-library/react-hooks": "^8.0.1",
+        "classnames": "^2.2.6",
+        "core-js": "3.6.5",
+        "lodash": "^4.17.21",
+        "react-dev-utils": "^12.0.1",
+        "react-test-renderer": "17.0.2"
       },
-      "engines": {
-        "node": ">=6.9.0"
+      "peerDependencies": {
+        "@edx/frontend-platform": "^8.0.0",
+        "@openedx/frontend-build": "^14.0.0",
+        "@openedx/paragon": "^21.5.7 || ^22.0.0",
+        "react": "^16.9.0 || ^17.0.0"
       }
     },
-    "node_modules/@babel/plugin-transform-function-name/node_modules/@babel/code-frame": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.14.5.tgz",
-      "integrity": "sha512-9pzDqyc6OLDaqe+zbACgFkb6fKMNG6CObKpnYXChRsvYGyEdc7CA2BaqeOM+vOtCS5ndmJicPJhKAwYRI6UfFw==",
+    "node_modules/@edx/react-unit-test-utils/node_modules/@testing-library/dom": {
+      "version": "9.3.4",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/highlight": "^7.14.5"
+        "@babel/code-frame": "^7.10.4",
+        "@babel/runtime": "^7.12.5",
+        "@types/aria-query": "^5.0.1",
+        "aria-query": "5.1.3",
+        "chalk": "^4.1.0",
+        "dom-accessibility-api": "^0.5.9",
+        "lz-string": "^1.5.0",
+        "pretty-format": "^27.0.2"
       },
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=14"
       }
     },
-    "node_modules/@babel/plugin-transform-function-name/node_modules/@babel/helper-function-name": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.14.5.tgz",
-      "integrity": "sha512-Gjna0AsXWfFvrAuX+VKcN/aNNWonizBj39yGwUzVDVTlMYJMK2Wp6xdpy72mfArFq5uK+NOuexfzZlzI1z9+AQ==",
+    "node_modules/@edx/react-unit-test-utils/node_modules/aria-query": {
+      "version": "5.1.3",
       "dev": true,
+      "license": "Apache-2.0",
       "dependencies": {
-        "@babel/helper-get-function-arity": "^7.14.5",
-        "@babel/template": "^7.14.5",
-        "@babel/types": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+        "deep-equal": "^2.0.5"
       }
     },
-    "node_modules/@babel/plugin-transform-function-name/node_modules/@babel/helper-get-function-arity": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.14.5.tgz",
-      "integrity": "sha512-I1Db4Shst5lewOM4V+ZKJzQ0JGGaZ6VY1jYvMghRjqs6DWgxLCIyFt30GlnKkfUeFLpJt2vzbMVEXVSXlIFYUg==",
+    "node_modules/@edx/stylelint-config-edx": {
+      "version": "2.3.3",
       "dev": true,
+      "license": "Apache-2.0",
       "dependencies": {
-        "@babel/types": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+        "stylelint": "^15.6.0",
+        "stylelint-config-recommended-scss": "^11.0.0",
+        "stylelint-config-standard": "^33.0.0",
+        "stylelint-scss": "^4.1.0"
       }
     },
-    "node_modules/@babel/plugin-transform-function-name/node_modules/@babel/helper-plugin-utils": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-      "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=6.9.0"
+    "node_modules/@edx/typescript-config": {
+      "version": "1.1.0",
+      "license": "MIT",
+      "peerDependencies": {
+        "typescript": "^4.9.4"
       }
     },
-    "node_modules/@babel/plugin-transform-function-name/node_modules/@babel/helper-validator-identifier": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz",
-      "integrity": "sha512-5lsetuxCLilmVGyiLEfoHBRX8UCFD+1m2x3Rj97WrW3V7H3u4RWRXA4evMjImCsin2J2YT0QaVDGf+z8ondbAg==",
-      "dev": true,
+    "node_modules/@emotion/babel-plugin": {
+      "version": "11.12.0",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.16.7",
+        "@babel/runtime": "^7.18.3",
+        "@emotion/hash": "^0.9.2",
+        "@emotion/memoize": "^0.9.0",
+        "@emotion/serialize": "^1.2.0",
+        "babel-plugin-macros": "^3.1.0",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^4.0.0",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7",
+        "stylis": "4.2.0"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/convert-source-map": {
+      "version": "1.9.0",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/source-map": {
+      "version": "0.5.7",
+      "license": "BSD-3-Clause",
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=0.10.0"
       }
     },
-    "node_modules/@babel/plugin-transform-function-name/node_modules/@babel/highlight": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.14.5.tgz",
-      "integrity": "sha512-qf9u2WFWVV0MppaL877j2dBtQIDgmidgjGk5VIMw3OadXvYaXn66U1BFlH2t4+t3i+8PhedppRv+i40ABzd+gg==",
-      "dev": true,
+    "node_modules/@emotion/cache": {
+      "version": "11.13.1",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-validator-identifier": "^7.14.5",
-        "chalk": "^2.0.0",
-        "js-tokens": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+        "@emotion/memoize": "^0.9.0",
+        "@emotion/sheet": "^1.4.0",
+        "@emotion/utils": "^1.4.0",
+        "@emotion/weak-memoize": "^0.4.0",
+        "stylis": "4.2.0"
       }
     },
-    "node_modules/@babel/plugin-transform-function-name/node_modules/@babel/parser": {
-      "version": "7.14.7",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.14.7.tgz",
-      "integrity": "sha512-X67Z5y+VBJuHB/RjwECp8kSl5uYi0BvRbNeWqkaJCVh+LiTPl19WBUfG627psSgp9rSf6ojuXghQM3ha6qHHdA==",
-      "dev": true,
-      "bin": {
-        "parser": "bin/babel-parser.js"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      }
+    "node_modules/@emotion/hash": {
+      "version": "0.9.2",
+      "license": "MIT"
     },
-    "node_modules/@babel/plugin-transform-function-name/node_modules/@babel/template": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.14.5.tgz",
-      "integrity": "sha512-6Z3Po85sfxRGachLULUhOmvAaOo7xCvqGQtxINai2mEGPFm6pQ4z5QInFnUrRpfoSV60BnjyF5F3c+15fxFV1g==",
-      "dev": true,
-      "dependencies": {
-        "@babel/code-frame": "^7.14.5",
-        "@babel/parser": "^7.14.5",
-        "@babel/types": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
+    "node_modules/@emotion/memoize": {
+      "version": "0.9.0",
+      "license": "MIT"
     },
-    "node_modules/@babel/plugin-transform-function-name/node_modules/@babel/types": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.5.tgz",
-      "integrity": "sha512-M/NzBpEL95I5Hh4dwhin5JlE7EzO5PHMAuzjxss3tiOBD46KfQvVedN/3jEPZvdRvtsK2222XfdHogNIttFgcg==",
-      "dev": true,
+    "node_modules/@emotion/react": {
+      "version": "11.13.0",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-validator-identifier": "^7.14.5",
-        "to-fast-properties": "^2.0.0"
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.12.0",
+        "@emotion/cache": "^11.13.0",
+        "@emotion/serialize": "^1.3.0",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.1.0",
+        "@emotion/utils": "^1.4.0",
+        "@emotion/weak-memoize": "^0.4.0",
+        "hoist-non-react-statics": "^3.3.1"
       },
-      "engines": {
-        "node": ">=6.9.0"
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@babel/plugin-transform-literals": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.14.5.tgz",
-      "integrity": "sha512-ql33+epql2F49bi8aHXxvLURHkxJbSmMKl9J5yHqg4PLtdE6Uc48CH1GS6TQvZ86eoB/ApZXwm7jlA+B3kra7A==",
-      "dev": true,
+    "node_modules/@emotion/serialize": {
+      "version": "1.3.0",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+        "@emotion/hash": "^0.9.2",
+        "@emotion/memoize": "^0.9.0",
+        "@emotion/unitless": "^0.9.0",
+        "@emotion/utils": "^1.4.0",
+        "csstype": "^3.0.2"
       }
     },
-    "node_modules/@babel/plugin-transform-literals/node_modules/@babel/helper-plugin-utils": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-      "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=6.9.0"
+    "node_modules/@emotion/sheet": {
+      "version": "1.4.0",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/unitless": {
+      "version": "0.9.0",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/use-insertion-effect-with-fallbacks": {
+      "version": "1.1.0",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16.8.0"
       }
     },
-    "node_modules/@babel/plugin-transform-member-expression-literals": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.14.5.tgz",
-      "integrity": "sha512-WkNXxH1VXVTKarWFqmso83xl+2V3Eo28YY5utIkbsmXoItO8Q3aZxN4BTS2k0hz9dGUloHK26mJMyQEYfkn/+Q==",
-      "dev": true,
+    "node_modules/@emotion/utils": {
+      "version": "1.4.0",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/weak-memoize": {
+      "version": "0.4.0",
+      "license": "MIT"
+    },
+    "node_modules/@eslint-community/eslint-utils": {
+      "version": "4.4.0",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.14.5"
+        "eslint-visitor-keys": "^3.3.0"
       },
       "engines": {
-        "node": ">=6.9.0"
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
       }
     },
-    "node_modules/@babel/plugin-transform-member-expression-literals/node_modules/@babel/helper-plugin-utils": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-      "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-      "dev": true,
+    "node_modules/@eslint-community/eslint-utils/node_modules/eslint-visitor-keys": {
+      "version": "3.4.3",
+      "license": "Apache-2.0",
       "engines": {
-        "node": ">=6.9.0"
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
       }
     },
-    "node_modules/@babel/plugin-transform-modules-amd": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.14.5.tgz",
-      "integrity": "sha512-3lpOU8Vxmp3roC4vzFpSdEpGUWSMsHFreTWOMMLzel2gNGfHE5UWIh/LN6ghHs2xurUp4jRFYMUIZhuFbody1g==",
-      "dev": true,
-      "dependencies": {
-        "@babel/helper-module-transforms": "^7.14.5",
-        "@babel/helper-plugin-utils": "^7.14.5",
-        "babel-plugin-dynamic-import-node": "^2.3.3"
-      },
+    "node_modules/@eslint-community/regexpp": {
+      "version": "4.11.0",
+      "license": "MIT",
       "engines": {
-        "node": ">=6.9.0"
+        "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
       }
     },
-    "node_modules/@babel/plugin-transform-modules-amd/node_modules/@babel/code-frame": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.14.5.tgz",
-      "integrity": "sha512-9pzDqyc6OLDaqe+zbACgFkb6fKMNG6CObKpnYXChRsvYGyEdc7CA2BaqeOM+vOtCS5ndmJicPJhKAwYRI6UfFw==",
-      "dev": true,
+    "node_modules/@eslint/eslintrc": {
+      "version": "2.1.4",
+      "license": "MIT",
       "dependencies": {
-        "@babel/highlight": "^7.14.5"
+        "ajv": "^6.12.4",
+        "debug": "^4.3.2",
+        "espree": "^9.6.0",
+        "globals": "^13.19.0",
+        "ignore": "^5.2.0",
+        "import-fresh": "^3.2.1",
+        "js-yaml": "^4.1.0",
+        "minimatch": "^3.1.2",
+        "strip-json-comments": "^3.1.1"
       },
       "engines": {
-        "node": ">=6.9.0"
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
       }
     },
-    "node_modules/@babel/plugin-transform-modules-amd/node_modules/@babel/generator": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.14.5.tgz",
-      "integrity": "sha512-y3rlP+/G25OIX3mYKKIOlQRcqj7YgrvHxOLbVmyLJ9bPmi5ttvUmpydVjcFjZphOktWuA7ovbx91ECloWTfjIA==",
-      "dev": true,
+    "node_modules/@eslint/eslintrc/node_modules/argparse": {
+      "version": "2.0.1",
+      "license": "Python-2.0"
+    },
+    "node_modules/@eslint/eslintrc/node_modules/globals": {
+      "version": "13.24.0",
+      "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.14.5",
-        "jsesc": "^2.5.1",
-        "source-map": "^0.5.0"
+        "type-fest": "^0.20.2"
       },
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/@babel/plugin-transform-modules-amd/node_modules/@babel/helper-function-name": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.14.5.tgz",
-      "integrity": "sha512-Gjna0AsXWfFvrAuX+VKcN/aNNWonizBj39yGwUzVDVTlMYJMK2Wp6xdpy72mfArFq5uK+NOuexfzZlzI1z9+AQ==",
-      "dev": true,
+    "node_modules/@eslint/eslintrc/node_modules/js-yaml": {
+      "version": "4.1.0",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-get-function-arity": "^7.14.5",
-        "@babel/template": "^7.14.5",
-        "@babel/types": "^7.14.5"
+        "argparse": "^2.0.1"
       },
-      "engines": {
-        "node": ">=6.9.0"
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
       }
     },
-    "node_modules/@babel/plugin-transform-modules-amd/node_modules/@babel/helper-get-function-arity": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.14.5.tgz",
-      "integrity": "sha512-I1Db4Shst5lewOM4V+ZKJzQ0JGGaZ6VY1jYvMghRjqs6DWgxLCIyFt30GlnKkfUeFLpJt2vzbMVEXVSXlIFYUg==",
-      "dev": true,
-      "dependencies": {
-        "@babel/types": "^7.14.5"
+    "node_modules/@eslint/eslintrc/node_modules/type-fest": {
+      "version": "0.20.2",
+      "license": "(MIT OR CC0-1.0)",
+      "engines": {
+        "node": ">=10"
       },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@eslint/js": {
+      "version": "8.57.0",
+      "license": "MIT",
+      "peer": true,
       "engines": {
-        "node": ">=6.9.0"
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
-    "node_modules/@babel/plugin-transform-modules-amd/node_modules/@babel/helper-member-expression-to-functions": {
-      "version": "7.14.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.14.7.tgz",
-      "integrity": "sha512-TMUt4xKxJn6ccjcOW7c4hlwyJArizskAhoSTOCkA0uZ+KghIaci0Qg9R043kUMWI9mtQfgny+NQ5QATnZ+paaA==",
-      "dev": true,
+    "node_modules/@floating-ui/core": {
+      "version": "1.6.7",
+      "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+        "@floating-ui/utils": "^0.2.7"
       }
     },
-    "node_modules/@babel/plugin-transform-modules-amd/node_modules/@babel/helper-module-imports": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.14.5.tgz",
-      "integrity": "sha512-SwrNHu5QWS84XlHwGYPDtCxcA0hrSlL2yhWYLgeOc0w7ccOl2qv4s/nARI0aYZW+bSwAL5CukeXA47B/1NKcnQ==",
-      "dev": true,
+    "node_modules/@floating-ui/dom": {
+      "version": "1.6.10",
+      "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.14.5"
+        "@floating-ui/core": "^1.6.0",
+        "@floating-ui/utils": "^0.2.7"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.7",
+      "license": "MIT"
+    },
+    "node_modules/@formatjs/cli": {
+      "version": "6.2.12",
+      "license": "MIT",
+      "bin": {
+        "formatjs": "bin/formatjs"
       },
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">= 16"
+      },
+      "peerDependencies": {
+        "@glimmer/env": "^0.1.7",
+        "@glimmer/reference": "^0.91.1 || ^0.92.0",
+        "@glimmer/syntax": "^0.92.0",
+        "@glimmer/validator": "^0.92.0",
+        "@vue/compiler-core": "^3.4.0",
+        "content-tag": "^2.0.1",
+        "ember-template-recast": "^6.1.4",
+        "vue": "^3.4.0"
+      },
+      "peerDependenciesMeta": {
+        "@glimmer/env": {
+          "optional": true
+        },
+        "@glimmer/reference": {
+          "optional": true
+        },
+        "@glimmer/syntax": {
+          "optional": true
+        },
+        "@glimmer/validator": {
+          "optional": true
+        },
+        "@vue/compiler-core": {
+          "optional": true
+        },
+        "content-tag": {
+          "optional": true
+        },
+        "ember-template-recast": {
+          "optional": true
+        },
+        "vue": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@babel/plugin-transform-modules-amd/node_modules/@babel/helper-module-transforms": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.14.5.tgz",
-      "integrity": "sha512-iXpX4KW8LVODuAieD7MzhNjmM6dzYY5tfRqT+R9HDXWl0jPn/djKmA+G9s/2C2T9zggw5tK1QNqZ70USfedOwA==",
-      "dev": true,
+    "node_modules/@formatjs/ecma402-abstract": {
+      "version": "1.11.4",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-module-imports": "^7.14.5",
-        "@babel/helper-replace-supers": "^7.14.5",
-        "@babel/helper-simple-access": "^7.14.5",
-        "@babel/helper-split-export-declaration": "^7.14.5",
-        "@babel/helper-validator-identifier": "^7.14.5",
-        "@babel/template": "^7.14.5",
-        "@babel/traverse": "^7.14.5",
-        "@babel/types": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+        "@formatjs/intl-localematcher": "0.2.25",
+        "tslib": "^2.1.0"
       }
     },
-    "node_modules/@babel/plugin-transform-modules-amd/node_modules/@babel/helper-optimise-call-expression": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.14.5.tgz",
-      "integrity": "sha512-IqiLIrODUOdnPU9/F8ib1Fx2ohlgDhxnIDU7OEVi+kAbEZcyiF7BLU8W6PfvPi9LzztjS7kcbzbmL7oG8kD6VA==",
-      "dev": true,
+    "node_modules/@formatjs/fast-memoize": {
+      "version": "2.2.0",
+      "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+        "tslib": "^2.4.0"
       }
     },
-    "node_modules/@babel/plugin-transform-modules-amd/node_modules/@babel/helper-plugin-utils": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-      "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=6.9.0"
+    "node_modules/@formatjs/icu-messageformat-parser": {
+      "version": "2.7.8",
+      "license": "MIT",
+      "dependencies": {
+        "@formatjs/ecma402-abstract": "2.0.0",
+        "@formatjs/icu-skeleton-parser": "1.8.2",
+        "tslib": "^2.4.0"
       }
     },
-    "node_modules/@babel/plugin-transform-modules-amd/node_modules/@babel/helper-replace-supers": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.14.5.tgz",
-      "integrity": "sha512-3i1Qe9/8x/hCHINujn+iuHy+mMRLoc77b2nI9TB0zjH1hvn9qGlXjWlggdwUcju36PkPCy/lpM7LLUdcTyH4Ow==",
-      "dev": true,
+    "node_modules/@formatjs/icu-messageformat-parser/node_modules/@formatjs/ecma402-abstract": {
+      "version": "2.0.0",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-member-expression-to-functions": "^7.14.5",
-        "@babel/helper-optimise-call-expression": "^7.14.5",
-        "@babel/traverse": "^7.14.5",
-        "@babel/types": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+        "@formatjs/intl-localematcher": "0.5.4",
+        "tslib": "^2.4.0"
       }
     },
-    "node_modules/@babel/plugin-transform-modules-amd/node_modules/@babel/helper-simple-access": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.14.5.tgz",
-      "integrity": "sha512-nfBN9xvmCt6nrMZjfhkl7i0oTV3yxR4/FztsbOASyTvVcoYd0TRHh7eMLdlEcCqobydC0LAF3LtC92Iwxo0wyw==",
-      "dev": true,
+    "node_modules/@formatjs/icu-messageformat-parser/node_modules/@formatjs/intl-localematcher": {
+      "version": "0.5.4",
+      "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+        "tslib": "^2.4.0"
       }
     },
-    "node_modules/@babel/plugin-transform-modules-amd/node_modules/@babel/helper-split-export-declaration": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.14.5.tgz",
-      "integrity": "sha512-hprxVPu6e5Kdp2puZUmvOGjaLv9TCe58E/Fl6hRq4YiVQxIcNvuq6uTM2r1mT/oPskuS9CgR+I94sqAYv0NGKA==",
-      "dev": true,
+    "node_modules/@formatjs/icu-skeleton-parser": {
+      "version": "1.8.2",
+      "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+        "@formatjs/ecma402-abstract": "2.0.0",
+        "tslib": "^2.4.0"
       }
     },
-    "node_modules/@babel/plugin-transform-modules-amd/node_modules/@babel/helper-validator-identifier": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz",
-      "integrity": "sha512-5lsetuxCLilmVGyiLEfoHBRX8UCFD+1m2x3Rj97WrW3V7H3u4RWRXA4evMjImCsin2J2YT0QaVDGf+z8ondbAg==",
-      "dev": true,
-      "engines": {
-        "node": ">=6.9.0"
+    "node_modules/@formatjs/icu-skeleton-parser/node_modules/@formatjs/ecma402-abstract": {
+      "version": "2.0.0",
+      "license": "MIT",
+      "dependencies": {
+        "@formatjs/intl-localematcher": "0.5.4",
+        "tslib": "^2.4.0"
       }
     },
-    "node_modules/@babel/plugin-transform-modules-amd/node_modules/@babel/highlight": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.14.5.tgz",
-      "integrity": "sha512-qf9u2WFWVV0MppaL877j2dBtQIDgmidgjGk5VIMw3OadXvYaXn66U1BFlH2t4+t3i+8PhedppRv+i40ABzd+gg==",
-      "dev": true,
+    "node_modules/@formatjs/icu-skeleton-parser/node_modules/@formatjs/intl-localematcher": {
+      "version": "0.5.4",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-validator-identifier": "^7.14.5",
-        "chalk": "^2.0.0",
-        "js-tokens": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+        "tslib": "^2.4.0"
       }
     },
-    "node_modules/@babel/plugin-transform-modules-amd/node_modules/@babel/parser": {
-      "version": "7.14.7",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.14.7.tgz",
-      "integrity": "sha512-X67Z5y+VBJuHB/RjwECp8kSl5uYi0BvRbNeWqkaJCVh+LiTPl19WBUfG627psSgp9rSf6ojuXghQM3ha6qHHdA==",
-      "dev": true,
-      "bin": {
-        "parser": "bin/babel-parser.js"
+    "node_modules/@formatjs/intl": {
+      "version": "2.10.4",
+      "license": "MIT",
+      "dependencies": {
+        "@formatjs/ecma402-abstract": "2.0.0",
+        "@formatjs/fast-memoize": "2.2.0",
+        "@formatjs/icu-messageformat-parser": "2.7.8",
+        "@formatjs/intl-displaynames": "6.6.8",
+        "@formatjs/intl-listformat": "7.5.7",
+        "intl-messageformat": "10.5.14",
+        "tslib": "^2.4.0"
       },
-      "engines": {
-        "node": ">=6.0.0"
+      "peerDependencies": {
+        "typescript": "^4.7 || 5"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@babel/plugin-transform-modules-amd/node_modules/@babel/template": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.14.5.tgz",
-      "integrity": "sha512-6Z3Po85sfxRGachLULUhOmvAaOo7xCvqGQtxINai2mEGPFm6pQ4z5QInFnUrRpfoSV60BnjyF5F3c+15fxFV1g==",
-      "dev": true,
+    "node_modules/@formatjs/intl-displaynames": {
+      "version": "6.6.8",
+      "license": "MIT",
       "dependencies": {
-        "@babel/code-frame": "^7.14.5",
-        "@babel/parser": "^7.14.5",
-        "@babel/types": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+        "@formatjs/ecma402-abstract": "2.0.0",
+        "@formatjs/intl-localematcher": "0.5.4",
+        "tslib": "^2.4.0"
       }
     },
-    "node_modules/@babel/plugin-transform-modules-amd/node_modules/@babel/traverse": {
-      "version": "7.14.7",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.14.7.tgz",
-      "integrity": "sha512-9vDr5NzHu27wgwejuKL7kIOm4bwEtaPQ4Z6cpCmjSuaRqpH/7xc4qcGEscwMqlkwgcXl6MvqoAjZkQ24uSdIZQ==",
-      "dev": true,
+    "node_modules/@formatjs/intl-displaynames/node_modules/@formatjs/ecma402-abstract": {
+      "version": "2.0.0",
+      "license": "MIT",
       "dependencies": {
-        "@babel/code-frame": "^7.14.5",
-        "@babel/generator": "^7.14.5",
-        "@babel/helper-function-name": "^7.14.5",
-        "@babel/helper-hoist-variables": "^7.14.5",
-        "@babel/helper-split-export-declaration": "^7.14.5",
-        "@babel/parser": "^7.14.7",
-        "@babel/types": "^7.14.5",
-        "debug": "^4.1.0",
-        "globals": "^11.1.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+        "@formatjs/intl-localematcher": "0.5.4",
+        "tslib": "^2.4.0"
       }
     },
-    "node_modules/@babel/plugin-transform-modules-amd/node_modules/@babel/types": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.5.tgz",
-      "integrity": "sha512-M/NzBpEL95I5Hh4dwhin5JlE7EzO5PHMAuzjxss3tiOBD46KfQvVedN/3jEPZvdRvtsK2222XfdHogNIttFgcg==",
-      "dev": true,
+    "node_modules/@formatjs/intl-displaynames/node_modules/@formatjs/intl-localematcher": {
+      "version": "0.5.4",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-validator-identifier": "^7.14.5",
-        "to-fast-properties": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+        "tslib": "^2.4.0"
       }
     },
-    "node_modules/@babel/plugin-transform-modules-amd/node_modules/source-map": {
-      "version": "0.5.7",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-      "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
+    "node_modules/@formatjs/intl-listformat": {
+      "version": "7.5.7",
+      "license": "MIT",
+      "dependencies": {
+        "@formatjs/ecma402-abstract": "2.0.0",
+        "@formatjs/intl-localematcher": "0.5.4",
+        "tslib": "^2.4.0"
       }
     },
-    "node_modules/@babel/plugin-transform-modules-commonjs": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.14.5.tgz",
-      "integrity": "sha512-en8GfBtgnydoao2PS+87mKyw62k02k7kJ9ltbKe0fXTHrQmG6QZZflYuGI1VVG7sVpx4E1n7KBpNlPb8m78J+A==",
-      "dev": true,
+    "node_modules/@formatjs/intl-listformat/node_modules/@formatjs/ecma402-abstract": {
+      "version": "2.0.0",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-module-transforms": "^7.14.5",
-        "@babel/helper-plugin-utils": "^7.14.5",
-        "@babel/helper-simple-access": "^7.14.5",
-        "babel-plugin-dynamic-import-node": "^2.3.3"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+        "@formatjs/intl-localematcher": "0.5.4",
+        "tslib": "^2.4.0"
       }
     },
-    "node_modules/@babel/plugin-transform-modules-commonjs/node_modules/@babel/code-frame": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.14.5.tgz",
-      "integrity": "sha512-9pzDqyc6OLDaqe+zbACgFkb6fKMNG6CObKpnYXChRsvYGyEdc7CA2BaqeOM+vOtCS5ndmJicPJhKAwYRI6UfFw==",
-      "dev": true,
+    "node_modules/@formatjs/intl-listformat/node_modules/@formatjs/intl-localematcher": {
+      "version": "0.5.4",
+      "license": "MIT",
       "dependencies": {
-        "@babel/highlight": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+        "tslib": "^2.4.0"
       }
     },
-    "node_modules/@babel/plugin-transform-modules-commonjs/node_modules/@babel/generator": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.14.5.tgz",
-      "integrity": "sha512-y3rlP+/G25OIX3mYKKIOlQRcqj7YgrvHxOLbVmyLJ9bPmi5ttvUmpydVjcFjZphOktWuA7ovbx91ECloWTfjIA==",
-      "dev": true,
+    "node_modules/@formatjs/intl-localematcher": {
+      "version": "0.2.25",
+      "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.14.5",
-        "jsesc": "^2.5.1",
-        "source-map": "^0.5.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+        "tslib": "^2.1.0"
       }
     },
-    "node_modules/@babel/plugin-transform-modules-commonjs/node_modules/@babel/helper-function-name": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.14.5.tgz",
-      "integrity": "sha512-Gjna0AsXWfFvrAuX+VKcN/aNNWonizBj39yGwUzVDVTlMYJMK2Wp6xdpy72mfArFq5uK+NOuexfzZlzI1z9+AQ==",
-      "dev": true,
+    "node_modules/@formatjs/intl-pluralrules": {
+      "version": "4.3.3",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-get-function-arity": "^7.14.5",
-        "@babel/template": "^7.14.5",
-        "@babel/types": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+        "@formatjs/ecma402-abstract": "1.11.4",
+        "@formatjs/intl-localematcher": "0.2.25",
+        "tslib": "^2.1.0"
       }
     },
-    "node_modules/@babel/plugin-transform-modules-commonjs/node_modules/@babel/helper-get-function-arity": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.14.5.tgz",
-      "integrity": "sha512-I1Db4Shst5lewOM4V+ZKJzQ0JGGaZ6VY1jYvMghRjqs6DWgxLCIyFt30GlnKkfUeFLpJt2vzbMVEXVSXlIFYUg==",
-      "dev": true,
+    "node_modules/@formatjs/intl-relativetimeformat": {
+      "version": "10.0.1",
+      "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+        "@formatjs/ecma402-abstract": "1.11.4",
+        "@formatjs/intl-localematcher": "0.2.25",
+        "tslib": "^2.1.0"
       }
     },
-    "node_modules/@babel/plugin-transform-modules-commonjs/node_modules/@babel/helper-member-expression-to-functions": {
-      "version": "7.14.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.14.7.tgz",
-      "integrity": "sha512-TMUt4xKxJn6ccjcOW7c4hlwyJArizskAhoSTOCkA0uZ+KghIaci0Qg9R043kUMWI9mtQfgny+NQ5QATnZ+paaA==",
-      "dev": true,
+    "node_modules/@formatjs/intl/node_modules/@formatjs/ecma402-abstract": {
+      "version": "2.0.0",
+      "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+        "@formatjs/intl-localematcher": "0.5.4",
+        "tslib": "^2.4.0"
       }
     },
-    "node_modules/@babel/plugin-transform-modules-commonjs/node_modules/@babel/helper-module-imports": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.14.5.tgz",
-      "integrity": "sha512-SwrNHu5QWS84XlHwGYPDtCxcA0hrSlL2yhWYLgeOc0w7ccOl2qv4s/nARI0aYZW+bSwAL5CukeXA47B/1NKcnQ==",
-      "dev": true,
+    "node_modules/@formatjs/intl/node_modules/@formatjs/intl-localematcher": {
+      "version": "0.5.4",
+      "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+        "tslib": "^2.4.0"
       }
     },
-    "node_modules/@babel/plugin-transform-modules-commonjs/node_modules/@babel/helper-module-transforms": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.14.5.tgz",
-      "integrity": "sha512-iXpX4KW8LVODuAieD7MzhNjmM6dzYY5tfRqT+R9HDXWl0jPn/djKmA+G9s/2C2T9zggw5tK1QNqZ70USfedOwA==",
-      "dev": true,
+    "node_modules/@formatjs/ts-transformer": {
+      "version": "3.13.14",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-module-imports": "^7.14.5",
-        "@babel/helper-replace-supers": "^7.14.5",
-        "@babel/helper-simple-access": "^7.14.5",
-        "@babel/helper-split-export-declaration": "^7.14.5",
-        "@babel/helper-validator-identifier": "^7.14.5",
-        "@babel/template": "^7.14.5",
-        "@babel/traverse": "^7.14.5",
-        "@babel/types": "^7.14.5"
+        "@formatjs/icu-messageformat-parser": "2.7.8",
+        "@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"
       },
-      "engines": {
-        "node": ">=6.9.0"
+      "peerDependencies": {
+        "ts-jest": ">=27"
+      },
+      "peerDependenciesMeta": {
+        "ts-jest": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@babel/plugin-transform-modules-commonjs/node_modules/@babel/helper-optimise-call-expression": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.14.5.tgz",
-      "integrity": "sha512-IqiLIrODUOdnPU9/F8ib1Fx2ohlgDhxnIDU7OEVi+kAbEZcyiF7BLU8W6PfvPi9LzztjS7kcbzbmL7oG8kD6VA==",
-      "dev": true,
-      "dependencies": {
-        "@babel/types": "^7.14.5"
+    "node_modules/@formatjs/ts-transformer/node_modules/@types/node": {
+      "version": "17.0.45",
+      "license": "MIT"
+    },
+    "node_modules/@formatjs/ts-transformer/node_modules/typescript": {
+      "version": "5.5.4",
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
       },
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=14.17"
       }
     },
-    "node_modules/@babel/plugin-transform-modules-commonjs/node_modules/@babel/helper-plugin-utils": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-      "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-      "dev": true,
+    "node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.6.0.tgz",
+      "integrity": "sha512-xyX0X9mc0kyz9plIyryrRbl7ngsA9jz77mCZJsUkLl+ZKs0KWObgaEBoSgQiYWAsSmjz/yjl0F++Got0Mdp4Rw==",
+      "license": "MIT",
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=6"
       }
     },
-    "node_modules/@babel/plugin-transform-modules-commonjs/node_modules/@babel/helper-replace-supers": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.14.5.tgz",
-      "integrity": "sha512-3i1Qe9/8x/hCHINujn+iuHy+mMRLoc77b2nI9TB0zjH1hvn9qGlXjWlggdwUcju36PkPCy/lpM7LLUdcTyH4Ow==",
-      "dev": true,
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.6.0.tgz",
+      "integrity": "sha512-KHwPkCk6oRT4HADE7smhfsKudt9N/9lm6EJ5BVg0tD1yPA5hht837fB87F8pn15D8JfTqQOjhKTktwmLMiD7Kg==",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-member-expression-to-functions": "^7.14.5",
-        "@babel/helper-optimise-call-expression": "^7.14.5",
-        "@babel/traverse": "^7.14.5",
-        "@babel/types": "^7.14.5"
+        "@fortawesome/fontawesome-common-types": "6.6.0"
       },
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=6"
       }
     },
-    "node_modules/@babel/plugin-transform-modules-commonjs/node_modules/@babel/helper-simple-access": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.14.5.tgz",
-      "integrity": "sha512-nfBN9xvmCt6nrMZjfhkl7i0oTV3yxR4/FztsbOASyTvVcoYd0TRHh7eMLdlEcCqobydC0LAF3LtC92Iwxo0wyw==",
-      "dev": true,
+    "node_modules/@fortawesome/free-brands-svg-icons": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.6.0.tgz",
+      "integrity": "sha512-1MPD8lMNW/earme4OQi1IFHtmHUwAKgghXlNwWi9GO7QkTfD+IIaYpIai4m2YJEzqfEji3jFHX1DZI5pbY/biQ==",
+      "license": "(CC-BY-4.0 AND MIT)",
       "dependencies": {
-        "@babel/types": "^7.14.5"
+        "@fortawesome/fontawesome-common-types": "6.6.0"
       },
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=6"
       }
     },
-    "node_modules/@babel/plugin-transform-modules-commonjs/node_modules/@babel/helper-split-export-declaration": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.14.5.tgz",
-      "integrity": "sha512-hprxVPu6e5Kdp2puZUmvOGjaLv9TCe58E/Fl6hRq4YiVQxIcNvuq6uTM2r1mT/oPskuS9CgR+I94sqAYv0NGKA==",
-      "dev": true,
+    "node_modules/@fortawesome/free-regular-svg-icons": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.6.0.tgz",
+      "integrity": "sha512-Yv9hDzL4aI73BEwSEh20clrY8q/uLxawaQ98lekBx6t9dQKDHcDzzV1p2YtBGTtolYtNqcWdniOnhzB+JPnQEQ==",
+      "license": "(CC-BY-4.0 AND MIT)",
       "dependencies": {
-        "@babel/types": "^7.14.5"
+        "@fortawesome/fontawesome-common-types": "6.6.0"
       },
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=6"
       }
     },
-    "node_modules/@babel/plugin-transform-modules-commonjs/node_modules/@babel/helper-validator-identifier": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz",
-      "integrity": "sha512-5lsetuxCLilmVGyiLEfoHBRX8UCFD+1m2x3Rj97WrW3V7H3u4RWRXA4evMjImCsin2J2YT0QaVDGf+z8ondbAg==",
-      "dev": true,
+    "node_modules/@fortawesome/free-solid-svg-icons": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.6.0.tgz",
+      "integrity": "sha512-IYv/2skhEDFc2WGUcqvFJkeK39Q+HyPf5GHUrT/l2pKbtgEIv1al1TKd6qStR5OIwQdN1GZP54ci3y4mroJWjA==",
+      "license": "(CC-BY-4.0 AND MIT)",
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.6.0"
+      },
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=6"
       }
     },
-    "node_modules/@babel/plugin-transform-modules-commonjs/node_modules/@babel/highlight": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.14.5.tgz",
-      "integrity": "sha512-qf9u2WFWVV0MppaL877j2dBtQIDgmidgjGk5VIMw3OadXvYaXn66U1BFlH2t4+t3i+8PhedppRv+i40ABzd+gg==",
-      "dev": true,
+    "node_modules/@fortawesome/react-fontawesome": {
+      "version": "0.2.2",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-validator-identifier": "^7.14.5",
-        "chalk": "^2.0.0",
-        "js-tokens": "^4.0.0"
+        "prop-types": "^15.8.1"
       },
-      "engines": {
-        "node": ">=6.9.0"
+      "peerDependencies": {
+        "@fortawesome/fontawesome-svg-core": "~1 || ~6",
+        "react": ">=16.3"
       }
     },
-    "node_modules/@babel/plugin-transform-modules-commonjs/node_modules/@babel/parser": {
-      "version": "7.14.7",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.14.7.tgz",
-      "integrity": "sha512-X67Z5y+VBJuHB/RjwECp8kSl5uYi0BvRbNeWqkaJCVh+LiTPl19WBUfG627psSgp9rSf6ojuXghQM3ha6qHHdA==",
-      "dev": true,
-      "bin": {
-        "parser": "bin/babel-parser.js"
+    "node_modules/@fullhuman/postcss-purgecss": {
+      "version": "5.0.0",
+      "license": "MIT",
+      "dependencies": {
+        "purgecss": "^5.0.0"
       },
-      "engines": {
-        "node": ">=6.0.0"
+      "peerDependencies": {
+        "postcss": "^8.0.0"
       }
     },
-    "node_modules/@babel/plugin-transform-modules-commonjs/node_modules/@babel/template": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.14.5.tgz",
-      "integrity": "sha512-6Z3Po85sfxRGachLULUhOmvAaOo7xCvqGQtxINai2mEGPFm6pQ4z5QInFnUrRpfoSV60BnjyF5F3c+15fxFV1g==",
-      "dev": true,
+    "node_modules/@humanwhocodes/config-array": {
+      "version": "0.11.14",
+      "license": "Apache-2.0",
       "dependencies": {
-        "@babel/code-frame": "^7.14.5",
-        "@babel/parser": "^7.14.5",
-        "@babel/types": "^7.14.5"
+        "@humanwhocodes/object-schema": "^2.0.2",
+        "debug": "^4.3.1",
+        "minimatch": "^3.0.5"
       },
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=10.10.0"
       }
     },
-    "node_modules/@babel/plugin-transform-modules-commonjs/node_modules/@babel/traverse": {
-      "version": "7.14.7",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.14.7.tgz",
-      "integrity": "sha512-9vDr5NzHu27wgwejuKL7kIOm4bwEtaPQ4Z6cpCmjSuaRqpH/7xc4qcGEscwMqlkwgcXl6MvqoAjZkQ24uSdIZQ==",
-      "dev": true,
-      "dependencies": {
-        "@babel/code-frame": "^7.14.5",
-        "@babel/generator": "^7.14.5",
-        "@babel/helper-function-name": "^7.14.5",
-        "@babel/helper-hoist-variables": "^7.14.5",
-        "@babel/helper-split-export-declaration": "^7.14.5",
-        "@babel/parser": "^7.14.7",
-        "@babel/types": "^7.14.5",
-        "debug": "^4.1.0",
-        "globals": "^11.1.0"
-      },
+    "node_modules/@humanwhocodes/module-importer": {
+      "version": "1.0.1",
+      "license": "Apache-2.0",
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=12.22"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
       }
     },
-    "node_modules/@babel/plugin-transform-modules-commonjs/node_modules/@babel/types": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.5.tgz",
-      "integrity": "sha512-M/NzBpEL95I5Hh4dwhin5JlE7EzO5PHMAuzjxss3tiOBD46KfQvVedN/3jEPZvdRvtsK2222XfdHogNIttFgcg==",
-      "dev": true,
+    "node_modules/@humanwhocodes/object-schema": {
+      "version": "2.0.3",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@istanbuljs/load-nyc-config": {
+      "version": "1.1.0",
+      "license": "ISC",
       "dependencies": {
-        "@babel/helper-validator-identifier": "^7.14.5",
-        "to-fast-properties": "^2.0.0"
+        "camelcase": "^5.3.1",
+        "find-up": "^4.1.0",
+        "get-package-type": "^0.1.0",
+        "js-yaml": "^3.13.1",
+        "resolve-from": "^5.0.0"
       },
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=8"
       }
     },
-    "node_modules/@babel/plugin-transform-modules-commonjs/node_modules/source-map": {
-      "version": "0.5.7",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-      "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
-      "dev": true,
+    "node_modules/@istanbuljs/load-nyc-config/node_modules/camelcase": {
+      "version": "5.3.1",
+      "license": "MIT",
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=6"
       }
     },
-    "node_modules/@babel/plugin-transform-modules-systemjs": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.14.5.tgz",
-      "integrity": "sha512-mNMQdvBEE5DcMQaL5LbzXFMANrQjd2W7FPzg34Y4yEz7dBgdaC+9B84dSO+/1Wba98zoDbInctCDo4JGxz1VYA==",
-      "dev": true,
-      "dependencies": {
-        "@babel/helper-hoist-variables": "^7.14.5",
-        "@babel/helper-module-transforms": "^7.14.5",
-        "@babel/helper-plugin-utils": "^7.14.5",
-        "@babel/helper-validator-identifier": "^7.14.5",
-        "babel-plugin-dynamic-import-node": "^2.3.3"
-      },
+    "node_modules/@istanbuljs/schema": {
+      "version": "0.1.3",
+      "license": "MIT",
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=8"
       }
     },
-    "node_modules/@babel/plugin-transform-modules-systemjs/node_modules/@babel/code-frame": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.14.5.tgz",
-      "integrity": "sha512-9pzDqyc6OLDaqe+zbACgFkb6fKMNG6CObKpnYXChRsvYGyEdc7CA2BaqeOM+vOtCS5ndmJicPJhKAwYRI6UfFw==",
-      "dev": true,
+    "node_modules/@jest/console": {
+      "version": "29.7.0",
+      "license": "MIT",
       "dependencies": {
-        "@babel/highlight": "^7.14.5"
+        "@jest/types": "^29.6.3",
+        "@types/node": "*",
+        "chalk": "^4.0.0",
+        "jest-message-util": "^29.7.0",
+        "jest-util": "^29.7.0",
+        "slash": "^3.0.0"
       },
       "engines": {
-        "node": ">=6.9.0"
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
-    "node_modules/@babel/plugin-transform-modules-systemjs/node_modules/@babel/generator": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.14.5.tgz",
-      "integrity": "sha512-y3rlP+/G25OIX3mYKKIOlQRcqj7YgrvHxOLbVmyLJ9bPmi5ttvUmpydVjcFjZphOktWuA7ovbx91ECloWTfjIA==",
-      "dev": true,
-      "dependencies": {
-        "@babel/types": "^7.14.5",
-        "jsesc": "^2.5.1",
-        "source-map": "^0.5.0"
-      },
+    "node_modules/@jest/console/node_modules/slash": {
+      "version": "3.0.0",
+      "license": "MIT",
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=8"
       }
     },
-    "node_modules/@babel/plugin-transform-modules-systemjs/node_modules/@babel/helper-function-name": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.14.5.tgz",
-      "integrity": "sha512-Gjna0AsXWfFvrAuX+VKcN/aNNWonizBj39yGwUzVDVTlMYJMK2Wp6xdpy72mfArFq5uK+NOuexfzZlzI1z9+AQ==",
-      "dev": true,
-      "dependencies": {
-        "@babel/helper-get-function-arity": "^7.14.5",
-        "@babel/template": "^7.14.5",
-        "@babel/types": "^7.14.5"
+    "node_modules/@jest/core": {
+      "version": "29.7.0",
+      "license": "MIT",
+      "dependencies": {
+        "@jest/console": "^29.7.0",
+        "@jest/reporters": "^29.7.0",
+        "@jest/test-result": "^29.7.0",
+        "@jest/transform": "^29.7.0",
+        "@jest/types": "^29.6.3",
+        "@types/node": "*",
+        "ansi-escapes": "^4.2.1",
+        "chalk": "^4.0.0",
+        "ci-info": "^3.2.0",
+        "exit": "^0.1.2",
+        "graceful-fs": "^4.2.9",
+        "jest-changed-files": "^29.7.0",
+        "jest-config": "^29.7.0",
+        "jest-haste-map": "^29.7.0",
+        "jest-message-util": "^29.7.0",
+        "jest-regex-util": "^29.6.3",
+        "jest-resolve": "^29.7.0",
+        "jest-resolve-dependencies": "^29.7.0",
+        "jest-runner": "^29.7.0",
+        "jest-runtime": "^29.7.0",
+        "jest-snapshot": "^29.7.0",
+        "jest-util": "^29.7.0",
+        "jest-validate": "^29.7.0",
+        "jest-watcher": "^29.7.0",
+        "micromatch": "^4.0.4",
+        "pretty-format": "^29.7.0",
+        "slash": "^3.0.0",
+        "strip-ansi": "^6.0.0"
       },
       "engines": {
-        "node": ">=6.9.0"
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      },
+      "peerDependencies": {
+        "node-notifier": "^8.0.1 || ^9.0.0 || ^10.0.0"
+      },
+      "peerDependenciesMeta": {
+        "node-notifier": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@babel/plugin-transform-modules-systemjs/node_modules/@babel/helper-get-function-arity": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.14.5.tgz",
-      "integrity": "sha512-I1Db4Shst5lewOM4V+ZKJzQ0JGGaZ6VY1jYvMghRjqs6DWgxLCIyFt30GlnKkfUeFLpJt2vzbMVEXVSXlIFYUg==",
-      "dev": true,
-      "dependencies": {
-        "@babel/types": "^7.14.5"
-      },
+    "node_modules/@jest/core/node_modules/ansi-styles": {
+      "version": "5.2.0",
+      "license": "MIT",
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/@babel/plugin-transform-modules-systemjs/node_modules/@babel/helper-member-expression-to-functions": {
-      "version": "7.14.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.14.7.tgz",
-      "integrity": "sha512-TMUt4xKxJn6ccjcOW7c4hlwyJArizskAhoSTOCkA0uZ+KghIaci0Qg9R043kUMWI9mtQfgny+NQ5QATnZ+paaA==",
-      "dev": true,
+    "node_modules/@jest/core/node_modules/pretty-format": {
+      "version": "29.7.0",
+      "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.14.5"
+        "@jest/schemas": "^29.6.3",
+        "ansi-styles": "^5.0.0",
+        "react-is": "^18.0.0"
       },
       "engines": {
-        "node": ">=6.9.0"
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
-    "node_modules/@babel/plugin-transform-modules-systemjs/node_modules/@babel/helper-module-imports": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.14.5.tgz",
-      "integrity": "sha512-SwrNHu5QWS84XlHwGYPDtCxcA0hrSlL2yhWYLgeOc0w7ccOl2qv4s/nARI0aYZW+bSwAL5CukeXA47B/1NKcnQ==",
-      "dev": true,
+    "node_modules/@jest/core/node_modules/react-is": {
+      "version": "18.3.1",
+      "license": "MIT"
+    },
+    "node_modules/@jest/core/node_modules/slash": {
+      "version": "3.0.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@jest/environment": {
+      "version": "29.7.0",
+      "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.14.5"
+        "@jest/fake-timers": "^29.7.0",
+        "@jest/types": "^29.6.3",
+        "@types/node": "*",
+        "jest-mock": "^29.7.0"
       },
       "engines": {
-        "node": ">=6.9.0"
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
-    "node_modules/@babel/plugin-transform-modules-systemjs/node_modules/@babel/helper-module-transforms": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.14.5.tgz",
-      "integrity": "sha512-iXpX4KW8LVODuAieD7MzhNjmM6dzYY5tfRqT+R9HDXWl0jPn/djKmA+G9s/2C2T9zggw5tK1QNqZ70USfedOwA==",
-      "dev": true,
+    "node_modules/@jest/expect": {
+      "version": "29.7.0",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-module-imports": "^7.14.5",
-        "@babel/helper-replace-supers": "^7.14.5",
-        "@babel/helper-simple-access": "^7.14.5",
-        "@babel/helper-split-export-declaration": "^7.14.5",
-        "@babel/helper-validator-identifier": "^7.14.5",
-        "@babel/template": "^7.14.5",
-        "@babel/traverse": "^7.14.5",
-        "@babel/types": "^7.14.5"
+        "expect": "^29.7.0",
+        "jest-snapshot": "^29.7.0"
       },
       "engines": {
-        "node": ">=6.9.0"
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
-    "node_modules/@babel/plugin-transform-modules-systemjs/node_modules/@babel/helper-optimise-call-expression": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.14.5.tgz",
-      "integrity": "sha512-IqiLIrODUOdnPU9/F8ib1Fx2ohlgDhxnIDU7OEVi+kAbEZcyiF7BLU8W6PfvPi9LzztjS7kcbzbmL7oG8kD6VA==",
-      "dev": true,
+    "node_modules/@jest/expect-utils": {
+      "version": "29.7.0",
+      "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.14.5"
+        "jest-get-type": "^29.6.3"
       },
       "engines": {
-        "node": ">=6.9.0"
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
-    "node_modules/@babel/plugin-transform-modules-systemjs/node_modules/@babel/helper-plugin-utils": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-      "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-      "dev": true,
+    "node_modules/@jest/fake-timers": {
+      "version": "29.7.0",
+      "license": "MIT",
+      "dependencies": {
+        "@jest/types": "^29.6.3",
+        "@sinonjs/fake-timers": "^10.0.2",
+        "@types/node": "*",
+        "jest-message-util": "^29.7.0",
+        "jest-mock": "^29.7.0",
+        "jest-util": "^29.7.0"
+      },
       "engines": {
-        "node": ">=6.9.0"
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
-    "node_modules/@babel/plugin-transform-modules-systemjs/node_modules/@babel/helper-replace-supers": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.14.5.tgz",
-      "integrity": "sha512-3i1Qe9/8x/hCHINujn+iuHy+mMRLoc77b2nI9TB0zjH1hvn9qGlXjWlggdwUcju36PkPCy/lpM7LLUdcTyH4Ow==",
-      "dev": true,
+    "node_modules/@jest/globals": {
+      "version": "29.7.0",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-member-expression-to-functions": "^7.14.5",
-        "@babel/helper-optimise-call-expression": "^7.14.5",
-        "@babel/traverse": "^7.14.5",
-        "@babel/types": "^7.14.5"
+        "@jest/environment": "^29.7.0",
+        "@jest/expect": "^29.7.0",
+        "@jest/types": "^29.6.3",
+        "jest-mock": "^29.7.0"
       },
       "engines": {
-        "node": ">=6.9.0"
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
-    "node_modules/@babel/plugin-transform-modules-systemjs/node_modules/@babel/helper-simple-access": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.14.5.tgz",
-      "integrity": "sha512-nfBN9xvmCt6nrMZjfhkl7i0oTV3yxR4/FztsbOASyTvVcoYd0TRHh7eMLdlEcCqobydC0LAF3LtC92Iwxo0wyw==",
-      "dev": true,
+    "node_modules/@jest/reporters": {
+      "version": "29.7.0",
+      "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.14.5"
+        "@bcoe/v8-coverage": "^0.2.3",
+        "@jest/console": "^29.7.0",
+        "@jest/test-result": "^29.7.0",
+        "@jest/transform": "^29.7.0",
+        "@jest/types": "^29.6.3",
+        "@jridgewell/trace-mapping": "^0.3.18",
+        "@types/node": "*",
+        "chalk": "^4.0.0",
+        "collect-v8-coverage": "^1.0.0",
+        "exit": "^0.1.2",
+        "glob": "^7.1.3",
+        "graceful-fs": "^4.2.9",
+        "istanbul-lib-coverage": "^3.0.0",
+        "istanbul-lib-instrument": "^6.0.0",
+        "istanbul-lib-report": "^3.0.0",
+        "istanbul-lib-source-maps": "^4.0.0",
+        "istanbul-reports": "^3.1.3",
+        "jest-message-util": "^29.7.0",
+        "jest-util": "^29.7.0",
+        "jest-worker": "^29.7.0",
+        "slash": "^3.0.0",
+        "string-length": "^4.0.1",
+        "strip-ansi": "^6.0.0",
+        "v8-to-istanbul": "^9.0.1"
       },
       "engines": {
-        "node": ">=6.9.0"
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      },
+      "peerDependencies": {
+        "node-notifier": "^8.0.1 || ^9.0.0 || ^10.0.0"
+      },
+      "peerDependenciesMeta": {
+        "node-notifier": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@babel/plugin-transform-modules-systemjs/node_modules/@babel/helper-split-export-declaration": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.14.5.tgz",
-      "integrity": "sha512-hprxVPu6e5Kdp2puZUmvOGjaLv9TCe58E/Fl6hRq4YiVQxIcNvuq6uTM2r1mT/oPskuS9CgR+I94sqAYv0NGKA==",
-      "dev": true,
+    "node_modules/@jest/reporters/node_modules/istanbul-lib-instrument": {
+      "version": "6.0.3",
+      "license": "BSD-3-Clause",
       "dependencies": {
-        "@babel/types": "^7.14.5"
+        "@babel/core": "^7.23.9",
+        "@babel/parser": "^7.23.9",
+        "@istanbuljs/schema": "^0.1.3",
+        "istanbul-lib-coverage": "^3.2.0",
+        "semver": "^7.5.4"
       },
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=10"
       }
     },
-    "node_modules/@babel/plugin-transform-modules-systemjs/node_modules/@babel/helper-validator-identifier": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz",
-      "integrity": "sha512-5lsetuxCLilmVGyiLEfoHBRX8UCFD+1m2x3Rj97WrW3V7H3u4RWRXA4evMjImCsin2J2YT0QaVDGf+z8ondbAg==",
-      "dev": true,
+    "node_modules/@jest/reporters/node_modules/semver": {
+      "version": "7.6.3",
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=10"
       }
     },
-    "node_modules/@babel/plugin-transform-modules-systemjs/node_modules/@babel/highlight": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.14.5.tgz",
-      "integrity": "sha512-qf9u2WFWVV0MppaL877j2dBtQIDgmidgjGk5VIMw3OadXvYaXn66U1BFlH2t4+t3i+8PhedppRv+i40ABzd+gg==",
-      "dev": true,
-      "dependencies": {
-        "@babel/helper-validator-identifier": "^7.14.5",
-        "chalk": "^2.0.0",
-        "js-tokens": "^4.0.0"
-      },
+    "node_modules/@jest/reporters/node_modules/slash": {
+      "version": "3.0.0",
+      "license": "MIT",
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=8"
       }
     },
-    "node_modules/@babel/plugin-transform-modules-systemjs/node_modules/@babel/parser": {
-      "version": "7.14.7",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.14.7.tgz",
-      "integrity": "sha512-X67Z5y+VBJuHB/RjwECp8kSl5uYi0BvRbNeWqkaJCVh+LiTPl19WBUfG627psSgp9rSf6ojuXghQM3ha6qHHdA==",
-      "dev": true,
-      "bin": {
-        "parser": "bin/babel-parser.js"
+    "node_modules/@jest/schemas": {
+      "version": "29.6.3",
+      "license": "MIT",
+      "dependencies": {
+        "@sinclair/typebox": "^0.27.8"
       },
       "engines": {
-        "node": ">=6.0.0"
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
-    "node_modules/@babel/plugin-transform-modules-systemjs/node_modules/@babel/template": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.14.5.tgz",
-      "integrity": "sha512-6Z3Po85sfxRGachLULUhOmvAaOo7xCvqGQtxINai2mEGPFm6pQ4z5QInFnUrRpfoSV60BnjyF5F3c+15fxFV1g==",
-      "dev": true,
+    "node_modules/@jest/source-map": {
+      "version": "29.6.3",
+      "license": "MIT",
       "dependencies": {
-        "@babel/code-frame": "^7.14.5",
-        "@babel/parser": "^7.14.5",
-        "@babel/types": "^7.14.5"
+        "@jridgewell/trace-mapping": "^0.3.18",
+        "callsites": "^3.0.0",
+        "graceful-fs": "^4.2.9"
       },
       "engines": {
-        "node": ">=6.9.0"
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
-    "node_modules/@babel/plugin-transform-modules-systemjs/node_modules/@babel/traverse": {
-      "version": "7.14.7",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.14.7.tgz",
-      "integrity": "sha512-9vDr5NzHu27wgwejuKL7kIOm4bwEtaPQ4Z6cpCmjSuaRqpH/7xc4qcGEscwMqlkwgcXl6MvqoAjZkQ24uSdIZQ==",
-      "dev": true,
+    "node_modules/@jest/test-result": {
+      "version": "29.7.0",
+      "license": "MIT",
       "dependencies": {
-        "@babel/code-frame": "^7.14.5",
-        "@babel/generator": "^7.14.5",
-        "@babel/helper-function-name": "^7.14.5",
-        "@babel/helper-hoist-variables": "^7.14.5",
-        "@babel/helper-split-export-declaration": "^7.14.5",
-        "@babel/parser": "^7.14.7",
-        "@babel/types": "^7.14.5",
-        "debug": "^4.1.0",
-        "globals": "^11.1.0"
+        "@jest/console": "^29.7.0",
+        "@jest/types": "^29.6.3",
+        "@types/istanbul-lib-coverage": "^2.0.0",
+        "collect-v8-coverage": "^1.0.0"
       },
       "engines": {
-        "node": ">=6.9.0"
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
-    "node_modules/@babel/plugin-transform-modules-systemjs/node_modules/@babel/types": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.5.tgz",
-      "integrity": "sha512-M/NzBpEL95I5Hh4dwhin5JlE7EzO5PHMAuzjxss3tiOBD46KfQvVedN/3jEPZvdRvtsK2222XfdHogNIttFgcg==",
-      "dev": true,
+    "node_modules/@jest/test-sequencer": {
+      "version": "29.7.0",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-validator-identifier": "^7.14.5",
-        "to-fast-properties": "^2.0.0"
+        "@jest/test-result": "^29.7.0",
+        "graceful-fs": "^4.2.9",
+        "jest-haste-map": "^29.7.0",
+        "slash": "^3.0.0"
       },
       "engines": {
-        "node": ">=6.9.0"
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
-    "node_modules/@babel/plugin-transform-modules-systemjs/node_modules/source-map": {
-      "version": "0.5.7",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-      "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
-      "dev": true,
+    "node_modules/@jest/test-sequencer/node_modules/slash": {
+      "version": "3.0.0",
+      "license": "MIT",
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=8"
       }
     },
-    "node_modules/@babel/plugin-transform-modules-umd": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.14.5.tgz",
-      "integrity": "sha512-RfPGoagSngC06LsGUYyM9QWSXZ8MysEjDJTAea1lqRjNECE3y0qIJF/qbvJxc4oA4s99HumIMdXOrd+TdKaAAA==",
-      "dev": true,
+    "node_modules/@jest/transform": {
+      "version": "29.7.0",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-module-transforms": "^7.14.5",
-        "@babel/helper-plugin-utils": "^7.14.5"
+        "@babel/core": "^7.11.6",
+        "@jest/types": "^29.6.3",
+        "@jridgewell/trace-mapping": "^0.3.18",
+        "babel-plugin-istanbul": "^6.1.1",
+        "chalk": "^4.0.0",
+        "convert-source-map": "^2.0.0",
+        "fast-json-stable-stringify": "^2.1.0",
+        "graceful-fs": "^4.2.9",
+        "jest-haste-map": "^29.7.0",
+        "jest-regex-util": "^29.6.3",
+        "jest-util": "^29.7.0",
+        "micromatch": "^4.0.4",
+        "pirates": "^4.0.4",
+        "slash": "^3.0.0",
+        "write-file-atomic": "^4.0.2"
       },
       "engines": {
-        "node": ">=6.9.0"
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
-    "node_modules/@babel/plugin-transform-modules-umd/node_modules/@babel/code-frame": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.14.5.tgz",
-      "integrity": "sha512-9pzDqyc6OLDaqe+zbACgFkb6fKMNG6CObKpnYXChRsvYGyEdc7CA2BaqeOM+vOtCS5ndmJicPJhKAwYRI6UfFw==",
-      "dev": true,
-      "dependencies": {
-        "@babel/highlight": "^7.14.5"
-      },
+    "node_modules/@jest/transform/node_modules/slash": {
+      "version": "3.0.0",
+      "license": "MIT",
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=8"
       }
     },
-    "node_modules/@babel/plugin-transform-modules-umd/node_modules/@babel/generator": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.14.5.tgz",
-      "integrity": "sha512-y3rlP+/G25OIX3mYKKIOlQRcqj7YgrvHxOLbVmyLJ9bPmi5ttvUmpydVjcFjZphOktWuA7ovbx91ECloWTfjIA==",
-      "dev": true,
+    "node_modules/@jest/types": {
+      "version": "29.6.3",
+      "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.14.5",
-        "jsesc": "^2.5.1",
-        "source-map": "^0.5.0"
+        "@jest/schemas": "^29.6.3",
+        "@types/istanbul-lib-coverage": "^2.0.0",
+        "@types/istanbul-reports": "^3.0.0",
+        "@types/node": "*",
+        "@types/yargs": "^17.0.8",
+        "chalk": "^4.0.0"
       },
       "engines": {
-        "node": ">=6.9.0"
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
-    "node_modules/@babel/plugin-transform-modules-umd/node_modules/@babel/helper-function-name": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.14.5.tgz",
-      "integrity": "sha512-Gjna0AsXWfFvrAuX+VKcN/aNNWonizBj39yGwUzVDVTlMYJMK2Wp6xdpy72mfArFq5uK+NOuexfzZlzI1z9+AQ==",
-      "dev": true,
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.5",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-get-function-arity": "^7.14.5",
-        "@babel/template": "^7.14.5",
-        "@babel/types": "^7.14.5"
+        "@jridgewell/set-array": "^1.2.1",
+        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/trace-mapping": "^0.3.24"
       },
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=6.0.0"
       }
     },
-    "node_modules/@babel/plugin-transform-modules-umd/node_modules/@babel/helper-get-function-arity": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.14.5.tgz",
-      "integrity": "sha512-I1Db4Shst5lewOM4V+ZKJzQ0JGGaZ6VY1jYvMghRjqs6DWgxLCIyFt30GlnKkfUeFLpJt2vzbMVEXVSXlIFYUg==",
-      "dev": true,
-      "dependencies": {
-        "@babel/types": "^7.14.5"
-      },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "license": "MIT",
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=6.0.0"
       }
     },
-    "node_modules/@babel/plugin-transform-modules-umd/node_modules/@babel/helper-member-expression-to-functions": {
-      "version": "7.14.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.14.7.tgz",
-      "integrity": "sha512-TMUt4xKxJn6ccjcOW7c4hlwyJArizskAhoSTOCkA0uZ+KghIaci0Qg9R043kUMWI9mtQfgny+NQ5QATnZ+paaA==",
-      "dev": true,
-      "dependencies": {
-        "@babel/types": "^7.14.5"
-      },
+    "node_modules/@jridgewell/set-array": {
+      "version": "1.2.1",
+      "license": "MIT",
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=6.0.0"
       }
     },
-    "node_modules/@babel/plugin-transform-modules-umd/node_modules/@babel/helper-module-imports": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.14.5.tgz",
-      "integrity": "sha512-SwrNHu5QWS84XlHwGYPDtCxcA0hrSlL2yhWYLgeOc0w7ccOl2qv4s/nARI0aYZW+bSwAL5CukeXA47B/1NKcnQ==",
-      "dev": true,
+    "node_modules/@jridgewell/source-map": {
+      "version": "0.3.6",
+      "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.25"
       }
     },
-    "node_modules/@babel/plugin-transform-modules-umd/node_modules/@babel/helper-module-transforms": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.14.5.tgz",
-      "integrity": "sha512-iXpX4KW8LVODuAieD7MzhNjmM6dzYY5tfRqT+R9HDXWl0jPn/djKmA+G9s/2C2T9zggw5tK1QNqZ70USfedOwA==",
-      "dev": true,
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.0",
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.25",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-module-imports": "^7.14.5",
-        "@babel/helper-replace-supers": "^7.14.5",
-        "@babel/helper-simple-access": "^7.14.5",
-        "@babel/helper-split-export-declaration": "^7.14.5",
-        "@babel/helper-validator-identifier": "^7.14.5",
-        "@babel/template": "^7.14.5",
-        "@babel/traverse": "^7.14.5",
-        "@babel/types": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
-    "node_modules/@babel/plugin-transform-modules-umd/node_modules/@babel/helper-optimise-call-expression": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.14.5.tgz",
-      "integrity": "sha512-IqiLIrODUOdnPU9/F8ib1Fx2ohlgDhxnIDU7OEVi+kAbEZcyiF7BLU8W6PfvPi9LzztjS7kcbzbmL7oG8kD6VA==",
-      "dev": true,
+    "node_modules/@leichtgewicht/ip-codec": {
+      "version": "2.0.5",
+      "license": "MIT"
+    },
+    "node_modules/@lezer/common": {
+      "version": "1.2.1",
+      "license": "MIT"
+    },
+    "node_modules/@lezer/css": {
+      "version": "1.1.8",
+      "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
       }
     },
-    "node_modules/@babel/plugin-transform-modules-umd/node_modules/@babel/helper-plugin-utils": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-      "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=6.9.0"
+    "node_modules/@lezer/highlight": {
+      "version": "1.2.0",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.0.0"
       }
     },
-    "node_modules/@babel/plugin-transform-modules-umd/node_modules/@babel/helper-replace-supers": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.14.5.tgz",
-      "integrity": "sha512-3i1Qe9/8x/hCHINujn+iuHy+mMRLoc77b2nI9TB0zjH1hvn9qGlXjWlggdwUcju36PkPCy/lpM7LLUdcTyH4Ow==",
-      "dev": true,
+    "node_modules/@lezer/html": {
+      "version": "1.3.10",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-member-expression-to-functions": "^7.14.5",
-        "@babel/helper-optimise-call-expression": "^7.14.5",
-        "@babel/traverse": "^7.14.5",
-        "@babel/types": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
       }
     },
-    "node_modules/@babel/plugin-transform-modules-umd/node_modules/@babel/helper-simple-access": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.14.5.tgz",
-      "integrity": "sha512-nfBN9xvmCt6nrMZjfhkl7i0oTV3yxR4/FztsbOASyTvVcoYd0TRHh7eMLdlEcCqobydC0LAF3LtC92Iwxo0wyw==",
-      "dev": true,
+    "node_modules/@lezer/javascript": {
+      "version": "1.4.17",
+      "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.1.3",
+        "@lezer/lr": "^1.3.0"
       }
     },
-    "node_modules/@babel/plugin-transform-modules-umd/node_modules/@babel/helper-split-export-declaration": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.14.5.tgz",
-      "integrity": "sha512-hprxVPu6e5Kdp2puZUmvOGjaLv9TCe58E/Fl6hRq4YiVQxIcNvuq6uTM2r1mT/oPskuS9CgR+I94sqAYv0NGKA==",
-      "dev": true,
+    "node_modules/@lezer/lr": {
+      "version": "1.4.2",
+      "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+        "@lezer/common": "^1.0.0"
       }
     },
-    "node_modules/@babel/plugin-transform-modules-umd/node_modules/@babel/helper-validator-identifier": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz",
-      "integrity": "sha512-5lsetuxCLilmVGyiLEfoHBRX8UCFD+1m2x3Rj97WrW3V7H3u4RWRXA4evMjImCsin2J2YT0QaVDGf+z8ondbAg==",
-      "dev": true,
-      "engines": {
-        "node": ">=6.9.0"
+    "node_modules/@lezer/xml": {
+      "version": "1.0.5",
+      "license": "MIT",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
       }
     },
-    "node_modules/@babel/plugin-transform-modules-umd/node_modules/@babel/highlight": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.14.5.tgz",
-      "integrity": "sha512-qf9u2WFWVV0MppaL877j2dBtQIDgmidgjGk5VIMw3OadXvYaXn66U1BFlH2t4+t3i+8PhedppRv+i40ABzd+gg==",
-      "dev": true,
+    "node_modules/@newrelic/publish-sourcemap": {
+      "version": "5.1.0",
+      "license": "New Relic proprietary",
       "dependencies": {
-        "@babel/helper-validator-identifier": "^7.14.5",
-        "chalk": "^2.0.0",
-        "js-tokens": "^4.0.0"
+        "superagent": "^3.4.1",
+        "yargs": "^16.0.3"
       },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/plugin-transform-modules-umd/node_modules/@babel/parser": {
-      "version": "7.14.7",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.14.7.tgz",
-      "integrity": "sha512-X67Z5y+VBJuHB/RjwECp8kSl5uYi0BvRbNeWqkaJCVh+LiTPl19WBUfG627psSgp9rSf6ojuXghQM3ha6qHHdA==",
-      "dev": true,
       "bin": {
-        "parser": "bin/babel-parser.js"
-      },
-      "engines": {
-        "node": ">=6.0.0"
+        "delete-sourcemap": "scripts/delete-cli.js",
+        "list-sourcemaps": "scripts/list-cli.js",
+        "publish-sourcemap": "scripts/publish-cli.js"
       }
     },
-    "node_modules/@babel/plugin-transform-modules-umd/node_modules/@babel/template": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.14.5.tgz",
-      "integrity": "sha512-6Z3Po85sfxRGachLULUhOmvAaOo7xCvqGQtxINai2mEGPFm6pQ4z5QInFnUrRpfoSV60BnjyF5F3c+15fxFV1g==",
-      "dev": true,
+    "node_modules/@newrelic/publish-sourcemap/node_modules/cliui": {
+      "version": "7.0.4",
+      "license": "ISC",
       "dependencies": {
-        "@babel/code-frame": "^7.14.5",
-        "@babel/parser": "^7.14.5",
-        "@babel/types": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^7.0.0"
       }
     },
-    "node_modules/@babel/plugin-transform-modules-umd/node_modules/@babel/traverse": {
-      "version": "7.14.7",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.14.7.tgz",
-      "integrity": "sha512-9vDr5NzHu27wgwejuKL7kIOm4bwEtaPQ4Z6cpCmjSuaRqpH/7xc4qcGEscwMqlkwgcXl6MvqoAjZkQ24uSdIZQ==",
-      "dev": true,
+    "node_modules/@newrelic/publish-sourcemap/node_modules/wrap-ansi": {
+      "version": "7.0.0",
+      "license": "MIT",
       "dependencies": {
-        "@babel/code-frame": "^7.14.5",
-        "@babel/generator": "^7.14.5",
-        "@babel/helper-function-name": "^7.14.5",
-        "@babel/helper-hoist-variables": "^7.14.5",
-        "@babel/helper-split-export-declaration": "^7.14.5",
-        "@babel/parser": "^7.14.7",
-        "@babel/types": "^7.14.5",
-        "debug": "^4.1.0",
-        "globals": "^11.1.0"
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
       },
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
       }
     },
-    "node_modules/@babel/plugin-transform-modules-umd/node_modules/@babel/types": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.5.tgz",
-      "integrity": "sha512-M/NzBpEL95I5Hh4dwhin5JlE7EzO5PHMAuzjxss3tiOBD46KfQvVedN/3jEPZvdRvtsK2222XfdHogNIttFgcg==",
-      "dev": true,
+    "node_modules/@newrelic/publish-sourcemap/node_modules/yargs": {
+      "version": "16.2.0",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-validator-identifier": "^7.14.5",
-        "to-fast-properties": "^2.0.0"
+        "cliui": "^7.0.2",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.0",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^20.2.2"
       },
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=10"
       }
     },
-    "node_modules/@babel/plugin-transform-modules-umd/node_modules/source-map": {
-      "version": "0.5.7",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-      "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
+    "node_modules/@nicolo-ribaudo/chokidar-2": {
+      "version": "2.1.8-no-fsevents.3",
+      "license": "MIT",
+      "optional": true
     },
-    "node_modules/@babel/plugin-transform-named-capturing-groups-regex": {
-      "version": "7.14.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.14.7.tgz",
-      "integrity": "sha512-DTNOTaS7TkW97xsDMrp7nycUVh6sn/eq22VaxWfEdzuEbRsiaOU0pqU7DlyUGHVsbQbSghvjKRpEl+nUCKGQSg==",
-      "dev": true,
+    "node_modules/@nicolo-ribaudo/eslint-scope-5-internals": {
+      "version": "5.1.1-v1",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-create-regexp-features-plugin": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+        "eslint-scope": "5.1.1"
       }
     },
-    "node_modules/@babel/plugin-transform-new-target": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.14.5.tgz",
-      "integrity": "sha512-Nx054zovz6IIRWEB49RDRuXGI4Gy0GMgqG0cII9L3MxqgXz/+rgII+RU58qpo4g7tNEx1jG7rRVH4ihZoP4esQ==",
-      "dev": true,
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.14.5"
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
       },
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">= 8"
       }
     },
-    "node_modules/@babel/plugin-transform-new-target/node_modules/@babel/helper-plugin-utils": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-      "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-      "dev": true,
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "license": "MIT",
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">= 8"
       }
     },
-    "node_modules/@babel/plugin-transform-object-super": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.14.5.tgz",
-      "integrity": "sha512-MKfOBWzK0pZIrav9z/hkRqIk/2bTv9qvxHzPQc12RcVkMOzpIKnFCNYJip00ssKWYkd8Sf5g0Wr7pqJ+cmtuFg==",
-      "dev": true,
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.14.5",
-        "@babel/helper-replace-supers": "^7.14.5"
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
       },
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">= 8"
       }
     },
-    "node_modules/@babel/plugin-transform-object-super/node_modules/@babel/code-frame": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.14.5.tgz",
-      "integrity": "sha512-9pzDqyc6OLDaqe+zbACgFkb6fKMNG6CObKpnYXChRsvYGyEdc7CA2BaqeOM+vOtCS5ndmJicPJhKAwYRI6UfFw==",
-      "dev": true,
+    "node_modules/@openedx-plugins/course-app-calculator": {
+      "resolved": "plugins/course-apps/calculator",
+      "link": true
+    },
+    "node_modules/@openedx-plugins/course-app-edxnotes": {
+      "resolved": "plugins/course-apps/edxnotes",
+      "link": true
+    },
+    "node_modules/@openedx-plugins/course-app-learning_assistant": {
+      "resolved": "plugins/course-apps/learning_assistant",
+      "link": true
+    },
+    "node_modules/@openedx-plugins/course-app-live": {
+      "resolved": "plugins/course-apps/live",
+      "link": true
+    },
+    "node_modules/@openedx-plugins/course-app-ora_settings": {
+      "resolved": "plugins/course-apps/ora_settings",
+      "link": true
+    },
+    "node_modules/@openedx-plugins/course-app-proctoring": {
+      "resolved": "plugins/course-apps/proctoring",
+      "link": true
+    },
+    "node_modules/@openedx-plugins/course-app-progress": {
+      "resolved": "plugins/course-apps/progress",
+      "link": true
+    },
+    "node_modules/@openedx-plugins/course-app-teams": {
+      "resolved": "plugins/course-apps/teams",
+      "link": true
+    },
+    "node_modules/@openedx-plugins/course-app-wiki": {
+      "resolved": "plugins/course-apps/wiki",
+      "link": true
+    },
+    "node_modules/@openedx-plugins/course-app-xpert_unit_summary": {
+      "resolved": "plugins/course-apps/xpert_unit_summary",
+      "link": true
+    },
+    "node_modules/@openedx/frontend-build": {
+      "version": "14.2.0",
+      "resolved": "https://registry.npmjs.org/@openedx/frontend-build/-/frontend-build-14.2.0.tgz",
+      "integrity": "sha512-yeBanEnfpYY3gci9vBmPlFZLzTIhbUVjM8DxldPeaHzG7IZzMVR14KNkS470siCpikNxarordg3fGXSDU+QYHA==",
       "dependencies": {
-        "@babel/highlight": "^7.14.5"
+        "@babel/cli": "7.24.8",
+        "@babel/core": "7.24.9",
+        "@babel/eslint-parser": "7.22.9",
+        "@babel/plugin-proposal-class-properties": "7.18.6",
+        "@babel/plugin-proposal-object-rest-spread": "7.20.7",
+        "@babel/plugin-syntax-dynamic-import": "7.8.3",
+        "@babel/preset-env": "7.24.8",
+        "@babel/preset-react": "7.24.7",
+        "@edx/eslint-config": "^4.3.0",
+        "@edx/new-relic-source-map-webpack-plugin": "2.1.0",
+        "@edx/typescript-config": "1.1.0",
+        "@formatjs/cli": "^6.0.3",
+        "@fullhuman/postcss-purgecss": "5.0.0",
+        "@pmmmwh/react-refresh-webpack-plugin": "0.5.15",
+        "@svgr/webpack": "8.1.0",
+        "@types/jest": "29.5.12",
+        "@typescript-eslint/eslint-plugin": "^5.58.0",
+        "@typescript-eslint/parser": "^5.58.0",
+        "autoprefixer": "10.4.20",
+        "babel-jest": "29.6.1",
+        "babel-loader": "9.1.3",
+        "babel-plugin-formatjs": "^10.4.0",
+        "babel-plugin-transform-imports": "2.0.0",
+        "babel-polyfill": "6.26.0",
+        "chalk": "4.1.2",
+        "clean-webpack-plugin": "4.0.0",
+        "css-loader": "5.2.7",
+        "cssnano": "6.0.3",
+        "dotenv": "8.6.0",
+        "dotenv-webpack": "8.0.1",
+        "eslint": "8.44.0",
+        "eslint-config-airbnb": "19.0.4",
+        "eslint-config-airbnb-typescript": "^17.0.0",
+        "eslint-plugin-formatjs": "^4.12.2",
+        "eslint-plugin-import": "2.27.5",
+        "eslint-plugin-jsx-a11y": "6.7.1",
+        "eslint-plugin-react": "7.32.2",
+        "eslint-plugin-react-hooks": "4.6.0",
+        "express": "^4.18.2",
+        "file-loader": "6.2.0",
+        "html-webpack-plugin": "5.6.0",
+        "identity-obj-proxy": "3.0.0",
+        "image-minimizer-webpack-plugin": "3.8.3",
+        "jest": "29.6.1",
+        "jest-environment-jsdom": "29.6.1",
+        "mini-css-extract-plugin": "1.6.2",
+        "parse5": "7.1.2",
+        "postcss": "8.4.47",
+        "postcss-custom-media": "10.0.8",
+        "postcss-loader": "7.3.4",
+        "postcss-rtlcss": "5.1.2",
+        "react-dev-utils": "12.0.1",
+        "react-refresh": "0.14.2",
+        "resolve-url-loader": "5.0.0",
+        "sass": "1.69.7",
+        "sass-loader": "13.3.3",
+        "sharp": "0.32.6",
+        "source-map-loader": "4.0.2",
+        "style-loader": "3.3.4",
+        "ts-jest": "29.1.4",
+        "typescript": "4.9.5",
+        "url-loader": "4.1.1",
+        "webpack": "^5.89.0",
+        "webpack-bundle-analyzer": "^4.10.1",
+        "webpack-cli": "^5.1.4",
+        "webpack-dev-server": "^4.15.1",
+        "webpack-merge": "^5.10.0",
+        "webpack-remove-empty-scripts": "1.0.4"
+      },
+      "bin": {
+        "fedx-scripts": "bin/fedx-scripts.js"
       },
+      "peerDependencies": {
+        "react": "^16.9.0 || ^17.0.0"
+      }
+    },
+    "node_modules/@openedx/frontend-build/node_modules/@eslint/js": {
+      "version": "8.44.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.44.0.tgz",
+      "integrity": "sha512-Ag+9YM4ocKQx9AarydN0KY2j0ErMHNIocPDrVo8zAE44xLTjEtz81OdR68/cydGtk6m6jDb5Za3r2useMzYmSw==",
+      "license": "MIT",
       "engines": {
-        "node": ">=6.9.0"
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
-    "node_modules/@babel/plugin-transform-object-super/node_modules/@babel/generator": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.14.5.tgz",
-      "integrity": "sha512-y3rlP+/G25OIX3mYKKIOlQRcqj7YgrvHxOLbVmyLJ9bPmi5ttvUmpydVjcFjZphOktWuA7ovbx91ECloWTfjIA==",
-      "dev": true,
-      "dependencies": {
-        "@babel/types": "^7.14.5",
-        "jsesc": "^2.5.1",
-        "source-map": "^0.5.0"
+    "node_modules/@openedx/frontend-build/node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "license": "Python-2.0"
+    },
+    "node_modules/@openedx/frontend-build/node_modules/eslint": {
+      "version": "8.44.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.44.0.tgz",
+      "integrity": "sha512-0wpHoUbDUHgNCyvFB5aXLiQVfK9B0at6gUvzy83k4kAsQ/u769TQDX6iKC+aO4upIHO9WSaA3QoXYQDHbNwf1A==",
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.2.0",
+        "@eslint-community/regexpp": "^4.4.0",
+        "@eslint/eslintrc": "^2.1.0",
+        "@eslint/js": "8.44.0",
+        "@humanwhocodes/config-array": "^0.11.10",
+        "@humanwhocodes/module-importer": "^1.0.1",
+        "@nodelib/fs.walk": "^1.2.8",
+        "ajv": "^6.10.0",
+        "chalk": "^4.0.0",
+        "cross-spawn": "^7.0.2",
+        "debug": "^4.3.2",
+        "doctrine": "^3.0.0",
+        "escape-string-regexp": "^4.0.0",
+        "eslint-scope": "^7.2.0",
+        "eslint-visitor-keys": "^3.4.1",
+        "espree": "^9.6.0",
+        "esquery": "^1.4.2",
+        "esutils": "^2.0.2",
+        "fast-deep-equal": "^3.1.3",
+        "file-entry-cache": "^6.0.1",
+        "find-up": "^5.0.0",
+        "glob-parent": "^6.0.2",
+        "globals": "^13.19.0",
+        "graphemer": "^1.4.0",
+        "ignore": "^5.2.0",
+        "import-fresh": "^3.0.0",
+        "imurmurhash": "^0.1.4",
+        "is-glob": "^4.0.0",
+        "is-path-inside": "^3.0.3",
+        "js-yaml": "^4.1.0",
+        "json-stable-stringify-without-jsonify": "^1.0.1",
+        "levn": "^0.4.1",
+        "lodash.merge": "^4.6.2",
+        "minimatch": "^3.1.2",
+        "natural-compare": "^1.4.0",
+        "optionator": "^0.9.3",
+        "strip-ansi": "^6.0.1",
+        "strip-json-comments": "^3.1.0",
+        "text-table": "^0.2.0"
+      },
+      "bin": {
+        "eslint": "bin/eslint.js"
       },
       "engines": {
-        "node": ">=6.9.0"
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
       }
     },
-    "node_modules/@babel/plugin-transform-object-super/node_modules/@babel/helper-function-name": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.14.5.tgz",
-      "integrity": "sha512-Gjna0AsXWfFvrAuX+VKcN/aNNWonizBj39yGwUzVDVTlMYJMK2Wp6xdpy72mfArFq5uK+NOuexfzZlzI1z9+AQ==",
-      "dev": true,
+    "node_modules/@openedx/frontend-build/node_modules/eslint-plugin-import": {
+      "version": "2.27.5",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.27.5.tgz",
+      "integrity": "sha512-LmEt3GVofgiGuiE+ORpnvP+kAm3h6MLZJ4Q5HCyHADofsb4VzXFsRiWj3c0OFiV+3DWFh0qg3v9gcPlfc3zRow==",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-get-function-arity": "^7.14.5",
-        "@babel/template": "^7.14.5",
-        "@babel/types": "^7.14.5"
+        "array-includes": "^3.1.6",
+        "array.prototype.flat": "^1.3.1",
+        "array.prototype.flatmap": "^1.3.1",
+        "debug": "^3.2.7",
+        "doctrine": "^2.1.0",
+        "eslint-import-resolver-node": "^0.3.7",
+        "eslint-module-utils": "^2.7.4",
+        "has": "^1.0.3",
+        "is-core-module": "^2.11.0",
+        "is-glob": "^4.0.3",
+        "minimatch": "^3.1.2",
+        "object.values": "^1.1.6",
+        "resolve": "^1.22.1",
+        "semver": "^6.3.0",
+        "tsconfig-paths": "^3.14.1"
       },
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=4"
+      },
+      "peerDependencies": {
+        "eslint": "^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8"
       }
     },
-    "node_modules/@babel/plugin-transform-object-super/node_modules/@babel/helper-get-function-arity": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.14.5.tgz",
-      "integrity": "sha512-I1Db4Shst5lewOM4V+ZKJzQ0JGGaZ6VY1jYvMghRjqs6DWgxLCIyFt30GlnKkfUeFLpJt2vzbMVEXVSXlIFYUg==",
-      "dev": true,
+    "node_modules/@openedx/frontend-build/node_modules/eslint-plugin-import/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+        "ms": "^2.1.1"
       }
     },
-    "node_modules/@babel/plugin-transform-object-super/node_modules/@babel/helper-member-expression-to-functions": {
-      "version": "7.14.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.14.7.tgz",
-      "integrity": "sha512-TMUt4xKxJn6ccjcOW7c4hlwyJArizskAhoSTOCkA0uZ+KghIaci0Qg9R043kUMWI9mtQfgny+NQ5QATnZ+paaA==",
-      "dev": true,
+    "node_modules/@openedx/frontend-build/node_modules/eslint-plugin-import/node_modules/doctrine": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
+      "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
+      "license": "Apache-2.0",
       "dependencies": {
-        "@babel/types": "^7.14.5"
+        "esutils": "^2.0.2"
       },
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=0.10.0"
       }
     },
-    "node_modules/@babel/plugin-transform-object-super/node_modules/@babel/helper-optimise-call-expression": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.14.5.tgz",
-      "integrity": "sha512-IqiLIrODUOdnPU9/F8ib1Fx2ohlgDhxnIDU7OEVi+kAbEZcyiF7BLU8W6PfvPi9LzztjS7kcbzbmL7oG8kD6VA==",
-      "dev": true,
+    "node_modules/@openedx/frontend-build/node_modules/eslint-scope": {
+      "version": "7.2.2",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz",
+      "integrity": "sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==",
+      "license": "BSD-2-Clause",
       "dependencies": {
-        "@babel/types": "^7.14.5"
+        "esrecurse": "^4.3.0",
+        "estraverse": "^5.2.0"
       },
       "engines": {
-        "node": ">=6.9.0"
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
       }
     },
-    "node_modules/@babel/plugin-transform-object-super/node_modules/@babel/helper-plugin-utils": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-      "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-      "dev": true,
+    "node_modules/@openedx/frontend-build/node_modules/eslint-visitor-keys": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+      "license": "Apache-2.0",
       "engines": {
-        "node": ">=6.9.0"
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
       }
     },
-    "node_modules/@babel/plugin-transform-object-super/node_modules/@babel/helper-replace-supers": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.14.5.tgz",
-      "integrity": "sha512-3i1Qe9/8x/hCHINujn+iuHy+mMRLoc77b2nI9TB0zjH1hvn9qGlXjWlggdwUcju36PkPCy/lpM7LLUdcTyH4Ow==",
-      "dev": true,
+    "node_modules/@openedx/frontend-build/node_modules/find-up": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+      "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-member-expression-to-functions": "^7.14.5",
-        "@babel/helper-optimise-call-expression": "^7.14.5",
-        "@babel/traverse": "^7.14.5",
-        "@babel/types": "^7.14.5"
+        "locate-path": "^6.0.0",
+        "path-exists": "^4.0.0"
       },
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/@babel/plugin-transform-object-super/node_modules/@babel/helper-split-export-declaration": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.14.5.tgz",
-      "integrity": "sha512-hprxVPu6e5Kdp2puZUmvOGjaLv9TCe58E/Fl6hRq4YiVQxIcNvuq6uTM2r1mT/oPskuS9CgR+I94sqAYv0NGKA==",
-      "dev": true,
+    "node_modules/@openedx/frontend-build/node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "license": "ISC",
       "dependencies": {
-        "@babel/types": "^7.14.5"
+        "is-glob": "^4.0.3"
       },
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=10.13.0"
       }
     },
-    "node_modules/@babel/plugin-transform-object-super/node_modules/@babel/helper-validator-identifier": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz",
-      "integrity": "sha512-5lsetuxCLilmVGyiLEfoHBRX8UCFD+1m2x3Rj97WrW3V7H3u4RWRXA4evMjImCsin2J2YT0QaVDGf+z8ondbAg==",
-      "dev": true,
+    "node_modules/@openedx/frontend-build/node_modules/globals": {
+      "version": "13.24.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
+      "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
+      "license": "MIT",
+      "dependencies": {
+        "type-fest": "^0.20.2"
+      },
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/@babel/plugin-transform-object-super/node_modules/@babel/highlight": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.14.5.tgz",
-      "integrity": "sha512-qf9u2WFWVV0MppaL877j2dBtQIDgmidgjGk5VIMw3OadXvYaXn66U1BFlH2t4+t3i+8PhedppRv+i40ABzd+gg==",
-      "dev": true,
+    "node_modules/@openedx/frontend-build/node_modules/jest": {
+      "version": "29.6.1",
+      "resolved": "https://registry.npmjs.org/jest/-/jest-29.6.1.tgz",
+      "integrity": "sha512-Nirw5B4nn69rVUZtemCQhwxOBhm0nsp3hmtF4rzCeWD7BkjAXRIji7xWQfnTNbz9g0aVsBX6aZK3n+23LM6uDw==",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-validator-identifier": "^7.14.5",
-        "chalk": "^2.0.0",
-        "js-tokens": "^4.0.0"
+        "@jest/core": "^29.6.1",
+        "@jest/types": "^29.6.1",
+        "import-local": "^3.0.2",
+        "jest-cli": "^29.6.1"
       },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/plugin-transform-object-super/node_modules/@babel/parser": {
-      "version": "7.14.7",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.14.7.tgz",
-      "integrity": "sha512-X67Z5y+VBJuHB/RjwECp8kSl5uYi0BvRbNeWqkaJCVh+LiTPl19WBUfG627psSgp9rSf6ojuXghQM3ha6qHHdA==",
-      "dev": true,
       "bin": {
-        "parser": "bin/babel-parser.js"
+        "jest": "bin/jest.js"
       },
       "engines": {
-        "node": ">=6.0.0"
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      },
+      "peerDependencies": {
+        "node-notifier": "^8.0.1 || ^9.0.0 || ^10.0.0"
+      },
+      "peerDependenciesMeta": {
+        "node-notifier": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@babel/plugin-transform-object-super/node_modules/@babel/template": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.14.5.tgz",
-      "integrity": "sha512-6Z3Po85sfxRGachLULUhOmvAaOo7xCvqGQtxINai2mEGPFm6pQ4z5QInFnUrRpfoSV60BnjyF5F3c+15fxFV1g==",
-      "dev": true,
+    "node_modules/@openedx/frontend-build/node_modules/jest-environment-jsdom": {
+      "version": "29.6.1",
+      "resolved": "https://registry.npmjs.org/jest-environment-jsdom/-/jest-environment-jsdom-29.6.1.tgz",
+      "integrity": "sha512-PoY+yLaHzVRhVEjcVKSfJ7wXmJW4UqPYNhR05h7u/TK0ouf6DmRNZFBL/Z00zgQMyWGMBXn69/FmOvhEJu8cIw==",
+      "license": "MIT",
       "dependencies": {
-        "@babel/code-frame": "^7.14.5",
-        "@babel/parser": "^7.14.5",
-        "@babel/types": "^7.14.5"
+        "@jest/environment": "^29.6.1",
+        "@jest/fake-timers": "^29.6.1",
+        "@jest/types": "^29.6.1",
+        "@types/jsdom": "^20.0.0",
+        "@types/node": "*",
+        "jest-mock": "^29.6.1",
+        "jest-util": "^29.6.1",
+        "jsdom": "^20.0.0"
       },
       "engines": {
-        "node": ">=6.9.0"
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      },
+      "peerDependencies": {
+        "canvas": "^2.5.0"
+      },
+      "peerDependenciesMeta": {
+        "canvas": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@babel/plugin-transform-object-super/node_modules/@babel/traverse": {
-      "version": "7.14.7",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.14.7.tgz",
-      "integrity": "sha512-9vDr5NzHu27wgwejuKL7kIOm4bwEtaPQ4Z6cpCmjSuaRqpH/7xc4qcGEscwMqlkwgcXl6MvqoAjZkQ24uSdIZQ==",
-      "dev": true,
+    "node_modules/@openedx/frontend-build/node_modules/js-yaml": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "license": "MIT",
       "dependencies": {
-        "@babel/code-frame": "^7.14.5",
-        "@babel/generator": "^7.14.5",
-        "@babel/helper-function-name": "^7.14.5",
-        "@babel/helper-hoist-variables": "^7.14.5",
-        "@babel/helper-split-export-declaration": "^7.14.5",
-        "@babel/parser": "^7.14.7",
-        "@babel/types": "^7.14.5",
-        "debug": "^4.1.0",
-        "globals": "^11.1.0"
+        "argparse": "^2.0.1"
       },
-      "engines": {
-        "node": ">=6.9.0"
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
       }
     },
-    "node_modules/@babel/plugin-transform-object-super/node_modules/@babel/types": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.5.tgz",
-      "integrity": "sha512-M/NzBpEL95I5Hh4dwhin5JlE7EzO5PHMAuzjxss3tiOBD46KfQvVedN/3jEPZvdRvtsK2222XfdHogNIttFgcg==",
-      "dev": true,
+    "node_modules/@openedx/frontend-build/node_modules/locate-path": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-validator-identifier": "^7.14.5",
-        "to-fast-properties": "^2.0.0"
+        "p-locate": "^5.0.0"
       },
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/@babel/plugin-transform-object-super/node_modules/source-map": {
-      "version": "0.5.7",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-      "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
-      "dev": true,
+    "node_modules/@openedx/frontend-build/node_modules/p-locate": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+      "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+      "license": "MIT",
+      "dependencies": {
+        "p-limit": "^3.0.2"
+      },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/@babel/plugin-transform-parameters": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.14.5.tgz",
-      "integrity": "sha512-Tl7LWdr6HUxTmzQtzuU14SqbgrSKmaR77M0OKyq4njZLQTPfOvzblNKyNkGwOfEFCEx7KeYHQHDI0P3F02IVkA==",
-      "dev": true,
+    "node_modules/@openedx/frontend-build/node_modules/ts-jest": {
+      "version": "29.1.4",
+      "resolved": "https://registry.npmjs.org/ts-jest/-/ts-jest-29.1.4.tgz",
+      "integrity": "sha512-YiHwDhSvCiItoAgsKtoLFCuakDzDsJ1DLDnSouTaTmdOcOwIkSzbLXduaQ6M5DRVhuZC/NYaaZ/mtHbWMv/S6Q==",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.14.5"
+        "bs-logger": "0.x",
+        "fast-json-stable-stringify": "2.x",
+        "jest-util": "^29.0.0",
+        "json5": "^2.2.3",
+        "lodash.memoize": "4.x",
+        "make-error": "1.x",
+        "semver": "^7.5.3",
+        "yargs-parser": "^21.0.1"
+      },
+      "bin": {
+        "ts-jest": "cli.js"
       },
       "engines": {
-        "node": ">=6.9.0"
+        "node": "^14.15.0 || ^16.10.0 || ^18.0.0 || >=20.0.0"
+      },
+      "peerDependencies": {
+        "@babel/core": ">=7.0.0-beta.0 <8",
+        "@jest/transform": "^29.0.0",
+        "@jest/types": "^29.0.0",
+        "babel-jest": "^29.0.0",
+        "jest": "^29.0.0",
+        "typescript": ">=4.3 <6"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        },
+        "@jest/transform": {
+          "optional": true
+        },
+        "@jest/types": {
+          "optional": true
+        },
+        "babel-jest": {
+          "optional": true
+        },
+        "esbuild": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@babel/plugin-transform-parameters/node_modules/@babel/helper-plugin-utils": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-      "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-      "dev": true,
+    "node_modules/@openedx/frontend-build/node_modules/ts-jest/node_modules/semver": {
+      "version": "7.6.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
+      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=10"
       }
     },
-    "node_modules/@babel/plugin-transform-property-literals": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.14.5.tgz",
-      "integrity": "sha512-r1uilDthkgXW8Z1vJz2dKYLV1tuw2xsbrp3MrZmD99Wh9vsfKoob+JTgri5VUb/JqyKRXotlOtwgu4stIYCmnw==",
-      "dev": true,
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.14.5"
-      },
+    "node_modules/@openedx/frontend-build/node_modules/type-fest": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
+      "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
+      "license": "(MIT OR CC0-1.0)",
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/@babel/plugin-transform-property-literals/node_modules/@babel/helper-plugin-utils": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-      "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-      "dev": true,
+    "node_modules/@openedx/frontend-build/node_modules/yargs-parser": {
+      "version": "21.1.1",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
+      "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
+      "license": "ISC",
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=12"
       }
     },
-    "node_modules/@babel/plugin-transform-react-constant-elements": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.14.5.tgz",
-      "integrity": "sha512-NBqLEx1GxllIOXJInJAQbrnwwYJsV3WaMHIcOwD8rhYS0AabTWn7kHdHgPgu5RmHLU0q4DMxhAMu8ue/KampgQ==",
-      "dev": true,
+    "node_modules/@openedx/frontend-plugin-framework": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@openedx/frontend-plugin-framework/-/frontend-plugin-framework-1.3.0.tgz",
+      "integrity": "sha512-qLtX/4HIuWXiIhBdtBuL6mPVbV2un0rsFYx3I5+3tIUf7+T7WRq81a6JHU5QGyAmZy9dfiv7QwbqwiEQOVXVuQ==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.14.5"
+        "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
+        "classnames": "^2.3.2",
+        "core-js": "3.37.1",
+        "react-redux": "7.2.9",
+        "redux": "4.2.1",
+        "regenerator-runtime": "0.14.1"
       },
-      "engines": {
-        "node": ">=6.9.0"
+      "peerDependencies": {
+        "@edx/frontend-platform": "^7.0.0 || ^8.0.0",
+        "@openedx/paragon": "^21.0.0 || ^22.0.0",
+        "prop-types": "^15.8.0",
+        "react": "^17.0.0",
+        "react-dom": "^17.0.0",
+        "react-error-boundary": "^4.0.11"
       }
     },
-    "node_modules/@babel/plugin-transform-react-constant-elements/node_modules/@babel/helper-plugin-utils": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-      "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=6.9.0"
+    "node_modules/@openedx/frontend-plugin-framework/node_modules/core-js": {
+      "version": "3.37.1",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
       }
     },
-    "node_modules/@babel/plugin-transform-react-display-name": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.14.5.tgz",
-      "integrity": "sha512-07aqY1ChoPgIxsuDviptRpVkWCSbXWmzQqcgy65C6YSFOfPFvb/DX3bBRHh7pCd/PMEEYHYWUTSVkCbkVainYQ==",
-      "dev": true,
+    "node_modules/@openedx/frontend-plugin-framework/node_modules/redux": {
+      "version": "4.2.1",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+        "@babel/runtime": "^7.9.2"
       }
     },
-    "node_modules/@babel/plugin-transform-react-display-name/node_modules/@babel/helper-plugin-utils": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-      "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=6.9.0"
+    "node_modules/@openedx/paragon": {
+      "version": "22.8.1",
+      "resolved": "https://registry.npmjs.org/@openedx/paragon/-/paragon-22.8.1.tgz",
+      "integrity": "sha512-lm2x0tvNZrtJvp0L+cjvLLmkE9NoUbNIzt9L1FaOx9g92gf8rFVgq4aadq7IVAjN12HW19/QJMEJaQ0SVsvY2A==",
+      "license": "Apache-2.0",
+      "workspaces": [
+        "example",
+        "component-generator",
+        "www",
+        "icons",
+        "dependent-usage-analyzer"
+      ],
+      "dependencies": {
+        "@fortawesome/fontawesome-svg-core": "^6.1.1",
+        "@fortawesome/react-fontawesome": "^0.1.18",
+        "@popperjs/core": "^2.11.4",
+        "bootstrap": "^4.6.2",
+        "chalk": "^4.1.2",
+        "child_process": "^1.0.2",
+        "classnames": "^2.3.1",
+        "email-prop-type": "^3.0.0",
+        "file-selector": "^0.6.0",
+        "font-awesome": "^4.7.0",
+        "glob": "^8.0.3",
+        "inquirer": "^8.2.5",
+        "lodash.uniqby": "^4.7.0",
+        "mailto-link": "^2.0.0",
+        "prop-types": "^15.8.1",
+        "react-bootstrap": "^1.6.5",
+        "react-colorful": "^5.6.1",
+        "react-dropzone": "^14.2.1",
+        "react-focus-on": "^3.5.4",
+        "react-imask": "^7.1.3",
+        "react-loading-skeleton": "^3.1.0",
+        "react-popper": "^2.2.5",
+        "react-proptype-conditional-require": "^1.0.4",
+        "react-responsive": "^8.2.0",
+        "react-table": "^7.7.0",
+        "react-transition-group": "^4.4.2",
+        "tabbable": "^5.3.3",
+        "uncontrollable": "^7.2.1",
+        "uuid": "^9.0.0"
+      },
+      "bin": {
+        "paragon": "bin/paragon-scripts.js"
+      },
+      "peerDependencies": {
+        "react": "^16.8.6 || ^17.0.0",
+        "react-dom": "^16.8.6 || ^17.0.0",
+        "react-intl": "^5.25.1 || ^6.4.0"
       }
     },
-    "node_modules/@babel/plugin-transform-react-jsx": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.14.5.tgz",
-      "integrity": "sha512-7RylxNeDnxc1OleDm0F5Q/BSL+whYRbOAR+bwgCxIr0L32v7UFh/pz1DLMZideAUxKT6eMoS2zQH6fyODLEi8Q==",
-      "dev": true,
+    "node_modules/@openedx/paragon/node_modules/@fortawesome/react-fontawesome": {
+      "version": "0.1.19",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.19.tgz",
+      "integrity": "sha512-Hyb+lB8T18cvLNX0S3llz7PcSOAJMLwiVKBuuzwM/nI5uoBw+gQjnf9il0fR1C3DKOI5Kc79pkJ4/xB0Uw9aFQ==",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-annotate-as-pure": "^7.14.5",
-        "@babel/helper-module-imports": "^7.14.5",
-        "@babel/helper-plugin-utils": "^7.14.5",
-        "@babel/plugin-syntax-jsx": "^7.14.5",
-        "@babel/types": "^7.14.5"
+        "prop-types": "^15.8.1"
       },
-      "engines": {
-        "node": ">=6.9.0"
+      "peerDependencies": {
+        "@fortawesome/fontawesome-svg-core": "~1 || ~6",
+        "react": ">=16.x"
       }
     },
-    "node_modules/@babel/plugin-transform-react-jsx-development": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.14.5.tgz",
-      "integrity": "sha512-rdwG/9jC6QybWxVe2UVOa7q6cnTpw8JRRHOxntG/h6g/guAOe6AhtQHJuJh5FwmnXIT1bdm5vC2/5huV8ZOorQ==",
-      "dev": true,
+    "node_modules/@openedx/paragon/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "license": "MIT",
       "dependencies": {
-        "@babel/plugin-transform-react-jsx": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+        "balanced-match": "^1.0.0"
       }
     },
-    "node_modules/@babel/plugin-transform-react-jsx-self": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.14.5.tgz",
-      "integrity": "sha512-M/fmDX6n0cfHK/NLTcPmrfVAORKDhK8tyjDhyxlUjYyPYYO8FRWwuxBA3WBx8kWN/uBUuwGa3s/0+hQ9JIN3Tg==",
-      "dev": true,
+    "node_modules/@openedx/paragon/node_modules/glob": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-8.1.0.tgz",
+      "integrity": "sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==",
+      "deprecated": "Glob versions prior to v9 are no longer supported",
+      "license": "ISC",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.14.5"
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^5.0.1",
+        "once": "^1.3.0"
       },
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/@babel/plugin-transform-react-jsx-self/node_modules/@babel/helper-plugin-utils": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-      "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-      "dev": true,
+    "node_modules/@openedx/paragon/node_modules/minimatch": {
+      "version": "5.1.6",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
+      "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=10"
       }
     },
-    "node_modules/@babel/plugin-transform-react-jsx-source": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.14.5.tgz",
-      "integrity": "sha512-1TpSDnD9XR/rQ2tzunBVPThF5poaYT9GqP+of8fAtguYuI/dm2RkrMBDemsxtY0XBzvW7nXjYM0hRyKX9QYj7Q==",
-      "dev": true,
+    "node_modules/@openedx/paragon/node_modules/react-responsive": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/react-responsive/-/react-responsive-8.2.0.tgz",
+      "integrity": "sha512-iagCqVrw4QSjhxKp3I/YK6+ODkWY6G+YPElvdYKiUUbywwh9Ds0M7r26Fj2/7dWFFbOpcGnJE6uE7aMck8j5Qg==",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.14.5"
+        "hyphenate-style-name": "^1.0.0",
+        "matchmediaquery": "^0.3.0",
+        "prop-types": "^15.6.1",
+        "shallow-equal": "^1.1.0"
       },
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">= 0.10"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
       }
     },
-    "node_modules/@babel/plugin-transform-react-jsx-source/node_modules/@babel/helper-plugin-utils": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-      "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=6.9.0"
+    "node_modules/@openedx/paragon/node_modules/uuid": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
+      "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
+      "license": "MIT",
+      "bin": {
+        "uuid": "dist/bin/uuid"
       }
     },
-    "node_modules/@babel/plugin-transform-react-jsx/node_modules/@babel/helper-module-imports": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.14.5.tgz",
-      "integrity": "sha512-SwrNHu5QWS84XlHwGYPDtCxcA0hrSlL2yhWYLgeOc0w7ccOl2qv4s/nARI0aYZW+bSwAL5CukeXA47B/1NKcnQ==",
-      "dev": true,
+    "node_modules/@pmmmwh/react-refresh-webpack-plugin": {
+      "version": "0.5.15",
+      "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.14.5"
+        "ansi-html": "^0.0.9",
+        "core-js-pure": "^3.23.3",
+        "error-stack-parser": "^2.0.6",
+        "html-entities": "^2.1.0",
+        "loader-utils": "^2.0.4",
+        "schema-utils": "^4.2.0",
+        "source-map": "^0.7.3"
       },
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">= 10.13"
+      },
+      "peerDependencies": {
+        "@types/webpack": "4.x || 5.x",
+        "react-refresh": ">=0.10.0 <1.0.0",
+        "sockjs-client": "^1.4.0",
+        "type-fest": ">=0.17.0 <5.0.0",
+        "webpack": ">=4.43.0 <6.0.0",
+        "webpack-dev-server": "3.x || 4.x || 5.x",
+        "webpack-hot-middleware": "2.x",
+        "webpack-plugin-serve": "0.x || 1.x"
+      },
+      "peerDependenciesMeta": {
+        "@types/webpack": {
+          "optional": true
+        },
+        "sockjs-client": {
+          "optional": true
+        },
+        "type-fest": {
+          "optional": true
+        },
+        "webpack-dev-server": {
+          "optional": true
+        },
+        "webpack-hot-middleware": {
+          "optional": true
+        },
+        "webpack-plugin-serve": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@babel/plugin-transform-react-jsx/node_modules/@babel/helper-plugin-utils": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-      "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=6.9.0"
-      }
+    "node_modules/@polka/url": {
+      "version": "1.0.0-next.25",
+      "license": "MIT"
     },
-    "node_modules/@babel/plugin-transform-react-jsx/node_modules/@babel/helper-validator-identifier": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz",
-      "integrity": "sha512-5lsetuxCLilmVGyiLEfoHBRX8UCFD+1m2x3Rj97WrW3V7H3u4RWRXA4evMjImCsin2J2YT0QaVDGf+z8ondbAg==",
-      "dev": true,
-      "engines": {
-        "node": ">=6.9.0"
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
       }
     },
-    "node_modules/@babel/plugin-transform-react-jsx/node_modules/@babel/types": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.5.tgz",
-      "integrity": "sha512-M/NzBpEL95I5Hh4dwhin5JlE7EzO5PHMAuzjxss3tiOBD46KfQvVedN/3jEPZvdRvtsK2222XfdHogNIttFgcg==",
-      "dev": true,
+    "node_modules/@redux-devtools/extension": {
+      "version": "3.3.0",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-validator-identifier": "^7.14.5",
-        "to-fast-properties": "^2.0.0"
+        "@babel/runtime": "^7.23.2",
+        "immutable": "^4.3.4"
       },
-      "engines": {
-        "node": ">=6.9.0"
+      "peerDependencies": {
+        "redux": "^3.1.0 || ^4.0.0 || ^5.0.0"
       }
     },
-    "node_modules/@babel/plugin-transform-react-pure-annotations": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.14.5.tgz",
-      "integrity": "sha512-3X4HpBJimNxW4rhUy/SONPyNQHp5YRr0HhJdT2OH1BRp0of7u3Dkirc7x9FRJMKMqTBI079VZ1hzv7Ouuz///g==",
-      "dev": true,
+    "node_modules/@reduxjs/toolkit": {
+      "version": "1.9.7",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-annotate-as-pure": "^7.14.5",
-        "@babel/helper-plugin-utils": "^7.14.5"
+        "immer": "^9.0.21",
+        "redux": "^4.2.1",
+        "redux-thunk": "^2.4.2",
+        "reselect": "^4.1.8"
       },
-      "engines": {
-        "node": ">=6.9.0"
+      "peerDependencies": {
+        "react": "^16.9.0 || ^17.0.0 || ^18",
+        "react-redux": "^7.2.1 || ^8.0.2"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-redux": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@babel/plugin-transform-react-pure-annotations/node_modules/@babel/helper-plugin-utils": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-      "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-      "dev": true,
+    "node_modules/@reduxjs/toolkit/node_modules/redux": {
+      "version": "4.2.1",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.9.2"
+      }
+    },
+    "node_modules/@remix-run/router": {
+      "version": "1.20.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.20.0.tgz",
+      "integrity": "sha512-mUnk8rPJBI9loFDZ+YzPGdeniYK+FTmRD1TMCz7ev2SNIozyKKpnGgsxO34u6Z4z/t0ITuu7voi/AshfsGsgFg==",
+      "license": "MIT",
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=14.0.0"
       }
     },
-    "node_modules/@babel/plugin-transform-regenerator": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.14.5.tgz",
-      "integrity": "sha512-NVIY1W3ITDP5xQl50NgTKlZ0GrotKtLna08/uGY6ErQt6VEQZXla86x/CTddm5gZdcr+5GSsvMeTmWA5Ii6pkg==",
-      "dev": true,
+    "node_modules/@restart/context": {
+      "version": "2.1.4",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16.3.2"
+      }
+    },
+    "node_modules/@restart/hooks": {
+      "version": "0.4.16",
+      "license": "MIT",
       "dependencies": {
-        "regenerator-transform": "^0.14.2"
+        "dequal": "^2.0.3"
       },
-      "engines": {
-        "node": ">=6.9.0"
+      "peerDependencies": {
+        "react": ">=16.8.0"
       }
     },
-    "node_modules/@babel/plugin-transform-reserved-words": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.14.5.tgz",
-      "integrity": "sha512-cv4F2rv1nD4qdexOGsRQXJrOcyb5CrgjUH9PKrrtyhSDBNWGxd0UIitjyJiWagS+EbUGjG++22mGH1Pub8D6Vg==",
-      "dev": true,
+    "node_modules/@sinclair/typebox": {
+      "version": "0.27.8",
+      "license": "MIT"
+    },
+    "node_modules/@sinonjs/commons": {
+      "version": "3.0.1",
+      "license": "BSD-3-Clause",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+        "type-detect": "4.0.8"
       }
     },
-    "node_modules/@babel/plugin-transform-reserved-words/node_modules/@babel/helper-plugin-utils": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-      "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=6.9.0"
+    "node_modules/@sinonjs/fake-timers": {
+      "version": "10.3.0",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@sinonjs/commons": "^3.0.0"
       }
     },
-    "node_modules/@babel/plugin-transform-shorthand-properties": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.14.5.tgz",
-      "integrity": "sha512-xLucks6T1VmGsTB+GWK5Pl9Jl5+nRXD1uoFdA5TSO6xtiNjtXTjKkmPdFXVLGlK5A2/or/wQMKfmQ2Y0XJfn5g==",
-      "dev": true,
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.14.5"
-      },
+    "node_modules/@svgr/babel-plugin-add-jsx-attribute": {
+      "version": "8.0.0",
+      "license": "MIT",
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-transform-shorthand-properties/node_modules/@babel/helper-plugin-utils": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-      "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-      "dev": true,
+    "node_modules/@svgr/babel-plugin-remove-jsx-attribute": {
+      "version": "8.0.0",
+      "license": "MIT",
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-transform-spread": {
-      "version": "7.14.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.14.6.tgz",
-      "integrity": "sha512-Zr0x0YroFJku7n7+/HH3A2eIrGMjbmAIbJSVv0IZ+t3U2WUQUA64S/oeied2e+MaGSjmt4alzBCsK9E8gh+fag==",
-      "dev": true,
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.14.5",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.14.5"
+    "node_modules/@svgr/babel-plugin-remove-jsx-empty-expression": {
+      "version": "8.0.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
       },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-replace-jsx-attribute-value": {
+      "version": "8.0.0",
+      "license": "MIT",
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-transform-spread/node_modules/@babel/helper-plugin-utils": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-      "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-      "dev": true,
+    "node_modules/@svgr/babel-plugin-svg-dynamic-title": {
+      "version": "8.0.0",
+      "license": "MIT",
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-transform-sticky-regex": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.14.5.tgz",
-      "integrity": "sha512-Z7F7GyvEMzIIbwnziAZmnSNpdijdr4dWt+FJNBnBLz5mwDFkqIXU9wmBcWWad3QeJF5hMTkRe4dAq2sUZiG+8A==",
-      "dev": true,
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.14.5"
+    "node_modules/@svgr/babel-plugin-svg-em-dimensions": {
+      "version": "8.0.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
       },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-transform-react-native-svg": {
+      "version": "8.1.0",
+      "license": "MIT",
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-transform-sticky-regex/node_modules/@babel/helper-plugin-utils": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-      "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-      "dev": true,
+    "node_modules/@svgr/babel-plugin-transform-svg-component": {
+      "version": "8.0.0",
+      "license": "MIT",
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-transform-template-literals": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.14.5.tgz",
-      "integrity": "sha512-22btZeURqiepOfuy/VkFr+zStqlujWaarpMErvay7goJS6BWwdd6BY9zQyDLDa4x2S3VugxFb162IZ4m/S/+Gg==",
-      "dev": true,
+    "node_modules/@svgr/babel-preset": {
+      "version": "8.1.0",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.14.5"
+        "@svgr/babel-plugin-add-jsx-attribute": "8.0.0",
+        "@svgr/babel-plugin-remove-jsx-attribute": "8.0.0",
+        "@svgr/babel-plugin-remove-jsx-empty-expression": "8.0.0",
+        "@svgr/babel-plugin-replace-jsx-attribute-value": "8.0.0",
+        "@svgr/babel-plugin-svg-dynamic-title": "8.0.0",
+        "@svgr/babel-plugin-svg-em-dimensions": "8.0.0",
+        "@svgr/babel-plugin-transform-react-native-svg": "8.1.0",
+        "@svgr/babel-plugin-transform-svg-component": "8.0.0"
       },
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/plugin-transform-template-literals/node_modules/@babel/helper-plugin-utils": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-      "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-      "dev": true,
+    "node_modules/@svgr/core": {
+      "version": "8.1.0",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.21.3",
+        "@svgr/babel-preset": "8.1.0",
+        "camelcase": "^6.2.0",
+        "cosmiconfig": "^8.1.3",
+        "snake-case": "^3.0.4"
+      },
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
       }
     },
-    "node_modules/@babel/plugin-transform-typeof-symbol": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.14.5.tgz",
-      "integrity": "sha512-lXzLD30ffCWseTbMQzrvDWqljvZlHkXU+CnseMhkMNqU1sASnCsz3tSzAaH3vCUXb9PHeUb90ZT1BdFTm1xxJw==",
-      "dev": true,
+    "node_modules/@svgr/hast-util-to-babel-ast": {
+      "version": "8.0.0",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.14.5"
+        "@babel/types": "^7.21.3",
+        "entities": "^4.4.0"
       },
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
       }
     },
-    "node_modules/@babel/plugin-transform-typeof-symbol/node_modules/@babel/helper-plugin-utils": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-      "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-      "dev": true,
+    "node_modules/@svgr/plugin-jsx": {
+      "version": "8.1.0",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.21.3",
+        "@svgr/babel-preset": "8.1.0",
+        "@svgr/hast-util-to-babel-ast": "8.0.0",
+        "svg-parser": "^2.0.4"
+      },
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@svgr/core": "*"
       }
     },
-    "node_modules/@babel/plugin-transform-unicode-escapes": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.14.5.tgz",
-      "integrity": "sha512-crTo4jATEOjxj7bt9lbYXcBAM3LZaUrbP2uUdxb6WIorLmjNKSpHfIybgY4B8SRpbf8tEVIWH3Vtm7ayCrKocA==",
-      "dev": true,
+    "node_modules/@svgr/plugin-svgo": {
+      "version": "8.1.0",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.14.5"
+        "cosmiconfig": "^8.1.3",
+        "deepmerge": "^4.3.1",
+        "svgo": "^3.0.2"
       },
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@svgr/core": "*"
       }
     },
-    "node_modules/@babel/plugin-transform-unicode-escapes/node_modules/@babel/helper-plugin-utils": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-      "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-      "dev": true,
+    "node_modules/@svgr/webpack": {
+      "version": "8.1.0",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.21.3",
+        "@babel/plugin-transform-react-constant-elements": "^7.21.3",
+        "@babel/preset-env": "^7.20.2",
+        "@babel/preset-react": "^7.18.6",
+        "@babel/preset-typescript": "^7.21.0",
+        "@svgr/core": "8.1.0",
+        "@svgr/plugin-jsx": "8.1.0",
+        "@svgr/plugin-svgo": "8.1.0"
+      },
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
       }
     },
-    "node_modules/@babel/plugin-transform-unicode-regex": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.14.5.tgz",
-      "integrity": "sha512-UygduJpC5kHeCiRw/xDVzC+wj8VaYSoKl5JNVmbP7MadpNinAm3SvZCxZ42H37KZBKztz46YC73i9yV34d0Tzw==",
-      "dev": true,
+    "node_modules/@tanstack/query-core": {
+      "version": "4.36.1",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/react-query": {
+      "version": "4.36.1",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-create-regexp-features-plugin": "^7.14.5",
-        "@babel/helper-plugin-utils": "^7.14.5"
+        "@tanstack/query-core": "4.36.1",
+        "use-sync-external-store": "^1.2.0"
       },
-      "engines": {
-        "node": ">=6.9.0"
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-native": "*"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@babel/plugin-transform-unicode-regex/node_modules/@babel/helper-plugin-utils": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-      "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
+    "node_modules/@testing-library/dom": {
+      "version": "10.4.0",
       "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.10.4",
+        "@babel/runtime": "^7.12.5",
+        "@types/aria-query": "^5.0.1",
+        "aria-query": "5.3.0",
+        "chalk": "^4.1.0",
+        "dom-accessibility-api": "^0.5.9",
+        "lz-string": "^1.5.0",
+        "pretty-format": "^27.0.2"
+      },
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=18"
       }
     },
-    "node_modules/@babel/preset-env": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.10.4.tgz",
-      "integrity": "sha512-tcmuQ6vupfMZPrLrc38d0sF2OjLT3/bZ0dry5HchNCQbrokoQi4reXqclvkkAT5b+gWc23meVWpve5P/7+w/zw==",
+    "node_modules/@testing-library/jest-dom": {
+      "version": "5.17.0",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/compat-data": "^7.10.4",
-        "@babel/helper-compilation-targets": "^7.10.4",
-        "@babel/helper-module-imports": "^7.10.4",
-        "@babel/helper-plugin-utils": "^7.10.4",
-        "@babel/plugin-proposal-async-generator-functions": "^7.10.4",
-        "@babel/plugin-proposal-class-properties": "^7.10.4",
-        "@babel/plugin-proposal-dynamic-import": "^7.10.4",
-        "@babel/plugin-proposal-json-strings": "^7.10.4",
-        "@babel/plugin-proposal-nullish-coalescing-operator": "^7.10.4",
-        "@babel/plugin-proposal-numeric-separator": "^7.10.4",
-        "@babel/plugin-proposal-object-rest-spread": "^7.10.4",
-        "@babel/plugin-proposal-optional-catch-binding": "^7.10.4",
-        "@babel/plugin-proposal-optional-chaining": "^7.10.4",
-        "@babel/plugin-proposal-private-methods": "^7.10.4",
-        "@babel/plugin-proposal-unicode-property-regex": "^7.10.4",
-        "@babel/plugin-syntax-async-generators": "^7.8.0",
-        "@babel/plugin-syntax-class-properties": "^7.10.4",
-        "@babel/plugin-syntax-dynamic-import": "^7.8.0",
-        "@babel/plugin-syntax-json-strings": "^7.8.0",
-        "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.0",
-        "@babel/plugin-syntax-numeric-separator": "^7.10.4",
-        "@babel/plugin-syntax-object-rest-spread": "^7.8.0",
-        "@babel/plugin-syntax-optional-catch-binding": "^7.8.0",
-        "@babel/plugin-syntax-optional-chaining": "^7.8.0",
-        "@babel/plugin-syntax-top-level-await": "^7.10.4",
-        "@babel/plugin-transform-arrow-functions": "^7.10.4",
-        "@babel/plugin-transform-async-to-generator": "^7.10.4",
-        "@babel/plugin-transform-block-scoped-functions": "^7.10.4",
-        "@babel/plugin-transform-block-scoping": "^7.10.4",
-        "@babel/plugin-transform-classes": "^7.10.4",
-        "@babel/plugin-transform-computed-properties": "^7.10.4",
-        "@babel/plugin-transform-destructuring": "^7.10.4",
-        "@babel/plugin-transform-dotall-regex": "^7.10.4",
-        "@babel/plugin-transform-duplicate-keys": "^7.10.4",
-        "@babel/plugin-transform-exponentiation-operator": "^7.10.4",
-        "@babel/plugin-transform-for-of": "^7.10.4",
-        "@babel/plugin-transform-function-name": "^7.10.4",
-        "@babel/plugin-transform-literals": "^7.10.4",
-        "@babel/plugin-transform-member-expression-literals": "^7.10.4",
-        "@babel/plugin-transform-modules-amd": "^7.10.4",
-        "@babel/plugin-transform-modules-commonjs": "^7.10.4",
-        "@babel/plugin-transform-modules-systemjs": "^7.10.4",
-        "@babel/plugin-transform-modules-umd": "^7.10.4",
-        "@babel/plugin-transform-named-capturing-groups-regex": "^7.10.4",
-        "@babel/plugin-transform-new-target": "^7.10.4",
-        "@babel/plugin-transform-object-super": "^7.10.4",
-        "@babel/plugin-transform-parameters": "^7.10.4",
-        "@babel/plugin-transform-property-literals": "^7.10.4",
-        "@babel/plugin-transform-regenerator": "^7.10.4",
-        "@babel/plugin-transform-reserved-words": "^7.10.4",
-        "@babel/plugin-transform-shorthand-properties": "^7.10.4",
-        "@babel/plugin-transform-spread": "^7.10.4",
-        "@babel/plugin-transform-sticky-regex": "^7.10.4",
-        "@babel/plugin-transform-template-literals": "^7.10.4",
-        "@babel/plugin-transform-typeof-symbol": "^7.10.4",
-        "@babel/plugin-transform-unicode-escapes": "^7.10.4",
-        "@babel/plugin-transform-unicode-regex": "^7.10.4",
-        "@babel/preset-modules": "^0.1.3",
-        "@babel/types": "^7.10.4",
-        "browserslist": "^4.12.0",
-        "core-js-compat": "^3.6.2",
-        "invariant": "^2.2.2",
-        "levenary": "^1.1.1",
-        "semver": "^5.5.0"
+        "@adobe/css-tools": "^4.0.1",
+        "@babel/runtime": "^7.9.2",
+        "@types/testing-library__jest-dom": "^5.9.1",
+        "aria-query": "^5.0.0",
+        "chalk": "^3.0.0",
+        "css.escape": "^1.5.1",
+        "dom-accessibility-api": "^0.5.6",
+        "lodash": "^4.17.15",
+        "redent": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8",
+        "npm": ">=6",
+        "yarn": ">=1"
       }
     },
-    "node_modules/@babel/preset-modules": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/@babel/preset-modules/-/preset-modules-0.1.4.tgz",
-      "integrity": "sha512-J36NhwnfdzpmH41M1DrnkkgAqhZaqr/NBdPfQ677mLzlaXo+oDiv1deyCDtgAhz8p328otdob0Du7+xgHGZbKg==",
+    "node_modules/@testing-library/jest-dom/node_modules/chalk": {
+      "version": "3.0.0",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.0.0",
-        "@babel/plugin-proposal-unicode-property-regex": "^7.4.4",
-        "@babel/plugin-transform-dotall-regex": "^7.4.4",
-        "@babel/types": "^7.4.4",
-        "esutils": "^2.0.2"
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=8"
       }
     },
-    "node_modules/@babel/preset-react": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/preset-react/-/preset-react-7.10.4.tgz",
-      "integrity": "sha512-BrHp4TgOIy4M19JAfO1LhycVXOPWdDbTRep7eVyatf174Hff+6Uk53sDyajqZPu8W1qXRBiYOfIamek6jA7YVw==",
+    "node_modules/@testing-library/react": {
+      "version": "12.1.5",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.10.4",
-        "@babel/plugin-transform-react-display-name": "^7.10.4",
-        "@babel/plugin-transform-react-jsx": "^7.10.4",
-        "@babel/plugin-transform-react-jsx-development": "^7.10.4",
-        "@babel/plugin-transform-react-jsx-self": "^7.10.4",
-        "@babel/plugin-transform-react-jsx-source": "^7.10.4",
-        "@babel/plugin-transform-react-pure-annotations": "^7.10.4"
-      }
-    },
-    "node_modules/@babel/runtime": {
-      "version": "7.10.5",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.10.5.tgz",
-      "integrity": "sha512-otddXKhdNn7d0ptoFRHtMLa8LqDxLYwTjB4nYgM1yy5N6gU/MUf8zqyyLltCH3yAVitBzmwK4us+DD0l/MauAg==",
-      "dependencies": {
-        "regenerator-runtime": "^0.13.4"
+        "@babel/runtime": "^7.12.5",
+        "@testing-library/dom": "^8.0.0",
+        "@types/react-dom": "<18.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "react": "<18.0.0",
+        "react-dom": "<18.0.0"
       }
     },
-    "node_modules/@babel/runtime-corejs3": {
-      "version": "7.10.5",
-      "resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.10.5.tgz",
-      "integrity": "sha512-RMafpmrNB5E/bwdSphLr8a8++9TosnyJp98RZzI6VOx2R2CCMpsXXXRvmI700O9oEKpXdZat6oEK68/F0zjd4A==",
+    "node_modules/@testing-library/react-hooks": {
+      "version": "8.0.1",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "core-js-pure": "^3.0.0",
-        "regenerator-runtime": "^0.13.4"
+        "@babel/runtime": "^7.12.5",
+        "react-error-boundary": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.9.0 || ^17.0.0",
+        "react": "^16.9.0 || ^17.0.0",
+        "react-dom": "^16.9.0 || ^17.0.0",
+        "react-test-renderer": "^16.9.0 || ^17.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        },
+        "react-test-renderer": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@babel/runtime-corejs3/node_modules/regenerator-runtime": {
-      "version": "0.13.6",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.6.tgz",
-      "integrity": "sha512-GmwlGiazQEbOwQWDdbbaP10i15pGtScYWLbMZuu+RKRz0cZ+g8IUONazBnaZqe7j1670IV1HgE4/8iy7CQPf4Q==",
-      "dev": true
-    },
-    "node_modules/@babel/runtime/node_modules/regenerator-runtime": {
-      "version": "0.13.6",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.6.tgz",
-      "integrity": "sha512-GmwlGiazQEbOwQWDdbbaP10i15pGtScYWLbMZuu+RKRz0cZ+g8IUONazBnaZqe7j1670IV1HgE4/8iy7CQPf4Q=="
-    },
-    "node_modules/@babel/template": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.10.4.tgz",
-      "integrity": "sha512-ZCjD27cGJFUB6nmCB1Enki3r+L5kJveX9pq1SvAUKoICy6CZ9yD8xO086YXdYhvNjBdnekm4ZnaP5yC8Cs/1tA==",
+    "node_modules/@testing-library/react-hooks/node_modules/react-error-boundary": {
+      "version": "3.1.4",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/code-frame": "^7.10.4",
-        "@babel/parser": "^7.10.4",
-        "@babel/types": "^7.10.4"
+        "@babel/runtime": "^7.12.5"
+      },
+      "engines": {
+        "node": ">=10",
+        "npm": ">=6"
+      },
+      "peerDependencies": {
+        "react": ">=16.13.1"
       }
     },
-    "node_modules/@babel/traverse": {
-      "version": "7.10.5",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.10.5.tgz",
-      "integrity": "sha512-yc/fyv2gUjPqzTz0WHeRJH2pv7jA9kA7mBX2tXl/x5iOE81uaVPuGPtaYk7wmkx4b67mQ7NqI8rmT2pF47KYKQ==",
+    "node_modules/@testing-library/react/node_modules/@testing-library/dom": {
+      "version": "8.20.1",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@babel/code-frame": "^7.10.4",
-        "@babel/generator": "^7.10.5",
-        "@babel/helper-function-name": "^7.10.4",
-        "@babel/helper-split-export-declaration": "^7.10.4",
-        "@babel/parser": "^7.10.5",
-        "@babel/types": "^7.10.5",
-        "debug": "^4.1.0",
-        "globals": "^11.1.0",
-        "lodash": "^4.17.19"
+        "@babel/runtime": "^7.12.5",
+        "@types/aria-query": "^5.0.1",
+        "aria-query": "5.1.3",
+        "chalk": "^4.1.0",
+        "dom-accessibility-api": "^0.5.9",
+        "lz-string": "^1.5.0",
+        "pretty-format": "^27.0.2"
+      },
+      "engines": {
+        "node": ">=12"
       }
     },
-    "node_modules/@babel/traverse/node_modules/debug": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
-      "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
+    "node_modules/@testing-library/react/node_modules/aria-query": {
+      "version": "5.1.3",
       "dev": true,
+      "license": "Apache-2.0",
       "dependencies": {
-        "ms": "^2.1.1"
+        "deep-equal": "^2.0.5"
       }
     },
-    "node_modules/@babel/traverse/node_modules/ms": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-      "dev": true
-    },
-    "node_modules/@babel/types": {
-      "version": "7.10.5",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.5.tgz",
-      "integrity": "sha512-ixV66KWfCI6GKoA/2H9v6bQdbfXEwwpOdQ8cRvb4F+eyvhlaHxWFMQB4+3d9QFJXZsiiiqVrewNV0DFEQpyT4Q==",
+    "node_modules/@testing-library/user-event": {
+      "version": "13.5.0",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-validator-identifier": "^7.10.4",
-        "lodash": "^4.17.19",
-        "to-fast-properties": "^2.0.0"
+        "@babel/runtime": "^7.12.5"
+      },
+      "engines": {
+        "node": ">=10",
+        "npm": ">=6"
+      },
+      "peerDependencies": {
+        "@testing-library/dom": ">=7.21.4"
       }
     },
-    "node_modules/@bcoe/v8-coverage": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz",
-      "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==",
-      "dev": true
-    },
-    "node_modules/@cnakazawa/watch": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/@cnakazawa/watch/-/watch-1.0.4.tgz",
-      "integrity": "sha512-v9kIhKwjeZThiWrLmj0y17CWoyddASLj9O2yvbZkbvw/N3rWOYy9zkV66ursAoVr0mV15bL8g0c4QZUE6cdDoQ==",
-      "dev": true,
+    "node_modules/@tinymce/tinymce-react": {
+      "version": "3.14.0",
+      "license": "Apache-2.0",
       "dependencies": {
-        "exec-sh": "^0.3.2",
-        "minimist": "^1.2.0"
-      },
-      "bin": {
-        "watch": "cli.js"
+        "prop-types": "^15.6.2",
+        "tinymce": "^5.5.1"
       },
-      "engines": {
-        "node": ">=0.1.95"
+      "peerDependencies": {
+        "react": "^18.0.0 || ^17.0.1 || ^16.7.0",
+        "react-dom": "^18.0.0 || ^17.0.1 || ^16.7.0"
       }
     },
-    "node_modules/@cospired/i18n-iso-languages": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/@cospired/i18n-iso-languages/-/i18n-iso-languages-2.2.0.tgz",
-      "integrity": "sha512-hywY9u9apWGeLxQuRcXw7IW0XkMdXum/hr3TpmHY2fAbXMTFlhhkPCdsQeHzjxMQwTnMgXaZ4j4WOCwKtlDRCQ==",
+    "node_modules/@tootallnate/once": {
+      "version": "2.0.0",
+      "license": "MIT",
       "engines": {
-        "node": ">= 6"
+        "node": ">= 10"
       }
     },
-    "node_modules/@discoveryjs/json-ext": {
-      "version": "0.5.3",
-      "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.3.tgz",
-      "integrity": "sha512-Fxt+AfXgjMoin2maPIYzFZnQjAXjAL0PHscM5pRTtatFqB+vZxAM9tLp2Optnuw3QOQC40jTNeGYFOMvyf7v9g==",
-      "dev": true,
+    "node_modules/@trysound/sax": {
+      "version": "0.2.0",
+      "license": "ISC",
       "engines": {
-        "node": ">=10.0.0"
+        "node": ">=10.13.0"
       }
     },
-    "node_modules/@edx/brand": {
-      "name": "@edx/brand-openedx",
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@edx/brand-openedx/-/brand-openedx-1.1.0.tgz",
-      "integrity": "sha512-ne2ZKF1r0akkt0rEzCAQAk4cTDTI2GiWCpc+T7ldQpw9X57OnUB16dKsFNe40C9uEjL5h3Ps/ZsFM5dm4cIkEQ=="
-    },
-    "node_modules/@edx/eslint-config": {
-      "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/@edx/eslint-config/-/eslint-config-1.1.6.tgz",
-      "integrity": "sha512-5+WPYySI8wGttJ+eU6SqCNZk/smABmYF5V+jJdhtV6+zZ6PjaZ4JNLyKNFIAht6lc5Ld8AG8Ki50YTuMd0j+fg==",
-      "dev": true
-    },
-    "node_modules/@edx/frontend-build": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-build/-/frontend-build-7.0.0.tgz",
-      "integrity": "sha512-NakVO6NjNr0G582yXkbBM/ekeyCyibxMCD6hcomKmQdpGH9JA+IRJ4MEJ81r2M71eKAfPwV0YhS0ju/wWra1sQ==",
+    "node_modules/@types/aria-query": {
+      "version": "5.0.4",
       "dev": true,
-      "dependencies": {
-        "@babel/cli": "7.10.5",
-        "@babel/core": "7.10.5",
-        "@babel/plugin-proposal-class-properties": "7.10.4",
-        "@babel/plugin-proposal-object-rest-spread": "7.10.4",
-        "@babel/plugin-syntax-dynamic-import": "7.8.3",
-        "@babel/preset-env": "7.10.4",
-        "@babel/preset-react": "7.10.4",
-        "@edx/eslint-config": "1.1.6",
-        "@svgr/webpack": "5.5.0",
-        "autoprefixer": "10.2.6",
-        "babel-eslint": "10.1.0",
-        "babel-jest": "26.3.0",
-        "babel-loader": "8.1.0",
-        "babel-plugin-react-intl": "7.9.4",
-        "babel-plugin-transform-imports": "2.0.0",
-        "babel-polyfill": "6.26.0",
-        "clean-webpack-plugin": "3.0.0",
-        "css-loader": "5.2.6",
-        "cssnano": "5.0.6",
-        "dotenv": "8.2.0",
-        "dotenv-webpack": "7.0.3",
-        "eslint": "6.8.0",
-        "eslint-config-airbnb": "18.1.0",
-        "eslint-plugin-import": "2.22.1",
-        "eslint-plugin-jsx-a11y": "6.2.3",
-        "eslint-plugin-react": "7.19.0",
-        "eslint-plugin-react-hooks": "1.7.0",
-        "file-loader": "6.2.0",
-        "html-webpack-new-relic-plugin": "4.1.0",
-        "html-webpack-plugin": "5.3.1",
-        "identity-obj-proxy": "3.0.0",
-        "image-webpack-loader": "7.0.1",
-        "jest": "26.4.2",
-        "mini-css-extract-plugin": "1.6.0",
-        "new-relic-source-map-webpack-plugin": "1.2.0",
-        "postcss": "8.3.5",
-        "postcss-loader": "6.1.0",
-        "postcss-rtlcss": "3.3.4",
-        "react-dev-utils": "11.0.4",
-        "resolve-url-loader": "5.0.0-beta.1",
-        "sass": "1.26.11",
-        "sass-loader": "10.0.5",
-        "source-map-loader": "0.2.4",
-        "style-loader": "2.0.0",
-        "url-loader": "4.1.1",
-        "webpack": "5.21.2",
-        "webpack-bundle-analyzer": "3.9.0",
-        "webpack-cli": "4.5.0",
-        "webpack-dev-server": "4.0.0-beta.3",
-        "webpack-merge": "5.2.0"
-      },
-      "bin": {
-        "fedx-scripts": "bin/fedx-scripts.js"
-      }
+      "license": "MIT"
     },
-    "node_modules/@edx/frontend-build/node_modules/@babel/core": {
-      "version": "7.10.5",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.10.5.tgz",
-      "integrity": "sha512-O34LQooYVDXPl7QWCdW9p4NR+QlzOr7xShPPJz8GsuCU3/8ua/wqTr7gmnxXv+WBESiGU/G5s16i6tUvHkNb+w==",
-      "dev": true,
+    "node_modules/@types/babel__core": {
+      "version": "7.20.5",
+      "license": "MIT",
       "dependencies": {
-        "@babel/code-frame": "^7.10.4",
-        "@babel/generator": "^7.10.5",
-        "@babel/helper-module-transforms": "^7.10.5",
-        "@babel/helpers": "^7.10.4",
-        "@babel/parser": "^7.10.5",
-        "@babel/template": "^7.10.4",
-        "@babel/traverse": "^7.10.5",
-        "@babel/types": "^7.10.5",
-        "convert-source-map": "^1.7.0",
-        "debug": "^4.1.0",
-        "gensync": "^1.0.0-beta.1",
-        "json5": "^2.1.2",
-        "lodash": "^4.17.19",
-        "resolve": "^1.3.2",
-        "semver": "^5.4.1",
-        "source-map": "^0.5.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+        "@babel/parser": "^7.20.7",
+        "@babel/types": "^7.20.7",
+        "@types/babel__generator": "*",
+        "@types/babel__template": "*",
+        "@types/babel__traverse": "*"
       }
     },
-    "node_modules/@edx/frontend-build/node_modules/@jest/types": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
-      "integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
-      "dev": true,
+    "node_modules/@types/babel__generator": {
+      "version": "7.6.8",
+      "license": "MIT",
       "dependencies": {
-        "@types/istanbul-lib-coverage": "^2.0.0",
-        "@types/istanbul-reports": "^3.0.0",
-        "@types/node": "*",
-        "@types/yargs": "^15.0.0",
-        "chalk": "^4.0.0"
-      },
-      "engines": {
-        "node": ">= 10.14.2"
+        "@babel/types": "^7.0.0"
       }
     },
-    "node_modules/@edx/frontend-build/node_modules/@types/istanbul-reports": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz",
-      "integrity": "sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==",
-      "dev": true,
+    "node_modules/@types/babel__helper-plugin-utils": {
+      "version": "7.10.3",
+      "license": "MIT",
       "dependencies": {
-        "@types/istanbul-lib-report": "*"
+        "@types/babel__core": "*"
       }
     },
-    "node_modules/@edx/frontend-build/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,
+    "node_modules/@types/babel__template": {
+      "version": "7.4.4",
+      "license": "MIT",
       "dependencies": {
-        "color-convert": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=8"
+        "@babel/parser": "^7.1.0",
+        "@babel/types": "^7.0.0"
       }
     },
-    "node_modules/@edx/frontend-build/node_modules/chalk": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
-      "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
-      "dev": true,
+    "node_modules/@types/babel__traverse": {
+      "version": "7.20.6",
+      "license": "MIT",
       "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
-      },
-      "engines": {
-        "node": ">=10"
+        "@babel/types": "^7.20.7"
       }
     },
-    "node_modules/@edx/frontend-build/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,
+    "node_modules/@types/body-parser": {
+      "version": "1.19.5",
+      "license": "MIT",
       "dependencies": {
-        "color-name": "~1.1.4"
-      },
-      "engines": {
-        "node": ">=7.0.0"
+        "@types/connect": "*",
+        "@types/node": "*"
       }
     },
-    "node_modules/@edx/frontend-build/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/@edx/frontend-build/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/@types/bonjour": {
+      "version": "3.5.13",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
       }
     },
-    "node_modules/@edx/frontend-build/node_modules/jest": {
-      "version": "26.4.2",
-      "resolved": "https://registry.npmjs.org/jest/-/jest-26.4.2.tgz",
-      "integrity": "sha512-LLCjPrUh98Ik8CzW8LLVnSCfLaiY+wbK53U7VxnFSX7Q+kWC4noVeDvGWIFw0Amfq1lq2VfGm7YHWSLBV62MJw==",
-      "dev": true,
+    "node_modules/@types/connect": {
+      "version": "3.4.38",
+      "license": "MIT",
       "dependencies": {
-        "@jest/core": "^26.4.2",
-        "import-local": "^3.0.2",
-        "jest-cli": "^26.4.2"
-      },
-      "bin": {
-        "jest": "bin/jest.js"
-      },
-      "engines": {
-        "node": ">= 10.14.2"
+        "@types/node": "*"
       }
     },
-    "node_modules/@edx/frontend-build/node_modules/jest/node_modules/jest-cli": {
-      "version": "26.6.3",
-      "resolved": "https://registry.npmjs.org/jest-cli/-/jest-cli-26.6.3.tgz",
-      "integrity": "sha512-GF9noBSa9t08pSyl3CY4frMrqp+aQXFGFkf5hEPbh/pIUFYWMK6ZLTfbmadxJVcJrdRoChlWQsA2VkJcDFK8hg==",
-      "dev": true,
+    "node_modules/@types/connect-history-api-fallback": {
+      "version": "1.5.4",
+      "license": "MIT",
       "dependencies": {
-        "@jest/core": "^26.6.3",
-        "@jest/test-result": "^26.6.2",
-        "@jest/types": "^26.6.2",
-        "chalk": "^4.0.0",
-        "exit": "^0.1.2",
-        "graceful-fs": "^4.2.4",
-        "import-local": "^3.0.2",
-        "is-ci": "^2.0.0",
-        "jest-config": "^26.6.3",
-        "jest-util": "^26.6.2",
-        "jest-validate": "^26.6.2",
-        "prompts": "^2.0.1",
-        "yargs": "^15.4.1"
-      },
-      "bin": {
-        "jest": "bin/jest.js"
-      },
-      "engines": {
-        "node": ">= 10.14.2"
+        "@types/express-serve-static-core": "*",
+        "@types/node": "*"
       }
     },
-    "node_modules/@edx/frontend-build/node_modules/source-map": {
-      "version": "0.5.7",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-      "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
+    "node_modules/@types/cookie": {
+      "version": "0.3.3",
+      "license": "MIT"
     },
-    "node_modules/@edx/frontend-build/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,
+    "node_modules/@types/eslint": {
+      "version": "8.56.11",
+      "license": "MIT",
       "dependencies": {
-        "has-flag": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
+        "@types/estree": "*",
+        "@types/json-schema": "*"
       }
     },
-    "node_modules/@edx/frontend-component-footer": {
-      "version": "10.0.11",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-component-footer/-/frontend-component-footer-10.0.11.tgz",
-      "integrity": "sha512-Az8E2h0d5DYz+zp+x6yvc+W0uzGaDhSsTd1BE0pcJvcv1EaNPZxuxKrEtsA8bUFXRLNhzt9nWp/DIRG9kivNxA==",
+    "node_modules/@types/eslint-scope": {
+      "version": "3.7.7",
+      "license": "MIT",
       "dependencies": {
-        "@fortawesome/fontawesome-svg-core": "1.2.30",
-        "@fortawesome/free-brands-svg-icons": "5.8.2",
-        "@fortawesome/free-regular-svg-icons": "5.8.2",
-        "@fortawesome/free-solid-svg-icons": "5.8.2",
-        "@fortawesome/react-fontawesome": "0.1.11"
+        "@types/eslint": "*",
+        "@types/estree": "*"
       }
     },
-    "node_modules/@edx/frontend-component-footer/node_modules/@fortawesome/fontawesome-svg-core": {
-      "version": "1.2.30",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.30.tgz",
-      "integrity": "sha512-E3sAXATKCSVnT17HYmZjjbcmwihrNOCkoU7dVMlasrcwiJAHxSKeZ+4WN5O+ElgO/FaYgJmASl8p9N7/B/RttA==",
+    "node_modules/@types/estree": {
+      "version": "1.0.5",
+      "license": "MIT"
+    },
+    "node_modules/@types/express": {
+      "version": "4.17.21",
+      "license": "MIT",
       "dependencies": {
-        "@fortawesome/fontawesome-common-types": "^0.2.30"
-      },
-      "engines": {
-        "node": ">=6"
+        "@types/body-parser": "*",
+        "@types/express-serve-static-core": "^4.17.33",
+        "@types/qs": "*",
+        "@types/serve-static": "*"
       }
     },
-    "node_modules/@edx/frontend-component-footer/node_modules/@fortawesome/free-brands-svg-icons": {
-      "version": "5.8.2",
-      "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.8.2.tgz",
-      "integrity": "sha512-nhEWctDOP6f+Ka10LXAFoF+6mtWidC2iQgTBGRGgydmhBtcIEwyxWVx5wQHa86A1zAMi5TnipDAYQs2qn7DD6A==",
+    "node_modules/@types/express-serve-static-core": {
+      "version": "4.19.5",
+      "license": "MIT",
       "dependencies": {
-        "@fortawesome/fontawesome-common-types": "^0.2.18"
-      },
-      "engines": {
-        "node": ">=6"
+        "@types/node": "*",
+        "@types/qs": "*",
+        "@types/range-parser": "*",
+        "@types/send": "*"
       }
     },
-    "node_modules/@edx/frontend-component-footer/node_modules/@fortawesome/free-regular-svg-icons": {
-      "version": "5.8.2",
-      "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-5.8.2.tgz",
-      "integrity": "sha512-499WODlsDcXA9hM+Y3ZqoWj1kKhVLCHS8PnJs3zEaoPr5W6yrE9Jnp3C9Hb9KpwnRMh3IRXZ3XqxyUaQFMMRFw==",
+    "node_modules/@types/glob": {
+      "version": "7.2.0",
+      "license": "MIT",
       "dependencies": {
-        "@fortawesome/fontawesome-common-types": "^0.2.18"
-      },
-      "engines": {
-        "node": ">=6"
+        "@types/minimatch": "*",
+        "@types/node": "*"
       }
     },
-    "node_modules/@edx/frontend-component-footer/node_modules/@fortawesome/free-solid-svg-icons": {
-      "version": "5.8.2",
-      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.8.2.tgz",
-      "integrity": "sha512-5tF6WOFlqqO95zY5ukSB6jliDa3jnk1p5L4K/a58ccDFsbjSkhfGuvZkRkeWxH8uMms81pZd6yQTwQrkedeJmg==",
+    "node_modules/@types/graceful-fs": {
+      "version": "4.1.9",
+      "license": "MIT",
       "dependencies": {
-        "@fortawesome/fontawesome-common-types": "^0.2.18"
-      },
-      "engines": {
-        "node": ">=6"
+        "@types/node": "*"
       }
     },
-    "node_modules/@edx/frontend-component-footer/node_modules/@fortawesome/react-fontawesome": {
-      "version": "0.1.11",
-      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.11.tgz",
-      "integrity": "sha512-sClfojasRifQKI0OPqTy8Ln8iIhnxR/Pv/hukBhWnBz9kQRmqi6JSH3nghlhAY7SUeIIM7B5/D2G8WjX0iepVg==",
+    "node_modules/@types/hoist-non-react-statics": {
+      "version": "3.3.5",
+      "license": "MIT",
       "dependencies": {
-        "prop-types": "^15.7.2"
+        "@types/react": "*",
+        "hoist-non-react-statics": "^3.3.0"
       }
     },
-    "node_modules/@edx/frontend-platform": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-platform/-/frontend-platform-1.11.0.tgz",
-      "integrity": "sha512-XtqKPWUvXzPJLlIEsoLMuac3TvTtAe1GY9MKu1QQsZDget1plDZqaf3ByRbuxOW8b2g2JVPvFx+Jm3FxTcrmIQ==",
+    "node_modules/@types/html-minifier-terser": {
+      "version": "6.1.0",
+      "license": "MIT"
+    },
+    "node_modules/@types/http-errors": {
+      "version": "2.0.4",
+      "license": "MIT"
+    },
+    "node_modules/@types/http-proxy": {
+      "version": "1.17.15",
+      "license": "MIT",
       "dependencies": {
-        "@cospired/i18n-iso-languages": "2.2.0",
-        "axios": "0.21.1",
-        "axios-cache-adapter": "^2.5.0",
-        "form-urlencoded": "4.1.4",
-        "glob": "7.1.7",
-        "history": "4.10.1",
-        "i18n-iso-countries": "4.3.1",
-        "jwt-decode": "2.2.0",
-        "localforage": "^1.9.0",
-        "localforage-memoryStorageDriver": "^0.9.2",
-        "lodash.camelcase": "4.3.0",
-        "lodash.memoize": "4.1.2",
-        "lodash.merge": "4.6.2",
-        "lodash.snakecase": "4.1.1",
-        "pubsub-js": "1.9.3",
-        "react-intl": "2.9.0",
-        "universal-cookie": "4.0.4"
-      },
-      "bin": {
-        "transifex-Makefile": "i18n/scripts/Makefile",
-        "transifex-utils.js": "i18n/scripts/transifex-utils.js"
+        "@types/node": "*"
       }
     },
-    "node_modules/@edx/frontend-platform/node_modules/glob": {
-      "version": "7.1.7",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz",
-      "integrity": "sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==",
+    "node_modules/@types/invariant": {
+      "version": "2.2.37",
+      "license": "MIT"
+    },
+    "node_modules/@types/istanbul-lib-coverage": {
+      "version": "2.0.6",
+      "license": "MIT"
+    },
+    "node_modules/@types/istanbul-lib-report": {
+      "version": "3.0.3",
+      "license": "MIT",
       "dependencies": {
-        "fs.realpath": "^1.0.0",
-        "inflight": "^1.0.4",
-        "inherits": "2",
-        "minimatch": "^3.0.4",
-        "once": "^1.3.0",
-        "path-is-absolute": "^1.0.0"
-      },
-      "engines": {
-        "node": "*"
+        "@types/istanbul-lib-coverage": "*"
       }
     },
-    "node_modules/@edx/paragon": {
-      "version": "16.6.4",
-      "resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-16.6.4.tgz",
-      "integrity": "sha512-2RZg9bO/SzgA24EO9XD4KfA2mfAgb8Kpky4Bw3fUPKuU+xNuGpJNxbV4UhwyS0L3E3X63kXF40bguXOHdHrU0w==",
-      "license": "Apache-2.0",
+    "node_modules/@types/istanbul-reports": {
+      "version": "3.0.4",
+      "license": "MIT",
       "dependencies": {
-        "@fortawesome/fontawesome-svg-core": "^1.2.30",
-        "@fortawesome/free-solid-svg-icons": "^5.14.0",
-        "@fortawesome/react-fontawesome": "^0.1.11",
-        "@popperjs/core": "^2.6.0",
-        "airbnb-prop-types": "^2.12.0",
-        "bootstrap": "4.6.0",
-        "classnames": "^2.2.6",
-        "email-prop-type": "^3.0.0",
-        "font-awesome": "^4.7.0",
-        "lodash.uniqby": "^4.7.0",
-        "mailto-link": "^1.0.0",
-        "prop-types": "^15.7.2",
-        "react-bootstrap": "^1.3.0",
-        "react-focus-on": "^3.5.0",
-        "react-popper": "^2.2.4",
-        "react-proptype-conditional-require": "^1.0.4",
-        "react-responsive": "^8.2.0",
-        "react-table": "^7.6.1",
-        "react-transition-group": "^4.0.0",
-        "tabbable": "^4.0.0",
-        "uncontrollable": "7.2.1"
-      },
-      "peerDependencies": {
-        "prop-types": "^15.7.2",
-        "react": "^16.8.6",
-        "react-dom": "^16.8.6"
+        "@types/istanbul-lib-report": "*"
       }
     },
-    "node_modules/@edx/paragon/node_modules/@fortawesome/fontawesome-common-types": {
-      "version": "0.2.35",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.35.tgz",
-      "integrity": "sha512-IHUfxSEDS9dDGqYwIW7wTN6tn/O8E0n5PcAHz9cAaBoZw6UpG20IG/YM3NNLaGPwPqgjBAFjIURzqoQs3rrtuw==",
-      "engines": {
-        "node": ">=6"
+    "node_modules/@types/jest": {
+      "version": "29.5.12",
+      "license": "MIT",
+      "dependencies": {
+        "expect": "^29.0.0",
+        "pretty-format": "^29.0.0"
       }
     },
-    "node_modules/@edx/paragon/node_modules/@fortawesome/fontawesome-svg-core": {
-      "version": "1.2.35",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.35.tgz",
-      "integrity": "sha512-uLEXifXIL7hnh2sNZQrIJWNol7cTVIzwI+4qcBIq9QWaZqUblm0IDrtSqbNg+3SQf8SMGHkiSigD++rHmCHjBg==",
-      "dependencies": {
-        "@fortawesome/fontawesome-common-types": "^0.2.35"
-      },
+    "node_modules/@types/jest/node_modules/ansi-styles": {
+      "version": "5.2.0",
+      "license": "MIT",
       "engines": {
-        "node": ">=6"
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/@edx/paragon/node_modules/@fortawesome/free-solid-svg-icons": {
-      "version": "5.15.3",
-      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.3.tgz",
-      "integrity": "sha512-XPeeu1IlGYqz4VWGRAT5ukNMd4VHUEEJ7ysZ7pSSgaEtNvSo+FLurybGJVmiqkQdK50OkSja2bfZXOeyMGRD8Q==",
+    "node_modules/@types/jest/node_modules/pretty-format": {
+      "version": "29.7.0",
+      "license": "MIT",
       "dependencies": {
-        "@fortawesome/fontawesome-common-types": "^0.2.35"
+        "@jest/schemas": "^29.6.3",
+        "ansi-styles": "^5.0.0",
+        "react-is": "^18.0.0"
       },
       "engines": {
-        "node": ">=6"
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
-    "node_modules/@edx/paragon/node_modules/@fortawesome/react-fontawesome": {
-      "version": "0.1.14",
-      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.14.tgz",
-      "integrity": "sha512-4wqNb0gRLVaBm/h+lGe8UfPPivcbuJ6ecI4hIgW0LjI7kzpYB9FkN0L9apbVzg+lsBdcTf0AlBtODjcSX5mmKA==",
-      "dependencies": {
-        "prop-types": "^15.7.2"
-      }
+    "node_modules/@types/jest/node_modules/react-is": {
+      "version": "18.3.1",
+      "license": "MIT"
     },
-    "node_modules/@edx/paragon/node_modules/react-responsive": {
-      "version": "8.2.0",
-      "resolved": "https://registry.npmjs.org/react-responsive/-/react-responsive-8.2.0.tgz",
-      "integrity": "sha512-iagCqVrw4QSjhxKp3I/YK6+ODkWY6G+YPElvdYKiUUbywwh9Ds0M7r26Fj2/7dWFFbOpcGnJE6uE7aMck8j5Qg==",
+    "node_modules/@types/jsdom": {
+      "version": "20.0.1",
+      "license": "MIT",
       "dependencies": {
-        "hyphenate-style-name": "^1.0.0",
-        "matchmediaquery": "^0.3.0",
-        "prop-types": "^15.6.1",
-        "shallow-equal": "^1.1.0"
-      },
-      "engines": {
-        "node": ">= 0.10"
+        "@types/node": "*",
+        "@types/tough-cookie": "*",
+        "parse5": "^7.0.0"
       }
     },
-    "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/@types/json-schema": {
+      "version": "7.0.15",
+      "license": "MIT"
     },
-    "node_modules/@formatjs/ecma402-abstract/node_modules/tslib": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
-      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
-      "dev": true
+    "node_modules/@types/json-stable-stringify": {
+      "version": "1.0.36",
+      "license": "MIT"
     },
-    "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/@types/json5": {
+      "version": "0.0.29",
+      "license": "MIT"
     },
-    "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==",
+    "node_modules/@types/lodash": {
+      "version": "4.17.7",
       "dev": true,
-      "dependencies": {
-        "tslib": "^2.0.1"
-      }
+      "license": "MIT"
     },
-    "node_modules/@formatjs/intl-numberformat/node_modules/tslib": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
-      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
-      "dev": true
+    "node_modules/@types/mime": {
+      "version": "1.3.5",
+      "license": "MIT"
     },
-    "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==",
+    "node_modules/@types/minimatch": {
+      "version": "5.1.2",
+      "license": "MIT"
+    },
+    "node_modules/@types/minimist": {
+      "version": "1.2.5",
       "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/node": {
+      "version": "22.2.0",
+      "license": "MIT",
       "dependencies": {
-        "intl-messageformat-parser": "6.1.2",
-        "tslib": "^2.0.1",
-        "typescript": "^4.0"
+        "undici-types": "~6.13.0"
       }
     },
-    "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==",
-      "dev": true,
+    "node_modules/@types/node-forge": {
+      "version": "1.3.11",
+      "license": "MIT",
       "dependencies": {
-        "@formatjs/ecma402-abstract": "1.5.0",
-        "tslib": "^2.0.1"
+        "@types/node": "*"
       }
     },
-    "node_modules/@formatjs/ts-transformer/node_modules/tslib": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
-      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
-      "dev": true
+    "node_modules/@types/normalize-package-data": {
+      "version": "2.4.4",
+      "dev": true,
+      "license": "MIT"
     },
-    "node_modules/@fortawesome/fontawesome-common-types": {
-      "version": "0.2.30",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.30.tgz",
-      "integrity": "sha512-TsRwpTuKwFNiPhk1UfKgw7zNPeV5RhNp2Uw3pws+9gDAkPGKrtjR1y2lI3SYn7+YzyfuNknflpBA1LRKjt7hMg==",
-      "engines": {
-        "node": ">=6"
-      }
+    "node_modules/@types/parse-json": {
+      "version": "4.0.2",
+      "license": "MIT"
     },
-    "node_modules/@fortawesome/fontawesome-svg-core": {
-      "version": "1.2.28",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.28.tgz",
-      "integrity": "sha512-4LeaNHWvrneoU0i8b5RTOJHKx7E+y7jYejplR7uSVB34+mp3Veg7cbKk7NBCLiI4TyoWS1wh9ZdoyLJR8wSAdg==",
-      "dependencies": {
-        "@fortawesome/fontawesome-common-types": "^0.2.28"
-      },
-      "engines": {
-        "node": ">=6"
-      }
+    "node_modules/@types/picomatch": {
+      "version": "2.3.4",
+      "license": "MIT"
     },
-    "node_modules/@fortawesome/free-brands-svg-icons": {
-      "version": "5.11.2",
-      "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.11.2.tgz",
-      "integrity": "sha512-wKK5znpHiZ2S0VgOvbeAnYuzkk3H86rxWajD9PVpfBj3s/kySEWTFKh/uLPyxiTOx8Tsd0OGN4En/s9XudVHLQ==",
-      "dependencies": {
-        "@fortawesome/fontawesome-common-types": "^0.2.25"
-      },
-      "engines": {
-        "node": ">=6"
-      }
+    "node_modules/@types/prop-types": {
+      "version": "15.7.12",
+      "license": "MIT"
     },
-    "node_modules/@fortawesome/free-regular-svg-icons": {
-      "version": "5.11.2",
-      "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-5.11.2.tgz",
-      "integrity": "sha512-k0vbThRv9AvnXYBWi1gn1rFW4X7co/aFkbm0ZNmAR5PoWb9vY9EDDDobg8Ay4ISaXtCPypvJ0W1FWkSpLQwZ6w==",
+    "node_modules/@types/qs": {
+      "version": "6.9.15",
+      "license": "MIT"
+    },
+    "node_modules/@types/range-parser": {
+      "version": "1.2.7",
+      "license": "MIT"
+    },
+    "node_modules/@types/react": {
+      "version": "17.0.80",
+      "license": "MIT",
       "dependencies": {
-        "@fortawesome/fontawesome-common-types": "^0.2.25"
-      },
-      "engines": {
-        "node": ">=6"
+        "@types/prop-types": "*",
+        "@types/scheduler": "^0.16",
+        "csstype": "^3.0.2"
       }
     },
-    "node_modules/@fortawesome/free-solid-svg-icons": {
-      "version": "5.11.2",
-      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.11.2.tgz",
-      "integrity": "sha512-zBue4i0PAZJUXOmLBBvM7L0O7wmsDC8dFv9IhpW5QL4kT9xhhVUsYg/LX1+5KaukWq4/cbDcKT+RT1aRe543sg==",
+    "node_modules/@types/react-dom": {
+      "version": "17.0.25",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@fortawesome/fontawesome-common-types": "^0.2.25"
-      },
-      "engines": {
-        "node": ">=6"
+        "@types/react": "^17"
       }
     },
-    "node_modules/@fortawesome/react-fontawesome": {
-      "version": "0.1.9",
-      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.9.tgz",
-      "integrity": "sha512-49V3WNysLZU5fZ3sqSuys4nGRytsrxJktbv3vuaXkEoxv22C6T7TEG0TW6+nqVjMnkfCQd5xOnmJoZHMF78tOw==",
+    "node_modules/@types/react-redux": {
+      "version": "7.1.33",
+      "license": "MIT",
       "dependencies": {
-        "prop-types": "^15.7.2"
+        "@types/hoist-non-react-statics": "^3.3.0",
+        "@types/react": "*",
+        "hoist-non-react-statics": "^3.3.0",
+        "redux": "^4.0.0"
       }
     },
-    "node_modules/@istanbuljs/load-nyc-config": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz",
-      "integrity": "sha512-VjeHSlIzpv/NyD3N0YuHfXOPDIixcA1q2ZV98wsMqcYlPmv2n3Yb2lYP9XMElnaFVXg5A7YLTeLu6V84uQDjmQ==",
-      "dev": true,
+    "node_modules/@types/react-transition-group": {
+      "version": "4.4.11",
+      "license": "MIT",
       "dependencies": {
-        "camelcase": "^5.3.1",
-        "find-up": "^4.1.0",
-        "get-package-type": "^0.1.0",
-        "js-yaml": "^3.13.1",
-        "resolve-from": "^5.0.0"
-      },
-      "engines": {
-        "node": ">=8"
+        "@types/react": "*"
       }
     },
-    "node_modules/@istanbuljs/load-nyc-config/node_modules/camelcase": {
-      "version": "5.3.1",
-      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
-      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
-      }
+    "node_modules/@types/retry": {
+      "version": "0.12.0",
+      "license": "MIT"
     },
-    "node_modules/@istanbuljs/load-nyc-config/node_modules/resolve-from": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
-      "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
+    "node_modules/@types/scheduler": {
+      "version": "0.16.8",
+      "license": "MIT"
     },
-    "node_modules/@istanbuljs/schema": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/@istanbuljs/schema/-/schema-0.1.3.tgz",
-      "integrity": "sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
+    "node_modules/@types/semver": {
+      "version": "7.5.8",
+      "license": "MIT"
+    },
+    "node_modules/@types/send": {
+      "version": "0.17.4",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mime": "^1",
+        "@types/node": "*"
       }
     },
-    "node_modules/@jest/console": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/@jest/console/-/console-26.6.2.tgz",
-      "integrity": "sha512-IY1R2i2aLsLr7Id3S6p2BA82GNWryt4oSvEXLAKc+L2zdi89dSkE8xC1C+0kpATG4JhBJREnQOH7/zmccM2B0g==",
-      "dev": true,
+    "node_modules/@types/serve-index": {
+      "version": "1.9.4",
+      "license": "MIT",
       "dependencies": {
-        "@jest/types": "^26.6.2",
-        "@types/node": "*",
-        "chalk": "^4.0.0",
-        "jest-message-util": "^26.6.2",
-        "jest-util": "^26.6.2",
-        "slash": "^3.0.0"
-      },
-      "engines": {
-        "node": ">= 10.14.2"
+        "@types/express": "*"
       }
     },
-    "node_modules/@jest/console/node_modules/@jest/types": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
-      "integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
-      "dev": true,
+    "node_modules/@types/serve-static": {
+      "version": "1.15.7",
+      "license": "MIT",
       "dependencies": {
-        "@types/istanbul-lib-coverage": "^2.0.0",
-        "@types/istanbul-reports": "^3.0.0",
+        "@types/http-errors": "*",
         "@types/node": "*",
-        "@types/yargs": "^15.0.0",
-        "chalk": "^4.0.0"
-      },
-      "engines": {
-        "node": ">= 10.14.2"
+        "@types/send": "*"
       }
     },
-    "node_modules/@jest/console/node_modules/@types/istanbul-reports": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz",
-      "integrity": "sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==",
-      "dev": true,
+    "node_modules/@types/sockjs": {
+      "version": "0.3.36",
+      "license": "MIT",
       "dependencies": {
-        "@types/istanbul-lib-report": "*"
+        "@types/node": "*"
       }
     },
-    "node_modules/@jest/console/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==",
+    "node_modules/@types/stack-utils": {
+      "version": "2.0.3",
+      "license": "MIT"
+    },
+    "node_modules/@types/testing-library__jest-dom": {
+      "version": "5.14.9",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "color-convert": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=8"
+        "@types/jest": "*"
       }
     },
-    "node_modules/@jest/console/node_modules/chalk": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
-      "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
-      "dev": true,
+    "node_modules/@types/tough-cookie": {
+      "version": "4.0.5",
+      "license": "MIT"
+    },
+    "node_modules/@types/warning": {
+      "version": "3.0.3",
+      "license": "MIT"
+    },
+    "node_modules/@types/ws": {
+      "version": "8.5.12",
+      "license": "MIT",
       "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
-      },
-      "engines": {
-        "node": ">=10"
+        "@types/node": "*"
       }
     },
-    "node_modules/@jest/console/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,
+    "node_modules/@types/yargs": {
+      "version": "17.0.33",
+      "license": "MIT",
       "dependencies": {
-        "color-name": "~1.1.4"
-      },
-      "engines": {
-        "node": ">=7.0.0"
+        "@types/yargs-parser": "*"
       }
     },
-    "node_modules/@jest/console/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/@types/yargs-parser": {
+      "version": "21.0.3",
+      "license": "MIT"
     },
-    "node_modules/@jest/console/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,
+    "node_modules/@typescript-eslint/eslint-plugin": {
+      "version": "5.62.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.62.0.tgz",
+      "integrity": "sha512-TiZzBSJja/LbhNPvk6yc0JrX9XqhQ0hdh6M2svYfsHGejaKFIAGd9MQ+ERIMzLGlN/kZoYIgdxFV0PuljTKXag==",
+      "dependencies": {
+        "@eslint-community/regexpp": "^4.4.0",
+        "@typescript-eslint/scope-manager": "5.62.0",
+        "@typescript-eslint/type-utils": "5.62.0",
+        "@typescript-eslint/utils": "5.62.0",
+        "debug": "^4.3.4",
+        "graphemer": "^1.4.0",
+        "ignore": "^5.2.0",
+        "natural-compare-lite": "^1.4.0",
+        "semver": "^7.3.7",
+        "tsutils": "^3.21.0"
+      },
       "engines": {
-        "node": ">=8"
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "@typescript-eslint/parser": "^5.0.0",
+        "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@jest/console/node_modules/slash": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
-      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
-      "dev": true,
+    "node_modules/@typescript-eslint/eslint-plugin/node_modules/semver": {
+      "version": "7.6.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
+      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
       "engines": {
-        "node": ">=8"
+        "node": ">=10"
       }
     },
-    "node_modules/@jest/console/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,
+    "node_modules/@typescript-eslint/parser": {
+      "version": "5.62.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.62.0.tgz",
+      "integrity": "sha512-VlJEV0fOQ7BExOsHYAGrgbEiZoi8D+Bl2+f6V2RrXerRSylnp+ZBHmPvaIa8cz0Ajx7WO7Z5RqfgYg7ED1nRhA==",
       "dependencies": {
-        "has-flag": "^4.0.0"
+        "@typescript-eslint/scope-manager": "5.62.0",
+        "@typescript-eslint/types": "5.62.0",
+        "@typescript-eslint/typescript-estree": "5.62.0",
+        "debug": "^4.3.4"
       },
       "engines": {
-        "node": ">=8"
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@jest/core": {
-      "version": "26.6.3",
-      "resolved": "https://registry.npmjs.org/@jest/core/-/core-26.6.3.tgz",
-      "integrity": "sha512-xvV1kKbhfUqFVuZ8Cyo+JPpipAHHAV3kcDBftiduK8EICXmTFddryy3P7NfZt8Pv37rA9nEJBKCCkglCPt/Xjw==",
-      "dev": true,
+    "node_modules/@typescript-eslint/scope-manager": {
+      "version": "5.62.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.62.0.tgz",
+      "integrity": "sha512-VXuvVvZeQCQb5Zgf4HAxc04q5j+WrNAtNh9OwCsCgpKqESMTu3tF/jhZ3xG6T4NZwWl65Bg8KuS2uEvhSfLl0w==",
       "dependencies": {
-        "@jest/console": "^26.6.2",
-        "@jest/reporters": "^26.6.2",
-        "@jest/test-result": "^26.6.2",
-        "@jest/transform": "^26.6.2",
-        "@jest/types": "^26.6.2",
-        "@types/node": "*",
-        "ansi-escapes": "^4.2.1",
-        "chalk": "^4.0.0",
-        "exit": "^0.1.2",
-        "graceful-fs": "^4.2.4",
-        "jest-changed-files": "^26.6.2",
-        "jest-config": "^26.6.3",
-        "jest-haste-map": "^26.6.2",
-        "jest-message-util": "^26.6.2",
-        "jest-regex-util": "^26.0.0",
-        "jest-resolve": "^26.6.2",
-        "jest-resolve-dependencies": "^26.6.3",
-        "jest-runner": "^26.6.3",
-        "jest-runtime": "^26.6.3",
-        "jest-snapshot": "^26.6.2",
-        "jest-util": "^26.6.2",
-        "jest-validate": "^26.6.2",
-        "jest-watcher": "^26.6.2",
-        "micromatch": "^4.0.2",
-        "p-each-series": "^2.1.0",
-        "rimraf": "^3.0.0",
-        "slash": "^3.0.0",
-        "strip-ansi": "^6.0.0"
+        "@typescript-eslint/types": "5.62.0",
+        "@typescript-eslint/visitor-keys": "5.62.0"
       },
       "engines": {
-        "node": ">= 10.14.2"
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
       }
     },
-    "node_modules/@jest/core/node_modules/@jest/types": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
-      "integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
-      "dev": true,
+    "node_modules/@typescript-eslint/type-utils": {
+      "version": "5.62.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.62.0.tgz",
+      "integrity": "sha512-xsSQreu+VnfbqQpW5vnCJdq1Z3Q0U31qiWmRhr98ONQmcp/yhiPJFPq8MXiJVLiksmOKSjIldZzkebzHuCGzew==",
       "dependencies": {
-        "@types/istanbul-lib-coverage": "^2.0.0",
-        "@types/istanbul-reports": "^3.0.0",
-        "@types/node": "*",
-        "@types/yargs": "^15.0.0",
-        "chalk": "^4.0.0"
+        "@typescript-eslint/typescript-estree": "5.62.0",
+        "@typescript-eslint/utils": "5.62.0",
+        "debug": "^4.3.4",
+        "tsutils": "^3.21.0"
       },
       "engines": {
-        "node": ">= 10.14.2"
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "*"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@jest/core/node_modules/@types/istanbul-reports": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz",
-      "integrity": "sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==",
-      "dev": true,
-      "dependencies": {
-        "@types/istanbul-lib-report": "*"
+    "node_modules/@typescript-eslint/types": {
+      "version": "5.62.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.62.0.tgz",
+      "integrity": "sha512-87NVngcbVXUahrRTqIK27gD2t5Cu1yuCXxbLcFtCzZGlfyVWWh8mLHkoxzjsB6DDNnvdL+fW8MiwPEJyGJQDgQ==",
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
       }
     },
-    "node_modules/@jest/core/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,
+    "node_modules/@typescript-eslint/typescript-estree": {
+      "version": "5.62.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.62.0.tgz",
+      "integrity": "sha512-CmcQ6uY7b9y694lKdRB8FEel7JbU/40iSAPomu++SjLMntB+2Leay2LO6i8VnJk58MtE9/nQSFIH6jpyRWyYzA==",
       "dependencies": {
-        "color-convert": "^2.0.1"
+        "@typescript-eslint/types": "5.62.0",
+        "@typescript-eslint/visitor-keys": "5.62.0",
+        "debug": "^4.3.4",
+        "globby": "^11.1.0",
+        "is-glob": "^4.0.3",
+        "semver": "^7.3.7",
+        "tsutils": "^3.21.0"
       },
       "engines": {
-        "node": ">=8"
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@jest/core/node_modules/braces": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-      "dev": true,
-      "dependencies": {
-        "fill-range": "^7.0.1"
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/semver": {
+      "version": "7.6.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
+      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
+      "bin": {
+        "semver": "bin/semver.js"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">=10"
       }
     },
-    "node_modules/@jest/core/node_modules/chalk": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
-      "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
-      "dev": true,
+    "node_modules/@typescript-eslint/utils": {
+      "version": "5.62.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.62.0.tgz",
+      "integrity": "sha512-n8oxjeb5aIbPFEtmQxQYOLI0i9n5ySBEY/ZEHHZqKQSFnxio1rv6dthascc9dLuwrL0RC5mPCxB7vnAVGAYWAQ==",
       "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
+        "@eslint-community/eslint-utils": "^4.2.0",
+        "@types/json-schema": "^7.0.9",
+        "@types/semver": "^7.3.12",
+        "@typescript-eslint/scope-manager": "5.62.0",
+        "@typescript-eslint/types": "5.62.0",
+        "@typescript-eslint/typescript-estree": "5.62.0",
+        "eslint-scope": "^5.1.1",
+        "semver": "^7.3.7"
       },
       "engines": {
-        "node": ">=10"
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
     },
-    "node_modules/@jest/core/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"
+    "node_modules/@typescript-eslint/utils/node_modules/semver": {
+      "version": "7.6.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
+      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
+      "bin": {
+        "semver": "bin/semver.js"
       },
       "engines": {
-        "node": ">=7.0.0"
+        "node": ">=10"
       }
     },
-    "node_modules/@jest/core/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/@jest/core/node_modules/fill-range": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-      "dev": true,
+    "node_modules/@typescript-eslint/visitor-keys": {
+      "version": "5.62.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.62.0.tgz",
+      "integrity": "sha512-07ny+LHRzQXepkGg6w0mFY41fVUNBrL2Roj/++7V1txKugfjm/Ci/qSND03r2RhlJhJYMcTn9AhhSSqQp0Ysyw==",
       "dependencies": {
-        "to-regex-range": "^5.0.1"
+        "@typescript-eslint/types": "5.62.0",
+        "eslint-visitor-keys": "^3.3.0"
       },
       "engines": {
-        "node": ">=8"
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
       }
     },
-    "node_modules/@jest/core/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,
+    "node_modules/@typescript-eslint/visitor-keys/node_modules/eslint-visitor-keys": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
       "engines": {
-        "node": ">=8"
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
       }
     },
-    "node_modules/@jest/core/node_modules/is-number": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.12.0"
-      }
+    "node_modules/@ungap/structured-clone": {
+      "version": "1.2.0",
+      "license": "ISC",
+      "peer": true
     },
-    "node_modules/@jest/core/node_modules/micromatch": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz",
-      "integrity": "sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==",
-      "dev": true,
+    "node_modules/@webassemblyjs/ast": {
+      "version": "1.12.1",
+      "license": "MIT",
       "dependencies": {
-        "braces": "^3.0.1",
-        "picomatch": "^2.2.3"
-      },
-      "engines": {
-        "node": ">=8.6"
+        "@webassemblyjs/helper-numbers": "1.11.6",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.6"
       }
     },
-    "node_modules/@jest/core/node_modules/rimraf": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
-      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
-      "dev": true,
-      "dependencies": {
-        "glob": "^7.1.3"
-      },
-      "bin": {
-        "rimraf": "bin.js"
-      }
+    "node_modules/@webassemblyjs/floating-point-hex-parser": {
+      "version": "1.11.6",
+      "license": "MIT"
     },
-    "node_modules/@jest/core/node_modules/slash": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
-      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
+    "node_modules/@webassemblyjs/helper-api-error": {
+      "version": "1.11.6",
+      "license": "MIT"
     },
-    "node_modules/@jest/core/node_modules/strip-ansi": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
-      "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
-      "dev": true,
+    "node_modules/@webassemblyjs/helper-buffer": {
+      "version": "1.12.1",
+      "license": "MIT"
+    },
+    "node_modules/@webassemblyjs/helper-numbers": {
+      "version": "1.11.6",
+      "license": "MIT",
       "dependencies": {
-        "ansi-regex": "^5.0.0"
-      },
-      "engines": {
-        "node": ">=8"
+        "@webassemblyjs/floating-point-hex-parser": "1.11.6",
+        "@webassemblyjs/helper-api-error": "1.11.6",
+        "@xtuc/long": "4.2.2"
       }
     },
-    "node_modules/@jest/core/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,
+    "node_modules/@webassemblyjs/helper-wasm-bytecode": {
+      "version": "1.11.6",
+      "license": "MIT"
+    },
+    "node_modules/@webassemblyjs/helper-wasm-section": {
+      "version": "1.12.1",
+      "license": "MIT",
       "dependencies": {
-        "has-flag": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
+        "@webassemblyjs/ast": "1.12.1",
+        "@webassemblyjs/helper-buffer": "1.12.1",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.6",
+        "@webassemblyjs/wasm-gen": "1.12.1"
       }
     },
-    "node_modules/@jest/core/node_modules/to-regex-range": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dev": true,
+    "node_modules/@webassemblyjs/ieee754": {
+      "version": "1.11.6",
+      "license": "MIT",
       "dependencies": {
-        "is-number": "^7.0.0"
-      },
-      "engines": {
-        "node": ">=8.0"
+        "@xtuc/ieee754": "^1.2.0"
       }
     },
-    "node_modules/@jest/environment": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/@jest/environment/-/environment-26.6.2.tgz",
-      "integrity": "sha512-nFy+fHl28zUrRsCeMB61VDThV1pVTtlEokBRgqPrcT1JNq4yRNIyTHfyht6PqtUvY9IsuLGTrbG8kPXjSZIZwA==",
-      "dev": true,
+    "node_modules/@webassemblyjs/leb128": {
+      "version": "1.11.6",
+      "license": "Apache-2.0",
       "dependencies": {
-        "@jest/fake-timers": "^26.6.2",
-        "@jest/types": "^26.6.2",
-        "@types/node": "*",
-        "jest-mock": "^26.6.2"
-      },
-      "engines": {
-        "node": ">= 10.14.2"
+        "@xtuc/long": "4.2.2"
       }
     },
-    "node_modules/@jest/environment/node_modules/@jest/types": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
-      "integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
-      "dev": true,
+    "node_modules/@webassemblyjs/utf8": {
+      "version": "1.11.6",
+      "license": "MIT"
+    },
+    "node_modules/@webassemblyjs/wasm-edit": {
+      "version": "1.12.1",
+      "license": "MIT",
       "dependencies": {
-        "@types/istanbul-lib-coverage": "^2.0.0",
-        "@types/istanbul-reports": "^3.0.0",
-        "@types/node": "*",
-        "@types/yargs": "^15.0.0",
-        "chalk": "^4.0.0"
-      },
-      "engines": {
-        "node": ">= 10.14.2"
+        "@webassemblyjs/ast": "1.12.1",
+        "@webassemblyjs/helper-buffer": "1.12.1",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.6",
+        "@webassemblyjs/helper-wasm-section": "1.12.1",
+        "@webassemblyjs/wasm-gen": "1.12.1",
+        "@webassemblyjs/wasm-opt": "1.12.1",
+        "@webassemblyjs/wasm-parser": "1.12.1",
+        "@webassemblyjs/wast-printer": "1.12.1"
       }
     },
-    "node_modules/@jest/environment/node_modules/@types/istanbul-reports": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz",
-      "integrity": "sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==",
-      "dev": true,
+    "node_modules/@webassemblyjs/wasm-gen": {
+      "version": "1.12.1",
+      "license": "MIT",
       "dependencies": {
-        "@types/istanbul-lib-report": "*"
+        "@webassemblyjs/ast": "1.12.1",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.6",
+        "@webassemblyjs/ieee754": "1.11.6",
+        "@webassemblyjs/leb128": "1.11.6",
+        "@webassemblyjs/utf8": "1.11.6"
       }
     },
-    "node_modules/@jest/environment/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,
+    "node_modules/@webassemblyjs/wasm-opt": {
+      "version": "1.12.1",
+      "license": "MIT",
       "dependencies": {
-        "color-convert": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=8"
+        "@webassemblyjs/ast": "1.12.1",
+        "@webassemblyjs/helper-buffer": "1.12.1",
+        "@webassemblyjs/wasm-gen": "1.12.1",
+        "@webassemblyjs/wasm-parser": "1.12.1"
       }
     },
-    "node_modules/@jest/environment/node_modules/chalk": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
-      "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
-      "dev": true,
+    "node_modules/@webassemblyjs/wasm-parser": {
+      "version": "1.12.1",
+      "license": "MIT",
       "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
-      },
-      "engines": {
-        "node": ">=10"
+        "@webassemblyjs/ast": "1.12.1",
+        "@webassemblyjs/helper-api-error": "1.11.6",
+        "@webassemblyjs/helper-wasm-bytecode": "1.11.6",
+        "@webassemblyjs/ieee754": "1.11.6",
+        "@webassemblyjs/leb128": "1.11.6",
+        "@webassemblyjs/utf8": "1.11.6"
       }
     },
-    "node_modules/@jest/environment/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,
+    "node_modules/@webassemblyjs/wast-printer": {
+      "version": "1.12.1",
+      "license": "MIT",
       "dependencies": {
-        "color-name": "~1.1.4"
-      },
-      "engines": {
-        "node": ">=7.0.0"
+        "@webassemblyjs/ast": "1.12.1",
+        "@xtuc/long": "4.2.2"
       }
     },
-    "node_modules/@jest/environment/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/@jest/environment/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,
+    "node_modules/@webpack-cli/configtest": {
+      "version": "2.1.1",
+      "license": "MIT",
       "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/@jest/environment/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"
+        "node": ">=14.15.0"
       },
-      "engines": {
-        "node": ">=8"
+      "peerDependencies": {
+        "webpack": "5.x.x",
+        "webpack-cli": "5.x.x"
       }
     },
-    "node_modules/@jest/fake-timers": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/@jest/fake-timers/-/fake-timers-26.6.2.tgz",
-      "integrity": "sha512-14Uleatt7jdzefLPYM3KLcnUl1ZNikaKq34enpb5XG9i81JpppDb5muZvonvKyrl7ftEHkKS5L5/eB/kxJ+bvA==",
-      "dev": true,
-      "dependencies": {
-        "@jest/types": "^26.6.2",
-        "@sinonjs/fake-timers": "^6.0.1",
-        "@types/node": "*",
-        "jest-message-util": "^26.6.2",
-        "jest-mock": "^26.6.2",
-        "jest-util": "^26.6.2"
-      },
+    "node_modules/@webpack-cli/info": {
+      "version": "2.0.2",
+      "license": "MIT",
       "engines": {
-        "node": ">= 10.14.2"
+        "node": ">=14.15.0"
+      },
+      "peerDependencies": {
+        "webpack": "5.x.x",
+        "webpack-cli": "5.x.x"
       }
     },
-    "node_modules/@jest/fake-timers/node_modules/@jest/types": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
-      "integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
-      "dev": true,
-      "dependencies": {
-        "@types/istanbul-lib-coverage": "^2.0.0",
-        "@types/istanbul-reports": "^3.0.0",
-        "@types/node": "*",
-        "@types/yargs": "^15.0.0",
-        "chalk": "^4.0.0"
-      },
+    "node_modules/@webpack-cli/serve": {
+      "version": "2.0.5",
+      "license": "MIT",
       "engines": {
-        "node": ">= 10.14.2"
+        "node": ">=14.15.0"
+      },
+      "peerDependencies": {
+        "webpack": "5.x.x",
+        "webpack-cli": "5.x.x"
+      },
+      "peerDependenciesMeta": {
+        "webpack-dev-server": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@jest/fake-timers/node_modules/@types/istanbul-reports": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz",
-      "integrity": "sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==",
-      "dev": true,
-      "dependencies": {
-        "@types/istanbul-lib-report": "*"
-      }
+    "node_modules/@xtuc/ieee754": {
+      "version": "1.2.0",
+      "license": "BSD-3-Clause"
     },
-    "node_modules/@jest/fake-timers/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,
+    "node_modules/@xtuc/long": {
+      "version": "4.2.2",
+      "license": "Apache-2.0"
+    },
+    "node_modules/abab": {
+      "version": "2.0.6",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/accepts": {
+      "version": "1.3.8",
+      "license": "MIT",
       "dependencies": {
-        "color-convert": "^2.0.1"
+        "mime-types": "~2.1.34",
+        "negotiator": "0.6.3"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">= 0.6"
       }
     },
-    "node_modules/@jest/fake-timers/node_modules/chalk": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
-      "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
-      "dev": true,
-      "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
+    "node_modules/acorn": {
+      "version": "8.12.1",
+      "license": "MIT",
+      "bin": {
+        "acorn": "bin/acorn"
       },
       "engines": {
-        "node": ">=10"
+        "node": ">=0.4.0"
       }
     },
-    "node_modules/@jest/fake-timers/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,
+    "node_modules/acorn-globals": {
+      "version": "7.0.1",
+      "license": "MIT",
       "dependencies": {
-        "color-name": "~1.1.4"
-      },
-      "engines": {
-        "node": ">=7.0.0"
+        "acorn": "^8.1.0",
+        "acorn-walk": "^8.0.2"
       }
     },
-    "node_modules/@jest/fake-timers/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/acorn-import-attributes": {
+      "version": "1.9.5",
+      "license": "MIT",
+      "peerDependencies": {
+        "acorn": "^8"
+      }
     },
-    "node_modules/@jest/fake-timers/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/acorn-jsx": {
+      "version": "5.3.2",
+      "license": "MIT",
+      "peerDependencies": {
+        "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
     },
-    "node_modules/@jest/fake-timers/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,
+    "node_modules/acorn-walk": {
+      "version": "8.3.3",
+      "license": "MIT",
       "dependencies": {
-        "has-flag": "^4.0.0"
+        "acorn": "^8.11.0"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">=0.4.0"
       }
     },
-    "node_modules/@jest/globals": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/@jest/globals/-/globals-26.6.2.tgz",
-      "integrity": "sha512-85Ltnm7HlB/KesBUuALwQ68YTU72w9H2xW9FjZ1eL1U3lhtefjjl5c2MiUbpXt/i6LaPRvoOFJ22yCBSfQ0JIA==",
-      "dev": true,
-      "dependencies": {
-        "@jest/environment": "^26.6.2",
-        "@jest/types": "^26.6.2",
-        "expect": "^26.6.2"
-      },
+    "node_modules/address": {
+      "version": "1.2.2",
+      "license": "MIT",
       "engines": {
-        "node": ">= 10.14.2"
+        "node": ">= 10.0.0"
       }
     },
-    "node_modules/@jest/globals/node_modules/@jest/types": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
-      "integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
-      "dev": true,
+    "node_modules/adjust-sourcemap-loader": {
+      "version": "4.0.0",
+      "license": "MIT",
       "dependencies": {
-        "@types/istanbul-lib-coverage": "^2.0.0",
-        "@types/istanbul-reports": "^3.0.0",
-        "@types/node": "*",
-        "@types/yargs": "^15.0.0",
-        "chalk": "^4.0.0"
+        "loader-utils": "^2.0.0",
+        "regex-parser": "^2.2.11"
       },
       "engines": {
-        "node": ">= 10.14.2"
+        "node": ">=8.9"
       }
     },
-    "node_modules/@jest/globals/node_modules/@types/istanbul-reports": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz",
-      "integrity": "sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==",
-      "dev": true,
+    "node_modules/agent-base": {
+      "version": "6.0.2",
+      "license": "MIT",
       "dependencies": {
-        "@types/istanbul-lib-report": "*"
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6.0.0"
       }
     },
-    "node_modules/@jest/globals/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,
+    "node_modules/ajv": {
+      "version": "6.12.6",
+      "license": "MIT",
       "dependencies": {
-        "color-convert": "^2.0.1"
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
       },
-      "engines": {
-        "node": ">=8"
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
       }
     },
-    "node_modules/@jest/globals/node_modules/chalk": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
-      "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
-      "dev": true,
+    "node_modules/ajv-formats": {
+      "version": "2.1.1",
+      "license": "MIT",
       "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
+        "ajv": "^8.0.0"
       },
-      "engines": {
-        "node": ">=10"
+      "peerDependencies": {
+        "ajv": "^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "ajv": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@jest/globals/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,
+    "node_modules/ajv-formats/node_modules/ajv": {
+      "version": "8.17.1",
+      "license": "MIT",
       "dependencies": {
-        "color-name": "~1.1.4"
+        "fast-deep-equal": "^3.1.3",
+        "fast-uri": "^3.0.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2"
       },
-      "engines": {
-        "node": ">=7.0.0"
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
       }
     },
-    "node_modules/@jest/globals/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/ajv-formats/node_modules/json-schema-traverse": {
+      "version": "1.0.0",
+      "license": "MIT"
     },
-    "node_modules/@jest/globals/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/ajv-keywords": {
+      "version": "3.5.2",
+      "license": "MIT",
+      "peerDependencies": {
+        "ajv": "^6.9.1"
       }
     },
-    "node_modules/@jest/globals/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,
+    "node_modules/ansi-escapes": {
+      "version": "4.3.2",
+      "license": "MIT",
       "dependencies": {
-        "has-flag": "^4.0.0"
+        "type-fest": "^0.21.3"
       },
       "engines": {
         "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/@jest/reporters": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/@jest/reporters/-/reporters-26.6.2.tgz",
-      "integrity": "sha512-h2bW53APG4HvkOnVMo8q3QXa6pcaNt1HkwVsOPMBV6LD/q9oSpxNSYZQYkAnjdMjrJ86UuYeLo+aEZClV6opnw==",
-      "dev": true,
-      "dependencies": {
-        "@bcoe/v8-coverage": "^0.2.3",
-        "@jest/console": "^26.6.2",
-        "@jest/test-result": "^26.6.2",
-        "@jest/transform": "^26.6.2",
-        "@jest/types": "^26.6.2",
-        "chalk": "^4.0.0",
-        "collect-v8-coverage": "^1.0.0",
-        "exit": "^0.1.2",
-        "glob": "^7.1.2",
-        "graceful-fs": "^4.2.4",
-        "istanbul-lib-coverage": "^3.0.0",
-        "istanbul-lib-instrument": "^4.0.3",
-        "istanbul-lib-report": "^3.0.0",
-        "istanbul-lib-source-maps": "^4.0.0",
-        "istanbul-reports": "^3.0.2",
-        "jest-haste-map": "^26.6.2",
-        "jest-resolve": "^26.6.2",
-        "jest-util": "^26.6.2",
-        "jest-worker": "^26.6.2",
-        "slash": "^3.0.0",
-        "source-map": "^0.6.0",
-        "string-length": "^4.0.1",
-        "terminal-link": "^2.0.0",
-        "v8-to-istanbul": "^7.0.0"
-      },
+    "node_modules/ansi-html": {
+      "version": "0.0.9",
+      "engines": [
+        "node >= 0.8.0"
+      ],
+      "license": "Apache-2.0",
+      "bin": {
+        "ansi-html": "bin/ansi-html"
+      }
+    },
+    "node_modules/ansi-html-community": {
+      "version": "0.0.8",
+      "engines": [
+        "node >= 0.8.0"
+      ],
+      "license": "Apache-2.0",
+      "bin": {
+        "ansi-html": "bin/ansi-html"
+      }
+    },
+    "node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "license": "MIT",
       "engines": {
-        "node": ">= 10.14.2"
-      },
-      "optionalDependencies": {
-        "node-notifier": "^8.0.0"
+        "node": ">=8"
       }
     },
-    "node_modules/@jest/reporters/node_modules/@jest/types": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
-      "integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
-      "dev": true,
+    "node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "license": "MIT",
       "dependencies": {
-        "@types/istanbul-lib-coverage": "^2.0.0",
-        "@types/istanbul-reports": "^3.0.0",
-        "@types/node": "*",
-        "@types/yargs": "^15.0.0",
-        "chalk": "^4.0.0"
+        "color-convert": "^2.0.1"
       },
       "engines": {
-        "node": ">= 10.14.2"
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/@jest/reporters/node_modules/@types/istanbul-reports": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz",
-      "integrity": "sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==",
-      "dev": true,
-      "dependencies": {
-        "@types/istanbul-lib-report": "*"
+    "node_modules/ansis": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/ansis/-/ansis-1.5.2.tgz",
+      "integrity": "sha512-T3vUABrcgSj/HXv27P+A/JxGk5b/ydx0JjN3lgjBTC2iZUFxQGjh43zCzLSbU4C1QTgmx9oaPeWNJFM+auI8qw==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12.13"
+      },
+      "funding": {
+        "type": "patreon",
+        "url": "https://patreon.com/biodiscus"
       }
     },
-    "node_modules/@jest/reporters/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,
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "license": "ISC",
       "dependencies": {
-        "color-convert": "^2.0.1"
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">= 8"
       }
     },
-    "node_modules/@jest/reporters/node_modules/chalk": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
-      "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
-      "dev": true,
+    "node_modules/argparse": {
+      "version": "1.0.10",
+      "license": "MIT",
       "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
+        "sprintf-js": "~1.0.2"
+      }
+    },
+    "node_modules/aria-hidden": {
+      "version": "1.2.4",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
       },
       "engines": {
         "node": ">=10"
       }
     },
-    "node_modules/@jest/reporters/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,
+    "node_modules/aria-query": {
+      "version": "5.3.0",
+      "license": "Apache-2.0",
       "dependencies": {
-        "color-name": "~1.1.4"
+        "dequal": "^2.0.3"
+      }
+    },
+    "node_modules/array-buffer-byte-length": {
+      "version": "1.0.1",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.5",
+        "is-array-buffer": "^3.0.4"
       },
       "engines": {
-        "node": ">=7.0.0"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/@jest/reporters/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/array-flatten": {
+      "version": "1.1.1",
+      "license": "MIT"
     },
-    "node_modules/@jest/reporters/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,
+    "node_modules/array-includes": {
+      "version": "3.1.8",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.4",
+        "is-string": "^1.0.7"
+      },
       "engines": {
-        "node": ">=8"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/@jest/reporters/node_modules/slash": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
-      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
-      "dev": true,
+    "node_modules/array-union": {
+      "version": "2.1.0",
+      "license": "MIT",
       "engines": {
         "node": ">=8"
       }
     },
-    "node_modules/@jest/reporters/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"
-      },
+    "node_modules/array-uniq": {
+      "version": "1.0.3",
+      "license": "MIT",
       "engines": {
-        "node": ">=8"
+        "node": ">=0.10.0"
       }
     },
-    "node_modules/@jest/source-map": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/@jest/source-map/-/source-map-26.6.2.tgz",
-      "integrity": "sha512-YwYcCwAnNmOVsZ8mr3GfnzdXDAl4LaenZP5z+G0c8bzC9/dugL8zRmxZzdoTl4IaS3CryS1uWnROLPFmb6lVvA==",
-      "dev": true,
+    "node_modules/array.prototype.findlastindex": {
+      "version": "1.2.5",
+      "license": "MIT",
+      "peer": true,
       "dependencies": {
-        "callsites": "^3.0.0",
-        "graceful-fs": "^4.2.4",
-        "source-map": "^0.6.0"
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "es-shim-unscopables": "^1.0.2"
       },
       "engines": {
-        "node": ">= 10.14.2"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/@jest/test-result": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/@jest/test-result/-/test-result-26.6.2.tgz",
-      "integrity": "sha512-5O7H5c/7YlojphYNrK02LlDIV2GNPYisKwHm2QTKjNZeEzezCbwYs9swJySv2UfPMyZ0VdsmMv7jIlD/IKYQpQ==",
-      "dev": true,
+    "node_modules/array.prototype.flat": {
+      "version": "1.3.2",
+      "license": "MIT",
       "dependencies": {
-        "@jest/console": "^26.6.2",
-        "@jest/types": "^26.6.2",
-        "@types/istanbul-lib-coverage": "^2.0.0",
-        "collect-v8-coverage": "^1.0.0"
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1",
+        "es-shim-unscopables": "^1.0.0"
       },
       "engines": {
-        "node": ">= 10.14.2"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/@jest/test-result/node_modules/@jest/types": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
-      "integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
-      "dev": true,
+    "node_modules/array.prototype.flatmap": {
+      "version": "1.3.2",
+      "license": "MIT",
       "dependencies": {
-        "@types/istanbul-lib-coverage": "^2.0.0",
-        "@types/istanbul-reports": "^3.0.0",
-        "@types/node": "*",
-        "@types/yargs": "^15.0.0",
-        "chalk": "^4.0.0"
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1",
+        "es-shim-unscopables": "^1.0.0"
       },
       "engines": {
-        "node": ">= 10.14.2"
-      }
-    },
-    "node_modules/@jest/test-result/node_modules/@types/istanbul-reports": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz",
-      "integrity": "sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==",
-      "dev": true,
-      "dependencies": {
-        "@types/istanbul-lib-report": "*"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/@jest/test-result/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,
+    "node_modules/array.prototype.tosorted": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/array.prototype.tosorted/-/array.prototype.tosorted-1.1.4.tgz",
+      "integrity": "sha512-p6Fx8B7b7ZhL/gmUsAy0D15WhvDccw3mnGNbZpi3pmeJdxtWsj2jEaI4Y6oo3XiHfzuSgPwKc04MYt6KgvC/wA==",
       "dependencies": {
-        "color-convert": "^2.0.1"
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.3",
+        "es-errors": "^1.3.0",
+        "es-shim-unscopables": "^1.0.2"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">= 0.4"
       }
     },
-    "node_modules/@jest/test-result/node_modules/chalk": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
-      "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
-      "dev": true,
+    "node_modules/arraybuffer.prototype.slice": {
+      "version": "1.0.3",
+      "license": "MIT",
       "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
+        "array-buffer-byte-length": "^1.0.1",
+        "call-bind": "^1.0.5",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.22.3",
+        "es-errors": "^1.2.1",
+        "get-intrinsic": "^1.2.3",
+        "is-array-buffer": "^3.0.4",
+        "is-shared-array-buffer": "^1.0.2"
       },
       "engines": {
-        "node": ">=10"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/@jest/test-result/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==",
+    "node_modules/arrify": {
+      "version": "1.0.1",
       "dev": true,
-      "dependencies": {
-        "color-name": "~1.1.4"
-      },
+      "license": "MIT",
       "engines": {
-        "node": ">=7.0.0"
+        "node": ">=0.10.0"
       }
     },
-    "node_modules/@jest/test-result/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/assert-ok": {
+      "version": "1.0.0",
+      "license": "MIT"
     },
-    "node_modules/@jest/test-result/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==",
+    "node_modules/ast-types-flow": {
+      "version": "0.0.7",
+      "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.7.tgz",
+      "integrity": "sha512-eBvWn1lvIApYMhzQMsu9ciLfkBY499mFZlNqG+/9WR7PVlroQw0vG30cOQQbaKz3sCEc44TAOu2ykzqXSNnwag=="
+    },
+    "node_modules/astral-regex": {
+      "version": "2.0.0",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=8"
       }
     },
-    "node_modules/@jest/test-result/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"
-      },
+    "node_modules/async": {
+      "version": "3.2.5",
+      "license": "MIT"
+    },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "license": "MIT"
+    },
+    "node_modules/at-least-node": {
+      "version": "1.0.0",
+      "license": "ISC",
       "engines": {
-        "node": ">=8"
+        "node": ">= 4.0.0"
       }
     },
-    "node_modules/@jest/test-sequencer": {
-      "version": "26.6.3",
-      "resolved": "https://registry.npmjs.org/@jest/test-sequencer/-/test-sequencer-26.6.3.tgz",
-      "integrity": "sha512-YHlVIjP5nfEyjlrSr8t/YdNfU/1XEt7c5b4OxcXCjyRhjzLYu/rO69/WHPuYcbCWkz8kAeZVZp2N2+IOLLEPGw==",
-      "dev": true,
-      "dependencies": {
-        "@jest/test-result": "^26.6.2",
-        "graceful-fs": "^4.2.4",
-        "jest-haste-map": "^26.6.2",
-        "jest-runner": "^26.6.3",
-        "jest-runtime": "^26.6.3"
-      },
+    "node_modules/attr-accept": {
+      "version": "2.2.2",
+      "license": "MIT",
       "engines": {
-        "node": ">= 10.14.2"
+        "node": ">=4"
       }
     },
-    "node_modules/@jest/transform": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/@jest/transform/-/transform-26.6.2.tgz",
-      "integrity": "sha512-E9JjhUgNzvuQ+vVAL21vlyfy12gP0GhazGgJC4h6qUt1jSdUXGWJ1wfu/X7Sd8etSgxV4ovT1pb9v5D6QW4XgA==",
-      "dev": true,
+    "node_modules/autoprefixer": {
+      "version": "10.4.20",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.20.tgz",
+      "integrity": "sha512-XY25y5xSv/wEoqzDyXXME4AFfkZI0P23z6Fs3YgymDnKJkCGOnkL0iTxCa85UTqaSgfcqyf3UA6+c7wUvx/16g==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
       "dependencies": {
-        "@babel/core": "^7.1.0",
-        "@jest/types": "^26.6.2",
-        "babel-plugin-istanbul": "^6.0.0",
-        "chalk": "^4.0.0",
-        "convert-source-map": "^1.4.0",
-        "fast-json-stable-stringify": "^2.0.0",
-        "graceful-fs": "^4.2.4",
-        "jest-haste-map": "^26.6.2",
-        "jest-regex-util": "^26.0.0",
-        "jest-util": "^26.6.2",
-        "micromatch": "^4.0.2",
-        "pirates": "^4.0.1",
-        "slash": "^3.0.0",
-        "source-map": "^0.6.1",
-        "write-file-atomic": "^3.0.0"
+        "browserslist": "^4.23.3",
+        "caniuse-lite": "^1.0.30001646",
+        "fraction.js": "^4.3.7",
+        "normalize-range": "^0.1.2",
+        "picocolors": "^1.0.1",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "bin": {
+        "autoprefixer": "bin/autoprefixer"
       },
       "engines": {
-        "node": ">= 10.14.2"
+        "node": "^10 || ^12 || >=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
       }
     },
-    "node_modules/@jest/transform/node_modules/@jest/types": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
-      "integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
-      "dev": true,
+    "node_modules/available-typed-arrays": {
+      "version": "1.0.7",
+      "license": "MIT",
       "dependencies": {
-        "@types/istanbul-lib-coverage": "^2.0.0",
-        "@types/istanbul-reports": "^3.0.0",
-        "@types/node": "*",
-        "@types/yargs": "^15.0.0",
-        "chalk": "^4.0.0"
+        "possible-typed-array-names": "^1.0.0"
       },
       "engines": {
-        "node": ">= 10.14.2"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/@jest/transform/node_modules/@types/istanbul-reports": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz",
-      "integrity": "sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==",
-      "dev": true,
+    "node_modules/axe-core": {
+      "version": "4.10.2",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.10.2.tgz",
+      "integrity": "sha512-RE3mdQ7P3FRSe7eqCWoeQ/Z9QXrtniSjp1wUjt5nRC3WIpz5rSCve6o3fsZ2aCpJtrZjSZgjwXAoTO5k4tEI0w==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/axios": {
+      "version": "0.28.1",
+      "license": "MIT",
+      "peer": true,
       "dependencies": {
-        "@types/istanbul-lib-report": "*"
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
       }
     },
-    "node_modules/@jest/transform/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,
+    "node_modules/axios-mock-adapter": {
+      "version": "1.22.0",
+      "license": "MIT",
       "dependencies": {
-        "color-convert": "^2.0.1"
+        "fast-deep-equal": "^3.1.3",
+        "is-buffer": "^2.0.5"
       },
+      "peerDependencies": {
+        "axios": ">= 0.17.0"
+      }
+    },
+    "node_modules/axobject-query": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.4.tgz",
+      "integrity": "sha512-aPTElBrbifBU1krmZxGZOlBkslORe7Ll7+BDnI50Wy4LgOt69luMgevkDfTq1O/ZgprooPCtWpjCwKSZw/iZ4A==",
       "engines": {
-        "node": ">=8"
+        "node": ">= 0.4"
       }
     },
-    "node_modules/@jest/transform/node_modules/braces": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-      "dev": true,
+    "node_modules/b4a": {
+      "version": "1.6.6",
+      "license": "Apache-2.0"
+    },
+    "node_modules/babel-jest": {
+      "version": "29.6.1",
+      "license": "MIT",
       "dependencies": {
-        "fill-range": "^7.0.1"
+        "@jest/transform": "^29.6.1",
+        "@types/babel__core": "^7.1.14",
+        "babel-plugin-istanbul": "^6.1.1",
+        "babel-preset-jest": "^29.5.0",
+        "chalk": "^4.0.0",
+        "graceful-fs": "^4.2.9",
+        "slash": "^3.0.0"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       },
+      "peerDependencies": {
+        "@babel/core": "^7.8.0"
+      }
+    },
+    "node_modules/babel-jest/node_modules/slash": {
+      "version": "3.0.0",
+      "license": "MIT",
       "engines": {
         "node": ">=8"
       }
     },
-    "node_modules/@jest/transform/node_modules/chalk": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
-      "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
-      "dev": true,
+    "node_modules/babel-loader": {
+      "version": "9.1.3",
+      "license": "MIT",
       "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
+        "find-cache-dir": "^4.0.0",
+        "schema-utils": "^4.0.0"
       },
       "engines": {
-        "node": ">=10"
+        "node": ">= 14.15.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.12.0",
+        "webpack": ">=5"
       }
     },
-    "node_modules/@jest/transform/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,
+    "node_modules/babel-plugin-formatjs": {
+      "version": "10.5.16",
+      "license": "MIT",
       "dependencies": {
-        "color-name": "~1.1.4"
-      },
-      "engines": {
-        "node": ">=7.0.0"
+        "@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.8",
+        "@formatjs/ts-transformer": "3.13.14",
+        "@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/@jest/transform/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/@jest/transform/node_modules/fill-range": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-      "dev": true,
+    "node_modules/babel-plugin-istanbul": {
+      "version": "6.1.1",
+      "license": "BSD-3-Clause",
       "dependencies": {
-        "to-regex-range": "^5.0.1"
+        "@babel/helper-plugin-utils": "^7.0.0",
+        "@istanbuljs/load-nyc-config": "^1.0.0",
+        "@istanbuljs/schema": "^0.1.2",
+        "istanbul-lib-instrument": "^5.0.4",
+        "test-exclude": "^6.0.0"
       },
       "engines": {
         "node": ">=8"
       }
     },
-    "node_modules/@jest/transform/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,
+    "node_modules/babel-plugin-jest-hoist": {
+      "version": "29.6.3",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/template": "^7.3.3",
+        "@babel/types": "^7.3.3",
+        "@types/babel__core": "^7.1.14",
+        "@types/babel__traverse": "^7.0.6"
+      },
       "engines": {
-        "node": ">=8"
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
-    "node_modules/@jest/transform/node_modules/is-number": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "dev": true,
+    "node_modules/babel-plugin-macros": {
+      "version": "3.1.0",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "cosmiconfig": "^7.0.0",
+        "resolve": "^1.19.0"
+      },
       "engines": {
-        "node": ">=0.12.0"
+        "node": ">=10",
+        "npm": ">=6"
       }
     },
-    "node_modules/@jest/transform/node_modules/micromatch": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz",
-      "integrity": "sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==",
-      "dev": true,
+    "node_modules/babel-plugin-macros/node_modules/cosmiconfig": {
+      "version": "7.1.0",
+      "license": "MIT",
       "dependencies": {
-        "braces": "^3.0.1",
-        "picomatch": "^2.2.3"
+        "@types/parse-json": "^4.0.0",
+        "import-fresh": "^3.2.1",
+        "parse-json": "^5.0.0",
+        "path-type": "^4.0.0",
+        "yaml": "^1.10.0"
       },
       "engines": {
-        "node": ">=8.6"
+        "node": ">=10"
       }
     },
-    "node_modules/@jest/transform/node_modules/slash": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
-      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
+    "node_modules/babel-plugin-polyfill-corejs2": {
+      "version": "0.4.11",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/compat-data": "^7.22.6",
+        "@babel/helper-define-polyfill-provider": "^0.6.2",
+        "semver": "^6.3.1"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
       }
     },
-    "node_modules/@jest/transform/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,
+    "node_modules/babel-plugin-polyfill-corejs3": {
+      "version": "0.10.6",
+      "license": "MIT",
       "dependencies": {
-        "has-flag": "^4.0.0"
+        "@babel/helper-define-polyfill-provider": "^0.6.2",
+        "core-js-compat": "^3.38.0"
       },
-      "engines": {
-        "node": ">=8"
+      "peerDependencies": {
+        "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
       }
     },
-    "node_modules/@jest/transform/node_modules/to-regex-range": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dev": true,
+    "node_modules/babel-plugin-polyfill-regenerator": {
+      "version": "0.6.2",
+      "license": "MIT",
       "dependencies": {
-        "is-number": "^7.0.0"
+        "@babel/helper-define-polyfill-provider": "^0.6.2"
       },
-      "engines": {
-        "node": ">=8.0"
+      "peerDependencies": {
+        "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
       }
     },
-    "node_modules/@jest/types": {
-      "version": "25.5.0",
-      "resolved": "https://registry.npmjs.org/@jest/types/-/types-25.5.0.tgz",
-      "integrity": "sha512-OXD0RgQ86Tu3MazKo8bnrkDRaDXXMGUqd+kTtLtK1Zb7CRzQcaSRPPPV37SvYTdevXEBVxe0HXylEjs8ibkmCw==",
-      "dev": true,
+    "node_modules/babel-plugin-transform-imports": {
+      "version": "2.0.0",
+      "license": "ISC",
       "dependencies": {
-        "@types/istanbul-lib-coverage": "^2.0.0",
-        "@types/istanbul-reports": "^1.1.1",
-        "@types/yargs": "^15.0.0",
-        "chalk": "^3.0.0"
-      },
-      "engines": {
-        "node": ">= 8.3"
+        "@babel/types": "^7.4",
+        "is-valid-path": "^0.1.1"
       }
     },
-    "node_modules/@jest/types/node_modules/ansi-styles": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
-      "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
-      "dev": true,
+    "node_modules/babel-polyfill": {
+      "version": "6.26.0",
+      "license": "MIT",
       "dependencies": {
-        "@types/color-name": "^1.1.1",
-        "color-convert": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=8"
+        "babel-runtime": "^6.26.0",
+        "core-js": "^2.5.0",
+        "regenerator-runtime": "^0.10.5"
       }
     },
-    "node_modules/@jest/types/node_modules/chalk": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
-      "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
-      "dev": true,
+    "node_modules/babel-polyfill/node_modules/core-js": {
+      "version": "2.6.12",
+      "hasInstallScript": true,
+      "license": "MIT"
+    },
+    "node_modules/babel-polyfill/node_modules/regenerator-runtime": {
+      "version": "0.10.5",
+      "license": "MIT"
+    },
+    "node_modules/babel-preset-current-node-syntax": {
+      "version": "1.0.1",
+      "license": "MIT",
       "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
+        "@babel/plugin-syntax-async-generators": "^7.8.4",
+        "@babel/plugin-syntax-bigint": "^7.8.3",
+        "@babel/plugin-syntax-class-properties": "^7.8.3",
+        "@babel/plugin-syntax-import-meta": "^7.8.3",
+        "@babel/plugin-syntax-json-strings": "^7.8.3",
+        "@babel/plugin-syntax-logical-assignment-operators": "^7.8.3",
+        "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3",
+        "@babel/plugin-syntax-numeric-separator": "^7.8.3",
+        "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
+        "@babel/plugin-syntax-optional-catch-binding": "^7.8.3",
+        "@babel/plugin-syntax-optional-chaining": "^7.8.3",
+        "@babel/plugin-syntax-top-level-await": "^7.8.3"
       },
-      "engines": {
-        "node": ">=8"
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
       }
     },
-    "node_modules/@jest/types/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,
+    "node_modules/babel-preset-jest": {
+      "version": "29.6.3",
+      "license": "MIT",
       "dependencies": {
-        "color-name": "~1.1.4"
+        "babel-plugin-jest-hoist": "^29.6.3",
+        "babel-preset-current-node-syntax": "^1.0.0"
       },
       "engines": {
-        "node": ">=7.0.0"
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
       }
     },
-    "node_modules/@jest/types/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/@jest/types/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-runtime": {
+      "version": "6.26.0",
+      "license": "MIT",
+      "dependencies": {
+        "core-js": "^2.4.0",
+        "regenerator-runtime": "^0.11.0"
       }
     },
-    "node_modules/@jest/types/node_modules/supports-color": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz",
-      "integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==",
-      "dev": true,
+    "node_modules/babel-runtime/node_modules/core-js": {
+      "version": "2.6.12",
+      "hasInstallScript": true,
+      "license": "MIT"
+    },
+    "node_modules/babel-runtime/node_modules/regenerator-runtime": {
+      "version": "0.11.1",
+      "license": "MIT"
+    },
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "license": "MIT"
+    },
+    "node_modules/bare-events": {
+      "version": "2.4.2",
+      "license": "Apache-2.0",
+      "optional": true
+    },
+    "node_modules/bare-fs": {
+      "version": "2.3.1",
+      "license": "Apache-2.0",
+      "optional": true,
       "dependencies": {
-        "has-flag": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
+        "bare-events": "^2.0.0",
+        "bare-path": "^2.0.0",
+        "bare-stream": "^2.0.0"
       }
     },
-    "node_modules/@newrelic/publish-sourcemap": {
-      "version": "4.4.2",
-      "resolved": "https://registry.npmjs.org/@newrelic/publish-sourcemap/-/publish-sourcemap-4.4.2.tgz",
-      "integrity": "sha512-okPE9K1A5hOHgFm/gfBwxPM8MfBykxbusPEfI20CzS/MboF+4eCx+PS/gfBiDaVf/OrsHPCGTwADkXPPk48a/Q==",
-      "dev": true,
+    "node_modules/bare-os": {
+      "version": "2.4.0",
+      "license": "Apache-2.0",
+      "optional": true
+    },
+    "node_modules/bare-path": {
+      "version": "2.1.3",
+      "license": "Apache-2.0",
+      "optional": true,
       "dependencies": {
-        "superagent": "^3.4.1",
-        "yargs": "^16.0.3"
-      },
-      "bin": {
-        "delete-sourcemap": "scripts/delete-cli.js",
-        "list-sourcemaps": "scripts/list-cli.js",
-        "publish-sourcemap": "scripts/publish-cli.js"
+        "bare-os": "^2.1.0"
       }
     },
-    "node_modules/@newrelic/publish-sourcemap/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,
+    "node_modules/bare-stream": {
+      "version": "2.1.3",
+      "license": "Apache-2.0",
+      "optional": true,
       "dependencies": {
-        "color-convert": "^2.0.1"
-      },
+        "streamx": "^2.18.0"
+      }
+    },
+    "node_modules/base64-js": {
+      "version": "1.5.1",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/batch": {
+      "version": "0.6.1",
+      "license": "MIT"
+    },
+    "node_modules/big.js": {
+      "version": "5.2.2",
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/binary-extensions": {
+      "version": "2.3.0",
+      "license": "MIT",
       "engines": {
         "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/@newrelic/publish-sourcemap/node_modules/cliui": {
-      "version": "7.0.4",
-      "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
-      "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
-      "dev": true,
+    "node_modules/bl": {
+      "version": "4.1.0",
+      "license": "MIT",
       "dependencies": {
-        "string-width": "^4.2.0",
-        "strip-ansi": "^6.0.0",
-        "wrap-ansi": "^7.0.0"
+        "buffer": "^5.5.0",
+        "inherits": "^2.0.4",
+        "readable-stream": "^3.4.0"
       }
     },
-    "node_modules/@newrelic/publish-sourcemap/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,
+    "node_modules/bl/node_modules/readable-stream": {
+      "version": "3.6.2",
+      "license": "MIT",
       "dependencies": {
-        "color-name": "~1.1.4"
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
       },
       "engines": {
-        "node": ">=7.0.0"
+        "node": ">= 6"
       }
     },
-    "node_modules/@newrelic/publish-sourcemap/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/@newrelic/publish-sourcemap/node_modules/strip-ansi": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
-      "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
-      "dev": true,
+    "node_modules/body-parser": {
+      "version": "1.20.3",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.3.tgz",
+      "integrity": "sha512-7rAxByjUMqQ3/bHJy7D6OGXvx/MMc4IqBn/X0fcM1QUcAItpZrBEYhWGem+tzXH90c+G01ypMcYJBO9Y30203g==",
       "dependencies": {
-        "ansi-regex": "^5.0.0"
+        "bytes": "3.1.2",
+        "content-type": "~1.0.5",
+        "debug": "2.6.9",
+        "depd": "2.0.0",
+        "destroy": "1.2.0",
+        "http-errors": "2.0.0",
+        "iconv-lite": "0.4.24",
+        "on-finished": "2.4.1",
+        "qs": "6.13.0",
+        "raw-body": "2.5.2",
+        "type-is": "~1.6.18",
+        "unpipe": "1.0.0"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">= 0.8",
+        "npm": "1.2.8000 || >= 1.4.16"
       }
     },
-    "node_modules/@newrelic/publish-sourcemap/node_modules/wrap-ansi": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
-      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
-      "dev": true,
+    "node_modules/body-parser/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
       "dependencies": {
-        "ansi-styles": "^4.0.0",
-        "string-width": "^4.1.0",
-        "strip-ansi": "^6.0.0"
-      },
-      "engines": {
-        "node": ">=10"
+        "ms": "2.0.0"
       }
     },
-    "node_modules/@newrelic/publish-sourcemap/node_modules/y18n": {
-      "version": "5.0.8",
-      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
-      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
-      "dev": true,
-      "engines": {
-        "node": ">=10"
+    "node_modules/body-parser/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+    },
+    "node_modules/bonjour-service": {
+      "version": "1.2.1",
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3",
+        "multicast-dns": "^7.2.5"
       }
     },
-    "node_modules/@newrelic/publish-sourcemap/node_modules/yargs": {
-      "version": "16.2.0",
-      "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
-      "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
-      "dev": true,
-      "dependencies": {
-        "cliui": "^7.0.2",
-        "escalade": "^3.1.1",
-        "get-caller-file": "^2.0.5",
-        "require-directory": "^2.1.1",
-        "string-width": "^4.2.0",
-        "y18n": "^5.0.5",
-        "yargs-parser": "^20.2.2"
-      },
-      "engines": {
-        "node": ">=10"
+    "node_modules/boolbase": {
+      "version": "1.0.0",
+      "license": "ISC"
+    },
+    "node_modules/bootstrap": {
+      "version": "4.6.2",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ],
+      "license": "MIT",
+      "peerDependencies": {
+        "jquery": "1.9.1 - 3",
+        "popper.js": "^1.16.1"
       }
     },
-    "node_modules/@newrelic/publish-sourcemap/node_modules/yargs-parser": {
-      "version": "20.2.9",
-      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz",
-      "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==",
-      "dev": true,
-      "engines": {
-        "node": ">=10"
+    "node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
       }
     },
-    "node_modules/@nodelib/fs.scandir": {
-      "version": "2.1.5",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
-      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
-      "dev": true,
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "license": "MIT",
       "dependencies": {
-        "@nodelib/fs.stat": "2.0.5",
-        "run-parallel": "^1.1.9"
+        "fill-range": "^7.1.1"
       },
       "engines": {
-        "node": ">= 8"
+        "node": ">=8"
       }
     },
-    "node_modules/@nodelib/fs.stat": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
-      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
-      "dev": true,
+    "node_modules/browserslist": {
+      "version": "4.23.3",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "caniuse-lite": "^1.0.30001646",
+        "electron-to-chromium": "^1.5.4",
+        "node-releases": "^2.0.18",
+        "update-browserslist-db": "^1.1.0"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
       "engines": {
-        "node": ">= 8"
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
-    "node_modules/@nodelib/fs.walk": {
-      "version": "1.2.7",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.7.tgz",
-      "integrity": "sha512-BTIhocbPBSrRmHxOAJFtR18oLhxTtAFDAvL8hY1S3iU8k+E60W/YFs4jrixGzQjMpF4qPXxIQHcjVD9dz1C2QA==",
-      "dev": true,
+    "node_modules/bs-logger": {
+      "version": "0.2.6",
+      "license": "MIT",
       "dependencies": {
-        "@nodelib/fs.scandir": "2.1.5",
-        "fastq": "^1.6.0"
+        "fast-json-stable-stringify": "2.x"
       },
       "engines": {
-        "node": ">= 8"
+        "node": ">= 6"
       }
     },
-    "node_modules/@popperjs/core": {
-      "version": "2.9.2",
-      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.9.2.tgz",
-      "integrity": "sha512-VZMYa7+fXHdwIq1TDhSXoVmSPEGM/aa+6Aiq3nVVJ9bXr24zScr+NlKFKC3iPljA7ho/GAZr+d2jOf5GIRC30Q=="
-    },
-    "node_modules/@reduxjs/toolkit": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.5.0.tgz",
-      "integrity": "sha512-E/FUraRx+8guw9Hlg/Ja8jI/hwCrmIKed8Annt9YsZw3BQp+F24t5I5b2OWR6pkEHY4hn1BgP08FrTZFRKsdaQ==",
+    "node_modules/bser": {
+      "version": "2.1.1",
+      "license": "Apache-2.0",
       "dependencies": {
-        "immer": "^8.0.0",
-        "redux": "^4.0.0",
-        "redux-thunk": "^2.3.0",
-        "reselect": "^4.0.0"
+        "node-int64": "^0.4.0"
       }
     },
-    "node_modules/@reduxjs/toolkit/node_modules/immer": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/immer/-/immer-8.0.0.tgz",
-      "integrity": "sha512-jm87NNBAIG4fHwouilCHIecFXp5rMGkiFrAuhVO685UnMAlOneEAnOyzPt8OnP47TC11q/E7vpzZe0WvwepFTg=="
-    },
-    "node_modules/@restart/context": {
-      "version": "2.1.4",
-      "resolved": "https://registry.npmjs.org/@restart/context/-/context-2.1.4.tgz",
-      "integrity": "sha512-INJYZQJP7g+IoDUh/475NlGiTeMfwTXUEr3tmRneckHIxNolGOW9CTq83S8cxq0CgJwwcMzMJFchxvlwe7Rk8Q=="
-    },
-    "node_modules/@restart/hooks": {
-      "version": "0.3.27",
-      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.3.27.tgz",
-      "integrity": "sha512-s984xV/EapUIfkjlf8wz9weP2O9TNKR96C68FfMEy2bE69+H4cNv3RD4Mf97lW7Htt7PjZrYTjSC8f3SB9VCXw==",
+    "node_modules/buffer": {
+      "version": "5.7.1",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
       "dependencies": {
-        "dequal": "^2.0.2"
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.1.13"
       }
     },
-    "node_modules/@sindresorhus/is": {
-      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.7.0.tgz",
-      "integrity": "sha512-ONhaKPIufzzrlNbqtWFFd+jlnemX6lJAgq9ZeiZtS7I1PIf/la7CW4m83rTXRnVnsMbW2k56pGYu7AUFJD9Pow==",
-      "dev": true,
-      "optional": true,
+    "node_modules/buffer-from": {
+      "version": "1.1.2",
+      "license": "MIT"
+    },
+    "node_modules/bytes": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
+      "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
       "engines": {
-        "node": ">=4"
+        "node": ">= 0.8"
       }
     },
-    "node_modules/@sinonjs/commons": {
-      "version": "1.8.3",
-      "resolved": "https://registry.npmjs.org/@sinonjs/commons/-/commons-1.8.3.tgz",
-      "integrity": "sha512-xkNcLAn/wZaX14RPlwizcKicDk9G3F8m2nU3L7Ukm5zBgTwiT0wsoFAHx9Jq56fJA1z/7uKGtCRu16sOUCLIHQ==",
-      "dev": true,
-      "dependencies": {
-        "type-detect": "4.0.8"
-      }
+    "node_modules/cache-parser": {
+      "version": "1.2.5",
+      "license": "MIT"
     },
-    "node_modules/@sinonjs/fake-timers": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/@sinonjs/fake-timers/-/fake-timers-6.0.1.tgz",
-      "integrity": "sha512-MZPUxrmFubI36XS1DI3qmI0YdN1gks62JtFZvxR67ljjSNCeK6U08Zx4msEWOXuofgqUt6zPHSi1H9fbjR/NRA==",
-      "dev": true,
+    "node_modules/call-bind": {
+      "version": "1.0.7",
+      "license": "MIT",
       "dependencies": {
-        "@sinonjs/commons": "^1.7.0"
-      }
-    },
-    "node_modules/@svgr/babel-plugin-add-jsx-attribute": {
-      "version": "5.4.0",
-      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-5.4.0.tgz",
-      "integrity": "sha512-ZFf2gs/8/6B8PnSofI0inYXr2SDNTDScPXhN7k5EqD4aZ3gi6u+rbmZHVB8IM3wDyx8ntKACZbtXSm7oZGRqVg==",
-      "dev": true,
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.4",
+        "set-function-length": "^1.2.1"
+      },
       "engines": {
-        "node": ">=10"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/@svgr/babel-plugin-remove-jsx-attribute": {
-      "version": "5.4.0",
-      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-5.4.0.tgz",
-      "integrity": "sha512-yaS4o2PgUtwLFGTKbsiAy6D0o3ugcUhWK0Z45umJ66EPWunAz9fuFw2gJuje6wqQvQWOTJvIahUwndOXb7QCPg==",
-      "dev": true,
+    "node_modules/callsites": {
+      "version": "3.1.0",
+      "license": "MIT",
       "engines": {
-        "node": ">=10"
+        "node": ">=6"
       }
     },
-    "node_modules/@svgr/babel-plugin-remove-jsx-empty-expression": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-5.0.1.tgz",
-      "integrity": "sha512-LA72+88A11ND/yFIMzyuLRSMJ+tRKeYKeQ+mR3DcAZ5I4h5CPWN9AHyUzJbWSYp/u2u0xhmgOe0+E41+GjEueA==",
-      "dev": true,
-      "engines": {
-        "node": ">=10"
+    "node_modules/camel-case": {
+      "version": "4.1.2",
+      "license": "MIT",
+      "dependencies": {
+        "pascal-case": "^3.1.2",
+        "tslib": "^2.0.3"
       }
     },
-    "node_modules/@svgr/babel-plugin-replace-jsx-attribute-value": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-5.0.1.tgz",
-      "integrity": "sha512-PoiE6ZD2Eiy5mK+fjHqwGOS+IXX0wq/YDtNyIgOrc6ejFnxN4b13pRpiIPbtPwHEc+NT2KCjteAcq33/F1Y9KQ==",
-      "dev": true,
+    "node_modules/camelcase": {
+      "version": "6.3.0",
+      "license": "MIT",
       "engines": {
         "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/@svgr/babel-plugin-svg-dynamic-title": {
-      "version": "5.4.0",
-      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-5.4.0.tgz",
-      "integrity": "sha512-zSOZH8PdZOpuG1ZVx/cLVePB2ibo3WPpqo7gFIjLV9a0QsuQAzJiwwqmuEdTaW2pegyBE17Uu15mOgOcgabQZg==",
+    "node_modules/camelcase-keys": {
+      "version": "7.0.2",
       "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "camelcase": "^6.3.0",
+        "map-obj": "^4.1.0",
+        "quick-lru": "^5.1.1",
+        "type-fest": "^1.2.1"
+      },
       "engines": {
-        "node": ">=10"
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/@svgr/babel-plugin-svg-em-dimensions": {
-      "version": "5.4.0",
-      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-5.4.0.tgz",
-      "integrity": "sha512-cPzDbDA5oT/sPXDCUYoVXEmm3VIoAWAPT6mSPTJNbQaBNUuEKVKyGH93oDY4e42PYHRW67N5alJx/eEol20abw==",
+    "node_modules/camelcase-keys/node_modules/type-fest": {
+      "version": "1.4.0",
       "dev": true,
+      "license": "(MIT OR CC0-1.0)",
       "engines": {
         "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/@svgr/babel-plugin-transform-react-native-svg": {
-      "version": "5.4.0",
-      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-5.4.0.tgz",
-      "integrity": "sha512-3eYP/SaopZ41GHwXma7Rmxcv9uRslRDTY1estspeB1w1ueZWd/tPlMfEOoccYpEMZU3jD4OU7YitnXcF5hLW2Q==",
-      "dev": true,
-      "engines": {
-        "node": ">=10"
+    "node_modules/caniuse-api": {
+      "version": "3.0.0",
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.0.0",
+        "caniuse-lite": "^1.0.0",
+        "lodash.memoize": "^4.1.2",
+        "lodash.uniq": "^4.5.0"
       }
     },
-    "node_modules/@svgr/babel-plugin-transform-svg-component": {
-      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-5.5.0.tgz",
-      "integrity": "sha512-q4jSH1UUvbrsOtlo/tKcgSeiCHRSBdXoIoqX1pgcKK/aU3JD27wmMKwGtpB8qRYUYoyXvfGxUVKchLuR5pB3rQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=10"
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001677",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001677.tgz",
+      "integrity": "sha512-fmfjsOlJUpMWu+mAAtZZZHz7UEwsUxIIvu1TJfO1HqFQvB/B+ii0xr9B5HpbZY/mC4XZ8SvjHJqtAY6pDPQEog==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "CC-BY-4.0"
+    },
+    "node_modules/cast-array": {
+      "version": "1.0.1",
+      "license": "MIT",
+      "dependencies": {
+        "isarray": "0.0.1"
       }
     },
-    "node_modules/@svgr/babel-preset": {
-      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/@svgr/babel-preset/-/babel-preset-5.5.0.tgz",
-      "integrity": "sha512-4FiXBjvQ+z2j7yASeGPEi8VD/5rrGQk4Xrq3EdJmoZgz/tpqChpo5hgXDvmEauwtvOc52q8ghhZK4Oy7qph4ig==",
-      "dev": true,
+    "node_modules/cast-array/node_modules/isarray": {
+      "version": "0.0.1",
+      "license": "MIT"
+    },
+    "node_modules/chalk": {
+      "version": "4.1.2",
+      "license": "MIT",
       "dependencies": {
-        "@svgr/babel-plugin-add-jsx-attribute": "^5.4.0",
-        "@svgr/babel-plugin-remove-jsx-attribute": "^5.4.0",
-        "@svgr/babel-plugin-remove-jsx-empty-expression": "^5.0.1",
-        "@svgr/babel-plugin-replace-jsx-attribute-value": "^5.0.1",
-        "@svgr/babel-plugin-svg-dynamic-title": "^5.4.0",
-        "@svgr/babel-plugin-svg-em-dimensions": "^5.4.0",
-        "@svgr/babel-plugin-transform-react-native-svg": "^5.4.0",
-        "@svgr/babel-plugin-transform-svg-component": "^5.5.0"
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
       },
       "engines": {
         "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
-    "node_modules/@svgr/core": {
-      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/@svgr/core/-/core-5.5.0.tgz",
-      "integrity": "sha512-q52VOcsJPvV3jO1wkPtzTuKlvX7Y3xIcWRpCMtBF3MrteZJtBfQw/+u0B1BHy5ColpQc1/YVTrPEtSYIMNZlrQ==",
-      "dev": true,
-      "dependencies": {
-        "@svgr/plugin-jsx": "^5.5.0",
-        "camelcase": "^6.2.0",
-        "cosmiconfig": "^7.0.0"
-      },
+    "node_modules/char-regex": {
+      "version": "1.0.2",
+      "license": "MIT",
       "engines": {
         "node": ">=10"
       }
     },
-    "node_modules/@svgr/hast-util-to-babel-ast": {
-      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-5.5.0.tgz",
-      "integrity": "sha512-cAaR/CAiZRB8GP32N+1jocovUtvlj0+e65TB50/6Lcime+EA49m/8l+P2ko+XPJ4dw3xaPS3jOL4F2X4KWxoeQ==",
-      "dev": true,
+    "node_modules/chardet": {
+      "version": "0.7.0",
+      "license": "MIT"
+    },
+    "node_modules/child_process": {
+      "version": "1.0.2",
+      "license": "ISC"
+    },
+    "node_modules/chokidar": {
+      "version": "3.6.0",
+      "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.12.6"
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
       },
       "engines": {
-        "node": ">=10"
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
       }
     },
-    "node_modules/@svgr/hast-util-to-babel-ast/node_modules/@babel/helper-validator-identifier": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz",
-      "integrity": "sha512-5lsetuxCLilmVGyiLEfoHBRX8UCFD+1m2x3Rj97WrW3V7H3u4RWRXA4evMjImCsin2J2YT0QaVDGf+z8ondbAg==",
-      "dev": true,
+    "node_modules/chownr": {
+      "version": "1.1.4",
+      "license": "ISC"
+    },
+    "node_modules/chrome-trace-event": {
+      "version": "1.0.4",
+      "license": "MIT",
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=6.0"
       }
     },
-    "node_modules/@svgr/hast-util-to-babel-ast/node_modules/@babel/types": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.5.tgz",
-      "integrity": "sha512-M/NzBpEL95I5Hh4dwhin5JlE7EzO5PHMAuzjxss3tiOBD46KfQvVedN/3jEPZvdRvtsK2222XfdHogNIttFgcg==",
-      "dev": true,
-      "dependencies": {
-        "@babel/helper-validator-identifier": "^7.14.5",
-        "to-fast-properties": "^2.0.0"
-      },
+    "node_modules/ci-info": {
+      "version": "3.9.0",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/sibiraj-s"
+        }
+      ],
+      "license": "MIT",
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=8"
       }
     },
-    "node_modules/@svgr/plugin-jsx": {
-      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/@svgr/plugin-jsx/-/plugin-jsx-5.5.0.tgz",
-      "integrity": "sha512-V/wVh33j12hGh05IDg8GpIUXbjAPnTdPTKuP4VNLggnwaHMPNQNae2pRnyTAILWCQdz5GyMqtO488g7CKM8CBA==",
-      "dev": true,
+    "node_modules/cjs-module-lexer": {
+      "version": "1.3.1",
+      "license": "MIT"
+    },
+    "node_modules/classnames": {
+      "version": "2.5.1",
+      "license": "MIT"
+    },
+    "node_modules/clean-css": {
+      "version": "5.3.3",
+      "license": "MIT",
       "dependencies": {
-        "@babel/core": "^7.12.3",
-        "@svgr/babel-preset": "^5.5.0",
-        "@svgr/hast-util-to-babel-ast": "^5.5.0",
-        "svg-parser": "^2.0.2"
+        "source-map": "~0.6.0"
       },
       "engines": {
-        "node": ">=10"
+        "node": ">= 10.0"
       }
     },
-    "node_modules/@svgr/plugin-jsx/node_modules/@babel/code-frame": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.14.5.tgz",
-      "integrity": "sha512-9pzDqyc6OLDaqe+zbACgFkb6fKMNG6CObKpnYXChRsvYGyEdc7CA2BaqeOM+vOtCS5ndmJicPJhKAwYRI6UfFw==",
-      "dev": true,
-      "dependencies": {
-        "@babel/highlight": "^7.14.5"
-      },
+    "node_modules/clean-css/node_modules/source-map": {
+      "version": "0.6.1",
+      "license": "BSD-3-Clause",
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=0.10.0"
       }
     },
-    "node_modules/@svgr/plugin-jsx/node_modules/@babel/core": {
-      "version": "7.14.6",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.14.6.tgz",
-      "integrity": "sha512-gJnOEWSqTk96qG5BoIrl5bVtc23DCycmIePPYnamY9RboYdI4nFy5vAQMSl81O5K/W0sLDWfGysnOECC+KUUCA==",
-      "dev": true,
+    "node_modules/clean-webpack-plugin": {
+      "version": "4.0.0",
+      "license": "MIT",
       "dependencies": {
-        "@babel/code-frame": "^7.14.5",
-        "@babel/generator": "^7.14.5",
-        "@babel/helper-compilation-targets": "^7.14.5",
-        "@babel/helper-module-transforms": "^7.14.5",
-        "@babel/helpers": "^7.14.6",
-        "@babel/parser": "^7.14.6",
-        "@babel/template": "^7.14.5",
-        "@babel/traverse": "^7.14.5",
-        "@babel/types": "^7.14.5",
-        "convert-source-map": "^1.7.0",
-        "debug": "^4.1.0",
-        "gensync": "^1.0.0-beta.2",
-        "json5": "^2.1.2",
-        "semver": "^6.3.0",
-        "source-map": "^0.5.0"
+        "del": "^4.1.1"
       },
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "webpack": ">=4.0.0 <6.0.0"
       }
     },
-    "node_modules/@svgr/plugin-jsx/node_modules/@babel/generator": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.14.5.tgz",
-      "integrity": "sha512-y3rlP+/G25OIX3mYKKIOlQRcqj7YgrvHxOLbVmyLJ9bPmi5ttvUmpydVjcFjZphOktWuA7ovbx91ECloWTfjIA==",
-      "dev": true,
+    "node_modules/cli-cursor": {
+      "version": "3.1.0",
+      "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.14.5",
-        "jsesc": "^2.5.1",
-        "source-map": "^0.5.0"
+        "restore-cursor": "^3.1.0"
       },
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=8"
       }
     },
-    "node_modules/@svgr/plugin-jsx/node_modules/@babel/helper-function-name": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.14.5.tgz",
-      "integrity": "sha512-Gjna0AsXWfFvrAuX+VKcN/aNNWonizBj39yGwUzVDVTlMYJMK2Wp6xdpy72mfArFq5uK+NOuexfzZlzI1z9+AQ==",
-      "dev": true,
-      "dependencies": {
-        "@babel/helper-get-function-arity": "^7.14.5",
-        "@babel/template": "^7.14.5",
-        "@babel/types": "^7.14.5"
-      },
+    "node_modules/cli-spinners": {
+      "version": "2.9.2",
+      "license": "MIT",
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/@svgr/plugin-jsx/node_modules/@babel/helper-get-function-arity": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.14.5.tgz",
-      "integrity": "sha512-I1Db4Shst5lewOM4V+ZKJzQ0JGGaZ6VY1jYvMghRjqs6DWgxLCIyFt30GlnKkfUeFLpJt2vzbMVEXVSXlIFYUg==",
-      "dev": true,
-      "dependencies": {
-        "@babel/types": "^7.14.5"
-      },
+    "node_modules/cli-width": {
+      "version": "3.0.0",
+      "license": "ISC",
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">= 10"
       }
     },
-    "node_modules/@svgr/plugin-jsx/node_modules/@babel/helper-member-expression-to-functions": {
-      "version": "7.14.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.14.7.tgz",
-      "integrity": "sha512-TMUt4xKxJn6ccjcOW7c4hlwyJArizskAhoSTOCkA0uZ+KghIaci0Qg9R043kUMWI9mtQfgny+NQ5QATnZ+paaA==",
-      "dev": true,
+    "node_modules/cliui": {
+      "version": "8.0.1",
+      "license": "ISC",
       "dependencies": {
-        "@babel/types": "^7.14.5"
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.1",
+        "wrap-ansi": "^7.0.0"
       },
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=12"
       }
     },
-    "node_modules/@svgr/plugin-jsx/node_modules/@babel/helper-module-imports": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.14.5.tgz",
-      "integrity": "sha512-SwrNHu5QWS84XlHwGYPDtCxcA0hrSlL2yhWYLgeOc0w7ccOl2qv4s/nARI0aYZW+bSwAL5CukeXA47B/1NKcnQ==",
-      "dev": true,
+    "node_modules/cliui/node_modules/wrap-ansi": {
+      "version": "7.0.0",
+      "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.14.5"
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
       },
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
       }
     },
-    "node_modules/@svgr/plugin-jsx/node_modules/@babel/helper-module-transforms": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.14.5.tgz",
-      "integrity": "sha512-iXpX4KW8LVODuAieD7MzhNjmM6dzYY5tfRqT+R9HDXWl0jPn/djKmA+G9s/2C2T9zggw5tK1QNqZ70USfedOwA==",
-      "dev": true,
-      "dependencies": {
-        "@babel/helper-module-imports": "^7.14.5",
-        "@babel/helper-replace-supers": "^7.14.5",
-        "@babel/helper-simple-access": "^7.14.5",
-        "@babel/helper-split-export-declaration": "^7.14.5",
-        "@babel/helper-validator-identifier": "^7.14.5",
-        "@babel/template": "^7.14.5",
-        "@babel/traverse": "^7.14.5",
-        "@babel/types": "^7.14.5"
-      },
+    "node_modules/clone": {
+      "version": "1.0.4",
+      "license": "MIT",
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=0.8"
       }
     },
-    "node_modules/@svgr/plugin-jsx/node_modules/@babel/helper-optimise-call-expression": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.14.5.tgz",
-      "integrity": "sha512-IqiLIrODUOdnPU9/F8ib1Fx2ohlgDhxnIDU7OEVi+kAbEZcyiF7BLU8W6PfvPi9LzztjS7kcbzbmL7oG8kD6VA==",
-      "dev": true,
+    "node_modules/clone-deep": {
+      "version": "4.0.1",
+      "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.14.5"
+        "is-plain-object": "^2.0.4",
+        "kind-of": "^6.0.2",
+        "shallow-clone": "^3.0.0"
       },
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=6"
       }
     },
-    "node_modules/@svgr/plugin-jsx/node_modules/@babel/helper-replace-supers": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.14.5.tgz",
-      "integrity": "sha512-3i1Qe9/8x/hCHINujn+iuHy+mMRLoc77b2nI9TB0zjH1hvn9qGlXjWlggdwUcju36PkPCy/lpM7LLUdcTyH4Ow==",
-      "dev": true,
+    "node_modules/clone-deep/node_modules/is-plain-object": {
+      "version": "2.0.4",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-member-expression-to-functions": "^7.14.5",
-        "@babel/helper-optimise-call-expression": "^7.14.5",
-        "@babel/traverse": "^7.14.5",
-        "@babel/types": "^7.14.5"
+        "isobject": "^3.0.1"
       },
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=0.10.0"
       }
     },
-    "node_modules/@svgr/plugin-jsx/node_modules/@babel/helper-simple-access": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.14.5.tgz",
-      "integrity": "sha512-nfBN9xvmCt6nrMZjfhkl7i0oTV3yxR4/FztsbOASyTvVcoYd0TRHh7eMLdlEcCqobydC0LAF3LtC92Iwxo0wyw==",
-      "dev": true,
-      "dependencies": {
-        "@babel/types": "^7.14.5"
-      },
+    "node_modules/co": {
+      "version": "4.6.0",
+      "license": "MIT",
       "engines": {
-        "node": ">=6.9.0"
+        "iojs": ">= 1.0.0",
+        "node": ">= 0.12.0"
       }
     },
-    "node_modules/@svgr/plugin-jsx/node_modules/@babel/helper-split-export-declaration": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.14.5.tgz",
-      "integrity": "sha512-hprxVPu6e5Kdp2puZUmvOGjaLv9TCe58E/Fl6hRq4YiVQxIcNvuq6uTM2r1mT/oPskuS9CgR+I94sqAYv0NGKA==",
-      "dev": true,
+    "node_modules/codemirror": {
+      "version": "6.0.1",
+      "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/commands": "^6.0.0",
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/lint": "^6.0.0",
+        "@codemirror/search": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.0.0"
       }
     },
-    "node_modules/@svgr/plugin-jsx/node_modules/@babel/helper-validator-identifier": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz",
-      "integrity": "sha512-5lsetuxCLilmVGyiLEfoHBRX8UCFD+1m2x3Rj97WrW3V7H3u4RWRXA4evMjImCsin2J2YT0QaVDGf+z8ondbAg==",
-      "dev": true,
-      "engines": {
-        "node": ">=6.9.0"
-      }
+    "node_modules/collect-v8-coverage": {
+      "version": "1.0.2",
+      "license": "MIT"
     },
-    "node_modules/@svgr/plugin-jsx/node_modules/@babel/helpers": {
-      "version": "7.14.6",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.14.6.tgz",
-      "integrity": "sha512-yesp1ENQBiLI+iYHSJdoZKUtRpfTlL1grDIX9NRlAVppljLw/4tTyYupIB7uIYmC3stW/imAv8EqaKaS/ibmeA==",
-      "dev": true,
+    "node_modules/color": {
+      "version": "4.2.3",
+      "license": "MIT",
       "dependencies": {
-        "@babel/template": "^7.14.5",
-        "@babel/traverse": "^7.14.5",
-        "@babel/types": "^7.14.5"
+        "color-convert": "^2.0.1",
+        "color-string": "^1.9.0"
       },
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=12.5.0"
       }
     },
-    "node_modules/@svgr/plugin-jsx/node_modules/@babel/highlight": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.14.5.tgz",
-      "integrity": "sha512-qf9u2WFWVV0MppaL877j2dBtQIDgmidgjGk5VIMw3OadXvYaXn66U1BFlH2t4+t3i+8PhedppRv+i40ABzd+gg==",
-      "dev": true,
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-validator-identifier": "^7.14.5",
-        "chalk": "^2.0.0",
-        "js-tokens": "^4.0.0"
+        "color-name": "~1.1.4"
       },
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=7.0.0"
       }
     },
-    "node_modules/@svgr/plugin-jsx/node_modules/@babel/parser": {
-      "version": "7.14.7",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.14.7.tgz",
-      "integrity": "sha512-X67Z5y+VBJuHB/RjwECp8kSl5uYi0BvRbNeWqkaJCVh+LiTPl19WBUfG627psSgp9rSf6ojuXghQM3ha6qHHdA==",
-      "dev": true,
-      "bin": {
-        "parser": "bin/babel-parser.js"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      }
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "license": "MIT"
     },
-    "node_modules/@svgr/plugin-jsx/node_modules/@babel/template": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.14.5.tgz",
-      "integrity": "sha512-6Z3Po85sfxRGachLULUhOmvAaOo7xCvqGQtxINai2mEGPFm6pQ4z5QInFnUrRpfoSV60BnjyF5F3c+15fxFV1g==",
-      "dev": true,
+    "node_modules/color-string": {
+      "version": "1.9.1",
+      "license": "MIT",
       "dependencies": {
-        "@babel/code-frame": "^7.14.5",
-        "@babel/parser": "^7.14.5",
-        "@babel/types": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
       }
     },
-    "node_modules/@svgr/plugin-jsx/node_modules/@babel/traverse": {
-      "version": "7.14.7",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.14.7.tgz",
-      "integrity": "sha512-9vDr5NzHu27wgwejuKL7kIOm4bwEtaPQ4Z6cpCmjSuaRqpH/7xc4qcGEscwMqlkwgcXl6MvqoAjZkQ24uSdIZQ==",
-      "dev": true,
-      "dependencies": {
-        "@babel/code-frame": "^7.14.5",
-        "@babel/generator": "^7.14.5",
-        "@babel/helper-function-name": "^7.14.5",
-        "@babel/helper-hoist-variables": "^7.14.5",
-        "@babel/helper-split-export-declaration": "^7.14.5",
-        "@babel/parser": "^7.14.7",
-        "@babel/types": "^7.14.5",
-        "debug": "^4.1.0",
-        "globals": "^11.1.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
+    "node_modules/colord": {
+      "version": "2.9.3",
+      "license": "MIT"
     },
-    "node_modules/@svgr/plugin-jsx/node_modules/@babel/types": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.5.tgz",
-      "integrity": "sha512-M/NzBpEL95I5Hh4dwhin5JlE7EzO5PHMAuzjxss3tiOBD46KfQvVedN/3jEPZvdRvtsK2222XfdHogNIttFgcg==",
-      "dev": true,
+    "node_modules/colorette": {
+      "version": "2.0.20",
+      "license": "MIT"
+    },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-validator-identifier": "^7.14.5",
-        "to-fast-properties": "^2.0.0"
+        "delayed-stream": "~1.0.0"
       },
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">= 0.8"
       }
     },
-    "node_modules/@svgr/plugin-jsx/node_modules/gensync": {
-      "version": "1.0.0-beta.2",
-      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
-      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
-      "dev": true,
+    "node_modules/commander": {
+      "version": "6.2.1",
+      "license": "MIT",
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">= 6"
       }
     },
-    "node_modules/@svgr/plugin-jsx/node_modules/semver": {
-      "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-      "dev": true,
-      "bin": {
-        "semver": "bin/semver.js"
-      }
+    "node_modules/common-path-prefix": {
+      "version": "3.0.0",
+      "license": "ISC"
     },
-    "node_modules/@svgr/plugin-jsx/node_modules/source-map": {
-      "version": "0.5.7",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-      "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
+    "node_modules/component-emitter": {
+      "version": "1.3.1",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/@svgr/plugin-svgo": {
-      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/@svgr/plugin-svgo/-/plugin-svgo-5.5.0.tgz",
-      "integrity": "sha512-r5swKk46GuQl4RrVejVwpeeJaydoxkdwkM1mBKOgJLBUJPGaLci6ylg/IjhrRsREKDkr4kbMWdgOtbXEh0fyLQ==",
-      "dev": true,
+    "node_modules/compressible": {
+      "version": "2.0.18",
+      "license": "MIT",
       "dependencies": {
-        "cosmiconfig": "^7.0.0",
-        "deepmerge": "^4.2.2",
-        "svgo": "^1.2.2"
+        "mime-db": ">= 1.43.0 < 2"
       },
       "engines": {
-        "node": ">=10"
+        "node": ">= 0.6"
       }
     },
-    "node_modules/@svgr/webpack": {
-      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/@svgr/webpack/-/webpack-5.5.0.tgz",
-      "integrity": "sha512-DOBOK255wfQxguUta2INKkzPj6AIS6iafZYiYmHn6W3pHlycSRRlvWKCfLDG10fXfLWqE3DJHgRUOyJYmARa7g==",
-      "dev": true,
+    "node_modules/compression": {
+      "version": "1.7.4",
+      "license": "MIT",
       "dependencies": {
-        "@babel/core": "^7.12.3",
-        "@babel/plugin-transform-react-constant-elements": "^7.12.1",
-        "@babel/preset-env": "^7.12.1",
-        "@babel/preset-react": "^7.12.5",
-        "@svgr/core": "^5.5.0",
-        "@svgr/plugin-jsx": "^5.5.0",
-        "@svgr/plugin-svgo": "^5.5.0",
-        "loader-utils": "^2.0.0"
+        "accepts": "~1.3.5",
+        "bytes": "3.0.0",
+        "compressible": "~2.0.16",
+        "debug": "2.6.9",
+        "on-headers": "~1.0.2",
+        "safe-buffer": "5.1.2",
+        "vary": "~1.1.2"
       },
       "engines": {
-        "node": ">=10"
+        "node": ">= 0.8.0"
       }
     },
-    "node_modules/@svgr/webpack/node_modules/@babel/code-frame": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.14.5.tgz",
-      "integrity": "sha512-9pzDqyc6OLDaqe+zbACgFkb6fKMNG6CObKpnYXChRsvYGyEdc7CA2BaqeOM+vOtCS5ndmJicPJhKAwYRI6UfFw==",
-      "dev": true,
-      "dependencies": {
-        "@babel/highlight": "^7.14.5"
-      },
+    "node_modules/compression/node_modules/bytes": {
+      "version": "3.0.0",
+      "license": "MIT",
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">= 0.8"
       }
     },
-    "node_modules/@svgr/webpack/node_modules/@babel/core": {
-      "version": "7.14.6",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.14.6.tgz",
-      "integrity": "sha512-gJnOEWSqTk96qG5BoIrl5bVtc23DCycmIePPYnamY9RboYdI4nFy5vAQMSl81O5K/W0sLDWfGysnOECC+KUUCA==",
-      "dev": true,
+    "node_modules/compression/node_modules/debug": {
+      "version": "2.6.9",
+      "license": "MIT",
       "dependencies": {
-        "@babel/code-frame": "^7.14.5",
-        "@babel/generator": "^7.14.5",
-        "@babel/helper-compilation-targets": "^7.14.5",
-        "@babel/helper-module-transforms": "^7.14.5",
-        "@babel/helpers": "^7.14.6",
-        "@babel/parser": "^7.14.6",
-        "@babel/template": "^7.14.5",
-        "@babel/traverse": "^7.14.5",
-        "@babel/types": "^7.14.5",
-        "convert-source-map": "^1.7.0",
-        "debug": "^4.1.0",
-        "gensync": "^1.0.0-beta.2",
-        "json5": "^2.1.2",
-        "semver": "^6.3.0",
-        "source-map": "^0.5.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+        "ms": "2.0.0"
       }
     },
-    "node_modules/@svgr/webpack/node_modules/@babel/generator": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.14.5.tgz",
-      "integrity": "sha512-y3rlP+/G25OIX3mYKKIOlQRcqj7YgrvHxOLbVmyLJ9bPmi5ttvUmpydVjcFjZphOktWuA7ovbx91ECloWTfjIA==",
-      "dev": true,
-      "dependencies": {
-        "@babel/types": "^7.14.5",
-        "jsesc": "^2.5.1",
-        "source-map": "^0.5.0"
-      },
+    "node_modules/compression/node_modules/ms": {
+      "version": "2.0.0",
+      "license": "MIT"
+    },
+    "node_modules/compression/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "license": "MIT"
+    },
+    "node_modules/concat-map": {
+      "version": "0.0.1",
+      "license": "MIT"
+    },
+    "node_modules/confusing-browser-globals": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/confusing-browser-globals/-/confusing-browser-globals-1.0.11.tgz",
+      "integrity": "sha512-JsPKdmh8ZkmnHxDk55FZ1TqVLvEQTvoByJZRN9jzI0UjxK/QgAmsphz7PGtqgPieQZ/CQcHWXCR7ATDNhGe+YA=="
+    },
+    "node_modules/connect-history-api-fallback": {
+      "version": "2.0.0",
+      "license": "MIT",
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=0.8"
       }
     },
-    "node_modules/@svgr/webpack/node_modules/@babel/helper-function-name": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.14.5.tgz",
-      "integrity": "sha512-Gjna0AsXWfFvrAuX+VKcN/aNNWonizBj39yGwUzVDVTlMYJMK2Wp6xdpy72mfArFq5uK+NOuexfzZlzI1z9+AQ==",
-      "dev": true,
+    "node_modules/content-disposition": {
+      "version": "0.5.4",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-get-function-arity": "^7.14.5",
-        "@babel/template": "^7.14.5",
-        "@babel/types": "^7.14.5"
+        "safe-buffer": "5.2.1"
       },
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">= 0.6"
       }
     },
-    "node_modules/@svgr/webpack/node_modules/@babel/helper-get-function-arity": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.14.5.tgz",
-      "integrity": "sha512-I1Db4Shst5lewOM4V+ZKJzQ0JGGaZ6VY1jYvMghRjqs6DWgxLCIyFt30GlnKkfUeFLpJt2vzbMVEXVSXlIFYUg==",
-      "dev": true,
-      "dependencies": {
-        "@babel/types": "^7.14.5"
-      },
+    "node_modules/content-type": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
+      "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">= 0.6"
       }
     },
-    "node_modules/@svgr/webpack/node_modules/@babel/helper-member-expression-to-functions": {
-      "version": "7.14.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.14.7.tgz",
-      "integrity": "sha512-TMUt4xKxJn6ccjcOW7c4hlwyJArizskAhoSTOCkA0uZ+KghIaci0Qg9R043kUMWI9mtQfgny+NQ5QATnZ+paaA==",
-      "dev": true,
-      "dependencies": {
-        "@babel/types": "^7.14.5"
-      },
+    "node_modules/convert-source-map": {
+      "version": "2.0.0",
+      "license": "MIT"
+    },
+    "node_modules/cookie": {
+      "version": "0.6.0",
+      "license": "MIT",
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">= 0.6"
       }
     },
-    "node_modules/@svgr/webpack/node_modules/@babel/helper-module-imports": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.14.5.tgz",
-      "integrity": "sha512-SwrNHu5QWS84XlHwGYPDtCxcA0hrSlL2yhWYLgeOc0w7ccOl2qv4s/nARI0aYZW+bSwAL5CukeXA47B/1NKcnQ==",
+    "node_modules/cookie-signature": {
+      "version": "1.0.6",
+      "license": "MIT"
+    },
+    "node_modules/cookiejar": {
+      "version": "2.1.4",
+      "license": "MIT"
+    },
+    "node_modules/core-js": {
+      "version": "3.6.5",
       "dev": true,
-      "dependencies": {
-        "@babel/types": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+      "hasInstallScript": true,
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
       }
     },
-    "node_modules/@svgr/webpack/node_modules/@babel/helper-module-transforms": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.14.5.tgz",
-      "integrity": "sha512-iXpX4KW8LVODuAieD7MzhNjmM6dzYY5tfRqT+R9HDXWl0jPn/djKmA+G9s/2C2T9zggw5tK1QNqZ70USfedOwA==",
-      "dev": true,
+    "node_modules/core-js-compat": {
+      "version": "3.38.0",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-module-imports": "^7.14.5",
-        "@babel/helper-replace-supers": "^7.14.5",
-        "@babel/helper-simple-access": "^7.14.5",
-        "@babel/helper-split-export-declaration": "^7.14.5",
-        "@babel/helper-validator-identifier": "^7.14.5",
-        "@babel/template": "^7.14.5",
-        "@babel/traverse": "^7.14.5",
-        "@babel/types": "^7.14.5"
+        "browserslist": "^4.23.3"
       },
-      "engines": {
-        "node": ">=6.9.0"
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
       }
     },
-    "node_modules/@svgr/webpack/node_modules/@babel/helper-optimise-call-expression": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.14.5.tgz",
-      "integrity": "sha512-IqiLIrODUOdnPU9/F8ib1Fx2ohlgDhxnIDU7OEVi+kAbEZcyiF7BLU8W6PfvPi9LzztjS7kcbzbmL7oG8kD6VA==",
-      "dev": true,
+    "node_modules/core-js-pure": {
+      "version": "3.38.0",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
+    "node_modules/core-util-is": {
+      "version": "1.0.3",
+      "license": "MIT"
+    },
+    "node_modules/cosmiconfig": {
+      "version": "8.3.6",
+      "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.14.5"
+        "import-fresh": "^3.3.0",
+        "js-yaml": "^4.1.0",
+        "parse-json": "^5.2.0",
+        "path-type": "^4.0.0"
       },
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/d-fischer"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.9.5"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@svgr/webpack/node_modules/@babel/helper-plugin-utils": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-      "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=6.9.0"
-      }
+    "node_modules/cosmiconfig/node_modules/argparse": {
+      "version": "2.0.1",
+      "license": "Python-2.0"
     },
-    "node_modules/@svgr/webpack/node_modules/@babel/helper-replace-supers": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.14.5.tgz",
-      "integrity": "sha512-3i1Qe9/8x/hCHINujn+iuHy+mMRLoc77b2nI9TB0zjH1hvn9qGlXjWlggdwUcju36PkPCy/lpM7LLUdcTyH4Ow==",
-      "dev": true,
+    "node_modules/cosmiconfig/node_modules/js-yaml": {
+      "version": "4.1.0",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-member-expression-to-functions": "^7.14.5",
-        "@babel/helper-optimise-call-expression": "^7.14.5",
-        "@babel/traverse": "^7.14.5",
-        "@babel/types": "^7.14.5"
+        "argparse": "^2.0.1"
       },
-      "engines": {
-        "node": ">=6.9.0"
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
       }
     },
-    "node_modules/@svgr/webpack/node_modules/@babel/helper-simple-access": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.14.5.tgz",
-      "integrity": "sha512-nfBN9xvmCt6nrMZjfhkl7i0oTV3yxR4/FztsbOASyTvVcoYd0TRHh7eMLdlEcCqobydC0LAF3LtC92Iwxo0wyw==",
-      "dev": true,
+    "node_modules/create-jest": {
+      "version": "29.7.0",
+      "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.14.5"
+        "@jest/types": "^29.6.3",
+        "chalk": "^4.0.0",
+        "exit": "^0.1.2",
+        "graceful-fs": "^4.2.9",
+        "jest-config": "^29.7.0",
+        "jest-util": "^29.7.0",
+        "prompts": "^2.0.1"
+      },
+      "bin": {
+        "create-jest": "bin/create-jest.js"
       },
       "engines": {
-        "node": ">=6.9.0"
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
-    "node_modules/@svgr/webpack/node_modules/@babel/helper-split-export-declaration": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.14.5.tgz",
-      "integrity": "sha512-hprxVPu6e5Kdp2puZUmvOGjaLv9TCe58E/Fl6hRq4YiVQxIcNvuq6uTM2r1mT/oPskuS9CgR+I94sqAYv0NGKA==",
-      "dev": true,
+    "node_modules/crelt": {
+      "version": "1.0.6",
+      "license": "MIT"
+    },
+    "node_modules/cross-fetch": {
+      "version": "3.1.8",
+      "license": "MIT",
+      "dependencies": {
+        "node-fetch": "^2.6.12"
+      }
+    },
+    "node_modules/cross-spawn": {
+      "version": "7.0.3",
+      "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.14.5"
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
       },
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">= 8"
       }
     },
-    "node_modules/@svgr/webpack/node_modules/@babel/helper-validator-identifier": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz",
-      "integrity": "sha512-5lsetuxCLilmVGyiLEfoHBRX8UCFD+1m2x3Rj97WrW3V7H3u4RWRXA4evMjImCsin2J2YT0QaVDGf+z8ondbAg==",
-      "dev": true,
+    "node_modules/css-declaration-sorter": {
+      "version": "7.2.0",
+      "license": "ISC",
       "engines": {
-        "node": ">=6.9.0"
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.9"
       }
     },
-    "node_modules/@svgr/webpack/node_modules/@babel/helpers": {
-      "version": "7.14.6",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.14.6.tgz",
-      "integrity": "sha512-yesp1ENQBiLI+iYHSJdoZKUtRpfTlL1grDIX9NRlAVppljLw/4tTyYupIB7uIYmC3stW/imAv8EqaKaS/ibmeA==",
+    "node_modules/css-functions-list": {
+      "version": "3.2.2",
       "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12 || >=16"
+      }
+    },
+    "node_modules/css-loader": {
+      "version": "5.2.7",
+      "license": "MIT",
       "dependencies": {
-        "@babel/template": "^7.14.5",
-        "@babel/traverse": "^7.14.5",
-        "@babel/types": "^7.14.5"
+        "icss-utils": "^5.1.0",
+        "loader-utils": "^2.0.0",
+        "postcss": "^8.2.15",
+        "postcss-modules-extract-imports": "^3.0.0",
+        "postcss-modules-local-by-default": "^4.0.0",
+        "postcss-modules-scope": "^3.0.0",
+        "postcss-modules-values": "^4.0.0",
+        "postcss-value-parser": "^4.1.0",
+        "schema-utils": "^3.0.0",
+        "semver": "^7.3.5"
       },
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^4.27.0 || ^5.0.0"
       }
     },
-    "node_modules/@svgr/webpack/node_modules/@babel/highlight": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.14.5.tgz",
-      "integrity": "sha512-qf9u2WFWVV0MppaL877j2dBtQIDgmidgjGk5VIMw3OadXvYaXn66U1BFlH2t4+t3i+8PhedppRv+i40ABzd+gg==",
-      "dev": true,
+    "node_modules/css-loader/node_modules/schema-utils": {
+      "version": "3.3.0",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-validator-identifier": "^7.14.5",
-        "chalk": "^2.0.0",
-        "js-tokens": "^4.0.0"
+        "@types/json-schema": "^7.0.8",
+        "ajv": "^6.12.5",
+        "ajv-keywords": "^3.5.2"
       },
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
       }
     },
-    "node_modules/@svgr/webpack/node_modules/@babel/parser": {
-      "version": "7.14.7",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.14.7.tgz",
-      "integrity": "sha512-X67Z5y+VBJuHB/RjwECp8kSl5uYi0BvRbNeWqkaJCVh+LiTPl19WBUfG627psSgp9rSf6ojuXghQM3ha6qHHdA==",
-      "dev": true,
+    "node_modules/css-loader/node_modules/semver": {
+      "version": "7.6.3",
+      "license": "ISC",
       "bin": {
-        "parser": "bin/babel-parser.js"
+        "semver": "bin/semver.js"
       },
       "engines": {
-        "node": ">=6.0.0"
+        "node": ">=10"
       }
     },
-    "node_modules/@svgr/webpack/node_modules/@babel/plugin-proposal-class-properties": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.14.5.tgz",
-      "integrity": "sha512-q/PLpv5Ko4dVc1LYMpCY7RVAAO4uk55qPwrIuJ5QJ8c6cVuAmhu7I/49JOppXL6gXf7ZHzpRVEUZdYoPLM04Gg==",
-      "dev": true,
+    "node_modules/css-mediaquery": {
+      "version": "0.1.2",
+      "license": "BSD"
+    },
+    "node_modules/css-select": {
+      "version": "4.3.0",
+      "license": "BSD-2-Clause",
       "dependencies": {
-        "@babel/helper-create-class-features-plugin": "^7.14.5",
-        "@babel/helper-plugin-utils": "^7.14.5"
+        "boolbase": "^1.0.0",
+        "css-what": "^6.0.1",
+        "domhandler": "^4.3.1",
+        "domutils": "^2.8.0",
+        "nth-check": "^2.0.1"
       },
-      "engines": {
-        "node": ">=6.9.0"
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
       }
     },
-    "node_modules/@svgr/webpack/node_modules/@babel/plugin-proposal-object-rest-spread": {
-      "version": "7.14.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.14.7.tgz",
-      "integrity": "sha512-082hsZz+sVabfmDWo1Oct1u1AgbKbUAyVgmX4otIc7bdsRgHBXwTwb3DpDmD4Eyyx6DNiuz5UAATT655k+kL5g==",
-      "dev": true,
+    "node_modules/css-tree": {
+      "version": "2.3.1",
+      "license": "MIT",
       "dependencies": {
-        "@babel/compat-data": "^7.14.7",
-        "@babel/helper-compilation-targets": "^7.14.5",
-        "@babel/helper-plugin-utils": "^7.14.5",
-        "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
-        "@babel/plugin-transform-parameters": "^7.14.5"
+        "mdn-data": "2.0.30",
+        "source-map-js": "^1.0.1"
       },
       "engines": {
-        "node": ">=6.9.0"
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
       }
     },
-    "node_modules/@svgr/webpack/node_modules/@babel/preset-env": {
-      "version": "7.14.7",
-      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.14.7.tgz",
-      "integrity": "sha512-itOGqCKLsSUl0Y+1nSfhbuuOlTs0MJk2Iv7iSH+XT/mR8U1zRLO7NjWlYXB47yhK4J/7j+HYty/EhFZDYKa/VA==",
-      "dev": true,
-      "dependencies": {
-        "@babel/compat-data": "^7.14.7",
-        "@babel/helper-compilation-targets": "^7.14.5",
-        "@babel/helper-plugin-utils": "^7.14.5",
-        "@babel/helper-validator-option": "^7.14.5",
-        "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "^7.14.5",
-        "@babel/plugin-proposal-async-generator-functions": "^7.14.7",
-        "@babel/plugin-proposal-class-properties": "^7.14.5",
-        "@babel/plugin-proposal-class-static-block": "^7.14.5",
-        "@babel/plugin-proposal-dynamic-import": "^7.14.5",
-        "@babel/plugin-proposal-export-namespace-from": "^7.14.5",
-        "@babel/plugin-proposal-json-strings": "^7.14.5",
-        "@babel/plugin-proposal-logical-assignment-operators": "^7.14.5",
-        "@babel/plugin-proposal-nullish-coalescing-operator": "^7.14.5",
-        "@babel/plugin-proposal-numeric-separator": "^7.14.5",
-        "@babel/plugin-proposal-object-rest-spread": "^7.14.7",
-        "@babel/plugin-proposal-optional-catch-binding": "^7.14.5",
-        "@babel/plugin-proposal-optional-chaining": "^7.14.5",
-        "@babel/plugin-proposal-private-methods": "^7.14.5",
-        "@babel/plugin-proposal-private-property-in-object": "^7.14.5",
-        "@babel/plugin-proposal-unicode-property-regex": "^7.14.5",
-        "@babel/plugin-syntax-async-generators": "^7.8.4",
-        "@babel/plugin-syntax-class-properties": "^7.12.13",
-        "@babel/plugin-syntax-class-static-block": "^7.14.5",
-        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-        "@babel/plugin-syntax-export-namespace-from": "^7.8.3",
-        "@babel/plugin-syntax-json-strings": "^7.8.3",
-        "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4",
-        "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3",
-        "@babel/plugin-syntax-numeric-separator": "^7.10.4",
-        "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
-        "@babel/plugin-syntax-optional-catch-binding": "^7.8.3",
-        "@babel/plugin-syntax-optional-chaining": "^7.8.3",
-        "@babel/plugin-syntax-private-property-in-object": "^7.14.5",
-        "@babel/plugin-syntax-top-level-await": "^7.14.5",
-        "@babel/plugin-transform-arrow-functions": "^7.14.5",
-        "@babel/plugin-transform-async-to-generator": "^7.14.5",
-        "@babel/plugin-transform-block-scoped-functions": "^7.14.5",
-        "@babel/plugin-transform-block-scoping": "^7.14.5",
-        "@babel/plugin-transform-classes": "^7.14.5",
-        "@babel/plugin-transform-computed-properties": "^7.14.5",
-        "@babel/plugin-transform-destructuring": "^7.14.7",
-        "@babel/plugin-transform-dotall-regex": "^7.14.5",
-        "@babel/plugin-transform-duplicate-keys": "^7.14.5",
-        "@babel/plugin-transform-exponentiation-operator": "^7.14.5",
-        "@babel/plugin-transform-for-of": "^7.14.5",
-        "@babel/plugin-transform-function-name": "^7.14.5",
-        "@babel/plugin-transform-literals": "^7.14.5",
-        "@babel/plugin-transform-member-expression-literals": "^7.14.5",
-        "@babel/plugin-transform-modules-amd": "^7.14.5",
-        "@babel/plugin-transform-modules-commonjs": "^7.14.5",
-        "@babel/plugin-transform-modules-systemjs": "^7.14.5",
-        "@babel/plugin-transform-modules-umd": "^7.14.5",
-        "@babel/plugin-transform-named-capturing-groups-regex": "^7.14.7",
-        "@babel/plugin-transform-new-target": "^7.14.5",
-        "@babel/plugin-transform-object-super": "^7.14.5",
-        "@babel/plugin-transform-parameters": "^7.14.5",
-        "@babel/plugin-transform-property-literals": "^7.14.5",
-        "@babel/plugin-transform-regenerator": "^7.14.5",
-        "@babel/plugin-transform-reserved-words": "^7.14.5",
-        "@babel/plugin-transform-shorthand-properties": "^7.14.5",
-        "@babel/plugin-transform-spread": "^7.14.6",
-        "@babel/plugin-transform-sticky-regex": "^7.14.5",
-        "@babel/plugin-transform-template-literals": "^7.14.5",
-        "@babel/plugin-transform-typeof-symbol": "^7.14.5",
-        "@babel/plugin-transform-unicode-escapes": "^7.14.5",
-        "@babel/plugin-transform-unicode-regex": "^7.14.5",
-        "@babel/preset-modules": "^0.1.4",
-        "@babel/types": "^7.14.5",
-        "babel-plugin-polyfill-corejs2": "^0.2.2",
-        "babel-plugin-polyfill-corejs3": "^0.2.2",
-        "babel-plugin-polyfill-regenerator": "^0.2.2",
-        "core-js-compat": "^3.15.0",
-        "semver": "^6.3.0"
-      },
+    "node_modules/css-what": {
+      "version": "6.1.0",
+      "license": "BSD-2-Clause",
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">= 6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
       }
     },
-    "node_modules/@svgr/webpack/node_modules/@babel/preset-react": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/preset-react/-/preset-react-7.14.5.tgz",
-      "integrity": "sha512-XFxBkjyObLvBaAvkx1Ie95Iaq4S/GUEIrejyrntQ/VCMKUYvKLoyKxOBzJ2kjA3b6rC9/KL6KXfDC2GqvLiNqQ==",
+    "node_modules/css.escape": {
+      "version": "1.5.1",
       "dev": true,
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.14.5",
-        "@babel/helper-validator-option": "^7.14.5",
-        "@babel/plugin-transform-react-display-name": "^7.14.5",
-        "@babel/plugin-transform-react-jsx": "^7.14.5",
-        "@babel/plugin-transform-react-jsx-development": "^7.14.5",
-        "@babel/plugin-transform-react-pure-annotations": "^7.14.5"
+      "license": "MIT"
+    },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "license": "MIT",
+      "bin": {
+        "cssesc": "bin/cssesc"
       },
       "engines": {
-        "node": ">=6.9.0"
+        "node": ">=4"
       }
     },
-    "node_modules/@svgr/webpack/node_modules/@babel/template": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.14.5.tgz",
-      "integrity": "sha512-6Z3Po85sfxRGachLULUhOmvAaOo7xCvqGQtxINai2mEGPFm6pQ4z5QInFnUrRpfoSV60BnjyF5F3c+15fxFV1g==",
+    "node_modules/cssfontparser": {
+      "version": "1.2.1",
       "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/cssnano": {
+      "version": "6.0.3",
+      "license": "MIT",
       "dependencies": {
-        "@babel/code-frame": "^7.14.5",
-        "@babel/parser": "^7.14.5",
-        "@babel/types": "^7.14.5"
+        "cssnano-preset-default": "^6.0.3",
+        "lilconfig": "^3.0.0"
       },
       "engines": {
-        "node": ">=6.9.0"
+        "node": "^14 || ^16 || >=18.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/cssnano"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.31"
       }
     },
-    "node_modules/@svgr/webpack/node_modules/@babel/traverse": {
-      "version": "7.14.7",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.14.7.tgz",
-      "integrity": "sha512-9vDr5NzHu27wgwejuKL7kIOm4bwEtaPQ4Z6cpCmjSuaRqpH/7xc4qcGEscwMqlkwgcXl6MvqoAjZkQ24uSdIZQ==",
-      "dev": true,
-      "dependencies": {
-        "@babel/code-frame": "^7.14.5",
-        "@babel/generator": "^7.14.5",
-        "@babel/helper-function-name": "^7.14.5",
-        "@babel/helper-hoist-variables": "^7.14.5",
-        "@babel/helper-split-export-declaration": "^7.14.5",
-        "@babel/parser": "^7.14.7",
-        "@babel/types": "^7.14.5",
-        "debug": "^4.1.0",
-        "globals": "^11.1.0"
+    "node_modules/cssnano-preset-default": {
+      "version": "6.1.2",
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.23.0",
+        "css-declaration-sorter": "^7.2.0",
+        "cssnano-utils": "^4.0.2",
+        "postcss-calc": "^9.0.1",
+        "postcss-colormin": "^6.1.0",
+        "postcss-convert-values": "^6.1.0",
+        "postcss-discard-comments": "^6.0.2",
+        "postcss-discard-duplicates": "^6.0.3",
+        "postcss-discard-empty": "^6.0.3",
+        "postcss-discard-overridden": "^6.0.2",
+        "postcss-merge-longhand": "^6.0.5",
+        "postcss-merge-rules": "^6.1.1",
+        "postcss-minify-font-values": "^6.1.0",
+        "postcss-minify-gradients": "^6.0.3",
+        "postcss-minify-params": "^6.1.0",
+        "postcss-minify-selectors": "^6.0.4",
+        "postcss-normalize-charset": "^6.0.2",
+        "postcss-normalize-display-values": "^6.0.2",
+        "postcss-normalize-positions": "^6.0.2",
+        "postcss-normalize-repeat-style": "^6.0.2",
+        "postcss-normalize-string": "^6.0.2",
+        "postcss-normalize-timing-functions": "^6.0.2",
+        "postcss-normalize-unicode": "^6.1.0",
+        "postcss-normalize-url": "^6.0.2",
+        "postcss-normalize-whitespace": "^6.0.2",
+        "postcss-ordered-values": "^6.0.2",
+        "postcss-reduce-initial": "^6.1.0",
+        "postcss-reduce-transforms": "^6.0.2",
+        "postcss-svgo": "^6.0.3",
+        "postcss-unique-selectors": "^6.0.4"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18.0"
       },
+      "peerDependencies": {
+        "postcss": "^8.4.31"
+      }
+    },
+    "node_modules/cssnano-utils": {
+      "version": "4.0.2",
+      "license": "MIT",
       "engines": {
-        "node": ">=6.9.0"
+        "node": "^14 || ^16 || >=18.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.31"
       }
     },
-    "node_modules/@svgr/webpack/node_modules/@babel/types": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.5.tgz",
-      "integrity": "sha512-M/NzBpEL95I5Hh4dwhin5JlE7EzO5PHMAuzjxss3tiOBD46KfQvVedN/3jEPZvdRvtsK2222XfdHogNIttFgcg==",
-      "dev": true,
+    "node_modules/csso": {
+      "version": "5.0.5",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-validator-identifier": "^7.14.5",
-        "to-fast-properties": "^2.0.0"
+        "css-tree": "~2.2.0"
       },
       "engines": {
-        "node": ">=6.9.0"
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
+        "npm": ">=7.0.0"
       }
     },
-    "node_modules/@svgr/webpack/node_modules/gensync": {
-      "version": "1.0.0-beta.2",
-      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
-      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
-      "dev": true,
+    "node_modules/csso/node_modules/css-tree": {
+      "version": "2.2.1",
+      "license": "MIT",
+      "dependencies": {
+        "mdn-data": "2.0.28",
+        "source-map-js": "^1.0.1"
+      },
       "engines": {
-        "node": ">=6.9.0"
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
+        "npm": ">=7.0.0"
       }
     },
-    "node_modules/@svgr/webpack/node_modules/semver": {
-      "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-      "dev": true,
-      "bin": {
-        "semver": "bin/semver.js"
-      }
+    "node_modules/csso/node_modules/mdn-data": {
+      "version": "2.0.28",
+      "license": "CC0-1.0"
     },
-    "node_modules/@svgr/webpack/node_modules/source-map": {
-      "version": "0.5.7",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-      "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
+    "node_modules/cssom": {
+      "version": "0.5.0",
+      "license": "MIT"
     },
-    "node_modules/@testing-library/dom": {
-      "version": "7.21.4",
-      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-7.21.4.tgz",
-      "integrity": "sha512-IXjKRTAH31nQ+mx6q3IPw85RTLul8VlWBm1rxURoxDt7JI0HPlAAfbtrKTdeq83XYCYO7HSHogyV+OsD+6FX0Q==",
-      "dev": true,
+    "node_modules/cssstyle": {
+      "version": "2.3.0",
+      "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.10.3",
-        "@types/aria-query": "^4.2.0",
-        "aria-query": "^4.2.2",
-        "dom-accessibility-api": "^0.4.6",
-        "pretty-format": "^25.5.0"
+        "cssom": "~0.3.6"
       },
       "engines": {
-        "node": ">=10"
+        "node": ">=8"
       }
     },
-    "node_modules/@testing-library/dom/node_modules/aria-query": {
-      "version": "4.2.2",
-      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-4.2.2.tgz",
-      "integrity": "sha512-o/HelwhuKpTj/frsOsbNLNgnNGVIFsVP/SW2BSF14gVl7kAfMOJ6/8wUAUvG1R1NHKrfG+2sHZTu0yauT1qBrA==",
-      "dev": true,
+    "node_modules/cssstyle/node_modules/cssom": {
+      "version": "0.3.8",
+      "license": "MIT"
+    },
+    "node_modules/csstype": {
+      "version": "3.1.3",
+      "license": "MIT"
+    },
+    "node_modules/damerau-levenshtein": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
+      "integrity": "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA=="
+    },
+    "node_modules/data-urls": {
+      "version": "3.0.2",
+      "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.10.2",
-        "@babel/runtime-corejs3": "^7.10.2"
+        "abab": "^2.0.6",
+        "whatwg-mimetype": "^3.0.0",
+        "whatwg-url": "^11.0.0"
       },
       "engines": {
-        "node": ">=6.0"
+        "node": ">=12"
       }
     },
-    "node_modules/@testing-library/jest-dom": {
-      "version": "5.11.10",
-      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.11.10.tgz",
-      "integrity": "sha512-FuKiq5xuk44Fqm0000Z9w0hjOdwZRNzgx7xGGxQYepWFZy+OYUMOT/wPI4nLYXCaVltNVpU1W/qmD88wLWDsqQ==",
-      "dev": true,
+    "node_modules/data-urls/node_modules/tr46": {
+      "version": "3.0.0",
+      "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.9.2",
-        "@types/testing-library__jest-dom": "^5.9.1",
-        "aria-query": "^4.2.2",
-        "chalk": "^3.0.0",
-        "css": "^3.0.0",
-        "css.escape": "^1.5.1",
-        "lodash": "^4.17.15",
-        "redent": "^3.0.0"
+        "punycode": "^2.1.1"
       },
       "engines": {
-        "node": ">=8",
-        "npm": ">=6",
-        "yarn": ">=1"
+        "node": ">=12"
       }
     },
-    "node_modules/@testing-library/jest-dom/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,
+    "node_modules/data-urls/node_modules/whatwg-url": {
+      "version": "11.0.0",
+      "license": "MIT",
       "dependencies": {
-        "color-convert": "^2.0.1"
+        "tr46": "^3.0.0",
+        "webidl-conversions": "^7.0.0"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">=12"
       }
     },
-    "node_modules/@testing-library/jest-dom/node_modules/aria-query": {
-      "version": "4.2.2",
-      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-4.2.2.tgz",
-      "integrity": "sha512-o/HelwhuKpTj/frsOsbNLNgnNGVIFsVP/SW2BSF14gVl7kAfMOJ6/8wUAUvG1R1NHKrfG+2sHZTu0yauT1qBrA==",
-      "dev": true,
+    "node_modules/data-view-buffer": {
+      "version": "1.0.1",
+      "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.10.2",
-        "@babel/runtime-corejs3": "^7.10.2"
+        "call-bind": "^1.0.6",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.1"
       },
       "engines": {
-        "node": ">=6.0"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/@testing-library/jest-dom/node_modules/chalk": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
-      "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
-      "dev": true,
+    "node_modules/data-view-byte-length": {
+      "version": "1.0.1",
+      "license": "MIT",
       "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
+        "call-bind": "^1.0.7",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.1"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/@testing-library/jest-dom/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,
+    "node_modules/data-view-byte-offset": {
+      "version": "1.0.0",
+      "license": "MIT",
       "dependencies": {
-        "color-name": "~1.1.4"
+        "call-bind": "^1.0.6",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.1"
       },
       "engines": {
-        "node": ">=7.0.0"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/@testing-library/jest-dom/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/@testing-library/jest-dom/node_modules/css": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/css/-/css-3.0.0.tgz",
-      "integrity": "sha512-DG9pFfwOrzc+hawpmqX/dHYHJG+Bsdb0klhyi1sDneOgGOXy9wQIC8hzyVp1e4NRYDBdxcylvywPkkXCHAzTyQ==",
-      "dev": true,
+    "node_modules/date-fns": {
+      "version": "2.30.0",
+      "license": "MIT",
       "dependencies": {
-        "inherits": "^2.0.4",
-        "source-map": "^0.6.1",
-        "source-map-resolve": "^0.6.0"
-      }
-    },
-    "node_modules/@testing-library/jest-dom/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,
+        "@babel/runtime": "^7.21.0"
+      },
       "engines": {
-        "node": ">=8"
+        "node": ">=0.11"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/date-fns"
       }
     },
-    "node_modules/@testing-library/jest-dom/node_modules/indent-string": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
-      "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
+    "node_modules/debounce": {
+      "version": "1.2.1",
+      "license": "MIT"
     },
-    "node_modules/@testing-library/jest-dom/node_modules/redent": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
-      "integrity": "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==",
-      "dev": true,
+    "node_modules/debug": {
+      "version": "4.3.6",
+      "license": "MIT",
       "dependencies": {
-        "indent-string": "^4.0.0",
-        "strip-indent": "^3.0.0"
+        "ms": "2.1.2"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@testing-library/jest-dom/node_modules/source-map-resolve": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.6.0.tgz",
-      "integrity": "sha512-KXBr9d/fO/bWo97NXsPIAW1bFSBOuCnjbNTBMO7N59hsv5i9yzRDfcYwwt0l04+VqnKC+EwzvJZIP/qkuMgR/w==",
+    "node_modules/decamelize": {
+      "version": "5.0.1",
       "dev": true,
-      "dependencies": {
-        "atob": "^2.1.2",
-        "decode-uri-component": "^0.2.0"
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/@testing-library/jest-dom/node_modules/strip-indent": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
-      "integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==",
+    "node_modules/decamelize-keys": {
+      "version": "1.1.1",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "min-indent": "^1.0.0"
+        "decamelize": "^1.1.0",
+        "map-obj": "^1.0.0"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">=0.10.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/@testing-library/jest-dom/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==",
+    "node_modules/decamelize-keys/node_modules/decamelize": {
+      "version": "1.2.0",
       "dev": true,
-      "dependencies": {
-        "has-flag": "^4.0.0"
-      },
+      "license": "MIT",
       "engines": {
-        "node": ">=8"
+        "node": ">=0.10.0"
       }
     },
-    "node_modules/@testing-library/react": {
-      "version": "10.4.7",
-      "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-10.4.7.tgz",
-      "integrity": "sha512-hUYbum3X2f1ZKusKfPaooKNYqE/GtPiQ+D2HJaJ4pkxeNJQFVUEvAvEh9+3QuLdBeTWkDMNY5NSijc5+pGdM4Q==",
+    "node_modules/decamelize-keys/node_modules/map-obj": {
+      "version": "1.0.1",
       "dev": true,
-      "dependencies": {
-        "@babel/runtime": "^7.10.3",
-        "@testing-library/dom": "^7.17.1"
-      },
+      "license": "MIT",
       "engines": {
-        "node": ">=10"
+        "node": ">=0.10.0"
       }
     },
-    "node_modules/@testing-library/user-event": {
-      "version": "13.1.5",
-      "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-13.1.5.tgz",
-      "integrity": "sha512-dD1FRHuWhfdcnb6H9/oaIIZHx9LQKGxbTtYV3i5Zru8I3GWWJoG2WtlAlXZ/56djO+6TvfsWPj5cXQvoTFQATQ==",
-      "dev": true,
+    "node_modules/decimal.js": {
+      "version": "10.4.3",
+      "license": "MIT"
+    },
+    "node_modules/decompress-response": {
+      "version": "6.0.0",
+      "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.12.5"
+        "mimic-response": "^3.1.0"
       },
       "engines": {
-        "node": ">=10",
-        "npm": ">=6"
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/@testing-library/user-event/node_modules/@babel/runtime": {
-      "version": "7.13.17",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.13.17.tgz",
-      "integrity": "sha512-NCdgJEelPTSh+FEFylhnP1ylq848l1z9t9N0j1Lfbcw0+KXGjsTvUmkxy+voLLXB5SOKMbLLx4jxYliGrYQseA==",
-      "dev": true,
-      "dependencies": {
-        "regenerator-runtime": "^0.13.4"
+    "node_modules/dedent": {
+      "version": "1.5.3",
+      "license": "MIT",
+      "peerDependencies": {
+        "babel-plugin-macros": "^3.1.0"
+      },
+      "peerDependenciesMeta": {
+        "babel-plugin-macros": {
+          "optional": true
+        }
       }
     },
-    "node_modules/@tootallnate/once": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz",
-      "integrity": "sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==",
-      "dev": true,
+    "node_modules/deep-diff": {
+      "version": "0.3.8",
+      "license": "MIT"
+    },
+    "node_modules/deep-equal": {
+      "version": "2.2.3",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-buffer-byte-length": "^1.0.0",
+        "call-bind": "^1.0.5",
+        "es-get-iterator": "^1.1.3",
+        "get-intrinsic": "^1.2.2",
+        "is-arguments": "^1.1.1",
+        "is-array-buffer": "^3.0.2",
+        "is-date-object": "^1.0.5",
+        "is-regex": "^1.1.4",
+        "is-shared-array-buffer": "^1.0.2",
+        "isarray": "^2.0.5",
+        "object-is": "^1.1.5",
+        "object-keys": "^1.1.1",
+        "object.assign": "^4.1.4",
+        "regexp.prototype.flags": "^1.5.1",
+        "side-channel": "^1.0.4",
+        "which-boxed-primitive": "^1.0.2",
+        "which-collection": "^1.0.1",
+        "which-typed-array": "^1.1.13"
+      },
       "engines": {
-        "node": ">= 6"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/@trysound/sax": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.1.1.tgz",
-      "integrity": "sha512-Z6DoceYb/1xSg5+e+ZlPZ9v0N16ZvZ+wYMraFue4HYrE4ttONKtsvruIRf6t9TBR0YvSOfi1hUU0fJfBLCDYow==",
-      "dev": true,
+    "node_modules/deep-extend": {
+      "version": "0.6.0",
+      "license": "MIT",
       "engines": {
-        "node": ">=10.13.0"
+        "node": ">=4.0.0"
       }
     },
-    "node_modules/@types/aria-query": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-4.2.0.tgz",
-      "integrity": "sha512-iIgQNzCm0v7QMhhe4Jjn9uRh+I6GoPmt03CbEtwx3ao8/EfoQcmgtqH4vQ5Db/lxiIGaWDv6nwvunuh0RyX0+A==",
-      "dev": true
+    "node_modules/deep-is": {
+      "version": "0.1.4",
+      "license": "MIT"
     },
-    "node_modules/@types/babel__core": {
-      "version": "7.1.9",
-      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.1.9.tgz",
-      "integrity": "sha512-sY2RsIJ5rpER1u3/aQ8OFSI7qGIy8o1NEEbgb2UaJcvOtXOMpd39ko723NBpjQFg9SIX7TXtjejZVGeIMLhoOw==",
-      "dev": true,
-      "dependencies": {
-        "@babel/parser": "^7.1.0",
-        "@babel/types": "^7.0.0",
-        "@types/babel__generator": "*",
-        "@types/babel__template": "*",
-        "@types/babel__traverse": "*"
+    "node_modules/deepmerge": {
+      "version": "4.3.1",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
       }
     },
-    "node_modules/@types/babel__generator": {
-      "version": "7.6.1",
-      "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.6.1.tgz",
-      "integrity": "sha512-bBKm+2VPJcMRVwNhxKu8W+5/zT7pwNEqeokFOmbvVSqGzFneNxYcEBro9Ac7/N9tlsaPYnZLK8J1LWKkMsLAew==",
-      "dev": true,
+    "node_modules/default-gateway": {
+      "version": "6.0.3",
+      "license": "BSD-2-Clause",
       "dependencies": {
-        "@babel/types": "^7.0.0"
+        "execa": "^5.0.0"
+      },
+      "engines": {
+        "node": ">= 10"
       }
     },
-    "node_modules/@types/babel__template": {
-      "version": "7.0.2",
-      "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.0.2.tgz",
-      "integrity": "sha512-/K6zCpeW7Imzgab2bLkLEbz0+1JlFSrUMdw7KoIIu+IUdu51GWaBZpd3y1VXGVXzynvGa4DaIaxNZHiON3GXUg==",
-      "dev": true,
+    "node_modules/defaults": {
+      "version": "1.0.4",
+      "license": "MIT",
       "dependencies": {
-        "@babel/parser": "^7.1.0",
-        "@babel/types": "^7.0.0"
+        "clone": "^1.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/@types/babel__traverse": {
-      "version": "7.0.13",
-      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.0.13.tgz",
-      "integrity": "sha512-i+zS7t6/s9cdQvbqKDARrcbrPvtJGlbYsMkazo03nTAK3RX9FNrLllXys22uiTGJapPOTZTQ35nHh4ISph4SLQ==",
-      "dev": true,
+    "node_modules/define-data-property": {
+      "version": "1.1.4",
+      "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.3.0"
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/@types/color-name": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz",
-      "integrity": "sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==",
-      "dev": true
-    },
-    "node_modules/@types/cookie": {
-      "version": "0.3.3",
-      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.3.3.tgz",
-      "integrity": "sha512-LKVP3cgXBT9RYj+t+9FDKwS5tdI+rPBXaNSkma7hvqy35lc7mAokC2zsqWJH0LaqIt3B962nuYI77hsJoT1gow=="
-    },
-    "node_modules/@types/eslint": {
-      "version": "7.2.14",
-      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.2.14.tgz",
-      "integrity": "sha512-pESyhSbUOskqrGcaN+bCXIQDyT5zTaRWfj5ZjjSlMatgGjIn3QQPfocAu4WSabUR7CGyLZ2CQaZyISOEX7/saw==",
-      "dev": true,
-      "dependencies": {
-        "@types/estree": "*",
-        "@types/json-schema": "*"
+    "node_modules/define-lazy-prop": {
+      "version": "2.0.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
       }
     },
-    "node_modules/@types/eslint-scope": {
-      "version": "3.7.1",
-      "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.1.tgz",
-      "integrity": "sha512-SCFeogqiptms4Fg29WpOTk5nHIzfpKCemSN63ksBQYKTcXoJEmJagV+DhVmbapZzY4/5YaOV1nZwrsU79fFm1g==",
-      "dev": true,
+    "node_modules/define-properties": {
+      "version": "1.2.1",
+      "license": "MIT",
       "dependencies": {
-        "@types/eslint": "*",
-        "@types/estree": "*"
+        "define-data-property": "^1.0.1",
+        "has-property-descriptors": "^1.0.0",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/@types/estree": {
-      "version": "0.0.46",
-      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.46.tgz",
-      "integrity": "sha512-laIjwTQaD+5DukBZaygQ79K1Z0jb1bPEMRrkXSLjtCcZm+abyp5YbrqpSLzD42FwWW6gK/aS4NYpJ804nG2brg==",
-      "dev": true
-    },
-    "node_modules/@types/fs-extra": {
-      "version": "9.0.12",
-      "resolved": "https://registry.npmjs.org/@types/fs-extra/-/fs-extra-9.0.12.tgz",
-      "integrity": "sha512-I+bsBr67CurCGnSenZZ7v94gd3tc3+Aj2taxMT4yu4ABLuOgOjeFxX3dokG24ztSRg5tnT00sL8BszO7gSMoIw==",
-      "dev": true,
+    "node_modules/del": {
+      "version": "4.1.1",
+      "license": "MIT",
       "dependencies": {
-        "@types/node": "*"
+        "@types/glob": "^7.1.1",
+        "globby": "^6.1.0",
+        "is-path-cwd": "^2.0.0",
+        "is-path-in-cwd": "^2.0.0",
+        "p-map": "^2.0.0",
+        "pify": "^4.0.1",
+        "rimraf": "^2.6.3"
+      },
+      "engines": {
+        "node": ">=6"
       }
     },
-    "node_modules/@types/glob": {
-      "version": "7.1.4",
-      "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.1.4.tgz",
-      "integrity": "sha512-w+LsMxKyYQm347Otw+IfBXOv9UWVjpHpCDdbBMt8Kz/xbvCYNjP+0qPh91Km3iKfSRLBB0P7fAMf0KHrPu+MyA==",
-      "dev": true,
+    "node_modules/del/node_modules/array-union": {
+      "version": "1.0.2",
+      "license": "MIT",
       "dependencies": {
-        "@types/minimatch": "*",
-        "@types/node": "*"
+        "array-uniq": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
       }
     },
-    "node_modules/@types/graceful-fs": {
-      "version": "4.1.5",
-      "resolved": "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.5.tgz",
-      "integrity": "sha512-anKkLmZZ+xm4p8JWBf4hElkM4XR+EZeA2M9BAkkTldmcyDY4mbdIJnRghDJH3Ov5ooY7/UAoENtmdMSkaAd7Cw==",
-      "dev": true,
+    "node_modules/del/node_modules/globby": {
+      "version": "6.1.0",
+      "license": "MIT",
       "dependencies": {
-        "@types/node": "*"
+        "array-union": "^1.0.1",
+        "glob": "^7.0.3",
+        "object-assign": "^4.0.1",
+        "pify": "^2.0.0",
+        "pinkie-promise": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
       }
     },
-    "node_modules/@types/html-minifier-terser": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-5.1.2.tgz",
-      "integrity": "sha512-h4lTMgMJctJybDp8CQrxTUiiYmedihHWkjnF/8Pxseu2S6Nlfcy8kwboQ8yejh456rP2yWoEVm1sS/FVsfM48w==",
-      "dev": true
+    "node_modules/del/node_modules/globby/node_modules/pify": {
+      "version": "2.3.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
     },
-    "node_modules/@types/http-proxy": {
-      "version": "1.17.7",
-      "resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.7.tgz",
-      "integrity": "sha512-9hdj6iXH64tHSLTY+Vt2eYOGzSogC+JQ2H7bdPWkuh7KXP5qLllWx++t+K9Wk556c3dkDdPws/SpMRi0sdCT1w==",
-      "dev": true,
-      "dependencies": {
-        "@types/node": "*"
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
       }
     },
-    "node_modules/@types/invariant": {
-      "version": "2.2.34",
-      "resolved": "https://registry.npmjs.org/@types/invariant/-/invariant-2.2.34.tgz",
-      "integrity": "sha512-lYUtmJ9BqUN688fGY1U1HZoWT1/Jrmgigx2loq4ZcJpICECm/Om3V314BxdzypO0u5PORKGMM6x0OXaljV1YFg=="
+    "node_modules/depd": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+      "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
+      "engines": {
+        "node": ">= 0.8"
+      }
     },
-    "node_modules/@types/istanbul-lib-coverage": {
+    "node_modules/dequal": {
       "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.3.tgz",
-      "integrity": "sha512-sz7iLqvVUg1gIedBOvlkxPlc8/uVzyS5OwGz1cKjXzkl3FpL3al0crU8YGU1WoHkxn0Wxbw5tyi6hvzJKNzFsw==",
-      "dev": true
-    },
-    "node_modules/@types/istanbul-lib-report": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@types/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz",
-      "integrity": "sha512-plGgXAPfVKFoYfa9NpYDAkseG+g6Jr294RqeqcqDixSbU34MZVJRi/P+7Y8GDpzkEwLaGZZOpKIEmeVZNtKsrg==",
-      "dev": true,
-      "dependencies": {
-        "@types/istanbul-lib-coverage": "*"
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
       }
     },
-    "node_modules/@types/istanbul-reports": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-1.1.2.tgz",
-      "integrity": "sha512-P/W9yOX/3oPZSpaYOCQzGqgCQRXn0FFO/V8bWrCQs+wLmvVVxk6CRBXALEvNs9OHIatlnlFokfhuDo2ug01ciw==",
-      "dev": true,
-      "dependencies": {
-        "@types/istanbul-lib-coverage": "*",
-        "@types/istanbul-lib-report": "*"
+    "node_modules/destroy": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
+      "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==",
+      "engines": {
+        "node": ">= 0.8",
+        "npm": "1.2.8000 || >= 1.4.16"
       }
     },
-    "node_modules/@types/jest": {
-      "version": "26.0.22",
-      "resolved": "https://registry.npmjs.org/@types/jest/-/jest-26.0.22.tgz",
-      "integrity": "sha512-eeWwWjlqxvBxc4oQdkueW5OF/gtfSceKk4OnOAGlUSwS/liBRtZppbJuz1YkgbrbfGOoeBHun9fOvXnjNwrSOw==",
-      "dev": true,
-      "dependencies": {
-        "jest-diff": "^26.0.0",
-        "pretty-format": "^26.0.0"
+    "node_modules/detect-libc": {
+      "version": "2.0.3",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8"
       }
     },
-    "node_modules/@types/jest/node_modules/@jest/types": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
-      "integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
-      "dev": true,
-      "dependencies": {
-        "@types/istanbul-lib-coverage": "^2.0.0",
-        "@types/istanbul-reports": "^3.0.0",
-        "@types/node": "*",
-        "@types/yargs": "^15.0.0",
-        "chalk": "^4.0.0"
-      },
+    "node_modules/detect-newline": {
+      "version": "3.1.0",
+      "license": "MIT",
       "engines": {
-        "node": ">= 10.14.2"
+        "node": ">=8"
       }
     },
-    "node_modules/@types/jest/node_modules/@types/istanbul-reports": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.0.tgz",
-      "integrity": "sha512-nwKNbvnwJ2/mndE9ItP/zc2TCzw6uuodnF4EHYWD+gCQDVBuRQL5UzbZD0/ezy1iKsFU2ZQiDqg4M9dN4+wZgA==",
-      "dev": true,
-      "dependencies": {
-        "@types/istanbul-lib-report": "*"
-      }
+    "node_modules/detect-node": {
+      "version": "2.1.0",
+      "license": "MIT"
     },
-    "node_modules/@types/jest/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,
+    "node_modules/detect-node-es": {
+      "version": "1.1.0",
+      "license": "MIT"
+    },
+    "node_modules/detect-port-alt": {
+      "version": "1.1.6",
+      "license": "MIT",
       "dependencies": {
-        "color-convert": "^2.0.1"
+        "address": "^1.0.1",
+        "debug": "^2.6.0"
+      },
+      "bin": {
+        "detect": "bin/detect-port",
+        "detect-port": "bin/detect-port"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">= 4.2.1"
       }
     },
-    "node_modules/@types/jest/node_modules/chalk": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
-      "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
-      "dev": true,
+    "node_modules/detect-port-alt/node_modules/debug": {
+      "version": "2.6.9",
+      "license": "MIT",
       "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
-      },
-      "engines": {
-        "node": ">=10"
+        "ms": "2.0.0"
       }
     },
-    "node_modules/@types/jest/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"
-      },
+    "node_modules/detect-port-alt/node_modules/ms": {
+      "version": "2.0.0",
+      "license": "MIT"
+    },
+    "node_modules/diacritics": {
+      "version": "1.3.0",
+      "license": "MIT"
+    },
+    "node_modules/diff-sequences": {
+      "version": "29.6.3",
+      "license": "MIT",
       "engines": {
-        "node": ">=7.0.0"
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
-    "node_modules/@types/jest/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/@types/jest/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,
+    "node_modules/dir-glob": {
+      "version": "3.0.1",
+      "license": "MIT",
+      "dependencies": {
+        "path-type": "^4.0.0"
+      },
       "engines": {
         "node": ">=8"
       }
     },
-    "node_modules/@types/jest/node_modules/pretty-format": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-26.6.2.tgz",
-      "integrity": "sha512-7AeGuCYNGmycyQbCqd/3PWH4eOoX/OiCa0uphp57NVTeAGdJGaAliecxwBDHYQCIvrW7aDBZCYeNTP/WX69mkg==",
-      "dev": true,
+    "node_modules/dns-packet": {
+      "version": "5.6.1",
+      "license": "MIT",
       "dependencies": {
-        "@jest/types": "^26.6.2",
-        "ansi-regex": "^5.0.0",
-        "ansi-styles": "^4.0.0",
-        "react-is": "^17.0.1"
+        "@leichtgewicht/ip-codec": "^2.0.1"
       },
       "engines": {
-        "node": ">= 10"
+        "node": ">=6"
       }
     },
-    "node_modules/@types/jest/node_modules/react-is": {
-      "version": "17.0.2",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
-      "dev": true
-    },
-    "node_modules/@types/jest/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,
+    "node_modules/doctrine": {
+      "version": "3.0.0",
+      "license": "Apache-2.0",
       "dependencies": {
-        "has-flag": "^4.0.0"
+        "esutils": "^2.0.2"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">=6.0.0"
       }
     },
-    "node_modules/@types/json-schema": {
-      "version": "7.0.8",
-      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.8.tgz",
-      "integrity": "sha512-YSBPTLTVm2e2OoQIDYx8HaeWJ5tTToLH67kXR7zYNGupXMEHa2++G8k+DczX2cFVgalypqtyZIcU19AFcmOpmg==",
-      "dev": true
-    },
-    "node_modules/@types/minimatch": {
-      "version": "3.0.5",
-      "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.5.tgz",
-      "integrity": "sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ==",
-      "dev": true
-    },
-    "node_modules/@types/node": {
-      "version": "14.14.28",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.28.tgz",
-      "integrity": "sha512-lg55ArB+ZiHHbBBttLpzD07akz0QPrZgUODNakeC09i62dnrywr9mFErHuaPlB6I7z+sEbK+IYmplahvplCj2g==",
-      "dev": true
-    },
-    "node_modules/@types/normalize-package-data": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/@types/normalize-package-data/-/normalize-package-data-2.4.0.tgz",
-      "integrity": "sha512-f5j5b/Gf71L+dbqxIpQ4Z2WlmI/mPJ0fOkGGmFgtb6sAu97EPczzbS3/tJKxmcYDj55OX6ssqwDAWOHIYDRDGA==",
-      "dev": true
-    },
-    "node_modules/@types/parse-json": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
-      "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==",
-      "dev": true
-    },
-    "node_modules/@types/prettier": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.3.2.tgz",
-      "integrity": "sha512-eI5Yrz3Qv4KPUa/nSIAi0h+qX0XyewOliug5F2QAtuRg6Kjg6jfmxe1GIwoIRhZspD1A0RP8ANrPwvEXXtRFog==",
-      "dev": true
-    },
-    "node_modules/@types/prop-types": {
-      "version": "15.7.4",
-      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz",
-      "integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ=="
-    },
-    "node_modules/@types/q": {
-      "version": "1.5.5",
-      "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.5.tgz",
-      "integrity": "sha512-L28j2FcJfSZOnL1WBjDYp2vUHCeIFlyYI/53EwD/rKUBQ7MtUUfbQWiyKJGpcnv4/WgrhWsFKrcPstcAt/J0tQ==",
-      "dev": true
+    "node_modules/dom-accessibility-api": {
+      "version": "0.5.16",
+      "dev": true,
+      "license": "MIT"
     },
-    "node_modules/@types/react": {
-      "version": "17.0.14",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.14.tgz",
-      "integrity": "sha512-0WwKHUbWuQWOce61UexYuWTGuGY/8JvtUe/dtQ6lR4sZ3UiylHotJeWpf3ArP9+DSGUoLY3wbU59VyMrJps5VQ==",
+    "node_modules/dom-converter": {
+      "version": "0.2.0",
+      "license": "MIT",
       "dependencies": {
-        "@types/prop-types": "*",
-        "@types/scheduler": "*",
-        "csstype": "^3.0.2"
+        "utila": "~0.4"
       }
     },
-    "node_modules/@types/react-transition-group": {
-      "version": "4.4.2",
-      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.2.tgz",
-      "integrity": "sha512-KibDWL6nshuOJ0fu8ll7QnV/LVTo3PzQ9aCPnRUYPfX7eZohHwLIdNHj7pftanREzHNP4/nJa8oeM73uSiavMQ==",
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "license": "MIT",
       "dependencies": {
-        "@types/react": "*"
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
       }
     },
-    "node_modules/@types/react/node_modules/csstype": {
-      "version": "3.0.8",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz",
-      "integrity": "sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw=="
-    },
-    "node_modules/@types/retry": {
-      "version": "0.12.1",
-      "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.1.tgz",
-      "integrity": "sha512-xoDlM2S4ortawSWORYqsdU+2rxdh4LRW9ytc3zmT37RIKQh6IHyKwwtKhKis9ah8ol07DCkZxPt8BBvPjC6v4g==",
-      "dev": true
-    },
-    "node_modules/@types/scheduler": {
-      "version": "0.16.2",
-      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
-      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
-    },
-    "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==",
-      "dev": true,
+    "node_modules/dom-serializer": {
+      "version": "1.4.1",
+      "license": "MIT",
       "dependencies": {
-        "schema-utils": "*"
+        "domelementtype": "^2.0.1",
+        "domhandler": "^4.2.0",
+        "entities": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
       }
     },
-    "node_modules/@types/source-list-map": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz",
-      "integrity": "sha512-K5K+yml8LTo9bWJI/rECfIPrGgxdpeNbj+d53lwN4QjW1MCwlkhUms+gtdzigTeUyBr09+u8BwOIY3MXvHdcsA==",
-      "dev": true
-    },
-    "node_modules/@types/stack-utils": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz",
-      "integrity": "sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw==",
-      "dev": true
+    "node_modules/dom-serializer/node_modules/entities": {
+      "version": "2.2.0",
+      "license": "BSD-2-Clause",
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
     },
-    "node_modules/@types/tapable": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.8.tgz",
-      "integrity": "sha512-ipixuVrh2OdNmauvtT51o3d8z12p6LtFW9in7U79der/kwejjdNchQC5UMn5u/KxNoM7VHHOs/l8KS8uHxhODQ==",
-      "dev": true
+    "node_modules/domelementtype": {
+      "version": "2.3.0",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "license": "BSD-2-Clause"
     },
-    "node_modules/@types/testing-library__jest-dom": {
-      "version": "5.9.5",
-      "resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.9.5.tgz",
-      "integrity": "sha512-ggn3ws+yRbOHog9GxnXiEZ/35Mow6YtPZpd7Z5mKDeZS/o7zx3yAle0ov/wjhVB5QT4N2Dt+GNoGCdqkBGCajQ==",
-      "dev": true,
+    "node_modules/domexception": {
+      "version": "4.0.0",
+      "license": "MIT",
       "dependencies": {
-        "@types/jest": "*"
+        "webidl-conversions": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
       }
     },
-    "node_modules/@types/uglify-js": {
-      "version": "3.13.1",
-      "resolved": "https://registry.npmjs.org/@types/uglify-js/-/uglify-js-3.13.1.tgz",
-      "integrity": "sha512-O3MmRAk6ZuAKa9CHgg0Pr0+lUOqoMLpc9AS4R8ano2auvsg7IE8syF3Xh/NPr26TWklxYcqoEEFdzLLs1fV9PQ==",
-      "dev": true,
+    "node_modules/domhandler": {
+      "version": "4.3.1",
+      "license": "BSD-2-Clause",
       "dependencies": {
-        "source-map": "^0.6.1"
+        "domelementtype": "^2.2.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
       }
     },
-    "node_modules/@types/warning": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz",
-      "integrity": "sha1-DSUBJorY+ZYrdA04fEZU9fjiPlI="
-    },
-    "node_modules/@types/webpack": {
-      "version": "4.41.30",
-      "resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.30.tgz",
-      "integrity": "sha512-GUHyY+pfuQ6haAfzu4S14F+R5iGRwN6b2FRNJY7U0NilmFAqbsOfK6j1HwuLBAqwRIT+pVdNDJGJ6e8rpp0KHA==",
-      "dev": true,
+    "node_modules/domutils": {
+      "version": "2.8.0",
+      "license": "BSD-2-Clause",
       "dependencies": {
-        "@types/node": "*",
-        "@types/tapable": "^1",
-        "@types/uglify-js": "*",
-        "@types/webpack-sources": "*",
-        "anymatch": "^3.0.0",
-        "source-map": "^0.6.0"
+        "dom-serializer": "^1.0.1",
+        "domelementtype": "^2.2.0",
+        "domhandler": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
       }
     },
-    "node_modules/@types/webpack-sources": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/@types/webpack-sources/-/webpack-sources-2.1.1.tgz",
-      "integrity": "sha512-MjM1R6iuw8XaVbtkCBz0N349cyqBjJHCbQiOeppe3VBeFvxqs74RKHAVt9LkxTnUWc7YLZOEsUfPUnmK6SBPKQ==",
-      "dev": true,
+    "node_modules/dot-case": {
+      "version": "3.0.4",
+      "license": "MIT",
       "dependencies": {
-        "@types/node": "*",
-        "@types/source-list-map": "*",
-        "source-map": "^0.7.3"
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3"
       }
     },
-    "node_modules/@types/webpack-sources/node_modules/source-map": {
-      "version": "0.7.3",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
-      "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
-      "dev": true,
+    "node_modules/dotenv": {
+      "version": "8.6.0",
+      "license": "BSD-2-Clause",
       "engines": {
-        "node": ">= 8"
+        "node": ">=10"
       }
     },
-    "node_modules/@types/webpack/node_modules/anymatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
-      "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
-      "dev": true,
+    "node_modules/dotenv-defaults": {
+      "version": "2.0.2",
+      "license": "MIT",
       "dependencies": {
-        "normalize-path": "^3.0.0",
-        "picomatch": "^2.0.4"
-      },
-      "engines": {
-        "node": ">= 8"
+        "dotenv": "^8.2.0"
       }
     },
-    "node_modules/@types/yargs": {
-      "version": "15.0.5",
-      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.5.tgz",
-      "integrity": "sha512-Dk/IDOPtOgubt/IaevIUbTgV7doaKkoorvOyYM2CMwuDyP89bekI7H4xLIwunNYiK9jhCkmc6pUrJk3cj2AB9w==",
-      "dev": true,
+    "node_modules/dotenv-webpack": {
+      "version": "8.0.1",
+      "license": "MIT",
       "dependencies": {
-        "@types/yargs-parser": "*"
+        "dotenv-defaults": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "webpack": "^4 || ^5"
       }
     },
-    "node_modules/@types/yargs-parser": {
-      "version": "15.0.0",
-      "resolved": "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-15.0.0.tgz",
-      "integrity": "sha512-FA/BWv8t8ZWJ+gEOnLLd8ygxH/2UFbAvgEonyfN6yWGLKc7zVjbpl2Y4CTjid9h2RfgPP6SEt6uHwEOply00yw==",
-      "dev": true
+    "node_modules/duplexer": {
+      "version": "0.1.2",
+      "license": "MIT"
     },
-    "node_modules/@webassemblyjs/ast": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.0.tgz",
-      "integrity": "sha512-kX2W49LWsbthrmIRMbQZuQDhGtjyqXfEmmHyEi4XWnSZtPmxY0+3anPIzsnRb45VH/J55zlOfWvZuY47aJZTJg==",
-      "dev": true,
+    "node_modules/ee-first": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
+      "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow=="
+    },
+    "node_modules/ejs": {
+      "version": "3.1.10",
+      "license": "Apache-2.0",
       "dependencies": {
-        "@webassemblyjs/helper-numbers": "1.11.0",
-        "@webassemblyjs/helper-wasm-bytecode": "1.11.0"
+        "jake": "^10.8.5"
+      },
+      "bin": {
+        "ejs": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">=0.10.0"
       }
     },
-    "node_modules/@webassemblyjs/floating-point-hex-parser": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.11.0.tgz",
-      "integrity": "sha512-Q/aVYs/VnPDVYvsCBL/gSgwmfjeCb4LW8+TMrO3cSzJImgv8lxxEPM2JA5jMrivE7LSz3V+PFqtMbls3m1exDA==",
-      "dev": true
-    },
-    "node_modules/@webassemblyjs/helper-api-error": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.0.tgz",
-      "integrity": "sha512-baT/va95eXiXb2QflSx95QGT5ClzWpGaa8L7JnJbgzoYeaA27FCvuBXU758l+KXWRndEmUXjP0Q5fibhavIn8w==",
-      "dev": true
-    },
-    "node_modules/@webassemblyjs/helper-buffer": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.11.0.tgz",
-      "integrity": "sha512-u9HPBEl4DS+vA8qLQdEQ6N/eJQ7gT7aNvMIo8AAWvAl/xMrcOSiI2M0MAnMCy3jIFke7bEee/JwdX1nUpCtdyA==",
-      "dev": true
+    "node_modules/electron-to-chromium": {
+      "version": "1.5.6",
+      "license": "ISC"
     },
-    "node_modules/@webassemblyjs/helper-numbers": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.11.0.tgz",
-      "integrity": "sha512-DhRQKelIj01s5IgdsOJMKLppI+4zpmcMQ3XboFPLwCpSNH6Hqo1ritgHgD0nqHeSYqofA6aBN/NmXuGjM1jEfQ==",
-      "dev": true,
+    "node_modules/email-prop-type": {
+      "version": "3.0.1",
+      "license": "MIT",
       "dependencies": {
-        "@webassemblyjs/floating-point-hex-parser": "1.11.0",
-        "@webassemblyjs/helper-api-error": "1.11.0",
-        "@xtuc/long": "4.2.2"
+        "email-validator": "^2.0.4"
       }
     },
-    "node_modules/@webassemblyjs/helper-wasm-bytecode": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.11.0.tgz",
-      "integrity": "sha512-MbmhvxXExm542tWREgSFnOVo07fDpsBJg3sIl6fSp9xuu75eGz5lz31q7wTLffwL3Za7XNRCMZy210+tnsUSEA==",
-      "dev": true
-    },
-    "node_modules/@webassemblyjs/helper-wasm-section": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.11.0.tgz",
-      "integrity": "sha512-3Eb88hcbfY/FCukrg6i3EH8H2UsD7x8Vy47iVJrP967A9JGqgBVL9aH71SETPx1JrGsOUVLo0c7vMCN22ytJew==",
-      "dev": true,
-      "dependencies": {
-        "@webassemblyjs/ast": "1.11.0",
-        "@webassemblyjs/helper-buffer": "1.11.0",
-        "@webassemblyjs/helper-wasm-bytecode": "1.11.0",
-        "@webassemblyjs/wasm-gen": "1.11.0"
+    "node_modules/email-validator": {
+      "version": "2.0.4",
+      "engines": {
+        "node": ">4.0"
       }
     },
-    "node_modules/@webassemblyjs/ieee754": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.11.0.tgz",
-      "integrity": "sha512-KXzOqpcYQwAfeQ6WbF6HXo+0udBNmw0iXDmEK5sFlmQdmND+tr773Ti8/5T/M6Tl/413ArSJErATd8In3B+WBA==",
-      "dev": true,
-      "dependencies": {
-        "@xtuc/ieee754": "^1.2.0"
+    "node_modules/emittery": {
+      "version": "0.13.1",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/emittery?sponsor=1"
       }
     },
-    "node_modules/@webassemblyjs/leb128": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.11.0.tgz",
-      "integrity": "sha512-aqbsHa1mSQAbeeNcl38un6qVY++hh8OpCOzxhixSYgbRfNWcxJNJQwe2rezK9XEcssJbbWIkblaJRwGMS9zp+g==",
-      "dev": true,
-      "dependencies": {
-        "@xtuc/long": "4.2.2"
+    "node_modules/emoji-regex": {
+      "version": "10.3.0",
+      "license": "MIT"
+    },
+    "node_modules/emojis-list": {
+      "version": "3.0.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
       }
     },
-    "node_modules/@webassemblyjs/utf8": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.11.0.tgz",
-      "integrity": "sha512-A/lclGxH6SpSLSyFowMzO/+aDEPU4hvEiooCMXQPcQFPPJaYcPQNKGOCLUySJsYJ4trbpr+Fs08n4jelkVTGVw==",
-      "dev": true
+    "node_modules/encodeurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
+      "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
+      "engines": {
+        "node": ">= 0.8"
+      }
     },
-    "node_modules/@webassemblyjs/wasm-edit": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.11.0.tgz",
-      "integrity": "sha512-JHQ0damXy0G6J9ucyKVXO2j08JVJ2ntkdJlq1UTiUrIgfGMmA7Ik5VdC/L8hBK46kVJgujkBIoMtT8yVr+yVOQ==",
-      "dev": true,
+    "node_modules/end-of-stream": {
+      "version": "1.4.4",
+      "license": "MIT",
       "dependencies": {
-        "@webassemblyjs/ast": "1.11.0",
-        "@webassemblyjs/helper-buffer": "1.11.0",
-        "@webassemblyjs/helper-wasm-bytecode": "1.11.0",
-        "@webassemblyjs/helper-wasm-section": "1.11.0",
-        "@webassemblyjs/wasm-gen": "1.11.0",
-        "@webassemblyjs/wasm-opt": "1.11.0",
-        "@webassemblyjs/wasm-parser": "1.11.0",
-        "@webassemblyjs/wast-printer": "1.11.0"
+        "once": "^1.4.0"
       }
     },
-    "node_modules/@webassemblyjs/wasm-gen": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.11.0.tgz",
-      "integrity": "sha512-BEUv1aj0WptCZ9kIS30th5ILASUnAPEvE3tVMTrItnZRT9tXCLW2LEXT8ezLw59rqPP9klh9LPmpU+WmRQmCPQ==",
+    "node_modules/enhanced-resolve": {
+      "version": "0.9.1",
       "dev": true,
       "dependencies": {
-        "@webassemblyjs/ast": "1.11.0",
-        "@webassemblyjs/helper-wasm-bytecode": "1.11.0",
-        "@webassemblyjs/ieee754": "1.11.0",
-        "@webassemblyjs/leb128": "1.11.0",
-        "@webassemblyjs/utf8": "1.11.0"
+        "graceful-fs": "^4.1.2",
+        "memory-fs": "^0.2.0",
+        "tapable": "^0.1.8"
+      },
+      "engines": {
+        "node": ">=0.6"
       }
     },
-    "node_modules/@webassemblyjs/wasm-opt": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.11.0.tgz",
-      "integrity": "sha512-tHUSP5F4ywyh3hZ0+fDQuWxKx3mJiPeFufg+9gwTpYp324mPCQgnuVKwzLTZVqj0duRDovnPaZqDwoyhIO8kYg==",
-      "dev": true,
-      "dependencies": {
-        "@webassemblyjs/ast": "1.11.0",
-        "@webassemblyjs/helper-buffer": "1.11.0",
-        "@webassemblyjs/wasm-gen": "1.11.0",
-        "@webassemblyjs/wasm-parser": "1.11.0"
+    "node_modules/entities": {
+      "version": "4.5.0",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
       }
     },
-    "node_modules/@webassemblyjs/wasm-parser": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.11.0.tgz",
-      "integrity": "sha512-6L285Sgu9gphrcpDXINvm0M9BskznnzJTE7gYkjDbxET28shDqp27wpruyx3C2S/dvEwiigBwLA1cz7lNUi0kw==",
-      "dev": true,
+    "node_modules/envinfo": {
+      "version": "7.13.0",
+      "license": "MIT",
+      "bin": {
+        "envinfo": "dist/cli.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/error-ex": {
+      "version": "1.3.2",
+      "license": "MIT",
       "dependencies": {
-        "@webassemblyjs/ast": "1.11.0",
-        "@webassemblyjs/helper-api-error": "1.11.0",
-        "@webassemblyjs/helper-wasm-bytecode": "1.11.0",
-        "@webassemblyjs/ieee754": "1.11.0",
-        "@webassemblyjs/leb128": "1.11.0",
-        "@webassemblyjs/utf8": "1.11.0"
+        "is-arrayish": "^0.2.1"
       }
     },
-    "node_modules/@webassemblyjs/wast-printer": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.11.0.tgz",
-      "integrity": "sha512-Fg5OX46pRdTgB7rKIUojkh9vXaVN6sGYCnEiJN1GYkb0RPwShZXp6KTDqmoMdQPKhcroOXh3fEzmkWmCYaKYhQ==",
-      "dev": true,
+    "node_modules/error-stack-parser": {
+      "version": "2.1.4",
+      "license": "MIT",
       "dependencies": {
-        "@webassemblyjs/ast": "1.11.0",
-        "@xtuc/long": "4.2.2"
+        "stackframe": "^1.3.4"
       }
     },
-    "node_modules/@webpack-cli/configtest": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-1.0.4.tgz",
-      "integrity": "sha512-cs3XLy+UcxiP6bj0A6u7MLLuwdXJ1c3Dtc0RkKg+wiI1g/Ti1om8+/2hc2A2B60NbBNAbMgyBMHvyymWm/j4wQ==",
-      "dev": true
+    "node_modules/es-abstract": {
+      "version": "1.23.3",
+      "license": "MIT",
+      "dependencies": {
+        "array-buffer-byte-length": "^1.0.1",
+        "arraybuffer.prototype.slice": "^1.0.3",
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.7",
+        "data-view-buffer": "^1.0.1",
+        "data-view-byte-length": "^1.0.1",
+        "data-view-byte-offset": "^1.0.0",
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "es-set-tostringtag": "^2.0.3",
+        "es-to-primitive": "^1.2.1",
+        "function.prototype.name": "^1.1.6",
+        "get-intrinsic": "^1.2.4",
+        "get-symbol-description": "^1.0.2",
+        "globalthis": "^1.0.3",
+        "gopd": "^1.0.1",
+        "has-property-descriptors": "^1.0.2",
+        "has-proto": "^1.0.3",
+        "has-symbols": "^1.0.3",
+        "hasown": "^2.0.2",
+        "internal-slot": "^1.0.7",
+        "is-array-buffer": "^3.0.4",
+        "is-callable": "^1.2.7",
+        "is-data-view": "^1.0.1",
+        "is-negative-zero": "^2.0.3",
+        "is-regex": "^1.1.4",
+        "is-shared-array-buffer": "^1.0.3",
+        "is-string": "^1.0.7",
+        "is-typed-array": "^1.1.13",
+        "is-weakref": "^1.0.2",
+        "object-inspect": "^1.13.1",
+        "object-keys": "^1.1.1",
+        "object.assign": "^4.1.5",
+        "regexp.prototype.flags": "^1.5.2",
+        "safe-array-concat": "^1.1.2",
+        "safe-regex-test": "^1.0.3",
+        "string.prototype.trim": "^1.2.9",
+        "string.prototype.trimend": "^1.0.8",
+        "string.prototype.trimstart": "^1.0.8",
+        "typed-array-buffer": "^1.0.2",
+        "typed-array-byte-length": "^1.0.1",
+        "typed-array-byte-offset": "^1.0.2",
+        "typed-array-length": "^1.0.6",
+        "unbox-primitive": "^1.0.2",
+        "which-typed-array": "^1.1.15"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
     },
-    "node_modules/@webpack-cli/info": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-1.3.0.tgz",
-      "integrity": "sha512-ASiVB3t9LOKHs5DyVUcxpraBXDOKubYu/ihHhU+t1UPpxsivg6Od2E2qU4gJCekfEddzRBzHhzA/Acyw/mlK/w==",
-      "dev": true,
+    "node_modules/es-define-property": {
+      "version": "1.0.0",
+      "license": "MIT",
       "dependencies": {
-        "envinfo": "^7.7.3"
+        "get-intrinsic": "^1.2.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
       }
     },
-    "node_modules/@webpack-cli/serve": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-1.5.1.tgz",
-      "integrity": "sha512-4vSVUiOPJLmr45S8rMGy7WDvpWxfFxfP/Qx/cxZFCfvoypTYpPPL1X8VIZMe0WTA+Jr7blUxwUSEZNkjoMTgSw==",
-      "dev": true
-    },
-    "node_modules/@xtuc/ieee754": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
-      "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==",
-      "dev": true
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
     },
-    "node_modules/@xtuc/long": {
-      "version": "4.2.2",
-      "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
-      "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==",
-      "dev": true
+    "node_modules/es-get-iterator": {
+      "version": "1.1.3",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.1.3",
+        "has-symbols": "^1.0.3",
+        "is-arguments": "^1.1.1",
+        "is-map": "^2.0.2",
+        "is-set": "^2.0.2",
+        "is-string": "^1.0.7",
+        "isarray": "^2.0.5",
+        "stop-iteration-iterator": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
     },
-    "node_modules/abab": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.3.tgz",
-      "integrity": "sha512-tsFzPpcttalNjFBCFMqsKYQcWxxen1pgJR56by//QwvJc4/OUS3kPOOttx2tSIfjsylB0pYu7f5D3K1RCxUnUg==",
-      "dev": true
+    "node_modules/es-module-lexer": {
+      "version": "1.5.4",
+      "license": "MIT"
     },
-    "node_modules/accepts": {
-      "version": "1.3.7",
-      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz",
-      "integrity": "sha512-Il80Qs2WjYlJIBNzNkK6KYqlVMTbZLXgHx2oT0pU/fjRHyEp+PEfEPY0R3WCwAGVOtauxh1hOxNgIf5bv7dQpA==",
-      "dev": true,
+    "node_modules/es-object-atoms": {
+      "version": "1.0.0",
+      "license": "MIT",
       "dependencies": {
-        "mime-types": "~2.1.24",
-        "negotiator": "0.6.2"
+        "es-errors": "^1.3.0"
       },
       "engines": {
-        "node": ">= 0.6"
+        "node": ">= 0.4"
       }
     },
-    "node_modules/acorn": {
-      "version": "7.4.1",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
-      "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
-      "dev": true,
-      "bin": {
-        "acorn": "bin/acorn"
+    "node_modules/es-set-tostringtag": {
+      "version": "2.0.3",
+      "license": "MIT",
+      "dependencies": {
+        "get-intrinsic": "^1.2.4",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.1"
       },
       "engines": {
-        "node": ">=0.4.0"
+        "node": ">= 0.4"
       }
     },
-    "node_modules/acorn-globals": {
-      "version": "4.3.4",
-      "resolved": "https://registry.npmjs.org/acorn-globals/-/acorn-globals-4.3.4.tgz",
-      "integrity": "sha512-clfQEh21R+D0leSbUdWf3OcfqyaCSAQ8Ryq00bofSekfr9W8u1jyYZo6ir0xu9Gtcf7BjcHJpnbZH7JOCpP60A==",
-      "dev": true,
+    "node_modules/es-shim-unscopables": {
+      "version": "1.0.2",
+      "license": "MIT",
       "dependencies": {
-        "acorn": "^6.0.1",
-        "acorn-walk": "^6.0.1"
+        "hasown": "^2.0.0"
       }
     },
-    "node_modules/acorn-globals/node_modules/acorn": {
-      "version": "6.4.1",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.1.tgz",
-      "integrity": "sha512-ZVA9k326Nwrj3Cj9jlh3wGFutC2ZornPNARZwsNYqQYgN0EsV2d53w5RN/co65Ohn4sUAUtb1rSUAOD6XN9idA==",
-      "dev": true,
-      "bin": {
-        "acorn": "bin/acorn"
+    "node_modules/es-to-primitive": {
+      "version": "1.2.1",
+      "license": "MIT",
+      "dependencies": {
+        "is-callable": "^1.1.4",
+        "is-date-object": "^1.0.1",
+        "is-symbol": "^1.0.2"
       },
       "engines": {
-        "node": ">=0.4.0"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/acorn-jsx": {
-      "version": "5.3.1",
-      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.1.tgz",
-      "integrity": "sha512-K0Ptm/47OKfQRpNQ2J/oIN/3QYiK6FwW+eJbILhsdxh2WTLdl+30o8aGdTbm5JbffpFFAg/g+zi1E+jvJha5ng==",
-      "dev": true
-    },
-    "node_modules/acorn-walk": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-6.2.0.tgz",
-      "integrity": "sha512-7evsyfH1cLOCdAzZAd43Cic04yKydNx0cF+7tiA19p1XnLLPU4dpCQOqpjqwokFe//vS0QqfqqjCS2JkiIs0cA==",
-      "dev": true,
+    "node_modules/escalade": {
+      "version": "3.1.2",
+      "license": "MIT",
       "engines": {
-        "node": ">=0.4.0"
+        "node": ">=6"
       }
     },
-    "node_modules/address": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/address/-/address-1.1.2.tgz",
-      "integrity": "sha512-aT6camzM4xEA54YVJYSqxz1kv4IHnQZRtThJJHhUMRExaU5spC7jX5ugSwTaTgJliIgs4VhZOk7htClvQ/LmRA==",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.12.0"
-      }
+    "node_modules/escape-html": {
+      "version": "1.0.3",
+      "license": "MIT"
     },
-    "node_modules/adjust-sourcemap-loader": {
+    "node_modules/escape-string-regexp": {
       "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/adjust-sourcemap-loader/-/adjust-sourcemap-loader-4.0.0.tgz",
-      "integrity": "sha512-OXwN5b9pCUXNQHJpwwD2qP40byEmSgzj8B4ydSN0uMNYWiFmJ6x6KwUllMmfk8Rwu/HJDFR7U8ubsWBoN0Xp0A==",
-      "dev": true,
-      "dependencies": {
-        "loader-utils": "^2.0.0",
-        "regex-parser": "^2.2.11"
-      },
+      "license": "MIT",
       "engines": {
-        "node": ">=8.9"
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/agent-base": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.1.tgz",
-      "integrity": "sha512-01q25QQDwLSsyfhrKbn8yuur+JNw0H+0Y4JiGIKd3z9aYk/w/2kxD/Upc+t2ZBBSUNff50VjPsSW2YxM8QYKVg==",
-      "dev": true,
+    "node_modules/escodegen": {
+      "version": "2.1.0",
+      "license": "BSD-2-Clause",
       "dependencies": {
-        "debug": "4"
+        "esprima": "^4.0.1",
+        "estraverse": "^5.2.0",
+        "esutils": "^2.0.2"
+      },
+      "bin": {
+        "escodegen": "bin/escodegen.js",
+        "esgenerate": "bin/esgenerate.js"
       },
       "engines": {
-        "node": ">= 6.0.0"
+        "node": ">=6.0"
+      },
+      "optionalDependencies": {
+        "source-map": "~0.6.1"
       }
     },
-    "node_modules/agent-base/node_modules/debug": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
-      "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
-      "dev": true,
-      "dependencies": {
-        "ms": "^2.1.1"
+    "node_modules/escodegen/node_modules/source-map": {
+      "version": "0.6.1",
+      "license": "BSD-3-Clause",
+      "optional": true,
+      "engines": {
+        "node": ">=0.10.0"
       }
     },
-    "node_modules/agent-base/node_modules/ms": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-      "dev": true
+    "node_modules/eslint": {
+      "version": "8.57.0",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.2.0",
+        "@eslint-community/regexpp": "^4.6.1",
+        "@eslint/eslintrc": "^2.1.4",
+        "@eslint/js": "8.57.0",
+        "@humanwhocodes/config-array": "^0.11.14",
+        "@humanwhocodes/module-importer": "^1.0.1",
+        "@nodelib/fs.walk": "^1.2.8",
+        "@ungap/structured-clone": "^1.2.0",
+        "ajv": "^6.12.4",
+        "chalk": "^4.0.0",
+        "cross-spawn": "^7.0.2",
+        "debug": "^4.3.2",
+        "doctrine": "^3.0.0",
+        "escape-string-regexp": "^4.0.0",
+        "eslint-scope": "^7.2.2",
+        "eslint-visitor-keys": "^3.4.3",
+        "espree": "^9.6.1",
+        "esquery": "^1.4.2",
+        "esutils": "^2.0.2",
+        "fast-deep-equal": "^3.1.3",
+        "file-entry-cache": "^6.0.1",
+        "find-up": "^5.0.0",
+        "glob-parent": "^6.0.2",
+        "globals": "^13.19.0",
+        "graphemer": "^1.4.0",
+        "ignore": "^5.2.0",
+        "imurmurhash": "^0.1.4",
+        "is-glob": "^4.0.0",
+        "is-path-inside": "^3.0.3",
+        "js-yaml": "^4.1.0",
+        "json-stable-stringify-without-jsonify": "^1.0.1",
+        "levn": "^0.4.1",
+        "lodash.merge": "^4.6.2",
+        "minimatch": "^3.1.2",
+        "natural-compare": "^1.4.0",
+        "optionator": "^0.9.3",
+        "strip-ansi": "^6.0.1",
+        "text-table": "^0.2.0"
+      },
+      "bin": {
+        "eslint": "bin/eslint.js"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
     },
-    "node_modules/aggregate-error": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.1.0.tgz",
-      "integrity": "sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==",
-      "dev": true,
+    "node_modules/eslint-config-airbnb": {
+      "version": "19.0.4",
+      "resolved": "https://registry.npmjs.org/eslint-config-airbnb/-/eslint-config-airbnb-19.0.4.tgz",
+      "integrity": "sha512-T75QYQVQX57jiNgpF9r1KegMICE94VYwoFQyMGhrvc+lB8YF2E/M/PYDaQe1AJcWaEgqLE+ErXV1Og/+6Vyzew==",
       "dependencies": {
-        "clean-stack": "^2.0.0",
-        "indent-string": "^4.0.0"
+        "eslint-config-airbnb-base": "^15.0.0",
+        "object.assign": "^4.1.2",
+        "object.entries": "^1.1.5"
       },
       "engines": {
-        "node": ">=8"
+        "node": "^10.12.0 || ^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "eslint": "^7.32.0 || ^8.2.0",
+        "eslint-plugin-import": "^2.25.3",
+        "eslint-plugin-jsx-a11y": "^6.5.1",
+        "eslint-plugin-react": "^7.28.0",
+        "eslint-plugin-react-hooks": "^4.3.0"
       }
     },
-    "node_modules/aggregate-error/node_modules/indent-string": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
-      "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==",
-      "dev": true,
+    "node_modules/eslint-config-airbnb-base": {
+      "version": "15.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-config-airbnb-base/-/eslint-config-airbnb-base-15.0.0.tgz",
+      "integrity": "sha512-xaX3z4ZZIcFLvh2oUNvcX5oEofXda7giYmuplVxoOg5A7EXJMrUyqRgR+mhDhPK8LZ4PttFOBvCYDbX3sUoUig==",
+      "dependencies": {
+        "confusing-browser-globals": "^1.0.10",
+        "object.assign": "^4.1.2",
+        "object.entries": "^1.1.5",
+        "semver": "^6.3.0"
+      },
       "engines": {
-        "node": ">=8"
+        "node": "^10.12.0 || >=12.0.0"
+      },
+      "peerDependencies": {
+        "eslint": "^7.32.0 || ^8.2.0",
+        "eslint-plugin-import": "^2.25.2"
       }
     },
-    "node_modules/airbnb-prop-types": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/airbnb-prop-types/-/airbnb-prop-types-2.16.0.tgz",
-      "integrity": "sha512-7WHOFolP/6cS96PhKNrslCLMYAI8yB1Pp6u6XmxozQOiZbsI5ycglZr5cHhBFfuRcQQjzCMith5ZPZdYiJCxUg==",
+    "node_modules/eslint-config-airbnb-typescript": {
+      "version": "17.1.0",
+      "resolved": "https://registry.npmjs.org/eslint-config-airbnb-typescript/-/eslint-config-airbnb-typescript-17.1.0.tgz",
+      "integrity": "sha512-GPxI5URre6dDpJ0CtcthSZVBAfI+Uw7un5OYNVxP2EYi3H81Jw701yFP7AU+/vCE7xBtFmjge7kfhhk4+RAiig==",
       "dependencies": {
-        "array.prototype.find": "^2.1.1",
-        "function.prototype.name": "^1.1.2",
-        "is-regex": "^1.1.0",
-        "object-is": "^1.1.2",
-        "object.assign": "^4.1.0",
-        "object.entries": "^1.1.2",
-        "prop-types": "^15.7.2",
-        "prop-types-exact": "^1.2.0",
-        "react-is": "^16.13.1"
+        "eslint-config-airbnb-base": "^15.0.0"
+      },
+      "peerDependencies": {
+        "@typescript-eslint/eslint-plugin": "^5.13.0 || ^6.0.0",
+        "@typescript-eslint/parser": "^5.0.0 || ^6.0.0",
+        "eslint": "^7.32.0 || ^8.2.0",
+        "eslint-plugin-import": "^2.25.3"
       }
     },
-    "node_modules/ajv": {
-      "version": "6.12.3",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.3.tgz",
-      "integrity": "sha512-4K0cK3L1hsqk9xIb2z9vs/XU+PGJZ9PNpJRDS9YLzmNdX6jmVPfamLvTJr0aDAusnHyCHO6MjzlkAsgtqp9teA==",
-      "dev": true,
+    "node_modules/eslint-import-resolver-node": {
+      "version": "0.3.9",
+      "license": "MIT",
       "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "fast-json-stable-stringify": "^2.0.0",
-        "json-schema-traverse": "^0.4.1",
-        "uri-js": "^4.2.2"
+        "debug": "^3.2.7",
+        "is-core-module": "^2.13.0",
+        "resolve": "^1.22.4"
       }
     },
-    "node_modules/ajv-keywords": {
-      "version": "3.5.2",
-      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
-      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-      "dev": true
-    },
-    "node_modules/alphanum-sort": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/alphanum-sort/-/alphanum-sort-1.0.2.tgz",
-      "integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=",
-      "dev": true
-    },
-    "node_modules/ansi": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/ansi/-/ansi-0.3.1.tgz",
-      "integrity": "sha1-DELU+xcWDVqa8eSEus4cZpIsGyE=",
-      "dev": true
-    },
-    "node_modules/ansi-colors": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.1.tgz",
-      "integrity": "sha512-JoX0apGbHaUJBNl6yF+p6JAFYZ666/hhCGKN5t9QFjbJQKUU/g8MNbFDbvfrgKXvI1QpZplPOnwIo99lX/AAmA==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
+    "node_modules/eslint-import-resolver-node/node_modules/debug": {
+      "version": "3.2.7",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.1"
       }
     },
-    "node_modules/ansi-escapes": {
-      "version": "4.3.2",
-      "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
-      "integrity": "sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==",
+    "node_modules/eslint-import-resolver-webpack": {
+      "version": "0.13.9",
+      "resolved": "https://registry.npmjs.org/eslint-import-resolver-webpack/-/eslint-import-resolver-webpack-0.13.9.tgz",
+      "integrity": "sha512-yGngeefNiHXau2yzKKs2BNON4HLpxBabY40BGL/vUSKZtqzjlVsTTZm57jhHULhm+mJEwKsEIIN3NXup5AiiBQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "type-fest": "^0.21.3"
+        "debug": "^3.2.7",
+        "enhanced-resolve": "^0.9.1",
+        "find-root": "^1.1.0",
+        "hasown": "^2.0.0",
+        "interpret": "^1.4.0",
+        "is-core-module": "^2.13.1",
+        "is-regex": "^1.1.4",
+        "lodash": "^4.17.21",
+        "resolve": "^2.0.0-next.5",
+        "semver": "^5.7.2"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">= 6"
+      },
+      "peerDependencies": {
+        "eslint-plugin-import": ">=1.4.0",
+        "webpack": ">=1.11.0"
       }
     },
-    "node_modules/ansi-escapes/node_modules/type-fest": {
-      "version": "0.21.3",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
-      "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==",
+    "node_modules/eslint-import-resolver-webpack/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
       "dev": true,
-      "engines": {
-        "node": ">=10"
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.1"
       }
     },
-    "node_modules/ansi-html": {
-      "version": "0.0.7",
-      "resolved": "https://registry.npmjs.org/ansi-html/-/ansi-html-0.0.7.tgz",
-      "integrity": "sha1-gTWEAhliqenm/QOflA0S9WynhZ4=",
+    "node_modules/eslint-import-resolver-webpack/node_modules/resolve": {
+      "version": "2.0.0-next.5",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.5.tgz",
+      "integrity": "sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA==",
       "dev": true,
-      "engines": [
-        "node >= 0.8.0"
-      ],
+      "license": "MIT",
+      "dependencies": {
+        "is-core-module": "^2.13.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
       "bin": {
-        "ansi-html": "bin/ansi-html"
+        "resolve": "bin/resolve"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/ansi-regex": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
-      "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
+    "node_modules/eslint-import-resolver-webpack/node_modules/semver": {
+      "version": "5.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
       "dev": true,
-      "engines": {
-        "node": ">=8"
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver"
       }
     },
-    "node_modules/ansi-styles": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-      "dev": true,
+    "node_modules/eslint-module-utils": {
+      "version": "2.8.1",
+      "license": "MIT",
       "dependencies": {
-        "color-convert": "^1.9.0"
+        "debug": "^3.2.7"
       },
       "engines": {
         "node": ">=4"
+      },
+      "peerDependenciesMeta": {
+        "eslint": {
+          "optional": true
+        }
       }
     },
-    "node_modules/anymatch": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-2.0.0.tgz",
-      "integrity": "sha512-5teOsQWABXHHBFP9y3skS5P3d/WfWXpv3FUpy+LorMrNYaT9pI4oLMQX7jzQ2KklNpGpWHzdCXTDT2Y3XGlZBw==",
-      "dev": true,
+    "node_modules/eslint-module-utils/node_modules/debug": {
+      "version": "3.2.7",
+      "license": "MIT",
       "dependencies": {
-        "micromatch": "^3.1.4",
-        "normalize-path": "^2.1.1"
+        "ms": "^2.1.1"
       }
     },
-    "node_modules/anymatch/node_modules/normalize-path": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz",
-      "integrity": "sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=",
-      "dev": true,
+    "node_modules/eslint-plugin-formatjs": {
+      "version": "4.13.3",
+      "license": "MIT",
       "dependencies": {
-        "remove-trailing-separator": "^1.0.1"
+        "@formatjs/icu-messageformat-parser": "2.7.8",
+        "@formatjs/ts-transformer": "3.13.14",
+        "@types/eslint": "7 || 8",
+        "@types/picomatch": "^2.3.0",
+        "@typescript-eslint/utils": "^6.18.1",
+        "emoji-regex": "^10.2.1",
+        "magic-string": "^0.30.0",
+        "picomatch": "^2.3.1",
+        "tslib": "2.6.2",
+        "typescript": "5",
+        "unicode-emoji-utils": "^1.2.0"
       },
-      "engines": {
-        "node": ">=0.10.0"
+      "peerDependencies": {
+        "eslint": "7 || 8"
       }
     },
-    "node_modules/arch": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/arch/-/arch-2.2.0.tgz",
-      "integrity": "sha512-Of/R0wqp83cgHozfIYLbBMnej79U/SVGOOyuB3VVFv1NRM/PSFMK12x9KVtiYzJqmnU5WR2qp0Z5rHb7sWGnFQ==",
-      "dev": true,
-      "optional": true
-    },
-    "node_modules/archive-type": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/archive-type/-/archive-type-4.0.0.tgz",
-      "integrity": "sha1-+S5yIzBW38aWlHJ0nCZ72wRrHXA=",
-      "dev": true,
-      "optional": true,
+    "node_modules/eslint-plugin-formatjs/node_modules/@typescript-eslint/scope-manager": {
+      "version": "6.21.0",
+      "license": "MIT",
       "dependencies": {
-        "file-type": "^4.2.0"
+        "@typescript-eslint/types": "6.21.0",
+        "@typescript-eslint/visitor-keys": "6.21.0"
       },
       "engines": {
-        "node": ">=4"
+        "node": "^16.0.0 || >=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
       }
     },
-    "node_modules/archive-type/node_modules/file-type": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/file-type/-/file-type-4.4.0.tgz",
-      "integrity": "sha1-G2AOX8ofvcboDApwxxyNul95BsU=",
-      "dev": true,
-      "optional": true,
+    "node_modules/eslint-plugin-formatjs/node_modules/@typescript-eslint/types": {
+      "version": "6.21.0",
+      "license": "MIT",
       "engines": {
-        "node": ">=4"
+        "node": "^16.0.0 || >=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
       }
     },
-    "node_modules/are-we-there-yet": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz",
-      "integrity": "sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==",
-      "dev": true,
+    "node_modules/eslint-plugin-formatjs/node_modules/@typescript-eslint/typescript-estree": {
+      "version": "6.21.0",
+      "license": "BSD-2-Clause",
       "dependencies": {
-        "delegates": "^1.0.0",
-        "readable-stream": "^2.0.6"
+        "@typescript-eslint/types": "6.21.0",
+        "@typescript-eslint/visitor-keys": "6.21.0",
+        "debug": "^4.3.4",
+        "globby": "^11.1.0",
+        "is-glob": "^4.0.3",
+        "minimatch": "9.0.3",
+        "semver": "^7.5.4",
+        "ts-api-utils": "^1.0.1"
+      },
+      "engines": {
+        "node": "^16.0.0 || >=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
       }
     },
-    "node_modules/argparse": {
-      "version": "1.0.10",
-      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
-      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
-      "dev": true,
+    "node_modules/eslint-plugin-formatjs/node_modules/@typescript-eslint/utils": {
+      "version": "6.21.0",
+      "license": "MIT",
       "dependencies": {
-        "sprintf-js": "~1.0.2"
-      }
-    },
-    "node_modules/argv": {
-      "version": "0.0.2",
-      "resolved": "https://registry.npmjs.org/argv/-/argv-0.0.2.tgz",
-      "integrity": "sha1-7L0W+JSbFXGDcRsb2jNPN4QBhas=",
-      "dev": true,
+        "@eslint-community/eslint-utils": "^4.4.0",
+        "@types/json-schema": "^7.0.12",
+        "@types/semver": "^7.5.0",
+        "@typescript-eslint/scope-manager": "6.21.0",
+        "@typescript-eslint/types": "6.21.0",
+        "@typescript-eslint/typescript-estree": "6.21.0",
+        "semver": "^7.5.4"
+      },
       "engines": {
-        "node": ">=0.6.10"
+        "node": "^16.0.0 || >=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^7.0.0 || ^8.0.0"
       }
     },
-    "node_modules/aria-hidden": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.1.3.tgz",
-      "integrity": "sha512-RhVWFtKH5BiGMycI72q2RAFMLQi8JP9bLuQXgR5a8Znp7P5KOIADSJeyfI8PCVxLEp067B2HbP5JIiI/PXIZeA==",
+    "node_modules/eslint-plugin-formatjs/node_modules/@typescript-eslint/visitor-keys": {
+      "version": "6.21.0",
+      "license": "MIT",
       "dependencies": {
-        "tslib": "^1.0.0"
+        "@typescript-eslint/types": "6.21.0",
+        "eslint-visitor-keys": "^3.4.1"
       },
       "engines": {
-        "node": ">=8.5.0"
+        "node": "^16.0.0 || >=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
       }
     },
-    "node_modules/aria-query": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-3.0.0.tgz",
-      "integrity": "sha1-ZbP8wcoRVajJrmTW7uKX8V1RM8w=",
-      "dev": true,
+    "node_modules/eslint-plugin-formatjs/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "license": "MIT",
       "dependencies": {
-        "ast-types-flow": "0.0.7",
-        "commander": "^2.11.0"
+        "balanced-match": "^1.0.0"
       }
     },
-    "node_modules/aria-query/node_modules/commander": {
-      "version": "2.20.3",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
-      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
-      "dev": true
-    },
-    "node_modules/arr-diff": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz",
-      "integrity": "sha1-1kYQdP6/7HHn4VI1dhoyml3HxSA=",
-      "dev": true,
+    "node_modules/eslint-plugin-formatjs/node_modules/eslint-visitor-keys": {
+      "version": "3.4.3",
+      "license": "Apache-2.0",
       "engines": {
-        "node": ">=0.10.0"
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
       }
     },
-    "node_modules/arr-flatten": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/arr-flatten/-/arr-flatten-1.1.0.tgz",
-      "integrity": "sha512-L3hKV5R/p5o81R7O02IGnwpDmkp6E982XhtbuwSe3O4qOtMMMtodicASA1Cny2U+aCXcNpml+m4dPsvsJ3jatg==",
-      "dev": true,
+    "node_modules/eslint-plugin-formatjs/node_modules/minimatch": {
+      "version": "9.0.3",
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/arr-union": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/arr-union/-/arr-union-3.1.0.tgz",
-      "integrity": "sha1-45sJrqne+Gao8gbiiK9jkZuuOcQ=",
-      "dev": true,
+    "node_modules/eslint-plugin-formatjs/node_modules/semver": {
+      "version": "7.6.3",
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=10"
       }
     },
-    "node_modules/array-equal": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/array-equal/-/array-equal-1.0.0.tgz",
-      "integrity": "sha1-jCpe8kcv2ep0KwTHenUJO6J1fJM=",
-      "dev": true
+    "node_modules/eslint-plugin-formatjs/node_modules/tslib": {
+      "version": "2.6.2",
+      "license": "0BSD"
     },
-    "node_modules/array-find-index": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/array-find-index/-/array-find-index-1.0.2.tgz",
-      "integrity": "sha1-3wEKoSh+Fku9pvlyOwqWoexBh6E=",
-      "dev": true,
-      "optional": true,
+    "node_modules/eslint-plugin-formatjs/node_modules/typescript": {
+      "version": "5.5.4",
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=14.17"
       }
     },
-    "node_modules/array-flatten": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
-      "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=",
-      "dev": true
+    "node_modules/eslint-plugin-import": {
+      "version": "2.29.1",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "array-includes": "^3.1.7",
+        "array.prototype.findlastindex": "^1.2.3",
+        "array.prototype.flat": "^1.3.2",
+        "array.prototype.flatmap": "^1.3.2",
+        "debug": "^3.2.7",
+        "doctrine": "^2.1.0",
+        "eslint-import-resolver-node": "^0.3.9",
+        "eslint-module-utils": "^2.8.0",
+        "hasown": "^2.0.0",
+        "is-core-module": "^2.13.1",
+        "is-glob": "^4.0.3",
+        "minimatch": "^3.1.2",
+        "object.fromentries": "^2.0.7",
+        "object.groupby": "^1.0.1",
+        "object.values": "^1.1.7",
+        "semver": "^6.3.1",
+        "tsconfig-paths": "^3.15.0"
+      },
+      "engines": {
+        "node": ">=4"
+      },
+      "peerDependencies": {
+        "eslint": "^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8"
+      }
     },
-    "node_modules/array-includes": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.3.tgz",
-      "integrity": "sha512-gcem1KlBU7c9rB+Rq8/3PPKsK2kjqeEBa3bD5kkQo4nYlOHQCJqIJFqBXDEfwaRuYTT4E+FxA9xez7Gf/e3Q7A==",
-      "dev": true,
+    "node_modules/eslint-plugin-import/node_modules/debug": {
+      "version": "3.2.7",
+      "license": "MIT",
+      "peer": true,
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.18.0-next.2",
-        "get-intrinsic": "^1.1.1",
-        "is-string": "^1.0.5"
+        "ms": "^2.1.1"
+      }
+    },
+    "node_modules/eslint-plugin-import/node_modules/doctrine": {
+      "version": "2.1.0",
+      "license": "Apache-2.0",
+      "peer": true,
+      "dependencies": {
+        "esutils": "^2.0.2"
       },
       "engines": {
-        "node": ">= 0.4"
+        "node": ">=0.10.0"
       }
     },
-    "node_modules/array-includes/node_modules/es-abstract": {
-      "version": "1.18.3",
-      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.18.3.tgz",
-      "integrity": "sha512-nQIr12dxV7SSxE6r6f1l3DtAeEYdsGpps13dR0TwJg1S8gyp4ZPgy3FZcHBgbiQqnoqSTb+oC+kO4UQ0C/J8vw==",
-      "dev": true,
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "es-to-primitive": "^1.2.1",
-        "function-bind": "^1.1.1",
-        "get-intrinsic": "^1.1.1",
+    "node_modules/eslint-plugin-jsx-a11y": {
+      "version": "6.7.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.7.1.tgz",
+      "integrity": "sha512-63Bog4iIethyo8smBklORknVjB0T2dwB8Mr/hIC+fBS0uyHdYYpzM/Ed+YC8VxTjlXHEWFOdmgwcDn1U2L9VCA==",
+      "dependencies": {
+        "@babel/runtime": "^7.20.7",
+        "aria-query": "^5.1.3",
+        "array-includes": "^3.1.6",
+        "array.prototype.flatmap": "^1.3.1",
+        "ast-types-flow": "^0.0.7",
+        "axe-core": "^4.6.2",
+        "axobject-query": "^3.1.1",
+        "damerau-levenshtein": "^1.0.8",
+        "emoji-regex": "^9.2.2",
         "has": "^1.0.3",
-        "has-symbols": "^1.0.2",
-        "is-callable": "^1.2.3",
-        "is-negative-zero": "^2.0.1",
-        "is-regex": "^1.1.3",
-        "is-string": "^1.0.6",
-        "object-inspect": "^1.10.3",
-        "object-keys": "^1.1.1",
-        "object.assign": "^4.1.2",
-        "string.prototype.trimend": "^1.0.4",
-        "string.prototype.trimstart": "^1.0.4",
-        "unbox-primitive": "^1.0.1"
+        "jsx-ast-utils": "^3.3.3",
+        "language-tags": "=1.0.5",
+        "minimatch": "^3.1.2",
+        "object.entries": "^1.1.6",
+        "object.fromentries": "^2.0.6",
+        "semver": "^6.3.0"
       },
       "engines": {
-        "node": ">= 0.4"
+        "node": ">=4.0"
+      },
+      "peerDependencies": {
+        "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8"
       }
     },
-    "node_modules/array-includes/node_modules/has-symbols": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.2.tgz",
-      "integrity": "sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw==",
-      "dev": true,
+    "node_modules/eslint-plugin-jsx-a11y/node_modules/emoji-regex": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg=="
+    },
+    "node_modules/eslint-plugin-react": {
+      "version": "7.32.2",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.32.2.tgz",
+      "integrity": "sha512-t2fBMa+XzonrrNkyVirzKlvn5RXzzPwRHtMvLAtVZrt8oxgnTQaYbU6SXTOO1mwQgp1y5+toMSKInnzGr0Knqg==",
+      "dependencies": {
+        "array-includes": "^3.1.6",
+        "array.prototype.flatmap": "^1.3.1",
+        "array.prototype.tosorted": "^1.1.1",
+        "doctrine": "^2.1.0",
+        "estraverse": "^5.3.0",
+        "jsx-ast-utils": "^2.4.1 || ^3.0.0",
+        "minimatch": "^3.1.2",
+        "object.entries": "^1.1.6",
+        "object.fromentries": "^2.0.6",
+        "object.hasown": "^1.1.2",
+        "object.values": "^1.1.6",
+        "prop-types": "^15.8.1",
+        "resolve": "^2.0.0-next.4",
+        "semver": "^6.3.0",
+        "string.prototype.matchall": "^4.0.8"
+      },
       "engines": {
-        "node": ">= 0.4"
+        "node": ">=4"
+      },
+      "peerDependencies": {
+        "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8"
       }
     },
-    "node_modules/array-includes/node_modules/is-callable": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.3.tgz",
-      "integrity": "sha512-J1DcMe8UYTBSrKezuIUTUwjXsho29693unXM2YhJUTR2txK/eG47bvNa/wipPFmZFgr/N6f1GA66dv0mEyTIyQ==",
-      "dev": true,
+    "node_modules/eslint-plugin-react-hooks": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz",
+      "integrity": "sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==",
       "engines": {
-        "node": ">= 0.4"
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0"
       }
     },
-    "node_modules/array-includes/node_modules/is-regex": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.3.tgz",
-      "integrity": "sha512-qSVXFz28HM7y+IWX6vLCsexdlvzT1PJNFSBuaQLQ5o0IEw8UDYW6/2+eCMVyIsbM8CNLX2a/QWmSpyxYEHY7CQ==",
-      "dev": true,
+    "node_modules/eslint-plugin-react/node_modules/doctrine": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
+      "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "has-symbols": "^1.0.2"
+        "esutils": "^2.0.2"
       },
       "engines": {
-        "node": ">= 0.4"
+        "node": ">=0.10.0"
       }
     },
-    "node_modules/array-includes/node_modules/object-inspect": {
-      "version": "1.10.3",
-      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.10.3.tgz",
-      "integrity": "sha512-e5mCJlSH7poANfC8z8S9s9S2IN5/4Zb3aZ33f5s8YqoazCFzNLloLU8r5VCG+G7WoqLvAAZoVMcy3tp/3X0Plw==",
-      "dev": true
+    "node_modules/eslint-plugin-react/node_modules/resolve": {
+      "version": "2.0.0-next.5",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.5.tgz",
+      "integrity": "sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA==",
+      "dependencies": {
+        "is-core-module": "^2.13.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
     },
-    "node_modules/array-includes/node_modules/object.assign": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.2.tgz",
-      "integrity": "sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==",
-      "dev": true,
+    "node_modules/eslint-scope": {
+      "version": "5.1.1",
+      "license": "BSD-2-Clause",
       "dependencies": {
-        "call-bind": "^1.0.0",
-        "define-properties": "^1.1.3",
-        "has-symbols": "^1.0.1",
-        "object-keys": "^1.1.1"
+        "esrecurse": "^4.3.0",
+        "estraverse": "^4.1.1"
       },
       "engines": {
-        "node": ">= 0.4"
+        "node": ">=8.0.0"
       }
     },
-    "node_modules/array-includes/node_modules/string.prototype.trimend": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.4.tgz",
-      "integrity": "sha512-y9xCjw1P23Awk8EvTpcyL2NIr1j7wJ39f+k6lvRnSMz+mz9CGz9NYPelDk42kOz6+ql8xjfK8oYzy3jAP5QU5A==",
-      "dev": true,
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3"
+    "node_modules/eslint-scope/node_modules/estraverse": {
+      "version": "4.3.0",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=4.0"
       }
     },
-    "node_modules/array-includes/node_modules/string.prototype.trimstart": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.4.tgz",
-      "integrity": "sha512-jh6e984OBfvxS50tdY2nRZnoC5/mLFKOREQfw8t5yytkoUsJRNxvI/E39qu1sD0OtWI3OC0XgKSmcWwziwYuZw==",
-      "dev": true,
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3"
+    "node_modules/eslint-visitor-keys": {
+      "version": "2.1.0",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=10"
       }
     },
-    "node_modules/array-union": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
-      "integrity": "sha1-mjRBDk9OPaI96jdb5b5w8kd47Dk=",
-      "dev": true,
+    "node_modules/eslint/node_modules/argparse": {
+      "version": "2.0.1",
+      "license": "Python-2.0",
+      "peer": true
+    },
+    "node_modules/eslint/node_modules/eslint-scope": {
+      "version": "7.2.2",
+      "license": "BSD-2-Clause",
+      "peer": true,
       "dependencies": {
-        "array-uniq": "^1.0.1"
+        "esrecurse": "^4.3.0",
+        "estraverse": "^5.2.0"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
       }
     },
-    "node_modules/array-uniq": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz",
-      "integrity": "sha1-r2rId6Jcx/dOBYiUdThY39sk/bY=",
-      "dev": true,
+    "node_modules/eslint/node_modules/eslint-visitor-keys": {
+      "version": "3.4.3",
+      "license": "Apache-2.0",
+      "peer": true,
       "engines": {
-        "node": ">=0.10.0"
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
       }
     },
-    "node_modules/array-unique": {
-      "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.3.2.tgz",
-      "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=",
-      "dev": true,
+    "node_modules/eslint/node_modules/find-up": {
+      "version": "5.0.0",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "locate-path": "^6.0.0",
+        "path-exists": "^4.0.0"
+      },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/array.prototype.find": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/array.prototype.find/-/array.prototype.find-2.1.1.tgz",
-      "integrity": "sha512-mi+MYNJYLTx2eNYy+Yh6raoQacCsNeeMUaspFPh9Y141lFSsWxxB8V9mM2ye+eqiRs917J6/pJ4M9ZPzenWckA==",
+    "node_modules/eslint/node_modules/glob-parent": {
+      "version": "6.0.2",
+      "license": "ISC",
+      "peer": true,
       "dependencies": {
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.17.4"
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
       }
     },
-    "node_modules/array.prototype.flat": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.2.4.tgz",
-      "integrity": "sha512-4470Xi3GAPAjZqFcljX2xzckv1qeKPizoNkiS0+O4IoPR2ZNpcjE0pkhdihlDouK+x6QOast26B4Q/O9DJnwSg==",
-      "dev": true,
+    "node_modules/eslint/node_modules/globals": {
+      "version": "13.24.0",
+      "license": "MIT",
+      "peer": true,
       "dependencies": {
-        "call-bind": "^1.0.0",
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.18.0-next.1"
+        "type-fest": "^0.20.2"
       },
       "engines": {
-        "node": ">= 0.4"
-      }
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
     },
-    "node_modules/array.prototype.flat/node_modules/es-abstract": {
-      "version": "1.18.3",
-      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.18.3.tgz",
-      "integrity": "sha512-nQIr12dxV7SSxE6r6f1l3DtAeEYdsGpps13dR0TwJg1S8gyp4ZPgy3FZcHBgbiQqnoqSTb+oC+kO4UQ0C/J8vw==",
-      "dev": true,
+    "node_modules/eslint/node_modules/js-yaml": {
+      "version": "4.1.0",
+      "license": "MIT",
+      "peer": true,
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "es-to-primitive": "^1.2.1",
-        "function-bind": "^1.1.1",
-        "get-intrinsic": "^1.1.1",
-        "has": "^1.0.3",
-        "has-symbols": "^1.0.2",
-        "is-callable": "^1.2.3",
-        "is-negative-zero": "^2.0.1",
-        "is-regex": "^1.1.3",
-        "is-string": "^1.0.6",
-        "object-inspect": "^1.10.3",
-        "object-keys": "^1.1.1",
-        "object.assign": "^4.1.2",
-        "string.prototype.trimend": "^1.0.4",
-        "string.prototype.trimstart": "^1.0.4",
-        "unbox-primitive": "^1.0.1"
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/eslint/node_modules/locate-path": {
+      "version": "6.0.0",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "p-locate": "^5.0.0"
       },
       "engines": {
-        "node": ">= 0.4"
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/array.prototype.flat/node_modules/has-symbols": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.2.tgz",
-      "integrity": "sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw==",
-      "dev": true,
+    "node_modules/eslint/node_modules/p-locate": {
+      "version": "5.0.0",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "p-limit": "^3.0.2"
+      },
       "engines": {
-        "node": ">= 0.4"
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/array.prototype.flat/node_modules/is-callable": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.3.tgz",
-      "integrity": "sha512-J1DcMe8UYTBSrKezuIUTUwjXsho29693unXM2YhJUTR2txK/eG47bvNa/wipPFmZFgr/N6f1GA66dv0mEyTIyQ==",
-      "dev": true,
+    "node_modules/eslint/node_modules/type-fest": {
+      "version": "0.20.2",
+      "license": "(MIT OR CC0-1.0)",
+      "peer": true,
       "engines": {
-        "node": ">= 0.4"
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/array.prototype.flat/node_modules/is-regex": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.3.tgz",
-      "integrity": "sha512-qSVXFz28HM7y+IWX6vLCsexdlvzT1PJNFSBuaQLQ5o0IEw8UDYW6/2+eCMVyIsbM8CNLX2a/QWmSpyxYEHY7CQ==",
-      "dev": true,
+    "node_modules/espree": {
+      "version": "9.6.1",
+      "license": "BSD-2-Clause",
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "has-symbols": "^1.0.2"
+        "acorn": "^8.9.0",
+        "acorn-jsx": "^5.3.2",
+        "eslint-visitor-keys": "^3.4.1"
       },
       "engines": {
-        "node": ">= 0.4"
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
       }
     },
-    "node_modules/array.prototype.flat/node_modules/object-inspect": {
-      "version": "1.10.3",
-      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.10.3.tgz",
-      "integrity": "sha512-e5mCJlSH7poANfC8z8S9s9S2IN5/4Zb3aZ33f5s8YqoazCFzNLloLU8r5VCG+G7WoqLvAAZoVMcy3tp/3X0Plw==",
-      "dev": true
-    },
-    "node_modules/array.prototype.flat/node_modules/object.assign": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.2.tgz",
-      "integrity": "sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==",
-      "dev": true,
-      "dependencies": {
-        "call-bind": "^1.0.0",
-        "define-properties": "^1.1.3",
-        "has-symbols": "^1.0.1",
-        "object-keys": "^1.1.1"
-      },
+    "node_modules/espree/node_modules/eslint-visitor-keys": {
+      "version": "3.4.3",
+      "license": "Apache-2.0",
       "engines": {
-        "node": ">= 0.4"
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
       }
     },
-    "node_modules/array.prototype.flat/node_modules/string.prototype.trimend": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.4.tgz",
-      "integrity": "sha512-y9xCjw1P23Awk8EvTpcyL2NIr1j7wJ39f+k6lvRnSMz+mz9CGz9NYPelDk42kOz6+ql8xjfK8oYzy3jAP5QU5A==",
-      "dev": true,
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3"
+    "node_modules/esprima": {
+      "version": "4.0.1",
+      "license": "BSD-2-Clause",
+      "bin": {
+        "esparse": "bin/esparse.js",
+        "esvalidate": "bin/esvalidate.js"
+      },
+      "engines": {
+        "node": ">=4"
       }
     },
-    "node_modules/array.prototype.flat/node_modules/string.prototype.trimstart": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.4.tgz",
-      "integrity": "sha512-jh6e984OBfvxS50tdY2nRZnoC5/mLFKOREQfw8t5yytkoUsJRNxvI/E39qu1sD0OtWI3OC0XgKSmcWwziwYuZw==",
-      "dev": true,
+    "node_modules/esquery": {
+      "version": "1.6.0",
+      "license": "BSD-3-Clause",
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3"
+        "estraverse": "^5.1.0"
+      },
+      "engines": {
+        "node": ">=0.10"
       }
     },
-    "node_modules/asn1": {
-      "version": "0.2.4",
-      "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.4.tgz",
-      "integrity": "sha512-jxwzQpLQjSmWXgwaCZE9Nz+glAG01yF1QnWgbhGwHI5A6FRIEY6IVqtHhIepHqI7/kyEyQEagBC5mBEFlIYvdg==",
-      "dev": true,
+    "node_modules/esrecurse": {
+      "version": "4.3.0",
+      "license": "BSD-2-Clause",
       "dependencies": {
-        "safer-buffer": "~2.1.0"
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=4.0"
       }
     },
-    "node_modules/assert-ok": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/assert-ok/-/assert-ok-1.0.0.tgz",
-      "integrity": "sha1-W1z3lfknXFnHFNZsOgbX3nDkPsg="
-    },
-    "node_modules/assert-plus": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
-      "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=",
-      "dev": true,
+    "node_modules/estraverse": {
+      "version": "5.3.0",
+      "license": "BSD-2-Clause",
       "engines": {
-        "node": ">=0.8"
+        "node": ">=4.0"
       }
     },
-    "node_modules/assign-symbols": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/assign-symbols/-/assign-symbols-1.0.0.tgz",
-      "integrity": "sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c=",
-      "dev": true,
+    "node_modules/esutils": {
+      "version": "2.0.3",
+      "license": "BSD-2-Clause",
       "engines": {
         "node": ">=0.10.0"
       }
     },
-    "node_modules/ast-types-flow": {
-      "version": "0.0.7",
-      "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.7.tgz",
-      "integrity": "sha1-9wtzXGvKGlycItmCw+Oef+ujva0=",
-      "dev": true
-    },
-    "node_modules/astral-regex": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-1.0.0.tgz",
-      "integrity": "sha512-+Ryf6g3BKoRc7jfp7ad8tM4TtMiaWvbF/1/sQcZPkkS7ag3D5nMBCe2UfOTONtAkaG0tO0ij3C5Lwmf1EiyjHg==",
-      "dev": true,
+    "node_modules/etag": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
+      "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
       "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/async": {
-      "version": "2.6.3",
-      "resolved": "https://registry.npmjs.org/async/-/async-2.6.3.tgz",
-      "integrity": "sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==",
-      "dev": true,
-      "dependencies": {
-        "lodash": "^4.17.14"
+        "node": ">= 0.6"
       }
     },
-    "node_modules/async-each": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/async-each/-/async-each-1.0.3.tgz",
-      "integrity": "sha512-z/WhQ5FPySLdvREByI2vZiTWwCnF0moMJ1hK9YQwDTHKh6I7/uSckMetoRGb5UBZPC1z0jlw+n/XCgjeH7y1AQ==",
-      "dev": true
-    },
-    "node_modules/async-limiter": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.1.tgz",
-      "integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==",
-      "dev": true
-    },
-    "node_modules/asynckit": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-      "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=",
-      "dev": true
+    "node_modules/eventemitter3": {
+      "version": "4.0.7",
+      "license": "MIT"
     },
-    "node_modules/at-least-node": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz",
-      "integrity": "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==",
-      "dev": true,
+    "node_modules/events": {
+      "version": "3.3.0",
+      "license": "MIT",
       "engines": {
-        "node": ">= 4.0.0"
+        "node": ">=0.8.x"
       }
     },
-    "node_modules/atob": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
-      "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
-      "dev": true,
-      "bin": {
-        "atob": "bin/atob.js"
+    "node_modules/execa": {
+      "version": "5.1.1",
+      "license": "MIT",
+      "dependencies": {
+        "cross-spawn": "^7.0.3",
+        "get-stream": "^6.0.0",
+        "human-signals": "^2.1.0",
+        "is-stream": "^2.0.0",
+        "merge-stream": "^2.0.0",
+        "npm-run-path": "^4.0.1",
+        "onetime": "^5.1.2",
+        "signal-exit": "^3.0.3",
+        "strip-final-newline": "^2.0.0"
       },
       "engines": {
-        "node": ">= 4.5.0"
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/execa?sponsor=1"
       }
     },
-    "node_modules/autoprefixer": {
-      "version": "10.2.6",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.2.6.tgz",
-      "integrity": "sha512-8lChSmdU6dCNMCQopIf4Pe5kipkAGj/fvTMslCsih0uHpOrXOPUEVOmYMMqmw3cekQkSD7EhIeuYl5y0BLdKqg==",
-      "dev": true,
-      "dependencies": {
-        "browserslist": "^4.16.6",
-        "caniuse-lite": "^1.0.30001230",
-        "colorette": "^1.2.2",
-        "fraction.js": "^4.1.1",
-        "normalize-range": "^0.1.2",
-        "postcss-value-parser": "^4.1.0"
-      },
-      "bin": {
-        "autoprefixer": "bin/autoprefixer"
-      },
+    "node_modules/exit": {
+      "version": "0.1.2",
       "engines": {
-        "node": "^10 || ^12 || >=14"
+        "node": ">= 0.8.0"
       }
     },
-    "node_modules/autoprefixer/node_modules/colorette": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.2.2.tgz",
-      "integrity": "sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w==",
-      "dev": true
-    },
-    "node_modules/aws-sign2": {
-      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",
-      "integrity": "sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg=",
-      "dev": true,
+    "node_modules/expand-template": {
+      "version": "2.0.3",
+      "license": "(MIT OR WTFPL)",
       "engines": {
-        "node": "*"
+        "node": ">=6"
       }
     },
-    "node_modules/aws4": {
-      "version": "1.10.0",
-      "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.10.0.tgz",
-      "integrity": "sha512-3YDiu347mtVtjpyV3u5kVqQLP242c06zwDOgpeRnybmXlYYsLbtTrUBUm8i8srONt+FWobl5aibnU1030PeeuA==",
-      "dev": true
-    },
-    "node_modules/axios": {
-      "version": "0.21.1",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz",
-      "integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==",
+    "node_modules/expect": {
+      "version": "29.7.0",
+      "license": "MIT",
       "dependencies": {
-        "follow-redirects": "^1.10.0"
+        "@jest/expect-utils": "^29.7.0",
+        "jest-get-type": "^29.6.3",
+        "jest-matcher-utils": "^29.7.0",
+        "jest-message-util": "^29.7.0",
+        "jest-util": "^29.7.0"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
-    "node_modules/axios-cache-adapter": {
-      "version": "2.7.3",
-      "resolved": "https://registry.npmjs.org/axios-cache-adapter/-/axios-cache-adapter-2.7.3.tgz",
-      "integrity": "sha512-A+ZKJ9lhpjthOEp4Z3QR/a9xC4du1ALaAsejgRGrH9ef6kSDxdFrhRpulqsh9khsEnwXxGfgpUuDp1YXMNMEiQ==",
+    "node_modules/express": {
+      "version": "4.21.0",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.21.0.tgz",
+      "integrity": "sha512-VqcNGcj/Id5ZT1LZ/cfihi3ttTn+NJmkli2eZADigjq29qTlWi/hAQ43t/VLPq8+UX06FCEx3ByOYet6ZFblng==",
       "dependencies": {
-        "cache-control-esm": "1.0.0",
-        "md5": "^2.2.1"
+        "accepts": "~1.3.8",
+        "array-flatten": "1.1.1",
+        "body-parser": "1.20.3",
+        "content-disposition": "0.5.4",
+        "content-type": "~1.0.4",
+        "cookie": "0.6.0",
+        "cookie-signature": "1.0.6",
+        "debug": "2.6.9",
+        "depd": "2.0.0",
+        "encodeurl": "~2.0.0",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
+        "finalhandler": "1.3.1",
+        "fresh": "0.5.2",
+        "http-errors": "2.0.0",
+        "merge-descriptors": "1.0.3",
+        "methods": "~1.1.2",
+        "on-finished": "2.4.1",
+        "parseurl": "~1.3.3",
+        "path-to-regexp": "0.1.10",
+        "proxy-addr": "~2.0.7",
+        "qs": "6.13.0",
+        "range-parser": "~1.2.1",
+        "safe-buffer": "5.2.1",
+        "send": "0.19.0",
+        "serve-static": "1.16.2",
+        "setprototypeof": "1.2.0",
+        "statuses": "2.0.1",
+        "type-is": "~1.6.18",
+        "utils-merge": "1.0.1",
+        "vary": "~1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.10.0"
       }
     },
-    "node_modules/axios-mock-adapter": {
-      "version": "1.18.1",
-      "resolved": "https://registry.npmjs.org/axios-mock-adapter/-/axios-mock-adapter-1.18.1.tgz",
-      "integrity": "sha512-kFBZsG1Ma5yxjRGHq5KuuL55mPb7WzFULhypquEhzPg8SH5CXICb+qwC2CCA5u+GQVpiqGPwKSRkd3mBCs6gdw==",
-      "dev": true,
+    "node_modules/express/node_modules/debug": {
+      "version": "2.6.9",
+      "license": "MIT",
       "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "is-buffer": "^2.0.3"
+        "ms": "2.0.0"
       }
     },
-    "node_modules/axobject-query": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
-      "integrity": "sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA==",
-      "dev": true
+    "node_modules/express/node_modules/ms": {
+      "version": "2.0.0",
+      "license": "MIT"
     },
-    "node_modules/babel-eslint": {
-      "version": "10.1.0",
-      "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz",
-      "integrity": "sha512-ifWaTHQ0ce+448CYop8AdrQiBsGrnC+bMgfyKFdi6EsPLTAWG+QfyDeM6OH+FmWnKvEq5NnBMLvlBUPKQZoDSg==",
-      "dev": true,
+    "node_modules/extend": {
+      "version": "3.0.2",
+      "license": "MIT"
+    },
+    "node_modules/external-editor": {
+      "version": "3.1.0",
+      "license": "MIT",
       "dependencies": {
-        "@babel/code-frame": "^7.0.0",
-        "@babel/parser": "^7.7.0",
-        "@babel/traverse": "^7.7.0",
-        "@babel/types": "^7.7.0",
-        "eslint-visitor-keys": "^1.0.0",
-        "resolve": "^1.12.0"
+        "chardet": "^0.7.0",
+        "iconv-lite": "^0.4.24",
+        "tmp": "^0.0.33"
       },
       "engines": {
-        "node": ">=6"
+        "node": ">=4"
       }
     },
-    "node_modules/babel-jest": {
-      "version": "26.3.0",
-      "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-26.3.0.tgz",
-      "integrity": "sha512-sxPnQGEyHAOPF8NcUsD0g7hDCnvLL2XyblRBcgrzTWBB/mAIpWow3n1bEL+VghnnZfreLhFSBsFluRoK2tRK4g==",
-      "dev": true,
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "license": "MIT"
+    },
+    "node_modules/fast-defer": {
+      "version": "1.1.8",
+      "license": "MIT"
+    },
+    "node_modules/fast-fifo": {
+      "version": "1.3.2",
+      "license": "MIT"
+    },
+    "node_modules/fast-glob": {
+      "version": "3.3.2",
+      "license": "MIT",
       "dependencies": {
-        "@jest/transform": "^26.3.0",
-        "@jest/types": "^26.3.0",
-        "@types/babel__core": "^7.1.7",
-        "babel-plugin-istanbul": "^6.0.0",
-        "babel-preset-jest": "^26.3.0",
-        "chalk": "^4.0.0",
-        "graceful-fs": "^4.2.4",
-        "slash": "^3.0.0"
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.4"
       },
       "engines": {
-        "node": ">= 10.14.2"
+        "node": ">=8.6.0"
       }
     },
-    "node_modules/babel-jest/node_modules/@jest/types": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
-      "integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
-      "dev": true,
+    "node_modules/fast-json-stable-stringify": {
+      "version": "2.1.0",
+      "license": "MIT"
+    },
+    "node_modules/fast-levenshtein": {
+      "version": "2.0.6",
+      "license": "MIT"
+    },
+    "node_modules/fast-uri": {
+      "version": "3.0.1",
+      "license": "MIT"
+    },
+    "node_modules/fast-xml-parser": {
+      "version": "4.4.1",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/NaturalIntelligence"
+        },
+        {
+          "type": "paypal",
+          "url": "https://paypal.me/naturalintelligence"
+        }
+      ],
+      "license": "MIT",
       "dependencies": {
-        "@types/istanbul-lib-coverage": "^2.0.0",
-        "@types/istanbul-reports": "^3.0.0",
-        "@types/node": "*",
-        "@types/yargs": "^15.0.0",
-        "chalk": "^4.0.0"
+        "strnum": "^1.0.5"
       },
+      "bin": {
+        "fxparser": "src/cli/cli.js"
+      }
+    },
+    "node_modules/fastest-levenshtein": {
+      "version": "1.0.16",
+      "license": "MIT",
       "engines": {
-        "node": ">= 10.14.2"
+        "node": ">= 4.9.1"
       }
     },
-    "node_modules/babel-jest/node_modules/@types/istanbul-reports": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz",
-      "integrity": "sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==",
-      "dev": true,
+    "node_modules/fastq": {
+      "version": "1.17.1",
+      "license": "ISC",
       "dependencies": {
-        "@types/istanbul-lib-report": "*"
+        "reusify": "^1.0.4"
       }
     },
-    "node_modules/babel-jest/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,
+    "node_modules/faye-websocket": {
+      "version": "0.11.4",
+      "license": "Apache-2.0",
       "dependencies": {
-        "color-convert": "^2.0.1"
+        "websocket-driver": ">=0.5.1"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">=0.8.0"
       }
     },
-    "node_modules/babel-jest/node_modules/chalk": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
-      "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
+    "node_modules/fb-watchman": {
+      "version": "2.0.2",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "bser": "2.1.1"
+      }
+    },
+    "node_modules/fetch-mock": {
+      "version": "9.11.0",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
+        "@babel/core": "^7.0.0",
+        "@babel/runtime": "^7.0.0",
+        "core-js": "^3.0.0",
+        "debug": "^4.1.1",
+        "glob-to-regexp": "^0.4.0",
+        "is-subset": "^0.1.1",
+        "lodash.isequal": "^4.5.0",
+        "path-to-regexp": "^2.2.1",
+        "querystring": "^0.2.0",
+        "whatwg-url": "^6.5.0"
       },
       "engines": {
-        "node": ">=10"
+        "node": ">=4.0.0"
+      },
+      "funding": {
+        "type": "charity",
+        "url": "https://www.justgiving.com/refugee-support-europe"
+      },
+      "peerDependencies": {
+        "node-fetch": "*"
+      },
+      "peerDependenciesMeta": {
+        "node-fetch": {
+          "optional": true
+        }
       }
     },
-    "node_modules/babel-jest/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==",
+    "node_modules/fetch-mock-jest": {
+      "version": "1.5.1",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "color-name": "~1.1.4"
+        "fetch-mock": "^9.11.0"
       },
       "engines": {
-        "node": ">=7.0.0"
+        "node": ">=8.0.0"
+      },
+      "funding": {
+        "type": "charity",
+        "url": "https://www.justgiving.com/refugee-support-europe"
+      },
+      "peerDependencies": {
+        "node-fetch": "*"
+      },
+      "peerDependenciesMeta": {
+        "node-fetch": {
+          "optional": true
+        }
       }
     },
-    "node_modules/babel-jest/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-jest/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==",
+    "node_modules/fetch-mock/node_modules/path-to-regexp": {
+      "version": "2.4.0",
       "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/figures": {
+      "version": "3.2.0",
+      "license": "MIT",
+      "dependencies": {
+        "escape-string-regexp": "^1.0.5"
+      },
       "engines": {
         "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/babel-jest/node_modules/slash": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
-      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
-      "dev": true,
+    "node_modules/figures/node_modules/escape-string-regexp": {
+      "version": "1.0.5",
+      "license": "MIT",
       "engines": {
-        "node": ">=8"
+        "node": ">=0.8.0"
       }
     },
-    "node_modules/babel-jest/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,
+    "node_modules/file-entry-cache": {
+      "version": "6.0.1",
+      "license": "MIT",
       "dependencies": {
-        "has-flag": "^4.0.0"
+        "flat-cache": "^3.0.4"
       },
       "engines": {
-        "node": ">=8"
+        "node": "^10.12.0 || >=12.0.0"
       }
     },
-    "node_modules/babel-loader": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.1.0.tgz",
-      "integrity": "sha512-7q7nC1tYOrqvUrN3LQK4GwSk/TQorZSOlO9C+RZDZpODgyN4ZlCqE5q9cDsyWOliN+aU9B4JX01xK9eJXowJLw==",
-      "dev": true,
+    "node_modules/file-loader": {
+      "version": "6.2.0",
+      "license": "MIT",
       "dependencies": {
-        "find-cache-dir": "^2.1.0",
-        "loader-utils": "^1.4.0",
-        "mkdirp": "^0.5.3",
-        "pify": "^4.0.1",
-        "schema-utils": "^2.6.5"
+        "loader-utils": "^2.0.0",
+        "schema-utils": "^3.0.0"
       },
       "engines": {
-        "node": ">= 6.9"
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^4.0.0 || ^5.0.0"
       }
     },
-    "node_modules/babel-loader/node_modules/json5": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
-      "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
-      "dev": true,
+    "node_modules/file-loader/node_modules/schema-utils": {
+      "version": "3.3.0",
+      "license": "MIT",
       "dependencies": {
-        "minimist": "^1.2.0"
+        "@types/json-schema": "^7.0.8",
+        "ajv": "^6.12.5",
+        "ajv-keywords": "^3.5.2"
       },
-      "bin": {
-        "json5": "lib/cli.js"
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
       }
     },
-    "node_modules/babel-loader/node_modules/loader-utils": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz",
-      "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
-      "dev": true,
+    "node_modules/file-saver": {
+      "version": "2.0.5",
+      "license": "MIT"
+    },
+    "node_modules/file-selector": {
+      "version": "0.6.0",
+      "license": "MIT",
       "dependencies": {
-        "big.js": "^5.2.2",
-        "emojis-list": "^3.0.0",
-        "json5": "^1.0.1"
+        "tslib": "^2.4.0"
       },
       "engines": {
-        "node": ">=4.0.0"
+        "node": ">= 12"
       }
     },
-    "node_modules/babel-plugin-dynamic-import-node": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz",
-      "integrity": "sha512-jZVI+s9Zg3IqA/kdi0i6UDCybUI3aSBLnglhYbSSjKlV7yF1F/5LWv8MakQmvYpnbJDS6fcBL2KzHSxNCMtWSQ==",
-      "dev": true,
+    "node_modules/filelist": {
+      "version": "1.0.4",
+      "license": "Apache-2.0",
       "dependencies": {
-        "object.assign": "^4.1.0"
+        "minimatch": "^5.0.1"
       }
     },
-    "node_modules/babel-plugin-istanbul": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-6.0.0.tgz",
-      "integrity": "sha512-AF55rZXpe7trmEylbaE1Gv54wn6rwU03aptvRoVIGP8YykoSxqdVLV1TfwflBCE/QtHmqtP8SWlTENqbK8GCSQ==",
-      "dev": true,
+    "node_modules/filelist/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.0.0",
-        "@istanbuljs/load-nyc-config": "^1.0.0",
-        "@istanbuljs/schema": "^0.1.2",
-        "istanbul-lib-instrument": "^4.0.0",
-        "test-exclude": "^6.0.0"
-      },
-      "engines": {
-        "node": ">=8"
+        "balanced-match": "^1.0.0"
       }
     },
-    "node_modules/babel-plugin-jest-hoist": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-26.6.2.tgz",
-      "integrity": "sha512-PO9t0697lNTmcEHH69mdtYiOIkkOlj9fySqfO3K1eCcdISevLAE0xY59VLLUj0SoiPiTX/JU2CYFpILydUa5Lw==",
-      "dev": true,
+    "node_modules/filelist/node_modules/minimatch": {
+      "version": "5.1.6",
+      "license": "ISC",
       "dependencies": {
-        "@babel/template": "^7.3.3",
-        "@babel/types": "^7.3.3",
-        "@types/babel__core": "^7.0.0",
-        "@types/babel__traverse": "^7.0.6"
+        "brace-expansion": "^2.0.1"
       },
       "engines": {
-        "node": ">= 10.14.2"
-      }
-    },
-    "node_modules/babel-plugin-polyfill-corejs2": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.2.2.tgz",
-      "integrity": "sha512-kISrENsJ0z5dNPq5eRvcctITNHYXWOA4DUZRFYCz3jYCcvTb/A546LIddmoGNMVYg2U38OyFeNosQwI9ENTqIQ==",
-      "dev": true,
-      "dependencies": {
-        "@babel/compat-data": "^7.13.11",
-        "@babel/helper-define-polyfill-provider": "^0.2.2",
-        "semver": "^6.1.1"
+        "node": ">=10"
       }
     },
-    "node_modules/babel-plugin-polyfill-corejs2/node_modules/semver": {
-      "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-      "dev": true,
-      "bin": {
-        "semver": "bin/semver.js"
+    "node_modules/filesize": {
+      "version": "8.0.7",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">= 0.4.0"
       }
     },
-    "node_modules/babel-plugin-polyfill-corejs3": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.2.3.tgz",
-      "integrity": "sha512-rCOFzEIJpJEAU14XCcV/erIf/wZQMmMT5l5vXOpL5uoznyOGfDIjPj6FVytMvtzaKSTSVKouOCTPJ5OMUZH30g==",
-      "dev": true,
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-define-polyfill-provider": "^0.2.2",
-        "core-js-compat": "^3.14.0"
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
       }
     },
-    "node_modules/babel-plugin-polyfill-regenerator": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.2.2.tgz",
-      "integrity": "sha512-Goy5ghsc21HgPDFtzRkSirpZVW35meGoTmTOb2bxqdl60ghub4xOidgNTHaZfQ2FaxQsKmwvXtOAkcIS4SMBWg==",
-      "dev": true,
-      "dependencies": {
-        "@babel/helper-define-polyfill-provider": "^0.2.2"
+    "node_modules/filter-obj": {
+      "version": "1.1.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.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==",
-      "dev": true,
+    "node_modules/finalhandler": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.3.1.tgz",
+      "integrity": "sha512-6BN9trH7bp3qvnrRyzsBz+g3lZxTNZTbVO2EV1CS0WIcDbawYVdYvGflME/9QP0h0pYlCDBCTjYa9nZzMDpyxQ==",
       "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"
+        "debug": "2.6.9",
+        "encodeurl": "~2.0.0",
+        "escape-html": "~1.0.3",
+        "on-finished": "2.4.1",
+        "parseurl": "~1.3.3",
+        "statuses": "2.0.1",
+        "unpipe": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
       }
     },
-    "node_modules/babel-plugin-react-intl/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==",
-      "dev": true,
+    "node_modules/finalhandler/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
       "dependencies": {
-        "@formatjs/intl-numberformat": "^5.5.2"
+        "ms": "2.0.0"
       }
     },
-    "node_modules/babel-plugin-transform-imports": {
+    "node_modules/finalhandler/node_modules/ms": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/babel-plugin-transform-imports/-/babel-plugin-transform-imports-2.0.0.tgz",
-      "integrity": "sha512-65ewumYJ85QiXdcB/jmiU0y0jg6eL6CdnDqQAqQ8JMOKh1E52VPG3NJzbVKWcgovUR5GBH8IWpCXQ7I8Q3wjgw==",
-      "dev": true,
-      "dependencies": {
-        "@babel/types": "^7.4",
-        "is-valid-path": "^0.1.1"
-      }
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
     },
-    "node_modules/babel-polyfill": {
-      "version": "6.26.0",
-      "resolved": "https://registry.npmjs.org/babel-polyfill/-/babel-polyfill-6.26.0.tgz",
-      "integrity": "sha1-N5k3q8Z9eJWXCtxiHyhM2WbPIVM=",
-      "dev": true,
+    "node_modules/find-cache-dir": {
+      "version": "4.0.0",
+      "license": "MIT",
       "dependencies": {
-        "babel-runtime": "^6.26.0",
-        "core-js": "^2.5.0",
-        "regenerator-runtime": "^0.10.5"
+        "common-path-prefix": "^3.0.0",
+        "pkg-dir": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/babel-polyfill/node_modules/core-js": {
-      "version": "2.6.12",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
-      "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
-      "dev": true
-    },
-    "node_modules/babel-polyfill/node_modules/regenerator-runtime": {
-      "version": "0.10.5",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz",
-      "integrity": "sha1-M2w+/BIgrc7dosn6tntaeVWjNlg=",
-      "dev": true
+    "node_modules/find-root": {
+      "version": "1.1.0",
+      "license": "MIT"
     },
-    "node_modules/babel-preset-current-node-syntax": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-1.0.1.tgz",
-      "integrity": "sha512-M7LQ0bxarkxQoN+vz5aJPsLBn77n8QgTFmo8WK0/44auK2xlCXrYcUxHFxgU7qW5Yzw/CjmLRK2uJzaCd7LvqQ==",
-      "dev": true,
+    "node_modules/find-up": {
+      "version": "4.1.0",
+      "license": "MIT",
       "dependencies": {
-        "@babel/plugin-syntax-async-generators": "^7.8.4",
-        "@babel/plugin-syntax-bigint": "^7.8.3",
-        "@babel/plugin-syntax-class-properties": "^7.8.3",
-        "@babel/plugin-syntax-import-meta": "^7.8.3",
-        "@babel/plugin-syntax-json-strings": "^7.8.3",
-        "@babel/plugin-syntax-logical-assignment-operators": "^7.8.3",
-        "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3",
-        "@babel/plugin-syntax-numeric-separator": "^7.8.3",
-        "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
-        "@babel/plugin-syntax-optional-catch-binding": "^7.8.3",
-        "@babel/plugin-syntax-optional-chaining": "^7.8.3",
-        "@babel/plugin-syntax-top-level-await": "^7.8.3"
+        "locate-path": "^5.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
       }
     },
-    "node_modules/babel-preset-jest": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/babel-preset-jest/-/babel-preset-jest-26.6.2.tgz",
-      "integrity": "sha512-YvdtlVm9t3k777c5NPQIv6cxFFFapys25HiUmuSgHwIZhfifweR5c5Sf5nwE3MAbfu327CYSvps8Yx6ANLyleQ==",
-      "dev": true,
+    "node_modules/flat": {
+      "version": "5.0.2",
+      "license": "BSD-3-Clause",
+      "bin": {
+        "flat": "cli.js"
+      }
+    },
+    "node_modules/flat-cache": {
+      "version": "3.2.0",
+      "license": "MIT",
       "dependencies": {
-        "babel-plugin-jest-hoist": "^26.6.2",
-        "babel-preset-current-node-syntax": "^1.0.0"
+        "flatted": "^3.2.9",
+        "keyv": "^4.5.3",
+        "rimraf": "^3.0.2"
       },
       "engines": {
-        "node": ">= 10.14.2"
+        "node": "^10.12.0 || >=12.0.0"
       }
     },
-    "node_modules/babel-runtime": {
-      "version": "6.26.0",
-      "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
-      "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
-      "dev": true,
+    "node_modules/flat-cache/node_modules/rimraf": {
+      "version": "3.0.2",
+      "license": "ISC",
       "dependencies": {
-        "core-js": "^2.4.0",
-        "regenerator-runtime": "^0.11.0"
+        "glob": "^7.1.3"
+      },
+      "bin": {
+        "rimraf": "bin.js"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/babel-runtime/node_modules/core-js": {
-      "version": "2.6.12",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
-      "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
-      "dev": true
-    },
-    "node_modules/babel-runtime/node_modules/regenerator-runtime": {
-      "version": "0.11.1",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
-      "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==",
-      "dev": true
-    },
-    "node_modules/balanced-match": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
-      "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c="
+    "node_modules/flatted": {
+      "version": "3.3.1",
+      "license": "ISC"
     },
-    "node_modules/base": {
-      "version": "0.11.2",
-      "resolved": "https://registry.npmjs.org/base/-/base-0.11.2.tgz",
-      "integrity": "sha512-5T6P4xPgpp0YDFvSWwEZ4NoE3aM4QBQXDzmVbraCkFj8zHM+mba8SyqB5DbZWyR7mYHo6Y7BdQo3MoA4m0TeQg==",
-      "dev": true,
+    "node_modules/focus-lock": {
+      "version": "1.3.5",
+      "license": "MIT",
       "dependencies": {
-        "cache-base": "^1.0.1",
-        "class-utils": "^0.3.5",
-        "component-emitter": "^1.2.1",
-        "define-property": "^1.0.0",
-        "isobject": "^3.0.1",
-        "mixin-deep": "^1.2.0",
-        "pascalcase": "^0.1.1"
+        "tslib": "^2.0.3"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=10"
       }
     },
-    "node_modules/base/node_modules/define-property": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
-      "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=",
-      "dev": true,
-      "dependencies": {
-        "is-descriptor": "^1.0.0"
+    "node_modules/follow-redirects": {
+      "version": "1.15.6",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0"
       },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/font-awesome": {
+      "version": "4.7.0",
+      "license": "(OFL-1.1 AND MIT)",
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=0.10.3"
       }
     },
-    "node_modules/base/node_modules/is-accessor-descriptor": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
-      "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==",
-      "dev": true,
+    "node_modules/for-each": {
+      "version": "0.3.3",
+      "license": "MIT",
       "dependencies": {
-        "kind-of": "^6.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
+        "is-callable": "^1.1.3"
       }
     },
-    "node_modules/base/node_modules/is-data-descriptor": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz",
-      "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==",
-      "dev": true,
+    "node_modules/fork-ts-checker-webpack-plugin": {
+      "version": "6.5.3",
+      "license": "MIT",
       "dependencies": {
-        "kind-of": "^6.0.0"
+        "@babel/code-frame": "^7.8.3",
+        "@types/json-schema": "^7.0.5",
+        "chalk": "^4.1.0",
+        "chokidar": "^3.4.2",
+        "cosmiconfig": "^6.0.0",
+        "deepmerge": "^4.2.2",
+        "fs-extra": "^9.0.0",
+        "glob": "^7.1.6",
+        "memfs": "^3.1.2",
+        "minimatch": "^3.0.4",
+        "schema-utils": "2.7.0",
+        "semver": "^7.3.2",
+        "tapable": "^1.0.0"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=10",
+        "yarn": ">=1.0.0"
+      },
+      "peerDependencies": {
+        "eslint": ">= 6",
+        "typescript": ">= 2.7",
+        "vue-template-compiler": "*",
+        "webpack": ">= 4"
+      },
+      "peerDependenciesMeta": {
+        "eslint": {
+          "optional": true
+        },
+        "vue-template-compiler": {
+          "optional": true
+        }
       }
     },
-    "node_modules/base/node_modules/is-descriptor": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz",
-      "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==",
-      "dev": true,
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/cosmiconfig": {
+      "version": "6.0.0",
+      "license": "MIT",
       "dependencies": {
-        "is-accessor-descriptor": "^1.0.0",
-        "is-data-descriptor": "^1.0.0",
-        "kind-of": "^6.0.2"
+        "@types/parse-json": "^4.0.0",
+        "import-fresh": "^3.1.0",
+        "parse-json": "^5.0.0",
+        "path-type": "^4.0.0",
+        "yaml": "^1.7.2"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=8"
       }
     },
-    "node_modules/base64-js": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
-      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
-      "dev": true,
-      "optional": true
-    },
-    "node_modules/batch": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz",
-      "integrity": "sha1-3DQxT05nkxgJP8dgJyUl+UvyXBY=",
-      "dev": true
-    },
-    "node_modules/bcrypt-pbkdf": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz",
-      "integrity": "sha1-pDAdOJtqQ/m2f/PKEaP2Y342Dp4=",
-      "dev": true,
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/schema-utils": {
+      "version": "2.7.0",
+      "license": "MIT",
       "dependencies": {
-        "tweetnacl": "^0.14.3"
+        "@types/json-schema": "^7.0.4",
+        "ajv": "^6.12.2",
+        "ajv-keywords": "^3.4.1"
+      },
+      "engines": {
+        "node": ">= 8.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
       }
     },
-    "node_modules/bfj": {
-      "version": "6.1.2",
-      "resolved": "https://registry.npmjs.org/bfj/-/bfj-6.1.2.tgz",
-      "integrity": "sha512-BmBJa4Lip6BPRINSZ0BPEIfB1wUY/9rwbwvIHQA1KjX9om29B6id0wnWXq7m3bn5JrUVjeOTnVuhPT1FiHwPGw==",
-      "dev": true,
-      "dependencies": {
-        "bluebird": "^3.5.5",
-        "check-types": "^8.0.3",
-        "hoopy": "^0.1.4",
-        "tryer": "^1.0.1"
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/semver": {
+      "version": "7.6.3",
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
       },
       "engines": {
-        "node": ">= 6.0.0"
+        "node": ">=10"
       }
     },
-    "node_modules/big.js": {
-      "version": "5.2.2",
-      "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
-      "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
-      "dev": true,
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/tapable": {
+      "version": "1.1.3",
+      "license": "MIT",
       "engines": {
-        "node": "*"
+        "node": ">=6"
       }
     },
-    "node_modules/bin-build": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/bin-build/-/bin-build-3.0.0.tgz",
-      "integrity": "sha512-jcUOof71/TNAI2uM5uoUaDq2ePcVBQ3R/qhxAz1rX7UfvduAL/RXD3jXzvn8cVcDJdGVkiR1shal3OH0ImpuhA==",
-      "dev": true,
-      "optional": true,
+    "node_modules/form-data": {
+      "version": "4.0.0",
+      "license": "MIT",
       "dependencies": {
-        "decompress": "^4.0.0",
-        "download": "^6.2.2",
-        "execa": "^0.7.0",
-        "p-map-series": "^1.0.0",
-        "tempfile": "^2.0.0"
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
       },
       "engines": {
-        "node": ">=4"
+        "node": ">= 6"
       }
     },
-    "node_modules/bin-build/node_modules/cross-spawn": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz",
-      "integrity": "sha1-6L0O/uWPz/b4+UUQoKVUu/ojVEk=",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "lru-cache": "^4.0.1",
-        "shebang-command": "^1.2.0",
-        "which": "^1.2.9"
+    "node_modules/form-urlencoded": {
+      "version": "4.1.4",
+      "license": "MIT"
+    },
+    "node_modules/formidable": {
+      "version": "1.2.6",
+      "license": "MIT",
+      "funding": {
+        "url": "https://ko-fi.com/tunnckoCore/commissions"
       }
     },
-    "node_modules/bin-build/node_modules/execa": {
-      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/execa/-/execa-0.7.0.tgz",
-      "integrity": "sha1-lEvs00zEHuMqY6n68nrVpl/Fl3c=",
-      "dev": true,
-      "optional": true,
+    "node_modules/formik": {
+      "version": "2.4.6",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://opencollective.com/formik"
+        }
+      ],
+      "license": "Apache-2.0",
       "dependencies": {
-        "cross-spawn": "^5.0.1",
-        "get-stream": "^3.0.0",
-        "is-stream": "^1.1.0",
-        "npm-run-path": "^2.0.0",
-        "p-finally": "^1.0.0",
-        "signal-exit": "^3.0.0",
-        "strip-eof": "^1.0.0"
+        "@types/hoist-non-react-statics": "^3.3.1",
+        "deepmerge": "^2.1.1",
+        "hoist-non-react-statics": "^3.3.0",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.21",
+        "react-fast-compare": "^2.0.1",
+        "tiny-warning": "^1.0.2",
+        "tslib": "^2.0.0"
       },
-      "engines": {
-        "node": ">=4"
+      "peerDependencies": {
+        "react": ">=16.8.0"
       }
     },
-    "node_modules/bin-build/node_modules/get-stream": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
-      "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=",
-      "dev": true,
-      "optional": true,
+    "node_modules/formik/node_modules/deepmerge": {
+      "version": "2.2.1",
+      "license": "MIT",
       "engines": {
-        "node": ">=4"
+        "node": ">=0.10.0"
       }
     },
-    "node_modules/bin-build/node_modules/lru-cache": {
-      "version": "4.1.5",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz",
-      "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "pseudomap": "^1.0.2",
-        "yallist": "^2.1.2"
+    "node_modules/forwarded": {
+      "version": "0.2.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
       }
     },
-    "node_modules/bin-build/node_modules/yallist": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
-      "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=",
-      "dev": true,
-      "optional": true
-    },
-    "node_modules/bin-check": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/bin-check/-/bin-check-4.1.0.tgz",
-      "integrity": "sha512-b6weQyEUKsDGFlACWSIOfveEnImkJyK/FGW6FAG42loyoquvjdtOIqO6yBFzHyqyVVhNgNkQxxx09SFLK28YnA==",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "execa": "^0.7.0",
-        "executable": "^4.1.0"
+    "node_modules/fraction.js": {
+      "version": "4.3.7",
+      "license": "MIT",
+      "engines": {
+        "node": "*"
       },
+      "funding": {
+        "type": "patreon",
+        "url": "https://github.com/sponsors/rawify"
+      }
+    },
+    "node_modules/fresh": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
+      "integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==",
       "engines": {
-        "node": ">=4"
+        "node": ">= 0.6"
       }
     },
-    "node_modules/bin-check/node_modules/cross-spawn": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz",
-      "integrity": "sha1-6L0O/uWPz/b4+UUQoKVUu/ojVEk=",
-      "dev": true,
-      "optional": true,
+    "node_modules/frontend-components-tinymce-advanced-plugins": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/frontend-components-tinymce-advanced-plugins/-/frontend-components-tinymce-advanced-plugins-1.0.4.tgz",
+      "integrity": "sha512-3PzEaOa9k1csUsVqvrJ11LXiUgu804lax0sq6eWmirtfYMJNYrajUEwW4REKTnpQrv1ByDSkVV/kaporN0PkWA==",
+      "license": "AGPL-3.0",
       "dependencies": {
-        "lru-cache": "^4.0.1",
-        "shebang-command": "^1.2.0",
-        "which": "^1.2.9"
+        "tinymce": "^5.10.4"
       }
     },
-    "node_modules/bin-check/node_modules/execa": {
-      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/execa/-/execa-0.7.0.tgz",
-      "integrity": "sha1-lEvs00zEHuMqY6n68nrVpl/Fl3c=",
-      "dev": true,
-      "optional": true,
+    "node_modules/fs-constants": {
+      "version": "1.0.0",
+      "license": "MIT"
+    },
+    "node_modules/fs-extra": {
+      "version": "9.1.0",
+      "license": "MIT",
       "dependencies": {
-        "cross-spawn": "^5.0.1",
-        "get-stream": "^3.0.0",
-        "is-stream": "^1.1.0",
-        "npm-run-path": "^2.0.0",
-        "p-finally": "^1.0.0",
-        "signal-exit": "^3.0.0",
-        "strip-eof": "^1.0.0"
+        "at-least-node": "^1.0.0",
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
       },
       "engines": {
-        "node": ">=4"
+        "node": ">=10"
       }
     },
-    "node_modules/bin-check/node_modules/get-stream": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
-      "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=",
-      "dev": true,
-      "optional": true,
-      "engines": {
-        "node": ">=4"
-      }
+    "node_modules/fs-monkey": {
+      "version": "1.0.6",
+      "license": "Unlicense"
     },
-    "node_modules/bin-check/node_modules/lru-cache": {
-      "version": "4.1.5",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz",
-      "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "pseudomap": "^1.0.2",
-        "yallist": "^2.1.2"
-      }
+    "node_modules/fs-readdir-recursive": {
+      "version": "1.1.0",
+      "license": "MIT"
     },
-    "node_modules/bin-check/node_modules/yallist": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
-      "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=",
-      "dev": true,
-      "optional": true
+    "node_modules/fs.realpath": {
+      "version": "1.0.0",
+      "license": "ISC"
     },
-    "node_modules/bin-version": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/bin-version/-/bin-version-3.1.0.tgz",
-      "integrity": "sha512-Mkfm4iE1VFt4xd4vH+gx+0/71esbfus2LsnCGe8Pi4mndSPyT+NGES/Eg99jx8/lUGWfu3z2yuB/bt5UB+iVbQ==",
-      "dev": true,
-      "optional": true,
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/function.prototype.name": {
+      "version": "1.1.6",
+      "license": "MIT",
       "dependencies": {
-        "execa": "^1.0.0",
-        "find-versions": "^3.0.0"
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1",
+        "functions-have-names": "^1.2.3"
       },
       "engines": {
-        "node": ">=6"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/bin-version-check": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/bin-version-check/-/bin-version-check-4.0.0.tgz",
-      "integrity": "sha512-sR631OrhC+1f8Cvs8WyVWOA33Y8tgwjETNPyyD/myRBXLkfS/vl74FmH/lFcRl9KY3zwGh7jFhvyk9vV3/3ilQ==",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "bin-version": "^3.0.0",
-        "semver": "^5.6.0",
-        "semver-truncate": "^1.1.2"
-      },
+    "node_modules/functions-have-names": {
+      "version": "1.2.3",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/gensync": {
+      "version": "1.0.0-beta.2",
+      "license": "MIT",
       "engines": {
-        "node": ">=6"
+        "node": ">=6.9.0"
       }
     },
-    "node_modules/bin-wrapper": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/bin-wrapper/-/bin-wrapper-4.1.0.tgz",
-      "integrity": "sha512-hfRmo7hWIXPkbpi0ZltboCMVrU+0ClXR/JgbCKKjlDjQf6igXa7OwdqNcFWQZPZTgiY7ZpzE3+LjjkLiTN2T7Q==",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "bin-check": "^4.1.0",
-        "bin-version-check": "^4.0.0",
-        "download": "^7.1.0",
-        "import-lazy": "^3.1.0",
-        "os-filter-obj": "^2.0.0",
-        "pify": "^4.0.1"
-      },
+    "node_modules/get-caller-file": {
+      "version": "2.0.5",
+      "license": "ISC",
       "engines": {
-        "node": ">=6"
+        "node": "6.* || 8.* || >= 10.*"
       }
     },
-    "node_modules/bin-wrapper/node_modules/download": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/download/-/download-7.1.0.tgz",
-      "integrity": "sha512-xqnBTVd/E+GxJVrX5/eUJiLYjCGPwMpdL+jGhGU57BvtcA7wwhtHVbXBeUk51kOpW3S7Jn3BQbN9Q1R1Km2qDQ==",
-      "dev": true,
-      "optional": true,
+    "node_modules/get-intrinsic": {
+      "version": "1.2.4",
+      "license": "MIT",
       "dependencies": {
-        "archive-type": "^4.0.0",
-        "caw": "^2.0.1",
-        "content-disposition": "^0.5.2",
-        "decompress": "^4.2.0",
-        "ext-name": "^5.0.0",
-        "file-type": "^8.1.0",
-        "filenamify": "^2.0.0",
-        "get-stream": "^3.0.0",
-        "got": "^8.3.1",
-        "make-dir": "^1.2.0",
-        "p-event": "^2.1.0",
-        "pify": "^3.0.0"
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "has-proto": "^1.0.1",
+        "has-symbols": "^1.0.3",
+        "hasown": "^2.0.0"
       },
       "engines": {
-        "node": ">=6"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/bin-wrapper/node_modules/download/node_modules/pify": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
-      "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
-      "dev": true,
-      "optional": true,
+    "node_modules/get-nonce": {
+      "version": "1.0.1",
+      "license": "MIT",
       "engines": {
-        "node": ">=4"
+        "node": ">=6"
       }
     },
-    "node_modules/bin-wrapper/node_modules/file-type": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/file-type/-/file-type-8.1.0.tgz",
-      "integrity": "sha512-qyQ0pzAy78gVoJsmYeNgl8uH8yKhr1lVhW7JbzJmnlRi0I4R2eEDEJZVKG8agpDnLpacwNbDhLNG/LMdxHD2YQ==",
-      "dev": true,
-      "optional": true,
+    "node_modules/get-package-type": {
+      "version": "0.1.0",
+      "license": "MIT",
       "engines": {
-        "node": ">=6"
+        "node": ">=8.0.0"
       }
     },
-    "node_modules/bin-wrapper/node_modules/get-stream": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
-      "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=",
-      "dev": true,
-      "optional": true,
+    "node_modules/get-stream": {
+      "version": "6.0.1",
+      "license": "MIT",
       "engines": {
-        "node": ">=4"
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/bin-wrapper/node_modules/got": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/got/-/got-8.3.2.tgz",
-      "integrity": "sha512-qjUJ5U/hawxosMryILofZCkm3C84PLJS/0grRIpjAwu+Lkxxj5cxeCU25BG0/3mDSpXKTyZr8oh8wIgLaH0QCw==",
-      "dev": true,
-      "optional": true,
+    "node_modules/get-symbol-description": {
+      "version": "1.0.2",
+      "license": "MIT",
       "dependencies": {
-        "@sindresorhus/is": "^0.7.0",
-        "cacheable-request": "^2.1.1",
-        "decompress-response": "^3.3.0",
-        "duplexer3": "^0.1.4",
-        "get-stream": "^3.0.0",
-        "into-stream": "^3.1.0",
-        "is-retry-allowed": "^1.1.0",
-        "isurl": "^1.0.0-alpha5",
-        "lowercase-keys": "^1.0.0",
-        "mimic-response": "^1.0.0",
-        "p-cancelable": "^0.4.0",
-        "p-timeout": "^2.0.1",
-        "pify": "^3.0.0",
-        "safe-buffer": "^5.1.1",
-        "timed-out": "^4.0.1",
-        "url-parse-lax": "^3.0.0",
-        "url-to-options": "^1.0.1"
+        "call-bind": "^1.0.5",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.4"
       },
       "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/bin-wrapper/node_modules/got/node_modules/pify": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
-      "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
-      "dev": true,
-      "optional": true,
-      "engines": {
-        "node": ">=4"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/bin-wrapper/node_modules/make-dir": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-1.3.0.tgz",
-      "integrity": "sha512-2w31R7SJtieJJnQtGc7RVL2StM2vGYVfqUOvUDxH6bC6aJTxPxTF0GnIgCyu7tjockiUWAYQRbxa7vKn34s5sQ==",
-      "dev": true,
-      "optional": true,
+    "node_modules/github-from-package": {
+      "version": "0.0.0",
+      "license": "MIT"
+    },
+    "node_modules/glob": {
+      "version": "7.2.3",
+      "license": "ISC",
       "dependencies": {
-        "pify": "^3.0.0"
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
       },
       "engines": {
-        "node": ">=4"
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/bin-wrapper/node_modules/make-dir/node_modules/pify": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
-      "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
-      "dev": true,
-      "optional": true,
+    "node_modules/glob-parent": {
+      "version": "5.1.2",
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
       "engines": {
-        "node": ">=4"
+        "node": ">= 6"
       }
     },
-    "node_modules/bin-wrapper/node_modules/p-cancelable": {
+    "node_modules/glob-to-regexp": {
       "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/p-cancelable/-/p-cancelable-0.4.1.tgz",
-      "integrity": "sha512-HNa1A8LvB1kie7cERyy21VNeHb2CWJJYqyyC2o3klWFfMGlFmWv2Z7sFgZH8ZiaYL95ydToKTFVXgMV/Os0bBQ==",
-      "dev": true,
-      "optional": true,
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/global-modules": {
+      "version": "2.0.0",
+      "license": "MIT",
+      "dependencies": {
+        "global-prefix": "^3.0.0"
+      },
       "engines": {
-        "node": ">=4"
+        "node": ">=6"
       }
     },
-    "node_modules/bin-wrapper/node_modules/p-event": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/p-event/-/p-event-2.3.1.tgz",
-      "integrity": "sha512-NQCqOFhbpVTMX4qMe8PF8lbGtzZ+LCiN7pcNrb/413Na7+TRoe1xkKUzuWa/YEJdGQ0FvKtj35EEbDoVPO2kbA==",
-      "dev": true,
-      "optional": true,
+    "node_modules/global-prefix": {
+      "version": "3.0.0",
+      "license": "MIT",
       "dependencies": {
-        "p-timeout": "^2.0.1"
+        "ini": "^1.3.5",
+        "kind-of": "^6.0.2",
+        "which": "^1.3.1"
       },
       "engines": {
         "node": ">=6"
       }
     },
-    "node_modules/bin-wrapper/node_modules/p-timeout": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/p-timeout/-/p-timeout-2.0.1.tgz",
-      "integrity": "sha512-88em58dDVB/KzPEx1X0N3LwFfYZPyDc4B6eF38M1rk9VTZMbxXXgjugz8mmwpS9Ox4BDZ+t6t3QP5+/gazweIA==",
-      "dev": true,
-      "optional": true,
+    "node_modules/global-prefix/node_modules/which": {
+      "version": "1.3.1",
+      "license": "ISC",
       "dependencies": {
-        "p-finally": "^1.0.0"
+        "isexe": "^2.0.0"
       },
-      "engines": {
-        "node": ">=4"
+      "bin": {
+        "which": "bin/which"
       }
     },
-    "node_modules/bin-wrapper/node_modules/prepend-http": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-2.0.0.tgz",
-      "integrity": "sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc=",
-      "dev": true,
-      "optional": true,
+    "node_modules/globals": {
+      "version": "11.12.0",
+      "license": "MIT",
       "engines": {
         "node": ">=4"
       }
     },
-    "node_modules/bin-wrapper/node_modules/url-parse-lax": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/url-parse-lax/-/url-parse-lax-3.0.0.tgz",
-      "integrity": "sha1-FrXK/Afb42dsGxmZF3gj1lA6yww=",
-      "dev": true,
-      "optional": true,
+    "node_modules/globalthis": {
+      "version": "1.0.4",
+      "license": "MIT",
       "dependencies": {
-        "prepend-http": "^2.0.0"
+        "define-properties": "^1.2.1",
+        "gopd": "^1.0.1"
       },
       "engines": {
-        "node": ">=4"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/binary-extensions": {
-      "version": "1.13.1",
-      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-1.13.1.tgz",
-      "integrity": "sha512-Un7MIEDdUC5gNpcGDV97op1Ywk748MpHcFTHoYs6qnj1Z3j7I53VG3nwZhKzoBZmbdRNnb6WRdFlwl7tSDuZGw==",
-      "dev": true,
+    "node_modules/globby": {
+      "version": "11.1.0",
+      "license": "MIT",
+      "dependencies": {
+        "array-union": "^2.1.0",
+        "dir-glob": "^3.0.1",
+        "fast-glob": "^3.2.9",
+        "ignore": "^5.2.0",
+        "merge2": "^1.4.1",
+        "slash": "^3.0.0"
+      },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/bindings": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
-      "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "file-uri-to-path": "1.0.0"
+    "node_modules/globby/node_modules/slash": {
+      "version": "3.0.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
       }
     },
-    "node_modules/bl": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/bl/-/bl-1.2.3.tgz",
-      "integrity": "sha512-pvcNpa0UU69UT341rO6AYy4FVAIkUHuZXRIWbq+zHnsVcRzDDjIAhGuuYoi0d//cwIwtt4pkpKycWEfjdV+vww==",
+    "node_modules/globjoin": {
+      "version": "0.1.4",
       "dev": true,
-      "optional": true,
+      "license": "MIT"
+    },
+    "node_modules/gopd": {
+      "version": "1.0.1",
+      "license": "MIT",
       "dependencies": {
-        "readable-stream": "^2.3.5",
-        "safe-buffer": "^5.1.1"
+        "get-intrinsic": "^1.1.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/bluebird": {
-      "version": "3.7.2",
-      "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
-      "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==",
-      "dev": true
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "license": "ISC"
     },
-    "node_modules/body-parser": {
-      "version": "1.19.0",
-      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.19.0.tgz",
-      "integrity": "sha512-dhEPs72UPbDnAQJ9ZKMNTP6ptJaionhP5cBb541nXPlW60Jepo9RV/a4fX4XWW9CuFNK22krhrj1+rgzifNCsw==",
-      "dev": true,
+    "node_modules/graphemer": {
+      "version": "1.4.0",
+      "license": "MIT"
+    },
+    "node_modules/gzip-size": {
+      "version": "6.0.0",
+      "license": "MIT",
       "dependencies": {
-        "bytes": "3.1.0",
-        "content-type": "~1.0.4",
-        "debug": "2.6.9",
-        "depd": "~1.1.2",
-        "http-errors": "1.7.2",
-        "iconv-lite": "0.4.24",
-        "on-finished": "~2.3.0",
-        "qs": "6.7.0",
-        "raw-body": "2.4.0",
-        "type-is": "~1.6.17"
+        "duplexer": "^0.1.2"
       },
       "engines": {
-        "node": ">= 0.8"
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/body-parser/node_modules/debug": {
-      "version": "2.6.9",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+    "node_modules/handle-thing": {
+      "version": "2.0.1",
+      "license": "MIT"
+    },
+    "node_modules/hard-rejection": {
+      "version": "2.1.0",
       "dev": true,
-      "dependencies": {
-        "ms": "2.0.0"
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
       }
     },
-    "node_modules/body-parser/node_modules/qs": {
-      "version": "6.7.0",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz",
-      "integrity": "sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ==",
-      "dev": true,
+    "node_modules/harmony-reflect": {
+      "version": "1.6.2",
+      "license": "(Apache-2.0 OR MPL-1.1)"
+    },
+    "node_modules/has": {
+      "version": "1.0.4",
+      "license": "MIT",
       "engines": {
-        "node": ">=0.6"
+        "node": ">= 0.4.0"
       }
     },
-    "node_modules/bonjour": {
-      "version": "3.5.0",
-      "resolved": "https://registry.npmjs.org/bonjour/-/bonjour-3.5.0.tgz",
-      "integrity": "sha1-jokKGD2O6aI5OzhExpGkK897yfU=",
-      "dev": true,
-      "dependencies": {
-        "array-flatten": "^2.1.0",
-        "deep-equal": "^1.0.1",
-        "dns-equal": "^1.0.0",
-        "dns-txt": "^2.0.2",
-        "multicast-dns": "^6.0.1",
-        "multicast-dns-service-types": "^1.1.0"
+    "node_modules/has-bigints": {
+      "version": "1.0.2",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/bonjour/node_modules/array-flatten": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-2.1.2.tgz",
-      "integrity": "sha512-hNfzcOV8W4NdualtqBFPyVO+54DSJuZGY9qT4pRroB6S9e3iiido2ISIC5h9R2sPJ8H3FHCIiEnsv1lPXO3KtQ==",
-      "dev": true
+    "node_modules/has-flag": {
+      "version": "4.0.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
     },
-    "node_modules/boolbase": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
-      "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
-      "dev": true
+    "node_modules/has-property-descriptors": {
+      "version": "1.0.2",
+      "license": "MIT",
+      "dependencies": {
+        "es-define-property": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
     },
-    "node_modules/bootstrap": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.0.tgz",
-      "integrity": "sha512-Io55IuQY3kydzHtbGvQya3H+KorS/M9rSNyfCGCg9WZ4pyT/lCxIlpJgG1GXW/PswzC84Tr2fBYi+7+jFVQQBw=="
+    "node_modules/has-proto": {
+      "version": "1.0.3",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
     },
-    "node_modules/brace-expansion": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-      "dependencies": {
-        "balanced-match": "^1.0.0",
-        "concat-map": "0.0.1"
+    "node_modules/has-symbols": {
+      "version": "1.0.3",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/braces": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz",
-      "integrity": "sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==",
-      "dev": true,
+    "node_modules/has-tostringtag": {
+      "version": "1.0.2",
+      "license": "MIT",
       "dependencies": {
-        "arr-flatten": "^1.1.0",
-        "array-unique": "^0.3.2",
-        "extend-shallow": "^2.0.1",
-        "fill-range": "^4.0.0",
-        "isobject": "^3.0.1",
-        "repeat-element": "^1.1.2",
-        "snapdragon": "^0.8.1",
-        "snapdragon-node": "^2.0.1",
-        "split-string": "^3.0.2",
-        "to-regex": "^3.0.1"
+        "has-symbols": "^1.0.3"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/braces/node_modules/extend-shallow": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-      "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-      "dev": true,
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "license": "MIT",
       "dependencies": {
-        "is-extendable": "^0.1.0"
+        "function-bind": "^1.1.2"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">= 0.4"
       }
     },
-    "node_modules/browser-process-hrtime": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz",
-      "integrity": "sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==",
-      "dev": true
+    "node_modules/he": {
+      "version": "1.2.0",
+      "license": "MIT",
+      "bin": {
+        "he": "bin/he"
+      }
     },
-    "node_modules/browser-resolve": {
-      "version": "1.11.3",
-      "resolved": "https://registry.npmjs.org/browser-resolve/-/browser-resolve-1.11.3.tgz",
-      "integrity": "sha512-exDi1BYWB/6raKHmDTCicQfTkqwN5fioMFV4j8BsfMU4R2DK/QfZfK7kOVkmWCNANf0snkBzqGqAJBao9gZMdQ==",
-      "dev": true,
+    "node_modules/history": {
+      "version": "4.10.1",
+      "license": "MIT",
       "dependencies": {
-        "resolve": "1.1.7"
+        "@babel/runtime": "^7.1.2",
+        "loose-envify": "^1.2.0",
+        "resolve-pathname": "^3.0.0",
+        "tiny-invariant": "^1.0.2",
+        "tiny-warning": "^1.0.0",
+        "value-equal": "^1.0.1"
       }
     },
-    "node_modules/browser-resolve/node_modules/resolve": {
-      "version": "1.1.7",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.1.7.tgz",
-      "integrity": "sha1-IDEU2CrSxe2ejgQRs5ModeiJ6Xs=",
-      "dev": true
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
     },
-    "node_modules/browserslist": {
-      "version": "4.16.6",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.16.6.tgz",
-      "integrity": "sha512-Wspk/PqO+4W9qp5iUTJsa1B/QrYn1keNCcEP5OvP7WBwT4KaDly0uONYmC6Xa3Z5IqnUgS0KcgLYu1l74x0ZXQ==",
+    "node_modules/hosted-git-info": {
+      "version": "4.1.0",
       "dev": true,
+      "license": "ISC",
       "dependencies": {
-        "caniuse-lite": "^1.0.30001219",
-        "colorette": "^1.2.2",
-        "electron-to-chromium": "^1.3.723",
-        "escalade": "^3.1.1",
-        "node-releases": "^1.1.71"
-      },
-      "bin": {
-        "browserslist": "cli.js"
+        "lru-cache": "^6.0.0"
       },
       "engines": {
-        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+        "node": ">=10"
       }
     },
-    "node_modules/browserslist/node_modules/colorette": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.2.2.tgz",
-      "integrity": "sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w==",
-      "dev": true
-    },
-    "node_modules/bser": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/bser/-/bser-2.1.1.tgz",
-      "integrity": "sha512-gQxTNE/GAfIIrmHLUE3oJyp5FO6HRBfhjnw4/wMmA63ZGDJnWBmgY/lyQBpnDUkGmAhbSe39tx2d/iTOAfglwQ==",
+    "node_modules/hosted-git-info/node_modules/lru-cache": {
+      "version": "6.0.0",
       "dev": true,
+      "license": "ISC",
       "dependencies": {
-        "node-int64": "^0.4.0"
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
       }
     },
-    "node_modules/buffer": {
-      "version": "5.7.1",
-      "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
-      "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
+    "node_modules/hosted-git-info/node_modules/yallist": {
+      "version": "4.0.0",
       "dev": true,
-      "optional": true,
-      "dependencies": {
-        "base64-js": "^1.3.1",
-        "ieee754": "^1.1.13"
-      }
+      "license": "ISC"
     },
-    "node_modules/buffer-alloc": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/buffer-alloc/-/buffer-alloc-1.2.0.tgz",
-      "integrity": "sha512-CFsHQgjtW1UChdXgbyJGtnm+O/uLQeZdtbDo8mfUgYXCHSM1wgrVxXm6bSyrUuErEb+4sYVGCzASBRot7zyrow==",
-      "dev": true,
-      "optional": true,
+    "node_modules/hpack.js": {
+      "version": "2.1.6",
+      "license": "MIT",
       "dependencies": {
-        "buffer-alloc-unsafe": "^1.1.0",
-        "buffer-fill": "^1.0.0"
+        "inherits": "^2.0.1",
+        "obuf": "^1.0.0",
+        "readable-stream": "^2.0.1",
+        "wbuf": "^1.1.0"
       }
     },
-    "node_modules/buffer-alloc-unsafe": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/buffer-alloc-unsafe/-/buffer-alloc-unsafe-1.1.0.tgz",
-      "integrity": "sha512-TEM2iMIEQdJ2yjPJoSIsldnleVaAk1oW3DBVUykyOLsEsFmEc9kn+SFFPz+gl54KQNxlDnAwCXosOS9Okx2xAg==",
-      "dev": true,
-      "optional": true
-    },
-    "node_modules/buffer-crc32": {
-      "version": "0.2.13",
-      "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
-      "integrity": "sha1-DTM+PwDqxQqhRUq9MO+MKl2ackI=",
-      "dev": true,
-      "optional": true,
+    "node_modules/html-encoding-sniffer": {
+      "version": "3.0.0",
+      "license": "MIT",
+      "dependencies": {
+        "whatwg-encoding": "^2.0.0"
+      },
       "engines": {
-        "node": "*"
+        "node": ">=12"
       }
     },
-    "node_modules/buffer-fill": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/buffer-fill/-/buffer-fill-1.0.0.tgz",
-      "integrity": "sha1-+PeLdniYiO858gXNY39o5wISKyw=",
-      "dev": true,
-      "optional": true
-    },
-    "node_modules/buffer-from": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz",
-      "integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==",
-      "dev": true
-    },
-    "node_modules/buffer-indexof": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/buffer-indexof/-/buffer-indexof-1.1.1.tgz",
-      "integrity": "sha512-4/rOEg86jivtPTeOUUT61jJO1Ya1TrR/OkqCSZDyq84WJh3LuuiphBYJN+fm5xufIk4XAFcEwte/8WzC8If/1g==",
-      "dev": true
+    "node_modules/html-entities": {
+      "version": "2.5.2",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/mdevils"
+        },
+        {
+          "type": "patreon",
+          "url": "https://patreon.com/mdevils"
+        }
+      ],
+      "license": "MIT"
     },
-    "node_modules/bytes": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz",
-      "integrity": "sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.8"
-      }
+    "node_modules/html-escaper": {
+      "version": "2.0.2",
+      "license": "MIT"
     },
-    "node_modules/cache-base": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/cache-base/-/cache-base-1.0.1.tgz",
-      "integrity": "sha512-AKcdTnFSWATd5/GCPRxr2ChwIJ85CeyrEyjRHlKxQ56d4XJMGym0uAiKn0xbLOGOl3+yRpOTi484dVCEc5AUzQ==",
-      "dev": true,
+    "node_modules/html-minifier-terser": {
+      "version": "6.1.0",
+      "license": "MIT",
       "dependencies": {
-        "collection-visit": "^1.0.0",
-        "component-emitter": "^1.2.1",
-        "get-value": "^2.0.6",
-        "has-value": "^1.0.0",
-        "isobject": "^3.0.1",
-        "set-value": "^2.0.0",
-        "to-object-path": "^0.3.0",
-        "union-value": "^1.0.0",
-        "unset-value": "^1.0.0"
+        "camel-case": "^4.1.2",
+        "clean-css": "^5.2.2",
+        "commander": "^8.3.0",
+        "he": "^1.2.0",
+        "param-case": "^3.0.4",
+        "relateurl": "^0.2.7",
+        "terser": "^5.10.0"
+      },
+      "bin": {
+        "html-minifier-terser": "cli.js"
       },
       "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/cache-control-esm": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/cache-control-esm/-/cache-control-esm-1.0.0.tgz",
-      "integrity": "sha512-Fa3UV4+eIk4EOih8FTV6EEsVKO0W5XWtNs6FC3InTfVz+EjurjPfDXY5wZDo/lxjDxg5RjNcurLyxEJBcEUx9g=="
-    },
-    "node_modules/cacheable-request": {
-      "version": "2.1.4",
-      "resolved": "https://registry.npmjs.org/cacheable-request/-/cacheable-request-2.1.4.tgz",
-      "integrity": "sha1-DYCIAbY0KtM8kd+dC0TcCbkeXD0=",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "clone-response": "1.0.2",
-        "get-stream": "3.0.0",
-        "http-cache-semantics": "3.8.1",
-        "keyv": "3.0.0",
-        "lowercase-keys": "1.0.0",
-        "normalize-url": "2.0.1",
-        "responselike": "1.0.2"
+        "node": ">=12"
       }
     },
-    "node_modules/cacheable-request/node_modules/get-stream": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
-      "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=",
-      "dev": true,
-      "optional": true,
+    "node_modules/html-minifier-terser/node_modules/commander": {
+      "version": "8.3.0",
+      "license": "MIT",
       "engines": {
-        "node": ">=4"
+        "node": ">= 12"
       }
     },
-    "node_modules/cacheable-request/node_modules/lowercase-keys": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-1.0.0.tgz",
-      "integrity": "sha1-TjNms55/VFfjXxMkvfb4jQv8cwY=",
+    "node_modules/html-tags": {
+      "version": "3.3.1",
       "dev": true,
-      "optional": true,
+      "license": "MIT",
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/cacheable-request/node_modules/normalize-url": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-2.0.1.tgz",
-      "integrity": "sha512-D6MUW4K/VzoJ4rJ01JFKxDrtY1v9wrgzCX5f2qj/lzH1m/lW6MhUZFKerVsnyjOhOsYzI9Kqqak+10l4LvLpMw==",
-      "dev": true,
-      "optional": true,
+    "node_modules/html-webpack-plugin": {
+      "version": "5.6.0",
+      "license": "MIT",
       "dependencies": {
-        "prepend-http": "^2.0.0",
-        "query-string": "^5.0.1",
-        "sort-keys": "^2.0.0"
+        "@types/html-minifier-terser": "^6.0.0",
+        "html-minifier-terser": "^6.0.2",
+        "lodash": "^4.17.21",
+        "pretty-error": "^4.0.0",
+        "tapable": "^2.0.0"
       },
       "engines": {
-        "node": ">=4"
+        "node": ">=10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/html-webpack-plugin"
+      },
+      "peerDependencies": {
+        "@rspack/core": "0.x || 1.x",
+        "webpack": "^5.20.0"
+      },
+      "peerDependenciesMeta": {
+        "@rspack/core": {
+          "optional": true
+        },
+        "webpack": {
+          "optional": true
+        }
       }
     },
-    "node_modules/cacheable-request/node_modules/prepend-http": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-2.0.0.tgz",
-      "integrity": "sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc=",
-      "dev": true,
-      "optional": true,
+    "node_modules/html-webpack-plugin/node_modules/tapable": {
+      "version": "2.2.1",
+      "license": "MIT",
       "engines": {
-        "node": ">=4"
+        "node": ">=6"
       }
     },
-    "node_modules/cacheable-request/node_modules/query-string": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/query-string/-/query-string-5.1.1.tgz",
-      "integrity": "sha512-gjWOsm2SoGlgLEdAGt7a6slVOk9mGiXmPFMqrEhLQ68rhQuBnpfs3+EmlvqKyxnCo9/PPlF+9MtY02S1aFg+Jw==",
-      "dev": true,
-      "optional": true,
+    "node_modules/htmlparser2": {
+      "version": "6.1.0",
+      "funding": [
+        "https://github.com/fb55/htmlparser2?sponsor=1",
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "license": "MIT",
       "dependencies": {
-        "decode-uri-component": "^0.2.0",
-        "object-assign": "^4.1.0",
-        "strict-uri-encode": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
+        "domelementtype": "^2.0.1",
+        "domhandler": "^4.0.0",
+        "domutils": "^2.5.2",
+        "entities": "^2.0.0"
       }
     },
-    "node_modules/cacheable-request/node_modules/sort-keys": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/sort-keys/-/sort-keys-2.0.0.tgz",
-      "integrity": "sha1-ZYU1WEhh7JfXMNbPQYIuH1ZoQSg=",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "is-plain-obj": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=4"
+    "node_modules/htmlparser2/node_modules/entities": {
+      "version": "2.2.0",
+      "license": "BSD-2-Clause",
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
       }
     },
-    "node_modules/call-bind": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
-      "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
-      "dependencies": {
-        "function-bind": "^1.1.1",
-        "get-intrinsic": "^1.0.2"
-      }
+    "node_modules/http-deceiver": {
+      "version": "1.2.7",
+      "license": "MIT"
     },
-    "node_modules/caller-callsite": {
+    "node_modules/http-errors": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/caller-callsite/-/caller-callsite-2.0.0.tgz",
-      "integrity": "sha1-hH4PzgoiN1CpoCfFSzNzGtMVQTQ=",
-      "dev": true,
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
+      "integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==",
       "dependencies": {
-        "callsites": "^2.0.0"
+        "depd": "2.0.0",
+        "inherits": "2.0.4",
+        "setprototypeof": "1.2.0",
+        "statuses": "2.0.1",
+        "toidentifier": "1.0.1"
       },
       "engines": {
-        "node": ">=4"
+        "node": ">= 0.8"
       }
     },
-    "node_modules/caller-callsite/node_modules/callsites": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/callsites/-/callsites-2.0.0.tgz",
-      "integrity": "sha1-BuuE8A7qQT2oav/vrL/7Ngk7PFA=",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
+    "node_modules/http-parser-js": {
+      "version": "0.5.8",
+      "license": "MIT"
     },
-    "node_modules/caller-path": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/caller-path/-/caller-path-2.0.0.tgz",
-      "integrity": "sha1-Ro+DBE42mrIBD6xfBs7uFbsssfQ=",
-      "dev": true,
+    "node_modules/http-proxy": {
+      "version": "1.18.1",
+      "license": "MIT",
       "dependencies": {
-        "caller-callsite": "^2.0.0"
+        "eventemitter3": "^4.0.0",
+        "follow-redirects": "^1.0.0",
+        "requires-port": "^1.0.0"
       },
       "engines": {
-        "node": ">=4"
+        "node": ">=8.0.0"
       }
     },
-    "node_modules/callsites": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
-      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
-      "dev": true,
+    "node_modules/http-proxy-agent": {
+      "version": "5.0.0",
+      "license": "MIT",
+      "dependencies": {
+        "@tootallnate/once": "2",
+        "agent-base": "6",
+        "debug": "4"
+      },
       "engines": {
-        "node": ">=6"
+        "node": ">= 6"
       }
     },
-    "node_modules/camel-case": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-4.1.2.tgz",
-      "integrity": "sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==",
-      "dev": true,
+    "node_modules/http-proxy-middleware": {
+      "version": "2.0.6",
+      "license": "MIT",
       "dependencies": {
-        "pascal-case": "^3.1.2",
-        "tslib": "^2.0.3"
+        "@types/http-proxy": "^1.17.8",
+        "http-proxy": "^1.18.1",
+        "is-glob": "^4.0.1",
+        "is-plain-obj": "^3.0.0",
+        "micromatch": "^4.0.2"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "@types/express": "^4.17.13"
+      },
+      "peerDependenciesMeta": {
+        "@types/express": {
+          "optional": true
+        }
       }
     },
-    "node_modules/camel-case/node_modules/tslib": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
-      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
-      "dev": true
-    },
-    "node_modules/camelcase": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.2.0.tgz",
-      "integrity": "sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg==",
-      "dev": true,
+    "node_modules/http-proxy-middleware/node_modules/is-plain-obj": {
+      "version": "3.0.0",
+      "license": "MIT",
       "engines": {
         "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/camelcase-keys": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz",
-      "integrity": "sha1-MIvur/3ygRkFHvodkyITyRuPkuc=",
-      "dev": true,
-      "optional": true,
+    "node_modules/https-proxy-agent": {
+      "version": "5.0.1",
+      "license": "MIT",
       "dependencies": {
-        "camelcase": "^2.0.0",
-        "map-obj": "^1.0.0"
+        "agent-base": "6",
+        "debug": "4"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">= 6"
       }
     },
-    "node_modules/camelcase-keys/node_modules/camelcase": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-2.1.1.tgz",
-      "integrity": "sha1-fB0W1nmhu+WcoCys7PsBHiAfWh8=",
-      "dev": true,
-      "optional": true,
+    "node_modules/human-signals": {
+      "version": "2.1.0",
+      "license": "Apache-2.0",
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=10.17.0"
       }
     },
-    "node_modules/caniuse-api": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
-      "integrity": "sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==",
+    "node_modules/husky": {
+      "version": "7.0.4",
       "dev": true,
-      "dependencies": {
-        "browserslist": "^4.0.0",
-        "caniuse-lite": "^1.0.0",
-        "lodash.memoize": "^4.1.2",
-        "lodash.uniq": "^4.5.0"
+      "license": "MIT",
+      "bin": {
+        "husky": "lib/bin.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/typicode"
       }
     },
-    "node_modules/caniuse-lite": {
-      "version": "1.0.30001243",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001243.tgz",
-      "integrity": "sha512-vNxw9mkTBtkmLFnJRv/2rhs1yufpDfCkBZexG3Y0xdOH2Z/eE/85E4Dl5j1YUN34nZVsSp6vVRFQRrez9wJMRA==",
-      "dev": true
+    "node_modules/hyphenate-style-name": {
+      "version": "1.1.0",
+      "license": "BSD-3-Clause"
     },
-    "node_modules/caporal": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/caporal/-/caporal-1.3.0.tgz",
-      "integrity": "sha512-4bj21UXbEu5cF+1gVjhwwRqMhY3lR7CUTlBr6YX3uzftL4l/sbu8EoHfOLZWHr+HeiosW9fTWkQCS2UZMAk5lw==",
-      "dev": true,
+    "node_modules/i18n-iso-countries": {
+      "version": "4.3.1",
+      "license": "MIT",
       "dependencies": {
-        "bluebird": "^3.4.7",
-        "cli-table3": "^0.5.0",
-        "colorette": "^1.0.1",
-        "fast-levenshtein": "^2.0.6",
-        "lodash": "^4.17.14",
-        "micromist": "1.1.0",
-        "prettyjson": "^1.2.1",
-        "tabtab": "^2.2.2",
-        "winston": "^2.3.1"
+        "diacritics": "^1.3.0"
       },
       "engines": {
-        "node": ">= 8"
+        "node": ">= 6"
       }
     },
-    "node_modules/capture-exit": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/capture-exit/-/capture-exit-2.0.0.tgz",
-      "integrity": "sha512-PiT/hQmTonHhl/HFGN+Lx3JJUznrVYJ3+AQsnthneZbvW7x+f08Tk7yLJTLEOUvBTbduLeeBkxEaYXUOUrRq6g==",
-      "dev": true,
+    "node_modules/iconv-lite": {
+      "version": "0.4.24",
+      "license": "MIT",
       "dependencies": {
-        "rsvp": "^4.8.4"
+        "safer-buffer": ">= 2.1.2 < 3"
       },
       "engines": {
-        "node": "6.* || 8.* || >= 10.*"
+        "node": ">=0.10.0"
       }
     },
-    "node_modules/caseless": {
-      "version": "0.12.0",
-      "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
-      "integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=",
-      "dev": true
-    },
-    "node_modules/cast-array": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/cast-array/-/cast-array-1.0.1.tgz",
-      "integrity": "sha1-Jk7xEp5YiLxIysQP6RTp9puNGJ0=",
-      "dependencies": {
-        "isarray": "0.0.1"
+    "node_modules/icss-utils": {
+      "version": "5.1.0",
+      "license": "ISC",
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
       }
     },
-    "node_modules/caw": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/caw/-/caw-2.0.1.tgz",
-      "integrity": "sha512-Cg8/ZSBEa8ZVY9HspcGUYaK63d/bN7rqS3CYCzEGUxuYv6UlmcjzDUz2fCFFHyTvUW5Pk0I+3hkA3iXlIj6guA==",
-      "dev": true,
-      "optional": true,
+    "node_modules/identity-obj-proxy": {
+      "version": "3.0.0",
+      "license": "MIT",
       "dependencies": {
-        "get-proxy": "^2.0.0",
-        "isurl": "^1.0.0-alpha5",
-        "tunnel-agent": "^0.6.0",
-        "url-to-options": "^1.0.1"
+        "harmony-reflect": "^1.4.6"
       },
       "engines": {
         "node": ">=4"
       }
     },
-    "node_modules/chalk": {
-      "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-      "dev": true,
-      "dependencies": {
-        "ansi-styles": "^3.2.1",
-        "escape-string-regexp": "^1.0.5",
-        "supports-color": "^5.3.0"
-      },
+    "node_modules/ieee754": {
+      "version": "1.2.1",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/ignore": {
+      "version": "5.3.2",
+      "license": "MIT",
       "engines": {
-        "node": ">=4"
+        "node": ">= 4"
       }
     },
-    "node_modules/chalk/node_modules/supports-color": {
-      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-      "dev": true,
+    "node_modules/image-minimizer-webpack-plugin": {
+      "version": "3.8.3",
+      "license": "MIT",
       "dependencies": {
-        "has-flag": "^3.0.0"
+        "schema-utils": "^4.2.0",
+        "serialize-javascript": "^6.0.1"
       },
       "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/char-regex": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-1.0.2.tgz",
-      "integrity": "sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==",
-      "dev": true,
-      "engines": {
-        "node": ">=10"
+        "node": ">= 12.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^5.1.0"
+      },
+      "peerDependenciesMeta": {
+        "@squoosh/lib": {
+          "optional": true
+        },
+        "imagemin": {
+          "optional": true
+        },
+        "sharp": {
+          "optional": true
+        },
+        "svgo": {
+          "optional": true
+        }
       }
     },
-    "node_modules/chardet": {
-      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz",
-      "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==",
-      "dev": true
-    },
-    "node_modules/charenc": {
-      "version": "0.0.2",
-      "resolved": "https://registry.npmjs.org/charenc/-/charenc-0.0.2.tgz",
-      "integrity": "sha1-wKHS86cJLgN3S/qD8UwPxXkKhmc=",
+    "node_modules/imask": {
+      "version": "7.6.1",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime-corejs3": "^7.24.4"
+      },
       "engines": {
-        "node": "*"
+        "npm": ">=4.0.0"
       }
     },
-    "node_modules/check-types": {
-      "version": "8.0.3",
-      "resolved": "https://registry.npmjs.org/check-types/-/check-types-8.0.3.tgz",
-      "integrity": "sha512-YpeKZngUmG65rLudJ4taU7VLkOCTMhNl/u4ctNC56LQS/zJTyNH0Lrtwm1tfTsbLlwvlfsA2d1c8vCf/Kh2KwQ==",
-      "dev": true
+    "node_modules/immediate": {
+      "version": "3.0.6",
+      "license": "MIT"
     },
-    "node_modules/chokidar": {
-      "version": "2.1.8",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.1.8.tgz",
-      "integrity": "sha512-ZmZUazfOzf0Nve7duiCKD23PFSCs4JPoYyccjUFF3aQkQadqBhfzhjkwBH2mNOG9cTBwhamM37EIsIkZw3nRgg==",
-      "dev": true,
+    "node_modules/immer": {
+      "version": "9.0.21",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
+    "node_modules/immutable": {
+      "version": "4.3.7",
+      "license": "MIT"
+    },
+    "node_modules/import-fresh": {
+      "version": "3.3.0",
+      "license": "MIT",
       "dependencies": {
-        "anymatch": "^2.0.0",
-        "async-each": "^1.0.1",
-        "braces": "^2.3.2",
-        "glob-parent": "^3.1.0",
-        "inherits": "^2.0.3",
-        "is-binary-path": "^1.0.0",
-        "is-glob": "^4.0.0",
-        "normalize-path": "^3.0.0",
-        "path-is-absolute": "^1.0.0",
-        "readdirp": "^2.2.1",
-        "upath": "^1.1.1"
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
       },
-      "optionalDependencies": {
-        "fsevents": "^1.2.7"
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/chrome-trace-event": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz",
-      "integrity": "sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg==",
-      "dev": true,
+    "node_modules/import-fresh/node_modules/resolve-from": {
+      "version": "4.0.0",
+      "license": "MIT",
       "engines": {
-        "node": ">=6.0"
+        "node": ">=4"
       }
     },
-    "node_modules/ci-info": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-2.0.0.tgz",
-      "integrity": "sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==",
-      "dev": true
-    },
-    "node_modules/cjs-module-lexer": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-0.6.0.tgz",
-      "integrity": "sha512-uc2Vix1frTfnuzxxu1Hp4ktSvM3QaI4oXl4ZUqL1wjTu/BGki9TrCWoqLTg/drR1KwAEarXuRFCG2Svr1GxPFw==",
-      "dev": true
-    },
-    "node_modules/class-utils": {
-      "version": "0.3.6",
-      "resolved": "https://registry.npmjs.org/class-utils/-/class-utils-0.3.6.tgz",
-      "integrity": "sha512-qOhPa/Fj7s6TY8H8esGu5QNpMMQxz79h+urzrNYN6mn+9BnxlDGf5QZ+XeCDsxSjPqsSR56XOZOJmpeurnLMeg==",
+    "node_modules/import-lazy": {
+      "version": "4.0.0",
       "dev": true,
-      "dependencies": {
-        "arr-union": "^3.1.0",
-        "define-property": "^0.2.5",
-        "isobject": "^3.0.0",
-        "static-extend": "^0.1.1"
-      },
+      "license": "MIT",
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=8"
       }
     },
-    "node_modules/class-utils/node_modules/define-property": {
-      "version": "0.2.5",
-      "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
-      "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
-      "dev": true,
+    "node_modules/import-local": {
+      "version": "3.2.0",
+      "license": "MIT",
       "dependencies": {
-        "is-descriptor": "^0.1.0"
+        "pkg-dir": "^4.2.0",
+        "resolve-cwd": "^3.0.0"
+      },
+      "bin": {
+        "import-local-fixture": "fixtures/cli.js"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/classnames": {
-      "version": "2.2.6",
-      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
-      "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
-    },
-    "node_modules/clean-css": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz",
-      "integrity": "sha512-VcMWDN54ZN/DS+g58HYL5/n4Zrqe8vHJpGA8KdgUXFU4fuP/aHNw8eld9SyEIyabIMJX/0RaY/fplOo5hYLSFA==",
-      "dev": true,
+    "node_modules/import-local/node_modules/pkg-dir": {
+      "version": "4.2.0",
+      "license": "MIT",
       "dependencies": {
-        "source-map": "~0.6.0"
+        "find-up": "^4.0.0"
       },
       "engines": {
-        "node": ">= 4.0"
+        "node": ">=8"
       }
     },
-    "node_modules/clean-stack": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
-      "integrity": "sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==",
-      "dev": true,
+    "node_modules/imurmurhash": {
+      "version": "0.1.4",
+      "license": "MIT",
       "engines": {
-        "node": ">=6"
+        "node": ">=0.8.19"
       }
     },
-    "node_modules/clean-webpack-plugin": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/clean-webpack-plugin/-/clean-webpack-plugin-3.0.0.tgz",
-      "integrity": "sha512-MciirUH5r+cYLGCOL5JX/ZLzOZbVr1ot3Fw+KcvbhUb6PM+yycqd9ZhIlcigQ5gl+XhppNmw3bEFuaaMNyLj3A==",
+    "node_modules/indent-string": {
+      "version": "4.0.0",
       "dev": true,
-      "dependencies": {
-        "@types/webpack": "^4.4.31",
-        "del": "^4.1.1"
-      },
+      "license": "MIT",
       "engines": {
-        "node": ">=8.9.0"
+        "node": ">=8"
       }
     },
-    "node_modules/cli-cursor": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz",
-      "integrity": "sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==",
-      "dev": true,
+    "node_modules/inflight": {
+      "version": "1.0.6",
+      "license": "ISC",
       "dependencies": {
-        "restore-cursor": "^3.1.0"
-      },
-      "engines": {
-        "node": ">=8"
+        "once": "^1.3.0",
+        "wrappy": "1"
       }
     },
-    "node_modules/cli-table3": {
-      "version": "0.5.1",
-      "resolved": "https://registry.npmjs.org/cli-table3/-/cli-table3-0.5.1.tgz",
-      "integrity": "sha512-7Qg2Jrep1S/+Q3EceiZtQcDPWxhAvBw+ERf1162v4sikJrvojMHFqXt8QIVha8UlH9rgU0BeWPytZ9/TzYqlUw==",
-      "dev": true,
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "license": "ISC"
+    },
+    "node_modules/ini": {
+      "version": "1.3.8",
+      "license": "ISC"
+    },
+    "node_modules/inquirer": {
+      "version": "8.2.6",
+      "license": "MIT",
       "dependencies": {
-        "object-assign": "^4.1.0",
-        "string-width": "^2.1.1"
+        "ansi-escapes": "^4.2.1",
+        "chalk": "^4.1.1",
+        "cli-cursor": "^3.1.0",
+        "cli-width": "^3.0.0",
+        "external-editor": "^3.0.3",
+        "figures": "^3.0.0",
+        "lodash": "^4.17.21",
+        "mute-stream": "0.0.8",
+        "ora": "^5.4.1",
+        "run-async": "^2.4.0",
+        "rxjs": "^7.5.5",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0",
+        "through": "^2.3.6",
+        "wrap-ansi": "^6.0.1"
       },
       "engines": {
-        "node": ">=6"
-      },
-      "optionalDependencies": {
-        "colors": "^1.1.2"
+        "node": ">=12.0.0"
       }
     },
-    "node_modules/cli-table3/node_modules/ansi-regex": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
-      "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
-      "dev": true,
+    "node_modules/internal-slot": {
+      "version": "1.0.7",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "hasown": "^2.0.0",
+        "side-channel": "^1.0.4"
+      },
       "engines": {
-        "node": ">=4"
+        "node": ">= 0.4"
       }
     },
-    "node_modules/cli-table3/node_modules/colors": {
+    "node_modules/interpret": {
       "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/colors/-/colors-1.4.0.tgz",
-      "integrity": "sha512-a+UqTh4kgZg/SlGvfbzDHpgRu7AAQOmmqRHJnxhRZICKFUT91brVhNNt58CMWU9PsBbv3PDCZUHbVxuDiH2mtA==",
       "dev": true,
-      "optional": true,
+      "license": "MIT",
       "engines": {
-        "node": ">=0.1.90"
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/intl-messageformat": {
+      "version": "10.5.14",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@formatjs/ecma402-abstract": "2.0.0",
+        "@formatjs/fast-memoize": "2.2.0",
+        "@formatjs/icu-messageformat-parser": "2.7.8",
+        "tslib": "^2.4.0"
       }
     },
-    "node_modules/cli-table3/node_modules/is-fullwidth-code-point": {
+    "node_modules/intl-messageformat/node_modules/@formatjs/ecma402-abstract": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
-      "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
+      "license": "MIT",
+      "dependencies": {
+        "@formatjs/intl-localematcher": "0.5.4",
+        "tslib": "^2.4.0"
       }
     },
-    "node_modules/cli-table3/node_modules/string-width": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
-      "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==",
-      "dev": true,
+    "node_modules/intl-messageformat/node_modules/@formatjs/intl-localematcher": {
+      "version": "0.5.4",
+      "license": "MIT",
       "dependencies": {
-        "is-fullwidth-code-point": "^2.0.0",
-        "strip-ansi": "^4.0.0"
-      },
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/invariant": {
+      "version": "2.2.4",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
+    "node_modules/ipaddr.js": {
+      "version": "1.9.1",
+      "license": "MIT",
       "engines": {
-        "node": ">=4"
+        "node": ">= 0.10"
       }
     },
-    "node_modules/cli-table3/node_modules/strip-ansi": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
-      "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
+    "node_modules/is-arguments": {
+      "version": "1.1.1",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "ansi-regex": "^3.0.0"
+        "call-bind": "^1.0.2",
+        "has-tostringtag": "^1.0.0"
       },
       "engines": {
-        "node": ">=4"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/cli-width": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-3.0.0.tgz",
-      "integrity": "sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==",
-      "dev": true,
+    "node_modules/is-array-buffer": {
+      "version": "3.0.4",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.2.1"
+      },
       "engines": {
-        "node": ">= 10"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/cliui": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
-      "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
-      "dev": true,
+    "node_modules/is-arrayish": {
+      "version": "0.2.1",
+      "license": "MIT"
+    },
+    "node_modules/is-bigint": {
+      "version": "1.0.4",
+      "license": "MIT",
       "dependencies": {
-        "string-width": "^4.2.0",
-        "strip-ansi": "^6.0.0",
-        "wrap-ansi": "^6.2.0"
+        "has-bigints": "^1.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/cliui/node_modules/strip-ansi": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
-      "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
-      "dev": true,
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "license": "MIT",
       "dependencies": {
-        "ansi-regex": "^5.0.0"
+        "binary-extensions": "^2.0.0"
       },
       "engines": {
         "node": ">=8"
       }
     },
-    "node_modules/clone-deep": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz",
-      "integrity": "sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==",
-      "dev": true,
+    "node_modules/is-boolean-object": {
+      "version": "1.1.2",
+      "license": "MIT",
       "dependencies": {
-        "is-plain-object": "^2.0.4",
-        "kind-of": "^6.0.2",
-        "shallow-clone": "^3.0.0"
+        "call-bind": "^1.0.2",
+        "has-tostringtag": "^1.0.0"
       },
       "engines": {
-        "node": ">=6"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/clone-response": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/clone-response/-/clone-response-1.0.2.tgz",
-      "integrity": "sha1-0dyXOSAxTfZ/vrlCI7TuNQI56Ws=",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "mimic-response": "^1.0.0"
+    "node_modules/is-buffer": {
+      "version": "2.0.5",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
       }
     },
-    "node_modules/co": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
-      "integrity": "sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=",
-      "dev": true,
+    "node_modules/is-callable": {
+      "version": "1.2.7",
+      "license": "MIT",
       "engines": {
-        "iojs": ">= 1.0.0",
-        "node": ">= 0.12.0"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/coa": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/coa/-/coa-2.0.2.tgz",
-      "integrity": "sha512-q5/jG+YQnSy4nRTV4F7lPepBJZ8qBNJJDBuJdoejDyLXgmL7IEo+Le2JDZudFTFt7mrCqIRaSjws4ygRCTCAXA==",
-      "dev": true,
+    "node_modules/is-core-module": {
+      "version": "2.15.0",
+      "license": "MIT",
       "dependencies": {
-        "@types/q": "^1.5.1",
-        "chalk": "^2.4.1",
-        "q": "^1.1.2"
+        "hasown": "^2.0.2"
       },
       "engines": {
-        "node": ">= 4.0"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/code-point-at": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
-      "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
-      "dev": true,
+    "node_modules/is-data-view": {
+      "version": "1.0.1",
+      "license": "MIT",
+      "dependencies": {
+        "is-typed-array": "^1.1.13"
+      },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/codecov": {
-      "version": "3.7.1",
-      "resolved": "https://registry.npmjs.org/codecov/-/codecov-3.7.1.tgz",
-      "integrity": "sha512-JHWxyPTkMLLJn9SmKJnwAnvY09kg2Os2+Ux+GG7LwZ9g8gzDDISpIN5wAsH1UBaafA/yGcd3KofMaorE8qd6Lw==",
-      "dev": true,
+    "node_modules/is-date-object": {
+      "version": "1.0.5",
+      "license": "MIT",
       "dependencies": {
-        "argv": "0.0.2",
-        "ignore-walk": "3.0.3",
-        "js-yaml": "3.13.1",
-        "teeny-request": "6.0.1",
-        "urlgrey": "0.4.4"
-      },
-      "bin": {
-        "codecov": "bin/codecov"
+        "has-tostringtag": "^1.0.0"
       },
       "engines": {
-        "node": ">=4.0"
-      }
-    },
-    "node_modules/codecov/node_modules/js-yaml": {
-      "version": "3.13.1",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.13.1.tgz",
-      "integrity": "sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==",
-      "dev": true,
-      "dependencies": {
-        "argparse": "^1.0.7",
-        "esprima": "^4.0.0"
+        "node": ">= 0.4"
       },
-      "bin": {
-        "js-yaml": "bin/js-yaml.js"
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/collect-v8-coverage": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz",
-      "integrity": "sha512-iBPtljfCNcTKNAto0KEtDfZ3qzjJvqE3aTGZsbhjSBlorqpXJlaWWtPO35D+ZImoC3KWejX64o+yPGxhWSTzfg==",
-      "dev": true
-    },
-    "node_modules/collection-visit": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/collection-visit/-/collection-visit-1.0.0.tgz",
-      "integrity": "sha1-S8A3PBZLwykbTTaMgpzxqApZ3KA=",
-      "dev": true,
-      "dependencies": {
-        "map-visit": "^1.0.0",
-        "object-visit": "^1.0.0"
+    "node_modules/is-docker": {
+      "version": "2.2.1",
+      "license": "MIT",
+      "bin": {
+        "is-docker": "cli.js"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/color-convert": {
-      "version": "1.9.3",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
-      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-      "dev": true,
-      "dependencies": {
-        "color-name": "1.1.3"
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
       }
     },
-    "node_modules/color-name": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
-      "dev": true
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
     },
-    "node_modules/colord": {
+    "node_modules/is-generator-fn": {
       "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/colord/-/colord-2.1.0.tgz",
-      "integrity": "sha512-H5sDP9XDk2uP+x/xSGkgB9SEFc1bojdI5DMKU0jmSXQtml2GIe48dj1DcSS0e53QQAHn+JKqUXbGeGX24xWD7w==",
-      "dev": true
-    },
-    "node_modules/colorette": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.2.1.tgz",
-      "integrity": "sha512-puCDz0CzydiSYOrnXpz/PKd69zRrribezjtE9yd4zvytoRc8+RY/KJPvtPFKZS3E3wP6neGyMe0vOTlHO5L3Pw==",
-      "dev": true
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
     },
-    "node_modules/combined-stream": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
-      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
-      "dev": true,
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "license": "MIT",
       "dependencies": {
-        "delayed-stream": "~1.0.0"
+        "is-extglob": "^2.1.1"
       },
       "engines": {
-        "node": ">= 0.8"
+        "node": ">=0.10.0"
       }
     },
-    "node_modules/commander": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
-      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
-      "dev": true,
+    "node_modules/is-interactive": {
+      "version": "1.0.0",
+      "license": "MIT",
       "engines": {
-        "node": ">= 6"
+        "node": ">=8"
       }
     },
-    "node_modules/commondir": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
-      "integrity": "sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=",
-      "dev": true
-    },
-    "node_modules/component-emitter": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz",
-      "integrity": "sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==",
-      "dev": true
-    },
-    "node_modules/compressible": {
-      "version": "2.0.18",
-      "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz",
-      "integrity": "sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==",
-      "dev": true,
+    "node_modules/is-invalid-path": {
+      "version": "0.1.0",
+      "license": "MIT",
       "dependencies": {
-        "mime-db": ">= 1.43.0 < 2"
+        "is-glob": "^2.0.0"
       },
       "engines": {
-        "node": ">= 0.6"
+        "node": ">=0.10.0"
       }
     },
-    "node_modules/compression": {
-      "version": "1.7.4",
-      "resolved": "https://registry.npmjs.org/compression/-/compression-1.7.4.tgz",
-      "integrity": "sha512-jaSIDzP9pZVS4ZfQ+TzvtiWhdpFhE2RDHz8QJkpX9SIpLq88VueF5jJw6t+6CUQcAoA6t+x89MLrWAqpfDE8iQ==",
-      "dev": true,
+    "node_modules/is-invalid-path/node_modules/is-extglob": {
+      "version": "1.0.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-invalid-path/node_modules/is-glob": {
+      "version": "2.0.1",
+      "license": "MIT",
       "dependencies": {
-        "accepts": "~1.3.5",
-        "bytes": "3.0.0",
-        "compressible": "~2.0.16",
-        "debug": "2.6.9",
-        "on-headers": "~1.0.2",
-        "safe-buffer": "5.1.2",
-        "vary": "~1.1.2"
+        "is-extglob": "^1.0.0"
       },
       "engines": {
-        "node": ">= 0.8.0"
+        "node": ">=0.10.0"
       }
     },
-    "node_modules/compression/node_modules/bytes": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
-      "integrity": "sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg=",
+    "node_modules/is-map": {
+      "version": "2.0.3",
       "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": ">= 0.8"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/compression/node_modules/debug": {
-      "version": "2.6.9",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-      "dev": true,
-      "dependencies": {
-        "ms": "2.0.0"
+    "node_modules/is-negative-zero": {
+      "version": "2.0.3",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/concat-map": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
-    },
-    "node_modules/concat-stream": {
-      "version": "1.6.2",
-      "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.6.2.tgz",
-      "integrity": "sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==",
-      "dev": true,
-      "engines": [
-        "node >= 0.8"
-      ],
-      "dependencies": {
-        "buffer-from": "^1.0.0",
-        "inherits": "^2.0.3",
-        "readable-stream": "^2.2.2",
-        "typedarray": "^0.0.6"
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.12.0"
       }
     },
-    "node_modules/config-chain": {
-      "version": "1.1.13",
-      "resolved": "https://registry.npmjs.org/config-chain/-/config-chain-1.1.13.tgz",
-      "integrity": "sha512-qj+f8APARXHrM0hraqXYb2/bOVSV4PvJQlNZ/DVj0QrmNM2q2euizkeuVckQ57J+W0mRH6Hvi+k50M4Jul2VRQ==",
-      "dev": true,
-      "optional": true,
+    "node_modules/is-number-object": {
+      "version": "1.0.7",
+      "license": "MIT",
       "dependencies": {
-        "ini": "^1.3.4",
-        "proto-list": "~1.2.1"
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/confusing-browser-globals": {
-      "version": "1.0.10",
-      "resolved": "https://registry.npmjs.org/confusing-browser-globals/-/confusing-browser-globals-1.0.10.tgz",
-      "integrity": "sha512-gNld/3lySHwuhaVluJUKLePYirM3QNCKzVxqAdhJII9/WXKVX5PURzMVJspS1jTslSqjeuG4KMVTSouit5YPHA==",
-      "dev": true
-    },
-    "node_modules/connect-history-api-fallback": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/connect-history-api-fallback/-/connect-history-api-fallback-1.6.0.tgz",
-      "integrity": "sha512-e54B99q/OUoH64zYYRf3HBP5z24G38h5D3qXu23JGRoigpX5Ss4r9ZnDk3g0Z8uQC2x2lPaJ+UlWBc1ZWBWdLg==",
-      "dev": true,
+    "node_modules/is-path-cwd": {
+      "version": "2.2.0",
+      "license": "MIT",
       "engines": {
-        "node": ">=0.8"
+        "node": ">=6"
       }
     },
-    "node_modules/console-stream": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/console-stream/-/console-stream-0.1.1.tgz",
-      "integrity": "sha1-oJX+B7IEZZVfL6/Si11yvM2UnUQ=",
-      "dev": true,
-      "optional": true
-    },
-    "node_modules/contains-path": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/contains-path/-/contains-path-0.1.0.tgz",
-      "integrity": "sha1-/ozxhP9mcLa67wGp1IYaXL7EEgo=",
-      "dev": true,
+    "node_modules/is-path-in-cwd": {
+      "version": "2.1.0",
+      "license": "MIT",
+      "dependencies": {
+        "is-path-inside": "^2.1.0"
+      },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=6"
       }
     },
-    "node_modules/content-disposition": {
-      "version": "0.5.3",
-      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.3.tgz",
-      "integrity": "sha512-ExO0774ikEObIAEV9kDo50o+79VCUdEB6n6lzKgGwupcVeRlhrj3qGAfwq8G6uBJjkqLrhT0qEYFcWng8z1z0g==",
-      "dev": true,
+    "node_modules/is-path-in-cwd/node_modules/is-path-inside": {
+      "version": "2.1.0",
+      "license": "MIT",
       "dependencies": {
-        "safe-buffer": "5.1.2"
+        "path-is-inside": "^1.0.2"
       },
       "engines": {
-        "node": ">= 0.6"
+        "node": ">=6"
       }
     },
-    "node_modules/content-type": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz",
-      "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==",
-      "dev": true,
+    "node_modules/is-path-inside": {
+      "version": "3.0.3",
+      "license": "MIT",
       "engines": {
-        "node": ">= 0.6"
+        "node": ">=8"
       }
     },
-    "node_modules/convert-source-map": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.7.0.tgz",
-      "integrity": "sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA==",
+    "node_modules/is-plain-obj": {
+      "version": "1.1.0",
       "dev": true,
-      "dependencies": {
-        "safe-buffer": "~5.1.1"
-      }
-    },
-    "node_modules/cookie": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.1.tgz",
-      "integrity": "sha512-ZwrFkGJxUR3EIoXtO+yVE69Eb7KlixbaeAWfBQB9vVsNn/o+Yw69gBWSSDK825hQNdN+wF8zELf3dFNl/kxkUA==",
+      "license": "MIT",
       "engines": {
-        "node": ">= 0.6"
+        "node": ">=0.10.0"
       }
     },
-    "node_modules/cookie-signature": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
-      "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw=",
-      "dev": true
-    },
-    "node_modules/cookiejar": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/cookiejar/-/cookiejar-2.1.2.tgz",
-      "integrity": "sha512-Mw+adcfzPxcPeI+0WlvRrr/3lGVO0bD75SxX6811cxSh1Wbxx7xZBGK1eVtDf6si8rg2lhnUjsVLMFMfbRIuwA==",
-      "dev": true
-    },
-    "node_modules/copy-descriptor": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/copy-descriptor/-/copy-descriptor-0.1.1.tgz",
-      "integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=",
+    "node_modules/is-plain-object": {
+      "version": "5.0.0",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
       }
     },
-    "node_modules/core-js": {
-      "version": "3.8.1",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.8.1.tgz",
-      "integrity": "sha512-9Id2xHY1W7m8hCl8NkhQn5CufmF/WuR30BTRewvCXc1aZd3kMECwNZ69ndLbekKfakw9Rf2Xyc+QR6E7Gg+obg=="
+    "node_modules/is-potential-custom-element-name": {
+      "version": "1.0.1",
+      "license": "MIT"
     },
-    "node_modules/core-js-compat": {
-      "version": "3.15.2",
-      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.15.2.tgz",
-      "integrity": "sha512-Wp+BJVvwopjI+A1EFqm2dwUmWYXrvucmtIB2LgXn/Rb+gWPKYxtmb4GKHGKG/KGF1eK9jfjzT38DITbTOCX/SQ==",
-      "dev": true,
+    "node_modules/is-regex": {
+      "version": "1.1.4",
+      "license": "MIT",
       "dependencies": {
-        "browserslist": "^4.16.6",
-        "semver": "7.0.0"
+        "call-bind": "^1.0.2",
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/core-js-compat/node_modules/semver": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.0.0.tgz",
-      "integrity": "sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==",
-      "dev": true,
-      "bin": {
-        "semver": "bin/semver.js"
+    "node_modules/is-root": {
+      "version": "2.1.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
       }
     },
-    "node_modules/core-js-pure": {
-      "version": "3.6.5",
-      "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.6.5.tgz",
-      "integrity": "sha512-lacdXOimsiD0QyNf9BC/mxivNJ/ybBGJXQFKzRekp1WTHoVUWsUHEn+2T8GJAzzIhyOuXA+gOxCVN3l+5PLPUA==",
-      "dev": true
-    },
-    "node_modules/core-util-is": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
-      "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
-      "dev": true
-    },
-    "node_modules/cosmiconfig": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.0.0.tgz",
-      "integrity": "sha512-pondGvTuVYDk++upghXJabWzL6Kxu6f26ljFw64Swq9v6sQPUL3EUlVDV56diOjpCayKihL6hVe8exIACU4XcA==",
+    "node_modules/is-set": {
+      "version": "2.0.3",
       "dev": true,
-      "dependencies": {
-        "@types/parse-json": "^4.0.0",
-        "import-fresh": "^3.2.1",
-        "parse-json": "^5.0.0",
-        "path-type": "^4.0.0",
-        "yaml": "^1.10.0"
-      },
+      "license": "MIT",
       "engines": {
-        "node": ">=10"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/cross-spawn": {
-      "version": "6.0.5",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
-      "integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==",
-      "dev": true,
+    "node_modules/is-shared-array-buffer": {
+      "version": "1.0.3",
+      "license": "MIT",
       "dependencies": {
-        "nice-try": "^1.0.4",
-        "path-key": "^2.0.1",
-        "semver": "^5.5.0",
-        "shebang-command": "^1.2.0",
-        "which": "^1.2.9"
+        "call-bind": "^1.0.7"
       },
       "engines": {
-        "node": ">=4.8"
-      }
-    },
-    "node_modules/cross-spawn/node_modules/which": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
-      "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
-      "dev": true,
-      "dependencies": {
-        "isexe": "^2.0.0"
+        "node": ">= 0.4"
       },
-      "bin": {
-        "which": "bin/which"
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/crypt": {
-      "version": "0.0.2",
-      "resolved": "https://registry.npmjs.org/crypt/-/crypt-0.0.2.tgz",
-      "integrity": "sha1-iNf/fsDfuG9xPch7u0LQRNPmxBs=",
-      "engines": {
-        "node": "*"
+    "node_modules/is-stream": {
+      "version": "2.0.1",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/css-color-names": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-1.0.1.tgz",
-      "integrity": "sha512-/loXYOch1qU1biStIFsHH8SxTmOseh1IJqFvy8IujXOm1h+QjUdDhkzOrR5HG8K8mlxREj0yfi8ewCHx0eMxzA==",
-      "dev": true,
+    "node_modules/is-string": {
+      "version": "1.0.7",
+      "license": "MIT",
+      "dependencies": {
+        "has-tostringtag": "^1.0.0"
+      },
       "engines": {
-        "node": "*"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/css-declaration-sorter": {
-      "version": "6.0.3",
-      "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.0.3.tgz",
-      "integrity": "sha512-52P95mvW1SMzuRZegvpluT6yEv0FqQusydKQPZsNN5Q7hh8EwQvN8E2nwuJ16BBvNN6LcoIZXu/Bk58DAhrrxw==",
+    "node_modules/is-subset": {
+      "version": "0.1.1",
       "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/is-symbol": {
+      "version": "1.0.4",
+      "license": "MIT",
       "dependencies": {
-        "timsort": "^0.3.0"
+        "has-symbols": "^1.0.2"
       },
       "engines": {
-        "node": ">= 10"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/css-loader": {
-      "version": "5.2.6",
-      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-5.2.6.tgz",
-      "integrity": "sha512-0wyN5vXMQZu6BvjbrPdUJvkCzGEO24HC7IS7nW4llc6BBFC+zwR9CKtYGv63Puzsg10L/o12inMY5/2ByzfD6w==",
-      "dev": true,
+    "node_modules/is-typed-array": {
+      "version": "1.1.13",
+      "license": "MIT",
       "dependencies": {
-        "icss-utils": "^5.1.0",
-        "loader-utils": "^2.0.0",
-        "postcss": "^8.2.15",
-        "postcss-modules-extract-imports": "^3.0.0",
-        "postcss-modules-local-by-default": "^4.0.0",
-        "postcss-modules-scope": "^3.0.0",
-        "postcss-modules-values": "^4.0.0",
-        "postcss-value-parser": "^4.1.0",
-        "schema-utils": "^3.0.0",
-        "semver": "^7.3.5"
+        "which-typed-array": "^1.1.14"
       },
       "engines": {
-        "node": ">= 10.13.0"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/css-loader/node_modules/ajv": {
-      "version": "6.12.6",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-      "dev": true,
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "fast-json-stable-stringify": "^2.0.0",
-        "json-schema-traverse": "^0.4.1",
-        "uri-js": "^4.2.2"
+    "node_modules/is-unicode-supported": {
+      "version": "0.1.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/css-loader/node_modules/schema-utils": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.0.tgz",
-      "integrity": "sha512-tTEaeYkyIhEZ9uWgAjDerWov3T9MgX8dhhy2r0IGeeX4W8ngtGl1++dUve/RUqzuaASSh7shwCDJjEzthxki8w==",
-      "dev": true,
+    "node_modules/is-valid-path": {
+      "version": "0.1.1",
+      "license": "MIT",
       "dependencies": {
-        "@types/json-schema": "^7.0.7",
-        "ajv": "^6.12.5",
-        "ajv-keywords": "^3.5.2"
+        "is-invalid-path": "^0.1.0"
       },
       "engines": {
-        "node": ">= 10.13.0"
+        "node": ">=0.10.0"
       }
     },
-    "node_modules/css-loader/node_modules/semver": {
-      "version": "7.3.5",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
-      "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==",
+    "node_modules/is-weakmap": {
+      "version": "2.0.2",
       "dev": true,
-      "dependencies": {
-        "lru-cache": "^6.0.0"
-      },
-      "bin": {
-        "semver": "bin/semver.js"
-      },
+      "license": "MIT",
       "engines": {
-        "node": ">=10"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/css-mediaquery": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/css-mediaquery/-/css-mediaquery-0.1.2.tgz",
-      "integrity": "sha1-aiw3NEkoYYYxxUvTPO3TAdoYvqA="
-    },
-    "node_modules/css-select": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/css-select/-/css-select-2.1.0.tgz",
-      "integrity": "sha512-Dqk7LQKpwLoH3VovzZnkzegqNSuAziQyNZUcrdDM401iY+R5NkGBXGmtO05/yaXQziALuPogeG0b7UAgjnTJTQ==",
-      "dev": true,
+    "node_modules/is-weakref": {
+      "version": "1.0.2",
+      "license": "MIT",
       "dependencies": {
-        "boolbase": "^1.0.0",
-        "css-what": "^3.2.1",
-        "domutils": "^1.7.0",
-        "nth-check": "^1.0.2"
+        "call-bind": "^1.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/css-select-base-adapter": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz",
-      "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==",
-      "dev": true
-    },
-    "node_modules/css-tree": {
-      "version": "1.0.0-alpha.37",
-      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz",
-      "integrity": "sha512-DMxWJg0rnz7UgxKT0Q1HU/L9BeJI0M6ksor0OgqOnF+aRCDWg/N2641HmVyU9KVIu0OVVWOb2IpC9A+BJRnejg==",
+    "node_modules/is-weakset": {
+      "version": "2.0.3",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "mdn-data": "2.0.4",
-        "source-map": "^0.6.1"
+        "call-bind": "^1.0.7",
+        "get-intrinsic": "^1.2.4"
       },
       "engines": {
-        "node": ">=8.0.0"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/css-what": {
-      "version": "3.4.2",
-      "resolved": "https://registry.npmjs.org/css-what/-/css-what-3.4.2.tgz",
-      "integrity": "sha512-ACUm3L0/jiZTqfzRM3Hi9Q8eZqd6IK37mMWPLz9PJxkLWllYeRf+EHUSHYEtFop2Eqytaq1FizFVh7XfBnXCDQ==",
-      "dev": true,
+    "node_modules/is-wsl": {
+      "version": "2.2.0",
+      "license": "MIT",
+      "dependencies": {
+        "is-docker": "^2.0.0"
+      },
       "engines": {
-        "node": ">= 6"
+        "node": ">=8"
       }
     },
-    "node_modules/css.escape": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
-      "integrity": "sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s=",
-      "dev": true
+    "node_modules/isarray": {
+      "version": "2.0.5",
+      "license": "MIT"
     },
-    "node_modules/cssesc": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
-      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
-      "dev": true,
-      "bin": {
-        "cssesc": "bin/cssesc"
-      },
+    "node_modules/isexe": {
+      "version": "2.0.0",
+      "license": "ISC"
+    },
+    "node_modules/isobject": {
+      "version": "3.0.1",
+      "license": "MIT",
       "engines": {
-        "node": ">=4"
+        "node": ">=0.10.0"
       }
     },
-    "node_modules/cssnano": {
-      "version": "5.0.6",
-      "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-5.0.6.tgz",
-      "integrity": "sha512-NiaLH/7yqGksFGsFNvSRe2IV/qmEBAeDE64dYeD8OBrgp6lE8YoMeQJMtsv5ijo6MPyhuoOvFhI94reahBRDkw==",
-      "dev": true,
+    "node_modules/istanbul-lib-coverage": {
+      "version": "3.2.2",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/istanbul-lib-instrument": {
+      "version": "5.2.1",
+      "license": "BSD-3-Clause",
       "dependencies": {
-        "cosmiconfig": "^7.0.0",
-        "cssnano-preset-default": "^5.1.3",
-        "is-resolvable": "^1.1.0"
+        "@babel/core": "^7.12.3",
+        "@babel/parser": "^7.14.7",
+        "@istanbuljs/schema": "^0.1.2",
+        "istanbul-lib-coverage": "^3.2.0",
+        "semver": "^6.3.0"
       },
       "engines": {
-        "node": "^10 || ^12 || >=14.0"
+        "node": ">=8"
       }
     },
-    "node_modules/cssnano-preset-default": {
-      "version": "5.1.3",
-      "resolved": "https://registry.npmjs.org/cssnano-preset-default/-/cssnano-preset-default-5.1.3.tgz",
-      "integrity": "sha512-qo9tX+t4yAAZ/yagVV3b+QBKeLklQbmgR3wI7mccrDcR+bEk9iHgZN1E7doX68y9ThznLya3RDmR+nc7l6/2WQ==",
-      "dev": true,
+    "node_modules/istanbul-lib-report": {
+      "version": "3.0.1",
+      "license": "BSD-3-Clause",
       "dependencies": {
-        "css-declaration-sorter": "^6.0.3",
-        "cssnano-utils": "^2.0.1",
-        "postcss-calc": "^8.0.0",
-        "postcss-colormin": "^5.2.0",
-        "postcss-convert-values": "^5.0.1",
-        "postcss-discard-comments": "^5.0.1",
-        "postcss-discard-duplicates": "^5.0.1",
-        "postcss-discard-empty": "^5.0.1",
-        "postcss-discard-overridden": "^5.0.1",
-        "postcss-merge-longhand": "^5.0.2",
-        "postcss-merge-rules": "^5.0.2",
-        "postcss-minify-font-values": "^5.0.1",
-        "postcss-minify-gradients": "^5.0.1",
-        "postcss-minify-params": "^5.0.1",
-        "postcss-minify-selectors": "^5.1.0",
-        "postcss-normalize-charset": "^5.0.1",
-        "postcss-normalize-display-values": "^5.0.1",
-        "postcss-normalize-positions": "^5.0.1",
-        "postcss-normalize-repeat-style": "^5.0.1",
-        "postcss-normalize-string": "^5.0.1",
-        "postcss-normalize-timing-functions": "^5.0.1",
-        "postcss-normalize-unicode": "^5.0.1",
-        "postcss-normalize-url": "^5.0.2",
-        "postcss-normalize-whitespace": "^5.0.1",
-        "postcss-ordered-values": "^5.0.2",
-        "postcss-reduce-initial": "^5.0.1",
-        "postcss-reduce-transforms": "^5.0.1",
-        "postcss-svgo": "^5.0.2",
-        "postcss-unique-selectors": "^5.0.1"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
+        "istanbul-lib-coverage": "^3.0.0",
+        "make-dir": "^4.0.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
       }
     },
-    "node_modules/cssnano-utils": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/cssnano-utils/-/cssnano-utils-2.0.1.tgz",
-      "integrity": "sha512-i8vLRZTnEH9ubIyfdZCAdIdgnHAUeQeByEeQ2I7oTilvP9oHO6RScpeq3GsFUVqeB8uZgOQ9pw8utofNn32hhQ==",
-      "dev": true,
+    "node_modules/istanbul-lib-report/node_modules/make-dir": {
+      "version": "4.0.0",
+      "license": "MIT",
+      "dependencies": {
+        "semver": "^7.5.3"
+      },
       "engines": {
-        "node": "^10 || ^12 || >=14.0"
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/csso": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/csso/-/csso-4.2.0.tgz",
-      "integrity": "sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==",
-      "dev": true,
-      "dependencies": {
-        "css-tree": "^1.1.2"
+    "node_modules/istanbul-lib-report/node_modules/semver": {
+      "version": "7.6.3",
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
       },
       "engines": {
-        "node": ">=8.0.0"
+        "node": ">=10"
       }
     },
-    "node_modules/csso/node_modules/css-tree": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
-      "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==",
-      "dev": true,
+    "node_modules/istanbul-lib-source-maps": {
+      "version": "4.0.1",
+      "license": "BSD-3-Clause",
       "dependencies": {
-        "mdn-data": "2.0.14",
+        "debug": "^4.1.1",
+        "istanbul-lib-coverage": "^3.0.0",
         "source-map": "^0.6.1"
       },
       "engines": {
-        "node": ">=8.0.0"
+        "node": ">=10"
       }
     },
-    "node_modules/csso/node_modules/mdn-data": {
-      "version": "2.0.14",
-      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
-      "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==",
-      "dev": true
-    },
-    "node_modules/cssom": {
-      "version": "0.4.4",
-      "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.4.4.tgz",
-      "integrity": "sha512-p3pvU7r1MyyqbTk+WbNJIgJjG2VmTIaB10rI93LzVPrmDJKkzKYMtxxyAvQXR/NS6otuzveI7+7BBq3SjBS2mw==",
-      "dev": true
+    "node_modules/istanbul-lib-source-maps/node_modules/source-map": {
+      "version": "0.6.1",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
     },
-    "node_modules/cssstyle": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-2.3.0.tgz",
-      "integrity": "sha512-AZL67abkUzIuvcHqk7c09cezpGNcxUxU4Ioi/05xHk4DQeTkWmGYftIE6ctU6AEt+Gn4n1lDStOtj7FKycP71A==",
-      "dev": true,
+    "node_modules/istanbul-reports": {
+      "version": "3.1.7",
+      "license": "BSD-3-Clause",
       "dependencies": {
-        "cssom": "~0.3.6"
+        "html-escaper": "^2.0.0",
+        "istanbul-lib-report": "^3.0.0"
       },
       "engines": {
         "node": ">=8"
       }
     },
-    "node_modules/cssstyle/node_modules/cssom": {
-      "version": "0.3.8",
-      "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.3.8.tgz",
-      "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==",
-      "dev": true
-    },
-    "node_modules/csstype": {
-      "version": "2.6.11",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.11.tgz",
-      "integrity": "sha512-l8YyEC9NBkSm783PFTvh0FmJy7s5pFKrDp49ZL7zBGX3fWkO+N4EEyan1qqp8cwPLDcD0OSdyY6hAMoxp34JFw=="
-    },
-    "node_modules/currently-unhandled": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/currently-unhandled/-/currently-unhandled-0.4.1.tgz",
-      "integrity": "sha1-mI3zP+qxke95mmE2nddsF635V+o=",
-      "dev": true,
-      "optional": true,
+    "node_modules/jake": {
+      "version": "10.9.2",
+      "license": "Apache-2.0",
       "dependencies": {
-        "array-find-index": "^1.0.1"
+        "async": "^3.2.3",
+        "chalk": "^4.0.2",
+        "filelist": "^1.0.4",
+        "minimatch": "^3.1.2"
+      },
+      "bin": {
+        "jake": "bin/cli.js"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=10"
       }
     },
-    "node_modules/cwebp-bin": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/cwebp-bin/-/cwebp-bin-5.1.0.tgz",
-      "integrity": "sha512-BsPKStaNr98zfxwejWWLIGELbPERULJoD2v5ijvpeutSAGsegX7gmABgnkRK7MUucCPROXXfaPqkLAwI509JzA==",
-      "dev": true,
-      "optional": true,
+    "node_modules/jest": {
+      "version": "29.7.0",
+      "license": "MIT",
+      "peer": true,
       "dependencies": {
-        "bin-build": "^3.0.0",
-        "bin-wrapper": "^4.0.1",
-        "logalot": "^2.1.0"
+        "@jest/core": "^29.7.0",
+        "@jest/types": "^29.6.3",
+        "import-local": "^3.0.2",
+        "jest-cli": "^29.7.0"
       },
       "bin": {
-        "cwebp": "cli.js"
+        "jest": "bin/jest.js"
       },
       "engines": {
-        "node": ">=6"
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      },
+      "peerDependencies": {
+        "node-notifier": "^8.0.1 || ^9.0.0 || ^10.0.0"
+      },
+      "peerDependenciesMeta": {
+        "node-notifier": {
+          "optional": true
+        }
       }
     },
-    "node_modules/cycle": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/cycle/-/cycle-1.0.3.tgz",
-      "integrity": "sha1-IegLK+hYD5i0aPN5QwZisEbDStI=",
+    "node_modules/jest-canvas-mock": {
+      "version": "2.5.2",
       "dev": true,
-      "engines": {
-        "node": ">=0.4.0"
+      "license": "MIT",
+      "dependencies": {
+        "cssfontparser": "^1.2.1",
+        "moo-color": "^1.0.2"
       }
     },
-    "node_modules/damerau-levenshtein": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.7.tgz",
-      "integrity": "sha512-VvdQIPGdWP0SqFXghj79Wf/5LArmreyMsGLa6FG6iC4t3j7j5s71TrwWmT/4akbDQIqjfACkLZmjXhA7g2oUZw==",
-      "dev": true
-    },
-    "node_modules/dashdash": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
-      "integrity": "sha1-hTz6D3y+L+1d4gMmuN1YEDX24vA=",
-      "dev": true,
+    "node_modules/jest-changed-files": {
+      "version": "29.7.0",
+      "license": "MIT",
       "dependencies": {
-        "assert-plus": "^1.0.0"
+        "execa": "^5.0.0",
+        "jest-util": "^29.7.0",
+        "p-limit": "^3.1.0"
       },
       "engines": {
-        "node": ">=0.10"
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
-    "node_modules/data-urls": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-1.1.0.tgz",
-      "integrity": "sha512-YTWYI9se1P55u58gL5GkQHW4P6VJBJ5iBT+B5a7i2Tjadhv52paJG0qHX4A0OR6/t52odI64KP2YvFpkDOi3eQ==",
-      "dev": true,
+    "node_modules/jest-circus": {
+      "version": "29.7.0",
+      "license": "MIT",
       "dependencies": {
-        "abab": "^2.0.0",
-        "whatwg-mimetype": "^2.2.0",
-        "whatwg-url": "^7.0.0"
+        "@jest/environment": "^29.7.0",
+        "@jest/expect": "^29.7.0",
+        "@jest/test-result": "^29.7.0",
+        "@jest/types": "^29.6.3",
+        "@types/node": "*",
+        "chalk": "^4.0.0",
+        "co": "^4.6.0",
+        "dedent": "^1.0.0",
+        "is-generator-fn": "^2.0.0",
+        "jest-each": "^29.7.0",
+        "jest-matcher-utils": "^29.7.0",
+        "jest-message-util": "^29.7.0",
+        "jest-runtime": "^29.7.0",
+        "jest-snapshot": "^29.7.0",
+        "jest-util": "^29.7.0",
+        "p-limit": "^3.1.0",
+        "pretty-format": "^29.7.0",
+        "pure-rand": "^6.0.0",
+        "slash": "^3.0.0",
+        "stack-utils": "^2.0.3"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
-    "node_modules/debug": {
-      "version": "4.3.2",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz",
-      "integrity": "sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==",
-      "dev": true,
+    "node_modules/jest-circus/node_modules/ansi-styles": {
+      "version": "5.2.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/jest-circus/node_modules/pretty-format": {
+      "version": "29.7.0",
+      "license": "MIT",
       "dependencies": {
-        "ms": "2.1.2"
+        "@jest/schemas": "^29.6.3",
+        "ansi-styles": "^5.0.0",
+        "react-is": "^18.0.0"
       },
       "engines": {
-        "node": ">=6.0"
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
-    "node_modules/debug/node_modules/ms": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-      "dev": true
+    "node_modules/jest-circus/node_modules/react-is": {
+      "version": "18.3.1",
+      "license": "MIT"
     },
-    "node_modules/decamelize": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
-      "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=",
-      "dev": true,
+    "node_modules/jest-circus/node_modules/slash": {
+      "version": "3.0.0",
+      "license": "MIT",
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=8"
       }
     },
-    "node_modules/decimal.js": {
-      "version": "10.3.1",
-      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.3.1.tgz",
-      "integrity": "sha512-V0pfhfr8suzyPGOx3nmq4aHqabehUZn6Ch9kyFpV79TGDTWFmHqUqXdabR7QHqxzrYolF4+tVmJhUG4OURg5dQ==",
-      "dev": true
-    },
-    "node_modules/decode-uri-component": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
-      "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=",
-      "dev": true,
+    "node_modules/jest-cli": {
+      "version": "29.7.0",
+      "license": "MIT",
+      "dependencies": {
+        "@jest/core": "^29.7.0",
+        "@jest/test-result": "^29.7.0",
+        "@jest/types": "^29.6.3",
+        "chalk": "^4.0.0",
+        "create-jest": "^29.7.0",
+        "exit": "^0.1.2",
+        "import-local": "^3.0.2",
+        "jest-config": "^29.7.0",
+        "jest-util": "^29.7.0",
+        "jest-validate": "^29.7.0",
+        "yargs": "^17.3.1"
+      },
+      "bin": {
+        "jest": "bin/jest.js"
+      },
       "engines": {
-        "node": ">=0.10"
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      },
+      "peerDependencies": {
+        "node-notifier": "^8.0.1 || ^9.0.0 || ^10.0.0"
+      },
+      "peerDependenciesMeta": {
+        "node-notifier": {
+          "optional": true
+        }
       }
     },
-    "node_modules/decompress": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/decompress/-/decompress-4.2.1.tgz",
-      "integrity": "sha512-e48kc2IjU+2Zw8cTb6VZcJQ3lgVbS4uuB1TfCHbiZIP/haNXm+SVyhu+87jts5/3ROpd82GSVCoNs/z8l4ZOaQ==",
-      "dev": true,
-      "optional": true,
+    "node_modules/jest-config": {
+      "version": "29.7.0",
+      "license": "MIT",
       "dependencies": {
-        "decompress-tar": "^4.0.0",
-        "decompress-tarbz2": "^4.0.0",
-        "decompress-targz": "^4.0.0",
-        "decompress-unzip": "^4.0.1",
-        "graceful-fs": "^4.1.10",
-        "make-dir": "^1.0.0",
-        "pify": "^2.3.0",
-        "strip-dirs": "^2.0.0"
+        "@babel/core": "^7.11.6",
+        "@jest/test-sequencer": "^29.7.0",
+        "@jest/types": "^29.6.3",
+        "babel-jest": "^29.7.0",
+        "chalk": "^4.0.0",
+        "ci-info": "^3.2.0",
+        "deepmerge": "^4.2.2",
+        "glob": "^7.1.3",
+        "graceful-fs": "^4.2.9",
+        "jest-circus": "^29.7.0",
+        "jest-environment-node": "^29.7.0",
+        "jest-get-type": "^29.6.3",
+        "jest-regex-util": "^29.6.3",
+        "jest-resolve": "^29.7.0",
+        "jest-runner": "^29.7.0",
+        "jest-util": "^29.7.0",
+        "jest-validate": "^29.7.0",
+        "micromatch": "^4.0.4",
+        "parse-json": "^5.2.0",
+        "pretty-format": "^29.7.0",
+        "slash": "^3.0.0",
+        "strip-json-comments": "^3.1.1"
       },
       "engines": {
-        "node": ">=4"
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      },
+      "peerDependencies": {
+        "@types/node": "*",
+        "ts-node": ">=9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "ts-node": {
+          "optional": true
+        }
       }
     },
-    "node_modules/decompress-response": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-3.3.0.tgz",
-      "integrity": "sha1-gKTdMjdIOEv6JICDYirt7Jgq3/M=",
-      "dev": true,
-      "optional": true,
+    "node_modules/jest-config/node_modules/ansi-styles": {
+      "version": "5.2.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/jest-config/node_modules/babel-jest": {
+      "version": "29.7.0",
+      "license": "MIT",
       "dependencies": {
-        "mimic-response": "^1.0.0"
+        "@jest/transform": "^29.7.0",
+        "@types/babel__core": "^7.1.14",
+        "babel-plugin-istanbul": "^6.1.1",
+        "babel-preset-jest": "^29.6.3",
+        "chalk": "^4.0.0",
+        "graceful-fs": "^4.2.9",
+        "slash": "^3.0.0"
       },
       "engines": {
-        "node": ">=4"
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.8.0"
       }
     },
-    "node_modules/decompress-tar": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/decompress-tar/-/decompress-tar-4.1.1.tgz",
-      "integrity": "sha512-JdJMaCrGpB5fESVyxwpCx4Jdj2AagLmv3y58Qy4GE6HMVjWz1FeVQk1Ct4Kye7PftcdOo/7U7UKzYBJgqnGeUQ==",
-      "dev": true,
-      "optional": true,
+    "node_modules/jest-config/node_modules/pretty-format": {
+      "version": "29.7.0",
+      "license": "MIT",
       "dependencies": {
-        "file-type": "^5.2.0",
-        "is-stream": "^1.1.0",
-        "tar-stream": "^1.5.2"
+        "@jest/schemas": "^29.6.3",
+        "ansi-styles": "^5.0.0",
+        "react-is": "^18.0.0"
       },
       "engines": {
-        "node": ">=4"
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
-    "node_modules/decompress-tar/node_modules/file-type": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/file-type/-/file-type-5.2.0.tgz",
-      "integrity": "sha1-LdvqfHP/42No365J3DOMBYwritY=",
-      "dev": true,
-      "optional": true,
+    "node_modules/jest-config/node_modules/react-is": {
+      "version": "18.3.1",
+      "license": "MIT"
+    },
+    "node_modules/jest-config/node_modules/slash": {
+      "version": "3.0.0",
+      "license": "MIT",
       "engines": {
-        "node": ">=4"
+        "node": ">=8"
       }
     },
-    "node_modules/decompress-tarbz2": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/decompress-tarbz2/-/decompress-tarbz2-4.1.1.tgz",
-      "integrity": "sha512-s88xLzf1r81ICXLAVQVzaN6ZmX4A6U4z2nMbOwobxkLoIIfjVMBg7TeguTUXkKeXni795B6y5rnvDw7rxhAq9A==",
-      "dev": true,
-      "optional": true,
+    "node_modules/jest-diff": {
+      "version": "29.7.0",
+      "license": "MIT",
       "dependencies": {
-        "decompress-tar": "^4.1.0",
-        "file-type": "^6.1.0",
-        "is-stream": "^1.1.0",
-        "seek-bzip": "^1.0.5",
-        "unbzip2-stream": "^1.0.9"
+        "chalk": "^4.0.0",
+        "diff-sequences": "^29.6.3",
+        "jest-get-type": "^29.6.3",
+        "pretty-format": "^29.7.0"
       },
       "engines": {
-        "node": ">=4"
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
-    "node_modules/decompress-tarbz2/node_modules/file-type": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/file-type/-/file-type-6.2.0.tgz",
-      "integrity": "sha512-YPcTBDV+2Tm0VqjybVd32MHdlEGAtuxS3VAYsumFokDSMG+ROT5wawGlnHDoz7bfMcMDt9hxuXvXwoKUx2fkOg==",
-      "dev": true,
-      "optional": true,
+    "node_modules/jest-diff/node_modules/ansi-styles": {
+      "version": "5.2.0",
+      "license": "MIT",
       "engines": {
-        "node": ">=4"
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/decompress-targz": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/decompress-targz/-/decompress-targz-4.1.1.tgz",
-      "integrity": "sha512-4z81Znfr6chWnRDNfFNqLwPvm4db3WuZkqV+UgXQzSngG3CEKdBkw5jrv3axjjL96glyiiKjsxJG3X6WBZwX3w==",
-      "dev": true,
-      "optional": true,
+    "node_modules/jest-diff/node_modules/pretty-format": {
+      "version": "29.7.0",
+      "license": "MIT",
       "dependencies": {
-        "decompress-tar": "^4.1.1",
-        "file-type": "^5.2.0",
-        "is-stream": "^1.1.0"
+        "@jest/schemas": "^29.6.3",
+        "ansi-styles": "^5.0.0",
+        "react-is": "^18.0.0"
       },
       "engines": {
-        "node": ">=4"
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
-    "node_modules/decompress-targz/node_modules/file-type": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/file-type/-/file-type-5.2.0.tgz",
-      "integrity": "sha1-LdvqfHP/42No365J3DOMBYwritY=",
-      "dev": true,
-      "optional": true,
+    "node_modules/jest-diff/node_modules/react-is": {
+      "version": "18.3.1",
+      "license": "MIT"
+    },
+    "node_modules/jest-docblock": {
+      "version": "29.7.0",
+      "license": "MIT",
+      "dependencies": {
+        "detect-newline": "^3.0.0"
+      },
       "engines": {
-        "node": ">=4"
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
-    "node_modules/decompress-unzip": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/decompress-unzip/-/decompress-unzip-4.0.1.tgz",
-      "integrity": "sha1-3qrM39FK6vhVePczroIQ+bSEj2k=",
-      "dev": true,
-      "optional": true,
+    "node_modules/jest-each": {
+      "version": "29.7.0",
+      "license": "MIT",
       "dependencies": {
-        "file-type": "^3.8.0",
-        "get-stream": "^2.2.0",
-        "pify": "^2.3.0",
-        "yauzl": "^2.4.2"
+        "@jest/types": "^29.6.3",
+        "chalk": "^4.0.0",
+        "jest-get-type": "^29.6.3",
+        "jest-util": "^29.7.0",
+        "pretty-format": "^29.7.0"
       },
       "engines": {
-        "node": ">=4"
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
-    "node_modules/decompress-unzip/node_modules/file-type": {
-      "version": "3.9.0",
-      "resolved": "https://registry.npmjs.org/file-type/-/file-type-3.9.0.tgz",
-      "integrity": "sha1-JXoHg4TR24CHvESdEH1SpSZyuek=",
-      "dev": true,
-      "optional": true,
+    "node_modules/jest-each/node_modules/ansi-styles": {
+      "version": "5.2.0",
+      "license": "MIT",
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/decompress-unzip/node_modules/get-stream": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-2.3.1.tgz",
-      "integrity": "sha1-Xzj5PzRgCWZu4BUKBUFn+Rvdld4=",
-      "dev": true,
-      "optional": true,
+    "node_modules/jest-each/node_modules/pretty-format": {
+      "version": "29.7.0",
+      "license": "MIT",
       "dependencies": {
-        "object-assign": "^4.0.1",
-        "pinkie-promise": "^2.0.0"
+        "@jest/schemas": "^29.6.3",
+        "ansi-styles": "^5.0.0",
+        "react-is": "^18.0.0"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
-    "node_modules/decompress-unzip/node_modules/pify": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
-      "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
-      "dev": true,
-      "optional": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
+    "node_modules/jest-each/node_modules/react-is": {
+      "version": "18.3.1",
+      "license": "MIT"
     },
-    "node_modules/decompress/node_modules/make-dir": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-1.3.0.tgz",
-      "integrity": "sha512-2w31R7SJtieJJnQtGc7RVL2StM2vGYVfqUOvUDxH6bC6aJTxPxTF0GnIgCyu7tjockiUWAYQRbxa7vKn34s5sQ==",
-      "dev": true,
-      "optional": true,
+    "node_modules/jest-environment-jsdom": {
+      "version": "29.7.0",
+      "license": "MIT",
       "dependencies": {
-        "pify": "^3.0.0"
+        "@jest/environment": "^29.7.0",
+        "@jest/fake-timers": "^29.7.0",
+        "@jest/types": "^29.6.3",
+        "@types/jsdom": "^20.0.0",
+        "@types/node": "*",
+        "jest-mock": "^29.7.0",
+        "jest-util": "^29.7.0",
+        "jsdom": "^20.0.0"
       },
       "engines": {
-        "node": ">=4"
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      },
+      "peerDependencies": {
+        "canvas": "^2.5.0"
+      },
+      "peerDependenciesMeta": {
+        "canvas": {
+          "optional": true
+        }
       }
     },
-    "node_modules/decompress/node_modules/make-dir/node_modules/pify": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
-      "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
-      "dev": true,
-      "optional": true,
+    "node_modules/jest-environment-node": {
+      "version": "29.7.0",
+      "license": "MIT",
+      "dependencies": {
+        "@jest/environment": "^29.7.0",
+        "@jest/fake-timers": "^29.7.0",
+        "@jest/types": "^29.6.3",
+        "@types/node": "*",
+        "jest-mock": "^29.7.0",
+        "jest-util": "^29.7.0"
+      },
       "engines": {
-        "node": ">=4"
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
-    "node_modules/decompress/node_modules/pify": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
-      "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
+    "node_modules/jest-expect-message": {
+      "version": "1.1.3",
       "dev": true,
-      "optional": true,
+      "license": "MIT"
+    },
+    "node_modules/jest-get-type": {
+      "version": "29.6.3",
+      "license": "MIT",
       "engines": {
-        "node": ">=0.10.0"
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
-    "node_modules/deep-equal": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.1.tgz",
-      "integrity": "sha512-yd9c5AdiqVcR+JjcwUQb9DkhJc8ngNr0MahEBGvDiJw8puWab2yZlh+nkasOnZP+EGTAP6rRp2JzJhJZzvNF8g==",
-      "dev": true,
+    "node_modules/jest-haste-map": {
+      "version": "29.7.0",
+      "license": "MIT",
       "dependencies": {
-        "is-arguments": "^1.0.4",
-        "is-date-object": "^1.0.1",
-        "is-regex": "^1.0.4",
-        "object-is": "^1.0.1",
-        "object-keys": "^1.1.1",
-        "regexp.prototype.flags": "^1.2.0"
-      }
-    },
-    "node_modules/deep-is": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz",
-      "integrity": "sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=",
-      "dev": true
-    },
-    "node_modules/deepmerge": {
-      "version": "4.2.2",
-      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
-      "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==",
-      "dev": true,
+        "@jest/types": "^29.6.3",
+        "@types/graceful-fs": "^4.1.3",
+        "@types/node": "*",
+        "anymatch": "^3.0.3",
+        "fb-watchman": "^2.0.0",
+        "graceful-fs": "^4.2.9",
+        "jest-regex-util": "^29.6.3",
+        "jest-util": "^29.7.0",
+        "jest-worker": "^29.7.0",
+        "micromatch": "^4.0.4",
+        "walker": "^1.0.8"
+      },
       "engines": {
-        "node": ">=0.10.0"
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "^2.3.2"
       }
     },
-    "node_modules/default-gateway": {
-      "version": "6.0.3",
-      "resolved": "https://registry.npmjs.org/default-gateway/-/default-gateway-6.0.3.tgz",
-      "integrity": "sha512-fwSOJsbbNzZ/CUFpqFBqYfYNLj1NbMPm8MMCIzHjC83iSJRBEGmDUxU+WP661BaBQImeC2yHwXtz+P/O9o+XEg==",
-      "dev": true,
+    "node_modules/jest-leak-detector": {
+      "version": "29.7.0",
+      "license": "MIT",
       "dependencies": {
-        "execa": "^5.0.0"
+        "jest-get-type": "^29.6.3",
+        "pretty-format": "^29.7.0"
       },
       "engines": {
-        "node": ">= 10"
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
-    "node_modules/default-gateway/node_modules/cross-spawn": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-      "dev": true,
+    "node_modules/jest-leak-detector/node_modules/ansi-styles": {
+      "version": "5.2.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/jest-leak-detector/node_modules/pretty-format": {
+      "version": "29.7.0",
+      "license": "MIT",
       "dependencies": {
-        "path-key": "^3.1.0",
-        "shebang-command": "^2.0.0",
-        "which": "^2.0.1"
+        "@jest/schemas": "^29.6.3",
+        "ansi-styles": "^5.0.0",
+        "react-is": "^18.0.0"
       },
       "engines": {
-        "node": ">= 8"
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
-    "node_modules/default-gateway/node_modules/execa": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
-      "integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==",
-      "dev": true,
+    "node_modules/jest-leak-detector/node_modules/react-is": {
+      "version": "18.3.1",
+      "license": "MIT"
+    },
+    "node_modules/jest-matcher-utils": {
+      "version": "29.7.0",
+      "license": "MIT",
       "dependencies": {
-        "cross-spawn": "^7.0.3",
-        "get-stream": "^6.0.0",
-        "human-signals": "^2.1.0",
-        "is-stream": "^2.0.0",
-        "merge-stream": "^2.0.0",
-        "npm-run-path": "^4.0.1",
-        "onetime": "^5.1.2",
-        "signal-exit": "^3.0.3",
-        "strip-final-newline": "^2.0.0"
+        "chalk": "^4.0.0",
+        "jest-diff": "^29.7.0",
+        "jest-get-type": "^29.6.3",
+        "pretty-format": "^29.7.0"
       },
       "engines": {
-        "node": ">=10"
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
-    "node_modules/default-gateway/node_modules/get-stream": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
-      "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
-      "dev": true,
+    "node_modules/jest-matcher-utils/node_modules/ansi-styles": {
+      "version": "5.2.0",
+      "license": "MIT",
       "engines": {
         "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/default-gateway/node_modules/is-stream": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.0.tgz",
-      "integrity": "sha512-XCoy+WlUr7d1+Z8GgSuXmpuUFC9fOhRXglJMx+dwLKTkL44Cjd4W1Z5P+BQZpr+cR93aGP4S/s7Ftw6Nd/kiEw==",
-      "dev": true,
+    "node_modules/jest-matcher-utils/node_modules/pretty-format": {
+      "version": "29.7.0",
+      "license": "MIT",
+      "dependencies": {
+        "@jest/schemas": "^29.6.3",
+        "ansi-styles": "^5.0.0",
+        "react-is": "^18.0.0"
+      },
       "engines": {
-        "node": ">=8"
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
-    "node_modules/default-gateway/node_modules/npm-run-path": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
-      "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
-      "dev": true,
+    "node_modules/jest-matcher-utils/node_modules/react-is": {
+      "version": "18.3.1",
+      "license": "MIT"
+    },
+    "node_modules/jest-message-util": {
+      "version": "29.7.0",
+      "license": "MIT",
       "dependencies": {
-        "path-key": "^3.0.0"
+        "@babel/code-frame": "^7.12.13",
+        "@jest/types": "^29.6.3",
+        "@types/stack-utils": "^2.0.0",
+        "chalk": "^4.0.0",
+        "graceful-fs": "^4.2.9",
+        "micromatch": "^4.0.4",
+        "pretty-format": "^29.7.0",
+        "slash": "^3.0.0",
+        "stack-utils": "^2.0.3"
       },
       "engines": {
-        "node": ">=8"
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
-    "node_modules/default-gateway/node_modules/path-key": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-      "dev": true,
+    "node_modules/jest-message-util/node_modules/ansi-styles": {
+      "version": "5.2.0",
+      "license": "MIT",
       "engines": {
-        "node": ">=8"
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/default-gateway/node_modules/shebang-command": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-      "dev": true,
+    "node_modules/jest-message-util/node_modules/pretty-format": {
+      "version": "29.7.0",
+      "license": "MIT",
       "dependencies": {
-        "shebang-regex": "^3.0.0"
+        "@jest/schemas": "^29.6.3",
+        "ansi-styles": "^5.0.0",
+        "react-is": "^18.0.0"
       },
       "engines": {
-        "node": ">=8"
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
-    "node_modules/default-gateway/node_modules/shebang-regex": {
+    "node_modules/jest-message-util/node_modules/react-is": {
+      "version": "18.3.1",
+      "license": "MIT"
+    },
+    "node_modules/jest-message-util/node_modules/slash": {
       "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-      "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=8"
       }
     },
-    "node_modules/default-gateway/node_modules/which": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-      "dev": true,
+    "node_modules/jest-mock": {
+      "version": "29.7.0",
+      "license": "MIT",
       "dependencies": {
-        "isexe": "^2.0.0"
-      },
-      "bin": {
-        "node-which": "bin/node-which"
+        "@jest/types": "^29.6.3",
+        "@types/node": "*",
+        "jest-util": "^29.7.0"
       },
       "engines": {
-        "node": ">= 8"
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
-    "node_modules/define-properties": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz",
-      "integrity": "sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==",
-      "dependencies": {
-        "object-keys": "^1.0.12"
+    "node_modules/jest-pnp-resolver": {
+      "version": "1.2.3",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      },
+      "peerDependencies": {
+        "jest-resolve": "*"
       },
+      "peerDependenciesMeta": {
+        "jest-resolve": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/jest-regex-util": {
+      "version": "29.6.3",
+      "license": "MIT",
       "engines": {
-        "node": ">= 0.4"
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
-    "node_modules/define-property": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/define-property/-/define-property-2.0.2.tgz",
-      "integrity": "sha512-jwK2UV4cnPpbcG7+VRARKTZPUWowwXA8bzH5NP6ud0oeAxyYPuGZUAC7hMugpCdz4BeSZl2Dl9k66CHJ/46ZYQ==",
-      "dev": true,
+    "node_modules/jest-resolve": {
+      "version": "29.7.0",
+      "license": "MIT",
       "dependencies": {
-        "is-descriptor": "^1.0.2",
-        "isobject": "^3.0.1"
+        "chalk": "^4.0.0",
+        "graceful-fs": "^4.2.9",
+        "jest-haste-map": "^29.7.0",
+        "jest-pnp-resolver": "^1.2.2",
+        "jest-util": "^29.7.0",
+        "jest-validate": "^29.7.0",
+        "resolve": "^1.20.0",
+        "resolve.exports": "^2.0.0",
+        "slash": "^3.0.0"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
-    "node_modules/define-property/node_modules/is-accessor-descriptor": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
-      "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==",
-      "dev": true,
+    "node_modules/jest-resolve-dependencies": {
+      "version": "29.7.0",
+      "license": "MIT",
       "dependencies": {
-        "kind-of": "^6.0.0"
+        "jest-regex-util": "^29.6.3",
+        "jest-snapshot": "^29.7.0"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
-    "node_modules/define-property/node_modules/is-data-descriptor": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz",
-      "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==",
-      "dev": true,
-      "dependencies": {
-        "kind-of": "^6.0.0"
-      },
+    "node_modules/jest-resolve/node_modules/slash": {
+      "version": "3.0.0",
+      "license": "MIT",
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=8"
       }
     },
-    "node_modules/define-property/node_modules/is-descriptor": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz",
-      "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==",
-      "dev": true,
-      "dependencies": {
-        "is-accessor-descriptor": "^1.0.0",
-        "is-data-descriptor": "^1.0.0",
-        "kind-of": "^6.0.2"
+    "node_modules/jest-runner": {
+      "version": "29.7.0",
+      "license": "MIT",
+      "dependencies": {
+        "@jest/console": "^29.7.0",
+        "@jest/environment": "^29.7.0",
+        "@jest/test-result": "^29.7.0",
+        "@jest/transform": "^29.7.0",
+        "@jest/types": "^29.6.3",
+        "@types/node": "*",
+        "chalk": "^4.0.0",
+        "emittery": "^0.13.1",
+        "graceful-fs": "^4.2.9",
+        "jest-docblock": "^29.7.0",
+        "jest-environment-node": "^29.7.0",
+        "jest-haste-map": "^29.7.0",
+        "jest-leak-detector": "^29.7.0",
+        "jest-message-util": "^29.7.0",
+        "jest-resolve": "^29.7.0",
+        "jest-runtime": "^29.7.0",
+        "jest-util": "^29.7.0",
+        "jest-watcher": "^29.7.0",
+        "jest-worker": "^29.7.0",
+        "p-limit": "^3.1.0",
+        "source-map-support": "0.5.13"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
-    "node_modules/del": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/del/-/del-4.1.1.tgz",
-      "integrity": "sha512-QwGuEUouP2kVwQenAsOof5Fv8K9t3D8Ca8NxcXKrIpEHjTXK5J2nXLdP+ALI1cgv8wj7KuwBhTwBkOZSJKM5XQ==",
-      "dev": true,
-      "dependencies": {
-        "@types/glob": "^7.1.1",
-        "globby": "^6.1.0",
-        "is-path-cwd": "^2.0.0",
-        "is-path-in-cwd": "^2.0.0",
-        "p-map": "^2.0.0",
-        "pify": "^4.0.1",
-        "rimraf": "^2.6.3"
+    "node_modules/jest-runtime": {
+      "version": "29.7.0",
+      "license": "MIT",
+      "dependencies": {
+        "@jest/environment": "^29.7.0",
+        "@jest/fake-timers": "^29.7.0",
+        "@jest/globals": "^29.7.0",
+        "@jest/source-map": "^29.6.3",
+        "@jest/test-result": "^29.7.0",
+        "@jest/transform": "^29.7.0",
+        "@jest/types": "^29.6.3",
+        "@types/node": "*",
+        "chalk": "^4.0.0",
+        "cjs-module-lexer": "^1.0.0",
+        "collect-v8-coverage": "^1.0.0",
+        "glob": "^7.1.3",
+        "graceful-fs": "^4.2.9",
+        "jest-haste-map": "^29.7.0",
+        "jest-message-util": "^29.7.0",
+        "jest-mock": "^29.7.0",
+        "jest-regex-util": "^29.6.3",
+        "jest-resolve": "^29.7.0",
+        "jest-snapshot": "^29.7.0",
+        "jest-util": "^29.7.0",
+        "slash": "^3.0.0",
+        "strip-bom": "^4.0.0"
       },
       "engines": {
-        "node": ">=6"
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
-    "node_modules/delayed-stream": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
-      "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=",
-      "dev": true,
+    "node_modules/jest-runtime/node_modules/slash": {
+      "version": "3.0.0",
+      "license": "MIT",
       "engines": {
-        "node": ">=0.4.0"
+        "node": ">=8"
       }
     },
-    "node_modules/delegates": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
-      "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=",
-      "dev": true
-    },
-    "node_modules/depd": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
-      "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=",
-      "dev": true,
+    "node_modules/jest-snapshot": {
+      "version": "29.7.0",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.11.6",
+        "@babel/generator": "^7.7.2",
+        "@babel/plugin-syntax-jsx": "^7.7.2",
+        "@babel/plugin-syntax-typescript": "^7.7.2",
+        "@babel/types": "^7.3.3",
+        "@jest/expect-utils": "^29.7.0",
+        "@jest/transform": "^29.7.0",
+        "@jest/types": "^29.6.3",
+        "babel-preset-current-node-syntax": "^1.0.0",
+        "chalk": "^4.0.0",
+        "expect": "^29.7.0",
+        "graceful-fs": "^4.2.9",
+        "jest-diff": "^29.7.0",
+        "jest-get-type": "^29.6.3",
+        "jest-matcher-utils": "^29.7.0",
+        "jest-message-util": "^29.7.0",
+        "jest-util": "^29.7.0",
+        "natural-compare": "^1.4.0",
+        "pretty-format": "^29.7.0",
+        "semver": "^7.5.3"
+      },
       "engines": {
-        "node": ">= 0.6"
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
-    "node_modules/dequal": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.2.tgz",
-      "integrity": "sha512-q9K8BlJVxK7hQYqa6XISGmBZbtQQWVXSrRrWreHC94rMt1QL/Impruc+7p2CYSYuVIUr+YCt6hjrs1kkdJRTug==",
+    "node_modules/jest-snapshot/node_modules/ansi-styles": {
+      "version": "5.2.0",
+      "license": "MIT",
       "engines": {
-        "node": ">=6"
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/destroy": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
-      "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=",
-      "dev": true
-    },
-    "node_modules/detect-newline": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/detect-newline/-/detect-newline-3.1.0.tgz",
-      "integrity": "sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==",
-      "dev": true,
+    "node_modules/jest-snapshot/node_modules/pretty-format": {
+      "version": "29.7.0",
+      "license": "MIT",
+      "dependencies": {
+        "@jest/schemas": "^29.6.3",
+        "ansi-styles": "^5.0.0",
+        "react-is": "^18.0.0"
+      },
       "engines": {
-        "node": ">=8"
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
-    "node_modules/detect-node": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.1.0.tgz",
-      "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==",
-      "dev": true
-    },
-    "node_modules/detect-node-es": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
-      "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ=="
+    "node_modules/jest-snapshot/node_modules/react-is": {
+      "version": "18.3.1",
+      "license": "MIT"
     },
-    "node_modules/detect-port-alt": {
-      "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/detect-port-alt/-/detect-port-alt-1.1.6.tgz",
-      "integrity": "sha512-5tQykt+LqfJFBEYaDITx7S7cR7mJ/zQmLXZ2qt5w04ainYZw6tBf9dBunMjVeVOdYVRUzUOE4HkY5J7+uttb5Q==",
-      "dev": true,
-      "dependencies": {
-        "address": "^1.0.1",
-        "debug": "^2.6.0"
-      },
+    "node_modules/jest-snapshot/node_modules/semver": {
+      "version": "7.6.3",
+      "license": "ISC",
       "bin": {
-        "detect": "bin/detect-port",
-        "detect-port": "bin/detect-port"
+        "semver": "bin/semver.js"
       },
       "engines": {
-        "node": ">= 4.2.1"
+        "node": ">=10"
       }
     },
-    "node_modules/detect-port-alt/node_modules/debug": {
-      "version": "2.6.9",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-      "dev": true,
+    "node_modules/jest-util": {
+      "version": "29.7.0",
+      "license": "MIT",
       "dependencies": {
-        "ms": "2.0.0"
-      }
-    },
-    "node_modules/diacritics": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/diacritics/-/diacritics-1.3.0.tgz",
-      "integrity": "sha1-PvqHMj67hj5mls67AILUj/PW96E="
-    },
-    "node_modules/diff-sequences": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-26.6.2.tgz",
-      "integrity": "sha512-Mv/TDa3nZ9sbc5soK+OoA74BsS3mL37yixCvUAQkiuA4Wz6YtwP/K47n2rv2ovzHZvoiQeA5FTQOschKkEwB0Q==",
-      "dev": true,
+        "@jest/types": "^29.6.3",
+        "@types/node": "*",
+        "chalk": "^4.0.0",
+        "ci-info": "^3.2.0",
+        "graceful-fs": "^4.2.9",
+        "picomatch": "^2.2.3"
+      },
       "engines": {
-        "node": ">= 10.14.2"
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
-    "node_modules/dir-glob": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
-      "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
-      "dev": true,
+    "node_modules/jest-validate": {
+      "version": "29.7.0",
+      "license": "MIT",
       "dependencies": {
-        "path-type": "^4.0.0"
+        "@jest/types": "^29.6.3",
+        "camelcase": "^6.2.0",
+        "chalk": "^4.0.0",
+        "jest-get-type": "^29.6.3",
+        "leven": "^3.1.0",
+        "pretty-format": "^29.7.0"
       },
       "engines": {
-        "node": ">=8"
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
-    "node_modules/dns-equal": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz",
-      "integrity": "sha1-s55/HabrCnW6nBcySzR1PEfgZU0=",
-      "dev": true
-    },
-    "node_modules/dns-packet": {
-      "version": "1.3.4",
-      "resolved": "https://registry.npmjs.org/dns-packet/-/dns-packet-1.3.4.tgz",
-      "integrity": "sha512-BQ6F4vycLXBvdrJZ6S3gZewt6rcrks9KBgM9vrhW+knGRqc8uEdT7fuCwloc7nny5xNoMJ17HGH0R/6fpo8ECA==",
-      "dev": true,
-      "dependencies": {
-        "ip": "^1.1.0",
-        "safe-buffer": "^5.0.1"
+    "node_modules/jest-validate/node_modules/ansi-styles": {
+      "version": "5.2.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/dns-txt": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/dns-txt/-/dns-txt-2.0.2.tgz",
-      "integrity": "sha1-uR2Ab10nGI5Ks+fRB9iBocxGQrY=",
-      "dev": true,
+    "node_modules/jest-validate/node_modules/pretty-format": {
+      "version": "29.7.0",
+      "license": "MIT",
       "dependencies": {
-        "buffer-indexof": "^1.0.0"
+        "@jest/schemas": "^29.6.3",
+        "ansi-styles": "^5.0.0",
+        "react-is": "^18.0.0"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
-    "node_modules/doctrine": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
-      "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==",
-      "dev": true,
+    "node_modules/jest-validate/node_modules/react-is": {
+      "version": "18.3.1",
+      "license": "MIT"
+    },
+    "node_modules/jest-watcher": {
+      "version": "29.7.0",
+      "license": "MIT",
       "dependencies": {
-        "esutils": "^2.0.2"
+        "@jest/test-result": "^29.7.0",
+        "@jest/types": "^29.6.3",
+        "@types/node": "*",
+        "ansi-escapes": "^4.2.1",
+        "chalk": "^4.0.0",
+        "emittery": "^0.13.1",
+        "jest-util": "^29.7.0",
+        "string-length": "^4.0.1"
       },
       "engines": {
-        "node": ">=6.0.0"
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
-    "node_modules/dom-accessibility-api": {
-      "version": "0.4.6",
-      "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.4.6.tgz",
-      "integrity": "sha512-qxFVFR/ymtfamEQT/AsYLe048sitxFCoCHiM+vuOdR3fE94i3so2SCFJxyz/RxV69PZ+9FgToYWOd7eqJqcbYw==",
-      "dev": true
-    },
-    "node_modules/dom-converter": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz",
-      "integrity": "sha512-gd3ypIPfOMr9h5jIKq8E3sHOTCjeirnl0WK5ZdS1AW0Odt0b1PaWaHdJ4Qk4klv+YB9aJBS7mESXjFoDQPu6DA==",
-      "dev": true,
+    "node_modules/jest-worker": {
+      "version": "29.7.0",
+      "license": "MIT",
       "dependencies": {
-        "utila": "~0.4"
+        "@types/node": "*",
+        "jest-util": "^29.7.0",
+        "merge-stream": "^2.0.0",
+        "supports-color": "^8.0.0"
+      },
+      "engines": {
+        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
-    "node_modules/dom-helpers": {
-      "version": "5.1.4",
-      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.1.4.tgz",
-      "integrity": "sha512-TjMyeVUvNEnOnhzs6uAn9Ya47GmMo3qq7m+Lr/3ON0Rs5kHvb8I+SQYjLUSYn7qhEm0QjW0yrBkvz9yOrwwz1A==",
+    "node_modules/jest-worker/node_modules/supports-color": {
+      "version": "8.1.1",
+      "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.8.7",
-        "csstype": "^2.6.7"
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-color?sponsor=1"
       }
     },
-    "node_modules/dom-serializer": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
-      "integrity": "sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g==",
-      "dev": true,
-      "dependencies": {
-        "domelementtype": "^2.0.1",
-        "entities": "^2.0.0"
+    "node_modules/jiti": {
+      "version": "1.21.6",
+      "license": "MIT",
+      "bin": {
+        "jiti": "bin/jiti.js"
       }
     },
-    "node_modules/dom-serializer/node_modules/domelementtype": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz",
-      "integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==",
-      "dev": true
+    "node_modules/jquery": {
+      "version": "3.7.1",
+      "license": "MIT",
+      "peer": true
     },
-    "node_modules/domelementtype": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz",
-      "integrity": "sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==",
-      "dev": true
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "license": "MIT"
     },
-    "node_modules/domexception": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/domexception/-/domexception-1.0.1.tgz",
-      "integrity": "sha512-raigMkn7CJNNo6Ihro1fzG7wr3fHuYVytzquZKX5n0yizGsTcYgzdIUwj1X9pK0VvjeihV+XiclP+DjwbsSKug==",
-      "dev": true,
+    "node_modules/js-yaml": {
+      "version": "3.14.1",
+      "license": "MIT",
       "dependencies": {
-        "webidl-conversions": "^4.0.2"
+        "argparse": "^1.0.7",
+        "esprima": "^4.0.0"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
       }
     },
-    "node_modules/domhandler": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.2.0.tgz",
-      "integrity": "sha512-zk7sgt970kzPks2Bf+dwT/PLzghLnsivb9CcxkvR8Mzr66Olr0Ofd8neSbglHJHaHa2MadfoSdNlKYAaafmWfA==",
-      "dev": true,
+    "node_modules/jsdom": {
+      "version": "20.0.3",
+      "license": "MIT",
       "dependencies": {
-        "domelementtype": "^2.2.0"
+        "abab": "^2.0.6",
+        "acorn": "^8.8.1",
+        "acorn-globals": "^7.0.0",
+        "cssom": "^0.5.0",
+        "cssstyle": "^2.3.0",
+        "data-urls": "^3.0.2",
+        "decimal.js": "^10.4.2",
+        "domexception": "^4.0.0",
+        "escodegen": "^2.0.0",
+        "form-data": "^4.0.0",
+        "html-encoding-sniffer": "^3.0.0",
+        "http-proxy-agent": "^5.0.0",
+        "https-proxy-agent": "^5.0.1",
+        "is-potential-custom-element-name": "^1.0.1",
+        "nwsapi": "^2.2.2",
+        "parse5": "^7.1.1",
+        "saxes": "^6.0.0",
+        "symbol-tree": "^3.2.4",
+        "tough-cookie": "^4.1.2",
+        "w3c-xmlserializer": "^4.0.0",
+        "webidl-conversions": "^7.0.0",
+        "whatwg-encoding": "^2.0.0",
+        "whatwg-mimetype": "^3.0.0",
+        "whatwg-url": "^11.0.0",
+        "ws": "^8.11.0",
+        "xml-name-validator": "^4.0.0"
       },
       "engines": {
-        "node": ">= 4"
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "canvas": "^2.5.0"
+      },
+      "peerDependenciesMeta": {
+        "canvas": {
+          "optional": true
+        }
       }
     },
-    "node_modules/domhandler/node_modules/domelementtype": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz",
-      "integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==",
-      "dev": true
-    },
-    "node_modules/domutils": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.7.0.tgz",
-      "integrity": "sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==",
-      "dev": true,
+    "node_modules/jsdom/node_modules/tr46": {
+      "version": "3.0.0",
+      "license": "MIT",
       "dependencies": {
-        "dom-serializer": "0",
-        "domelementtype": "1"
+        "punycode": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=12"
       }
     },
-    "node_modules/dot-case": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
-      "integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==",
-      "dev": true,
+    "node_modules/jsdom/node_modules/whatwg-url": {
+      "version": "11.0.0",
+      "license": "MIT",
       "dependencies": {
-        "no-case": "^3.0.4",
-        "tslib": "^2.0.3"
+        "tr46": "^3.0.0",
+        "webidl-conversions": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
       }
     },
-    "node_modules/dot-case/node_modules/tslib": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
-      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
-      "dev": true
-    },
-    "node_modules/dotenv": {
-      "version": "8.2.0",
-      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.2.0.tgz",
-      "integrity": "sha512-8sJ78ElpbDJBHNeBzUbUVLsqKdccaa/BXF1uPTw3GrvQTBgrQrtObr2mUrE38vzYd8cEv+m/JBfDLioYcfXoaw==",
-      "dev": true,
+    "node_modules/jsesc": {
+      "version": "2.5.2",
+      "license": "MIT",
+      "bin": {
+        "jsesc": "bin/jsesc"
+      },
       "engines": {
-        "node": ">=8"
+        "node": ">=4"
       }
     },
-    "node_modules/dotenv-defaults": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/dotenv-defaults/-/dotenv-defaults-2.0.2.tgz",
-      "integrity": "sha512-iOIzovWfsUHU91L5i8bJce3NYK5JXeAwH50Jh6+ARUdLiiGlYWfGw6UkzsYqaXZH/hjE/eCd/PlfM/qqyK0AMg==",
-      "dev": true,
-      "dependencies": {
-        "dotenv": "^8.2.0"
-      }
+    "node_modules/json-buffer": {
+      "version": "3.0.1",
+      "license": "MIT"
     },
-    "node_modules/dotenv-webpack": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/dotenv-webpack/-/dotenv-webpack-7.0.3.tgz",
-      "integrity": "sha512-O0O9pOEwrk+n1zzR3T2uuXRlw64QxHSPeNN1GaiNBloQFNaCUL9V8jxSVz4jlXXFP/CIqK8YecWf8BAvsSgMjw==",
-      "dev": true,
+    "node_modules/json-parse-even-better-errors": {
+      "version": "2.3.1",
+      "license": "MIT"
+    },
+    "node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "license": "MIT"
+    },
+    "node_modules/json-stable-stringify": {
+      "version": "1.1.1",
+      "license": "MIT",
       "dependencies": {
-        "dotenv-defaults": "^2.0.2"
+        "call-bind": "^1.0.5",
+        "isarray": "^2.0.5",
+        "jsonify": "^0.0.1",
+        "object-keys": "^1.1.1"
       },
       "engines": {
-        "node": ">=10"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/download": {
-      "version": "6.2.5",
-      "resolved": "https://registry.npmjs.org/download/-/download-6.2.5.tgz",
-      "integrity": "sha512-DpO9K1sXAST8Cpzb7kmEhogJxymyVUd5qz/vCOSyvwtp2Klj2XcDt5YUuasgxka44SxF0q5RriKIwJmQHG2AuA==",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "caw": "^2.0.0",
-        "content-disposition": "^0.5.2",
-        "decompress": "^4.0.0",
-        "ext-name": "^5.0.0",
-        "file-type": "5.2.0",
-        "filenamify": "^2.0.0",
-        "get-stream": "^3.0.0",
-        "got": "^7.0.0",
-        "make-dir": "^1.0.0",
-        "p-event": "^1.0.0",
-        "pify": "^3.0.0"
+    "node_modules/json-stable-stringify-without-jsonify": {
+      "version": "1.0.1",
+      "license": "MIT"
+    },
+    "node_modules/json5": {
+      "version": "2.2.3",
+      "license": "MIT",
+      "bin": {
+        "json5": "lib/cli.js"
       },
       "engines": {
-        "node": ">=4"
+        "node": ">=6"
       }
     },
-    "node_modules/download/node_modules/file-type": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/file-type/-/file-type-5.2.0.tgz",
-      "integrity": "sha1-LdvqfHP/42No365J3DOMBYwritY=",
-      "dev": true,
-      "optional": true,
-      "engines": {
-        "node": ">=4"
+    "node_modules/jsonfile": {
+      "version": "6.1.0",
+      "license": "MIT",
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
       }
     },
-    "node_modules/download/node_modules/get-stream": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
-      "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=",
-      "dev": true,
-      "optional": true,
-      "engines": {
-        "node": ">=4"
+    "node_modules/jsonify": {
+      "version": "0.0.1",
+      "license": "Public Domain",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/download/node_modules/make-dir": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-1.3.0.tgz",
-      "integrity": "sha512-2w31R7SJtieJJnQtGc7RVL2StM2vGYVfqUOvUDxH6bC6aJTxPxTF0GnIgCyu7tjockiUWAYQRbxa7vKn34s5sQ==",
-      "dev": true,
-      "optional": true,
+    "node_modules/jsx-ast-utils": {
+      "version": "3.3.5",
+      "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz",
+      "integrity": "sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==",
       "dependencies": {
-        "pify": "^3.0.0"
+        "array-includes": "^3.1.6",
+        "array.prototype.flat": "^1.3.1",
+        "object.assign": "^4.1.4",
+        "object.values": "^1.1.6"
       },
       "engines": {
-        "node": ">=4"
+        "node": ">=4.0"
       }
     },
-    "node_modules/download/node_modules/pify": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
-      "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
-      "dev": true,
-      "optional": true,
-      "engines": {
-        "node": ">=4"
+    "node_modules/jszip": {
+      "version": "3.10.1",
+      "license": "(MIT OR GPL-3.0-or-later)",
+      "dependencies": {
+        "lie": "~3.3.0",
+        "pako": "~1.0.2",
+        "readable-stream": "~2.3.6",
+        "setimmediate": "^1.0.5"
       }
     },
-    "node_modules/duplexer": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
-      "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==",
-      "dev": true
-    },
-    "node_modules/duplexer3": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/duplexer3/-/duplexer3-0.1.4.tgz",
-      "integrity": "sha1-7gHdHKwO08vH/b6jfcCo8c4ALOI=",
-      "dev": true,
-      "optional": true
+    "node_modules/jwt-decode": {
+      "version": "3.1.2",
+      "license": "MIT"
     },
-    "node_modules/ecc-jsbn": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
-      "integrity": "sha1-OoOpBOVDUyh4dMVkt1SThoSamMk=",
-      "dev": true,
+    "node_modules/keyv": {
+      "version": "4.5.4",
+      "license": "MIT",
       "dependencies": {
-        "jsbn": "~0.1.0",
-        "safer-buffer": "^2.1.0"
+        "json-buffer": "3.0.1"
       }
     },
-    "node_modules/ee-first": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
-      "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=",
-      "dev": true
-    },
-    "node_modules/ejs": {
-      "version": "2.7.4",
-      "resolved": "https://registry.npmjs.org/ejs/-/ejs-2.7.4.tgz",
-      "integrity": "sha512-7vmuyh5+kuUyJKePhQfRQBhXV5Ce+RnaeeQArKu1EAMpL3WbgMt5WG6uQZpEVvYSSsxMXRKOewtDk9RaTKXRlA==",
-      "dev": true,
+    "node_modules/kind-of": {
+      "version": "6.0.3",
+      "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
       }
     },
-    "node_modules/electron-to-chromium": {
-      "version": "1.3.770",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.770.tgz",
-      "integrity": "sha512-Kyh8DGK1KfEZuYKIHvuOmrKotsKZQ+qBkDIWHciE3QoFkxXB1KzPP+tfLilSHAfxTON0yYMnFCWkQtUOR7g6KQ==",
-      "dev": true
-    },
-    "node_modules/email-prop-type": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/email-prop-type/-/email-prop-type-3.0.1.tgz",
-      "integrity": "sha512-tONZGMEOOkadp5OBftuVXU8DsceWmINxYK+pqPFB4LT5ODjrPX/esel3WGqbV7d6in5/MnZE4n4QcqOr4gh7dg==",
-      "dependencies": {
-        "email-validator": "^2.0.4"
-      }
-    },
-    "node_modules/email-validator": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/email-validator/-/email-validator-2.0.4.tgz",
-      "integrity": "sha512-gYCwo7kh5S3IDyZPLZf6hSS0MnZT8QmJFqYvbqlDZSbwdZlY6QZWxJ4i/6UhITOJ4XzyI647Bm2MXKCLqnJ4nQ==",
+    "node_modules/kleur": {
+      "version": "3.0.3",
+      "license": "MIT",
       "engines": {
-        "node": ">4.0"
+        "node": ">=6"
       }
     },
-    "node_modules/emittery": {
-      "version": "0.7.2",
-      "resolved": "https://registry.npmjs.org/emittery/-/emittery-0.7.2.tgz",
-      "integrity": "sha512-A8OG5SR/ij3SsJdWDJdkkSYUjQdCUx6APQXem0SaEePBSRg4eymGYwBkKo1Y6DU+af/Jn2dBQqDBvjnr9Vi8nQ==",
+    "node_modules/known-css-properties": {
+      "version": "0.29.0",
       "dev": true,
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/emoji-regex": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "dev": true
+      "license": "MIT"
     },
-    "node_modules/emojis-list": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
-      "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
-      "dev": true,
-      "engines": {
-        "node": ">= 4"
-      }
+    "node_modules/language-subtag-registry": {
+      "version": "0.3.23",
+      "resolved": "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.23.tgz",
+      "integrity": "sha512-0K65Lea881pHotoGEa5gDlMxt3pctLi2RplBb7Ezh4rRdLEOtgi7n4EwK9lamnUCkKBqaeKRVebTq6BAxSkpXQ=="
     },
-    "node_modules/encodeurl": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
-      "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.8"
+    "node_modules/language-tags": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/language-tags/-/language-tags-1.0.5.tgz",
+      "integrity": "sha512-qJhlO9cGXi6hBGKoxEG/sKZDAHD5Hnu9Hs4WbOY3pCWXDhw0N8x1NenNzm2EnNLkLkk7J2SdxAkDSbb6ftT+UQ==",
+      "dependencies": {
+        "language-subtag-registry": "~0.3.2"
       }
     },
-    "node_modules/end-of-stream": {
-      "version": "1.4.4",
-      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
-      "integrity": "sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==",
-      "dev": true,
+    "node_modules/launch-editor": {
+      "version": "2.8.1",
+      "license": "MIT",
       "dependencies": {
-        "once": "^1.4.0"
+        "picocolors": "^1.0.0",
+        "shell-quote": "^1.8.1"
       }
     },
-    "node_modules/enhanced-resolve": {
-      "version": "5.8.2",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.8.2.tgz",
-      "integrity": "sha512-F27oB3WuHDzvR2DOGNTaYy0D5o0cnrv8TeI482VM4kYgQd/FT9lUQwuNsJ0oOHtBUq7eiW5ytqzp7nBFknL+GA==",
-      "dev": true,
-      "dependencies": {
-        "graceful-fs": "^4.2.4",
-        "tapable": "^2.2.0"
-      },
+    "node_modules/leven": {
+      "version": "3.1.0",
+      "license": "MIT",
       "engines": {
-        "node": ">=10.13.0"
+        "node": ">=6"
       }
     },
-    "node_modules/enquirer": {
-      "version": "2.3.6",
-      "resolved": "https://registry.npmjs.org/enquirer/-/enquirer-2.3.6.tgz",
-      "integrity": "sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg==",
-      "dev": true,
+    "node_modules/levn": {
+      "version": "0.4.1",
+      "license": "MIT",
       "dependencies": {
-        "ansi-colors": "^4.1.1"
+        "prelude-ls": "^1.2.1",
+        "type-check": "~0.4.0"
       },
       "engines": {
-        "node": ">=8.6"
+        "node": ">= 0.8.0"
       }
     },
-    "node_modules/entities": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
-      "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
-      "dev": true
+    "node_modules/lie": {
+      "version": "3.3.0",
+      "license": "MIT",
+      "dependencies": {
+        "immediate": "~3.0.5"
+      }
     },
-    "node_modules/envinfo": {
-      "version": "7.8.1",
-      "resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.8.1.tgz",
-      "integrity": "sha512-/o+BXHmB7ocbHEAs6F2EnG0ogybVVUdkRunTT2glZU9XAaGmhqskrvKwqXuDfNjEO0LZKWdejEEpnq8aM0tOaw==",
-      "dev": true,
-      "bin": {
-        "envinfo": "dist/cli.js"
-      },
+    "node_modules/lilconfig": {
+      "version": "3.1.2",
+      "license": "MIT",
       "engines": {
-        "node": ">=4"
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antonk52"
       }
     },
-    "node_modules/error-ex": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
-      "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
-      "dev": true,
-      "dependencies": {
-        "is-arrayish": "^0.2.1"
-      }
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "license": "MIT"
     },
-    "node_modules/es-abstract": {
-      "version": "1.17.6",
-      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.17.6.tgz",
-      "integrity": "sha512-Fr89bON3WFyUi5EvAeI48QTWX0AyekGgLA8H+c+7fbfCkJwRWRMLd8CQedNEyJuoYYhmtEqY92pgte1FAhBlhw==",
-      "dependencies": {
-        "es-to-primitive": "^1.2.1",
-        "function-bind": "^1.1.1",
-        "has": "^1.0.3",
-        "has-symbols": "^1.0.1",
-        "is-callable": "^1.2.0",
-        "is-regex": "^1.1.0",
-        "object-inspect": "^1.7.0",
-        "object-keys": "^1.1.1",
-        "object.assign": "^4.1.0",
-        "string.prototype.trimend": "^1.0.1",
-        "string.prototype.trimstart": "^1.0.1"
-      },
+    "node_modules/loader-runner": {
+      "version": "4.3.0",
+      "license": "MIT",
       "engines": {
-        "node": ">= 0.4"
+        "node": ">=6.11.5"
       }
     },
-    "node_modules/es-check": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/es-check/-/es-check-5.1.0.tgz",
-      "integrity": "sha512-QlRhlUmEpdnleBFYWRFROm8u9cNPOWdE1iXQPWiQXnwmlJZ0hSxWpLOXwpFLyRrwnTmt5xqYM/5OR8Ao0MYa8w==",
-      "dev": true,
+    "node_modules/loader-utils": {
+      "version": "2.0.4",
+      "license": "MIT",
       "dependencies": {
-        "acorn": "6.1.1",
-        "caporal": "1.3.0",
-        "glob": "^7.1.2"
-      },
-      "bin": {
-        "es-check": "index.js"
+        "big.js": "^5.2.2",
+        "emojis-list": "^3.0.0",
+        "json5": "^2.1.2"
       },
       "engines": {
-        "node": ">= 4"
+        "node": ">=8.9.0"
       }
     },
-    "node_modules/es-check/node_modules/acorn": {
-      "version": "6.1.1",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.1.1.tgz",
-      "integrity": "sha512-jPTiwtOxaHNaAPg/dmrJ/beuzLRnXtB0kQPQ8JpotKJgTB6rX6c8mlf315941pyjBSaPg8NHXS9fhP4u17DpGA==",
-      "dev": true,
-      "bin": {
-        "acorn": "bin/acorn"
-      },
-      "engines": {
-        "node": ">=0.4.0"
+    "node_modules/localforage": {
+      "version": "1.10.0",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "lie": "3.1.1"
       }
     },
-    "node_modules/es-module-lexer": {
-      "version": "0.3.26",
-      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-0.3.26.tgz",
-      "integrity": "sha512-Va0Q/xqtrss45hWzP8CZJwzGSZJjDM5/MJRE3IXXnUCcVLElR9BRaE9F62BopysASyc4nM3uwhSW7FFB9nlWAA==",
-      "dev": true
-    },
-    "node_modules/es-to-primitive": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
-      "integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==",
+    "node_modules/localforage-memoryStorageDriver": {
+      "version": "0.9.2",
       "dependencies": {
-        "is-callable": "^1.1.4",
-        "is-date-object": "^1.0.1",
-        "is-symbol": "^1.0.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
+        "localforage": ">=1.4.0"
       }
     },
-    "node_modules/escalade": {
+    "node_modules/localforage/node_modules/lie": {
       "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
-      "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
+      "license": "MIT",
+      "dependencies": {
+        "immediate": "~3.0.5"
       }
     },
-    "node_modules/escape-html": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
-      "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=",
-      "dev": true
-    },
-    "node_modules/escape-string-regexp": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
-      "dev": true,
+    "node_modules/locate-path": {
+      "version": "5.0.0",
+      "license": "MIT",
+      "dependencies": {
+        "p-locate": "^4.1.0"
+      },
       "engines": {
-        "node": ">=0.8.0"
+        "node": ">=8"
       }
     },
-    "node_modules/escodegen": {
-      "version": "1.14.3",
-      "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-1.14.3.tgz",
-      "integrity": "sha512-qFcX0XJkdg+PB3xjZZG/wKSuT1PnQWx57+TVSjIMmILd2yC/6ByYElPwJnslDsuWuSAp4AwJGumarAAmJch5Kw==",
-      "dev": true,
-      "dependencies": {
-        "esprima": "^4.0.1",
-        "estraverse": "^4.2.0",
-        "esutils": "^2.0.2",
-        "optionator": "^0.8.1",
-        "source-map": "~0.6.1"
-      },
-      "bin": {
-        "escodegen": "bin/escodegen.js",
-        "esgenerate": "bin/esgenerate.js"
-      },
-      "engines": {
-        "node": ">=4.0"
-      }
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "license": "MIT"
     },
-    "node_modules/eslint": {
-      "version": "6.8.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-6.8.0.tgz",
-      "integrity": "sha512-K+Iayyo2LtyYhDSYwz5D5QdWw0hCacNzyq1Y821Xna2xSJj7cijoLLYmLxTQgcgZ9mC61nryMy9S7GRbYpI5Ig==",
-      "dev": true,
-      "dependencies": {
-        "@babel/code-frame": "^7.0.0",
-        "ajv": "^6.10.0",
-        "chalk": "^2.1.0",
-        "cross-spawn": "^6.0.5",
-        "debug": "^4.0.1",
-        "doctrine": "^3.0.0",
-        "eslint-scope": "^5.0.0",
-        "eslint-utils": "^1.4.3",
-        "eslint-visitor-keys": "^1.1.0",
-        "espree": "^6.1.2",
-        "esquery": "^1.0.1",
-        "esutils": "^2.0.2",
-        "file-entry-cache": "^5.0.1",
-        "functional-red-black-tree": "^1.0.1",
-        "glob-parent": "^5.0.0",
-        "globals": "^12.1.0",
-        "ignore": "^4.0.6",
-        "import-fresh": "^3.0.0",
-        "imurmurhash": "^0.1.4",
-        "inquirer": "^7.0.0",
-        "is-glob": "^4.0.0",
-        "js-yaml": "^3.13.1",
-        "json-stable-stringify-without-jsonify": "^1.0.1",
-        "levn": "^0.3.0",
-        "lodash": "^4.17.14",
-        "minimatch": "^3.0.4",
-        "mkdirp": "^0.5.1",
-        "natural-compare": "^1.4.0",
-        "optionator": "^0.8.3",
-        "progress": "^2.0.0",
-        "regexpp": "^2.0.1",
-        "semver": "^6.1.2",
-        "strip-ansi": "^5.2.0",
-        "strip-json-comments": "^3.0.1",
-        "table": "^5.2.3",
-        "text-table": "^0.2.0",
-        "v8-compile-cache": "^2.0.3"
-      },
-      "bin": {
-        "eslint": "bin/eslint.js"
-      },
-      "engines": {
-        "node": "^8.10.0 || ^10.13.0 || >=11.10.1"
-      }
+    "node_modules/lodash-es": {
+      "version": "4.17.21",
+      "license": "MIT"
     },
-    "node_modules/eslint-config-airbnb": {
-      "version": "18.1.0",
-      "resolved": "https://registry.npmjs.org/eslint-config-airbnb/-/eslint-config-airbnb-18.1.0.tgz",
-      "integrity": "sha512-kZFuQC/MPnH7KJp6v95xsLBf63G/w7YqdPfQ0MUanxQ7zcKUNG8j+sSY860g3NwCBOa62apw16J6pRN+AOgXzw==",
+    "node_modules/lodash.camelcase": {
+      "version": "4.3.0",
+      "license": "MIT"
+    },
+    "node_modules/lodash.debounce": {
+      "version": "4.0.8",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isequal": {
+      "version": "4.5.0",
       "dev": true,
-      "dependencies": {
-        "eslint-config-airbnb-base": "^14.1.0",
-        "object.assign": "^4.1.0",
-        "object.entries": "^1.1.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
+      "license": "MIT"
     },
-    "node_modules/eslint-config-airbnb-base": {
-      "version": "14.2.1",
-      "resolved": "https://registry.npmjs.org/eslint-config-airbnb-base/-/eslint-config-airbnb-base-14.2.1.tgz",
-      "integrity": "sha512-GOrQyDtVEc1Xy20U7vsB2yAoB4nBlfH5HZJeatRXHleO+OS5Ot+MWij4Dpltw4/DyIkqUfqz1epfhVR5XWWQPA==",
+    "node_modules/lodash.isplainobject": {
+      "version": "4.0.6",
       "dev": true,
-      "dependencies": {
-        "confusing-browser-globals": "^1.0.10",
-        "object.assign": "^4.1.2",
-        "object.entries": "^1.1.2"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
+      "license": "MIT"
     },
-    "node_modules/eslint-config-airbnb-base/node_modules/object.assign": {
+    "node_modules/lodash.memoize": {
       "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.2.tgz",
-      "integrity": "sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.merge": {
+      "version": "4.6.2",
+      "license": "MIT"
+    },
+    "node_modules/lodash.snakecase": {
+      "version": "4.1.1",
+      "license": "MIT"
+    },
+    "node_modules/lodash.sortby": {
+      "version": "4.7.0",
       "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/lodash.truncate": {
+      "version": "4.4.2",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/lodash.uniq": {
+      "version": "4.5.0",
+      "license": "MIT"
+    },
+    "node_modules/lodash.uniqby": {
+      "version": "4.7.0",
+      "license": "MIT"
+    },
+    "node_modules/log-symbols": {
+      "version": "4.1.0",
+      "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.0",
-        "define-properties": "^1.1.3",
-        "has-symbols": "^1.0.1",
-        "object-keys": "^1.1.1"
+        "chalk": "^4.1.0",
+        "is-unicode-supported": "^0.1.0"
       },
       "engines": {
-        "node": ">= 0.4"
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/eslint-import-resolver-node": {
-      "version": "0.3.4",
-      "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.4.tgz",
-      "integrity": "sha512-ogtf+5AB/O+nM6DIeBUNr2fuT7ot9Qg/1harBfBtaP13ekEWFQEEMP94BCB7zaNW3gyY+8SHYF00rnqYwXKWOA==",
-      "dev": true,
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "license": "MIT",
       "dependencies": {
-        "debug": "^2.6.9",
-        "resolve": "^1.13.1"
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
       }
     },
-    "node_modules/eslint-import-resolver-node/node_modules/debug": {
-      "version": "2.6.9",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-      "dev": true,
+    "node_modules/lower-case": {
+      "version": "2.0.2",
+      "license": "MIT",
       "dependencies": {
-        "ms": "2.0.0"
+        "tslib": "^2.0.3"
       }
     },
-    "node_modules/eslint-module-utils": {
-      "version": "2.6.1",
-      "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.6.1.tgz",
-      "integrity": "sha512-ZXI9B8cxAJIH4nfkhTwcRTEAnrVfobYqwjWy/QMCZ8rHkZHFjf9yO4BzpiF9kCSfNlMG54eKigISHpX0+AaT4A==",
-      "dev": true,
+    "node_modules/lru-cache": {
+      "version": "5.1.1",
+      "license": "ISC",
       "dependencies": {
-        "debug": "^3.2.7",
-        "pkg-dir": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=4"
+        "yallist": "^3.0.2"
       }
     },
-    "node_modules/eslint-module-utils/node_modules/debug": {
-      "version": "3.2.7",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
-      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+    "node_modules/lz-string": {
+      "version": "1.5.0",
       "dev": true,
-      "dependencies": {
-        "ms": "^2.1.1"
+      "license": "MIT",
+      "bin": {
+        "lz-string": "bin/bin.js"
       }
     },
-    "node_modules/eslint-module-utils/node_modules/find-up": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz",
-      "integrity": "sha1-RdG35QbHF93UgndaK3eSCjwMV6c=",
-      "dev": true,
+    "node_modules/magic-string": {
+      "version": "0.30.11",
+      "license": "MIT",
       "dependencies": {
-        "locate-path": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=4"
+        "@jridgewell/sourcemap-codec": "^1.5.0"
       }
     },
-    "node_modules/eslint-module-utils/node_modules/locate-path": {
+    "node_modules/mailto-link": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-2.0.0.tgz",
-      "integrity": "sha1-K1aLJl7slExtnA3pw9u7ygNUzY4=",
-      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "p-locate": "^2.0.0",
-        "path-exists": "^3.0.0"
+        "assert-ok": "~1.0.0",
+        "cast-array": "~1.0.1",
+        "object-filter": "~1.0.2",
+        "query-string": "~7.0.0"
       },
       "engines": {
-        "node": ">=4"
+        "node": ">= 12"
       }
     },
-    "node_modules/eslint-module-utils/node_modules/ms": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "dev": true
-    },
-    "node_modules/eslint-module-utils/node_modules/p-limit": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.3.0.tgz",
-      "integrity": "sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==",
-      "dev": true,
+    "node_modules/make-dir": {
+      "version": "2.1.0",
+      "license": "MIT",
       "dependencies": {
-        "p-try": "^1.0.0"
+        "pify": "^4.0.1",
+        "semver": "^5.6.0"
       },
       "engines": {
-        "node": ">=4"
+        "node": ">=6"
       }
     },
-    "node_modules/eslint-module-utils/node_modules/p-locate": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-2.0.0.tgz",
-      "integrity": "sha1-IKAQOyIqcMj9OcwuWAaA893l7EM=",
-      "dev": true,
-      "dependencies": {
-        "p-limit": "^1.1.0"
-      },
-      "engines": {
-        "node": ">=4"
+    "node_modules/make-dir/node_modules/semver": {
+      "version": "5.7.2",
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver"
       }
     },
-    "node_modules/eslint-module-utils/node_modules/p-try": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/p-try/-/p-try-1.0.0.tgz",
-      "integrity": "sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M=",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
+    "node_modules/make-error": {
+      "version": "1.3.6",
+      "license": "ISC"
+    },
+    "node_modules/makeerror": {
+      "version": "1.0.12",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "tmpl": "1.0.5"
       }
     },
-    "node_modules/eslint-module-utils/node_modules/path-exists": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
-      "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=",
+    "node_modules/map-obj": {
+      "version": "4.3.0",
       "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": ">=4"
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/eslint-module-utils/node_modules/pkg-dir": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-2.0.0.tgz",
-      "integrity": "sha1-9tXREJ4Z1j7fQo4L1X4Sd3YVM0s=",
-      "dev": true,
+    "node_modules/matchmediaquery": {
+      "version": "0.3.1",
+      "license": "MIT",
       "dependencies": {
-        "find-up": "^2.1.0"
-      },
-      "engines": {
-        "node": ">=4"
+        "css-mediaquery": "^0.1.2"
       }
     },
-    "node_modules/eslint-plugin-import": {
-      "version": "2.22.1",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.22.1.tgz",
-      "integrity": "sha512-8K7JjINHOpH64ozkAhpT3sd+FswIZTfMZTjdx052pnWrgRCVfp8op9tbjpAk3DdUeI/Ba4C8OjdC0r90erHEOw==",
+    "node_modules/mathml-tag-names": {
+      "version": "2.1.3",
       "dev": true,
-      "dependencies": {
-        "array-includes": "^3.1.1",
-        "array.prototype.flat": "^1.2.3",
-        "contains-path": "^0.1.0",
-        "debug": "^2.6.9",
-        "doctrine": "1.5.0",
-        "eslint-import-resolver-node": "^0.3.4",
-        "eslint-module-utils": "^2.6.0",
-        "has": "^1.0.3",
-        "minimatch": "^3.0.4",
-        "object.values": "^1.1.1",
-        "read-pkg-up": "^2.0.0",
-        "resolve": "^1.17.0",
-        "tsconfig-paths": "^3.9.0"
-      },
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/mdn-data": {
+      "version": "2.0.30",
+      "license": "CC0-1.0"
+    },
+    "node_modules/media-typer": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
+      "integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==",
       "engines": {
-        "node": ">=4"
+        "node": ">= 0.6"
       }
     },
-    "node_modules/eslint-plugin-import/node_modules/debug": {
-      "version": "2.6.9",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-      "dev": true,
+    "node_modules/meilisearch": {
+      "version": "0.41.0",
+      "license": "MIT",
       "dependencies": {
-        "ms": "2.0.0"
+        "cross-fetch": "^3.1.6"
       }
     },
-    "node_modules/eslint-plugin-import/node_modules/doctrine": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-1.5.0.tgz",
-      "integrity": "sha1-N53Ocw9hZvds76TmcHoVmwLFpvo=",
-      "dev": true,
+    "node_modules/memfs": {
+      "version": "3.5.3",
+      "license": "Unlicense",
       "dependencies": {
-        "esutils": "^2.0.2",
-        "isarray": "^1.0.0"
+        "fs-monkey": "^1.0.4"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">= 4.0.0"
       }
     },
-    "node_modules/eslint-plugin-import/node_modules/isarray": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-      "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
-      "dev": true
+    "node_modules/memoize-one": {
+      "version": "6.0.0",
+      "license": "MIT"
     },
-    "node_modules/eslint-plugin-jsx-a11y": {
-      "version": "6.2.3",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.2.3.tgz",
-      "integrity": "sha512-CawzfGt9w83tyuVekn0GDPU9ytYtxyxyFZ3aSWROmnRRFQFT2BiPJd7jvRdzNDi6oLWaS2asMeYSNMjWTV4eNg==",
+    "node_modules/memory-fs": {
+      "version": "0.2.0",
       "dev": true,
-      "dependencies": {
-        "@babel/runtime": "^7.4.5",
-        "aria-query": "^3.0.0",
-        "array-includes": "^3.0.3",
-        "ast-types-flow": "^0.0.7",
-        "axobject-query": "^2.0.2",
-        "damerau-levenshtein": "^1.0.4",
-        "emoji-regex": "^7.0.2",
-        "has": "^1.0.3",
-        "jsx-ast-utils": "^2.2.1"
-      },
-      "engines": {
-        "node": ">=4.0"
-      }
-    },
-    "node_modules/eslint-plugin-jsx-a11y/node_modules/emoji-regex": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz",
-      "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==",
-      "dev": true
+      "license": "MIT"
     },
-    "node_modules/eslint-plugin-react": {
-      "version": "7.19.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.19.0.tgz",
-      "integrity": "sha512-SPT8j72CGuAP+JFbT0sJHOB80TX/pu44gQ4vXH/cq+hQTiY2PuZ6IHkqXJV6x1b28GDdo1lbInjKUrrdUf0LOQ==",
+    "node_modules/meow": {
+      "version": "10.1.5",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "array-includes": "^3.1.1",
-        "doctrine": "^2.1.0",
-        "has": "^1.0.3",
-        "jsx-ast-utils": "^2.2.3",
-        "object.entries": "^1.1.1",
-        "object.fromentries": "^2.0.2",
-        "object.values": "^1.1.1",
-        "prop-types": "^15.7.2",
-        "resolve": "^1.15.1",
-        "semver": "^6.3.0",
-        "string.prototype.matchall": "^4.0.2",
-        "xregexp": "^4.3.0"
+        "@types/minimist": "^1.2.2",
+        "camelcase-keys": "^7.0.0",
+        "decamelize": "^5.0.0",
+        "decamelize-keys": "^1.1.0",
+        "hard-rejection": "^2.1.0",
+        "minimist-options": "4.1.0",
+        "normalize-package-data": "^3.0.2",
+        "read-pkg-up": "^8.0.0",
+        "redent": "^4.0.0",
+        "trim-newlines": "^4.0.2",
+        "type-fest": "^1.2.2",
+        "yargs-parser": "^20.2.9"
       },
       "engines": {
-        "node": ">=4"
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/eslint-plugin-react-hooks": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-1.7.0.tgz",
-      "integrity": "sha512-iXTCFcOmlWvw4+TOE8CLWj6yX1GwzT0Y6cUfHHZqWnSk144VmVIRcVGtUAzrLES7C798lmvnt02C7rxaOX1HNA==",
+    "node_modules/meow/node_modules/indent-string": {
+      "version": "5.0.0",
       "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": ">=7"
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/eslint-plugin-react/node_modules/doctrine": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
-      "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
+    "node_modules/meow/node_modules/redent": {
+      "version": "4.0.0",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "esutils": "^2.0.2"
+        "indent-string": "^5.0.0",
+        "strip-indent": "^4.0.0"
       },
       "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/eslint-plugin-react/node_modules/semver": {
-      "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-      "dev": true,
-      "bin": {
-        "semver": "bin/semver.js"
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/eslint-scope": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
-      "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
+    "node_modules/meow/node_modules/strip-indent": {
+      "version": "4.0.0",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "esrecurse": "^4.3.0",
-        "estraverse": "^4.1.1"
+        "min-indent": "^1.0.1"
       },
       "engines": {
-        "node": ">=8.0.0"
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/eslint-utils": {
-      "version": "1.4.3",
-      "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-1.4.3.tgz",
-      "integrity": "sha512-fbBN5W2xdY45KulGXmLHZ3c3FHfVYmKg0IrAKGOkT/464PQsx2UeIzfz1RmEci+KLm1bBaAzZAh8+/E+XAeZ8Q==",
+    "node_modules/meow/node_modules/type-fest": {
+      "version": "1.4.0",
       "dev": true,
-      "dependencies": {
-        "eslint-visitor-keys": "^1.1.0"
-      },
+      "license": "(MIT OR CC0-1.0)",
       "engines": {
-        "node": ">=6"
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/eslint-visitor-keys": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
-      "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
+    "node_modules/merge-descriptors": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.3.tgz",
+      "integrity": "sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ==",
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/eslint/node_modules/glob-parent": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
-      "dependencies": {
-        "is-glob": "^4.0.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
+    "node_modules/merge-stream": {
+      "version": "2.0.0",
+      "license": "MIT"
     },
-    "node_modules/eslint/node_modules/globals": {
-      "version": "12.4.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-12.4.0.tgz",
-      "integrity": "sha512-BWICuzzDvDoH54NHKCseDanAhE3CeDorgDL5MT6LMXXj2WCnd9UC2szdk4AWLfjdgNBCXLUanXYcpBBKOSWGwg==",
-      "dev": true,
-      "dependencies": {
-        "type-fest": "^0.8.1"
-      },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "license": "MIT",
       "engines": {
-        "node": ">=8"
+        "node": ">= 8"
       }
     },
-    "node_modules/eslint/node_modules/semver": {
-      "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-      "dev": true,
-      "bin": {
-        "semver": "bin/semver.js"
+    "node_modules/methods": {
+      "version": "1.1.2",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
       }
     },
-    "node_modules/espree": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/espree/-/espree-6.2.1.tgz",
-      "integrity": "sha512-ysCxRQY3WaXJz9tdbWOwuWr5Y/XrPTGX9Kiz3yoUXwW0VZ4w30HTkQLaGx/+ttFjF8i+ACbArnB4ce68a9m5hw==",
-      "dev": true,
+    "node_modules/micromatch": {
+      "version": "4.0.7",
+      "license": "MIT",
       "dependencies": {
-        "acorn": "^7.1.1",
-        "acorn-jsx": "^5.2.0",
-        "eslint-visitor-keys": "^1.1.0"
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
       },
       "engines": {
-        "node": ">=6.0.0"
+        "node": ">=8.6"
       }
     },
-    "node_modules/esprima": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
-      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
-      "dev": true,
+    "node_modules/mime": {
+      "version": "1.6.0",
+      "license": "MIT",
       "bin": {
-        "esparse": "bin/esparse.js",
-        "esvalidate": "bin/esvalidate.js"
+        "mime": "cli.js"
       },
       "engines": {
         "node": ">=4"
       }
     },
-    "node_modules/esquery": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.4.0.tgz",
-      "integrity": "sha512-cCDispWt5vHHtwMY2YrAQ4ibFkAL8RbH5YGBnZBc90MolvvfkkQcJro/aZiAQUlQ3qgrYS6D6v8Gc5G5CQsc9w==",
-      "dev": true,
-      "dependencies": {
-        "estraverse": "^5.1.0"
-      },
-      "engines": {
-        "node": ">=0.10"
-      }
-    },
-    "node_modules/esquery/node_modules/estraverse": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.2.0.tgz",
-      "integrity": "sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ==",
-      "dev": true,
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "license": "MIT",
       "engines": {
-        "node": ">=4.0"
+        "node": ">= 0.6"
       }
     },
-    "node_modules/esrecurse": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
-      "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
-      "dev": true,
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "license": "MIT",
       "dependencies": {
-        "estraverse": "^5.2.0"
+        "mime-db": "1.52.0"
       },
       "engines": {
-        "node": ">=4.0"
+        "node": ">= 0.6"
       }
     },
-    "node_modules/esrecurse/node_modules/estraverse": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.2.0.tgz",
-      "integrity": "sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ==",
-      "dev": true,
+    "node_modules/mimic-fn": {
+      "version": "2.1.0",
+      "license": "MIT",
       "engines": {
-        "node": ">=4.0"
+        "node": ">=6"
       }
     },
-    "node_modules/estraverse": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
-      "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
-      "dev": true,
+    "node_modules/mimic-response": {
+      "version": "3.1.0",
+      "license": "MIT",
       "engines": {
-        "node": ">=4.0"
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/esutils": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
-      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+    "node_modules/min-indent": {
+      "version": "1.0.1",
       "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=4"
       }
     },
-    "node_modules/etag": {
-      "version": "1.8.1",
-      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
-      "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=",
-      "dev": true,
+    "node_modules/mini-css-extract-plugin": {
+      "version": "1.6.2",
+      "license": "MIT",
+      "dependencies": {
+        "loader-utils": "^2.0.0",
+        "schema-utils": "^3.0.0",
+        "webpack-sources": "^1.1.0"
+      },
       "engines": {
-        "node": ">= 0.6"
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^4.4.0 || ^5.0.0"
       }
     },
-    "node_modules/eventemitter3": {
-      "version": "4.0.7",
-      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
-      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
-      "dev": true
-    },
-    "node_modules/events": {
+    "node_modules/mini-css-extract-plugin/node_modules/schema-utils": {
       "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
-      "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
-      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/json-schema": "^7.0.8",
+        "ajv": "^6.12.5",
+        "ajv-keywords": "^3.5.2"
+      },
       "engines": {
-        "node": ">=0.8.x"
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
       }
     },
-    "node_modules/exec-buffer": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/exec-buffer/-/exec-buffer-3.2.0.tgz",
-      "integrity": "sha512-wsiD+2Tp6BWHoVv3B+5Dcx6E7u5zky+hUwOHjuH2hKSLR3dvRmX8fk8UD8uqQixHs4Wk6eDmiegVrMPjKj7wpA==",
-      "dev": true,
-      "optional": true,
+    "node_modules/minimalistic-assert": {
+      "version": "1.0.1",
+      "license": "ISC"
+    },
+    "node_modules/minimatch": {
+      "version": "3.1.2",
+      "license": "ISC",
       "dependencies": {
-        "execa": "^0.7.0",
-        "p-finally": "^1.0.0",
-        "pify": "^3.0.0",
-        "rimraf": "^2.5.4",
-        "tempfile": "^2.0.0"
+        "brace-expansion": "^1.1.7"
       },
       "engines": {
-        "node": ">=4"
+        "node": "*"
       }
     },
-    "node_modules/exec-buffer/node_modules/cross-spawn": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz",
-      "integrity": "sha1-6L0O/uWPz/b4+UUQoKVUu/ojVEk=",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "lru-cache": "^4.0.1",
-        "shebang-command": "^1.2.0",
-        "which": "^1.2.9"
+    "node_modules/minimist": {
+      "version": "1.2.8",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/exec-buffer/node_modules/execa": {
-      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/execa/-/execa-0.7.0.tgz",
-      "integrity": "sha1-lEvs00zEHuMqY6n68nrVpl/Fl3c=",
+    "node_modules/minimist-options": {
+      "version": "4.1.0",
       "dev": true,
-      "optional": true,
+      "license": "MIT",
       "dependencies": {
-        "cross-spawn": "^5.0.1",
-        "get-stream": "^3.0.0",
-        "is-stream": "^1.1.0",
-        "npm-run-path": "^2.0.0",
-        "p-finally": "^1.0.0",
-        "signal-exit": "^3.0.0",
-        "strip-eof": "^1.0.0"
+        "arrify": "^1.0.1",
+        "is-plain-obj": "^1.1.0",
+        "kind-of": "^6.0.3"
       },
       "engines": {
-        "node": ">=4"
+        "node": ">= 6"
       }
     },
-    "node_modules/exec-buffer/node_modules/get-stream": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
-      "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=",
-      "dev": true,
-      "optional": true,
+    "node_modules/mkdirp-classic": {
+      "version": "0.5.3",
+      "license": "MIT"
+    },
+    "node_modules/moment": {
+      "version": "2.30.1",
+      "license": "MIT",
       "engines": {
-        "node": ">=4"
+        "node": "*"
       }
     },
-    "node_modules/exec-buffer/node_modules/lru-cache": {
-      "version": "4.1.5",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz",
-      "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==",
+    "node_modules/moment-shortformat": {
+      "version": "2.1.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      },
+      "peerDependencies": {
+        "moment": "^2.4.0"
+      }
+    },
+    "node_modules/moo-color": {
+      "version": "1.0.3",
       "dev": true,
-      "optional": true,
+      "license": "MIT",
       "dependencies": {
-        "pseudomap": "^1.0.2",
-        "yallist": "^2.1.2"
+        "color-name": "^1.1.4"
       }
     },
-    "node_modules/exec-buffer/node_modules/pify": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
-      "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
-      "dev": true,
-      "optional": true,
+    "node_modules/mrmime": {
+      "version": "2.0.0",
+      "license": "MIT",
       "engines": {
-        "node": ">=4"
+        "node": ">=10"
       }
     },
-    "node_modules/exec-buffer/node_modules/yallist": {
+    "node_modules/ms": {
       "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
-      "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=",
-      "dev": true,
-      "optional": true
-    },
-    "node_modules/exec-sh": {
-      "version": "0.3.4",
-      "resolved": "https://registry.npmjs.org/exec-sh/-/exec-sh-0.3.4.tgz",
-      "integrity": "sha512-sEFIkc61v75sWeOe72qyrqg2Qg0OuLESziUDk/O/z2qgS15y2gWVFrI6f2Qn/qw/0/NCfCEsmNA4zOjkwEZT1A==",
-      "dev": true
+      "license": "MIT"
     },
-    "node_modules/execa": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/execa/-/execa-1.0.0.tgz",
-      "integrity": "sha512-adbxcyWV46qiHyvSp50TKt05tB4tK3HcmF7/nxfAdhnox83seTDbwnaqKO4sXRy7roHAIFqJP/Rw/AuEbX61LA==",
-      "dev": true,
+    "node_modules/multicast-dns": {
+      "version": "7.2.5",
+      "license": "MIT",
       "dependencies": {
-        "cross-spawn": "^6.0.0",
-        "get-stream": "^4.0.0",
-        "is-stream": "^1.1.0",
-        "npm-run-path": "^2.0.0",
-        "p-finally": "^1.0.0",
-        "signal-exit": "^3.0.0",
-        "strip-eof": "^1.0.0"
+        "dns-packet": "^5.2.2",
+        "thunky": "^1.0.2"
       },
-      "engines": {
-        "node": ">=6"
+      "bin": {
+        "multicast-dns": "cli.js"
       }
     },
-    "node_modules/executable": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/executable/-/executable-4.1.1.tgz",
-      "integrity": "sha512-8iA79xD3uAch729dUG8xaaBBFGaEa0wdD2VkYLFHwlqosEj/jT66AzcreRDSgV7ehnNLBW2WR5jIXwGKjVdTLg==",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "pify": "^2.2.0"
+    "node_modules/mute-stream": {
+      "version": "0.0.8",
+      "license": "ISC"
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.7",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
       },
       "engines": {
-        "node": ">=4"
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
-    "node_modules/executable/node_modules/pify": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
-      "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
-      "dev": true,
-      "optional": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
+    "node_modules/napi-build-utils": {
+      "version": "1.0.2",
+      "license": "MIT"
     },
-    "node_modules/exit": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
-      "integrity": "sha1-BjJjj42HfMghB9MKD/8aF8uhzQw=",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.8.0"
-      }
+    "node_modules/natural-compare": {
+      "version": "1.4.0",
+      "license": "MIT"
     },
-    "node_modules/exit-hook": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/exit-hook/-/exit-hook-1.1.1.tgz",
-      "integrity": "sha1-8FyiM7SMBdVP/wd2XfhQfpXAL/g=",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
+    "node_modules/natural-compare-lite": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/natural-compare-lite/-/natural-compare-lite-1.4.0.tgz",
+      "integrity": "sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g=="
     },
-    "node_modules/expand-brackets": {
-      "version": "2.1.4",
-      "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz",
-      "integrity": "sha1-t3c14xXOMPa27/D4OwQVGiJEliI=",
-      "dev": true,
-      "dependencies": {
-        "debug": "^2.3.3",
-        "define-property": "^0.2.5",
-        "extend-shallow": "^2.0.1",
-        "posix-character-classes": "^0.1.0",
-        "regex-not": "^1.0.0",
-        "snapdragon": "^0.8.1",
-        "to-regex": "^3.0.1"
-      },
+    "node_modules/negotiator": {
+      "version": "0.6.3",
+      "license": "MIT",
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">= 0.6"
       }
     },
-    "node_modules/expand-brackets/node_modules/debug": {
-      "version": "2.6.9",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-      "dev": true,
+    "node_modules/neo-async": {
+      "version": "2.6.2",
+      "license": "MIT"
+    },
+    "node_modules/no-case": {
+      "version": "3.0.4",
+      "license": "MIT",
       "dependencies": {
-        "ms": "2.0.0"
+        "lower-case": "^2.0.2",
+        "tslib": "^2.0.3"
       }
     },
-    "node_modules/expand-brackets/node_modules/define-property": {
-      "version": "0.2.5",
-      "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
-      "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
-      "dev": true,
+    "node_modules/node-abi": {
+      "version": "3.65.0",
+      "license": "MIT",
       "dependencies": {
-        "is-descriptor": "^0.1.0"
+        "semver": "^7.3.5"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=10"
       }
     },
-    "node_modules/expand-brackets/node_modules/extend-shallow": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-      "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-      "dev": true,
-      "dependencies": {
-        "is-extendable": "^0.1.0"
+    "node_modules/node-abi/node_modules/semver": {
+      "version": "7.6.3",
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=10"
       }
     },
-    "node_modules/expect": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/expect/-/expect-26.6.2.tgz",
-      "integrity": "sha512-9/hlOBkQl2l/PLHJx6JjoDF6xPKcJEsUlWKb23rKE7KzeDqUZKXKNMW27KIue5JMdBV9HgmoJPcc8HtO85t9IA==",
-      "dev": true,
+    "node_modules/node-addon-api": {
+      "version": "6.1.0",
+      "license": "MIT"
+    },
+    "node_modules/node-fetch": {
+      "version": "2.7.0",
+      "license": "MIT",
       "dependencies": {
-        "@jest/types": "^26.6.2",
-        "ansi-styles": "^4.0.0",
-        "jest-get-type": "^26.3.0",
-        "jest-matcher-utils": "^26.6.2",
-        "jest-message-util": "^26.6.2",
-        "jest-regex-util": "^26.0.0"
+        "whatwg-url": "^5.0.0"
       },
       "engines": {
-        "node": ">= 10.14.2"
-      }
-    },
-    "node_modules/expect/node_modules/@jest/types": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
-      "integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
-      "dev": true,
-      "dependencies": {
-        "@types/istanbul-lib-coverage": "^2.0.0",
-        "@types/istanbul-reports": "^3.0.0",
-        "@types/node": "*",
-        "@types/yargs": "^15.0.0",
-        "chalk": "^4.0.0"
+        "node": "4.x || >=6.0.0"
       },
-      "engines": {
-        "node": ">= 10.14.2"
+      "peerDependencies": {
+        "encoding": "^0.1.0"
+      },
+      "peerDependenciesMeta": {
+        "encoding": {
+          "optional": true
+        }
       }
     },
-    "node_modules/expect/node_modules/@types/istanbul-reports": {
+    "node_modules/node-fetch/node_modules/tr46": {
+      "version": "0.0.3",
+      "license": "MIT"
+    },
+    "node_modules/node-fetch/node_modules/webidl-conversions": {
       "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz",
-      "integrity": "sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==",
-      "dev": true,
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/node-fetch/node_modules/whatwg-url": {
+      "version": "5.0.0",
+      "license": "MIT",
       "dependencies": {
-        "@types/istanbul-lib-report": "*"
+        "tr46": "~0.0.3",
+        "webidl-conversions": "^3.0.0"
       }
     },
-    "node_modules/expect/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"
-      },
+    "node_modules/node-forge": {
+      "version": "1.3.1",
+      "license": "(BSD-3-Clause OR GPL-2.0)",
       "engines": {
-        "node": ">=8"
+        "node": ">= 6.13.0"
       }
     },
-    "node_modules/expect/node_modules/chalk": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
-      "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
+    "node_modules/node-int64": {
+      "version": "0.4.0",
+      "license": "MIT"
+    },
+    "node_modules/node-releases": {
+      "version": "2.0.18",
+      "license": "MIT"
+    },
+    "node_modules/normalize-package-data": {
+      "version": "3.0.3",
       "dev": true,
+      "license": "BSD-2-Clause",
       "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
+        "hosted-git-info": "^4.0.1",
+        "is-core-module": "^2.5.0",
+        "semver": "^7.3.4",
+        "validate-npm-package-license": "^3.0.1"
       },
       "engines": {
         "node": ">=10"
       }
     },
-    "node_modules/expect/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==",
+    "node_modules/normalize-package-data/node_modules/semver": {
+      "version": "7.6.3",
       "dev": true,
-      "dependencies": {
-        "color-name": "~1.1.4"
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
       },
       "engines": {
-        "node": ">=7.0.0"
+        "node": ">=10"
       }
     },
-    "node_modules/expect/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/normalize-path": {
+      "version": "3.0.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
     },
-    "node_modules/expect/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,
+    "node_modules/normalize-range": {
+      "version": "0.1.2",
+      "license": "MIT",
       "engines": {
-        "node": ">=8"
+        "node": ">=0.10.0"
       }
     },
-    "node_modules/expect/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,
+    "node_modules/npm": {
+      "version": "10.8.3",
+      "resolved": "https://registry.npmjs.org/npm/-/npm-10.8.3.tgz",
+      "integrity": "sha512-0IQlyAYvVtQ7uOhDFYZCGK8kkut2nh8cpAdA9E6FvRSJaTgtZRZgNjlC5ZCct//L73ygrpY93CxXpRJDtNqPVg==",
+      "bundleDependencies": [
+        "@isaacs/string-locale-compare",
+        "@npmcli/arborist",
+        "@npmcli/config",
+        "@npmcli/fs",
+        "@npmcli/map-workspaces",
+        "@npmcli/package-json",
+        "@npmcli/promise-spawn",
+        "@npmcli/redact",
+        "@npmcli/run-script",
+        "@sigstore/tuf",
+        "abbrev",
+        "archy",
+        "cacache",
+        "chalk",
+        "ci-info",
+        "cli-columns",
+        "fastest-levenshtein",
+        "fs-minipass",
+        "glob",
+        "graceful-fs",
+        "hosted-git-info",
+        "ini",
+        "init-package-json",
+        "is-cidr",
+        "json-parse-even-better-errors",
+        "libnpmaccess",
+        "libnpmdiff",
+        "libnpmexec",
+        "libnpmfund",
+        "libnpmhook",
+        "libnpmorg",
+        "libnpmpack",
+        "libnpmpublish",
+        "libnpmsearch",
+        "libnpmteam",
+        "libnpmversion",
+        "make-fetch-happen",
+        "minimatch",
+        "minipass",
+        "minipass-pipeline",
+        "ms",
+        "node-gyp",
+        "nopt",
+        "normalize-package-data",
+        "npm-audit-report",
+        "npm-install-checks",
+        "npm-package-arg",
+        "npm-pick-manifest",
+        "npm-profile",
+        "npm-registry-fetch",
+        "npm-user-validate",
+        "p-map",
+        "pacote",
+        "parse-conflict-json",
+        "proc-log",
+        "qrcode-terminal",
+        "read",
+        "semver",
+        "spdx-expression-parse",
+        "ssri",
+        "supports-color",
+        "tar",
+        "text-table",
+        "tiny-relative-date",
+        "treeverse",
+        "validate-npm-package-name",
+        "which",
+        "write-file-atomic"
+      ],
+      "license": "Artistic-2.0",
+      "workspaces": [
+        "docs",
+        "smoke-tests",
+        "mock-globals",
+        "mock-registry",
+        "workspaces/*"
+      ],
       "dependencies": {
-        "has-flag": "^4.0.0"
+        "@isaacs/string-locale-compare": "^1.1.0",
+        "@npmcli/arborist": "^7.5.4",
+        "@npmcli/config": "^8.3.4",
+        "@npmcli/fs": "^3.1.1",
+        "@npmcli/map-workspaces": "^3.0.6",
+        "@npmcli/package-json": "^5.2.0",
+        "@npmcli/promise-spawn": "^7.0.2",
+        "@npmcli/redact": "^2.0.1",
+        "@npmcli/run-script": "^8.1.0",
+        "@sigstore/tuf": "^2.3.4",
+        "abbrev": "^2.0.0",
+        "archy": "~1.0.0",
+        "cacache": "^18.0.4",
+        "chalk": "^5.3.0",
+        "ci-info": "^4.0.0",
+        "cli-columns": "^4.0.0",
+        "fastest-levenshtein": "^1.0.16",
+        "fs-minipass": "^3.0.3",
+        "glob": "^10.4.5",
+        "graceful-fs": "^4.2.11",
+        "hosted-git-info": "^7.0.2",
+        "ini": "^4.1.3",
+        "init-package-json": "^6.0.3",
+        "is-cidr": "^5.1.0",
+        "json-parse-even-better-errors": "^3.0.2",
+        "libnpmaccess": "^8.0.6",
+        "libnpmdiff": "^6.1.4",
+        "libnpmexec": "^8.1.4",
+        "libnpmfund": "^5.0.12",
+        "libnpmhook": "^10.0.5",
+        "libnpmorg": "^6.0.6",
+        "libnpmpack": "^7.0.4",
+        "libnpmpublish": "^9.0.9",
+        "libnpmsearch": "^7.0.6",
+        "libnpmteam": "^6.0.5",
+        "libnpmversion": "^6.0.3",
+        "make-fetch-happen": "^13.0.1",
+        "minimatch": "^9.0.5",
+        "minipass": "^7.1.1",
+        "minipass-pipeline": "^1.2.4",
+        "ms": "^2.1.2",
+        "node-gyp": "^10.2.0",
+        "nopt": "^7.2.1",
+        "normalize-package-data": "^6.0.2",
+        "npm-audit-report": "^5.0.0",
+        "npm-install-checks": "^6.3.0",
+        "npm-package-arg": "^11.0.3",
+        "npm-pick-manifest": "^9.1.0",
+        "npm-profile": "^10.0.0",
+        "npm-registry-fetch": "^17.1.0",
+        "npm-user-validate": "^2.0.1",
+        "p-map": "^4.0.0",
+        "pacote": "^18.0.6",
+        "parse-conflict-json": "^3.0.1",
+        "proc-log": "^4.2.0",
+        "qrcode-terminal": "^0.12.0",
+        "read": "^3.0.1",
+        "semver": "^7.6.3",
+        "spdx-expression-parse": "^4.0.0",
+        "ssri": "^10.0.6",
+        "supports-color": "^9.4.0",
+        "tar": "^6.2.1",
+        "text-table": "~0.2.0",
+        "tiny-relative-date": "^1.3.0",
+        "treeverse": "^3.0.0",
+        "validate-npm-package-name": "^5.0.1",
+        "which": "^4.0.0",
+        "write-file-atomic": "^5.0.1"
+      },
+      "bin": {
+        "npm": "bin/npm-cli.js",
+        "npx": "bin/npx-cli.js"
       },
       "engines": {
-        "node": ">=8"
+        "node": "^18.17.0 || >=20.5.0"
       }
     },
-    "node_modules/express": {
-      "version": "4.17.1",
-      "resolved": "https://registry.npmjs.org/express/-/express-4.17.1.tgz",
-      "integrity": "sha512-mHJ9O79RqluphRrcw2X/GTh3k9tVv8YcoyY4Kkh4WDMUYKRZUq0h1o0w2rrrxBqM7VoeUVqgb27xlEMXTnYt4g==",
-      "dev": true,
+    "node_modules/npm-run-path": {
+      "version": "4.0.1",
+      "license": "MIT",
       "dependencies": {
-        "accepts": "~1.3.7",
-        "array-flatten": "1.1.1",
-        "body-parser": "1.19.0",
-        "content-disposition": "0.5.3",
-        "content-type": "~1.0.4",
-        "cookie": "0.4.0",
-        "cookie-signature": "1.0.6",
-        "debug": "2.6.9",
-        "depd": "~1.1.2",
-        "encodeurl": "~1.0.2",
-        "escape-html": "~1.0.3",
-        "etag": "~1.8.1",
-        "finalhandler": "~1.1.2",
-        "fresh": "0.5.2",
-        "merge-descriptors": "1.0.1",
-        "methods": "~1.1.2",
-        "on-finished": "~2.3.0",
-        "parseurl": "~1.3.3",
-        "path-to-regexp": "0.1.7",
-        "proxy-addr": "~2.0.5",
-        "qs": "6.7.0",
-        "range-parser": "~1.2.1",
-        "safe-buffer": "5.1.2",
-        "send": "0.17.1",
-        "serve-static": "1.14.1",
-        "setprototypeof": "1.1.1",
-        "statuses": "~1.5.0",
-        "type-is": "~1.6.18",
-        "utils-merge": "1.0.1",
-        "vary": "~1.1.2"
+        "path-key": "^3.0.0"
       },
       "engines": {
-        "node": ">= 0.10.0"
+        "node": ">=8"
       }
     },
-    "node_modules/express/node_modules/cookie": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.0.tgz",
-      "integrity": "sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg==",
-      "dev": true,
+    "node_modules/npm/node_modules/@isaacs/cliui": {
+      "version": "8.0.2",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^5.1.2",
+        "string-width-cjs": "npm:string-width@^4.2.0",
+        "strip-ansi": "^7.0.1",
+        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
+        "wrap-ansi": "^8.1.0",
+        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
+      },
       "engines": {
-        "node": ">= 0.6"
+        "node": ">=12"
       }
     },
-    "node_modules/express/node_modules/debug": {
-      "version": "2.6.9",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-      "dev": true,
-      "dependencies": {
-        "ms": "2.0.0"
+    "node_modules/npm/node_modules/@isaacs/cliui/node_modules/ansi-regex": {
+      "version": "6.0.1",
+      "inBundle": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
       }
     },
-    "node_modules/express/node_modules/path-to-regexp": {
-      "version": "0.1.7",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
-      "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=",
-      "dev": true
+    "node_modules/npm/node_modules/@isaacs/cliui/node_modules/emoji-regex": {
+      "version": "9.2.2",
+      "inBundle": true,
+      "license": "MIT"
     },
-    "node_modules/express/node_modules/qs": {
-      "version": "6.7.0",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz",
-      "integrity": "sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ==",
-      "dev": true,
+    "node_modules/npm/node_modules/@isaacs/cliui/node_modules/string-width": {
+      "version": "5.1.2",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "eastasianwidth": "^0.2.0",
+        "emoji-regex": "^9.2.2",
+        "strip-ansi": "^7.0.1"
+      },
       "engines": {
-        "node": ">=0.6"
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/ext-list": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/ext-list/-/ext-list-2.2.2.tgz",
-      "integrity": "sha512-u+SQgsubraE6zItfVA0tBuCBhfU9ogSRnsvygI7wht9TS510oLkBRXBsqopeUG/GBOIQyKZO9wjTqIu/sf5zFA==",
-      "dev": true,
-      "optional": true,
+    "node_modules/npm/node_modules/@isaacs/cliui/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "inBundle": true,
+      "license": "MIT",
       "dependencies": {
-        "mime-db": "^1.28.0"
+        "ansi-regex": "^6.0.1"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
       }
     },
-    "node_modules/ext-name": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/ext-name/-/ext-name-5.0.0.tgz",
-      "integrity": "sha512-yblEwXAbGv1VQDmow7s38W77hzAgJAO50ztBLMcUyUBfxv1HC+LGwtiEN+Co6LtlqT/5uwVOxsD4TNIilWhwdQ==",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "ext-list": "^2.0.0",
-        "sort-keys-length": "^1.0.0"
+    "node_modules/npm/node_modules/@isaacs/string-locale-compare": {
+      "version": "1.1.0",
+      "inBundle": true,
+      "license": "ISC"
+    },
+    "node_modules/npm/node_modules/@npmcli/agent": {
+      "version": "2.2.2",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "agent-base": "^7.1.0",
+        "http-proxy-agent": "^7.0.0",
+        "https-proxy-agent": "^7.0.1",
+        "lru-cache": "^10.0.1",
+        "socks-proxy-agent": "^8.0.3"
+      },
+      "engines": {
+        "node": "^16.14.0 || >=18.0.0"
+      }
+    },
+    "node_modules/npm/node_modules/@npmcli/arborist": {
+      "version": "7.5.4",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "@isaacs/string-locale-compare": "^1.1.0",
+        "@npmcli/fs": "^3.1.1",
+        "@npmcli/installed-package-contents": "^2.1.0",
+        "@npmcli/map-workspaces": "^3.0.2",
+        "@npmcli/metavuln-calculator": "^7.1.1",
+        "@npmcli/name-from-folder": "^2.0.0",
+        "@npmcli/node-gyp": "^3.0.0",
+        "@npmcli/package-json": "^5.1.0",
+        "@npmcli/query": "^3.1.0",
+        "@npmcli/redact": "^2.0.0",
+        "@npmcli/run-script": "^8.1.0",
+        "bin-links": "^4.0.4",
+        "cacache": "^18.0.3",
+        "common-ancestor-path": "^1.0.1",
+        "hosted-git-info": "^7.0.2",
+        "json-parse-even-better-errors": "^3.0.2",
+        "json-stringify-nice": "^1.1.4",
+        "lru-cache": "^10.2.2",
+        "minimatch": "^9.0.4",
+        "nopt": "^7.2.1",
+        "npm-install-checks": "^6.2.0",
+        "npm-package-arg": "^11.0.2",
+        "npm-pick-manifest": "^9.0.1",
+        "npm-registry-fetch": "^17.0.1",
+        "pacote": "^18.0.6",
+        "parse-conflict-json": "^3.0.0",
+        "proc-log": "^4.2.0",
+        "proggy": "^2.0.0",
+        "promise-all-reject-late": "^1.0.0",
+        "promise-call-limit": "^3.0.1",
+        "read-package-json-fast": "^3.0.2",
+        "semver": "^7.3.7",
+        "ssri": "^10.0.6",
+        "treeverse": "^3.0.0",
+        "walk-up-path": "^3.0.1"
+      },
+      "bin": {
+        "arborist": "bin/index.js"
       },
       "engines": {
-        "node": ">=4"
+        "node": "^16.14.0 || >=18.0.0"
       }
     },
-    "node_modules/extend": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
-      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
-      "dev": true
-    },
-    "node_modules/extend-shallow": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
-      "integrity": "sha1-Jqcarwc7OfshJxcnRhMcJwQCjbg=",
-      "dev": true,
+    "node_modules/npm/node_modules/@npmcli/config": {
+      "version": "8.3.4",
+      "inBundle": true,
+      "license": "ISC",
       "dependencies": {
-        "assign-symbols": "^1.0.0",
-        "is-extendable": "^1.0.1"
+        "@npmcli/map-workspaces": "^3.0.2",
+        "@npmcli/package-json": "^5.1.1",
+        "ci-info": "^4.0.0",
+        "ini": "^4.1.2",
+        "nopt": "^7.2.1",
+        "proc-log": "^4.2.0",
+        "semver": "^7.3.5",
+        "walk-up-path": "^3.0.1"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": "^16.14.0 || >=18.0.0"
       }
     },
-    "node_modules/extend-shallow/node_modules/is-extendable": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
-      "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
-      "dev": true,
+    "node_modules/npm/node_modules/@npmcli/fs": {
+      "version": "3.1.1",
+      "inBundle": true,
+      "license": "ISC",
       "dependencies": {
-        "is-plain-object": "^2.0.4"
+        "semver": "^7.3.5"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
       }
     },
-    "node_modules/external-editor": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/external-editor/-/external-editor-3.1.0.tgz",
-      "integrity": "sha512-hMQ4CX1p1izmuLYyZqLMO/qGNw10wSv9QDCPfzXfyFrOaCSSoRfqE1Kf1s5an66J5JZC62NewG+mK49jOCtQew==",
-      "dev": true,
+    "node_modules/npm/node_modules/@npmcli/git": {
+      "version": "5.0.8",
+      "inBundle": true,
+      "license": "ISC",
       "dependencies": {
-        "chardet": "^0.7.0",
-        "iconv-lite": "^0.4.24",
-        "tmp": "^0.0.33"
+        "@npmcli/promise-spawn": "^7.0.0",
+        "ini": "^4.1.3",
+        "lru-cache": "^10.0.1",
+        "npm-pick-manifest": "^9.0.0",
+        "proc-log": "^4.0.0",
+        "promise-inflight": "^1.0.1",
+        "promise-retry": "^2.0.1",
+        "semver": "^7.3.5",
+        "which": "^4.0.0"
       },
       "engines": {
-        "node": ">=4"
+        "node": "^16.14.0 || >=18.0.0"
       }
     },
-    "node_modules/extglob": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/extglob/-/extglob-2.0.4.tgz",
-      "integrity": "sha512-Nmb6QXkELsuBr24CJSkilo6UHHgbekK5UiZgfE6UHD3Eb27YC6oD+bhcT+tJ6cl8dmsgdQxnWlcry8ksBIBLpw==",
-      "dev": true,
+    "node_modules/npm/node_modules/@npmcli/installed-package-contents": {
+      "version": "2.1.0",
+      "inBundle": true,
+      "license": "ISC",
       "dependencies": {
-        "array-unique": "^0.3.2",
-        "define-property": "^1.0.0",
-        "expand-brackets": "^2.1.4",
-        "extend-shallow": "^2.0.1",
-        "fragment-cache": "^0.2.1",
-        "regex-not": "^1.0.0",
-        "snapdragon": "^0.8.1",
-        "to-regex": "^3.0.1"
+        "npm-bundled": "^3.0.0",
+        "npm-normalize-package-bin": "^3.0.0"
+      },
+      "bin": {
+        "installed-package-contents": "bin/index.js"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
       }
     },
-    "node_modules/extglob/node_modules/define-property": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
-      "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=",
-      "dev": true,
+    "node_modules/npm/node_modules/@npmcli/map-workspaces": {
+      "version": "3.0.6",
+      "inBundle": true,
+      "license": "ISC",
       "dependencies": {
-        "is-descriptor": "^1.0.0"
+        "@npmcli/name-from-folder": "^2.0.0",
+        "glob": "^10.2.2",
+        "minimatch": "^9.0.0",
+        "read-package-json-fast": "^3.0.0"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
       }
     },
-    "node_modules/extglob/node_modules/extend-shallow": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-      "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-      "dev": true,
+    "node_modules/npm/node_modules/@npmcli/metavuln-calculator": {
+      "version": "7.1.1",
+      "inBundle": true,
+      "license": "ISC",
       "dependencies": {
-        "is-extendable": "^0.1.0"
+        "cacache": "^18.0.0",
+        "json-parse-even-better-errors": "^3.0.0",
+        "pacote": "^18.0.0",
+        "proc-log": "^4.1.0",
+        "semver": "^7.3.5"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": "^16.14.0 || >=18.0.0"
       }
     },
-    "node_modules/extglob/node_modules/is-accessor-descriptor": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
-      "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==",
-      "dev": true,
+    "node_modules/npm/node_modules/@npmcli/name-from-folder": {
+      "version": "2.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+      }
+    },
+    "node_modules/npm/node_modules/@npmcli/node-gyp": {
+      "version": "3.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+      }
+    },
+    "node_modules/npm/node_modules/@npmcli/package-json": {
+      "version": "5.2.0",
+      "inBundle": true,
+      "license": "ISC",
       "dependencies": {
-        "kind-of": "^6.0.0"
+        "@npmcli/git": "^5.0.0",
+        "glob": "^10.2.2",
+        "hosted-git-info": "^7.0.0",
+        "json-parse-even-better-errors": "^3.0.0",
+        "normalize-package-data": "^6.0.0",
+        "proc-log": "^4.0.0",
+        "semver": "^7.5.3"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": "^16.14.0 || >=18.0.0"
       }
     },
-    "node_modules/extglob/node_modules/is-data-descriptor": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz",
-      "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==",
-      "dev": true,
+    "node_modules/npm/node_modules/@npmcli/promise-spawn": {
+      "version": "7.0.2",
+      "inBundle": true,
+      "license": "ISC",
       "dependencies": {
-        "kind-of": "^6.0.0"
+        "which": "^4.0.0"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": "^16.14.0 || >=18.0.0"
       }
     },
-    "node_modules/extglob/node_modules/is-descriptor": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz",
-      "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==",
-      "dev": true,
+    "node_modules/npm/node_modules/@npmcli/query": {
+      "version": "3.1.0",
+      "inBundle": true,
+      "license": "ISC",
       "dependencies": {
-        "is-accessor-descriptor": "^1.0.0",
-        "is-data-descriptor": "^1.0.0",
-        "kind-of": "^6.0.2"
+        "postcss-selector-parser": "^6.0.10"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
       }
     },
-    "node_modules/extsprintf": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz",
-      "integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU=",
-      "dev": true,
-      "engines": [
-        "node >=0.6.0"
-      ]
+    "node_modules/npm/node_modules/@npmcli/redact": {
+      "version": "2.0.1",
+      "inBundle": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^16.14.0 || >=18.0.0"
+      }
     },
-    "node_modules/eyes": {
-      "version": "0.1.8",
-      "resolved": "https://registry.npmjs.org/eyes/-/eyes-0.1.8.tgz",
-      "integrity": "sha1-Ys8SAjTGg3hdkCNIqADvPgzCC8A=",
-      "dev": true,
+    "node_modules/npm/node_modules/@npmcli/run-script": {
+      "version": "8.1.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "@npmcli/node-gyp": "^3.0.0",
+        "@npmcli/package-json": "^5.0.0",
+        "@npmcli/promise-spawn": "^7.0.0",
+        "node-gyp": "^10.0.0",
+        "proc-log": "^4.0.0",
+        "which": "^4.0.0"
+      },
       "engines": {
-        "node": "> 0.1.90"
+        "node": "^16.14.0 || >=18.0.0"
       }
     },
-    "node_modules/fast-deep-equal": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-      "dev": true
+    "node_modules/npm/node_modules/@pkgjs/parseargs": {
+      "version": "0.11.0",
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=14"
+      }
     },
-    "node_modules/fast-glob": {
-      "version": "3.2.6",
-      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.6.tgz",
-      "integrity": "sha512-GnLuqj/pvQ7pX8/L4J84nijv6sAnlwvSDpMkJi9i7nPmPxGtRPkBSStfvDW5l6nMdX9VWe+pkKWFTgD+vF2QSQ==",
-      "dev": true,
+    "node_modules/npm/node_modules/@sigstore/bundle": {
+      "version": "2.3.2",
+      "inBundle": true,
+      "license": "Apache-2.0",
       "dependencies": {
-        "@nodelib/fs.stat": "^2.0.2",
-        "@nodelib/fs.walk": "^1.2.3",
-        "glob-parent": "^5.1.2",
-        "merge2": "^1.3.0",
-        "micromatch": "^4.0.4"
+        "@sigstore/protobuf-specs": "^0.3.2"
       },
       "engines": {
-        "node": ">=8"
+        "node": "^16.14.0 || >=18.0.0"
       }
     },
-    "node_modules/fast-glob/node_modules/braces": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-      "dev": true,
+    "node_modules/npm/node_modules/@sigstore/core": {
+      "version": "1.1.0",
+      "inBundle": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^16.14.0 || >=18.0.0"
+      }
+    },
+    "node_modules/npm/node_modules/@sigstore/protobuf-specs": {
+      "version": "0.3.2",
+      "inBundle": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^16.14.0 || >=18.0.0"
+      }
+    },
+    "node_modules/npm/node_modules/@sigstore/sign": {
+      "version": "2.3.2",
+      "inBundle": true,
+      "license": "Apache-2.0",
       "dependencies": {
-        "fill-range": "^7.0.1"
+        "@sigstore/bundle": "^2.3.2",
+        "@sigstore/core": "^1.0.0",
+        "@sigstore/protobuf-specs": "^0.3.2",
+        "make-fetch-happen": "^13.0.1",
+        "proc-log": "^4.2.0",
+        "promise-retry": "^2.0.1"
       },
       "engines": {
-        "node": ">=8"
+        "node": "^16.14.0 || >=18.0.0"
       }
     },
-    "node_modules/fast-glob/node_modules/fill-range": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-      "dev": true,
+    "node_modules/npm/node_modules/@sigstore/tuf": {
+      "version": "2.3.4",
+      "inBundle": true,
+      "license": "Apache-2.0",
       "dependencies": {
-        "to-regex-range": "^5.0.1"
+        "@sigstore/protobuf-specs": "^0.3.2",
+        "tuf-js": "^2.2.1"
       },
       "engines": {
-        "node": ">=8"
+        "node": "^16.14.0 || >=18.0.0"
       }
     },
-    "node_modules/fast-glob/node_modules/glob-parent": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
+    "node_modules/npm/node_modules/@sigstore/verify": {
+      "version": "1.2.1",
+      "inBundle": true,
+      "license": "Apache-2.0",
       "dependencies": {
-        "is-glob": "^4.0.1"
+        "@sigstore/bundle": "^2.3.2",
+        "@sigstore/core": "^1.1.0",
+        "@sigstore/protobuf-specs": "^0.3.2"
       },
       "engines": {
-        "node": ">= 6"
+        "node": "^16.14.0 || >=18.0.0"
       }
     },
-    "node_modules/fast-glob/node_modules/is-number": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "dev": true,
+    "node_modules/npm/node_modules/@tufjs/canonical-json": {
+      "version": "2.0.0",
+      "inBundle": true,
+      "license": "MIT",
       "engines": {
-        "node": ">=0.12.0"
+        "node": "^16.14.0 || >=18.0.0"
       }
     },
-    "node_modules/fast-glob/node_modules/micromatch": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz",
-      "integrity": "sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==",
-      "dev": true,
+    "node_modules/npm/node_modules/@tufjs/models": {
+      "version": "2.0.1",
+      "inBundle": true,
+      "license": "MIT",
       "dependencies": {
-        "braces": "^3.0.1",
-        "picomatch": "^2.2.3"
+        "@tufjs/canonical-json": "2.0.0",
+        "minimatch": "^9.0.4"
       },
       "engines": {
-        "node": ">=8.6"
+        "node": "^16.14.0 || >=18.0.0"
       }
     },
-    "node_modules/fast-glob/node_modules/to-regex-range": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dev": true,
+    "node_modules/npm/node_modules/abbrev": {
+      "version": "2.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+      }
+    },
+    "node_modules/npm/node_modules/agent-base": {
+      "version": "7.1.1",
+      "inBundle": true,
+      "license": "MIT",
       "dependencies": {
-        "is-number": "^7.0.0"
+        "debug": "^4.3.4"
       },
       "engines": {
-        "node": ">=8.0"
+        "node": ">= 14"
       }
     },
-    "node_modules/fast-json-stable-stringify": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
-      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
-      "dev": true
+    "node_modules/npm/node_modules/aggregate-error": {
+      "version": "3.1.0",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "clean-stack": "^2.0.0",
+        "indent-string": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
     },
-    "node_modules/fast-levenshtein": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
-      "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=",
-      "dev": true
+    "node_modules/npm/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "inBundle": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
     },
-    "node_modules/fast-xml-parser": {
-      "version": "3.19.0",
-      "resolved": "https://registry.npmjs.org/fast-xml-parser/-/fast-xml-parser-3.19.0.tgz",
-      "integrity": "sha512-4pXwmBplsCPv8FOY1WRakF970TjNGnGnfbOnLqjlYvMiF1SR3yOHyxMR/YCXpPTOspNF5gwudqktIP4VsWkvBg==",
-      "dev": true,
-      "optional": true,
-      "bin": {
-        "xml2js": "cli.js"
+    "node_modules/npm/node_modules/ansi-styles": {
+      "version": "6.2.1",
+      "inBundle": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/fastest-levenshtein": {
-      "version": "1.0.12",
-      "resolved": "https://registry.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.12.tgz",
-      "integrity": "sha512-On2N+BpYJ15xIC974QNVuYGMOlEVt4s0EOI3wwMqOmK1fdDY+FN/zltPV8vosq4ad4c/gJ1KHScUn/6AWIgiow==",
-      "dev": true
+    "node_modules/npm/node_modules/aproba": {
+      "version": "2.0.0",
+      "inBundle": true,
+      "license": "ISC"
     },
-    "node_modules/fastq": {
-      "version": "1.11.1",
-      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.11.1.tgz",
-      "integrity": "sha512-HOnr8Mc60eNYl1gzwp6r5RoUyAn5/glBolUzP/Ez6IFVPMPirxn/9phgL6zhOtaTy7ISwPvQ+wT+hfcRZh/bzw==",
-      "dev": true,
-      "dependencies": {
-        "reusify": "^1.0.4"
-      }
+    "node_modules/npm/node_modules/archy": {
+      "version": "1.0.0",
+      "inBundle": true,
+      "license": "MIT"
     },
-    "node_modules/faye-websocket": {
-      "version": "0.11.4",
-      "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.4.tgz",
-      "integrity": "sha512-CzbClwlXAuiRQAlUyfqPgvPoNKTckTPGfwZV4ZdAhVcP2lh9KUxJg2b5GkE7XbjKQ3YJnQ9z6D9ntLAlB+tP8g==",
-      "dev": true,
+    "node_modules/npm/node_modules/balanced-match": {
+      "version": "1.0.2",
+      "inBundle": true,
+      "license": "MIT"
+    },
+    "node_modules/npm/node_modules/bin-links": {
+      "version": "4.0.4",
+      "inBundle": true,
+      "license": "ISC",
       "dependencies": {
-        "websocket-driver": ">=0.5.1"
+        "cmd-shim": "^6.0.0",
+        "npm-normalize-package-bin": "^3.0.0",
+        "read-cmd-shim": "^4.0.0",
+        "write-file-atomic": "^5.0.0"
       },
       "engines": {
-        "node": ">=0.8.0"
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
       }
     },
-    "node_modules/fb-watchman": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/fb-watchman/-/fb-watchman-2.0.1.tgz",
-      "integrity": "sha512-DkPJKQeY6kKwmuMretBhr7G6Vodr7bFwDYTXIkfG1gjvNpaxBTQV3PbXg6bR1c1UP4jPOX0jHUbbHANL9vRjVg==",
-      "dev": true,
-      "dependencies": {
-        "bser": "2.1.1"
+    "node_modules/npm/node_modules/binary-extensions": {
+      "version": "2.3.0",
+      "inBundle": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/fd-slicer": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz",
-      "integrity": "sha1-JcfInLH5B3+IkbvmHY85Dq4lbx4=",
-      "dev": true,
-      "optional": true,
+    "node_modules/npm/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "inBundle": true,
+      "license": "MIT",
       "dependencies": {
-        "pend": "~1.2.0"
+        "balanced-match": "^1.0.0"
       }
     },
-    "node_modules/figures": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/figures/-/figures-3.2.0.tgz",
-      "integrity": "sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==",
-      "dev": true,
+    "node_modules/npm/node_modules/cacache": {
+      "version": "18.0.4",
+      "inBundle": true,
+      "license": "ISC",
       "dependencies": {
-        "escape-string-regexp": "^1.0.5"
+        "@npmcli/fs": "^3.1.0",
+        "fs-minipass": "^3.0.0",
+        "glob": "^10.2.2",
+        "lru-cache": "^10.0.1",
+        "minipass": "^7.0.3",
+        "minipass-collect": "^2.0.1",
+        "minipass-flush": "^1.0.5",
+        "minipass-pipeline": "^1.2.4",
+        "p-map": "^4.0.0",
+        "ssri": "^10.0.0",
+        "tar": "^6.1.11",
+        "unique-filename": "^3.0.0"
       },
       "engines": {
-        "node": ">=8"
+        "node": "^16.14.0 || >=18.0.0"
       }
     },
-    "node_modules/file-entry-cache": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-5.0.1.tgz",
-      "integrity": "sha512-bCg29ictuBaKUwwArK4ouCaqDgLZcysCFLmM/Yn/FDoqndh/9vNuQfXRDvTuXKLxfD/JtZQGKFT8MGcJBK644g==",
-      "dev": true,
-      "dependencies": {
-        "flat-cache": "^2.0.1"
-      },
+    "node_modules/npm/node_modules/chalk": {
+      "version": "5.3.0",
+      "inBundle": true,
+      "license": "MIT",
       "engines": {
-        "node": ">=4"
+        "node": "^12.17.0 || ^14.13 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
-    "node_modules/file-loader": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-6.2.0.tgz",
-      "integrity": "sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==",
-      "dev": true,
-      "dependencies": {
-        "loader-utils": "^2.0.0",
-        "schema-utils": "^3.0.0"
-      },
+    "node_modules/npm/node_modules/chownr": {
+      "version": "2.0.0",
+      "inBundle": true,
+      "license": "ISC",
       "engines": {
-        "node": ">= 10.13.0"
+        "node": ">=10"
       }
     },
-    "node_modules/file-loader/node_modules/ajv": {
-      "version": "6.12.6",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-      "dev": true,
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "fast-json-stable-stringify": "^2.0.0",
-        "json-schema-traverse": "^0.4.1",
-        "uri-js": "^4.2.2"
+    "node_modules/npm/node_modules/ci-info": {
+      "version": "4.0.0",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/sibiraj-s"
+        }
+      ],
+      "inBundle": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
       }
     },
-    "node_modules/file-loader/node_modules/schema-utils": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.0.tgz",
-      "integrity": "sha512-tTEaeYkyIhEZ9uWgAjDerWov3T9MgX8dhhy2r0IGeeX4W8ngtGl1++dUve/RUqzuaASSh7shwCDJjEzthxki8w==",
-      "dev": true,
+    "node_modules/npm/node_modules/cidr-regex": {
+      "version": "4.1.1",
+      "inBundle": true,
+      "license": "BSD-2-Clause",
       "dependencies": {
-        "@types/json-schema": "^7.0.7",
-        "ajv": "^6.12.5",
-        "ajv-keywords": "^3.5.2"
+        "ip-regex": "^5.0.0"
       },
       "engines": {
-        "node": ">= 10.13.0"
+        "node": ">=14"
       }
     },
-    "node_modules/file-type": {
-      "version": "12.4.2",
-      "resolved": "https://registry.npmjs.org/file-type/-/file-type-12.4.2.tgz",
-      "integrity": "sha512-UssQP5ZgIOKelfsaB5CuGAL+Y+q7EmONuiwF3N5HAH0t27rvrttgi6Ra9k/+DVaY9UF6+ybxu5pOXLUdA8N7Vg==",
-      "dev": true,
+    "node_modules/npm/node_modules/clean-stack": {
+      "version": "2.2.0",
+      "inBundle": true,
+      "license": "MIT",
       "engines": {
-        "node": ">=8"
+        "node": ">=6"
       }
     },
-    "node_modules/file-uri-to-path": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
-      "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
-      "dev": true,
-      "optional": true
+    "node_modules/npm/node_modules/cli-columns": {
+      "version": "4.0.0",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "string-width": "^4.2.3",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
     },
-    "node_modules/filename-reserved-regex": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/filename-reserved-regex/-/filename-reserved-regex-2.0.0.tgz",
-      "integrity": "sha1-q/c9+rc10EVECr/qLZHzieu/oik=",
-      "dev": true,
-      "optional": true,
+    "node_modules/npm/node_modules/cmd-shim": {
+      "version": "6.0.3",
+      "inBundle": true,
+      "license": "ISC",
       "engines": {
-        "node": ">=4"
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
       }
     },
-    "node_modules/filenamify": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/filenamify/-/filenamify-2.1.0.tgz",
-      "integrity": "sha512-ICw7NTT6RsDp2rnYKVd8Fu4cr6ITzGy3+u4vUujPkabyaz+03F24NWEX7fs5fp+kBonlaqPH8fAO2NM+SXt/JA==",
-      "dev": true,
-      "optional": true,
+    "node_modules/npm/node_modules/color-convert": {
+      "version": "2.0.1",
+      "inBundle": true,
+      "license": "MIT",
       "dependencies": {
-        "filename-reserved-regex": "^2.0.0",
-        "strip-outer": "^1.0.0",
-        "trim-repeated": "^1.0.0"
+        "color-name": "~1.1.4"
       },
       "engines": {
-        "node": ">=4"
+        "node": ">=7.0.0"
       }
     },
-    "node_modules/filesize": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/filesize/-/filesize-6.1.0.tgz",
-      "integrity": "sha512-LpCHtPQ3sFx67z+uh2HnSyWSLLu5Jxo21795uRDuar/EOuYWXib5EmPaGIBuSnRqH2IODiKA2k5re/K9OnN/Yg==",
-      "dev": true,
+    "node_modules/npm/node_modules/color-name": {
+      "version": "1.1.4",
+      "inBundle": true,
+      "license": "MIT"
+    },
+    "node_modules/npm/node_modules/common-ancestor-path": {
+      "version": "1.0.1",
+      "inBundle": true,
+      "license": "ISC"
+    },
+    "node_modules/npm/node_modules/cross-spawn": {
+      "version": "7.0.3",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      },
       "engines": {
-        "node": ">= 0.4.0"
+        "node": ">= 8"
       }
     },
-    "node_modules/fill-range": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
-      "integrity": "sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=",
-      "dev": true,
+    "node_modules/npm/node_modules/cross-spawn/node_modules/which": {
+      "version": "2.0.2",
+      "inBundle": true,
+      "license": "ISC",
       "dependencies": {
-        "extend-shallow": "^2.0.1",
-        "is-number": "^3.0.0",
-        "repeat-string": "^1.6.1",
-        "to-regex-range": "^2.1.0"
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "node-which": "bin/node-which"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">= 8"
       }
     },
-    "node_modules/fill-range/node_modules/extend-shallow": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-      "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-      "dev": true,
-      "dependencies": {
-        "is-extendable": "^0.1.0"
+    "node_modules/npm/node_modules/cssesc": {
+      "version": "3.0.0",
+      "inBundle": true,
+      "license": "MIT",
+      "bin": {
+        "cssesc": "bin/cssesc"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=4"
       }
     },
-    "node_modules/finalhandler": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
-      "integrity": "sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==",
-      "dev": true,
+    "node_modules/npm/node_modules/debug": {
+      "version": "4.3.6",
+      "inBundle": true,
+      "license": "MIT",
       "dependencies": {
-        "debug": "2.6.9",
-        "encodeurl": "~1.0.2",
-        "escape-html": "~1.0.3",
-        "on-finished": "~2.3.0",
-        "parseurl": "~1.3.3",
-        "statuses": "~1.5.0",
-        "unpipe": "~1.0.0"
+        "ms": "2.1.2"
       },
       "engines": {
-        "node": ">= 0.8"
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
       }
     },
-    "node_modules/finalhandler/node_modules/debug": {
-      "version": "2.6.9",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-      "dev": true,
-      "dependencies": {
-        "ms": "2.0.0"
+    "node_modules/npm/node_modules/debug/node_modules/ms": {
+      "version": "2.1.2",
+      "inBundle": true,
+      "license": "MIT"
+    },
+    "node_modules/npm/node_modules/diff": {
+      "version": "5.2.0",
+      "inBundle": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.3.1"
       }
     },
-    "node_modules/find-cache-dir": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-2.1.0.tgz",
-      "integrity": "sha512-Tq6PixE0w/VMFfCgbONnkiQIVol/JJL7nRMi20fqzA4NRs9AfeqMGeRdPi3wIhYkxjeBaWh2rxwapn5Tu3IqOQ==",
-      "dev": true,
+    "node_modules/npm/node_modules/eastasianwidth": {
+      "version": "0.2.0",
+      "inBundle": true,
+      "license": "MIT"
+    },
+    "node_modules/npm/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "inBundle": true,
+      "license": "MIT"
+    },
+    "node_modules/npm/node_modules/encoding": {
+      "version": "0.1.13",
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true,
       "dependencies": {
-        "commondir": "^1.0.1",
-        "make-dir": "^2.0.0",
-        "pkg-dir": "^3.0.0"
-      },
+        "iconv-lite": "^0.6.2"
+      }
+    },
+    "node_modules/npm/node_modules/env-paths": {
+      "version": "2.2.1",
+      "inBundle": true,
+      "license": "MIT",
       "engines": {
         "node": ">=6"
       }
     },
-    "node_modules/find-up": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
-      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
-      "dev": true,
-      "dependencies": {
-        "locate-path": "^5.0.0",
-        "path-exists": "^4.0.0"
-      },
+    "node_modules/npm/node_modules/err-code": {
+      "version": "2.0.3",
+      "inBundle": true,
+      "license": "MIT"
+    },
+    "node_modules/npm/node_modules/exponential-backoff": {
+      "version": "3.1.1",
+      "inBundle": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/npm/node_modules/fastest-levenshtein": {
+      "version": "1.0.16",
+      "inBundle": true,
+      "license": "MIT",
       "engines": {
-        "node": ">=8"
+        "node": ">= 4.9.1"
       }
     },
-    "node_modules/find-versions": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/find-versions/-/find-versions-3.2.0.tgz",
-      "integrity": "sha512-P8WRou2S+oe222TOCHitLy8zj+SIsVJh52VP4lvXkaFVnOFFdoWv1H1Jjvel1aI6NCFOAaeAVm8qrI0odiLcww==",
-      "dev": true,
-      "optional": true,
+    "node_modules/npm/node_modules/foreground-child": {
+      "version": "3.3.0",
+      "inBundle": true,
+      "license": "ISC",
       "dependencies": {
-        "semver-regex": "^2.0.0"
+        "cross-spawn": "^7.0.0",
+        "signal-exit": "^4.0.1"
       },
       "engines": {
-        "node": ">=6"
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/flat-cache": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-2.0.1.tgz",
-      "integrity": "sha512-LoQe6yDuUMDzQAEH8sgmh4Md6oZnc/7PjtwjNFSzveXqSHt6ka9fPBuso7IGf9Rz4uqnSnWiFH2B/zj24a5ReA==",
-      "dev": true,
+    "node_modules/npm/node_modules/fs-minipass": {
+      "version": "3.0.3",
+      "inBundle": true,
+      "license": "ISC",
       "dependencies": {
-        "flatted": "^2.0.0",
-        "rimraf": "2.6.3",
-        "write": "1.0.3"
+        "minipass": "^7.0.3"
       },
       "engines": {
-        "node": ">=4"
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
       }
     },
-    "node_modules/flat-cache/node_modules/rimraf": {
-      "version": "2.6.3",
-      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz",
-      "integrity": "sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==",
-      "dev": true,
+    "node_modules/npm/node_modules/glob": {
+      "version": "10.4.5",
+      "inBundle": true,
+      "license": "ISC",
       "dependencies": {
-        "glob": "^7.1.3"
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^3.1.2",
+        "minimatch": "^9.0.4",
+        "minipass": "^7.1.2",
+        "package-json-from-dist": "^1.0.0",
+        "path-scurry": "^1.11.1"
       },
       "bin": {
-        "rimraf": "bin.js"
+        "glob": "dist/esm/bin.mjs"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/flatted": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/flatted/-/flatted-2.0.2.tgz",
-      "integrity": "sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA==",
-      "dev": true
+    "node_modules/npm/node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "inBundle": true,
+      "license": "ISC"
     },
-    "node_modules/focus-lock": {
-      "version": "0.9.1",
-      "resolved": "https://registry.npmjs.org/focus-lock/-/focus-lock-0.9.1.tgz",
-      "integrity": "sha512-/2Nj60Cps6yOLSO+CkVbeSKfwfns5XbX6HOedIK9PdzODP04N9c3xqOcPXayN0WsT9YjJvAnXmI0NdqNIDf5Kw==",
+    "node_modules/npm/node_modules/hosted-git-info": {
+      "version": "7.0.2",
+      "inBundle": true,
+      "license": "ISC",
       "dependencies": {
-        "tslib": "^2.0.3"
+        "lru-cache": "^10.0.1"
       },
       "engines": {
-        "node": ">=10"
+        "node": "^16.14.0 || >=18.0.0"
       }
     },
-    "node_modules/focus-lock/node_modules/tslib": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
-      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+    "node_modules/npm/node_modules/http-cache-semantics": {
+      "version": "4.1.1",
+      "inBundle": true,
+      "license": "BSD-2-Clause"
     },
-    "node_modules/follow-redirects": {
-      "version": "1.13.3",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.13.3.tgz",
-      "integrity": "sha512-DUgl6+HDzB0iEptNQEXLx/KhTmDb8tZUHSeLqpnjpknR70H0nC2t9N73BK6fN4hOvJ84pKlIQVQ4k5FFlBedKA==",
+    "node_modules/npm/node_modules/http-proxy-agent": {
+      "version": "7.0.2",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "^7.1.0",
+        "debug": "^4.3.4"
+      },
       "engines": {
-        "node": ">=4.0"
+        "node": ">= 14"
       }
     },
-    "node_modules/font-awesome": {
-      "version": "4.7.0",
-      "resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz",
-      "integrity": "sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM=",
+    "node_modules/npm/node_modules/https-proxy-agent": {
+      "version": "7.0.5",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "agent-base": "^7.0.2",
+        "debug": "4"
+      },
       "engines": {
-        "node": ">=0.10.3"
+        "node": ">= 14"
       }
     },
-    "node_modules/for-in": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
-      "integrity": "sha1-gQaNKVqBQuwKxybG4iAMMPttXoA=",
-      "dev": true,
+    "node_modules/npm/node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
       "engines": {
         "node": ">=0.10.0"
       }
     },
-    "node_modules/forever-agent": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
-      "integrity": "sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=",
-      "dev": true,
-      "engines": {
-        "node": "*"
-      }
-    },
-    "node_modules/fork-ts-checker-webpack-plugin": {
-      "version": "4.1.6",
-      "resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-4.1.6.tgz",
-      "integrity": "sha512-DUxuQaKoqfNne8iikd14SAkh5uw4+8vNifp6gmA73yYNS6ywLIWSLD/n/mBzHQRpW3J7rbATEakmiA8JvkTyZw==",
-      "dev": true,
+    "node_modules/npm/node_modules/ignore-walk": {
+      "version": "6.0.5",
+      "inBundle": true,
+      "license": "ISC",
       "dependencies": {
-        "@babel/code-frame": "^7.5.5",
-        "chalk": "^2.4.1",
-        "micromatch": "^3.1.10",
-        "minimatch": "^3.0.4",
-        "semver": "^5.6.0",
-        "tapable": "^1.0.0",
-        "worker-rpc": "^0.1.0"
+        "minimatch": "^9.0.0"
       },
       "engines": {
-        "node": ">=6.11.5",
-        "yarn": ">=1.0.0"
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
       }
     },
-    "node_modules/fork-ts-checker-webpack-plugin/node_modules/tapable": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz",
-      "integrity": "sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==",
-      "dev": true,
+    "node_modules/npm/node_modules/imurmurhash": {
+      "version": "0.1.4",
+      "inBundle": true,
+      "license": "MIT",
       "engines": {
-        "node": ">=6"
+        "node": ">=0.8.19"
       }
     },
-    "node_modules/form-data": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.3.tgz",
-      "integrity": "sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==",
-      "dev": true,
-      "dependencies": {
-        "asynckit": "^0.4.0",
-        "combined-stream": "^1.0.6",
-        "mime-types": "^2.1.12"
-      },
+    "node_modules/npm/node_modules/indent-string": {
+      "version": "4.0.0",
+      "inBundle": true,
+      "license": "MIT",
       "engines": {
-        "node": ">= 0.12"
+        "node": ">=8"
       }
     },
-    "node_modules/form-urlencoded": {
-      "version": "4.1.4",
-      "resolved": "https://registry.npmjs.org/form-urlencoded/-/form-urlencoded-4.1.4.tgz",
-      "integrity": "sha512-R7Vytos0gMYuPQTMwnNzvK9PBItNV+Qkm/pvghEZI3j2kMrzZmJlczAgHFmt12VV+IRYQXgTlSGP1PKAsMCIUA=="
-    },
-    "node_modules/formidable": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/formidable/-/formidable-1.2.2.tgz",
-      "integrity": "sha512-V8gLm+41I/8kguQ4/o1D3RIHRmhYFG4pnNyonvua+40rqcEmT4+V71yaZ3B457xbbgCsCfjSPi65u/W6vK1U5Q==",
-      "dev": true
-    },
-    "node_modules/formik": {
-      "version": "2.2.6",
-      "resolved": "https://registry.npmjs.org/formik/-/formik-2.2.6.tgz",
-      "integrity": "sha512-Kxk2zQRafy56zhLmrzcbryUpMBvT0tal5IvcifK5+4YNGelKsnrODFJ0sZQRMQboblWNym4lAW3bt+tf2vApSA==",
-      "dependencies": {
-        "deepmerge": "^2.1.1",
-        "hoist-non-react-statics": "^3.3.0",
-        "lodash": "^4.17.14",
-        "lodash-es": "^4.17.14",
-        "react-fast-compare": "^2.0.1",
-        "tiny-warning": "^1.0.2",
-        "tslib": "^1.10.0"
+    "node_modules/npm/node_modules/ini": {
+      "version": "4.1.3",
+      "inBundle": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
       }
     },
-    "node_modules/formik/node_modules/deepmerge": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz",
-      "integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==",
+    "node_modules/npm/node_modules/init-package-json": {
+      "version": "6.0.3",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "@npmcli/package-json": "^5.0.0",
+        "npm-package-arg": "^11.0.0",
+        "promzard": "^1.0.0",
+        "read": "^3.0.1",
+        "semver": "^7.3.5",
+        "validate-npm-package-license": "^3.0.4",
+        "validate-npm-package-name": "^5.0.0"
+      },
       "engines": {
-        "node": ">=0.10.0"
+        "node": "^16.14.0 || >=18.0.0"
       }
     },
-    "node_modules/forwarded": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
-      "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
-      "dev": true,
+    "node_modules/npm/node_modules/ip-address": {
+      "version": "9.0.5",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "jsbn": "1.1.0",
+        "sprintf-js": "^1.1.3"
+      },
       "engines": {
-        "node": ">= 0.6"
+        "node": ">= 12"
       }
     },
-    "node_modules/fraction.js": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.1.1.tgz",
-      "integrity": "sha512-MHOhvvxHTfRFpF1geTK9czMIZ6xclsEor2wkIGYYq+PxcQqT7vStJqjhe6S1TenZrMZzo+wlqOufBDVepUEgPg==",
-      "dev": true,
+    "node_modules/npm/node_modules/ip-regex": {
+      "version": "5.0.0",
+      "inBundle": true,
+      "license": "MIT",
       "engines": {
-        "node": "*"
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/fragment-cache": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/fragment-cache/-/fragment-cache-0.2.1.tgz",
-      "integrity": "sha1-QpD60n8T6Jvn8zeZxrxaCr//DRk=",
-      "dev": true,
+    "node_modules/npm/node_modules/is-cidr": {
+      "version": "5.1.0",
+      "inBundle": true,
+      "license": "BSD-2-Clause",
       "dependencies": {
-        "map-cache": "^0.2.2"
+        "cidr-regex": "^4.1.1"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=14"
       }
     },
-    "node_modules/fresh": {
-      "version": "0.5.2",
-      "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
-      "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=",
-      "dev": true,
+    "node_modules/npm/node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "inBundle": true,
+      "license": "MIT",
       "engines": {
-        "node": ">= 0.6"
+        "node": ">=8"
       }
     },
-    "node_modules/from2": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/from2/-/from2-2.3.0.tgz",
-      "integrity": "sha1-i/tVAr3kpNNs/e6gB/zKIdfjgq8=",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "inherits": "^2.0.1",
-        "readable-stream": "^2.0.0"
-      }
+    "node_modules/npm/node_modules/is-lambda": {
+      "version": "1.0.1",
+      "inBundle": true,
+      "license": "MIT"
     },
-    "node_modules/fs-constants": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
-      "integrity": "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==",
-      "dev": true,
-      "optional": true
+    "node_modules/npm/node_modules/isexe": {
+      "version": "2.0.0",
+      "inBundle": true,
+      "license": "ISC"
     },
-    "node_modules/fs-extra": {
-      "version": "9.1.0",
-      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
-      "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
-      "dev": true,
+    "node_modules/npm/node_modules/jackspeak": {
+      "version": "3.4.3",
+      "inBundle": true,
+      "license": "BlueOak-1.0.0",
       "dependencies": {
-        "at-least-node": "^1.0.0",
-        "graceful-fs": "^4.2.0",
-        "jsonfile": "^6.0.1",
-        "universalify": "^2.0.0"
+        "@isaacs/cliui": "^8.0.2"
       },
-      "engines": {
-        "node": ">=10"
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      },
+      "optionalDependencies": {
+        "@pkgjs/parseargs": "^0.11.0"
       }
     },
-    "node_modules/fs-monkey": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/fs-monkey/-/fs-monkey-1.0.3.tgz",
-      "integrity": "sha512-cybjIfiiE+pTWicSCLFHSrXZ6EilF30oh91FDP9S2B051prEa7QWfrVTQm10/dDpswBDXZugPa1Ogu8Yh+HV0Q==",
-      "dev": true
-    },
-    "node_modules/fs-readdir-recursive": {
+    "node_modules/npm/node_modules/jsbn": {
       "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/fs-readdir-recursive/-/fs-readdir-recursive-1.1.0.tgz",
-      "integrity": "sha512-GNanXlVr2pf02+sPN40XN8HG+ePaNcvM0q5mZBd668Obwb0yD5GiUbZOFgwn8kGMY6I3mdyDJzieUy3PTYyTRA==",
-      "dev": true
+      "inBundle": true,
+      "license": "MIT"
     },
-    "node_modules/fs.realpath": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
+    "node_modules/npm/node_modules/json-parse-even-better-errors": {
+      "version": "3.0.2",
+      "inBundle": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+      }
     },
-    "node_modules/fsevents": {
-      "version": "1.2.13",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
-      "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
-      "dev": true,
-      "optional": true,
-      "os": [
-        "darwin"
+    "node_modules/npm/node_modules/json-stringify-nice": {
+      "version": "1.1.4",
+      "inBundle": true,
+      "license": "ISC",
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/npm/node_modules/jsonparse": {
+      "version": "1.3.1",
+      "engines": [
+        "node >= 0.2.0"
       ],
+      "inBundle": true,
+      "license": "MIT"
+    },
+    "node_modules/npm/node_modules/just-diff": {
+      "version": "6.0.2",
+      "inBundle": true,
+      "license": "MIT"
+    },
+    "node_modules/npm/node_modules/just-diff-apply": {
+      "version": "5.5.0",
+      "inBundle": true,
+      "license": "MIT"
+    },
+    "node_modules/npm/node_modules/libnpmaccess": {
+      "version": "8.0.6",
+      "inBundle": true,
+      "license": "ISC",
       "dependencies": {
-        "bindings": "^1.5.0",
-        "nan": "^2.12.1"
+        "npm-package-arg": "^11.0.2",
+        "npm-registry-fetch": "^17.0.1"
       },
       "engines": {
-        "node": ">= 4.0"
+        "node": "^16.14.0 || >=18.0.0"
       }
     },
-    "node_modules/function-bind": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
-      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
-    },
-    "node_modules/function.prototype.name": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.4.tgz",
-      "integrity": "sha512-iqy1pIotY/RmhdFZygSSlW0wko2yxkSCKqsuv4pr8QESohpYyG/Z7B/XXvPRKTJS//960rgguE5mSRUsDdaJrQ==",
+    "node_modules/npm/node_modules/libnpmdiff": {
+      "version": "6.1.4",
+      "inBundle": true,
+      "license": "ISC",
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.18.0-next.2",
-        "functions-have-names": "^1.2.2"
+        "@npmcli/arborist": "^7.5.4",
+        "@npmcli/installed-package-contents": "^2.1.0",
+        "binary-extensions": "^2.3.0",
+        "diff": "^5.1.0",
+        "minimatch": "^9.0.4",
+        "npm-package-arg": "^11.0.2",
+        "pacote": "^18.0.6",
+        "tar": "^6.2.1"
       },
       "engines": {
-        "node": ">= 0.4"
+        "node": "^16.14.0 || >=18.0.0"
       }
     },
-    "node_modules/function.prototype.name/node_modules/es-abstract": {
-      "version": "1.18.3",
-      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.18.3.tgz",
-      "integrity": "sha512-nQIr12dxV7SSxE6r6f1l3DtAeEYdsGpps13dR0TwJg1S8gyp4ZPgy3FZcHBgbiQqnoqSTb+oC+kO4UQ0C/J8vw==",
+    "node_modules/npm/node_modules/libnpmexec": {
+      "version": "8.1.4",
+      "inBundle": true,
+      "license": "ISC",
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "es-to-primitive": "^1.2.1",
-        "function-bind": "^1.1.1",
-        "get-intrinsic": "^1.1.1",
-        "has": "^1.0.3",
-        "has-symbols": "^1.0.2",
-        "is-callable": "^1.2.3",
-        "is-negative-zero": "^2.0.1",
-        "is-regex": "^1.1.3",
-        "is-string": "^1.0.6",
-        "object-inspect": "^1.10.3",
-        "object-keys": "^1.1.1",
-        "object.assign": "^4.1.2",
-        "string.prototype.trimend": "^1.0.4",
-        "string.prototype.trimstart": "^1.0.4",
-        "unbox-primitive": "^1.0.1"
+        "@npmcli/arborist": "^7.5.4",
+        "@npmcli/run-script": "^8.1.0",
+        "ci-info": "^4.0.0",
+        "npm-package-arg": "^11.0.2",
+        "pacote": "^18.0.6",
+        "proc-log": "^4.2.0",
+        "read": "^3.0.1",
+        "read-package-json-fast": "^3.0.2",
+        "semver": "^7.3.7",
+        "walk-up-path": "^3.0.1"
       },
       "engines": {
-        "node": ">= 0.4"
+        "node": "^16.14.0 || >=18.0.0"
       }
     },
-    "node_modules/function.prototype.name/node_modules/has-symbols": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.2.tgz",
-      "integrity": "sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw==",
+    "node_modules/npm/node_modules/libnpmfund": {
+      "version": "5.0.12",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "@npmcli/arborist": "^7.5.4"
+      },
       "engines": {
-        "node": ">= 0.4"
+        "node": "^16.14.0 || >=18.0.0"
       }
     },
-    "node_modules/function.prototype.name/node_modules/is-callable": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.3.tgz",
-      "integrity": "sha512-J1DcMe8UYTBSrKezuIUTUwjXsho29693unXM2YhJUTR2txK/eG47bvNa/wipPFmZFgr/N6f1GA66dv0mEyTIyQ==",
+    "node_modules/npm/node_modules/libnpmhook": {
+      "version": "10.0.5",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "aproba": "^2.0.0",
+        "npm-registry-fetch": "^17.0.1"
+      },
       "engines": {
-        "node": ">= 0.4"
+        "node": "^16.14.0 || >=18.0.0"
       }
     },
-    "node_modules/function.prototype.name/node_modules/is-regex": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.3.tgz",
-      "integrity": "sha512-qSVXFz28HM7y+IWX6vLCsexdlvzT1PJNFSBuaQLQ5o0IEw8UDYW6/2+eCMVyIsbM8CNLX2a/QWmSpyxYEHY7CQ==",
+    "node_modules/npm/node_modules/libnpmorg": {
+      "version": "6.0.6",
+      "inBundle": true,
+      "license": "ISC",
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "has-symbols": "^1.0.2"
+        "aproba": "^2.0.0",
+        "npm-registry-fetch": "^17.0.1"
       },
       "engines": {
-        "node": ">= 0.4"
+        "node": "^16.14.0 || >=18.0.0"
       }
     },
-    "node_modules/function.prototype.name/node_modules/object-inspect": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.11.0.tgz",
-      "integrity": "sha512-jp7ikS6Sd3GxQfZJPyH3cjcbJF6GZPClgdV+EFygjFLQ5FmW/dRUnTd9PQ9k0JhoNDabWFbpF1yCdSWCC6gexg=="
-    },
-    "node_modules/function.prototype.name/node_modules/object.assign": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.2.tgz",
-      "integrity": "sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==",
+    "node_modules/npm/node_modules/libnpmpack": {
+      "version": "7.0.4",
+      "inBundle": true,
+      "license": "ISC",
       "dependencies": {
-        "call-bind": "^1.0.0",
-        "define-properties": "^1.1.3",
-        "has-symbols": "^1.0.1",
-        "object-keys": "^1.1.1"
+        "@npmcli/arborist": "^7.5.4",
+        "@npmcli/run-script": "^8.1.0",
+        "npm-package-arg": "^11.0.2",
+        "pacote": "^18.0.6"
       },
       "engines": {
-        "node": ">= 0.4"
+        "node": "^16.14.0 || >=18.0.0"
       }
     },
-    "node_modules/function.prototype.name/node_modules/string.prototype.trimend": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.4.tgz",
-      "integrity": "sha512-y9xCjw1P23Awk8EvTpcyL2NIr1j7wJ39f+k6lvRnSMz+mz9CGz9NYPelDk42kOz6+ql8xjfK8oYzy3jAP5QU5A==",
+    "node_modules/npm/node_modules/libnpmpublish": {
+      "version": "9.0.9",
+      "inBundle": true,
+      "license": "ISC",
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3"
+        "ci-info": "^4.0.0",
+        "normalize-package-data": "^6.0.1",
+        "npm-package-arg": "^11.0.2",
+        "npm-registry-fetch": "^17.0.1",
+        "proc-log": "^4.2.0",
+        "semver": "^7.3.7",
+        "sigstore": "^2.2.0",
+        "ssri": "^10.0.6"
+      },
+      "engines": {
+        "node": "^16.14.0 || >=18.0.0"
       }
     },
-    "node_modules/function.prototype.name/node_modules/string.prototype.trimstart": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.4.tgz",
-      "integrity": "sha512-jh6e984OBfvxS50tdY2nRZnoC5/mLFKOREQfw8t5yytkoUsJRNxvI/E39qu1sD0OtWI3OC0XgKSmcWwziwYuZw==",
+    "node_modules/npm/node_modules/libnpmsearch": {
+      "version": "7.0.6",
+      "inBundle": true,
+      "license": "ISC",
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3"
+        "npm-registry-fetch": "^17.0.1"
+      },
+      "engines": {
+        "node": "^16.14.0 || >=18.0.0"
       }
     },
-    "node_modules/functional-red-black-tree": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz",
-      "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=",
-      "dev": true
-    },
-    "node_modules/functions-have-names": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.2.tgz",
-      "integrity": "sha512-bLgc3asbWdwPbx2mNk2S49kmJCuQeu0nfmaOgbs8WIyzzkw3r4htszdIi9Q9EMezDPTYuJx2wvjZ/EwgAthpnA=="
-    },
-    "node_modules/gensync": {
-      "version": "1.0.0-beta.1",
-      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.1.tgz",
-      "integrity": "sha512-r8EC6NO1sngH/zdD9fiRDLdcgnbayXah+mLgManTaIZJqEC1MZstmnox8KpnI2/fxQwrp5OpCOYWLp4rBl4Jcg==",
-      "dev": true,
+    "node_modules/npm/node_modules/libnpmteam": {
+      "version": "6.0.5",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "aproba": "^2.0.0",
+        "npm-registry-fetch": "^17.0.1"
+      },
       "engines": {
-        "node": ">=6.9.0"
+        "node": "^16.14.0 || >=18.0.0"
       }
     },
-    "node_modules/get-caller-file": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
-      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
-      "dev": true,
+    "node_modules/npm/node_modules/libnpmversion": {
+      "version": "6.0.3",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "@npmcli/git": "^5.0.7",
+        "@npmcli/run-script": "^8.1.0",
+        "json-parse-even-better-errors": "^3.0.2",
+        "proc-log": "^4.2.0",
+        "semver": "^7.3.7"
+      },
       "engines": {
-        "node": "6.* || 8.* || >= 10.*"
+        "node": "^16.14.0 || >=18.0.0"
       }
     },
-    "node_modules/get-intrinsic": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.1.tgz",
-      "integrity": "sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==",
+    "node_modules/npm/node_modules/lru-cache": {
+      "version": "10.4.3",
+      "inBundle": true,
+      "license": "ISC"
+    },
+    "node_modules/npm/node_modules/make-fetch-happen": {
+      "version": "13.0.1",
+      "inBundle": true,
+      "license": "ISC",
       "dependencies": {
-        "function-bind": "^1.1.1",
-        "has": "^1.0.3",
-        "has-symbols": "^1.0.1"
+        "@npmcli/agent": "^2.0.0",
+        "cacache": "^18.0.0",
+        "http-cache-semantics": "^4.1.1",
+        "is-lambda": "^1.0.1",
+        "minipass": "^7.0.2",
+        "minipass-fetch": "^3.0.0",
+        "minipass-flush": "^1.0.5",
+        "minipass-pipeline": "^1.2.4",
+        "negotiator": "^0.6.3",
+        "proc-log": "^4.2.0",
+        "promise-retry": "^2.0.1",
+        "ssri": "^10.0.0"
+      },
+      "engines": {
+        "node": "^16.14.0 || >=18.0.0"
       }
     },
-    "node_modules/get-nonce": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz",
-      "integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==",
+    "node_modules/npm/node_modules/minimatch": {
+      "version": "9.0.5",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
       "engines": {
-        "node": ">=6"
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/get-package-type": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/get-package-type/-/get-package-type-0.1.0.tgz",
-      "integrity": "sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==",
-      "dev": true,
+    "node_modules/npm/node_modules/minipass": {
+      "version": "7.1.2",
+      "inBundle": true,
+      "license": "ISC",
       "engines": {
-        "node": ">=8.0.0"
+        "node": ">=16 || 14 >=14.17"
       }
     },
-    "node_modules/get-proxy": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/get-proxy/-/get-proxy-2.1.0.tgz",
-      "integrity": "sha512-zmZIaQTWnNQb4R4fJUEp/FC51eZsc6EkErspy3xtIYStaq8EB/hDIWipxsal+E8rz0qD7f2sL/NA9Xee4RInJw==",
-      "dev": true,
-      "optional": true,
+    "node_modules/npm/node_modules/minipass-collect": {
+      "version": "2.0.1",
+      "inBundle": true,
+      "license": "ISC",
       "dependencies": {
-        "npm-conf": "^1.1.0"
+        "minipass": "^7.0.3"
       },
       "engines": {
-        "node": ">=4"
+        "node": ">=16 || 14 >=14.17"
       }
     },
-    "node_modules/get-stdin": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
-      "integrity": "sha1-uWjGsKBDhDJJAui/Gl3zJXmkUP4=",
-      "dev": true,
-      "optional": true,
+    "node_modules/npm/node_modules/minipass-fetch": {
+      "version": "3.0.5",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "minipass": "^7.0.3",
+        "minipass-sized": "^1.0.3",
+        "minizlib": "^2.1.2"
+      },
       "engines": {
-        "node": ">=0.10.0"
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+      },
+      "optionalDependencies": {
+        "encoding": "^0.1.13"
       }
     },
-    "node_modules/get-stream": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz",
-      "integrity": "sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==",
-      "dev": true,
+    "node_modules/npm/node_modules/minipass-flush": {
+      "version": "1.0.5",
+      "inBundle": true,
+      "license": "ISC",
       "dependencies": {
-        "pump": "^3.0.0"
+        "minipass": "^3.0.0"
       },
       "engines": {
-        "node": ">=6"
+        "node": ">= 8"
       }
     },
-    "node_modules/get-value": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/get-value/-/get-value-2.0.6.tgz",
-      "integrity": "sha1-3BXKHGcjh8p2vTesCjlbogQqLCg=",
-      "dev": true,
+    "node_modules/npm/node_modules/minipass-flush/node_modules/minipass": {
+      "version": "3.3.6",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=8"
       }
     },
-    "node_modules/getpass": {
-      "version": "0.1.7",
-      "resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.7.tgz",
-      "integrity": "sha1-Xv+OPmhNVprkyysSgmBOi6YhSfo=",
-      "dev": true,
+    "node_modules/npm/node_modules/minipass-pipeline": {
+      "version": "1.2.4",
+      "inBundle": true,
+      "license": "ISC",
       "dependencies": {
-        "assert-plus": "^1.0.0"
+        "minipass": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
       }
     },
-    "node_modules/gifsicle": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/gifsicle/-/gifsicle-5.2.0.tgz",
-      "integrity": "sha512-vOIS3j0XoTCxq9pkGj43gEix82RkI5FveNgaFZutjbaui/HH+4fR8Y56dwXDuxYo8hR4xOo6/j2h1WHoQW6XLw==",
-      "dev": true,
-      "optional": true,
+    "node_modules/npm/node_modules/minipass-pipeline/node_modules/minipass": {
+      "version": "3.3.6",
+      "inBundle": true,
+      "license": "ISC",
       "dependencies": {
-        "bin-build": "^3.0.0",
-        "bin-wrapper": "^4.0.0",
-        "execa": "^5.0.0",
-        "logalot": "^2.0.0"
-      },
-      "bin": {
-        "gifsicle": "cli.js"
+        "yallist": "^4.0.0"
       },
       "engines": {
-        "node": ">=10"
+        "node": ">=8"
       }
     },
-    "node_modules/gifsicle/node_modules/cross-spawn": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-      "dev": true,
-      "optional": true,
+    "node_modules/npm/node_modules/minipass-sized": {
+      "version": "1.0.3",
+      "inBundle": true,
+      "license": "ISC",
       "dependencies": {
-        "path-key": "^3.1.0",
-        "shebang-command": "^2.0.0",
-        "which": "^2.0.1"
+        "minipass": "^3.0.0"
       },
       "engines": {
-        "node": ">= 8"
+        "node": ">=8"
       }
     },
-    "node_modules/gifsicle/node_modules/execa": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
-      "integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==",
-      "dev": true,
-      "optional": true,
+    "node_modules/npm/node_modules/minipass-sized/node_modules/minipass": {
+      "version": "3.3.6",
+      "inBundle": true,
+      "license": "ISC",
       "dependencies": {
-        "cross-spawn": "^7.0.3",
-        "get-stream": "^6.0.0",
-        "human-signals": "^2.1.0",
-        "is-stream": "^2.0.0",
-        "merge-stream": "^2.0.0",
-        "npm-run-path": "^4.0.1",
-        "onetime": "^5.1.2",
-        "signal-exit": "^3.0.3",
-        "strip-final-newline": "^2.0.0"
+        "yallist": "^4.0.0"
       },
       "engines": {
-        "node": ">=10"
+        "node": ">=8"
       }
     },
-    "node_modules/gifsicle/node_modules/get-stream": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
-      "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
-      "dev": true,
-      "optional": true,
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/gifsicle/node_modules/is-stream": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.0.tgz",
-      "integrity": "sha512-XCoy+WlUr7d1+Z8GgSuXmpuUFC9fOhRXglJMx+dwLKTkL44Cjd4W1Z5P+BQZpr+cR93aGP4S/s7Ftw6Nd/kiEw==",
-      "dev": true,
-      "optional": true,
+    "node_modules/npm/node_modules/minizlib": {
+      "version": "2.1.2",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "minipass": "^3.0.0",
+        "yallist": "^4.0.0"
+      },
       "engines": {
-        "node": ">=8"
+        "node": ">= 8"
       }
     },
-    "node_modules/gifsicle/node_modules/npm-run-path": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
-      "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
-      "dev": true,
-      "optional": true,
+    "node_modules/npm/node_modules/minizlib/node_modules/minipass": {
+      "version": "3.3.6",
+      "inBundle": true,
+      "license": "ISC",
       "dependencies": {
-        "path-key": "^3.0.0"
+        "yallist": "^4.0.0"
       },
       "engines": {
         "node": ">=8"
       }
     },
-    "node_modules/gifsicle/node_modules/path-key": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-      "dev": true,
-      "optional": true,
+    "node_modules/npm/node_modules/mkdirp": {
+      "version": "1.0.4",
+      "inBundle": true,
+      "license": "MIT",
+      "bin": {
+        "mkdirp": "bin/cmd.js"
+      },
       "engines": {
-        "node": ">=8"
+        "node": ">=10"
       }
     },
-    "node_modules/gifsicle/node_modules/shebang-command": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "shebang-regex": "^3.0.0"
-      },
+    "node_modules/npm/node_modules/ms": {
+      "version": "2.1.3",
+      "inBundle": true,
+      "license": "MIT"
+    },
+    "node_modules/npm/node_modules/mute-stream": {
+      "version": "1.0.0",
+      "inBundle": true,
+      "license": "ISC",
       "engines": {
-        "node": ">=8"
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
       }
     },
-    "node_modules/gifsicle/node_modules/shebang-regex": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-      "dev": true,
-      "optional": true,
+    "node_modules/npm/node_modules/negotiator": {
+      "version": "0.6.3",
+      "inBundle": true,
+      "license": "MIT",
       "engines": {
-        "node": ">=8"
+        "node": ">= 0.6"
       }
     },
-    "node_modules/gifsicle/node_modules/which": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-      "dev": true,
-      "optional": true,
+    "node_modules/npm/node_modules/node-gyp": {
+      "version": "10.2.0",
+      "inBundle": true,
+      "license": "MIT",
       "dependencies": {
-        "isexe": "^2.0.0"
+        "env-paths": "^2.2.0",
+        "exponential-backoff": "^3.1.1",
+        "glob": "^10.3.10",
+        "graceful-fs": "^4.2.6",
+        "make-fetch-happen": "^13.0.0",
+        "nopt": "^7.0.0",
+        "proc-log": "^4.1.0",
+        "semver": "^7.3.5",
+        "tar": "^6.2.1",
+        "which": "^4.0.0"
       },
       "bin": {
-        "node-which": "bin/node-which"
+        "node-gyp": "bin/node-gyp.js"
       },
       "engines": {
-        "node": ">= 8"
+        "node": "^16.14.0 || >=18.0.0"
       }
     },
-    "node_modules/glob": {
-      "version": "7.1.6",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
-      "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
-      "dev": true,
+    "node_modules/npm/node_modules/nopt": {
+      "version": "7.2.1",
+      "inBundle": true,
+      "license": "ISC",
       "dependencies": {
-        "fs.realpath": "^1.0.0",
-        "inflight": "^1.0.4",
-        "inherits": "2",
-        "minimatch": "^3.0.4",
-        "once": "^1.3.0",
-        "path-is-absolute": "^1.0.0"
+        "abbrev": "^2.0.0"
+      },
+      "bin": {
+        "nopt": "bin/nopt.js"
       },
       "engines": {
-        "node": "*"
-      }
-    },
-    "node_modules/glob-parent": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz",
-      "integrity": "sha1-nmr2KZ2NO9K9QEMIMr0RPfkGxa4=",
-      "dev": true,
-      "dependencies": {
-        "is-glob": "^3.1.0",
-        "path-dirname": "^1.0.0"
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
       }
     },
-    "node_modules/glob-parent/node_modules/is-glob": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-3.1.0.tgz",
-      "integrity": "sha1-e6WuJCF4BKxwcHuWkiVnSGzD6Eo=",
-      "dev": true,
+    "node_modules/npm/node_modules/normalize-package-data": {
+      "version": "6.0.2",
+      "inBundle": true,
+      "license": "BSD-2-Clause",
       "dependencies": {
-        "is-extglob": "^2.1.0"
+        "hosted-git-info": "^7.0.0",
+        "semver": "^7.3.5",
+        "validate-npm-package-license": "^3.0.4"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": "^16.14.0 || >=18.0.0"
       }
     },
-    "node_modules/glob-to-regexp": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
-      "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==",
-      "dev": true
+    "node_modules/npm/node_modules/npm-audit-report": {
+      "version": "5.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
+      }
     },
-    "node_modules/global-modules": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/global-modules/-/global-modules-2.0.0.tgz",
-      "integrity": "sha512-NGbfmJBp9x8IxyJSd1P+otYK8vonoJactOogrVfFRIAEY1ukil8RSKDz2Yo7wh1oihl51l/r6W4epkeKJHqL8A==",
-      "dev": true,
+    "node_modules/npm/node_modules/npm-bundled": {
+      "version": "3.0.1",
+      "inBundle": true,
+      "license": "ISC",
       "dependencies": {
-        "global-prefix": "^3.0.0"
+        "npm-normalize-package-bin": "^3.0.0"
       },
       "engines": {
-        "node": ">=6"
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
       }
     },
-    "node_modules/global-prefix": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-3.0.0.tgz",
-      "integrity": "sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==",
-      "dev": true,
+    "node_modules/npm/node_modules/npm-install-checks": {
+      "version": "6.3.0",
+      "inBundle": true,
+      "license": "BSD-2-Clause",
       "dependencies": {
-        "ini": "^1.3.5",
-        "kind-of": "^6.0.2",
-        "which": "^1.3.1"
+        "semver": "^7.1.1"
       },
       "engines": {
-        "node": ">=6"
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
       }
     },
-    "node_modules/globals": {
-      "version": "11.12.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
-      "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
-      "dev": true,
+    "node_modules/npm/node_modules/npm-normalize-package-bin": {
+      "version": "3.0.1",
+      "inBundle": true,
+      "license": "ISC",
       "engines": {
-        "node": ">=4"
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
       }
     },
-    "node_modules/globby": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz",
-      "integrity": "sha1-9abXDoOV4hyFj7BInWTfAkJNUGw=",
-      "dev": true,
+    "node_modules/npm/node_modules/npm-package-arg": {
+      "version": "11.0.3",
+      "inBundle": true,
+      "license": "ISC",
       "dependencies": {
-        "array-union": "^1.0.1",
-        "glob": "^7.0.3",
-        "object-assign": "^4.0.1",
-        "pify": "^2.0.0",
-        "pinkie-promise": "^2.0.0"
+        "hosted-git-info": "^7.0.0",
+        "proc-log": "^4.0.0",
+        "semver": "^7.3.5",
+        "validate-npm-package-name": "^5.0.0"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": "^16.14.0 || >=18.0.0"
       }
     },
-    "node_modules/globby/node_modules/pify": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
-      "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
-      "dev": true,
+    "node_modules/npm/node_modules/npm-packlist": {
+      "version": "8.0.2",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "ignore-walk": "^6.0.4"
+      },
       "engines": {
-        "node": ">=0.10.0"
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
       }
     },
-    "node_modules/got": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/got/-/got-7.1.0.tgz",
-      "integrity": "sha512-Y5WMo7xKKq1muPsxD+KmrR8DH5auG7fBdDVueZwETwV6VytKyU9OX/ddpq2/1hp1vIPvVb4T81dKQz3BivkNLw==",
-      "dev": true,
-      "optional": true,
+    "node_modules/npm/node_modules/npm-pick-manifest": {
+      "version": "9.1.0",
+      "inBundle": true,
+      "license": "ISC",
       "dependencies": {
-        "decompress-response": "^3.2.0",
-        "duplexer3": "^0.1.4",
-        "get-stream": "^3.0.0",
-        "is-plain-obj": "^1.1.0",
-        "is-retry-allowed": "^1.0.0",
-        "is-stream": "^1.0.0",
-        "isurl": "^1.0.0-alpha5",
-        "lowercase-keys": "^1.0.0",
-        "p-cancelable": "^0.3.0",
-        "p-timeout": "^1.1.1",
-        "safe-buffer": "^5.0.1",
-        "timed-out": "^4.0.0",
-        "url-parse-lax": "^1.0.0",
-        "url-to-options": "^1.0.1"
+        "npm-install-checks": "^6.0.0",
+        "npm-normalize-package-bin": "^3.0.0",
+        "npm-package-arg": "^11.0.0",
+        "semver": "^7.3.5"
       },
       "engines": {
-        "node": ">=4"
+        "node": "^16.14.0 || >=18.0.0"
       }
     },
-    "node_modules/got/node_modules/get-stream": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
-      "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=",
-      "dev": true,
-      "optional": true,
+    "node_modules/npm/node_modules/npm-profile": {
+      "version": "10.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "npm-registry-fetch": "^17.0.1",
+        "proc-log": "^4.0.0"
+      },
       "engines": {
-        "node": ">=4"
+        "node": ">=18.0.0"
       }
     },
-    "node_modules/graceful-fs": {
-      "version": "4.2.4",
-      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.4.tgz",
-      "integrity": "sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw==",
-      "dev": true
-    },
-    "node_modules/growly": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/growly/-/growly-1.3.0.tgz",
-      "integrity": "sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=",
-      "dev": true
-    },
-    "node_modules/gzip-size": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-5.1.1.tgz",
-      "integrity": "sha512-FNHi6mmoHvs1mxZAds4PpdCS6QG8B4C1krxJsMutgxl5t3+GlRTzzI3NEkifXx2pVsOvJdOGSmIgDhQ55FwdPA==",
-      "dev": true,
+    "node_modules/npm/node_modules/npm-registry-fetch": {
+      "version": "17.1.0",
+      "inBundle": true,
+      "license": "ISC",
       "dependencies": {
-        "duplexer": "^0.1.1",
-        "pify": "^4.0.1"
+        "@npmcli/redact": "^2.0.0",
+        "jsonparse": "^1.3.1",
+        "make-fetch-happen": "^13.0.0",
+        "minipass": "^7.0.2",
+        "minipass-fetch": "^3.0.0",
+        "minizlib": "^2.1.2",
+        "npm-package-arg": "^11.0.0",
+        "proc-log": "^4.0.0"
       },
       "engines": {
-        "node": ">=6"
+        "node": "^16.14.0 || >=18.0.0"
       }
     },
-    "node_modules/handle-thing": {
+    "node_modules/npm/node_modules/npm-user-validate": {
       "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz",
-      "integrity": "sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg==",
-      "dev": true
-    },
-    "node_modules/har-schema": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz",
-      "integrity": "sha1-qUwiJOvKwEeCoNkDVSHyRzW37JI=",
-      "dev": true,
+      "inBundle": true,
+      "license": "BSD-2-Clause",
       "engines": {
-        "node": ">=4"
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
       }
     },
-    "node_modules/har-validator": {
-      "version": "5.1.3",
-      "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.1.3.tgz",
-      "integrity": "sha512-sNvOCzEQNr/qrvJgc3UG/kD4QtlHycrzwS+6mfTrrSq97BvaYcPZZI1ZSqGSPR73Cxn4LKTD4PttRwfU7jWq5g==",
-      "dev": true,
+    "node_modules/npm/node_modules/p-map": {
+      "version": "4.0.0",
+      "inBundle": true,
+      "license": "MIT",
       "dependencies": {
-        "ajv": "^6.5.5",
-        "har-schema": "^2.0.0"
+        "aggregate-error": "^3.0.0"
       },
       "engines": {
-        "node": ">=6"
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/harmony-reflect": {
-      "version": "1.6.2",
-      "resolved": "https://registry.npmjs.org/harmony-reflect/-/harmony-reflect-1.6.2.tgz",
-      "integrity": "sha512-HIp/n38R9kQjDEziXyDTuW3vvoxxyxjxFzXLrBr18uB47GnSt+G9D29fqrpM5ZkspMcPICud3XsBJQ4Y2URg8g==",
-      "dev": true
-    },
-    "node_modules/has": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
-      "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
-      "dependencies": {
-        "function-bind": "^1.1.1"
+    "node_modules/npm/node_modules/package-json-from-dist": {
+      "version": "1.0.0",
+      "inBundle": true,
+      "license": "BlueOak-1.0.0"
+    },
+    "node_modules/npm/node_modules/pacote": {
+      "version": "18.0.6",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "@npmcli/git": "^5.0.0",
+        "@npmcli/installed-package-contents": "^2.0.1",
+        "@npmcli/package-json": "^5.1.0",
+        "@npmcli/promise-spawn": "^7.0.0",
+        "@npmcli/run-script": "^8.0.0",
+        "cacache": "^18.0.0",
+        "fs-minipass": "^3.0.0",
+        "minipass": "^7.0.2",
+        "npm-package-arg": "^11.0.0",
+        "npm-packlist": "^8.0.0",
+        "npm-pick-manifest": "^9.0.0",
+        "npm-registry-fetch": "^17.0.0",
+        "proc-log": "^4.0.0",
+        "promise-retry": "^2.0.1",
+        "sigstore": "^2.2.0",
+        "ssri": "^10.0.0",
+        "tar": "^6.1.11"
+      },
+      "bin": {
+        "pacote": "bin/index.js"
       },
       "engines": {
-        "node": ">= 0.4.0"
+        "node": "^16.14.0 || >=18.0.0"
       }
     },
-    "node_modules/has-ansi": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz",
-      "integrity": "sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=",
-      "dev": true,
+    "node_modules/npm/node_modules/parse-conflict-json": {
+      "version": "3.0.1",
+      "inBundle": true,
+      "license": "ISC",
       "dependencies": {
-        "ansi-regex": "^2.0.0"
+        "json-parse-even-better-errors": "^3.0.0",
+        "just-diff": "^6.0.0",
+        "just-diff-apply": "^5.2.0"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
       }
     },
-    "node_modules/has-ansi/node_modules/ansi-regex": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
-      "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
-      "dev": true,
+    "node_modules/npm/node_modules/path-key": {
+      "version": "3.1.1",
+      "inBundle": true,
+      "license": "MIT",
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=8"
       }
     },
-    "node_modules/has-bigints": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.1.tgz",
-      "integrity": "sha512-LSBS2LjbNBTf6287JEbEzvJgftkF5qFkmCo9hDRpAzKhUOlJ+hx8dd4USs00SgsUNwc4617J9ki5YtEClM2ffA=="
+    "node_modules/npm/node_modules/path-scurry": {
+      "version": "1.11.1",
+      "inBundle": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "lru-cache": "^10.2.0",
+        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
     },
-    "node_modules/has-flag": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
-      "dev": true,
+    "node_modules/npm/node_modules/postcss-selector-parser": {
+      "version": "6.1.2",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
       "engines": {
         "node": ">=4"
       }
     },
-    "node_modules/has-symbol-support-x": {
-      "version": "1.4.2",
-      "resolved": "https://registry.npmjs.org/has-symbol-support-x/-/has-symbol-support-x-1.4.2.tgz",
-      "integrity": "sha512-3ToOva++HaW+eCpgqZrCfN51IPB+7bJNVT6CUATzueB5Heb8o6Nam0V3HG5dlDvZU1Gn5QLcbahiKw/XVk5JJw==",
-      "dev": true,
-      "optional": true,
+    "node_modules/npm/node_modules/proc-log": {
+      "version": "4.2.0",
+      "inBundle": true,
+      "license": "ISC",
       "engines": {
-        "node": "*"
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
       }
     },
-    "node_modules/has-symbols": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.1.tgz",
-      "integrity": "sha512-PLcsoqu++dmEIZB+6totNFKq/7Do+Z0u4oT0zKOJNl3lYK6vGwwu2hjHs+68OEZbTjiUE9bgOABXbP/GvrS0Kg==",
+    "node_modules/npm/node_modules/proggy": {
+      "version": "2.0.0",
+      "inBundle": true,
+      "license": "ISC",
       "engines": {
-        "node": ">= 0.4"
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
       }
     },
-    "node_modules/has-to-string-tag-x": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/has-to-string-tag-x/-/has-to-string-tag-x-1.4.1.tgz",
-      "integrity": "sha512-vdbKfmw+3LoOYVr+mtxHaX5a96+0f3DljYd8JOqvOLsf5mw2Otda2qCDT9qRqLAhrjyQ0h7ual5nOiASpsGNFw==",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "has-symbol-support-x": "^1.4.1"
-      },
-      "engines": {
-        "node": "*"
+    "node_modules/npm/node_modules/promise-all-reject-late": {
+      "version": "1.0.1",
+      "inBundle": true,
+      "license": "ISC",
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/has-unicode": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
-      "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=",
-      "dev": true
+    "node_modules/npm/node_modules/promise-call-limit": {
+      "version": "3.0.1",
+      "inBundle": true,
+      "license": "ISC",
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
     },
-    "node_modules/has-value": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/has-value/-/has-value-1.0.0.tgz",
-      "integrity": "sha1-GLKB2lhbHFxR3vJMkw7SmgvmsXc=",
-      "dev": true,
+    "node_modules/npm/node_modules/promise-inflight": {
+      "version": "1.0.1",
+      "inBundle": true,
+      "license": "ISC"
+    },
+    "node_modules/npm/node_modules/promise-retry": {
+      "version": "2.0.1",
+      "inBundle": true,
+      "license": "MIT",
       "dependencies": {
-        "get-value": "^2.0.6",
-        "has-values": "^1.0.0",
-        "isobject": "^3.0.0"
+        "err-code": "^2.0.2",
+        "retry": "^0.12.0"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=10"
       }
     },
-    "node_modules/has-values": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/has-values/-/has-values-1.0.0.tgz",
-      "integrity": "sha1-lbC2P+whRmGab+V/51Yo1aOe/k8=",
-      "dev": true,
+    "node_modules/npm/node_modules/promzard": {
+      "version": "1.0.2",
+      "inBundle": true,
+      "license": "ISC",
       "dependencies": {
-        "is-number": "^3.0.0",
-        "kind-of": "^4.0.0"
+        "read": "^3.0.1"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
       }
     },
-    "node_modules/has-values/node_modules/is-buffer": {
-      "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
-      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
-      "dev": true
+    "node_modules/npm/node_modules/qrcode-terminal": {
+      "version": "0.12.0",
+      "inBundle": true,
+      "bin": {
+        "qrcode-terminal": "bin/qrcode-terminal.js"
+      }
     },
-    "node_modules/has-values/node_modules/kind-of": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-4.0.0.tgz",
-      "integrity": "sha1-IIE989cSkosgc3hpGkUGb65y3Vc=",
-      "dev": true,
+    "node_modules/npm/node_modules/read": {
+      "version": "3.0.1",
+      "inBundle": true,
+      "license": "ISC",
       "dependencies": {
-        "is-buffer": "^1.1.5"
+        "mute-stream": "^1.0.0"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
       }
     },
-    "node_modules/he": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
-      "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
-      "dev": true,
-      "bin": {
-        "he": "bin/he"
+    "node_modules/npm/node_modules/read-cmd-shim": {
+      "version": "4.0.0",
+      "inBundle": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
       }
     },
-    "node_modules/hex-color-regex": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz",
-      "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==",
-      "dev": true
-    },
-    "node_modules/history": {
-      "version": "4.10.1",
-      "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
-      "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==",
+    "node_modules/npm/node_modules/read-package-json-fast": {
+      "version": "3.0.2",
+      "inBundle": true,
+      "license": "ISC",
       "dependencies": {
-        "@babel/runtime": "^7.1.2",
-        "loose-envify": "^1.2.0",
-        "resolve-pathname": "^3.0.0",
-        "tiny-invariant": "^1.0.2",
-        "tiny-warning": "^1.0.0",
-        "value-equal": "^1.0.1"
+        "json-parse-even-better-errors": "^3.0.0",
+        "npm-normalize-package-bin": "^3.0.0"
+      },
+      "engines": {
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
       }
     },
-    "node_modules/hoist-non-react-statics": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
-      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
-      "dependencies": {
-        "react-is": "^16.7.0"
+    "node_modules/npm/node_modules/retry": {
+      "version": "0.12.0",
+      "inBundle": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
       }
     },
-    "node_modules/hoopy": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
-      "integrity": "sha512-HRcs+2mr52W0K+x8RzcLzuPPmVIKMSv97RGHy0Ea9y/mpcaK+xTrjICA04KAHi4GRzxliNqNJEFYWHghy3rSfQ==",
-      "dev": true,
-      "engines": {
-        "node": ">= 6.0.0"
-      }
+    "node_modules/npm/node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "inBundle": true,
+      "license": "MIT",
+      "optional": true
     },
-    "node_modules/hosted-git-info": {
-      "version": "2.8.8",
-      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.8.tgz",
-      "integrity": "sha512-f/wzC2QaWBs7t9IYqB4T3sR1xviIViXJRJTWBlx2Gf3g0Xi5vI7Yy4koXQ1c9OYDGHN9sBy1DQ2AB8fqZBWhUg==",
-      "dev": true
+    "node_modules/npm/node_modules/semver": {
+      "version": "7.6.3",
+      "inBundle": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
     },
-    "node_modules/hpack.js": {
-      "version": "2.1.6",
-      "resolved": "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz",
-      "integrity": "sha1-h3dMCUnlE/QuhFdbPEVoH63ioLI=",
-      "dev": true,
+    "node_modules/npm/node_modules/shebang-command": {
+      "version": "2.0.0",
+      "inBundle": true,
+      "license": "MIT",
       "dependencies": {
-        "inherits": "^2.0.1",
-        "obuf": "^1.0.0",
-        "readable-stream": "^2.0.1",
-        "wbuf": "^1.1.0"
+        "shebang-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
       }
     },
-    "node_modules/hsl-regex": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/hsl-regex/-/hsl-regex-1.0.0.tgz",
-      "integrity": "sha1-1JMwx4ntgZ4nakwNJy3/owsY/m4=",
-      "dev": true
+    "node_modules/npm/node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "inBundle": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
     },
-    "node_modules/hsla-regex": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/hsla-regex/-/hsla-regex-1.0.0.tgz",
-      "integrity": "sha1-wc56MWjIxmFAM6S194d/OyJfnDg=",
-      "dev": true
+    "node_modules/npm/node_modules/signal-exit": {
+      "version": "4.1.0",
+      "inBundle": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
     },
-    "node_modules/html-encoding-sniffer": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-1.0.2.tgz",
-      "integrity": "sha512-71lZziiDnsuabfdYiUeWdCVyKuqwWi23L8YeIgV9jSSZHCtb6wB1BKWooH7L3tn4/FuZJMVWyNaIDr4RGmaSYw==",
-      "dev": true,
+    "node_modules/npm/node_modules/sigstore": {
+      "version": "2.3.1",
+      "inBundle": true,
+      "license": "Apache-2.0",
       "dependencies": {
-        "whatwg-encoding": "^1.0.1"
+        "@sigstore/bundle": "^2.3.2",
+        "@sigstore/core": "^1.0.0",
+        "@sigstore/protobuf-specs": "^0.3.2",
+        "@sigstore/sign": "^2.3.2",
+        "@sigstore/tuf": "^2.3.4",
+        "@sigstore/verify": "^1.2.1"
+      },
+      "engines": {
+        "node": "^16.14.0 || >=18.0.0"
       }
     },
-    "node_modules/html-entities": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-2.3.2.tgz",
-      "integrity": "sha512-c3Ab/url5ksaT0WyleslpBEthOzWhrjQbg75y7XUsfSzi3Dgzt0l8w5e7DylRn15MTlMMD58dTfzddNS2kcAjQ==",
-      "dev": true
-    },
-    "node_modules/html-escaper": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz",
-      "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==",
-      "dev": true
+    "node_modules/npm/node_modules/smart-buffer": {
+      "version": "4.2.0",
+      "inBundle": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6.0.0",
+        "npm": ">= 3.0.0"
+      }
     },
-    "node_modules/html-minifier-terser": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz",
-      "integrity": "sha512-ZPr5MNObqnV/T9akshPKbVgyOqLmy+Bxo7juKCfTfnjNniTAMdy4hz21YQqoofMBJD2kdREaqPPdThoR78Tgxg==",
-      "dev": true,
+    "node_modules/npm/node_modules/socks": {
+      "version": "2.8.3",
+      "inBundle": true,
+      "license": "MIT",
       "dependencies": {
-        "camel-case": "^4.1.1",
-        "clean-css": "^4.2.3",
-        "commander": "^4.1.1",
-        "he": "^1.2.0",
-        "param-case": "^3.0.3",
-        "relateurl": "^0.2.7",
-        "terser": "^4.6.3"
-      },
-      "bin": {
-        "html-minifier-terser": "cli.js"
+        "ip-address": "^9.0.5",
+        "smart-buffer": "^4.2.0"
       },
       "engines": {
-        "node": ">=6"
+        "node": ">= 10.0.0",
+        "npm": ">= 3.0.0"
       }
     },
-    "node_modules/html-webpack-new-relic-plugin": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/html-webpack-new-relic-plugin/-/html-webpack-new-relic-plugin-4.1.0.tgz",
-      "integrity": "sha512-WLgEo9AXAOq35Cce+53rbbA/VHRUzdeh/E+KP6ltEUfx8E27LMCn3FdRo88kpki429c9UWD1lrevqczSvdZBRg==",
-      "dev": true
-    },
-    "node_modules/html-webpack-plugin": {
-      "version": "5.3.1",
-      "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.3.1.tgz",
-      "integrity": "sha512-rZsVvPXUYFyME0cuGkyOHfx9hmkFa4pWfxY/mdY38PsBEaVNsRoA+Id+8z6DBDgyv3zaw6XQszdF8HLwfQvcdQ==",
-      "dev": true,
+    "node_modules/npm/node_modules/socks-proxy-agent": {
+      "version": "8.0.4",
+      "inBundle": true,
+      "license": "MIT",
       "dependencies": {
-        "@types/html-minifier-terser": "^5.0.0",
-        "html-minifier-terser": "^5.0.1",
-        "lodash": "^4.17.20",
-        "pretty-error": "^2.1.1",
-        "tapable": "^2.0.0"
+        "agent-base": "^7.1.1",
+        "debug": "^4.3.4",
+        "socks": "^2.8.3"
       },
       "engines": {
-        "node": ">=10.13.0"
+        "node": ">= 14"
       }
     },
-    "node_modules/htmlparser2": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-6.1.0.tgz",
-      "integrity": "sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==",
-      "dev": true,
+    "node_modules/npm/node_modules/spdx-correct": {
+      "version": "3.2.0",
+      "inBundle": true,
+      "license": "Apache-2.0",
       "dependencies": {
-        "domelementtype": "^2.0.1",
-        "domhandler": "^4.0.0",
-        "domutils": "^2.5.2",
-        "entities": "^2.0.0"
+        "spdx-expression-parse": "^3.0.0",
+        "spdx-license-ids": "^3.0.0"
       }
     },
-    "node_modules/htmlparser2/node_modules/dom-serializer": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz",
-      "integrity": "sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==",
-      "dev": true,
+    "node_modules/npm/node_modules/spdx-correct/node_modules/spdx-expression-parse": {
+      "version": "3.0.1",
+      "inBundle": true,
+      "license": "MIT",
       "dependencies": {
-        "domelementtype": "^2.0.1",
-        "domhandler": "^4.2.0",
-        "entities": "^2.0.0"
+        "spdx-exceptions": "^2.1.0",
+        "spdx-license-ids": "^3.0.0"
       }
     },
-    "node_modules/htmlparser2/node_modules/domelementtype": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz",
-      "integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==",
-      "dev": true
+    "node_modules/npm/node_modules/spdx-exceptions": {
+      "version": "2.5.0",
+      "inBundle": true,
+      "license": "CC-BY-3.0"
     },
-    "node_modules/htmlparser2/node_modules/domutils": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.7.0.tgz",
-      "integrity": "sha512-8eaHa17IwJUPAiB+SoTYBo5mCdeMgdcAoXJ59m6DT1vw+5iLS3gNoqYaRowaBKtGVrOF1Jz4yDTgYKLK2kvfJg==",
-      "dev": true,
+    "node_modules/npm/node_modules/spdx-expression-parse": {
+      "version": "4.0.0",
+      "inBundle": true,
+      "license": "MIT",
       "dependencies": {
-        "dom-serializer": "^1.0.1",
-        "domelementtype": "^2.2.0",
-        "domhandler": "^4.2.0"
+        "spdx-exceptions": "^2.1.0",
+        "spdx-license-ids": "^3.0.0"
       }
     },
-    "node_modules/http-cache-semantics": {
-      "version": "3.8.1",
-      "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-3.8.1.tgz",
-      "integrity": "sha512-5ai2iksyV8ZXmnZhHH4rWPoxxistEexSi5936zIQ1bnNTW5VnA85B6P/VpXiRM017IgRvb2kKo1a//y+0wSp3w==",
-      "dev": true,
-      "optional": true
+    "node_modules/npm/node_modules/spdx-license-ids": {
+      "version": "3.0.18",
+      "inBundle": true,
+      "license": "CC0-1.0"
     },
-    "node_modules/http-deceiver": {
-      "version": "1.2.7",
-      "resolved": "https://registry.npmjs.org/http-deceiver/-/http-deceiver-1.2.7.tgz",
-      "integrity": "sha1-+nFolEq5pRnTN8sL7HKE3D5yPYc=",
-      "dev": true
+    "node_modules/npm/node_modules/sprintf-js": {
+      "version": "1.1.3",
+      "inBundle": true,
+      "license": "BSD-3-Clause"
     },
-    "node_modules/http-errors": {
-      "version": "1.7.2",
-      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.2.tgz",
-      "integrity": "sha512-uUQBt3H/cSIVfch6i1EuPNy/YsRSOUBXTVfZ+yR7Zjez3qjBz6i9+i4zjNaoqcoFVI4lQJ5plg63TvGfRSDCRg==",
-      "dev": true,
+    "node_modules/npm/node_modules/ssri": {
+      "version": "10.0.6",
+      "inBundle": true,
+      "license": "ISC",
       "dependencies": {
-        "depd": "~1.1.2",
-        "inherits": "2.0.3",
-        "setprototypeof": "1.1.1",
-        "statuses": ">= 1.5.0 < 2",
-        "toidentifier": "1.0.0"
+        "minipass": "^7.0.3"
       },
       "engines": {
-        "node": ">= 0.6"
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
       }
     },
-    "node_modules/http-errors/node_modules/inherits": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
-      "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
-      "dev": true
-    },
-    "node_modules/http-parser-js": {
-      "version": "0.5.3",
-      "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.3.tgz",
-      "integrity": "sha512-t7hjvef/5HEK7RWTdUzVUhl8zkEu+LlaE0IYzdMuvbSDipxBRpOn4Uhw8ZyECEa808iVT8XCjzo6xmYt4CiLZg==",
-      "dev": true
+    "node_modules/npm/node_modules/string-width": {
+      "version": "4.2.3",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
     },
-    "node_modules/http-proxy": {
-      "version": "1.18.1",
-      "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz",
-      "integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==",
-      "dev": true,
+    "node_modules/npm/node_modules/string-width-cjs": {
+      "name": "string-width",
+      "version": "4.2.3",
+      "inBundle": true,
+      "license": "MIT",
       "dependencies": {
-        "eventemitter3": "^4.0.0",
-        "follow-redirects": "^1.0.0",
-        "requires-port": "^1.0.0"
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
       },
       "engines": {
-        "node": ">=8.0.0"
+        "node": ">=8"
       }
     },
-    "node_modules/http-proxy-agent": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-4.0.1.tgz",
-      "integrity": "sha512-k0zdNgqWTGA6aeIRVpvfVob4fL52dTfaehylg0Y4UvSySvOq/Y+BOyPrgpUrA7HylqvU8vIZGsRuXmspskV0Tg==",
-      "dev": true,
+    "node_modules/npm/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "inBundle": true,
+      "license": "MIT",
       "dependencies": {
-        "@tootallnate/once": "1",
-        "agent-base": "6",
-        "debug": "4"
+        "ansi-regex": "^5.0.1"
       },
       "engines": {
-        "node": ">= 6"
+        "node": ">=8"
       }
     },
-    "node_modules/http-proxy-agent/node_modules/debug": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
-      "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
-      "dev": true,
+    "node_modules/npm/node_modules/strip-ansi-cjs": {
+      "name": "strip-ansi",
+      "version": "6.0.1",
+      "inBundle": true,
+      "license": "MIT",
       "dependencies": {
-        "ms": "^2.1.1"
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
       }
     },
-    "node_modules/http-proxy-agent/node_modules/ms": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-      "dev": true
+    "node_modules/npm/node_modules/supports-color": {
+      "version": "9.4.0",
+      "inBundle": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-color?sponsor=1"
+      }
     },
-    "node_modules/http-proxy-middleware": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-1.3.1.tgz",
-      "integrity": "sha512-13eVVDYS4z79w7f1+NPllJtOQFx/FdUW4btIvVRMaRlUY9VGstAbo5MOhLEuUgZFRHn3x50ufn25zkj/boZnEg==",
-      "dev": true,
-      "dependencies": {
-        "@types/http-proxy": "^1.17.5",
-        "http-proxy": "^1.18.1",
-        "is-glob": "^4.0.1",
-        "is-plain-obj": "^3.0.0",
-        "micromatch": "^4.0.2"
+    "node_modules/npm/node_modules/tar": {
+      "version": "6.2.1",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "chownr": "^2.0.0",
+        "fs-minipass": "^2.0.0",
+        "minipass": "^5.0.0",
+        "minizlib": "^2.1.1",
+        "mkdirp": "^1.0.3",
+        "yallist": "^4.0.0"
       },
       "engines": {
-        "node": ">=8.0.0"
+        "node": ">=10"
       }
     },
-    "node_modules/http-proxy-middleware/node_modules/braces": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-      "dev": true,
+    "node_modules/npm/node_modules/tar/node_modules/fs-minipass": {
+      "version": "2.1.0",
+      "inBundle": true,
+      "license": "ISC",
       "dependencies": {
-        "fill-range": "^7.0.1"
+        "minipass": "^3.0.0"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">= 8"
       }
     },
-    "node_modules/http-proxy-middleware/node_modules/fill-range": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-      "dev": true,
+    "node_modules/npm/node_modules/tar/node_modules/fs-minipass/node_modules/minipass": {
+      "version": "3.3.6",
+      "inBundle": true,
+      "license": "ISC",
       "dependencies": {
-        "to-regex-range": "^5.0.1"
+        "yallist": "^4.0.0"
       },
       "engines": {
         "node": ">=8"
       }
     },
-    "node_modules/http-proxy-middleware/node_modules/is-number": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "dev": true,
+    "node_modules/npm/node_modules/tar/node_modules/minipass": {
+      "version": "5.0.0",
+      "inBundle": true,
+      "license": "ISC",
       "engines": {
-        "node": ">=0.12.0"
+        "node": ">=8"
       }
     },
-    "node_modules/http-proxy-middleware/node_modules/is-plain-obj": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-3.0.0.tgz",
-      "integrity": "sha512-gwsOE28k+23GP1B6vFl1oVh/WOzmawBrKwo5Ev6wMKzPkaXaCDIQKzLnvsA42DRlbVTWorkgTKIviAKCWkfUwA==",
-      "dev": true,
-      "engines": {
-        "node": ">=10"
-      }
+    "node_modules/npm/node_modules/text-table": {
+      "version": "0.2.0",
+      "inBundle": true,
+      "license": "MIT"
     },
-    "node_modules/http-proxy-middleware/node_modules/micromatch": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz",
-      "integrity": "sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==",
-      "dev": true,
-      "dependencies": {
-        "braces": "^3.0.1",
-        "picomatch": "^2.2.3"
-      },
+    "node_modules/npm/node_modules/tiny-relative-date": {
+      "version": "1.3.0",
+      "inBundle": true,
+      "license": "MIT"
+    },
+    "node_modules/npm/node_modules/treeverse": {
+      "version": "3.0.0",
+      "inBundle": true,
+      "license": "ISC",
       "engines": {
-        "node": ">=8.6"
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
       }
     },
-    "node_modules/http-proxy-middleware/node_modules/to-regex-range": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dev": true,
+    "node_modules/npm/node_modules/tuf-js": {
+      "version": "2.2.1",
+      "inBundle": true,
+      "license": "MIT",
       "dependencies": {
-        "is-number": "^7.0.0"
+        "@tufjs/models": "2.0.1",
+        "debug": "^4.3.4",
+        "make-fetch-happen": "^13.0.1"
       },
       "engines": {
-        "node": ">=8.0"
+        "node": "^16.14.0 || >=18.0.0"
       }
     },
-    "node_modules/http-signature": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.2.0.tgz",
-      "integrity": "sha1-muzZJRFHcvPZW2WmCruPfBj7rOE=",
-      "dev": true,
+    "node_modules/npm/node_modules/unique-filename": {
+      "version": "3.0.0",
+      "inBundle": true,
+      "license": "ISC",
       "dependencies": {
-        "assert-plus": "^1.0.0",
-        "jsprim": "^1.2.2",
-        "sshpk": "^1.7.0"
+        "unique-slug": "^4.0.0"
       },
       "engines": {
-        "node": ">=0.8",
-        "npm": ">=1.3.7"
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
       }
     },
-    "node_modules/https-proxy-agent": {
+    "node_modules/npm/node_modules/unique-slug": {
       "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-4.0.0.tgz",
-      "integrity": "sha512-zoDhWrkR3of1l9QAL8/scJZyLu8j/gBkcwcaQOZh7Gyh/+uJQzGVETdgT30akuwkpL8HTRfssqI3BZuV18teDg==",
-      "dev": true,
+      "inBundle": true,
+      "license": "ISC",
       "dependencies": {
-        "agent-base": "5",
-        "debug": "4"
+        "imurmurhash": "^0.1.4"
       },
       "engines": {
-        "node": ">= 6.0.0"
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
       }
     },
-    "node_modules/https-proxy-agent/node_modules/agent-base": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-5.1.1.tgz",
-      "integrity": "sha512-TMeqbNl2fMW0nMjTEPOwe3J/PRFP4vqeoNuQMG0HlMrtm5QxKqdvAkZ1pRBQ/ulIyDD5Yq0nJ7YbdD8ey0TO3g==",
-      "dev": true,
-      "engines": {
-        "node": ">= 6.0.0"
-      }
+    "node_modules/npm/node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "inBundle": true,
+      "license": "MIT"
     },
-    "node_modules/https-proxy-agent/node_modules/debug": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
-      "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
-      "dev": true,
+    "node_modules/npm/node_modules/validate-npm-package-license": {
+      "version": "3.0.4",
+      "inBundle": true,
+      "license": "Apache-2.0",
       "dependencies": {
-        "ms": "^2.1.1"
+        "spdx-correct": "^3.0.0",
+        "spdx-expression-parse": "^3.0.0"
       }
     },
-    "node_modules/https-proxy-agent/node_modules/ms": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-      "dev": true
+    "node_modules/npm/node_modules/validate-npm-package-license/node_modules/spdx-expression-parse": {
+      "version": "3.0.1",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "spdx-exceptions": "^2.1.0",
+        "spdx-license-ids": "^3.0.0"
+      }
     },
-    "node_modules/human-signals": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
-      "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
-      "dev": true,
+    "node_modules/npm/node_modules/validate-npm-package-name": {
+      "version": "5.0.1",
+      "inBundle": true,
+      "license": "ISC",
       "engines": {
-        "node": ">=10.17.0"
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
       }
     },
-    "node_modules/husky": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/husky/-/husky-3.1.0.tgz",
-      "integrity": "sha512-FJkPoHHB+6s4a+jwPqBudBDvYZsoQW5/HBuMSehC8qDiCe50kpcxeqFoDSlow+9I6wg47YxBoT3WxaURlrDIIQ==",
-      "dev": true,
+    "node_modules/npm/node_modules/walk-up-path": {
+      "version": "3.0.1",
+      "inBundle": true,
+      "license": "ISC"
+    },
+    "node_modules/npm/node_modules/which": {
+      "version": "4.0.0",
+      "inBundle": true,
+      "license": "ISC",
       "dependencies": {
-        "chalk": "^2.4.2",
-        "ci-info": "^2.0.0",
-        "cosmiconfig": "^5.2.1",
-        "execa": "^1.0.0",
-        "get-stdin": "^7.0.0",
-        "opencollective-postinstall": "^2.0.2",
-        "pkg-dir": "^4.2.0",
-        "please-upgrade-node": "^3.2.0",
-        "read-pkg": "^5.2.0",
-        "run-node": "^1.0.0",
-        "slash": "^3.0.0"
+        "isexe": "^3.1.1"
       },
       "bin": {
-        "husky-run": "run.js",
-        "husky-upgrade": "lib/upgrader/bin.js"
+        "node-which": "bin/which.js"
       },
       "engines": {
-        "node": ">=8.6.0"
+        "node": "^16.13.0 || >=18.0.0"
       }
     },
-    "node_modules/husky/node_modules/cosmiconfig": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-5.2.1.tgz",
-      "integrity": "sha512-H65gsXo1SKjf8zmrJ67eJk8aIRKV5ff2D4uKZIBZShbhGSpEmsQOPW/SKMKYhSTrqR7ufy6RP69rPogdaPh/kA==",
-      "dev": true,
-      "dependencies": {
-        "import-fresh": "^2.0.0",
-        "is-directory": "^0.3.1",
-        "js-yaml": "^3.13.1",
-        "parse-json": "^4.0.0"
-      },
+    "node_modules/npm/node_modules/which/node_modules/isexe": {
+      "version": "3.1.1",
+      "inBundle": true,
+      "license": "ISC",
       "engines": {
-        "node": ">=4"
+        "node": ">=16"
       }
     },
-    "node_modules/husky/node_modules/get-stdin": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-7.0.0.tgz",
-      "integrity": "sha512-zRKcywvrXlXsA0v0i9Io4KDRaAw7+a1ZpjRwl9Wox8PFlVCCHra7E9c4kqXCoCM9nR5tBkaTTZRBoCm60bFqTQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/husky/node_modules/import-fresh": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-2.0.0.tgz",
-      "integrity": "sha1-2BNVwVYS04bGH53dOSLUMEgipUY=",
-      "dev": true,
+    "node_modules/npm/node_modules/wrap-ansi": {
+      "version": "8.1.0",
+      "inBundle": true,
+      "license": "MIT",
       "dependencies": {
-        "caller-path": "^2.0.0",
-        "resolve-from": "^3.0.0"
+        "ansi-styles": "^6.1.0",
+        "string-width": "^5.0.1",
+        "strip-ansi": "^7.0.1"
       },
       "engines": {
-        "node": ">=4"
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
       }
     },
-    "node_modules/husky/node_modules/parse-json": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
-      "integrity": "sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=",
-      "dev": true,
+    "node_modules/npm/node_modules/wrap-ansi-cjs": {
+      "name": "wrap-ansi",
+      "version": "7.0.0",
+      "inBundle": true,
+      "license": "MIT",
       "dependencies": {
-        "error-ex": "^1.3.1",
-        "json-parse-better-errors": "^1.0.1"
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
       },
       "engines": {
-        "node": ">=4"
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
       }
     },
-    "node_modules/husky/node_modules/pkg-dir": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
-      "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
-      "dev": true,
+    "node_modules/npm/node_modules/wrap-ansi-cjs/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "inBundle": true,
+      "license": "MIT",
       "dependencies": {
-        "find-up": "^4.0.0"
+        "color-convert": "^2.0.1"
       },
       "engines": {
         "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/husky/node_modules/read-pkg": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
-      "integrity": "sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==",
-      "dev": true,
-      "dependencies": {
-        "@types/normalize-package-data": "^2.4.0",
-        "normalize-package-data": "^2.5.0",
-        "parse-json": "^5.0.0",
-        "type-fest": "^0.6.0"
-      },
+    "node_modules/npm/node_modules/wrap-ansi/node_modules/ansi-regex": {
+      "version": "6.0.1",
+      "inBundle": true,
+      "license": "MIT",
       "engines": {
-        "node": ">=8"
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
       }
     },
-    "node_modules/husky/node_modules/read-pkg/node_modules/parse-json": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.0.0.tgz",
-      "integrity": "sha512-OOY5b7PAEFV0E2Fir1KOkxchnZNCdowAJgQ5NuxjpBKTRP3pQhwkrkxqQjeoKJ+fO7bCpmIZaogI4eZGDMEGOw==",
-      "dev": true,
+    "node_modules/npm/node_modules/wrap-ansi/node_modules/emoji-regex": {
+      "version": "9.2.2",
+      "inBundle": true,
+      "license": "MIT"
+    },
+    "node_modules/npm/node_modules/wrap-ansi/node_modules/string-width": {
+      "version": "5.1.2",
+      "inBundle": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/code-frame": "^7.0.0",
-        "error-ex": "^1.3.1",
-        "json-parse-better-errors": "^1.0.1",
-        "lines-and-columns": "^1.1.6"
+        "eastasianwidth": "^0.2.0",
+        "emoji-regex": "^9.2.2",
+        "strip-ansi": "^7.0.1"
       },
       "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/husky/node_modules/resolve-from": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz",
-      "integrity": "sha1-six699nWiBvItuZTM17rywoYh0g=",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/husky/node_modules/slash": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
-      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
-      "dev": true,
+    "node_modules/npm/node_modules/wrap-ansi/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "inBundle": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
       "engines": {
-        "node": ">=8"
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
       }
     },
-    "node_modules/husky/node_modules/type-fest": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.6.0.tgz",
-      "integrity": "sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==",
-      "dev": true,
+    "node_modules/npm/node_modules/write-file-atomic": {
+      "version": "5.0.1",
+      "inBundle": true,
+      "license": "ISC",
+      "dependencies": {
+        "imurmurhash": "^0.1.4",
+        "signal-exit": "^4.0.1"
+      },
       "engines": {
-        "node": ">=8"
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
       }
     },
-    "node_modules/hyphenate-style-name": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz",
-      "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ=="
+    "node_modules/npm/node_modules/yallist": {
+      "version": "4.0.0",
+      "inBundle": true,
+      "license": "ISC"
     },
-    "node_modules/i18n-iso-countries": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/i18n-iso-countries/-/i18n-iso-countries-4.3.1.tgz",
-      "integrity": "sha512-yxeCvmT8yO1p/epv93c1OHnnYNNMOX6NUNpNfuvzSIcDyripS7OGeKXgzYGd5QI31UK+GBrMG0nPFNv0jrHggw==",
+    "node_modules/nth-check": {
+      "version": "2.1.1",
+      "license": "BSD-2-Clause",
       "dependencies": {
-        "diacritics": "^1.3.0"
+        "boolbase": "^1.0.0"
       },
-      "engines": {
-        "node": ">= 6"
+      "funding": {
+        "url": "https://github.com/fb55/nth-check?sponsor=1"
       }
     },
-    "node_modules/iconv-lite": {
-      "version": "0.4.24",
-      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
-      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
-      "dev": true,
-      "dependencies": {
-        "safer-buffer": ">= 2.1.2 < 3"
-      },
+    "node_modules/nwsapi": {
+      "version": "2.2.12",
+      "license": "MIT"
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
       }
     },
-    "node_modules/icss-utils": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
-      "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
-      "dev": true,
+    "node_modules/object-code": {
+      "version": "1.3.3",
+      "license": "MIT"
+    },
+    "node_modules/object-filter": {
+      "version": "1.0.2",
+      "license": "MIT"
+    },
+    "node_modules/object-inspect": {
+      "version": "1.13.2",
+      "license": "MIT",
       "engines": {
-        "node": "^10 || ^12 || >= 14"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/identity-obj-proxy": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/identity-obj-proxy/-/identity-obj-proxy-3.0.0.tgz",
-      "integrity": "sha1-lNK9qWCERT7zb7xarsN+D3nx/BQ=",
+    "node_modules/object-is": {
+      "version": "1.1.6",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "harmony-reflect": "^1.4.6"
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1"
       },
       "engines": {
-        "node": ">=4"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/ieee754": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
-      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
-      "dev": true,
-      "optional": true
-    },
-    "node_modules/ignore": {
-      "version": "4.0.6",
-      "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
-      "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==",
-      "dev": true,
+    "node_modules/object-keys": {
+      "version": "1.1.1",
+      "license": "MIT",
       "engines": {
-        "node": ">= 4"
-      }
-    },
-    "node_modules/ignore-walk": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-3.0.3.tgz",
-      "integrity": "sha512-m7o6xuOaT1aqheYHKf8W6J5pYH85ZI9w077erOzLje3JsB1gkafkAhHHY19dqjulgIZHFm32Cp5uNZgcQqdJKw==",
-      "dev": true,
-      "dependencies": {
-        "minimatch": "^3.0.4"
+        "node": ">= 0.4"
       }
     },
-    "node_modules/image-webpack-loader": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/image-webpack-loader/-/image-webpack-loader-7.0.1.tgz",
-      "integrity": "sha512-Y6/lRqMGMhZayIx4AONjU1FIljNb9AfiA2SUZ2o65bN4xPcfHmI3MmhrcmphxK/hiwShK/Q7/9/JkPqQMX8HPw==",
-      "dev": true,
+    "node_modules/object.assign": {
+      "version": "4.1.5",
+      "license": "MIT",
       "dependencies": {
-        "imagemin": "^7.0.1",
-        "loader-utils": "^2.0.0",
-        "object-assign": "^4.1.1",
-        "schema-utils": "^2.7.1"
+        "call-bind": "^1.0.5",
+        "define-properties": "^1.2.1",
+        "has-symbols": "^1.0.3",
+        "object-keys": "^1.1.1"
       },
-      "optionalDependencies": {
-        "imagemin-gifsicle": "^7.0.0",
-        "imagemin-mozjpeg": "^9.0.0",
-        "imagemin-optipng": "^8.0.0",
-        "imagemin-pngquant": "^9.0.1",
-        "imagemin-svgo": "^8.0.0",
-        "imagemin-webp": "^6.0.0"
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/imagemin": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/imagemin/-/imagemin-7.0.1.tgz",
-      "integrity": "sha512-33AmZ+xjZhg2JMCe+vDf6a9mzWukE7l+wAtesjE7KyteqqKjzxv7aVQeWnul1Ve26mWvEQqyPwl0OctNBfSR9w==",
-      "dev": true,
+    "node_modules/object.entries": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.8.tgz",
+      "integrity": "sha512-cmopxi8VwRIAw/fkijJohSfpef5PdN0pMQJN6VC/ZKvn0LIknWD8KtgY6KlQdEc4tIjcQ3HxSMmnvtzIscdaYQ==",
       "dependencies": {
-        "file-type": "^12.0.0",
-        "globby": "^10.0.0",
-        "graceful-fs": "^4.2.2",
-        "junk": "^3.1.0",
-        "make-dir": "^3.0.0",
-        "p-pipe": "^3.0.0",
-        "replace-ext": "^1.0.0"
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">= 0.4"
       }
     },
-    "node_modules/imagemin-gifsicle": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/imagemin-gifsicle/-/imagemin-gifsicle-7.0.0.tgz",
-      "integrity": "sha512-LaP38xhxAwS3W8PFh4y5iQ6feoTSF+dTAXFRUEYQWYst6Xd+9L/iPk34QGgK/VO/objmIlmq9TStGfVY2IcHIA==",
-      "dev": true,
-      "optional": true,
+    "node_modules/object.fromentries": {
+      "version": "2.0.8",
+      "license": "MIT",
       "dependencies": {
-        "execa": "^1.0.0",
-        "gifsicle": "^5.0.0",
-        "is-gif": "^3.0.0"
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-object-atoms": "^1.0.0"
       },
       "engines": {
-        "node": ">=10"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/imagemin-mozjpeg": {
-      "version": "9.0.0",
-      "resolved": "https://registry.npmjs.org/imagemin-mozjpeg/-/imagemin-mozjpeg-9.0.0.tgz",
-      "integrity": "sha512-TwOjTzYqCFRgROTWpVSt5UTT0JeCuzF1jswPLKALDd89+PmrJ2PdMMYeDLYZ1fs9cTovI9GJd68mRSnuVt691w==",
-      "dev": true,
-      "optional": true,
+    "node_modules/object.groupby": {
+      "version": "1.0.3",
+      "license": "MIT",
+      "peer": true,
       "dependencies": {
-        "execa": "^4.0.0",
-        "is-jpg": "^2.0.0",
-        "mozjpeg": "^7.0.0"
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2"
       },
       "engines": {
-        "node": ">=10"
+        "node": ">= 0.4"
       }
     },
-    "node_modules/imagemin-mozjpeg/node_modules/cross-spawn": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-      "dev": true,
-      "optional": true,
+    "node_modules/object.hasown": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/object.hasown/-/object.hasown-1.1.4.tgz",
+      "integrity": "sha512-FZ9LZt9/RHzGySlBARE3VF+gE26TxR38SdmqOqliuTnl9wrKulaQs+4dee1V+Io8VfxqzAfHu6YuRgUy8OHoTg==",
       "dependencies": {
-        "path-key": "^3.1.0",
-        "shebang-command": "^2.0.0",
-        "which": "^2.0.1"
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-object-atoms": "^1.0.0"
       },
       "engines": {
-        "node": ">= 8"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/imagemin-mozjpeg/node_modules/execa": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/execa/-/execa-4.1.0.tgz",
-      "integrity": "sha512-j5W0//W7f8UxAn8hXVnwG8tLwdiUy4FJLcSupCg6maBYZDpyBvTApK7KyuI4bKj8KOh1r2YH+6ucuYtJv1bTZA==",
-      "dev": true,
-      "optional": true,
+    "node_modules/object.values": {
+      "version": "1.2.0",
+      "license": "MIT",
       "dependencies": {
-        "cross-spawn": "^7.0.0",
-        "get-stream": "^5.0.0",
-        "human-signals": "^1.1.1",
-        "is-stream": "^2.0.0",
-        "merge-stream": "^2.0.0",
-        "npm-run-path": "^4.0.0",
-        "onetime": "^5.1.0",
-        "signal-exit": "^3.0.2",
-        "strip-final-newline": "^2.0.0"
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
       },
       "engines": {
-        "node": ">=10"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/imagemin-mozjpeg/node_modules/get-stream": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz",
-      "integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==",
-      "dev": true,
-      "optional": true,
+    "node_modules/obuf": {
+      "version": "1.1.2",
+      "license": "MIT"
+    },
+    "node_modules/on-finished": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
+      "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
       "dependencies": {
-        "pump": "^3.0.0"
+        "ee-first": "1.1.1"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">= 0.8"
       }
     },
-    "node_modules/imagemin-mozjpeg/node_modules/human-signals": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-1.1.1.tgz",
-      "integrity": "sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==",
-      "dev": true,
-      "optional": true,
+    "node_modules/on-headers": {
+      "version": "1.0.2",
+      "license": "MIT",
       "engines": {
-        "node": ">=8.12.0"
+        "node": ">= 0.8"
       }
     },
-    "node_modules/imagemin-mozjpeg/node_modules/is-stream": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.0.tgz",
-      "integrity": "sha512-XCoy+WlUr7d1+Z8GgSuXmpuUFC9fOhRXglJMx+dwLKTkL44Cjd4W1Z5P+BQZpr+cR93aGP4S/s7Ftw6Nd/kiEw==",
-      "dev": true,
-      "optional": true,
-      "engines": {
-        "node": ">=8"
+    "node_modules/once": {
+      "version": "1.4.0",
+      "license": "ISC",
+      "dependencies": {
+        "wrappy": "1"
       }
     },
-    "node_modules/imagemin-mozjpeg/node_modules/npm-run-path": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
-      "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
-      "dev": true,
-      "optional": true,
+    "node_modules/onetime": {
+      "version": "5.1.2",
+      "license": "MIT",
       "dependencies": {
-        "path-key": "^3.0.0"
+        "mimic-fn": "^2.1.0"
       },
       "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/imagemin-mozjpeg/node_modules/path-key": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-      "dev": true,
-      "optional": true,
-      "engines": {
-        "node": ">=8"
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/imagemin-mozjpeg/node_modules/shebang-command": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-      "dev": true,
-      "optional": true,
+    "node_modules/open": {
+      "version": "8.4.2",
+      "license": "MIT",
       "dependencies": {
-        "shebang-regex": "^3.0.0"
+        "define-lazy-prop": "^2.0.0",
+        "is-docker": "^2.1.1",
+        "is-wsl": "^2.2.0"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/imagemin-mozjpeg/node_modules/shebang-regex": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-      "dev": true,
-      "optional": true,
-      "engines": {
-        "node": ">=8"
+    "node_modules/opener": {
+      "version": "1.5.2",
+      "license": "(WTFPL OR MIT)",
+      "bin": {
+        "opener": "bin/opener-bin.js"
       }
     },
-    "node_modules/imagemin-mozjpeg/node_modules/which": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-      "dev": true,
-      "optional": true,
+    "node_modules/optionator": {
+      "version": "0.9.4",
+      "license": "MIT",
       "dependencies": {
-        "isexe": "^2.0.0"
-      },
-      "bin": {
-        "node-which": "bin/node-which"
+        "deep-is": "^0.1.3",
+        "fast-levenshtein": "^2.0.6",
+        "levn": "^0.4.1",
+        "prelude-ls": "^1.2.1",
+        "type-check": "^0.4.0",
+        "word-wrap": "^1.2.5"
       },
       "engines": {
-        "node": ">= 8"
+        "node": ">= 0.8.0"
       }
     },
-    "node_modules/imagemin-optipng": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/imagemin-optipng/-/imagemin-optipng-8.0.0.tgz",
-      "integrity": "sha512-CUGfhfwqlPjAC0rm8Fy+R2DJDBGjzy2SkfyT09L8rasnF9jSoHFqJ1xxSZWK6HVPZBMhGPMxCTL70OgTHlLF5A==",
-      "dev": true,
-      "optional": true,
+    "node_modules/ora": {
+      "version": "5.4.1",
+      "license": "MIT",
       "dependencies": {
-        "exec-buffer": "^3.0.0",
-        "is-png": "^2.0.0",
-        "optipng-bin": "^7.0.0"
+        "bl": "^4.1.0",
+        "chalk": "^4.1.0",
+        "cli-cursor": "^3.1.0",
+        "cli-spinners": "^2.5.0",
+        "is-interactive": "^1.0.0",
+        "is-unicode-supported": "^0.1.0",
+        "log-symbols": "^4.1.0",
+        "strip-ansi": "^6.0.0",
+        "wcwidth": "^1.0.1"
       },
       "engines": {
         "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/imagemin-pngquant": {
-      "version": "9.0.2",
-      "resolved": "https://registry.npmjs.org/imagemin-pngquant/-/imagemin-pngquant-9.0.2.tgz",
-      "integrity": "sha512-cj//bKo8+Frd/DM8l6Pg9pws1pnDUjgb7ae++sUX1kUVdv2nrngPykhiUOgFeE0LGY/LmUbCf4egCHC4YUcZSg==",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "execa": "^4.0.0",
-        "is-png": "^2.0.0",
-        "is-stream": "^2.0.0",
-        "ow": "^0.17.0",
-        "pngquant-bin": "^6.0.0"
-      },
+    "node_modules/os-tmpdir": {
+      "version": "1.0.2",
+      "license": "MIT",
       "engines": {
-        "node": ">=10"
+        "node": ">=0.10.0"
       }
     },
-    "node_modules/imagemin-pngquant/node_modules/cross-spawn": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-      "dev": true,
-      "optional": true,
+    "node_modules/p-limit": {
+      "version": "3.1.0",
+      "license": "MIT",
       "dependencies": {
-        "path-key": "^3.1.0",
-        "shebang-command": "^2.0.0",
-        "which": "^2.0.1"
+        "yocto-queue": "^0.1.0"
       },
       "engines": {
-        "node": ">= 8"
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/imagemin-pngquant/node_modules/execa": {
+    "node_modules/p-locate": {
       "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/execa/-/execa-4.1.0.tgz",
-      "integrity": "sha512-j5W0//W7f8UxAn8hXVnwG8tLwdiUy4FJLcSupCg6maBYZDpyBvTApK7KyuI4bKj8KOh1r2YH+6ucuYtJv1bTZA==",
-      "dev": true,
-      "optional": true,
+      "license": "MIT",
       "dependencies": {
-        "cross-spawn": "^7.0.0",
-        "get-stream": "^5.0.0",
-        "human-signals": "^1.1.1",
-        "is-stream": "^2.0.0",
-        "merge-stream": "^2.0.0",
-        "npm-run-path": "^4.0.0",
-        "onetime": "^5.1.0",
-        "signal-exit": "^3.0.2",
-        "strip-final-newline": "^2.0.0"
+        "p-limit": "^2.2.0"
       },
       "engines": {
-        "node": ">=10"
+        "node": ">=8"
       }
     },
-    "node_modules/imagemin-pngquant/node_modules/get-stream": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz",
-      "integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==",
-      "dev": true,
-      "optional": true,
+    "node_modules/p-locate/node_modules/p-limit": {
+      "version": "2.3.0",
+      "license": "MIT",
       "dependencies": {
-        "pump": "^3.0.0"
+        "p-try": "^2.0.0"
       },
       "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/imagemin-pngquant/node_modules/human-signals": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-1.1.1.tgz",
-      "integrity": "sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==",
-      "dev": true,
-      "optional": true,
-      "engines": {
-        "node": ">=8.12.0"
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/imagemin-pngquant/node_modules/is-stream": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.0.tgz",
-      "integrity": "sha512-XCoy+WlUr7d1+Z8GgSuXmpuUFC9fOhRXglJMx+dwLKTkL44Cjd4W1Z5P+BQZpr+cR93aGP4S/s7Ftw6Nd/kiEw==",
-      "dev": true,
-      "optional": true,
+    "node_modules/p-map": {
+      "version": "2.1.0",
+      "license": "MIT",
       "engines": {
-        "node": ">=8"
+        "node": ">=6"
       }
     },
-    "node_modules/imagemin-pngquant/node_modules/npm-run-path": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
-      "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
-      "dev": true,
-      "optional": true,
+    "node_modules/p-retry": {
+      "version": "4.6.2",
+      "license": "MIT",
       "dependencies": {
-        "path-key": "^3.0.0"
+        "@types/retry": "0.12.0",
+        "retry": "^0.13.1"
       },
       "engines": {
         "node": ">=8"
       }
     },
-    "node_modules/imagemin-pngquant/node_modules/path-key": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-      "dev": true,
-      "optional": true,
+    "node_modules/p-try": {
+      "version": "2.2.0",
+      "license": "MIT",
       "engines": {
-        "node": ">=8"
+        "node": ">=6"
       }
     },
-    "node_modules/imagemin-pngquant/node_modules/shebang-command": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "shebang-regex": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
+    "node_modules/pako": {
+      "version": "1.0.11",
+      "license": "(MIT AND Zlib)"
     },
-    "node_modules/imagemin-pngquant/node_modules/shebang-regex": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-      "dev": true,
-      "optional": true,
-      "engines": {
-        "node": ">=8"
+    "node_modules/param-case": {
+      "version": "3.0.4",
+      "license": "MIT",
+      "dependencies": {
+        "dot-case": "^3.0.4",
+        "tslib": "^2.0.3"
       }
     },
-    "node_modules/imagemin-pngquant/node_modules/which": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-      "dev": true,
-      "optional": true,
+    "node_modules/parent-module": {
+      "version": "1.0.1",
+      "license": "MIT",
       "dependencies": {
-        "isexe": "^2.0.0"
-      },
-      "bin": {
-        "node-which": "bin/node-which"
+        "callsites": "^3.0.0"
       },
       "engines": {
-        "node": ">= 8"
+        "node": ">=6"
       }
     },
-    "node_modules/imagemin-svgo": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/imagemin-svgo/-/imagemin-svgo-8.0.0.tgz",
-      "integrity": "sha512-++fDnnxsLT+4rpt8babwiIbzapgBzeS2Kgcy+CwgBvgSRFltBFhX2WnpCziMtxhRCzqJcCE9EcHWZP/sj+G3rQ==",
-      "dev": true,
-      "optional": true,
+    "node_modules/parse-json": {
+      "version": "5.2.0",
+      "license": "MIT",
       "dependencies": {
-        "is-svg": "^4.2.1",
-        "svgo": "^1.3.2"
+        "@babel/code-frame": "^7.0.0",
+        "error-ex": "^1.3.1",
+        "json-parse-even-better-errors": "^2.3.0",
+        "lines-and-columns": "^1.1.6"
       },
       "engines": {
-        "node": ">=10"
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/imagemin-webp": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/imagemin-webp/-/imagemin-webp-6.0.0.tgz",
-      "integrity": "sha512-DmVCkI8H1csyqAExsk93LzC88gj2uKXaLLW5Ly+WYsvNx7xv5cJAlozXWIx9Z0kEQr9w98gphi5aP2b++iDH8g==",
-      "dev": true,
-      "optional": true,
+    "node_modules/parse5": {
+      "version": "7.1.2",
+      "license": "MIT",
       "dependencies": {
-        "cwebp-bin": "^5.0.0",
-        "exec-buffer": "^3.0.0",
-        "is-cwebp-readable": "^3.0.0"
+        "entities": "^4.4.0"
       },
-      "engines": {
-        "node": ">=10"
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
       }
     },
-    "node_modules/imagemin/node_modules/array-union": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
-      "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
-      "dev": true,
+    "node_modules/parseurl": {
+      "version": "1.3.3",
+      "license": "MIT",
       "engines": {
-        "node": ">=8"
+        "node": ">= 0.8"
       }
     },
-    "node_modules/imagemin/node_modules/globby": {
-      "version": "10.0.2",
-      "resolved": "https://registry.npmjs.org/globby/-/globby-10.0.2.tgz",
-      "integrity": "sha512-7dUi7RvCoT/xast/o/dLN53oqND4yk0nsHkhRgn9w65C4PofCLOoJ39iSOg+qVDdWQPIEj+eszMHQ+aLVwwQSg==",
-      "dev": true,
+    "node_modules/pascal-case": {
+      "version": "3.1.2",
+      "license": "MIT",
       "dependencies": {
-        "@types/glob": "^7.1.1",
-        "array-union": "^2.1.0",
-        "dir-glob": "^3.0.1",
-        "fast-glob": "^3.0.3",
-        "glob": "^7.1.3",
-        "ignore": "^5.1.1",
-        "merge2": "^1.2.3",
-        "slash": "^3.0.0"
-      },
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/path-exists": {
+      "version": "4.0.0",
+      "license": "MIT",
       "engines": {
         "node": ">=8"
       }
     },
-    "node_modules/imagemin/node_modules/ignore": {
-      "version": "5.1.8",
-      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.1.8.tgz",
-      "integrity": "sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw==",
-      "dev": true,
+    "node_modules/path-is-absolute": {
+      "version": "1.0.1",
+      "license": "MIT",
       "engines": {
-        "node": ">= 4"
+        "node": ">=0.10.0"
       }
     },
-    "node_modules/imagemin/node_modules/make-dir": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
-      "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
-      "dev": true,
-      "dependencies": {
-        "semver": "^6.0.0"
-      },
+    "node_modules/path-is-inside": {
+      "version": "1.0.2",
+      "license": "(WTFPL OR MIT)"
+    },
+    "node_modules/path-key": {
+      "version": "3.1.1",
+      "license": "MIT",
       "engines": {
         "node": ">=8"
       }
     },
-    "node_modules/imagemin/node_modules/semver": {
-      "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-      "dev": true,
-      "bin": {
-        "semver": "bin/semver.js"
-      }
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "license": "MIT"
     },
-    "node_modules/imagemin/node_modules/slash": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
-      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
-      "dev": true,
+    "node_modules/path-to-regexp": {
+      "version": "0.1.10",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.10.tgz",
+      "integrity": "sha512-7lf7qcQidTku0Gu3YDPc8DJ1q7OOucfa/BSsIwjuh56VU7katFvuM8hULfkwB3Fns/rsVF7PwPKVw1sl5KQS9w=="
+    },
+    "node_modules/path-type": {
+      "version": "4.0.0",
+      "license": "MIT",
       "engines": {
         "node": ">=8"
       }
     },
-    "node_modules/immediate": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
-      "integrity": "sha1-nbHb0Pr43m++D13V5Wu2BigN5ps="
-    },
-    "node_modules/immer": {
-      "version": "8.0.1",
-      "resolved": "https://registry.npmjs.org/immer/-/immer-8.0.1.tgz",
-      "integrity": "sha512-aqXhGP7//Gui2+UrEtvxZxSquQVXTpZ7KDxfCcKAF3Vysvw0CViVaW9RZ1j1xlIYqaaaipBoqdqeibkc18PNvA==",
-      "dev": true
+    "node_modules/picocolors": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.0.tgz",
+      "integrity": "sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==",
+      "license": "ISC"
     },
-    "node_modules/import-fresh": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
-      "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
-      "dev": true,
-      "dependencies": {
-        "parent-module": "^1.0.0",
-        "resolve-from": "^4.0.0"
+    "node_modules/picomatch": {
+      "version": "2.3.1",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
       },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/pify": {
+      "version": "4.0.1",
+      "license": "MIT",
       "engines": {
         "node": ">=6"
       }
     },
-    "node_modules/import-lazy": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/import-lazy/-/import-lazy-3.1.0.tgz",
-      "integrity": "sha512-8/gvXvX2JMn0F+CDlSC4l6kOmVaLOO3XLkksI7CI3Ud95KDYJuYur2b9P/PUt/i/pDAMd/DulQsNbbbmRRsDIQ==",
-      "dev": true,
-      "optional": true,
+    "node_modules/pinkie": {
+      "version": "2.0.4",
+      "license": "MIT",
       "engines": {
-        "node": ">=6"
+        "node": ">=0.10.0"
       }
     },
-    "node_modules/import-local": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/import-local/-/import-local-3.0.2.tgz",
-      "integrity": "sha512-vjL3+w0oulAVZ0hBHnxa/Nm5TAurf9YLQJDhqRZyqb+VKGOB6LU8t9H1Nr5CIo16vh9XfJTOoHwU0B71S557gA==",
-      "dev": true,
+    "node_modules/pinkie-promise": {
+      "version": "2.0.1",
+      "license": "MIT",
       "dependencies": {
-        "pkg-dir": "^4.2.0",
-        "resolve-cwd": "^3.0.0"
+        "pinkie": "^2.0.0"
       },
-      "bin": {
-        "import-local-fixture": "fixtures/cli.js"
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/pirates": {
+      "version": "4.0.6",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/pkg-dir": {
+      "version": "7.0.0",
+      "license": "MIT",
+      "dependencies": {
+        "find-up": "^6.3.0"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/import-local/node_modules/pkg-dir": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
-      "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
-      "dev": true,
+    "node_modules/pkg-dir/node_modules/find-up": {
+      "version": "6.3.0",
+      "license": "MIT",
       "dependencies": {
-        "find-up": "^4.0.0"
+        "locate-path": "^7.1.0",
+        "path-exists": "^5.0.0"
       },
       "engines": {
-        "node": ">=8"
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/imurmurhash": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
-      "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o=",
-      "dev": true,
+    "node_modules/pkg-dir/node_modules/locate-path": {
+      "version": "7.2.0",
+      "license": "MIT",
+      "dependencies": {
+        "p-locate": "^6.0.0"
+      },
       "engines": {
-        "node": ">=0.8.19"
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/indent-string": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-2.1.0.tgz",
-      "integrity": "sha1-ji1INIdCEhtKghi3oTfppSBJ3IA=",
-      "dev": true,
-      "optional": true,
+    "node_modules/pkg-dir/node_modules/p-limit": {
+      "version": "4.0.0",
+      "license": "MIT",
       "dependencies": {
-        "repeating": "^2.0.0"
+        "yocto-queue": "^1.0.0"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/inflight": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
-      "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
+    "node_modules/pkg-dir/node_modules/p-locate": {
+      "version": "6.0.0",
+      "license": "MIT",
       "dependencies": {
-        "once": "^1.3.0",
-        "wrappy": "1"
+        "p-limit": "^4.0.0"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/inherits": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
+    "node_modules/pkg-dir/node_modules/path-exists": {
+      "version": "5.0.0",
+      "license": "MIT",
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      }
     },
-    "node_modules/ini": {
-      "version": "1.3.8",
-      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
-      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
-      "dev": true
+    "node_modules/pkg-dir/node_modules/yocto-queue": {
+      "version": "1.1.1",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
     },
-    "node_modules/inquirer": {
-      "version": "7.3.3",
-      "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-7.3.3.tgz",
-      "integrity": "sha512-JG3eIAj5V9CwcGvuOmoo6LB9kbAYT8HXffUl6memuszlwDC/qvFAJw49XJ5NROSFNPxp3iQg1GqkFhaY/CR0IA==",
-      "dev": true,
+    "node_modules/pkg-up": {
+      "version": "3.1.0",
+      "license": "MIT",
       "dependencies": {
-        "ansi-escapes": "^4.2.1",
-        "chalk": "^4.1.0",
-        "cli-cursor": "^3.1.0",
-        "cli-width": "^3.0.0",
-        "external-editor": "^3.0.3",
-        "figures": "^3.0.0",
-        "lodash": "^4.17.19",
-        "mute-stream": "0.0.8",
-        "run-async": "^2.4.0",
-        "rxjs": "^6.6.0",
-        "string-width": "^4.1.0",
-        "strip-ansi": "^6.0.0",
-        "through": "^2.3.6"
+        "find-up": "^3.0.0"
       },
       "engines": {
-        "node": ">=8.0.0"
+        "node": ">=8"
       }
     },
-    "node_modules/inquirer/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,
+    "node_modules/pkg-up/node_modules/find-up": {
+      "version": "3.0.0",
+      "license": "MIT",
       "dependencies": {
-        "color-convert": "^2.0.1"
+        "locate-path": "^3.0.0"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">=6"
       }
     },
-    "node_modules/inquirer/node_modules/chalk": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
-      "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
-      "dev": true,
+    "node_modules/pkg-up/node_modules/locate-path": {
+      "version": "3.0.0",
+      "license": "MIT",
       "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
+        "p-locate": "^3.0.0",
+        "path-exists": "^3.0.0"
       },
       "engines": {
-        "node": ">=10"
+        "node": ">=6"
       }
     },
-    "node_modules/inquirer/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,
+    "node_modules/pkg-up/node_modules/p-limit": {
+      "version": "2.3.0",
+      "license": "MIT",
       "dependencies": {
-        "color-name": "~1.1.4"
+        "p-try": "^2.0.0"
       },
       "engines": {
-        "node": ">=7.0.0"
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/inquirer/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/pkg-up/node_modules/p-locate": {
+      "version": "3.0.0",
+      "license": "MIT",
+      "dependencies": {
+        "p-limit": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
     },
-    "node_modules/inquirer/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,
+    "node_modules/pkg-up/node_modules/path-exists": {
+      "version": "3.0.0",
+      "license": "MIT",
       "engines": {
-        "node": ">=8"
+        "node": ">=4"
       }
     },
-    "node_modules/inquirer/node_modules/strip-ansi": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
-      "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
-      "dev": true,
-      "dependencies": {
-        "ansi-regex": "^5.0.0"
-      },
+    "node_modules/popper.js": {
+      "version": "1.16.1",
+      "license": "MIT",
+      "peer": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
+    "node_modules/possible-typed-array-names": {
+      "version": "1.0.0",
+      "license": "MIT",
       "engines": {
-        "node": ">=8"
+        "node": ">= 0.4"
       }
     },
-    "node_modules/inquirer/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,
+    "node_modules/postcss": {
+      "version": "8.4.47",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.47.tgz",
+      "integrity": "sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
       "dependencies": {
-        "has-flag": "^4.0.0"
+        "nanoid": "^3.3.7",
+        "picocolors": "^1.1.0",
+        "source-map-js": "^1.2.1"
       },
       "engines": {
-        "node": ">=8"
+        "node": "^10 || ^12 || >=14"
       }
     },
-    "node_modules/internal-ip": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/internal-ip/-/internal-ip-6.2.0.tgz",
-      "integrity": "sha512-D8WGsR6yDt8uq7vDMu7mjcR+yRMm3dW8yufyChmszWRjcSHuxLBkR3GdS2HZAjodsaGuCvXeEJpueisXJULghg==",
-      "dev": true,
+    "node_modules/postcss-calc": {
+      "version": "9.0.1",
+      "license": "MIT",
       "dependencies": {
-        "default-gateway": "^6.0.0",
-        "ipaddr.js": "^1.9.1",
-        "is-ip": "^3.1.0",
-        "p-event": "^4.2.0"
+        "postcss-selector-parser": "^6.0.11",
+        "postcss-value-parser": "^4.2.0"
       },
       "engines": {
-        "node": ">=10"
+        "node": "^14 || ^16 || >=18.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.2"
       }
     },
-    "node_modules/internal-ip/node_modules/p-event": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/p-event/-/p-event-4.2.0.tgz",
-      "integrity": "sha512-KXatOjCRXXkSePPb1Nbi0p0m+gQAwdlbhi4wQKJPI1HsMQS9g+Sqp2o+QHziPr7eYJyOZet836KoHEVM1mwOrQ==",
-      "dev": true,
+    "node_modules/postcss-colormin": {
+      "version": "6.1.0",
+      "license": "MIT",
       "dependencies": {
-        "p-timeout": "^3.1.0"
+        "browserslist": "^4.23.0",
+        "caniuse-api": "^3.0.0",
+        "colord": "^2.9.3",
+        "postcss-value-parser": "^4.2.0"
       },
       "engines": {
-        "node": ">=8"
+        "node": "^14 || ^16 || >=18.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.31"
       }
     },
-    "node_modules/internal-ip/node_modules/p-timeout": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/p-timeout/-/p-timeout-3.2.0.tgz",
-      "integrity": "sha512-rhIwUycgwwKcP9yTOOFK/AKsAopjjCakVqLHePO3CC6Mir1Z99xT+R63jZxAT5lFZLa2inS5h+ZS2GvR99/FBg==",
-      "dev": true,
+    "node_modules/postcss-convert-values": {
+      "version": "6.1.0",
+      "license": "MIT",
       "dependencies": {
-        "p-finally": "^1.0.0"
+        "browserslist": "^4.23.0",
+        "postcss-value-parser": "^4.2.0"
       },
       "engines": {
-        "node": ">=8"
+        "node": "^14 || ^16 || >=18.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.31"
       }
     },
-    "node_modules/internal-slot": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.3.tgz",
-      "integrity": "sha512-O0DB1JC/sPyZl7cIo78n5dR7eUSwwpYPiXRhTzNxZVAMUuB8vlnRFyLxdrVToks6XPLVnFfbzaVd5WLjhgg+vA==",
-      "dev": true,
+    "node_modules/postcss-custom-media": {
+      "version": "10.0.8",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT",
       "dependencies": {
-        "get-intrinsic": "^1.1.0",
-        "has": "^1.0.3",
-        "side-channel": "^1.0.4"
+        "@csstools/cascade-layer-name-parser": "^1.0.13",
+        "@csstools/css-parser-algorithms": "^2.7.1",
+        "@csstools/css-tokenizer": "^2.4.1",
+        "@csstools/media-query-list-parser": "^2.1.13"
       },
       "engines": {
-        "node": ">= 0.4"
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
       }
     },
-    "node_modules/interpret": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/interpret/-/interpret-2.2.0.tgz",
-      "integrity": "sha512-Ju0Bz/cEia55xDwUWEa8+olFpCiQoypjnQySseKtmjNrnps3P+xfpUmGr90T7yjlVJmOtybRvPXhKMbHr+fWnw==",
-      "dev": true,
+    "node_modules/postcss-discard-comments": {
+      "version": "6.0.2",
+      "license": "MIT",
       "engines": {
-        "node": ">= 0.10"
+        "node": "^14 || ^16 || >=18.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.31"
       }
     },
-    "node_modules/intl-format-cache": {
-      "version": "2.2.9",
-      "resolved": "https://registry.npmjs.org/intl-format-cache/-/intl-format-cache-2.2.9.tgz",
-      "integrity": "sha512-Zv/u8wRpekckv0cLkwpVdABYST4hZNTDaX7reFetrYTJwxExR2VyTqQm+l0WmL0Qo8Mjb9Tf33qnfj0T7pjxdQ=="
-    },
-    "node_modules/intl-messageformat": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-2.2.0.tgz",
-      "integrity": "sha1-NFvNRt5jC3aDMwwuUhd/9eq0hPw=",
-      "dependencies": {
-        "intl-messageformat-parser": "1.4.0"
+    "node_modules/postcss-discard-duplicates": {
+      "version": "6.0.3",
+      "license": "MIT",
+      "engines": {
+        "node": "^14 || ^16 || >=18.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.31"
       }
     },
-    "node_modules/intl-messageformat-parser": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/intl-messageformat-parser/-/intl-messageformat-parser-1.4.0.tgz",
-      "integrity": "sha1-tD1FqXRoytvkQzHXS7Ho3qRPwHU="
-    },
-    "node_modules/intl-relativeformat": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/intl-relativeformat/-/intl-relativeformat-2.2.0.tgz",
-      "integrity": "sha512-4bV/7kSKaPEmu6ArxXf9xjv1ny74Zkwuey8Pm01NH4zggPP7JHwg2STk8Y3JdspCKRDriwIyLRfEXnj2ZLr4Bw==",
-      "dependencies": {
-        "intl-messageformat": "^2.0.0"
+    "node_modules/postcss-discard-empty": {
+      "version": "6.0.3",
+      "license": "MIT",
+      "engines": {
+        "node": "^14 || ^16 || >=18.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.31"
       }
     },
-    "node_modules/into-stream": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/into-stream/-/into-stream-3.1.0.tgz",
-      "integrity": "sha1-lvsKk2wSur1v8XUqF9BWFqvQlMY=",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "from2": "^2.1.1",
-        "p-is-promise": "^1.1.0"
-      },
+    "node_modules/postcss-discard-overridden": {
+      "version": "6.0.2",
+      "license": "MIT",
       "engines": {
-        "node": ">=4"
+        "node": "^14 || ^16 || >=18.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.31"
       }
     },
-    "node_modules/invariant": {
-      "version": "2.2.4",
-      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
-      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+    "node_modules/postcss-loader": {
+      "version": "7.3.4",
+      "license": "MIT",
       "dependencies": {
-        "loose-envify": "^1.0.0"
-      }
-    },
-    "node_modules/ip": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.5.tgz",
-      "integrity": "sha1-vd7XARQpCCjAoDnnLvJfWq7ENUo=",
-      "dev": true
-    },
-    "node_modules/ip-regex": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ip-regex/-/ip-regex-4.3.0.tgz",
-      "integrity": "sha512-B9ZWJxHHOHUhUjCPrMpLD4xEq35bUTClHM1S6CBU5ixQnkZmwipwgc96vAd7AAGM9TGHvJR+Uss+/Ak6UphK+Q==",
-      "dev": true,
+        "cosmiconfig": "^8.3.5",
+        "jiti": "^1.20.0",
+        "semver": "^7.5.4"
+      },
       "engines": {
-        "node": ">=8"
+        "node": ">= 14.15.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "postcss": "^7.0.0 || ^8.0.1",
+        "webpack": "^5.0.0"
       }
     },
-    "node_modules/ipaddr.js": {
-      "version": "1.9.1",
-      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
-      "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
-      "dev": true,
+    "node_modules/postcss-loader/node_modules/semver": {
+      "version": "7.6.3",
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
       "engines": {
-        "node": ">= 0.10"
+        "node": ">=10"
       }
     },
-    "node_modules/is-absolute-url": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/is-absolute-url/-/is-absolute-url-3.0.3.tgz",
-      "integrity": "sha512-opmNIX7uFnS96NtPmhWQgQx6/NYFgsUXYMllcfzwWKUMwfo8kku1TvE6hkNcH+Q1ts5cMVrsY7j0bxXQDciu9Q==",
+    "node_modules/postcss-media-query-parser": {
+      "version": "0.2.3",
       "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
+      "license": "MIT"
     },
-    "node_modules/is-accessor-descriptor": {
-      "version": "0.1.6",
-      "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz",
-      "integrity": "sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=",
-      "dev": true,
+    "node_modules/postcss-merge-longhand": {
+      "version": "6.0.5",
+      "license": "MIT",
       "dependencies": {
-        "kind-of": "^3.0.2"
+        "postcss-value-parser": "^4.2.0",
+        "stylehacks": "^6.1.1"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": "^14 || ^16 || >=18.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.31"
       }
     },
-    "node_modules/is-accessor-descriptor/node_modules/is-buffer": {
-      "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
-      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
-      "dev": true
-    },
-    "node_modules/is-accessor-descriptor/node_modules/kind-of": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-      "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
-      "dev": true,
+    "node_modules/postcss-merge-rules": {
+      "version": "6.1.1",
+      "license": "MIT",
       "dependencies": {
-        "is-buffer": "^1.1.5"
+        "browserslist": "^4.23.0",
+        "caniuse-api": "^3.0.0",
+        "cssnano-utils": "^4.0.2",
+        "postcss-selector-parser": "^6.0.16"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": "^14 || ^16 || >=18.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.31"
       }
     },
-    "node_modules/is-arguments": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.0.tgz",
-      "integrity": "sha512-1Ij4lOMPl/xB5kBDn7I+b2ttPMKa8szhEIrXDuXQD/oe3HJLTLhqhgGspwgyGd6MOywBUqVvYicF72lkgDnIHg==",
-      "dev": true,
+    "node_modules/postcss-minify-font-values": {
+      "version": "6.1.0",
+      "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.0"
+        "postcss-value-parser": "^4.2.0"
       },
       "engines": {
-        "node": ">= 0.4"
+        "node": "^14 || ^16 || >=18.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.31"
       }
     },
-    "node_modules/is-arrayish": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
-      "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=",
-      "dev": true
-    },
-    "node_modules/is-bigint": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.2.tgz",
-      "integrity": "sha512-0JV5+SOCQkIdzjBK9buARcV804Ddu7A0Qet6sHi3FimE9ne6m4BGQZfRn+NZiXbBk4F4XmHfDZIipLj9pX8dSA=="
-    },
-    "node_modules/is-binary-path": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-1.0.1.tgz",
-      "integrity": "sha1-dfFmQrSA8YenEcgUFh/TpKdlWJg=",
-      "dev": true,
+    "node_modules/postcss-minify-gradients": {
+      "version": "6.0.3",
+      "license": "MIT",
       "dependencies": {
-        "binary-extensions": "^1.0.0"
+        "colord": "^2.9.3",
+        "cssnano-utils": "^4.0.2",
+        "postcss-value-parser": "^4.2.0"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": "^14 || ^16 || >=18.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.31"
       }
     },
-    "node_modules/is-boolean-object": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.1.tgz",
-      "integrity": "sha512-bXdQWkECBUIAcCkeH1unwJLIpZYaa5VvuygSyS/c2lf719mTKZDU5UdDRlpd01UjADgmW8RfqaP+mRaVPdr/Ng==",
+    "node_modules/postcss-minify-params": {
+      "version": "6.1.0",
+      "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.2"
+        "browserslist": "^4.23.0",
+        "cssnano-utils": "^4.0.2",
+        "postcss-value-parser": "^4.2.0"
       },
       "engines": {
-        "node": ">= 0.4"
+        "node": "^14 || ^16 || >=18.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.31"
       }
     },
-    "node_modules/is-buffer": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.5.tgz",
-      "integrity": "sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==",
-      "dev": true,
+    "node_modules/postcss-minify-selectors": {
+      "version": "6.0.4",
+      "license": "MIT",
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.16"
+      },
       "engines": {
-        "node": ">=4"
+        "node": "^14 || ^16 || >=18.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.31"
       }
     },
-    "node_modules/is-callable": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.0.tgz",
-      "integrity": "sha512-pyVD9AaGLxtg6srb2Ng6ynWJqkHU9bEM087AKck0w8QwDarTfNcpIYoU8x8Hv2Icm8u6kFJM18Dag8lyqGkviw==",
+    "node_modules/postcss-modules-extract-imports": {
+      "version": "3.1.0",
+      "license": "ISC",
       "engines": {
-        "node": ">= 0.4"
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
       }
     },
-    "node_modules/is-ci": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/is-ci/-/is-ci-2.0.0.tgz",
-      "integrity": "sha512-YfJT7rkpQB0updsdHLGWrvhBJfcfzNNawYDNIyQXJz0IViGf75O8EBPKSdvw2rF+LGCsX4FZ8tcr3b19LcZq4w==",
-      "dev": true,
+    "node_modules/postcss-modules-local-by-default": {
+      "version": "4.0.5",
+      "license": "MIT",
       "dependencies": {
-        "ci-info": "^2.0.0"
+        "icss-utils": "^5.0.0",
+        "postcss-selector-parser": "^6.0.2",
+        "postcss-value-parser": "^4.1.0"
       },
-      "bin": {
-        "is-ci": "bin.js"
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
       }
     },
-    "node_modules/is-color-stop": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/is-color-stop/-/is-color-stop-1.1.0.tgz",
-      "integrity": "sha1-z/9HGu5N1cnhWFmPvhKWe1za00U=",
-      "dev": true,
+    "node_modules/postcss-modules-scope": {
+      "version": "3.2.0",
+      "license": "ISC",
       "dependencies": {
-        "css-color-names": "^0.0.4",
-        "hex-color-regex": "^1.1.0",
-        "hsl-regex": "^1.0.0",
-        "hsla-regex": "^1.0.0",
-        "rgb-regex": "^1.0.1",
-        "rgba-regex": "^1.0.0"
+        "postcss-selector-parser": "^6.0.4"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
       }
     },
-    "node_modules/is-color-stop/node_modules/css-color-names": {
-      "version": "0.0.4",
-      "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
-      "integrity": "sha1-gIrcLnnPhHOAabZGyyDsJ762KeA=",
-      "dev": true,
+    "node_modules/postcss-modules-values": {
+      "version": "4.0.0",
+      "license": "ISC",
+      "dependencies": {
+        "icss-utils": "^5.0.0"
+      },
       "engines": {
-        "node": "*"
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
       }
     },
-    "node_modules/is-core-module": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.4.0.tgz",
-      "integrity": "sha512-6A2fkfq1rfeQZjxrZJGerpLCTHRNEBiSgnu0+obeJpEPZRUooHgsizvzv0ZjJwOz3iWIHdJtVWJ/tmPr3D21/A==",
-      "dev": true,
+    "node_modules/postcss-normalize-charset": {
+      "version": "6.0.2",
+      "license": "MIT",
+      "engines": {
+        "node": "^14 || ^16 || >=18.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.31"
+      }
+    },
+    "node_modules/postcss-normalize-display-values": {
+      "version": "6.0.2",
+      "license": "MIT",
       "dependencies": {
-        "has": "^1.0.3"
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.31"
       }
     },
-    "node_modules/is-cwebp-readable": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/is-cwebp-readable/-/is-cwebp-readable-3.0.0.tgz",
-      "integrity": "sha512-bpELc7/Q1/U5MWHn4NdHI44R3jxk0h9ew9ljzabiRl70/UIjL/ZAqRMb52F5+eke/VC8yTiv4Ewryo1fPWidvA==",
-      "dev": true,
-      "optional": true,
+    "node_modules/postcss-normalize-positions": {
+      "version": "6.0.2",
+      "license": "MIT",
       "dependencies": {
-        "file-type": "^10.5.0"
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.31"
       }
     },
-    "node_modules/is-cwebp-readable/node_modules/file-type": {
-      "version": "10.11.0",
-      "resolved": "https://registry.npmjs.org/file-type/-/file-type-10.11.0.tgz",
-      "integrity": "sha512-uzk64HRpUZyTGZtVuvrjP0FYxzQrBf4rojot6J65YMEbwBLB0CWm0CLojVpwpmFmxcE/lkvYICgfcGozbBq6rw==",
-      "dev": true,
-      "optional": true,
+    "node_modules/postcss-normalize-repeat-style": {
+      "version": "6.0.2",
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
       "engines": {
-        "node": ">=6"
+        "node": "^14 || ^16 || >=18.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.31"
       }
     },
-    "node_modules/is-data-descriptor": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz",
-      "integrity": "sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=",
-      "dev": true,
+    "node_modules/postcss-normalize-string": {
+      "version": "6.0.2",
+      "license": "MIT",
       "dependencies": {
-        "kind-of": "^3.0.2"
+        "postcss-value-parser": "^4.2.0"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": "^14 || ^16 || >=18.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.31"
       }
     },
-    "node_modules/is-data-descriptor/node_modules/is-buffer": {
-      "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
-      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
-      "dev": true
+    "node_modules/postcss-normalize-timing-functions": {
+      "version": "6.0.2",
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.31"
+      }
     },
-    "node_modules/is-data-descriptor/node_modules/kind-of": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-      "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
-      "dev": true,
+    "node_modules/postcss-normalize-unicode": {
+      "version": "6.1.0",
+      "license": "MIT",
       "dependencies": {
-        "is-buffer": "^1.1.5"
+        "browserslist": "^4.23.0",
+        "postcss-value-parser": "^4.2.0"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": "^14 || ^16 || >=18.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.31"
       }
     },
-    "node_modules/is-date-object": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.2.tgz",
-      "integrity": "sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g==",
+    "node_modules/postcss-normalize-url": {
+      "version": "6.0.2",
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
       "engines": {
-        "node": ">= 0.4"
+        "node": "^14 || ^16 || >=18.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.31"
       }
     },
-    "node_modules/is-descriptor": {
-      "version": "0.1.6",
-      "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-0.1.6.tgz",
-      "integrity": "sha512-avDYr0SB3DwO9zsMov0gKCESFYqCnE4hq/4z3TdUlukEy5t9C0YRq7HLrsN52NAcqXKaepeCD0n+B0arnVG3Hg==",
-      "dev": true,
+    "node_modules/postcss-normalize-whitespace": {
+      "version": "6.0.2",
+      "license": "MIT",
       "dependencies": {
-        "is-accessor-descriptor": "^0.1.6",
-        "is-data-descriptor": "^0.1.4",
-        "kind-of": "^5.0.0"
+        "postcss-value-parser": "^4.2.0"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": "^14 || ^16 || >=18.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.31"
       }
     },
-    "node_modules/is-descriptor/node_modules/kind-of": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-5.1.0.tgz",
-      "integrity": "sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw==",
-      "dev": true,
+    "node_modules/postcss-ordered-values": {
+      "version": "6.0.2",
+      "license": "MIT",
+      "dependencies": {
+        "cssnano-utils": "^4.0.2",
+        "postcss-value-parser": "^4.2.0"
+      },
       "engines": {
-        "node": ">=0.10.0"
+        "node": "^14 || ^16 || >=18.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.31"
       }
     },
-    "node_modules/is-directory": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/is-directory/-/is-directory-0.3.1.tgz",
-      "integrity": "sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE=",
-      "dev": true,
+    "node_modules/postcss-reduce-initial": {
+      "version": "6.1.0",
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.23.0",
+        "caniuse-api": "^3.0.0"
+      },
       "engines": {
-        "node": ">=0.10.0"
+        "node": "^14 || ^16 || >=18.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.31"
       }
     },
-    "node_modules/is-docker": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
-      "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
-      "dev": true,
-      "bin": {
-        "is-docker": "cli.js"
+    "node_modules/postcss-reduce-transforms": {
+      "version": "6.0.2",
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
       },
       "engines": {
-        "node": ">=8"
+        "node": "^14 || ^16 || >=18.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.31"
       }
     },
-    "node_modules/is-extendable": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
-      "integrity": "sha1-YrEQ4omkcUGOPsNqYX1HLjAd/Ik=",
+    "node_modules/postcss-resolve-nested-selector": {
+      "version": "0.1.6",
       "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/postcss-rtlcss": {
+      "version": "5.1.2",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "rtlcss": "4.1.1"
+      },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.21"
       }
     },
-    "node_modules/is-extglob": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
-      "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=",
+    "node_modules/postcss-safe-parser": {
+      "version": "6.0.0",
       "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=12.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.3.3"
       }
     },
-    "node_modules/is-finite": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/is-finite/-/is-finite-1.1.0.tgz",
-      "integrity": "sha512-cdyMtqX/BOqqNBBiKlIVkytNHm49MtMlYyn1zxzvJKWmFMlGzm+ry5BBfYyeY9YmNKbRSo/o7OX9w9ale0wg3w==",
+    "node_modules/postcss-scss": {
+      "version": "4.0.9",
       "dev": true,
-      "optional": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss-scss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=12.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.29"
       }
     },
-    "node_modules/is-fullwidth-code-point": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
-      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-      "dev": true,
+    "node_modules/postcss-selector-parser": {
+      "version": "6.1.1",
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
       "engines": {
-        "node": ">=8"
+        "node": ">=4"
       }
     },
-    "node_modules/is-generator-fn": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-generator-fn/-/is-generator-fn-2.1.0.tgz",
-      "integrity": "sha512-cTIB4yPYL/Grw0EaSzASzg6bBy9gqCofvWN8okThAYIxKJZC+udlRAmGbM0XLeniEJSs8uEgHPGuHSe1XsOLSQ==",
-      "dev": true,
+    "node_modules/postcss-svgo": {
+      "version": "6.0.3",
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0",
+        "svgo": "^3.2.0"
+      },
       "engines": {
-        "node": ">=6"
+        "node": "^14 || ^16 || >= 18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.31"
       }
     },
-    "node_modules/is-gif": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/is-gif/-/is-gif-3.0.0.tgz",
-      "integrity": "sha512-IqJ/jlbw5WJSNfwQ/lHEDXF8rxhRgF6ythk2oiEvhpG29F704eX9NO6TvPfMiq9DrbwgcEDnETYNcZDPewQoVw==",
-      "dev": true,
-      "optional": true,
+    "node_modules/postcss-unique-selectors": {
+      "version": "6.0.4",
+      "license": "MIT",
       "dependencies": {
-        "file-type": "^10.4.0"
+        "postcss-selector-parser": "^6.0.16"
       },
       "engines": {
-        "node": ">=6"
+        "node": "^14 || ^16 || >=18.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.31"
       }
     },
-    "node_modules/is-gif/node_modules/file-type": {
-      "version": "10.11.0",
-      "resolved": "https://registry.npmjs.org/file-type/-/file-type-10.11.0.tgz",
-      "integrity": "sha512-uzk64HRpUZyTGZtVuvrjP0FYxzQrBf4rojot6J65YMEbwBLB0CWm0CLojVpwpmFmxcE/lkvYICgfcGozbBq6rw==",
-      "dev": true,
-      "optional": true,
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "license": "MIT"
+    },
+    "node_modules/prebuild-install": {
+      "version": "7.1.2",
+      "license": "MIT",
+      "dependencies": {
+        "detect-libc": "^2.0.0",
+        "expand-template": "^2.0.3",
+        "github-from-package": "0.0.0",
+        "minimist": "^1.2.3",
+        "mkdirp-classic": "^0.5.3",
+        "napi-build-utils": "^1.0.1",
+        "node-abi": "^3.3.0",
+        "pump": "^3.0.0",
+        "rc": "^1.2.7",
+        "simple-get": "^4.0.0",
+        "tar-fs": "^2.0.0",
+        "tunnel-agent": "^0.6.0"
+      },
+      "bin": {
+        "prebuild-install": "bin.js"
+      },
       "engines": {
-        "node": ">=6"
+        "node": ">=10"
       }
     },
-    "node_modules/is-glob": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz",
-      "integrity": "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==",
-      "dev": true,
+    "node_modules/prebuild-install/node_modules/readable-stream": {
+      "version": "3.6.2",
+      "license": "MIT",
       "dependencies": {
-        "is-extglob": "^2.1.1"
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">= 6"
       }
     },
-    "node_modules/is-invalid-path": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/is-invalid-path/-/is-invalid-path-0.1.0.tgz",
-      "integrity": "sha1-MHqFWzzxqTi0TqcNLGEQYFNxTzQ=",
-      "dev": true,
+    "node_modules/prebuild-install/node_modules/tar-fs": {
+      "version": "2.1.1",
+      "license": "MIT",
       "dependencies": {
-        "is-glob": "^2.0.0"
+        "chownr": "^1.1.1",
+        "mkdirp-classic": "^0.5.2",
+        "pump": "^3.0.0",
+        "tar-stream": "^2.1.4"
+      }
+    },
+    "node_modules/prebuild-install/node_modules/tar-stream": {
+      "version": "2.2.0",
+      "license": "MIT",
+      "dependencies": {
+        "bl": "^4.0.3",
+        "end-of-stream": "^1.4.1",
+        "fs-constants": "^1.0.0",
+        "inherits": "^2.0.3",
+        "readable-stream": "^3.1.1"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=6"
       }
     },
-    "node_modules/is-invalid-path/node_modules/is-extglob": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-1.0.0.tgz",
-      "integrity": "sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA=",
-      "dev": true,
+    "node_modules/prelude-ls": {
+      "version": "1.2.1",
+      "license": "MIT",
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">= 0.8.0"
       }
     },
-    "node_modules/is-invalid-path/node_modules/is-glob": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-2.0.1.tgz",
-      "integrity": "sha1-0Jb5JqPe1WAPP9/ZEZjLCIjC2GM=",
-      "dev": true,
+    "node_modules/pretty-error": {
+      "version": "4.0.0",
+      "license": "MIT",
       "dependencies": {
-        "is-extglob": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
+        "lodash": "^4.17.20",
+        "renderkid": "^3.0.0"
       }
     },
-    "node_modules/is-ip": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/is-ip/-/is-ip-3.1.0.tgz",
-      "integrity": "sha512-35vd5necO7IitFPjd/YBeqwWnyDWbuLH9ZXQdMfDA8TEo7pv5X8yfrvVO3xbJbLUlERCMvf6X0hTUamQxCYJ9Q==",
+    "node_modules/pretty-format": {
+      "version": "27.5.1",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "ip-regex": "^4.0.0"
+        "ansi-regex": "^5.0.1",
+        "ansi-styles": "^5.0.0",
+        "react-is": "^17.0.1"
       },
       "engines": {
-        "node": ">=8"
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
       }
     },
-    "node_modules/is-jpg": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/is-jpg/-/is-jpg-2.0.0.tgz",
-      "integrity": "sha1-LhmX+m6RZuqsAkLarkQ0A+TvHZc=",
+    "node_modules/pretty-format/node_modules/ansi-styles": {
+      "version": "5.2.0",
       "dev": true,
-      "optional": true,
+      "license": "MIT",
       "engines": {
-        "node": ">=6"
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/is-natural-number": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/is-natural-number/-/is-natural-number-4.0.1.tgz",
-      "integrity": "sha1-q5124dtM7VHjXeDHLr7PCfc0zeg=",
+    "node_modules/pretty-format/node_modules/react-is": {
+      "version": "17.0.2",
       "dev": true,
-      "optional": true
+      "license": "MIT"
     },
-    "node_modules/is-negative-zero": {
+    "node_modules/process-nextick-args": {
       "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.1.tgz",
-      "integrity": "sha512-2z6JzQvZRa9A2Y7xC6dQQm4FSTSTNWjKIYYTt4246eMTJmIo0Q+ZyOsU66X8lxK1AbB92dFeglPLrhwpeRKO6w==",
-      "engines": {
-        "node": ">= 0.4"
-      }
+      "license": "MIT"
     },
-    "node_modules/is-number": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
-      "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=",
-      "dev": true,
+    "node_modules/prompts": {
+      "version": "2.4.2",
+      "license": "MIT",
       "dependencies": {
-        "kind-of": "^3.0.2"
+        "kleur": "^3.0.3",
+        "sisteransi": "^1.0.5"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">= 6"
       }
     },
-    "node_modules/is-number-object": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.0.5.tgz",
-      "integrity": "sha512-RU0lI/n95pMoUKu9v1BZP5MBcZuNSVJkMkAG2dJqC4z2GlkGUNeH68SuHuBKBD/XFe+LHZ+f9BKkLET60Niedw==",
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/is-number/node_modules/is-buffer": {
-      "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
-      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
-      "dev": true
-    },
-    "node_modules/is-number/node_modules/kind-of": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-      "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
-      "dev": true,
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "license": "MIT",
       "dependencies": {
-        "is-buffer": "^1.1.5"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/is-object": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/is-object/-/is-object-1.0.2.tgz",
-      "integrity": "sha512-2rRIahhZr2UWb45fIOuvZGpFtz0TyOZLf32KxBbSoUCeZR495zCKlWUKKUByk3geS2eAs7ZAABt0Y/Rx0GiQGA==",
-      "dev": true,
-      "optional": true
-    },
-    "node_modules/is-path-cwd": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/is-path-cwd/-/is-path-cwd-2.2.0.tgz",
-      "integrity": "sha512-w942bTcih8fdJPJmQHFzkS76NEP8Kzzvmw92cXsazb8intwLqPibPPdXf4ANdKV3rYMuuQYGIWtvz9JilB3NFQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
       }
     },
-    "node_modules/is-path-in-cwd": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-path-in-cwd/-/is-path-in-cwd-2.1.0.tgz",
-      "integrity": "sha512-rNocXHgipO+rvnP6dk3zI20RpOtrAM/kzbB258Uw5BWr3TpXi861yzjo16Dn4hUox07iw5AyeMLHWsujkjzvRQ==",
-      "dev": true,
+    "node_modules/prop-types-extra": {
+      "version": "1.1.1",
+      "license": "MIT",
       "dependencies": {
-        "is-path-inside": "^2.1.0"
+        "react-is": "^16.3.2",
+        "warning": "^4.0.0"
       },
-      "engines": {
-        "node": ">=6"
+      "peerDependencies": {
+        "react": ">=0.14.0"
       }
     },
-    "node_modules/is-path-inside": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-2.1.0.tgz",
-      "integrity": "sha512-wiyhTzfDWsvwAW53OBWF5zuvaOGlZ6PwYxAbPVDhpm+gM09xKQGjBq/8uYN12aDvMxnAnq3dxTyoSoRNmg5YFg==",
-      "dev": true,
+    "node_modules/property-expr": {
+      "version": "2.0.6",
+      "license": "MIT"
+    },
+    "node_modules/proxy-addr": {
+      "version": "2.0.7",
+      "license": "MIT",
       "dependencies": {
-        "path-is-inside": "^1.0.2"
+        "forwarded": "0.2.0",
+        "ipaddr.js": "1.9.1"
       },
       "engines": {
-        "node": ">=6"
+        "node": ">= 0.10"
       }
     },
-    "node_modules/is-plain-obj": {
+    "node_modules/proxy-from-env": {
       "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz",
-      "integrity": "sha1-caUMhCnfync8kqOQpKA7OfzVHT4=",
-      "dev": true,
-      "optional": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
+      "license": "MIT"
     },
-    "node_modules/is-plain-object": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
-      "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
-      "dev": true,
+    "node_modules/psl": {
+      "version": "1.9.0",
+      "license": "MIT"
+    },
+    "node_modules/pubsub-js": {
+      "version": "1.9.4",
+      "license": "MIT"
+    },
+    "node_modules/pump": {
+      "version": "3.0.0",
+      "license": "MIT",
       "dependencies": {
-        "isobject": "^3.0.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
+        "end-of-stream": "^1.1.0",
+        "once": "^1.3.1"
       }
     },
-    "node_modules/is-png": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/is-png/-/is-png-2.0.0.tgz",
-      "integrity": "sha512-4KPGizaVGj2LK7xwJIz8o5B2ubu1D/vcQsgOGFEDlpcvgZHto4gBnyd0ig7Ws+67ixmwKoNmu0hYnpo6AaKb5g==",
-      "dev": true,
-      "optional": true,
+    "node_modules/punycode": {
+      "version": "2.3.1",
+      "license": "MIT",
       "engines": {
-        "node": ">=8"
+        "node": ">=6"
       }
     },
-    "node_modules/is-potential-custom-element-name": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
-      "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==",
-      "dev": true
+    "node_modules/pure-rand": {
+      "version": "6.1.0",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/dubzzz"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fast-check"
+        }
+      ],
+      "license": "MIT"
     },
-    "node_modules/is-regex": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.0.tgz",
-      "integrity": "sha512-iI97M8KTWID2la5uYXlkbSDQIg4F6o1sYboZKKTDpnDQMLtUL86zxhgDet3Q2SriaYsyGqZ6Mn2SjbRKeLHdqw==",
+    "node_modules/purgecss": {
+      "version": "5.0.0",
+      "license": "MIT",
       "dependencies": {
-        "has-symbols": "^1.0.1"
+        "commander": "^9.0.0",
+        "glob": "^8.0.3",
+        "postcss": "^8.4.4",
+        "postcss-selector-parser": "^6.0.7"
       },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/is-resolvable": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/is-resolvable/-/is-resolvable-1.1.0.tgz",
-      "integrity": "sha512-qgDYXFSR5WvEfuS5dMj6oTMEbrrSaM0CrFk2Yiq/gXnBvD9pMa2jGXxyhGLfvhZpuMZe18CJpFxAt3CRs42NMg==",
-      "dev": true
-    },
-    "node_modules/is-retry-allowed": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/is-retry-allowed/-/is-retry-allowed-1.2.0.tgz",
-      "integrity": "sha512-RUbUeKwvm3XG2VYamhJL1xFktgjvPzL0Hq8C+6yrWIswDy3BIXGqCxhxkc30N9jqK311gVU137K8Ei55/zVJRg==",
-      "dev": true,
-      "optional": true,
-      "engines": {
-        "node": ">=0.10.0"
+      "bin": {
+        "purgecss": "bin/purgecss.js"
       }
     },
-    "node_modules/is-root": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-root/-/is-root-2.1.0.tgz",
-      "integrity": "sha512-AGOriNp96vNBd3HtU+RzFEc75FfR5ymiYv8E553I71SCeXBiMsVDUtdio1OEFvrPyLIQ9tVR5RxXIFe5PUFjMg==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
+    "node_modules/purgecss/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
       }
     },
-    "node_modules/is-stream": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
-      "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ=",
-      "dev": true,
+    "node_modules/purgecss/node_modules/commander": {
+      "version": "9.5.0",
+      "license": "MIT",
       "engines": {
-        "node": ">=0.10.0"
+        "node": "^12.20.0 || >=14"
       }
     },
-    "node_modules/is-string": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.6.tgz",
-      "integrity": "sha512-2gdzbKUuqtQ3lYNrUTQYoClPhm7oQu4UdpSZMp1/DGgkHBT8E2Z1l0yMdb6D4zNAxwDiMv8MdulKROJGNl0Q0w==",
+    "node_modules/purgecss/node_modules/glob": {
+      "version": "8.1.0",
+      "license": "ISC",
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^5.0.1",
+        "once": "^1.3.0"
+      },
       "engines": {
-        "node": ">= 0.4"
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/is-svg": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/is-svg/-/is-svg-4.3.1.tgz",
-      "integrity": "sha512-h2CGs+yPUyvkgTJQS9cJzo9lYK06WgRiXUqBBHtglSzVKAuH4/oWsqk7LGfbSa1hGk9QcZ0SyQtVggvBA8LZXA==",
-      "dev": true,
-      "optional": true,
+    "node_modules/purgecss/node_modules/minimatch": {
+      "version": "5.1.6",
+      "license": "ISC",
       "dependencies": {
-        "fast-xml-parser": "^3.19.0"
+        "brace-expansion": "^2.0.1"
       },
       "engines": {
-        "node": ">=6"
+        "node": ">=10"
       }
     },
-    "node_modules/is-symbol": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.3.tgz",
-      "integrity": "sha512-OwijhaRSgqvhm/0ZdAcXNZt9lYdKFpcRDT5ULUuYXPoT794UNOdU+gpT6Rzo7b4V2HUl/op6GqY894AZwv9faQ==",
+    "node_modules/qs": {
+      "version": "6.13.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.13.0.tgz",
+      "integrity": "sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==",
       "dependencies": {
-        "has-symbols": "^1.0.1"
+        "side-channel": "^1.0.6"
       },
       "engines": {
-        "node": ">= 0.4"
+        "node": ">=0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/is-typedarray": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
-      "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=",
-      "dev": true
-    },
-    "node_modules/is-utf8": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/is-utf8/-/is-utf8-0.2.1.tgz",
-      "integrity": "sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=",
-      "dev": true,
-      "optional": true
-    },
-    "node_modules/is-valid-path": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/is-valid-path/-/is-valid-path-0.1.1.tgz",
-      "integrity": "sha1-EQ+f90w39mPh7HkV60UfLbk6yd8=",
-      "dev": true,
+    "node_modules/query-string": {
+      "version": "7.0.1",
+      "license": "MIT",
       "dependencies": {
-        "is-invalid-path": "^0.1.0"
+        "decode-uri-component": "^0.2.0",
+        "filter-obj": "^1.1.0",
+        "split-on-first": "^1.0.0",
+        "strict-uri-encode": "^2.0.0"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/is-windows": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz",
-      "integrity": "sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==",
-      "dev": true,
+    "node_modules/query-string/node_modules/decode-uri-component": {
+      "version": "0.2.2",
+      "license": "MIT",
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=0.10"
       }
     },
-    "node_modules/is-wsl": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
-      "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
+    "node_modules/querystring": {
+      "version": "0.2.1",
       "dev": true,
-      "dependencies": {
-        "is-docker": "^2.0.0"
-      },
+      "license": "MIT",
       "engines": {
-        "node": ">=8"
+        "node": ">=0.4.x"
       }
     },
-    "node_modules/isarray": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-      "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
-    },
-    "node_modules/isexe": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
-      "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=",
-      "dev": true
+    "node_modules/querystringify": {
+      "version": "2.2.0",
+      "license": "MIT"
     },
-    "node_modules/isobject": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
-      "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
     },
-    "node_modules/isstream": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
-      "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=",
-      "dev": true
+    "node_modules/queue-tick": {
+      "version": "1.0.1",
+      "license": "MIT"
     },
-    "node_modules/istanbul-lib-coverage": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.0.0.tgz",
-      "integrity": "sha512-UiUIqxMgRDET6eR+o5HbfRYP1l0hqkWOs7vNxC/mggutCMUIhWMm8gAHb8tHlyfD3/l6rlgNA5cKdDzEAf6hEg==",
+    "node_modules/quick-lru": {
+      "version": "5.1.1",
       "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": ">=8"
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/istanbul-lib-instrument": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/istanbul-lib-instrument/-/istanbul-lib-instrument-4.0.3.tgz",
-      "integrity": "sha512-BXgQl9kf4WTCPCCpmFGoJkz/+uhvm7h7PFKUYxh7qarQd3ER33vHG//qaE8eN25l07YqZPpHXU9I09l/RD5aGQ==",
-      "dev": true,
+    "node_modules/randombytes": {
+      "version": "2.1.0",
+      "license": "MIT",
       "dependencies": {
-        "@babel/core": "^7.7.5",
-        "@istanbuljs/schema": "^0.1.2",
-        "istanbul-lib-coverage": "^3.0.0",
-        "semver": "^6.3.0"
-      },
-      "engines": {
-        "node": ">=8"
+        "safe-buffer": "^5.1.0"
       }
     },
-    "node_modules/istanbul-lib-instrument/node_modules/semver": {
-      "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-      "dev": true,
-      "bin": {
-        "semver": "bin/semver.js"
+    "node_modules/range-parser": {
+      "version": "1.2.1",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
       }
     },
-    "node_modules/istanbul-lib-report": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz",
-      "integrity": "sha512-wcdi+uAKzfiGT2abPpKZ0hSU1rGQjUQnLvtY5MpQ7QCTahD3VODhcu4wcfY1YtkGaDD5yuydOLINXsfbus9ROw==",
-      "dev": true,
+    "node_modules/raw-body": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.2.tgz",
+      "integrity": "sha512-8zGqypfENjCIqGhgXToC8aB2r7YrBX+AQAfIPs/Mlk+BtPTztOvTS01NRW/3Eh60J+a48lt8qsCzirQ6loCVfA==",
       "dependencies": {
-        "istanbul-lib-coverage": "^3.0.0",
-        "make-dir": "^3.0.0",
-        "supports-color": "^7.1.0"
+        "bytes": "3.1.2",
+        "http-errors": "2.0.0",
+        "iconv-lite": "0.4.24",
+        "unpipe": "1.0.0"
       },
       "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/istanbul-lib-report/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": ">= 0.8"
       }
     },
-    "node_modules/istanbul-lib-report/node_modules/make-dir": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
-      "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
-      "dev": true,
+    "node_modules/rc": {
+      "version": "1.2.8",
+      "license": "(BSD-2-Clause OR MIT OR Apache-2.0)",
       "dependencies": {
-        "semver": "^6.0.0"
+        "deep-extend": "^0.6.0",
+        "ini": "~1.3.0",
+        "minimist": "^1.2.0",
+        "strip-json-comments": "~2.0.1"
       },
-      "engines": {
-        "node": ">=8"
+      "bin": {
+        "rc": "cli.js"
       }
     },
-    "node_modules/istanbul-lib-report/node_modules/semver": {
-      "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-      "dev": true,
-      "bin": {
-        "semver": "bin/semver.js"
+    "node_modules/rc/node_modules/strip-json-comments": {
+      "version": "2.0.1",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
       }
     },
-    "node_modules/istanbul-lib-report/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,
+    "node_modules/react": {
+      "version": "17.0.2",
+      "license": "MIT",
       "dependencies": {
-        "has-flag": "^4.0.0"
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">=0.10.0"
       }
     },
-    "node_modules/istanbul-lib-source-maps": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/istanbul-lib-source-maps/-/istanbul-lib-source-maps-4.0.0.tgz",
-      "integrity": "sha512-c16LpFRkR8vQXyHZ5nLpY35JZtzj1PQY1iZmesUbf1FZHbIupcWfjgOXBY9YHkLEQ6puz1u4Dgj6qmU/DisrZg==",
-      "dev": true,
+    "node_modules/react-bootstrap": {
+      "version": "1.6.8",
+      "license": "MIT",
       "dependencies": {
-        "debug": "^4.1.1",
-        "istanbul-lib-coverage": "^3.0.0",
-        "source-map": "^0.6.1"
+        "@babel/runtime": "^7.14.0",
+        "@restart/context": "^2.1.4",
+        "@restart/hooks": "^0.4.7",
+        "@types/invariant": "^2.2.33",
+        "@types/prop-types": "^15.7.3",
+        "@types/react": ">=16.14.8",
+        "@types/react-transition-group": "^4.4.1",
+        "@types/warning": "^3.0.0",
+        "classnames": "^2.3.1",
+        "dom-helpers": "^5.2.1",
+        "invariant": "^2.2.4",
+        "prop-types": "^15.7.2",
+        "prop-types-extra": "^1.1.0",
+        "react-overlays": "^5.1.2",
+        "react-transition-group": "^4.4.1",
+        "uncontrollable": "^7.2.1",
+        "warning": "^4.0.3"
       },
-      "engines": {
-        "node": ">=8"
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
       }
     },
-    "node_modules/istanbul-reports": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-3.0.2.tgz",
-      "integrity": "sha512-9tZvz7AiR3PEDNGiV9vIouQ/EAcqMXFmkcA1CDFTwOB98OZVDL0PH9glHotf5Ugp6GCOTypfzGWI/OqjWNCRUw==",
-      "dev": true,
+    "node_modules/react-clientside-effect": {
+      "version": "1.2.6",
+      "license": "MIT",
       "dependencies": {
-        "html-escaper": "^2.0.0",
-        "istanbul-lib-report": "^3.0.0"
+        "@babel/runtime": "^7.12.13"
       },
-      "engines": {
-        "node": ">=8"
+      "peerDependencies": {
+        "react": "^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
       }
     },
-    "node_modules/isurl": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/isurl/-/isurl-1.0.0.tgz",
-      "integrity": "sha512-1P/yWsxPlDtn7QeRD+ULKQPaIaN6yF368GZ2vDfv0AL0NwpStafjWCDDdn0k8wgFMWpVAqG7oJhxHnlud42i9w==",
-      "dev": true,
-      "optional": true,
+    "node_modules/react-colorful": {
+      "version": "5.6.1",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/react-datepicker": {
+      "version": "4.25.0",
+      "license": "MIT",
       "dependencies": {
-        "has-to-string-tag-x": "^1.2.0",
-        "is-object": "^1.0.1"
+        "@popperjs/core": "^2.11.8",
+        "classnames": "^2.2.6",
+        "date-fns": "^2.30.0",
+        "prop-types": "^15.7.2",
+        "react-onclickoutside": "^6.13.0",
+        "react-popper": "^2.3.0"
       },
-      "engines": {
-        "node": ">= 4"
+      "peerDependencies": {
+        "react": "^16.9.0 || ^17 || ^18",
+        "react-dom": "^16.9.0 || ^17 || ^18"
       }
     },
-    "node_modules/jest": {
-      "version": "24.9.0",
-      "resolved": "https://registry.npmjs.org/jest/-/jest-24.9.0.tgz",
-      "integrity": "sha512-YvkBL1Zm7d2B1+h5fHEOdyjCG+sGMz4f8D86/0HiqJ6MB4MnDc8FgP5vdWsGnemOQro7lnYo8UakZ3+5A0jxGw==",
-      "dev": true,
+    "node_modules/react-dev-utils": {
+      "version": "12.0.1",
+      "license": "MIT",
       "dependencies": {
-        "import-local": "^2.0.0",
-        "jest-cli": "^24.9.0"
-      },
-      "bin": {
-        "jest": "bin/jest.js"
+        "@babel/code-frame": "^7.16.0",
+        "address": "^1.1.2",
+        "browserslist": "^4.18.1",
+        "chalk": "^4.1.2",
+        "cross-spawn": "^7.0.3",
+        "detect-port-alt": "^1.1.6",
+        "escape-string-regexp": "^4.0.0",
+        "filesize": "^8.0.6",
+        "find-up": "^5.0.0",
+        "fork-ts-checker-webpack-plugin": "^6.5.0",
+        "global-modules": "^2.0.0",
+        "globby": "^11.0.4",
+        "gzip-size": "^6.0.0",
+        "immer": "^9.0.7",
+        "is-root": "^2.1.0",
+        "loader-utils": "^3.2.0",
+        "open": "^8.4.0",
+        "pkg-up": "^3.1.0",
+        "prompts": "^2.4.2",
+        "react-error-overlay": "^6.0.11",
+        "recursive-readdir": "^2.2.2",
+        "shell-quote": "^1.7.3",
+        "strip-ansi": "^6.0.1",
+        "text-table": "^0.2.0"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/react-dev-utils/node_modules/find-up": {
+      "version": "5.0.0",
+      "license": "MIT",
+      "dependencies": {
+        "locate-path": "^6.0.0",
+        "path-exists": "^4.0.0"
       },
       "engines": {
-        "node": ">= 6"
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/jest-changed-files": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/jest-changed-files/-/jest-changed-files-26.6.2.tgz",
-      "integrity": "sha512-fDS7szLcY9sCtIip8Fjry9oGf3I2ht/QT21bAHm5Dmf0mD4X3ReNUf17y+bO6fR8WgbIZTlbyG1ak/53cbRzKQ==",
-      "dev": true,
-      "dependencies": {
-        "@jest/types": "^26.6.2",
-        "execa": "^4.0.0",
-        "throat": "^5.0.0"
-      },
+    "node_modules/react-dev-utils/node_modules/loader-utils": {
+      "version": "3.3.1",
+      "license": "MIT",
       "engines": {
-        "node": ">= 10.14.2"
+        "node": ">= 12.13.0"
       }
     },
-    "node_modules/jest-changed-files/node_modules/@jest/types": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
-      "integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
-      "dev": true,
+    "node_modules/react-dev-utils/node_modules/locate-path": {
+      "version": "6.0.0",
+      "license": "MIT",
       "dependencies": {
-        "@types/istanbul-lib-coverage": "^2.0.0",
-        "@types/istanbul-reports": "^3.0.0",
-        "@types/node": "*",
-        "@types/yargs": "^15.0.0",
-        "chalk": "^4.0.0"
+        "p-locate": "^5.0.0"
       },
       "engines": {
-        "node": ">= 10.14.2"
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/jest-changed-files/node_modules/@types/istanbul-reports": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz",
-      "integrity": "sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==",
-      "dev": true,
+    "node_modules/react-dev-utils/node_modules/p-locate": {
+      "version": "5.0.0",
+      "license": "MIT",
       "dependencies": {
-        "@types/istanbul-lib-report": "*"
+        "p-limit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/jest-changed-files/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,
+    "node_modules/react-dom": {
+      "version": "17.0.2",
+      "license": "MIT",
       "dependencies": {
-        "color-convert": "^2.0.1"
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1",
+        "scheduler": "^0.20.2"
       },
-      "engines": {
-        "node": ">=8"
+      "peerDependencies": {
+        "react": "17.0.2"
       }
     },
-    "node_modules/jest-changed-files/node_modules/chalk": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
-      "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
-      "dev": true,
+    "node_modules/react-dropzone": {
+      "version": "14.2.3",
+      "license": "MIT",
       "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
+        "attr-accept": "^2.2.2",
+        "file-selector": "^0.6.0",
+        "prop-types": "^15.8.1"
       },
       "engines": {
-        "node": ">=10"
+        "node": ">= 10.13"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8 || 18.0.0"
       }
     },
-    "node_modules/jest-changed-files/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,
+    "node_modules/react-error-boundary": {
+      "version": "4.0.13",
+      "license": "MIT",
       "dependencies": {
-        "color-name": "~1.1.4"
+        "@babel/runtime": "^7.12.5"
       },
-      "engines": {
-        "node": ">=7.0.0"
+      "peerDependencies": {
+        "react": ">=16.13.1"
       }
     },
-    "node_modules/jest-changed-files/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/react-error-overlay": {
+      "version": "6.0.11",
+      "license": "MIT"
     },
-    "node_modules/jest-changed-files/node_modules/cross-spawn": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-      "dev": true,
+    "node_modules/react-fast-compare": {
+      "version": "2.0.4",
+      "license": "MIT"
+    },
+    "node_modules/react-focus-lock": {
+      "version": "2.12.1",
+      "license": "MIT",
       "dependencies": {
-        "path-key": "^3.1.0",
-        "shebang-command": "^2.0.0",
-        "which": "^2.0.1"
+        "@babel/runtime": "^7.0.0",
+        "focus-lock": "^1.3.5",
+        "prop-types": "^15.6.2",
+        "react-clientside-effect": "^1.2.6",
+        "use-callback-ref": "^1.3.2",
+        "use-sidecar": "^1.1.2"
       },
-      "engines": {
-        "node": ">= 8"
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
       }
     },
-    "node_modules/jest-changed-files/node_modules/execa": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/execa/-/execa-4.1.0.tgz",
-      "integrity": "sha512-j5W0//W7f8UxAn8hXVnwG8tLwdiUy4FJLcSupCg6maBYZDpyBvTApK7KyuI4bKj8KOh1r2YH+6ucuYtJv1bTZA==",
-      "dev": true,
+    "node_modules/react-focus-on": {
+      "version": "3.9.3",
+      "license": "MIT",
       "dependencies": {
-        "cross-spawn": "^7.0.0",
-        "get-stream": "^5.0.0",
-        "human-signals": "^1.1.1",
-        "is-stream": "^2.0.0",
-        "merge-stream": "^2.0.0",
-        "npm-run-path": "^4.0.0",
-        "onetime": "^5.1.0",
-        "signal-exit": "^3.0.2",
-        "strip-final-newline": "^2.0.0"
+        "aria-hidden": "^1.2.2",
+        "react-focus-lock": "^2.11.3",
+        "react-remove-scroll": "^2.5.7",
+        "react-style-singleton": "^2.2.1",
+        "tslib": "^2.3.1",
+        "use-sidecar": "^1.1.2"
       },
       "engines": {
-        "node": ">=10"
+        "node": ">=8.5.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
       }
     },
-    "node_modules/jest-changed-files/node_modules/get-stream": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz",
-      "integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==",
-      "dev": true,
+    "node_modules/react-helmet": {
+      "version": "6.1.0",
+      "license": "MIT",
       "dependencies": {
-        "pump": "^3.0.0"
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.7.2",
+        "react-fast-compare": "^3.1.1",
+        "react-side-effect": "^2.1.0"
       },
-      "engines": {
-        "node": ">=8"
+      "peerDependencies": {
+        "react": ">=16.3.0"
       }
     },
-    "node_modules/jest-changed-files/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,
+    "node_modules/react-helmet/node_modules/react-fast-compare": {
+      "version": "3.2.2",
+      "license": "MIT"
+    },
+    "node_modules/react-imask": {
+      "version": "7.6.1",
+      "license": "MIT",
+      "dependencies": {
+        "imask": "^7.6.1",
+        "prop-types": "^15.8.1"
+      },
       "engines": {
-        "node": ">=8"
+        "npm": ">=4.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=0.14.0"
       }
     },
-    "node_modules/jest-changed-files/node_modules/human-signals": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-1.1.1.tgz",
-      "integrity": "sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==",
-      "dev": true,
-      "engines": {
-        "node": ">=8.12.0"
+    "node_modules/react-intl": {
+      "version": "6.6.8",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@formatjs/ecma402-abstract": "2.0.0",
+        "@formatjs/icu-messageformat-parser": "2.7.8",
+        "@formatjs/intl": "2.10.4",
+        "@formatjs/intl-displaynames": "6.6.8",
+        "@formatjs/intl-listformat": "7.5.7",
+        "@types/hoist-non-react-statics": "^3.3.1",
+        "@types/react": "16 || 17 || 18",
+        "hoist-non-react-statics": "^3.3.2",
+        "intl-messageformat": "10.5.14",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "react": "^16.6.0 || 17 || 18",
+        "typescript": "^4.7 || 5"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
       }
     },
-    "node_modules/jest-changed-files/node_modules/is-stream": {
+    "node_modules/react-intl/node_modules/@formatjs/ecma402-abstract": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.0.tgz",
-      "integrity": "sha512-XCoy+WlUr7d1+Z8GgSuXmpuUFC9fOhRXglJMx+dwLKTkL44Cjd4W1Z5P+BQZpr+cR93aGP4S/s7Ftw6Nd/kiEw==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
+      "license": "MIT",
+      "dependencies": {
+        "@formatjs/intl-localematcher": "0.5.4",
+        "tslib": "^2.4.0"
       }
     },
-    "node_modules/jest-changed-files/node_modules/npm-run-path": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
-      "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
-      "dev": true,
+    "node_modules/react-intl/node_modules/@formatjs/intl-localematcher": {
+      "version": "0.5.4",
+      "license": "MIT",
       "dependencies": {
-        "path-key": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=8"
+        "tslib": "^2.4.0"
       }
     },
-    "node_modules/jest-changed-files/node_modules/path-key": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
+    "node_modules/react-is": {
+      "version": "16.13.1",
+      "license": "MIT"
+    },
+    "node_modules/react-lifecycles-compat": {
+      "version": "3.0.4",
+      "license": "MIT"
+    },
+    "node_modules/react-loading-skeleton": {
+      "version": "3.4.0",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16.8.0"
       }
     },
-    "node_modules/jest-changed-files/node_modules/shebang-command": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-      "dev": true,
-      "dependencies": {
-        "shebang-regex": "^3.0.0"
+    "node_modules/react-onclickoutside": {
+      "version": "6.13.1",
+      "license": "MIT",
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/Pomax/react-onclickoutside/blob/master/FUNDING.md"
       },
-      "engines": {
-        "node": ">=8"
+      "peerDependencies": {
+        "react": "^15.5.x || ^16.x || ^17.x || ^18.x",
+        "react-dom": "^15.5.x || ^16.x || ^17.x || ^18.x"
       }
     },
-    "node_modules/jest-changed-files/node_modules/shebang-regex": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
+    "node_modules/react-overlays": {
+      "version": "5.2.1",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.13.8",
+        "@popperjs/core": "^2.11.6",
+        "@restart/hooks": "^0.4.7",
+        "@types/warning": "^3.0.0",
+        "dom-helpers": "^5.2.0",
+        "prop-types": "^15.7.2",
+        "uncontrollable": "^7.2.1",
+        "warning": "^4.0.3"
+      },
+      "peerDependencies": {
+        "react": ">=16.3.0",
+        "react-dom": ">=16.3.0"
       }
     },
-    "node_modules/jest-changed-files/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,
+    "node_modules/react-popper": {
+      "version": "2.3.0",
+      "license": "MIT",
       "dependencies": {
-        "has-flag": "^4.0.0"
+        "react-fast-compare": "^3.0.1",
+        "warning": "^4.0.2"
       },
-      "engines": {
-        "node": ">=8"
+      "peerDependencies": {
+        "@popperjs/core": "^2.0.0",
+        "react": "^16.8.0 || ^17 || ^18",
+        "react-dom": "^16.8.0 || ^17 || ^18"
       }
     },
-    "node_modules/jest-changed-files/node_modules/which": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-      "dev": true,
+    "node_modules/react-popper/node_modules/react-fast-compare": {
+      "version": "3.2.2",
+      "license": "MIT"
+    },
+    "node_modules/react-proptype-conditional-require": {
+      "version": "1.0.4",
+      "license": "MIT"
+    },
+    "node_modules/react-redux": {
+      "version": "7.2.9",
+      "license": "MIT",
       "dependencies": {
-        "isexe": "^2.0.0"
+        "@babel/runtime": "^7.15.4",
+        "@types/react-redux": "^7.1.20",
+        "hoist-non-react-statics": "^3.3.2",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.7.2",
+        "react-is": "^17.0.2"
       },
-      "bin": {
-        "node-which": "bin/node-which"
+      "peerDependencies": {
+        "react": "^16.8.3 || ^17 || ^18"
       },
-      "engines": {
-        "node": ">= 8"
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        }
       }
     },
-    "node_modules/jest-config": {
-      "version": "26.6.3",
-      "resolved": "https://registry.npmjs.org/jest-config/-/jest-config-26.6.3.tgz",
-      "integrity": "sha512-t5qdIj/bCj2j7NFVHb2nFB4aUdfucDn3JRKgrZnplb8nieAirAzRSHP8uDEd+qV6ygzg9Pz4YG7UTJf94LPSyg==",
-      "dev": true,
-      "dependencies": {
-        "@babel/core": "^7.1.0",
-        "@jest/test-sequencer": "^26.6.3",
-        "@jest/types": "^26.6.2",
-        "babel-jest": "^26.6.3",
-        "chalk": "^4.0.0",
-        "deepmerge": "^4.2.2",
-        "glob": "^7.1.1",
-        "graceful-fs": "^4.2.4",
-        "jest-environment-jsdom": "^26.6.2",
-        "jest-environment-node": "^26.6.2",
-        "jest-get-type": "^26.3.0",
-        "jest-jasmine2": "^26.6.3",
-        "jest-regex-util": "^26.0.0",
-        "jest-resolve": "^26.6.2",
-        "jest-util": "^26.6.2",
-        "jest-validate": "^26.6.2",
-        "micromatch": "^4.0.2",
-        "pretty-format": "^26.6.2"
-      },
+    "node_modules/react-redux/node_modules/react-is": {
+      "version": "17.0.2",
+      "license": "MIT"
+    },
+    "node_modules/react-refresh": {
+      "version": "0.14.2",
+      "license": "MIT",
       "engines": {
-        "node": ">= 10.14.2"
+        "node": ">=0.10.0"
       }
     },
-    "node_modules/jest-config/node_modules/@jest/types": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
-      "integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
-      "dev": true,
+    "node_modules/react-remove-scroll": {
+      "version": "2.5.10",
+      "license": "MIT",
       "dependencies": {
-        "@types/istanbul-lib-coverage": "^2.0.0",
-        "@types/istanbul-reports": "^3.0.0",
-        "@types/node": "*",
-        "@types/yargs": "^15.0.0",
-        "chalk": "^4.0.0"
+        "react-remove-scroll-bar": "^2.3.6",
+        "react-style-singleton": "^2.2.1",
+        "tslib": "^2.1.0",
+        "use-callback-ref": "^1.3.0",
+        "use-sidecar": "^1.1.2"
       },
       "engines": {
-        "node": ">= 10.14.2"
-      }
-    },
-    "node_modules/jest-config/node_modules/@types/istanbul-reports": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz",
-      "integrity": "sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==",
-      "dev": true,
-      "dependencies": {
-        "@types/istanbul-lib-report": "*"
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
       }
     },
-    "node_modules/jest-config/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,
+    "node_modules/react-remove-scroll-bar": {
+      "version": "2.3.6",
+      "license": "MIT",
       "dependencies": {
-        "color-convert": "^2.0.1"
+        "react-style-singleton": "^2.2.1",
+        "tslib": "^2.0.0"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
       }
     },
-    "node_modules/jest-config/node_modules/babel-jest": {
-      "version": "26.6.3",
-      "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-26.6.3.tgz",
-      "integrity": "sha512-pl4Q+GAVOHwvjrck6jKjvmGhnO3jHX/xuB9d27f+EJZ/6k+6nMuPjorrYp7s++bKKdANwzElBWnLWaObvTnaZA==",
-      "dev": true,
+    "node_modules/react-responsive": {
+      "version": "9.0.2",
+      "license": "MIT",
       "dependencies": {
-        "@jest/transform": "^26.6.2",
-        "@jest/types": "^26.6.2",
-        "@types/babel__core": "^7.1.7",
-        "babel-plugin-istanbul": "^6.0.0",
-        "babel-preset-jest": "^26.6.2",
-        "chalk": "^4.0.0",
-        "graceful-fs": "^4.2.4",
-        "slash": "^3.0.0"
+        "hyphenate-style-name": "^1.0.0",
+        "matchmediaquery": "^0.3.0",
+        "prop-types": "^15.6.1",
+        "shallow-equal": "^1.2.1"
       },
       "engines": {
-        "node": ">= 10.14.2"
+        "node": ">=0.10"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
       }
     },
-    "node_modules/jest-config/node_modules/braces": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-      "dev": true,
+    "node_modules/react-router": {
+      "version": "6.27.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.27.0.tgz",
+      "integrity": "sha512-YA+HGZXz4jaAkVoYBE98VQl+nVzI+cVI2Oj/06F5ZM+0u3TgedN9Y9kmMRo2mnkSK2nCpNQn0DVob4HCsY/WLw==",
+      "license": "MIT",
       "dependencies": {
-        "fill-range": "^7.0.1"
+        "@remix-run/router": "1.20.0"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
       }
     },
-    "node_modules/jest-config/node_modules/chalk": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
-      "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
-      "dev": true,
+    "node_modules/react-router-dom": {
+      "version": "6.27.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.27.0.tgz",
+      "integrity": "sha512-+bvtFWMC0DgAFrfKXKG9Fc+BcXWRUO1aJIihbB79xaeq0v5UzfvnM5houGUm1Y461WVRcgAQ+Clh5rdb1eCx4g==",
+      "license": "MIT",
       "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
+        "@remix-run/router": "1.20.0",
+        "react-router": "6.27.0"
       },
       "engines": {
-        "node": ">=10"
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
       }
     },
-    "node_modules/jest-config/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"
+    "node_modules/react-select": {
+      "version": "5.8.0",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.12.0",
+        "@emotion/cache": "^11.4.0",
+        "@emotion/react": "^11.8.1",
+        "@floating-ui/dom": "^1.0.1",
+        "@types/react-transition-group": "^4.4.0",
+        "memoize-one": "^6.0.0",
+        "prop-types": "^15.6.0",
+        "react-transition-group": "^4.3.0",
+        "use-isomorphic-layout-effect": "^1.1.2"
       },
-      "engines": {
-        "node": ">=7.0.0"
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
-    "node_modules/jest-config/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/jest-config/node_modules/fill-range": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+    "node_modules/react-shallow-renderer": {
+      "version": "16.15.0",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "to-regex-range": "^5.0.1"
+        "object-assign": "^4.1.1",
+        "react-is": "^16.12.0 || ^17.0.0 || ^18.0.0"
       },
-      "engines": {
-        "node": ">=8"
+      "peerDependencies": {
+        "react": "^16.0.0 || ^17.0.0 || ^18.0.0"
       }
     },
-    "node_modules/jest-config/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/react-side-effect": {
+      "version": "2.1.2",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.3.0 || ^17.0.0 || ^18.0.0"
       }
     },
-    "node_modules/jest-config/node_modules/is-number": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "dev": true,
+    "node_modules/react-style-singleton": {
+      "version": "2.2.1",
+      "license": "MIT",
+      "dependencies": {
+        "get-nonce": "^1.0.0",
+        "invariant": "^2.2.4",
+        "tslib": "^2.0.0"
+      },
       "engines": {
-        "node": ">=0.12.0"
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
       }
     },
-    "node_modules/jest-config/node_modules/micromatch": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz",
-      "integrity": "sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==",
-      "dev": true,
-      "dependencies": {
-        "braces": "^3.0.1",
-        "picomatch": "^2.2.3"
+    "node_modules/react-table": {
+      "version": "7.8.0",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
       },
-      "engines": {
-        "node": ">=8.6"
+      "peerDependencies": {
+        "react": "^16.8.3 || ^17.0.0-0 || ^18.0.0"
       }
     },
-    "node_modules/jest-config/node_modules/pretty-format": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-26.6.2.tgz",
-      "integrity": "sha512-7AeGuCYNGmycyQbCqd/3PWH4eOoX/OiCa0uphp57NVTeAGdJGaAliecxwBDHYQCIvrW7aDBZCYeNTP/WX69mkg==",
+    "node_modules/react-test-renderer": {
+      "version": "17.0.2",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@jest/types": "^26.6.2",
-        "ansi-regex": "^5.0.0",
-        "ansi-styles": "^4.0.0",
-        "react-is": "^17.0.1"
+        "object-assign": "^4.1.1",
+        "react-is": "^17.0.2",
+        "react-shallow-renderer": "^16.13.1",
+        "scheduler": "^0.20.2"
       },
-      "engines": {
-        "node": ">= 10"
+      "peerDependencies": {
+        "react": "17.0.2"
       }
     },
-    "node_modules/jest-config/node_modules/react-is": {
+    "node_modules/react-test-renderer/node_modules/react-is": {
       "version": "17.0.2",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
-      "dev": true
-    },
-    "node_modules/jest-config/node_modules/slash": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
-      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
       "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
+      "license": "MIT"
     },
-    "node_modules/jest-config/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,
+    "node_modules/react-textarea-autosize": {
+      "version": "8.5.3",
+      "license": "MIT",
       "dependencies": {
-        "has-flag": "^4.0.0"
+        "@babel/runtime": "^7.20.13",
+        "use-composed-ref": "^1.3.0",
+        "use-latest": "^1.2.1"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
-    "node_modules/jest-config/node_modules/to-regex-range": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dev": true,
+    "node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "license": "BSD-3-Clause",
       "dependencies": {
-        "is-number": "^7.0.0"
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
       },
-      "engines": {
-        "node": ">=8.0"
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
       }
     },
-    "node_modules/jest-diff": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-26.6.2.tgz",
-      "integrity": "sha512-6m+9Z3Gv9wN0WFVasqjCL/06+EFCMTqDEUl/b87HYK2rAPTyfz4ZIuSlPhY51PIQRWx5TaxeF1qmXKe9gfN3sA==",
+    "node_modules/read-pkg": {
+      "version": "6.0.0",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "chalk": "^4.0.0",
-        "diff-sequences": "^26.6.2",
-        "jest-get-type": "^26.3.0",
-        "pretty-format": "^26.6.2"
+        "@types/normalize-package-data": "^2.4.0",
+        "normalize-package-data": "^3.0.2",
+        "parse-json": "^5.2.0",
+        "type-fest": "^1.0.1"
       },
       "engines": {
-        "node": ">= 10.14.2"
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/jest-diff/node_modules/@jest/types": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
-      "integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
+    "node_modules/read-pkg-up": {
+      "version": "8.0.0",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@types/istanbul-lib-coverage": "^2.0.0",
-        "@types/istanbul-reports": "^3.0.0",
-        "@types/node": "*",
-        "@types/yargs": "^15.0.0",
-        "chalk": "^4.0.0"
+        "find-up": "^5.0.0",
+        "read-pkg": "^6.0.0",
+        "type-fest": "^1.0.1"
       },
       "engines": {
-        "node": ">= 10.14.2"
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/jest-diff/node_modules/@types/istanbul-reports": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.0.tgz",
-      "integrity": "sha512-nwKNbvnwJ2/mndE9ItP/zc2TCzw6uuodnF4EHYWD+gCQDVBuRQL5UzbZD0/ezy1iKsFU2ZQiDqg4M9dN4+wZgA==",
+    "node_modules/read-pkg-up/node_modules/find-up": {
+      "version": "5.0.0",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@types/istanbul-lib-report": "*"
+        "locate-path": "^6.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/jest-diff/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==",
+    "node_modules/read-pkg-up/node_modules/locate-path": {
+      "version": "6.0.0",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "color-convert": "^2.0.1"
+        "p-locate": "^5.0.0"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/jest-diff/node_modules/chalk": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
-      "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+    "node_modules/read-pkg-up/node_modules/p-locate": {
+      "version": "5.0.0",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
+        "p-limit": "^3.0.2"
       },
       "engines": {
         "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/jest-diff/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==",
+    "node_modules/read-pkg-up/node_modules/type-fest": {
+      "version": "1.4.0",
       "dev": true,
-      "dependencies": {
-        "color-name": "~1.1.4"
-      },
+      "license": "(MIT OR CC0-1.0)",
       "engines": {
-        "node": ">=7.0.0"
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/jest-diff/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/jest-diff/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==",
+    "node_modules/read-pkg/node_modules/type-fest": {
+      "version": "1.4.0",
       "dev": true,
+      "license": "(MIT OR CC0-1.0)",
       "engines": {
-        "node": ">=8"
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/jest-diff/node_modules/pretty-format": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-26.6.2.tgz",
-      "integrity": "sha512-7AeGuCYNGmycyQbCqd/3PWH4eOoX/OiCa0uphp57NVTeAGdJGaAliecxwBDHYQCIvrW7aDBZCYeNTP/WX69mkg==",
-      "dev": true,
+    "node_modules/readable-stream": {
+      "version": "2.3.8",
+      "license": "MIT",
       "dependencies": {
-        "@jest/types": "^26.6.2",
-        "ansi-regex": "^5.0.0",
-        "ansi-styles": "^4.0.0",
-        "react-is": "^17.0.1"
-      },
-      "engines": {
-        "node": ">= 10"
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
       }
     },
-    "node_modules/jest-diff/node_modules/react-is": {
-      "version": "17.0.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.1.tgz",
-      "integrity": "sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA==",
-      "dev": true
+    "node_modules/readable-stream/node_modules/isarray": {
+      "version": "1.0.0",
+      "license": "MIT"
     },
-    "node_modules/jest-diff/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,
+    "node_modules/readable-stream/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "license": "MIT"
+    },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "license": "MIT",
       "dependencies": {
-        "has-flag": "^4.0.0"
+        "picomatch": "^2.2.1"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">=8.10.0"
       }
     },
-    "node_modules/jest-docblock": {
-      "version": "26.0.0",
-      "resolved": "https://registry.npmjs.org/jest-docblock/-/jest-docblock-26.0.0.tgz",
-      "integrity": "sha512-RDZ4Iz3QbtRWycd8bUEPxQsTlYazfYn/h5R65Fc6gOfwozFhoImx+affzky/FFBuqISPTqjXomoIGJVKBWoo0w==",
-      "dev": true,
+    "node_modules/rechoir": {
+      "version": "0.8.0",
+      "license": "MIT",
       "dependencies": {
-        "detect-newline": "^3.0.0"
+        "resolve": "^1.20.0"
       },
       "engines": {
-        "node": ">= 10.14.2"
+        "node": ">= 10.13.0"
       }
     },
-    "node_modules/jest-each": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/jest-each/-/jest-each-26.6.2.tgz",
-      "integrity": "sha512-Mer/f0KaATbjl8MCJ+0GEpNdqmnVmDYqCTJYTvoo7rqmRiDllmp2AYN+06F93nXcY3ur9ShIjS+CO/uD+BbH4A==",
-      "dev": true,
+    "node_modules/recursive-readdir": {
+      "version": "2.2.3",
+      "license": "MIT",
       "dependencies": {
-        "@jest/types": "^26.6.2",
-        "chalk": "^4.0.0",
-        "jest-get-type": "^26.3.0",
-        "jest-util": "^26.6.2",
-        "pretty-format": "^26.6.2"
+        "minimatch": "^3.0.5"
       },
       "engines": {
-        "node": ">= 10.14.2"
+        "node": ">=6.0.0"
       }
     },
-    "node_modules/jest-each/node_modules/@jest/types": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
-      "integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
+    "node_modules/redent": {
+      "version": "3.0.0",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@types/istanbul-lib-coverage": "^2.0.0",
-        "@types/istanbul-reports": "^3.0.0",
-        "@types/node": "*",
-        "@types/yargs": "^15.0.0",
-        "chalk": "^4.0.0"
+        "indent-string": "^4.0.0",
+        "strip-indent": "^3.0.0"
       },
       "engines": {
-        "node": ">= 10.14.2"
+        "node": ">=8"
       }
     },
-    "node_modules/jest-each/node_modules/@types/istanbul-reports": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz",
-      "integrity": "sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==",
-      "dev": true,
+    "node_modules/redux": {
+      "version": "4.0.5",
+      "license": "MIT",
       "dependencies": {
-        "@types/istanbul-lib-report": "*"
+        "loose-envify": "^1.4.0",
+        "symbol-observable": "^1.2.0"
       }
     },
-    "node_modules/jest-each/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,
+    "node_modules/redux-logger": {
+      "version": "3.0.6",
+      "license": "MIT",
       "dependencies": {
-        "color-convert": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=8"
+        "deep-diff": "^0.3.5"
       }
     },
-    "node_modules/jest-each/node_modules/chalk": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
-      "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
+    "node_modules/redux-mock-store": {
+      "version": "1.5.4",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
-      },
-      "engines": {
-        "node": ">=10"
+        "lodash.isplainobject": "^4.0.6"
       }
     },
-    "node_modules/jest-each/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,
+    "node_modules/redux-thunk": {
+      "version": "2.4.2",
+      "license": "MIT",
+      "peerDependencies": {
+        "redux": "^4"
+      }
+    },
+    "node_modules/regenerate": {
+      "version": "1.4.2",
+      "license": "MIT"
+    },
+    "node_modules/regenerate-unicode-properties": {
+      "version": "10.1.1",
+      "license": "MIT",
       "dependencies": {
-        "color-name": "~1.1.4"
+        "regenerate": "^1.4.2"
       },
       "engines": {
-        "node": ">=7.0.0"
+        "node": ">=4"
       }
     },
-    "node_modules/jest-each/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/regenerator-runtime": {
+      "version": "0.14.1",
+      "license": "MIT"
     },
-    "node_modules/jest-each/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/regenerator-transform": {
+      "version": "0.15.2",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.8.4"
       }
     },
-    "node_modules/jest-each/node_modules/pretty-format": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-26.6.2.tgz",
-      "integrity": "sha512-7AeGuCYNGmycyQbCqd/3PWH4eOoX/OiCa0uphp57NVTeAGdJGaAliecxwBDHYQCIvrW7aDBZCYeNTP/WX69mkg==",
-      "dev": true,
+    "node_modules/regex-parser": {
+      "version": "2.3.0",
+      "license": "MIT"
+    },
+    "node_modules/regexp.prototype.flags": {
+      "version": "1.5.2",
+      "license": "MIT",
       "dependencies": {
-        "@jest/types": "^26.6.2",
-        "ansi-regex": "^5.0.0",
-        "ansi-styles": "^4.0.0",
-        "react-is": "^17.0.1"
+        "call-bind": "^1.0.6",
+        "define-properties": "^1.2.1",
+        "es-errors": "^1.3.0",
+        "set-function-name": "^2.0.1"
       },
       "engines": {
-        "node": ">= 10"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/jest-each/node_modules/react-is": {
-      "version": "17.0.2",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
-      "dev": true
-    },
-    "node_modules/jest-each/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,
+    "node_modules/regexpu-core": {
+      "version": "5.3.2",
+      "license": "MIT",
       "dependencies": {
-        "has-flag": "^4.0.0"
+        "@babel/regjsgen": "^0.8.0",
+        "regenerate": "^1.4.2",
+        "regenerate-unicode-properties": "^10.1.0",
+        "regjsparser": "^0.9.1",
+        "unicode-match-property-ecmascript": "^2.0.0",
+        "unicode-match-property-value-ecmascript": "^2.1.0"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">=4"
       }
     },
-    "node_modules/jest-environment-jsdom": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/jest-environment-jsdom/-/jest-environment-jsdom-26.6.2.tgz",
-      "integrity": "sha512-jgPqCruTlt3Kwqg5/WVFyHIOJHsiAvhcp2qiR2QQstuG9yWox5+iHpU3ZrcBxW14T4fe5Z68jAfLRh7joCSP2Q==",
-      "dev": true,
+    "node_modules/regjsparser": {
+      "version": "0.9.1",
+      "license": "BSD-2-Clause",
       "dependencies": {
-        "@jest/environment": "^26.6.2",
-        "@jest/fake-timers": "^26.6.2",
-        "@jest/types": "^26.6.2",
-        "@types/node": "*",
-        "jest-mock": "^26.6.2",
-        "jest-util": "^26.6.2",
-        "jsdom": "^16.4.0"
+        "jsesc": "~0.5.0"
       },
+      "bin": {
+        "regjsparser": "bin/parser"
+      }
+    },
+    "node_modules/regjsparser/node_modules/jsesc": {
+      "version": "0.5.0",
+      "bin": {
+        "jsesc": "bin/jsesc"
+      }
+    },
+    "node_modules/relateurl": {
+      "version": "0.2.7",
+      "license": "MIT",
       "engines": {
-        "node": ">= 10.14.2"
+        "node": ">= 0.10"
       }
     },
-    "node_modules/jest-environment-jsdom/node_modules/@jest/types": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
-      "integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
-      "dev": true,
+    "node_modules/renderkid": {
+      "version": "3.0.0",
+      "license": "MIT",
       "dependencies": {
-        "@types/istanbul-lib-coverage": "^2.0.0",
-        "@types/istanbul-reports": "^3.0.0",
-        "@types/node": "*",
-        "@types/yargs": "^15.0.0",
-        "chalk": "^4.0.0"
-      },
+        "css-select": "^4.1.3",
+        "dom-converter": "^0.2.0",
+        "htmlparser2": "^6.1.0",
+        "lodash": "^4.17.21",
+        "strip-ansi": "^6.0.1"
+      }
+    },
+    "node_modules/require-directory": {
+      "version": "2.1.1",
+      "license": "MIT",
       "engines": {
-        "node": ">= 10.14.2"
+        "node": ">=0.10.0"
       }
     },
-    "node_modules/jest-environment-jsdom/node_modules/@types/istanbul-reports": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz",
-      "integrity": "sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==",
-      "dev": true,
+    "node_modules/require-from-string": {
+      "version": "2.0.2",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/requires-port": {
+      "version": "1.0.0",
+      "license": "MIT"
+    },
+    "node_modules/reselect": {
+      "version": "4.1.8",
+      "license": "MIT"
+    },
+    "node_modules/resolve": {
+      "version": "1.22.8",
+      "license": "MIT",
       "dependencies": {
-        "@types/istanbul-lib-report": "*"
+        "is-core-module": "^2.13.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/jest-environment-jsdom/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,
+    "node_modules/resolve-cwd": {
+      "version": "3.0.0",
+      "license": "MIT",
       "dependencies": {
-        "color-convert": "^2.0.1"
+        "resolve-from": "^5.0.0"
       },
       "engines": {
         "node": ">=8"
       }
     },
-    "node_modules/jest-environment-jsdom/node_modules/chalk": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
-      "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
-      "dev": true,
-      "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
-      },
+    "node_modules/resolve-from": {
+      "version": "5.0.0",
+      "license": "MIT",
       "engines": {
-        "node": ">=10"
+        "node": ">=8"
       }
     },
-    "node_modules/jest-environment-jsdom/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,
+    "node_modules/resolve-pathname": {
+      "version": "3.0.0",
+      "license": "MIT"
+    },
+    "node_modules/resolve-url-loader": {
+      "version": "5.0.0",
+      "license": "MIT",
       "dependencies": {
-        "color-name": "~1.1.4"
+        "adjust-sourcemap-loader": "^4.0.0",
+        "convert-source-map": "^1.7.0",
+        "loader-utils": "^2.0.0",
+        "postcss": "^8.2.14",
+        "source-map": "0.6.1"
       },
       "engines": {
-        "node": ">=7.0.0"
+        "node": ">=12"
       }
     },
-    "node_modules/jest-environment-jsdom/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/resolve-url-loader/node_modules/convert-source-map": {
+      "version": "1.9.0",
+      "license": "MIT"
     },
-    "node_modules/jest-environment-jsdom/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,
+    "node_modules/resolve-url-loader/node_modules/source-map": {
+      "version": "0.6.1",
+      "license": "BSD-3-Clause",
       "engines": {
-        "node": ">=8"
+        "node": ">=0.10.0"
       }
     },
-    "node_modules/jest-environment-jsdom/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"
-      },
+    "node_modules/resolve.exports": {
+      "version": "2.0.2",
+      "license": "MIT",
       "engines": {
-        "node": ">=8"
+        "node": ">=10"
       }
     },
-    "node_modules/jest-environment-node": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/jest-environment-node/-/jest-environment-node-26.6.2.tgz",
-      "integrity": "sha512-zhtMio3Exty18dy8ee8eJ9kjnRyZC1N4C1Nt/VShN1apyXc8rWGtJ9lI7vqiWcyyXS4BVSEn9lxAM2D+07/Tag==",
-      "dev": true,
+    "node_modules/restore-cursor": {
+      "version": "3.1.0",
+      "license": "MIT",
       "dependencies": {
-        "@jest/environment": "^26.6.2",
-        "@jest/fake-timers": "^26.6.2",
-        "@jest/types": "^26.6.2",
-        "@types/node": "*",
-        "jest-mock": "^26.6.2",
-        "jest-util": "^26.6.2"
+        "onetime": "^5.1.0",
+        "signal-exit": "^3.0.2"
       },
       "engines": {
-        "node": ">= 10.14.2"
+        "node": ">=8"
       }
     },
-    "node_modules/jest-environment-node/node_modules/@jest/types": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
-      "integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
-      "dev": true,
-      "dependencies": {
-        "@types/istanbul-lib-coverage": "^2.0.0",
-        "@types/istanbul-reports": "^3.0.0",
-        "@types/node": "*",
-        "@types/yargs": "^15.0.0",
-        "chalk": "^4.0.0"
-      },
+    "node_modules/retry": {
+      "version": "0.13.1",
+      "license": "MIT",
       "engines": {
-        "node": ">= 10.14.2"
+        "node": ">= 4"
       }
     },
-    "node_modules/jest-environment-node/node_modules/@types/istanbul-reports": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz",
-      "integrity": "sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==",
-      "dev": true,
-      "dependencies": {
-        "@types/istanbul-lib-report": "*"
+    "node_modules/reusify": {
+      "version": "1.0.4",
+      "license": "MIT",
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
       }
     },
-    "node_modules/jest-environment-node/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,
+    "node_modules/rimraf": {
+      "version": "2.7.1",
+      "license": "ISC",
       "dependencies": {
-        "color-convert": "^2.0.1"
+        "glob": "^7.1.3"
       },
-      "engines": {
-        "node": ">=8"
+      "bin": {
+        "rimraf": "bin.js"
       }
     },
-    "node_modules/jest-environment-node/node_modules/chalk": {
+    "node_modules/rtlcss": {
       "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
-      "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
-      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
+        "escalade": "^3.1.1",
+        "picocolors": "^1.0.0",
+        "postcss": "^8.4.21",
+        "strip-json-comments": "^3.1.1"
       },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/jest-environment-node/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"
+      "bin": {
+        "rtlcss": "bin/rtlcss.js"
       },
       "engines": {
-        "node": ">=7.0.0"
+        "node": ">=12.0.0"
       }
     },
-    "node_modules/jest-environment-node/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/jest-environment-node/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,
+    "node_modules/run-async": {
+      "version": "2.4.1",
+      "license": "MIT",
       "engines": {
-        "node": ">=8"
+        "node": ">=0.12.0"
       }
     },
-    "node_modules/jest-environment-node/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,
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
       "dependencies": {
-        "has-flag": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
+        "queue-microtask": "^1.2.2"
       }
     },
-    "node_modules/jest-get-type": {
-      "version": "26.3.0",
-      "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-26.3.0.tgz",
-      "integrity": "sha512-TpfaviN1R2pQWkIihlfEanwOXK0zcxrKEE4MlU6Tn7keoXdN6/3gK/xl0yEh8DOunn5pOVGKf8hB4R9gVh04ig==",
-      "dev": true,
-      "engines": {
-        "node": ">= 10.14.2"
+    "node_modules/rxjs": {
+      "version": "7.8.1",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.1.0"
       }
     },
-    "node_modules/jest-haste-map": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-26.6.2.tgz",
-      "integrity": "sha512-easWIJXIw71B2RdR8kgqpjQrbMRWQBgiBwXYEhtGUTaX+doCjBheluShdDMeR8IMfJiTqH4+zfhtg29apJf/8w==",
-      "dev": true,
+    "node_modules/safe-array-concat": {
+      "version": "1.1.2",
+      "license": "MIT",
       "dependencies": {
-        "@jest/types": "^26.6.2",
-        "@types/graceful-fs": "^4.1.2",
-        "@types/node": "*",
-        "anymatch": "^3.0.3",
-        "fb-watchman": "^2.0.0",
-        "graceful-fs": "^4.2.4",
-        "jest-regex-util": "^26.0.0",
-        "jest-serializer": "^26.6.2",
-        "jest-util": "^26.6.2",
-        "jest-worker": "^26.6.2",
-        "micromatch": "^4.0.2",
-        "sane": "^4.0.3",
-        "walker": "^1.0.7"
+        "call-bind": "^1.0.7",
+        "get-intrinsic": "^1.2.4",
+        "has-symbols": "^1.0.3",
+        "isarray": "^2.0.5"
       },
       "engines": {
-        "node": ">= 10.14.2"
+        "node": ">=0.4"
       },
-      "optionalDependencies": {
-        "fsevents": "^2.1.2"
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/jest-haste-map/node_modules/@jest/types": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
-      "integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
-      "dev": true,
-      "dependencies": {
-        "@types/istanbul-lib-coverage": "^2.0.0",
-        "@types/istanbul-reports": "^3.0.0",
-        "@types/node": "*",
-        "@types/yargs": "^15.0.0",
-        "chalk": "^4.0.0"
-      },
+    "node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/safe-regex-test": {
+      "version": "1.0.3",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.6",
+        "es-errors": "^1.3.0",
+        "is-regex": "^1.1.4"
+      },
       "engines": {
-        "node": ">= 10.14.2"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/jest-haste-map/node_modules/@types/istanbul-reports": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz",
-      "integrity": "sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==",
-      "dev": true,
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "license": "MIT"
+    },
+    "node_modules/sass": {
+      "version": "1.69.7",
+      "license": "MIT",
       "dependencies": {
-        "@types/istanbul-lib-report": "*"
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
       }
     },
-    "node_modules/jest-haste-map/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,
+    "node_modules/sass-loader": {
+      "version": "13.3.3",
+      "license": "MIT",
       "dependencies": {
-        "color-convert": "^2.0.1"
+        "neo-async": "^2.6.2"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">= 14.15.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "fibers": ">= 3.1.0",
+        "node-sass": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0",
+        "sass": "^1.3.0",
+        "sass-embedded": "*",
+        "webpack": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "fibers": {
+          "optional": true
+        },
+        "node-sass": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        }
       }
     },
-    "node_modules/jest-haste-map/node_modules/anymatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
-      "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
-      "dev": true,
+    "node_modules/saxes": {
+      "version": "6.0.0",
+      "license": "ISC",
       "dependencies": {
-        "normalize-path": "^3.0.0",
-        "picomatch": "^2.0.4"
+        "xmlchars": "^2.2.0"
       },
       "engines": {
-        "node": ">= 8"
+        "node": ">=v12.22.7"
       }
     },
-    "node_modules/jest-haste-map/node_modules/braces": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-      "dev": true,
+    "node_modules/scheduler": {
+      "version": "0.20.2",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1"
+      }
+    },
+    "node_modules/schema-utils": {
+      "version": "4.2.0",
+      "license": "MIT",
       "dependencies": {
-        "fill-range": "^7.0.1"
+        "@types/json-schema": "^7.0.9",
+        "ajv": "^8.9.0",
+        "ajv-formats": "^2.1.1",
+        "ajv-keywords": "^5.1.0"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">= 12.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
       }
     },
-    "node_modules/jest-haste-map/node_modules/chalk": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
-      "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
-      "dev": true,
+    "node_modules/schema-utils/node_modules/ajv": {
+      "version": "8.17.1",
+      "license": "MIT",
       "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
+        "fast-deep-equal": "^3.1.3",
+        "fast-uri": "^3.0.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2"
       },
-      "engines": {
-        "node": ">=10"
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
       }
     },
-    "node_modules/jest-haste-map/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,
+    "node_modules/schema-utils/node_modules/ajv-keywords": {
+      "version": "5.1.0",
+      "license": "MIT",
       "dependencies": {
-        "color-name": "~1.1.4"
+        "fast-deep-equal": "^3.1.3"
       },
-      "engines": {
-        "node": ">=7.0.0"
+      "peerDependencies": {
+        "ajv": "^8.8.2"
       }
     },
-    "node_modules/jest-haste-map/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/schema-utils/node_modules/json-schema-traverse": {
+      "version": "1.0.0",
+      "license": "MIT"
     },
-    "node_modules/jest-haste-map/node_modules/fill-range": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-      "dev": true,
+    "node_modules/select-hose": {
+      "version": "2.0.0",
+      "license": "MIT"
+    },
+    "node_modules/selfsigned": {
+      "version": "2.4.1",
+      "license": "MIT",
       "dependencies": {
-        "to-regex-range": "^5.0.1"
+        "@types/node-forge": "^1.3.0",
+        "node-forge": "^1"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">=10"
       }
     },
-    "node_modules/jest-haste-map/node_modules/fsevents": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
-      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
-      "dev": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+    "node_modules/semver": {
+      "version": "6.3.1",
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
       }
     },
-    "node_modules/jest-haste-map/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,
+    "node_modules/send": {
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/send/-/send-0.19.0.tgz",
+      "integrity": "sha512-dW41u5VfLXu8SJh5bwRmyYUbAoSB3c9uQh6L8h/KtsFREPWpbX1lrljJo186Jc4nmci/sGUZ9a0a0J2zgfq2hw==",
+      "dependencies": {
+        "debug": "2.6.9",
+        "depd": "2.0.0",
+        "destroy": "1.2.0",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
+        "fresh": "0.5.2",
+        "http-errors": "2.0.0",
+        "mime": "1.6.0",
+        "ms": "2.1.3",
+        "on-finished": "2.4.1",
+        "range-parser": "~1.2.1",
+        "statuses": "2.0.1"
+      },
       "engines": {
-        "node": ">=8"
+        "node": ">= 0.8.0"
       }
     },
-    "node_modules/jest-haste-map/node_modules/is-number": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.12.0"
+    "node_modules/send/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dependencies": {
+        "ms": "2.0.0"
       }
     },
-    "node_modules/jest-haste-map/node_modules/micromatch": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz",
-      "integrity": "sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==",
-      "dev": true,
-      "dependencies": {
-        "braces": "^3.0.1",
-        "picomatch": "^2.2.3"
-      },
+    "node_modules/send/node_modules/debug/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+    },
+    "node_modules/send/node_modules/encodeurl": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
+      "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==",
       "engines": {
-        "node": ">=8.6"
+        "node": ">= 0.8"
       }
     },
-    "node_modules/jest-haste-map/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,
+    "node_modules/send/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
+    },
+    "node_modules/serialize-javascript": {
+      "version": "6.0.2",
+      "license": "BSD-3-Clause",
       "dependencies": {
-        "has-flag": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
+        "randombytes": "^2.1.0"
       }
     },
-    "node_modules/jest-haste-map/node_modules/to-regex-range": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dev": true,
+    "node_modules/serve-index": {
+      "version": "1.9.1",
+      "license": "MIT",
       "dependencies": {
-        "is-number": "^7.0.0"
+        "accepts": "~1.3.4",
+        "batch": "0.6.1",
+        "debug": "2.6.9",
+        "escape-html": "~1.0.3",
+        "http-errors": "~1.6.2",
+        "mime-types": "~2.1.17",
+        "parseurl": "~1.3.2"
       },
       "engines": {
-        "node": ">=8.0"
+        "node": ">= 0.8.0"
       }
     },
-    "node_modules/jest-jasmine2": {
-      "version": "26.6.3",
-      "resolved": "https://registry.npmjs.org/jest-jasmine2/-/jest-jasmine2-26.6.3.tgz",
-      "integrity": "sha512-kPKUrQtc8aYwBV7CqBg5pu+tmYXlvFlSFYn18ev4gPFtrRzB15N2gW/Roew3187q2w2eHuu0MU9TJz6w0/nPEg==",
-      "dev": true,
+    "node_modules/serve-index/node_modules/debug": {
+      "version": "2.6.9",
+      "license": "MIT",
       "dependencies": {
-        "@babel/traverse": "^7.1.0",
-        "@jest/environment": "^26.6.2",
-        "@jest/source-map": "^26.6.2",
-        "@jest/test-result": "^26.6.2",
-        "@jest/types": "^26.6.2",
-        "@types/node": "*",
-        "chalk": "^4.0.0",
-        "co": "^4.6.0",
-        "expect": "^26.6.2",
-        "is-generator-fn": "^2.0.0",
-        "jest-each": "^26.6.2",
-        "jest-matcher-utils": "^26.6.2",
-        "jest-message-util": "^26.6.2",
-        "jest-runtime": "^26.6.3",
-        "jest-snapshot": "^26.6.2",
-        "jest-util": "^26.6.2",
-        "pretty-format": "^26.6.2",
-        "throat": "^5.0.0"
-      },
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/serve-index/node_modules/depd": {
+      "version": "1.1.2",
+      "license": "MIT",
       "engines": {
-        "node": ">= 10.14.2"
+        "node": ">= 0.6"
       }
     },
-    "node_modules/jest-jasmine2/node_modules/@jest/types": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
-      "integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
-      "dev": true,
+    "node_modules/serve-index/node_modules/http-errors": {
+      "version": "1.6.3",
+      "license": "MIT",
       "dependencies": {
-        "@types/istanbul-lib-coverage": "^2.0.0",
-        "@types/istanbul-reports": "^3.0.0",
-        "@types/node": "*",
-        "@types/yargs": "^15.0.0",
-        "chalk": "^4.0.0"
+        "depd": "~1.1.2",
+        "inherits": "2.0.3",
+        "setprototypeof": "1.1.0",
+        "statuses": ">= 1.4.0 < 2"
       },
       "engines": {
-        "node": ">= 10.14.2"
+        "node": ">= 0.6"
       }
     },
-    "node_modules/jest-jasmine2/node_modules/@types/istanbul-reports": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz",
-      "integrity": "sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==",
-      "dev": true,
-      "dependencies": {
-        "@types/istanbul-lib-report": "*"
+    "node_modules/serve-index/node_modules/inherits": {
+      "version": "2.0.3",
+      "license": "ISC"
+    },
+    "node_modules/serve-index/node_modules/ms": {
+      "version": "2.0.0",
+      "license": "MIT"
+    },
+    "node_modules/serve-index/node_modules/setprototypeof": {
+      "version": "1.1.0",
+      "license": "ISC"
+    },
+    "node_modules/serve-index/node_modules/statuses": {
+      "version": "1.5.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
       }
     },
-    "node_modules/jest-jasmine2/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,
+    "node_modules/serve-static": {
+      "version": "1.16.2",
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.16.2.tgz",
+      "integrity": "sha512-VqpjJZKadQB/PEbEwvFdO43Ax5dFBZ2UECszz8bQ7pi7wt//PWe1P6MN7eCnjsatYtBT6EuiClbjSWP2WrIoTw==",
       "dependencies": {
-        "color-convert": "^2.0.1"
+        "encodeurl": "~2.0.0",
+        "escape-html": "~1.0.3",
+        "parseurl": "~1.3.3",
+        "send": "0.19.0"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">= 0.8.0"
       }
     },
-    "node_modules/jest-jasmine2/node_modules/chalk": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
-      "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
-      "dev": true,
+    "node_modules/set-function-length": {
+      "version": "1.2.2",
+      "license": "MIT",
       "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.4",
+        "gopd": "^1.0.1",
+        "has-property-descriptors": "^1.0.2"
       },
       "engines": {
-        "node": ">=10"
+        "node": ">= 0.4"
       }
     },
-    "node_modules/jest-jasmine2/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,
+    "node_modules/set-function-name": {
+      "version": "2.0.2",
+      "license": "MIT",
       "dependencies": {
-        "color-name": "~1.1.4"
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "functions-have-names": "^1.2.3",
+        "has-property-descriptors": "^1.0.2"
       },
       "engines": {
-        "node": ">=7.0.0"
+        "node": ">= 0.4"
       }
     },
-    "node_modules/jest-jasmine2/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/setimmediate": {
+      "version": "1.0.5",
+      "license": "MIT"
     },
-    "node_modules/jest-jasmine2/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/setprototypeof": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
+      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
     },
-    "node_modules/jest-jasmine2/node_modules/pretty-format": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-26.6.2.tgz",
-      "integrity": "sha512-7AeGuCYNGmycyQbCqd/3PWH4eOoX/OiCa0uphp57NVTeAGdJGaAliecxwBDHYQCIvrW7aDBZCYeNTP/WX69mkg==",
-      "dev": true,
+    "node_modules/shallow-clone": {
+      "version": "3.0.1",
+      "license": "MIT",
       "dependencies": {
-        "@jest/types": "^26.6.2",
-        "ansi-regex": "^5.0.0",
-        "ansi-styles": "^4.0.0",
-        "react-is": "^17.0.1"
+        "kind-of": "^6.0.2"
       },
       "engines": {
-        "node": ">= 10"
+        "node": ">=8"
       }
     },
-    "node_modules/jest-jasmine2/node_modules/react-is": {
-      "version": "17.0.2",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
-      "dev": true
+    "node_modules/shallow-equal": {
+      "version": "1.2.1",
+      "license": "MIT"
     },
-    "node_modules/jest-jasmine2/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,
+    "node_modules/sharp": {
+      "version": "0.32.6",
+      "hasInstallScript": true,
+      "license": "Apache-2.0",
       "dependencies": {
-        "has-flag": "^4.0.0"
+        "color": "^4.2.3",
+        "detect-libc": "^2.0.2",
+        "node-addon-api": "^6.1.0",
+        "prebuild-install": "^7.1.1",
+        "semver": "^7.5.4",
+        "simple-get": "^4.0.1",
+        "tar-fs": "^3.0.4",
+        "tunnel-agent": "^0.6.0"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">=14.15.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
       }
     },
-    "node_modules/jest-leak-detector": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/jest-leak-detector/-/jest-leak-detector-26.6.2.tgz",
-      "integrity": "sha512-i4xlXpsVSMeKvg2cEKdfhh0H39qlJlP5Ex1yQxwF9ubahboQYMgTtz5oML35AVA3B4Eu+YsmwaiKVev9KCvLxg==",
-      "dev": true,
-      "dependencies": {
-        "jest-get-type": "^26.3.0",
-        "pretty-format": "^26.6.2"
+    "node_modules/sharp/node_modules/semver": {
+      "version": "7.6.3",
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
       },
       "engines": {
-        "node": ">= 10.14.2"
+        "node": ">=10"
       }
     },
-    "node_modules/jest-leak-detector/node_modules/@jest/types": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
-      "integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
-      "dev": true,
-      "dependencies": {
-        "@types/istanbul-lib-coverage": "^2.0.0",
-        "@types/istanbul-reports": "^3.0.0",
-        "@types/node": "*",
-        "@types/yargs": "^15.0.0",
-        "chalk": "^4.0.0"
+    "node_modules/shebang-command": {
+      "version": "2.0.0",
+      "license": "MIT",
+      "dependencies": {
+        "shebang-regex": "^3.0.0"
       },
       "engines": {
-        "node": ">= 10.14.2"
-      }
-    },
-    "node_modules/jest-leak-detector/node_modules/@types/istanbul-reports": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz",
-      "integrity": "sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==",
-      "dev": true,
-      "dependencies": {
-        "@types/istanbul-lib-report": "*"
+        "node": ">=8"
       }
     },
-    "node_modules/jest-leak-detector/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"
-      },
+    "node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "license": "MIT",
       "engines": {
         "node": ">=8"
       }
     },
-    "node_modules/jest-leak-detector/node_modules/chalk": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
-      "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
-      "dev": true,
-      "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
-      },
-      "engines": {
-        "node": ">=10"
+    "node_modules/shell-quote": {
+      "version": "1.8.1",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/jest-leak-detector/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,
+    "node_modules/side-channel": {
+      "version": "1.0.6",
+      "license": "MIT",
       "dependencies": {
-        "color-name": "~1.1.4"
+        "call-bind": "^1.0.7",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.4",
+        "object-inspect": "^1.13.1"
       },
       "engines": {
-        "node": ">=7.0.0"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/jest-leak-detector/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/signal-exit": {
+      "version": "3.0.7",
+      "license": "ISC"
     },
-    "node_modules/jest-leak-detector/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/simple-concat": {
+      "version": "1.0.1",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/simple-get": {
+      "version": "4.0.1",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "decompress-response": "^6.0.0",
+        "once": "^1.3.1",
+        "simple-concat": "^1.0.0"
       }
     },
-    "node_modules/jest-leak-detector/node_modules/pretty-format": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-26.6.2.tgz",
-      "integrity": "sha512-7AeGuCYNGmycyQbCqd/3PWH4eOoX/OiCa0uphp57NVTeAGdJGaAliecxwBDHYQCIvrW7aDBZCYeNTP/WX69mkg==",
-      "dev": true,
+    "node_modules/simple-swizzle": {
+      "version": "0.2.2",
+      "license": "MIT",
       "dependencies": {
-        "@jest/types": "^26.6.2",
-        "ansi-regex": "^5.0.0",
-        "ansi-styles": "^4.0.0",
-        "react-is": "^17.0.1"
-      },
-      "engines": {
-        "node": ">= 10"
+        "is-arrayish": "^0.3.1"
       }
     },
-    "node_modules/jest-leak-detector/node_modules/react-is": {
-      "version": "17.0.2",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
-      "dev": true
+    "node_modules/simple-swizzle/node_modules/is-arrayish": {
+      "version": "0.3.2",
+      "license": "MIT"
     },
-    "node_modules/jest-leak-detector/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,
+    "node_modules/sirv": {
+      "version": "2.0.4",
+      "license": "MIT",
       "dependencies": {
-        "has-flag": "^4.0.0"
+        "@polka/url": "^1.0.0-next.24",
+        "mrmime": "^2.0.0",
+        "totalist": "^3.0.0"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">= 10"
       }
     },
-    "node_modules/jest-matcher-utils": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-26.6.2.tgz",
-      "integrity": "sha512-llnc8vQgYcNqDrqRDXWwMr9i7rS5XFiCwvh6DTP7Jqa2mqpcCBBlpCbn+trkG0KNhPu/h8rzyBkriOtBstvWhw==",
-      "dev": true,
-      "dependencies": {
-        "chalk": "^4.0.0",
-        "jest-diff": "^26.6.2",
-        "jest-get-type": "^26.3.0",
-        "pretty-format": "^26.6.2"
-      },
+    "node_modules/sisteransi": {
+      "version": "1.0.5",
+      "license": "MIT"
+    },
+    "node_modules/slash": {
+      "version": "2.0.0",
+      "license": "MIT",
       "engines": {
-        "node": ">= 10.14.2"
+        "node": ">=6"
       }
     },
-    "node_modules/jest-matcher-utils/node_modules/@jest/types": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
-      "integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
+    "node_modules/slice-ansi": {
+      "version": "4.0.0",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@types/istanbul-lib-coverage": "^2.0.0",
-        "@types/istanbul-reports": "^3.0.0",
-        "@types/node": "*",
-        "@types/yargs": "^15.0.0",
-        "chalk": "^4.0.0"
+        "ansi-styles": "^4.0.0",
+        "astral-regex": "^2.0.0",
+        "is-fullwidth-code-point": "^3.0.0"
       },
       "engines": {
-        "node": ">= 10.14.2"
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/slice-ansi?sponsor=1"
       }
     },
-    "node_modules/jest-matcher-utils/node_modules/@types/istanbul-reports": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz",
-      "integrity": "sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==",
-      "dev": true,
+    "node_modules/snake-case": {
+      "version": "3.0.4",
+      "license": "MIT",
       "dependencies": {
-        "@types/istanbul-lib-report": "*"
+        "dot-case": "^3.0.4",
+        "tslib": "^2.0.3"
       }
     },
-    "node_modules/jest-matcher-utils/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,
+    "node_modules/sockjs": {
+      "version": "0.3.24",
+      "license": "MIT",
       "dependencies": {
-        "color-convert": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=8"
+        "faye-websocket": "^0.11.3",
+        "uuid": "^8.3.2",
+        "websocket-driver": "^0.7.4"
       }
     },
-    "node_modules/jest-matcher-utils/node_modules/chalk": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
-      "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
-      "dev": true,
-      "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
-      },
-      "engines": {
-        "node": ">=10"
+    "node_modules/sockjs/node_modules/uuid": {
+      "version": "8.3.2",
+      "license": "MIT",
+      "bin": {
+        "uuid": "dist/bin/uuid"
       }
     },
-    "node_modules/jest-matcher-utils/node_modules/color-convert": {
+    "node_modules/source-list-map": {
       "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"
-      },
+      "license": "MIT"
+    },
+    "node_modules/source-map": {
+      "version": "0.7.4",
+      "license": "BSD-3-Clause",
       "engines": {
-        "node": ">=7.0.0"
+        "node": ">= 8"
       }
     },
-    "node_modules/jest-matcher-utils/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/jest-matcher-utils/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,
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "license": "BSD-3-Clause",
       "engines": {
-        "node": ">=8"
+        "node": ">=0.10.0"
       }
     },
-    "node_modules/jest-matcher-utils/node_modules/pretty-format": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-26.6.2.tgz",
-      "integrity": "sha512-7AeGuCYNGmycyQbCqd/3PWH4eOoX/OiCa0uphp57NVTeAGdJGaAliecxwBDHYQCIvrW7aDBZCYeNTP/WX69mkg==",
-      "dev": true,
+    "node_modules/source-map-loader": {
+      "version": "4.0.2",
+      "license": "MIT",
       "dependencies": {
-        "@jest/types": "^26.6.2",
-        "ansi-regex": "^5.0.0",
-        "ansi-styles": "^4.0.0",
-        "react-is": "^17.0.1"
+        "iconv-lite": "^0.6.3",
+        "source-map-js": "^1.0.2"
       },
       "engines": {
-        "node": ">= 10"
+        "node": ">= 14.15.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^5.72.1"
       }
     },
-    "node_modules/jest-matcher-utils/node_modules/react-is": {
-      "version": "17.0.2",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
-      "dev": true
-    },
-    "node_modules/jest-matcher-utils/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,
+    "node_modules/source-map-loader/node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "license": "MIT",
       "dependencies": {
-        "has-flag": "^4.0.0"
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">=0.10.0"
       }
     },
-    "node_modules/jest-message-util": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-26.6.2.tgz",
-      "integrity": "sha512-rGiLePzQ3AzwUshu2+Rn+UMFk0pHN58sOG+IaJbk5Jxuqo3NYO1U2/MIR4S1sKgsoYSXSzdtSa0TgrmtUwEbmA==",
-      "dev": true,
+    "node_modules/source-map-support": {
+      "version": "0.5.13",
+      "license": "MIT",
       "dependencies": {
-        "@babel/code-frame": "^7.0.0",
-        "@jest/types": "^26.6.2",
-        "@types/stack-utils": "^2.0.0",
-        "chalk": "^4.0.0",
-        "graceful-fs": "^4.2.4",
-        "micromatch": "^4.0.2",
-        "pretty-format": "^26.6.2",
-        "slash": "^3.0.0",
-        "stack-utils": "^2.0.2"
-      },
+        "buffer-from": "^1.0.0",
+        "source-map": "^0.6.0"
+      }
+    },
+    "node_modules/source-map-support/node_modules/source-map": {
+      "version": "0.6.1",
+      "license": "BSD-3-Clause",
       "engines": {
-        "node": ">= 10.14.2"
+        "node": ">=0.10.0"
       }
     },
-    "node_modules/jest-message-util/node_modules/@jest/types": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
-      "integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
+    "node_modules/spdx-correct": {
+      "version": "3.2.0",
       "dev": true,
+      "license": "Apache-2.0",
       "dependencies": {
-        "@types/istanbul-lib-coverage": "^2.0.0",
-        "@types/istanbul-reports": "^3.0.0",
-        "@types/node": "*",
-        "@types/yargs": "^15.0.0",
-        "chalk": "^4.0.0"
-      },
-      "engines": {
-        "node": ">= 10.14.2"
+        "spdx-expression-parse": "^3.0.0",
+        "spdx-license-ids": "^3.0.0"
       }
     },
-    "node_modules/jest-message-util/node_modules/@types/istanbul-reports": {
+    "node_modules/spdx-exceptions": {
+      "version": "2.5.0",
+      "dev": true,
+      "license": "CC-BY-3.0"
+    },
+    "node_modules/spdx-expression-parse": {
       "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz",
-      "integrity": "sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@types/istanbul-lib-report": "*"
+        "spdx-exceptions": "^2.1.0",
+        "spdx-license-ids": "^3.0.0"
       }
     },
-    "node_modules/jest-message-util/node_modules/@types/stack-utils": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz",
-      "integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==",
-      "dev": true
-    },
-    "node_modules/jest-message-util/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==",
+    "node_modules/spdx-license-ids": {
+      "version": "3.0.18",
       "dev": true,
+      "license": "CC0-1.0"
+    },
+    "node_modules/spdy": {
+      "version": "4.0.2",
+      "license": "MIT",
       "dependencies": {
-        "color-convert": "^2.0.1"
+        "debug": "^4.1.0",
+        "handle-thing": "^2.0.0",
+        "http-deceiver": "^1.2.7",
+        "select-hose": "^2.0.0",
+        "spdy-transport": "^3.0.0"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">=6.0.0"
       }
     },
-    "node_modules/jest-message-util/node_modules/braces": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-      "dev": true,
+    "node_modules/spdy-transport": {
+      "version": "3.0.0",
+      "license": "MIT",
       "dependencies": {
-        "fill-range": "^7.0.1"
-      },
-      "engines": {
-        "node": ">=8"
+        "debug": "^4.1.0",
+        "detect-node": "^2.0.4",
+        "hpack.js": "^2.1.6",
+        "obuf": "^1.1.2",
+        "readable-stream": "^3.0.6",
+        "wbuf": "^1.7.3"
       }
     },
-    "node_modules/jest-message-util/node_modules/chalk": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
-      "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
-      "dev": true,
+    "node_modules/spdy-transport/node_modules/readable-stream": {
+      "version": "3.6.2",
+      "license": "MIT",
       "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
       },
       "engines": {
-        "node": ">=10"
+        "node": ">= 6"
       }
     },
-    "node_modules/jest-message-util/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,
+    "node_modules/split-on-first": {
+      "version": "1.1.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/sprintf-js": {
+      "version": "1.0.3",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/stack-utils": {
+      "version": "2.0.6",
+      "license": "MIT",
       "dependencies": {
-        "color-name": "~1.1.4"
+        "escape-string-regexp": "^2.0.0"
       },
       "engines": {
-        "node": ">=7.0.0"
+        "node": ">=10"
       }
     },
-    "node_modules/jest-message-util/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/jest-message-util/node_modules/escape-string-regexp": {
+    "node_modules/stack-utils/node_modules/escape-string-regexp": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz",
-      "integrity": "sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==",
-      "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=8"
       }
     },
-    "node_modules/jest-message-util/node_modules/fill-range": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-      "dev": true,
-      "dependencies": {
-        "to-regex-range": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
+    "node_modules/stackframe": {
+      "version": "1.3.4",
+      "license": "MIT"
     },
-    "node_modules/jest-message-util/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,
+    "node_modules/start": {
+      "version": "5.1.0",
+      "license": "MIT",
       "engines": {
-        "node": ">=8"
+        "node": ">=4"
       }
     },
-    "node_modules/jest-message-util/node_modules/is-number": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "dev": true,
+    "node_modules/statuses": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
+      "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
       "engines": {
-        "node": ">=0.12.0"
+        "node": ">= 0.8"
       }
     },
-    "node_modules/jest-message-util/node_modules/micromatch": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz",
-      "integrity": "sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==",
+    "node_modules/stop-iteration-iterator": {
+      "version": "1.0.0",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "braces": "^3.0.1",
-        "picomatch": "^2.2.3"
+        "internal-slot": "^1.0.4"
       },
       "engines": {
-        "node": ">=8.6"
+        "node": ">= 0.4"
       }
     },
-    "node_modules/jest-message-util/node_modules/pretty-format": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-26.6.2.tgz",
-      "integrity": "sha512-7AeGuCYNGmycyQbCqd/3PWH4eOoX/OiCa0uphp57NVTeAGdJGaAliecxwBDHYQCIvrW7aDBZCYeNTP/WX69mkg==",
-      "dev": true,
+    "node_modules/streamx": {
+      "version": "2.18.0",
+      "license": "MIT",
       "dependencies": {
-        "@jest/types": "^26.6.2",
-        "ansi-regex": "^5.0.0",
-        "ansi-styles": "^4.0.0",
-        "react-is": "^17.0.1"
+        "fast-fifo": "^1.3.2",
+        "queue-tick": "^1.0.1",
+        "text-decoder": "^1.1.0"
       },
-      "engines": {
-        "node": ">= 10"
+      "optionalDependencies": {
+        "bare-events": "^2.2.0"
       }
     },
-    "node_modules/jest-message-util/node_modules/react-is": {
-      "version": "17.0.2",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
-      "dev": true
-    },
-    "node_modules/jest-message-util/node_modules/slash": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
-      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
-      "dev": true,
+    "node_modules/strict-uri-encode": {
+      "version": "2.0.0",
+      "license": "MIT",
       "engines": {
-        "node": ">=8"
+        "node": ">=4"
       }
     },
-    "node_modules/jest-message-util/node_modules/stack-utils": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/stack-utils/-/stack-utils-2.0.3.tgz",
-      "integrity": "sha512-gL//fkxfWUsIlFL2Tl42Cl6+HFALEaB1FU76I/Fy+oZjRreP7OPMXFlGbxM7NQsI0ZpUfw76sHnv0WNYuTb7Iw==",
-      "dev": true,
+    "node_modules/string_decoder": {
+      "version": "1.1.1",
+      "license": "MIT",
       "dependencies": {
-        "escape-string-regexp": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10"
+        "safe-buffer": "~5.1.0"
       }
     },
-    "node_modules/jest-message-util/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,
+    "node_modules/string_decoder/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "license": "MIT"
+    },
+    "node_modules/string-length": {
+      "version": "4.0.2",
+      "license": "MIT",
       "dependencies": {
-        "has-flag": "^4.0.0"
+        "char-regex": "^1.0.2",
+        "strip-ansi": "^6.0.0"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">=10"
       }
     },
-    "node_modules/jest-message-util/node_modules/to-regex-range": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dev": true,
+    "node_modules/string-width": {
+      "version": "4.2.3",
+      "license": "MIT",
       "dependencies": {
-        "is-number": "^7.0.0"
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
       },
       "engines": {
-        "node": ">=8.0"
+        "node": ">=8"
       }
     },
-    "node_modules/jest-mock": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/jest-mock/-/jest-mock-26.6.2.tgz",
-      "integrity": "sha512-YyFjePHHp1LzpzYcmgqkJ0nm0gg/lJx2aZFzFy1S6eUqNjXsOqTK10zNRff2dNfssgokjkG65OlWNcIlgd3zew==",
-      "dev": true,
-      "dependencies": {
-        "@jest/types": "^26.6.2",
-        "@types/node": "*"
+    "node_modules/string-width/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "license": "MIT"
+    },
+    "node_modules/string.prototype.matchall": {
+      "version": "4.0.11",
+      "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.11.tgz",
+      "integrity": "sha512-NUdh0aDavY2og7IbBPenWqR9exH+E26Sv8e0/eTe1tltDGZL+GtBkDAnnyBtmekfK6/Dq3MkcGtzXFEd1LQrtg==",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.4",
+        "gopd": "^1.0.1",
+        "has-symbols": "^1.0.3",
+        "internal-slot": "^1.0.7",
+        "regexp.prototype.flags": "^1.5.2",
+        "set-function-name": "^2.0.2",
+        "side-channel": "^1.0.6"
       },
       "engines": {
-        "node": ">= 10.14.2"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/jest-mock/node_modules/@jest/types": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
-      "integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
-      "dev": true,
+    "node_modules/string.prototype.trim": {
+      "version": "1.2.9",
+      "license": "MIT",
       "dependencies": {
-        "@types/istanbul-lib-coverage": "^2.0.0",
-        "@types/istanbul-reports": "^3.0.0",
-        "@types/node": "*",
-        "@types/yargs": "^15.0.0",
-        "chalk": "^4.0.0"
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.0",
+        "es-object-atoms": "^1.0.0"
       },
       "engines": {
-        "node": ">= 10.14.2"
-      }
-    },
-    "node_modules/jest-mock/node_modules/@types/istanbul-reports": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz",
-      "integrity": "sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==",
-      "dev": true,
-      "dependencies": {
-        "@types/istanbul-lib-report": "*"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/jest-mock/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,
+    "node_modules/string.prototype.trimend": {
+      "version": "1.0.8",
+      "license": "MIT",
       "dependencies": {
-        "color-convert": "^2.0.1"
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
       },
-      "engines": {
-        "node": ">=8"
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/jest-mock/node_modules/chalk": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
-      "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
-      "dev": true,
+    "node_modules/string.prototype.trimstart": {
+      "version": "1.0.8",
+      "license": "MIT",
       "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
       },
       "engines": {
-        "node": ">=10"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/jest-mock/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,
+    "node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "license": "MIT",
       "dependencies": {
-        "color-name": "~1.1.4"
+        "ansi-regex": "^5.0.1"
       },
       "engines": {
-        "node": ">=7.0.0"
+        "node": ">=8"
       }
     },
-    "node_modules/jest-mock/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/jest-mock/node_modules/has-flag": {
+    "node_modules/strip-bom": {
       "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-      "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=8"
       }
     },
-    "node_modules/jest-mock/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==",
+    "node_modules/strip-final-newline": {
+      "version": "2.0.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/strip-indent": {
+      "version": "3.0.0",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "has-flag": "^4.0.0"
+        "min-indent": "^1.0.0"
       },
       "engines": {
         "node": ">=8"
       }
     },
-    "node_modules/jest-pnp-resolver": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/jest-pnp-resolver/-/jest-pnp-resolver-1.2.2.tgz",
-      "integrity": "sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==",
-      "dev": true,
+    "node_modules/strip-json-comments": {
+      "version": "3.1.1",
+      "license": "MIT",
       "engines": {
-        "node": ">=6"
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/jest-regex-util": {
-      "version": "26.0.0",
-      "resolved": "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-26.0.0.tgz",
-      "integrity": "sha512-Gv3ZIs/nA48/Zvjrl34bf+oD76JHiGDUxNOVgUjh3j890sblXryjY4rss71fPtD/njchl6PSE2hIhvyWa1eT0A==",
-      "dev": true,
+    "node_modules/strnum": {
+      "version": "1.0.5",
+      "license": "MIT"
+    },
+    "node_modules/style-loader": {
+      "version": "3.3.4",
+      "license": "MIT",
       "engines": {
-        "node": ">= 10.14.2"
+        "node": ">= 12.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^5.0.0"
       }
     },
-    "node_modules/jest-resolve": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/jest-resolve/-/jest-resolve-26.6.2.tgz",
-      "integrity": "sha512-sOxsZOq25mT1wRsfHcbtkInS+Ek7Q8jCHUB0ZUTP0tc/c41QHriU/NunqMfCUWsL4H3MHpvQD4QR9kSYhS7UvQ==",
+    "node_modules/style-mod": {
+      "version": "4.1.2",
+      "license": "MIT"
+    },
+    "node_modules/style-search": {
+      "version": "0.1.0",
       "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/stylehacks": {
+      "version": "6.1.1",
+      "license": "MIT",
       "dependencies": {
-        "@jest/types": "^26.6.2",
-        "chalk": "^4.0.0",
-        "graceful-fs": "^4.2.4",
-        "jest-pnp-resolver": "^1.2.2",
-        "jest-util": "^26.6.2",
-        "read-pkg-up": "^7.0.1",
-        "resolve": "^1.18.1",
-        "slash": "^3.0.0"
+        "browserslist": "^4.23.0",
+        "postcss-selector-parser": "^6.0.16"
       },
       "engines": {
-        "node": ">= 10.14.2"
-      }
-    },
-    "node_modules/jest-resolve-dependencies": {
-      "version": "26.6.3",
-      "resolved": "https://registry.npmjs.org/jest-resolve-dependencies/-/jest-resolve-dependencies-26.6.3.tgz",
-      "integrity": "sha512-pVwUjJkxbhe4RY8QEWzN3vns2kqyuldKpxlxJlzEYfKSvY6/bMvxoFrYYzUO1Gx28yKWN37qyV7rIoIp2h8fTg==",
-      "dev": true,
-      "dependencies": {
-        "@jest/types": "^26.6.2",
-        "jest-regex-util": "^26.0.0",
-        "jest-snapshot": "^26.6.2"
+        "node": "^14 || ^16 || >=18.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.31"
+      }
+    },
+    "node_modules/stylelint": {
+      "version": "15.11.0",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@csstools/css-parser-algorithms": "^2.3.1",
+        "@csstools/css-tokenizer": "^2.2.0",
+        "@csstools/media-query-list-parser": "^2.1.4",
+        "@csstools/selector-specificity": "^3.0.0",
+        "balanced-match": "^2.0.0",
+        "colord": "^2.9.3",
+        "cosmiconfig": "^8.2.0",
+        "css-functions-list": "^3.2.1",
+        "css-tree": "^2.3.1",
+        "debug": "^4.3.4",
+        "fast-glob": "^3.3.1",
+        "fastest-levenshtein": "^1.0.16",
+        "file-entry-cache": "^7.0.0",
+        "global-modules": "^2.0.0",
+        "globby": "^11.1.0",
+        "globjoin": "^0.1.4",
+        "html-tags": "^3.3.1",
+        "ignore": "^5.2.4",
+        "import-lazy": "^4.0.0",
+        "imurmurhash": "^0.1.4",
+        "is-plain-object": "^5.0.0",
+        "known-css-properties": "^0.29.0",
+        "mathml-tag-names": "^2.1.3",
+        "meow": "^10.1.5",
+        "micromatch": "^4.0.5",
+        "normalize-path": "^3.0.0",
+        "picocolors": "^1.0.0",
+        "postcss": "^8.4.28",
+        "postcss-resolve-nested-selector": "^0.1.1",
+        "postcss-safe-parser": "^6.0.0",
+        "postcss-selector-parser": "^6.0.13",
+        "postcss-value-parser": "^4.2.0",
+        "resolve-from": "^5.0.0",
+        "string-width": "^4.2.3",
+        "strip-ansi": "^6.0.1",
+        "style-search": "^0.1.0",
+        "supports-hyperlinks": "^3.0.0",
+        "svg-tags": "^1.0.0",
+        "table": "^6.8.1",
+        "write-file-atomic": "^5.0.1"
+      },
+      "bin": {
+        "stylelint": "bin/stylelint.mjs"
       },
       "engines": {
-        "node": ">= 10.14.2"
+        "node": "^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/stylelint"
       }
     },
-    "node_modules/jest-resolve-dependencies/node_modules/@jest/types": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
-      "integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
+    "node_modules/stylelint-config-recommended": {
+      "version": "12.0.0",
       "dev": true,
-      "dependencies": {
-        "@types/istanbul-lib-coverage": "^2.0.0",
-        "@types/istanbul-reports": "^3.0.0",
-        "@types/node": "*",
-        "@types/yargs": "^15.0.0",
-        "chalk": "^4.0.0"
-      },
-      "engines": {
-        "node": ">= 10.14.2"
+      "license": "MIT",
+      "peerDependencies": {
+        "stylelint": "^15.5.0"
       }
     },
-    "node_modules/jest-resolve-dependencies/node_modules/@types/istanbul-reports": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz",
-      "integrity": "sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==",
+    "node_modules/stylelint-config-recommended-scss": {
+      "version": "11.0.0",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@types/istanbul-lib-report": "*"
+        "postcss-scss": "^4.0.6",
+        "stylelint-config-recommended": "^12.0.0",
+        "stylelint-scss": "^4.6.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.3.3",
+        "stylelint": "^15.5.0"
+      },
+      "peerDependenciesMeta": {
+        "postcss": {
+          "optional": true
+        }
       }
     },
-    "node_modules/jest-resolve-dependencies/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==",
+    "node_modules/stylelint-config-standard": {
+      "version": "33.0.0",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "color-convert": "^2.0.1"
+        "stylelint-config-recommended": "^12.0.0"
       },
-      "engines": {
-        "node": ">=8"
+      "peerDependencies": {
+        "stylelint": "^15.5.0"
       }
     },
-    "node_modules/jest-resolve-dependencies/node_modules/chalk": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
-      "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
+    "node_modules/stylelint-scss": {
+      "version": "4.7.0",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
+        "postcss-media-query-parser": "^0.2.3",
+        "postcss-resolve-nested-selector": "^0.1.1",
+        "postcss-selector-parser": "^6.0.11",
+        "postcss-value-parser": "^4.2.0"
       },
-      "engines": {
-        "node": ">=10"
+      "peerDependencies": {
+        "stylelint": "^14.5.1 || ^15.0.0"
       }
     },
-    "node_modules/jest-resolve-dependencies/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==",
+    "node_modules/stylelint/node_modules/balanced-match": {
+      "version": "2.0.0",
       "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/stylelint/node_modules/file-entry-cache": {
+      "version": "7.0.2",
+      "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "color-name": "~1.1.4"
+        "flat-cache": "^3.2.0"
       },
       "engines": {
-        "node": ">=7.0.0"
+        "node": ">=12.0.0"
       }
     },
-    "node_modules/jest-resolve-dependencies/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/jest-resolve-dependencies/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==",
+    "node_modules/stylelint/node_modules/signal-exit": {
+      "version": "4.1.0",
       "dev": true,
+      "license": "ISC",
       "engines": {
-        "node": ">=8"
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/jest-resolve-dependencies/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==",
+    "node_modules/stylelint/node_modules/write-file-atomic": {
+      "version": "5.0.1",
       "dev": true,
+      "license": "ISC",
       "dependencies": {
-        "has-flag": "^4.0.0"
+        "imurmurhash": "^0.1.4",
+        "signal-exit": "^4.0.1"
       },
       "engines": {
-        "node": ">=8"
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
       }
     },
-    "node_modules/jest-resolve/node_modules/@jest/types": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
-      "integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
-      "dev": true,
+    "node_modules/stylis": {
+      "version": "4.2.0",
+      "license": "MIT"
+    },
+    "node_modules/superagent": {
+      "version": "3.8.3",
+      "license": "MIT",
       "dependencies": {
-        "@types/istanbul-lib-coverage": "^2.0.0",
-        "@types/istanbul-reports": "^3.0.0",
-        "@types/node": "*",
-        "@types/yargs": "^15.0.0",
-        "chalk": "^4.0.0"
+        "component-emitter": "^1.2.0",
+        "cookiejar": "^2.1.0",
+        "debug": "^3.1.0",
+        "extend": "^3.0.0",
+        "form-data": "^2.3.1",
+        "formidable": "^1.2.0",
+        "methods": "^1.1.1",
+        "mime": "^1.4.1",
+        "qs": "^6.5.1",
+        "readable-stream": "^2.3.5"
       },
       "engines": {
-        "node": ">= 10.14.2"
+        "node": ">= 4.0"
       }
     },
-    "node_modules/jest-resolve/node_modules/@types/istanbul-reports": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz",
-      "integrity": "sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==",
-      "dev": true,
+    "node_modules/superagent/node_modules/debug": {
+      "version": "3.2.7",
+      "license": "MIT",
       "dependencies": {
-        "@types/istanbul-lib-report": "*"
+        "ms": "^2.1.1"
       }
     },
-    "node_modules/jest-resolve/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,
+    "node_modules/superagent/node_modules/form-data": {
+      "version": "2.5.1",
+      "license": "MIT",
       "dependencies": {
-        "color-convert": "^2.0.1"
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.6",
+        "mime-types": "^2.1.12"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">= 0.12"
       }
     },
-    "node_modules/jest-resolve/node_modules/chalk": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
-      "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
-      "dev": true,
+    "node_modules/supports-color": {
+      "version": "7.2.0",
+      "license": "MIT",
       "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
+        "has-flag": "^4.0.0"
       },
       "engines": {
-        "node": ">=10"
+        "node": ">=8"
       }
     },
-    "node_modules/jest-resolve/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==",
+    "node_modules/supports-hyperlinks": {
+      "version": "3.0.0",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "color-name": "~1.1.4"
+        "has-flag": "^4.0.0",
+        "supports-color": "^7.0.0"
       },
       "engines": {
-        "node": ">=7.0.0"
+        "node": ">=14.18"
       }
     },
-    "node_modules/jest-resolve/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/jest-resolve/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,
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "license": "MIT",
       "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/jest-resolve/node_modules/read-pkg": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
-      "integrity": "sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==",
-      "dev": true,
-      "dependencies": {
-        "@types/normalize-package-data": "^2.4.0",
-        "normalize-package-data": "^2.5.0",
-        "parse-json": "^5.0.0",
-        "type-fest": "^0.6.0"
+        "node": ">= 0.4"
       },
-      "engines": {
-        "node": ">=8"
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/jest-resolve/node_modules/read-pkg-up": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-7.0.1.tgz",
-      "integrity": "sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==",
-      "dev": true,
+    "node_modules/svg-parser": {
+      "version": "2.0.4",
+      "license": "MIT"
+    },
+    "node_modules/svg-tags": {
+      "version": "1.0.0",
+      "dev": true
+    },
+    "node_modules/svgo": {
+      "version": "3.3.2",
+      "license": "MIT",
       "dependencies": {
-        "find-up": "^4.1.0",
-        "read-pkg": "^5.2.0",
-        "type-fest": "^0.8.1"
+        "@trysound/sax": "0.2.0",
+        "commander": "^7.2.0",
+        "css-select": "^5.1.0",
+        "css-tree": "^2.3.1",
+        "css-what": "^6.1.0",
+        "csso": "^5.0.5",
+        "picocolors": "^1.0.0"
+      },
+      "bin": {
+        "svgo": "bin/svgo"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/svgo"
       }
     },
-    "node_modules/jest-resolve/node_modules/read-pkg/node_modules/type-fest": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.6.0.tgz",
-      "integrity": "sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==",
-      "dev": true,
+    "node_modules/svgo/node_modules/commander": {
+      "version": "7.2.0",
+      "license": "MIT",
       "engines": {
-        "node": ">=8"
+        "node": ">= 10"
       }
     },
-    "node_modules/jest-resolve/node_modules/resolve": {
-      "version": "1.20.0",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
-      "integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==",
-      "dev": true,
+    "node_modules/svgo/node_modules/css-select": {
+      "version": "5.1.0",
+      "license": "BSD-2-Clause",
       "dependencies": {
-        "is-core-module": "^2.2.0",
-        "path-parse": "^1.0.6"
-      }
-    },
-    "node_modules/jest-resolve/node_modules/slash": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
-      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
+        "boolbase": "^1.0.0",
+        "css-what": "^6.1.0",
+        "domhandler": "^5.0.2",
+        "domutils": "^3.0.1",
+        "nth-check": "^2.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
       }
     },
-    "node_modules/jest-resolve/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,
+    "node_modules/svgo/node_modules/dom-serializer": {
+      "version": "2.0.0",
+      "license": "MIT",
       "dependencies": {
-        "has-flag": "^4.0.0"
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "entities": "^4.2.0"
       },
-      "engines": {
-        "node": ">=8"
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
       }
     },
-    "node_modules/jest-runner": {
-      "version": "26.6.3",
-      "resolved": "https://registry.npmjs.org/jest-runner/-/jest-runner-26.6.3.tgz",
-      "integrity": "sha512-atgKpRHnaA2OvByG/HpGA4g6CSPS/1LK0jK3gATJAoptC1ojltpmVlYC3TYgdmGp+GLuhzpH30Gvs36szSL2JQ==",
-      "dev": true,
-      "dependencies": {
-        "@jest/console": "^26.6.2",
-        "@jest/environment": "^26.6.2",
-        "@jest/test-result": "^26.6.2",
-        "@jest/types": "^26.6.2",
-        "@types/node": "*",
-        "chalk": "^4.0.0",
-        "emittery": "^0.7.1",
-        "exit": "^0.1.2",
-        "graceful-fs": "^4.2.4",
-        "jest-config": "^26.6.3",
-        "jest-docblock": "^26.0.0",
-        "jest-haste-map": "^26.6.2",
-        "jest-leak-detector": "^26.6.2",
-        "jest-message-util": "^26.6.2",
-        "jest-resolve": "^26.6.2",
-        "jest-runtime": "^26.6.3",
-        "jest-util": "^26.6.2",
-        "jest-worker": "^26.6.2",
-        "source-map-support": "^0.5.6",
-        "throat": "^5.0.0"
-      },
-      "engines": {
-        "node": ">= 10.14.2"
-      }
-    },
-    "node_modules/jest-runner/node_modules/@jest/types": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
-      "integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
-      "dev": true,
+    "node_modules/svgo/node_modules/domhandler": {
+      "version": "5.0.3",
+      "license": "BSD-2-Clause",
       "dependencies": {
-        "@types/istanbul-lib-coverage": "^2.0.0",
-        "@types/istanbul-reports": "^3.0.0",
-        "@types/node": "*",
-        "@types/yargs": "^15.0.0",
-        "chalk": "^4.0.0"
+        "domelementtype": "^2.3.0"
       },
       "engines": {
-        "node": ">= 10.14.2"
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
       }
     },
-    "node_modules/jest-runner/node_modules/@types/istanbul-reports": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz",
-      "integrity": "sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==",
-      "dev": true,
+    "node_modules/svgo/node_modules/domutils": {
+      "version": "3.1.0",
+      "license": "BSD-2-Clause",
       "dependencies": {
-        "@types/istanbul-lib-report": "*"
+        "dom-serializer": "^2.0.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
       }
     },
-    "node_modules/jest-runner/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"
-      },
+    "node_modules/symbol-observable": {
+      "version": "1.2.0",
+      "license": "MIT",
       "engines": {
-        "node": ">=8"
+        "node": ">=0.10.0"
       }
     },
-    "node_modules/jest-runner/node_modules/chalk": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
-      "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
+    "node_modules/symbol-tree": {
+      "version": "3.2.4",
+      "license": "MIT"
+    },
+    "node_modules/tabbable": {
+      "version": "5.3.3",
+      "license": "MIT"
+    },
+    "node_modules/table": {
+      "version": "6.8.2",
       "dev": true,
+      "license": "BSD-3-Clause",
       "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
+        "ajv": "^8.0.1",
+        "lodash.truncate": "^4.4.2",
+        "slice-ansi": "^4.0.0",
+        "string-width": "^4.2.3",
+        "strip-ansi": "^6.0.1"
       },
       "engines": {
-        "node": ">=10"
+        "node": ">=10.0.0"
       }
     },
-    "node_modules/jest-runner/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==",
+    "node_modules/table/node_modules/ajv": {
+      "version": "8.17.1",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "color-name": "~1.1.4"
+        "fast-deep-equal": "^3.1.3",
+        "fast-uri": "^3.0.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2"
       },
-      "engines": {
-        "node": ">=7.0.0"
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
       }
     },
-    "node_modules/jest-runner/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/table/node_modules/json-schema-traverse": {
+      "version": "1.0.0",
+      "dev": true,
+      "license": "MIT"
     },
-    "node_modules/jest-runner/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==",
+    "node_modules/tapable": {
+      "version": "0.1.10",
       "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": ">=8"
+        "node": ">=0.6"
       }
     },
-    "node_modules/jest-runner/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,
+    "node_modules/tar-fs": {
+      "version": "3.0.6",
+      "license": "MIT",
       "dependencies": {
-        "has-flag": "^4.0.0"
+        "pump": "^3.0.0",
+        "tar-stream": "^3.1.5"
       },
-      "engines": {
-        "node": ">=8"
+      "optionalDependencies": {
+        "bare-fs": "^2.1.1",
+        "bare-path": "^2.1.0"
       }
     },
-    "node_modules/jest-runtime": {
-      "version": "26.6.3",
-      "resolved": "https://registry.npmjs.org/jest-runtime/-/jest-runtime-26.6.3.tgz",
-      "integrity": "sha512-lrzyR3N8sacTAMeonbqpnSka1dHNux2uk0qqDXVkMv2c/A3wYnvQ4EXuI013Y6+gSKSCxdaczvf4HF0mVXHRdw==",
-      "dev": true,
+    "node_modules/tar-stream": {
+      "version": "3.1.7",
+      "license": "MIT",
       "dependencies": {
-        "@jest/console": "^26.6.2",
-        "@jest/environment": "^26.6.2",
-        "@jest/fake-timers": "^26.6.2",
-        "@jest/globals": "^26.6.2",
-        "@jest/source-map": "^26.6.2",
-        "@jest/test-result": "^26.6.2",
-        "@jest/transform": "^26.6.2",
-        "@jest/types": "^26.6.2",
-        "@types/yargs": "^15.0.0",
-        "chalk": "^4.0.0",
-        "cjs-module-lexer": "^0.6.0",
-        "collect-v8-coverage": "^1.0.0",
-        "exit": "^0.1.2",
-        "glob": "^7.1.3",
-        "graceful-fs": "^4.2.4",
-        "jest-config": "^26.6.3",
-        "jest-haste-map": "^26.6.2",
-        "jest-message-util": "^26.6.2",
-        "jest-mock": "^26.6.2",
-        "jest-regex-util": "^26.0.0",
-        "jest-resolve": "^26.6.2",
-        "jest-snapshot": "^26.6.2",
-        "jest-util": "^26.6.2",
-        "jest-validate": "^26.6.2",
-        "slash": "^3.0.0",
-        "strip-bom": "^4.0.0",
-        "yargs": "^15.4.1"
+        "b4a": "^1.6.4",
+        "fast-fifo": "^1.2.0",
+        "streamx": "^2.15.0"
+      }
+    },
+    "node_modules/terser": {
+      "version": "5.31.5",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "@jridgewell/source-map": "^0.3.3",
+        "acorn": "^8.8.2",
+        "commander": "^2.20.0",
+        "source-map-support": "~0.5.20"
       },
       "bin": {
-        "jest-runtime": "bin/jest-runtime.js"
+        "terser": "bin/terser"
       },
       "engines": {
-        "node": ">= 10.14.2"
+        "node": ">=10"
       }
     },
-    "node_modules/jest-runtime/node_modules/@jest/types": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
-      "integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
-      "dev": true,
+    "node_modules/terser-webpack-plugin": {
+      "version": "5.3.10",
+      "license": "MIT",
       "dependencies": {
-        "@types/istanbul-lib-coverage": "^2.0.0",
-        "@types/istanbul-reports": "^3.0.0",
-        "@types/node": "*",
-        "@types/yargs": "^15.0.0",
-        "chalk": "^4.0.0"
+        "@jridgewell/trace-mapping": "^0.3.20",
+        "jest-worker": "^27.4.5",
+        "schema-utils": "^3.1.1",
+        "serialize-javascript": "^6.0.1",
+        "terser": "^5.26.0"
       },
       "engines": {
-        "node": ">= 10.14.2"
-      }
-    },
-    "node_modules/jest-runtime/node_modules/@types/istanbul-reports": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz",
-      "integrity": "sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==",
-      "dev": true,
-      "dependencies": {
-        "@types/istanbul-lib-report": "*"
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^5.1.0"
+      },
+      "peerDependenciesMeta": {
+        "@swc/core": {
+          "optional": true
+        },
+        "esbuild": {
+          "optional": true
+        },
+        "uglify-js": {
+          "optional": true
+        }
       }
     },
-    "node_modules/jest-runtime/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,
+    "node_modules/terser-webpack-plugin/node_modules/jest-worker": {
+      "version": "27.5.1",
+      "license": "MIT",
       "dependencies": {
-        "color-convert": "^2.0.1"
+        "@types/node": "*",
+        "merge-stream": "^2.0.0",
+        "supports-color": "^8.0.0"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">= 10.13.0"
       }
     },
-    "node_modules/jest-runtime/node_modules/chalk": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
-      "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
-      "dev": true,
+    "node_modules/terser-webpack-plugin/node_modules/schema-utils": {
+      "version": "3.3.0",
+      "license": "MIT",
       "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
+        "@types/json-schema": "^7.0.8",
+        "ajv": "^6.12.5",
+        "ajv-keywords": "^3.5.2"
       },
       "engines": {
-        "node": ">=10"
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
       }
     },
-    "node_modules/jest-runtime/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,
+    "node_modules/terser-webpack-plugin/node_modules/supports-color": {
+      "version": "8.1.1",
+      "license": "MIT",
       "dependencies": {
-        "color-name": "~1.1.4"
+        "has-flag": "^4.0.0"
       },
       "engines": {
-        "node": ">=7.0.0"
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-color?sponsor=1"
       }
     },
-    "node_modules/jest-runtime/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/terser/node_modules/commander": {
+      "version": "2.20.3",
+      "license": "MIT"
     },
-    "node_modules/jest-runtime/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,
+    "node_modules/terser/node_modules/source-map": {
+      "version": "0.6.1",
+      "license": "BSD-3-Clause",
       "engines": {
-        "node": ">=8"
+        "node": ">=0.10.0"
       }
     },
-    "node_modules/jest-runtime/node_modules/slash": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
-      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
+    "node_modules/terser/node_modules/source-map-support": {
+      "version": "0.5.21",
+      "license": "MIT",
+      "dependencies": {
+        "buffer-from": "^1.0.0",
+        "source-map": "^0.6.0"
       }
     },
-    "node_modules/jest-runtime/node_modules/strip-bom": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-4.0.0.tgz",
-      "integrity": "sha512-3xurFv5tEgii33Zi8Jtp55wEIILR9eh34FAW00PZf+JnSsTmV/ioewSgQl97JHvgjoRGwPShsWm+IdrxB35d0w==",
-      "dev": true,
+    "node_modules/test-exclude": {
+      "version": "6.0.0",
+      "license": "ISC",
+      "dependencies": {
+        "@istanbuljs/schema": "^0.1.2",
+        "glob": "^7.1.4",
+        "minimatch": "^3.0.4"
+      },
       "engines": {
         "node": ">=8"
       }
     },
-    "node_modules/jest-runtime/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,
+    "node_modules/text-decoder": {
+      "version": "1.1.1",
+      "license": "Apache-2.0",
       "dependencies": {
-        "has-flag": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
+        "b4a": "^1.6.4"
       }
     },
-    "node_modules/jest-serializer": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/jest-serializer/-/jest-serializer-26.6.2.tgz",
-      "integrity": "sha512-S5wqyz0DXnNJPd/xfIzZ5Xnp1HrJWBczg8mMfMpN78OJ5eDxXyf+Ygld9wX1DnUWbIbhM1YDY95NjR4CBXkb2g==",
-      "dev": true,
+    "node_modules/text-table": {
+      "version": "0.2.0",
+      "license": "MIT"
+    },
+    "node_modules/through": {
+      "version": "2.3.8",
+      "license": "MIT"
+    },
+    "node_modules/thunky": {
+      "version": "1.1.0",
+      "license": "MIT"
+    },
+    "node_modules/tiny-invariant": {
+      "version": "1.3.3",
+      "license": "MIT"
+    },
+    "node_modules/tiny-warning": {
+      "version": "1.0.3",
+      "license": "MIT"
+    },
+    "node_modules/tinymce": {
+      "version": "5.10.9",
+      "license": "LGPL-2.1"
+    },
+    "node_modules/tmp": {
+      "version": "0.0.33",
+      "license": "MIT",
       "dependencies": {
-        "@types/node": "*",
-        "graceful-fs": "^4.2.4"
+        "os-tmpdir": "~1.0.2"
       },
       "engines": {
-        "node": ">= 10.14.2"
+        "node": ">=0.6.0"
       }
     },
-    "node_modules/jest-snapshot": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/jest-snapshot/-/jest-snapshot-26.6.2.tgz",
-      "integrity": "sha512-OLhxz05EzUtsAmOMzuupt1lHYXCNib0ECyuZ/PZOx9TrZcC8vL0x+DUG3TL+GLX3yHG45e6YGjIm0XwDc3q3og==",
-      "dev": true,
-      "dependencies": {
-        "@babel/types": "^7.0.0",
-        "@jest/types": "^26.6.2",
-        "@types/babel__traverse": "^7.0.4",
-        "@types/prettier": "^2.0.0",
-        "chalk": "^4.0.0",
-        "expect": "^26.6.2",
-        "graceful-fs": "^4.2.4",
-        "jest-diff": "^26.6.2",
-        "jest-get-type": "^26.3.0",
-        "jest-haste-map": "^26.6.2",
-        "jest-matcher-utils": "^26.6.2",
-        "jest-message-util": "^26.6.2",
-        "jest-resolve": "^26.6.2",
-        "natural-compare": "^1.4.0",
-        "pretty-format": "^26.6.2",
-        "semver": "^7.3.2"
-      },
+    "node_modules/tmpl": {
+      "version": "1.0.5",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/to-fast-properties": {
+      "version": "2.0.0",
+      "license": "MIT",
       "engines": {
-        "node": ">= 10.14.2"
+        "node": ">=4"
       }
     },
-    "node_modules/jest-snapshot/node_modules/@jest/types": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
-      "integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
-      "dev": true,
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "license": "MIT",
       "dependencies": {
-        "@types/istanbul-lib-coverage": "^2.0.0",
-        "@types/istanbul-reports": "^3.0.0",
-        "@types/node": "*",
-        "@types/yargs": "^15.0.0",
-        "chalk": "^4.0.0"
+        "is-number": "^7.0.0"
       },
       "engines": {
-        "node": ">= 10.14.2"
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/toidentifier": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
+      "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
+      "engines": {
+        "node": ">=0.6"
       }
     },
-    "node_modules/jest-snapshot/node_modules/@types/istanbul-reports": {
+    "node_modules/toposort": {
+      "version": "2.0.2",
+      "license": "MIT"
+    },
+    "node_modules/totalist": {
       "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz",
-      "integrity": "sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==",
-      "dev": true,
-      "dependencies": {
-        "@types/istanbul-lib-report": "*"
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
       }
     },
-    "node_modules/jest-snapshot/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,
+    "node_modules/tough-cookie": {
+      "version": "4.1.4",
+      "license": "BSD-3-Clause",
       "dependencies": {
-        "color-convert": "^2.0.1"
+        "psl": "^1.1.33",
+        "punycode": "^2.1.1",
+        "universalify": "^0.2.0",
+        "url-parse": "^1.5.3"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">=6"
       }
     },
-    "node_modules/jest-snapshot/node_modules/chalk": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
-      "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
-      "dev": true,
-      "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
-      },
+    "node_modules/tough-cookie/node_modules/universalify": {
+      "version": "0.2.0",
+      "license": "MIT",
       "engines": {
-        "node": ">=10"
+        "node": ">= 4.0.0"
       }
     },
-    "node_modules/jest-snapshot/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==",
+    "node_modules/tr46": {
+      "version": "1.0.1",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "color-name": "~1.1.4"
-      },
-      "engines": {
-        "node": ">=7.0.0"
+        "punycode": "^2.1.0"
       }
     },
-    "node_modules/jest-snapshot/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/jest-snapshot/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==",
+    "node_modules/trim-newlines": {
+      "version": "4.1.1",
       "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": ">=8"
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/jest-snapshot/node_modules/pretty-format": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-26.6.2.tgz",
-      "integrity": "sha512-7AeGuCYNGmycyQbCqd/3PWH4eOoX/OiCa0uphp57NVTeAGdJGaAliecxwBDHYQCIvrW7aDBZCYeNTP/WX69mkg==",
-      "dev": true,
-      "dependencies": {
-        "@jest/types": "^26.6.2",
-        "ansi-regex": "^5.0.0",
-        "ansi-styles": "^4.0.0",
-        "react-is": "^17.0.1"
-      },
+    "node_modules/ts-api-utils": {
+      "version": "1.3.0",
+      "license": "MIT",
       "engines": {
-        "node": ">= 10"
+        "node": ">=16"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.2.0"
       }
     },
-    "node_modules/jest-snapshot/node_modules/react-is": {
-      "version": "17.0.2",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
-      "dev": true
-    },
-    "node_modules/jest-snapshot/node_modules/semver": {
-      "version": "7.3.5",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
-      "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==",
-      "dev": true,
+    "node_modules/ts-jest": {
+      "version": "29.2.4",
+      "license": "MIT",
       "dependencies": {
-        "lru-cache": "^6.0.0"
+        "bs-logger": "0.x",
+        "ejs": "^3.1.10",
+        "fast-json-stable-stringify": "2.x",
+        "jest-util": "^29.0.0",
+        "json5": "^2.2.3",
+        "lodash.memoize": "4.x",
+        "make-error": "1.x",
+        "semver": "^7.5.3",
+        "yargs-parser": "^21.0.1"
       },
       "bin": {
-        "semver": "bin/semver.js"
+        "ts-jest": "cli.js"
       },
       "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/jest-snapshot/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"
+        "node": "^14.15.0 || ^16.10.0 || ^18.0.0 || >=20.0.0"
       },
-      "engines": {
-        "node": ">=8"
+      "peerDependencies": {
+        "@babel/core": ">=7.0.0-beta.0 <8",
+        "@jest/transform": "^29.0.0",
+        "@jest/types": "^29.0.0",
+        "babel-jest": "^29.0.0",
+        "jest": "^29.0.0",
+        "typescript": ">=4.3 <6"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        },
+        "@jest/transform": {
+          "optional": true
+        },
+        "@jest/types": {
+          "optional": true
+        },
+        "babel-jest": {
+          "optional": true
+        },
+        "esbuild": {
+          "optional": true
+        }
       }
     },
-    "node_modules/jest-util": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-26.6.2.tgz",
-      "integrity": "sha512-MDW0fKfsn0OI7MS7Euz6h8HNDXVQ0gaM9uW6RjfDmd1DAFcaxX9OqIakHIqhbnmF08Cf2DLDG+ulq8YQQ0Lp0Q==",
-      "dev": true,
-      "dependencies": {
-        "@jest/types": "^26.6.2",
-        "@types/node": "*",
-        "chalk": "^4.0.0",
-        "graceful-fs": "^4.2.4",
-        "is-ci": "^2.0.0",
-        "micromatch": "^4.0.2"
+    "node_modules/ts-jest/node_modules/semver": {
+      "version": "7.6.3",
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
       },
       "engines": {
-        "node": ">= 10.14.2"
+        "node": ">=10"
       }
     },
-    "node_modules/jest-util/node_modules/@jest/types": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
-      "integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
-      "dev": true,
-      "dependencies": {
-        "@types/istanbul-lib-coverage": "^2.0.0",
-        "@types/istanbul-reports": "^3.0.0",
-        "@types/node": "*",
-        "@types/yargs": "^15.0.0",
-        "chalk": "^4.0.0"
-      },
+    "node_modules/ts-jest/node_modules/yargs-parser": {
+      "version": "21.1.1",
+      "license": "ISC",
       "engines": {
-        "node": ">= 10.14.2"
+        "node": ">=12"
       }
     },
-    "node_modules/jest-util/node_modules/@types/istanbul-reports": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz",
-      "integrity": "sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==",
-      "dev": true,
+    "node_modules/tsconfig-paths": {
+      "version": "3.15.0",
+      "license": "MIT",
       "dependencies": {
-        "@types/istanbul-lib-report": "*"
+        "@types/json5": "^0.0.29",
+        "json5": "^1.0.2",
+        "minimist": "^1.2.6",
+        "strip-bom": "^3.0.0"
       }
     },
-    "node_modules/jest-util/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,
+    "node_modules/tsconfig-paths/node_modules/json5": {
+      "version": "1.0.2",
+      "license": "MIT",
       "dependencies": {
-        "color-convert": "^2.0.1"
+        "minimist": "^1.2.0"
       },
-      "engines": {
-        "node": ">=8"
+      "bin": {
+        "json5": "lib/cli.js"
       }
     },
-    "node_modules/jest-util/node_modules/braces": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-      "dev": true,
-      "dependencies": {
-        "fill-range": "^7.0.1"
-      },
+    "node_modules/tsconfig-paths/node_modules/strip-bom": {
+      "version": "3.0.0",
+      "license": "MIT",
       "engines": {
-        "node": ">=8"
+        "node": ">=4"
       }
     },
-    "node_modules/jest-util/node_modules/chalk": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
-      "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
-      "dev": true,
+    "node_modules/tslib": {
+      "version": "2.6.3",
+      "license": "0BSD"
+    },
+    "node_modules/tsutils": {
+      "version": "3.21.0",
+      "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz",
+      "integrity": "sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==",
       "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
+        "tslib": "^1.8.1"
       },
       "engines": {
-        "node": ">=10"
+        "node": ">= 6"
+      },
+      "peerDependencies": {
+        "typescript": ">=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta"
       }
     },
-    "node_modules/jest-util/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,
+    "node_modules/tsutils/node_modules/tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+    },
+    "node_modules/tunnel-agent": {
+      "version": "0.6.0",
+      "license": "Apache-2.0",
       "dependencies": {
-        "color-name": "~1.1.4"
+        "safe-buffer": "^5.0.1"
       },
       "engines": {
-        "node": ">=7.0.0"
+        "node": "*"
       }
     },
-    "node_modules/jest-util/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/jest-util/node_modules/fill-range": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-      "dev": true,
+    "node_modules/type-check": {
+      "version": "0.4.0",
+      "license": "MIT",
       "dependencies": {
-        "to-regex-range": "^5.0.1"
+        "prelude-ls": "^1.2.1"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">= 0.8.0"
       }
     },
-    "node_modules/jest-util/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,
+    "node_modules/type-detect": {
+      "version": "4.0.8",
+      "license": "MIT",
       "engines": {
-        "node": ">=8"
+        "node": ">=4"
       }
     },
-    "node_modules/jest-util/node_modules/is-number": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "dev": true,
+    "node_modules/type-fest": {
+      "version": "0.21.3",
+      "license": "(MIT OR CC0-1.0)",
       "engines": {
-        "node": ">=0.12.0"
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/jest-util/node_modules/micromatch": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz",
-      "integrity": "sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==",
-      "dev": true,
+    "node_modules/type-is": {
+      "version": "1.6.18",
+      "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
+      "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
       "dependencies": {
-        "braces": "^3.0.1",
-        "picomatch": "^2.2.3"
+        "media-typer": "0.3.0",
+        "mime-types": "~2.1.24"
       },
       "engines": {
-        "node": ">=8.6"
+        "node": ">= 0.6"
       }
     },
-    "node_modules/jest-util/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,
+    "node_modules/typed-array-buffer": {
+      "version": "1.0.2",
+      "license": "MIT",
       "dependencies": {
-        "has-flag": "^4.0.0"
+        "call-bind": "^1.0.7",
+        "es-errors": "^1.3.0",
+        "is-typed-array": "^1.1.13"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">= 0.4"
       }
     },
-    "node_modules/jest-util/node_modules/to-regex-range": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dev": true,
+    "node_modules/typed-array-byte-length": {
+      "version": "1.0.1",
+      "license": "MIT",
       "dependencies": {
-        "is-number": "^7.0.0"
+        "call-bind": "^1.0.7",
+        "for-each": "^0.3.3",
+        "gopd": "^1.0.1",
+        "has-proto": "^1.0.3",
+        "is-typed-array": "^1.1.13"
       },
       "engines": {
-        "node": ">=8.0"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/jest-validate": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/jest-validate/-/jest-validate-26.6.2.tgz",
-      "integrity": "sha512-NEYZ9Aeyj0i5rQqbq+tpIOom0YS1u2MVu6+euBsvpgIme+FOfRmoC4R5p0JiAUpaFvFy24xgrpMknarR/93XjQ==",
-      "dev": true,
+    "node_modules/typed-array-byte-offset": {
+      "version": "1.0.2",
+      "license": "MIT",
       "dependencies": {
-        "@jest/types": "^26.6.2",
-        "camelcase": "^6.0.0",
-        "chalk": "^4.0.0",
-        "jest-get-type": "^26.3.0",
-        "leven": "^3.1.0",
-        "pretty-format": "^26.6.2"
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.7",
+        "for-each": "^0.3.3",
+        "gopd": "^1.0.1",
+        "has-proto": "^1.0.3",
+        "is-typed-array": "^1.1.13"
       },
       "engines": {
-        "node": ">= 10.14.2"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/jest-validate/node_modules/@jest/types": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
-      "integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
-      "dev": true,
+    "node_modules/typed-array-length": {
+      "version": "1.0.6",
+      "license": "MIT",
       "dependencies": {
-        "@types/istanbul-lib-coverage": "^2.0.0",
-        "@types/istanbul-reports": "^3.0.0",
-        "@types/node": "*",
-        "@types/yargs": "^15.0.0",
-        "chalk": "^4.0.0"
+        "call-bind": "^1.0.7",
+        "for-each": "^0.3.3",
+        "gopd": "^1.0.1",
+        "has-proto": "^1.0.3",
+        "is-typed-array": "^1.1.13",
+        "possible-typed-array-names": "^1.0.0"
       },
       "engines": {
-        "node": ">= 10.14.2"
-      }
-    },
-    "node_modules/jest-validate/node_modules/@types/istanbul-reports": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz",
-      "integrity": "sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==",
-      "dev": true,
-      "dependencies": {
-        "@types/istanbul-lib-report": "*"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/jest-validate/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"
+    "node_modules/typescript": {
+      "version": "4.9.5",
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">=4.2.0"
       }
     },
-    "node_modules/jest-validate/node_modules/chalk": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
-      "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
-      "dev": true,
+    "node_modules/unbox-primitive": {
+      "version": "1.0.2",
+      "license": "MIT",
       "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
+        "call-bind": "^1.0.2",
+        "has-bigints": "^1.0.2",
+        "has-symbols": "^1.0.3",
+        "which-boxed-primitive": "^1.0.2"
       },
-      "engines": {
-        "node": ">=10"
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/jest-validate/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,
+    "node_modules/uncontrollable": {
+      "version": "7.2.1",
+      "license": "MIT",
       "dependencies": {
-        "color-name": "~1.1.4"
+        "@babel/runtime": "^7.6.3",
+        "@types/react": ">=16.9.11",
+        "invariant": "^2.2.4",
+        "react-lifecycles-compat": "^3.0.4"
       },
-      "engines": {
-        "node": ">=7.0.0"
+      "peerDependencies": {
+        "react": ">=15.0.0"
       }
     },
-    "node_modules/jest-validate/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/undici-types": {
+      "version": "6.13.0",
+      "license": "MIT"
     },
-    "node_modules/jest-validate/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,
+    "node_modules/unicode-canonical-property-names-ecmascript": {
+      "version": "2.0.0",
+      "license": "MIT",
       "engines": {
-        "node": ">=8"
+        "node": ">=4"
       }
     },
-    "node_modules/jest-validate/node_modules/pretty-format": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-26.6.2.tgz",
-      "integrity": "sha512-7AeGuCYNGmycyQbCqd/3PWH4eOoX/OiCa0uphp57NVTeAGdJGaAliecxwBDHYQCIvrW7aDBZCYeNTP/WX69mkg==",
-      "dev": true,
+    "node_modules/unicode-emoji-utils": {
+      "version": "1.2.0",
+      "license": "MIT",
       "dependencies": {
-        "@jest/types": "^26.6.2",
-        "ansi-regex": "^5.0.0",
-        "ansi-styles": "^4.0.0",
-        "react-is": "^17.0.1"
-      },
-      "engines": {
-        "node": ">= 10"
+        "emoji-regex": "10.3.0"
       }
     },
-    "node_modules/jest-validate/node_modules/react-is": {
-      "version": "17.0.2",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
-      "dev": true
-    },
-    "node_modules/jest-validate/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,
+    "node_modules/unicode-match-property-ecmascript": {
+      "version": "2.0.0",
+      "license": "MIT",
       "dependencies": {
-        "has-flag": "^4.0.0"
+        "unicode-canonical-property-names-ecmascript": "^2.0.0",
+        "unicode-property-aliases-ecmascript": "^2.0.0"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">=4"
       }
     },
-    "node_modules/jest-watcher": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/jest-watcher/-/jest-watcher-26.6.2.tgz",
-      "integrity": "sha512-WKJob0P/Em2csiVthsI68p6aGKTIcsfjH9Gsx1f0A3Italz43e3ho0geSAVsmj09RWOELP1AZ/DXyJgOgDKxXQ==",
-      "dev": true,
-      "dependencies": {
-        "@jest/test-result": "^26.6.2",
-        "@jest/types": "^26.6.2",
-        "@types/node": "*",
-        "ansi-escapes": "^4.2.1",
-        "chalk": "^4.0.0",
-        "jest-util": "^26.6.2",
-        "string-length": "^4.0.1"
-      },
+    "node_modules/unicode-match-property-value-ecmascript": {
+      "version": "2.1.0",
+      "license": "MIT",
       "engines": {
-        "node": ">= 10.14.2"
+        "node": ">=4"
       }
     },
-    "node_modules/jest-watcher/node_modules/@jest/types": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
-      "integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
-      "dev": true,
-      "dependencies": {
-        "@types/istanbul-lib-coverage": "^2.0.0",
-        "@types/istanbul-reports": "^3.0.0",
-        "@types/node": "*",
-        "@types/yargs": "^15.0.0",
-        "chalk": "^4.0.0"
-      },
+    "node_modules/unicode-property-aliases-ecmascript": {
+      "version": "2.1.0",
+      "license": "MIT",
       "engines": {
-        "node": ">= 10.14.2"
-      }
-    },
-    "node_modules/jest-watcher/node_modules/@types/istanbul-reports": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz",
-      "integrity": "sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==",
-      "dev": true,
-      "dependencies": {
-        "@types/istanbul-lib-report": "*"
+        "node": ">=4"
       }
     },
-    "node_modules/jest-watcher/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,
+    "node_modules/universal-cookie": {
+      "version": "4.0.4",
+      "license": "MIT",
       "dependencies": {
-        "color-convert": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=8"
+        "@types/cookie": "^0.3.3",
+        "cookie": "^0.4.0"
       }
     },
-    "node_modules/jest-watcher/node_modules/chalk": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
-      "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
-      "dev": true,
-      "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
-      },
+    "node_modules/universal-cookie/node_modules/cookie": {
+      "version": "0.4.2",
+      "license": "MIT",
       "engines": {
-        "node": ">=10"
+        "node": ">= 0.6"
       }
     },
-    "node_modules/jest-watcher/node_modules/color-convert": {
+    "node_modules/universalify": {
       "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"
-      },
+      "license": "MIT",
       "engines": {
-        "node": ">=7.0.0"
+        "node": ">= 10.0.0"
       }
     },
-    "node_modules/jest-watcher/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/jest-watcher/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,
+    "node_modules/unpipe": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
+      "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
       "engines": {
-        "node": ">=8"
+        "node": ">= 0.8"
       }
     },
-    "node_modules/jest-watcher/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,
+    "node_modules/update-browserslist-db": {
+      "version": "1.1.0",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
       "dependencies": {
-        "has-flag": "^4.0.0"
+        "escalade": "^3.1.2",
+        "picocolors": "^1.0.1"
       },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/jest-worker": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-26.6.2.tgz",
-      "integrity": "sha512-KWYVV1c4i+jbMpaBC+U++4Va0cp8OisU185o73T1vo99hqi7w8tSJfUXYswwqqrjzwxa6KpRK54WhPvwf5w6PQ==",
-      "dev": true,
-      "dependencies": {
-        "@types/node": "*",
-        "merge-stream": "^2.0.0",
-        "supports-color": "^7.0.0"
+      "bin": {
+        "update-browserslist-db": "cli.js"
       },
-      "engines": {
-        "node": ">= 10.13.0"
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
       }
     },
-    "node_modules/jest-worker/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/uri-js": {
+      "version": "4.4.1",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "punycode": "^2.1.0"
       }
     },
-    "node_modules/jest-worker/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,
+    "node_modules/url-loader": {
+      "version": "4.1.1",
+      "license": "MIT",
       "dependencies": {
-        "has-flag": "^4.0.0"
+        "loader-utils": "^2.0.0",
+        "mime-types": "^2.1.27",
+        "schema-utils": "^3.0.0"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "file-loader": "*",
+        "webpack": "^4.0.0 || ^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "file-loader": {
+          "optional": true
+        }
       }
     },
-    "node_modules/jest/node_modules/@jest/console": {
-      "version": "24.9.0",
-      "resolved": "https://registry.npmjs.org/@jest/console/-/console-24.9.0.tgz",
-      "integrity": "sha512-Zuj6b8TnKXi3q4ymac8EQfc3ea/uhLeCGThFqXeC8H9/raaH8ARPUTdId+XyGd03Z4In0/VjD2OYFcBF09fNLQ==",
-      "dev": true,
+    "node_modules/url-loader/node_modules/schema-utils": {
+      "version": "3.3.0",
+      "license": "MIT",
       "dependencies": {
-        "@jest/source-map": "^24.9.0",
-        "chalk": "^2.0.1",
-        "slash": "^2.0.0"
+        "@types/json-schema": "^7.0.8",
+        "ajv": "^6.12.5",
+        "ajv-keywords": "^3.5.2"
       },
       "engines": {
-        "node": ">= 6"
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
       }
     },
-    "node_modules/jest/node_modules/@jest/core": {
-      "version": "24.9.0",
-      "resolved": "https://registry.npmjs.org/@jest/core/-/core-24.9.0.tgz",
-      "integrity": "sha512-Fogg3s4wlAr1VX7q+rhV9RVnUv5tD7VuWfYy1+whMiWUrvl7U3QJSJyWcDio9Lq2prqYsZaeTv2Rz24pWGkJ2A==",
-      "dev": true,
+    "node_modules/url-parse": {
+      "version": "1.5.10",
+      "license": "MIT",
       "dependencies": {
-        "@jest/console": "^24.7.1",
-        "@jest/reporters": "^24.9.0",
-        "@jest/test-result": "^24.9.0",
-        "@jest/transform": "^24.9.0",
-        "@jest/types": "^24.9.0",
-        "ansi-escapes": "^3.0.0",
-        "chalk": "^2.0.1",
-        "exit": "^0.1.2",
-        "graceful-fs": "^4.1.15",
-        "jest-changed-files": "^24.9.0",
-        "jest-config": "^24.9.0",
-        "jest-haste-map": "^24.9.0",
-        "jest-message-util": "^24.9.0",
-        "jest-regex-util": "^24.3.0",
-        "jest-resolve": "^24.9.0",
-        "jest-resolve-dependencies": "^24.9.0",
-        "jest-runner": "^24.9.0",
-        "jest-runtime": "^24.9.0",
-        "jest-snapshot": "^24.9.0",
-        "jest-util": "^24.9.0",
-        "jest-validate": "^24.9.0",
-        "jest-watcher": "^24.9.0",
-        "micromatch": "^3.1.10",
-        "p-each-series": "^1.0.0",
-        "realpath-native": "^1.1.0",
-        "rimraf": "^2.5.4",
-        "slash": "^2.0.0",
-        "strip-ansi": "^5.0.0"
-      },
-      "engines": {
-        "node": ">= 6"
+        "querystringify": "^2.1.1",
+        "requires-port": "^1.0.0"
       }
     },
-    "node_modules/jest/node_modules/@jest/environment": {
-      "version": "24.9.0",
-      "resolved": "https://registry.npmjs.org/@jest/environment/-/environment-24.9.0.tgz",
-      "integrity": "sha512-5A1QluTPhvdIPFYnO3sZC3smkNeXPVELz7ikPbhUj0bQjB07EoE9qtLrem14ZUYWdVayYbsjVwIiL4WBIMV4aQ==",
-      "dev": true,
+    "node_modules/use-callback-ref": {
+      "version": "1.3.2",
+      "license": "MIT",
       "dependencies": {
-        "@jest/fake-timers": "^24.9.0",
-        "@jest/transform": "^24.9.0",
-        "@jest/types": "^24.9.0",
-        "jest-mock": "^24.9.0"
+        "tslib": "^2.0.0"
       },
       "engines": {
-        "node": ">= 6"
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
       }
     },
-    "node_modules/jest/node_modules/@jest/fake-timers": {
-      "version": "24.9.0",
-      "resolved": "https://registry.npmjs.org/@jest/fake-timers/-/fake-timers-24.9.0.tgz",
-      "integrity": "sha512-eWQcNa2YSwzXWIMC5KufBh3oWRIijrQFROsIqt6v/NS9Io/gknw1jsAC9c+ih/RQX4A3O7SeWAhQeN0goKhT9A==",
-      "dev": true,
-      "dependencies": {
-        "@jest/types": "^24.9.0",
-        "jest-message-util": "^24.9.0",
-        "jest-mock": "^24.9.0"
-      },
-      "engines": {
-        "node": ">= 6"
+    "node_modules/use-composed-ref": {
+      "version": "1.3.0",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
-    "node_modules/jest/node_modules/@jest/reporters": {
-      "version": "24.9.0",
-      "resolved": "https://registry.npmjs.org/@jest/reporters/-/reporters-24.9.0.tgz",
-      "integrity": "sha512-mu4X0yjaHrffOsWmVLzitKmmmWSQ3GGuefgNscUSWNiUNcEOSEQk9k3pERKEQVBb0Cnn88+UESIsZEMH3o88Gw==",
-      "dev": true,
-      "dependencies": {
-        "@jest/environment": "^24.9.0",
-        "@jest/test-result": "^24.9.0",
-        "@jest/transform": "^24.9.0",
-        "@jest/types": "^24.9.0",
-        "chalk": "^2.0.1",
-        "exit": "^0.1.2",
-        "glob": "^7.1.2",
-        "istanbul-lib-coverage": "^2.0.2",
-        "istanbul-lib-instrument": "^3.0.1",
-        "istanbul-lib-report": "^2.0.4",
-        "istanbul-lib-source-maps": "^3.0.1",
-        "istanbul-reports": "^2.2.6",
-        "jest-haste-map": "^24.9.0",
-        "jest-resolve": "^24.9.0",
-        "jest-runtime": "^24.9.0",
-        "jest-util": "^24.9.0",
-        "jest-worker": "^24.6.0",
-        "node-notifier": "^5.4.2",
-        "slash": "^2.0.0",
-        "source-map": "^0.6.0",
-        "string-length": "^2.0.0"
+    "node_modules/use-isomorphic-layout-effect": {
+      "version": "1.1.2",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
       },
-      "engines": {
-        "node": ">= 6"
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
       }
     },
-    "node_modules/jest/node_modules/@jest/source-map": {
-      "version": "24.9.0",
-      "resolved": "https://registry.npmjs.org/@jest/source-map/-/source-map-24.9.0.tgz",
-      "integrity": "sha512-/Xw7xGlsZb4MJzNDgB7PW5crou5JqWiBQaz6xyPd3ArOg2nfn/PunV8+olXbbEZzNl591o5rWKE9BRDaFAuIBg==",
-      "dev": true,
+    "node_modules/use-latest": {
+      "version": "1.2.1",
+      "license": "MIT",
       "dependencies": {
-        "callsites": "^3.0.0",
-        "graceful-fs": "^4.1.15",
-        "source-map": "^0.6.0"
+        "use-isomorphic-layout-effect": "^1.1.1"
       },
-      "engines": {
-        "node": ">= 6"
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
       }
     },
-    "node_modules/jest/node_modules/@jest/test-result": {
-      "version": "24.9.0",
-      "resolved": "https://registry.npmjs.org/@jest/test-result/-/test-result-24.9.0.tgz",
-      "integrity": "sha512-XEFrHbBonBJ8dGp2JmF8kP/nQI/ImPpygKHwQ/SY+es59Z3L5PI4Qb9TQQMAEeYsThG1xF0k6tmG0tIKATNiiA==",
-      "dev": true,
+    "node_modules/use-sidecar": {
+      "version": "1.1.2",
+      "license": "MIT",
       "dependencies": {
-        "@jest/console": "^24.9.0",
-        "@jest/types": "^24.9.0",
-        "@types/istanbul-lib-coverage": "^2.0.0"
+        "detect-node-es": "^1.1.0",
+        "tslib": "^2.0.0"
       },
       "engines": {
-        "node": ">= 6"
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.9.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
       }
     },
-    "node_modules/jest/node_modules/@jest/test-sequencer": {
-      "version": "24.9.0",
-      "resolved": "https://registry.npmjs.org/@jest/test-sequencer/-/test-sequencer-24.9.0.tgz",
-      "integrity": "sha512-6qqsU4o0kW1dvA95qfNog8v8gkRN9ph6Lz7r96IvZpHdNipP2cBcb07J1Z45mz/VIS01OHJ3pY8T5fUY38tg4A==",
-      "dev": true,
-      "dependencies": {
-        "@jest/test-result": "^24.9.0",
-        "jest-haste-map": "^24.9.0",
-        "jest-runner": "^24.9.0",
-        "jest-runtime": "^24.9.0"
-      },
-      "engines": {
-        "node": ">= 6"
+    "node_modules/use-sync-external-store": {
+      "version": "1.2.2",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
-    "node_modules/jest/node_modules/@jest/transform": {
-      "version": "24.9.0",
-      "resolved": "https://registry.npmjs.org/@jest/transform/-/transform-24.9.0.tgz",
-      "integrity": "sha512-TcQUmyNRxV94S0QpMOnZl0++6RMiqpbH/ZMccFB/amku6Uwvyb1cjYX7xkp5nGNkbX4QPH/FcB6q1HBTHynLmQ==",
-      "dev": true,
-      "dependencies": {
-        "@babel/core": "^7.1.0",
-        "@jest/types": "^24.9.0",
-        "babel-plugin-istanbul": "^5.1.0",
-        "chalk": "^2.0.1",
-        "convert-source-map": "^1.4.0",
-        "fast-json-stable-stringify": "^2.0.0",
-        "graceful-fs": "^4.1.15",
-        "jest-haste-map": "^24.9.0",
-        "jest-regex-util": "^24.9.0",
-        "jest-util": "^24.9.0",
-        "micromatch": "^3.1.10",
-        "pirates": "^4.0.1",
-        "realpath-native": "^1.1.0",
-        "slash": "^2.0.0",
-        "source-map": "^0.6.1",
-        "write-file-atomic": "2.4.1"
-      },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "license": "MIT"
+    },
+    "node_modules/utila": {
+      "version": "0.4.0",
+      "license": "MIT"
+    },
+    "node_modules/utils-merge": {
+      "version": "1.0.1",
+      "license": "MIT",
       "engines": {
-        "node": ">= 6"
+        "node": ">= 0.4.0"
       }
     },
-    "node_modules/jest/node_modules/@jest/types": {
-      "version": "24.9.0",
-      "resolved": "https://registry.npmjs.org/@jest/types/-/types-24.9.0.tgz",
-      "integrity": "sha512-XKK7ze1apu5JWQ5eZjHITP66AX+QsLlbaJRBGYr8pNzwcAE2JVkwnf0yqjHTsDRcjR0mujy/NmZMXw5kl+kGBw==",
-      "dev": true,
+    "node_modules/uuid": {
+      "version": "3.4.0",
+      "license": "MIT",
+      "bin": {
+        "uuid": "bin/uuid"
+      }
+    },
+    "node_modules/v8-to-istanbul": {
+      "version": "9.3.0",
+      "license": "ISC",
       "dependencies": {
-        "@types/istanbul-lib-coverage": "^2.0.0",
-        "@types/istanbul-reports": "^1.1.1",
-        "@types/yargs": "^13.0.0"
+        "@jridgewell/trace-mapping": "^0.3.12",
+        "@types/istanbul-lib-coverage": "^2.0.1",
+        "convert-source-map": "^2.0.0"
       },
       "engines": {
-        "node": ">= 6"
+        "node": ">=10.12.0"
       }
     },
-    "node_modules/jest/node_modules/@types/yargs": {
-      "version": "13.0.9",
-      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.9.tgz",
-      "integrity": "sha512-xrvhZ4DZewMDhoH1utLtOAwYQy60eYFoXeje30TzM3VOvQlBwQaEpKFq5m34k1wOw2AKIi2pwtiAjdmhvlBUzg==",
+    "node_modules/validate-npm-package-license": {
+      "version": "3.0.4",
       "dev": true,
+      "license": "Apache-2.0",
       "dependencies": {
-        "@types/yargs-parser": "*"
+        "spdx-correct": "^3.0.0",
+        "spdx-expression-parse": "^3.0.0"
       }
     },
-    "node_modules/jest/node_modules/acorn": {
-      "version": "5.7.4",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-5.7.4.tgz",
-      "integrity": "sha512-1D++VG7BhrtvQpNbBzovKNc1FLGGEE/oGe7b9xJm/RFHMBeUaUGpluV9RLjZa47YFdPcDAenEYuq9pQPcMdLJg==",
-      "dev": true,
-      "bin": {
-        "acorn": "bin/acorn"
-      },
-      "engines": {
-        "node": ">=0.4.0"
-      }
+    "node_modules/value-equal": {
+      "version": "1.0.1",
+      "license": "MIT"
     },
-    "node_modules/jest/node_modules/ansi-escapes": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-3.2.0.tgz",
-      "integrity": "sha512-cBhpre4ma+U0T1oM5fXg7Dy1Jw7zzwv7lt/GoCpr+hDQJoYnKVPLL4dCvSEFMmQurOQvSrwT7SL/DAlhBI97RQ==",
-      "dev": true,
+    "node_modules/vary": {
+      "version": "1.1.2",
+      "license": "MIT",
       "engines": {
-        "node": ">=4"
+        "node": ">= 0.8"
       }
     },
-    "node_modules/jest/node_modules/ansi-regex": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
-      "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
-      }
+    "node_modules/w3c-keyname": {
+      "version": "2.2.8",
+      "license": "MIT"
     },
-    "node_modules/jest/node_modules/babel-jest": {
-      "version": "24.9.0",
-      "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-24.9.0.tgz",
-      "integrity": "sha512-ntuddfyiN+EhMw58PTNL1ph4C9rECiQXjI4nMMBKBaNjXvqLdkXpPRcMSr4iyBrJg/+wz9brFUD6RhOAT6r4Iw==",
-      "dev": true,
+    "node_modules/w3c-xmlserializer": {
+      "version": "4.0.0",
+      "license": "MIT",
       "dependencies": {
-        "@jest/transform": "^24.9.0",
-        "@jest/types": "^24.9.0",
-        "@types/babel__core": "^7.1.0",
-        "babel-plugin-istanbul": "^5.1.0",
-        "babel-preset-jest": "^24.9.0",
-        "chalk": "^2.4.2",
-        "slash": "^2.0.0"
+        "xml-name-validator": "^4.0.0"
       },
       "engines": {
-        "node": ">= 6"
+        "node": ">=14"
       }
     },
-    "node_modules/jest/node_modules/babel-plugin-istanbul": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-5.2.0.tgz",
-      "integrity": "sha512-5LphC0USA8t4i1zCtjbbNb6jJj/9+X6P37Qfirc/70EQ34xKlMW+a1RHGwxGI+SwWpNwZ27HqvzAobeqaXwiZw==",
-      "dev": true,
+    "node_modules/walker": {
+      "version": "1.0.8",
+      "license": "Apache-2.0",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.0.0",
-        "find-up": "^3.0.0",
-        "istanbul-lib-instrument": "^3.3.0",
-        "test-exclude": "^5.2.3"
-      },
-      "engines": {
-        "node": ">=6"
+        "makeerror": "1.0.12"
       }
     },
-    "node_modules/jest/node_modules/babel-plugin-jest-hoist": {
-      "version": "24.9.0",
-      "resolved": "https://registry.npmjs.org/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-24.9.0.tgz",
-      "integrity": "sha512-2EMA2P8Vp7lG0RAzr4HXqtYwacfMErOuv1U3wrvxHX6rD1sV6xS3WXG3r8TRQ2r6w8OhvSdWt+z41hQNwNm3Xw==",
-      "dev": true,
+    "node_modules/warning": {
+      "version": "4.0.3",
+      "license": "MIT",
       "dependencies": {
-        "@types/babel__traverse": "^7.0.6"
-      },
-      "engines": {
-        "node": ">= 6"
+        "loose-envify": "^1.0.0"
       }
     },
-    "node_modules/jest/node_modules/babel-preset-jest": {
-      "version": "24.9.0",
-      "resolved": "https://registry.npmjs.org/babel-preset-jest/-/babel-preset-jest-24.9.0.tgz",
-      "integrity": "sha512-izTUuhE4TMfTRPF92fFwD2QfdXaZW08qvWTFCI51V8rW5x00UuPgc3ajRoWofXOuxjfcOM5zzSYsQS3H8KGCAg==",
-      "dev": true,
+    "node_modules/watchpack": {
+      "version": "2.4.1",
+      "license": "MIT",
       "dependencies": {
-        "@babel/plugin-syntax-object-rest-spread": "^7.0.0",
-        "babel-plugin-jest-hoist": "^24.9.0"
+        "glob-to-regexp": "^0.4.1",
+        "graceful-fs": "^4.1.2"
       },
       "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/jest/node_modules/camelcase": {
-      "version": "5.3.1",
-      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
-      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/jest/node_modules/cliui": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz",
-      "integrity": "sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==",
-      "dev": true,
-      "dependencies": {
-        "string-width": "^3.1.0",
-        "strip-ansi": "^5.2.0",
-        "wrap-ansi": "^5.1.0"
+        "node": ">=10.13.0"
       }
     },
-    "node_modules/jest/node_modules/cssom": {
-      "version": "0.3.8",
-      "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.3.8.tgz",
-      "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==",
-      "dev": true
-    },
-    "node_modules/jest/node_modules/cssstyle": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-1.4.0.tgz",
-      "integrity": "sha512-GBrLZYZ4X4x6/QEoBnIrqb8B/f5l4+8me2dkom/j1Gtbxy0kBv6OGzKuAsGM75bkGwGAFkt56Iwg28S3XTZgSA==",
-      "dev": true,
+    "node_modules/wbuf": {
+      "version": "1.7.3",
+      "license": "MIT",
       "dependencies": {
-        "cssom": "0.3.x"
+        "minimalistic-assert": "^1.0.0"
       }
     },
-    "node_modules/jest/node_modules/debug": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
-      "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
-      "dev": true,
+    "node_modules/wcwidth": {
+      "version": "1.0.1",
+      "license": "MIT",
       "dependencies": {
-        "ms": "^2.1.1"
-      }
-    },
-    "node_modules/jest/node_modules/detect-newline": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/detect-newline/-/detect-newline-2.1.0.tgz",
-      "integrity": "sha1-9B8cEL5LAOh7XxPaaAdZ8sW/0+I=",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
+        "defaults": "^1.0.3"
       }
     },
-    "node_modules/jest/node_modules/diff-sequences": {
-      "version": "24.9.0",
-      "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-24.9.0.tgz",
-      "integrity": "sha512-Dj6Wk3tWyTE+Fo1rW8v0Xhwk80um6yFYKbuAxc9c3EZxIHFDYwbi34Uk42u1CdnIiVorvt4RmlSDjIPyzGC2ew==",
-      "dev": true,
+    "node_modules/webidl-conversions": {
+      "version": "7.0.0",
+      "license": "BSD-2-Clause",
       "engines": {
-        "node": ">= 6"
+        "node": ">=12"
       }
     },
-    "node_modules/jest/node_modules/emoji-regex": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz",
-      "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==",
-      "dev": true
-    },
-    "node_modules/jest/node_modules/expect": {
-      "version": "24.9.0",
-      "resolved": "https://registry.npmjs.org/expect/-/expect-24.9.0.tgz",
-      "integrity": "sha512-wvVAx8XIol3Z5m9zvZXiyZOQ+sRJqNTIm6sGjdWlaZIeupQGO3WbYI+15D/AmEwZywL6wtJkbAbJtzkOfBuR0Q==",
-      "dev": true,
-      "dependencies": {
-        "@jest/types": "^24.9.0",
-        "ansi-styles": "^3.2.0",
-        "jest-get-type": "^24.9.0",
-        "jest-matcher-utils": "^24.9.0",
-        "jest-message-util": "^24.9.0",
-        "jest-regex-util": "^24.9.0"
+    "node_modules/webpack": {
+      "version": "5.93.0",
+      "license": "MIT",
+      "dependencies": {
+        "@types/eslint-scope": "^3.7.3",
+        "@types/estree": "^1.0.5",
+        "@webassemblyjs/ast": "^1.12.1",
+        "@webassemblyjs/wasm-edit": "^1.12.1",
+        "@webassemblyjs/wasm-parser": "^1.12.1",
+        "acorn": "^8.7.1",
+        "acorn-import-attributes": "^1.9.5",
+        "browserslist": "^4.21.10",
+        "chrome-trace-event": "^1.0.2",
+        "enhanced-resolve": "^5.17.0",
+        "es-module-lexer": "^1.2.1",
+        "eslint-scope": "5.1.1",
+        "events": "^3.2.0",
+        "glob-to-regexp": "^0.4.1",
+        "graceful-fs": "^4.2.11",
+        "json-parse-even-better-errors": "^2.3.1",
+        "loader-runner": "^4.2.0",
+        "mime-types": "^2.1.27",
+        "neo-async": "^2.6.2",
+        "schema-utils": "^3.2.0",
+        "tapable": "^2.1.1",
+        "terser-webpack-plugin": "^5.3.10",
+        "watchpack": "^2.4.1",
+        "webpack-sources": "^3.2.3"
       },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/jest/node_modules/find-up": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
-      "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
-      "dev": true,
-      "dependencies": {
-        "locate-path": "^3.0.0"
+      "bin": {
+        "webpack": "bin/webpack.js"
       },
       "engines": {
-        "node": ">=6"
+        "node": ">=10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependenciesMeta": {
+        "webpack-cli": {
+          "optional": true
+        }
       }
     },
-    "node_modules/jest/node_modules/import-local": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/import-local/-/import-local-2.0.0.tgz",
-      "integrity": "sha512-b6s04m3O+s3CGSbqDIyP4R6aAwAeYlVq9+WUWep6iHa8ETRf9yei1U48C5MmfJmV9AiLYYBKPMq/W+/WRpQmCQ==",
-      "dev": true,
+    "node_modules/webpack-bundle-analyzer": {
+      "version": "4.10.2",
+      "license": "MIT",
       "dependencies": {
-        "pkg-dir": "^3.0.0",
-        "resolve-cwd": "^2.0.0"
+        "@discoveryjs/json-ext": "0.5.7",
+        "acorn": "^8.0.4",
+        "acorn-walk": "^8.0.0",
+        "commander": "^7.2.0",
+        "debounce": "^1.2.1",
+        "escape-string-regexp": "^4.0.0",
+        "gzip-size": "^6.0.0",
+        "html-escaper": "^2.0.2",
+        "opener": "^1.5.2",
+        "picocolors": "^1.0.0",
+        "sirv": "^2.0.3",
+        "ws": "^7.3.1"
       },
       "bin": {
-        "import-local-fixture": "fixtures/cli.js"
+        "webpack-bundle-analyzer": "lib/bin/analyzer.js"
       },
       "engines": {
-        "node": ">=6"
+        "node": ">= 10.13.0"
       }
     },
-    "node_modules/jest/node_modules/is-fullwidth-code-point": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
-      "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
-      "dev": true,
+    "node_modules/webpack-bundle-analyzer/node_modules/commander": {
+      "version": "7.2.0",
+      "license": "MIT",
       "engines": {
-        "node": ">=4"
+        "node": ">= 10"
       }
     },
-    "node_modules/jest/node_modules/is-wsl": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-1.1.0.tgz",
-      "integrity": "sha1-HxbkqiKwTRM2tmGIpmrzxgDDpm0=",
-      "dev": true,
+    "node_modules/webpack-bundle-analyzer/node_modules/ws": {
+      "version": "7.5.10",
+      "license": "MIT",
       "engines": {
-        "node": ">=4"
+        "node": ">=8.3.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": "^5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
       }
     },
-    "node_modules/jest/node_modules/istanbul-lib-coverage": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.5.tgz",
-      "integrity": "sha512-8aXznuEPCJvGnMSRft4udDRDtb1V3pkQkMMI5LI+6HuQz5oQ4J2UFn1H82raA3qJtyOLkkwVqICBQkjnGtn5mA==",
-      "dev": true,
+    "node_modules/webpack-cli": {
+      "version": "5.1.4",
+      "license": "MIT",
+      "dependencies": {
+        "@discoveryjs/json-ext": "^0.5.0",
+        "@webpack-cli/configtest": "^2.1.1",
+        "@webpack-cli/info": "^2.0.2",
+        "@webpack-cli/serve": "^2.0.5",
+        "colorette": "^2.0.14",
+        "commander": "^10.0.1",
+        "cross-spawn": "^7.0.3",
+        "envinfo": "^7.7.3",
+        "fastest-levenshtein": "^1.0.12",
+        "import-local": "^3.0.2",
+        "interpret": "^3.1.1",
+        "rechoir": "^0.8.0",
+        "webpack-merge": "^5.7.3"
+      },
+      "bin": {
+        "webpack-cli": "bin/cli.js"
+      },
       "engines": {
-        "node": ">=6"
+        "node": ">=14.15.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "5.x.x"
+      },
+      "peerDependenciesMeta": {
+        "@webpack-cli/generators": {
+          "optional": true
+        },
+        "webpack-bundle-analyzer": {
+          "optional": true
+        },
+        "webpack-dev-server": {
+          "optional": true
+        }
       }
     },
-    "node_modules/jest/node_modules/istanbul-lib-instrument": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/istanbul-lib-instrument/-/istanbul-lib-instrument-3.3.0.tgz",
-      "integrity": "sha512-5nnIN4vo5xQZHdXno/YDXJ0G+I3dAm4XgzfSVTPLQpj/zAV2dV6Juy0yaf10/zrJOJeHoN3fraFe+XRq2bFVZA==",
-      "dev": true,
-      "dependencies": {
-        "@babel/generator": "^7.4.0",
-        "@babel/parser": "^7.4.3",
-        "@babel/template": "^7.4.0",
-        "@babel/traverse": "^7.4.3",
-        "@babel/types": "^7.4.0",
-        "istanbul-lib-coverage": "^2.0.5",
-        "semver": "^6.0.0"
-      },
+    "node_modules/webpack-cli/node_modules/commander": {
+      "version": "10.0.1",
+      "license": "MIT",
       "engines": {
-        "node": ">=6"
+        "node": ">=14"
       }
     },
-    "node_modules/jest/node_modules/istanbul-lib-report": {
-      "version": "2.0.8",
-      "resolved": "https://registry.npmjs.org/istanbul-lib-report/-/istanbul-lib-report-2.0.8.tgz",
-      "integrity": "sha512-fHBeG573EIihhAblwgxrSenp0Dby6tJMFR/HvlerBsrCTD5bkUuoNtn3gVh29ZCS824cGGBPn7Sg7cNk+2xUsQ==",
-      "dev": true,
-      "dependencies": {
-        "istanbul-lib-coverage": "^2.0.5",
-        "make-dir": "^2.1.0",
-        "supports-color": "^6.1.0"
-      },
+    "node_modules/webpack-cli/node_modules/interpret": {
+      "version": "3.1.1",
+      "license": "MIT",
       "engines": {
-        "node": ">=6"
+        "node": ">=10.13.0"
       }
     },
-    "node_modules/jest/node_modules/istanbul-lib-source-maps": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/istanbul-lib-source-maps/-/istanbul-lib-source-maps-3.0.6.tgz",
-      "integrity": "sha512-R47KzMtDJH6X4/YW9XTx+jrLnZnscW4VpNN+1PViSYTejLVPWv7oov+Duf8YQSPyVRUvueQqz1TcsC6mooZTXw==",
-      "dev": true,
+    "node_modules/webpack-dev-middleware": {
+      "version": "5.3.4",
+      "license": "MIT",
       "dependencies": {
-        "debug": "^4.1.1",
-        "istanbul-lib-coverage": "^2.0.5",
-        "make-dir": "^2.1.0",
-        "rimraf": "^2.6.3",
-        "source-map": "^0.6.1"
+        "colorette": "^2.0.10",
+        "memfs": "^3.4.3",
+        "mime-types": "^2.1.31",
+        "range-parser": "^1.2.1",
+        "schema-utils": "^4.0.0"
       },
       "engines": {
-        "node": ">=6"
+        "node": ">= 12.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^4.0.0 || ^5.0.0"
       }
     },
-    "node_modules/jest/node_modules/istanbul-reports": {
-      "version": "2.2.7",
-      "resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-2.2.7.tgz",
-      "integrity": "sha512-uu1F/L1o5Y6LzPVSVZXNOoD/KXpJue9aeLRd0sM9uMXfZvzomB0WxVamWb5ue8kA2vVWEmW7EG+A5n3f1kqHKg==",
-      "dev": true,
-      "dependencies": {
-        "html-escaper": "^2.0.0"
+    "node_modules/webpack-dev-server": {
+      "version": "4.15.2",
+      "license": "MIT",
+      "dependencies": {
+        "@types/bonjour": "^3.5.9",
+        "@types/connect-history-api-fallback": "^1.3.5",
+        "@types/express": "^4.17.13",
+        "@types/serve-index": "^1.9.1",
+        "@types/serve-static": "^1.13.10",
+        "@types/sockjs": "^0.3.33",
+        "@types/ws": "^8.5.5",
+        "ansi-html-community": "^0.0.8",
+        "bonjour-service": "^1.0.11",
+        "chokidar": "^3.5.3",
+        "colorette": "^2.0.10",
+        "compression": "^1.7.4",
+        "connect-history-api-fallback": "^2.0.0",
+        "default-gateway": "^6.0.3",
+        "express": "^4.17.3",
+        "graceful-fs": "^4.2.6",
+        "html-entities": "^2.3.2",
+        "http-proxy-middleware": "^2.0.3",
+        "ipaddr.js": "^2.0.1",
+        "launch-editor": "^2.6.0",
+        "open": "^8.0.9",
+        "p-retry": "^4.5.0",
+        "rimraf": "^3.0.2",
+        "schema-utils": "^4.0.0",
+        "selfsigned": "^2.1.1",
+        "serve-index": "^1.9.1",
+        "sockjs": "^0.3.24",
+        "spdy": "^4.0.2",
+        "webpack-dev-middleware": "^5.3.4",
+        "ws": "^8.13.0"
+      },
+      "bin": {
+        "webpack-dev-server": "bin/webpack-dev-server.js"
       },
       "engines": {
-        "node": ">=6"
+        "node": ">= 12.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^4.37.0 || ^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "webpack": {
+          "optional": true
+        },
+        "webpack-cli": {
+          "optional": true
+        }
       }
     },
-    "node_modules/jest/node_modules/jest-changed-files": {
-      "version": "24.9.0",
-      "resolved": "https://registry.npmjs.org/jest-changed-files/-/jest-changed-files-24.9.0.tgz",
-      "integrity": "sha512-6aTWpe2mHF0DhL28WjdkO8LyGjs3zItPET4bMSeXU6T3ub4FPMw+mcOcbdGXQOAfmLcxofD23/5Bl9Z4AkFwqg==",
-      "dev": true,
-      "dependencies": {
-        "@jest/types": "^24.9.0",
-        "execa": "^1.0.0",
-        "throat": "^4.0.0"
-      },
+    "node_modules/webpack-dev-server/node_modules/ipaddr.js": {
+      "version": "2.2.0",
+      "license": "MIT",
       "engines": {
-        "node": ">= 6"
+        "node": ">= 10"
       }
     },
-    "node_modules/jest/node_modules/jest-cli": {
-      "version": "24.9.0",
-      "resolved": "https://registry.npmjs.org/jest-cli/-/jest-cli-24.9.0.tgz",
-      "integrity": "sha512-+VLRKyitT3BWoMeSUIHRxV/2g8y9gw91Jh5z2UmXZzkZKpbC08CSehVxgHUwTpy+HwGcns/tqafQDJW7imYvGg==",
-      "dev": true,
+    "node_modules/webpack-dev-server/node_modules/rimraf": {
+      "version": "3.0.2",
+      "license": "ISC",
       "dependencies": {
-        "@jest/core": "^24.9.0",
-        "@jest/test-result": "^24.9.0",
-        "@jest/types": "^24.9.0",
-        "chalk": "^2.0.1",
-        "exit": "^0.1.2",
-        "import-local": "^2.0.0",
-        "is-ci": "^2.0.0",
-        "jest-config": "^24.9.0",
-        "jest-util": "^24.9.0",
-        "jest-validate": "^24.9.0",
-        "prompts": "^2.0.1",
-        "realpath-native": "^1.1.0",
-        "yargs": "^13.3.0"
+        "glob": "^7.1.3"
       },
       "bin": {
-        "jest": "bin/jest.js"
+        "rimraf": "bin.js"
       },
-      "engines": {
-        "node": ">= 6"
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/jest/node_modules/jest-config": {
-      "version": "24.9.0",
-      "resolved": "https://registry.npmjs.org/jest-config/-/jest-config-24.9.0.tgz",
-      "integrity": "sha512-RATtQJtVYQrp7fvWg6f5y3pEFj9I+H8sWw4aKxnDZ96mob5i5SD6ZEGWgMLXQ4LE8UurrjbdlLWdUeo+28QpfQ==",
-      "dev": true,
+    "node_modules/webpack-merge": {
+      "version": "5.10.0",
+      "license": "MIT",
       "dependencies": {
-        "@babel/core": "^7.1.0",
-        "@jest/test-sequencer": "^24.9.0",
-        "@jest/types": "^24.9.0",
-        "babel-jest": "^24.9.0",
-        "chalk": "^2.0.1",
-        "glob": "^7.1.1",
-        "jest-environment-jsdom": "^24.9.0",
-        "jest-environment-node": "^24.9.0",
-        "jest-get-type": "^24.9.0",
-        "jest-jasmine2": "^24.9.0",
-        "jest-regex-util": "^24.3.0",
-        "jest-resolve": "^24.9.0",
-        "jest-util": "^24.9.0",
-        "jest-validate": "^24.9.0",
-        "micromatch": "^3.1.10",
-        "pretty-format": "^24.9.0",
-        "realpath-native": "^1.1.0"
+        "clone-deep": "^4.0.1",
+        "flat": "^5.0.2",
+        "wildcard": "^2.0.0"
       },
       "engines": {
-        "node": ">= 6"
+        "node": ">=10.0.0"
       }
     },
-    "node_modules/jest/node_modules/jest-diff": {
-      "version": "24.9.0",
-      "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-24.9.0.tgz",
-      "integrity": "sha512-qMfrTs8AdJE2iqrTp0hzh7kTd2PQWrsFyj9tORoKmu32xjPjeE4NyjVRDz8ybYwqS2ik8N4hsIpiVTyFeo2lBQ==",
-      "dev": true,
+    "node_modules/webpack-remove-empty-scripts": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/webpack-remove-empty-scripts/-/webpack-remove-empty-scripts-1.0.4.tgz",
+      "integrity": "sha512-W/Vd94oNXMsQam+W9G+aAzGgFlX1aItcJpkG3byuHGDaxyK3H17oD/b5RcqS/ZHzStIKepksdLDznejDhDUs+Q==",
+      "license": "ISC",
       "dependencies": {
-        "chalk": "^2.0.1",
-        "diff-sequences": "^24.9.0",
-        "jest-get-type": "^24.9.0",
-        "pretty-format": "^24.9.0"
+        "ansis": "1.5.2"
       },
       "engines": {
-        "node": ">= 6"
+        "node": ">=12.14"
+      },
+      "funding": {
+        "type": "patreon",
+        "url": "https://patreon.com/biodiscus"
+      },
+      "peerDependencies": {
+        "webpack": ">=5.32.0"
       }
     },
-    "node_modules/jest/node_modules/jest-docblock": {
-      "version": "24.9.0",
-      "resolved": "https://registry.npmjs.org/jest-docblock/-/jest-docblock-24.9.0.tgz",
-      "integrity": "sha512-F1DjdpDMJMA1cN6He0FNYNZlo3yYmOtRUnktrT9Q37njYzC5WEaDdmbynIgy0L/IvXvvgsG8OsqhLPXTpfmZAA==",
-      "dev": true,
+    "node_modules/webpack-sources": {
+      "version": "1.4.3",
+      "license": "MIT",
       "dependencies": {
-        "detect-newline": "^2.1.0"
-      },
-      "engines": {
-        "node": ">= 6"
+        "source-list-map": "^2.0.0",
+        "source-map": "~0.6.1"
       }
     },
-    "node_modules/jest/node_modules/jest-each": {
-      "version": "24.9.0",
-      "resolved": "https://registry.npmjs.org/jest-each/-/jest-each-24.9.0.tgz",
-      "integrity": "sha512-ONi0R4BvW45cw8s2Lrx8YgbeXL1oCQ/wIDwmsM3CqM/nlblNCPmnC3IPQlMbRFZu3wKdQ2U8BqM6lh3LJ5Bsog==",
-      "dev": true,
-      "dependencies": {
-        "@jest/types": "^24.9.0",
-        "chalk": "^2.0.1",
-        "jest-get-type": "^24.9.0",
-        "jest-util": "^24.9.0",
-        "pretty-format": "^24.9.0"
-      },
+    "node_modules/webpack-sources/node_modules/source-map": {
+      "version": "0.6.1",
+      "license": "BSD-3-Clause",
       "engines": {
-        "node": ">= 6"
+        "node": ">=0.10.0"
       }
     },
-    "node_modules/jest/node_modules/jest-environment-jsdom": {
-      "version": "24.9.0",
-      "resolved": "https://registry.npmjs.org/jest-environment-jsdom/-/jest-environment-jsdom-24.9.0.tgz",
-      "integrity": "sha512-Zv9FV9NBRzLuALXjvRijO2351DRQeLYXtpD4xNvfoVFw21IOKNhZAEUKcbiEtjTkm2GsJ3boMVgkaR7rN8qetA==",
-      "dev": true,
+    "node_modules/webpack/node_modules/enhanced-resolve": {
+      "version": "5.17.1",
+      "license": "MIT",
       "dependencies": {
-        "@jest/environment": "^24.9.0",
-        "@jest/fake-timers": "^24.9.0",
-        "@jest/types": "^24.9.0",
-        "jest-mock": "^24.9.0",
-        "jest-util": "^24.9.0",
-        "jsdom": "^11.5.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/jest/node_modules/jest-environment-node": {
-      "version": "24.9.0",
-      "resolved": "https://registry.npmjs.org/jest-environment-node/-/jest-environment-node-24.9.0.tgz",
-      "integrity": "sha512-6d4V2f4nxzIzwendo27Tr0aFm+IXWa0XEUnaH6nU0FMaozxovt+sfRvh4J47wL1OvF83I3SSTu0XK+i4Bqe7uA==",
-      "dev": true,
-      "dependencies": {
-        "@jest/environment": "^24.9.0",
-        "@jest/fake-timers": "^24.9.0",
-        "@jest/types": "^24.9.0",
-        "jest-mock": "^24.9.0",
-        "jest-util": "^24.9.0"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/jest/node_modules/jest-get-type": {
-      "version": "24.9.0",
-      "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-24.9.0.tgz",
-      "integrity": "sha512-lUseMzAley4LhIcpSP9Jf+fTrQ4a1yHQwLNeeVa2cEmbCGeoZAtYPOIv8JaxLD/sUpKxetKGP+gsHl8f8TSj8Q==",
-      "dev": true,
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/jest/node_modules/jest-haste-map": {
-      "version": "24.9.0",
-      "resolved": "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-24.9.0.tgz",
-      "integrity": "sha512-kfVFmsuWui2Sj1Rp1AJ4D9HqJwE4uwTlS/vO+eRUaMmd54BFpli2XhMQnPC2k4cHFVbB2Q2C+jtI1AGLgEnCjQ==",
-      "dev": true,
-      "dependencies": {
-        "@jest/types": "^24.9.0",
-        "anymatch": "^2.0.0",
-        "fb-watchman": "^2.0.0",
-        "graceful-fs": "^4.1.15",
-        "invariant": "^2.2.4",
-        "jest-serializer": "^24.9.0",
-        "jest-util": "^24.9.0",
-        "jest-worker": "^24.9.0",
-        "micromatch": "^3.1.10",
-        "sane": "^4.0.3",
-        "walker": "^1.0.7"
-      },
-      "engines": {
-        "node": ">= 6"
-      },
-      "optionalDependencies": {
-        "fsevents": "^1.2.7"
-      }
-    },
-    "node_modules/jest/node_modules/jest-jasmine2": {
-      "version": "24.9.0",
-      "resolved": "https://registry.npmjs.org/jest-jasmine2/-/jest-jasmine2-24.9.0.tgz",
-      "integrity": "sha512-Cq7vkAgaYKp+PsX+2/JbTarrk0DmNhsEtqBXNwUHkdlbrTBLtMJINADf2mf5FkowNsq8evbPc07/qFO0AdKTzw==",
-      "dev": true,
-      "dependencies": {
-        "@babel/traverse": "^7.1.0",
-        "@jest/environment": "^24.9.0",
-        "@jest/test-result": "^24.9.0",
-        "@jest/types": "^24.9.0",
-        "chalk": "^2.0.1",
-        "co": "^4.6.0",
-        "expect": "^24.9.0",
-        "is-generator-fn": "^2.0.0",
-        "jest-each": "^24.9.0",
-        "jest-matcher-utils": "^24.9.0",
-        "jest-message-util": "^24.9.0",
-        "jest-runtime": "^24.9.0",
-        "jest-snapshot": "^24.9.0",
-        "jest-util": "^24.9.0",
-        "pretty-format": "^24.9.0",
-        "throat": "^4.0.0"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/jest/node_modules/jest-leak-detector": {
-      "version": "24.9.0",
-      "resolved": "https://registry.npmjs.org/jest-leak-detector/-/jest-leak-detector-24.9.0.tgz",
-      "integrity": "sha512-tYkFIDsiKTGwb2FG1w8hX9V0aUb2ot8zY/2nFg087dUageonw1zrLMP4W6zsRO59dPkTSKie+D4rhMuP9nRmrA==",
-      "dev": true,
-      "dependencies": {
-        "jest-get-type": "^24.9.0",
-        "pretty-format": "^24.9.0"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/jest/node_modules/jest-matcher-utils": {
-      "version": "24.9.0",
-      "resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-24.9.0.tgz",
-      "integrity": "sha512-OZz2IXsu6eaiMAwe67c1T+5tUAtQyQx27/EMEkbFAGiw52tB9em+uGbzpcgYVpA8wl0hlxKPZxrly4CXU/GjHA==",
-      "dev": true,
-      "dependencies": {
-        "chalk": "^2.0.1",
-        "jest-diff": "^24.9.0",
-        "jest-get-type": "^24.9.0",
-        "pretty-format": "^24.9.0"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/jest/node_modules/jest-message-util": {
-      "version": "24.9.0",
-      "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-24.9.0.tgz",
-      "integrity": "sha512-oCj8FiZ3U0hTP4aSui87P4L4jC37BtQwUMqk+zk/b11FR19BJDeZsZAvIHutWnmtw7r85UmR3CEWZ0HWU2mAlw==",
-      "dev": true,
-      "dependencies": {
-        "@babel/code-frame": "^7.0.0",
-        "@jest/test-result": "^24.9.0",
-        "@jest/types": "^24.9.0",
-        "@types/stack-utils": "^1.0.1",
-        "chalk": "^2.0.1",
-        "micromatch": "^3.1.10",
-        "slash": "^2.0.0",
-        "stack-utils": "^1.0.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/jest/node_modules/jest-mock": {
-      "version": "24.9.0",
-      "resolved": "https://registry.npmjs.org/jest-mock/-/jest-mock-24.9.0.tgz",
-      "integrity": "sha512-3BEYN5WbSq9wd+SyLDES7AHnjH9A/ROBwmz7l2y+ol+NtSFO8DYiEBzoO1CeFc9a8DYy10EO4dDFVv/wN3zl1w==",
-      "dev": true,
-      "dependencies": {
-        "@jest/types": "^24.9.0"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/jest/node_modules/jest-regex-util": {
-      "version": "24.9.0",
-      "resolved": "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-24.9.0.tgz",
-      "integrity": "sha512-05Cmb6CuxaA+Ys6fjr3PhvV3bGQmO+2p2La4hFbU+W5uOc479f7FdLXUWXw4pYMAhhSZIuKHwSXSu6CsSBAXQA==",
-      "dev": true,
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/jest/node_modules/jest-resolve": {
-      "version": "24.9.0",
-      "resolved": "https://registry.npmjs.org/jest-resolve/-/jest-resolve-24.9.0.tgz",
-      "integrity": "sha512-TaLeLVL1l08YFZAt3zaPtjiVvyy4oSA6CRe+0AFPPVX3Q/VI0giIWWoAvoS5L96vj9Dqxj4fB5p2qrHCmTU/MQ==",
-      "dev": true,
-      "dependencies": {
-        "@jest/types": "^24.9.0",
-        "browser-resolve": "^1.11.3",
-        "chalk": "^2.0.1",
-        "jest-pnp-resolver": "^1.2.1",
-        "realpath-native": "^1.1.0"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/jest/node_modules/jest-resolve-dependencies": {
-      "version": "24.9.0",
-      "resolved": "https://registry.npmjs.org/jest-resolve-dependencies/-/jest-resolve-dependencies-24.9.0.tgz",
-      "integrity": "sha512-Fm7b6AlWnYhT0BXy4hXpactHIqER7erNgIsIozDXWl5dVm+k8XdGVe1oTg1JyaFnOxarMEbax3wyRJqGP2Pq+g==",
-      "dev": true,
-      "dependencies": {
-        "@jest/types": "^24.9.0",
-        "jest-regex-util": "^24.3.0",
-        "jest-snapshot": "^24.9.0"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/jest/node_modules/jest-runner": {
-      "version": "24.9.0",
-      "resolved": "https://registry.npmjs.org/jest-runner/-/jest-runner-24.9.0.tgz",
-      "integrity": "sha512-KksJQyI3/0mhcfspnxxEOBueGrd5E4vV7ADQLT9ESaCzz02WnbdbKWIf5Mkaucoaj7obQckYPVX6JJhgUcoWWg==",
-      "dev": true,
-      "dependencies": {
-        "@jest/console": "^24.7.1",
-        "@jest/environment": "^24.9.0",
-        "@jest/test-result": "^24.9.0",
-        "@jest/types": "^24.9.0",
-        "chalk": "^2.4.2",
-        "exit": "^0.1.2",
-        "graceful-fs": "^4.1.15",
-        "jest-config": "^24.9.0",
-        "jest-docblock": "^24.3.0",
-        "jest-haste-map": "^24.9.0",
-        "jest-jasmine2": "^24.9.0",
-        "jest-leak-detector": "^24.9.0",
-        "jest-message-util": "^24.9.0",
-        "jest-resolve": "^24.9.0",
-        "jest-runtime": "^24.9.0",
-        "jest-util": "^24.9.0",
-        "jest-worker": "^24.6.0",
-        "source-map-support": "^0.5.6",
-        "throat": "^4.0.0"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/jest/node_modules/jest-runtime": {
-      "version": "24.9.0",
-      "resolved": "https://registry.npmjs.org/jest-runtime/-/jest-runtime-24.9.0.tgz",
-      "integrity": "sha512-8oNqgnmF3v2J6PVRM2Jfuj8oX3syKmaynlDMMKQ4iyzbQzIG6th5ub/lM2bCMTmoTKM3ykcUYI2Pw9xwNtjMnw==",
-      "dev": true,
-      "dependencies": {
-        "@jest/console": "^24.7.1",
-        "@jest/environment": "^24.9.0",
-        "@jest/source-map": "^24.3.0",
-        "@jest/transform": "^24.9.0",
-        "@jest/types": "^24.9.0",
-        "@types/yargs": "^13.0.0",
-        "chalk": "^2.0.1",
-        "exit": "^0.1.2",
-        "glob": "^7.1.3",
-        "graceful-fs": "^4.1.15",
-        "jest-config": "^24.9.0",
-        "jest-haste-map": "^24.9.0",
-        "jest-message-util": "^24.9.0",
-        "jest-mock": "^24.9.0",
-        "jest-regex-util": "^24.3.0",
-        "jest-resolve": "^24.9.0",
-        "jest-snapshot": "^24.9.0",
-        "jest-util": "^24.9.0",
-        "jest-validate": "^24.9.0",
-        "realpath-native": "^1.1.0",
-        "slash": "^2.0.0",
-        "strip-bom": "^3.0.0",
-        "yargs": "^13.3.0"
-      },
-      "bin": {
-        "jest-runtime": "bin/jest-runtime.js"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/jest/node_modules/jest-serializer": {
-      "version": "24.9.0",
-      "resolved": "https://registry.npmjs.org/jest-serializer/-/jest-serializer-24.9.0.tgz",
-      "integrity": "sha512-DxYipDr8OvfrKH3Kel6NdED3OXxjvxXZ1uIY2I9OFbGg+vUkkg7AGvi65qbhbWNPvDckXmzMPbK3u3HaDO49bQ==",
-      "dev": true,
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/jest/node_modules/jest-snapshot": {
-      "version": "24.9.0",
-      "resolved": "https://registry.npmjs.org/jest-snapshot/-/jest-snapshot-24.9.0.tgz",
-      "integrity": "sha512-uI/rszGSs73xCM0l+up7O7a40o90cnrk429LOiK3aeTvfC0HHmldbd81/B7Ix81KSFe1lwkbl7GnBGG4UfuDew==",
-      "dev": true,
-      "dependencies": {
-        "@babel/types": "^7.0.0",
-        "@jest/types": "^24.9.0",
-        "chalk": "^2.0.1",
-        "expect": "^24.9.0",
-        "jest-diff": "^24.9.0",
-        "jest-get-type": "^24.9.0",
-        "jest-matcher-utils": "^24.9.0",
-        "jest-message-util": "^24.9.0",
-        "jest-resolve": "^24.9.0",
-        "mkdirp": "^0.5.1",
-        "natural-compare": "^1.4.0",
-        "pretty-format": "^24.9.0",
-        "semver": "^6.2.0"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/jest/node_modules/jest-util": {
-      "version": "24.9.0",
-      "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-24.9.0.tgz",
-      "integrity": "sha512-x+cZU8VRmOJxbA1K5oDBdxQmdq0OIdADarLxk0Mq+3XS4jgvhG/oKGWcIDCtPG0HgjxOYvF+ilPJQsAyXfbNOg==",
-      "dev": true,
-      "dependencies": {
-        "@jest/console": "^24.9.0",
-        "@jest/fake-timers": "^24.9.0",
-        "@jest/source-map": "^24.9.0",
-        "@jest/test-result": "^24.9.0",
-        "@jest/types": "^24.9.0",
-        "callsites": "^3.0.0",
-        "chalk": "^2.0.1",
-        "graceful-fs": "^4.1.15",
-        "is-ci": "^2.0.0",
-        "mkdirp": "^0.5.1",
-        "slash": "^2.0.0",
-        "source-map": "^0.6.0"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/jest/node_modules/jest-validate": {
-      "version": "24.9.0",
-      "resolved": "https://registry.npmjs.org/jest-validate/-/jest-validate-24.9.0.tgz",
-      "integrity": "sha512-HPIt6C5ACwiqSiwi+OfSSHbK8sG7akG8eATl+IPKaeIjtPOeBUd/g3J7DghugzxrGjI93qS/+RPKe1H6PqvhRQ==",
-      "dev": true,
-      "dependencies": {
-        "@jest/types": "^24.9.0",
-        "camelcase": "^5.3.1",
-        "chalk": "^2.0.1",
-        "jest-get-type": "^24.9.0",
-        "leven": "^3.1.0",
-        "pretty-format": "^24.9.0"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/jest/node_modules/jest-watcher": {
-      "version": "24.9.0",
-      "resolved": "https://registry.npmjs.org/jest-watcher/-/jest-watcher-24.9.0.tgz",
-      "integrity": "sha512-+/fLOfKPXXYJDYlks62/4R4GoT+GU1tYZed99JSCOsmzkkF7727RqKrjNAxtfO4YpGv11wybgRvCjR73lK2GZw==",
-      "dev": true,
-      "dependencies": {
-        "@jest/test-result": "^24.9.0",
-        "@jest/types": "^24.9.0",
-        "@types/yargs": "^13.0.0",
-        "ansi-escapes": "^3.0.0",
-        "chalk": "^2.0.1",
-        "jest-util": "^24.9.0",
-        "string-length": "^2.0.0"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/jest/node_modules/jest-worker": {
-      "version": "24.9.0",
-      "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-24.9.0.tgz",
-      "integrity": "sha512-51PE4haMSXcHohnSMdM42anbvZANYTqMrr52tVKPqqsPJMzoP6FYYDVqahX/HrAoKEKz3uUPzSvKs9A3qR4iVw==",
-      "dev": true,
-      "dependencies": {
-        "merge-stream": "^2.0.0",
-        "supports-color": "^6.1.0"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/jest/node_modules/jsdom": {
-      "version": "11.12.0",
-      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-11.12.0.tgz",
-      "integrity": "sha512-y8Px43oyiBM13Zc1z780FrfNLJCXTL40EWlty/LXUtcjykRBNgLlCjWXpfSPBl2iv+N7koQN+dvqszHZgT/Fjw==",
-      "dev": true,
-      "dependencies": {
-        "abab": "^2.0.0",
-        "acorn": "^5.5.3",
-        "acorn-globals": "^4.1.0",
-        "array-equal": "^1.0.0",
-        "cssom": ">= 0.3.2 < 0.4.0",
-        "cssstyle": "^1.0.0",
-        "data-urls": "^1.0.0",
-        "domexception": "^1.0.1",
-        "escodegen": "^1.9.1",
-        "html-encoding-sniffer": "^1.0.2",
-        "left-pad": "^1.3.0",
-        "nwsapi": "^2.0.7",
-        "parse5": "4.0.0",
-        "pn": "^1.1.0",
-        "request": "^2.87.0",
-        "request-promise-native": "^1.0.5",
-        "sax": "^1.2.4",
-        "symbol-tree": "^3.2.2",
-        "tough-cookie": "^2.3.4",
-        "w3c-hr-time": "^1.0.1",
-        "webidl-conversions": "^4.0.2",
-        "whatwg-encoding": "^1.0.3",
-        "whatwg-mimetype": "^2.1.0",
-        "whatwg-url": "^6.4.1",
-        "ws": "^5.2.0",
-        "xml-name-validator": "^3.0.0"
-      }
-    },
-    "node_modules/jest/node_modules/load-json-file": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-4.0.0.tgz",
-      "integrity": "sha1-L19Fq5HjMhYjT9U62rZo607AmTs=",
-      "dev": true,
-      "dependencies": {
-        "graceful-fs": "^4.1.2",
-        "parse-json": "^4.0.0",
-        "pify": "^3.0.0",
-        "strip-bom": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/jest/node_modules/locate-path": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
-      "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
-      "dev": true,
-      "dependencies": {
-        "p-locate": "^3.0.0",
-        "path-exists": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/jest/node_modules/ms": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-      "dev": true
-    },
-    "node_modules/jest/node_modules/node-notifier": {
-      "version": "5.4.3",
-      "resolved": "https://registry.npmjs.org/node-notifier/-/node-notifier-5.4.3.tgz",
-      "integrity": "sha512-M4UBGcs4jeOK9CjTsYwkvH6/MzuUmGCyTW+kCY7uO+1ZVr0+FHGdPdIf5CCLqAaxnRrWidyoQlNkMIIVwbKB8Q==",
-      "dev": true,
-      "dependencies": {
-        "growly": "^1.3.0",
-        "is-wsl": "^1.1.0",
-        "semver": "^5.5.0",
-        "shellwords": "^0.1.1",
-        "which": "^1.3.0"
-      }
-    },
-    "node_modules/jest/node_modules/node-notifier/node_modules/semver": {
-      "version": "5.7.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-      "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
-      "dev": true,
-      "bin": {
-        "semver": "bin/semver"
-      }
-    },
-    "node_modules/jest/node_modules/p-each-series": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/p-each-series/-/p-each-series-1.0.0.tgz",
-      "integrity": "sha1-kw89Et0fUOdDRFeiLNbwSsatf3E=",
-      "dev": true,
-      "dependencies": {
-        "p-reduce": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/jest/node_modules/p-locate": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
-      "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
-      "dev": true,
-      "dependencies": {
-        "p-limit": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/jest/node_modules/parse-json": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
-      "integrity": "sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=",
-      "dev": true,
-      "dependencies": {
-        "error-ex": "^1.3.1",
-        "json-parse-better-errors": "^1.0.1"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/jest/node_modules/parse5": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/parse5/-/parse5-4.0.0.tgz",
-      "integrity": "sha512-VrZ7eOd3T1Fk4XWNXMgiGBK/z0MG48BWG2uQNU4I72fkQuKUTZpl+u9k+CxEG0twMVzSmXEEz12z5Fnw1jIQFA==",
-      "dev": true
-    },
-    "node_modules/jest/node_modules/path-exists": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
-      "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/jest/node_modules/path-type": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/path-type/-/path-type-3.0.0.tgz",
-      "integrity": "sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg==",
-      "dev": true,
-      "dependencies": {
-        "pify": "^3.0.0"
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.2.0"
       },
       "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/jest/node_modules/pify": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
-      "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
+        "node": ">=10.13.0"
       }
     },
-    "node_modules/jest/node_modules/pretty-format": {
-      "version": "24.9.0",
-      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-24.9.0.tgz",
-      "integrity": "sha512-00ZMZUiHaJrNfk33guavqgvfJS30sLYf0f8+Srklv0AMPodGGHcoHgksZ3OThYnIvOd+8yMCn0YiEOogjlgsnA==",
-      "dev": true,
+    "node_modules/webpack/node_modules/schema-utils": {
+      "version": "3.3.0",
+      "license": "MIT",
       "dependencies": {
-        "@jest/types": "^24.9.0",
-        "ansi-regex": "^4.0.0",
-        "ansi-styles": "^3.2.0",
-        "react-is": "^16.8.4"
+        "@types/json-schema": "^7.0.8",
+        "ajv": "^6.12.5",
+        "ajv-keywords": "^3.5.2"
       },
       "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/jest/node_modules/read-pkg": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
-      "integrity": "sha1-nLxoaXj+5l0WwA4rGcI3/Pbjg4k=",
-      "dev": true,
-      "dependencies": {
-        "load-json-file": "^4.0.0",
-        "normalize-package-data": "^2.3.2",
-        "path-type": "^3.0.0"
+        "node": ">= 10.13.0"
       },
-      "engines": {
-        "node": ">=4"
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
       }
     },
-    "node_modules/jest/node_modules/read-pkg-up": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-4.0.0.tgz",
-      "integrity": "sha512-6etQSH7nJGsK0RbG/2TeDzZFa8shjQ1um+SwQQ5cwKy0dhSXdOncEhb1CPpvQG4h7FyOV6EB6YlV0yJvZQNAkA==",
-      "dev": true,
-      "dependencies": {
-        "find-up": "^3.0.0",
-        "read-pkg": "^3.0.0"
-      },
+    "node_modules/webpack/node_modules/tapable": {
+      "version": "2.2.1",
+      "license": "MIT",
       "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/jest/node_modules/realpath-native": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/realpath-native/-/realpath-native-1.1.0.tgz",
-      "integrity": "sha512-wlgPA6cCIIg9gKz0fgAPjnzh4yR/LnXovwuo9hvyGvx3h8nX4+/iLZplfUWasXpqD8BdnGnP5njOFjkUwPzvjA==",
-      "dev": true,
-      "dependencies": {
-        "util.promisify": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/jest/node_modules/resolve-cwd": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/resolve-cwd/-/resolve-cwd-2.0.0.tgz",
-      "integrity": "sha1-AKn3OHVW4nA46uIyyqNypqWbZlo=",
-      "dev": true,
-      "dependencies": {
-        "resolve-from": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/jest/node_modules/resolve-from": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz",
-      "integrity": "sha1-six699nWiBvItuZTM17rywoYh0g=",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/jest/node_modules/semver": {
-      "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-      "dev": true,
-      "bin": {
-        "semver": "bin/semver.js"
-      }
-    },
-    "node_modules/jest/node_modules/string-length": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/string-length/-/string-length-2.0.0.tgz",
-      "integrity": "sha1-1A27aGo6zpYMHP/KVivyxF+DY+0=",
-      "dev": true,
-      "dependencies": {
-        "astral-regex": "^1.0.0",
-        "strip-ansi": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/jest/node_modules/string-length/node_modules/ansi-regex": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
-      "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/jest/node_modules/string-length/node_modules/strip-ansi": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
-      "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
-      "dev": true,
-      "dependencies": {
-        "ansi-regex": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/jest/node_modules/string-width": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
-      "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
-      "dev": true,
-      "dependencies": {
-        "emoji-regex": "^7.0.1",
-        "is-fullwidth-code-point": "^2.0.0",
-        "strip-ansi": "^5.1.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/jest/node_modules/test-exclude": {
-      "version": "5.2.3",
-      "resolved": "https://registry.npmjs.org/test-exclude/-/test-exclude-5.2.3.tgz",
-      "integrity": "sha512-M+oxtseCFO3EDtAaGH7iiej3CBkzXqFMbzqYAACdzKui4eZA+pq3tZEwChvOdNfa7xxy8BfbmgJSIr43cC/+2g==",
-      "dev": true,
-      "dependencies": {
-        "glob": "^7.1.3",
-        "minimatch": "^3.0.4",
-        "read-pkg-up": "^4.0.0",
-        "require-main-filename": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/jest/node_modules/throat": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/throat/-/throat-4.1.0.tgz",
-      "integrity": "sha1-iQN8vJLFarGJJua6TLsgDhVnKmo=",
-      "dev": true
-    },
-    "node_modules/jest/node_modules/tough-cookie": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
-      "integrity": "sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==",
-      "dev": true,
-      "dependencies": {
-        "psl": "^1.1.28",
-        "punycode": "^2.1.1"
-      },
-      "engines": {
-        "node": ">=0.8"
-      }
-    },
-    "node_modules/jest/node_modules/whatwg-url": {
-      "version": "6.5.0",
-      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-6.5.0.tgz",
-      "integrity": "sha512-rhRZRqx/TLJQWUpQ6bmrt2UV4f0HCQ463yQuONJqC6fO2VoEb1pTYddbe59SkYq87aoM5A3bdhMZiUiVws+fzQ==",
-      "dev": true,
-      "dependencies": {
-        "lodash.sortby": "^4.7.0",
-        "tr46": "^1.0.1",
-        "webidl-conversions": "^4.0.2"
-      }
-    },
-    "node_modules/jest/node_modules/which": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
-      "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
-      "dev": true,
-      "dependencies": {
-        "isexe": "^2.0.0"
-      },
-      "bin": {
-        "which": "bin/which"
-      }
-    },
-    "node_modules/jest/node_modules/wrap-ansi": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-5.1.0.tgz",
-      "integrity": "sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==",
-      "dev": true,
-      "dependencies": {
-        "ansi-styles": "^3.2.0",
-        "string-width": "^3.0.0",
-        "strip-ansi": "^5.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/jest/node_modules/write-file-atomic": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-2.4.1.tgz",
-      "integrity": "sha512-TGHFeZEZMnv+gBFRfjAcxL5bPHrsGKtnb4qsFAws7/vlh+QfwAaySIw4AXP9ZskTTh5GWu3FLuJhsWVdiJPGvg==",
-      "dev": true,
-      "dependencies": {
-        "graceful-fs": "^4.1.11",
-        "imurmurhash": "^0.1.4",
-        "signal-exit": "^3.0.2"
-      }
-    },
-    "node_modules/jest/node_modules/ws": {
-      "version": "5.2.2",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-5.2.2.tgz",
-      "integrity": "sha512-jaHFD6PFv6UgoIVda6qZllptQsMlDEJkTQcybzzXDYM1XO9Y8em691FGMPmM46WGyLU4z9KMgQN+qrux/nhlHA==",
-      "dev": true,
-      "dependencies": {
-        "async-limiter": "~1.0.0"
-      }
-    },
-    "node_modules/jest/node_modules/yargs": {
-      "version": "13.3.2",
-      "resolved": "https://registry.npmjs.org/yargs/-/yargs-13.3.2.tgz",
-      "integrity": "sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==",
-      "dev": true,
-      "dependencies": {
-        "cliui": "^5.0.0",
-        "find-up": "^3.0.0",
-        "get-caller-file": "^2.0.1",
-        "require-directory": "^2.1.1",
-        "require-main-filename": "^2.0.0",
-        "set-blocking": "^2.0.0",
-        "string-width": "^3.0.0",
-        "which-module": "^2.0.0",
-        "y18n": "^4.0.0",
-        "yargs-parser": "^13.1.2"
-      }
-    },
-    "node_modules/jest/node_modules/yargs-parser": {
-      "version": "13.1.2",
-      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.1.2.tgz",
-      "integrity": "sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg==",
-      "dev": true,
-      "dependencies": {
-        "camelcase": "^5.0.0",
-        "decamelize": "^1.2.0"
-      }
-    },
-    "node_modules/js-tokens": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
-      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
-    },
-    "node_modules/js-yaml": {
-      "version": "3.14.0",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.0.tgz",
-      "integrity": "sha512-/4IbIeHcD9VMHFqDR/gQ7EdZdLimOvW2DdcxFjdyyZ9NsbS+ccrXqVWDtab/lRl5AlUqmpBx8EhPaWR+OtY17A==",
-      "dev": true,
-      "dependencies": {
-        "argparse": "^1.0.7",
-        "esprima": "^4.0.0"
-      },
-      "bin": {
-        "js-yaml": "bin/js-yaml.js"
-      }
-    },
-    "node_modules/jsbn": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",
-      "integrity": "sha1-peZUwuWi3rXyAdls77yoDA7y9RM=",
-      "dev": true
-    },
-    "node_modules/jsdom": {
-      "version": "16.6.0",
-      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-16.6.0.tgz",
-      "integrity": "sha512-Ty1vmF4NHJkolaEmdjtxTfSfkdb8Ywarwf63f+F8/mDD1uLSSWDxDuMiZxiPhwunLrn9LOSVItWj4bLYsLN3Dg==",
-      "dev": true,
-      "dependencies": {
-        "abab": "^2.0.5",
-        "acorn": "^8.2.4",
-        "acorn-globals": "^6.0.0",
-        "cssom": "^0.4.4",
-        "cssstyle": "^2.3.0",
-        "data-urls": "^2.0.0",
-        "decimal.js": "^10.2.1",
-        "domexception": "^2.0.1",
-        "escodegen": "^2.0.0",
-        "form-data": "^3.0.0",
-        "html-encoding-sniffer": "^2.0.1",
-        "http-proxy-agent": "^4.0.1",
-        "https-proxy-agent": "^5.0.0",
-        "is-potential-custom-element-name": "^1.0.1",
-        "nwsapi": "^2.2.0",
-        "parse5": "6.0.1",
-        "saxes": "^5.0.1",
-        "symbol-tree": "^3.2.4",
-        "tough-cookie": "^4.0.0",
-        "w3c-hr-time": "^1.0.2",
-        "w3c-xmlserializer": "^2.0.0",
-        "webidl-conversions": "^6.1.0",
-        "whatwg-encoding": "^1.0.5",
-        "whatwg-mimetype": "^2.3.0",
-        "whatwg-url": "^8.5.0",
-        "ws": "^7.4.5",
-        "xml-name-validator": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/jsdom/node_modules/abab": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.5.tgz",
-      "integrity": "sha512-9IK9EadsbHo6jLWIpxpR6pL0sazTXV6+SQv25ZB+F7Bj9mJNaOc4nCRabwd5M/JwmUa8idz6Eci6eKfJryPs6Q==",
-      "dev": true
-    },
-    "node_modules/jsdom/node_modules/acorn": {
-      "version": "8.4.1",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.4.1.tgz",
-      "integrity": "sha512-asabaBSkEKosYKMITunzX177CXxQ4Q8BSSzMTKD+FefUhipQC70gfW5SiUDhYQ3vk8G+81HqQk7Fv9OXwwn9KA==",
-      "dev": true,
-      "bin": {
-        "acorn": "bin/acorn"
-      },
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
-    "node_modules/jsdom/node_modules/acorn-globals": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/acorn-globals/-/acorn-globals-6.0.0.tgz",
-      "integrity": "sha512-ZQl7LOWaF5ePqqcX4hLuv/bLXYQNfNWw2c0/yX/TsPRKamzHcTGQnlCjHT3TsmkOUVEPS3crCxiPfdzE/Trlhg==",
-      "dev": true,
-      "dependencies": {
-        "acorn": "^7.1.1",
-        "acorn-walk": "^7.1.1"
-      }
-    },
-    "node_modules/jsdom/node_modules/acorn-globals/node_modules/acorn": {
-      "version": "7.4.1",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
-      "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
-      "dev": true,
-      "bin": {
-        "acorn": "bin/acorn"
-      },
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
-    "node_modules/jsdom/node_modules/acorn-walk": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
-      "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
-    "node_modules/jsdom/node_modules/data-urls": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-2.0.0.tgz",
-      "integrity": "sha512-X5eWTSXO/BJmpdIKCRuKUgSCgAN0OwliVK3yPKbwIWU1Tdw5BRajxlzMidvh+gwko9AfQ9zIj52pzF91Q3YAvQ==",
-      "dev": true,
-      "dependencies": {
-        "abab": "^2.0.3",
-        "whatwg-mimetype": "^2.3.0",
-        "whatwg-url": "^8.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/jsdom/node_modules/domexception": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/domexception/-/domexception-2.0.1.tgz",
-      "integrity": "sha512-yxJ2mFy/sibVQlu5qHjOkf9J3K6zgmCxgJ94u2EdvDOV09H+32LtRswEcUsmUWN72pVLOEnTSRaIVVzVQgS0dg==",
-      "dev": true,
-      "dependencies": {
-        "webidl-conversions": "^5.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/jsdom/node_modules/domexception/node_modules/webidl-conversions": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-5.0.0.tgz",
-      "integrity": "sha512-VlZwKPCkYKxQgeSbH5EyngOmRp7Ww7I9rQLERETtf5ofd9pGeswWiOtogpEO850jziPRarreGxn5QIiTqpb2wA==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/jsdom/node_modules/escodegen": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-2.0.0.tgz",
-      "integrity": "sha512-mmHKys/C8BFUGI+MAWNcSYoORYLMdPzjrknd2Vc+bUsjN5bXcr8EhrNB+UTqfL1y3I9c4fw2ihgtMPQLBRiQxw==",
-      "dev": true,
-      "dependencies": {
-        "esprima": "^4.0.1",
-        "estraverse": "^5.2.0",
-        "esutils": "^2.0.2",
-        "optionator": "^0.8.1",
-        "source-map": "~0.6.1"
-      },
-      "bin": {
-        "escodegen": "bin/escodegen.js",
-        "esgenerate": "bin/esgenerate.js"
-      },
-      "engines": {
-        "node": ">=6.0"
-      }
-    },
-    "node_modules/jsdom/node_modules/estraverse": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.2.0.tgz",
-      "integrity": "sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=4.0"
-      }
-    },
-    "node_modules/jsdom/node_modules/form-data": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/form-data/-/form-data-3.0.1.tgz",
-      "integrity": "sha512-RHkBKtLWUVwd7SqRIvCZMEvAMoGUp0XU+seQiZejj0COz3RI3hWP4sCv3gZWWLjJTd7rGwcsF5eKZGii0r/hbg==",
-      "dev": true,
-      "dependencies": {
-        "asynckit": "^0.4.0",
-        "combined-stream": "^1.0.8",
-        "mime-types": "^2.1.12"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/jsdom/node_modules/html-encoding-sniffer": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz",
-      "integrity": "sha512-D5JbOMBIR/TVZkubHT+OyT2705QvogUW4IBn6nHd756OwieSF9aDYFj4dv6HHEVGYbHaLETa3WggZYWWMyy3ZQ==",
-      "dev": true,
-      "dependencies": {
-        "whatwg-encoding": "^1.0.5"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/jsdom/node_modules/https-proxy-agent": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.0.tgz",
-      "integrity": "sha512-EkYm5BcKUGiduxzSt3Eppko+PiNWNEpa4ySk9vTC6wDsQJW9rHSa+UhGNJoRYp7bz6Ht1eaRIa6QaJqO5rCFbA==",
-      "dev": true,
-      "dependencies": {
-        "agent-base": "6",
-        "debug": "4"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/jsdom/node_modules/tr46": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/tr46/-/tr46-2.1.0.tgz",
-      "integrity": "sha512-15Ih7phfcdP5YxqiB+iDtLoaTz4Nd35+IiAv0kQ5FNKHzXgdWqPoTIqEDDJmXceQt4JZk6lVPT8lnDlPpGDppw==",
-      "dev": true,
-      "dependencies": {
-        "punycode": "^2.1.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/jsdom/node_modules/webidl-conversions": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-6.1.0.tgz",
-      "integrity": "sha512-qBIvFLGiBpLjfwmYAaHPXsn+ho5xZnGvyGvsarywGNc8VyQJUMHJ8OBKGGrPER0okBeMDaan4mNBlgBROxuI8w==",
-      "dev": true,
-      "engines": {
-        "node": ">=10.4"
-      }
-    },
-    "node_modules/jsdom/node_modules/whatwg-url": {
-      "version": "8.7.0",
-      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-8.7.0.tgz",
-      "integrity": "sha512-gAojqb/m9Q8a5IV96E3fHJM70AzCkgt4uXYX2O7EmuyOnLrViCQlsEBmF9UQIu3/aeAIp2U17rtbpZWNntQqdg==",
-      "dev": true,
-      "dependencies": {
-        "lodash": "^4.7.0",
-        "tr46": "^2.1.0",
-        "webidl-conversions": "^6.1.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/jsesc": {
-      "version": "2.5.2",
-      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
-      "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
-      "dev": true,
-      "bin": {
-        "jsesc": "bin/jsesc"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/json-buffer": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.0.tgz",
-      "integrity": "sha1-Wx85evx11ne96Lz8Dkfh+aPZqJg=",
-      "dev": true,
-      "optional": true
-    },
-    "node_modules/json-parse-better-errors": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz",
-      "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==",
-      "dev": true
-    },
-    "node_modules/json-parse-even-better-errors": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
-      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
-      "dev": true
-    },
-    "node_modules/json-schema": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.2.3.tgz",
-      "integrity": "sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM=",
-      "dev": true
-    },
-    "node_modules/json-schema-traverse": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
-      "dev": true
-    },
-    "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",
-      "integrity": "sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=",
-      "dev": true
-    },
-    "node_modules/json-stringify-safe": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
-      "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=",
-      "dev": true
-    },
-    "node_modules/json5": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/json5/-/json5-2.1.3.tgz",
-      "integrity": "sha512-KXPvOm8K9IJKFM0bmdn8QXh7udDh1g/giieX0NLCaMnb4hEiVFqnop2ImTXCc5e0/oHz3LTqmHGtExn5hfMkOA==",
-      "dev": true,
-      "dependencies": {
-        "minimist": "^1.2.5"
-      },
-      "bin": {
-        "json5": "lib/cli.js"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/jsonfile": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
-      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
-      "dev": true,
-      "dependencies": {
-        "graceful-fs": "^4.1.6",
-        "universalify": "^2.0.0"
-      }
-    },
-    "node_modules/jsprim": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.1.tgz",
-      "integrity": "sha1-MT5mvB5cwG5Di8G3SZwuXFastqI=",
-      "dev": true,
-      "engines": [
-        "node >=0.6.0"
-      ],
-      "dependencies": {
-        "assert-plus": "1.0.0",
-        "extsprintf": "1.3.0",
-        "json-schema": "0.2.3",
-        "verror": "1.10.0"
-      }
-    },
-    "node_modules/jsx-ast-utils": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-2.4.1.tgz",
-      "integrity": "sha512-z1xSldJ6imESSzOjd3NNkieVJKRlKYSOtMG8SFyCj2FIrvSaSuli/WjpBkEzCBoR9bYYYFgqJw61Xhu7Lcgk+w==",
-      "dev": true,
-      "dependencies": {
-        "array-includes": "^3.1.1",
-        "object.assign": "^4.1.0"
-      },
-      "engines": {
-        "node": ">=4.0"
-      }
-    },
-    "node_modules/junk": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/junk/-/junk-3.1.0.tgz",
-      "integrity": "sha512-pBxcB3LFc8QVgdggvZWyeys+hnrNWg4OcZIU/1X59k5jQdLBlCsYGRQaz234SqoRLTCgMH00fY0xRJH+F9METQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/jwt-decode": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-2.2.0.tgz",
-      "integrity": "sha1-fYa9VmefWM5qhHBKZX3TkruoGnk="
-    },
-    "node_modules/keyv": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/keyv/-/keyv-3.0.0.tgz",
-      "integrity": "sha512-eguHnq22OE3uVoSYG0LVWNP+4ppamWr9+zWBe1bsNcovIMy6huUJFPgy4mGwCd/rnl3vOLGW1MTlu4c57CT1xA==",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "json-buffer": "3.0.0"
-      }
-    },
-    "node_modules/killable": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",
-      "integrity": "sha512-LzqtLKlUwirEUyl/nicirVmNiPvYs7l5n8wOPP7fyJVpUPkvCnW/vuiXGpylGUlnPDnB7311rARzAt3Mhswpjg==",
-      "dev": true
-    },
-    "node_modules/kind-of": {
-      "version": "6.0.3",
-      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
-      "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/kleur": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz",
-      "integrity": "sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/klona": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.4.tgz",
-      "integrity": "sha512-ZRbnvdg/NxqzC7L9Uyqzf4psi1OM4Cuc+sJAkQPjO6XkQIJTNbfK2Rsmbw8fx1p2mkZdp2FZYo2+LwXYY/uwIA==",
-      "dev": true,
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/left-pad": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/left-pad/-/left-pad-1.3.0.tgz",
-      "integrity": "sha512-XI5MPzVNApjAyhQzphX8BkmKsKUxD4LdyK24iZeQGinBN9yTQT3bFlCBy/aVx2HrNcqQGsdot8ghrjyrvMCoEA==",
-      "dev": true
-    },
-    "node_modules/leven": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
-      "integrity": "sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/levenary": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/levenary/-/levenary-1.1.1.tgz",
-      "integrity": "sha512-mkAdOIt79FD6irqjYSs4rdbnlT5vRonMEvBVPVb3XmevfS8kgRXwfes0dhPdEtzTWD/1eNE/Bm/G1iRt6DcnQQ==",
-      "dev": true,
-      "dependencies": {
-        "leven": "^3.1.0"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/levn": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/levn/-/levn-0.3.0.tgz",
-      "integrity": "sha1-OwmSTt+fCDwEkP3UwLxEIeBHZO4=",
-      "dev": true,
-      "dependencies": {
-        "prelude-ls": "~1.1.2",
-        "type-check": "~0.3.2"
-      },
-      "engines": {
-        "node": ">= 0.8.0"
-      }
-    },
-    "node_modules/lie": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/lie/-/lie-3.1.1.tgz",
-      "integrity": "sha1-mkNrLMd0bKWd56QfpGmz77dr2H4=",
-      "dependencies": {
-        "immediate": "~3.0.5"
-      }
-    },
-    "node_modules/lines-and-columns": {
-      "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.1.6.tgz",
-      "integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=",
-      "dev": true
-    },
-    "node_modules/load-json-file": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-2.0.0.tgz",
-      "integrity": "sha1-eUfkIUmvgNaWy/eXvKq8/h/inKg=",
-      "dev": true,
-      "dependencies": {
-        "graceful-fs": "^4.1.2",
-        "parse-json": "^2.2.0",
-        "pify": "^2.0.0",
-        "strip-bom": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/load-json-file/node_modules/parse-json": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-2.2.0.tgz",
-      "integrity": "sha1-9ID0BDTvgHQfhGkJn43qGPVaTck=",
-      "dev": true,
-      "dependencies": {
-        "error-ex": "^1.2.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/load-json-file/node_modules/pify": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
-      "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/loader-runner": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.2.0.tgz",
-      "integrity": "sha512-92+huvxMvYlMzMt0iIOukcwYBFpkYJdpl2xsZ7LrlayO7E8SOv+JJUEK17B/dJIHAOLMfh2dZZ/Y18WgmGtYNw==",
-      "dev": true,
-      "engines": {
-        "node": ">=6.11.5"
-      }
-    },
-    "node_modules/loader-utils": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
-      "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
-      "dev": true,
-      "dependencies": {
-        "big.js": "^5.2.2",
-        "emojis-list": "^3.0.0",
-        "json5": "^2.1.2"
-      },
-      "engines": {
-        "node": ">=8.9.0"
-      }
-    },
-    "node_modules/localforage": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/localforage/-/localforage-1.9.0.tgz",
-      "integrity": "sha512-rR1oyNrKulpe+VM9cYmcFn6tsHuokyVHFaCM3+osEmxaHTbEk8oQu6eGDfS6DQLWi/N67XRmB8ECG37OES368g==",
-      "dependencies": {
-        "lie": "3.1.1"
-      }
-    },
-    "node_modules/localforage-memoryStorageDriver": {
-      "version": "0.9.2",
-      "resolved": "https://registry.npmjs.org/localforage-memoryStorageDriver/-/localforage-memoryStorageDriver-0.9.2.tgz",
-      "integrity": "sha1-Lg9/8qyw6f9egsUsni6z1juZjTA=",
-      "dependencies": {
-        "localforage": ">=1.4.0"
-      }
-    },
-    "node_modules/locate-path": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
-      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
-      "dev": true,
-      "dependencies": {
-        "p-locate": "^4.1.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/lodash": {
-      "version": "4.17.21",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
-    },
-    "node_modules/lodash-es": {
-      "version": "4.17.20",
-      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.20.tgz",
-      "integrity": "sha512-JD1COMZsq8maT6mnuz1UMV0jvYD0E0aUsSOdrr1/nAG3dhqQXwRRgeW0cSqH1U43INKcqxaiVIQNOUDld7gRDA=="
-    },
-    "node_modules/lodash.camelcase": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
-      "integrity": "sha1-soqmKIorn8ZRA1x3EfZathkDMaY="
-    },
-    "node_modules/lodash.debounce": {
-      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
-      "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168=",
-      "dev": true
-    },
-    "node_modules/lodash.difference": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/lodash.difference/-/lodash.difference-4.5.0.tgz",
-      "integrity": "sha1-nMtOUF1Ia5FlE0V3KIWi3yf9AXw=",
-      "dev": true
-    },
-    "node_modules/lodash.memoize": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
-      "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4="
-    },
-    "node_modules/lodash.merge": {
-      "version": "4.6.2",
-      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
-      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="
-    },
-    "node_modules/lodash.pad": {
-      "version": "4.5.1",
-      "resolved": "https://registry.npmjs.org/lodash.pad/-/lodash.pad-4.5.1.tgz",
-      "integrity": "sha1-QzCUmoM6fI2iLMIPaibE1Z3runA=",
-      "dev": true
-    },
-    "node_modules/lodash.padend": {
-      "version": "4.6.1",
-      "resolved": "https://registry.npmjs.org/lodash.padend/-/lodash.padend-4.6.1.tgz",
-      "integrity": "sha1-U8y6BH0G4VjTEfRdpiX05J5vFm4=",
-      "dev": true
-    },
-    "node_modules/lodash.padstart": {
-      "version": "4.6.1",
-      "resolved": "https://registry.npmjs.org/lodash.padstart/-/lodash.padstart-4.6.1.tgz",
-      "integrity": "sha1-0uPuv/DZ05rVD1y9G1KnvOa7YRs=",
-      "dev": true
-    },
-    "node_modules/lodash.snakecase": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/lodash.snakecase/-/lodash.snakecase-4.1.1.tgz",
-      "integrity": "sha1-OdcUo1NXFHg3rv1ktdy7Fr7Nj40="
-    },
-    "node_modules/lodash.sortby": {
-      "version": "4.7.0",
-      "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
-      "integrity": "sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=",
-      "dev": true
-    },
-    "node_modules/lodash.uniq": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
-      "integrity": "sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=",
-      "dev": true
-    },
-    "node_modules/lodash.uniqby": {
-      "version": "4.7.0",
-      "resolved": "https://registry.npmjs.org/lodash.uniqby/-/lodash.uniqby-4.7.0.tgz",
-      "integrity": "sha1-2ZwHpmnp5tJOE2Lf4mbGdhavEwI="
-    },
-    "node_modules/logalot": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/logalot/-/logalot-2.1.0.tgz",
-      "integrity": "sha1-X46MkNME7fElMJUaVVSruMXj9VI=",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "figures": "^1.3.5",
-        "squeak": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/logalot/node_modules/figures": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/figures/-/figures-1.7.0.tgz",
-      "integrity": "sha1-y+Hjr/zxzUS4DK3+0o3Hk6lwHS4=",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "escape-string-regexp": "^1.0.5",
-        "object-assign": "^4.1.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/longest": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/longest/-/longest-1.0.1.tgz",
-      "integrity": "sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc=",
-      "dev": true,
-      "optional": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/loose-envify": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
-      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
-      "dependencies": {
-        "js-tokens": "^3.0.0 || ^4.0.0"
-      },
-      "bin": {
-        "loose-envify": "cli.js"
-      }
-    },
-    "node_modules/loud-rejection": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/loud-rejection/-/loud-rejection-1.6.0.tgz",
-      "integrity": "sha1-W0b4AUft7leIcPCG0Eghz5mOVR8=",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "currently-unhandled": "^0.4.1",
-        "signal-exit": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/lower-case": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
-      "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
-      "dev": true,
-      "dependencies": {
-        "tslib": "^2.0.3"
-      }
-    },
-    "node_modules/lower-case/node_modules/tslib": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
-      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
-      "dev": true
-    },
-    "node_modules/lowercase-keys": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-1.0.1.tgz",
-      "integrity": "sha512-G2Lj61tXDnVFFOi8VZds+SoQjtQC3dgokKdDG2mTm1tx4m50NUHBOZSBwQQHyy0V12A0JTG4icfZQH+xPyh8VA==",
-      "dev": true,
-      "optional": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/lpad-align": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/lpad-align/-/lpad-align-1.1.2.tgz",
-      "integrity": "sha1-IfYArBwwlcPG5JfuZyce4ISB/p4=",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "get-stdin": "^4.0.1",
-        "indent-string": "^2.1.0",
-        "longest": "^1.0.0",
-        "meow": "^3.3.0"
-      },
-      "bin": {
-        "lpad-align": "cli.js"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/lru-cache": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-      "dev": true,
-      "dependencies": {
-        "yallist": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/mailto-link": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/mailto-link/-/mailto-link-1.0.0.tgz",
-      "integrity": "sha1-9Sqp/MEXPLOAkV3xZNsxSRiRUl0=",
-      "dependencies": {
-        "assert-ok": "~1.0.0",
-        "cast-array": "~1.0.0",
-        "object-filter": "~1.0.2",
-        "query-string": "~2.4.1"
-      }
-    },
-    "node_modules/make-dir": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
-      "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
-      "dev": true,
-      "dependencies": {
-        "pify": "^4.0.1",
-        "semver": "^5.6.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/makeerror": {
-      "version": "1.0.11",
-      "resolved": "https://registry.npmjs.org/makeerror/-/makeerror-1.0.11.tgz",
-      "integrity": "sha1-4BpckQnyr3lmDk6LlYd5AYT1qWw=",
-      "dev": true,
-      "dependencies": {
-        "tmpl": "1.0.x"
-      }
-    },
-    "node_modules/map-age-cleaner": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/map-age-cleaner/-/map-age-cleaner-0.1.3.tgz",
-      "integrity": "sha512-bJzx6nMoP6PDLPBFmg7+xRKeFZvFboMrGlxmNj9ClvX53KrmvM5bXFXEWjbz4cz1AFn+jWJ9z/DJSz7hrs0w3w==",
-      "dev": true,
-      "dependencies": {
-        "p-defer": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/map-cache": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/map-cache/-/map-cache-0.2.2.tgz",
-      "integrity": "sha1-wyq9C9ZSXZsFFkW7TyasXcmKDb8=",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/map-obj": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz",
-      "integrity": "sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0=",
-      "dev": true,
-      "optional": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/map-visit": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/map-visit/-/map-visit-1.0.0.tgz",
-      "integrity": "sha1-7Nyo8TFE5mDxtb1B8S80edmN+48=",
-      "dev": true,
-      "dependencies": {
-        "object-visit": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/matchmediaquery": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/matchmediaquery/-/matchmediaquery-0.3.1.tgz",
-      "integrity": "sha512-Hlk20WQHRIm9EE9luN1kjRjYXAQToHOIAHPJn9buxBwuhfTHoKUcX+lXBbxc85DVQfXYbEQ4HcwQdd128E3qHQ==",
-      "dependencies": {
-        "css-mediaquery": "^0.1.2"
-      }
-    },
-    "node_modules/md5": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/md5/-/md5-2.3.0.tgz",
-      "integrity": "sha512-T1GITYmFaKuO91vxyoQMFETst+O71VUPEU3ze5GNzDm0OWdP8v1ziTaAEPUr/3kLsY3Sftgz242A1SetQiDL7g==",
-      "dependencies": {
-        "charenc": "0.0.2",
-        "crypt": "0.0.2",
-        "is-buffer": "~1.1.6"
-      }
-    },
-    "node_modules/md5/node_modules/is-buffer": {
-      "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
-      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w=="
-    },
-    "node_modules/mdn-data": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz",
-      "integrity": "sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==",
-      "dev": true
-    },
-    "node_modules/media-typer": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
-      "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/mem": {
-      "version": "8.1.1",
-      "resolved": "https://registry.npmjs.org/mem/-/mem-8.1.1.tgz",
-      "integrity": "sha512-qFCFUDs7U3b8mBDPyz5EToEKoAkgCzqquIgi9nkkR9bixxOVOre+09lbuH7+9Kn2NFpm56M3GUWVbU2hQgdACA==",
-      "dev": true,
-      "dependencies": {
-        "map-age-cleaner": "^0.1.3",
-        "mimic-fn": "^3.1.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/mem/node_modules/mimic-fn": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-3.1.0.tgz",
-      "integrity": "sha512-Ysbi9uYW9hFyfrThdDEQuykN4Ey6BuwPD2kpI5ES/nFTDn/98yxYNLZJcgUAKPT/mcrLLKaGzJR9YVxJrIdASQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/memfs": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/memfs/-/memfs-3.2.2.tgz",
-      "integrity": "sha512-RE0CwmIM3CEvpcdK3rZ19BC4E6hv9kADkMN5rPduRak58cNArWLi/9jFLsa4rhsjfVxMP3v0jO7FHXq7SvFY5Q==",
-      "dev": true,
-      "dependencies": {
-        "fs-monkey": "1.0.3"
-      },
-      "engines": {
-        "node": ">= 4.0.0"
-      }
-    },
-    "node_modules/meow": {
-      "version": "3.7.0",
-      "resolved": "https://registry.npmjs.org/meow/-/meow-3.7.0.tgz",
-      "integrity": "sha1-cstmi0JSKCkKu/qFaJJYcwioAfs=",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "camelcase-keys": "^2.0.0",
-        "decamelize": "^1.1.2",
-        "loud-rejection": "^1.0.0",
-        "map-obj": "^1.0.1",
-        "minimist": "^1.1.3",
-        "normalize-package-data": "^2.3.4",
-        "object-assign": "^4.0.1",
-        "read-pkg-up": "^1.0.1",
-        "redent": "^1.0.0",
-        "trim-newlines": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/meow/node_modules/find-up": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/find-up/-/find-up-1.1.2.tgz",
-      "integrity": "sha1-ay6YIrGizgpgq2TWEOzK1TyyTQ8=",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "path-exists": "^2.0.0",
-        "pinkie-promise": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/meow/node_modules/load-json-file": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
-      "integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "graceful-fs": "^4.1.2",
-        "parse-json": "^2.2.0",
-        "pify": "^2.0.0",
-        "pinkie-promise": "^2.0.0",
-        "strip-bom": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/meow/node_modules/parse-json": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-2.2.0.tgz",
-      "integrity": "sha1-9ID0BDTvgHQfhGkJn43qGPVaTck=",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "error-ex": "^1.2.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/meow/node_modules/path-exists": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-2.1.0.tgz",
-      "integrity": "sha1-D+tsZPD8UY2adU3V77YscCJ2H0s=",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "pinkie-promise": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/meow/node_modules/path-type": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/path-type/-/path-type-1.1.0.tgz",
-      "integrity": "sha1-WcRPfuSR2nBNpBXaWkBwuk+P5EE=",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "graceful-fs": "^4.1.2",
-        "pify": "^2.0.0",
-        "pinkie-promise": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/meow/node_modules/pify": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
-      "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
-      "dev": true,
-      "optional": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/meow/node_modules/read-pkg": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
-      "integrity": "sha1-9f+qXs0pyzHAR0vKfXVra7KePyg=",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "load-json-file": "^1.0.0",
-        "normalize-package-data": "^2.3.2",
-        "path-type": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/meow/node_modules/read-pkg-up": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-1.0.1.tgz",
-      "integrity": "sha1-nWPBMnbAZZGNV/ACpX9AobZD+wI=",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "find-up": "^1.0.0",
-        "read-pkg": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/meow/node_modules/strip-bom": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-2.0.0.tgz",
-      "integrity": "sha1-YhmoVhZSBJHzV4i9vxRHqZx+aw4=",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "is-utf8": "^0.2.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/merge-descriptors": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
-      "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E=",
-      "dev": true
-    },
-    "node_modules/merge-stream": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
-      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
-      "dev": true
-    },
-    "node_modules/merge2": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
-      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
-      "dev": true,
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/methods": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
-      "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/microevent.ts": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/microevent.ts/-/microevent.ts-0.1.1.tgz",
-      "integrity": "sha512-jo1OfR4TaEwd5HOrt5+tAZ9mqT4jmpNAusXtyfNzqVm9uiSYFZlKM1wYL4oU7azZW/PxQW53wM0S6OR1JHNa2g==",
-      "dev": true
-    },
-    "node_modules/micromatch": {
-      "version": "3.1.10",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz",
-      "integrity": "sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==",
-      "dev": true,
-      "dependencies": {
-        "arr-diff": "^4.0.0",
-        "array-unique": "^0.3.2",
-        "braces": "^2.3.1",
-        "define-property": "^2.0.2",
-        "extend-shallow": "^3.0.2",
-        "extglob": "^2.0.4",
-        "fragment-cache": "^0.2.1",
-        "kind-of": "^6.0.2",
-        "nanomatch": "^1.2.9",
-        "object.pick": "^1.3.0",
-        "regex-not": "^1.0.0",
-        "snapdragon": "^0.8.1",
-        "to-regex": "^3.0.2"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/micromist": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/micromist/-/micromist-1.1.0.tgz",
-      "integrity": "sha512-+CQ76pabE9egniSEdmDuH+j2cYyIBKP97kujG8ZLZyLCRq5ExwtIy4DPHPFrq4jVbhMRBnyjuH50KU9Ohs8QCg==",
-      "dev": true,
-      "dependencies": {
-        "lodash.camelcase": "^4.3.0"
-      }
-    },
-    "node_modules/mime": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
-      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
-      "dev": true,
-      "bin": {
-        "mime": "cli.js"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/mime-db": {
-      "version": "1.44.0",
-      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.44.0.tgz",
-      "integrity": "sha512-/NOTfLrsPBVeH7YtFPgsVWveuL+4SjjYxaQ1xtM1KMFj7HdxlBlxeyNLzhyJVx7r4rZGJAZ/6lkKCitSc/Nmpg==",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/mime-types": {
-      "version": "2.1.27",
-      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.27.tgz",
-      "integrity": "sha512-JIhqnCasI9yD+SsmkquHBxTSEuZdQX5BuQnS2Vc7puQQQ+8yiP5AY5uWhpdv4YL4VM5c6iliiYWPgJ/nJQLp7w==",
-      "dev": true,
-      "dependencies": {
-        "mime-db": "1.44.0"
-      },
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/mimic-fn": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
-      "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/mimic-response": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-1.0.1.tgz",
-      "integrity": "sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ==",
-      "dev": true,
-      "optional": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/min-indent": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
-      "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/mini-create-react-context": {
-      "version": "0.3.3",
-      "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.3.3.tgz",
-      "integrity": "sha512-TtF6hZE59SGmS4U8529qB+jJFeW6asTLDIpPgvPLSCsooAwJS7QprHIFTqv9/Qh3NdLwQxFYgiHX5lqb6jqzPA==",
-      "dependencies": {
-        "@babel/runtime": "^7.12.1",
-        "tiny-warning": "^1.0.3"
-      }
-    },
-    "node_modules/mini-create-react-context/node_modules/@babel/runtime": {
-      "version": "7.12.5",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.12.5.tgz",
-      "integrity": "sha512-plcc+hbExy3McchJCEQG3knOsuh3HH+Prx1P6cLIkET/0dLuQDEnrT+s27Axgc9bqfsmNUNHfscgMUdBpC9xfg==",
-      "dependencies": {
-        "regenerator-runtime": "^0.13.4"
-      }
-    },
-    "node_modules/mini-css-extract-plugin": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-1.6.0.tgz",
-      "integrity": "sha512-nPFKI7NSy6uONUo9yn2hIfb9vyYvkFu95qki0e21DQ9uaqNKDP15DGpK0KnV6wDroWxPHtExrdEwx/yDQ8nVRw==",
-      "dev": true,
-      "dependencies": {
-        "loader-utils": "^2.0.0",
-        "schema-utils": "^3.0.0",
-        "webpack-sources": "^1.1.0"
-      },
-      "engines": {
-        "node": ">= 10.13.0"
-      }
-    },
-    "node_modules/mini-css-extract-plugin/node_modules/ajv": {
-      "version": "6.12.6",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-      "dev": true,
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "fast-json-stable-stringify": "^2.0.0",
-        "json-schema-traverse": "^0.4.1",
-        "uri-js": "^4.2.2"
-      }
-    },
-    "node_modules/mini-css-extract-plugin/node_modules/schema-utils": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.0.tgz",
-      "integrity": "sha512-tTEaeYkyIhEZ9uWgAjDerWov3T9MgX8dhhy2r0IGeeX4W8ngtGl1++dUve/RUqzuaASSh7shwCDJjEzthxki8w==",
-      "dev": true,
-      "dependencies": {
-        "@types/json-schema": "^7.0.7",
-        "ajv": "^6.12.5",
-        "ajv-keywords": "^3.5.2"
-      },
-      "engines": {
-        "node": ">= 10.13.0"
-      }
-    },
-    "node_modules/minimalistic-assert": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
-      "integrity": "sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==",
-      "dev": true
-    },
-    "node_modules/minimatch": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
-      "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
-      "dependencies": {
-        "brace-expansion": "^1.1.7"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
-    "node_modules/minimist": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
-      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
-      "dev": true
-    },
-    "node_modules/mixin-deep": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.2.tgz",
-      "integrity": "sha512-WRoDn//mXBiJ1H40rqa3vH0toePwSsGb45iInWlTySa+Uu4k3tYUSxa2v1KqAiLtvlrSzaExqS1gtk96A9zvEA==",
-      "dev": true,
-      "dependencies": {
-        "for-in": "^1.0.2",
-        "is-extendable": "^1.0.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/mixin-deep/node_modules/is-extendable": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
-      "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
-      "dev": true,
-      "dependencies": {
-        "is-plain-object": "^2.0.4"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/mkdirp": {
-      "version": "0.5.5",
-      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz",
-      "integrity": "sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==",
-      "dev": true,
-      "dependencies": {
-        "minimist": "^1.2.5"
-      },
-      "bin": {
-        "mkdirp": "bin/cmd.js"
-      }
-    },
-    "node_modules/moment": {
-      "version": "2.27.0",
-      "resolved": "https://registry.npmjs.org/moment/-/moment-2.27.0.tgz",
-      "integrity": "sha512-al0MUK7cpIcglMv3YF13qSgdAIqxHTO7brRtaz3DlSULbqfazqkc5kEjNrLDOM7fsjshoFIihnU8snrP7zUvhQ==",
-      "engines": {
-        "node": "*"
-      }
-    },
-    "node_modules/mozjpeg": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/mozjpeg/-/mozjpeg-7.1.0.tgz",
-      "integrity": "sha512-A6nVpI33DVi04HxatRx3PZTeVAOP1AC/T/5kXEvP0U8F+J11mmFFDv46BM2j5/cEyzDDtK8ptHeBSphNMrQLqA==",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "bin-build": "^3.0.0",
-        "bin-wrapper": "^4.0.0",
-        "logalot": "^2.1.0"
-      },
-      "bin": {
-        "mozjpeg": "cli.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/ms": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
-      "dev": true
-    },
-    "node_modules/multicast-dns": {
-      "version": "6.2.3",
-      "resolved": "https://registry.npmjs.org/multicast-dns/-/multicast-dns-6.2.3.tgz",
-      "integrity": "sha512-ji6J5enbMyGRHIAkAOu3WdV8nggqviKCEKtXcOqfphZZtQrmHKycfynJ2V7eVPUA4NhJ6V7Wf4TmGbTwKE9B6g==",
-      "dev": true,
-      "dependencies": {
-        "dns-packet": "^1.3.1",
-        "thunky": "^1.0.2"
-      },
-      "bin": {
-        "multicast-dns": "cli.js"
-      }
-    },
-    "node_modules/multicast-dns-service-types": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/multicast-dns-service-types/-/multicast-dns-service-types-1.1.0.tgz",
-      "integrity": "sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE=",
-      "dev": true
-    },
-    "node_modules/mute-stream": {
-      "version": "0.0.8",
-      "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz",
-      "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==",
-      "dev": true
-    },
-    "node_modules/nan": {
-      "version": "2.14.1",
-      "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.1.tgz",
-      "integrity": "sha512-isWHgVjnFjh2x2yuJ/tj3JbwoHu3UC2dX5G/88Cm24yB6YopVgxvBObDY7n5xW6ExmFhJpSEQqFPvq9zaXc8Jw==",
-      "dev": true,
-      "optional": true
-    },
-    "node_modules/nanoid": {
-      "version": "3.1.23",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.23.tgz",
-      "integrity": "sha512-FiB0kzdP0FFVGDKlRLEQ1BgDzU87dy5NnzjeW9YZNt+/c3+q82EQDUwniSAUxp/F0gFNI1ZhKU1FqYsMuqZVnw==",
-      "dev": true,
-      "bin": {
-        "nanoid": "bin/nanoid.cjs"
-      },
-      "engines": {
-        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
-      }
-    },
-    "node_modules/nanomatch": {
-      "version": "1.2.13",
-      "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz",
-      "integrity": "sha512-fpoe2T0RbHwBTBUOftAfBPaDEi06ufaUai0mE6Yn1kacc3SnTErfb/h+X94VXzI64rKFHYImXSvdwGGCmwOqCA==",
-      "dev": true,
-      "dependencies": {
-        "arr-diff": "^4.0.0",
-        "array-unique": "^0.3.2",
-        "define-property": "^2.0.2",
-        "extend-shallow": "^3.0.2",
-        "fragment-cache": "^0.2.1",
-        "is-windows": "^1.0.2",
-        "kind-of": "^6.0.2",
-        "object.pick": "^1.3.0",
-        "regex-not": "^1.0.0",
-        "snapdragon": "^0.8.1",
-        "to-regex": "^3.0.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/natural-compare": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
-      "integrity": "sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=",
-      "dev": true
-    },
-    "node_modules/negotiator": {
-      "version": "0.6.2",
-      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz",
-      "integrity": "sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw==",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/neo-async": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
-      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
-      "dev": true
-    },
-    "node_modules/new-relic-source-map-webpack-plugin": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/new-relic-source-map-webpack-plugin/-/new-relic-source-map-webpack-plugin-1.2.0.tgz",
-      "integrity": "sha512-bsF07nt2mlauMhxdKW3aIirazreq5muRLHSxubQ18XVqYR2ta0N6CghwHNDJsivY1j/Qrt22FNFuz0GZrFPbTw==",
-      "dev": true,
-      "dependencies": {
-        "@newrelic/publish-sourcemap": "^4.4.1"
-      }
-    },
-    "node_modules/nice-try": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
-      "integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==",
-      "dev": true
-    },
-    "node_modules/no-case": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
-      "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
-      "dev": true,
-      "dependencies": {
-        "lower-case": "^2.0.2",
-        "tslib": "^2.0.3"
-      }
-    },
-    "node_modules/no-case/node_modules/tslib": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
-      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
-      "dev": true
-    },
-    "node_modules/node-fetch": {
-      "version": "2.6.0",
-      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.0.tgz",
-      "integrity": "sha512-8dG4H5ujfvFiqDmVu9fQ5bOHUC15JMjMY/Zumv26oOvvVJjM67KF8koCWIabKQ1GJIa9r2mMZscBq/TbdOcmNA==",
-      "dev": true,
-      "engines": {
-        "node": "4.x || >=6.0.0"
-      }
-    },
-    "node_modules/node-forge": {
-      "version": "0.10.0",
-      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.10.0.tgz",
-      "integrity": "sha512-PPmu8eEeG9saEUvI97fm4OYxXVB6bFvyNTyiUOBichBpFG8A1Ljw3bY62+5oOjDEMHRnd0Y7HQ+x7uzxOzC6JA==",
-      "dev": true,
-      "engines": {
-        "node": ">= 6.0.0"
-      }
-    },
-    "node_modules/node-int64": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/node-int64/-/node-int64-0.4.0.tgz",
-      "integrity": "sha1-h6kGXNs1XTGC2PlM4RGIuCXGijs=",
-      "dev": true
-    },
-    "node_modules/node-modules-regexp": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/node-modules-regexp/-/node-modules-regexp-1.0.0.tgz",
-      "integrity": "sha1-jZ2+KJZKSsVxLpExZCEHxx6Q7EA=",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/node-notifier": {
-      "version": "8.0.2",
-      "resolved": "https://registry.npmjs.org/node-notifier/-/node-notifier-8.0.2.tgz",
-      "integrity": "sha512-oJP/9NAdd9+x2Q+rfphB2RJCHjod70RcRLjosiPMMu5gjIfwVnOUGq2nbTjTUbmy0DJ/tFIVT30+Qe3nzl4TJg==",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "growly": "^1.3.0",
-        "is-wsl": "^2.2.0",
-        "semver": "^7.3.2",
-        "shellwords": "^0.1.1",
-        "uuid": "^8.3.0",
-        "which": "^2.0.2"
-      }
-    },
-    "node_modules/node-notifier/node_modules/semver": {
-      "version": "7.3.5",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
-      "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "lru-cache": "^6.0.0"
-      },
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/node-notifier/node_modules/uuid": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
-      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
-      "dev": true,
-      "optional": true,
-      "bin": {
-        "uuid": "dist/bin/uuid"
-      }
-    },
-    "node_modules/node-notifier/node_modules/which": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "isexe": "^2.0.0"
-      },
-      "bin": {
-        "node-which": "bin/node-which"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/node-releases": {
-      "version": "1.1.73",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.73.tgz",
-      "integrity": "sha512-uW7fodD6pyW2FZNZnp/Z3hvWKeEW1Y8R1+1CnErE8cXFXzl5blBOoVB41CvMer6P6Q0S5FXDwcHgFd1Wj0U9zg==",
-      "dev": true
-    },
-    "node_modules/normalize-package-data": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz",
-      "integrity": "sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==",
-      "dev": true,
-      "dependencies": {
-        "hosted-git-info": "^2.1.4",
-        "resolve": "^1.10.0",
-        "semver": "2 || 3 || 4 || 5",
-        "validate-npm-package-license": "^3.0.1"
-      }
-    },
-    "node_modules/normalize-path": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
-      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/normalize-range": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
-      "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/normalize-url": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-6.1.0.tgz",
-      "integrity": "sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==",
-      "dev": true,
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/npm-conf": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/npm-conf/-/npm-conf-1.1.3.tgz",
-      "integrity": "sha512-Yic4bZHJOt9RCFbRP3GgpqhScOY4HH3V2P8yBj6CeYq118Qr+BLXqT2JvpJ00mryLESpgOxf5XlFv4ZjXxLScw==",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "config-chain": "^1.1.11",
-        "pify": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/npm-conf/node_modules/pify": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
-      "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
-      "dev": true,
-      "optional": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/npm-run-path": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz",
-      "integrity": "sha1-NakjLfo11wZ7TLLd8jV7GHFTbF8=",
-      "dev": true,
-      "dependencies": {
-        "path-key": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/nth-check": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-1.0.2.tgz",
-      "integrity": "sha512-WeBOdju8SnzPN5vTUJYxYUxLeXpCaVP5i5e0LF8fg7WORF2Wd7wFX/pk0tYZk7s8T+J7VLy0Da6J1+wCT0AtHg==",
-      "dev": true,
-      "dependencies": {
-        "boolbase": "~1.0.0"
-      }
-    },
-    "node_modules/number-is-nan": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
-      "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/nwsapi": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.0.tgz",
-      "integrity": "sha512-h2AatdwYH+JHiZpv7pt/gSX1XoRGb7L/qSIeuqA6GwYoF9w1vP1cw42TO0aI2pNyshRK5893hNSl+1//vHK7hQ==",
-      "dev": true
-    },
-    "node_modules/oauth-sign": {
-      "version": "0.9.0",
-      "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.9.0.tgz",
-      "integrity": "sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==",
-      "dev": true,
-      "engines": {
-        "node": "*"
-      }
-    },
-    "node_modules/object-assign": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/object-copy": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/object-copy/-/object-copy-0.1.0.tgz",
-      "integrity": "sha1-fn2Fi3gb18mRpBupde04EnVOmYw=",
-      "dev": true,
-      "dependencies": {
-        "copy-descriptor": "^0.1.0",
-        "define-property": "^0.2.5",
-        "kind-of": "^3.0.3"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/object-copy/node_modules/define-property": {
-      "version": "0.2.5",
-      "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
-      "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
-      "dev": true,
-      "dependencies": {
-        "is-descriptor": "^0.1.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/object-copy/node_modules/is-buffer": {
-      "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
-      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
-      "dev": true
-    },
-    "node_modules/object-copy/node_modules/kind-of": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-      "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
-      "dev": true,
-      "dependencies": {
-        "is-buffer": "^1.1.5"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/object-filter": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/object-filter/-/object-filter-1.0.2.tgz",
-      "integrity": "sha1-rwt5f/6+r4pSxmN87b6IFs/sG8g="
-    },
-    "node_modules/object-inspect": {
-      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.8.0.tgz",
-      "integrity": "sha512-jLdtEOB112fORuypAyl/50VRVIBIdVQOSUUGQHzJ4xBSbit81zRarz7GThkEFZy1RceYrWYcPcBFPQwHyAc1gA=="
-    },
-    "node_modules/object-is": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.5.tgz",
-      "integrity": "sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==",
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/object-keys": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
-      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/object-visit": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/object-visit/-/object-visit-1.0.1.tgz",
-      "integrity": "sha1-95xEk68MU3e1n+OdOV5BBC3QRbs=",
-      "dev": true,
-      "dependencies": {
-        "isobject": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/object.assign": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.0.tgz",
-      "integrity": "sha512-exHJeq6kBKj58mqGyTQ9DFvrZC/eR6OwxzoM9YRoGBqrXYonaFyGiFMuc9VZrXf7DarreEwMpurG3dd+CNyW5w==",
-      "dependencies": {
-        "define-properties": "^1.1.2",
-        "function-bind": "^1.1.1",
-        "has-symbols": "^1.0.0",
-        "object-keys": "^1.0.11"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/object.entries": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.4.tgz",
-      "integrity": "sha512-h4LWKWE+wKQGhtMjZEBud7uLGhqyLwj8fpHOarZhD2uY3C9cRtk57VQ89ke3moByLXMedqs3XCHzyb4AmA2DjA==",
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.18.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/object.entries/node_modules/es-abstract": {
-      "version": "1.18.3",
-      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.18.3.tgz",
-      "integrity": "sha512-nQIr12dxV7SSxE6r6f1l3DtAeEYdsGpps13dR0TwJg1S8gyp4ZPgy3FZcHBgbiQqnoqSTb+oC+kO4UQ0C/J8vw==",
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "es-to-primitive": "^1.2.1",
-        "function-bind": "^1.1.1",
-        "get-intrinsic": "^1.1.1",
-        "has": "^1.0.3",
-        "has-symbols": "^1.0.2",
-        "is-callable": "^1.2.3",
-        "is-negative-zero": "^2.0.1",
-        "is-regex": "^1.1.3",
-        "is-string": "^1.0.6",
-        "object-inspect": "^1.10.3",
-        "object-keys": "^1.1.1",
-        "object.assign": "^4.1.2",
-        "string.prototype.trimend": "^1.0.4",
-        "string.prototype.trimstart": "^1.0.4",
-        "unbox-primitive": "^1.0.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/object.entries/node_modules/has-symbols": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.2.tgz",
-      "integrity": "sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw==",
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/object.entries/node_modules/is-callable": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.3.tgz",
-      "integrity": "sha512-J1DcMe8UYTBSrKezuIUTUwjXsho29693unXM2YhJUTR2txK/eG47bvNa/wipPFmZFgr/N6f1GA66dv0mEyTIyQ==",
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/object.entries/node_modules/is-regex": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.3.tgz",
-      "integrity": "sha512-qSVXFz28HM7y+IWX6vLCsexdlvzT1PJNFSBuaQLQ5o0IEw8UDYW6/2+eCMVyIsbM8CNLX2a/QWmSpyxYEHY7CQ==",
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "has-symbols": "^1.0.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/object.entries/node_modules/object-inspect": {
-      "version": "1.10.3",
-      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.10.3.tgz",
-      "integrity": "sha512-e5mCJlSH7poANfC8z8S9s9S2IN5/4Zb3aZ33f5s8YqoazCFzNLloLU8r5VCG+G7WoqLvAAZoVMcy3tp/3X0Plw=="
-    },
-    "node_modules/object.entries/node_modules/object.assign": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.2.tgz",
-      "integrity": "sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==",
-      "dependencies": {
-        "call-bind": "^1.0.0",
-        "define-properties": "^1.1.3",
-        "has-symbols": "^1.0.1",
-        "object-keys": "^1.1.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/object.entries/node_modules/string.prototype.trimend": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.4.tgz",
-      "integrity": "sha512-y9xCjw1P23Awk8EvTpcyL2NIr1j7wJ39f+k6lvRnSMz+mz9CGz9NYPelDk42kOz6+ql8xjfK8oYzy3jAP5QU5A==",
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3"
-      }
-    },
-    "node_modules/object.entries/node_modules/string.prototype.trimstart": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.4.tgz",
-      "integrity": "sha512-jh6e984OBfvxS50tdY2nRZnoC5/mLFKOREQfw8t5yytkoUsJRNxvI/E39qu1sD0OtWI3OC0XgKSmcWwziwYuZw==",
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3"
-      }
-    },
-    "node_modules/object.entries/node_modules/unbox-primitive": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz",
-      "integrity": "sha512-tZU/3NqK3dA5gpE1KtyiJUrEB0lxnGkMFHptJ7q6ewdZ8s12QrODwNbhIJStmJkd1QDXa1NRA8aF2A1zk/Ypyw==",
-      "dependencies": {
-        "function-bind": "^1.1.1",
-        "has-bigints": "^1.0.1",
-        "has-symbols": "^1.0.2",
-        "which-boxed-primitive": "^1.0.2"
-      }
-    },
-    "node_modules/object.fromentries": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.4.tgz",
-      "integrity": "sha512-EsFBshs5RUUpQEY1D4q/m59kMfz4YJvxuNCJcv/jWwOJr34EaVnG11ZrZa0UHB3wnzV1wx8m58T4hQL8IuNXlQ==",
-      "dev": true,
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.18.0-next.2",
-        "has": "^1.0.3"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/object.fromentries/node_modules/es-abstract": {
-      "version": "1.18.3",
-      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.18.3.tgz",
-      "integrity": "sha512-nQIr12dxV7SSxE6r6f1l3DtAeEYdsGpps13dR0TwJg1S8gyp4ZPgy3FZcHBgbiQqnoqSTb+oC+kO4UQ0C/J8vw==",
-      "dev": true,
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "es-to-primitive": "^1.2.1",
-        "function-bind": "^1.1.1",
-        "get-intrinsic": "^1.1.1",
-        "has": "^1.0.3",
-        "has-symbols": "^1.0.2",
-        "is-callable": "^1.2.3",
-        "is-negative-zero": "^2.0.1",
-        "is-regex": "^1.1.3",
-        "is-string": "^1.0.6",
-        "object-inspect": "^1.10.3",
-        "object-keys": "^1.1.1",
-        "object.assign": "^4.1.2",
-        "string.prototype.trimend": "^1.0.4",
-        "string.prototype.trimstart": "^1.0.4",
-        "unbox-primitive": "^1.0.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/object.fromentries/node_modules/has-symbols": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.2.tgz",
-      "integrity": "sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw==",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/object.fromentries/node_modules/is-callable": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.3.tgz",
-      "integrity": "sha512-J1DcMe8UYTBSrKezuIUTUwjXsho29693unXM2YhJUTR2txK/eG47bvNa/wipPFmZFgr/N6f1GA66dv0mEyTIyQ==",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/object.fromentries/node_modules/is-regex": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.3.tgz",
-      "integrity": "sha512-qSVXFz28HM7y+IWX6vLCsexdlvzT1PJNFSBuaQLQ5o0IEw8UDYW6/2+eCMVyIsbM8CNLX2a/QWmSpyxYEHY7CQ==",
-      "dev": true,
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "has-symbols": "^1.0.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/object.fromentries/node_modules/object-inspect": {
-      "version": "1.10.3",
-      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.10.3.tgz",
-      "integrity": "sha512-e5mCJlSH7poANfC8z8S9s9S2IN5/4Zb3aZ33f5s8YqoazCFzNLloLU8r5VCG+G7WoqLvAAZoVMcy3tp/3X0Plw==",
-      "dev": true
-    },
-    "node_modules/object.fromentries/node_modules/object.assign": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.2.tgz",
-      "integrity": "sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==",
-      "dev": true,
-      "dependencies": {
-        "call-bind": "^1.0.0",
-        "define-properties": "^1.1.3",
-        "has-symbols": "^1.0.1",
-        "object-keys": "^1.1.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/object.fromentries/node_modules/string.prototype.trimend": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.4.tgz",
-      "integrity": "sha512-y9xCjw1P23Awk8EvTpcyL2NIr1j7wJ39f+k6lvRnSMz+mz9CGz9NYPelDk42kOz6+ql8xjfK8oYzy3jAP5QU5A==",
-      "dev": true,
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3"
-      }
-    },
-    "node_modules/object.fromentries/node_modules/string.prototype.trimstart": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.4.tgz",
-      "integrity": "sha512-jh6e984OBfvxS50tdY2nRZnoC5/mLFKOREQfw8t5yytkoUsJRNxvI/E39qu1sD0OtWI3OC0XgKSmcWwziwYuZw==",
-      "dev": true,
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3"
-      }
-    },
-    "node_modules/object.getownpropertydescriptors": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.1.0.tgz",
-      "integrity": "sha512-Z53Oah9A3TdLoblT7VKJaTDdXdT+lQO+cNpKVnya5JDe9uLvzu1YyY1yFDFrcxrlRgWrEFH0jJtD/IbuwjcEVg==",
-      "dev": true,
-      "dependencies": {
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.17.0-next.1"
-      },
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/object.pick": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/object.pick/-/object.pick-1.3.0.tgz",
-      "integrity": "sha1-h6EKxMFpS9Lhy/U1kaZhQftd10c=",
-      "dev": true,
-      "dependencies": {
-        "isobject": "^3.0.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/object.values": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.4.tgz",
-      "integrity": "sha512-TnGo7j4XSnKQoK3MfvkzqKCi0nVe/D9I9IjwTNYdb/fxYHpjrluHVOgw0AF6jrRFGMPHdfuidR09tIDiIvnaSg==",
-      "dev": true,
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.18.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/object.values/node_modules/es-abstract": {
-      "version": "1.18.3",
-      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.18.3.tgz",
-      "integrity": "sha512-nQIr12dxV7SSxE6r6f1l3DtAeEYdsGpps13dR0TwJg1S8gyp4ZPgy3FZcHBgbiQqnoqSTb+oC+kO4UQ0C/J8vw==",
-      "dev": true,
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "es-to-primitive": "^1.2.1",
-        "function-bind": "^1.1.1",
-        "get-intrinsic": "^1.1.1",
-        "has": "^1.0.3",
-        "has-symbols": "^1.0.2",
-        "is-callable": "^1.2.3",
-        "is-negative-zero": "^2.0.1",
-        "is-regex": "^1.1.3",
-        "is-string": "^1.0.6",
-        "object-inspect": "^1.10.3",
-        "object-keys": "^1.1.1",
-        "object.assign": "^4.1.2",
-        "string.prototype.trimend": "^1.0.4",
-        "string.prototype.trimstart": "^1.0.4",
-        "unbox-primitive": "^1.0.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/object.values/node_modules/has-symbols": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.2.tgz",
-      "integrity": "sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw==",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/object.values/node_modules/is-callable": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.3.tgz",
-      "integrity": "sha512-J1DcMe8UYTBSrKezuIUTUwjXsho29693unXM2YhJUTR2txK/eG47bvNa/wipPFmZFgr/N6f1GA66dv0mEyTIyQ==",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/object.values/node_modules/is-regex": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.3.tgz",
-      "integrity": "sha512-qSVXFz28HM7y+IWX6vLCsexdlvzT1PJNFSBuaQLQ5o0IEw8UDYW6/2+eCMVyIsbM8CNLX2a/QWmSpyxYEHY7CQ==",
-      "dev": true,
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "has-symbols": "^1.0.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/object.values/node_modules/object-inspect": {
-      "version": "1.10.3",
-      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.10.3.tgz",
-      "integrity": "sha512-e5mCJlSH7poANfC8z8S9s9S2IN5/4Zb3aZ33f5s8YqoazCFzNLloLU8r5VCG+G7WoqLvAAZoVMcy3tp/3X0Plw==",
-      "dev": true
-    },
-    "node_modules/object.values/node_modules/object.assign": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.2.tgz",
-      "integrity": "sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==",
-      "dev": true,
-      "dependencies": {
-        "call-bind": "^1.0.0",
-        "define-properties": "^1.1.3",
-        "has-symbols": "^1.0.1",
-        "object-keys": "^1.1.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/object.values/node_modules/string.prototype.trimend": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.4.tgz",
-      "integrity": "sha512-y9xCjw1P23Awk8EvTpcyL2NIr1j7wJ39f+k6lvRnSMz+mz9CGz9NYPelDk42kOz6+ql8xjfK8oYzy3jAP5QU5A==",
-      "dev": true,
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3"
-      }
-    },
-    "node_modules/object.values/node_modules/string.prototype.trimstart": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.4.tgz",
-      "integrity": "sha512-jh6e984OBfvxS50tdY2nRZnoC5/mLFKOREQfw8t5yytkoUsJRNxvI/E39qu1sD0OtWI3OC0XgKSmcWwziwYuZw==",
-      "dev": true,
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3"
-      }
-    },
-    "node_modules/obuf": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz",
-      "integrity": "sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==",
-      "dev": true
-    },
-    "node_modules/on-finished": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
-      "integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=",
-      "dev": true,
-      "dependencies": {
-        "ee-first": "1.1.1"
-      },
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/on-headers": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.0.2.tgz",
-      "integrity": "sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/once": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
-      "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
-      "dependencies": {
-        "wrappy": "1"
-      }
-    },
-    "node_modules/onetime": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
-      "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
-      "dev": true,
-      "dependencies": {
-        "mimic-fn": "^2.1.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/open": {
-      "version": "7.4.2",
-      "resolved": "https://registry.npmjs.org/open/-/open-7.4.2.tgz",
-      "integrity": "sha512-MVHddDVweXZF3awtlAS+6pgKLlm/JgxZ90+/NBurBoQctVOOB/zDdVjcyPzQ+0laDGbsWgrRkflI65sQeOgT9Q==",
-      "dev": true,
-      "dependencies": {
-        "is-docker": "^2.0.0",
-        "is-wsl": "^2.1.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/opencollective-postinstall": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/opencollective-postinstall/-/opencollective-postinstall-2.0.3.tgz",
-      "integrity": "sha512-8AV/sCtuzUeTo8gQK5qDZzARrulB3egtLzFgteqB2tcT4Mw7B8Kt7JcDHmltjz6FOAHsvTevk70gZEbhM4ZS9Q==",
-      "dev": true,
-      "bin": {
-        "opencollective-postinstall": "index.js"
-      }
-    },
-    "node_modules/opener": {
-      "version": "1.5.2",
-      "resolved": "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz",
-      "integrity": "sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==",
-      "dev": true,
-      "bin": {
-        "opener": "bin/opener-bin.js"
-      }
-    },
-    "node_modules/optionator": {
-      "version": "0.8.3",
-      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.3.tgz",
-      "integrity": "sha512-+IW9pACdk3XWmmTXG8m3upGUJst5XRGzxMRjXzAuJ1XnIFNvfhjjIuYkDvysnPQ7qzqVzLt78BCruntqRhWQbA==",
-      "dev": true,
-      "dependencies": {
-        "deep-is": "~0.1.3",
-        "fast-levenshtein": "~2.0.6",
-        "levn": "~0.3.0",
-        "prelude-ls": "~1.1.2",
-        "type-check": "~0.3.2",
-        "word-wrap": "~1.2.3"
-      },
-      "engines": {
-        "node": ">= 0.8.0"
-      }
-    },
-    "node_modules/optipng-bin": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/optipng-bin/-/optipng-bin-7.0.0.tgz",
-      "integrity": "sha512-mesUAwfedu5p9gRQwlYgD6Svw5IH3VUIWDJj/9cNpP3yFNbbEVqkTMWYhrIEn/cxmbGA3LpZrdoV2Yl8OfmnIA==",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "bin-build": "^3.0.0",
-        "bin-wrapper": "^4.0.0",
-        "logalot": "^2.0.0"
-      },
-      "bin": {
-        "optipng": "cli.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/os-filter-obj": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/os-filter-obj/-/os-filter-obj-2.0.0.tgz",
-      "integrity": "sha512-uksVLsqG3pVdzzPvmAHpBK0wKxYItuzZr7SziusRPoz67tGV8rL1szZ6IdeUrbqLjGDwApBtN29eEE3IqGHOjg==",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "arch": "^2.1.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/os-shim": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/os-shim/-/os-shim-0.1.3.tgz",
-      "integrity": "sha1-a2LDeRz3kJ6jXtRuF2WLtBfLORc=",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.4.0"
-      }
-    },
-    "node_modules/os-tmpdir": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
-      "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/ow": {
-      "version": "0.17.0",
-      "resolved": "https://registry.npmjs.org/ow/-/ow-0.17.0.tgz",
-      "integrity": "sha512-i3keDzDQP5lWIe4oODyDFey1qVrq2hXKTuTH2VpqwpYtzPiKZt2ziRI4NBQmgW40AnV5Euz17OyWweCb+bNEQA==",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "type-fest": "^0.11.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/ow/node_modules/type-fest": {
-      "version": "0.11.0",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.11.0.tgz",
-      "integrity": "sha512-OdjXJxnCN1AvyLSzeKIgXTXxV+99ZuXl3Hpo9XpJAv9MBcHrrJOQ5kV7ypXOuQie+AmWG25hLbiKdwYTifzcfQ==",
-      "dev": true,
-      "optional": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/p-cancelable": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/p-cancelable/-/p-cancelable-0.3.0.tgz",
-      "integrity": "sha512-RVbZPLso8+jFeq1MfNvgXtCRED2raz/dKpacfTNxsx6pLEpEomM7gah6VeHSYV3+vo0OAi4MkArtQcWWXuQoyw==",
-      "dev": true,
-      "optional": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/p-defer": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/p-defer/-/p-defer-1.0.0.tgz",
-      "integrity": "sha1-n26xgvbJqozXQwBKfU+WsZaw+ww=",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/p-each-series": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/p-each-series/-/p-each-series-2.2.0.tgz",
-      "integrity": "sha512-ycIL2+1V32th+8scbpTvyHNaHe02z0sjgh91XXjAk+ZeXoPN4Z46DVUnzdso0aX4KckKw0FNNFHdjZ2UsZvxiA==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/p-event": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/p-event/-/p-event-1.3.0.tgz",
-      "integrity": "sha1-jmtPT2XHK8W2/ii3XtqHT5akoIU=",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "p-timeout": "^1.1.1"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/p-finally": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz",
-      "integrity": "sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4=",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/p-is-promise": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/p-is-promise/-/p-is-promise-1.1.0.tgz",
-      "integrity": "sha1-nJRWmJ6fZYgBewQ01WCXZ1w9oF4=",
-      "dev": true,
-      "optional": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/p-limit": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
-      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
-      "dev": true,
-      "dependencies": {
-        "p-try": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/p-locate": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
-      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
-      "dev": true,
-      "dependencies": {
-        "p-limit": "^2.2.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/p-map": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/p-map/-/p-map-2.1.0.tgz",
-      "integrity": "sha512-y3b8Kpd8OAN444hxfBbFfj1FY/RjtTd8tzYwhUqNYXx0fXx2iX4maP4Qr6qhIKbQXI02wTLAda4fYUbDagTUFw==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/p-map-series": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/p-map-series/-/p-map-series-1.0.0.tgz",
-      "integrity": "sha1-v5j+V1cFZYqeE1G++4WuTB8Hvco=",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "p-reduce": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/p-pipe": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/p-pipe/-/p-pipe-3.1.0.tgz",
-      "integrity": "sha512-08pj8ATpzMR0Y80x50yJHn37NF6vjrqHutASaX5LiH5npS9XPvrUmscd9MF5R4fuYRHOxQR1FfMIlF7AzwoPqw==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/p-reduce": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/p-reduce/-/p-reduce-1.0.0.tgz",
-      "integrity": "sha1-GMKw3ZNqRpClKfgjH1ig/bakffo=",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/p-retry": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/p-retry/-/p-retry-4.6.0.tgz",
-      "integrity": "sha512-SAHbQEwg3X5DRNaLmWjT+DlGc93ba5i+aP3QLfVNDncQEQO4xjbYW4N/lcVTSuP0aJietGfx2t94dJLzfBMpXw==",
-      "dev": true,
-      "dependencies": {
-        "@types/retry": "^0.12.0",
-        "retry": "^0.13.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/p-timeout": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/p-timeout/-/p-timeout-1.2.1.tgz",
-      "integrity": "sha1-XrOzU7f86Z8QGhA4iAuwVOu+o4Y=",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "p-finally": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/p-try": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
-      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/param-case": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",
-      "integrity": "sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==",
-      "dev": true,
-      "dependencies": {
-        "dot-case": "^3.0.4",
-        "tslib": "^2.0.3"
-      }
-    },
-    "node_modules/param-case/node_modules/tslib": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
-      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
-      "dev": true
-    },
-    "node_modules/parent-module": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
-      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
-      "dev": true,
-      "dependencies": {
-        "callsites": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/parse-json": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
-      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
-      "dev": true,
-      "dependencies": {
-        "@babel/code-frame": "^7.0.0",
-        "error-ex": "^1.3.1",
-        "json-parse-even-better-errors": "^2.3.0",
-        "lines-and-columns": "^1.1.6"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/parse5": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz",
-      "integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==",
-      "dev": true
-    },
-    "node_modules/parseurl": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
-      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/pascal-case": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz",
-      "integrity": "sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==",
-      "dev": true,
-      "dependencies": {
-        "no-case": "^3.0.4",
-        "tslib": "^2.0.3"
-      }
-    },
-    "node_modules/pascal-case/node_modules/tslib": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
-      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
-      "dev": true
-    },
-    "node_modules/pascalcase": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/pascalcase/-/pascalcase-0.1.1.tgz",
-      "integrity": "sha1-s2PlXoAGym/iF4TS2yK9FdeRfxQ=",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/path-dirname": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/path-dirname/-/path-dirname-1.0.2.tgz",
-      "integrity": "sha1-zDPSTVJeCZpTiMAzbG4yuRYGCeA=",
-      "dev": true
-    },
-    "node_modules/path-exists": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
-      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/path-is-absolute": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
-      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/path-is-inside": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/path-is-inside/-/path-is-inside-1.0.2.tgz",
-      "integrity": "sha1-NlQX3t5EQw0cEa9hAn+s8HS9/FM=",
-      "dev": true
-    },
-    "node_modules/path-key": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/path-key/-/path-key-2.0.1.tgz",
-      "integrity": "sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A=",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/path-parse": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz",
-      "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==",
-      "dev": true
-    },
-    "node_modules/path-to-regexp": {
-      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
-      "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
-      "dependencies": {
-        "isarray": "0.0.1"
-      }
-    },
-    "node_modules/path-type": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
-      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/pend": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
-      "integrity": "sha1-elfrVQpng/kRUzH89GY9XI4AelA=",
-      "dev": true,
-      "optional": true
-    },
-    "node_modules/performance-now": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
-      "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=",
-      "dev": true
-    },
-    "node_modules/picomatch": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.0.tgz",
-      "integrity": "sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==",
-      "dev": true,
-      "engines": {
-        "node": ">=8.6"
-      }
-    },
-    "node_modules/pify": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
-      "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/pinkie": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz",
-      "integrity": "sha1-clVrgM+g1IqXToDnckjoDtT3+HA=",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/pinkie-promise": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz",
-      "integrity": "sha1-ITXW36ejWMBprJsXh3YogihFD/o=",
-      "dev": true,
-      "dependencies": {
-        "pinkie": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/pirates": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.1.tgz",
-      "integrity": "sha512-WuNqLTbMI3tmfef2TKxlQmAiLHKtFhlsCZnPIpuv2Ow0RDVO8lfy1Opf4NUzlMXLjPl+Men7AuVdX6TA+s+uGA==",
-      "dev": true,
-      "dependencies": {
-        "node-modules-regexp": "^1.0.0"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/pkg-dir": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-3.0.0.tgz",
-      "integrity": "sha512-/E57AYkoeQ25qkxMj5PBOVgF8Kiu/h7cYS30Z5+R7WaiCCBfLq58ZI/dSeaEKb9WVJV5n/03QwrN3IeWIFllvw==",
-      "dev": true,
-      "dependencies": {
-        "find-up": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/pkg-dir/node_modules/find-up": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
-      "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
-      "dev": true,
-      "dependencies": {
-        "locate-path": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/pkg-dir/node_modules/locate-path": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
-      "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
-      "dev": true,
-      "dependencies": {
-        "p-locate": "^3.0.0",
-        "path-exists": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/pkg-dir/node_modules/p-locate": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
-      "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
-      "dev": true,
-      "dependencies": {
-        "p-limit": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/pkg-dir/node_modules/path-exists": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
-      "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/pkg-up": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/pkg-up/-/pkg-up-3.1.0.tgz",
-      "integrity": "sha512-nDywThFk1i4BQK4twPQ6TA4RT8bDY96yeuCVBWL3ePARCiEKDRSrNGbFIgUJpLp+XeIR65v8ra7WuJOFUBtkMA==",
-      "dev": true,
-      "dependencies": {
-        "find-up": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/pkg-up/node_modules/find-up": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
-      "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
-      "dev": true,
-      "dependencies": {
-        "locate-path": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/pkg-up/node_modules/locate-path": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
-      "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
-      "dev": true,
-      "dependencies": {
-        "p-locate": "^3.0.0",
-        "path-exists": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/pkg-up/node_modules/p-locate": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
-      "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
-      "dev": true,
-      "dependencies": {
-        "p-limit": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/pkg-up/node_modules/path-exists": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
-      "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/please-upgrade-node": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/please-upgrade-node/-/please-upgrade-node-3.2.0.tgz",
-      "integrity": "sha512-gQR3WpIgNIKwBMVLkpMUeR3e1/E1y42bqDQZfql+kDeXd8COYfM8PQA4X6y7a8u9Ua9FHmsrrmirW2vHs45hWg==",
-      "dev": true,
-      "dependencies": {
-        "semver-compare": "^1.0.0"
-      }
-    },
-    "node_modules/pn": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/pn/-/pn-1.1.0.tgz",
-      "integrity": "sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA==",
-      "dev": true
-    },
-    "node_modules/pngquant-bin": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/pngquant-bin/-/pngquant-bin-6.0.0.tgz",
-      "integrity": "sha512-oXWAS9MQ9iiDAJRdAZ9KO1mC5UwhzKkJsmetiu0iqIjJuW7JsuLhmc4JdRm7uJkIWRzIAou/Vq2VcjfJwz30Ow==",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "bin-build": "^3.0.0",
-        "bin-wrapper": "^4.0.1",
-        "execa": "^4.0.0",
-        "logalot": "^2.0.0"
-      },
-      "bin": {
-        "pngquant": "cli.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/pngquant-bin/node_modules/cross-spawn": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "path-key": "^3.1.0",
-        "shebang-command": "^2.0.0",
-        "which": "^2.0.1"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/pngquant-bin/node_modules/execa": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/execa/-/execa-4.1.0.tgz",
-      "integrity": "sha512-j5W0//W7f8UxAn8hXVnwG8tLwdiUy4FJLcSupCg6maBYZDpyBvTApK7KyuI4bKj8KOh1r2YH+6ucuYtJv1bTZA==",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "cross-spawn": "^7.0.0",
-        "get-stream": "^5.0.0",
-        "human-signals": "^1.1.1",
-        "is-stream": "^2.0.0",
-        "merge-stream": "^2.0.0",
-        "npm-run-path": "^4.0.0",
-        "onetime": "^5.1.0",
-        "signal-exit": "^3.0.2",
-        "strip-final-newline": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/pngquant-bin/node_modules/get-stream": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz",
-      "integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "pump": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/pngquant-bin/node_modules/human-signals": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-1.1.1.tgz",
-      "integrity": "sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==",
-      "dev": true,
-      "optional": true,
-      "engines": {
-        "node": ">=8.12.0"
-      }
-    },
-    "node_modules/pngquant-bin/node_modules/is-stream": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.0.tgz",
-      "integrity": "sha512-XCoy+WlUr7d1+Z8GgSuXmpuUFC9fOhRXglJMx+dwLKTkL44Cjd4W1Z5P+BQZpr+cR93aGP4S/s7Ftw6Nd/kiEw==",
-      "dev": true,
-      "optional": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/pngquant-bin/node_modules/npm-run-path": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
-      "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "path-key": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/pngquant-bin/node_modules/path-key": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-      "dev": true,
-      "optional": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/pngquant-bin/node_modules/shebang-command": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "shebang-regex": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/pngquant-bin/node_modules/shebang-regex": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-      "dev": true,
-      "optional": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/pngquant-bin/node_modules/which": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "isexe": "^2.0.0"
-      },
-      "bin": {
-        "node-which": "bin/node-which"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/portfinder": {
-      "version": "1.0.28",
-      "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
-      "integrity": "sha512-Se+2isanIcEqf2XMHjyUKskczxbPH7dQnlMjXX6+dybayyHvAf/TCgyMRlzf/B6QDhAEFOGes0pzRo3by4AbMA==",
-      "dev": true,
-      "dependencies": {
-        "async": "^2.6.2",
-        "debug": "^3.1.1",
-        "mkdirp": "^0.5.5"
-      },
-      "engines": {
-        "node": ">= 0.12.0"
-      }
-    },
-    "node_modules/portfinder/node_modules/debug": {
-      "version": "3.2.7",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
-      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
-      "dev": true,
-      "dependencies": {
-        "ms": "^2.1.1"
-      }
-    },
-    "node_modules/portfinder/node_modules/ms": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "dev": true
-    },
-    "node_modules/posix-character-classes": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz",
-      "integrity": "sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/postcss": {
-      "version": "8.3.5",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.3.5.tgz",
-      "integrity": "sha512-NxTuJocUhYGsMiMFHDUkmjSKT3EdH4/WbGF6GCi1NDGk+vbcUTun4fpbOqaPtD8IIsztA2ilZm2DhYCuyN58gA==",
-      "dev": true,
-      "dependencies": {
-        "colorette": "^1.2.2",
-        "nanoid": "^3.1.23",
-        "source-map-js": "^0.6.2"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14"
-      }
-    },
-    "node_modules/postcss-calc": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-calc/-/postcss-calc-8.0.0.tgz",
-      "integrity": "sha512-5NglwDrcbiy8XXfPM11F3HeC6hoT9W7GUH/Zi5U/p7u3Irv4rHhdDcIZwG0llHXV4ftsBjpfWMXAnXNl4lnt8g==",
-      "dev": true,
-      "dependencies": {
-        "postcss-selector-parser": "^6.0.2",
-        "postcss-value-parser": "^4.0.2"
-      }
-    },
-    "node_modules/postcss-colormin": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-5.2.0.tgz",
-      "integrity": "sha512-+HC6GfWU3upe5/mqmxuqYZ9B2Wl4lcoUUNkoaX59nEWV4EtADCMiBqui111Bu8R8IvaZTmqmxrqOAqjbHIwXPw==",
-      "dev": true,
-      "dependencies": {
-        "browserslist": "^4.16.6",
-        "caniuse-api": "^3.0.0",
-        "colord": "^2.0.1",
-        "postcss-value-parser": "^4.1.0"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      }
-    },
-    "node_modules/postcss-convert-values": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-convert-values/-/postcss-convert-values-5.0.1.tgz",
-      "integrity": "sha512-C3zR1Do2BkKkCgC0g3sF8TS0koF2G+mN8xxayZx3f10cIRmTaAnpgpRQZjNekTZxM2ciSPoh2IWJm0VZx8NoQg==",
-      "dev": true,
-      "dependencies": {
-        "postcss-value-parser": "^4.1.0"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      }
-    },
-    "node_modules/postcss-discard-comments": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-5.0.1.tgz",
-      "integrity": "sha512-lgZBPTDvWrbAYY1v5GYEv8fEO/WhKOu/hmZqmCYfrpD6eyDWWzAOsl2rF29lpvziKO02Gc5GJQtlpkTmakwOWg==",
-      "dev": true,
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      }
-    },
-    "node_modules/postcss-discard-duplicates": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-5.0.1.tgz",
-      "integrity": "sha512-svx747PWHKOGpAXXQkCc4k/DsWo+6bc5LsVrAsw+OU+Ibi7klFZCyX54gjYzX4TH+f2uzXjRviLARxkMurA2bA==",
-      "dev": true,
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      }
-    },
-    "node_modules/postcss-discard-empty": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-5.0.1.tgz",
-      "integrity": "sha512-vfU8CxAQ6YpMxV2SvMcMIyF2LX1ZzWpy0lqHDsOdaKKLQVQGVP1pzhrI9JlsO65s66uQTfkQBKBD/A5gp9STFw==",
-      "dev": true,
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      }
-    },
-    "node_modules/postcss-discard-overridden": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-5.0.1.tgz",
-      "integrity": "sha512-Y28H7y93L2BpJhrdUR2SR2fnSsT+3TVx1NmVQLbcnZWwIUpJ7mfcTC6Za9M2PG6w8j7UQRfzxqn8jU2VwFxo3Q==",
-      "dev": true,
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      }
-    },
-    "node_modules/postcss-loader": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-6.1.0.tgz",
-      "integrity": "sha512-yA/cXBfACkthZNA2hQxOnaReVfQ6uLmvbEDQzNafpbK40URZJvP/28dL1DG174Gvz3ptkkHbbwDBCh+gXR94CA==",
-      "dev": true,
-      "dependencies": {
-        "cosmiconfig": "^7.0.0",
-        "klona": "^2.0.4",
-        "semver": "^7.3.5"
-      },
-      "engines": {
-        "node": ">= 12.13.0"
-      }
-    },
-    "node_modules/postcss-loader/node_modules/semver": {
-      "version": "7.3.5",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
-      "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==",
-      "dev": true,
-      "dependencies": {
-        "lru-cache": "^6.0.0"
-      },
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/postcss-merge-longhand": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-merge-longhand/-/postcss-merge-longhand-5.0.2.tgz",
-      "integrity": "sha512-BMlg9AXSI5G9TBT0Lo/H3PfUy63P84rVz3BjCFE9e9Y9RXQZD3+h3YO1kgTNsNJy7bBc1YQp8DmSnwLIW5VPcw==",
-      "dev": true,
-      "dependencies": {
-        "css-color-names": "^1.0.1",
-        "postcss-value-parser": "^4.1.0",
-        "stylehacks": "^5.0.1"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      }
-    },
-    "node_modules/postcss-merge-rules": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-merge-rules/-/postcss-merge-rules-5.0.2.tgz",
-      "integrity": "sha512-5K+Md7S3GwBewfB4rjDeol6V/RZ8S+v4B66Zk2gChRqLTCC8yjnHQ601omj9TKftS19OPGqZ/XzoqpzNQQLwbg==",
-      "dev": true,
-      "dependencies": {
-        "browserslist": "^4.16.6",
-        "caniuse-api": "^3.0.0",
-        "cssnano-utils": "^2.0.1",
-        "postcss-selector-parser": "^6.0.5",
-        "vendors": "^1.0.3"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      }
-    },
-    "node_modules/postcss-minify-font-values": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-minify-font-values/-/postcss-minify-font-values-5.0.1.tgz",
-      "integrity": "sha512-7JS4qIsnqaxk+FXY1E8dHBDmraYFWmuL6cgt0T1SWGRO5bzJf8sUoelwa4P88LEWJZweHevAiDKxHlofuvtIoA==",
-      "dev": true,
-      "dependencies": {
-        "postcss-value-parser": "^4.1.0"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      }
-    },
-    "node_modules/postcss-minify-gradients": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-minify-gradients/-/postcss-minify-gradients-5.0.1.tgz",
-      "integrity": "sha512-odOwBFAIn2wIv+XYRpoN2hUV3pPQlgbJ10XeXPq8UY2N+9ZG42xu45lTn/g9zZ+d70NKSQD6EOi6UiCMu3FN7g==",
-      "dev": true,
-      "dependencies": {
-        "cssnano-utils": "^2.0.1",
-        "is-color-stop": "^1.1.0",
-        "postcss-value-parser": "^4.1.0"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      }
-    },
-    "node_modules/postcss-minify-params": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-minify-params/-/postcss-minify-params-5.0.1.tgz",
-      "integrity": "sha512-4RUC4k2A/Q9mGco1Z8ODc7h+A0z7L7X2ypO1B6V8057eVK6mZ6xwz6QN64nHuHLbqbclkX1wyzRnIrdZehTEHw==",
-      "dev": true,
-      "dependencies": {
-        "alphanum-sort": "^1.0.2",
-        "browserslist": "^4.16.0",
-        "cssnano-utils": "^2.0.1",
-        "postcss-value-parser": "^4.1.0",
-        "uniqs": "^2.0.0"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      }
-    },
-    "node_modules/postcss-minify-selectors": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-minify-selectors/-/postcss-minify-selectors-5.1.0.tgz",
-      "integrity": "sha512-NzGBXDa7aPsAcijXZeagnJBKBPMYLaJJzB8CQh6ncvyl2sIndLVWfbcDi0SBjRWk5VqEjXvf8tYwzoKf4Z07og==",
-      "dev": true,
-      "dependencies": {
-        "alphanum-sort": "^1.0.2",
-        "postcss-selector-parser": "^6.0.5"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      }
-    },
-    "node_modules/postcss-modules-extract-imports": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz",
-      "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==",
-      "dev": true,
-      "engines": {
-        "node": "^10 || ^12 || >= 14"
-      }
-    },
-    "node_modules/postcss-modules-local-by-default": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.0.tgz",
-      "integrity": "sha512-sT7ihtmGSF9yhm6ggikHdV0hlziDTX7oFoXtuVWeDd3hHObNkcHRo9V3yg7vCAY7cONyxJC/XXCmmiHHcvX7bQ==",
-      "dev": true,
-      "dependencies": {
-        "icss-utils": "^5.0.0",
-        "postcss-selector-parser": "^6.0.2",
-        "postcss-value-parser": "^4.1.0"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >= 14"
-      }
-    },
-    "node_modules/postcss-modules-scope": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.0.0.tgz",
-      "integrity": "sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==",
-      "dev": true,
-      "dependencies": {
-        "postcss-selector-parser": "^6.0.4"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >= 14"
-      }
-    },
-    "node_modules/postcss-modules-values": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz",
-      "integrity": "sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==",
-      "dev": true,
-      "dependencies": {
-        "icss-utils": "^5.0.0"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >= 14"
-      }
-    },
-    "node_modules/postcss-normalize-charset": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-5.0.1.tgz",
-      "integrity": "sha512-6J40l6LNYnBdPSk+BHZ8SF+HAkS4q2twe5jnocgd+xWpz/mx/5Sa32m3W1AA8uE8XaXN+eg8trIlfu8V9x61eg==",
-      "dev": true,
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      }
-    },
-    "node_modules/postcss-normalize-display-values": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-display-values/-/postcss-normalize-display-values-5.0.1.tgz",
-      "integrity": "sha512-uupdvWk88kLDXi5HEyI9IaAJTE3/Djbcrqq8YgjvAVuzgVuqIk3SuJWUisT2gaJbZm1H9g5k2w1xXilM3x8DjQ==",
-      "dev": true,
-      "dependencies": {
-        "cssnano-utils": "^2.0.1",
-        "postcss-value-parser": "^4.1.0"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      }
-    },
-    "node_modules/postcss-normalize-positions": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-positions/-/postcss-normalize-positions-5.0.1.tgz",
-      "integrity": "sha512-rvzWAJai5xej9yWqlCb1OWLd9JjW2Ex2BCPzUJrbaXmtKtgfL8dBMOOMTX6TnvQMtjk3ei1Lswcs78qKO1Skrg==",
-      "dev": true,
-      "dependencies": {
-        "postcss-value-parser": "^4.1.0"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      }
-    },
-    "node_modules/postcss-normalize-repeat-style": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-repeat-style/-/postcss-normalize-repeat-style-5.0.1.tgz",
-      "integrity": "sha512-syZ2itq0HTQjj4QtXZOeefomckiV5TaUO6ReIEabCh3wgDs4Mr01pkif0MeVwKyU/LHEkPJnpwFKRxqWA/7O3w==",
-      "dev": true,
-      "dependencies": {
-        "cssnano-utils": "^2.0.1",
-        "postcss-value-parser": "^4.1.0"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      }
-    },
-    "node_modules/postcss-normalize-string": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-string/-/postcss-normalize-string-5.0.1.tgz",
-      "integrity": "sha512-Ic8GaQ3jPMVl1OEn2U//2pm93AXUcF3wz+OriskdZ1AOuYV25OdgS7w9Xu2LO5cGyhHCgn8dMXh9bO7vi3i9pA==",
-      "dev": true,
-      "dependencies": {
-        "postcss-value-parser": "^4.1.0"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      }
-    },
-    "node_modules/postcss-normalize-timing-functions": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-timing-functions/-/postcss-normalize-timing-functions-5.0.1.tgz",
-      "integrity": "sha512-cPcBdVN5OsWCNEo5hiXfLUnXfTGtSFiBU9SK8k7ii8UD7OLuznzgNRYkLZow11BkQiiqMcgPyh4ZqXEEUrtQ1Q==",
-      "dev": true,
-      "dependencies": {
-        "cssnano-utils": "^2.0.1",
-        "postcss-value-parser": "^4.1.0"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      }
-    },
-    "node_modules/postcss-normalize-unicode": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-unicode/-/postcss-normalize-unicode-5.0.1.tgz",
-      "integrity": "sha512-kAtYD6V3pK0beqrU90gpCQB7g6AOfP/2KIPCVBKJM2EheVsBQmx/Iof+9zR9NFKLAx4Pr9mDhogB27pmn354nA==",
-      "dev": true,
-      "dependencies": {
-        "browserslist": "^4.16.0",
-        "postcss-value-parser": "^4.1.0"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      }
-    },
-    "node_modules/postcss-normalize-url": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-url/-/postcss-normalize-url-5.0.2.tgz",
-      "integrity": "sha512-k4jLTPUxREQ5bpajFQZpx8bCF2UrlqOTzP9kEqcEnOfwsRshWs2+oAFIHfDQB8GO2PaUaSE0NlTAYtbluZTlHQ==",
-      "dev": true,
-      "dependencies": {
-        "is-absolute-url": "^3.0.3",
-        "normalize-url": "^6.0.1",
-        "postcss-value-parser": "^4.1.0"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      }
-    },
-    "node_modules/postcss-normalize-whitespace": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-whitespace/-/postcss-normalize-whitespace-5.0.1.tgz",
-      "integrity": "sha512-iPklmI5SBnRvwceb/XH568yyzK0qRVuAG+a1HFUsFRf11lEJTiQQa03a4RSCQvLKdcpX7XsI1Gen9LuLoqwiqA==",
-      "dev": true,
-      "dependencies": {
-        "postcss-value-parser": "^4.1.0"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      }
-    },
-    "node_modules/postcss-ordered-values": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-ordered-values/-/postcss-ordered-values-5.0.2.tgz",
-      "integrity": "sha512-8AFYDSOYWebJYLyJi3fyjl6CqMEG/UVworjiyK1r573I56kb3e879sCJLGvR3merj+fAdPpVplXKQZv+ey6CgQ==",
-      "dev": true,
-      "dependencies": {
-        "cssnano-utils": "^2.0.1",
-        "postcss-value-parser": "^4.1.0"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      }
-    },
-    "node_modules/postcss-reduce-initial": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-5.0.1.tgz",
-      "integrity": "sha512-zlCZPKLLTMAqA3ZWH57HlbCjkD55LX9dsRyxlls+wfuRfqCi5mSlZVan0heX5cHr154Dq9AfbH70LyhrSAezJw==",
-      "dev": true,
-      "dependencies": {
-        "browserslist": "^4.16.0",
-        "caniuse-api": "^3.0.0"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      }
-    },
-    "node_modules/postcss-reduce-transforms": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-reduce-transforms/-/postcss-reduce-transforms-5.0.1.tgz",
-      "integrity": "sha512-a//FjoPeFkRuAguPscTVmRQUODP+f3ke2HqFNgGPwdYnpeC29RZdCBvGRGTsKpMURb/I3p6jdKoBQ2zI+9Q7kA==",
-      "dev": true,
-      "dependencies": {
-        "cssnano-utils": "^2.0.1",
-        "postcss-value-parser": "^4.1.0"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      }
-    },
-    "node_modules/postcss-rtlcss": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/postcss-rtlcss/-/postcss-rtlcss-3.3.4.tgz",
-      "integrity": "sha512-3UM3E1uJvtc5mR5UIXYX1bgUxZgupgUi8cfk0alOT0rwHQ5evoJPFDYbGsaUsj6PWLJpWuh3zCY3zYFtS2sHTw==",
-      "dev": true,
-      "dependencies": {
-        "rtlcss": "^3.2.0"
-      },
-      "engines": {
-        "node": ">=12.0.0"
-      }
-    },
-    "node_modules/postcss-selector-parser": {
-      "version": "6.0.6",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.6.tgz",
-      "integrity": "sha512-9LXrvaaX3+mcv5xkg5kFwqSzSH1JIObIx51PrndZwlmznwXRfxMddDvo9gve3gVR8ZTKgoFDdWkbRFmEhT4PMg==",
-      "dev": true,
-      "dependencies": {
-        "cssesc": "^3.0.0",
-        "util-deprecate": "^1.0.2"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/postcss-svgo": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-5.0.2.tgz",
-      "integrity": "sha512-YzQuFLZu3U3aheizD+B1joQ94vzPfE6BNUcSYuceNxlVnKKsOtdo6hL9/zyC168Q8EwfLSgaDSalsUGa9f2C0A==",
-      "dev": true,
-      "dependencies": {
-        "postcss-value-parser": "^4.1.0",
-        "svgo": "^2.3.0"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      }
-    },
-    "node_modules/postcss-svgo/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"
-      }
-    },
-    "node_modules/postcss-svgo/node_modules/chalk": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
-      "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
-      "dev": true,
-      "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/postcss-svgo/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/postcss-svgo/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/postcss-svgo/node_modules/commander": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
-      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
-      "dev": true,
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/postcss-svgo/node_modules/css-select": {
-      "version": "4.1.3",
-      "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.1.3.tgz",
-      "integrity": "sha512-gT3wBNd9Nj49rAbmtFHj1cljIAOLYSX1nZ8CB7TBO3INYckygm5B7LISU/szY//YmdiSLbJvDLOx9VnMVpMBxA==",
-      "dev": true,
-      "dependencies": {
-        "boolbase": "^1.0.0",
-        "css-what": "^5.0.0",
-        "domhandler": "^4.2.0",
-        "domutils": "^2.6.0",
-        "nth-check": "^2.0.0"
-      }
-    },
-    "node_modules/postcss-svgo/node_modules/css-tree": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
-      "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==",
-      "dev": true,
-      "dependencies": {
-        "mdn-data": "2.0.14",
-        "source-map": "^0.6.1"
-      },
-      "engines": {
-        "node": ">=8.0.0"
-      }
-    },
-    "node_modules/postcss-svgo/node_modules/css-what": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/css-what/-/css-what-5.0.1.tgz",
-      "integrity": "sha512-FYDTSHb/7KXsWICVsxdmiExPjCfRC4qRFBdVwv7Ax9hMnvMmEjP9RfxTEZ3qPZGmADDn2vAKSo9UcN1jKVYscg==",
-      "dev": true,
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/postcss-svgo/node_modules/dom-serializer": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz",
-      "integrity": "sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==",
-      "dev": true,
-      "dependencies": {
-        "domelementtype": "^2.0.1",
-        "domhandler": "^4.2.0",
-        "entities": "^2.0.0"
-      }
-    },
-    "node_modules/postcss-svgo/node_modules/domelementtype": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz",
-      "integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==",
-      "dev": true
-    },
-    "node_modules/postcss-svgo/node_modules/domutils": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.7.0.tgz",
-      "integrity": "sha512-8eaHa17IwJUPAiB+SoTYBo5mCdeMgdcAoXJ59m6DT1vw+5iLS3gNoqYaRowaBKtGVrOF1Jz4yDTgYKLK2kvfJg==",
-      "dev": true,
-      "dependencies": {
-        "dom-serializer": "^1.0.1",
-        "domelementtype": "^2.2.0",
-        "domhandler": "^4.2.0"
-      }
-    },
-    "node_modules/postcss-svgo/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/postcss-svgo/node_modules/mdn-data": {
-      "version": "2.0.14",
-      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
-      "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==",
-      "dev": true
-    },
-    "node_modules/postcss-svgo/node_modules/nth-check": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.0.0.tgz",
-      "integrity": "sha512-i4sc/Kj8htBrAiH1viZ0TgU8Y5XqCaV/FziYK6TBczxmeKm3AEFWqqF3195yKudrarqy7Zu80Ra5dobFjn9X/Q==",
-      "dev": true,
-      "dependencies": {
-        "boolbase": "^1.0.0"
-      }
-    },
-    "node_modules/postcss-svgo/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/postcss-svgo/node_modules/svgo": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/svgo/-/svgo-2.3.1.tgz",
-      "integrity": "sha512-riDDIQgXpEnn0BEl9Gvhh1LNLIyiusSpt64IR8upJu7MwxnzetmF/Y57pXQD2NMX2lVyMRzXt5f2M5rO4wG7Dw==",
-      "dev": true,
-      "dependencies": {
-        "@trysound/sax": "0.1.1",
-        "chalk": "^4.1.0",
-        "commander": "^7.1.0",
-        "css-select": "^4.1.3",
-        "css-tree": "^1.1.2",
-        "csso": "^4.2.0",
-        "stable": "^0.1.8"
-      },
-      "bin": {
-        "svgo": "bin/svgo"
-      },
-      "engines": {
-        "node": ">=10.13.0"
-      }
-    },
-    "node_modules/postcss-unique-selectors": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-unique-selectors/-/postcss-unique-selectors-5.0.1.tgz",
-      "integrity": "sha512-gwi1NhHV4FMmPn+qwBNuot1sG1t2OmacLQ/AX29lzyggnjd+MnVD5uqQmpXO3J17KGL2WAxQruj1qTd3H0gG/w==",
-      "dev": true,
-      "dependencies": {
-        "alphanum-sort": "^1.0.2",
-        "postcss-selector-parser": "^6.0.5",
-        "uniqs": "^2.0.0"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      }
-    },
-    "node_modules/postcss-value-parser": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz",
-      "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==",
-      "dev": true
-    },
-    "node_modules/postcss/node_modules/colorette": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.2.2.tgz",
-      "integrity": "sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w==",
-      "dev": true
-    },
-    "node_modules/prelude-ls": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz",
-      "integrity": "sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.8.0"
-      }
-    },
-    "node_modules/prepend-http": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz",
-      "integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=",
-      "dev": true,
-      "optional": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/pretty-error": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/pretty-error/-/pretty-error-2.1.2.tgz",
-      "integrity": "sha512-EY5oDzmsX5wvuynAByrmY0P0hcp+QpnAKbJng2A2MPjVKXCxrDSUkzghVJ4ZGPIv+JC4gX8fPUWscC0RtjsWGw==",
-      "dev": true,
-      "dependencies": {
-        "lodash": "^4.17.20",
-        "renderkid": "^2.0.4"
-      }
-    },
-    "node_modules/pretty-format": {
-      "version": "25.5.0",
-      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-25.5.0.tgz",
-      "integrity": "sha512-kbo/kq2LQ/A/is0PQwsEHM7Ca6//bGPPvU6UnsdDRSKTWxT/ru/xb88v4BJf6a69H+uTytOEsTusT9ksd/1iWQ==",
-      "dev": true,
-      "dependencies": {
-        "@jest/types": "^25.5.0",
-        "ansi-regex": "^5.0.0",
-        "ansi-styles": "^4.0.0",
-        "react-is": "^16.12.0"
-      },
-      "engines": {
-        "node": ">= 8.3"
-      }
-    },
-    "node_modules/pretty-format/node_modules/ansi-styles": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
-      "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
-      "dev": true,
-      "dependencies": {
-        "@types/color-name": "^1.1.1",
-        "color-convert": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/pretty-format/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/pretty-format/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/prettyjson": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/prettyjson/-/prettyjson-1.2.1.tgz",
-      "integrity": "sha1-/P+rQdGcq0365eV15kJGYZsS0ok=",
-      "dev": true,
-      "dependencies": {
-        "colors": "^1.1.2",
-        "minimist": "^1.2.0"
-      },
-      "bin": {
-        "prettyjson": "bin/prettyjson"
-      }
-    },
-    "node_modules/prettyjson/node_modules/colors": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/colors/-/colors-1.4.0.tgz",
-      "integrity": "sha512-a+UqTh4kgZg/SlGvfbzDHpgRu7AAQOmmqRHJnxhRZICKFUT91brVhNNt58CMWU9PsBbv3PDCZUHbVxuDiH2mtA==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.1.90"
-      }
-    },
-    "node_modules/process-nextick-args": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
-      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
-      "dev": true
-    },
-    "node_modules/progress": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz",
-      "integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
-    "node_modules/prompts": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.3.2.tgz",
-      "integrity": "sha512-Q06uKs2CkNYVID0VqwfAl9mipo99zkBv/n2JtWY89Yxa3ZabWSrs0e2KTudKVa3peLUvYXMefDqIleLPVUBZMA==",
-      "dev": true,
-      "dependencies": {
-        "kleur": "^3.0.3",
-        "sisteransi": "^1.0.4"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/prop-types": {
-      "version": "15.7.2",
-      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
-      "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
-      "dependencies": {
-        "loose-envify": "^1.4.0",
-        "object-assign": "^4.1.1",
-        "react-is": "^16.8.1"
-      }
-    },
-    "node_modules/prop-types-exact": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/prop-types-exact/-/prop-types-exact-1.2.0.tgz",
-      "integrity": "sha512-K+Tk3Kd9V0odiXFP9fwDHUYRyvK3Nun3GVyPapSIs5OBkITAm15W0CPFD/YKTkMUAbc0b9CUwRQp2ybiBIq+eA==",
-      "dependencies": {
-        "has": "^1.0.3",
-        "object.assign": "^4.1.0",
-        "reflect.ownkeys": "^0.2.0"
-      }
-    },
-    "node_modules/prop-types-extra": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz",
-      "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==",
-      "dependencies": {
-        "react-is": "^16.3.2",
-        "warning": "^4.0.0"
-      }
-    },
-    "node_modules/property-expr": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.4.tgz",
-      "integrity": "sha512-sFPkHQjVKheDNnPvotjQmm3KD3uk1fWKUN7CrpdbwmUx3CrG3QiM8QpTSimvig5vTXmTvjz7+TDvXOI9+4rkcg=="
-    },
-    "node_modules/proto-list": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz",
-      "integrity": "sha1-IS1b/hMYMGpCD2QCuOJv85ZHqEk=",
-      "dev": true,
-      "optional": true
-    },
-    "node_modules/proxy-addr": {
-      "version": "2.0.7",
-      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
-      "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
-      "dev": true,
-      "dependencies": {
-        "forwarded": "0.2.0",
-        "ipaddr.js": "1.9.1"
-      },
-      "engines": {
-        "node": ">= 0.10"
-      }
-    },
-    "node_modules/pseudomap": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz",
-      "integrity": "sha1-8FKijacOYYkX7wqKw0wa5aaChrM=",
-      "dev": true,
-      "optional": true
-    },
-    "node_modules/psl": {
-      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/psl/-/psl-1.8.0.tgz",
-      "integrity": "sha512-RIdOzyoavK+hA18OGGWDqUTsCLhtA7IcZ/6NCs4fFJaHBDab+pDDmDIByWFRQJq2Cd7r1OoQxBGKOaztq+hjIQ==",
-      "dev": true
-    },
-    "node_modules/pubsub-js": {
-      "version": "1.9.3",
-      "resolved": "https://registry.npmjs.org/pubsub-js/-/pubsub-js-1.9.3.tgz",
-      "integrity": "sha512-FhYYlPNOywTh7zN38u5AlG67emA47w6JZd7YgdQU1w8gQbZhhIGxVM0AQosdaINHb2ALb+fhfnVyBJAt4D4IzA=="
-    },
-    "node_modules/pump": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
-      "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
-      "dev": true,
-      "dependencies": {
-        "end-of-stream": "^1.1.0",
-        "once": "^1.3.1"
-      }
-    },
-    "node_modules/punycode": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
-      "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/q": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
-      "integrity": "sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=",
-      "dev": true,
-      "engines": {
-        "node": ">=0.6.0",
-        "teleport": ">=0.2.0"
-      }
-    },
-    "node_modules/qs": {
-      "version": "6.5.2",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
-      "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.6"
-      }
-    },
-    "node_modules/query-string": {
-      "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/query-string/-/query-string-2.4.2.tgz",
-      "integrity": "sha1-fbBmZCCAS6qSrp8miWKFWnYUPfs=",
-      "dependencies": {
-        "strict-uri-encode": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/querystring": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz",
-      "integrity": "sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA=",
-      "dev": true,
-      "engines": {
-        "node": ">=0.4.x"
-      }
-    },
-    "node_modules/queue-microtask": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
-      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
-      "dev": true
-    },
-    "node_modules/randombytes": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
-      "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==",
-      "dev": true,
-      "dependencies": {
-        "safe-buffer": "^5.1.0"
-      }
-    },
-    "node_modules/range-parser": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
-      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/raw-body": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.0.tgz",
-      "integrity": "sha512-4Oz8DUIwdvoa5qMJelxipzi/iJIi40O5cGV1wNYp5hvZP8ZN0T+jiNkL0QepXs+EsQ9XJ8ipEDoiH70ySUJP3Q==",
-      "dev": true,
-      "dependencies": {
-        "bytes": "3.1.0",
-        "http-errors": "1.7.2",
-        "iconv-lite": "0.4.24",
-        "unpipe": "1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/react": {
-      "version": "16.14.0",
-      "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz",
-      "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==",
-      "dependencies": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1",
-        "prop-types": "^15.6.2"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/react-bootstrap": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-1.6.1.tgz",
-      "integrity": "sha512-ojEPQ6OtyIMdLg0Smofk+85PKN6MLKQX3bU0Vwmok/4yNa8DQ2vCGhO2IgHJvT+ERQZ4X+gAQcdn6msAHSwLBg==",
-      "dependencies": {
-        "@babel/runtime": "^7.14.0",
-        "@restart/context": "^2.1.4",
-        "@restart/hooks": "^0.3.26",
-        "@types/invariant": "^2.2.33",
-        "@types/prop-types": "^15.7.3",
-        "@types/react": ">=16.14.8",
-        "@types/react-transition-group": "^4.4.1",
-        "@types/warning": "^3.0.0",
-        "classnames": "^2.3.1",
-        "dom-helpers": "^5.2.1",
-        "invariant": "^2.2.4",
-        "prop-types": "^15.7.2",
-        "prop-types-extra": "^1.1.0",
-        "react-overlays": "^5.0.1",
-        "react-transition-group": "^4.4.1",
-        "uncontrollable": "^7.2.1",
-        "warning": "^4.0.3"
-      }
-    },
-    "node_modules/react-bootstrap/node_modules/@babel/runtime": {
-      "version": "7.14.6",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.6.tgz",
-      "integrity": "sha512-/PCB2uJ7oM44tz8YhC4Z/6PeOKXp4K588f+5M3clr1M4zbqztlo0XEfJ2LEzj/FgwfgGcIdl8n7YYjTCI0BYwg==",
-      "dependencies": {
-        "regenerator-runtime": "^0.13.4"
-      }
-    },
-    "node_modules/react-bootstrap/node_modules/classnames": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
-      "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
-    },
-    "node_modules/react-bootstrap/node_modules/csstype": {
-      "version": "3.0.8",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz",
-      "integrity": "sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw=="
-    },
-    "node_modules/react-bootstrap/node_modules/dom-helpers": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
-      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
-      "dependencies": {
-        "@babel/runtime": "^7.8.7",
-        "csstype": "^3.0.2"
-      }
-    },
-    "node_modules/react-clientside-effect": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/react-clientside-effect/-/react-clientside-effect-1.2.5.tgz",
-      "integrity": "sha512-2bL8qFW1TGBHozGGbVeyvnggRpMjibeZM2536AKNENLECutp2yfs44IL8Hmpn8qjFQ2K7A9PnYf3vc7aQq/cPA==",
-      "dependencies": {
-        "@babel/runtime": "^7.12.13"
-      }
-    },
-    "node_modules/react-clientside-effect/node_modules/@babel/runtime": {
-      "version": "7.14.6",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.6.tgz",
-      "integrity": "sha512-/PCB2uJ7oM44tz8YhC4Z/6PeOKXp4K588f+5M3clr1M4zbqztlo0XEfJ2LEzj/FgwfgGcIdl8n7YYjTCI0BYwg==",
-      "dependencies": {
-        "regenerator-runtime": "^0.13.4"
-      }
-    },
-    "node_modules/react-dev-utils": {
-      "version": "11.0.4",
-      "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz",
-      "integrity": "sha512-dx0LvIGHcOPtKbeiSUM4jqpBl3TcY7CDjZdfOIcKeznE7BWr9dg0iPG90G5yfVQ+p/rGNMXdbfStvzQZEVEi4A==",
-      "dev": true,
-      "dependencies": {
-        "@babel/code-frame": "7.10.4",
-        "address": "1.1.2",
-        "browserslist": "4.14.2",
-        "chalk": "2.4.2",
-        "cross-spawn": "7.0.3",
-        "detect-port-alt": "1.1.6",
-        "escape-string-regexp": "2.0.0",
-        "filesize": "6.1.0",
-        "find-up": "4.1.0",
-        "fork-ts-checker-webpack-plugin": "4.1.6",
-        "global-modules": "2.0.0",
-        "globby": "11.0.1",
-        "gzip-size": "5.1.1",
-        "immer": "8.0.1",
-        "is-root": "2.1.0",
-        "loader-utils": "2.0.0",
-        "open": "^7.0.2",
-        "pkg-up": "3.1.0",
-        "prompts": "2.4.0",
-        "react-error-overlay": "^6.0.9",
-        "recursive-readdir": "2.2.2",
-        "shell-quote": "1.7.2",
-        "strip-ansi": "6.0.0",
-        "text-table": "0.2.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/react-dev-utils/node_modules/array-union": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
-      "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/react-dev-utils/node_modules/browserslist": {
-      "version": "4.14.2",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.14.2.tgz",
-      "integrity": "sha512-HI4lPveGKUR0x2StIz+2FXfDk9SfVMrxn6PLh1JeGUwcuoDkdKZebWiyLRJ68iIPDpMI4JLVDf7S7XzslgWOhw==",
-      "dev": true,
-      "dependencies": {
-        "caniuse-lite": "^1.0.30001125",
-        "electron-to-chromium": "^1.3.564",
-        "escalade": "^3.0.2",
-        "node-releases": "^1.1.61"
-      },
-      "bin": {
-        "browserslist": "cli.js"
-      },
-      "engines": {
-        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
-      }
-    },
-    "node_modules/react-dev-utils/node_modules/cross-spawn": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-      "dev": true,
-      "dependencies": {
-        "path-key": "^3.1.0",
-        "shebang-command": "^2.0.0",
-        "which": "^2.0.1"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/react-dev-utils/node_modules/escape-string-regexp": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz",
-      "integrity": "sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/react-dev-utils/node_modules/globby": {
-      "version": "11.0.1",
-      "resolved": "https://registry.npmjs.org/globby/-/globby-11.0.1.tgz",
-      "integrity": "sha512-iH9RmgwCmUJHi2z5o2l3eTtGBtXek1OYlHrbcxOYugyHLmAsZrPj43OtHThd62Buh/Vv6VyCBD2bdyWcGNQqoQ==",
-      "dev": true,
-      "dependencies": {
-        "array-union": "^2.1.0",
-        "dir-glob": "^3.0.1",
-        "fast-glob": "^3.1.1",
-        "ignore": "^5.1.4",
-        "merge2": "^1.3.0",
-        "slash": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/react-dev-utils/node_modules/ignore": {
-      "version": "5.1.8",
-      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.1.8.tgz",
-      "integrity": "sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw==",
-      "dev": true,
-      "engines": {
-        "node": ">= 4"
-      }
-    },
-    "node_modules/react-dev-utils/node_modules/path-key": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/react-dev-utils/node_modules/prompts": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.4.0.tgz",
-      "integrity": "sha512-awZAKrk3vN6CroQukBL+R9051a4R3zCZBlJm/HBfrSZ8iTpYix3VX1vU4mveiLpiwmOJT4wokTF9m6HUk4KqWQ==",
-      "dev": true,
-      "dependencies": {
-        "kleur": "^3.0.3",
-        "sisteransi": "^1.0.5"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/react-dev-utils/node_modules/shebang-command": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-      "dev": true,
-      "dependencies": {
-        "shebang-regex": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/react-dev-utils/node_modules/shebang-regex": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/react-dev-utils/node_modules/slash": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
-      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/react-dev-utils/node_modules/strip-ansi": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
-      "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
-      "dev": true,
-      "dependencies": {
-        "ansi-regex": "^5.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/react-dev-utils/node_modules/which": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-      "dev": true,
-      "dependencies": {
-        "isexe": "^2.0.0"
-      },
-      "bin": {
-        "node-which": "bin/node-which"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/react-dom": {
-      "version": "16.14.0",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.14.0.tgz",
-      "integrity": "sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==",
-      "dependencies": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1",
-        "prop-types": "^15.6.2",
-        "scheduler": "^0.19.1"
-      }
-    },
-    "node_modules/react-error-overlay": {
-      "version": "6.0.9",
-      "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz",
-      "integrity": "sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==",
-      "dev": true
-    },
-    "node_modules/react-fast-compare": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
-      "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
-    },
-    "node_modules/react-focus-lock": {
-      "version": "2.5.2",
-      "resolved": "https://registry.npmjs.org/react-focus-lock/-/react-focus-lock-2.5.2.tgz",
-      "integrity": "sha512-WzpdOnEqjf+/A3EH9opMZWauag7gV0BxFl+EY4ElA4qFqYsUsBLnmo2sELbN5OC30S16GAWMy16B9DLPpdJKAQ==",
-      "dependencies": {
-        "@babel/runtime": "^7.0.0",
-        "focus-lock": "^0.9.1",
-        "prop-types": "^15.6.2",
-        "react-clientside-effect": "^1.2.5",
-        "use-callback-ref": "^1.2.5",
-        "use-sidecar": "^1.0.5"
-      }
-    },
-    "node_modules/react-focus-on": {
-      "version": "3.5.2",
-      "resolved": "https://registry.npmjs.org/react-focus-on/-/react-focus-on-3.5.2.tgz",
-      "integrity": "sha512-tpPxLqw9tEuElWmcr5jqw/ULfJjdHEnom0nBW9p6y75Zsa0wOfwQNqCHqCoJcHUqSBtKXqTuYduZoSTfTOTdJw==",
-      "dependencies": {
-        "aria-hidden": "^1.1.2",
-        "react-focus-lock": "^2.5.0",
-        "react-remove-scroll": "^2.4.1",
-        "react-style-singleton": "^2.1.1",
-        "use-callback-ref": "^1.2.5",
-        "use-sidecar": "^1.0.5"
-      },
-      "engines": {
-        "node": ">=8.5.0"
-      }
-    },
-    "node_modules/react-intl": {
-      "version": "2.9.0",
-      "resolved": "https://registry.npmjs.org/react-intl/-/react-intl-2.9.0.tgz",
-      "integrity": "sha512-27jnDlb/d2A7mSJwrbOBnUgD+rPep+abmoJE511Tf8BnoONIAUehy/U1zZCHGO17mnOwMWxqN4qC0nW11cD6rA==",
-      "dependencies": {
-        "hoist-non-react-statics": "^3.3.0",
-        "intl-format-cache": "^2.0.5",
-        "intl-messageformat": "^2.1.0",
-        "intl-relativeformat": "^2.1.0",
-        "invariant": "^2.1.1"
-      }
-    },
-    "node_modules/react-is": {
-      "version": "16.13.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
-    },
-    "node_modules/react-lifecycles-compat": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
-      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
-    },
-    "node_modules/react-overlays": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-5.1.1.tgz",
-      "integrity": "sha512-eCN2s2/+GVZzpnId4XVWtvDPYYBD2EtOGP74hE+8yDskPzFy9+pV1H3ZZihxuRdEbQzzacySaaDkR7xE0ydl4Q==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.8",
-        "@popperjs/core": "^2.8.6",
-        "@restart/hooks": "^0.3.26",
-        "@types/warning": "^3.0.0",
-        "dom-helpers": "^5.2.0",
-        "prop-types": "^15.7.2",
-        "uncontrollable": "^7.2.1",
-        "warning": "^4.0.3"
-      }
-    },
-    "node_modules/react-overlays/node_modules/@babel/runtime": {
-      "version": "7.14.6",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.6.tgz",
-      "integrity": "sha512-/PCB2uJ7oM44tz8YhC4Z/6PeOKXp4K588f+5M3clr1M4zbqztlo0XEfJ2LEzj/FgwfgGcIdl8n7YYjTCI0BYwg==",
-      "dependencies": {
-        "regenerator-runtime": "^0.13.4"
-      }
-    },
-    "node_modules/react-overlays/node_modules/csstype": {
-      "version": "3.0.8",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz",
-      "integrity": "sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw=="
-    },
-    "node_modules/react-overlays/node_modules/dom-helpers": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
-      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
-      "dependencies": {
-        "@babel/runtime": "^7.8.7",
-        "csstype": "^3.0.2"
-      }
-    },
-    "node_modules/react-popper": {
-      "version": "2.2.5",
-      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.2.5.tgz",
-      "integrity": "sha512-kxGkS80eQGtLl18+uig1UIf9MKixFSyPxglsgLBxlYnyDf65BiY9B3nZSc6C9XUNDgStROB0fMQlTEz1KxGddw==",
-      "dependencies": {
-        "react-fast-compare": "^3.0.1",
-        "warning": "^4.0.2"
-      }
-    },
-    "node_modules/react-popper/node_modules/react-fast-compare": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
-      "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
-    },
-    "node_modules/react-proptype-conditional-require": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/react-proptype-conditional-require/-/react-proptype-conditional-require-1.0.4.tgz",
-      "integrity": "sha1-acLVdB5t9eCPIw82u8KUTuEiJVU="
-    },
-    "node_modules/react-redux": {
-      "version": "7.1.3",
-      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.1.3.tgz",
-      "integrity": "sha512-uI1wca+ECG9RoVkWQFF4jDMqmaw0/qnvaSvOoL/GA4dNxf6LoV8sUAcNDvE5NWKs4hFpn0t6wswNQnY3f7HT3w==",
-      "dependencies": {
-        "@babel/runtime": "^7.5.5",
-        "hoist-non-react-statics": "^3.3.0",
-        "invariant": "^2.2.4",
-        "loose-envify": "^1.4.0",
-        "prop-types": "^15.7.2",
-        "react-is": "^16.9.0"
-      }
-    },
-    "node_modules/react-remove-scroll": {
-      "version": "2.4.3",
-      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.4.3.tgz",
-      "integrity": "sha512-lGWYXfV6jykJwbFpsuPdexKKzp96f3RbvGapDSIdcyGvHb7/eqyn46C7/6h+rUzYar1j5mdU+XECITHXCKBk9Q==",
-      "dependencies": {
-        "react-remove-scroll-bar": "^2.1.0",
-        "react-style-singleton": "^2.1.0",
-        "tslib": "^1.0.0",
-        "use-callback-ref": "^1.2.3",
-        "use-sidecar": "^1.0.1"
-      },
-      "engines": {
-        "node": ">=8.5.0"
-      }
-    },
-    "node_modules/react-remove-scroll-bar": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.2.0.tgz",
-      "integrity": "sha512-UU9ZBP1wdMR8qoUs7owiVcpaPwsQxUDC2lypP6mmixaGlARZa7ZIBx1jcuObLdhMOvCsnZcvetOho0wzPa9PYg==",
-      "dependencies": {
-        "react-style-singleton": "^2.1.0",
-        "tslib": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=8.5.0"
-      }
-    },
-    "node_modules/react-responsive": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/react-responsive/-/react-responsive-8.1.0.tgz",
-      "integrity": "sha512-U8Nv2/ZWACIw/fAE9XNPbc2Xo33X5q1bcCASc2SufvJ9ifB+o/rokfogfznSVcvS22hN1rafGi0uZD6GiVFEHw==",
-      "dependencies": {
-        "hyphenate-style-name": "^1.0.0",
-        "matchmediaquery": "^0.3.0",
-        "prop-types": "^15.6.1",
-        "shallow-equal": "^1.1.0"
-      },
-      "engines": {
-        "node": ">= 0.10"
-      }
-    },
-    "node_modules/react-router": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.1.2.tgz",
-      "integrity": "sha512-yjEuMFy1ONK246B+rsa0cUam5OeAQ8pyclRDgpxuSCrAlJ1qN9uZ5IgyKC7gQg0w8OM50NXHEegPh/ks9YuR2A==",
-      "dependencies": {
-        "@babel/runtime": "^7.1.2",
-        "history": "^4.9.0",
-        "hoist-non-react-statics": "^3.1.0",
-        "loose-envify": "^1.3.1",
-        "mini-create-react-context": "^0.3.0",
-        "path-to-regexp": "^1.7.0",
-        "prop-types": "^15.6.2",
-        "react-is": "^16.6.0",
-        "tiny-invariant": "^1.0.2",
-        "tiny-warning": "^1.0.0"
-      }
-    },
-    "node_modules/react-router-dom": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.1.2.tgz",
-      "integrity": "sha512-7BPHAaIwWpZS074UKaw1FjVdZBSVWEk8IuDXdB+OkLb8vd/WRQIpA4ag9WQk61aEfQs47wHyjWUoUGGZxpQXew==",
-      "dependencies": {
-        "@babel/runtime": "^7.1.2",
-        "history": "^4.9.0",
-        "loose-envify": "^1.3.1",
-        "prop-types": "^15.6.2",
-        "react-router": "5.1.2",
-        "tiny-invariant": "^1.0.2",
-        "tiny-warning": "^1.0.0"
-      }
-    },
-    "node_modules/react-style-singleton": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.1.1.tgz",
-      "integrity": "sha512-jNRp07Jza6CBqdRKNgGhT3u9umWvils1xsuMOjZlghBDH2MU0PL2WZor4PGYjXpnRCa9DQSlHMs/xnABWOwYbA==",
-      "dependencies": {
-        "get-nonce": "^1.0.0",
-        "invariant": "^2.2.4",
-        "tslib": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=8.5.0"
-      }
-    },
-    "node_modules/react-table": {
-      "version": "7.7.0",
-      "resolved": "https://registry.npmjs.org/react-table/-/react-table-7.7.0.tgz",
-      "integrity": "sha512-jBlj70iBwOTvvImsU9t01LjFjy4sXEtclBovl3mTiqjz23Reu0DKnRza4zlLtOPACx6j2/7MrQIthIK1Wi+LIA=="
-    },
-    "node_modules/react-test-renderer": {
-      "version": "16.9.0",
-      "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.9.0.tgz",
-      "integrity": "sha512-R62stB73qZyhrJo7wmCW9jgl/07ai+YzvouvCXIJLBkRlRqLx4j9RqcLEAfNfU3OxTGucqR2Whmn3/Aad6L3hQ==",
-      "dev": true,
-      "dependencies": {
-        "object-assign": "^4.1.1",
-        "prop-types": "^15.6.2",
-        "react-is": "^16.9.0",
-        "scheduler": "^0.15.0"
-      }
-    },
-    "node_modules/react-test-renderer/node_modules/scheduler": {
-      "version": "0.15.0",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.15.0.tgz",
-      "integrity": "sha512-xAefmSfN6jqAa7Kuq7LIJY0bwAPG3xlCj0HMEBQk1lxYiDKZscY2xJ5U/61ZTrYbmNQbXa+gc7czPkVo11tnCg==",
-      "dev": true,
-      "dependencies": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1"
-      }
-    },
-    "node_modules/react-transition-group": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz",
-      "integrity": "sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw==",
-      "dependencies": {
-        "@babel/runtime": "^7.5.5",
-        "dom-helpers": "^5.0.1",
-        "loose-envify": "^1.4.0",
-        "prop-types": "^15.6.2"
-      }
-    },
-    "node_modules/reactifex": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/reactifex/-/reactifex-1.1.1.tgz",
-      "integrity": "sha512-HH2N/b5tRxh7ypIgCRsiBl/CTxRkTEPf9DhIstaM6hne4WiwM5/bBbWuvVlRZc/i3FdqZED3pZ//6n4mtxma4w==",
-      "dev": true,
-      "bin": {
-        "reactifex": "main.js"
-      }
-    },
-    "node_modules/read-pkg": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz",
-      "integrity": "sha1-jvHAYjxqbbDcZxPEv6xGMysjaPg=",
-      "dev": true,
-      "dependencies": {
-        "load-json-file": "^2.0.0",
-        "normalize-package-data": "^2.3.2",
-        "path-type": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/read-pkg-up": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-2.0.0.tgz",
-      "integrity": "sha1-a3KoBImE4MQeeVEP1en6mbO1Sb4=",
-      "dev": true,
-      "dependencies": {
-        "find-up": "^2.0.0",
-        "read-pkg": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/read-pkg-up/node_modules/find-up": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz",
-      "integrity": "sha1-RdG35QbHF93UgndaK3eSCjwMV6c=",
-      "dev": true,
-      "dependencies": {
-        "locate-path": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/read-pkg-up/node_modules/locate-path": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-2.0.0.tgz",
-      "integrity": "sha1-K1aLJl7slExtnA3pw9u7ygNUzY4=",
-      "dev": true,
-      "dependencies": {
-        "p-locate": "^2.0.0",
-        "path-exists": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/read-pkg-up/node_modules/p-limit": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.3.0.tgz",
-      "integrity": "sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==",
-      "dev": true,
-      "dependencies": {
-        "p-try": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/read-pkg-up/node_modules/p-locate": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-2.0.0.tgz",
-      "integrity": "sha1-IKAQOyIqcMj9OcwuWAaA893l7EM=",
-      "dev": true,
-      "dependencies": {
-        "p-limit": "^1.1.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/read-pkg-up/node_modules/p-try": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/p-try/-/p-try-1.0.0.tgz",
-      "integrity": "sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M=",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/read-pkg-up/node_modules/path-exists": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
-      "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/read-pkg/node_modules/path-type": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/path-type/-/path-type-2.0.0.tgz",
-      "integrity": "sha1-8BLMuEFbcJb8LaoQVMPXI4lZTHM=",
-      "dev": true,
-      "dependencies": {
-        "pify": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/read-pkg/node_modules/pify": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
-      "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/readable-stream": {
-      "version": "2.3.7",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
-      "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
-      "dev": true,
-      "dependencies": {
-        "core-util-is": "~1.0.0",
-        "inherits": "~2.0.3",
-        "isarray": "~1.0.0",
-        "process-nextick-args": "~2.0.0",
-        "safe-buffer": "~5.1.1",
-        "string_decoder": "~1.1.1",
-        "util-deprecate": "~1.0.1"
-      }
-    },
-    "node_modules/readable-stream/node_modules/isarray": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-      "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
-      "dev": true
-    },
-    "node_modules/readdirp": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-2.2.1.tgz",
-      "integrity": "sha512-1JU/8q+VgFZyxwrJ+SVIOsh+KywWGpds3NTqikiKpDMZWScmAYyKIgqkO+ARvNWJfXeXR1zxz7aHF4u4CyH6vQ==",
-      "dev": true,
-      "dependencies": {
-        "graceful-fs": "^4.1.11",
-        "micromatch": "^3.1.10",
-        "readable-stream": "^2.0.2"
-      },
-      "engines": {
-        "node": ">=0.10"
-      }
-    },
-    "node_modules/rechoir": {
-      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.7.0.tgz",
-      "integrity": "sha512-ADsDEH2bvbjltXEP+hTIAmeFekTFK0V2BTxMkok6qILyAJEXV0AFfoWcAq4yfll5VdIMd/RVXq0lR+wQi5ZU3Q==",
-      "dev": true,
-      "dependencies": {
-        "resolve": "^1.9.0"
-      },
-      "engines": {
-        "node": ">= 0.10"
-      }
-    },
-    "node_modules/recursive-readdir": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.2.tgz",
-      "integrity": "sha512-nRCcW9Sj7NuZwa2XvH9co8NPeXUBhZP7CRKJtU+cS6PW9FpCIFoI5ib0NT1ZrbNuPoRy0ylyCaUL8Gih4LSyFg==",
-      "dev": true,
-      "dependencies": {
-        "minimatch": "3.0.4"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/redent": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/redent/-/redent-1.0.0.tgz",
-      "integrity": "sha1-z5Fqsf1fHxbfsggi3W7H9zDCr94=",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "indent-string": "^2.1.0",
-        "strip-indent": "^1.0.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/redux": {
-      "version": "4.0.5",
-      "resolved": "https://registry.npmjs.org/redux/-/redux-4.0.5.tgz",
-      "integrity": "sha512-VSz1uMAH24DM6MF72vcojpYPtrTUu3ByVWfPL1nPfVRb5mZVTve5GnNCUV53QM/BZ66xfWrm0CTWoM+Xlz8V1w==",
-      "dependencies": {
-        "loose-envify": "^1.4.0",
-        "symbol-observable": "^1.2.0"
-      }
-    },
-    "node_modules/redux-thunk": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.3.0.tgz",
-      "integrity": "sha512-km6dclyFnmcvxhAcrQV2AkZmPQjzPDjgVlQtR0EQjxZPyJ0BnMf3in1ryuR8A2qU0HldVRfxYXbFSKlI3N7Slw=="
-    },
-    "node_modules/reflect.ownkeys": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/reflect.ownkeys/-/reflect.ownkeys-0.2.0.tgz",
-      "integrity": "sha1-dJrO7H8/34tj+SegSAnpDFwLNGA="
-    },
-    "node_modules/regenerate": {
-      "version": "1.4.2",
-      "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
-      "integrity": "sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==",
-      "dev": true
-    },
-    "node_modules/regenerate-unicode-properties": {
-      "version": "8.2.0",
-      "resolved": "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-8.2.0.tgz",
-      "integrity": "sha512-F9DjY1vKLo/tPePDycuH3dn9H1OTPIkVD9Kz4LODu+F2C75mgjAJ7x/gwy6ZcSNRAAkhNlJSOHRe8k3p+K9WhA==",
-      "dev": true,
-      "dependencies": {
-        "regenerate": "^1.4.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/regenerator-runtime": {
-      "version": "0.13.7",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
-      "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew=="
-    },
-    "node_modules/regenerator-transform": {
-      "version": "0.14.5",
-      "resolved": "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.14.5.tgz",
-      "integrity": "sha512-eOf6vka5IO151Jfsw2NO9WpGX58W6wWmefK3I1zEGr0lOD0u8rwPaNqQL1aRxUaxLeKO3ArNh3VYg1KbaD+FFw==",
-      "dev": true,
-      "dependencies": {
-        "@babel/runtime": "^7.8.4"
-      }
-    },
-    "node_modules/regex-not": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/regex-not/-/regex-not-1.0.2.tgz",
-      "integrity": "sha512-J6SDjUgDxQj5NusnOtdFxDwN/+HWykR8GELwctJ7mdqhcyy1xEc4SRFHUXvxTp661YaVKAjfRLZ9cCqS6tn32A==",
-      "dev": true,
-      "dependencies": {
-        "extend-shallow": "^3.0.2",
-        "safe-regex": "^1.1.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/regex-parser": {
-      "version": "2.2.11",
-      "resolved": "https://registry.npmjs.org/regex-parser/-/regex-parser-2.2.11.tgz",
-      "integrity": "sha512-jbD/FT0+9MBU2XAZluI7w2OBs1RBi6p9M83nkoZayQXXU9e8Robt69FcZc7wU4eJD/YFTjn1JdCk3rbMJajz8Q==",
-      "dev": true
-    },
-    "node_modules/regexp.prototype.flags": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.3.1.tgz",
-      "integrity": "sha512-JiBdRBq91WlY7uRJ0ds7R+dU02i6LKi8r3BuQhNXn+kmeLN+EfHhfjqMRis1zJxnlu88hq/4dx0P2OP3APRTOA==",
-      "dev": true,
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/regexpp": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-2.0.1.tgz",
-      "integrity": "sha512-lv0M6+TkDVniA3aD1Eg0DVpfU/booSu7Eev3TDO/mZKHBfVjgCGTV4t4buppESEYDtkArYFOxTJWv6S5C+iaNw==",
-      "dev": true,
-      "engines": {
-        "node": ">=6.5.0"
-      }
-    },
-    "node_modules/regexpu-core": {
-      "version": "4.7.1",
-      "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-4.7.1.tgz",
-      "integrity": "sha512-ywH2VUraA44DZQuRKzARmw6S66mr48pQVva4LBeRhcOltJ6hExvWly5ZjFLYo67xbIxb6W1q4bAGtgfEl20zfQ==",
-      "dev": true,
-      "dependencies": {
-        "regenerate": "^1.4.0",
-        "regenerate-unicode-properties": "^8.2.0",
-        "regjsgen": "^0.5.1",
-        "regjsparser": "^0.6.4",
-        "unicode-match-property-ecmascript": "^1.0.4",
-        "unicode-match-property-value-ecmascript": "^1.2.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/regjsgen": {
-      "version": "0.5.2",
-      "resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.5.2.tgz",
-      "integrity": "sha512-OFFT3MfrH90xIW8OOSyUrk6QHD5E9JOTeGodiJeBS3J6IwlgzJMNE/1bZklWz5oTg+9dCMyEetclvCVXOPoN3A==",
-      "dev": true
-    },
-    "node_modules/regjsparser": {
-      "version": "0.6.9",
-      "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.6.9.tgz",
-      "integrity": "sha512-ZqbNRz1SNjLAiYuwY0zoXW8Ne675IX5q+YHioAGbCw4X96Mjl2+dcX9B2ciaeyYjViDAfvIjFpQjJgLttTEERQ==",
-      "dev": true,
-      "dependencies": {
-        "jsesc": "~0.5.0"
-      },
-      "bin": {
-        "regjsparser": "bin/parser"
-      }
-    },
-    "node_modules/regjsparser/node_modules/jsesc": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz",
-      "integrity": "sha1-597mbjXW/Bb3EP6R1c9p9w8IkR0=",
-      "dev": true,
-      "bin": {
-        "jsesc": "bin/jsesc"
-      }
-    },
-    "node_modules/relateurl": {
-      "version": "0.2.7",
-      "resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz",
-      "integrity": "sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.10"
-      }
-    },
-    "node_modules/remove-trailing-separator": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz",
-      "integrity": "sha1-wkvOKig62tW8P1jg1IJJuSN52O8=",
-      "dev": true
-    },
-    "node_modules/renderkid": {
-      "version": "2.0.7",
-      "resolved": "https://registry.npmjs.org/renderkid/-/renderkid-2.0.7.tgz",
-      "integrity": "sha512-oCcFyxaMrKsKcTY59qnCAtmDVSLfPbrv6A3tVbPdFMMrv5jaK10V6m40cKsoPNhAqN6rmHW9sswW4o3ruSrwUQ==",
-      "dev": true,
-      "dependencies": {
-        "css-select": "^4.1.3",
-        "dom-converter": "^0.2.0",
-        "htmlparser2": "^6.1.0",
-        "lodash": "^4.17.21",
-        "strip-ansi": "^3.0.1"
-      }
-    },
-    "node_modules/renderkid/node_modules/ansi-regex": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
-      "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/renderkid/node_modules/css-select": {
-      "version": "4.1.3",
-      "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.1.3.tgz",
-      "integrity": "sha512-gT3wBNd9Nj49rAbmtFHj1cljIAOLYSX1nZ8CB7TBO3INYckygm5B7LISU/szY//YmdiSLbJvDLOx9VnMVpMBxA==",
-      "dev": true,
-      "dependencies": {
-        "boolbase": "^1.0.0",
-        "css-what": "^5.0.0",
-        "domhandler": "^4.2.0",
-        "domutils": "^2.6.0",
-        "nth-check": "^2.0.0"
-      }
-    },
-    "node_modules/renderkid/node_modules/css-what": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/css-what/-/css-what-5.0.1.tgz",
-      "integrity": "sha512-FYDTSHb/7KXsWICVsxdmiExPjCfRC4qRFBdVwv7Ax9hMnvMmEjP9RfxTEZ3qPZGmADDn2vAKSo9UcN1jKVYscg==",
-      "dev": true,
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/renderkid/node_modules/dom-serializer": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz",
-      "integrity": "sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==",
-      "dev": true,
-      "dependencies": {
-        "domelementtype": "^2.0.1",
-        "domhandler": "^4.2.0",
-        "entities": "^2.0.0"
-      }
-    },
-    "node_modules/renderkid/node_modules/domelementtype": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz",
-      "integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==",
-      "dev": true
-    },
-    "node_modules/renderkid/node_modules/domutils": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.7.0.tgz",
-      "integrity": "sha512-8eaHa17IwJUPAiB+SoTYBo5mCdeMgdcAoXJ59m6DT1vw+5iLS3gNoqYaRowaBKtGVrOF1Jz4yDTgYKLK2kvfJg==",
-      "dev": true,
-      "dependencies": {
-        "dom-serializer": "^1.0.1",
-        "domelementtype": "^2.2.0",
-        "domhandler": "^4.2.0"
-      }
-    },
-    "node_modules/renderkid/node_modules/nth-check": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.0.0.tgz",
-      "integrity": "sha512-i4sc/Kj8htBrAiH1viZ0TgU8Y5XqCaV/FziYK6TBczxmeKm3AEFWqqF3195yKudrarqy7Zu80Ra5dobFjn9X/Q==",
-      "dev": true,
-      "dependencies": {
-        "boolbase": "^1.0.0"
-      }
-    },
-    "node_modules/renderkid/node_modules/strip-ansi": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
-      "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
-      "dev": true,
-      "dependencies": {
-        "ansi-regex": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/repeat-element": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/repeat-element/-/repeat-element-1.1.3.tgz",
-      "integrity": "sha512-ahGq0ZnV5m5XtZLMb+vP76kcAM5nkLqk0lpqAuojSKGgQtn4eRi4ZZGm2olo2zKFH+sMsWaqOCW1dqAnOru72g==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/repeat-string": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz",
-      "integrity": "sha1-jcrkcOHIirwtYA//Sndihtp15jc=",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10"
-      }
-    },
-    "node_modules/repeating": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/repeating/-/repeating-2.0.1.tgz",
-      "integrity": "sha1-UhTFOpJtNVJwdSf7q0FdvAjQbdo=",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "is-finite": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/replace-ext": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/replace-ext/-/replace-ext-1.0.1.tgz",
-      "integrity": "sha512-yD5BHCe7quCgBph4rMQ+0KkIRKwWCrHDOX1p1Gp6HwjPM5kVoCdKGNhN7ydqqsX6lJEnQDKZ/tFMiEdQ1dvPEw==",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.10"
-      }
-    },
-    "node_modules/request": {
-      "version": "2.88.2",
-      "resolved": "https://registry.npmjs.org/request/-/request-2.88.2.tgz",
-      "integrity": "sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==",
-      "dev": true,
-      "dependencies": {
-        "aws-sign2": "~0.7.0",
-        "aws4": "^1.8.0",
-        "caseless": "~0.12.0",
-        "combined-stream": "~1.0.6",
-        "extend": "~3.0.2",
-        "forever-agent": "~0.6.1",
-        "form-data": "~2.3.2",
-        "har-validator": "~5.1.3",
-        "http-signature": "~1.2.0",
-        "is-typedarray": "~1.0.0",
-        "isstream": "~0.1.2",
-        "json-stringify-safe": "~5.0.1",
-        "mime-types": "~2.1.19",
-        "oauth-sign": "~0.9.0",
-        "performance-now": "^2.1.0",
-        "qs": "~6.5.2",
-        "safe-buffer": "^5.1.2",
-        "tough-cookie": "~2.5.0",
-        "tunnel-agent": "^0.6.0",
-        "uuid": "^3.3.2"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/request-promise-core": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/request-promise-core/-/request-promise-core-1.1.4.tgz",
-      "integrity": "sha512-TTbAfBBRdWD7aNNOoVOBH4pN/KigV6LyapYNNlAPA8JwbovRti1E88m3sYAwsLi5ryhPKsE9APwnjFTgdUjTpw==",
-      "dev": true,
-      "dependencies": {
-        "lodash": "^4.17.19"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/request-promise-native": {
-      "version": "1.0.9",
-      "resolved": "https://registry.npmjs.org/request-promise-native/-/request-promise-native-1.0.9.tgz",
-      "integrity": "sha512-wcW+sIUiWnKgNY0dqCpOZkUbF/I+YPi+f09JZIDa39Ec+q82CpSYniDp+ISgTTbKmnpJWASeJBPZmoxH84wt3g==",
-      "dev": true,
-      "dependencies": {
-        "request-promise-core": "1.1.4",
-        "stealthy-require": "^1.1.1",
-        "tough-cookie": "^2.3.3"
-      },
-      "engines": {
-        "node": ">=0.12.0"
-      }
-    },
-    "node_modules/request-promise-native/node_modules/tough-cookie": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
-      "integrity": "sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==",
-      "dev": true,
-      "dependencies": {
-        "psl": "^1.1.28",
-        "punycode": "^2.1.1"
-      },
-      "engines": {
-        "node": ">=0.8"
-      }
-    },
-    "node_modules/request/node_modules/tough-cookie": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
-      "integrity": "sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==",
-      "dev": true,
-      "dependencies": {
-        "psl": "^1.1.28",
-        "punycode": "^2.1.1"
-      },
-      "engines": {
-        "node": ">=0.8"
-      }
-    },
-    "node_modules/require-directory": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
-      "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I=",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/require-main-filename": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
-      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==",
-      "dev": true
-    },
-    "node_modules/requires-port": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
-      "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
-      "dev": true
-    },
-    "node_modules/reselect": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.0.0.tgz",
-      "integrity": "sha512-qUgANli03jjAyGlnbYVAV5vvnOmJnODyABz51RdBN7M4WaVu8mecZWgyQNkG8Yqe3KRGRt0l4K4B3XVEULC4CA=="
-    },
-    "node_modules/resolve": {
-      "version": "1.17.0",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.17.0.tgz",
-      "integrity": "sha512-ic+7JYiV8Vi2yzQGFWOkiZD5Z9z7O2Zhm9XMaTxdJExKasieFCr+yXZ/WmXsckHiKl12ar0y6XiXDx3m4RHn1w==",
-      "dev": true,
-      "dependencies": {
-        "path-parse": "^1.0.6"
-      }
-    },
-    "node_modules/resolve-cwd": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/resolve-cwd/-/resolve-cwd-3.0.0.tgz",
-      "integrity": "sha512-OrZaX2Mb+rJCpH/6CpSqt9xFVpN++x01XnN2ie9g6P5/3xelLAkXWVADpdz1IHD/KFfEXyE6V0U01OQ3UO2rEg==",
-      "dev": true,
-      "dependencies": {
-        "resolve-from": "^5.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/resolve-cwd/node_modules/resolve-from": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
-      "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/resolve-from": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
-      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/resolve-pathname": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz",
-      "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng=="
-    },
-    "node_modules/resolve-url": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
-      "integrity": "sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=",
-      "dev": true
-    },
-    "node_modules/resolve-url-loader": {
-      "version": "5.0.0-beta.1",
-      "resolved": "https://registry.npmjs.org/resolve-url-loader/-/resolve-url-loader-5.0.0-beta.1.tgz",
-      "integrity": "sha512-MXkuP7+etG/4H96tZnbUOX9g2KiJaEpJ7cnjmVZUYkIXWKh2soTZF/ghczKVw/qKZZplDDjZwR5xGztD9ex7KQ==",
-      "dev": true,
-      "dependencies": {
-        "adjust-sourcemap-loader": "^4.0.0",
-        "convert-source-map": "^1.7.0",
-        "loader-utils": "^2.0.0",
-        "postcss": "^8.2.14",
-        "source-map": "0.6.1"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/responselike": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/responselike/-/responselike-1.0.2.tgz",
-      "integrity": "sha1-kYcg7ztjHFZCvgaPFa3lpG9Loec=",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "lowercase-keys": "^1.0.0"
-      }
-    },
-    "node_modules/restore-cursor": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz",
-      "integrity": "sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==",
-      "dev": true,
-      "dependencies": {
-        "onetime": "^5.1.0",
-        "signal-exit": "^3.0.2"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/ret": {
-      "version": "0.1.15",
-      "resolved": "https://registry.npmjs.org/ret/-/ret-0.1.15.tgz",
-      "integrity": "sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.12"
-      }
-    },
-    "node_modules/retry": {
-      "version": "0.13.1",
-      "resolved": "https://registry.npmjs.org/retry/-/retry-0.13.1.tgz",
-      "integrity": "sha512-XQBQ3I8W1Cge0Seh+6gjj03LbmRFWuoszgK9ooCpwYIrhhoO80pfq4cUkU5DkknwfOfFteRwlZ56PYOGYyFWdg==",
-      "dev": true,
-      "engines": {
-        "node": ">= 4"
-      }
-    },
-    "node_modules/reusify": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
-      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
-      "dev": true,
-      "engines": {
-        "iojs": ">=1.0.0",
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/rgb-regex": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/rgb-regex/-/rgb-regex-1.0.1.tgz",
-      "integrity": "sha1-wODWiC3w4jviVKR16O3UGRX+rrE=",
-      "dev": true
-    },
-    "node_modules/rgba-regex": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/rgba-regex/-/rgba-regex-1.0.0.tgz",
-      "integrity": "sha1-QzdOLiyglosO8VI0YLfXMP8i7rM=",
-      "dev": true
-    },
-    "node_modules/rimraf": {
-      "version": "2.7.1",
-      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
-      "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
-      "dev": true,
-      "dependencies": {
-        "glob": "^7.1.3"
-      },
-      "bin": {
-        "rimraf": "bin.js"
-      }
-    },
-    "node_modules/rsvp": {
-      "version": "4.8.5",
-      "resolved": "https://registry.npmjs.org/rsvp/-/rsvp-4.8.5.tgz",
-      "integrity": "sha512-nfMOlASu9OnRJo1mbEk2cz0D56a1MBNrJ7orjRZQG10XDyuvwksKbuXNp6qa+kbn839HwjwhBzhFmdsaEAfauA==",
-      "dev": true,
-      "engines": {
-        "node": "6.* || >= 7.*"
-      }
-    },
-    "node_modules/rtlcss": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/rtlcss/-/rtlcss-3.2.1.tgz",
-      "integrity": "sha512-S9bh35JXwPIhfun7nFu/HjlNrwELL5nvTJqA1suLfbnqY/mauIL5sBkrJNHziVppX9PA2rJ7NV82+RtzB71mJA==",
-      "dev": true,
-      "dependencies": {
-        "chalk": "^4.1.0",
-        "find-up": "^5.0.0",
-        "mkdirp": "^1.0.4",
-        "postcss": "^8.2.4",
-        "strip-json-comments": "^3.1.1"
-      },
-      "bin": {
-        "rtlcss": "bin/rtlcss.js"
-      }
-    },
-    "node_modules/rtlcss/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"
-      }
-    },
-    "node_modules/rtlcss/node_modules/chalk": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
-      "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
-      "dev": true,
-      "dependencies": {
-        "ansi-styles": "^4.1.0",
-        "supports-color": "^7.1.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/rtlcss/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/rtlcss/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/rtlcss/node_modules/find-up": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
-      "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
-      "dev": true,
-      "dependencies": {
-        "locate-path": "^6.0.0",
-        "path-exists": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/rtlcss/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/rtlcss/node_modules/locate-path": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
-      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
-      "dev": true,
-      "dependencies": {
-        "p-locate": "^5.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/rtlcss/node_modules/mkdirp": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
-      "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
-      "dev": true,
-      "bin": {
-        "mkdirp": "bin/cmd.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/rtlcss/node_modules/p-limit": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
-      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
-      "dev": true,
-      "dependencies": {
-        "yocto-queue": "^0.1.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/rtlcss/node_modules/p-locate": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
-      "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
-      "dev": true,
-      "dependencies": {
-        "p-limit": "^3.0.2"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/rtlcss/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/run-async": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.1.tgz",
-      "integrity": "sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.12.0"
-      }
-    },
-    "node_modules/run-node": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/run-node/-/run-node-1.0.0.tgz",
-      "integrity": "sha512-kc120TBlQ3mih1LSzdAJXo4xn/GWS2ec0l3S+syHDXP9uRr0JAT8Qd3mdMuyjqCzeZktgP3try92cEgf9Nks8A==",
-      "dev": true,
-      "bin": {
-        "run-node": "run-node"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/run-parallel": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
-      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
-      "dev": true,
-      "dependencies": {
-        "queue-microtask": "^1.2.2"
-      }
-    },
-    "node_modules/rx": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/rx/-/rx-4.1.0.tgz",
-      "integrity": "sha1-pfE/957zt0D+MKqAP7CfmIBdR4I=",
-      "dev": true
-    },
-    "node_modules/rxjs": {
-      "version": "6.6.7",
-      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.7.tgz",
-      "integrity": "sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==",
-      "dev": true,
-      "dependencies": {
-        "tslib": "^1.9.0"
-      },
-      "engines": {
-        "npm": ">=2.0.0"
-      }
-    },
-    "node_modules/safe-buffer": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
-      "dev": true
-    },
-    "node_modules/safe-regex": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz",
-      "integrity": "sha1-QKNmnzsHfR6UPURinhV91IAjvy4=",
-      "dev": true,
-      "dependencies": {
-        "ret": "~0.1.10"
-      }
-    },
-    "node_modules/safer-buffer": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
-      "dev": true
-    },
-    "node_modules/sane": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/sane/-/sane-4.1.0.tgz",
-      "integrity": "sha512-hhbzAgTIX8O7SHfp2c8/kREfEn4qO/9q8C9beyY6+tvZ87EpoZ3i1RIEvp27YBswnNbY9mWd6paKVmKbAgLfZA==",
-      "dev": true,
-      "dependencies": {
-        "@cnakazawa/watch": "^1.0.3",
-        "anymatch": "^2.0.0",
-        "capture-exit": "^2.0.0",
-        "exec-sh": "^0.3.2",
-        "execa": "^1.0.0",
-        "fb-watchman": "^2.0.0",
-        "micromatch": "^3.1.4",
-        "minimist": "^1.1.1",
-        "walker": "~1.0.5"
-      },
-      "bin": {
-        "sane": "src/cli.js"
-      },
-      "engines": {
-        "node": "6.* || 8.* || >= 10.*"
-      }
-    },
-    "node_modules/sass": {
-      "version": "1.26.11",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.26.11.tgz",
-      "integrity": "sha512-W1l/+vjGjIamsJ6OnTe0K37U2DBO/dgsv2Z4c89XQ8ZOO6l/VwkqwLSqoYzJeJs6CLuGSTRWc91GbQFL3lvrvw==",
-      "dev": true,
-      "dependencies": {
-        "chokidar": ">=2.0.0 <4.0.0"
-      },
-      "bin": {
-        "sass": "sass.js"
-      },
-      "engines": {
-        "node": ">=8.9.0"
-      }
-    },
-    "node_modules/sass-loader": {
-      "version": "10.0.5",
-      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-10.0.5.tgz",
-      "integrity": "sha512-2LqoNPtKkZq/XbXNQ4C64GFEleSEHKv6NPSI+bMC/l+jpEXGJhiRYkAQToO24MR7NU4JRY2RpLpJ/gjo2Uf13w==",
-      "dev": true,
-      "dependencies": {
-        "klona": "^2.0.4",
-        "loader-utils": "^2.0.0",
-        "neo-async": "^2.6.2",
-        "schema-utils": "^3.0.0",
-        "semver": "^7.3.2"
-      },
-      "engines": {
-        "node": ">= 10.13.0"
-      }
-    },
-    "node_modules/sass-loader/node_modules/ajv": {
-      "version": "6.12.6",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-      "dev": true,
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "fast-json-stable-stringify": "^2.0.0",
-        "json-schema-traverse": "^0.4.1",
-        "uri-js": "^4.2.2"
-      }
-    },
-    "node_modules/sass-loader/node_modules/schema-utils": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.0.tgz",
-      "integrity": "sha512-tTEaeYkyIhEZ9uWgAjDerWov3T9MgX8dhhy2r0IGeeX4W8ngtGl1++dUve/RUqzuaASSh7shwCDJjEzthxki8w==",
-      "dev": true,
-      "dependencies": {
-        "@types/json-schema": "^7.0.7",
-        "ajv": "^6.12.5",
-        "ajv-keywords": "^3.5.2"
-      },
-      "engines": {
-        "node": ">= 10.13.0"
-      }
-    },
-    "node_modules/sass-loader/node_modules/semver": {
-      "version": "7.3.5",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
-      "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==",
-      "dev": true,
-      "dependencies": {
-        "lru-cache": "^6.0.0"
-      },
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/sax": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
-      "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
-      "dev": true
-    },
-    "node_modules/saxes": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/saxes/-/saxes-5.0.1.tgz",
-      "integrity": "sha512-5LBh1Tls8c9xgGjw3QrMwETmTMVk0oFgvrFSvWx62llR2hcEInrKNZ2GZCCuuy2lvWrdl5jhbpeqc5hRYKFOcw==",
-      "dev": true,
-      "dependencies": {
-        "xmlchars": "^2.2.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/scheduler": {
-      "version": "0.19.1",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.19.1.tgz",
-      "integrity": "sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==",
-      "dependencies": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1"
-      }
-    },
-    "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"
-      }
-    },
-    "node_modules/schema-utils/node_modules/ajv": {
-      "version": "6.12.6",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-      "dev": true,
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "fast-json-stable-stringify": "^2.0.0",
-        "json-schema-traverse": "^0.4.1",
-        "uri-js": "^4.2.2"
-      }
-    },
-    "node_modules/seek-bzip": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/seek-bzip/-/seek-bzip-1.0.6.tgz",
-      "integrity": "sha512-e1QtP3YL5tWww8uKaOCQ18UxIT2laNBXHjV/S2WYCiK4udiv8lkG89KRIoCjUagnAmCBurjF4zEVX2ByBbnCjQ==",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "commander": "^2.8.1"
-      },
-      "bin": {
-        "seek-bunzip": "bin/seek-bunzip",
-        "seek-table": "bin/seek-bzip-table"
-      }
-    },
-    "node_modules/seek-bzip/node_modules/commander": {
-      "version": "2.20.3",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
-      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
-      "dev": true,
-      "optional": true
-    },
-    "node_modules/select-hose": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
-      "integrity": "sha1-Yl2GWPhlr0Psliv8N2o3NZpJlMo=",
-      "dev": true
-    },
-    "node_modules/selfsigned": {
-      "version": "1.10.11",
-      "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.11.tgz",
-      "integrity": "sha512-aVmbPOfViZqOZPgRBT0+3u4yZFHpmnIghLMlAcb5/xhp5ZtB/RVnKhz5vl2M32CLXAqR4kha9zfhNg0Lf/sxKA==",
-      "dev": true,
-      "dependencies": {
-        "node-forge": "^0.10.0"
-      }
-    },
-    "node_modules/semver": {
-      "version": "5.7.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-      "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
-      "dev": true,
-      "bin": {
-        "semver": "bin/semver"
-      }
-    },
-    "node_modules/semver-compare": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/semver-compare/-/semver-compare-1.0.0.tgz",
-      "integrity": "sha1-De4hahyUGrN+nvsXiPavxf9VN/w=",
-      "dev": true
-    },
-    "node_modules/semver-regex": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/semver-regex/-/semver-regex-2.0.0.tgz",
-      "integrity": "sha512-mUdIBBvdn0PLOeP3TEkMH7HHeUP3GjsXCwKarjv/kGmUFOYg1VqEemKhoQpWMu6X2I8kHeuVdGibLGkVK+/5Qw==",
-      "dev": true,
-      "optional": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/semver-truncate": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/semver-truncate/-/semver-truncate-1.1.2.tgz",
-      "integrity": "sha1-V/Qd5pcHpicJp+AQS6IRcQnqR+g=",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "semver": "^5.3.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/send": {
-      "version": "0.17.1",
-      "resolved": "https://registry.npmjs.org/send/-/send-0.17.1.tgz",
-      "integrity": "sha512-BsVKsiGcQMFwT8UxypobUKyv7irCNRHk1T0G680vk88yf6LBByGcZJOTJCrTP2xVN6yI+XjPJcNuE3V4fT9sAg==",
-      "dev": true,
-      "dependencies": {
-        "debug": "2.6.9",
-        "depd": "~1.1.2",
-        "destroy": "~1.0.4",
-        "encodeurl": "~1.0.2",
-        "escape-html": "~1.0.3",
-        "etag": "~1.8.1",
-        "fresh": "0.5.2",
-        "http-errors": "~1.7.2",
-        "mime": "1.6.0",
-        "ms": "2.1.1",
-        "on-finished": "~2.3.0",
-        "range-parser": "~1.2.1",
-        "statuses": "~1.5.0"
-      },
-      "engines": {
-        "node": ">= 0.8.0"
-      }
-    },
-    "node_modules/send/node_modules/debug": {
-      "version": "2.6.9",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-      "dev": true,
-      "dependencies": {
-        "ms": "2.0.0"
-      }
-    },
-    "node_modules/send/node_modules/debug/node_modules/ms": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
-      "dev": true
-    },
-    "node_modules/send/node_modules/ms": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
-      "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==",
-      "dev": true
-    },
-    "node_modules/serialize-javascript": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.0.tgz",
-      "integrity": "sha512-Qr3TosvguFt8ePWqsvRfrKyQXIiW+nGbYpy8XK24NQHE83caxWt+mIymTT19DGFbNWNLfEwsrkSmN64lVWB9ag==",
-      "dev": true,
-      "dependencies": {
-        "randombytes": "^2.1.0"
-      }
-    },
-    "node_modules/serve-index": {
-      "version": "1.9.1",
-      "resolved": "https://registry.npmjs.org/serve-index/-/serve-index-1.9.1.tgz",
-      "integrity": "sha1-03aNabHn2C5c4FD/9bRTvqEqkjk=",
-      "dev": true,
-      "dependencies": {
-        "accepts": "~1.3.4",
-        "batch": "0.6.1",
-        "debug": "2.6.9",
-        "escape-html": "~1.0.3",
-        "http-errors": "~1.6.2",
-        "mime-types": "~2.1.17",
-        "parseurl": "~1.3.2"
-      },
-      "engines": {
-        "node": ">= 0.8.0"
-      }
-    },
-    "node_modules/serve-index/node_modules/debug": {
-      "version": "2.6.9",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-      "dev": true,
-      "dependencies": {
-        "ms": "2.0.0"
-      }
-    },
-    "node_modules/serve-index/node_modules/http-errors": {
-      "version": "1.6.3",
-      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",
-      "integrity": "sha1-i1VoC7S+KDoLW/TqLjhYC+HZMg0=",
-      "dev": true,
-      "dependencies": {
-        "depd": "~1.1.2",
-        "inherits": "2.0.3",
-        "setprototypeof": "1.1.0",
-        "statuses": ">= 1.4.0 < 2"
-      },
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/serve-index/node_modules/inherits": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
-      "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
-      "dev": true
-    },
-    "node_modules/serve-index/node_modules/setprototypeof": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.0.tgz",
-      "integrity": "sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ==",
-      "dev": true
-    },
-    "node_modules/serve-static": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.14.1.tgz",
-      "integrity": "sha512-JMrvUwE54emCYWlTI+hGrGv5I8dEwmco/00EvkzIIsR7MqrHonbD9pO2MOfFnpFntl7ecpZs+3mW+XbQZu9QCg==",
-      "dev": true,
-      "dependencies": {
-        "encodeurl": "~1.0.2",
-        "escape-html": "~1.0.3",
-        "parseurl": "~1.3.3",
-        "send": "0.17.1"
-      },
-      "engines": {
-        "node": ">= 0.8.0"
-      }
-    },
-    "node_modules/set-blocking": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
-      "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=",
-      "dev": true
-    },
-    "node_modules/set-value": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/set-value/-/set-value-2.0.1.tgz",
-      "integrity": "sha512-JxHc1weCN68wRY0fhCoXpyK55m/XPHafOmK4UWD7m2CI14GMcFypt4w/0+NV5f/ZMby2F6S2wwA7fgynh9gWSw==",
-      "dev": true,
-      "dependencies": {
-        "extend-shallow": "^2.0.1",
-        "is-extendable": "^0.1.1",
-        "is-plain-object": "^2.0.3",
-        "split-string": "^3.0.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/set-value/node_modules/extend-shallow": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-      "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-      "dev": true,
-      "dependencies": {
-        "is-extendable": "^0.1.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/setprototypeof": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.1.tgz",
-      "integrity": "sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw==",
-      "dev": true
-    },
-    "node_modules/shallow-clone": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-3.0.1.tgz",
-      "integrity": "sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==",
-      "dev": true,
-      "dependencies": {
-        "kind-of": "^6.0.2"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/shallow-equal": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/shallow-equal/-/shallow-equal-1.2.1.tgz",
-      "integrity": "sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA=="
-    },
-    "node_modules/shebang-command": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
-      "integrity": "sha1-RKrGW2lbAzmJaMOfNj/uXer98eo=",
-      "dev": true,
-      "dependencies": {
-        "shebang-regex": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/shebang-regex": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-1.0.0.tgz",
-      "integrity": "sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/shell-quote": {
-      "version": "1.7.2",
-      "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.7.2.tgz",
-      "integrity": "sha512-mRz/m/JVscCrkMyPqHc/bczi3OQHkLTqXHEFu0zDhK/qfv3UcOA4SVmRCLmos4bhjr9ekVQubj/R7waKapmiQg==",
-      "dev": true
-    },
-    "node_modules/shellwords": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/shellwords/-/shellwords-0.1.1.tgz",
-      "integrity": "sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==",
-      "dev": true
-    },
-    "node_modules/side-channel": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
-      "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
-      "dev": true,
-      "dependencies": {
-        "call-bind": "^1.0.0",
-        "get-intrinsic": "^1.0.2",
-        "object-inspect": "^1.9.0"
-      }
-    },
-    "node_modules/side-channel/node_modules/object-inspect": {
-      "version": "1.10.3",
-      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.10.3.tgz",
-      "integrity": "sha512-e5mCJlSH7poANfC8z8S9s9S2IN5/4Zb3aZ33f5s8YqoazCFzNLloLU8r5VCG+G7WoqLvAAZoVMcy3tp/3X0Plw==",
-      "dev": true
-    },
-    "node_modules/signal-exit": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.3.tgz",
-      "integrity": "sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==",
-      "dev": true
-    },
-    "node_modules/sisteransi": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
-      "integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==",
-      "dev": true
-    },
-    "node_modules/slash": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz",
-      "integrity": "sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/slice-ansi": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-2.1.0.tgz",
-      "integrity": "sha512-Qu+VC3EwYLldKa1fCxuuvULvSJOKEgk9pi8dZeCVK7TqBfUNTH4sFkk4joj8afVSfAYgJoSOetjx9QWOJ5mYoQ==",
-      "dev": true,
-      "dependencies": {
-        "ansi-styles": "^3.2.0",
-        "astral-regex": "^1.0.0",
-        "is-fullwidth-code-point": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/slice-ansi/node_modules/is-fullwidth-code-point": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
-      "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/snapdragon": {
-      "version": "0.8.2",
-      "resolved": "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.2.tgz",
-      "integrity": "sha512-FtyOnWN/wCHTVXOMwvSv26d+ko5vWlIDD6zoUJ7LW8vh+ZBC8QdljveRP+crNrtBwioEUWy/4dMtbBjA4ioNlg==",
-      "dev": true,
-      "dependencies": {
-        "base": "^0.11.1",
-        "debug": "^2.2.0",
-        "define-property": "^0.2.5",
-        "extend-shallow": "^2.0.1",
-        "map-cache": "^0.2.2",
-        "source-map": "^0.5.6",
-        "source-map-resolve": "^0.5.0",
-        "use": "^3.1.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/snapdragon-node": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/snapdragon-node/-/snapdragon-node-2.1.1.tgz",
-      "integrity": "sha512-O27l4xaMYt/RSQ5TR3vpWCAB5Kb/czIcqUFOM/C4fYcLnbZUc1PkjTAMjof2pBWaSTwOUd6qUHcFGVGj7aIwnw==",
-      "dev": true,
-      "dependencies": {
-        "define-property": "^1.0.0",
-        "isobject": "^3.0.0",
-        "snapdragon-util": "^3.0.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/snapdragon-node/node_modules/define-property": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
-      "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=",
-      "dev": true,
-      "dependencies": {
-        "is-descriptor": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/snapdragon-node/node_modules/is-accessor-descriptor": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
-      "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==",
-      "dev": true,
-      "dependencies": {
-        "kind-of": "^6.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/snapdragon-node/node_modules/is-data-descriptor": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz",
-      "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==",
-      "dev": true,
-      "dependencies": {
-        "kind-of": "^6.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/snapdragon-node/node_modules/is-descriptor": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz",
-      "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==",
-      "dev": true,
-      "dependencies": {
-        "is-accessor-descriptor": "^1.0.0",
-        "is-data-descriptor": "^1.0.0",
-        "kind-of": "^6.0.2"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/snapdragon-util": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/snapdragon-util/-/snapdragon-util-3.0.1.tgz",
-      "integrity": "sha512-mbKkMdQKsjX4BAL4bRYTj21edOf8cN7XHdYUJEe+Zn99hVEYcMvKPct1IqNe7+AZPirn8BCDOQBHQZknqmKlZQ==",
-      "dev": true,
-      "dependencies": {
-        "kind-of": "^3.2.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/snapdragon-util/node_modules/is-buffer": {
-      "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
-      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
-      "dev": true
-    },
-    "node_modules/snapdragon-util/node_modules/kind-of": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-      "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
-      "dev": true,
-      "dependencies": {
-        "is-buffer": "^1.1.5"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/snapdragon/node_modules/debug": {
-      "version": "2.6.9",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-      "dev": true,
-      "dependencies": {
-        "ms": "2.0.0"
-      }
-    },
-    "node_modules/snapdragon/node_modules/define-property": {
-      "version": "0.2.5",
-      "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
-      "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
-      "dev": true,
-      "dependencies": {
-        "is-descriptor": "^0.1.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/snapdragon/node_modules/extend-shallow": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-      "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-      "dev": true,
-      "dependencies": {
-        "is-extendable": "^0.1.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/snapdragon/node_modules/source-map": {
-      "version": "0.5.7",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-      "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/sockjs": {
-      "version": "0.3.21",
-      "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.21.tgz",
-      "integrity": "sha512-DhbPFGpxjc6Z3I+uX07Id5ZO2XwYsWOrYjaSeieES78cq+JaJvVe5q/m1uvjIQhXinhIeCFRH6JgXe+mvVMyXw==",
-      "dev": true,
-      "dependencies": {
-        "faye-websocket": "^0.11.3",
-        "uuid": "^3.4.0",
-        "websocket-driver": "^0.7.4"
-      }
-    },
-    "node_modules/sort-keys": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/sort-keys/-/sort-keys-1.1.2.tgz",
-      "integrity": "sha1-RBttTTRnmPG05J6JIK37oOVD+a0=",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "is-plain-obj": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/sort-keys-length": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/sort-keys-length/-/sort-keys-length-1.0.1.tgz",
-      "integrity": "sha1-nLb09OnkgVWmqgZx7dM2/xR5oYg=",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "sort-keys": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/source-list-map": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
-      "integrity": "sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw==",
-      "dev": true
-    },
-    "node_modules/source-map": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/source-map-js": {
-      "version": "0.6.2",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-0.6.2.tgz",
-      "integrity": "sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/source-map-loader": {
-      "version": "0.2.4",
-      "resolved": "https://registry.npmjs.org/source-map-loader/-/source-map-loader-0.2.4.tgz",
-      "integrity": "sha512-OU6UJUty+i2JDpTItnizPrlpOIBLmQbWMuBg9q5bVtnHACqw1tn9nNwqJLbv0/00JjnJb/Ee5g5WS5vrRv7zIQ==",
-      "dev": true,
-      "dependencies": {
-        "async": "^2.5.0",
-        "loader-utils": "^1.1.0"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/source-map-loader/node_modules/json5": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
-      "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
-      "dev": true,
-      "dependencies": {
-        "minimist": "^1.2.0"
-      },
-      "bin": {
-        "json5": "lib/cli.js"
-      }
-    },
-    "node_modules/source-map-loader/node_modules/loader-utils": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz",
-      "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
-      "dev": true,
-      "dependencies": {
-        "big.js": "^5.2.2",
-        "emojis-list": "^3.0.0",
-        "json5": "^1.0.1"
-      },
-      "engines": {
-        "node": ">=4.0.0"
-      }
-    },
-    "node_modules/source-map-resolve": {
-      "version": "0.5.3",
-      "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.5.3.tgz",
-      "integrity": "sha512-Htz+RnsXWk5+P2slx5Jh3Q66vhQj1Cllm0zvnaY98+NFx+Dv2CF/f5O/t8x+KaNdrdIAsruNzoh/KpialbqAnw==",
-      "dev": true,
-      "dependencies": {
-        "atob": "^2.1.2",
-        "decode-uri-component": "^0.2.0",
-        "resolve-url": "^0.2.1",
-        "source-map-url": "^0.4.0",
-        "urix": "^0.1.0"
-      }
-    },
-    "node_modules/source-map-support": {
-      "version": "0.5.19",
-      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.19.tgz",
-      "integrity": "sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==",
-      "dev": true,
-      "dependencies": {
-        "buffer-from": "^1.0.0",
-        "source-map": "^0.6.0"
-      }
-    },
-    "node_modules/source-map-url": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/source-map-url/-/source-map-url-0.4.0.tgz",
-      "integrity": "sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM=",
-      "dev": true
-    },
-    "node_modules/spawn-sync": {
-      "version": "1.0.15",
-      "resolved": "https://registry.npmjs.org/spawn-sync/-/spawn-sync-1.0.15.tgz",
-      "integrity": "sha1-sAeZVX63+wyDdsKdROih6mfldHY=",
-      "dev": true,
-      "dependencies": {
-        "concat-stream": "^1.4.7",
-        "os-shim": "^0.1.2"
-      }
-    },
-    "node_modules/spdx-correct": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.1.tgz",
-      "integrity": "sha512-cOYcUWwhCuHCXi49RhFRCyJEK3iPj1Ziz9DpViV3tbZOwXD49QzIN3MpOLJNxh2qwq2lJJZaKMVw9qNi4jTC0w==",
-      "dev": true,
-      "dependencies": {
-        "spdx-expression-parse": "^3.0.0",
-        "spdx-license-ids": "^3.0.0"
-      }
-    },
-    "node_modules/spdx-exceptions": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.3.0.tgz",
-      "integrity": "sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A==",
-      "dev": true
-    },
-    "node_modules/spdx-expression-parse": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz",
-      "integrity": "sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==",
-      "dev": true,
-      "dependencies": {
-        "spdx-exceptions": "^2.1.0",
-        "spdx-license-ids": "^3.0.0"
-      }
-    },
-    "node_modules/spdx-license-ids": {
-      "version": "3.0.5",
-      "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.5.tgz",
-      "integrity": "sha512-J+FWzZoynJEXGphVIS+XEh3kFSjZX/1i9gFBaWQcB+/tmpe2qUsSBABpcxqxnAxFdiUFEgAX1bjYGQvIZmoz9Q==",
-      "dev": true
-    },
-    "node_modules/spdy": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/spdy/-/spdy-4.0.2.tgz",
-      "integrity": "sha512-r46gZQZQV+Kl9oItvl1JZZqJKGr+oEkB08A6BzkiR7593/7IbtuncXHd2YoYeTsG4157ZssMu9KYvUHLcjcDoA==",
-      "dev": true,
-      "dependencies": {
-        "debug": "^4.1.0",
-        "handle-thing": "^2.0.0",
-        "http-deceiver": "^1.2.7",
-        "select-hose": "^2.0.0",
-        "spdy-transport": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
-    "node_modules/spdy-transport": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/spdy-transport/-/spdy-transport-3.0.0.tgz",
-      "integrity": "sha512-hsLVFE5SjA6TCisWeJXFKniGGOpBgMLmerfO2aCyCU5s7nJ/rpAepqmFifv/GCbSbueEeAJJnmSQ2rKC/g8Fcw==",
-      "dev": true,
-      "dependencies": {
-        "debug": "^4.1.0",
-        "detect-node": "^2.0.4",
-        "hpack.js": "^2.1.6",
-        "obuf": "^1.1.2",
-        "readable-stream": "^3.0.6",
-        "wbuf": "^1.7.3"
-      }
-    },
-    "node_modules/spdy-transport/node_modules/readable-stream": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
-      "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
-      "dev": true,
-      "dependencies": {
-        "inherits": "^2.0.3",
-        "string_decoder": "^1.1.1",
-        "util-deprecate": "^1.0.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/split-string": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz",
-      "integrity": "sha512-NzNVhJDYpwceVVii8/Hu6DKfD2G+NrQHlS/V/qgv763EYudVwEcMQNxd2lh+0VrUByXN/oJkl5grOhYWvQUYiw==",
-      "dev": true,
-      "dependencies": {
-        "extend-shallow": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/sprintf-js": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
-      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
-      "dev": true
-    },
-    "node_modules/squeak": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/squeak/-/squeak-1.3.0.tgz",
-      "integrity": "sha1-MwRQN7ZDiLVnZ0uEMiplIQc5FsM=",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "chalk": "^1.0.0",
-        "console-stream": "^0.1.1",
-        "lpad-align": "^1.0.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/squeak/node_modules/ansi-regex": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
-      "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
-      "dev": true,
-      "optional": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/squeak/node_modules/ansi-styles": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
-      "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
-      "dev": true,
-      "optional": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/squeak/node_modules/chalk": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
-      "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "ansi-styles": "^2.2.1",
-        "escape-string-regexp": "^1.0.2",
-        "has-ansi": "^2.0.0",
-        "strip-ansi": "^3.0.0",
-        "supports-color": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/squeak/node_modules/strip-ansi": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
-      "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "ansi-regex": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/squeak/node_modules/supports-color": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
-      "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
-      "dev": true,
-      "optional": true,
-      "engines": {
-        "node": ">=0.8.0"
-      }
-    },
-    "node_modules/sshpk": {
-      "version": "1.16.1",
-      "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.16.1.tgz",
-      "integrity": "sha512-HXXqVUq7+pcKeLqqZj6mHFUMvXtOJt1uoUx09pFW6011inTMxqI8BA8PM95myrIyyKwdnzjdFjLiE6KBPVtJIg==",
-      "dev": true,
-      "dependencies": {
-        "asn1": "~0.2.3",
-        "assert-plus": "^1.0.0",
-        "bcrypt-pbkdf": "^1.0.0",
-        "dashdash": "^1.12.0",
-        "ecc-jsbn": "~0.1.1",
-        "getpass": "^0.1.1",
-        "jsbn": "~0.1.0",
-        "safer-buffer": "^2.0.2",
-        "tweetnacl": "~0.14.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/stable": {
-      "version": "0.1.8",
-      "resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz",
-      "integrity": "sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==",
-      "dev": true
-    },
-    "node_modules/stack-trace": {
-      "version": "0.0.10",
-      "resolved": "https://registry.npmjs.org/stack-trace/-/stack-trace-0.0.10.tgz",
-      "integrity": "sha1-VHxws0fo0ytOEI6hoqFZ5f3eGcA=",
-      "dev": true,
-      "engines": {
-        "node": "*"
-      }
-    },
-    "node_modules/stack-utils": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/stack-utils/-/stack-utils-1.0.2.tgz",
-      "integrity": "sha512-MTX+MeG5U994cazkjd/9KNAapsHnibjMLnfXodlkXw76JEea0UiNzrqidzo1emMwk7w5Qhc9jd4Bn9TBb1MFwA==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/static-extend": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/static-extend/-/static-extend-0.1.2.tgz",
-      "integrity": "sha1-YICcOcv/VTNyJv1eC1IPNB8ftcY=",
-      "dev": true,
-      "dependencies": {
-        "define-property": "^0.2.5",
-        "object-copy": "^0.1.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/static-extend/node_modules/define-property": {
-      "version": "0.2.5",
-      "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
-      "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
-      "dev": true,
-      "dependencies": {
-        "is-descriptor": "^0.1.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/statuses": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
-      "integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/stealthy-require": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/stealthy-require/-/stealthy-require-1.1.1.tgz",
-      "integrity": "sha1-NbCYdbT/SfJqd35QmzCQoyJr8ks=",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/stream-events": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/stream-events/-/stream-events-1.0.5.tgz",
-      "integrity": "sha512-E1GUzBSgvct8Jsb3v2X15pjzN1tYebtbLaMg+eBOUOAxgbLoSbT2NS91ckc5lJD1KfLjId+jXJRgo0qnV5Nerg==",
-      "dev": true,
-      "dependencies": {
-        "stubs": "^3.0.0"
-      }
-    },
-    "node_modules/strict-uri-encode": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz",
-      "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/string_decoder": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
-      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
-      "dev": true,
-      "dependencies": {
-        "safe-buffer": "~5.1.0"
-      }
-    },
-    "node_modules/string-length": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/string-length/-/string-length-4.0.2.tgz",
-      "integrity": "sha512-+l6rNN5fYHNhZZy41RXsYptCjA2Igmq4EG7kZAYFQI1E1VTXarr6ZPXBg6eq7Y6eK4FEhY6AJlyuFIb/v/S0VQ==",
-      "dev": true,
-      "dependencies": {
-        "char-regex": "^1.0.2",
-        "strip-ansi": "^6.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/string-length/node_modules/strip-ansi": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
-      "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
-      "dev": true,
-      "dependencies": {
-        "ansi-regex": "^5.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/string-width": {
-      "version": "4.2.2",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.2.tgz",
-      "integrity": "sha512-XBJbT3N4JhVumXE0eoLU9DCjcaF92KLNqTmFCnG1pf8duUxFGwtP6AD6nkjw9a3IdiRtL3E2w3JDiE/xi3vOeA==",
-      "dev": true,
-      "dependencies": {
-        "emoji-regex": "^8.0.0",
-        "is-fullwidth-code-point": "^3.0.0",
-        "strip-ansi": "^6.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/string-width/node_modules/strip-ansi": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
-      "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
-      "dev": true,
-      "dependencies": {
-        "ansi-regex": "^5.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/string.prototype.matchall": {
-      "version": "4.0.5",
-      "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.5.tgz",
-      "integrity": "sha512-Z5ZaXO0svs0M2xd/6By3qpeKpLKd9mO4v4q3oMEQrk8Ck4xOD5d5XeBOOjGrmVZZ/AHB1S0CgG4N5r1G9N3E2Q==",
-      "dev": true,
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.18.2",
-        "get-intrinsic": "^1.1.1",
-        "has-symbols": "^1.0.2",
-        "internal-slot": "^1.0.3",
-        "regexp.prototype.flags": "^1.3.1",
-        "side-channel": "^1.0.4"
-      }
-    },
-    "node_modules/string.prototype.matchall/node_modules/es-abstract": {
-      "version": "1.18.3",
-      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.18.3.tgz",
-      "integrity": "sha512-nQIr12dxV7SSxE6r6f1l3DtAeEYdsGpps13dR0TwJg1S8gyp4ZPgy3FZcHBgbiQqnoqSTb+oC+kO4UQ0C/J8vw==",
-      "dev": true,
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "es-to-primitive": "^1.2.1",
-        "function-bind": "^1.1.1",
-        "get-intrinsic": "^1.1.1",
-        "has": "^1.0.3",
-        "has-symbols": "^1.0.2",
-        "is-callable": "^1.2.3",
-        "is-negative-zero": "^2.0.1",
-        "is-regex": "^1.1.3",
-        "is-string": "^1.0.6",
-        "object-inspect": "^1.10.3",
-        "object-keys": "^1.1.1",
-        "object.assign": "^4.1.2",
-        "string.prototype.trimend": "^1.0.4",
-        "string.prototype.trimstart": "^1.0.4",
-        "unbox-primitive": "^1.0.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/string.prototype.matchall/node_modules/has-symbols": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.2.tgz",
-      "integrity": "sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw==",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/string.prototype.matchall/node_modules/is-callable": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.3.tgz",
-      "integrity": "sha512-J1DcMe8UYTBSrKezuIUTUwjXsho29693unXM2YhJUTR2txK/eG47bvNa/wipPFmZFgr/N6f1GA66dv0mEyTIyQ==",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/string.prototype.matchall/node_modules/is-regex": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.3.tgz",
-      "integrity": "sha512-qSVXFz28HM7y+IWX6vLCsexdlvzT1PJNFSBuaQLQ5o0IEw8UDYW6/2+eCMVyIsbM8CNLX2a/QWmSpyxYEHY7CQ==",
-      "dev": true,
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "has-symbols": "^1.0.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/string.prototype.matchall/node_modules/object-inspect": {
-      "version": "1.10.3",
-      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.10.3.tgz",
-      "integrity": "sha512-e5mCJlSH7poANfC8z8S9s9S2IN5/4Zb3aZ33f5s8YqoazCFzNLloLU8r5VCG+G7WoqLvAAZoVMcy3tp/3X0Plw==",
-      "dev": true
-    },
-    "node_modules/string.prototype.matchall/node_modules/object.assign": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.2.tgz",
-      "integrity": "sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==",
-      "dev": true,
-      "dependencies": {
-        "call-bind": "^1.0.0",
-        "define-properties": "^1.1.3",
-        "has-symbols": "^1.0.1",
-        "object-keys": "^1.1.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/string.prototype.matchall/node_modules/string.prototype.trimend": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.4.tgz",
-      "integrity": "sha512-y9xCjw1P23Awk8EvTpcyL2NIr1j7wJ39f+k6lvRnSMz+mz9CGz9NYPelDk42kOz6+ql8xjfK8oYzy3jAP5QU5A==",
-      "dev": true,
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3"
-      }
-    },
-    "node_modules/string.prototype.matchall/node_modules/string.prototype.trimstart": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.4.tgz",
-      "integrity": "sha512-jh6e984OBfvxS50tdY2nRZnoC5/mLFKOREQfw8t5yytkoUsJRNxvI/E39qu1sD0OtWI3OC0XgKSmcWwziwYuZw==",
-      "dev": true,
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3"
-      }
-    },
-    "node_modules/string.prototype.trimend": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.1.tgz",
-      "integrity": "sha512-LRPxFUaTtpqYsTeNKaFOw3R4bxIzWOnbQ837QfBylo8jIxtcbK/A/sMV7Q+OAV/vWo+7s25pOE10KYSjaSO06g==",
-      "dependencies": {
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.17.5"
-      }
-    },
-    "node_modules/string.prototype.trimstart": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.1.tgz",
-      "integrity": "sha512-XxZn+QpvrBI1FOcg6dIpxUPgWCPuNXvMD72aaRaUQv1eD4e/Qy8i/hFTe0BUmD60p/QA6bh1avmuPTfNjqVWRw==",
-      "dependencies": {
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.17.5"
-      }
-    },
-    "node_modules/strip-ansi": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
-      "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
-      "dev": true,
-      "dependencies": {
-        "ansi-regex": "^4.1.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/strip-ansi/node_modules/ansi-regex": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
-      "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/strip-bom": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
-      "integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/strip-dirs": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/strip-dirs/-/strip-dirs-2.1.0.tgz",
-      "integrity": "sha512-JOCxOeKLm2CAS73y/U4ZeZPTkE+gNVCzKt7Eox84Iej1LT/2pTWYpZKJuxwQpvX1LiZb1xokNR7RLfuBAa7T3g==",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "is-natural-number": "^4.0.1"
-      }
-    },
-    "node_modules/strip-eof": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz",
-      "integrity": "sha1-u0P/VZim6wXYm1n80SnJgzE2Br8=",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/strip-final-newline": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz",
-      "integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/strip-indent": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-1.0.1.tgz",
-      "integrity": "sha1-DHlipq3vp7vUrDZkYKY4VSrhoKI=",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "get-stdin": "^4.0.1"
-      },
-      "bin": {
-        "strip-indent": "cli.js"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/strip-json-comments": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
-      "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/strip-outer": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/strip-outer/-/strip-outer-1.0.1.tgz",
-      "integrity": "sha512-k55yxKHwaXnpYGsOzg4Vl8+tDrWylxDEpknGjhTiZB8dFRU5rTo9CAzeycivxV3s+zlTKwrs6WxMxR95n26kwg==",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "escape-string-regexp": "^1.0.2"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/stubs": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/stubs/-/stubs-3.0.0.tgz",
-      "integrity": "sha1-6NK6H6nJBXAwPAMLaQD31fiavls=",
-      "dev": true
-    },
-    "node_modules/style-loader": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-2.0.0.tgz",
-      "integrity": "sha512-Z0gYUJmzZ6ZdRUqpg1r8GsaFKypE+3xAzuFeMuoHgjc9KZv3wMyCRjQIWEbhoFSq7+7yoHXySDJyyWQaPajeiQ==",
-      "dev": true,
-      "dependencies": {
-        "loader-utils": "^2.0.0",
-        "schema-utils": "^3.0.0"
-      },
-      "engines": {
-        "node": ">= 10.13.0"
-      }
-    },
-    "node_modules/style-loader/node_modules/ajv": {
-      "version": "6.12.6",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-      "dev": true,
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "fast-json-stable-stringify": "^2.0.0",
-        "json-schema-traverse": "^0.4.1",
-        "uri-js": "^4.2.2"
-      }
-    },
-    "node_modules/style-loader/node_modules/schema-utils": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.0.tgz",
-      "integrity": "sha512-tTEaeYkyIhEZ9uWgAjDerWov3T9MgX8dhhy2r0IGeeX4W8ngtGl1++dUve/RUqzuaASSh7shwCDJjEzthxki8w==",
-      "dev": true,
-      "dependencies": {
-        "@types/json-schema": "^7.0.7",
-        "ajv": "^6.12.5",
-        "ajv-keywords": "^3.5.2"
-      },
-      "engines": {
-        "node": ">= 10.13.0"
-      }
-    },
-    "node_modules/stylehacks": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.0.1.tgz",
-      "integrity": "sha512-Es0rVnHIqbWzveU1b24kbw92HsebBepxfcqe5iix7t9j0PQqhs0IxXVXv0pY2Bxa08CgMkzD6OWql7kbGOuEdA==",
-      "dev": true,
-      "dependencies": {
-        "browserslist": "^4.16.0",
-        "postcss-selector-parser": "^6.0.4"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14.0"
-      }
-    },
-    "node_modules/superagent": {
-      "version": "3.8.3",
-      "resolved": "https://registry.npmjs.org/superagent/-/superagent-3.8.3.tgz",
-      "integrity": "sha512-GLQtLMCoEIK4eDv6OGtkOoSMt3D+oq0y3dsxMuYuDvaNUvuT8eFBuLmfR0iYYzHC1e8hpzC6ZsxbuP6DIalMFA==",
-      "dev": true,
-      "dependencies": {
-        "component-emitter": "^1.2.0",
-        "cookiejar": "^2.1.0",
-        "debug": "^3.1.0",
-        "extend": "^3.0.0",
-        "form-data": "^2.3.1",
-        "formidable": "^1.2.0",
-        "methods": "^1.1.1",
-        "mime": "^1.4.1",
-        "qs": "^6.5.1",
-        "readable-stream": "^2.3.5"
-      },
-      "engines": {
-        "node": ">= 4.0"
-      }
-    },
-    "node_modules/superagent/node_modules/debug": {
-      "version": "3.2.7",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
-      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
-      "dev": true,
-      "dependencies": {
-        "ms": "^2.1.1"
-      }
-    },
-    "node_modules/superagent/node_modules/ms": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "dev": true
-    },
-    "node_modules/supports-color": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
-      "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
-      "dev": true,
-      "dependencies": {
-        "has-flag": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/supports-hyperlinks": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/supports-hyperlinks/-/supports-hyperlinks-2.2.0.tgz",
-      "integrity": "sha512-6sXEzV5+I5j8Bmq9/vUphGRM/RJNT9SCURJLjwfOg51heRtguGWDzcaBlgAzKhQa0EVNpPEKzQuBwZ8S8WaCeQ==",
-      "dev": true,
-      "dependencies": {
-        "has-flag": "^4.0.0",
-        "supports-color": "^7.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/supports-hyperlinks/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/supports-hyperlinks/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/svg-parser": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz",
-      "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==",
-      "dev": true
-    },
-    "node_modules/svgo": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz",
-      "integrity": "sha512-yhy/sQYxR5BkC98CY7o31VGsg014AKLEPxdfhora76l36hD9Rdy5NZA/Ocn6yayNPgSamYdtX2rFJdcv07AYVw==",
-      "dev": true,
-      "dependencies": {
-        "chalk": "^2.4.1",
-        "coa": "^2.0.2",
-        "css-select": "^2.0.0",
-        "css-select-base-adapter": "^0.1.1",
-        "css-tree": "1.0.0-alpha.37",
-        "csso": "^4.0.2",
-        "js-yaml": "^3.13.1",
-        "mkdirp": "~0.5.1",
-        "object.values": "^1.1.0",
-        "sax": "~1.2.4",
-        "stable": "^0.1.8",
-        "unquote": "~1.1.1",
-        "util.promisify": "~1.0.0"
-      },
-      "bin": {
-        "svgo": "bin/svgo"
-      },
-      "engines": {
-        "node": ">=4.0.0"
-      }
-    },
-    "node_modules/symbol-observable": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
-      "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/symbol-tree": {
-      "version": "3.2.4",
-      "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
-      "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
-      "dev": true
-    },
-    "node_modules/tabbable": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-4.0.0.tgz",
-      "integrity": "sha512-H1XoH1URcBOa/rZZWxLxHCtOdVUEev+9vo5YdYhC9tCY4wnybX+VQrCYuy9ubkg69fCBxCONJOSLGfw0DWMffQ=="
-    },
-    "node_modules/table": {
-      "version": "5.4.6",
-      "resolved": "https://registry.npmjs.org/table/-/table-5.4.6.tgz",
-      "integrity": "sha512-wmEc8m4fjnob4gt5riFRtTu/6+4rSe12TpAELNSqHMfF3IqnA+CH37USM6/YR3qRZv7e56kAEAtd6nKZaxe0Ug==",
-      "dev": true,
-      "dependencies": {
-        "ajv": "^6.10.2",
-        "lodash": "^4.17.14",
-        "slice-ansi": "^2.1.0",
-        "string-width": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
-    "node_modules/table/node_modules/emoji-regex": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz",
-      "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==",
-      "dev": true
-    },
-    "node_modules/table/node_modules/is-fullwidth-code-point": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
-      "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/table/node_modules/string-width": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
-      "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
-      "dev": true,
-      "dependencies": {
-        "emoji-regex": "^7.0.1",
-        "is-fullwidth-code-point": "^2.0.0",
-        "strip-ansi": "^5.1.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/tabtab": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/tabtab/-/tabtab-2.2.2.tgz",
-      "integrity": "sha1-egR/FDsBC0y9MfhX6ClhUSy/ThQ=",
-      "dev": true,
-      "dependencies": {
-        "debug": "^2.2.0",
-        "inquirer": "^1.0.2",
-        "lodash.difference": "^4.5.0",
-        "lodash.uniq": "^4.5.0",
-        "minimist": "^1.2.0",
-        "mkdirp": "^0.5.1",
-        "npmlog": "^2.0.3",
-        "object-assign": "^4.1.0"
-      },
-      "bin": {
-        "tabtab": "bin/tabtab"
-      }
-    },
-    "node_modules/tabtab/node_modules/ansi-escapes": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-1.4.0.tgz",
-      "integrity": "sha1-06ioOzGapneTZisT52HHkRQiMG4=",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/tabtab/node_modules/ansi-regex": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
-      "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/tabtab/node_modules/ansi-styles": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
-      "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/tabtab/node_modules/chalk": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
-      "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
-      "dev": true,
-      "dependencies": {
-        "ansi-styles": "^2.2.1",
-        "escape-string-regexp": "^1.0.2",
-        "has-ansi": "^2.0.0",
-        "strip-ansi": "^3.0.0",
-        "supports-color": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/tabtab/node_modules/cli-cursor": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-1.0.2.tgz",
-      "integrity": "sha1-ZNo/fValRBLll5S9Ytw1KV6PKYc=",
-      "dev": true,
-      "dependencies": {
-        "restore-cursor": "^1.0.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/tabtab/node_modules/cli-width": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-2.2.1.tgz",
-      "integrity": "sha512-GRMWDxpOB6Dgk2E5Uo+3eEBvtOOlimMmpbFiKuLFnQzYDavtLFY3K5ona41jgN/WdRZtG7utuVSVTL4HbZHGkw==",
-      "dev": true
-    },
-    "node_modules/tabtab/node_modules/debug": {
-      "version": "2.6.9",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-      "dev": true,
-      "dependencies": {
-        "ms": "2.0.0"
-      }
-    },
-    "node_modules/tabtab/node_modules/external-editor": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/external-editor/-/external-editor-1.1.1.tgz",
-      "integrity": "sha1-Etew24UPf/fnCBuvQAVwAGDEYAs=",
-      "dev": true,
-      "dependencies": {
-        "extend": "^3.0.0",
-        "spawn-sync": "^1.0.15",
-        "tmp": "^0.0.29"
-      }
-    },
-    "node_modules/tabtab/node_modules/figures": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/figures/-/figures-1.7.0.tgz",
-      "integrity": "sha1-y+Hjr/zxzUS4DK3+0o3Hk6lwHS4=",
-      "dev": true,
-      "dependencies": {
-        "escape-string-regexp": "^1.0.5",
-        "object-assign": "^4.1.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/tabtab/node_modules/gauge": {
-      "version": "1.2.7",
-      "resolved": "https://registry.npmjs.org/gauge/-/gauge-1.2.7.tgz",
-      "integrity": "sha1-6c7FSD09TuDvRLYKfZnkk14TbZM=",
-      "dev": true,
-      "dependencies": {
-        "ansi": "^0.3.0",
-        "has-unicode": "^2.0.0",
-        "lodash.pad": "^4.1.0",
-        "lodash.padend": "^4.1.0",
-        "lodash.padstart": "^4.1.0"
-      }
-    },
-    "node_modules/tabtab/node_modules/inquirer": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-1.2.3.tgz",
-      "integrity": "sha1-TexvMvN+97sLLtPx0aXD9UUHSRg=",
-      "dev": true,
-      "dependencies": {
-        "ansi-escapes": "^1.1.0",
-        "chalk": "^1.0.0",
-        "cli-cursor": "^1.0.1",
-        "cli-width": "^2.0.0",
-        "external-editor": "^1.1.0",
-        "figures": "^1.3.5",
-        "lodash": "^4.3.0",
-        "mute-stream": "0.0.6",
-        "pinkie-promise": "^2.0.0",
-        "run-async": "^2.2.0",
-        "rx": "^4.1.0",
-        "string-width": "^1.0.1",
-        "strip-ansi": "^3.0.0",
-        "through": "^2.3.6"
-      }
-    },
-    "node_modules/tabtab/node_modules/is-fullwidth-code-point": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
-      "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
-      "dev": true,
-      "dependencies": {
-        "number-is-nan": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/tabtab/node_modules/mute-stream": {
-      "version": "0.0.6",
-      "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.6.tgz",
-      "integrity": "sha1-SJYrGeFp/R38JAs/HnMXYnu8R9s=",
-      "dev": true
-    },
-    "node_modules/tabtab/node_modules/npmlog": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-2.0.4.tgz",
-      "integrity": "sha1-mLUlMPJRTKkNCexbIsiEZyI3VpI=",
-      "dev": true,
-      "dependencies": {
-        "ansi": "~0.3.1",
-        "are-we-there-yet": "~1.1.2",
-        "gauge": "~1.2.5"
-      }
-    },
-    "node_modules/tabtab/node_modules/onetime": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz",
-      "integrity": "sha1-ofeDj4MUxRbwXs78vEzP4EtO14k=",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/tabtab/node_modules/restore-cursor": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-1.0.1.tgz",
-      "integrity": "sha1-NGYfRohjJ/7SmRR5FSJS35LapUE=",
-      "dev": true,
-      "dependencies": {
-        "exit-hook": "^1.0.0",
-        "onetime": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/tabtab/node_modules/string-width": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
-      "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
-      "dev": true,
-      "dependencies": {
-        "code-point-at": "^1.0.0",
-        "is-fullwidth-code-point": "^1.0.0",
-        "strip-ansi": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/tabtab/node_modules/strip-ansi": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
-      "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
-      "dev": true,
-      "dependencies": {
-        "ansi-regex": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/tabtab/node_modules/supports-color": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
-      "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
-      "dev": true,
-      "engines": {
-        "node": ">=0.8.0"
-      }
-    },
-    "node_modules/tabtab/node_modules/tmp": {
-      "version": "0.0.29",
-      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.29.tgz",
-      "integrity": "sha1-8lEl/w3Z2jzLDC3Tce4SiLuRKMA=",
-      "dev": true,
-      "dependencies": {
-        "os-tmpdir": "~1.0.1"
-      },
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
-    "node_modules/tapable": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.0.tgz",
-      "integrity": "sha512-FBk4IesMV1rBxX2tfiK8RAmogtWn53puLOQlvO8XuwlgxcYbP4mVPS9Ph4aeamSyyVjOl24aYWAuc8U5kCVwMw==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/tar-stream": {
-      "version": "1.6.2",
-      "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-1.6.2.tgz",
-      "integrity": "sha512-rzS0heiNf8Xn7/mpdSVVSMAWAoy9bfb1WOTYC78Z0UQKeKa/CWS8FOq0lKGNa8DWKAn9gxjCvMLYc5PGXYlK2A==",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "bl": "^1.0.0",
-        "buffer-alloc": "^1.2.0",
-        "end-of-stream": "^1.0.0",
-        "fs-constants": "^1.0.0",
-        "readable-stream": "^2.3.0",
-        "to-buffer": "^1.1.1",
-        "xtend": "^4.0.0"
-      },
-      "engines": {
-        "node": ">= 0.8.0"
-      }
-    },
-    "node_modules/teeny-request": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/teeny-request/-/teeny-request-6.0.1.tgz",
-      "integrity": "sha512-TAK0c9a00ELOqLrZ49cFxvPVogMUFaWY8dUsQc/0CuQPGF+BOxOQzXfE413BAk2kLomwNplvdtMpeaeGWmoc2g==",
-      "dev": true,
-      "dependencies": {
-        "http-proxy-agent": "^4.0.0",
-        "https-proxy-agent": "^4.0.0",
-        "node-fetch": "^2.2.0",
-        "stream-events": "^1.0.5",
-        "uuid": "^3.3.2"
-      }
-    },
-    "node_modules/temp-dir": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/temp-dir/-/temp-dir-1.0.0.tgz",
-      "integrity": "sha1-CnwOom06Oa+n4OvqnB/AvE2qAR0=",
-      "dev": true,
-      "optional": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/tempfile": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/tempfile/-/tempfile-2.0.0.tgz",
-      "integrity": "sha1-awRGhWqbERTRhW/8vlCczLCXcmU=",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "temp-dir": "^1.0.0",
-        "uuid": "^3.0.1"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/terminal-link": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/terminal-link/-/terminal-link-2.1.1.tgz",
-      "integrity": "sha512-un0FmiRUQNr5PJqy9kP7c40F5BOfpGlYTrxonDChEZB7pzZxRNp/bt+ymiy9/npwXya9KH99nJ/GXFIiUkYGFQ==",
-      "dev": true,
-      "dependencies": {
-        "ansi-escapes": "^4.2.1",
-        "supports-hyperlinks": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/terser": {
-      "version": "4.8.0",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-4.8.0.tgz",
-      "integrity": "sha512-EAPipTNeWsb/3wLPeup1tVPaXfIaU68xMnVdPafIL1TV05OhASArYyIfFvnvJCNrR2NIOvDVNNTFRa+Re2MWyw==",
-      "dev": true,
-      "dependencies": {
-        "commander": "^2.20.0",
-        "source-map": "~0.6.1",
-        "source-map-support": "~0.5.12"
-      },
-      "bin": {
-        "terser": "bin/terser"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
-    "node_modules/terser-webpack-plugin": {
-      "version": "5.1.4",
-      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.1.4.tgz",
-      "integrity": "sha512-C2WkFwstHDhVEmsmlCxrXUtVklS+Ir1A7twrYzrDrQQOIMOaVAYykaoo/Aq1K0QRkMoY2hhvDQY1cm4jnIMFwA==",
-      "dev": true,
-      "dependencies": {
-        "jest-worker": "^27.0.2",
-        "p-limit": "^3.1.0",
-        "schema-utils": "^3.0.0",
-        "serialize-javascript": "^6.0.0",
-        "source-map": "^0.6.1",
-        "terser": "^5.7.0"
-      },
-      "engines": {
-        "node": ">= 10.13.0"
-      }
-    },
-    "node_modules/terser-webpack-plugin/node_modules/ajv": {
-      "version": "6.12.6",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-      "dev": true,
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "fast-json-stable-stringify": "^2.0.0",
-        "json-schema-traverse": "^0.4.1",
-        "uri-js": "^4.2.2"
-      }
-    },
-    "node_modules/terser-webpack-plugin/node_modules/commander": {
-      "version": "2.20.3",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
-      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
-      "dev": true
-    },
-    "node_modules/terser-webpack-plugin/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/terser-webpack-plugin/node_modules/jest-worker": {
-      "version": "27.0.6",
-      "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.0.6.tgz",
-      "integrity": "sha512-qupxcj/dRuA3xHPMUd40gr2EaAurFbkwzOh7wfPaeE9id7hyjURRQoqNfHifHK3XjJU6YJJUQKILGUnwGPEOCA==",
-      "dev": true,
-      "dependencies": {
-        "@types/node": "*",
-        "merge-stream": "^2.0.0",
-        "supports-color": "^8.0.0"
-      },
-      "engines": {
-        "node": ">= 10.13.0"
-      }
-    },
-    "node_modules/terser-webpack-plugin/node_modules/p-limit": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
-      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
-      "dev": true,
-      "dependencies": {
-        "yocto-queue": "^0.1.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/terser-webpack-plugin/node_modules/schema-utils": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.0.tgz",
-      "integrity": "sha512-tTEaeYkyIhEZ9uWgAjDerWov3T9MgX8dhhy2r0IGeeX4W8ngtGl1++dUve/RUqzuaASSh7shwCDJjEzthxki8w==",
-      "dev": true,
-      "dependencies": {
-        "@types/json-schema": "^7.0.7",
-        "ajv": "^6.12.5",
-        "ajv-keywords": "^3.5.2"
-      },
-      "engines": {
-        "node": ">= 10.13.0"
-      }
-    },
-    "node_modules/terser-webpack-plugin/node_modules/supports-color": {
-      "version": "8.1.1",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
-      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
-      "dev": true,
-      "dependencies": {
-        "has-flag": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/terser-webpack-plugin/node_modules/terser": {
-      "version": "5.7.1",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-5.7.1.tgz",
-      "integrity": "sha512-b3e+d5JbHAe/JSjwsC3Zn55wsBIM7AsHLjKxT31kGCldgbpFePaFo+PiddtO6uwRZWRw7sPXmAN8dTW61xmnSg==",
-      "dev": true,
-      "dependencies": {
-        "commander": "^2.20.0",
-        "source-map": "~0.7.2",
-        "source-map-support": "~0.5.19"
-      },
-      "bin": {
-        "terser": "bin/terser"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/terser-webpack-plugin/node_modules/terser/node_modules/source-map": {
-      "version": "0.7.3",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
-      "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
-      "dev": true,
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/terser/node_modules/commander": {
-      "version": "2.20.3",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
-      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
-      "dev": true
-    },
-    "node_modules/test-exclude": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/test-exclude/-/test-exclude-6.0.0.tgz",
-      "integrity": "sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==",
-      "dev": true,
-      "dependencies": {
-        "@istanbuljs/schema": "^0.1.2",
-        "glob": "^7.1.4",
-        "minimatch": "^3.0.4"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/text-table": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
-      "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=",
-      "dev": true
-    },
-    "node_modules/throat": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/throat/-/throat-5.0.0.tgz",
-      "integrity": "sha512-fcwX4mndzpLQKBS1DVYhGAcYaYt7vsHNIvQV+WXMvnow5cgjPphq5CaayLaGsjRdSCKZFNGt7/GYAuXaNOiYCA==",
-      "dev": true
-    },
-    "node_modules/through": {
-      "version": "2.3.8",
-      "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
-      "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=",
-      "dev": true
-    },
-    "node_modules/thunky": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
-      "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==",
-      "dev": true
-    },
-    "node_modules/timed-out": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/timed-out/-/timed-out-4.0.1.tgz",
-      "integrity": "sha1-8y6srFoXW+ol1/q1Zas+2HQe9W8=",
-      "dev": true,
-      "optional": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/timsort": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
-      "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=",
-      "dev": true
-    },
-    "node_modules/tiny-invariant": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz",
-      "integrity": "sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw=="
-    },
-    "node_modules/tiny-warning": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
-      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
-    },
-    "node_modules/tmp": {
-      "version": "0.0.33",
-      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
-      "integrity": "sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==",
-      "dev": true,
-      "dependencies": {
-        "os-tmpdir": "~1.0.2"
-      },
-      "engines": {
-        "node": ">=0.6.0"
-      }
-    },
-    "node_modules/tmpl": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.4.tgz",
-      "integrity": "sha1-I2QN17QtAEM5ERQIIOXPRA5SHdE=",
-      "dev": true
-    },
-    "node_modules/to-buffer": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/to-buffer/-/to-buffer-1.1.1.tgz",
-      "integrity": "sha512-lx9B5iv7msuFYE3dytT+KE5tap+rNYw+K4jVkb9R/asAb+pbBSM17jtunHplhBe6RRJdZx3Pn2Jph24O32mOVg==",
-      "dev": true,
-      "optional": true
-    },
-    "node_modules/to-fast-properties": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-      "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/to-object-path": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/to-object-path/-/to-object-path-0.3.0.tgz",
-      "integrity": "sha1-KXWIt7Dn4KwI4E5nL4XB9JmeF68=",
-      "dev": true,
-      "dependencies": {
-        "kind-of": "^3.0.2"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/to-object-path/node_modules/is-buffer": {
-      "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
-      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
-      "dev": true
-    },
-    "node_modules/to-object-path/node_modules/kind-of": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-      "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
-      "dev": true,
-      "dependencies": {
-        "is-buffer": "^1.1.5"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/to-regex": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/to-regex/-/to-regex-3.0.2.tgz",
-      "integrity": "sha512-FWtleNAtZ/Ki2qtqej2CXTOayOH9bHDQF+Q48VpWyDXjbYxA4Yz8iDB31zXOBUlOHHKidDbqGVrTUvQMPmBGBw==",
-      "dev": true,
-      "dependencies": {
-        "define-property": "^2.0.2",
-        "extend-shallow": "^3.0.2",
-        "regex-not": "^1.0.2",
-        "safe-regex": "^1.1.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/to-regex-range": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
-      "integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=",
-      "dev": true,
-      "dependencies": {
-        "is-number": "^3.0.0",
-        "repeat-string": "^1.6.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/toidentifier": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",
-      "integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.6"
-      }
-    },
-    "node_modules/tough-cookie": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.0.0.tgz",
-      "integrity": "sha512-tHdtEpQCMrc1YLrMaqXXcj6AxhYi/xgit6mZu1+EDWUn+qhUf8wMQoFIy9NXuq23zAwtcB0t/MjACGR18pcRbg==",
-      "dev": true,
-      "dependencies": {
-        "psl": "^1.1.33",
-        "punycode": "^2.1.1",
-        "universalify": "^0.1.2"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/tough-cookie/node_modules/universalify": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
-      "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
-      "dev": true,
-      "engines": {
-        "node": ">= 4.0.0"
-      }
-    },
-    "node_modules/tr46": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/tr46/-/tr46-1.0.1.tgz",
-      "integrity": "sha1-qLE/1r/SSJUZZ0zN5VujaTtwbQk=",
-      "dev": true,
-      "dependencies": {
-        "punycode": "^2.1.0"
-      }
-    },
-    "node_modules/trim-newlines": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-1.0.0.tgz",
-      "integrity": "sha1-WIeWa7WCpFA6QetST301ARgVphM=",
-      "dev": true,
-      "optional": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/trim-repeated": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/trim-repeated/-/trim-repeated-1.0.0.tgz",
-      "integrity": "sha1-42RqLqTokTEr9+rObPsFOAvAHCE=",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "escape-string-regexp": "^1.0.2"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/tryer": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz",
-      "integrity": "sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA==",
-      "dev": true
-    },
-    "node_modules/tsconfig-paths": {
-      "version": "3.10.1",
-      "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.10.1.tgz",
-      "integrity": "sha512-rETidPDgCpltxF7MjBZlAFPUHv5aHH2MymyPvh+vEyWAED4Eb/WeMbsnD/JDr4OKPOA1TssDHgIcpTN5Kh0p6Q==",
-      "dev": true,
-      "dependencies": {
-        "json5": "^2.2.0",
-        "minimist": "^1.2.0",
-        "strip-bom": "^3.0.0"
-      }
-    },
-    "node_modules/tsconfig-paths/node_modules/json5": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.0.tgz",
-      "integrity": "sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA==",
-      "dev": true,
-      "dependencies": {
-        "minimist": "^1.2.5"
-      },
-      "bin": {
-        "json5": "lib/cli.js"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/tslib": {
-      "version": "1.13.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz",
-      "integrity": "sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q=="
-    },
-    "node_modules/tunnel-agent": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
-      "integrity": "sha1-J6XeoGs2sEoKmWZ3SykIaPD8QP0=",
-      "dev": true,
-      "dependencies": {
-        "safe-buffer": "^5.0.1"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
-    "node_modules/tweetnacl": {
-      "version": "0.14.5",
-      "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
-      "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=",
-      "dev": true
-    },
-    "node_modules/type-check": {
-      "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.3.2.tgz",
-      "integrity": "sha1-WITKtRLPHTVeP7eE8wgEsrUg23I=",
-      "dev": true,
-      "dependencies": {
-        "prelude-ls": "~1.1.2"
-      },
-      "engines": {
-        "node": ">= 0.8.0"
-      }
-    },
-    "node_modules/type-detect": {
-      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/type-detect/-/type-detect-4.0.8.tgz",
-      "integrity": "sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/type-fest": {
-      "version": "0.8.1",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz",
-      "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/type-is": {
-      "version": "1.6.18",
-      "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
-      "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
-      "dev": true,
-      "dependencies": {
-        "media-typer": "0.3.0",
-        "mime-types": "~2.1.24"
-      },
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/typedarray": {
-      "version": "0.0.6",
-      "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
-      "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=",
-      "dev": true
-    },
-    "node_modules/typedarray-to-buffer": {
-      "version": "3.1.5",
-      "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz",
-      "integrity": "sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==",
-      "dev": true,
-      "dependencies": {
-        "is-typedarray": "^1.0.0"
-      }
-    },
-    "node_modules/typescript": {
-      "version": "4.3.5",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.3.5.tgz",
-      "integrity": "sha512-DqQgihaQ9cUrskJo9kIyW/+g0Vxsk8cDtZ52a3NGh0YNTfpUSArXSohyUGnvbPazEPLu398C0UxmKSOrPumUzA==",
-      "dev": true,
-      "bin": {
-        "tsc": "bin/tsc",
-        "tsserver": "bin/tsserver"
-      },
-      "engines": {
-        "node": ">=4.2.0"
-      }
-    },
-    "node_modules/unbox-primitive": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz",
-      "integrity": "sha512-tZU/3NqK3dA5gpE1KtyiJUrEB0lxnGkMFHptJ7q6ewdZ8s12QrODwNbhIJStmJkd1QDXa1NRA8aF2A1zk/Ypyw==",
-      "dependencies": {
-        "function-bind": "^1.1.1",
-        "has-bigints": "^1.0.1",
-        "has-symbols": "^1.0.2",
-        "which-boxed-primitive": "^1.0.2"
-      }
-    },
-    "node_modules/unbox-primitive/node_modules/has-symbols": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.2.tgz",
-      "integrity": "sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw==",
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/unbzip2-stream": {
-      "version": "1.4.3",
-      "resolved": "https://registry.npmjs.org/unbzip2-stream/-/unbzip2-stream-1.4.3.tgz",
-      "integrity": "sha512-mlExGW4w71ebDJviH16lQLtZS32VKqsSfk80GCfUlwT/4/hNRFsoscrF/c++9xinkMzECL1uL9DDwXqFWkruPg==",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "buffer": "^5.2.1",
-        "through": "^2.3.8"
-      }
-    },
-    "node_modules/uncontrollable": {
-      "version": "7.2.1",
-      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz",
-      "integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==",
-      "dependencies": {
-        "@babel/runtime": "^7.6.3",
-        "@types/react": ">=16.9.11",
-        "invariant": "^2.2.4",
-        "react-lifecycles-compat": "^3.0.4"
-      }
-    },
-    "node_modules/unicode-canonical-property-names-ecmascript": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz",
-      "integrity": "sha512-jDrNnXWHd4oHiTZnx/ZG7gtUTVp+gCcTTKr8L0HjlwphROEW3+Him+IpvC+xcJEFegapiMZyZe02CyuOnRmbnQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/unicode-match-property-ecmascript": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-1.0.4.tgz",
-      "integrity": "sha512-L4Qoh15vTfntsn4P1zqnHulG0LdXgjSO035fEpdtp6YxXhMT51Q6vgM5lYdG/5X3MjS+k/Y9Xw4SFCY9IkR0rg==",
-      "dev": true,
-      "dependencies": {
-        "unicode-canonical-property-names-ecmascript": "^1.0.4",
-        "unicode-property-aliases-ecmascript": "^1.0.4"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/unicode-match-property-value-ecmascript": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-1.2.0.tgz",
-      "integrity": "sha512-wjuQHGQVofmSJv1uVISKLE5zO2rNGzM/KCYZch/QQvez7C1hUhBIuZ701fYXExuufJFMPhv2SyL8CyoIfMLbIQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/unicode-property-aliases-ecmascript": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-1.1.0.tgz",
-      "integrity": "sha512-PqSoPh/pWetQ2phoj5RLiaqIk4kCNwoV3CI+LfGmWLKI3rE3kl1h59XpX2BjgDrmbxD9ARtQobPGU1SguCYuQg==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/union-value": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.1.tgz",
-      "integrity": "sha512-tJfXmxMeWYnczCVs7XAEvIV7ieppALdyepWMkHkwciRpZraG/xwT+s2JN8+pr1+8jCRf80FFzvr+MpQeeoF4Xg==",
-      "dev": true,
-      "dependencies": {
-        "arr-union": "^3.1.0",
-        "get-value": "^2.0.6",
-        "is-extendable": "^0.1.1",
-        "set-value": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/uniqs": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/uniqs/-/uniqs-2.0.0.tgz",
-      "integrity": "sha1-/+3ks2slKQaW5uFl1KWe25mOawI=",
-      "dev": true
-    },
-    "node_modules/universal-cookie": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/universal-cookie/-/universal-cookie-4.0.4.tgz",
-      "integrity": "sha512-lbRVHoOMtItjWbM7TwDLdl8wug7izB0tq3/YVKhT/ahB4VDvWMyvnADfnJI8y6fSvsjh51Ix7lTGC6Tn4rMPhw==",
-      "dependencies": {
-        "@types/cookie": "^0.3.3",
-        "cookie": "^0.4.0"
-      }
-    },
-    "node_modules/universalify": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
-      "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
-      "dev": true,
-      "engines": {
-        "node": ">= 10.0.0"
-      }
-    },
-    "node_modules/unpipe": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
-      "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/unquote": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/unquote/-/unquote-1.1.1.tgz",
-      "integrity": "sha1-j97XMk7G6IoP+LkF58CYzcCG1UQ=",
-      "dev": true
-    },
-    "node_modules/unset-value": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/unset-value/-/unset-value-1.0.0.tgz",
-      "integrity": "sha1-g3aHP30jNRef+x5vw6jtDfyKtVk=",
-      "dev": true,
-      "dependencies": {
-        "has-value": "^0.3.1",
-        "isobject": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/unset-value/node_modules/has-value": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/has-value/-/has-value-0.3.1.tgz",
-      "integrity": "sha1-ex9YutpiyoJ+wKIHgCVlSEWZXh8=",
-      "dev": true,
-      "dependencies": {
-        "get-value": "^2.0.3",
-        "has-values": "^0.1.4",
-        "isobject": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/unset-value/node_modules/has-value/node_modules/isobject": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/isobject/-/isobject-2.1.0.tgz",
-      "integrity": "sha1-8GVWEJaj8dou9GJy+BXIQNh+DIk=",
-      "dev": true,
-      "dependencies": {
-        "isarray": "1.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/unset-value/node_modules/has-values": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/has-values/-/has-values-0.1.4.tgz",
-      "integrity": "sha1-bWHeldkd/Km5oCCJrThL/49it3E=",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/unset-value/node_modules/isarray": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-      "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
-      "dev": true
-    },
-    "node_modules/upath": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/upath/-/upath-1.2.0.tgz",
-      "integrity": "sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==",
-      "dev": true,
-      "engines": {
-        "node": ">=4",
-        "yarn": "*"
-      }
-    },
-    "node_modules/uri-js": {
-      "version": "4.2.2",
-      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.2.2.tgz",
-      "integrity": "sha512-KY9Frmirql91X2Qgjry0Wd4Y+YTdrdZheS8TFwvkbLWf/G5KNJDCh6pKL5OZctEW4+0Baa5idK2ZQuELRwPznQ==",
-      "dev": true,
-      "dependencies": {
-        "punycode": "^2.1.0"
-      }
-    },
-    "node_modules/urix": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/urix/-/urix-0.1.0.tgz",
-      "integrity": "sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI=",
-      "dev": true
-    },
-    "node_modules/url": {
-      "version": "0.11.0",
-      "resolved": "https://registry.npmjs.org/url/-/url-0.11.0.tgz",
-      "integrity": "sha1-ODjpfPxgUh63PFJajlW/3Z4uKPE=",
-      "dev": true,
-      "dependencies": {
-        "punycode": "1.3.2",
-        "querystring": "0.2.0"
-      }
-    },
-    "node_modules/url-loader": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/url-loader/-/url-loader-4.1.1.tgz",
-      "integrity": "sha512-3BTV812+AVHHOJQO8O5MkWgZ5aosP7GnROJwvzLS9hWDj00lZ6Z0wNak423Lp9PBZN05N+Jk/N5Si8jRAlGyWA==",
-      "dev": true,
-      "dependencies": {
-        "loader-utils": "^2.0.0",
-        "mime-types": "^2.1.27",
-        "schema-utils": "^3.0.0"
-      },
-      "engines": {
-        "node": ">= 10.13.0"
-      }
-    },
-    "node_modules/url-loader/node_modules/ajv": {
-      "version": "6.12.6",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-      "dev": true,
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "fast-json-stable-stringify": "^2.0.0",
-        "json-schema-traverse": "^0.4.1",
-        "uri-js": "^4.2.2"
-      }
-    },
-    "node_modules/url-loader/node_modules/schema-utils": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.0.tgz",
-      "integrity": "sha512-tTEaeYkyIhEZ9uWgAjDerWov3T9MgX8dhhy2r0IGeeX4W8ngtGl1++dUve/RUqzuaASSh7shwCDJjEzthxki8w==",
-      "dev": true,
-      "dependencies": {
-        "@types/json-schema": "^7.0.7",
-        "ajv": "^6.12.5",
-        "ajv-keywords": "^3.5.2"
-      },
-      "engines": {
-        "node": ">= 10.13.0"
-      }
-    },
-    "node_modules/url-parse-lax": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/url-parse-lax/-/url-parse-lax-1.0.0.tgz",
-      "integrity": "sha1-evjzA2Rem9eaJy56FKxovAYJ2nM=",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "prepend-http": "^1.0.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/url-to-options": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/url-to-options/-/url-to-options-1.0.1.tgz",
-      "integrity": "sha1-FQWgOiiaSMvXpDTvuu7FBV9WM6k=",
-      "dev": true,
-      "optional": true,
-      "engines": {
-        "node": ">= 4"
-      }
-    },
-    "node_modules/url/node_modules/punycode": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz",
-      "integrity": "sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0=",
-      "dev": true
-    },
-    "node_modules/urlgrey": {
-      "version": "0.4.4",
-      "resolved": "https://registry.npmjs.org/urlgrey/-/urlgrey-0.4.4.tgz",
-      "integrity": "sha1-iS/pWWCAXoVRnxzUOJ8stMu3ZS8=",
-      "dev": true
-    },
-    "node_modules/use": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
-      "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/use-callback-ref": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.2.5.tgz",
-      "integrity": "sha512-gN3vgMISAgacF7sqsLPByqoePooY3n2emTH59Ur5d/M8eg4WTWu1xp8i8DHjohftIyEx0S08RiYxbffr4j8Peg==",
-      "engines": {
-        "node": ">=8.5.0"
-      }
-    },
-    "node_modules/use-sidecar": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.0.5.tgz",
-      "integrity": "sha512-k9jnrjYNwN6xYLj1iaGhonDghfvmeTmYjAiGvOr7clwKfPjMXJf4/HOr7oT5tJwYafgp2tG2l3eZEOfoELiMcA==",
-      "dependencies": {
-        "detect-node-es": "^1.1.0",
-        "tslib": "^1.9.3"
-      },
-      "engines": {
-        "node": ">=8.5.0"
-      }
-    },
-    "node_modules/util-deprecate": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
-      "dev": true
-    },
-    "node_modules/util.promisify": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/util.promisify/-/util.promisify-1.0.1.tgz",
-      "integrity": "sha512-g9JpC/3He3bm38zsLupWryXHoEcS22YHthuPQSJdMy6KNrzIRzWqcsHzD/WUnqe45whVou4VIsPew37DoXWNrA==",
-      "dev": true,
-      "dependencies": {
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.17.2",
-        "has-symbols": "^1.0.1",
-        "object.getownpropertydescriptors": "^2.1.0"
-      }
-    },
-    "node_modules/utila": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/utila/-/utila-0.4.0.tgz",
-      "integrity": "sha1-ihagXURWV6Oupe7MWxKk+lN5dyw=",
-      "dev": true
-    },
-    "node_modules/utils-merge": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
-      "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.4.0"
-      }
-    },
-    "node_modules/uuid": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
-      "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
-      "bin": {
-        "uuid": "bin/uuid"
-      }
-    },
-    "node_modules/v8-compile-cache": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
-      "integrity": "sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==",
-      "dev": true
-    },
-    "node_modules/v8-to-istanbul": {
-      "version": "7.1.2",
-      "resolved": "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-7.1.2.tgz",
-      "integrity": "sha512-TxNb7YEUwkLXCQYeudi6lgQ/SZrzNO4kMdlqVxaZPUIUjCv6iSSypUQX70kNBSERpQ8fk48+d61FXk+tgqcWow==",
-      "dev": true,
-      "dependencies": {
-        "@types/istanbul-lib-coverage": "^2.0.1",
-        "convert-source-map": "^1.6.0",
-        "source-map": "^0.7.3"
-      },
-      "engines": {
-        "node": ">=10.10.0"
-      }
-    },
-    "node_modules/v8-to-istanbul/node_modules/source-map": {
-      "version": "0.7.3",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
-      "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
-      "dev": true,
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/validate-npm-package-license": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
-      "integrity": "sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==",
-      "dev": true,
-      "dependencies": {
-        "spdx-correct": "^3.0.0",
-        "spdx-expression-parse": "^3.0.0"
-      }
-    },
-    "node_modules/value-equal": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz",
-      "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw=="
-    },
-    "node_modules/vary": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
-      "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/vendors": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/vendors/-/vendors-1.0.4.tgz",
-      "integrity": "sha512-/juG65kTL4Cy2su4P8HjtkTxk6VmJDiOPBufWniqQ6wknac6jNiXS9vU+hO3wgusiyqWlzTbVHi0dyJqRONg3w==",
-      "dev": true
-    },
-    "node_modules/verror": {
-      "version": "1.10.0",
-      "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",
-      "integrity": "sha1-OhBcoXBTr1XW4nDB+CiGguGNpAA=",
-      "dev": true,
-      "engines": [
-        "node >=0.6.0"
-      ],
-      "dependencies": {
-        "assert-plus": "^1.0.0",
-        "core-util-is": "1.0.2",
-        "extsprintf": "^1.2.0"
-      }
-    },
-    "node_modules/w3c-hr-time": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",
-      "integrity": "sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ==",
-      "dev": true,
-      "dependencies": {
-        "browser-process-hrtime": "^1.0.0"
-      }
-    },
-    "node_modules/w3c-xmlserializer": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-2.0.0.tgz",
-      "integrity": "sha512-4tzD0mF8iSiMiNs30BiLO3EpfGLZUT2MSX/G+o7ZywDzliWQ3OPtTZ0PTC3B3ca1UAf4cJMHB+2Bf56EriJuRA==",
-      "dev": true,
-      "dependencies": {
-        "xml-name-validator": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/walker": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/walker/-/walker-1.0.7.tgz",
-      "integrity": "sha1-L3+bj9ENZ3JisYqITijRlhjgKPs=",
-      "dev": true,
-      "dependencies": {
-        "makeerror": "1.0.x"
-      }
-    },
-    "node_modules/warning": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
-      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
-      "dependencies": {
-        "loose-envify": "^1.0.0"
-      }
-    },
-    "node_modules/watchpack": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.2.0.tgz",
-      "integrity": "sha512-up4YAn/XHgZHIxFBVCdlMiWDj6WaLKpwVeGQk2I5thdYxF/KmF0aaz6TfJZ/hfl1h/XlcDr7k1KH7ThDagpFaA==",
-      "dev": true,
-      "dependencies": {
-        "glob-to-regexp": "^0.4.1",
-        "graceful-fs": "^4.1.2"
-      },
-      "engines": {
-        "node": ">=10.13.0"
-      }
-    },
-    "node_modules/wbuf": {
-      "version": "1.7.3",
-      "resolved": "https://registry.npmjs.org/wbuf/-/wbuf-1.7.3.tgz",
-      "integrity": "sha512-O84QOnr0icsbFGLS0O3bI5FswxzRr8/gHwWkDlQFskhSPryQXvrTMxjxGP4+iWYoauLoBvfDpkrOauZ+0iZpDA==",
-      "dev": true,
-      "dependencies": {
-        "minimalistic-assert": "^1.0.0"
-      }
-    },
-    "node_modules/webidl-conversions": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-4.0.2.tgz",
-      "integrity": "sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==",
-      "dev": true
-    },
-    "node_modules/webpack": {
-      "version": "5.21.2",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.21.2.tgz",
-      "integrity": "sha512-xHflCenx+AM4uWKX71SWHhxml5aMXdy2tu/vdi4lClm7PADKxlyDAFFN1rEFzNV0MAoPpHtBeJnl/+K6F4QBPg==",
-      "dev": true,
-      "dependencies": {
-        "@types/eslint-scope": "^3.7.0",
-        "@types/estree": "^0.0.46",
-        "@webassemblyjs/ast": "1.11.0",
-        "@webassemblyjs/wasm-edit": "1.11.0",
-        "@webassemblyjs/wasm-parser": "1.11.0",
-        "acorn": "^8.0.4",
-        "browserslist": "^4.14.5",
-        "chrome-trace-event": "^1.0.2",
-        "enhanced-resolve": "^5.7.0",
-        "es-module-lexer": "^0.3.26",
-        "eslint-scope": "^5.1.1",
-        "events": "^3.2.0",
-        "glob-to-regexp": "^0.4.1",
-        "graceful-fs": "^4.2.4",
-        "json-parse-better-errors": "^1.0.2",
-        "loader-runner": "^4.2.0",
-        "mime-types": "^2.1.27",
-        "neo-async": "^2.6.2",
-        "schema-utils": "^3.0.0",
-        "tapable": "^2.1.1",
-        "terser-webpack-plugin": "^5.1.1",
-        "watchpack": "^2.0.0",
-        "webpack-sources": "^2.1.1"
-      },
-      "bin": {
-        "webpack": "bin/webpack.js"
-      },
-      "engines": {
-        "node": ">=10.13.0"
-      }
-    },
-    "node_modules/webpack-bundle-analyzer": {
-      "version": "3.9.0",
-      "resolved": "https://registry.npmjs.org/webpack-bundle-analyzer/-/webpack-bundle-analyzer-3.9.0.tgz",
-      "integrity": "sha512-Ob8amZfCm3rMB1ScjQVlbYYUEJyEjdEtQ92jqiFUYt5VkEeO2v5UMbv49P/gnmCZm3A6yaFQzCBvpZqN4MUsdA==",
-      "dev": true,
-      "dependencies": {
-        "acorn": "^7.1.1",
-        "acorn-walk": "^7.1.1",
-        "bfj": "^6.1.1",
-        "chalk": "^2.4.1",
-        "commander": "^2.18.0",
-        "ejs": "^2.6.1",
-        "express": "^4.16.3",
-        "filesize": "^3.6.1",
-        "gzip-size": "^5.0.0",
-        "lodash": "^4.17.19",
-        "mkdirp": "^0.5.1",
-        "opener": "^1.5.1",
-        "ws": "^6.0.0"
-      },
-      "bin": {
-        "webpack-bundle-analyzer": "lib/bin/analyzer.js"
-      },
-      "engines": {
-        "node": ">= 6.14.4"
-      }
-    },
-    "node_modules/webpack-bundle-analyzer/node_modules/acorn-walk": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
-      "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
-    "node_modules/webpack-bundle-analyzer/node_modules/commander": {
-      "version": "2.20.3",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
-      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
-      "dev": true
-    },
-    "node_modules/webpack-bundle-analyzer/node_modules/filesize": {
-      "version": "3.6.1",
-      "resolved": "https://registry.npmjs.org/filesize/-/filesize-3.6.1.tgz",
-      "integrity": "sha512-7KjR1vv6qnicaPMi1iiTcI85CyYwRO/PSFCu6SvqL8jN2Wjt/NIYQTFtFs7fSDCYOstUkEWIQGFUg5YZQfjlcg==",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.4.0"
-      }
-    },
-    "node_modules/webpack-bundle-analyzer/node_modules/ws": {
-      "version": "6.2.2",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-6.2.2.tgz",
-      "integrity": "sha512-zmhltoSR8u1cnDsD43TX59mzoMZsLKqUweyYBAIvTngR3shc0W6aOZylZmq/7hqyVxPdi+5Ud2QInblgyE72fw==",
-      "dev": true,
-      "dependencies": {
-        "async-limiter": "~1.0.0"
-      }
-    },
-    "node_modules/webpack-cli": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-4.5.0.tgz",
-      "integrity": "sha512-wXg/ef6Ibstl2f50mnkcHblRPN/P9J4Nlod5Hg9HGFgSeF8rsqDGHJeVe4aR26q9l62TUJi6vmvC2Qz96YJw1Q==",
-      "dev": true,
-      "dependencies": {
-        "@discoveryjs/json-ext": "^0.5.0",
-        "@webpack-cli/configtest": "^1.0.1",
-        "@webpack-cli/info": "^1.2.2",
-        "@webpack-cli/serve": "^1.3.0",
-        "colorette": "^1.2.1",
-        "commander": "^7.0.0",
-        "enquirer": "^2.3.6",
-        "execa": "^5.0.0",
-        "fastest-levenshtein": "^1.0.12",
-        "import-local": "^3.0.2",
-        "interpret": "^2.2.0",
-        "rechoir": "^0.7.0",
-        "v8-compile-cache": "^2.2.0",
-        "webpack-merge": "^5.7.3"
-      },
-      "bin": {
-        "webpack-cli": "bin/cli.js"
-      },
-      "engines": {
-        "node": ">=10.13.0"
-      }
-    },
-    "node_modules/webpack-cli/node_modules/commander": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
-      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
-      "dev": true,
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/webpack-cli/node_modules/cross-spawn": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-      "dev": true,
-      "dependencies": {
-        "path-key": "^3.1.0",
-        "shebang-command": "^2.0.0",
-        "which": "^2.0.1"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/webpack-cli/node_modules/execa": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
-      "integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==",
-      "dev": true,
-      "dependencies": {
-        "cross-spawn": "^7.0.3",
-        "get-stream": "^6.0.0",
-        "human-signals": "^2.1.0",
-        "is-stream": "^2.0.0",
-        "merge-stream": "^2.0.0",
-        "npm-run-path": "^4.0.1",
-        "onetime": "^5.1.2",
-        "signal-exit": "^3.0.3",
-        "strip-final-newline": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/webpack-cli/node_modules/get-stream": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
-      "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
-      "dev": true,
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/webpack-cli/node_modules/is-stream": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.0.tgz",
-      "integrity": "sha512-XCoy+WlUr7d1+Z8GgSuXmpuUFC9fOhRXglJMx+dwLKTkL44Cjd4W1Z5P+BQZpr+cR93aGP4S/s7Ftw6Nd/kiEw==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/webpack-cli/node_modules/npm-run-path": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
-      "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
-      "dev": true,
-      "dependencies": {
-        "path-key": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/webpack-cli/node_modules/path-key": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/webpack-cli/node_modules/shebang-command": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-      "dev": true,
-      "dependencies": {
-        "shebang-regex": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/webpack-cli/node_modules/shebang-regex": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/webpack-cli/node_modules/webpack-merge": {
-      "version": "5.8.0",
-      "resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-5.8.0.tgz",
-      "integrity": "sha512-/SaI7xY0831XwP6kzuwhKWVKDP9t1QY1h65lAFLbZqMPIuYcD9QAW4u9STIbU9kaJbPBB/geU/gLr1wDjOhQ+Q==",
-      "dev": true,
-      "dependencies": {
-        "clone-deep": "^4.0.1",
-        "wildcard": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10.0.0"
-      }
-    },
-    "node_modules/webpack-cli/node_modules/which": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-      "dev": true,
-      "dependencies": {
-        "isexe": "^2.0.0"
-      },
-      "bin": {
-        "node-which": "bin/node-which"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/webpack-dev-middleware": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-4.3.0.tgz",
-      "integrity": "sha512-PjwyVY95/bhBh6VUqt6z4THplYcsvQ8YNNBTBM873xLVmw8FLeALn0qurHbs9EmcfhzQis/eoqypSnZeuUz26w==",
-      "dev": true,
-      "dependencies": {
-        "colorette": "^1.2.2",
-        "mem": "^8.1.1",
-        "memfs": "^3.2.2",
-        "mime-types": "^2.1.30",
-        "range-parser": "^1.2.1",
-        "schema-utils": "^3.0.0"
-      },
-      "engines": {
-        "node": ">= v10.23.3"
-      }
-    },
-    "node_modules/webpack-dev-middleware/node_modules/ajv": {
-      "version": "6.12.6",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-      "dev": true,
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "fast-json-stable-stringify": "^2.0.0",
-        "json-schema-traverse": "^0.4.1",
-        "uri-js": "^4.2.2"
-      }
-    },
-    "node_modules/webpack-dev-middleware/node_modules/colorette": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.2.2.tgz",
-      "integrity": "sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w==",
-      "dev": true
-    },
-    "node_modules/webpack-dev-middleware/node_modules/mime-db": {
-      "version": "1.48.0",
-      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.48.0.tgz",
-      "integrity": "sha512-FM3QwxV+TnZYQ2aRqhlKBMHxk10lTbMt3bBkMAp54ddrNeVSfcQYOOKuGuy3Ddrm38I04If834fOUSq1yzslJQ==",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/webpack-dev-middleware/node_modules/mime-types": {
-      "version": "2.1.31",
-      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.31.tgz",
-      "integrity": "sha512-XGZnNzm3QvgKxa8dpzyhFTHmpP3l5YNusmne07VUOXxou9CqUqYa/HBy124RqtVh/O2pECas/MOcsDgpilPOPg==",
-      "dev": true,
-      "dependencies": {
-        "mime-db": "1.48.0"
-      },
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/webpack-dev-middleware/node_modules/schema-utils": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.0.tgz",
-      "integrity": "sha512-tTEaeYkyIhEZ9uWgAjDerWov3T9MgX8dhhy2r0IGeeX4W8ngtGl1++dUve/RUqzuaASSh7shwCDJjEzthxki8w==",
-      "dev": true,
-      "dependencies": {
-        "@types/json-schema": "^7.0.7",
-        "ajv": "^6.12.5",
-        "ajv-keywords": "^3.5.2"
-      },
-      "engines": {
-        "node": ">= 10.13.0"
-      }
-    },
-    "node_modules/webpack-dev-server": {
-      "version": "4.0.0-beta.3",
-      "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.0.0-beta.3.tgz",
-      "integrity": "sha512-Ud7ieH15No/KiSdRuzk+2k+S4gSCR/N7m4hJhesDbKQEZy3P+NPXTXfsimNOZvbVX2TRuIEFB+VdLZFn8DwGwg==",
-      "dev": true,
-      "dependencies": {
-        "ansi-html": "^0.0.7",
-        "bonjour": "^3.5.0",
-        "chokidar": "^3.5.1",
-        "compression": "^1.7.4",
-        "connect-history-api-fallback": "^1.6.0",
-        "del": "^6.0.0",
-        "express": "^4.17.1",
-        "find-cache-dir": "^3.3.1",
-        "graceful-fs": "^4.2.6",
-        "html-entities": "^2.3.2",
-        "http-proxy-middleware": "^1.3.1",
-        "internal-ip": "^6.2.0",
-        "ipaddr.js": "^2.0.0",
-        "is-absolute-url": "^3.0.3",
-        "killable": "^1.0.1",
-        "open": "^7.4.2",
-        "p-retry": "^4.5.0",
-        "portfinder": "^1.0.28",
-        "schema-utils": "^3.0.0",
-        "selfsigned": "^1.10.11",
-        "serve-index": "^1.9.1",
-        "sockjs": "^0.3.21",
-        "spdy": "^4.0.2",
-        "strip-ansi": "^6.0.0",
-        "url": "^0.11.0",
-        "webpack-dev-middleware": "^4.1.0",
-        "ws": "^7.4.5"
-      },
-      "bin": {
-        "webpack-dev-server": "bin/webpack-dev-server.js"
-      },
-      "engines": {
-        "node": ">= 12.13.0"
-      }
-    },
-    "node_modules/webpack-dev-server/node_modules/ajv": {
-      "version": "6.12.6",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-      "dev": true,
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "fast-json-stable-stringify": "^2.0.0",
-        "json-schema-traverse": "^0.4.1",
-        "uri-js": "^4.2.2"
-      }
-    },
-    "node_modules/webpack-dev-server/node_modules/anymatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
-      "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
-      "dev": true,
-      "dependencies": {
-        "normalize-path": "^3.0.0",
-        "picomatch": "^2.0.4"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/webpack-dev-server/node_modules/array-union": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
-      "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/webpack-dev-server/node_modules/binary-extensions": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
-      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/webpack-dev-server/node_modules/braces": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-      "dev": true,
-      "dependencies": {
-        "fill-range": "^7.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/webpack-dev-server/node_modules/chokidar": {
-      "version": "3.5.2",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.2.tgz",
-      "integrity": "sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ==",
-      "dev": true,
-      "dependencies": {
-        "anymatch": "~3.1.2",
-        "braces": "~3.0.2",
-        "glob-parent": "~5.1.2",
-        "is-binary-path": "~2.1.0",
-        "is-glob": "~4.0.1",
-        "normalize-path": "~3.0.0",
-        "readdirp": "~3.6.0"
-      },
-      "engines": {
-        "node": ">= 8.10.0"
-      },
-      "optionalDependencies": {
-        "fsevents": "~2.3.2"
-      }
-    },
-    "node_modules/webpack-dev-server/node_modules/del": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/del/-/del-6.0.0.tgz",
-      "integrity": "sha512-1shh9DQ23L16oXSZKB2JxpL7iMy2E0S9d517ptA1P8iw0alkPtQcrKH7ru31rYtKwF499HkTu+DRzq3TCKDFRQ==",
-      "dev": true,
-      "dependencies": {
-        "globby": "^11.0.1",
-        "graceful-fs": "^4.2.4",
-        "is-glob": "^4.0.1",
-        "is-path-cwd": "^2.2.0",
-        "is-path-inside": "^3.0.2",
-        "p-map": "^4.0.0",
-        "rimraf": "^3.0.2",
-        "slash": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/webpack-dev-server/node_modules/fill-range": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-      "dev": true,
-      "dependencies": {
-        "to-regex-range": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/webpack-dev-server/node_modules/find-cache-dir": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.1.tgz",
-      "integrity": "sha512-t2GDMt3oGC/v+BMwzmllWDuJF/xcDtE5j/fCGbqDD7OLuJkj0cfh1YSA5VKPvwMeLFLNDBkwOKZ2X85jGLVftQ==",
-      "dev": true,
-      "dependencies": {
-        "commondir": "^1.0.1",
-        "make-dir": "^3.0.2",
-        "pkg-dir": "^4.1.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/webpack-dev-server/node_modules/fsevents": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
-      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
-      "dev": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
-      }
-    },
-    "node_modules/webpack-dev-server/node_modules/glob-parent": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
-      "dependencies": {
-        "is-glob": "^4.0.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/webpack-dev-server/node_modules/globby": {
-      "version": "11.0.4",
-      "resolved": "https://registry.npmjs.org/globby/-/globby-11.0.4.tgz",
-      "integrity": "sha512-9O4MVG9ioZJ08ffbcyVYyLOJLk5JQ688pJ4eMGLpdWLHq/Wr1D9BlriLQyL0E+jbkuePVZXYFj47QM/v093wHg==",
-      "dev": true,
-      "dependencies": {
-        "array-union": "^2.1.0",
-        "dir-glob": "^3.0.1",
-        "fast-glob": "^3.1.1",
-        "ignore": "^5.1.4",
-        "merge2": "^1.3.0",
-        "slash": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/webpack-dev-server/node_modules/graceful-fs": {
-      "version": "4.2.6",
-      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.6.tgz",
-      "integrity": "sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ==",
-      "dev": true
-    },
-    "node_modules/webpack-dev-server/node_modules/ignore": {
-      "version": "5.1.8",
-      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.1.8.tgz",
-      "integrity": "sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw==",
-      "dev": true,
-      "engines": {
-        "node": ">= 4"
-      }
-    },
-    "node_modules/webpack-dev-server/node_modules/ipaddr.js": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.0.1.tgz",
-      "integrity": "sha512-1qTgH9NG+IIJ4yfKs2e6Pp1bZg8wbDbKHT21HrLIeYBTRLgMYKnMTPAuI3Lcs61nfx5h1xlXnbJtH1kX5/d/ng==",
-      "dev": true,
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/webpack-dev-server/node_modules/is-binary-path": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
-      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-      "dev": true,
-      "dependencies": {
-        "binary-extensions": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/webpack-dev-server/node_modules/is-number": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.12.0"
-      }
-    },
-    "node_modules/webpack-dev-server/node_modules/is-path-inside": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
-      "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/webpack-dev-server/node_modules/make-dir": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
-      "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
-      "dev": true,
-      "dependencies": {
-        "semver": "^6.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/webpack-dev-server/node_modules/p-map": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/p-map/-/p-map-4.0.0.tgz",
-      "integrity": "sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ==",
-      "dev": true,
-      "dependencies": {
-        "aggregate-error": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/webpack-dev-server/node_modules/pkg-dir": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
-      "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
-      "dev": true,
-      "dependencies": {
-        "find-up": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/webpack-dev-server/node_modules/readdirp": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
-      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-      "dev": true,
-      "dependencies": {
-        "picomatch": "^2.2.1"
-      },
-      "engines": {
-        "node": ">=8.10.0"
-      }
-    },
-    "node_modules/webpack-dev-server/node_modules/rimraf": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
-      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
-      "dev": true,
-      "dependencies": {
-        "glob": "^7.1.3"
-      },
-      "bin": {
-        "rimraf": "bin.js"
-      }
-    },
-    "node_modules/webpack-dev-server/node_modules/schema-utils": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.0.tgz",
-      "integrity": "sha512-tTEaeYkyIhEZ9uWgAjDerWov3T9MgX8dhhy2r0IGeeX4W8ngtGl1++dUve/RUqzuaASSh7shwCDJjEzthxki8w==",
-      "dev": true,
-      "dependencies": {
-        "@types/json-schema": "^7.0.7",
-        "ajv": "^6.12.5",
-        "ajv-keywords": "^3.5.2"
-      },
-      "engines": {
-        "node": ">= 10.13.0"
-      }
-    },
-    "node_modules/webpack-dev-server/node_modules/semver": {
-      "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-      "dev": true,
-      "bin": {
-        "semver": "bin/semver.js"
-      }
-    },
-    "node_modules/webpack-dev-server/node_modules/slash": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
-      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/webpack-dev-server/node_modules/strip-ansi": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
-      "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
-      "dev": true,
-      "dependencies": {
-        "ansi-regex": "^5.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/webpack-dev-server/node_modules/to-regex-range": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dev": true,
-      "dependencies": {
-        "is-number": "^7.0.0"
-      },
-      "engines": {
-        "node": ">=8.0"
-      }
-    },
-    "node_modules/webpack-merge": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-5.2.0.tgz",
-      "integrity": "sha512-QBglJBg5+lItm3/Lopv8KDDK01+hjdg2azEwi/4vKJ8ZmGPdtJsTpjtNNOW3a4WiqzXdCATtTudOZJngE7RKkA==",
-      "dev": true,
-      "dependencies": {
-        "clone-deep": "^4.0.1",
-        "wildcard": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10.0.0"
-      }
-    },
-    "node_modules/webpack-sources": {
-      "version": "1.4.3",
-      "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-1.4.3.tgz",
-      "integrity": "sha512-lgTS3Xhv1lCOKo7SA5TjKXMjpSM4sBjNV5+q2bqesbSPs5FjGmU6jjtBSkX9b4qW87vDIsCIlUPOEhbZrMdjeQ==",
-      "dev": true,
-      "dependencies": {
-        "source-list-map": "^2.0.0",
-        "source-map": "~0.6.1"
-      }
-    },
-    "node_modules/webpack/node_modules/acorn": {
-      "version": "8.4.1",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.4.1.tgz",
-      "integrity": "sha512-asabaBSkEKosYKMITunzX177CXxQ4Q8BSSzMTKD+FefUhipQC70gfW5SiUDhYQ3vk8G+81HqQk7Fv9OXwwn9KA==",
-      "dev": true,
-      "bin": {
-        "acorn": "bin/acorn"
-      },
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
-    "node_modules/webpack/node_modules/ajv": {
-      "version": "6.12.6",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-      "dev": true,
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "fast-json-stable-stringify": "^2.0.0",
-        "json-schema-traverse": "^0.4.1",
-        "uri-js": "^4.2.2"
-      }
-    },
-    "node_modules/webpack/node_modules/schema-utils": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.0.tgz",
-      "integrity": "sha512-tTEaeYkyIhEZ9uWgAjDerWov3T9MgX8dhhy2r0IGeeX4W8ngtGl1++dUve/RUqzuaASSh7shwCDJjEzthxki8w==",
-      "dev": true,
-      "dependencies": {
-        "@types/json-schema": "^7.0.7",
-        "ajv": "^6.12.5",
-        "ajv-keywords": "^3.5.2"
-      },
-      "engines": {
-        "node": ">= 10.13.0"
-      }
-    },
-    "node_modules/webpack/node_modules/webpack-sources": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-2.3.0.tgz",
-      "integrity": "sha512-WyOdtwSvOML1kbgtXbTDnEW0jkJ7hZr/bDByIwszhWd/4XX1A3XMkrbFMsuH4+/MfLlZCUzlAdg4r7jaGKEIgQ==",
-      "dev": true,
-      "dependencies": {
-        "source-list-map": "^2.0.1",
-        "source-map": "^0.6.1"
-      },
-      "engines": {
-        "node": ">=10.13.0"
-      }
-    },
-    "node_modules/websocket-driver": {
-      "version": "0.7.4",
-      "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.4.tgz",
-      "integrity": "sha512-b17KeDIQVjvb0ssuSDF2cYXSg2iztliJ4B9WdsuB6J952qCPKmnVq4DyW5motImXHDC1cBT/1UezrJVsKw5zjg==",
-      "dev": true,
-      "dependencies": {
-        "http-parser-js": ">=0.5.1",
-        "safe-buffer": ">=5.1.0",
-        "websocket-extensions": ">=0.1.1"
-      },
-      "engines": {
-        "node": ">=0.8.0"
-      }
-    },
-    "node_modules/websocket-extensions": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.4.tgz",
-      "integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.8.0"
-      }
-    },
-    "node_modules/whatwg-encoding": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-1.0.5.tgz",
-      "integrity": "sha512-b5lim54JOPN9HtzvK9HFXvBma/rnfFeqsic0hSpjtDbVxR3dJKLc+KB4V6GgiGOvl7CY/KNh8rxSo9DKQrnUEw==",
-      "dev": true,
-      "dependencies": {
-        "iconv-lite": "0.4.24"
-      }
-    },
-    "node_modules/whatwg-mimetype": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz",
-      "integrity": "sha512-M4yMwr6mAnQz76TbJm914+gPpB/nCwvZbJU28cUD6dR004SAxDLOOSUaB1JDRqLtaOV/vi0IC5lEAGFgrjGv/g==",
-      "dev": true
-    },
-    "node_modules/whatwg-url": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-7.1.0.tgz",
-      "integrity": "sha512-WUu7Rg1DroM7oQvGWfOiAK21n74Gg+T4elXEQYkOhtyLeWiJFoOGLXPKI/9gzIie9CtwVLm8wtw6YJdKyxSjeg==",
-      "dev": true,
-      "dependencies": {
-        "lodash.sortby": "^4.7.0",
-        "tr46": "^1.0.1",
-        "webidl-conversions": "^4.0.2"
-      }
-    },
-    "node_modules/which": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
-      "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
-      "dev": true,
-      "dependencies": {
-        "isexe": "^2.0.0"
-      },
-      "bin": {
-        "which": "bin/which"
-      }
-    },
-    "node_modules/which-boxed-primitive": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz",
-      "integrity": "sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==",
-      "dependencies": {
-        "is-bigint": "^1.0.1",
-        "is-boolean-object": "^1.1.0",
-        "is-number-object": "^1.0.4",
-        "is-string": "^1.0.5",
-        "is-symbol": "^1.0.3"
-      }
-    },
-    "node_modules/which-module": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz",
-      "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=",
-      "dev": true
-    },
-    "node_modules/wildcard": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/wildcard/-/wildcard-2.0.0.tgz",
-      "integrity": "sha512-JcKqAHLPxcdb9KM49dufGXn2x3ssnfjbcaQdLlfZsL9rH9wgDQjUtDxbo8NE0F6SFvydeu1VhZe7hZuHsB2/pw==",
-      "dev": true
-    },
-    "node_modules/winston": {
-      "version": "2.4.5",
-      "resolved": "https://registry.npmjs.org/winston/-/winston-2.4.5.tgz",
-      "integrity": "sha512-TWoamHt5yYvsMarGlGEQE59SbJHqGsZV8/lwC+iCcGeAe0vUaOh+Lv6SYM17ouzC/a/LB1/hz/7sxFBtlu1l4A==",
-      "dev": true,
-      "dependencies": {
-        "async": "~1.0.0",
-        "colors": "1.0.x",
-        "cycle": "1.0.x",
-        "eyes": "0.1.x",
-        "isstream": "0.1.x",
-        "stack-trace": "0.0.x"
-      },
-      "engines": {
-        "node": ">= 0.10.0"
-      }
-    },
-    "node_modules/winston/node_modules/async": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/async/-/async-1.0.0.tgz",
-      "integrity": "sha1-+PwEyjoTeErenhZBr5hXjPvWR6k=",
-      "dev": true
-    },
-    "node_modules/winston/node_modules/colors": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/colors/-/colors-1.0.3.tgz",
-      "integrity": "sha1-BDP0TYCWgP3rYO0mDxsMJi6CpAs=",
-      "dev": true,
-      "engines": {
-        "node": ">=0.1.90"
-      }
-    },
-    "node_modules/word-wrap": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
-      "integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/worker-rpc": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/worker-rpc/-/worker-rpc-0.1.1.tgz",
-      "integrity": "sha512-P1WjMrUB3qgJNI9jfmpZ/htmBEjFh//6l/5y8SD9hg1Ef5zTTVVoRjTrTEzPrNBQvmhMxkoTsjOXN10GWU7aCg==",
-      "dev": true,
-      "dependencies": {
-        "microevent.ts": "~0.1.1"
-      }
-    },
-    "node_modules/wrap-ansi": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
-      "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
-      "dev": true,
-      "dependencies": {
-        "ansi-styles": "^4.0.0",
-        "string-width": "^4.1.0",
-        "strip-ansi": "^6.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/wrap-ansi/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"
-      }
-    },
-    "node_modules/wrap-ansi/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/wrap-ansi/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/wrap-ansi/node_modules/strip-ansi": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
-      "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
-      "dev": true,
-      "dependencies": {
-        "ansi-regex": "^5.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/wrappy": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
-    },
-    "node_modules/write": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/write/-/write-1.0.3.tgz",
-      "integrity": "sha512-/lg70HAjtkUgWPVZhZcm+T4hkL8Zbtp1nFNOn3lRrxnlv50SRBv7cR7RqR+GMsd3hUXy9hWBo4CHTbFTcOYwig==",
-      "dev": true,
-      "dependencies": {
-        "mkdirp": "^0.5.1"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/write-file-atomic": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-3.0.3.tgz",
-      "integrity": "sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==",
-      "dev": true,
-      "dependencies": {
-        "imurmurhash": "^0.1.4",
-        "is-typedarray": "^1.0.0",
-        "signal-exit": "^3.0.2",
-        "typedarray-to-buffer": "^3.1.5"
-      }
-    },
-    "node_modules/ws": {
-      "version": "7.5.2",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.2.tgz",
-      "integrity": "sha512-lkF7AWRicoB9mAgjeKbGqVUekLnSNO4VjKVnuPHpQeOxZOErX6BPXwJk70nFslRCEEA8EVW7ZjKwXaP9N+1sKQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=8.3.0"
-      }
-    },
-    "node_modules/xml-name-validator": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-3.0.0.tgz",
-      "integrity": "sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw==",
-      "dev": true
-    },
-    "node_modules/xmlchars": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
-      "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
-      "dev": true
-    },
-    "node_modules/xregexp": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/xregexp/-/xregexp-4.4.1.tgz",
-      "integrity": "sha512-2u9HwfadaJaY9zHtRRnH6BY6CQVNQKkYm3oLtC9gJXXzfsbACg5X5e4EZZGVAH+YIfa+QA9lsFQTTe3HURF3ag==",
-      "dev": true,
-      "dependencies": {
-        "@babel/runtime-corejs3": "^7.12.1"
-      }
-    },
-    "node_modules/xregexp/node_modules/@babel/runtime-corejs3": {
-      "version": "7.14.7",
-      "resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.14.7.tgz",
-      "integrity": "sha512-Wvzcw4mBYbTagyBVZpAJWI06auSIj033T/yNE0Zn1xcup83MieCddZA7ls3kme17L4NOGBrQ09Q+nKB41RLWBA==",
-      "dev": true,
-      "dependencies": {
-        "core-js-pure": "^3.15.0",
-        "regenerator-runtime": "^0.13.4"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/xregexp/node_modules/core-js-pure": {
-      "version": "3.15.2",
-      "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.15.2.tgz",
-      "integrity": "sha512-D42L7RYh1J2grW8ttxoY1+17Y4wXZeKe7uyplAI3FkNQyI5OgBIAjUfFiTPfL1rs0qLpxaabITNbjKl1Sp82tA==",
-      "dev": true
-    },
-    "node_modules/xtend": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
-      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
-      "dev": true,
-      "optional": true,
-      "engines": {
-        "node": ">=0.4"
-      }
-    },
-    "node_modules/y18n": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.0.tgz",
-      "integrity": "sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w==",
-      "dev": true
-    },
-    "node_modules/yallist": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-      "dev": true
-    },
-    "node_modules/yaml": {
-      "version": "1.10.2",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
-      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
-      "dev": true,
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/yargs": {
-      "version": "15.4.1",
-      "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz",
-      "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
-      "dev": true,
-      "dependencies": {
-        "cliui": "^6.0.0",
-        "decamelize": "^1.2.0",
-        "find-up": "^4.1.0",
-        "get-caller-file": "^2.0.1",
-        "require-directory": "^2.1.1",
-        "require-main-filename": "^2.0.0",
-        "set-blocking": "^2.0.0",
-        "string-width": "^4.2.0",
-        "which-module": "^2.0.0",
-        "y18n": "^4.0.0",
-        "yargs-parser": "^18.1.2"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/yargs-parser": {
-      "version": "18.1.3",
-      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
-      "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
-      "dev": true,
-      "dependencies": {
-        "camelcase": "^5.0.0",
-        "decamelize": "^1.2.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/yargs-parser/node_modules/camelcase": {
-      "version": "5.3.1",
-      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
-      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/yauzl": {
-      "version": "2.10.0",
-      "resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.10.0.tgz",
-      "integrity": "sha1-x+sXyT4RLLEIb6bY5R+wZnt5pfk=",
-      "dev": true,
-      "optional": true,
-      "dependencies": {
-        "buffer-crc32": "~0.2.3",
-        "fd-slicer": "~1.1.0"
-      }
-    },
-    "node_modules/yocto-queue": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
-      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
-      "dev": true,
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/yup": {
-      "version": "0.31.1",
-      "resolved": "https://registry.npmjs.org/yup/-/yup-0.31.1.tgz",
-      "integrity": "sha512-Lf6648jDYOWR75IlWkVfwesPyW6oj+50NpxlKvsQlpPsB8eI+ndI7b4S1VrwbmeV9hIZDu1MzrlIL4W+gK1jPw==",
-      "dependencies": {
-        "@babel/runtime": "^7.10.5",
-        "lodash": "^4.17.20",
-        "lodash-es": "^4.17.11",
-        "property-expr": "^2.0.4",
-        "toposort": "^2.0.2"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/yup/node_modules/toposort": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz",
-      "integrity": "sha1-riF2gXXRVZ1IvvNUILL0li8JwzA="
-    }
-  },
-  "dependencies": {
-    "@babel/cli": {
-      "version": "7.10.5",
-      "resolved": "https://registry.npmjs.org/@babel/cli/-/cli-7.10.5.tgz",
-      "integrity": "sha512-j9H9qSf3kLdM0Ao3aGPbGZ73mEA9XazuupcS6cDGWuiyAcANoguhP0r2Lx32H5JGw4sSSoHG3x/mxVnHgvOoyA==",
-      "dev": true,
-      "requires": {
-        "chokidar": "^2.1.8",
-        "commander": "^4.0.1",
-        "convert-source-map": "^1.1.0",
-        "fs-readdir-recursive": "^1.1.0",
-        "glob": "^7.0.0",
-        "lodash": "^4.17.19",
-        "make-dir": "^2.1.0",
-        "slash": "^2.0.0",
-        "source-map": "^0.5.0"
-      },
-      "dependencies": {
-        "source-map": {
-          "version": "0.5.7",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
-          "dev": true
-        }
-      }
-    },
-    "@babel/code-frame": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz",
-      "integrity": "sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==",
-      "dev": true,
-      "requires": {
-        "@babel/highlight": "^7.10.4"
-      }
-    },
-    "@babel/compat-data": {
-      "version": "7.14.7",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.14.7.tgz",
-      "integrity": "sha512-nS6dZaISCXJ3+518CWiBfEr//gHyMO02uDxBkXTKZDN5POruCnOZ1N4YBRZDCabwF8nZMWBpRxIicmXtBs+fvw==",
-      "dev": true
-    },
-    "@babel/core": {
-      "version": "7.9.0",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.9.0.tgz",
-      "integrity": "sha512-kWc7L0fw1xwvI0zi8OKVBuxRVefwGOrKSQMvrQ3dW+bIIavBY3/NpXmpjMy7bQnLgwgzWQZ8TlM57YHpHNHz4w==",
-      "dev": true,
-      "requires": {
-        "@babel/code-frame": "^7.8.3",
-        "@babel/generator": "^7.9.0",
-        "@babel/helper-module-transforms": "^7.9.0",
-        "@babel/helpers": "^7.9.0",
-        "@babel/parser": "^7.9.0",
-        "@babel/template": "^7.8.6",
-        "@babel/traverse": "^7.9.0",
-        "@babel/types": "^7.9.0",
-        "convert-source-map": "^1.7.0",
-        "debug": "^4.1.0",
-        "gensync": "^1.0.0-beta.1",
-        "json5": "^2.1.2",
-        "lodash": "^4.17.13",
-        "resolve": "^1.3.2",
-        "semver": "^5.4.1",
-        "source-map": "^0.5.0"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
-          "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
-          "dev": true,
-          "requires": {
-            "ms": "^2.1.1"
-          }
-        },
-        "ms": {
-          "version": "2.1.2",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-          "dev": true
-        },
-        "source-map": {
-          "version": "0.5.7",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
-          "dev": true
-        }
-      }
-    },
-    "@babel/generator": {
-      "version": "7.10.5",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.10.5.tgz",
-      "integrity": "sha512-3vXxr3FEW7E7lJZiWQ3bM4+v/Vyr9C+hpolQ8BGFr9Y8Ri2tFLWTixmwKBafDujO1WVah4fhZBeU1bieKdghig==",
-      "dev": true,
-      "requires": {
-        "@babel/types": "^7.10.5",
-        "jsesc": "^2.5.1",
-        "source-map": "^0.5.0"
-      },
-      "dependencies": {
-        "source-map": {
-          "version": "0.5.7",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
-          "dev": true
-        }
-      }
-    },
-    "@babel/helper-annotate-as-pure": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.14.5.tgz",
-      "integrity": "sha512-EivH9EgBIb+G8ij1B2jAwSH36WnGvkQSEC6CkX/6v6ZFlw5fVOHvsgGF4uiEHO2GzMvunZb6tDLQEQSdrdocrA==",
-      "dev": true,
-      "requires": {
-        "@babel/types": "^7.14.5"
-      },
-      "dependencies": {
-        "@babel/helper-validator-identifier": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz",
-          "integrity": "sha512-5lsetuxCLilmVGyiLEfoHBRX8UCFD+1m2x3Rj97WrW3V7H3u4RWRXA4evMjImCsin2J2YT0QaVDGf+z8ondbAg==",
-          "dev": true
-        },
-        "@babel/types": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.5.tgz",
-          "integrity": "sha512-M/NzBpEL95I5Hh4dwhin5JlE7EzO5PHMAuzjxss3tiOBD46KfQvVedN/3jEPZvdRvtsK2222XfdHogNIttFgcg==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.14.5",
-            "to-fast-properties": "^2.0.0"
-          }
-        }
-      }
-    },
-    "@babel/helper-builder-binary-assignment-operator-visitor": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.14.5.tgz",
-      "integrity": "sha512-YTA/Twn0vBXDVGJuAX6PwW7x5zQei1luDDo2Pl6q1qZ7hVNl0RZrhHCQG/ArGpR29Vl7ETiB8eJyrvpuRp300w==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-explode-assignable-expression": "^7.14.5",
-        "@babel/types": "^7.14.5"
-      },
-      "dependencies": {
-        "@babel/helper-validator-identifier": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz",
-          "integrity": "sha512-5lsetuxCLilmVGyiLEfoHBRX8UCFD+1m2x3Rj97WrW3V7H3u4RWRXA4evMjImCsin2J2YT0QaVDGf+z8ondbAg==",
-          "dev": true
-        },
-        "@babel/types": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.5.tgz",
-          "integrity": "sha512-M/NzBpEL95I5Hh4dwhin5JlE7EzO5PHMAuzjxss3tiOBD46KfQvVedN/3jEPZvdRvtsK2222XfdHogNIttFgcg==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.14.5",
-            "to-fast-properties": "^2.0.0"
-          }
-        }
-      }
-    },
-    "@babel/helper-compilation-targets": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.14.5.tgz",
-      "integrity": "sha512-v+QtZqXEiOnpO6EYvlImB6zCD2Lel06RzOPzmkz/D/XgQiUu3C/Jb1LOqSt/AIA34TYi/Q+KlT8vTQrgdxkbLw==",
-      "dev": true,
-      "requires": {
-        "@babel/compat-data": "^7.14.5",
-        "@babel/helper-validator-option": "^7.14.5",
-        "browserslist": "^4.16.6",
-        "semver": "^6.3.0"
-      },
-      "dependencies": {
-        "semver": {
-          "version": "6.3.0",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/helper-create-class-features-plugin": {
-      "version": "7.14.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.14.6.tgz",
-      "integrity": "sha512-Z6gsfGofTxH/+LQXqYEK45kxmcensbzmk/oi8DmaQytlQCgqNZt9XQF8iqlI/SeXWVjaMNxvYvzaYw+kh42mDg==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-annotate-as-pure": "^7.14.5",
-        "@babel/helper-function-name": "^7.14.5",
-        "@babel/helper-member-expression-to-functions": "^7.14.5",
-        "@babel/helper-optimise-call-expression": "^7.14.5",
-        "@babel/helper-replace-supers": "^7.14.5",
-        "@babel/helper-split-export-declaration": "^7.14.5"
-      },
-      "dependencies": {
-        "@babel/code-frame": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.14.5.tgz",
-          "integrity": "sha512-9pzDqyc6OLDaqe+zbACgFkb6fKMNG6CObKpnYXChRsvYGyEdc7CA2BaqeOM+vOtCS5ndmJicPJhKAwYRI6UfFw==",
-          "dev": true,
-          "requires": {
-            "@babel/highlight": "^7.14.5"
-          }
-        },
-        "@babel/generator": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.14.5.tgz",
-          "integrity": "sha512-y3rlP+/G25OIX3mYKKIOlQRcqj7YgrvHxOLbVmyLJ9bPmi5ttvUmpydVjcFjZphOktWuA7ovbx91ECloWTfjIA==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.14.5",
-            "jsesc": "^2.5.1",
-            "source-map": "^0.5.0"
-          }
-        },
-        "@babel/helper-function-name": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.14.5.tgz",
-          "integrity": "sha512-Gjna0AsXWfFvrAuX+VKcN/aNNWonizBj39yGwUzVDVTlMYJMK2Wp6xdpy72mfArFq5uK+NOuexfzZlzI1z9+AQ==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-get-function-arity": "^7.14.5",
-            "@babel/template": "^7.14.5",
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/helper-get-function-arity": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.14.5.tgz",
-          "integrity": "sha512-I1Db4Shst5lewOM4V+ZKJzQ0JGGaZ6VY1jYvMghRjqs6DWgxLCIyFt30GlnKkfUeFLpJt2vzbMVEXVSXlIFYUg==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/helper-member-expression-to-functions": {
-          "version": "7.14.7",
-          "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.14.7.tgz",
-          "integrity": "sha512-TMUt4xKxJn6ccjcOW7c4hlwyJArizskAhoSTOCkA0uZ+KghIaci0Qg9R043kUMWI9mtQfgny+NQ5QATnZ+paaA==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/helper-optimise-call-expression": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.14.5.tgz",
-          "integrity": "sha512-IqiLIrODUOdnPU9/F8ib1Fx2ohlgDhxnIDU7OEVi+kAbEZcyiF7BLU8W6PfvPi9LzztjS7kcbzbmL7oG8kD6VA==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/helper-replace-supers": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.14.5.tgz",
-          "integrity": "sha512-3i1Qe9/8x/hCHINujn+iuHy+mMRLoc77b2nI9TB0zjH1hvn9qGlXjWlggdwUcju36PkPCy/lpM7LLUdcTyH4Ow==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-member-expression-to-functions": "^7.14.5",
-            "@babel/helper-optimise-call-expression": "^7.14.5",
-            "@babel/traverse": "^7.14.5",
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/helper-split-export-declaration": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.14.5.tgz",
-          "integrity": "sha512-hprxVPu6e5Kdp2puZUmvOGjaLv9TCe58E/Fl6hRq4YiVQxIcNvuq6uTM2r1mT/oPskuS9CgR+I94sqAYv0NGKA==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/helper-validator-identifier": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz",
-          "integrity": "sha512-5lsetuxCLilmVGyiLEfoHBRX8UCFD+1m2x3Rj97WrW3V7H3u4RWRXA4evMjImCsin2J2YT0QaVDGf+z8ondbAg==",
-          "dev": true
-        },
-        "@babel/highlight": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.14.5.tgz",
-          "integrity": "sha512-qf9u2WFWVV0MppaL877j2dBtQIDgmidgjGk5VIMw3OadXvYaXn66U1BFlH2t4+t3i+8PhedppRv+i40ABzd+gg==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.14.5",
-            "chalk": "^2.0.0",
-            "js-tokens": "^4.0.0"
-          }
-        },
-        "@babel/parser": {
-          "version": "7.14.7",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.14.7.tgz",
-          "integrity": "sha512-X67Z5y+VBJuHB/RjwECp8kSl5uYi0BvRbNeWqkaJCVh+LiTPl19WBUfG627psSgp9rSf6ojuXghQM3ha6qHHdA==",
-          "dev": true
-        },
-        "@babel/template": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.14.5.tgz",
-          "integrity": "sha512-6Z3Po85sfxRGachLULUhOmvAaOo7xCvqGQtxINai2mEGPFm6pQ4z5QInFnUrRpfoSV60BnjyF5F3c+15fxFV1g==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.14.5",
-            "@babel/parser": "^7.14.5",
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/traverse": {
-          "version": "7.14.7",
-          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.14.7.tgz",
-          "integrity": "sha512-9vDr5NzHu27wgwejuKL7kIOm4bwEtaPQ4Z6cpCmjSuaRqpH/7xc4qcGEscwMqlkwgcXl6MvqoAjZkQ24uSdIZQ==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.14.5",
-            "@babel/generator": "^7.14.5",
-            "@babel/helper-function-name": "^7.14.5",
-            "@babel/helper-hoist-variables": "^7.14.5",
-            "@babel/helper-split-export-declaration": "^7.14.5",
-            "@babel/parser": "^7.14.7",
-            "@babel/types": "^7.14.5",
-            "debug": "^4.1.0",
-            "globals": "^11.1.0"
-          }
-        },
-        "@babel/types": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.5.tgz",
-          "integrity": "sha512-M/NzBpEL95I5Hh4dwhin5JlE7EzO5PHMAuzjxss3tiOBD46KfQvVedN/3jEPZvdRvtsK2222XfdHogNIttFgcg==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.14.5",
-            "to-fast-properties": "^2.0.0"
-          }
-        },
-        "source-map": {
-          "version": "0.5.7",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
-          "dev": true
-        }
-      }
-    },
-    "@babel/helper-create-regexp-features-plugin": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.14.5.tgz",
-      "integrity": "sha512-TLawwqpOErY2HhWbGJ2nZT5wSkR192QpN+nBg1THfBfftrlvOh+WbhrxXCH4q4xJ9Gl16BGPR/48JA+Ryiho/A==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-annotate-as-pure": "^7.14.5",
-        "regexpu-core": "^4.7.1"
-      }
-    },
-    "@babel/helper-define-polyfill-provider": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.2.3.tgz",
-      "integrity": "sha512-RH3QDAfRMzj7+0Nqu5oqgO5q9mFtQEVvCRsi8qCEfzLR9p2BHfn5FzhSB2oj1fF7I2+DcTORkYaQ6aTR9Cofew==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-compilation-targets": "^7.13.0",
-        "@babel/helper-module-imports": "^7.12.13",
-        "@babel/helper-plugin-utils": "^7.13.0",
-        "@babel/traverse": "^7.13.0",
-        "debug": "^4.1.1",
-        "lodash.debounce": "^4.0.8",
-        "resolve": "^1.14.2",
-        "semver": "^6.1.2"
-      },
-      "dependencies": {
-        "@babel/code-frame": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.14.5.tgz",
-          "integrity": "sha512-9pzDqyc6OLDaqe+zbACgFkb6fKMNG6CObKpnYXChRsvYGyEdc7CA2BaqeOM+vOtCS5ndmJicPJhKAwYRI6UfFw==",
-          "dev": true,
-          "requires": {
-            "@babel/highlight": "^7.14.5"
-          }
-        },
-        "@babel/generator": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.14.5.tgz",
-          "integrity": "sha512-y3rlP+/G25OIX3mYKKIOlQRcqj7YgrvHxOLbVmyLJ9bPmi5ttvUmpydVjcFjZphOktWuA7ovbx91ECloWTfjIA==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.14.5",
-            "jsesc": "^2.5.1",
-            "source-map": "^0.5.0"
-          }
-        },
-        "@babel/helper-function-name": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.14.5.tgz",
-          "integrity": "sha512-Gjna0AsXWfFvrAuX+VKcN/aNNWonizBj39yGwUzVDVTlMYJMK2Wp6xdpy72mfArFq5uK+NOuexfzZlzI1z9+AQ==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-get-function-arity": "^7.14.5",
-            "@babel/template": "^7.14.5",
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/helper-get-function-arity": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.14.5.tgz",
-          "integrity": "sha512-I1Db4Shst5lewOM4V+ZKJzQ0JGGaZ6VY1jYvMghRjqs6DWgxLCIyFt30GlnKkfUeFLpJt2vzbMVEXVSXlIFYUg==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/helper-module-imports": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.14.5.tgz",
-          "integrity": "sha512-SwrNHu5QWS84XlHwGYPDtCxcA0hrSlL2yhWYLgeOc0w7ccOl2qv4s/nARI0aYZW+bSwAL5CukeXA47B/1NKcnQ==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/helper-plugin-utils": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-          "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-          "dev": true
-        },
-        "@babel/helper-split-export-declaration": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.14.5.tgz",
-          "integrity": "sha512-hprxVPu6e5Kdp2puZUmvOGjaLv9TCe58E/Fl6hRq4YiVQxIcNvuq6uTM2r1mT/oPskuS9CgR+I94sqAYv0NGKA==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/helper-validator-identifier": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz",
-          "integrity": "sha512-5lsetuxCLilmVGyiLEfoHBRX8UCFD+1m2x3Rj97WrW3V7H3u4RWRXA4evMjImCsin2J2YT0QaVDGf+z8ondbAg==",
-          "dev": true
-        },
-        "@babel/highlight": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.14.5.tgz",
-          "integrity": "sha512-qf9u2WFWVV0MppaL877j2dBtQIDgmidgjGk5VIMw3OadXvYaXn66U1BFlH2t4+t3i+8PhedppRv+i40ABzd+gg==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.14.5",
-            "chalk": "^2.0.0",
-            "js-tokens": "^4.0.0"
-          }
-        },
-        "@babel/parser": {
-          "version": "7.14.7",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.14.7.tgz",
-          "integrity": "sha512-X67Z5y+VBJuHB/RjwECp8kSl5uYi0BvRbNeWqkaJCVh+LiTPl19WBUfG627psSgp9rSf6ojuXghQM3ha6qHHdA==",
-          "dev": true
-        },
-        "@babel/template": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.14.5.tgz",
-          "integrity": "sha512-6Z3Po85sfxRGachLULUhOmvAaOo7xCvqGQtxINai2mEGPFm6pQ4z5QInFnUrRpfoSV60BnjyF5F3c+15fxFV1g==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.14.5",
-            "@babel/parser": "^7.14.5",
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/traverse": {
-          "version": "7.14.7",
-          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.14.7.tgz",
-          "integrity": "sha512-9vDr5NzHu27wgwejuKL7kIOm4bwEtaPQ4Z6cpCmjSuaRqpH/7xc4qcGEscwMqlkwgcXl6MvqoAjZkQ24uSdIZQ==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.14.5",
-            "@babel/generator": "^7.14.5",
-            "@babel/helper-function-name": "^7.14.5",
-            "@babel/helper-hoist-variables": "^7.14.5",
-            "@babel/helper-split-export-declaration": "^7.14.5",
-            "@babel/parser": "^7.14.7",
-            "@babel/types": "^7.14.5",
-            "debug": "^4.1.0",
-            "globals": "^11.1.0"
-          }
-        },
-        "@babel/types": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.5.tgz",
-          "integrity": "sha512-M/NzBpEL95I5Hh4dwhin5JlE7EzO5PHMAuzjxss3tiOBD46KfQvVedN/3jEPZvdRvtsK2222XfdHogNIttFgcg==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.14.5",
-            "to-fast-properties": "^2.0.0"
-          }
-        },
-        "semver": {
-          "version": "6.3.0",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-          "dev": true
-        },
-        "source-map": {
-          "version": "0.5.7",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
-          "dev": true
-        }
-      }
-    },
-    "@babel/helper-explode-assignable-expression": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.14.5.tgz",
-      "integrity": "sha512-Htb24gnGJdIGT4vnRKMdoXiOIlqOLmdiUYpAQ0mYfgVT/GDm8GOYhgi4GL+hMKrkiPRohO4ts34ELFsGAPQLDQ==",
-      "dev": true,
-      "requires": {
-        "@babel/types": "^7.14.5"
-      },
-      "dependencies": {
-        "@babel/helper-validator-identifier": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz",
-          "integrity": "sha512-5lsetuxCLilmVGyiLEfoHBRX8UCFD+1m2x3Rj97WrW3V7H3u4RWRXA4evMjImCsin2J2YT0QaVDGf+z8ondbAg==",
-          "dev": true
-        },
-        "@babel/types": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.5.tgz",
-          "integrity": "sha512-M/NzBpEL95I5Hh4dwhin5JlE7EzO5PHMAuzjxss3tiOBD46KfQvVedN/3jEPZvdRvtsK2222XfdHogNIttFgcg==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.14.5",
-            "to-fast-properties": "^2.0.0"
-          }
-        }
-      }
-    },
-    "@babel/helper-function-name": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.10.4.tgz",
-      "integrity": "sha512-YdaSyz1n8gY44EmN7x44zBn9zQ1Ry2Y+3GTA+3vH6Mizke1Vw0aWDM66FOYEPw8//qKkmqOckrGgTYa+6sceqQ==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-get-function-arity": "^7.10.4",
-        "@babel/template": "^7.10.4",
-        "@babel/types": "^7.10.4"
-      }
-    },
-    "@babel/helper-get-function-arity": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.10.4.tgz",
-      "integrity": "sha512-EkN3YDB+SRDgiIUnNgcmiD361ti+AVbL3f3Henf6dqqUyr5dMsorno0lJWJuLhDhkI5sYEpgj6y9kB8AOU1I2A==",
-      "dev": true,
-      "requires": {
-        "@babel/types": "^7.10.4"
-      }
-    },
-    "@babel/helper-hoist-variables": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.14.5.tgz",
-      "integrity": "sha512-R1PXiz31Uc0Vxy4OEOm07x0oSjKAdPPCh3tPivn/Eo8cvz6gveAeuyUUPB21Hoiif0uoPQSSdhIPS3352nvdyQ==",
-      "dev": true,
-      "requires": {
-        "@babel/types": "^7.14.5"
-      },
-      "dependencies": {
-        "@babel/helper-validator-identifier": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz",
-          "integrity": "sha512-5lsetuxCLilmVGyiLEfoHBRX8UCFD+1m2x3Rj97WrW3V7H3u4RWRXA4evMjImCsin2J2YT0QaVDGf+z8ondbAg==",
-          "dev": true
-        },
-        "@babel/types": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.5.tgz",
-          "integrity": "sha512-M/NzBpEL95I5Hh4dwhin5JlE7EzO5PHMAuzjxss3tiOBD46KfQvVedN/3jEPZvdRvtsK2222XfdHogNIttFgcg==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.14.5",
-            "to-fast-properties": "^2.0.0"
-          }
-        }
-      }
-    },
-    "@babel/helper-member-expression-to-functions": {
-      "version": "7.10.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.10.5.tgz",
-      "integrity": "sha512-HiqJpYD5+WopCXIAbQDG0zye5XYVvcO9w/DHp5GsaGkRUaamLj2bEtu6i8rnGGprAhHM3qidCMgp71HF4endhA==",
-      "dev": true,
-      "requires": {
-        "@babel/types": "^7.10.5"
-      }
-    },
-    "@babel/helper-module-imports": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.10.4.tgz",
-      "integrity": "sha512-nEQJHqYavI217oD9+s5MUBzk6x1IlvoS9WTPfgG43CbMEeStE0v+r+TucWdx8KFGowPGvyOkDT9+7DHedIDnVw==",
-      "dev": true,
-      "requires": {
-        "@babel/types": "^7.10.4"
-      }
-    },
-    "@babel/helper-module-transforms": {
-      "version": "7.10.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.10.5.tgz",
-      "integrity": "sha512-4P+CWMJ6/j1W915ITJaUkadLObmCRRSC234uctJfn/vHrsLNxsR8dwlcXv9ZhJWzl77awf+mWXSZEKt5t0OnlA==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-module-imports": "^7.10.4",
-        "@babel/helper-replace-supers": "^7.10.4",
-        "@babel/helper-simple-access": "^7.10.4",
-        "@babel/helper-split-export-declaration": "^7.10.4",
-        "@babel/template": "^7.10.4",
-        "@babel/types": "^7.10.5",
-        "lodash": "^4.17.19"
-      }
-    },
-    "@babel/helper-optimise-call-expression": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.10.4.tgz",
-      "integrity": "sha512-n3UGKY4VXwXThEiKrgRAoVPBMqeoPgHVqiHZOanAJCG9nQUL2pLRQirUzl0ioKclHGpGqRgIOkgcIJaIWLpygg==",
-      "dev": true,
-      "requires": {
-        "@babel/types": "^7.10.4"
-      }
-    },
-    "@babel/helper-plugin-utils": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.10.4.tgz",
-      "integrity": "sha512-O4KCvQA6lLiMU9l2eawBPMf1xPP8xPfB3iEQw150hOVTqj/rfXz0ThTb4HEzqQfs2Bmo5Ay8BzxfzVtBrr9dVg==",
-      "dev": true
-    },
-    "@babel/helper-remap-async-to-generator": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.14.5.tgz",
-      "integrity": "sha512-rLQKdQU+HYlxBwQIj8dk4/0ENOUEhA/Z0l4hN8BexpvmSMN9oA9EagjnhnDpNsRdWCfjwa4mn/HyBXO9yhQP6A==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-annotate-as-pure": "^7.14.5",
-        "@babel/helper-wrap-function": "^7.14.5",
-        "@babel/types": "^7.14.5"
-      },
-      "dependencies": {
-        "@babel/helper-validator-identifier": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz",
-          "integrity": "sha512-5lsetuxCLilmVGyiLEfoHBRX8UCFD+1m2x3Rj97WrW3V7H3u4RWRXA4evMjImCsin2J2YT0QaVDGf+z8ondbAg==",
-          "dev": true
-        },
-        "@babel/types": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.5.tgz",
-          "integrity": "sha512-M/NzBpEL95I5Hh4dwhin5JlE7EzO5PHMAuzjxss3tiOBD46KfQvVedN/3jEPZvdRvtsK2222XfdHogNIttFgcg==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.14.5",
-            "to-fast-properties": "^2.0.0"
-          }
-        }
-      }
-    },
-    "@babel/helper-replace-supers": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.10.4.tgz",
-      "integrity": "sha512-sPxZfFXocEymYTdVK1UNmFPBN+Hv5mJkLPsYWwGBxZAxaWfFu+xqp7b6qWD0yjNuNL2VKc6L5M18tOXUP7NU0A==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-member-expression-to-functions": "^7.10.4",
-        "@babel/helper-optimise-call-expression": "^7.10.4",
-        "@babel/traverse": "^7.10.4",
-        "@babel/types": "^7.10.4"
-      }
-    },
-    "@babel/helper-simple-access": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.10.4.tgz",
-      "integrity": "sha512-0fMy72ej/VEvF8ULmX6yb5MtHG4uH4Dbd6I/aHDb/JVg0bbivwt9Wg+h3uMvX+QSFtwr5MeItvazbrc4jtRAXw==",
-      "dev": true,
-      "requires": {
-        "@babel/template": "^7.10.4",
-        "@babel/types": "^7.10.4"
-      }
-    },
-    "@babel/helper-skip-transparent-expression-wrappers": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.14.5.tgz",
-      "integrity": "sha512-dmqZB7mrb94PZSAOYtr+ZN5qt5owZIAgqtoTuqiFbHFtxgEcmQlRJVI+bO++fciBunXtB6MK7HrzrfcAzIz2NQ==",
-      "dev": true,
-      "requires": {
-        "@babel/types": "^7.14.5"
-      },
-      "dependencies": {
-        "@babel/helper-validator-identifier": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz",
-          "integrity": "sha512-5lsetuxCLilmVGyiLEfoHBRX8UCFD+1m2x3Rj97WrW3V7H3u4RWRXA4evMjImCsin2J2YT0QaVDGf+z8ondbAg==",
-          "dev": true
-        },
-        "@babel/types": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.5.tgz",
-          "integrity": "sha512-M/NzBpEL95I5Hh4dwhin5JlE7EzO5PHMAuzjxss3tiOBD46KfQvVedN/3jEPZvdRvtsK2222XfdHogNIttFgcg==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.14.5",
-            "to-fast-properties": "^2.0.0"
-          }
-        }
-      }
-    },
-    "@babel/helper-split-export-declaration": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.10.4.tgz",
-      "integrity": "sha512-pySBTeoUff56fL5CBU2hWm9TesA4r/rOkI9DyJLvvgz09MB9YtfIYe3iBriVaYNaPe+Alua0vBIOVOLs2buWhg==",
-      "dev": true,
-      "requires": {
-        "@babel/types": "^7.10.4"
-      }
-    },
-    "@babel/helper-validator-identifier": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.4.tgz",
-      "integrity": "sha512-3U9y+43hz7ZM+rzG24Qe2mufW5KhvFg/NhnNph+i9mgCtdTCtMJuI1TMkrIUiK7Ix4PYlRF9I5dhqaLYA/ADXw==",
-      "dev": true
-    },
-    "@babel/helper-validator-option": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.14.5.tgz",
-      "integrity": "sha512-OX8D5eeX4XwcroVW45NMvoYaIuFI+GQpA2a8Gi+X/U/cDUIRsV37qQfF905F0htTRCREQIB4KqPeaveRJUl3Ow==",
-      "dev": true
-    },
-    "@babel/helper-wrap-function": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.14.5.tgz",
-      "integrity": "sha512-YEdjTCq+LNuNS1WfxsDCNpgXkJaIyqco6DAelTUjT4f2KIWC1nBcaCaSdHTBqQVLnTBexBcVcFhLSU1KnYuePQ==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-function-name": "^7.14.5",
-        "@babel/template": "^7.14.5",
-        "@babel/traverse": "^7.14.5",
-        "@babel/types": "^7.14.5"
-      },
-      "dependencies": {
-        "@babel/code-frame": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.14.5.tgz",
-          "integrity": "sha512-9pzDqyc6OLDaqe+zbACgFkb6fKMNG6CObKpnYXChRsvYGyEdc7CA2BaqeOM+vOtCS5ndmJicPJhKAwYRI6UfFw==",
-          "dev": true,
-          "requires": {
-            "@babel/highlight": "^7.14.5"
-          }
-        },
-        "@babel/generator": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.14.5.tgz",
-          "integrity": "sha512-y3rlP+/G25OIX3mYKKIOlQRcqj7YgrvHxOLbVmyLJ9bPmi5ttvUmpydVjcFjZphOktWuA7ovbx91ECloWTfjIA==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.14.5",
-            "jsesc": "^2.5.1",
-            "source-map": "^0.5.0"
-          }
-        },
-        "@babel/helper-function-name": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.14.5.tgz",
-          "integrity": "sha512-Gjna0AsXWfFvrAuX+VKcN/aNNWonizBj39yGwUzVDVTlMYJMK2Wp6xdpy72mfArFq5uK+NOuexfzZlzI1z9+AQ==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-get-function-arity": "^7.14.5",
-            "@babel/template": "^7.14.5",
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/helper-get-function-arity": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.14.5.tgz",
-          "integrity": "sha512-I1Db4Shst5lewOM4V+ZKJzQ0JGGaZ6VY1jYvMghRjqs6DWgxLCIyFt30GlnKkfUeFLpJt2vzbMVEXVSXlIFYUg==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/helper-split-export-declaration": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.14.5.tgz",
-          "integrity": "sha512-hprxVPu6e5Kdp2puZUmvOGjaLv9TCe58E/Fl6hRq4YiVQxIcNvuq6uTM2r1mT/oPskuS9CgR+I94sqAYv0NGKA==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/helper-validator-identifier": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz",
-          "integrity": "sha512-5lsetuxCLilmVGyiLEfoHBRX8UCFD+1m2x3Rj97WrW3V7H3u4RWRXA4evMjImCsin2J2YT0QaVDGf+z8ondbAg==",
-          "dev": true
-        },
-        "@babel/highlight": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.14.5.tgz",
-          "integrity": "sha512-qf9u2WFWVV0MppaL877j2dBtQIDgmidgjGk5VIMw3OadXvYaXn66U1BFlH2t4+t3i+8PhedppRv+i40ABzd+gg==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.14.5",
-            "chalk": "^2.0.0",
-            "js-tokens": "^4.0.0"
-          }
-        },
-        "@babel/parser": {
-          "version": "7.14.7",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.14.7.tgz",
-          "integrity": "sha512-X67Z5y+VBJuHB/RjwECp8kSl5uYi0BvRbNeWqkaJCVh+LiTPl19WBUfG627psSgp9rSf6ojuXghQM3ha6qHHdA==",
-          "dev": true
-        },
-        "@babel/template": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.14.5.tgz",
-          "integrity": "sha512-6Z3Po85sfxRGachLULUhOmvAaOo7xCvqGQtxINai2mEGPFm6pQ4z5QInFnUrRpfoSV60BnjyF5F3c+15fxFV1g==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.14.5",
-            "@babel/parser": "^7.14.5",
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/traverse": {
-          "version": "7.14.7",
-          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.14.7.tgz",
-          "integrity": "sha512-9vDr5NzHu27wgwejuKL7kIOm4bwEtaPQ4Z6cpCmjSuaRqpH/7xc4qcGEscwMqlkwgcXl6MvqoAjZkQ24uSdIZQ==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.14.5",
-            "@babel/generator": "^7.14.5",
-            "@babel/helper-function-name": "^7.14.5",
-            "@babel/helper-hoist-variables": "^7.14.5",
-            "@babel/helper-split-export-declaration": "^7.14.5",
-            "@babel/parser": "^7.14.7",
-            "@babel/types": "^7.14.5",
-            "debug": "^4.1.0",
-            "globals": "^11.1.0"
-          }
-        },
-        "@babel/types": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.5.tgz",
-          "integrity": "sha512-M/NzBpEL95I5Hh4dwhin5JlE7EzO5PHMAuzjxss3tiOBD46KfQvVedN/3jEPZvdRvtsK2222XfdHogNIttFgcg==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.14.5",
-            "to-fast-properties": "^2.0.0"
-          }
-        },
-        "source-map": {
-          "version": "0.5.7",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
-          "dev": true
-        }
-      }
-    },
-    "@babel/helpers": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.10.4.tgz",
-      "integrity": "sha512-L2gX/XeUONeEbI78dXSrJzGdz4GQ+ZTA/aazfUsFaWjSe95kiCuOZ5HsXvkiw3iwF+mFHSRUfJU8t6YavocdXA==",
-      "dev": true,
-      "requires": {
-        "@babel/template": "^7.10.4",
-        "@babel/traverse": "^7.10.4",
-        "@babel/types": "^7.10.4"
-      }
-    },
-    "@babel/highlight": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.10.4.tgz",
-      "integrity": "sha512-i6rgnR/YgPEQzZZnbTHHuZdlE8qyoBNalD6F+q4vAFlcMEcqmkoG+mPqJYJCo63qPf74+Y1UZsl3l6f7/RIkmA==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-validator-identifier": "^7.10.4",
-        "chalk": "^2.0.0",
-        "js-tokens": "^4.0.0"
-      }
-    },
-    "@babel/parser": {
-      "version": "7.10.5",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.10.5.tgz",
-      "integrity": "sha512-wfryxy4bE1UivvQKSQDU4/X6dr+i8bctjUjj8Zyt3DQy7NtPizJXT8M52nqpNKL+nq2PW8lxk4ZqLj0fD4B4hQ==",
-      "dev": true
-    },
-    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.14.5.tgz",
-      "integrity": "sha512-ZoJS2XCKPBfTmL122iP6NM9dOg+d4lc9fFk3zxc8iDjvt8Pk4+TlsHSKhIPf6X+L5ORCdBzqMZDjL/WHj7WknQ==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.14.5",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.14.5",
-        "@babel/plugin-proposal-optional-chaining": "^7.14.5"
-      },
-      "dependencies": {
-        "@babel/helper-plugin-utils": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-          "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-proposal-async-generator-functions": {
-      "version": "7.14.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.14.7.tgz",
-      "integrity": "sha512-RK8Wj7lXLY3bqei69/cc25gwS5puEc3dknoFPFbqfy3XxYQBQFvu4ioWpafMBAB+L9NyptQK4nMOa5Xz16og8Q==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.14.5",
-        "@babel/helper-remap-async-to-generator": "^7.14.5",
-        "@babel/plugin-syntax-async-generators": "^7.8.4"
-      },
-      "dependencies": {
-        "@babel/helper-plugin-utils": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-          "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-proposal-class-properties": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.10.4.tgz",
-      "integrity": "sha512-vhwkEROxzcHGNu2mzUC0OFFNXdZ4M23ib8aRRcJSsW8BZK9pQMD7QB7csl97NBbgGZO7ZyHUyKDnxzOaP4IrCg==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-create-class-features-plugin": "^7.10.4",
-        "@babel/helper-plugin-utils": "^7.10.4"
-      }
-    },
-    "@babel/plugin-proposal-class-static-block": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-static-block/-/plugin-proposal-class-static-block-7.14.5.tgz",
-      "integrity": "sha512-KBAH5ksEnYHCegqseI5N9skTdxgJdmDoAOc0uXa+4QMYKeZD0w5IARh4FMlTNtaHhbB8v+KzMdTgxMMzsIy6Yg==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-create-class-features-plugin": "^7.14.5",
-        "@babel/helper-plugin-utils": "^7.14.5",
-        "@babel/plugin-syntax-class-static-block": "^7.14.5"
-      },
-      "dependencies": {
-        "@babel/helper-plugin-utils": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-          "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-proposal-dynamic-import": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.14.5.tgz",
-      "integrity": "sha512-ExjiNYc3HDN5PXJx+bwC50GIx/KKanX2HiggnIUAYedbARdImiCU4RhhHfdf0Kd7JNXGpsBBBCOm+bBVy3Gb0g==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.14.5",
-        "@babel/plugin-syntax-dynamic-import": "^7.8.3"
-      },
-      "dependencies": {
-        "@babel/helper-plugin-utils": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-          "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-proposal-export-namespace-from": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.14.5.tgz",
-      "integrity": "sha512-g5POA32bXPMmSBu5Dx/iZGLGnKmKPc5AiY7qfZgurzrCYgIztDlHFbznSNCoQuv57YQLnQfaDi7dxCtLDIdXdA==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.14.5",
-        "@babel/plugin-syntax-export-namespace-from": "^7.8.3"
-      },
-      "dependencies": {
-        "@babel/helper-plugin-utils": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-          "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-proposal-json-strings": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.14.5.tgz",
-      "integrity": "sha512-NSq2fczJYKVRIsUJyNxrVUMhB27zb7N7pOFGQOhBKJrChbGcgEAqyZrmZswkPk18VMurEeJAaICbfm57vUeTbQ==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.14.5",
-        "@babel/plugin-syntax-json-strings": "^7.8.3"
-      },
-      "dependencies": {
-        "@babel/helper-plugin-utils": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-          "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-proposal-logical-assignment-operators": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.14.5.tgz",
-      "integrity": "sha512-YGn2AvZAo9TwyhlLvCCWxD90Xq8xJ4aSgaX3G5D/8DW94L8aaT+dS5cSP+Z06+rCJERGSr9GxMBZ601xoc2taw==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.14.5",
-        "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4"
-      },
-      "dependencies": {
-        "@babel/helper-plugin-utils": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-          "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-proposal-nullish-coalescing-operator": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.14.5.tgz",
-      "integrity": "sha512-gun/SOnMqjSb98Nkaq2rTKMwervfdAoz6NphdY0vTfuzMfryj+tDGb2n6UkDKwez+Y8PZDhE3D143v6Gepp4Hg==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.14.5",
-        "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3"
-      },
-      "dependencies": {
-        "@babel/helper-plugin-utils": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-          "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-proposal-numeric-separator": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.14.5.tgz",
-      "integrity": "sha512-yiclALKe0vyZRZE0pS6RXgjUOt87GWv6FYa5zqj15PvhOGFO69R5DusPlgK/1K5dVnCtegTiWu9UaBSrLLJJBg==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.14.5",
-        "@babel/plugin-syntax-numeric-separator": "^7.10.4"
-      },
-      "dependencies": {
-        "@babel/helper-plugin-utils": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-          "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-proposal-object-rest-spread": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.10.4.tgz",
-      "integrity": "sha512-6vh4SqRuLLarjgeOf4EaROJAHjvu9Gl+/346PbDH9yWbJyfnJ/ah3jmYKYtswEyCoWZiidvVHjHshd4WgjB9BA==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.10.4",
-        "@babel/plugin-syntax-object-rest-spread": "^7.8.0",
-        "@babel/plugin-transform-parameters": "^7.10.4"
-      }
-    },
-    "@babel/plugin-proposal-optional-catch-binding": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.14.5.tgz",
-      "integrity": "sha512-3Oyiixm0ur7bzO5ybNcZFlmVsygSIQgdOa7cTfOYCMY+wEPAYhZAJxi3mixKFCTCKUhQXuCTtQ1MzrpL3WT8ZQ==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.14.5",
-        "@babel/plugin-syntax-optional-catch-binding": "^7.8.3"
-      },
-      "dependencies": {
-        "@babel/helper-plugin-utils": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-          "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-proposal-optional-chaining": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.14.5.tgz",
-      "integrity": "sha512-ycz+VOzo2UbWNI1rQXxIuMOzrDdHGrI23fRiz/Si2R4kv2XZQ1BK8ccdHwehMKBlcH/joGW/tzrUmo67gbJHlQ==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.14.5",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.14.5",
-        "@babel/plugin-syntax-optional-chaining": "^7.8.3"
-      },
-      "dependencies": {
-        "@babel/helper-plugin-utils": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-          "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-proposal-private-methods": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.14.5.tgz",
-      "integrity": "sha512-838DkdUA1u+QTCplatfq4B7+1lnDa/+QMI89x5WZHBcnNv+47N8QEj2k9I2MUU9xIv8XJ4XvPCviM/Dj7Uwt9g==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-create-class-features-plugin": "^7.14.5",
-        "@babel/helper-plugin-utils": "^7.14.5"
-      },
-      "dependencies": {
-        "@babel/helper-plugin-utils": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-          "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-proposal-private-property-in-object": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.14.5.tgz",
-      "integrity": "sha512-62EyfyA3WA0mZiF2e2IV9mc9Ghwxcg8YTu8BS4Wss4Y3PY725OmS9M0qLORbJwLqFtGh+jiE4wAmocK2CTUK2Q==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-annotate-as-pure": "^7.14.5",
-        "@babel/helper-create-class-features-plugin": "^7.14.5",
-        "@babel/helper-plugin-utils": "^7.14.5",
-        "@babel/plugin-syntax-private-property-in-object": "^7.14.5"
-      },
-      "dependencies": {
-        "@babel/helper-plugin-utils": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-          "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-proposal-unicode-property-regex": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.14.5.tgz",
-      "integrity": "sha512-6axIeOU5LnY471KenAB9vI8I5j7NQ2d652hIYwVyRfgaZT5UpiqFKCuVXCDMSrU+3VFafnu2c5m3lrWIlr6A5Q==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-create-regexp-features-plugin": "^7.14.5",
-        "@babel/helper-plugin-utils": "^7.14.5"
-      },
-      "dependencies": {
-        "@babel/helper-plugin-utils": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-          "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-syntax-async-generators": {
-      "version": "7.8.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz",
-      "integrity": "sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.8.0"
-      }
-    },
-    "@babel/plugin-syntax-bigint": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-bigint/-/plugin-syntax-bigint-7.8.3.tgz",
-      "integrity": "sha512-wnTnFlG+YxQm3vDxpGE57Pj0srRU4sHE/mDkt1qv2YJJSeUAec2ma4WLUnUPeKjyrfntVwe/N6dCXpU+zL3Npg==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.8.0"
-      }
-    },
-    "@babel/plugin-syntax-class-properties": {
-      "version": "7.12.13",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.12.13.tgz",
-      "integrity": "sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.12.13"
-      },
-      "dependencies": {
-        "@babel/helper-plugin-utils": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-          "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-syntax-class-static-block": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-static-block/-/plugin-syntax-class-static-block-7.14.5.tgz",
-      "integrity": "sha512-b+YyPmr6ldyNnM6sqYeMWE+bgJcJpO6yS4QD7ymxgH34GBPNDM/THBh8iunyvKIZztiwLH4CJZ0RxTk9emgpjw==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.14.5"
-      },
-      "dependencies": {
-        "@babel/helper-plugin-utils": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-          "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-syntax-dynamic-import": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz",
-      "integrity": "sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.8.0"
-      }
-    },
-    "@babel/plugin-syntax-export-namespace-from": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-export-namespace-from/-/plugin-syntax-export-namespace-from-7.8.3.tgz",
-      "integrity": "sha512-MXf5laXo6c1IbEbegDmzGPwGNTsHZmEy6QGznu5Sh2UCWvueywb2ee+CCE4zQiZstxU9BMoQO9i6zUFSY0Kj0Q==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.8.3"
-      }
-    },
-    "@babel/plugin-syntax-import-meta": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-meta/-/plugin-syntax-import-meta-7.10.4.tgz",
-      "integrity": "sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.10.4"
-      }
-    },
-    "@babel/plugin-syntax-json-strings": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz",
-      "integrity": "sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.8.0"
-      }
-    },
-    "@babel/plugin-syntax-jsx": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.14.5.tgz",
-      "integrity": "sha512-ohuFIsOMXJnbOMRfX7/w7LocdR6R7whhuRD4ax8IipLcLPlZGJKkBxgHp++U4N/vKyU16/YDQr2f5seajD3jIw==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.14.5"
-      },
-      "dependencies": {
-        "@babel/helper-plugin-utils": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-          "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-syntax-logical-assignment-operators": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz",
-      "integrity": "sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.10.4"
-      }
-    },
-    "@babel/plugin-syntax-nullish-coalescing-operator": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz",
-      "integrity": "sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.8.0"
-      }
-    },
-    "@babel/plugin-syntax-numeric-separator": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.10.4.tgz",
-      "integrity": "sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.10.4"
-      }
-    },
-    "@babel/plugin-syntax-object-rest-spread": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz",
-      "integrity": "sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.8.0"
-      }
-    },
-    "@babel/plugin-syntax-optional-catch-binding": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.8.3.tgz",
-      "integrity": "sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.8.0"
-      }
-    },
-    "@babel/plugin-syntax-optional-chaining": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz",
-      "integrity": "sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.8.0"
-      }
-    },
-    "@babel/plugin-syntax-private-property-in-object": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-private-property-in-object/-/plugin-syntax-private-property-in-object-7.14.5.tgz",
-      "integrity": "sha512-0wVnp9dxJ72ZUJDV27ZfbSj6iHLoytYZmh3rFcxNnvsJF3ktkzLDZPy/mA17HGsaQT3/DQsWYX1f1QGWkCoVUg==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.14.5"
-      },
-      "dependencies": {
-        "@babel/helper-plugin-utils": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-          "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-syntax-top-level-await": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.14.5.tgz",
-      "integrity": "sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.14.5"
-      },
-      "dependencies": {
-        "@babel/helper-plugin-utils": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-          "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-transform-arrow-functions": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.14.5.tgz",
-      "integrity": "sha512-KOnO0l4+tD5IfOdi4x8C1XmEIRWUjNRV8wc6K2vz/3e8yAOoZZvsRXRRIF/yo/MAOFb4QjtAw9xSxMXbSMRy8A==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.14.5"
-      },
-      "dependencies": {
-        "@babel/helper-plugin-utils": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-          "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-transform-async-to-generator": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.14.5.tgz",
-      "integrity": "sha512-szkbzQ0mNk0rpu76fzDdqSyPu0MuvpXgC+6rz5rpMb5OIRxdmHfQxrktL8CYolL2d8luMCZTR0DpIMIdL27IjA==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-module-imports": "^7.14.5",
-        "@babel/helper-plugin-utils": "^7.14.5",
-        "@babel/helper-remap-async-to-generator": "^7.14.5"
-      },
-      "dependencies": {
-        "@babel/helper-module-imports": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.14.5.tgz",
-          "integrity": "sha512-SwrNHu5QWS84XlHwGYPDtCxcA0hrSlL2yhWYLgeOc0w7ccOl2qv4s/nARI0aYZW+bSwAL5CukeXA47B/1NKcnQ==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/helper-plugin-utils": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-          "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-          "dev": true
-        },
-        "@babel/helper-validator-identifier": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz",
-          "integrity": "sha512-5lsetuxCLilmVGyiLEfoHBRX8UCFD+1m2x3Rj97WrW3V7H3u4RWRXA4evMjImCsin2J2YT0QaVDGf+z8ondbAg==",
-          "dev": true
-        },
-        "@babel/types": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.5.tgz",
-          "integrity": "sha512-M/NzBpEL95I5Hh4dwhin5JlE7EzO5PHMAuzjxss3tiOBD46KfQvVedN/3jEPZvdRvtsK2222XfdHogNIttFgcg==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.14.5",
-            "to-fast-properties": "^2.0.0"
-          }
-        }
-      }
-    },
-    "@babel/plugin-transform-block-scoped-functions": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.14.5.tgz",
-      "integrity": "sha512-dtqWqdWZ5NqBX3KzsVCWfQI3A53Ft5pWFCT2eCVUftWZgjc5DpDponbIF1+c+7cSGk2wN0YK7HGL/ezfRbpKBQ==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.14.5"
-      },
-      "dependencies": {
-        "@babel/helper-plugin-utils": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-          "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-transform-block-scoping": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.14.5.tgz",
-      "integrity": "sha512-LBYm4ZocNgoCqyxMLoOnwpsmQ18HWTQvql64t3GvMUzLQrNoV1BDG0lNftC8QKYERkZgCCT/7J5xWGObGAyHDw==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.14.5"
-      },
-      "dependencies": {
-        "@babel/helper-plugin-utils": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-          "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-transform-classes": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.14.5.tgz",
-      "integrity": "sha512-J4VxKAMykM06K/64z9rwiL6xnBHgB1+FVspqvlgCdwD1KUbQNfszeKVVOMh59w3sztHYIZDgnhOC4WbdEfHFDA==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-annotate-as-pure": "^7.14.5",
-        "@babel/helper-function-name": "^7.14.5",
-        "@babel/helper-optimise-call-expression": "^7.14.5",
-        "@babel/helper-plugin-utils": "^7.14.5",
-        "@babel/helper-replace-supers": "^7.14.5",
-        "@babel/helper-split-export-declaration": "^7.14.5",
-        "globals": "^11.1.0"
-      },
-      "dependencies": {
-        "@babel/code-frame": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.14.5.tgz",
-          "integrity": "sha512-9pzDqyc6OLDaqe+zbACgFkb6fKMNG6CObKpnYXChRsvYGyEdc7CA2BaqeOM+vOtCS5ndmJicPJhKAwYRI6UfFw==",
-          "dev": true,
-          "requires": {
-            "@babel/highlight": "^7.14.5"
-          }
-        },
-        "@babel/generator": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.14.5.tgz",
-          "integrity": "sha512-y3rlP+/G25OIX3mYKKIOlQRcqj7YgrvHxOLbVmyLJ9bPmi5ttvUmpydVjcFjZphOktWuA7ovbx91ECloWTfjIA==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.14.5",
-            "jsesc": "^2.5.1",
-            "source-map": "^0.5.0"
-          }
-        },
-        "@babel/helper-function-name": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.14.5.tgz",
-          "integrity": "sha512-Gjna0AsXWfFvrAuX+VKcN/aNNWonizBj39yGwUzVDVTlMYJMK2Wp6xdpy72mfArFq5uK+NOuexfzZlzI1z9+AQ==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-get-function-arity": "^7.14.5",
-            "@babel/template": "^7.14.5",
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/helper-get-function-arity": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.14.5.tgz",
-          "integrity": "sha512-I1Db4Shst5lewOM4V+ZKJzQ0JGGaZ6VY1jYvMghRjqs6DWgxLCIyFt30GlnKkfUeFLpJt2vzbMVEXVSXlIFYUg==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/helper-member-expression-to-functions": {
-          "version": "7.14.7",
-          "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.14.7.tgz",
-          "integrity": "sha512-TMUt4xKxJn6ccjcOW7c4hlwyJArizskAhoSTOCkA0uZ+KghIaci0Qg9R043kUMWI9mtQfgny+NQ5QATnZ+paaA==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/helper-optimise-call-expression": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.14.5.tgz",
-          "integrity": "sha512-IqiLIrODUOdnPU9/F8ib1Fx2ohlgDhxnIDU7OEVi+kAbEZcyiF7BLU8W6PfvPi9LzztjS7kcbzbmL7oG8kD6VA==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/helper-plugin-utils": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-          "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-          "dev": true
-        },
-        "@babel/helper-replace-supers": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.14.5.tgz",
-          "integrity": "sha512-3i1Qe9/8x/hCHINujn+iuHy+mMRLoc77b2nI9TB0zjH1hvn9qGlXjWlggdwUcju36PkPCy/lpM7LLUdcTyH4Ow==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-member-expression-to-functions": "^7.14.5",
-            "@babel/helper-optimise-call-expression": "^7.14.5",
-            "@babel/traverse": "^7.14.5",
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/helper-split-export-declaration": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.14.5.tgz",
-          "integrity": "sha512-hprxVPu6e5Kdp2puZUmvOGjaLv9TCe58E/Fl6hRq4YiVQxIcNvuq6uTM2r1mT/oPskuS9CgR+I94sqAYv0NGKA==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/helper-validator-identifier": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz",
-          "integrity": "sha512-5lsetuxCLilmVGyiLEfoHBRX8UCFD+1m2x3Rj97WrW3V7H3u4RWRXA4evMjImCsin2J2YT0QaVDGf+z8ondbAg==",
-          "dev": true
-        },
-        "@babel/highlight": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.14.5.tgz",
-          "integrity": "sha512-qf9u2WFWVV0MppaL877j2dBtQIDgmidgjGk5VIMw3OadXvYaXn66U1BFlH2t4+t3i+8PhedppRv+i40ABzd+gg==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.14.5",
-            "chalk": "^2.0.0",
-            "js-tokens": "^4.0.0"
-          }
-        },
-        "@babel/parser": {
-          "version": "7.14.7",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.14.7.tgz",
-          "integrity": "sha512-X67Z5y+VBJuHB/RjwECp8kSl5uYi0BvRbNeWqkaJCVh+LiTPl19WBUfG627psSgp9rSf6ojuXghQM3ha6qHHdA==",
-          "dev": true
-        },
-        "@babel/template": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.14.5.tgz",
-          "integrity": "sha512-6Z3Po85sfxRGachLULUhOmvAaOo7xCvqGQtxINai2mEGPFm6pQ4z5QInFnUrRpfoSV60BnjyF5F3c+15fxFV1g==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.14.5",
-            "@babel/parser": "^7.14.5",
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/traverse": {
-          "version": "7.14.7",
-          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.14.7.tgz",
-          "integrity": "sha512-9vDr5NzHu27wgwejuKL7kIOm4bwEtaPQ4Z6cpCmjSuaRqpH/7xc4qcGEscwMqlkwgcXl6MvqoAjZkQ24uSdIZQ==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.14.5",
-            "@babel/generator": "^7.14.5",
-            "@babel/helper-function-name": "^7.14.5",
-            "@babel/helper-hoist-variables": "^7.14.5",
-            "@babel/helper-split-export-declaration": "^7.14.5",
-            "@babel/parser": "^7.14.7",
-            "@babel/types": "^7.14.5",
-            "debug": "^4.1.0",
-            "globals": "^11.1.0"
-          }
-        },
-        "@babel/types": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.5.tgz",
-          "integrity": "sha512-M/NzBpEL95I5Hh4dwhin5JlE7EzO5PHMAuzjxss3tiOBD46KfQvVedN/3jEPZvdRvtsK2222XfdHogNIttFgcg==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.14.5",
-            "to-fast-properties": "^2.0.0"
-          }
-        },
-        "source-map": {
-          "version": "0.5.7",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-transform-computed-properties": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.14.5.tgz",
-      "integrity": "sha512-pWM+E4283UxaVzLb8UBXv4EIxMovU4zxT1OPnpHJcmnvyY9QbPPTKZfEj31EUvG3/EQRbYAGaYEUZ4yWOBC2xg==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.14.5"
-      },
-      "dependencies": {
-        "@babel/helper-plugin-utils": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-          "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-transform-destructuring": {
-      "version": "7.14.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.14.7.tgz",
-      "integrity": "sha512-0mDE99nK+kVh3xlc5vKwB6wnP9ecuSj+zQCa/n0voENtP/zymdT4HH6QEb65wjjcbqr1Jb/7z9Qp7TF5FtwYGw==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.14.5"
-      },
-      "dependencies": {
-        "@babel/helper-plugin-utils": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-          "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-transform-dotall-regex": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.14.5.tgz",
-      "integrity": "sha512-loGlnBdj02MDsFaHhAIJzh7euK89lBrGIdM9EAtHFo6xKygCUGuuWe07o1oZVk287amtW1n0808sQM99aZt3gw==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-create-regexp-features-plugin": "^7.14.5",
-        "@babel/helper-plugin-utils": "^7.14.5"
-      },
-      "dependencies": {
-        "@babel/helper-plugin-utils": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-          "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-transform-duplicate-keys": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.14.5.tgz",
-      "integrity": "sha512-iJjbI53huKbPDAsJ8EmVmvCKeeq21bAze4fu9GBQtSLqfvzj2oRuHVx4ZkDwEhg1htQ+5OBZh/Ab0XDf5iBZ7A==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.14.5"
-      },
-      "dependencies": {
-        "@babel/helper-plugin-utils": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-          "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-transform-exponentiation-operator": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.14.5.tgz",
-      "integrity": "sha512-jFazJhMBc9D27o9jDnIE5ZErI0R0m7PbKXVq77FFvqFbzvTMuv8jaAwLZ5PviOLSFttqKIW0/wxNSDbjLk0tYA==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-builder-binary-assignment-operator-visitor": "^7.14.5",
-        "@babel/helper-plugin-utils": "^7.14.5"
-      },
-      "dependencies": {
-        "@babel/helper-plugin-utils": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-          "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-transform-for-of": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.14.5.tgz",
-      "integrity": "sha512-CfmqxSUZzBl0rSjpoQSFoR9UEj3HzbGuGNL21/iFTmjb5gFggJp3ph0xR1YBhexmLoKRHzgxuFvty2xdSt6gTA==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.14.5"
-      },
-      "dependencies": {
-        "@babel/helper-plugin-utils": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-          "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-transform-function-name": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.14.5.tgz",
-      "integrity": "sha512-vbO6kv0fIzZ1GpmGQuvbwwm+O4Cbm2NrPzwlup9+/3fdkuzo1YqOZcXw26+YUJB84Ja7j9yURWposEHLYwxUfQ==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-function-name": "^7.14.5",
-        "@babel/helper-plugin-utils": "^7.14.5"
-      },
-      "dependencies": {
-        "@babel/code-frame": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.14.5.tgz",
-          "integrity": "sha512-9pzDqyc6OLDaqe+zbACgFkb6fKMNG6CObKpnYXChRsvYGyEdc7CA2BaqeOM+vOtCS5ndmJicPJhKAwYRI6UfFw==",
-          "dev": true,
-          "requires": {
-            "@babel/highlight": "^7.14.5"
-          }
-        },
-        "@babel/helper-function-name": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.14.5.tgz",
-          "integrity": "sha512-Gjna0AsXWfFvrAuX+VKcN/aNNWonizBj39yGwUzVDVTlMYJMK2Wp6xdpy72mfArFq5uK+NOuexfzZlzI1z9+AQ==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-get-function-arity": "^7.14.5",
-            "@babel/template": "^7.14.5",
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/helper-get-function-arity": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.14.5.tgz",
-          "integrity": "sha512-I1Db4Shst5lewOM4V+ZKJzQ0JGGaZ6VY1jYvMghRjqs6DWgxLCIyFt30GlnKkfUeFLpJt2vzbMVEXVSXlIFYUg==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/helper-plugin-utils": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-          "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-          "dev": true
-        },
-        "@babel/helper-validator-identifier": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz",
-          "integrity": "sha512-5lsetuxCLilmVGyiLEfoHBRX8UCFD+1m2x3Rj97WrW3V7H3u4RWRXA4evMjImCsin2J2YT0QaVDGf+z8ondbAg==",
-          "dev": true
-        },
-        "@babel/highlight": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.14.5.tgz",
-          "integrity": "sha512-qf9u2WFWVV0MppaL877j2dBtQIDgmidgjGk5VIMw3OadXvYaXn66U1BFlH2t4+t3i+8PhedppRv+i40ABzd+gg==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.14.5",
-            "chalk": "^2.0.0",
-            "js-tokens": "^4.0.0"
-          }
-        },
-        "@babel/parser": {
-          "version": "7.14.7",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.14.7.tgz",
-          "integrity": "sha512-X67Z5y+VBJuHB/RjwECp8kSl5uYi0BvRbNeWqkaJCVh+LiTPl19WBUfG627psSgp9rSf6ojuXghQM3ha6qHHdA==",
-          "dev": true
-        },
-        "@babel/template": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.14.5.tgz",
-          "integrity": "sha512-6Z3Po85sfxRGachLULUhOmvAaOo7xCvqGQtxINai2mEGPFm6pQ4z5QInFnUrRpfoSV60BnjyF5F3c+15fxFV1g==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.14.5",
-            "@babel/parser": "^7.14.5",
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/types": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.5.tgz",
-          "integrity": "sha512-M/NzBpEL95I5Hh4dwhin5JlE7EzO5PHMAuzjxss3tiOBD46KfQvVedN/3jEPZvdRvtsK2222XfdHogNIttFgcg==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.14.5",
-            "to-fast-properties": "^2.0.0"
-          }
-        }
-      }
-    },
-    "@babel/plugin-transform-literals": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.14.5.tgz",
-      "integrity": "sha512-ql33+epql2F49bi8aHXxvLURHkxJbSmMKl9J5yHqg4PLtdE6Uc48CH1GS6TQvZ86eoB/ApZXwm7jlA+B3kra7A==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.14.5"
-      },
-      "dependencies": {
-        "@babel/helper-plugin-utils": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-          "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-transform-member-expression-literals": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.14.5.tgz",
-      "integrity": "sha512-WkNXxH1VXVTKarWFqmso83xl+2V3Eo28YY5utIkbsmXoItO8Q3aZxN4BTS2k0hz9dGUloHK26mJMyQEYfkn/+Q==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.14.5"
-      },
-      "dependencies": {
-        "@babel/helper-plugin-utils": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-          "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-transform-modules-amd": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.14.5.tgz",
-      "integrity": "sha512-3lpOU8Vxmp3roC4vzFpSdEpGUWSMsHFreTWOMMLzel2gNGfHE5UWIh/LN6ghHs2xurUp4jRFYMUIZhuFbody1g==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-module-transforms": "^7.14.5",
-        "@babel/helper-plugin-utils": "^7.14.5",
-        "babel-plugin-dynamic-import-node": "^2.3.3"
-      },
-      "dependencies": {
-        "@babel/code-frame": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.14.5.tgz",
-          "integrity": "sha512-9pzDqyc6OLDaqe+zbACgFkb6fKMNG6CObKpnYXChRsvYGyEdc7CA2BaqeOM+vOtCS5ndmJicPJhKAwYRI6UfFw==",
-          "dev": true,
-          "requires": {
-            "@babel/highlight": "^7.14.5"
-          }
-        },
-        "@babel/generator": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.14.5.tgz",
-          "integrity": "sha512-y3rlP+/G25OIX3mYKKIOlQRcqj7YgrvHxOLbVmyLJ9bPmi5ttvUmpydVjcFjZphOktWuA7ovbx91ECloWTfjIA==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.14.5",
-            "jsesc": "^2.5.1",
-            "source-map": "^0.5.0"
-          }
-        },
-        "@babel/helper-function-name": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.14.5.tgz",
-          "integrity": "sha512-Gjna0AsXWfFvrAuX+VKcN/aNNWonizBj39yGwUzVDVTlMYJMK2Wp6xdpy72mfArFq5uK+NOuexfzZlzI1z9+AQ==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-get-function-arity": "^7.14.5",
-            "@babel/template": "^7.14.5",
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/helper-get-function-arity": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.14.5.tgz",
-          "integrity": "sha512-I1Db4Shst5lewOM4V+ZKJzQ0JGGaZ6VY1jYvMghRjqs6DWgxLCIyFt30GlnKkfUeFLpJt2vzbMVEXVSXlIFYUg==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/helper-member-expression-to-functions": {
-          "version": "7.14.7",
-          "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.14.7.tgz",
-          "integrity": "sha512-TMUt4xKxJn6ccjcOW7c4hlwyJArizskAhoSTOCkA0uZ+KghIaci0Qg9R043kUMWI9mtQfgny+NQ5QATnZ+paaA==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/helper-module-imports": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.14.5.tgz",
-          "integrity": "sha512-SwrNHu5QWS84XlHwGYPDtCxcA0hrSlL2yhWYLgeOc0w7ccOl2qv4s/nARI0aYZW+bSwAL5CukeXA47B/1NKcnQ==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/helper-module-transforms": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.14.5.tgz",
-          "integrity": "sha512-iXpX4KW8LVODuAieD7MzhNjmM6dzYY5tfRqT+R9HDXWl0jPn/djKmA+G9s/2C2T9zggw5tK1QNqZ70USfedOwA==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-module-imports": "^7.14.5",
-            "@babel/helper-replace-supers": "^7.14.5",
-            "@babel/helper-simple-access": "^7.14.5",
-            "@babel/helper-split-export-declaration": "^7.14.5",
-            "@babel/helper-validator-identifier": "^7.14.5",
-            "@babel/template": "^7.14.5",
-            "@babel/traverse": "^7.14.5",
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/helper-optimise-call-expression": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.14.5.tgz",
-          "integrity": "sha512-IqiLIrODUOdnPU9/F8ib1Fx2ohlgDhxnIDU7OEVi+kAbEZcyiF7BLU8W6PfvPi9LzztjS7kcbzbmL7oG8kD6VA==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/helper-plugin-utils": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-          "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-          "dev": true
-        },
-        "@babel/helper-replace-supers": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.14.5.tgz",
-          "integrity": "sha512-3i1Qe9/8x/hCHINujn+iuHy+mMRLoc77b2nI9TB0zjH1hvn9qGlXjWlggdwUcju36PkPCy/lpM7LLUdcTyH4Ow==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-member-expression-to-functions": "^7.14.5",
-            "@babel/helper-optimise-call-expression": "^7.14.5",
-            "@babel/traverse": "^7.14.5",
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/helper-simple-access": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.14.5.tgz",
-          "integrity": "sha512-nfBN9xvmCt6nrMZjfhkl7i0oTV3yxR4/FztsbOASyTvVcoYd0TRHh7eMLdlEcCqobydC0LAF3LtC92Iwxo0wyw==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/helper-split-export-declaration": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.14.5.tgz",
-          "integrity": "sha512-hprxVPu6e5Kdp2puZUmvOGjaLv9TCe58E/Fl6hRq4YiVQxIcNvuq6uTM2r1mT/oPskuS9CgR+I94sqAYv0NGKA==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/helper-validator-identifier": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz",
-          "integrity": "sha512-5lsetuxCLilmVGyiLEfoHBRX8UCFD+1m2x3Rj97WrW3V7H3u4RWRXA4evMjImCsin2J2YT0QaVDGf+z8ondbAg==",
-          "dev": true
-        },
-        "@babel/highlight": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.14.5.tgz",
-          "integrity": "sha512-qf9u2WFWVV0MppaL877j2dBtQIDgmidgjGk5VIMw3OadXvYaXn66U1BFlH2t4+t3i+8PhedppRv+i40ABzd+gg==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.14.5",
-            "chalk": "^2.0.0",
-            "js-tokens": "^4.0.0"
-          }
-        },
-        "@babel/parser": {
-          "version": "7.14.7",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.14.7.tgz",
-          "integrity": "sha512-X67Z5y+VBJuHB/RjwECp8kSl5uYi0BvRbNeWqkaJCVh+LiTPl19WBUfG627psSgp9rSf6ojuXghQM3ha6qHHdA==",
-          "dev": true
-        },
-        "@babel/template": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.14.5.tgz",
-          "integrity": "sha512-6Z3Po85sfxRGachLULUhOmvAaOo7xCvqGQtxINai2mEGPFm6pQ4z5QInFnUrRpfoSV60BnjyF5F3c+15fxFV1g==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.14.5",
-            "@babel/parser": "^7.14.5",
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/traverse": {
-          "version": "7.14.7",
-          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.14.7.tgz",
-          "integrity": "sha512-9vDr5NzHu27wgwejuKL7kIOm4bwEtaPQ4Z6cpCmjSuaRqpH/7xc4qcGEscwMqlkwgcXl6MvqoAjZkQ24uSdIZQ==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.14.5",
-            "@babel/generator": "^7.14.5",
-            "@babel/helper-function-name": "^7.14.5",
-            "@babel/helper-hoist-variables": "^7.14.5",
-            "@babel/helper-split-export-declaration": "^7.14.5",
-            "@babel/parser": "^7.14.7",
-            "@babel/types": "^7.14.5",
-            "debug": "^4.1.0",
-            "globals": "^11.1.0"
-          }
-        },
-        "@babel/types": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.5.tgz",
-          "integrity": "sha512-M/NzBpEL95I5Hh4dwhin5JlE7EzO5PHMAuzjxss3tiOBD46KfQvVedN/3jEPZvdRvtsK2222XfdHogNIttFgcg==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.14.5",
-            "to-fast-properties": "^2.0.0"
-          }
-        },
-        "source-map": {
-          "version": "0.5.7",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-transform-modules-commonjs": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.14.5.tgz",
-      "integrity": "sha512-en8GfBtgnydoao2PS+87mKyw62k02k7kJ9ltbKe0fXTHrQmG6QZZflYuGI1VVG7sVpx4E1n7KBpNlPb8m78J+A==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-module-transforms": "^7.14.5",
-        "@babel/helper-plugin-utils": "^7.14.5",
-        "@babel/helper-simple-access": "^7.14.5",
-        "babel-plugin-dynamic-import-node": "^2.3.3"
-      },
-      "dependencies": {
-        "@babel/code-frame": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.14.5.tgz",
-          "integrity": "sha512-9pzDqyc6OLDaqe+zbACgFkb6fKMNG6CObKpnYXChRsvYGyEdc7CA2BaqeOM+vOtCS5ndmJicPJhKAwYRI6UfFw==",
-          "dev": true,
-          "requires": {
-            "@babel/highlight": "^7.14.5"
-          }
-        },
-        "@babel/generator": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.14.5.tgz",
-          "integrity": "sha512-y3rlP+/G25OIX3mYKKIOlQRcqj7YgrvHxOLbVmyLJ9bPmi5ttvUmpydVjcFjZphOktWuA7ovbx91ECloWTfjIA==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.14.5",
-            "jsesc": "^2.5.1",
-            "source-map": "^0.5.0"
-          }
-        },
-        "@babel/helper-function-name": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.14.5.tgz",
-          "integrity": "sha512-Gjna0AsXWfFvrAuX+VKcN/aNNWonizBj39yGwUzVDVTlMYJMK2Wp6xdpy72mfArFq5uK+NOuexfzZlzI1z9+AQ==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-get-function-arity": "^7.14.5",
-            "@babel/template": "^7.14.5",
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/helper-get-function-arity": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.14.5.tgz",
-          "integrity": "sha512-I1Db4Shst5lewOM4V+ZKJzQ0JGGaZ6VY1jYvMghRjqs6DWgxLCIyFt30GlnKkfUeFLpJt2vzbMVEXVSXlIFYUg==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/helper-member-expression-to-functions": {
-          "version": "7.14.7",
-          "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.14.7.tgz",
-          "integrity": "sha512-TMUt4xKxJn6ccjcOW7c4hlwyJArizskAhoSTOCkA0uZ+KghIaci0Qg9R043kUMWI9mtQfgny+NQ5QATnZ+paaA==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/helper-module-imports": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.14.5.tgz",
-          "integrity": "sha512-SwrNHu5QWS84XlHwGYPDtCxcA0hrSlL2yhWYLgeOc0w7ccOl2qv4s/nARI0aYZW+bSwAL5CukeXA47B/1NKcnQ==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/helper-module-transforms": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.14.5.tgz",
-          "integrity": "sha512-iXpX4KW8LVODuAieD7MzhNjmM6dzYY5tfRqT+R9HDXWl0jPn/djKmA+G9s/2C2T9zggw5tK1QNqZ70USfedOwA==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-module-imports": "^7.14.5",
-            "@babel/helper-replace-supers": "^7.14.5",
-            "@babel/helper-simple-access": "^7.14.5",
-            "@babel/helper-split-export-declaration": "^7.14.5",
-            "@babel/helper-validator-identifier": "^7.14.5",
-            "@babel/template": "^7.14.5",
-            "@babel/traverse": "^7.14.5",
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/helper-optimise-call-expression": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.14.5.tgz",
-          "integrity": "sha512-IqiLIrODUOdnPU9/F8ib1Fx2ohlgDhxnIDU7OEVi+kAbEZcyiF7BLU8W6PfvPi9LzztjS7kcbzbmL7oG8kD6VA==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/helper-plugin-utils": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-          "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-          "dev": true
-        },
-        "@babel/helper-replace-supers": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.14.5.tgz",
-          "integrity": "sha512-3i1Qe9/8x/hCHINujn+iuHy+mMRLoc77b2nI9TB0zjH1hvn9qGlXjWlggdwUcju36PkPCy/lpM7LLUdcTyH4Ow==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-member-expression-to-functions": "^7.14.5",
-            "@babel/helper-optimise-call-expression": "^7.14.5",
-            "@babel/traverse": "^7.14.5",
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/helper-simple-access": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.14.5.tgz",
-          "integrity": "sha512-nfBN9xvmCt6nrMZjfhkl7i0oTV3yxR4/FztsbOASyTvVcoYd0TRHh7eMLdlEcCqobydC0LAF3LtC92Iwxo0wyw==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/helper-split-export-declaration": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.14.5.tgz",
-          "integrity": "sha512-hprxVPu6e5Kdp2puZUmvOGjaLv9TCe58E/Fl6hRq4YiVQxIcNvuq6uTM2r1mT/oPskuS9CgR+I94sqAYv0NGKA==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/helper-validator-identifier": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz",
-          "integrity": "sha512-5lsetuxCLilmVGyiLEfoHBRX8UCFD+1m2x3Rj97WrW3V7H3u4RWRXA4evMjImCsin2J2YT0QaVDGf+z8ondbAg==",
-          "dev": true
-        },
-        "@babel/highlight": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.14.5.tgz",
-          "integrity": "sha512-qf9u2WFWVV0MppaL877j2dBtQIDgmidgjGk5VIMw3OadXvYaXn66U1BFlH2t4+t3i+8PhedppRv+i40ABzd+gg==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.14.5",
-            "chalk": "^2.0.0",
-            "js-tokens": "^4.0.0"
-          }
-        },
-        "@babel/parser": {
-          "version": "7.14.7",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.14.7.tgz",
-          "integrity": "sha512-X67Z5y+VBJuHB/RjwECp8kSl5uYi0BvRbNeWqkaJCVh+LiTPl19WBUfG627psSgp9rSf6ojuXghQM3ha6qHHdA==",
-          "dev": true
-        },
-        "@babel/template": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.14.5.tgz",
-          "integrity": "sha512-6Z3Po85sfxRGachLULUhOmvAaOo7xCvqGQtxINai2mEGPFm6pQ4z5QInFnUrRpfoSV60BnjyF5F3c+15fxFV1g==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.14.5",
-            "@babel/parser": "^7.14.5",
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/traverse": {
-          "version": "7.14.7",
-          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.14.7.tgz",
-          "integrity": "sha512-9vDr5NzHu27wgwejuKL7kIOm4bwEtaPQ4Z6cpCmjSuaRqpH/7xc4qcGEscwMqlkwgcXl6MvqoAjZkQ24uSdIZQ==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.14.5",
-            "@babel/generator": "^7.14.5",
-            "@babel/helper-function-name": "^7.14.5",
-            "@babel/helper-hoist-variables": "^7.14.5",
-            "@babel/helper-split-export-declaration": "^7.14.5",
-            "@babel/parser": "^7.14.7",
-            "@babel/types": "^7.14.5",
-            "debug": "^4.1.0",
-            "globals": "^11.1.0"
-          }
-        },
-        "@babel/types": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.5.tgz",
-          "integrity": "sha512-M/NzBpEL95I5Hh4dwhin5JlE7EzO5PHMAuzjxss3tiOBD46KfQvVedN/3jEPZvdRvtsK2222XfdHogNIttFgcg==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.14.5",
-            "to-fast-properties": "^2.0.0"
-          }
-        },
-        "source-map": {
-          "version": "0.5.7",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-transform-modules-systemjs": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.14.5.tgz",
-      "integrity": "sha512-mNMQdvBEE5DcMQaL5LbzXFMANrQjd2W7FPzg34Y4yEz7dBgdaC+9B84dSO+/1Wba98zoDbInctCDo4JGxz1VYA==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-hoist-variables": "^7.14.5",
-        "@babel/helper-module-transforms": "^7.14.5",
-        "@babel/helper-plugin-utils": "^7.14.5",
-        "@babel/helper-validator-identifier": "^7.14.5",
-        "babel-plugin-dynamic-import-node": "^2.3.3"
-      },
-      "dependencies": {
-        "@babel/code-frame": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.14.5.tgz",
-          "integrity": "sha512-9pzDqyc6OLDaqe+zbACgFkb6fKMNG6CObKpnYXChRsvYGyEdc7CA2BaqeOM+vOtCS5ndmJicPJhKAwYRI6UfFw==",
-          "dev": true,
-          "requires": {
-            "@babel/highlight": "^7.14.5"
-          }
-        },
-        "@babel/generator": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.14.5.tgz",
-          "integrity": "sha512-y3rlP+/G25OIX3mYKKIOlQRcqj7YgrvHxOLbVmyLJ9bPmi5ttvUmpydVjcFjZphOktWuA7ovbx91ECloWTfjIA==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.14.5",
-            "jsesc": "^2.5.1",
-            "source-map": "^0.5.0"
-          }
-        },
-        "@babel/helper-function-name": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.14.5.tgz",
-          "integrity": "sha512-Gjna0AsXWfFvrAuX+VKcN/aNNWonizBj39yGwUzVDVTlMYJMK2Wp6xdpy72mfArFq5uK+NOuexfzZlzI1z9+AQ==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-get-function-arity": "^7.14.5",
-            "@babel/template": "^7.14.5",
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/helper-get-function-arity": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.14.5.tgz",
-          "integrity": "sha512-I1Db4Shst5lewOM4V+ZKJzQ0JGGaZ6VY1jYvMghRjqs6DWgxLCIyFt30GlnKkfUeFLpJt2vzbMVEXVSXlIFYUg==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/helper-member-expression-to-functions": {
-          "version": "7.14.7",
-          "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.14.7.tgz",
-          "integrity": "sha512-TMUt4xKxJn6ccjcOW7c4hlwyJArizskAhoSTOCkA0uZ+KghIaci0Qg9R043kUMWI9mtQfgny+NQ5QATnZ+paaA==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/helper-module-imports": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.14.5.tgz",
-          "integrity": "sha512-SwrNHu5QWS84XlHwGYPDtCxcA0hrSlL2yhWYLgeOc0w7ccOl2qv4s/nARI0aYZW+bSwAL5CukeXA47B/1NKcnQ==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/helper-module-transforms": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.14.5.tgz",
-          "integrity": "sha512-iXpX4KW8LVODuAieD7MzhNjmM6dzYY5tfRqT+R9HDXWl0jPn/djKmA+G9s/2C2T9zggw5tK1QNqZ70USfedOwA==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-module-imports": "^7.14.5",
-            "@babel/helper-replace-supers": "^7.14.5",
-            "@babel/helper-simple-access": "^7.14.5",
-            "@babel/helper-split-export-declaration": "^7.14.5",
-            "@babel/helper-validator-identifier": "^7.14.5",
-            "@babel/template": "^7.14.5",
-            "@babel/traverse": "^7.14.5",
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/helper-optimise-call-expression": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.14.5.tgz",
-          "integrity": "sha512-IqiLIrODUOdnPU9/F8ib1Fx2ohlgDhxnIDU7OEVi+kAbEZcyiF7BLU8W6PfvPi9LzztjS7kcbzbmL7oG8kD6VA==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/helper-plugin-utils": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-          "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-          "dev": true
-        },
-        "@babel/helper-replace-supers": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.14.5.tgz",
-          "integrity": "sha512-3i1Qe9/8x/hCHINujn+iuHy+mMRLoc77b2nI9TB0zjH1hvn9qGlXjWlggdwUcju36PkPCy/lpM7LLUdcTyH4Ow==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-member-expression-to-functions": "^7.14.5",
-            "@babel/helper-optimise-call-expression": "^7.14.5",
-            "@babel/traverse": "^7.14.5",
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/helper-simple-access": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.14.5.tgz",
-          "integrity": "sha512-nfBN9xvmCt6nrMZjfhkl7i0oTV3yxR4/FztsbOASyTvVcoYd0TRHh7eMLdlEcCqobydC0LAF3LtC92Iwxo0wyw==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/helper-split-export-declaration": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.14.5.tgz",
-          "integrity": "sha512-hprxVPu6e5Kdp2puZUmvOGjaLv9TCe58E/Fl6hRq4YiVQxIcNvuq6uTM2r1mT/oPskuS9CgR+I94sqAYv0NGKA==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/helper-validator-identifier": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz",
-          "integrity": "sha512-5lsetuxCLilmVGyiLEfoHBRX8UCFD+1m2x3Rj97WrW3V7H3u4RWRXA4evMjImCsin2J2YT0QaVDGf+z8ondbAg==",
-          "dev": true
-        },
-        "@babel/highlight": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.14.5.tgz",
-          "integrity": "sha512-qf9u2WFWVV0MppaL877j2dBtQIDgmidgjGk5VIMw3OadXvYaXn66U1BFlH2t4+t3i+8PhedppRv+i40ABzd+gg==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.14.5",
-            "chalk": "^2.0.0",
-            "js-tokens": "^4.0.0"
-          }
-        },
-        "@babel/parser": {
-          "version": "7.14.7",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.14.7.tgz",
-          "integrity": "sha512-X67Z5y+VBJuHB/RjwECp8kSl5uYi0BvRbNeWqkaJCVh+LiTPl19WBUfG627psSgp9rSf6ojuXghQM3ha6qHHdA==",
-          "dev": true
-        },
-        "@babel/template": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.14.5.tgz",
-          "integrity": "sha512-6Z3Po85sfxRGachLULUhOmvAaOo7xCvqGQtxINai2mEGPFm6pQ4z5QInFnUrRpfoSV60BnjyF5F3c+15fxFV1g==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.14.5",
-            "@babel/parser": "^7.14.5",
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/traverse": {
-          "version": "7.14.7",
-          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.14.7.tgz",
-          "integrity": "sha512-9vDr5NzHu27wgwejuKL7kIOm4bwEtaPQ4Z6cpCmjSuaRqpH/7xc4qcGEscwMqlkwgcXl6MvqoAjZkQ24uSdIZQ==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.14.5",
-            "@babel/generator": "^7.14.5",
-            "@babel/helper-function-name": "^7.14.5",
-            "@babel/helper-hoist-variables": "^7.14.5",
-            "@babel/helper-split-export-declaration": "^7.14.5",
-            "@babel/parser": "^7.14.7",
-            "@babel/types": "^7.14.5",
-            "debug": "^4.1.0",
-            "globals": "^11.1.0"
-          }
-        },
-        "@babel/types": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.5.tgz",
-          "integrity": "sha512-M/NzBpEL95I5Hh4dwhin5JlE7EzO5PHMAuzjxss3tiOBD46KfQvVedN/3jEPZvdRvtsK2222XfdHogNIttFgcg==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.14.5",
-            "to-fast-properties": "^2.0.0"
-          }
-        },
-        "source-map": {
-          "version": "0.5.7",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-transform-modules-umd": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.14.5.tgz",
-      "integrity": "sha512-RfPGoagSngC06LsGUYyM9QWSXZ8MysEjDJTAea1lqRjNECE3y0qIJF/qbvJxc4oA4s99HumIMdXOrd+TdKaAAA==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-module-transforms": "^7.14.5",
-        "@babel/helper-plugin-utils": "^7.14.5"
-      },
-      "dependencies": {
-        "@babel/code-frame": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.14.5.tgz",
-          "integrity": "sha512-9pzDqyc6OLDaqe+zbACgFkb6fKMNG6CObKpnYXChRsvYGyEdc7CA2BaqeOM+vOtCS5ndmJicPJhKAwYRI6UfFw==",
-          "dev": true,
-          "requires": {
-            "@babel/highlight": "^7.14.5"
-          }
-        },
-        "@babel/generator": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.14.5.tgz",
-          "integrity": "sha512-y3rlP+/G25OIX3mYKKIOlQRcqj7YgrvHxOLbVmyLJ9bPmi5ttvUmpydVjcFjZphOktWuA7ovbx91ECloWTfjIA==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.14.5",
-            "jsesc": "^2.5.1",
-            "source-map": "^0.5.0"
-          }
-        },
-        "@babel/helper-function-name": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.14.5.tgz",
-          "integrity": "sha512-Gjna0AsXWfFvrAuX+VKcN/aNNWonizBj39yGwUzVDVTlMYJMK2Wp6xdpy72mfArFq5uK+NOuexfzZlzI1z9+AQ==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-get-function-arity": "^7.14.5",
-            "@babel/template": "^7.14.5",
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/helper-get-function-arity": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.14.5.tgz",
-          "integrity": "sha512-I1Db4Shst5lewOM4V+ZKJzQ0JGGaZ6VY1jYvMghRjqs6DWgxLCIyFt30GlnKkfUeFLpJt2vzbMVEXVSXlIFYUg==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/helper-member-expression-to-functions": {
-          "version": "7.14.7",
-          "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.14.7.tgz",
-          "integrity": "sha512-TMUt4xKxJn6ccjcOW7c4hlwyJArizskAhoSTOCkA0uZ+KghIaci0Qg9R043kUMWI9mtQfgny+NQ5QATnZ+paaA==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/helper-module-imports": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.14.5.tgz",
-          "integrity": "sha512-SwrNHu5QWS84XlHwGYPDtCxcA0hrSlL2yhWYLgeOc0w7ccOl2qv4s/nARI0aYZW+bSwAL5CukeXA47B/1NKcnQ==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/helper-module-transforms": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.14.5.tgz",
-          "integrity": "sha512-iXpX4KW8LVODuAieD7MzhNjmM6dzYY5tfRqT+R9HDXWl0jPn/djKmA+G9s/2C2T9zggw5tK1QNqZ70USfedOwA==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-module-imports": "^7.14.5",
-            "@babel/helper-replace-supers": "^7.14.5",
-            "@babel/helper-simple-access": "^7.14.5",
-            "@babel/helper-split-export-declaration": "^7.14.5",
-            "@babel/helper-validator-identifier": "^7.14.5",
-            "@babel/template": "^7.14.5",
-            "@babel/traverse": "^7.14.5",
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/helper-optimise-call-expression": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.14.5.tgz",
-          "integrity": "sha512-IqiLIrODUOdnPU9/F8ib1Fx2ohlgDhxnIDU7OEVi+kAbEZcyiF7BLU8W6PfvPi9LzztjS7kcbzbmL7oG8kD6VA==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/helper-plugin-utils": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-          "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-          "dev": true
-        },
-        "@babel/helper-replace-supers": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.14.5.tgz",
-          "integrity": "sha512-3i1Qe9/8x/hCHINujn+iuHy+mMRLoc77b2nI9TB0zjH1hvn9qGlXjWlggdwUcju36PkPCy/lpM7LLUdcTyH4Ow==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-member-expression-to-functions": "^7.14.5",
-            "@babel/helper-optimise-call-expression": "^7.14.5",
-            "@babel/traverse": "^7.14.5",
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/helper-simple-access": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.14.5.tgz",
-          "integrity": "sha512-nfBN9xvmCt6nrMZjfhkl7i0oTV3yxR4/FztsbOASyTvVcoYd0TRHh7eMLdlEcCqobydC0LAF3LtC92Iwxo0wyw==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/helper-split-export-declaration": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.14.5.tgz",
-          "integrity": "sha512-hprxVPu6e5Kdp2puZUmvOGjaLv9TCe58E/Fl6hRq4YiVQxIcNvuq6uTM2r1mT/oPskuS9CgR+I94sqAYv0NGKA==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/helper-validator-identifier": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz",
-          "integrity": "sha512-5lsetuxCLilmVGyiLEfoHBRX8UCFD+1m2x3Rj97WrW3V7H3u4RWRXA4evMjImCsin2J2YT0QaVDGf+z8ondbAg==",
-          "dev": true
-        },
-        "@babel/highlight": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.14.5.tgz",
-          "integrity": "sha512-qf9u2WFWVV0MppaL877j2dBtQIDgmidgjGk5VIMw3OadXvYaXn66U1BFlH2t4+t3i+8PhedppRv+i40ABzd+gg==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.14.5",
-            "chalk": "^2.0.0",
-            "js-tokens": "^4.0.0"
-          }
-        },
-        "@babel/parser": {
-          "version": "7.14.7",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.14.7.tgz",
-          "integrity": "sha512-X67Z5y+VBJuHB/RjwECp8kSl5uYi0BvRbNeWqkaJCVh+LiTPl19WBUfG627psSgp9rSf6ojuXghQM3ha6qHHdA==",
-          "dev": true
-        },
-        "@babel/template": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.14.5.tgz",
-          "integrity": "sha512-6Z3Po85sfxRGachLULUhOmvAaOo7xCvqGQtxINai2mEGPFm6pQ4z5QInFnUrRpfoSV60BnjyF5F3c+15fxFV1g==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.14.5",
-            "@babel/parser": "^7.14.5",
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/traverse": {
-          "version": "7.14.7",
-          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.14.7.tgz",
-          "integrity": "sha512-9vDr5NzHu27wgwejuKL7kIOm4bwEtaPQ4Z6cpCmjSuaRqpH/7xc4qcGEscwMqlkwgcXl6MvqoAjZkQ24uSdIZQ==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.14.5",
-            "@babel/generator": "^7.14.5",
-            "@babel/helper-function-name": "^7.14.5",
-            "@babel/helper-hoist-variables": "^7.14.5",
-            "@babel/helper-split-export-declaration": "^7.14.5",
-            "@babel/parser": "^7.14.7",
-            "@babel/types": "^7.14.5",
-            "debug": "^4.1.0",
-            "globals": "^11.1.0"
-          }
-        },
-        "@babel/types": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.5.tgz",
-          "integrity": "sha512-M/NzBpEL95I5Hh4dwhin5JlE7EzO5PHMAuzjxss3tiOBD46KfQvVedN/3jEPZvdRvtsK2222XfdHogNIttFgcg==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.14.5",
-            "to-fast-properties": "^2.0.0"
-          }
-        },
-        "source-map": {
-          "version": "0.5.7",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-transform-named-capturing-groups-regex": {
-      "version": "7.14.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.14.7.tgz",
-      "integrity": "sha512-DTNOTaS7TkW97xsDMrp7nycUVh6sn/eq22VaxWfEdzuEbRsiaOU0pqU7DlyUGHVsbQbSghvjKRpEl+nUCKGQSg==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-create-regexp-features-plugin": "^7.14.5"
-      }
-    },
-    "@babel/plugin-transform-new-target": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.14.5.tgz",
-      "integrity": "sha512-Nx054zovz6IIRWEB49RDRuXGI4Gy0GMgqG0cII9L3MxqgXz/+rgII+RU58qpo4g7tNEx1jG7rRVH4ihZoP4esQ==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.14.5"
-      },
-      "dependencies": {
-        "@babel/helper-plugin-utils": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-          "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-transform-object-super": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.14.5.tgz",
-      "integrity": "sha512-MKfOBWzK0pZIrav9z/hkRqIk/2bTv9qvxHzPQc12RcVkMOzpIKnFCNYJip00ssKWYkd8Sf5g0Wr7pqJ+cmtuFg==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.14.5",
-        "@babel/helper-replace-supers": "^7.14.5"
-      },
-      "dependencies": {
-        "@babel/code-frame": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.14.5.tgz",
-          "integrity": "sha512-9pzDqyc6OLDaqe+zbACgFkb6fKMNG6CObKpnYXChRsvYGyEdc7CA2BaqeOM+vOtCS5ndmJicPJhKAwYRI6UfFw==",
-          "dev": true,
-          "requires": {
-            "@babel/highlight": "^7.14.5"
-          }
-        },
-        "@babel/generator": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.14.5.tgz",
-          "integrity": "sha512-y3rlP+/G25OIX3mYKKIOlQRcqj7YgrvHxOLbVmyLJ9bPmi5ttvUmpydVjcFjZphOktWuA7ovbx91ECloWTfjIA==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.14.5",
-            "jsesc": "^2.5.1",
-            "source-map": "^0.5.0"
-          }
-        },
-        "@babel/helper-function-name": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.14.5.tgz",
-          "integrity": "sha512-Gjna0AsXWfFvrAuX+VKcN/aNNWonizBj39yGwUzVDVTlMYJMK2Wp6xdpy72mfArFq5uK+NOuexfzZlzI1z9+AQ==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-get-function-arity": "^7.14.5",
-            "@babel/template": "^7.14.5",
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/helper-get-function-arity": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.14.5.tgz",
-          "integrity": "sha512-I1Db4Shst5lewOM4V+ZKJzQ0JGGaZ6VY1jYvMghRjqs6DWgxLCIyFt30GlnKkfUeFLpJt2vzbMVEXVSXlIFYUg==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/helper-member-expression-to-functions": {
-          "version": "7.14.7",
-          "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.14.7.tgz",
-          "integrity": "sha512-TMUt4xKxJn6ccjcOW7c4hlwyJArizskAhoSTOCkA0uZ+KghIaci0Qg9R043kUMWI9mtQfgny+NQ5QATnZ+paaA==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/helper-optimise-call-expression": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.14.5.tgz",
-          "integrity": "sha512-IqiLIrODUOdnPU9/F8ib1Fx2ohlgDhxnIDU7OEVi+kAbEZcyiF7BLU8W6PfvPi9LzztjS7kcbzbmL7oG8kD6VA==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/helper-plugin-utils": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-          "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-          "dev": true
-        },
-        "@babel/helper-replace-supers": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.14.5.tgz",
-          "integrity": "sha512-3i1Qe9/8x/hCHINujn+iuHy+mMRLoc77b2nI9TB0zjH1hvn9qGlXjWlggdwUcju36PkPCy/lpM7LLUdcTyH4Ow==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-member-expression-to-functions": "^7.14.5",
-            "@babel/helper-optimise-call-expression": "^7.14.5",
-            "@babel/traverse": "^7.14.5",
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/helper-split-export-declaration": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.14.5.tgz",
-          "integrity": "sha512-hprxVPu6e5Kdp2puZUmvOGjaLv9TCe58E/Fl6hRq4YiVQxIcNvuq6uTM2r1mT/oPskuS9CgR+I94sqAYv0NGKA==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/helper-validator-identifier": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz",
-          "integrity": "sha512-5lsetuxCLilmVGyiLEfoHBRX8UCFD+1m2x3Rj97WrW3V7H3u4RWRXA4evMjImCsin2J2YT0QaVDGf+z8ondbAg==",
-          "dev": true
-        },
-        "@babel/highlight": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.14.5.tgz",
-          "integrity": "sha512-qf9u2WFWVV0MppaL877j2dBtQIDgmidgjGk5VIMw3OadXvYaXn66U1BFlH2t4+t3i+8PhedppRv+i40ABzd+gg==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.14.5",
-            "chalk": "^2.0.0",
-            "js-tokens": "^4.0.0"
-          }
-        },
-        "@babel/parser": {
-          "version": "7.14.7",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.14.7.tgz",
-          "integrity": "sha512-X67Z5y+VBJuHB/RjwECp8kSl5uYi0BvRbNeWqkaJCVh+LiTPl19WBUfG627psSgp9rSf6ojuXghQM3ha6qHHdA==",
-          "dev": true
-        },
-        "@babel/template": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.14.5.tgz",
-          "integrity": "sha512-6Z3Po85sfxRGachLULUhOmvAaOo7xCvqGQtxINai2mEGPFm6pQ4z5QInFnUrRpfoSV60BnjyF5F3c+15fxFV1g==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.14.5",
-            "@babel/parser": "^7.14.5",
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/traverse": {
-          "version": "7.14.7",
-          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.14.7.tgz",
-          "integrity": "sha512-9vDr5NzHu27wgwejuKL7kIOm4bwEtaPQ4Z6cpCmjSuaRqpH/7xc4qcGEscwMqlkwgcXl6MvqoAjZkQ24uSdIZQ==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.14.5",
-            "@babel/generator": "^7.14.5",
-            "@babel/helper-function-name": "^7.14.5",
-            "@babel/helper-hoist-variables": "^7.14.5",
-            "@babel/helper-split-export-declaration": "^7.14.5",
-            "@babel/parser": "^7.14.7",
-            "@babel/types": "^7.14.5",
-            "debug": "^4.1.0",
-            "globals": "^11.1.0"
-          }
-        },
-        "@babel/types": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.5.tgz",
-          "integrity": "sha512-M/NzBpEL95I5Hh4dwhin5JlE7EzO5PHMAuzjxss3tiOBD46KfQvVedN/3jEPZvdRvtsK2222XfdHogNIttFgcg==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.14.5",
-            "to-fast-properties": "^2.0.0"
-          }
-        },
-        "source-map": {
-          "version": "0.5.7",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-transform-parameters": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.14.5.tgz",
-      "integrity": "sha512-Tl7LWdr6HUxTmzQtzuU14SqbgrSKmaR77M0OKyq4njZLQTPfOvzblNKyNkGwOfEFCEx7KeYHQHDI0P3F02IVkA==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.14.5"
-      },
-      "dependencies": {
-        "@babel/helper-plugin-utils": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-          "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-transform-property-literals": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.14.5.tgz",
-      "integrity": "sha512-r1uilDthkgXW8Z1vJz2dKYLV1tuw2xsbrp3MrZmD99Wh9vsfKoob+JTgri5VUb/JqyKRXotlOtwgu4stIYCmnw==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.14.5"
-      },
-      "dependencies": {
-        "@babel/helper-plugin-utils": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-          "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-transform-react-constant-elements": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.14.5.tgz",
-      "integrity": "sha512-NBqLEx1GxllIOXJInJAQbrnwwYJsV3WaMHIcOwD8rhYS0AabTWn7kHdHgPgu5RmHLU0q4DMxhAMu8ue/KampgQ==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.14.5"
-      },
-      "dependencies": {
-        "@babel/helper-plugin-utils": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-          "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-transform-react-display-name": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.14.5.tgz",
-      "integrity": "sha512-07aqY1ChoPgIxsuDviptRpVkWCSbXWmzQqcgy65C6YSFOfPFvb/DX3bBRHh7pCd/PMEEYHYWUTSVkCbkVainYQ==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.14.5"
-      },
-      "dependencies": {
-        "@babel/helper-plugin-utils": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-          "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-transform-react-jsx": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.14.5.tgz",
-      "integrity": "sha512-7RylxNeDnxc1OleDm0F5Q/BSL+whYRbOAR+bwgCxIr0L32v7UFh/pz1DLMZideAUxKT6eMoS2zQH6fyODLEi8Q==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-annotate-as-pure": "^7.14.5",
-        "@babel/helper-module-imports": "^7.14.5",
-        "@babel/helper-plugin-utils": "^7.14.5",
-        "@babel/plugin-syntax-jsx": "^7.14.5",
-        "@babel/types": "^7.14.5"
-      },
-      "dependencies": {
-        "@babel/helper-module-imports": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.14.5.tgz",
-          "integrity": "sha512-SwrNHu5QWS84XlHwGYPDtCxcA0hrSlL2yhWYLgeOc0w7ccOl2qv4s/nARI0aYZW+bSwAL5CukeXA47B/1NKcnQ==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/helper-plugin-utils": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-          "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-          "dev": true
-        },
-        "@babel/helper-validator-identifier": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz",
-          "integrity": "sha512-5lsetuxCLilmVGyiLEfoHBRX8UCFD+1m2x3Rj97WrW3V7H3u4RWRXA4evMjImCsin2J2YT0QaVDGf+z8ondbAg==",
-          "dev": true
-        },
-        "@babel/types": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.5.tgz",
-          "integrity": "sha512-M/NzBpEL95I5Hh4dwhin5JlE7EzO5PHMAuzjxss3tiOBD46KfQvVedN/3jEPZvdRvtsK2222XfdHogNIttFgcg==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.14.5",
-            "to-fast-properties": "^2.0.0"
-          }
-        }
-      }
-    },
-    "@babel/plugin-transform-react-jsx-development": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.14.5.tgz",
-      "integrity": "sha512-rdwG/9jC6QybWxVe2UVOa7q6cnTpw8JRRHOxntG/h6g/guAOe6AhtQHJuJh5FwmnXIT1bdm5vC2/5huV8ZOorQ==",
-      "dev": true,
-      "requires": {
-        "@babel/plugin-transform-react-jsx": "^7.14.5"
-      }
-    },
-    "@babel/plugin-transform-react-jsx-self": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.14.5.tgz",
-      "integrity": "sha512-M/fmDX6n0cfHK/NLTcPmrfVAORKDhK8tyjDhyxlUjYyPYYO8FRWwuxBA3WBx8kWN/uBUuwGa3s/0+hQ9JIN3Tg==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.14.5"
-      },
-      "dependencies": {
-        "@babel/helper-plugin-utils": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-          "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-transform-react-jsx-source": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.14.5.tgz",
-      "integrity": "sha512-1TpSDnD9XR/rQ2tzunBVPThF5poaYT9GqP+of8fAtguYuI/dm2RkrMBDemsxtY0XBzvW7nXjYM0hRyKX9QYj7Q==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.14.5"
-      },
-      "dependencies": {
-        "@babel/helper-plugin-utils": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-          "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-transform-react-pure-annotations": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.14.5.tgz",
-      "integrity": "sha512-3X4HpBJimNxW4rhUy/SONPyNQHp5YRr0HhJdT2OH1BRp0of7u3Dkirc7x9FRJMKMqTBI079VZ1hzv7Ouuz///g==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-annotate-as-pure": "^7.14.5",
-        "@babel/helper-plugin-utils": "^7.14.5"
-      },
-      "dependencies": {
-        "@babel/helper-plugin-utils": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-          "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-transform-regenerator": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.14.5.tgz",
-      "integrity": "sha512-NVIY1W3ITDP5xQl50NgTKlZ0GrotKtLna08/uGY6ErQt6VEQZXla86x/CTddm5gZdcr+5GSsvMeTmWA5Ii6pkg==",
-      "dev": true,
-      "requires": {
-        "regenerator-transform": "^0.14.2"
-      }
-    },
-    "@babel/plugin-transform-reserved-words": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.14.5.tgz",
-      "integrity": "sha512-cv4F2rv1nD4qdexOGsRQXJrOcyb5CrgjUH9PKrrtyhSDBNWGxd0UIitjyJiWagS+EbUGjG++22mGH1Pub8D6Vg==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.14.5"
-      },
-      "dependencies": {
-        "@babel/helper-plugin-utils": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-          "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-transform-shorthand-properties": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.14.5.tgz",
-      "integrity": "sha512-xLucks6T1VmGsTB+GWK5Pl9Jl5+nRXD1uoFdA5TSO6xtiNjtXTjKkmPdFXVLGlK5A2/or/wQMKfmQ2Y0XJfn5g==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.14.5"
-      },
-      "dependencies": {
-        "@babel/helper-plugin-utils": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-          "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-transform-spread": {
-      "version": "7.14.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.14.6.tgz",
-      "integrity": "sha512-Zr0x0YroFJku7n7+/HH3A2eIrGMjbmAIbJSVv0IZ+t3U2WUQUA64S/oeied2e+MaGSjmt4alzBCsK9E8gh+fag==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.14.5",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.14.5"
-      },
-      "dependencies": {
-        "@babel/helper-plugin-utils": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-          "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-transform-sticky-regex": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.14.5.tgz",
-      "integrity": "sha512-Z7F7GyvEMzIIbwnziAZmnSNpdijdr4dWt+FJNBnBLz5mwDFkqIXU9wmBcWWad3QeJF5hMTkRe4dAq2sUZiG+8A==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.14.5"
-      },
-      "dependencies": {
-        "@babel/helper-plugin-utils": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-          "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-transform-template-literals": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.14.5.tgz",
-      "integrity": "sha512-22btZeURqiepOfuy/VkFr+zStqlujWaarpMErvay7goJS6BWwdd6BY9zQyDLDa4x2S3VugxFb162IZ4m/S/+Gg==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.14.5"
-      },
-      "dependencies": {
-        "@babel/helper-plugin-utils": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-          "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-transform-typeof-symbol": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.14.5.tgz",
-      "integrity": "sha512-lXzLD30ffCWseTbMQzrvDWqljvZlHkXU+CnseMhkMNqU1sASnCsz3tSzAaH3vCUXb9PHeUb90ZT1BdFTm1xxJw==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.14.5"
-      },
-      "dependencies": {
-        "@babel/helper-plugin-utils": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-          "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-transform-unicode-escapes": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.14.5.tgz",
-      "integrity": "sha512-crTo4jATEOjxj7bt9lbYXcBAM3LZaUrbP2uUdxb6WIorLmjNKSpHfIybgY4B8SRpbf8tEVIWH3Vtm7ayCrKocA==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.14.5"
-      },
-      "dependencies": {
-        "@babel/helper-plugin-utils": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-          "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/plugin-transform-unicode-regex": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.14.5.tgz",
-      "integrity": "sha512-UygduJpC5kHeCiRw/xDVzC+wj8VaYSoKl5JNVmbP7MadpNinAm3SvZCxZ42H37KZBKztz46YC73i9yV34d0Tzw==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-create-regexp-features-plugin": "^7.14.5",
-        "@babel/helper-plugin-utils": "^7.14.5"
-      },
-      "dependencies": {
-        "@babel/helper-plugin-utils": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-          "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/preset-env": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.10.4.tgz",
-      "integrity": "sha512-tcmuQ6vupfMZPrLrc38d0sF2OjLT3/bZ0dry5HchNCQbrokoQi4reXqclvkkAT5b+gWc23meVWpve5P/7+w/zw==",
-      "dev": true,
-      "requires": {
-        "@babel/compat-data": "^7.10.4",
-        "@babel/helper-compilation-targets": "^7.10.4",
-        "@babel/helper-module-imports": "^7.10.4",
-        "@babel/helper-plugin-utils": "^7.10.4",
-        "@babel/plugin-proposal-async-generator-functions": "^7.10.4",
-        "@babel/plugin-proposal-class-properties": "^7.10.4",
-        "@babel/plugin-proposal-dynamic-import": "^7.10.4",
-        "@babel/plugin-proposal-json-strings": "^7.10.4",
-        "@babel/plugin-proposal-nullish-coalescing-operator": "^7.10.4",
-        "@babel/plugin-proposal-numeric-separator": "^7.10.4",
-        "@babel/plugin-proposal-object-rest-spread": "^7.10.4",
-        "@babel/plugin-proposal-optional-catch-binding": "^7.10.4",
-        "@babel/plugin-proposal-optional-chaining": "^7.10.4",
-        "@babel/plugin-proposal-private-methods": "^7.10.4",
-        "@babel/plugin-proposal-unicode-property-regex": "^7.10.4",
-        "@babel/plugin-syntax-async-generators": "^7.8.0",
-        "@babel/plugin-syntax-class-properties": "^7.10.4",
-        "@babel/plugin-syntax-dynamic-import": "^7.8.0",
-        "@babel/plugin-syntax-json-strings": "^7.8.0",
-        "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.0",
-        "@babel/plugin-syntax-numeric-separator": "^7.10.4",
-        "@babel/plugin-syntax-object-rest-spread": "^7.8.0",
-        "@babel/plugin-syntax-optional-catch-binding": "^7.8.0",
-        "@babel/plugin-syntax-optional-chaining": "^7.8.0",
-        "@babel/plugin-syntax-top-level-await": "^7.10.4",
-        "@babel/plugin-transform-arrow-functions": "^7.10.4",
-        "@babel/plugin-transform-async-to-generator": "^7.10.4",
-        "@babel/plugin-transform-block-scoped-functions": "^7.10.4",
-        "@babel/plugin-transform-block-scoping": "^7.10.4",
-        "@babel/plugin-transform-classes": "^7.10.4",
-        "@babel/plugin-transform-computed-properties": "^7.10.4",
-        "@babel/plugin-transform-destructuring": "^7.10.4",
-        "@babel/plugin-transform-dotall-regex": "^7.10.4",
-        "@babel/plugin-transform-duplicate-keys": "^7.10.4",
-        "@babel/plugin-transform-exponentiation-operator": "^7.10.4",
-        "@babel/plugin-transform-for-of": "^7.10.4",
-        "@babel/plugin-transform-function-name": "^7.10.4",
-        "@babel/plugin-transform-literals": "^7.10.4",
-        "@babel/plugin-transform-member-expression-literals": "^7.10.4",
-        "@babel/plugin-transform-modules-amd": "^7.10.4",
-        "@babel/plugin-transform-modules-commonjs": "^7.10.4",
-        "@babel/plugin-transform-modules-systemjs": "^7.10.4",
-        "@babel/plugin-transform-modules-umd": "^7.10.4",
-        "@babel/plugin-transform-named-capturing-groups-regex": "^7.10.4",
-        "@babel/plugin-transform-new-target": "^7.10.4",
-        "@babel/plugin-transform-object-super": "^7.10.4",
-        "@babel/plugin-transform-parameters": "^7.10.4",
-        "@babel/plugin-transform-property-literals": "^7.10.4",
-        "@babel/plugin-transform-regenerator": "^7.10.4",
-        "@babel/plugin-transform-reserved-words": "^7.10.4",
-        "@babel/plugin-transform-shorthand-properties": "^7.10.4",
-        "@babel/plugin-transform-spread": "^7.10.4",
-        "@babel/plugin-transform-sticky-regex": "^7.10.4",
-        "@babel/plugin-transform-template-literals": "^7.10.4",
-        "@babel/plugin-transform-typeof-symbol": "^7.10.4",
-        "@babel/plugin-transform-unicode-escapes": "^7.10.4",
-        "@babel/plugin-transform-unicode-regex": "^7.10.4",
-        "@babel/preset-modules": "^0.1.3",
-        "@babel/types": "^7.10.4",
-        "browserslist": "^4.12.0",
-        "core-js-compat": "^3.6.2",
-        "invariant": "^2.2.2",
-        "levenary": "^1.1.1",
-        "semver": "^5.5.0"
-      }
-    },
-    "@babel/preset-modules": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/@babel/preset-modules/-/preset-modules-0.1.4.tgz",
-      "integrity": "sha512-J36NhwnfdzpmH41M1DrnkkgAqhZaqr/NBdPfQ677mLzlaXo+oDiv1deyCDtgAhz8p328otdob0Du7+xgHGZbKg==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.0.0",
-        "@babel/plugin-proposal-unicode-property-regex": "^7.4.4",
-        "@babel/plugin-transform-dotall-regex": "^7.4.4",
-        "@babel/types": "^7.4.4",
-        "esutils": "^2.0.2"
-      }
-    },
-    "@babel/preset-react": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/preset-react/-/preset-react-7.10.4.tgz",
-      "integrity": "sha512-BrHp4TgOIy4M19JAfO1LhycVXOPWdDbTRep7eVyatf174Hff+6Uk53sDyajqZPu8W1qXRBiYOfIamek6jA7YVw==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.10.4",
-        "@babel/plugin-transform-react-display-name": "^7.10.4",
-        "@babel/plugin-transform-react-jsx": "^7.10.4",
-        "@babel/plugin-transform-react-jsx-development": "^7.10.4",
-        "@babel/plugin-transform-react-jsx-self": "^7.10.4",
-        "@babel/plugin-transform-react-jsx-source": "^7.10.4",
-        "@babel/plugin-transform-react-pure-annotations": "^7.10.4"
-      }
-    },
-    "@babel/runtime": {
-      "version": "7.10.5",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.10.5.tgz",
-      "integrity": "sha512-otddXKhdNn7d0ptoFRHtMLa8LqDxLYwTjB4nYgM1yy5N6gU/MUf8zqyyLltCH3yAVitBzmwK4us+DD0l/MauAg==",
-      "requires": {
-        "regenerator-runtime": "^0.13.4"
-      },
-      "dependencies": {
-        "regenerator-runtime": {
-          "version": "0.13.6",
-          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.6.tgz",
-          "integrity": "sha512-GmwlGiazQEbOwQWDdbbaP10i15pGtScYWLbMZuu+RKRz0cZ+g8IUONazBnaZqe7j1670IV1HgE4/8iy7CQPf4Q=="
-        }
-      }
-    },
-    "@babel/runtime-corejs3": {
-      "version": "7.10.5",
-      "resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.10.5.tgz",
-      "integrity": "sha512-RMafpmrNB5E/bwdSphLr8a8++9TosnyJp98RZzI6VOx2R2CCMpsXXXRvmI700O9oEKpXdZat6oEK68/F0zjd4A==",
-      "dev": true,
-      "requires": {
-        "core-js-pure": "^3.0.0",
-        "regenerator-runtime": "^0.13.4"
-      },
-      "dependencies": {
-        "regenerator-runtime": {
-          "version": "0.13.6",
-          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.6.tgz",
-          "integrity": "sha512-GmwlGiazQEbOwQWDdbbaP10i15pGtScYWLbMZuu+RKRz0cZ+g8IUONazBnaZqe7j1670IV1HgE4/8iy7CQPf4Q==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/template": {
-      "version": "7.10.4",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.10.4.tgz",
-      "integrity": "sha512-ZCjD27cGJFUB6nmCB1Enki3r+L5kJveX9pq1SvAUKoICy6CZ9yD8xO086YXdYhvNjBdnekm4ZnaP5yC8Cs/1tA==",
-      "dev": true,
-      "requires": {
-        "@babel/code-frame": "^7.10.4",
-        "@babel/parser": "^7.10.4",
-        "@babel/types": "^7.10.4"
-      }
-    },
-    "@babel/traverse": {
-      "version": "7.10.5",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.10.5.tgz",
-      "integrity": "sha512-yc/fyv2gUjPqzTz0WHeRJH2pv7jA9kA7mBX2tXl/x5iOE81uaVPuGPtaYk7wmkx4b67mQ7NqI8rmT2pF47KYKQ==",
-      "dev": true,
-      "requires": {
-        "@babel/code-frame": "^7.10.4",
-        "@babel/generator": "^7.10.5",
-        "@babel/helper-function-name": "^7.10.4",
-        "@babel/helper-split-export-declaration": "^7.10.4",
-        "@babel/parser": "^7.10.5",
-        "@babel/types": "^7.10.5",
-        "debug": "^4.1.0",
-        "globals": "^11.1.0",
-        "lodash": "^4.17.19"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
-          "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
-          "dev": true,
-          "requires": {
-            "ms": "^2.1.1"
-          }
-        },
-        "ms": {
-          "version": "2.1.2",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-          "dev": true
-        }
-      }
-    },
-    "@babel/types": {
-      "version": "7.10.5",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.5.tgz",
-      "integrity": "sha512-ixV66KWfCI6GKoA/2H9v6bQdbfXEwwpOdQ8cRvb4F+eyvhlaHxWFMQB4+3d9QFJXZsiiiqVrewNV0DFEQpyT4Q==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-validator-identifier": "^7.10.4",
-        "lodash": "^4.17.19",
-        "to-fast-properties": "^2.0.0"
-      }
-    },
-    "@bcoe/v8-coverage": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz",
-      "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==",
-      "dev": true
-    },
-    "@cnakazawa/watch": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/@cnakazawa/watch/-/watch-1.0.4.tgz",
-      "integrity": "sha512-v9kIhKwjeZThiWrLmj0y17CWoyddASLj9O2yvbZkbvw/N3rWOYy9zkV66ursAoVr0mV15bL8g0c4QZUE6cdDoQ==",
-      "dev": true,
-      "requires": {
-        "exec-sh": "^0.3.2",
-        "minimist": "^1.2.0"
-      }
-    },
-    "@cospired/i18n-iso-languages": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/@cospired/i18n-iso-languages/-/i18n-iso-languages-2.2.0.tgz",
-      "integrity": "sha512-hywY9u9apWGeLxQuRcXw7IW0XkMdXum/hr3TpmHY2fAbXMTFlhhkPCdsQeHzjxMQwTnMgXaZ4j4WOCwKtlDRCQ=="
-    },
-    "@discoveryjs/json-ext": {
-      "version": "0.5.3",
-      "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.3.tgz",
-      "integrity": "sha512-Fxt+AfXgjMoin2maPIYzFZnQjAXjAL0PHscM5pRTtatFqB+vZxAM9tLp2Optnuw3QOQC40jTNeGYFOMvyf7v9g==",
-      "dev": true
-    },
-    "@edx/brand": {
-      "version": "npm:@edx/brand-openedx@1.1.0",
-      "resolved": "https://registry.npmjs.org/@edx/brand-openedx/-/brand-openedx-1.1.0.tgz",
-      "integrity": "sha512-ne2ZKF1r0akkt0rEzCAQAk4cTDTI2GiWCpc+T7ldQpw9X57OnUB16dKsFNe40C9uEjL5h3Ps/ZsFM5dm4cIkEQ=="
-    },
-    "@edx/eslint-config": {
-      "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/@edx/eslint-config/-/eslint-config-1.1.6.tgz",
-      "integrity": "sha512-5+WPYySI8wGttJ+eU6SqCNZk/smABmYF5V+jJdhtV6+zZ6PjaZ4JNLyKNFIAht6lc5Ld8AG8Ki50YTuMd0j+fg==",
-      "dev": true
-    },
-    "@edx/frontend-build": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-build/-/frontend-build-7.0.0.tgz",
-      "integrity": "sha512-NakVO6NjNr0G582yXkbBM/ekeyCyibxMCD6hcomKmQdpGH9JA+IRJ4MEJ81r2M71eKAfPwV0YhS0ju/wWra1sQ==",
-      "dev": true,
-      "requires": {
-        "@babel/cli": "7.10.5",
-        "@babel/core": "7.10.5",
-        "@babel/plugin-proposal-class-properties": "7.10.4",
-        "@babel/plugin-proposal-object-rest-spread": "7.10.4",
-        "@babel/plugin-syntax-dynamic-import": "7.8.3",
-        "@babel/preset-env": "7.10.4",
-        "@babel/preset-react": "7.10.4",
-        "@edx/eslint-config": "1.1.6",
-        "@svgr/webpack": "5.5.0",
-        "autoprefixer": "10.2.6",
-        "babel-eslint": "10.1.0",
-        "babel-jest": "26.3.0",
-        "babel-loader": "8.1.0",
-        "babel-plugin-react-intl": "7.9.4",
-        "babel-plugin-transform-imports": "2.0.0",
-        "babel-polyfill": "6.26.0",
-        "clean-webpack-plugin": "3.0.0",
-        "css-loader": "5.2.6",
-        "cssnano": "5.0.6",
-        "dotenv": "8.2.0",
-        "dotenv-webpack": "7.0.3",
-        "eslint": "6.8.0",
-        "eslint-config-airbnb": "18.1.0",
-        "eslint-plugin-import": "2.22.1",
-        "eslint-plugin-jsx-a11y": "6.2.3",
-        "eslint-plugin-react": "7.19.0",
-        "eslint-plugin-react-hooks": "1.7.0",
-        "file-loader": "6.2.0",
-        "html-webpack-new-relic-plugin": "4.1.0",
-        "html-webpack-plugin": "5.3.1",
-        "identity-obj-proxy": "3.0.0",
-        "image-webpack-loader": "7.0.1",
-        "jest": "26.4.2",
-        "mini-css-extract-plugin": "1.6.0",
-        "new-relic-source-map-webpack-plugin": "1.2.0",
-        "postcss": "8.3.5",
-        "postcss-loader": "6.1.0",
-        "postcss-rtlcss": "3.3.4",
-        "react-dev-utils": "11.0.4",
-        "resolve-url-loader": "5.0.0-beta.1",
-        "sass": "1.26.11",
-        "sass-loader": "10.0.5",
-        "source-map-loader": "0.2.4",
-        "style-loader": "2.0.0",
-        "url-loader": "4.1.1",
-        "webpack": "5.21.2",
-        "webpack-bundle-analyzer": "3.9.0",
-        "webpack-cli": "4.5.0",
-        "webpack-dev-server": "4.0.0-beta.3",
-        "webpack-merge": "5.2.0"
-      },
-      "dependencies": {
-        "@babel/core": {
-          "version": "7.10.5",
-          "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.10.5.tgz",
-          "integrity": "sha512-O34LQooYVDXPl7QWCdW9p4NR+QlzOr7xShPPJz8GsuCU3/8ua/wqTr7gmnxXv+WBESiGU/G5s16i6tUvHkNb+w==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.10.4",
-            "@babel/generator": "^7.10.5",
-            "@babel/helper-module-transforms": "^7.10.5",
-            "@babel/helpers": "^7.10.4",
-            "@babel/parser": "^7.10.5",
-            "@babel/template": "^7.10.4",
-            "@babel/traverse": "^7.10.5",
-            "@babel/types": "^7.10.5",
-            "convert-source-map": "^1.7.0",
-            "debug": "^4.1.0",
-            "gensync": "^1.0.0-beta.1",
-            "json5": "^2.1.2",
-            "lodash": "^4.17.19",
-            "resolve": "^1.3.2",
-            "semver": "^5.4.1",
-            "source-map": "^0.5.0"
-          }
-        },
-        "@jest/types": {
-          "version": "26.6.2",
-          "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
-          "integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
-          "dev": true,
-          "requires": {
-            "@types/istanbul-lib-coverage": "^2.0.0",
-            "@types/istanbul-reports": "^3.0.0",
-            "@types/node": "*",
-            "@types/yargs": "^15.0.0",
-            "chalk": "^4.0.0"
-          }
-        },
-        "@types/istanbul-reports": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz",
-          "integrity": "sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==",
-          "dev": true,
-          "requires": {
-            "@types/istanbul-lib-report": "*"
-          }
-        },
-        "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,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
-          "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "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,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "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
-        },
-        "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
-        },
-        "jest": {
-          "version": "26.4.2",
-          "resolved": "https://registry.npmjs.org/jest/-/jest-26.4.2.tgz",
-          "integrity": "sha512-LLCjPrUh98Ik8CzW8LLVnSCfLaiY+wbK53U7VxnFSX7Q+kWC4noVeDvGWIFw0Amfq1lq2VfGm7YHWSLBV62MJw==",
-          "dev": true,
-          "requires": {
-            "@jest/core": "^26.4.2",
-            "import-local": "^3.0.2",
-            "jest-cli": "^26.4.2"
-          },
-          "dependencies": {
-            "jest-cli": {
-              "version": "26.6.3",
-              "resolved": "https://registry.npmjs.org/jest-cli/-/jest-cli-26.6.3.tgz",
-              "integrity": "sha512-GF9noBSa9t08pSyl3CY4frMrqp+aQXFGFkf5hEPbh/pIUFYWMK6ZLTfbmadxJVcJrdRoChlWQsA2VkJcDFK8hg==",
-              "dev": true,
-              "requires": {
-                "@jest/core": "^26.6.3",
-                "@jest/test-result": "^26.6.2",
-                "@jest/types": "^26.6.2",
-                "chalk": "^4.0.0",
-                "exit": "^0.1.2",
-                "graceful-fs": "^4.2.4",
-                "import-local": "^3.0.2",
-                "is-ci": "^2.0.0",
-                "jest-config": "^26.6.3",
-                "jest-util": "^26.6.2",
-                "jest-validate": "^26.6.2",
-                "prompts": "^2.0.1",
-                "yargs": "^15.4.1"
-              }
-            }
-          }
-        },
-        "source-map": {
-          "version": "0.5.7",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
-          "dev": true
-        },
-        "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,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
-    "@edx/frontend-component-footer": {
-      "version": "10.0.11",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-component-footer/-/frontend-component-footer-10.0.11.tgz",
-      "integrity": "sha512-Az8E2h0d5DYz+zp+x6yvc+W0uzGaDhSsTd1BE0pcJvcv1EaNPZxuxKrEtsA8bUFXRLNhzt9nWp/DIRG9kivNxA==",
-      "requires": {
-        "@fortawesome/fontawesome-svg-core": "1.2.30",
-        "@fortawesome/free-brands-svg-icons": "5.8.2",
-        "@fortawesome/free-regular-svg-icons": "5.8.2",
-        "@fortawesome/free-solid-svg-icons": "5.8.2",
-        "@fortawesome/react-fontawesome": "0.1.11"
-      },
-      "dependencies": {
-        "@fortawesome/fontawesome-svg-core": {
-          "version": "1.2.30",
-          "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.30.tgz",
-          "integrity": "sha512-E3sAXATKCSVnT17HYmZjjbcmwihrNOCkoU7dVMlasrcwiJAHxSKeZ+4WN5O+ElgO/FaYgJmASl8p9N7/B/RttA==",
-          "requires": {
-            "@fortawesome/fontawesome-common-types": "^0.2.30"
-          }
-        },
-        "@fortawesome/free-brands-svg-icons": {
-          "version": "5.8.2",
-          "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.8.2.tgz",
-          "integrity": "sha512-nhEWctDOP6f+Ka10LXAFoF+6mtWidC2iQgTBGRGgydmhBtcIEwyxWVx5wQHa86A1zAMi5TnipDAYQs2qn7DD6A==",
-          "requires": {
-            "@fortawesome/fontawesome-common-types": "^0.2.18"
-          }
-        },
-        "@fortawesome/free-regular-svg-icons": {
-          "version": "5.8.2",
-          "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-5.8.2.tgz",
-          "integrity": "sha512-499WODlsDcXA9hM+Y3ZqoWj1kKhVLCHS8PnJs3zEaoPr5W6yrE9Jnp3C9Hb9KpwnRMh3IRXZ3XqxyUaQFMMRFw==",
-          "requires": {
-            "@fortawesome/fontawesome-common-types": "^0.2.18"
-          }
-        },
-        "@fortawesome/free-solid-svg-icons": {
-          "version": "5.8.2",
-          "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.8.2.tgz",
-          "integrity": "sha512-5tF6WOFlqqO95zY5ukSB6jliDa3jnk1p5L4K/a58ccDFsbjSkhfGuvZkRkeWxH8uMms81pZd6yQTwQrkedeJmg==",
-          "requires": {
-            "@fortawesome/fontawesome-common-types": "^0.2.18"
-          }
-        },
-        "@fortawesome/react-fontawesome": {
-          "version": "0.1.11",
-          "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.11.tgz",
-          "integrity": "sha512-sClfojasRifQKI0OPqTy8Ln8iIhnxR/Pv/hukBhWnBz9kQRmqi6JSH3nghlhAY7SUeIIM7B5/D2G8WjX0iepVg==",
-          "requires": {
-            "prop-types": "^15.7.2"
-          }
-        }
-      }
-    },
-    "@edx/frontend-platform": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-platform/-/frontend-platform-1.11.0.tgz",
-      "integrity": "sha512-XtqKPWUvXzPJLlIEsoLMuac3TvTtAe1GY9MKu1QQsZDget1plDZqaf3ByRbuxOW8b2g2JVPvFx+Jm3FxTcrmIQ==",
-      "requires": {
-        "@cospired/i18n-iso-languages": "2.2.0",
-        "axios": "0.21.1",
-        "axios-cache-adapter": "^2.5.0",
-        "form-urlencoded": "4.1.4",
-        "glob": "7.1.7",
-        "history": "4.10.1",
-        "i18n-iso-countries": "4.3.1",
-        "jwt-decode": "2.2.0",
-        "localforage": "^1.9.0",
-        "localforage-memoryStorageDriver": "^0.9.2",
-        "lodash.camelcase": "4.3.0",
-        "lodash.memoize": "4.1.2",
-        "lodash.merge": "4.6.2",
-        "lodash.snakecase": "4.1.1",
-        "pubsub-js": "1.9.3",
-        "react-intl": "2.9.0",
-        "universal-cookie": "4.0.4"
-      },
-      "dependencies": {
-        "glob": {
-          "version": "7.1.7",
-          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz",
-          "integrity": "sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==",
-          "requires": {
-            "fs.realpath": "^1.0.0",
-            "inflight": "^1.0.4",
-            "inherits": "2",
-            "minimatch": "^3.0.4",
-            "once": "^1.3.0",
-            "path-is-absolute": "^1.0.0"
-          }
-        }
-      }
-    },
-    "@edx/paragon": {
-      "version": "16.6.4",
-      "resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-16.6.4.tgz",
-      "integrity": "sha512-2RZg9bO/SzgA24EO9XD4KfA2mfAgb8Kpky4Bw3fUPKuU+xNuGpJNxbV4UhwyS0L3E3X63kXF40bguXOHdHrU0w==",
-      "requires": {
-        "@fortawesome/fontawesome-svg-core": "^1.2.30",
-        "@fortawesome/free-solid-svg-icons": "^5.14.0",
-        "@fortawesome/react-fontawesome": "^0.1.11",
-        "@popperjs/core": "^2.6.0",
-        "airbnb-prop-types": "^2.12.0",
-        "bootstrap": "4.6.0",
-        "classnames": "^2.2.6",
-        "email-prop-type": "^3.0.0",
-        "font-awesome": "^4.7.0",
-        "lodash.uniqby": "^4.7.0",
-        "mailto-link": "^1.0.0",
-        "react-bootstrap": "^1.3.0",
-        "react-focus-on": "^3.5.0",
-        "react-popper": "^2.2.4",
-        "react-proptype-conditional-require": "^1.0.4",
-        "react-responsive": "^8.2.0",
-        "react-table": "^7.6.1",
-        "react-transition-group": "^4.0.0",
-        "tabbable": "^4.0.0",
-        "uncontrollable": "7.2.1"
-      },
-      "dependencies": {
-        "@fortawesome/fontawesome-common-types": {
-          "version": "0.2.35",
-          "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.35.tgz",
-          "integrity": "sha512-IHUfxSEDS9dDGqYwIW7wTN6tn/O8E0n5PcAHz9cAaBoZw6UpG20IG/YM3NNLaGPwPqgjBAFjIURzqoQs3rrtuw=="
-        },
-        "@fortawesome/fontawesome-svg-core": {
-          "version": "1.2.35",
-          "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.35.tgz",
-          "integrity": "sha512-uLEXifXIL7hnh2sNZQrIJWNol7cTVIzwI+4qcBIq9QWaZqUblm0IDrtSqbNg+3SQf8SMGHkiSigD++rHmCHjBg==",
-          "requires": {
-            "@fortawesome/fontawesome-common-types": "^0.2.35"
-          }
-        },
-        "@fortawesome/free-solid-svg-icons": {
-          "version": "5.15.3",
-          "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.3.tgz",
-          "integrity": "sha512-XPeeu1IlGYqz4VWGRAT5ukNMd4VHUEEJ7ysZ7pSSgaEtNvSo+FLurybGJVmiqkQdK50OkSja2bfZXOeyMGRD8Q==",
-          "requires": {
-            "@fortawesome/fontawesome-common-types": "^0.2.35"
-          }
-        },
-        "@fortawesome/react-fontawesome": {
-          "version": "0.1.14",
-          "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.14.tgz",
-          "integrity": "sha512-4wqNb0gRLVaBm/h+lGe8UfPPivcbuJ6ecI4hIgW0LjI7kzpYB9FkN0L9apbVzg+lsBdcTf0AlBtODjcSX5mmKA==",
-          "requires": {
-            "prop-types": "^15.7.2"
-          }
-        },
-        "react-responsive": {
-          "version": "8.2.0",
-          "resolved": "https://registry.npmjs.org/react-responsive/-/react-responsive-8.2.0.tgz",
-          "integrity": "sha512-iagCqVrw4QSjhxKp3I/YK6+ODkWY6G+YPElvdYKiUUbywwh9Ds0M7r26Fj2/7dWFFbOpcGnJE6uE7aMck8j5Qg==",
-          "requires": {
-            "hyphenate-style-name": "^1.0.0",
-            "matchmediaquery": "^0.3.0",
-            "prop-types": "^15.6.1",
-            "shallow-equal": "^1.1.0"
-          }
-        }
-      }
-    },
-    "@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,
-      "requires": {
-        "tslib": "^2.0.1"
-      },
-      "dependencies": {
-        "tslib": {
-          "version": "2.3.0",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
-          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
-          "dev": true
-        }
-      }
-    },
-    "@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,
-      "requires": {
-        "@formatjs/ecma402-abstract": "1.4.0",
-        "tslib": "^2.0.1"
-      },
-      "dependencies": {
-        "@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,
-          "requires": {
-            "tslib": "^2.0.1"
-          }
-        },
-        "tslib": {
-          "version": "2.3.0",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
-          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
-          "dev": true
-        }
-      }
-    },
-    "@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,
-      "requires": {
-        "intl-messageformat-parser": "6.1.2",
-        "tslib": "^2.0.1",
-        "typescript": "^4.0"
-      },
-      "dependencies": {
-        "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==",
-          "dev": true,
-          "requires": {
-            "@formatjs/ecma402-abstract": "1.5.0",
-            "tslib": "^2.0.1"
-          }
-        },
-        "tslib": {
-          "version": "2.3.0",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
-          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
-          "dev": true
-        }
-      }
-    },
-    "@fortawesome/fontawesome-common-types": {
-      "version": "0.2.30",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.30.tgz",
-      "integrity": "sha512-TsRwpTuKwFNiPhk1UfKgw7zNPeV5RhNp2Uw3pws+9gDAkPGKrtjR1y2lI3SYn7+YzyfuNknflpBA1LRKjt7hMg=="
-    },
-    "@fortawesome/fontawesome-svg-core": {
-      "version": "1.2.28",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.28.tgz",
-      "integrity": "sha512-4LeaNHWvrneoU0i8b5RTOJHKx7E+y7jYejplR7uSVB34+mp3Veg7cbKk7NBCLiI4TyoWS1wh9ZdoyLJR8wSAdg==",
-      "requires": {
-        "@fortawesome/fontawesome-common-types": "^0.2.28"
-      }
-    },
-    "@fortawesome/free-brands-svg-icons": {
-      "version": "5.11.2",
-      "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.11.2.tgz",
-      "integrity": "sha512-wKK5znpHiZ2S0VgOvbeAnYuzkk3H86rxWajD9PVpfBj3s/kySEWTFKh/uLPyxiTOx8Tsd0OGN4En/s9XudVHLQ==",
-      "requires": {
-        "@fortawesome/fontawesome-common-types": "^0.2.25"
-      }
-    },
-    "@fortawesome/free-regular-svg-icons": {
-      "version": "5.11.2",
-      "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-5.11.2.tgz",
-      "integrity": "sha512-k0vbThRv9AvnXYBWi1gn1rFW4X7co/aFkbm0ZNmAR5PoWb9vY9EDDDobg8Ay4ISaXtCPypvJ0W1FWkSpLQwZ6w==",
-      "requires": {
-        "@fortawesome/fontawesome-common-types": "^0.2.25"
-      }
-    },
-    "@fortawesome/free-solid-svg-icons": {
-      "version": "5.11.2",
-      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.11.2.tgz",
-      "integrity": "sha512-zBue4i0PAZJUXOmLBBvM7L0O7wmsDC8dFv9IhpW5QL4kT9xhhVUsYg/LX1+5KaukWq4/cbDcKT+RT1aRe543sg==",
-      "requires": {
-        "@fortawesome/fontawesome-common-types": "^0.2.25"
-      }
-    },
-    "@fortawesome/react-fontawesome": {
-      "version": "0.1.9",
-      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.9.tgz",
-      "integrity": "sha512-49V3WNysLZU5fZ3sqSuys4nGRytsrxJktbv3vuaXkEoxv22C6T7TEG0TW6+nqVjMnkfCQd5xOnmJoZHMF78tOw==",
-      "requires": {
-        "prop-types": "^15.7.2"
-      }
-    },
-    "@istanbuljs/load-nyc-config": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz",
-      "integrity": "sha512-VjeHSlIzpv/NyD3N0YuHfXOPDIixcA1q2ZV98wsMqcYlPmv2n3Yb2lYP9XMElnaFVXg5A7YLTeLu6V84uQDjmQ==",
-      "dev": true,
-      "requires": {
-        "camelcase": "^5.3.1",
-        "find-up": "^4.1.0",
-        "get-package-type": "^0.1.0",
-        "js-yaml": "^3.13.1",
-        "resolve-from": "^5.0.0"
-      },
-      "dependencies": {
-        "camelcase": {
-          "version": "5.3.1",
-          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
-          "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
-          "dev": true
-        },
-        "resolve-from": {
-          "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
-          "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
-          "dev": true
-        }
-      }
-    },
-    "@istanbuljs/schema": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/@istanbuljs/schema/-/schema-0.1.3.tgz",
-      "integrity": "sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==",
-      "dev": true
-    },
-    "@jest/console": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/@jest/console/-/console-26.6.2.tgz",
-      "integrity": "sha512-IY1R2i2aLsLr7Id3S6p2BA82GNWryt4oSvEXLAKc+L2zdi89dSkE8xC1C+0kpATG4JhBJREnQOH7/zmccM2B0g==",
-      "dev": true,
-      "requires": {
-        "@jest/types": "^26.6.2",
-        "@types/node": "*",
-        "chalk": "^4.0.0",
-        "jest-message-util": "^26.6.2",
-        "jest-util": "^26.6.2",
-        "slash": "^3.0.0"
-      },
-      "dependencies": {
-        "@jest/types": {
-          "version": "26.6.2",
-          "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
-          "integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
-          "dev": true,
-          "requires": {
-            "@types/istanbul-lib-coverage": "^2.0.0",
-            "@types/istanbul-reports": "^3.0.0",
-            "@types/node": "*",
-            "@types/yargs": "^15.0.0",
-            "chalk": "^4.0.0"
-          }
-        },
-        "@types/istanbul-reports": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz",
-          "integrity": "sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==",
-          "dev": true,
-          "requires": {
-            "@types/istanbul-lib-report": "*"
-          }
-        },
-        "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,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
-          "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "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,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "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
-        },
-        "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
-        },
-        "slash": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
-          "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
-          "dev": true
-        },
-        "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,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
-    "@jest/core": {
-      "version": "26.6.3",
-      "resolved": "https://registry.npmjs.org/@jest/core/-/core-26.6.3.tgz",
-      "integrity": "sha512-xvV1kKbhfUqFVuZ8Cyo+JPpipAHHAV3kcDBftiduK8EICXmTFddryy3P7NfZt8Pv37rA9nEJBKCCkglCPt/Xjw==",
-      "dev": true,
-      "requires": {
-        "@jest/console": "^26.6.2",
-        "@jest/reporters": "^26.6.2",
-        "@jest/test-result": "^26.6.2",
-        "@jest/transform": "^26.6.2",
-        "@jest/types": "^26.6.2",
-        "@types/node": "*",
-        "ansi-escapes": "^4.2.1",
-        "chalk": "^4.0.0",
-        "exit": "^0.1.2",
-        "graceful-fs": "^4.2.4",
-        "jest-changed-files": "^26.6.2",
-        "jest-config": "^26.6.3",
-        "jest-haste-map": "^26.6.2",
-        "jest-message-util": "^26.6.2",
-        "jest-regex-util": "^26.0.0",
-        "jest-resolve": "^26.6.2",
-        "jest-resolve-dependencies": "^26.6.3",
-        "jest-runner": "^26.6.3",
-        "jest-runtime": "^26.6.3",
-        "jest-snapshot": "^26.6.2",
-        "jest-util": "^26.6.2",
-        "jest-validate": "^26.6.2",
-        "jest-watcher": "^26.6.2",
-        "micromatch": "^4.0.2",
-        "p-each-series": "^2.1.0",
-        "rimraf": "^3.0.0",
-        "slash": "^3.0.0",
-        "strip-ansi": "^6.0.0"
-      },
-      "dependencies": {
-        "@jest/types": {
-          "version": "26.6.2",
-          "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
-          "integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
-          "dev": true,
-          "requires": {
-            "@types/istanbul-lib-coverage": "^2.0.0",
-            "@types/istanbul-reports": "^3.0.0",
-            "@types/node": "*",
-            "@types/yargs": "^15.0.0",
-            "chalk": "^4.0.0"
-          }
-        },
-        "@types/istanbul-reports": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz",
-          "integrity": "sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==",
-          "dev": true,
-          "requires": {
-            "@types/istanbul-lib-report": "*"
-          }
-        },
-        "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,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "braces": {
-          "version": "3.0.2",
-          "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-          "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-          "dev": true,
-          "requires": {
-            "fill-range": "^7.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
-          "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "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,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "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
-        },
-        "fill-range": {
-          "version": "7.0.1",
-          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-          "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-          "dev": true,
-          "requires": {
-            "to-regex-range": "^5.0.1"
-          }
-        },
-        "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
-        },
-        "is-number": {
-          "version": "7.0.0",
-          "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-          "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-          "dev": true
-        },
-        "micromatch": {
-          "version": "4.0.4",
-          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz",
-          "integrity": "sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==",
-          "dev": true,
-          "requires": {
-            "braces": "^3.0.1",
-            "picomatch": "^2.2.3"
-          }
-        },
-        "rimraf": {
-          "version": "3.0.2",
-          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
-          "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
-          "dev": true,
-          "requires": {
-            "glob": "^7.1.3"
-          }
-        },
-        "slash": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
-          "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
-          "dev": true
-        },
-        "strip-ansi": {
-          "version": "6.0.0",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
-          "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
-          "dev": true,
-          "requires": {
-            "ansi-regex": "^5.0.0"
-          }
-        },
-        "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,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        },
-        "to-regex-range": {
-          "version": "5.0.1",
-          "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-          "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-          "dev": true,
-          "requires": {
-            "is-number": "^7.0.0"
-          }
-        }
-      }
-    },
-    "@jest/environment": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/@jest/environment/-/environment-26.6.2.tgz",
-      "integrity": "sha512-nFy+fHl28zUrRsCeMB61VDThV1pVTtlEokBRgqPrcT1JNq4yRNIyTHfyht6PqtUvY9IsuLGTrbG8kPXjSZIZwA==",
-      "dev": true,
-      "requires": {
-        "@jest/fake-timers": "^26.6.2",
-        "@jest/types": "^26.6.2",
-        "@types/node": "*",
-        "jest-mock": "^26.6.2"
-      },
-      "dependencies": {
-        "@jest/types": {
-          "version": "26.6.2",
-          "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
-          "integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
-          "dev": true,
-          "requires": {
-            "@types/istanbul-lib-coverage": "^2.0.0",
-            "@types/istanbul-reports": "^3.0.0",
-            "@types/node": "*",
-            "@types/yargs": "^15.0.0",
-            "chalk": "^4.0.0"
-          }
-        },
-        "@types/istanbul-reports": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz",
-          "integrity": "sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==",
-          "dev": true,
-          "requires": {
-            "@types/istanbul-lib-report": "*"
-          }
-        },
-        "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,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
-          "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "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,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "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
-        },
-        "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
-        },
-        "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,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
-    "@jest/fake-timers": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/@jest/fake-timers/-/fake-timers-26.6.2.tgz",
-      "integrity": "sha512-14Uleatt7jdzefLPYM3KLcnUl1ZNikaKq34enpb5XG9i81JpppDb5muZvonvKyrl7ftEHkKS5L5/eB/kxJ+bvA==",
-      "dev": true,
-      "requires": {
-        "@jest/types": "^26.6.2",
-        "@sinonjs/fake-timers": "^6.0.1",
-        "@types/node": "*",
-        "jest-message-util": "^26.6.2",
-        "jest-mock": "^26.6.2",
-        "jest-util": "^26.6.2"
-      },
-      "dependencies": {
-        "@jest/types": {
-          "version": "26.6.2",
-          "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
-          "integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
-          "dev": true,
-          "requires": {
-            "@types/istanbul-lib-coverage": "^2.0.0",
-            "@types/istanbul-reports": "^3.0.0",
-            "@types/node": "*",
-            "@types/yargs": "^15.0.0",
-            "chalk": "^4.0.0"
-          }
-        },
-        "@types/istanbul-reports": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz",
-          "integrity": "sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==",
-          "dev": true,
-          "requires": {
-            "@types/istanbul-lib-report": "*"
-          }
-        },
-        "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,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
-          "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "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,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "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
-        },
-        "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
-        },
-        "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,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
-    "@jest/globals": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/@jest/globals/-/globals-26.6.2.tgz",
-      "integrity": "sha512-85Ltnm7HlB/KesBUuALwQ68YTU72w9H2xW9FjZ1eL1U3lhtefjjl5c2MiUbpXt/i6LaPRvoOFJ22yCBSfQ0JIA==",
-      "dev": true,
-      "requires": {
-        "@jest/environment": "^26.6.2",
-        "@jest/types": "^26.6.2",
-        "expect": "^26.6.2"
-      },
-      "dependencies": {
-        "@jest/types": {
-          "version": "26.6.2",
-          "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
-          "integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
-          "dev": true,
-          "requires": {
-            "@types/istanbul-lib-coverage": "^2.0.0",
-            "@types/istanbul-reports": "^3.0.0",
-            "@types/node": "*",
-            "@types/yargs": "^15.0.0",
-            "chalk": "^4.0.0"
-          }
-        },
-        "@types/istanbul-reports": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz",
-          "integrity": "sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==",
-          "dev": true,
-          "requires": {
-            "@types/istanbul-lib-report": "*"
-          }
-        },
-        "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,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
-          "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "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,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "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
-        },
-        "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
-        },
-        "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,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
-    "@jest/reporters": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/@jest/reporters/-/reporters-26.6.2.tgz",
-      "integrity": "sha512-h2bW53APG4HvkOnVMo8q3QXa6pcaNt1HkwVsOPMBV6LD/q9oSpxNSYZQYkAnjdMjrJ86UuYeLo+aEZClV6opnw==",
-      "dev": true,
-      "requires": {
-        "@bcoe/v8-coverage": "^0.2.3",
-        "@jest/console": "^26.6.2",
-        "@jest/test-result": "^26.6.2",
-        "@jest/transform": "^26.6.2",
-        "@jest/types": "^26.6.2",
-        "chalk": "^4.0.0",
-        "collect-v8-coverage": "^1.0.0",
-        "exit": "^0.1.2",
-        "glob": "^7.1.2",
-        "graceful-fs": "^4.2.4",
-        "istanbul-lib-coverage": "^3.0.0",
-        "istanbul-lib-instrument": "^4.0.3",
-        "istanbul-lib-report": "^3.0.0",
-        "istanbul-lib-source-maps": "^4.0.0",
-        "istanbul-reports": "^3.0.2",
-        "jest-haste-map": "^26.6.2",
-        "jest-resolve": "^26.6.2",
-        "jest-util": "^26.6.2",
-        "jest-worker": "^26.6.2",
-        "node-notifier": "^8.0.0",
-        "slash": "^3.0.0",
-        "source-map": "^0.6.0",
-        "string-length": "^4.0.1",
-        "terminal-link": "^2.0.0",
-        "v8-to-istanbul": "^7.0.0"
-      },
-      "dependencies": {
-        "@jest/types": {
-          "version": "26.6.2",
-          "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
-          "integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
-          "dev": true,
-          "requires": {
-            "@types/istanbul-lib-coverage": "^2.0.0",
-            "@types/istanbul-reports": "^3.0.0",
-            "@types/node": "*",
-            "@types/yargs": "^15.0.0",
-            "chalk": "^4.0.0"
-          }
-        },
-        "@types/istanbul-reports": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz",
-          "integrity": "sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==",
-          "dev": true,
-          "requires": {
-            "@types/istanbul-lib-report": "*"
-          }
-        },
-        "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,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
-          "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "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,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "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
-        },
-        "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
-        },
-        "slash": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
-          "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
-          "dev": true
-        },
-        "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,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
-    "@jest/source-map": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/@jest/source-map/-/source-map-26.6.2.tgz",
-      "integrity": "sha512-YwYcCwAnNmOVsZ8mr3GfnzdXDAl4LaenZP5z+G0c8bzC9/dugL8zRmxZzdoTl4IaS3CryS1uWnROLPFmb6lVvA==",
-      "dev": true,
-      "requires": {
-        "callsites": "^3.0.0",
-        "graceful-fs": "^4.2.4",
-        "source-map": "^0.6.0"
-      }
-    },
-    "@jest/test-result": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/@jest/test-result/-/test-result-26.6.2.tgz",
-      "integrity": "sha512-5O7H5c/7YlojphYNrK02LlDIV2GNPYisKwHm2QTKjNZeEzezCbwYs9swJySv2UfPMyZ0VdsmMv7jIlD/IKYQpQ==",
-      "dev": true,
-      "requires": {
-        "@jest/console": "^26.6.2",
-        "@jest/types": "^26.6.2",
-        "@types/istanbul-lib-coverage": "^2.0.0",
-        "collect-v8-coverage": "^1.0.0"
-      },
-      "dependencies": {
-        "@jest/types": {
-          "version": "26.6.2",
-          "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
-          "integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
-          "dev": true,
-          "requires": {
-            "@types/istanbul-lib-coverage": "^2.0.0",
-            "@types/istanbul-reports": "^3.0.0",
-            "@types/node": "*",
-            "@types/yargs": "^15.0.0",
-            "chalk": "^4.0.0"
-          }
-        },
-        "@types/istanbul-reports": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz",
-          "integrity": "sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==",
-          "dev": true,
-          "requires": {
-            "@types/istanbul-lib-report": "*"
-          }
-        },
-        "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,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
-          "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "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,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "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
-        },
-        "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
-        },
-        "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,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
-    "@jest/test-sequencer": {
-      "version": "26.6.3",
-      "resolved": "https://registry.npmjs.org/@jest/test-sequencer/-/test-sequencer-26.6.3.tgz",
-      "integrity": "sha512-YHlVIjP5nfEyjlrSr8t/YdNfU/1XEt7c5b4OxcXCjyRhjzLYu/rO69/WHPuYcbCWkz8kAeZVZp2N2+IOLLEPGw==",
-      "dev": true,
-      "requires": {
-        "@jest/test-result": "^26.6.2",
-        "graceful-fs": "^4.2.4",
-        "jest-haste-map": "^26.6.2",
-        "jest-runner": "^26.6.3",
-        "jest-runtime": "^26.6.3"
-      }
-    },
-    "@jest/transform": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/@jest/transform/-/transform-26.6.2.tgz",
-      "integrity": "sha512-E9JjhUgNzvuQ+vVAL21vlyfy12gP0GhazGgJC4h6qUt1jSdUXGWJ1wfu/X7Sd8etSgxV4ovT1pb9v5D6QW4XgA==",
-      "dev": true,
-      "requires": {
-        "@babel/core": "^7.1.0",
-        "@jest/types": "^26.6.2",
-        "babel-plugin-istanbul": "^6.0.0",
-        "chalk": "^4.0.0",
-        "convert-source-map": "^1.4.0",
-        "fast-json-stable-stringify": "^2.0.0",
-        "graceful-fs": "^4.2.4",
-        "jest-haste-map": "^26.6.2",
-        "jest-regex-util": "^26.0.0",
-        "jest-util": "^26.6.2",
-        "micromatch": "^4.0.2",
-        "pirates": "^4.0.1",
-        "slash": "^3.0.0",
-        "source-map": "^0.6.1",
-        "write-file-atomic": "^3.0.0"
-      },
-      "dependencies": {
-        "@jest/types": {
-          "version": "26.6.2",
-          "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
-          "integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
-          "dev": true,
-          "requires": {
-            "@types/istanbul-lib-coverage": "^2.0.0",
-            "@types/istanbul-reports": "^3.0.0",
-            "@types/node": "*",
-            "@types/yargs": "^15.0.0",
-            "chalk": "^4.0.0"
-          }
-        },
-        "@types/istanbul-reports": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz",
-          "integrity": "sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==",
-          "dev": true,
-          "requires": {
-            "@types/istanbul-lib-report": "*"
-          }
-        },
-        "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,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "braces": {
-          "version": "3.0.2",
-          "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-          "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-          "dev": true,
-          "requires": {
-            "fill-range": "^7.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
-          "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "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,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "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
-        },
-        "fill-range": {
-          "version": "7.0.1",
-          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-          "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-          "dev": true,
-          "requires": {
-            "to-regex-range": "^5.0.1"
-          }
-        },
-        "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
-        },
-        "is-number": {
-          "version": "7.0.0",
-          "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-          "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-          "dev": true
-        },
-        "micromatch": {
-          "version": "4.0.4",
-          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz",
-          "integrity": "sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==",
-          "dev": true,
-          "requires": {
-            "braces": "^3.0.1",
-            "picomatch": "^2.2.3"
-          }
-        },
-        "slash": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
-          "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
-          "dev": true
-        },
-        "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,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        },
-        "to-regex-range": {
-          "version": "5.0.1",
-          "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-          "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-          "dev": true,
-          "requires": {
-            "is-number": "^7.0.0"
-          }
-        }
-      }
-    },
-    "@jest/types": {
-      "version": "25.5.0",
-      "resolved": "https://registry.npmjs.org/@jest/types/-/types-25.5.0.tgz",
-      "integrity": "sha512-OXD0RgQ86Tu3MazKo8bnrkDRaDXXMGUqd+kTtLtK1Zb7CRzQcaSRPPPV37SvYTdevXEBVxe0HXylEjs8ibkmCw==",
-      "dev": true,
-      "requires": {
-        "@types/istanbul-lib-coverage": "^2.0.0",
-        "@types/istanbul-reports": "^1.1.1",
-        "@types/yargs": "^15.0.0",
-        "chalk": "^3.0.0"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "4.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
-          "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
-          "dev": true,
-          "requires": {
-            "@types/color-name": "^1.1.1",
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
-          "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "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,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "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
-        },
-        "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
-        },
-        "supports-color": {
-          "version": "7.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz",
-          "integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
-    "@newrelic/publish-sourcemap": {
-      "version": "4.4.2",
-      "resolved": "https://registry.npmjs.org/@newrelic/publish-sourcemap/-/publish-sourcemap-4.4.2.tgz",
-      "integrity": "sha512-okPE9K1A5hOHgFm/gfBwxPM8MfBykxbusPEfI20CzS/MboF+4eCx+PS/gfBiDaVf/OrsHPCGTwADkXPPk48a/Q==",
-      "dev": true,
-      "requires": {
-        "superagent": "^3.4.1",
-        "yargs": "^16.0.3"
-      },
-      "dependencies": {
-        "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,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "cliui": {
-          "version": "7.0.4",
-          "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
-          "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==",
-          "dev": true,
-          "requires": {
-            "string-width": "^4.2.0",
-            "strip-ansi": "^6.0.0",
-            "wrap-ansi": "^7.0.0"
-          }
-        },
-        "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,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "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
-        },
-        "strip-ansi": {
-          "version": "6.0.0",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
-          "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
-          "dev": true,
-          "requires": {
-            "ansi-regex": "^5.0.0"
-          }
-        },
-        "wrap-ansi": {
-          "version": "7.0.0",
-          "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
-          "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^4.0.0",
-            "string-width": "^4.1.0",
-            "strip-ansi": "^6.0.0"
-          }
-        },
-        "y18n": {
-          "version": "5.0.8",
-          "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
-          "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
-          "dev": true
-        },
-        "yargs": {
-          "version": "16.2.0",
-          "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
-          "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
-          "dev": true,
-          "requires": {
-            "cliui": "^7.0.2",
-            "escalade": "^3.1.1",
-            "get-caller-file": "^2.0.5",
-            "require-directory": "^2.1.1",
-            "string-width": "^4.2.0",
-            "y18n": "^5.0.5",
-            "yargs-parser": "^20.2.2"
-          }
-        },
-        "yargs-parser": {
-          "version": "20.2.9",
-          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz",
-          "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==",
-          "dev": true
-        }
-      }
-    },
-    "@nodelib/fs.scandir": {
-      "version": "2.1.5",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
-      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
-      "dev": true,
-      "requires": {
-        "@nodelib/fs.stat": "2.0.5",
-        "run-parallel": "^1.1.9"
-      }
-    },
-    "@nodelib/fs.stat": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
-      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
-      "dev": true
-    },
-    "@nodelib/fs.walk": {
-      "version": "1.2.7",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.7.tgz",
-      "integrity": "sha512-BTIhocbPBSrRmHxOAJFtR18oLhxTtAFDAvL8hY1S3iU8k+E60W/YFs4jrixGzQjMpF4qPXxIQHcjVD9dz1C2QA==",
-      "dev": true,
-      "requires": {
-        "@nodelib/fs.scandir": "2.1.5",
-        "fastq": "^1.6.0"
-      }
-    },
-    "@popperjs/core": {
-      "version": "2.9.2",
-      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.9.2.tgz",
-      "integrity": "sha512-VZMYa7+fXHdwIq1TDhSXoVmSPEGM/aa+6Aiq3nVVJ9bXr24zScr+NlKFKC3iPljA7ho/GAZr+d2jOf5GIRC30Q=="
-    },
-    "@reduxjs/toolkit": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.5.0.tgz",
-      "integrity": "sha512-E/FUraRx+8guw9Hlg/Ja8jI/hwCrmIKed8Annt9YsZw3BQp+F24t5I5b2OWR6pkEHY4hn1BgP08FrTZFRKsdaQ==",
-      "requires": {
-        "immer": "^8.0.0",
-        "redux": "^4.0.0",
-        "redux-thunk": "^2.3.0",
-        "reselect": "^4.0.0"
-      },
-      "dependencies": {
-        "immer": {
-          "version": "8.0.0",
-          "resolved": "https://registry.npmjs.org/immer/-/immer-8.0.0.tgz",
-          "integrity": "sha512-jm87NNBAIG4fHwouilCHIecFXp5rMGkiFrAuhVO685UnMAlOneEAnOyzPt8OnP47TC11q/E7vpzZe0WvwepFTg=="
-        }
-      }
-    },
-    "@restart/context": {
-      "version": "2.1.4",
-      "resolved": "https://registry.npmjs.org/@restart/context/-/context-2.1.4.tgz",
-      "integrity": "sha512-INJYZQJP7g+IoDUh/475NlGiTeMfwTXUEr3tmRneckHIxNolGOW9CTq83S8cxq0CgJwwcMzMJFchxvlwe7Rk8Q=="
-    },
-    "@restart/hooks": {
-      "version": "0.3.27",
-      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.3.27.tgz",
-      "integrity": "sha512-s984xV/EapUIfkjlf8wz9weP2O9TNKR96C68FfMEy2bE69+H4cNv3RD4Mf97lW7Htt7PjZrYTjSC8f3SB9VCXw==",
-      "requires": {
-        "dequal": "^2.0.2"
-      }
-    },
-    "@sindresorhus/is": {
-      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.7.0.tgz",
-      "integrity": "sha512-ONhaKPIufzzrlNbqtWFFd+jlnemX6lJAgq9ZeiZtS7I1PIf/la7CW4m83rTXRnVnsMbW2k56pGYu7AUFJD9Pow==",
-      "dev": true,
-      "optional": true
-    },
-    "@sinonjs/commons": {
-      "version": "1.8.3",
-      "resolved": "https://registry.npmjs.org/@sinonjs/commons/-/commons-1.8.3.tgz",
-      "integrity": "sha512-xkNcLAn/wZaX14RPlwizcKicDk9G3F8m2nU3L7Ukm5zBgTwiT0wsoFAHx9Jq56fJA1z/7uKGtCRu16sOUCLIHQ==",
-      "dev": true,
-      "requires": {
-        "type-detect": "4.0.8"
-      }
-    },
-    "@sinonjs/fake-timers": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/@sinonjs/fake-timers/-/fake-timers-6.0.1.tgz",
-      "integrity": "sha512-MZPUxrmFubI36XS1DI3qmI0YdN1gks62JtFZvxR67ljjSNCeK6U08Zx4msEWOXuofgqUt6zPHSi1H9fbjR/NRA==",
-      "dev": true,
-      "requires": {
-        "@sinonjs/commons": "^1.7.0"
-      }
-    },
-    "@svgr/babel-plugin-add-jsx-attribute": {
-      "version": "5.4.0",
-      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-5.4.0.tgz",
-      "integrity": "sha512-ZFf2gs/8/6B8PnSofI0inYXr2SDNTDScPXhN7k5EqD4aZ3gi6u+rbmZHVB8IM3wDyx8ntKACZbtXSm7oZGRqVg==",
-      "dev": true
-    },
-    "@svgr/babel-plugin-remove-jsx-attribute": {
-      "version": "5.4.0",
-      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-5.4.0.tgz",
-      "integrity": "sha512-yaS4o2PgUtwLFGTKbsiAy6D0o3ugcUhWK0Z45umJ66EPWunAz9fuFw2gJuje6wqQvQWOTJvIahUwndOXb7QCPg==",
-      "dev": true
-    },
-    "@svgr/babel-plugin-remove-jsx-empty-expression": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-5.0.1.tgz",
-      "integrity": "sha512-LA72+88A11ND/yFIMzyuLRSMJ+tRKeYKeQ+mR3DcAZ5I4h5CPWN9AHyUzJbWSYp/u2u0xhmgOe0+E41+GjEueA==",
-      "dev": true
-    },
-    "@svgr/babel-plugin-replace-jsx-attribute-value": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-5.0.1.tgz",
-      "integrity": "sha512-PoiE6ZD2Eiy5mK+fjHqwGOS+IXX0wq/YDtNyIgOrc6ejFnxN4b13pRpiIPbtPwHEc+NT2KCjteAcq33/F1Y9KQ==",
-      "dev": true
-    },
-    "@svgr/babel-plugin-svg-dynamic-title": {
-      "version": "5.4.0",
-      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-5.4.0.tgz",
-      "integrity": "sha512-zSOZH8PdZOpuG1ZVx/cLVePB2ibo3WPpqo7gFIjLV9a0QsuQAzJiwwqmuEdTaW2pegyBE17Uu15mOgOcgabQZg==",
-      "dev": true
-    },
-    "@svgr/babel-plugin-svg-em-dimensions": {
-      "version": "5.4.0",
-      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-5.4.0.tgz",
-      "integrity": "sha512-cPzDbDA5oT/sPXDCUYoVXEmm3VIoAWAPT6mSPTJNbQaBNUuEKVKyGH93oDY4e42PYHRW67N5alJx/eEol20abw==",
-      "dev": true
-    },
-    "@svgr/babel-plugin-transform-react-native-svg": {
-      "version": "5.4.0",
-      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-5.4.0.tgz",
-      "integrity": "sha512-3eYP/SaopZ41GHwXma7Rmxcv9uRslRDTY1estspeB1w1ueZWd/tPlMfEOoccYpEMZU3jD4OU7YitnXcF5hLW2Q==",
-      "dev": true
-    },
-    "@svgr/babel-plugin-transform-svg-component": {
-      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-5.5.0.tgz",
-      "integrity": "sha512-q4jSH1UUvbrsOtlo/tKcgSeiCHRSBdXoIoqX1pgcKK/aU3JD27wmMKwGtpB8qRYUYoyXvfGxUVKchLuR5pB3rQ==",
-      "dev": true
-    },
-    "@svgr/babel-preset": {
-      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/@svgr/babel-preset/-/babel-preset-5.5.0.tgz",
-      "integrity": "sha512-4FiXBjvQ+z2j7yASeGPEi8VD/5rrGQk4Xrq3EdJmoZgz/tpqChpo5hgXDvmEauwtvOc52q8ghhZK4Oy7qph4ig==",
-      "dev": true,
-      "requires": {
-        "@svgr/babel-plugin-add-jsx-attribute": "^5.4.0",
-        "@svgr/babel-plugin-remove-jsx-attribute": "^5.4.0",
-        "@svgr/babel-plugin-remove-jsx-empty-expression": "^5.0.1",
-        "@svgr/babel-plugin-replace-jsx-attribute-value": "^5.0.1",
-        "@svgr/babel-plugin-svg-dynamic-title": "^5.4.0",
-        "@svgr/babel-plugin-svg-em-dimensions": "^5.4.0",
-        "@svgr/babel-plugin-transform-react-native-svg": "^5.4.0",
-        "@svgr/babel-plugin-transform-svg-component": "^5.5.0"
-      }
-    },
-    "@svgr/core": {
-      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/@svgr/core/-/core-5.5.0.tgz",
-      "integrity": "sha512-q52VOcsJPvV3jO1wkPtzTuKlvX7Y3xIcWRpCMtBF3MrteZJtBfQw/+u0B1BHy5ColpQc1/YVTrPEtSYIMNZlrQ==",
-      "dev": true,
-      "requires": {
-        "@svgr/plugin-jsx": "^5.5.0",
-        "camelcase": "^6.2.0",
-        "cosmiconfig": "^7.0.0"
-      }
-    },
-    "@svgr/hast-util-to-babel-ast": {
-      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-5.5.0.tgz",
-      "integrity": "sha512-cAaR/CAiZRB8GP32N+1jocovUtvlj0+e65TB50/6Lcime+EA49m/8l+P2ko+XPJ4dw3xaPS3jOL4F2X4KWxoeQ==",
-      "dev": true,
-      "requires": {
-        "@babel/types": "^7.12.6"
-      },
-      "dependencies": {
-        "@babel/helper-validator-identifier": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz",
-          "integrity": "sha512-5lsetuxCLilmVGyiLEfoHBRX8UCFD+1m2x3Rj97WrW3V7H3u4RWRXA4evMjImCsin2J2YT0QaVDGf+z8ondbAg==",
-          "dev": true
-        },
-        "@babel/types": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.5.tgz",
-          "integrity": "sha512-M/NzBpEL95I5Hh4dwhin5JlE7EzO5PHMAuzjxss3tiOBD46KfQvVedN/3jEPZvdRvtsK2222XfdHogNIttFgcg==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.14.5",
-            "to-fast-properties": "^2.0.0"
-          }
-        }
-      }
-    },
-    "@svgr/plugin-jsx": {
-      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/@svgr/plugin-jsx/-/plugin-jsx-5.5.0.tgz",
-      "integrity": "sha512-V/wVh33j12hGh05IDg8GpIUXbjAPnTdPTKuP4VNLggnwaHMPNQNae2pRnyTAILWCQdz5GyMqtO488g7CKM8CBA==",
-      "dev": true,
-      "requires": {
-        "@babel/core": "^7.12.3",
-        "@svgr/babel-preset": "^5.5.0",
-        "@svgr/hast-util-to-babel-ast": "^5.5.0",
-        "svg-parser": "^2.0.2"
-      },
-      "dependencies": {
-        "@babel/code-frame": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.14.5.tgz",
-          "integrity": "sha512-9pzDqyc6OLDaqe+zbACgFkb6fKMNG6CObKpnYXChRsvYGyEdc7CA2BaqeOM+vOtCS5ndmJicPJhKAwYRI6UfFw==",
-          "dev": true,
-          "requires": {
-            "@babel/highlight": "^7.14.5"
-          }
-        },
-        "@babel/core": {
-          "version": "7.14.6",
-          "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.14.6.tgz",
-          "integrity": "sha512-gJnOEWSqTk96qG5BoIrl5bVtc23DCycmIePPYnamY9RboYdI4nFy5vAQMSl81O5K/W0sLDWfGysnOECC+KUUCA==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.14.5",
-            "@babel/generator": "^7.14.5",
-            "@babel/helper-compilation-targets": "^7.14.5",
-            "@babel/helper-module-transforms": "^7.14.5",
-            "@babel/helpers": "^7.14.6",
-            "@babel/parser": "^7.14.6",
-            "@babel/template": "^7.14.5",
-            "@babel/traverse": "^7.14.5",
-            "@babel/types": "^7.14.5",
-            "convert-source-map": "^1.7.0",
-            "debug": "^4.1.0",
-            "gensync": "^1.0.0-beta.2",
-            "json5": "^2.1.2",
-            "semver": "^6.3.0",
-            "source-map": "^0.5.0"
-          }
-        },
-        "@babel/generator": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.14.5.tgz",
-          "integrity": "sha512-y3rlP+/G25OIX3mYKKIOlQRcqj7YgrvHxOLbVmyLJ9bPmi5ttvUmpydVjcFjZphOktWuA7ovbx91ECloWTfjIA==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.14.5",
-            "jsesc": "^2.5.1",
-            "source-map": "^0.5.0"
-          }
-        },
-        "@babel/helper-function-name": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.14.5.tgz",
-          "integrity": "sha512-Gjna0AsXWfFvrAuX+VKcN/aNNWonizBj39yGwUzVDVTlMYJMK2Wp6xdpy72mfArFq5uK+NOuexfzZlzI1z9+AQ==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-get-function-arity": "^7.14.5",
-            "@babel/template": "^7.14.5",
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/helper-get-function-arity": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.14.5.tgz",
-          "integrity": "sha512-I1Db4Shst5lewOM4V+ZKJzQ0JGGaZ6VY1jYvMghRjqs6DWgxLCIyFt30GlnKkfUeFLpJt2vzbMVEXVSXlIFYUg==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/helper-member-expression-to-functions": {
-          "version": "7.14.7",
-          "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.14.7.tgz",
-          "integrity": "sha512-TMUt4xKxJn6ccjcOW7c4hlwyJArizskAhoSTOCkA0uZ+KghIaci0Qg9R043kUMWI9mtQfgny+NQ5QATnZ+paaA==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/helper-module-imports": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.14.5.tgz",
-          "integrity": "sha512-SwrNHu5QWS84XlHwGYPDtCxcA0hrSlL2yhWYLgeOc0w7ccOl2qv4s/nARI0aYZW+bSwAL5CukeXA47B/1NKcnQ==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/helper-module-transforms": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.14.5.tgz",
-          "integrity": "sha512-iXpX4KW8LVODuAieD7MzhNjmM6dzYY5tfRqT+R9HDXWl0jPn/djKmA+G9s/2C2T9zggw5tK1QNqZ70USfedOwA==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-module-imports": "^7.14.5",
-            "@babel/helper-replace-supers": "^7.14.5",
-            "@babel/helper-simple-access": "^7.14.5",
-            "@babel/helper-split-export-declaration": "^7.14.5",
-            "@babel/helper-validator-identifier": "^7.14.5",
-            "@babel/template": "^7.14.5",
-            "@babel/traverse": "^7.14.5",
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/helper-optimise-call-expression": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.14.5.tgz",
-          "integrity": "sha512-IqiLIrODUOdnPU9/F8ib1Fx2ohlgDhxnIDU7OEVi+kAbEZcyiF7BLU8W6PfvPi9LzztjS7kcbzbmL7oG8kD6VA==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/helper-replace-supers": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.14.5.tgz",
-          "integrity": "sha512-3i1Qe9/8x/hCHINujn+iuHy+mMRLoc77b2nI9TB0zjH1hvn9qGlXjWlggdwUcju36PkPCy/lpM7LLUdcTyH4Ow==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-member-expression-to-functions": "^7.14.5",
-            "@babel/helper-optimise-call-expression": "^7.14.5",
-            "@babel/traverse": "^7.14.5",
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/helper-simple-access": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.14.5.tgz",
-          "integrity": "sha512-nfBN9xvmCt6nrMZjfhkl7i0oTV3yxR4/FztsbOASyTvVcoYd0TRHh7eMLdlEcCqobydC0LAF3LtC92Iwxo0wyw==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/helper-split-export-declaration": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.14.5.tgz",
-          "integrity": "sha512-hprxVPu6e5Kdp2puZUmvOGjaLv9TCe58E/Fl6hRq4YiVQxIcNvuq6uTM2r1mT/oPskuS9CgR+I94sqAYv0NGKA==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/helper-validator-identifier": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz",
-          "integrity": "sha512-5lsetuxCLilmVGyiLEfoHBRX8UCFD+1m2x3Rj97WrW3V7H3u4RWRXA4evMjImCsin2J2YT0QaVDGf+z8ondbAg==",
-          "dev": true
-        },
-        "@babel/helpers": {
-          "version": "7.14.6",
-          "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.14.6.tgz",
-          "integrity": "sha512-yesp1ENQBiLI+iYHSJdoZKUtRpfTlL1grDIX9NRlAVppljLw/4tTyYupIB7uIYmC3stW/imAv8EqaKaS/ibmeA==",
-          "dev": true,
-          "requires": {
-            "@babel/template": "^7.14.5",
-            "@babel/traverse": "^7.14.5",
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/highlight": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.14.5.tgz",
-          "integrity": "sha512-qf9u2WFWVV0MppaL877j2dBtQIDgmidgjGk5VIMw3OadXvYaXn66U1BFlH2t4+t3i+8PhedppRv+i40ABzd+gg==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.14.5",
-            "chalk": "^2.0.0",
-            "js-tokens": "^4.0.0"
-          }
-        },
-        "@babel/parser": {
-          "version": "7.14.7",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.14.7.tgz",
-          "integrity": "sha512-X67Z5y+VBJuHB/RjwECp8kSl5uYi0BvRbNeWqkaJCVh+LiTPl19WBUfG627psSgp9rSf6ojuXghQM3ha6qHHdA==",
-          "dev": true
-        },
-        "@babel/template": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.14.5.tgz",
-          "integrity": "sha512-6Z3Po85sfxRGachLULUhOmvAaOo7xCvqGQtxINai2mEGPFm6pQ4z5QInFnUrRpfoSV60BnjyF5F3c+15fxFV1g==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.14.5",
-            "@babel/parser": "^7.14.5",
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/traverse": {
-          "version": "7.14.7",
-          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.14.7.tgz",
-          "integrity": "sha512-9vDr5NzHu27wgwejuKL7kIOm4bwEtaPQ4Z6cpCmjSuaRqpH/7xc4qcGEscwMqlkwgcXl6MvqoAjZkQ24uSdIZQ==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.14.5",
-            "@babel/generator": "^7.14.5",
-            "@babel/helper-function-name": "^7.14.5",
-            "@babel/helper-hoist-variables": "^7.14.5",
-            "@babel/helper-split-export-declaration": "^7.14.5",
-            "@babel/parser": "^7.14.7",
-            "@babel/types": "^7.14.5",
-            "debug": "^4.1.0",
-            "globals": "^11.1.0"
-          }
-        },
-        "@babel/types": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.5.tgz",
-          "integrity": "sha512-M/NzBpEL95I5Hh4dwhin5JlE7EzO5PHMAuzjxss3tiOBD46KfQvVedN/3jEPZvdRvtsK2222XfdHogNIttFgcg==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.14.5",
-            "to-fast-properties": "^2.0.0"
-          }
-        },
-        "gensync": {
-          "version": "1.0.0-beta.2",
-          "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
-          "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
-          "dev": true
-        },
-        "semver": {
-          "version": "6.3.0",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-          "dev": true
-        },
-        "source-map": {
-          "version": "0.5.7",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
-          "dev": true
-        }
-      }
-    },
-    "@svgr/plugin-svgo": {
-      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/@svgr/plugin-svgo/-/plugin-svgo-5.5.0.tgz",
-      "integrity": "sha512-r5swKk46GuQl4RrVejVwpeeJaydoxkdwkM1mBKOgJLBUJPGaLci6ylg/IjhrRsREKDkr4kbMWdgOtbXEh0fyLQ==",
-      "dev": true,
-      "requires": {
-        "cosmiconfig": "^7.0.0",
-        "deepmerge": "^4.2.2",
-        "svgo": "^1.2.2"
-      }
-    },
-    "@svgr/webpack": {
-      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/@svgr/webpack/-/webpack-5.5.0.tgz",
-      "integrity": "sha512-DOBOK255wfQxguUta2INKkzPj6AIS6iafZYiYmHn6W3pHlycSRRlvWKCfLDG10fXfLWqE3DJHgRUOyJYmARa7g==",
-      "dev": true,
-      "requires": {
-        "@babel/core": "^7.12.3",
-        "@babel/plugin-transform-react-constant-elements": "^7.12.1",
-        "@babel/preset-env": "^7.12.1",
-        "@babel/preset-react": "^7.12.5",
-        "@svgr/core": "^5.5.0",
-        "@svgr/plugin-jsx": "^5.5.0",
-        "@svgr/plugin-svgo": "^5.5.0",
-        "loader-utils": "^2.0.0"
-      },
-      "dependencies": {
-        "@babel/code-frame": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.14.5.tgz",
-          "integrity": "sha512-9pzDqyc6OLDaqe+zbACgFkb6fKMNG6CObKpnYXChRsvYGyEdc7CA2BaqeOM+vOtCS5ndmJicPJhKAwYRI6UfFw==",
-          "dev": true,
-          "requires": {
-            "@babel/highlight": "^7.14.5"
-          }
-        },
-        "@babel/core": {
-          "version": "7.14.6",
-          "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.14.6.tgz",
-          "integrity": "sha512-gJnOEWSqTk96qG5BoIrl5bVtc23DCycmIePPYnamY9RboYdI4nFy5vAQMSl81O5K/W0sLDWfGysnOECC+KUUCA==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.14.5",
-            "@babel/generator": "^7.14.5",
-            "@babel/helper-compilation-targets": "^7.14.5",
-            "@babel/helper-module-transforms": "^7.14.5",
-            "@babel/helpers": "^7.14.6",
-            "@babel/parser": "^7.14.6",
-            "@babel/template": "^7.14.5",
-            "@babel/traverse": "^7.14.5",
-            "@babel/types": "^7.14.5",
-            "convert-source-map": "^1.7.0",
-            "debug": "^4.1.0",
-            "gensync": "^1.0.0-beta.2",
-            "json5": "^2.1.2",
-            "semver": "^6.3.0",
-            "source-map": "^0.5.0"
-          }
-        },
-        "@babel/generator": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.14.5.tgz",
-          "integrity": "sha512-y3rlP+/G25OIX3mYKKIOlQRcqj7YgrvHxOLbVmyLJ9bPmi5ttvUmpydVjcFjZphOktWuA7ovbx91ECloWTfjIA==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.14.5",
-            "jsesc": "^2.5.1",
-            "source-map": "^0.5.0"
-          }
-        },
-        "@babel/helper-function-name": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.14.5.tgz",
-          "integrity": "sha512-Gjna0AsXWfFvrAuX+VKcN/aNNWonizBj39yGwUzVDVTlMYJMK2Wp6xdpy72mfArFq5uK+NOuexfzZlzI1z9+AQ==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-get-function-arity": "^7.14.5",
-            "@babel/template": "^7.14.5",
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/helper-get-function-arity": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.14.5.tgz",
-          "integrity": "sha512-I1Db4Shst5lewOM4V+ZKJzQ0JGGaZ6VY1jYvMghRjqs6DWgxLCIyFt30GlnKkfUeFLpJt2vzbMVEXVSXlIFYUg==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/helper-member-expression-to-functions": {
-          "version": "7.14.7",
-          "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.14.7.tgz",
-          "integrity": "sha512-TMUt4xKxJn6ccjcOW7c4hlwyJArizskAhoSTOCkA0uZ+KghIaci0Qg9R043kUMWI9mtQfgny+NQ5QATnZ+paaA==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/helper-module-imports": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.14.5.tgz",
-          "integrity": "sha512-SwrNHu5QWS84XlHwGYPDtCxcA0hrSlL2yhWYLgeOc0w7ccOl2qv4s/nARI0aYZW+bSwAL5CukeXA47B/1NKcnQ==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/helper-module-transforms": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.14.5.tgz",
-          "integrity": "sha512-iXpX4KW8LVODuAieD7MzhNjmM6dzYY5tfRqT+R9HDXWl0jPn/djKmA+G9s/2C2T9zggw5tK1QNqZ70USfedOwA==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-module-imports": "^7.14.5",
-            "@babel/helper-replace-supers": "^7.14.5",
-            "@babel/helper-simple-access": "^7.14.5",
-            "@babel/helper-split-export-declaration": "^7.14.5",
-            "@babel/helper-validator-identifier": "^7.14.5",
-            "@babel/template": "^7.14.5",
-            "@babel/traverse": "^7.14.5",
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/helper-optimise-call-expression": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.14.5.tgz",
-          "integrity": "sha512-IqiLIrODUOdnPU9/F8ib1Fx2ohlgDhxnIDU7OEVi+kAbEZcyiF7BLU8W6PfvPi9LzztjS7kcbzbmL7oG8kD6VA==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/helper-plugin-utils": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-          "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-          "dev": true
-        },
-        "@babel/helper-replace-supers": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.14.5.tgz",
-          "integrity": "sha512-3i1Qe9/8x/hCHINujn+iuHy+mMRLoc77b2nI9TB0zjH1hvn9qGlXjWlggdwUcju36PkPCy/lpM7LLUdcTyH4Ow==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-member-expression-to-functions": "^7.14.5",
-            "@babel/helper-optimise-call-expression": "^7.14.5",
-            "@babel/traverse": "^7.14.5",
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/helper-simple-access": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.14.5.tgz",
-          "integrity": "sha512-nfBN9xvmCt6nrMZjfhkl7i0oTV3yxR4/FztsbOASyTvVcoYd0TRHh7eMLdlEcCqobydC0LAF3LtC92Iwxo0wyw==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/helper-split-export-declaration": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.14.5.tgz",
-          "integrity": "sha512-hprxVPu6e5Kdp2puZUmvOGjaLv9TCe58E/Fl6hRq4YiVQxIcNvuq6uTM2r1mT/oPskuS9CgR+I94sqAYv0NGKA==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/helper-validator-identifier": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz",
-          "integrity": "sha512-5lsetuxCLilmVGyiLEfoHBRX8UCFD+1m2x3Rj97WrW3V7H3u4RWRXA4evMjImCsin2J2YT0QaVDGf+z8ondbAg==",
-          "dev": true
-        },
-        "@babel/helpers": {
-          "version": "7.14.6",
-          "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.14.6.tgz",
-          "integrity": "sha512-yesp1ENQBiLI+iYHSJdoZKUtRpfTlL1grDIX9NRlAVppljLw/4tTyYupIB7uIYmC3stW/imAv8EqaKaS/ibmeA==",
-          "dev": true,
-          "requires": {
-            "@babel/template": "^7.14.5",
-            "@babel/traverse": "^7.14.5",
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/highlight": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.14.5.tgz",
-          "integrity": "sha512-qf9u2WFWVV0MppaL877j2dBtQIDgmidgjGk5VIMw3OadXvYaXn66U1BFlH2t4+t3i+8PhedppRv+i40ABzd+gg==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.14.5",
-            "chalk": "^2.0.0",
-            "js-tokens": "^4.0.0"
-          }
-        },
-        "@babel/parser": {
-          "version": "7.14.7",
-          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.14.7.tgz",
-          "integrity": "sha512-X67Z5y+VBJuHB/RjwECp8kSl5uYi0BvRbNeWqkaJCVh+LiTPl19WBUfG627psSgp9rSf6ojuXghQM3ha6qHHdA==",
-          "dev": true
-        },
-        "@babel/plugin-proposal-class-properties": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.14.5.tgz",
-          "integrity": "sha512-q/PLpv5Ko4dVc1LYMpCY7RVAAO4uk55qPwrIuJ5QJ8c6cVuAmhu7I/49JOppXL6gXf7ZHzpRVEUZdYoPLM04Gg==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-create-class-features-plugin": "^7.14.5",
-            "@babel/helper-plugin-utils": "^7.14.5"
-          }
-        },
-        "@babel/plugin-proposal-object-rest-spread": {
-          "version": "7.14.7",
-          "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.14.7.tgz",
-          "integrity": "sha512-082hsZz+sVabfmDWo1Oct1u1AgbKbUAyVgmX4otIc7bdsRgHBXwTwb3DpDmD4Eyyx6DNiuz5UAATT655k+kL5g==",
-          "dev": true,
-          "requires": {
-            "@babel/compat-data": "^7.14.7",
-            "@babel/helper-compilation-targets": "^7.14.5",
-            "@babel/helper-plugin-utils": "^7.14.5",
-            "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
-            "@babel/plugin-transform-parameters": "^7.14.5"
-          }
-        },
-        "@babel/preset-env": {
-          "version": "7.14.7",
-          "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.14.7.tgz",
-          "integrity": "sha512-itOGqCKLsSUl0Y+1nSfhbuuOlTs0MJk2Iv7iSH+XT/mR8U1zRLO7NjWlYXB47yhK4J/7j+HYty/EhFZDYKa/VA==",
-          "dev": true,
-          "requires": {
-            "@babel/compat-data": "^7.14.7",
-            "@babel/helper-compilation-targets": "^7.14.5",
-            "@babel/helper-plugin-utils": "^7.14.5",
-            "@babel/helper-validator-option": "^7.14.5",
-            "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "^7.14.5",
-            "@babel/plugin-proposal-async-generator-functions": "^7.14.7",
-            "@babel/plugin-proposal-class-properties": "^7.14.5",
-            "@babel/plugin-proposal-class-static-block": "^7.14.5",
-            "@babel/plugin-proposal-dynamic-import": "^7.14.5",
-            "@babel/plugin-proposal-export-namespace-from": "^7.14.5",
-            "@babel/plugin-proposal-json-strings": "^7.14.5",
-            "@babel/plugin-proposal-logical-assignment-operators": "^7.14.5",
-            "@babel/plugin-proposal-nullish-coalescing-operator": "^7.14.5",
-            "@babel/plugin-proposal-numeric-separator": "^7.14.5",
-            "@babel/plugin-proposal-object-rest-spread": "^7.14.7",
-            "@babel/plugin-proposal-optional-catch-binding": "^7.14.5",
-            "@babel/plugin-proposal-optional-chaining": "^7.14.5",
-            "@babel/plugin-proposal-private-methods": "^7.14.5",
-            "@babel/plugin-proposal-private-property-in-object": "^7.14.5",
-            "@babel/plugin-proposal-unicode-property-regex": "^7.14.5",
-            "@babel/plugin-syntax-async-generators": "^7.8.4",
-            "@babel/plugin-syntax-class-properties": "^7.12.13",
-            "@babel/plugin-syntax-class-static-block": "^7.14.5",
-            "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-            "@babel/plugin-syntax-export-namespace-from": "^7.8.3",
-            "@babel/plugin-syntax-json-strings": "^7.8.3",
-            "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4",
-            "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3",
-            "@babel/plugin-syntax-numeric-separator": "^7.10.4",
-            "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
-            "@babel/plugin-syntax-optional-catch-binding": "^7.8.3",
-            "@babel/plugin-syntax-optional-chaining": "^7.8.3",
-            "@babel/plugin-syntax-private-property-in-object": "^7.14.5",
-            "@babel/plugin-syntax-top-level-await": "^7.14.5",
-            "@babel/plugin-transform-arrow-functions": "^7.14.5",
-            "@babel/plugin-transform-async-to-generator": "^7.14.5",
-            "@babel/plugin-transform-block-scoped-functions": "^7.14.5",
-            "@babel/plugin-transform-block-scoping": "^7.14.5",
-            "@babel/plugin-transform-classes": "^7.14.5",
-            "@babel/plugin-transform-computed-properties": "^7.14.5",
-            "@babel/plugin-transform-destructuring": "^7.14.7",
-            "@babel/plugin-transform-dotall-regex": "^7.14.5",
-            "@babel/plugin-transform-duplicate-keys": "^7.14.5",
-            "@babel/plugin-transform-exponentiation-operator": "^7.14.5",
-            "@babel/plugin-transform-for-of": "^7.14.5",
-            "@babel/plugin-transform-function-name": "^7.14.5",
-            "@babel/plugin-transform-literals": "^7.14.5",
-            "@babel/plugin-transform-member-expression-literals": "^7.14.5",
-            "@babel/plugin-transform-modules-amd": "^7.14.5",
-            "@babel/plugin-transform-modules-commonjs": "^7.14.5",
-            "@babel/plugin-transform-modules-systemjs": "^7.14.5",
-            "@babel/plugin-transform-modules-umd": "^7.14.5",
-            "@babel/plugin-transform-named-capturing-groups-regex": "^7.14.7",
-            "@babel/plugin-transform-new-target": "^7.14.5",
-            "@babel/plugin-transform-object-super": "^7.14.5",
-            "@babel/plugin-transform-parameters": "^7.14.5",
-            "@babel/plugin-transform-property-literals": "^7.14.5",
-            "@babel/plugin-transform-regenerator": "^7.14.5",
-            "@babel/plugin-transform-reserved-words": "^7.14.5",
-            "@babel/plugin-transform-shorthand-properties": "^7.14.5",
-            "@babel/plugin-transform-spread": "^7.14.6",
-            "@babel/plugin-transform-sticky-regex": "^7.14.5",
-            "@babel/plugin-transform-template-literals": "^7.14.5",
-            "@babel/plugin-transform-typeof-symbol": "^7.14.5",
-            "@babel/plugin-transform-unicode-escapes": "^7.14.5",
-            "@babel/plugin-transform-unicode-regex": "^7.14.5",
-            "@babel/preset-modules": "^0.1.4",
-            "@babel/types": "^7.14.5",
-            "babel-plugin-polyfill-corejs2": "^0.2.2",
-            "babel-plugin-polyfill-corejs3": "^0.2.2",
-            "babel-plugin-polyfill-regenerator": "^0.2.2",
-            "core-js-compat": "^3.15.0",
-            "semver": "^6.3.0"
-          }
-        },
-        "@babel/preset-react": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/preset-react/-/preset-react-7.14.5.tgz",
-          "integrity": "sha512-XFxBkjyObLvBaAvkx1Ie95Iaq4S/GUEIrejyrntQ/VCMKUYvKLoyKxOBzJ2kjA3b6rC9/KL6KXfDC2GqvLiNqQ==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-plugin-utils": "^7.14.5",
-            "@babel/helper-validator-option": "^7.14.5",
-            "@babel/plugin-transform-react-display-name": "^7.14.5",
-            "@babel/plugin-transform-react-jsx": "^7.14.5",
-            "@babel/plugin-transform-react-jsx-development": "^7.14.5",
-            "@babel/plugin-transform-react-pure-annotations": "^7.14.5"
-          }
-        },
-        "@babel/template": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.14.5.tgz",
-          "integrity": "sha512-6Z3Po85sfxRGachLULUhOmvAaOo7xCvqGQtxINai2mEGPFm6pQ4z5QInFnUrRpfoSV60BnjyF5F3c+15fxFV1g==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.14.5",
-            "@babel/parser": "^7.14.5",
-            "@babel/types": "^7.14.5"
-          }
-        },
-        "@babel/traverse": {
-          "version": "7.14.7",
-          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.14.7.tgz",
-          "integrity": "sha512-9vDr5NzHu27wgwejuKL7kIOm4bwEtaPQ4Z6cpCmjSuaRqpH/7xc4qcGEscwMqlkwgcXl6MvqoAjZkQ24uSdIZQ==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.14.5",
-            "@babel/generator": "^7.14.5",
-            "@babel/helper-function-name": "^7.14.5",
-            "@babel/helper-hoist-variables": "^7.14.5",
-            "@babel/helper-split-export-declaration": "^7.14.5",
-            "@babel/parser": "^7.14.7",
-            "@babel/types": "^7.14.5",
-            "debug": "^4.1.0",
-            "globals": "^11.1.0"
-          }
-        },
-        "@babel/types": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.5.tgz",
-          "integrity": "sha512-M/NzBpEL95I5Hh4dwhin5JlE7EzO5PHMAuzjxss3tiOBD46KfQvVedN/3jEPZvdRvtsK2222XfdHogNIttFgcg==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-validator-identifier": "^7.14.5",
-            "to-fast-properties": "^2.0.0"
-          }
-        },
-        "gensync": {
-          "version": "1.0.0-beta.2",
-          "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
-          "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
-          "dev": true
-        },
-        "semver": {
-          "version": "6.3.0",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-          "dev": true
-        },
-        "source-map": {
-          "version": "0.5.7",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
-          "dev": true
-        }
-      }
-    },
-    "@testing-library/dom": {
-      "version": "7.21.4",
-      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-7.21.4.tgz",
-      "integrity": "sha512-IXjKRTAH31nQ+mx6q3IPw85RTLul8VlWBm1rxURoxDt7JI0HPlAAfbtrKTdeq83XYCYO7HSHogyV+OsD+6FX0Q==",
-      "dev": true,
-      "requires": {
-        "@babel/runtime": "^7.10.3",
-        "@types/aria-query": "^4.2.0",
-        "aria-query": "^4.2.2",
-        "dom-accessibility-api": "^0.4.6",
-        "pretty-format": "^25.5.0"
-      },
-      "dependencies": {
-        "aria-query": {
-          "version": "4.2.2",
-          "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-4.2.2.tgz",
-          "integrity": "sha512-o/HelwhuKpTj/frsOsbNLNgnNGVIFsVP/SW2BSF14gVl7kAfMOJ6/8wUAUvG1R1NHKrfG+2sHZTu0yauT1qBrA==",
-          "dev": true,
-          "requires": {
-            "@babel/runtime": "^7.10.2",
-            "@babel/runtime-corejs3": "^7.10.2"
-          }
-        }
-      }
-    },
-    "@testing-library/jest-dom": {
-      "version": "5.11.10",
-      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.11.10.tgz",
-      "integrity": "sha512-FuKiq5xuk44Fqm0000Z9w0hjOdwZRNzgx7xGGxQYepWFZy+OYUMOT/wPI4nLYXCaVltNVpU1W/qmD88wLWDsqQ==",
-      "dev": true,
-      "requires": {
-        "@babel/runtime": "^7.9.2",
-        "@types/testing-library__jest-dom": "^5.9.1",
-        "aria-query": "^4.2.2",
-        "chalk": "^3.0.0",
-        "css": "^3.0.0",
-        "css.escape": "^1.5.1",
-        "lodash": "^4.17.15",
-        "redent": "^3.0.0"
-      },
-      "dependencies": {
-        "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,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "aria-query": {
-          "version": "4.2.2",
-          "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-4.2.2.tgz",
-          "integrity": "sha512-o/HelwhuKpTj/frsOsbNLNgnNGVIFsVP/SW2BSF14gVl7kAfMOJ6/8wUAUvG1R1NHKrfG+2sHZTu0yauT1qBrA==",
-          "dev": true,
-          "requires": {
-            "@babel/runtime": "^7.10.2",
-            "@babel/runtime-corejs3": "^7.10.2"
-          }
-        },
-        "chalk": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
-          "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "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,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "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
-        },
-        "css": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/css/-/css-3.0.0.tgz",
-          "integrity": "sha512-DG9pFfwOrzc+hawpmqX/dHYHJG+Bsdb0klhyi1sDneOgGOXy9wQIC8hzyVp1e4NRYDBdxcylvywPkkXCHAzTyQ==",
-          "dev": true,
-          "requires": {
-            "inherits": "^2.0.4",
-            "source-map": "^0.6.1",
-            "source-map-resolve": "^0.6.0"
-          }
-        },
-        "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
-        },
-        "indent-string": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
-          "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==",
-          "dev": true
-        },
-        "redent": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
-          "integrity": "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==",
-          "dev": true,
-          "requires": {
-            "indent-string": "^4.0.0",
-            "strip-indent": "^3.0.0"
-          }
-        },
-        "source-map-resolve": {
-          "version": "0.6.0",
-          "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.6.0.tgz",
-          "integrity": "sha512-KXBr9d/fO/bWo97NXsPIAW1bFSBOuCnjbNTBMO7N59hsv5i9yzRDfcYwwt0l04+VqnKC+EwzvJZIP/qkuMgR/w==",
-          "dev": true,
-          "requires": {
-            "atob": "^2.1.2",
-            "decode-uri-component": "^0.2.0"
-          }
-        },
-        "strip-indent": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
-          "integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==",
-          "dev": true,
-          "requires": {
-            "min-indent": "^1.0.0"
-          }
-        },
-        "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,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
-    "@testing-library/react": {
-      "version": "10.4.7",
-      "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-10.4.7.tgz",
-      "integrity": "sha512-hUYbum3X2f1ZKusKfPaooKNYqE/GtPiQ+D2HJaJ4pkxeNJQFVUEvAvEh9+3QuLdBeTWkDMNY5NSijc5+pGdM4Q==",
-      "dev": true,
-      "requires": {
-        "@babel/runtime": "^7.10.3",
-        "@testing-library/dom": "^7.17.1"
-      }
-    },
-    "@testing-library/user-event": {
-      "version": "13.1.5",
-      "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-13.1.5.tgz",
-      "integrity": "sha512-dD1FRHuWhfdcnb6H9/oaIIZHx9LQKGxbTtYV3i5Zru8I3GWWJoG2WtlAlXZ/56djO+6TvfsWPj5cXQvoTFQATQ==",
-      "dev": true,
-      "requires": {
-        "@babel/runtime": "^7.12.5"
-      },
-      "dependencies": {
-        "@babel/runtime": {
-          "version": "7.13.17",
-          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.13.17.tgz",
-          "integrity": "sha512-NCdgJEelPTSh+FEFylhnP1ylq848l1z9t9N0j1Lfbcw0+KXGjsTvUmkxy+voLLXB5SOKMbLLx4jxYliGrYQseA==",
-          "dev": true,
-          "requires": {
-            "regenerator-runtime": "^0.13.4"
-          }
-        }
-      }
-    },
-    "@tootallnate/once": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz",
-      "integrity": "sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==",
-      "dev": true
-    },
-    "@trysound/sax": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.1.1.tgz",
-      "integrity": "sha512-Z6DoceYb/1xSg5+e+ZlPZ9v0N16ZvZ+wYMraFue4HYrE4ttONKtsvruIRf6t9TBR0YvSOfi1hUU0fJfBLCDYow==",
-      "dev": true
-    },
-    "@types/aria-query": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-4.2.0.tgz",
-      "integrity": "sha512-iIgQNzCm0v7QMhhe4Jjn9uRh+I6GoPmt03CbEtwx3ao8/EfoQcmgtqH4vQ5Db/lxiIGaWDv6nwvunuh0RyX0+A==",
-      "dev": true
-    },
-    "@types/babel__core": {
-      "version": "7.1.9",
-      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.1.9.tgz",
-      "integrity": "sha512-sY2RsIJ5rpER1u3/aQ8OFSI7qGIy8o1NEEbgb2UaJcvOtXOMpd39ko723NBpjQFg9SIX7TXtjejZVGeIMLhoOw==",
-      "dev": true,
-      "requires": {
-        "@babel/parser": "^7.1.0",
-        "@babel/types": "^7.0.0",
-        "@types/babel__generator": "*",
-        "@types/babel__template": "*",
-        "@types/babel__traverse": "*"
-      }
-    },
-    "@types/babel__generator": {
-      "version": "7.6.1",
-      "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.6.1.tgz",
-      "integrity": "sha512-bBKm+2VPJcMRVwNhxKu8W+5/zT7pwNEqeokFOmbvVSqGzFneNxYcEBro9Ac7/N9tlsaPYnZLK8J1LWKkMsLAew==",
-      "dev": true,
-      "requires": {
-        "@babel/types": "^7.0.0"
-      }
-    },
-    "@types/babel__template": {
-      "version": "7.0.2",
-      "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.0.2.tgz",
-      "integrity": "sha512-/K6zCpeW7Imzgab2bLkLEbz0+1JlFSrUMdw7KoIIu+IUdu51GWaBZpd3y1VXGVXzynvGa4DaIaxNZHiON3GXUg==",
-      "dev": true,
-      "requires": {
-        "@babel/parser": "^7.1.0",
-        "@babel/types": "^7.0.0"
-      }
-    },
-    "@types/babel__traverse": {
-      "version": "7.0.13",
-      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.0.13.tgz",
-      "integrity": "sha512-i+zS7t6/s9cdQvbqKDARrcbrPvtJGlbYsMkazo03nTAK3RX9FNrLllXys22uiTGJapPOTZTQ35nHh4ISph4SLQ==",
-      "dev": true,
-      "requires": {
-        "@babel/types": "^7.3.0"
-      }
-    },
-    "@types/color-name": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz",
-      "integrity": "sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==",
-      "dev": true
-    },
-    "@types/cookie": {
-      "version": "0.3.3",
-      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.3.3.tgz",
-      "integrity": "sha512-LKVP3cgXBT9RYj+t+9FDKwS5tdI+rPBXaNSkma7hvqy35lc7mAokC2zsqWJH0LaqIt3B962nuYI77hsJoT1gow=="
-    },
-    "@types/eslint": {
-      "version": "7.2.14",
-      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.2.14.tgz",
-      "integrity": "sha512-pESyhSbUOskqrGcaN+bCXIQDyT5zTaRWfj5ZjjSlMatgGjIn3QQPfocAu4WSabUR7CGyLZ2CQaZyISOEX7/saw==",
-      "dev": true,
-      "requires": {
-        "@types/estree": "*",
-        "@types/json-schema": "*"
-      }
-    },
-    "@types/eslint-scope": {
-      "version": "3.7.1",
-      "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.1.tgz",
-      "integrity": "sha512-SCFeogqiptms4Fg29WpOTk5nHIzfpKCemSN63ksBQYKTcXoJEmJagV+DhVmbapZzY4/5YaOV1nZwrsU79fFm1g==",
-      "dev": true,
-      "requires": {
-        "@types/eslint": "*",
-        "@types/estree": "*"
-      }
-    },
-    "@types/estree": {
-      "version": "0.0.46",
-      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.46.tgz",
-      "integrity": "sha512-laIjwTQaD+5DukBZaygQ79K1Z0jb1bPEMRrkXSLjtCcZm+abyp5YbrqpSLzD42FwWW6gK/aS4NYpJ804nG2brg==",
-      "dev": true
-    },
-    "@types/fs-extra": {
-      "version": "9.0.12",
-      "resolved": "https://registry.npmjs.org/@types/fs-extra/-/fs-extra-9.0.12.tgz",
-      "integrity": "sha512-I+bsBr67CurCGnSenZZ7v94gd3tc3+Aj2taxMT4yu4ABLuOgOjeFxX3dokG24ztSRg5tnT00sL8BszO7gSMoIw==",
-      "dev": true,
-      "requires": {
-        "@types/node": "*"
-      }
-    },
-    "@types/glob": {
-      "version": "7.1.4",
-      "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.1.4.tgz",
-      "integrity": "sha512-w+LsMxKyYQm347Otw+IfBXOv9UWVjpHpCDdbBMt8Kz/xbvCYNjP+0qPh91Km3iKfSRLBB0P7fAMf0KHrPu+MyA==",
-      "dev": true,
-      "requires": {
-        "@types/minimatch": "*",
-        "@types/node": "*"
-      }
-    },
-    "@types/graceful-fs": {
-      "version": "4.1.5",
-      "resolved": "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.5.tgz",
-      "integrity": "sha512-anKkLmZZ+xm4p8JWBf4hElkM4XR+EZeA2M9BAkkTldmcyDY4mbdIJnRghDJH3Ov5ooY7/UAoENtmdMSkaAd7Cw==",
-      "dev": true,
-      "requires": {
-        "@types/node": "*"
-      }
-    },
-    "@types/html-minifier-terser": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-5.1.2.tgz",
-      "integrity": "sha512-h4lTMgMJctJybDp8CQrxTUiiYmedihHWkjnF/8Pxseu2S6Nlfcy8kwboQ8yejh456rP2yWoEVm1sS/FVsfM48w==",
-      "dev": true
-    },
-    "@types/http-proxy": {
-      "version": "1.17.7",
-      "resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.7.tgz",
-      "integrity": "sha512-9hdj6iXH64tHSLTY+Vt2eYOGzSogC+JQ2H7bdPWkuh7KXP5qLllWx++t+K9Wk556c3dkDdPws/SpMRi0sdCT1w==",
-      "dev": true,
-      "requires": {
-        "@types/node": "*"
-      }
-    },
-    "@types/invariant": {
-      "version": "2.2.34",
-      "resolved": "https://registry.npmjs.org/@types/invariant/-/invariant-2.2.34.tgz",
-      "integrity": "sha512-lYUtmJ9BqUN688fGY1U1HZoWT1/Jrmgigx2loq4ZcJpICECm/Om3V314BxdzypO0u5PORKGMM6x0OXaljV1YFg=="
-    },
-    "@types/istanbul-lib-coverage": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.3.tgz",
-      "integrity": "sha512-sz7iLqvVUg1gIedBOvlkxPlc8/uVzyS5OwGz1cKjXzkl3FpL3al0crU8YGU1WoHkxn0Wxbw5tyi6hvzJKNzFsw==",
-      "dev": true
-    },
-    "@types/istanbul-lib-report": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@types/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz",
-      "integrity": "sha512-plGgXAPfVKFoYfa9NpYDAkseG+g6Jr294RqeqcqDixSbU34MZVJRi/P+7Y8GDpzkEwLaGZZOpKIEmeVZNtKsrg==",
-      "dev": true,
-      "requires": {
-        "@types/istanbul-lib-coverage": "*"
-      }
-    },
-    "@types/istanbul-reports": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-1.1.2.tgz",
-      "integrity": "sha512-P/W9yOX/3oPZSpaYOCQzGqgCQRXn0FFO/V8bWrCQs+wLmvVVxk6CRBXALEvNs9OHIatlnlFokfhuDo2ug01ciw==",
-      "dev": true,
-      "requires": {
-        "@types/istanbul-lib-coverage": "*",
-        "@types/istanbul-lib-report": "*"
-      }
-    },
-    "@types/jest": {
-      "version": "26.0.22",
-      "resolved": "https://registry.npmjs.org/@types/jest/-/jest-26.0.22.tgz",
-      "integrity": "sha512-eeWwWjlqxvBxc4oQdkueW5OF/gtfSceKk4OnOAGlUSwS/liBRtZppbJuz1YkgbrbfGOoeBHun9fOvXnjNwrSOw==",
-      "dev": true,
-      "requires": {
-        "jest-diff": "^26.0.0",
-        "pretty-format": "^26.0.0"
-      },
-      "dependencies": {
-        "@jest/types": {
-          "version": "26.6.2",
-          "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
-          "integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
-          "dev": true,
-          "requires": {
-            "@types/istanbul-lib-coverage": "^2.0.0",
-            "@types/istanbul-reports": "^3.0.0",
-            "@types/node": "*",
-            "@types/yargs": "^15.0.0",
-            "chalk": "^4.0.0"
-          }
-        },
-        "@types/istanbul-reports": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.0.tgz",
-          "integrity": "sha512-nwKNbvnwJ2/mndE9ItP/zc2TCzw6uuodnF4EHYWD+gCQDVBuRQL5UzbZD0/ezy1iKsFU2ZQiDqg4M9dN4+wZgA==",
-          "dev": true,
-          "requires": {
-            "@types/istanbul-lib-report": "*"
-          }
-        },
-        "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,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
-          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "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,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "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
-        },
-        "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
-        },
-        "pretty-format": {
-          "version": "26.6.2",
-          "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-26.6.2.tgz",
-          "integrity": "sha512-7AeGuCYNGmycyQbCqd/3PWH4eOoX/OiCa0uphp57NVTeAGdJGaAliecxwBDHYQCIvrW7aDBZCYeNTP/WX69mkg==",
-          "dev": true,
-          "requires": {
-            "@jest/types": "^26.6.2",
-            "ansi-regex": "^5.0.0",
-            "ansi-styles": "^4.0.0",
-            "react-is": "^17.0.1"
-          }
-        },
-        "react-is": {
-          "version": "17.0.2",
-          "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-          "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
-          "dev": true
-        },
-        "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,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
-    "@types/json-schema": {
-      "version": "7.0.8",
-      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.8.tgz",
-      "integrity": "sha512-YSBPTLTVm2e2OoQIDYx8HaeWJ5tTToLH67kXR7zYNGupXMEHa2++G8k+DczX2cFVgalypqtyZIcU19AFcmOpmg==",
-      "dev": true
-    },
-    "@types/minimatch": {
-      "version": "3.0.5",
-      "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.5.tgz",
-      "integrity": "sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ==",
-      "dev": true
-    },
-    "@types/node": {
-      "version": "14.14.28",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.28.tgz",
-      "integrity": "sha512-lg55ArB+ZiHHbBBttLpzD07akz0QPrZgUODNakeC09i62dnrywr9mFErHuaPlB6I7z+sEbK+IYmplahvplCj2g==",
-      "dev": true
-    },
-    "@types/normalize-package-data": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/@types/normalize-package-data/-/normalize-package-data-2.4.0.tgz",
-      "integrity": "sha512-f5j5b/Gf71L+dbqxIpQ4Z2WlmI/mPJ0fOkGGmFgtb6sAu97EPczzbS3/tJKxmcYDj55OX6ssqwDAWOHIYDRDGA==",
-      "dev": true
-    },
-    "@types/parse-json": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
-      "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==",
-      "dev": true
-    },
-    "@types/prettier": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.3.2.tgz",
-      "integrity": "sha512-eI5Yrz3Qv4KPUa/nSIAi0h+qX0XyewOliug5F2QAtuRg6Kjg6jfmxe1GIwoIRhZspD1A0RP8ANrPwvEXXtRFog==",
-      "dev": true
-    },
-    "@types/prop-types": {
-      "version": "15.7.4",
-      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz",
-      "integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ=="
-    },
-    "@types/q": {
-      "version": "1.5.5",
-      "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.5.tgz",
-      "integrity": "sha512-L28j2FcJfSZOnL1WBjDYp2vUHCeIFlyYI/53EwD/rKUBQ7MtUUfbQWiyKJGpcnv4/WgrhWsFKrcPstcAt/J0tQ==",
-      "dev": true
-    },
-    "@types/react": {
-      "version": "17.0.14",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.14.tgz",
-      "integrity": "sha512-0WwKHUbWuQWOce61UexYuWTGuGY/8JvtUe/dtQ6lR4sZ3UiylHotJeWpf3ArP9+DSGUoLY3wbU59VyMrJps5VQ==",
-      "requires": {
-        "@types/prop-types": "*",
-        "@types/scheduler": "*",
-        "csstype": "^3.0.2"
-      },
-      "dependencies": {
-        "csstype": {
-          "version": "3.0.8",
-          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz",
-          "integrity": "sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw=="
-        }
-      }
-    },
-    "@types/react-transition-group": {
-      "version": "4.4.2",
-      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.2.tgz",
-      "integrity": "sha512-KibDWL6nshuOJ0fu8ll7QnV/LVTo3PzQ9aCPnRUYPfX7eZohHwLIdNHj7pftanREzHNP4/nJa8oeM73uSiavMQ==",
-      "requires": {
-        "@types/react": "*"
-      }
-    },
-    "@types/retry": {
-      "version": "0.12.1",
-      "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.1.tgz",
-      "integrity": "sha512-xoDlM2S4ortawSWORYqsdU+2rxdh4LRW9ytc3zmT37RIKQh6IHyKwwtKhKis9ah8ol07DCkZxPt8BBvPjC6v4g==",
-      "dev": true
-    },
-    "@types/scheduler": {
-      "version": "0.16.2",
-      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
-      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
-    },
-    "@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==",
-      "dev": true,
-      "requires": {
-        "schema-utils": "*"
-      }
-    },
-    "@types/source-list-map": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz",
-      "integrity": "sha512-K5K+yml8LTo9bWJI/rECfIPrGgxdpeNbj+d53lwN4QjW1MCwlkhUms+gtdzigTeUyBr09+u8BwOIY3MXvHdcsA==",
-      "dev": true
-    },
-    "@types/stack-utils": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz",
-      "integrity": "sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw==",
-      "dev": true
-    },
-    "@types/tapable": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.8.tgz",
-      "integrity": "sha512-ipixuVrh2OdNmauvtT51o3d8z12p6LtFW9in7U79der/kwejjdNchQC5UMn5u/KxNoM7VHHOs/l8KS8uHxhODQ==",
-      "dev": true
-    },
-    "@types/testing-library__jest-dom": {
-      "version": "5.9.5",
-      "resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.9.5.tgz",
-      "integrity": "sha512-ggn3ws+yRbOHog9GxnXiEZ/35Mow6YtPZpd7Z5mKDeZS/o7zx3yAle0ov/wjhVB5QT4N2Dt+GNoGCdqkBGCajQ==",
-      "dev": true,
-      "requires": {
-        "@types/jest": "*"
-      }
-    },
-    "@types/uglify-js": {
-      "version": "3.13.1",
-      "resolved": "https://registry.npmjs.org/@types/uglify-js/-/uglify-js-3.13.1.tgz",
-      "integrity": "sha512-O3MmRAk6ZuAKa9CHgg0Pr0+lUOqoMLpc9AS4R8ano2auvsg7IE8syF3Xh/NPr26TWklxYcqoEEFdzLLs1fV9PQ==",
-      "dev": true,
-      "requires": {
-        "source-map": "^0.6.1"
-      }
-    },
-    "@types/warning": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz",
-      "integrity": "sha1-DSUBJorY+ZYrdA04fEZU9fjiPlI="
-    },
-    "@types/webpack": {
-      "version": "4.41.30",
-      "resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.30.tgz",
-      "integrity": "sha512-GUHyY+pfuQ6haAfzu4S14F+R5iGRwN6b2FRNJY7U0NilmFAqbsOfK6j1HwuLBAqwRIT+pVdNDJGJ6e8rpp0KHA==",
-      "dev": true,
-      "requires": {
-        "@types/node": "*",
-        "@types/tapable": "^1",
-        "@types/uglify-js": "*",
-        "@types/webpack-sources": "*",
-        "anymatch": "^3.0.0",
-        "source-map": "^0.6.0"
-      },
-      "dependencies": {
-        "anymatch": {
-          "version": "3.1.2",
-          "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
-          "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
-          "dev": true,
-          "requires": {
-            "normalize-path": "^3.0.0",
-            "picomatch": "^2.0.4"
-          }
-        }
-      }
-    },
-    "@types/webpack-sources": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/@types/webpack-sources/-/webpack-sources-2.1.1.tgz",
-      "integrity": "sha512-MjM1R6iuw8XaVbtkCBz0N349cyqBjJHCbQiOeppe3VBeFvxqs74RKHAVt9LkxTnUWc7YLZOEsUfPUnmK6SBPKQ==",
-      "dev": true,
-      "requires": {
-        "@types/node": "*",
-        "@types/source-list-map": "*",
-        "source-map": "^0.7.3"
-      },
-      "dependencies": {
-        "source-map": {
-          "version": "0.7.3",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
-          "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
-          "dev": true
-        }
-      }
-    },
-    "@types/yargs": {
-      "version": "15.0.5",
-      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.5.tgz",
-      "integrity": "sha512-Dk/IDOPtOgubt/IaevIUbTgV7doaKkoorvOyYM2CMwuDyP89bekI7H4xLIwunNYiK9jhCkmc6pUrJk3cj2AB9w==",
-      "dev": true,
-      "requires": {
-        "@types/yargs-parser": "*"
-      }
-    },
-    "@types/yargs-parser": {
-      "version": "15.0.0",
-      "resolved": "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-15.0.0.tgz",
-      "integrity": "sha512-FA/BWv8t8ZWJ+gEOnLLd8ygxH/2UFbAvgEonyfN6yWGLKc7zVjbpl2Y4CTjid9h2RfgPP6SEt6uHwEOply00yw==",
-      "dev": true
-    },
-    "@webassemblyjs/ast": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.0.tgz",
-      "integrity": "sha512-kX2W49LWsbthrmIRMbQZuQDhGtjyqXfEmmHyEi4XWnSZtPmxY0+3anPIzsnRb45VH/J55zlOfWvZuY47aJZTJg==",
-      "dev": true,
-      "requires": {
-        "@webassemblyjs/helper-numbers": "1.11.0",
-        "@webassemblyjs/helper-wasm-bytecode": "1.11.0"
-      }
-    },
-    "@webassemblyjs/floating-point-hex-parser": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.11.0.tgz",
-      "integrity": "sha512-Q/aVYs/VnPDVYvsCBL/gSgwmfjeCb4LW8+TMrO3cSzJImgv8lxxEPM2JA5jMrivE7LSz3V+PFqtMbls3m1exDA==",
-      "dev": true
-    },
-    "@webassemblyjs/helper-api-error": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.0.tgz",
-      "integrity": "sha512-baT/va95eXiXb2QflSx95QGT5ClzWpGaa8L7JnJbgzoYeaA27FCvuBXU758l+KXWRndEmUXjP0Q5fibhavIn8w==",
-      "dev": true
-    },
-    "@webassemblyjs/helper-buffer": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.11.0.tgz",
-      "integrity": "sha512-u9HPBEl4DS+vA8qLQdEQ6N/eJQ7gT7aNvMIo8AAWvAl/xMrcOSiI2M0MAnMCy3jIFke7bEee/JwdX1nUpCtdyA==",
-      "dev": true
-    },
-    "@webassemblyjs/helper-numbers": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.11.0.tgz",
-      "integrity": "sha512-DhRQKelIj01s5IgdsOJMKLppI+4zpmcMQ3XboFPLwCpSNH6Hqo1ritgHgD0nqHeSYqofA6aBN/NmXuGjM1jEfQ==",
-      "dev": true,
-      "requires": {
-        "@webassemblyjs/floating-point-hex-parser": "1.11.0",
-        "@webassemblyjs/helper-api-error": "1.11.0",
-        "@xtuc/long": "4.2.2"
-      }
-    },
-    "@webassemblyjs/helper-wasm-bytecode": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.11.0.tgz",
-      "integrity": "sha512-MbmhvxXExm542tWREgSFnOVo07fDpsBJg3sIl6fSp9xuu75eGz5lz31q7wTLffwL3Za7XNRCMZy210+tnsUSEA==",
-      "dev": true
-    },
-    "@webassemblyjs/helper-wasm-section": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.11.0.tgz",
-      "integrity": "sha512-3Eb88hcbfY/FCukrg6i3EH8H2UsD7x8Vy47iVJrP967A9JGqgBVL9aH71SETPx1JrGsOUVLo0c7vMCN22ytJew==",
-      "dev": true,
-      "requires": {
-        "@webassemblyjs/ast": "1.11.0",
-        "@webassemblyjs/helper-buffer": "1.11.0",
-        "@webassemblyjs/helper-wasm-bytecode": "1.11.0",
-        "@webassemblyjs/wasm-gen": "1.11.0"
-      }
-    },
-    "@webassemblyjs/ieee754": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.11.0.tgz",
-      "integrity": "sha512-KXzOqpcYQwAfeQ6WbF6HXo+0udBNmw0iXDmEK5sFlmQdmND+tr773Ti8/5T/M6Tl/413ArSJErATd8In3B+WBA==",
-      "dev": true,
-      "requires": {
-        "@xtuc/ieee754": "^1.2.0"
-      }
-    },
-    "@webassemblyjs/leb128": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.11.0.tgz",
-      "integrity": "sha512-aqbsHa1mSQAbeeNcl38un6qVY++hh8OpCOzxhixSYgbRfNWcxJNJQwe2rezK9XEcssJbbWIkblaJRwGMS9zp+g==",
-      "dev": true,
-      "requires": {
-        "@xtuc/long": "4.2.2"
-      }
-    },
-    "@webassemblyjs/utf8": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.11.0.tgz",
-      "integrity": "sha512-A/lclGxH6SpSLSyFowMzO/+aDEPU4hvEiooCMXQPcQFPPJaYcPQNKGOCLUySJsYJ4trbpr+Fs08n4jelkVTGVw==",
-      "dev": true
-    },
-    "@webassemblyjs/wasm-edit": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.11.0.tgz",
-      "integrity": "sha512-JHQ0damXy0G6J9ucyKVXO2j08JVJ2ntkdJlq1UTiUrIgfGMmA7Ik5VdC/L8hBK46kVJgujkBIoMtT8yVr+yVOQ==",
-      "dev": true,
-      "requires": {
-        "@webassemblyjs/ast": "1.11.0",
-        "@webassemblyjs/helper-buffer": "1.11.0",
-        "@webassemblyjs/helper-wasm-bytecode": "1.11.0",
-        "@webassemblyjs/helper-wasm-section": "1.11.0",
-        "@webassemblyjs/wasm-gen": "1.11.0",
-        "@webassemblyjs/wasm-opt": "1.11.0",
-        "@webassemblyjs/wasm-parser": "1.11.0",
-        "@webassemblyjs/wast-printer": "1.11.0"
-      }
-    },
-    "@webassemblyjs/wasm-gen": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.11.0.tgz",
-      "integrity": "sha512-BEUv1aj0WptCZ9kIS30th5ILASUnAPEvE3tVMTrItnZRT9tXCLW2LEXT8ezLw59rqPP9klh9LPmpU+WmRQmCPQ==",
-      "dev": true,
-      "requires": {
-        "@webassemblyjs/ast": "1.11.0",
-        "@webassemblyjs/helper-wasm-bytecode": "1.11.0",
-        "@webassemblyjs/ieee754": "1.11.0",
-        "@webassemblyjs/leb128": "1.11.0",
-        "@webassemblyjs/utf8": "1.11.0"
-      }
-    },
-    "@webassemblyjs/wasm-opt": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.11.0.tgz",
-      "integrity": "sha512-tHUSP5F4ywyh3hZ0+fDQuWxKx3mJiPeFufg+9gwTpYp324mPCQgnuVKwzLTZVqj0duRDovnPaZqDwoyhIO8kYg==",
-      "dev": true,
-      "requires": {
-        "@webassemblyjs/ast": "1.11.0",
-        "@webassemblyjs/helper-buffer": "1.11.0",
-        "@webassemblyjs/wasm-gen": "1.11.0",
-        "@webassemblyjs/wasm-parser": "1.11.0"
-      }
-    },
-    "@webassemblyjs/wasm-parser": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.11.0.tgz",
-      "integrity": "sha512-6L285Sgu9gphrcpDXINvm0M9BskznnzJTE7gYkjDbxET28shDqp27wpruyx3C2S/dvEwiigBwLA1cz7lNUi0kw==",
-      "dev": true,
-      "requires": {
-        "@webassemblyjs/ast": "1.11.0",
-        "@webassemblyjs/helper-api-error": "1.11.0",
-        "@webassemblyjs/helper-wasm-bytecode": "1.11.0",
-        "@webassemblyjs/ieee754": "1.11.0",
-        "@webassemblyjs/leb128": "1.11.0",
-        "@webassemblyjs/utf8": "1.11.0"
-      }
-    },
-    "@webassemblyjs/wast-printer": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.11.0.tgz",
-      "integrity": "sha512-Fg5OX46pRdTgB7rKIUojkh9vXaVN6sGYCnEiJN1GYkb0RPwShZXp6KTDqmoMdQPKhcroOXh3fEzmkWmCYaKYhQ==",
-      "dev": true,
-      "requires": {
-        "@webassemblyjs/ast": "1.11.0",
-        "@xtuc/long": "4.2.2"
-      }
-    },
-    "@webpack-cli/configtest": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-1.0.4.tgz",
-      "integrity": "sha512-cs3XLy+UcxiP6bj0A6u7MLLuwdXJ1c3Dtc0RkKg+wiI1g/Ti1om8+/2hc2A2B60NbBNAbMgyBMHvyymWm/j4wQ==",
-      "dev": true
-    },
-    "@webpack-cli/info": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-1.3.0.tgz",
-      "integrity": "sha512-ASiVB3t9LOKHs5DyVUcxpraBXDOKubYu/ihHhU+t1UPpxsivg6Od2E2qU4gJCekfEddzRBzHhzA/Acyw/mlK/w==",
-      "dev": true,
-      "requires": {
-        "envinfo": "^7.7.3"
-      }
-    },
-    "@webpack-cli/serve": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-1.5.1.tgz",
-      "integrity": "sha512-4vSVUiOPJLmr45S8rMGy7WDvpWxfFxfP/Qx/cxZFCfvoypTYpPPL1X8VIZMe0WTA+Jr7blUxwUSEZNkjoMTgSw==",
-      "dev": true
-    },
-    "@xtuc/ieee754": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
-      "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==",
-      "dev": true
-    },
-    "@xtuc/long": {
-      "version": "4.2.2",
-      "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
-      "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==",
-      "dev": true
-    },
-    "abab": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.3.tgz",
-      "integrity": "sha512-tsFzPpcttalNjFBCFMqsKYQcWxxen1pgJR56by//QwvJc4/OUS3kPOOttx2tSIfjsylB0pYu7f5D3K1RCxUnUg==",
-      "dev": true
-    },
-    "accepts": {
-      "version": "1.3.7",
-      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz",
-      "integrity": "sha512-Il80Qs2WjYlJIBNzNkK6KYqlVMTbZLXgHx2oT0pU/fjRHyEp+PEfEPY0R3WCwAGVOtauxh1hOxNgIf5bv7dQpA==",
-      "dev": true,
-      "requires": {
-        "mime-types": "~2.1.24",
-        "negotiator": "0.6.2"
-      }
-    },
-    "acorn": {
-      "version": "7.4.1",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
-      "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
-      "dev": true
-    },
-    "acorn-globals": {
-      "version": "4.3.4",
-      "resolved": "https://registry.npmjs.org/acorn-globals/-/acorn-globals-4.3.4.tgz",
-      "integrity": "sha512-clfQEh21R+D0leSbUdWf3OcfqyaCSAQ8Ryq00bofSekfr9W8u1jyYZo6ir0xu9Gtcf7BjcHJpnbZH7JOCpP60A==",
-      "dev": true,
-      "requires": {
-        "acorn": "^6.0.1",
-        "acorn-walk": "^6.0.1"
-      },
-      "dependencies": {
-        "acorn": {
-          "version": "6.4.1",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.1.tgz",
-          "integrity": "sha512-ZVA9k326Nwrj3Cj9jlh3wGFutC2ZornPNARZwsNYqQYgN0EsV2d53w5RN/co65Ohn4sUAUtb1rSUAOD6XN9idA==",
-          "dev": true
-        }
-      }
-    },
-    "acorn-jsx": {
-      "version": "5.3.1",
-      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.1.tgz",
-      "integrity": "sha512-K0Ptm/47OKfQRpNQ2J/oIN/3QYiK6FwW+eJbILhsdxh2WTLdl+30o8aGdTbm5JbffpFFAg/g+zi1E+jvJha5ng==",
-      "dev": true
-    },
-    "acorn-walk": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-6.2.0.tgz",
-      "integrity": "sha512-7evsyfH1cLOCdAzZAd43Cic04yKydNx0cF+7tiA19p1XnLLPU4dpCQOqpjqwokFe//vS0QqfqqjCS2JkiIs0cA==",
-      "dev": true
-    },
-    "address": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/address/-/address-1.1.2.tgz",
-      "integrity": "sha512-aT6camzM4xEA54YVJYSqxz1kv4IHnQZRtThJJHhUMRExaU5spC7jX5ugSwTaTgJliIgs4VhZOk7htClvQ/LmRA==",
-      "dev": true
-    },
-    "adjust-sourcemap-loader": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/adjust-sourcemap-loader/-/adjust-sourcemap-loader-4.0.0.tgz",
-      "integrity": "sha512-OXwN5b9pCUXNQHJpwwD2qP40byEmSgzj8B4ydSN0uMNYWiFmJ6x6KwUllMmfk8Rwu/HJDFR7U8ubsWBoN0Xp0A==",
-      "dev": true,
-      "requires": {
-        "loader-utils": "^2.0.0",
-        "regex-parser": "^2.2.11"
-      }
-    },
-    "agent-base": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.1.tgz",
-      "integrity": "sha512-01q25QQDwLSsyfhrKbn8yuur+JNw0H+0Y4JiGIKd3z9aYk/w/2kxD/Upc+t2ZBBSUNff50VjPsSW2YxM8QYKVg==",
-      "dev": true,
-      "requires": {
-        "debug": "4"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
-          "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
-          "dev": true,
-          "requires": {
-            "ms": "^2.1.1"
-          }
-        },
-        "ms": {
-          "version": "2.1.2",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-          "dev": true
-        }
-      }
-    },
-    "aggregate-error": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.1.0.tgz",
-      "integrity": "sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==",
-      "dev": true,
-      "requires": {
-        "clean-stack": "^2.0.0",
-        "indent-string": "^4.0.0"
-      },
-      "dependencies": {
-        "indent-string": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
-          "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==",
-          "dev": true
-        }
-      }
-    },
-    "airbnb-prop-types": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/airbnb-prop-types/-/airbnb-prop-types-2.16.0.tgz",
-      "integrity": "sha512-7WHOFolP/6cS96PhKNrslCLMYAI8yB1Pp6u6XmxozQOiZbsI5ycglZr5cHhBFfuRcQQjzCMith5ZPZdYiJCxUg==",
-      "requires": {
-        "array.prototype.find": "^2.1.1",
-        "function.prototype.name": "^1.1.2",
-        "is-regex": "^1.1.0",
-        "object-is": "^1.1.2",
-        "object.assign": "^4.1.0",
-        "object.entries": "^1.1.2",
-        "prop-types": "^15.7.2",
-        "prop-types-exact": "^1.2.0",
-        "react-is": "^16.13.1"
-      }
-    },
-    "ajv": {
-      "version": "6.12.3",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.3.tgz",
-      "integrity": "sha512-4K0cK3L1hsqk9xIb2z9vs/XU+PGJZ9PNpJRDS9YLzmNdX6jmVPfamLvTJr0aDAusnHyCHO6MjzlkAsgtqp9teA==",
-      "dev": true,
-      "requires": {
-        "fast-deep-equal": "^3.1.1",
-        "fast-json-stable-stringify": "^2.0.0",
-        "json-schema-traverse": "^0.4.1",
-        "uri-js": "^4.2.2"
-      }
-    },
-    "ajv-keywords": {
-      "version": "3.5.2",
-      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
-      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-      "dev": true
-    },
-    "alphanum-sort": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/alphanum-sort/-/alphanum-sort-1.0.2.tgz",
-      "integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=",
-      "dev": true
-    },
-    "ansi": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/ansi/-/ansi-0.3.1.tgz",
-      "integrity": "sha1-DELU+xcWDVqa8eSEus4cZpIsGyE=",
-      "dev": true
-    },
-    "ansi-colors": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.1.tgz",
-      "integrity": "sha512-JoX0apGbHaUJBNl6yF+p6JAFYZ666/hhCGKN5t9QFjbJQKUU/g8MNbFDbvfrgKXvI1QpZplPOnwIo99lX/AAmA==",
-      "dev": true
-    },
-    "ansi-escapes": {
-      "version": "4.3.2",
-      "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
-      "integrity": "sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==",
-      "dev": true,
-      "requires": {
-        "type-fest": "^0.21.3"
-      },
-      "dependencies": {
-        "type-fest": {
-          "version": "0.21.3",
-          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
-          "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==",
-          "dev": true
-        }
-      }
-    },
-    "ansi-html": {
-      "version": "0.0.7",
-      "resolved": "https://registry.npmjs.org/ansi-html/-/ansi-html-0.0.7.tgz",
-      "integrity": "sha1-gTWEAhliqenm/QOflA0S9WynhZ4=",
-      "dev": true
-    },
-    "ansi-regex": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
-      "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
-      "dev": true
-    },
-    "ansi-styles": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-      "dev": true,
-      "requires": {
-        "color-convert": "^1.9.0"
-      }
-    },
-    "anymatch": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-2.0.0.tgz",
-      "integrity": "sha512-5teOsQWABXHHBFP9y3skS5P3d/WfWXpv3FUpy+LorMrNYaT9pI4oLMQX7jzQ2KklNpGpWHzdCXTDT2Y3XGlZBw==",
-      "dev": true,
-      "requires": {
-        "micromatch": "^3.1.4",
-        "normalize-path": "^2.1.1"
-      },
-      "dependencies": {
-        "normalize-path": {
-          "version": "2.1.1",
-          "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz",
-          "integrity": "sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=",
-          "dev": true,
-          "requires": {
-            "remove-trailing-separator": "^1.0.1"
-          }
-        }
-      }
-    },
-    "arch": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/arch/-/arch-2.2.0.tgz",
-      "integrity": "sha512-Of/R0wqp83cgHozfIYLbBMnej79U/SVGOOyuB3VVFv1NRM/PSFMK12x9KVtiYzJqmnU5WR2qp0Z5rHb7sWGnFQ==",
-      "dev": true,
-      "optional": true
-    },
-    "archive-type": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/archive-type/-/archive-type-4.0.0.tgz",
-      "integrity": "sha1-+S5yIzBW38aWlHJ0nCZ72wRrHXA=",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "file-type": "^4.2.0"
-      },
-      "dependencies": {
-        "file-type": {
-          "version": "4.4.0",
-          "resolved": "https://registry.npmjs.org/file-type/-/file-type-4.4.0.tgz",
-          "integrity": "sha1-G2AOX8ofvcboDApwxxyNul95BsU=",
-          "dev": true,
-          "optional": true
-        }
-      }
-    },
-    "are-we-there-yet": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz",
-      "integrity": "sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==",
-      "dev": true,
-      "requires": {
-        "delegates": "^1.0.0",
-        "readable-stream": "^2.0.6"
-      }
-    },
-    "argparse": {
-      "version": "1.0.10",
-      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
-      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
-      "dev": true,
-      "requires": {
-        "sprintf-js": "~1.0.2"
-      }
-    },
-    "argv": {
-      "version": "0.0.2",
-      "resolved": "https://registry.npmjs.org/argv/-/argv-0.0.2.tgz",
-      "integrity": "sha1-7L0W+JSbFXGDcRsb2jNPN4QBhas=",
-      "dev": true
-    },
-    "aria-hidden": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.1.3.tgz",
-      "integrity": "sha512-RhVWFtKH5BiGMycI72q2RAFMLQi8JP9bLuQXgR5a8Znp7P5KOIADSJeyfI8PCVxLEp067B2HbP5JIiI/PXIZeA==",
-      "requires": {
-        "tslib": "^1.0.0"
-      }
-    },
-    "aria-query": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-3.0.0.tgz",
-      "integrity": "sha1-ZbP8wcoRVajJrmTW7uKX8V1RM8w=",
-      "dev": true,
-      "requires": {
-        "ast-types-flow": "0.0.7",
-        "commander": "^2.11.0"
-      },
-      "dependencies": {
-        "commander": {
-          "version": "2.20.3",
-          "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
-          "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
-          "dev": true
-        }
-      }
-    },
-    "arr-diff": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz",
-      "integrity": "sha1-1kYQdP6/7HHn4VI1dhoyml3HxSA=",
-      "dev": true
-    },
-    "arr-flatten": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/arr-flatten/-/arr-flatten-1.1.0.tgz",
-      "integrity": "sha512-L3hKV5R/p5o81R7O02IGnwpDmkp6E982XhtbuwSe3O4qOtMMMtodicASA1Cny2U+aCXcNpml+m4dPsvsJ3jatg==",
-      "dev": true
-    },
-    "arr-union": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/arr-union/-/arr-union-3.1.0.tgz",
-      "integrity": "sha1-45sJrqne+Gao8gbiiK9jkZuuOcQ=",
-      "dev": true
-    },
-    "array-equal": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/array-equal/-/array-equal-1.0.0.tgz",
-      "integrity": "sha1-jCpe8kcv2ep0KwTHenUJO6J1fJM=",
-      "dev": true
-    },
-    "array-find-index": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/array-find-index/-/array-find-index-1.0.2.tgz",
-      "integrity": "sha1-3wEKoSh+Fku9pvlyOwqWoexBh6E=",
-      "dev": true,
-      "optional": true
-    },
-    "array-flatten": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
-      "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=",
-      "dev": true
-    },
-    "array-includes": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.3.tgz",
-      "integrity": "sha512-gcem1KlBU7c9rB+Rq8/3PPKsK2kjqeEBa3bD5kkQo4nYlOHQCJqIJFqBXDEfwaRuYTT4E+FxA9xez7Gf/e3Q7A==",
-      "dev": true,
-      "requires": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.18.0-next.2",
-        "get-intrinsic": "^1.1.1",
-        "is-string": "^1.0.5"
-      },
-      "dependencies": {
-        "es-abstract": {
-          "version": "1.18.3",
-          "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.18.3.tgz",
-          "integrity": "sha512-nQIr12dxV7SSxE6r6f1l3DtAeEYdsGpps13dR0TwJg1S8gyp4ZPgy3FZcHBgbiQqnoqSTb+oC+kO4UQ0C/J8vw==",
-          "dev": true,
-          "requires": {
-            "call-bind": "^1.0.2",
-            "es-to-primitive": "^1.2.1",
-            "function-bind": "^1.1.1",
-            "get-intrinsic": "^1.1.1",
-            "has": "^1.0.3",
-            "has-symbols": "^1.0.2",
-            "is-callable": "^1.2.3",
-            "is-negative-zero": "^2.0.1",
-            "is-regex": "^1.1.3",
-            "is-string": "^1.0.6",
-            "object-inspect": "^1.10.3",
-            "object-keys": "^1.1.1",
-            "object.assign": "^4.1.2",
-            "string.prototype.trimend": "^1.0.4",
-            "string.prototype.trimstart": "^1.0.4",
-            "unbox-primitive": "^1.0.1"
-          }
-        },
-        "has-symbols": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.2.tgz",
-          "integrity": "sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw==",
-          "dev": true
-        },
-        "is-callable": {
-          "version": "1.2.3",
-          "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.3.tgz",
-          "integrity": "sha512-J1DcMe8UYTBSrKezuIUTUwjXsho29693unXM2YhJUTR2txK/eG47bvNa/wipPFmZFgr/N6f1GA66dv0mEyTIyQ==",
-          "dev": true
-        },
-        "is-regex": {
-          "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.3.tgz",
-          "integrity": "sha512-qSVXFz28HM7y+IWX6vLCsexdlvzT1PJNFSBuaQLQ5o0IEw8UDYW6/2+eCMVyIsbM8CNLX2a/QWmSpyxYEHY7CQ==",
-          "dev": true,
-          "requires": {
-            "call-bind": "^1.0.2",
-            "has-symbols": "^1.0.2"
-          }
-        },
-        "object-inspect": {
-          "version": "1.10.3",
-          "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.10.3.tgz",
-          "integrity": "sha512-e5mCJlSH7poANfC8z8S9s9S2IN5/4Zb3aZ33f5s8YqoazCFzNLloLU8r5VCG+G7WoqLvAAZoVMcy3tp/3X0Plw==",
-          "dev": true
-        },
-        "object.assign": {
-          "version": "4.1.2",
-          "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.2.tgz",
-          "integrity": "sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==",
-          "dev": true,
-          "requires": {
-            "call-bind": "^1.0.0",
-            "define-properties": "^1.1.3",
-            "has-symbols": "^1.0.1",
-            "object-keys": "^1.1.1"
-          }
-        },
-        "string.prototype.trimend": {
-          "version": "1.0.4",
-          "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.4.tgz",
-          "integrity": "sha512-y9xCjw1P23Awk8EvTpcyL2NIr1j7wJ39f+k6lvRnSMz+mz9CGz9NYPelDk42kOz6+ql8xjfK8oYzy3jAP5QU5A==",
-          "dev": true,
-          "requires": {
-            "call-bind": "^1.0.2",
-            "define-properties": "^1.1.3"
-          }
-        },
-        "string.prototype.trimstart": {
-          "version": "1.0.4",
-          "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.4.tgz",
-          "integrity": "sha512-jh6e984OBfvxS50tdY2nRZnoC5/mLFKOREQfw8t5yytkoUsJRNxvI/E39qu1sD0OtWI3OC0XgKSmcWwziwYuZw==",
-          "dev": true,
-          "requires": {
-            "call-bind": "^1.0.2",
-            "define-properties": "^1.1.3"
-          }
-        }
-      }
-    },
-    "array-union": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
-      "integrity": "sha1-mjRBDk9OPaI96jdb5b5w8kd47Dk=",
-      "dev": true,
-      "requires": {
-        "array-uniq": "^1.0.1"
-      }
-    },
-    "array-uniq": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz",
-      "integrity": "sha1-r2rId6Jcx/dOBYiUdThY39sk/bY=",
-      "dev": true
-    },
-    "array-unique": {
-      "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.3.2.tgz",
-      "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=",
-      "dev": true
-    },
-    "array.prototype.find": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/array.prototype.find/-/array.prototype.find-2.1.1.tgz",
-      "integrity": "sha512-mi+MYNJYLTx2eNYy+Yh6raoQacCsNeeMUaspFPh9Y141lFSsWxxB8V9mM2ye+eqiRs917J6/pJ4M9ZPzenWckA==",
-      "requires": {
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.17.4"
-      }
-    },
-    "array.prototype.flat": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.2.4.tgz",
-      "integrity": "sha512-4470Xi3GAPAjZqFcljX2xzckv1qeKPizoNkiS0+O4IoPR2ZNpcjE0pkhdihlDouK+x6QOast26B4Q/O9DJnwSg==",
-      "dev": true,
-      "requires": {
-        "call-bind": "^1.0.0",
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.18.0-next.1"
-      },
-      "dependencies": {
-        "es-abstract": {
-          "version": "1.18.3",
-          "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.18.3.tgz",
-          "integrity": "sha512-nQIr12dxV7SSxE6r6f1l3DtAeEYdsGpps13dR0TwJg1S8gyp4ZPgy3FZcHBgbiQqnoqSTb+oC+kO4UQ0C/J8vw==",
-          "dev": true,
-          "requires": {
-            "call-bind": "^1.0.2",
-            "es-to-primitive": "^1.2.1",
-            "function-bind": "^1.1.1",
-            "get-intrinsic": "^1.1.1",
-            "has": "^1.0.3",
-            "has-symbols": "^1.0.2",
-            "is-callable": "^1.2.3",
-            "is-negative-zero": "^2.0.1",
-            "is-regex": "^1.1.3",
-            "is-string": "^1.0.6",
-            "object-inspect": "^1.10.3",
-            "object-keys": "^1.1.1",
-            "object.assign": "^4.1.2",
-            "string.prototype.trimend": "^1.0.4",
-            "string.prototype.trimstart": "^1.0.4",
-            "unbox-primitive": "^1.0.1"
-          }
-        },
-        "has-symbols": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.2.tgz",
-          "integrity": "sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw==",
-          "dev": true
-        },
-        "is-callable": {
-          "version": "1.2.3",
-          "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.3.tgz",
-          "integrity": "sha512-J1DcMe8UYTBSrKezuIUTUwjXsho29693unXM2YhJUTR2txK/eG47bvNa/wipPFmZFgr/N6f1GA66dv0mEyTIyQ==",
-          "dev": true
-        },
-        "is-regex": {
-          "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.3.tgz",
-          "integrity": "sha512-qSVXFz28HM7y+IWX6vLCsexdlvzT1PJNFSBuaQLQ5o0IEw8UDYW6/2+eCMVyIsbM8CNLX2a/QWmSpyxYEHY7CQ==",
-          "dev": true,
-          "requires": {
-            "call-bind": "^1.0.2",
-            "has-symbols": "^1.0.2"
-          }
-        },
-        "object-inspect": {
-          "version": "1.10.3",
-          "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.10.3.tgz",
-          "integrity": "sha512-e5mCJlSH7poANfC8z8S9s9S2IN5/4Zb3aZ33f5s8YqoazCFzNLloLU8r5VCG+G7WoqLvAAZoVMcy3tp/3X0Plw==",
-          "dev": true
-        },
-        "object.assign": {
-          "version": "4.1.2",
-          "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.2.tgz",
-          "integrity": "sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==",
-          "dev": true,
-          "requires": {
-            "call-bind": "^1.0.0",
-            "define-properties": "^1.1.3",
-            "has-symbols": "^1.0.1",
-            "object-keys": "^1.1.1"
-          }
-        },
-        "string.prototype.trimend": {
-          "version": "1.0.4",
-          "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.4.tgz",
-          "integrity": "sha512-y9xCjw1P23Awk8EvTpcyL2NIr1j7wJ39f+k6lvRnSMz+mz9CGz9NYPelDk42kOz6+ql8xjfK8oYzy3jAP5QU5A==",
-          "dev": true,
-          "requires": {
-            "call-bind": "^1.0.2",
-            "define-properties": "^1.1.3"
-          }
-        },
-        "string.prototype.trimstart": {
-          "version": "1.0.4",
-          "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.4.tgz",
-          "integrity": "sha512-jh6e984OBfvxS50tdY2nRZnoC5/mLFKOREQfw8t5yytkoUsJRNxvI/E39qu1sD0OtWI3OC0XgKSmcWwziwYuZw==",
-          "dev": true,
-          "requires": {
-            "call-bind": "^1.0.2",
-            "define-properties": "^1.1.3"
-          }
-        }
-      }
-    },
-    "asn1": {
-      "version": "0.2.4",
-      "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.4.tgz",
-      "integrity": "sha512-jxwzQpLQjSmWXgwaCZE9Nz+glAG01yF1QnWgbhGwHI5A6FRIEY6IVqtHhIepHqI7/kyEyQEagBC5mBEFlIYvdg==",
-      "dev": true,
-      "requires": {
-        "safer-buffer": "~2.1.0"
-      }
-    },
-    "assert-ok": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/assert-ok/-/assert-ok-1.0.0.tgz",
-      "integrity": "sha1-W1z3lfknXFnHFNZsOgbX3nDkPsg="
-    },
-    "assert-plus": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
-      "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=",
-      "dev": true
-    },
-    "assign-symbols": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/assign-symbols/-/assign-symbols-1.0.0.tgz",
-      "integrity": "sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c=",
-      "dev": true
-    },
-    "ast-types-flow": {
-      "version": "0.0.7",
-      "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.7.tgz",
-      "integrity": "sha1-9wtzXGvKGlycItmCw+Oef+ujva0=",
-      "dev": true
-    },
-    "astral-regex": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-1.0.0.tgz",
-      "integrity": "sha512-+Ryf6g3BKoRc7jfp7ad8tM4TtMiaWvbF/1/sQcZPkkS7ag3D5nMBCe2UfOTONtAkaG0tO0ij3C5Lwmf1EiyjHg==",
-      "dev": true
-    },
-    "async": {
-      "version": "2.6.3",
-      "resolved": "https://registry.npmjs.org/async/-/async-2.6.3.tgz",
-      "integrity": "sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==",
-      "dev": true,
-      "requires": {
-        "lodash": "^4.17.14"
-      }
-    },
-    "async-each": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/async-each/-/async-each-1.0.3.tgz",
-      "integrity": "sha512-z/WhQ5FPySLdvREByI2vZiTWwCnF0moMJ1hK9YQwDTHKh6I7/uSckMetoRGb5UBZPC1z0jlw+n/XCgjeH7y1AQ==",
-      "dev": true
-    },
-    "async-limiter": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.1.tgz",
-      "integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==",
-      "dev": true
-    },
-    "asynckit": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-      "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=",
-      "dev": true
-    },
-    "at-least-node": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz",
-      "integrity": "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==",
-      "dev": true
-    },
-    "atob": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
-      "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
-      "dev": true
-    },
-    "autoprefixer": {
-      "version": "10.2.6",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.2.6.tgz",
-      "integrity": "sha512-8lChSmdU6dCNMCQopIf4Pe5kipkAGj/fvTMslCsih0uHpOrXOPUEVOmYMMqmw3cekQkSD7EhIeuYl5y0BLdKqg==",
-      "dev": true,
-      "requires": {
-        "browserslist": "^4.16.6",
-        "caniuse-lite": "^1.0.30001230",
-        "colorette": "^1.2.2",
-        "fraction.js": "^4.1.1",
-        "normalize-range": "^0.1.2",
-        "postcss-value-parser": "^4.1.0"
-      },
-      "dependencies": {
-        "colorette": {
-          "version": "1.2.2",
-          "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.2.2.tgz",
-          "integrity": "sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w==",
-          "dev": true
-        }
-      }
-    },
-    "aws-sign2": {
-      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",
-      "integrity": "sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg=",
-      "dev": true
-    },
-    "aws4": {
-      "version": "1.10.0",
-      "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.10.0.tgz",
-      "integrity": "sha512-3YDiu347mtVtjpyV3u5kVqQLP242c06zwDOgpeRnybmXlYYsLbtTrUBUm8i8srONt+FWobl5aibnU1030PeeuA==",
-      "dev": true
-    },
-    "axios": {
-      "version": "0.21.1",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz",
-      "integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==",
-      "requires": {
-        "follow-redirects": "^1.10.0"
-      }
-    },
-    "axios-cache-adapter": {
-      "version": "2.7.3",
-      "resolved": "https://registry.npmjs.org/axios-cache-adapter/-/axios-cache-adapter-2.7.3.tgz",
-      "integrity": "sha512-A+ZKJ9lhpjthOEp4Z3QR/a9xC4du1ALaAsejgRGrH9ef6kSDxdFrhRpulqsh9khsEnwXxGfgpUuDp1YXMNMEiQ==",
-      "requires": {
-        "cache-control-esm": "1.0.0",
-        "md5": "^2.2.1"
-      }
-    },
-    "axios-mock-adapter": {
-      "version": "1.18.1",
-      "resolved": "https://registry.npmjs.org/axios-mock-adapter/-/axios-mock-adapter-1.18.1.tgz",
-      "integrity": "sha512-kFBZsG1Ma5yxjRGHq5KuuL55mPb7WzFULhypquEhzPg8SH5CXICb+qwC2CCA5u+GQVpiqGPwKSRkd3mBCs6gdw==",
-      "dev": true,
-      "requires": {
-        "fast-deep-equal": "^3.1.1",
-        "is-buffer": "^2.0.3"
-      }
-    },
-    "axobject-query": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
-      "integrity": "sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA==",
-      "dev": true
-    },
-    "babel-eslint": {
-      "version": "10.1.0",
-      "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz",
-      "integrity": "sha512-ifWaTHQ0ce+448CYop8AdrQiBsGrnC+bMgfyKFdi6EsPLTAWG+QfyDeM6OH+FmWnKvEq5NnBMLvlBUPKQZoDSg==",
-      "dev": true,
-      "requires": {
-        "@babel/code-frame": "^7.0.0",
-        "@babel/parser": "^7.7.0",
-        "@babel/traverse": "^7.7.0",
-        "@babel/types": "^7.7.0",
-        "eslint-visitor-keys": "^1.0.0",
-        "resolve": "^1.12.0"
-      }
-    },
-    "babel-jest": {
-      "version": "26.3.0",
-      "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-26.3.0.tgz",
-      "integrity": "sha512-sxPnQGEyHAOPF8NcUsD0g7hDCnvLL2XyblRBcgrzTWBB/mAIpWow3n1bEL+VghnnZfreLhFSBsFluRoK2tRK4g==",
-      "dev": true,
-      "requires": {
-        "@jest/transform": "^26.3.0",
-        "@jest/types": "^26.3.0",
-        "@types/babel__core": "^7.1.7",
-        "babel-plugin-istanbul": "^6.0.0",
-        "babel-preset-jest": "^26.3.0",
-        "chalk": "^4.0.0",
-        "graceful-fs": "^4.2.4",
-        "slash": "^3.0.0"
-      },
-      "dependencies": {
-        "@jest/types": {
-          "version": "26.6.2",
-          "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
-          "integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
-          "dev": true,
-          "requires": {
-            "@types/istanbul-lib-coverage": "^2.0.0",
-            "@types/istanbul-reports": "^3.0.0",
-            "@types/node": "*",
-            "@types/yargs": "^15.0.0",
-            "chalk": "^4.0.0"
-          }
-        },
-        "@types/istanbul-reports": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz",
-          "integrity": "sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==",
-          "dev": true,
-          "requires": {
-            "@types/istanbul-lib-report": "*"
-          }
-        },
-        "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,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
-          "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "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,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "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
-        },
-        "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
-        },
-        "slash": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
-          "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
-          "dev": true
-        },
-        "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,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
-    "babel-loader": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.1.0.tgz",
-      "integrity": "sha512-7q7nC1tYOrqvUrN3LQK4GwSk/TQorZSOlO9C+RZDZpODgyN4ZlCqE5q9cDsyWOliN+aU9B4JX01xK9eJXowJLw==",
-      "dev": true,
-      "requires": {
-        "find-cache-dir": "^2.1.0",
-        "loader-utils": "^1.4.0",
-        "mkdirp": "^0.5.3",
-        "pify": "^4.0.1",
-        "schema-utils": "^2.6.5"
-      },
-      "dependencies": {
-        "json5": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
-          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
-          "dev": true,
-          "requires": {
-            "minimist": "^1.2.0"
-          }
-        },
-        "loader-utils": {
-          "version": "1.4.0",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz",
-          "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
-          "dev": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^1.0.1"
-          }
-        }
-      }
-    },
-    "babel-plugin-dynamic-import-node": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz",
-      "integrity": "sha512-jZVI+s9Zg3IqA/kdi0i6UDCybUI3aSBLnglhYbSSjKlV7yF1F/5LWv8MakQmvYpnbJDS6fcBL2KzHSxNCMtWSQ==",
-      "dev": true,
-      "requires": {
-        "object.assign": "^4.1.0"
-      }
-    },
-    "babel-plugin-istanbul": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-6.0.0.tgz",
-      "integrity": "sha512-AF55rZXpe7trmEylbaE1Gv54wn6rwU03aptvRoVIGP8YykoSxqdVLV1TfwflBCE/QtHmqtP8SWlTENqbK8GCSQ==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.0.0",
-        "@istanbuljs/load-nyc-config": "^1.0.0",
-        "@istanbuljs/schema": "^0.1.2",
-        "istanbul-lib-instrument": "^4.0.0",
-        "test-exclude": "^6.0.0"
-      }
-    },
-    "babel-plugin-jest-hoist": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-26.6.2.tgz",
-      "integrity": "sha512-PO9t0697lNTmcEHH69mdtYiOIkkOlj9fySqfO3K1eCcdISevLAE0xY59VLLUj0SoiPiTX/JU2CYFpILydUa5Lw==",
-      "dev": true,
-      "requires": {
-        "@babel/template": "^7.3.3",
-        "@babel/types": "^7.3.3",
-        "@types/babel__core": "^7.0.0",
-        "@types/babel__traverse": "^7.0.6"
-      }
-    },
-    "babel-plugin-polyfill-corejs2": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.2.2.tgz",
-      "integrity": "sha512-kISrENsJ0z5dNPq5eRvcctITNHYXWOA4DUZRFYCz3jYCcvTb/A546LIddmoGNMVYg2U38OyFeNosQwI9ENTqIQ==",
-      "dev": true,
-      "requires": {
-        "@babel/compat-data": "^7.13.11",
-        "@babel/helper-define-polyfill-provider": "^0.2.2",
-        "semver": "^6.1.1"
-      },
-      "dependencies": {
-        "semver": {
-          "version": "6.3.0",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-          "dev": true
-        }
-      }
-    },
-    "babel-plugin-polyfill-corejs3": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.2.3.tgz",
-      "integrity": "sha512-rCOFzEIJpJEAU14XCcV/erIf/wZQMmMT5l5vXOpL5uoznyOGfDIjPj6FVytMvtzaKSTSVKouOCTPJ5OMUZH30g==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-define-polyfill-provider": "^0.2.2",
-        "core-js-compat": "^3.14.0"
-      }
-    },
-    "babel-plugin-polyfill-regenerator": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.2.2.tgz",
-      "integrity": "sha512-Goy5ghsc21HgPDFtzRkSirpZVW35meGoTmTOb2bxqdl60ghub4xOidgNTHaZfQ2FaxQsKmwvXtOAkcIS4SMBWg==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-define-polyfill-provider": "^0.2.2"
-      }
-    },
-    "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==",
-      "dev": true,
-      "requires": {
-        "@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"
-      },
-      "dependencies": {
-        "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==",
-          "dev": true,
-          "requires": {
-            "@formatjs/intl-numberformat": "^5.5.2"
-          }
-        }
-      }
-    },
-    "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",
-      "integrity": "sha512-65ewumYJ85QiXdcB/jmiU0y0jg6eL6CdnDqQAqQ8JMOKh1E52VPG3NJzbVKWcgovUR5GBH8IWpCXQ7I8Q3wjgw==",
-      "dev": true,
-      "requires": {
-        "@babel/types": "^7.4",
-        "is-valid-path": "^0.1.1"
-      }
-    },
-    "babel-polyfill": {
-      "version": "6.26.0",
-      "resolved": "https://registry.npmjs.org/babel-polyfill/-/babel-polyfill-6.26.0.tgz",
-      "integrity": "sha1-N5k3q8Z9eJWXCtxiHyhM2WbPIVM=",
-      "dev": true,
-      "requires": {
-        "babel-runtime": "^6.26.0",
-        "core-js": "^2.5.0",
-        "regenerator-runtime": "^0.10.5"
-      },
-      "dependencies": {
-        "core-js": {
-          "version": "2.6.12",
-          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
-          "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
-          "dev": true
-        },
-        "regenerator-runtime": {
-          "version": "0.10.5",
-          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz",
-          "integrity": "sha1-M2w+/BIgrc7dosn6tntaeVWjNlg=",
-          "dev": true
-        }
-      }
-    },
-    "babel-preset-current-node-syntax": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-1.0.1.tgz",
-      "integrity": "sha512-M7LQ0bxarkxQoN+vz5aJPsLBn77n8QgTFmo8WK0/44auK2xlCXrYcUxHFxgU7qW5Yzw/CjmLRK2uJzaCd7LvqQ==",
-      "dev": true,
-      "requires": {
-        "@babel/plugin-syntax-async-generators": "^7.8.4",
-        "@babel/plugin-syntax-bigint": "^7.8.3",
-        "@babel/plugin-syntax-class-properties": "^7.8.3",
-        "@babel/plugin-syntax-import-meta": "^7.8.3",
-        "@babel/plugin-syntax-json-strings": "^7.8.3",
-        "@babel/plugin-syntax-logical-assignment-operators": "^7.8.3",
-        "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3",
-        "@babel/plugin-syntax-numeric-separator": "^7.8.3",
-        "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
-        "@babel/plugin-syntax-optional-catch-binding": "^7.8.3",
-        "@babel/plugin-syntax-optional-chaining": "^7.8.3",
-        "@babel/plugin-syntax-top-level-await": "^7.8.3"
-      }
-    },
-    "babel-preset-jest": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/babel-preset-jest/-/babel-preset-jest-26.6.2.tgz",
-      "integrity": "sha512-YvdtlVm9t3k777c5NPQIv6cxFFFapys25HiUmuSgHwIZhfifweR5c5Sf5nwE3MAbfu327CYSvps8Yx6ANLyleQ==",
-      "dev": true,
-      "requires": {
-        "babel-plugin-jest-hoist": "^26.6.2",
-        "babel-preset-current-node-syntax": "^1.0.0"
-      }
-    },
-    "babel-runtime": {
-      "version": "6.26.0",
-      "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
-      "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
-      "dev": true,
-      "requires": {
-        "core-js": "^2.4.0",
-        "regenerator-runtime": "^0.11.0"
-      },
-      "dependencies": {
-        "core-js": {
-          "version": "2.6.12",
-          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
-          "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
-          "dev": true
-        },
-        "regenerator-runtime": {
-          "version": "0.11.1",
-          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
-          "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==",
-          "dev": true
-        }
-      }
-    },
-    "balanced-match": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
-      "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c="
-    },
-    "base": {
-      "version": "0.11.2",
-      "resolved": "https://registry.npmjs.org/base/-/base-0.11.2.tgz",
-      "integrity": "sha512-5T6P4xPgpp0YDFvSWwEZ4NoE3aM4QBQXDzmVbraCkFj8zHM+mba8SyqB5DbZWyR7mYHo6Y7BdQo3MoA4m0TeQg==",
-      "dev": true,
-      "requires": {
-        "cache-base": "^1.0.1",
-        "class-utils": "^0.3.5",
-        "component-emitter": "^1.2.1",
-        "define-property": "^1.0.0",
-        "isobject": "^3.0.1",
-        "mixin-deep": "^1.2.0",
-        "pascalcase": "^0.1.1"
-      },
-      "dependencies": {
-        "define-property": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
-          "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=",
-          "dev": true,
-          "requires": {
-            "is-descriptor": "^1.0.0"
-          }
-        },
-        "is-accessor-descriptor": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
-          "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==",
-          "dev": true,
-          "requires": {
-            "kind-of": "^6.0.0"
-          }
-        },
-        "is-data-descriptor": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz",
-          "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==",
-          "dev": true,
-          "requires": {
-            "kind-of": "^6.0.0"
-          }
-        },
-        "is-descriptor": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz",
-          "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==",
-          "dev": true,
-          "requires": {
-            "is-accessor-descriptor": "^1.0.0",
-            "is-data-descriptor": "^1.0.0",
-            "kind-of": "^6.0.2"
-          }
-        }
-      }
-    },
-    "base64-js": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
-      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
-      "dev": true,
-      "optional": true
-    },
-    "batch": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz",
-      "integrity": "sha1-3DQxT05nkxgJP8dgJyUl+UvyXBY=",
-      "dev": true
-    },
-    "bcrypt-pbkdf": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz",
-      "integrity": "sha1-pDAdOJtqQ/m2f/PKEaP2Y342Dp4=",
-      "dev": true,
-      "requires": {
-        "tweetnacl": "^0.14.3"
-      }
-    },
-    "bfj": {
-      "version": "6.1.2",
-      "resolved": "https://registry.npmjs.org/bfj/-/bfj-6.1.2.tgz",
-      "integrity": "sha512-BmBJa4Lip6BPRINSZ0BPEIfB1wUY/9rwbwvIHQA1KjX9om29B6id0wnWXq7m3bn5JrUVjeOTnVuhPT1FiHwPGw==",
-      "dev": true,
-      "requires": {
-        "bluebird": "^3.5.5",
-        "check-types": "^8.0.3",
-        "hoopy": "^0.1.4",
-        "tryer": "^1.0.1"
-      }
-    },
-    "big.js": {
-      "version": "5.2.2",
-      "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
-      "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
-      "dev": true
-    },
-    "bin-build": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/bin-build/-/bin-build-3.0.0.tgz",
-      "integrity": "sha512-jcUOof71/TNAI2uM5uoUaDq2ePcVBQ3R/qhxAz1rX7UfvduAL/RXD3jXzvn8cVcDJdGVkiR1shal3OH0ImpuhA==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "decompress": "^4.0.0",
-        "download": "^6.2.2",
-        "execa": "^0.7.0",
-        "p-map-series": "^1.0.0",
-        "tempfile": "^2.0.0"
-      },
-      "dependencies": {
-        "cross-spawn": {
-          "version": "5.1.0",
-          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz",
-          "integrity": "sha1-6L0O/uWPz/b4+UUQoKVUu/ojVEk=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "lru-cache": "^4.0.1",
-            "shebang-command": "^1.2.0",
-            "which": "^1.2.9"
-          }
-        },
-        "execa": {
-          "version": "0.7.0",
-          "resolved": "https://registry.npmjs.org/execa/-/execa-0.7.0.tgz",
-          "integrity": "sha1-lEvs00zEHuMqY6n68nrVpl/Fl3c=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "cross-spawn": "^5.0.1",
-            "get-stream": "^3.0.0",
-            "is-stream": "^1.1.0",
-            "npm-run-path": "^2.0.0",
-            "p-finally": "^1.0.0",
-            "signal-exit": "^3.0.0",
-            "strip-eof": "^1.0.0"
-          }
-        },
-        "get-stream": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
-          "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=",
-          "dev": true,
-          "optional": true
-        },
-        "lru-cache": {
-          "version": "4.1.5",
-          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz",
-          "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "pseudomap": "^1.0.2",
-            "yallist": "^2.1.2"
-          }
-        },
-        "yallist": {
-          "version": "2.1.2",
-          "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
-          "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=",
-          "dev": true,
-          "optional": true
-        }
-      }
-    },
-    "bin-check": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/bin-check/-/bin-check-4.1.0.tgz",
-      "integrity": "sha512-b6weQyEUKsDGFlACWSIOfveEnImkJyK/FGW6FAG42loyoquvjdtOIqO6yBFzHyqyVVhNgNkQxxx09SFLK28YnA==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "execa": "^0.7.0",
-        "executable": "^4.1.0"
-      },
-      "dependencies": {
-        "cross-spawn": {
-          "version": "5.1.0",
-          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz",
-          "integrity": "sha1-6L0O/uWPz/b4+UUQoKVUu/ojVEk=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "lru-cache": "^4.0.1",
-            "shebang-command": "^1.2.0",
-            "which": "^1.2.9"
-          }
-        },
-        "execa": {
-          "version": "0.7.0",
-          "resolved": "https://registry.npmjs.org/execa/-/execa-0.7.0.tgz",
-          "integrity": "sha1-lEvs00zEHuMqY6n68nrVpl/Fl3c=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "cross-spawn": "^5.0.1",
-            "get-stream": "^3.0.0",
-            "is-stream": "^1.1.0",
-            "npm-run-path": "^2.0.0",
-            "p-finally": "^1.0.0",
-            "signal-exit": "^3.0.0",
-            "strip-eof": "^1.0.0"
-          }
-        },
-        "get-stream": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
-          "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=",
-          "dev": true,
-          "optional": true
-        },
-        "lru-cache": {
-          "version": "4.1.5",
-          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz",
-          "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "pseudomap": "^1.0.2",
-            "yallist": "^2.1.2"
-          }
-        },
-        "yallist": {
-          "version": "2.1.2",
-          "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
-          "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=",
-          "dev": true,
-          "optional": true
-        }
-      }
-    },
-    "bin-version": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/bin-version/-/bin-version-3.1.0.tgz",
-      "integrity": "sha512-Mkfm4iE1VFt4xd4vH+gx+0/71esbfus2LsnCGe8Pi4mndSPyT+NGES/Eg99jx8/lUGWfu3z2yuB/bt5UB+iVbQ==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "execa": "^1.0.0",
-        "find-versions": "^3.0.0"
-      }
-    },
-    "bin-version-check": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/bin-version-check/-/bin-version-check-4.0.0.tgz",
-      "integrity": "sha512-sR631OrhC+1f8Cvs8WyVWOA33Y8tgwjETNPyyD/myRBXLkfS/vl74FmH/lFcRl9KY3zwGh7jFhvyk9vV3/3ilQ==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "bin-version": "^3.0.0",
-        "semver": "^5.6.0",
-        "semver-truncate": "^1.1.2"
-      }
-    },
-    "bin-wrapper": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/bin-wrapper/-/bin-wrapper-4.1.0.tgz",
-      "integrity": "sha512-hfRmo7hWIXPkbpi0ZltboCMVrU+0ClXR/JgbCKKjlDjQf6igXa7OwdqNcFWQZPZTgiY7ZpzE3+LjjkLiTN2T7Q==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "bin-check": "^4.1.0",
-        "bin-version-check": "^4.0.0",
-        "download": "^7.1.0",
-        "import-lazy": "^3.1.0",
-        "os-filter-obj": "^2.0.0",
-        "pify": "^4.0.1"
-      },
-      "dependencies": {
-        "download": {
-          "version": "7.1.0",
-          "resolved": "https://registry.npmjs.org/download/-/download-7.1.0.tgz",
-          "integrity": "sha512-xqnBTVd/E+GxJVrX5/eUJiLYjCGPwMpdL+jGhGU57BvtcA7wwhtHVbXBeUk51kOpW3S7Jn3BQbN9Q1R1Km2qDQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "archive-type": "^4.0.0",
-            "caw": "^2.0.1",
-            "content-disposition": "^0.5.2",
-            "decompress": "^4.2.0",
-            "ext-name": "^5.0.0",
-            "file-type": "^8.1.0",
-            "filenamify": "^2.0.0",
-            "get-stream": "^3.0.0",
-            "got": "^8.3.1",
-            "make-dir": "^1.2.0",
-            "p-event": "^2.1.0",
-            "pify": "^3.0.0"
-          },
-          "dependencies": {
-            "pify": {
-              "version": "3.0.0",
-              "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
-              "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
-              "dev": true,
-              "optional": true
-            }
-          }
-        },
-        "file-type": {
-          "version": "8.1.0",
-          "resolved": "https://registry.npmjs.org/file-type/-/file-type-8.1.0.tgz",
-          "integrity": "sha512-qyQ0pzAy78gVoJsmYeNgl8uH8yKhr1lVhW7JbzJmnlRi0I4R2eEDEJZVKG8agpDnLpacwNbDhLNG/LMdxHD2YQ==",
-          "dev": true,
-          "optional": true
-        },
-        "get-stream": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
-          "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=",
-          "dev": true,
-          "optional": true
-        },
-        "got": {
-          "version": "8.3.2",
-          "resolved": "https://registry.npmjs.org/got/-/got-8.3.2.tgz",
-          "integrity": "sha512-qjUJ5U/hawxosMryILofZCkm3C84PLJS/0grRIpjAwu+Lkxxj5cxeCU25BG0/3mDSpXKTyZr8oh8wIgLaH0QCw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "@sindresorhus/is": "^0.7.0",
-            "cacheable-request": "^2.1.1",
-            "decompress-response": "^3.3.0",
-            "duplexer3": "^0.1.4",
-            "get-stream": "^3.0.0",
-            "into-stream": "^3.1.0",
-            "is-retry-allowed": "^1.1.0",
-            "isurl": "^1.0.0-alpha5",
-            "lowercase-keys": "^1.0.0",
-            "mimic-response": "^1.0.0",
-            "p-cancelable": "^0.4.0",
-            "p-timeout": "^2.0.1",
-            "pify": "^3.0.0",
-            "safe-buffer": "^5.1.1",
-            "timed-out": "^4.0.1",
-            "url-parse-lax": "^3.0.0",
-            "url-to-options": "^1.0.1"
-          },
-          "dependencies": {
-            "pify": {
-              "version": "3.0.0",
-              "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
-              "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
-              "dev": true,
-              "optional": true
-            }
-          }
-        },
-        "make-dir": {
-          "version": "1.3.0",
-          "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-1.3.0.tgz",
-          "integrity": "sha512-2w31R7SJtieJJnQtGc7RVL2StM2vGYVfqUOvUDxH6bC6aJTxPxTF0GnIgCyu7tjockiUWAYQRbxa7vKn34s5sQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "pify": "^3.0.0"
-          },
-          "dependencies": {
-            "pify": {
-              "version": "3.0.0",
-              "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
-              "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
-              "dev": true,
-              "optional": true
-            }
-          }
-        },
-        "p-cancelable": {
-          "version": "0.4.1",
-          "resolved": "https://registry.npmjs.org/p-cancelable/-/p-cancelable-0.4.1.tgz",
-          "integrity": "sha512-HNa1A8LvB1kie7cERyy21VNeHb2CWJJYqyyC2o3klWFfMGlFmWv2Z7sFgZH8ZiaYL95ydToKTFVXgMV/Os0bBQ==",
-          "dev": true,
-          "optional": true
-        },
-        "p-event": {
-          "version": "2.3.1",
-          "resolved": "https://registry.npmjs.org/p-event/-/p-event-2.3.1.tgz",
-          "integrity": "sha512-NQCqOFhbpVTMX4qMe8PF8lbGtzZ+LCiN7pcNrb/413Na7+TRoe1xkKUzuWa/YEJdGQ0FvKtj35EEbDoVPO2kbA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "p-timeout": "^2.0.1"
-          }
-        },
-        "p-timeout": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/p-timeout/-/p-timeout-2.0.1.tgz",
-          "integrity": "sha512-88em58dDVB/KzPEx1X0N3LwFfYZPyDc4B6eF38M1rk9VTZMbxXXgjugz8mmwpS9Ox4BDZ+t6t3QP5+/gazweIA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "p-finally": "^1.0.0"
-          }
-        },
-        "prepend-http": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-2.0.0.tgz",
-          "integrity": "sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc=",
-          "dev": true,
-          "optional": true
-        },
-        "url-parse-lax": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/url-parse-lax/-/url-parse-lax-3.0.0.tgz",
-          "integrity": "sha1-FrXK/Afb42dsGxmZF3gj1lA6yww=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "prepend-http": "^2.0.0"
-          }
-        }
-      }
-    },
-    "binary-extensions": {
-      "version": "1.13.1",
-      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-1.13.1.tgz",
-      "integrity": "sha512-Un7MIEDdUC5gNpcGDV97op1Ywk748MpHcFTHoYs6qnj1Z3j7I53VG3nwZhKzoBZmbdRNnb6WRdFlwl7tSDuZGw==",
-      "dev": true
-    },
-    "bindings": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
-      "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "file-uri-to-path": "1.0.0"
-      }
-    },
-    "bl": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/bl/-/bl-1.2.3.tgz",
-      "integrity": "sha512-pvcNpa0UU69UT341rO6AYy4FVAIkUHuZXRIWbq+zHnsVcRzDDjIAhGuuYoi0d//cwIwtt4pkpKycWEfjdV+vww==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "readable-stream": "^2.3.5",
-        "safe-buffer": "^5.1.1"
-      }
-    },
-    "bluebird": {
-      "version": "3.7.2",
-      "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
-      "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==",
-      "dev": true
-    },
-    "body-parser": {
-      "version": "1.19.0",
-      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.19.0.tgz",
-      "integrity": "sha512-dhEPs72UPbDnAQJ9ZKMNTP6ptJaionhP5cBb541nXPlW60Jepo9RV/a4fX4XWW9CuFNK22krhrj1+rgzifNCsw==",
-      "dev": true,
-      "requires": {
-        "bytes": "3.1.0",
-        "content-type": "~1.0.4",
-        "debug": "2.6.9",
-        "depd": "~1.1.2",
-        "http-errors": "1.7.2",
-        "iconv-lite": "0.4.24",
-        "on-finished": "~2.3.0",
-        "qs": "6.7.0",
-        "raw-body": "2.4.0",
-        "type-is": "~1.6.17"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "2.6.9",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-          "dev": true,
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
-        "qs": {
-          "version": "6.7.0",
-          "resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz",
-          "integrity": "sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ==",
-          "dev": true
-        }
-      }
-    },
-    "bonjour": {
-      "version": "3.5.0",
-      "resolved": "https://registry.npmjs.org/bonjour/-/bonjour-3.5.0.tgz",
-      "integrity": "sha1-jokKGD2O6aI5OzhExpGkK897yfU=",
-      "dev": true,
-      "requires": {
-        "array-flatten": "^2.1.0",
-        "deep-equal": "^1.0.1",
-        "dns-equal": "^1.0.0",
-        "dns-txt": "^2.0.2",
-        "multicast-dns": "^6.0.1",
-        "multicast-dns-service-types": "^1.1.0"
-      },
-      "dependencies": {
-        "array-flatten": {
-          "version": "2.1.2",
-          "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-2.1.2.tgz",
-          "integrity": "sha512-hNfzcOV8W4NdualtqBFPyVO+54DSJuZGY9qT4pRroB6S9e3iiido2ISIC5h9R2sPJ8H3FHCIiEnsv1lPXO3KtQ==",
-          "dev": true
-        }
-      }
-    },
-    "boolbase": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
-      "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
-      "dev": true
-    },
-    "bootstrap": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.0.tgz",
-      "integrity": "sha512-Io55IuQY3kydzHtbGvQya3H+KorS/M9rSNyfCGCg9WZ4pyT/lCxIlpJgG1GXW/PswzC84Tr2fBYi+7+jFVQQBw=="
-    },
-    "brace-expansion": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-      "requires": {
-        "balanced-match": "^1.0.0",
-        "concat-map": "0.0.1"
-      }
-    },
-    "braces": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz",
-      "integrity": "sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==",
-      "dev": true,
-      "requires": {
-        "arr-flatten": "^1.1.0",
-        "array-unique": "^0.3.2",
-        "extend-shallow": "^2.0.1",
-        "fill-range": "^4.0.0",
-        "isobject": "^3.0.1",
-        "repeat-element": "^1.1.2",
-        "snapdragon": "^0.8.1",
-        "snapdragon-node": "^2.0.1",
-        "split-string": "^3.0.2",
-        "to-regex": "^3.0.1"
-      },
-      "dependencies": {
-        "extend-shallow": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-          "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-          "dev": true,
-          "requires": {
-            "is-extendable": "^0.1.0"
-          }
-        }
-      }
-    },
-    "browser-process-hrtime": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz",
-      "integrity": "sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==",
-      "dev": true
-    },
-    "browser-resolve": {
-      "version": "1.11.3",
-      "resolved": "https://registry.npmjs.org/browser-resolve/-/browser-resolve-1.11.3.tgz",
-      "integrity": "sha512-exDi1BYWB/6raKHmDTCicQfTkqwN5fioMFV4j8BsfMU4R2DK/QfZfK7kOVkmWCNANf0snkBzqGqAJBao9gZMdQ==",
-      "dev": true,
-      "requires": {
-        "resolve": "1.1.7"
-      },
-      "dependencies": {
-        "resolve": {
-          "version": "1.1.7",
-          "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.1.7.tgz",
-          "integrity": "sha1-IDEU2CrSxe2ejgQRs5ModeiJ6Xs=",
-          "dev": true
-        }
-      }
-    },
-    "browserslist": {
-      "version": "4.16.6",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.16.6.tgz",
-      "integrity": "sha512-Wspk/PqO+4W9qp5iUTJsa1B/QrYn1keNCcEP5OvP7WBwT4KaDly0uONYmC6Xa3Z5IqnUgS0KcgLYu1l74x0ZXQ==",
-      "dev": true,
-      "requires": {
-        "caniuse-lite": "^1.0.30001219",
-        "colorette": "^1.2.2",
-        "electron-to-chromium": "^1.3.723",
-        "escalade": "^3.1.1",
-        "node-releases": "^1.1.71"
-      },
-      "dependencies": {
-        "colorette": {
-          "version": "1.2.2",
-          "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.2.2.tgz",
-          "integrity": "sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w==",
-          "dev": true
-        }
-      }
-    },
-    "bser": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/bser/-/bser-2.1.1.tgz",
-      "integrity": "sha512-gQxTNE/GAfIIrmHLUE3oJyp5FO6HRBfhjnw4/wMmA63ZGDJnWBmgY/lyQBpnDUkGmAhbSe39tx2d/iTOAfglwQ==",
-      "dev": true,
-      "requires": {
-        "node-int64": "^0.4.0"
-      }
-    },
-    "buffer": {
-      "version": "5.7.1",
-      "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
-      "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "base64-js": "^1.3.1",
-        "ieee754": "^1.1.13"
-      }
-    },
-    "buffer-alloc": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/buffer-alloc/-/buffer-alloc-1.2.0.tgz",
-      "integrity": "sha512-CFsHQgjtW1UChdXgbyJGtnm+O/uLQeZdtbDo8mfUgYXCHSM1wgrVxXm6bSyrUuErEb+4sYVGCzASBRot7zyrow==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "buffer-alloc-unsafe": "^1.1.0",
-        "buffer-fill": "^1.0.0"
-      }
-    },
-    "buffer-alloc-unsafe": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/buffer-alloc-unsafe/-/buffer-alloc-unsafe-1.1.0.tgz",
-      "integrity": "sha512-TEM2iMIEQdJ2yjPJoSIsldnleVaAk1oW3DBVUykyOLsEsFmEc9kn+SFFPz+gl54KQNxlDnAwCXosOS9Okx2xAg==",
-      "dev": true,
-      "optional": true
-    },
-    "buffer-crc32": {
-      "version": "0.2.13",
-      "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
-      "integrity": "sha1-DTM+PwDqxQqhRUq9MO+MKl2ackI=",
-      "dev": true,
-      "optional": true
-    },
-    "buffer-fill": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/buffer-fill/-/buffer-fill-1.0.0.tgz",
-      "integrity": "sha1-+PeLdniYiO858gXNY39o5wISKyw=",
-      "dev": true,
-      "optional": true
-    },
-    "buffer-from": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz",
-      "integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==",
-      "dev": true
-    },
-    "buffer-indexof": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/buffer-indexof/-/buffer-indexof-1.1.1.tgz",
-      "integrity": "sha512-4/rOEg86jivtPTeOUUT61jJO1Ya1TrR/OkqCSZDyq84WJh3LuuiphBYJN+fm5xufIk4XAFcEwte/8WzC8If/1g==",
-      "dev": true
-    },
-    "bytes": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz",
-      "integrity": "sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==",
-      "dev": true
-    },
-    "cache-base": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/cache-base/-/cache-base-1.0.1.tgz",
-      "integrity": "sha512-AKcdTnFSWATd5/GCPRxr2ChwIJ85CeyrEyjRHlKxQ56d4XJMGym0uAiKn0xbLOGOl3+yRpOTi484dVCEc5AUzQ==",
-      "dev": true,
-      "requires": {
-        "collection-visit": "^1.0.0",
-        "component-emitter": "^1.2.1",
-        "get-value": "^2.0.6",
-        "has-value": "^1.0.0",
-        "isobject": "^3.0.1",
-        "set-value": "^2.0.0",
-        "to-object-path": "^0.3.0",
-        "union-value": "^1.0.0",
-        "unset-value": "^1.0.0"
-      }
-    },
-    "cache-control-esm": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/cache-control-esm/-/cache-control-esm-1.0.0.tgz",
-      "integrity": "sha512-Fa3UV4+eIk4EOih8FTV6EEsVKO0W5XWtNs6FC3InTfVz+EjurjPfDXY5wZDo/lxjDxg5RjNcurLyxEJBcEUx9g=="
-    },
-    "cacheable-request": {
-      "version": "2.1.4",
-      "resolved": "https://registry.npmjs.org/cacheable-request/-/cacheable-request-2.1.4.tgz",
-      "integrity": "sha1-DYCIAbY0KtM8kd+dC0TcCbkeXD0=",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "clone-response": "1.0.2",
-        "get-stream": "3.0.0",
-        "http-cache-semantics": "3.8.1",
-        "keyv": "3.0.0",
-        "lowercase-keys": "1.0.0",
-        "normalize-url": "2.0.1",
-        "responselike": "1.0.2"
-      },
-      "dependencies": {
-        "get-stream": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
-          "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=",
-          "dev": true,
-          "optional": true
-        },
-        "lowercase-keys": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-1.0.0.tgz",
-          "integrity": "sha1-TjNms55/VFfjXxMkvfb4jQv8cwY=",
-          "dev": true,
-          "optional": true
-        },
-        "normalize-url": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-2.0.1.tgz",
-          "integrity": "sha512-D6MUW4K/VzoJ4rJ01JFKxDrtY1v9wrgzCX5f2qj/lzH1m/lW6MhUZFKerVsnyjOhOsYzI9Kqqak+10l4LvLpMw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "prepend-http": "^2.0.0",
-            "query-string": "^5.0.1",
-            "sort-keys": "^2.0.0"
-          }
-        },
-        "prepend-http": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-2.0.0.tgz",
-          "integrity": "sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc=",
-          "dev": true,
-          "optional": true
-        },
-        "query-string": {
-          "version": "5.1.1",
-          "resolved": "https://registry.npmjs.org/query-string/-/query-string-5.1.1.tgz",
-          "integrity": "sha512-gjWOsm2SoGlgLEdAGt7a6slVOk9mGiXmPFMqrEhLQ68rhQuBnpfs3+EmlvqKyxnCo9/PPlF+9MtY02S1aFg+Jw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "decode-uri-component": "^0.2.0",
-            "object-assign": "^4.1.0",
-            "strict-uri-encode": "^1.0.0"
-          }
-        },
-        "sort-keys": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/sort-keys/-/sort-keys-2.0.0.tgz",
-          "integrity": "sha1-ZYU1WEhh7JfXMNbPQYIuH1ZoQSg=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "is-plain-obj": "^1.0.0"
-          }
-        }
-      }
-    },
-    "call-bind": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
-      "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
-      "requires": {
-        "function-bind": "^1.1.1",
-        "get-intrinsic": "^1.0.2"
-      }
-    },
-    "caller-callsite": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/caller-callsite/-/caller-callsite-2.0.0.tgz",
-      "integrity": "sha1-hH4PzgoiN1CpoCfFSzNzGtMVQTQ=",
-      "dev": true,
-      "requires": {
-        "callsites": "^2.0.0"
-      },
-      "dependencies": {
-        "callsites": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/callsites/-/callsites-2.0.0.tgz",
-          "integrity": "sha1-BuuE8A7qQT2oav/vrL/7Ngk7PFA=",
-          "dev": true
-        }
-      }
-    },
-    "caller-path": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/caller-path/-/caller-path-2.0.0.tgz",
-      "integrity": "sha1-Ro+DBE42mrIBD6xfBs7uFbsssfQ=",
-      "dev": true,
-      "requires": {
-        "caller-callsite": "^2.0.0"
-      }
-    },
-    "callsites": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
-      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
-      "dev": true
-    },
-    "camel-case": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-4.1.2.tgz",
-      "integrity": "sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==",
-      "dev": true,
-      "requires": {
-        "pascal-case": "^3.1.2",
-        "tslib": "^2.0.3"
-      },
-      "dependencies": {
-        "tslib": {
-          "version": "2.3.0",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
-          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
-          "dev": true
-        }
-      }
-    },
-    "camelcase": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.2.0.tgz",
-      "integrity": "sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg==",
-      "dev": true
-    },
-    "camelcase-keys": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz",
-      "integrity": "sha1-MIvur/3ygRkFHvodkyITyRuPkuc=",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "camelcase": "^2.0.0",
-        "map-obj": "^1.0.0"
-      },
-      "dependencies": {
-        "camelcase": {
-          "version": "2.1.1",
-          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-2.1.1.tgz",
-          "integrity": "sha1-fB0W1nmhu+WcoCys7PsBHiAfWh8=",
-          "dev": true,
-          "optional": true
-        }
-      }
-    },
-    "caniuse-api": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
-      "integrity": "sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==",
-      "dev": true,
-      "requires": {
-        "browserslist": "^4.0.0",
-        "caniuse-lite": "^1.0.0",
-        "lodash.memoize": "^4.1.2",
-        "lodash.uniq": "^4.5.0"
-      }
-    },
-    "caniuse-lite": {
-      "version": "1.0.30001243",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001243.tgz",
-      "integrity": "sha512-vNxw9mkTBtkmLFnJRv/2rhs1yufpDfCkBZexG3Y0xdOH2Z/eE/85E4Dl5j1YUN34nZVsSp6vVRFQRrez9wJMRA==",
-      "dev": true
-    },
-    "caporal": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/caporal/-/caporal-1.3.0.tgz",
-      "integrity": "sha512-4bj21UXbEu5cF+1gVjhwwRqMhY3lR7CUTlBr6YX3uzftL4l/sbu8EoHfOLZWHr+HeiosW9fTWkQCS2UZMAk5lw==",
-      "dev": true,
-      "requires": {
-        "bluebird": "^3.4.7",
-        "cli-table3": "^0.5.0",
-        "colorette": "^1.0.1",
-        "fast-levenshtein": "^2.0.6",
-        "lodash": "^4.17.14",
-        "micromist": "1.1.0",
-        "prettyjson": "^1.2.1",
-        "tabtab": "^2.2.2",
-        "winston": "^2.3.1"
-      }
-    },
-    "capture-exit": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/capture-exit/-/capture-exit-2.0.0.tgz",
-      "integrity": "sha512-PiT/hQmTonHhl/HFGN+Lx3JJUznrVYJ3+AQsnthneZbvW7x+f08Tk7yLJTLEOUvBTbduLeeBkxEaYXUOUrRq6g==",
-      "dev": true,
-      "requires": {
-        "rsvp": "^4.8.4"
-      }
-    },
-    "caseless": {
-      "version": "0.12.0",
-      "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
-      "integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=",
-      "dev": true
-    },
-    "cast-array": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/cast-array/-/cast-array-1.0.1.tgz",
-      "integrity": "sha1-Jk7xEp5YiLxIysQP6RTp9puNGJ0=",
-      "requires": {
-        "isarray": "0.0.1"
-      }
-    },
-    "caw": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/caw/-/caw-2.0.1.tgz",
-      "integrity": "sha512-Cg8/ZSBEa8ZVY9HspcGUYaK63d/bN7rqS3CYCzEGUxuYv6UlmcjzDUz2fCFFHyTvUW5Pk0I+3hkA3iXlIj6guA==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "get-proxy": "^2.0.0",
-        "isurl": "^1.0.0-alpha5",
-        "tunnel-agent": "^0.6.0",
-        "url-to-options": "^1.0.1"
-      }
-    },
-    "chalk": {
-      "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-      "dev": true,
-      "requires": {
-        "ansi-styles": "^3.2.1",
-        "escape-string-regexp": "^1.0.5",
-        "supports-color": "^5.3.0"
-      },
-      "dependencies": {
-        "supports-color": {
-          "version": "5.5.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^3.0.0"
-          }
-        }
-      }
-    },
-    "char-regex": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-1.0.2.tgz",
-      "integrity": "sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==",
-      "dev": true
-    },
-    "chardet": {
-      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz",
-      "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==",
-      "dev": true
-    },
-    "charenc": {
-      "version": "0.0.2",
-      "resolved": "https://registry.npmjs.org/charenc/-/charenc-0.0.2.tgz",
-      "integrity": "sha1-wKHS86cJLgN3S/qD8UwPxXkKhmc="
-    },
-    "check-types": {
-      "version": "8.0.3",
-      "resolved": "https://registry.npmjs.org/check-types/-/check-types-8.0.3.tgz",
-      "integrity": "sha512-YpeKZngUmG65rLudJ4taU7VLkOCTMhNl/u4ctNC56LQS/zJTyNH0Lrtwm1tfTsbLlwvlfsA2d1c8vCf/Kh2KwQ==",
-      "dev": true
-    },
-    "chokidar": {
-      "version": "2.1.8",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.1.8.tgz",
-      "integrity": "sha512-ZmZUazfOzf0Nve7duiCKD23PFSCs4JPoYyccjUFF3aQkQadqBhfzhjkwBH2mNOG9cTBwhamM37EIsIkZw3nRgg==",
-      "dev": true,
-      "requires": {
-        "anymatch": "^2.0.0",
-        "async-each": "^1.0.1",
-        "braces": "^2.3.2",
-        "fsevents": "^1.2.7",
-        "glob-parent": "^3.1.0",
-        "inherits": "^2.0.3",
-        "is-binary-path": "^1.0.0",
-        "is-glob": "^4.0.0",
-        "normalize-path": "^3.0.0",
-        "path-is-absolute": "^1.0.0",
-        "readdirp": "^2.2.1",
-        "upath": "^1.1.1"
-      }
-    },
-    "chrome-trace-event": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz",
-      "integrity": "sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg==",
-      "dev": true
-    },
-    "ci-info": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-2.0.0.tgz",
-      "integrity": "sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==",
-      "dev": true
-    },
-    "cjs-module-lexer": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-0.6.0.tgz",
-      "integrity": "sha512-uc2Vix1frTfnuzxxu1Hp4ktSvM3QaI4oXl4ZUqL1wjTu/BGki9TrCWoqLTg/drR1KwAEarXuRFCG2Svr1GxPFw==",
-      "dev": true
-    },
-    "class-utils": {
-      "version": "0.3.6",
-      "resolved": "https://registry.npmjs.org/class-utils/-/class-utils-0.3.6.tgz",
-      "integrity": "sha512-qOhPa/Fj7s6TY8H8esGu5QNpMMQxz79h+urzrNYN6mn+9BnxlDGf5QZ+XeCDsxSjPqsSR56XOZOJmpeurnLMeg==",
-      "dev": true,
-      "requires": {
-        "arr-union": "^3.1.0",
-        "define-property": "^0.2.5",
-        "isobject": "^3.0.0",
-        "static-extend": "^0.1.1"
-      },
-      "dependencies": {
-        "define-property": {
-          "version": "0.2.5",
-          "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
-          "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
-          "dev": true,
-          "requires": {
-            "is-descriptor": "^0.1.0"
-          }
-        }
-      }
-    },
-    "classnames": {
-      "version": "2.2.6",
-      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
-      "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
-    },
-    "clean-css": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz",
-      "integrity": "sha512-VcMWDN54ZN/DS+g58HYL5/n4Zrqe8vHJpGA8KdgUXFU4fuP/aHNw8eld9SyEIyabIMJX/0RaY/fplOo5hYLSFA==",
-      "dev": true,
-      "requires": {
-        "source-map": "~0.6.0"
-      }
-    },
-    "clean-stack": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
-      "integrity": "sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==",
-      "dev": true
-    },
-    "clean-webpack-plugin": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/clean-webpack-plugin/-/clean-webpack-plugin-3.0.0.tgz",
-      "integrity": "sha512-MciirUH5r+cYLGCOL5JX/ZLzOZbVr1ot3Fw+KcvbhUb6PM+yycqd9ZhIlcigQ5gl+XhppNmw3bEFuaaMNyLj3A==",
-      "dev": true,
-      "requires": {
-        "@types/webpack": "^4.4.31",
-        "del": "^4.1.1"
-      }
-    },
-    "cli-cursor": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz",
-      "integrity": "sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==",
-      "dev": true,
-      "requires": {
-        "restore-cursor": "^3.1.0"
-      }
-    },
-    "cli-table3": {
-      "version": "0.5.1",
-      "resolved": "https://registry.npmjs.org/cli-table3/-/cli-table3-0.5.1.tgz",
-      "integrity": "sha512-7Qg2Jrep1S/+Q3EceiZtQcDPWxhAvBw+ERf1162v4sikJrvojMHFqXt8QIVha8UlH9rgU0BeWPytZ9/TzYqlUw==",
-      "dev": true,
-      "requires": {
-        "colors": "^1.1.2",
-        "object-assign": "^4.1.0",
-        "string-width": "^2.1.1"
-      },
-      "dependencies": {
-        "ansi-regex": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
-          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
-          "dev": true
-        },
-        "colors": {
-          "version": "1.4.0",
-          "resolved": "https://registry.npmjs.org/colors/-/colors-1.4.0.tgz",
-          "integrity": "sha512-a+UqTh4kgZg/SlGvfbzDHpgRu7AAQOmmqRHJnxhRZICKFUT91brVhNNt58CMWU9PsBbv3PDCZUHbVxuDiH2mtA==",
-          "dev": true,
-          "optional": true
-        },
-        "is-fullwidth-code-point": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
-          "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
-          "dev": true
-        },
-        "string-width": {
-          "version": "2.1.1",
-          "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
-          "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==",
-          "dev": true,
-          "requires": {
-            "is-fullwidth-code-point": "^2.0.0",
-            "strip-ansi": "^4.0.0"
-          }
-        },
-        "strip-ansi": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
-          "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
-          "dev": true,
-          "requires": {
-            "ansi-regex": "^3.0.0"
-          }
-        }
-      }
-    },
-    "cli-width": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-3.0.0.tgz",
-      "integrity": "sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==",
-      "dev": true
-    },
-    "cliui": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
-      "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
-      "dev": true,
-      "requires": {
-        "string-width": "^4.2.0",
-        "strip-ansi": "^6.0.0",
-        "wrap-ansi": "^6.2.0"
-      },
-      "dependencies": {
-        "strip-ansi": {
-          "version": "6.0.0",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
-          "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
-          "dev": true,
-          "requires": {
-            "ansi-regex": "^5.0.0"
-          }
-        }
-      }
-    },
-    "clone-deep": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz",
-      "integrity": "sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==",
-      "dev": true,
-      "requires": {
-        "is-plain-object": "^2.0.4",
-        "kind-of": "^6.0.2",
-        "shallow-clone": "^3.0.0"
-      }
-    },
-    "clone-response": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/clone-response/-/clone-response-1.0.2.tgz",
-      "integrity": "sha1-0dyXOSAxTfZ/vrlCI7TuNQI56Ws=",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "mimic-response": "^1.0.0"
-      }
-    },
-    "co": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
-      "integrity": "sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=",
-      "dev": true
-    },
-    "coa": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/coa/-/coa-2.0.2.tgz",
-      "integrity": "sha512-q5/jG+YQnSy4nRTV4F7lPepBJZ8qBNJJDBuJdoejDyLXgmL7IEo+Le2JDZudFTFt7mrCqIRaSjws4ygRCTCAXA==",
-      "dev": true,
-      "requires": {
-        "@types/q": "^1.5.1",
-        "chalk": "^2.4.1",
-        "q": "^1.1.2"
-      }
-    },
-    "code-point-at": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
-      "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
-      "dev": true
-    },
-    "codecov": {
-      "version": "3.7.1",
-      "resolved": "https://registry.npmjs.org/codecov/-/codecov-3.7.1.tgz",
-      "integrity": "sha512-JHWxyPTkMLLJn9SmKJnwAnvY09kg2Os2+Ux+GG7LwZ9g8gzDDISpIN5wAsH1UBaafA/yGcd3KofMaorE8qd6Lw==",
-      "dev": true,
-      "requires": {
-        "argv": "0.0.2",
-        "ignore-walk": "3.0.3",
-        "js-yaml": "3.13.1",
-        "teeny-request": "6.0.1",
-        "urlgrey": "0.4.4"
-      },
-      "dependencies": {
-        "js-yaml": {
-          "version": "3.13.1",
-          "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.13.1.tgz",
-          "integrity": "sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==",
-          "dev": true,
-          "requires": {
-            "argparse": "^1.0.7",
-            "esprima": "^4.0.0"
-          }
-        }
-      }
-    },
-    "collect-v8-coverage": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz",
-      "integrity": "sha512-iBPtljfCNcTKNAto0KEtDfZ3qzjJvqE3aTGZsbhjSBlorqpXJlaWWtPO35D+ZImoC3KWejX64o+yPGxhWSTzfg==",
-      "dev": true
-    },
-    "collection-visit": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/collection-visit/-/collection-visit-1.0.0.tgz",
-      "integrity": "sha1-S8A3PBZLwykbTTaMgpzxqApZ3KA=",
-      "dev": true,
-      "requires": {
-        "map-visit": "^1.0.0",
-        "object-visit": "^1.0.0"
-      }
-    },
-    "color-convert": {
-      "version": "1.9.3",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
-      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-      "dev": true,
-      "requires": {
-        "color-name": "1.1.3"
-      }
-    },
-    "color-name": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
-      "dev": true
-    },
-    "colord": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/colord/-/colord-2.1.0.tgz",
-      "integrity": "sha512-H5sDP9XDk2uP+x/xSGkgB9SEFc1bojdI5DMKU0jmSXQtml2GIe48dj1DcSS0e53QQAHn+JKqUXbGeGX24xWD7w==",
-      "dev": true
-    },
-    "colorette": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.2.1.tgz",
-      "integrity": "sha512-puCDz0CzydiSYOrnXpz/PKd69zRrribezjtE9yd4zvytoRc8+RY/KJPvtPFKZS3E3wP6neGyMe0vOTlHO5L3Pw==",
-      "dev": true
-    },
-    "combined-stream": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
-      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
-      "dev": true,
-      "requires": {
-        "delayed-stream": "~1.0.0"
-      }
-    },
-    "commander": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
-      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
-      "dev": true
-    },
-    "commondir": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
-      "integrity": "sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=",
-      "dev": true
-    },
-    "component-emitter": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz",
-      "integrity": "sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==",
-      "dev": true
-    },
-    "compressible": {
-      "version": "2.0.18",
-      "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz",
-      "integrity": "sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==",
-      "dev": true,
-      "requires": {
-        "mime-db": ">= 1.43.0 < 2"
-      }
-    },
-    "compression": {
-      "version": "1.7.4",
-      "resolved": "https://registry.npmjs.org/compression/-/compression-1.7.4.tgz",
-      "integrity": "sha512-jaSIDzP9pZVS4ZfQ+TzvtiWhdpFhE2RDHz8QJkpX9SIpLq88VueF5jJw6t+6CUQcAoA6t+x89MLrWAqpfDE8iQ==",
-      "dev": true,
-      "requires": {
-        "accepts": "~1.3.5",
-        "bytes": "3.0.0",
-        "compressible": "~2.0.16",
-        "debug": "2.6.9",
-        "on-headers": "~1.0.2",
-        "safe-buffer": "5.1.2",
-        "vary": "~1.1.2"
-      },
-      "dependencies": {
-        "bytes": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
-          "integrity": "sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg=",
-          "dev": true
-        },
-        "debug": {
-          "version": "2.6.9",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-          "dev": true,
-          "requires": {
-            "ms": "2.0.0"
-          }
-        }
-      }
-    },
-    "concat-map": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
-    },
-    "concat-stream": {
-      "version": "1.6.2",
-      "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.6.2.tgz",
-      "integrity": "sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==",
-      "dev": true,
-      "requires": {
-        "buffer-from": "^1.0.0",
-        "inherits": "^2.0.3",
-        "readable-stream": "^2.2.2",
-        "typedarray": "^0.0.6"
-      }
-    },
-    "config-chain": {
-      "version": "1.1.13",
-      "resolved": "https://registry.npmjs.org/config-chain/-/config-chain-1.1.13.tgz",
-      "integrity": "sha512-qj+f8APARXHrM0hraqXYb2/bOVSV4PvJQlNZ/DVj0QrmNM2q2euizkeuVckQ57J+W0mRH6Hvi+k50M4Jul2VRQ==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "ini": "^1.3.4",
-        "proto-list": "~1.2.1"
-      }
-    },
-    "confusing-browser-globals": {
-      "version": "1.0.10",
-      "resolved": "https://registry.npmjs.org/confusing-browser-globals/-/confusing-browser-globals-1.0.10.tgz",
-      "integrity": "sha512-gNld/3lySHwuhaVluJUKLePYirM3QNCKzVxqAdhJII9/WXKVX5PURzMVJspS1jTslSqjeuG4KMVTSouit5YPHA==",
-      "dev": true
-    },
-    "connect-history-api-fallback": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/connect-history-api-fallback/-/connect-history-api-fallback-1.6.0.tgz",
-      "integrity": "sha512-e54B99q/OUoH64zYYRf3HBP5z24G38h5D3qXu23JGRoigpX5Ss4r9ZnDk3g0Z8uQC2x2lPaJ+UlWBc1ZWBWdLg==",
-      "dev": true
-    },
-    "console-stream": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/console-stream/-/console-stream-0.1.1.tgz",
-      "integrity": "sha1-oJX+B7IEZZVfL6/Si11yvM2UnUQ=",
-      "dev": true,
-      "optional": true
-    },
-    "contains-path": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/contains-path/-/contains-path-0.1.0.tgz",
-      "integrity": "sha1-/ozxhP9mcLa67wGp1IYaXL7EEgo=",
-      "dev": true
-    },
-    "content-disposition": {
-      "version": "0.5.3",
-      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.3.tgz",
-      "integrity": "sha512-ExO0774ikEObIAEV9kDo50o+79VCUdEB6n6lzKgGwupcVeRlhrj3qGAfwq8G6uBJjkqLrhT0qEYFcWng8z1z0g==",
-      "dev": true,
-      "requires": {
-        "safe-buffer": "5.1.2"
-      }
-    },
-    "content-type": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz",
-      "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==",
-      "dev": true
-    },
-    "convert-source-map": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.7.0.tgz",
-      "integrity": "sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA==",
-      "dev": true,
-      "requires": {
-        "safe-buffer": "~5.1.1"
-      }
-    },
-    "cookie": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.1.tgz",
-      "integrity": "sha512-ZwrFkGJxUR3EIoXtO+yVE69Eb7KlixbaeAWfBQB9vVsNn/o+Yw69gBWSSDK825hQNdN+wF8zELf3dFNl/kxkUA=="
-    },
-    "cookie-signature": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
-      "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw=",
-      "dev": true
-    },
-    "cookiejar": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/cookiejar/-/cookiejar-2.1.2.tgz",
-      "integrity": "sha512-Mw+adcfzPxcPeI+0WlvRrr/3lGVO0bD75SxX6811cxSh1Wbxx7xZBGK1eVtDf6si8rg2lhnUjsVLMFMfbRIuwA==",
-      "dev": true
-    },
-    "copy-descriptor": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/copy-descriptor/-/copy-descriptor-0.1.1.tgz",
-      "integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=",
-      "dev": true
-    },
-    "core-js": {
-      "version": "3.8.1",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.8.1.tgz",
-      "integrity": "sha512-9Id2xHY1W7m8hCl8NkhQn5CufmF/WuR30BTRewvCXc1aZd3kMECwNZ69ndLbekKfakw9Rf2Xyc+QR6E7Gg+obg=="
-    },
-    "core-js-compat": {
-      "version": "3.15.2",
-      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.15.2.tgz",
-      "integrity": "sha512-Wp+BJVvwopjI+A1EFqm2dwUmWYXrvucmtIB2LgXn/Rb+gWPKYxtmb4GKHGKG/KGF1eK9jfjzT38DITbTOCX/SQ==",
-      "dev": true,
-      "requires": {
-        "browserslist": "^4.16.6",
-        "semver": "7.0.0"
-      },
-      "dependencies": {
-        "semver": {
-          "version": "7.0.0",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-7.0.0.tgz",
-          "integrity": "sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==",
-          "dev": true
-        }
-      }
-    },
-    "core-js-pure": {
-      "version": "3.6.5",
-      "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.6.5.tgz",
-      "integrity": "sha512-lacdXOimsiD0QyNf9BC/mxivNJ/ybBGJXQFKzRekp1WTHoVUWsUHEn+2T8GJAzzIhyOuXA+gOxCVN3l+5PLPUA==",
-      "dev": true
-    },
-    "core-util-is": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
-      "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
-      "dev": true
-    },
-    "cosmiconfig": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.0.0.tgz",
-      "integrity": "sha512-pondGvTuVYDk++upghXJabWzL6Kxu6f26ljFw64Swq9v6sQPUL3EUlVDV56diOjpCayKihL6hVe8exIACU4XcA==",
-      "dev": true,
-      "requires": {
-        "@types/parse-json": "^4.0.0",
-        "import-fresh": "^3.2.1",
-        "parse-json": "^5.0.0",
-        "path-type": "^4.0.0",
-        "yaml": "^1.10.0"
-      }
-    },
-    "cross-spawn": {
-      "version": "6.0.5",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
-      "integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==",
-      "dev": true,
-      "requires": {
-        "nice-try": "^1.0.4",
-        "path-key": "^2.0.1",
-        "semver": "^5.5.0",
-        "shebang-command": "^1.2.0",
-        "which": "^1.2.9"
-      },
-      "dependencies": {
-        "which": {
-          "version": "1.3.1",
-          "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
-          "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
-          "dev": true,
-          "requires": {
-            "isexe": "^2.0.0"
-          }
-        }
-      }
-    },
-    "crypt": {
-      "version": "0.0.2",
-      "resolved": "https://registry.npmjs.org/crypt/-/crypt-0.0.2.tgz",
-      "integrity": "sha1-iNf/fsDfuG9xPch7u0LQRNPmxBs="
-    },
-    "css-color-names": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-1.0.1.tgz",
-      "integrity": "sha512-/loXYOch1qU1biStIFsHH8SxTmOseh1IJqFvy8IujXOm1h+QjUdDhkzOrR5HG8K8mlxREj0yfi8ewCHx0eMxzA==",
-      "dev": true
-    },
-    "css-declaration-sorter": {
-      "version": "6.0.3",
-      "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.0.3.tgz",
-      "integrity": "sha512-52P95mvW1SMzuRZegvpluT6yEv0FqQusydKQPZsNN5Q7hh8EwQvN8E2nwuJ16BBvNN6LcoIZXu/Bk58DAhrrxw==",
-      "dev": true,
-      "requires": {
-        "timsort": "^0.3.0"
-      }
-    },
-    "css-loader": {
-      "version": "5.2.6",
-      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-5.2.6.tgz",
-      "integrity": "sha512-0wyN5vXMQZu6BvjbrPdUJvkCzGEO24HC7IS7nW4llc6BBFC+zwR9CKtYGv63Puzsg10L/o12inMY5/2ByzfD6w==",
-      "dev": true,
-      "requires": {
-        "icss-utils": "^5.1.0",
-        "loader-utils": "^2.0.0",
-        "postcss": "^8.2.15",
-        "postcss-modules-extract-imports": "^3.0.0",
-        "postcss-modules-local-by-default": "^4.0.0",
-        "postcss-modules-scope": "^3.0.0",
-        "postcss-modules-values": "^4.0.0",
-        "postcss-value-parser": "^4.1.0",
-        "schema-utils": "^3.0.0",
-        "semver": "^7.3.5"
-      },
-      "dependencies": {
-        "ajv": {
-          "version": "6.12.6",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-          "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-          "dev": true,
-          "requires": {
-            "fast-deep-equal": "^3.1.1",
-            "fast-json-stable-stringify": "^2.0.0",
-            "json-schema-traverse": "^0.4.1",
-            "uri-js": "^4.2.2"
-          }
-        },
-        "schema-utils": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.0.tgz",
-          "integrity": "sha512-tTEaeYkyIhEZ9uWgAjDerWov3T9MgX8dhhy2r0IGeeX4W8ngtGl1++dUve/RUqzuaASSh7shwCDJjEzthxki8w==",
-          "dev": true,
-          "requires": {
-            "@types/json-schema": "^7.0.7",
-            "ajv": "^6.12.5",
-            "ajv-keywords": "^3.5.2"
-          }
-        },
-        "semver": {
-          "version": "7.3.5",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
-          "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==",
-          "dev": true,
-          "requires": {
-            "lru-cache": "^6.0.0"
-          }
-        }
-      }
-    },
-    "css-mediaquery": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/css-mediaquery/-/css-mediaquery-0.1.2.tgz",
-      "integrity": "sha1-aiw3NEkoYYYxxUvTPO3TAdoYvqA="
-    },
-    "css-select": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/css-select/-/css-select-2.1.0.tgz",
-      "integrity": "sha512-Dqk7LQKpwLoH3VovzZnkzegqNSuAziQyNZUcrdDM401iY+R5NkGBXGmtO05/yaXQziALuPogeG0b7UAgjnTJTQ==",
-      "dev": true,
-      "requires": {
-        "boolbase": "^1.0.0",
-        "css-what": "^3.2.1",
-        "domutils": "^1.7.0",
-        "nth-check": "^1.0.2"
-      }
-    },
-    "css-select-base-adapter": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz",
-      "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==",
-      "dev": true
-    },
-    "css-tree": {
-      "version": "1.0.0-alpha.37",
-      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz",
-      "integrity": "sha512-DMxWJg0rnz7UgxKT0Q1HU/L9BeJI0M6ksor0OgqOnF+aRCDWg/N2641HmVyU9KVIu0OVVWOb2IpC9A+BJRnejg==",
-      "dev": true,
-      "requires": {
-        "mdn-data": "2.0.4",
-        "source-map": "^0.6.1"
-      }
-    },
-    "css-what": {
-      "version": "3.4.2",
-      "resolved": "https://registry.npmjs.org/css-what/-/css-what-3.4.2.tgz",
-      "integrity": "sha512-ACUm3L0/jiZTqfzRM3Hi9Q8eZqd6IK37mMWPLz9PJxkLWllYeRf+EHUSHYEtFop2Eqytaq1FizFVh7XfBnXCDQ==",
-      "dev": true
-    },
-    "css.escape": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
-      "integrity": "sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s=",
-      "dev": true
-    },
-    "cssesc": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
-      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
-      "dev": true
-    },
-    "cssnano": {
-      "version": "5.0.6",
-      "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-5.0.6.tgz",
-      "integrity": "sha512-NiaLH/7yqGksFGsFNvSRe2IV/qmEBAeDE64dYeD8OBrgp6lE8YoMeQJMtsv5ijo6MPyhuoOvFhI94reahBRDkw==",
-      "dev": true,
-      "requires": {
-        "cosmiconfig": "^7.0.0",
-        "cssnano-preset-default": "^5.1.3",
-        "is-resolvable": "^1.1.0"
-      }
-    },
-    "cssnano-preset-default": {
-      "version": "5.1.3",
-      "resolved": "https://registry.npmjs.org/cssnano-preset-default/-/cssnano-preset-default-5.1.3.tgz",
-      "integrity": "sha512-qo9tX+t4yAAZ/yagVV3b+QBKeLklQbmgR3wI7mccrDcR+bEk9iHgZN1E7doX68y9ThznLya3RDmR+nc7l6/2WQ==",
-      "dev": true,
-      "requires": {
-        "css-declaration-sorter": "^6.0.3",
-        "cssnano-utils": "^2.0.1",
-        "postcss-calc": "^8.0.0",
-        "postcss-colormin": "^5.2.0",
-        "postcss-convert-values": "^5.0.1",
-        "postcss-discard-comments": "^5.0.1",
-        "postcss-discard-duplicates": "^5.0.1",
-        "postcss-discard-empty": "^5.0.1",
-        "postcss-discard-overridden": "^5.0.1",
-        "postcss-merge-longhand": "^5.0.2",
-        "postcss-merge-rules": "^5.0.2",
-        "postcss-minify-font-values": "^5.0.1",
-        "postcss-minify-gradients": "^5.0.1",
-        "postcss-minify-params": "^5.0.1",
-        "postcss-minify-selectors": "^5.1.0",
-        "postcss-normalize-charset": "^5.0.1",
-        "postcss-normalize-display-values": "^5.0.1",
-        "postcss-normalize-positions": "^5.0.1",
-        "postcss-normalize-repeat-style": "^5.0.1",
-        "postcss-normalize-string": "^5.0.1",
-        "postcss-normalize-timing-functions": "^5.0.1",
-        "postcss-normalize-unicode": "^5.0.1",
-        "postcss-normalize-url": "^5.0.2",
-        "postcss-normalize-whitespace": "^5.0.1",
-        "postcss-ordered-values": "^5.0.2",
-        "postcss-reduce-initial": "^5.0.1",
-        "postcss-reduce-transforms": "^5.0.1",
-        "postcss-svgo": "^5.0.2",
-        "postcss-unique-selectors": "^5.0.1"
-      }
-    },
-    "cssnano-utils": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/cssnano-utils/-/cssnano-utils-2.0.1.tgz",
-      "integrity": "sha512-i8vLRZTnEH9ubIyfdZCAdIdgnHAUeQeByEeQ2I7oTilvP9oHO6RScpeq3GsFUVqeB8uZgOQ9pw8utofNn32hhQ==",
-      "dev": true
-    },
-    "csso": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/csso/-/csso-4.2.0.tgz",
-      "integrity": "sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==",
-      "dev": true,
-      "requires": {
-        "css-tree": "^1.1.2"
-      },
-      "dependencies": {
-        "css-tree": {
-          "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
-          "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==",
-          "dev": true,
-          "requires": {
-            "mdn-data": "2.0.14",
-            "source-map": "^0.6.1"
-          }
-        },
-        "mdn-data": {
-          "version": "2.0.14",
-          "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
-          "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==",
-          "dev": true
-        }
-      }
-    },
-    "cssom": {
-      "version": "0.4.4",
-      "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.4.4.tgz",
-      "integrity": "sha512-p3pvU7r1MyyqbTk+WbNJIgJjG2VmTIaB10rI93LzVPrmDJKkzKYMtxxyAvQXR/NS6otuzveI7+7BBq3SjBS2mw==",
-      "dev": true
-    },
-    "cssstyle": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-2.3.0.tgz",
-      "integrity": "sha512-AZL67abkUzIuvcHqk7c09cezpGNcxUxU4Ioi/05xHk4DQeTkWmGYftIE6ctU6AEt+Gn4n1lDStOtj7FKycP71A==",
-      "dev": true,
-      "requires": {
-        "cssom": "~0.3.6"
-      },
-      "dependencies": {
-        "cssom": {
-          "version": "0.3.8",
-          "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.3.8.tgz",
-          "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==",
-          "dev": true
-        }
-      }
-    },
-    "csstype": {
-      "version": "2.6.11",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.11.tgz",
-      "integrity": "sha512-l8YyEC9NBkSm783PFTvh0FmJy7s5pFKrDp49ZL7zBGX3fWkO+N4EEyan1qqp8cwPLDcD0OSdyY6hAMoxp34JFw=="
-    },
-    "currently-unhandled": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/currently-unhandled/-/currently-unhandled-0.4.1.tgz",
-      "integrity": "sha1-mI3zP+qxke95mmE2nddsF635V+o=",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "array-find-index": "^1.0.1"
-      }
-    },
-    "cwebp-bin": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/cwebp-bin/-/cwebp-bin-5.1.0.tgz",
-      "integrity": "sha512-BsPKStaNr98zfxwejWWLIGELbPERULJoD2v5ijvpeutSAGsegX7gmABgnkRK7MUucCPROXXfaPqkLAwI509JzA==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "bin-build": "^3.0.0",
-        "bin-wrapper": "^4.0.1",
-        "logalot": "^2.1.0"
-      }
-    },
-    "cycle": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/cycle/-/cycle-1.0.3.tgz",
-      "integrity": "sha1-IegLK+hYD5i0aPN5QwZisEbDStI=",
-      "dev": true
-    },
-    "damerau-levenshtein": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.7.tgz",
-      "integrity": "sha512-VvdQIPGdWP0SqFXghj79Wf/5LArmreyMsGLa6FG6iC4t3j7j5s71TrwWmT/4akbDQIqjfACkLZmjXhA7g2oUZw==",
-      "dev": true
-    },
-    "dashdash": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
-      "integrity": "sha1-hTz6D3y+L+1d4gMmuN1YEDX24vA=",
-      "dev": true,
-      "requires": {
-        "assert-plus": "^1.0.0"
-      }
-    },
-    "data-urls": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-1.1.0.tgz",
-      "integrity": "sha512-YTWYI9se1P55u58gL5GkQHW4P6VJBJ5iBT+B5a7i2Tjadhv52paJG0qHX4A0OR6/t52odI64KP2YvFpkDOi3eQ==",
-      "dev": true,
-      "requires": {
-        "abab": "^2.0.0",
-        "whatwg-mimetype": "^2.2.0",
-        "whatwg-url": "^7.0.0"
-      }
-    },
-    "debug": {
-      "version": "4.3.2",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz",
-      "integrity": "sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==",
-      "dev": true,
-      "requires": {
-        "ms": "2.1.2"
-      },
-      "dependencies": {
-        "ms": {
-          "version": "2.1.2",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-          "dev": true
-        }
-      }
-    },
-    "decamelize": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
-      "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=",
-      "dev": true
-    },
-    "decimal.js": {
-      "version": "10.3.1",
-      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.3.1.tgz",
-      "integrity": "sha512-V0pfhfr8suzyPGOx3nmq4aHqabehUZn6Ch9kyFpV79TGDTWFmHqUqXdabR7QHqxzrYolF4+tVmJhUG4OURg5dQ==",
-      "dev": true
-    },
-    "decode-uri-component": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
-      "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=",
-      "dev": true
-    },
-    "decompress": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/decompress/-/decompress-4.2.1.tgz",
-      "integrity": "sha512-e48kc2IjU+2Zw8cTb6VZcJQ3lgVbS4uuB1TfCHbiZIP/haNXm+SVyhu+87jts5/3ROpd82GSVCoNs/z8l4ZOaQ==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "decompress-tar": "^4.0.0",
-        "decompress-tarbz2": "^4.0.0",
-        "decompress-targz": "^4.0.0",
-        "decompress-unzip": "^4.0.1",
-        "graceful-fs": "^4.1.10",
-        "make-dir": "^1.0.0",
-        "pify": "^2.3.0",
-        "strip-dirs": "^2.0.0"
-      },
-      "dependencies": {
-        "make-dir": {
-          "version": "1.3.0",
-          "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-1.3.0.tgz",
-          "integrity": "sha512-2w31R7SJtieJJnQtGc7RVL2StM2vGYVfqUOvUDxH6bC6aJTxPxTF0GnIgCyu7tjockiUWAYQRbxa7vKn34s5sQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "pify": "^3.0.0"
-          },
-          "dependencies": {
-            "pify": {
-              "version": "3.0.0",
-              "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
-              "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
-              "dev": true,
-              "optional": true
-            }
-          }
-        },
-        "pify": {
-          "version": "2.3.0",
-          "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
-          "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
-          "dev": true,
-          "optional": true
-        }
-      }
-    },
-    "decompress-response": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-3.3.0.tgz",
-      "integrity": "sha1-gKTdMjdIOEv6JICDYirt7Jgq3/M=",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "mimic-response": "^1.0.0"
-      }
-    },
-    "decompress-tar": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/decompress-tar/-/decompress-tar-4.1.1.tgz",
-      "integrity": "sha512-JdJMaCrGpB5fESVyxwpCx4Jdj2AagLmv3y58Qy4GE6HMVjWz1FeVQk1Ct4Kye7PftcdOo/7U7UKzYBJgqnGeUQ==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "file-type": "^5.2.0",
-        "is-stream": "^1.1.0",
-        "tar-stream": "^1.5.2"
-      },
-      "dependencies": {
-        "file-type": {
-          "version": "5.2.0",
-          "resolved": "https://registry.npmjs.org/file-type/-/file-type-5.2.0.tgz",
-          "integrity": "sha1-LdvqfHP/42No365J3DOMBYwritY=",
-          "dev": true,
-          "optional": true
-        }
-      }
-    },
-    "decompress-tarbz2": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/decompress-tarbz2/-/decompress-tarbz2-4.1.1.tgz",
-      "integrity": "sha512-s88xLzf1r81ICXLAVQVzaN6ZmX4A6U4z2nMbOwobxkLoIIfjVMBg7TeguTUXkKeXni795B6y5rnvDw7rxhAq9A==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "decompress-tar": "^4.1.0",
-        "file-type": "^6.1.0",
-        "is-stream": "^1.1.0",
-        "seek-bzip": "^1.0.5",
-        "unbzip2-stream": "^1.0.9"
-      },
-      "dependencies": {
-        "file-type": {
-          "version": "6.2.0",
-          "resolved": "https://registry.npmjs.org/file-type/-/file-type-6.2.0.tgz",
-          "integrity": "sha512-YPcTBDV+2Tm0VqjybVd32MHdlEGAtuxS3VAYsumFokDSMG+ROT5wawGlnHDoz7bfMcMDt9hxuXvXwoKUx2fkOg==",
-          "dev": true,
-          "optional": true
-        }
-      }
-    },
-    "decompress-targz": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/decompress-targz/-/decompress-targz-4.1.1.tgz",
-      "integrity": "sha512-4z81Znfr6chWnRDNfFNqLwPvm4db3WuZkqV+UgXQzSngG3CEKdBkw5jrv3axjjL96glyiiKjsxJG3X6WBZwX3w==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "decompress-tar": "^4.1.1",
-        "file-type": "^5.2.0",
-        "is-stream": "^1.1.0"
-      },
-      "dependencies": {
-        "file-type": {
-          "version": "5.2.0",
-          "resolved": "https://registry.npmjs.org/file-type/-/file-type-5.2.0.tgz",
-          "integrity": "sha1-LdvqfHP/42No365J3DOMBYwritY=",
-          "dev": true,
-          "optional": true
-        }
-      }
-    },
-    "decompress-unzip": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/decompress-unzip/-/decompress-unzip-4.0.1.tgz",
-      "integrity": "sha1-3qrM39FK6vhVePczroIQ+bSEj2k=",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "file-type": "^3.8.0",
-        "get-stream": "^2.2.0",
-        "pify": "^2.3.0",
-        "yauzl": "^2.4.2"
-      },
-      "dependencies": {
-        "file-type": {
-          "version": "3.9.0",
-          "resolved": "https://registry.npmjs.org/file-type/-/file-type-3.9.0.tgz",
-          "integrity": "sha1-JXoHg4TR24CHvESdEH1SpSZyuek=",
-          "dev": true,
-          "optional": true
-        },
-        "get-stream": {
-          "version": "2.3.1",
-          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-2.3.1.tgz",
-          "integrity": "sha1-Xzj5PzRgCWZu4BUKBUFn+Rvdld4=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "object-assign": "^4.0.1",
-            "pinkie-promise": "^2.0.0"
-          }
-        },
-        "pify": {
-          "version": "2.3.0",
-          "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
-          "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
-          "dev": true,
-          "optional": true
-        }
-      }
-    },
-    "deep-equal": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.1.tgz",
-      "integrity": "sha512-yd9c5AdiqVcR+JjcwUQb9DkhJc8ngNr0MahEBGvDiJw8puWab2yZlh+nkasOnZP+EGTAP6rRp2JzJhJZzvNF8g==",
-      "dev": true,
-      "requires": {
-        "is-arguments": "^1.0.4",
-        "is-date-object": "^1.0.1",
-        "is-regex": "^1.0.4",
-        "object-is": "^1.0.1",
-        "object-keys": "^1.1.1",
-        "regexp.prototype.flags": "^1.2.0"
-      }
-    },
-    "deep-is": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz",
-      "integrity": "sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=",
-      "dev": true
-    },
-    "deepmerge": {
-      "version": "4.2.2",
-      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
-      "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==",
-      "dev": true
-    },
-    "default-gateway": {
-      "version": "6.0.3",
-      "resolved": "https://registry.npmjs.org/default-gateway/-/default-gateway-6.0.3.tgz",
-      "integrity": "sha512-fwSOJsbbNzZ/CUFpqFBqYfYNLj1NbMPm8MMCIzHjC83iSJRBEGmDUxU+WP661BaBQImeC2yHwXtz+P/O9o+XEg==",
-      "dev": true,
-      "requires": {
-        "execa": "^5.0.0"
-      },
-      "dependencies": {
-        "cross-spawn": {
-          "version": "7.0.3",
-          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-          "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-          "dev": true,
-          "requires": {
-            "path-key": "^3.1.0",
-            "shebang-command": "^2.0.0",
-            "which": "^2.0.1"
-          }
-        },
-        "execa": {
-          "version": "5.1.1",
-          "resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
-          "integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==",
-          "dev": true,
-          "requires": {
-            "cross-spawn": "^7.0.3",
-            "get-stream": "^6.0.0",
-            "human-signals": "^2.1.0",
-            "is-stream": "^2.0.0",
-            "merge-stream": "^2.0.0",
-            "npm-run-path": "^4.0.1",
-            "onetime": "^5.1.2",
-            "signal-exit": "^3.0.3",
-            "strip-final-newline": "^2.0.0"
-          }
-        },
-        "get-stream": {
-          "version": "6.0.1",
-          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
-          "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
-          "dev": true
-        },
-        "is-stream": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.0.tgz",
-          "integrity": "sha512-XCoy+WlUr7d1+Z8GgSuXmpuUFC9fOhRXglJMx+dwLKTkL44Cjd4W1Z5P+BQZpr+cR93aGP4S/s7Ftw6Nd/kiEw==",
-          "dev": true
-        },
-        "npm-run-path": {
-          "version": "4.0.1",
-          "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
-          "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
-          "dev": true,
-          "requires": {
-            "path-key": "^3.0.0"
-          }
-        },
-        "path-key": {
-          "version": "3.1.1",
-          "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-          "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-          "dev": true
-        },
-        "shebang-command": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-          "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-          "dev": true,
-          "requires": {
-            "shebang-regex": "^3.0.0"
-          }
-        },
-        "shebang-regex": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-          "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-          "dev": true
-        },
-        "which": {
-          "version": "2.0.2",
-          "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-          "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-          "dev": true,
-          "requires": {
-            "isexe": "^2.0.0"
-          }
-        }
-      }
-    },
-    "define-properties": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz",
-      "integrity": "sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==",
-      "requires": {
-        "object-keys": "^1.0.12"
-      }
-    },
-    "define-property": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/define-property/-/define-property-2.0.2.tgz",
-      "integrity": "sha512-jwK2UV4cnPpbcG7+VRARKTZPUWowwXA8bzH5NP6ud0oeAxyYPuGZUAC7hMugpCdz4BeSZl2Dl9k66CHJ/46ZYQ==",
-      "dev": true,
-      "requires": {
-        "is-descriptor": "^1.0.2",
-        "isobject": "^3.0.1"
-      },
-      "dependencies": {
-        "is-accessor-descriptor": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
-          "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==",
-          "dev": true,
-          "requires": {
-            "kind-of": "^6.0.0"
-          }
-        },
-        "is-data-descriptor": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz",
-          "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==",
-          "dev": true,
-          "requires": {
-            "kind-of": "^6.0.0"
-          }
-        },
-        "is-descriptor": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz",
-          "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==",
-          "dev": true,
-          "requires": {
-            "is-accessor-descriptor": "^1.0.0",
-            "is-data-descriptor": "^1.0.0",
-            "kind-of": "^6.0.2"
-          }
-        }
-      }
-    },
-    "del": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/del/-/del-4.1.1.tgz",
-      "integrity": "sha512-QwGuEUouP2kVwQenAsOof5Fv8K9t3D8Ca8NxcXKrIpEHjTXK5J2nXLdP+ALI1cgv8wj7KuwBhTwBkOZSJKM5XQ==",
-      "dev": true,
-      "requires": {
-        "@types/glob": "^7.1.1",
-        "globby": "^6.1.0",
-        "is-path-cwd": "^2.0.0",
-        "is-path-in-cwd": "^2.0.0",
-        "p-map": "^2.0.0",
-        "pify": "^4.0.1",
-        "rimraf": "^2.6.3"
-      }
-    },
-    "delayed-stream": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
-      "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=",
-      "dev": true
-    },
-    "delegates": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
-      "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=",
-      "dev": true
-    },
-    "depd": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
-      "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=",
-      "dev": true
-    },
-    "dequal": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.2.tgz",
-      "integrity": "sha512-q9K8BlJVxK7hQYqa6XISGmBZbtQQWVXSrRrWreHC94rMt1QL/Impruc+7p2CYSYuVIUr+YCt6hjrs1kkdJRTug=="
-    },
-    "destroy": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
-      "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=",
-      "dev": true
-    },
-    "detect-newline": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/detect-newline/-/detect-newline-3.1.0.tgz",
-      "integrity": "sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==",
-      "dev": true
-    },
-    "detect-node": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.1.0.tgz",
-      "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==",
-      "dev": true
-    },
-    "detect-node-es": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
-      "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ=="
-    },
-    "detect-port-alt": {
-      "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/detect-port-alt/-/detect-port-alt-1.1.6.tgz",
-      "integrity": "sha512-5tQykt+LqfJFBEYaDITx7S7cR7mJ/zQmLXZ2qt5w04ainYZw6tBf9dBunMjVeVOdYVRUzUOE4HkY5J7+uttb5Q==",
-      "dev": true,
-      "requires": {
-        "address": "^1.0.1",
-        "debug": "^2.6.0"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "2.6.9",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-          "dev": true,
-          "requires": {
-            "ms": "2.0.0"
-          }
-        }
-      }
-    },
-    "diacritics": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/diacritics/-/diacritics-1.3.0.tgz",
-      "integrity": "sha1-PvqHMj67hj5mls67AILUj/PW96E="
-    },
-    "diff-sequences": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-26.6.2.tgz",
-      "integrity": "sha512-Mv/TDa3nZ9sbc5soK+OoA74BsS3mL37yixCvUAQkiuA4Wz6YtwP/K47n2rv2ovzHZvoiQeA5FTQOschKkEwB0Q==",
-      "dev": true
-    },
-    "dir-glob": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
-      "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
-      "dev": true,
-      "requires": {
-        "path-type": "^4.0.0"
-      }
-    },
-    "dns-equal": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz",
-      "integrity": "sha1-s55/HabrCnW6nBcySzR1PEfgZU0=",
-      "dev": true
-    },
-    "dns-packet": {
-      "version": "1.3.4",
-      "resolved": "https://registry.npmjs.org/dns-packet/-/dns-packet-1.3.4.tgz",
-      "integrity": "sha512-BQ6F4vycLXBvdrJZ6S3gZewt6rcrks9KBgM9vrhW+knGRqc8uEdT7fuCwloc7nny5xNoMJ17HGH0R/6fpo8ECA==",
-      "dev": true,
-      "requires": {
-        "ip": "^1.1.0",
-        "safe-buffer": "^5.0.1"
-      }
-    },
-    "dns-txt": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/dns-txt/-/dns-txt-2.0.2.tgz",
-      "integrity": "sha1-uR2Ab10nGI5Ks+fRB9iBocxGQrY=",
-      "dev": true,
-      "requires": {
-        "buffer-indexof": "^1.0.0"
-      }
-    },
-    "doctrine": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
-      "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==",
-      "dev": true,
-      "requires": {
-        "esutils": "^2.0.2"
-      }
-    },
-    "dom-accessibility-api": {
-      "version": "0.4.6",
-      "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.4.6.tgz",
-      "integrity": "sha512-qxFVFR/ymtfamEQT/AsYLe048sitxFCoCHiM+vuOdR3fE94i3so2SCFJxyz/RxV69PZ+9FgToYWOd7eqJqcbYw==",
-      "dev": true
-    },
-    "dom-converter": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz",
-      "integrity": "sha512-gd3ypIPfOMr9h5jIKq8E3sHOTCjeirnl0WK5ZdS1AW0Odt0b1PaWaHdJ4Qk4klv+YB9aJBS7mESXjFoDQPu6DA==",
-      "dev": true,
-      "requires": {
-        "utila": "~0.4"
-      }
-    },
-    "dom-helpers": {
-      "version": "5.1.4",
-      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.1.4.tgz",
-      "integrity": "sha512-TjMyeVUvNEnOnhzs6uAn9Ya47GmMo3qq7m+Lr/3ON0Rs5kHvb8I+SQYjLUSYn7qhEm0QjW0yrBkvz9yOrwwz1A==",
-      "requires": {
-        "@babel/runtime": "^7.8.7",
-        "csstype": "^2.6.7"
-      }
-    },
-    "dom-serializer": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
-      "integrity": "sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g==",
-      "dev": true,
-      "requires": {
-        "domelementtype": "^2.0.1",
-        "entities": "^2.0.0"
-      },
-      "dependencies": {
-        "domelementtype": {
-          "version": "2.2.0",
-          "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz",
-          "integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==",
-          "dev": true
-        }
-      }
-    },
-    "domelementtype": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz",
-      "integrity": "sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==",
-      "dev": true
-    },
-    "domexception": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/domexception/-/domexception-1.0.1.tgz",
-      "integrity": "sha512-raigMkn7CJNNo6Ihro1fzG7wr3fHuYVytzquZKX5n0yizGsTcYgzdIUwj1X9pK0VvjeihV+XiclP+DjwbsSKug==",
-      "dev": true,
-      "requires": {
-        "webidl-conversions": "^4.0.2"
-      }
-    },
-    "domhandler": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.2.0.tgz",
-      "integrity": "sha512-zk7sgt970kzPks2Bf+dwT/PLzghLnsivb9CcxkvR8Mzr66Olr0Ofd8neSbglHJHaHa2MadfoSdNlKYAaafmWfA==",
-      "dev": true,
-      "requires": {
-        "domelementtype": "^2.2.0"
-      },
-      "dependencies": {
-        "domelementtype": {
-          "version": "2.2.0",
-          "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz",
-          "integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==",
-          "dev": true
-        }
-      }
-    },
-    "domutils": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.7.0.tgz",
-      "integrity": "sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==",
-      "dev": true,
-      "requires": {
-        "dom-serializer": "0",
-        "domelementtype": "1"
-      }
-    },
-    "dot-case": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
-      "integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==",
-      "dev": true,
-      "requires": {
-        "no-case": "^3.0.4",
-        "tslib": "^2.0.3"
-      },
-      "dependencies": {
-        "tslib": {
-          "version": "2.3.0",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
-          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
-          "dev": true
-        }
-      }
-    },
-    "dotenv": {
-      "version": "8.2.0",
-      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.2.0.tgz",
-      "integrity": "sha512-8sJ78ElpbDJBHNeBzUbUVLsqKdccaa/BXF1uPTw3GrvQTBgrQrtObr2mUrE38vzYd8cEv+m/JBfDLioYcfXoaw==",
-      "dev": true
-    },
-    "dotenv-defaults": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/dotenv-defaults/-/dotenv-defaults-2.0.2.tgz",
-      "integrity": "sha512-iOIzovWfsUHU91L5i8bJce3NYK5JXeAwH50Jh6+ARUdLiiGlYWfGw6UkzsYqaXZH/hjE/eCd/PlfM/qqyK0AMg==",
-      "dev": true,
-      "requires": {
-        "dotenv": "^8.2.0"
-      }
-    },
-    "dotenv-webpack": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/dotenv-webpack/-/dotenv-webpack-7.0.3.tgz",
-      "integrity": "sha512-O0O9pOEwrk+n1zzR3T2uuXRlw64QxHSPeNN1GaiNBloQFNaCUL9V8jxSVz4jlXXFP/CIqK8YecWf8BAvsSgMjw==",
-      "dev": true,
-      "requires": {
-        "dotenv-defaults": "^2.0.2"
-      }
-    },
-    "download": {
-      "version": "6.2.5",
-      "resolved": "https://registry.npmjs.org/download/-/download-6.2.5.tgz",
-      "integrity": "sha512-DpO9K1sXAST8Cpzb7kmEhogJxymyVUd5qz/vCOSyvwtp2Klj2XcDt5YUuasgxka44SxF0q5RriKIwJmQHG2AuA==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "caw": "^2.0.0",
-        "content-disposition": "^0.5.2",
-        "decompress": "^4.0.0",
-        "ext-name": "^5.0.0",
-        "file-type": "5.2.0",
-        "filenamify": "^2.0.0",
-        "get-stream": "^3.0.0",
-        "got": "^7.0.0",
-        "make-dir": "^1.0.0",
-        "p-event": "^1.0.0",
-        "pify": "^3.0.0"
-      },
-      "dependencies": {
-        "file-type": {
-          "version": "5.2.0",
-          "resolved": "https://registry.npmjs.org/file-type/-/file-type-5.2.0.tgz",
-          "integrity": "sha1-LdvqfHP/42No365J3DOMBYwritY=",
-          "dev": true,
-          "optional": true
-        },
-        "get-stream": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
-          "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=",
-          "dev": true,
-          "optional": true
-        },
-        "make-dir": {
-          "version": "1.3.0",
-          "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-1.3.0.tgz",
-          "integrity": "sha512-2w31R7SJtieJJnQtGc7RVL2StM2vGYVfqUOvUDxH6bC6aJTxPxTF0GnIgCyu7tjockiUWAYQRbxa7vKn34s5sQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "pify": "^3.0.0"
-          }
-        },
-        "pify": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
-          "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
-          "dev": true,
-          "optional": true
-        }
-      }
-    },
-    "duplexer": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
-      "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==",
-      "dev": true
-    },
-    "duplexer3": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/duplexer3/-/duplexer3-0.1.4.tgz",
-      "integrity": "sha1-7gHdHKwO08vH/b6jfcCo8c4ALOI=",
-      "dev": true,
-      "optional": true
-    },
-    "ecc-jsbn": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
-      "integrity": "sha1-OoOpBOVDUyh4dMVkt1SThoSamMk=",
-      "dev": true,
-      "requires": {
-        "jsbn": "~0.1.0",
-        "safer-buffer": "^2.1.0"
-      }
-    },
-    "ee-first": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
-      "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=",
-      "dev": true
-    },
-    "ejs": {
-      "version": "2.7.4",
-      "resolved": "https://registry.npmjs.org/ejs/-/ejs-2.7.4.tgz",
-      "integrity": "sha512-7vmuyh5+kuUyJKePhQfRQBhXV5Ce+RnaeeQArKu1EAMpL3WbgMt5WG6uQZpEVvYSSsxMXRKOewtDk9RaTKXRlA==",
-      "dev": true
-    },
-    "electron-to-chromium": {
-      "version": "1.3.770",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.770.tgz",
-      "integrity": "sha512-Kyh8DGK1KfEZuYKIHvuOmrKotsKZQ+qBkDIWHciE3QoFkxXB1KzPP+tfLilSHAfxTON0yYMnFCWkQtUOR7g6KQ==",
-      "dev": true
-    },
-    "email-prop-type": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/email-prop-type/-/email-prop-type-3.0.1.tgz",
-      "integrity": "sha512-tONZGMEOOkadp5OBftuVXU8DsceWmINxYK+pqPFB4LT5ODjrPX/esel3WGqbV7d6in5/MnZE4n4QcqOr4gh7dg==",
-      "requires": {
-        "email-validator": "^2.0.4"
-      }
-    },
-    "email-validator": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/email-validator/-/email-validator-2.0.4.tgz",
-      "integrity": "sha512-gYCwo7kh5S3IDyZPLZf6hSS0MnZT8QmJFqYvbqlDZSbwdZlY6QZWxJ4i/6UhITOJ4XzyI647Bm2MXKCLqnJ4nQ=="
-    },
-    "emittery": {
-      "version": "0.7.2",
-      "resolved": "https://registry.npmjs.org/emittery/-/emittery-0.7.2.tgz",
-      "integrity": "sha512-A8OG5SR/ij3SsJdWDJdkkSYUjQdCUx6APQXem0SaEePBSRg4eymGYwBkKo1Y6DU+af/Jn2dBQqDBvjnr9Vi8nQ==",
-      "dev": true
-    },
-    "emoji-regex": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "dev": true
-    },
-    "emojis-list": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
-      "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
-      "dev": true
-    },
-    "encodeurl": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
-      "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=",
-      "dev": true
-    },
-    "end-of-stream": {
-      "version": "1.4.4",
-      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
-      "integrity": "sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==",
-      "dev": true,
-      "requires": {
-        "once": "^1.4.0"
-      }
-    },
-    "enhanced-resolve": {
-      "version": "5.8.2",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.8.2.tgz",
-      "integrity": "sha512-F27oB3WuHDzvR2DOGNTaYy0D5o0cnrv8TeI482VM4kYgQd/FT9lUQwuNsJ0oOHtBUq7eiW5ytqzp7nBFknL+GA==",
-      "dev": true,
-      "requires": {
-        "graceful-fs": "^4.2.4",
-        "tapable": "^2.2.0"
-      }
-    },
-    "enquirer": {
-      "version": "2.3.6",
-      "resolved": "https://registry.npmjs.org/enquirer/-/enquirer-2.3.6.tgz",
-      "integrity": "sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg==",
-      "dev": true,
-      "requires": {
-        "ansi-colors": "^4.1.1"
-      }
-    },
-    "entities": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
-      "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
-      "dev": true
-    },
-    "envinfo": {
-      "version": "7.8.1",
-      "resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.8.1.tgz",
-      "integrity": "sha512-/o+BXHmB7ocbHEAs6F2EnG0ogybVVUdkRunTT2glZU9XAaGmhqskrvKwqXuDfNjEO0LZKWdejEEpnq8aM0tOaw==",
-      "dev": true
-    },
-    "error-ex": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
-      "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
-      "dev": true,
-      "requires": {
-        "is-arrayish": "^0.2.1"
-      }
-    },
-    "es-abstract": {
-      "version": "1.17.6",
-      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.17.6.tgz",
-      "integrity": "sha512-Fr89bON3WFyUi5EvAeI48QTWX0AyekGgLA8H+c+7fbfCkJwRWRMLd8CQedNEyJuoYYhmtEqY92pgte1FAhBlhw==",
-      "requires": {
-        "es-to-primitive": "^1.2.1",
-        "function-bind": "^1.1.1",
-        "has": "^1.0.3",
-        "has-symbols": "^1.0.1",
-        "is-callable": "^1.2.0",
-        "is-regex": "^1.1.0",
-        "object-inspect": "^1.7.0",
-        "object-keys": "^1.1.1",
-        "object.assign": "^4.1.0",
-        "string.prototype.trimend": "^1.0.1",
-        "string.prototype.trimstart": "^1.0.1"
-      }
-    },
-    "es-check": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/es-check/-/es-check-5.1.0.tgz",
-      "integrity": "sha512-QlRhlUmEpdnleBFYWRFROm8u9cNPOWdE1iXQPWiQXnwmlJZ0hSxWpLOXwpFLyRrwnTmt5xqYM/5OR8Ao0MYa8w==",
-      "dev": true,
-      "requires": {
-        "acorn": "6.1.1",
-        "caporal": "1.3.0",
-        "glob": "^7.1.2"
-      },
-      "dependencies": {
-        "acorn": {
-          "version": "6.1.1",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.1.1.tgz",
-          "integrity": "sha512-jPTiwtOxaHNaAPg/dmrJ/beuzLRnXtB0kQPQ8JpotKJgTB6rX6c8mlf315941pyjBSaPg8NHXS9fhP4u17DpGA==",
-          "dev": true
-        }
-      }
-    },
-    "es-module-lexer": {
-      "version": "0.3.26",
-      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-0.3.26.tgz",
-      "integrity": "sha512-Va0Q/xqtrss45hWzP8CZJwzGSZJjDM5/MJRE3IXXnUCcVLElR9BRaE9F62BopysASyc4nM3uwhSW7FFB9nlWAA==",
-      "dev": true
-    },
-    "es-to-primitive": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
-      "integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==",
-      "requires": {
-        "is-callable": "^1.1.4",
-        "is-date-object": "^1.0.1",
-        "is-symbol": "^1.0.2"
-      }
-    },
-    "escalade": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
-      "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==",
-      "dev": true
-    },
-    "escape-html": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
-      "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=",
-      "dev": true
-    },
-    "escape-string-regexp": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
-      "dev": true
-    },
-    "escodegen": {
-      "version": "1.14.3",
-      "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-1.14.3.tgz",
-      "integrity": "sha512-qFcX0XJkdg+PB3xjZZG/wKSuT1PnQWx57+TVSjIMmILd2yC/6ByYElPwJnslDsuWuSAp4AwJGumarAAmJch5Kw==",
-      "dev": true,
-      "requires": {
-        "esprima": "^4.0.1",
-        "estraverse": "^4.2.0",
-        "esutils": "^2.0.2",
-        "optionator": "^0.8.1",
-        "source-map": "~0.6.1"
-      }
-    },
-    "eslint": {
-      "version": "6.8.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-6.8.0.tgz",
-      "integrity": "sha512-K+Iayyo2LtyYhDSYwz5D5QdWw0hCacNzyq1Y821Xna2xSJj7cijoLLYmLxTQgcgZ9mC61nryMy9S7GRbYpI5Ig==",
-      "dev": true,
-      "requires": {
-        "@babel/code-frame": "^7.0.0",
-        "ajv": "^6.10.0",
-        "chalk": "^2.1.0",
-        "cross-spawn": "^6.0.5",
-        "debug": "^4.0.1",
-        "doctrine": "^3.0.0",
-        "eslint-scope": "^5.0.0",
-        "eslint-utils": "^1.4.3",
-        "eslint-visitor-keys": "^1.1.0",
-        "espree": "^6.1.2",
-        "esquery": "^1.0.1",
-        "esutils": "^2.0.2",
-        "file-entry-cache": "^5.0.1",
-        "functional-red-black-tree": "^1.0.1",
-        "glob-parent": "^5.0.0",
-        "globals": "^12.1.0",
-        "ignore": "^4.0.6",
-        "import-fresh": "^3.0.0",
-        "imurmurhash": "^0.1.4",
-        "inquirer": "^7.0.0",
-        "is-glob": "^4.0.0",
-        "js-yaml": "^3.13.1",
-        "json-stable-stringify-without-jsonify": "^1.0.1",
-        "levn": "^0.3.0",
-        "lodash": "^4.17.14",
-        "minimatch": "^3.0.4",
-        "mkdirp": "^0.5.1",
-        "natural-compare": "^1.4.0",
-        "optionator": "^0.8.3",
-        "progress": "^2.0.0",
-        "regexpp": "^2.0.1",
-        "semver": "^6.1.2",
-        "strip-ansi": "^5.2.0",
-        "strip-json-comments": "^3.0.1",
-        "table": "^5.2.3",
-        "text-table": "^0.2.0",
-        "v8-compile-cache": "^2.0.3"
-      },
-      "dependencies": {
-        "glob-parent": {
-          "version": "5.1.2",
-          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-          "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-          "dev": true,
-          "requires": {
-            "is-glob": "^4.0.1"
-          }
-        },
-        "globals": {
-          "version": "12.4.0",
-          "resolved": "https://registry.npmjs.org/globals/-/globals-12.4.0.tgz",
-          "integrity": "sha512-BWICuzzDvDoH54NHKCseDanAhE3CeDorgDL5MT6LMXXj2WCnd9UC2szdk4AWLfjdgNBCXLUanXYcpBBKOSWGwg==",
-          "dev": true,
-          "requires": {
-            "type-fest": "^0.8.1"
-          }
-        },
-        "semver": {
-          "version": "6.3.0",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-          "dev": true
-        }
-      }
-    },
-    "eslint-config-airbnb": {
-      "version": "18.1.0",
-      "resolved": "https://registry.npmjs.org/eslint-config-airbnb/-/eslint-config-airbnb-18.1.0.tgz",
-      "integrity": "sha512-kZFuQC/MPnH7KJp6v95xsLBf63G/w7YqdPfQ0MUanxQ7zcKUNG8j+sSY860g3NwCBOa62apw16J6pRN+AOgXzw==",
-      "dev": true,
-      "requires": {
-        "eslint-config-airbnb-base": "^14.1.0",
-        "object.assign": "^4.1.0",
-        "object.entries": "^1.1.1"
-      }
-    },
-    "eslint-config-airbnb-base": {
-      "version": "14.2.1",
-      "resolved": "https://registry.npmjs.org/eslint-config-airbnb-base/-/eslint-config-airbnb-base-14.2.1.tgz",
-      "integrity": "sha512-GOrQyDtVEc1Xy20U7vsB2yAoB4nBlfH5HZJeatRXHleO+OS5Ot+MWij4Dpltw4/DyIkqUfqz1epfhVR5XWWQPA==",
-      "dev": true,
-      "requires": {
-        "confusing-browser-globals": "^1.0.10",
-        "object.assign": "^4.1.2",
-        "object.entries": "^1.1.2"
-      },
-      "dependencies": {
-        "object.assign": {
-          "version": "4.1.2",
-          "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.2.tgz",
-          "integrity": "sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==",
-          "dev": true,
-          "requires": {
-            "call-bind": "^1.0.0",
-            "define-properties": "^1.1.3",
-            "has-symbols": "^1.0.1",
-            "object-keys": "^1.1.1"
-          }
-        }
-      }
-    },
-    "eslint-import-resolver-node": {
-      "version": "0.3.4",
-      "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.4.tgz",
-      "integrity": "sha512-ogtf+5AB/O+nM6DIeBUNr2fuT7ot9Qg/1harBfBtaP13ekEWFQEEMP94BCB7zaNW3gyY+8SHYF00rnqYwXKWOA==",
-      "dev": true,
-      "requires": {
-        "debug": "^2.6.9",
-        "resolve": "^1.13.1"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "2.6.9",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-          "dev": true,
-          "requires": {
-            "ms": "2.0.0"
-          }
-        }
-      }
-    },
-    "eslint-module-utils": {
-      "version": "2.6.1",
-      "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.6.1.tgz",
-      "integrity": "sha512-ZXI9B8cxAJIH4nfkhTwcRTEAnrVfobYqwjWy/QMCZ8rHkZHFjf9yO4BzpiF9kCSfNlMG54eKigISHpX0+AaT4A==",
-      "dev": true,
-      "requires": {
-        "debug": "^3.2.7",
-        "pkg-dir": "^2.0.0"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "3.2.7",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
-          "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
-          "dev": true,
-          "requires": {
-            "ms": "^2.1.1"
-          }
-        },
-        "find-up": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz",
-          "integrity": "sha1-RdG35QbHF93UgndaK3eSCjwMV6c=",
-          "dev": true,
-          "requires": {
-            "locate-path": "^2.0.0"
-          }
-        },
-        "locate-path": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-2.0.0.tgz",
-          "integrity": "sha1-K1aLJl7slExtnA3pw9u7ygNUzY4=",
-          "dev": true,
-          "requires": {
-            "p-locate": "^2.0.0",
-            "path-exists": "^3.0.0"
-          }
-        },
-        "ms": {
-          "version": "2.1.3",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-          "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-          "dev": true
-        },
-        "p-limit": {
-          "version": "1.3.0",
-          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.3.0.tgz",
-          "integrity": "sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==",
-          "dev": true,
-          "requires": {
-            "p-try": "^1.0.0"
-          }
-        },
-        "p-locate": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-2.0.0.tgz",
-          "integrity": "sha1-IKAQOyIqcMj9OcwuWAaA893l7EM=",
-          "dev": true,
-          "requires": {
-            "p-limit": "^1.1.0"
-          }
-        },
-        "p-try": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/p-try/-/p-try-1.0.0.tgz",
-          "integrity": "sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M=",
-          "dev": true
-        },
-        "path-exists": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
-          "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=",
-          "dev": true
-        },
-        "pkg-dir": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-2.0.0.tgz",
-          "integrity": "sha1-9tXREJ4Z1j7fQo4L1X4Sd3YVM0s=",
-          "dev": true,
-          "requires": {
-            "find-up": "^2.1.0"
-          }
-        }
-      }
-    },
-    "eslint-plugin-import": {
-      "version": "2.22.1",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.22.1.tgz",
-      "integrity": "sha512-8K7JjINHOpH64ozkAhpT3sd+FswIZTfMZTjdx052pnWrgRCVfp8op9tbjpAk3DdUeI/Ba4C8OjdC0r90erHEOw==",
-      "dev": true,
-      "requires": {
-        "array-includes": "^3.1.1",
-        "array.prototype.flat": "^1.2.3",
-        "contains-path": "^0.1.0",
-        "debug": "^2.6.9",
-        "doctrine": "1.5.0",
-        "eslint-import-resolver-node": "^0.3.4",
-        "eslint-module-utils": "^2.6.0",
-        "has": "^1.0.3",
-        "minimatch": "^3.0.4",
-        "object.values": "^1.1.1",
-        "read-pkg-up": "^2.0.0",
-        "resolve": "^1.17.0",
-        "tsconfig-paths": "^3.9.0"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "2.6.9",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-          "dev": true,
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
-        "doctrine": {
-          "version": "1.5.0",
-          "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-1.5.0.tgz",
-          "integrity": "sha1-N53Ocw9hZvds76TmcHoVmwLFpvo=",
-          "dev": true,
-          "requires": {
-            "esutils": "^2.0.2",
-            "isarray": "^1.0.0"
-          }
-        },
-        "isarray": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-          "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
-          "dev": true
-        }
-      }
-    },
-    "eslint-plugin-jsx-a11y": {
-      "version": "6.2.3",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.2.3.tgz",
-      "integrity": "sha512-CawzfGt9w83tyuVekn0GDPU9ytYtxyxyFZ3aSWROmnRRFQFT2BiPJd7jvRdzNDi6oLWaS2asMeYSNMjWTV4eNg==",
-      "dev": true,
-      "requires": {
-        "@babel/runtime": "^7.4.5",
-        "aria-query": "^3.0.0",
-        "array-includes": "^3.0.3",
-        "ast-types-flow": "^0.0.7",
-        "axobject-query": "^2.0.2",
-        "damerau-levenshtein": "^1.0.4",
-        "emoji-regex": "^7.0.2",
-        "has": "^1.0.3",
-        "jsx-ast-utils": "^2.2.1"
-      },
-      "dependencies": {
-        "emoji-regex": {
-          "version": "7.0.3",
-          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz",
-          "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==",
-          "dev": true
-        }
-      }
-    },
-    "eslint-plugin-react": {
-      "version": "7.19.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.19.0.tgz",
-      "integrity": "sha512-SPT8j72CGuAP+JFbT0sJHOB80TX/pu44gQ4vXH/cq+hQTiY2PuZ6IHkqXJV6x1b28GDdo1lbInjKUrrdUf0LOQ==",
-      "dev": true,
-      "requires": {
-        "array-includes": "^3.1.1",
-        "doctrine": "^2.1.0",
-        "has": "^1.0.3",
-        "jsx-ast-utils": "^2.2.3",
-        "object.entries": "^1.1.1",
-        "object.fromentries": "^2.0.2",
-        "object.values": "^1.1.1",
-        "prop-types": "^15.7.2",
-        "resolve": "^1.15.1",
-        "semver": "^6.3.0",
-        "string.prototype.matchall": "^4.0.2",
-        "xregexp": "^4.3.0"
-      },
-      "dependencies": {
-        "doctrine": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
-          "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
-          "dev": true,
-          "requires": {
-            "esutils": "^2.0.2"
-          }
-        },
-        "semver": {
-          "version": "6.3.0",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-          "dev": true
-        }
-      }
-    },
-    "eslint-plugin-react-hooks": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-1.7.0.tgz",
-      "integrity": "sha512-iXTCFcOmlWvw4+TOE8CLWj6yX1GwzT0Y6cUfHHZqWnSk144VmVIRcVGtUAzrLES7C798lmvnt02C7rxaOX1HNA==",
-      "dev": true
-    },
-    "eslint-scope": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
-      "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
-      "dev": true,
-      "requires": {
-        "esrecurse": "^4.3.0",
-        "estraverse": "^4.1.1"
-      }
-    },
-    "eslint-utils": {
-      "version": "1.4.3",
-      "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-1.4.3.tgz",
-      "integrity": "sha512-fbBN5W2xdY45KulGXmLHZ3c3FHfVYmKg0IrAKGOkT/464PQsx2UeIzfz1RmEci+KLm1bBaAzZAh8+/E+XAeZ8Q==",
-      "dev": true,
-      "requires": {
-        "eslint-visitor-keys": "^1.1.0"
-      }
-    },
-    "eslint-visitor-keys": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
-      "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
-      "dev": true
-    },
-    "espree": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/espree/-/espree-6.2.1.tgz",
-      "integrity": "sha512-ysCxRQY3WaXJz9tdbWOwuWr5Y/XrPTGX9Kiz3yoUXwW0VZ4w30HTkQLaGx/+ttFjF8i+ACbArnB4ce68a9m5hw==",
-      "dev": true,
-      "requires": {
-        "acorn": "^7.1.1",
-        "acorn-jsx": "^5.2.0",
-        "eslint-visitor-keys": "^1.1.0"
-      }
-    },
-    "esprima": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
-      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
-      "dev": true
-    },
-    "esquery": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.4.0.tgz",
-      "integrity": "sha512-cCDispWt5vHHtwMY2YrAQ4ibFkAL8RbH5YGBnZBc90MolvvfkkQcJro/aZiAQUlQ3qgrYS6D6v8Gc5G5CQsc9w==",
-      "dev": true,
-      "requires": {
-        "estraverse": "^5.1.0"
-      },
-      "dependencies": {
-        "estraverse": {
-          "version": "5.2.0",
-          "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.2.0.tgz",
-          "integrity": "sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ==",
-          "dev": true
-        }
-      }
-    },
-    "esrecurse": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
-      "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
-      "dev": true,
-      "requires": {
-        "estraverse": "^5.2.0"
-      },
-      "dependencies": {
-        "estraverse": {
-          "version": "5.2.0",
-          "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.2.0.tgz",
-          "integrity": "sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ==",
-          "dev": true
-        }
-      }
-    },
-    "estraverse": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
-      "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
-      "dev": true
-    },
-    "esutils": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
-      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
-      "dev": true
-    },
-    "etag": {
-      "version": "1.8.1",
-      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
-      "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=",
-      "dev": true
-    },
-    "eventemitter3": {
-      "version": "4.0.7",
-      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
-      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
-      "dev": true
-    },
-    "events": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
-      "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
-      "dev": true
-    },
-    "exec-buffer": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/exec-buffer/-/exec-buffer-3.2.0.tgz",
-      "integrity": "sha512-wsiD+2Tp6BWHoVv3B+5Dcx6E7u5zky+hUwOHjuH2hKSLR3dvRmX8fk8UD8uqQixHs4Wk6eDmiegVrMPjKj7wpA==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "execa": "^0.7.0",
-        "p-finally": "^1.0.0",
-        "pify": "^3.0.0",
-        "rimraf": "^2.5.4",
-        "tempfile": "^2.0.0"
-      },
-      "dependencies": {
-        "cross-spawn": {
-          "version": "5.1.0",
-          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz",
-          "integrity": "sha1-6L0O/uWPz/b4+UUQoKVUu/ojVEk=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "lru-cache": "^4.0.1",
-            "shebang-command": "^1.2.0",
-            "which": "^1.2.9"
-          }
-        },
-        "execa": {
-          "version": "0.7.0",
-          "resolved": "https://registry.npmjs.org/execa/-/execa-0.7.0.tgz",
-          "integrity": "sha1-lEvs00zEHuMqY6n68nrVpl/Fl3c=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "cross-spawn": "^5.0.1",
-            "get-stream": "^3.0.0",
-            "is-stream": "^1.1.0",
-            "npm-run-path": "^2.0.0",
-            "p-finally": "^1.0.0",
-            "signal-exit": "^3.0.0",
-            "strip-eof": "^1.0.0"
-          }
-        },
-        "get-stream": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
-          "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=",
-          "dev": true,
-          "optional": true
-        },
-        "lru-cache": {
-          "version": "4.1.5",
-          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz",
-          "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "pseudomap": "^1.0.2",
-            "yallist": "^2.1.2"
-          }
-        },
-        "pify": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
-          "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
-          "dev": true,
-          "optional": true
-        },
-        "yallist": {
-          "version": "2.1.2",
-          "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
-          "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=",
-          "dev": true,
-          "optional": true
-        }
-      }
-    },
-    "exec-sh": {
-      "version": "0.3.4",
-      "resolved": "https://registry.npmjs.org/exec-sh/-/exec-sh-0.3.4.tgz",
-      "integrity": "sha512-sEFIkc61v75sWeOe72qyrqg2Qg0OuLESziUDk/O/z2qgS15y2gWVFrI6f2Qn/qw/0/NCfCEsmNA4zOjkwEZT1A==",
-      "dev": true
-    },
-    "execa": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/execa/-/execa-1.0.0.tgz",
-      "integrity": "sha512-adbxcyWV46qiHyvSp50TKt05tB4tK3HcmF7/nxfAdhnox83seTDbwnaqKO4sXRy7roHAIFqJP/Rw/AuEbX61LA==",
-      "dev": true,
-      "requires": {
-        "cross-spawn": "^6.0.0",
-        "get-stream": "^4.0.0",
-        "is-stream": "^1.1.0",
-        "npm-run-path": "^2.0.0",
-        "p-finally": "^1.0.0",
-        "signal-exit": "^3.0.0",
-        "strip-eof": "^1.0.0"
-      }
-    },
-    "executable": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/executable/-/executable-4.1.1.tgz",
-      "integrity": "sha512-8iA79xD3uAch729dUG8xaaBBFGaEa0wdD2VkYLFHwlqosEj/jT66AzcreRDSgV7ehnNLBW2WR5jIXwGKjVdTLg==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "pify": "^2.2.0"
-      },
-      "dependencies": {
-        "pify": {
-          "version": "2.3.0",
-          "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
-          "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
-          "dev": true,
-          "optional": true
-        }
-      }
-    },
-    "exit": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
-      "integrity": "sha1-BjJjj42HfMghB9MKD/8aF8uhzQw=",
-      "dev": true
-    },
-    "exit-hook": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/exit-hook/-/exit-hook-1.1.1.tgz",
-      "integrity": "sha1-8FyiM7SMBdVP/wd2XfhQfpXAL/g=",
-      "dev": true
-    },
-    "expand-brackets": {
-      "version": "2.1.4",
-      "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz",
-      "integrity": "sha1-t3c14xXOMPa27/D4OwQVGiJEliI=",
-      "dev": true,
-      "requires": {
-        "debug": "^2.3.3",
-        "define-property": "^0.2.5",
-        "extend-shallow": "^2.0.1",
-        "posix-character-classes": "^0.1.0",
-        "regex-not": "^1.0.0",
-        "snapdragon": "^0.8.1",
-        "to-regex": "^3.0.1"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "2.6.9",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-          "dev": true,
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
-        "define-property": {
-          "version": "0.2.5",
-          "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
-          "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
-          "dev": true,
-          "requires": {
-            "is-descriptor": "^0.1.0"
-          }
-        },
-        "extend-shallow": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-          "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-          "dev": true,
-          "requires": {
-            "is-extendable": "^0.1.0"
-          }
-        }
-      }
-    },
-    "expect": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/expect/-/expect-26.6.2.tgz",
-      "integrity": "sha512-9/hlOBkQl2l/PLHJx6JjoDF6xPKcJEsUlWKb23rKE7KzeDqUZKXKNMW27KIue5JMdBV9HgmoJPcc8HtO85t9IA==",
-      "dev": true,
-      "requires": {
-        "@jest/types": "^26.6.2",
-        "ansi-styles": "^4.0.0",
-        "jest-get-type": "^26.3.0",
-        "jest-matcher-utils": "^26.6.2",
-        "jest-message-util": "^26.6.2",
-        "jest-regex-util": "^26.0.0"
-      },
-      "dependencies": {
-        "@jest/types": {
-          "version": "26.6.2",
-          "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
-          "integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
-          "dev": true,
-          "requires": {
-            "@types/istanbul-lib-coverage": "^2.0.0",
-            "@types/istanbul-reports": "^3.0.0",
-            "@types/node": "*",
-            "@types/yargs": "^15.0.0",
-            "chalk": "^4.0.0"
-          }
-        },
-        "@types/istanbul-reports": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz",
-          "integrity": "sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==",
-          "dev": true,
-          "requires": {
-            "@types/istanbul-lib-report": "*"
-          }
-        },
-        "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,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
-          "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "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,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "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
-        },
-        "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
-        },
-        "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,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
-    "express": {
-      "version": "4.17.1",
-      "resolved": "https://registry.npmjs.org/express/-/express-4.17.1.tgz",
-      "integrity": "sha512-mHJ9O79RqluphRrcw2X/GTh3k9tVv8YcoyY4Kkh4WDMUYKRZUq0h1o0w2rrrxBqM7VoeUVqgb27xlEMXTnYt4g==",
-      "dev": true,
-      "requires": {
-        "accepts": "~1.3.7",
-        "array-flatten": "1.1.1",
-        "body-parser": "1.19.0",
-        "content-disposition": "0.5.3",
-        "content-type": "~1.0.4",
-        "cookie": "0.4.0",
-        "cookie-signature": "1.0.6",
-        "debug": "2.6.9",
-        "depd": "~1.1.2",
-        "encodeurl": "~1.0.2",
-        "escape-html": "~1.0.3",
-        "etag": "~1.8.1",
-        "finalhandler": "~1.1.2",
-        "fresh": "0.5.2",
-        "merge-descriptors": "1.0.1",
-        "methods": "~1.1.2",
-        "on-finished": "~2.3.0",
-        "parseurl": "~1.3.3",
-        "path-to-regexp": "0.1.7",
-        "proxy-addr": "~2.0.5",
-        "qs": "6.7.0",
-        "range-parser": "~1.2.1",
-        "safe-buffer": "5.1.2",
-        "send": "0.17.1",
-        "serve-static": "1.14.1",
-        "setprototypeof": "1.1.1",
-        "statuses": "~1.5.0",
-        "type-is": "~1.6.18",
-        "utils-merge": "1.0.1",
-        "vary": "~1.1.2"
-      },
-      "dependencies": {
-        "cookie": {
-          "version": "0.4.0",
-          "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.0.tgz",
-          "integrity": "sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg==",
-          "dev": true
-        },
-        "debug": {
-          "version": "2.6.9",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-          "dev": true,
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
-        "path-to-regexp": {
-          "version": "0.1.7",
-          "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
-          "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=",
-          "dev": true
-        },
-        "qs": {
-          "version": "6.7.0",
-          "resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz",
-          "integrity": "sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ==",
-          "dev": true
-        }
-      }
-    },
-    "ext-list": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/ext-list/-/ext-list-2.2.2.tgz",
-      "integrity": "sha512-u+SQgsubraE6zItfVA0tBuCBhfU9ogSRnsvygI7wht9TS510oLkBRXBsqopeUG/GBOIQyKZO9wjTqIu/sf5zFA==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "mime-db": "^1.28.0"
-      }
-    },
-    "ext-name": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/ext-name/-/ext-name-5.0.0.tgz",
-      "integrity": "sha512-yblEwXAbGv1VQDmow7s38W77hzAgJAO50ztBLMcUyUBfxv1HC+LGwtiEN+Co6LtlqT/5uwVOxsD4TNIilWhwdQ==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "ext-list": "^2.0.0",
-        "sort-keys-length": "^1.0.0"
-      }
-    },
-    "extend": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
-      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
-      "dev": true
-    },
-    "extend-shallow": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
-      "integrity": "sha1-Jqcarwc7OfshJxcnRhMcJwQCjbg=",
-      "dev": true,
-      "requires": {
-        "assign-symbols": "^1.0.0",
-        "is-extendable": "^1.0.1"
-      },
-      "dependencies": {
-        "is-extendable": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
-          "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
-          "dev": true,
-          "requires": {
-            "is-plain-object": "^2.0.4"
-          }
-        }
-      }
-    },
-    "external-editor": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/external-editor/-/external-editor-3.1.0.tgz",
-      "integrity": "sha512-hMQ4CX1p1izmuLYyZqLMO/qGNw10wSv9QDCPfzXfyFrOaCSSoRfqE1Kf1s5an66J5JZC62NewG+mK49jOCtQew==",
-      "dev": true,
-      "requires": {
-        "chardet": "^0.7.0",
-        "iconv-lite": "^0.4.24",
-        "tmp": "^0.0.33"
-      }
-    },
-    "extglob": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/extglob/-/extglob-2.0.4.tgz",
-      "integrity": "sha512-Nmb6QXkELsuBr24CJSkilo6UHHgbekK5UiZgfE6UHD3Eb27YC6oD+bhcT+tJ6cl8dmsgdQxnWlcry8ksBIBLpw==",
-      "dev": true,
-      "requires": {
-        "array-unique": "^0.3.2",
-        "define-property": "^1.0.0",
-        "expand-brackets": "^2.1.4",
-        "extend-shallow": "^2.0.1",
-        "fragment-cache": "^0.2.1",
-        "regex-not": "^1.0.0",
-        "snapdragon": "^0.8.1",
-        "to-regex": "^3.0.1"
-      },
-      "dependencies": {
-        "define-property": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
-          "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=",
-          "dev": true,
-          "requires": {
-            "is-descriptor": "^1.0.0"
-          }
-        },
-        "extend-shallow": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-          "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-          "dev": true,
-          "requires": {
-            "is-extendable": "^0.1.0"
-          }
-        },
-        "is-accessor-descriptor": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
-          "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==",
-          "dev": true,
-          "requires": {
-            "kind-of": "^6.0.0"
-          }
-        },
-        "is-data-descriptor": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz",
-          "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==",
-          "dev": true,
-          "requires": {
-            "kind-of": "^6.0.0"
-          }
-        },
-        "is-descriptor": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz",
-          "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==",
-          "dev": true,
-          "requires": {
-            "is-accessor-descriptor": "^1.0.0",
-            "is-data-descriptor": "^1.0.0",
-            "kind-of": "^6.0.2"
-          }
-        }
-      }
-    },
-    "extsprintf": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz",
-      "integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU=",
-      "dev": true
-    },
-    "eyes": {
-      "version": "0.1.8",
-      "resolved": "https://registry.npmjs.org/eyes/-/eyes-0.1.8.tgz",
-      "integrity": "sha1-Ys8SAjTGg3hdkCNIqADvPgzCC8A=",
-      "dev": true
-    },
-    "fast-deep-equal": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-      "dev": true
-    },
-    "fast-glob": {
-      "version": "3.2.6",
-      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.6.tgz",
-      "integrity": "sha512-GnLuqj/pvQ7pX8/L4J84nijv6sAnlwvSDpMkJi9i7nPmPxGtRPkBSStfvDW5l6nMdX9VWe+pkKWFTgD+vF2QSQ==",
-      "dev": true,
-      "requires": {
-        "@nodelib/fs.stat": "^2.0.2",
-        "@nodelib/fs.walk": "^1.2.3",
-        "glob-parent": "^5.1.2",
-        "merge2": "^1.3.0",
-        "micromatch": "^4.0.4"
-      },
-      "dependencies": {
-        "braces": {
-          "version": "3.0.2",
-          "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-          "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-          "dev": true,
-          "requires": {
-            "fill-range": "^7.0.1"
-          }
-        },
-        "fill-range": {
-          "version": "7.0.1",
-          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-          "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-          "dev": true,
-          "requires": {
-            "to-regex-range": "^5.0.1"
-          }
-        },
-        "glob-parent": {
-          "version": "5.1.2",
-          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-          "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-          "dev": true,
-          "requires": {
-            "is-glob": "^4.0.1"
-          }
-        },
-        "is-number": {
-          "version": "7.0.0",
-          "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-          "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-          "dev": true
-        },
-        "micromatch": {
-          "version": "4.0.4",
-          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz",
-          "integrity": "sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==",
-          "dev": true,
-          "requires": {
-            "braces": "^3.0.1",
-            "picomatch": "^2.2.3"
-          }
-        },
-        "to-regex-range": {
-          "version": "5.0.1",
-          "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-          "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-          "dev": true,
-          "requires": {
-            "is-number": "^7.0.0"
-          }
-        }
-      }
-    },
-    "fast-json-stable-stringify": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
-      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
-      "dev": true
-    },
-    "fast-levenshtein": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
-      "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=",
-      "dev": true
-    },
-    "fast-xml-parser": {
-      "version": "3.19.0",
-      "resolved": "https://registry.npmjs.org/fast-xml-parser/-/fast-xml-parser-3.19.0.tgz",
-      "integrity": "sha512-4pXwmBplsCPv8FOY1WRakF970TjNGnGnfbOnLqjlYvMiF1SR3yOHyxMR/YCXpPTOspNF5gwudqktIP4VsWkvBg==",
-      "dev": true,
-      "optional": true
-    },
-    "fastest-levenshtein": {
-      "version": "1.0.12",
-      "resolved": "https://registry.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.12.tgz",
-      "integrity": "sha512-On2N+BpYJ15xIC974QNVuYGMOlEVt4s0EOI3wwMqOmK1fdDY+FN/zltPV8vosq4ad4c/gJ1KHScUn/6AWIgiow==",
-      "dev": true
-    },
-    "fastq": {
-      "version": "1.11.1",
-      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.11.1.tgz",
-      "integrity": "sha512-HOnr8Mc60eNYl1gzwp6r5RoUyAn5/glBolUzP/Ez6IFVPMPirxn/9phgL6zhOtaTy7ISwPvQ+wT+hfcRZh/bzw==",
-      "dev": true,
-      "requires": {
-        "reusify": "^1.0.4"
-      }
-    },
-    "faye-websocket": {
-      "version": "0.11.4",
-      "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.4.tgz",
-      "integrity": "sha512-CzbClwlXAuiRQAlUyfqPgvPoNKTckTPGfwZV4ZdAhVcP2lh9KUxJg2b5GkE7XbjKQ3YJnQ9z6D9ntLAlB+tP8g==",
-      "dev": true,
-      "requires": {
-        "websocket-driver": ">=0.5.1"
-      }
-    },
-    "fb-watchman": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/fb-watchman/-/fb-watchman-2.0.1.tgz",
-      "integrity": "sha512-DkPJKQeY6kKwmuMretBhr7G6Vodr7bFwDYTXIkfG1gjvNpaxBTQV3PbXg6bR1c1UP4jPOX0jHUbbHANL9vRjVg==",
-      "dev": true,
-      "requires": {
-        "bser": "2.1.1"
-      }
-    },
-    "fd-slicer": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz",
-      "integrity": "sha1-JcfInLH5B3+IkbvmHY85Dq4lbx4=",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "pend": "~1.2.0"
-      }
-    },
-    "figures": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/figures/-/figures-3.2.0.tgz",
-      "integrity": "sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==",
-      "dev": true,
-      "requires": {
-        "escape-string-regexp": "^1.0.5"
-      }
-    },
-    "file-entry-cache": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-5.0.1.tgz",
-      "integrity": "sha512-bCg29ictuBaKUwwArK4ouCaqDgLZcysCFLmM/Yn/FDoqndh/9vNuQfXRDvTuXKLxfD/JtZQGKFT8MGcJBK644g==",
-      "dev": true,
-      "requires": {
-        "flat-cache": "^2.0.1"
-      }
-    },
-    "file-loader": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-6.2.0.tgz",
-      "integrity": "sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==",
-      "dev": true,
-      "requires": {
-        "loader-utils": "^2.0.0",
-        "schema-utils": "^3.0.0"
-      },
-      "dependencies": {
-        "ajv": {
-          "version": "6.12.6",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-          "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-          "dev": true,
-          "requires": {
-            "fast-deep-equal": "^3.1.1",
-            "fast-json-stable-stringify": "^2.0.0",
-            "json-schema-traverse": "^0.4.1",
-            "uri-js": "^4.2.2"
-          }
-        },
-        "schema-utils": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.0.tgz",
-          "integrity": "sha512-tTEaeYkyIhEZ9uWgAjDerWov3T9MgX8dhhy2r0IGeeX4W8ngtGl1++dUve/RUqzuaASSh7shwCDJjEzthxki8w==",
-          "dev": true,
-          "requires": {
-            "@types/json-schema": "^7.0.7",
-            "ajv": "^6.12.5",
-            "ajv-keywords": "^3.5.2"
-          }
-        }
-      }
-    },
-    "file-type": {
-      "version": "12.4.2",
-      "resolved": "https://registry.npmjs.org/file-type/-/file-type-12.4.2.tgz",
-      "integrity": "sha512-UssQP5ZgIOKelfsaB5CuGAL+Y+q7EmONuiwF3N5HAH0t27rvrttgi6Ra9k/+DVaY9UF6+ybxu5pOXLUdA8N7Vg==",
-      "dev": true
-    },
-    "file-uri-to-path": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
-      "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
-      "dev": true,
-      "optional": true
-    },
-    "filename-reserved-regex": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/filename-reserved-regex/-/filename-reserved-regex-2.0.0.tgz",
-      "integrity": "sha1-q/c9+rc10EVECr/qLZHzieu/oik=",
-      "dev": true,
-      "optional": true
-    },
-    "filenamify": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/filenamify/-/filenamify-2.1.0.tgz",
-      "integrity": "sha512-ICw7NTT6RsDp2rnYKVd8Fu4cr6ITzGy3+u4vUujPkabyaz+03F24NWEX7fs5fp+kBonlaqPH8fAO2NM+SXt/JA==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "filename-reserved-regex": "^2.0.0",
-        "strip-outer": "^1.0.0",
-        "trim-repeated": "^1.0.0"
-      }
-    },
-    "filesize": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/filesize/-/filesize-6.1.0.tgz",
-      "integrity": "sha512-LpCHtPQ3sFx67z+uh2HnSyWSLLu5Jxo21795uRDuar/EOuYWXib5EmPaGIBuSnRqH2IODiKA2k5re/K9OnN/Yg==",
-      "dev": true
-    },
-    "fill-range": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
-      "integrity": "sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=",
-      "dev": true,
-      "requires": {
-        "extend-shallow": "^2.0.1",
-        "is-number": "^3.0.0",
-        "repeat-string": "^1.6.1",
-        "to-regex-range": "^2.1.0"
-      },
-      "dependencies": {
-        "extend-shallow": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-          "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-          "dev": true,
-          "requires": {
-            "is-extendable": "^0.1.0"
-          }
-        }
-      }
-    },
-    "finalhandler": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
-      "integrity": "sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==",
-      "dev": true,
-      "requires": {
-        "debug": "2.6.9",
-        "encodeurl": "~1.0.2",
-        "escape-html": "~1.0.3",
-        "on-finished": "~2.3.0",
-        "parseurl": "~1.3.3",
-        "statuses": "~1.5.0",
-        "unpipe": "~1.0.0"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "2.6.9",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-          "dev": true,
-          "requires": {
-            "ms": "2.0.0"
-          }
-        }
-      }
-    },
-    "find-cache-dir": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-2.1.0.tgz",
-      "integrity": "sha512-Tq6PixE0w/VMFfCgbONnkiQIVol/JJL7nRMi20fqzA4NRs9AfeqMGeRdPi3wIhYkxjeBaWh2rxwapn5Tu3IqOQ==",
-      "dev": true,
-      "requires": {
-        "commondir": "^1.0.1",
-        "make-dir": "^2.0.0",
-        "pkg-dir": "^3.0.0"
-      }
-    },
-    "find-up": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
-      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
-      "dev": true,
-      "requires": {
-        "locate-path": "^5.0.0",
-        "path-exists": "^4.0.0"
-      }
-    },
-    "find-versions": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/find-versions/-/find-versions-3.2.0.tgz",
-      "integrity": "sha512-P8WRou2S+oe222TOCHitLy8zj+SIsVJh52VP4lvXkaFVnOFFdoWv1H1Jjvel1aI6NCFOAaeAVm8qrI0odiLcww==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "semver-regex": "^2.0.0"
-      }
-    },
-    "flat-cache": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-2.0.1.tgz",
-      "integrity": "sha512-LoQe6yDuUMDzQAEH8sgmh4Md6oZnc/7PjtwjNFSzveXqSHt6ka9fPBuso7IGf9Rz4uqnSnWiFH2B/zj24a5ReA==",
-      "dev": true,
-      "requires": {
-        "flatted": "^2.0.0",
-        "rimraf": "2.6.3",
-        "write": "1.0.3"
-      },
-      "dependencies": {
-        "rimraf": {
-          "version": "2.6.3",
-          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz",
-          "integrity": "sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==",
-          "dev": true,
-          "requires": {
-            "glob": "^7.1.3"
-          }
-        }
-      }
-    },
-    "flatted": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/flatted/-/flatted-2.0.2.tgz",
-      "integrity": "sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA==",
-      "dev": true
-    },
-    "focus-lock": {
-      "version": "0.9.1",
-      "resolved": "https://registry.npmjs.org/focus-lock/-/focus-lock-0.9.1.tgz",
-      "integrity": "sha512-/2Nj60Cps6yOLSO+CkVbeSKfwfns5XbX6HOedIK9PdzODP04N9c3xqOcPXayN0WsT9YjJvAnXmI0NdqNIDf5Kw==",
-      "requires": {
-        "tslib": "^2.0.3"
-      },
-      "dependencies": {
-        "tslib": {
-          "version": "2.3.0",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
-          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
-        }
-      }
-    },
-    "follow-redirects": {
-      "version": "1.13.3",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.13.3.tgz",
-      "integrity": "sha512-DUgl6+HDzB0iEptNQEXLx/KhTmDb8tZUHSeLqpnjpknR70H0nC2t9N73BK6fN4hOvJ84pKlIQVQ4k5FFlBedKA=="
-    },
-    "font-awesome": {
-      "version": "4.7.0",
-      "resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz",
-      "integrity": "sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM="
-    },
-    "for-in": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
-      "integrity": "sha1-gQaNKVqBQuwKxybG4iAMMPttXoA=",
-      "dev": true
-    },
-    "forever-agent": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
-      "integrity": "sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=",
-      "dev": true
-    },
-    "fork-ts-checker-webpack-plugin": {
-      "version": "4.1.6",
-      "resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-4.1.6.tgz",
-      "integrity": "sha512-DUxuQaKoqfNne8iikd14SAkh5uw4+8vNifp6gmA73yYNS6ywLIWSLD/n/mBzHQRpW3J7rbATEakmiA8JvkTyZw==",
-      "dev": true,
-      "requires": {
-        "@babel/code-frame": "^7.5.5",
-        "chalk": "^2.4.1",
-        "micromatch": "^3.1.10",
-        "minimatch": "^3.0.4",
-        "semver": "^5.6.0",
-        "tapable": "^1.0.0",
-        "worker-rpc": "^0.1.0"
-      },
-      "dependencies": {
-        "tapable": {
-          "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz",
-          "integrity": "sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==",
-          "dev": true
-        }
-      }
-    },
-    "form-data": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.3.tgz",
-      "integrity": "sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==",
-      "dev": true,
-      "requires": {
-        "asynckit": "^0.4.0",
-        "combined-stream": "^1.0.6",
-        "mime-types": "^2.1.12"
-      }
-    },
-    "form-urlencoded": {
-      "version": "4.1.4",
-      "resolved": "https://registry.npmjs.org/form-urlencoded/-/form-urlencoded-4.1.4.tgz",
-      "integrity": "sha512-R7Vytos0gMYuPQTMwnNzvK9PBItNV+Qkm/pvghEZI3j2kMrzZmJlczAgHFmt12VV+IRYQXgTlSGP1PKAsMCIUA=="
-    },
-    "formidable": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/formidable/-/formidable-1.2.2.tgz",
-      "integrity": "sha512-V8gLm+41I/8kguQ4/o1D3RIHRmhYFG4pnNyonvua+40rqcEmT4+V71yaZ3B457xbbgCsCfjSPi65u/W6vK1U5Q==",
-      "dev": true
-    },
-    "formik": {
-      "version": "2.2.6",
-      "resolved": "https://registry.npmjs.org/formik/-/formik-2.2.6.tgz",
-      "integrity": "sha512-Kxk2zQRafy56zhLmrzcbryUpMBvT0tal5IvcifK5+4YNGelKsnrODFJ0sZQRMQboblWNym4lAW3bt+tf2vApSA==",
-      "requires": {
-        "deepmerge": "^2.1.1",
-        "hoist-non-react-statics": "^3.3.0",
-        "lodash": "^4.17.14",
-        "lodash-es": "^4.17.14",
-        "react-fast-compare": "^2.0.1",
-        "tiny-warning": "^1.0.2",
-        "tslib": "^1.10.0"
-      },
-      "dependencies": {
-        "deepmerge": {
-          "version": "2.2.1",
-          "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz",
-          "integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA=="
-        }
-      }
-    },
-    "forwarded": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
-      "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
-      "dev": true
-    },
-    "fraction.js": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.1.1.tgz",
-      "integrity": "sha512-MHOhvvxHTfRFpF1geTK9czMIZ6xclsEor2wkIGYYq+PxcQqT7vStJqjhe6S1TenZrMZzo+wlqOufBDVepUEgPg==",
-      "dev": true
-    },
-    "fragment-cache": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/fragment-cache/-/fragment-cache-0.2.1.tgz",
-      "integrity": "sha1-QpD60n8T6Jvn8zeZxrxaCr//DRk=",
-      "dev": true,
-      "requires": {
-        "map-cache": "^0.2.2"
-      }
-    },
-    "fresh": {
-      "version": "0.5.2",
-      "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
-      "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=",
-      "dev": true
-    },
-    "from2": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/from2/-/from2-2.3.0.tgz",
-      "integrity": "sha1-i/tVAr3kpNNs/e6gB/zKIdfjgq8=",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "inherits": "^2.0.1",
-        "readable-stream": "^2.0.0"
-      }
-    },
-    "fs-constants": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
-      "integrity": "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==",
-      "dev": true,
-      "optional": true
-    },
-    "fs-extra": {
-      "version": "9.1.0",
-      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
-      "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
-      "dev": true,
-      "requires": {
-        "at-least-node": "^1.0.0",
-        "graceful-fs": "^4.2.0",
-        "jsonfile": "^6.0.1",
-        "universalify": "^2.0.0"
-      }
-    },
-    "fs-monkey": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/fs-monkey/-/fs-monkey-1.0.3.tgz",
-      "integrity": "sha512-cybjIfiiE+pTWicSCLFHSrXZ6EilF30oh91FDP9S2B051prEa7QWfrVTQm10/dDpswBDXZugPa1Ogu8Yh+HV0Q==",
-      "dev": true
-    },
-    "fs-readdir-recursive": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/fs-readdir-recursive/-/fs-readdir-recursive-1.1.0.tgz",
-      "integrity": "sha512-GNanXlVr2pf02+sPN40XN8HG+ePaNcvM0q5mZBd668Obwb0yD5GiUbZOFgwn8kGMY6I3mdyDJzieUy3PTYyTRA==",
-      "dev": true
-    },
-    "fs.realpath": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
-    },
-    "fsevents": {
-      "version": "1.2.13",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
-      "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "bindings": "^1.5.0",
-        "nan": "^2.12.1"
-      }
-    },
-    "function-bind": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
-      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
-    },
-    "function.prototype.name": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.4.tgz",
-      "integrity": "sha512-iqy1pIotY/RmhdFZygSSlW0wko2yxkSCKqsuv4pr8QESohpYyG/Z7B/XXvPRKTJS//960rgguE5mSRUsDdaJrQ==",
-      "requires": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.18.0-next.2",
-        "functions-have-names": "^1.2.2"
-      },
-      "dependencies": {
-        "es-abstract": {
-          "version": "1.18.3",
-          "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.18.3.tgz",
-          "integrity": "sha512-nQIr12dxV7SSxE6r6f1l3DtAeEYdsGpps13dR0TwJg1S8gyp4ZPgy3FZcHBgbiQqnoqSTb+oC+kO4UQ0C/J8vw==",
-          "requires": {
-            "call-bind": "^1.0.2",
-            "es-to-primitive": "^1.2.1",
-            "function-bind": "^1.1.1",
-            "get-intrinsic": "^1.1.1",
-            "has": "^1.0.3",
-            "has-symbols": "^1.0.2",
-            "is-callable": "^1.2.3",
-            "is-negative-zero": "^2.0.1",
-            "is-regex": "^1.1.3",
-            "is-string": "^1.0.6",
-            "object-inspect": "^1.10.3",
-            "object-keys": "^1.1.1",
-            "object.assign": "^4.1.2",
-            "string.prototype.trimend": "^1.0.4",
-            "string.prototype.trimstart": "^1.0.4",
-            "unbox-primitive": "^1.0.1"
-          }
-        },
-        "has-symbols": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.2.tgz",
-          "integrity": "sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw=="
-        },
-        "is-callable": {
-          "version": "1.2.3",
-          "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.3.tgz",
-          "integrity": "sha512-J1DcMe8UYTBSrKezuIUTUwjXsho29693unXM2YhJUTR2txK/eG47bvNa/wipPFmZFgr/N6f1GA66dv0mEyTIyQ=="
-        },
-        "is-regex": {
-          "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.3.tgz",
-          "integrity": "sha512-qSVXFz28HM7y+IWX6vLCsexdlvzT1PJNFSBuaQLQ5o0IEw8UDYW6/2+eCMVyIsbM8CNLX2a/QWmSpyxYEHY7CQ==",
-          "requires": {
-            "call-bind": "^1.0.2",
-            "has-symbols": "^1.0.2"
-          }
-        },
-        "object-inspect": {
-          "version": "1.11.0",
-          "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.11.0.tgz",
-          "integrity": "sha512-jp7ikS6Sd3GxQfZJPyH3cjcbJF6GZPClgdV+EFygjFLQ5FmW/dRUnTd9PQ9k0JhoNDabWFbpF1yCdSWCC6gexg=="
-        },
-        "object.assign": {
-          "version": "4.1.2",
-          "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.2.tgz",
-          "integrity": "sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==",
-          "requires": {
-            "call-bind": "^1.0.0",
-            "define-properties": "^1.1.3",
-            "has-symbols": "^1.0.1",
-            "object-keys": "^1.1.1"
-          }
-        },
-        "string.prototype.trimend": {
-          "version": "1.0.4",
-          "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.4.tgz",
-          "integrity": "sha512-y9xCjw1P23Awk8EvTpcyL2NIr1j7wJ39f+k6lvRnSMz+mz9CGz9NYPelDk42kOz6+ql8xjfK8oYzy3jAP5QU5A==",
-          "requires": {
-            "call-bind": "^1.0.2",
-            "define-properties": "^1.1.3"
-          }
-        },
-        "string.prototype.trimstart": {
-          "version": "1.0.4",
-          "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.4.tgz",
-          "integrity": "sha512-jh6e984OBfvxS50tdY2nRZnoC5/mLFKOREQfw8t5yytkoUsJRNxvI/E39qu1sD0OtWI3OC0XgKSmcWwziwYuZw==",
-          "requires": {
-            "call-bind": "^1.0.2",
-            "define-properties": "^1.1.3"
-          }
-        }
-      }
-    },
-    "functional-red-black-tree": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz",
-      "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=",
-      "dev": true
-    },
-    "functions-have-names": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.2.tgz",
-      "integrity": "sha512-bLgc3asbWdwPbx2mNk2S49kmJCuQeu0nfmaOgbs8WIyzzkw3r4htszdIi9Q9EMezDPTYuJx2wvjZ/EwgAthpnA=="
-    },
-    "gensync": {
-      "version": "1.0.0-beta.1",
-      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.1.tgz",
-      "integrity": "sha512-r8EC6NO1sngH/zdD9fiRDLdcgnbayXah+mLgManTaIZJqEC1MZstmnox8KpnI2/fxQwrp5OpCOYWLp4rBl4Jcg==",
-      "dev": true
-    },
-    "get-caller-file": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
-      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
-      "dev": true
-    },
-    "get-intrinsic": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.1.tgz",
-      "integrity": "sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==",
-      "requires": {
-        "function-bind": "^1.1.1",
-        "has": "^1.0.3",
-        "has-symbols": "^1.0.1"
-      }
-    },
-    "get-nonce": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz",
-      "integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q=="
-    },
-    "get-package-type": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/get-package-type/-/get-package-type-0.1.0.tgz",
-      "integrity": "sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==",
-      "dev": true
-    },
-    "get-proxy": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/get-proxy/-/get-proxy-2.1.0.tgz",
-      "integrity": "sha512-zmZIaQTWnNQb4R4fJUEp/FC51eZsc6EkErspy3xtIYStaq8EB/hDIWipxsal+E8rz0qD7f2sL/NA9Xee4RInJw==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "npm-conf": "^1.1.0"
-      }
-    },
-    "get-stdin": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
-      "integrity": "sha1-uWjGsKBDhDJJAui/Gl3zJXmkUP4=",
-      "dev": true,
-      "optional": true
-    },
-    "get-stream": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz",
-      "integrity": "sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==",
-      "dev": true,
-      "requires": {
-        "pump": "^3.0.0"
-      }
-    },
-    "get-value": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/get-value/-/get-value-2.0.6.tgz",
-      "integrity": "sha1-3BXKHGcjh8p2vTesCjlbogQqLCg=",
-      "dev": true
-    },
-    "getpass": {
-      "version": "0.1.7",
-      "resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.7.tgz",
-      "integrity": "sha1-Xv+OPmhNVprkyysSgmBOi6YhSfo=",
-      "dev": true,
-      "requires": {
-        "assert-plus": "^1.0.0"
-      }
-    },
-    "gifsicle": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/gifsicle/-/gifsicle-5.2.0.tgz",
-      "integrity": "sha512-vOIS3j0XoTCxq9pkGj43gEix82RkI5FveNgaFZutjbaui/HH+4fR8Y56dwXDuxYo8hR4xOo6/j2h1WHoQW6XLw==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "bin-build": "^3.0.0",
-        "bin-wrapper": "^4.0.0",
-        "execa": "^5.0.0",
-        "logalot": "^2.0.0"
-      },
-      "dependencies": {
-        "cross-spawn": {
-          "version": "7.0.3",
-          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-          "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "path-key": "^3.1.0",
-            "shebang-command": "^2.0.0",
-            "which": "^2.0.1"
-          }
-        },
-        "execa": {
-          "version": "5.1.1",
-          "resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
-          "integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "cross-spawn": "^7.0.3",
-            "get-stream": "^6.0.0",
-            "human-signals": "^2.1.0",
-            "is-stream": "^2.0.0",
-            "merge-stream": "^2.0.0",
-            "npm-run-path": "^4.0.1",
-            "onetime": "^5.1.2",
-            "signal-exit": "^3.0.3",
-            "strip-final-newline": "^2.0.0"
-          }
-        },
-        "get-stream": {
-          "version": "6.0.1",
-          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
-          "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
-          "dev": true,
-          "optional": true
-        },
-        "is-stream": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.0.tgz",
-          "integrity": "sha512-XCoy+WlUr7d1+Z8GgSuXmpuUFC9fOhRXglJMx+dwLKTkL44Cjd4W1Z5P+BQZpr+cR93aGP4S/s7Ftw6Nd/kiEw==",
-          "dev": true,
-          "optional": true
-        },
-        "npm-run-path": {
-          "version": "4.0.1",
-          "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
-          "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "path-key": "^3.0.0"
-          }
-        },
-        "path-key": {
-          "version": "3.1.1",
-          "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-          "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-          "dev": true,
-          "optional": true
-        },
-        "shebang-command": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-          "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "shebang-regex": "^3.0.0"
-          }
-        },
-        "shebang-regex": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-          "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-          "dev": true,
-          "optional": true
-        },
-        "which": {
-          "version": "2.0.2",
-          "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-          "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "isexe": "^2.0.0"
-          }
-        }
-      }
-    },
-    "glob": {
-      "version": "7.1.6",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
-      "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
-      "dev": true,
-      "requires": {
-        "fs.realpath": "^1.0.0",
-        "inflight": "^1.0.4",
-        "inherits": "2",
-        "minimatch": "^3.0.4",
-        "once": "^1.3.0",
-        "path-is-absolute": "^1.0.0"
-      }
-    },
-    "glob-parent": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz",
-      "integrity": "sha1-nmr2KZ2NO9K9QEMIMr0RPfkGxa4=",
-      "dev": true,
-      "requires": {
-        "is-glob": "^3.1.0",
-        "path-dirname": "^1.0.0"
-      },
-      "dependencies": {
-        "is-glob": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-3.1.0.tgz",
-          "integrity": "sha1-e6WuJCF4BKxwcHuWkiVnSGzD6Eo=",
-          "dev": true,
-          "requires": {
-            "is-extglob": "^2.1.0"
-          }
-        }
-      }
-    },
-    "glob-to-regexp": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
-      "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==",
-      "dev": true
-    },
-    "global-modules": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/global-modules/-/global-modules-2.0.0.tgz",
-      "integrity": "sha512-NGbfmJBp9x8IxyJSd1P+otYK8vonoJactOogrVfFRIAEY1ukil8RSKDz2Yo7wh1oihl51l/r6W4epkeKJHqL8A==",
-      "dev": true,
-      "requires": {
-        "global-prefix": "^3.0.0"
-      }
-    },
-    "global-prefix": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-3.0.0.tgz",
-      "integrity": "sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==",
-      "dev": true,
-      "requires": {
-        "ini": "^1.3.5",
-        "kind-of": "^6.0.2",
-        "which": "^1.3.1"
-      }
-    },
-    "globals": {
-      "version": "11.12.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
-      "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
-      "dev": true
-    },
-    "globby": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz",
-      "integrity": "sha1-9abXDoOV4hyFj7BInWTfAkJNUGw=",
-      "dev": true,
-      "requires": {
-        "array-union": "^1.0.1",
-        "glob": "^7.0.3",
-        "object-assign": "^4.0.1",
-        "pify": "^2.0.0",
-        "pinkie-promise": "^2.0.0"
-      },
-      "dependencies": {
-        "pify": {
-          "version": "2.3.0",
-          "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
-          "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
-          "dev": true
-        }
-      }
-    },
-    "got": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/got/-/got-7.1.0.tgz",
-      "integrity": "sha512-Y5WMo7xKKq1muPsxD+KmrR8DH5auG7fBdDVueZwETwV6VytKyU9OX/ddpq2/1hp1vIPvVb4T81dKQz3BivkNLw==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "decompress-response": "^3.2.0",
-        "duplexer3": "^0.1.4",
-        "get-stream": "^3.0.0",
-        "is-plain-obj": "^1.1.0",
-        "is-retry-allowed": "^1.0.0",
-        "is-stream": "^1.0.0",
-        "isurl": "^1.0.0-alpha5",
-        "lowercase-keys": "^1.0.0",
-        "p-cancelable": "^0.3.0",
-        "p-timeout": "^1.1.1",
-        "safe-buffer": "^5.0.1",
-        "timed-out": "^4.0.0",
-        "url-parse-lax": "^1.0.0",
-        "url-to-options": "^1.0.1"
-      },
-      "dependencies": {
-        "get-stream": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
-          "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=",
-          "dev": true,
-          "optional": true
-        }
-      }
-    },
-    "graceful-fs": {
-      "version": "4.2.4",
-      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.4.tgz",
-      "integrity": "sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw==",
-      "dev": true
-    },
-    "growly": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/growly/-/growly-1.3.0.tgz",
-      "integrity": "sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=",
-      "dev": true
-    },
-    "gzip-size": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-5.1.1.tgz",
-      "integrity": "sha512-FNHi6mmoHvs1mxZAds4PpdCS6QG8B4C1krxJsMutgxl5t3+GlRTzzI3NEkifXx2pVsOvJdOGSmIgDhQ55FwdPA==",
-      "dev": true,
-      "requires": {
-        "duplexer": "^0.1.1",
-        "pify": "^4.0.1"
-      }
-    },
-    "handle-thing": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz",
-      "integrity": "sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg==",
-      "dev": true
-    },
-    "har-schema": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz",
-      "integrity": "sha1-qUwiJOvKwEeCoNkDVSHyRzW37JI=",
-      "dev": true
-    },
-    "har-validator": {
-      "version": "5.1.3",
-      "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.1.3.tgz",
-      "integrity": "sha512-sNvOCzEQNr/qrvJgc3UG/kD4QtlHycrzwS+6mfTrrSq97BvaYcPZZI1ZSqGSPR73Cxn4LKTD4PttRwfU7jWq5g==",
-      "dev": true,
-      "requires": {
-        "ajv": "^6.5.5",
-        "har-schema": "^2.0.0"
-      }
-    },
-    "harmony-reflect": {
-      "version": "1.6.2",
-      "resolved": "https://registry.npmjs.org/harmony-reflect/-/harmony-reflect-1.6.2.tgz",
-      "integrity": "sha512-HIp/n38R9kQjDEziXyDTuW3vvoxxyxjxFzXLrBr18uB47GnSt+G9D29fqrpM5ZkspMcPICud3XsBJQ4Y2URg8g==",
-      "dev": true
-    },
-    "has": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
-      "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
-      "requires": {
-        "function-bind": "^1.1.1"
-      }
-    },
-    "has-ansi": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz",
-      "integrity": "sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=",
-      "dev": true,
-      "requires": {
-        "ansi-regex": "^2.0.0"
-      },
-      "dependencies": {
-        "ansi-regex": {
-          "version": "2.1.1",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
-          "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
-          "dev": true
-        }
-      }
-    },
-    "has-bigints": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.1.tgz",
-      "integrity": "sha512-LSBS2LjbNBTf6287JEbEzvJgftkF5qFkmCo9hDRpAzKhUOlJ+hx8dd4USs00SgsUNwc4617J9ki5YtEClM2ffA=="
-    },
-    "has-flag": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
-      "dev": true
-    },
-    "has-symbol-support-x": {
-      "version": "1.4.2",
-      "resolved": "https://registry.npmjs.org/has-symbol-support-x/-/has-symbol-support-x-1.4.2.tgz",
-      "integrity": "sha512-3ToOva++HaW+eCpgqZrCfN51IPB+7bJNVT6CUATzueB5Heb8o6Nam0V3HG5dlDvZU1Gn5QLcbahiKw/XVk5JJw==",
-      "dev": true,
-      "optional": true
-    },
-    "has-symbols": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.1.tgz",
-      "integrity": "sha512-PLcsoqu++dmEIZB+6totNFKq/7Do+Z0u4oT0zKOJNl3lYK6vGwwu2hjHs+68OEZbTjiUE9bgOABXbP/GvrS0Kg=="
-    },
-    "has-to-string-tag-x": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/has-to-string-tag-x/-/has-to-string-tag-x-1.4.1.tgz",
-      "integrity": "sha512-vdbKfmw+3LoOYVr+mtxHaX5a96+0f3DljYd8JOqvOLsf5mw2Otda2qCDT9qRqLAhrjyQ0h7ual5nOiASpsGNFw==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "has-symbol-support-x": "^1.4.1"
-      }
-    },
-    "has-unicode": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
-      "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=",
-      "dev": true
-    },
-    "has-value": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/has-value/-/has-value-1.0.0.tgz",
-      "integrity": "sha1-GLKB2lhbHFxR3vJMkw7SmgvmsXc=",
-      "dev": true,
-      "requires": {
-        "get-value": "^2.0.6",
-        "has-values": "^1.0.0",
-        "isobject": "^3.0.0"
-      }
-    },
-    "has-values": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/has-values/-/has-values-1.0.0.tgz",
-      "integrity": "sha1-lbC2P+whRmGab+V/51Yo1aOe/k8=",
-      "dev": true,
-      "requires": {
-        "is-number": "^3.0.0",
-        "kind-of": "^4.0.0"
-      },
-      "dependencies": {
-        "is-buffer": {
-          "version": "1.1.6",
-          "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
-          "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
-          "dev": true
-        },
-        "kind-of": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-4.0.0.tgz",
-          "integrity": "sha1-IIE989cSkosgc3hpGkUGb65y3Vc=",
-          "dev": true,
-          "requires": {
-            "is-buffer": "^1.1.5"
-          }
-        }
-      }
-    },
-    "he": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
-      "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
-      "dev": true
-    },
-    "hex-color-regex": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz",
-      "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==",
-      "dev": true
-    },
-    "history": {
-      "version": "4.10.1",
-      "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
-      "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==",
-      "requires": {
-        "@babel/runtime": "^7.1.2",
-        "loose-envify": "^1.2.0",
-        "resolve-pathname": "^3.0.0",
-        "tiny-invariant": "^1.0.2",
-        "tiny-warning": "^1.0.0",
-        "value-equal": "^1.0.1"
-      }
-    },
-    "hoist-non-react-statics": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
-      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
-      "requires": {
-        "react-is": "^16.7.0"
-      }
-    },
-    "hoopy": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
-      "integrity": "sha512-HRcs+2mr52W0K+x8RzcLzuPPmVIKMSv97RGHy0Ea9y/mpcaK+xTrjICA04KAHi4GRzxliNqNJEFYWHghy3rSfQ==",
-      "dev": true
-    },
-    "hosted-git-info": {
-      "version": "2.8.8",
-      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.8.tgz",
-      "integrity": "sha512-f/wzC2QaWBs7t9IYqB4T3sR1xviIViXJRJTWBlx2Gf3g0Xi5vI7Yy4koXQ1c9OYDGHN9sBy1DQ2AB8fqZBWhUg==",
-      "dev": true
-    },
-    "hpack.js": {
-      "version": "2.1.6",
-      "resolved": "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz",
-      "integrity": "sha1-h3dMCUnlE/QuhFdbPEVoH63ioLI=",
-      "dev": true,
-      "requires": {
-        "inherits": "^2.0.1",
-        "obuf": "^1.0.0",
-        "readable-stream": "^2.0.1",
-        "wbuf": "^1.1.0"
-      }
-    },
-    "hsl-regex": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/hsl-regex/-/hsl-regex-1.0.0.tgz",
-      "integrity": "sha1-1JMwx4ntgZ4nakwNJy3/owsY/m4=",
-      "dev": true
-    },
-    "hsla-regex": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/hsla-regex/-/hsla-regex-1.0.0.tgz",
-      "integrity": "sha1-wc56MWjIxmFAM6S194d/OyJfnDg=",
-      "dev": true
-    },
-    "html-encoding-sniffer": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-1.0.2.tgz",
-      "integrity": "sha512-71lZziiDnsuabfdYiUeWdCVyKuqwWi23L8YeIgV9jSSZHCtb6wB1BKWooH7L3tn4/FuZJMVWyNaIDr4RGmaSYw==",
-      "dev": true,
-      "requires": {
-        "whatwg-encoding": "^1.0.1"
-      }
-    },
-    "html-entities": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-2.3.2.tgz",
-      "integrity": "sha512-c3Ab/url5ksaT0WyleslpBEthOzWhrjQbg75y7XUsfSzi3Dgzt0l8w5e7DylRn15MTlMMD58dTfzddNS2kcAjQ==",
-      "dev": true
-    },
-    "html-escaper": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz",
-      "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==",
-      "dev": true
-    },
-    "html-minifier-terser": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz",
-      "integrity": "sha512-ZPr5MNObqnV/T9akshPKbVgyOqLmy+Bxo7juKCfTfnjNniTAMdy4hz21YQqoofMBJD2kdREaqPPdThoR78Tgxg==",
-      "dev": true,
-      "requires": {
-        "camel-case": "^4.1.1",
-        "clean-css": "^4.2.3",
-        "commander": "^4.1.1",
-        "he": "^1.2.0",
-        "param-case": "^3.0.3",
-        "relateurl": "^0.2.7",
-        "terser": "^4.6.3"
-      }
-    },
-    "html-webpack-new-relic-plugin": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/html-webpack-new-relic-plugin/-/html-webpack-new-relic-plugin-4.1.0.tgz",
-      "integrity": "sha512-WLgEo9AXAOq35Cce+53rbbA/VHRUzdeh/E+KP6ltEUfx8E27LMCn3FdRo88kpki429c9UWD1lrevqczSvdZBRg==",
-      "dev": true
-    },
-    "html-webpack-plugin": {
-      "version": "5.3.1",
-      "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.3.1.tgz",
-      "integrity": "sha512-rZsVvPXUYFyME0cuGkyOHfx9hmkFa4pWfxY/mdY38PsBEaVNsRoA+Id+8z6DBDgyv3zaw6XQszdF8HLwfQvcdQ==",
-      "dev": true,
-      "requires": {
-        "@types/html-minifier-terser": "^5.0.0",
-        "html-minifier-terser": "^5.0.1",
-        "lodash": "^4.17.20",
-        "pretty-error": "^2.1.1",
-        "tapable": "^2.0.0"
-      }
-    },
-    "htmlparser2": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-6.1.0.tgz",
-      "integrity": "sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==",
-      "dev": true,
-      "requires": {
-        "domelementtype": "^2.0.1",
-        "domhandler": "^4.0.0",
-        "domutils": "^2.5.2",
-        "entities": "^2.0.0"
-      },
-      "dependencies": {
-        "dom-serializer": {
-          "version": "1.3.2",
-          "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz",
-          "integrity": "sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==",
-          "dev": true,
-          "requires": {
-            "domelementtype": "^2.0.1",
-            "domhandler": "^4.2.0",
-            "entities": "^2.0.0"
-          }
-        },
-        "domelementtype": {
-          "version": "2.2.0",
-          "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz",
-          "integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==",
-          "dev": true
-        },
-        "domutils": {
-          "version": "2.7.0",
-          "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.7.0.tgz",
-          "integrity": "sha512-8eaHa17IwJUPAiB+SoTYBo5mCdeMgdcAoXJ59m6DT1vw+5iLS3gNoqYaRowaBKtGVrOF1Jz4yDTgYKLK2kvfJg==",
-          "dev": true,
-          "requires": {
-            "dom-serializer": "^1.0.1",
-            "domelementtype": "^2.2.0",
-            "domhandler": "^4.2.0"
-          }
-        }
-      }
-    },
-    "http-cache-semantics": {
-      "version": "3.8.1",
-      "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-3.8.1.tgz",
-      "integrity": "sha512-5ai2iksyV8ZXmnZhHH4rWPoxxistEexSi5936zIQ1bnNTW5VnA85B6P/VpXiRM017IgRvb2kKo1a//y+0wSp3w==",
-      "dev": true,
-      "optional": true
-    },
-    "http-deceiver": {
-      "version": "1.2.7",
-      "resolved": "https://registry.npmjs.org/http-deceiver/-/http-deceiver-1.2.7.tgz",
-      "integrity": "sha1-+nFolEq5pRnTN8sL7HKE3D5yPYc=",
-      "dev": true
-    },
-    "http-errors": {
-      "version": "1.7.2",
-      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.2.tgz",
-      "integrity": "sha512-uUQBt3H/cSIVfch6i1EuPNy/YsRSOUBXTVfZ+yR7Zjez3qjBz6i9+i4zjNaoqcoFVI4lQJ5plg63TvGfRSDCRg==",
-      "dev": true,
-      "requires": {
-        "depd": "~1.1.2",
-        "inherits": "2.0.3",
-        "setprototypeof": "1.1.1",
-        "statuses": ">= 1.5.0 < 2",
-        "toidentifier": "1.0.0"
-      },
-      "dependencies": {
-        "inherits": {
-          "version": "2.0.3",
-          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
-          "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
-          "dev": true
-        }
-      }
-    },
-    "http-parser-js": {
-      "version": "0.5.3",
-      "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.3.tgz",
-      "integrity": "sha512-t7hjvef/5HEK7RWTdUzVUhl8zkEu+LlaE0IYzdMuvbSDipxBRpOn4Uhw8ZyECEa808iVT8XCjzo6xmYt4CiLZg==",
-      "dev": true
-    },
-    "http-proxy": {
-      "version": "1.18.1",
-      "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz",
-      "integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==",
-      "dev": true,
-      "requires": {
-        "eventemitter3": "^4.0.0",
-        "follow-redirects": "^1.0.0",
-        "requires-port": "^1.0.0"
-      }
-    },
-    "http-proxy-agent": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-4.0.1.tgz",
-      "integrity": "sha512-k0zdNgqWTGA6aeIRVpvfVob4fL52dTfaehylg0Y4UvSySvOq/Y+BOyPrgpUrA7HylqvU8vIZGsRuXmspskV0Tg==",
-      "dev": true,
-      "requires": {
-        "@tootallnate/once": "1",
-        "agent-base": "6",
-        "debug": "4"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
-          "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
-          "dev": true,
-          "requires": {
-            "ms": "^2.1.1"
-          }
-        },
-        "ms": {
-          "version": "2.1.2",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-          "dev": true
-        }
-      }
-    },
-    "http-proxy-middleware": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-1.3.1.tgz",
-      "integrity": "sha512-13eVVDYS4z79w7f1+NPllJtOQFx/FdUW4btIvVRMaRlUY9VGstAbo5MOhLEuUgZFRHn3x50ufn25zkj/boZnEg==",
-      "dev": true,
-      "requires": {
-        "@types/http-proxy": "^1.17.5",
-        "http-proxy": "^1.18.1",
-        "is-glob": "^4.0.1",
-        "is-plain-obj": "^3.0.0",
-        "micromatch": "^4.0.2"
-      },
-      "dependencies": {
-        "braces": {
-          "version": "3.0.2",
-          "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-          "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-          "dev": true,
-          "requires": {
-            "fill-range": "^7.0.1"
-          }
-        },
-        "fill-range": {
-          "version": "7.0.1",
-          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-          "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-          "dev": true,
-          "requires": {
-            "to-regex-range": "^5.0.1"
-          }
-        },
-        "is-number": {
-          "version": "7.0.0",
-          "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-          "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-          "dev": true
-        },
-        "is-plain-obj": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-3.0.0.tgz",
-          "integrity": "sha512-gwsOE28k+23GP1B6vFl1oVh/WOzmawBrKwo5Ev6wMKzPkaXaCDIQKzLnvsA42DRlbVTWorkgTKIviAKCWkfUwA==",
-          "dev": true
-        },
-        "micromatch": {
-          "version": "4.0.4",
-          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz",
-          "integrity": "sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==",
-          "dev": true,
-          "requires": {
-            "braces": "^3.0.1",
-            "picomatch": "^2.2.3"
-          }
-        },
-        "to-regex-range": {
-          "version": "5.0.1",
-          "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-          "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-          "dev": true,
-          "requires": {
-            "is-number": "^7.0.0"
-          }
-        }
-      }
-    },
-    "http-signature": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.2.0.tgz",
-      "integrity": "sha1-muzZJRFHcvPZW2WmCruPfBj7rOE=",
-      "dev": true,
-      "requires": {
-        "assert-plus": "^1.0.0",
-        "jsprim": "^1.2.2",
-        "sshpk": "^1.7.0"
-      }
-    },
-    "https-proxy-agent": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-4.0.0.tgz",
-      "integrity": "sha512-zoDhWrkR3of1l9QAL8/scJZyLu8j/gBkcwcaQOZh7Gyh/+uJQzGVETdgT30akuwkpL8HTRfssqI3BZuV18teDg==",
-      "dev": true,
-      "requires": {
-        "agent-base": "5",
-        "debug": "4"
-      },
-      "dependencies": {
-        "agent-base": {
-          "version": "5.1.1",
-          "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-5.1.1.tgz",
-          "integrity": "sha512-TMeqbNl2fMW0nMjTEPOwe3J/PRFP4vqeoNuQMG0HlMrtm5QxKqdvAkZ1pRBQ/ulIyDD5Yq0nJ7YbdD8ey0TO3g==",
-          "dev": true
-        },
-        "debug": {
-          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
-          "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
-          "dev": true,
-          "requires": {
-            "ms": "^2.1.1"
-          }
-        },
-        "ms": {
-          "version": "2.1.2",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-          "dev": true
-        }
-      }
-    },
-    "human-signals": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
-      "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
-      "dev": true
-    },
-    "husky": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/husky/-/husky-3.1.0.tgz",
-      "integrity": "sha512-FJkPoHHB+6s4a+jwPqBudBDvYZsoQW5/HBuMSehC8qDiCe50kpcxeqFoDSlow+9I6wg47YxBoT3WxaURlrDIIQ==",
-      "dev": true,
-      "requires": {
-        "chalk": "^2.4.2",
-        "ci-info": "^2.0.0",
-        "cosmiconfig": "^5.2.1",
-        "execa": "^1.0.0",
-        "get-stdin": "^7.0.0",
-        "opencollective-postinstall": "^2.0.2",
-        "pkg-dir": "^4.2.0",
-        "please-upgrade-node": "^3.2.0",
-        "read-pkg": "^5.2.0",
-        "run-node": "^1.0.0",
-        "slash": "^3.0.0"
-      },
-      "dependencies": {
-        "cosmiconfig": {
-          "version": "5.2.1",
-          "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-5.2.1.tgz",
-          "integrity": "sha512-H65gsXo1SKjf8zmrJ67eJk8aIRKV5ff2D4uKZIBZShbhGSpEmsQOPW/SKMKYhSTrqR7ufy6RP69rPogdaPh/kA==",
-          "dev": true,
-          "requires": {
-            "import-fresh": "^2.0.0",
-            "is-directory": "^0.3.1",
-            "js-yaml": "^3.13.1",
-            "parse-json": "^4.0.0"
-          }
-        },
-        "get-stdin": {
-          "version": "7.0.0",
-          "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-7.0.0.tgz",
-          "integrity": "sha512-zRKcywvrXlXsA0v0i9Io4KDRaAw7+a1ZpjRwl9Wox8PFlVCCHra7E9c4kqXCoCM9nR5tBkaTTZRBoCm60bFqTQ==",
-          "dev": true
-        },
-        "import-fresh": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-2.0.0.tgz",
-          "integrity": "sha1-2BNVwVYS04bGH53dOSLUMEgipUY=",
-          "dev": true,
-          "requires": {
-            "caller-path": "^2.0.0",
-            "resolve-from": "^3.0.0"
-          }
-        },
-        "parse-json": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
-          "integrity": "sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=",
-          "dev": true,
-          "requires": {
-            "error-ex": "^1.3.1",
-            "json-parse-better-errors": "^1.0.1"
-          }
-        },
-        "pkg-dir": {
-          "version": "4.2.0",
-          "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
-          "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
-          "dev": true,
-          "requires": {
-            "find-up": "^4.0.0"
-          }
-        },
-        "read-pkg": {
-          "version": "5.2.0",
-          "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
-          "integrity": "sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==",
-          "dev": true,
-          "requires": {
-            "@types/normalize-package-data": "^2.4.0",
-            "normalize-package-data": "^2.5.0",
-            "parse-json": "^5.0.0",
-            "type-fest": "^0.6.0"
-          },
-          "dependencies": {
-            "parse-json": {
-              "version": "5.0.0",
-              "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.0.0.tgz",
-              "integrity": "sha512-OOY5b7PAEFV0E2Fir1KOkxchnZNCdowAJgQ5NuxjpBKTRP3pQhwkrkxqQjeoKJ+fO7bCpmIZaogI4eZGDMEGOw==",
-              "dev": true,
-              "requires": {
-                "@babel/code-frame": "^7.0.0",
-                "error-ex": "^1.3.1",
-                "json-parse-better-errors": "^1.0.1",
-                "lines-and-columns": "^1.1.6"
-              }
-            }
-          }
-        },
-        "resolve-from": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz",
-          "integrity": "sha1-six699nWiBvItuZTM17rywoYh0g=",
-          "dev": true
-        },
-        "slash": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
-          "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
-          "dev": true
-        },
-        "type-fest": {
-          "version": "0.6.0",
-          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.6.0.tgz",
-          "integrity": "sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==",
-          "dev": true
-        }
-      }
-    },
-    "hyphenate-style-name": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz",
-      "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ=="
-    },
-    "i18n-iso-countries": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/i18n-iso-countries/-/i18n-iso-countries-4.3.1.tgz",
-      "integrity": "sha512-yxeCvmT8yO1p/epv93c1OHnnYNNMOX6NUNpNfuvzSIcDyripS7OGeKXgzYGd5QI31UK+GBrMG0nPFNv0jrHggw==",
-      "requires": {
-        "diacritics": "^1.3.0"
-      }
-    },
-    "iconv-lite": {
-      "version": "0.4.24",
-      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
-      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
-      "dev": true,
-      "requires": {
-        "safer-buffer": ">= 2.1.2 < 3"
-      }
-    },
-    "icss-utils": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
-      "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
-      "dev": true
-    },
-    "identity-obj-proxy": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/identity-obj-proxy/-/identity-obj-proxy-3.0.0.tgz",
-      "integrity": "sha1-lNK9qWCERT7zb7xarsN+D3nx/BQ=",
-      "dev": true,
-      "requires": {
-        "harmony-reflect": "^1.4.6"
-      }
-    },
-    "ieee754": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
-      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
-      "dev": true,
-      "optional": true
-    },
-    "ignore": {
-      "version": "4.0.6",
-      "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
-      "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==",
-      "dev": true
-    },
-    "ignore-walk": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-3.0.3.tgz",
-      "integrity": "sha512-m7o6xuOaT1aqheYHKf8W6J5pYH85ZI9w077erOzLje3JsB1gkafkAhHHY19dqjulgIZHFm32Cp5uNZgcQqdJKw==",
-      "dev": true,
-      "requires": {
-        "minimatch": "^3.0.4"
-      }
-    },
-    "image-webpack-loader": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/image-webpack-loader/-/image-webpack-loader-7.0.1.tgz",
-      "integrity": "sha512-Y6/lRqMGMhZayIx4AONjU1FIljNb9AfiA2SUZ2o65bN4xPcfHmI3MmhrcmphxK/hiwShK/Q7/9/JkPqQMX8HPw==",
-      "dev": true,
-      "requires": {
-        "imagemin": "^7.0.1",
-        "imagemin-gifsicle": "^7.0.0",
-        "imagemin-mozjpeg": "^9.0.0",
-        "imagemin-optipng": "^8.0.0",
-        "imagemin-pngquant": "^9.0.1",
-        "imagemin-svgo": "^8.0.0",
-        "imagemin-webp": "^6.0.0",
-        "loader-utils": "^2.0.0",
-        "object-assign": "^4.1.1",
-        "schema-utils": "^2.7.1"
-      }
-    },
-    "imagemin": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/imagemin/-/imagemin-7.0.1.tgz",
-      "integrity": "sha512-33AmZ+xjZhg2JMCe+vDf6a9mzWukE7l+wAtesjE7KyteqqKjzxv7aVQeWnul1Ve26mWvEQqyPwl0OctNBfSR9w==",
-      "dev": true,
-      "requires": {
-        "file-type": "^12.0.0",
-        "globby": "^10.0.0",
-        "graceful-fs": "^4.2.2",
-        "junk": "^3.1.0",
-        "make-dir": "^3.0.0",
-        "p-pipe": "^3.0.0",
-        "replace-ext": "^1.0.0"
-      },
-      "dependencies": {
-        "array-union": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
-          "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
-          "dev": true
-        },
-        "globby": {
-          "version": "10.0.2",
-          "resolved": "https://registry.npmjs.org/globby/-/globby-10.0.2.tgz",
-          "integrity": "sha512-7dUi7RvCoT/xast/o/dLN53oqND4yk0nsHkhRgn9w65C4PofCLOoJ39iSOg+qVDdWQPIEj+eszMHQ+aLVwwQSg==",
-          "dev": true,
-          "requires": {
-            "@types/glob": "^7.1.1",
-            "array-union": "^2.1.0",
-            "dir-glob": "^3.0.1",
-            "fast-glob": "^3.0.3",
-            "glob": "^7.1.3",
-            "ignore": "^5.1.1",
-            "merge2": "^1.2.3",
-            "slash": "^3.0.0"
-          }
-        },
-        "ignore": {
-          "version": "5.1.8",
-          "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.1.8.tgz",
-          "integrity": "sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw==",
-          "dev": true
-        },
-        "make-dir": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
-          "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
-          "dev": true,
-          "requires": {
-            "semver": "^6.0.0"
-          }
-        },
-        "semver": {
-          "version": "6.3.0",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-          "dev": true
-        },
-        "slash": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
-          "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
-          "dev": true
-        }
-      }
-    },
-    "imagemin-gifsicle": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/imagemin-gifsicle/-/imagemin-gifsicle-7.0.0.tgz",
-      "integrity": "sha512-LaP38xhxAwS3W8PFh4y5iQ6feoTSF+dTAXFRUEYQWYst6Xd+9L/iPk34QGgK/VO/objmIlmq9TStGfVY2IcHIA==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "execa": "^1.0.0",
-        "gifsicle": "^5.0.0",
-        "is-gif": "^3.0.0"
-      }
-    },
-    "imagemin-mozjpeg": {
-      "version": "9.0.0",
-      "resolved": "https://registry.npmjs.org/imagemin-mozjpeg/-/imagemin-mozjpeg-9.0.0.tgz",
-      "integrity": "sha512-TwOjTzYqCFRgROTWpVSt5UTT0JeCuzF1jswPLKALDd89+PmrJ2PdMMYeDLYZ1fs9cTovI9GJd68mRSnuVt691w==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "execa": "^4.0.0",
-        "is-jpg": "^2.0.0",
-        "mozjpeg": "^7.0.0"
-      },
-      "dependencies": {
-        "cross-spawn": {
-          "version": "7.0.3",
-          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-          "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "path-key": "^3.1.0",
-            "shebang-command": "^2.0.0",
-            "which": "^2.0.1"
-          }
-        },
-        "execa": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/execa/-/execa-4.1.0.tgz",
-          "integrity": "sha512-j5W0//W7f8UxAn8hXVnwG8tLwdiUy4FJLcSupCg6maBYZDpyBvTApK7KyuI4bKj8KOh1r2YH+6ucuYtJv1bTZA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "cross-spawn": "^7.0.0",
-            "get-stream": "^5.0.0",
-            "human-signals": "^1.1.1",
-            "is-stream": "^2.0.0",
-            "merge-stream": "^2.0.0",
-            "npm-run-path": "^4.0.0",
-            "onetime": "^5.1.0",
-            "signal-exit": "^3.0.2",
-            "strip-final-newline": "^2.0.0"
-          }
-        },
-        "get-stream": {
-          "version": "5.2.0",
-          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz",
-          "integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "pump": "^3.0.0"
-          }
-        },
-        "human-signals": {
-          "version": "1.1.1",
-          "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-1.1.1.tgz",
-          "integrity": "sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==",
-          "dev": true,
-          "optional": true
-        },
-        "is-stream": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.0.tgz",
-          "integrity": "sha512-XCoy+WlUr7d1+Z8GgSuXmpuUFC9fOhRXglJMx+dwLKTkL44Cjd4W1Z5P+BQZpr+cR93aGP4S/s7Ftw6Nd/kiEw==",
-          "dev": true,
-          "optional": true
-        },
-        "npm-run-path": {
-          "version": "4.0.1",
-          "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
-          "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "path-key": "^3.0.0"
-          }
-        },
-        "path-key": {
-          "version": "3.1.1",
-          "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-          "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-          "dev": true,
-          "optional": true
-        },
-        "shebang-command": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-          "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "shebang-regex": "^3.0.0"
-          }
-        },
-        "shebang-regex": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-          "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-          "dev": true,
-          "optional": true
-        },
-        "which": {
-          "version": "2.0.2",
-          "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-          "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "isexe": "^2.0.0"
-          }
-        }
-      }
-    },
-    "imagemin-optipng": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/imagemin-optipng/-/imagemin-optipng-8.0.0.tgz",
-      "integrity": "sha512-CUGfhfwqlPjAC0rm8Fy+R2DJDBGjzy2SkfyT09L8rasnF9jSoHFqJ1xxSZWK6HVPZBMhGPMxCTL70OgTHlLF5A==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "exec-buffer": "^3.0.0",
-        "is-png": "^2.0.0",
-        "optipng-bin": "^7.0.0"
-      }
-    },
-    "imagemin-pngquant": {
-      "version": "9.0.2",
-      "resolved": "https://registry.npmjs.org/imagemin-pngquant/-/imagemin-pngquant-9.0.2.tgz",
-      "integrity": "sha512-cj//bKo8+Frd/DM8l6Pg9pws1pnDUjgb7ae++sUX1kUVdv2nrngPykhiUOgFeE0LGY/LmUbCf4egCHC4YUcZSg==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "execa": "^4.0.0",
-        "is-png": "^2.0.0",
-        "is-stream": "^2.0.0",
-        "ow": "^0.17.0",
-        "pngquant-bin": "^6.0.0"
-      },
-      "dependencies": {
-        "cross-spawn": {
-          "version": "7.0.3",
-          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-          "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "path-key": "^3.1.0",
-            "shebang-command": "^2.0.0",
-            "which": "^2.0.1"
-          }
-        },
-        "execa": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/execa/-/execa-4.1.0.tgz",
-          "integrity": "sha512-j5W0//W7f8UxAn8hXVnwG8tLwdiUy4FJLcSupCg6maBYZDpyBvTApK7KyuI4bKj8KOh1r2YH+6ucuYtJv1bTZA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "cross-spawn": "^7.0.0",
-            "get-stream": "^5.0.0",
-            "human-signals": "^1.1.1",
-            "is-stream": "^2.0.0",
-            "merge-stream": "^2.0.0",
-            "npm-run-path": "^4.0.0",
-            "onetime": "^5.1.0",
-            "signal-exit": "^3.0.2",
-            "strip-final-newline": "^2.0.0"
-          }
-        },
-        "get-stream": {
-          "version": "5.2.0",
-          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz",
-          "integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "pump": "^3.0.0"
-          }
-        },
-        "human-signals": {
-          "version": "1.1.1",
-          "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-1.1.1.tgz",
-          "integrity": "sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==",
-          "dev": true,
-          "optional": true
-        },
-        "is-stream": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.0.tgz",
-          "integrity": "sha512-XCoy+WlUr7d1+Z8GgSuXmpuUFC9fOhRXglJMx+dwLKTkL44Cjd4W1Z5P+BQZpr+cR93aGP4S/s7Ftw6Nd/kiEw==",
-          "dev": true,
-          "optional": true
-        },
-        "npm-run-path": {
-          "version": "4.0.1",
-          "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
-          "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "path-key": "^3.0.0"
-          }
-        },
-        "path-key": {
-          "version": "3.1.1",
-          "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-          "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-          "dev": true,
-          "optional": true
-        },
-        "shebang-command": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-          "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "shebang-regex": "^3.0.0"
-          }
-        },
-        "shebang-regex": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-          "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-          "dev": true,
-          "optional": true
-        },
-        "which": {
-          "version": "2.0.2",
-          "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-          "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "isexe": "^2.0.0"
-          }
-        }
-      }
-    },
-    "imagemin-svgo": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/imagemin-svgo/-/imagemin-svgo-8.0.0.tgz",
-      "integrity": "sha512-++fDnnxsLT+4rpt8babwiIbzapgBzeS2Kgcy+CwgBvgSRFltBFhX2WnpCziMtxhRCzqJcCE9EcHWZP/sj+G3rQ==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "is-svg": "^4.2.1",
-        "svgo": "^1.3.2"
-      }
-    },
-    "imagemin-webp": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/imagemin-webp/-/imagemin-webp-6.0.0.tgz",
-      "integrity": "sha512-DmVCkI8H1csyqAExsk93LzC88gj2uKXaLLW5Ly+WYsvNx7xv5cJAlozXWIx9Z0kEQr9w98gphi5aP2b++iDH8g==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "cwebp-bin": "^5.0.0",
-        "exec-buffer": "^3.0.0",
-        "is-cwebp-readable": "^3.0.0"
-      }
-    },
-    "immediate": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
-      "integrity": "sha1-nbHb0Pr43m++D13V5Wu2BigN5ps="
-    },
-    "immer": {
-      "version": "8.0.1",
-      "resolved": "https://registry.npmjs.org/immer/-/immer-8.0.1.tgz",
-      "integrity": "sha512-aqXhGP7//Gui2+UrEtvxZxSquQVXTpZ7KDxfCcKAF3Vysvw0CViVaW9RZ1j1xlIYqaaaipBoqdqeibkc18PNvA==",
-      "dev": true
-    },
-    "import-fresh": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
-      "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
-      "dev": true,
-      "requires": {
-        "parent-module": "^1.0.0",
-        "resolve-from": "^4.0.0"
-      }
-    },
-    "import-lazy": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/import-lazy/-/import-lazy-3.1.0.tgz",
-      "integrity": "sha512-8/gvXvX2JMn0F+CDlSC4l6kOmVaLOO3XLkksI7CI3Ud95KDYJuYur2b9P/PUt/i/pDAMd/DulQsNbbbmRRsDIQ==",
-      "dev": true,
-      "optional": true
-    },
-    "import-local": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/import-local/-/import-local-3.0.2.tgz",
-      "integrity": "sha512-vjL3+w0oulAVZ0hBHnxa/Nm5TAurf9YLQJDhqRZyqb+VKGOB6LU8t9H1Nr5CIo16vh9XfJTOoHwU0B71S557gA==",
-      "dev": true,
-      "requires": {
-        "pkg-dir": "^4.2.0",
-        "resolve-cwd": "^3.0.0"
-      },
-      "dependencies": {
-        "pkg-dir": {
-          "version": "4.2.0",
-          "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
-          "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
-          "dev": true,
-          "requires": {
-            "find-up": "^4.0.0"
-          }
-        }
-      }
-    },
-    "imurmurhash": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
-      "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o=",
-      "dev": true
-    },
-    "indent-string": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-2.1.0.tgz",
-      "integrity": "sha1-ji1INIdCEhtKghi3oTfppSBJ3IA=",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "repeating": "^2.0.0"
-      }
-    },
-    "inflight": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
-      "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
-      "requires": {
-        "once": "^1.3.0",
-        "wrappy": "1"
-      }
-    },
-    "inherits": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
-    },
-    "ini": {
-      "version": "1.3.8",
-      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
-      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
-      "dev": true
-    },
-    "inquirer": {
-      "version": "7.3.3",
-      "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-7.3.3.tgz",
-      "integrity": "sha512-JG3eIAj5V9CwcGvuOmoo6LB9kbAYT8HXffUl6memuszlwDC/qvFAJw49XJ5NROSFNPxp3iQg1GqkFhaY/CR0IA==",
-      "dev": true,
-      "requires": {
-        "ansi-escapes": "^4.2.1",
-        "chalk": "^4.1.0",
-        "cli-cursor": "^3.1.0",
-        "cli-width": "^3.0.0",
-        "external-editor": "^3.0.3",
-        "figures": "^3.0.0",
-        "lodash": "^4.17.19",
-        "mute-stream": "0.0.8",
-        "run-async": "^2.4.0",
-        "rxjs": "^6.6.0",
-        "string-width": "^4.1.0",
-        "strip-ansi": "^6.0.0",
-        "through": "^2.3.6"
-      },
-      "dependencies": {
-        "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,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
-          "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "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,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "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
-        },
-        "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
-        },
-        "strip-ansi": {
-          "version": "6.0.0",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
-          "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
-          "dev": true,
-          "requires": {
-            "ansi-regex": "^5.0.0"
-          }
-        },
-        "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,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
-    "internal-ip": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/internal-ip/-/internal-ip-6.2.0.tgz",
-      "integrity": "sha512-D8WGsR6yDt8uq7vDMu7mjcR+yRMm3dW8yufyChmszWRjcSHuxLBkR3GdS2HZAjodsaGuCvXeEJpueisXJULghg==",
-      "dev": true,
-      "requires": {
-        "default-gateway": "^6.0.0",
-        "ipaddr.js": "^1.9.1",
-        "is-ip": "^3.1.0",
-        "p-event": "^4.2.0"
-      },
-      "dependencies": {
-        "p-event": {
-          "version": "4.2.0",
-          "resolved": "https://registry.npmjs.org/p-event/-/p-event-4.2.0.tgz",
-          "integrity": "sha512-KXatOjCRXXkSePPb1Nbi0p0m+gQAwdlbhi4wQKJPI1HsMQS9g+Sqp2o+QHziPr7eYJyOZet836KoHEVM1mwOrQ==",
-          "dev": true,
-          "requires": {
-            "p-timeout": "^3.1.0"
-          }
-        },
-        "p-timeout": {
-          "version": "3.2.0",
-          "resolved": "https://registry.npmjs.org/p-timeout/-/p-timeout-3.2.0.tgz",
-          "integrity": "sha512-rhIwUycgwwKcP9yTOOFK/AKsAopjjCakVqLHePO3CC6Mir1Z99xT+R63jZxAT5lFZLa2inS5h+ZS2GvR99/FBg==",
-          "dev": true,
-          "requires": {
-            "p-finally": "^1.0.0"
-          }
-        }
-      }
-    },
-    "internal-slot": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.3.tgz",
-      "integrity": "sha512-O0DB1JC/sPyZl7cIo78n5dR7eUSwwpYPiXRhTzNxZVAMUuB8vlnRFyLxdrVToks6XPLVnFfbzaVd5WLjhgg+vA==",
-      "dev": true,
-      "requires": {
-        "get-intrinsic": "^1.1.0",
-        "has": "^1.0.3",
-        "side-channel": "^1.0.4"
-      }
-    },
-    "interpret": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/interpret/-/interpret-2.2.0.tgz",
-      "integrity": "sha512-Ju0Bz/cEia55xDwUWEa8+olFpCiQoypjnQySseKtmjNrnps3P+xfpUmGr90T7yjlVJmOtybRvPXhKMbHr+fWnw==",
-      "dev": true
-    },
-    "intl-format-cache": {
-      "version": "2.2.9",
-      "resolved": "https://registry.npmjs.org/intl-format-cache/-/intl-format-cache-2.2.9.tgz",
-      "integrity": "sha512-Zv/u8wRpekckv0cLkwpVdABYST4hZNTDaX7reFetrYTJwxExR2VyTqQm+l0WmL0Qo8Mjb9Tf33qnfj0T7pjxdQ=="
-    },
-    "intl-messageformat": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-2.2.0.tgz",
-      "integrity": "sha1-NFvNRt5jC3aDMwwuUhd/9eq0hPw=",
-      "requires": {
-        "intl-messageformat-parser": "1.4.0"
-      }
-    },
-    "intl-messageformat-parser": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/intl-messageformat-parser/-/intl-messageformat-parser-1.4.0.tgz",
-      "integrity": "sha1-tD1FqXRoytvkQzHXS7Ho3qRPwHU="
-    },
-    "intl-relativeformat": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/intl-relativeformat/-/intl-relativeformat-2.2.0.tgz",
-      "integrity": "sha512-4bV/7kSKaPEmu6ArxXf9xjv1ny74Zkwuey8Pm01NH4zggPP7JHwg2STk8Y3JdspCKRDriwIyLRfEXnj2ZLr4Bw==",
-      "requires": {
-        "intl-messageformat": "^2.0.0"
-      }
-    },
-    "into-stream": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/into-stream/-/into-stream-3.1.0.tgz",
-      "integrity": "sha1-lvsKk2wSur1v8XUqF9BWFqvQlMY=",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "from2": "^2.1.1",
-        "p-is-promise": "^1.1.0"
-      }
-    },
-    "invariant": {
-      "version": "2.2.4",
-      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
-      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
-      "requires": {
-        "loose-envify": "^1.0.0"
-      }
-    },
-    "ip": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.5.tgz",
-      "integrity": "sha1-vd7XARQpCCjAoDnnLvJfWq7ENUo=",
-      "dev": true
-    },
-    "ip-regex": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ip-regex/-/ip-regex-4.3.0.tgz",
-      "integrity": "sha512-B9ZWJxHHOHUhUjCPrMpLD4xEq35bUTClHM1S6CBU5ixQnkZmwipwgc96vAd7AAGM9TGHvJR+Uss+/Ak6UphK+Q==",
-      "dev": true
-    },
-    "ipaddr.js": {
-      "version": "1.9.1",
-      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
-      "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
-      "dev": true
-    },
-    "is-absolute-url": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/is-absolute-url/-/is-absolute-url-3.0.3.tgz",
-      "integrity": "sha512-opmNIX7uFnS96NtPmhWQgQx6/NYFgsUXYMllcfzwWKUMwfo8kku1TvE6hkNcH+Q1ts5cMVrsY7j0bxXQDciu9Q==",
-      "dev": true
-    },
-    "is-accessor-descriptor": {
-      "version": "0.1.6",
-      "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz",
-      "integrity": "sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=",
-      "dev": true,
-      "requires": {
-        "kind-of": "^3.0.2"
-      },
-      "dependencies": {
-        "is-buffer": {
-          "version": "1.1.6",
-          "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
-          "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
-          "dev": true
-        },
-        "kind-of": {
-          "version": "3.2.2",
-          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-          "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
-          "dev": true,
-          "requires": {
-            "is-buffer": "^1.1.5"
-          }
-        }
-      }
-    },
-    "is-arguments": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.0.tgz",
-      "integrity": "sha512-1Ij4lOMPl/xB5kBDn7I+b2ttPMKa8szhEIrXDuXQD/oe3HJLTLhqhgGspwgyGd6MOywBUqVvYicF72lkgDnIHg==",
-      "dev": true,
-      "requires": {
-        "call-bind": "^1.0.0"
-      }
-    },
-    "is-arrayish": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
-      "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=",
-      "dev": true
-    },
-    "is-bigint": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.2.tgz",
-      "integrity": "sha512-0JV5+SOCQkIdzjBK9buARcV804Ddu7A0Qet6sHi3FimE9ne6m4BGQZfRn+NZiXbBk4F4XmHfDZIipLj9pX8dSA=="
-    },
-    "is-binary-path": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-1.0.1.tgz",
-      "integrity": "sha1-dfFmQrSA8YenEcgUFh/TpKdlWJg=",
-      "dev": true,
-      "requires": {
-        "binary-extensions": "^1.0.0"
-      }
-    },
-    "is-boolean-object": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.1.tgz",
-      "integrity": "sha512-bXdQWkECBUIAcCkeH1unwJLIpZYaa5VvuygSyS/c2lf719mTKZDU5UdDRlpd01UjADgmW8RfqaP+mRaVPdr/Ng==",
-      "requires": {
-        "call-bind": "^1.0.2"
-      }
-    },
-    "is-buffer": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.5.tgz",
-      "integrity": "sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==",
-      "dev": true
-    },
-    "is-callable": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.0.tgz",
-      "integrity": "sha512-pyVD9AaGLxtg6srb2Ng6ynWJqkHU9bEM087AKck0w8QwDarTfNcpIYoU8x8Hv2Icm8u6kFJM18Dag8lyqGkviw=="
-    },
-    "is-ci": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/is-ci/-/is-ci-2.0.0.tgz",
-      "integrity": "sha512-YfJT7rkpQB0updsdHLGWrvhBJfcfzNNawYDNIyQXJz0IViGf75O8EBPKSdvw2rF+LGCsX4FZ8tcr3b19LcZq4w==",
-      "dev": true,
-      "requires": {
-        "ci-info": "^2.0.0"
-      }
-    },
-    "is-color-stop": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/is-color-stop/-/is-color-stop-1.1.0.tgz",
-      "integrity": "sha1-z/9HGu5N1cnhWFmPvhKWe1za00U=",
-      "dev": true,
-      "requires": {
-        "css-color-names": "^0.0.4",
-        "hex-color-regex": "^1.1.0",
-        "hsl-regex": "^1.0.0",
-        "hsla-regex": "^1.0.0",
-        "rgb-regex": "^1.0.1",
-        "rgba-regex": "^1.0.0"
-      },
-      "dependencies": {
-        "css-color-names": {
-          "version": "0.0.4",
-          "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
-          "integrity": "sha1-gIrcLnnPhHOAabZGyyDsJ762KeA=",
-          "dev": true
-        }
-      }
-    },
-    "is-core-module": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.4.0.tgz",
-      "integrity": "sha512-6A2fkfq1rfeQZjxrZJGerpLCTHRNEBiSgnu0+obeJpEPZRUooHgsizvzv0ZjJwOz3iWIHdJtVWJ/tmPr3D21/A==",
-      "dev": true,
-      "requires": {
-        "has": "^1.0.3"
-      }
-    },
-    "is-cwebp-readable": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/is-cwebp-readable/-/is-cwebp-readable-3.0.0.tgz",
-      "integrity": "sha512-bpELc7/Q1/U5MWHn4NdHI44R3jxk0h9ew9ljzabiRl70/UIjL/ZAqRMb52F5+eke/VC8yTiv4Ewryo1fPWidvA==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "file-type": "^10.5.0"
-      },
-      "dependencies": {
-        "file-type": {
-          "version": "10.11.0",
-          "resolved": "https://registry.npmjs.org/file-type/-/file-type-10.11.0.tgz",
-          "integrity": "sha512-uzk64HRpUZyTGZtVuvrjP0FYxzQrBf4rojot6J65YMEbwBLB0CWm0CLojVpwpmFmxcE/lkvYICgfcGozbBq6rw==",
-          "dev": true,
-          "optional": true
-        }
-      }
-    },
-    "is-data-descriptor": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz",
-      "integrity": "sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=",
-      "dev": true,
-      "requires": {
-        "kind-of": "^3.0.2"
-      },
-      "dependencies": {
-        "is-buffer": {
-          "version": "1.1.6",
-          "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
-          "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
-          "dev": true
-        },
-        "kind-of": {
-          "version": "3.2.2",
-          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-          "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
-          "dev": true,
-          "requires": {
-            "is-buffer": "^1.1.5"
-          }
-        }
-      }
-    },
-    "is-date-object": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.2.tgz",
-      "integrity": "sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g=="
-    },
-    "is-descriptor": {
-      "version": "0.1.6",
-      "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-0.1.6.tgz",
-      "integrity": "sha512-avDYr0SB3DwO9zsMov0gKCESFYqCnE4hq/4z3TdUlukEy5t9C0YRq7HLrsN52NAcqXKaepeCD0n+B0arnVG3Hg==",
-      "dev": true,
-      "requires": {
-        "is-accessor-descriptor": "^0.1.6",
-        "is-data-descriptor": "^0.1.4",
-        "kind-of": "^5.0.0"
-      },
-      "dependencies": {
-        "kind-of": {
-          "version": "5.1.0",
-          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-5.1.0.tgz",
-          "integrity": "sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw==",
-          "dev": true
-        }
-      }
-    },
-    "is-directory": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/is-directory/-/is-directory-0.3.1.tgz",
-      "integrity": "sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE=",
-      "dev": true
-    },
-    "is-docker": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
-      "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
-      "dev": true
-    },
-    "is-extendable": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
-      "integrity": "sha1-YrEQ4omkcUGOPsNqYX1HLjAd/Ik=",
-      "dev": true
-    },
-    "is-extglob": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
-      "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=",
-      "dev": true
-    },
-    "is-finite": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/is-finite/-/is-finite-1.1.0.tgz",
-      "integrity": "sha512-cdyMtqX/BOqqNBBiKlIVkytNHm49MtMlYyn1zxzvJKWmFMlGzm+ry5BBfYyeY9YmNKbRSo/o7OX9w9ale0wg3w==",
-      "dev": true,
-      "optional": true
-    },
-    "is-fullwidth-code-point": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
-      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-      "dev": true
-    },
-    "is-generator-fn": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-generator-fn/-/is-generator-fn-2.1.0.tgz",
-      "integrity": "sha512-cTIB4yPYL/Grw0EaSzASzg6bBy9gqCofvWN8okThAYIxKJZC+udlRAmGbM0XLeniEJSs8uEgHPGuHSe1XsOLSQ==",
-      "dev": true
-    },
-    "is-gif": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/is-gif/-/is-gif-3.0.0.tgz",
-      "integrity": "sha512-IqJ/jlbw5WJSNfwQ/lHEDXF8rxhRgF6ythk2oiEvhpG29F704eX9NO6TvPfMiq9DrbwgcEDnETYNcZDPewQoVw==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "file-type": "^10.4.0"
-      },
-      "dependencies": {
-        "file-type": {
-          "version": "10.11.0",
-          "resolved": "https://registry.npmjs.org/file-type/-/file-type-10.11.0.tgz",
-          "integrity": "sha512-uzk64HRpUZyTGZtVuvrjP0FYxzQrBf4rojot6J65YMEbwBLB0CWm0CLojVpwpmFmxcE/lkvYICgfcGozbBq6rw==",
-          "dev": true,
-          "optional": true
-        }
-      }
-    },
-    "is-glob": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz",
-      "integrity": "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==",
-      "dev": true,
-      "requires": {
-        "is-extglob": "^2.1.1"
-      }
-    },
-    "is-invalid-path": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/is-invalid-path/-/is-invalid-path-0.1.0.tgz",
-      "integrity": "sha1-MHqFWzzxqTi0TqcNLGEQYFNxTzQ=",
-      "dev": true,
-      "requires": {
-        "is-glob": "^2.0.0"
-      },
-      "dependencies": {
-        "is-extglob": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-1.0.0.tgz",
-          "integrity": "sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA=",
-          "dev": true
-        },
-        "is-glob": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-2.0.1.tgz",
-          "integrity": "sha1-0Jb5JqPe1WAPP9/ZEZjLCIjC2GM=",
-          "dev": true,
-          "requires": {
-            "is-extglob": "^1.0.0"
-          }
-        }
-      }
-    },
-    "is-ip": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/is-ip/-/is-ip-3.1.0.tgz",
-      "integrity": "sha512-35vd5necO7IitFPjd/YBeqwWnyDWbuLH9ZXQdMfDA8TEo7pv5X8yfrvVO3xbJbLUlERCMvf6X0hTUamQxCYJ9Q==",
-      "dev": true,
-      "requires": {
-        "ip-regex": "^4.0.0"
-      }
-    },
-    "is-jpg": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/is-jpg/-/is-jpg-2.0.0.tgz",
-      "integrity": "sha1-LhmX+m6RZuqsAkLarkQ0A+TvHZc=",
-      "dev": true,
-      "optional": true
-    },
-    "is-natural-number": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/is-natural-number/-/is-natural-number-4.0.1.tgz",
-      "integrity": "sha1-q5124dtM7VHjXeDHLr7PCfc0zeg=",
-      "dev": true,
-      "optional": true
-    },
-    "is-negative-zero": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.1.tgz",
-      "integrity": "sha512-2z6JzQvZRa9A2Y7xC6dQQm4FSTSTNWjKIYYTt4246eMTJmIo0Q+ZyOsU66X8lxK1AbB92dFeglPLrhwpeRKO6w=="
-    },
-    "is-number": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
-      "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=",
-      "dev": true,
-      "requires": {
-        "kind-of": "^3.0.2"
-      },
-      "dependencies": {
-        "is-buffer": {
-          "version": "1.1.6",
-          "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
-          "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
-          "dev": true
-        },
-        "kind-of": {
-          "version": "3.2.2",
-          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-          "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
-          "dev": true,
-          "requires": {
-            "is-buffer": "^1.1.5"
-          }
-        }
-      }
-    },
-    "is-number-object": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.0.5.tgz",
-      "integrity": "sha512-RU0lI/n95pMoUKu9v1BZP5MBcZuNSVJkMkAG2dJqC4z2GlkGUNeH68SuHuBKBD/XFe+LHZ+f9BKkLET60Niedw=="
-    },
-    "is-object": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/is-object/-/is-object-1.0.2.tgz",
-      "integrity": "sha512-2rRIahhZr2UWb45fIOuvZGpFtz0TyOZLf32KxBbSoUCeZR495zCKlWUKKUByk3geS2eAs7ZAABt0Y/Rx0GiQGA==",
-      "dev": true,
-      "optional": true
-    },
-    "is-path-cwd": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/is-path-cwd/-/is-path-cwd-2.2.0.tgz",
-      "integrity": "sha512-w942bTcih8fdJPJmQHFzkS76NEP8Kzzvmw92cXsazb8intwLqPibPPdXf4ANdKV3rYMuuQYGIWtvz9JilB3NFQ==",
-      "dev": true
-    },
-    "is-path-in-cwd": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-path-in-cwd/-/is-path-in-cwd-2.1.0.tgz",
-      "integrity": "sha512-rNocXHgipO+rvnP6dk3zI20RpOtrAM/kzbB258Uw5BWr3TpXi861yzjo16Dn4hUox07iw5AyeMLHWsujkjzvRQ==",
-      "dev": true,
-      "requires": {
-        "is-path-inside": "^2.1.0"
-      }
-    },
-    "is-path-inside": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-2.1.0.tgz",
-      "integrity": "sha512-wiyhTzfDWsvwAW53OBWF5zuvaOGlZ6PwYxAbPVDhpm+gM09xKQGjBq/8uYN12aDvMxnAnq3dxTyoSoRNmg5YFg==",
-      "dev": true,
-      "requires": {
-        "path-is-inside": "^1.0.2"
-      }
-    },
-    "is-plain-obj": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz",
-      "integrity": "sha1-caUMhCnfync8kqOQpKA7OfzVHT4=",
-      "dev": true,
-      "optional": true
-    },
-    "is-plain-object": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
-      "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
-      "dev": true,
-      "requires": {
-        "isobject": "^3.0.1"
-      }
-    },
-    "is-png": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/is-png/-/is-png-2.0.0.tgz",
-      "integrity": "sha512-4KPGizaVGj2LK7xwJIz8o5B2ubu1D/vcQsgOGFEDlpcvgZHto4gBnyd0ig7Ws+67ixmwKoNmu0hYnpo6AaKb5g==",
-      "dev": true,
-      "optional": true
-    },
-    "is-potential-custom-element-name": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
-      "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==",
-      "dev": true
-    },
-    "is-regex": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.0.tgz",
-      "integrity": "sha512-iI97M8KTWID2la5uYXlkbSDQIg4F6o1sYboZKKTDpnDQMLtUL86zxhgDet3Q2SriaYsyGqZ6Mn2SjbRKeLHdqw==",
-      "requires": {
-        "has-symbols": "^1.0.1"
-      }
-    },
-    "is-resolvable": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/is-resolvable/-/is-resolvable-1.1.0.tgz",
-      "integrity": "sha512-qgDYXFSR5WvEfuS5dMj6oTMEbrrSaM0CrFk2Yiq/gXnBvD9pMa2jGXxyhGLfvhZpuMZe18CJpFxAt3CRs42NMg==",
-      "dev": true
-    },
-    "is-retry-allowed": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/is-retry-allowed/-/is-retry-allowed-1.2.0.tgz",
-      "integrity": "sha512-RUbUeKwvm3XG2VYamhJL1xFktgjvPzL0Hq8C+6yrWIswDy3BIXGqCxhxkc30N9jqK311gVU137K8Ei55/zVJRg==",
-      "dev": true,
-      "optional": true
-    },
-    "is-root": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-root/-/is-root-2.1.0.tgz",
-      "integrity": "sha512-AGOriNp96vNBd3HtU+RzFEc75FfR5ymiYv8E553I71SCeXBiMsVDUtdio1OEFvrPyLIQ9tVR5RxXIFe5PUFjMg==",
-      "dev": true
-    },
-    "is-stream": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
-      "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ=",
-      "dev": true
-    },
-    "is-string": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.6.tgz",
-      "integrity": "sha512-2gdzbKUuqtQ3lYNrUTQYoClPhm7oQu4UdpSZMp1/DGgkHBT8E2Z1l0yMdb6D4zNAxwDiMv8MdulKROJGNl0Q0w=="
-    },
-    "is-svg": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/is-svg/-/is-svg-4.3.1.tgz",
-      "integrity": "sha512-h2CGs+yPUyvkgTJQS9cJzo9lYK06WgRiXUqBBHtglSzVKAuH4/oWsqk7LGfbSa1hGk9QcZ0SyQtVggvBA8LZXA==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "fast-xml-parser": "^3.19.0"
-      }
-    },
-    "is-symbol": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.3.tgz",
-      "integrity": "sha512-OwijhaRSgqvhm/0ZdAcXNZt9lYdKFpcRDT5ULUuYXPoT794UNOdU+gpT6Rzo7b4V2HUl/op6GqY894AZwv9faQ==",
-      "requires": {
-        "has-symbols": "^1.0.1"
-      }
-    },
-    "is-typedarray": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
-      "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=",
-      "dev": true
-    },
-    "is-utf8": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/is-utf8/-/is-utf8-0.2.1.tgz",
-      "integrity": "sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=",
-      "dev": true,
-      "optional": true
-    },
-    "is-valid-path": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/is-valid-path/-/is-valid-path-0.1.1.tgz",
-      "integrity": "sha1-EQ+f90w39mPh7HkV60UfLbk6yd8=",
-      "dev": true,
-      "requires": {
-        "is-invalid-path": "^0.1.0"
-      }
-    },
-    "is-windows": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz",
-      "integrity": "sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==",
-      "dev": true
-    },
-    "is-wsl": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
-      "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
-      "dev": true,
-      "requires": {
-        "is-docker": "^2.0.0"
-      }
-    },
-    "isarray": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-      "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
-    },
-    "isexe": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
-      "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=",
-      "dev": true
-    },
-    "isobject": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
-      "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=",
-      "dev": true
-    },
-    "isstream": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
-      "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=",
-      "dev": true
-    },
-    "istanbul-lib-coverage": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.0.0.tgz",
-      "integrity": "sha512-UiUIqxMgRDET6eR+o5HbfRYP1l0hqkWOs7vNxC/mggutCMUIhWMm8gAHb8tHlyfD3/l6rlgNA5cKdDzEAf6hEg==",
-      "dev": true
-    },
-    "istanbul-lib-instrument": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/istanbul-lib-instrument/-/istanbul-lib-instrument-4.0.3.tgz",
-      "integrity": "sha512-BXgQl9kf4WTCPCCpmFGoJkz/+uhvm7h7PFKUYxh7qarQd3ER33vHG//qaE8eN25l07YqZPpHXU9I09l/RD5aGQ==",
-      "dev": true,
-      "requires": {
-        "@babel/core": "^7.7.5",
-        "@istanbuljs/schema": "^0.1.2",
-        "istanbul-lib-coverage": "^3.0.0",
-        "semver": "^6.3.0"
-      },
-      "dependencies": {
-        "semver": {
-          "version": "6.3.0",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-          "dev": true
-        }
-      }
-    },
-    "istanbul-lib-report": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz",
-      "integrity": "sha512-wcdi+uAKzfiGT2abPpKZ0hSU1rGQjUQnLvtY5MpQ7QCTahD3VODhcu4wcfY1YtkGaDD5yuydOLINXsfbus9ROw==",
-      "dev": true,
-      "requires": {
-        "istanbul-lib-coverage": "^3.0.0",
-        "make-dir": "^3.0.0",
-        "supports-color": "^7.1.0"
-      },
-      "dependencies": {
-        "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
-        },
-        "make-dir": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
-          "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
-          "dev": true,
-          "requires": {
-            "semver": "^6.0.0"
-          }
-        },
-        "semver": {
-          "version": "6.3.0",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-          "dev": true
-        },
-        "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,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
-    "istanbul-lib-source-maps": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/istanbul-lib-source-maps/-/istanbul-lib-source-maps-4.0.0.tgz",
-      "integrity": "sha512-c16LpFRkR8vQXyHZ5nLpY35JZtzj1PQY1iZmesUbf1FZHbIupcWfjgOXBY9YHkLEQ6puz1u4Dgj6qmU/DisrZg==",
-      "dev": true,
-      "requires": {
-        "debug": "^4.1.1",
-        "istanbul-lib-coverage": "^3.0.0",
-        "source-map": "^0.6.1"
-      }
-    },
-    "istanbul-reports": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-3.0.2.tgz",
-      "integrity": "sha512-9tZvz7AiR3PEDNGiV9vIouQ/EAcqMXFmkcA1CDFTwOB98OZVDL0PH9glHotf5Ugp6GCOTypfzGWI/OqjWNCRUw==",
-      "dev": true,
-      "requires": {
-        "html-escaper": "^2.0.0",
-        "istanbul-lib-report": "^3.0.0"
-      }
-    },
-    "isurl": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/isurl/-/isurl-1.0.0.tgz",
-      "integrity": "sha512-1P/yWsxPlDtn7QeRD+ULKQPaIaN6yF368GZ2vDfv0AL0NwpStafjWCDDdn0k8wgFMWpVAqG7oJhxHnlud42i9w==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "has-to-string-tag-x": "^1.2.0",
-        "is-object": "^1.0.1"
-      }
-    },
-    "jest": {
-      "version": "24.9.0",
-      "resolved": "https://registry.npmjs.org/jest/-/jest-24.9.0.tgz",
-      "integrity": "sha512-YvkBL1Zm7d2B1+h5fHEOdyjCG+sGMz4f8D86/0HiqJ6MB4MnDc8FgP5vdWsGnemOQro7lnYo8UakZ3+5A0jxGw==",
-      "dev": true,
-      "requires": {
-        "import-local": "^2.0.0",
-        "jest-cli": "^24.9.0"
-      },
-      "dependencies": {
-        "@jest/console": {
-          "version": "24.9.0",
-          "resolved": "https://registry.npmjs.org/@jest/console/-/console-24.9.0.tgz",
-          "integrity": "sha512-Zuj6b8TnKXi3q4ymac8EQfc3ea/uhLeCGThFqXeC8H9/raaH8ARPUTdId+XyGd03Z4In0/VjD2OYFcBF09fNLQ==",
-          "dev": true,
-          "requires": {
-            "@jest/source-map": "^24.9.0",
-            "chalk": "^2.0.1",
-            "slash": "^2.0.0"
-          }
-        },
-        "@jest/core": {
-          "version": "24.9.0",
-          "resolved": "https://registry.npmjs.org/@jest/core/-/core-24.9.0.tgz",
-          "integrity": "sha512-Fogg3s4wlAr1VX7q+rhV9RVnUv5tD7VuWfYy1+whMiWUrvl7U3QJSJyWcDio9Lq2prqYsZaeTv2Rz24pWGkJ2A==",
-          "dev": true,
-          "requires": {
-            "@jest/console": "^24.7.1",
-            "@jest/reporters": "^24.9.0",
-            "@jest/test-result": "^24.9.0",
-            "@jest/transform": "^24.9.0",
-            "@jest/types": "^24.9.0",
-            "ansi-escapes": "^3.0.0",
-            "chalk": "^2.0.1",
-            "exit": "^0.1.2",
-            "graceful-fs": "^4.1.15",
-            "jest-changed-files": "^24.9.0",
-            "jest-config": "^24.9.0",
-            "jest-haste-map": "^24.9.0",
-            "jest-message-util": "^24.9.0",
-            "jest-regex-util": "^24.3.0",
-            "jest-resolve": "^24.9.0",
-            "jest-resolve-dependencies": "^24.9.0",
-            "jest-runner": "^24.9.0",
-            "jest-runtime": "^24.9.0",
-            "jest-snapshot": "^24.9.0",
-            "jest-util": "^24.9.0",
-            "jest-validate": "^24.9.0",
-            "jest-watcher": "^24.9.0",
-            "micromatch": "^3.1.10",
-            "p-each-series": "^1.0.0",
-            "realpath-native": "^1.1.0",
-            "rimraf": "^2.5.4",
-            "slash": "^2.0.0",
-            "strip-ansi": "^5.0.0"
-          }
-        },
-        "@jest/environment": {
-          "version": "24.9.0",
-          "resolved": "https://registry.npmjs.org/@jest/environment/-/environment-24.9.0.tgz",
-          "integrity": "sha512-5A1QluTPhvdIPFYnO3sZC3smkNeXPVELz7ikPbhUj0bQjB07EoE9qtLrem14ZUYWdVayYbsjVwIiL4WBIMV4aQ==",
-          "dev": true,
-          "requires": {
-            "@jest/fake-timers": "^24.9.0",
-            "@jest/transform": "^24.9.0",
-            "@jest/types": "^24.9.0",
-            "jest-mock": "^24.9.0"
-          }
-        },
-        "@jest/fake-timers": {
-          "version": "24.9.0",
-          "resolved": "https://registry.npmjs.org/@jest/fake-timers/-/fake-timers-24.9.0.tgz",
-          "integrity": "sha512-eWQcNa2YSwzXWIMC5KufBh3oWRIijrQFROsIqt6v/NS9Io/gknw1jsAC9c+ih/RQX4A3O7SeWAhQeN0goKhT9A==",
-          "dev": true,
-          "requires": {
-            "@jest/types": "^24.9.0",
-            "jest-message-util": "^24.9.0",
-            "jest-mock": "^24.9.0"
-          }
-        },
-        "@jest/reporters": {
-          "version": "24.9.0",
-          "resolved": "https://registry.npmjs.org/@jest/reporters/-/reporters-24.9.0.tgz",
-          "integrity": "sha512-mu4X0yjaHrffOsWmVLzitKmmmWSQ3GGuefgNscUSWNiUNcEOSEQk9k3pERKEQVBb0Cnn88+UESIsZEMH3o88Gw==",
-          "dev": true,
-          "requires": {
-            "@jest/environment": "^24.9.0",
-            "@jest/test-result": "^24.9.0",
-            "@jest/transform": "^24.9.0",
-            "@jest/types": "^24.9.0",
-            "chalk": "^2.0.1",
-            "exit": "^0.1.2",
-            "glob": "^7.1.2",
-            "istanbul-lib-coverage": "^2.0.2",
-            "istanbul-lib-instrument": "^3.0.1",
-            "istanbul-lib-report": "^2.0.4",
-            "istanbul-lib-source-maps": "^3.0.1",
-            "istanbul-reports": "^2.2.6",
-            "jest-haste-map": "^24.9.0",
-            "jest-resolve": "^24.9.0",
-            "jest-runtime": "^24.9.0",
-            "jest-util": "^24.9.0",
-            "jest-worker": "^24.6.0",
-            "node-notifier": "^5.4.2",
-            "slash": "^2.0.0",
-            "source-map": "^0.6.0",
-            "string-length": "^2.0.0"
-          }
-        },
-        "@jest/source-map": {
-          "version": "24.9.0",
-          "resolved": "https://registry.npmjs.org/@jest/source-map/-/source-map-24.9.0.tgz",
-          "integrity": "sha512-/Xw7xGlsZb4MJzNDgB7PW5crou5JqWiBQaz6xyPd3ArOg2nfn/PunV8+olXbbEZzNl591o5rWKE9BRDaFAuIBg==",
-          "dev": true,
-          "requires": {
-            "callsites": "^3.0.0",
-            "graceful-fs": "^4.1.15",
-            "source-map": "^0.6.0"
-          }
-        },
-        "@jest/test-result": {
-          "version": "24.9.0",
-          "resolved": "https://registry.npmjs.org/@jest/test-result/-/test-result-24.9.0.tgz",
-          "integrity": "sha512-XEFrHbBonBJ8dGp2JmF8kP/nQI/ImPpygKHwQ/SY+es59Z3L5PI4Qb9TQQMAEeYsThG1xF0k6tmG0tIKATNiiA==",
-          "dev": true,
-          "requires": {
-            "@jest/console": "^24.9.0",
-            "@jest/types": "^24.9.0",
-            "@types/istanbul-lib-coverage": "^2.0.0"
-          }
-        },
-        "@jest/test-sequencer": {
-          "version": "24.9.0",
-          "resolved": "https://registry.npmjs.org/@jest/test-sequencer/-/test-sequencer-24.9.0.tgz",
-          "integrity": "sha512-6qqsU4o0kW1dvA95qfNog8v8gkRN9ph6Lz7r96IvZpHdNipP2cBcb07J1Z45mz/VIS01OHJ3pY8T5fUY38tg4A==",
-          "dev": true,
-          "requires": {
-            "@jest/test-result": "^24.9.0",
-            "jest-haste-map": "^24.9.0",
-            "jest-runner": "^24.9.0",
-            "jest-runtime": "^24.9.0"
-          }
-        },
-        "@jest/transform": {
-          "version": "24.9.0",
-          "resolved": "https://registry.npmjs.org/@jest/transform/-/transform-24.9.0.tgz",
-          "integrity": "sha512-TcQUmyNRxV94S0QpMOnZl0++6RMiqpbH/ZMccFB/amku6Uwvyb1cjYX7xkp5nGNkbX4QPH/FcB6q1HBTHynLmQ==",
-          "dev": true,
-          "requires": {
-            "@babel/core": "^7.1.0",
-            "@jest/types": "^24.9.0",
-            "babel-plugin-istanbul": "^5.1.0",
-            "chalk": "^2.0.1",
-            "convert-source-map": "^1.4.0",
-            "fast-json-stable-stringify": "^2.0.0",
-            "graceful-fs": "^4.1.15",
-            "jest-haste-map": "^24.9.0",
-            "jest-regex-util": "^24.9.0",
-            "jest-util": "^24.9.0",
-            "micromatch": "^3.1.10",
-            "pirates": "^4.0.1",
-            "realpath-native": "^1.1.0",
-            "slash": "^2.0.0",
-            "source-map": "^0.6.1",
-            "write-file-atomic": "2.4.1"
-          }
-        },
-        "@jest/types": {
-          "version": "24.9.0",
-          "resolved": "https://registry.npmjs.org/@jest/types/-/types-24.9.0.tgz",
-          "integrity": "sha512-XKK7ze1apu5JWQ5eZjHITP66AX+QsLlbaJRBGYr8pNzwcAE2JVkwnf0yqjHTsDRcjR0mujy/NmZMXw5kl+kGBw==",
-          "dev": true,
-          "requires": {
-            "@types/istanbul-lib-coverage": "^2.0.0",
-            "@types/istanbul-reports": "^1.1.1",
-            "@types/yargs": "^13.0.0"
-          }
-        },
-        "@types/yargs": {
-          "version": "13.0.9",
-          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.9.tgz",
-          "integrity": "sha512-xrvhZ4DZewMDhoH1utLtOAwYQy60eYFoXeje30TzM3VOvQlBwQaEpKFq5m34k1wOw2AKIi2pwtiAjdmhvlBUzg==",
-          "dev": true,
-          "requires": {
-            "@types/yargs-parser": "*"
-          }
-        },
-        "acorn": {
-          "version": "5.7.4",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-5.7.4.tgz",
-          "integrity": "sha512-1D++VG7BhrtvQpNbBzovKNc1FLGGEE/oGe7b9xJm/RFHMBeUaUGpluV9RLjZa47YFdPcDAenEYuq9pQPcMdLJg==",
-          "dev": true
-        },
-        "ansi-escapes": {
-          "version": "3.2.0",
-          "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-3.2.0.tgz",
-          "integrity": "sha512-cBhpre4ma+U0T1oM5fXg7Dy1Jw7zzwv7lt/GoCpr+hDQJoYnKVPLL4dCvSEFMmQurOQvSrwT7SL/DAlhBI97RQ==",
-          "dev": true
-        },
-        "ansi-regex": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
-          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
-          "dev": true
-        },
-        "babel-jest": {
-          "version": "24.9.0",
-          "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-24.9.0.tgz",
-          "integrity": "sha512-ntuddfyiN+EhMw58PTNL1ph4C9rECiQXjI4nMMBKBaNjXvqLdkXpPRcMSr4iyBrJg/+wz9brFUD6RhOAT6r4Iw==",
-          "dev": true,
-          "requires": {
-            "@jest/transform": "^24.9.0",
-            "@jest/types": "^24.9.0",
-            "@types/babel__core": "^7.1.0",
-            "babel-plugin-istanbul": "^5.1.0",
-            "babel-preset-jest": "^24.9.0",
-            "chalk": "^2.4.2",
-            "slash": "^2.0.0"
-          }
-        },
-        "babel-plugin-istanbul": {
-          "version": "5.2.0",
-          "resolved": "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-5.2.0.tgz",
-          "integrity": "sha512-5LphC0USA8t4i1zCtjbbNb6jJj/9+X6P37Qfirc/70EQ34xKlMW+a1RHGwxGI+SwWpNwZ27HqvzAobeqaXwiZw==",
-          "dev": true,
-          "requires": {
-            "@babel/helper-plugin-utils": "^7.0.0",
-            "find-up": "^3.0.0",
-            "istanbul-lib-instrument": "^3.3.0",
-            "test-exclude": "^5.2.3"
-          }
-        },
-        "babel-plugin-jest-hoist": {
-          "version": "24.9.0",
-          "resolved": "https://registry.npmjs.org/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-24.9.0.tgz",
-          "integrity": "sha512-2EMA2P8Vp7lG0RAzr4HXqtYwacfMErOuv1U3wrvxHX6rD1sV6xS3WXG3r8TRQ2r6w8OhvSdWt+z41hQNwNm3Xw==",
-          "dev": true,
-          "requires": {
-            "@types/babel__traverse": "^7.0.6"
-          }
-        },
-        "babel-preset-jest": {
-          "version": "24.9.0",
-          "resolved": "https://registry.npmjs.org/babel-preset-jest/-/babel-preset-jest-24.9.0.tgz",
-          "integrity": "sha512-izTUuhE4TMfTRPF92fFwD2QfdXaZW08qvWTFCI51V8rW5x00UuPgc3ajRoWofXOuxjfcOM5zzSYsQS3H8KGCAg==",
-          "dev": true,
-          "requires": {
-            "@babel/plugin-syntax-object-rest-spread": "^7.0.0",
-            "babel-plugin-jest-hoist": "^24.9.0"
-          }
-        },
-        "camelcase": {
-          "version": "5.3.1",
-          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
-          "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
-          "dev": true
-        },
-        "cliui": {
-          "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz",
-          "integrity": "sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==",
-          "dev": true,
-          "requires": {
-            "string-width": "^3.1.0",
-            "strip-ansi": "^5.2.0",
-            "wrap-ansi": "^5.1.0"
-          }
-        },
-        "cssom": {
-          "version": "0.3.8",
-          "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.3.8.tgz",
-          "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==",
-          "dev": true
-        },
-        "cssstyle": {
-          "version": "1.4.0",
-          "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-1.4.0.tgz",
-          "integrity": "sha512-GBrLZYZ4X4x6/QEoBnIrqb8B/f5l4+8me2dkom/j1Gtbxy0kBv6OGzKuAsGM75bkGwGAFkt56Iwg28S3XTZgSA==",
-          "dev": true,
-          "requires": {
-            "cssom": "0.3.x"
-          }
-        },
-        "debug": {
-          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
-          "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
-          "dev": true,
-          "requires": {
-            "ms": "^2.1.1"
-          }
-        },
-        "detect-newline": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/detect-newline/-/detect-newline-2.1.0.tgz",
-          "integrity": "sha1-9B8cEL5LAOh7XxPaaAdZ8sW/0+I=",
-          "dev": true
-        },
-        "diff-sequences": {
-          "version": "24.9.0",
-          "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-24.9.0.tgz",
-          "integrity": "sha512-Dj6Wk3tWyTE+Fo1rW8v0Xhwk80um6yFYKbuAxc9c3EZxIHFDYwbi34Uk42u1CdnIiVorvt4RmlSDjIPyzGC2ew==",
-          "dev": true
-        },
-        "emoji-regex": {
-          "version": "7.0.3",
-          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz",
-          "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==",
-          "dev": true
-        },
-        "expect": {
-          "version": "24.9.0",
-          "resolved": "https://registry.npmjs.org/expect/-/expect-24.9.0.tgz",
-          "integrity": "sha512-wvVAx8XIol3Z5m9zvZXiyZOQ+sRJqNTIm6sGjdWlaZIeupQGO3WbYI+15D/AmEwZywL6wtJkbAbJtzkOfBuR0Q==",
-          "dev": true,
-          "requires": {
-            "@jest/types": "^24.9.0",
-            "ansi-styles": "^3.2.0",
-            "jest-get-type": "^24.9.0",
-            "jest-matcher-utils": "^24.9.0",
-            "jest-message-util": "^24.9.0",
-            "jest-regex-util": "^24.9.0"
-          }
-        },
-        "find-up": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
-          "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
-          "dev": true,
-          "requires": {
-            "locate-path": "^3.0.0"
-          }
-        },
-        "import-local": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/import-local/-/import-local-2.0.0.tgz",
-          "integrity": "sha512-b6s04m3O+s3CGSbqDIyP4R6aAwAeYlVq9+WUWep6iHa8ETRf9yei1U48C5MmfJmV9AiLYYBKPMq/W+/WRpQmCQ==",
-          "dev": true,
-          "requires": {
-            "pkg-dir": "^3.0.0",
-            "resolve-cwd": "^2.0.0"
-          }
-        },
-        "is-fullwidth-code-point": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
-          "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
-          "dev": true
-        },
-        "is-wsl": {
-          "version": "1.1.0",
-          "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-1.1.0.tgz",
-          "integrity": "sha1-HxbkqiKwTRM2tmGIpmrzxgDDpm0=",
-          "dev": true
-        },
-        "istanbul-lib-coverage": {
-          "version": "2.0.5",
-          "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.5.tgz",
-          "integrity": "sha512-8aXznuEPCJvGnMSRft4udDRDtb1V3pkQkMMI5LI+6HuQz5oQ4J2UFn1H82raA3qJtyOLkkwVqICBQkjnGtn5mA==",
-          "dev": true
-        },
-        "istanbul-lib-instrument": {
-          "version": "3.3.0",
-          "resolved": "https://registry.npmjs.org/istanbul-lib-instrument/-/istanbul-lib-instrument-3.3.0.tgz",
-          "integrity": "sha512-5nnIN4vo5xQZHdXno/YDXJ0G+I3dAm4XgzfSVTPLQpj/zAV2dV6Juy0yaf10/zrJOJeHoN3fraFe+XRq2bFVZA==",
-          "dev": true,
-          "requires": {
-            "@babel/generator": "^7.4.0",
-            "@babel/parser": "^7.4.3",
-            "@babel/template": "^7.4.0",
-            "@babel/traverse": "^7.4.3",
-            "@babel/types": "^7.4.0",
-            "istanbul-lib-coverage": "^2.0.5",
-            "semver": "^6.0.0"
-          }
-        },
-        "istanbul-lib-report": {
-          "version": "2.0.8",
-          "resolved": "https://registry.npmjs.org/istanbul-lib-report/-/istanbul-lib-report-2.0.8.tgz",
-          "integrity": "sha512-fHBeG573EIihhAblwgxrSenp0Dby6tJMFR/HvlerBsrCTD5bkUuoNtn3gVh29ZCS824cGGBPn7Sg7cNk+2xUsQ==",
-          "dev": true,
-          "requires": {
-            "istanbul-lib-coverage": "^2.0.5",
-            "make-dir": "^2.1.0",
-            "supports-color": "^6.1.0"
-          }
-        },
-        "istanbul-lib-source-maps": {
-          "version": "3.0.6",
-          "resolved": "https://registry.npmjs.org/istanbul-lib-source-maps/-/istanbul-lib-source-maps-3.0.6.tgz",
-          "integrity": "sha512-R47KzMtDJH6X4/YW9XTx+jrLnZnscW4VpNN+1PViSYTejLVPWv7oov+Duf8YQSPyVRUvueQqz1TcsC6mooZTXw==",
-          "dev": true,
-          "requires": {
-            "debug": "^4.1.1",
-            "istanbul-lib-coverage": "^2.0.5",
-            "make-dir": "^2.1.0",
-            "rimraf": "^2.6.3",
-            "source-map": "^0.6.1"
-          }
-        },
-        "istanbul-reports": {
-          "version": "2.2.7",
-          "resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-2.2.7.tgz",
-          "integrity": "sha512-uu1F/L1o5Y6LzPVSVZXNOoD/KXpJue9aeLRd0sM9uMXfZvzomB0WxVamWb5ue8kA2vVWEmW7EG+A5n3f1kqHKg==",
-          "dev": true,
-          "requires": {
-            "html-escaper": "^2.0.0"
-          }
-        },
-        "jest-changed-files": {
-          "version": "24.9.0",
-          "resolved": "https://registry.npmjs.org/jest-changed-files/-/jest-changed-files-24.9.0.tgz",
-          "integrity": "sha512-6aTWpe2mHF0DhL28WjdkO8LyGjs3zItPET4bMSeXU6T3ub4FPMw+mcOcbdGXQOAfmLcxofD23/5Bl9Z4AkFwqg==",
-          "dev": true,
-          "requires": {
-            "@jest/types": "^24.9.0",
-            "execa": "^1.0.0",
-            "throat": "^4.0.0"
-          }
-        },
-        "jest-cli": {
-          "version": "24.9.0",
-          "resolved": "https://registry.npmjs.org/jest-cli/-/jest-cli-24.9.0.tgz",
-          "integrity": "sha512-+VLRKyitT3BWoMeSUIHRxV/2g8y9gw91Jh5z2UmXZzkZKpbC08CSehVxgHUwTpy+HwGcns/tqafQDJW7imYvGg==",
-          "dev": true,
-          "requires": {
-            "@jest/core": "^24.9.0",
-            "@jest/test-result": "^24.9.0",
-            "@jest/types": "^24.9.0",
-            "chalk": "^2.0.1",
-            "exit": "^0.1.2",
-            "import-local": "^2.0.0",
-            "is-ci": "^2.0.0",
-            "jest-config": "^24.9.0",
-            "jest-util": "^24.9.0",
-            "jest-validate": "^24.9.0",
-            "prompts": "^2.0.1",
-            "realpath-native": "^1.1.0",
-            "yargs": "^13.3.0"
-          }
-        },
-        "jest-config": {
-          "version": "24.9.0",
-          "resolved": "https://registry.npmjs.org/jest-config/-/jest-config-24.9.0.tgz",
-          "integrity": "sha512-RATtQJtVYQrp7fvWg6f5y3pEFj9I+H8sWw4aKxnDZ96mob5i5SD6ZEGWgMLXQ4LE8UurrjbdlLWdUeo+28QpfQ==",
-          "dev": true,
-          "requires": {
-            "@babel/core": "^7.1.0",
-            "@jest/test-sequencer": "^24.9.0",
-            "@jest/types": "^24.9.0",
-            "babel-jest": "^24.9.0",
-            "chalk": "^2.0.1",
-            "glob": "^7.1.1",
-            "jest-environment-jsdom": "^24.9.0",
-            "jest-environment-node": "^24.9.0",
-            "jest-get-type": "^24.9.0",
-            "jest-jasmine2": "^24.9.0",
-            "jest-regex-util": "^24.3.0",
-            "jest-resolve": "^24.9.0",
-            "jest-util": "^24.9.0",
-            "jest-validate": "^24.9.0",
-            "micromatch": "^3.1.10",
-            "pretty-format": "^24.9.0",
-            "realpath-native": "^1.1.0"
-          }
-        },
-        "jest-diff": {
-          "version": "24.9.0",
-          "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-24.9.0.tgz",
-          "integrity": "sha512-qMfrTs8AdJE2iqrTp0hzh7kTd2PQWrsFyj9tORoKmu32xjPjeE4NyjVRDz8ybYwqS2ik8N4hsIpiVTyFeo2lBQ==",
-          "dev": true,
-          "requires": {
-            "chalk": "^2.0.1",
-            "diff-sequences": "^24.9.0",
-            "jest-get-type": "^24.9.0",
-            "pretty-format": "^24.9.0"
-          }
-        },
-        "jest-docblock": {
-          "version": "24.9.0",
-          "resolved": "https://registry.npmjs.org/jest-docblock/-/jest-docblock-24.9.0.tgz",
-          "integrity": "sha512-F1DjdpDMJMA1cN6He0FNYNZlo3yYmOtRUnktrT9Q37njYzC5WEaDdmbynIgy0L/IvXvvgsG8OsqhLPXTpfmZAA==",
-          "dev": true,
-          "requires": {
-            "detect-newline": "^2.1.0"
-          }
-        },
-        "jest-each": {
-          "version": "24.9.0",
-          "resolved": "https://registry.npmjs.org/jest-each/-/jest-each-24.9.0.tgz",
-          "integrity": "sha512-ONi0R4BvW45cw8s2Lrx8YgbeXL1oCQ/wIDwmsM3CqM/nlblNCPmnC3IPQlMbRFZu3wKdQ2U8BqM6lh3LJ5Bsog==",
-          "dev": true,
-          "requires": {
-            "@jest/types": "^24.9.0",
-            "chalk": "^2.0.1",
-            "jest-get-type": "^24.9.0",
-            "jest-util": "^24.9.0",
-            "pretty-format": "^24.9.0"
-          }
-        },
-        "jest-environment-jsdom": {
-          "version": "24.9.0",
-          "resolved": "https://registry.npmjs.org/jest-environment-jsdom/-/jest-environment-jsdom-24.9.0.tgz",
-          "integrity": "sha512-Zv9FV9NBRzLuALXjvRijO2351DRQeLYXtpD4xNvfoVFw21IOKNhZAEUKcbiEtjTkm2GsJ3boMVgkaR7rN8qetA==",
-          "dev": true,
-          "requires": {
-            "@jest/environment": "^24.9.0",
-            "@jest/fake-timers": "^24.9.0",
-            "@jest/types": "^24.9.0",
-            "jest-mock": "^24.9.0",
-            "jest-util": "^24.9.0",
-            "jsdom": "^11.5.1"
-          }
-        },
-        "jest-environment-node": {
-          "version": "24.9.0",
-          "resolved": "https://registry.npmjs.org/jest-environment-node/-/jest-environment-node-24.9.0.tgz",
-          "integrity": "sha512-6d4V2f4nxzIzwendo27Tr0aFm+IXWa0XEUnaH6nU0FMaozxovt+sfRvh4J47wL1OvF83I3SSTu0XK+i4Bqe7uA==",
-          "dev": true,
-          "requires": {
-            "@jest/environment": "^24.9.0",
-            "@jest/fake-timers": "^24.9.0",
-            "@jest/types": "^24.9.0",
-            "jest-mock": "^24.9.0",
-            "jest-util": "^24.9.0"
-          }
-        },
-        "jest-get-type": {
-          "version": "24.9.0",
-          "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-24.9.0.tgz",
-          "integrity": "sha512-lUseMzAley4LhIcpSP9Jf+fTrQ4a1yHQwLNeeVa2cEmbCGeoZAtYPOIv8JaxLD/sUpKxetKGP+gsHl8f8TSj8Q==",
-          "dev": true
-        },
-        "jest-haste-map": {
-          "version": "24.9.0",
-          "resolved": "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-24.9.0.tgz",
-          "integrity": "sha512-kfVFmsuWui2Sj1Rp1AJ4D9HqJwE4uwTlS/vO+eRUaMmd54BFpli2XhMQnPC2k4cHFVbB2Q2C+jtI1AGLgEnCjQ==",
-          "dev": true,
-          "requires": {
-            "@jest/types": "^24.9.0",
-            "anymatch": "^2.0.0",
-            "fb-watchman": "^2.0.0",
-            "fsevents": "^1.2.7",
-            "graceful-fs": "^4.1.15",
-            "invariant": "^2.2.4",
-            "jest-serializer": "^24.9.0",
-            "jest-util": "^24.9.0",
-            "jest-worker": "^24.9.0",
-            "micromatch": "^3.1.10",
-            "sane": "^4.0.3",
-            "walker": "^1.0.7"
-          }
-        },
-        "jest-jasmine2": {
-          "version": "24.9.0",
-          "resolved": "https://registry.npmjs.org/jest-jasmine2/-/jest-jasmine2-24.9.0.tgz",
-          "integrity": "sha512-Cq7vkAgaYKp+PsX+2/JbTarrk0DmNhsEtqBXNwUHkdlbrTBLtMJINADf2mf5FkowNsq8evbPc07/qFO0AdKTzw==",
-          "dev": true,
-          "requires": {
-            "@babel/traverse": "^7.1.0",
-            "@jest/environment": "^24.9.0",
-            "@jest/test-result": "^24.9.0",
-            "@jest/types": "^24.9.0",
-            "chalk": "^2.0.1",
-            "co": "^4.6.0",
-            "expect": "^24.9.0",
-            "is-generator-fn": "^2.0.0",
-            "jest-each": "^24.9.0",
-            "jest-matcher-utils": "^24.9.0",
-            "jest-message-util": "^24.9.0",
-            "jest-runtime": "^24.9.0",
-            "jest-snapshot": "^24.9.0",
-            "jest-util": "^24.9.0",
-            "pretty-format": "^24.9.0",
-            "throat": "^4.0.0"
-          }
-        },
-        "jest-leak-detector": {
-          "version": "24.9.0",
-          "resolved": "https://registry.npmjs.org/jest-leak-detector/-/jest-leak-detector-24.9.0.tgz",
-          "integrity": "sha512-tYkFIDsiKTGwb2FG1w8hX9V0aUb2ot8zY/2nFg087dUageonw1zrLMP4W6zsRO59dPkTSKie+D4rhMuP9nRmrA==",
-          "dev": true,
-          "requires": {
-            "jest-get-type": "^24.9.0",
-            "pretty-format": "^24.9.0"
-          }
-        },
-        "jest-matcher-utils": {
-          "version": "24.9.0",
-          "resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-24.9.0.tgz",
-          "integrity": "sha512-OZz2IXsu6eaiMAwe67c1T+5tUAtQyQx27/EMEkbFAGiw52tB9em+uGbzpcgYVpA8wl0hlxKPZxrly4CXU/GjHA==",
-          "dev": true,
-          "requires": {
-            "chalk": "^2.0.1",
-            "jest-diff": "^24.9.0",
-            "jest-get-type": "^24.9.0",
-            "pretty-format": "^24.9.0"
-          }
-        },
-        "jest-message-util": {
-          "version": "24.9.0",
-          "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-24.9.0.tgz",
-          "integrity": "sha512-oCj8FiZ3U0hTP4aSui87P4L4jC37BtQwUMqk+zk/b11FR19BJDeZsZAvIHutWnmtw7r85UmR3CEWZ0HWU2mAlw==",
-          "dev": true,
-          "requires": {
-            "@babel/code-frame": "^7.0.0",
-            "@jest/test-result": "^24.9.0",
-            "@jest/types": "^24.9.0",
-            "@types/stack-utils": "^1.0.1",
-            "chalk": "^2.0.1",
-            "micromatch": "^3.1.10",
-            "slash": "^2.0.0",
-            "stack-utils": "^1.0.1"
-          }
-        },
-        "jest-mock": {
-          "version": "24.9.0",
-          "resolved": "https://registry.npmjs.org/jest-mock/-/jest-mock-24.9.0.tgz",
-          "integrity": "sha512-3BEYN5WbSq9wd+SyLDES7AHnjH9A/ROBwmz7l2y+ol+NtSFO8DYiEBzoO1CeFc9a8DYy10EO4dDFVv/wN3zl1w==",
-          "dev": true,
-          "requires": {
-            "@jest/types": "^24.9.0"
-          }
-        },
-        "jest-regex-util": {
-          "version": "24.9.0",
-          "resolved": "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-24.9.0.tgz",
-          "integrity": "sha512-05Cmb6CuxaA+Ys6fjr3PhvV3bGQmO+2p2La4hFbU+W5uOc479f7FdLXUWXw4pYMAhhSZIuKHwSXSu6CsSBAXQA==",
-          "dev": true
-        },
-        "jest-resolve": {
-          "version": "24.9.0",
-          "resolved": "https://registry.npmjs.org/jest-resolve/-/jest-resolve-24.9.0.tgz",
-          "integrity": "sha512-TaLeLVL1l08YFZAt3zaPtjiVvyy4oSA6CRe+0AFPPVX3Q/VI0giIWWoAvoS5L96vj9Dqxj4fB5p2qrHCmTU/MQ==",
-          "dev": true,
-          "requires": {
-            "@jest/types": "^24.9.0",
-            "browser-resolve": "^1.11.3",
-            "chalk": "^2.0.1",
-            "jest-pnp-resolver": "^1.2.1",
-            "realpath-native": "^1.1.0"
-          }
-        },
-        "jest-resolve-dependencies": {
-          "version": "24.9.0",
-          "resolved": "https://registry.npmjs.org/jest-resolve-dependencies/-/jest-resolve-dependencies-24.9.0.tgz",
-          "integrity": "sha512-Fm7b6AlWnYhT0BXy4hXpactHIqER7erNgIsIozDXWl5dVm+k8XdGVe1oTg1JyaFnOxarMEbax3wyRJqGP2Pq+g==",
-          "dev": true,
-          "requires": {
-            "@jest/types": "^24.9.0",
-            "jest-regex-util": "^24.3.0",
-            "jest-snapshot": "^24.9.0"
-          }
-        },
-        "jest-runner": {
-          "version": "24.9.0",
-          "resolved": "https://registry.npmjs.org/jest-runner/-/jest-runner-24.9.0.tgz",
-          "integrity": "sha512-KksJQyI3/0mhcfspnxxEOBueGrd5E4vV7ADQLT9ESaCzz02WnbdbKWIf5Mkaucoaj7obQckYPVX6JJhgUcoWWg==",
-          "dev": true,
-          "requires": {
-            "@jest/console": "^24.7.1",
-            "@jest/environment": "^24.9.0",
-            "@jest/test-result": "^24.9.0",
-            "@jest/types": "^24.9.0",
-            "chalk": "^2.4.2",
-            "exit": "^0.1.2",
-            "graceful-fs": "^4.1.15",
-            "jest-config": "^24.9.0",
-            "jest-docblock": "^24.3.0",
-            "jest-haste-map": "^24.9.0",
-            "jest-jasmine2": "^24.9.0",
-            "jest-leak-detector": "^24.9.0",
-            "jest-message-util": "^24.9.0",
-            "jest-resolve": "^24.9.0",
-            "jest-runtime": "^24.9.0",
-            "jest-util": "^24.9.0",
-            "jest-worker": "^24.6.0",
-            "source-map-support": "^0.5.6",
-            "throat": "^4.0.0"
-          }
-        },
-        "jest-runtime": {
-          "version": "24.9.0",
-          "resolved": "https://registry.npmjs.org/jest-runtime/-/jest-runtime-24.9.0.tgz",
-          "integrity": "sha512-8oNqgnmF3v2J6PVRM2Jfuj8oX3syKmaynlDMMKQ4iyzbQzIG6th5ub/lM2bCMTmoTKM3ykcUYI2Pw9xwNtjMnw==",
-          "dev": true,
-          "requires": {
-            "@jest/console": "^24.7.1",
-            "@jest/environment": "^24.9.0",
-            "@jest/source-map": "^24.3.0",
-            "@jest/transform": "^24.9.0",
-            "@jest/types": "^24.9.0",
-            "@types/yargs": "^13.0.0",
-            "chalk": "^2.0.1",
-            "exit": "^0.1.2",
-            "glob": "^7.1.3",
-            "graceful-fs": "^4.1.15",
-            "jest-config": "^24.9.0",
-            "jest-haste-map": "^24.9.0",
-            "jest-message-util": "^24.9.0",
-            "jest-mock": "^24.9.0",
-            "jest-regex-util": "^24.3.0",
-            "jest-resolve": "^24.9.0",
-            "jest-snapshot": "^24.9.0",
-            "jest-util": "^24.9.0",
-            "jest-validate": "^24.9.0",
-            "realpath-native": "^1.1.0",
-            "slash": "^2.0.0",
-            "strip-bom": "^3.0.0",
-            "yargs": "^13.3.0"
-          }
-        },
-        "jest-serializer": {
-          "version": "24.9.0",
-          "resolved": "https://registry.npmjs.org/jest-serializer/-/jest-serializer-24.9.0.tgz",
-          "integrity": "sha512-DxYipDr8OvfrKH3Kel6NdED3OXxjvxXZ1uIY2I9OFbGg+vUkkg7AGvi65qbhbWNPvDckXmzMPbK3u3HaDO49bQ==",
-          "dev": true
-        },
-        "jest-snapshot": {
-          "version": "24.9.0",
-          "resolved": "https://registry.npmjs.org/jest-snapshot/-/jest-snapshot-24.9.0.tgz",
-          "integrity": "sha512-uI/rszGSs73xCM0l+up7O7a40o90cnrk429LOiK3aeTvfC0HHmldbd81/B7Ix81KSFe1lwkbl7GnBGG4UfuDew==",
-          "dev": true,
-          "requires": {
-            "@babel/types": "^7.0.0",
-            "@jest/types": "^24.9.0",
-            "chalk": "^2.0.1",
-            "expect": "^24.9.0",
-            "jest-diff": "^24.9.0",
-            "jest-get-type": "^24.9.0",
-            "jest-matcher-utils": "^24.9.0",
-            "jest-message-util": "^24.9.0",
-            "jest-resolve": "^24.9.0",
-            "mkdirp": "^0.5.1",
-            "natural-compare": "^1.4.0",
-            "pretty-format": "^24.9.0",
-            "semver": "^6.2.0"
-          }
-        },
-        "jest-util": {
-          "version": "24.9.0",
-          "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-24.9.0.tgz",
-          "integrity": "sha512-x+cZU8VRmOJxbA1K5oDBdxQmdq0OIdADarLxk0Mq+3XS4jgvhG/oKGWcIDCtPG0HgjxOYvF+ilPJQsAyXfbNOg==",
-          "dev": true,
-          "requires": {
-            "@jest/console": "^24.9.0",
-            "@jest/fake-timers": "^24.9.0",
-            "@jest/source-map": "^24.9.0",
-            "@jest/test-result": "^24.9.0",
-            "@jest/types": "^24.9.0",
-            "callsites": "^3.0.0",
-            "chalk": "^2.0.1",
-            "graceful-fs": "^4.1.15",
-            "is-ci": "^2.0.0",
-            "mkdirp": "^0.5.1",
-            "slash": "^2.0.0",
-            "source-map": "^0.6.0"
-          }
-        },
-        "jest-validate": {
-          "version": "24.9.0",
-          "resolved": "https://registry.npmjs.org/jest-validate/-/jest-validate-24.9.0.tgz",
-          "integrity": "sha512-HPIt6C5ACwiqSiwi+OfSSHbK8sG7akG8eATl+IPKaeIjtPOeBUd/g3J7DghugzxrGjI93qS/+RPKe1H6PqvhRQ==",
-          "dev": true,
-          "requires": {
-            "@jest/types": "^24.9.0",
-            "camelcase": "^5.3.1",
-            "chalk": "^2.0.1",
-            "jest-get-type": "^24.9.0",
-            "leven": "^3.1.0",
-            "pretty-format": "^24.9.0"
-          }
-        },
-        "jest-watcher": {
-          "version": "24.9.0",
-          "resolved": "https://registry.npmjs.org/jest-watcher/-/jest-watcher-24.9.0.tgz",
-          "integrity": "sha512-+/fLOfKPXXYJDYlks62/4R4GoT+GU1tYZed99JSCOsmzkkF7727RqKrjNAxtfO4YpGv11wybgRvCjR73lK2GZw==",
-          "dev": true,
-          "requires": {
-            "@jest/test-result": "^24.9.0",
-            "@jest/types": "^24.9.0",
-            "@types/yargs": "^13.0.0",
-            "ansi-escapes": "^3.0.0",
-            "chalk": "^2.0.1",
-            "jest-util": "^24.9.0",
-            "string-length": "^2.0.0"
-          }
-        },
-        "jest-worker": {
-          "version": "24.9.0",
-          "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-24.9.0.tgz",
-          "integrity": "sha512-51PE4haMSXcHohnSMdM42anbvZANYTqMrr52tVKPqqsPJMzoP6FYYDVqahX/HrAoKEKz3uUPzSvKs9A3qR4iVw==",
-          "dev": true,
-          "requires": {
-            "merge-stream": "^2.0.0",
-            "supports-color": "^6.1.0"
-          }
-        },
-        "jsdom": {
-          "version": "11.12.0",
-          "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-11.12.0.tgz",
-          "integrity": "sha512-y8Px43oyiBM13Zc1z780FrfNLJCXTL40EWlty/LXUtcjykRBNgLlCjWXpfSPBl2iv+N7koQN+dvqszHZgT/Fjw==",
-          "dev": true,
-          "requires": {
-            "abab": "^2.0.0",
-            "acorn": "^5.5.3",
-            "acorn-globals": "^4.1.0",
-            "array-equal": "^1.0.0",
-            "cssom": ">= 0.3.2 < 0.4.0",
-            "cssstyle": "^1.0.0",
-            "data-urls": "^1.0.0",
-            "domexception": "^1.0.1",
-            "escodegen": "^1.9.1",
-            "html-encoding-sniffer": "^1.0.2",
-            "left-pad": "^1.3.0",
-            "nwsapi": "^2.0.7",
-            "parse5": "4.0.0",
-            "pn": "^1.1.0",
-            "request": "^2.87.0",
-            "request-promise-native": "^1.0.5",
-            "sax": "^1.2.4",
-            "symbol-tree": "^3.2.2",
-            "tough-cookie": "^2.3.4",
-            "w3c-hr-time": "^1.0.1",
-            "webidl-conversions": "^4.0.2",
-            "whatwg-encoding": "^1.0.3",
-            "whatwg-mimetype": "^2.1.0",
-            "whatwg-url": "^6.4.1",
-            "ws": "^5.2.0",
-            "xml-name-validator": "^3.0.0"
-          }
-        },
-        "load-json-file": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-4.0.0.tgz",
-          "integrity": "sha1-L19Fq5HjMhYjT9U62rZo607AmTs=",
-          "dev": true,
-          "requires": {
-            "graceful-fs": "^4.1.2",
-            "parse-json": "^4.0.0",
-            "pify": "^3.0.0",
-            "strip-bom": "^3.0.0"
-          }
-        },
-        "locate-path": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
-          "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
-          "dev": true,
-          "requires": {
-            "p-locate": "^3.0.0",
-            "path-exists": "^3.0.0"
-          }
-        },
-        "ms": {
-          "version": "2.1.2",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-          "dev": true
-        },
-        "node-notifier": {
-          "version": "5.4.3",
-          "resolved": "https://registry.npmjs.org/node-notifier/-/node-notifier-5.4.3.tgz",
-          "integrity": "sha512-M4UBGcs4jeOK9CjTsYwkvH6/MzuUmGCyTW+kCY7uO+1ZVr0+FHGdPdIf5CCLqAaxnRrWidyoQlNkMIIVwbKB8Q==",
-          "dev": true,
-          "requires": {
-            "growly": "^1.3.0",
-            "is-wsl": "^1.1.0",
-            "semver": "^5.5.0",
-            "shellwords": "^0.1.1",
-            "which": "^1.3.0"
-          },
-          "dependencies": {
-            "semver": {
-              "version": "5.7.1",
-              "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-              "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
-              "dev": true
-            }
-          }
-        },
-        "p-each-series": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/p-each-series/-/p-each-series-1.0.0.tgz",
-          "integrity": "sha1-kw89Et0fUOdDRFeiLNbwSsatf3E=",
-          "dev": true,
-          "requires": {
-            "p-reduce": "^1.0.0"
-          }
-        },
-        "p-locate": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
-          "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
-          "dev": true,
-          "requires": {
-            "p-limit": "^2.0.0"
-          }
-        },
-        "parse-json": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
-          "integrity": "sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=",
-          "dev": true,
-          "requires": {
-            "error-ex": "^1.3.1",
-            "json-parse-better-errors": "^1.0.1"
-          }
-        },
-        "parse5": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/parse5/-/parse5-4.0.0.tgz",
-          "integrity": "sha512-VrZ7eOd3T1Fk4XWNXMgiGBK/z0MG48BWG2uQNU4I72fkQuKUTZpl+u9k+CxEG0twMVzSmXEEz12z5Fnw1jIQFA==",
-          "dev": true
-        },
-        "path-exists": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
-          "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=",
-          "dev": true
-        },
-        "path-type": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/path-type/-/path-type-3.0.0.tgz",
-          "integrity": "sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg==",
-          "dev": true,
-          "requires": {
-            "pify": "^3.0.0"
-          }
-        },
-        "pify": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
-          "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
-          "dev": true
-        },
-        "pretty-format": {
-          "version": "24.9.0",
-          "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-24.9.0.tgz",
-          "integrity": "sha512-00ZMZUiHaJrNfk33guavqgvfJS30sLYf0f8+Srklv0AMPodGGHcoHgksZ3OThYnIvOd+8yMCn0YiEOogjlgsnA==",
-          "dev": true,
-          "requires": {
-            "@jest/types": "^24.9.0",
-            "ansi-regex": "^4.0.0",
-            "ansi-styles": "^3.2.0",
-            "react-is": "^16.8.4"
-          }
-        },
-        "read-pkg": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
-          "integrity": "sha1-nLxoaXj+5l0WwA4rGcI3/Pbjg4k=",
-          "dev": true,
-          "requires": {
-            "load-json-file": "^4.0.0",
-            "normalize-package-data": "^2.3.2",
-            "path-type": "^3.0.0"
-          }
-        },
-        "read-pkg-up": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-4.0.0.tgz",
-          "integrity": "sha512-6etQSH7nJGsK0RbG/2TeDzZFa8shjQ1um+SwQQ5cwKy0dhSXdOncEhb1CPpvQG4h7FyOV6EB6YlV0yJvZQNAkA==",
-          "dev": true,
-          "requires": {
-            "find-up": "^3.0.0",
-            "read-pkg": "^3.0.0"
-          }
-        },
-        "realpath-native": {
-          "version": "1.1.0",
-          "resolved": "https://registry.npmjs.org/realpath-native/-/realpath-native-1.1.0.tgz",
-          "integrity": "sha512-wlgPA6cCIIg9gKz0fgAPjnzh4yR/LnXovwuo9hvyGvx3h8nX4+/iLZplfUWasXpqD8BdnGnP5njOFjkUwPzvjA==",
-          "dev": true,
-          "requires": {
-            "util.promisify": "^1.0.0"
-          }
-        },
-        "resolve-cwd": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/resolve-cwd/-/resolve-cwd-2.0.0.tgz",
-          "integrity": "sha1-AKn3OHVW4nA46uIyyqNypqWbZlo=",
-          "dev": true,
-          "requires": {
-            "resolve-from": "^3.0.0"
-          }
-        },
-        "resolve-from": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz",
-          "integrity": "sha1-six699nWiBvItuZTM17rywoYh0g=",
-          "dev": true
-        },
-        "semver": {
-          "version": "6.3.0",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-          "dev": true
-        },
-        "string-length": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/string-length/-/string-length-2.0.0.tgz",
-          "integrity": "sha1-1A27aGo6zpYMHP/KVivyxF+DY+0=",
-          "dev": true,
-          "requires": {
-            "astral-regex": "^1.0.0",
-            "strip-ansi": "^4.0.0"
-          },
-          "dependencies": {
-            "ansi-regex": {
-              "version": "3.0.0",
-              "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
-              "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
-              "dev": true
-            },
-            "strip-ansi": {
-              "version": "4.0.0",
-              "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
-              "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
-              "dev": true,
-              "requires": {
-                "ansi-regex": "^3.0.0"
-              }
-            }
-          }
-        },
-        "string-width": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
-          "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
-          "dev": true,
-          "requires": {
-            "emoji-regex": "^7.0.1",
-            "is-fullwidth-code-point": "^2.0.0",
-            "strip-ansi": "^5.1.0"
-          }
-        },
-        "test-exclude": {
-          "version": "5.2.3",
-          "resolved": "https://registry.npmjs.org/test-exclude/-/test-exclude-5.2.3.tgz",
-          "integrity": "sha512-M+oxtseCFO3EDtAaGH7iiej3CBkzXqFMbzqYAACdzKui4eZA+pq3tZEwChvOdNfa7xxy8BfbmgJSIr43cC/+2g==",
-          "dev": true,
-          "requires": {
-            "glob": "^7.1.3",
-            "minimatch": "^3.0.4",
-            "read-pkg-up": "^4.0.0",
-            "require-main-filename": "^2.0.0"
-          }
-        },
-        "throat": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/throat/-/throat-4.1.0.tgz",
-          "integrity": "sha1-iQN8vJLFarGJJua6TLsgDhVnKmo=",
-          "dev": true
-        },
-        "tough-cookie": {
-          "version": "2.5.0",
-          "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
-          "integrity": "sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==",
-          "dev": true,
-          "requires": {
-            "psl": "^1.1.28",
-            "punycode": "^2.1.1"
-          }
-        },
-        "whatwg-url": {
-          "version": "6.5.0",
-          "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-6.5.0.tgz",
-          "integrity": "sha512-rhRZRqx/TLJQWUpQ6bmrt2UV4f0HCQ463yQuONJqC6fO2VoEb1pTYddbe59SkYq87aoM5A3bdhMZiUiVws+fzQ==",
-          "dev": true,
-          "requires": {
-            "lodash.sortby": "^4.7.0",
-            "tr46": "^1.0.1",
-            "webidl-conversions": "^4.0.2"
-          }
-        },
-        "which": {
-          "version": "1.3.1",
-          "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
-          "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
-          "dev": true,
-          "requires": {
-            "isexe": "^2.0.0"
-          }
-        },
-        "wrap-ansi": {
-          "version": "5.1.0",
-          "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-5.1.0.tgz",
-          "integrity": "sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^3.2.0",
-            "string-width": "^3.0.0",
-            "strip-ansi": "^5.0.0"
-          }
-        },
-        "write-file-atomic": {
-          "version": "2.4.1",
-          "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-2.4.1.tgz",
-          "integrity": "sha512-TGHFeZEZMnv+gBFRfjAcxL5bPHrsGKtnb4qsFAws7/vlh+QfwAaySIw4AXP9ZskTTh5GWu3FLuJhsWVdiJPGvg==",
-          "dev": true,
-          "requires": {
-            "graceful-fs": "^4.1.11",
-            "imurmurhash": "^0.1.4",
-            "signal-exit": "^3.0.2"
-          }
-        },
-        "ws": {
-          "version": "5.2.2",
-          "resolved": "https://registry.npmjs.org/ws/-/ws-5.2.2.tgz",
-          "integrity": "sha512-jaHFD6PFv6UgoIVda6qZllptQsMlDEJkTQcybzzXDYM1XO9Y8em691FGMPmM46WGyLU4z9KMgQN+qrux/nhlHA==",
-          "dev": true,
-          "requires": {
-            "async-limiter": "~1.0.0"
-          }
-        },
-        "yargs": {
-          "version": "13.3.2",
-          "resolved": "https://registry.npmjs.org/yargs/-/yargs-13.3.2.tgz",
-          "integrity": "sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==",
-          "dev": true,
-          "requires": {
-            "cliui": "^5.0.0",
-            "find-up": "^3.0.0",
-            "get-caller-file": "^2.0.1",
-            "require-directory": "^2.1.1",
-            "require-main-filename": "^2.0.0",
-            "set-blocking": "^2.0.0",
-            "string-width": "^3.0.0",
-            "which-module": "^2.0.0",
-            "y18n": "^4.0.0",
-            "yargs-parser": "^13.1.2"
-          }
-        },
-        "yargs-parser": {
-          "version": "13.1.2",
-          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.1.2.tgz",
-          "integrity": "sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg==",
-          "dev": true,
-          "requires": {
-            "camelcase": "^5.0.0",
-            "decamelize": "^1.2.0"
-          }
-        }
-      }
-    },
-    "jest-changed-files": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/jest-changed-files/-/jest-changed-files-26.6.2.tgz",
-      "integrity": "sha512-fDS7szLcY9sCtIip8Fjry9oGf3I2ht/QT21bAHm5Dmf0mD4X3ReNUf17y+bO6fR8WgbIZTlbyG1ak/53cbRzKQ==",
-      "dev": true,
-      "requires": {
-        "@jest/types": "^26.6.2",
-        "execa": "^4.0.0",
-        "throat": "^5.0.0"
-      },
-      "dependencies": {
-        "@jest/types": {
-          "version": "26.6.2",
-          "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
-          "integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
-          "dev": true,
-          "requires": {
-            "@types/istanbul-lib-coverage": "^2.0.0",
-            "@types/istanbul-reports": "^3.0.0",
-            "@types/node": "*",
-            "@types/yargs": "^15.0.0",
-            "chalk": "^4.0.0"
-          }
-        },
-        "@types/istanbul-reports": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz",
-          "integrity": "sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==",
-          "dev": true,
-          "requires": {
-            "@types/istanbul-lib-report": "*"
-          }
-        },
-        "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,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
-          "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "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,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "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
-        },
-        "cross-spawn": {
-          "version": "7.0.3",
-          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-          "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-          "dev": true,
-          "requires": {
-            "path-key": "^3.1.0",
-            "shebang-command": "^2.0.0",
-            "which": "^2.0.1"
-          }
-        },
-        "execa": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/execa/-/execa-4.1.0.tgz",
-          "integrity": "sha512-j5W0//W7f8UxAn8hXVnwG8tLwdiUy4FJLcSupCg6maBYZDpyBvTApK7KyuI4bKj8KOh1r2YH+6ucuYtJv1bTZA==",
-          "dev": true,
-          "requires": {
-            "cross-spawn": "^7.0.0",
-            "get-stream": "^5.0.0",
-            "human-signals": "^1.1.1",
-            "is-stream": "^2.0.0",
-            "merge-stream": "^2.0.0",
-            "npm-run-path": "^4.0.0",
-            "onetime": "^5.1.0",
-            "signal-exit": "^3.0.2",
-            "strip-final-newline": "^2.0.0"
-          }
-        },
-        "get-stream": {
-          "version": "5.2.0",
-          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz",
-          "integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==",
-          "dev": true,
-          "requires": {
-            "pump": "^3.0.0"
-          }
-        },
-        "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
-        },
-        "human-signals": {
-          "version": "1.1.1",
-          "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-1.1.1.tgz",
-          "integrity": "sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==",
-          "dev": true
-        },
-        "is-stream": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.0.tgz",
-          "integrity": "sha512-XCoy+WlUr7d1+Z8GgSuXmpuUFC9fOhRXglJMx+dwLKTkL44Cjd4W1Z5P+BQZpr+cR93aGP4S/s7Ftw6Nd/kiEw==",
-          "dev": true
-        },
-        "npm-run-path": {
-          "version": "4.0.1",
-          "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
-          "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
-          "dev": true,
-          "requires": {
-            "path-key": "^3.0.0"
-          }
-        },
-        "path-key": {
-          "version": "3.1.1",
-          "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-          "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-          "dev": true
-        },
-        "shebang-command": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-          "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-          "dev": true,
-          "requires": {
-            "shebang-regex": "^3.0.0"
-          }
-        },
-        "shebang-regex": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-          "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-          "dev": true
-        },
-        "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,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        },
-        "which": {
-          "version": "2.0.2",
-          "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-          "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-          "dev": true,
-          "requires": {
-            "isexe": "^2.0.0"
-          }
-        }
-      }
-    },
-    "jest-config": {
-      "version": "26.6.3",
-      "resolved": "https://registry.npmjs.org/jest-config/-/jest-config-26.6.3.tgz",
-      "integrity": "sha512-t5qdIj/bCj2j7NFVHb2nFB4aUdfucDn3JRKgrZnplb8nieAirAzRSHP8uDEd+qV6ygzg9Pz4YG7UTJf94LPSyg==",
-      "dev": true,
-      "requires": {
-        "@babel/core": "^7.1.0",
-        "@jest/test-sequencer": "^26.6.3",
-        "@jest/types": "^26.6.2",
-        "babel-jest": "^26.6.3",
-        "chalk": "^4.0.0",
-        "deepmerge": "^4.2.2",
-        "glob": "^7.1.1",
-        "graceful-fs": "^4.2.4",
-        "jest-environment-jsdom": "^26.6.2",
-        "jest-environment-node": "^26.6.2",
-        "jest-get-type": "^26.3.0",
-        "jest-jasmine2": "^26.6.3",
-        "jest-regex-util": "^26.0.0",
-        "jest-resolve": "^26.6.2",
-        "jest-util": "^26.6.2",
-        "jest-validate": "^26.6.2",
-        "micromatch": "^4.0.2",
-        "pretty-format": "^26.6.2"
-      },
-      "dependencies": {
-        "@jest/types": {
-          "version": "26.6.2",
-          "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
-          "integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
-          "dev": true,
-          "requires": {
-            "@types/istanbul-lib-coverage": "^2.0.0",
-            "@types/istanbul-reports": "^3.0.0",
-            "@types/node": "*",
-            "@types/yargs": "^15.0.0",
-            "chalk": "^4.0.0"
-          }
-        },
-        "@types/istanbul-reports": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz",
-          "integrity": "sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==",
-          "dev": true,
-          "requires": {
-            "@types/istanbul-lib-report": "*"
-          }
-        },
-        "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,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "babel-jest": {
-          "version": "26.6.3",
-          "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-26.6.3.tgz",
-          "integrity": "sha512-pl4Q+GAVOHwvjrck6jKjvmGhnO3jHX/xuB9d27f+EJZ/6k+6nMuPjorrYp7s++bKKdANwzElBWnLWaObvTnaZA==",
-          "dev": true,
-          "requires": {
-            "@jest/transform": "^26.6.2",
-            "@jest/types": "^26.6.2",
-            "@types/babel__core": "^7.1.7",
-            "babel-plugin-istanbul": "^6.0.0",
-            "babel-preset-jest": "^26.6.2",
-            "chalk": "^4.0.0",
-            "graceful-fs": "^4.2.4",
-            "slash": "^3.0.0"
-          }
-        },
-        "braces": {
-          "version": "3.0.2",
-          "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-          "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-          "dev": true,
-          "requires": {
-            "fill-range": "^7.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
-          "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "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,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "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
-        },
-        "fill-range": {
-          "version": "7.0.1",
-          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-          "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-          "dev": true,
-          "requires": {
-            "to-regex-range": "^5.0.1"
-          }
-        },
-        "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
-        },
-        "is-number": {
-          "version": "7.0.0",
-          "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-          "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-          "dev": true
-        },
-        "micromatch": {
-          "version": "4.0.4",
-          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz",
-          "integrity": "sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==",
-          "dev": true,
-          "requires": {
-            "braces": "^3.0.1",
-            "picomatch": "^2.2.3"
-          }
-        },
-        "pretty-format": {
-          "version": "26.6.2",
-          "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-26.6.2.tgz",
-          "integrity": "sha512-7AeGuCYNGmycyQbCqd/3PWH4eOoX/OiCa0uphp57NVTeAGdJGaAliecxwBDHYQCIvrW7aDBZCYeNTP/WX69mkg==",
-          "dev": true,
-          "requires": {
-            "@jest/types": "^26.6.2",
-            "ansi-regex": "^5.0.0",
-            "ansi-styles": "^4.0.0",
-            "react-is": "^17.0.1"
-          }
-        },
-        "react-is": {
-          "version": "17.0.2",
-          "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-          "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
-          "dev": true
-        },
-        "slash": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
-          "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
-          "dev": true
-        },
-        "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,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        },
-        "to-regex-range": {
-          "version": "5.0.1",
-          "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-          "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-          "dev": true,
-          "requires": {
-            "is-number": "^7.0.0"
-          }
-        }
-      }
-    },
-    "jest-diff": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-26.6.2.tgz",
-      "integrity": "sha512-6m+9Z3Gv9wN0WFVasqjCL/06+EFCMTqDEUl/b87HYK2rAPTyfz4ZIuSlPhY51PIQRWx5TaxeF1qmXKe9gfN3sA==",
-      "dev": true,
-      "requires": {
-        "chalk": "^4.0.0",
-        "diff-sequences": "^26.6.2",
-        "jest-get-type": "^26.3.0",
-        "pretty-format": "^26.6.2"
-      },
-      "dependencies": {
-        "@jest/types": {
-          "version": "26.6.2",
-          "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
-          "integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
-          "dev": true,
-          "requires": {
-            "@types/istanbul-lib-coverage": "^2.0.0",
-            "@types/istanbul-reports": "^3.0.0",
-            "@types/node": "*",
-            "@types/yargs": "^15.0.0",
-            "chalk": "^4.0.0"
-          }
-        },
-        "@types/istanbul-reports": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.0.tgz",
-          "integrity": "sha512-nwKNbvnwJ2/mndE9ItP/zc2TCzw6uuodnF4EHYWD+gCQDVBuRQL5UzbZD0/ezy1iKsFU2ZQiDqg4M9dN4+wZgA==",
-          "dev": true,
-          "requires": {
-            "@types/istanbul-lib-report": "*"
-          }
-        },
-        "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,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
-          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "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,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "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
-        },
-        "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
-        },
-        "pretty-format": {
-          "version": "26.6.2",
-          "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-26.6.2.tgz",
-          "integrity": "sha512-7AeGuCYNGmycyQbCqd/3PWH4eOoX/OiCa0uphp57NVTeAGdJGaAliecxwBDHYQCIvrW7aDBZCYeNTP/WX69mkg==",
-          "dev": true,
-          "requires": {
-            "@jest/types": "^26.6.2",
-            "ansi-regex": "^5.0.0",
-            "ansi-styles": "^4.0.0",
-            "react-is": "^17.0.1"
-          }
-        },
-        "react-is": {
-          "version": "17.0.1",
-          "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.1.tgz",
-          "integrity": "sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA==",
-          "dev": true
-        },
-        "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,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
-    "jest-docblock": {
-      "version": "26.0.0",
-      "resolved": "https://registry.npmjs.org/jest-docblock/-/jest-docblock-26.0.0.tgz",
-      "integrity": "sha512-RDZ4Iz3QbtRWycd8bUEPxQsTlYazfYn/h5R65Fc6gOfwozFhoImx+affzky/FFBuqISPTqjXomoIGJVKBWoo0w==",
-      "dev": true,
-      "requires": {
-        "detect-newline": "^3.0.0"
-      }
-    },
-    "jest-each": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/jest-each/-/jest-each-26.6.2.tgz",
-      "integrity": "sha512-Mer/f0KaATbjl8MCJ+0GEpNdqmnVmDYqCTJYTvoo7rqmRiDllmp2AYN+06F93nXcY3ur9ShIjS+CO/uD+BbH4A==",
-      "dev": true,
-      "requires": {
-        "@jest/types": "^26.6.2",
-        "chalk": "^4.0.0",
-        "jest-get-type": "^26.3.0",
-        "jest-util": "^26.6.2",
-        "pretty-format": "^26.6.2"
-      },
-      "dependencies": {
-        "@jest/types": {
-          "version": "26.6.2",
-          "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
-          "integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
-          "dev": true,
-          "requires": {
-            "@types/istanbul-lib-coverage": "^2.0.0",
-            "@types/istanbul-reports": "^3.0.0",
-            "@types/node": "*",
-            "@types/yargs": "^15.0.0",
-            "chalk": "^4.0.0"
-          }
-        },
-        "@types/istanbul-reports": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz",
-          "integrity": "sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==",
-          "dev": true,
-          "requires": {
-            "@types/istanbul-lib-report": "*"
-          }
-        },
-        "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,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
-          "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "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,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "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
-        },
-        "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
-        },
-        "pretty-format": {
-          "version": "26.6.2",
-          "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-26.6.2.tgz",
-          "integrity": "sha512-7AeGuCYNGmycyQbCqd/3PWH4eOoX/OiCa0uphp57NVTeAGdJGaAliecxwBDHYQCIvrW7aDBZCYeNTP/WX69mkg==",
-          "dev": true,
-          "requires": {
-            "@jest/types": "^26.6.2",
-            "ansi-regex": "^5.0.0",
-            "ansi-styles": "^4.0.0",
-            "react-is": "^17.0.1"
-          }
-        },
-        "react-is": {
-          "version": "17.0.2",
-          "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-          "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
-          "dev": true
-        },
-        "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,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
-    "jest-environment-jsdom": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/jest-environment-jsdom/-/jest-environment-jsdom-26.6.2.tgz",
-      "integrity": "sha512-jgPqCruTlt3Kwqg5/WVFyHIOJHsiAvhcp2qiR2QQstuG9yWox5+iHpU3ZrcBxW14T4fe5Z68jAfLRh7joCSP2Q==",
-      "dev": true,
-      "requires": {
-        "@jest/environment": "^26.6.2",
-        "@jest/fake-timers": "^26.6.2",
-        "@jest/types": "^26.6.2",
-        "@types/node": "*",
-        "jest-mock": "^26.6.2",
-        "jest-util": "^26.6.2",
-        "jsdom": "^16.4.0"
-      },
-      "dependencies": {
-        "@jest/types": {
-          "version": "26.6.2",
-          "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
-          "integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
-          "dev": true,
-          "requires": {
-            "@types/istanbul-lib-coverage": "^2.0.0",
-            "@types/istanbul-reports": "^3.0.0",
-            "@types/node": "*",
-            "@types/yargs": "^15.0.0",
-            "chalk": "^4.0.0"
-          }
-        },
-        "@types/istanbul-reports": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz",
-          "integrity": "sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==",
-          "dev": true,
-          "requires": {
-            "@types/istanbul-lib-report": "*"
-          }
-        },
-        "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,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
-          "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "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,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "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
-        },
-        "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
-        },
-        "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,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
-    "jest-environment-node": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/jest-environment-node/-/jest-environment-node-26.6.2.tgz",
-      "integrity": "sha512-zhtMio3Exty18dy8ee8eJ9kjnRyZC1N4C1Nt/VShN1apyXc8rWGtJ9lI7vqiWcyyXS4BVSEn9lxAM2D+07/Tag==",
-      "dev": true,
-      "requires": {
-        "@jest/environment": "^26.6.2",
-        "@jest/fake-timers": "^26.6.2",
-        "@jest/types": "^26.6.2",
-        "@types/node": "*",
-        "jest-mock": "^26.6.2",
-        "jest-util": "^26.6.2"
-      },
-      "dependencies": {
-        "@jest/types": {
-          "version": "26.6.2",
-          "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
-          "integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
-          "dev": true,
-          "requires": {
-            "@types/istanbul-lib-coverage": "^2.0.0",
-            "@types/istanbul-reports": "^3.0.0",
-            "@types/node": "*",
-            "@types/yargs": "^15.0.0",
-            "chalk": "^4.0.0"
-          }
-        },
-        "@types/istanbul-reports": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz",
-          "integrity": "sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==",
-          "dev": true,
-          "requires": {
-            "@types/istanbul-lib-report": "*"
-          }
-        },
-        "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,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
-          "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "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,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "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
-        },
-        "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
-        },
-        "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,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
-    "jest-get-type": {
-      "version": "26.3.0",
-      "resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-26.3.0.tgz",
-      "integrity": "sha512-TpfaviN1R2pQWkIihlfEanwOXK0zcxrKEE4MlU6Tn7keoXdN6/3gK/xl0yEh8DOunn5pOVGKf8hB4R9gVh04ig==",
-      "dev": true
-    },
-    "jest-haste-map": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-26.6.2.tgz",
-      "integrity": "sha512-easWIJXIw71B2RdR8kgqpjQrbMRWQBgiBwXYEhtGUTaX+doCjBheluShdDMeR8IMfJiTqH4+zfhtg29apJf/8w==",
-      "dev": true,
-      "requires": {
-        "@jest/types": "^26.6.2",
-        "@types/graceful-fs": "^4.1.2",
-        "@types/node": "*",
-        "anymatch": "^3.0.3",
-        "fb-watchman": "^2.0.0",
-        "fsevents": "^2.1.2",
-        "graceful-fs": "^4.2.4",
-        "jest-regex-util": "^26.0.0",
-        "jest-serializer": "^26.6.2",
-        "jest-util": "^26.6.2",
-        "jest-worker": "^26.6.2",
-        "micromatch": "^4.0.2",
-        "sane": "^4.0.3",
-        "walker": "^1.0.7"
-      },
-      "dependencies": {
-        "@jest/types": {
-          "version": "26.6.2",
-          "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
-          "integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
-          "dev": true,
-          "requires": {
-            "@types/istanbul-lib-coverage": "^2.0.0",
-            "@types/istanbul-reports": "^3.0.0",
-            "@types/node": "*",
-            "@types/yargs": "^15.0.0",
-            "chalk": "^4.0.0"
-          }
-        },
-        "@types/istanbul-reports": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz",
-          "integrity": "sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==",
-          "dev": true,
-          "requires": {
-            "@types/istanbul-lib-report": "*"
-          }
-        },
-        "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,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "anymatch": {
-          "version": "3.1.2",
-          "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
-          "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
-          "dev": true,
-          "requires": {
-            "normalize-path": "^3.0.0",
-            "picomatch": "^2.0.4"
-          }
-        },
-        "braces": {
-          "version": "3.0.2",
-          "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-          "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-          "dev": true,
-          "requires": {
-            "fill-range": "^7.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
-          "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "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,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "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
-        },
-        "fill-range": {
-          "version": "7.0.1",
-          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-          "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-          "dev": true,
-          "requires": {
-            "to-regex-range": "^5.0.1"
-          }
-        },
-        "fsevents": {
-          "version": "2.3.2",
-          "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
-          "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
-          "dev": true,
-          "optional": true
-        },
-        "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
-        },
-        "is-number": {
-          "version": "7.0.0",
-          "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-          "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-          "dev": true
-        },
-        "micromatch": {
-          "version": "4.0.4",
-          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz",
-          "integrity": "sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==",
-          "dev": true,
-          "requires": {
-            "braces": "^3.0.1",
-            "picomatch": "^2.2.3"
-          }
-        },
-        "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,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        },
-        "to-regex-range": {
-          "version": "5.0.1",
-          "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-          "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-          "dev": true,
-          "requires": {
-            "is-number": "^7.0.0"
-          }
-        }
-      }
-    },
-    "jest-jasmine2": {
-      "version": "26.6.3",
-      "resolved": "https://registry.npmjs.org/jest-jasmine2/-/jest-jasmine2-26.6.3.tgz",
-      "integrity": "sha512-kPKUrQtc8aYwBV7CqBg5pu+tmYXlvFlSFYn18ev4gPFtrRzB15N2gW/Roew3187q2w2eHuu0MU9TJz6w0/nPEg==",
-      "dev": true,
-      "requires": {
-        "@babel/traverse": "^7.1.0",
-        "@jest/environment": "^26.6.2",
-        "@jest/source-map": "^26.6.2",
-        "@jest/test-result": "^26.6.2",
-        "@jest/types": "^26.6.2",
-        "@types/node": "*",
-        "chalk": "^4.0.0",
-        "co": "^4.6.0",
-        "expect": "^26.6.2",
-        "is-generator-fn": "^2.0.0",
-        "jest-each": "^26.6.2",
-        "jest-matcher-utils": "^26.6.2",
-        "jest-message-util": "^26.6.2",
-        "jest-runtime": "^26.6.3",
-        "jest-snapshot": "^26.6.2",
-        "jest-util": "^26.6.2",
-        "pretty-format": "^26.6.2",
-        "throat": "^5.0.0"
-      },
-      "dependencies": {
-        "@jest/types": {
-          "version": "26.6.2",
-          "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
-          "integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
-          "dev": true,
-          "requires": {
-            "@types/istanbul-lib-coverage": "^2.0.0",
-            "@types/istanbul-reports": "^3.0.0",
-            "@types/node": "*",
-            "@types/yargs": "^15.0.0",
-            "chalk": "^4.0.0"
-          }
-        },
-        "@types/istanbul-reports": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz",
-          "integrity": "sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==",
-          "dev": true,
-          "requires": {
-            "@types/istanbul-lib-report": "*"
-          }
-        },
-        "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,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
-          "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "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,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "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
-        },
-        "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
-        },
-        "pretty-format": {
-          "version": "26.6.2",
-          "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-26.6.2.tgz",
-          "integrity": "sha512-7AeGuCYNGmycyQbCqd/3PWH4eOoX/OiCa0uphp57NVTeAGdJGaAliecxwBDHYQCIvrW7aDBZCYeNTP/WX69mkg==",
-          "dev": true,
-          "requires": {
-            "@jest/types": "^26.6.2",
-            "ansi-regex": "^5.0.0",
-            "ansi-styles": "^4.0.0",
-            "react-is": "^17.0.1"
-          }
-        },
-        "react-is": {
-          "version": "17.0.2",
-          "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-          "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
-          "dev": true
-        },
-        "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,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
-    "jest-leak-detector": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/jest-leak-detector/-/jest-leak-detector-26.6.2.tgz",
-      "integrity": "sha512-i4xlXpsVSMeKvg2cEKdfhh0H39qlJlP5Ex1yQxwF9ubahboQYMgTtz5oML35AVA3B4Eu+YsmwaiKVev9KCvLxg==",
-      "dev": true,
-      "requires": {
-        "jest-get-type": "^26.3.0",
-        "pretty-format": "^26.6.2"
-      },
-      "dependencies": {
-        "@jest/types": {
-          "version": "26.6.2",
-          "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
-          "integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
-          "dev": true,
-          "requires": {
-            "@types/istanbul-lib-coverage": "^2.0.0",
-            "@types/istanbul-reports": "^3.0.0",
-            "@types/node": "*",
-            "@types/yargs": "^15.0.0",
-            "chalk": "^4.0.0"
-          }
-        },
-        "@types/istanbul-reports": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz",
-          "integrity": "sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==",
-          "dev": true,
-          "requires": {
-            "@types/istanbul-lib-report": "*"
-          }
-        },
-        "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,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
-          "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "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,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "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
-        },
-        "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
-        },
-        "pretty-format": {
-          "version": "26.6.2",
-          "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-26.6.2.tgz",
-          "integrity": "sha512-7AeGuCYNGmycyQbCqd/3PWH4eOoX/OiCa0uphp57NVTeAGdJGaAliecxwBDHYQCIvrW7aDBZCYeNTP/WX69mkg==",
-          "dev": true,
-          "requires": {
-            "@jest/types": "^26.6.2",
-            "ansi-regex": "^5.0.0",
-            "ansi-styles": "^4.0.0",
-            "react-is": "^17.0.1"
-          }
-        },
-        "react-is": {
-          "version": "17.0.2",
-          "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-          "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
-          "dev": true
-        },
-        "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,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
-    "jest-matcher-utils": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-26.6.2.tgz",
-      "integrity": "sha512-llnc8vQgYcNqDrqRDXWwMr9i7rS5XFiCwvh6DTP7Jqa2mqpcCBBlpCbn+trkG0KNhPu/h8rzyBkriOtBstvWhw==",
-      "dev": true,
-      "requires": {
-        "chalk": "^4.0.0",
-        "jest-diff": "^26.6.2",
-        "jest-get-type": "^26.3.0",
-        "pretty-format": "^26.6.2"
-      },
-      "dependencies": {
-        "@jest/types": {
-          "version": "26.6.2",
-          "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
-          "integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
-          "dev": true,
-          "requires": {
-            "@types/istanbul-lib-coverage": "^2.0.0",
-            "@types/istanbul-reports": "^3.0.0",
-            "@types/node": "*",
-            "@types/yargs": "^15.0.0",
-            "chalk": "^4.0.0"
-          }
-        },
-        "@types/istanbul-reports": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz",
-          "integrity": "sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==",
-          "dev": true,
-          "requires": {
-            "@types/istanbul-lib-report": "*"
-          }
-        },
-        "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,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
-          "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "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,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "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
-        },
-        "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
-        },
-        "pretty-format": {
-          "version": "26.6.2",
-          "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-26.6.2.tgz",
-          "integrity": "sha512-7AeGuCYNGmycyQbCqd/3PWH4eOoX/OiCa0uphp57NVTeAGdJGaAliecxwBDHYQCIvrW7aDBZCYeNTP/WX69mkg==",
-          "dev": true,
-          "requires": {
-            "@jest/types": "^26.6.2",
-            "ansi-regex": "^5.0.0",
-            "ansi-styles": "^4.0.0",
-            "react-is": "^17.0.1"
-          }
-        },
-        "react-is": {
-          "version": "17.0.2",
-          "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-          "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
-          "dev": true
-        },
-        "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,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
-    "jest-message-util": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-26.6.2.tgz",
-      "integrity": "sha512-rGiLePzQ3AzwUshu2+Rn+UMFk0pHN58sOG+IaJbk5Jxuqo3NYO1U2/MIR4S1sKgsoYSXSzdtSa0TgrmtUwEbmA==",
-      "dev": true,
-      "requires": {
-        "@babel/code-frame": "^7.0.0",
-        "@jest/types": "^26.6.2",
-        "@types/stack-utils": "^2.0.0",
-        "chalk": "^4.0.0",
-        "graceful-fs": "^4.2.4",
-        "micromatch": "^4.0.2",
-        "pretty-format": "^26.6.2",
-        "slash": "^3.0.0",
-        "stack-utils": "^2.0.2"
-      },
-      "dependencies": {
-        "@jest/types": {
-          "version": "26.6.2",
-          "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
-          "integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
-          "dev": true,
-          "requires": {
-            "@types/istanbul-lib-coverage": "^2.0.0",
-            "@types/istanbul-reports": "^3.0.0",
-            "@types/node": "*",
-            "@types/yargs": "^15.0.0",
-            "chalk": "^4.0.0"
-          }
-        },
-        "@types/istanbul-reports": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz",
-          "integrity": "sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==",
-          "dev": true,
-          "requires": {
-            "@types/istanbul-lib-report": "*"
-          }
-        },
-        "@types/stack-utils": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz",
-          "integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==",
-          "dev": true
-        },
-        "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,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "braces": {
-          "version": "3.0.2",
-          "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-          "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-          "dev": true,
-          "requires": {
-            "fill-range": "^7.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
-          "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "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,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "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
-        },
-        "escape-string-regexp": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz",
-          "integrity": "sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==",
-          "dev": true
-        },
-        "fill-range": {
-          "version": "7.0.1",
-          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-          "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-          "dev": true,
-          "requires": {
-            "to-regex-range": "^5.0.1"
-          }
-        },
-        "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
-        },
-        "is-number": {
-          "version": "7.0.0",
-          "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-          "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-          "dev": true
-        },
-        "micromatch": {
-          "version": "4.0.4",
-          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz",
-          "integrity": "sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==",
-          "dev": true,
-          "requires": {
-            "braces": "^3.0.1",
-            "picomatch": "^2.2.3"
-          }
-        },
-        "pretty-format": {
-          "version": "26.6.2",
-          "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-26.6.2.tgz",
-          "integrity": "sha512-7AeGuCYNGmycyQbCqd/3PWH4eOoX/OiCa0uphp57NVTeAGdJGaAliecxwBDHYQCIvrW7aDBZCYeNTP/WX69mkg==",
-          "dev": true,
-          "requires": {
-            "@jest/types": "^26.6.2",
-            "ansi-regex": "^5.0.0",
-            "ansi-styles": "^4.0.0",
-            "react-is": "^17.0.1"
-          }
-        },
-        "react-is": {
-          "version": "17.0.2",
-          "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-          "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
-          "dev": true
-        },
-        "slash": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
-          "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
-          "dev": true
-        },
-        "stack-utils": {
-          "version": "2.0.3",
-          "resolved": "https://registry.npmjs.org/stack-utils/-/stack-utils-2.0.3.tgz",
-          "integrity": "sha512-gL//fkxfWUsIlFL2Tl42Cl6+HFALEaB1FU76I/Fy+oZjRreP7OPMXFlGbxM7NQsI0ZpUfw76sHnv0WNYuTb7Iw==",
-          "dev": true,
-          "requires": {
-            "escape-string-regexp": "^2.0.0"
-          }
-        },
-        "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,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        },
-        "to-regex-range": {
-          "version": "5.0.1",
-          "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-          "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-          "dev": true,
-          "requires": {
-            "is-number": "^7.0.0"
-          }
-        }
-      }
-    },
-    "jest-mock": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/jest-mock/-/jest-mock-26.6.2.tgz",
-      "integrity": "sha512-YyFjePHHp1LzpzYcmgqkJ0nm0gg/lJx2aZFzFy1S6eUqNjXsOqTK10zNRff2dNfssgokjkG65OlWNcIlgd3zew==",
-      "dev": true,
-      "requires": {
-        "@jest/types": "^26.6.2",
-        "@types/node": "*"
-      },
-      "dependencies": {
-        "@jest/types": {
-          "version": "26.6.2",
-          "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
-          "integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
-          "dev": true,
-          "requires": {
-            "@types/istanbul-lib-coverage": "^2.0.0",
-            "@types/istanbul-reports": "^3.0.0",
-            "@types/node": "*",
-            "@types/yargs": "^15.0.0",
-            "chalk": "^4.0.0"
-          }
-        },
-        "@types/istanbul-reports": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz",
-          "integrity": "sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==",
-          "dev": true,
-          "requires": {
-            "@types/istanbul-lib-report": "*"
-          }
-        },
-        "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,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
-          "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "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,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "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
-        },
-        "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
-        },
-        "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,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
-    "jest-pnp-resolver": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/jest-pnp-resolver/-/jest-pnp-resolver-1.2.2.tgz",
-      "integrity": "sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==",
-      "dev": true
-    },
-    "jest-regex-util": {
-      "version": "26.0.0",
-      "resolved": "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-26.0.0.tgz",
-      "integrity": "sha512-Gv3ZIs/nA48/Zvjrl34bf+oD76JHiGDUxNOVgUjh3j890sblXryjY4rss71fPtD/njchl6PSE2hIhvyWa1eT0A==",
-      "dev": true
-    },
-    "jest-resolve": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/jest-resolve/-/jest-resolve-26.6.2.tgz",
-      "integrity": "sha512-sOxsZOq25mT1wRsfHcbtkInS+Ek7Q8jCHUB0ZUTP0tc/c41QHriU/NunqMfCUWsL4H3MHpvQD4QR9kSYhS7UvQ==",
-      "dev": true,
-      "requires": {
-        "@jest/types": "^26.6.2",
-        "chalk": "^4.0.0",
-        "graceful-fs": "^4.2.4",
-        "jest-pnp-resolver": "^1.2.2",
-        "jest-util": "^26.6.2",
-        "read-pkg-up": "^7.0.1",
-        "resolve": "^1.18.1",
-        "slash": "^3.0.0"
-      },
-      "dependencies": {
-        "@jest/types": {
-          "version": "26.6.2",
-          "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
-          "integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
-          "dev": true,
-          "requires": {
-            "@types/istanbul-lib-coverage": "^2.0.0",
-            "@types/istanbul-reports": "^3.0.0",
-            "@types/node": "*",
-            "@types/yargs": "^15.0.0",
-            "chalk": "^4.0.0"
-          }
-        },
-        "@types/istanbul-reports": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz",
-          "integrity": "sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==",
-          "dev": true,
-          "requires": {
-            "@types/istanbul-lib-report": "*"
-          }
-        },
-        "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,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
-          "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "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,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "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
-        },
-        "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
-        },
-        "read-pkg": {
-          "version": "5.2.0",
-          "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
-          "integrity": "sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==",
-          "dev": true,
-          "requires": {
-            "@types/normalize-package-data": "^2.4.0",
-            "normalize-package-data": "^2.5.0",
-            "parse-json": "^5.0.0",
-            "type-fest": "^0.6.0"
-          },
-          "dependencies": {
-            "type-fest": {
-              "version": "0.6.0",
-              "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.6.0.tgz",
-              "integrity": "sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==",
-              "dev": true
-            }
-          }
-        },
-        "read-pkg-up": {
-          "version": "7.0.1",
-          "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-7.0.1.tgz",
-          "integrity": "sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==",
-          "dev": true,
-          "requires": {
-            "find-up": "^4.1.0",
-            "read-pkg": "^5.2.0",
-            "type-fest": "^0.8.1"
-          }
-        },
-        "resolve": {
-          "version": "1.20.0",
-          "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
-          "integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==",
-          "dev": true,
-          "requires": {
-            "is-core-module": "^2.2.0",
-            "path-parse": "^1.0.6"
-          }
-        },
-        "slash": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
-          "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
-          "dev": true
-        },
-        "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,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
-    "jest-resolve-dependencies": {
-      "version": "26.6.3",
-      "resolved": "https://registry.npmjs.org/jest-resolve-dependencies/-/jest-resolve-dependencies-26.6.3.tgz",
-      "integrity": "sha512-pVwUjJkxbhe4RY8QEWzN3vns2kqyuldKpxlxJlzEYfKSvY6/bMvxoFrYYzUO1Gx28yKWN37qyV7rIoIp2h8fTg==",
-      "dev": true,
-      "requires": {
-        "@jest/types": "^26.6.2",
-        "jest-regex-util": "^26.0.0",
-        "jest-snapshot": "^26.6.2"
-      },
-      "dependencies": {
-        "@jest/types": {
-          "version": "26.6.2",
-          "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
-          "integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
-          "dev": true,
-          "requires": {
-            "@types/istanbul-lib-coverage": "^2.0.0",
-            "@types/istanbul-reports": "^3.0.0",
-            "@types/node": "*",
-            "@types/yargs": "^15.0.0",
-            "chalk": "^4.0.0"
-          }
-        },
-        "@types/istanbul-reports": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz",
-          "integrity": "sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==",
-          "dev": true,
-          "requires": {
-            "@types/istanbul-lib-report": "*"
-          }
-        },
-        "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,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
-          "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "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,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "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
-        },
-        "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
-        },
-        "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,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
-    "jest-runner": {
-      "version": "26.6.3",
-      "resolved": "https://registry.npmjs.org/jest-runner/-/jest-runner-26.6.3.tgz",
-      "integrity": "sha512-atgKpRHnaA2OvByG/HpGA4g6CSPS/1LK0jK3gATJAoptC1ojltpmVlYC3TYgdmGp+GLuhzpH30Gvs36szSL2JQ==",
-      "dev": true,
-      "requires": {
-        "@jest/console": "^26.6.2",
-        "@jest/environment": "^26.6.2",
-        "@jest/test-result": "^26.6.2",
-        "@jest/types": "^26.6.2",
-        "@types/node": "*",
-        "chalk": "^4.0.0",
-        "emittery": "^0.7.1",
-        "exit": "^0.1.2",
-        "graceful-fs": "^4.2.4",
-        "jest-config": "^26.6.3",
-        "jest-docblock": "^26.0.0",
-        "jest-haste-map": "^26.6.2",
-        "jest-leak-detector": "^26.6.2",
-        "jest-message-util": "^26.6.2",
-        "jest-resolve": "^26.6.2",
-        "jest-runtime": "^26.6.3",
-        "jest-util": "^26.6.2",
-        "jest-worker": "^26.6.2",
-        "source-map-support": "^0.5.6",
-        "throat": "^5.0.0"
-      },
-      "dependencies": {
-        "@jest/types": {
-          "version": "26.6.2",
-          "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
-          "integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
-          "dev": true,
-          "requires": {
-            "@types/istanbul-lib-coverage": "^2.0.0",
-            "@types/istanbul-reports": "^3.0.0",
-            "@types/node": "*",
-            "@types/yargs": "^15.0.0",
-            "chalk": "^4.0.0"
-          }
-        },
-        "@types/istanbul-reports": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz",
-          "integrity": "sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==",
-          "dev": true,
-          "requires": {
-            "@types/istanbul-lib-report": "*"
-          }
-        },
-        "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,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
-          "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "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,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "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
-        },
-        "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
-        },
-        "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,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
-    "jest-runtime": {
-      "version": "26.6.3",
-      "resolved": "https://registry.npmjs.org/jest-runtime/-/jest-runtime-26.6.3.tgz",
-      "integrity": "sha512-lrzyR3N8sacTAMeonbqpnSka1dHNux2uk0qqDXVkMv2c/A3wYnvQ4EXuI013Y6+gSKSCxdaczvf4HF0mVXHRdw==",
-      "dev": true,
-      "requires": {
-        "@jest/console": "^26.6.2",
-        "@jest/environment": "^26.6.2",
-        "@jest/fake-timers": "^26.6.2",
-        "@jest/globals": "^26.6.2",
-        "@jest/source-map": "^26.6.2",
-        "@jest/test-result": "^26.6.2",
-        "@jest/transform": "^26.6.2",
-        "@jest/types": "^26.6.2",
-        "@types/yargs": "^15.0.0",
-        "chalk": "^4.0.0",
-        "cjs-module-lexer": "^0.6.0",
-        "collect-v8-coverage": "^1.0.0",
-        "exit": "^0.1.2",
-        "glob": "^7.1.3",
-        "graceful-fs": "^4.2.4",
-        "jest-config": "^26.6.3",
-        "jest-haste-map": "^26.6.2",
-        "jest-message-util": "^26.6.2",
-        "jest-mock": "^26.6.2",
-        "jest-regex-util": "^26.0.0",
-        "jest-resolve": "^26.6.2",
-        "jest-snapshot": "^26.6.2",
-        "jest-util": "^26.6.2",
-        "jest-validate": "^26.6.2",
-        "slash": "^3.0.0",
-        "strip-bom": "^4.0.0",
-        "yargs": "^15.4.1"
-      },
-      "dependencies": {
-        "@jest/types": {
-          "version": "26.6.2",
-          "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
-          "integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
-          "dev": true,
-          "requires": {
-            "@types/istanbul-lib-coverage": "^2.0.0",
-            "@types/istanbul-reports": "^3.0.0",
-            "@types/node": "*",
-            "@types/yargs": "^15.0.0",
-            "chalk": "^4.0.0"
-          }
-        },
-        "@types/istanbul-reports": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz",
-          "integrity": "sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==",
-          "dev": true,
-          "requires": {
-            "@types/istanbul-lib-report": "*"
-          }
-        },
-        "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,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
-          "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "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,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "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
-        },
-        "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
-        },
-        "slash": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
-          "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
-          "dev": true
-        },
-        "strip-bom": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-4.0.0.tgz",
-          "integrity": "sha512-3xurFv5tEgii33Zi8Jtp55wEIILR9eh34FAW00PZf+JnSsTmV/ioewSgQl97JHvgjoRGwPShsWm+IdrxB35d0w==",
-          "dev": true
-        },
-        "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,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
-    "jest-serializer": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/jest-serializer/-/jest-serializer-26.6.2.tgz",
-      "integrity": "sha512-S5wqyz0DXnNJPd/xfIzZ5Xnp1HrJWBczg8mMfMpN78OJ5eDxXyf+Ygld9wX1DnUWbIbhM1YDY95NjR4CBXkb2g==",
-      "dev": true,
-      "requires": {
-        "@types/node": "*",
-        "graceful-fs": "^4.2.4"
-      }
-    },
-    "jest-snapshot": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/jest-snapshot/-/jest-snapshot-26.6.2.tgz",
-      "integrity": "sha512-OLhxz05EzUtsAmOMzuupt1lHYXCNib0ECyuZ/PZOx9TrZcC8vL0x+DUG3TL+GLX3yHG45e6YGjIm0XwDc3q3og==",
-      "dev": true,
-      "requires": {
-        "@babel/types": "^7.0.0",
-        "@jest/types": "^26.6.2",
-        "@types/babel__traverse": "^7.0.4",
-        "@types/prettier": "^2.0.0",
-        "chalk": "^4.0.0",
-        "expect": "^26.6.2",
-        "graceful-fs": "^4.2.4",
-        "jest-diff": "^26.6.2",
-        "jest-get-type": "^26.3.0",
-        "jest-haste-map": "^26.6.2",
-        "jest-matcher-utils": "^26.6.2",
-        "jest-message-util": "^26.6.2",
-        "jest-resolve": "^26.6.2",
-        "natural-compare": "^1.4.0",
-        "pretty-format": "^26.6.2",
-        "semver": "^7.3.2"
-      },
-      "dependencies": {
-        "@jest/types": {
-          "version": "26.6.2",
-          "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
-          "integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
-          "dev": true,
-          "requires": {
-            "@types/istanbul-lib-coverage": "^2.0.0",
-            "@types/istanbul-reports": "^3.0.0",
-            "@types/node": "*",
-            "@types/yargs": "^15.0.0",
-            "chalk": "^4.0.0"
-          }
-        },
-        "@types/istanbul-reports": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz",
-          "integrity": "sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==",
-          "dev": true,
-          "requires": {
-            "@types/istanbul-lib-report": "*"
-          }
-        },
-        "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,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
-          "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "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,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "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
-        },
-        "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
-        },
-        "pretty-format": {
-          "version": "26.6.2",
-          "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-26.6.2.tgz",
-          "integrity": "sha512-7AeGuCYNGmycyQbCqd/3PWH4eOoX/OiCa0uphp57NVTeAGdJGaAliecxwBDHYQCIvrW7aDBZCYeNTP/WX69mkg==",
-          "dev": true,
-          "requires": {
-            "@jest/types": "^26.6.2",
-            "ansi-regex": "^5.0.0",
-            "ansi-styles": "^4.0.0",
-            "react-is": "^17.0.1"
-          }
-        },
-        "react-is": {
-          "version": "17.0.2",
-          "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-          "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
-          "dev": true
-        },
-        "semver": {
-          "version": "7.3.5",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
-          "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==",
-          "dev": true,
-          "requires": {
-            "lru-cache": "^6.0.0"
-          }
-        },
-        "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,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
-    "jest-util": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-26.6.2.tgz",
-      "integrity": "sha512-MDW0fKfsn0OI7MS7Euz6h8HNDXVQ0gaM9uW6RjfDmd1DAFcaxX9OqIakHIqhbnmF08Cf2DLDG+ulq8YQQ0Lp0Q==",
-      "dev": true,
-      "requires": {
-        "@jest/types": "^26.6.2",
-        "@types/node": "*",
-        "chalk": "^4.0.0",
-        "graceful-fs": "^4.2.4",
-        "is-ci": "^2.0.0",
-        "micromatch": "^4.0.2"
-      },
-      "dependencies": {
-        "@jest/types": {
-          "version": "26.6.2",
-          "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
-          "integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
-          "dev": true,
-          "requires": {
-            "@types/istanbul-lib-coverage": "^2.0.0",
-            "@types/istanbul-reports": "^3.0.0",
-            "@types/node": "*",
-            "@types/yargs": "^15.0.0",
-            "chalk": "^4.0.0"
-          }
-        },
-        "@types/istanbul-reports": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz",
-          "integrity": "sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==",
-          "dev": true,
-          "requires": {
-            "@types/istanbul-lib-report": "*"
-          }
-        },
-        "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,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "braces": {
-          "version": "3.0.2",
-          "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-          "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-          "dev": true,
-          "requires": {
-            "fill-range": "^7.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
-          "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "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,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "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
-        },
-        "fill-range": {
-          "version": "7.0.1",
-          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-          "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-          "dev": true,
-          "requires": {
-            "to-regex-range": "^5.0.1"
-          }
-        },
-        "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
-        },
-        "is-number": {
-          "version": "7.0.0",
-          "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-          "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-          "dev": true
-        },
-        "micromatch": {
-          "version": "4.0.4",
-          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz",
-          "integrity": "sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==",
-          "dev": true,
-          "requires": {
-            "braces": "^3.0.1",
-            "picomatch": "^2.2.3"
-          }
-        },
-        "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,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        },
-        "to-regex-range": {
-          "version": "5.0.1",
-          "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-          "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-          "dev": true,
-          "requires": {
-            "is-number": "^7.0.0"
-          }
-        }
-      }
-    },
-    "jest-validate": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/jest-validate/-/jest-validate-26.6.2.tgz",
-      "integrity": "sha512-NEYZ9Aeyj0i5rQqbq+tpIOom0YS1u2MVu6+euBsvpgIme+FOfRmoC4R5p0JiAUpaFvFy24xgrpMknarR/93XjQ==",
-      "dev": true,
-      "requires": {
-        "@jest/types": "^26.6.2",
-        "camelcase": "^6.0.0",
-        "chalk": "^4.0.0",
-        "jest-get-type": "^26.3.0",
-        "leven": "^3.1.0",
-        "pretty-format": "^26.6.2"
-      },
-      "dependencies": {
-        "@jest/types": {
-          "version": "26.6.2",
-          "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
-          "integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
-          "dev": true,
-          "requires": {
-            "@types/istanbul-lib-coverage": "^2.0.0",
-            "@types/istanbul-reports": "^3.0.0",
-            "@types/node": "*",
-            "@types/yargs": "^15.0.0",
-            "chalk": "^4.0.0"
-          }
-        },
-        "@types/istanbul-reports": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz",
-          "integrity": "sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==",
-          "dev": true,
-          "requires": {
-            "@types/istanbul-lib-report": "*"
-          }
-        },
-        "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,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
-          "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "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,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "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
-        },
-        "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
-        },
-        "pretty-format": {
-          "version": "26.6.2",
-          "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-26.6.2.tgz",
-          "integrity": "sha512-7AeGuCYNGmycyQbCqd/3PWH4eOoX/OiCa0uphp57NVTeAGdJGaAliecxwBDHYQCIvrW7aDBZCYeNTP/WX69mkg==",
-          "dev": true,
-          "requires": {
-            "@jest/types": "^26.6.2",
-            "ansi-regex": "^5.0.0",
-            "ansi-styles": "^4.0.0",
-            "react-is": "^17.0.1"
-          }
-        },
-        "react-is": {
-          "version": "17.0.2",
-          "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
-          "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
-          "dev": true
-        },
-        "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,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
-    "jest-watcher": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/jest-watcher/-/jest-watcher-26.6.2.tgz",
-      "integrity": "sha512-WKJob0P/Em2csiVthsI68p6aGKTIcsfjH9Gsx1f0A3Italz43e3ho0geSAVsmj09RWOELP1AZ/DXyJgOgDKxXQ==",
-      "dev": true,
-      "requires": {
-        "@jest/test-result": "^26.6.2",
-        "@jest/types": "^26.6.2",
-        "@types/node": "*",
-        "ansi-escapes": "^4.2.1",
-        "chalk": "^4.0.0",
-        "jest-util": "^26.6.2",
-        "string-length": "^4.0.1"
-      },
-      "dependencies": {
-        "@jest/types": {
-          "version": "26.6.2",
-          "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
-          "integrity": "sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==",
-          "dev": true,
-          "requires": {
-            "@types/istanbul-lib-coverage": "^2.0.0",
-            "@types/istanbul-reports": "^3.0.0",
-            "@types/node": "*",
-            "@types/yargs": "^15.0.0",
-            "chalk": "^4.0.0"
-          }
-        },
-        "@types/istanbul-reports": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.1.tgz",
-          "integrity": "sha512-c3mAZEuK0lvBp8tmuL74XRKn1+y2dcwOUpH7x4WrF6gk1GIgiluDRgMYQtw2OFcBvAJWlt6ASU3tSqxp0Uu0Aw==",
-          "dev": true,
-          "requires": {
-            "@types/istanbul-lib-report": "*"
-          }
-        },
-        "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,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
-          "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "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,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "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
-        },
-        "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
-        },
-        "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,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
-    "jest-worker": {
-      "version": "26.6.2",
-      "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-26.6.2.tgz",
-      "integrity": "sha512-KWYVV1c4i+jbMpaBC+U++4Va0cp8OisU185o73T1vo99hqi7w8tSJfUXYswwqqrjzwxa6KpRK54WhPvwf5w6PQ==",
-      "dev": true,
-      "requires": {
-        "@types/node": "*",
-        "merge-stream": "^2.0.0",
-        "supports-color": "^7.0.0"
-      },
-      "dependencies": {
-        "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
-        },
-        "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,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
-    "js-tokens": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
-      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
-    },
-    "js-yaml": {
-      "version": "3.14.0",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.0.tgz",
-      "integrity": "sha512-/4IbIeHcD9VMHFqDR/gQ7EdZdLimOvW2DdcxFjdyyZ9NsbS+ccrXqVWDtab/lRl5AlUqmpBx8EhPaWR+OtY17A==",
-      "dev": true,
-      "requires": {
-        "argparse": "^1.0.7",
-        "esprima": "^4.0.0"
-      }
-    },
-    "jsbn": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",
-      "integrity": "sha1-peZUwuWi3rXyAdls77yoDA7y9RM=",
-      "dev": true
-    },
-    "jsdom": {
-      "version": "16.6.0",
-      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-16.6.0.tgz",
-      "integrity": "sha512-Ty1vmF4NHJkolaEmdjtxTfSfkdb8Ywarwf63f+F8/mDD1uLSSWDxDuMiZxiPhwunLrn9LOSVItWj4bLYsLN3Dg==",
-      "dev": true,
-      "requires": {
-        "abab": "^2.0.5",
-        "acorn": "^8.2.4",
-        "acorn-globals": "^6.0.0",
-        "cssom": "^0.4.4",
-        "cssstyle": "^2.3.0",
-        "data-urls": "^2.0.0",
-        "decimal.js": "^10.2.1",
-        "domexception": "^2.0.1",
-        "escodegen": "^2.0.0",
-        "form-data": "^3.0.0",
-        "html-encoding-sniffer": "^2.0.1",
-        "http-proxy-agent": "^4.0.1",
-        "https-proxy-agent": "^5.0.0",
-        "is-potential-custom-element-name": "^1.0.1",
-        "nwsapi": "^2.2.0",
-        "parse5": "6.0.1",
-        "saxes": "^5.0.1",
-        "symbol-tree": "^3.2.4",
-        "tough-cookie": "^4.0.0",
-        "w3c-hr-time": "^1.0.2",
-        "w3c-xmlserializer": "^2.0.0",
-        "webidl-conversions": "^6.1.0",
-        "whatwg-encoding": "^1.0.5",
-        "whatwg-mimetype": "^2.3.0",
-        "whatwg-url": "^8.5.0",
-        "ws": "^7.4.5",
-        "xml-name-validator": "^3.0.0"
-      },
-      "dependencies": {
-        "abab": {
-          "version": "2.0.5",
-          "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.5.tgz",
-          "integrity": "sha512-9IK9EadsbHo6jLWIpxpR6pL0sazTXV6+SQv25ZB+F7Bj9mJNaOc4nCRabwd5M/JwmUa8idz6Eci6eKfJryPs6Q==",
-          "dev": true
-        },
-        "acorn": {
-          "version": "8.4.1",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.4.1.tgz",
-          "integrity": "sha512-asabaBSkEKosYKMITunzX177CXxQ4Q8BSSzMTKD+FefUhipQC70gfW5SiUDhYQ3vk8G+81HqQk7Fv9OXwwn9KA==",
-          "dev": true
-        },
-        "acorn-globals": {
-          "version": "6.0.0",
-          "resolved": "https://registry.npmjs.org/acorn-globals/-/acorn-globals-6.0.0.tgz",
-          "integrity": "sha512-ZQl7LOWaF5ePqqcX4hLuv/bLXYQNfNWw2c0/yX/TsPRKamzHcTGQnlCjHT3TsmkOUVEPS3crCxiPfdzE/Trlhg==",
-          "dev": true,
-          "requires": {
-            "acorn": "^7.1.1",
-            "acorn-walk": "^7.1.1"
-          },
-          "dependencies": {
-            "acorn": {
-              "version": "7.4.1",
-              "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
-              "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
-              "dev": true
-            }
-          }
-        },
-        "acorn-walk": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
-          "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==",
-          "dev": true
-        },
-        "data-urls": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-2.0.0.tgz",
-          "integrity": "sha512-X5eWTSXO/BJmpdIKCRuKUgSCgAN0OwliVK3yPKbwIWU1Tdw5BRajxlzMidvh+gwko9AfQ9zIj52pzF91Q3YAvQ==",
-          "dev": true,
-          "requires": {
-            "abab": "^2.0.3",
-            "whatwg-mimetype": "^2.3.0",
-            "whatwg-url": "^8.0.0"
-          }
-        },
-        "domexception": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/domexception/-/domexception-2.0.1.tgz",
-          "integrity": "sha512-yxJ2mFy/sibVQlu5qHjOkf9J3K6zgmCxgJ94u2EdvDOV09H+32LtRswEcUsmUWN72pVLOEnTSRaIVVzVQgS0dg==",
-          "dev": true,
-          "requires": {
-            "webidl-conversions": "^5.0.0"
-          },
-          "dependencies": {
-            "webidl-conversions": {
-              "version": "5.0.0",
-              "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-5.0.0.tgz",
-              "integrity": "sha512-VlZwKPCkYKxQgeSbH5EyngOmRp7Ww7I9rQLERETtf5ofd9pGeswWiOtogpEO850jziPRarreGxn5QIiTqpb2wA==",
-              "dev": true
-            }
-          }
-        },
-        "escodegen": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-2.0.0.tgz",
-          "integrity": "sha512-mmHKys/C8BFUGI+MAWNcSYoORYLMdPzjrknd2Vc+bUsjN5bXcr8EhrNB+UTqfL1y3I9c4fw2ihgtMPQLBRiQxw==",
-          "dev": true,
-          "requires": {
-            "esprima": "^4.0.1",
-            "estraverse": "^5.2.0",
-            "esutils": "^2.0.2",
-            "optionator": "^0.8.1",
-            "source-map": "~0.6.1"
-          }
-        },
-        "estraverse": {
-          "version": "5.2.0",
-          "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.2.0.tgz",
-          "integrity": "sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ==",
-          "dev": true
-        },
-        "form-data": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/form-data/-/form-data-3.0.1.tgz",
-          "integrity": "sha512-RHkBKtLWUVwd7SqRIvCZMEvAMoGUp0XU+seQiZejj0COz3RI3hWP4sCv3gZWWLjJTd7rGwcsF5eKZGii0r/hbg==",
-          "dev": true,
-          "requires": {
-            "asynckit": "^0.4.0",
-            "combined-stream": "^1.0.8",
-            "mime-types": "^2.1.12"
-          }
-        },
-        "html-encoding-sniffer": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz",
-          "integrity": "sha512-D5JbOMBIR/TVZkubHT+OyT2705QvogUW4IBn6nHd756OwieSF9aDYFj4dv6HHEVGYbHaLETa3WggZYWWMyy3ZQ==",
-          "dev": true,
-          "requires": {
-            "whatwg-encoding": "^1.0.5"
-          }
-        },
-        "https-proxy-agent": {
-          "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.0.tgz",
-          "integrity": "sha512-EkYm5BcKUGiduxzSt3Eppko+PiNWNEpa4ySk9vTC6wDsQJW9rHSa+UhGNJoRYp7bz6Ht1eaRIa6QaJqO5rCFbA==",
-          "dev": true,
-          "requires": {
-            "agent-base": "6",
-            "debug": "4"
-          }
-        },
-        "tr46": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/tr46/-/tr46-2.1.0.tgz",
-          "integrity": "sha512-15Ih7phfcdP5YxqiB+iDtLoaTz4Nd35+IiAv0kQ5FNKHzXgdWqPoTIqEDDJmXceQt4JZk6lVPT8lnDlPpGDppw==",
-          "dev": true,
-          "requires": {
-            "punycode": "^2.1.1"
-          }
-        },
-        "webidl-conversions": {
-          "version": "6.1.0",
-          "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-6.1.0.tgz",
-          "integrity": "sha512-qBIvFLGiBpLjfwmYAaHPXsn+ho5xZnGvyGvsarywGNc8VyQJUMHJ8OBKGGrPER0okBeMDaan4mNBlgBROxuI8w==",
-          "dev": true
-        },
-        "whatwg-url": {
-          "version": "8.7.0",
-          "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-8.7.0.tgz",
-          "integrity": "sha512-gAojqb/m9Q8a5IV96E3fHJM70AzCkgt4uXYX2O7EmuyOnLrViCQlsEBmF9UQIu3/aeAIp2U17rtbpZWNntQqdg==",
-          "dev": true,
-          "requires": {
-            "lodash": "^4.7.0",
-            "tr46": "^2.1.0",
-            "webidl-conversions": "^6.1.0"
-          }
-        }
-      }
-    },
-    "jsesc": {
-      "version": "2.5.2",
-      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
-      "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
-      "dev": true
-    },
-    "json-buffer": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.0.tgz",
-      "integrity": "sha1-Wx85evx11ne96Lz8Dkfh+aPZqJg=",
-      "dev": true,
-      "optional": true
-    },
-    "json-parse-better-errors": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz",
-      "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==",
-      "dev": true
-    },
-    "json-parse-even-better-errors": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
-      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
-      "dev": true
-    },
-    "json-schema": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.2.3.tgz",
-      "integrity": "sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM=",
-      "dev": true
-    },
-    "json-schema-traverse": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
-      "dev": true
-    },
-    "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",
-      "integrity": "sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=",
-      "dev": true
-    },
-    "json-stringify-safe": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
-      "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=",
-      "dev": true
-    },
-    "json5": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/json5/-/json5-2.1.3.tgz",
-      "integrity": "sha512-KXPvOm8K9IJKFM0bmdn8QXh7udDh1g/giieX0NLCaMnb4hEiVFqnop2ImTXCc5e0/oHz3LTqmHGtExn5hfMkOA==",
-      "dev": true,
-      "requires": {
-        "minimist": "^1.2.5"
-      }
-    },
-    "jsonfile": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
-      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
-      "dev": true,
-      "requires": {
-        "graceful-fs": "^4.1.6",
-        "universalify": "^2.0.0"
-      }
-    },
-    "jsprim": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.1.tgz",
-      "integrity": "sha1-MT5mvB5cwG5Di8G3SZwuXFastqI=",
-      "dev": true,
-      "requires": {
-        "assert-plus": "1.0.0",
-        "extsprintf": "1.3.0",
-        "json-schema": "0.2.3",
-        "verror": "1.10.0"
-      }
-    },
-    "jsx-ast-utils": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-2.4.1.tgz",
-      "integrity": "sha512-z1xSldJ6imESSzOjd3NNkieVJKRlKYSOtMG8SFyCj2FIrvSaSuli/WjpBkEzCBoR9bYYYFgqJw61Xhu7Lcgk+w==",
-      "dev": true,
-      "requires": {
-        "array-includes": "^3.1.1",
-        "object.assign": "^4.1.0"
-      }
-    },
-    "junk": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/junk/-/junk-3.1.0.tgz",
-      "integrity": "sha512-pBxcB3LFc8QVgdggvZWyeys+hnrNWg4OcZIU/1X59k5jQdLBlCsYGRQaz234SqoRLTCgMH00fY0xRJH+F9METQ==",
-      "dev": true
-    },
-    "jwt-decode": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-2.2.0.tgz",
-      "integrity": "sha1-fYa9VmefWM5qhHBKZX3TkruoGnk="
-    },
-    "keyv": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/keyv/-/keyv-3.0.0.tgz",
-      "integrity": "sha512-eguHnq22OE3uVoSYG0LVWNP+4ppamWr9+zWBe1bsNcovIMy6huUJFPgy4mGwCd/rnl3vOLGW1MTlu4c57CT1xA==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "json-buffer": "3.0.0"
-      }
-    },
-    "killable": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",
-      "integrity": "sha512-LzqtLKlUwirEUyl/nicirVmNiPvYs7l5n8wOPP7fyJVpUPkvCnW/vuiXGpylGUlnPDnB7311rARzAt3Mhswpjg==",
-      "dev": true
-    },
-    "kind-of": {
-      "version": "6.0.3",
-      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
-      "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
-      "dev": true
-    },
-    "kleur": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz",
-      "integrity": "sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==",
-      "dev": true
-    },
-    "klona": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.4.tgz",
-      "integrity": "sha512-ZRbnvdg/NxqzC7L9Uyqzf4psi1OM4Cuc+sJAkQPjO6XkQIJTNbfK2Rsmbw8fx1p2mkZdp2FZYo2+LwXYY/uwIA==",
-      "dev": true
-    },
-    "left-pad": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/left-pad/-/left-pad-1.3.0.tgz",
-      "integrity": "sha512-XI5MPzVNApjAyhQzphX8BkmKsKUxD4LdyK24iZeQGinBN9yTQT3bFlCBy/aVx2HrNcqQGsdot8ghrjyrvMCoEA==",
-      "dev": true
-    },
-    "leven": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
-      "integrity": "sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==",
-      "dev": true
-    },
-    "levenary": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/levenary/-/levenary-1.1.1.tgz",
-      "integrity": "sha512-mkAdOIt79FD6irqjYSs4rdbnlT5vRonMEvBVPVb3XmevfS8kgRXwfes0dhPdEtzTWD/1eNE/Bm/G1iRt6DcnQQ==",
-      "dev": true,
-      "requires": {
-        "leven": "^3.1.0"
-      }
-    },
-    "levn": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/levn/-/levn-0.3.0.tgz",
-      "integrity": "sha1-OwmSTt+fCDwEkP3UwLxEIeBHZO4=",
-      "dev": true,
-      "requires": {
-        "prelude-ls": "~1.1.2",
-        "type-check": "~0.3.2"
-      }
-    },
-    "lie": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/lie/-/lie-3.1.1.tgz",
-      "integrity": "sha1-mkNrLMd0bKWd56QfpGmz77dr2H4=",
-      "requires": {
-        "immediate": "~3.0.5"
-      }
-    },
-    "lines-and-columns": {
-      "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.1.6.tgz",
-      "integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=",
-      "dev": true
-    },
-    "load-json-file": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-2.0.0.tgz",
-      "integrity": "sha1-eUfkIUmvgNaWy/eXvKq8/h/inKg=",
-      "dev": true,
-      "requires": {
-        "graceful-fs": "^4.1.2",
-        "parse-json": "^2.2.0",
-        "pify": "^2.0.0",
-        "strip-bom": "^3.0.0"
-      },
-      "dependencies": {
-        "parse-json": {
-          "version": "2.2.0",
-          "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-2.2.0.tgz",
-          "integrity": "sha1-9ID0BDTvgHQfhGkJn43qGPVaTck=",
-          "dev": true,
-          "requires": {
-            "error-ex": "^1.2.0"
-          }
-        },
-        "pify": {
-          "version": "2.3.0",
-          "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
-          "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
-          "dev": true
-        }
-      }
-    },
-    "loader-runner": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.2.0.tgz",
-      "integrity": "sha512-92+huvxMvYlMzMt0iIOukcwYBFpkYJdpl2xsZ7LrlayO7E8SOv+JJUEK17B/dJIHAOLMfh2dZZ/Y18WgmGtYNw==",
-      "dev": true
-    },
-    "loader-utils": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
-      "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
-      "dev": true,
-      "requires": {
-        "big.js": "^5.2.2",
-        "emojis-list": "^3.0.0",
-        "json5": "^2.1.2"
-      }
-    },
-    "localforage": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/localforage/-/localforage-1.9.0.tgz",
-      "integrity": "sha512-rR1oyNrKulpe+VM9cYmcFn6tsHuokyVHFaCM3+osEmxaHTbEk8oQu6eGDfS6DQLWi/N67XRmB8ECG37OES368g==",
-      "requires": {
-        "lie": "3.1.1"
-      }
-    },
-    "localforage-memoryStorageDriver": {
-      "version": "0.9.2",
-      "resolved": "https://registry.npmjs.org/localforage-memoryStorageDriver/-/localforage-memoryStorageDriver-0.9.2.tgz",
-      "integrity": "sha1-Lg9/8qyw6f9egsUsni6z1juZjTA=",
-      "requires": {
-        "localforage": ">=1.4.0"
-      }
-    },
-    "locate-path": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
-      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
-      "dev": true,
-      "requires": {
-        "p-locate": "^4.1.0"
-      }
-    },
-    "lodash": {
-      "version": "4.17.21",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
-    },
-    "lodash-es": {
-      "version": "4.17.20",
-      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.20.tgz",
-      "integrity": "sha512-JD1COMZsq8maT6mnuz1UMV0jvYD0E0aUsSOdrr1/nAG3dhqQXwRRgeW0cSqH1U43INKcqxaiVIQNOUDld7gRDA=="
-    },
-    "lodash.camelcase": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
-      "integrity": "sha1-soqmKIorn8ZRA1x3EfZathkDMaY="
-    },
-    "lodash.debounce": {
-      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
-      "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168=",
-      "dev": true
-    },
-    "lodash.difference": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/lodash.difference/-/lodash.difference-4.5.0.tgz",
-      "integrity": "sha1-nMtOUF1Ia5FlE0V3KIWi3yf9AXw=",
-      "dev": true
-    },
-    "lodash.memoize": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
-      "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4="
-    },
-    "lodash.merge": {
-      "version": "4.6.2",
-      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
-      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="
-    },
-    "lodash.pad": {
-      "version": "4.5.1",
-      "resolved": "https://registry.npmjs.org/lodash.pad/-/lodash.pad-4.5.1.tgz",
-      "integrity": "sha1-QzCUmoM6fI2iLMIPaibE1Z3runA=",
-      "dev": true
-    },
-    "lodash.padend": {
-      "version": "4.6.1",
-      "resolved": "https://registry.npmjs.org/lodash.padend/-/lodash.padend-4.6.1.tgz",
-      "integrity": "sha1-U8y6BH0G4VjTEfRdpiX05J5vFm4=",
-      "dev": true
-    },
-    "lodash.padstart": {
-      "version": "4.6.1",
-      "resolved": "https://registry.npmjs.org/lodash.padstart/-/lodash.padstart-4.6.1.tgz",
-      "integrity": "sha1-0uPuv/DZ05rVD1y9G1KnvOa7YRs=",
-      "dev": true
-    },
-    "lodash.snakecase": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/lodash.snakecase/-/lodash.snakecase-4.1.1.tgz",
-      "integrity": "sha1-OdcUo1NXFHg3rv1ktdy7Fr7Nj40="
-    },
-    "lodash.sortby": {
-      "version": "4.7.0",
-      "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
-      "integrity": "sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=",
-      "dev": true
-    },
-    "lodash.uniq": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
-      "integrity": "sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=",
-      "dev": true
-    },
-    "lodash.uniqby": {
-      "version": "4.7.0",
-      "resolved": "https://registry.npmjs.org/lodash.uniqby/-/lodash.uniqby-4.7.0.tgz",
-      "integrity": "sha1-2ZwHpmnp5tJOE2Lf4mbGdhavEwI="
-    },
-    "logalot": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/logalot/-/logalot-2.1.0.tgz",
-      "integrity": "sha1-X46MkNME7fElMJUaVVSruMXj9VI=",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "figures": "^1.3.5",
-        "squeak": "^1.0.0"
-      },
-      "dependencies": {
-        "figures": {
-          "version": "1.7.0",
-          "resolved": "https://registry.npmjs.org/figures/-/figures-1.7.0.tgz",
-          "integrity": "sha1-y+Hjr/zxzUS4DK3+0o3Hk6lwHS4=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "escape-string-regexp": "^1.0.5",
-            "object-assign": "^4.1.0"
-          }
-        }
-      }
-    },
-    "longest": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/longest/-/longest-1.0.1.tgz",
-      "integrity": "sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc=",
-      "dev": true,
-      "optional": true
-    },
-    "loose-envify": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
-      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
-      "requires": {
-        "js-tokens": "^3.0.0 || ^4.0.0"
-      }
-    },
-    "loud-rejection": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/loud-rejection/-/loud-rejection-1.6.0.tgz",
-      "integrity": "sha1-W0b4AUft7leIcPCG0Eghz5mOVR8=",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "currently-unhandled": "^0.4.1",
-        "signal-exit": "^3.0.0"
-      }
-    },
-    "lower-case": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
-      "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
-      "dev": true,
-      "requires": {
-        "tslib": "^2.0.3"
-      },
-      "dependencies": {
-        "tslib": {
-          "version": "2.3.0",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
-          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
-          "dev": true
-        }
-      }
-    },
-    "lowercase-keys": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-1.0.1.tgz",
-      "integrity": "sha512-G2Lj61tXDnVFFOi8VZds+SoQjtQC3dgokKdDG2mTm1tx4m50NUHBOZSBwQQHyy0V12A0JTG4icfZQH+xPyh8VA==",
-      "dev": true,
-      "optional": true
-    },
-    "lpad-align": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/lpad-align/-/lpad-align-1.1.2.tgz",
-      "integrity": "sha1-IfYArBwwlcPG5JfuZyce4ISB/p4=",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "get-stdin": "^4.0.1",
-        "indent-string": "^2.1.0",
-        "longest": "^1.0.0",
-        "meow": "^3.3.0"
-      }
-    },
-    "lru-cache": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-      "dev": true,
-      "requires": {
-        "yallist": "^4.0.0"
-      }
-    },
-    "mailto-link": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/mailto-link/-/mailto-link-1.0.0.tgz",
-      "integrity": "sha1-9Sqp/MEXPLOAkV3xZNsxSRiRUl0=",
-      "requires": {
-        "assert-ok": "~1.0.0",
-        "cast-array": "~1.0.0",
-        "object-filter": "~1.0.2",
-        "query-string": "~2.4.1"
-      }
-    },
-    "make-dir": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
-      "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
-      "dev": true,
-      "requires": {
-        "pify": "^4.0.1",
-        "semver": "^5.6.0"
-      }
-    },
-    "makeerror": {
-      "version": "1.0.11",
-      "resolved": "https://registry.npmjs.org/makeerror/-/makeerror-1.0.11.tgz",
-      "integrity": "sha1-4BpckQnyr3lmDk6LlYd5AYT1qWw=",
-      "dev": true,
-      "requires": {
-        "tmpl": "1.0.x"
-      }
-    },
-    "map-age-cleaner": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/map-age-cleaner/-/map-age-cleaner-0.1.3.tgz",
-      "integrity": "sha512-bJzx6nMoP6PDLPBFmg7+xRKeFZvFboMrGlxmNj9ClvX53KrmvM5bXFXEWjbz4cz1AFn+jWJ9z/DJSz7hrs0w3w==",
-      "dev": true,
-      "requires": {
-        "p-defer": "^1.0.0"
-      }
-    },
-    "map-cache": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/map-cache/-/map-cache-0.2.2.tgz",
-      "integrity": "sha1-wyq9C9ZSXZsFFkW7TyasXcmKDb8=",
-      "dev": true
-    },
-    "map-obj": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz",
-      "integrity": "sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0=",
-      "dev": true,
-      "optional": true
-    },
-    "map-visit": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/map-visit/-/map-visit-1.0.0.tgz",
-      "integrity": "sha1-7Nyo8TFE5mDxtb1B8S80edmN+48=",
-      "dev": true,
-      "requires": {
-        "object-visit": "^1.0.0"
-      }
-    },
-    "matchmediaquery": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/matchmediaquery/-/matchmediaquery-0.3.1.tgz",
-      "integrity": "sha512-Hlk20WQHRIm9EE9luN1kjRjYXAQToHOIAHPJn9buxBwuhfTHoKUcX+lXBbxc85DVQfXYbEQ4HcwQdd128E3qHQ==",
-      "requires": {
-        "css-mediaquery": "^0.1.2"
-      }
-    },
-    "md5": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/md5/-/md5-2.3.0.tgz",
-      "integrity": "sha512-T1GITYmFaKuO91vxyoQMFETst+O71VUPEU3ze5GNzDm0OWdP8v1ziTaAEPUr/3kLsY3Sftgz242A1SetQiDL7g==",
-      "requires": {
-        "charenc": "0.0.2",
-        "crypt": "0.0.2",
-        "is-buffer": "~1.1.6"
-      },
-      "dependencies": {
-        "is-buffer": {
-          "version": "1.1.6",
-          "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
-          "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w=="
-        }
-      }
-    },
-    "mdn-data": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz",
-      "integrity": "sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==",
-      "dev": true
-    },
-    "media-typer": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
-      "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=",
-      "dev": true
-    },
-    "mem": {
-      "version": "8.1.1",
-      "resolved": "https://registry.npmjs.org/mem/-/mem-8.1.1.tgz",
-      "integrity": "sha512-qFCFUDs7U3b8mBDPyz5EToEKoAkgCzqquIgi9nkkR9bixxOVOre+09lbuH7+9Kn2NFpm56M3GUWVbU2hQgdACA==",
-      "dev": true,
-      "requires": {
-        "map-age-cleaner": "^0.1.3",
-        "mimic-fn": "^3.1.0"
-      },
-      "dependencies": {
-        "mimic-fn": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-3.1.0.tgz",
-          "integrity": "sha512-Ysbi9uYW9hFyfrThdDEQuykN4Ey6BuwPD2kpI5ES/nFTDn/98yxYNLZJcgUAKPT/mcrLLKaGzJR9YVxJrIdASQ==",
-          "dev": true
-        }
-      }
-    },
-    "memfs": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/memfs/-/memfs-3.2.2.tgz",
-      "integrity": "sha512-RE0CwmIM3CEvpcdK3rZ19BC4E6hv9kADkMN5rPduRak58cNArWLi/9jFLsa4rhsjfVxMP3v0jO7FHXq7SvFY5Q==",
-      "dev": true,
-      "requires": {
-        "fs-monkey": "1.0.3"
-      }
-    },
-    "meow": {
-      "version": "3.7.0",
-      "resolved": "https://registry.npmjs.org/meow/-/meow-3.7.0.tgz",
-      "integrity": "sha1-cstmi0JSKCkKu/qFaJJYcwioAfs=",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "camelcase-keys": "^2.0.0",
-        "decamelize": "^1.1.2",
-        "loud-rejection": "^1.0.0",
-        "map-obj": "^1.0.1",
-        "minimist": "^1.1.3",
-        "normalize-package-data": "^2.3.4",
-        "object-assign": "^4.0.1",
-        "read-pkg-up": "^1.0.1",
-        "redent": "^1.0.0",
-        "trim-newlines": "^1.0.0"
-      },
-      "dependencies": {
-        "find-up": {
-          "version": "1.1.2",
-          "resolved": "https://registry.npmjs.org/find-up/-/find-up-1.1.2.tgz",
-          "integrity": "sha1-ay6YIrGizgpgq2TWEOzK1TyyTQ8=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "path-exists": "^2.0.0",
-            "pinkie-promise": "^2.0.0"
-          }
-        },
-        "load-json-file": {
-          "version": "1.1.0",
-          "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
-          "integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "graceful-fs": "^4.1.2",
-            "parse-json": "^2.2.0",
-            "pify": "^2.0.0",
-            "pinkie-promise": "^2.0.0",
-            "strip-bom": "^2.0.0"
-          }
-        },
-        "parse-json": {
-          "version": "2.2.0",
-          "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-2.2.0.tgz",
-          "integrity": "sha1-9ID0BDTvgHQfhGkJn43qGPVaTck=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "error-ex": "^1.2.0"
-          }
-        },
-        "path-exists": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-2.1.0.tgz",
-          "integrity": "sha1-D+tsZPD8UY2adU3V77YscCJ2H0s=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "pinkie-promise": "^2.0.0"
-          }
-        },
-        "path-type": {
-          "version": "1.1.0",
-          "resolved": "https://registry.npmjs.org/path-type/-/path-type-1.1.0.tgz",
-          "integrity": "sha1-WcRPfuSR2nBNpBXaWkBwuk+P5EE=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "graceful-fs": "^4.1.2",
-            "pify": "^2.0.0",
-            "pinkie-promise": "^2.0.0"
-          }
-        },
-        "pify": {
-          "version": "2.3.0",
-          "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
-          "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
-          "dev": true,
-          "optional": true
-        },
-        "read-pkg": {
-          "version": "1.1.0",
-          "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
-          "integrity": "sha1-9f+qXs0pyzHAR0vKfXVra7KePyg=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "load-json-file": "^1.0.0",
-            "normalize-package-data": "^2.3.2",
-            "path-type": "^1.0.0"
-          }
-        },
-        "read-pkg-up": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-1.0.1.tgz",
-          "integrity": "sha1-nWPBMnbAZZGNV/ACpX9AobZD+wI=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "find-up": "^1.0.0",
-            "read-pkg": "^1.0.0"
-          }
-        },
-        "strip-bom": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-2.0.0.tgz",
-          "integrity": "sha1-YhmoVhZSBJHzV4i9vxRHqZx+aw4=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "is-utf8": "^0.2.0"
-          }
-        }
-      }
-    },
-    "merge-descriptors": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
-      "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E=",
-      "dev": true
-    },
-    "merge-stream": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
-      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
-      "dev": true
-    },
-    "merge2": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
-      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
-      "dev": true
-    },
-    "methods": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
-      "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=",
-      "dev": true
-    },
-    "microevent.ts": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/microevent.ts/-/microevent.ts-0.1.1.tgz",
-      "integrity": "sha512-jo1OfR4TaEwd5HOrt5+tAZ9mqT4jmpNAusXtyfNzqVm9uiSYFZlKM1wYL4oU7azZW/PxQW53wM0S6OR1JHNa2g==",
-      "dev": true
-    },
-    "micromatch": {
-      "version": "3.1.10",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz",
-      "integrity": "sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==",
-      "dev": true,
-      "requires": {
-        "arr-diff": "^4.0.0",
-        "array-unique": "^0.3.2",
-        "braces": "^2.3.1",
-        "define-property": "^2.0.2",
-        "extend-shallow": "^3.0.2",
-        "extglob": "^2.0.4",
-        "fragment-cache": "^0.2.1",
-        "kind-of": "^6.0.2",
-        "nanomatch": "^1.2.9",
-        "object.pick": "^1.3.0",
-        "regex-not": "^1.0.0",
-        "snapdragon": "^0.8.1",
-        "to-regex": "^3.0.2"
-      }
-    },
-    "micromist": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/micromist/-/micromist-1.1.0.tgz",
-      "integrity": "sha512-+CQ76pabE9egniSEdmDuH+j2cYyIBKP97kujG8ZLZyLCRq5ExwtIy4DPHPFrq4jVbhMRBnyjuH50KU9Ohs8QCg==",
-      "dev": true,
-      "requires": {
-        "lodash.camelcase": "^4.3.0"
-      }
-    },
-    "mime": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
-      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
-      "dev": true
-    },
-    "mime-db": {
-      "version": "1.44.0",
-      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.44.0.tgz",
-      "integrity": "sha512-/NOTfLrsPBVeH7YtFPgsVWveuL+4SjjYxaQ1xtM1KMFj7HdxlBlxeyNLzhyJVx7r4rZGJAZ/6lkKCitSc/Nmpg==",
-      "dev": true
-    },
-    "mime-types": {
-      "version": "2.1.27",
-      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.27.tgz",
-      "integrity": "sha512-JIhqnCasI9yD+SsmkquHBxTSEuZdQX5BuQnS2Vc7puQQQ+8yiP5AY5uWhpdv4YL4VM5c6iliiYWPgJ/nJQLp7w==",
-      "dev": true,
-      "requires": {
-        "mime-db": "1.44.0"
-      }
-    },
-    "mimic-fn": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
-      "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
-      "dev": true
-    },
-    "mimic-response": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-1.0.1.tgz",
-      "integrity": "sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ==",
-      "dev": true,
-      "optional": true
-    },
-    "min-indent": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
-      "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==",
-      "dev": true
-    },
-    "mini-create-react-context": {
-      "version": "0.3.3",
-      "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.3.3.tgz",
-      "integrity": "sha512-TtF6hZE59SGmS4U8529qB+jJFeW6asTLDIpPgvPLSCsooAwJS7QprHIFTqv9/Qh3NdLwQxFYgiHX5lqb6jqzPA==",
-      "requires": {
-        "@babel/runtime": "^7.12.1",
-        "tiny-warning": "^1.0.3"
-      },
-      "dependencies": {
-        "@babel/runtime": {
-          "version": "7.12.5",
-          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.12.5.tgz",
-          "integrity": "sha512-plcc+hbExy3McchJCEQG3knOsuh3HH+Prx1P6cLIkET/0dLuQDEnrT+s27Axgc9bqfsmNUNHfscgMUdBpC9xfg==",
-          "requires": {
-            "regenerator-runtime": "^0.13.4"
-          }
-        }
-      }
-    },
-    "mini-css-extract-plugin": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-1.6.0.tgz",
-      "integrity": "sha512-nPFKI7NSy6uONUo9yn2hIfb9vyYvkFu95qki0e21DQ9uaqNKDP15DGpK0KnV6wDroWxPHtExrdEwx/yDQ8nVRw==",
-      "dev": true,
-      "requires": {
-        "loader-utils": "^2.0.0",
-        "schema-utils": "^3.0.0",
-        "webpack-sources": "^1.1.0"
-      },
-      "dependencies": {
-        "ajv": {
-          "version": "6.12.6",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-          "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-          "dev": true,
-          "requires": {
-            "fast-deep-equal": "^3.1.1",
-            "fast-json-stable-stringify": "^2.0.0",
-            "json-schema-traverse": "^0.4.1",
-            "uri-js": "^4.2.2"
-          }
-        },
-        "schema-utils": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.0.tgz",
-          "integrity": "sha512-tTEaeYkyIhEZ9uWgAjDerWov3T9MgX8dhhy2r0IGeeX4W8ngtGl1++dUve/RUqzuaASSh7shwCDJjEzthxki8w==",
-          "dev": true,
-          "requires": {
-            "@types/json-schema": "^7.0.7",
-            "ajv": "^6.12.5",
-            "ajv-keywords": "^3.5.2"
-          }
-        }
-      }
-    },
-    "minimalistic-assert": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
-      "integrity": "sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==",
-      "dev": true
-    },
-    "minimatch": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
-      "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
-      "requires": {
-        "brace-expansion": "^1.1.7"
-      }
-    },
-    "minimist": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
-      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
-      "dev": true
-    },
-    "mixin-deep": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.2.tgz",
-      "integrity": "sha512-WRoDn//mXBiJ1H40rqa3vH0toePwSsGb45iInWlTySa+Uu4k3tYUSxa2v1KqAiLtvlrSzaExqS1gtk96A9zvEA==",
-      "dev": true,
-      "requires": {
-        "for-in": "^1.0.2",
-        "is-extendable": "^1.0.1"
-      },
-      "dependencies": {
-        "is-extendable": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
-          "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
-          "dev": true,
-          "requires": {
-            "is-plain-object": "^2.0.4"
-          }
-        }
-      }
-    },
-    "mkdirp": {
-      "version": "0.5.5",
-      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz",
-      "integrity": "sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==",
-      "dev": true,
-      "requires": {
-        "minimist": "^1.2.5"
-      }
-    },
-    "moment": {
-      "version": "2.27.0",
-      "resolved": "https://registry.npmjs.org/moment/-/moment-2.27.0.tgz",
-      "integrity": "sha512-al0MUK7cpIcglMv3YF13qSgdAIqxHTO7brRtaz3DlSULbqfazqkc5kEjNrLDOM7fsjshoFIihnU8snrP7zUvhQ=="
-    },
-    "mozjpeg": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/mozjpeg/-/mozjpeg-7.1.0.tgz",
-      "integrity": "sha512-A6nVpI33DVi04HxatRx3PZTeVAOP1AC/T/5kXEvP0U8F+J11mmFFDv46BM2j5/cEyzDDtK8ptHeBSphNMrQLqA==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "bin-build": "^3.0.0",
-        "bin-wrapper": "^4.0.0",
-        "logalot": "^2.1.0"
-      }
-    },
-    "ms": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
-      "dev": true
-    },
-    "multicast-dns": {
-      "version": "6.2.3",
-      "resolved": "https://registry.npmjs.org/multicast-dns/-/multicast-dns-6.2.3.tgz",
-      "integrity": "sha512-ji6J5enbMyGRHIAkAOu3WdV8nggqviKCEKtXcOqfphZZtQrmHKycfynJ2V7eVPUA4NhJ6V7Wf4TmGbTwKE9B6g==",
-      "dev": true,
-      "requires": {
-        "dns-packet": "^1.3.1",
-        "thunky": "^1.0.2"
-      }
-    },
-    "multicast-dns-service-types": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/multicast-dns-service-types/-/multicast-dns-service-types-1.1.0.tgz",
-      "integrity": "sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE=",
-      "dev": true
-    },
-    "mute-stream": {
-      "version": "0.0.8",
-      "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz",
-      "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==",
-      "dev": true
-    },
-    "nan": {
-      "version": "2.14.1",
-      "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.1.tgz",
-      "integrity": "sha512-isWHgVjnFjh2x2yuJ/tj3JbwoHu3UC2dX5G/88Cm24yB6YopVgxvBObDY7n5xW6ExmFhJpSEQqFPvq9zaXc8Jw==",
-      "dev": true,
-      "optional": true
-    },
-    "nanoid": {
-      "version": "3.1.23",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.23.tgz",
-      "integrity": "sha512-FiB0kzdP0FFVGDKlRLEQ1BgDzU87dy5NnzjeW9YZNt+/c3+q82EQDUwniSAUxp/F0gFNI1ZhKU1FqYsMuqZVnw==",
-      "dev": true
-    },
-    "nanomatch": {
-      "version": "1.2.13",
-      "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz",
-      "integrity": "sha512-fpoe2T0RbHwBTBUOftAfBPaDEi06ufaUai0mE6Yn1kacc3SnTErfb/h+X94VXzI64rKFHYImXSvdwGGCmwOqCA==",
-      "dev": true,
-      "requires": {
-        "arr-diff": "^4.0.0",
-        "array-unique": "^0.3.2",
-        "define-property": "^2.0.2",
-        "extend-shallow": "^3.0.2",
-        "fragment-cache": "^0.2.1",
-        "is-windows": "^1.0.2",
-        "kind-of": "^6.0.2",
-        "object.pick": "^1.3.0",
-        "regex-not": "^1.0.0",
-        "snapdragon": "^0.8.1",
-        "to-regex": "^3.0.1"
-      }
-    },
-    "natural-compare": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
-      "integrity": "sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=",
-      "dev": true
-    },
-    "negotiator": {
-      "version": "0.6.2",
-      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz",
-      "integrity": "sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw==",
-      "dev": true
-    },
-    "neo-async": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
-      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
-      "dev": true
-    },
-    "new-relic-source-map-webpack-plugin": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/new-relic-source-map-webpack-plugin/-/new-relic-source-map-webpack-plugin-1.2.0.tgz",
-      "integrity": "sha512-bsF07nt2mlauMhxdKW3aIirazreq5muRLHSxubQ18XVqYR2ta0N6CghwHNDJsivY1j/Qrt22FNFuz0GZrFPbTw==",
-      "dev": true,
-      "requires": {
-        "@newrelic/publish-sourcemap": "^4.4.1"
-      }
-    },
-    "nice-try": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
-      "integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==",
-      "dev": true
-    },
-    "no-case": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
-      "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
-      "dev": true,
-      "requires": {
-        "lower-case": "^2.0.2",
-        "tslib": "^2.0.3"
-      },
-      "dependencies": {
-        "tslib": {
-          "version": "2.3.0",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
-          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
-          "dev": true
-        }
-      }
-    },
-    "node-fetch": {
-      "version": "2.6.0",
-      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.0.tgz",
-      "integrity": "sha512-8dG4H5ujfvFiqDmVu9fQ5bOHUC15JMjMY/Zumv26oOvvVJjM67KF8koCWIabKQ1GJIa9r2mMZscBq/TbdOcmNA==",
-      "dev": true
-    },
-    "node-forge": {
-      "version": "0.10.0",
-      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.10.0.tgz",
-      "integrity": "sha512-PPmu8eEeG9saEUvI97fm4OYxXVB6bFvyNTyiUOBichBpFG8A1Ljw3bY62+5oOjDEMHRnd0Y7HQ+x7uzxOzC6JA==",
-      "dev": true
-    },
-    "node-int64": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/node-int64/-/node-int64-0.4.0.tgz",
-      "integrity": "sha1-h6kGXNs1XTGC2PlM4RGIuCXGijs=",
-      "dev": true
-    },
-    "node-modules-regexp": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/node-modules-regexp/-/node-modules-regexp-1.0.0.tgz",
-      "integrity": "sha1-jZ2+KJZKSsVxLpExZCEHxx6Q7EA=",
-      "dev": true
-    },
-    "node-notifier": {
-      "version": "8.0.2",
-      "resolved": "https://registry.npmjs.org/node-notifier/-/node-notifier-8.0.2.tgz",
-      "integrity": "sha512-oJP/9NAdd9+x2Q+rfphB2RJCHjod70RcRLjosiPMMu5gjIfwVnOUGq2nbTjTUbmy0DJ/tFIVT30+Qe3nzl4TJg==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "growly": "^1.3.0",
-        "is-wsl": "^2.2.0",
-        "semver": "^7.3.2",
-        "shellwords": "^0.1.1",
-        "uuid": "^8.3.0",
-        "which": "^2.0.2"
-      },
-      "dependencies": {
-        "semver": {
-          "version": "7.3.5",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
-          "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "lru-cache": "^6.0.0"
-          }
-        },
-        "uuid": {
-          "version": "8.3.2",
-          "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
-          "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
-          "dev": true,
-          "optional": true
-        },
-        "which": {
-          "version": "2.0.2",
-          "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-          "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "isexe": "^2.0.0"
-          }
-        }
-      }
-    },
-    "node-releases": {
-      "version": "1.1.73",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.73.tgz",
-      "integrity": "sha512-uW7fodD6pyW2FZNZnp/Z3hvWKeEW1Y8R1+1CnErE8cXFXzl5blBOoVB41CvMer6P6Q0S5FXDwcHgFd1Wj0U9zg==",
-      "dev": true
-    },
-    "normalize-package-data": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz",
-      "integrity": "sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==",
-      "dev": true,
-      "requires": {
-        "hosted-git-info": "^2.1.4",
-        "resolve": "^1.10.0",
-        "semver": "2 || 3 || 4 || 5",
-        "validate-npm-package-license": "^3.0.1"
-      }
-    },
-    "normalize-path": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
-      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-      "dev": true
-    },
-    "normalize-range": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
-      "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=",
-      "dev": true
-    },
-    "normalize-url": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-6.1.0.tgz",
-      "integrity": "sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==",
-      "dev": true
-    },
-    "npm-conf": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/npm-conf/-/npm-conf-1.1.3.tgz",
-      "integrity": "sha512-Yic4bZHJOt9RCFbRP3GgpqhScOY4HH3V2P8yBj6CeYq118Qr+BLXqT2JvpJ00mryLESpgOxf5XlFv4ZjXxLScw==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "config-chain": "^1.1.11",
-        "pify": "^3.0.0"
-      },
-      "dependencies": {
-        "pify": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
-          "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
-          "dev": true,
-          "optional": true
-        }
-      }
-    },
-    "npm-run-path": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz",
-      "integrity": "sha1-NakjLfo11wZ7TLLd8jV7GHFTbF8=",
-      "dev": true,
-      "requires": {
-        "path-key": "^2.0.0"
-      }
-    },
-    "nth-check": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-1.0.2.tgz",
-      "integrity": "sha512-WeBOdju8SnzPN5vTUJYxYUxLeXpCaVP5i5e0LF8fg7WORF2Wd7wFX/pk0tYZk7s8T+J7VLy0Da6J1+wCT0AtHg==",
-      "dev": true,
-      "requires": {
-        "boolbase": "~1.0.0"
-      }
-    },
-    "number-is-nan": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
-      "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
-      "dev": true
-    },
-    "nwsapi": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.0.tgz",
-      "integrity": "sha512-h2AatdwYH+JHiZpv7pt/gSX1XoRGb7L/qSIeuqA6GwYoF9w1vP1cw42TO0aI2pNyshRK5893hNSl+1//vHK7hQ==",
-      "dev": true
-    },
-    "oauth-sign": {
-      "version": "0.9.0",
-      "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.9.0.tgz",
-      "integrity": "sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==",
-      "dev": true
-    },
-    "object-assign": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
-    },
-    "object-copy": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/object-copy/-/object-copy-0.1.0.tgz",
-      "integrity": "sha1-fn2Fi3gb18mRpBupde04EnVOmYw=",
-      "dev": true,
-      "requires": {
-        "copy-descriptor": "^0.1.0",
-        "define-property": "^0.2.5",
-        "kind-of": "^3.0.3"
-      },
-      "dependencies": {
-        "define-property": {
-          "version": "0.2.5",
-          "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
-          "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
-          "dev": true,
-          "requires": {
-            "is-descriptor": "^0.1.0"
-          }
-        },
-        "is-buffer": {
-          "version": "1.1.6",
-          "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
-          "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
-          "dev": true
-        },
-        "kind-of": {
-          "version": "3.2.2",
-          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-          "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
-          "dev": true,
-          "requires": {
-            "is-buffer": "^1.1.5"
-          }
-        }
-      }
-    },
-    "object-filter": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/object-filter/-/object-filter-1.0.2.tgz",
-      "integrity": "sha1-rwt5f/6+r4pSxmN87b6IFs/sG8g="
-    },
-    "object-inspect": {
-      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.8.0.tgz",
-      "integrity": "sha512-jLdtEOB112fORuypAyl/50VRVIBIdVQOSUUGQHzJ4xBSbit81zRarz7GThkEFZy1RceYrWYcPcBFPQwHyAc1gA=="
-    },
-    "object-is": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.5.tgz",
-      "integrity": "sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==",
-      "requires": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3"
-      }
-    },
-    "object-keys": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
-      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA=="
-    },
-    "object-visit": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/object-visit/-/object-visit-1.0.1.tgz",
-      "integrity": "sha1-95xEk68MU3e1n+OdOV5BBC3QRbs=",
-      "dev": true,
-      "requires": {
-        "isobject": "^3.0.0"
-      }
-    },
-    "object.assign": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.0.tgz",
-      "integrity": "sha512-exHJeq6kBKj58mqGyTQ9DFvrZC/eR6OwxzoM9YRoGBqrXYonaFyGiFMuc9VZrXf7DarreEwMpurG3dd+CNyW5w==",
-      "requires": {
-        "define-properties": "^1.1.2",
-        "function-bind": "^1.1.1",
-        "has-symbols": "^1.0.0",
-        "object-keys": "^1.0.11"
-      }
-    },
-    "object.entries": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.4.tgz",
-      "integrity": "sha512-h4LWKWE+wKQGhtMjZEBud7uLGhqyLwj8fpHOarZhD2uY3C9cRtk57VQ89ke3moByLXMedqs3XCHzyb4AmA2DjA==",
-      "requires": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.18.2"
-      },
-      "dependencies": {
-        "es-abstract": {
-          "version": "1.18.3",
-          "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.18.3.tgz",
-          "integrity": "sha512-nQIr12dxV7SSxE6r6f1l3DtAeEYdsGpps13dR0TwJg1S8gyp4ZPgy3FZcHBgbiQqnoqSTb+oC+kO4UQ0C/J8vw==",
-          "requires": {
-            "call-bind": "^1.0.2",
-            "es-to-primitive": "^1.2.1",
-            "function-bind": "^1.1.1",
-            "get-intrinsic": "^1.1.1",
-            "has": "^1.0.3",
-            "has-symbols": "^1.0.2",
-            "is-callable": "^1.2.3",
-            "is-negative-zero": "^2.0.1",
-            "is-regex": "^1.1.3",
-            "is-string": "^1.0.6",
-            "object-inspect": "^1.10.3",
-            "object-keys": "^1.1.1",
-            "object.assign": "^4.1.2",
-            "string.prototype.trimend": "^1.0.4",
-            "string.prototype.trimstart": "^1.0.4",
-            "unbox-primitive": "^1.0.1"
-          }
-        },
-        "has-symbols": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.2.tgz",
-          "integrity": "sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw=="
-        },
-        "is-callable": {
-          "version": "1.2.3",
-          "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.3.tgz",
-          "integrity": "sha512-J1DcMe8UYTBSrKezuIUTUwjXsho29693unXM2YhJUTR2txK/eG47bvNa/wipPFmZFgr/N6f1GA66dv0mEyTIyQ=="
-        },
-        "is-regex": {
-          "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.3.tgz",
-          "integrity": "sha512-qSVXFz28HM7y+IWX6vLCsexdlvzT1PJNFSBuaQLQ5o0IEw8UDYW6/2+eCMVyIsbM8CNLX2a/QWmSpyxYEHY7CQ==",
-          "requires": {
-            "call-bind": "^1.0.2",
-            "has-symbols": "^1.0.2"
-          }
-        },
-        "object-inspect": {
-          "version": "1.10.3",
-          "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.10.3.tgz",
-          "integrity": "sha512-e5mCJlSH7poANfC8z8S9s9S2IN5/4Zb3aZ33f5s8YqoazCFzNLloLU8r5VCG+G7WoqLvAAZoVMcy3tp/3X0Plw=="
-        },
-        "object.assign": {
-          "version": "4.1.2",
-          "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.2.tgz",
-          "integrity": "sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==",
-          "requires": {
-            "call-bind": "^1.0.0",
-            "define-properties": "^1.1.3",
-            "has-symbols": "^1.0.1",
-            "object-keys": "^1.1.1"
-          }
-        },
-        "string.prototype.trimend": {
-          "version": "1.0.4",
-          "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.4.tgz",
-          "integrity": "sha512-y9xCjw1P23Awk8EvTpcyL2NIr1j7wJ39f+k6lvRnSMz+mz9CGz9NYPelDk42kOz6+ql8xjfK8oYzy3jAP5QU5A==",
-          "requires": {
-            "call-bind": "^1.0.2",
-            "define-properties": "^1.1.3"
-          }
-        },
-        "string.prototype.trimstart": {
-          "version": "1.0.4",
-          "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.4.tgz",
-          "integrity": "sha512-jh6e984OBfvxS50tdY2nRZnoC5/mLFKOREQfw8t5yytkoUsJRNxvI/E39qu1sD0OtWI3OC0XgKSmcWwziwYuZw==",
-          "requires": {
-            "call-bind": "^1.0.2",
-            "define-properties": "^1.1.3"
-          }
-        },
-        "unbox-primitive": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz",
-          "integrity": "sha512-tZU/3NqK3dA5gpE1KtyiJUrEB0lxnGkMFHptJ7q6ewdZ8s12QrODwNbhIJStmJkd1QDXa1NRA8aF2A1zk/Ypyw==",
-          "requires": {
-            "function-bind": "^1.1.1",
-            "has-bigints": "^1.0.1",
-            "has-symbols": "^1.0.2",
-            "which-boxed-primitive": "^1.0.2"
-          }
-        }
-      }
-    },
-    "object.fromentries": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.4.tgz",
-      "integrity": "sha512-EsFBshs5RUUpQEY1D4q/m59kMfz4YJvxuNCJcv/jWwOJr34EaVnG11ZrZa0UHB3wnzV1wx8m58T4hQL8IuNXlQ==",
-      "dev": true,
-      "requires": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.18.0-next.2",
-        "has": "^1.0.3"
-      },
-      "dependencies": {
-        "es-abstract": {
-          "version": "1.18.3",
-          "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.18.3.tgz",
-          "integrity": "sha512-nQIr12dxV7SSxE6r6f1l3DtAeEYdsGpps13dR0TwJg1S8gyp4ZPgy3FZcHBgbiQqnoqSTb+oC+kO4UQ0C/J8vw==",
-          "dev": true,
-          "requires": {
-            "call-bind": "^1.0.2",
-            "es-to-primitive": "^1.2.1",
-            "function-bind": "^1.1.1",
-            "get-intrinsic": "^1.1.1",
-            "has": "^1.0.3",
-            "has-symbols": "^1.0.2",
-            "is-callable": "^1.2.3",
-            "is-negative-zero": "^2.0.1",
-            "is-regex": "^1.1.3",
-            "is-string": "^1.0.6",
-            "object-inspect": "^1.10.3",
-            "object-keys": "^1.1.1",
-            "object.assign": "^4.1.2",
-            "string.prototype.trimend": "^1.0.4",
-            "string.prototype.trimstart": "^1.0.4",
-            "unbox-primitive": "^1.0.1"
-          }
-        },
-        "has-symbols": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.2.tgz",
-          "integrity": "sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw==",
-          "dev": true
-        },
-        "is-callable": {
-          "version": "1.2.3",
-          "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.3.tgz",
-          "integrity": "sha512-J1DcMe8UYTBSrKezuIUTUwjXsho29693unXM2YhJUTR2txK/eG47bvNa/wipPFmZFgr/N6f1GA66dv0mEyTIyQ==",
-          "dev": true
-        },
-        "is-regex": {
-          "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.3.tgz",
-          "integrity": "sha512-qSVXFz28HM7y+IWX6vLCsexdlvzT1PJNFSBuaQLQ5o0IEw8UDYW6/2+eCMVyIsbM8CNLX2a/QWmSpyxYEHY7CQ==",
-          "dev": true,
-          "requires": {
-            "call-bind": "^1.0.2",
-            "has-symbols": "^1.0.2"
-          }
-        },
-        "object-inspect": {
-          "version": "1.10.3",
-          "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.10.3.tgz",
-          "integrity": "sha512-e5mCJlSH7poANfC8z8S9s9S2IN5/4Zb3aZ33f5s8YqoazCFzNLloLU8r5VCG+G7WoqLvAAZoVMcy3tp/3X0Plw==",
-          "dev": true
-        },
-        "object.assign": {
-          "version": "4.1.2",
-          "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.2.tgz",
-          "integrity": "sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==",
-          "dev": true,
-          "requires": {
-            "call-bind": "^1.0.0",
-            "define-properties": "^1.1.3",
-            "has-symbols": "^1.0.1",
-            "object-keys": "^1.1.1"
-          }
-        },
-        "string.prototype.trimend": {
-          "version": "1.0.4",
-          "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.4.tgz",
-          "integrity": "sha512-y9xCjw1P23Awk8EvTpcyL2NIr1j7wJ39f+k6lvRnSMz+mz9CGz9NYPelDk42kOz6+ql8xjfK8oYzy3jAP5QU5A==",
-          "dev": true,
-          "requires": {
-            "call-bind": "^1.0.2",
-            "define-properties": "^1.1.3"
-          }
-        },
-        "string.prototype.trimstart": {
-          "version": "1.0.4",
-          "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.4.tgz",
-          "integrity": "sha512-jh6e984OBfvxS50tdY2nRZnoC5/mLFKOREQfw8t5yytkoUsJRNxvI/E39qu1sD0OtWI3OC0XgKSmcWwziwYuZw==",
-          "dev": true,
-          "requires": {
-            "call-bind": "^1.0.2",
-            "define-properties": "^1.1.3"
-          }
-        }
-      }
-    },
-    "object.getownpropertydescriptors": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.1.0.tgz",
-      "integrity": "sha512-Z53Oah9A3TdLoblT7VKJaTDdXdT+lQO+cNpKVnya5JDe9uLvzu1YyY1yFDFrcxrlRgWrEFH0jJtD/IbuwjcEVg==",
-      "dev": true,
-      "requires": {
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.17.0-next.1"
-      }
-    },
-    "object.pick": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/object.pick/-/object.pick-1.3.0.tgz",
-      "integrity": "sha1-h6EKxMFpS9Lhy/U1kaZhQftd10c=",
-      "dev": true,
-      "requires": {
-        "isobject": "^3.0.1"
-      }
-    },
-    "object.values": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.4.tgz",
-      "integrity": "sha512-TnGo7j4XSnKQoK3MfvkzqKCi0nVe/D9I9IjwTNYdb/fxYHpjrluHVOgw0AF6jrRFGMPHdfuidR09tIDiIvnaSg==",
-      "dev": true,
-      "requires": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.18.2"
-      },
-      "dependencies": {
-        "es-abstract": {
-          "version": "1.18.3",
-          "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.18.3.tgz",
-          "integrity": "sha512-nQIr12dxV7SSxE6r6f1l3DtAeEYdsGpps13dR0TwJg1S8gyp4ZPgy3FZcHBgbiQqnoqSTb+oC+kO4UQ0C/J8vw==",
-          "dev": true,
-          "requires": {
-            "call-bind": "^1.0.2",
-            "es-to-primitive": "^1.2.1",
-            "function-bind": "^1.1.1",
-            "get-intrinsic": "^1.1.1",
-            "has": "^1.0.3",
-            "has-symbols": "^1.0.2",
-            "is-callable": "^1.2.3",
-            "is-negative-zero": "^2.0.1",
-            "is-regex": "^1.1.3",
-            "is-string": "^1.0.6",
-            "object-inspect": "^1.10.3",
-            "object-keys": "^1.1.1",
-            "object.assign": "^4.1.2",
-            "string.prototype.trimend": "^1.0.4",
-            "string.prototype.trimstart": "^1.0.4",
-            "unbox-primitive": "^1.0.1"
-          }
-        },
-        "has-symbols": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.2.tgz",
-          "integrity": "sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw==",
-          "dev": true
-        },
-        "is-callable": {
-          "version": "1.2.3",
-          "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.3.tgz",
-          "integrity": "sha512-J1DcMe8UYTBSrKezuIUTUwjXsho29693unXM2YhJUTR2txK/eG47bvNa/wipPFmZFgr/N6f1GA66dv0mEyTIyQ==",
-          "dev": true
-        },
-        "is-regex": {
-          "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.3.tgz",
-          "integrity": "sha512-qSVXFz28HM7y+IWX6vLCsexdlvzT1PJNFSBuaQLQ5o0IEw8UDYW6/2+eCMVyIsbM8CNLX2a/QWmSpyxYEHY7CQ==",
-          "dev": true,
-          "requires": {
-            "call-bind": "^1.0.2",
-            "has-symbols": "^1.0.2"
-          }
-        },
-        "object-inspect": {
-          "version": "1.10.3",
-          "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.10.3.tgz",
-          "integrity": "sha512-e5mCJlSH7poANfC8z8S9s9S2IN5/4Zb3aZ33f5s8YqoazCFzNLloLU8r5VCG+G7WoqLvAAZoVMcy3tp/3X0Plw==",
-          "dev": true
-        },
-        "object.assign": {
-          "version": "4.1.2",
-          "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.2.tgz",
-          "integrity": "sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==",
-          "dev": true,
-          "requires": {
-            "call-bind": "^1.0.0",
-            "define-properties": "^1.1.3",
-            "has-symbols": "^1.0.1",
-            "object-keys": "^1.1.1"
-          }
-        },
-        "string.prototype.trimend": {
-          "version": "1.0.4",
-          "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.4.tgz",
-          "integrity": "sha512-y9xCjw1P23Awk8EvTpcyL2NIr1j7wJ39f+k6lvRnSMz+mz9CGz9NYPelDk42kOz6+ql8xjfK8oYzy3jAP5QU5A==",
-          "dev": true,
-          "requires": {
-            "call-bind": "^1.0.2",
-            "define-properties": "^1.1.3"
-          }
-        },
-        "string.prototype.trimstart": {
-          "version": "1.0.4",
-          "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.4.tgz",
-          "integrity": "sha512-jh6e984OBfvxS50tdY2nRZnoC5/mLFKOREQfw8t5yytkoUsJRNxvI/E39qu1sD0OtWI3OC0XgKSmcWwziwYuZw==",
-          "dev": true,
-          "requires": {
-            "call-bind": "^1.0.2",
-            "define-properties": "^1.1.3"
-          }
-        }
-      }
-    },
-    "obuf": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz",
-      "integrity": "sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==",
-      "dev": true
-    },
-    "on-finished": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
-      "integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=",
-      "dev": true,
-      "requires": {
-        "ee-first": "1.1.1"
-      }
-    },
-    "on-headers": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.0.2.tgz",
-      "integrity": "sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==",
-      "dev": true
-    },
-    "once": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
-      "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
-      "requires": {
-        "wrappy": "1"
-      }
-    },
-    "onetime": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
-      "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
-      "dev": true,
-      "requires": {
-        "mimic-fn": "^2.1.0"
-      }
-    },
-    "open": {
-      "version": "7.4.2",
-      "resolved": "https://registry.npmjs.org/open/-/open-7.4.2.tgz",
-      "integrity": "sha512-MVHddDVweXZF3awtlAS+6pgKLlm/JgxZ90+/NBurBoQctVOOB/zDdVjcyPzQ+0laDGbsWgrRkflI65sQeOgT9Q==",
-      "dev": true,
-      "requires": {
-        "is-docker": "^2.0.0",
-        "is-wsl": "^2.1.1"
-      }
-    },
-    "opencollective-postinstall": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/opencollective-postinstall/-/opencollective-postinstall-2.0.3.tgz",
-      "integrity": "sha512-8AV/sCtuzUeTo8gQK5qDZzARrulB3egtLzFgteqB2tcT4Mw7B8Kt7JcDHmltjz6FOAHsvTevk70gZEbhM4ZS9Q==",
-      "dev": true
-    },
-    "opener": {
-      "version": "1.5.2",
-      "resolved": "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz",
-      "integrity": "sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==",
-      "dev": true
-    },
-    "optionator": {
-      "version": "0.8.3",
-      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.3.tgz",
-      "integrity": "sha512-+IW9pACdk3XWmmTXG8m3upGUJst5XRGzxMRjXzAuJ1XnIFNvfhjjIuYkDvysnPQ7qzqVzLt78BCruntqRhWQbA==",
-      "dev": true,
-      "requires": {
-        "deep-is": "~0.1.3",
-        "fast-levenshtein": "~2.0.6",
-        "levn": "~0.3.0",
-        "prelude-ls": "~1.1.2",
-        "type-check": "~0.3.2",
-        "word-wrap": "~1.2.3"
-      }
-    },
-    "optipng-bin": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/optipng-bin/-/optipng-bin-7.0.0.tgz",
-      "integrity": "sha512-mesUAwfedu5p9gRQwlYgD6Svw5IH3VUIWDJj/9cNpP3yFNbbEVqkTMWYhrIEn/cxmbGA3LpZrdoV2Yl8OfmnIA==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "bin-build": "^3.0.0",
-        "bin-wrapper": "^4.0.0",
-        "logalot": "^2.0.0"
-      }
-    },
-    "os-filter-obj": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/os-filter-obj/-/os-filter-obj-2.0.0.tgz",
-      "integrity": "sha512-uksVLsqG3pVdzzPvmAHpBK0wKxYItuzZr7SziusRPoz67tGV8rL1szZ6IdeUrbqLjGDwApBtN29eEE3IqGHOjg==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "arch": "^2.1.0"
-      }
-    },
-    "os-shim": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/os-shim/-/os-shim-0.1.3.tgz",
-      "integrity": "sha1-a2LDeRz3kJ6jXtRuF2WLtBfLORc=",
-      "dev": true
-    },
-    "os-tmpdir": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
-      "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
-      "dev": true
-    },
-    "ow": {
-      "version": "0.17.0",
-      "resolved": "https://registry.npmjs.org/ow/-/ow-0.17.0.tgz",
-      "integrity": "sha512-i3keDzDQP5lWIe4oODyDFey1qVrq2hXKTuTH2VpqwpYtzPiKZt2ziRI4NBQmgW40AnV5Euz17OyWweCb+bNEQA==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "type-fest": "^0.11.0"
-      },
-      "dependencies": {
-        "type-fest": {
-          "version": "0.11.0",
-          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.11.0.tgz",
-          "integrity": "sha512-OdjXJxnCN1AvyLSzeKIgXTXxV+99ZuXl3Hpo9XpJAv9MBcHrrJOQ5kV7ypXOuQie+AmWG25hLbiKdwYTifzcfQ==",
-          "dev": true,
-          "optional": true
-        }
-      }
-    },
-    "p-cancelable": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/p-cancelable/-/p-cancelable-0.3.0.tgz",
-      "integrity": "sha512-RVbZPLso8+jFeq1MfNvgXtCRED2raz/dKpacfTNxsx6pLEpEomM7gah6VeHSYV3+vo0OAi4MkArtQcWWXuQoyw==",
-      "dev": true,
-      "optional": true
-    },
-    "p-defer": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/p-defer/-/p-defer-1.0.0.tgz",
-      "integrity": "sha1-n26xgvbJqozXQwBKfU+WsZaw+ww=",
-      "dev": true
-    },
-    "p-each-series": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/p-each-series/-/p-each-series-2.2.0.tgz",
-      "integrity": "sha512-ycIL2+1V32th+8scbpTvyHNaHe02z0sjgh91XXjAk+ZeXoPN4Z46DVUnzdso0aX4KckKw0FNNFHdjZ2UsZvxiA==",
-      "dev": true
-    },
-    "p-event": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/p-event/-/p-event-1.3.0.tgz",
-      "integrity": "sha1-jmtPT2XHK8W2/ii3XtqHT5akoIU=",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "p-timeout": "^1.1.1"
-      }
-    },
-    "p-finally": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz",
-      "integrity": "sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4=",
-      "dev": true
-    },
-    "p-is-promise": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/p-is-promise/-/p-is-promise-1.1.0.tgz",
-      "integrity": "sha1-nJRWmJ6fZYgBewQ01WCXZ1w9oF4=",
-      "dev": true,
-      "optional": true
-    },
-    "p-limit": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
-      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
-      "dev": true,
-      "requires": {
-        "p-try": "^2.0.0"
-      }
-    },
-    "p-locate": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
-      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
-      "dev": true,
-      "requires": {
-        "p-limit": "^2.2.0"
-      }
-    },
-    "p-map": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/p-map/-/p-map-2.1.0.tgz",
-      "integrity": "sha512-y3b8Kpd8OAN444hxfBbFfj1FY/RjtTd8tzYwhUqNYXx0fXx2iX4maP4Qr6qhIKbQXI02wTLAda4fYUbDagTUFw==",
-      "dev": true
-    },
-    "p-map-series": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/p-map-series/-/p-map-series-1.0.0.tgz",
-      "integrity": "sha1-v5j+V1cFZYqeE1G++4WuTB8Hvco=",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "p-reduce": "^1.0.0"
-      }
-    },
-    "p-pipe": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/p-pipe/-/p-pipe-3.1.0.tgz",
-      "integrity": "sha512-08pj8ATpzMR0Y80x50yJHn37NF6vjrqHutASaX5LiH5npS9XPvrUmscd9MF5R4fuYRHOxQR1FfMIlF7AzwoPqw==",
-      "dev": true
-    },
-    "p-reduce": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/p-reduce/-/p-reduce-1.0.0.tgz",
-      "integrity": "sha1-GMKw3ZNqRpClKfgjH1ig/bakffo=",
-      "dev": true
-    },
-    "p-retry": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/p-retry/-/p-retry-4.6.0.tgz",
-      "integrity": "sha512-SAHbQEwg3X5DRNaLmWjT+DlGc93ba5i+aP3QLfVNDncQEQO4xjbYW4N/lcVTSuP0aJietGfx2t94dJLzfBMpXw==",
-      "dev": true,
-      "requires": {
-        "@types/retry": "^0.12.0",
-        "retry": "^0.13.1"
-      }
-    },
-    "p-timeout": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/p-timeout/-/p-timeout-1.2.1.tgz",
-      "integrity": "sha1-XrOzU7f86Z8QGhA4iAuwVOu+o4Y=",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "p-finally": "^1.0.0"
-      }
-    },
-    "p-try": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
-      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
-      "dev": true
-    },
-    "param-case": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",
-      "integrity": "sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==",
-      "dev": true,
-      "requires": {
-        "dot-case": "^3.0.4",
-        "tslib": "^2.0.3"
-      },
-      "dependencies": {
-        "tslib": {
-          "version": "2.3.0",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
-          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
-          "dev": true
-        }
-      }
-    },
-    "parent-module": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
-      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
-      "dev": true,
-      "requires": {
-        "callsites": "^3.0.0"
-      }
-    },
-    "parse-json": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
-      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
-      "dev": true,
-      "requires": {
-        "@babel/code-frame": "^7.0.0",
-        "error-ex": "^1.3.1",
-        "json-parse-even-better-errors": "^2.3.0",
-        "lines-and-columns": "^1.1.6"
-      }
-    },
-    "parse5": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz",
-      "integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==",
-      "dev": true
-    },
-    "parseurl": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
-      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
-      "dev": true
-    },
-    "pascal-case": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz",
-      "integrity": "sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==",
-      "dev": true,
-      "requires": {
-        "no-case": "^3.0.4",
-        "tslib": "^2.0.3"
-      },
-      "dependencies": {
-        "tslib": {
-          "version": "2.3.0",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
-          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
-          "dev": true
-        }
-      }
-    },
-    "pascalcase": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/pascalcase/-/pascalcase-0.1.1.tgz",
-      "integrity": "sha1-s2PlXoAGym/iF4TS2yK9FdeRfxQ=",
-      "dev": true
-    },
-    "path-dirname": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/path-dirname/-/path-dirname-1.0.2.tgz",
-      "integrity": "sha1-zDPSTVJeCZpTiMAzbG4yuRYGCeA=",
-      "dev": true
-    },
-    "path-exists": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
-      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
-      "dev": true
-    },
-    "path-is-absolute": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
-      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18="
-    },
-    "path-is-inside": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/path-is-inside/-/path-is-inside-1.0.2.tgz",
-      "integrity": "sha1-NlQX3t5EQw0cEa9hAn+s8HS9/FM=",
-      "dev": true
-    },
-    "path-key": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/path-key/-/path-key-2.0.1.tgz",
-      "integrity": "sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A=",
-      "dev": true
-    },
-    "path-parse": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz",
-      "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==",
-      "dev": true
-    },
-    "path-to-regexp": {
-      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
-      "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
-      "requires": {
-        "isarray": "0.0.1"
-      }
-    },
-    "path-type": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
-      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
-      "dev": true
-    },
-    "pend": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
-      "integrity": "sha1-elfrVQpng/kRUzH89GY9XI4AelA=",
-      "dev": true,
-      "optional": true
-    },
-    "performance-now": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
-      "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=",
-      "dev": true
-    },
-    "picomatch": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.0.tgz",
-      "integrity": "sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==",
-      "dev": true
-    },
-    "pify": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
-      "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
-      "dev": true
-    },
-    "pinkie": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz",
-      "integrity": "sha1-clVrgM+g1IqXToDnckjoDtT3+HA=",
-      "dev": true
-    },
-    "pinkie-promise": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz",
-      "integrity": "sha1-ITXW36ejWMBprJsXh3YogihFD/o=",
-      "dev": true,
-      "requires": {
-        "pinkie": "^2.0.0"
-      }
-    },
-    "pirates": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.1.tgz",
-      "integrity": "sha512-WuNqLTbMI3tmfef2TKxlQmAiLHKtFhlsCZnPIpuv2Ow0RDVO8lfy1Opf4NUzlMXLjPl+Men7AuVdX6TA+s+uGA==",
-      "dev": true,
-      "requires": {
-        "node-modules-regexp": "^1.0.0"
-      }
-    },
-    "pkg-dir": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-3.0.0.tgz",
-      "integrity": "sha512-/E57AYkoeQ25qkxMj5PBOVgF8Kiu/h7cYS30Z5+R7WaiCCBfLq58ZI/dSeaEKb9WVJV5n/03QwrN3IeWIFllvw==",
-      "dev": true,
-      "requires": {
-        "find-up": "^3.0.0"
-      },
-      "dependencies": {
-        "find-up": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
-          "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
-          "dev": true,
-          "requires": {
-            "locate-path": "^3.0.0"
-          }
-        },
-        "locate-path": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
-          "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
-          "dev": true,
-          "requires": {
-            "p-locate": "^3.0.0",
-            "path-exists": "^3.0.0"
-          }
-        },
-        "p-locate": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
-          "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
-          "dev": true,
-          "requires": {
-            "p-limit": "^2.0.0"
-          }
-        },
-        "path-exists": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
-          "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=",
-          "dev": true
-        }
-      }
-    },
-    "pkg-up": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/pkg-up/-/pkg-up-3.1.0.tgz",
-      "integrity": "sha512-nDywThFk1i4BQK4twPQ6TA4RT8bDY96yeuCVBWL3ePARCiEKDRSrNGbFIgUJpLp+XeIR65v8ra7WuJOFUBtkMA==",
-      "dev": true,
-      "requires": {
-        "find-up": "^3.0.0"
-      },
-      "dependencies": {
-        "find-up": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
-          "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
-          "dev": true,
-          "requires": {
-            "locate-path": "^3.0.0"
-          }
-        },
-        "locate-path": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
-          "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
-          "dev": true,
-          "requires": {
-            "p-locate": "^3.0.0",
-            "path-exists": "^3.0.0"
-          }
-        },
-        "p-locate": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
-          "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
-          "dev": true,
-          "requires": {
-            "p-limit": "^2.0.0"
-          }
-        },
-        "path-exists": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
-          "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=",
-          "dev": true
-        }
-      }
-    },
-    "please-upgrade-node": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/please-upgrade-node/-/please-upgrade-node-3.2.0.tgz",
-      "integrity": "sha512-gQR3WpIgNIKwBMVLkpMUeR3e1/E1y42bqDQZfql+kDeXd8COYfM8PQA4X6y7a8u9Ua9FHmsrrmirW2vHs45hWg==",
-      "dev": true,
-      "requires": {
-        "semver-compare": "^1.0.0"
-      }
-    },
-    "pn": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/pn/-/pn-1.1.0.tgz",
-      "integrity": "sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA==",
-      "dev": true
-    },
-    "pngquant-bin": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/pngquant-bin/-/pngquant-bin-6.0.0.tgz",
-      "integrity": "sha512-oXWAS9MQ9iiDAJRdAZ9KO1mC5UwhzKkJsmetiu0iqIjJuW7JsuLhmc4JdRm7uJkIWRzIAou/Vq2VcjfJwz30Ow==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "bin-build": "^3.0.0",
-        "bin-wrapper": "^4.0.1",
-        "execa": "^4.0.0",
-        "logalot": "^2.0.0"
-      },
-      "dependencies": {
-        "cross-spawn": {
-          "version": "7.0.3",
-          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-          "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "path-key": "^3.1.0",
-            "shebang-command": "^2.0.0",
-            "which": "^2.0.1"
-          }
-        },
-        "execa": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/execa/-/execa-4.1.0.tgz",
-          "integrity": "sha512-j5W0//W7f8UxAn8hXVnwG8tLwdiUy4FJLcSupCg6maBYZDpyBvTApK7KyuI4bKj8KOh1r2YH+6ucuYtJv1bTZA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "cross-spawn": "^7.0.0",
-            "get-stream": "^5.0.0",
-            "human-signals": "^1.1.1",
-            "is-stream": "^2.0.0",
-            "merge-stream": "^2.0.0",
-            "npm-run-path": "^4.0.0",
-            "onetime": "^5.1.0",
-            "signal-exit": "^3.0.2",
-            "strip-final-newline": "^2.0.0"
-          }
-        },
-        "get-stream": {
-          "version": "5.2.0",
-          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz",
-          "integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "pump": "^3.0.0"
-          }
-        },
-        "human-signals": {
-          "version": "1.1.1",
-          "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-1.1.1.tgz",
-          "integrity": "sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==",
-          "dev": true,
-          "optional": true
-        },
-        "is-stream": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.0.tgz",
-          "integrity": "sha512-XCoy+WlUr7d1+Z8GgSuXmpuUFC9fOhRXglJMx+dwLKTkL44Cjd4W1Z5P+BQZpr+cR93aGP4S/s7Ftw6Nd/kiEw==",
-          "dev": true,
-          "optional": true
-        },
-        "npm-run-path": {
-          "version": "4.0.1",
-          "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
-          "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "path-key": "^3.0.0"
-          }
-        },
-        "path-key": {
-          "version": "3.1.1",
-          "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-          "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-          "dev": true,
-          "optional": true
-        },
-        "shebang-command": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-          "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "shebang-regex": "^3.0.0"
-          }
-        },
-        "shebang-regex": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-          "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-          "dev": true,
-          "optional": true
-        },
-        "which": {
-          "version": "2.0.2",
-          "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-          "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "isexe": "^2.0.0"
-          }
-        }
-      }
-    },
-    "portfinder": {
-      "version": "1.0.28",
-      "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
-      "integrity": "sha512-Se+2isanIcEqf2XMHjyUKskczxbPH7dQnlMjXX6+dybayyHvAf/TCgyMRlzf/B6QDhAEFOGes0pzRo3by4AbMA==",
-      "dev": true,
-      "requires": {
-        "async": "^2.6.2",
-        "debug": "^3.1.1",
-        "mkdirp": "^0.5.5"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "3.2.7",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
-          "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
-          "dev": true,
-          "requires": {
-            "ms": "^2.1.1"
-          }
-        },
-        "ms": {
-          "version": "2.1.3",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-          "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-          "dev": true
-        }
-      }
-    },
-    "posix-character-classes": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz",
-      "integrity": "sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=",
-      "dev": true
-    },
-    "postcss": {
-      "version": "8.3.5",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.3.5.tgz",
-      "integrity": "sha512-NxTuJocUhYGsMiMFHDUkmjSKT3EdH4/WbGF6GCi1NDGk+vbcUTun4fpbOqaPtD8IIsztA2ilZm2DhYCuyN58gA==",
-      "dev": true,
-      "requires": {
-        "colorette": "^1.2.2",
-        "nanoid": "^3.1.23",
-        "source-map-js": "^0.6.2"
-      },
-      "dependencies": {
-        "colorette": {
-          "version": "1.2.2",
-          "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.2.2.tgz",
-          "integrity": "sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w==",
-          "dev": true
-        }
-      }
-    },
-    "postcss-calc": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-calc/-/postcss-calc-8.0.0.tgz",
-      "integrity": "sha512-5NglwDrcbiy8XXfPM11F3HeC6hoT9W7GUH/Zi5U/p7u3Irv4rHhdDcIZwG0llHXV4ftsBjpfWMXAnXNl4lnt8g==",
-      "dev": true,
-      "requires": {
-        "postcss-selector-parser": "^6.0.2",
-        "postcss-value-parser": "^4.0.2"
-      }
-    },
-    "postcss-colormin": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-5.2.0.tgz",
-      "integrity": "sha512-+HC6GfWU3upe5/mqmxuqYZ9B2Wl4lcoUUNkoaX59nEWV4EtADCMiBqui111Bu8R8IvaZTmqmxrqOAqjbHIwXPw==",
-      "dev": true,
-      "requires": {
-        "browserslist": "^4.16.6",
-        "caniuse-api": "^3.0.0",
-        "colord": "^2.0.1",
-        "postcss-value-parser": "^4.1.0"
-      }
-    },
-    "postcss-convert-values": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-convert-values/-/postcss-convert-values-5.0.1.tgz",
-      "integrity": "sha512-C3zR1Do2BkKkCgC0g3sF8TS0koF2G+mN8xxayZx3f10cIRmTaAnpgpRQZjNekTZxM2ciSPoh2IWJm0VZx8NoQg==",
-      "dev": true,
-      "requires": {
-        "postcss-value-parser": "^4.1.0"
-      }
-    },
-    "postcss-discard-comments": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-5.0.1.tgz",
-      "integrity": "sha512-lgZBPTDvWrbAYY1v5GYEv8fEO/WhKOu/hmZqmCYfrpD6eyDWWzAOsl2rF29lpvziKO02Gc5GJQtlpkTmakwOWg==",
-      "dev": true
-    },
-    "postcss-discard-duplicates": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-5.0.1.tgz",
-      "integrity": "sha512-svx747PWHKOGpAXXQkCc4k/DsWo+6bc5LsVrAsw+OU+Ibi7klFZCyX54gjYzX4TH+f2uzXjRviLARxkMurA2bA==",
-      "dev": true
-    },
-    "postcss-discard-empty": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-5.0.1.tgz",
-      "integrity": "sha512-vfU8CxAQ6YpMxV2SvMcMIyF2LX1ZzWpy0lqHDsOdaKKLQVQGVP1pzhrI9JlsO65s66uQTfkQBKBD/A5gp9STFw==",
-      "dev": true
-    },
-    "postcss-discard-overridden": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-5.0.1.tgz",
-      "integrity": "sha512-Y28H7y93L2BpJhrdUR2SR2fnSsT+3TVx1NmVQLbcnZWwIUpJ7mfcTC6Za9M2PG6w8j7UQRfzxqn8jU2VwFxo3Q==",
-      "dev": true
-    },
-    "postcss-loader": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-6.1.0.tgz",
-      "integrity": "sha512-yA/cXBfACkthZNA2hQxOnaReVfQ6uLmvbEDQzNafpbK40URZJvP/28dL1DG174Gvz3ptkkHbbwDBCh+gXR94CA==",
-      "dev": true,
-      "requires": {
-        "cosmiconfig": "^7.0.0",
-        "klona": "^2.0.4",
-        "semver": "^7.3.5"
-      },
-      "dependencies": {
-        "semver": {
-          "version": "7.3.5",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
-          "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==",
-          "dev": true,
-          "requires": {
-            "lru-cache": "^6.0.0"
-          }
-        }
-      }
-    },
-    "postcss-merge-longhand": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-merge-longhand/-/postcss-merge-longhand-5.0.2.tgz",
-      "integrity": "sha512-BMlg9AXSI5G9TBT0Lo/H3PfUy63P84rVz3BjCFE9e9Y9RXQZD3+h3YO1kgTNsNJy7bBc1YQp8DmSnwLIW5VPcw==",
-      "dev": true,
-      "requires": {
-        "css-color-names": "^1.0.1",
-        "postcss-value-parser": "^4.1.0",
-        "stylehacks": "^5.0.1"
-      }
-    },
-    "postcss-merge-rules": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-merge-rules/-/postcss-merge-rules-5.0.2.tgz",
-      "integrity": "sha512-5K+Md7S3GwBewfB4rjDeol6V/RZ8S+v4B66Zk2gChRqLTCC8yjnHQ601omj9TKftS19OPGqZ/XzoqpzNQQLwbg==",
-      "dev": true,
-      "requires": {
-        "browserslist": "^4.16.6",
-        "caniuse-api": "^3.0.0",
-        "cssnano-utils": "^2.0.1",
-        "postcss-selector-parser": "^6.0.5",
-        "vendors": "^1.0.3"
-      }
-    },
-    "postcss-minify-font-values": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-minify-font-values/-/postcss-minify-font-values-5.0.1.tgz",
-      "integrity": "sha512-7JS4qIsnqaxk+FXY1E8dHBDmraYFWmuL6cgt0T1SWGRO5bzJf8sUoelwa4P88LEWJZweHevAiDKxHlofuvtIoA==",
-      "dev": true,
-      "requires": {
-        "postcss-value-parser": "^4.1.0"
-      }
-    },
-    "postcss-minify-gradients": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-minify-gradients/-/postcss-minify-gradients-5.0.1.tgz",
-      "integrity": "sha512-odOwBFAIn2wIv+XYRpoN2hUV3pPQlgbJ10XeXPq8UY2N+9ZG42xu45lTn/g9zZ+d70NKSQD6EOi6UiCMu3FN7g==",
-      "dev": true,
-      "requires": {
-        "cssnano-utils": "^2.0.1",
-        "is-color-stop": "^1.1.0",
-        "postcss-value-parser": "^4.1.0"
-      }
-    },
-    "postcss-minify-params": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-minify-params/-/postcss-minify-params-5.0.1.tgz",
-      "integrity": "sha512-4RUC4k2A/Q9mGco1Z8ODc7h+A0z7L7X2ypO1B6V8057eVK6mZ6xwz6QN64nHuHLbqbclkX1wyzRnIrdZehTEHw==",
-      "dev": true,
-      "requires": {
-        "alphanum-sort": "^1.0.2",
-        "browserslist": "^4.16.0",
-        "cssnano-utils": "^2.0.1",
-        "postcss-value-parser": "^4.1.0",
-        "uniqs": "^2.0.0"
-      }
-    },
-    "postcss-minify-selectors": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-minify-selectors/-/postcss-minify-selectors-5.1.0.tgz",
-      "integrity": "sha512-NzGBXDa7aPsAcijXZeagnJBKBPMYLaJJzB8CQh6ncvyl2sIndLVWfbcDi0SBjRWk5VqEjXvf8tYwzoKf4Z07og==",
-      "dev": true,
-      "requires": {
-        "alphanum-sort": "^1.0.2",
-        "postcss-selector-parser": "^6.0.5"
-      }
-    },
-    "postcss-modules-extract-imports": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz",
-      "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==",
-      "dev": true
-    },
-    "postcss-modules-local-by-default": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.0.tgz",
-      "integrity": "sha512-sT7ihtmGSF9yhm6ggikHdV0hlziDTX7oFoXtuVWeDd3hHObNkcHRo9V3yg7vCAY7cONyxJC/XXCmmiHHcvX7bQ==",
-      "dev": true,
-      "requires": {
-        "icss-utils": "^5.0.0",
-        "postcss-selector-parser": "^6.0.2",
-        "postcss-value-parser": "^4.1.0"
-      }
-    },
-    "postcss-modules-scope": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.0.0.tgz",
-      "integrity": "sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==",
-      "dev": true,
-      "requires": {
-        "postcss-selector-parser": "^6.0.4"
-      }
-    },
-    "postcss-modules-values": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz",
-      "integrity": "sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==",
-      "dev": true,
-      "requires": {
-        "icss-utils": "^5.0.0"
-      }
-    },
-    "postcss-normalize-charset": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-5.0.1.tgz",
-      "integrity": "sha512-6J40l6LNYnBdPSk+BHZ8SF+HAkS4q2twe5jnocgd+xWpz/mx/5Sa32m3W1AA8uE8XaXN+eg8trIlfu8V9x61eg==",
-      "dev": true
-    },
-    "postcss-normalize-display-values": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-display-values/-/postcss-normalize-display-values-5.0.1.tgz",
-      "integrity": "sha512-uupdvWk88kLDXi5HEyI9IaAJTE3/Djbcrqq8YgjvAVuzgVuqIk3SuJWUisT2gaJbZm1H9g5k2w1xXilM3x8DjQ==",
-      "dev": true,
-      "requires": {
-        "cssnano-utils": "^2.0.1",
-        "postcss-value-parser": "^4.1.0"
-      }
-    },
-    "postcss-normalize-positions": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-positions/-/postcss-normalize-positions-5.0.1.tgz",
-      "integrity": "sha512-rvzWAJai5xej9yWqlCb1OWLd9JjW2Ex2BCPzUJrbaXmtKtgfL8dBMOOMTX6TnvQMtjk3ei1Lswcs78qKO1Skrg==",
-      "dev": true,
-      "requires": {
-        "postcss-value-parser": "^4.1.0"
-      }
-    },
-    "postcss-normalize-repeat-style": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-repeat-style/-/postcss-normalize-repeat-style-5.0.1.tgz",
-      "integrity": "sha512-syZ2itq0HTQjj4QtXZOeefomckiV5TaUO6ReIEabCh3wgDs4Mr01pkif0MeVwKyU/LHEkPJnpwFKRxqWA/7O3w==",
-      "dev": true,
-      "requires": {
-        "cssnano-utils": "^2.0.1",
-        "postcss-value-parser": "^4.1.0"
-      }
-    },
-    "postcss-normalize-string": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-string/-/postcss-normalize-string-5.0.1.tgz",
-      "integrity": "sha512-Ic8GaQ3jPMVl1OEn2U//2pm93AXUcF3wz+OriskdZ1AOuYV25OdgS7w9Xu2LO5cGyhHCgn8dMXh9bO7vi3i9pA==",
-      "dev": true,
-      "requires": {
-        "postcss-value-parser": "^4.1.0"
-      }
-    },
-    "postcss-normalize-timing-functions": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-timing-functions/-/postcss-normalize-timing-functions-5.0.1.tgz",
-      "integrity": "sha512-cPcBdVN5OsWCNEo5hiXfLUnXfTGtSFiBU9SK8k7ii8UD7OLuznzgNRYkLZow11BkQiiqMcgPyh4ZqXEEUrtQ1Q==",
-      "dev": true,
-      "requires": {
-        "cssnano-utils": "^2.0.1",
-        "postcss-value-parser": "^4.1.0"
-      }
-    },
-    "postcss-normalize-unicode": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-unicode/-/postcss-normalize-unicode-5.0.1.tgz",
-      "integrity": "sha512-kAtYD6V3pK0beqrU90gpCQB7g6AOfP/2KIPCVBKJM2EheVsBQmx/Iof+9zR9NFKLAx4Pr9mDhogB27pmn354nA==",
-      "dev": true,
-      "requires": {
-        "browserslist": "^4.16.0",
-        "postcss-value-parser": "^4.1.0"
-      }
-    },
-    "postcss-normalize-url": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-url/-/postcss-normalize-url-5.0.2.tgz",
-      "integrity": "sha512-k4jLTPUxREQ5bpajFQZpx8bCF2UrlqOTzP9kEqcEnOfwsRshWs2+oAFIHfDQB8GO2PaUaSE0NlTAYtbluZTlHQ==",
-      "dev": true,
-      "requires": {
-        "is-absolute-url": "^3.0.3",
-        "normalize-url": "^6.0.1",
-        "postcss-value-parser": "^4.1.0"
-      }
-    },
-    "postcss-normalize-whitespace": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-whitespace/-/postcss-normalize-whitespace-5.0.1.tgz",
-      "integrity": "sha512-iPklmI5SBnRvwceb/XH568yyzK0qRVuAG+a1HFUsFRf11lEJTiQQa03a4RSCQvLKdcpX7XsI1Gen9LuLoqwiqA==",
-      "dev": true,
-      "requires": {
-        "postcss-value-parser": "^4.1.0"
-      }
-    },
-    "postcss-ordered-values": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-ordered-values/-/postcss-ordered-values-5.0.2.tgz",
-      "integrity": "sha512-8AFYDSOYWebJYLyJi3fyjl6CqMEG/UVworjiyK1r573I56kb3e879sCJLGvR3merj+fAdPpVplXKQZv+ey6CgQ==",
-      "dev": true,
-      "requires": {
-        "cssnano-utils": "^2.0.1",
-        "postcss-value-parser": "^4.1.0"
-      }
-    },
-    "postcss-reduce-initial": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-5.0.1.tgz",
-      "integrity": "sha512-zlCZPKLLTMAqA3ZWH57HlbCjkD55LX9dsRyxlls+wfuRfqCi5mSlZVan0heX5cHr154Dq9AfbH70LyhrSAezJw==",
-      "dev": true,
-      "requires": {
-        "browserslist": "^4.16.0",
-        "caniuse-api": "^3.0.0"
-      }
-    },
-    "postcss-reduce-transforms": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-reduce-transforms/-/postcss-reduce-transforms-5.0.1.tgz",
-      "integrity": "sha512-a//FjoPeFkRuAguPscTVmRQUODP+f3ke2HqFNgGPwdYnpeC29RZdCBvGRGTsKpMURb/I3p6jdKoBQ2zI+9Q7kA==",
-      "dev": true,
-      "requires": {
-        "cssnano-utils": "^2.0.1",
-        "postcss-value-parser": "^4.1.0"
-      }
-    },
-    "postcss-rtlcss": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/postcss-rtlcss/-/postcss-rtlcss-3.3.4.tgz",
-      "integrity": "sha512-3UM3E1uJvtc5mR5UIXYX1bgUxZgupgUi8cfk0alOT0rwHQ5evoJPFDYbGsaUsj6PWLJpWuh3zCY3zYFtS2sHTw==",
-      "dev": true,
-      "requires": {
-        "rtlcss": "^3.2.0"
-      }
-    },
-    "postcss-selector-parser": {
-      "version": "6.0.6",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.6.tgz",
-      "integrity": "sha512-9LXrvaaX3+mcv5xkg5kFwqSzSH1JIObIx51PrndZwlmznwXRfxMddDvo9gve3gVR8ZTKgoFDdWkbRFmEhT4PMg==",
-      "dev": true,
-      "requires": {
-        "cssesc": "^3.0.0",
-        "util-deprecate": "^1.0.2"
-      }
-    },
-    "postcss-svgo": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-5.0.2.tgz",
-      "integrity": "sha512-YzQuFLZu3U3aheizD+B1joQ94vzPfE6BNUcSYuceNxlVnKKsOtdo6hL9/zyC168Q8EwfLSgaDSalsUGa9f2C0A==",
-      "dev": true,
-      "requires": {
-        "postcss-value-parser": "^4.1.0",
-        "svgo": "^2.3.0"
-      },
-      "dependencies": {
-        "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,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
-          "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "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,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "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
-        },
-        "commander": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
-          "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
-          "dev": true
-        },
-        "css-select": {
-          "version": "4.1.3",
-          "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.1.3.tgz",
-          "integrity": "sha512-gT3wBNd9Nj49rAbmtFHj1cljIAOLYSX1nZ8CB7TBO3INYckygm5B7LISU/szY//YmdiSLbJvDLOx9VnMVpMBxA==",
-          "dev": true,
-          "requires": {
-            "boolbase": "^1.0.0",
-            "css-what": "^5.0.0",
-            "domhandler": "^4.2.0",
-            "domutils": "^2.6.0",
-            "nth-check": "^2.0.0"
-          }
-        },
-        "css-tree": {
-          "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
-          "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==",
-          "dev": true,
-          "requires": {
-            "mdn-data": "2.0.14",
-            "source-map": "^0.6.1"
-          }
-        },
-        "css-what": {
-          "version": "5.0.1",
-          "resolved": "https://registry.npmjs.org/css-what/-/css-what-5.0.1.tgz",
-          "integrity": "sha512-FYDTSHb/7KXsWICVsxdmiExPjCfRC4qRFBdVwv7Ax9hMnvMmEjP9RfxTEZ3qPZGmADDn2vAKSo9UcN1jKVYscg==",
-          "dev": true
-        },
-        "dom-serializer": {
-          "version": "1.3.2",
-          "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz",
-          "integrity": "sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==",
-          "dev": true,
-          "requires": {
-            "domelementtype": "^2.0.1",
-            "domhandler": "^4.2.0",
-            "entities": "^2.0.0"
-          }
-        },
-        "domelementtype": {
-          "version": "2.2.0",
-          "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz",
-          "integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==",
-          "dev": true
-        },
-        "domutils": {
-          "version": "2.7.0",
-          "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.7.0.tgz",
-          "integrity": "sha512-8eaHa17IwJUPAiB+SoTYBo5mCdeMgdcAoXJ59m6DT1vw+5iLS3gNoqYaRowaBKtGVrOF1Jz4yDTgYKLK2kvfJg==",
-          "dev": true,
-          "requires": {
-            "dom-serializer": "^1.0.1",
-            "domelementtype": "^2.2.0",
-            "domhandler": "^4.2.0"
-          }
-        },
-        "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
-        },
-        "mdn-data": {
-          "version": "2.0.14",
-          "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
-          "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==",
-          "dev": true
-        },
-        "nth-check": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.0.0.tgz",
-          "integrity": "sha512-i4sc/Kj8htBrAiH1viZ0TgU8Y5XqCaV/FziYK6TBczxmeKm3AEFWqqF3195yKudrarqy7Zu80Ra5dobFjn9X/Q==",
-          "dev": true,
-          "requires": {
-            "boolbase": "^1.0.0"
-          }
-        },
-        "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,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        },
-        "svgo": {
-          "version": "2.3.1",
-          "resolved": "https://registry.npmjs.org/svgo/-/svgo-2.3.1.tgz",
-          "integrity": "sha512-riDDIQgXpEnn0BEl9Gvhh1LNLIyiusSpt64IR8upJu7MwxnzetmF/Y57pXQD2NMX2lVyMRzXt5f2M5rO4wG7Dw==",
-          "dev": true,
-          "requires": {
-            "@trysound/sax": "0.1.1",
-            "chalk": "^4.1.0",
-            "commander": "^7.1.0",
-            "css-select": "^4.1.3",
-            "css-tree": "^1.1.2",
-            "csso": "^4.2.0",
-            "stable": "^0.1.8"
-          }
-        }
-      }
-    },
-    "postcss-unique-selectors": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-unique-selectors/-/postcss-unique-selectors-5.0.1.tgz",
-      "integrity": "sha512-gwi1NhHV4FMmPn+qwBNuot1sG1t2OmacLQ/AX29lzyggnjd+MnVD5uqQmpXO3J17KGL2WAxQruj1qTd3H0gG/w==",
-      "dev": true,
-      "requires": {
-        "alphanum-sort": "^1.0.2",
-        "postcss-selector-parser": "^6.0.5",
-        "uniqs": "^2.0.0"
-      }
-    },
-    "postcss-value-parser": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz",
-      "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==",
-      "dev": true
-    },
-    "prelude-ls": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz",
-      "integrity": "sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=",
-      "dev": true
-    },
-    "prepend-http": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz",
-      "integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=",
-      "dev": true,
-      "optional": true
-    },
-    "pretty-error": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/pretty-error/-/pretty-error-2.1.2.tgz",
-      "integrity": "sha512-EY5oDzmsX5wvuynAByrmY0P0hcp+QpnAKbJng2A2MPjVKXCxrDSUkzghVJ4ZGPIv+JC4gX8fPUWscC0RtjsWGw==",
-      "dev": true,
-      "requires": {
-        "lodash": "^4.17.20",
-        "renderkid": "^2.0.4"
-      }
-    },
-    "pretty-format": {
-      "version": "25.5.0",
-      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-25.5.0.tgz",
-      "integrity": "sha512-kbo/kq2LQ/A/is0PQwsEHM7Ca6//bGPPvU6UnsdDRSKTWxT/ru/xb88v4BJf6a69H+uTytOEsTusT9ksd/1iWQ==",
-      "dev": true,
-      "requires": {
-        "@jest/types": "^25.5.0",
-        "ansi-regex": "^5.0.0",
-        "ansi-styles": "^4.0.0",
-        "react-is": "^16.12.0"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "4.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
-          "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
-          "dev": true,
-          "requires": {
-            "@types/color-name": "^1.1.1",
-            "color-convert": "^2.0.1"
-          }
-        },
-        "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,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "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
-        }
-      }
-    },
-    "prettyjson": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/prettyjson/-/prettyjson-1.2.1.tgz",
-      "integrity": "sha1-/P+rQdGcq0365eV15kJGYZsS0ok=",
-      "dev": true,
-      "requires": {
-        "colors": "^1.1.2",
-        "minimist": "^1.2.0"
-      },
-      "dependencies": {
-        "colors": {
-          "version": "1.4.0",
-          "resolved": "https://registry.npmjs.org/colors/-/colors-1.4.0.tgz",
-          "integrity": "sha512-a+UqTh4kgZg/SlGvfbzDHpgRu7AAQOmmqRHJnxhRZICKFUT91brVhNNt58CMWU9PsBbv3PDCZUHbVxuDiH2mtA==",
-          "dev": true
-        }
-      }
-    },
-    "process-nextick-args": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
-      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
-      "dev": true
-    },
-    "progress": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz",
-      "integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==",
-      "dev": true
-    },
-    "prompts": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.3.2.tgz",
-      "integrity": "sha512-Q06uKs2CkNYVID0VqwfAl9mipo99zkBv/n2JtWY89Yxa3ZabWSrs0e2KTudKVa3peLUvYXMefDqIleLPVUBZMA==",
-      "dev": true,
-      "requires": {
-        "kleur": "^3.0.3",
-        "sisteransi": "^1.0.4"
-      }
-    },
-    "prop-types": {
-      "version": "15.7.2",
-      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
-      "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
-      "requires": {
-        "loose-envify": "^1.4.0",
-        "object-assign": "^4.1.1",
-        "react-is": "^16.8.1"
-      }
-    },
-    "prop-types-exact": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/prop-types-exact/-/prop-types-exact-1.2.0.tgz",
-      "integrity": "sha512-K+Tk3Kd9V0odiXFP9fwDHUYRyvK3Nun3GVyPapSIs5OBkITAm15W0CPFD/YKTkMUAbc0b9CUwRQp2ybiBIq+eA==",
-      "requires": {
-        "has": "^1.0.3",
-        "object.assign": "^4.1.0",
-        "reflect.ownkeys": "^0.2.0"
-      }
-    },
-    "prop-types-extra": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz",
-      "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==",
-      "requires": {
-        "react-is": "^16.3.2",
-        "warning": "^4.0.0"
-      }
-    },
-    "property-expr": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.4.tgz",
-      "integrity": "sha512-sFPkHQjVKheDNnPvotjQmm3KD3uk1fWKUN7CrpdbwmUx3CrG3QiM8QpTSimvig5vTXmTvjz7+TDvXOI9+4rkcg=="
-    },
-    "proto-list": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz",
-      "integrity": "sha1-IS1b/hMYMGpCD2QCuOJv85ZHqEk=",
-      "dev": true,
-      "optional": true
-    },
-    "proxy-addr": {
-      "version": "2.0.7",
-      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
-      "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
-      "dev": true,
-      "requires": {
-        "forwarded": "0.2.0",
-        "ipaddr.js": "1.9.1"
-      }
-    },
-    "pseudomap": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz",
-      "integrity": "sha1-8FKijacOYYkX7wqKw0wa5aaChrM=",
-      "dev": true,
-      "optional": true
-    },
-    "psl": {
-      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/psl/-/psl-1.8.0.tgz",
-      "integrity": "sha512-RIdOzyoavK+hA18OGGWDqUTsCLhtA7IcZ/6NCs4fFJaHBDab+pDDmDIByWFRQJq2Cd7r1OoQxBGKOaztq+hjIQ==",
-      "dev": true
-    },
-    "pubsub-js": {
-      "version": "1.9.3",
-      "resolved": "https://registry.npmjs.org/pubsub-js/-/pubsub-js-1.9.3.tgz",
-      "integrity": "sha512-FhYYlPNOywTh7zN38u5AlG67emA47w6JZd7YgdQU1w8gQbZhhIGxVM0AQosdaINHb2ALb+fhfnVyBJAt4D4IzA=="
-    },
-    "pump": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
-      "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
-      "dev": true,
-      "requires": {
-        "end-of-stream": "^1.1.0",
-        "once": "^1.3.1"
-      }
-    },
-    "punycode": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
-      "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
-      "dev": true
-    },
-    "q": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
-      "integrity": "sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=",
-      "dev": true
-    },
-    "qs": {
-      "version": "6.5.2",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
-      "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==",
-      "dev": true
-    },
-    "query-string": {
-      "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/query-string/-/query-string-2.4.2.tgz",
-      "integrity": "sha1-fbBmZCCAS6qSrp8miWKFWnYUPfs=",
-      "requires": {
-        "strict-uri-encode": "^1.0.0"
-      }
-    },
-    "querystring": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz",
-      "integrity": "sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA=",
-      "dev": true
-    },
-    "queue-microtask": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
-      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
-      "dev": true
-    },
-    "randombytes": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
-      "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==",
-      "dev": true,
-      "requires": {
-        "safe-buffer": "^5.1.0"
-      }
-    },
-    "range-parser": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
-      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
-      "dev": true
-    },
-    "raw-body": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.0.tgz",
-      "integrity": "sha512-4Oz8DUIwdvoa5qMJelxipzi/iJIi40O5cGV1wNYp5hvZP8ZN0T+jiNkL0QepXs+EsQ9XJ8ipEDoiH70ySUJP3Q==",
-      "dev": true,
-      "requires": {
-        "bytes": "3.1.0",
-        "http-errors": "1.7.2",
-        "iconv-lite": "0.4.24",
-        "unpipe": "1.0.0"
-      }
-    },
-    "react": {
-      "version": "16.14.0",
-      "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz",
-      "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==",
-      "requires": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1",
-        "prop-types": "^15.6.2"
-      }
-    },
-    "react-bootstrap": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-1.6.1.tgz",
-      "integrity": "sha512-ojEPQ6OtyIMdLg0Smofk+85PKN6MLKQX3bU0Vwmok/4yNa8DQ2vCGhO2IgHJvT+ERQZ4X+gAQcdn6msAHSwLBg==",
-      "requires": {
-        "@babel/runtime": "^7.14.0",
-        "@restart/context": "^2.1.4",
-        "@restart/hooks": "^0.3.26",
-        "@types/invariant": "^2.2.33",
-        "@types/prop-types": "^15.7.3",
-        "@types/react": ">=16.14.8",
-        "@types/react-transition-group": "^4.4.1",
-        "@types/warning": "^3.0.0",
-        "classnames": "^2.3.1",
-        "dom-helpers": "^5.2.1",
-        "invariant": "^2.2.4",
-        "prop-types": "^15.7.2",
-        "prop-types-extra": "^1.1.0",
-        "react-overlays": "^5.0.1",
-        "react-transition-group": "^4.4.1",
-        "uncontrollable": "^7.2.1",
-        "warning": "^4.0.3"
-      },
-      "dependencies": {
-        "@babel/runtime": {
-          "version": "7.14.6",
-          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.6.tgz",
-          "integrity": "sha512-/PCB2uJ7oM44tz8YhC4Z/6PeOKXp4K588f+5M3clr1M4zbqztlo0XEfJ2LEzj/FgwfgGcIdl8n7YYjTCI0BYwg==",
-          "requires": {
-            "regenerator-runtime": "^0.13.4"
-          }
-        },
-        "classnames": {
-          "version": "2.3.1",
-          "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
-          "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
-        },
-        "csstype": {
-          "version": "3.0.8",
-          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz",
-          "integrity": "sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw=="
-        },
-        "dom-helpers": {
-          "version": "5.2.1",
-          "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
-          "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
-          "requires": {
-            "@babel/runtime": "^7.8.7",
-            "csstype": "^3.0.2"
-          }
-        }
-      }
-    },
-    "react-clientside-effect": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/react-clientside-effect/-/react-clientside-effect-1.2.5.tgz",
-      "integrity": "sha512-2bL8qFW1TGBHozGGbVeyvnggRpMjibeZM2536AKNENLECutp2yfs44IL8Hmpn8qjFQ2K7A9PnYf3vc7aQq/cPA==",
-      "requires": {
-        "@babel/runtime": "^7.12.13"
-      },
-      "dependencies": {
-        "@babel/runtime": {
-          "version": "7.14.6",
-          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.6.tgz",
-          "integrity": "sha512-/PCB2uJ7oM44tz8YhC4Z/6PeOKXp4K588f+5M3clr1M4zbqztlo0XEfJ2LEzj/FgwfgGcIdl8n7YYjTCI0BYwg==",
-          "requires": {
-            "regenerator-runtime": "^0.13.4"
-          }
-        }
-      }
-    },
-    "react-dev-utils": {
-      "version": "11.0.4",
-      "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz",
-      "integrity": "sha512-dx0LvIGHcOPtKbeiSUM4jqpBl3TcY7CDjZdfOIcKeznE7BWr9dg0iPG90G5yfVQ+p/rGNMXdbfStvzQZEVEi4A==",
-      "dev": true,
-      "requires": {
-        "@babel/code-frame": "7.10.4",
-        "address": "1.1.2",
-        "browserslist": "4.14.2",
-        "chalk": "2.4.2",
-        "cross-spawn": "7.0.3",
-        "detect-port-alt": "1.1.6",
-        "escape-string-regexp": "2.0.0",
-        "filesize": "6.1.0",
-        "find-up": "4.1.0",
-        "fork-ts-checker-webpack-plugin": "4.1.6",
-        "global-modules": "2.0.0",
-        "globby": "11.0.1",
-        "gzip-size": "5.1.1",
-        "immer": "8.0.1",
-        "is-root": "2.1.0",
-        "loader-utils": "2.0.0",
-        "open": "^7.0.2",
-        "pkg-up": "3.1.0",
-        "prompts": "2.4.0",
-        "react-error-overlay": "^6.0.9",
-        "recursive-readdir": "2.2.2",
-        "shell-quote": "1.7.2",
-        "strip-ansi": "6.0.0",
-        "text-table": "0.2.0"
-      },
-      "dependencies": {
-        "array-union": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
-          "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
-          "dev": true
-        },
-        "browserslist": {
-          "version": "4.14.2",
-          "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.14.2.tgz",
-          "integrity": "sha512-HI4lPveGKUR0x2StIz+2FXfDk9SfVMrxn6PLh1JeGUwcuoDkdKZebWiyLRJ68iIPDpMI4JLVDf7S7XzslgWOhw==",
-          "dev": true,
-          "requires": {
-            "caniuse-lite": "^1.0.30001125",
-            "electron-to-chromium": "^1.3.564",
-            "escalade": "^3.0.2",
-            "node-releases": "^1.1.61"
-          }
-        },
-        "cross-spawn": {
-          "version": "7.0.3",
-          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-          "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-          "dev": true,
-          "requires": {
-            "path-key": "^3.1.0",
-            "shebang-command": "^2.0.0",
-            "which": "^2.0.1"
-          }
-        },
-        "escape-string-regexp": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz",
-          "integrity": "sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==",
-          "dev": true
-        },
-        "globby": {
-          "version": "11.0.1",
-          "resolved": "https://registry.npmjs.org/globby/-/globby-11.0.1.tgz",
-          "integrity": "sha512-iH9RmgwCmUJHi2z5o2l3eTtGBtXek1OYlHrbcxOYugyHLmAsZrPj43OtHThd62Buh/Vv6VyCBD2bdyWcGNQqoQ==",
-          "dev": true,
-          "requires": {
-            "array-union": "^2.1.0",
-            "dir-glob": "^3.0.1",
-            "fast-glob": "^3.1.1",
-            "ignore": "^5.1.4",
-            "merge2": "^1.3.0",
-            "slash": "^3.0.0"
-          }
-        },
-        "ignore": {
-          "version": "5.1.8",
-          "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.1.8.tgz",
-          "integrity": "sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw==",
-          "dev": true
-        },
-        "path-key": {
-          "version": "3.1.1",
-          "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-          "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-          "dev": true
-        },
-        "prompts": {
-          "version": "2.4.0",
-          "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.4.0.tgz",
-          "integrity": "sha512-awZAKrk3vN6CroQukBL+R9051a4R3zCZBlJm/HBfrSZ8iTpYix3VX1vU4mveiLpiwmOJT4wokTF9m6HUk4KqWQ==",
-          "dev": true,
-          "requires": {
-            "kleur": "^3.0.3",
-            "sisteransi": "^1.0.5"
-          }
-        },
-        "shebang-command": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-          "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-          "dev": true,
-          "requires": {
-            "shebang-regex": "^3.0.0"
-          }
-        },
-        "shebang-regex": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-          "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-          "dev": true
-        },
-        "slash": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
-          "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
-          "dev": true
-        },
-        "strip-ansi": {
-          "version": "6.0.0",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
-          "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
-          "dev": true,
-          "requires": {
-            "ansi-regex": "^5.0.0"
-          }
-        },
-        "which": {
-          "version": "2.0.2",
-          "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-          "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-          "dev": true,
-          "requires": {
-            "isexe": "^2.0.0"
-          }
-        }
-      }
-    },
-    "react-dom": {
-      "version": "16.14.0",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.14.0.tgz",
-      "integrity": "sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==",
-      "requires": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1",
-        "prop-types": "^15.6.2",
-        "scheduler": "^0.19.1"
-      }
-    },
-    "react-error-overlay": {
-      "version": "6.0.9",
-      "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz",
-      "integrity": "sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==",
-      "dev": true
-    },
-    "react-fast-compare": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
-      "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
-    },
-    "react-focus-lock": {
-      "version": "2.5.2",
-      "resolved": "https://registry.npmjs.org/react-focus-lock/-/react-focus-lock-2.5.2.tgz",
-      "integrity": "sha512-WzpdOnEqjf+/A3EH9opMZWauag7gV0BxFl+EY4ElA4qFqYsUsBLnmo2sELbN5OC30S16GAWMy16B9DLPpdJKAQ==",
-      "requires": {
-        "@babel/runtime": "^7.0.0",
-        "focus-lock": "^0.9.1",
-        "prop-types": "^15.6.2",
-        "react-clientside-effect": "^1.2.5",
-        "use-callback-ref": "^1.2.5",
-        "use-sidecar": "^1.0.5"
-      }
-    },
-    "react-focus-on": {
-      "version": "3.5.2",
-      "resolved": "https://registry.npmjs.org/react-focus-on/-/react-focus-on-3.5.2.tgz",
-      "integrity": "sha512-tpPxLqw9tEuElWmcr5jqw/ULfJjdHEnom0nBW9p6y75Zsa0wOfwQNqCHqCoJcHUqSBtKXqTuYduZoSTfTOTdJw==",
-      "requires": {
-        "aria-hidden": "^1.1.2",
-        "react-focus-lock": "^2.5.0",
-        "react-remove-scroll": "^2.4.1",
-        "react-style-singleton": "^2.1.1",
-        "use-callback-ref": "^1.2.5",
-        "use-sidecar": "^1.0.5"
-      }
-    },
-    "react-intl": {
-      "version": "2.9.0",
-      "resolved": "https://registry.npmjs.org/react-intl/-/react-intl-2.9.0.tgz",
-      "integrity": "sha512-27jnDlb/d2A7mSJwrbOBnUgD+rPep+abmoJE511Tf8BnoONIAUehy/U1zZCHGO17mnOwMWxqN4qC0nW11cD6rA==",
-      "requires": {
-        "hoist-non-react-statics": "^3.3.0",
-        "intl-format-cache": "^2.0.5",
-        "intl-messageformat": "^2.1.0",
-        "intl-relativeformat": "^2.1.0",
-        "invariant": "^2.1.1"
-      }
-    },
-    "react-is": {
-      "version": "16.13.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
-    },
-    "react-lifecycles-compat": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
-      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
-    },
-    "react-overlays": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-5.1.1.tgz",
-      "integrity": "sha512-eCN2s2/+GVZzpnId4XVWtvDPYYBD2EtOGP74hE+8yDskPzFy9+pV1H3ZZihxuRdEbQzzacySaaDkR7xE0ydl4Q==",
-      "requires": {
-        "@babel/runtime": "^7.13.8",
-        "@popperjs/core": "^2.8.6",
-        "@restart/hooks": "^0.3.26",
-        "@types/warning": "^3.0.0",
-        "dom-helpers": "^5.2.0",
-        "prop-types": "^15.7.2",
-        "uncontrollable": "^7.2.1",
-        "warning": "^4.0.3"
-      },
-      "dependencies": {
-        "@babel/runtime": {
-          "version": "7.14.6",
-          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.6.tgz",
-          "integrity": "sha512-/PCB2uJ7oM44tz8YhC4Z/6PeOKXp4K588f+5M3clr1M4zbqztlo0XEfJ2LEzj/FgwfgGcIdl8n7YYjTCI0BYwg==",
-          "requires": {
-            "regenerator-runtime": "^0.13.4"
-          }
-        },
-        "csstype": {
-          "version": "3.0.8",
-          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz",
-          "integrity": "sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw=="
-        },
-        "dom-helpers": {
-          "version": "5.2.1",
-          "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
-          "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
-          "requires": {
-            "@babel/runtime": "^7.8.7",
-            "csstype": "^3.0.2"
-          }
-        }
-      }
-    },
-    "react-popper": {
-      "version": "2.2.5",
-      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.2.5.tgz",
-      "integrity": "sha512-kxGkS80eQGtLl18+uig1UIf9MKixFSyPxglsgLBxlYnyDf65BiY9B3nZSc6C9XUNDgStROB0fMQlTEz1KxGddw==",
-      "requires": {
-        "react-fast-compare": "^3.0.1",
-        "warning": "^4.0.2"
-      },
-      "dependencies": {
-        "react-fast-compare": {
-          "version": "3.2.0",
-          "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
-          "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
-        }
-      }
-    },
-    "react-proptype-conditional-require": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/react-proptype-conditional-require/-/react-proptype-conditional-require-1.0.4.tgz",
-      "integrity": "sha1-acLVdB5t9eCPIw82u8KUTuEiJVU="
-    },
-    "react-redux": {
-      "version": "7.1.3",
-      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.1.3.tgz",
-      "integrity": "sha512-uI1wca+ECG9RoVkWQFF4jDMqmaw0/qnvaSvOoL/GA4dNxf6LoV8sUAcNDvE5NWKs4hFpn0t6wswNQnY3f7HT3w==",
-      "requires": {
-        "@babel/runtime": "^7.5.5",
-        "hoist-non-react-statics": "^3.3.0",
-        "invariant": "^2.2.4",
-        "loose-envify": "^1.4.0",
-        "prop-types": "^15.7.2",
-        "react-is": "^16.9.0"
-      }
-    },
-    "react-remove-scroll": {
-      "version": "2.4.3",
-      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.4.3.tgz",
-      "integrity": "sha512-lGWYXfV6jykJwbFpsuPdexKKzp96f3RbvGapDSIdcyGvHb7/eqyn46C7/6h+rUzYar1j5mdU+XECITHXCKBk9Q==",
-      "requires": {
-        "react-remove-scroll-bar": "^2.1.0",
-        "react-style-singleton": "^2.1.0",
-        "tslib": "^1.0.0",
-        "use-callback-ref": "^1.2.3",
-        "use-sidecar": "^1.0.1"
-      }
-    },
-    "react-remove-scroll-bar": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.2.0.tgz",
-      "integrity": "sha512-UU9ZBP1wdMR8qoUs7owiVcpaPwsQxUDC2lypP6mmixaGlARZa7ZIBx1jcuObLdhMOvCsnZcvetOho0wzPa9PYg==",
-      "requires": {
-        "react-style-singleton": "^2.1.0",
-        "tslib": "^1.0.0"
-      }
-    },
-    "react-responsive": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/react-responsive/-/react-responsive-8.1.0.tgz",
-      "integrity": "sha512-U8Nv2/ZWACIw/fAE9XNPbc2Xo33X5q1bcCASc2SufvJ9ifB+o/rokfogfznSVcvS22hN1rafGi0uZD6GiVFEHw==",
-      "requires": {
-        "hyphenate-style-name": "^1.0.0",
-        "matchmediaquery": "^0.3.0",
-        "prop-types": "^15.6.1",
-        "shallow-equal": "^1.1.0"
-      }
-    },
-    "react-router": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.1.2.tgz",
-      "integrity": "sha512-yjEuMFy1ONK246B+rsa0cUam5OeAQ8pyclRDgpxuSCrAlJ1qN9uZ5IgyKC7gQg0w8OM50NXHEegPh/ks9YuR2A==",
-      "requires": {
-        "@babel/runtime": "^7.1.2",
-        "history": "^4.9.0",
-        "hoist-non-react-statics": "^3.1.0",
-        "loose-envify": "^1.3.1",
-        "mini-create-react-context": "^0.3.0",
-        "path-to-regexp": "^1.7.0",
-        "prop-types": "^15.6.2",
-        "react-is": "^16.6.0",
-        "tiny-invariant": "^1.0.2",
-        "tiny-warning": "^1.0.0"
-      }
-    },
-    "react-router-dom": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.1.2.tgz",
-      "integrity": "sha512-7BPHAaIwWpZS074UKaw1FjVdZBSVWEk8IuDXdB+OkLb8vd/WRQIpA4ag9WQk61aEfQs47wHyjWUoUGGZxpQXew==",
-      "requires": {
-        "@babel/runtime": "^7.1.2",
-        "history": "^4.9.0",
-        "loose-envify": "^1.3.1",
-        "prop-types": "^15.6.2",
-        "react-router": "5.1.2",
-        "tiny-invariant": "^1.0.2",
-        "tiny-warning": "^1.0.0"
-      }
-    },
-    "react-style-singleton": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.1.1.tgz",
-      "integrity": "sha512-jNRp07Jza6CBqdRKNgGhT3u9umWvils1xsuMOjZlghBDH2MU0PL2WZor4PGYjXpnRCa9DQSlHMs/xnABWOwYbA==",
-      "requires": {
-        "get-nonce": "^1.0.0",
-        "invariant": "^2.2.4",
-        "tslib": "^1.0.0"
-      }
-    },
-    "react-table": {
-      "version": "7.7.0",
-      "resolved": "https://registry.npmjs.org/react-table/-/react-table-7.7.0.tgz",
-      "integrity": "sha512-jBlj70iBwOTvvImsU9t01LjFjy4sXEtclBovl3mTiqjz23Reu0DKnRza4zlLtOPACx6j2/7MrQIthIK1Wi+LIA=="
-    },
-    "react-test-renderer": {
-      "version": "16.9.0",
-      "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.9.0.tgz",
-      "integrity": "sha512-R62stB73qZyhrJo7wmCW9jgl/07ai+YzvouvCXIJLBkRlRqLx4j9RqcLEAfNfU3OxTGucqR2Whmn3/Aad6L3hQ==",
-      "dev": true,
-      "requires": {
-        "object-assign": "^4.1.1",
-        "prop-types": "^15.6.2",
-        "react-is": "^16.9.0",
-        "scheduler": "^0.15.0"
-      },
-      "dependencies": {
-        "scheduler": {
-          "version": "0.15.0",
-          "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.15.0.tgz",
-          "integrity": "sha512-xAefmSfN6jqAa7Kuq7LIJY0bwAPG3xlCj0HMEBQk1lxYiDKZscY2xJ5U/61ZTrYbmNQbXa+gc7czPkVo11tnCg==",
-          "dev": true,
-          "requires": {
-            "loose-envify": "^1.1.0",
-            "object-assign": "^4.1.1"
-          }
-        }
-      }
-    },
-    "react-transition-group": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz",
-      "integrity": "sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw==",
-      "requires": {
-        "@babel/runtime": "^7.5.5",
-        "dom-helpers": "^5.0.1",
-        "loose-envify": "^1.4.0",
-        "prop-types": "^15.6.2"
-      }
-    },
-    "reactifex": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/reactifex/-/reactifex-1.1.1.tgz",
-      "integrity": "sha512-HH2N/b5tRxh7ypIgCRsiBl/CTxRkTEPf9DhIstaM6hne4WiwM5/bBbWuvVlRZc/i3FdqZED3pZ//6n4mtxma4w==",
-      "dev": true
-    },
-    "read-pkg": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz",
-      "integrity": "sha1-jvHAYjxqbbDcZxPEv6xGMysjaPg=",
-      "dev": true,
-      "requires": {
-        "load-json-file": "^2.0.0",
-        "normalize-package-data": "^2.3.2",
-        "path-type": "^2.0.0"
-      },
-      "dependencies": {
-        "path-type": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/path-type/-/path-type-2.0.0.tgz",
-          "integrity": "sha1-8BLMuEFbcJb8LaoQVMPXI4lZTHM=",
-          "dev": true,
-          "requires": {
-            "pify": "^2.0.0"
-          }
-        },
-        "pify": {
-          "version": "2.3.0",
-          "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
-          "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
-          "dev": true
-        }
-      }
-    },
-    "read-pkg-up": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-2.0.0.tgz",
-      "integrity": "sha1-a3KoBImE4MQeeVEP1en6mbO1Sb4=",
-      "dev": true,
-      "requires": {
-        "find-up": "^2.0.0",
-        "read-pkg": "^2.0.0"
-      },
-      "dependencies": {
-        "find-up": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz",
-          "integrity": "sha1-RdG35QbHF93UgndaK3eSCjwMV6c=",
-          "dev": true,
-          "requires": {
-            "locate-path": "^2.0.0"
-          }
-        },
-        "locate-path": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-2.0.0.tgz",
-          "integrity": "sha1-K1aLJl7slExtnA3pw9u7ygNUzY4=",
-          "dev": true,
-          "requires": {
-            "p-locate": "^2.0.0",
-            "path-exists": "^3.0.0"
-          }
-        },
-        "p-limit": {
-          "version": "1.3.0",
-          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.3.0.tgz",
-          "integrity": "sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==",
-          "dev": true,
-          "requires": {
-            "p-try": "^1.0.0"
-          }
-        },
-        "p-locate": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-2.0.0.tgz",
-          "integrity": "sha1-IKAQOyIqcMj9OcwuWAaA893l7EM=",
-          "dev": true,
-          "requires": {
-            "p-limit": "^1.1.0"
-          }
-        },
-        "p-try": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/p-try/-/p-try-1.0.0.tgz",
-          "integrity": "sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M=",
-          "dev": true
-        },
-        "path-exists": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
-          "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=",
-          "dev": true
-        }
-      }
-    },
-    "readable-stream": {
-      "version": "2.3.7",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
-      "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
-      "dev": true,
-      "requires": {
-        "core-util-is": "~1.0.0",
-        "inherits": "~2.0.3",
-        "isarray": "~1.0.0",
-        "process-nextick-args": "~2.0.0",
-        "safe-buffer": "~5.1.1",
-        "string_decoder": "~1.1.1",
-        "util-deprecate": "~1.0.1"
-      },
-      "dependencies": {
-        "isarray": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-          "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
-          "dev": true
-        }
-      }
-    },
-    "readdirp": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-2.2.1.tgz",
-      "integrity": "sha512-1JU/8q+VgFZyxwrJ+SVIOsh+KywWGpds3NTqikiKpDMZWScmAYyKIgqkO+ARvNWJfXeXR1zxz7aHF4u4CyH6vQ==",
-      "dev": true,
-      "requires": {
-        "graceful-fs": "^4.1.11",
-        "micromatch": "^3.1.10",
-        "readable-stream": "^2.0.2"
-      }
-    },
-    "rechoir": {
-      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.7.0.tgz",
-      "integrity": "sha512-ADsDEH2bvbjltXEP+hTIAmeFekTFK0V2BTxMkok6qILyAJEXV0AFfoWcAq4yfll5VdIMd/RVXq0lR+wQi5ZU3Q==",
-      "dev": true,
-      "requires": {
-        "resolve": "^1.9.0"
-      }
-    },
-    "recursive-readdir": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.2.tgz",
-      "integrity": "sha512-nRCcW9Sj7NuZwa2XvH9co8NPeXUBhZP7CRKJtU+cS6PW9FpCIFoI5ib0NT1ZrbNuPoRy0ylyCaUL8Gih4LSyFg==",
-      "dev": true,
-      "requires": {
-        "minimatch": "3.0.4"
-      }
-    },
-    "redent": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/redent/-/redent-1.0.0.tgz",
-      "integrity": "sha1-z5Fqsf1fHxbfsggi3W7H9zDCr94=",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "indent-string": "^2.1.0",
-        "strip-indent": "^1.0.1"
-      }
-    },
-    "redux": {
-      "version": "4.0.5",
-      "resolved": "https://registry.npmjs.org/redux/-/redux-4.0.5.tgz",
-      "integrity": "sha512-VSz1uMAH24DM6MF72vcojpYPtrTUu3ByVWfPL1nPfVRb5mZVTve5GnNCUV53QM/BZ66xfWrm0CTWoM+Xlz8V1w==",
-      "requires": {
-        "loose-envify": "^1.4.0",
-        "symbol-observable": "^1.2.0"
-      }
-    },
-    "redux-thunk": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.3.0.tgz",
-      "integrity": "sha512-km6dclyFnmcvxhAcrQV2AkZmPQjzPDjgVlQtR0EQjxZPyJ0BnMf3in1ryuR8A2qU0HldVRfxYXbFSKlI3N7Slw=="
-    },
-    "reflect.ownkeys": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/reflect.ownkeys/-/reflect.ownkeys-0.2.0.tgz",
-      "integrity": "sha1-dJrO7H8/34tj+SegSAnpDFwLNGA="
-    },
-    "regenerate": {
-      "version": "1.4.2",
-      "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
-      "integrity": "sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==",
-      "dev": true
-    },
-    "regenerate-unicode-properties": {
-      "version": "8.2.0",
-      "resolved": "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-8.2.0.tgz",
-      "integrity": "sha512-F9DjY1vKLo/tPePDycuH3dn9H1OTPIkVD9Kz4LODu+F2C75mgjAJ7x/gwy6ZcSNRAAkhNlJSOHRe8k3p+K9WhA==",
-      "dev": true,
-      "requires": {
-        "regenerate": "^1.4.0"
-      }
-    },
-    "regenerator-runtime": {
-      "version": "0.13.7",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
-      "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew=="
-    },
-    "regenerator-transform": {
-      "version": "0.14.5",
-      "resolved": "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.14.5.tgz",
-      "integrity": "sha512-eOf6vka5IO151Jfsw2NO9WpGX58W6wWmefK3I1zEGr0lOD0u8rwPaNqQL1aRxUaxLeKO3ArNh3VYg1KbaD+FFw==",
-      "dev": true,
-      "requires": {
-        "@babel/runtime": "^7.8.4"
-      }
-    },
-    "regex-not": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/regex-not/-/regex-not-1.0.2.tgz",
-      "integrity": "sha512-J6SDjUgDxQj5NusnOtdFxDwN/+HWykR8GELwctJ7mdqhcyy1xEc4SRFHUXvxTp661YaVKAjfRLZ9cCqS6tn32A==",
-      "dev": true,
-      "requires": {
-        "extend-shallow": "^3.0.2",
-        "safe-regex": "^1.1.0"
-      }
-    },
-    "regex-parser": {
-      "version": "2.2.11",
-      "resolved": "https://registry.npmjs.org/regex-parser/-/regex-parser-2.2.11.tgz",
-      "integrity": "sha512-jbD/FT0+9MBU2XAZluI7w2OBs1RBi6p9M83nkoZayQXXU9e8Robt69FcZc7wU4eJD/YFTjn1JdCk3rbMJajz8Q==",
-      "dev": true
-    },
-    "regexp.prototype.flags": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.3.1.tgz",
-      "integrity": "sha512-JiBdRBq91WlY7uRJ0ds7R+dU02i6LKi8r3BuQhNXn+kmeLN+EfHhfjqMRis1zJxnlu88hq/4dx0P2OP3APRTOA==",
-      "dev": true,
-      "requires": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3"
-      }
-    },
-    "regexpp": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-2.0.1.tgz",
-      "integrity": "sha512-lv0M6+TkDVniA3aD1Eg0DVpfU/booSu7Eev3TDO/mZKHBfVjgCGTV4t4buppESEYDtkArYFOxTJWv6S5C+iaNw==",
-      "dev": true
-    },
-    "regexpu-core": {
-      "version": "4.7.1",
-      "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-4.7.1.tgz",
-      "integrity": "sha512-ywH2VUraA44DZQuRKzARmw6S66mr48pQVva4LBeRhcOltJ6hExvWly5ZjFLYo67xbIxb6W1q4bAGtgfEl20zfQ==",
-      "dev": true,
-      "requires": {
-        "regenerate": "^1.4.0",
-        "regenerate-unicode-properties": "^8.2.0",
-        "regjsgen": "^0.5.1",
-        "regjsparser": "^0.6.4",
-        "unicode-match-property-ecmascript": "^1.0.4",
-        "unicode-match-property-value-ecmascript": "^1.2.0"
-      }
-    },
-    "regjsgen": {
-      "version": "0.5.2",
-      "resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.5.2.tgz",
-      "integrity": "sha512-OFFT3MfrH90xIW8OOSyUrk6QHD5E9JOTeGodiJeBS3J6IwlgzJMNE/1bZklWz5oTg+9dCMyEetclvCVXOPoN3A==",
-      "dev": true
-    },
-    "regjsparser": {
-      "version": "0.6.9",
-      "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.6.9.tgz",
-      "integrity": "sha512-ZqbNRz1SNjLAiYuwY0zoXW8Ne675IX5q+YHioAGbCw4X96Mjl2+dcX9B2ciaeyYjViDAfvIjFpQjJgLttTEERQ==",
-      "dev": true,
-      "requires": {
-        "jsesc": "~0.5.0"
-      },
-      "dependencies": {
-        "jsesc": {
-          "version": "0.5.0",
-          "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz",
-          "integrity": "sha1-597mbjXW/Bb3EP6R1c9p9w8IkR0=",
-          "dev": true
-        }
-      }
-    },
-    "relateurl": {
-      "version": "0.2.7",
-      "resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz",
-      "integrity": "sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=",
-      "dev": true
-    },
-    "remove-trailing-separator": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz",
-      "integrity": "sha1-wkvOKig62tW8P1jg1IJJuSN52O8=",
-      "dev": true
-    },
-    "renderkid": {
-      "version": "2.0.7",
-      "resolved": "https://registry.npmjs.org/renderkid/-/renderkid-2.0.7.tgz",
-      "integrity": "sha512-oCcFyxaMrKsKcTY59qnCAtmDVSLfPbrv6A3tVbPdFMMrv5jaK10V6m40cKsoPNhAqN6rmHW9sswW4o3ruSrwUQ==",
-      "dev": true,
-      "requires": {
-        "css-select": "^4.1.3",
-        "dom-converter": "^0.2.0",
-        "htmlparser2": "^6.1.0",
-        "lodash": "^4.17.21",
-        "strip-ansi": "^3.0.1"
-      },
-      "dependencies": {
-        "ansi-regex": {
-          "version": "2.1.1",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
-          "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
-          "dev": true
-        },
-        "css-select": {
-          "version": "4.1.3",
-          "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.1.3.tgz",
-          "integrity": "sha512-gT3wBNd9Nj49rAbmtFHj1cljIAOLYSX1nZ8CB7TBO3INYckygm5B7LISU/szY//YmdiSLbJvDLOx9VnMVpMBxA==",
-          "dev": true,
-          "requires": {
-            "boolbase": "^1.0.0",
-            "css-what": "^5.0.0",
-            "domhandler": "^4.2.0",
-            "domutils": "^2.6.0",
-            "nth-check": "^2.0.0"
-          }
-        },
-        "css-what": {
-          "version": "5.0.1",
-          "resolved": "https://registry.npmjs.org/css-what/-/css-what-5.0.1.tgz",
-          "integrity": "sha512-FYDTSHb/7KXsWICVsxdmiExPjCfRC4qRFBdVwv7Ax9hMnvMmEjP9RfxTEZ3qPZGmADDn2vAKSo9UcN1jKVYscg==",
-          "dev": true
-        },
-        "dom-serializer": {
-          "version": "1.3.2",
-          "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz",
-          "integrity": "sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==",
-          "dev": true,
-          "requires": {
-            "domelementtype": "^2.0.1",
-            "domhandler": "^4.2.0",
-            "entities": "^2.0.0"
-          }
-        },
-        "domelementtype": {
-          "version": "2.2.0",
-          "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz",
-          "integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==",
-          "dev": true
-        },
-        "domutils": {
-          "version": "2.7.0",
-          "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.7.0.tgz",
-          "integrity": "sha512-8eaHa17IwJUPAiB+SoTYBo5mCdeMgdcAoXJ59m6DT1vw+5iLS3gNoqYaRowaBKtGVrOF1Jz4yDTgYKLK2kvfJg==",
-          "dev": true,
-          "requires": {
-            "dom-serializer": "^1.0.1",
-            "domelementtype": "^2.2.0",
-            "domhandler": "^4.2.0"
-          }
-        },
-        "nth-check": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.0.0.tgz",
-          "integrity": "sha512-i4sc/Kj8htBrAiH1viZ0TgU8Y5XqCaV/FziYK6TBczxmeKm3AEFWqqF3195yKudrarqy7Zu80Ra5dobFjn9X/Q==",
-          "dev": true,
-          "requires": {
-            "boolbase": "^1.0.0"
-          }
-        },
-        "strip-ansi": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
-          "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
-          "dev": true,
-          "requires": {
-            "ansi-regex": "^2.0.0"
-          }
-        }
-      }
-    },
-    "repeat-element": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/repeat-element/-/repeat-element-1.1.3.tgz",
-      "integrity": "sha512-ahGq0ZnV5m5XtZLMb+vP76kcAM5nkLqk0lpqAuojSKGgQtn4eRi4ZZGm2olo2zKFH+sMsWaqOCW1dqAnOru72g==",
-      "dev": true
-    },
-    "repeat-string": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz",
-      "integrity": "sha1-jcrkcOHIirwtYA//Sndihtp15jc=",
-      "dev": true
-    },
-    "repeating": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/repeating/-/repeating-2.0.1.tgz",
-      "integrity": "sha1-UhTFOpJtNVJwdSf7q0FdvAjQbdo=",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "is-finite": "^1.0.0"
-      }
-    },
-    "replace-ext": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/replace-ext/-/replace-ext-1.0.1.tgz",
-      "integrity": "sha512-yD5BHCe7quCgBph4rMQ+0KkIRKwWCrHDOX1p1Gp6HwjPM5kVoCdKGNhN7ydqqsX6lJEnQDKZ/tFMiEdQ1dvPEw==",
-      "dev": true
-    },
-    "request": {
-      "version": "2.88.2",
-      "resolved": "https://registry.npmjs.org/request/-/request-2.88.2.tgz",
-      "integrity": "sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==",
-      "dev": true,
-      "requires": {
-        "aws-sign2": "~0.7.0",
-        "aws4": "^1.8.0",
-        "caseless": "~0.12.0",
-        "combined-stream": "~1.0.6",
-        "extend": "~3.0.2",
-        "forever-agent": "~0.6.1",
-        "form-data": "~2.3.2",
-        "har-validator": "~5.1.3",
-        "http-signature": "~1.2.0",
-        "is-typedarray": "~1.0.0",
-        "isstream": "~0.1.2",
-        "json-stringify-safe": "~5.0.1",
-        "mime-types": "~2.1.19",
-        "oauth-sign": "~0.9.0",
-        "performance-now": "^2.1.0",
-        "qs": "~6.5.2",
-        "safe-buffer": "^5.1.2",
-        "tough-cookie": "~2.5.0",
-        "tunnel-agent": "^0.6.0",
-        "uuid": "^3.3.2"
-      },
-      "dependencies": {
-        "tough-cookie": {
-          "version": "2.5.0",
-          "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
-          "integrity": "sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==",
-          "dev": true,
-          "requires": {
-            "psl": "^1.1.28",
-            "punycode": "^2.1.1"
-          }
-        }
-      }
-    },
-    "request-promise-core": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/request-promise-core/-/request-promise-core-1.1.4.tgz",
-      "integrity": "sha512-TTbAfBBRdWD7aNNOoVOBH4pN/KigV6LyapYNNlAPA8JwbovRti1E88m3sYAwsLi5ryhPKsE9APwnjFTgdUjTpw==",
-      "dev": true,
-      "requires": {
-        "lodash": "^4.17.19"
-      }
-    },
-    "request-promise-native": {
-      "version": "1.0.9",
-      "resolved": "https://registry.npmjs.org/request-promise-native/-/request-promise-native-1.0.9.tgz",
-      "integrity": "sha512-wcW+sIUiWnKgNY0dqCpOZkUbF/I+YPi+f09JZIDa39Ec+q82CpSYniDp+ISgTTbKmnpJWASeJBPZmoxH84wt3g==",
-      "dev": true,
-      "requires": {
-        "request-promise-core": "1.1.4",
-        "stealthy-require": "^1.1.1",
-        "tough-cookie": "^2.3.3"
-      },
-      "dependencies": {
-        "tough-cookie": {
-          "version": "2.5.0",
-          "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
-          "integrity": "sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==",
-          "dev": true,
-          "requires": {
-            "psl": "^1.1.28",
-            "punycode": "^2.1.1"
-          }
-        }
-      }
-    },
-    "require-directory": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
-      "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I=",
-      "dev": true
-    },
-    "require-main-filename": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
-      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==",
-      "dev": true
-    },
-    "requires-port": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
-      "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
-      "dev": true
-    },
-    "reselect": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.0.0.tgz",
-      "integrity": "sha512-qUgANli03jjAyGlnbYVAV5vvnOmJnODyABz51RdBN7M4WaVu8mecZWgyQNkG8Yqe3KRGRt0l4K4B3XVEULC4CA=="
-    },
-    "resolve": {
-      "version": "1.17.0",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.17.0.tgz",
-      "integrity": "sha512-ic+7JYiV8Vi2yzQGFWOkiZD5Z9z7O2Zhm9XMaTxdJExKasieFCr+yXZ/WmXsckHiKl12ar0y6XiXDx3m4RHn1w==",
-      "dev": true,
-      "requires": {
-        "path-parse": "^1.0.6"
-      }
-    },
-    "resolve-cwd": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/resolve-cwd/-/resolve-cwd-3.0.0.tgz",
-      "integrity": "sha512-OrZaX2Mb+rJCpH/6CpSqt9xFVpN++x01XnN2ie9g6P5/3xelLAkXWVADpdz1IHD/KFfEXyE6V0U01OQ3UO2rEg==",
-      "dev": true,
-      "requires": {
-        "resolve-from": "^5.0.0"
-      },
-      "dependencies": {
-        "resolve-from": {
-          "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
-          "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
-          "dev": true
-        }
-      }
-    },
-    "resolve-from": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
-      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
-      "dev": true
-    },
-    "resolve-pathname": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz",
-      "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng=="
-    },
-    "resolve-url": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
-      "integrity": "sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=",
-      "dev": true
-    },
-    "resolve-url-loader": {
-      "version": "5.0.0-beta.1",
-      "resolved": "https://registry.npmjs.org/resolve-url-loader/-/resolve-url-loader-5.0.0-beta.1.tgz",
-      "integrity": "sha512-MXkuP7+etG/4H96tZnbUOX9g2KiJaEpJ7cnjmVZUYkIXWKh2soTZF/ghczKVw/qKZZplDDjZwR5xGztD9ex7KQ==",
-      "dev": true,
-      "requires": {
-        "adjust-sourcemap-loader": "^4.0.0",
-        "convert-source-map": "^1.7.0",
-        "loader-utils": "^2.0.0",
-        "postcss": "^8.2.14",
-        "source-map": "0.6.1"
-      }
-    },
-    "responselike": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/responselike/-/responselike-1.0.2.tgz",
-      "integrity": "sha1-kYcg7ztjHFZCvgaPFa3lpG9Loec=",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "lowercase-keys": "^1.0.0"
-      }
-    },
-    "restore-cursor": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz",
-      "integrity": "sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==",
-      "dev": true,
-      "requires": {
-        "onetime": "^5.1.0",
-        "signal-exit": "^3.0.2"
-      }
-    },
-    "ret": {
-      "version": "0.1.15",
-      "resolved": "https://registry.npmjs.org/ret/-/ret-0.1.15.tgz",
-      "integrity": "sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg==",
-      "dev": true
-    },
-    "retry": {
-      "version": "0.13.1",
-      "resolved": "https://registry.npmjs.org/retry/-/retry-0.13.1.tgz",
-      "integrity": "sha512-XQBQ3I8W1Cge0Seh+6gjj03LbmRFWuoszgK9ooCpwYIrhhoO80pfq4cUkU5DkknwfOfFteRwlZ56PYOGYyFWdg==",
-      "dev": true
-    },
-    "reusify": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
-      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
-      "dev": true
-    },
-    "rgb-regex": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/rgb-regex/-/rgb-regex-1.0.1.tgz",
-      "integrity": "sha1-wODWiC3w4jviVKR16O3UGRX+rrE=",
-      "dev": true
-    },
-    "rgba-regex": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/rgba-regex/-/rgba-regex-1.0.0.tgz",
-      "integrity": "sha1-QzdOLiyglosO8VI0YLfXMP8i7rM=",
-      "dev": true
-    },
-    "rimraf": {
-      "version": "2.7.1",
-      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
-      "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
-      "dev": true,
-      "requires": {
-        "glob": "^7.1.3"
-      }
-    },
-    "rsvp": {
-      "version": "4.8.5",
-      "resolved": "https://registry.npmjs.org/rsvp/-/rsvp-4.8.5.tgz",
-      "integrity": "sha512-nfMOlASu9OnRJo1mbEk2cz0D56a1MBNrJ7orjRZQG10XDyuvwksKbuXNp6qa+kbn839HwjwhBzhFmdsaEAfauA==",
-      "dev": true
-    },
-    "rtlcss": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/rtlcss/-/rtlcss-3.2.1.tgz",
-      "integrity": "sha512-S9bh35JXwPIhfun7nFu/HjlNrwELL5nvTJqA1suLfbnqY/mauIL5sBkrJNHziVppX9PA2rJ7NV82+RtzB71mJA==",
-      "dev": true,
-      "requires": {
-        "chalk": "^4.1.0",
-        "find-up": "^5.0.0",
-        "mkdirp": "^1.0.4",
-        "postcss": "^8.2.4",
-        "strip-json-comments": "^3.1.1"
-      },
-      "dependencies": {
-        "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,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
-          "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "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,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "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
-        },
-        "find-up": {
-          "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
-          "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
-          "dev": true,
-          "requires": {
-            "locate-path": "^6.0.0",
-            "path-exists": "^4.0.0"
-          }
-        },
-        "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
-        },
-        "locate-path": {
-          "version": "6.0.0",
-          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
-          "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
-          "dev": true,
-          "requires": {
-            "p-locate": "^5.0.0"
-          }
-        },
-        "mkdirp": {
-          "version": "1.0.4",
-          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
-          "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
-          "dev": true
-        },
-        "p-limit": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
-          "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
-          "dev": true,
-          "requires": {
-            "yocto-queue": "^0.1.0"
-          }
-        },
-        "p-locate": {
-          "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
-          "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
-          "dev": true,
-          "requires": {
-            "p-limit": "^3.0.2"
-          }
-        },
-        "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,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
-    "run-async": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.1.tgz",
-      "integrity": "sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ==",
-      "dev": true
-    },
-    "run-node": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/run-node/-/run-node-1.0.0.tgz",
-      "integrity": "sha512-kc120TBlQ3mih1LSzdAJXo4xn/GWS2ec0l3S+syHDXP9uRr0JAT8Qd3mdMuyjqCzeZktgP3try92cEgf9Nks8A==",
-      "dev": true
-    },
-    "run-parallel": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
-      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
-      "dev": true,
-      "requires": {
-        "queue-microtask": "^1.2.2"
-      }
-    },
-    "rx": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/rx/-/rx-4.1.0.tgz",
-      "integrity": "sha1-pfE/957zt0D+MKqAP7CfmIBdR4I=",
-      "dev": true
-    },
-    "rxjs": {
-      "version": "6.6.7",
-      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.7.tgz",
-      "integrity": "sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==",
-      "dev": true,
-      "requires": {
-        "tslib": "^1.9.0"
-      }
-    },
-    "safe-buffer": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
-      "dev": true
-    },
-    "safe-regex": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz",
-      "integrity": "sha1-QKNmnzsHfR6UPURinhV91IAjvy4=",
-      "dev": true,
-      "requires": {
-        "ret": "~0.1.10"
-      }
-    },
-    "safer-buffer": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
-      "dev": true
-    },
-    "sane": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/sane/-/sane-4.1.0.tgz",
-      "integrity": "sha512-hhbzAgTIX8O7SHfp2c8/kREfEn4qO/9q8C9beyY6+tvZ87EpoZ3i1RIEvp27YBswnNbY9mWd6paKVmKbAgLfZA==",
-      "dev": true,
-      "requires": {
-        "@cnakazawa/watch": "^1.0.3",
-        "anymatch": "^2.0.0",
-        "capture-exit": "^2.0.0",
-        "exec-sh": "^0.3.2",
-        "execa": "^1.0.0",
-        "fb-watchman": "^2.0.0",
-        "micromatch": "^3.1.4",
-        "minimist": "^1.1.1",
-        "walker": "~1.0.5"
-      }
-    },
-    "sass": {
-      "version": "1.26.11",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.26.11.tgz",
-      "integrity": "sha512-W1l/+vjGjIamsJ6OnTe0K37U2DBO/dgsv2Z4c89XQ8ZOO6l/VwkqwLSqoYzJeJs6CLuGSTRWc91GbQFL3lvrvw==",
-      "dev": true,
-      "requires": {
-        "chokidar": ">=2.0.0 <4.0.0"
-      }
-    },
-    "sass-loader": {
-      "version": "10.0.5",
-      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-10.0.5.tgz",
-      "integrity": "sha512-2LqoNPtKkZq/XbXNQ4C64GFEleSEHKv6NPSI+bMC/l+jpEXGJhiRYkAQToO24MR7NU4JRY2RpLpJ/gjo2Uf13w==",
-      "dev": true,
-      "requires": {
-        "klona": "^2.0.4",
-        "loader-utils": "^2.0.0",
-        "neo-async": "^2.6.2",
-        "schema-utils": "^3.0.0",
-        "semver": "^7.3.2"
-      },
-      "dependencies": {
-        "ajv": {
-          "version": "6.12.6",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-          "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-          "dev": true,
-          "requires": {
-            "fast-deep-equal": "^3.1.1",
-            "fast-json-stable-stringify": "^2.0.0",
-            "json-schema-traverse": "^0.4.1",
-            "uri-js": "^4.2.2"
-          }
-        },
-        "schema-utils": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.0.tgz",
-          "integrity": "sha512-tTEaeYkyIhEZ9uWgAjDerWov3T9MgX8dhhy2r0IGeeX4W8ngtGl1++dUve/RUqzuaASSh7shwCDJjEzthxki8w==",
-          "dev": true,
-          "requires": {
-            "@types/json-schema": "^7.0.7",
-            "ajv": "^6.12.5",
-            "ajv-keywords": "^3.5.2"
-          }
-        },
-        "semver": {
-          "version": "7.3.5",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
-          "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==",
-          "dev": true,
-          "requires": {
-            "lru-cache": "^6.0.0"
-          }
-        }
-      }
-    },
-    "sax": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
-      "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
-      "dev": true
-    },
-    "saxes": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/saxes/-/saxes-5.0.1.tgz",
-      "integrity": "sha512-5LBh1Tls8c9xgGjw3QrMwETmTMVk0oFgvrFSvWx62llR2hcEInrKNZ2GZCCuuy2lvWrdl5jhbpeqc5hRYKFOcw==",
-      "dev": true,
-      "requires": {
-        "xmlchars": "^2.2.0"
-      }
-    },
-    "scheduler": {
-      "version": "0.19.1",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.19.1.tgz",
-      "integrity": "sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==",
-      "requires": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1"
-      }
-    },
-    "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,
-      "requires": {
-        "@types/json-schema": "^7.0.5",
-        "ajv": "^6.12.4",
-        "ajv-keywords": "^3.5.2"
-      },
-      "dependencies": {
-        "ajv": {
-          "version": "6.12.6",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-          "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-          "dev": true,
-          "requires": {
-            "fast-deep-equal": "^3.1.1",
-            "fast-json-stable-stringify": "^2.0.0",
-            "json-schema-traverse": "^0.4.1",
-            "uri-js": "^4.2.2"
-          }
-        }
-      }
-    },
-    "seek-bzip": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/seek-bzip/-/seek-bzip-1.0.6.tgz",
-      "integrity": "sha512-e1QtP3YL5tWww8uKaOCQ18UxIT2laNBXHjV/S2WYCiK4udiv8lkG89KRIoCjUagnAmCBurjF4zEVX2ByBbnCjQ==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "commander": "^2.8.1"
-      },
-      "dependencies": {
-        "commander": {
-          "version": "2.20.3",
-          "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
-          "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
-          "dev": true,
-          "optional": true
-        }
-      }
-    },
-    "select-hose": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
-      "integrity": "sha1-Yl2GWPhlr0Psliv8N2o3NZpJlMo=",
-      "dev": true
-    },
-    "selfsigned": {
-      "version": "1.10.11",
-      "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.11.tgz",
-      "integrity": "sha512-aVmbPOfViZqOZPgRBT0+3u4yZFHpmnIghLMlAcb5/xhp5ZtB/RVnKhz5vl2M32CLXAqR4kha9zfhNg0Lf/sxKA==",
-      "dev": true,
-      "requires": {
-        "node-forge": "^0.10.0"
-      }
-    },
-    "semver": {
-      "version": "5.7.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-      "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
-      "dev": true
-    },
-    "semver-compare": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/semver-compare/-/semver-compare-1.0.0.tgz",
-      "integrity": "sha1-De4hahyUGrN+nvsXiPavxf9VN/w=",
-      "dev": true
-    },
-    "semver-regex": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/semver-regex/-/semver-regex-2.0.0.tgz",
-      "integrity": "sha512-mUdIBBvdn0PLOeP3TEkMH7HHeUP3GjsXCwKarjv/kGmUFOYg1VqEemKhoQpWMu6X2I8kHeuVdGibLGkVK+/5Qw==",
-      "dev": true,
-      "optional": true
-    },
-    "semver-truncate": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/semver-truncate/-/semver-truncate-1.1.2.tgz",
-      "integrity": "sha1-V/Qd5pcHpicJp+AQS6IRcQnqR+g=",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "semver": "^5.3.0"
-      }
-    },
-    "send": {
-      "version": "0.17.1",
-      "resolved": "https://registry.npmjs.org/send/-/send-0.17.1.tgz",
-      "integrity": "sha512-BsVKsiGcQMFwT8UxypobUKyv7irCNRHk1T0G680vk88yf6LBByGcZJOTJCrTP2xVN6yI+XjPJcNuE3V4fT9sAg==",
-      "dev": true,
-      "requires": {
-        "debug": "2.6.9",
-        "depd": "~1.1.2",
-        "destroy": "~1.0.4",
-        "encodeurl": "~1.0.2",
-        "escape-html": "~1.0.3",
-        "etag": "~1.8.1",
-        "fresh": "0.5.2",
-        "http-errors": "~1.7.2",
-        "mime": "1.6.0",
-        "ms": "2.1.1",
-        "on-finished": "~2.3.0",
-        "range-parser": "~1.2.1",
-        "statuses": "~1.5.0"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "2.6.9",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-          "dev": true,
-          "requires": {
-            "ms": "2.0.0"
-          },
-          "dependencies": {
-            "ms": {
-              "version": "2.0.0",
-              "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-              "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
-              "dev": true
-            }
-          }
-        },
-        "ms": {
-          "version": "2.1.1",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
-          "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==",
-          "dev": true
-        }
-      }
-    },
-    "serialize-javascript": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.0.tgz",
-      "integrity": "sha512-Qr3TosvguFt8ePWqsvRfrKyQXIiW+nGbYpy8XK24NQHE83caxWt+mIymTT19DGFbNWNLfEwsrkSmN64lVWB9ag==",
-      "dev": true,
-      "requires": {
-        "randombytes": "^2.1.0"
-      }
-    },
-    "serve-index": {
-      "version": "1.9.1",
-      "resolved": "https://registry.npmjs.org/serve-index/-/serve-index-1.9.1.tgz",
-      "integrity": "sha1-03aNabHn2C5c4FD/9bRTvqEqkjk=",
-      "dev": true,
-      "requires": {
-        "accepts": "~1.3.4",
-        "batch": "0.6.1",
-        "debug": "2.6.9",
-        "escape-html": "~1.0.3",
-        "http-errors": "~1.6.2",
-        "mime-types": "~2.1.17",
-        "parseurl": "~1.3.2"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "2.6.9",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-          "dev": true,
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
-        "http-errors": {
-          "version": "1.6.3",
-          "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",
-          "integrity": "sha1-i1VoC7S+KDoLW/TqLjhYC+HZMg0=",
-          "dev": true,
-          "requires": {
-            "depd": "~1.1.2",
-            "inherits": "2.0.3",
-            "setprototypeof": "1.1.0",
-            "statuses": ">= 1.4.0 < 2"
-          }
-        },
-        "inherits": {
-          "version": "2.0.3",
-          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
-          "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
-          "dev": true
-        },
-        "setprototypeof": {
-          "version": "1.1.0",
-          "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.0.tgz",
-          "integrity": "sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ==",
-          "dev": true
-        }
-      }
-    },
-    "serve-static": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.14.1.tgz",
-      "integrity": "sha512-JMrvUwE54emCYWlTI+hGrGv5I8dEwmco/00EvkzIIsR7MqrHonbD9pO2MOfFnpFntl7ecpZs+3mW+XbQZu9QCg==",
-      "dev": true,
-      "requires": {
-        "encodeurl": "~1.0.2",
-        "escape-html": "~1.0.3",
-        "parseurl": "~1.3.3",
-        "send": "0.17.1"
-      }
-    },
-    "set-blocking": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
-      "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=",
-      "dev": true
-    },
-    "set-value": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/set-value/-/set-value-2.0.1.tgz",
-      "integrity": "sha512-JxHc1weCN68wRY0fhCoXpyK55m/XPHafOmK4UWD7m2CI14GMcFypt4w/0+NV5f/ZMby2F6S2wwA7fgynh9gWSw==",
-      "dev": true,
-      "requires": {
-        "extend-shallow": "^2.0.1",
-        "is-extendable": "^0.1.1",
-        "is-plain-object": "^2.0.3",
-        "split-string": "^3.0.1"
-      },
-      "dependencies": {
-        "extend-shallow": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-          "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-          "dev": true,
-          "requires": {
-            "is-extendable": "^0.1.0"
-          }
-        }
-      }
-    },
-    "setprototypeof": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.1.tgz",
-      "integrity": "sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw==",
-      "dev": true
-    },
-    "shallow-clone": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-3.0.1.tgz",
-      "integrity": "sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==",
-      "dev": true,
-      "requires": {
-        "kind-of": "^6.0.2"
-      }
-    },
-    "shallow-equal": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/shallow-equal/-/shallow-equal-1.2.1.tgz",
-      "integrity": "sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA=="
-    },
-    "shebang-command": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
-      "integrity": "sha1-RKrGW2lbAzmJaMOfNj/uXer98eo=",
-      "dev": true,
-      "requires": {
-        "shebang-regex": "^1.0.0"
-      }
-    },
-    "shebang-regex": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-1.0.0.tgz",
-      "integrity": "sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=",
-      "dev": true
-    },
-    "shell-quote": {
-      "version": "1.7.2",
-      "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.7.2.tgz",
-      "integrity": "sha512-mRz/m/JVscCrkMyPqHc/bczi3OQHkLTqXHEFu0zDhK/qfv3UcOA4SVmRCLmos4bhjr9ekVQubj/R7waKapmiQg==",
-      "dev": true
-    },
-    "shellwords": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/shellwords/-/shellwords-0.1.1.tgz",
-      "integrity": "sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==",
-      "dev": true
-    },
-    "side-channel": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
-      "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
-      "dev": true,
-      "requires": {
-        "call-bind": "^1.0.0",
-        "get-intrinsic": "^1.0.2",
-        "object-inspect": "^1.9.0"
-      },
-      "dependencies": {
-        "object-inspect": {
-          "version": "1.10.3",
-          "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.10.3.tgz",
-          "integrity": "sha512-e5mCJlSH7poANfC8z8S9s9S2IN5/4Zb3aZ33f5s8YqoazCFzNLloLU8r5VCG+G7WoqLvAAZoVMcy3tp/3X0Plw==",
-          "dev": true
-        }
-      }
-    },
-    "signal-exit": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.3.tgz",
-      "integrity": "sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==",
-      "dev": true
-    },
-    "sisteransi": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
-      "integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==",
-      "dev": true
-    },
-    "slash": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz",
-      "integrity": "sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==",
-      "dev": true
-    },
-    "slice-ansi": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-2.1.0.tgz",
-      "integrity": "sha512-Qu+VC3EwYLldKa1fCxuuvULvSJOKEgk9pi8dZeCVK7TqBfUNTH4sFkk4joj8afVSfAYgJoSOetjx9QWOJ5mYoQ==",
-      "dev": true,
-      "requires": {
-        "ansi-styles": "^3.2.0",
-        "astral-regex": "^1.0.0",
-        "is-fullwidth-code-point": "^2.0.0"
-      },
-      "dependencies": {
-        "is-fullwidth-code-point": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
-          "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
-          "dev": true
-        }
-      }
-    },
-    "snapdragon": {
-      "version": "0.8.2",
-      "resolved": "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.2.tgz",
-      "integrity": "sha512-FtyOnWN/wCHTVXOMwvSv26d+ko5vWlIDD6zoUJ7LW8vh+ZBC8QdljveRP+crNrtBwioEUWy/4dMtbBjA4ioNlg==",
-      "dev": true,
-      "requires": {
-        "base": "^0.11.1",
-        "debug": "^2.2.0",
-        "define-property": "^0.2.5",
-        "extend-shallow": "^2.0.1",
-        "map-cache": "^0.2.2",
-        "source-map": "^0.5.6",
-        "source-map-resolve": "^0.5.0",
-        "use": "^3.1.0"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "2.6.9",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-          "dev": true,
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
-        "define-property": {
-          "version": "0.2.5",
-          "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
-          "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
-          "dev": true,
-          "requires": {
-            "is-descriptor": "^0.1.0"
-          }
-        },
-        "extend-shallow": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-          "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-          "dev": true,
-          "requires": {
-            "is-extendable": "^0.1.0"
-          }
-        },
-        "source-map": {
-          "version": "0.5.7",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
-          "dev": true
-        }
-      }
-    },
-    "snapdragon-node": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/snapdragon-node/-/snapdragon-node-2.1.1.tgz",
-      "integrity": "sha512-O27l4xaMYt/RSQ5TR3vpWCAB5Kb/czIcqUFOM/C4fYcLnbZUc1PkjTAMjof2pBWaSTwOUd6qUHcFGVGj7aIwnw==",
-      "dev": true,
-      "requires": {
-        "define-property": "^1.0.0",
-        "isobject": "^3.0.0",
-        "snapdragon-util": "^3.0.1"
-      },
-      "dependencies": {
-        "define-property": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
-          "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=",
-          "dev": true,
-          "requires": {
-            "is-descriptor": "^1.0.0"
-          }
-        },
-        "is-accessor-descriptor": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
-          "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==",
-          "dev": true,
-          "requires": {
-            "kind-of": "^6.0.0"
-          }
-        },
-        "is-data-descriptor": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz",
-          "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==",
-          "dev": true,
-          "requires": {
-            "kind-of": "^6.0.0"
-          }
-        },
-        "is-descriptor": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz",
-          "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==",
-          "dev": true,
-          "requires": {
-            "is-accessor-descriptor": "^1.0.0",
-            "is-data-descriptor": "^1.0.0",
-            "kind-of": "^6.0.2"
-          }
-        }
-      }
-    },
-    "snapdragon-util": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/snapdragon-util/-/snapdragon-util-3.0.1.tgz",
-      "integrity": "sha512-mbKkMdQKsjX4BAL4bRYTj21edOf8cN7XHdYUJEe+Zn99hVEYcMvKPct1IqNe7+AZPirn8BCDOQBHQZknqmKlZQ==",
-      "dev": true,
-      "requires": {
-        "kind-of": "^3.2.0"
-      },
-      "dependencies": {
-        "is-buffer": {
-          "version": "1.1.6",
-          "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
-          "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
-          "dev": true
-        },
-        "kind-of": {
-          "version": "3.2.2",
-          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-          "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
-          "dev": true,
-          "requires": {
-            "is-buffer": "^1.1.5"
-          }
-        }
-      }
-    },
-    "sockjs": {
-      "version": "0.3.21",
-      "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.21.tgz",
-      "integrity": "sha512-DhbPFGpxjc6Z3I+uX07Id5ZO2XwYsWOrYjaSeieES78cq+JaJvVe5q/m1uvjIQhXinhIeCFRH6JgXe+mvVMyXw==",
-      "dev": true,
-      "requires": {
-        "faye-websocket": "^0.11.3",
-        "uuid": "^3.4.0",
-        "websocket-driver": "^0.7.4"
-      }
-    },
-    "sort-keys": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/sort-keys/-/sort-keys-1.1.2.tgz",
-      "integrity": "sha1-RBttTTRnmPG05J6JIK37oOVD+a0=",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "is-plain-obj": "^1.0.0"
-      }
-    },
-    "sort-keys-length": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/sort-keys-length/-/sort-keys-length-1.0.1.tgz",
-      "integrity": "sha1-nLb09OnkgVWmqgZx7dM2/xR5oYg=",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "sort-keys": "^1.0.0"
-      }
-    },
-    "source-list-map": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
-      "integrity": "sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw==",
-      "dev": true
-    },
-    "source-map": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "dev": true
-    },
-    "source-map-js": {
-      "version": "0.6.2",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-0.6.2.tgz",
-      "integrity": "sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug==",
-      "dev": true
-    },
-    "source-map-loader": {
-      "version": "0.2.4",
-      "resolved": "https://registry.npmjs.org/source-map-loader/-/source-map-loader-0.2.4.tgz",
-      "integrity": "sha512-OU6UJUty+i2JDpTItnizPrlpOIBLmQbWMuBg9q5bVtnHACqw1tn9nNwqJLbv0/00JjnJb/Ee5g5WS5vrRv7zIQ==",
-      "dev": true,
-      "requires": {
-        "async": "^2.5.0",
-        "loader-utils": "^1.1.0"
-      },
-      "dependencies": {
-        "json5": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
-          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
-          "dev": true,
-          "requires": {
-            "minimist": "^1.2.0"
-          }
-        },
-        "loader-utils": {
-          "version": "1.4.0",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz",
-          "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
-          "dev": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^1.0.1"
-          }
-        }
-      }
-    },
-    "source-map-resolve": {
-      "version": "0.5.3",
-      "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.5.3.tgz",
-      "integrity": "sha512-Htz+RnsXWk5+P2slx5Jh3Q66vhQj1Cllm0zvnaY98+NFx+Dv2CF/f5O/t8x+KaNdrdIAsruNzoh/KpialbqAnw==",
-      "dev": true,
-      "requires": {
-        "atob": "^2.1.2",
-        "decode-uri-component": "^0.2.0",
-        "resolve-url": "^0.2.1",
-        "source-map-url": "^0.4.0",
-        "urix": "^0.1.0"
-      }
-    },
-    "source-map-support": {
-      "version": "0.5.19",
-      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.19.tgz",
-      "integrity": "sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==",
-      "dev": true,
-      "requires": {
-        "buffer-from": "^1.0.0",
-        "source-map": "^0.6.0"
-      }
-    },
-    "source-map-url": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/source-map-url/-/source-map-url-0.4.0.tgz",
-      "integrity": "sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM=",
-      "dev": true
-    },
-    "spawn-sync": {
-      "version": "1.0.15",
-      "resolved": "https://registry.npmjs.org/spawn-sync/-/spawn-sync-1.0.15.tgz",
-      "integrity": "sha1-sAeZVX63+wyDdsKdROih6mfldHY=",
-      "dev": true,
-      "requires": {
-        "concat-stream": "^1.4.7",
-        "os-shim": "^0.1.2"
-      }
-    },
-    "spdx-correct": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.1.tgz",
-      "integrity": "sha512-cOYcUWwhCuHCXi49RhFRCyJEK3iPj1Ziz9DpViV3tbZOwXD49QzIN3MpOLJNxh2qwq2lJJZaKMVw9qNi4jTC0w==",
-      "dev": true,
-      "requires": {
-        "spdx-expression-parse": "^3.0.0",
-        "spdx-license-ids": "^3.0.0"
-      }
-    },
-    "spdx-exceptions": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.3.0.tgz",
-      "integrity": "sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A==",
-      "dev": true
-    },
-    "spdx-expression-parse": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz",
-      "integrity": "sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==",
-      "dev": true,
-      "requires": {
-        "spdx-exceptions": "^2.1.0",
-        "spdx-license-ids": "^3.0.0"
-      }
-    },
-    "spdx-license-ids": {
-      "version": "3.0.5",
-      "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.5.tgz",
-      "integrity": "sha512-J+FWzZoynJEXGphVIS+XEh3kFSjZX/1i9gFBaWQcB+/tmpe2qUsSBABpcxqxnAxFdiUFEgAX1bjYGQvIZmoz9Q==",
-      "dev": true
-    },
-    "spdy": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/spdy/-/spdy-4.0.2.tgz",
-      "integrity": "sha512-r46gZQZQV+Kl9oItvl1JZZqJKGr+oEkB08A6BzkiR7593/7IbtuncXHd2YoYeTsG4157ZssMu9KYvUHLcjcDoA==",
-      "dev": true,
-      "requires": {
-        "debug": "^4.1.0",
-        "handle-thing": "^2.0.0",
-        "http-deceiver": "^1.2.7",
-        "select-hose": "^2.0.0",
-        "spdy-transport": "^3.0.0"
-      }
-    },
-    "spdy-transport": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/spdy-transport/-/spdy-transport-3.0.0.tgz",
-      "integrity": "sha512-hsLVFE5SjA6TCisWeJXFKniGGOpBgMLmerfO2aCyCU5s7nJ/rpAepqmFifv/GCbSbueEeAJJnmSQ2rKC/g8Fcw==",
-      "dev": true,
-      "requires": {
-        "debug": "^4.1.0",
-        "detect-node": "^2.0.4",
-        "hpack.js": "^2.1.6",
-        "obuf": "^1.1.2",
-        "readable-stream": "^3.0.6",
-        "wbuf": "^1.7.3"
-      },
-      "dependencies": {
-        "readable-stream": {
-          "version": "3.6.0",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
-          "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
-          "dev": true,
-          "requires": {
-            "inherits": "^2.0.3",
-            "string_decoder": "^1.1.1",
-            "util-deprecate": "^1.0.1"
-          }
-        }
-      }
-    },
-    "split-string": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz",
-      "integrity": "sha512-NzNVhJDYpwceVVii8/Hu6DKfD2G+NrQHlS/V/qgv763EYudVwEcMQNxd2lh+0VrUByXN/oJkl5grOhYWvQUYiw==",
-      "dev": true,
-      "requires": {
-        "extend-shallow": "^3.0.0"
-      }
-    },
-    "sprintf-js": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
-      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
-      "dev": true
-    },
-    "squeak": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/squeak/-/squeak-1.3.0.tgz",
-      "integrity": "sha1-MwRQN7ZDiLVnZ0uEMiplIQc5FsM=",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "chalk": "^1.0.0",
-        "console-stream": "^0.1.1",
-        "lpad-align": "^1.0.1"
-      },
-      "dependencies": {
-        "ansi-regex": {
-          "version": "2.1.1",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
-          "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
-          "dev": true,
-          "optional": true
-        },
-        "ansi-styles": {
-          "version": "2.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
-          "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
-          "dev": true,
-          "optional": true
-        },
-        "chalk": {
-          "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
-          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^2.2.1",
-            "escape-string-regexp": "^1.0.2",
-            "has-ansi": "^2.0.0",
-            "strip-ansi": "^3.0.0",
-            "supports-color": "^2.0.0"
-          }
-        },
-        "strip-ansi": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
-          "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-regex": "^2.0.0"
-          }
-        },
-        "supports-color": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
-          "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
-          "dev": true,
-          "optional": true
-        }
-      }
-    },
-    "sshpk": {
-      "version": "1.16.1",
-      "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.16.1.tgz",
-      "integrity": "sha512-HXXqVUq7+pcKeLqqZj6mHFUMvXtOJt1uoUx09pFW6011inTMxqI8BA8PM95myrIyyKwdnzjdFjLiE6KBPVtJIg==",
-      "dev": true,
-      "requires": {
-        "asn1": "~0.2.3",
-        "assert-plus": "^1.0.0",
-        "bcrypt-pbkdf": "^1.0.0",
-        "dashdash": "^1.12.0",
-        "ecc-jsbn": "~0.1.1",
-        "getpass": "^0.1.1",
-        "jsbn": "~0.1.0",
-        "safer-buffer": "^2.0.2",
-        "tweetnacl": "~0.14.0"
-      }
-    },
-    "stable": {
-      "version": "0.1.8",
-      "resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz",
-      "integrity": "sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==",
-      "dev": true
-    },
-    "stack-trace": {
-      "version": "0.0.10",
-      "resolved": "https://registry.npmjs.org/stack-trace/-/stack-trace-0.0.10.tgz",
-      "integrity": "sha1-VHxws0fo0ytOEI6hoqFZ5f3eGcA=",
-      "dev": true
-    },
-    "stack-utils": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/stack-utils/-/stack-utils-1.0.2.tgz",
-      "integrity": "sha512-MTX+MeG5U994cazkjd/9KNAapsHnibjMLnfXodlkXw76JEea0UiNzrqidzo1emMwk7w5Qhc9jd4Bn9TBb1MFwA==",
-      "dev": true
-    },
-    "static-extend": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/static-extend/-/static-extend-0.1.2.tgz",
-      "integrity": "sha1-YICcOcv/VTNyJv1eC1IPNB8ftcY=",
-      "dev": true,
-      "requires": {
-        "define-property": "^0.2.5",
-        "object-copy": "^0.1.0"
-      },
-      "dependencies": {
-        "define-property": {
-          "version": "0.2.5",
-          "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
-          "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
-          "dev": true,
-          "requires": {
-            "is-descriptor": "^0.1.0"
-          }
-        }
-      }
-    },
-    "statuses": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
-      "integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=",
-      "dev": true
-    },
-    "stealthy-require": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/stealthy-require/-/stealthy-require-1.1.1.tgz",
-      "integrity": "sha1-NbCYdbT/SfJqd35QmzCQoyJr8ks=",
-      "dev": true
-    },
-    "stream-events": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/stream-events/-/stream-events-1.0.5.tgz",
-      "integrity": "sha512-E1GUzBSgvct8Jsb3v2X15pjzN1tYebtbLaMg+eBOUOAxgbLoSbT2NS91ckc5lJD1KfLjId+jXJRgo0qnV5Nerg==",
-      "dev": true,
-      "requires": {
-        "stubs": "^3.0.0"
-      }
-    },
-    "strict-uri-encode": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz",
-      "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM="
-    },
-    "string_decoder": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
-      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
-      "dev": true,
-      "requires": {
-        "safe-buffer": "~5.1.0"
-      }
-    },
-    "string-length": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/string-length/-/string-length-4.0.2.tgz",
-      "integrity": "sha512-+l6rNN5fYHNhZZy41RXsYptCjA2Igmq4EG7kZAYFQI1E1VTXarr6ZPXBg6eq7Y6eK4FEhY6AJlyuFIb/v/S0VQ==",
-      "dev": true,
-      "requires": {
-        "char-regex": "^1.0.2",
-        "strip-ansi": "^6.0.0"
-      },
-      "dependencies": {
-        "strip-ansi": {
-          "version": "6.0.0",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
-          "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
-          "dev": true,
-          "requires": {
-            "ansi-regex": "^5.0.0"
-          }
-        }
-      }
-    },
-    "string-width": {
-      "version": "4.2.2",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.2.tgz",
-      "integrity": "sha512-XBJbT3N4JhVumXE0eoLU9DCjcaF92KLNqTmFCnG1pf8duUxFGwtP6AD6nkjw9a3IdiRtL3E2w3JDiE/xi3vOeA==",
-      "dev": true,
-      "requires": {
-        "emoji-regex": "^8.0.0",
-        "is-fullwidth-code-point": "^3.0.0",
-        "strip-ansi": "^6.0.0"
-      },
-      "dependencies": {
-        "strip-ansi": {
-          "version": "6.0.0",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
-          "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
-          "dev": true,
-          "requires": {
-            "ansi-regex": "^5.0.0"
-          }
-        }
-      }
-    },
-    "string.prototype.matchall": {
-      "version": "4.0.5",
-      "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.5.tgz",
-      "integrity": "sha512-Z5ZaXO0svs0M2xd/6By3qpeKpLKd9mO4v4q3oMEQrk8Ck4xOD5d5XeBOOjGrmVZZ/AHB1S0CgG4N5r1G9N3E2Q==",
-      "dev": true,
-      "requires": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.18.2",
-        "get-intrinsic": "^1.1.1",
-        "has-symbols": "^1.0.2",
-        "internal-slot": "^1.0.3",
-        "regexp.prototype.flags": "^1.3.1",
-        "side-channel": "^1.0.4"
-      },
-      "dependencies": {
-        "es-abstract": {
-          "version": "1.18.3",
-          "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.18.3.tgz",
-          "integrity": "sha512-nQIr12dxV7SSxE6r6f1l3DtAeEYdsGpps13dR0TwJg1S8gyp4ZPgy3FZcHBgbiQqnoqSTb+oC+kO4UQ0C/J8vw==",
-          "dev": true,
-          "requires": {
-            "call-bind": "^1.0.2",
-            "es-to-primitive": "^1.2.1",
-            "function-bind": "^1.1.1",
-            "get-intrinsic": "^1.1.1",
-            "has": "^1.0.3",
-            "has-symbols": "^1.0.2",
-            "is-callable": "^1.2.3",
-            "is-negative-zero": "^2.0.1",
-            "is-regex": "^1.1.3",
-            "is-string": "^1.0.6",
-            "object-inspect": "^1.10.3",
-            "object-keys": "^1.1.1",
-            "object.assign": "^4.1.2",
-            "string.prototype.trimend": "^1.0.4",
-            "string.prototype.trimstart": "^1.0.4",
-            "unbox-primitive": "^1.0.1"
-          }
-        },
-        "has-symbols": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.2.tgz",
-          "integrity": "sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw==",
-          "dev": true
-        },
-        "is-callable": {
-          "version": "1.2.3",
-          "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.3.tgz",
-          "integrity": "sha512-J1DcMe8UYTBSrKezuIUTUwjXsho29693unXM2YhJUTR2txK/eG47bvNa/wipPFmZFgr/N6f1GA66dv0mEyTIyQ==",
-          "dev": true
-        },
-        "is-regex": {
-          "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.3.tgz",
-          "integrity": "sha512-qSVXFz28HM7y+IWX6vLCsexdlvzT1PJNFSBuaQLQ5o0IEw8UDYW6/2+eCMVyIsbM8CNLX2a/QWmSpyxYEHY7CQ==",
-          "dev": true,
-          "requires": {
-            "call-bind": "^1.0.2",
-            "has-symbols": "^1.0.2"
-          }
-        },
-        "object-inspect": {
-          "version": "1.10.3",
-          "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.10.3.tgz",
-          "integrity": "sha512-e5mCJlSH7poANfC8z8S9s9S2IN5/4Zb3aZ33f5s8YqoazCFzNLloLU8r5VCG+G7WoqLvAAZoVMcy3tp/3X0Plw==",
-          "dev": true
-        },
-        "object.assign": {
-          "version": "4.1.2",
-          "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.2.tgz",
-          "integrity": "sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==",
-          "dev": true,
-          "requires": {
-            "call-bind": "^1.0.0",
-            "define-properties": "^1.1.3",
-            "has-symbols": "^1.0.1",
-            "object-keys": "^1.1.1"
-          }
-        },
-        "string.prototype.trimend": {
-          "version": "1.0.4",
-          "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.4.tgz",
-          "integrity": "sha512-y9xCjw1P23Awk8EvTpcyL2NIr1j7wJ39f+k6lvRnSMz+mz9CGz9NYPelDk42kOz6+ql8xjfK8oYzy3jAP5QU5A==",
-          "dev": true,
-          "requires": {
-            "call-bind": "^1.0.2",
-            "define-properties": "^1.1.3"
-          }
-        },
-        "string.prototype.trimstart": {
-          "version": "1.0.4",
-          "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.4.tgz",
-          "integrity": "sha512-jh6e984OBfvxS50tdY2nRZnoC5/mLFKOREQfw8t5yytkoUsJRNxvI/E39qu1sD0OtWI3OC0XgKSmcWwziwYuZw==",
-          "dev": true,
-          "requires": {
-            "call-bind": "^1.0.2",
-            "define-properties": "^1.1.3"
-          }
-        }
-      }
-    },
-    "string.prototype.trimend": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.1.tgz",
-      "integrity": "sha512-LRPxFUaTtpqYsTeNKaFOw3R4bxIzWOnbQ837QfBylo8jIxtcbK/A/sMV7Q+OAV/vWo+7s25pOE10KYSjaSO06g==",
-      "requires": {
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.17.5"
-      }
-    },
-    "string.prototype.trimstart": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.1.tgz",
-      "integrity": "sha512-XxZn+QpvrBI1FOcg6dIpxUPgWCPuNXvMD72aaRaUQv1eD4e/Qy8i/hFTe0BUmD60p/QA6bh1avmuPTfNjqVWRw==",
-      "requires": {
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.17.5"
-      }
-    },
-    "strip-ansi": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
-      "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
-      "dev": true,
-      "requires": {
-        "ansi-regex": "^4.1.0"
-      },
-      "dependencies": {
-        "ansi-regex": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
-          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
-          "dev": true
-        }
-      }
-    },
-    "strip-bom": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
-      "integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=",
-      "dev": true
-    },
-    "strip-dirs": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/strip-dirs/-/strip-dirs-2.1.0.tgz",
-      "integrity": "sha512-JOCxOeKLm2CAS73y/U4ZeZPTkE+gNVCzKt7Eox84Iej1LT/2pTWYpZKJuxwQpvX1LiZb1xokNR7RLfuBAa7T3g==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "is-natural-number": "^4.0.1"
-      }
-    },
-    "strip-eof": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz",
-      "integrity": "sha1-u0P/VZim6wXYm1n80SnJgzE2Br8=",
-      "dev": true
-    },
-    "strip-final-newline": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz",
-      "integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==",
-      "dev": true
-    },
-    "strip-indent": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-1.0.1.tgz",
-      "integrity": "sha1-DHlipq3vp7vUrDZkYKY4VSrhoKI=",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "get-stdin": "^4.0.1"
-      }
-    },
-    "strip-json-comments": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
-      "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
-      "dev": true
-    },
-    "strip-outer": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/strip-outer/-/strip-outer-1.0.1.tgz",
-      "integrity": "sha512-k55yxKHwaXnpYGsOzg4Vl8+tDrWylxDEpknGjhTiZB8dFRU5rTo9CAzeycivxV3s+zlTKwrs6WxMxR95n26kwg==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "escape-string-regexp": "^1.0.2"
-      }
-    },
-    "stubs": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/stubs/-/stubs-3.0.0.tgz",
-      "integrity": "sha1-6NK6H6nJBXAwPAMLaQD31fiavls=",
-      "dev": true
-    },
-    "style-loader": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-2.0.0.tgz",
-      "integrity": "sha512-Z0gYUJmzZ6ZdRUqpg1r8GsaFKypE+3xAzuFeMuoHgjc9KZv3wMyCRjQIWEbhoFSq7+7yoHXySDJyyWQaPajeiQ==",
-      "dev": true,
-      "requires": {
-        "loader-utils": "^2.0.0",
-        "schema-utils": "^3.0.0"
-      },
-      "dependencies": {
-        "ajv": {
-          "version": "6.12.6",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-          "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-          "dev": true,
-          "requires": {
-            "fast-deep-equal": "^3.1.1",
-            "fast-json-stable-stringify": "^2.0.0",
-            "json-schema-traverse": "^0.4.1",
-            "uri-js": "^4.2.2"
-          }
-        },
-        "schema-utils": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.0.tgz",
-          "integrity": "sha512-tTEaeYkyIhEZ9uWgAjDerWov3T9MgX8dhhy2r0IGeeX4W8ngtGl1++dUve/RUqzuaASSh7shwCDJjEzthxki8w==",
-          "dev": true,
-          "requires": {
-            "@types/json-schema": "^7.0.7",
-            "ajv": "^6.12.5",
-            "ajv-keywords": "^3.5.2"
-          }
-        }
-      }
-    },
-    "stylehacks": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.0.1.tgz",
-      "integrity": "sha512-Es0rVnHIqbWzveU1b24kbw92HsebBepxfcqe5iix7t9j0PQqhs0IxXVXv0pY2Bxa08CgMkzD6OWql7kbGOuEdA==",
-      "dev": true,
-      "requires": {
-        "browserslist": "^4.16.0",
-        "postcss-selector-parser": "^6.0.4"
-      }
-    },
-    "superagent": {
-      "version": "3.8.3",
-      "resolved": "https://registry.npmjs.org/superagent/-/superagent-3.8.3.tgz",
-      "integrity": "sha512-GLQtLMCoEIK4eDv6OGtkOoSMt3D+oq0y3dsxMuYuDvaNUvuT8eFBuLmfR0iYYzHC1e8hpzC6ZsxbuP6DIalMFA==",
-      "dev": true,
-      "requires": {
-        "component-emitter": "^1.2.0",
-        "cookiejar": "^2.1.0",
-        "debug": "^3.1.0",
-        "extend": "^3.0.0",
-        "form-data": "^2.3.1",
-        "formidable": "^1.2.0",
-        "methods": "^1.1.1",
-        "mime": "^1.4.1",
-        "qs": "^6.5.1",
-        "readable-stream": "^2.3.5"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "3.2.7",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
-          "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
-          "dev": true,
-          "requires": {
-            "ms": "^2.1.1"
-          }
-        },
-        "ms": {
-          "version": "2.1.3",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-          "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-          "dev": true
-        }
-      }
-    },
-    "supports-color": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
-      "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
-      "dev": true,
-      "requires": {
-        "has-flag": "^3.0.0"
-      }
-    },
-    "supports-hyperlinks": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/supports-hyperlinks/-/supports-hyperlinks-2.2.0.tgz",
-      "integrity": "sha512-6sXEzV5+I5j8Bmq9/vUphGRM/RJNT9SCURJLjwfOg51heRtguGWDzcaBlgAzKhQa0EVNpPEKzQuBwZ8S8WaCeQ==",
-      "dev": true,
-      "requires": {
-        "has-flag": "^4.0.0",
-        "supports-color": "^7.0.0"
-      },
-      "dependencies": {
-        "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
-        },
-        "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,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
-    "svg-parser": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz",
-      "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==",
-      "dev": true
-    },
-    "svgo": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz",
-      "integrity": "sha512-yhy/sQYxR5BkC98CY7o31VGsg014AKLEPxdfhora76l36hD9Rdy5NZA/Ocn6yayNPgSamYdtX2rFJdcv07AYVw==",
-      "dev": true,
-      "requires": {
-        "chalk": "^2.4.1",
-        "coa": "^2.0.2",
-        "css-select": "^2.0.0",
-        "css-select-base-adapter": "^0.1.1",
-        "css-tree": "1.0.0-alpha.37",
-        "csso": "^4.0.2",
-        "js-yaml": "^3.13.1",
-        "mkdirp": "~0.5.1",
-        "object.values": "^1.1.0",
-        "sax": "~1.2.4",
-        "stable": "^0.1.8",
-        "unquote": "~1.1.1",
-        "util.promisify": "~1.0.0"
-      }
-    },
-    "symbol-observable": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
-      "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ=="
-    },
-    "symbol-tree": {
-      "version": "3.2.4",
-      "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
-      "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
-      "dev": true
-    },
-    "tabbable": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-4.0.0.tgz",
-      "integrity": "sha512-H1XoH1URcBOa/rZZWxLxHCtOdVUEev+9vo5YdYhC9tCY4wnybX+VQrCYuy9ubkg69fCBxCONJOSLGfw0DWMffQ=="
-    },
-    "table": {
-      "version": "5.4.6",
-      "resolved": "https://registry.npmjs.org/table/-/table-5.4.6.tgz",
-      "integrity": "sha512-wmEc8m4fjnob4gt5riFRtTu/6+4rSe12TpAELNSqHMfF3IqnA+CH37USM6/YR3qRZv7e56kAEAtd6nKZaxe0Ug==",
-      "dev": true,
-      "requires": {
-        "ajv": "^6.10.2",
-        "lodash": "^4.17.14",
-        "slice-ansi": "^2.1.0",
-        "string-width": "^3.0.0"
-      },
-      "dependencies": {
-        "emoji-regex": {
-          "version": "7.0.3",
-          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz",
-          "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==",
-          "dev": true
-        },
-        "is-fullwidth-code-point": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
-          "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
-          "dev": true
-        },
-        "string-width": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
-          "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
-          "dev": true,
-          "requires": {
-            "emoji-regex": "^7.0.1",
-            "is-fullwidth-code-point": "^2.0.0",
-            "strip-ansi": "^5.1.0"
-          }
-        }
-      }
-    },
-    "tabtab": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/tabtab/-/tabtab-2.2.2.tgz",
-      "integrity": "sha1-egR/FDsBC0y9MfhX6ClhUSy/ThQ=",
-      "dev": true,
-      "requires": {
-        "debug": "^2.2.0",
-        "inquirer": "^1.0.2",
-        "lodash.difference": "^4.5.0",
-        "lodash.uniq": "^4.5.0",
-        "minimist": "^1.2.0",
-        "mkdirp": "^0.5.1",
-        "npmlog": "^2.0.3",
-        "object-assign": "^4.1.0"
-      },
-      "dependencies": {
-        "ansi-escapes": {
-          "version": "1.4.0",
-          "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-1.4.0.tgz",
-          "integrity": "sha1-06ioOzGapneTZisT52HHkRQiMG4=",
-          "dev": true
-        },
-        "ansi-regex": {
-          "version": "2.1.1",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
-          "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
-          "dev": true
-        },
-        "ansi-styles": {
-          "version": "2.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
-          "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
-          "dev": true
-        },
-        "chalk": {
-          "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
-          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^2.2.1",
-            "escape-string-regexp": "^1.0.2",
-            "has-ansi": "^2.0.0",
-            "strip-ansi": "^3.0.0",
-            "supports-color": "^2.0.0"
-          }
-        },
-        "cli-cursor": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-1.0.2.tgz",
-          "integrity": "sha1-ZNo/fValRBLll5S9Ytw1KV6PKYc=",
-          "dev": true,
-          "requires": {
-            "restore-cursor": "^1.0.1"
-          }
-        },
-        "cli-width": {
-          "version": "2.2.1",
-          "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-2.2.1.tgz",
-          "integrity": "sha512-GRMWDxpOB6Dgk2E5Uo+3eEBvtOOlimMmpbFiKuLFnQzYDavtLFY3K5ona41jgN/WdRZtG7utuVSVTL4HbZHGkw==",
-          "dev": true
-        },
-        "debug": {
-          "version": "2.6.9",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-          "dev": true,
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
-        "external-editor": {
-          "version": "1.1.1",
-          "resolved": "https://registry.npmjs.org/external-editor/-/external-editor-1.1.1.tgz",
-          "integrity": "sha1-Etew24UPf/fnCBuvQAVwAGDEYAs=",
-          "dev": true,
-          "requires": {
-            "extend": "^3.0.0",
-            "spawn-sync": "^1.0.15",
-            "tmp": "^0.0.29"
-          }
-        },
-        "figures": {
-          "version": "1.7.0",
-          "resolved": "https://registry.npmjs.org/figures/-/figures-1.7.0.tgz",
-          "integrity": "sha1-y+Hjr/zxzUS4DK3+0o3Hk6lwHS4=",
-          "dev": true,
-          "requires": {
-            "escape-string-regexp": "^1.0.5",
-            "object-assign": "^4.1.0"
-          }
-        },
-        "gauge": {
-          "version": "1.2.7",
-          "resolved": "https://registry.npmjs.org/gauge/-/gauge-1.2.7.tgz",
-          "integrity": "sha1-6c7FSD09TuDvRLYKfZnkk14TbZM=",
-          "dev": true,
-          "requires": {
-            "ansi": "^0.3.0",
-            "has-unicode": "^2.0.0",
-            "lodash.pad": "^4.1.0",
-            "lodash.padend": "^4.1.0",
-            "lodash.padstart": "^4.1.0"
-          }
-        },
-        "inquirer": {
-          "version": "1.2.3",
-          "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-1.2.3.tgz",
-          "integrity": "sha1-TexvMvN+97sLLtPx0aXD9UUHSRg=",
-          "dev": true,
-          "requires": {
-            "ansi-escapes": "^1.1.0",
-            "chalk": "^1.0.0",
-            "cli-cursor": "^1.0.1",
-            "cli-width": "^2.0.0",
-            "external-editor": "^1.1.0",
-            "figures": "^1.3.5",
-            "lodash": "^4.3.0",
-            "mute-stream": "0.0.6",
-            "pinkie-promise": "^2.0.0",
-            "run-async": "^2.2.0",
-            "rx": "^4.1.0",
-            "string-width": "^1.0.1",
-            "strip-ansi": "^3.0.0",
-            "through": "^2.3.6"
-          }
-        },
-        "is-fullwidth-code-point": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
-          "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
-          "dev": true,
-          "requires": {
-            "number-is-nan": "^1.0.0"
-          }
-        },
-        "mute-stream": {
-          "version": "0.0.6",
-          "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.6.tgz",
-          "integrity": "sha1-SJYrGeFp/R38JAs/HnMXYnu8R9s=",
-          "dev": true
-        },
-        "npmlog": {
-          "version": "2.0.4",
-          "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-2.0.4.tgz",
-          "integrity": "sha1-mLUlMPJRTKkNCexbIsiEZyI3VpI=",
-          "dev": true,
-          "requires": {
-            "ansi": "~0.3.1",
-            "are-we-there-yet": "~1.1.2",
-            "gauge": "~1.2.5"
-          }
-        },
-        "onetime": {
-          "version": "1.1.0",
-          "resolved": "https://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz",
-          "integrity": "sha1-ofeDj4MUxRbwXs78vEzP4EtO14k=",
-          "dev": true
-        },
-        "restore-cursor": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-1.0.1.tgz",
-          "integrity": "sha1-NGYfRohjJ/7SmRR5FSJS35LapUE=",
-          "dev": true,
-          "requires": {
-            "exit-hook": "^1.0.0",
-            "onetime": "^1.0.0"
-          }
-        },
-        "string-width": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
-          "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
-          "dev": true,
-          "requires": {
-            "code-point-at": "^1.0.0",
-            "is-fullwidth-code-point": "^1.0.0",
-            "strip-ansi": "^3.0.0"
-          }
-        },
-        "strip-ansi": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
-          "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
-          "dev": true,
-          "requires": {
-            "ansi-regex": "^2.0.0"
-          }
-        },
-        "supports-color": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
-          "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
-          "dev": true
-        },
-        "tmp": {
-          "version": "0.0.29",
-          "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.29.tgz",
-          "integrity": "sha1-8lEl/w3Z2jzLDC3Tce4SiLuRKMA=",
-          "dev": true,
-          "requires": {
-            "os-tmpdir": "~1.0.1"
-          }
-        }
-      }
-    },
-    "tapable": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.0.tgz",
-      "integrity": "sha512-FBk4IesMV1rBxX2tfiK8RAmogtWn53puLOQlvO8XuwlgxcYbP4mVPS9Ph4aeamSyyVjOl24aYWAuc8U5kCVwMw==",
-      "dev": true
-    },
-    "tar-stream": {
-      "version": "1.6.2",
-      "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-1.6.2.tgz",
-      "integrity": "sha512-rzS0heiNf8Xn7/mpdSVVSMAWAoy9bfb1WOTYC78Z0UQKeKa/CWS8FOq0lKGNa8DWKAn9gxjCvMLYc5PGXYlK2A==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "bl": "^1.0.0",
-        "buffer-alloc": "^1.2.0",
-        "end-of-stream": "^1.0.0",
-        "fs-constants": "^1.0.0",
-        "readable-stream": "^2.3.0",
-        "to-buffer": "^1.1.1",
-        "xtend": "^4.0.0"
-      }
-    },
-    "teeny-request": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/teeny-request/-/teeny-request-6.0.1.tgz",
-      "integrity": "sha512-TAK0c9a00ELOqLrZ49cFxvPVogMUFaWY8dUsQc/0CuQPGF+BOxOQzXfE413BAk2kLomwNplvdtMpeaeGWmoc2g==",
-      "dev": true,
-      "requires": {
-        "http-proxy-agent": "^4.0.0",
-        "https-proxy-agent": "^4.0.0",
-        "node-fetch": "^2.2.0",
-        "stream-events": "^1.0.5",
-        "uuid": "^3.3.2"
-      }
-    },
-    "temp-dir": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/temp-dir/-/temp-dir-1.0.0.tgz",
-      "integrity": "sha1-CnwOom06Oa+n4OvqnB/AvE2qAR0=",
-      "dev": true,
-      "optional": true
-    },
-    "tempfile": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/tempfile/-/tempfile-2.0.0.tgz",
-      "integrity": "sha1-awRGhWqbERTRhW/8vlCczLCXcmU=",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "temp-dir": "^1.0.0",
-        "uuid": "^3.0.1"
-      }
-    },
-    "terminal-link": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/terminal-link/-/terminal-link-2.1.1.tgz",
-      "integrity": "sha512-un0FmiRUQNr5PJqy9kP7c40F5BOfpGlYTrxonDChEZB7pzZxRNp/bt+ymiy9/npwXya9KH99nJ/GXFIiUkYGFQ==",
-      "dev": true,
-      "requires": {
-        "ansi-escapes": "^4.2.1",
-        "supports-hyperlinks": "^2.0.0"
-      }
-    },
-    "terser": {
-      "version": "4.8.0",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-4.8.0.tgz",
-      "integrity": "sha512-EAPipTNeWsb/3wLPeup1tVPaXfIaU68xMnVdPafIL1TV05OhASArYyIfFvnvJCNrR2NIOvDVNNTFRa+Re2MWyw==",
-      "dev": true,
-      "requires": {
-        "commander": "^2.20.0",
-        "source-map": "~0.6.1",
-        "source-map-support": "~0.5.12"
-      },
-      "dependencies": {
-        "commander": {
-          "version": "2.20.3",
-          "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
-          "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
-          "dev": true
-        }
-      }
-    },
-    "terser-webpack-plugin": {
-      "version": "5.1.4",
-      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.1.4.tgz",
-      "integrity": "sha512-C2WkFwstHDhVEmsmlCxrXUtVklS+Ir1A7twrYzrDrQQOIMOaVAYykaoo/Aq1K0QRkMoY2hhvDQY1cm4jnIMFwA==",
-      "dev": true,
-      "requires": {
-        "jest-worker": "^27.0.2",
-        "p-limit": "^3.1.0",
-        "schema-utils": "^3.0.0",
-        "serialize-javascript": "^6.0.0",
-        "source-map": "^0.6.1",
-        "terser": "^5.7.0"
-      },
-      "dependencies": {
-        "ajv": {
-          "version": "6.12.6",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-          "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-          "dev": true,
-          "requires": {
-            "fast-deep-equal": "^3.1.1",
-            "fast-json-stable-stringify": "^2.0.0",
-            "json-schema-traverse": "^0.4.1",
-            "uri-js": "^4.2.2"
-          }
-        },
-        "commander": {
-          "version": "2.20.3",
-          "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
-          "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
-          "dev": true
-        },
-        "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
-        },
-        "jest-worker": {
-          "version": "27.0.6",
-          "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.0.6.tgz",
-          "integrity": "sha512-qupxcj/dRuA3xHPMUd40gr2EaAurFbkwzOh7wfPaeE9id7hyjURRQoqNfHifHK3XjJU6YJJUQKILGUnwGPEOCA==",
-          "dev": true,
-          "requires": {
-            "@types/node": "*",
-            "merge-stream": "^2.0.0",
-            "supports-color": "^8.0.0"
-          }
-        },
-        "p-limit": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
-          "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
-          "dev": true,
-          "requires": {
-            "yocto-queue": "^0.1.0"
-          }
-        },
-        "schema-utils": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.0.tgz",
-          "integrity": "sha512-tTEaeYkyIhEZ9uWgAjDerWov3T9MgX8dhhy2r0IGeeX4W8ngtGl1++dUve/RUqzuaASSh7shwCDJjEzthxki8w==",
-          "dev": true,
-          "requires": {
-            "@types/json-schema": "^7.0.7",
-            "ajv": "^6.12.5",
-            "ajv-keywords": "^3.5.2"
-          }
-        },
-        "supports-color": {
-          "version": "8.1.1",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
-          "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        },
-        "terser": {
-          "version": "5.7.1",
-          "resolved": "https://registry.npmjs.org/terser/-/terser-5.7.1.tgz",
-          "integrity": "sha512-b3e+d5JbHAe/JSjwsC3Zn55wsBIM7AsHLjKxT31kGCldgbpFePaFo+PiddtO6uwRZWRw7sPXmAN8dTW61xmnSg==",
-          "dev": true,
-          "requires": {
-            "commander": "^2.20.0",
-            "source-map": "~0.7.2",
-            "source-map-support": "~0.5.19"
-          },
-          "dependencies": {
-            "source-map": {
-              "version": "0.7.3",
-              "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
-              "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
-              "dev": true
-            }
-          }
-        }
-      }
-    },
-    "test-exclude": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/test-exclude/-/test-exclude-6.0.0.tgz",
-      "integrity": "sha512-cAGWPIyOHU6zlmg88jwm7VRyXnMN7iV68OGAbYDk/Mh/xC/pzVPlQtY6ngoIH/5/tciuhGfvESU8GrHrcxD56w==",
-      "dev": true,
-      "requires": {
-        "@istanbuljs/schema": "^0.1.2",
-        "glob": "^7.1.4",
-        "minimatch": "^3.0.4"
-      }
-    },
-    "text-table": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
-      "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=",
-      "dev": true
-    },
-    "throat": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/throat/-/throat-5.0.0.tgz",
-      "integrity": "sha512-fcwX4mndzpLQKBS1DVYhGAcYaYt7vsHNIvQV+WXMvnow5cgjPphq5CaayLaGsjRdSCKZFNGt7/GYAuXaNOiYCA==",
-      "dev": true
-    },
-    "through": {
-      "version": "2.3.8",
-      "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
-      "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=",
-      "dev": true
-    },
-    "thunky": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
-      "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==",
-      "dev": true
-    },
-    "timed-out": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/timed-out/-/timed-out-4.0.1.tgz",
-      "integrity": "sha1-8y6srFoXW+ol1/q1Zas+2HQe9W8=",
-      "dev": true,
-      "optional": true
-    },
-    "timsort": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
-      "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=",
-      "dev": true
-    },
-    "tiny-invariant": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz",
-      "integrity": "sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw=="
-    },
-    "tiny-warning": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
-      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
-    },
-    "tmp": {
-      "version": "0.0.33",
-      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
-      "integrity": "sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==",
-      "dev": true,
-      "requires": {
-        "os-tmpdir": "~1.0.2"
-      }
-    },
-    "tmpl": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.4.tgz",
-      "integrity": "sha1-I2QN17QtAEM5ERQIIOXPRA5SHdE=",
-      "dev": true
-    },
-    "to-buffer": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/to-buffer/-/to-buffer-1.1.1.tgz",
-      "integrity": "sha512-lx9B5iv7msuFYE3dytT+KE5tap+rNYw+K4jVkb9R/asAb+pbBSM17jtunHplhBe6RRJdZx3Pn2Jph24O32mOVg==",
-      "dev": true,
-      "optional": true
-    },
-    "to-fast-properties": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-      "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=",
-      "dev": true
-    },
-    "to-object-path": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/to-object-path/-/to-object-path-0.3.0.tgz",
-      "integrity": "sha1-KXWIt7Dn4KwI4E5nL4XB9JmeF68=",
-      "dev": true,
-      "requires": {
-        "kind-of": "^3.0.2"
-      },
-      "dependencies": {
-        "is-buffer": {
-          "version": "1.1.6",
-          "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
-          "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
-          "dev": true
-        },
-        "kind-of": {
-          "version": "3.2.2",
-          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-          "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
-          "dev": true,
-          "requires": {
-            "is-buffer": "^1.1.5"
-          }
-        }
-      }
-    },
-    "to-regex": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/to-regex/-/to-regex-3.0.2.tgz",
-      "integrity": "sha512-FWtleNAtZ/Ki2qtqej2CXTOayOH9bHDQF+Q48VpWyDXjbYxA4Yz8iDB31zXOBUlOHHKidDbqGVrTUvQMPmBGBw==",
-      "dev": true,
-      "requires": {
-        "define-property": "^2.0.2",
-        "extend-shallow": "^3.0.2",
-        "regex-not": "^1.0.2",
-        "safe-regex": "^1.1.0"
-      }
-    },
-    "to-regex-range": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
-      "integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=",
-      "dev": true,
-      "requires": {
-        "is-number": "^3.0.0",
-        "repeat-string": "^1.6.1"
-      }
-    },
-    "toidentifier": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",
-      "integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==",
-      "dev": true
-    },
-    "tough-cookie": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.0.0.tgz",
-      "integrity": "sha512-tHdtEpQCMrc1YLrMaqXXcj6AxhYi/xgit6mZu1+EDWUn+qhUf8wMQoFIy9NXuq23zAwtcB0t/MjACGR18pcRbg==",
-      "dev": true,
-      "requires": {
-        "psl": "^1.1.33",
-        "punycode": "^2.1.1",
-        "universalify": "^0.1.2"
-      },
-      "dependencies": {
-        "universalify": {
-          "version": "0.1.2",
-          "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
-          "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
-          "dev": true
-        }
-      }
-    },
-    "tr46": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/tr46/-/tr46-1.0.1.tgz",
-      "integrity": "sha1-qLE/1r/SSJUZZ0zN5VujaTtwbQk=",
-      "dev": true,
-      "requires": {
-        "punycode": "^2.1.0"
-      }
-    },
-    "trim-newlines": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-1.0.0.tgz",
-      "integrity": "sha1-WIeWa7WCpFA6QetST301ARgVphM=",
-      "dev": true,
-      "optional": true
-    },
-    "trim-repeated": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/trim-repeated/-/trim-repeated-1.0.0.tgz",
-      "integrity": "sha1-42RqLqTokTEr9+rObPsFOAvAHCE=",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "escape-string-regexp": "^1.0.2"
-      }
-    },
-    "tryer": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz",
-      "integrity": "sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA==",
-      "dev": true
-    },
-    "tsconfig-paths": {
-      "version": "3.10.1",
-      "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.10.1.tgz",
-      "integrity": "sha512-rETidPDgCpltxF7MjBZlAFPUHv5aHH2MymyPvh+vEyWAED4Eb/WeMbsnD/JDr4OKPOA1TssDHgIcpTN5Kh0p6Q==",
-      "dev": true,
-      "requires": {
-        "json5": "^2.2.0",
-        "minimist": "^1.2.0",
-        "strip-bom": "^3.0.0"
-      },
-      "dependencies": {
-        "json5": {
-          "version": "2.2.0",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.0.tgz",
-          "integrity": "sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA==",
-          "dev": true,
-          "requires": {
-            "minimist": "^1.2.5"
-          }
-        }
-      }
-    },
-    "tslib": {
-      "version": "1.13.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz",
-      "integrity": "sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q=="
-    },
-    "tunnel-agent": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
-      "integrity": "sha1-J6XeoGs2sEoKmWZ3SykIaPD8QP0=",
-      "dev": true,
-      "requires": {
-        "safe-buffer": "^5.0.1"
-      }
-    },
-    "tweetnacl": {
-      "version": "0.14.5",
-      "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
-      "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=",
-      "dev": true
-    },
-    "type-check": {
-      "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.3.2.tgz",
-      "integrity": "sha1-WITKtRLPHTVeP7eE8wgEsrUg23I=",
-      "dev": true,
-      "requires": {
-        "prelude-ls": "~1.1.2"
-      }
-    },
-    "type-detect": {
-      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/type-detect/-/type-detect-4.0.8.tgz",
-      "integrity": "sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==",
-      "dev": true
-    },
-    "type-fest": {
-      "version": "0.8.1",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz",
-      "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==",
-      "dev": true
-    },
-    "type-is": {
-      "version": "1.6.18",
-      "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
-      "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
-      "dev": true,
-      "requires": {
-        "media-typer": "0.3.0",
-        "mime-types": "~2.1.24"
-      }
-    },
-    "typedarray": {
-      "version": "0.0.6",
-      "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
-      "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=",
-      "dev": true
-    },
-    "typedarray-to-buffer": {
-      "version": "3.1.5",
-      "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz",
-      "integrity": "sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==",
-      "dev": true,
-      "requires": {
-        "is-typedarray": "^1.0.0"
-      }
-    },
-    "typescript": {
-      "version": "4.3.5",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.3.5.tgz",
-      "integrity": "sha512-DqQgihaQ9cUrskJo9kIyW/+g0Vxsk8cDtZ52a3NGh0YNTfpUSArXSohyUGnvbPazEPLu398C0UxmKSOrPumUzA==",
-      "dev": true
-    },
-    "unbox-primitive": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.1.tgz",
-      "integrity": "sha512-tZU/3NqK3dA5gpE1KtyiJUrEB0lxnGkMFHptJ7q6ewdZ8s12QrODwNbhIJStmJkd1QDXa1NRA8aF2A1zk/Ypyw==",
-      "requires": {
-        "function-bind": "^1.1.1",
-        "has-bigints": "^1.0.1",
-        "has-symbols": "^1.0.2",
-        "which-boxed-primitive": "^1.0.2"
-      },
-      "dependencies": {
-        "has-symbols": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.2.tgz",
-          "integrity": "sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw=="
-        }
-      }
-    },
-    "unbzip2-stream": {
-      "version": "1.4.3",
-      "resolved": "https://registry.npmjs.org/unbzip2-stream/-/unbzip2-stream-1.4.3.tgz",
-      "integrity": "sha512-mlExGW4w71ebDJviH16lQLtZS32VKqsSfk80GCfUlwT/4/hNRFsoscrF/c++9xinkMzECL1uL9DDwXqFWkruPg==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "buffer": "^5.2.1",
-        "through": "^2.3.8"
-      }
-    },
-    "uncontrollable": {
-      "version": "7.2.1",
-      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz",
-      "integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==",
-      "requires": {
-        "@babel/runtime": "^7.6.3",
-        "@types/react": ">=16.9.11",
-        "invariant": "^2.2.4",
-        "react-lifecycles-compat": "^3.0.4"
-      }
-    },
-    "unicode-canonical-property-names-ecmascript": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz",
-      "integrity": "sha512-jDrNnXWHd4oHiTZnx/ZG7gtUTVp+gCcTTKr8L0HjlwphROEW3+Him+IpvC+xcJEFegapiMZyZe02CyuOnRmbnQ==",
-      "dev": true
-    },
-    "unicode-match-property-ecmascript": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-1.0.4.tgz",
-      "integrity": "sha512-L4Qoh15vTfntsn4P1zqnHulG0LdXgjSO035fEpdtp6YxXhMT51Q6vgM5lYdG/5X3MjS+k/Y9Xw4SFCY9IkR0rg==",
-      "dev": true,
-      "requires": {
-        "unicode-canonical-property-names-ecmascript": "^1.0.4",
-        "unicode-property-aliases-ecmascript": "^1.0.4"
-      }
-    },
-    "unicode-match-property-value-ecmascript": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-1.2.0.tgz",
-      "integrity": "sha512-wjuQHGQVofmSJv1uVISKLE5zO2rNGzM/KCYZch/QQvez7C1hUhBIuZ701fYXExuufJFMPhv2SyL8CyoIfMLbIQ==",
-      "dev": true
-    },
-    "unicode-property-aliases-ecmascript": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-1.1.0.tgz",
-      "integrity": "sha512-PqSoPh/pWetQ2phoj5RLiaqIk4kCNwoV3CI+LfGmWLKI3rE3kl1h59XpX2BjgDrmbxD9ARtQobPGU1SguCYuQg==",
-      "dev": true
-    },
-    "union-value": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.1.tgz",
-      "integrity": "sha512-tJfXmxMeWYnczCVs7XAEvIV7ieppALdyepWMkHkwciRpZraG/xwT+s2JN8+pr1+8jCRf80FFzvr+MpQeeoF4Xg==",
-      "dev": true,
-      "requires": {
-        "arr-union": "^3.1.0",
-        "get-value": "^2.0.6",
-        "is-extendable": "^0.1.1",
-        "set-value": "^2.0.1"
-      }
-    },
-    "uniqs": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/uniqs/-/uniqs-2.0.0.tgz",
-      "integrity": "sha1-/+3ks2slKQaW5uFl1KWe25mOawI=",
-      "dev": true
-    },
-    "universal-cookie": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/universal-cookie/-/universal-cookie-4.0.4.tgz",
-      "integrity": "sha512-lbRVHoOMtItjWbM7TwDLdl8wug7izB0tq3/YVKhT/ahB4VDvWMyvnADfnJI8y6fSvsjh51Ix7lTGC6Tn4rMPhw==",
-      "requires": {
-        "@types/cookie": "^0.3.3",
-        "cookie": "^0.4.0"
-      }
-    },
-    "universalify": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
-      "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
-      "dev": true
-    },
-    "unpipe": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
-      "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=",
-      "dev": true
-    },
-    "unquote": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/unquote/-/unquote-1.1.1.tgz",
-      "integrity": "sha1-j97XMk7G6IoP+LkF58CYzcCG1UQ=",
-      "dev": true
-    },
-    "unset-value": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/unset-value/-/unset-value-1.0.0.tgz",
-      "integrity": "sha1-g3aHP30jNRef+x5vw6jtDfyKtVk=",
-      "dev": true,
-      "requires": {
-        "has-value": "^0.3.1",
-        "isobject": "^3.0.0"
-      },
-      "dependencies": {
-        "has-value": {
-          "version": "0.3.1",
-          "resolved": "https://registry.npmjs.org/has-value/-/has-value-0.3.1.tgz",
-          "integrity": "sha1-ex9YutpiyoJ+wKIHgCVlSEWZXh8=",
-          "dev": true,
-          "requires": {
-            "get-value": "^2.0.3",
-            "has-values": "^0.1.4",
-            "isobject": "^2.0.0"
-          },
-          "dependencies": {
-            "isobject": {
-              "version": "2.1.0",
-              "resolved": "https://registry.npmjs.org/isobject/-/isobject-2.1.0.tgz",
-              "integrity": "sha1-8GVWEJaj8dou9GJy+BXIQNh+DIk=",
-              "dev": true,
-              "requires": {
-                "isarray": "1.0.0"
-              }
-            }
-          }
-        },
-        "has-values": {
-          "version": "0.1.4",
-          "resolved": "https://registry.npmjs.org/has-values/-/has-values-0.1.4.tgz",
-          "integrity": "sha1-bWHeldkd/Km5oCCJrThL/49it3E=",
-          "dev": true
-        },
-        "isarray": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-          "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
-          "dev": true
-        }
-      }
-    },
-    "upath": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/upath/-/upath-1.2.0.tgz",
-      "integrity": "sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==",
-      "dev": true
-    },
-    "uri-js": {
-      "version": "4.2.2",
-      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.2.2.tgz",
-      "integrity": "sha512-KY9Frmirql91X2Qgjry0Wd4Y+YTdrdZheS8TFwvkbLWf/G5KNJDCh6pKL5OZctEW4+0Baa5idK2ZQuELRwPznQ==",
-      "dev": true,
-      "requires": {
-        "punycode": "^2.1.0"
-      }
-    },
-    "urix": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/urix/-/urix-0.1.0.tgz",
-      "integrity": "sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI=",
-      "dev": true
-    },
-    "url": {
-      "version": "0.11.0",
-      "resolved": "https://registry.npmjs.org/url/-/url-0.11.0.tgz",
-      "integrity": "sha1-ODjpfPxgUh63PFJajlW/3Z4uKPE=",
-      "dev": true,
-      "requires": {
-        "punycode": "1.3.2",
-        "querystring": "0.2.0"
-      },
-      "dependencies": {
-        "punycode": {
-          "version": "1.3.2",
-          "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz",
-          "integrity": "sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0=",
-          "dev": true
-        }
-      }
-    },
-    "url-loader": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/url-loader/-/url-loader-4.1.1.tgz",
-      "integrity": "sha512-3BTV812+AVHHOJQO8O5MkWgZ5aosP7GnROJwvzLS9hWDj00lZ6Z0wNak423Lp9PBZN05N+Jk/N5Si8jRAlGyWA==",
-      "dev": true,
-      "requires": {
-        "loader-utils": "^2.0.0",
-        "mime-types": "^2.1.27",
-        "schema-utils": "^3.0.0"
-      },
-      "dependencies": {
-        "ajv": {
-          "version": "6.12.6",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-          "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-          "dev": true,
-          "requires": {
-            "fast-deep-equal": "^3.1.1",
-            "fast-json-stable-stringify": "^2.0.0",
-            "json-schema-traverse": "^0.4.1",
-            "uri-js": "^4.2.2"
-          }
-        },
-        "schema-utils": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.0.tgz",
-          "integrity": "sha512-tTEaeYkyIhEZ9uWgAjDerWov3T9MgX8dhhy2r0IGeeX4W8ngtGl1++dUve/RUqzuaASSh7shwCDJjEzthxki8w==",
-          "dev": true,
-          "requires": {
-            "@types/json-schema": "^7.0.7",
-            "ajv": "^6.12.5",
-            "ajv-keywords": "^3.5.2"
-          }
-        }
-      }
-    },
-    "url-parse-lax": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/url-parse-lax/-/url-parse-lax-1.0.0.tgz",
-      "integrity": "sha1-evjzA2Rem9eaJy56FKxovAYJ2nM=",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "prepend-http": "^1.0.1"
-      }
-    },
-    "url-to-options": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/url-to-options/-/url-to-options-1.0.1.tgz",
-      "integrity": "sha1-FQWgOiiaSMvXpDTvuu7FBV9WM6k=",
-      "dev": true,
-      "optional": true
-    },
-    "urlgrey": {
-      "version": "0.4.4",
-      "resolved": "https://registry.npmjs.org/urlgrey/-/urlgrey-0.4.4.tgz",
-      "integrity": "sha1-iS/pWWCAXoVRnxzUOJ8stMu3ZS8=",
-      "dev": true
-    },
-    "use": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
-      "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==",
-      "dev": true
-    },
-    "use-callback-ref": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.2.5.tgz",
-      "integrity": "sha512-gN3vgMISAgacF7sqsLPByqoePooY3n2emTH59Ur5d/M8eg4WTWu1xp8i8DHjohftIyEx0S08RiYxbffr4j8Peg=="
-    },
-    "use-sidecar": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.0.5.tgz",
-      "integrity": "sha512-k9jnrjYNwN6xYLj1iaGhonDghfvmeTmYjAiGvOr7clwKfPjMXJf4/HOr7oT5tJwYafgp2tG2l3eZEOfoELiMcA==",
-      "requires": {
-        "detect-node-es": "^1.1.0",
-        "tslib": "^1.9.3"
-      }
-    },
-    "util-deprecate": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
-      "dev": true
-    },
-    "util.promisify": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/util.promisify/-/util.promisify-1.0.1.tgz",
-      "integrity": "sha512-g9JpC/3He3bm38zsLupWryXHoEcS22YHthuPQSJdMy6KNrzIRzWqcsHzD/WUnqe45whVou4VIsPew37DoXWNrA==",
-      "dev": true,
-      "requires": {
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.17.2",
-        "has-symbols": "^1.0.1",
-        "object.getownpropertydescriptors": "^2.1.0"
-      }
-    },
-    "utila": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/utila/-/utila-0.4.0.tgz",
-      "integrity": "sha1-ihagXURWV6Oupe7MWxKk+lN5dyw=",
-      "dev": true
-    },
-    "utils-merge": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
-      "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=",
-      "dev": true
-    },
-    "uuid": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
-      "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A=="
-    },
-    "v8-compile-cache": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
-      "integrity": "sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==",
-      "dev": true
-    },
-    "v8-to-istanbul": {
-      "version": "7.1.2",
-      "resolved": "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-7.1.2.tgz",
-      "integrity": "sha512-TxNb7YEUwkLXCQYeudi6lgQ/SZrzNO4kMdlqVxaZPUIUjCv6iSSypUQX70kNBSERpQ8fk48+d61FXk+tgqcWow==",
-      "dev": true,
-      "requires": {
-        "@types/istanbul-lib-coverage": "^2.0.1",
-        "convert-source-map": "^1.6.0",
-        "source-map": "^0.7.3"
-      },
-      "dependencies": {
-        "source-map": {
-          "version": "0.7.3",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
-          "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
-          "dev": true
-        }
-      }
-    },
-    "validate-npm-package-license": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
-      "integrity": "sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==",
-      "dev": true,
-      "requires": {
-        "spdx-correct": "^3.0.0",
-        "spdx-expression-parse": "^3.0.0"
-      }
-    },
-    "value-equal": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz",
-      "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw=="
-    },
-    "vary": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
-      "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=",
-      "dev": true
-    },
-    "vendors": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/vendors/-/vendors-1.0.4.tgz",
-      "integrity": "sha512-/juG65kTL4Cy2su4P8HjtkTxk6VmJDiOPBufWniqQ6wknac6jNiXS9vU+hO3wgusiyqWlzTbVHi0dyJqRONg3w==",
-      "dev": true
-    },
-    "verror": {
-      "version": "1.10.0",
-      "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",
-      "integrity": "sha1-OhBcoXBTr1XW4nDB+CiGguGNpAA=",
-      "dev": true,
-      "requires": {
-        "assert-plus": "^1.0.0",
-        "core-util-is": "1.0.2",
-        "extsprintf": "^1.2.0"
-      }
-    },
-    "w3c-hr-time": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",
-      "integrity": "sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ==",
-      "dev": true,
-      "requires": {
-        "browser-process-hrtime": "^1.0.0"
-      }
-    },
-    "w3c-xmlserializer": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-2.0.0.tgz",
-      "integrity": "sha512-4tzD0mF8iSiMiNs30BiLO3EpfGLZUT2MSX/G+o7ZywDzliWQ3OPtTZ0PTC3B3ca1UAf4cJMHB+2Bf56EriJuRA==",
-      "dev": true,
-      "requires": {
-        "xml-name-validator": "^3.0.0"
-      }
-    },
-    "walker": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/walker/-/walker-1.0.7.tgz",
-      "integrity": "sha1-L3+bj9ENZ3JisYqITijRlhjgKPs=",
-      "dev": true,
-      "requires": {
-        "makeerror": "1.0.x"
-      }
-    },
-    "warning": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
-      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
-      "requires": {
-        "loose-envify": "^1.0.0"
-      }
-    },
-    "watchpack": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.2.0.tgz",
-      "integrity": "sha512-up4YAn/XHgZHIxFBVCdlMiWDj6WaLKpwVeGQk2I5thdYxF/KmF0aaz6TfJZ/hfl1h/XlcDr7k1KH7ThDagpFaA==",
-      "dev": true,
-      "requires": {
-        "glob-to-regexp": "^0.4.1",
-        "graceful-fs": "^4.1.2"
-      }
-    },
-    "wbuf": {
-      "version": "1.7.3",
-      "resolved": "https://registry.npmjs.org/wbuf/-/wbuf-1.7.3.tgz",
-      "integrity": "sha512-O84QOnr0icsbFGLS0O3bI5FswxzRr8/gHwWkDlQFskhSPryQXvrTMxjxGP4+iWYoauLoBvfDpkrOauZ+0iZpDA==",
-      "dev": true,
-      "requires": {
-        "minimalistic-assert": "^1.0.0"
-      }
-    },
-    "webidl-conversions": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-4.0.2.tgz",
-      "integrity": "sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==",
-      "dev": true
-    },
-    "webpack": {
-      "version": "5.21.2",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.21.2.tgz",
-      "integrity": "sha512-xHflCenx+AM4uWKX71SWHhxml5aMXdy2tu/vdi4lClm7PADKxlyDAFFN1rEFzNV0MAoPpHtBeJnl/+K6F4QBPg==",
-      "dev": true,
-      "requires": {
-        "@types/eslint-scope": "^3.7.0",
-        "@types/estree": "^0.0.46",
-        "@webassemblyjs/ast": "1.11.0",
-        "@webassemblyjs/wasm-edit": "1.11.0",
-        "@webassemblyjs/wasm-parser": "1.11.0",
-        "acorn": "^8.0.4",
-        "browserslist": "^4.14.5",
-        "chrome-trace-event": "^1.0.2",
-        "enhanced-resolve": "^5.7.0",
-        "es-module-lexer": "^0.3.26",
-        "eslint-scope": "^5.1.1",
-        "events": "^3.2.0",
-        "glob-to-regexp": "^0.4.1",
-        "graceful-fs": "^4.2.4",
-        "json-parse-better-errors": "^1.0.2",
-        "loader-runner": "^4.2.0",
-        "mime-types": "^2.1.27",
-        "neo-async": "^2.6.2",
-        "schema-utils": "^3.0.0",
-        "tapable": "^2.1.1",
-        "terser-webpack-plugin": "^5.1.1",
-        "watchpack": "^2.0.0",
-        "webpack-sources": "^2.1.1"
-      },
-      "dependencies": {
-        "acorn": {
-          "version": "8.4.1",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.4.1.tgz",
-          "integrity": "sha512-asabaBSkEKosYKMITunzX177CXxQ4Q8BSSzMTKD+FefUhipQC70gfW5SiUDhYQ3vk8G+81HqQk7Fv9OXwwn9KA==",
-          "dev": true
-        },
-        "ajv": {
-          "version": "6.12.6",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-          "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-          "dev": true,
-          "requires": {
-            "fast-deep-equal": "^3.1.1",
-            "fast-json-stable-stringify": "^2.0.0",
-            "json-schema-traverse": "^0.4.1",
-            "uri-js": "^4.2.2"
-          }
-        },
-        "schema-utils": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.0.tgz",
-          "integrity": "sha512-tTEaeYkyIhEZ9uWgAjDerWov3T9MgX8dhhy2r0IGeeX4W8ngtGl1++dUve/RUqzuaASSh7shwCDJjEzthxki8w==",
-          "dev": true,
-          "requires": {
-            "@types/json-schema": "^7.0.7",
-            "ajv": "^6.12.5",
-            "ajv-keywords": "^3.5.2"
-          }
-        },
-        "webpack-sources": {
-          "version": "2.3.0",
-          "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-2.3.0.tgz",
-          "integrity": "sha512-WyOdtwSvOML1kbgtXbTDnEW0jkJ7hZr/bDByIwszhWd/4XX1A3XMkrbFMsuH4+/MfLlZCUzlAdg4r7jaGKEIgQ==",
-          "dev": true,
-          "requires": {
-            "source-list-map": "^2.0.1",
-            "source-map": "^0.6.1"
-          }
-        }
-      }
-    },
-    "webpack-bundle-analyzer": {
-      "version": "3.9.0",
-      "resolved": "https://registry.npmjs.org/webpack-bundle-analyzer/-/webpack-bundle-analyzer-3.9.0.tgz",
-      "integrity": "sha512-Ob8amZfCm3rMB1ScjQVlbYYUEJyEjdEtQ92jqiFUYt5VkEeO2v5UMbv49P/gnmCZm3A6yaFQzCBvpZqN4MUsdA==",
-      "dev": true,
-      "requires": {
-        "acorn": "^7.1.1",
-        "acorn-walk": "^7.1.1",
-        "bfj": "^6.1.1",
-        "chalk": "^2.4.1",
-        "commander": "^2.18.0",
-        "ejs": "^2.6.1",
-        "express": "^4.16.3",
-        "filesize": "^3.6.1",
-        "gzip-size": "^5.0.0",
-        "lodash": "^4.17.19",
-        "mkdirp": "^0.5.1",
-        "opener": "^1.5.1",
-        "ws": "^6.0.0"
-      },
-      "dependencies": {
-        "acorn-walk": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
-          "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==",
-          "dev": true
-        },
-        "commander": {
-          "version": "2.20.3",
-          "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
-          "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
-          "dev": true
-        },
-        "filesize": {
-          "version": "3.6.1",
-          "resolved": "https://registry.npmjs.org/filesize/-/filesize-3.6.1.tgz",
-          "integrity": "sha512-7KjR1vv6qnicaPMi1iiTcI85CyYwRO/PSFCu6SvqL8jN2Wjt/NIYQTFtFs7fSDCYOstUkEWIQGFUg5YZQfjlcg==",
-          "dev": true
-        },
-        "ws": {
-          "version": "6.2.2",
-          "resolved": "https://registry.npmjs.org/ws/-/ws-6.2.2.tgz",
-          "integrity": "sha512-zmhltoSR8u1cnDsD43TX59mzoMZsLKqUweyYBAIvTngR3shc0W6aOZylZmq/7hqyVxPdi+5Ud2QInblgyE72fw==",
-          "dev": true,
-          "requires": {
-            "async-limiter": "~1.0.0"
-          }
-        }
-      }
-    },
-    "webpack-cli": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-4.5.0.tgz",
-      "integrity": "sha512-wXg/ef6Ibstl2f50mnkcHblRPN/P9J4Nlod5Hg9HGFgSeF8rsqDGHJeVe4aR26q9l62TUJi6vmvC2Qz96YJw1Q==",
-      "dev": true,
-      "requires": {
-        "@discoveryjs/json-ext": "^0.5.0",
-        "@webpack-cli/configtest": "^1.0.1",
-        "@webpack-cli/info": "^1.2.2",
-        "@webpack-cli/serve": "^1.3.0",
-        "colorette": "^1.2.1",
-        "commander": "^7.0.0",
-        "enquirer": "^2.3.6",
-        "execa": "^5.0.0",
-        "fastest-levenshtein": "^1.0.12",
-        "import-local": "^3.0.2",
-        "interpret": "^2.2.0",
-        "rechoir": "^0.7.0",
-        "v8-compile-cache": "^2.2.0",
-        "webpack-merge": "^5.7.3"
-      },
-      "dependencies": {
-        "commander": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
-          "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
-          "dev": true
-        },
-        "cross-spawn": {
-          "version": "7.0.3",
-          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-          "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-          "dev": true,
-          "requires": {
-            "path-key": "^3.1.0",
-            "shebang-command": "^2.0.0",
-            "which": "^2.0.1"
-          }
-        },
-        "execa": {
-          "version": "5.1.1",
-          "resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
-          "integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==",
-          "dev": true,
-          "requires": {
-            "cross-spawn": "^7.0.3",
-            "get-stream": "^6.0.0",
-            "human-signals": "^2.1.0",
-            "is-stream": "^2.0.0",
-            "merge-stream": "^2.0.0",
-            "npm-run-path": "^4.0.1",
-            "onetime": "^5.1.2",
-            "signal-exit": "^3.0.3",
-            "strip-final-newline": "^2.0.0"
-          }
-        },
-        "get-stream": {
-          "version": "6.0.1",
-          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
-          "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
-          "dev": true
-        },
-        "is-stream": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.0.tgz",
-          "integrity": "sha512-XCoy+WlUr7d1+Z8GgSuXmpuUFC9fOhRXglJMx+dwLKTkL44Cjd4W1Z5P+BQZpr+cR93aGP4S/s7Ftw6Nd/kiEw==",
-          "dev": true
-        },
-        "npm-run-path": {
-          "version": "4.0.1",
-          "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
-          "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
-          "dev": true,
-          "requires": {
-            "path-key": "^3.0.0"
-          }
-        },
-        "path-key": {
-          "version": "3.1.1",
-          "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-          "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-          "dev": true
-        },
-        "shebang-command": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-          "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-          "dev": true,
-          "requires": {
-            "shebang-regex": "^3.0.0"
-          }
-        },
-        "shebang-regex": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-          "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-          "dev": true
-        },
-        "webpack-merge": {
-          "version": "5.8.0",
-          "resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-5.8.0.tgz",
-          "integrity": "sha512-/SaI7xY0831XwP6kzuwhKWVKDP9t1QY1h65lAFLbZqMPIuYcD9QAW4u9STIbU9kaJbPBB/geU/gLr1wDjOhQ+Q==",
-          "dev": true,
-          "requires": {
-            "clone-deep": "^4.0.1",
-            "wildcard": "^2.0.0"
-          }
-        },
-        "which": {
-          "version": "2.0.2",
-          "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-          "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-          "dev": true,
-          "requires": {
-            "isexe": "^2.0.0"
-          }
-        }
-      }
-    },
-    "webpack-dev-middleware": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-4.3.0.tgz",
-      "integrity": "sha512-PjwyVY95/bhBh6VUqt6z4THplYcsvQ8YNNBTBM873xLVmw8FLeALn0qurHbs9EmcfhzQis/eoqypSnZeuUz26w==",
-      "dev": true,
-      "requires": {
-        "colorette": "^1.2.2",
-        "mem": "^8.1.1",
-        "memfs": "^3.2.2",
-        "mime-types": "^2.1.30",
-        "range-parser": "^1.2.1",
-        "schema-utils": "^3.0.0"
-      },
-      "dependencies": {
-        "ajv": {
-          "version": "6.12.6",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-          "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-          "dev": true,
-          "requires": {
-            "fast-deep-equal": "^3.1.1",
-            "fast-json-stable-stringify": "^2.0.0",
-            "json-schema-traverse": "^0.4.1",
-            "uri-js": "^4.2.2"
-          }
-        },
-        "colorette": {
-          "version": "1.2.2",
-          "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.2.2.tgz",
-          "integrity": "sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w==",
-          "dev": true
-        },
-        "mime-db": {
-          "version": "1.48.0",
-          "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.48.0.tgz",
-          "integrity": "sha512-FM3QwxV+TnZYQ2aRqhlKBMHxk10lTbMt3bBkMAp54ddrNeVSfcQYOOKuGuy3Ddrm38I04If834fOUSq1yzslJQ==",
-          "dev": true
-        },
-        "mime-types": {
-          "version": "2.1.31",
-          "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.31.tgz",
-          "integrity": "sha512-XGZnNzm3QvgKxa8dpzyhFTHmpP3l5YNusmne07VUOXxou9CqUqYa/HBy124RqtVh/O2pECas/MOcsDgpilPOPg==",
-          "dev": true,
-          "requires": {
-            "mime-db": "1.48.0"
-          }
-        },
-        "schema-utils": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.0.tgz",
-          "integrity": "sha512-tTEaeYkyIhEZ9uWgAjDerWov3T9MgX8dhhy2r0IGeeX4W8ngtGl1++dUve/RUqzuaASSh7shwCDJjEzthxki8w==",
-          "dev": true,
-          "requires": {
-            "@types/json-schema": "^7.0.7",
-            "ajv": "^6.12.5",
-            "ajv-keywords": "^3.5.2"
-          }
-        }
-      }
-    },
-    "webpack-dev-server": {
-      "version": "4.0.0-beta.3",
-      "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.0.0-beta.3.tgz",
-      "integrity": "sha512-Ud7ieH15No/KiSdRuzk+2k+S4gSCR/N7m4hJhesDbKQEZy3P+NPXTXfsimNOZvbVX2TRuIEFB+VdLZFn8DwGwg==",
-      "dev": true,
-      "requires": {
-        "ansi-html": "^0.0.7",
-        "bonjour": "^3.5.0",
-        "chokidar": "^3.5.1",
-        "compression": "^1.7.4",
-        "connect-history-api-fallback": "^1.6.0",
-        "del": "^6.0.0",
-        "express": "^4.17.1",
-        "find-cache-dir": "^3.3.1",
-        "graceful-fs": "^4.2.6",
-        "html-entities": "^2.3.2",
-        "http-proxy-middleware": "^1.3.1",
-        "internal-ip": "^6.2.0",
-        "ipaddr.js": "^2.0.0",
-        "is-absolute-url": "^3.0.3",
-        "killable": "^1.0.1",
-        "open": "^7.4.2",
-        "p-retry": "^4.5.0",
-        "portfinder": "^1.0.28",
-        "schema-utils": "^3.0.0",
-        "selfsigned": "^1.10.11",
-        "serve-index": "^1.9.1",
-        "sockjs": "^0.3.21",
-        "spdy": "^4.0.2",
-        "strip-ansi": "^6.0.0",
-        "url": "^0.11.0",
-        "webpack-dev-middleware": "^4.1.0",
-        "ws": "^7.4.5"
-      },
-      "dependencies": {
-        "ajv": {
-          "version": "6.12.6",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-          "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-          "dev": true,
-          "requires": {
-            "fast-deep-equal": "^3.1.1",
-            "fast-json-stable-stringify": "^2.0.0",
-            "json-schema-traverse": "^0.4.1",
-            "uri-js": "^4.2.2"
-          }
-        },
-        "anymatch": {
-          "version": "3.1.2",
-          "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
-          "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
-          "dev": true,
-          "requires": {
-            "normalize-path": "^3.0.0",
-            "picomatch": "^2.0.4"
-          }
-        },
-        "array-union": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
-          "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
-          "dev": true
-        },
-        "binary-extensions": {
-          "version": "2.2.0",
-          "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
-          "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
-          "dev": true
-        },
-        "braces": {
-          "version": "3.0.2",
-          "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-          "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-          "dev": true,
-          "requires": {
-            "fill-range": "^7.0.1"
-          }
-        },
-        "chokidar": {
-          "version": "3.5.2",
-          "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.2.tgz",
-          "integrity": "sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ==",
-          "dev": true,
-          "requires": {
-            "anymatch": "~3.1.2",
-            "braces": "~3.0.2",
-            "fsevents": "~2.3.2",
-            "glob-parent": "~5.1.2",
-            "is-binary-path": "~2.1.0",
-            "is-glob": "~4.0.1",
-            "normalize-path": "~3.0.0",
-            "readdirp": "~3.6.0"
-          }
-        },
-        "del": {
-          "version": "6.0.0",
-          "resolved": "https://registry.npmjs.org/del/-/del-6.0.0.tgz",
-          "integrity": "sha512-1shh9DQ23L16oXSZKB2JxpL7iMy2E0S9d517ptA1P8iw0alkPtQcrKH7ru31rYtKwF499HkTu+DRzq3TCKDFRQ==",
-          "dev": true,
-          "requires": {
-            "globby": "^11.0.1",
-            "graceful-fs": "^4.2.4",
-            "is-glob": "^4.0.1",
-            "is-path-cwd": "^2.2.0",
-            "is-path-inside": "^3.0.2",
-            "p-map": "^4.0.0",
-            "rimraf": "^3.0.2",
-            "slash": "^3.0.0"
-          }
-        },
-        "fill-range": {
-          "version": "7.0.1",
-          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-          "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-          "dev": true,
-          "requires": {
-            "to-regex-range": "^5.0.1"
-          }
-        },
-        "find-cache-dir": {
-          "version": "3.3.1",
-          "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.1.tgz",
-          "integrity": "sha512-t2GDMt3oGC/v+BMwzmllWDuJF/xcDtE5j/fCGbqDD7OLuJkj0cfh1YSA5VKPvwMeLFLNDBkwOKZ2X85jGLVftQ==",
-          "dev": true,
-          "requires": {
-            "commondir": "^1.0.1",
-            "make-dir": "^3.0.2",
-            "pkg-dir": "^4.1.0"
-          }
-        },
-        "fsevents": {
-          "version": "2.3.2",
-          "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
-          "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
-          "dev": true,
-          "optional": true
-        },
-        "glob-parent": {
-          "version": "5.1.2",
-          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-          "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-          "dev": true,
-          "requires": {
-            "is-glob": "^4.0.1"
-          }
-        },
-        "globby": {
-          "version": "11.0.4",
-          "resolved": "https://registry.npmjs.org/globby/-/globby-11.0.4.tgz",
-          "integrity": "sha512-9O4MVG9ioZJ08ffbcyVYyLOJLk5JQ688pJ4eMGLpdWLHq/Wr1D9BlriLQyL0E+jbkuePVZXYFj47QM/v093wHg==",
-          "dev": true,
-          "requires": {
-            "array-union": "^2.1.0",
-            "dir-glob": "^3.0.1",
-            "fast-glob": "^3.1.1",
-            "ignore": "^5.1.4",
-            "merge2": "^1.3.0",
-            "slash": "^3.0.0"
-          }
-        },
-        "graceful-fs": {
-          "version": "4.2.6",
-          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.6.tgz",
-          "integrity": "sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ==",
-          "dev": true
-        },
-        "ignore": {
-          "version": "5.1.8",
-          "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.1.8.tgz",
-          "integrity": "sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw==",
-          "dev": true
-        },
-        "ipaddr.js": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.0.1.tgz",
-          "integrity": "sha512-1qTgH9NG+IIJ4yfKs2e6Pp1bZg8wbDbKHT21HrLIeYBTRLgMYKnMTPAuI3Lcs61nfx5h1xlXnbJtH1kX5/d/ng==",
-          "dev": true
-        },
-        "is-binary-path": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
-          "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-          "dev": true,
-          "requires": {
-            "binary-extensions": "^2.0.0"
-          }
-        },
-        "is-number": {
-          "version": "7.0.0",
-          "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-          "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-          "dev": true
-        },
-        "is-path-inside": {
-          "version": "3.0.3",
-          "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
-          "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==",
-          "dev": true
-        },
-        "make-dir": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
-          "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
-          "dev": true,
-          "requires": {
-            "semver": "^6.0.0"
-          }
-        },
-        "p-map": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/p-map/-/p-map-4.0.0.tgz",
-          "integrity": "sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ==",
-          "dev": true,
-          "requires": {
-            "aggregate-error": "^3.0.0"
-          }
-        },
-        "pkg-dir": {
-          "version": "4.2.0",
-          "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
-          "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
-          "dev": true,
-          "requires": {
-            "find-up": "^4.0.0"
-          }
-        },
-        "readdirp": {
-          "version": "3.6.0",
-          "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
-          "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-          "dev": true,
-          "requires": {
-            "picomatch": "^2.2.1"
-          }
-        },
-        "rimraf": {
-          "version": "3.0.2",
-          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
-          "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
-          "dev": true,
-          "requires": {
-            "glob": "^7.1.3"
-          }
-        },
-        "schema-utils": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.0.tgz",
-          "integrity": "sha512-tTEaeYkyIhEZ9uWgAjDerWov3T9MgX8dhhy2r0IGeeX4W8ngtGl1++dUve/RUqzuaASSh7shwCDJjEzthxki8w==",
-          "dev": true,
-          "requires": {
-            "@types/json-schema": "^7.0.7",
-            "ajv": "^6.12.5",
-            "ajv-keywords": "^3.5.2"
-          }
-        },
-        "semver": {
-          "version": "6.3.0",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-          "dev": true
-        },
-        "slash": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
-          "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
-          "dev": true
-        },
-        "strip-ansi": {
-          "version": "6.0.0",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
-          "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
-          "dev": true,
-          "requires": {
-            "ansi-regex": "^5.0.0"
-          }
-        },
-        "to-regex-range": {
-          "version": "5.0.1",
-          "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-          "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-          "dev": true,
-          "requires": {
-            "is-number": "^7.0.0"
-          }
-        }
-      }
-    },
-    "webpack-merge": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-5.2.0.tgz",
-      "integrity": "sha512-QBglJBg5+lItm3/Lopv8KDDK01+hjdg2azEwi/4vKJ8ZmGPdtJsTpjtNNOW3a4WiqzXdCATtTudOZJngE7RKkA==",
-      "dev": true,
-      "requires": {
-        "clone-deep": "^4.0.1",
-        "wildcard": "^2.0.0"
+        "node": ">=6"
       }
     },
-    "webpack-sources": {
-      "version": "1.4.3",
-      "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-1.4.3.tgz",
-      "integrity": "sha512-lgTS3Xhv1lCOKo7SA5TjKXMjpSM4sBjNV5+q2bqesbSPs5FjGmU6jjtBSkX9b4qW87vDIsCIlUPOEhbZrMdjeQ==",
-      "dev": true,
-      "requires": {
-        "source-list-map": "^2.0.0",
-        "source-map": "~0.6.1"
+    "node_modules/webpack/node_modules/webpack-sources": {
+      "version": "3.2.3",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.13.0"
       }
     },
-    "websocket-driver": {
+    "node_modules/websocket-driver": {
       "version": "0.7.4",
-      "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.4.tgz",
-      "integrity": "sha512-b17KeDIQVjvb0ssuSDF2cYXSg2iztliJ4B9WdsuB6J952qCPKmnVq4DyW5motImXHDC1cBT/1UezrJVsKw5zjg==",
-      "dev": true,
-      "requires": {
+      "license": "Apache-2.0",
+      "dependencies": {
         "http-parser-js": ">=0.5.1",
         "safe-buffer": ">=5.1.0",
         "websocket-extensions": ">=0.1.1"
+      },
+      "engines": {
+        "node": ">=0.8.0"
       }
     },
-    "websocket-extensions": {
+    "node_modules/websocket-extensions": {
       "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.4.tgz",
-      "integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==",
-      "dev": true
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8.0"
+      }
     },
-    "whatwg-encoding": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-1.0.5.tgz",
-      "integrity": "sha512-b5lim54JOPN9HtzvK9HFXvBma/rnfFeqsic0hSpjtDbVxR3dJKLc+KB4V6GgiGOvl7CY/KNh8rxSo9DKQrnUEw==",
-      "dev": true,
-      "requires": {
-        "iconv-lite": "0.4.24"
+    "node_modules/whatwg-encoding": {
+      "version": "2.0.0",
+      "license": "MIT",
+      "dependencies": {
+        "iconv-lite": "0.6.3"
+      },
+      "engines": {
+        "node": ">=12"
       }
     },
-    "whatwg-mimetype": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz",
-      "integrity": "sha512-M4yMwr6mAnQz76TbJm914+gPpB/nCwvZbJU28cUD6dR004SAxDLOOSUaB1JDRqLtaOV/vi0IC5lEAGFgrjGv/g==",
-      "dev": true
+    "node_modules/whatwg-encoding/node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
     },
-    "whatwg-url": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-7.1.0.tgz",
-      "integrity": "sha512-WUu7Rg1DroM7oQvGWfOiAK21n74Gg+T4elXEQYkOhtyLeWiJFoOGLXPKI/9gzIie9CtwVLm8wtw6YJdKyxSjeg==",
+    "node_modules/whatwg-mimetype": {
+      "version": "3.0.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/whatwg-url": {
+      "version": "6.5.0",
       "dev": true,
-      "requires": {
+      "license": "MIT",
+      "dependencies": {
         "lodash.sortby": "^4.7.0",
         "tr46": "^1.0.1",
         "webidl-conversions": "^4.0.2"
       }
     },
-    "which": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
-      "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
+    "node_modules/whatwg-url/node_modules/webidl-conversions": {
+      "version": "4.0.2",
       "dev": true,
-      "requires": {
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/which": {
+      "version": "2.0.2",
+      "license": "ISC",
+      "dependencies": {
         "isexe": "^2.0.0"
+      },
+      "bin": {
+        "node-which": "bin/node-which"
+      },
+      "engines": {
+        "node": ">= 8"
       }
     },
-    "which-boxed-primitive": {
+    "node_modules/which-boxed-primitive": {
       "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz",
-      "integrity": "sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==",
-      "requires": {
+      "license": "MIT",
+      "dependencies": {
         "is-bigint": "^1.0.1",
         "is-boolean-object": "^1.1.0",
         "is-number-object": "^1.0.4",
         "is-string": "^1.0.5",
         "is-symbol": "^1.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "which-module": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz",
-      "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=",
-      "dev": true
-    },
-    "wildcard": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/wildcard/-/wildcard-2.0.0.tgz",
-      "integrity": "sha512-JcKqAHLPxcdb9KM49dufGXn2x3ssnfjbcaQdLlfZsL9rH9wgDQjUtDxbo8NE0F6SFvydeu1VhZe7hZuHsB2/pw==",
-      "dev": true
-    },
-    "winston": {
-      "version": "2.4.5",
-      "resolved": "https://registry.npmjs.org/winston/-/winston-2.4.5.tgz",
-      "integrity": "sha512-TWoamHt5yYvsMarGlGEQE59SbJHqGsZV8/lwC+iCcGeAe0vUaOh+Lv6SYM17ouzC/a/LB1/hz/7sxFBtlu1l4A==",
+    "node_modules/which-collection": {
+      "version": "1.0.2",
       "dev": true,
-      "requires": {
-        "async": "~1.0.0",
-        "colors": "1.0.x",
-        "cycle": "1.0.x",
-        "eyes": "0.1.x",
-        "isstream": "0.1.x",
-        "stack-trace": "0.0.x"
-      },
-      "dependencies": {
-        "async": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/async/-/async-1.0.0.tgz",
-          "integrity": "sha1-+PwEyjoTeErenhZBr5hXjPvWR6k=",
-          "dev": true
-        },
-        "colors": {
-          "version": "1.0.3",
-          "resolved": "https://registry.npmjs.org/colors/-/colors-1.0.3.tgz",
-          "integrity": "sha1-BDP0TYCWgP3rYO0mDxsMJi6CpAs=",
-          "dev": true
-        }
+      "license": "MIT",
+      "dependencies": {
+        "is-map": "^2.0.3",
+        "is-set": "^2.0.3",
+        "is-weakmap": "^2.0.2",
+        "is-weakset": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "word-wrap": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
-      "integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==",
-      "dev": true
+    "node_modules/which-typed-array": {
+      "version": "1.1.15",
+      "license": "MIT",
+      "dependencies": {
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.7",
+        "for-each": "^0.3.3",
+        "gopd": "^1.0.1",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
     },
-    "worker-rpc": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/worker-rpc/-/worker-rpc-0.1.1.tgz",
-      "integrity": "sha512-P1WjMrUB3qgJNI9jfmpZ/htmBEjFh//6l/5y8SD9hg1Ef5zTTVVoRjTrTEzPrNBQvmhMxkoTsjOXN10GWU7aCg==",
-      "dev": true,
-      "requires": {
-        "microevent.ts": "~0.1.1"
+    "node_modules/wildcard": {
+      "version": "2.0.1",
+      "license": "MIT"
+    },
+    "node_modules/word-wrap": {
+      "version": "1.2.5",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
       }
     },
-    "wrap-ansi": {
+    "node_modules/wrap-ansi": {
       "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
-      "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
-      "dev": true,
-      "requires": {
+      "license": "MIT",
+      "dependencies": {
         "ansi-styles": "^4.0.0",
         "string-width": "^4.1.0",
         "strip-ansi": "^6.0.0"
       },
-      "dependencies": {
-        "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,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "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,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "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
-        },
-        "strip-ansi": {
-          "version": "6.0.0",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
-          "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
-          "dev": true,
-          "requires": {
-            "ansi-regex": "^5.0.0"
-          }
-        }
+      "engines": {
+        "node": ">=8"
       }
     },
-    "wrappy": {
+    "node_modules/wrappy": {
       "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
-    },
-    "write": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/write/-/write-1.0.3.tgz",
-      "integrity": "sha512-/lg70HAjtkUgWPVZhZcm+T4hkL8Zbtp1nFNOn3lRrxnlv50SRBv7cR7RqR+GMsd3hUXy9hWBo4CHTbFTcOYwig==",
-      "dev": true,
-      "requires": {
-        "mkdirp": "^0.5.1"
-      }
+      "license": "ISC"
     },
-    "write-file-atomic": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-3.0.3.tgz",
-      "integrity": "sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==",
-      "dev": true,
-      "requires": {
+    "node_modules/write-file-atomic": {
+      "version": "4.0.2",
+      "license": "ISC",
+      "dependencies": {
         "imurmurhash": "^0.1.4",
-        "is-typedarray": "^1.0.0",
-        "signal-exit": "^3.0.2",
-        "typedarray-to-buffer": "^3.1.5"
+        "signal-exit": "^3.0.7"
+      },
+      "engines": {
+        "node": "^12.13.0 || ^14.15.0 || >=16.0.0"
       }
     },
-    "ws": {
-      "version": "7.5.2",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.2.tgz",
-      "integrity": "sha512-lkF7AWRicoB9mAgjeKbGqVUekLnSNO4VjKVnuPHpQeOxZOErX6BPXwJk70nFslRCEEA8EVW7ZjKwXaP9N+1sKQ==",
-      "dev": true
+    "node_modules/ws": {
+      "version": "8.18.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
     },
-    "xml-name-validator": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-3.0.0.tgz",
-      "integrity": "sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw==",
-      "dev": true
+    "node_modules/xml-name-validator": {
+      "version": "4.0.0",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=12"
+      }
     },
-    "xmlchars": {
+    "node_modules/xmlchars": {
       "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
-      "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
-      "dev": true
+      "license": "MIT"
     },
-    "xregexp": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/xregexp/-/xregexp-4.4.1.tgz",
-      "integrity": "sha512-2u9HwfadaJaY9zHtRRnH6BY6CQVNQKkYm3oLtC9gJXXzfsbACg5X5e4EZZGVAH+YIfa+QA9lsFQTTe3HURF3ag==",
-      "dev": true,
-      "requires": {
-        "@babel/runtime-corejs3": "^7.12.1"
-      },
-      "dependencies": {
-        "@babel/runtime-corejs3": {
-          "version": "7.14.7",
-          "resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.14.7.tgz",
-          "integrity": "sha512-Wvzcw4mBYbTagyBVZpAJWI06auSIj033T/yNE0Zn1xcup83MieCddZA7ls3kme17L4NOGBrQ09Q+nKB41RLWBA==",
-          "dev": true,
-          "requires": {
-            "core-js-pure": "^3.15.0",
-            "regenerator-runtime": "^0.13.4"
-          }
-        },
-        "core-js-pure": {
-          "version": "3.15.2",
-          "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.15.2.tgz",
-          "integrity": "sha512-D42L7RYh1J2grW8ttxoY1+17Y4wXZeKe7uyplAI3FkNQyI5OgBIAjUfFiTPfL1rs0qLpxaabITNbjKl1Sp82tA==",
-          "dev": true
-        }
+    "node_modules/xmlchecker": {
+      "version": "0.1.0",
+      "license": "BSD-4-Clause",
+      "engines": {
+        "node": ">=0.10.0"
       }
     },
-    "xtend": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
-      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
-      "dev": true,
-      "optional": true
-    },
-    "y18n": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.0.tgz",
-      "integrity": "sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w==",
-      "dev": true
+    "node_modules/y18n": {
+      "version": "5.0.8",
+      "license": "ISC",
+      "engines": {
+        "node": ">=10"
+      }
     },
-    "yallist": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-      "dev": true
+    "node_modules/yallist": {
+      "version": "3.1.1",
+      "license": "ISC"
     },
-    "yaml": {
+    "node_modules/yaml": {
       "version": "1.10.2",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
-      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
-      "dev": true
+      "license": "ISC",
+      "engines": {
+        "node": ">= 6"
+      }
     },
-    "yargs": {
-      "version": "15.4.1",
-      "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz",
-      "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
-      "dev": true,
-      "requires": {
-        "cliui": "^6.0.0",
-        "decamelize": "^1.2.0",
-        "find-up": "^4.1.0",
-        "get-caller-file": "^2.0.1",
+    "node_modules/yargs": {
+      "version": "17.7.2",
+      "license": "MIT",
+      "dependencies": {
+        "cliui": "^8.0.1",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
         "require-directory": "^2.1.1",
-        "require-main-filename": "^2.0.0",
-        "set-blocking": "^2.0.0",
-        "string-width": "^4.2.0",
-        "which-module": "^2.0.0",
-        "y18n": "^4.0.0",
-        "yargs-parser": "^18.1.2"
+        "string-width": "^4.2.3",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^21.1.1"
+      },
+      "engines": {
+        "node": ">=12"
       }
     },
-    "yargs-parser": {
-      "version": "18.1.3",
-      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
-      "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
-      "dev": true,
-      "requires": {
-        "camelcase": "^5.0.0",
-        "decamelize": "^1.2.0"
-      },
-      "dependencies": {
-        "camelcase": {
-          "version": "5.3.1",
-          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
-          "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
-          "dev": true
-        }
+    "node_modules/yargs-parser": {
+      "version": "20.2.9",
+      "license": "ISC",
+      "engines": {
+        "node": ">=10"
       }
     },
-    "yauzl": {
-      "version": "2.10.0",
-      "resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.10.0.tgz",
-      "integrity": "sha1-x+sXyT4RLLEIb6bY5R+wZnt5pfk=",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "buffer-crc32": "~0.2.3",
-        "fd-slicer": "~1.1.0"
+    "node_modules/yargs/node_modules/yargs-parser": {
+      "version": "21.1.1",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
       }
     },
-    "yocto-queue": {
+    "node_modules/yocto-queue": {
       "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
-      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
-      "dev": true
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
     },
-    "yup": {
+    "node_modules/yup": {
       "version": "0.31.1",
-      "resolved": "https://registry.npmjs.org/yup/-/yup-0.31.1.tgz",
-      "integrity": "sha512-Lf6648jDYOWR75IlWkVfwesPyW6oj+50NpxlKvsQlpPsB8eI+ndI7b4S1VrwbmeV9hIZDu1MzrlIL4W+gK1jPw==",
-      "requires": {
+      "license": "MIT",
+      "dependencies": {
         "@babel/runtime": "^7.10.5",
         "lodash": "^4.17.20",
         "lodash-es": "^4.17.11",
         "property-expr": "^2.0.4",
         "toposort": "^2.0.2"
       },
-      "dependencies": {
-        "toposort": {
-          "version": "2.0.2",
-          "resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz",
-          "integrity": "sha1-riF2gXXRVZ1IvvNUILL0li8JwzA="
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "plugins/course-apps/calculator": {
+      "name": "@openedx-plugins/course-app-calculator",
+      "version": "0.1.0",
+      "peerDependencies": {
+        "@edx/frontend-app-authoring": "*",
+        "@edx/frontend-platform": "*",
+        "@openedx/paragon": "*",
+        "prop-types": "*",
+        "react": "*"
+      },
+      "peerDependenciesMeta": {
+        "@edx/frontend-app-authoring": {
+          "optional": true
+        }
+      }
+    },
+    "plugins/course-apps/edxnotes": {
+      "name": "@openedx-plugins/course-app-edxnotes",
+      "version": "0.1.0",
+      "peerDependencies": {
+        "@edx/frontend-app-authoring": "*",
+        "@edx/frontend-platform": "*",
+        "@openedx/paragon": "*",
+        "prop-types": "*",
+        "react": "*"
+      },
+      "peerDependenciesMeta": {
+        "@edx/frontend-app-authoring": {
+          "optional": true
+        }
+      }
+    },
+    "plugins/course-apps/learning_assistant": {
+      "name": "@openedx-plugins/course-app-learning_assistant",
+      "version": "0.1.0",
+      "peerDependencies": {
+        "@edx/frontend-app-authoring": "*",
+        "@edx/frontend-platform": "*",
+        "@openedx/paragon": "*",
+        "prop-types": "*",
+        "react": "*",
+        "yup": "*"
+      },
+      "peerDependenciesMeta": {
+        "@edx/frontend-app-authoring": {
+          "optional": true
+        }
+      }
+    },
+    "plugins/course-apps/live": {
+      "name": "@openedx-plugins/course-app-live",
+      "version": "0.1.0",
+      "peerDependencies": {
+        "@edx/frontend-app-authoring": "*",
+        "@edx/frontend-platform": "*",
+        "@openedx/paragon": "*",
+        "@reduxjs/toolkit": "*",
+        "lodash": "*",
+        "prop-types": "*",
+        "react": "*",
+        "react-redux": "*",
+        "react-router-dom": "*",
+        "yup": "*"
+      },
+      "peerDependenciesMeta": {
+        "@edx/frontend-app-authoring": {
+          "optional": true
+        }
+      }
+    },
+    "plugins/course-apps/ora_settings": {
+      "name": "@openedx-plugins/course-app-ora_settings",
+      "version": "0.1.0",
+      "peerDependencies": {
+        "@edx/frontend-app-authoring": "*",
+        "@edx/frontend-platform": "*",
+        "@openedx/paragon": "*",
+        "prop-types": "*",
+        "react": "*",
+        "react-redux": "*",
+        "yup": "*"
+      },
+      "peerDependenciesMeta": {
+        "@edx/frontend-app-authoring": {
+          "optional": true
+        }
+      }
+    },
+    "plugins/course-apps/proctoring": {
+      "name": "@openedx-plugins/course-app-proctoring",
+      "version": "0.1.0",
+      "peerDependencies": {
+        "@edx/frontend-app-authoring": "*",
+        "@edx/frontend-platform": "*",
+        "@openedx/paragon": "*",
+        "classnames": "*",
+        "email-validator": "*",
+        "moment": "*",
+        "prop-types": "*",
+        "react": "*"
+      },
+      "peerDependenciesMeta": {
+        "@edx/frontend-app-authoring": {
+          "optional": true
+        }
+      }
+    },
+    "plugins/course-apps/progress": {
+      "name": "@openedx-plugins/course-app-progress",
+      "version": "0.1.0",
+      "peerDependencies": {
+        "@edx/frontend-app-authoring": "*",
+        "@edx/frontend-platform": "*",
+        "@openedx/paragon": "*",
+        "prop-types": "*",
+        "react": "*",
+        "yup": "*"
+      },
+      "peerDependenciesMeta": {
+        "@edx/frontend-app-authoring": {
+          "optional": true
+        }
+      }
+    },
+    "plugins/course-apps/teams": {
+      "name": "@openedx-plugins/course-app-teams",
+      "version": "0.1.0",
+      "peerDependencies": {
+        "@edx/frontend-app-authoring": "*",
+        "@edx/frontend-platform": "*",
+        "@openedx/paragon": "*",
+        "formik": "*",
+        "prop-types": "*",
+        "react": "*",
+        "uuid": "*",
+        "yup": "*"
+      },
+      "peerDependenciesMeta": {
+        "@edx/frontend-app-authoring": {
+          "optional": true
+        }
+      }
+    },
+    "plugins/course-apps/wiki": {
+      "name": "@openedx-plugins/course-app-wiki",
+      "version": "0.1.0",
+      "peerDependencies": {
+        "@edx/frontend-app-authoring": "*",
+        "@edx/frontend-platform": "*",
+        "@openedx/paragon": "*",
+        "prop-types": "*",
+        "react": "*",
+        "yup": "*"
+      },
+      "peerDependenciesMeta": {
+        "@edx/frontend-app-authoring": {
+          "optional": true
+        }
+      }
+    },
+    "plugins/course-apps/xpert_unit_summary": {
+      "name": "@openedx-plugins/course-app-xpert_unit_summary",
+      "version": "0.1.0",
+      "peerDependencies": {
+        "@edx/frontend-app-authoring": "*",
+        "@edx/frontend-platform": "*",
+        "@openedx/paragon": "*",
+        "formik": "*",
+        "prop-types": "*",
+        "react": "*",
+        "react-redux": "*",
+        "react-router-dom": "*",
+        "yup": "*"
+      },
+      "peerDependenciesMeta": {
+        "@edx/frontend-app-authoring": {
+          "optional": true
         }
       }
     }
diff --git a/package.json b/package.json
index 6d9ee0ff9d..3a080e1d9d 100644
--- a/package.json
+++ b/package.json
@@ -1,24 +1,27 @@
 {
-  "name": "@edx/frontend-app-course-authoring",
+  "name": "@edx/frontend-app-authoring",
   "version": "0.1.0",
   "description": "Frontend application template",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/edx/frontend-app-course-authoring.git"
+    "url": "git+https://github.com/openedx/frontend-app-authoring.git"
   },
   "browserslist": [
-    "last 2 versions",
-    "ie 11"
+    "extends @edx/browserslist-config"
   ],
   "scripts": {
     "build": "fedx-scripts webpack",
-    "i18n_extract": "BABEL_ENV=i18n fedx-scripts babel src --quiet > /dev/null",
-    "is-es5": "es-check es5 ./dist/*.js",
-    "lint": "fedx-scripts eslint --ext .js --ext .jsx .",
-    "lint:fix": "fedx-scripts eslint --ext .js --ext .jsx . --fix",
-    "snapshot": "fedx-scripts jest --updateSnapshot",
+    "i18n_extract": "fedx-scripts formatjs extract",
+    "stylelint": "stylelint \"plugins/**/*.scss\" \"src/**/*.scss\" \"scss/**/*.scss\" --config .stylelintrc.json",
+    "lint": "npm run stylelint && fedx-scripts eslint --ext .js --ext .jsx --ext .ts --ext .tsx .",
+    "lint:fix": "npm run stylelint -- --fix && fedx-scripts eslint --fix --ext .js --ext .jsx --ext .ts --ext .tsx .",
+    "snapshot": "TZ=UTC fedx-scripts jest --updateSnapshot",
     "start": "fedx-scripts webpack-dev-server --progress",
-    "test": "fedx-scripts jest --coverage --passWithNoTests"
+    "start:with-theme": "paragon install-theme && npm start && npm install",
+    "dev": "PUBLIC_PATH=/authoring/ MFE_CONFIG_API_URL='http://localhost:8000/api/mfe_config/v1' fedx-scripts webpack-dev-server --progress --host apps.local.openedx.io",
+    "test": "TZ=UTC fedx-scripts jest --coverage --passWithNoTests",
+    "test:ci": "TZ=UTC fedx-scripts jest --silent --coverage --passWithNoTests",
+    "types": "tsc --noEmit"
   },
   "husky": {
     "hooks": {
@@ -27,55 +30,101 @@
   },
   "author": "edX",
   "license": "AGPL-3.0",
-  "homepage": "https://github.com/edx/frontend-app-course-authoring#readme",
+  "homepage": "https://github.com/openedx/frontend-app-authoring#readme",
   "publishConfig": {
     "access": "public"
   },
   "bugs": {
-    "url": "https://github.com/edx/frontend-app-course-authoring/issues"
+    "url": "https://github.com/openedx/frontend-app-authoring/issues"
   },
   "dependencies": {
-    "@edx/brand": "npm:@edx/brand-openedx@1.1.0",
-    "@edx/frontend-component-footer": "10.0.11",
-    "@edx/frontend-platform": "1.11.0",
-    "@edx/paragon": "16.6.4",
-    "@fortawesome/fontawesome-svg-core": "1.2.28",
-    "@fortawesome/free-brands-svg-icons": "5.11.2",
-    "@fortawesome/free-regular-svg-icons": "5.11.2",
-    "@fortawesome/free-solid-svg-icons": "5.11.2",
-    "@fortawesome/react-fontawesome": "0.1.9",
-    "@reduxjs/toolkit": "1.5.0",
-    "classnames": "2.2.6",
-    "core-js": "3.8.1",
+    "@codemirror/lang-html": "^6.0.0",
+    "@codemirror/lang-xml": "^6.0.0",
+    "@codemirror/lint": "^6.2.1",
+    "@codemirror/state": "^6.0.0",
+    "@codemirror/view": "^6.0.0",
+    "@dnd-kit/core": "^6.1.0",
+    "@dnd-kit/modifiers": "^7.0.0",
+    "@dnd-kit/sortable": "^8.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@edx/brand": "npm:@openedx/brand-openedx@^1.2.3",
+    "@edx/browserslist-config": "1.2.0",
+    "@edx/frontend-component-footer": "^14.1.0",
+    "@edx/frontend-component-header": "^5.8.0",
+    "@edx/frontend-enterprise-hotjar": "^2.0.0",
+    "@edx/frontend-platform": "^8.0.3",
+    "@edx/openedx-atlas": "^0.6.0",
+    "@openedx-plugins/course-app-calculator": "file:plugins/course-apps/calculator",
+    "@openedx-plugins/course-app-edxnotes": "file:plugins/course-apps/edxnotes",
+    "@openedx-plugins/course-app-learning_assistant": "file:plugins/course-apps/learning_assistant",
+    "@openedx-plugins/course-app-live": "file:plugins/course-apps/live",
+    "@openedx-plugins/course-app-ora_settings": "file:plugins/course-apps/ora_settings",
+    "@openedx-plugins/course-app-proctoring": "file:plugins/course-apps/proctoring",
+    "@openedx-plugins/course-app-progress": "file:plugins/course-apps/progress",
+    "@openedx-plugins/course-app-teams": "file:plugins/course-apps/teams",
+    "@openedx-plugins/course-app-wiki": "file:plugins/course-apps/wiki",
+    "@openedx-plugins/course-app-xpert_unit_summary": "file:plugins/course-apps/xpert_unit_summary",
+    "@openedx/frontend-build": "^14.2.0",
+    "@openedx/frontend-plugin-framework": "^1.2.1",
+    "@openedx/paragon": "^22.8.1",
+    "@redux-devtools/extension": "^3.3.0",
+    "@reduxjs/toolkit": "1.9.7",
+    "@tanstack/react-query": "4.36.1",
+    "@tinymce/tinymce-react": "^3.14.0",
+    "classnames": "2.5.1",
+    "codemirror": "^6.0.0",
     "email-validator": "2.0.4",
-    "formik": "2.2.6",
+    "fast-xml-parser": "^4.0.10",
+    "file-saver": "^2.0.5",
+    "formik": "2.4.6",
+    "frontend-components-tinymce-advanced-plugins": "^1.0.3",
+    "jszip": "^3.10.1",
     "lodash": "4.17.21",
-    "moment": "2.27.0",
-    "prop-types": "15.7.2",
-    "react": "16.14.0",
-    "react-dom": "16.14.0",
-    "react-redux": "7.1.3",
-    "react-responsive": "8.1.0",
-    "react-router": "5.1.2",
-    "react-router-dom": "5.1.2",
-    "react-transition-group": "4.4.1",
+    "meilisearch": "^0.41.0",
+    "moment": "2.30.1",
+    "moment-shortformat": "^2.1.0",
+    "npm": "^10.8.1",
+    "prop-types": "^15.8.1",
+    "react": "17.0.2",
+    "react-datepicker": "^4.13.0",
+    "react-dom": "17.0.2",
+    "react-error-boundary": "^4.0.13",
+    "react-helmet": "^6.1.0",
+    "react-onclickoutside": "^6.13.0",
+    "react-redux": "7.2.9",
+    "react-responsive": "9.0.2",
+    "react-router": "6.27.0",
+    "react-router-dom": "6.27.0",
+    "react-select": "5.8.0",
+    "react-textarea-autosize": "^8.5.3",
+    "react-transition-group": "4.4.5",
     "redux": "4.0.5",
-    "regenerator-runtime": "0.13.7",
+    "redux-logger": "^3.0.6",
+    "redux-thunk": "^2.4.1",
+    "reselect": "^4.1.5",
+    "start": "^5.1.0",
+    "tinymce": "^5.10.4",
+    "universal-cookie": "^4.0.4",
     "uuid": "^3.4.0",
+    "xmlchecker": "^0.1.0",
     "yup": "0.31.1"
   },
   "devDependencies": {
-    "@edx/frontend-build": "7.0.0",
-    "@testing-library/jest-dom": "5.11.10",
-    "@testing-library/react": "10.4.7",
-    "@testing-library/user-event": "^13.1.5",
-    "axios-mock-adapter": "1.18.1",
-    "codecov": "3.7.1",
-    "es-check": "5.1.0",
-    "glob": "7.1.6",
-    "husky": "3.1.0",
-    "jest": "24.9.0",
-    "react-test-renderer": "16.9.0",
-    "reactifex": "1.1.1"
+    "@edx/react-unit-test-utils": "3.0.0",
+    "@edx/stylelint-config-edx": "2.3.3",
+    "@edx/typescript-config": "^1.0.1",
+    "@testing-library/jest-dom": "5.17.0",
+    "@testing-library/react": "12.1.5",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/user-event": "^13.2.1",
+    "@types/lodash": "^4.17.7",
+    "axios-mock-adapter": "1.22.0",
+    "eslint-import-resolver-webpack": "^0.13.8",
+    "fetch-mock-jest": "^1.5.1",
+    "husky": "7.0.4",
+    "jest-canvas-mock": "^2.5.2",
+    "jest-expect-message": "^1.1.3",
+    "react-test-renderer": "17.0.2",
+    "redux-mock-store": "^1.5.4"
   }
 }
diff --git a/src/pages-and-resources/calculator/Settings.jsx b/plugins/course-apps/calculator/Settings.jsx
similarity index 59%
rename from src/pages-and-resources/calculator/Settings.jsx
rename to plugins/course-apps/calculator/Settings.jsx
index e4806c022a..7bfed1f658 100644
--- a/src/pages-and-resources/calculator/Settings.jsx
+++ b/plugins/course-apps/calculator/Settings.jsx
@@ -1,11 +1,17 @@
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import PropTypes from 'prop-types';
 import React from 'react';
-import AppSettingsModal from '../app-settings-modal/AppSettingsModal';
+import PropTypes from 'prop-types';
 
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import AppSettingsModal from 'CourseAuthoring/pages-and-resources/app-settings-modal/AppSettingsModal';
 import messages from './messages';
 
-function CalculatorSettings({ intl, onClose }) {
+/**
+ * Settings widget for the "calculator" Course App.
+ * @param {{onClose: () => void}} props
+ */
+const CalculatorSettings = ({ onClose }) => {
+  const intl = useIntl();
   return (
     <AppSettingsModal
       appId="calculator"
@@ -16,11 +22,10 @@ function CalculatorSettings({ intl, onClose }) {
       onClose={onClose}
     />
   );
-}
+};
 
 CalculatorSettings.propTypes = {
-  intl: intlShape.isRequired,
   onClose: PropTypes.func.isRequired,
 };
 
-export default injectIntl(CalculatorSettings);
+export default CalculatorSettings;
diff --git a/src/pages-and-resources/calculator/messages.js b/plugins/course-apps/calculator/messages.js
similarity index 100%
rename from src/pages-and-resources/calculator/messages.js
rename to plugins/course-apps/calculator/messages.js
diff --git a/plugins/course-apps/calculator/package.json b/plugins/course-apps/calculator/package.json
new file mode 100644
index 0000000000..dec9813433
--- /dev/null
+++ b/plugins/course-apps/calculator/package.json
@@ -0,0 +1,17 @@
+{
+    "name": "@openedx-plugins/course-app-calculator",
+    "version": "0.1.0",
+    "description": "Calculator configuration for courses using it",
+    "peerDependencies": {
+        "@edx/frontend-app-authoring": "*",
+        "@edx/frontend-platform": "*",
+        "@openedx/paragon": "*",
+        "prop-types": "*",
+        "react": "*"
+    },
+    "peerDependenciesMeta": {
+        "@edx/frontend-app-authoring": {
+            "optional": true
+        }
+    }
+}
diff --git a/plugins/course-apps/edxnotes/Settings.jsx b/plugins/course-apps/edxnotes/Settings.jsx
new file mode 100644
index 0000000000..b6672320ca
--- /dev/null
+++ b/plugins/course-apps/edxnotes/Settings.jsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import AppSettingsModal from 'CourseAuthoring/pages-and-resources/app-settings-modal/AppSettingsModal';
+import messages from './messages';
+
+/**
+ * Settings widget for the "edxnotes" Course App.
+ * @param {{onClose: () => void}} props
+ */
+const NotesSettings = ({ onClose }) => {
+  const intl = useIntl();
+  return (
+    <AppSettingsModal
+      appId="edxnotes"
+      title={intl.formatMessage(messages.heading)}
+      enableAppHelp={intl.formatMessage(messages.enableNotesHelp)}
+      enableAppLabel={intl.formatMessage(messages.enableNotesLabel)}
+      learnMoreText={intl.formatMessage(messages.enableNotesLink)}
+      onClose={onClose}
+    />
+  );
+};
+
+NotesSettings.propTypes = {
+  onClose: PropTypes.func.isRequired,
+};
+
+export default NotesSettings;
diff --git a/plugins/course-apps/edxnotes/messages.js b/plugins/course-apps/edxnotes/messages.js
new file mode 100644
index 0000000000..30fb2dabb9
--- /dev/null
+++ b/plugins/course-apps/edxnotes/messages.js
@@ -0,0 +1,25 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  heading: {
+    id: 'course-authoring.pages-resources.notes.heading',
+    defaultMessage: 'Configure notes',
+  },
+  enableNotesLabel: {
+    id: 'course-authoring.pages-resources.notes.enable-notes.label',
+    defaultMessage: 'Notes',
+  },
+  enableNotesHelp: {
+    id: 'course-authoring.pages-resources.notes.enable-notes.help',
+    defaultMessage: `Learners can access their notes either in the body of the
+    course of on a notes page. On the notes page, a learner can see all the
+    notes made during the course. The page also contains links to the location
+    of the notes in the course body.`,
+  },
+  enableNotesLink: {
+    id: 'course-authoring.pages-resources.notes.enable-notes.link',
+    defaultMessage: 'Learn more about notes',
+  },
+});
+
+export default messages;
diff --git a/plugins/course-apps/edxnotes/package.json b/plugins/course-apps/edxnotes/package.json
new file mode 100644
index 0000000000..39c643d015
--- /dev/null
+++ b/plugins/course-apps/edxnotes/package.json
@@ -0,0 +1,17 @@
+{
+    "name": "@openedx-plugins/course-app-edxnotes",
+    "version": "0.1.0",
+    "description": "edxnotes configuration for courses using it",
+    "peerDependencies": {
+        "@edx/frontend-app-authoring": "*",
+        "@edx/frontend-platform": "*",
+        "@openedx/paragon": "*",
+        "prop-types": "*",
+        "react": "*"
+    },
+    "peerDependenciesMeta": {
+        "@edx/frontend-app-authoring": {
+            "optional": true
+        }
+    }
+}
diff --git a/plugins/course-apps/learning_assistant/Settings.jsx b/plugins/course-apps/learning_assistant/Settings.jsx
new file mode 100644
index 0000000000..7b9bb916b3
--- /dev/null
+++ b/plugins/course-apps/learning_assistant/Settings.jsx
@@ -0,0 +1,63 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Hyperlink } from '@openedx/paragon';
+
+import AppSettingsModal from 'CourseAuthoring/pages-and-resources/app-settings-modal/AppSettingsModal';
+import { useModel } from 'CourseAuthoring/generic/model-store';
+
+import messages from './messages';
+
+const LearningAssistantSettings = ({ onClose }) => {
+  const appId = 'learning_assistant';
+  const appInfo = useModel('courseApps', appId);
+  const intl = useIntl();
+
+  // We need to render more than one link, so we use the bodyChildren prop.
+  const bodyChildren = (
+    appInfo?.documentationLinks?.learnMoreOpenaiDataPrivacy && appInfo?.documentationLinks?.learnMoreOpenai
+      ? (
+        <div className="d-flex flex-column">
+          {appInfo.documentationLinks?.learnMoreOpenaiDataPrivacy && (
+            <Hyperlink
+              className="text-primary-500"
+              destination={appInfo.documentationLinks.learnMoreOpenaiDataPrivacy}
+              target="_blank"
+              rel="noreferrer noopener"
+            >
+              {intl.formatMessage(messages.learningAssistantOpenAIDataPrivacyLink)}
+            </Hyperlink>
+          )}
+          {appInfo.documentationLinks?.learnMoreOpenai && (
+            <Hyperlink
+              className="text-primary-500"
+              destination={appInfo.documentationLinks.learnMoreOpenai}
+              target="_blank"
+              rel="noreferrer noopener"
+            >
+              {intl.formatMessage(messages.learningAssistantOpenAILink)}
+            </Hyperlink>
+          )}
+        </div>
+      )
+      : null
+  );
+
+  return (
+    <AppSettingsModal
+      appId={appId}
+      title={intl.formatMessage(messages.heading)}
+      enableAppHelp={intl.formatMessage(messages.enableLearningAssistantHelp)}
+      enableAppLabel={intl.formatMessage(messages.enableLearningAssistantLabel)}
+      bodyChildren={bodyChildren}
+      onClose={onClose}
+    />
+  );
+};
+
+LearningAssistantSettings.propTypes = {
+  onClose: PropTypes.func.isRequired,
+};
+
+export default LearningAssistantSettings;
diff --git a/plugins/course-apps/learning_assistant/Settings.test.jsx b/plugins/course-apps/learning_assistant/Settings.test.jsx
new file mode 100644
index 0000000000..a9bfa58200
--- /dev/null
+++ b/plugins/course-apps/learning_assistant/Settings.test.jsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import { screen, waitFor } from '@testing-library/react';
+
+import { RequestStatus } from 'CourseAuthoring/data/constants';
+import { render } from 'CourseAuthoring/pages-and-resources/utils.test';
+import LearningAssistantSettings from './Settings';
+
+const onClose = () => { };
+
+describe('Learning Assistant Settings', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders', async () => {
+    const initialState = {
+      models: {
+        courseApps: {
+          learning_assistant:
+          {
+            id: 'learning_assistant',
+            enabled: true,
+            name: 'Learning Assistant',
+            description: 'Learning Assistant description',
+            allowedOperations: {
+              configure: false,
+              enable: true,
+            },
+            documentationLinks: {
+              learnMoreOpenaiDataPrivacy: 'www.example.com/learn-more-data-privacy',
+              learnMoreOpenai: 'www.example.com/learn-more',
+            },
+          },
+        },
+      },
+      pagesAndResources: {
+        loadingStatus: RequestStatus.SUCCESSFUL,
+      },
+    };
+
+    render(
+      <LearningAssistantSettings
+        onClose={onClose}
+      />,
+      {
+        preloadedState: initialState,
+      },
+    );
+
+    const toggleDescription = 'Reinforce learning concepts by sharing text-based course content '
+    + 'with OpenAI (via API) to power an in-course Learning Assistant. Learners can leave feedback about the quality '
+    + 'of the AI-powered experience for use by edX to improve the performance of the tool.';
+
+    await waitFor(() => expect(screen.getByRole('heading', { name: 'Configure Learning Assistant' })).toBeInTheDocument());
+    await waitFor(() => expect(screen.getByText(toggleDescription)).toBeInTheDocument());
+    await waitFor(() => expect(screen.getByText('Learn more about how OpenAI handles data')).toBeInTheDocument());
+    await waitFor(() => expect(screen.getByText('Learn more about OpenAI API data privacy')).toBeInTheDocument());
+  });
+});
diff --git a/plugins/course-apps/learning_assistant/messages.js b/plugins/course-apps/learning_assistant/messages.js
new file mode 100644
index 0000000000..78060bbc77
--- /dev/null
+++ b/plugins/course-apps/learning_assistant/messages.js
@@ -0,0 +1,28 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  heading: {
+    id: 'course-authoring.pages-resources.learning-assistant.heading',
+    defaultMessage: 'Configure Learning Assistant',
+  },
+  enableLearningAssistantLabel: {
+    id: 'course-authoring.pages-resources.learning_assistant.enable-learning-assistant.label',
+    defaultMessage: 'Learning Assistant',
+  },
+  enableLearningAssistantHelp: {
+    id: 'course-authoring.pages-resources.learning_assistant.enable-learning-assistant.help',
+    defaultMessage: `Reinforce learning concepts by sharing text-based course content with OpenAI (via API) to power
+      an in-course Learning Assistant. Learners can leave feedback about the quality of the AI-powered experience for 
+      use by edX to improve the performance of the tool.`,
+  },
+  learningAssistantOpenAILink: {
+    id: 'course-authoring.pages-resources.learning_assistant.open-ai.link',
+    defaultMessage: 'Learn more about how OpenAI handles data',
+  },
+  learningAssistantOpenAIDataPrivacyLink: {
+    id: 'course-authoring.pages-resources.learning_assistant.open-ai.data-privacy.link',
+    defaultMessage: 'Learn more about OpenAI API data privacy',
+  },
+});
+
+export default messages;
diff --git a/plugins/course-apps/learning_assistant/package.json b/plugins/course-apps/learning_assistant/package.json
new file mode 100644
index 0000000000..1ad1a000a9
--- /dev/null
+++ b/plugins/course-apps/learning_assistant/package.json
@@ -0,0 +1,19 @@
+{
+    "name": "@openedx-plugins/course-app-learning_assistant",
+    "version": "0.1.0",
+    "description": "Learning Assistant configuration for courses using it",
+    "peerDependencies": {
+        "@edx/frontend-app-authoring": "*",
+        "@edx/frontend-platform": "*",
+        "@openedx/paragon": "*",
+        "prop-types": "*",
+        "react": "*",
+        "yup": "*"
+    },
+    "peerDependenciesMeta": {
+        "@edx/frontend-app-authoring": {
+            "optional": true
+        }
+    }
+}
+  
\ No newline at end of file
diff --git a/plugins/course-apps/live/BBBSettings.jsx b/plugins/course-apps/live/BBBSettings.jsx
new file mode 100644
index 0000000000..02b09a82b0
--- /dev/null
+++ b/plugins/course-apps/live/BBBSettings.jsx
@@ -0,0 +1,130 @@
+import React, { useEffect, useState } from 'react';
+import { getConfig } from '@edx/frontend-platform';
+import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { Form, Hyperlink } from '@openedx/paragon';
+import PropTypes from 'prop-types';
+import AppConfigFormDivider from 'CourseAuthoring/pages-and-resources/discussions/app-config-form/apps/shared/AppConfigFormDivider';
+import { useModel } from 'CourseAuthoring/generic/model-store';
+
+import { providerNames, bbbPlanTypes } from './constants';
+import LiveCommonFields from './LiveCommonFields';
+import messages from './messages';
+
+const BbbSettings = ({
+  intl,
+  values,
+  setFieldValue,
+}) => {
+  const [bbbPlan, setBbbPlan] = useState(values.tierType);
+
+  useEffect(() => {
+    setBbbPlan(values.tierType);
+  }, [values.tierType]);
+
+  const app = useModel('liveApps', 'big_blue_button');
+  const isPiiDisabled = !values.piiSharingEnable;
+  function getBbbPlanOptions() {
+    const options = ['Select', bbbPlanTypes.commercial];
+    if (app.hasFreeTier) { options.push(bbbPlanTypes.free); }
+    return options.map(option => (
+      <option
+        key={option}
+        value={option}
+        data-testid={option}
+      >
+        {option}
+      </option>
+    ));
+  }
+  const handlePlanChange = (e) => {
+    setBbbPlan(e.target.value);
+    setFieldValue('tierType', e.target.value);
+  };
+  return (
+    <>
+      {isPiiDisabled ? (
+        <p data-testid="request-pii-sharing">
+          {intl.formatMessage(messages.requestPiiSharingEnableForBbb, { provider: providerNames[values.provider] })}
+        </p>
+      ) : (
+        <p data-testid="helper-text">
+          {intl.formatMessage(messages.providerHelperText, { providerName: providerNames[values.provider] })}
+        </p>
+      )}
+
+      <Form.Group controlId="bbs-settings" data-testid="plansDropDown">
+        <Form.Label as="planSelector" className="h6">
+          <FormattedMessage
+            id="authoring.live.bbb.selectPlan.label"
+            defaultMessage="Select a plan"
+            description="Label for bbb plan selection"
+          />
+        </Form.Label>
+        <Form.Control
+          as="select"
+          name="tierType"
+          value={bbbPlan}
+          onChange={handlePlanChange}
+          disabled={isPiiDisabled}
+        >
+          {getBbbPlanOptions()}
+        </Form.Control>
+      </Form.Group>
+
+      <Hyperlink
+        destination={getConfig().BBB_LEARN_MORE_URL}
+        target="_blank"
+        rel="noopener noreferrer"
+        showLaunchIcon
+        className="text-primary-500 pt-2"
+      >
+        { intl.formatMessage(messages.learnMore, { providerName: 'plans' }) }
+      </Hyperlink>
+      <>
+        <AppConfigFormDivider thick marginAdj={{ default: 0, sm: 2 }} />
+        {isPiiDisabled ? (
+          <p data-testid="help-request-pii-sharing">
+            {intl.formatMessage(messages.piiSharingEnableHelpTextBbb)}
+          </p>
+        ) : (
+          <>
+            {bbbPlan === bbbPlanTypes.commercial && <LiveCommonFields values={values} />}
+            {bbbPlan === bbbPlanTypes.free && (
+              <span data-testid="free-plan-message">
+                {intl.formatMessage(messages.freePlanMessage)}
+                <Hyperlink
+                  destination="https://bigbluebutton.org/privacy-policy/"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  showLaunchIcon
+                  className="text-gray-700 ml-1"
+                >
+                  {intl.formatMessage(messages.privacyPolicy)}
+                </Hyperlink>
+              </span>
+            )}
+          </>
+        )}
+      </>
+    </>
+
+  );
+};
+
+BbbSettings.propTypes = {
+  intl: intlShape.isRequired,
+  values: PropTypes.shape({
+    consumerKey: PropTypes.string,
+    consumerSecret: PropTypes.string,
+    launchUrl: PropTypes.string,
+    launchEmail: PropTypes.string,
+    provider: PropTypes.string,
+    piiSharingEmail: PropTypes.bool,
+    piiSharingUsername: PropTypes.bool,
+    piiSharingEnable: PropTypes.bool,
+    tierType: PropTypes.string,
+  }).isRequired,
+  setFieldValue: PropTypes.func.isRequired,
+};
+
+export default injectIntl(BbbSettings);
diff --git a/plugins/course-apps/live/BbbSettings.test.jsx b/plugins/course-apps/live/BbbSettings.test.jsx
new file mode 100644
index 0000000000..143d4eafdc
--- /dev/null
+++ b/plugins/course-apps/live/BbbSettings.test.jsx
@@ -0,0 +1,139 @@
+import {
+  render,
+  queryByTestId,
+  getByRole,
+  getAllByRole,
+  waitForElementToBeRemoved,
+} from '@testing-library/react';
+
+import ReactDOM from 'react-dom';
+import { Routes, Route, MemoryRouter } from 'react-router-dom';
+import { initializeMockApp } from '@edx/frontend-platform';
+import MockAdapter from 'axios-mock-adapter';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { AppProvider, PageWrap } from '@edx/frontend-platform/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import userEvent from '@testing-library/user-event';
+import initializeStore from 'CourseAuthoring/store';
+import { executeThunk } from 'CourseAuthoring/utils';
+import PagesAndResourcesProvider from 'CourseAuthoring/pages-and-resources/PagesAndResourcesProvider';
+
+import LiveSettings from './Settings';
+import {
+  generateLiveConfigurationApiResponse,
+  courseId,
+  initialState,
+  configurationProviders,
+} from './factories/mockApiResponses';
+import { fetchLiveConfiguration, fetchLiveProviders } from './data/thunks';
+import { providerConfigurationApiUrl, providersApiUrl } from './data/api';
+import messages from './messages';
+
+let axiosMock;
+let container;
+let store;
+const liveSettingsUrl = `/course/${courseId}/pages-and-resources/live/settings`;
+
+// Modal creates a portal. Overriding ReactDOM.createPortal allows portals to be tested in jest.
+ReactDOM.createPortal = jest.fn(node => node);
+
+const renderComponent = () => {
+  const wrapper = render(
+    <IntlProvider locale="en">
+      <AppProvider store={store} wrapWithRouter={false}>
+        <PagesAndResourcesProvider courseId={courseId}>
+          <MemoryRouter initialEntries={[liveSettingsUrl]}>
+            <Routes>
+              <Route path={liveSettingsUrl} element={<PageWrap><LiveSettings onClose={() => {}} /></PageWrap>} />
+            </Routes>
+          </MemoryRouter>
+        </PagesAndResourcesProvider>
+      </AppProvider>
+    </IntlProvider>,
+  );
+  container = wrapper.container;
+};
+
+const mockStore = async ({
+  usernameSharing = false,
+  emailSharing = false,
+  enabled = true,
+  piiSharingAllowed = true,
+  isFreeTier = false,
+}) => {
+  const fetchProviderConfigUrl = `${providersApiUrl}/${courseId}/`;
+  const fetchLiveConfigUrl = `${providerConfigurationApiUrl}/${courseId}/`;
+
+  axiosMock.onGet(fetchProviderConfigUrl).reply(200, configurationProviders(emailSharing, usernameSharing, 'big_blue_button', isFreeTier));
+  axiosMock.onGet(fetchLiveConfigUrl).reply(200, generateLiveConfigurationApiResponse(enabled, piiSharingAllowed, 'bigBlueButton', isFreeTier));
+
+  await executeThunk(fetchLiveProviders(courseId), store.dispatch);
+  await executeThunk(fetchLiveConfiguration(courseId), store.dispatch);
+};
+
+describe('BBB Settings', () => {
+  beforeEach(async () => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: false,
+        roles: [],
+      },
+    });
+    store = initializeStore(initialState);
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+  });
+
+  test('Plan dropdown to be visible and enabled in UI', async () => {
+    await mockStore({ emailSharing: true });
+    renderComponent();
+
+    const spinner = getByRole(container, 'status');
+    await waitForElementToBeRemoved(spinner);
+
+    expect(queryByTestId(container, 'plansDropDown')).toBeInTheDocument();
+    expect(container.querySelector('select[name="tierType"]')).not.toBeDisabled();
+  });
+
+  test.each([[true, 3], [false, 2]])('Plan dropdown should display correct number of options', async (isFreeTier, noOfOptions) => {
+    await mockStore({ emailSharing: true, isFreeTier });
+    renderComponent();
+    const spinner = getByRole(container, 'status');
+    await waitForElementToBeRemoved(spinner);
+    const dropDown = queryByTestId(container, 'plansDropDown');
+    expect(getAllByRole(dropDown, 'option').length).toBe(noOfOptions);
+  });
+
+  test(
+    'Connect to support and PII sharing message is visible and plans selection is disabled, When pii sharing is disabled, ',
+    async () => {
+      await mockStore({ piiSharingAllowed: false });
+      renderComponent();
+      const spinner = getByRole(container, 'status');
+      await waitForElementToBeRemoved(spinner);
+      const requestPiiText = queryByTestId(container, 'request-pii-sharing');
+      const helpRequestPiiText = queryByTestId(container, 'help-request-pii-sharing');
+      expect(requestPiiText).toHaveTextContent(
+        messages.requestPiiSharingEnableForBbb.defaultMessage.replaceAll('{provider}', 'BigBlueButton'),
+      );
+      expect(helpRequestPiiText).toHaveTextContent(messages.piiSharingEnableHelpTextBbb.defaultMessage);
+      expect(container.querySelector('select[name="tierType"]')).toBeDisabled();
+    },
+  );
+
+  test('free plans message is visible when free plan is selected', async () => {
+    await mockStore({ emailSharing: true, isFreeTier: true });
+    renderComponent();
+    const spinner = getByRole(container, 'status');
+    await waitForElementToBeRemoved(spinner);
+    const dropDown = container.querySelector('select[name="tierType"]');
+    userEvent.selectOptions(
+      dropDown,
+      getByRole(dropDown, 'option', { name: 'Free' }),
+    );
+    expect(queryByTestId(container, 'free-plan-message')).toBeInTheDocument();
+    expect(queryByTestId(container, 'free-plan-message')).toHaveTextContent(messages.freePlanMessage.defaultMessage);
+  });
+});
diff --git a/plugins/course-apps/live/LiveCommonFields.jsx b/plugins/course-apps/live/LiveCommonFields.jsx
new file mode 100644
index 0000000000..6e49e62df0
--- /dev/null
+++ b/plugins/course-apps/live/LiveCommonFields.jsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import PropTypes from 'prop-types';
+import FormikControl from 'CourseAuthoring/generic/FormikControl';
+
+import messages from './messages';
+
+const LiveCommonFields = ({
+  intl,
+  values,
+}) => (
+  <>
+    <p className="pb-2">{intl.formatMessage(messages.formInstructions)}</p>
+    <FormikControl
+      name="consumerKey"
+      value={values.consumerKey}
+      floatingLabel={intl.formatMessage(messages.consumerKey)}
+      className="pb-1"
+      type="input"
+    />
+    <FormikControl
+      name="consumerSecret"
+      value={values.consumerSecret}
+      floatingLabel={intl.formatMessage(messages.consumerSecret)}
+      className="pb-1"
+      type="password"
+    />
+    <FormikControl
+      name="launchUrl"
+      value={values.launchUrl}
+      floatingLabel={intl.formatMessage(messages.launchUrl)}
+      className="pb-1"
+      type="input"
+    />
+  </>
+);
+
+LiveCommonFields.propTypes = {
+  intl: intlShape.isRequired,
+  values: PropTypes.shape({
+    consumerKey: PropTypes.string,
+    consumerSecret: PropTypes.string,
+    launchUrl: PropTypes.string,
+    launchEmail: PropTypes.string,
+  }).isRequired,
+};
+
+export default injectIntl(LiveCommonFields);
diff --git a/plugins/course-apps/live/Settings.jsx b/plugins/course-apps/live/Settings.jsx
new file mode 100644
index 0000000000..ed409d997b
--- /dev/null
+++ b/plugins/course-apps/live/Settings.jsx
@@ -0,0 +1,137 @@
+import React, { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { camelCase } from 'lodash';
+import { Icon } from '@openedx/paragon';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import PropTypes from 'prop-types';
+import * as Yup from 'yup';
+import { useNavigate } from 'react-router-dom';
+import SelectableBox from 'CourseAuthoring/editors/sharedComponents/SelectableBox';
+import AppSettingsModal from 'CourseAuthoring/pages-and-resources/app-settings-modal/AppSettingsModal';
+import { useModel } from 'CourseAuthoring/generic/model-store';
+import Loading from 'CourseAuthoring/generic/Loading';
+import { RequestStatus } from 'CourseAuthoring/data/constants';
+
+import { fetchLiveData, saveLiveConfiguration, saveLiveConfigurationAsDraft } from './data/thunks';
+import { selectApp } from './data/slice';
+import { iconsSrc, bbbPlanTypes } from './constants';
+import messages from './messages';
+import ZoomSettings from './ZoomSettings';
+import BBBSettings from './BBBSettings';
+
+const LiveSettings = ({
+  intl,
+  onClose,
+}) => {
+  const navigate = useNavigate();
+  const dispatch = useDispatch();
+  const courseId = useSelector(state => state.courseDetail.courseId);
+  const availableProviders = useSelector((state) => state.live.appIds);
+  const {
+    piiSharingAllowed, selectedAppId, enabled, status,
+  } = useSelector(state => state.live);
+
+  const appConfig = useModel('liveAppConfigs', selectedAppId);
+  const app = useModel('liveApps', selectedAppId);
+
+  const liveConfiguration = {
+    enabled: enabled || false,
+    consumerKey: appConfig?.consumerKey || '',
+    consumerSecret: appConfig?.consumerSecret || '',
+    launchUrl: appConfig?.launchUrl || '',
+    launchEmail: appConfig?.launchEmail || '',
+    provider: selectedAppId || 'zoom',
+    piiSharingEnable: piiSharingAllowed || false,
+    piiSharingUsername: app?.piiSharing?.username || false,
+    piiSharingEmail: app?.piiSharing?.email || false,
+    tierType: appConfig?.tierType || '',
+  };
+
+  const validationSchema = {
+    enabled: Yup.boolean(),
+    consumerKey: Yup.string().when(['provider', 'tierType'], {
+      is: (provider, tier) => provider === 'zoom' || (provider === 'big_blue_button' && tier === bbbPlanTypes.commercial),
+      then: Yup.string().required(intl.formatMessage(messages.consumerKeyRequired)),
+    }),
+    consumerSecret: Yup.string().when(['provider', 'tierType'], {
+      is: (provider, tier) => provider === 'zoom' || (provider === 'big_blue_button' && tier === bbbPlanTypes.commercial),
+      then: Yup.string().notRequired(intl.formatMessage(messages.consumerSecretRequired)),
+    }),
+    launchUrl: Yup.string().when(['provider', 'tierType'], {
+      is: (provider, tier) => provider === 'zoom' || (provider === 'big_blue_button' && tier === bbbPlanTypes.commercial),
+      then: Yup.string().required(intl.formatMessage(messages.launchUrlRequired)),
+    }),
+    launchEmail: Yup.string(),
+  };
+
+  const handleProviderChange = (providerId, setFieldValue, values) => {
+    dispatch(saveLiveConfigurationAsDraft(values));
+    dispatch(selectApp({ appId: providerId }));
+    setFieldValue('provider', providerId);
+  };
+
+  const handleSettingsSave = async (values) => {
+    await dispatch(saveLiveConfiguration(courseId, values, navigate));
+  };
+
+  useEffect(() => {
+    dispatch(fetchLiveData(courseId));
+  }, [courseId]);
+
+  return (
+    <AppSettingsModal
+      appId="live"
+      title={intl.formatMessage(messages.heading)}
+      enableAppHelp={intl.formatMessage(messages.enableLiveHelp)}
+      enableAppLabel={intl.formatMessage(messages.enableLiveLabel)}
+      learnMoreText={intl.formatMessage(messages.enableLiveLink)}
+      onClose={onClose}
+      initialValues={liveConfiguration}
+      validationSchema={validationSchema}
+      onSettingsSave={handleSettingsSave}
+      configureBeforeEnable
+      enableReinitialize
+    >
+      {({ values, setFieldValue }) => (
+        (status === RequestStatus.IN_PROGRESS) ? (
+          <Loading />
+        ) : (
+          <>
+            <h4 className="my-3">{intl.formatMessage(messages.selectProvider)}</h4>
+            <SelectableBox.Set
+              type="checkbox"
+              value={values.provider}
+              onChange={(event) => handleProviderChange(event.target.value, setFieldValue, values)}
+              name="provider"
+              columns={3}
+              className="mb-3"
+            >
+              {availableProviders.map((provider) => (
+                <SelectableBox value={provider} type="checkbox" key={provider}>
+                  <div className="d-flex flex-column align-items-center">
+                    <Icon src={iconsSrc[`${camelCase(provider)}`]} alt={provider} />
+                    <span>{intl.formatMessage(messages[`appName-${camelCase(provider)}`])}</span>
+                  </div>
+                </SelectableBox>
+              ))}
+            </SelectableBox.Set>
+            {values.provider === 'zoom' ? <ZoomSettings values={values} />
+              : (
+                <BBBSettings
+                  values={values}
+                  setFieldValue={setFieldValue}
+                />
+              )}
+          </>
+        )
+      )}
+    </AppSettingsModal>
+  );
+};
+
+LiveSettings.propTypes = {
+  intl: intlShape.isRequired,
+  onClose: PropTypes.func.isRequired,
+};
+
+export default injectIntl(LiveSettings);
diff --git a/plugins/course-apps/live/Settings.test.jsx b/plugins/course-apps/live/Settings.test.jsx
new file mode 100644
index 0000000000..71bfc509f1
--- /dev/null
+++ b/plugins/course-apps/live/Settings.test.jsx
@@ -0,0 +1,166 @@
+import {
+  render,
+  act,
+  fireEvent,
+  waitFor,
+  queryByRole,
+  queryByTestId,
+  queryByText,
+  getByRole,
+  waitForElementToBeRemoved,
+} from '@testing-library/react';
+
+import ReactDOM from 'react-dom';
+import { Routes, Route, MemoryRouter } from 'react-router-dom';
+import { initializeMockApp } from '@edx/frontend-platform';
+import MockAdapter from 'axios-mock-adapter';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { AppProvider, PageWrap } from '@edx/frontend-platform/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import initializeStore from 'CourseAuthoring/store';
+import { executeThunk } from 'CourseAuthoring/utils';
+import PagesAndResourcesProvider from 'CourseAuthoring/pages-and-resources/PagesAndResourcesProvider';
+
+import LiveSettings from './Settings';
+import {
+  generateLiveConfigurationApiResponse,
+  courseId,
+  initialState,
+  configurationProviders,
+} from './factories/mockApiResponses';
+
+import { fetchLiveConfiguration, fetchLiveProviders } from './data/thunks';
+import { providerConfigurationApiUrl, providersApiUrl } from './data/api';
+import messages from './messages';
+
+let axiosMock;
+let container;
+let store;
+const liveSettingsUrl = `/course/${courseId}/pages-and-resources/live/settings`;
+
+// Modal creates a portal. Overriding ReactDOM.createPortal allows portals to be tested in jest.
+ReactDOM.createPortal = jest.fn(node => node);
+
+const renderComponent = () => {
+  const wrapper = render(
+    <IntlProvider locale="en">
+      <AppProvider store={store} wrapWithRouter={false}>
+        <PagesAndResourcesProvider courseId={courseId}>
+          <MemoryRouter initialEntries={[liveSettingsUrl]}>
+            <Routes>
+              <Route path={liveSettingsUrl} element={<PageWrap><LiveSettings onClose={() => {}} /></PageWrap>} />
+            </Routes>
+          </MemoryRouter>
+        </PagesAndResourcesProvider>
+      </AppProvider>
+    </IntlProvider>,
+  );
+  container = wrapper.container;
+};
+
+const mockStore = async ({
+  usernameSharing = false,
+  emailSharing = false,
+  enabled = true,
+  piiSharingAllowed = true,
+}) => {
+  const fetchProviderConfigUrl = `${providersApiUrl}/${courseId}/`;
+  const fetchLiveConfigUrl = `${providerConfigurationApiUrl}/${courseId}/`;
+
+  axiosMock.onGet(fetchProviderConfigUrl).reply(200, configurationProviders(emailSharing, usernameSharing));
+  axiosMock.onGet(fetchLiveConfigUrl).reply(200, generateLiveConfigurationApiResponse(enabled, piiSharingAllowed));
+
+  await executeThunk(fetchLiveProviders(courseId), store.dispatch);
+  await executeThunk(fetchLiveConfiguration(courseId), store.dispatch);
+};
+
+describe('LiveSettings', () => {
+  beforeEach(async () => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: false,
+        roles: [],
+      },
+    });
+    store = initializeStore(initialState);
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+  });
+
+  test('Live Configuration modal is visible', async () => {
+    renderComponent();
+    expect(queryByRole(container, 'dialog')).toBeVisible();
+  });
+
+  test('Displays "Configure Live" heading', async () => {
+    renderComponent();
+    const headingElement = queryByTestId(container, 'modal-title');
+    expect(headingElement).toHaveTextContent(messages.heading.defaultMessage);
+  });
+
+  test('Displays title, helper text and badge when live configuration button is enabled', async () => {
+    await mockStore({ enabled: true });
+    renderComponent();
+
+    const label = container.querySelector('label[for="enable-live-toggle"]');
+    const helperText = container.querySelector('#enable-live-toggleHelpText');
+    const enableBadge = queryByTestId(container, 'enable-badge');
+
+    expect(label).toHaveTextContent(messages.enableLiveLabel.defaultMessage);
+    expect(enableBadge).toHaveTextContent('Enabled');
+    expect(helperText).toHaveTextContent(messages.enableLiveHelp.defaultMessage);
+  });
+
+  test('Displays title, helper text and hides badge when live configuration button is disabled', async () => {
+    await mockStore({ enabled: false, piiSharingAllowed: false });
+    renderComponent();
+
+    const label = container.querySelector('label[for="enable-live-toggle"]');
+    const helperText = container.querySelector('#enable-live-toggleHelpText');
+
+    expect(label).toHaveTextContent('Live');
+    expect(label.firstChild).not.toHaveTextContent('Enabled');
+    expect(helperText).toHaveTextContent(messages.enableLiveHelp.defaultMessage);
+  });
+
+  test('Displays provider heading, helper text and all providers', async () => {
+    await mockStore({
+      enabled: true,
+      piiSharingAllowed: true,
+      usernameSharing: false,
+      emailSharing: true,
+    });
+    renderComponent();
+
+    const spinner = getByRole(container, 'status');
+    await waitForElementToBeRemoved(spinner);
+    const providers = queryByRole(container, 'group');
+    const helperText = queryByTestId(container, 'helper-text');
+
+    expect(providers.childElementCount).toBe(2);
+    expect(providers).toHaveTextContent('Zoom');
+    expect(providers).toHaveTextContent('BigBlueButton');
+    expect(helperText).toHaveTextContent(
+      messages.providerHelperText.defaultMessage.replace('{providerName}', 'Zoom'),
+    );
+  });
+
+  test('Unable to save error should be shown on submission if a field is empty', async () => {
+    const apiDefaultResponse = generateLiveConfigurationApiResponse(true, true);
+    apiDefaultResponse.lti_configuration.lti_1p1_client_key = '';
+    await mockStore({ emailSharing: false, piiSharingAllowed: false });
+    renderComponent();
+
+    const spinner = getByRole(container, 'status');
+    await waitForElementToBeRemoved(spinner);
+
+    const saveButton = queryByText(container, 'Save');
+
+    await waitFor(async () => {
+      await act(async () => fireEvent.click(saveButton));
+      expect(queryByRole(container, 'alert')).toBeVisible();
+    });
+  });
+});
diff --git a/plugins/course-apps/live/ZoomSettings.jsx b/plugins/course-apps/live/ZoomSettings.jsx
new file mode 100644
index 0000000000..edb17f830e
--- /dev/null
+++ b/plugins/course-apps/live/ZoomSettings.jsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import PropTypes from 'prop-types';
+import FormikControl from 'CourseAuthoring/generic/FormikControl';
+
+import messages from './messages';
+import { providerNames } from './constants';
+import LiveCommonFields from './LiveCommonFields';
+
+const ZoomSettings = ({
+  intl,
+  values,
+}) => (
+  // eslint-disable-next-line react/jsx-no-useless-fragment
+  <>
+    {!values.piiSharingEnable ? (
+      <p data-testid="request-pii-sharing">
+        {intl.formatMessage(messages.requestPiiSharingEnable, { provider: providerNames[values.provider] })}
+      </p>
+    ) : (
+      <>
+        {(values.piiSharingEmail || values.piiSharingUsername)
+          && (
+            <p data-testid="helper-text">
+              {intl.formatMessage(messages.providerHelperText, { providerName: providerNames[values.provider] })}
+            </p>
+          )}
+        <LiveCommonFields values={values} />
+        <FormikControl
+          name="launchEmail"
+          value={values.launchEmail}
+          floatingLabel={intl.formatMessage(messages.launchEmail)}
+          type="input"
+        />
+      </>
+    )}
+  </>
+);
+
+ZoomSettings.propTypes = {
+  intl: intlShape.isRequired,
+  values: PropTypes.shape({
+    consumerKey: PropTypes.string,
+    consumerSecret: PropTypes.string,
+    launchUrl: PropTypes.string,
+    launchEmail: PropTypes.string,
+    provider: PropTypes.string,
+    piiSharingEmail: PropTypes.bool,
+    piiSharingUsername: PropTypes.bool,
+    piiSharingEnable: PropTypes.bool,
+  }).isRequired,
+};
+
+export default injectIntl(ZoomSettings);
diff --git a/plugins/course-apps/live/ZoomSettings.test.jsx b/plugins/course-apps/live/ZoomSettings.test.jsx
new file mode 100644
index 0000000000..a0e0836131
--- /dev/null
+++ b/plugins/course-apps/live/ZoomSettings.test.jsx
@@ -0,0 +1,153 @@
+import {
+  render,
+  queryByTestId,
+  getByRole,
+  waitForElementToBeRemoved,
+} from '@testing-library/react';
+
+import ReactDOM from 'react-dom';
+import { Routes, Route, MemoryRouter } from 'react-router-dom';
+import { initializeMockApp } from '@edx/frontend-platform';
+import MockAdapter from 'axios-mock-adapter';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { AppProvider, PageWrap } from '@edx/frontend-platform/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import initializeStore from 'CourseAuthoring/store';
+import { executeThunk } from 'CourseAuthoring/utils';
+import PagesAndResourcesProvider from 'CourseAuthoring/pages-and-resources/PagesAndResourcesProvider';
+import LiveSettings from './Settings';
+import {
+  generateLiveConfigurationApiResponse,
+  courseId,
+  initialState,
+  configurationProviders,
+} from './factories/mockApiResponses';
+
+import { fetchLiveConfiguration, fetchLiveProviders } from './data/thunks';
+import { providerConfigurationApiUrl, providersApiUrl } from './data/api';
+import messages from './messages';
+
+let axiosMock;
+let container;
+let store;
+const liveSettingsUrl = `/course/${courseId}/pages-and-resources/live/settings`;
+
+// Modal creates a portal. Overriding ReactDOM.createPortal allows portals to be tested in jest.
+ReactDOM.createPortal = jest.fn(node => node);
+
+const renderComponent = () => {
+  const wrapper = render(
+    <IntlProvider locale="en">
+      <AppProvider store={store} wrapWithRouter={false}>
+        <PagesAndResourcesProvider courseId={courseId}>
+          <MemoryRouter initialEntries={[liveSettingsUrl]}>
+            <Routes>
+              <Route path={liveSettingsUrl} element={<PageWrap><LiveSettings onClose={() => {}} /></PageWrap>} />
+            </Routes>
+          </MemoryRouter>
+        </PagesAndResourcesProvider>
+      </AppProvider>
+    </IntlProvider>,
+  );
+  container = wrapper.container;
+};
+
+const mockStore = async ({
+  usernameSharing = false,
+  emailSharing = false,
+  enabled = true,
+  piiSharingAllowed = true,
+}) => {
+  const fetchProviderConfigUrl = `${providersApiUrl}/${courseId}/`;
+  const fetchLiveConfigUrl = `${providerConfigurationApiUrl}/${courseId}/`;
+
+  axiosMock.onGet(fetchProviderConfigUrl).reply(200, configurationProviders(emailSharing, usernameSharing));
+  axiosMock.onGet(fetchLiveConfigUrl).reply(200, generateLiveConfigurationApiResponse(enabled, piiSharingAllowed));
+
+  await executeThunk(fetchLiveProviders(courseId), store.dispatch);
+  await executeThunk(fetchLiveConfiguration(courseId), store.dispatch);
+};
+
+describe('Zoom Settings', () => {
+  beforeEach(async () => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: false,
+        roles: [],
+      },
+    });
+    store = initializeStore(initialState);
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+  });
+
+  test('LTI fields are visible when pii sharing is enabled', async () => {
+    await mockStore({ piiSharingAllowed: true });
+    renderComponent();
+
+    const spinner = getByRole(container, 'status');
+    await waitForElementToBeRemoved(spinner);
+
+    const consumerKey = container.querySelector('input[name="consumerKey"]').parentElement;
+    const consumerSecret = container.querySelector('input[name="consumerSecret"]').parentElement;
+    const launchUrl = container.querySelector('input[name="launchUrl"]').parentElement;
+    const launchEmail = container.querySelector('input[name="launchEmail"]').parentElement;
+
+    expect(consumerKey.firstChild).toBeVisible();
+    expect(consumerKey.lastChild).toHaveTextContent(messages.consumerKey.defaultMessage);
+    expect(consumerSecret.firstChild).toBeVisible();
+    expect(consumerSecret.lastChild).toHaveTextContent(messages.consumerSecret.defaultMessage);
+    expect(launchUrl.firstChild).toBeVisible();
+    expect(launchUrl.lastChild).toHaveTextContent(messages.launchUrl.defaultMessage);
+    expect(launchEmail.firstChild).toBeVisible();
+    expect(launchEmail.lastChild).toHaveTextContent(messages.launchEmail.defaultMessage);
+  });
+
+  test(
+    'Only connect to support message is visible when pii sharing is disabled',
+    async () => {
+      await mockStore({ piiSharingAllowed: false });
+      renderComponent();
+
+      const spinner = getByRole(container, 'status');
+      await waitForElementToBeRemoved(spinner);
+
+      const requestPiiText = queryByTestId(container, 'request-pii-sharing');
+      const consumerKey = container.querySelector('input[name="consumerKey"]');
+      const consumerSecret = container.querySelector('input[name="consumerSecret"]');
+      const launchUrl = container.querySelector('input[name="launchUrl"]');
+      const launchEmail = container.querySelector('input[name="launchEmail"]');
+
+      expect(requestPiiText).toHaveTextContent(
+        messages.requestPiiSharingEnable.defaultMessage.replaceAll('{provider}', 'Zoom'),
+      );
+      expect(consumerKey).not.toBeInTheDocument();
+      expect(consumerSecret).not.toBeInTheDocument();
+      expect(launchUrl).not.toBeInTheDocument();
+      expect(launchEmail).not.toBeInTheDocument();
+    },
+  );
+
+  test('Provider Configuration should be displayed correctly', async () => {
+    const apiDefaultResponse = generateLiveConfigurationApiResponse(true, true);
+    await mockStore({ piiSharingAllowed: true });
+    renderComponent();
+
+    const spinner = getByRole(container, 'status');
+    await waitForElementToBeRemoved(spinner);
+
+    const consumerKey = container.querySelector('input[name="consumerKey"]');
+    const consumerSecret = container.querySelector('input[name="consumerSecret"]');
+    const launchUrl = container.querySelector('input[name="launchUrl"]');
+    const launchEmail = container.querySelector('input[name="launchEmail"]');
+
+    expect(consumerKey.value).toBe(apiDefaultResponse.lti_configuration.lti_1p1_client_key);
+    expect(consumerSecret.value).toBe(apiDefaultResponse.lti_configuration.lti_1p1_client_secret);
+    expect(launchUrl.value).toBe(apiDefaultResponse.lti_configuration.lti_1p1_launch_url);
+    expect(launchEmail.value).toBe(
+      apiDefaultResponse.lti_configuration.lti_config.additional_parameters.custom_instructor_email,
+    );
+  });
+});
diff --git a/plugins/course-apps/live/constants.js b/plugins/course-apps/live/constants.js
new file mode 100644
index 0000000000..3a1294eb65
--- /dev/null
+++ b/plugins/course-apps/live/constants.js
@@ -0,0 +1,20 @@
+import {
+  GoogleMeet, MicrosoftTeams, Zoom, Bbb,
+} from '@openedx/paragon/icons';
+
+export const iconsSrc = {
+  googleMeet: GoogleMeet,
+  microsoftTeams: MicrosoftTeams,
+  zoom: Zoom,
+  bigBlueButton: Bbb,
+};
+
+export const providerNames = {
+  zoom: 'Zoom',
+  big_blue_button: 'BigBlueButton',
+};
+
+export const bbbPlanTypes = {
+  free: 'Free',
+  commercial: 'Commercial/self-hosted',
+};
diff --git a/plugins/course-apps/live/data/api.js b/plugins/course-apps/live/data/api.js
new file mode 100644
index 0000000000..1b6d6614cc
--- /dev/null
+++ b/plugins/course-apps/live/data/api.js
@@ -0,0 +1,123 @@
+import { ensureConfig, getConfig } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { bbbPlanTypes } from '../constants';
+
+ensureConfig([
+  'STUDIO_BASE_URL',
+], 'Course Apps API service');
+
+const apiBaseUrl = getConfig().STUDIO_BASE_URL;
+
+export const providersApiUrl = `${apiBaseUrl}/api/course_live/providers`;
+export const providerConfigurationApiUrl = `${apiBaseUrl}/api/course_live/course`;
+
+function normalizeProviders(data) {
+  const apps = Object.entries(data.providers.available).map(([key, app]) => ({
+    id: key,
+    featureIds: app.features,
+    name: app.name,
+    piiSharing: app.pii_sharing,
+    hasFreeTier: app.has_free_tier,
+  }));
+
+  return {
+    activeAppId: data.providers.active,
+    selectedAppId: data.providers.active,
+    apps,
+  };
+}
+
+function normalizeLtiConfig(data) {
+  if (!data || Object.keys(data).length < 1) {
+    return {};
+  }
+
+  return {
+    consumerKey: data.lti_1p1_client_key,
+    consumerSecret: data.lti_1p1_client_secret,
+    launchUrl: data.lti_1p1_launch_url,
+    launchEmail: data.lti_config?.additional_parameters?.custom_instructor_email,
+    tierType: data.tierType,
+  };
+}
+
+export function normalizeSettings(data) {
+  let tier;
+  if (data.provider_type === 'big_blue_button') {
+    tier = data.free_tier === true ? bbbPlanTypes.free : bbbPlanTypes.commercial;
+  }
+  return {
+    enabled: data.enabled,
+    piiSharingAllowed: data.pii_sharing_allowed,
+    appConfig: {
+      id: data.provider_type,
+      ...normalizeLtiConfig({ ...data.lti_configuration, tierType: tier }),
+    },
+  };
+}
+
+export function deNormalizeSettings(data) {
+  const ltiConfiguration = {};
+  if (data.consumerKey) {
+    ltiConfiguration.lti_1p1_client_key = data.consumerKey;
+  }
+  if (data.consumerSecret) {
+    ltiConfiguration.lti_1p1_client_secret = data.consumerSecret;
+  }
+  if (data.launchUrl) {
+    ltiConfiguration.lti_1p1_launch_url = data.launchUrl;
+  }
+  if (data?.provider === 'zoom' || data.tierType !== 'Free') {
+    ltiConfiguration.lti_config = {};
+    if (data.launchEmail) {
+      ltiConfiguration.lti_config.additional_parameters = {
+        custom_instructor_email: data.launchEmail,
+      };
+    }
+  }
+  if (Object.keys(ltiConfiguration).length > 0) {
+    // Only add this in if we're sending LTI fields.
+    // TODO: Eventually support LTI v1.3 here.
+    ltiConfiguration.version = 'lti_1p1';
+  }
+
+  const apiData = {
+    enabled: data?.enabled || false,
+    lti_configuration: Object.keys(ltiConfiguration).length ? ltiConfiguration : undefined,
+    provider_type: data?.provider || 'zoom',
+    pii_sharing_allowed: data?.piiSharingEnable || false,
+    free_tier: data?.provider === 'zoom' ? false : Boolean(data.tierType === 'Free'),
+  };
+  return apiData;
+}
+
+/**
+ * Fetches providers for provided course
+ * @param {string} courseId
+ * @returns {Promise<[{}]>}
+ */
+export async function getLiveProviders(courseId) {
+  const { data } = await getAuthenticatedHttpClient()
+    .get(`${providersApiUrl}/${courseId}/`);
+
+  return normalizeProviders(data);
+}
+
+/**
+ * Fetches provider settings for provided course
+ * @param {string} courseId
+ * @returns {Promise<[{}]>}
+ */
+export async function getLiveConfiguration(courseId) {
+  const { data } = await getAuthenticatedHttpClient()
+    .get(`${providerConfigurationApiUrl}/${courseId}/`);
+  return normalizeSettings(data);
+}
+
+export async function postLiveConfiguration(courseId, config) {
+  const { data } = await getAuthenticatedHttpClient().post(
+    `${providerConfigurationApiUrl}/${courseId}/`,
+    deNormalizeSettings(config),
+  );
+  return normalizeSettings(data);
+}
diff --git a/plugins/course-apps/live/data/slice.js b/plugins/course-apps/live/data/slice.js
new file mode 100644
index 0000000000..5f4c2a72d8
--- /dev/null
+++ b/plugins/course-apps/live/data/slice.js
@@ -0,0 +1,48 @@
+/* eslint-disable no-param-reassign */
+import { createSlice } from '@reduxjs/toolkit';
+import { RequestStatus } from 'CourseAuthoring/data/constants';
+
+const slice = createSlice({
+  name: 'live',
+  initialState: {
+    appIds: [],
+    // activeAppId is the ID of the app that has been configured for the course.
+    activeAppId: null,
+    // selectedAppId is the ID of the app that has been selected in the UI.  This happens when an
+    // activeAppId has been configured but the user is about to configure a different provider
+    // instead.
+    selectedAppId: null,
+    status: RequestStatus.IN_PROGRESS,
+    saveStatus: RequestStatus.SUCCESSFUL,
+  },
+  reducers: {
+    loadApps: (state, { payload }) => {
+      state.status = RequestStatus.SUCCESSFUL;
+      state.saveStatus = RequestStatus.SUCCESSFUL;
+      Object.assign(state, payload);
+    },
+    selectApp: (state, { payload }) => {
+      const { appId } = payload;
+      state.selectedAppId = appId;
+    },
+    updateStatus: (state, { payload }) => {
+      const { status } = payload;
+      state.status = status;
+    },
+    updateSaveStatus: (state, { payload }) => {
+      const { status } = payload;
+      state.saveStatus = status;
+    },
+  },
+});
+
+export const {
+  loadApps,
+  selectApp,
+  updateStatus,
+  updateSaveStatus,
+} = slice.actions;
+
+export const {
+  reducer,
+} = slice;
diff --git a/plugins/course-apps/live/data/thunks.js b/plugins/course-apps/live/data/thunks.js
new file mode 100644
index 0000000000..6c31082896
--- /dev/null
+++ b/plugins/course-apps/live/data/thunks.js
@@ -0,0 +1,86 @@
+import { addModel, addModels, updateModel } from 'CourseAuthoring/generic/model-store';
+import { RequestStatus } from 'CourseAuthoring/data/constants';
+
+import {
+  getLiveConfiguration,
+  getLiveProviders,
+  postLiveConfiguration,
+  normalizeSettings,
+  deNormalizeSettings,
+} from './api';
+import { loadApps, updateStatus, updateSaveStatus } from './slice';
+
+function updateLiveSettingsState({
+  appConfig,
+  ...liveSettings
+}) {
+  return async (dispatch) => {
+    dispatch(addModel({ modelType: 'liveAppConfigs', model: appConfig }));
+    dispatch(loadApps(liveSettings));
+  };
+}
+
+export function fetchLiveProviders(courseId) {
+  return async (dispatch) => {
+    const { activeAppId, selectedAppId, apps } = await getLiveProviders(courseId);
+
+    dispatch(addModels({ modelType: 'liveApps', models: apps }));
+    dispatch(loadApps({
+      activeAppId,
+      selectedAppId,
+      appIds: apps.map((app) => app.id),
+    }));
+  };
+}
+
+export function fetchLiveConfiguration(courseId) {
+  return async (dispatch) => {
+    const settings = await getLiveConfiguration(courseId);
+    dispatch(updateLiveSettingsState(settings));
+  };
+}
+
+export function fetchLiveData(courseId) {
+  return async (dispatch) => {
+    dispatch(updateStatus({ status: RequestStatus.IN_PROGRESS }));
+    try {
+      await dispatch(fetchLiveProviders(courseId));
+      await dispatch(fetchLiveConfiguration(courseId));
+    } catch (error) {
+      if (error.response && error.response.status === 403) {
+        dispatch(updateStatus({ status: RequestStatus.DENIED }));
+      } else {
+        dispatch(updateStatus({ status: RequestStatus.FAILED }));
+      }
+    }
+  };
+}
+
+export function saveLiveConfiguration(courseId, config, navigate) {
+  return async (dispatch) => {
+    dispatch(updateSaveStatus({ status: RequestStatus.IN_PROGRESS }));
+    try {
+      const apps = await postLiveConfiguration(courseId, config);
+      dispatch(updateLiveSettingsState(apps));
+
+      dispatch(updateSaveStatus({ status: RequestStatus.SUCCESSFUL }));
+      navigate(`/course/${courseId}/pages-and-resources/`);
+    } catch (error) {
+      if (error.response && error.response.status === 403) {
+        dispatch(updateSaveStatus({ status: RequestStatus.DENIED }));
+        dispatch(updateStatus({ status: RequestStatus.DENIED }));
+      } else {
+        dispatch(updateSaveStatus({ status: RequestStatus.FAILED }));
+      }
+    }
+  };
+}
+
+export function saveLiveConfigurationAsDraft(config) {
+  return async (dispatch) => {
+    const { appConfig, ...liveSettings } = normalizeSettings(deNormalizeSettings(config));
+
+    dispatch(updateModel({ modelType: 'liveAppConfigs', model: appConfig }));
+    dispatch(loadApps(liveSettings));
+  };
+}
diff --git a/plugins/course-apps/live/factories/mockApiResponses.jsx b/plugins/course-apps/live/factories/mockApiResponses.jsx
new file mode 100644
index 0000000000..f65926cb10
--- /dev/null
+++ b/plugins/course-apps/live/factories/mockApiResponses.jsx
@@ -0,0 +1,86 @@
+export const courseId = 'course-v1:edX+DemoX+Demo_Course';
+
+export const initialState = {
+  courseDetail: {
+    courseId,
+    status: 'LOADED',
+  },
+  pagesAndResources: {
+    courseAppIds: [
+      'live',
+    ],
+    loadingStatus: 'successful',
+    savingStatus: '',
+    courseAppsApiStatus: {},
+    courseAppSettings: {},
+  },
+  models: {
+    courseApps: {
+      live: {
+        id: 'live',
+        enabled: true,
+        name: 'Live',
+        description: 'Enable in-platform video conferencing by configuring live',
+        allowedOperations: {
+          enable: true,
+          configure: true,
+        },
+        documentationLinks: {
+          learnMoreConfiguration: '',
+        },
+      },
+    },
+  },
+};
+
+export const configurationProviders = (
+  emailSharing,
+  usernameSharing,
+  activeProvider,
+  hasFreeTier,
+) => ({
+  providers: {
+    active: activeProvider || 'zoom',
+    available: {
+      zoom: {
+        features: [],
+        name: 'Zoom LTI PRO',
+        pii_sharing: {
+          email: emailSharing,
+          username: usernameSharing,
+        },
+      },
+
+      big_blue_button: {
+        additional_parameters: [],
+        features: [],
+        has_free_tier: hasFreeTier,
+        name: 'Big Blue Button',
+      },
+    },
+  },
+});
+
+export const generateLiveConfigurationApiResponse = (
+  enabled,
+  piiSharingAllowed,
+  providerType = 'zoom',
+  isFreeTier = undefined,
+) => ({
+  course_key: courseId,
+  enabled,
+  lti_configuration: {
+    lti_1p1_client_key: 'consumer_key',
+    lti_1p1_client_secret: 'secret_key',
+    lti_1p1_launch_url: 'https://launch-url.com',
+    version: 'lti_1p1',
+    lti_config: {
+      additional_parameters: {
+        custom_instructor_email: 'launch@email.com',
+      },
+    },
+  },
+  pii_sharing_allowed: piiSharingAllowed,
+  provider_type: providerType,
+  free_tier: providerType === 'bigBlueButton' ? isFreeTier : undefined,
+});
diff --git a/plugins/course-apps/live/messages.js b/plugins/course-apps/live/messages.js
new file mode 100644
index 0000000000..e0c8ea3358
--- /dev/null
+++ b/plugins/course-apps/live/messages.js
@@ -0,0 +1,173 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  heading: {
+    id: 'authoring.pagesAndResources.live.enableLive.heading',
+    defaultMessage: 'Configure Live',
+    description: 'Heading for live configuration',
+  },
+  enableLiveLabel: {
+    id: 'authoring.pagesAndResources.live.enableLive.label',
+    defaultMessage: 'Live',
+    description: 'Title for configuration',
+  },
+  enableLiveHelp: {
+    id: 'authoring.pagesAndResources.live.enableLive.help',
+    defaultMessage: 'Schedule meetings and conduct live course sessions with learners.',
+    description: 'Tells the purpose of live configuration',
+  },
+  enableLiveLink: {
+    id: 'authoring.pagesAndResources.live.enableLive.link',
+    defaultMessage: 'Learn more about live',
+    description: 'Link text that tells the user to learn about the live',
+  },
+  saveButton: {
+    id: 'authoring.discussions.saveButton',
+    defaultMessage: 'Save',
+    description: 'Button allowing the user to submit their discussion configuration.',
+  },
+  savingButton: {
+    id: 'authoring.discussions.savingButton',
+    defaultMessage: 'Saving',
+    description: 'Button label when the discussion configuration is being submitted.',
+  },
+  savedButton: {
+    id: 'authoring.discussions.savedButton',
+    defaultMessage: 'Saved',
+    description: 'Button label when the discussion configuration has been successfully submitted.',
+  },
+  selectProvider: {
+    id: 'authoring.live.selectProvider',
+    defaultMessage: 'Select a video conferencing tool',
+    description: '',
+  },
+  formInstructions: {
+    id: 'authoring.live.formInstructions',
+    defaultMessage: 'Complete the fields below to set up your video conferencing tool.',
+    description: 'Instruction for configure the video conferencing tool.',
+  },
+  consumerKey: {
+    id: 'authoring.live.consumerKey',
+    defaultMessage: 'Consumer Key',
+    description: 'Label for the Consumer Key field.',
+  },
+  consumerKeyRequired: {
+    id: 'authoring.live.consumerKey.required',
+    defaultMessage: 'Consumer key is a required field',
+    description: 'Tells the user that the Consumer Key field is required and must have a value.',
+  },
+  consumerSecret: {
+    id: 'authoring.live.consumerSecret',
+    defaultMessage: 'Consumer Secret',
+    description: 'Label for the Consumer Secret field.',
+  },
+  consumerSecretRequired: {
+    id: 'authoring.live.consumerSecret.required',
+    defaultMessage: 'Consumer secret is a required field',
+    description: 'Tells the user that the Consumer Secret field is required and must have a value.',
+  },
+  launchUrl: {
+    id: 'authoring.live.launchUrl',
+    defaultMessage: 'Launch URL',
+    description: 'Label for the Launch URL field.',
+  },
+  launchUrlRequired: {
+    id: 'authoring.live.launchUrl.required',
+    defaultMessage: 'Launch URL is a required field',
+    description: 'Tells the user that the Launch URL field is required and must have a value.',
+  },
+  launchEmail: {
+    id: 'authoring.live.launchEmail',
+    defaultMessage: 'Launch Email',
+    description: 'Label for the Launch Email field.',
+  },
+  launchEmailRequired: {
+    id: 'authoring.live.launchEmail.required',
+    defaultMessage: 'Launch Email is a required field',
+    description: 'Tells the user that the Launch Email field is required and must have a value.',
+  },
+  providerHelperText: {
+    id: 'authoring.live.provider.helpText',
+    defaultMessage: 'This configuration will require sharing username and emails of learners and the course team with {providerName}.',
+    description: 'Tells the user that sharing username and email is required for configuration',
+  },
+  requestPiiSharingEnable: {
+    id: 'authoring.live.requestPiiSharingEnable',
+    defaultMessage: 'This configuration will require sharing usernames and emails of learners and the course team with {provider}. To access the LTI configuration for {provider}, please request your edX project coordinator to get PII sharing enabled for this course.',
+    description: 'Tells the user that request edx project coordinator to enable the PII sharing to access the LTI configuration for a provider.',
+  },
+  general: {
+    id: 'authoring.live.appDocInstructions.documentationLink',
+    defaultMessage: 'General documentation',
+    description: 'Application Document Instructions message for documentation link',
+  },
+  accessibility: {
+    id: 'authoring.live.appDocInstructions.accessibilityDocumentationLink',
+    defaultMessage: 'Accessibility documentation',
+    description: 'Application Document Instructions message for accessibility link',
+  },
+  configuration: {
+    id: 'authoring.live.appDocInstructions.configurationLink',
+    defaultMessage: 'Configuration documentation',
+    description: 'Application Document Instructions message for configurations link',
+  },
+  learnMore: {
+    id: 'authoring.live.appDocInstructions.learnMoreLink',
+    defaultMessage: 'Learn more about {providerName}',
+    description: 'Application Document Instructions message for learn more links',
+  },
+  linkTextHeading: {
+    id: 'authoring.live.appDocInstructions.linkTextHeading',
+    defaultMessage: 'External help and documentation',
+    description: 'External help and documentation heading',
+  },
+  linkText: {
+    id: 'authoring.live.appDocInstructions.linkText',
+    defaultMessage: '{link}',
+    description: 'link',
+  },
+  'appName-zoom': {
+    id: 'authoring.live.appName-yellowdig',
+    defaultMessage: 'Zoom',
+    description: 'The name of the Zoom app.',
+  },
+  'appName-googleMeet': {
+    id: 'authoring.live.appName-googleMeet',
+    defaultMessage: 'Google Meet',
+    description: 'The name of the Google Meet app.',
+  },
+  'appName-microsoftTeams': {
+    id: 'authoring.live.appName-microsoftTeams',
+    defaultMessage: 'Microsoft Teams',
+    description: 'The name of the Microsoft Teams app.',
+  },
+  'appName-bigBlueButton': {
+    id: 'authoring.live.appName-bigBlueButton',
+    defaultMessage: 'BigBlueButton',
+    description: 'The name of the Big Blue Button Teams app.',
+  },
+  requestPiiSharingEnableForBbb: {
+    id: 'authoring.live.requestPiiSharingEnableForBbb',
+    defaultMessage: 'This configuration will require sharing usernames of learners and the course team with {provider}.',
+    description: 'Tells the user that they require sharing usernames with the provider to use this feature',
+  },
+
+  piiSharingEnableHelpTextBbb: {
+    id: 'authoring.live.piiSharingEnableHelpText',
+    defaultMessage: 'To enable this feature, contact your edX support team to enable PII sharing for this course.',
+    description: 'Tells the user that request edx project coordinator to enable the PII sharing to access the LTI configuration for a provider.',
+  },
+
+  freePlanMessage: {
+    id: 'authoring.live.freePlanMessage',
+    defaultMessage: 'The free plan is pre-configured, and no additional configurations are required. By selecting the free plan, you are agreeing to Blindside Networks',
+    description: 'Tells user that free plans requires no additional configurations',
+  },
+  privacyPolicy: {
+    id: 'authoring.live.privacyPolicy',
+    defaultMessage: 'Privacy Policy.',
+    description: 'The text of privacy policy hyperlink for free plan',
+  },
+});
+
+export default messages;
diff --git a/plugins/course-apps/live/package.json b/plugins/course-apps/live/package.json
new file mode 100644
index 0000000000..ac9485ea7e
--- /dev/null
+++ b/plugins/course-apps/live/package.json
@@ -0,0 +1,22 @@
+{
+    "name": "@openedx-plugins/course-app-live",
+    "version": "0.1.0",
+    "description": "Live course configuration for courses using it",
+    "peerDependencies": {
+        "@edx/frontend-app-authoring": "*",
+        "@edx/frontend-platform": "*",
+        "@openedx/paragon": "*",
+        "@reduxjs/toolkit": "*",
+        "lodash": "*",
+        "prop-types": "*",
+        "react": "*",
+        "react-redux": "*",
+        "react-router-dom": "*",
+        "yup": "*"
+    },
+    "peerDependenciesMeta": {
+        "@edx/frontend-app-authoring": {
+            "optional": true
+        }
+    }
+}
diff --git a/plugins/course-apps/ora_settings/Settings.jsx b/plugins/course-apps/ora_settings/Settings.jsx
new file mode 100644
index 0000000000..f16d10f48b
--- /dev/null
+++ b/plugins/course-apps/ora_settings/Settings.jsx
@@ -0,0 +1,176 @@
+import { useEffect, useState, useRef } from 'react';
+import PropTypes from 'prop-types';
+
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { useDispatch, useSelector } from 'react-redux';
+
+import {
+  ActionRow, Alert, Badge, Form, Hyperlink, ModalDialog, StatefulButton,
+} from '@openedx/paragon';
+import { Info } from '@openedx/paragon/icons';
+import { updateModel, useModel } from 'CourseAuthoring/generic/model-store';
+
+import { RequestStatus } from 'CourseAuthoring/data/constants';
+import FormSwitchGroup from 'CourseAuthoring/generic/FormSwitchGroup';
+import Loading from 'CourseAuthoring/generic/Loading';
+import PermissionDeniedAlert from 'CourseAuthoring/generic/PermissionDeniedAlert';
+import ConnectionErrorAlert from 'CourseAuthoring/generic/ConnectionErrorAlert';
+import { useAppSetting, useIsMobile } from 'CourseAuthoring/utils';
+import { getLoadingStatus, getSavingStatus } from 'CourseAuthoring/pages-and-resources/data/selectors';
+import { updateSavingStatus } from 'CourseAuthoring/pages-and-resources/data/slice';
+
+import messages from './messages';
+
+const ORASettings = ({ onClose }) => {
+  const dispatch = useDispatch();
+  const { formatMessage } = useIntl();
+  const alertRef = useRef(null);
+  const updateSettingsRequestStatus = useSelector(getSavingStatus);
+  const loadingStatus = useSelector(getLoadingStatus);
+  const isMobile = useIsMobile();
+  const modalVariant = isMobile ? 'dark' : 'default';
+  const appId = 'ora_settings';
+  const appInfo = useModel('courseApps', appId);
+
+  const [enableFlexiblePeerGrade, saveSetting] = useAppSetting(
+    'forceOnFlexiblePeerOpenassessments',
+  );
+  const initialFormValues = { enableFlexiblePeerGrade };
+
+  const [formValues, setFormValues] = useState(initialFormValues);
+  const [saveError, setSaveError] = useState(false);
+
+  const submitButtonState = updateSettingsRequestStatus === RequestStatus.IN_PROGRESS ? 'pending' : 'default';
+  const handleSettingsSave = (values) => saveSetting(values.enableFlexiblePeerGrade);
+
+  const handleSubmit = async (event) => {
+    let success = true;
+    event.preventDefault();
+
+    success = success && await handleSettingsSave(formValues);
+    await setSaveError(!success);
+    if ((initialFormValues.enableFlexiblePeerGrade !== formValues.enableFlexiblePeerGrade) && success) {
+      success = await dispatch(updateModel({
+        modelType: 'courseApps',
+        model: {
+          id: appId, enabled: formValues.enableFlexiblePeerGrade,
+        },
+      }));
+    }
+    !success && alertRef?.current.scrollIntoView(); // eslint-disable-line @typescript-eslint/no-unused-expressions
+  };
+
+  const handleChange = (e) => {
+    setFormValues({ enableFlexiblePeerGrade: e.target.checked });
+  };
+
+  useEffect(() => {
+    if (updateSettingsRequestStatus === RequestStatus.SUCCESSFUL) {
+      dispatch(updateSavingStatus({ status: '' }));
+      onClose();
+    }
+  }, [updateSettingsRequestStatus]);
+
+  const renderBody = () => {
+    switch (loadingStatus) {
+      case RequestStatus.SUCCESSFUL:
+        return (
+          <>
+            {saveError && (
+              <Alert variant="danger" icon={Info} ref={alertRef}>
+                <Alert.Heading>
+                  {formatMessage(messages.errorSavingTitle)}
+                </Alert.Heading>
+                {formatMessage(messages.errorSavingMessage)}
+              </Alert>
+            )}
+            <FormSwitchGroup
+              id="enable-flexible-peer-grade"
+              name="enableFlexiblePeerGrade"
+              label={(
+                <div className="d-flex align-items-center">
+                  {formatMessage(messages.enableFlexPeerGradeLabel)}
+                  {formValues.enableFlexiblePeerGrade && (
+                    <Badge className="ml-2" variant="success" data-testid="enable-badge">
+                      {formatMessage(messages.enabledBadgeLabel)}
+                    </Badge>
+                  )}
+                </div>
+              )}
+              helpText={(
+                <div>
+                  <p>{formatMessage(messages.enableFlexPeerGradeHelp)}</p>
+                  <span className="py-3">
+                    <Hyperlink
+                      className="text-primary-500 small"
+                      destination={appInfo.documentationLinks?.learnMoreConfiguration}
+                      target="_blank"
+                      rel="noreferrer noopener"
+                    >
+                      {formatMessage(messages.ORASettingsHelpLink)}
+                    </Hyperlink>
+                  </span>
+                </div>
+              )}
+              onChange={handleChange}
+              checked={formValues.enableFlexiblePeerGrade}
+            />
+          </>
+        );
+      case RequestStatus.DENIED:
+        return <PermissionDeniedAlert />;
+      case RequestStatus.FAILED:
+        return <ConnectionErrorAlert />;
+      default:
+        return <Loading />;
+    }
+  };
+
+  return (
+    <ModalDialog
+      title={formatMessage(messages.heading)}
+      isOpen
+      onClose={onClose}
+      size="lg"
+      variant={modalVariant}
+      hasCloseButton={isMobile}
+      isFullscreenScroll
+      isFullscreenOnMobile
+    >
+      <Form onSubmit={handleSubmit} data-testid="proctoringForm">
+        <ModalDialog.Header>
+          <ModalDialog.Title>
+            {formatMessage(messages.heading)}
+          </ModalDialog.Title>
+        </ModalDialog.Header>
+        <ModalDialog.Body>
+          {renderBody()}
+        </ModalDialog.Body>
+        <ModalDialog.Footer className="p-4">
+          <ActionRow>
+            <ModalDialog.CloseButton variant="tertiary">
+              {formatMessage(messages.cancelLabel)}
+            </ModalDialog.CloseButton>
+            <StatefulButton
+              labels={{
+                default: formatMessage(messages.saveLabel),
+                pending: formatMessage(messages.pendingSaveLabel),
+              }}
+              description="Form save button"
+              data-testid="submissionButton"
+              disabled={submitButtonState === RequestStatus.IN_PROGRESS}
+              state={submitButtonState}
+              type="submit"
+            />
+          </ActionRow>
+        </ModalDialog.Footer>
+      </Form>
+    </ModalDialog>
+  );
+};
+
+ORASettings.propTypes = {
+  onClose: PropTypes.func.isRequired,
+};
+
+export default ORASettings;
diff --git a/plugins/course-apps/ora_settings/Settings.test.jsx b/plugins/course-apps/ora_settings/Settings.test.jsx
new file mode 100644
index 0000000000..a037e0c438
--- /dev/null
+++ b/plugins/course-apps/ora_settings/Settings.test.jsx
@@ -0,0 +1,152 @@
+import {
+  render,
+  screen,
+  waitFor,
+  within,
+} from '@testing-library/react';
+import ReactDOM from 'react-dom';
+import { Routes, Route, MemoryRouter } from 'react-router-dom';
+import { initializeMockApp } from '@edx/frontend-platform';
+import MockAdapter from 'axios-mock-adapter';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { AppProvider, PageWrap } from '@edx/frontend-platform/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import initializeStore from 'CourseAuthoring/store';
+import { executeThunk } from 'CourseAuthoring/utils';
+import PagesAndResourcesProvider from 'CourseAuthoring/pages-and-resources/PagesAndResourcesProvider';
+import { getCourseAppsApiUrl, getCourseAdvancedSettingsApiUrl } from 'CourseAuthoring/pages-and-resources/data/api';
+import { fetchCourseApps, fetchCourseAppSettings } from 'CourseAuthoring/pages-and-resources/data/thunks';
+import ORASettings from './Settings';
+import messages from './messages';
+import {
+  courseId,
+  inititalState,
+} from './factories/mockData';
+
+let axiosMock;
+let store;
+const oraSettingsUrl = `/course/${courseId}/pages-and-resources/live/settings`;
+
+// Modal creates a portal. Overriding ReactDOM.createPortal allows portals to be tested in jest.
+ReactDOM.createPortal = jest.fn(node => node);
+
+const renderComponent = () => (
+  render(
+    <IntlProvider locale="en">
+      <AppProvider store={store} wrapWithRouter={false}>
+        <PagesAndResourcesProvider courseId={courseId}>
+          <MemoryRouter initialEntries={[oraSettingsUrl]}>
+            <Routes>
+              <Route path={oraSettingsUrl} element={<PageWrap><ORASettings onClose={jest.fn()} /></PageWrap>} />
+            </Routes>
+          </MemoryRouter>
+        </PagesAndResourcesProvider>
+      </AppProvider>
+    </IntlProvider>,
+  )
+);
+
+const mockStore = async ({
+  apiStatus,
+  enabled,
+}) => {
+  const settings = ['forceOnFlexiblePeerOpenassessments'];
+  const fetchCourseAppsUrl = `${getCourseAppsApiUrl()}/${courseId}`;
+  const fetchAdvancedSettingsUrl = `${getCourseAdvancedSettingsApiUrl()}/${courseId}`;
+
+  axiosMock.onGet(fetchCourseAppsUrl).reply(
+    200,
+    [{
+      allowed_operations: { enable: false, configure: true },
+      description: 'setting',
+      documentation_links: { learnMoreConfiguration: '' },
+      enabled,
+      id: 'ora_settings',
+      name: 'Flexible Peer Grading for ORAs',
+    }],
+  );
+  axiosMock.onGet(fetchAdvancedSettingsUrl).reply(
+    apiStatus,
+    { force_on_flexible_peer_openassessments: { value: enabled } },
+  );
+
+  await executeThunk(fetchCourseApps(courseId), store.dispatch);
+  await executeThunk(fetchCourseAppSettings(courseId, settings), store.dispatch);
+};
+
+describe('ORASettings', () => {
+  beforeEach(async () => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: false,
+        roles: [],
+      },
+    });
+    store = initializeStore(inititalState);
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+  });
+
+  it('Flexible peer grading configuration modal is visible', async () => {
+    renderComponent();
+    expect(screen.getByRole('dialog')).toBeVisible();
+  });
+
+  it('Displays "Configure Flexible Peer Grading" heading', async () => {
+    renderComponent();
+    const headingElement = screen.getByText(messages.heading.defaultMessage);
+
+    expect(headingElement).toBeVisible();
+  });
+
+  it('Displays loading component', () => {
+    renderComponent();
+    const loadingElement = screen.getByRole('status');
+
+    expect(within(loadingElement).getByText('Loading...')).toBeInTheDocument();
+  });
+
+  it('Displays Connection Error Alert', async () => {
+    await mockStore({ apiStatus: 404, enabled: true });
+    renderComponent();
+    const errorAlert = screen.getByRole('alert');
+
+    expect(within(errorAlert).getByText('We encountered a technical error when loading this page.', { exact: false })).toBeVisible();
+  });
+
+  it('Displays Permissions Error Alert', async () => {
+    await mockStore({ apiStatus: 403, enabled: true });
+    renderComponent();
+    const errorAlert = screen.getByRole('alert');
+
+    expect(within(errorAlert).getByText('You are not authorized to view this page', { exact: false })).toBeVisible();
+  });
+
+  it('Displays title, helper text and badge when flexible peer grading button is enabled', async () => {
+    renderComponent();
+    await mockStore({ apiStatus: 200, enabled: true });
+
+    waitFor(() => {
+      const label = screen.getByText(messages.enableFlexPeerGradeLabel.defaultMessage);
+      const enableBadge = screen.getByTestId('enable-badge');
+
+      expect(label).toBeVisible();
+
+      expect(enableBadge).toHaveTextContent('Enabled');
+    });
+  });
+
+  it('Displays title, helper text and hides badge when flexible peer grading button is disabled', async () => {
+    renderComponent();
+    await mockStore({ apiStatus: 200, enabled: false });
+
+    const label = screen.getByText(messages.enableFlexPeerGradeLabel.defaultMessage);
+    const enableBadge = screen.queryByTestId('enable-badge');
+
+    expect(label).toBeVisible();
+
+    expect(enableBadge).toBeNull();
+  });
+});
diff --git a/plugins/course-apps/ora_settings/factories/mockData.js b/plugins/course-apps/ora_settings/factories/mockData.js
new file mode 100644
index 0000000000..a86ccc6a13
--- /dev/null
+++ b/plugins/course-apps/ora_settings/factories/mockData.js
@@ -0,0 +1,32 @@
+export const courseId = 'course-v1:org+num+run';
+
+export const inititalState = {
+  courseDetail: {
+    courseId,
+    status: 'successful',
+  },
+  pagesAndResources: {
+    courseAppIds: ['ora_settings'],
+    loadingStatus: 'in-progress',
+    savingStatus: '',
+    courseAppsApiStatus: {},
+    courseAppSettings: {},
+  },
+  models: {
+    courseApps: {
+      ora_settings: {
+        id: 'ora_settings',
+        name: 'Flexible Peer Grading',
+        enabled: true,
+        description: 'Enable flexible peer grading',
+        allowedOperations: {
+          enable: false,
+          configure: true,
+        },
+        documentationLinks: {
+          learnMoreConfiguration: '',
+        },
+      },
+    },
+  },
+};
diff --git a/plugins/course-apps/ora_settings/messages.js b/plugins/course-apps/ora_settings/messages.js
new file mode 100644
index 0000000000..3b119b5660
--- /dev/null
+++ b/plugins/course-apps/ora_settings/messages.js
@@ -0,0 +1,54 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  heading: {
+    id: 'course-authoring.pages-resources.ora.heading',
+    defaultMessage: 'Configure Flexible Peer Grading',
+    description: 'Title for the modal dialog header',
+  },
+  ORASettingsHelpLink: {
+    id: 'course-authoring.pages-resources.ora.flex-peer-grading.link',
+    defaultMessage: 'Learn more about open response assessment settings',
+    description: 'Descriptive text for the hyperlink to the docs site',
+  },
+  enableFlexPeerGradeLabel: {
+    id: 'course-authoring.pages-resources.ora.flex-peer-grading.label',
+    defaultMessage: 'Flex Peer Grading',
+    description: 'Label for form switch',
+  },
+  enableFlexPeerGradeHelp: {
+    id: 'course-authoring.pages-resources.ora.flex-peer-grading.help',
+    defaultMessage: 'Turn on Flexible Peer Grading for all open response assessments in the course with peer grading.',
+    description: 'Help text describing what happens when the switch is enabled',
+  },
+  enabledBadgeLabel: {
+    id: 'course-authoring.pages-resources.ora.flex-peer-grading.enabled-badge.label',
+    defaultMessage: 'Enabled',
+    description: 'Label for badge that show users that a setting is enabled',
+  },
+  cancelLabel: {
+    id: 'course-authoring.pages-resources.ora.flex-peer-grading.cancel-button.label',
+    defaultMessage: 'Cancel',
+    description: 'Label for button that cancels user changes',
+  },
+  saveLabel: {
+    id: 'course-authoring.pages-resources.ora.flex-peer-grading.save-button.label',
+    defaultMessage: 'Save',
+    description: 'Label for button that saves user changes',
+  },
+  pendingSaveLabel: {
+    id: 'course-authoring.pages-resources.ora.flex-peer-grading.pending-save-button.label',
+    defaultMessage: 'Saving',
+    description: 'Label for button that has pending api save calls',
+  },
+  errorSavingTitle: {
+    id: 'course-authoring.pages-resources.ora.flex-peer-grading.save-error.title',
+    defaultMessage: 'We couldn\'t apply your changes.',
+  },
+  errorSavingMessage: {
+    id: 'course-authoring.pages-resources.ora.flex-peer-grading.save-error.message',
+    defaultMessage: 'Please check your entries and try again.',
+  },
+});
+
+export default messages;
diff --git a/plugins/course-apps/ora_settings/package.json b/plugins/course-apps/ora_settings/package.json
new file mode 100644
index 0000000000..3f93dcb722
--- /dev/null
+++ b/plugins/course-apps/ora_settings/package.json
@@ -0,0 +1,20 @@
+{
+    "name": "@openedx-plugins/course-app-ora_settings",
+    "version": "0.1.0",
+    "description": "Open Response Assessment configuration for courses using it",
+    "peerDependencies": {
+        "@edx/frontend-app-authoring": "*",
+        "@edx/frontend-platform": "*",
+        "@openedx/paragon": "*",
+        "prop-types": "*",
+        "react": "*",
+        "react-redux": "*",
+        "yup": "*"
+    },
+    "peerDependenciesMeta": {
+        "@edx/frontend-app-authoring": {
+            "optional": true
+        }
+    }
+}
+  
\ No newline at end of file
diff --git a/plugins/course-apps/proctoring/Settings.jsx b/plugins/course-apps/proctoring/Settings.jsx
new file mode 100644
index 0000000000..c4bcec80a9
--- /dev/null
+++ b/plugins/course-apps/proctoring/Settings.jsx
@@ -0,0 +1,661 @@
+import React, {
+  useContext, useEffect, useRef, useState,
+} from 'react';
+import classNames from 'classnames';
+import EmailValidator from 'email-validator';
+import moment from 'moment';
+import PropTypes from 'prop-types';
+
+import { getConfig } from '@edx/frontend-platform';
+import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
+import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';
+import {
+  ActionRow, Alert, Badge, Form, Hyperlink, ModalDialog, StatefulButton,
+} from '@openedx/paragon';
+
+import ExamsApiService from 'CourseAuthoring/data/services/ExamsApiService';
+import StudioApiService from 'CourseAuthoring/data/services/StudioApiService';
+import Loading from 'CourseAuthoring/generic/Loading';
+import ConnectionErrorAlert from 'CourseAuthoring/generic/ConnectionErrorAlert';
+import FormSwitchGroup from 'CourseAuthoring/generic/FormSwitchGroup';
+import { useModel } from 'CourseAuthoring/generic/model-store';
+import PermissionDeniedAlert from 'CourseAuthoring/generic/PermissionDeniedAlert';
+import { useIsMobile } from 'CourseAuthoring/utils';
+import { PagesAndResourcesContext } from 'CourseAuthoring/pages-and-resources/PagesAndResourcesProvider';
+
+import messages from './messages';
+
+const ProctoringSettings = ({ intl, onClose }) => {
+  const initialFormValues = {
+    enableProctoredExams: false,
+    proctoringProvider: false,
+    escalationEmail: '',
+    allowOptingOut: false,
+    createZendeskTickets: false,
+  };
+  const [formValues, setFormValues] = useState(initialFormValues);
+  const [loading, setLoading] = useState(true);
+  const [loaded, setLoaded] = useState(false);
+  const [loadingConnectionError, setLoadingConnectionError] = useState(false);
+  const [loadingPermissionError, setLoadingPermissionError] = useState(false);
+  const [allowLtiProviders, setAllowLtiProviders] = useState(false);
+  const [availableProctoringProviders, setAvailableProctoringProviders] = useState([]);
+  const [ltiProctoringProviders, setLtiProctoringProviders] = useState([]);
+  const [courseStartDate, setCourseStartDate] = useState('');
+  const [saveSuccess, setSaveSuccess] = useState(false);
+  const [saveError, setSaveError] = useState(false);
+  const [submissionInProgress, setSubmissionInProgress] = useState(false);
+  const [showEscalationEmail, setShowEscalationEmail] = useState(false);
+  const isEdxStaff = getAuthenticatedUser().administrator;
+  const [formStatus, setFormStatus] = useState({
+    isValid: true,
+    errors: {},
+  });
+  const isMobile = useIsMobile();
+  const modalVariant = isMobile ? 'dark' : 'default';
+
+  const isLtiProvider = (provider) => (
+    ltiProctoringProviders.some(p => p.name === provider)
+  );
+
+  function getProviderDisplayLabel(provider) {
+    // if a display label exists for this provider return it
+    return ltiProctoringProviders.find(p => p.name === provider)?.verbose_name || provider;
+  }
+
+  const { courseId } = useContext(PagesAndResourcesContext);
+  const courseDetails = useModel('courseDetails', courseId);
+  const org = courseDetails?.org;
+  const appInfo = useModel('courseApps', 'proctoring');
+  const alertRef = React.createRef();
+  const saveStatusAlertRef = React.createRef();
+  const proctoringEscalationEmailInputRef = useRef(null);
+  const submitButtonState = submissionInProgress ? 'pending' : 'default';
+
+  const handleChange = (event) => {
+    const { target } = event;
+    const value = target.type === 'checkbox' ? target.checked : target.value;
+    const { name } = target;
+
+    if (['allowOptingOut', 'createZendeskTickets'].includes(name)) {
+      // Form.Radio expects string values, so convert back to a boolean here
+      setFormValues({ ...formValues, [name]: value === 'true' });
+    } else if (name === 'proctoringProvider') {
+      const newFormValues = { ...formValues, proctoringProvider: value };
+
+      if (value === 'proctortrack') {
+        setFormValues({ ...newFormValues, createZendeskTickets: false });
+        setShowEscalationEmail(true);
+      } else if (value === 'software_secure') {
+        setFormValues({ ...newFormValues, createZendeskTickets: true });
+        setShowEscalationEmail(false);
+      } else if (isLtiProvider(value)) {
+        setFormValues(newFormValues);
+        setShowEscalationEmail(true);
+      } else {
+        setFormValues(newFormValues);
+        setShowEscalationEmail(false);
+      }
+    } else {
+      setFormValues({ ...formValues, [name]: value });
+    }
+  };
+
+  const setFocusToEscalationEmailInput = () => {
+    if (proctoringEscalationEmailInputRef && proctoringEscalationEmailInputRef.current) {
+      proctoringEscalationEmailInputRef.current.focus();
+    }
+  };
+
+  function postSettingsBackToServer() {
+    const selectedProvider = formValues.proctoringProvider;
+    const isLtiProviderSelected = isLtiProvider(selectedProvider);
+    const studioDataToPostBack = {
+      proctored_exam_settings: {
+        enable_proctored_exams: formValues.enableProctoredExams,
+        // lti providers are managed outside edx-platform, lti_external indicates this
+        proctoring_provider: isLtiProviderSelected ? 'lti_external' : selectedProvider,
+        create_zendesk_tickets: formValues.createZendeskTickets,
+      },
+    };
+    if (isEdxStaff) {
+      studioDataToPostBack.proctored_exam_settings.allow_proctoring_opt_out = formValues.allowOptingOut;
+    }
+
+    if (formValues.proctoringProvider === 'proctortrack') {
+      studioDataToPostBack.proctored_exam_settings.proctoring_escalation_email = formValues.escalationEmail === '' ? null : formValues.escalationEmail;
+    }
+
+    // only save back to exam service if necessary
+    setSubmissionInProgress(true);
+
+    const saveOperations = [StudioApiService.saveProctoredExamSettingsData(courseId, studioDataToPostBack)];
+    if (allowLtiProviders && ExamsApiService.isAvailable()) {
+      const selectedEscalationEmail = formValues.escalationEmail;
+
+      saveOperations.push(
+        ExamsApiService.saveCourseExamConfiguration(
+          courseId,
+          {
+            provider: isLtiProviderSelected ? formValues.proctoringProvider : null,
+            escalationEmail: (isLtiProviderSelected && selectedEscalationEmail !== '') ? selectedEscalationEmail : null,
+          },
+        ),
+      );
+    }
+    Promise.all(saveOperations)
+      .then(() => {
+        setSaveSuccess(true);
+        setSaveError(false);
+        setSubmissionInProgress(false);
+      }).catch((error) => {
+        setSaveSuccess(false);
+        setSaveError(error);
+        setSubmissionInProgress(false);
+      });
+  }
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    const isLtiProviderSelected = isLtiProvider(formValues.proctoringProvider);
+    if (
+      (formValues.proctoringProvider === 'proctortrack' || isLtiProviderSelected)
+      && !EmailValidator.validate(formValues.escalationEmail)
+      && !(formValues.escalationEmail === '' && !formValues.enableProctoredExams)
+    ) {
+      if (formValues.escalationEmail === '') {
+        const errorMessage = intl.formatMessage(messages['authoring.proctoring.escalationemail.error.blank'], { proctoringProviderName: getProviderDisplayLabel(formValues.proctoringProvider) });
+
+        setFormStatus({
+          isValid: false,
+          errors: {
+            formEscalationEmail: {
+              dialogErrorMessage: (
+                <Alert.Link onClick={setFocusToEscalationEmailInput} href="#formEscalationEmail" data-testid="escalationEmailErrorLink">
+                  {errorMessage}
+                </Alert.Link>
+              ),
+              inputErrorMessage: errorMessage,
+            },
+          },
+        });
+      } else {
+        const errorMessage = intl.formatMessage(messages['authoring.proctoring.escalationemail.error.invalid']);
+
+        setFormStatus({
+          isValid: false,
+          errors: {
+            formEscalationEmail: {
+              dialogErrorMessage: (<Alert.Link onClick={setFocusToEscalationEmailInput} href="#formEscalationEmail" data-testid="escalationEmailErrorLink">{errorMessage}</Alert.Link>),
+              inputErrorMessage: errorMessage,
+            },
+          },
+        });
+      }
+    } else {
+      postSettingsBackToServer();
+      const errors = { ...formStatus.errors };
+      delete errors.formEscalationEmail;
+      setFormStatus({
+        isValid: true,
+        errors,
+      });
+    }
+  };
+
+  function cannotEditProctoringProvider() {
+    const currentDate = moment(moment()).format('YYYY-MM-DD[T]hh:mm:ss[Z]');
+    const isAfterCourseStart = currentDate > courseStartDate;
+
+    // if the user is not edX staff and it is after the course start date, user cannot edit proctoring provider
+    return !isEdxStaff && isAfterCourseStart;
+  }
+
+  function isDisabledOption(provider) {
+    let markDisabled = false;
+    if (cannotEditProctoringProvider()) {
+      markDisabled = provider !== formValues.proctoringProvider;
+    }
+    return markDisabled;
+  }
+
+  function getProctoringProviderOptions(providers) {
+    return providers.map(provider => (
+      <option
+        key={provider}
+        value={provider}
+        disabled={isDisabledOption(provider)}
+        data-testid={provider}
+      >
+        {getProviderDisplayLabel(provider)}
+      </option>
+    ));
+  }
+
+  function getFormErrorMessage() {
+    const numOfErrors = Object.keys(formStatus.errors).length;
+    const errors = Object.entries(formStatus.errors).map(([id, error]) => <li key={id}>{error.dialogErrorMessage}</li>);
+    const messageId = numOfErrors > 1 ? 'authoring.proctoring.error.multiple' : 'authoring.proctoring.error.single';
+
+    return (
+      <>
+        <div>{intl.formatMessage(messages[messageId], { numOfErrors })}</div>
+        <ul>
+          {errors}
+        </ul>
+      </>
+    );
+  }
+
+  const learnMoreLink = appInfo?.documentationLinks?.learnMoreConfiguration && (
+    <Hyperlink
+      className="text-primary-500"
+      destination={appInfo.documentationLinks.learnMoreConfiguration}
+      target="_blank"
+      rel="noreferrer noopener"
+    >
+      {intl.formatMessage(messages['authoring.proctoring.learn.more'])}
+    </Hyperlink>
+  );
+
+  function renderContent() {
+    const isLtiProviderSelected = isLtiProvider(formValues.proctoringProvider);
+
+    return (
+      <>
+        {!formStatus.isValid && formStatus.errors.formEscalationEmail
+          && (
+            // tabIndex="-1" to make non-focusable element focusable
+            <Alert
+              id="escalationEmailError"
+              variant="danger"
+              tabIndex="-1"
+              data-testid="escalationEmailError"
+              ref={alertRef}
+            >
+              {getFormErrorMessage()}
+            </Alert>
+          )}
+
+        {/* ENABLE PROCTORED EXAMS */}
+        <FormSwitchGroup
+          id="enable-proctoring-toggle"
+          name="enableProctoredExams"
+          onChange={handleChange}
+          checked={formValues.enableProctoredExams}
+          label={(
+            <div className="d-flex align-items-center">
+              {intl.formatMessage(messages['authoring.proctoring.enableproctoredexams.label'])}
+              {
+                formValues.enableProctoredExams && (
+                  <Badge className="ml-2" variant="success">
+                    {intl.formatMessage(messages['authoring.proctoring.enabled'])}
+                  </Badge>
+                )
+              }
+            </div>
+          )}
+          helpText={(
+            <div>
+              <p>
+                {intl.formatMessage(messages['authoring.proctoring.enableproctoredexams.help'])}
+              </p>
+              <span className="py-3">{learnMoreLink}</span>
+            </div>
+          )}
+        />
+
+        {/* PROCTORING PROVIDER */}
+        { formValues.enableProctoredExams && (
+          <>
+            <hr />
+            <Form.Group controlId="formProctoringProvider">
+              <Form.Label as="legend" className="font-weight-bold">
+                {intl.formatMessage(messages['authoring.proctoring.provider.label'])}
+              </Form.Label>
+              <Form.Control
+                as="select"
+                name="proctoringProvider"
+                value={formValues.proctoringProvider}
+                onChange={handleChange}
+                aria-describedby="proctoringProviderHelpText"
+              >
+                {getProctoringProviderOptions(availableProctoringProviders)}
+              </Form.Control>
+              <Form.Text id="proctoringProviderHelpText">
+                {
+                  cannotEditProctoringProvider()
+                    ? intl.formatMessage(messages['authoring.proctoring.provider.help.aftercoursestart'])
+                    : intl.formatMessage(messages['authoring.proctoring.provider.help'])
+                }
+              </Form.Text>
+            </Form.Group>
+          </>
+        )}
+
+        {/* ESCALATION EMAIL */}
+        {showEscalationEmail && formValues.enableProctoredExams && (
+          <Form.Group controlId="formEscalationEmail">
+            <Form.Label className="font-weight-bold">
+              {intl.formatMessage(messages['authoring.proctoring.escalationemail.label'])}
+            </Form.Label>
+            <Form.Control
+              ref={proctoringEscalationEmailInputRef}
+              type="email"
+              name="escalationEmail"
+              data-testid="escalationEmail"
+              onChange={handleChange}
+              value={formValues.escalationEmail}
+              isInvalid={Object.prototype.hasOwnProperty.call(formStatus.errors, 'formEscalationEmail')}
+              aria-describedby="escalationEmailHelpText"
+            />
+            <Form.Text id="escalationEmailHelpText">
+              {intl.formatMessage(messages['authoring.proctoring.escalationemail.help'])}
+            </Form.Text>
+            {Object.prototype.hasOwnProperty.call(formStatus.errors, 'formEscalationEmail') && (
+              <Form.Control.Feedback type="invalid">
+                {
+                  formStatus.errors.formEscalationEmail
+                  && formStatus.errors.formEscalationEmail.inputErrorMessage
+                }
+              </Form.Control.Feedback>
+            )}
+          </Form.Group>
+        )}
+
+        {/* ALLOW OPTING OUT OF PROCTORED EXAMS */}
+        { isEdxStaff && formValues.enableProctoredExams && !isLtiProviderSelected && (
+          <fieldset aria-describedby="allowOptingOutHelpText">
+            <Form.Group controlId="formAllowingOptingOut">
+              <Form.Label as="legend" className="font-weight-bold">
+                {intl.formatMessage(messages['authoring.proctoring.allowoptout.label'])}
+              </Form.Label>
+              <Form.RadioSet
+                name="allowOptingOut"
+                data-testid="allowOptingOutRadio"
+                value={formValues.allowOptingOut.toString()}
+                onChange={handleChange}
+              >
+                <Form.Radio value="true" data-testid="allowOptingOutYes">
+                  {intl.formatMessage(messages['authoring.proctoring.yes'])}
+                </Form.Radio>
+                <Form.Radio value="false" data-testid="allowOptingOutNo">
+                  {intl.formatMessage(messages['authoring.proctoring.no'])}
+                </Form.Radio>
+              </Form.RadioSet>
+            </Form.Group>
+          </fieldset>
+        )}
+
+        {/* CREATE ZENDESK TICKETS */}
+        { isEdxStaff && formValues.enableProctoredExams && !isLtiProviderSelected && (
+          <fieldset aria-describedby="createZendeskTicketsText">
+            <Form.Group controlId="formCreateZendeskTickets">
+              <Form.Label as="legend" className="font-weight-bold">
+                {intl.formatMessage(messages['authoring.proctoring.createzendesk.label'])}
+              </Form.Label>
+              <Form.RadioSet
+                name="createZendeskTickets"
+                value={formValues.createZendeskTickets.toString()}
+                onChange={handleChange}
+              >
+                <Form.Radio value="true" data-testid="createZendeskTicketsYes">
+                  {intl.formatMessage(messages['authoring.proctoring.yes'])}
+                </Form.Radio>
+                <Form.Radio value="false" data-testid="createZendeskTicketsNo">
+                  {intl.formatMessage(messages['authoring.proctoring.no'])}
+                </Form.Radio>
+              </Form.RadioSet>
+            </Form.Group>
+          </fieldset>
+        )}
+      </>
+    );
+  }
+
+  function renderLoading() {
+    return (
+      <Loading />
+    );
+  }
+
+  function renderConnectionError() {
+    return (
+      <ConnectionErrorAlert />
+    );
+  }
+
+  function renderPermissionError() {
+    return (
+      <PermissionDeniedAlert />
+    );
+  }
+
+  function renderSaveSuccess() {
+    const studioCourseRunURL = StudioApiService.getStudioCourseRunUrl(courseId);
+    return (
+      <Alert
+        variant="success"
+        data-testid="saveSuccess"
+        tabIndex="-1"
+        ref={saveStatusAlertRef}
+        onClose={() => setSaveSuccess(false)}
+        dismissible
+      >
+        <FormattedMessage
+          id="authoring.proctoring.alert.success"
+          defaultMessage={`
+            Proctored exam settings saved successfully. {studioCourseRunURL}.
+          `}
+          values={{
+            studioCourseRunURL: (
+              <Alert.Link href={studioCourseRunURL}>
+                {intl.formatMessage(messages['authoring.proctoring.studio.link.text'])}
+              </Alert.Link>
+            ),
+          }}
+        />
+      </Alert>
+    );
+  }
+
+  function renderSaveError() {
+    let errorMessage = (
+      <FormattedMessage
+        id="authoring.proctoring.alert.error"
+        defaultMessage={`
+          We encountered a technical error while trying to save proctored exam settings.
+          This might be a temporary issue, so please try again in a few minutes.
+          If the problem persists, please go to the {support_link} for help.
+        `}
+        values={{
+          support_link: (
+            <Alert.Link href={getConfig().SUPPORT_URL}>
+              {intl.formatMessage(messages['authoring.proctoring.support.text'])}
+            </Alert.Link>
+          ),
+        }}
+      />
+    );
+
+    if (saveError?.response.status === 403) {
+      errorMessage = (
+        <FormattedMessage
+          id="authoring.proctoring.alert.error.forbidden"
+          defaultMessage={`
+            You do not have permission to edit proctored exam settings for this course.
+            If you are a course team member and this problem persists,
+            please go to the {support_link} for help.
+          `}
+          values={{
+            support_link: (
+              <Alert.Link href={getConfig().SUPPORT_URL}>
+                {intl.formatMessage(messages['authoring.proctoring.support.text'])}
+              </Alert.Link>
+            ),
+          }}
+        />
+      );
+    }
+
+    return (
+      <Alert
+        variant="danger"
+        data-testid="saveError"
+        tabIndex="-1"
+        ref={saveStatusAlertRef}
+        onClose={() => setSaveError(false)}
+        dismissible
+      >
+        {errorMessage}
+      </Alert>
+    );
+  }
+
+  useEffect(() => {
+    Promise.all([
+      StudioApiService.getProctoredExamSettingsData(courseId),
+      ExamsApiService.isAvailable() ? ExamsApiService.getCourseExamConfiguration(courseId) : Promise.resolve(),
+      ExamsApiService.isAvailable() ? ExamsApiService.getAvailableProviders(org) : Promise.resolve(),
+    ])
+      .then(
+        ([settingsResponse, examConfigResponse, ltiProvidersResponse]) => {
+          const proctoredExamSettings = settingsResponse.data.proctored_exam_settings;
+          setLoaded(true);
+          setLoading(false);
+          setSubmissionInProgress(false);
+          setCourseStartDate(settingsResponse.data.course_start_date);
+          setAvailableProctoringProviders(settingsResponse.data.available_proctoring_providers);
+
+          // The list of providers returned by studio settings are the default behavior. If lti_external
+          // is available as an option display the list of LTI providers returned by the exam service.
+          // Setting 'lti_external' in studio indicates an LTI provider configured outside of edx-platform.
+          // This option is not directly selectable.
+          const proctoringProvidersStudio = settingsResponse.data.available_proctoring_providers;
+          const proctoringProvidersLti = ltiProvidersResponse?.data || [];
+          const enableLtiProviders = proctoringProvidersStudio.includes('lti_external');
+          setAllowLtiProviders(enableLtiProviders);
+          setLtiProctoringProviders(proctoringProvidersLti);
+          // flatten provider objects and coalesce values to just the provider key
+          let availableProviders = proctoringProvidersStudio.filter(value => value !== 'lti_external');
+          if (enableLtiProviders) {
+            availableProviders = proctoringProvidersLti.reduce(
+              (result, provider) => [...result, provider.name],
+              availableProviders,
+            );
+          }
+          setAvailableProctoringProviders(availableProviders);
+
+          let selectedProvider;
+          if (proctoredExamSettings.proctoring_provider === 'lti_external') {
+            selectedProvider = examConfigResponse.data.provider;
+          } else {
+            selectedProvider = proctoredExamSettings.proctoring_provider;
+          }
+
+          const isProctortrack = selectedProvider === 'proctortrack';
+          const ltiProviderSelected = proctoringProvidersLti.some(p => p.name === selectedProvider);
+
+          if (isProctortrack || ltiProviderSelected) {
+            setShowEscalationEmail(true);
+          }
+
+          const proctoringEscalationEmail = ltiProviderSelected
+            ? examConfigResponse.data.escalation_email
+            : proctoredExamSettings.proctoring_escalation_email;
+
+          setFormValues({
+            ...formValues,
+            proctoringProvider: selectedProvider,
+            enableProctoredExams: proctoredExamSettings.enable_proctored_exams,
+            allowOptingOut: proctoredExamSettings.allow_proctoring_opt_out,
+            createZendeskTickets: proctoredExamSettings.create_zendesk_tickets,
+            // The backend API may return null for the proctoringEscalationEmail value, which is the default.
+            // In order to keep our email input component controlled, we use the empty string as the default
+            // and perform this conversion during GETs and POSTs.
+            escalationEmail: proctoringEscalationEmail === null ? '' : proctoringEscalationEmail,
+          });
+        },
+      ).catch(
+        error => {
+          if (error.response?.status === 403) {
+            setLoadingPermissionError(true);
+          } else {
+            setLoadingConnectionError(true);
+          }
+          setLoading(false);
+          setLoaded(false);
+          setSubmissionInProgress(false);
+        },
+      );
+  }, []);
+
+  useEffect(() => {
+    if ((saveSuccess || saveError) && !!saveStatusAlertRef.current) {
+      saveStatusAlertRef.current.focus();
+    }
+    if (!formStatus.isValid && !!alertRef.current) {
+      alertRef.current.focus();
+    }
+  }, [formStatus, saveSuccess, saveError]);
+
+  return (
+    <ModalDialog
+      title="Proctoring Settings"
+      isOpen
+      onClose={onClose}
+      size="lg"
+      variant={modalVariant}
+      hasCloseButton={isMobile}
+      isFullscreenScroll
+      isFullscreenOnMobile
+    >
+      <Form onSubmit={handleSubmit} data-testid="proctoringForm">
+        <ModalDialog.Header>
+          <ModalDialog.Title>
+            Proctored Exam Settings
+          </ModalDialog.Title>
+        </ModalDialog.Header>
+        <ModalDialog.Body>
+          {loading ? renderLoading() : null}
+          {saveSuccess ? renderSaveSuccess() : null}
+          {saveError ? renderSaveError() : null}
+          {loaded ? renderContent() : null}
+          {loadingConnectionError ? renderConnectionError() : null}
+          {loadingPermissionError ? renderPermissionError() : null}
+        </ModalDialog.Body>
+        <ModalDialog.Footer
+          className={classNames(
+            'p-4',
+          )}
+        >
+          <ActionRow>
+            <ModalDialog.CloseButton variant="tertiary">
+              {intl.formatMessage(messages['authoring.proctoring.cancel'])}
+            </ModalDialog.CloseButton>
+            <StatefulButton
+              labels={{
+                default: intl.formatMessage(messages['authoring.proctoring.save']),
+                pending: intl.formatMessage(messages['authoring.proctoring.saving']),
+              }}
+              description="Form save button"
+              data-testid="submissionButton"
+              disabled={submissionInProgress}
+              state={submitButtonState}
+              type="submit"
+            />
+          </ActionRow>
+        </ModalDialog.Footer>
+      </Form>
+    </ModalDialog>
+  );
+};
+
+ProctoringSettings.propTypes = {
+  intl: intlShape.isRequired,
+  onClose: PropTypes.func.isRequired,
+};
+
+ProctoringSettings.defaultProps = {};
+
+export default injectIntl(ProctoringSettings);
diff --git a/plugins/course-apps/proctoring/Settings.test.jsx b/plugins/course-apps/proctoring/Settings.test.jsx
new file mode 100644
index 0000000000..4edb7f1c28
--- /dev/null
+++ b/plugins/course-apps/proctoring/Settings.test.jsx
@@ -0,0 +1,891 @@
+import React from 'react';
+import {
+  render, screen, cleanup, waitFor, fireEvent, act,
+} from '@testing-library/react';
+import MockAdapter from 'axios-mock-adapter';
+
+import { initializeMockApp, mergeConfig } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { IntlProvider, injectIntl } from '@edx/frontend-platform/i18n';
+import { AppProvider } from '@edx/frontend-platform/react';
+
+import StudioApiService from 'CourseAuthoring/data/services/StudioApiService';
+import ExamsApiService from 'CourseAuthoring/data/services/ExamsApiService';
+import initializeStore from 'CourseAuthoring/store';
+import PagesAndResourcesProvider from 'CourseAuthoring/pages-and-resources/PagesAndResourcesProvider';
+import ProctoredExamSettings from './Settings';
+
+const courseId = 'course-v1%3AedX%2BDemoX%2BDemo_Course';
+const defaultProps = {
+  courseId,
+  onClose: () => {},
+};
+const IntlProctoredExamSettings = injectIntl(ProctoredExamSettings);
+let store;
+
+const intlWrapper = children => (
+  <AppProvider store={store}>
+    <PagesAndResourcesProvider courseId={defaultProps.courseId}>
+      <IntlProvider locale="en">
+        {children}
+      </IntlProvider>
+    </PagesAndResourcesProvider>
+  </AppProvider>
+);
+let axiosMock;
+
+describe('ProctoredExamSettings', () => {
+  function setupApp(isAdmin = true, org = undefined) {
+    mergeConfig({
+      EXAMS_BASE_URL: 'http://exams.testing.co',
+    }, 'CourseAuthoringConfig');
+
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: isAdmin,
+        roles: [],
+      },
+    });
+    store = initializeStore({
+      models: {
+        courseApps: {
+          proctoring: {},
+        },
+        courseDetails: {
+          [courseId]: {
+            start: Date(),
+          },
+        },
+        ...(org ? { courseDetails: { [courseId]: { org } } } : {}),
+      },
+    });
+
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+    axiosMock.onGet(
+      `${ExamsApiService.getExamsBaseUrl()}/api/v1/providers${org ? `?org=${org}` : ''}`,
+    ).reply(200, [
+      {
+        name: 'test_lti',
+        verbose_name: 'LTI Provider',
+      },
+    ]);
+    axiosMock.onGet(
+      `${ExamsApiService.getExamsBaseUrl()}/api/v1/configs/course_id/${defaultProps.courseId}`,
+    ).reply(200, {
+      provider: null,
+    });
+
+    axiosMock.onGet(
+      StudioApiService.getProctoredExamSettingsUrl(defaultProps.courseId),
+    ).reply(200, {
+      proctored_exam_settings: {
+        enable_proctored_exams: true,
+        allow_proctoring_opt_out: false,
+        proctoring_provider: 'mockproc',
+        proctoring_escalation_email: 'test@example.com',
+        create_zendesk_tickets: true,
+      },
+      available_proctoring_providers: ['software_secure', 'proctortrack', 'mockproc', 'lti_external'],
+      course_start_date: '2070-01-01T00:00:00Z',
+    });
+  }
+
+  afterEach(() => {
+    cleanup();
+    axiosMock.reset();
+  });
+  beforeEach(async () => {
+    setupApp();
+  });
+
+  describe('Field dependencies', () => {
+    beforeEach(async () => {
+      await act(async () => render(intlWrapper(<IntlProctoredExamSettings {...defaultProps} />)));
+    });
+
+    it('Updates Zendesk ticket field if proctortrack is provider', async () => {
+      await waitFor(() => {
+        screen.getByDisplayValue('mockproc');
+      });
+      const selectElement = screen.getByDisplayValue('mockproc');
+      fireEvent.change(selectElement, { target: { value: 'proctortrack' } });
+      const zendeskTicketInput = screen.getByTestId('createZendeskTicketsNo');
+      expect(zendeskTicketInput.checked).toEqual(true);
+    });
+
+    it('Updates Zendesk ticket field if software_secure is provider', async () => {
+      await waitFor(() => {
+        screen.getByDisplayValue('mockproc');
+      });
+      const selectElement = screen.getByDisplayValue('mockproc');
+      fireEvent.change(selectElement, { target: { value: 'software_secure' } });
+      const zendeskTicketInput = screen.getByTestId('createZendeskTicketsYes');
+      expect(zendeskTicketInput.checked).toEqual(true);
+    });
+
+    it('Does not update zendesk ticket field for any other provider', async () => {
+      await waitFor(() => {
+        screen.getByDisplayValue('mockproc');
+      });
+      const selectElement = screen.getByDisplayValue('mockproc');
+      fireEvent.change(selectElement, { target: { value: 'mockproc' } });
+      const zendeskTicketInput = screen.getByTestId('createZendeskTicketsYes');
+      expect(zendeskTicketInput.checked).toEqual(true);
+    });
+
+    it('Hides all other fields when enabledProctorExam is false when first loaded', async () => {
+      cleanup();
+      // Overrides the handler defined in beforeEach.
+      axiosMock.onGet(
+        StudioApiService.getProctoredExamSettingsUrl(defaultProps.courseId),
+      ).reply(200, {
+        proctored_exam_settings: {
+          enable_proctored_exams: false,
+          allow_proctoring_opt_out: false,
+          proctoring_provider: 'mockproc',
+          proctoring_escalation_email: 'test@example.com',
+          create_zendesk_tickets: true,
+        },
+        available_proctoring_providers: ['software_secure', 'proctortrack', 'mockproc'],
+        course_start_date: '2070-01-01T00:00:00Z',
+      });
+
+      await act(async () => render(intlWrapper(<IntlProctoredExamSettings {...defaultProps} />)));
+      await waitFor(() => {
+        screen.getByText('Proctored exams');
+      });
+      const enabledProctoredExamCheck = screen.getByLabelText('Proctored exams');
+      expect(enabledProctoredExamCheck.checked).toEqual(false);
+      expect(screen.queryByText('Allow Opting Out of Proctored Exams')).toBeNull();
+      expect(screen.queryByDisplayValue('mockproc')).toBeNull();
+      expect(screen.queryByTestId('escalationEmail')).toBeNull();
+      expect(screen.queryByTestId('createZendeskTicketsYes')).toBeNull();
+      expect(screen.queryByTestId('createZendeskTicketsNo')).toBeNull();
+    });
+
+    it('Hides all other fields when enableProctoredExams toggled to false', async () => {
+      await waitFor(() => {
+        screen.getByText('Proctored exams');
+      });
+      expect(screen.queryByText('Allow opting out of proctored exams')).toBeDefined();
+      expect(screen.queryByDisplayValue('mockproc')).toBeDefined();
+      expect(screen.queryByTestId('escalationEmail')).toBeDefined();
+      expect(screen.queryByTestId('createZendeskTicketsYes')).toBeDefined();
+      expect(screen.queryByTestId('createZendeskTicketsNo')).toBeDefined();
+
+      let enabledProctoredExamCheck = screen.getAllByLabelText('Proctored exams', { exact: false })[0];
+      expect(enabledProctoredExamCheck.checked).toEqual(true);
+      fireEvent.click(enabledProctoredExamCheck, { target: { value: false } });
+      enabledProctoredExamCheck = screen.getByLabelText('Proctored exams');
+      expect(enabledProctoredExamCheck.checked).toEqual(false);
+      expect(screen.queryByText('Allow opting out of proctored exams')).toBeNull();
+      expect(screen.queryByDisplayValue('mockproc')).toBeNull();
+      expect(screen.queryByTestId('escalationEmail')).toBeNull();
+      expect(screen.queryByTestId('createZendeskTicketsYes')).toBeNull();
+      expect(screen.queryByTestId('createZendeskTicketsNo')).toBeNull();
+    });
+
+    it('Hides unsupported fields when lti provider is selected', async () => {
+      await waitFor(() => {
+        screen.getByDisplayValue('mockproc');
+      });
+      const selectElement = screen.getByDisplayValue('mockproc');
+      fireEvent.change(selectElement, { target: { value: 'test_lti' } });
+      expect(screen.queryByTestId('allowOptingOutRadio')).toBeNull();
+      expect(screen.queryByTestId('createZendeskTicketsYes')).toBeNull();
+      expect(screen.queryByTestId('createZendeskTicketsNo')).toBeNull();
+    });
+  });
+
+  describe('Validation with invalid escalation email', () => {
+    const proctoringProvidersRequiringEscalationEmail = ['proctortrack', 'test_lti'];
+
+    beforeEach(async () => {
+      axiosMock.onGet(
+        StudioApiService.getProctoredExamSettingsUrl(defaultProps.courseId),
+      ).reply(200, {
+        proctored_exam_settings: {
+          enable_proctored_exams: true,
+          allow_proctoring_opt_out: false,
+          proctoring_provider: 'proctortrack',
+          proctoring_escalation_email: 'test@example.com',
+          create_zendesk_tickets: true,
+        },
+        available_proctoring_providers: ['software_secure', 'proctortrack', 'mockproc', 'lti_external'],
+        course_start_date: '2070-01-01T00:00:00Z',
+      });
+
+      axiosMock.onPatch(
+        ExamsApiService.getExamConfigurationUrl(defaultProps.courseId),
+      ).reply(204, {});
+
+      axiosMock.onPost(
+        StudioApiService.getProctoredExamSettingsUrl(defaultProps.courseId),
+      ).reply(200, {});
+
+      await act(async () => render(intlWrapper(<IntlProctoredExamSettings {...defaultProps} />)));
+    });
+
+    proctoringProvidersRequiringEscalationEmail.forEach(provider => {
+      it(`Creates an alert when no proctoring escalation email is provided with ${provider} selected`, async () => {
+        await waitFor(() => {
+          screen.getByDisplayValue('proctortrack');
+        });
+        const selectEscalationEmailElement = screen.getByDisplayValue('test@example.com');
+        fireEvent.change(selectEscalationEmailElement, { target: { value: '' } });
+        const selectButton = screen.getByTestId('submissionButton');
+        fireEvent.click(selectButton);
+
+        // verify alert content and focus management
+        const escalationEmailError = screen.getByTestId('escalationEmailError');
+        expect(escalationEmailError.textContent).not.toBeNull();
+        expect(document.activeElement).toEqual(escalationEmailError);
+
+        // verify alert link links to offending input
+        const errorLink = screen.getByTestId('escalationEmailErrorLink');
+        fireEvent.click(errorLink);
+        const escalationEmailInput = screen.getByTestId('escalationEmail');
+        expect(document.activeElement).toEqual(escalationEmailInput);
+      });
+
+      it(`Creates an alert when invalid proctoring escalation email is provided with ${provider} selected`, async () => {
+        await waitFor(() => {
+          screen.getByDisplayValue('proctortrack');
+        });
+
+        const selectElement = screen.getByDisplayValue('proctortrack');
+        fireEvent.change(selectElement, { target: { value: provider } });
+
+        const selectEscalationEmailElement = screen.getByDisplayValue('test@example.com');
+        fireEvent.change(selectEscalationEmailElement, { target: { value: 'foo.bar' } });
+        const proctoringForm = screen.getByTestId('proctoringForm');
+        fireEvent.submit(proctoringForm);
+
+        // verify alert content and focus management
+        const escalationEmailError = screen.getByTestId('escalationEmailError');
+        expect(document.activeElement).toEqual(escalationEmailError);
+        expect(escalationEmailError.textContent).not.toBeNull();
+        expect(document.activeElement).toEqual(escalationEmailError);
+
+        // verify alert link links to offending input
+        const errorLink = screen.getByTestId('escalationEmailErrorLink');
+        fireEvent.click(errorLink);
+        const escalationEmailInput = screen.getByTestId('escalationEmail');
+        expect(document.activeElement).toEqual(escalationEmailInput);
+      });
+
+      it('Creates an alert when invalid proctoring escalation email is provided with proctoring disabled', async () => {
+        await waitFor(() => {
+          screen.getByDisplayValue('proctortrack');
+        });
+        const selectEscalationEmailElement = screen.getByDisplayValue('test@example.com');
+        fireEvent.change(selectEscalationEmailElement, { target: { value: 'foo.bar' } });
+        const enableProctoringElement = screen.getByText('Proctored exams');
+        fireEvent.click(enableProctoringElement);
+        const selectButton = screen.getByTestId('submissionButton');
+        fireEvent.click(selectButton);
+
+        // verify alert content and focus management
+        const escalationEmailError = screen.getByTestId('escalationEmailError');
+        expect(document.activeElement).toEqual(escalationEmailError);
+        expect(escalationEmailError.textContent).not.toBeNull();
+        expect(document.activeElement).toEqual(escalationEmailError);
+      });
+
+      it('Has no error when empty proctoring escalation email is provided with proctoring disabled', async () => {
+        await waitFor(() => {
+          screen.getByDisplayValue('proctortrack');
+        });
+        const selectEscalationEmailElement = screen.getByDisplayValue('test@example.com');
+        fireEvent.change(selectEscalationEmailElement, { target: { value: '' } });
+        const enableProctoringElement = screen.getByText('Proctored exams');
+        fireEvent.click(enableProctoringElement);
+        const selectButton = screen.getByTestId('submissionButton');
+        fireEvent.click(selectButton);
+
+        // verify there is no escalation email alert, and focus has been set on save success alert
+        expect(screen.queryByTestId('escalationEmailError')).toBeNull();
+
+        await waitFor(() => {
+          const errorAlert = screen.getByTestId('saveSuccess');
+          expect(errorAlert.textContent).toEqual(
+            expect.stringContaining('Proctored exam settings saved successfully.'),
+          );
+          expect(document.activeElement).toEqual(errorAlert);
+        });
+      });
+
+      it(`Has no error when valid proctoring escalation email is provided with ${provider} selected`, async () => {
+        await waitFor(() => {
+          screen.getByDisplayValue('proctortrack');
+        });
+        const selectEscalationEmailElement = screen.getByDisplayValue('test@example.com');
+        fireEvent.change(selectEscalationEmailElement, { target: { value: 'foo@bar.com' } });
+        const selectButton = screen.getByTestId('submissionButton');
+        fireEvent.click(selectButton);
+
+        // verify there is no escalation email alert, and focus has been set on save success alert
+        expect(screen.queryByTestId('escalationEmailError')).toBeNull();
+
+        await waitFor(() => {
+          const errorAlert = screen.getByTestId('saveSuccess');
+          expect(errorAlert.textContent).toEqual(
+            expect.stringContaining('Proctored exam settings saved successfully.'),
+          );
+          expect(document.activeElement).toEqual(errorAlert);
+        });
+      });
+
+      it(`Escalation email field hidden when proctoring backend is not ${provider}`, async () => {
+        await waitFor(() => {
+          screen.getByDisplayValue('proctortrack');
+        });
+        const proctoringBackendSelect = screen.getByDisplayValue('proctortrack');
+        const selectEscalationEmailElement = screen.getByTestId('escalationEmail');
+        expect(selectEscalationEmailElement.value).toEqual('test@example.com');
+        fireEvent.change(proctoringBackendSelect, { target: { value: 'software_secure' } });
+        expect(screen.queryByTestId('escalationEmail')).toBeNull();
+      });
+
+      it(`Escalation email Field Show when proctoring backend is switched back to ${provider}`, async () => {
+        await waitFor(() => {
+          screen.getByDisplayValue('proctortrack');
+        });
+        const proctoringBackendSelect = screen.getByDisplayValue('proctortrack');
+        let selectEscalationEmailElement = screen.getByTestId('escalationEmail');
+        fireEvent.change(proctoringBackendSelect, { target: { value: 'software_secure' } });
+        expect(screen.queryByTestId('escalationEmail')).toBeNull();
+        fireEvent.change(proctoringBackendSelect, { target: { value: 'proctortrack' } });
+        expect(screen.queryByTestId('escalationEmail')).toBeDefined();
+        selectEscalationEmailElement = screen.getByTestId('escalationEmail');
+        expect(selectEscalationEmailElement.value).toEqual('test@example.com');
+      });
+
+      it('Submits form when "Enter" key is hit in the escalation email field', async () => {
+        await waitFor(() => {
+          screen.getByDisplayValue('proctortrack');
+        });
+        const selectEscalationEmailElement = screen.getByDisplayValue('test@example.com');
+        fireEvent.change(selectEscalationEmailElement, { target: { value: '' } });
+        fireEvent.submit(selectEscalationEmailElement);
+        // if the error appears, the form has been submitted
+        expect(screen.getByTestId('escalationEmailError')).toBeDefined();
+      });
+    });
+  });
+
+  describe('Proctoring provider options', () => {
+    const mockGetFutureCourseData = {
+      proctored_exam_settings: {
+        enable_proctored_exams: true,
+        allow_proctoring_opt_out: false,
+        proctoring_provider: 'mockproc',
+        proctoring_escalation_email: 'test@example.com',
+        create_zendesk_tickets: true,
+      },
+      available_proctoring_providers: ['software_secure', 'proctortrack', 'mockproc'],
+      course_start_date: '2099-01-01T00:00:00Z',
+    };
+
+    const mockGetPastCourseData = {
+      proctored_exam_settings: {
+        enable_proctored_exams: true,
+        allow_proctoring_opt_out: false,
+        proctoring_provider: 'mockproc',
+        proctoring_escalation_email: 'test@example.com',
+        create_zendesk_tickets: true,
+      },
+      available_proctoring_providers: ['software_secure', 'proctortrack', 'mockproc'],
+      course_start_date: '2013-01-01T00:00:00Z',
+    };
+
+    function mockCourseData(data) {
+      axiosMock.onGet(StudioApiService.getProctoredExamSettingsUrl(defaultProps.courseId)).reply(200, data);
+    }
+
+    it('Disables irrelevant proctoring provider fields when user is not an administrator and it is after start date', async () => {
+      const isAdmin = false;
+      setupApp(isAdmin);
+      mockCourseData(mockGetPastCourseData);
+      await act(async () => render(intlWrapper(<IntlProctoredExamSettings {...defaultProps} />)));
+      const providerOption = screen.getByTestId('proctortrack');
+      expect(providerOption.hasAttribute('disabled')).toEqual(true);
+    });
+
+    it('Enables all proctoring provider options if user is not an administrator and it is before start date', async () => {
+      const isAdmin = false;
+      setupApp(isAdmin);
+      mockCourseData(mockGetFutureCourseData);
+      await act(async () => render(intlWrapper(<IntlProctoredExamSettings {...defaultProps} />)));
+      const providerOption = screen.getByTestId('proctortrack');
+      expect(providerOption.hasAttribute('disabled')).toEqual(false);
+    });
+
+    it('Sends the org to the proctoring provider endpoint', async () => {
+      const isAdmin = false;
+      const org = 'test-org';
+      setupApp(isAdmin, org);
+      mockCourseData(mockGetFutureCourseData);
+      await act(async () => render(intlWrapper(<IntlProctoredExamSettings {...defaultProps} />)));
+      const providerOption = screen.getByTestId('proctortrack');
+      expect(providerOption.hasAttribute('disabled')).toEqual(false);
+    });
+
+    it('Enables all proctoring provider options if user administrator and it is after start date', async () => {
+      const isAdmin = true;
+      setupApp(isAdmin);
+      mockCourseData(mockGetPastCourseData);
+      await act(async () => render(intlWrapper(<IntlProctoredExamSettings {...defaultProps} />)));
+      const providerOption = screen.getByTestId('proctortrack');
+      expect(providerOption.hasAttribute('disabled')).toEqual(false);
+    });
+
+    it('Enables all proctoring provider options if user administrator and it is before start date', async () => {
+      const isAdmin = true;
+      setupApp(isAdmin);
+      mockCourseData(mockGetFutureCourseData);
+      await act(async () => render(intlWrapper(<IntlProctoredExamSettings {...defaultProps} />)));
+      const providerOption = screen.getByTestId('proctortrack');
+      expect(providerOption.hasAttribute('disabled')).toEqual(false);
+    });
+
+    it('Does not include lti_external as a selectable option', async () => {
+      const courseData = {
+        ...mockGetFutureCourseData,
+        available_proctoring_providers: ['lti_external', 'proctortrack', 'mockproc'],
+      };
+      mockCourseData(courseData);
+      await act(async () => render(intlWrapper(<IntlProctoredExamSettings {...defaultProps} />)));
+      await waitFor(() => {
+        screen.getByDisplayValue('mockproc');
+      });
+      expect(screen.queryByTestId('lti_external')).toBeNull();
+    });
+
+    it('Includes lti proctoring provider options when lti_external is allowed by studio', async () => {
+      const courseData = {
+        ...mockGetFutureCourseData,
+        available_proctoring_providers: ['lti_external', 'proctortrack', 'mockproc'],
+      };
+      mockCourseData(courseData);
+      await act(async () => render(intlWrapper(<IntlProctoredExamSettings {...defaultProps} />)));
+      await waitFor(() => {
+        screen.getByDisplayValue('mockproc');
+      });
+      const providerOption = screen.getByTestId('test_lti');
+      // as as admin the provider should not be disabled
+      expect(providerOption.hasAttribute('disabled')).toEqual(false);
+    });
+
+    it('Does not include lti provider options when lti_external is not available in studio', async () => {
+      const isAdmin = true;
+      setupApp(isAdmin);
+      mockCourseData(mockGetFutureCourseData);
+      await act(async () => render(intlWrapper(<IntlProctoredExamSettings {...defaultProps} />)));
+      await waitFor(() => {
+        screen.getByDisplayValue('mockproc');
+      });
+
+      const providerOption = screen.queryByTestId('test_lti');
+      expect(providerOption).not.toBeInTheDocument();
+    });
+
+    it('Does not request lti provider options if there is no exam service url configuration', async () => {
+      mergeConfig({
+        EXAMS_BASE_URL: null,
+      }, 'CourseAuthoringConfig');
+
+      await act(async () => render(intlWrapper(<IntlProctoredExamSettings {...defaultProps} />)));
+      await waitFor(() => {
+        screen.getByDisplayValue('mockproc');
+      });
+      // only outgoing request should be for studio settings
+      expect(axiosMock.history.get.length).toBe(1);
+      expect(axiosMock.history.get[0].url.includes('proctored_exam_settings')).toEqual(true);
+    });
+
+    it('Selected LTI proctoring provider is shown on page load', async () => {
+      const courseData = { ...mockGetFutureCourseData };
+      courseData.available_proctoring_providers = ['lti_external', 'proctortrack', 'mockproc'];
+      courseData.proctored_exam_settings.proctoring_provider = 'lti_external';
+      mockCourseData(courseData);
+      axiosMock.onGet(
+        `${ExamsApiService.getExamsBaseUrl()}/api/v1/configs/course_id/${defaultProps.courseId}`,
+      ).reply(200, {
+        provider: 'test_lti',
+      });
+      await act(async () => render(intlWrapper(<IntlProctoredExamSettings {...defaultProps} />)));
+      await waitFor(() => {
+        screen.getByText('Proctoring provider');
+      });
+
+      // make sure test_lti is the selected provider
+      expect(screen.getByDisplayValue('LTI Provider')).toBeInTheDocument();
+    });
+  });
+
+  describe('Toggles field visibility based on user permissions', () => {
+    it('Hides opting out and zendesk tickets for non edX staff', async () => {
+      setupApp(false);
+      await act(async () => render(intlWrapper(<IntlProctoredExamSettings {...defaultProps} />)));
+      expect(screen.queryByTestId('allowOptingOutYes')).toBeNull();
+      expect(screen.queryByTestId('createZendeskTicketsYes')).toBeNull();
+    });
+
+    it('Shows opting out and zendesk tickets for edX staff', async () => {
+      setupApp(true);
+      await act(async () => render(intlWrapper(<IntlProctoredExamSettings {...defaultProps} />)));
+      expect(screen.queryByTestId('allowOptingOutYes')).not.toBeNull();
+      expect(screen.queryByTestId('createZendeskTicketsYes')).not.toBeNull();
+    });
+  });
+
+  describe('Connection states', () => {
+    it('Shows the spinner before the connection is complete', async () => {
+      await act(async () => {
+        render(intlWrapper(<IntlProctoredExamSettings {...defaultProps} />));
+        // This expectation is _inside_ the `act` intentionally, so that it executes immediately.
+        const spinner = screen.getByRole('status');
+        expect(spinner.textContent).toEqual('Loading...');
+      });
+    });
+
+    it('Show connection error message when we suffer studio server side error', async () => {
+      axiosMock.onGet(
+        StudioApiService.getProctoredExamSettingsUrl(defaultProps.courseId),
+      ).reply(500);
+
+      await act(async () => render(intlWrapper(<IntlProctoredExamSettings {...defaultProps} />)));
+      const connectionError = screen.getByTestId('connectionErrorAlert');
+      expect(connectionError.textContent).toEqual(
+        expect.stringContaining('We encountered a technical error when loading this page.'),
+      );
+    });
+
+    it('Show connection error message when we suffer edx-exams server side error', async () => {
+      axiosMock.onGet(
+        `${ExamsApiService.getExamsBaseUrl()}/api/v1/providers`,
+      ).reply(500);
+
+      await act(async () => render(intlWrapper(<IntlProctoredExamSettings {...defaultProps} />)));
+      const connectionError = screen.getByTestId('connectionErrorAlert');
+      expect(connectionError.textContent).toEqual(
+        expect.stringContaining('We encountered a technical error when loading this page.'),
+      );
+    });
+
+    it('Show permission error message when user do not have enough permission', async () => {
+      axiosMock.onGet(
+        StudioApiService.getProctoredExamSettingsUrl(defaultProps.courseId),
+      ).reply(403);
+
+      await act(async () => render(intlWrapper(<IntlProctoredExamSettings {...defaultProps} />)));
+      const permissionError = screen.getByTestId('permissionDeniedAlert');
+      expect(permissionError.textContent).toEqual(
+        expect.stringContaining('You are not authorized to view this page'),
+      );
+    });
+  });
+
+  describe('Save settings', () => {
+    beforeEach(async () => {
+      axiosMock.onPost(
+        StudioApiService.getProctoredExamSettingsUrl(defaultProps.courseId),
+      ).reply(200, 'success');
+      axiosMock.onPatch(
+        `${ExamsApiService.getExamsBaseUrl()}/api/v1/configs/course_id/${defaultProps.courseId}`,
+      ).reply(200, 'success');
+    });
+
+    it('Disable button while submitting', async () => {
+      await act(async () => render(intlWrapper(<IntlProctoredExamSettings {...defaultProps} />)));
+      let submitButton = screen.getByTestId('submissionButton');
+      expect(screen.queryByTestId('saveInProgress')).toBeFalsy();
+      fireEvent.click(submitButton);
+
+      submitButton = screen.getByTestId('submissionButton');
+      expect(submitButton).toHaveAttribute('disabled');
+    });
+
+    it('Makes API call successfully with proctoring_escalation_email if proctortrack', async () => {
+      await act(async () => render(intlWrapper(<IntlProctoredExamSettings {...defaultProps} />)));
+      // Make a change to the provider to proctortrack and set the email
+      const selectElement = screen.getByDisplayValue('mockproc');
+      fireEvent.change(selectElement, { target: { value: 'proctortrack' } });
+      const escalationEmail = screen.getByTestId('escalationEmail');
+      expect(escalationEmail.value).toEqual('test@example.com');
+      fireEvent.change(escalationEmail, { target: { value: 'proctortrack@example.com' } });
+      expect(escalationEmail.value).toEqual('proctortrack@example.com');
+      const submitButton = screen.getByTestId('submissionButton');
+      fireEvent.click(submitButton);
+      expect(axiosMock.history.post.length).toBe(1);
+      expect(JSON.parse(axiosMock.history.post[0].data)).toEqual({
+        proctored_exam_settings: {
+          enable_proctored_exams: true,
+          allow_proctoring_opt_out: false,
+          proctoring_provider: 'proctortrack',
+          proctoring_escalation_email: 'proctortrack@example.com',
+          create_zendesk_tickets: false,
+        },
+      });
+
+      await waitFor(() => {
+        const errorAlert = screen.getByTestId('saveSuccess');
+        expect(errorAlert.textContent).toEqual(
+          expect.stringContaining('Proctored exam settings saved successfully.'),
+        );
+        expect(document.activeElement).toEqual(errorAlert);
+      });
+    });
+
+    it('Makes API call successfully without proctoring_escalation_email if not proctortrack', async () => {
+      await act(async () => render(intlWrapper(<IntlProctoredExamSettings {...defaultProps} />)));
+
+      // make sure we have not selected proctortrack as the proctoring provider
+      expect(screen.getByDisplayValue('mockproc')).toBeDefined();
+
+      const submitButton = screen.getByTestId('submissionButton');
+      fireEvent.click(submitButton);
+      expect(axiosMock.history.post.length).toBe(1);
+      expect(JSON.parse(axiosMock.history.post[0].data)).toEqual({
+        proctored_exam_settings: {
+          enable_proctored_exams: true,
+          allow_proctoring_opt_out: false,
+          proctoring_provider: 'mockproc',
+          create_zendesk_tickets: true,
+        },
+      });
+
+      await waitFor(() => {
+        const errorAlert = screen.getByTestId('saveSuccess');
+        expect(errorAlert.textContent).toEqual(
+          expect.stringContaining('Proctored exam settings saved successfully.'),
+        );
+        expect(document.activeElement).toEqual(errorAlert);
+      });
+    });
+
+    it('Successfully updates exam configuration and studio provider is set to "lti_external" for lti providers', async () => {
+      await act(async () => render(intlWrapper(<IntlProctoredExamSettings {...defaultProps} />)));
+      // Make a change to the provider to test_lti and set the email
+      const selectElement = screen.getByDisplayValue('mockproc');
+      fireEvent.change(selectElement, { target: { value: 'test_lti' } });
+
+      const escalationEmail = screen.getByTestId('escalationEmail');
+      expect(escalationEmail.value).toEqual('test@example.com');
+      fireEvent.change(escalationEmail, { target: { value: 'test_lti@example.com' } });
+      expect(escalationEmail.value).toEqual('test_lti@example.com');
+
+      const submitButton = screen.getByTestId('submissionButton');
+      fireEvent.click(submitButton);
+
+      // update exam service config
+      expect(axiosMock.history.patch.length).toBe(1);
+      expect(JSON.parse(axiosMock.history.patch[0].data)).toEqual({
+        provider: 'test_lti',
+        escalation_email: 'test_lti@example.com',
+      });
+
+      // update studio settings
+      expect(axiosMock.history.post.length).toBe(1);
+      expect(JSON.parse(axiosMock.history.post[0].data)).toEqual({
+        proctored_exam_settings: {
+          enable_proctored_exams: true,
+          allow_proctoring_opt_out: false,
+          proctoring_provider: 'lti_external',
+          create_zendesk_tickets: true,
+        },
+      });
+
+      await waitFor(() => {
+        const errorAlert = screen.getByTestId('saveSuccess');
+        expect(errorAlert.textContent).toEqual(
+          expect.stringContaining('Proctored exam settings saved successfully.'),
+        );
+        expect(document.activeElement).toEqual(errorAlert);
+      });
+    });
+
+    it('Sets exam service provider to null if a non-lti provider is selected', async () => {
+      await act(async () => render(intlWrapper(<IntlProctoredExamSettings {...defaultProps} />)));
+      const submitButton = screen.getByTestId('submissionButton');
+      fireEvent.click(submitButton);
+      // update exam service config
+      expect(axiosMock.history.patch.length).toBe(1);
+      expect(JSON.parse(axiosMock.history.patch[0].data)).toEqual({
+        provider: null,
+        escalation_email: null,
+      });
+      expect(axiosMock.history.patch.length).toBe(1);
+      expect(axiosMock.history.post.length).toBe(1);
+      expect(JSON.parse(axiosMock.history.post[0].data)).toEqual({
+        proctored_exam_settings: {
+          enable_proctored_exams: true,
+          allow_proctoring_opt_out: false,
+          proctoring_provider: 'mockproc',
+          create_zendesk_tickets: true,
+        },
+      });
+
+      await waitFor(() => {
+        const errorAlert = screen.getByTestId('saveSuccess');
+        expect(errorAlert.textContent).toEqual(
+          expect.stringContaining('Proctored exam settings saved successfully.'),
+        );
+        expect(document.activeElement).toEqual(errorAlert);
+      });
+    });
+
+    it('Does not update exam service if lti is not enabled in studio', async () => {
+      axiosMock.onGet(
+        StudioApiService.getProctoredExamSettingsUrl(defaultProps.courseId),
+      ).reply(200, {
+        proctored_exam_settings: {
+          enable_proctored_exams: true,
+          allow_proctoring_opt_out: false,
+          proctoring_provider: 'mockproc',
+          proctoring_escalation_email: 'test@example.com',
+          create_zendesk_tickets: true,
+        },
+        available_proctoring_providers: ['software_secure', 'proctortrack', 'mockproc'],
+        course_start_date: '2070-01-01T00:00:00Z',
+      });
+
+      await act(async () => render(intlWrapper(<IntlProctoredExamSettings {...defaultProps} />)));
+      const submitButton = screen.getByTestId('submissionButton');
+      fireEvent.click(submitButton);
+      // does not update exam service config
+      expect(axiosMock.history.patch.length).toBe(0);
+      // does update studio
+      expect(axiosMock.history.post.length).toBe(1);
+      expect(JSON.parse(axiosMock.history.post[0].data)).toEqual({
+        proctored_exam_settings: {
+          enable_proctored_exams: true,
+          allow_proctoring_opt_out: false,
+          proctoring_provider: 'mockproc',
+          create_zendesk_tickets: true,
+        },
+      });
+
+      await waitFor(() => {
+        const errorAlert = screen.getByTestId('saveSuccess');
+        expect(errorAlert.textContent).toEqual(
+          expect.stringContaining('Proctored exam settings saved successfully.'),
+        );
+        expect(document.activeElement).toEqual(errorAlert);
+      });
+    });
+
+    it('Makes studio API call generated error', async () => {
+      axiosMock.onPost(
+        StudioApiService.getProctoredExamSettingsUrl(defaultProps.courseId),
+      ).reply(500);
+
+      await act(async () => render(intlWrapper(<IntlProctoredExamSettings {...defaultProps} />)));
+      const submitButton = screen.getByTestId('submissionButton');
+      fireEvent.click(submitButton);
+      expect(axiosMock.history.post.length).toBe(1);
+      await waitFor(() => {
+        const errorAlert = screen.getByTestId('saveError');
+        expect(errorAlert.textContent).toEqual(
+          expect.stringContaining('We encountered a technical error while trying to save proctored exam settings'),
+        );
+        expect(document.activeElement).toEqual(errorAlert);
+      });
+    });
+
+    it('Makes exams API call generated error', async () => {
+      axiosMock.onPatch(
+        `${ExamsApiService.getExamsBaseUrl()}/api/v1/configs/course_id/${defaultProps.courseId}`,
+      ).reply(500, 'error');
+
+      await act(async () => render(intlWrapper(<IntlProctoredExamSettings {...defaultProps} />)));
+      const submitButton = screen.getByTestId('submissionButton');
+      fireEvent.click(submitButton);
+      expect(axiosMock.history.post.length).toBe(1);
+      await waitFor(() => {
+        const errorAlert = screen.getByTestId('saveError');
+        expect(errorAlert.textContent).toEqual(
+          expect.stringContaining('We encountered a technical error while trying to save proctored exam settings'),
+        );
+        expect(document.activeElement).toEqual(errorAlert);
+      });
+    });
+
+    test('Exams API permission error', async () => {
+      axiosMock.onPatch(
+        `${ExamsApiService.getExamsBaseUrl()}/api/v1/configs/course_id/${defaultProps.courseId}`,
+      ).reply(403, 'error');
+
+      await act(async () => render(intlWrapper(<IntlProctoredExamSettings {...defaultProps} />)));
+      const submitButton = screen.getByTestId('submissionButton');
+      fireEvent.click(submitButton);
+      expect(axiosMock.history.post.length).toBe(1);
+      await waitFor(() => {
+        const errorAlert = screen.getByTestId('saveError');
+        expect(errorAlert.textContent).toEqual(
+          expect.stringContaining('You do not have permission to edit proctored exam settings for this course'),
+        );
+        expect(document.activeElement).toEqual(errorAlert);
+      });
+    });
+
+    it('Manages focus correctly after different save statuses', async () => {
+      // first make a call that will cause a save error
+      axiosMock.onPost(
+        StudioApiService.getProctoredExamSettingsUrl(defaultProps.courseId),
+      ).reply(500);
+
+      await act(async () => render(intlWrapper(<IntlProctoredExamSettings {...defaultProps} />)));
+      const submitButton = screen.getByTestId('submissionButton');
+      fireEvent.click(submitButton);
+      expect(axiosMock.history.post.length).toBe(1);
+      await waitFor(() => {
+        const errorAlert = screen.getByTestId('saveError');
+        expect(errorAlert.textContent).toEqual(
+          expect.stringContaining('We encountered a technical error while trying to save proctored exam settings'),
+        );
+        expect(document.activeElement).toEqual(errorAlert);
+      });
+
+      // now make a call that will allow for a successful save
+      axiosMock.onPost(
+        StudioApiService.getProctoredExamSettingsUrl(defaultProps.courseId),
+      ).reply(200, 'success');
+      fireEvent.click(submitButton);
+
+      expect(axiosMock.history.post.length).toBe(2);
+      await waitFor(() => {
+        const successAlert = screen.getByTestId('saveSuccess');
+        expect(successAlert.textContent).toEqual(
+          expect.stringContaining('Proctored exam settings saved successfully.'),
+        );
+        expect(document.activeElement).toEqual(successAlert);
+      });
+    });
+
+    it('Include Zendesk ticket in post request if user is not an admin', async () => {
+      // use non-admin user for test
+      const isAdmin = false;
+      setupApp(isAdmin);
+
+      await act(async () => render(intlWrapper(<IntlProctoredExamSettings {...defaultProps} />)));
+      // Make a change to the proctoring provider
+      const selectElement = screen.getByDisplayValue('mockproc');
+      fireEvent.change(selectElement, { target: { value: 'proctortrack' } });
+      const submitButton = screen.getByTestId('submissionButton');
+      fireEvent.click(submitButton);
+      expect(axiosMock.history.post.length).toBe(1);
+      expect(JSON.parse(axiosMock.history.post[0].data)).toEqual({
+        proctored_exam_settings: {
+          enable_proctored_exams: true,
+          proctoring_provider: 'proctortrack',
+          proctoring_escalation_email: 'test@example.com',
+          create_zendesk_tickets: false,
+        },
+      });
+    });
+  });
+});
diff --git a/plugins/course-apps/proctoring/messages.js b/plugins/course-apps/proctoring/messages.js
new file mode 100644
index 0000000000..82b147fc03
--- /dev/null
+++ b/plugins/course-apps/proctoring/messages.js
@@ -0,0 +1,126 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  'authoring.proctoring.alert.error': {
+    id: 'authoring.proctoring.alert.error',
+    defaultMessage: 'We encountered a technical error while trying to save proctored exam settings. This might be a temporary issue, so please try again in a few minutes. If the problem persists, please go to the {support_link} for help.',
+    description: 'Alert message for proctoring settings save error.',
+  },
+  'authoring.proctoring.alert.forbidden': {
+    id: 'authoring.proctoring.alert.forbidden',
+    defaultMessage: 'You do not have permission to edit proctored exam settings for this course. If you are a course team member and this problem persists, please go to the {support_link} for help.',
+    description: 'Alert message for proctoring settings permission error.',
+  },
+  'authoring.proctoring.no': {
+    id: 'authoring.proctoring.no',
+    defaultMessage: 'No',
+    description: '"No" option for yes/no radio button set',
+  },
+  'authoring.proctoring.yes': {
+    id: 'authoring.proctoring.yes',
+    defaultMessage: 'Yes',
+    description: '"Yes" option for proctored exam settings',
+  },
+  'authoring.proctoring.support.text': {
+    id: 'authoring.proctoring.support.text',
+    defaultMessage: 'Support Page',
+    description: 'Text linking to the support page.',
+  },
+  'authoring.proctoring.enableproctoredexams.label': {
+    id: 'authoring.proctoring.enableproctoredexams.label',
+    defaultMessage: 'Proctored exams',
+    description: 'Label for checkbox to enable proctored exams.',
+  },
+  'authoring.proctoring.enableproctoredexams.help': {
+    id: 'authoring.proctoring.enableproctoredexams.help',
+    defaultMessage: 'Enable and configure proctored exams in your course.',
+    description: 'Help text for checkbox to enable proctored exams.',
+  },
+  'authoring.proctoring.enabled': {
+    id: 'authoring.proctoring.enabled',
+    defaultMessage: 'Enabled',
+    description: 'Text describing that the feature is enabled.',
+  },
+  'authoring.proctoring.learn.more': {
+    id: 'authoring.proctoring.learn.more',
+    defaultMessage: 'Learn more about proctoring',
+    description: 'Link to learn more about the proctoring feature.',
+  },
+  'authoring.proctoring.provider.label': {
+    id: 'authoring.proctoring.provider.label',
+    defaultMessage: 'Proctoring provider',
+    description: 'Label for proctoring provider dropdown selection.',
+  },
+  'authoring.proctoring.provider.help': {
+    id: 'authoring.proctoring.provider.help',
+    defaultMessage: 'Select the proctoring provider you want to use for this course run.',
+    description: 'Help text for selecting a proctoring provider.',
+  },
+  'authoring.proctoring.provider.help.aftercoursestart': {
+    id: 'authoring.proctoring.provider.help.aftercoursestart',
+    defaultMessage: 'Proctoring provider cannot be modified after course start date.',
+    description: 'Help text notifying the user that the provider cannot be changed for a course that has already begun.',
+  },
+  'authoring.proctoring.escalationemail.label': {
+    id: 'authoring.proctoring.escalationemail.label',
+    defaultMessage: 'Escalation email',
+    description: 'Label for escalation email text field',
+  },
+  'authoring.proctoring.escalationemail.help': {
+    id: 'authoring.proctoring.escalationemail.help',
+    defaultMessage: 'Provide an email address to be contacted by the support team for escalations (e.g. appeals, delayed reviews).',
+    description: 'Help text explaining escalation email field.',
+  },
+  'authoring.proctoring.escalationemail.error.blank': {
+    id: 'authoring.proctoring.escalationemail.error.blank',
+    defaultMessage: 'The Escalation Email field cannot be empty if {proctoringProviderName} is the selected provider.',
+    description: 'Error message for missing required email field.',
+  },
+  'authoring.proctoring.escalationemail.error.invalid': {
+    id: 'authoring.proctoring.escalationemail.error.invalid',
+    defaultMessage: 'The Escalation Email field is in the wrong format and is not valid.',
+    description: 'Error message for a invalid email format.',
+  },
+  'authoring.proctoring.allowoptout.label': {
+    id: 'authoring.proctoring.allowoptout.label',
+    defaultMessage: 'Allow learners to opt out of proctoring on proctored exams',
+    description: 'Label for radio selection allowing proctored exam opt out',
+  },
+  'authoring.proctoring.createzendesk.label': {
+    id: 'authoring.proctoring.createzendesk.label',
+    defaultMessage: 'Create Zendesk tickets for suspicious attempts',
+    description: 'Label for Zendesk ticket creation radio select.',
+  },
+  'authoring.proctoring.error.single': {
+    id: 'authoring.proctoring.error.single',
+    defaultMessage: 'There is 1 error in this form.',
+    description: 'Error alert for one and only one error in the form.',
+  },
+  'authoring.proctoring.error.multiple': {
+    id: 'authoring.proctoring.escalationemail.error.multiple',
+    defaultMessage: 'There are {numOfErrors} errors in this form.',
+    description: 'Error alert for multiple errors in the form.',
+  },
+  'authoring.proctoring.save': {
+    id: 'authoring.proctoring.save',
+    defaultMessage: 'Save',
+    description: 'Button to save proctoring settings.',
+  },
+  'authoring.proctoring.saving': {
+    id: 'authoring.proctoring.saving',
+    defaultMessage: 'Saving...',
+    description: 'Proctoring settings are in the process of saving.',
+  },
+  'authoring.proctoring.cancel': {
+    id: 'authoring.proctoring.cancel',
+    defaultMessage: 'Cancel',
+    description: 'Button to cancel edits to proctoring settings.',
+  },
+  'authoring.proctoring.studio.link.text': {
+    id: 'authoring.proctoring.studio.link.text',
+    defaultMessage: 'Go back to your course in Studio',
+    description: 'Link to go back to the course Studio page.',
+  },
+});
+
+export default messages;
diff --git a/plugins/course-apps/proctoring/package.json b/plugins/course-apps/proctoring/package.json
new file mode 100644
index 0000000000..55e973ed20
--- /dev/null
+++ b/plugins/course-apps/proctoring/package.json
@@ -0,0 +1,20 @@
+{
+    "name": "@openedx-plugins/course-app-proctoring",
+    "version": "0.1.0",
+    "description": "Proctoring configuration for courses using it",
+    "peerDependencies": {
+        "@edx/frontend-app-authoring": "*",
+        "@edx/frontend-platform": "*",
+        "@openedx/paragon": "*",
+        "classnames": "*",
+        "email-validator": "*",
+        "react": "*",
+        "prop-types": "*",
+        "moment": "*"
+    },
+    "peerDependenciesMeta": {
+        "@edx/frontend-app-authoring": {
+            "optional": true
+        }
+    }
+}
diff --git a/plugins/course-apps/progress/Settings.jsx b/plugins/course-apps/progress/Settings.jsx
new file mode 100644
index 0000000000..248ae4abb4
--- /dev/null
+++ b/plugins/course-apps/progress/Settings.jsx
@@ -0,0 +1,55 @@
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import PropTypes from 'prop-types';
+import React from 'react';
+import * as Yup from 'yup';
+import { getConfig } from '@edx/frontend-platform';
+import FormSwitchGroup from 'CourseAuthoring/generic/FormSwitchGroup';
+import { useAppSetting } from 'CourseAuthoring/utils';
+import AppSettingsModal from 'CourseAuthoring/pages-and-resources/app-settings-modal/AppSettingsModal';
+import messages from './messages';
+
+const ProgressSettings = ({ intl, onClose }) => {
+  const [disableProgressGraph, saveSetting] = useAppSetting('disableProgressGraph');
+  const showProgressGraphSetting = getConfig().ENABLE_PROGRESS_GRAPH_SETTINGS.toString().toLowerCase() === 'true';
+
+  const handleSettingsSave = async (values) => {
+    if (showProgressGraphSetting) { await saveSetting(!values.enableProgressGraph); }
+  };
+
+  return (
+    <AppSettingsModal
+      appId="progress"
+      title={intl.formatMessage(messages.heading)}
+      enableAppHelp={intl.formatMessage(messages.enableProgressHelp)}
+      enableAppLabel={intl.formatMessage(messages.enableProgressLabel)}
+      learnMoreText={intl.formatMessage(messages.enableProgressLink)}
+      onClose={onClose}
+      initialValues={{ enableProgressGraph: !disableProgressGraph }}
+      validationSchema={{ enableProgressGraph: Yup.boolean() }}
+      onSettingsSave={handleSettingsSave}
+    >
+      {
+        ({ handleChange, handleBlur, values }) => (
+          showProgressGraphSetting && (
+            <FormSwitchGroup
+              id="enable-progress-graph"
+              name="enableProgressGraph"
+              label={intl.formatMessage(messages.enableGraphLabel)}
+              helpText={intl.formatMessage(messages.enableGraphHelp)}
+              onChange={handleChange}
+              onBlur={handleBlur}
+              checked={values.enableProgressGraph}
+            />
+          )
+        )
+      }
+    </AppSettingsModal>
+  );
+};
+
+ProgressSettings.propTypes = {
+  intl: intlShape.isRequired,
+  onClose: PropTypes.func.isRequired,
+};
+
+export default injectIntl(ProgressSettings);
diff --git a/plugins/course-apps/progress/messages.js b/plugins/course-apps/progress/messages.js
new file mode 100644
index 0000000000..6bf0f6f36e
--- /dev/null
+++ b/plugins/course-apps/progress/messages.js
@@ -0,0 +1,33 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  heading: {
+    id: 'course-authoring.pages-resources.progress.heading',
+    defaultMessage: 'Configure progress',
+  },
+  enableProgressLabel: {
+    id: 'course-authoring.pages-resources.progress.enable-progress.label',
+    defaultMessage: 'Progress',
+  },
+  enableProgressHelp: {
+    id: 'course-authoring.pages-resources.progress.enable-progress.help',
+    defaultMessage: `As students work through graded assignments, scores
+        will appear under the progress tab. The progress tab contains a chart of
+        all graded assignments in the course, with a list of all assignments and
+        scores below.`,
+  },
+  enableProgressLink: {
+    id: 'course-authoring.pages-resources.progress.enable-progress.link',
+    defaultMessage: 'Learn more about progress',
+  },
+  enableGraphLabel: {
+    id: 'course-authoring.pages-resources.progress.enable-graph.label',
+    defaultMessage: 'Enable progress graph',
+  },
+  enableGraphHelp: {
+    id: 'course-authoring.pages-resources.progress.enable-graph.help',
+    defaultMessage: 'If enabled, students can view the progress graph',
+  },
+});
+
+export default messages;
diff --git a/plugins/course-apps/progress/package.json b/plugins/course-apps/progress/package.json
new file mode 100644
index 0000000000..678de578b9
--- /dev/null
+++ b/plugins/course-apps/progress/package.json
@@ -0,0 +1,18 @@
+{
+    "name": "@openedx-plugins/course-app-progress",
+    "version": "0.1.0",
+    "description": "Progress configuration for courses using it",
+    "peerDependencies": {
+        "@edx/frontend-app-authoring": "*",
+        "@edx/frontend-platform": "*",
+        "@openedx/paragon": "*",
+        "prop-types": "*",
+        "react": "*",
+        "yup": "*"
+    },
+    "peerDependenciesMeta": {
+        "@edx/frontend-app-authoring": {
+            "optional": true
+        }
+    }
+}
diff --git a/plugins/course-apps/teams/GroupEditor.jsx b/plugins/course-apps/teams/GroupEditor.jsx
new file mode 100644
index 0000000000..0e96d6ad65
--- /dev/null
+++ b/plugins/course-apps/teams/GroupEditor.jsx
@@ -0,0 +1,173 @@
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { Button, Form, TransitionReplace } from '@openedx/paragon';
+import PropTypes from 'prop-types';
+import React, { useState } from 'react';
+import { GroupTypes, TeamSizes } from 'CourseAuthoring/data/constants';
+
+import CollapsableEditor from 'CourseAuthoring/generic/CollapsableEditor';
+import FormikControl from 'CourseAuthoring/generic/FormikControl';
+import messages from './messages';
+import { isGroupTypeEnabled } from './utils';
+
+// Maps a team type to its corresponding intl message
+const TeamTypeNameMessage = {
+  [GroupTypes.OPEN]: {
+    label: messages.groupTypeOpen,
+    description: messages.groupTypeOpenDescription,
+  },
+  [GroupTypes.OPEN_MANAGED]: {
+    label: messages.groupTypeOpenManaged,
+    description: messages.groupTypeOpenManagedDescription,
+  },
+  [GroupTypes.PUBLIC_MANAGED]: {
+    label: messages.groupTypePublicManaged,
+    description: messages.groupTypePublicManagedDescription,
+  },
+  [GroupTypes.PRIVATE_MANAGED]: {
+    label: messages.groupTypePrivateManaged,
+    description: messages.groupTypePrivateManagedDescription,
+  },
+};
+
+const GroupEditor = ({
+  intl, group, onDelete, onChange, onBlur, fieldNameCommonBase, errors,
+}) => {
+  const [isDeleting, setDeleting] = useState(false);
+  const [isOpen, setOpen] = useState(group.id === null);
+  const initiateDeletion = () => setDeleting(true);
+  const cancelDeletion = () => setDeleting(false);
+
+  const handleToggle = (open) => setOpen(Boolean(errors.name || errors.maxTeamSize || errors.description) || open);
+
+  const formGroupClasses = 'mb-4 mx-2';
+
+  return (
+    <TransitionReplace>
+      {isDeleting
+        ? (
+          <div className="d-flex flex-column card rounded mb-3 px-4 py-2 p-4" key="isDeleting">
+            <h4 className="mb-3">{intl.formatMessage(messages.groupDeleteHeading)}</h4>
+            {intl.formatMessage(messages.groupDeleteBody).split('\n').map(text => <p>{text}</p>)}
+            <div className="d-flex flex-row justify-content-end">
+              <Button variant="muted" size="sm" onClick={cancelDeletion}>
+                {intl.formatMessage(messages.cancel)}
+              </Button>
+              <Button variant="outline-danger" size="sm" onClick={() => onDelete(group)}>
+                {intl.formatMessage(messages.delete)}
+              </Button>
+            </div>
+          </div>
+        )
+        : (
+          <CollapsableEditor
+            // If there is no id, this is a new team, so automatically open it
+            key="isConfiguring"
+            open={isOpen}
+            onToggle={handleToggle}
+            onDelete={initiateDeletion}
+            deleteAlt={intl.formatMessage(messages.deleteAlt)}
+            expandAlt={intl.formatMessage(messages.expandAlt)}
+            collapseAlt={intl.formatMessage(messages.collapseAlt)}
+            title={
+              isOpen
+                ? (
+                  <div className="d-flex flex-column flex-shrink-1 h4 p-0 m-0">
+                    {intl.formatMessage(messages.configureGroup)}
+                  </div>
+                ) : (
+                  <div className="d-flex flex-column flex-shrink-1 small mw-100">
+                    <div className="small text-gray-500">{intl.formatMessage(TeamTypeNameMessage[group.type ? group.type : GroupTypes.OPEN].label)} </div>
+                    <div className="h4 text-truncate my-1 font-weight-normal">{group.name}</div>
+                    <div className="small text-truncate text-muted text-gray-500">{group.description}</div>
+                  </div>
+                )
+            }
+          >
+            <FormikControl
+              name={`${fieldNameCommonBase}.name`}
+              value={group.name}
+              floatingLabel={intl.formatMessage(messages.groupFormNameLabel)}
+              help={intl.formatMessage(messages.groupFormNameHelp)}
+              className={`${formGroupClasses} mt-2.5`}
+            />
+            <FormikControl
+              name={`${fieldNameCommonBase}.description`}
+              value={group.description}
+              floatingLabel={intl.formatMessage(messages.groupFormDescriptionLabel)}
+              help={intl.formatMessage(messages.groupFormDescriptionHelp)}
+              as="textarea"
+              rows={4}
+              style={{ minHeight: '2.5rem' }}
+              className={formGroupClasses}
+            />
+            <Form.Group className={formGroupClasses}>
+              <Form.Label className="h4 my-3">
+                {intl.formatMessage(messages.groupFormTypeLabel)}
+              </Form.Label>
+              <Form.RadioSet
+                name={`${fieldNameCommonBase}.type`}
+                value={group.type}
+                onChange={onChange}
+                onBlur={onBlur}
+              >
+                {Object.values(GroupTypes).map(groupType => isGroupTypeEnabled(groupType) && (
+                  <Form.Radio
+                    key={groupType}
+                    value={groupType}
+                    description={intl.formatMessage(TeamTypeNameMessage[groupType].description)}
+                    className="my-2"
+                    // TODO: This should probably be fixed on the paragon side
+                    style={{ minWidth: '1.25rem', minHeight: '1.25rem' }}
+                  >
+                    {intl.formatMessage(TeamTypeNameMessage[groupType].label)}
+                  </Form.Radio>
+                ))}
+              </Form.RadioSet>
+            </Form.Group>
+            <FormikControl
+              type="number"
+              name={`${fieldNameCommonBase}.maxTeamSize`}
+              floatingLabel={intl.formatMessage(messages.groupFormMaxSizeLabel)}
+              value={group.maxTeamSize}
+              help={intl.formatMessage(messages.groupFormMaxSizeHelp)}
+              label={<Form.Label className="h4 pb-4">{intl.formatMessage(messages.teamSize)}</Form.Label>}
+              className="mx-2"
+              placeholder={TeamSizes.DEFAULT}
+            />
+          </CollapsableEditor>
+        )}
+    </TransitionReplace>
+  );
+};
+
+export const groupShape = PropTypes.shape({
+  id: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  description: PropTypes.string.isRequired,
+  type: PropTypes.string.isRequired,
+  maxTeamSize: PropTypes.number.isRequired,
+});
+
+GroupEditor.propTypes = {
+  intl: intlShape.isRequired,
+  fieldNameCommonBase: PropTypes.string.isRequired,
+  errors: PropTypes.shape({
+    name: PropTypes.string,
+    description: PropTypes.string,
+    maxTeamSize: PropTypes.string,
+  }),
+  group: groupShape.isRequired,
+  onDelete: PropTypes.func.isRequired,
+  onChange: PropTypes.func.isRequired,
+  onBlur: PropTypes.func.isRequired,
+};
+
+GroupEditor.defaultProps = {
+  errors: {
+    name: null,
+    description: null,
+    maxTeamSize: null,
+  },
+};
+
+export default injectIntl(GroupEditor);
diff --git a/plugins/course-apps/teams/GroupEditor.test.jsx b/plugins/course-apps/teams/GroupEditor.test.jsx
new file mode 100644
index 0000000000..e64258139f
--- /dev/null
+++ b/plugins/course-apps/teams/GroupEditor.test.jsx
@@ -0,0 +1,102 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { useFormikContext } from 'formik';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import GroupEditor from './GroupEditor';
+
+import messages from './messages';
+
+jest.mock('formik', () => ({
+  ...jest.requireActual('formik'),
+  useFormikContext: jest.fn(),
+}));
+
+describe('GroupEditor', () => {
+  const mockIntl = { formatMessage: jest.fn() };
+
+  const mockGroup = {
+    id: '1',
+    name: 'Test Group',
+    description: 'Test Group Description',
+    type: 'open',
+    maxTeamSize: 5,
+  };
+
+  const mockProps = {
+    intl: mockIntl,
+    fieldNameCommonBase: 'test',
+    group: mockGroup,
+    onDelete: jest.fn(),
+    onChange: jest.fn(),
+    onBlur: jest.fn(),
+    errors: {},
+  };
+
+  const renderComponent = (overrideProps = {}) => render(
+    <IntlProvider locale="en" messages={{}}>
+      <GroupEditor {...mockProps} {...overrideProps} />
+    </IntlProvider>,
+  );
+
+  beforeEach(() => {
+    useFormikContext.mockReturnValue({
+      touched: {},
+      errors: {},
+      handleChange: jest.fn(),
+      handleBlur: jest.fn(),
+      setFieldError: jest.fn(),
+    });
+
+    jest.clearAllMocks();
+  });
+
+  test('renders without errors', () => {
+    renderComponent();
+  });
+
+  test('renders the group name and description', () => {
+    const { getByText } = renderComponent();
+    expect(getByText('Test Group')).toBeInTheDocument();
+    expect(getByText('Test Group Description')).toBeInTheDocument();
+  });
+
+  describe('group types messages', () => {
+    test('group type open message', () => {
+      const { getByLabelText, getByText } = renderComponent();
+      const expandButton = getByLabelText('Expand group editor');
+      expect(expandButton).toBeInTheDocument();
+      fireEvent.click(expandButton);
+      expect(getByText(messages.groupTypeOpenDescription.defaultMessage)).toBeInTheDocument();
+    });
+
+    test('group type public_managed message', () => {
+      const publicManagedGroupMock = {
+        id: '2',
+        name: 'Test Group',
+        description: 'Test Group Description',
+        type: 'public_managed',
+        maxTeamSize: 5,
+      };
+      const { getByLabelText, getByText } = renderComponent({ group: publicManagedGroupMock });
+      const expandButton = getByLabelText('Expand group editor');
+      expect(expandButton).toBeInTheDocument();
+      fireEvent.click(expandButton);
+      expect(getByText(messages.groupTypePublicManagedDescription.defaultMessage)).toBeInTheDocument();
+    });
+
+    test('group type private_managed message', () => {
+      const privateManagedGroupMock = {
+        id: '3',
+        name: 'Test Group',
+        description: 'Test Group Description',
+        type: 'private_managed',
+        maxTeamSize: 5,
+      };
+      const { getByLabelText, getByText } = renderComponent({ group: privateManagedGroupMock });
+      const expandButton = getByLabelText('Expand group editor');
+      expect(expandButton).toBeInTheDocument();
+      fireEvent.click(expandButton);
+      expect(getByText(messages.groupTypePrivateManagedDescription.defaultMessage)).toBeInTheDocument();
+    });
+  });
+});
diff --git a/plugins/course-apps/teams/Settings.jsx b/plugins/course-apps/teams/Settings.jsx
new file mode 100644
index 0000000000..6f25140911
--- /dev/null
+++ b/plugins/course-apps/teams/Settings.jsx
@@ -0,0 +1,171 @@
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { Button, Form } from '@openedx/paragon';
+import { Add } from '@openedx/paragon/icons';
+
+import { FieldArray } from 'formik';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { v4 as uuid } from 'uuid';
+import * as Yup from 'yup';
+import { GroupTypes, TeamSizes } from 'CourseAuthoring/data/constants';
+import FormikControl from 'CourseAuthoring/generic/FormikControl';
+import { setupYupExtensions, useAppSetting } from 'CourseAuthoring/utils';
+import AppSettingsModal from 'CourseAuthoring/pages-and-resources/app-settings-modal/AppSettingsModal';
+import GroupEditor from './GroupEditor';
+import messages from './messages';
+
+setupYupExtensions();
+
+const TeamSettings = ({
+  intl,
+  onClose,
+}) => {
+  const [teamsConfiguration, saveSettings] = useAppSetting('teamsConfiguration');
+  const blankNewGroup = {
+    name: '',
+    description: '',
+    type: GroupTypes.OPEN,
+    maxTeamSize: null,
+    id: null,
+    key: uuid(),
+  };
+
+  const handleSettingsSave = async (values) => {
+    // For newly-added teams, fill in an id.
+    const groups = values.groups?.map(group => ({
+      id: group.id || uuid(),
+      name: group.name,
+      type: group.type,
+      description: group.description,
+      max_team_size: group.maxTeamSize,
+    }));
+    return saveSettings({
+      team_sets: groups,
+      max_team_size: values.maxTeamSize,
+      enabled: values.enabled,
+    });
+  };
+  const enableAppError = {
+    title: intl.formatMessage(messages.noGroupsErrorTitle),
+    message: intl.formatMessage(messages.noGroupsErrorMessage),
+  };
+
+  return (
+    <AppSettingsModal
+      appId="teams"
+      title={intl.formatMessage(messages.heading)}
+      enableAppHelp={intl.formatMessage(messages.enableTeamsHelp)}
+      enableAppLabel={intl.formatMessage(messages.enableTeamsLabel)}
+      learnMoreText={intl.formatMessage(messages.enableTeamsLink)}
+      onClose={onClose}
+      bodyClassName="bg-light-200"
+      // Topic is supported for backwards compatibility, the new field is team_sets:
+      // ref: https://github.com/openedx/edx-platform/blob/15461d3b6e6c0a724a7b8ed09241d970f201e5e7/openedx/core/lib/teams_config.py#L104-L108
+      initialValues={{
+        maxTeamSize: teamsConfiguration?.maxTeamSize,
+        groups: teamsConfiguration?.teamSets || teamsConfiguration?.topics,
+      }}
+      validationSchema={{
+        enabled: Yup.boolean()
+          .test(
+            'has-groups',
+            enableAppError,
+            (value, context) => (!value || context.parent.groups.length > 0),
+          ),
+        maxTeamSize: Yup.number()
+          .required(intl.formatMessage(messages.maxTeamSizeEmpty))
+          .min(TeamSizes.MIN, intl.formatMessage(messages.maxTeamSizeInvalid))
+          .max(
+            TeamSizes.MAX,
+            intl.formatMessage(messages.maxTeamSizeTooHigh, {
+              max: TeamSizes.MAX,
+            }),
+          ),
+        groups: Yup.array().of(
+          Yup.object({
+            id: Yup.string().nullable(),
+            name: Yup.string()
+              .required(intl.formatMessage(messages.groupFormNameEmpty))
+              .trim(),
+            type: Yup.string().oneOf(Object.values(GroupTypes)),
+            description: Yup.string()
+              .required(intl.formatMessage(messages.groupFormDescriptionError))
+              .trim(),
+            maxTeamSize: Yup.number()
+              .nullable()
+              .min(TeamSizes.MIN, intl.formatMessage(messages.maxTeamSizeInvalid))
+              .max(
+                TeamSizes.MAX,
+                intl.formatMessage(messages.maxTeamSizeTooHigh, {
+                  max: TeamSizes.MAX,
+                }),
+              )
+              .default(null),
+          }),
+        )
+          .when('enabled', {
+            is: true,
+            then: Yup.array().min(1),
+          })
+          .default([])
+          .uniqueProperty('name', intl.formatMessage(messages.groupFormNameExists)),
+      }}
+      onSettingsSave={handleSettingsSave}
+      configureBeforeEnable
+    >
+      {
+        ({
+          handleChange, handleBlur, values, errors,
+        }) => (
+          <>
+            <h4 className="my-3 pb-2">{intl.formatMessage(messages.teamSize)}</h4>
+            <FormikControl
+              name="maxTeamSize"
+              value={values.maxTeamSize}
+              floatingLabel={intl.formatMessage(messages.maxTeamSize)}
+              help={intl.formatMessage(messages.maxTeamSizeHelp)}
+              className="pb-1"
+              type="number"
+            />
+            <div className="bg-light-200 d-flex flex-column mx-n4 px-4 py-4 border border-top mb-n3.5">
+              <h4>{intl.formatMessage(messages.groups)}</h4>
+              <Form.Text className="mb-3">{intl.formatMessage(messages.groupsHelp)}</Form.Text>
+              <FieldArray name="groups">
+                {({ push, remove }) => (
+                  <>
+                    {values.groups?.map((group, index) => (
+                      <GroupEditor
+                        key={group.id || group.key}
+                        group={group}
+                        errors={errors.groups?.[index]}
+                        fieldNameCommonBase={`groups.${index}`}
+                        onDelete={() => remove(index)}
+                        onChange={handleChange}
+                        onBlur={handleBlur}
+                      />
+                    ))}
+                    <Button
+                      variant="plain"
+                      className="p-0 align-self-start mt-3"
+                      iconBefore={Add}
+                      onClick={() => push(blankNewGroup)}
+                    >
+                      {intl.formatMessage(messages.addGroup)}
+                    </Button>
+                  </>
+                )}
+              </FieldArray>
+            </div>
+          </>
+        )
+      }
+    </AppSettingsModal>
+  );
+};
+
+TeamSettings.propTypes = {
+  intl: intlShape.isRequired,
+  onClose: PropTypes.func.isRequired,
+};
+
+export default injectIntl(TeamSettings);
diff --git a/plugins/course-apps/teams/messages.js b/plugins/course-apps/teams/messages.js
new file mode 100644
index 0000000000..1caf514e50
--- /dev/null
+++ b/plugins/course-apps/teams/messages.js
@@ -0,0 +1,179 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  heading: {
+    id: 'authoring.pagesAndResources.teams.heading',
+    defaultMessage: 'Configure teams',
+  },
+  enableTeamsLabel: {
+    id: 'authoring.pagesAndResources.teams.enableTeams.label',
+    defaultMessage: 'Teams',
+  },
+  enableTeamsHelp: {
+    id: 'authoring.pagesAndResources.teams.enableTeams.help',
+    defaultMessage: 'Allow learners to work together on specific projects or activities.',
+  },
+  enableTeamsLink: {
+    id: 'authoring.pagesAndResources.teams.enableTeams.link',
+    defaultMessage: 'Learn more about teams',
+  },
+  teamSize: {
+    id: 'authoring.pagesAndResources.teams.teamSize.heading',
+    defaultMessage: 'Team size',
+  },
+  maxTeamSize: {
+    id: 'authoring.pagesAndResources.teams.teamSize.maxTeamSize',
+    defaultMessage: 'Max team size',
+  },
+  maxTeamSizeHelp: {
+    id: 'authoring.pagesAndResources.teams.teamSize.maxTeamSizeHelp',
+    defaultMessage: 'The maximum number of learners that can join a team',
+  },
+  maxTeamSizeEmpty: {
+    id: 'authoring.pagesAndResources.teams.teamSize.maxTeamSizeEmpty',
+    defaultMessage: 'Enter max team size',
+  },
+  maxTeamSizeInvalid: {
+    id: 'authoring.pagesAndResources.teams.teamSize.maxTeamSizeInvalid',
+    defaultMessage: 'Max team size must be a positive number larger than zero.',
+  },
+  maxTeamSizeTooHigh: {
+    id: 'authoring.pagesAndResources.teams.teamSize.maxTeamSizeTooHigh',
+    defaultMessage: 'Max team size cannot be greater than {max}',
+  },
+  groups: {
+    id: 'authoring.pagesAndResources.teams.groups.heading',
+    defaultMessage: 'Groups',
+  },
+  groupsHelp: {
+    id: 'authoring.pagesAndResources.teams.groups.help',
+    defaultMessage: 'Groups are spaces where learners can create or join teams.',
+  },
+  configureGroup: {
+    id: 'authoring.pagesAndResources.teams.configureGroup.heading',
+    defaultMessage: 'Configure group',
+  },
+  groupFormNameLabel: {
+    id: 'authoring.pagesAndResources.teams.group.name.label',
+    defaultMessage: 'Name',
+  },
+  groupFormNameHelp: {
+    id: 'authoring.pagesAndResources.teams.group.name.help',
+    defaultMessage: 'Choose a unique name for this group',
+  },
+  groupFormNameEmpty: {
+    id: 'authoring.pagesAndResources.teams.group.name.error.empty',
+    defaultMessage: 'Enter a unique name for this group',
+  },
+  groupFormNameExists: {
+    id: 'authoring.pagesAndResources.teams.group.name.error.exists',
+    defaultMessage: 'It looks like this name is already in use',
+  },
+  groupFormDescriptionLabel: {
+    id: 'authoring.pagesAndResources.teams.group.description.label',
+    defaultMessage: 'Description',
+  },
+  groupFormDescriptionHelp: {
+    id: 'authoring.pagesAndResources.teams.group.description.help',
+    defaultMessage: 'Enter details about this group',
+  },
+  groupFormDescriptionError: {
+    id: 'authoring.pagesAndResources.teams.group.description.error',
+    defaultMessage: 'Enter a description for this group',
+  },
+  groupFormTypeLabel: {
+    id: 'authoring.pagesAndResources.teams.group.type.label',
+    defaultMessage: 'Type',
+  },
+  groupFormTypeHelp: {
+    id: 'authoring.pagesAndResources.teams.group.type.help',
+    defaultMessage: 'Control who can see, create and join teams',
+  },
+  groupTypeOpen: {
+    id: 'authoring.pagesAndResources.teams.group.types.open',
+    defaultMessage: 'Open',
+  },
+  groupTypeOpenManaged: {
+    id: 'authoring.pagesAndResources.teams.group.types.open_managed',
+    defaultMessage: 'Open managed',
+  },
+  groupTypeOpenManagedDescription: {
+    id: 'authoring.pagesAndResources.teams.group.types.open_managed.description',
+    defaultMessage: 'Only course staff can create teams. Learners can see, join and leave teams.',
+  },
+  groupTypeOpenDescription: {
+    id: 'authoring.pagesAndResources.teams.group.types.open.description',
+    defaultMessage: 'Learners can create, join, leave, and see other teams',
+  },
+  groupTypePublicManaged: {
+    id: 'authoring.pagesAndResources.teams.group.types.public_managed',
+    defaultMessage: 'Public managed',
+  },
+  groupTypePublicManagedDescription: {
+    id: 'authoring.pagesAndResources.teams.group.types.public_managed.description',
+    defaultMessage: 'Only course staff can control teams and memberships. Learners can see other teams.',
+  },
+  groupTypePrivateManaged: {
+    id: 'authoring.pagesAndResources.teams.group.types.private_managed',
+    defaultMessage: 'Private managed',
+  },
+  groupTypePrivateManagedDescription: {
+    id: 'authoring.pagesAndResources.teams.group.types.private_managed.description',
+    defaultMessage: 'Only course staff can control teams, memberships, and see other teams',
+  },
+  groupFormMaxSizeLabel: {
+    id: 'authoring.pagesAndResources.teams.group.maxSize.label',
+    defaultMessage: 'Max team size (optional)',
+  },
+  groupFormMaxSizeHelp: {
+    id: 'authoring.pagesAndResources.teams.group.maxSize.help',
+    defaultMessage: 'Override the global max team size',
+  },
+  addGroup: {
+    id: 'authoring.pagesAndResources.teams.addGroup.button',
+    defaultMessage: 'Add group',
+  },
+  deleteAlt: {
+    id: 'authoring.pagesAndResources.teams.group.delete',
+    defaultMessage: 'Delete',
+  },
+  expandAlt: {
+    id: 'authoring.pagesAndResources.teams.group.expand',
+    defaultMessage: 'Expand group editor',
+  },
+  collapseAlt: {
+    id: 'authoring.pagesAndResources.teams.group.collapse',
+    defaultMessage: 'Close group editor',
+  },
+  delete: {
+    id: 'authoring.pagesAndResources.teams.deleteGroup.initiateDelete',
+    defaultMessage: 'Delete',
+  },
+  cancel: {
+    id: 'authoring.pagesAndResources.teams.deleteGroup.cancel-delete.button',
+    defaultMessage: 'Cancel',
+  },
+  groupDeleteHeading: {
+    id: 'authoring.pagesAndResources.teams.deleteGroup.heading',
+    defaultMessage: 'Delete this group?',
+  },
+  groupDeleteBody: {
+    id: 'authoring.pagesAndResources.teams.deleteGroup.body',
+    defaultMessage: `edX recommends that you do not delete groups once your course is running.
+    Your group will no longer be visible in the LMS and learners will not be able to leave teams associated with it.
+    Please delete learners from teams before deleting the associated group.`,
+    description: 'Message displayed to admins when deleting a group. Make sure to include line breaks so that the final text is rendered properly.',
+  },
+  noGroupsErrorTitle: {
+    id: 'authoring.pagesAndResources.teams.enableGroups.error.noGroupsFound.title',
+    defaultMessage: 'No groups found',
+    description: 'Title of error message displayed when a user tries to enable teams but no group is defined.',
+  },
+  noGroupsErrorMessage: {
+    id: 'authoring.pagesAndResources.teams.enableGroups.error.noGroupsFound.message',
+    defaultMessage: 'Add one or more groups to enable teams.',
+    description: 'Body of error message displayed when a user tries to enable teams but no group is defined.',
+  },
+});
+
+export default messages;
diff --git a/plugins/course-apps/teams/package.json b/plugins/course-apps/teams/package.json
new file mode 100644
index 0000000000..9b377a1763
--- /dev/null
+++ b/plugins/course-apps/teams/package.json
@@ -0,0 +1,20 @@
+{
+    "name": "@openedx-plugins/course-app-teams",
+    "version": "0.1.0",
+    "description": "Teams configuration for courses using it",
+    "peerDependencies": {
+        "@edx/frontend-app-authoring": "*",
+        "@edx/frontend-platform": "*",
+        "@openedx/paragon": "*",
+        "formik": "*",
+        "prop-types": "*",
+        "react": "*",
+        "uuid": "*",
+        "yup": "*"
+    },
+    "peerDependenciesMeta": {
+        "@edx/frontend-app-authoring": {
+            "optional": true
+        }
+    }
+}
diff --git a/plugins/course-apps/teams/utils.js b/plugins/course-apps/teams/utils.js
new file mode 100644
index 0000000000..9110d18004
--- /dev/null
+++ b/plugins/course-apps/teams/utils.js
@@ -0,0 +1,22 @@
+import { getConfig } from '@edx/frontend-platform';
+
+import { GroupTypes } from 'CourseAuthoring/data/constants';
+
+/**
+ * Check if a group type is enabled by the current configuration.
+ * This is a temporary workaround to disable the OPEN MANAGED team type until it is fully adopted.
+ * For more information, see: https://openedx.atlassian.net/wiki/spaces/COMM/pages/3885760525/Open+Managed+Group+Type
+ * @param {string} groupType - the group type to check
+ * @returns {boolean} - true if the group type is enabled
+ */
+export const isGroupTypeEnabled = (groupType) => {
+  const enabledTypesByDefault = [
+    GroupTypes.OPEN,
+    GroupTypes.PUBLIC_MANAGED,
+    GroupTypes.PRIVATE_MANAGED,
+  ];
+  const enabledTypesByConfig = {
+    [GroupTypes.OPEN_MANAGED]: getConfig().ENABLE_OPEN_MANAGED_TEAM_TYPE,
+  };
+  return enabledTypesByDefault.includes(groupType) || enabledTypesByConfig[groupType] || false;
+};
diff --git a/plugins/course-apps/teams/utils.test.js b/plugins/course-apps/teams/utils.test.js
new file mode 100644
index 0000000000..3b7324cc93
--- /dev/null
+++ b/plugins/course-apps/teams/utils.test.js
@@ -0,0 +1,39 @@
+import { getConfig } from '@edx/frontend-platform';
+import { GroupTypes } from 'CourseAuthoring/data/constants';
+import { isGroupTypeEnabled } from './utils';
+
+jest.mock('@edx/frontend-platform', () => ({ getConfig: jest.fn() }));
+
+describe('teams utils', () => {
+  describe('isGroupTypeEnabled', () => {
+    beforeEach(() => {
+      jest.clearAllMocks();
+    });
+
+    test('returns true if the group type is enabled', () => {
+      getConfig.mockReturnValue({ ENABLE_OPEN_MANAGED_TEAM_TYPE: false });
+      expect(isGroupTypeEnabled(GroupTypes.OPEN)).toBe(true);
+      expect(isGroupTypeEnabled(GroupTypes.PUBLIC_MANAGED)).toBe(true);
+      expect(isGroupTypeEnabled(GroupTypes.PRIVATE_MANAGED)).toBe(true);
+    });
+    test('returns false if the OPEN_MANAGED group is not enabled', () => {
+      getConfig.mockReturnValue({ ENABLE_OPEN_MANAGED_TEAM_TYPE: false });
+      expect(isGroupTypeEnabled(GroupTypes.OPEN_MANAGED)).toBe(false);
+    });
+
+    test('returns true if the OPEN_MANAGED group is enabled', () => {
+      getConfig.mockReturnValue({ ENABLE_OPEN_MANAGED_TEAM_TYPE: true });
+      expect(isGroupTypeEnabled(GroupTypes.OPEN_MANAGED)).toBe(true);
+    });
+
+    test('returns false if the group is invalid', () => {
+      getConfig.mockReturnValue({ ENABLE_OPEN_MANAGED_TEAM_TYPE: true });
+      expect(isGroupTypeEnabled('FOO')).toBe(false);
+    });
+
+    test('returns false if the group is null', () => {
+      getConfig.mockReturnValue({ ENABLE_OPEN_MANAGED_TEAM_TYPE: true });
+      expect(isGroupTypeEnabled(null)).toBe(false);
+    });
+  });
+});
diff --git a/plugins/course-apps/wiki/Settings.jsx b/plugins/course-apps/wiki/Settings.jsx
new file mode 100644
index 0000000000..e71b27f81b
--- /dev/null
+++ b/plugins/course-apps/wiki/Settings.jsx
@@ -0,0 +1,49 @@
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import PropTypes from 'prop-types';
+import React from 'react';
+import * as Yup from 'yup';
+
+import FormSwitchGroup from 'CourseAuthoring/generic/FormSwitchGroup';
+import { useAppSetting } from 'CourseAuthoring/utils';
+import AppSettingsModal from 'CourseAuthoring/pages-and-resources/app-settings-modal/AppSettingsModal';
+import messages from './messages';
+
+const WikiSettings = ({ intl, onClose }) => {
+  const [enablePublicWiki, saveSetting] = useAppSetting('allowPublicWikiAccess');
+  const handleSettingsSave = (values) => saveSetting(values.enablePublicWiki);
+
+  return (
+    <AppSettingsModal
+      appId="wiki"
+      title={intl.formatMessage(messages.heading)}
+      enableAppHelp={intl.formatMessage(messages.enableWikiHelp)}
+      enableAppLabel={intl.formatMessage(messages.enableWikiLabel)}
+      learnMoreText={intl.formatMessage(messages.enableWikiLink)}
+      onClose={onClose}
+      initialValues={{ enablePublicWiki }}
+      validationSchema={{ enablePublicWiki: Yup.boolean() }}
+      onSettingsSave={handleSettingsSave}
+    >
+      {
+        ({ values, handleChange, handleBlur }) => (
+          <FormSwitchGroup
+            id="enable-public-wiki"
+            name="enablePublicWiki"
+            label={intl.formatMessage(messages.enablePublicWikiLabel)}
+            helpText={intl.formatMessage(messages.enablePublicWikiHelp)}
+            onChange={handleChange}
+            onBlue={handleBlur}
+            checked={values.enablePublicWiki}
+          />
+        )
+      }
+    </AppSettingsModal>
+  );
+};
+
+WikiSettings.propTypes = {
+  intl: intlShape.isRequired,
+  onClose: PropTypes.func.isRequired,
+};
+
+export default injectIntl(WikiSettings);
diff --git a/plugins/course-apps/wiki/messages.js b/plugins/course-apps/wiki/messages.js
new file mode 100644
index 0000000000..cce298878b
--- /dev/null
+++ b/plugins/course-apps/wiki/messages.js
@@ -0,0 +1,34 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  heading: {
+    id: 'course-authoring.pages-resources.wiki.heading',
+    defaultMessage: 'Configure wiki',
+  },
+  enableWikiLabel: {
+    id: 'course-authoring.pages-resources.wiki.enable-wiki.label',
+    defaultMessage: 'Wiki',
+  },
+  enableWikiHelp: {
+    id: 'course-authoring.pages-resources.wiki.enable-wiki.help',
+    defaultMessage: `The course wiki can be set up based on the needs of your
+    course. Common uses might include sharing answers to course FAQs, sharing
+    editable course information, or providing access to learner-created
+    resources.`,
+  },
+  enableWikiLink: {
+    id: 'course-authoring.pages-resources.wiki.enable-wiki.link',
+    defaultMessage: 'Learn more about the wiki',
+  },
+  enablePublicWikiLabel: {
+    id: 'course-authoring.pages-resources.wiki.enable-public-wiki.label',
+    defaultMessage: 'Enable public wiki access',
+  },
+  enablePublicWikiHelp: {
+    id: 'course-authoring.pages-resources.wiki.enable-public-wiki.help',
+    defaultMessage: `If enabled, any registered user can view the course wiki
+    even if they are not enrolled in the course`,
+  },
+});
+
+export default messages;
diff --git a/plugins/course-apps/wiki/package.json b/plugins/course-apps/wiki/package.json
new file mode 100644
index 0000000000..b7d92a69bb
--- /dev/null
+++ b/plugins/course-apps/wiki/package.json
@@ -0,0 +1,18 @@
+{
+    "name": "@openedx-plugins/course-app-wiki",
+    "version": "0.1.0",
+    "description": "Wiki configuration for courses using it",
+    "peerDependencies": {
+        "@edx/frontend-app-authoring": "*",
+        "@edx/frontend-platform": "*",
+        "@openedx/paragon": "*",
+        "prop-types": "*",
+        "react": "*",
+        "yup": "*"
+    },
+    "peerDependenciesMeta": {
+        "@edx/frontend-app-authoring": {
+            "optional": true
+        }
+    }
+}
diff --git a/plugins/course-apps/xpert_unit_summary/README.rst b/plugins/course-apps/xpert_unit_summary/README.rst
new file mode 100644
index 0000000000..6c3c162782
--- /dev/null
+++ b/plugins/course-apps/xpert_unit_summary/README.rst
@@ -0,0 +1,4 @@
+Xpert Unit Summaries Configuration Plugin
+=========================================
+
+Install this using ``npm install plugins/course-apps/xpert_unit_summary/ --no-save``.
diff --git a/plugins/course-apps/xpert_unit_summary/Settings.jsx b/plugins/course-apps/xpert_unit_summary/Settings.jsx
new file mode 100644
index 0000000000..99825b9b72
--- /dev/null
+++ b/plugins/course-apps/xpert_unit_summary/Settings.jsx
@@ -0,0 +1,45 @@
+import React, { useCallback, useContext, useEffect } from 'react';
+import { useDispatch } from 'react-redux';
+
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { PagesAndResourcesContext } from 'CourseAuthoring/pages-and-resources/PagesAndResourcesProvider';
+import { useNavigate } from 'react-router-dom';
+
+import SettingsModal from './settings-modal/SettingsModal';
+import messages from './messages';
+
+import { fetchXpertSettings } from './data/thunks';
+
+const XpertUnitSummarySettings = ({ intl }) => {
+  const { path: pagesAndResourcesPath, courseId } = useContext(PagesAndResourcesContext);
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    dispatch(fetchXpertSettings(courseId));
+  }, [courseId]);
+
+  const handleClose = useCallback(() => {
+    navigate(pagesAndResourcesPath);
+  }, [pagesAndResourcesPath]);
+
+  return (
+    <SettingsModal
+      appId="xpert-unit-summary"
+      title={intl.formatMessage(messages.heading)}
+      enableAppHelp={intl.formatMessage(messages.enableXpertUnitSummaryHelp)}
+      helpPrivacyText={intl.formatMessage(messages.enableXpertUnitSummaryHelpPrivacyLink)}
+      enableAppLabel={intl.formatMessage(messages.enableXpertUnitSummaryLabel)}
+      learnMoreText={intl.formatMessage(messages.enableXpertUnitSummaryLink)}
+      allUnitsEnabledText={intl.formatMessage(messages.allUnitsEnabledByDefault)}
+      noUnitsEnabledText={intl.formatMessage(messages.noUnitsEnabledByDefault)}
+      onClose={handleClose}
+    />
+  );
+};
+
+XpertUnitSummarySettings.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(XpertUnitSummarySettings);
diff --git a/plugins/course-apps/xpert_unit_summary/Settings.test.jsx b/plugins/course-apps/xpert_unit_summary/Settings.test.jsx
new file mode 100644
index 0000000000..69f9ba5e9d
--- /dev/null
+++ b/plugins/course-apps/xpert_unit_summary/Settings.test.jsx
@@ -0,0 +1,281 @@
+import ReactDOM from 'react-dom';
+import React from 'react';
+import { MemoryRouter, Routes, Route } from 'react-router-dom';
+import {
+  getConfig, initializeMockApp, setConfig,
+} from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { AppProvider, PageWrap } from '@edx/frontend-platform/react';
+import {
+  queryByTestId, render, waitFor, getByText, fireEvent,
+} from '@testing-library/react';
+import MockAdapter from 'axios-mock-adapter';
+import PagesAndResourcesProvider from 'CourseAuthoring/pages-and-resources/PagesAndResourcesProvider';
+import initializeStore from 'CourseAuthoring/store';
+import { executeThunk } from 'CourseAuthoring/utils';
+
+import XpertUnitSummarySettings from './Settings';
+import * as API from './data/api';
+import * as Thunks from './data/thunks';
+
+const courseId = 'course-v1:edX+TestX+Test_Course';
+let axiosMock;
+let store;
+let container;
+
+// Modal creates a portal. Overriding ReactDOM.createPortal allows portals to be tested in jest.
+ReactDOM.createPortal = jest.fn(node => node);
+
+function renderComponent() {
+  const wrapper = render(
+    <AppProvider store={store} wrapWithRouter={false}>
+      <PagesAndResourcesProvider courseId={courseId}>
+        <MemoryRouter initialEntries={['/xpert-unit-summary/settings']}>
+          <Routes>
+            <Route
+              path="/xpert-unit-summary/settings"
+              element={<PageWrap><XpertUnitSummarySettings courseId={courseId} /></PageWrap>}
+            />
+            <Route
+              path="/"
+              element={<PageWrap><div /></PageWrap>}
+            />
+          </Routes>
+        </MemoryRouter>
+      </PagesAndResourcesProvider>
+    </AppProvider>,
+  );
+  container = wrapper.container;
+}
+
+function generateCourseLevelAPIResponse({
+  success, enabled,
+}) {
+  return {
+    response: {
+      success, enabled,
+    },
+  };
+}
+
+describe('XpertUnitSummarySettings', () => {
+  beforeEach(() => {
+    setConfig({
+      ...getConfig(),
+      BASE_URL: 'http://test.edx.org',
+      LMS_BASE_URL: 'http://lmstest.edx.org',
+      CMS_BASE_URL: 'http://cmstest.edx.org',
+      LOGIN_URL: 'http://support.edx.org/login',
+      LOGOUT_URL: 'http://support.edx.org/logout',
+      REFRESH_ACCESS_TOKEN_ENDPOINT: 'http://support.edx.org/access_token',
+      ACCESS_TOKEN_COOKIE_NAME: 'cookie',
+      CSRF_TOKEN_API_PATH: '/',
+      SUPPORT_URL: 'http://support.edx.org',
+    });
+
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+
+    store = initializeStore({
+      models: {
+        courseDetails: {
+          [courseId]: {
+            start: Date(),
+          },
+        },
+      },
+    });
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+  });
+
+  describe('with successful network connections', () => {
+    beforeEach(() => {
+      axiosMock.onGet(API.getXpertSettingsUrl(courseId))
+        .reply(200, generateCourseLevelAPIResponse({
+          success: true,
+          enabled: true,
+        }));
+
+      renderComponent();
+    });
+
+    test('Shows switch on if enabled from backend', async () => {
+      expect(container.querySelector('#enable-xpert-unit-summary-toggle').checked).toBeTruthy();
+      expect(queryByTestId(container, 'enable-badge')).toBeTruthy();
+    });
+
+    test('Shows switch on if disabled from backend', async () => {
+      axiosMock.onGet(API.getXpertSettingsUrl(courseId))
+        .reply(200, generateCourseLevelAPIResponse({
+          success: true,
+          enabled: false,
+        }));
+
+      renderComponent();
+      await waitFor(() => expect(container.querySelector('#enable-xpert-unit-summary-toggle')).toBeTruthy());
+      expect(container.querySelector('#enable-xpert-unit-summary-toggle').checked).toBeTruthy();
+      expect(queryByTestId(container, 'enable-badge')).toBeTruthy();
+    });
+
+    test('Shows enable radio selected if enabled from backend', async () => {
+      await waitFor(() => expect(container.querySelector('#enable-xpert-unit-summary-toggle')).toBeTruthy());
+      expect(queryByTestId(container, 'enable-radio').checked).toBeTruthy();
+    });
+
+    test('Shows disable radio selected if enabled from backend', async () => {
+      axiosMock.onGet(API.getXpertSettingsUrl(courseId))
+        .reply(200, generateCourseLevelAPIResponse({
+          success: true,
+          enabled: false,
+        }));
+
+      renderComponent();
+      await waitFor(() => expect(container.querySelector('#enable-xpert-unit-summary-toggle')).toBeTruthy());
+      expect(queryByTestId(container, 'disable-radio').checked).toBeTruthy();
+    });
+  });
+
+  describe('first time course configuration', () => {
+    beforeEach(() => {
+      axiosMock.onGet(API.getXpertSettingsUrl(courseId))
+        .reply(400, generateCourseLevelAPIResponse({
+          success: false,
+          enabled: undefined,
+        }));
+
+      renderComponent();
+    });
+
+    test('Does not show as enabled if configuration does not exist', async () => {
+      await waitFor(() => expect(container.querySelector('#enable-xpert-unit-summary-toggle')).toBeTruthy());
+      expect(container.querySelector('#enable-xpert-unit-summary-toggle').checked).not.toBeTruthy();
+      expect(queryByTestId(container, 'enable-badge')).not.toBeTruthy();
+    });
+  });
+
+  describe('saving configuration changes', () => {
+    beforeEach(() => {
+      axiosMock.onGet(API.getXpertSettingsUrl(courseId))
+        .reply(200, generateCourseLevelAPIResponse({
+          success: true,
+          enabled: false,
+        }));
+
+      axiosMock.onPost(API.getXpertSettingsUrl(courseId))
+        .reply(200, generateCourseLevelAPIResponse({
+          success: true,
+          enabled: true,
+        }));
+
+      renderComponent();
+    });
+
+    test('Saving configuration changes', async () => {
+      jest.spyOn(API, 'postXpertSettings');
+
+      await waitFor(() => expect(container.querySelector('#enable-xpert-unit-summary-toggle')).toBeTruthy());
+      expect(queryByTestId(container, 'disable-radio').checked).toBeTruthy();
+      fireEvent.click(queryByTestId(container, 'enable-radio'));
+      fireEvent.click(getByText(container, 'Save'));
+      await waitFor(() => expect(container.querySelector('#enable-xpert-unit-summary-toggle')).toBeTruthy());
+      expect(API.postXpertSettings).toBeCalled();
+    });
+  });
+
+  describe('testing configurable gating', () => {
+    beforeEach(async () => {
+      axiosMock.onGet(API.getXpertConfigurationStatusUrl(courseId))
+        .reply(200, generateCourseLevelAPIResponse({
+          success: true,
+          enabled: true,
+        }));
+      jest.spyOn(API, 'getXpertPluginConfigurable');
+      await executeThunk(Thunks.fetchXpertPluginConfigurable(courseId), store.dispatch);
+      renderComponent();
+    });
+
+    test('getting Xpert Plugin configurable status', () => {
+      expect(API.getXpertPluginConfigurable).toBeCalled();
+    });
+  });
+
+  describe('removing course configuration', () => {
+    beforeEach(() => {
+      axiosMock.onGet(API.getXpertSettingsUrl(courseId))
+        .reply(200, generateCourseLevelAPIResponse({
+          success: true,
+          enabled: true,
+        }));
+
+      axiosMock.onDelete(API.getXpertSettingsUrl(courseId))
+        .reply(200, generateCourseLevelAPIResponse({
+          success: true,
+          enabled: undefined,
+        }));
+
+      renderComponent();
+    });
+
+    test('Deleting course configuration', async () => {
+      jest.spyOn(API, 'deleteXpertSettings');
+
+      await waitFor(() => expect(container.querySelector('#enable-xpert-unit-summary-toggle')).toBeTruthy());
+      fireEvent.click(container.querySelector('#enable-xpert-unit-summary-toggle'));
+      fireEvent.click(getByText(container, 'Save'));
+      await waitFor(() => expect(container.querySelector('#enable-xpert-unit-summary-toggle')).toBeTruthy());
+      expect(API.deleteXpertSettings).toBeCalled();
+    });
+  });
+
+  describe('resetting course units', () => {
+    test('reset all units to be enabled', async () => {
+      axiosMock.onGet(API.getXpertSettingsUrl(courseId))
+        .reply(200, generateCourseLevelAPIResponse({
+          success: true,
+          enabled: true,
+        }));
+
+      axiosMock.onPost(API.getXpertSettingsUrl(courseId))
+        .reply(200, generateCourseLevelAPIResponse({
+          success: true,
+          enabled: true,
+        }));
+
+      renderComponent();
+
+      jest.spyOn(API, 'postXpertSettings');
+
+      await waitFor(() => expect(container.querySelector('#enable-xpert-unit-summary-toggle')).toBeTruthy());
+      fireEvent.click(queryByTestId(container, 'reset-units'));
+      expect(API.postXpertSettings).toBeCalledWith(courseId, { reset: true, enabled: true });
+    });
+
+    test('reset all units to be disabled', async () => {
+      axiosMock.onGet(API.getXpertSettingsUrl(courseId))
+        .reply(200, generateCourseLevelAPIResponse({
+          success: true,
+          enabled: false,
+        }));
+
+      axiosMock.onPost(API.getXpertSettingsUrl(courseId))
+        .reply(200, generateCourseLevelAPIResponse({
+          success: true,
+          enabled: false,
+        }));
+
+      renderComponent();
+
+      jest.spyOn(API, 'postXpertSettings');
+
+      await waitFor(() => expect(container.querySelector('#enable-xpert-unit-summary-toggle')).toBeTruthy());
+      fireEvent.click(queryByTestId(container, 'reset-units'));
+      expect(API.postXpertSettings).toBeCalledWith(courseId, { reset: true, enabled: false });
+    });
+  });
+});
diff --git a/plugins/course-apps/xpert_unit_summary/appInfo.js b/plugins/course-apps/xpert_unit_summary/appInfo.js
new file mode 100644
index 0000000000..06a7f35395
--- /dev/null
+++ b/plugins/course-apps/xpert_unit_summary/appInfo.js
@@ -0,0 +1,13 @@
+export default {
+  id: 'xpert-unit-summary',
+  enabled: false,
+  name: 'Xpert unit summaries',
+  description: 'Use generative AI to summarize course content and reinforce learning.',
+  allowedOperations: {
+    enable: true,
+    configure: true,
+  },
+  documentationLinks: {
+    learnMoreConfiguration: 'https://openai.com/',
+  },
+};
diff --git a/plugins/course-apps/xpert_unit_summary/data/api.js b/plugins/course-apps/xpert_unit_summary/data/api.js
new file mode 100644
index 0000000000..32233ac2b8
--- /dev/null
+++ b/plugins/course-apps/xpert_unit_summary/data/api.js
@@ -0,0 +1,41 @@
+import { getConfig } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+
+export function getXpertSettingsUrl(courseId) {
+  return `${getConfig().STUDIO_BASE_URL}/ai_aside/v1/${courseId}`;
+}
+
+export function getXpertConfigurationStatusUrl(courseId) {
+  return `${getConfig().STUDIO_BASE_URL}/ai_aside/v1/${courseId}/configurable`;
+}
+
+export async function getXpertSettings(courseId) {
+  const { data } = await getAuthenticatedHttpClient()
+    .get(getXpertSettingsUrl(courseId));
+
+  return data;
+}
+
+export async function postXpertSettings(courseId, state) {
+  const { data } = await getAuthenticatedHttpClient()
+    .post(getXpertSettingsUrl(courseId), {
+      enabled: state.enabled,
+      reset: state.reset,
+    });
+
+  return data;
+}
+
+export async function getXpertPluginConfigurable(courseId) {
+  const { data } = await getAuthenticatedHttpClient()
+    .get(getXpertConfigurationStatusUrl(courseId));
+
+  return data;
+}
+
+export async function deleteXpertSettings(courseId) {
+  const { data } = await getAuthenticatedHttpClient()
+    .delete(getXpertSettingsUrl(courseId));
+
+  return data;
+}
diff --git a/plugins/course-apps/xpert_unit_summary/data/thunks.js b/plugins/course-apps/xpert_unit_summary/data/thunks.js
new file mode 100644
index 0000000000..270fdce5f9
--- /dev/null
+++ b/plugins/course-apps/xpert_unit_summary/data/thunks.js
@@ -0,0 +1,113 @@
+import { updateSavingStatus, updateLoadingStatus, updateResetStatus } from 'CourseAuthoring/pages-and-resources/data/slice';
+import { RequestStatus } from 'CourseAuthoring/data/constants';
+import { addModel, updateModel } from 'CourseAuthoring/generic/model-store';
+
+import {
+  getXpertSettings, postXpertSettings, getXpertPluginConfigurable, deleteXpertSettings,
+} from './api';
+
+export function updateXpertSettings(courseId, state) {
+  return async (dispatch) => {
+    dispatch(updateSavingStatus({ status: RequestStatus.IN_PROGRESS }));
+    try {
+      const { response } = await postXpertSettings(courseId, state);
+      const { success } = response;
+      if (success) {
+        dispatch(updateModel({ modelType: 'XpertSettings', model: { id: 'xpert-unit-summary', enabled: state.enabled } }));
+        dispatch(updateSavingStatus({ status: RequestStatus.SUCCESSFUL }));
+        return true;
+      }
+      dispatch(updateSavingStatus({ status: RequestStatus.FAILED }));
+      return false;
+    } catch (error) {
+      dispatch(updateSavingStatus({ status: RequestStatus.FAILED }));
+      return false;
+    }
+  };
+}
+
+export function fetchXpertPluginConfigurable(courseId) {
+  return async (dispatch) => {
+    let enabled;
+    dispatch(updateLoadingStatus({ status: RequestStatus.PENDING }));
+    try {
+      const { response } = await getXpertPluginConfigurable(courseId);
+      enabled = response?.enabled;
+    } catch (e) {
+      enabled = undefined;
+    }
+
+    dispatch(addModel({
+      modelType: 'XpertSettings.enabled',
+      model: {
+        id: 'xpert-unit-summary',
+        enabled,
+      },
+    }));
+  };
+}
+
+export function fetchXpertSettings(courseId) {
+  return async (dispatch) => {
+    let enabled;
+    dispatch(updateLoadingStatus({ status: RequestStatus.PENDING }));
+
+    try {
+      const { response } = await getXpertSettings(courseId);
+      enabled = response?.enabled;
+    } catch (e) {
+      enabled = undefined;
+    }
+
+    dispatch(addModel({
+      modelType: 'XpertSettings',
+      model: {
+        id: 'xpert-unit-summary',
+        enabled,
+      },
+    }));
+
+    dispatch(updateLoadingStatus({ status: RequestStatus.SUCCESSFUL }));
+  };
+}
+
+export function removeXpertSettings(courseId) {
+  return async (dispatch) => {
+    dispatch(updateSavingStatus({ status: RequestStatus.PENDING }));
+
+    try {
+      const { response } = await deleteXpertSettings(courseId);
+      const { success } = response;
+      if (success) {
+        const model = { id: 'xpert-unit-summary', enabled: undefined };
+        dispatch(updateModel({ modelType: 'XpertSettings', model }));
+        dispatch(updateSavingStatus({ status: RequestStatus.SUCCESSFUL }));
+        return true;
+      }
+      dispatch(updateSavingStatus({ status: RequestStatus.FAILED }));
+      return false;
+    } catch (error) {
+      dispatch(updateSavingStatus({ status: RequestStatus.FAILED }));
+      return false;
+    }
+  };
+}
+
+export function resetXpertSettings(courseId, state) {
+  return async (dispatch) => {
+    dispatch(updateResetStatus({ status: RequestStatus.PENDING }));
+    try {
+      const { response } = await postXpertSettings(courseId, state);
+      const { success } = response;
+      if (success) {
+        dispatch(updateResetStatus({ status: RequestStatus.SUCCESSFUL }));
+        return true;
+      }
+      dispatch(updateResetStatus({ status: RequestStatus.FAILED }));
+      return false;
+    } catch (error) {
+      dispatch(updateResetStatus({ status: RequestStatus.FAILED }));
+      return false;
+    }
+  };
+}
diff --git a/plugins/course-apps/xpert_unit_summary/messages.js b/plugins/course-apps/xpert_unit_summary/messages.js
new file mode 100644
index 0000000000..f195c356dd
--- /dev/null
+++ b/plugins/course-apps/xpert_unit_summary/messages.js
@@ -0,0 +1,34 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  heading: {
+    id: 'course-authoring.pages-resources.xpert-unit-summary.heading',
+    defaultMessage: 'Configure Xpert unit summaries',
+  },
+  enableXpertUnitSummaryLabel: {
+    id: 'course-authoring.pages-resources.xpert-unit-summary.enable-xpert-unit-summary.label',
+    defaultMessage: 'Xpert unit summaries',
+  },
+  enableXpertUnitSummaryHelp: {
+    id: 'course-authoring.pages-resources.xpert-unit-summary.enable-xpert-unit-summary.help',
+    defaultMessage: 'Reinforce learning concepts by sharing text-based course content with OpenAI (via API) to display unit summaries on-demand for learners. Learners can leave feedback about the quality of the AI-generated summaries for use by edX to improve the performance of the tool.',
+  },
+  enableXpertUnitSummaryHelpPrivacyLink: {
+    id: 'course-authoring.pages-resources.xpert-unit-summary.enable-xpert-unit-summary.help.privacylink',
+    defaultMessage: 'Learn more about OpenAI API data privacy.',
+  },
+  enableXpertUnitSummaryLink: {
+    id: 'course-authoring.pages-resources.xpert-unit-summary.enable-xpert-unit-summary.link',
+    defaultMessage: 'Learn more about how OpenAI handles data',
+  },
+  allUnitsEnabledByDefault: {
+    id: 'course-authoring.pages-resources.xpert-unit-summary.all-units-enabled-by-default',
+    defaultMessage: 'All units enabled by default',
+  },
+  noUnitsEnabledByDefault: {
+    id: 'course-authoring.pages-resources.xpert-unit-summary.no-units-enabled-by-default',
+    defaultMessage: 'No units enabled by default',
+  },
+});
+
+export default messages;
diff --git a/plugins/course-apps/xpert_unit_summary/package.json b/plugins/course-apps/xpert_unit_summary/package.json
new file mode 100644
index 0000000000..26c0c7d5b9
--- /dev/null
+++ b/plugins/course-apps/xpert_unit_summary/package.json
@@ -0,0 +1,21 @@
+{
+    "name": "@openedx-plugins/course-app-xpert_unit_summary",
+    "version": "0.1.0",
+    "description": "Xpert Unit Summaries configuration for courses using it",
+    "peerDependencies": {
+        "@edx/frontend-app-authoring": "*",
+        "@edx/frontend-platform": "*",
+        "@openedx/paragon": "*",
+        "formik": "*",
+        "prop-types": "*",
+        "yup": "*",
+        "react": "*",
+        "react-redux": "*",
+        "react-router-dom": "*"
+    },
+    "peerDependenciesMeta": {
+        "@edx/frontend-app-authoring": {
+            "optional": true
+        }
+    }
+}
diff --git a/plugins/course-apps/xpert_unit_summary/settings-modal/ResetIcon.jsx b/plugins/course-apps/xpert_unit_summary/settings-modal/ResetIcon.jsx
new file mode 100644
index 0000000000..ad58059768
--- /dev/null
+++ b/plugins/course-apps/xpert_unit_summary/settings-modal/ResetIcon.jsx
@@ -0,0 +1,21 @@
+const ResetIcon = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    role="img"
+    focusable="false"
+    aria-hidden="true"
+    transform="scale(-1,1)"
+    {...props}
+  >
+    <path
+      d="M17.65 6.35A7.958 7.958 0 0 0 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08A5.99 5.99 0 0 1 12 18c-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export default ResetIcon;
diff --git a/plugins/course-apps/xpert_unit_summary/settings-modal/SettingsModal.jsx b/plugins/course-apps/xpert_unit_summary/settings-modal/SettingsModal.jsx
new file mode 100644
index 0000000000..b50ccf8e42
--- /dev/null
+++ b/plugins/course-apps/xpert_unit_summary/settings-modal/SettingsModal.jsx
@@ -0,0 +1,453 @@
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import {
+  ActionRow,
+  Alert,
+  Badge,
+  Form,
+  Icon,
+  ModalDialog,
+  OverlayTrigger,
+  StatefulButton,
+  Tooltip,
+  TransitionReplace,
+  Hyperlink,
+} from '@openedx/paragon';
+import {
+  Info, CheckCircleOutline, SpinnerSimple,
+} from '@openedx/paragon/icons';
+
+import { Formik } from 'formik';
+import PropTypes from 'prop-types';
+import React, {
+  useContext, useEffect, useRef, useState,
+} from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import * as Yup from 'yup';
+
+import { RequestStatus } from 'CourseAuthoring/data/constants';
+import ConnectionErrorAlert from 'CourseAuthoring/generic/ConnectionErrorAlert';
+import FormSwitchGroup from 'CourseAuthoring/generic/FormSwitchGroup';
+import Loading from 'CourseAuthoring/generic/Loading';
+import { useModel } from 'CourseAuthoring/generic/model-store';
+import PermissionDeniedAlert from 'CourseAuthoring/generic/PermissionDeniedAlert';
+import { useIsMobile } from 'CourseAuthoring/utils';
+import { getLoadingStatus, getSavingStatus, getResetStatus } from 'CourseAuthoring/pages-and-resources/data/selectors';
+import { updateSavingStatus, updateResetStatus } from 'CourseAuthoring/pages-and-resources/data/slice';
+import AppConfigFormDivider from 'CourseAuthoring/pages-and-resources/discussions/app-config-form/apps/shared/AppConfigFormDivider';
+import { PagesAndResourcesContext } from 'CourseAuthoring/pages-and-resources/PagesAndResourcesProvider';
+
+import { updateXpertSettings, resetXpertSettings, removeXpertSettings } from '../data/thunks';
+import messages from './messages';
+import appInfo from '../appInfo';
+import ResetIcon from './ResetIcon';
+
+import './SettingsModal.scss';
+
+const AppSettingsForm = ({
+  formikProps, children, showForm,
+}) => children && (
+  <TransitionReplace>
+    {showForm ? (
+      <React.Fragment key="app-enabled">
+        {children(formikProps)}
+      </React.Fragment>
+    ) : (
+      <React.Fragment key="app-disabled" />
+    )}
+  </TransitionReplace>
+);
+
+AppSettingsForm.propTypes = {
+  // Ignore the warning here since we're just passing along the props as-is and the child component should validate
+  // eslint-disable-next-line react/forbid-prop-types
+  formikProps: PropTypes.object.isRequired,
+  showForm: PropTypes.bool.isRequired,
+  children: PropTypes.func,
+};
+
+AppSettingsForm.defaultProps = {
+  children: null,
+};
+
+const SettingsModalBase = ({
+  intl, title, onClose, variant, isMobile, children, footer,
+}) => (
+  <ModalDialog
+    title={title}
+    isOpen
+    onClose={onClose}
+    size="lg"
+    variant={variant}
+    hasCloseButton={isMobile}
+    isFullscreenOnMobile
+  >
+    <ModalDialog.Header>
+      <ModalDialog.Title data-testid="modal-title">
+        {title}
+      </ModalDialog.Title>
+    </ModalDialog.Header>
+    <ModalDialog.Body>
+      {children}
+    </ModalDialog.Body>
+    <ModalDialog.Footer className="p-4">
+      <ActionRow>
+        <ModalDialog.CloseButton variant="tertiary">
+          {intl.formatMessage(messages.cancel)}
+        </ModalDialog.CloseButton>
+        {footer}
+      </ActionRow>
+    </ModalDialog.Footer>
+  </ModalDialog>
+);
+
+SettingsModalBase.propTypes = {
+  intl: intlShape.isRequired,
+  title: PropTypes.string.isRequired,
+  onClose: PropTypes.func.isRequired,
+  variant: PropTypes.oneOf(['default', 'dark']).isRequired,
+  isMobile: PropTypes.bool.isRequired,
+  children: PropTypes.node.isRequired,
+  footer: PropTypes.node,
+};
+
+SettingsModalBase.defaultProps = {
+  footer: null,
+};
+
+const ResetUnitsButton = ({
+  intl,
+  courseId,
+  checked,
+  visible,
+}) => {
+  const resetStatusRequestStatus = useSelector(getResetStatus);
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    if (resetStatusRequestStatus === RequestStatus.SUCCESSFUL) {
+      setTimeout(() => {
+        dispatch(updateResetStatus({ status: '' }));
+      }, 2000);
+    }
+  }, [resetStatusRequestStatus]);
+
+  const handleResetUnits = () => {
+    dispatch(resetXpertSettings(courseId, { enabled: checked === 'true', reset: true }));
+  };
+
+  const getResetButtonState = () => {
+    switch (resetStatusRequestStatus) {
+      case RequestStatus.PENDING:
+        return 'pending';
+      case RequestStatus.SUCCESSFUL:
+        return 'finish';
+      default:
+        return 'default';
+    }
+  };
+
+  if (!visible) { return null; }
+
+  const messageKey = checked === 'true' ? 'resetAllUnitsTooltipChecked' : 'resetAllUnitsTooltipUnchecked';
+
+  return (
+    <OverlayTrigger
+      placement="right"
+      overlay={(
+        <Tooltip
+          id={`tooltip-reset-${checked}`}
+          className="reset-tooltip"
+        >
+          {intl.formatMessage(messages[messageKey])}
+        </Tooltip>
+      )}
+    >
+      <StatefulButton
+        className="reset-units-button"
+        labels={{
+          default: intl.formatMessage(messages.resetAllUnits),
+          pending: '',
+          finish: intl.formatMessage(messages.reset),
+        }}
+        icons={{
+          default: <Icon src={ResetIcon} />,
+          pending: <Icon src={SpinnerSimple} className="icon-spin" />,
+          finish: <Icon src={CheckCircleOutline} />,
+        }}
+        state={getResetButtonState()}
+        onClick={handleResetUnits}
+        disabledStates={['pending', 'finish']}
+        variant="outline"
+        data-testid="reset-units"
+      />
+    </OverlayTrigger>
+  );
+};
+
+ResetUnitsButton.propTypes = {
+  intl: intlShape.isRequired,
+  courseId: PropTypes.string.isRequired,
+  checked: PropTypes.oneOf(['true', 'false']).isRequired,
+  visible: PropTypes.bool,
+};
+
+ResetUnitsButton.defaultProps = {
+  visible: false,
+};
+
+const SettingsModal = ({
+  intl,
+  appId,
+  title,
+  children,
+  configureBeforeEnable,
+  initialValues,
+  validationSchema,
+  onClose,
+  onSettingsSave,
+  enableAppLabel,
+  enableAppHelp,
+  learnMoreText,
+  helpPrivacyText,
+  enableReinitialize,
+  allUnitsEnabledText,
+  noUnitsEnabledText,
+}) => {
+  const { courseId } = useContext(PagesAndResourcesContext);
+  const loadingStatus = useSelector(getLoadingStatus);
+  const updateSettingsRequestStatus = useSelector(getSavingStatus);
+  const alertRef = useRef(null);
+  const [saveError, setSaveError] = useState(false);
+  const dispatch = useDispatch();
+  const submitButtonState = updateSettingsRequestStatus === RequestStatus.IN_PROGRESS ? 'pending' : 'default';
+  const isMobile = useIsMobile();
+  const modalVariant = isMobile ? 'dark' : 'default';
+
+  const xpertSettings = useModel('XpertSettings', appId);
+
+  useEffect(() => {
+    if (updateSettingsRequestStatus === RequestStatus.SUCCESSFUL) {
+      dispatch(updateSavingStatus({ status: '' }));
+      onClose();
+    }
+  }, [updateSettingsRequestStatus]);
+
+  const handleFormSubmit = async ({ enabled, checked, ...rest }) => {
+    let success;
+    const values = { ...rest, enabled: enabled ? checked === 'true' : undefined };
+
+    if (enabled) {
+      success = await dispatch(updateXpertSettings(courseId, values));
+    } else {
+      success = await dispatch(removeXpertSettings(courseId));
+    }
+
+    if (onSettingsSave) {
+      success = success && await onSettingsSave(values);
+    }
+    setSaveError(!success);
+    !success && alertRef?.current.scrollIntoView(); // eslint-disable-line @typescript-eslint/no-unused-expressions
+  };
+
+  const handleFormikSubmit = ({ handleSubmit, errors }) => async (event) => {
+    // If submitting the form with errors, show the alert and scroll to it.
+    await handleSubmit(event);
+    if (Object.keys(errors).length > 0) {
+      setSaveError(true);
+      alertRef?.current.scrollIntoView?.(); // eslint-disable-line no-unused-expressions
+    }
+  };
+
+  const learnMoreLink = appInfo.documentationLinks?.learnMoreConfiguration && (
+    <div className="py-1">
+      <Hyperlink
+        className="text-primary-500"
+        destination={appInfo.documentationLinks.learnMoreConfiguration}
+        target="_blank"
+        rel="noreferrer noopener"
+      >
+        {learnMoreText}
+      </Hyperlink>
+    </div>
+  );
+
+  const helpPrivacyLink = (
+    <div className="py-1">
+      <Hyperlink
+        className="text-primary-500"
+        destination="https://openai.com/api-data-privacy"
+        target="_blank"
+        rel="noreferrer noopener"
+      >
+        {helpPrivacyText}
+      </Hyperlink>
+    </div>
+  );
+
+  if (loadingStatus === RequestStatus.SUCCESSFUL) {
+    return (
+      <Formik
+        initialValues={{
+          enabled: xpertSettings?.enabled !== undefined,
+          checked: xpertSettings?.enabled?.toString() || 'true',
+          ...initialValues,
+        }}
+        validationSchema={
+          Yup.object()
+            .shape({
+              enabled: Yup.boolean(),
+              checked: Yup.string().oneOf(['true', 'false']),
+              ...validationSchema,
+            })
+        }
+        onSubmit={handleFormSubmit}
+        enableReinitialize={enableReinitialize}
+      >
+        {(formikProps) => (
+          <Form onSubmit={handleFormikSubmit(formikProps)}>
+            <SettingsModalBase
+              title={title}
+              isOpen
+              onClose={onClose}
+              variant={modalVariant}
+              isMobile={isMobile}
+              isFullscreenOnMobile
+              intl={intl}
+              footer={(
+                <StatefulButton
+                  labels={{
+                    default: intl.formatMessage(messages.save),
+                    pending: intl.formatMessage(messages.saving),
+                    complete: intl.formatMessage(messages.saved),
+                  }}
+                  state={submitButtonState}
+                  onClick={handleFormikSubmit(formikProps)}
+                  disabled={!formikProps.dirty}
+                />
+              )}
+            >
+              {saveError && (
+                <Alert variant="danger" icon={Info} ref={alertRef}>
+                  <Alert.Heading>
+                    {formikProps.errors.enabled?.title || intl.formatMessage(messages.errorSavingTitle)}
+                  </Alert.Heading>
+                  {formikProps.errors.enabled?.message || intl.formatMessage(messages.errorSavingMessage)}
+                </Alert>
+              )}
+              <FormSwitchGroup
+                id={`enable-${appId}-toggle`}
+                name="enabled"
+                onChange={formikProps.handleChange}
+                onBlur={formikProps.handleBlur}
+                checked={formikProps.values.enabled}
+                label={(
+                  <div className="d-flex align-items-center">
+                    {enableAppLabel}
+                    {formikProps.values.enabled && (
+                      <Badge className="ml-2" variant="success" data-testid="enable-badge">
+                        {intl.formatMessage(messages.enabled)}
+                      </Badge>
+                    )}
+                  </div>
+                )}
+                helpText={(
+                  <div>
+                    <p>{enableAppHelp}</p>
+                    {helpPrivacyLink}
+                    {learnMoreLink}
+                  </div>
+                )}
+              />
+              {(formikProps.values.enabled || configureBeforeEnable) && (
+                <Form.RadioSet
+                  name="checked"
+                  onChange={formikProps.handleChange}
+                  onBlur={formikProps.handleBlur}
+                  value={formikProps.values.checked}
+                >
+                  <Form.Radio
+                    className="summary-radio m-2 px-3"
+                    data-testid="enable-radio"
+                    value="true"
+                  >
+                    {allUnitsEnabledText}
+                    <ResetUnitsButton
+                      intl={intl}
+                      courseId={courseId}
+                      checked={formikProps.values.checked}
+                      visible={formikProps.values.checked === 'true'}
+                    />
+                  </Form.Radio>
+                  <Form.Radio
+                    className="summary-radio m-2 px-3"
+                    data-testid="disable-radio"
+                    value="false"
+                  >
+                    {noUnitsEnabledText}
+                    <ResetUnitsButton
+                      intl={intl}
+                      courseId={courseId}
+                      checked={formikProps.values.checked}
+                      visible={formikProps.values.checked === 'false'}
+                    />
+                  </Form.Radio>
+                </Form.RadioSet>
+              )}
+              {(formikProps.values.enabled || configureBeforeEnable) && children
+                && <AppConfigFormDivider marginAdj={{ default: 0, sm: 0 }} />}
+              <AppSettingsForm formikProps={formikProps} showForm={formikProps.values.enabled || configureBeforeEnable}>
+                {children}
+              </AppSettingsForm>
+            </SettingsModalBase>
+          </Form>
+        )}
+      </Formik>
+    );
+  }
+  return (
+    <SettingsModalBase
+      intl={intl}
+      title={title}
+      isOpen
+      onClose={onClose}
+      size="sm"
+      variant={modalVariant}
+      isMobile={isMobile}
+      isFullscreenOnMobile
+    >
+      {loadingStatus === RequestStatus.IN_PROGRESS && <Loading />}
+      {loadingStatus === RequestStatus.FAILED && <ConnectionErrorAlert />}
+      {loadingStatus === RequestStatus.DENIED && <PermissionDeniedAlert />}
+    </SettingsModalBase>
+  );
+};
+
+SettingsModal.propTypes = {
+  intl: intlShape.isRequired,
+  title: PropTypes.string.isRequired,
+  appId: PropTypes.string.isRequired,
+  children: PropTypes.func,
+  onSettingsSave: PropTypes.func,
+  initialValues: PropTypes.shape({}),
+  validationSchema: PropTypes.shape({}),
+  onClose: PropTypes.func.isRequired,
+  enableAppLabel: PropTypes.string.isRequired,
+  enableAppHelp: PropTypes.string.isRequired,
+  learnMoreText: PropTypes.string.isRequired,
+  helpPrivacyText: PropTypes.string.isRequired,
+  allUnitsEnabledText: PropTypes.string.isRequired,
+  noUnitsEnabledText: PropTypes.string.isRequired,
+  configureBeforeEnable: PropTypes.bool,
+  enableReinitialize: PropTypes.bool,
+};
+
+SettingsModal.defaultProps = {
+  children: null,
+  onSettingsSave: null,
+  initialValues: {},
+  validationSchema: {},
+  configureBeforeEnable: false,
+  enableReinitialize: false,
+};
+
+export default injectIntl(SettingsModal);
diff --git a/plugins/course-apps/xpert_unit_summary/settings-modal/SettingsModal.scss b/plugins/course-apps/xpert_unit_summary/settings-modal/SettingsModal.scss
new file mode 100644
index 0000000000..264e0c7b1a
--- /dev/null
+++ b/plugins/course-apps/xpert_unit_summary/settings-modal/SettingsModal.scss
@@ -0,0 +1,45 @@
+@import "~@edx/brand/paragon/variables";
+@import "~@openedx/paragon/scss/core/utilities-only";
+
+.summary-radio {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  border-width: $border-width;
+  border-color: $border-color;
+  border-radius: $border-radius;
+  border-style: solid;
+
+  &:has(input:checked) {
+    border-width: 3px;
+    border-color: theme-color("primary");
+  }
+
+  > div {
+    flex: 1;
+
+    > label {
+      min-height: 80px;
+      flex-wrap: wrap;
+      justify-content: space-between;
+    }
+  }
+}
+
+.reset-units-button {
+  color: $link-color;
+  border-width: $border-width;
+  border-color: $border-color;
+  border-radius: $border-radius;
+  border-style: solid;
+}
+
+.reset-tooltip {
+  .arrow::before {
+    border-right-color: #00262B;
+  }
+
+  .tooltip-inner {
+    background-color: #00262B;
+  }
+}
diff --git a/plugins/course-apps/xpert_unit_summary/settings-modal/messages.js b/plugins/course-apps/xpert_unit_summary/settings-modal/messages.js
new file mode 100644
index 0000000000..5dd2c2f4b8
--- /dev/null
+++ b/plugins/course-apps/xpert_unit_summary/settings-modal/messages.js
@@ -0,0 +1,58 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  cancel: {
+    id: 'course-authoring.pages-resources.app-settings-modal.button.cancel',
+    defaultMessage: 'Cancel',
+  },
+  save: {
+    id: 'course-authoring.pages-resources.app-settings-modal.button.save',
+    defaultMessage: 'Save',
+  },
+  saving: {
+    id: 'course-authoring.pages-resources.app-settings-modal.button.saving',
+    defaultMessage: 'Saving',
+  },
+  saved: {
+    id: 'course-authoring.pages-resources.app-settings-modal.button.saved',
+    defaultMessage: 'Saved',
+  },
+  retry: {
+    id: 'course-authoring.pages-resources.app-settings-modal.button.retry',
+    defaultMessage: 'Retry',
+  },
+  enabled: {
+    id: 'course-authoring.pages-resources.app-settings-modal.badge.enabled',
+    defaultMessage: 'Enabled',
+  },
+  disabled: {
+    id: 'course-authoring.pages-resources.app-settings-modal.badge.disabled',
+    defaultMessage: 'Disabled',
+  },
+  resetAllUnits: {
+    id: 'course-authoring.pages-resources.app-settings-modal.reset-all-units',
+    defaultMessage: 'Reset all units',
+  },
+  resetAllUnitsTooltipChecked: {
+    id: 'course-authoring.pages-resources.app-settings-modal.reset-all-units-tooltip.checked',
+    defaultMessage: 'Immediately reset any unit-level changes and checked "Enable summaries" on all units.',
+  },
+  resetAllUnitsTooltipUnchecked: {
+    id: 'course-authoring.pages-resources.app-settings-modal.reset-all-units-tooltip.unchecked',
+    defaultMessage: 'Immediately reset any unit-level changes and unchecked "Enable summaries" on all units.',
+  },
+  reset: {
+    id: 'course-authoring.pages-resources.app-settings-modal.reset',
+    defaultMessage: 'Reset',
+  },
+  errorSavingTitle: {
+    id: 'course-authoring.pages-resources.app-settings-modal.save-error.title',
+    defaultMessage: 'We couldn\'t apply your changes.',
+  },
+  errorSavingMessage: {
+    id: 'course-authoring.pages-resources.app-settings-modal.save-error.message',
+    defaultMessage: 'Please check your entries and try again.',
+  },
+});
+
+export default messages;
diff --git a/public/index.html b/public/index.html
index 8a77d75c6f..8565c8098e 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,10 +1,10 @@
 <!doctype html>
 <html lang="en-us">
   <head>
-      <title>Course Authoring | edX</title>
+      <title>Course Authoring | <%= process.env.SITE_NAME %></title>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
-      <link rel="shortcut icon" href="<%= process.env.FAVICON_URL %>" type="image/x-icon" />
+      <link rel="shortcut icon" href="<%=htmlWebpackPlugin.options.FAVICON_URL%>" type="image/x-icon" />
   </head>
   <body>
     <div id="root"></div>
diff --git a/renovate.json b/renovate.json
index 1733af4bf7..29e7a5d344 100644
--- a/renovate.json
+++ b/renovate.json
@@ -1,9 +1,24 @@
 {
   "extends": [
-    "config:base"
+    "config:base",
+    "schedule:weekly",
+    ":rebaseStalePrs",
+    ":semanticCommits",
+    ":dependencyDashboard"
   ],
+  "timezone": "America/New_York",
   "patch": {
-    "automerge": true
+    "automerge": false
   },
-  "rebaseStalePrs": true
+  "rebaseStalePrs": true,
+  "packageRules": [
+    {
+      "extends": [
+        "schedule:daily"
+      ],
+      "matchPackagePatterns": ["@edx", "@openedx"],
+      "matchUpdateTypes": ["minor", "patch"],
+      "automerge": false
+    }
+  ]
 }
diff --git a/src/CourseAuthoringPage.jsx b/src/CourseAuthoringPage.jsx
index 17a076259f..6b8e968277 100644
--- a/src/CourseAuthoringPage.jsx
+++ b/src/CourseAuthoringPage.jsx
@@ -1,59 +1,75 @@
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
-import Footer from '@edx/frontend-component-footer';
 import { useDispatch, useSelector } from 'react-redux';
 
-import Header from './studio-header/Header';
-import { fetchCourseDetail } from './data/thunks';
+import {
+  useLocation,
+} from 'react-router-dom';
+import { StudioFooter } from '@edx/frontend-component-footer';
+import Header from './header';
+import { fetchCourseDetail, fetchWaffleFlags } from './data/thunks';
 import { useModel } from './generic/model-store';
+import NotFoundAlert from './generic/NotFoundAlert';
 import PermissionDeniedAlert from './generic/PermissionDeniedAlert';
-import { getCourseAppsApiStatus, getLoadingStatus } from './pages-and-resources/data/selectors';
+import { fetchStudioHomeData } from './studio-home/data/thunks';
+import { getCourseAppsApiStatus } from './pages-and-resources/data/selectors';
 import { RequestStatus } from './data/constants';
 import Loading from './generic/Loading';
 
-export default function CourseAuthoringPage({ courseId, children }) {
+const CourseAuthoringPage = ({ courseId, children }) => {
   const dispatch = useDispatch();
 
   useEffect(() => {
     dispatch(fetchCourseDetail(courseId));
+    dispatch(fetchWaffleFlags(courseId));
   }, [courseId]);
 
+  useEffect(() => {
+    dispatch(fetchStudioHomeData());
+  }, []);
+
   const courseDetail = useModel('courseDetails', courseId);
 
   const courseNumber = courseDetail ? courseDetail.number : null;
   const courseOrg = courseDetail ? courseDetail.org : null;
   const courseTitle = courseDetail ? courseDetail.name : courseId;
   const courseAppsApiStatus = useSelector(getCourseAppsApiStatus);
-  const inProgress = useSelector(getLoadingStatus) === RequestStatus.IN_PROGRESS;
+  const courseDetailStatus = useSelector(state => state.courseDetail.status);
+  const inProgress = courseDetailStatus === RequestStatus.IN_PROGRESS;
+  const { pathname } = useLocation();
+  const isEditor = pathname.includes('/editor');
+
+  if (courseDetailStatus === RequestStatus.NOT_FOUND && !isEditor) {
+    return (
+      <NotFoundAlert />
+    );
+  }
   if (courseAppsApiStatus === RequestStatus.DENIED) {
     return (
       <PermissionDeniedAlert />
     );
   }
-
-  const AppHeader = () => (
-    <Header
-      courseNumber={courseNumber}
-      courseOrg={courseOrg}
-      courseTitle={courseTitle}
-      courseId={courseId}
-    />
-  );
-
-  const AppFooter = () => (
-    <div className="mt-6">
-      <Footer />
-    </div>
-  );
-
   return (
-    <div className="bg-light-200">
-      {inProgress ? <Loading /> : <AppHeader />}
+    <div>
+      {/* While V2 Editors are temporarily served from their own pages
+      using url pattern containing /editor/,
+      we shouldn't have the header and footer on these pages.
+      This functionality will be removed in TNL-9591 */}
+      {inProgress ? !isEditor && <Loading />
+        : (!isEditor && (
+          <Header
+            number={courseNumber}
+            org={courseOrg}
+            title={courseTitle}
+            contextId={courseId}
+          />
+        )
+        )}
       {children}
-      {!inProgress && <AppFooter />}
+      {!inProgress && !isEditor && <StudioFooter />}
     </div>
   );
-}
+};
 
 CourseAuthoringPage.propTypes = {
   children: PropTypes.node,
@@ -63,3 +79,5 @@ CourseAuthoringPage.propTypes = {
 CourseAuthoringPage.defaultProps = {
   children: null,
 };
+
+export default CourseAuthoringPage;
diff --git a/src/CourseAuthoringPage.test.jsx b/src/CourseAuthoringPage.test.jsx
index d3953d9e12..7640dc772d 100644
--- a/src/CourseAuthoringPage.test.jsx
+++ b/src/CourseAuthoringPage.test.jsx
@@ -1,63 +1,105 @@
-import React from 'react';
+import { getConfig } from '@edx/frontend-platform';
 
-import { queryByTestId, render } from '@testing-library/react';
-
-import { getConfig, initializeMockApp } from '@edx/frontend-platform';
-import MockAdapter from 'axios-mock-adapter';
-import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
-import { AppProvider } from '@edx/frontend-platform/react';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
-import initializeStore from './store';
 import CourseAuthoringPage from './CourseAuthoringPage';
 import PagesAndResources from './pages-and-resources/PagesAndResources';
 import { executeThunk } from './utils';
 import { fetchCourseApps } from './pages-and-resources/data/thunks';
+import { fetchCourseDetail, fetchWaffleFlags } from './data/thunks';
+import { getApiWaffleFlagsUrl } from './data/api';
+import { initializeMocks, render } from './testUtils';
 
 const courseId = 'course-v1:edX+TestX+Test_Course';
+let mockPathname = '/evilguy/';
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useLocation: () => ({
+    pathname: mockPathname,
+  }),
+}));
 let axiosMock;
 let store;
-let container;
-function renderComponent() {
-  const wrapper = render(
-    <AppProvider store={store}>
-      <IntlProvider locale="en">
-        <CourseAuthoringPage courseId={courseId}>
-          <PagesAndResources courseId={courseId} />
-        </CourseAuthoringPage>
-      </IntlProvider>
-    </AppProvider>
-    ,
-  );
-  container = wrapper.container;
-}
 
-const mockStore = async () => {
-  const apiBaseUrl = getConfig().STUDIO_BASE_URL;
-  const courseAppsApiUrl = `${apiBaseUrl}/api/course_apps/v1/apps`;
-  axiosMock.onGet(`${courseAppsApiUrl}/${courseId}`).reply(403, {
-    response: { status: 403 },
-  });
+beforeEach(async () => {
+  const mocks = initializeMocks();
+  store = mocks.reduxStore;
+  axiosMock = mocks.axiosMock;
+  axiosMock
+    .onGet(getApiWaffleFlagsUrl(courseId))
+    .reply(200, {});
+  await executeThunk(fetchWaffleFlags(courseId), store.dispatch);
+});
 
-  await executeThunk(fetchCourseApps(courseId), store.dispatch);
-};
-describe('DiscussionsSettings', () => {
-  beforeEach(() => {
-    initializeMockApp({
-      authenticatedUser: {
-        userId: 3,
-        username: 'abc123',
-        administrator: true,
-        roles: [],
-      },
+describe('Editor Pages Load no header', () => {
+  const mockStoreSuccess = async () => {
+    const apiBaseUrl = getConfig().STUDIO_BASE_URL;
+    const courseAppsApiUrl = `${apiBaseUrl}/api/course_apps/v1/apps`;
+    axiosMock.onGet(`${courseAppsApiUrl}/${courseId}`).reply(200, {
+      response: { status: 200 },
     });
-
-    store = initializeStore();
-    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+    await executeThunk(fetchCourseApps(courseId), store.dispatch);
+  };
+  test('renders no loading wheel on editor pages', async () => {
+    mockPathname = '/editor/';
+    await mockStoreSuccess();
+    const wrapper = render(
+      <CourseAuthoringPage courseId={courseId}>
+        <PagesAndResources courseId={courseId} />
+      </CourseAuthoringPage>
+      ,
+    );
+    expect(wrapper.queryByRole('status')).not.toBeInTheDocument();
+  });
+  test('renders loading wheel on non editor pages', async () => {
+    mockPathname = '/evilguy/';
+    await mockStoreSuccess();
+    const wrapper = render(
+      <CourseAuthoringPage courseId={courseId}>
+        <PagesAndResources courseId={courseId} />
+      </CourseAuthoringPage>
+      ,
+    );
+    expect(wrapper.queryByRole('status')).toBeInTheDocument();
   });
+});
 
-  test('renders permission error in case of 403', async () => {
-    await mockStore();
-    renderComponent();
-    expect(queryByTestId(container, 'permissionDeniedAlert')).toBeInTheDocument();
+describe('Course authoring page', () => {
+  const lmsApiBaseUrl = getConfig().LMS_BASE_URL;
+  const courseDetailApiUrl = `${lmsApiBaseUrl}/api/courses/v1/courses`;
+  const mockStoreNotFound = async () => {
+    axiosMock.onGet(
+      `${courseDetailApiUrl}/${courseId}?username=abc123`,
+    ).reply(404, {
+      response: { status: 404 },
+    });
+    await executeThunk(fetchCourseDetail(courseId), store.dispatch);
+  };
+  const mockStoreError = async () => {
+    axiosMock.onGet(
+      `${courseDetailApiUrl}/${courseId}?username=abc123`,
+    ).reply(500, {
+      response: { status: 500 },
+    });
+    await executeThunk(fetchCourseDetail(courseId), store.dispatch);
+  };
+  test('renders not found page on non-existent course key', async () => {
+    await mockStoreNotFound();
+    const wrapper = render(<CourseAuthoringPage courseId={courseId} />);
+    expect(await wrapper.findByTestId('notFoundAlert')).toBeInTheDocument();
+  });
+  test('does not render not found page on other kinds of error', async () => {
+    await mockStoreError();
+    // Currently, loading errors are not handled, so we wait for the child
+    // content to be rendered -which happens when request status is no longer
+    // IN_PROGRESS but also not NOT_FOUND or DENIED- then check that the not
+    // found alert is not present.
+    const contentTestId = 'courseAuthoringPageContent';
+    const wrapper = render(
+      <CourseAuthoringPage courseId={courseId}>
+        <div data-testid={contentTestId} />
+      </CourseAuthoringPage>
+      ,
+    );
+    expect(await wrapper.findByTestId(contentTestId)).toBeInTheDocument();
+    expect(wrapper.queryByTestId('notFoundAlert')).not.toBeInTheDocument();
   });
 });
diff --git a/src/CourseAuthoringRoutes.jsx b/src/CourseAuthoringRoutes.jsx
index 4e3d75ec11..ded2f07eae 100644
--- a/src/CourseAuthoringRoutes.jsx
+++ b/src/CourseAuthoringRoutes.jsx
@@ -1,11 +1,29 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { Switch, useRouteMatch } from 'react-router';
-import { PageRoute } from '@edx/frontend-platform/react';
-
+import {
+  Navigate, Routes, Route, useParams,
+} from 'react-router-dom';
+import { getConfig } from '@edx/frontend-platform';
+import { PageWrap } from '@edx/frontend-platform/react';
+import { Textbooks } from 'CourseAuthoring/textbooks';
 import CourseAuthoringPage from './CourseAuthoringPage';
 import { PagesAndResources } from './pages-and-resources';
-import ProctoredExamSettings from './proctored-exam-settings/ProctoredExamSettings';
+import EditorContainer from './editors/EditorContainer';
+import VideoSelectorContainer from './selectors/VideoSelectorContainer';
+import CustomPages from './custom-pages';
+import { FilesPage, VideosPage } from './files-and-videos';
+import { AdvancedSettings } from './advanced-settings';
+import { CourseOutline } from './course-outline';
+import ScheduleAndDetails from './schedule-and-details';
+import { GradingSettings } from './grading-settings';
+import CourseTeam from './course-team/CourseTeam';
+import { CourseUpdates } from './course-updates';
+import { CourseUnit, IframeProvider } from './course-unit';
+import { Certificates } from './certificates';
+import CourseExportPage from './export-page/CourseExportPage';
+import CourseImportPage from './import-page/CourseImportPage';
+import { DECODED_ROUTES } from './constants';
+import CourseChecklist from './course-checklist';
+import GroupConfigurations from './group-configurations';
 
 /**
  * As of this writing, these routes are mounted at a path prefixed with the following:
@@ -16,28 +34,105 @@ import ProctoredExamSettings from './proctored-exam-settings/ProctoredExamSettin
  *
  * /course/:courseId/course-pages
  * /course/:courseId/proctored-exam-settings
+ * /course/:courseId/editor/:blockType/:blockId
  *
  * This component and CourseAuthoringPage should maybe be combined once we no longer need to have
  * CourseAuthoringPage split out for use in LegacyProctoringRoute.  Once that route is removed, we
  * can move the Header/Footer rendering to this component and likely pull the course detail loading
  * in as well, and it'd feel a bit better-factored and the roles would feel more clear.
  */
-export default function CourseAuthoringRoutes({ courseId }) {
-  const { path } = useRouteMatch();
+const CourseAuthoringRoutes = () => {
+  const { courseId } = useParams();
+
   return (
     <CourseAuthoringPage courseId={courseId}>
-      <Switch>
-        <PageRoute path={`${path}/pages-and-resources`}>
-          <PagesAndResources courseId={courseId} />
-        </PageRoute>
-        <PageRoute path={`${path}/proctored-exam-settings`}>
-          <ProctoredExamSettings courseId={courseId} />
-        </PageRoute>
-      </Switch>
+      <Routes>
+        <Route
+          path="/"
+          element={<PageWrap><CourseOutline courseId={courseId} /></PageWrap>}
+        />
+        <Route
+          path="course_info"
+          element={<PageWrap><CourseUpdates courseId={courseId} /></PageWrap>}
+        />
+        <Route
+          path="assets"
+          element={<PageWrap><FilesPage courseId={courseId} /></PageWrap>}
+        />
+        <Route
+          path="videos"
+          element={getConfig().ENABLE_VIDEO_UPLOAD_PAGE_LINK_IN_CONTENT_DROPDOWN === 'true' ? <PageWrap><VideosPage courseId={courseId} /></PageWrap> : null}
+        />
+        <Route
+          path="pages-and-resources/*"
+          element={<PageWrap><PagesAndResources courseId={courseId} /></PageWrap>}
+        />
+        <Route
+          path="proctored-exam-settings"
+          element={<Navigate replace to={`/course/${courseId}/pages-and-resources`} />}
+        />
+        <Route
+          path="custom-pages/*"
+          element={<PageWrap><CustomPages courseId={courseId} /></PageWrap>}
+        />
+        {DECODED_ROUTES.COURSE_UNIT.map((path) => (
+          <Route
+            key={path}
+            path={path}
+            element={<PageWrap><IframeProvider><CourseUnit courseId={courseId} /></IframeProvider></PageWrap>}
+          />
+        ))}
+        <Route
+          path="editor/course-videos/:blockId"
+          element={<PageWrap><VideoSelectorContainer courseId={courseId} /></PageWrap>}
+        />
+        <Route
+          path="editor/:blockType/:blockId?"
+          element={<PageWrap><EditorContainer learningContextId={courseId} /></PageWrap>}
+        />
+        <Route
+          path="settings/details"
+          element={<PageWrap><ScheduleAndDetails courseId={courseId} /></PageWrap>}
+        />
+        <Route
+          path="settings/grading"
+          element={<PageWrap><GradingSettings courseId={courseId} /></PageWrap>}
+        />
+        <Route
+          path="course_team"
+          element={<PageWrap><CourseTeam courseId={courseId} /></PageWrap>}
+        />
+        <Route
+          path="group_configurations"
+          element={<PageWrap><GroupConfigurations courseId={courseId} /></PageWrap>}
+        />
+        <Route
+          path="settings/advanced"
+          element={<PageWrap><AdvancedSettings courseId={courseId} /></PageWrap>}
+        />
+        <Route
+          path="import"
+          element={<PageWrap><CourseImportPage courseId={courseId} /></PageWrap>}
+        />
+        <Route
+          path="export"
+          element={<PageWrap><CourseExportPage courseId={courseId} /></PageWrap>}
+        />
+        <Route
+          path="checklists"
+          element={<PageWrap><CourseChecklist courseId={courseId} /></PageWrap>}
+        />
+        <Route
+          path="certificates"
+          element={getConfig().ENABLE_CERTIFICATE_PAGE === 'true' ? <PageWrap><Certificates courseId={courseId} /></PageWrap> : null}
+        />
+        <Route
+          path="textbooks"
+          element={<PageWrap><Textbooks courseId={courseId} /></PageWrap>}
+        />
+      </Routes>
     </CourseAuthoringPage>
   );
-}
-
-CourseAuthoringRoutes.propTypes = {
-  courseId: PropTypes.string.isRequired,
 };
+
+export default CourseAuthoringRoutes;
diff --git a/src/CourseAuthoringRoutes.test.jsx b/src/CourseAuthoringRoutes.test.jsx
new file mode 100644
index 0000000000..e2233559f7
--- /dev/null
+++ b/src/CourseAuthoringRoutes.test.jsx
@@ -0,0 +1,108 @@
+import CourseAuthoringRoutes from './CourseAuthoringRoutes';
+import { executeThunk } from './utils';
+import { getApiWaffleFlagsUrl } from './data/api';
+import { fetchWaffleFlags } from './data/thunks';
+import {
+  screen, initializeMocks, render, waitFor,
+} from './testUtils';
+
+const courseId = 'course-v1:edX+TestX+Test_Course';
+const pagesAndResourcesMockText = 'Pages And Resources';
+const editorContainerMockText = 'Editor Container';
+const videoSelectorContainerMockText = 'Video Selector Container';
+const customPagesMockText = 'Custom Pages';
+let store;
+const mockComponentFn = jest.fn();
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useParams: () => ({
+    courseId,
+  }),
+}));
+
+// Mock the TinyMceWidget
+jest.mock('./editors/sharedComponents/TinyMceWidget', () => ({
+  __esModule: true, // Required to mock a default export
+  default: () => <div>Widget</div>,
+  Footer: () => <div>Footer</div>,
+  prepareEditorRef: jest.fn(() => ({
+    refReady: true,
+    setEditorRef: jest.fn().mockName('prepareEditorRef.setEditorRef'),
+  })),
+}));
+
+jest.mock('./pages-and-resources/PagesAndResources', () => (props) => {
+  mockComponentFn(props);
+  return pagesAndResourcesMockText;
+});
+jest.mock('./editors/EditorContainer', () => (props) => {
+  mockComponentFn(props);
+  return editorContainerMockText;
+});
+jest.mock('./selectors/VideoSelectorContainer', () => (props) => {
+  mockComponentFn(props);
+  return videoSelectorContainerMockText;
+});
+jest.mock('./custom-pages/CustomPages', () => (props) => {
+  mockComponentFn(props);
+  return customPagesMockText;
+});
+
+describe('<CourseAuthoringRoutes>', () => {
+  beforeEach(async () => {
+    const { axiosMock, reduxStore } = initializeMocks();
+    store = reduxStore;
+    axiosMock
+      .onGet(getApiWaffleFlagsUrl(courseId))
+      .reply(200, {});
+    await executeThunk(fetchWaffleFlags(courseId), store.dispatch);
+  });
+
+  it('renders the PagesAndResources component when the pages and resources route is active', async () => {
+    render(
+      <CourseAuthoringRoutes />,
+      { routerProps: { initialEntries: ['/pages-and-resources'] } },
+    );
+    await waitFor(() => {
+      expect(screen.getByText(pagesAndResourcesMockText)).toBeVisible();
+      expect(mockComponentFn).toHaveBeenCalledWith(
+        expect.objectContaining({
+          courseId,
+        }),
+      );
+    });
+  });
+
+  it('renders the EditorContainer component when the course editor route is active', async () => {
+    render(
+      <CourseAuthoringRoutes />,
+      { routerProps: { initialEntries: ['/editor/video/block-id'] } },
+    );
+    await waitFor(() => {
+      expect(screen.queryByText(editorContainerMockText)).toBeInTheDocument();
+      expect(screen.queryByText(pagesAndResourcesMockText)).not.toBeInTheDocument();
+      expect(mockComponentFn).toHaveBeenCalledWith(
+        expect.objectContaining({
+          learningContextId: courseId,
+        }),
+      );
+    });
+  });
+
+  it('renders the VideoSelectorContainer component when the course videos route is active', async () => {
+    render(
+      <CourseAuthoringRoutes />,
+      { routerProps: { initialEntries: ['/editor/course-videos/block-id'] } },
+    );
+    await waitFor(() => {
+      expect(screen.queryByText(videoSelectorContainerMockText)).toBeInTheDocument();
+      expect(screen.queryByText(pagesAndResourcesMockText)).not.toBeInTheDocument();
+      expect(mockComponentFn).toHaveBeenCalledWith(
+        expect.objectContaining({
+          courseId,
+        }),
+      );
+    });
+  });
+});
diff --git a/src/__mocks__/clipboardUnit.js b/src/__mocks__/clipboardUnit.js
new file mode 100644
index 0000000000..fb20bde413
--- /dev/null
+++ b/src/__mocks__/clipboardUnit.js
@@ -0,0 +1,16 @@
+export default {
+  content: {
+    id: 67,
+    userId: 3,
+    created: '2024-01-16T13:09:11.540615Z',
+    purpose: 'clipboard',
+    status: 'ready',
+    blockType: 'vertical',
+    blockTypeDisplay: 'Unit',
+    olxUrl: 'http://localhost:18010/api/content-staging/v1/staged-content/67/olx',
+    displayName: 'Introduction: Video and Sequences',
+  },
+  sourceUsageKey: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_0270f6de40fc',
+  sourceContextTitle: 'Demonstration Course',
+  sourceEditUrl: 'http://localhost:18010/container/block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_0270f6de40fc',
+};
diff --git a/src/__mocks__/clipboardXBlock.js b/src/__mocks__/clipboardXBlock.js
new file mode 100644
index 0000000000..ecaf0b50b1
--- /dev/null
+++ b/src/__mocks__/clipboardXBlock.js
@@ -0,0 +1,16 @@
+export default {
+  content: {
+    id: 69,
+    userId: 3,
+    created: '2024-01-16T13:33:21.314439Z',
+    purpose: 'clipboard',
+    status: 'ready',
+    blockType: 'html',
+    blockTypeDisplay: 'Text',
+    olxUrl: 'http://localhost:18010/api/content-staging/v1/staged-content/69/olx',
+    displayName: 'Blank HTML Page',
+  },
+  sourceUsageKey: 'block-v1:edX+DemoX+Demo_Course+type@html+block@html1',
+  sourceContextTitle: 'Demonstration Course',
+  sourceEditUrl: 'http://localhost:18010/container/block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical1',
+};
diff --git a/src/__mocks__/index.js b/src/__mocks__/index.js
new file mode 100644
index 0000000000..b3b5984d3e
--- /dev/null
+++ b/src/__mocks__/index.js
@@ -0,0 +1,2 @@
+export { default as clipboardUnit } from './clipboardUnit';
+export { default as clipboardXBlock } from './clipboardXBlock';
diff --git a/src/accessibility-page/AccessibilityBody/AccessibilityBody.jsx b/src/accessibility-page/AccessibilityBody/AccessibilityBody.jsx
new file mode 100644
index 0000000000..40da33c91c
--- /dev/null
+++ b/src/accessibility-page/AccessibilityBody/AccessibilityBody.jsx
@@ -0,0 +1,98 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { injectIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
+import { Hyperlink, MailtoLink, Stack } from '@openedx/paragon';
+
+import messages from './messages';
+
+const AccessibilityBody = ({
+  communityAccessibilityLink,
+  email,
+}) => (
+  <div className="mt-5">
+    <header>
+      <h2 className="mb-4 pb-1">
+        <FormattedMessage {...messages.a11yBodyPageHeader} />
+      </h2>
+    </header>
+    <Stack gap={2.5}>
+      <div className="small">
+        <FormattedMessage
+          {...messages.a11yBodyIntroGraph}
+          values={{
+            communityAccessibilityLink: (
+              <Hyperlink
+                destination={communityAccessibilityLink}
+                data-testid="accessibility-page-link"
+              >
+                Website Accessibility Policy
+              </Hyperlink>
+            ),
+          }}
+        />
+      </div>
+      <div className="small">
+        <FormattedMessage {...messages.a11yBodyStepsHeader} />
+      </div>
+      <ol className="small m-0">
+        <li>
+          <FormattedMessage
+            {...messages.a11yBodyEmailHeading}
+            values={{
+              emailElement: (
+                <MailtoLink
+                  to={email}
+                  data-testid="email-element"
+                >
+                  {email}
+                </MailtoLink>
+              ),
+            }}
+          />
+          <ul>
+            <li>
+              <FormattedMessage {...messages.a11yBodyNameEmail} />
+            </li>
+            <li>
+              <FormattedMessage {...messages.a11yBodyInstitution} />
+            </li>
+            <li>
+              <FormattedMessage {...messages.a11yBodyBarrier} />
+            </li>
+            <li>
+              <FormattedMessage {...messages.a11yBodyTimeConstraints} />
+            </li>
+          </ul>
+        </li>
+        <li>
+          <FormattedMessage {...messages.a11yBodyReceipt} />
+        </li>
+        <li>
+          <FormattedMessage {...messages.a11yBodyExtraInfo} />
+        </li>
+      </ol>
+      <div className="small">
+        <FormattedMessage
+          {...messages.a11yBodyA11yFeedback}
+          values={{
+            emailElement: (
+              <MailtoLink
+                to={email}
+                data-testid="email-element"
+              >
+                {email}
+              </MailtoLink>
+            ),
+          }}
+        />
+      </div>
+    </Stack>
+  </div>
+);
+
+AccessibilityBody.propTypes = {
+  communityAccessibilityLink: PropTypes.string.isRequired,
+  email: PropTypes.string.isRequired,
+};
+
+export default injectIntl(AccessibilityBody);
diff --git a/src/accessibility-page/AccessibilityBody/AccessibilityBody.test.jsx b/src/accessibility-page/AccessibilityBody/AccessibilityBody.test.jsx
new file mode 100644
index 0000000000..bcb5f3c498
--- /dev/null
+++ b/src/accessibility-page/AccessibilityBody/AccessibilityBody.test.jsx
@@ -0,0 +1,46 @@
+import {
+  render,
+  screen,
+} from '@testing-library/react';
+import { AppProvider } from '@edx/frontend-platform/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { initializeMockApp } from '@edx/frontend-platform';
+import initializeStore from '../../store';
+
+import AccessibilityBody from './index';
+
+let store;
+
+const renderComponent = () => {
+  render(
+    <IntlProvider locale="en">
+      <AppProvider store={store}>
+        <AccessibilityBody
+          communityAccessibilityLink="http://example.com"
+          email="example@example.com"
+        />
+      </AppProvider>
+    </IntlProvider>,
+  );
+};
+
+describe('<AccessibilityBody />', () => {
+  describe('renders', () => {
+    beforeEach(async () => {
+      initializeMockApp({
+        authenticatedUser: {
+          userId: 3,
+          username: 'abc123',
+          administrator: false,
+          roles: [],
+        },
+      });
+      store = initializeStore({});
+    });
+    it('contains links', () => {
+      renderComponent();
+      expect(screen.getAllByTestId('email-element')).toHaveLength(2);
+      expect(screen.getAllByTestId('accessibility-page-link')).toHaveLength(1);
+    });
+  });
+});
diff --git a/src/accessibility-page/AccessibilityBody/index.js b/src/accessibility-page/AccessibilityBody/index.js
new file mode 100644
index 0000000000..a46720ac60
--- /dev/null
+++ b/src/accessibility-page/AccessibilityBody/index.js
@@ -0,0 +1,3 @@
+import AccessibilityBody from './AccessibilityBody';
+
+export default AccessibilityBody;
diff --git a/src/accessibility-page/AccessibilityBody/messages.js b/src/accessibility-page/AccessibilityBody/messages.js
new file mode 100644
index 0000000000..78384b80ee
--- /dev/null
+++ b/src/accessibility-page/AccessibilityBody/messages.js
@@ -0,0 +1,111 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  a11yBodyPolicyLink: {
+    id: 'a11yBodyPolicyLink',
+    defaultMessage: 'Website Accessibility Policy',
+    description: 'Title for link to full accessibility policy.',
+  },
+  a11yBodyPageHeader: {
+    id: 'a11yBodyPageHeader',
+    defaultMessage: 'Individualized Accessibility Process for Course Creators',
+    description: 'Heading for studio\'s accessibility policy page.',
+  },
+  a11yBodyIntroGraph: {
+    id: 'a11yBodyIntroGraph',
+    defaultMessage: `At edX, we seek to understand and respect the unique needs and perspectives of the edX global community.
+      We value every course team and are committed to expanding access to all, including course team creators and authors with
+      disabilities. To that end, we have adopted a {communityAccessibilityLink} and this process to allow course team creators
+      and authors to request assistance if they are unable to develop and post content on our platform via Studio because of their
+      disabilities.`,
+    description: 'Introductory paragraph outlining why we care about accessibility, and what we\'re doing about it.',
+  },
+  a11yBodyStepsHeader: {
+    id: 'a11yBodyStepsHeader',
+    defaultMessage: 'Course team creators and authors needing such assistance should take the following steps:',
+    description: 'Heading for list of steps authors can take for accessibility requests.',
+  },
+  a11yBodyEdxResponse: {
+    id: 'a11yBodyEdxResponse',
+    defaultMessage: `'We will communicate with you about your preferences and needs in determining the appropriate solution, although
+      the ultimate decision will be ours, provided that the solution is effective and timely. The factors we will consider in choosing
+      an accessibility solution are: effectiveness; timeliness (relative to your deadlines); ease of implementation; and ease of use for
+      you. We will notify you of the decision and explain the basis for our decision within 10 business days of discussing with you.`,
+    description: 'Paragraph outlining how we will select an accessibility solution.',
+  },
+  a11yBodyEdxFollowUp: {
+    id: 'a11yBodyEdxFollowUp',
+    defaultMessage: `Thereafter, we will communicate with you on a weekly basis regarding our evaluation, decision, and progress in
+      implementing the accessibility solution. We will notify you when implementation of your accessibility solution is complete and
+      will follow-up with you as may be necessary to see if the solution was effective.`,
+    description: 'Paragraph outlining how we will follow-up with you during and after implementing an accessibility solution.',
+  },
+  a11yBodyOngoingSupport: {
+    id: 'a11yBodyOngoingSupport',
+    defaultMessage: 'EdX will provide ongoing technical support as needed and will address any additional issues that arise after the initial course creation.',
+    description: 'A statement of ongoing support.',
+  },
+  a11yBodyA11yFeedback: {
+    id: 'a11yBodyA11yFeedback',
+    defaultMessage: 'Please direct any questions or suggestions on how to improve the accessibility of Studio to {emailElement} or use the form below. We welcome your feedback.',
+    description: 'Contact information heading for those with accessibility issues or suggestions.',
+  },
+  a11yBodyEmailHeading: {
+    id: 'a11yBodyEmailHeading',
+    defaultMessage: 'Send an email to {emailElement} with the following information:',
+    description: 'Heading for list of information required when you email us.',
+  },
+  a11yBodyNameEmail: {
+    id: 'a11yBodyNameEmail',
+    defaultMessage: 'your name and email address;',
+    description: 'Your contact information.',
+  },
+  a11yBodyInstitution: {
+    id: 'a11yBodyInstitution',
+    defaultMessage: 'the edX member institution that you are affiliated with;',
+    description: 'edX affiliate information.',
+  },
+  a11yBodyBarrier: {
+    id: 'a11yBodyBarrier',
+    defaultMessage: 'a brief description of the challenge or barrier to access that you are experiencing; and',
+    description: 'Accessibility problem information.',
+  },
+  a11yBodyTimeConstraints: {
+    id: 'a11yBodyTimeConstraints',
+    defaultMessage: 'how soon you need access and for how long (e.g., a planned course start date or in connection with a course-related deadline such as a final essay).',
+    description: 'Time contstraint information.',
+  },
+  a11yBodyReceipt: {
+    id: 'a11yBodyReceipt',
+    defaultMessage: 'The edX Support Team will respond to confirm receipt and forward your request to the edX Partner Manager for your institution and the edX Website Accessibility Specialist.',
+    description: 'Paragraph outlining what steps edX will take immediately.',
+  },
+  a11yBodyExtraInfo: {
+    id: 'a11yBodyExtraInfo',
+    defaultMessage: `With guidance from the Website Accessibility Specialist, edX will contact you to discuss your request and gather
+      additional information from you about your preferences and needs, to determine if there's a workable solution that edX is able to support.`,
+    description: 'Paragraph outlining how and when edX will reach out to you.',
+  },
+  a11yBodyFixesListHeader: {
+    id: 'a11yBodyFixesListHeader',
+    defaultMessage: 'EdX will assist you promptly and thoroughly so that you are able to create content on the CMS within your time constraints.  Such efforts may include, but are not limited to:',
+    description: 'Heading for list of ways we might be able to assist.',
+  },
+  a11yBodyThirdParty: {
+    id: 'a11yBodyThirdParty',
+    defaultMessage: 'Purchasing a third-party tool or software for use on an individual basis to assist your use of Studio;',
+    description: 'Buy third-party software.',
+  },
+  a11yBodyContractor: {
+    id: 'a11yBodyContractor',
+    defaultMessage: 'Engaging a trained independent contractor to provide real-time visual, verbal and physical assistance; or',
+    description: 'Hire a contractor.',
+  },
+  a11yBodyCodeFix: {
+    id: 'a11yBodyCodeFix',
+    defaultMessage: 'Developing new code to implement a technical fix.',
+    description: 'Make a technical fix.',
+  },
+});
+
+export default messages;
diff --git a/src/accessibility-page/AccessibilityForm/AccessibilityForm.jsx b/src/accessibility-page/AccessibilityForm/AccessibilityForm.jsx
new file mode 100644
index 0000000000..19587e2a7e
--- /dev/null
+++ b/src/accessibility-page/AccessibilityForm/AccessibilityForm.jsx
@@ -0,0 +1,146 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  injectIntl, FormattedMessage, intlShape, FormattedDate, FormattedTime,
+} from '@edx/frontend-platform/i18n';
+import {
+  ActionRow, Alert, Form, Stack, StatefulButton,
+} from '@openedx/paragon';
+
+import { RequestStatus } from '../../data/constants';
+import { STATEFUL_BUTTON_STATES } from '../../constants';
+import submitAccessibilityForm from '../data/thunks';
+import useAccessibility from './hooks';
+import messages from './messages';
+
+const AccessibilityForm = ({
+  accessibilityEmail,
+  // injected
+  intl,
+}) => {
+  const {
+    errors,
+    values,
+    isFormFilled,
+    dispatch,
+    handleBlur,
+    handleChange,
+    hasErrorField,
+    savingStatus,
+  } = useAccessibility({ name: '', email: '', message: '' }, intl);
+
+  const formFields = [
+    {
+      label: intl.formatMessage(messages.accessibilityPolicyFormEmailLabel),
+      name: 'email',
+      value: values.email,
+    },
+    {
+      label: intl.formatMessage(messages.accessibilityPolicyFormNameLabel),
+      name: 'name',
+      value: values.name,
+    },
+    {
+      label: intl.formatMessage(messages.accessibilityPolicyFormMessageLabel),
+      name: 'message',
+      value: values.message,
+    },
+  ];
+
+  const createButtonState = {
+    labels: {
+      default: intl.formatMessage(messages.accessibilityPolicyFormSubmitLabel),
+      pending: intl.formatMessage(messages.accessibilityPolicyFormSubmittingFeedbackLabel),
+    },
+    disabledStates: [STATEFUL_BUTTON_STATES.pending],
+  };
+
+  const handleSubmit = () => {
+    dispatch(submitAccessibilityForm(values));
+  };
+
+  const start = new Date('Mon Jan 29 2018 13:00:00 GMT (UTC)');
+  const end = new Date('Fri Feb 2 2018 21:00:00 GMT (UTC)');
+
+  return (
+    <>
+      <h2 className="my-4">
+        <FormattedMessage {...messages.accessibilityPolicyFormHeader} />
+      </h2>
+      {savingStatus === RequestStatus.SUCCESSFUL && (
+        <Alert variant="success">
+          <Stack gap={2}>
+            <div className="mb-2">
+              <FormattedMessage {...messages.accessibilityPolicyFormSuccess} />
+            </div>
+            <div>
+              <FormattedMessage
+                {...messages.accessibilityPolicyFormSuccessDetails}
+                values={{
+                  day_start: (<FormattedDate value={start} weekday="long" />),
+                  time_start: (<FormattedTime value={start} timeZoneName="short" />),
+                  day_end: (<FormattedDate value={end} weekday="long" />),
+                  time_end: (<FormattedTime value={end} timeZoneName="short" />),
+                }}
+              />
+            </div>
+          </Stack>
+        </Alert>
+      )}
+      {savingStatus === RequestStatus.FAILED && (
+        <Alert variant="danger">
+          <div data-testid="rate-limit-alert">
+            <FormattedMessage
+              {...messages.accessibilityPolicyFormErrorHighVolume}
+              values={{
+                emailLink: <a href={`mailto:${accessibilityEmail}`}>{accessibilityEmail}</a>,
+              }}
+            />
+          </div>
+        </Alert>
+      )}
+      <Form>
+        {formFields.map((field) => (
+          <Form.Group size="sm" key={field.label}>
+            <Form.Control
+              value={field.value}
+              name={field.name}
+              isInvalid={hasErrorField(field.name)}
+              type={field.name === 'email' ? 'email' : null}
+              as={field.name === 'message' ? 'textarea' : 'input'}
+              onChange={handleChange}
+              onBlur={handleBlur}
+              floatingLabel={field.label}
+            />
+            {hasErrorField(field.name) && (
+              <Form.Control.Feedback type="invalid" data-testid={`error-feedback-${field.name}`}>
+                {errors[field.name]}
+              </Form.Control.Feedback>
+            )}
+          </Form.Group>
+        ))}
+      </Form>
+      <ActionRow>
+        <StatefulButton
+          key="save-button"
+          onClick={handleSubmit}
+          disabled={!isFormFilled}
+          state={
+            savingStatus === RequestStatus.IN_PROGRESS
+              ? STATEFUL_BUTTON_STATES.pending
+              : STATEFUL_BUTTON_STATES.default
+          }
+          {...createButtonState}
+        />
+      </ActionRow>
+    </>
+  );
+};
+
+AccessibilityForm.propTypes = {
+  accessibilityEmail: PropTypes.string.isRequired,
+  // injected
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(AccessibilityForm);
diff --git a/src/accessibility-page/AccessibilityForm/AccessibilityForm.test.jsx b/src/accessibility-page/AccessibilityForm/AccessibilityForm.test.jsx
new file mode 100644
index 0000000000..cc15f81260
--- /dev/null
+++ b/src/accessibility-page/AccessibilityForm/AccessibilityForm.test.jsx
@@ -0,0 +1,164 @@
+import {
+  render,
+  act,
+  screen,
+} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { initializeMockApp } from '@edx/frontend-platform';
+import MockAdapter from 'axios-mock-adapter';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { AppProvider } from '@edx/frontend-platform/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import initializeStore from '../../store';
+import { RequestStatus } from '../../data/constants';
+
+import AccessibilityForm from './index';
+import { getZendeskrUrl } from '../data/api';
+import messages from './messages';
+
+let axiosMock;
+let store;
+
+const defaultProps = {
+  accessibilityEmail: 'accessibilityTest@test.com',
+};
+
+const initialState = {
+  accessibilityPage: {
+    savingStatus: '',
+  },
+};
+
+const renderComponent = () => {
+  render(
+    <IntlProvider locale="en">
+      <AppProvider store={store}>
+        <AccessibilityForm {...defaultProps} />
+      </AppProvider>
+    </IntlProvider>,
+  );
+};
+
+describe('<AccessibilityPolicyForm />', () => {
+  beforeEach(async () => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: false,
+        roles: [],
+      },
+    });
+    store = initializeStore(initialState);
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+  });
+
+  describe('renders', () => {
+    beforeEach(() => {
+      renderComponent();
+    });
+
+    it('correct number of form fields', () => {
+      const formSections = screen.getAllByRole('textbox');
+      const formButton = screen.getByText(messages.accessibilityPolicyFormSubmitLabel.defaultMessage);
+      expect(formSections).toHaveLength(3);
+      expect(formButton).toBeVisible();
+    });
+
+    it('hides StatusAlert on initial load', () => {
+      expect(screen.queryAllByRole('alert')).toHaveLength(0);
+    });
+  });
+
+  describe('statusAlert', () => {
+    let formSections;
+    let submitButton;
+    beforeEach(async () => {
+      renderComponent();
+      formSections = screen.getAllByRole('textbox');
+      await act(async () => {
+        userEvent.type(formSections[0], 'email@email.com');
+        userEvent.type(formSections[1], 'test name');
+        userEvent.type(formSections[2], 'feedback message');
+      });
+      submitButton = screen.getByText(messages.accessibilityPolicyFormSubmitLabel.defaultMessage);
+    });
+
+    it('shows correct success message', async () => {
+      axiosMock.onPost(getZendeskrUrl()).reply(200);
+      await act(async () => {
+        userEvent.click(submitButton);
+      });
+      const { savingStatus } = store.getState().accessibilityPage;
+      expect(savingStatus).toEqual(RequestStatus.SUCCESSFUL);
+
+      expect(screen.getAllByRole('alert')).toHaveLength(1);
+
+      expect(screen.getByText(messages.accessibilityPolicyFormSuccess.defaultMessage)).toBeVisible();
+
+      formSections.forEach(input => {
+        expect(input.value).toBe('');
+      });
+    });
+
+    it('shows correct rate limiting message', async () => {
+      axiosMock.onPost(getZendeskrUrl()).reply(429);
+      await act(async () => {
+        userEvent.click(submitButton);
+      });
+      const { savingStatus } = store.getState().accessibilityPage;
+      expect(savingStatus).toEqual(RequestStatus.FAILED);
+
+      expect(screen.getAllByRole('alert')).toHaveLength(1);
+
+      expect(screen.getByTestId('rate-limit-alert')).toBeVisible();
+
+      formSections.forEach(input => {
+        expect(input.value).not.toBe('');
+      });
+    });
+  });
+
+  describe('input validation', () => {
+    let formSections;
+    let submitButton;
+    beforeEach(async () => {
+      renderComponent();
+      formSections = screen.getAllByRole('textbox');
+      await act(async () => {
+        userEvent.type(formSections[0], 'email@email.com');
+        userEvent.type(formSections[1], 'test name');
+        userEvent.type(formSections[2], 'feedback message');
+      });
+      submitButton = screen.getByText(messages.accessibilityPolicyFormSubmitLabel.defaultMessage);
+    });
+
+    it('adds validation checking on each input field', async () => {
+      await act(async () => {
+        userEvent.clear(formSections[0]);
+        userEvent.clear(formSections[1]);
+        userEvent.clear(formSections[2]);
+      });
+      const emailError = screen.getByTestId('error-feedback-email');
+      expect(emailError).toBeVisible();
+
+      const fullNameError = screen.getByTestId('error-feedback-email');
+      expect(fullNameError).toBeVisible();
+
+      const messageError = screen.getByTestId('error-feedback-message');
+      expect(messageError).toBeVisible();
+    });
+
+    it('sumbit button is disabled when trying to submit with all empty fields', async () => {
+      await act(async () => {
+        userEvent.clear(formSections[0]);
+        userEvent.clear(formSections[1]);
+        userEvent.clear(formSections[2]);
+        userEvent.click(submitButton);
+      });
+
+      expect(submitButton.closest('button')).toBeDisabled();
+    });
+  });
+});
diff --git a/src/accessibility-page/AccessibilityForm/hooks.js b/src/accessibility-page/AccessibilityForm/hooks.js
new file mode 100644
index 0000000000..c96e21181d
--- /dev/null
+++ b/src/accessibility-page/AccessibilityForm/hooks.js
@@ -0,0 +1,58 @@
+import { useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useFormik } from 'formik';
+import * as Yup from 'yup';
+
+import { RequestStatus } from '../../data/constants';
+import messages from './messages';
+
+const useAccessibility = (initialValues, intl) => {
+  const dispatch = useDispatch();
+  const savingStatus = useSelector(state => state.accessibilityPage.savingStatus);
+  const [isFormFilled, setFormFilled] = useState(false);
+  const validationSchema = Yup.object().shape({
+    name: Yup.string().required(
+      intl.formatMessage(messages.accessibilityPolicyFormValidName),
+    ),
+    email: Yup.string()
+      .email(intl.formatMessage(messages.accessibilityPolicyFormValidEmail))
+      .required(intl.formatMessage(messages.accessibilityPolicyFormValidEmail)),
+    message: Yup.string().required(
+      intl.formatMessage(messages.accessibilityPolicyFormValidMessage),
+    ),
+  });
+
+  const {
+    values, errors, touched, handleChange, handleBlur, handleReset,
+  } = useFormik({
+    initialValues,
+    enableReinitialize: true,
+    validateOnBlur: false,
+    validationSchema,
+  });
+
+  useEffect(() => {
+    setFormFilled(Object.values(values).every((i) => i));
+  }, [values]);
+
+  useEffect(() => {
+    if (savingStatus === RequestStatus.SUCCESSFUL) {
+      handleReset();
+    }
+  }, [savingStatus]);
+
+  const hasErrorField = (fieldName) => !!errors[fieldName] && !!touched[fieldName];
+
+  return {
+    errors,
+    values,
+    isFormFilled,
+    dispatch,
+    handleBlur,
+    handleChange,
+    hasErrorField,
+    savingStatus,
+  };
+};
+
+export default useAccessibility;
diff --git a/src/accessibility-page/AccessibilityForm/index.js b/src/accessibility-page/AccessibilityForm/index.js
new file mode 100644
index 0000000000..a925bed87c
--- /dev/null
+++ b/src/accessibility-page/AccessibilityForm/index.js
@@ -0,0 +1,3 @@
+import AccessibilityForm from './AccessibilityForm';
+
+export default AccessibilityForm;
diff --git a/src/accessibility-page/AccessibilityForm/messages.js b/src/accessibility-page/AccessibilityForm/messages.js
new file mode 100644
index 0000000000..8f8513dc79
--- /dev/null
+++ b/src/accessibility-page/AccessibilityForm/messages.js
@@ -0,0 +1,76 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  accessibilityPolicyFormEmailLabel: {
+    id: 'accessibilityPolicyFormEmailLabel',
+    defaultMessage: 'Email Address',
+    description: 'Label for the email form field',
+  },
+  accessibilityPolicyFormErrorHighVolume: {
+    id: 'accessibilityPolicyFormErrorHighVolume',
+    defaultMessage: 'We are currently experiencing high volume. Try again later today or send an email message to {emailLink}.',
+    description: 'Error message when site is experiencing high volume that will include an email link',
+  },
+  accessibilityPolicyFormErrorMissingFields: {
+    id: 'accessibilityPolicyFormErrorMissingFields',
+    defaultMessage: 'Make sure to fill in all fields.',
+    description: 'Error message to instruct user to fill in all fields',
+  },
+  accessibilityPolicyFormHeader: {
+    id: 'accessibilityPolicyFormHeader',
+    defaultMessage: 'Studio Accessibility Feedback',
+    description: 'The heading for the form',
+  },
+  accessibilityPolicyFormMessageLabel: {
+    id: 'accessibilityPolicyFormMessageLabel',
+    defaultMessage: 'Message',
+    description: 'Label for the message form field',
+  },
+  accessibilityPolicyFormNameLabel: {
+    id: 'accessibilityPolicyFormNameLabel',
+    defaultMessage: 'Name',
+    description: 'Label for the name form field',
+  },
+  accessibilityPolicyFormSubmitAria: {
+    id: 'accessibilityPolicyFormSubmitAria',
+    defaultMessage: 'Submit Accessibility Feedback Form',
+    description: 'Detailed aria-label for the submit button',
+  },
+  accessibilityPolicyFormSubmitLabel: {
+    id: 'accessibilityPolicyFormSubmitLabel',
+    defaultMessage: 'Submit',
+    description: 'General label for the submit button',
+  },
+  accessibilityPolicyFormSubmittingFeedbackLabel: {
+    id: 'accessibilityPolicyFormSubmittingFeedbackLabel',
+    defaultMessage: 'Submitting',
+    description: 'Loading message while form feedback is being submitted',
+  },
+  accessibilityPolicyFormSuccess: {
+    id: 'accessibilityPolicyFormSuccess',
+    defaultMessage: 'Thank you for contacting edX!',
+    description: 'Simple thank you message when form submission is successful',
+  },
+  accessibilityPolicyFormSuccessDetails: {
+    id: 'accessibilityPolicyFormSuccessDetails',
+    defaultMessage: 'Thank you for your feedback regarding the accessibility of Studio. We typically respond within one business day ({day_start} to {day_end}, {time_start} to {time_end}).',
+    description: 'Detailed thank you message when form submission is successful',
+  },
+  accessibilityPolicyFormValidEmail: {
+    id: 'accessibilityPolicyFormValidEmail',
+    defaultMessage: 'Enter a valid email address.',
+    description: 'Error message for when an invalid email is entered into the form',
+  },
+  accessibilityPolicyFormValidMessage: {
+    id: 'accessibilityPolicyFormValidMessage',
+    defaultMessage: 'Enter a message.',
+    description: 'Error message an invalid message is entered into the form',
+  },
+  accessibilityPolicyFormValidName: {
+    id: 'accessibilityPolicyFormValidName',
+    defaultMessage: 'Enter a name.',
+    description: 'Error message an invalid name is entered into the form',
+  },
+});
+
+export default messages;
diff --git a/src/accessibility-page/AccessibilityPage.jsx b/src/accessibility-page/AccessibilityPage.jsx
new file mode 100644
index 0000000000..d3dd1c99a9
--- /dev/null
+++ b/src/accessibility-page/AccessibilityPage.jsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { Helmet } from 'react-helmet';
+import { Container } from '@openedx/paragon';
+import { StudioFooter } from '@edx/frontend-component-footer';
+
+import Header from '../header';
+import messages from './messages';
+import AccessibilityBody from './AccessibilityBody';
+import AccessibilityForm from './AccessibilityForm';
+
+const AccessibilityPage = ({
+  // injected
+  intl,
+}) => {
+  const communityAccessibilityLink = 'https://www.edx.org/accessibility';
+  const email = 'accessibility@edx.org';
+  return (
+    <>
+      <Helmet>
+        <title>
+          {intl.formatMessage(messages.pageTitle, {
+            siteName: process.env.SITE_NAME,
+          })}
+        </title>
+      </Helmet>
+      <Header isHiddenMainMenu />
+      <Container size="xl" classNamae="px-4">
+        <AccessibilityBody {...{ email, communityAccessibilityLink }} />
+        <AccessibilityForm accessibilityEmail={email} />
+      </Container>
+      <StudioFooter />
+    </>
+  );
+};
+
+AccessibilityPage.propTypes = {
+  // injected
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(AccessibilityPage);
diff --git a/src/accessibility-page/AccessibilityPage.test.jsx b/src/accessibility-page/AccessibilityPage.test.jsx
new file mode 100644
index 0000000000..f686daf4d5
--- /dev/null
+++ b/src/accessibility-page/AccessibilityPage.test.jsx
@@ -0,0 +1,46 @@
+import {
+  render,
+  screen,
+} from '@testing-library/react';
+import { AppProvider } from '@edx/frontend-platform/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { initializeMockApp } from '@edx/frontend-platform';
+import initializeStore from '../store';
+import AccessibilityPage from './index';
+
+const initialState = {
+  accessibilityPage: {
+    status: {},
+  },
+};
+let store;
+
+const renderComponent = () => {
+  render(
+    <IntlProvider locale="en">
+      <AppProvider store={store}>
+        <AccessibilityPage />
+      </AppProvider>
+    </IntlProvider>,
+  );
+};
+
+describe('<AccessibilityPolicyPage />', () => {
+  describe('renders', () => {
+    beforeEach(async () => {
+      initializeMockApp({
+        authenticatedUser: {
+          userId: 3,
+          username: 'abc123',
+          administrator: false,
+          roles: [],
+        },
+      });
+      store = initializeStore(initialState);
+    });
+    it('contains the policy body', () => {
+      renderComponent();
+      expect(screen.getByText('Individualized Accessibility Process for Course Creators')).toBeVisible();
+    });
+  });
+});
diff --git a/src/accessibility-page/data/api.js b/src/accessibility-page/data/api.js
new file mode 100644
index 0000000000..7381384b0f
--- /dev/null
+++ b/src/accessibility-page/data/api.js
@@ -0,0 +1,28 @@
+import { ensureConfig, getConfig } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+
+ensureConfig([
+  'STUDIO_BASE_URL',
+], 'Course Apps API service');
+
+export const getApiBaseUrl = () => getConfig().STUDIO_BASE_URL;
+export const getZendeskrUrl = () => `${getApiBaseUrl()}/zendesk_proxy/v0`;
+
+/**
+ * Posts the form data to zendesk endpoint
+ * @param {string} courseId
+ * @returns {Promise<[{}]>}
+ */
+export async function postAccessibilityForm({ name, email, message }) {
+  const data = {
+    name,
+    tags: ['studio_a11y'],
+    email: {
+      from: email,
+      subject: 'Studio Accessibility Request',
+      message,
+    },
+  };
+
+  await getAuthenticatedHttpClient().post(getZendeskrUrl(), data);
+}
diff --git a/src/accessibility-page/data/slice.js b/src/accessibility-page/data/slice.js
new file mode 100644
index 0000000000..7d90356f1f
--- /dev/null
+++ b/src/accessibility-page/data/slice.js
@@ -0,0 +1,23 @@
+/* eslint-disable no-param-reassign */
+import { createSlice } from '@reduxjs/toolkit';
+
+const slice = createSlice({
+  name: 'accessibilityPage',
+  initialState: {
+    savingStatus: '',
+  },
+  reducers: {
+    updateSavingStatus: (state, { payload }) => {
+      state.savingStatus = payload.status;
+    },
+  },
+});
+
+export const {
+  updateLoadingStatus,
+  updateSavingStatus,
+} = slice.actions;
+
+export const {
+  reducer,
+} = slice;
diff --git a/src/accessibility-page/data/thunks.js b/src/accessibility-page/data/thunks.js
new file mode 100644
index 0000000000..b6b2d121ad
--- /dev/null
+++ b/src/accessibility-page/data/thunks.js
@@ -0,0 +1,22 @@
+import { RequestStatus } from '../../data/constants';
+import { postAccessibilityForm } from './api';
+import { updateSavingStatus } from './slice';
+
+function submitAccessibilityForm({ email, name, message }) {
+  return async (dispatch) => {
+    dispatch(updateSavingStatus({ status: RequestStatus.IN_PROGRESS }));
+
+    try {
+      await postAccessibilityForm({ email, name, message });
+      dispatch(updateSavingStatus({ status: RequestStatus.SUCCESSFUL }));
+    } catch (error) {
+      if (error.response && error.response.status === 429) {
+        dispatch(updateSavingStatus({ status: RequestStatus.FAILED }));
+      } else {
+        dispatch(updateSavingStatus({ status: RequestStatus.SUCCESSFUL }));
+      }
+    }
+  };
+}
+
+export default submitAccessibilityForm;
diff --git a/src/accessibility-page/index.js b/src/accessibility-page/index.js
new file mode 100644
index 0000000000..089d0cbbf9
--- /dev/null
+++ b/src/accessibility-page/index.js
@@ -0,0 +1,3 @@
+import AccessibilityPage from './AccessibilityPage';
+
+export default AccessibilityPage;
diff --git a/src/accessibility-page/messages.js b/src/accessibility-page/messages.js
new file mode 100644
index 0000000000..b15a88832c
--- /dev/null
+++ b/src/accessibility-page/messages.js
@@ -0,0 +1,10 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  pageTitle: {
+    id: 'course-authoring.accessibility.page.title',
+    defaultMessage: 'Studio Accessibility Policy| {siteName}',
+  },
+});
+
+export default messages;
diff --git a/src/advanced-settings/AdvancedSettings.jsx b/src/advanced-settings/AdvancedSettings.jsx
new file mode 100644
index 0000000000..67bd62b55f
--- /dev/null
+++ b/src/advanced-settings/AdvancedSettings.jsx
@@ -0,0 +1,285 @@
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { useDispatch, useSelector } from 'react-redux';
+import {
+  Container, Button, Layout, StatefulButton, TransitionReplace,
+} from '@openedx/paragon';
+import { CheckCircle, Info, Warning } from '@openedx/paragon/icons';
+import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import Placeholder from '../editors/Placeholder';
+
+import AlertProctoringError from '../generic/AlertProctoringError';
+import { useModel } from '../generic/model-store';
+import InternetConnectionAlert from '../generic/internet-connection-alert';
+import { parseArrayOrObjectValues } from '../utils';
+import { RequestStatus } from '../data/constants';
+import SubHeader from '../generic/sub-header/SubHeader';
+import AlertMessage from '../generic/alert-message';
+import { fetchCourseAppSettings, updateCourseAppSetting, fetchProctoringExamErrors } from './data/thunks';
+import {
+  getCourseAppSettings, getSavingStatus, getProctoringExamErrors, getSendRequestErrors, getLoadingStatus,
+} from './data/selectors';
+import SettingCard from './setting-card/SettingCard';
+import SettingsSidebar from './settings-sidebar/SettingsSidebar';
+import validateAdvancedSettingsData from './utils';
+import messages from './messages';
+import ModalError from './modal-error/ModalError';
+import getPageHeadTitle from '../generic/utils';
+
+const AdvancedSettings = ({ intl, courseId }) => {
+  const dispatch = useDispatch();
+  const [saveSettingsPrompt, showSaveSettingsPrompt] = useState(false);
+  const [showDeprecated, setShowDeprecated] = useState(false);
+  const [errorModal, showErrorModal] = useState(false);
+  const [editedSettings, setEditedSettings] = useState({});
+  const [errorFields, setErrorFields] = useState([]);
+  const [showSuccessAlert, setShowSuccessAlert] = useState(false);
+  const [isQueryPending, setIsQueryPending] = useState(false);
+  const [isEditableState, setIsEditableState] = useState(false);
+  const [hasInternetConnectionError, setInternetConnectionError] = useState(false);
+
+  const courseDetails = useModel('courseDetails', courseId);
+  document.title = getPageHeadTitle(courseDetails?.name, intl.formatMessage(messages.headingTitle));
+
+  useEffect(() => {
+    dispatch(fetchCourseAppSettings(courseId));
+    dispatch(fetchProctoringExamErrors(courseId));
+  }, [courseId]);
+
+  const advancedSettingsData = useSelector(getCourseAppSettings);
+  const savingStatus = useSelector(getSavingStatus);
+  const proctoringExamErrors = useSelector(getProctoringExamErrors);
+  const settingsWithSendErrors = useSelector(getSendRequestErrors) || {};
+  const loadingSettingsStatus = useSelector(getLoadingStatus);
+
+  const isLoading = loadingSettingsStatus === RequestStatus.IN_PROGRESS;
+  const updateSettingsButtonState = {
+    labels: {
+      default: intl.formatMessage(messages.buttonSaveText),
+      pending: intl.formatMessage(messages.buttonSavingText),
+    },
+    disabledStates: ['pending'],
+  };
+  const {
+    proctoringErrors,
+    mfeProctoredExamSettingsUrl,
+  } = proctoringExamErrors;
+
+  useEffect(() => {
+    if (savingStatus === RequestStatus.SUCCESSFUL) {
+      setIsQueryPending(false);
+      setShowSuccessAlert(true);
+      setIsEditableState(false);
+      setTimeout(() => setShowSuccessAlert(false), 15000);
+      window.scrollTo({ top: 0, behavior: 'smooth' });
+      showSaveSettingsPrompt(false);
+    } else if (savingStatus === RequestStatus.FAILED && !hasInternetConnectionError) {
+      setErrorFields(settingsWithSendErrors);
+      showErrorModal(true);
+    }
+  }, [savingStatus]);
+
+  if (isLoading) {
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    return <></>;
+  }
+  if (loadingSettingsStatus === RequestStatus.DENIED) {
+    return (
+      <div className="row justify-content-center m-6">
+        <Placeholder />
+      </div>
+    );
+  }
+
+  const handleResetSettingsValues = () => {
+    setIsEditableState(false);
+    showErrorModal(false);
+    setEditedSettings({});
+    showSaveSettingsPrompt(false);
+  };
+
+  const handleSettingBlur = () => {
+    validateAdvancedSettingsData(editedSettings, setErrorFields, setEditedSettings);
+  };
+
+  const handleUpdateAdvancedSettingsData = () => {
+    const isValid = validateAdvancedSettingsData(editedSettings, setErrorFields, setEditedSettings);
+    if (isValid) {
+      setIsQueryPending(true);
+    } else {
+      showSaveSettingsPrompt(false);
+      showErrorModal(!errorModal);
+    }
+  };
+
+  const handleInternetConnectionFailed = () => {
+    setInternetConnectionError(true);
+    showSaveSettingsPrompt(false);
+    setShowSuccessAlert(false);
+  };
+
+  const handleQueryProcessing = () => {
+    setShowSuccessAlert(false);
+    dispatch(updateCourseAppSetting(courseId, parseArrayOrObjectValues(editedSettings)));
+  };
+
+  const handleManuallyChangeClick = (setToState) => {
+    showErrorModal(setToState);
+    showSaveSettingsPrompt(true);
+  };
+
+  return (
+    <>
+      <Container size="xl" className="advanced-settings px-4">
+        <div className="setting-header mt-5">
+          {(proctoringErrors?.length > 0) && (
+            <AlertProctoringError
+              icon={Info}
+              proctoringErrorsData={proctoringErrors}
+              aria-hidden="true"
+              aria-labelledby={intl.formatMessage(messages.alertProctoringAriaLabelledby)}
+              aria-describedby={intl.formatMessage(messages.alertProctoringDescribedby)}
+            />
+          )}
+          <TransitionReplace>
+            {showSuccessAlert ? (
+              <AlertMessage
+                key={intl.formatMessage(messages.alertSuccessAriaLabelledby)}
+                show={showSuccessAlert}
+                variant="success"
+                icon={CheckCircle}
+                title={intl.formatMessage(messages.alertSuccess)}
+                description={intl.formatMessage(messages.alertSuccessDescriptions)}
+                aria-hidden="true"
+                aria-labelledby={intl.formatMessage(messages.alertSuccessAriaLabelledby)}
+                aria-describedby={intl.formatMessage(messages.alertSuccessAriaDescribedby)}
+              />
+            ) : null}
+          </TransitionReplace>
+        </div>
+        <section className="setting-items mb-4">
+          <Layout
+            lg={[{ span: 9 }, { span: 3 }]}
+            md={[{ span: 9 }, { span: 3 }]}
+            sm={[{ span: 9 }, { span: 3 }]}
+            xs={[{ span: 9 }, { span: 3 }]}
+            xl={[{ span: 9 }, { span: 3 }]}
+          >
+            <Layout.Element>
+              <SubHeader
+                subtitle={intl.formatMessage(messages.headingSubtitle)}
+                title={intl.formatMessage(messages.headingTitle)}
+                contentTitle={intl.formatMessage(messages.policy)}
+              />
+              <article>
+                <div>
+                  <section className="setting-items-policies">
+                    <div className="small">
+                      <FormattedMessage
+                        id="course-authoring.advanced-settings.policies.description"
+                        defaultMessage="{notice} Do not modify these policies unless you are familiar with their purpose."
+                        values={{ notice: <strong>Warning:  </strong> }}
+                      />
+                    </div>
+                    <div className="setting-items-deprecated-setting">
+                      <Button
+                        variant={showDeprecated ? 'outline-brand' : 'tertiary'}
+                        onClick={() => setShowDeprecated(!showDeprecated)}
+                        size="sm"
+                      >
+                        <FormattedMessage
+                          id="course-authoring.advanced-settings.deprecated.button.text"
+                          defaultMessage="{visibility} deprecated settings"
+                          values={{
+                            visibility:
+                                    showDeprecated ? intl.formatMessage(messages.deprecatedButtonHideText)
+                                      : intl.formatMessage(messages.deprecatedButtonShowText),
+                          }}
+                        />
+                      </Button>
+                    </div>
+                    <ul className="setting-items-list p-0">
+                      {Object.keys(advancedSettingsData).map((settingName) => {
+                        const settingData = advancedSettingsData[settingName];
+                        if (settingData.deprecated && !showDeprecated) {
+                          return null;
+                        }
+                        return (
+                          <SettingCard
+                            key={settingName}
+                            settingData={settingData}
+                            name={settingName}
+                            showSaveSettingsPrompt={showSaveSettingsPrompt}
+                            saveSettingsPrompt={saveSettingsPrompt}
+                            setEdited={setEditedSettings}
+                            handleBlur={handleSettingBlur}
+                            isEditableState={isEditableState}
+                            setIsEditableState={setIsEditableState}
+                          />
+                        );
+                      })}
+                    </ul>
+                  </section>
+                </div>
+              </article>
+            </Layout.Element>
+            <Layout.Element>
+              <SettingsSidebar
+                courseId={courseId}
+                proctoredExamSettingsUrl={mfeProctoredExamSettingsUrl}
+              />
+            </Layout.Element>
+          </Layout>
+        </section>
+      </Container>
+      <div className="alert-toast">
+        {isQueryPending && (
+          <InternetConnectionAlert
+            isFailed={savingStatus === RequestStatus.FAILED}
+            isQueryPending={isQueryPending}
+            onQueryProcessing={handleQueryProcessing}
+            onInternetConnectionFailed={handleInternetConnectionFailed}
+          />
+        )}
+        <AlertMessage
+          show={saveSettingsPrompt}
+          aria-hidden={saveSettingsPrompt}
+          aria-labelledby={intl.formatMessage(messages.alertWarningAriaLabelledby)}
+          aria-describedby={intl.formatMessage(messages.alertWarningAriaDescribedby)}
+          role="dialog"
+          actions={[
+            !isQueryPending && (
+              <Button variant="tertiary" onClick={handleResetSettingsValues}>
+                {intl.formatMessage(messages.buttonCancelText)}
+              </Button>
+            ),
+            <StatefulButton
+              key="statefulBtn"
+              onClick={handleUpdateAdvancedSettingsData}
+              state={isQueryPending ? RequestStatus.PENDING : 'default'}
+              {...updateSettingsButtonState}
+            />,
+          ].filter(Boolean)}
+          variant="warning"
+          icon={Warning}
+          title={intl.formatMessage(messages.alertWarning)}
+          description={intl.formatMessage(messages.alertWarningDescriptions)}
+        />
+      </div>
+      <ModalError
+        isError={errorModal}
+        showErrorModal={(setToState) => handleManuallyChangeClick(setToState)}
+        handleUndoChanges={handleResetSettingsValues}
+        settingsData={advancedSettingsData}
+        errorList={errorFields.length > 0 ? errorFields : []}
+      />
+    </>
+  );
+};
+
+AdvancedSettings.propTypes = {
+  intl: intlShape.isRequired,
+  courseId: PropTypes.string.isRequired,
+};
+
+export default injectIntl(AdvancedSettings);
diff --git a/src/advanced-settings/AdvancedSettings.test.jsx b/src/advanced-settings/AdvancedSettings.test.jsx
new file mode 100644
index 0000000000..cc5144c64d
--- /dev/null
+++ b/src/advanced-settings/AdvancedSettings.test.jsx
@@ -0,0 +1,164 @@
+import React from 'react';
+import { initializeMockApp } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { IntlProvider, injectIntl } from '@edx/frontend-platform/i18n';
+import { AppProvider } from '@edx/frontend-platform/react';
+import { render, fireEvent, waitFor } from '@testing-library/react';
+import MockAdapter from 'axios-mock-adapter';
+
+import initializeStore from '../store';
+import { executeThunk } from '../utils';
+import { advancedSettingsMock } from './__mocks__';
+import { getCourseAdvancedSettingsApiUrl } from './data/api';
+import { updateCourseAppSetting } from './data/thunks';
+import AdvancedSettings from './AdvancedSettings';
+import messages from './messages';
+
+let axiosMock;
+let store;
+const mockPathname = '/foo-bar';
+const courseId = '123';
+
+// Mock the TextareaAutosize component
+jest.mock('react-textarea-autosize', () => jest.fn((props) => (
+  <textarea
+    {...props}
+    onFocus={() => {}}
+    onBlur={() => {}}
+  />
+)));
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useLocation: () => ({
+    pathname: mockPathname,
+  }),
+}));
+
+const RootWrapper = () => (
+  <AppProvider store={store}>
+    <IntlProvider locale="en" messages={{}}>
+      <AdvancedSettings intl={injectIntl} courseId={courseId} />
+    </IntlProvider>
+  </AppProvider>
+);
+
+describe('<AdvancedSettings />', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+    store = initializeStore();
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+    axiosMock
+      .onGet(`${getCourseAdvancedSettingsApiUrl(courseId)}?fetch_all=0`)
+      .reply(200, advancedSettingsMock);
+  });
+  it('should render without errors', async () => {
+    const { getByText } = render(<RootWrapper />);
+    await waitFor(() => {
+      expect(getByText(messages.headingSubtitle.defaultMessage)).toBeInTheDocument();
+      const advancedSettingsElement = getByText(messages.headingTitle.defaultMessage, {
+        selector: 'h2.sub-header-title',
+      });
+      expect(advancedSettingsElement).toBeInTheDocument();
+      expect(getByText(messages.policy.defaultMessage)).toBeInTheDocument();
+      expect(getByText(/Do not modify these policies unless you are familiar with their purpose./i)).toBeInTheDocument();
+    });
+  });
+  it('should render setting element', async () => {
+    const { getByText, queryByText } = render(<RootWrapper />);
+    await waitFor(() => {
+      const advancedModuleListTitle = getByText(/Advanced Module List/i);
+      expect(advancedModuleListTitle).toBeInTheDocument();
+      expect(queryByText('Certificate web/html view enabled')).toBeNull();
+    });
+  });
+  it('should change to onСhange', async () => {
+    const { getByLabelText } = render(<RootWrapper />);
+    await waitFor(() => {
+      const textarea = getByLabelText(/Advanced Module List/i);
+      expect(textarea).toBeInTheDocument();
+      fireEvent.change(textarea, { target: { value: '[1, 2, 3]' } });
+      expect(textarea.value).toBe('[1, 2, 3]');
+    });
+  });
+  it('should display a warning alert', async () => {
+    const { getByLabelText, getByText } = render(<RootWrapper />);
+    await waitFor(() => {
+      const textarea = getByLabelText(/Advanced Module List/i);
+      fireEvent.change(textarea, { target: { value: '[3, 2, 1]' } });
+      expect(getByText(messages.buttonCancelText.defaultMessage)).toBeInTheDocument();
+      expect(getByText(messages.buttonSaveText.defaultMessage)).toBeInTheDocument();
+      expect(getByText(messages.alertWarning.defaultMessage)).toBeInTheDocument();
+      expect(getByText(messages.alertWarningDescriptions.defaultMessage)).toBeInTheDocument();
+    });
+  });
+  it('should display a tooltip on clicking on the icon', async () => {
+    const { getByLabelText, getByText } = render(<RootWrapper />);
+    await waitFor(() => {
+      const button = getByLabelText(/Show help text/i);
+      fireEvent.click(button);
+      expect(getByText(/Enter the names of the advanced modules to use in your course./i)).toBeInTheDocument();
+    });
+  });
+  it('should change deprecated button text ', async () => {
+    const { getByText } = render(<RootWrapper />);
+    await waitFor(() => {
+      const showDeprecatedItemsBtn = getByText(/Show Deprecated Settings/i);
+      expect(showDeprecatedItemsBtn).toBeInTheDocument();
+      fireEvent.click(showDeprecatedItemsBtn);
+      expect(getByText(/Hide Deprecated Settings/i)).toBeInTheDocument();
+    });
+    expect(getByText('Certificate web/html view enabled')).toBeInTheDocument();
+  });
+  it('should reset to default value on click on Cancel button', async () => {
+    const { getByLabelText, getByText } = render(<RootWrapper />);
+    let textarea;
+    await waitFor(() => {
+      textarea = getByLabelText(/Advanced Module List/i);
+    });
+    fireEvent.change(textarea, { target: { value: '[3, 2, 1]' } });
+    expect(textarea.value).toBe('[3, 2, 1]');
+    fireEvent.click(getByText(messages.buttonCancelText.defaultMessage));
+    expect(textarea.value).toBe('[]');
+  });
+  it('should update the textarea value and display the updated value after clicking "Change manually"', async () => {
+    const { getByLabelText, getByText } = render(<RootWrapper />);
+    let textarea;
+    await waitFor(() => {
+      textarea = getByLabelText(/Advanced Module List/i);
+    });
+    fireEvent.change(textarea, { target: { value: '[3, 2, 1,' } });
+    expect(textarea.value).toBe('[3, 2, 1,');
+    fireEvent.click(getByText('Save changes'));
+    fireEvent.click(getByText('Change manually'));
+    expect(textarea.value).toBe('[3, 2, 1,');
+  });
+  it('should show success alert after save', async () => {
+    const { getByLabelText, getByText } = render(<RootWrapper />);
+    let textarea;
+    await waitFor(() => {
+      textarea = getByLabelText(/Advanced Module List/i);
+    });
+    fireEvent.change(textarea, { target: { value: '[3, 2, 1]' } });
+    expect(textarea.value).toBe('[3, 2, 1]');
+    axiosMock
+      .onPatch(`${getCourseAdvancedSettingsApiUrl(courseId)}`)
+      .reply(200, {
+        ...advancedSettingsMock,
+        advancedModules: {
+          ...advancedSettingsMock.advancedModules,
+          value: [3, 2, 1],
+        },
+      });
+    fireEvent.click(getByText('Save changes'));
+    await executeThunk(updateCourseAppSetting(courseId, [3, 2, 1]), store.dispatch);
+    expect(getByText('Your policy changes have been saved.')).toBeInTheDocument();
+  });
+});
diff --git a/src/advanced-settings/__mocks__/advancedSettings.js b/src/advanced-settings/__mocks__/advancedSettings.js
new file mode 100644
index 0000000000..ead6c3528b
--- /dev/null
+++ b/src/advanced-settings/__mocks__/advancedSettings.js
@@ -0,0 +1,16 @@
+module.exports = {
+  advancedModules: {
+    deprecated: false,
+    displayName: 'Advanced Module List',
+    help: 'Enter the names of the advanced modules to use in your course.',
+    hideOnEnabledPublisher: false,
+    value: [],
+  },
+  certHtmlViewEnabled: {
+    deprecated: true,
+    display_name: 'Certificate web/html view enabled',
+    help: 'If true, certificate Web/HTML views are enabled for the course.',
+    hide_on_enabled_publisher: false,
+    value: true,
+  },
+};
diff --git a/src/advanced-settings/__mocks__/index.js b/src/advanced-settings/__mocks__/index.js
new file mode 100644
index 0000000000..0a7d72c347
--- /dev/null
+++ b/src/advanced-settings/__mocks__/index.js
@@ -0,0 +1 @@
+export { default as advancedSettingsMock } from './advancedSettings';
diff --git a/src/advanced-settings/data/api.js b/src/advanced-settings/data/api.js
new file mode 100644
index 0000000000..f240357c9f
--- /dev/null
+++ b/src/advanced-settings/data/api.js
@@ -0,0 +1,40 @@
+import { camelCaseObject, getConfig } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { convertObjectToSnakeCase } from '../../utils';
+
+const getApiBaseUrl = () => getConfig().STUDIO_BASE_URL;
+export const getCourseAdvancedSettingsApiUrl = (courseId) => `${getApiBaseUrl()}/api/contentstore/v0/advanced_settings/${courseId}`;
+const getProctoringErrorsApiUrl = () => `${getApiBaseUrl()}/api/contentstore/v1/proctoring_errors/`;
+
+/**
+ * Get's advanced setting for a course.
+ * @param {string} courseId
+ * @returns {Promise<Object>}
+ */
+export async function getCourseAdvancedSettings(courseId) {
+  const { data } = await getAuthenticatedHttpClient()
+    .get(`${getCourseAdvancedSettingsApiUrl(courseId)}?fetch_all=0`);
+  return camelCaseObject(data);
+}
+
+/**
+ * Updates advanced setting for a course.
+ * @param {string} courseId
+ * @param {object} settings
+ * @returns {Promise<Object>}
+ */
+export async function updateCourseAdvancedSettings(courseId, settings) {
+  const { data } = await getAuthenticatedHttpClient()
+    .patch(`${getCourseAdvancedSettingsApiUrl(courseId)}`, convertObjectToSnakeCase(settings));
+  return camelCaseObject(data);
+}
+
+/**
+ * Gets proctoring exam errors.
+ * @param {string} courseId
+ * @returns {Promise<Object>}
+ */
+export async function getProctoringExamErrors(courseId) {
+  const { data } = await getAuthenticatedHttpClient().get(`${getProctoringErrorsApiUrl()}${courseId}`);
+  return camelCaseObject(data);
+}
diff --git a/src/advanced-settings/data/selectors.js b/src/advanced-settings/data/selectors.js
new file mode 100644
index 0000000000..933939df70
--- /dev/null
+++ b/src/advanced-settings/data/selectors.js
@@ -0,0 +1,5 @@
+export const getLoadingStatus = (state) => state.advancedSettings.loadingStatus;
+export const getCourseAppSettings = state => state.advancedSettings.courseAppSettings;
+export const getSavingStatus = (state) => state.advancedSettings.savingStatus;
+export const getProctoringExamErrors = (state) => state.advancedSettings.proctoringErrors;
+export const getSendRequestErrors = (state) => state.advancedSettings.sendRequestErrors.developer_message;
diff --git a/src/advanced-settings/data/slice.js b/src/advanced-settings/data/slice.js
new file mode 100644
index 0000000000..229ba6ebe8
--- /dev/null
+++ b/src/advanced-settings/data/slice.js
@@ -0,0 +1,48 @@
+/* eslint-disable no-param-reassign */
+import { createSlice } from '@reduxjs/toolkit';
+
+import { RequestStatus } from '../../data/constants';
+
+const slice = createSlice({
+  name: 'advancedSettings',
+  initialState: {
+    loadingStatus: RequestStatus.IN_PROGRESS,
+    savingStatus: '',
+    courseAppSettings: {},
+    proctoringErrors: {},
+    sendRequestErrors: {},
+  },
+  reducers: {
+    updateLoadingStatus: (state, { payload }) => {
+      state.loadingStatus = payload.status;
+    },
+    updateSavingStatus: (state, { payload }) => {
+      state.savingStatus = payload.status;
+    },
+    fetchCourseAppsSettingsSuccess: (state, { payload }) => {
+      Object.assign(state.courseAppSettings, payload);
+    },
+    updateCourseAppsSettingsSuccess: (state, { payload }) => {
+      Object.assign(state.courseAppSettings, payload);
+    },
+    getDataSendErrors: (state, { payload }) => {
+      Object.assign(state.sendRequestErrors, payload);
+    },
+    fetchProctoringExamErrorsSuccess: (state, { payload }) => {
+      Object.assign(state.proctoringErrors, payload);
+    },
+  },
+});
+
+export const {
+  updateLoadingStatus,
+  updateSavingStatus,
+  getDataSendErrors,
+  fetchCourseAppsSettingsSuccess,
+  updateCourseAppsSettingsSuccess,
+  fetchProctoringExamErrorsSuccess,
+} = slice.actions;
+
+export const {
+  reducer,
+} = slice;
diff --git a/src/advanced-settings/data/thunks.js b/src/advanced-settings/data/thunks.js
new file mode 100644
index 0000000000..db9030fa39
--- /dev/null
+++ b/src/advanced-settings/data/thunks.js
@@ -0,0 +1,85 @@
+import { RequestStatus } from '../../data/constants';
+import {
+  getCourseAdvancedSettings,
+  updateCourseAdvancedSettings,
+  getProctoringExamErrors,
+} from './api';
+import {
+  fetchCourseAppsSettingsSuccess,
+  updateCourseAppsSettingsSuccess,
+  updateLoadingStatus,
+  updateSavingStatus,
+  fetchProctoringExamErrorsSuccess,
+  getDataSendErrors,
+} from './slice';
+
+export function fetchCourseAppSettings(courseId) {
+  return async (dispatch) => {
+    dispatch(updateLoadingStatus({ status: RequestStatus.IN_PROGRESS }));
+
+    try {
+      const settingValues = await getCourseAdvancedSettings(courseId);
+      const sortedDisplayName = [];
+      Object.values(settingValues).forEach(value => {
+        const { displayName } = value;
+        sortedDisplayName.push(displayName);
+      });
+      const sortedSettingValues = {};
+      sortedDisplayName.sort().forEach((displayName => {
+        Object.entries(settingValues).forEach(([key, value]) => {
+          if (value.displayName === displayName) {
+            sortedSettingValues[key] = value;
+          }
+        });
+      }));
+      dispatch(fetchCourseAppsSettingsSuccess(sortedSettingValues));
+      dispatch(updateLoadingStatus({ status: RequestStatus.SUCCESSFUL }));
+    } catch (error) {
+      if (error.response && error.response.status === 403) {
+        dispatch(updateLoadingStatus({ courseId, status: RequestStatus.DENIED }));
+      } else {
+        dispatch(updateLoadingStatus({ courseId, status: RequestStatus.FAILED }));
+      }
+    }
+  };
+}
+
+export function updateCourseAppSetting(courseId, settings) {
+  return async (dispatch) => {
+    dispatch(updateSavingStatus({ status: RequestStatus.IN_PROGRESS }));
+
+    try {
+      const settingValues = await updateCourseAdvancedSettings(courseId, settings);
+      dispatch(updateCourseAppsSettingsSuccess(settingValues));
+      dispatch(updateSavingStatus({ status: RequestStatus.SUCCESSFUL }));
+      return true;
+    } catch (error) {
+      let errorData;
+      try {
+        const { customAttributes: { httpErrorResponseData } } = error;
+        errorData = JSON.parse(httpErrorResponseData);
+      } catch (err) {
+        errorData = {};
+      }
+
+      dispatch(getDataSendErrors(errorData));
+      dispatch(updateSavingStatus({ status: RequestStatus.FAILED }));
+      return false;
+    }
+  };
+}
+
+export function fetchProctoringExamErrors(courseId) {
+  return async (dispatch) => {
+    dispatch(updateSavingStatus({ status: RequestStatus.IN_PROGRESS }));
+
+    try {
+      const settingValues = await getProctoringExamErrors(courseId);
+      dispatch(fetchProctoringExamErrorsSuccess(settingValues));
+      return true;
+    } catch (error) {
+      dispatch(updateSavingStatus({ status: RequestStatus.FAILED }));
+      return false;
+    }
+  };
+}
diff --git a/src/advanced-settings/index.js b/src/advanced-settings/index.js
new file mode 100644
index 0000000000..a62dfc0901
--- /dev/null
+++ b/src/advanced-settings/index.js
@@ -0,0 +1 @@
+export { default as AdvancedSettings } from './AdvancedSettings';
diff --git a/src/advanced-settings/messages.js b/src/advanced-settings/messages.js
new file mode 100644
index 0000000000..99f0539d86
--- /dev/null
+++ b/src/advanced-settings/messages.js
@@ -0,0 +1,86 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  headingTitle: {
+    id: 'course-authoring.advanced-settings.heading.title',
+    defaultMessage: 'Advanced settings',
+  },
+  headingSubtitle: {
+    id: 'course-authoring.advanced-settings.heading.subtitle',
+    defaultMessage: 'Settings',
+  },
+  policy: {
+    id: 'course-authoring.advanced-settings.policies.title',
+    defaultMessage: 'Manual policy definition',
+  },
+  alertWarning: {
+    id: 'course-authoring.advanced-settings.alert.warning',
+    defaultMessage: "You've made some changes",
+  },
+  alertWarningDescriptions: {
+    id: 'course-authoring.advanced-settings.alert.warning.descriptions',
+    defaultMessage: 'Your changes will not take effect until you save your progress. Take care with key and value formatting, as validation is not implemented.',
+  },
+  alertSuccess: {
+    id: 'course-authoring.advanced-settings.alert.success',
+    defaultMessage: 'Your policy changes have been saved.',
+  },
+  alertSuccessDescriptions: {
+    id: 'course-authoring.advanced-settings.alert.success.descriptions',
+    defaultMessage: 'No validation is performed on policy keys or value pairs. If you are having difficulties, check your formatting.',
+  },
+  alertProctoringError: {
+    id: 'course-authoring.advanced-settings.alert.proctoring.error',
+    defaultMessage: 'This course has protected exam setting that are incomplete or invalid.',
+  },
+  alertProctoringErrorDescriptions: {
+    id: 'course-authoring.advanced-settings.alert.proctoring.error.descriptions',
+    defaultMessage: 'You will be unable to make changes until the following setting are updated on the page below.',
+  },
+  buttonSaveText: {
+    id: 'course-authoring.advanced-settings.alert.button.save',
+    defaultMessage: 'Save changes',
+  },
+  buttonSavingText: {
+    id: 'course-authoring.advanced-settings.alert.button.saving',
+    defaultMessage: 'Saving',
+  },
+  buttonCancelText: {
+    id: 'course-authoring.advanced-settings.alert.button.cancel',
+    defaultMessage: 'Cancel',
+  },
+  deprecatedButtonShowText: {
+    id: 'course-authoring.advanced-settings.deprecated.button.show',
+    defaultMessage: 'Show',
+  },
+  deprecatedButtonHideText: {
+    id: 'course-authoring.advanced-settings.deprecated.button.hide',
+    defaultMessage: 'Hide',
+  },
+  alertWarningAriaLabelledby: {
+    id: 'course-authoring.advanced-settings.alert.warning.aria.labelledby',
+    defaultMessage: 'notification-warning-title',
+  },
+  alertWarningAriaDescribedby: {
+    id: 'course-authoring.advanced-settings.alert.warning.aria.describedby',
+    defaultMessage: 'notification-warning-description',
+  },
+  alertSuccessAriaLabelledby: {
+    id: 'course-authoring.advanced-settings.alert.success.aria.labelledby',
+    defaultMessage: 'alert-confirmation-title',
+  },
+  alertSuccessAriaDescribedby: {
+    id: 'course-authoring.advanced-settings.alert.success.aria.describedby',
+    defaultMessage: 'alert-confirmation-description',
+  },
+  alertProctoringAriaLabelledby: {
+    id: 'course-authoring.advanced-settings.alert.proctoring.error.aria.labelledby',
+    defaultMessage: 'alert-danger-title',
+  },
+  alertProctoringDescribedby: {
+    id: 'course-authoring.advanced-settings.alert.proctoring.error.aria.describedby',
+    defaultMessage: 'alert-danger-description',
+  },
+});
+
+export default messages;
diff --git a/src/advanced-settings/modal-error/ModalError.jsx b/src/advanced-settings/modal-error/ModalError.jsx
new file mode 100644
index 0000000000..fd7312a0e7
--- /dev/null
+++ b/src/advanced-settings/modal-error/ModalError.jsx
@@ -0,0 +1,63 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ActionRow, AlertModal, Button } from '@openedx/paragon';
+import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+
+import ModalErrorListItem from './ModalErrorListItem';
+import messages from './messages';
+
+const ModalError = ({
+  intl, isError, handleUndoChanges, showErrorModal, errorList, settingsData,
+}) => (
+  <AlertModal
+    title={intl.formatMessage(messages.modalErrorTitle)}
+    isOpen={isError}
+    variant="danger"
+    footerNode={(
+      <ActionRow>
+        <Button
+          variant="tertiary"
+          onClick={() => showErrorModal(!isError)}
+        >
+          {intl.formatMessage(messages.modalErrorButtonChangeManually)}
+        </Button>
+        <Button onClick={handleUndoChanges}>
+          {intl.formatMessage(messages.modalErrorButtonUndoChanges)}
+        </Button>
+      </ActionRow>
+    )}
+  >
+    <p>
+      <FormattedMessage
+        id="course-authoring.advanced-settings.modal.error.description"
+        defaultMessage="There was {errorCounter} while trying to save the course settings in the database.
+            Please check the following validation feedbacks and reflect them in your course settings:"
+        values={{ errorCounter: <strong>{errorList.length} validation error </strong> }}
+      />
+    </p>
+    <hr />
+    <ul className="p-0">
+      {errorList.map((settingName) => (
+        <ModalErrorListItem
+          key={settingName.key}
+          settingName={settingName}
+          settingsData={settingsData}
+        />
+      ))}
+    </ul>
+  </AlertModal>
+);
+
+ModalError.propTypes = {
+  intl: intlShape.isRequired,
+  isError: PropTypes.bool.isRequired,
+  handleUndoChanges: PropTypes.func.isRequired,
+  showErrorModal: PropTypes.func.isRequired,
+  errorList: PropTypes.arrayOf(PropTypes.shape({
+    key: PropTypes.string,
+    message: PropTypes.string,
+  })).isRequired,
+  settingsData: PropTypes.shape({}).isRequired,
+};
+
+export default injectIntl(ModalError);
diff --git a/src/advanced-settings/modal-error/ModalError.test.jsx b/src/advanced-settings/modal-error/ModalError.test.jsx
new file mode 100644
index 0000000000..7ee0cff3a3
--- /dev/null
+++ b/src/advanced-settings/modal-error/ModalError.test.jsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import ModalError from './ModalError';
+import messages from './messages';
+
+const handleUndoChangesMock = jest.fn();
+const showErrorModalMock = jest.fn();
+
+const errorList = [
+  { key: 'setting1', message: 'Error 1' },
+  { key: 'setting2', message: 'Error 2' },
+];
+
+const settingsData = {
+  setting1: 'value1',
+  setting2: 'value2',
+};
+
+const RootWrapper = () => (
+  <IntlProvider locale="en">
+    <ModalError
+      isError
+      handleUndoChanges={handleUndoChangesMock}
+      showErrorModal={showErrorModalMock}
+      errorList={errorList}
+      settingsData={settingsData}
+    />
+  </IntlProvider>
+);
+
+describe('<ModalError />', () => {
+  it('calls handleUndoChanges when "Undo changes" button is clicked', () => {
+    const { getByText } = render(<RootWrapper />);
+    const undoChangesButton = getByText(messages.modalErrorButtonUndoChanges.defaultMessage);
+    fireEvent.click(undoChangesButton);
+    expect(handleUndoChangesMock).toHaveBeenCalledTimes(1);
+  });
+  it('calls showErrorModal when "Change manually" button is clicked', () => {
+    const { getByText } = render(<RootWrapper />);
+    const changeManuallyButton = getByText(messages.modalErrorButtonChangeManually.defaultMessage);
+    fireEvent.click(changeManuallyButton);
+    expect(showErrorModalMock).toHaveBeenCalledTimes(1);
+  });
+  it('renders error message with correct values', () => {
+    const { getByText } = render(<RootWrapper />);
+    expect(getByText(/There was/i)).toBeInTheDocument();
+    expect(getByText(/2 validation error/i)).toBeInTheDocument();
+    expect(getByText(/while trying to save the course settings in the database. Please check the following validation feedbacks and reflect them in your course settings:/i)).toBeInTheDocument();
+    expect(getByText(messages.modalErrorTitle.defaultMessage)).toBeInTheDocument();
+  });
+  it('renders correct number of errors', () => {
+    const { getByText } = render(<RootWrapper />);
+    expect(getByText('Error 1')).toBeInTheDocument();
+    expect(getByText('Error 2')).toBeInTheDocument();
+  });
+});
diff --git a/src/advanced-settings/modal-error/ModalErrorListItem.jsx b/src/advanced-settings/modal-error/ModalErrorListItem.jsx
new file mode 100644
index 0000000000..70665f2fb3
--- /dev/null
+++ b/src/advanced-settings/modal-error/ModalErrorListItem.jsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Alert, Icon } from '@openedx/paragon';
+import { Error } from '@openedx/paragon/icons';
+import { capitalize } from 'lodash';
+
+import { transformKeysToCamelCase } from '../../utils';
+
+const ModalErrorListItem = ({ settingName, settingsData }) => {
+  const { displayName } = settingsData[transformKeysToCamelCase(settingName)];
+  return (
+    <li className="modal-error-item">
+      <Alert variant="danger">
+        <h4 className="modal-error-item-title">
+          <Icon src={Error} />{capitalize(displayName)}:
+        </h4>
+        <p className="m-0">{settingName.message}</p>
+      </Alert>
+    </li>
+  );
+};
+
+ModalErrorListItem.propTypes = {
+  settingName: PropTypes.shape({
+    key: PropTypes.string,
+    message: PropTypes.string,
+  }).isRequired,
+  settingsData: PropTypes.shape({}).isRequired,
+};
+
+export default ModalErrorListItem;
diff --git a/src/advanced-settings/modal-error/ModalErrorListItem.test.jsx b/src/advanced-settings/modal-error/ModalErrorListItem.test.jsx
new file mode 100644
index 0000000000..0361d34531
--- /dev/null
+++ b/src/advanced-settings/modal-error/ModalErrorListItem.test.jsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import ModalErrorListItem from './ModalErrorListItem';
+
+const settingName = {
+  key: 'exampleKey',
+  message: 'Error message',
+};
+
+const settingsData = {
+  exampleKey: {
+    displayName: 'Error field',
+  },
+};
+
+const RootWrapper = () => (
+  <IntlProvider locale="en">
+    <ModalErrorListItem settingName={settingName} settingsData={settingsData} />
+  </IntlProvider>
+);
+
+describe('<ModalErrorListItem />', () => {
+  it('renders the display name and error message', () => {
+    const { getByText } = render(<RootWrapper />);
+    expect(getByText('Error field:')).toBeInTheDocument();
+    expect(getByText('Error message')).toBeInTheDocument();
+  });
+  it('renders the alert with variant "danger"', () => {
+    const { getByRole } = render(<RootWrapper />);
+    expect(getByRole('alert')).toHaveClass('alert-danger');
+  });
+});
diff --git a/src/advanced-settings/modal-error/messages.js b/src/advanced-settings/modal-error/messages.js
new file mode 100644
index 0000000000..aebb23ac25
--- /dev/null
+++ b/src/advanced-settings/modal-error/messages.js
@@ -0,0 +1,18 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  modalErrorTitle: {
+    id: 'course-authoring.advanced-settings.modal.error.title',
+    defaultMessage: 'Validation error while saving',
+  },
+  modalErrorButtonChangeManually: {
+    id: 'course-authoring.advanced-settings.modal.error.btn.change-manually',
+    defaultMessage: 'Change manually',
+  },
+  modalErrorButtonUndoChanges: {
+    id: 'course-authoring.advanced-settings.modal.error.btn.undo-changes',
+    defaultMessage: 'Undo changes',
+  },
+});
+
+export default messages;
diff --git a/src/advanced-settings/scss/AdvancedSettings.scss b/src/advanced-settings/scss/AdvancedSettings.scss
new file mode 100644
index 0000000000..c4252d6147
--- /dev/null
+++ b/src/advanced-settings/scss/AdvancedSettings.scss
@@ -0,0 +1,124 @@
+@import "variables";
+
+.advanced-settings {
+  .help-sidebar {
+    margin-top: 8.75rem;
+  }
+
+  .setting-items-policies {
+    .setting-items-deprecated-setting {
+      float: right;
+      margin-bottom: 1.75rem;
+    }
+
+    .instructions,
+    strong {
+      color: $text-color-base;
+      font-weight: 400;
+    }
+  }
+
+  .setting-card {
+    margin-bottom: 1.75rem;
+
+    .pgn__card-header .pgn__card-header-title-md {
+      font-size: 1.125rem;
+    }
+  }
+}
+
+.alert-toast {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  padding: 0 .625rem;
+  z-index: $zindex-modal;
+}
+
+.alert-proctoring-error {
+  list-style: none;
+}
+
+.setting-items-list {
+  li {
+    list-style: none;
+  }
+
+  .form-control {
+    min-height: 2.75rem;
+    flex-grow: 1;
+  }
+
+  .pgn__card-header {
+    padding: 0 0 0 1.5rem;
+  }
+
+  .pgn__card-status {
+    padding: .625rem;
+  }
+
+  .pgn__card-header-content {
+    margin-top: 1.438rem;
+    margin-bottom: 1.438rem;
+  }
+}
+
+.setting-sidebar-supplementary {
+  .setting-sidebar-supplementary-about {
+    .setting-sidebar-supplementary-about-title {
+      font: normal $font-weight-bold 1.125rem/1.5rem $font-family-base;
+      color: $headings-color;
+      margin-bottom: 1.25rem;
+    }
+
+    .setting-sidebar-supplementary-about-descriptions {
+      font: normal $font-weight-normal .875rem/1.5rem $font-family-base;
+      color: $text-color-base;
+    }
+  }
+
+  .setting-sidebar-supplementary-other-links ul {
+    list-style: none;
+
+    .setting-sidebar-supplementary-other-link {
+      font: normal $font-weight-normal .875rem/1.5rem $font-family-base;
+      line-height: 1.5rem;
+      color: $info-500;
+      margin-bottom: .5rem;
+    }
+  }
+
+  .setting-sidebar-supplementary-other-title {
+    font: normal $font-weight-bold 1.125rem/1.5rem $font-family-base;
+    color: $headings-color;
+    margin-bottom: 1.25rem;
+  }
+}
+
+.modal-error-item {
+  list-style: none;
+
+  .pgn__icon {
+    display: inline-block;
+    margin-right: 5px;
+    margin-bottom: 5px;
+    color: $danger;
+  }
+
+  .modal-error-item-title {
+    display: flex;
+    align-items: center;
+  }
+}
+
+.modal-popup-content {
+  max-width: 200px;
+  color: $white;
+  background-color: $black;
+  filter: drop-shadow(0 2px 4px rgba(0 0 0 / .15));
+  font-weight: 400;
+}
+
+.pgn__modal-popup__arrow::after {
+  border-top-color: $black;
+}
diff --git a/src/advanced-settings/scss/_variables.scss b/src/advanced-settings/scss/_variables.scss
new file mode 100644
index 0000000000..22c26a836f
--- /dev/null
+++ b/src/advanced-settings/scss/_variables.scss
@@ -0,0 +1 @@
+$text-color-base: $gray-700;
diff --git a/src/advanced-settings/setting-card/SettingCard.jsx b/src/advanced-settings/setting-card/SettingCard.jsx
new file mode 100644
index 0000000000..71d93d978f
--- /dev/null
+++ b/src/advanced-settings/setting-card/SettingCard.jsx
@@ -0,0 +1,140 @@
+import React, { useState } from 'react';
+import {
+  ActionRow,
+  Card,
+  Form,
+  Icon,
+  IconButton,
+  ModalPopup,
+  useToggle,
+} from '@openedx/paragon';
+import { InfoOutline, Warning } from '@openedx/paragon/icons';
+import PropTypes from 'prop-types';
+import { capitalize } from 'lodash';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import TextareaAutosize from 'react-textarea-autosize';
+
+import messages from './messages';
+
+const SettingCard = ({
+  name,
+  settingData,
+  handleBlur,
+  setEdited,
+  showSaveSettingsPrompt,
+  saveSettingsPrompt,
+  isEditableState,
+  setIsEditableState,
+  // injected
+  intl,
+}) => {
+  const { deprecated, help, displayName } = settingData;
+  const initialValue = JSON.stringify(settingData.value, null, 4);
+  const [isOpen, open, close] = useToggle(false);
+  const [target, setTarget] = useState(null);
+  const [newValue, setNewValue] = useState(initialValue);
+
+  const handleSettingChange = (e) => {
+    const { value } = e.target;
+    setNewValue(e.target.value);
+    if (value !== initialValue) {
+      if (!saveSettingsPrompt) {
+        showSaveSettingsPrompt(true);
+      }
+      if (!isEditableState) {
+        setIsEditableState(true);
+      }
+    }
+  };
+
+  const handleCardBlur = () => {
+    setEdited((prevEditedSettings) => ({
+      ...prevEditedSettings,
+      [name]: newValue,
+    }));
+    handleBlur();
+  };
+
+  return (
+    <li className="field-group course-advanced-policy-list-item">
+      <Card className="flex-column setting-card">
+        <Card.Body className="d-flex row m-0 align-items-center">
+          <Card.Header
+            className="col-6"
+            title={(
+              <ActionRow>
+                {capitalize(displayName)}
+                <IconButton
+                  ref={setTarget}
+                  onClick={open}
+                  src={InfoOutline}
+                  iconAs={Icon}
+                  alt={intl.formatMessage(messages.helpButtonText)}
+                  variant="primary"
+                  className="flex-shrink-0 ml-1 mr-2"
+                />
+                <ModalPopup
+                  hasArrow
+                  placement="right"
+                  positionRef={target}
+                  isOpen={isOpen}
+                  onClose={close}
+                  className="pgn__modal-popup__arrow"
+                >
+                  <div
+                    className="p-2 x-small rounded modal-popup-content"
+                    // eslint-disable-next-line react/no-danger
+                    dangerouslySetInnerHTML={{ __html: help }}
+                  />
+                </ModalPopup>
+                <ActionRow.Spacer />
+              </ActionRow>
+            )}
+          />
+          <Card.Section className="col-6 flex-grow-1">
+            <Form.Group className="m-0">
+              <Form.Control
+                as={TextareaAutosize}
+                value={isEditableState ? newValue : initialValue}
+                name={name}
+                onChange={handleSettingChange}
+                aria-label={displayName}
+                onBlur={handleCardBlur}
+              />
+            </Form.Group>
+          </Card.Section>
+        </Card.Body>
+        {deprecated && (
+          <Card.Status icon={Warning} variant="danger">
+            {intl.formatMessage(messages.deprecated)}
+          </Card.Status>
+        )}
+      </Card>
+    </li>
+  );
+};
+
+SettingCard.propTypes = {
+  intl: intlShape.isRequired,
+  settingData: PropTypes.shape({
+    deprecated: PropTypes.bool,
+    help: PropTypes.string,
+    displayName: PropTypes.string,
+    value: PropTypes.PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.bool,
+      PropTypes.number,
+      PropTypes.object,
+      PropTypes.array,
+    ]),
+  }).isRequired,
+  setEdited: PropTypes.func.isRequired,
+  showSaveSettingsPrompt: PropTypes.func.isRequired,
+  name: PropTypes.string.isRequired,
+  handleBlur: PropTypes.func.isRequired,
+  saveSettingsPrompt: PropTypes.bool.isRequired,
+  isEditableState: PropTypes.bool.isRequired,
+  setIsEditableState: PropTypes.func.isRequired,
+};
+
+export default injectIntl(SettingCard);
diff --git a/src/advanced-settings/setting-card/SettingCard.test.jsx b/src/advanced-settings/setting-card/SettingCard.test.jsx
new file mode 100644
index 0000000000..a03f51a985
--- /dev/null
+++ b/src/advanced-settings/setting-card/SettingCard.test.jsx
@@ -0,0 +1,96 @@
+import React from 'react';
+import { fireEvent, render, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import SettingCard from './SettingCard';
+import messages from './messages';
+
+const setEdited = jest.fn();
+const showSaveSettingsPrompt = jest.fn();
+const setIsEditableState = jest.fn();
+const handleBlur = jest.fn();
+
+const settingData = {
+  deprecated: false,
+  help: 'This is a help message',
+  displayName: 'Setting Name',
+  value: 'Setting Value',
+};
+
+jest.mock('react-textarea-autosize', () => jest.fn((props) => (
+  <textarea
+    {...props}
+    onFocus={() => {}}
+    onBlur={() => {}}
+  />
+)));
+
+const RootWrapper = () => (
+  <IntlProvider locale="en">
+    <SettingCard
+      intl={{}}
+      isOn
+      name="settingName"
+      setEdited={setEdited}
+      setIsEditableState={setIsEditableState}
+      showSaveSettingsPrompt={showSaveSettingsPrompt}
+      settingData={settingData}
+      handleBlur={handleBlur}
+      isEditableState
+      saveSettingsPrompt={false}
+    />
+  </IntlProvider>
+);
+
+describe('<SettingCard />', () => {
+  afterEach(() => jest.clearAllMocks());
+  it('renders the setting card with the provided data', () => {
+    const { getByText, getByLabelText } = render(<RootWrapper />);
+    const cardTitle = getByText(/Setting Name/i);
+    const input = getByLabelText(/Setting Name/i);
+    expect(cardTitle).toBeInTheDocument();
+    expect(input).toBeInTheDocument();
+    expect(input.value).toBe(JSON.stringify(settingData.value, null, 4));
+  });
+  it('displays the deprecated status when the setting is deprecated', () => {
+    const deprecatedSettingData = { ...settingData, deprecated: true };
+    const { getByText } = render(
+      <IntlProvider locale="en">
+        <SettingCard
+          intl={{}}
+          isOn
+          name="settingName"
+          setEdited={setEdited}
+          setIsEditableState={setIsEditableState}
+          showSaveSettingsPrompt={showSaveSettingsPrompt}
+          settingData={deprecatedSettingData}
+          handleBlur={handleBlur}
+          isEditable={false}
+          saveSettingsPrompt
+        />
+      </IntlProvider>,
+    );
+    const deprecatedStatus = getByText(messages.deprecated.defaultMessage);
+    expect(deprecatedStatus).toBeInTheDocument();
+  });
+  it('does not display the deprecated status when the setting is not deprecated', () => {
+    const { queryByText } = render(<RootWrapper />);
+    expect(queryByText(messages.deprecated.defaultMessage)).toBeNull();
+  });
+  it('calls setEdited on blur', async () => {
+    const { getByLabelText } = render(<RootWrapper />);
+    const inputBox = getByLabelText(/Setting Name/i);
+    fireEvent.focus(inputBox);
+    userEvent.clear(inputBox);
+    userEvent.type(inputBox, '3, 2, 1');
+    await waitFor(() => {
+      expect(inputBox).toHaveValue('3, 2, 1');
+    });
+    await (async () => {
+      expect(setEdited).toHaveBeenCalled();
+      expect(handleBlur).toHaveBeenCalled();
+    });
+    fireEvent.focusOut(inputBox);
+  });
+});
diff --git a/src/advanced-settings/setting-card/messages.js b/src/advanced-settings/setting-card/messages.js
new file mode 100644
index 0000000000..8582217669
--- /dev/null
+++ b/src/advanced-settings/setting-card/messages.js
@@ -0,0 +1,14 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  deprecated: {
+    id: 'course-authoring.advanced-settings.button.deprecated',
+    defaultMessage: 'Deprecated',
+  },
+  helpButtonText: {
+    id: 'course-authoring.advanced-settings.button.help',
+    defaultMessage: 'Show help text',
+  },
+});
+
+export default messages;
diff --git a/src/advanced-settings/settings-sidebar/SettingsSidebar.jsx b/src/advanced-settings/settings-sidebar/SettingsSidebar.jsx
new file mode 100644
index 0000000000..dd20e63c9d
--- /dev/null
+++ b/src/advanced-settings/settings-sidebar/SettingsSidebar.jsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import {
+  FormattedMessage,
+  injectIntl,
+  intlShape,
+} from '@edx/frontend-platform/i18n';
+import PropTypes from 'prop-types';
+
+import { HelpSidebar } from '../../generic/help-sidebar';
+import messages from './messages';
+
+const SettingsSidebar = ({ intl, courseId, proctoredExamSettingsUrl }) => (
+  <HelpSidebar
+    courseId={courseId}
+    proctoredExamSettingsUrl={proctoredExamSettingsUrl}
+    showOtherSettings
+  >
+    <h4 className="help-sidebar-about-title">
+      {intl.formatMessage(messages.about)}
+    </h4>
+    <p className="help-sidebar-about-descriptions">
+      {intl.formatMessage(messages.aboutDescription1)}
+    </p>
+    <p className="help-sidebar-about-descriptions">
+      {intl.formatMessage(messages.aboutDescription2)}
+    </p>
+    <p className="help-sidebar-about-descriptions">
+      <FormattedMessage
+        id="course-authoring.advanced-settings.about.description-3"
+        defaultMessage="{notice} When you enter strings as policy values, ensure that you use double quotation marks (“) around the string. Do not use single quotation marks (‘)."
+        values={{ notice: <strong>Note:</strong> }}
+      />
+    </p>
+  </HelpSidebar>
+);
+
+SettingsSidebar.defaultProps = {
+  proctoredExamSettingsUrl: '',
+};
+
+SettingsSidebar.propTypes = {
+  intl: intlShape.isRequired,
+  courseId: PropTypes.string.isRequired,
+  proctoredExamSettingsUrl: PropTypes.string,
+};
+
+export default injectIntl(SettingsSidebar);
diff --git a/src/advanced-settings/settings-sidebar/SettingsSidebar.test.jsx b/src/advanced-settings/settings-sidebar/SettingsSidebar.test.jsx
new file mode 100644
index 0000000000..9a5801a8e1
--- /dev/null
+++ b/src/advanced-settings/settings-sidebar/SettingsSidebar.test.jsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { initializeMockApp } from '@edx/frontend-platform';
+import { AppProvider } from '@edx/frontend-platform/react';
+
+import initializeStore from '../../store';
+import SettingsSidebar from './SettingsSidebar';
+import messages from './messages';
+
+const courseId = 'course-123';
+let store;
+
+const RootWrapper = () => (
+  <AppProvider store={store}>
+    <IntlProvider locale="en" messages={{}}>
+      <SettingsSidebar intl={{ formatMessage: jest.fn() }} courseId={courseId} />
+    </IntlProvider>
+  </AppProvider>
+);
+
+describe('<SettingsSidebar />', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+    store = initializeStore();
+  });
+  it('renders about and other sidebar titles correctly', () => {
+    const { getByText } = render(<RootWrapper />);
+    expect(getByText(messages.about.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.other.defaultMessage)).toBeInTheDocument();
+  });
+  it('renders about descriptions correctly', () => {
+    const { getByText } = render(<RootWrapper />);
+    const aboutThirtyDescription = getByText('When you enter strings as policy values, ensure that you use double quotation marks (“) around the string. Do not use single quotation marks (‘).');
+    expect(getByText(messages.aboutDescription1.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.aboutDescription2.defaultMessage)).toBeInTheDocument();
+    expect(aboutThirtyDescription).toBeInTheDocument();
+  });
+});
diff --git a/src/advanced-settings/settings-sidebar/messages.js b/src/advanced-settings/settings-sidebar/messages.js
new file mode 100644
index 0000000000..e96ce3b619
--- /dev/null
+++ b/src/advanced-settings/settings-sidebar/messages.js
@@ -0,0 +1,47 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  about: {
+    id: 'course-authoring.advanced-settings.sidebar.about.title',
+    defaultMessage: 'What do advanced settings do?',
+  },
+  aboutDescription1: {
+    id: 'course-authoring.advanced-settings.sidebar.about.description-1',
+    defaultMessage: 'Advanced settings control specific course functionality. On this page, you can edit manual policies, which are JSON-based key and value pairs that control specific course settings.',
+  },
+  aboutDescription2: {
+    id: 'course-authoring.advanced-settings.sidebar.about.description-2',
+    defaultMessage: 'Any policies you modify here override all other information you’ve defined elsewhere in Studio. Do not edit policies unless you are familiar with both their purpose and syntax.',
+  },
+  other: {
+    id: 'course-authoring.advanced-settings.sidebar.other.title',
+    defaultMessage: 'Other course settings',
+  },
+  otherCourseSettingsLinkToScheduleAndDetails: {
+    id: 'course-authoring.advanced-settings.sidebar.links.schedule-and-details',
+    defaultMessage: 'Details & schedule',
+    description: 'Link to Studio Details & schedule page',
+  },
+  otherCourseSettingsLinkToGrading: {
+    id: 'course-authoring.advanced-settings.sidebar.links.grading',
+    defaultMessage: 'Grading',
+    description: 'Link to Studio Grading page',
+  },
+  otherCourseSettingsLinkToCourseTeam: {
+    id: 'course-authoring.advanced-settings.sidebar.links.course-team',
+    defaultMessage: 'Course team',
+    description: 'Link to Studio Course team page',
+  },
+  otherCourseSettingsLinkToGroupConfigurations: {
+    id: 'course-authoring.advanced-settings.sidebar.links.group-configurations',
+    defaultMessage: 'Group configurations',
+    description: 'Link to Studio Group configurations page',
+  },
+  otherCourseSettingsLinkToProctoredExamSettings: {
+    id: 'course-authoring.advanced-settings.sidebar.links.proctored-exam-settings',
+    defaultMessage: 'Proctored exam settings',
+    description: 'Link to Proctored exam settings page',
+  },
+});
+
+export default messages;
diff --git a/src/advanced-settings/utils.js b/src/advanced-settings/utils.js
new file mode 100644
index 0000000000..7a8387e924
--- /dev/null
+++ b/src/advanced-settings/utils.js
@@ -0,0 +1,48 @@
+/**
+ * Validates advanced settings data by checking if the provided settings are correctly formatted JSON.
+ * It performs validation on a given object of settings, detects incorrectly formatted settings,
+ * and sets error fields accordingly using the setErrorFields function.
+ *
+ * @param {object} settingObj - The object containing the settings to validate.
+ * @param {function} setErrorFields - The function to set error fields.
+ * @returns {boolean} - `true` if the data is valid, otherwise `false`.
+ */
+export default function validateAdvancedSettingsData(settingObj, setErrorFields, setEditedSettings) {
+  const fieldsWithErrors = [];
+
+  const pushDataToErrorArray = (settingName) => {
+    fieldsWithErrors.push({ key: settingName, message: 'Incorrectly formatted JSON' });
+  };
+
+  Object.entries(settingObj).forEach(([settingName, settingValue]) => {
+    try {
+      JSON.parse(settingValue);
+    } catch (e) {
+      let targetSettingValue = settingValue;
+      const firstNonWhite = settingValue.substring(0, 1);
+      const isValid = !['{', '[', "'"].includes(firstNonWhite);
+
+      if (isValid) {
+        try {
+          targetSettingValue = `"${ targetSettingValue.trim() }"`;
+          JSON.parse(targetSettingValue);
+          setEditedSettings((prevEditedSettings) => ({
+            ...prevEditedSettings,
+            [settingName]: targetSettingValue,
+          }));
+        } catch (quotedE) { /* empty */ }
+      }
+
+      pushDataToErrorArray(settingName);
+    }
+  });
+
+  setErrorFields((prevState) => {
+    if (JSON.stringify(prevState) !== JSON.stringify(fieldsWithErrors)) {
+      return fieldsWithErrors;
+    }
+    return prevState;
+  });
+
+  return fieldsWithErrors.length === 0;
+}
diff --git a/src/advanced-settings/utils.test.js b/src/advanced-settings/utils.test.js
new file mode 100644
index 0000000000..1e6d0bb42a
--- /dev/null
+++ b/src/advanced-settings/utils.test.js
@@ -0,0 +1,29 @@
+import validateAdvancedSettingsData from './utils';
+
+describe('validateAdvancedSettingsData', () => {
+  it('should validate correctly formatted settings and return true', () => {
+    const settingObj = {
+      setting1: '{ "key": "value" }',
+      setting2: '{ "key": "value" }',
+    };
+    const setErrorFieldsMock = jest.fn();
+    const setEditedSettingsMock = jest.fn();
+    const isValid = validateAdvancedSettingsData(settingObj, setErrorFieldsMock, setEditedSettingsMock);
+    expect(isValid).toBe(true);
+    expect(setErrorFieldsMock).toHaveBeenCalledTimes(1);
+    expect(setEditedSettingsMock).toHaveBeenCalledTimes(0);
+  });
+  it('should validate incorrectly formatted settings and set error fields', () => {
+    const settingObj = {
+      setting1: '{ "key": "value" }',
+      setting2: 'incorrectJSON',
+      setting3: '{ "key": "value" }',
+    };
+    const setErrorFieldsMock = jest.fn();
+    const setEditedSettingsMock = jest.fn();
+    const isValid = validateAdvancedSettingsData(settingObj, setErrorFieldsMock, setEditedSettingsMock);
+    expect(isValid).toBe(false);
+    expect(setErrorFieldsMock).toHaveBeenCalledTimes(1);
+    expect(setEditedSettingsMock).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/src/assets/scss/_animations.scss b/src/assets/scss/_animations.scss
new file mode 100644
index 0000000000..2100b62a41
--- /dev/null
+++ b/src/assets/scss/_animations.scss
@@ -0,0 +1,9 @@
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/assets/scss/_form.scss b/src/assets/scss/_form.scss
new file mode 100644
index 0000000000..9ca6aa170b
--- /dev/null
+++ b/src/assets/scss/_form.scss
@@ -0,0 +1,85 @@
+.form-group-custom {
+  .pgn__form-label {
+    font: normal $font-weight-bold .75rem/1.25rem $font-family-base;
+    color: $gray-500;
+    margin-bottom: .5rem;
+  }
+
+  .pgn__form-control-description,
+  .pgn__form-text {
+    font: normal $font-weight-normal .75rem/1.25rem $font-family-base;
+    color: $gray-500;
+    margin-top: .5rem;
+  }
+
+  .dropdown-toggle {
+    width: 100%;
+    justify-content: space-between;
+  }
+
+  .form-group-custom_isInvalid {
+    input {
+      border-color: $form-feedback-invalid-color;
+    }
+  }
+
+  .feedback-error {
+    color: $form-feedback-invalid-color;
+  }
+}
+
+.datepicker-custom {
+  margin: 0;
+
+  .datepicker-custom-control {
+    display: block;
+    width: 100%;
+    font-size: $input-font-size;
+    font-weight: $input-font-weight;
+    line-height: $input-line-height;
+    background: $input-bg;
+    border-color: $input-border-color;
+    border-width: $input-border-width;
+    box-shadow: $input-box-shadow;
+    border-radius: $input-border-radius;
+    color: $input-color;
+    padding: $input-padding-y $input-padding-x;
+    height: $input-height;
+    resize: none;
+
+    &:focus,
+    :focus-visible {
+      color: $input-focus-color;
+      background-color: $input-bg;
+      border-color: $input-focus-border-color;
+      box-shadow: $input-focus-box-shadow;
+      outline: 0;
+    }
+
+    &::placeholder {
+      color: $input-placeholder-color;
+    }
+  }
+
+  .datepicker-custom-control_readonly {
+    border-color: transparent;
+    background: $input-disabled-bg;
+  }
+
+  .datepicker-custom-control_isInvalid {
+    border-color: $form-feedback-invalid-color;
+  }
+
+  .datepicker-custom-control-icon {
+    position: absolute;
+    z-index: 2;
+    right: 1.188rem;
+    top: 50%;
+    transform: translateY(-50%);
+    color: $black;
+  }
+}
+
+.react-datepicker-popper {
+  z-index: 3;
+}
diff --git a/src/assets/scss/_utilities.scss b/src/assets/scss/_utilities.scss
new file mode 100644
index 0000000000..2caa9558e5
--- /dev/null
+++ b/src/assets/scss/_utilities.scss
@@ -0,0 +1,15 @@
+.text-black {
+  color: $black;
+}
+
+.h-200px {
+  height: 200px;
+}
+
+.mw-300px {
+  max-width: 300px;
+}
+
+.right-0 {
+  right: 0;
+}
diff --git a/src/assets/scss/_variables.scss b/src/assets/scss/_variables.scss
new file mode 100644
index 0000000000..a3f23431f6
--- /dev/null
+++ b/src/assets/scss/_variables.scss
@@ -0,0 +1,2 @@
+$text-color-base: $gray-700;
+$text-color-weak: #3E3E3C;
diff --git a/src/certificates/Certificates.jsx b/src/certificates/Certificates.jsx
new file mode 100644
index 0000000000..ef199f0992
--- /dev/null
+++ b/src/certificates/Certificates.jsx
@@ -0,0 +1,57 @@
+import { Helmet } from 'react-helmet';
+import PropTypes from 'prop-types';
+
+import Placeholder from '../editors/Placeholder';
+import { RequestStatus } from '../data/constants';
+import Loading from '../generic/Loading';
+import useCertificates from './hooks/useCertificates';
+import CertificateWithoutModes from './certificate-without-modes/CertificateWithoutModes';
+import EmptyCertificatesWithModes from './empty-certificates-with-modes/EmptyCertificatesWithModes';
+import CertificatesList from './certificates-list/CertificatesList';
+import CertificateCreateForm from './certificate-create-form/CertificateCreateForm';
+import CertificateEditForm from './certificate-edit-form/CertificateEditForm';
+import { MODE_STATES } from './data/constants';
+import MainLayout from './layout/MainLayout';
+
+const MODE_COMPONENTS = {
+  [MODE_STATES.noModes]: CertificateWithoutModes,
+  [MODE_STATES.noCertificates]: EmptyCertificatesWithModes,
+  [MODE_STATES.create]: CertificateCreateForm,
+  [MODE_STATES.view]: CertificatesList,
+  [MODE_STATES.editAll]: CertificateEditForm,
+};
+
+const Certificates = ({ courseId }) => {
+  const {
+    certificates, componentMode, isLoading, loadingStatus, pageHeadTitle, hasCertificateModes,
+  } = useCertificates({ courseId });
+
+  if (isLoading) {
+    return <Loading />;
+  }
+
+  if (loadingStatus === RequestStatus.DENIED) {
+    return (
+      <div className="row justify-content-center m-6" data-testid="request-denied-placeholder">
+        <Placeholder />
+      </div>
+    );
+  }
+
+  const ModeComponent = MODE_COMPONENTS[componentMode] || MODE_COMPONENTS[MODE_STATES.noModes];
+
+  return (
+    <>
+      <Helmet><title>{pageHeadTitle}</title></Helmet>
+      <MainLayout courseId={courseId} showHeaderButtons={hasCertificateModes && certificates?.length > 0}>
+        <ModeComponent courseId={courseId} />
+      </MainLayout>
+    </>
+  );
+};
+
+Certificates.propTypes = {
+  courseId: PropTypes.string.isRequired,
+};
+
+export default Certificates;
diff --git a/src/certificates/Certificates.test.jsx b/src/certificates/Certificates.test.jsx
new file mode 100644
index 0000000000..e04d50a21c
--- /dev/null
+++ b/src/certificates/Certificates.test.jsx
@@ -0,0 +1,189 @@
+import { render, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { initializeMockApp } from '@edx/frontend-platform';
+import { AppProvider } from '@edx/frontend-platform/react';
+import MockAdapter from 'axios-mock-adapter';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+
+import { RequestStatus } from '../data/constants';
+import { executeThunk } from '../utils';
+import initializeStore from '../store';
+import { getCertificatesApiUrl } from './data/api';
+import { fetchCertificates } from './data/thunks';
+import { certificatesDataMock } from './__mocks__';
+import Certificates from './Certificates';
+import messages from './messages';
+
+let axiosMock;
+let store;
+const courseId = 'course-123';
+
+const renderComponent = (props) => render(
+  <AppProvider store={store} messages={{}}>
+    <IntlProvider locale="en">
+      <Certificates courseId={courseId} {...props} />
+    </IntlProvider>
+  </AppProvider>,
+);
+
+describe('Certificates', () => {
+  beforeEach(async () => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+    store = initializeStore();
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+  });
+
+  it('renders WithoutModes when there are certificates but no certificate modes', async () => {
+    const noModesMock = {
+      ...certificatesDataMock,
+      courseModes: [],
+      hasCertificateModes: false,
+    };
+
+    axiosMock
+      .onGet(getCertificatesApiUrl(courseId))
+      .reply(200, noModesMock);
+    await executeThunk(fetchCertificates(courseId), store.dispatch);
+
+    const { getByText, queryByRole } = renderComponent();
+
+    await waitFor(() => {
+      expect(getByText(messages.withoutModesText.defaultMessage)).toBeInTheDocument();
+      expect(queryByRole('button', { name: messages.headingActionsPreview.defaultMessage })).not.toBeInTheDocument();
+    });
+  });
+
+  it('renders WithoutModes when there are no certificate modes', async () => {
+    const noModesMock = {
+      ...certificatesDataMock,
+      certificates: [],
+      courseModes: [],
+      hasCertificateModes: false,
+    };
+
+    axiosMock
+      .onGet(getCertificatesApiUrl(courseId))
+      .reply(200, noModesMock);
+    await executeThunk(fetchCertificates(courseId), store.dispatch);
+
+    const { getByText, queryByText } = renderComponent();
+
+    await waitFor(() => {
+      expect(getByText(messages.withoutModesText.defaultMessage)).toBeInTheDocument();
+      expect(queryByText(messages.noCertificatesText.defaultMessage)).not.toBeInTheDocument();
+    });
+  });
+
+  it('renders WithModesWithoutCertificates when there are modes but no certificates', async () => {
+    const noCertificatesMock = {
+      ...certificatesDataMock,
+      certificates: [],
+    };
+
+    axiosMock
+      .onGet(getCertificatesApiUrl(courseId))
+      .reply(200, noCertificatesMock);
+    await executeThunk(fetchCertificates(courseId), store.dispatch);
+
+    const { getByText, queryByText } = renderComponent();
+
+    await waitFor(() => {
+      expect(getByText(messages.noCertificatesText.defaultMessage)).toBeInTheDocument();
+      expect(queryByText(messages.withoutModesText.defaultMessage)).not.toBeInTheDocument();
+    });
+  });
+
+  it('renders CertificatesList when there are modes and certificates', async () => {
+    axiosMock
+      .onGet(getCertificatesApiUrl(courseId))
+      .reply(200, certificatesDataMock);
+    await executeThunk(fetchCertificates(courseId), store.dispatch);
+
+    const { getByText, queryByText, getByTestId } = renderComponent();
+
+    await waitFor(() => {
+      expect(getByTestId('certificates-list')).toBeInTheDocument();
+      expect(getByText(certificatesDataMock.courseTitle)).toBeInTheDocument();
+      expect(getByText(certificatesDataMock.certificates[0].signatories[0].name)).toBeInTheDocument();
+      expect(queryByText(messages.noCertificatesText.defaultMessage)).not.toBeInTheDocument();
+      expect(queryByText(messages.withoutModesText.defaultMessage)).not.toBeInTheDocument();
+    });
+  });
+
+  it('renders CertificateCreateForm when there is componentMode = MODE_STATES.create', async () => {
+    const noCertificatesMock = {
+      ...certificatesDataMock,
+      certificates: [],
+    };
+
+    axiosMock
+      .onGet(getCertificatesApiUrl(courseId))
+      .reply(200, noCertificatesMock);
+    await executeThunk(fetchCertificates(courseId), store.dispatch);
+
+    const { queryByTestId, getByTestId, getByRole } = renderComponent();
+
+    await waitFor(() => {
+      const addCertificateButton = getByRole('button', { name: messages.setupCertificateBtn.defaultMessage });
+      userEvent.click(addCertificateButton);
+    });
+
+    expect(getByTestId('certificates-create-form')).toBeInTheDocument();
+    expect(getByTestId('certificate-details-form')).toBeInTheDocument();
+    expect(getByTestId('signatory-form')).toBeInTheDocument();
+    expect(queryByTestId('certificate-details')).not.toBeInTheDocument();
+    expect(queryByTestId('signatory')).not.toBeInTheDocument();
+  });
+
+  it('renders CertificateEditForm when there is componentMode = MODE_STATES.editAll', async () => {
+    axiosMock
+      .onGet(getCertificatesApiUrl(courseId))
+      .reply(200, certificatesDataMock);
+    await executeThunk(fetchCertificates(courseId), store.dispatch);
+
+    const { queryByTestId, getByTestId, getAllByLabelText } = renderComponent();
+
+    await waitFor(() => {
+      const editCertificateButton = getAllByLabelText(messages.editTooltip.defaultMessage)[0];
+      userEvent.click(editCertificateButton);
+    });
+
+    expect(getByTestId('certificates-edit-form')).toBeInTheDocument();
+    expect(getByTestId('certificate-details-form')).toBeInTheDocument();
+    expect(getByTestId('signatory-form')).toBeInTheDocument();
+    expect(queryByTestId('certificate-details')).not.toBeInTheDocument();
+    expect(queryByTestId('signatory')).not.toBeInTheDocument();
+  });
+
+  it('renders placeholder if request fails', async () => {
+    axiosMock
+      .onGet(getCertificatesApiUrl(courseId))
+      .reply(403, certificatesDataMock);
+
+    const { getByTestId } = renderComponent();
+
+    await executeThunk(fetchCertificates(courseId), store.dispatch);
+
+    expect(getByTestId('request-denied-placeholder')).toBeInTheDocument();
+  });
+
+  it('updates loading status if request fails', async () => {
+    axiosMock
+      .onGet(getCertificatesApiUrl(courseId))
+      .reply(404, certificatesDataMock);
+
+    renderComponent();
+
+    await executeThunk(fetchCertificates(courseId), store.dispatch);
+
+    expect(store.getState().certificates.loadingStatus).toBe(RequestStatus.FAILED);
+  });
+});
diff --git a/src/certificates/__mocks__/certificates.js b/src/certificates/__mocks__/certificates.js
new file mode 100644
index 0000000000..850c1ee0d4
--- /dev/null
+++ b/src/certificates/__mocks__/certificates.js
@@ -0,0 +1,20 @@
+module.exports = [
+  {
+    id: 1,
+    courseTitle: 'Course Title 1',
+    signatories: [
+      {
+        name: 'Signatory Name 1',
+        title: 'Signatory Title 1',
+        organization: 'Signatory Organization 1',
+        signatureImagePath: '/path/to/signature1/image.png',
+      },
+      {
+        name: 'Signatory Name 2',
+        title: 'Signatory Title 2',
+        organization: 'Signatory Organization 2',
+        signatureImagePath: '/path/to/signature2/image.png',
+      },
+    ],
+  },
+];
diff --git a/src/certificates/__mocks__/certificatesData.js b/src/certificates/__mocks__/certificatesData.js
new file mode 100644
index 0000000000..20be2e9d0e
--- /dev/null
+++ b/src/certificates/__mocks__/certificatesData.js
@@ -0,0 +1,32 @@
+module.exports = {
+  certificateActivationHandlerUrl: '/certificates/activation/course-v1:org+101+101/',
+  certificateWebViewUrl: '//certificates/course/course-v1:org+101+101?preview=honor',
+  certificates: [
+    {
+      courseTitle: 'Course title',
+      description: 'Description of the certificate',
+      editing: false,
+      id: 1622146085,
+      isActive: false,
+      name: 'Name of the certificate',
+      signatories: [
+        {
+          id: 268550145,
+          name: 'name_sign',
+          organization: 'org',
+          signatureImagePath: '/asset-v1:org+101+101+type@asset+block@camera.png',
+          title: 'title_sign',
+        },
+      ],
+      version: 1,
+    },
+  ],
+  courseModes: ['honor', 'audit'],
+  hasCertificateModes: true,
+  isActive: false,
+  isGlobalStaff: true,
+  mfeProctoredExamSettingsUrl: '',
+  courseNumber: 'DemoX',
+  courseTitle: 'Demonstration Course',
+  courseNumberOverride: 'Course Number Display String',
+};
diff --git a/src/certificates/__mocks__/index.js b/src/certificates/__mocks__/index.js
new file mode 100644
index 0000000000..1dffc371b8
--- /dev/null
+++ b/src/certificates/__mocks__/index.js
@@ -0,0 +1,3 @@
+export { default as certificatesDataMock } from './certificatesData';
+export { default as signatoriesMock } from './signatories';
+export { default as certificatesMock } from './certificates';
diff --git a/src/certificates/__mocks__/signatories.js b/src/certificates/__mocks__/signatories.js
new file mode 100644
index 0000000000..8deb4abe6e
--- /dev/null
+++ b/src/certificates/__mocks__/signatories.js
@@ -0,0 +1,8 @@
+module.exports = [
+  {
+    id: '1', name: 'John Doe', title: 'CEO', organization: 'Company', signatureImagePath: '/path/to/signature1.png',
+  },
+  {
+    id: '2', name: 'Jane Doe', title: 'CFO', organization: 'Company 2', signatureImagePath: '/path/to/signature2.png',
+  },
+];
diff --git a/src/certificates/certificate-create-form/CertificateCreateForm.jsx b/src/certificates/certificate-create-form/CertificateCreateForm.jsx
new file mode 100644
index 0000000000..70aa7ad4d0
--- /dev/null
+++ b/src/certificates/certificate-create-form/CertificateCreateForm.jsx
@@ -0,0 +1,70 @@
+import PropTypes from 'prop-types';
+import { Card, Stack, Button } from '@openedx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Formik, Form, FieldArray } from 'formik';
+
+import CertificateDetailsForm from '../certificate-details/CertificateDetailsForm';
+import CertificateSignatories from '../certificate-signatories/CertificateSignatories';
+import { defaultCertificate } from '../constants';
+import messages from '../messages';
+import useCertificateCreateForm from './hooks/useCertificateCreateForm';
+
+const CertificateCreateForm = ({ courseId }) => {
+  const intl = useIntl();
+  const {
+    courseTitle, handleCertificateSubmit, handleFormCancel,
+  } = useCertificateCreateForm(courseId);
+
+  return (
+    <Formik initialValues={defaultCertificate} onSubmit={handleCertificateSubmit}>
+      {({
+        values, handleChange, handleBlur, resetForm, setFieldValue,
+      }) => (
+        <Form className="certificates-card-form" data-testid="certificates-create-form">
+          <Card>
+            <Card.Section>
+              <Stack gap="4">
+                <CertificateDetailsForm
+                  courseTitleOverride={values.courseTitle}
+                  detailsCourseTitle={courseTitle}
+                  handleChange={handleChange}
+                  handleBlur={handleBlur}
+                />
+                <FieldArray
+                  name="signatories"
+                  render={arrayHelpers => (
+                    <CertificateSignatories
+                      isForm
+                      signatories={values.signatories}
+                      arrayHelpers={arrayHelpers}
+                      handleChange={handleChange}
+                      handleBlur={handleBlur}
+                      setFieldValue={setFieldValue}
+                    />
+                  )}
+                />
+              </Stack>
+            </Card.Section>
+            <Card.Footer className="justify-content-start">
+              <Button type="submit">
+                {intl.formatMessage(messages.cardCreate)}
+              </Button>
+              <Button
+                variant="tertiary"
+                onClick={() => handleFormCancel(resetForm)}
+              >
+                {intl.formatMessage(messages.cardCancel)}
+              </Button>
+            </Card.Footer>
+          </Card>
+        </Form>
+      )}
+    </Formik>
+  );
+};
+
+CertificateCreateForm.propTypes = {
+  courseId: PropTypes.string.isRequired,
+};
+
+export default CertificateCreateForm;
diff --git a/src/certificates/certificate-create-form/CertificatesCreateForm.test.jsx b/src/certificates/certificate-create-form/CertificatesCreateForm.test.jsx
new file mode 100644
index 0000000000..1217c16d2a
--- /dev/null
+++ b/src/certificates/certificate-create-form/CertificatesCreateForm.test.jsx
@@ -0,0 +1,156 @@
+import { render, waitFor, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Provider } from 'react-redux';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { initializeMockApp } from '@edx/frontend-platform';
+import MockAdapter from 'axios-mock-adapter';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+
+import { executeThunk } from '../../utils';
+import initializeStore from '../../store';
+import { MODE_STATES } from '../data/constants';
+import { getCertificatesApiUrl, getCertificateApiUrl } from '../data/api';
+import { fetchCertificates, createCourseCertificate } from '../data/thunks';
+import { certificatesDataMock } from '../__mocks__';
+import detailsMessages from '../certificate-details/messages';
+import signatoryMessages from '../certificate-signatories/messages';
+import messages from '../messages';
+import CertificateCreateForm from './CertificateCreateForm';
+
+const courseId = 'course-123';
+let store;
+let axiosMock;
+
+const renderComponent = () => render(
+  <Provider store={store}>
+    <IntlProvider locale="en">
+      <CertificateCreateForm courseId={courseId} />
+    </IntlProvider>
+  </Provider>,
+);
+
+const initialState = {
+  certificates: {
+    certificatesData: {
+      certificates: [],
+      hasCertificateModes: true,
+    },
+    componentMode: MODE_STATES.create,
+  },
+};
+
+describe('CertificateCreateForm', () => {
+  beforeEach(async () => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+    store = initializeStore(initialState);
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+    axiosMock
+      .onGet(getCertificatesApiUrl(courseId))
+      .reply(200, {
+        ...certificatesDataMock,
+        certificates: [],
+      });
+    await executeThunk(fetchCertificates(courseId), store.dispatch);
+  });
+
+  it('renders with empty fields', () => {
+    const { getByPlaceholderText } = renderComponent();
+
+    expect(getByPlaceholderText(detailsMessages.detailsCourseTitleOverride.defaultMessage).value).toBe('');
+    expect(getByPlaceholderText(signatoryMessages.namePlaceholder.defaultMessage).value).toBe('');
+    expect(getByPlaceholderText(signatoryMessages.titlePlaceholder.defaultMessage).value).toBe('');
+    expect(getByPlaceholderText(signatoryMessages.organizationPlaceholder.defaultMessage).value).toBe('');
+    expect(getByPlaceholderText(signatoryMessages.imagePlaceholder.defaultMessage).value).toBe('');
+  });
+
+  it('creates a new certificate', async () => {
+    const courseTitleOverrideValue = 'Create Course Title';
+    const signatoryNameValue = 'Create signatory name';
+    const newCertificateData = {
+      ...certificatesDataMock,
+      courseTitle: courseTitleOverrideValue,
+      certificates: [{
+        ...certificatesDataMock.certificates[0],
+        signatories: [{
+          ...certificatesDataMock.certificates[0].signatories[0],
+          name: signatoryNameValue,
+        }],
+      }],
+    };
+
+    const { getByPlaceholderText, getByRole, getByDisplayValue } = renderComponent();
+
+    userEvent.type(
+      getByPlaceholderText(detailsMessages.detailsCourseTitleOverride.defaultMessage),
+      courseTitleOverrideValue,
+    );
+    userEvent.type(
+      getByPlaceholderText(signatoryMessages.namePlaceholder.defaultMessage),
+      signatoryNameValue,
+    );
+    userEvent.click(getByRole('button', { name: messages.cardCreate.defaultMessage }));
+
+    axiosMock.onPost(
+      getCertificateApiUrl(courseId),
+    ).reply(200, newCertificateData);
+    await executeThunk(createCourseCertificate(courseId, newCertificateData), store.dispatch);
+
+    await waitFor(() => {
+      expect(getByDisplayValue(courseTitleOverrideValue)).toBeInTheDocument();
+      expect(getByDisplayValue(signatoryNameValue)).toBeInTheDocument();
+    });
+  });
+
+  it('cancel certificates creation', async () => {
+    const { getByRole } = renderComponent();
+    userEvent.click(getByRole('button', { name: messages.cardCancel.defaultMessage }));
+
+    await waitFor(() => {
+      expect(store.getState().certificates.componentMode).toBe(MODE_STATES.noCertificates);
+    });
+  });
+
+  it('there is no delete signatory button if signatories length is less then 2', async () => {
+    const { queryAllByRole } = renderComponent();
+    const deleteIcons = queryAllByRole('button', { name: messages.deleteTooltip.defaultMessage });
+
+    await waitFor(() => {
+      expect(deleteIcons.length).toBe(0);
+    });
+  });
+
+  it('add and delete signatory', async () => {
+    const {
+      getAllByRole, queryAllByRole, getByText, getByRole,
+    } = renderComponent();
+
+    const addSignatoryBtn = getByText(signatoryMessages.addSignatoryButton.defaultMessage);
+
+    userEvent.click(addSignatoryBtn);
+
+    const deleteIcons = getAllByRole('button', { name: messages.deleteTooltip.defaultMessage });
+
+    await waitFor(() => {
+      expect(deleteIcons.length).toBe(2);
+    });
+
+    userEvent.click(deleteIcons[0]);
+
+    const confirModal = getByRole('dialog');
+    const deleteModalButton = within(confirModal).getByRole('button', { name: messages.deleteTooltip.defaultMessage });
+
+    userEvent.click(deleteIcons[0]);
+    userEvent.click(deleteModalButton);
+
+    await waitFor(() => {
+      expect(queryAllByRole('button', { name: messages.deleteTooltip.defaultMessage }).length).toBe(0);
+    });
+  });
+});
diff --git a/src/certificates/certificate-create-form/hooks/useCertificateCreateForm.jsx b/src/certificates/certificate-create-form/hooks/useCertificateCreateForm.jsx
new file mode 100644
index 0000000000..76174ca342
--- /dev/null
+++ b/src/certificates/certificate-create-form/hooks/useCertificateCreateForm.jsx
@@ -0,0 +1,28 @@
+import { useSelector, useDispatch } from 'react-redux';
+
+import { MODE_STATES } from '../../data/constants';
+import { getCourseTitle } from '../../data/selectors';
+import { setMode } from '../../data/slice';
+import { createCourseCertificate } from '../../data/thunks';
+
+const useCertificateCreateForm = (courseId) => {
+  const dispatch = useDispatch();
+  const courseTitle = useSelector(getCourseTitle);
+
+  const handleCertificateSubmit = (values) => {
+    const signatoriesWithoutIds = values.signatories.map(({ id, ...rest }) => rest);
+    const newValues = { ...values, signatories: signatoriesWithoutIds };
+    dispatch(createCourseCertificate(courseId, newValues));
+  };
+
+  const handleFormCancel = (resetForm) => {
+    dispatch(setMode(MODE_STATES.noCertificates));
+    resetForm();
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+  return {
+    courseTitle, handleCertificateSubmit, handleFormCancel,
+  };
+};
+
+export default useCertificateCreateForm;
diff --git a/src/certificates/certificate-details/CertificateDetails.jsx b/src/certificates/certificate-details/CertificateDetails.jsx
new file mode 100644
index 0000000000..38e9e39e6c
--- /dev/null
+++ b/src/certificates/certificate-details/CertificateDetails.jsx
@@ -0,0 +1,123 @@
+import PropTypes from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import {
+  Icon, Stack, IconButtonWithTooltip,
+} from '@openedx/paragon';
+import {
+  EditOutline as EditOutlineIcon, DeleteOutline as DeleteOutlineIcon,
+} from '@openedx/paragon/icons';
+
+import CertificateSection from '../certificate-section/CertificateSection';
+import ModalNotification from '../../generic/modal-notification';
+import commonMessages from '../messages';
+import messages from './messages';
+import useCertificateDetails from './hooks/useCertificateDetails';
+
+const CertificateDetails = ({
+  certificateId,
+  detailsCourseTitle,
+  courseTitleOverride,
+  detailsCourseNumber,
+  courseNumberOverride,
+}) => {
+  const intl = useIntl();
+  const {
+    isConfirmOpen,
+    confirmOpen,
+    confirmClose,
+    isEditModalOpen,
+    editModalOpen,
+    editModalClose,
+    isCertificateActive,
+    handleEditAll,
+    handleDeleteCard,
+  } = useCertificateDetails(certificateId);
+
+  return (
+    <CertificateSection
+      title={intl.formatMessage(messages.detailsSectionTitle)}
+      className="certificate-details"
+      data-testid="certificate-details"
+      actions={(
+        <Stack direction="horizontal" gap="2">
+          <IconButtonWithTooltip
+            src={EditOutlineIcon}
+            iconAs={Icon}
+            tooltipContent={<div>{intl.formatMessage(commonMessages.editTooltip)}</div>}
+            alt={intl.formatMessage(commonMessages.editTooltip)}
+            onClick={isCertificateActive ? editModalOpen : handleEditAll}
+          />
+          <IconButtonWithTooltip
+            src={DeleteOutlineIcon}
+            iconAs={Icon}
+            tooltipContent={<div>{intl.formatMessage(commonMessages.deleteTooltip)}</div>}
+            alt={intl.formatMessage(commonMessages.deleteTooltip)}
+            onClick={confirmOpen}
+          />
+        </Stack>
+      )}
+    >
+      <Stack>
+        <Stack direction="horizontal" gap="1.5" className="certificate-details__info">
+          <p className="certificate-details__info-paragraph">
+            <strong>{intl.formatMessage(messages.detailsCourseTitle)}:</strong> {detailsCourseTitle}
+          </p>
+          <p className="certificate-details__info-paragraph-course-number">
+            <strong>{intl.formatMessage(messages.detailsCourseNumber)}:</strong> {detailsCourseNumber}
+          </p>
+        </Stack>
+        <Stack direction="horizontal" gap="1.5" className="certificate-details__info">
+          {courseTitleOverride && (
+            <p className="certificate-details__info-paragraph">
+              <strong>{intl.formatMessage(messages.detailsCourseTitleOverride)}:</strong> {courseTitleOverride}
+            </p>
+          )}
+          {courseNumberOverride && (
+            <p className="certificate-details__info-paragraph text-right">
+              <strong>{intl.formatMessage(messages.detailsCourseNumberOverride)}:</strong> {courseNumberOverride}
+            </p>
+          )}
+        </Stack>
+      </Stack>
+      <ModalNotification
+        isOpen={isEditModalOpen}
+        title={intl.formatMessage(messages.editCertificateConfirmationTitle)}
+        message={intl.formatMessage(messages.editCertificateMessage)}
+        actionButtonText={intl.formatMessage(commonMessages.editTooltip)}
+        cancelButtonText={intl.formatMessage(commonMessages.cardCancel)}
+        handleCancel={editModalClose}
+        handleAction={() => {
+          editModalClose();
+          handleEditAll();
+        }}
+      />
+      <ModalNotification
+        isOpen={isConfirmOpen}
+        title={intl.formatMessage(messages.deleteCertificateConfirmationTitle)}
+        message={intl.formatMessage(messages.deleteCertificateMessage)}
+        actionButtonText={intl.formatMessage(commonMessages.deleteTooltip)}
+        cancelButtonText={intl.formatMessage(commonMessages.cardCancel)}
+        handleCancel={confirmClose}
+        handleAction={() => {
+          confirmClose();
+          handleDeleteCard();
+        }}
+      />
+    </CertificateSection>
+  );
+};
+
+CertificateDetails.defaultProps = {
+  courseTitleOverride: '',
+  courseNumberOverride: '',
+};
+
+CertificateDetails.propTypes = {
+  certificateId: PropTypes.number.isRequired,
+  courseTitleOverride: PropTypes.string,
+  courseNumberOverride: PropTypes.string,
+  detailsCourseTitle: PropTypes.string.isRequired,
+  detailsCourseNumber: PropTypes.string.isRequired,
+};
+
+export default CertificateDetails;
diff --git a/src/certificates/certificate-details/CertificateDetails.test.jsx b/src/certificates/certificate-details/CertificateDetails.test.jsx
new file mode 100644
index 0000000000..2a96bfad9c
--- /dev/null
+++ b/src/certificates/certificate-details/CertificateDetails.test.jsx
@@ -0,0 +1,118 @@
+import { Provider, useDispatch } from 'react-redux';
+import { useParams } from 'react-router-dom';
+import { render, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { initializeMockApp } from '@edx/frontend-platform';
+
+import initializeStore from '../../store';
+import { MODE_STATES } from '../data/constants';
+import { deleteCourseCertificate } from '../data/thunks';
+import commonMessages from '../messages';
+import messages from './messages';
+import CertificateDetails from './CertificateDetails';
+
+let store;
+const courseId = 'course-v1:edX+DemoX+Demo_Course';
+const certificateId = 123;
+
+jest.mock('react-redux', () => ({
+  ...jest.requireActual('react-redux'),
+  useDispatch: jest.fn(),
+  useSelector: jest.fn(),
+}));
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useParams: jest.fn(),
+}));
+
+jest.mock('../data/thunks', () => ({
+  deleteCourseCertificate: jest.fn(),
+}));
+
+const renderComponent = (props) => render(
+  <Provider store={store}>
+    <IntlProvider locale="en">
+      <CertificateDetails {...props} />
+    </IntlProvider>
+  </Provider>,
+);
+
+const defaultProps = {
+  componentMode: MODE_STATES.view,
+  detailsCourseTitle: 'Course Title',
+  detailsCourseNumber: 'Course Number',
+  handleChange: jest.fn(),
+  handleBlur: jest.fn(),
+};
+
+const initialState = {
+  certificates: {
+    certificatesData: {
+      certificates: [],
+      hasCertificateModes: false,
+    },
+  },
+};
+
+describe('CertificateDetails', () => {
+  let mockDispatch;
+
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+    store = initializeStore(initialState);
+    useParams.mockReturnValue({ courseId });
+    mockDispatch = jest.fn();
+    useDispatch.mockReturnValue(mockDispatch);
+  });
+
+  afterEach(() => {
+    useParams.mockClear();
+    mockDispatch.mockClear();
+  });
+
+  it('renders correctly in view mode', () => {
+    const { getByText } = renderComponent(defaultProps);
+
+    expect(getByText(messages.detailsSectionTitle.defaultMessage)).toBeInTheDocument();
+    expect(getByText(defaultProps.detailsCourseTitle)).toBeInTheDocument();
+  });
+
+  it('opens confirm modal on delete button click', () => {
+    const { getByRole, getByText } = renderComponent(defaultProps);
+    const deleteButton = getByRole('button', { name: commonMessages.deleteTooltip.defaultMessage });
+    userEvent.click(deleteButton);
+
+    expect(getByText(messages.deleteCertificateConfirmationTitle.defaultMessage)).toBeInTheDocument();
+  });
+
+  it('dispatches delete action on confirm modal action', async () => {
+    const props = { ...defaultProps, courseId, certificateId };
+    const { getByRole } = renderComponent(props);
+    const deleteButton = getByRole('button', { name: commonMessages.deleteTooltip.defaultMessage });
+    userEvent.click(deleteButton);
+
+    await waitFor(() => {
+      const confirmActionButton = getByRole('button', { name: commonMessages.deleteTooltip.defaultMessage });
+      userEvent.click(confirmActionButton);
+    });
+
+    expect(mockDispatch).toHaveBeenCalledWith(deleteCourseCertificate(courseId, certificateId));
+  });
+
+  it('shows course title override in view mode', () => {
+    const courseTitleOverride = 'Overridden Title';
+    const props = { ...defaultProps, courseTitleOverride };
+    const { getByText } = renderComponent(props);
+
+    expect(getByText(courseTitleOverride)).toBeInTheDocument();
+  });
+});
diff --git a/src/certificates/certificate-details/CertificateDetailsForm.jsx b/src/certificates/certificate-details/CertificateDetailsForm.jsx
new file mode 100644
index 0000000000..2146361086
--- /dev/null
+++ b/src/certificates/certificate-details/CertificateDetailsForm.jsx
@@ -0,0 +1,54 @@
+import PropTypes from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Stack, Form } from '@openedx/paragon';
+
+import CertificateSection from '../certificate-section/CertificateSection';
+import messages from './messages';
+
+const CertificateDetailsForm = ({
+  detailsCourseTitle,
+  courseTitleOverride,
+  handleChange,
+  handleBlur,
+}) => {
+  const intl = useIntl();
+  return (
+    <CertificateSection
+      title={intl.formatMessage(messages.detailsSectionTitle)}
+      className="certificate-details"
+      data-testid="certificate-details-form"
+    >
+      <Stack>
+        <Stack direction="horizontal" gap="1.5" className="certificate-details__info">
+          <p className="certificate-details__info-paragraph">
+            <strong>{intl.formatMessage(messages.detailsCourseTitle)}:</strong> {detailsCourseTitle}
+          </p>
+        </Stack>
+        <Stack direction="horizontal" gap="1.5" className="certificate-details__info">
+          <Form.Group className="m-0 w-100">
+            <Form.Label>{intl.formatMessage(messages.detailsCourseTitleOverride)}</Form.Label>
+            <Form.Control
+              name="courseTitle"
+              value={courseTitleOverride}
+              onChange={handleChange}
+              onBlur={handleBlur}
+              placeholder={intl.formatMessage(messages.detailsCourseTitleOverride)}
+            />
+            <Form.Control.Feedback>
+              <span className="x-small">{intl.formatMessage(messages.detailsCourseTitleOverrideDescription)}</span>
+            </Form.Control.Feedback>
+          </Form.Group>
+        </Stack>
+      </Stack>
+    </CertificateSection>
+  );
+};
+
+CertificateDetailsForm.propTypes = {
+  courseTitleOverride: PropTypes.string.isRequired,
+  detailsCourseTitle: PropTypes.string.isRequired,
+  handleChange: PropTypes.func.isRequired,
+  handleBlur: PropTypes.func.isRequired,
+};
+
+export default CertificateDetailsForm;
diff --git a/src/certificates/certificate-details/CertificateDetailsForm.test.jsx b/src/certificates/certificate-details/CertificateDetailsForm.test.jsx
new file mode 100644
index 0000000000..ee24865c6e
--- /dev/null
+++ b/src/certificates/certificate-details/CertificateDetailsForm.test.jsx
@@ -0,0 +1,77 @@
+import { Provider } from 'react-redux';
+import { render, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { initializeMockApp } from '@edx/frontend-platform';
+
+import initializeStore from '../../store';
+import { MODE_STATES } from '../data/constants';
+import commonMessages from '../messages';
+import messages from './messages';
+import CertificateDetailsForm from './CertificateDetailsForm';
+
+let store;
+
+const renderComponent = (props) => render(
+  <Provider store={store}>
+    <IntlProvider locale="en">
+      <CertificateDetailsForm {...props} />
+    </IntlProvider>
+  </Provider>,
+);
+
+const defaultProps = {
+  componentMode: MODE_STATES.view,
+  detailsCourseTitle: 'Course Title',
+  detailsCourseNumber: 'Course Number',
+  handleChange: jest.fn(),
+  handleBlur: jest.fn(),
+};
+
+const initialState = {
+  certificates: {
+    certificatesData: {
+      certificates: [],
+      hasCertificateModes: false,
+    },
+  },
+};
+
+describe('CertificateDetails', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+    store = initializeStore(initialState);
+  });
+
+  it('renders correctly in create mode', () => {
+    const { getByText, getByPlaceholderText } = renderComponent(defaultProps);
+
+    expect(getByText(messages.detailsSectionTitle.defaultMessage)).toBeInTheDocument();
+    expect(getByPlaceholderText(messages.detailsCourseTitleOverride.defaultMessage)).toBeInTheDocument();
+  });
+
+  it('handles input change in create mode', async () => {
+    const { getByPlaceholderText } = renderComponent(defaultProps);
+    const input = getByPlaceholderText(messages.detailsCourseTitleOverride.defaultMessage);
+    const newInputValue = 'New Title';
+
+    userEvent.type(input, newInputValue);
+
+    waitFor(() => {
+      expect(input.value).toBe(newInputValue);
+    });
+  });
+
+  it('does not show delete button in create mode', () => {
+    const { queryByRole } = renderComponent(defaultProps);
+
+    expect(queryByRole('button', { name: commonMessages.deleteTooltip.defaultMessage })).not.toBeInTheDocument();
+  });
+});
diff --git a/src/certificates/certificate-details/hooks/useCertificateDetails.jsx b/src/certificates/certificate-details/hooks/useCertificateDetails.jsx
new file mode 100644
index 0000000000..8e6adc92b5
--- /dev/null
+++ b/src/certificates/certificate-details/hooks/useCertificateDetails.jsx
@@ -0,0 +1,40 @@
+import { useDispatch, useSelector } from 'react-redux';
+import { useParams } from 'react-router-dom';
+import { useToggle } from '@openedx/paragon';
+
+import { setMode } from '../../data/slice';
+import { deleteCourseCertificate } from '../../data/thunks';
+import { getIsCertificateActive } from '../../data/selectors';
+import { MODE_STATES } from '../../data/constants';
+
+const useCertificateDetails = (certificateId) => {
+  const dispatch = useDispatch();
+  const { courseId } = useParams();
+  const [isConfirmOpen, confirmOpen, confirmClose] = useToggle(false);
+  const [isEditModalOpen, editModalOpen, editModalClose] = useToggle(false);
+  const isCertificateActive = useSelector(getIsCertificateActive);
+
+  const handleEditAll = () => {
+    dispatch(setMode(MODE_STATES.editAll));
+  };
+
+  const handleDeleteCard = () => {
+    if (certificateId) {
+      dispatch(deleteCourseCertificate(courseId, certificateId));
+    }
+  };
+
+  return {
+    isConfirmOpen,
+    confirmOpen,
+    confirmClose,
+    isEditModalOpen,
+    editModalOpen,
+    editModalClose,
+    isCertificateActive,
+    handleEditAll,
+    handleDeleteCard,
+  };
+};
+
+export default useCertificateDetails;
diff --git a/src/certificates/certificate-details/messages.js b/src/certificates/certificate-details/messages.js
new file mode 100644
index 0000000000..4d5260cc34
--- /dev/null
+++ b/src/certificates/certificate-details/messages.js
@@ -0,0 +1,56 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  detailsSectionTitle: {
+    id: 'course-authoring.certificates.details.section.title',
+    defaultMessage: 'Certificate details',
+    description: 'Title for the section',
+  },
+  detailsCourseTitle: {
+    id: 'course-authoring.certificates.details.course.title',
+    defaultMessage: 'Course title',
+    description: 'Label for displaying the official course title in the certificate details section',
+  },
+  detailsCourseTitleOverride: {
+    id: 'course-authoring.certificates.details.course.title.override',
+    defaultMessage: 'Course title override',
+    description: 'Label for the course title override input field',
+  },
+  detailsCourseTitleOverrideDescription: {
+    id: 'course-authoring.certificates.details.course.title.override.description',
+    defaultMessage: 'Specify an alternative to the official course title to display on certificates. Leave blank to use the official course title.',
+    description: 'Helper text under the course title override input field',
+  },
+  detailsCourseNumber: {
+    id: 'course-authoring.certificates.details.course.number',
+    defaultMessage: 'Course number',
+    description: 'Label for displaying the official course number in the certificate details section',
+  },
+  detailsCourseNumberOverride: {
+    id: 'course-authoring.certificates.details.course.number.override',
+    defaultMessage: 'Course number override',
+    description: 'Label for the course number override input field',
+  },
+  deleteCertificateConfirmationTitle: {
+    id: 'course-authoring.certificates.details.confirm-modal',
+    defaultMessage: 'Delete this certificate?',
+    description: 'Title for the confirmation modal when a user attempts to delete a certificate',
+  },
+  deleteCertificateMessage: {
+    id: 'course-authoring.certificates.details.confirm-modal.message',
+    defaultMessage: 'Deleting this certificate is permanent and cannot be undone.',
+    description: 'Warning message within the delete confirmation modal, emphasizing the permanent nature of the action',
+  },
+  editCertificateConfirmationTitle: {
+    id: 'course-authoring.certificates.details.confirm.edit',
+    defaultMessage: 'Edit this certificate?',
+    description: 'Title for the confirmation modal when a user attempts to edit an already activated (live) certificate',
+  },
+  editCertificateMessage: {
+    id: 'course-authoring.certificates.details.confirm.edit.message',
+    defaultMessage: 'This certificate has already been activated and is live. Are you sure you want to continue editing?',
+    description: 'Message warning users about the implications of editing a certificate that is already live, prompting for confirmation',
+  },
+});
+
+export default messages;
diff --git a/src/certificates/certificate-edit-form/CertificateEditForm.jsx b/src/certificates/certificate-edit-form/CertificateEditForm.jsx
new file mode 100644
index 0000000000..89bdce28d9
--- /dev/null
+++ b/src/certificates/certificate-edit-form/CertificateEditForm.jsx
@@ -0,0 +1,104 @@
+import PropTypes from 'prop-types';
+import { Card, Stack, Button } from '@openedx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Formik, Form, FieldArray } from 'formik';
+
+import ModalNotification from '../../generic/modal-notification';
+import CertificateDetailsForm from '../certificate-details/CertificateDetailsForm';
+import CertificateSignatories from '../certificate-signatories/CertificateSignatories';
+import commonMessages from '../messages';
+import messages from '../certificate-details/messages';
+import useCertificateEditForm from './hooks/useCertificateEditForm';
+
+const CertificateEditForm = ({ courseId }) => {
+  const intl = useIntl();
+  const {
+    confirmOpen,
+    courseTitle,
+    certificates,
+    confirmClose,
+    initialValues,
+    isConfirmOpen,
+    handleCertificateDelete,
+    handleCertificateSubmit,
+    handleCertificateUpdateCancel,
+  } = useCertificateEditForm(courseId);
+
+  return (
+    <>
+      {certificates.map((certificate, id) => (
+        <Formik initialValues={initialValues[id]} onSubmit={handleCertificateSubmit} key={certificate.id}>
+          {({
+            values, handleChange, handleBlur, resetForm, setFieldValue,
+          }) => (
+            <>
+              <Form className="certificates-card-form" data-testid="certificates-edit-form">
+                <Card>
+                  <Card.Section>
+                    <Stack gap="4">
+                      <CertificateDetailsForm
+                        courseTitleOverride={values.courseTitle}
+                        detailsCourseTitle={courseTitle}
+                        handleChange={handleChange}
+                        handleBlur={handleBlur}
+                      />
+                      <FieldArray
+                        name="signatories"
+                        render={arrayHelpers => (
+                          <CertificateSignatories
+                            isForm
+                            signatories={values.signatories}
+                            arrayHelpers={arrayHelpers}
+                            handleChange={handleChange}
+                            handleBlur={handleBlur}
+                            setFieldValue={setFieldValue}
+                          />
+                        )}
+                      />
+                    </Stack>
+                  </Card.Section>
+                  <Card.Footer className="justify-content-start">
+                    <Button type="submit">
+                      {intl.formatMessage(commonMessages.saveTooltip)}
+                    </Button>
+                    <Button
+                      variant="outline-primary"
+                      onClick={() => handleCertificateUpdateCancel(resetForm)}
+                    >
+                      {intl.formatMessage(commonMessages.cardCancel)}
+                    </Button>
+                    <Button
+                      className="ml-auto"
+                      variant="tertiary"
+                      onClick={() => confirmOpen(certificate.id)}
+                    >
+                      {intl.formatMessage(commonMessages.deleteTooltip)}
+                    </Button>
+                  </Card.Footer>
+                </Card>
+              </Form>
+              <ModalNotification
+                isOpen={isConfirmOpen}
+                title={intl.formatMessage(messages.deleteCertificateConfirmationTitle)}
+                message={intl.formatMessage(messages.deleteCertificateMessage)}
+                actionButtonText={intl.formatMessage(commonMessages.deleteTooltip)}
+                cancelButtonText={intl.formatMessage(commonMessages.cardCancel)}
+                handleCancel={() => confirmClose()}
+                handleAction={() => {
+                  confirmClose();
+                  handleCertificateDelete(certificate.id);
+                }}
+              />
+            </>
+          )}
+        </Formik>
+      ))}
+    </>
+  );
+};
+
+CertificateEditForm.propTypes = {
+  courseId: PropTypes.string.isRequired,
+};
+
+export default CertificateEditForm;
diff --git a/src/certificates/certificate-edit-form/CertificateEditForm.test.jsx b/src/certificates/certificate-edit-form/CertificateEditForm.test.jsx
new file mode 100644
index 0000000000..38757b3272
--- /dev/null
+++ b/src/certificates/certificate-edit-form/CertificateEditForm.test.jsx
@@ -0,0 +1,140 @@
+import { Provider } from 'react-redux';
+import { render, waitFor, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { initializeMockApp } from '@edx/frontend-platform';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import MockAdapter from 'axios-mock-adapter';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+
+import { RequestStatus } from '../../data/constants';
+import { executeThunk } from '../../utils';
+import initializeStore from '../../store';
+import { getCertificatesApiUrl, getUpdateCertificateApiUrl } from '../data/api';
+import { fetchCertificates, deleteCourseCertificate, updateCourseCertificate } from '../data/thunks';
+import { certificatesDataMock } from '../__mocks__';
+import { MODE_STATES } from '../data/constants';
+import messagesDetails from '../certificate-details/messages';
+import messages from '../messages';
+import CertificateEditForm from './CertificateEditForm';
+
+let axiosMock;
+let store;
+const courseId = 'course-123';
+
+const renderComponent = () => render(
+  <Provider store={store}>
+    <IntlProvider locale="en">
+      <CertificateEditForm courseId="course-123" />
+    </IntlProvider>
+  </Provider>,
+);
+
+const initialState = {
+  certificates: {
+    certificatesData: {},
+    componentMode: MODE_STATES.editAll,
+  },
+};
+
+describe('CertificateEditForm Component', () => {
+  beforeEach(async () => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+    store = initializeStore(initialState);
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+    axiosMock
+      .onGet(getCertificatesApiUrl(courseId))
+      .reply(200, certificatesDataMock);
+    await executeThunk(fetchCertificates(courseId), store.dispatch);
+  });
+
+  it('submits the form with updated certificate details', async () => {
+    const courseTitleOverrideValue = 'Updated Course Title';
+    const signatoryNameValue = 'Updated signatory name';
+    const newCertificateData = {
+      ...certificatesDataMock,
+      courseTitle: courseTitleOverrideValue,
+      certificates: [{
+        ...certificatesDataMock.certificates[0],
+        signatories: [{
+          ...certificatesDataMock.certificates[0].signatories[0],
+          name: signatoryNameValue,
+        }],
+      }],
+    };
+
+    const { getByDisplayValue, getByRole, getByPlaceholderText } = renderComponent();
+
+    userEvent.type(
+      getByPlaceholderText(messagesDetails.detailsCourseTitleOverride.defaultMessage),
+      courseTitleOverrideValue,
+    );
+
+    userEvent.click(getByRole('button', { name: messages.saveTooltip.defaultMessage }));
+
+    axiosMock.onPost(
+      getUpdateCertificateApiUrl(courseId, certificatesDataMock.certificates[0].id),
+    ).reply(200, newCertificateData);
+    await executeThunk(updateCourseCertificate(courseId, newCertificateData), store.dispatch);
+
+    await waitFor(() => {
+      expect(getByDisplayValue(
+        certificatesDataMock.certificates[0].courseTitle + courseTitleOverrideValue,
+      )).toBeInTheDocument();
+    });
+  });
+
+  it('deletes a certificate and updates the store', async () => {
+    axiosMock.onDelete(
+      getUpdateCertificateApiUrl(courseId, certificatesDataMock.certificates[0].id),
+    ).reply(200);
+
+    const { getByRole } = renderComponent();
+
+    userEvent.click(getByRole('button', { name: messages.deleteTooltip.defaultMessage }));
+
+    const confirmDeleteModal = getByRole('dialog');
+    userEvent.click(within(confirmDeleteModal).getByRole('button', { name: messages.deleteTooltip.defaultMessage }));
+
+    await executeThunk(deleteCourseCertificate(courseId, certificatesDataMock.certificates[0].id), store.dispatch);
+
+    await waitFor(() => {
+      expect(store.getState().certificates.certificatesData.certificates.length).toBe(0);
+    });
+  });
+
+  it('updates loading status if delete fails', async () => {
+    axiosMock.onDelete(
+      getUpdateCertificateApiUrl(courseId, certificatesDataMock.certificates[0].id),
+    ).reply(404);
+
+    const { getByRole } = renderComponent();
+
+    userEvent.click(getByRole('button', { name: messages.deleteTooltip.defaultMessage }));
+
+    const confirmDeleteModal = getByRole('dialog');
+    userEvent.click(within(confirmDeleteModal).getByRole('button', { name: messages.deleteTooltip.defaultMessage }));
+
+    await executeThunk(deleteCourseCertificate(courseId, certificatesDataMock.certificates[0].id), store.dispatch);
+
+    await waitFor(() => {
+      expect(store.getState().certificates.savingStatus).toBe(RequestStatus.FAILED);
+    });
+  });
+
+  it('cancel edit form', async () => {
+    const { getByRole } = renderComponent();
+
+    expect(store.getState().certificates.componentMode).toBe(MODE_STATES.editAll);
+
+    userEvent.click(getByRole('button', { name: messages.cardCancel.defaultMessage }));
+
+    expect(store.getState().certificates.componentMode).toBe(MODE_STATES.view);
+  });
+});
diff --git a/src/certificates/certificate-edit-form/hooks/useCertificateEditForm.jsx b/src/certificates/certificate-edit-form/hooks/useCertificateEditForm.jsx
new file mode 100644
index 0000000000..3885f5cb0e
--- /dev/null
+++ b/src/certificates/certificate-edit-form/hooks/useCertificateEditForm.jsx
@@ -0,0 +1,62 @@
+import { useSelector, useDispatch } from 'react-redux';
+import { useToggle } from '@openedx/paragon';
+
+import { MODE_STATES } from '../../data/constants';
+import { getCourseTitle, getCertificates } from '../../data/selectors';
+import { setMode } from '../../data/slice';
+import { updateCourseCertificate, deleteCourseCertificate } from '../../data/thunks';
+import { defaultCertificate } from '../../constants';
+
+const useCertificateEditForm = (courseId) => {
+  const dispatch = useDispatch();
+  const [isConfirmOpen, confirmOpen, confirmClose] = useToggle(false);
+  const courseTitle = useSelector(getCourseTitle);
+  const certificates = useSelector(getCertificates);
+
+  const handleCertificateSubmit = (values) => {
+    const signatoriesWithoutLocalIds = values.signatories.map(signatory => {
+      if (signatory.id && typeof signatory.id === 'string' && signatory.id.startsWith('local-')) {
+        const { id, ...rest } = signatory;
+        return rest;
+      }
+      return signatory;
+    });
+
+    const newValues = {
+      ...values,
+      signatories: signatoriesWithoutLocalIds,
+    };
+
+    dispatch(updateCourseCertificate(courseId, newValues));
+  };
+
+  const handleCertificateUpdateCancel = (resetForm) => {
+    dispatch(setMode(MODE_STATES.view));
+    resetForm();
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
+  const handleCertificateDelete = (certificateId) => {
+    dispatch(deleteCourseCertificate(courseId, certificateId));
+  };
+
+  const initialValues = certificates.map((certificate) => ({
+    ...certificate,
+    courseTitle: certificate.courseTitle || defaultCertificate.courseTitle,
+    signatories: certificate.signatories || defaultCertificate.signatories,
+  }));
+
+  return {
+    confirmOpen,
+    courseTitle,
+    certificates,
+    confirmClose,
+    initialValues,
+    isConfirmOpen,
+    handleCertificateDelete,
+    handleCertificateSubmit,
+    handleCertificateUpdateCancel,
+  };
+};
+
+export default useCertificateEditForm;
diff --git a/src/certificates/certificate-section/CertificateSection.jsx b/src/certificates/certificate-section/CertificateSection.jsx
new file mode 100644
index 0000000000..05fab62e83
--- /dev/null
+++ b/src/certificates/certificate-section/CertificateSection.jsx
@@ -0,0 +1,29 @@
+import PropTypes from 'prop-types';
+import { Stack } from '@openedx/paragon';
+
+const CertificateSection = ({
+  title, actions, children, ...rest
+}) => (
+  <section {...rest}>
+    <Stack className="justify-content-between mb-2.5" direction="horizontal">
+      <h2 className="lead section-title mb-0">{title}</h2>
+      {actions && actions}
+    </Stack>
+    <hr className="mt-0 mb-4" />
+    <div>
+      {children}
+    </div>
+  </section>
+);
+
+CertificateSection.defaultProps = {
+  children: null,
+  actions: null,
+};
+CertificateSection.propTypes = {
+  children: PropTypes.node,
+  actions: PropTypes.node,
+  title: PropTypes.string.isRequired,
+};
+
+export default CertificateSection;
diff --git a/src/certificates/certificate-signatories/CertificateSignatories.jsx b/src/certificates/certificate-signatories/CertificateSignatories.jsx
new file mode 100644
index 0000000000..4cdf0f703a
--- /dev/null
+++ b/src/certificates/certificate-signatories/CertificateSignatories.jsx
@@ -0,0 +1,130 @@
+import PropTypes from 'prop-types';
+import { Stack, Button, Form } from '@openedx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import CertificateSection from '../certificate-section/CertificateSection';
+import Signatory from './signatory/Signatory';
+import SignatoryForm from './signatory/SignatoryForm';
+import useEditSignatory from './hooks/useEditSignatory';
+import useCreateSignatory from './hooks/useCreateSignatory';
+import messages from './messages';
+
+const CertificateSignatories = ({
+  isForm,
+  editModes,
+  signatories,
+  arrayHelpers,
+  initialSignatoriesValues,
+  setFieldValue,
+  setEditModes,
+  handleBlur,
+  handleChange,
+}) => {
+  const intl = useIntl();
+
+  const {
+    toggleEditSignatory,
+    handleDeleteSignatory,
+    handleCancelUpdateSignatory,
+  } = useEditSignatory({
+    arrayHelpers, editModes, setEditModes, setFieldValue, initialSignatoriesValues,
+  });
+
+  const { handleAddSignatory } = useCreateSignatory({ arrayHelpers });
+
+  return (
+    <CertificateSection
+      title={intl.formatMessage(messages.signatoriesSectionTitle)}
+      className="certificate-signatories"
+    >
+      <div>
+        <p className="mb-4.5">
+          {intl.formatMessage(messages.signatoriesRecommendation)}
+        </p>
+        <Stack gap="4.5">
+          {signatories.map(({
+            id, name, title, organization, signatureImagePath,
+          }, idx) => (
+            isForm || editModes[idx] ? (
+              <SignatoryForm
+                key={id}
+                index={idx}
+                isEdit={editModes[idx]}
+                name={name}
+                title={title}
+                organization={organization}
+                signatureImagePath={signatureImagePath}
+                handleChange={handleChange}
+                handleBlur={handleBlur}
+                setFieldValue={setFieldValue}
+                showDeleteButton={signatories.length > 1 && !editModes[idx]}
+                handleDeleteSignatory={() => handleDeleteSignatory(idx)}
+                {...(editModes[idx] && {
+                  handleCancelUpdateSignatory: () => handleCancelUpdateSignatory(idx),
+                })}
+              />
+            ) : (
+              <Signatory
+                key={id}
+                index={idx}
+                name={name}
+                title={title}
+                organization={organization}
+                signatureImagePath={signatureImagePath}
+                handleEdit={() => toggleEditSignatory(idx)}
+              />
+            )
+          ))}
+        </Stack>
+        {isForm && (
+          <>
+            <Button variant="outline-primary" onClick={handleAddSignatory} className="w-100 mt-4">
+              {intl.formatMessage(messages.addSignatoryButton)}
+            </Button>
+            <Form.Control.Feedback>
+              <span className="x-small">{intl.formatMessage(messages.addSignatoryButtonDescription)}</span>
+            </Form.Control.Feedback>
+          </>
+        )}
+      </div>
+    </CertificateSection>
+  );
+};
+
+CertificateSignatories.defaultProps = {
+  handleChange: null,
+  handleBlur: null,
+  setFieldValue: null,
+  arrayHelpers: null,
+  isForm: false,
+  editModes: {},
+  setEditModes: null,
+  initialSignatoriesValues: null,
+};
+
+CertificateSignatories.propTypes = {
+  isForm: PropTypes.bool,
+  editModes: PropTypes.objectOf(PropTypes.bool),
+  initialSignatoriesValues: PropTypes.arrayOf(PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    organization: PropTypes.string.isRequired,
+    signatureImagePath: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
+  })),
+  handleChange: PropTypes.func,
+  handleBlur: PropTypes.func,
+  setFieldValue: PropTypes.func,
+  setEditModes: PropTypes.func,
+  arrayHelpers: PropTypes.shape({
+    push: PropTypes.func,
+    remove: PropTypes.func,
+  }),
+  signatories: PropTypes.arrayOf(PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    organization: PropTypes.string.isRequired,
+    signatureImagePath: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
+  })).isRequired,
+};
+
+export default CertificateSignatories;
diff --git a/src/certificates/certificate-signatories/CertificateSignatories.test.jsx b/src/certificates/certificate-signatories/CertificateSignatories.test.jsx
new file mode 100644
index 0000000000..6d5421414b
--- /dev/null
+++ b/src/certificates/certificate-signatories/CertificateSignatories.test.jsx
@@ -0,0 +1,110 @@
+import { render, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Provider } from 'react-redux';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { initializeMockApp } from '@edx/frontend-platform';
+
+import initializeStore from '../../store';
+import { MODE_STATES } from '../data/constants';
+import { signatoriesMock } from '../__mocks__';
+import commonMessages from '../messages';
+import messages from './messages';
+import useEditSignatory from './hooks/useEditSignatory';
+import useCreateSignatory from './hooks/useCreateSignatory';
+import CertificateSignatories from './CertificateSignatories';
+
+let store;
+
+const mockArrayHelpers = {
+  push: jest.fn(),
+  remove: jest.fn(),
+};
+
+jest.mock('./hooks/useEditSignatory');
+
+jest.mock('./hooks/useCreateSignatory');
+
+const renderComponent = (props) => render(
+  <Provider store={store}>
+    <IntlProvider locale="en">
+      <CertificateSignatories {...props} />
+    </IntlProvider>,
+  </Provider>,
+);
+
+const defaultProps = {
+  signatories: signatoriesMock,
+  handleChange: jest.fn(),
+  handleBlur: jest.fn(),
+  setFieldValue: jest.fn(),
+  arrayHelpers: mockArrayHelpers,
+  isForm: true,
+  resetForm: jest.fn(),
+  editModes: {},
+  setEditModes: jest.fn(),
+};
+
+const initialState = {
+  certificates: {
+    certificatesData: {
+      certificates: [],
+      hasCertificateModes: true,
+    },
+    componentMode: MODE_STATES.create,
+  },
+};
+
+describe('CertificateSignatories', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+    store = initializeStore(initialState);
+    useEditSignatory.mockReturnValue({
+      toggleEditSignatory: jest.fn(),
+      handleDeleteSignatory: jest.fn(),
+      handleCancelUpdateSignatory: jest.fn(),
+    });
+
+    useCreateSignatory.mockReturnValue({
+      handleAddSignatory: jest.fn(),
+    });
+  });
+
+  afterEach(() => jest.clearAllMocks());
+
+  it('renders signatory components for each signatory', () => {
+    const { getByText } = renderComponent({ ...defaultProps, isForm: false });
+
+    signatoriesMock.forEach(signatory => {
+      expect(getByText(signatory.name)).toBeInTheDocument();
+      expect(getByText(signatory.title)).toBeInTheDocument();
+      expect(getByText(signatory.organization)).toBeInTheDocument();
+    });
+  });
+
+  it('adds a new signatory when add button is clicked', () => {
+    const { getByText } = renderComponent({ ...defaultProps, isForm: true });
+
+    userEvent.click(getByText(messages.addSignatoryButton.defaultMessage));
+    expect(useCreateSignatory().handleAddSignatory).toHaveBeenCalled();
+  });
+
+  it('calls remove for the correct signatory when delete icon is clicked', async () => {
+    const { getAllByRole } = renderComponent(defaultProps);
+
+    const deleteIcons = getAllByRole('button', { name: commonMessages.deleteTooltip.defaultMessage });
+    expect(deleteIcons.length).toBe(signatoriesMock.length);
+
+    userEvent.click(deleteIcons[0]);
+
+    waitFor(() => {
+      expect(mockArrayHelpers.remove).toHaveBeenCalledWith(0);
+    });
+  });
+});
diff --git a/src/certificates/certificate-signatories/hooks/useCreateSignatory.jsx b/src/certificates/certificate-signatories/hooks/useCreateSignatory.jsx
new file mode 100644
index 0000000000..01014ffd0f
--- /dev/null
+++ b/src/certificates/certificate-signatories/hooks/useCreateSignatory.jsx
@@ -0,0 +1,15 @@
+import { v4 as uuid } from 'uuid';
+
+const useCreateSignatory = ({ arrayHelpers }) => {
+  const handleAddSignatory = () => {
+    const getNewSignatory = () => ({
+      id: `local-${uuid()}`, name: '', title: '', organization: '', signatureImagePath: '',
+    });
+
+    arrayHelpers.push(getNewSignatory());
+  };
+
+  return { handleAddSignatory };
+};
+
+export default useCreateSignatory;
diff --git a/src/certificates/certificate-signatories/hooks/useEditSignatory.jsx b/src/certificates/certificate-signatories/hooks/useEditSignatory.jsx
new file mode 100644
index 0000000000..5784169237
--- /dev/null
+++ b/src/certificates/certificate-signatories/hooks/useEditSignatory.jsx
@@ -0,0 +1,33 @@
+const useEditSignatory = ({
+  arrayHelpers, editModes, setEditModes, setFieldValue, initialSignatoriesValues,
+}) => {
+  const handleDeleteSignatory = (id) => {
+    arrayHelpers.remove(id);
+
+    if (editModes && setEditModes) {
+      const newEditModes = { ...editModes };
+      delete newEditModes[id];
+      setEditModes(newEditModes);
+    }
+  };
+
+  const toggleEditSignatory = (id) => {
+    setEditModes(prev => ({
+      ...prev,
+      [id]: !prev[id],
+    }));
+  };
+
+  const handleCancelUpdateSignatory = (id) => {
+    const signatoryInitialValues = initialSignatoriesValues[id];
+    Object.keys(signatoryInitialValues).forEach(fieldKey => {
+      const fieldName = `signatories[${id}].${fieldKey}`;
+      setFieldValue(fieldName, signatoryInitialValues[fieldKey]);
+    });
+    toggleEditSignatory(id);
+  };
+
+  return { toggleEditSignatory, handleDeleteSignatory, handleCancelUpdateSignatory };
+};
+
+export default useEditSignatory;
diff --git a/src/certificates/certificate-signatories/messages.js b/src/certificates/certificate-signatories/messages.js
new file mode 100644
index 0000000000..f79b0ec21f
--- /dev/null
+++ b/src/certificates/certificate-signatories/messages.js
@@ -0,0 +1,116 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  signatoryTitle: {
+    id: 'course-authoring.certificates.signatories.title',
+    defaultMessage: 'Signatory',
+    description: 'Title for a signatory',
+  },
+  signatoriesRecommendation: {
+    id: 'course-authoring.certificates.signatories.recommendation',
+    defaultMessage: 'It is strongly recommended that you include four or fewer signatories. If you include additional signatories, preview the certificate in Print View to ensure the certificate will print correctly on one page.',
+    description: 'A recommendation for the number of signatories to include on a certificate, emphasizing the importance of testing the print layout',
+  },
+  signatoriesSectionTitle: {
+    id: 'course-authoring.certificates.signatories.section.title',
+    defaultMessage: 'Certificate signatories',
+    description: 'Title for the section',
+  },
+  addSignatoryButton: {
+    id: 'course-authoring.certificates.signatories.add.signatory.button',
+    defaultMessage: 'Add additional signatory',
+    description: 'Button text for adding a new signatory to the certificate',
+  },
+  addSignatoryButtonDescription: {
+    id: 'course-authoring.certificates.signatories.add.signatory.button.description',
+    defaultMessage: '(Add signatories for a certificate)',
+    description: 'Helper text for the button used to add signatories',
+  },
+  nameLabel: {
+    id: 'course-authoring.certificates.signatories.name.label',
+    defaultMessage: 'Name',
+    description: 'Label for the input field where the signatory name is entered',
+  },
+  namePlaceholder: {
+    id: 'course-authoring.certificates.signatories.name.placeholder',
+    defaultMessage: 'Name of the signatory',
+    description: 'Placeholder text for the signatory name input field',
+  },
+  nameDescription: {
+    id: 'course-authoring.certificates.signatories.name.description',
+    defaultMessage: 'The name of this signatory as it should appear on certificates.',
+    description: 'Helper text under the name input field',
+  },
+  titleLabel: {
+    id: 'course-authoring.certificates.signatories.title.label',
+    defaultMessage: 'Title',
+    description: 'Label for the input field where the signatory title is entered',
+  },
+  titlePlaceholder: {
+    id: 'course-authoring.certificates.signatories.title.placeholder',
+    defaultMessage: 'Title of the signatory',
+    description: 'Placeholder text for the signatory title input field',
+  },
+  titleDescription: {
+    id: 'course-authoring.certificates.signatories.title.description',
+    defaultMessage: 'Titles more than 100 characters may prevent students from printing their certificate on a single page.',
+    description: 'Helper text under the title input field',
+  },
+  organizationLabel: {
+    id: 'course-authoring.certificates.signatories.organization.label',
+    defaultMessage: 'Organization',
+    description: 'Label for the input field where the signatory organization is entered',
+  },
+  organizationPlaceholder: {
+    id: 'course-authoring.certificates.signatories.organization.placeholder',
+    defaultMessage: 'Organization of the signatory',
+    description: 'Placeholder text for the signatory organization input field',
+  },
+  organizationDescription: {
+    id: 'course-authoring.certificates.signatories.organization.description',
+    defaultMessage: 'The organization that this signatory belongs to, as it should appear on certificates.',
+    description: 'Helper text under the organization input field',
+  },
+  imageLabel: {
+    id: 'course-authoring.certificates.signatories.image.label',
+    defaultMessage: 'Signature image',
+    description: 'Label for the input field where the signatory image is selected',
+  },
+  imagePlaceholder: {
+    id: 'course-authoring.certificates.signatories.image.placeholder',
+    defaultMessage: 'Path to signature image',
+    description: 'Placeholder text for the signatory image input field',
+  },
+  imageDescription: {
+    id: 'course-authoring.certificates.signatories.image.description',
+    defaultMessage: 'Image must be in PNG format',
+    description: 'Helper text under the image input field',
+  },
+  uploadImageButton: {
+    id: 'course-authoring.certificates.signatories.upload.image.button',
+    defaultMessage: '{uploadText} signature image',
+    description: 'Button text for adding or replacing a signature image',
+  },
+  uploadModal: {
+    id: 'course-authoring.certificates.signatories.upload.modal',
+    defaultMessage: 'Upload',
+    description: 'Option for button text for adding a new signature image',
+  },
+  uploadModalReplace: {
+    id: 'course-authoring.certificates.signatories.upload.modal.replace',
+    defaultMessage: 'Replace',
+    description: 'Option for button text for replacing an existing signature image',
+  },
+  deleteSignatoryConfirmation: {
+    id: 'course-authoring.certificates.signatories.confirm-modal',
+    defaultMessage: 'Delete "{name}" from the list of signatories?',
+    description: 'Title for the confirmation modal when a user attempts to delete a signatory, where "{name}" is the name of the signatory to be deleted',
+  },
+  deleteSignatoryConfirmationMessage: {
+    id: 'course-authoring.certificates.signatories.confirm-modal.message',
+    defaultMessage: 'This action cannot be undone.',
+    description: 'A warning message that emphasizes the permanence of the delete action for a signatory',
+  },
+});
+
+export default messages;
diff --git a/src/certificates/certificate-signatories/signatory/Signatory.jsx b/src/certificates/certificate-signatories/signatory/Signatory.jsx
new file mode 100644
index 0000000000..69e93addfe
--- /dev/null
+++ b/src/certificates/certificate-signatories/signatory/Signatory.jsx
@@ -0,0 +1,66 @@
+import PropTypes from 'prop-types';
+import {
+  Image, Icon, Stack, IconButtonWithTooltip,
+} from '@openedx/paragon';
+import {
+  EditOutline as EditOutlineIcon,
+} from '@openedx/paragon/icons';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { getConfig } from '@edx/frontend-platform';
+
+import commonMessages from '../../messages';
+import messages from '../messages';
+
+const Signatory = ({
+  index,
+  name,
+  title,
+  organization,
+  signatureImagePath,
+  handleEdit,
+}) => {
+  const intl = useIntl();
+
+  return (
+    <div className="bg-light-200 p-2.5 signatory" data-testid="signatory">
+      <Stack className="signatory__header" gap={3}>
+        <h3 className="section-title m-0">{`${intl.formatMessage(messages.signatoryTitle)} ${index + 1}`}</h3>
+        <Stack className="signatory__text-fields-stack">
+          <p className="signatory__text"><b>{intl.formatMessage(messages.nameLabel)}</b> {name}</p>
+          <p className="signatory__text"><b>{intl.formatMessage(messages.titleLabel)}</b> {title}</p>
+          <p className="signatory__text"><b>{intl.formatMessage(messages.organizationLabel)}</b> {organization}</p>
+        </Stack>
+      </Stack>
+
+      <IconButtonWithTooltip
+        className="signatory__action-button"
+        src={EditOutlineIcon}
+        iconAs={Icon}
+        alt={intl.formatMessage(commonMessages.editTooltip)}
+        tooltipContent={<div>{intl.formatMessage(commonMessages.editTooltip)}</div>}
+        onClick={handleEdit}
+      />
+      <div className="signatory__image-container">
+        {signatureImagePath && (
+          <Image
+            src={`${getConfig().STUDIO_BASE_URL}${signatureImagePath}`}
+            fluid
+            alt={intl.formatMessage(messages.imageLabel)}
+            className="signatory__image"
+          />
+        )}
+      </div>
+    </div>
+  );
+};
+
+Signatory.propTypes = {
+  name: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  organization: PropTypes.string.isRequired,
+  signatureImagePath: PropTypes.string.isRequired,
+  index: PropTypes.number.isRequired,
+  handleEdit: PropTypes.func.isRequired,
+};
+
+export default Signatory;
diff --git a/src/certificates/certificate-signatories/signatory/Signatory.test.jsx b/src/certificates/certificate-signatories/signatory/Signatory.test.jsx
new file mode 100644
index 0000000000..84f3194a61
--- /dev/null
+++ b/src/certificates/certificate-signatories/signatory/Signatory.test.jsx
@@ -0,0 +1,45 @@
+import { render } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import userEvent from '@testing-library/user-event';
+
+import { signatoriesMock } from '../../__mocks__';
+import commonMessages from '../../messages';
+import messages from '../messages';
+import Signatory from './Signatory';
+
+const mockHandleEdit = jest.fn();
+
+const renderSignatory = (props) => render(
+  <IntlProvider locale="en">
+    <Signatory {...props} />
+  </IntlProvider>,
+);
+
+const defaultProps = { ...signatoriesMock[0], handleEdit: mockHandleEdit, index: 0 };
+
+describe('Signatory Component', () => {
+  it('renders in MODE_STATES.view mode', () => {
+    const {
+      getByText, queryByText, getByAltText, getByRole,
+    } = renderSignatory(defaultProps);
+    const signatureImage = getByAltText(messages.imageLabel.defaultMessage);
+    const sectionTitle = getByRole('heading', { level: 3, name: `${messages.signatoryTitle.defaultMessage} ${defaultProps.index + 1}` });
+
+    expect(sectionTitle).toBeInTheDocument();
+    expect(getByText(defaultProps.name)).toBeInTheDocument();
+    expect(getByText(defaultProps.title)).toBeInTheDocument();
+    expect(getByText(defaultProps.organization)).toBeInTheDocument();
+    expect(signatureImage).toBeInTheDocument();
+    expect(signatureImage).toHaveAttribute('src', expect.stringContaining(defaultProps.signatureImagePath));
+    expect(queryByText(messages.namePlaceholder.defaultMessage)).not.toBeInTheDocument();
+  });
+
+  it('calls handleEdit when the edit button is clicked', () => {
+    const { getByRole } = renderSignatory(defaultProps);
+
+    const editButton = getByRole('button', { name: commonMessages.editTooltip.defaultMessage });
+    userEvent.click(editButton);
+
+    expect(mockHandleEdit).toHaveBeenCalled();
+  });
+});
diff --git a/src/certificates/certificate-signatories/signatory/SignatoryForm.jsx b/src/certificates/certificate-signatories/signatory/SignatoryForm.jsx
new file mode 100644
index 0000000000..8452eaf4fd
--- /dev/null
+++ b/src/certificates/certificate-signatories/signatory/SignatoryForm.jsx
@@ -0,0 +1,200 @@
+import PropTypes from 'prop-types';
+import { useDispatch } from 'react-redux';
+import {
+  Image, Icon, Stack, IconButtonWithTooltip, FormLabel, Form, Button, useToggle,
+} from '@openedx/paragon';
+import { DeleteOutline as DeleteOutlineIcon } from '@openedx/paragon/icons';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { getConfig } from '@edx/frontend-platform';
+
+import ModalDropzone from '../../../generic/modal-dropzone/ModalDropzone';
+import ModalNotification from '../../../generic/modal-notification';
+import { updateSavingImageStatus } from '../../data/slice';
+import commonMessages from '../../messages';
+import messages from '../messages';
+
+const SignatoryForm = ({
+  index,
+  name,
+  title,
+  isEdit,
+  handleBlur,
+  organization,
+  handleChange,
+  setFieldValue,
+  showDeleteButton,
+  signatureImagePath,
+  handleDeleteSignatory,
+  handleCancelUpdateSignatory,
+}) => {
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const [isOpen, open, close] = useToggle(false);
+  const [isConfirmOpen, confirmOpen, confirmClose] = useToggle(false);
+
+  const handleImageUpload = (newImagePath) => {
+    setFieldValue(`signatories[${index}].signatureImagePath`, newImagePath);
+  };
+
+  const handleSavingStatusDispatch = (status) => {
+    dispatch(updateSavingImageStatus(status));
+  };
+
+  const formData = [
+    {
+      labelText: intl.formatMessage(messages.nameLabel),
+      value: name,
+      name: `signatories[${index}].name`,
+      placeholder: intl.formatMessage(messages.namePlaceholder),
+      feedback: intl.formatMessage(messages.nameDescription),
+      onChange: handleChange,
+      onBlur: handleBlur,
+    },
+    {
+      as: 'textarea',
+      labelText: intl.formatMessage(messages.titleLabel),
+      value: title,
+      name: `signatories[${index}].title`,
+      placeholder: intl.formatMessage(messages.titlePlaceholder),
+      feedback: intl.formatMessage(messages.titleDescription),
+      onChange: handleChange,
+      onBlur: handleBlur,
+    },
+    {
+      labelText: intl.formatMessage(messages.organizationLabel),
+      value: organization,
+      name: `signatories[${index}].organization`,
+      placeholder: intl.formatMessage(messages.organizationPlaceholder),
+      feedback: intl.formatMessage(messages.organizationDescription),
+      onChange: handleChange,
+      onBlur: handleBlur,
+    },
+  ];
+
+  const uploadReplaceText = intl.formatMessage(
+    messages.uploadImageButton,
+    {
+      uploadText: signatureImagePath
+        ? intl.formatMessage(messages.uploadModalReplace)
+        : intl.formatMessage(messages.uploadModal),
+    },
+  );
+
+  return (
+    <div className="bg-light-200 p-2.5 signatory-form" data-testid="signatory-form">
+      <Stack className="justify-content-between mb-4" direction="horizontal">
+        <h3 className="section-title">{`${intl.formatMessage(messages.signatoryTitle)} ${index + 1}`}</h3>
+        <Stack direction="horizontal" gap="2">
+          {showDeleteButton && (
+            <IconButtonWithTooltip
+              src={DeleteOutlineIcon}
+              iconAs={Icon}
+              alt={intl.formatMessage(commonMessages.deleteTooltip)}
+              tooltipContent={<div>{intl.formatMessage(commonMessages.deleteTooltip)}</div>}
+              onClick={confirmOpen}
+            />
+          )}
+        </Stack>
+      </Stack>
+
+      <Stack gap="4">
+        {formData.map(({ labelText, feedback, ...rest }) => (
+          <Form.Group className="m-0" key={labelText}>
+            <FormLabel>{labelText}</FormLabel>
+            <Form.Control {...rest} className="m-0" />
+            <Form.Control.Feedback>
+              <span className="x-small">{feedback}</span>
+            </Form.Control.Feedback>
+          </Form.Group>
+        ))}
+        <Form.Group className="m-0">
+          <FormLabel> {intl.formatMessage(messages.imageLabel)}</FormLabel>
+          {signatureImagePath && (
+            <Image
+              src={`${getConfig().STUDIO_BASE_URL}${signatureImagePath}`}
+              fluid
+              alt={intl.formatMessage(messages.imageLabel)}
+              className="signatory__image"
+            />
+          )}
+          <Stack direction="horizontal" className="align-items-baseline">
+            <Stack>
+              <Form.Control
+                readOnly
+                value={signatureImagePath}
+                name={`signatories[${index}].signatureImagePath`}
+                placeholder={intl.formatMessage(messages.imagePlaceholder)}
+              />
+              <Form.Control.Feedback>
+                <span className="x-small">{intl.formatMessage(messages.imageDescription)}</span>
+              </Form.Control.Feedback>
+            </Stack>
+            <Button onClick={open}>{uploadReplaceText}</Button>
+          </Stack>
+        </Form.Group>
+      </Stack>
+      {isEdit && (
+        <Stack direction="horizontal" gap="2" className="mt-4">
+          <Button type="submit">
+            {intl.formatMessage(commonMessages.saveTooltip)}
+          </Button>
+          <Button
+            variant="outline-primary"
+            onClick={() => handleCancelUpdateSignatory()}
+          >
+            {intl.formatMessage(commonMessages.cardCancel)}
+          </Button>
+        </Stack>
+      )}
+
+      <ModalDropzone
+        isOpen={isOpen}
+        onClose={close}
+        onCancel={close}
+        onChange={handleImageUpload}
+        fileTypes={['png']}
+        onSavingStatus={handleSavingStatusDispatch}
+        imageHelpText={intl.formatMessage(messages.imageDescription)}
+        modalTitle={uploadReplaceText}
+      />
+      <ModalNotification
+        isOpen={isConfirmOpen}
+        title={intl.formatMessage(messages.deleteSignatoryConfirmation, { name })}
+        message={intl.formatMessage(messages.deleteSignatoryConfirmationMessage)}
+        actionButtonText={intl.formatMessage(commonMessages.deleteTooltip)}
+        cancelButtonText={intl.formatMessage(commonMessages.cardCancel)}
+        handleCancel={confirmClose}
+        handleAction={() => {
+          confirmClose();
+          handleDeleteSignatory();
+        }}
+      />
+    </div>
+  );
+};
+
+SignatoryForm.defaultProps = {
+  isEdit: false,
+  handleChange: null,
+  handleBlur: null,
+  handleDeleteSignatory: null,
+  setFieldValue: null,
+  handleCancelUpdateSignatory: null,
+};
+
+SignatoryForm.propTypes = {
+  name: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  organization: PropTypes.string.isRequired,
+  showDeleteButton: PropTypes.bool.isRequired,
+  signatureImagePath: PropTypes.string.isRequired,
+  index: PropTypes.number.isRequired,
+  isEdit: PropTypes.bool,
+  handleChange: PropTypes.func,
+  handleBlur: PropTypes.func,
+  setFieldValue: PropTypes.func,
+  handleDeleteSignatory: PropTypes.func,
+  handleCancelUpdateSignatory: PropTypes.func,
+};
+
+export default SignatoryForm;
diff --git a/src/certificates/certificate-signatories/signatory/SignatoryForm.test.jsx b/src/certificates/certificate-signatories/signatory/SignatoryForm.test.jsx
new file mode 100644
index 0000000000..5ba99ab5ac
--- /dev/null
+++ b/src/certificates/certificate-signatories/signatory/SignatoryForm.test.jsx
@@ -0,0 +1,161 @@
+import { render, waitFor } from '@testing-library/react';
+import { Provider } from 'react-redux';
+import userEvent from '@testing-library/user-event';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { initializeMockApp } from '@edx/frontend-platform';
+
+import initializeStore from '../../../store';
+import { signatoriesMock } from '../../__mocks__';
+import commonMessages from '../../messages';
+import messages from '../messages';
+import SignatoryForm from './SignatoryForm';
+
+let store;
+
+const renderSignatory = (props) => render(
+  <Provider store={store}>
+    <IntlProvider locale="en">
+      <SignatoryForm {...props} />
+    </IntlProvider>,
+  </Provider>,
+);
+
+const initialState = {
+  certificates: {
+    certificatesData: {
+      certificates: [],
+      hasCertificateModes: true,
+    },
+  },
+};
+
+const defaultProps = {
+  ...signatoriesMock[0],
+  showDeleteButton: true,
+  isEdit: true,
+  handleChange: jest.fn(),
+  handleBlur: jest.fn(),
+  setFieldValue: jest.fn(),
+  handleDeleteSignatory: jest.fn(),
+  handleCancelUpdateSignatory: jest.fn(),
+};
+
+describe('Signatory Component', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+    store = initializeStore(initialState);
+  });
+  it('renders in CREATE mode', () => {
+    const { queryByTestId, getByPlaceholderText } = renderSignatory(defaultProps);
+
+    expect(queryByTestId('signatory-view')).not.toBeInTheDocument();
+    expect(getByPlaceholderText(messages.namePlaceholder.defaultMessage)).toBeInTheDocument();
+  });
+
+  it('handles input change', async () => {
+    const handleChange = jest.fn();
+    const { getByPlaceholderText } = renderSignatory({ ...defaultProps, handleChange });
+    const input = getByPlaceholderText(messages.namePlaceholder.defaultMessage);
+    const newInputValue = 'Jane Doe';
+
+    userEvent.type(input, newInputValue, { name: 'signatories[0].name' });
+
+    waitFor(() => {
+      expect(handleChange).toHaveBeenCalledWith(expect.anything());
+      expect(input.value).toBe(newInputValue);
+    });
+  });
+
+  it('opens image upload modal on button click', () => {
+    const { getByRole, queryByRole } = renderSignatory(defaultProps);
+    const replaceButton = getByRole(
+      'button',
+      { name: messages.uploadImageButton.defaultMessage.replace('{uploadText}', messages.uploadModalReplace.defaultMessage) },
+    );
+
+    expect(queryByRole('presentation')).not.toBeInTheDocument();
+
+    userEvent.click(replaceButton);
+
+    expect(getByRole('presentation')).toBeInTheDocument();
+  });
+
+  it('shows confirm modal on delete icon click', async () => {
+    const { getByLabelText, getByText } = renderSignatory(defaultProps);
+    const deleteIcon = getByLabelText(commonMessages.deleteTooltip.defaultMessage);
+
+    userEvent.click(deleteIcon);
+
+    expect(getByText(messages.deleteSignatoryConfirmationMessage.defaultMessage)).toBeInTheDocument();
+  });
+
+  it('cancels deletion of a signatory', () => {
+    const { getByRole } = renderSignatory(defaultProps);
+
+    const deleteIcon = getByRole('button', { name: commonMessages.deleteTooltip.defaultMessage });
+    userEvent.click(deleteIcon);
+
+    const cancelButton = getByRole('button', { name: commonMessages.cardCancel.defaultMessage });
+    userEvent.click(cancelButton);
+
+    expect(defaultProps.handleDeleteSignatory).not.toHaveBeenCalled();
+  });
+
+  it('renders without save button with isEdit=false', () => {
+    const { queryByRole } = renderSignatory({ ...defaultProps, isEdit: false });
+
+    const deleteIcon = queryByRole('button', { name: commonMessages.saveTooltip.defaultMessage });
+
+    expect(deleteIcon).not.toBeInTheDocument();
+  });
+
+  it('renders button with Replace text if there is a signatureImagePath', () => {
+    const newProps = {
+      ...defaultProps,
+      isEdit: false,
+    };
+
+    const { getByRole, queryByRole } = renderSignatory(newProps);
+
+    const replaceButton = getByRole(
+      'button',
+      { name: messages.uploadImageButton.defaultMessage.replace('{uploadText}', messages.uploadModalReplace.defaultMessage) },
+    );
+    const uploadButton = queryByRole(
+      'button',
+      { name: messages.uploadImageButton.defaultMessage.replace('{uploadText}', messages.uploadModal.defaultMessage) },
+    );
+
+    expect(replaceButton).toBeInTheDocument();
+    expect(uploadButton).not.toBeInTheDocument();
+  });
+
+  it('renders button with Upload text if there is no signatureImagePath', () => {
+    const newProps = {
+      ...defaultProps,
+      signatureImagePath: '',
+      isEdit: false,
+    };
+
+    const { getByRole, queryByRole } = renderSignatory(newProps);
+
+    const uploadButton = getByRole(
+      'button',
+      { name: messages.uploadImageButton.defaultMessage.replace('{uploadText}', messages.uploadModal.defaultMessage) },
+    );
+    const replaceButton = queryByRole(
+      'button',
+      { name: messages.uploadImageButton.defaultMessage.replace('{uploadText}', messages.uploadModalReplace.defaultMessage) },
+    );
+
+    expect(uploadButton).toBeInTheDocument();
+    expect(replaceButton).not.toBeInTheDocument();
+  });
+});
diff --git a/src/certificates/certificate-without-modes/CertificateWithoutModes.jsx b/src/certificates/certificate-without-modes/CertificateWithoutModes.jsx
new file mode 100644
index 0000000000..b502b1fdfd
--- /dev/null
+++ b/src/certificates/certificate-without-modes/CertificateWithoutModes.jsx
@@ -0,0 +1,17 @@
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Card } from '@openedx/paragon';
+
+import messages from '../messages';
+
+const CertificateWithoutModes = () => {
+  const intl = useIntl();
+  return (
+    <Card>
+      <Card.Section className="d-flex justify-content-center">
+        <span className="small">{intl.formatMessage(messages.withoutModesText)}</span>
+      </Card.Section>
+    </Card>
+  );
+};
+
+export default CertificateWithoutModes;
diff --git a/src/certificates/certificate-without-modes/CertificateWithoutModes.test.jsx b/src/certificates/certificate-without-modes/CertificateWithoutModes.test.jsx
new file mode 100644
index 0000000000..f8f6deb6e6
--- /dev/null
+++ b/src/certificates/certificate-without-modes/CertificateWithoutModes.test.jsx
@@ -0,0 +1,43 @@
+import { render, waitFor } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { initializeMockApp } from '@edx/frontend-platform';
+import { AppProvider } from '@edx/frontend-platform/react';
+
+import initializeStore from '../../store';
+import messages from '../messages';
+import WithoutModes from './CertificateWithoutModes';
+
+const courseId = 'course-123';
+let store;
+
+const renderComponent = (props) => render(
+  <AppProvider store={store} messages={{}}>
+    <IntlProvider locale="en">
+      <WithoutModes courseId={courseId} {...props} />
+    </IntlProvider>
+  </AppProvider>,
+);
+
+describe('CertificateWithoutModes', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+    store = initializeStore();
+  });
+
+  it('renders correctly', async () => {
+    const { getByText, queryByText } = renderComponent();
+    await waitFor(() => {
+      expect(getByText(messages.withoutModesText.defaultMessage)).toBeInTheDocument();
+
+      expect(queryByText(messages.headingActionsPreview.defaultMessage)).not.toBeInTheDocument();
+      expect(queryByText(messages.headingActionsDeactivate.defaultMessage)).not.toBeInTheDocument();
+    });
+  });
+});
diff --git a/src/certificates/certificates-list/CertificatesList.jsx b/src/certificates/certificates-list/CertificatesList.jsx
new file mode 100644
index 0000000000..9e394c3e98
--- /dev/null
+++ b/src/certificates/certificates-list/CertificatesList.jsx
@@ -0,0 +1,69 @@
+import PropTypes from 'prop-types';
+import { Card, Stack } from '@openedx/paragon';
+import { Formik, Form, FieldArray } from 'formik';
+
+import CertificateDetails from '../certificate-details/CertificateDetails';
+import CertificateSignatories from '../certificate-signatories/CertificateSignatories';
+import useCertificatesList from './hooks/useCertificatesList';
+
+const CertificatesList = ({ courseId }) => {
+  const {
+    editModes,
+    courseTitle,
+    certificates,
+    courseNumber,
+    initialValues,
+    courseNumberOverride,
+    setEditModes,
+    handleSubmit,
+  } = useCertificatesList(courseId);
+
+  return (
+    <>
+      {certificates.map((certificate, idx) => (
+        <Formik initialValues={initialValues[idx]} onSubmit={handleSubmit} key={certificate.id}>
+          {({
+            values, handleChange, handleBlur, setFieldValue,
+          }) => (
+            <Form className="certificates-card-form" data-testid="certificates-list">
+              <Card>
+                <Card.Section>
+                  <Stack gap="2">
+                    <CertificateDetails
+                      detailsCourseTitle={courseTitle}
+                      detailsCourseNumber={courseNumber}
+                      courseNumberOverride={courseNumberOverride}
+                      courseTitleOverride={certificate.courseTitle}
+                      certificateId={certificate.id}
+                    />
+                    <FieldArray
+                      name="signatories"
+                      render={arrayHelpers => (
+                        <CertificateSignatories
+                          signatories={values.signatories}
+                          arrayHelpers={arrayHelpers}
+                          editModes={editModes}
+                          initialSignatoriesValues={initialValues[idx].signatories}
+                          handleChange={handleChange}
+                          handleBlur={handleBlur}
+                          setFieldValue={setFieldValue}
+                          setEditModes={setEditModes}
+                        />
+                      )}
+                    />
+                  </Stack>
+                </Card.Section>
+              </Card>
+            </Form>
+          )}
+        </Formik>
+      ))}
+    </>
+  );
+};
+
+CertificatesList.propTypes = {
+  courseId: PropTypes.string.isRequired,
+};
+
+export default CertificatesList;
diff --git a/src/certificates/certificates-list/CertificatesList.test.jsx b/src/certificates/certificates-list/CertificatesList.test.jsx
new file mode 100644
index 0000000000..fcf3d253f7
--- /dev/null
+++ b/src/certificates/certificates-list/CertificatesList.test.jsx
@@ -0,0 +1,133 @@
+import { Provider } from 'react-redux';
+import { render, waitFor, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { initializeMockApp } from '@edx/frontend-platform';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import MockAdapter from 'axios-mock-adapter';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+
+import { executeThunk } from '../../utils';
+import initializeStore from '../../store';
+import { MODE_STATES } from '../data/constants';
+import { getCertificatesApiUrl, getUpdateCertificateApiUrl } from '../data/api';
+import { fetchCertificates, updateCourseCertificate } from '../data/thunks';
+import { certificatesMock, certificatesDataMock } from '../__mocks__';
+import signatoryMessages from '../certificate-signatories/messages';
+import messages from '../messages';
+import CertificatesList from './CertificatesList';
+
+let axiosMock;
+let store;
+const courseId = 'course-123';
+
+const renderComponent = () => render(
+  <Provider store={store}>
+    <IntlProvider locale="en">
+      <CertificatesList courseId="course-123" />
+    </IntlProvider>
+  </Provider>,
+);
+
+describe('CertificatesList Component', () => {
+  beforeEach(async () => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+    store = initializeStore();
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+    axiosMock
+      .onGet(getCertificatesApiUrl(courseId))
+      .reply(200, {
+        ...certificatesDataMock,
+        certificates: certificatesMock,
+      });
+    await executeThunk(fetchCertificates(courseId), store.dispatch);
+  });
+
+  it('renders each certificate', () => {
+    const { getByText } = renderComponent();
+
+    certificatesMock.forEach((certificate) => {
+      certificate.signatories.forEach((signatory) => {
+        expect(getByText(signatory.name)).toBeInTheDocument();
+        expect(getByText(signatory.title)).toBeInTheDocument();
+        expect(getByText(signatory.organization)).toBeInTheDocument();
+      });
+    });
+  });
+
+  it('update certificate', async () => {
+    const {
+      getByText, queryByText, getByPlaceholderText, getByRole, getAllByLabelText,
+    } = renderComponent();
+
+    const signatoryNameValue = 'Updated signatory name';
+    const newCertificateData = {
+      ...certificatesDataMock,
+      certificates: [{
+        ...certificatesMock[0],
+        signatories: [{
+          ...certificatesMock[0].signatories[0],
+          name: signatoryNameValue,
+        }],
+      }],
+    };
+
+    const editButtons = getAllByLabelText(messages.editTooltip.defaultMessage);
+
+    userEvent.click(editButtons[1]);
+
+    const nameInput = getByPlaceholderText(signatoryMessages.namePlaceholder.defaultMessage);
+    userEvent.clear(nameInput);
+    userEvent.type(nameInput, signatoryNameValue);
+
+    userEvent.click(getByRole('button', { name: messages.saveTooltip.defaultMessage }));
+
+    axiosMock
+      .onPost(getUpdateCertificateApiUrl(courseId, certificatesMock.id))
+      .reply(200, newCertificateData);
+    await executeThunk(updateCourseCertificate(courseId, newCertificateData), store.dispatch);
+
+    await waitFor(() => {
+      expect(getByText(newCertificateData.certificates[0].signatories[0].name)).toBeInTheDocument();
+      expect(queryByText(certificatesDataMock.certificates[0].signatories[0].name)).not.toBeInTheDocument();
+    });
+  });
+
+  it('toggle edit signatory', async () => {
+    const {
+      getAllByLabelText, queryByPlaceholderText, getByTestId, getByPlaceholderText,
+    } = renderComponent();
+    const editButtons = getAllByLabelText(messages.editTooltip.defaultMessage);
+
+    expect(editButtons.length).toBe(3);
+
+    userEvent.click(editButtons[1]);
+
+    await waitFor(() => {
+      expect(getByPlaceholderText(signatoryMessages.namePlaceholder.defaultMessage)).toBeInTheDocument();
+    });
+
+    userEvent.click(within(getByTestId('signatory-form')).getByRole('button', { name: messages.cardCancel.defaultMessage }));
+
+    await waitFor(() => {
+      expect(queryByPlaceholderText(signatoryMessages.namePlaceholder.defaultMessage)).not.toBeInTheDocument();
+    });
+  });
+
+  it('toggle certificate edit all', async () => {
+    const { getByTestId } = renderComponent();
+    const detailsSection = getByTestId('certificate-details');
+    const editButton = within(detailsSection).getByLabelText(messages.editTooltip.defaultMessage);
+    userEvent.click(editButton);
+
+    await waitFor(() => {
+      expect(store.getState().certificates.componentMode).toBe(MODE_STATES.editAll);
+    });
+  });
+});
diff --git a/src/certificates/certificates-list/hooks/useCertificatesList.jsx b/src/certificates/certificates-list/hooks/useCertificatesList.jsx
new file mode 100644
index 0000000000..952fa8534a
--- /dev/null
+++ b/src/certificates/certificates-list/hooks/useCertificatesList.jsx
@@ -0,0 +1,45 @@
+import { useState } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+
+import { MODE_STATES } from '../../data/constants';
+import {
+  getCourseTitle, getCourseNumber, getCourseNumberOverride, getCertificates,
+} from '../../data/selectors';
+import { updateCourseCertificate } from '../../data/thunks';
+import { setMode } from '../../data/slice';
+import { defaultCertificate } from '../../constants';
+
+const useCertificatesList = (courseId) => {
+  const dispatch = useDispatch();
+  const certificates = useSelector(getCertificates);
+  const courseTitle = useSelector(getCourseTitle);
+  const courseNumber = useSelector(getCourseNumber);
+  const courseNumberOverride = useSelector(getCourseNumberOverride);
+
+  const [editModes, setEditModes] = useState({});
+
+  const initialValues = certificates.map((certificate) => ({
+    ...certificate,
+    courseTitle: certificate.courseTitle || defaultCertificate.courseTitle,
+    signatories: certificate.signatories || defaultCertificate.signatories,
+  }));
+
+  const handleSubmit = async (values) => {
+    await dispatch(updateCourseCertificate(courseId, values));
+    setEditModes({});
+    dispatch(setMode(MODE_STATES.view));
+  };
+
+  return {
+    editModes,
+    courseTitle,
+    certificates,
+    courseNumber,
+    initialValues,
+    courseNumberOverride,
+    setEditModes,
+    handleSubmit,
+  };
+};
+
+export default useCertificatesList;
diff --git a/src/certificates/constants.js b/src/certificates/constants.js
new file mode 100644
index 0000000000..f948bb46e0
--- /dev/null
+++ b/src/certificates/constants.js
@@ -0,0 +1,12 @@
+import { v4 as uuid } from 'uuid';
+
+export const defaultCertificate = {
+  courseTitle: '',
+  signatories: [{
+    id: `local-${uuid()}`,
+    name: '',
+    title: '',
+    organization: '',
+    signatureImagePath: '',
+  }],
+};
diff --git a/src/certificates/data/api.js b/src/certificates/data/api.js
new file mode 100644
index 0000000000..c76a06e589
--- /dev/null
+++ b/src/certificates/data/api.js
@@ -0,0 +1,88 @@
+import { camelCaseObject, getConfig } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+
+import { prepareCertificatePayload } from '../utils';
+
+const getApiBaseUrl = () => getConfig().STUDIO_BASE_URL;
+
+export const getCertificatesApiUrl = (courseId) => `${getApiBaseUrl()}/api/contentstore/v1/certificates/${courseId}`;
+export const getCertificateApiUrl = (courseId) => `${getApiBaseUrl()}/certificates/${courseId}`;
+export const getUpdateCertificateApiUrl = (courseId, certificateId) => `${getCertificateApiUrl(courseId)}/${certificateId}`;
+export const getUpdateCertificateActiveStatusApiUrl = (path) => `${getApiBaseUrl()}${path}`;
+
+/**
+ * Gets certificates for a course.
+ * @param {string} courseId
+ * @returns {Promise<Object>}
+ */
+export async function getCertificates(courseId) {
+  const { data } = await getAuthenticatedHttpClient()
+    .get(getCertificatesApiUrl(courseId));
+
+  return camelCaseObject(data);
+}
+
+/**
+ * Create course certificate.
+ * @param {string} courseId
+ * @param {object} certificatesData
+ * @returns {Promise<Object>}
+ */
+
+export async function createCertificate(courseId, certificatesData) {
+  const { data } = await getAuthenticatedHttpClient()
+    .post(
+      getCertificateApiUrl(courseId),
+      prepareCertificatePayload(certificatesData),
+    );
+
+  return camelCaseObject(data);
+}
+
+/**
+ * Update course certificate.
+ * @param {string} courseId
+ * @param {object} certificateData
+ * @returns {Promise<Object>}
+ */
+export async function updateCertificate(courseId, certificateData) {
+  const { data } = await getAuthenticatedHttpClient()
+    .post(
+      getUpdateCertificateApiUrl(courseId, certificateData.id),
+      prepareCertificatePayload(certificateData),
+    );
+  return camelCaseObject(data);
+}
+
+/**
+ * Delete course certificate.
+ * @param {string} courseId
+ * @param {object} certificateId
+ * @returns {Promise<Object>}
+ */
+export async function deleteCertificate(courseId, certificateId) {
+  const { data } = await getAuthenticatedHttpClient()
+    .delete(
+      getUpdateCertificateApiUrl(courseId, certificateId),
+    );
+  return data;
+}
+
+/**
+ * Activate/deactivate course certificate.
+ * @param {string} courseId
+ * @param {object} activationStatus
+ * @returns {Promise<Object>}
+ */
+export async function updateActiveStatus(path, activationStatus) {
+  const body = {
+    is_active: activationStatus,
+  };
+
+  const { data } = await getAuthenticatedHttpClient()
+    .post(
+      getUpdateCertificateActiveStatusApiUrl(path),
+      body,
+    );
+  return camelCaseObject(data);
+}
diff --git a/src/certificates/data/constants.js b/src/certificates/data/constants.js
new file mode 100644
index 0000000000..374875cc53
--- /dev/null
+++ b/src/certificates/data/constants.js
@@ -0,0 +1,12 @@
+export const MODE_STATES = {
+  noModes: 'no_modes',
+  noCertificates: 'no_certificates',
+  view: 'view',
+  editAll: 'edit_all',
+  create: 'create',
+};
+
+export const ACTIVATION_MESSAGES = {
+  activating: 'Activating',
+  deactivating: 'Deactivating',
+};
diff --git a/src/certificates/data/selectors.js b/src/certificates/data/selectors.js
new file mode 100644
index 0000000000..4e2cfdaccc
--- /dev/null
+++ b/src/certificates/data/selectors.js
@@ -0,0 +1,22 @@
+import { createSelector } from '@reduxjs/toolkit';
+
+export const getLoadingStatus = (state) => state.certificates.loadingStatus;
+export const getSavingStatus = (state) => state.certificates.savingStatus;
+export const getSavingImageStatus = (state) => state.certificates.savingImageStatus;
+export const getErrorMessage = (state) => state.certificates.errorMessage;
+export const getSendRequestErrors = (state) => state.certificates.sendRequestErrors.developer_message;
+export const getCertificates = state => state.certificates.certificatesData.certificates;
+export const getHasCertificateModes = state => state.certificates.certificatesData.hasCertificateModes;
+export const getCourseModes = state => state.certificates.certificatesData.courseModes;
+export const getCertificateActivationUrl = state => state.certificates.certificatesData.certificateActivationHandlerUrl;
+export const getCertificateWebViewUrl = state => state.certificates.certificatesData.certificateWebViewUrl;
+export const getIsCertificateActive = state => state.certificates.certificatesData.isActive;
+export const getComponentMode = state => state.certificates.componentMode;
+export const getCourseNumber = state => state.certificates.certificatesData.courseNumber;
+export const getCourseNumberOverride = state => state.certificates.certificatesData.courseNumberOverride;
+export const getCourseTitle = state => state.certificates.certificatesData.courseTitle;
+
+export const getHasCertificates = createSelector(
+  [getCertificates],
+  (certificates) => certificates && certificates.length > 0,
+);
diff --git a/src/certificates/data/slice.js b/src/certificates/data/slice.js
new file mode 100644
index 0000000000..a78c48a754
--- /dev/null
+++ b/src/certificates/data/slice.js
@@ -0,0 +1,62 @@
+/* eslint-disable no-param-reassign */
+import { createSlice } from '@reduxjs/toolkit';
+
+import { RequestStatus } from '../../data/constants';
+import { MODE_STATES } from './constants';
+
+const slice = createSlice({
+  name: 'certificates',
+  initialState: {
+    certificatesData: {},
+    componentMode: MODE_STATES.noModes,
+    loadingStatus: RequestStatus.PENDING,
+    savingStatus: '',
+    savingImageStatus: '',
+    errorMessage: '',
+  },
+  reducers: {
+    updateSavingStatus: (state, { payload }) => {
+      const { status, errorMessage } = payload;
+      state.savingStatus = status;
+      state.errorMessage = errorMessage;
+    },
+    updateSavingImageStatus: (state, { payload }) => {
+      state.savingImageStatus = payload.status;
+    },
+    updateLoadingStatus: (state, { payload }) => {
+      state.loadingStatus = payload.status;
+    },
+    fetchCertificatesSuccess: (state, { payload }) => {
+      Object.assign(state.certificatesData, payload);
+    },
+    createCertificateSuccess: (state, action) => {
+      state.certificatesData.certificates.push(action.payload);
+    },
+    updateCertificateSuccess: (state, action) => {
+      const index = state.certificatesData.certificates.findIndex(c => c.id === action.payload.id);
+
+      if (index !== -1) {
+        state.certificatesData.certificates[index] = action.payload;
+      }
+    },
+    setMode: (state, action) => {
+      state.componentMode = action.payload;
+    },
+    deleteCertificateSuccess: (state) => {
+      state.certificatesData.certificates = [];
+    },
+  },
+});
+
+export const {
+  setMode,
+  updateSavingStatus,
+  updateLoadingStatus,
+  updateSavingImageStatus,
+  fetchCertificatesSuccess,
+  createCertificateSuccess,
+  updateCertificateSuccess,
+  deleteCertificateSuccess,
+} = slice.actions;
+
+export const { reducer } = slice;
diff --git a/src/certificates/data/thunks.js b/src/certificates/data/thunks.js
new file mode 100644
index 0000000000..94bd81c356
--- /dev/null
+++ b/src/certificates/data/thunks.js
@@ -0,0 +1,117 @@
+import { RequestStatus } from '../../data/constants';
+import {
+  hideProcessingNotification,
+  showProcessingNotification,
+} from '../../generic/processing-notification/data/slice';
+import { handleResponseErrors } from '../../generic/saving-error-alert';
+import { NOTIFICATION_MESSAGES } from '../../constants';
+import {
+  getCertificates,
+  createCertificate,
+  updateCertificate,
+  deleteCertificate,
+  updateActiveStatus,
+} from './api';
+import {
+  fetchCertificatesSuccess,
+  updateLoadingStatus,
+  updateSavingStatus,
+  createCertificateSuccess,
+  updateCertificateSuccess,
+  deleteCertificateSuccess,
+} from './slice';
+import { ACTIVATION_MESSAGES } from './constants';
+
+export function fetchCertificates(courseId) {
+  return async (dispatch) => {
+    dispatch(updateLoadingStatus({ status: RequestStatus.IN_PROGRESS }));
+
+    try {
+      const certificates = await getCertificates(courseId);
+
+      dispatch(fetchCertificatesSuccess(certificates));
+      dispatch(updateLoadingStatus({ status: RequestStatus.SUCCESSFUL }));
+    } catch (error) {
+      if (error.response && error.response.status === 403) {
+        dispatch(updateLoadingStatus({ courseId, status: RequestStatus.DENIED }));
+      } else {
+        dispatch(updateLoadingStatus({ courseId, status: RequestStatus.FAILED }));
+      }
+    }
+  };
+}
+
+export function createCourseCertificate(courseId, certificate) {
+  return async (dispatch) => {
+    dispatch(updateSavingStatus({ status: RequestStatus.PENDING }));
+    dispatch(showProcessingNotification(NOTIFICATION_MESSAGES.saving));
+
+    try {
+      const certificateValues = await createCertificate(courseId, certificate);
+      dispatch(createCertificateSuccess(certificateValues));
+      dispatch(updateSavingStatus({ status: RequestStatus.SUCCESSFUL }));
+      return true;
+    } catch (error) {
+      return handleResponseErrors(error, dispatch, updateSavingStatus);
+    } finally {
+      dispatch(hideProcessingNotification());
+    }
+  };
+}
+
+export function updateCourseCertificate(courseId, certificate) {
+  return async (dispatch) => {
+    dispatch(updateSavingStatus({ status: RequestStatus.PENDING }));
+    dispatch(showProcessingNotification(NOTIFICATION_MESSAGES.saving));
+
+    try {
+      const certificatesValues = await updateCertificate(courseId, certificate);
+      dispatch(updateSavingStatus({ status: RequestStatus.SUCCESSFUL }));
+      dispatch(updateCertificateSuccess(certificatesValues));
+      return true;
+    } catch (error) {
+      return handleResponseErrors(error, dispatch, updateSavingStatus);
+    } finally {
+      dispatch(hideProcessingNotification());
+    }
+  };
+}
+
+export function deleteCourseCertificate(courseId, certificateId) {
+  return async (dispatch) => {
+    dispatch(updateSavingStatus({ status: RequestStatus.PENDING }));
+    dispatch(showProcessingNotification(NOTIFICATION_MESSAGES.deleting));
+
+    try {
+      const certificatesValues = await deleteCertificate(courseId, certificateId);
+      dispatch(deleteCertificateSuccess(certificatesValues));
+      dispatch(updateSavingStatus({ status: RequestStatus.SUCCESSFUL }));
+      return true;
+    } catch (error) {
+      return handleResponseErrors(error, dispatch, updateSavingStatus);
+    } finally {
+      dispatch(hideProcessingNotification());
+    }
+  };
+}
+
+export function updateCertificateActiveStatus(courseId, path, activationStatus) {
+  return async (dispatch) => {
+    dispatch(updateSavingStatus({ status: RequestStatus.PENDING }));
+
+    dispatch(showProcessingNotification(
+      activationStatus ? ACTIVATION_MESSAGES.activating : ACTIVATION_MESSAGES.deactivating,
+    ));
+
+    try {
+      await updateActiveStatus(path, activationStatus);
+      dispatch(updateSavingStatus({ status: RequestStatus.SUCCESSFUL }));
+      dispatch(fetchCertificates(courseId));
+      return true;
+    } catch (error) {
+      return handleResponseErrors(error, dispatch, updateSavingStatus);
+    } finally {
+      dispatch(hideProcessingNotification());
+    }
+  };
+}
diff --git a/src/certificates/empty-certificates-with-modes/EmptyCertificatesWithModes.jsx b/src/certificates/empty-certificates-with-modes/EmptyCertificatesWithModes.jsx
new file mode 100644
index 0000000000..438a9431a9
--- /dev/null
+++ b/src/certificates/empty-certificates-with-modes/EmptyCertificatesWithModes.jsx
@@ -0,0 +1,36 @@
+import { useDispatch } from 'react-redux';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Button, ActionRow, Card } from '@openedx/paragon';
+import { Add as AddIcon } from '@openedx/paragon/icons';
+
+import { setMode } from '../data/slice';
+import { MODE_STATES } from '../data/constants';
+import messages from '../messages';
+
+const EmptyCertificatesWithModes = () => {
+  const intl = useIntl();
+  const dispatch = useDispatch();
+
+  const handleCreateMode = () => {
+    dispatch(setMode(MODE_STATES.create));
+  };
+
+  return (
+    <Card>
+      <Card.Section>
+        <ActionRow>
+          <span className="small">{intl.formatMessage(messages.noCertificatesText)}</span>
+          <ActionRow.Spacer />
+          <Button
+            iconBefore={AddIcon}
+            onClick={handleCreateMode}
+          >
+            {intl.formatMessage(messages.setupCertificateBtn)}
+          </Button>
+        </ActionRow>
+      </Card.Section>
+    </Card>
+  );
+};
+
+export default EmptyCertificatesWithModes;
diff --git a/src/certificates/empty-certificates-with-modes/EmptyCertificatesWithModes.test.jsx b/src/certificates/empty-certificates-with-modes/EmptyCertificatesWithModes.test.jsx
new file mode 100644
index 0000000000..d00c9145a9
--- /dev/null
+++ b/src/certificates/empty-certificates-with-modes/EmptyCertificatesWithModes.test.jsx
@@ -0,0 +1,44 @@
+import { render, waitFor } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { initializeMockApp } from '@edx/frontend-platform';
+import { AppProvider } from '@edx/frontend-platform/react';
+
+import initializeStore from '../../store';
+import messages from '../messages';
+import WithModesWithoutCertificates from './EmptyCertificatesWithModes';
+
+const courseId = 'course-123';
+let store;
+
+const renderComponent = (props) => render(
+  <AppProvider store={store} messages={{}}>
+    <IntlProvider locale="en">
+      <WithModesWithoutCertificates courseId={courseId} {...props} />
+    </IntlProvider>
+  </AppProvider>,
+);
+
+describe('EmptyCertificatesWithModes', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+    store = initializeStore();
+  });
+
+  it('renders correctly', async () => {
+    const { getByText, queryByText } = renderComponent();
+    await waitFor(() => {
+      expect(getByText(messages.noCertificatesText.defaultMessage)).toBeInTheDocument();
+      expect(getByText(messages.setupCertificateBtn.defaultMessage)).toBeInTheDocument();
+
+      expect(queryByText(messages.headingActionsPreview.defaultMessage)).not.toBeInTheDocument();
+      expect(queryByText(messages.headingActionsDeactivate.defaultMessage)).not.toBeInTheDocument();
+    });
+  });
+});
diff --git a/src/certificates/hooks/useCertificates.jsx b/src/certificates/hooks/useCertificates.jsx
new file mode 100644
index 0000000000..bcff06a278
--- /dev/null
+++ b/src/certificates/hooks/useCertificates.jsx
@@ -0,0 +1,49 @@
+import { useEffect, useMemo } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import { RequestStatus } from '../../data/constants';
+import getPageHeadTitle from '../../generic/utils';
+import {
+  getComponentMode, getLoadingStatus, getCertificates, getHasCertificateModes, getCourseTitle,
+} from '../data/selectors';
+import { setMode } from '../data/slice';
+import { fetchCertificates } from '../data/thunks';
+import { MODE_STATES } from '../data/constants';
+
+import messages from '../messages';
+
+const useCertificates = ({ courseId }) => {
+  const dispatch = useDispatch();
+  const intl = useIntl();
+
+  const componentMode = useSelector(getComponentMode);
+  const certificates = useSelector(getCertificates);
+  const loadingStatus = useSelector(getLoadingStatus);
+  const hasCertificateModes = useSelector(getHasCertificateModes);
+  const courseTitle = useSelector(getCourseTitle);
+
+  const isLoading = useMemo(() => loadingStatus === RequestStatus.IN_PROGRESS, [loadingStatus]);
+
+  const pageHeadTitle = getPageHeadTitle(courseTitle, intl.formatMessage(messages.headingTitleTabText));
+
+  useEffect(() => {
+    if (!hasCertificateModes) {
+      dispatch(setMode(MODE_STATES.noModes));
+    } else if (certificates.length === 0) {
+      dispatch(setMode(MODE_STATES.noCertificates));
+    } else {
+      dispatch(setMode(MODE_STATES.view));
+    }
+  }, [hasCertificateModes, certificates]);
+
+  useEffect(() => {
+    dispatch(fetchCertificates(courseId));
+  }, [courseId]);
+
+  return {
+    componentMode, isLoading, loadingStatus, certificates, pageHeadTitle, hasCertificateModes,
+  };
+};
+
+export default useCertificates;
diff --git a/src/certificates/index.js b/src/certificates/index.js
new file mode 100644
index 0000000000..ab7384be15
--- /dev/null
+++ b/src/certificates/index.js
@@ -0,0 +1 @@
+export { default as Certificates } from './Certificates';
diff --git a/src/certificates/layout/MainLayout.jsx b/src/certificates/layout/MainLayout.jsx
new file mode 100644
index 0000000000..8fde8ad017
--- /dev/null
+++ b/src/certificates/layout/MainLayout.jsx
@@ -0,0 +1,77 @@
+import PropTypes from 'prop-types';
+import { Container, Layout } from '@openedx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import { SavingErrorAlert } from '../../generic/saving-error-alert';
+import ProcessingNotification from '../../generic/processing-notification';
+import SubHeader from '../../generic/sub-header/SubHeader';
+import messages from '../messages';
+import CertificatesSidebar from './certificates-sidebar/CertificatesSidebar';
+import HeaderButtons from './header-buttons/HeaderButtons';
+import useLayout from './hooks/useLayout';
+
+const MainLayout = ({ courseId, showHeaderButtons, children }) => {
+  const intl = useIntl();
+
+  const {
+    errorMessage,
+    savingStatus,
+    isShowProcessingNotification,
+    processingNotificationTitle,
+  } = useLayout();
+
+  return (
+    <>
+      <Container size="xl" className="certificates px-4">
+        <div className="mt-5" />
+        <SubHeader
+          hideBorder
+          title={intl.formatMessage(messages.headingTitle)}
+          subtitle={intl.formatMessage(messages.headingSubtitle)}
+          headerActions={showHeaderButtons && <HeaderButtons />}
+        />
+        <section>
+          <Layout
+            lg={[{ span: 9 }, { span: 3 }]}
+            md={[{ span: 9 }, { span: 3 }]}
+            sm={[{ span: 9 }, { span: 3 }]}
+            xs={[{ span: 9 }, { span: 3 }]}
+            xl={[{ span: 9 }, { span: 3 }]}
+          >
+            <Layout.Element>
+              <article role="main">
+                {children}
+              </article>
+            </Layout.Element>
+            <Layout.Element>
+              <CertificatesSidebar courseId={courseId} />
+            </Layout.Element>
+          </Layout>
+        </section>
+      </Container>
+      <div className="certificates alert-toast">
+        <ProcessingNotification
+          isShow={isShowProcessingNotification}
+          title={processingNotificationTitle}
+        />
+        <SavingErrorAlert
+          savingStatus={savingStatus}
+          errorMessage={errorMessage}
+        />
+      </div>
+    </>
+  );
+};
+
+MainLayout.defaultProps = {
+  showHeaderButtons: false,
+  children: null,
+};
+
+MainLayout.propTypes = {
+  courseId: PropTypes.string.isRequired,
+  showHeaderButtons: PropTypes.bool,
+  children: PropTypes.node,
+};
+
+export default MainLayout;
diff --git a/src/certificates/layout/certificates-sidebar/CertificatesSidebar.jsx b/src/certificates/layout/certificates-sidebar/CertificatesSidebar.jsx
new file mode 100644
index 0000000000..09944102f7
--- /dev/null
+++ b/src/certificates/layout/certificates-sidebar/CertificatesSidebar.jsx
@@ -0,0 +1,45 @@
+import PropTypes from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Button, Hyperlink } from '@openedx/paragon';
+
+import { HelpSidebar } from '../../../generic/help-sidebar';
+import { useHelpUrls } from '../../../help-urls/hooks';
+import { getSidebarData } from './utils';
+import SidebarBlock from './sidebar-block/SidebarBlock';
+import messages from './messages';
+
+const CertificatesSidebar = ({ courseId }) => {
+  const intl = useIntl();
+  const { certificates: learnMoreCertificates } = useHelpUrls(['certificates']);
+  return (
+    <HelpSidebar
+      courseId={courseId}
+      showOtherSettings
+    >
+      {getSidebarData({ messages, intl }).map(({ title, paragraphs }, id) => (
+        <SidebarBlock
+          key={title}
+          title={title}
+          paragraphs={paragraphs}
+          isLast={id === getSidebarData({ messages, intl }).length - 1}
+        />
+      ))}
+      <Button
+        as={Hyperlink}
+        target="_blank"
+        showLaunchIcon={false}
+        size="sm"
+        href={learnMoreCertificates}
+        variant="outline-primary"
+      >
+        {intl.formatMessage(messages.learnMoreBtn)}
+      </Button>
+    </HelpSidebar>
+  );
+};
+
+CertificatesSidebar.propTypes = {
+  courseId: PropTypes.string.isRequired,
+};
+
+export default CertificatesSidebar;
diff --git a/src/certificates/layout/certificates-sidebar/CertificatesSidebar.test.jsx b/src/certificates/layout/certificates-sidebar/CertificatesSidebar.test.jsx
new file mode 100644
index 0000000000..eb00e888de
--- /dev/null
+++ b/src/certificates/layout/certificates-sidebar/CertificatesSidebar.test.jsx
@@ -0,0 +1,56 @@
+import { render, waitFor } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { initializeMockApp } from '@edx/frontend-platform';
+import { AppProvider } from '@edx/frontend-platform/react';
+
+import initializeStore from '../../../store';
+import CertificatesSidebar from './CertificatesSidebar';
+import messages from './messages';
+
+const courseId = 'course-123';
+let store;
+
+jest.mock('@edx/frontend-platform/i18n', () => ({
+  ...jest.requireActual('@edx/frontend-platform/i18n'),
+  useIntl: () => ({
+    formatMessage: (message) => message.defaultMessage,
+  }),
+}));
+
+const renderComponent = (props) => render(
+  <AppProvider store={store} messages={{}}>
+    <IntlProvider locale="en">
+      <CertificatesSidebar courseId={courseId} {...props} />
+    </IntlProvider>
+  </AppProvider>,
+);
+
+describe('CertificatesSidebar', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+    store = initializeStore();
+  });
+
+  it('renders correctly', async () => {
+    const { getByText } = renderComponent();
+    await waitFor(() => {
+      expect(getByText(messages.workingWithCertificatesTitle.defaultMessage)).toBeInTheDocument();
+      expect(getByText(messages.workingWithCertificatesFirstParagraph.defaultMessage)).toBeInTheDocument();
+      expect(getByText(messages.workingWithCertificatesSecondParagraph.defaultMessage)).toBeInTheDocument();
+      expect(getByText(messages.workingWithCertificatesThirdParagraph.defaultMessage)).toBeInTheDocument();
+
+      expect(getByText(messages.issuingCertificatesTitle.defaultMessage)).toBeInTheDocument();
+      expect(getByText(messages.issuingCertificatesFirstParagraph.defaultMessage)).toBeInTheDocument();
+      expect(getByText(messages.issuingCertificatesSecondParagraph.defaultMessage)).toBeInTheDocument();
+
+      expect(getByText(messages.learnMoreBtn.defaultMessage)).toBeInTheDocument();
+    });
+  });
+});
diff --git a/src/certificates/layout/certificates-sidebar/messages.js b/src/certificates/layout/certificates-sidebar/messages.js
new file mode 100644
index 0000000000..3565d00d5f
--- /dev/null
+++ b/src/certificates/layout/certificates-sidebar/messages.js
@@ -0,0 +1,66 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  workingWithCertificatesTitle: {
+    id: 'course-authoring.certificates.sidebar.working-with-certificates.title',
+    defaultMessage: 'Working with certificates',
+    description: 'Title for the section on how to work with certificates',
+  },
+  workingWithCertificatesFirstParagraph: {
+    id: 'course-authoring.certificates.sidebar.working-with-certificates.first-paragraph',
+    defaultMessage: 'Specify a course title to use on the certificate if the course\'s official title is too long to be displayed well.',
+    description: 'Instructions for specifying a course title for the certificate',
+  },
+  workingWithCertificatesSecondParagraph: {
+    id: 'course-authoring.certificates.sidebar.working-with-certificates.second-paragraph',
+    defaultMessage: 'For verified certificates, specify between one and four signatories and upload the associated images. To edit or delete a certificate before it is activated, hover over the top right corner of the form and select {strongText} or the delete icon.',
+    description: 'Details on how to specify signatories for verified certificates and edit or delete certificates',
+  },
+  workingWithCertificatesSecondParagraph_strong: {
+    id: 'course-authoring.certificates.sidebar.working-with-certificates.second-paragraph.strong',
+    defaultMessage: 'Edit',
+    description: 'The strong emphasis text for the edit option',
+  },
+  workingWithCertificatesThirdParagraph: {
+    id: 'course-authoring.certificates.sidebar.working-with-certificates.third-paragraph',
+    defaultMessage: 'To view a sample certificate, choose a course mode and select {strongText}.',
+    description: 'Instructions on how to view a sample certificate',
+  },
+  workingWithCertificatesThirdParagraph_strong: {
+    id: 'course-authoring.certificates.sidebar.working-with-certificates.third-paragraph.strong',
+    defaultMessage: 'Preview certificate',
+    description: 'The strong emphasis text for the button to preview a sample certificate',
+  },
+  issuingCertificatesTitle: {
+    id: 'course-authoring.certificates.sidebar.issuing-certificates.title',
+    defaultMessage: 'Issuing certificates to learners',
+    description: 'Title for the section on issuing certificates to learners',
+  },
+  issuingCertificatesFirstParagraph: {
+    id: 'course-authoring.certificates.sidebar.issuing-certificates.first-paragraph',
+    defaultMessage: 'To begin issuing course certificates, a course team member with either the Staff or Admin role selects {strongText}. Only course team members with these roles can edit or delete an activated certificate.',
+    description: 'Instructions for issuing course certificates and the roles required to edit or delete certificates',
+  },
+  issuingCertificatesFirstParagraph_strong: {
+    id: 'course-authoring.certificates.sidebar.issuing-certificates.first-paragraph.strong',
+    defaultMessage: 'Activate',
+    description: 'The strong emphasis text for the activation option',
+  },
+  issuingCertificatesSecondParagraph: {
+    id: 'course-authoring.certificates.sidebar.issuing-certificates.second-paragraph',
+    defaultMessage: '{strongText} delete certificates after a course has started; learners who have already earned certificates will no longer be able to access them.',
+    description: 'A warning against deleting certificates once a course has started, noting the impact on learners',
+  },
+  issuingCertificatesSecondParagraph_strong: {
+    id: 'course-authoring.certificates.sidebar.issuing-certificates.second-paragraph.strong',
+    defaultMessage: 'Do not',
+    description: 'The strong emphasis text part of the warning against deleting certificates',
+  },
+  learnMoreBtn: {
+    id: 'course-authoring.certificates.sidebar.learnmore.button',
+    defaultMessage: 'Learn more about certificates',
+    description: 'Text for a button that links to additional information about setting up certificates in studio',
+  },
+});
+
+export default messages;
diff --git a/src/certificates/layout/certificates-sidebar/sidebar-block/SidebarBlock.jsx b/src/certificates/layout/certificates-sidebar/sidebar-block/SidebarBlock.jsx
new file mode 100644
index 0000000000..92b1f1a9d7
--- /dev/null
+++ b/src/certificates/layout/certificates-sidebar/sidebar-block/SidebarBlock.jsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const SidebarBlock = ({ title, paragraphs, isLast }) => (
+  <React.Fragment key={title}>
+    <h4 className="help-sidebar-about-title">
+      {title}
+    </h4>
+    {paragraphs.map((text) => (
+      <p key={text} className="help-sidebar-about-descriptions">
+        {text}
+      </p>
+    ))}
+    {!isLast && <hr />}
+  </React.Fragment>
+);
+
+SidebarBlock.defaultProps = {
+  isLast: false,
+};
+
+SidebarBlock.propTypes = {
+  title: PropTypes.string.isRequired,
+  paragraphs: PropTypes.arrayOf(PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.node,
+  ])).isRequired,
+  isLast: PropTypes.bool,
+};
+
+export default SidebarBlock;
diff --git a/src/certificates/layout/certificates-sidebar/sidebar-block/SidebarBlock.test.jsx b/src/certificates/layout/certificates-sidebar/sidebar-block/SidebarBlock.test.jsx
new file mode 100644
index 0000000000..f2a5a553bd
--- /dev/null
+++ b/src/certificates/layout/certificates-sidebar/sidebar-block/SidebarBlock.test.jsx
@@ -0,0 +1,33 @@
+import { render } from '@testing-library/react';
+
+import SidebarBlock from './SidebarBlock';
+
+const testProps = {
+  title: 'Test Title',
+  paragraphs: ['Test Paragraph'],
+};
+
+const renderComponent = (props) => render(
+  <SidebarBlock {...props} />,
+);
+
+describe('SidebarBlock', () => {
+  it('renders without crashing', () => {
+    const { getByText } = renderComponent(testProps);
+
+    expect(getByText(testProps.title)).toBeInTheDocument();
+    expect(getByText(testProps.paragraphs[0])).toBeInTheDocument();
+  });
+
+  it('renders <hr> if isLast is false', () => {
+    const { getByRole } = renderComponent(testProps);
+
+    expect(getByRole('separator')).toBeInTheDocument();
+  });
+
+  it('does not render <hr> if isLast is true', () => {
+    const { queryByRole } = renderComponent({ ...testProps, isLast: true });
+
+    expect(queryByRole('separator')).not.toBeInTheDocument();
+  });
+});
diff --git a/src/certificates/layout/certificates-sidebar/utils.jsx b/src/certificates/layout/certificates-sidebar/utils.jsx
new file mode 100644
index 0000000000..fee986f141
--- /dev/null
+++ b/src/certificates/layout/certificates-sidebar/utils.jsx
@@ -0,0 +1,29 @@
+export const getSidebarData = ({ messages, intl }) => [
+  {
+    title: intl.formatMessage(messages.workingWithCertificatesTitle),
+    paragraphs: [
+      intl.formatMessage(messages.workingWithCertificatesFirstParagraph),
+      intl.formatMessage(
+        messages.workingWithCertificatesSecondParagraph,
+        { strongText: <strong>{intl.formatMessage(messages.workingWithCertificatesSecondParagraph_strong)}</strong> },
+      ),
+      intl.formatMessage(
+        messages.workingWithCertificatesThirdParagraph,
+        { strongText: <strong>{intl.formatMessage(messages.workingWithCertificatesThirdParagraph_strong)}</strong> },
+      ),
+    ],
+  },
+  {
+    title: intl.formatMessage(messages.issuingCertificatesTitle),
+    paragraphs: [
+      intl.formatMessage(
+        messages.issuingCertificatesFirstParagraph,
+        { strongText: <strong>{intl.formatMessage(messages.issuingCertificatesFirstParagraph_strong)}</strong> },
+      ),
+      intl.formatMessage(
+        messages.issuingCertificatesSecondParagraph,
+        { strongText: <strong>{intl.formatMessage(messages.issuingCertificatesSecondParagraph_strong)}</strong> },
+      ),
+    ],
+  },
+];
diff --git a/src/certificates/layout/header-buttons/HeaderButtons.jsx b/src/certificates/layout/header-buttons/HeaderButtons.jsx
new file mode 100644
index 0000000000..fb6eadae14
--- /dev/null
+++ b/src/certificates/layout/header-buttons/HeaderButtons.jsx
@@ -0,0 +1,46 @@
+import { useIntl } from '@edx/frontend-platform/i18n';
+import {
+  Button, Dropdown, DropdownButton, Hyperlink,
+} from '@openedx/paragon';
+
+import messages from '../../messages';
+import useHeaderButtons from './hooks/useHeaderButtons';
+
+const HeaderButtons = () => {
+  const intl = useIntl();
+  const {
+    previewUrl,
+    courseModes,
+    dropdowmItem,
+    isCertificateActive,
+    setDropdowmItem,
+    handleActivationStatus,
+  } = useHeaderButtons();
+
+  return (
+    <>
+      <DropdownButton id="dropdown-basic-button" title={dropdowmItem} onSelect={(item) => setDropdowmItem(item)}>
+        {courseModes.map((mode) => <Dropdown.Item key={mode} eventKey={mode}>{mode}</Dropdown.Item>)}
+      </DropdownButton>
+      <Button
+        variant="outline-primary"
+        as={Hyperlink}
+        destination={previewUrl}
+        target="_blank"
+        showLaunchIcon={false}
+      >
+        {intl.formatMessage(messages.headingActionsPreview)}
+      </Button>
+      <Button
+        variant="outline-primary"
+        onClick={handleActivationStatus}
+      >
+        {isCertificateActive
+          ? intl.formatMessage(messages.headingActionsDeactivate)
+          : intl.formatMessage(messages.headingActionsActivate)}
+      </Button>
+    </>
+  );
+};
+
+export default HeaderButtons;
diff --git a/src/certificates/layout/header-buttons/HeaderButtons.test.jsx b/src/certificates/layout/header-buttons/HeaderButtons.test.jsx
new file mode 100644
index 0000000000..7adf1072d1
--- /dev/null
+++ b/src/certificates/layout/header-buttons/HeaderButtons.test.jsx
@@ -0,0 +1,130 @@
+import { Provider } from 'react-redux';
+import { render, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { initializeMockApp } from '@edx/frontend-platform';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import MockAdapter from 'axios-mock-adapter';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+
+import { executeThunk } from '../../../utils';
+import initializeStore from '../../../store';
+import { MODE_STATES } from '../../data/constants';
+import { getCertificatesApiUrl, getUpdateCertificateApiUrl } from '../../data/api';
+import { fetchCertificates, updateCertificateActiveStatus } from '../../data/thunks';
+import { certificatesDataMock } from '../../__mocks__';
+import messages from '../../messages';
+import HeaderButtons from './HeaderButtons';
+
+let axiosMock;
+let store;
+const courseId = 'course-123';
+
+const renderComponent = (props) => render(
+  <Provider store={store} messages={{}}>
+    <IntlProvider locale="en">
+      <HeaderButtons {...props} />
+    </IntlProvider>
+  </Provider>,
+);
+
+const initialState = {
+  certificates: {
+    certificatesData: {},
+    componentMode: MODE_STATES.editAll,
+  },
+};
+
+describe('HeaderButtons Component', () => {
+  beforeEach(async () => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+    store = initializeStore(initialState);
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+    axiosMock
+      .onGet(getCertificatesApiUrl(courseId))
+      .reply(200, certificatesDataMock);
+    await executeThunk(fetchCertificates(courseId), store.dispatch);
+  });
+
+  it('updates preview URL param based on selected dropdown item', async () => {
+    const { getByRole } = renderComponent();
+    const previewLink = getByRole('link', { name: messages.headingActionsPreview.defaultMessage });
+
+    expect(previewLink).toHaveAttribute('href', expect.stringContaining(certificatesDataMock.courseModes[0]));
+
+    const dropdownButton = getByRole('button', { name: certificatesDataMock.courseModes[0] });
+    userEvent.click(dropdownButton);
+
+    const verifiedMode = await getByRole('button', { name: certificatesDataMock.courseModes[1] });
+    userEvent.click(verifiedMode);
+
+    await waitFor(() => {
+      expect(previewLink).toHaveAttribute('href', expect.stringContaining(certificatesDataMock.courseModes[1]));
+    });
+  });
+
+  it('activates certificate when button is clicked', async () => {
+    const newCertificateData = {
+      ...certificatesDataMock,
+      isActive: true,
+    };
+
+    const { getByRole, queryByRole } = renderComponent();
+
+    const activationButton = getByRole('button', { name: messages.headingActionsActivate.defaultMessage });
+    userEvent.click(activationButton);
+
+    axiosMock.onPost(
+      getUpdateCertificateApiUrl(courseId, certificatesDataMock.certificates[0].id),
+    ).reply(200);
+    await executeThunk(updateCertificateActiveStatus(courseId), store.dispatch);
+    axiosMock
+      .onGet(getCertificatesApiUrl(courseId))
+      .reply(200, newCertificateData);
+    await executeThunk(fetchCertificates(courseId), store.dispatch);
+
+    await waitFor(() => {
+      expect(store.getState().certificates.certificatesData.isActive).toBe(true);
+      expect(getByRole('button', { name: messages.headingActionsDeactivate.defaultMessage })).toBeInTheDocument();
+      expect(queryByRole('button', { name: messages.headingActionsActivate.defaultMessage })).not.toBeInTheDocument();
+    });
+  });
+
+  it('deactivates certificate when button is clicked', async () => {
+    axiosMock
+      .onGet(getCertificatesApiUrl(courseId))
+      .reply(200, { ...certificatesDataMock, isActive: true });
+    await executeThunk(fetchCertificates(courseId), store.dispatch);
+
+    const newCertificateData = {
+      ...certificatesDataMock,
+      isActive: false,
+    };
+
+    const { getByRole, queryByRole } = renderComponent();
+
+    const deactivateButton = getByRole('button', { name: messages.headingActionsDeactivate.defaultMessage });
+    userEvent.click(deactivateButton);
+
+    axiosMock.onPost(
+      getUpdateCertificateApiUrl(courseId, certificatesDataMock.certificates[0].id),
+    ).reply(200);
+    await executeThunk(updateCertificateActiveStatus(courseId), store.dispatch);
+    axiosMock
+      .onGet(getCertificatesApiUrl(courseId))
+      .reply(200, newCertificateData);
+    await executeThunk(fetchCertificates(courseId), store.dispatch);
+
+    await waitFor(() => {
+      expect(store.getState().certificates.certificatesData.isActive).toBe(false);
+      expect(getByRole('button', { name: messages.headingActionsActivate.defaultMessage })).toBeInTheDocument();
+      expect(queryByRole('button', { name: messages.headingActionsDeactivate.defaultMessage })).not.toBeInTheDocument();
+    });
+  });
+});
diff --git a/src/certificates/layout/header-buttons/hooks/useHeaderButtons.jsx b/src/certificates/layout/header-buttons/hooks/useHeaderButtons.jsx
new file mode 100644
index 0000000000..b7eb623990
--- /dev/null
+++ b/src/certificates/layout/header-buttons/hooks/useHeaderButtons.jsx
@@ -0,0 +1,49 @@
+import { useState, useMemo } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { useParams } from 'react-router-dom';
+
+import {
+  getCourseModes, getCertificateActivationUrl, getCertificateWebViewUrl, getIsCertificateActive,
+} from '../../../data/selectors';
+import { updateCertificateActiveStatus } from '../../../data/thunks';
+
+const useHeaderButtons = () => {
+  const { courseId } = useParams();
+  const dispatch = useDispatch();
+  const courseModes = useSelector(getCourseModes);
+  const certificateWebViewUrl = useSelector(getCertificateWebViewUrl);
+  const certificateActivationHandlerUrl = useSelector(getCertificateActivationUrl);
+  const isCertificateActive = useSelector(getIsCertificateActive);
+
+  const [dropdowmItem, setDropdowmItem] = useState(courseModes[0]);
+
+  const handleActivationStatus = () => {
+    const status = !isCertificateActive;
+
+    dispatch(updateCertificateActiveStatus(courseId, certificateActivationHandlerUrl, status));
+  };
+
+  const previewUrl = useMemo(() => {
+    if (!certificateWebViewUrl) { return ''; }
+
+    const getUrl = () => new URL(certificateWebViewUrl, window.location.origin);
+    const url = getUrl();
+
+    const searchParams = new URLSearchParams(url.search);
+    searchParams.set('preview', dropdowmItem);
+    url.search = searchParams.toString();
+
+    return url.toString();
+  }, [certificateWebViewUrl, dropdowmItem]);
+
+  return {
+    previewUrl,
+    courseModes,
+    dropdowmItem,
+    isCertificateActive,
+    setDropdowmItem,
+    handleActivationStatus,
+  };
+};
+
+export default useHeaderButtons;
diff --git a/src/certificates/layout/hooks/useLayout.jsx b/src/certificates/layout/hooks/useLayout.jsx
new file mode 100644
index 0000000000..68c5f7f968
--- /dev/null
+++ b/src/certificates/layout/hooks/useLayout.jsx
@@ -0,0 +1,31 @@
+import { useEffect } from 'react';
+import { useSelector } from 'react-redux';
+
+import { RequestStatus } from '../../../data/constants';
+import { getProcessingNotification } from '../../../generic/processing-notification/data/selectors';
+import { getSavingStatus, getErrorMessage } from '../../data/selectors';
+
+const useLayout = () => {
+  const savingStatus = useSelector(getSavingStatus);
+  const errorMessage = useSelector(getErrorMessage);
+
+  const {
+    isShow: isShowProcessingNotification,
+    title: processingNotificationTitle,
+  } = useSelector(getProcessingNotification);
+
+  useEffect(() => {
+    if (savingStatus === RequestStatus.SUCCESSFUL) {
+      window.scrollTo({ top: 0, behavior: 'smooth' });
+    }
+  }, [savingStatus]);
+
+  return {
+    errorMessage,
+    savingStatus,
+    isShowProcessingNotification,
+    processingNotificationTitle,
+  };
+};
+
+export default useLayout;
diff --git a/src/certificates/messages.js b/src/certificates/messages.js
new file mode 100644
index 0000000000..87590860a2
--- /dev/null
+++ b/src/certificates/messages.js
@@ -0,0 +1,62 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  headingTitle: {
+    id: 'course-authoring.certificates.heading.title',
+    defaultMessage: 'Certificates',
+  },
+  headingTitleTabText: {
+    id: 'course-authoring.certificates.heading.title.tab.text',
+    defaultMessage: 'Course certificates',
+  },
+  headingSubtitle: {
+    id: 'course-authoring.certificates.heading.subtitle',
+    defaultMessage: 'Settings',
+  },
+  headingActionsPreview: {
+    id: 'course-authoring.certificates.heading.action.button.preview',
+    defaultMessage: 'Preview certificate',
+  },
+  headingActionsDeactivate: {
+    id: 'course-authoring.certificates.heading.action.button.deactivate',
+    defaultMessage: 'Deactivate',
+  },
+  headingActionsActivate: {
+    id: 'course-authoring.certificates.heading.action.button.activate',
+    defaultMessage: 'Activate',
+  },
+  noCertificatesText: {
+    id: 'course-authoring.certificates.nocertificate.text',
+    defaultMessage: 'You haven\'t added any certificates to this course yet.',
+  },
+  setupCertificateBtn: {
+    id: 'course-authoring.certificates.setup.certificate.button',
+    defaultMessage: 'Add your first certificate',
+  },
+  withoutModesText: {
+    id: 'course-authoring.certificates.without.modes.text',
+    defaultMessage: 'This course does not use a mode that offers certificates.',
+  },
+  cardCreate: {
+    id: 'course-authoring.certificates.create',
+    defaultMessage: 'Create',
+  },
+  cardCancel: {
+    id: 'course-authoring.certificates.cancel',
+    defaultMessage: 'Cancel',
+  },
+  deleteTooltip: {
+    id: 'course-authoring.certificates.signatories.delete.tooltip',
+    defaultMessage: 'Delete',
+  },
+  editTooltip: {
+    id: 'course-authoring.certificates.signatories.edit.tooltip',
+    defaultMessage: 'Edit',
+  },
+  saveTooltip: {
+    id: 'course-authoring.certificates.signatories.save.tooltip',
+    defaultMessage: 'Save',
+  },
+});
+
+export default messages;
diff --git a/src/certificates/scss/Certificates.scss b/src/certificates/scss/Certificates.scss
new file mode 100644
index 0000000000..8ec8d23bda
--- /dev/null
+++ b/src/certificates/scss/Certificates.scss
@@ -0,0 +1,115 @@
+@import "variables";
+
+.certificates {
+  .section-title {
+    color: $black;
+  }
+
+  .sub-header-actions {
+    margin-bottom: .5rem;
+  }
+
+  .certificate-details {
+    .certificate-details__info {
+      color: $black;
+      justify-content: space-between;
+      align-items: baseline;
+    }
+
+    .certificate-details__info-paragraph {
+      flex: 1;
+    }
+
+    .certificate-details__info-paragraph-course-number {
+      flex: 1;
+      color: $gray-700;
+      text-align: right;
+    }
+  }
+
+  .signatory {
+    position: relative;
+    display: flex;
+
+    .section-title {
+      display: flex;
+      align-items: center;
+      height: 2.75rem;
+    }
+
+    .signatory__header {
+      justify-content: space-between;
+      flex: 1;
+      max-width: 18.75rem;
+    }
+
+    .signatory__action-button {
+      position: absolute;
+      top: 0;
+      right: 0;
+      margin: .75rem;
+    }
+
+    .signatory__fields-container {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      flex-wrap: wrap;
+    }
+
+    .signatory__text {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .signatory__image-container {
+      flex: 2;
+      max-width: 18.75rem;
+      margin: auto;
+    }
+
+    .signatory__image {
+      margin: 0;
+    }
+  }
+
+  @media (max-width: map-get($grid-breakpoints, "xl")) {
+    .signatory {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      .signatory__header {
+        max-width: none;
+      }
+
+      .signatory__text {
+        white-space: normal;
+      }
+
+      .signatory__image-container {
+        max-width: none;
+        margin-top: 1.25rem;
+      }
+    }
+  }
+
+  .signatory__image {
+    display: flex;
+    margin: .625rem auto;
+    max-width: 23.5rem;
+    width: 100%;
+  }
+
+  .certificates-card-form {
+    .pgn__form-control-description,
+    .pgn__form-text {
+      margin-top: .62rem;
+    }
+  }
+}
+
+.certificates.alert-toast {
+  z-index: $popover;
+}
diff --git a/src/certificates/scss/_variables.scss b/src/certificates/scss/_variables.scss
new file mode 100644
index 0000000000..5bb7346f6d
--- /dev/null
+++ b/src/certificates/scss/_variables.scss
@@ -0,0 +1 @@
+$popover: 9999;
diff --git a/src/certificates/utils.js b/src/certificates/utils.js
new file mode 100644
index 0000000000..9d3ecbd63f
--- /dev/null
+++ b/src/certificates/utils.js
@@ -0,0 +1,14 @@
+import { convertObjectToSnakeCase } from '../utils';
+
+export const prepareCertificatePayload = (data) => convertObjectToSnakeCase(({
+  ...data,
+  courseTitle: data.courseTitle,
+  description: 'Description of the certificate',
+  editing: data.editing || true,
+  isActive: data.isActive || false,
+  name: 'Name of the certificate',
+  version: data.version || 1,
+  signatories: data.signatories
+    .map(signatory => convertObjectToSnakeCase(signatory, true))
+    .map(signatorySnakeCase => ({ ...signatorySnakeCase, certificate: signatorySnakeCase.certificate || null })),
+}), true);
diff --git a/src/constants.js b/src/constants.js
new file mode 100644
index 0000000000..163a16ef84
--- /dev/null
+++ b/src/constants.js
@@ -0,0 +1,78 @@
+export const DATE_FORMAT = 'MM/dd/yyyy';
+export const TIME_FORMAT = 'HH:mm';
+export const DATE_TIME_FORMAT = 'YYYY-MM-DDTHH:mm:ss\\Z';
+export const COMMA_SEPARATED_DATE_FORMAT = 'MMMM D, YYYY';
+export const DEFAULT_EMPTY_WYSIWYG_VALUE = '<p>&nbsp;</p>';
+export const STATEFUL_BUTTON_STATES = {
+  default: 'default',
+  pending: 'pending',
+  error: 'error',
+};
+
+export const USER_ROLES = {
+  admin: 'instructor',
+  staff: 'staff',
+};
+
+export const BADGE_STATES = {
+  danger: 'danger',
+  secondary: 'secondary',
+};
+
+export const NOTIFICATION_MESSAGES = {
+  adding: 'Adding',
+  saving: 'Saving',
+  duplicating: 'Duplicating',
+  deleting: 'Deleting',
+  copying: 'Copying',
+  pasting: 'Pasting',
+  discardChanges: 'Discarding changes',
+  moving: 'Moving',
+  undoMoving: 'Undo moving',
+  publishing: 'Publishing',
+  hidingFromStudents: 'Hiding from students',
+  makingVisibleToStudents: 'Making visible to students',
+  empty: '',
+};
+
+export const DEFAULT_TIME_STAMP = '00:00';
+
+export const COURSE_CREATOR_STATES = {
+  unrequested: 'unrequested',
+  pending: 'pending',
+  granted: 'granted',
+  denied: 'denied',
+  disallowedForThisSite: 'disallowed_for_this_site',
+};
+
+export const DECODED_ROUTES = {
+  COURSE_UNIT: [
+    '/container/:blockId/:sequenceId',
+    '/container/:blockId',
+  ],
+};
+
+export const UPLOAD_FILE_MAX_SIZE = 20 * 1024 * 1024; // 100mb
+
+export const COURSE_BLOCK_NAMES = ({
+  chapter: { id: 'chapter', name: 'Section' },
+  sequential: { id: 'sequential', name: 'Subsection' },
+  vertical: { id: 'vertical', name: 'Unit' },
+  component: { id: 'component', name: 'Component' },
+});
+
+export const STUDIO_CLIPBOARD_CHANNEL = 'studio_clipboard_channel';
+
+export const CLIPBOARD_STATUS = {
+  loading: 'loading',
+  ready: 'ready',
+  expired: 'expired',
+  error: 'error',
+};
+
+export const STRUCTURAL_XBLOCK_TYPES = ['vertical', 'sequential', 'chapter', 'course'];
+
+export const REGEX_RULES = {
+  specialCharsRule: /^[a-zA-Z0-9_\-.'*~\s]+$/,
+  noSpaceRule: /^\S*$/,
+};
diff --git a/src/content-tags-drawer/ContentTagsCollapsible.d.ts b/src/content-tags-drawer/ContentTagsCollapsible.d.ts
new file mode 100644
index 0000000000..32a1ff41f9
--- /dev/null
+++ b/src/content-tags-drawer/ContentTagsCollapsible.d.ts
@@ -0,0 +1,40 @@
+import { Ref } from 'react';
+import type {} from 'react-select/base';
+// This import is necessary for module augmentation.
+// It allows us to extend the 'Props' interface in the 'react-select/base' module
+// and add our custom property 'myCustomProp' to it.
+
+export interface TagTreeEntry {
+  explicit: boolean;
+  children: Record<string, TagTreeEntry>;
+  canChangeObjecttag: boolean;
+  canDeleteObjecttag: boolean;
+}
+
+export interface TaxonomySelectProps {
+  taxonomyId: number;
+  searchTerm: string;
+  appliedContentTagsTree: Record<string, TagTreeEntry>;
+  stagedContentTagsTree: Record<string, TagTreeEntry>;
+  checkedTags: string[];
+  selectCancelRef: Ref,
+  selectAddRef: Ref,
+  selectInlineAddRef: Ref,
+  handleCommitStagedTags: () => void;
+  handleCancelStagedTags: () => void;
+  handleSelectableBoxChange: React.ChangeEventHandler;
+}
+
+// Unfortunately the only way to specify the custom props we pass into React Select
+// is with this global type augmentation.
+// https://react-select.com/typescript#custom-select-props
+// If in the future other parts of this MFE need to use React Select for different things,
+// we should change to using a 'react context' to share this data within <ContentTagsCollapsible>,
+// rather than using the custom <Select> Props (selectProps).
+declare module 'react-select/base' {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  export interface Props<Option, IsMulti extends boolean, Group extends GroupBase<Option>> extends TaxonomySelectProps {
+  }
+}
+
+export default ContentTagsCollapsible;
diff --git a/src/content-tags-drawer/ContentTagsCollapsible.jsx b/src/content-tags-drawer/ContentTagsCollapsible.jsx
new file mode 100644
index 0000000000..bbc9879c67
--- /dev/null
+++ b/src/content-tags-drawer/ContentTagsCollapsible.jsx
@@ -0,0 +1,486 @@
+// @ts-check
+// disable prop-types since we're using TypeScript to define the prop types,
+// but the linter can't detect that in a .jsx file.
+/* eslint-disable react/prop-types */
+import React, { useContext } from 'react';
+import Select, { components } from 'react-select';
+import {
+  Collapsible,
+  Button,
+  Spinner,
+  Chip,
+  Icon,
+} from '@openedx/paragon';
+import { Tag, KeyboardArrowDown, KeyboardArrowUp } from '@openedx/paragon/icons';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { debounce } from 'lodash';
+
+import SelectableBox from '../editors/sharedComponents/SelectableBox';
+import messages from './messages';
+
+import ContentTagsDropDownSelector from './ContentTagsDropDownSelector';
+
+import useContentTagsCollapsibleHelper from './ContentTagsCollapsibleHelper';
+import TagsTree from './TagsTree';
+import { ContentTagsDrawerContext } from './common/context';
+
+/** @typedef {import("./ContentTagsCollapsible").TaxonomySelectProps} TaxonomySelectProps */
+/** @typedef {import("../taxonomy/data/types.js").TaxonomyData} TaxonomyData */
+/** @typedef {import("./data/types.js").Tag} ContentTagData */
+/** @typedef {import("./data/types.js").StagedTagData} StagedTagData */
+
+/**
+ * Custom Menu component for our Select box
+ * @param {import("react-select").MenuProps&{selectProps: TaxonomySelectProps}} props
+ */
+const CustomMenu = (props) => {
+  const {
+    handleSelectableBoxChange,
+    checkedTags,
+    taxonomyId,
+    appliedContentTagsTree,
+    stagedContentTagsTree,
+    handleCommitStagedTags,
+    handleCancelStagedTags,
+    searchTerm,
+    selectCancelRef,
+    selectAddRef,
+    value,
+  } = props.selectProps;
+  const intl = useIntl();
+  return (
+    <components.Menu {...props}>
+      <div className="bg-white p-3 shadow">
+
+        <SelectableBox.Set
+          type="checkbox"
+          name="tags"
+          columns={1}
+          ariaLabel={intl.formatMessage(messages.taxonomyTagsAriaLabel)}
+          className="taxonomy-tags-selectable-box-set"
+          onChange={handleSelectableBoxChange}
+          value={checkedTags}
+          tabIndex="-1"
+        >
+          <ContentTagsDropDownSelector
+            key={`selector-${taxonomyId}`}
+            taxonomyId={taxonomyId}
+            level={0}
+            appliedContentTagsTree={appliedContentTagsTree}
+            stagedContentTagsTree={stagedContentTagsTree}
+            searchTerm={searchTerm}
+          />
+        </SelectableBox.Set>
+        <hr className="mt-0 mb-0" />
+        <div className="d-flex flex-row justify-content-end">
+          <div className="d-inline">
+            <Button
+              tabIndex={0}
+              ref={selectCancelRef}
+              variant="tertiary"
+              className="tags-drawer-cancel-button"
+              onClick={handleCancelStagedTags}
+            >
+              { intl.formatMessage(messages.collapsibleCancelStagedTagsButtonText) }
+            </Button>
+            <Button
+              tabIndex={0}
+              ref={selectAddRef}
+              variant="tertiary"
+              className="text-info-500 add-tags-button"
+              disabled={!(value && value.length)}
+              onClick={handleCommitStagedTags}
+            >
+              { intl.formatMessage(messages.collapsibleAddStagedTagsButtonText) }
+            </Button>
+          </div>
+        </div>
+      </div>
+    </components.Menu>
+  );
+};
+
+const disableActionKeys = (e) => {
+  const arrowKeys = ['ArrowUp', 'ArrowDown', 'ArrowRight', 'ArrowLeft', 'Backspace'];
+  if (arrowKeys.includes(e.code)) {
+    e.preventDefault();
+  }
+};
+
+const CustomLoadingIndicator = () => {
+  const intl = useIntl();
+  return (
+    <Spinner
+      animation="border"
+      size="xl"
+      screenReaderText={intl.formatMessage(messages.loadingMessage)}
+    />
+  );
+};
+
+/**
+ * Custom IndicatorsContainer component for our Select box
+ * @param {import("react-select").IndicatorsContainerProps&{selectProps: TaxonomySelectProps}} props
+ */
+const CustomIndicatorsContainer = (props) => {
+  const {
+    value,
+    handleCommitStagedTags,
+    selectInlineAddRef,
+  } = props.selectProps;
+  const intl = useIntl();
+  return (
+    <components.IndicatorsContainer {...props}>
+      {
+        (value && value.length && (
+          <Button
+            variant="dark"
+            size="sm"
+            className="mt-2 mb-2 rounded-0 inline-add-button"
+            onClick={handleCommitStagedTags}
+            onMouseDown={(e) => { e.stopPropagation(); e.preventDefault(); }}
+            ref={selectInlineAddRef}
+            tabIndex={0}
+            onKeyDown={disableActionKeys} // To prevent navigating staged tags when button focused
+          >
+            { intl.formatMessage(messages.collapsibleInlineAddStagedTagsButtonText) }
+          </Button>
+        )) || null
+      }
+      {props.children}
+    </components.IndicatorsContainer>
+  );
+};
+
+/**
+ * Collapsible component that holds a Taxonomy along with Tags that belong to it.
+ * This includes both applied tags and tags that are available to select
+ * from a dropdown list.
+ *
+ * This component also handles all the logic with selecting/deselecting tags and keeps track of the
+ * tags tree in the state. That is used to render the Tag bubbgles as well as the populating the
+ * state of the tags in the dropdown selectors.
+ *
+ * The `contentTags` that is passed are consolidated and converted to a tree structure. For example:
+ *
+ * FROM:
+ *
+ * [
+ *   {
+ *     "value": "DNA Sequencing",
+ *     "lineage": [
+ *       "Science and Research",
+ *       "Genetics Subcategory",
+ *       "DNA Sequencing"
+ *     ]
+ *   },
+ *   {
+ *     "value": "Virology",
+ *     "lineage": [
+ *       "Science and Research",
+ *       "Molecular, Cellular, and Microbiology",
+ *       "Virology"
+ *     ]
+ *   }
+ * ]
+ *
+ * TO:
+ *
+ * {
+ *   "Science and Research": {
+ *     explicit: false,
+ *     children: {
+ *       "Genetics Subcategory": {
+ *         explicit: false,
+ *         children: {
+ *           "DNA Sequencing": {
+ *             explicit: true,
+ *             children: {}
+ *           }
+ *         }
+ *       },
+ *       "Molecular, Cellular, and Microbiology": {
+ *         explicit: false,
+ *         children: {
+ *           "Virology": {
+ *             explicit: true,
+ *             children: {}
+ *           }
+ *         }
+ *       }
+ *     }
+ *   }
+ * };
+ *
+ *
+ * It also keeps track of newly added tags as they are selected in the dropdown selectors.
+ * They are store in the same format above, and then merged to one tree that is used as the
+ * source of truth for both the tag bubble and the dropdowns. They keys are order alphabetically.
+ *
+ * In the dropdowns, the value of each SelectableBox is stored along with it's lineage and is URI encoded.
+ * Ths is so we are able to traverse and manipulate different parts of the tree leading to it.
+ * Here is an example of what the value of the "Virology" tag would be:
+ *
+ *  "Science%20and%20Research,Molecular%2C%20Cellular%2C%20and%20Microbiology,Virology"
+ *
+ * @param {Object} props - The component props.
+ * @param {string} props.contentId - Id of the content object
+ * @param {StagedTagData[]} props.stagedContentTags
+ *        - Array of staged tags represented as objects with value/label
+ * @param {TaxonomyData & {contentTags: ContentTagData[]}} props.taxonomyAndTagsData - Taxonomy metadata & applied tags
+ * @param {boolean} props.collapsibleState - True if the collapsible is open
+ */
+const ContentTagsCollapsible = ({
+  contentId,
+  taxonomyAndTagsData,
+  stagedContentTags,
+  collapsibleState,
+}) => {
+  const intl = useIntl();
+  const { id: taxonomyId, name, canTagObject } = taxonomyAndTagsData;
+  const selectCancelRef = React.useRef(/** @type {HTMLSelectElement | null} */(null));
+  const selectAddRef = React.useRef(/** @type {HTMLSelectElement | null} */(null));
+  const selectInlineAddRef = React.useRef(/** @type {HTMLSelectElement | null} */(null));
+  const selectInlineEditModeRef = React.useRef(/** @type {HTMLButtonElement | null} */(null));
+  const selectRef = React.useRef(/** @type {HTMLSelectElement | null} */(null));
+
+  const [selectMenuIsOpen, setSelectMenuIsOpen] = React.useState(false);
+
+  const {
+    isEditMode,
+    toEditMode,
+    setStagedTags,
+    openCollapsible,
+    closeCollapsible,
+  } = useContext(ContentTagsDrawerContext);
+
+  const {
+    tagChangeHandler,
+    removeAppliedTagHandler,
+    appliedContentTagsTree,
+    stagedContentTagsTree,
+    contentTagsCount,
+    checkedTags,
+    commitStagedTagsToGlobal,
+    updateTags,
+  } = useContentTagsCollapsibleHelper(
+    contentId,
+    stagedContentTags,
+    taxonomyAndTagsData,
+  );
+
+  const [searchTerm, setSearchTerm] = React.useState('');
+
+  const handleSelectableBoxChange = React.useCallback((e) => {
+    tagChangeHandler(e.target.value, e.target.checked);
+  }, [tagChangeHandler]);
+
+  const handleSearch = debounce((term) => {
+    setSearchTerm(term.trim());
+  }, 500); // Perform search after 500ms
+
+  const handleSearchChange = React.useCallback((value, { action }) => {
+    if (action === 'input-blur') {
+      if (!selectMenuIsOpen) {
+        // Cancel/clear search if focused away from select input and menu closed
+        handleSearch.cancel();
+        setSearchTerm('');
+      }
+    } else if (action === 'input-change') {
+      if (value === '') {
+        // No need to debounce when search term cleared. Clear debounce function
+        handleSearch.cancel();
+        setSearchTerm('');
+      } else {
+        handleSearch(value);
+      }
+    }
+  }, [selectMenuIsOpen, setSearchTerm, handleSearch]);
+
+  // onChange handler for react-select component, currently only called when
+  // staged tags in the react-select input are removed or fully cleared.
+  // The remaining staged tags are passed in as the parameter, so we set the state
+  // to the passed in tags
+  const handleStagedTagsMenuChange = React.useCallback((stagedTags) => {
+    // Get tags that were unstaged to remove them from checkbox selector
+    const unstagedTags = stagedContentTags.filter(
+      t1 => !stagedTags.some(t2 => t1.value === t2.value),
+    );
+
+    // Call the `tagChangeHandler` with the unstaged tags to unselect them from the selectbox
+    // and update the staged content tags tree. Since the `handleStagedTagsMenuChange` function is={}
+    // only called when a change occurs in the react-select menu component we know that tags can only be
+    // removed from there, hence the tagChangeHandler is always called with `checked=false`.
+    unstagedTags.forEach(unstagedTag => tagChangeHandler(unstagedTag.value, false));
+    setStagedTags(taxonomyId, stagedTags);
+  }, [taxonomyId, setStagedTags, stagedContentTags, tagChangeHandler]);
+
+  const handleCommitStagedTags = React.useCallback(() => {
+    commitStagedTagsToGlobal();
+    handleStagedTagsMenuChange([]);
+    selectRef.current?.blur();
+    setSearchTerm('');
+    setSelectMenuIsOpen(false);
+  }, [commitStagedTagsToGlobal, handleStagedTagsMenuChange, selectRef, setSearchTerm]);
+
+  const handleCancelStagedTags = React.useCallback(() => {
+    handleStagedTagsMenuChange([]);
+    selectRef.current?.blur();
+    setSearchTerm('');
+    setSelectMenuIsOpen(false);
+  }, [handleStagedTagsMenuChange, selectRef, setSearchTerm]);
+
+  const handleSelectOnKeyDown = (event) => {
+    const focusedElement = event.target;
+
+    if (event.key === 'Escape') {
+      setSelectMenuIsOpen(false);
+    } else if (event.key === 'Tab') {
+      // Keep the menu open when navigating inside the select menu
+      setSelectMenuIsOpen(true);
+
+      // Determine when to close the menu when navigating with keyboard
+      if (!event.shiftKey) { // Navigating forwards
+        if (focusedElement === selectAddRef.current) {
+          setSelectMenuIsOpen(false);
+        } else if (focusedElement === selectCancelRef.current && selectAddRef.current?.disabled) {
+          setSelectMenuIsOpen(false);
+        }
+      // Navigating backwards
+      // @ts-ignore inputRef actually exists under the current selectRef
+      } else if (event.shiftKey && focusedElement === selectRef.current?.inputRef) {
+        setSelectMenuIsOpen(false);
+      }
+    }
+  };
+
+  // Open the select menu and make sure the search term is cleared when focused
+  const onSelectMenuFocus = React.useCallback(() => {
+    setSelectMenuIsOpen(true);
+    setSearchTerm('');
+  }, [setSelectMenuIsOpen, setSearchTerm]);
+
+  // Handles logic to close the select menu when clicking outside
+  const handleOnBlur = React.useCallback((event) => {
+    // Check if a target we are focusing to is an element in our select menu, if not close it
+    const menuClasses = ['dropdown-selector', 'inline-add-button', 'cancel-add-tags-button'];
+    if (!event.relatedTarget || !menuClasses.some(cls => event.relatedTarget.className?.includes(cls))) {
+      setSelectMenuIsOpen(false);
+    }
+  }, [setSelectMenuIsOpen]);
+
+  return (
+    <div className="d-flex">
+      <Collapsible.Advanced
+        className="collapsible-card-lg taxonomy-tags-collapsible"
+        open={collapsibleState}
+        onClose={() => closeCollapsible(taxonomyId)}
+        onOpen={() => openCollapsible(taxonomyId)}
+      >
+        <Collapsible.Trigger className="collapsible-trigger pl-2.5">
+          <Collapsible.Visible whenClosed>
+            <Icon src={KeyboardArrowDown} />
+          </Collapsible.Visible>
+
+          <Collapsible.Visible whenOpen>
+            <Icon src={KeyboardArrowUp} />
+          </Collapsible.Visible>
+          <h3 className="h5 flex-grow-1 pl-2">{name}</h3>
+        </Collapsible.Trigger>
+
+        <Collapsible.Body className="collapsible-body">
+          { Object.keys(appliedContentTagsTree).length === 0 && !isEditMode
+            && (
+              <div className="mb-3" key={taxonomyId}>
+                <p className="text-gray-500">{intl.formatMessage(messages.collapsibleNoTagsAddedText)}
+                  {canTagObject && (
+                    <Button
+                      tabIndex={0}
+                      size="inline"
+                      ref={selectInlineEditModeRef}
+                      variant="link"
+                      className="text-info-500 add-tags-button"
+                      onClick={toEditMode}
+                    >
+                      { intl.formatMessage(messages.collapsibleAddStagedTagsButtonText) }
+                    </Button>
+                  )}
+                </p>
+              </div>
+            )}
+          { Object.keys(appliedContentTagsTree).length !== 0
+            && (
+              <div className="mb-3" key={taxonomyId}>
+                <TagsTree
+                  tags={appliedContentTagsTree}
+                  parentKey={taxonomyId.toString()}
+                  removeTagHandler={removeAppliedTagHandler}
+                />
+              </div>
+            )}
+
+          <div className="d-flex taxonomy-tags-selector-menu">
+            {isEditMode && (
+              <Select
+                onBlur={handleOnBlur}
+                styles={{
+                  // Overriding 'x' button styles for staged tags when navigating by keyboard
+                  multiValueRemove: (base, state) => ({
+                    ...base,
+                    background: state.isFocused ? 'black' : base.background,
+                    color: state.isFocused ? 'white' : base.color,
+                  }),
+                }}
+                menuIsOpen={selectMenuIsOpen}
+                onFocus={onSelectMenuFocus}
+                onKeyDown={handleSelectOnKeyDown}
+                ref={/** @type {React.RefObject} */(selectRef)}
+                isMulti
+                isLoading={updateTags.isLoading}
+                isDisabled={updateTags.isLoading}
+                name="tags-select"
+                placeholder={intl.formatMessage(messages.collapsibleAddTagsPlaceholderText)}
+                isSearchable
+                className="d-flex flex-column flex-fill"
+                classNamePrefix="react-select-add-tags"
+                onInputChange={handleSearchChange}
+                onChange={handleStagedTagsMenuChange}
+                components={{
+                  Menu: CustomMenu,
+                  LoadingIndicator: CustomLoadingIndicator,
+                  IndicatorsContainer: CustomIndicatorsContainer,
+                }}
+                closeMenuOnSelect={false}
+                blurInputOnSelect={false}
+                handleSelectableBoxChange={handleSelectableBoxChange}
+                checkedTags={checkedTags}
+                taxonomyId={taxonomyId}
+                appliedContentTagsTree={appliedContentTagsTree}
+                stagedContentTagsTree={stagedContentTagsTree}
+                handleCommitStagedTags={handleCommitStagedTags}
+                handleCancelStagedTags={handleCancelStagedTags}
+                searchTerm={searchTerm}
+                selectCancelRef={selectCancelRef}
+                selectAddRef={selectAddRef}
+                selectInlineAddRef={selectInlineAddRef}
+                value={stagedContentTags}
+              />
+            )}
+          </div>
+        </Collapsible.Body>
+      </Collapsible.Advanced>
+      <div className="d-flex align-items-start pt-2.5 taxonomy-tags-count-chip">
+        <Chip
+          className="border-0"
+          iconBefore={Tag}
+          iconBeforeAlt="icon-before"
+          disabled={contentTagsCount === 0}
+        >
+          {contentTagsCount}
+        </Chip>
+      </div>
+    </div>
+  );
+};
+
+export default ContentTagsCollapsible;
diff --git a/src/content-tags-drawer/ContentTagsCollapsible.scss b/src/content-tags-drawer/ContentTagsCollapsible.scss
new file mode 100644
index 0000000000..0da1ea82f1
--- /dev/null
+++ b/src/content-tags-drawer/ContentTagsCollapsible.scss
@@ -0,0 +1,66 @@
+.taxonomy-tags-collapsible {
+  flex: 1;
+  border: none !important;
+
+  .collapsible-trigger {
+    border: none !important;
+
+    .pgn__icon {
+      margin-left: -3px;
+    }
+  }
+
+  .tags-tree {
+    font-size: 1rem;
+  }
+}
+
+.taxonomy-tags-selector-menu {
+  button {
+    flex: 1;
+  }
+}
+
+.taxonomy-tags-selector-menu + div {
+  width: 100%;
+}
+
+.taxonomy-tags-selectable-box-set {
+  grid-auto-rows: unset !important;
+  grid-gap: unset !important;
+  overflow-y: scroll;
+  max-height: 20rem;
+}
+
+.pgn__modal-popup__arrow {
+  visibility: hidden;
+}
+
+.add-tags-button:not([disabled]):hover {
+  background-color: transparent;
+  color: $info-900 !important;
+}
+
+.react-select-add-tags__control {
+  border-radius: 0 !important;
+}
+
+.react-select-add-tags__control--is-focused {
+  border-color: black !important;
+  box-shadow: 0 0 0 1px black !important;
+}
+
+.react-select-add-tags__multi-value__remove {
+  padding-right: 7px !important;
+  padding-left: 7px !important;
+  border-radius: 0 3px 3px 0;
+
+  &:hover {
+    background-color: black !important;
+    color: white !important;
+  }
+}
+
+.taxonomy-tags-count-chip > .pgn__chip {
+  background: none;
+}
diff --git a/src/content-tags-drawer/ContentTagsCollapsible.test.jsx b/src/content-tags-drawer/ContentTagsCollapsible.test.jsx
new file mode 100644
index 0000000000..a5e6fbe37c
--- /dev/null
+++ b/src/content-tags-drawer/ContentTagsCollapsible.test.jsx
@@ -0,0 +1,718 @@
+import React, { useMemo } from 'react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import {
+  act,
+  render,
+  fireEvent,
+  screen,
+  within,
+} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import ContentTagsCollapsible from './ContentTagsCollapsible';
+import messages from './messages';
+import { ContentTagsDrawerContext } from './common/context';
+
+const taxonomyMockData = {
+  hasMorePages: false,
+  canAddTag: false,
+  tagPages: {
+    isLoading: false,
+    isError: false,
+    data: [{
+      value: 'Tag 1',
+      externalId: null,
+      childCount: 2,
+      depth: 0,
+      parentValue: null,
+      id: 12345,
+      subTagsUrl: null,
+      canChangeTag: false,
+      canDeleteTag: false,
+    }, {
+      value: 'Tag 2',
+      externalId: null,
+      childCount: 0,
+      depth: 0,
+      parentValue: null,
+      id: 12346,
+      subTagsUrl: null,
+      canChangeTag: false,
+      canDeleteTag: false,
+    }, {
+      value: 'Tag 3',
+      externalId: null,
+      childCount: 0,
+      depth: 0,
+      parentValue: null,
+      id: 12347,
+      subTagsUrl: null,
+      canChangeTag: false,
+      canDeleteTag: false,
+    }],
+  },
+};
+
+const nestedTaxonomyMockData = {
+  hasMorePages: false,
+  canAddTag: false,
+  tagPages: {
+    isLoading: false,
+    isError: false,
+    data: [{
+      value: 'Tag 1.1',
+      externalId: null,
+      childCount: 0,
+      depth: 1,
+      parentValue: 'Tag 1',
+      id: 12354,
+      subTagsUrl: null,
+      canChangeTag: false,
+      canDeleteTag: false,
+    }, {
+      value: 'Tag 1.2',
+      externalId: null,
+      childCount: 0,
+      depth: 1,
+      parentValue: 'Tag 1',
+      id: 12355,
+      subTagsUrl: null,
+      canChangeTag: false,
+      canDeleteTag: false,
+    }],
+  },
+};
+
+jest.mock('./data/apiHooks', () => ({
+  useContentTaxonomyTagsUpdater: jest.fn(() => ({
+    isError: false,
+    mutate: jest.fn(),
+  })),
+  useTaxonomyTagsData: jest.fn((_, parentTagValue) => {
+    // To mock nested call of useTaxonomyData in subtags dropdown
+    if (parentTagValue === 'Tag 1') {
+      return nestedTaxonomyMockData;
+    }
+    return taxonomyMockData;
+  }),
+}));
+
+const data = {
+  contentId: 'block-v1:SampleTaxonomyOrg1+STC1+2023_1+type@vertical+block@7f47fe2dbcaf47c5a071671c741fe1ab',
+  taxonomyAndTagsData: {
+    id: 123,
+    name: 'Taxonomy 1',
+    canTagObject: true,
+    contentTags: [
+      {
+        value: 'Tag 1',
+        lineage: ['Tag 1'],
+        canDeleteObjecttag: true,
+      },
+      {
+        value: 'Tag 1.1',
+        lineage: ['Tag 1', 'Tag 1.1'],
+        canDeleteObjecttag: true,
+      },
+      {
+        value: 'Tag 2',
+        lineage: ['Tag 2'],
+        canDeleteObjecttag: true,
+      },
+    ],
+  },
+  stagedContentTags: [],
+  addStagedContentTag: jest.fn(),
+  removeStagedContentTag: jest.fn(),
+  setStagedTags: jest.fn(),
+  removeGlobalStagedContentTag: jest.fn(),
+  addRemovedContentTag: jest.fn(),
+  deleteRemovedContentTag: jest.fn(),
+  globalStagedContentTags: {},
+  globalStagedRemovedContentTags: {},
+  setGlobalStagedContentTags: jest.fn(),
+  isEditMode: true,
+  toEditMode: jest.fn(),
+  collapsibleState: true,
+  openCollapsible: jest.fn(),
+  closeCollapsible: jest.fn(),
+};
+
+const ContentTagsCollapsibleComponent = ({
+  contentId,
+  taxonomyAndTagsData,
+  stagedContentTags,
+  addStagedContentTag,
+  removeStagedContentTag,
+  setStagedTags,
+  removeGlobalStagedContentTag,
+  addRemovedContentTag,
+  deleteRemovedContentTag,
+  globalStagedContentTags,
+  globalStagedRemovedContentTags,
+  setGlobalStagedContentTags,
+  isEditMode,
+  toEditMode,
+  collapsibleState,
+  openCollapsible,
+  closeCollapsible,
+}) => {
+  const context = useMemo(() => ({
+    addStagedContentTag,
+    removeStagedContentTag,
+    setStagedTags,
+    removeGlobalStagedContentTag,
+    addRemovedContentTag,
+    deleteRemovedContentTag,
+    globalStagedContentTags,
+    globalStagedRemovedContentTags,
+    setGlobalStagedContentTags,
+    isEditMode,
+    toEditMode,
+    openCollapsible,
+    closeCollapsible,
+  }), []);
+  return (
+    <ContentTagsDrawerContext.Provider value={context}>
+      <IntlProvider locale="en" messages={{}}>
+        <ContentTagsCollapsible
+          contentId={contentId}
+          taxonomyAndTagsData={taxonomyAndTagsData}
+          stagedContentTags={stagedContentTags}
+          collapsibleState={collapsibleState}
+        />
+      </IntlProvider>
+    </ContentTagsDrawerContext.Provider>
+  );
+};
+
+ContentTagsCollapsibleComponent.propTypes = ContentTagsCollapsible.propTypes;
+
+describe('<ContentTagsCollapsible />', () => {
+  beforeAll(() => {
+    jest.useFakeTimers(); // To account for debounce timer
+  });
+
+  afterAll(() => {
+    jest.useRealTimers(); // Restore real timers after the tests
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks(); // Reset all mock function call counts after each test case
+  });
+
+  async function getComponent(updatedData) {
+    const componentData = (!updatedData ? data : updatedData);
+
+    return render(
+      <ContentTagsCollapsibleComponent
+        contentId={componentData.contentId}
+        taxonomyAndTagsData={componentData.taxonomyAndTagsData}
+        stagedContentTags={componentData.stagedContentTags}
+        addStagedContentTag={componentData.addStagedContentTag}
+        removeStagedContentTag={componentData.removeStagedContentTag}
+        setStagedTags={componentData.setStagedTags}
+        removeGlobalStagedContentTag={componentData.removeGlobalStagedContentTag}
+        addRemovedContentTag={componentData.addRemovedContentTag}
+        deleteRemovedContentTag={componentData.deleteRemovedContentTag}
+        globalStagedContentTags={componentData.globalStagedContentTags}
+        globalStagedRemovedContentTags={componentData.globalStagedRemovedContentTags}
+        setGlobalStagedContentTags={componentData.setGlobalStagedContentTags}
+        isEditMode={componentData.isEditMode}
+        toEditMode={componentData.toEditMode}
+        collapsibleState={componentData.collapsibleState}
+        openCollapsible={componentData.openCollapsible}
+        closeCollapsible={componentData.closeCollapsible}
+      />,
+    );
+  }
+
+  it('should render taxonomy tags data along content tags number badge', async () => {
+    const { container, getByText } = await getComponent();
+    expect(getByText('Taxonomy 1')).toBeInTheDocument();
+    expect(container.getElementsByClassName('taxonomy-tags-count-chip').length).toBe(1);
+    expect(getByText('3')).toBeInTheDocument();
+  });
+
+  it('should render read mode', async () => {
+    await getComponent({
+      ...data,
+      isEditMode: false,
+    });
+
+    expect(screen.queryByRole('button', { name: /delete/i })).not.toBeInTheDocument();
+    expect(screen.queryByText(/add a tag/i)).not.toBeInTheDocument();
+  });
+
+  it('should render edit mode', async () => {
+    await getComponent();
+
+    expect(screen.getAllByRole(
+      'button',
+      { name: /delete/i },
+    ).length).toBe(3);
+    expect(screen.getByText(/add a tag/i)).toBeInTheDocument();
+  });
+
+  it('should render "no tags added yet" when expanded in read mode', async () => {
+    await getComponent({
+      ...data,
+      isEditMode: false,
+      taxonomyAndTagsData: {
+        id: 123,
+        name: 'Taxonomy 1',
+        canTagObject: true,
+        contentTags: [],
+      },
+    });
+
+    const expandToggle = screen.getByRole('button', {
+      name: /taxonomy 1/i,
+    });
+    fireEvent.click(expandToggle);
+    expect(screen.queryByText(/no tags added yet/i)).toBeInTheDocument();
+
+    const addTags = screen.getByRole('button', {
+      name: /add tags/i,
+    });
+    expect(addTags).toBeInTheDocument();
+    fireEvent.click(addTags);
+    expect(data.toEditMode).toHaveBeenCalledTimes(1);
+  });
+
+  it('should not render "add tags" button when expanded and not allowed to tag objects', async () => {
+    await getComponent({
+      ...data,
+      isEditMode: false,
+      taxonomyAndTagsData: {
+        id: 123,
+        name: 'Taxonomy 1',
+        canTagObject: false,
+        contentTags: [],
+      },
+    });
+
+    const expandToggle = screen.getByRole('button', {
+      name: /taxonomy 1/i,
+    });
+    fireEvent.click(expandToggle);
+    expect(screen.queryByText(/no tags added yet/i)).toBeInTheDocument();
+
+    const addTags = screen.queryByRole('button', {
+      name: /add tags/i,
+    });
+    expect(addTags).not.toBeInTheDocument();
+  });
+
+  it('should call `openCollapsible` when click in the collapsible', async () => {
+    await getComponent({
+      ...data,
+      collapsibleState: false,
+    });
+
+    const expandToggle = screen.getByRole('button', {
+      name: /taxonomy 1/i,
+    });
+    fireEvent.click(expandToggle);
+
+    expect(data.openCollapsible).toHaveBeenCalledTimes(1);
+    expect(data.closeCollapsible).toHaveBeenCalledTimes(0);
+    expect(screen.queryByText(/no tags added yet/i)).not.toBeInTheDocument();
+  });
+
+  it('should call `closeCollapsible` when click in the collapsible', async () => {
+    await getComponent({
+      ...data,
+      collapsibleState: true,
+    });
+
+    const expandToggle = screen.getByRole('button', {
+      name: /taxonomy 1/i,
+    });
+    fireEvent.click(expandToggle);
+
+    expect(data.closeCollapsible).toHaveBeenCalledTimes(1);
+    expect(data.openCollapsible).toHaveBeenCalledTimes(0);
+  });
+
+  it('should call `addStagedContentTag` when tag checked in the dropdown', async () => {
+    const { getByText, getAllByText } = await getComponent();
+
+    // Click on "Add a tag" button to open dropdown to select new tags
+    const addTagsButton = getByText(messages.collapsibleAddTagsPlaceholderText.defaultMessage);
+    // Use `mouseDown/mouseUp` instead of `click` since the react-select didn't respond to `click`
+    fireEvent.mouseDown(addTagsButton);
+    fireEvent.mouseUp(addTagsButton);
+
+    // Wait for the dropdown selector for tags to open,
+    // Tag 3 should only appear there, (i.e. the dropdown is open, since Tag 3 is not applied)
+    expect(getAllByText('Tag 3').length).toBe(1);
+
+    // Click to check Tag 3 and check the `addStagedContentTag` was called with the correct params
+    const tag3 = getByText('Tag 3');
+    fireEvent.click(tag3);
+
+    const taxonomyId = 123;
+    const addedStagedTag = {
+      value: 'Tag%203',
+      label: 'Tag 3',
+    };
+    expect(data.addStagedContentTag).toHaveBeenCalledTimes(1);
+    expect(data.addStagedContentTag).toHaveBeenCalledWith(taxonomyId, addedStagedTag);
+  });
+
+  it('should call `removeStagedContentTag` when tag staged tag unchecked in the dropdown', async () => {
+    const { getByText, getAllByText } = await getComponent();
+
+    // Click on "Add a tag" button to open dropdown to select new tags
+    const addTagsButton = getByText(messages.collapsibleAddTagsPlaceholderText.defaultMessage);
+    // Use `mouseDown/mouseup` instead of `click` since the react-select didn't respond to `click`
+    fireEvent.mouseDown(addTagsButton);
+    fireEvent.mouseUp(addTagsButton);
+
+    // Wait for the dropdown selector for tags to open,
+    // Tag 3 should only appear there, (i.e. the dropdown is open, since Tag 3 is not applied)
+    expect(getAllByText('Tag 3').length).toBe(1);
+
+    // Click to check Tag 3
+    const tag3 = getByText('Tag 3');
+    fireEvent.click(tag3);
+
+    // Click to uncheck Tag 3 and check the `removeStagedContentTag` was called with the correct params
+    fireEvent.click(tag3);
+    const taxonomyId = 123;
+    const tagValue = 'Tag%203';
+    expect(data.removeStagedContentTag).toHaveBeenCalledTimes(1);
+    expect(data.removeStagedContentTag).toHaveBeenCalledWith(taxonomyId, tagValue);
+  });
+
+  it('should call `removeGlobalStagedContentTag` when global staged tag is deleted', async () => {
+    await getComponent({
+      ...data,
+      taxonomyAndTagsData: {
+        id: 123,
+        name: 'Taxonomy 1',
+        canTagObject: true,
+        contentTags: [
+          {
+            value: 'Tag 3',
+            lineage: ['Tag 3'],
+            canDeleteObjecttag: true,
+          },
+        ],
+      },
+      globalStagedContentTags: {
+        123: [{
+          value: 'Tag 3',
+          lineage: ['Tag 3'],
+          canDeleteObjecttag: true,
+        }],
+      },
+    });
+
+    const deleteButton = screen.getByRole('button', {
+      name: /delete/i,
+    });
+    fireEvent.click(deleteButton);
+
+    const taxonomyId = 123;
+    expect(data.removeGlobalStagedContentTag).toHaveBeenCalledTimes(1);
+    expect(data.removeGlobalStagedContentTag).toHaveBeenCalledWith(taxonomyId, 'Tag 3');
+  });
+
+  it('should call `addRemovedContentTag` when a fetched tag is deleted', async () => {
+    await getComponent();
+
+    const tag = screen.getByText(/tag 2/i);
+    const deleteButton = within(tag).getByRole('button', {
+      name: /delete/i,
+    });
+    fireEvent.click(deleteButton);
+
+    const taxonomyId = 123;
+    expect(data.addRemovedContentTag).toHaveBeenCalledTimes(1);
+    expect(data.addRemovedContentTag).toHaveBeenCalledWith(taxonomyId, 'Tag 2');
+  });
+
+  it('should call `setStagedTags` to clear staged tags when clicking inline "Add" button', async () => {
+    // Setup component to have staged tags
+    const { getByText } = await getComponent({
+      ...data,
+      stagedContentTags: [{
+        value: 'Tag%203',
+        label: 'Tag 3',
+      }],
+    });
+
+    // Click on inline "Add" button and check that the appropriate methods are called
+    const inlineAdd = getByText(messages.collapsibleInlineAddStagedTagsButtonText.defaultMessage);
+    fireEvent.click(inlineAdd);
+
+    // Check that `setStagedTags` called with empty tags list to clear staged tags
+    const taxonomyId = 123;
+    expect(data.setStagedTags).toHaveBeenCalledTimes(1);
+    expect(data.setStagedTags).toHaveBeenCalledWith(taxonomyId, []);
+  });
+
+  it('should call `setStagedTags` to clear staged tags when clicking "Add tags" button in dropdown', async () => {
+    // Setup component to have staged tags
+    const { container, getByText } = await getComponent({
+      ...data,
+      stagedContentTags: [{
+        value: 'Tag%203',
+        label: 'Tag 3',
+      }],
+    });
+
+    // Click on dropdown with staged tags to expand it
+    const selectTagsDropdown = container.getElementsByClassName('react-select-add-tags__control')[0];
+    // Use `mouseDown` instead of `click` since the react-select didn't respond to `click`
+    fireEvent.mouseDown(selectTagsDropdown);
+
+    // Click on "Add tags" button and check that the appropriate methods are called
+    const dropdownAdd = getByText(messages.collapsibleAddStagedTagsButtonText.defaultMessage);
+    fireEvent.click(dropdownAdd);
+
+    // Check that `setStagedTags` called with empty tags list to clear staged tags
+    const taxonomyId = 123;
+    expect(data.setStagedTags).toHaveBeenCalledTimes(1);
+    expect(data.setStagedTags).toHaveBeenCalledWith(taxonomyId, []);
+  });
+
+  it('should close dropdown and clear staged tags when clicking "Cancel" inside dropdown', async () => {
+    // Setup component to have staged tags
+    const { container, getByText } = await getComponent({
+      ...data,
+      stagedContentTags: [{
+        value: 'Tag%203',
+        label: 'Tag 3',
+      }],
+    });
+
+    // Click on dropdown with staged tags to expand it
+    const selectTagsDropdown = container.getElementsByClassName('react-select-add-tags__control')[0];
+    // Use `mouseDown` instead of `click` since the react-select didn't respond to `click`
+    fireEvent.mouseDown(selectTagsDropdown);
+
+    // Click on inline "Add" button and check that the appropriate methods are called
+    const dropdownCancel = getByText(messages.collapsibleCancelStagedTagsButtonText.defaultMessage);
+    fireEvent.click(dropdownCancel);
+
+    // Check that `setStagedTags` called with empty tags list to clear staged tags
+    const taxonomyId = 123;
+    expect(data.setStagedTags).toHaveBeenCalledTimes(1);
+    expect(data.setStagedTags).toHaveBeenCalledWith(taxonomyId, []);
+
+    // Check that the dropdown is closed
+    expect(dropdownCancel).not.toBeInTheDocument();
+  });
+
+  it('should handle search term change', async () => {
+    const {
+      getByText, getByRole, getByDisplayValue,
+    } = await getComponent();
+
+    // Click on "Add a tag" button to open dropdown
+    const addTagsButton = getByText(messages.collapsibleAddTagsPlaceholderText.defaultMessage);
+    // Use `mouseDown` instead of `click` since the react-select didn't respond to click
+    fireEvent.mouseDown(addTagsButton);
+
+    // Get the search field
+    const searchField = getByRole('combobox');
+
+    const searchTerm = 'memo';
+
+    // Trigger a change in the search field
+    userEvent.type(searchField, searchTerm);
+
+    await act(async () => {
+      // Fast-forward time by 500 milliseconds (for the debounce delay)
+      jest.advanceTimersByTime(500);
+    });
+
+    // Check that the search term has been set
+    expect(searchField).toHaveValue(searchTerm);
+    expect(getByDisplayValue(searchTerm)).toBeInTheDocument();
+
+    // Clear search
+    userEvent.clear(searchField);
+
+    // Check that the search term has been cleared
+    expect(searchField).toHaveValue('');
+  });
+
+  it('should close dropdown selector when clicking away', async () => {
+    const { getByText, queryByText } = await getComponent();
+
+    // Click on "Add a tag" button to open dropdown
+    const addTagsButton = getByText(messages.collapsibleAddTagsPlaceholderText.defaultMessage);
+    // Use `mouseDown` instead of `click` since the react-select didn't respond to `click`
+    fireEvent.mouseDown(addTagsButton);
+
+    // Wait for the dropdown selector for tags to open, Tag 3 should appear
+    // since it is not applied
+    expect(queryByText('Tag 3')).toBeInTheDocument();
+
+    // Simulate clicking outside the dropdown remove focus
+    userEvent.click(document.body);
+
+    // Simulate clicking outside the dropdown again to close it
+    userEvent.click(document.body);
+
+    // Wait for the dropdown selector for tags to close, Tag 3 is no longer on
+    // the page
+    expect(queryByText('Tag 3')).not.toBeInTheDocument();
+  });
+
+  it('should test keyboard navigation of add tags widget', async () => {
+    const {
+      getByText,
+      queryByText,
+      queryAllByText,
+    } = await getComponent();
+
+    // Click on "Add a tag" button to open dropdown
+    const addTagsButton = getByText(messages.collapsibleAddTagsPlaceholderText.defaultMessage);
+    // Use `mouseDown` instead of `click` since the react-select didn't respond to `click`
+    fireEvent.mouseDown(addTagsButton);
+
+    // Wait for the dropdown selector for tags to open, Tag 3 should appear
+    // since it is not applied
+    expect(queryByText('Tag 3')).toBeInTheDocument();
+
+    /*
+    The dropdown data looks like the following:
+
+      │Tag 1
+      │  │
+      │  ├─ Tag 1.1
+      │  │
+      │  │
+      │  └─ Tag 1.2
+      │
+      │Tag 2
+      │
+      │
+      │Tag 3
+
+     */
+
+    // Press tab to focus on first element in dropdown, Tag 1 should be focused
+    userEvent.tab();
+    const dropdownTag1Div = queryAllByText('Tag 1')[1].closest('.dropdown-selector-tag-actions');
+    expect(dropdownTag1Div).toHaveFocus();
+
+    // Press right arrow to expand Tag 1, Tag 1.1 & Tag 1.2 should now be visible
+    userEvent.keyboard('{arrowright}');
+    expect(queryAllByText('Tag 1.1').length).toBe(2);
+    expect(queryByText('Tag 1.2')).toBeInTheDocument();
+
+    // Press left arrow to collapse Tag 1, Tag 1.1 & Tag 1.2 should not be visible
+    userEvent.keyboard('{arrowleft}');
+    expect(queryAllByText('Tag 1.1').length).toBe(1);
+    expect(queryByText('Tag 1.2')).not.toBeInTheDocument();
+
+    // Press enter key to expand Tag 1, Tag 1.1 & Tag 1.2 should now be visible
+    userEvent.keyboard('{enter}');
+    expect(queryAllByText('Tag 1.1').length).toBe(2);
+    expect(queryByText('Tag 1.2')).toBeInTheDocument();
+
+    // Press down arrow to navigate to Tag 1.1, it should be focused
+    userEvent.keyboard('{arrowdown}');
+    const dropdownTag1pt1Div = queryAllByText('Tag 1.1')[1].closest('.dropdown-selector-tag-actions');
+    expect(dropdownTag1pt1Div).toHaveFocus();
+
+    // Press down arrow again to navigate to Tag 1.2, it should be fouced
+    userEvent.keyboard('{arrowdown}');
+    const dropdownTag1pt2Div = queryAllByText('Tag 1.2')[0].closest('.dropdown-selector-tag-actions');
+    expect(dropdownTag1pt2Div).toHaveFocus();
+
+    // Press down arrow again to navigate to Tag 2, it should be fouced
+    userEvent.keyboard('{arrowdown}');
+    const dropdownTag2Div = queryAllByText('Tag 2')[1].closest('.dropdown-selector-tag-actions');
+    expect(dropdownTag2Div).toHaveFocus();
+
+    // Press up arrow to navigate back to Tag 1.2, it should be focused
+    userEvent.keyboard('{arrowup}');
+    expect(dropdownTag1pt2Div).toHaveFocus();
+
+    // Press up arrow to navigate back to Tag 1.1, it should be focused
+    userEvent.keyboard('{arrowup}');
+    expect(dropdownTag1pt1Div).toHaveFocus();
+
+    // Press up arrow again to navigate to Tag 1, it should be focused
+    userEvent.keyboard('{arrowup}');
+    expect(dropdownTag1Div).toHaveFocus();
+
+    // Press down arrow twice to navigate to Tag 1.2, it should be focsed
+    userEvent.keyboard('{arrowdown}');
+    userEvent.keyboard('{arrowdown}');
+    expect(dropdownTag1pt2Div).toHaveFocus();
+
+    // Press space key to check Tag 1.2, it should be staged
+    userEvent.keyboard('{space}');
+    const taxonomyId = 123;
+    const addedStagedTag = {
+      value: 'Tag%201,Tag%201.2',
+      label: 'Tag 1.2',
+    };
+    expect(data.addStagedContentTag).toHaveBeenCalledWith(taxonomyId, addedStagedTag);
+
+    // Press enter key again to uncheck Tag 1.2 (since it's a leaf), it should be unstaged
+    userEvent.keyboard('{enter}');
+    const tagValue = 'Tag%201,Tag%201.2';
+    expect(data.removeStagedContentTag).toHaveBeenCalledWith(taxonomyId, tagValue);
+
+    // Press left arrow to navigate back to Tag 1, it should be focused
+    userEvent.keyboard('{arrowleft}');
+    expect(dropdownTag1Div).toHaveFocus();
+
+    // Press tab key it should jump to cancel button, it should be focused
+    userEvent.tab();
+    const dropdownCancel = getByText(messages.collapsibleCancelStagedTagsButtonText.defaultMessage);
+    expect(dropdownCancel).toHaveFocus();
+
+    // Press tab again, it should exit and close the select menu, since there are not staged tags
+    userEvent.tab();
+    expect(queryByText('Tag 3')).not.toBeInTheDocument();
+
+    // Press shift tab, focus back on select menu input, it should open the menu
+    userEvent.tab({ shift: true });
+    expect(queryByText('Tag 3')).toBeInTheDocument();
+
+    // Press shift tab again, it should focus out and close the select menu
+    userEvent.tab({ shift: true });
+    expect(queryByText('Tag 3')).not.toBeInTheDocument();
+
+    // Press tab again, the select menu should open, then press escape, it should close
+    userEvent.tab();
+    expect(queryByText('Tag 3')).toBeInTheDocument();
+    userEvent.keyboard('{escape}');
+    expect(queryByText('Tag 3')).not.toBeInTheDocument();
+  });
+
+  it('should remove applied tags when clicking on `x` of tag bubble', async () => {
+    await getComponent();
+
+    // Click on 'x' of applied tag to remove it
+    const appliedTag = screen.getByText(/tag 2/i);
+    const xButtonAppliedTag = within(appliedTag).getByRole('button', {
+      name: /delete/i,
+    });
+    xButtonAppliedTag.click();
+
+    // Check that the applied tag has been removed
+    expect(appliedTag).not.toBeInTheDocument();
+  });
+
+  it('should render taxonomy tags data with tags number badge as cero', async () => {
+    const updatedData = { ...data };
+    updatedData.taxonomyAndTagsData = { ...updatedData.taxonomyAndTagsData };
+    updatedData.taxonomyAndTagsData.contentTags = [];
+    const { container, getByText } = await getComponent(updatedData);
+
+    expect(getByText('Taxonomy 1')).toBeInTheDocument();
+    expect(container.getElementsByClassName('taxonomy-tags-count-chip').length).toBe(1);
+    expect(getByText('0')).toBeInTheDocument();
+  });
+});
diff --git a/src/content-tags-drawer/ContentTagsCollapsibleHelper.jsx b/src/content-tags-drawer/ContentTagsCollapsibleHelper.jsx
new file mode 100644
index 0000000000..26e27a1188
--- /dev/null
+++ b/src/content-tags-drawer/ContentTagsCollapsibleHelper.jsx
@@ -0,0 +1,370 @@
+// @ts-check
+import React from 'react';
+import { useCheckboxSetValues } from '@openedx/paragon';
+import { cloneDeep } from 'lodash';
+
+import { useContentTaxonomyTagsUpdater } from './data/apiHooks';
+import { ContentTagsDrawerContext } from './common/context';
+
+/** @typedef {import("../taxonomy/data/types.js").TaxonomyData} TaxonomyData */
+/** @typedef {import("./data/types.js").Tag} ContentTagData */
+/** @typedef {import("./ContentTagsCollapsible").TagTreeEntry} TagTreeEntry */
+/** @typedef {import("./data/types.js").StagedTagData} StagedTagData */
+/** @typedef {import("./data/types.js").UpdateTagsData} UpdateTagsData */
+
+/**
+ * Util function that sorts the keys of a tree in alphabetical order.
+ *
+ * @param {object} tree - tree that needs it's keys sorted
+ * @returns {object} sorted tree
+ */
+const sortKeysAlphabetically = (tree) => {
+  const sortedObj = {};
+  Object.keys(tree)
+    .sort()
+    .forEach((key) => {
+      sortedObj[key] = tree[key];
+      if (tree[key] && typeof tree[key] === 'object') {
+        sortedObj[key].children = sortKeysAlphabetically(tree[key].children);
+      }
+    });
+  return sortedObj;
+};
+
+/**
+ * Util function that returns the leafs of a tree. Mainly used to extract the explicit
+ * tags selected in the staged tags tree
+ *
+ * @param {object} tree - tree to extract the leaf tags from
+ * @returns {StagedTagData[]} array of leaf (explicit) tags of provided tree
+ */
+const getLeafTags = (tree) => {
+  const leafTags = [];
+
+  function traverse(node) {
+    Object.keys(node).forEach(key => {
+      const child = node[key];
+      if (Object.keys(child.children).length === 0) {
+        leafTags.push({
+          value: key,
+          // Always true because this is a new added tag,
+          // so the user can delete.
+          canDeleteObjecttag: true,
+          lineage: child.lineage,
+        });
+      } else {
+        traverse(child.children);
+      }
+    });
+  }
+
+  traverse(tree);
+  return leafTags;
+};
+
+/**
+ * Handles all the underlying logic for the ContentTagsCollapsible component
+ * @param {string} contentId The ID of the content we're tagging (e.g. usage key)
+ * @param {StagedTagData[]} stagedContentTags
+ *       - Array of staged tags represented as objects with value/label
+ * @param {TaxonomyData & {contentTags: ContentTagData[]}} taxonomyAndTagsData
+ * @returns {{
+ *      tagChangeHandler: (tagSelectableBoxValue: string, checked: boolean) => void,
+ *      removeAppliedTagHandler: (tagSelectableBoxValue: string) => void,
+ *      appliedContentTagsTree: Record<string, TagTreeEntry>,
+ *      stagedContentTagsTree: Record<string, TagTreeEntry>,
+ *      contentTagsCount: number,
+ *      checkedTags: any,
+ *      commitStagedTagsToGlobal: () => void,
+ *      updateTags: import('@tanstack/react-query').UseMutationResult<
+ *                  any, unknown, { tagsData: Promise<UpdateTagsData[]>; }, unknown
+ *      >
+ * }}
+ */
+const useContentTagsCollapsibleHelper = (
+  contentId,
+  stagedContentTags,
+  taxonomyAndTagsData,
+) => {
+  const {
+    isEditMode,
+    addStagedContentTag,
+    removeStagedContentTag,
+    removeGlobalStagedContentTag,
+    addRemovedContentTag,
+    deleteRemovedContentTag,
+    globalStagedContentTags,
+    setGlobalStagedContentTags,
+    globalStagedRemovedContentTags,
+  } = React.useContext(ContentTagsDrawerContext);
+
+  const {
+    id, contentTags,
+  } = taxonomyAndTagsData;
+  const updateTags = useContentTaxonomyTagsUpdater(contentId);
+
+  // Keeps track of the content objects tags count (both implicit and explicit)
+  const [contentTagsCount, setContentTagsCount] = React.useState(0);
+
+  // Keeps track of the tree structure for tags that are add by selecting/unselecting
+  // tags in the dropdowns.
+  const [stagedContentTagsTree, setStagedContentTagsTree] = React.useState({});
+
+  // To handle checking/unchecking tags in the SelectableBox
+  const [checkedTags, { add, remove, clear }] = useCheckboxSetValues();
+
+  // State to keep track of the staged tags (and along with ancestors) that should be removed
+  const [stagedTagsToRemove, setStagedTagsToRemove] = React.useState(/** @type string[] */([]));
+
+  // State to keep track of the global tags (staged and fetched) that should be removed
+  const [globalTagsToRemove, setGlobalTagsToRemove] = React.useState(/** @type string[] */([]));
+
+  // Handles the removal of staged content tags based on what was removed
+  // from the staged tags tree. We are doing it in a useEffect since the removeTag
+  // method is being called inside a setState of the parent component, which
+  // was causing warnings
+  React.useEffect(() => {
+    stagedTagsToRemove.forEach(tag => removeStagedContentTag(id, tag));
+  }, [stagedTagsToRemove, removeStagedContentTag, id]);
+
+  // When you change the drawer mode, it is necessary to clear
+  // all checked tags in the select.
+  React.useEffect(() => {
+    clear();
+  }, [isEditMode]);
+
+  React.useEffect(() => {
+    globalTagsToRemove.forEach((tag) => {
+      if (globalStagedContentTags[id]
+          && globalStagedContentTags[id].some(t => t.value === tag)) {
+        // A new tag has been removed
+        removeGlobalStagedContentTag(id, tag);
+      } else if (contentTags.some(t => t.value === tag)) {
+        // A fetched tag has been removed
+        addRemovedContentTag(id, tag);
+      }
+    });
+  }, [globalTagsToRemove, removeGlobalStagedContentTag, id]);
+
+  // Handles making requests to the update endpoint when the staged tags need to be committed
+  const commitStagedTagsToGlobal = React.useCallback(() => {
+    // Filter out only leaf nodes of staging tree to commit
+    const explicitStaged = getLeafTags(stagedContentTagsTree);
+
+    const globalTags = cloneDeep(globalStagedContentTags);
+    const newGlobalTags = [];
+
+    explicitStaged.forEach((tag) => {
+      if (globalStagedRemovedContentTags[id]
+          && globalStagedRemovedContentTags[id].includes(tag.value)) {
+        // A fetched tag that has been removed has been added again
+        deleteRemovedContentTag(id, tag.value);
+      } else {
+        // New tag added
+        newGlobalTags.push(tag);
+      }
+    });
+
+    if (newGlobalTags) {
+      if (!globalTags[id]) {
+        globalTags[id] = newGlobalTags;
+      } else {
+        // Filter out applied tags that should become implicit because a child tag was committed
+        const stagedLineages = stagedContentTags.map(st => decodeURIComponent(st.value).split(',').slice(0, -1)).flat();
+        const applied = globalTags[id].filter(t => !stagedLineages.includes(t.value));
+
+        globalTags[id] = [...applied, ...newGlobalTags];
+      }
+
+      setGlobalStagedContentTags(globalTags);
+    }
+  }, [contentTags, stagedContentTags, stagedContentTagsTree, updateTags]);
+
+  // This converts the contentTags prop to the tree structure mentioned above
+  const appliedContentTagsTree = React.useMemo(() => {
+    let contentTagsCounter = 0;
+
+    // When an error occurs while updating, the contentTags query is invalidated,
+    // hence they will be recalculated, and the updateTags mutation should be reset.
+    if (updateTags.isError) {
+      updateTags.reset();
+    }
+
+    const resultTree = {};
+    contentTags.forEach(item => {
+      let currentLevel = resultTree;
+
+      item.lineage.forEach((key, index) => {
+        if (!currentLevel[key]) {
+          const isExplicit = index === item.lineage.length - 1;
+          currentLevel[key] = {
+            explicit: isExplicit,
+            children: {},
+            canChangeObjecttag: item.canChangeObjecttag,
+            canDeleteObjecttag: item.canDeleteObjecttag,
+          };
+
+          // Populating the SelectableBox with "selected" (explicit) tags
+          const value = item.lineage.map(l => encodeURIComponent(l)).join(',');
+          // Clear all the existing applied tags
+          remove(value);
+          // Add only the explicitly applied tags
+          if (isExplicit) {
+            add(value);
+          }
+          contentTagsCounter += 1;
+        }
+
+        currentLevel = currentLevel[key].children;
+      });
+    });
+
+    setContentTagsCount(contentTagsCounter);
+    return resultTree;
+  }, [contentTags, updateTags.isError]);
+
+  /**
+   * Util function that removes the tag along with its ancestors if it was
+   * the only explicit child tag. It returns a list of staged tags (and ancestors) that
+   * were unstaged and should be removed
+   *
+   * @param {object} tree - tag tree to remove the tag from
+   * @param {string[]} tagsToRemove - remaining lineage of tag to remove at each recursive level.
+   *                                  eg: ['grand parent', 'parent', 'tag']
+   * @param {boolean} staged - whether we are removing staged tags or not
+   * @param {string[]} fullLineage - Full lineage of tag being removed
+   * @returns {string[]} array of staged tag values (with ancestors) that should be removed from staged tree
+   *
+   */
+  const removeTags = React.useCallback((tree, tagsToRemove, staged, fullLineage) => {
+    const removedTags = [];
+
+    const traverseAndRemoveTags = (subTree, innerTagsToRemove) => {
+      if (!subTree || !innerTagsToRemove.length) {
+        return;
+      }
+      const key = innerTagsToRemove[0];
+      if (subTree[key]) {
+        traverseAndRemoveTags(subTree[key].children, innerTagsToRemove.slice(1));
+
+        if (
+          Object.keys(subTree[key].children).length === 0
+          && (subTree[key].explicit === false || innerTagsToRemove.length === 1)
+        ) {
+          // eslint-disable-next-line no-param-reassign
+          delete subTree[key];
+
+          // Remove tags (including ancestors) from staged tags select menu
+          if (staged) {
+            // Build value from lineage by traversing beginning till key, then encoding them
+            const toRemove = fullLineage.slice(0, fullLineage.indexOf(key) + 1).map(item => encodeURIComponent(item));
+            if (toRemove.length > 0) {
+              removedTags.push(toRemove.join(','));
+            }
+          }
+        }
+      }
+    };
+
+    traverseAndRemoveTags(tree, tagsToRemove);
+
+    return removedTags;
+  }, []);
+
+  // Add tag to the tree, and while traversing remove any selected ancestor tags
+  // as they should become implicit
+  const addTags = (tree, tagLineage, selectedTag) => {
+    const value = [];
+    let traversal = tree;
+    tagLineage.forEach(tag => {
+      const isExplicit = selectedTag === tag;
+
+      // Clear out the ancestor tags leading to newly selected tag
+      // as they automatically become implicit
+      value.push(encodeURIComponent(tag));
+
+      if (!traversal[tag]) {
+        traversal[tag] = {
+          explicit: isExplicit,
+          children: {},
+          canChangeObjecttag: false,
+          canDeleteObjecttag: false,
+        };
+        if (isExplicit) {
+          traversal[tag].lineage = tagLineage;
+        }
+      } /* istanbul ignore next */ else {
+        traversal[tag].explicit = isExplicit;
+        traversal[tag].lineage = tagLineage;
+      }
+
+      // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+      isExplicit ? add(value.join(',')) : remove(value.join(','));
+      traversal = traversal[tag].children;
+    });
+  };
+
+  const tagChangeHandler = React.useCallback((tagSelectableBoxValue, checked) => {
+    const tagLineage = tagSelectableBoxValue.split(',').map(t => decodeURIComponent(t));
+    const selectedTag = tagLineage.slice(-1)[0];
+
+    if (checked) {
+      const stagedTree = cloneDeep(stagedContentTagsTree);
+      // We "add" the tag to the SelectableBox.Set inside the addTags method
+      addTags(stagedTree, tagLineage, selectedTag);
+
+      // Update the staged content tags tree
+      setStagedContentTagsTree(stagedTree);
+
+      // Add content tag to taxonomy's staged tags select menu
+      addStagedContentTag(
+        id,
+        {
+          value: tagSelectableBoxValue,
+          label: selectedTag,
+        },
+      );
+    } else {
+      // Remove tag from the SelectableBox.Set
+      remove(tagSelectableBoxValue);
+
+      // Remove tag along with it's from ancestors if it's the only child tag
+      // from the staged tags tree and update the staged content tags tree
+      setStagedContentTagsTree(prevStagedContentTagsTree => {
+        const updatedStagedContentTagsTree = cloneDeep(prevStagedContentTagsTree);
+        const tagsToRemove = removeTags(updatedStagedContentTagsTree, tagLineage, true, tagLineage);
+        setStagedTagsToRemove(tagsToRemove);
+        return updatedStagedContentTagsTree;
+      });
+    }
+  }, [
+    stagedContentTagsTree, setStagedContentTagsTree, addTags, removeTags,
+    id, addStagedContentTag, removeStagedContentTag,
+  ]);
+
+  const removeAppliedTagHandler = React.useCallback((tagSelectableBoxValue) => {
+    const tagLineage = tagSelectableBoxValue.split(',').map(t => decodeURIComponent(t));
+
+    // Remove tag from the SelectableBox.Set
+    remove(tagSelectableBoxValue);
+
+    // Remove tags from applied tags
+    removeTags(appliedContentTagsTree, tagLineage, false, tagLineage);
+    const selectedTag = tagLineage.slice(-1)[0];
+
+    setGlobalTagsToRemove([selectedTag]);
+  }, [appliedContentTagsTree, id, removeStagedContentTag]);
+
+  return {
+    tagChangeHandler,
+    removeAppliedTagHandler,
+    appliedContentTagsTree: sortKeysAlphabetically(appliedContentTagsTree),
+    stagedContentTagsTree: sortKeysAlphabetically(stagedContentTagsTree),
+    contentTagsCount,
+    checkedTags,
+    commitStagedTagsToGlobal,
+    updateTags,
+  };
+};
+
+export default useContentTagsCollapsibleHelper;
diff --git a/src/content-tags-drawer/ContentTagsDrawer.scss b/src/content-tags-drawer/ContentTagsDrawer.scss
new file mode 100644
index 0000000000..76889a4401
--- /dev/null
+++ b/src/content-tags-drawer/ContentTagsDrawer.scss
@@ -0,0 +1,39 @@
+.pgn__sheet-component:has(#content-tags-drawer) {
+  min-width: max(500px, 33vw);
+}
+
+@media only screen and (width <= 500px) {
+  .pgn__sheet-component:has(#content-tags-drawer) {
+    min-width: 100vw;
+  }
+}
+
+.tags-drawer {
+  .tags-drawer-footer {
+    right: 0;
+    bottom: 0;
+  }
+
+  .tags-drawer-cancel-button:hover {
+    background-color: transparent;
+    color: $gray-300 !important;
+  }
+
+  .other-description {
+    font-size: .9rem;
+  }
+
+  .enable-taxonomies-button:not([disabled]):hover {
+    background-color: transparent;
+    color: $info-900 !important;
+  }
+}
+
+// Apply styles to sheet only if it has a child with a .tags-drawer class
+.pgn__sheet-component {
+  &:has(.tags-drawer) {
+    overflow-y: scroll;
+    padding: 0;
+    min-height: 100vh;
+  }
+}
diff --git a/src/content-tags-drawer/ContentTagsDrawer.test.jsx b/src/content-tags-drawer/ContentTagsDrawer.test.jsx
new file mode 100644
index 0000000000..426f0d5323
--- /dev/null
+++ b/src/content-tags-drawer/ContentTagsDrawer.test.jsx
@@ -0,0 +1,760 @@
+import {
+  act,
+  fireEvent,
+  initializeMocks,
+  render,
+  waitFor,
+  screen,
+  within,
+} from '../testUtils';
+import ContentTagsDrawer from './ContentTagsDrawer';
+import messages from './messages';
+import { ContentTagsDrawerSheetContext } from './common/context';
+import {
+  mockContentData,
+  mockContentTaxonomyTagsData,
+  mockTaxonomyListData,
+  mockTaxonomyTagsData,
+} from './data/api.mocks';
+import { getContentTaxonomyTagsApiUrl } from './data/api';
+
+const path = '/content/:contentId/*';
+const mockOnClose = jest.fn();
+const mockSetBlockingSheet = jest.fn();
+const mockNavigate = jest.fn();
+mockContentTaxonomyTagsData.applyMock();
+mockTaxonomyListData.applyMock();
+mockTaxonomyTagsData.applyMock();
+mockContentData.applyMock();
+
+const {
+  stagedTagsId,
+  otherTagsId,
+  languageWithTagsId,
+  languageWithoutTagsId,
+  largeTagsId,
+  emptyTagsId,
+} = mockContentTaxonomyTagsData;
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useNavigate: () => mockNavigate,
+}));
+
+const renderDrawer = (contentId, drawerParams = {}) => (
+  render(
+    <ContentTagsDrawerSheetContext.Provider value={drawerParams}>
+      <ContentTagsDrawer {...drawerParams} />
+    </ContentTagsDrawerSheetContext.Provider>,
+    { path, params: { contentId } },
+  )
+);
+
+describe('<ContentTagsDrawer />', () => {
+  beforeEach(async () => {
+    initializeMocks();
+  });
+
+  it('should render page and page title correctly', () => {
+    renderDrawer(stagedTagsId);
+    expect(screen.getByText('Manage tags')).toBeInTheDocument();
+  });
+
+  it('shows spinner before the content data query is complete', async () => {
+    await act(async () => {
+      renderDrawer(stagedTagsId);
+      const spinner = screen.getAllByRole('status')[0];
+      expect(spinner.textContent).toEqual('Loading'); // Uses <Spinner />
+    });
+  });
+
+  it('shows spinner before the taxonomy tags query is complete', async () => {
+    await act(async () => {
+      renderDrawer(stagedTagsId);
+      const spinner = screen.getAllByRole('status')[1];
+      expect(spinner.textContent).toEqual('Loading...'); // Uses <Loading />
+    });
+  });
+
+  it('shows the content display name after the query is complete in drawer variant', async () => {
+    renderDrawer('test');
+    expect(await screen.findByText('Loading...')).toBeInTheDocument();
+    expect(await screen.findByText('Unit 1')).toBeInTheDocument();
+    expect(await screen.findByText('Manage tags')).toBeInTheDocument();
+  });
+
+  it('shows the content display name after the query is complete in component variant', async () => {
+    renderDrawer('test', { variant: 'component' });
+    expect(await screen.findByText('Loading...')).toBeInTheDocument();
+    expect(screen.queryByText('Unit 1')).not.toBeInTheDocument();
+    expect(screen.queryByText('Manage tags')).not.toBeInTheDocument();
+  });
+
+  it('shows content using params', async () => {
+    renderDrawer(undefined, { id: 'test' });
+    expect(await screen.findByText('Loading...')).toBeInTheDocument();
+    expect(await screen.findByText('Unit 1')).toBeInTheDocument();
+    expect(await screen.findByText('Manage tags')).toBeInTheDocument();
+  });
+
+  it('shows the taxonomies data including tag numbers after the query is complete', async () => {
+    await act(async () => {
+      const { container } = renderDrawer(largeTagsId);
+      await waitFor(() => { expect(screen.getByText('Taxonomy 1')).toBeInTheDocument(); });
+      expect(screen.getByText('Taxonomy 1')).toBeInTheDocument();
+      expect(screen.getByText('Taxonomy 2')).toBeInTheDocument();
+      const tagCountBadges = container.getElementsByClassName('taxonomy-tags-count-chip');
+      expect(tagCountBadges[0].textContent).toBe('3');
+      expect(tagCountBadges[1].textContent).toBe('2');
+    });
+  });
+
+  it('should be read only on first render on drawer variant', async () => {
+    renderDrawer(stagedTagsId);
+    expect(await screen.findByText('Taxonomy 1')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /close/i }));
+    expect(screen.getByRole('button', { name: /edit tags/i }));
+
+    // Not show delete tag buttons
+    expect(screen.queryByRole('button', { name: /delete/i })).not.toBeInTheDocument();
+
+    // Not show add a tag select
+    expect(screen.queryByText(/add a tag/i)).not.toBeInTheDocument();
+
+    // Not show cancel button
+    expect(screen.queryByRole('button', { name: /cancel/i })).not.toBeInTheDocument();
+
+    // Not show save button
+    expect(screen.queryByRole('button', { name: /save/i })).not.toBeInTheDocument();
+  });
+
+  it('should be read only on first render on component variant', async () => {
+    renderDrawer(stagedTagsId, { variant: 'component' });
+    expect(await screen.findByText('Taxonomy 1')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /manage tags/i }));
+
+    // Not show delete tag buttons
+    expect(screen.queryByRole('button', { name: /delete/i })).not.toBeInTheDocument();
+
+    // Not show add a tag select
+    expect(screen.queryByText(/add a tag/i)).not.toBeInTheDocument();
+
+    // Not show cancel button
+    expect(screen.queryByRole('button', { name: /cancel/i })).not.toBeInTheDocument();
+
+    // Not show save button
+    expect(screen.queryByRole('button', { name: /save/i })).not.toBeInTheDocument();
+  });
+
+  it('should change to edit mode when click on `Edit tags` on drawer variant', async () => {
+    renderDrawer(stagedTagsId);
+    expect(await screen.findByText('Taxonomy 1')).toBeInTheDocument();
+    const editTagsButton = screen.getByRole('button', {
+      name: /edit tags/i,
+    });
+    fireEvent.click(editTagsButton);
+
+    // Show delete tag buttons
+    expect(screen.getAllByRole('button', {
+      name: /delete/i,
+    }).length).toBe(2);
+
+    // Show add a tag select
+    expect(screen.getByText(/add a tag/i)).toBeInTheDocument();
+
+    // Show cancel button
+    expect(screen.getByRole('button', { name: /cancel/i })).toBeInTheDocument();
+
+    // Show save button
+    expect(screen.getByRole('button', { name: /save/i })).toBeInTheDocument();
+  });
+
+  it('should change to edit mode when click on `Manage tags` on component variant', async () => {
+    renderDrawer(stagedTagsId, { variant: 'component' });
+    expect(await screen.findByText('Taxonomy 1')).toBeInTheDocument();
+    const manageTagsButton = screen.getByRole('button', {
+      name: /manage tags/i,
+    });
+    fireEvent.click(manageTagsButton);
+
+    // Show delete tag buttons
+    expect(screen.getAllByRole('button', {
+      name: /delete/i,
+    }).length).toBe(2);
+
+    // Show add a tag select
+    expect(screen.getByText(/add a tag/i)).toBeInTheDocument();
+
+    // Show cancel button
+    expect(screen.getByRole('button', { name: /cancel/i })).toBeInTheDocument();
+
+    // Show save button
+    expect(screen.getByRole('button', { name: /save/i })).toBeInTheDocument();
+  });
+
+  it('should change to read mode when click on `Cancel` on drawer variant', async () => {
+    renderDrawer(stagedTagsId);
+    expect(await screen.findByText('Taxonomy 1')).toBeInTheDocument();
+    const editTagsButton = screen.getByRole('button', {
+      name: /edit tags/i,
+    });
+    fireEvent.click(editTagsButton);
+
+    const cancelButton = screen.getByRole('button', {
+      name: /cancel/i,
+    });
+    fireEvent.click(cancelButton);
+
+    // Not show delete tag buttons
+    expect(screen.queryByRole('button', { name: /delete/i })).not.toBeInTheDocument();
+
+    // Not show add a tag select
+    expect(screen.queryByText(/add a tag/i)).not.toBeInTheDocument();
+
+    // Not show cancel button
+    expect(screen.queryByRole('button', { name: /cancel/i })).not.toBeInTheDocument();
+
+    // Not show save button
+    expect(screen.queryByRole('button', { name: /save/i })).not.toBeInTheDocument();
+  });
+
+  it('should change to read mode when click on `Cancel` on component variant', async () => {
+    renderDrawer(stagedTagsId, { variant: 'component' });
+    expect(await screen.findByText('Taxonomy 1')).toBeInTheDocument();
+    const manageTagsButton = screen.getByRole('button', {
+      name: /manage tags/i,
+    });
+    fireEvent.click(manageTagsButton);
+
+    const cancelButton = screen.getByRole('button', {
+      name: /cancel/i,
+    });
+    fireEvent.click(cancelButton);
+
+    // Not show delete tag buttons
+    expect(screen.queryByRole('button', { name: /delete/i })).not.toBeInTheDocument();
+
+    // Not show add a tag select
+    expect(screen.queryByText(/add a tag/i)).not.toBeInTheDocument();
+
+    // Not show cancel button
+    expect(screen.queryByRole('button', { name: /cancel/i })).not.toBeInTheDocument();
+
+    // Not show save button
+    expect(screen.queryByRole('button', { name: /save/i })).not.toBeInTheDocument();
+  });
+
+  test.each([
+    {
+      variant: 'drawer',
+      editButton: /edit tags/i,
+    },
+    {
+      variant: 'component',
+      editButton: /manage tags/i,
+    },
+  ])(
+    'should hide "$editButton" button on $variant variant if not allowed to tag object',
+    async ({ variant, editButton }) => {
+      renderDrawer(stagedTagsId, { variant, readOnly: true });
+      expect(await screen.findByText('Taxonomy 1')).toBeInTheDocument();
+
+      expect(screen.queryByRole('button', { name: editButton })).not.toBeInTheDocument();
+      expect(screen.queryByRole('button', { name: /delete/i })).not.toBeInTheDocument();
+      expect(screen.queryByText(/add a tag/i)).not.toBeInTheDocument();
+      expect(screen.queryByRole('button', { name: /cancel/i })).not.toBeInTheDocument();
+      expect(screen.queryByRole('button', { name: /save/i })).not.toBeInTheDocument();
+    },
+  );
+
+  it('should test adding a content tag to the staged tags for a taxonomy', async () => {
+    renderDrawer(stagedTagsId);
+    expect(await screen.findByText('Taxonomy 1')).toBeInTheDocument();
+
+    // To edit mode
+    const editTagsButton = screen.getByRole('button', {
+      name: /edit tags/i,
+    });
+    fireEvent.click(editTagsButton);
+
+    // Click on "Add a tag" button to open dropdown
+    const addTagsButton = screen.getByText(messages.collapsibleAddTagsPlaceholderText.defaultMessage);
+    // Use `mouseDown` instead of `click` since the react-select didn't respond to `click`
+    fireEvent.mouseDown(addTagsButton);
+
+    // Tag 3 should only appear in dropdown selector, (i.e. the dropdown is open, since Tag 3 is not applied)
+    expect((await screen.findAllByText('Tag 3')).length).toBe(1);
+
+    // Click to check Tag 3
+    const tag3 = screen.getByText('Tag 3');
+    fireEvent.click(tag3);
+
+    // Check that Tag 3 has been staged, i.e. there should be 2 of them on the page
+    expect(screen.getAllByText('Tag 3').length).toBe(2);
+  });
+
+  it('should test removing a staged content from a taxonomy', async () => {
+    renderDrawer(stagedTagsId);
+    expect(await screen.findByText('Taxonomy 1')).toBeInTheDocument();
+
+    // To edit mode
+    const editTagsButton = screen.getByRole('button', {
+      name: /edit tags/i,
+    });
+    fireEvent.click(editTagsButton);
+
+    // Click on "Add a tag" button to open dropdown
+    const addTagsButton = screen.getByText(messages.collapsibleAddTagsPlaceholderText.defaultMessage);
+    // Use `mouseDown` instead of `click` since the react-select didn't respond to `click`
+    fireEvent.mouseDown(addTagsButton);
+
+    // Tag 3 should only appear in dropdown selector, (i.e. the dropdown is open, since Tag 3 is not applied)
+    expect((await screen.findAllByText('Tag 3')).length).toBe(1);
+
+    // Click to check Tag 3
+    const tag3 = screen.getByText('Tag 3');
+    fireEvent.click(tag3);
+
+    // Check that Tag 3 has been staged, i.e. there should be 2 of them on the page
+    expect(screen.getAllByText('Tag 3').length).toBe(2);
+
+    // Click it again to unstage it and confirm that there is only one on the page
+    fireEvent.click(tag3);
+    expect(screen.getAllByText('Tag 3').length).toBe(1);
+  });
+
+  it('should test clearing staged tags for a taxonomy', async () => {
+    const {
+      container,
+    } = renderDrawer(stagedTagsId);
+    expect(await screen.findByText('Taxonomy 1')).toBeInTheDocument();
+
+    // To edit mode
+    const editTagsButton = screen.getByRole('button', {
+      name: /edit tags/i,
+    });
+    fireEvent.click(editTagsButton);
+
+    // Click on "Add a tag" button to open dropdown
+    const addTagsButton = screen.getByText(/add a tag/i);
+    // Use `mouseDown` instead of `click` since the react-select didn't respond to `click`
+    fireEvent.mouseDown(addTagsButton);
+
+    // Tag 3 should only appear in dropdown selector, (i.e. the dropdown is open, since Tag 3 is not applied)
+    expect((await screen.findAllByText('Tag 3')).length).toBe(1);
+
+    // Click to check Tag 3
+    const tag3 = screen.getByText('Tag 3');
+    fireEvent.click(tag3);
+
+    // Check that Tag 3 has been staged, i.e. there should be 2 of them on the page
+    expect(screen.getAllByText('Tag 3').length).toBe(2);
+
+    const dropdown = container.querySelector('#content-tags-drawer > div:nth-child(1) > div');
+    const dropdownCancel = within(dropdown).getByRole('button', { name: /cancel/i });
+    fireEvent.click(dropdownCancel);
+
+    // Check that there are no more Tag 3 on the page, since the staged one is cleared
+    // and the dropdown has been closed
+    expect(screen.queryByText('Tag 3')).not.toBeInTheDocument();
+  });
+
+  it('should test adding global staged tags and cancel', async () => {
+    renderDrawer(stagedTagsId);
+    expect(await screen.findByText('Taxonomy 1')).toBeInTheDocument();
+
+    // To edit mode
+    const editTagsButton = screen.getByRole('button', {
+      name: /edit tags/i,
+    });
+    fireEvent.click(editTagsButton);
+
+    // Click on "Add a tag" button to open dropdown
+    const addTagsButton = screen.getByText(/add a tag/i);
+    // Use `mouseDown` instead of `click` since the react-select didn't respond to `click`
+    fireEvent.mouseDown(addTagsButton);
+
+    // Click to check Tag 3
+    const tag3 = await screen.findByText(/tag 3/i);
+    fireEvent.click(tag3);
+
+    // Click "Add tags" to save to global staged tags
+    const addTags = screen.getByRole('button', { name: /add tags/i });
+    fireEvent.click(addTags);
+
+    expect(screen.getByText(/tag 3/i)).toBeInTheDocument();
+
+    // Click "Cancel"
+    const cancelButton = screen.getByRole('button', { name: /cancel/i });
+    fireEvent.click(cancelButton);
+
+    expect(screen.queryByText(/tag 3/i)).not.toBeInTheDocument();
+  });
+
+  it('should test delete fetched tags and cancel', async () => {
+    renderDrawer(stagedTagsId);
+    expect(await screen.findByText('Taxonomy 1')).toBeInTheDocument();
+
+    // To edit mode
+    const editTagsButton = screen.getByRole('button', {
+      name: /edit tags/i,
+    });
+    fireEvent.click(editTagsButton);
+
+    // Delete the tag
+    const tag = await screen.findByText(/tag 2/i);
+    const deleteButton = within(tag).getByRole('button', {
+      name: /delete/i,
+    });
+    fireEvent.click(deleteButton);
+
+    expect(tag).not.toBeInTheDocument();
+
+    // Click "Cancel"
+    const cancelButton = screen.getByRole('button', { name: /cancel/i });
+    fireEvent.click(cancelButton);
+
+    expect(screen.getByText(/tag 2/i)).toBeInTheDocument();
+  });
+
+  it('should test delete global staged tags and cancel', async () => {
+    renderDrawer(stagedTagsId);
+    expect(await screen.findByText('Taxonomy 1')).toBeInTheDocument();
+
+    // To edit mode
+    const editTagsButton = screen.getByRole('button', {
+      name: /edit tags/i,
+    });
+    fireEvent.click(editTagsButton);
+
+    // Click on "Add a tag" button to open dropdown
+    const addTagsButton = screen.getByText(/add a tag/i);
+    // Use `mouseDown` instead of `click` since the react-select didn't respond to `click`
+    fireEvent.mouseDown(addTagsButton);
+
+    // Click to check Tag 3
+    const tag3 = await screen.findByText(/tag 3/i);
+    fireEvent.click(tag3);
+
+    // Click "Add tags" to save to global staged tags
+    const addTags = screen.getByRole('button', { name: /add tags/i });
+    fireEvent.click(addTags);
+
+    const tag = screen.getByText(/tag 3/i);
+    expect(screen.getByText(/tag 3/i)).toBeInTheDocument();
+
+    // Delete the tag
+    const deleteButton = within(tag).getByRole('button', {
+      name: /delete/i,
+    });
+    fireEvent.click(deleteButton);
+
+    expect(tag).not.toBeInTheDocument();
+
+    // Click "Cancel"
+    const cancelButton = screen.getByRole('button', { name: /cancel/i });
+    fireEvent.click(cancelButton);
+
+    expect(screen.queryByText(/tag 3/i)).not.toBeInTheDocument();
+  });
+
+  it('should test add removed fetched tags and cancel', async () => {
+    renderDrawer(stagedTagsId);
+    expect(await screen.findByText('Taxonomy 1')).toBeInTheDocument();
+
+    // To edit mode
+    const editTagsButton = screen.getByRole('button', {
+      name: /edit tags/i,
+    });
+    fireEvent.click(editTagsButton);
+
+    // Delete the tag
+    const tag = await screen.findByText(/tag 2/i);
+    const deleteButton = within(tag).getByRole('button', {
+      name: /delete/i,
+    });
+    fireEvent.click(deleteButton);
+
+    expect(tag).not.toBeInTheDocument();
+
+    // Click on "Add a tag" button to open dropdown
+    const addTagsButton = screen.getByText(/add a tag/i);
+    // Use `mouseDown` instead of `click` since the react-select didn't respond to `click`
+    fireEvent.mouseDown(addTagsButton);
+
+    // Click to check Tag 2
+    const tag2 = await screen.findByText(/tag 2/i);
+    fireEvent.click(tag2);
+
+    // Click "Add tags" to save to global staged tags
+    const addTags = screen.getByRole('button', { name: /add tags/i });
+    fireEvent.click(addTags);
+
+    expect(screen.getByText(/tag 2/i)).toBeInTheDocument();
+
+    // Click "Cancel"
+    const cancelButton = screen.getByRole('button', { name: /cancel/i });
+    fireEvent.click(cancelButton);
+
+    expect(screen.getByText(/tag 2/i)).toBeInTheDocument();
+  });
+
+  it('should call onClose when cancel is clicked', async () => {
+    renderDrawer(stagedTagsId, { onClose: mockOnClose });
+
+    const cancelButton = await screen.findByRole('button', {
+      name: /close/i,
+    });
+    expect(cancelButton).toBeInTheDocument();
+    fireEvent.click(cancelButton);
+
+    expect(mockOnClose).toHaveBeenCalled();
+  });
+
+  it('should call closeManageTagsDrawer when Escape key is pressed and no selectable box is active', () => {
+    const postMessageSpy = jest.spyOn(window.parent, 'postMessage');
+
+    const { container } = renderDrawer(stagedTagsId);
+
+    fireEvent.keyDown(container, {
+      key: 'Escape',
+    });
+
+    expect(postMessageSpy).toHaveBeenCalledWith('closeManageTagsDrawer', '*');
+
+    postMessageSpy.mockRestore();
+  });
+
+  it('should call `onClose` when Escape key is pressed and no selectable box is active', () => {
+    const { container } = renderDrawer(stagedTagsId, { onClose: mockOnClose });
+
+    fireEvent.keyDown(container, {
+      key: 'Escape',
+    });
+
+    expect(mockOnClose).toHaveBeenCalled();
+  });
+
+  it('should not call closeManageTagsDrawer when Escape key is pressed and a selectable box is active', () => {
+    const postMessageSpy = jest.spyOn(window.parent, 'postMessage');
+
+    const { container } = renderDrawer(stagedTagsId);
+
+    // Simulate that the selectable box is open by adding an element with the data attribute
+    const selectableBox = document.createElement('div');
+    selectableBox.setAttribute('data-selectable-box', 'taxonomy-tags');
+    document.body.appendChild(selectableBox);
+
+    fireEvent.keyDown(container, {
+      key: 'Escape',
+    });
+
+    expect(postMessageSpy).not.toHaveBeenCalled();
+
+    // Remove the added element
+    document.body.removeChild(selectableBox);
+
+    postMessageSpy.mockRestore();
+  });
+
+  it('should not call `onClose` when Escape key is pressed and a selectable box is active', () => {
+    const { container } = renderDrawer(stagedTagsId, { onClose: mockOnClose });
+
+    // Simulate that the selectable box is open by adding an element with the data attribute
+    const selectableBox = document.createElement('div');
+    selectableBox.setAttribute('data-selectable-box', 'taxonomy-tags');
+    document.body.appendChild(selectableBox);
+
+    fireEvent.keyDown(container, {
+      key: 'Escape',
+    });
+
+    expect(mockOnClose).not.toHaveBeenCalled();
+
+    // Remove the added element
+    document.body.removeChild(selectableBox);
+  });
+
+  it('should not call closeManageTagsDrawer when Escape key is pressed and container is blocked', () => {
+    const postMessageSpy = jest.spyOn(window.parent, 'postMessage');
+    const { container } = renderDrawer(stagedTagsId, { blockingSheet: true });
+    fireEvent.keyDown(container, {
+      key: 'Escape',
+    });
+
+    expect(postMessageSpy).not.toHaveBeenCalled();
+
+    postMessageSpy.mockRestore();
+  });
+
+  it('should not call `onClose` when Escape key is pressed and container is blocked', () => {
+    const { container } = renderDrawer(stagedTagsId, {
+      blockingSheet: true,
+      onClose: mockOnClose,
+    });
+    fireEvent.keyDown(container, {
+      key: 'Escape',
+    });
+
+    expect(mockOnClose).not.toHaveBeenCalled();
+  });
+
+  it('should call `setBlockingSheet` on add a tag', async () => {
+    renderDrawer(stagedTagsId, {
+      blockingSheet: true,
+      setBlockingSheet: mockSetBlockingSheet,
+    });
+    expect(await screen.findByText('Taxonomy 1')).toBeInTheDocument();
+
+    expect(mockSetBlockingSheet).toHaveBeenCalledWith(false);
+
+    // To edit mode
+    const editTagsButton = screen.getByRole('button', {
+      name: /edit tags/i,
+    });
+    fireEvent.click(editTagsButton);
+
+    // Click on "Add a tag" button to open dropdown
+    const addTagsButton = screen.getByText(/add a tag/i);
+    // Use `mouseDown` instead of `click` since the react-select didn't respond to `click`
+    fireEvent.mouseDown(addTagsButton);
+
+    // Click to check Tag 3
+    const tag3 = await screen.findByText(/tag 3/i);
+    fireEvent.click(tag3);
+
+    // Click "Add tags" to save to global staged tags
+    const addTags = screen.getByRole('button', { name: /add tags/i });
+    fireEvent.click(addTags);
+
+    expect(mockSetBlockingSheet).toHaveBeenCalledWith(true);
+  });
+
+  it('should call `setBlockingSheet` on delete a tag', async () => {
+    renderDrawer(stagedTagsId, {
+      blockingSheet: true,
+      setBlockingSheet: mockSetBlockingSheet,
+    });
+    expect(await screen.findByText('Taxonomy 1')).toBeInTheDocument();
+
+    expect(mockSetBlockingSheet).toHaveBeenCalledWith(false);
+
+    // To edit mode
+    const editTagsButton = screen.getByRole('button', {
+      name: /edit tags/i,
+    });
+    fireEvent.click(editTagsButton);
+
+    // Delete the tag
+    const tag = screen.getByText(/tag 2/i);
+    const deleteButton = within(tag).getByRole('button', {
+      name: /delete/i,
+    });
+    fireEvent.click(deleteButton);
+
+    expect(mockSetBlockingSheet).toHaveBeenCalledWith(true);
+  });
+
+  it('should call `updateTags` mutation on save', async () => {
+    const { axiosMock } = initializeMocks();
+    const url = getContentTaxonomyTagsApiUrl(stagedTagsId);
+    axiosMock.onPut(url).reply(200);
+    renderDrawer(stagedTagsId);
+    expect(await screen.findByText('Taxonomy 1')).toBeInTheDocument();
+    const editTagsButton = screen.getByRole('button', {
+      name: /edit tags/i,
+    });
+    fireEvent.click(editTagsButton);
+
+    const saveButton = screen.getByRole('button', {
+      name: /save/i,
+    });
+    fireEvent.click(saveButton);
+
+    await waitFor(() => expect(axiosMock.history.put[0].url).toEqual(url));
+  });
+
+  it('should taxonomies must be ordered', async () => {
+    renderDrawer(largeTagsId);
+    expect(await screen.findByText('Taxonomy 1')).toBeInTheDocument();
+
+    // First, taxonomies with content sorted by count implicit
+    // Later, empty taxonomies sorted by name
+    const expectedOrder = [
+      'Taxonomy 3', // 3 tags
+      'Taxonomy 1', // 2 tags
+      'Taxonomy 2', // 1 tag
+      '(A) Taxonomy 5',
+      '(B) Taxonomy 4',
+    ];
+
+    const taxonomies = screen.getAllByText(/.*Taxonomy.*/);
+    for (let i = 0; i !== taxonomies.length; i++) {
+      expect(taxonomies[i].textContent).toBe(expectedOrder[i]);
+    }
+  });
+
+  it('should not show "Other tags" section', async () => {
+    renderDrawer(stagedTagsId);
+    expect(await screen.findByText('Taxonomy 1')).toBeInTheDocument();
+
+    expect(screen.queryByText('Other tags')).not.toBeInTheDocument();
+  });
+
+  it('should show "Other tags" section', async () => {
+    renderDrawer(otherTagsId);
+    expect(await screen.findByText('Taxonomy 1')).toBeInTheDocument();
+
+    expect(screen.getByText('Other tags')).toBeInTheDocument();
+    expect(screen.getByText('Taxonomy 2')).toBeInTheDocument();
+    expect(screen.getByText('Tag 3')).toBeInTheDocument();
+    expect(screen.getByText('Tag 4')).toBeInTheDocument();
+  });
+
+  it('should test delete "Other tags" and cancel', async () => {
+    renderDrawer(otherTagsId);
+    expect(await screen.findByText('Taxonomy 2')).toBeInTheDocument();
+
+    // To edit mode
+    const editTagsButton = screen.getByRole('button', {
+      name: /edit tags/i,
+    });
+    fireEvent.click(editTagsButton);
+
+    // Delete the tag
+    const tag = screen.getByText(/tag 3/i);
+    const deleteButton = within(tag).getByRole('button', {
+      name: /delete/i,
+    });
+    fireEvent.click(deleteButton);
+
+    expect(tag).not.toBeInTheDocument();
+
+    // Click "Cancel"
+    const cancelButton = screen.getByRole('button', { name: /cancel/i });
+    fireEvent.click(cancelButton);
+
+    expect(screen.getByText(/tag 3/i)).toBeInTheDocument();
+  });
+
+  it('should show Language Taxonomy', async () => {
+    renderDrawer(languageWithTagsId);
+    expect(await screen.findByText('Languages')).toBeInTheDocument();
+  });
+
+  it('should hide Language Taxonomy', async () => {
+    renderDrawer(languageWithoutTagsId);
+    expect(await screen.findByText('Taxonomy 1')).toBeInTheDocument();
+    expect(screen.queryByText('Languages')).not.toBeInTheDocument();
+  });
+
+  it('should show empty drawer message', async () => {
+    renderDrawer(emptyTagsId);
+    expect(await screen.findByText(/to use tags, please or contact your administrator\./i)).toBeInTheDocument();
+    const enableButton = screen.getByRole('button', {
+      name: /enable a taxonomy/i,
+    });
+    fireEvent.click(enableButton);
+    expect(mockNavigate).toHaveBeenCalledWith('/taxonomies');
+  });
+});
diff --git a/src/content-tags-drawer/ContentTagsDrawer.tsx b/src/content-tags-drawer/ContentTagsDrawer.tsx
new file mode 100644
index 0000000000..da025f59f0
--- /dev/null
+++ b/src/content-tags-drawer/ContentTagsDrawer.tsx
@@ -0,0 +1,399 @@
+import React, { useContext, useEffect } from 'react';
+import {
+  Container,
+  Spinner,
+  Stack,
+  Button,
+  Toast,
+} from '@openedx/paragon';
+import { useIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
+import { useParams, useNavigate } from 'react-router-dom';
+import classNames from 'classnames';
+import messages from './messages';
+import ContentTagsCollapsible from './ContentTagsCollapsible';
+import Loading from '../generic/Loading';
+import { useCreateContentTagsDrawerContext } from './ContentTagsDrawerHelper';
+import { ContentTagsDrawerContext, ContentTagsDrawerSheetContext } from './common/context';
+
+interface TaxonomyListProps {
+  contentId: string;
+}
+
+const TaxonomyList = ({ contentId }: TaxonomyListProps) => {
+  const navigate = useNavigate();
+  const intl = useIntl();
+
+  const {
+    isTaxonomyListLoaded,
+    isContentTaxonomyTagsLoaded,
+    tagsByTaxonomy,
+    stagedContentTags,
+    collapsibleStates,
+  } = React.useContext(ContentTagsDrawerContext);
+
+  if (isTaxonomyListLoaded && isContentTaxonomyTagsLoaded) {
+    if (tagsByTaxonomy.length !== 0) {
+      return (
+        <div>
+          { tagsByTaxonomy.map((data) => (
+            <div key={data.id}>
+              <ContentTagsCollapsible
+                contentId={contentId}
+                taxonomyAndTagsData={data}
+                stagedContentTags={stagedContentTags[data.id] || []}
+                collapsibleState={collapsibleStates[data.id] || false}
+              />
+              <hr />
+            </div>
+          ))}
+        </div>
+      );
+    }
+
+    return (
+      <FormattedMessage
+        {...messages.emptyDrawerContent}
+        values={{
+          link: (
+            <Button
+              tabIndex={0}
+              size="inline"
+              variant="link"
+              className="text-info-500 p-0 enable-taxonomies-button"
+              onClick={() => navigate('/taxonomies')}
+            >
+              { intl.formatMessage(messages.emptyDrawerContentLink) }
+            </Button>
+          ),
+        }}
+      />
+    );
+  }
+
+  return <Loading />;
+};
+
+const ContentTagsDrawerTitle = () => {
+  const intl = useIntl();
+  const {
+    isContentDataLoaded,
+    contentName,
+  } = useContext(ContentTagsDrawerContext);
+
+  return (
+    <>
+      { isContentDataLoaded
+        ? <h2 className="h3 pl-2.5">{ contentName }</h2>
+        : (
+          <div className="d-flex justify-content-center align-items-center flex-column">
+            <Spinner
+              animation="border"
+              size="xl"
+              screenReaderText={intl.formatMessage(messages.loadingMessage)}
+            />
+          </div>
+        )}
+      <hr />
+    </>
+  );
+};
+
+interface ContentTagsDrawerVariantFooterProps {
+  onClose: () => void,
+  readOnly: boolean,
+}
+
+const ContentTagsDrawerVariantFooter = ({ onClose, readOnly }: ContentTagsDrawerVariantFooterProps) => {
+  const intl = useIntl();
+  const {
+    commitGlobalStagedTagsStatus,
+    commitGlobalStagedTags,
+    isEditMode,
+    toReadMode,
+    toEditMode,
+  } = useContext(ContentTagsDrawerContext);
+
+  return (
+    <Container
+      className="bg-white position-sticky p-3.5 box-shadow-up-2 tags-drawer-footer"
+    >
+      <div className="d-flex justify-content-end">
+        { commitGlobalStagedTagsStatus !== 'loading' ? (
+          <Stack direction="horizontal" gap={2}>
+            <Button
+              className="font-weight-bold tags-drawer-cancel-button"
+              variant="tertiary"
+              onClick={isEditMode
+                ? toReadMode
+                : onClose}
+            >
+              { intl.formatMessage(isEditMode
+                ? messages.tagsDrawerCancelButtonText
+                : messages.tagsDrawerCloseButtonText)}
+            </Button>
+            {!readOnly && (
+              <Button
+                className="rounded-0"
+                onClick={isEditMode
+                  ? commitGlobalStagedTags
+                  : toEditMode}
+              >
+                { intl.formatMessage(isEditMode
+                  ? messages.tagsDrawerSaveButtonText
+                  : messages.tagsDrawerEditTagsButtonText)}
+              </Button>
+            )}
+          </Stack>
+        )
+          : (
+            <Spinner
+              animation="border"
+              size="xl"
+              screenReaderText={intl.formatMessage(messages.loadingMessage)}
+            />
+          )}
+      </div>
+    </Container>
+  );
+};
+
+interface ContentTagsComponentVariantFooterProps {
+  readOnly?: boolean;
+}
+
+const ContentTagsComponentVariantFooter = ({ readOnly = false }: ContentTagsComponentVariantFooterProps) => {
+  const intl = useIntl();
+  const {
+    commitGlobalStagedTagsStatus,
+    commitGlobalStagedTags,
+    isEditMode,
+    toReadMode,
+    toEditMode,
+  } = useContext(ContentTagsDrawerContext);
+
+  return (
+    <div>
+      {isEditMode ? (
+        <div>
+          { commitGlobalStagedTagsStatus !== 'loading' ? (
+            <Stack direction="horizontal" gap={2}>
+              <Button
+                className="font-weight-bold tags-drawer-cancel-button"
+                variant="tertiary"
+                onClick={toReadMode}
+              >
+                {intl.formatMessage(messages.tagsDrawerCancelButtonText)}
+              </Button>
+              <Button
+                className="rounded-0"
+                onClick={commitGlobalStagedTags}
+                block
+              >
+                {intl.formatMessage(messages.tagsDrawerSaveButtonText)}
+              </Button>
+            </Stack>
+          ) : (
+            <div className="d-flex justify-content-center">
+              <Spinner
+                animation="border"
+                size="xl"
+                screenReaderText={intl.formatMessage(messages.loadingMessage)}
+              />
+            </div>
+          )}
+        </div>
+      ) : !readOnly && (
+        <Button
+          variant="outline-primary"
+          onClick={toEditMode}
+          block
+        >
+          {intl.formatMessage(messages.manageTagsButton)}
+        </Button>
+      )}
+    </div>
+  );
+};
+
+interface ContentTagsDrawerProps {
+  id?: string;
+  onClose?: () => void;
+  variant?: 'drawer' | 'component';
+  readOnly?: boolean;
+}
+
+/**
+ * Drawer with the functionality to show and manage tags in a certain content.
+ * It is used both in interfaces of this MFE and in edx-platform interfaces such as iframe.
+ * - If you want to use it as an iframe, the component obtains the `contentId` from the url parameters.
+ *   Functions to close the drawer are handled internally.
+ *   TODO: We can delete this method when is no longer used on edx-platform.
+ * - If you want to use it as react component, you need to pass the content id and the close functions
+ *   through the component parameters.
+ */
+const ContentTagsDrawer = ({
+  id,
+  onClose,
+  variant = 'drawer',
+  readOnly = false,
+}: ContentTagsDrawerProps) => {
+  const intl = useIntl();
+  // TODO: We can delete 'params' when the iframe is no longer used on edx-platform
+  const params = useParams();
+  const contentId = id ?? params.contentId;
+
+  if (contentId === undefined) {
+    throw new Error('Error: contentId cannot be null.');
+  }
+
+  const context = useCreateContentTagsDrawerContext(contentId, !readOnly);
+  const { blockingSheet } = useContext(ContentTagsDrawerSheetContext);
+
+  const {
+    showToastAfterSave,
+    toReadMode,
+    commitGlobalStagedTagsStatus,
+    isTaxonomyListLoaded,
+    isContentTaxonomyTagsLoaded,
+    stagedContentTags,
+    collapsibleStates,
+    toastMessage,
+    closeToast,
+    setCollapsibleToInitalState,
+    otherTaxonomies,
+  } = context;
+
+  let onCloseDrawer: () => void;
+  if (variant === 'drawer') {
+    if (onClose === undefined) {
+      onCloseDrawer = () => {
+        // "*" allows communication with any origin
+        window.parent.postMessage('closeManageTagsDrawer', '*');
+      };
+    } else {
+      onCloseDrawer = onClose;
+    }
+  }
+
+  useEffect(() => {
+    if (variant === 'drawer') {
+      const handleEsc = (event) => {
+        /* Close drawer when ESC-key is pressed and selectable dropdown box not open */
+        const selectableBoxOpen = document.querySelector('[data-selectable-box="taxonomy-tags"]');
+        if (event.key === 'Escape' && !selectableBoxOpen && !blockingSheet) {
+          onCloseDrawer();
+        }
+      };
+      document.addEventListener('keydown', handleEsc);
+
+      return () => {
+        document.removeEventListener('keydown', handleEsc);
+      };
+    }
+    return () => {};
+  }, [blockingSheet]);
+
+  useEffect(() => {
+    /* istanbul ignore next */
+    if (commitGlobalStagedTagsStatus === 'success') {
+      showToastAfterSave();
+      toReadMode();
+    }
+  }, [commitGlobalStagedTagsStatus]);
+
+  // First call of the initial collapsible states
+  React.useEffect(() => {
+    setCollapsibleToInitalState();
+  }, [isTaxonomyListLoaded, isContentTaxonomyTagsLoaded]);
+
+  const renderFooter = () => {
+    if (isTaxonomyListLoaded && isContentTaxonomyTagsLoaded) {
+      switch (variant) {
+        case 'drawer':
+          return <ContentTagsDrawerVariantFooter onClose={onCloseDrawer} readOnly={readOnly} />;
+        case 'component':
+          return <ContentTagsComponentVariantFooter readOnly={readOnly} />;
+        default:
+          return null;
+      }
+    }
+    return null;
+  };
+
+  return (
+    <ContentTagsDrawerContext.Provider value={context}>
+      <div
+        id="content-tags-drawer"
+        className={classNames(
+          'mt-1 tags-drawer d-flex flex-column justify-content-between pt-3',
+          {
+            'min-vh-100': variant === 'drawer',
+          },
+        )}
+      >
+        <Container
+          size="xl"
+          className={classNames(
+            {
+              'p-0': variant === 'component',
+            },
+          )}
+        >
+          {variant === 'drawer' && (
+            <ContentTagsDrawerTitle />
+          )}
+          <Container
+            className={classNames(
+              {
+                'p-0': variant === 'component',
+              },
+            )}
+          >
+            {variant === 'drawer' && (
+              <p className="h4 text-gray-500 font-weight-bold">
+                {intl.formatMessage(messages.headerSubtitle)}
+              </p>
+            )}
+            <TaxonomyList contentId={contentId} />
+            {otherTaxonomies.length !== 0 && (
+              <div>
+                <p className="h4 text-gray-500 font-weight-bold">
+                  {intl.formatMessage(messages.otherTagsHeader)}
+                </p>
+                <p className="other-description text-gray-500">
+                  {intl.formatMessage(messages.otherTagsDescription)}
+                </p>
+                { isTaxonomyListLoaded && isContentTaxonomyTagsLoaded && (
+                  otherTaxonomies.map((data) => (
+                    <div key={data.id}>
+                      <ContentTagsCollapsible
+                        contentId={contentId}
+                        taxonomyAndTagsData={data}
+                        stagedContentTags={stagedContentTags[data.id] || []}
+                        collapsibleState={collapsibleStates[data.id] || false}
+                      />
+                      <hr />
+                    </div>
+                  ))
+                )}
+              </div>
+            )}
+          </Container>
+        </Container>
+        {renderFooter()}
+        {/* istanbul ignore next */
+          toastMessage && (
+            <Toast
+              show
+              onClose={closeToast}
+            >
+              {toastMessage}
+            </Toast>
+          )
+        }
+      </div>
+    </ContentTagsDrawerContext.Provider>
+  );
+};
+
+export default ContentTagsDrawer;
diff --git a/src/content-tags-drawer/ContentTagsDrawerHelper.jsx b/src/content-tags-drawer/ContentTagsDrawerHelper.jsx
new file mode 100644
index 0000000000..49b4d28532
--- /dev/null
+++ b/src/content-tags-drawer/ContentTagsDrawerHelper.jsx
@@ -0,0 +1,442 @@
+// @ts-check
+import React from 'react';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { cloneDeep } from 'lodash';
+import { useContentData, useContentTaxonomyTagsData, useContentTaxonomyTagsUpdater } from './data/apiHooks';
+import { useTaxonomyList } from '../taxonomy/data/apiHooks';
+import { extractOrgFromContentId, languageExportId } from './utils';
+import messages from './messages';
+import { ContentTagsDrawerSheetContext } from './common/context';
+
+/** @typedef {import("./data/types.js").Tag} ContentTagData */
+/** @typedef {import("./data/types.js").StagedTagData} StagedTagData */
+/** @typedef {import("./data/types.js").TagsInTaxonomy} TagsInTaxonomy */
+/** @typedef {import("./common/context").ContentTagsDrawerContextData} ContentTagsDrawerContextData */
+
+/**
+ * Helper hook for *creating* a `ContentTagsDrawerContext`.
+ * Handles the context and all the underlying logic for the ContentTagsDrawer component.
+ *
+ * To *use* the context, just use `useContext(ContentTagsDrawerContext)`
+ * @param {string} contentId
+ * @param {boolean} canTagObject
+ * @returns {ContentTagsDrawerContextData}
+ */
+export const useCreateContentTagsDrawerContext = (contentId, canTagObject) => {
+  const intl = useIntl();
+  const org = extractOrgFromContentId(contentId);
+
+  const { setBlockingSheet } = React.useContext(ContentTagsDrawerSheetContext);
+
+  // True if the drawer is on edit mode.
+  const [isEditMode, setIsEditMode] = React.useState(false);
+  // This stores the tags added on the add tags Select in all taxonomies.
+  const [stagedContentTags, setStagedContentTags] = React.useState({});
+  // When a staged tags on a taxonomy is commitet then is saved on this map.
+  const [globalStagedContentTags, setGlobalStagedContentTags] = React.useState({});
+  // This stores fetched tags deleted by the user.
+  const [globalStagedRemovedContentTags, setGlobalStagedRemovedContentTags] = React.useState({});
+  // Merges fetched tags, global staged tags and global removed staged tags
+  const [tagsByTaxonomy, setTagsByTaxonomy] = React.useState(/** @type TagsInTaxonomy[] */ ([]));
+  // Other taxonomies that the user doesn't have permissions
+  const [otherTaxonomies, setOtherTaxonomies] = React.useState(/** @type TagsInTaxonomy[] */ ([]));
+  // This stores taxonomy collapsible states (open/close).
+  const [collapsibleStates, setColapsibleStates] = React.useState({});
+  // Message to show a toast in the content drawer.
+  const [toastMessage, setToastMessage] = React.useState(/** @type string | undefined */ (undefined));
+  // Mutation to update tags
+  const updateTags = useContentTaxonomyTagsUpdater(contentId);
+
+  // Fetch from database
+  const { data: contentData, isSuccess: isContentDataLoaded } = useContentData(contentId);
+  const {
+    data: contentTaxonomyTagsData,
+    isSuccess: isContentTaxonomyTagsLoaded,
+  } = useContentTaxonomyTagsData(contentId);
+  const { data: taxonomyListData, isSuccess: isTaxonomyListLoaded } = useTaxonomyList(org);
+
+  // Tags fetched from database
+  const { fetchedTaxonomies, fetchedOtherTaxonomies } = React.useMemo(() => {
+    const sortTaxonomies = (taxonomiesList) => {
+      const taxonomiesWithData = taxonomiesList.filter(
+        (t) => t.contentTags.length !== 0,
+      );
+
+      // Count implicit tags per taxonomy.
+      // TODO This count is also calculated individually
+      // in ContentTagsCollapsible. It should only be calculated once.
+      const tagsCountBytaxonomy = {};
+      taxonomiesWithData.forEach((tax) => {
+        tagsCountBytaxonomy[tax.id] = new Set(
+          tax.contentTags.flatMap(item => item.lineage),
+        ).size;
+      });
+
+      // Sort taxonomies with data by implicit count
+      const sortedTaxonomiesWithData = taxonomiesWithData.sort(
+        (a, b) => tagsCountBytaxonomy[b.id] - tagsCountBytaxonomy[a.id],
+      );
+
+      // Empty taxonomies sorted by name.
+      // Since the query returns sorted by name,
+      // it is not necessary to do another sorting here.
+      const emptyTaxonomies = taxonomiesList.filter(
+        (t) => t.contentTags.length === 0,
+      );
+
+      return [...sortedTaxonomiesWithData, ...emptyTaxonomies];
+    };
+
+    if (taxonomyListData && contentTaxonomyTagsData) {
+      // Initialize list of content tags in taxonomies to populate
+      const taxonomiesList = taxonomyListData.results.map((taxonomy) => ({
+        ...taxonomy,
+        canTagObject: taxonomy.canTagObject && canTagObject,
+        contentTags: /** @type {ContentTagData[]} */([]),
+      }));
+
+      const contentTaxonomies = contentTaxonomyTagsData.taxonomies;
+
+      const otherTaxonomiesList = [];
+
+      // eslint-disable-next-line array-callback-return
+      contentTaxonomies.map((contentTaxonomyTags) => {
+        const contentTaxonomy = taxonomiesList.find((taxonomy) => taxonomy.id === contentTaxonomyTags.taxonomyId);
+        if (contentTaxonomy) {
+          contentTaxonomy.contentTags = contentTaxonomyTags.tags;
+        } else {
+          otherTaxonomiesList.push({
+            canChangeTaxonomy: false,
+            canDeleteTaxonomy: false,
+            canTagObject: false,
+            contentTags: contentTaxonomyTags.tags,
+            enabled: true,
+            exportId: contentTaxonomyTags.exportId,
+            id: contentTaxonomyTags.taxonomyId,
+            name: contentTaxonomyTags.name,
+            visibleToAuthors: true,
+          });
+        }
+      });
+
+      // Delete Language taxonomy if is empty
+      const filteredTaxonomies = taxonomiesList.filter(
+        (taxonomy) => taxonomy.exportId !== languageExportId
+          || taxonomy.contentTags.length !== 0,
+      );
+
+      return {
+        fetchedTaxonomies: sortTaxonomies(filteredTaxonomies),
+        fetchedOtherTaxonomies: otherTaxonomiesList,
+      };
+    }
+    return {
+      fetchedTaxonomies: [],
+      fetchedOtherTaxonomies: [],
+    };
+  }, [taxonomyListData, contentTaxonomyTagsData]);
+
+  // Add a content tags to the staged tags for a taxonomy
+  const addStagedContentTag = React.useCallback((taxonomyId, addedTag) => {
+    setStagedContentTags(prevStagedContentTags => {
+      const updatedStagedContentTags = {
+        ...prevStagedContentTags,
+        [taxonomyId]: [...(prevStagedContentTags[taxonomyId] ?? []), addedTag],
+      };
+      return updatedStagedContentTags;
+    });
+  }, [setStagedContentTags]);
+
+  // Remove a content tag from the staged tags for a taxonomy
+  const removeStagedContentTag = React.useCallback((taxonomyId, tagValue) => {
+    setStagedContentTags(prevStagedContentTags => ({
+      ...prevStagedContentTags,
+      [taxonomyId]: prevStagedContentTags[taxonomyId].filter((t) => t.value !== tagValue),
+    }));
+  }, [setStagedContentTags]);
+
+  // Remove a content tag from the global staged tags for a taxonomy
+  const removeGlobalStagedContentTag = React.useCallback((taxonomyId, tagValue) => {
+    setGlobalStagedContentTags(prevContentTags => ({
+      ...prevContentTags,
+      [taxonomyId]: prevContentTags[taxonomyId].filter((t) => t.value !== tagValue),
+    }));
+  }, [setGlobalStagedContentTags]);
+
+  // Add a content tags to the removed tags for a taxonomy
+  const addRemovedContentTag = React.useCallback((taxonomyId, addedTag) => {
+    setGlobalStagedRemovedContentTags(prevContentTags => {
+      const updatedStagedContentTags = {
+        ...prevContentTags,
+        [taxonomyId]: [...(prevContentTags[taxonomyId] ?? []), addedTag],
+      };
+      return updatedStagedContentTags;
+    });
+  }, [setGlobalStagedRemovedContentTags]);
+
+  // Remove a content tag from the removed tags for a taxonomy
+  const deleteRemovedContentTag = React.useCallback((taxonomyId, tagValue) => {
+    setGlobalStagedRemovedContentTags(prevContentTags => ({
+      ...prevContentTags,
+      [taxonomyId]: prevContentTags[taxonomyId].filter((t) => t !== tagValue),
+    }));
+  }, [setGlobalStagedRemovedContentTags]);
+
+  // Sets the staged content tags for taxonomy to the provided list of tags
+  const setStagedTags = React.useCallback((taxonomyId, tagsList) => {
+    setStagedContentTags(prevStagedContentTags => ({ ...prevStagedContentTags, [taxonomyId]: tagsList }));
+  }, [setStagedContentTags]);
+
+  // Open a collapsible of a taxonomy
+  /* istanbul ignore next */
+  const openCollapsible = React.useCallback((taxonomyId) => {
+    setColapsibleStates(prevStates => ({
+      ...prevStates,
+      [taxonomyId]: true,
+    }));
+  }, [setColapsibleStates]);
+
+  // Close a collapsible of a taxonomy
+  /* istanbul ignore next */
+  const closeCollapsible = React.useCallback((taxonomyId) => {
+    setColapsibleStates(prevStates => ({
+      ...prevStates,
+      [taxonomyId]: false,
+    }));
+  }, [setColapsibleStates]);
+
+  const openAllCollapsible = React.useCallback(() => {
+    const updatedState = {};
+    fetchedTaxonomies.forEach((taxonomy) => {
+      updatedState[taxonomy.id] = true;
+    });
+    fetchedOtherTaxonomies.forEach((taxonomy) => {
+      updatedState[taxonomy.id] = true;
+    });
+    setColapsibleStates(updatedState);
+  }, [fetchedTaxonomies, setColapsibleStates]);
+
+  // Set initial state of collapsible based on content tags
+  const setCollapsibleToInitalState = React.useCallback(() => {
+    const updatedState = {};
+    fetchedTaxonomies.forEach((taxonomy) => {
+      // Taxonomy with content tags must be open
+      updatedState[taxonomy.id] = taxonomy.contentTags.length !== 0;
+    });
+    fetchedOtherTaxonomies.forEach((taxonomy) => {
+      // Taxonomy with content tags must be open
+      updatedState[taxonomy.id] = taxonomy.contentTags.length !== 0;
+    });
+    setColapsibleStates(updatedState);
+  }, [fetchedTaxonomies, setColapsibleStates]);
+
+  // Changes the drawer mode to edit
+  const toEditMode = React.useCallback(() => {
+    setIsEditMode(true);
+    openAllCollapsible();
+  }, [setIsEditMode, openAllCollapsible]);
+
+  // Changes the drawer mode to read and clears all staged tags and states.
+  const toReadMode = React.useCallback(() => {
+    setIsEditMode(false);
+    setStagedContentTags({});
+    setGlobalStagedContentTags({});
+    setGlobalStagedRemovedContentTags({});
+    setCollapsibleToInitalState();
+  }, [
+    setIsEditMode,
+    setStagedContentTags,
+    setGlobalStagedContentTags,
+    setGlobalStagedRemovedContentTags,
+    setCollapsibleToInitalState,
+  ]);
+
+  // Count added and removed tags
+  /* istanbul ignore next */
+  const countTags = React.useCallback(() => {
+    const tagsAddedList = Object.values(globalStagedContentTags);
+    const tagsRemovedList = Object.values(globalStagedRemovedContentTags);
+
+    const tagsAdded = tagsAddedList.length === 1 ? tagsAddedList[0].length : tagsAddedList.reduce(
+      /* istanbul ignore next */
+      (acc, curr) => acc + curr.length,
+      0,
+    );
+    const tagsRemoved = tagsRemovedList.length === 1 ? tagsRemovedList[0].length : tagsRemovedList.reduce(
+      /* istanbul ignore next */
+      (acc, curr) => acc + curr.length,
+      0,
+    );
+    return {
+      tagsAdded,
+      tagsRemoved,
+    };
+  }, [globalStagedContentTags, globalStagedRemovedContentTags]);
+
+  // Build toast message and show toast after save drawer.
+  /* istanbul ignore next */
+  const showToastAfterSave = React.useCallback(() => {
+    const { tagsAdded, tagsRemoved } = countTags();
+
+    let message;
+    if (tagsAdded && tagsRemoved) {
+      message = `${intl.formatMessage(
+        messages.tagsSaveToastTextTypeAdded,
+        { tagsAdded },
+      )
+      } ${
+        intl.formatMessage(
+          messages.tagsSaveToastTextTypeRemoved,
+          { tagsRemoved },
+        )
+      }`;
+    } else if (tagsAdded) {
+      message = intl.formatMessage(
+        messages.tagsSaveToastTextTypeAdded,
+        { tagsAdded },
+      );
+    } else if (tagsRemoved) {
+      message = intl.formatMessage(
+        messages.tagsSaveToastTextTypeRemoved,
+        { tagsRemoved },
+      );
+    }
+    setToastMessage(message);
+  }, [setToastMessage, countTags]);
+
+  // Close the toast
+  const closeToast = React.useCallback(() => setToastMessage(undefined), [setToastMessage]);
+
+  let contentName = '';
+  if (isContentDataLoaded && contentData) {
+    if ('displayName' in contentData) {
+      contentName = contentData.displayName;
+    } else {
+      contentName = contentData.courseDisplayNameWithDefault;
+    }
+  }
+
+  // Updates `tagsByTaxonomy` merged fetched tags, global staged tags
+  // and global removed staged tags.
+  React.useEffect(() => {
+    const mergedTags = cloneDeep(fetchedTaxonomies).reduce((acc, obj) => (
+      { ...acc, [obj.id]: obj }
+    ), {});
+
+    const mergedOtherTaxonomies = cloneDeep(fetchedOtherTaxonomies).reduce((acc, obj) => (
+      { ...acc, [obj.id]: obj }
+    ), {});
+
+    Object.keys(globalStagedContentTags).forEach((taxonomyId) => {
+      if (mergedTags[taxonomyId]) {
+        // TODO test this
+        // Filter out applied tags that should become implicit because a child tag was committed
+        const stagedLineages = globalStagedContentTags[taxonomyId].map((t) => t.lineage.slice(0, -1)).flat();
+        const fetchedTags = mergedTags[taxonomyId].contentTags.filter((t) => !stagedLineages.includes(t.value));
+
+        mergedTags[taxonomyId].contentTags = [
+          ...fetchedTags,
+          ...globalStagedContentTags[taxonomyId],
+        ];
+      }
+    });
+
+    Object.keys(globalStagedRemovedContentTags).forEach((taxonomyId) => {
+      if (mergedTags[taxonomyId]) {
+        mergedTags[taxonomyId].contentTags = mergedTags[taxonomyId].contentTags.filter(
+          (t) => !globalStagedRemovedContentTags[taxonomyId].includes(t.value),
+        );
+      } else if (mergedOtherTaxonomies[taxonomyId]) {
+        mergedOtherTaxonomies[taxonomyId].contentTags = mergedOtherTaxonomies[taxonomyId].contentTags.filter(
+          (t) => !globalStagedRemovedContentTags[taxonomyId].includes(t.value),
+        );
+      }
+    });
+
+    // It is constructed this way to maintain the order
+    // of the list `fetchedTaxonomies`
+    const mergedTagsArray = fetchedTaxonomies.map(obj => mergedTags[obj.id]);
+
+    setTagsByTaxonomy(mergedTagsArray);
+    setOtherTaxonomies(Object.values(mergedOtherTaxonomies));
+
+    if (setBlockingSheet) {
+      const areChangesInTags = () => {
+        // It is calculated in this way, because there are cases in which
+        // there are keys in the map, but they contain empty lists
+        // (e.g. add a tag, and remove the same tag later).
+
+        const tagsAddedList = Object.values(globalStagedContentTags);
+        const tagsRemovedList = Object.values(globalStagedRemovedContentTags);
+
+        if (tagsAddedList.some(tags => tags.length > 0)) {
+          return true;
+        }
+        if (tagsRemovedList.some(tags => tags.length > 0)) {
+          return true;
+        }
+        return false;
+      };
+
+      if (areChangesInTags()) {
+        setBlockingSheet(true);
+      } else {
+        setBlockingSheet(false);
+      }
+    }
+  }, [
+    fetchedTaxonomies,
+    fetchedOtherTaxonomies,
+    globalStagedContentTags,
+    globalStagedRemovedContentTags,
+  ]);
+
+  const commitGlobalStagedTags = React.useCallback(() => {
+    const tagsData = [];
+    tagsByTaxonomy.forEach((tags) => {
+      tagsData.push({
+        taxonomy: tags.id,
+        tags: tags.contentTags.map(t => t.value),
+      });
+    });
+    otherTaxonomies.forEach((tags) => {
+      tagsData.push({
+        taxonomy: tags.id,
+        tags: tags.contentTags.map(t => t.value),
+      });
+    });
+    // @ts-ignore
+    updateTags.mutate({ tagsData });
+  }, [tagsByTaxonomy]);
+
+  return {
+    stagedContentTags,
+    addStagedContentTag,
+    removeStagedContentTag,
+    removeGlobalStagedContentTag,
+    addRemovedContentTag,
+    deleteRemovedContentTag,
+    setStagedTags,
+    globalStagedContentTags,
+    globalStagedRemovedContentTags,
+    setGlobalStagedContentTags,
+    commitGlobalStagedTags,
+    commitGlobalStagedTagsStatus: updateTags.status,
+    isContentDataLoaded,
+    isContentTaxonomyTagsLoaded,
+    isTaxonomyListLoaded,
+    contentName,
+    tagsByTaxonomy,
+    isEditMode,
+    toEditMode,
+    toReadMode,
+    collapsibleStates,
+    openCollapsible,
+    closeCollapsible,
+    toastMessage,
+    showToastAfterSave,
+    closeToast,
+    setCollapsibleToInitalState,
+    otherTaxonomies,
+  };
+};
diff --git a/src/content-tags-drawer/ContentTagsDrawerSheet.jsx b/src/content-tags-drawer/ContentTagsDrawerSheet.jsx
new file mode 100644
index 0000000000..25db618649
--- /dev/null
+++ b/src/content-tags-drawer/ContentTagsDrawerSheet.jsx
@@ -0,0 +1,49 @@
+// @ts-check
+import React, { useMemo, useState } from 'react';
+import { Sheet } from '@openedx/paragon';
+import PropTypes from 'prop-types';
+import ContentTagsDrawer from './ContentTagsDrawer';
+import { ContentTagsDrawerSheetContext } from './common/context';
+
+const ContentTagsDrawerSheet = ({ id, onClose, showSheet }) => {
+  const [blockingSheet, setBlockingSheet] = useState(false);
+
+  const context = useMemo(() => ({
+    blockingSheet, setBlockingSheet,
+  }), [blockingSheet, setBlockingSheet]);
+
+  // ContentTagsDrawerSheet is only used when editing Courses/Course Units,
+  // so we assume it's ok to edit the object tags too.
+  const readOnly = false;
+
+  return (
+    <ContentTagsDrawerSheetContext.Provider value={context}>
+      <Sheet
+        position="right"
+        show={showSheet}
+        onClose={onClose}
+        blocking={blockingSheet}
+      >
+        <ContentTagsDrawer
+          id={id}
+          onClose={onClose}
+          readOnly={readOnly}
+        />
+      </Sheet>
+    </ContentTagsDrawerSheetContext.Provider>
+  );
+};
+
+ContentTagsDrawerSheet.propTypes = {
+  id: PropTypes.string,
+  onClose: PropTypes.func,
+  showSheet: PropTypes.bool,
+};
+
+ContentTagsDrawerSheet.defaultProps = {
+  id: undefined,
+  onClose: undefined,
+  showSheet: false,
+};
+
+export default ContentTagsDrawerSheet;
diff --git a/src/content-tags-drawer/ContentTagsDropDownSelector.jsx b/src/content-tags-drawer/ContentTagsDropDownSelector.jsx
new file mode 100644
index 0000000000..cce94ca3dc
--- /dev/null
+++ b/src/content-tags-drawer/ContentTagsDropDownSelector.jsx
@@ -0,0 +1,360 @@
+// @ts-check
+import React, { useEffect, useState, useCallback } from 'react';
+import {
+  Icon,
+  Spinner,
+  Button,
+} from '@openedx/paragon';
+import { useIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
+import { ArrowDropDown, ArrowDropUp, Add } from '@openedx/paragon/icons';
+import PropTypes from 'prop-types';
+
+import SelectableBox from '../editors/sharedComponents/SelectableBox';
+import { useTaxonomyTagsData } from './data/apiHooks';
+import messages from './messages';
+
+const HighlightedText = ({ text, highlight }) => {
+  if (!highlight) {
+    return <span>{text}</span>;
+  }
+
+  const parts = text.split(new RegExp(`(${highlight})`, 'gi'));
+  return (
+    <span>
+      {parts.map((part, index) => (
+        // eslint-disable-next-line react/no-array-index-key -- using index because part is not unique
+        <React.Fragment key={index}>
+          {part.toLowerCase() === highlight.toLowerCase() ? <b>{part}</b> : part}
+        </React.Fragment>
+      ))}
+    </span>
+  );
+};
+
+HighlightedText.propTypes = {
+  text: PropTypes.string.isRequired,
+  highlight: PropTypes.string,
+};
+
+HighlightedText.defaultProps = {
+  highlight: '',
+};
+
+const ContentTagsDropDownSelector = ({
+  taxonomyId, level, lineage, appliedContentTagsTree, stagedContentTagsTree, searchTerm,
+}) => {
+  const intl = useIntl();
+
+  // This object represents the states of the dropdowns on this level
+  // The keys represent the index of the dropdown with
+  // the value true (open) false (closed)
+  const [dropdownStates, setDropdownStates] = useState(/** type Record<string, boolean> */ {});
+  const isOpen = (tagValue) => dropdownStates[tagValue];
+
+  const [numPages, setNumPages] = useState(1);
+  const parentTagValue = lineage.length ? decodeURIComponent(lineage[lineage.length - 1]) : null;
+  const { hasMorePages, tagPages } = useTaxonomyTagsData(taxonomyId, parentTagValue, numPages, searchTerm);
+
+  const [prevSearchTerm, setPrevSearchTerm] = useState(searchTerm);
+
+  // Reset the page and tags state when search term changes
+  // and store search term to compare
+  if (prevSearchTerm !== searchTerm) {
+    setPrevSearchTerm(searchTerm);
+    setNumPages(1);
+  }
+
+  useEffect(() => {
+    if (tagPages.isSuccess) {
+      if (searchTerm) {
+        const expandAll = tagPages.data.reduce(
+          (acc, tagData) => ({
+            ...acc,
+            [tagData.value]: !!tagData.childCount,
+          }),
+          {},
+        );
+        setDropdownStates(expandAll);
+      } else {
+        setDropdownStates({});
+      }
+    }
+  }, [searchTerm, tagPages.isSuccess]);
+
+  const clickAndEnterHandler = (tagValue) => {
+    // This flips the state of the dropdown at index false (closed) -> true (open)
+    // and vice versa. Initially they are undefined which is falsy.
+    setDropdownStates({ ...dropdownStates, [tagValue]: !dropdownStates[tagValue] });
+  };
+
+  const isImplicit = (tag) => {
+    // Traverse the applied tags tree using the lineage
+    let appliedTraversal = appliedContentTagsTree;
+    lineage.forEach(t => {
+      appliedTraversal = appliedTraversal[t]?.children || {};
+    });
+    const isAppliedImplicit = (appliedTraversal[tag.value] && !appliedTraversal[tag.value].explicit);
+
+    // Traverse the staged tags tree using the lineage
+    let stagedTraversal = stagedContentTagsTree;
+    lineage.forEach(t => {
+      stagedTraversal = stagedTraversal[t]?.children || {};
+    });
+    const isStagedImplicit = (stagedTraversal[tag.value] && !stagedTraversal[tag.value].explicit);
+
+    return isAppliedImplicit || isStagedImplicit || false;
+  };
+
+  const isApplied = (tag) => {
+    // Traverse the applied tags tree using the lineage
+    let appliedTraversal = appliedContentTagsTree;
+    lineage.forEach(t => {
+      appliedTraversal = appliedTraversal[t]?.children || {};
+    });
+    return !!appliedTraversal[tag.value];
+  };
+
+  const isStagedExplicit = (tag) => {
+    // Traverse the staged tags tree using the lineage
+    let stagedTraversal = stagedContentTagsTree;
+    lineage.forEach(t => {
+      stagedTraversal = stagedTraversal[t]?.children || {};
+    });
+    return stagedTraversal[tag.value] && stagedTraversal[tag.value].explicit;
+  };
+
+  // Returns the state of the tag as a string: [Unchecked/Implicit/Checked]
+  const getTagState = (tag) => {
+    if (isApplied(tag) || isStagedExplicit(tag)) {
+      return intl.formatMessage(messages.taxonomyTagChecked);
+    }
+
+    if (isImplicit(tag)) {
+      return intl.formatMessage(messages.taxonomyTagImplicit);
+    }
+
+    return intl.formatMessage(messages.taxonomyTagUnchecked);
+  };
+
+  const isTopOfTagTreeDropdown = (index) => index === 0 && level === 0;
+
+  const loadMoreTags = useCallback(() => {
+    setNumPages((x) => x + 1);
+  }, []);
+
+  const handleKeyBoardNav = (e, hasChildren) => {
+    const keyPressed = e.code;
+    const currentElement = e.target;
+    const encapsulator = currentElement.closest('.dropdown-selector-tag-encapsulator');
+
+    // Get tag value with full lineage, this is URI encoded
+    const tagValueWithLineage = currentElement.querySelector('.pgn__form-checkbox-input')?.value;
+    // Extract and decode the actual tag value
+    let tagValue = tagValueWithLineage.split(',').slice(-1)[0];
+    tagValue = tagValue ? decodeURIComponent(tagValue) : tagValue;
+
+    if (keyPressed === 'ArrowRight') {
+      e.preventDefault();
+      if (tagValue && !isOpen(tagValue)) {
+        clickAndEnterHandler(tagValue);
+      }
+    } else if (keyPressed === 'ArrowLeft') {
+      e.preventDefault();
+      if (tagValue && isOpen(tagValue)) {
+        clickAndEnterHandler(tagValue);
+      } else {
+        // Handles case of jumping out of subtags to previous parent tag
+        const prevParentTagEncapsulator = encapsulator?.parentNode.closest('.dropdown-selector-tag-encapsulator');
+        const prevParentTag = prevParentTagEncapsulator?.querySelector('.dropdown-selector-tag-actions');
+        prevParentTag?.focus();
+      }
+    } else if (keyPressed === 'ArrowUp') {
+      const prevSubTags = encapsulator?.previousElementSibling?.querySelectorAll('.dropdown-selector-tag-actions');
+      const prevSubTag = prevSubTags && prevSubTags[prevSubTags.length - 1];
+      const prevTag = encapsulator?.previousElementSibling?.querySelector('.dropdown-selector-tag-actions');
+
+      if (prevSubTag) {
+        // Handles case of jumping in to subtags
+        prevSubTag.focus();
+      } else if (prevTag) {
+        // Handles case of navigating to previous tag on same level
+        prevTag.focus();
+      } else {
+        // Handles case of jumping out of subtags to previous parent tag
+        const prevParentTagEncapsulator = encapsulator?.parentNode.closest('.dropdown-selector-tag-encapsulator');
+        const prevParentTag = prevParentTagEncapsulator?.querySelector('.dropdown-selector-tag-actions');
+        prevParentTag?.focus();
+      }
+    } else if (keyPressed === 'ArrowDown') {
+      const subTagEncapsulator = encapsulator?.querySelector('.dropdown-selector-tag-encapsulator');
+      const nextSubTag = subTagEncapsulator?.querySelector('.dropdown-selector-tag-actions');
+      const nextTag = encapsulator?.nextElementSibling?.querySelector('.dropdown-selector-tag-actions');
+
+      if (nextSubTag) {
+        // Handles case of jumping into subtags
+        nextSubTag.focus();
+      } else if (nextTag) {
+        // Handles case of navigating to next tag on same level
+        nextTag?.focus();
+      } else {
+        // Handles case of jumping out of subtags to next focusable parent tag
+        let nextParentTagEncapsulator = encapsulator?.parentNode?.closest('.dropdown-selector-tag-encapsulator');
+
+        while (nextParentTagEncapsulator) {
+          const nextParentTag = nextParentTagEncapsulator.nextElementSibling?.querySelector(
+            '.dropdown-selector-tag-actions',
+          );
+          if (nextParentTag) {
+            nextParentTag.focus();
+            break;
+          }
+          nextParentTagEncapsulator = nextParentTagEncapsulator.parentNode.closest(
+            '.dropdown-selector-tag-encapsulator',
+          );
+        }
+      }
+    } else if (keyPressed === 'Enter') {
+      e.preventDefault();
+      if (hasChildren && tagValue) {
+        clickAndEnterHandler(tagValue);
+      } else {
+        const checkbox = currentElement.querySelector('.taxonomy-tags-selectable-box');
+        checkbox.click();
+      }
+    } else if (keyPressed === 'Space') {
+      e.preventDefault();
+      const checkbox = currentElement.querySelector('.taxonomy-tags-selectable-box');
+      checkbox.click();
+    }
+  };
+
+  return (
+    <div style={{ marginLeft: `${level * 1 }rem` }}>
+      {tagPages.isLoading ? (
+        <div className="d-flex justify-content-center align-items-center flex-row">
+          <Spinner
+            animation="border"
+            size="xl"
+            screenReaderText={intl.formatMessage(messages.loadingTagsDropdownMessage)}
+          />
+        </div>
+      ) : null }
+      {tagPages.isError ? 'Error...' : null /* TODO: show a proper error message */}
+
+      {tagPages.data?.map((tagData, i) => (
+        <div key={tagData.value} className="mt-1 ml-1 dropdown-selector-tag-encapsulator">
+          <div
+            className="d-flex flex-row"
+            style={{
+              minHeight: '44px',
+            }}
+          >
+            {/* The tabIndex and onKeyDown are needed to implement custom keyboard navigation */}
+            {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
+            <div
+              className="d-flex dropdown-selector-tag-actions"
+              // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+              tabIndex={isTopOfTagTreeDropdown(i) ? 0 : -1} // Only enable tab into top of dropdown tree to set focus
+              onKeyDown={(e) => handleKeyBoardNav(e, tagData.childCount > 0)}
+              aria-label={
+                intl.formatMessage(
+                  (isTopOfTagTreeDropdown(i)
+                    ? messages.taxonomyTagActionInstructionsAriaLabel
+                    : messages.taxonomyTagActionsAriaLabel),
+                  { tag: tagData.value, tagState: getTagState(tagData) },
+                )
+              }
+            >
+              <SelectableBox
+                inputHidden={false}
+                type="checkbox"
+                className="d-flex align-items-center taxonomy-tags-selectable-box"
+                data-selectable-box="taxonomy-tags"
+                value={[...lineage, tagData.value].map(t => encodeURIComponent(t)).join(',')}
+                isIndeterminate={isApplied(tagData) || isImplicit(tagData)}
+                disabled={isApplied(tagData) || isImplicit(tagData)}
+                tabIndex="-1"
+              >
+                <HighlightedText text={tagData.value} highlight={searchTerm} />
+              </SelectableBox>
+              { tagData.childCount > 0
+                && (
+                  <div className="d-flex align-items-center taxonomy-tags-arrow-drop-down">
+                    <Icon
+                      src={isOpen(tagData.value) ? ArrowDropUp : ArrowDropDown}
+                      onClick={() => clickAndEnterHandler(tagData.value)}
+                      tabIndex={-1}
+                    />
+                  </div>
+                )}
+            </div>
+
+          </div>
+
+          { tagData.childCount > 0 && isOpen(tagData.value) && (
+            <ContentTagsDropDownSelector
+              taxonomyId={taxonomyId}
+              level={level + 1}
+              lineage={[...lineage, tagData.value]}
+              appliedContentTagsTree={appliedContentTagsTree}
+              stagedContentTagsTree={stagedContentTagsTree}
+              searchTerm={searchTerm}
+            />
+          )}
+
+        </div>
+      ))}
+
+      { hasMorePages
+        ? (
+          <div>
+            <Button
+              tabIndex={0}
+              variant="tertiary"
+              iconBefore={Add}
+              onClick={loadMoreTags}
+              className="mb-2 ml-1 taxonomy-tags-load-more-button px-0 text-info-500"
+            >
+              <FormattedMessage {...messages.loadMoreTagsButtonText} />
+            </Button>
+          </div>
+        )
+        : null}
+
+      { tagPages.data.length === 0 && !tagPages.isLoading && (
+        <div className="d-flex justify-content-center muted-text">
+          { searchTerm
+            ? <FormattedMessage {...messages.noTagsFoundMessage} values={{ searchTerm }} />
+            : <FormattedMessage {...messages.noTagsInTaxonomyMessage} />}
+        </div>
+      )}
+
+    </div>
+  );
+};
+
+ContentTagsDropDownSelector.defaultProps = {
+  lineage: [],
+  searchTerm: '',
+};
+
+ContentTagsDropDownSelector.propTypes = {
+  taxonomyId: PropTypes.number.isRequired,
+  level: PropTypes.number.isRequired,
+  lineage: PropTypes.arrayOf(PropTypes.string),
+  appliedContentTagsTree: PropTypes.objectOf(
+    PropTypes.shape({
+      explicit: PropTypes.bool.isRequired,
+      children: PropTypes.shape({}).isRequired,
+    }).isRequired,
+  ).isRequired,
+  stagedContentTagsTree: PropTypes.objectOf(
+    PropTypes.shape({
+      explicit: PropTypes.bool.isRequired,
+      children: PropTypes.shape({}).isRequired,
+    }).isRequired,
+  ).isRequired,
+  searchTerm: PropTypes.string,
+};
+
+export default ContentTagsDropDownSelector;
diff --git a/src/content-tags-drawer/ContentTagsDropDownSelector.scss b/src/content-tags-drawer/ContentTagsDropDownSelector.scss
new file mode 100644
index 0000000000..963e8072b0
--- /dev/null
+++ b/src/content-tags-drawer/ContentTagsDropDownSelector.scss
@@ -0,0 +1,39 @@
+.taxonomy-tags-arrow-drop-down {
+  cursor: pointer;
+}
+
+.taxonomy-tags-load-more-button {
+  flex: 1;
+
+  &:hover {
+    background-color: transparent;
+    color: $info-900 !important;
+  }
+}
+
+.pgn__selectable_box.taxonomy-tags-selectable-box {
+  box-shadow: none;
+  padding: 0;
+
+  // Override indeterminate [-] (implicit) checkbox styles to match checked checkbox styles
+  // In the future, this customizability should be implemented in paragon instead
+  input.pgn__form-checkbox-input {
+    &:indeterminate {
+      @extend :checked; /* stylelint-disable-line scss/at-extend-no-missing-placeholder */
+    }
+  }
+}
+
+.pgn__selectable_box.taxonomy-tags-selectable-box:disabled,
+.pgn__selectable_box.taxonomy-tags-selectable-box[disabled] {
+  opacity: 1 !important;
+}
+
+.pgn__selectable_box-active.taxonomy-tags-selectable-box {
+  outline: none !important;
+}
+
+.dropdown-selector-tag-actions:focus-visible {
+  outline: solid 2px $info-900;
+  border-radius: 4px;
+}
diff --git a/src/content-tags-drawer/ContentTagsDropDownSelector.test.jsx b/src/content-tags-drawer/ContentTagsDropDownSelector.test.jsx
new file mode 100644
index 0000000000..08cc6e9bd5
--- /dev/null
+++ b/src/content-tags-drawer/ContentTagsDropDownSelector.test.jsx
@@ -0,0 +1,309 @@
+import React from 'react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import {
+  act,
+  render,
+  waitFor,
+  fireEvent,
+} from '@testing-library/react';
+
+import ContentTagsDropDownSelector from './ContentTagsDropDownSelector';
+import { useTaxonomyTagsData } from './data/apiHooks';
+
+jest.mock('./data/apiHooks', () => ({
+  useTaxonomyTagsData: jest.fn(() => ({
+    hasMorePages: false,
+    tagPages: {
+      isLoading: true,
+      isError: false,
+      data: [],
+    },
+  })),
+}));
+
+const data = {
+  taxonomyId: 123,
+  level: 0,
+  tagsTree: {},
+  appliedContentTagsTree: {},
+  stagedContentTagsTree: {},
+};
+
+const ContentTagsDropDownSelectorComponent = ({
+  taxonomyId, level, lineage, tagsTree, searchTerm, appliedContentTagsTree, stagedContentTagsTree,
+}) => (
+  <IntlProvider locale="en" messages={{}}>
+    <ContentTagsDropDownSelector
+      taxonomyId={taxonomyId}
+      level={level}
+      lineage={lineage}
+      tagsTree={tagsTree}
+      searchTerm={searchTerm}
+      appliedContentTagsTree={appliedContentTagsTree}
+      stagedContentTagsTree={stagedContentTagsTree}
+    />
+  </IntlProvider>
+);
+
+ContentTagsDropDownSelectorComponent.defaultProps = {
+  lineage: [],
+  searchTerm: '',
+};
+
+ContentTagsDropDownSelectorComponent.propTypes = ContentTagsDropDownSelector.propTypes;
+
+describe('<ContentTagsDropDownSelector />', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  async function getComponent(updatedData) {
+    const componentData = (!updatedData ? data : updatedData);
+
+    return render(
+      <ContentTagsDropDownSelectorComponent
+        taxonomyId={componentData.taxonomyId}
+        level={componentData.level}
+        lineage={componentData.lineage}
+        tagsTree={componentData.tagsTree}
+        searchTerm={componentData.searchTerm}
+        appliedContentTagsTree={componentData.appliedContentTagsTree}
+        stagedContentTagsTree={componentData.stagedContentTagsTree}
+      />,
+    );
+  }
+
+  it('should render taxonomy tags drop down selector loading with spinner', async () => {
+    await act(async () => {
+      const { getByRole } = await getComponent();
+      const spinner = getByRole('status');
+      expect(spinner.textContent).toEqual('Loading tags'); // Uses <Spinner />
+    });
+  });
+
+  it('should render taxonomy tags drop down selector with no sub tags', async () => {
+    useTaxonomyTagsData.mockReturnValue({
+      hasMorePages: false,
+      tagPages: {
+        isLoading: false,
+        isError: false,
+        data: [{
+          value: 'Tag 1',
+          externalId: null,
+          childCount: 0,
+          depth: 0,
+          parentValue: null,
+          id: 12345,
+          subTagsUrl: null,
+        }],
+      },
+    });
+
+    await act(async () => {
+      const { container, getByText } = await getComponent();
+
+      await waitFor(() => {
+        expect(getByText('Tag 1')).toBeInTheDocument();
+        expect(container.getElementsByClassName('taxonomy-tags-arrow-drop-down').length).toBe(0);
+      });
+    });
+  });
+
+  it('should render taxonomy tags drop down selector with sub tags', async () => {
+    useTaxonomyTagsData.mockReturnValue({
+      hasMorePages: false,
+      tagPages: {
+        isLoading: false,
+        isError: false,
+        data: [{
+          value: 'Tag 2',
+          externalId: null,
+          childCount: 1,
+          depth: 0,
+          parentValue: null,
+          id: 12345,
+          subTagsUrl: 'http://localhost:18010/api/content_tagging/v1/taxonomies/4/tags/?parent_tag=Tag%202',
+        }],
+      },
+    });
+
+    await act(async () => {
+      const { container, getByText } = await getComponent();
+
+      await waitFor(() => {
+        expect(getByText('Tag 2')).toBeInTheDocument();
+        expect(container.getElementsByClassName('taxonomy-tags-arrow-drop-down').length).toBe(1);
+      });
+    });
+  });
+
+  it('should expand on click taxonomy tags drop down selector with sub tags', async () => {
+    useTaxonomyTagsData.mockReturnValueOnce({
+      hasMorePages: false,
+      tagPages: {
+        isLoading: false,
+        isError: false,
+        data: [{
+          value: 'Tag 2',
+          externalId: null,
+          childCount: 1,
+          depth: 0,
+          parentValue: null,
+          id: 12345,
+          subTagsUrl: 'http://localhost:18010/api/content_tagging/v1/taxonomies/4/tags/?parent_tag=Tag%202',
+        }],
+      },
+    });
+
+    await act(async () => {
+      const dataWithTagsTree = {
+        ...data,
+        tagsTree: {
+          'Tag 3': {
+            explicit: false,
+            children: {},
+          },
+        },
+      };
+      const { container, getByText } = await getComponent(dataWithTagsTree);
+      await waitFor(() => {
+        expect(getByText('Tag 2')).toBeInTheDocument();
+        expect(container.getElementsByClassName('taxonomy-tags-arrow-drop-down').length).toBe(1);
+      });
+
+      // Mock useTaxonomyTagsData again since it gets called in the recursive call
+      useTaxonomyTagsData.mockReturnValueOnce({
+        hasMorePages: false,
+        tagPages: {
+          isLoading: false,
+          isError: false,
+          data: [{
+            value: 'Tag 3',
+            externalId: null,
+            childCount: 0,
+            depth: 1,
+            parentValue: 'Tag 2',
+            id: 12346,
+            subTagsUrl: null,
+          }],
+        },
+      });
+
+      // Expand the dropdown to see the subtags selectors
+      const expandToggle = container.querySelector('.taxonomy-tags-arrow-drop-down span');
+      fireEvent.click(expandToggle);
+
+      await waitFor(() => {
+        expect(getByText('Tag 3')).toBeInTheDocument();
+      });
+    });
+  });
+
+  it('should render taxonomy tags drop down selector and change search term', async () => {
+    useTaxonomyTagsData.mockReturnValueOnce({
+      hasMorePages: false,
+      tagPages: {
+        isLoading: false,
+        isError: false,
+        isSuccess: true,
+        data: [{
+          value: 'Tag 1',
+          externalId: null,
+          childCount: 0,
+          depth: 0,
+          parentValue: null,
+          id: 12345,
+          subTagsUrl: null,
+        }],
+      },
+    });
+
+    const initalSearchTerm = 'test 1';
+    await act(async () => {
+      const { rerender } = await getComponent({ ...data, searchTerm: initalSearchTerm });
+
+      await waitFor(() => {
+        expect(useTaxonomyTagsData).toBeCalledWith(data.taxonomyId, null, 1, initalSearchTerm);
+      });
+
+      const updatedSearchTerm = 'test 2';
+      rerender(<ContentTagsDropDownSelectorComponent
+        key={`selector-${data.taxonomyId}`}
+        taxonomyId={data.taxonomyId}
+        level={data.level}
+        tagsTree={data.tagsTree}
+        searchTerm={updatedSearchTerm}
+        appliedContentTagsTree={{}}
+        stagedContentTagsTree={{}}
+      />);
+
+      await waitFor(() => {
+        expect(useTaxonomyTagsData).toBeCalledWith(data.taxonomyId, null, 1, updatedSearchTerm);
+      });
+
+      // Clean search term
+      const cleanSearchTerm = '';
+      rerender(<ContentTagsDropDownSelectorComponent
+        key={`selector-${data.taxonomyId}`}
+        taxonomyId={data.taxonomyId}
+        level={data.level}
+        tagsTree={data.tagsTree}
+        searchTerm={cleanSearchTerm}
+        appliedContentTagsTree={{}}
+        stagedContentTagsTree={{}}
+      />);
+
+      await waitFor(() => {
+        expect(useTaxonomyTagsData).toBeCalledWith(data.taxonomyId, null, 1, cleanSearchTerm);
+      });
+    });
+  });
+
+  it('should render "noTag" message if search doesnt return taxonomies', async () => {
+    useTaxonomyTagsData.mockReturnValueOnce({
+      hasMorePages: false,
+      tagPages: {
+        isLoading: false,
+        isError: false,
+        isSuccess: true,
+        data: [],
+      },
+    });
+
+    const searchTerm = 'uncommon search term';
+    await act(async () => {
+      const { getByText } = await getComponent({ ...data, searchTerm });
+
+      await waitFor(() => {
+        expect(useTaxonomyTagsData).toBeCalledWith(data.taxonomyId, null, 1, searchTerm);
+      });
+
+      const message = `No tags found with the search term "${searchTerm}"`;
+      expect(getByText(message)).toBeInTheDocument();
+    });
+  });
+
+  it('should render "noTagsInTaxonomy" message if taxonomy is empty', async () => {
+    useTaxonomyTagsData.mockReturnValueOnce({
+      hasMorePages: false,
+      tagPages: {
+        isLoading: false,
+        isError: false,
+        isSuccess: true,
+        data: [],
+      },
+    });
+
+    const searchTerm = '';
+    await act(async () => {
+      const { getByText } = await getComponent({ ...data, searchTerm });
+
+      await waitFor(() => {
+        expect(useTaxonomyTagsData).toBeCalledWith(data.taxonomyId, null, 1, searchTerm);
+      });
+
+      const message = 'No tags in this taxonomy yet';
+      expect(getByText(message)).toBeInTheDocument();
+    });
+  });
+});
diff --git a/src/content-tags-drawer/TagOutlineIcon.tsx b/src/content-tags-drawer/TagOutlineIcon.tsx
new file mode 100644
index 0000000000..7f9d439254
--- /dev/null
+++ b/src/content-tags-drawer/TagOutlineIcon.tsx
@@ -0,0 +1,20 @@
+const TagOutlineIcon = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height="24px"
+    viewBox="0 0 24 24"
+    width="24px"
+    fill="currentColor"
+    role="img"
+    focusable="false"
+    aria-hidden="true"
+    {...props}
+  >
+    <path
+      d="m21.41 11.58-9-9C12.05 2.22 11.55 2 11 2H4c-1.1 0-2 .9-2 2v7c0 .55.22 1.05.59 1.42l9 9c.36.36.86.58 1.41.58s1.05-.22 1.41-.59l7-7c.37-.36.59-.86.59-1.41s-.23-1.06-.59-1.42zM13 20.01 4 11V4h7v-.01l9 9-7 7.02z"
+    />
+    <circle cx="6.5" cy="6.5" r="1.5" />
+  </svg>
+);
+
+export default TagOutlineIcon;
diff --git a/src/content-tags-drawer/TagsTree.jsx b/src/content-tags-drawer/TagsTree.jsx
new file mode 100644
index 0000000000..50ce614de4
--- /dev/null
+++ b/src/content-tags-drawer/TagsTree.jsx
@@ -0,0 +1,168 @@
+// @ts-check
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Icon, Stack, IconButton } from '@openedx/paragon';
+import { Tag, Close } from '@openedx/paragon/icons';
+import messages from './messages';
+import { ContentTagsDrawerContext } from './common/context';
+
+const TagComponent = ({
+  value,
+  canDelete,
+  explicit,
+  removeTagHandler,
+  lineage,
+}) => {
+  const intl = useIntl();
+
+  const handleClick = React.useCallback(() => {
+    if (explicit && canDelete) {
+      removeTagHandler(lineage.join(','));
+    }
+  }, [explicit, lineage, canDelete, removeTagHandler]);
+
+  return (
+    <Stack direction="horizontal">
+      <Icon src={Tag} className="mr-1 pb-1.5 text-info-500" />
+      {value}
+      {explicit && canDelete && (
+        <IconButton
+          isActive
+          key={value}
+          src={Close}
+          iconAs={Icon}
+          alt={intl.formatMessage(messages.tagsDeleteAltText)}
+          onClick={handleClick}
+          variant="light"
+          className="tags-tree-delete-button ml-2 text-gray-600"
+        />
+      )}
+    </Stack>
+  );
+};
+
+TagComponent.propTypes = {
+  value: PropTypes.string.isRequired,
+  canDelete: PropTypes.bool,
+  explicit: PropTypes.bool,
+  lineage: PropTypes.arrayOf(PropTypes.string).isRequired,
+  removeTagHandler: PropTypes.func,
+};
+
+TagComponent.defaultProps = {
+  removeTagHandler: undefined,
+  canDelete: false,
+  explicit: false,
+};
+
+/**
+ * Component that renders Tags under a Taxonomy in the nested tree format.
+ *
+ * Example:
+ *
+ * {
+ *   "Science and Research": {
+ *     explicit: false,
+ *     canDeleteObjecttag: true,
+ *     children: {
+ *       "Genetics Subcategory": {
+ *         explicit: false,
+ *         canDeleteObjecttag: true,
+ *         children: {
+ *           "DNA Sequencing": {
+ *             explicit: true,
+ *             canDeleteObjecttag: false,
+ *             children: {}
+ *           }
+ *         }
+ *       },
+ *       "Molecular, Cellular, and Microbiology": {
+ *         explicit: false,
+ *         canDeleteObjecttag: false,
+ *         children: {
+ *           "Virology": {
+ *             explicit: true,
+ *             canDeleteObjecttag: true,
+ *             children: {}
+ *           }
+ *         }
+ *       }
+ *     }
+ *   }
+ * };
+ *
+ * @param {Object} props - The component props.
+ * @param {Object} props.tags - Array of taxonomy tags that are applied to the content.
+ * @param {number} props.rootDepth - Depth of the parent tag (root), used to render tabs for the tree.
+ * @param {string} props.parentKey - Key of the parent tag.
+ * @param {string[]} props.lineage - Lineage of the tag.
+ * @param {(
+ *   tagSelectableBoxValue: string,
+ *   checked: boolean
+ * ) => void} props.removeTagHandler - Function that is called when removing tags from the tree.
+ */
+const TagsTree = ({
+  tags,
+  rootDepth,
+  parentKey,
+  lineage,
+  removeTagHandler,
+}) => {
+  const { isEditMode } = useContext(ContentTagsDrawerContext);
+
+  if (Object.keys(tags).length === 0) {
+    return null;
+  }
+
+  // Used to Generate tabs for the parents of this tree
+  const tabsNumberArray = Array.from({ length: rootDepth }, (_, index) => index + 1);
+
+  return (
+    <div className="tags-tree" key={parentKey}>
+      {Object.keys(tags).map((key) => (
+        <div className="mt-1.5 mb-1.5" key={key}>
+          <div className="d-flex pl-2.5" key={key}>
+            {
+              tabsNumberArray.map((index) => <span className="d-inline-block ml-4" key={`${key}-${index}`} />)
+            }
+            <TagComponent
+              value={key}
+              canDelete={isEditMode && tags[key].canDeleteObjecttag}
+              explicit={tags[key].explicit}
+              lineage={[...lineage, encodeURIComponent(key)]}
+              removeTagHandler={removeTagHandler}
+            />
+          </div>
+          { tags[key].children
+            && (
+              <TagsTree
+                tags={tags[key].children}
+                rootDepth={rootDepth + 1}
+                parentKey={key}
+                lineage={[...lineage, encodeURIComponent(key)]}
+                removeTagHandler={removeTagHandler}
+              />
+            )}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+TagsTree.propTypes = {
+  tags: PropTypes.shape({}).isRequired,
+  parentKey: PropTypes.string,
+  rootDepth: PropTypes.number,
+  lineage: PropTypes.arrayOf(PropTypes.string),
+  removeTagHandler: PropTypes.func,
+};
+
+TagsTree.defaultProps = {
+  rootDepth: 0,
+  parentKey: undefined,
+  lineage: [],
+  removeTagHandler: undefined,
+};
+
+export default TagsTree;
diff --git a/src/content-tags-drawer/TagsTree.scss b/src/content-tags-drawer/TagsTree.scss
new file mode 100644
index 0000000000..ebb5920ca0
--- /dev/null
+++ b/src/content-tags-drawer/TagsTree.scss
@@ -0,0 +1,21 @@
+.tags-tree {
+  .tags-tree-delete-button {
+    width: 1rem;
+    height: 1rem;
+
+    svg {
+      padding: .3rem;
+    }
+
+    &:hover {
+      svg {
+        color: $gray-900;
+      }
+    }
+
+    &:focus-visible {
+      border: 2px solid;
+      border-color: $gray-900;
+    }
+  }
+}
diff --git a/src/content-tags-drawer/TagsTree.test.jsx b/src/content-tags-drawer/TagsTree.test.jsx
new file mode 100644
index 0000000000..ed53111fd2
--- /dev/null
+++ b/src/content-tags-drawer/TagsTree.test.jsx
@@ -0,0 +1,60 @@
+import React, { useMemo } from 'react';
+import {
+  render, screen, within, fireEvent,
+} from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import TagsTree from './TagsTree';
+import { contentTaxonomyTagsTreeMock } from './__mocks__';
+import { ContentTagsDrawerContext } from './common/context';
+
+const mockRemoveTagHandler = jest.fn();
+
+const RootWrapper = (params) => {
+  const context = useMemo(() => ({
+    isEditMode: params.isEditMode,
+  }), []);
+  return (
+    <ContentTagsDrawerContext.Provider value={context}>
+      <IntlProvider locale="en" messages={{}}>
+        <TagsTree {...params} />
+      </IntlProvider>
+    </ContentTagsDrawerContext.Provider>
+  );
+};
+
+describe('<TagsTree>', () => {
+  it('should render component and tags correctly', () => {
+    render(<RootWrapper tags={contentTaxonomyTagsTreeMock} />);
+    expect(screen.getByText('hierarchical taxonomy tag 1')).toBeInTheDocument();
+    expect(screen.getByText('hierarchical taxonomy tag 2.13')).toBeInTheDocument();
+    expect(screen.getByText('hierarchical taxonomy tag 3.4.50')).toBeInTheDocument();
+  });
+
+  it('should not show delete buttons on read mode', () => {
+    render(
+      <RootWrapper
+        tags={contentTaxonomyTagsTreeMock}
+      />,
+    );
+    expect(screen.queryByRole('button', {
+      name: /delete/i,
+    })).not.toBeInTheDocument();
+  });
+
+  it('should call removeTagHandler when "x" clicked on explicit tag', async () => {
+    render(
+      <RootWrapper
+        tags={contentTaxonomyTagsTreeMock}
+        removeTagHandler={mockRemoveTagHandler}
+        isEditMode
+      />,
+    );
+
+    const view = screen.getByText(/hierarchical taxonomy tag 1\.7\.59/i);
+    const xButton = within(view).getByRole('button', {
+      name: /delete/i,
+    });
+    fireEvent.click(xButton);
+    expect(mockRemoveTagHandler).toHaveBeenCalled();
+  });
+});
diff --git a/src/content-tags-drawer/__mocks__/contentDataMock.js b/src/content-tags-drawer/__mocks__/contentDataMock.js
new file mode 100644
index 0000000000..292efc38d0
--- /dev/null
+++ b/src/content-tags-drawer/__mocks__/contentDataMock.js
@@ -0,0 +1,63 @@
+module.exports = {
+  id: 'block-v1:SampleTaxonomyOrg1+STC1+2023_1+type@vertical+block@7f47fe2dbcaf47c5a071671c741fe1ab',
+  displayName: 'Unit 1.1.2',
+  category: 'vertical',
+  hasChildren: true,
+  editedOn: 'Nov 12, 2023 at 09:53 UTC',
+  published: false,
+  publishedOn: null,
+  studioUrl: '/container/block-v1:SampleTaxonomyOrg1+STC1+2023_1+type@vertical+block@7f47fe2dbcaf47c5a071671c741fe1ab',
+  releasedToStudents: false,
+  releaseDate: null,
+  visibilityState: 'needs_attention',
+  hasExplicitStaffLock: false,
+  start: '2030-01-01T00:00:00Z',
+  graded: false,
+  dueDate: '',
+  due: null,
+  relativeWeeksDue: null,
+  format: null,
+  courseGraders: [
+    'Homework',
+    'Lab',
+    'Midterm Exam',
+    'Final Exam',
+  ],
+  hasChanges: true,
+  actions: {
+    deletable: true,
+    draggable: true,
+    childAddable: true,
+    duplicable: true,
+  },
+  explanatoryMessage: null,
+  groupAccess: {},
+  userPartitions: [
+    {
+      id: 50,
+      name: 'Enrollment Track Groups',
+      scheme: 'enrollment_track',
+      groups: [
+        {
+          id: 1,
+          name: 'Audit',
+          selected: false,
+          deleted: false,
+        },
+      ],
+    },
+  ],
+  showCorrectness: 'always',
+  discussionEnabled: true,
+  ancestorHasStaffLock: false,
+  taxonomyTagsWidgetUrl: 'http://localhost:2001/tagging/components/widget/',
+  staffOnlyMessage: false,
+  enableCopyPasteUnits: true,
+  useTaggingTaxonomyListPage: true,
+  hasPartitionGroupComponents: false,
+  userPartitionInfo: {
+    selectablePartitions: [],
+    selectedPartitionIndex: -1,
+    selectedGroupsLabel: '',
+  },
+};
diff --git a/src/content-tags-drawer/__mocks__/contentTaxonomyTagsCountMock.js b/src/content-tags-drawer/__mocks__/contentTaxonomyTagsCountMock.js
new file mode 100644
index 0000000000..3ce4d2050a
--- /dev/null
+++ b/src/content-tags-drawer/__mocks__/contentTaxonomyTagsCountMock.js
@@ -0,0 +1,3 @@
+module.exports = {
+  'block-v1:SampleTaxonomyOrg1+STC1+2023_1+type@vertical+block@aaf8b8eb86b54281aeeab12499d2cb0b': 20,
+};
diff --git a/src/content-tags-drawer/__mocks__/contentTaxonomyTagsMock.js b/src/content-tags-drawer/__mocks__/contentTaxonomyTagsMock.js
new file mode 100644
index 0000000000..fd8214f5cd
--- /dev/null
+++ b/src/content-tags-drawer/__mocks__/contentTaxonomyTagsMock.js
@@ -0,0 +1,50 @@
+module.exports = {
+  'block-v1:SampleTaxonomyOrg1+STC1+2023_1+type@vertical+block@aaf8b8eb86b54281aeeab12499d2cb0b': {
+    taxonomies: [
+      {
+        name: 'FlatTaxonomy',
+        taxonomyId: 3,
+        canTagObject: true,
+        tags: [
+          {
+            value: 'flat taxonomy tag 3856',
+            lineage: [
+              'flat taxonomy tag 3856',
+            ],
+          },
+        ],
+      },
+      {
+        name: 'HierarchicalTaxonomy',
+        taxonomyId: 4,
+        canTagObject: true,
+        tags: [
+          {
+            value: 'hierarchical taxonomy tag 1.7.59',
+            lineage: [
+              'hierarchical taxonomy tag 1',
+              'hierarchical taxonomy tag 1.7',
+              'hierarchical taxonomy tag 1.7.59',
+            ],
+          },
+          {
+            value: 'hierarchical taxonomy tag 2.13.46',
+            lineage: [
+              'hierarchical taxonomy tag 2',
+              'hierarchical taxonomy tag 2.13',
+              'hierarchical taxonomy tag 2.13.46',
+            ],
+          },
+          {
+            value: 'hierarchical taxonomy tag 3.4.50',
+            lineage: [
+              'hierarchical taxonomy tag 3',
+              'hierarchical taxonomy tag 3.4',
+              'hierarchical taxonomy tag 3.4.50',
+            ],
+          },
+        ],
+      },
+    ],
+  },
+};
diff --git a/src/content-tags-drawer/__mocks__/contentTaxonomyTagsTreeMock.js b/src/content-tags-drawer/__mocks__/contentTaxonomyTagsTreeMock.js
new file mode 100644
index 0000000000..5e6a1e3504
--- /dev/null
+++ b/src/content-tags-drawer/__mocks__/contentTaxonomyTagsTreeMock.js
@@ -0,0 +1,53 @@
+module.exports = {
+  'hierarchical taxonomy tag 1': {
+    explicit: false,
+    canDeleteObjecttag: true,
+    children: {
+      'hierarchical taxonomy tag 1.7': {
+        explicit: false,
+        canDeleteObjecttag: true,
+        children: {
+          'hierarchical taxonomy tag 1.7.59': {
+            explicit: true,
+            canDeleteObjecttag: true,
+            children: {},
+          },
+        },
+      },
+    },
+  },
+  'hierarchical taxonomy tag 2': {
+    explicit: false,
+    canDeleteObjecttag: true,
+    children: {
+      'hierarchical taxonomy tag 2.13': {
+        explicit: false,
+        canDeleteObjecttag: true,
+        children: {
+          'hierarchical taxonomy tag 2.13.46': {
+            explicit: true,
+            canDeleteObjecttag: true,
+            children: {},
+          },
+        },
+      },
+    },
+  },
+  'hierarchical taxonomy tag 3': {
+    explicit: false,
+    canDeleteObjecttag: true,
+    children: {
+      'hierarchical taxonomy tag 3.4': {
+        explicit: false,
+        canDeleteObjecttag: true,
+        children: {
+          'hierarchical taxonomy tag 3.4.50': {
+            explicit: false,
+            canDeleteObjecttag: true,
+            children: {},
+          },
+        },
+      },
+    },
+  },
+};
diff --git a/src/content-tags-drawer/__mocks__/index.js b/src/content-tags-drawer/__mocks__/index.js
new file mode 100644
index 0000000000..8c4274d643
--- /dev/null
+++ b/src/content-tags-drawer/__mocks__/index.js
@@ -0,0 +1,6 @@
+export { default as taxonomyTagsMock } from './taxonomyTagsMock';
+export { default as contentTaxonomyTagsMock } from './contentTaxonomyTagsMock';
+export { default as contentDataMock } from './contentDataMock';
+export { default as updateContentTaxonomyTagsMock } from './updateContentTaxonomyTagsMock';
+export { default as contentTaxonomyTagsCountMock } from './contentTaxonomyTagsCountMock';
+export { default as contentTaxonomyTagsTreeMock } from './contentTaxonomyTagsTreeMock';
diff --git a/src/content-tags-drawer/__mocks__/taxonomyTagsMock.js b/src/content-tags-drawer/__mocks__/taxonomyTagsMock.js
new file mode 100644
index 0000000000..0b2bc714c8
--- /dev/null
+++ b/src/content-tags-drawer/__mocks__/taxonomyTagsMock.js
@@ -0,0 +1,46 @@
+module.exports = {
+  next: null,
+  previous: null,
+  count: 4,
+  numPages: 1,
+  currentPage: 1,
+  start: 0,
+  results: [
+    {
+      value: 'tag 1',
+      externalId: null,
+      childCount: 16,
+      depth: 0,
+      parentValue: null,
+      id: 635951,
+      subTagsUrl: 'http://localhost:18010/api/content_tagging/v1/taxonomies/4/tags/?parent_tag=tag%201',
+    },
+    {
+      value: 'tag 2',
+      externalId: null,
+      childCount: 16,
+      depth: 0,
+      parentValue: null,
+      id: 636992,
+      subTagsUrl: 'http://localhost:18010/api/content_tagging/v1/taxonomies/4/tags/?parent_tag=tag%202',
+    },
+    {
+      value: 'tag 3',
+      externalId: null,
+      childCount: 16,
+      depth: 0,
+      parentValue: null,
+      id: 638033,
+      subTagsUrl: 'http://localhost:18010/api/content_tagging/v1/taxonomies/4/tags/?parent_tag=tag%203',
+    },
+    {
+      value: 'tag 4',
+      externalId: null,
+      childCount: 16,
+      depth: 0,
+      parentValue: null,
+      id: 639074,
+      subTagsUrl: 'http://localhost:18010/api/content_tagging/v1/taxonomies/4/tags/?parent_tag=tag%204',
+    },
+  ],
+};
diff --git a/src/content-tags-drawer/__mocks__/updateContentTaxonomyTagsMock.js b/src/content-tags-drawer/__mocks__/updateContentTaxonomyTagsMock.js
new file mode 100644
index 0000000000..0fb6ffc6f1
--- /dev/null
+++ b/src/content-tags-drawer/__mocks__/updateContentTaxonomyTagsMock.js
@@ -0,0 +1,25 @@
+module.exports = {
+  'block-v1:SampleTaxonomyOrg1+STC1+2023_1+type@vertical+block@aaf8b8eb86b54281aeeab12499d2cb0b': {
+    taxonomies: [
+      {
+        name: 'FlatTaxonomy',
+        taxonomyId: 3,
+        canTagObject: true,
+        tags: [
+          {
+            value: 'flat taxonomy tag 100',
+            lineage: [
+              'flat taxonomy tag 100',
+            ],
+          },
+          {
+            value: 'flat taxonomy tag 3856',
+            lineage: [
+              'flat taxonomy tag 3856',
+            ],
+          },
+        ],
+      },
+    ],
+  },
+};
diff --git a/src/content-tags-drawer/common/context.ts b/src/content-tags-drawer/common/context.ts
new file mode 100644
index 0000000000..6f4d76b76a
--- /dev/null
+++ b/src/content-tags-drawer/common/context.ts
@@ -0,0 +1,77 @@
+import React from 'react';
+
+import type { TagsInTaxonomy, StagedTagData } from '../data/types';
+
+export interface ContentTagsDrawerContextData {
+  stagedContentTags: Record<number, StagedTagData[]>;
+  globalStagedContentTags: Record<number, StagedTagData[]>;
+  globalStagedRemovedContentTags: Record<number, string>;
+  addStagedContentTag: (taxonomyId: number, addedTag: StagedTagData) => void;
+  removeStagedContentTag: (taxonomyId: number, tagValue: string) => void;
+  removeGlobalStagedContentTag: (taxonomyId: number, tagValue: string) => void;
+  addRemovedContentTag: (taxonomyId: number, tagValue: string) => void;
+  deleteRemovedContentTag: (taxonomyId: number, tagValue: string) => void;
+  setStagedTags: (taxonomyId: number, tagsList: StagedTagData[]) => void;
+  setGlobalStagedContentTags: Function;
+  commitGlobalStagedTags: () => void;
+  commitGlobalStagedTagsStatus: null | string;
+  isContentDataLoaded: boolean;
+  isContentTaxonomyTagsLoaded: boolean;
+  isTaxonomyListLoaded: boolean;
+  contentName: string;
+  tagsByTaxonomy: TagsInTaxonomy[];
+  isEditMode: boolean;
+  toEditMode: () => void;
+  toReadMode: () => void;
+  collapsibleStates: Record<number, boolean>;
+  openCollapsible: (taxonomyId: number) => void;
+  closeCollapsible: (taxonomyId: number) => void;
+  toastMessage: string | undefined;
+  showToastAfterSave: () => void;
+  closeToast: () => void;
+  setCollapsibleToInitalState: () => void;
+  otherTaxonomies: TagsInTaxonomy[];
+}
+
+/* istanbul ignore next */
+export const ContentTagsDrawerContext = React.createContext<ContentTagsDrawerContextData>({
+  stagedContentTags: {},
+  globalStagedContentTags: {},
+  globalStagedRemovedContentTags: {},
+  addStagedContentTag: () => {},
+  removeStagedContentTag: () => {},
+  removeGlobalStagedContentTag: () => {},
+  addRemovedContentTag: () => {},
+  deleteRemovedContentTag: () => {},
+  setStagedTags: () => {},
+  setGlobalStagedContentTags: () => {},
+  commitGlobalStagedTags: () => {},
+  commitGlobalStagedTagsStatus: null,
+  isContentDataLoaded: false,
+  isContentTaxonomyTagsLoaded: false,
+  isTaxonomyListLoaded: false,
+  contentName: '',
+  tagsByTaxonomy: [],
+  isEditMode: false,
+  toEditMode: () => {},
+  toReadMode: () => {},
+  collapsibleStates: {},
+  openCollapsible: () => {},
+  closeCollapsible: () => {},
+  toastMessage: undefined,
+  showToastAfterSave: () => {},
+  closeToast: () => {},
+  setCollapsibleToInitalState: () => {},
+  otherTaxonomies: [],
+});
+
+// This context has not been added to ContentTagsDrawerContext because it has been
+// created one level higher to control the behavior of the Sheet that contatins the Drawer.
+// This logic is not used in legacy edx-platform screens. But it can be separated if we keep
+// the contexts separate.
+// TODO We can join both contexts when the Drawer is no longer used on edx-platform
+/* istanbul ignore next */
+export const ContentTagsDrawerSheetContext = React.createContext({
+  blockingSheet: false,
+  setBlockingSheet: (() => {}) as (blockingSheet: boolean) => void,
+});
diff --git a/src/content-tags-drawer/data/api.js b/src/content-tags-drawer/data/api.js
new file mode 100644
index 0000000000..e2534e9b89
--- /dev/null
+++ b/src/content-tags-drawer/data/api.js
@@ -0,0 +1,106 @@
+// @ts-check
+import { camelCaseObject, getConfig } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+
+const getApiBaseUrl = () => getConfig().STUDIO_BASE_URL;
+
+/**
+ * Get the URL used to fetch tags data from the "taxonomy tags" REST API
+ * @param {number} taxonomyId
+ * @param {{page?: number, searchTerm?: string, parentTag?: string}} options
+ * @returns {string} the URL
+ */
+export const getTaxonomyTagsApiUrl = (taxonomyId, options = {}) => {
+  const url = new URL(`api/content_tagging/v1/taxonomies/${taxonomyId}/tags/`, getApiBaseUrl());
+  if (options.parentTag) {
+    url.searchParams.append('parent_tag', options.parentTag);
+  }
+  if (options.page) {
+    url.searchParams.append('page', String(options.page));
+  }
+  if (options.searchTerm) {
+    url.searchParams.append('search_term', options.searchTerm);
+  }
+
+  // Load in the full tree if children at once, if we can:
+  // Note: do not combine this with page_size (we currently aren't using page_size)
+  url.searchParams.append('full_depth_threshold', '1000');
+
+  return url.href;
+};
+export const getContentTaxonomyTagsApiUrl = (contentId) => new URL(`api/content_tagging/v1/object_tags/${contentId}/`, getApiBaseUrl()).href;
+export const getXBlockContentDataApiURL = (contentId) => new URL(`/xblock/outline/${contentId}`, getApiBaseUrl()).href;
+export const getCourseContentDataApiURL = (contentId) => new URL(`/api/contentstore/v1/course_settings/${contentId}`, getApiBaseUrl()).href;
+export const getLibraryContentDataApiUrl = (contentId) => new URL(`/api/libraries/v2/blocks/${contentId}/`, getApiBaseUrl()).href;
+export const getContentTaxonomyTagsCountApiUrl = (contentId) => new URL(`api/content_tagging/v1/object_tag_counts/${contentId}/?count_implicit`, getApiBaseUrl()).href;
+
+/**
+ * Get all tags that belong to taxonomy.
+ * @param {number} taxonomyId The id of the taxonomy to fetch tags for
+ * @param {{page?: number, searchTerm?: string, parentTag?: string}} options
+ * @returns {Promise<import("../../taxonomy/data/types.js").TagListData>}
+ */
+export async function getTaxonomyTagsData(taxonomyId, options = {}) {
+  const url = getTaxonomyTagsApiUrl(taxonomyId, options);
+  const { data } = await getAuthenticatedHttpClient().get(url);
+  return camelCaseObject(data);
+}
+
+/**
+ * Get the tags that are applied to the content object
+ * @param {string} contentId The id of the content object to fetch the applied tags for
+ * @returns {Promise<import("./types.js").ContentTaxonomyTagsData>}
+ */
+export async function getContentTaxonomyTagsData(contentId) {
+  const { data } = await getAuthenticatedHttpClient().get(getContentTaxonomyTagsApiUrl(contentId));
+  return camelCaseObject(data[contentId]);
+}
+
+/**
+ * Get the count of tags that are applied to the content object
+ * @param {string} contentId The id of the content object to fetch the count of the applied tags for
+ * @returns {Promise<number>}
+ */
+export async function getContentTaxonomyTagsCount(contentId) {
+  const { data } = await getAuthenticatedHttpClient().get(getContentTaxonomyTagsCountApiUrl(contentId));
+  if (contentId in data) {
+    return camelCaseObject(data[contentId]);
+  }
+  return 0;
+}
+
+/**
+ * Fetch meta data (eg: display_name) about the content object (unit/compoenent)
+ * @param {string} contentId The id of the content object (unit/component)
+ * @returns {Promise<import("./types.js").ContentData | null>}
+ */
+export async function getContentData(contentId) {
+  let url;
+  if (contentId.startsWith('lib-collection:')) {
+    // This type of usage_key is not used to obtain collections
+    // is only used in tagging.
+    return null;
+  }
+
+  if (contentId.startsWith('lb:')) {
+    url = getLibraryContentDataApiUrl(contentId);
+  } else if (contentId.startsWith('course-v1:')) {
+    url = getCourseContentDataApiURL(contentId);
+  } else {
+    url = getXBlockContentDataApiURL(contentId);
+  }
+  const { data } = await getAuthenticatedHttpClient().get(url);
+  return camelCaseObject(data);
+}
+
+/**
+ * Update content object's applied tags
+ * @param {string} contentId The id of the content object (unit/component)
+ * @param {Promise<import("./types.js").UpdateTagsData[]>} tagsData The list of tags (values) to set on content object
+ * @returns {Promise<import("./types.js").ContentTaxonomyTagsData>}
+ */
+export async function updateContentTaxonomyTags(contentId, tagsData) {
+  const url = getContentTaxonomyTagsApiUrl(contentId);
+  const { data } = await getAuthenticatedHttpClient().put(url, { tagsData });
+  return camelCaseObject(data[contentId]);
+}
diff --git a/src/content-tags-drawer/data/api.mocks.ts b/src/content-tags-drawer/data/api.mocks.ts
new file mode 100644
index 0000000000..ce1d50c05c
--- /dev/null
+++ b/src/content-tags-drawer/data/api.mocks.ts
@@ -0,0 +1,378 @@
+import * as api from './api';
+import * as taxonomyApi from '../../taxonomy/data/api';
+import { languageExportId } from '../utils';
+
+/**
+ * Mock for `getContentTaxonomyTagsData()`
+ */
+export async function mockContentTaxonomyTagsData(contentId: string): Promise<any> {
+  const thisMock = mockContentTaxonomyTagsData;
+  switch (contentId) {
+    case thisMock.stagedTagsId: return thisMock.stagedTags;
+    case thisMock.otherTagsId: return thisMock.otherTags;
+    case thisMock.languageWithTagsId: return thisMock.languageWithTags;
+    case thisMock.languageWithoutTagsId: return thisMock.languageWithoutTags;
+    case thisMock.largeTagsId: return thisMock.largeTags;
+    case thisMock.emptyTagsId: return thisMock.emptyTags;
+    default: throw new Error(`No mock has been set up for contentId "${contentId}"`);
+  }
+}
+mockContentTaxonomyTagsData.stagedTagsId = 'block-v1:StagedTagsOrg+STC1+2023_1+type@vertical+block@stagedTagsId';
+mockContentTaxonomyTagsData.stagedTags = {
+  taxonomies: [
+    {
+      name: 'Taxonomy 1',
+      taxonomyId: 123,
+      canTagObject: true,
+      tags: [
+        {
+          value: 'Tag 1',
+          lineage: ['Tag 1'],
+          canDeleteObjecttag: true,
+        },
+        {
+          value: 'Tag 2',
+          lineage: ['Tag 2'],
+          canDeleteObjecttag: true,
+        },
+      ],
+    },
+  ],
+};
+mockContentTaxonomyTagsData.otherTagsId = 'block-v1:StagedTagsOrg+STC1+2023_1+type@vertical+block@otherTagsId';
+mockContentTaxonomyTagsData.otherTags = {
+  taxonomies: [
+    {
+      name: 'Taxonomy 1',
+      taxonomyId: 123,
+      canTagObject: true,
+      tags: [
+        {
+          value: 'Tag 1',
+          lineage: ['Tag 1'],
+          canDeleteObjecttag: true,
+        },
+        {
+          value: 'Tag 2',
+          lineage: ['Tag 2'],
+          canDeleteObjecttag: true,
+        },
+      ],
+    },
+    {
+      name: 'Taxonomy 2',
+      taxonomyId: 1234,
+      canTagObject: false,
+      tags: [
+        {
+          value: 'Tag 3',
+          lineage: ['Tag 3'],
+          canDeleteObjecttag: true,
+        },
+        {
+          value: 'Tag 4',
+          lineage: ['Tag 4'],
+          canDeleteObjecttag: true,
+        },
+      ],
+    },
+  ],
+};
+mockContentTaxonomyTagsData.languageWithTagsId = 'block-v1:LanguageTagsOrg+STC1+2023_1+type@vertical+block@languageWithTagsId';
+mockContentTaxonomyTagsData.languageWithTags = {
+  taxonomies: [
+    {
+      name: 'Languages',
+      taxonomyId: 1234,
+      exportId: languageExportId,
+      canTagObject: true,
+      tags: [
+        {
+          value: 'Tag 1',
+          lineage: ['Tag 1'],
+          canDeleteObjecttag: true,
+        },
+      ],
+    },
+    {
+      name: 'Taxonomy 1',
+      taxonomyId: 12345,
+      canTagObject: true,
+      tags: [
+        {
+          value: 'Tag 1',
+          lineage: ['Tag 1'],
+          canDeleteObjecttag: true,
+        },
+        {
+          value: 'Tag 2',
+          lineage: ['Tag 2'],
+          canDeleteObjecttag: true,
+        },
+      ],
+    },
+  ],
+};
+mockContentTaxonomyTagsData.languageWithoutTagsId = 'block-v1:LanguageTagsOrg+STC1+2023_1+type@vertical+block@languageWithoutTagsId';
+mockContentTaxonomyTagsData.languageWithoutTags = {
+  taxonomies: [
+    {
+      name: 'Languages',
+      taxonomyId: 1234,
+      exportId: languageExportId,
+      canTagObject: true,
+      tags: [],
+    },
+    {
+      name: 'Taxonomy 1',
+      taxonomyId: 12345,
+      canTagObject: true,
+      tags: [
+        {
+          value: 'Tag 1',
+          lineage: ['Tag 1'],
+          canDeleteObjecttag: true,
+        },
+        {
+          value: 'Tag 2',
+          lineage: ['Tag 2'],
+          canDeleteObjecttag: true,
+        },
+      ],
+    },
+  ],
+};
+mockContentTaxonomyTagsData.largeTagsId = 'block-v1:LargeTagsOrg+STC1+2023_1+type@vertical+block@largeTagsId';
+mockContentTaxonomyTagsData.largeTags = {
+  taxonomies: [
+    {
+      name: 'Taxonomy 1',
+      taxonomyId: 123,
+      canTagObject: true,
+      tags: [
+        {
+          value: 'Tag 1',
+          lineage: ['Tag 1'],
+          canDeleteObjecttag: true,
+        },
+        {
+          value: 'Tag 2',
+          lineage: ['Tag 2'],
+          canDeleteObjecttag: true,
+        },
+      ],
+    },
+    {
+      name: 'Taxonomy 2',
+      taxonomyId: 124,
+      canTagObject: true,
+      tags: [
+        {
+          value: 'Tag 1',
+          lineage: ['Tag 1'],
+          canDeleteObjecttag: true,
+        },
+      ],
+    },
+    {
+      name: 'Taxonomy 3',
+      taxonomyId: 125,
+      canTagObject: true,
+      tags: [
+        {
+          value: 'Tag 1.1.1',
+          lineage: ['Tag 1', 'Tag 1.1', 'Tag 1.1.1'],
+          canDeleteObjecttag: true,
+        },
+      ],
+    },
+    {
+      name: '(B) Taxonomy 4',
+      taxonomyId: 126,
+      canTagObject: true,
+      tags: [],
+    },
+    {
+      name: '(A) Taxonomy 5',
+      taxonomyId: 127,
+      canTagObject: true,
+      tags: [],
+    },
+  ],
+};
+mockContentTaxonomyTagsData.emptyTagsId = 'block-v1:EmptyTagsOrg+STC1+2023_1+type@vertical+block@emptyTagsId';
+mockContentTaxonomyTagsData.emptyTags = {
+  taxonomies: [],
+};
+mockContentTaxonomyTagsData.applyMock = () => jest.spyOn(api, 'getContentTaxonomyTagsData').mockImplementation(mockContentTaxonomyTagsData);
+
+/**
+ * Mock for `getTaxonomyListData()`
+ */
+export async function mockTaxonomyListData(org: string): Promise<any> {
+  const thisMock = mockTaxonomyListData;
+  switch (org) {
+    case thisMock.stagedTagsOrg: return thisMock.stagedTags;
+    case thisMock.languageTagsOrg: return thisMock.languageTags;
+    case thisMock.largeTagsOrg: return thisMock.largeTags;
+    case thisMock.emptyTagsOrg: return thisMock.emptyTags;
+    default: throw new Error(`No mock has been set up for org "${org}"`);
+  }
+}
+mockTaxonomyListData.stagedTagsOrg = 'StagedTagsOrg';
+mockTaxonomyListData.stagedTags = {
+  results: [
+    {
+      id: 123,
+      name: 'Taxonomy 1',
+      description: 'This is a description 1',
+      canTagObject: true,
+    },
+  ],
+};
+mockTaxonomyListData.languageTagsOrg = 'LanguageTagsOrg';
+mockTaxonomyListData.languageTags = {
+  results: [
+    {
+      id: 1234,
+      name: 'Languages',
+      description: 'This is a description 1',
+      exportId: languageExportId,
+      canTagObject: true,
+    },
+    {
+      id: 12345,
+      name: 'Taxonomy 1',
+      description: 'This is a description 2',
+      canTagObject: true,
+    },
+  ],
+};
+mockTaxonomyListData.largeTagsOrg = 'LargeTagsOrg';
+mockTaxonomyListData.largeTags = {
+  results: [
+    {
+      id: 123,
+      name: 'Taxonomy 1',
+      description: 'This is a description 1',
+      canTagObject: true,
+    },
+    {
+      id: 124,
+      name: 'Taxonomy 2',
+      description: 'This is a description 2',
+      canTagObject: true,
+    },
+    {
+      id: 125,
+      name: 'Taxonomy 3',
+      description: 'This is a description 3',
+      canTagObject: true,
+    },
+    {
+      id: 127,
+      name: '(A) Taxonomy 5',
+      description: 'This is a description 5',
+      canTagObject: true,
+    },
+    {
+      id: 126,
+      name: '(B) Taxonomy 4',
+      description: 'This is a description 4',
+      canTagObject: true,
+    },
+  ],
+};
+mockTaxonomyListData.emptyTagsOrg = 'EmptyTagsOrg';
+mockTaxonomyListData.emptyTags = {
+  results: [],
+};
+mockTaxonomyListData.applyMock = () => jest.spyOn(taxonomyApi, 'getTaxonomyListData').mockImplementation(mockTaxonomyListData);
+
+/**
+ * Mock for `getTaxonomyTagsData()`
+ */
+export async function mockTaxonomyTagsData(taxonomyId: number): Promise<any> {
+  const thisMock = mockTaxonomyTagsData;
+  switch (taxonomyId) {
+    case thisMock.stagedTagsTaxonomy: return thisMock.stagedTags;
+    case thisMock.languageTagsTaxonomy: return thisMock.languageTags;
+    default: throw new Error(`No mock has been set up for taxonomyId "${taxonomyId}"`);
+  }
+}
+mockTaxonomyTagsData.stagedTagsTaxonomy = 123;
+mockTaxonomyTagsData.stagedTags = {
+  count: 3,
+  currentPage: 1,
+  next: null,
+  numPages: 1,
+  previous: null,
+  start: 1,
+  results: [
+    {
+      value: 'Tag 1',
+      externalId: null,
+      childCount: 0,
+      depth: 0,
+      parentValue: null,
+      id: 12345,
+      subTagsUrl: null,
+      canChangeTag: false,
+      canDeleteTag: false,
+    },
+    {
+      value: 'Tag 2',
+      externalId: null,
+      childCount: 0,
+      depth: 0,
+      parentValue: null,
+      id: 12346,
+      subTagsUrl: null,
+      canChangeTag: false,
+      canDeleteTag: false,
+    },
+    {
+      value: 'Tag 3',
+      externalId: null,
+      childCount: 0,
+      depth: 0,
+      parentValue: null,
+      id: 12347,
+      subTagsUrl: null,
+      canChangeTag: false,
+      canDeleteTag: false,
+    },
+  ],
+};
+mockTaxonomyTagsData.languageTagsTaxonomy = 1234;
+mockTaxonomyTagsData.languageTags = {
+  count: 1,
+  currentPage: 1,
+  next: null,
+  numPages: 1,
+  previous: null,
+  start: 1,
+  results: [{
+    value: 'Tag 1',
+    externalId: null,
+    childCount: 0,
+    depth: 0,
+    parentValue: null,
+    id: 12345,
+    subTagsUrl: null,
+    canChangeTag: false,
+    canDeleteTag: false,
+  }],
+};
+mockTaxonomyTagsData.applyMock = () => jest.spyOn(api, 'getTaxonomyTagsData').mockImplementation(mockTaxonomyTagsData);
+
+/**
+ * Mock for `getContentData()`
+ */
+export async function mockContentData(): Promise<any> {
+  return mockContentData.data;
+}
+mockContentData.data = {
+  displayName: 'Unit 1',
+};
+mockContentData.applyMock = () => jest.spyOn(api, 'getContentData').mockImplementation(mockContentData);
diff --git a/src/content-tags-drawer/data/api.test.js b/src/content-tags-drawer/data/api.test.js
new file mode 100644
index 0000000000..70a02680e8
--- /dev/null
+++ b/src/content-tags-drawer/data/api.test.js
@@ -0,0 +1,144 @@
+// @ts-check
+import MockAdapter from 'axios-mock-adapter';
+import { initializeMockApp } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+
+import {
+  taxonomyTagsMock,
+  contentTaxonomyTagsMock,
+  contentTaxonomyTagsCountMock,
+  contentDataMock,
+  updateContentTaxonomyTagsMock,
+} from '../__mocks__';
+
+import {
+  getTaxonomyTagsApiUrl,
+  getContentTaxonomyTagsApiUrl,
+  getXBlockContentDataApiURL,
+  getLibraryContentDataApiUrl,
+  getTaxonomyTagsData,
+  getContentTaxonomyTagsData,
+  getContentData,
+  updateContentTaxonomyTags,
+  getContentTaxonomyTagsCountApiUrl,
+  getContentTaxonomyTagsCount,
+} from './api';
+
+let axiosMock;
+
+describe('content tags drawer api calls', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should get taxonomy tags data', async () => {
+    const taxonomyId = 123;
+    axiosMock.onGet().reply(200, taxonomyTagsMock);
+    const result = await getTaxonomyTagsData(taxonomyId);
+
+    expect(axiosMock.history.get[0].url).toEqual(getTaxonomyTagsApiUrl(taxonomyId));
+    expect(result).toEqual(taxonomyTagsMock);
+  });
+
+  it('should get taxonomy tags data with parentTag', async () => {
+    const taxonomyId = 123;
+    const options = { parentTag: 'Sample Tag' };
+    axiosMock.onGet().reply(200, taxonomyTagsMock);
+    const result = await getTaxonomyTagsData(taxonomyId, options);
+
+    expect(axiosMock.history.get[0].url).toContain('parent_tag=Sample+Tag');
+    expect(result).toEqual(taxonomyTagsMock);
+  });
+
+  it('should get taxonomy tags data with page', async () => {
+    const taxonomyId = 123;
+    const options = { page: 2 };
+    axiosMock.onGet().reply(200, taxonomyTagsMock);
+    const result = await getTaxonomyTagsData(taxonomyId, options);
+
+    expect(axiosMock.history.get[0].url).toContain('page=2');
+    expect(result).toEqual(taxonomyTagsMock);
+  });
+
+  it('should get taxonomy tags data with searchTerm', async () => {
+    const taxonomyId = 123;
+    const options = { searchTerm: 'memo' };
+    axiosMock.onGet().reply(200, taxonomyTagsMock);
+    const result = await getTaxonomyTagsData(taxonomyId, options);
+
+    expect(axiosMock.history.get[0].url).toContain('search_term=memo');
+    expect(result).toEqual(taxonomyTagsMock);
+  });
+
+  it('should get content taxonomy tags data', async () => {
+    const contentId = 'block-v1:SampleTaxonomyOrg1+STC1+2023_1+type@vertical+block@aaf8b8eb86b54281aeeab12499d2cb0b';
+    axiosMock.onGet(getContentTaxonomyTagsApiUrl(contentId)).reply(200, contentTaxonomyTagsMock);
+    const result = await getContentTaxonomyTagsData(contentId);
+
+    expect(axiosMock.history.get[0].url).toEqual(getContentTaxonomyTagsApiUrl(contentId));
+    expect(result).toEqual(contentTaxonomyTagsMock[contentId]);
+  });
+
+  it('should get content taxonomy tags count', async () => {
+    const contentId = 'block-v1:SampleTaxonomyOrg1+STC1+2023_1+type@vertical+block@aaf8b8eb86b54281aeeab12499d2cb0b';
+    axiosMock.onGet(getContentTaxonomyTagsCountApiUrl(contentId)).reply(200, contentTaxonomyTagsCountMock);
+    const result = await getContentTaxonomyTagsCount(contentId);
+
+    expect(axiosMock.history.get[0].url).toEqual(getContentTaxonomyTagsCountApiUrl(contentId));
+    expect(result).toEqual(contentTaxonomyTagsCountMock[contentId]);
+  });
+
+  it('should get content taxonomy tags count as zero', async () => {
+    const contentId = 'block-v1:SampleTaxonomyOrg1+STC1+2023_1+type@vertical+block@aaf8b8eb86b54281aeeab12499d2cb0b';
+    axiosMock.onGet(getContentTaxonomyTagsCountApiUrl(contentId)).reply(200, {});
+    const result = await getContentTaxonomyTagsCount(contentId);
+
+    expect(axiosMock.history.get[0].url).toEqual(getContentTaxonomyTagsCountApiUrl(contentId));
+    expect(result).toEqual(0);
+  });
+
+  it('should get content data for course component', async () => {
+    const contentId = 'block-v1:SampleTaxonomyOrg1+STC1+2023_1+type@vertical+block@aaf8b8eb86b54281aeeab12499d2cb0b';
+    axiosMock.onGet(getXBlockContentDataApiURL(contentId)).reply(200, contentDataMock);
+    const result = await getContentData(contentId);
+
+    expect(axiosMock.history.get[0].url).toEqual(getXBlockContentDataApiURL(contentId));
+    expect(result).toEqual(contentDataMock);
+  });
+
+  it('should get content data for V2 library component', async () => {
+    const contentId = 'lb:SampleTaxonomyOrg1:NTL1:html:a3eded6b-2106-429a-98be-63533d563d79';
+    axiosMock.onGet(getLibraryContentDataApiUrl(contentId)).reply(200, contentDataMock);
+    const result = await getContentData(contentId);
+
+    expect(axiosMock.history.get[0].url).toEqual(getLibraryContentDataApiUrl(contentId));
+    expect(result).toEqual(contentDataMock);
+  });
+
+  it('should update content taxonomy tags', async () => {
+    const contentId = 'block-v1:SampleTaxonomyOrg1+STC1+2023_1+type@vertical+block@aaf8b8eb86b54281aeeab12499d2cb0b';
+    const taxonomyId = 3;
+    const tags = ['flat taxonomy tag 100', 'flat taxonomy tag 3856'];
+    axiosMock.onPut(`${getContentTaxonomyTagsApiUrl(contentId)}`).reply(200, updateContentTaxonomyTagsMock);
+    // @ts-ignore
+    const result = await updateContentTaxonomyTags(contentId, [{
+      taxonomy: taxonomyId,
+      tags,
+    }]);
+
+    expect(axiosMock.history.put[0].url).toEqual(`${getContentTaxonomyTagsApiUrl(contentId)}`);
+    expect(result).toEqual(updateContentTaxonomyTagsMock[contentId]);
+  });
+});
diff --git a/src/content-tags-drawer/data/apiHooks.jsx b/src/content-tags-drawer/data/apiHooks.jsx
new file mode 100644
index 0000000000..f7e5dd2c13
--- /dev/null
+++ b/src/content-tags-drawer/data/apiHooks.jsx
@@ -0,0 +1,196 @@
+// @ts-check
+import { useMemo } from 'react';
+import { getConfig } from '@edx/frontend-platform';
+import {
+  useQuery,
+  useQueries,
+  useMutation,
+  useQueryClient,
+} from '@tanstack/react-query';
+import {
+  getTaxonomyTagsData,
+  getContentTaxonomyTagsData,
+  getContentData,
+  updateContentTaxonomyTags,
+  getContentTaxonomyTagsCount,
+} from './api';
+import { libraryQueryPredicate, xblockQueryKeys } from '../../library-authoring/data/apiHooks';
+import { getLibraryId } from '../../generic/key-utils';
+
+/** @typedef {import("../../taxonomy/data/types.js").TagListData} TagListData */
+/** @typedef {import("../../taxonomy/data/types.js").TagData} TagData */
+
+/**
+ * Builds the query to get the taxonomy tags
+ * @param {number} taxonomyId The id of the taxonomy to fetch tags for
+ * @param {string|null} parentTag The tag whose children we're loading, if any
+ * @param {string} searchTerm The term passed in to perform search on tags
+ * @param {number} numPages How many pages of tags to load at this level
+ */
+export const useTaxonomyTagsData = (taxonomyId, parentTag = null, numPages = 1, searchTerm = '') => {
+  const queryClient = useQueryClient();
+
+  const queryFn = async ({ queryKey }) => {
+    const page = queryKey[3];
+    return getTaxonomyTagsData(taxonomyId, { parentTag: parentTag || '', searchTerm, page });
+  };
+
+  /** @type {{queryKey: any[], queryFn: typeof queryFn, staleTime: number}[]} */
+  const queries = [];
+  for (let page = 1; page <= numPages; page++) {
+    queries.push(
+      { queryKey: ['taxonomyTags', taxonomyId, parentTag, page, searchTerm], queryFn, staleTime: Infinity },
+    );
+  }
+
+  const dataPages = useQueries({ queries });
+
+  const totalPages = dataPages[0]?.data?.numPages || 1;
+  const hasMorePages = numPages < totalPages;
+
+  const tagPages = useMemo(() => {
+    // Pre-load desendants if possible
+    const preLoadedData = new Map();
+
+    const newTags = dataPages.map(result => {
+      /** @type {TagData[]} */
+      const simplifiedTagsList = [];
+
+      result.data?.results?.forEach((tag) => {
+        if (tag.parentValue === parentTag) {
+          simplifiedTagsList.push(tag);
+        } else if (!preLoadedData.has(tag.parentValue)) {
+          preLoadedData.set(tag.parentValue, [tag]);
+        } else {
+          preLoadedData.get(tag.parentValue).push(tag);
+        }
+      });
+
+      return { ...result, data: simplifiedTagsList };
+    });
+
+    // Store the pre-loaded descendants into the query cache:
+    preLoadedData.forEach((tags, parentValue) => {
+      const queryKey = ['taxonomyTags', taxonomyId, parentValue, 1, searchTerm];
+      /** @type {TagListData} */
+      const cachedData = {
+        next: '',
+        previous: '',
+        count: tags.length,
+        numPages: 1,
+        currentPage: 1,
+        start: 0,
+        results: tags,
+      };
+      queryClient.setQueryData(queryKey, cachedData);
+    });
+
+    return newTags;
+  }, [dataPages]);
+
+  const flatTagPages = {
+    isLoading: tagPages.some(page => page.isLoading),
+    isError: tagPages.some(page => page.isError),
+    isSuccess: tagPages.every(page => page.isSuccess),
+    data: tagPages.flatMap(page => page.data),
+  };
+
+  return { hasMorePages, tagPages: flatTagPages };
+};
+
+/**
+ * Builds the query to get the taxonomy tags applied to the content object
+ * @param {string} contentId The ID of the content object to fetch the applied tags for (e.g. an XBlock usage key)
+ */
+export const useContentTaxonomyTagsData = (contentId) => (
+  useQuery({
+    queryKey: ['contentTaxonomyTags', contentId],
+    queryFn: () => getContentTaxonomyTagsData(contentId),
+  })
+);
+
+/**
+ * Builds the query to get meta data about the content object
+ * @param {string} contentId The id of the content object (unit/component)
+ */
+export const useContentData = (contentId) => (
+  useQuery({
+    queryKey: ['contentData', contentId],
+    queryFn: () => getContentData(contentId),
+  })
+);
+
+/**
+ * Builds the mutation to update the tags applied to the content object
+ * @param {string} contentId The id of the content object to update tags for
+ */
+export const useContentTaxonomyTagsUpdater = (contentId) => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    /**
+     * @type {import("@tanstack/react-query").MutateFunction<
+     *   any,
+     *   any,
+     *   {
+     *     tagsData: Promise<import("./types.js").UpdateTagsData[]>
+     *   }
+     * >}
+     */
+    mutationFn: ({ tagsData }) => updateContentTaxonomyTags(contentId, tagsData),
+    onSettled: /* istanbul ignore next */ () => {
+      queryClient.invalidateQueries({ queryKey: ['contentTaxonomyTags', contentId] });
+      /// Invalidate query with pattern on course outline
+      let contentPattern;
+      if (contentId.includes('course-v1')) {
+        contentPattern = contentId;
+      } else {
+        contentPattern = contentId.replace(/\+type@.*$/, '*');
+      }
+      queryClient.invalidateQueries({ queryKey: ['contentTagsCount', contentPattern] });
+      if (contentId.startsWith('lb:') || contentId.startsWith('lib-collection:')) {
+        // Obtain library id from contentId
+        const libraryId = getLibraryId(contentId);
+        // Invalidate component metadata to update tags count
+        queryClient.invalidateQueries(xblockQueryKeys.componentMetadata(contentId));
+        // Invalidate content search to update tags count
+        queryClient.invalidateQueries(['content_search'], { predicate: (query) => libraryQueryPredicate(query, libraryId) });
+      }
+    },
+    onSuccess: /* istanbul ignore next */ () => {
+      /* istanbul ignore next */
+      if (window.top != null) {
+        // This send messages to the parent page if the drawer is called from a iframe.
+        // Is used on Studio to update tags data and counts.
+        // In the future, when the Course Outline Page and Unit Page are integrated into this MFE,
+        // they should just use React Query to load the tag counts, and React Query will automatically
+        // refresh those counts when the mutation invalidates them. So this postMessage is just a temporary
+        // feature to support the legacy Django template courseware page.
+
+        // Sends content tags.
+        getContentTaxonomyTagsData(contentId).then((data) => {
+          const contentData = {
+            contentId,
+            ...data,
+          };
+          window.top?.postMessage(
+            { type: 'authoring.events.tags.updated', data: contentData },
+            getConfig().STUDIO_BASE_URL,
+          );
+        });
+
+        // Sends tags count.
+        getContentTaxonomyTagsCount(contentId).then((data) => {
+          const contentData = {
+            contentId,
+            count: data,
+          };
+          window.top?.postMessage(
+            { type: 'authoring.events.tags.count.updated', data: contentData },
+            getConfig().STUDIO_BASE_URL,
+          );
+        });
+      }
+    },
+  });
+};
diff --git a/src/content-tags-drawer/data/apiHooks.test.jsx b/src/content-tags-drawer/data/apiHooks.test.jsx
new file mode 100644
index 0000000000..3e327ee25c
--- /dev/null
+++ b/src/content-tags-drawer/data/apiHooks.test.jsx
@@ -0,0 +1,178 @@
+import { useQuery, useMutation, useQueries } from '@tanstack/react-query';
+import { act } from '@testing-library/react';
+import { renderHook } from '@testing-library/react-hooks';
+import {
+  useTaxonomyTagsData,
+  useContentTaxonomyTagsData,
+  useContentData,
+  useContentTaxonomyTagsUpdater,
+} from './apiHooks';
+
+import { updateContentTaxonomyTags } from './api';
+
+jest.mock('@tanstack/react-query', () => ({
+  useQuery: jest.fn(),
+  useMutation: jest.fn(),
+  useQueryClient: jest.fn(() => ({
+    setQueryData: jest.fn(),
+  })),
+  useQueries: jest.fn(),
+}));
+
+jest.mock('./api', () => ({
+  updateContentTaxonomyTags: jest.fn(),
+}));
+
+describe('useTaxonomyTagsData', () => {
+  it('should call useQueries with the correct arguments', () => {
+    const taxonomyId = 123;
+    const mockData = {
+      results: [
+        {
+          value: 'tag 1',
+          externalId: null,
+          childCount: 16,
+          depth: 0,
+          parentValue: null,
+          id: 635951,
+          subTagsUrl: 'http://localhost:18010/api/content_tagging/v1/taxonomies/4/tags/?parent_tag=tag%201',
+        },
+        {
+          value: 'tag 2',
+          externalId: null,
+          childCount: 1,
+          depth: 0,
+          parentValue: null,
+          id: 636992,
+          subTagsUrl: 'http://localhost:18010/api/content_tagging/v1/taxonomies/4/tags/?parent_tag=tag%202',
+        },
+        {
+          value: 'tag 3',
+          externalId: null,
+          childCount: 0,
+          depth: 1,
+          parentValue: 'tag 2',
+          id: 636993,
+          subTagsUrl: null,
+        },
+        {
+          value: 'tag 4',
+          externalId: null,
+          childCount: 0,
+          depth: 1,
+          parentValue: 'tag 2',
+          id: 636994,
+          subTagsUrl: null,
+        },
+      ],
+    };
+
+    useQueries.mockReturnValue([{
+      data: mockData,
+      isLoading: false,
+      isError: false,
+      isSuccess: true,
+    }]);
+
+    const { result } = renderHook(() => useTaxonomyTagsData(taxonomyId));
+
+    // Assert that useQueries was called with the correct arguments
+    expect(useQueries).toHaveBeenCalledWith({
+      queries: [
+        { queryKey: ['taxonomyTags', taxonomyId, null, 1, ''], queryFn: expect.any(Function), staleTime: Infinity },
+      ],
+    });
+
+    expect(result.current.hasMorePages).toEqual(false);
+    // Only includes the first 2 tags because the other 2 would be
+    // in the nested dropdown
+    expect(result.current.tagPages).toEqual(
+      {
+        isLoading: false,
+        isError: false,
+        isSuccess: true,
+        data: [
+          {
+            value: 'tag 1',
+            externalId: null,
+            childCount: 16,
+            depth: 0,
+            parentValue: null,
+            id: 635951,
+            subTagsUrl: 'http://localhost:18010/api/content_tagging/v1/taxonomies/4/tags/?parent_tag=tag%201',
+          },
+          {
+            value: 'tag 2',
+            externalId: null,
+            childCount: 1,
+            depth: 0,
+            parentValue: null,
+            id: 636992,
+            subTagsUrl: 'http://localhost:18010/api/content_tagging/v1/taxonomies/4/tags/?parent_tag=tag%202',
+          },
+        ],
+      },
+    );
+  });
+});
+
+describe('useContentTaxonomyTagsData', () => {
+  it('should return success response', () => {
+    useQuery.mockReturnValueOnce({ isSuccess: true, data: 'data' });
+    const contentId = '123';
+    const result = useContentTaxonomyTagsData(contentId);
+
+    expect(result).toEqual({ isSuccess: true, data: 'data' });
+  });
+
+  it('should return failure response', () => {
+    useQuery.mockReturnValueOnce({ isSuccess: false });
+    const contentId = '123';
+    const result = useContentTaxonomyTagsData(contentId);
+
+    expect(result).toEqual({ isSuccess: false });
+  });
+});
+
+describe('useContentData', () => {
+  it('should return success response', () => {
+    useQuery.mockReturnValueOnce({ isSuccess: true, data: 'data' });
+    const contentId = '123';
+    const result = useContentData(contentId);
+
+    expect(result).toEqual({ isSuccess: true, data: 'data' });
+  });
+
+  it('should return failure response', () => {
+    useQuery.mockReturnValueOnce({ isSuccess: false });
+    const contentId = '123';
+    const result = useContentData(contentId);
+
+    expect(result).toEqual({ isSuccess: false });
+  });
+});
+
+describe('useContentTaxonomyTagsUpdater', () => {
+  it('should call the update content taxonomy tags function', async () => {
+    useMutation.mockReturnValueOnce({ mutate: jest.fn() });
+
+    const contentId = 'testerContent';
+    const taxonomyId = 123;
+    const mutation = useContentTaxonomyTagsUpdater(contentId);
+    const tagsData = [{
+      taxonomy: taxonomyId,
+      tags: ['tag1', 'tag2'],
+    }];
+    mutation.mutate({ tagsData });
+
+    expect(useMutation).toBeCalled();
+
+    const [config] = useMutation.mock.calls[0];
+    const { mutationFn } = config;
+
+    await act(async () => {
+      await mutationFn({ tagsData });
+      expect(updateContentTaxonomyTags).toBeCalledWith(contentId, tagsData);
+    });
+  });
+});
diff --git a/src/content-tags-drawer/data/types.ts b/src/content-tags-drawer/data/types.ts
new file mode 100644
index 0000000000..127be3dc9b
--- /dev/null
+++ b/src/content-tags-drawer/data/types.ts
@@ -0,0 +1,81 @@
+import type { TaxonomyData } from '../../taxonomy/data/types';
+
+/** A tag that has been applied to some content. */
+export interface Tag {
+  /** The value of the tag, also its ID. e.g. "Biology" */
+  value: string;
+  /** The values of the tag and its parent(s) in the hierarchy */
+  lineage: string[];
+  canChangeObjecttag: boolean;
+  canDeleteObjecttag: boolean;
+}
+
+/** A list of the tags from one taxonomy that are applied to a content object. */
+export interface ContentTaxonomyTagData {
+  name: string;
+  taxonomyId: number;
+  canTagObject: boolean;
+  tags: Tag[];
+  exportId: string;
+}
+
+/** A list of all the tags applied to some content object, grouped by taxonomy. */
+export interface ContentTaxonomyTagsData {
+  taxonomies: ContentTaxonomyTagData[];
+}
+
+export interface ContentActions {
+  deleteable: boolean;
+  draggable: boolean;
+  childAddable: boolean;
+  duplicable: boolean;
+}
+
+export interface XBlockData {
+  id: string;
+  displayName: string;
+  category: string;
+  hasChildren: boolean;
+  editedOn: string;
+  published: boolean;
+  publishedOn: string;
+  studioUrl: string;
+  releasedToStudents: boolean;
+  releaseDate: string | null;
+  visibilityState: string;
+  hasExplicitStaffLock: boolean;
+  start: string;
+  graded: boolean;
+  dueDate: string;
+  due: string;
+  relativeWeeksDue: string | null;
+  format: string | null;
+  hasChanges: boolean;
+  actions: ContentActions;
+  explanatoryMessage: string;
+  showCorrectness: string;
+  discussionEnabled: boolean;
+  ancestorHasStaffLock: boolean;
+  staffOnlyMessage: boolean;
+  hasPartitionGroupComponents: boolean;
+}
+
+export interface TagsInTaxonomy extends TaxonomyData {
+  contentTags: Tag[];
+}
+
+export interface CourseData {
+  courseDisplayNameWithDefault: string;
+}
+
+export type ContentData = XBlockData | CourseData;
+
+export interface UpdateTagsData {
+  taxonomy: number;
+  tags: string[];
+}
+
+export interface StagedTagData {
+  value: string;
+  label: string;
+}
diff --git a/src/content-tags-drawer/index.scss b/src/content-tags-drawer/index.scss
new file mode 100644
index 0000000000..0713b4929b
--- /dev/null
+++ b/src/content-tags-drawer/index.scss
@@ -0,0 +1,3 @@
+@import "content-tags-drawer/TagsTree";
+@import "content-tags-drawer/tags-sidebar-controls/TagsSidebarControls";
+@import "content-tags-drawer/ContentTagsDrawer";
diff --git a/src/content-tags-drawer/index.ts b/src/content-tags-drawer/index.ts
new file mode 100644
index 0000000000..c13fe57fda
--- /dev/null
+++ b/src/content-tags-drawer/index.ts
@@ -0,0 +1,2 @@
+export { default as ContentTagsDrawer } from './ContentTagsDrawer';
+export { default as ContentTagsDrawerSheet } from './ContentTagsDrawerSheet';
diff --git a/src/content-tags-drawer/messages.ts b/src/content-tags-drawer/messages.ts
new file mode 100644
index 0000000000..d461d32230
--- /dev/null
+++ b/src/content-tags-drawer/messages.ts
@@ -0,0 +1,144 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  headerSubtitle: {
+    id: 'course-authoring.content-tags-drawer.header.subtitle',
+    defaultMessage: 'Manage tags',
+  },
+  addTagsButtonText: {
+    id: 'course-authoring.content-tags-drawer.collapsible.add-tags.button',
+    defaultMessage: 'Add tags',
+  },
+  loadingMessage: {
+    id: 'course-authoring.content-tags-drawer.spinner.loading',
+    defaultMessage: 'Loading',
+  },
+  loadingTagsDropdownMessage: {
+    id: 'course-authoring.content-tags-drawer.tags-dropdown-selector.spinner.loading',
+    defaultMessage: 'Loading tags',
+  },
+  loadMoreTagsButtonText: {
+    id: 'course-authoring.content-tags-drawer.tags-dropdown-selector.load-more-tags.button',
+    defaultMessage: 'Load more',
+  },
+  noTagsFoundMessage: {
+    id: 'course-authoring.content-tags-drawer.tags-dropdown-selector.no-tags-found',
+    defaultMessage: 'No tags found with the search term "{searchTerm}"',
+  },
+  noTagsInTaxonomyMessage: {
+    id: 'course-authoring.content-tags-drawer.tags-dropdown-selector.no-tags-in-taxonomy',
+    defaultMessage: 'No tags in this taxonomy yet',
+    description: 'Message when the user uses the tags dropdown selector of an empty taxonomy',
+  },
+  taxonomyTagChecked: {
+    id: 'course-authoring.content-tags-drawer.tags-dropdown-selector.tag-checked',
+    defaultMessage: 'Checked',
+  },
+  taxonomyTagUnchecked: {
+    id: 'course-authoring.content-tags-drawer.tags-dropdown-selector.tag-unchecked',
+    defaultMessage: 'Unchecked',
+  },
+  taxonomyTagImplicit: {
+    id: 'course-authoring.content-tags-drawer.tags-dropdown-selector.tag-implicit',
+    defaultMessage: 'Implicit',
+  },
+  taxonomyTagActionInstructionsAriaLabel: {
+    id: 'course-authoring.content-tags-drawer.tags-dropdown-selector.tag-action-instructions.aria.label',
+    defaultMessage: '{tagState} Tag: {tag}. Use the arrow keys to move among the tags in this taxonomy. Press space to select a tag.',
+  },
+  taxonomyTagActionsAriaLabel: {
+    id: 'course-authoring.content-tags-drawer.tags-dropdown-selector.tag-actions.aria.label',
+    defaultMessage: '{tagState} Tag: {tag}',
+  },
+  taxonomyTagsAriaLabel: {
+    id: 'course-authoring.content-tags-drawer.content-tags-collapsible.selectable-box.selection.aria.label',
+    defaultMessage: 'taxonomy tags selection',
+  },
+  manageTagsButton: {
+    id: 'course-authoring.content-tags-drawer.button.manage',
+    defaultMessage: 'Manage tags',
+    description: 'Label in the button that opens the drawer to edit content tags',
+  },
+  tagsSidebarTitle: {
+    id: 'course-authoring.course-unit.sidebar.tags.title',
+    defaultMessage: 'Unit tags',
+    description: 'Title of the tags sidebar',
+  },
+  collapsibleAddTagsPlaceholderText: {
+    id: 'course-authoring.content-tags-drawer.content-tags-collapsible.custom-menu.placeholder-text',
+    defaultMessage: 'Add a tag',
+  },
+  collapsibleNoTagsAddedText: {
+    id: 'course-authoring.content-tags-drawer.content-tags-collapsible.custom-menu.no-tags-added-text',
+    defaultMessage: 'No tags added yet.',
+  },
+  collapsibleAddStagedTagsButtonText: {
+    id: 'course-authoring.content-tags-drawer.content-tags-collapsible.custom-menu.save-staged-tags',
+    defaultMessage: 'Add tags',
+  },
+  collapsibleCancelStagedTagsButtonText: {
+    id: 'course-authoring.content-tags-drawer.content-tags-collapsible.custom-menu.cancel-staged-tags',
+    defaultMessage: 'Cancel',
+  },
+  collapsibleInlineAddStagedTagsButtonText: {
+    id: 'course-authoring.content-tags-drawer.content-tags-collapsible.custom-menu.inline-save-staged-tags',
+    defaultMessage: 'Add',
+  },
+  tagsDrawerCancelButtonText: {
+    id: 'course-authoring.content-tags-drawer.cancel',
+    defaultMessage: 'Cancel',
+    description: 'Button to cancel edit tags.',
+  },
+  tagsDrawerSaveButtonText: {
+    id: 'course-authoring.content-tags-drawer.save',
+    defaultMessage: 'Save',
+    description: 'Button to save edited tags.',
+  },
+  tagsDrawerCloseButtonText: {
+    id: 'course-authoring.content-tags-drawer.close',
+    defaultMessage: 'Close',
+    description: 'Button to close manage tags drawer.',
+  },
+  tagsDrawerEditTagsButtonText: {
+    id: 'course-authoring.content-tags-drawer.edit-tags',
+    defaultMessage: 'Edit tags',
+    description: 'Button to edit tags in manage tags drawer.',
+  },
+  tagsSaveToastTextTypeAdded: {
+    id: 'course-authoring.content-tags-drawer.toast.added',
+    defaultMessage: '{tagsAdded} tags added.',
+    description: 'Text of toast after save when the user added tags.',
+  },
+  tagsSaveToastTextTypeRemoved: {
+    id: 'course-authoring.content-tags-drawer.toast.removed',
+    defaultMessage: '{tagsRemoved} tags removed.',
+    description: 'Text of toast after save when the user removed tags.',
+  },
+  tagsDeleteAltText: {
+    id: 'course-authoring.content-tags-drawer.tag.delete',
+    defaultMessage: 'Delete',
+    description: 'Alt label for Delete tag button.',
+  },
+  otherTagsHeader: {
+    id: 'course-authoring.content-tags-drawer.other-tags.header',
+    defaultMessage: 'Other tags',
+    description: 'Header of "Other tags" subsection in tags drawer',
+  },
+  otherTagsDescription: {
+    id: 'course-authoring.content-tags-drawer.other-tags.description',
+    defaultMessage: 'These tags are already applied, but you can\'t add new ones as you don\'t have access to their taxonomies.',
+    description: 'Description of "Other tags" subsection in tags drawer',
+  },
+  emptyDrawerContent: {
+    id: 'course-authoring.content-tags-drawer.empty',
+    defaultMessage: 'To use tags, please {link} or contact your administrator.',
+    description: 'Message when there are no taxonomies.',
+  },
+  emptyDrawerContentLink: {
+    id: 'course-authoring.content-tags-drawer.empty-link',
+    defaultMessage: 'enable a taxonomy',
+    description: 'Message of the link used in empty drawer message.',
+  },
+});
+
+export default messages;
diff --git a/src/content-tags-drawer/tags-sidebar-controls/TagsSidebarBody.jsx b/src/content-tags-drawer/tags-sidebar-controls/TagsSidebarBody.jsx
new file mode 100644
index 0000000000..ca7659a17f
--- /dev/null
+++ b/src/content-tags-drawer/tags-sidebar-controls/TagsSidebarBody.jsx
@@ -0,0 +1,107 @@
+// @ts-check
+import React, { useState, useMemo } from 'react';
+import {
+  Card, Stack, Button, Collapsible, Icon,
+} from '@openedx/paragon';
+import { ArrowDropDown, ArrowDropUp } from '@openedx/paragon/icons';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { useParams } from 'react-router-dom';
+import { ContentTagsDrawerSheet } from '..';
+
+import messages from '../messages';
+import { useContentTaxonomyTagsData } from '../data/apiHooks';
+import { LoadingSpinner } from '../../generic/Loading';
+import TagsTree from '../TagsTree';
+
+const TagsSidebarBody = () => {
+  const intl = useIntl();
+  const [showManageTags, setShowManageTags] = useState(false);
+  const contentId = useParams().blockId;
+  const onClose = () => setShowManageTags(false);
+
+  const {
+    data: contentTaxonomyTagsData,
+    isSuccess: isContentTaxonomyTagsLoaded,
+  } = useContentTaxonomyTagsData(contentId || '');
+
+  const buildTagsTree = (contentTags) => {
+    const resultTree = {};
+    contentTags.forEach(item => {
+      let currentLevel = resultTree;
+
+      item.lineage.forEach((key) => {
+        if (!currentLevel[key]) {
+          currentLevel[key] = {
+            children: {},
+            canChangeObjecttag: item.canChangeObjecttag,
+            canDeleteObjecttag: item.canDeleteObjecttag,
+          };
+        }
+
+        currentLevel = currentLevel[key].children;
+      });
+    });
+
+    return resultTree;
+  };
+
+  const tree = useMemo(() => {
+    const result = [];
+    if (isContentTaxonomyTagsLoaded && contentTaxonomyTagsData) {
+      contentTaxonomyTagsData.taxonomies.forEach((taxonomy) => {
+        result.push({
+          ...taxonomy,
+          tags: buildTagsTree(taxonomy.tags),
+        });
+      });
+    }
+    return result;
+  }, [isContentTaxonomyTagsLoaded, contentTaxonomyTagsData]);
+
+  return (
+    <>
+      <Card.Body
+        className="course-unit-sidebar-date tags-sidebar-body pl-2.5"
+      >
+        <Stack>
+          { isContentTaxonomyTagsLoaded
+            ? (
+              <Stack>
+                {tree.map((taxonomy) => (
+                  <div key={taxonomy.name}>
+                    <Collapsible
+                      className="tags-sidebar-taxonomy border-0 .font-weight-bold"
+                      styling="card"
+                      title={taxonomy.name}
+                      iconWhenClosed={<Icon src={ArrowDropDown} />}
+                      iconWhenOpen={<Icon src={ArrowDropUp} />}
+                    >
+                      <TagsTree tags={taxonomy.tags} parentKey={taxonomy.name} />
+                    </Collapsible>
+                  </div>
+                ))}
+              </Stack>
+            )
+            : (
+              <div className="d-flex justify-content-center">
+                <LoadingSpinner />
+              </div>
+            )}
+
+          <Button className="mt-3 ml-2" variant="outline-primary" size="sm" onClick={() => setShowManageTags(true)}>
+            {intl.formatMessage(messages.manageTagsButton)}
+          </Button>
+        </Stack>
+      </Card.Body>
+      <ContentTagsDrawerSheet
+        id={contentId}
+        onClose={onClose}
+        showSheet={showManageTags}
+      />
+    </>
+  );
+};
+
+TagsSidebarBody.propTypes = {};
+
+export default TagsSidebarBody;
diff --git a/src/content-tags-drawer/tags-sidebar-controls/TagsSidebarBody.test.jsx b/src/content-tags-drawer/tags-sidebar-controls/TagsSidebarBody.test.jsx
new file mode 100644
index 0000000000..32be90bf44
--- /dev/null
+++ b/src/content-tags-drawer/tags-sidebar-controls/TagsSidebarBody.test.jsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import TagsSidebarBody from './TagsSidebarBody';
+import { useContentTaxonomyTagsData } from '../data/apiHooks';
+import { contentTaxonomyTagsMock } from '../__mocks__';
+
+const contentId = 'block-v1:SampleTaxonomyOrg1+STC1+2023_1+type@vertical+block@aaf8b8eb86b54281aeeab12499d2cb0b';
+
+jest.mock('../data/apiHooks', () => ({
+  useContentTaxonomyTagsData: jest.fn(() => ({
+    isSuccess: false,
+    data: {},
+  })),
+}));
+jest.mock('../ContentTagsDrawer', () => jest.fn(() => <div>Mocked ContentTagsDrawer</div>));
+
+const RootWrapper = () => (
+  <IntlProvider locale="en" messages={{}}>
+    <TagsSidebarBody />
+  </IntlProvider>
+);
+
+describe('<TagSidebarBody>', () => {
+  it('shows spinner before the content data query is complete', () => {
+    render(<RootWrapper />);
+    expect(screen.getByRole('status')).toBeInTheDocument();
+  });
+
+  it('should render data after wuery is complete', () => {
+    useContentTaxonomyTagsData.mockReturnValue({
+      isSuccess: true,
+      data: contentTaxonomyTagsMock[contentId],
+    });
+    render(<RootWrapper />);
+    const taxonomyButton = screen.getByRole('button', { name: /hierarchicaltaxonomy/i });
+    expect(taxonomyButton).toBeInTheDocument();
+
+    /// ContentTagsDrawer must be closed
+    expect(screen.queryByText('Mocked ContentTagsDrawer')).not.toBeInTheDocument();
+  });
+
+  it('should open ContentTagsDrawer', () => {
+    useContentTaxonomyTagsData.mockReturnValue({
+      isSuccess: true,
+      data: contentTaxonomyTagsMock[contentId],
+    });
+    render(<RootWrapper />);
+
+    const manageButton = screen.getByRole('button', { name: /manage tags/i });
+    fireEvent.click(manageButton);
+
+    expect(screen.getByText('Mocked ContentTagsDrawer')).toBeInTheDocument();
+  });
+});
diff --git a/src/content-tags-drawer/tags-sidebar-controls/TagsSidebarControls.scss b/src/content-tags-drawer/tags-sidebar-controls/TagsSidebarControls.scss
new file mode 100644
index 0000000000..a3c0978f8c
--- /dev/null
+++ b/src/content-tags-drawer/tags-sidebar-controls/TagsSidebarControls.scss
@@ -0,0 +1,23 @@
+.tags-sidebar {
+  .tags-sidebar-body {
+    .tags-sidebar-taxonomy {
+      .collapsible-trigger {
+        font-weight: bold;
+        border: none;
+        justify-content: start;
+        padding-left: 0;
+        padding-bottom: 0;
+
+        .collapsible-icon {
+          order: -1;
+          margin-left: 0;
+        }
+      }
+
+      .collapsible-body {
+        padding-top: 0;
+        padding-bottom: 0;
+      }
+    }
+  }
+}
diff --git a/src/content-tags-drawer/tags-sidebar-controls/TagsSidebarHeader.jsx b/src/content-tags-drawer/tags-sidebar-controls/TagsSidebarHeader.jsx
new file mode 100644
index 0000000000..9101d30f2f
--- /dev/null
+++ b/src/content-tags-drawer/tags-sidebar-controls/TagsSidebarHeader.jsx
@@ -0,0 +1,36 @@
+// @ts-check
+import React from 'react';
+import { Stack } from '@openedx/paragon';
+import { useParams } from 'react-router-dom';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import { useContentTagsCount } from '../../generic/data/apiHooks';
+import messages from '../messages';
+import TagCount from '../../generic/tag-count';
+
+const TagsSidebarHeader = () => {
+  const intl = useIntl();
+  const contentId = useParams().blockId;
+
+  const {
+    data: contentTagsCount,
+    isSuccess: isContentTagsCountLoaded,
+  } = useContentTagsCount(contentId);
+
+  return (
+    <Stack
+      className="course-unit-sidebar-header justify-content-between pb-1"
+      direction="horizontal"
+    >
+      <h3 className="course-unit-sidebar-header-title m-0">
+        {intl.formatMessage(messages.tagsSidebarTitle)}
+      </h3>
+      { isContentTagsCountLoaded
+        && <TagCount count={contentTagsCount} />}
+    </Stack>
+  );
+};
+
+TagsSidebarHeader.propTypes = {};
+
+export default TagsSidebarHeader;
diff --git a/src/content-tags-drawer/tags-sidebar-controls/TagsSidebarHeader.test.jsx b/src/content-tags-drawer/tags-sidebar-controls/TagsSidebarHeader.test.jsx
new file mode 100644
index 0000000000..05188b1a6c
--- /dev/null
+++ b/src/content-tags-drawer/tags-sidebar-controls/TagsSidebarHeader.test.jsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import TagsSidebarHeader from './TagsSidebarHeader';
+
+const mockGetTagsCount = jest.fn();
+
+jest.mock('../../generic/data/api', () => ({
+  ...jest.requireActual('../../generic/data/api'),
+  getTagsCount: () => mockGetTagsCount(),
+}));
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useParams: () => ({ blockId: '123' }),
+}));
+
+const queryClient = new QueryClient();
+
+const RootWrapper = () => (
+  <IntlProvider locale="en" messages={{}}>
+    <QueryClientProvider client={queryClient}>
+      <TagsSidebarHeader />
+    </QueryClientProvider>
+  </IntlProvider>
+);
+
+describe('<TagsSidebarHeader>', () => {
+  it('should render count only after query is complete', async () => {
+    let resolvePromise;
+    mockGetTagsCount.mockReturnValueOnce(new Promise((resolve) => { resolvePromise = resolve; }));
+    render(<RootWrapper />);
+    expect(screen.getByRole('heading', { name: /unit tags/i })).toBeInTheDocument();
+    expect(screen.queryByText('17')).not.toBeInTheDocument();
+    resolvePromise({ 123: 17 });
+    expect(await screen.findByText('17')).toBeInTheDocument();
+  });
+});
diff --git a/src/content-tags-drawer/tags-sidebar-controls/index.jsx b/src/content-tags-drawer/tags-sidebar-controls/index.jsx
new file mode 100644
index 0000000000..98ffc5e7c4
--- /dev/null
+++ b/src/content-tags-drawer/tags-sidebar-controls/index.jsx
@@ -0,0 +1,13 @@
+import TagsSidebarHeader from './TagsSidebarHeader';
+import TagsSidebarBody from './TagsSidebarBody';
+
+const TagsSidebarControls = () => (
+  <>
+    <TagsSidebarHeader />
+    <TagsSidebarBody />
+  </>
+);
+
+TagsSidebarControls.propTypes = {};
+
+export default TagsSidebarControls;
diff --git a/src/content-tags-drawer/utils.ts b/src/content-tags-drawer/utils.ts
new file mode 100644
index 0000000000..ff1d71321a
--- /dev/null
+++ b/src/content-tags-drawer/utils.ts
@@ -0,0 +1,2 @@
+export const extractOrgFromContentId = (contentId: string): string => contentId.split('+')[0].split(':')[1];
+export const languageExportId = 'languages-v1';
diff --git a/src/course-checklist/AriaLiveRegion.jsx b/src/course-checklist/AriaLiveRegion.jsx
new file mode 100644
index 0000000000..06685be3de
--- /dev/null
+++ b/src/course-checklist/AriaLiveRegion.jsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { injectIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
+
+import messages from './messages';
+
+const AriaLiveRegion = ({
+  isCourseLaunchChecklistLoading,
+  isCourseBestPracticeChecklistLoading,
+  enableQuality,
+}) => {
+  const courseLaunchLoadingMessage = isCourseLaunchChecklistLoading
+    ? <FormattedMessage {...messages.launchChecklistLoadingLabel} />
+    : <FormattedMessage {...messages.launchChecklistDoneLoadingLabel} />;
+
+  const courseBestPracticesLoadingMessage = isCourseBestPracticeChecklistLoading
+    ? <FormattedMessage {...messages.bestPracticesChecklistLoadingLabel} />
+    : <FormattedMessage {...messages.bestPracticesChecklistDoneLoadingLabel} />;
+
+  return (
+    <div className="sr-only" aria-live="polite" role="status">
+      <div>
+        {courseLaunchLoadingMessage}
+      </div>
+      {enableQuality ? <div>{courseBestPracticesLoadingMessage}</div> : null}
+    </div>
+  );
+};
+
+AriaLiveRegion.propTypes = {
+  isCourseLaunchChecklistLoading: PropTypes.bool.isRequired,
+  isCourseBestPracticeChecklistLoading: PropTypes.bool.isRequired,
+  enableQuality: PropTypes.bool.isRequired,
+};
+
+export default injectIntl(AriaLiveRegion);
diff --git a/src/course-checklist/ChecklistSection/ChecklistItemBody.jsx b/src/course-checklist/ChecklistSection/ChecklistItemBody.jsx
new file mode 100644
index 0000000000..703dd8c414
--- /dev/null
+++ b/src/course-checklist/ChecklistSection/ChecklistItemBody.jsx
@@ -0,0 +1,95 @@
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
+import { ActionRow, Button, Icon } from '@openedx/paragon';
+import { useSelector } from 'react-redux';
+import { CheckCircle, RadioButtonUnchecked } from '@openedx/paragon/icons';
+import { getConfig } from '@edx/frontend-platform';
+
+import { getWaffleFlags } from '../../data/selectors';
+import messages from './messages';
+
+const getUpdateLinks = (courseId, waffleFlags) => {
+  const baseUrl = getConfig().STUDIO_BASE_URL;
+  const isLegacyGradingUrl = !waffleFlags.useNewGradingPage;
+  const isLegacyCertificateUrl = !waffleFlags.useNewCertificatesPage;
+  const isLegacyCourseDatesUrl = !waffleFlags.useNewScheduleDetailsPage;
+  const isLegacyOutlineUrl = !waffleFlags.useNewCourseOutlinePage;
+
+  return {
+    welcomeMessage: `/course/${courseId}/course_info`,
+    gradingPolicy: isLegacyGradingUrl
+      ? `${baseUrl}/settings/grading/${courseId}` : `/course/${courseId}/settings/grading`,
+    certificate: isLegacyCertificateUrl
+      ? `${baseUrl}/certificates/${courseId}` : `/course/${courseId}/certificates`,
+    courseDates: isLegacyCourseDatesUrl
+      ? `${baseUrl}/settings/details/${courseId}#schedule` : `/course/${courseId}/settings/details/#schedule`,
+    proctoringEmail: `${baseUrl}/pages-and-resources/proctoring/settings`,
+    outline: isLegacyOutlineUrl ? `${baseUrl}/course/${courseId}` : `/course/${courseId}`,
+  };
+};
+
+const ChecklistItemBody = ({
+  courseId,
+  checkId,
+  isCompleted,
+}) => {
+  const intl = useIntl();
+  const waffleFlags = useSelector(getWaffleFlags);
+  const updateLinks = getUpdateLinks(courseId, waffleFlags);
+
+  return (
+    <ActionRow>
+      <div className="mr-3" id={`icon-${checkId}`} data-testid={`icon-${checkId}`}>
+        {isCompleted ? (
+          <Icon
+            data-testid="completed-icon"
+            src={CheckCircle}
+            className="text-success"
+            style={{ height: '32px', width: '32px' }}
+            screenReaderText={intl.formatMessage(messages.completedItemLabel)}
+          />
+        ) : (
+          <Icon
+            data-testid="uncompleted-icon"
+            src={RadioButtonUnchecked}
+            style={{ height: '32px', width: '32px' }}
+            screenReaderText={intl.formatMessage(messages.uncompletedItemLabel)}
+          />
+        )}
+      </div>
+      <div>
+        <div>
+          <FormattedMessage {...messages[`${checkId}ShortDescription`]} />
+        </div>
+        <div className="small">
+          <FormattedMessage {...messages[`${checkId}LongDescription`]} />
+        </div>
+      </div>
+      <ActionRow.Spacer />
+      {updateLinks?.[checkId] && (
+        <Link
+          to={updateLinks[checkId]}
+          data-testid="update-link"
+        >
+          <Button size="sm">
+            <FormattedMessage {...messages.updateLinkLabel} />
+          </Button>
+        </Link>
+      )}
+    </ActionRow>
+  );
+};
+
+ChecklistItemBody.defaultProps = {
+  updateLink: null,
+};
+
+ChecklistItemBody.propTypes = {
+  courseId: PropTypes.string.isRequired,
+  checkId: PropTypes.string.isRequired,
+  isCompleted: PropTypes.bool.isRequired,
+  updateLink: PropTypes.string,
+};
+
+export default ChecklistItemBody;
diff --git a/src/course-checklist/ChecklistSection/ChecklistItemComment.jsx b/src/course-checklist/ChecklistSection/ChecklistItemComment.jsx
new file mode 100644
index 0000000000..deec84f2c3
--- /dev/null
+++ b/src/course-checklist/ChecklistSection/ChecklistItemComment.jsx
@@ -0,0 +1,131 @@
+import PropTypes from 'prop-types';
+import { useSelector } from 'react-redux';
+import { injectIntl, FormattedMessage, FormattedNumber } from '@edx/frontend-platform/i18n';
+import { Icon } from '@openedx/paragon';
+import { Link } from 'react-router-dom';
+import { ModeComment } from '@openedx/paragon/icons';
+import { getConfig } from '@edx/frontend-platform';
+import { getWaffleFlags } from '../../data/selectors';
+import messages from './messages';
+
+const ChecklistItemComment = ({
+  courseId,
+  checkId,
+  data,
+}) => {
+  const waffleFlags = useSelector(getWaffleFlags);
+
+  const getPathToCourseOutlinePage = (assignmentId) => (waffleFlags.useNewCourseOutlinePage
+    ? `/course/${courseId}#${assignmentId}` : `${getConfig().STUDIO_BASE_URL}/course/${courseId}#${assignmentId}`);
+
+  const commentWrapper = (comment) => (
+    <div className="row m-0 mt-3 pt-3 border-top align-items-center" data-identifier="comment">
+      <div className="mr-4">
+        <Icon src={ModeComment} size="lg" style={{ height: '32px', width: '32px' }} />
+      </div>
+      <div className="small">
+        {comment}
+      </div>
+    </div>
+  );
+
+  if (checkId === 'gradingPolicy') {
+    const sumOfWeights = data?.grades.sumOfWeights || 0;
+    const showGradingCommentSection = Object.keys(data).length > 0 && sumOfWeights !== 1;
+
+    const weightSumPercentage = (sumOfWeights * 100).toFixed(2);
+    const comment = (
+      <FormattedMessage
+        {...messages.gradingPolicyComment}
+        values={{
+          percent: (
+            <FormattedNumber
+              maximumFractionDigits={2}
+              minimumFractionDigits={2}
+              value={weightSumPercentage}
+            />
+          ),
+        }}
+      />
+    );
+    return (showGradingCommentSection ? (
+      commentWrapper(comment)
+    ) : null);
+  }
+
+  if (checkId === 'assignmentDeadlines') {
+    const showDeadlinesCommentSection = Object.keys(data).length > 0
+    && (
+      data.assignments.assignmentsWithDatesBeforeStart.length > 0
+      || data?.assignments.assignmentsWithDatesAfterEnd.length > 0
+      || data?.assignments.assignmentsWithOraDatesBeforeStart.length > 0
+      || data?.assignments.assignmentsWithOraDatesAfterEnd.length > 0
+    );
+
+    const allGradedAssignmentsOutsideDateRange = [].concat(
+      data?.assignments.assignmentsWithDatesBeforeStart,
+      data?.assignments.assignmentsWithDatesAfterEnd,
+      data?.assignments.assignmentsWithOraDatesBeforeStart,
+      data?.assignments.assignmentsWithOraDatesAfterEnd,
+    );
+
+    // de-dupe in case one assignment has multiple violations
+    const assignmentsMap = new Map();
+    allGradedAssignmentsOutsideDateRange.forEach(
+      (assignment) => { assignmentsMap.set(assignment.id, assignment); },
+    );
+    const gradedAssignmentsOutsideDateRange = [];
+    assignmentsMap.forEach(
+      (value) => {
+        gradedAssignmentsOutsideDateRange.push(value);
+      },
+    );
+
+    const comment = (
+      <>
+        <FormattedMessage {...messages.assignmentDeadlinesComment} />
+        <ul className="assignment-list">
+          {gradedAssignmentsOutsideDateRange.map(assignment => (
+            <li className="assignment-list-item" key={assignment.id}>
+              <Link to={getPathToCourseOutlinePage(assignment.id)}>
+                {assignment.displayName}
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </>
+    );
+    return (showDeadlinesCommentSection ? (
+      commentWrapper(comment)
+    ) : null);
+  }
+
+  return null;
+};
+
+ChecklistItemComment.propTypes = {
+  courseId: PropTypes.string.isRequired,
+  checkId: PropTypes.string.isRequired,
+  outlineUrl: PropTypes.string.isRequired,
+  data: PropTypes.oneOfType([
+    PropTypes.shape({
+      grades: PropTypes.shape({
+        sumOfWeights: PropTypes.number,
+      }),
+    }).isRequired,
+    PropTypes.shape({
+      assignments: PropTypes.shape({
+        totalNumber: PropTypes.number,
+        totalVisible: PropTypes.number,
+        /* eslint-disable react/forbid-prop-types */
+        assignmentsWithDatesBeforeStart: PropTypes.array,
+        assignmentsWithDatesAfterEnd: PropTypes.array,
+        assignmentsWithOraDatesBeforeStart: PropTypes.array,
+        assignmentsWithOraDatesAfterEnd: PropTypes.array,
+        /* eslint-enable react/forbid-prop-types */
+      }),
+    }).isRequired,
+  ]).isRequired,
+};
+
+export default injectIntl(ChecklistItemComment);
diff --git a/src/course-checklist/ChecklistSection/ChecklistSection.jsx b/src/course-checklist/ChecklistSection/ChecklistSection.jsx
new file mode 100644
index 0000000000..3b11b6e05b
--- /dev/null
+++ b/src/course-checklist/ChecklistSection/ChecklistSection.jsx
@@ -0,0 +1,132 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { injectIntl } from '@edx/frontend-platform/i18n';
+import { Container, Stack } from '@openedx/paragon';
+
+import { LoadingSpinner } from '../../generic/Loading';
+import { getCompletionCount, useChecklistState } from './hooks';
+import ChecklistItemBody from './ChecklistItemBody';
+import ChecklistItemComment from './ChecklistItemComment';
+import { checklistItems } from './utils/courseChecklistData';
+
+const ChecklistSection = ({
+  courseId,
+  dataHeading,
+  data,
+  idPrefix,
+  isLoading,
+}) => {
+  const dataList = checklistItems[idPrefix];
+  const getCompletionCountID = () => (`${idPrefix}-completion-count`);
+  const { checklistState } = useChecklistState({ data, dataList });
+  const { checks, totalCompletedChecks, values } = checklistState;
+
+  return (
+    <Container>
+      <h3 aria-describedby={getCompletionCountID()} className="lead">{dataHeading}</h3>
+      {isLoading ? (
+        <div className="row justify-content-center" data-testid="loading-spinner">
+          <LoadingSpinner />
+        </div>
+      ) : (
+        <>
+          <div data-testid="completion-subheader">
+            {getCompletionCount(checks, totalCompletedChecks)}
+          </div>
+          <Stack gap={3} className="mt-3">
+            {checks.map(check => {
+              const checkId = check.id;
+              const isCompleted = values[checkId];
+              return (
+                <div
+                  className={`bg-white border py-3 px-4 ${isCompleted && 'checklist-item-complete'}`}
+                  id={`checklist-item-${checkId}`}
+                  data-testid={`checklist-item-${checkId}`}
+                  key={checkId}
+                >
+                  <ChecklistItemBody courseId={courseId} {...{ checkId, isCompleted }} />
+                  <div data-testid={`comment-section-${checkId}`}>
+                    <ChecklistItemComment {...{ courseId, checkId, data }} />
+                  </div>
+                </div>
+              );
+            })}
+          </Stack>
+        </>
+      )}
+    </Container>
+  );
+};
+
+ChecklistSection.defaultProps = {
+  data: {},
+};
+
+ChecklistSection.propTypes = {
+  courseId: PropTypes.string.isRequired,
+  dataHeading: PropTypes.string.isRequired,
+  data: PropTypes.oneOfType([
+    PropTypes.shape({
+      assignments: PropTypes.shape({
+        totalNumber: PropTypes.number,
+        totalVisible: PropTypes.number,
+        numWithDatesBeforeEnd: PropTypes.number,
+        numWithDates: PropTypes.number,
+        numWithDatesAfterStart: PropTypes.number,
+      }),
+      dates: PropTypes.shape({
+        hasStartDate: PropTypes.bool,
+        hasEndDate: PropTypes.bool,
+      }),
+      updates: PropTypes.shape({
+        hasUpdate: PropTypes.bool,
+      }),
+      certificates: PropTypes.shape({
+        isEnabled: PropTypes.bool,
+        isActivated: PropTypes.bool,
+        hasCertificate: PropTypes.bool,
+      }),
+      grades: PropTypes.shape({
+        sumOfWeights: PropTypes.number,
+      }),
+      is_self_paced: PropTypes.bool,
+    }).isRequired,
+    PropTypes.shape({
+      assignments: PropTypes.shape({
+        totalNumber: PropTypes.number,
+        totalVisible: PropTypes.number,
+        /* eslint-disable react/forbid-prop-types */
+        assignmentsWithDatesBeforeStart: PropTypes.array,
+        assignmentsWithDatesAfterEnd: PropTypes.array,
+        assignmentsWithOraDatesBeforeStart: PropTypes.array,
+        assignmentsWithOraDatesAfterEnd: PropTypes.array,
+        /* eslint-enable react/forbid-prop-types */
+      }),
+      dates: PropTypes.shape({
+        hasStartDate: PropTypes.bool,
+        hasEndDate: PropTypes.bool,
+      }),
+      updates: PropTypes.shape({
+        hasUpdate: PropTypes.bool,
+      }),
+      certificates: PropTypes.shape({
+        isEnabled: PropTypes.bool,
+        isActivated: PropTypes.bool,
+        hasCertificate: PropTypes.bool,
+      }),
+      grades: PropTypes.shape({
+        hasGradingPolicy: PropTypes.bool,
+        sumOfWeights: PropTypes.number,
+      }),
+      proctoring: PropTypes.shape({
+        needsProctoringEscalationEmail: PropTypes.bool,
+        hasProctoringEscalation_email: PropTypes.bool,
+      }),
+      isSelfPaced: PropTypes.bool,
+    }).isRequired,
+  ]),
+  idPrefix: PropTypes.string.isRequired,
+  isLoading: PropTypes.bool.isRequired,
+};
+
+export default injectIntl(ChecklistSection);
diff --git a/src/course-checklist/ChecklistSection/ChecklistSection.scss b/src/course-checklist/ChecklistSection/ChecklistSection.scss
new file mode 100644
index 0000000000..f067970138
--- /dev/null
+++ b/src/course-checklist/ChecklistSection/ChecklistSection.scss
@@ -0,0 +1,22 @@
+.assignment-list-item {
+  list-style: none;
+  display: inline-block;
+
+  &::after {
+    content: ",";
+  }
+
+  &:last-child {
+    &::after { content: ""; }
+  }
+}
+
+.assignment-list {
+  display: inline;
+  padding-inline-start: map-get($spacers, 1);
+}
+
+//complete checklist item style
+.checklist-item-complete {
+  box-shadow: -5px 0 0 0 $success-500;
+}
diff --git a/src/course-checklist/ChecklistSection/ChecklistSection.test.jsx b/src/course-checklist/ChecklistSection/ChecklistSection.test.jsx
new file mode 100644
index 0000000000..09aa81d338
--- /dev/null
+++ b/src/course-checklist/ChecklistSection/ChecklistSection.test.jsx
@@ -0,0 +1,225 @@
+import { camelCaseObject } from '@edx/frontend-platform';
+
+import {
+  initializeMocks, render, screen, within,
+} from '../../testUtils';
+import { getApiWaffleFlagsUrl } from '../../data/api';
+import { fetchWaffleFlags } from '../../data/thunks';
+import { generateCourseLaunchData } from '../factories/mockApiResponses';
+import { executeThunk } from '../../utils';
+import { checklistItems } from './utils/courseChecklistData';
+import messages from './messages';
+
+import ChecklistSection from '.';
+
+const testData = camelCaseObject(generateCourseLaunchData());
+
+const courseId = '123';
+
+const defaultProps = {
+  courseId,
+  data: testData,
+  dataHeading: 'Test checklist',
+  idPrefix: 'launchChecklist',
+  isLoading: false,
+};
+
+const testChecklistData = checklistItems[defaultProps.idPrefix];
+
+const completedItemIds = ['welcomeMessage', 'courseDates'];
+
+const renderComponent = (props) => {
+  render(<ChecklistSection {...props} />);
+};
+
+describe('ChecklistSection', () => {
+  beforeEach(async () => {
+    const { axiosMock, reduxStore } = initializeMocks();
+    axiosMock
+      .onGet(getApiWaffleFlagsUrl(courseId))
+      .reply(200, {
+        useNewGradingPage: true,
+        useNewCertificatesPage: true,
+        useNewScheduleDetailsPage: true,
+        useNewCourseOutlinePage: true,
+      });
+    await executeThunk(fetchWaffleFlags(courseId), reduxStore.dispatch);
+  });
+
+  it('a heading using the dataHeading prop', () => {
+    renderComponent(defaultProps);
+
+    expect(screen.getByText(defaultProps.dataHeading)).toBeVisible();
+  });
+
+  it('completion count text', () => {
+    renderComponent(defaultProps);
+
+    const completionText = `${completedItemIds.length}/6 completed`;
+    expect(screen.getByTestId('completion-subheader').textContent).toEqual(completionText);
+  });
+
+  it('a loading spinner when isLoading prop is true', () => {
+    renderComponent({ ...defaultProps, isLoading: true });
+
+    const completionSubheader = screen.queryByTestId('completion-subheader');
+    expect(completionSubheader).toBeNull();
+
+    const loadingSpinner = screen.getByTestId('loading-spinner');
+    expect(loadingSpinner).toBeVisible();
+  });
+
+  it('the correct number of checks', () => {
+    renderComponent(defaultProps);
+
+    const listItems = screen.getAllByTestId('checklist-item', { exact: false });
+    expect(listItems).toHaveLength(6);
+  });
+
+  it('welcomeMessage comment section should be null', () => {
+    renderComponent(defaultProps);
+
+    const comment = screen.getByTestId('comment-section-welcomeMessage');
+    expect(comment.children).toHaveLength(0);
+  });
+
+  it('certificate comment section should be null', () => {
+    renderComponent(defaultProps);
+
+    const comment = screen.getByTestId('comment-section-certificate');
+    expect(comment.children).toHaveLength(0);
+  });
+
+  it('courseDates comment section should be null', () => {
+    renderComponent(defaultProps);
+
+    const comment = screen.getByTestId('comment-section-courseDates');
+    expect(comment.children).toHaveLength(0);
+  });
+
+  it('proctoringEmail comment section should be null', () => {
+    renderComponent(defaultProps);
+
+    const comment = screen.getByTestId('comment-section-proctoringEmail');
+    expect(comment.children).toHaveLength(0);
+  });
+
+  describe('gradingPolicy comment section', () => {
+    it('should be null if sum of weights is equal to 1', () => {
+      const props = {
+        ...defaultProps,
+        data: {
+          ...defaultProps.data,
+          grades: {
+            ...defaultProps.data.grades,
+            sumOfWeights: 1,
+          },
+        },
+      };
+      renderComponent(props);
+
+      const comment = screen.getByTestId('comment-section-gradingPolicy');
+      expect(comment.children).toHaveLength(0);
+    });
+
+    it('should have comment section', () => {
+      renderComponent(defaultProps);
+
+      const comment = screen.getByTestId('comment-section-gradingPolicy');
+      expect(comment.children).toHaveLength(1);
+
+      expect(screen.getByText(
+        'Your current grading policy adds up to',
+        { exact: false },
+      )).toBeVisible();
+    });
+  });
+
+  describe('assignmentDeadlines comment section', () => {
+    it('should be null if assignments with dates before start and after end are empty', () => {
+      const props = {
+        ...defaultProps,
+        data: {
+          ...defaultProps.data,
+          assignments: {
+            ...defaultProps.data.assignments,
+            assignmentsWithDatesAfterEnd: [],
+            assignmentsWithOraDatesBeforeStart: [],
+          },
+        },
+      };
+      renderComponent(props);
+
+      const comment = screen.getByTestId('comment-section-assignmentDeadlines');
+      expect(comment.children).toHaveLength(0);
+    });
+
+    it('should have comment section', () => {
+      renderComponent(defaultProps);
+
+      const comment = screen.getByTestId('comment-section-assignmentDeadlines');
+      const assigmentLinks = within(comment).getAllByRole('link');
+
+      expect(comment.children).toHaveLength(1);
+
+      expect(screen.getByText(
+        messages.assignmentDeadlinesComment.defaultMessage,
+        { exact: false },
+      )).toBeVisible();
+
+      expect(assigmentLinks).toHaveLength(2);
+
+      expect(assigmentLinks[0].textContent).toEqual('Subsection');
+
+      expect(assigmentLinks[1].textContent).toEqual('ORA subsection');
+    });
+  });
+
+  describe('Checklist Component', () => {
+    let checklistData;
+    let updateLinks;
+
+    beforeEach(() => {
+      renderComponent(defaultProps);
+
+      checklistData = testChecklistData.map((item) => ({
+        itemId: item.id,
+        checklistItem: screen.getAllByTestId(`checklist-item-${item.id}`),
+        icon: screen.getAllByTestId(`icon-${item.id}`),
+        shortDescription: messages[`${item.id}ShortDescription`].defaultMessage,
+        longDescription: messages[`${item.id}LongDescription`].defaultMessage,
+      }));
+
+      updateLinks = screen.getAllByTestId('update-link');
+    });
+
+    it('should display the correct icons based on completion status', () => {
+      checklistData.forEach(({ itemId, icon }) => {
+        const { queryByTestId } = within(icon[0]);
+
+        if (completedItemIds.includes(itemId)) {
+          expect(queryByTestId('completed-icon')).not.toBeNull();
+        } else {
+          expect(queryByTestId('uncompleted-icon')).not.toBeNull();
+        }
+      });
+    });
+
+    it('should display short and long descriptions for each checklist item', () => {
+      checklistData.forEach(({ checklistItem, shortDescription, longDescription }) => {
+        const { getByText } = within(checklistItem[0]);
+
+        expect(getByText(shortDescription)).toBeVisible();
+        expect(getByText(longDescription)).toBeVisible();
+      });
+    });
+
+    it('should have valid update links for each checklist item', () => {
+      checklistData.forEach(({ itemId }) => {
+        updateLinks.forEach((link) => {
+          expect(link).toHaveAttribute('href', updateLinks[itemId]);
+        });
+      });
+    });
+  });
+});
diff --git a/src/course-checklist/ChecklistSection/hooks.jsx b/src/course-checklist/ChecklistSection/hooks.jsx
new file mode 100644
index 0000000000..8032e8bb99
--- /dev/null
+++ b/src/course-checklist/ChecklistSection/hooks.jsx
@@ -0,0 +1,71 @@
+import { useEffect, useState } from 'react';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+
+import messages from './messages';
+import getFilteredChecklist from './utils/getFilteredChecklist';
+import getValidatedValue from './utils/getValidatedValue';
+
+export const useChecklistState = ({ data, dataList }) => {
+  const [checklistState, setChecklistState] = useState({
+    checks: [],
+    totalCompletedChecks: 0,
+    values: {},
+  });
+
+  const updateChecklistState = () => {
+    if (Object.keys(data).length > 0) {
+      const { isSelfPaced } = data;
+      const hasCertificatesEnabled = data.certificates && data.certificates.isEnabled;
+      const hasHighlightsEnabled = data.sections && data.sections.highlightsEnabled;
+      const needsProctoringEscalationEmail = (
+        data.proctoring && data.proctoring.needsProctoringEscalationEmail
+      );
+      const checks = getFilteredChecklist(
+        dataList,
+        isSelfPaced,
+        hasCertificatesEnabled,
+        hasHighlightsEnabled,
+        needsProctoringEscalationEmail,
+      );
+
+      const values = {};
+      let totalCompletedChecks = 0;
+
+      checks.forEach((check) => {
+        const value = getValidatedValue(data, check.id);
+
+        if (value) {
+          totalCompletedChecks += 1;
+        }
+
+        values[check.id] = value;
+      });
+
+      setChecklistState({
+        checks,
+        totalCompletedChecks,
+        values,
+      });
+    }
+  };
+
+  useEffect(() => {
+    updateChecklistState();
+  }, [data]);
+
+  return {
+    checklistState,
+    setChecklistState,
+  };
+};
+
+export const getCompletionCount = (checks, totalCompletedChecks) => {
+  const totalChecks = Object.values(checks).length;
+
+  return (
+    <FormattedMessage
+      {...messages.completionCountLabel}
+      values={{ completed: totalCompletedChecks, total: totalChecks }}
+    />
+  );
+};
diff --git a/src/course-checklist/ChecklistSection/index.js b/src/course-checklist/ChecklistSection/index.js
new file mode 100644
index 0000000000..fa1df413be
--- /dev/null
+++ b/src/course-checklist/ChecklistSection/index.js
@@ -0,0 +1,3 @@
+import ChecklistSection from './ChecklistSection';
+
+export default ChecklistSection;
diff --git a/src/course-checklist/ChecklistSection/messages.js b/src/course-checklist/ChecklistSection/messages.js
new file mode 100644
index 0000000000..362f568d10
--- /dev/null
+++ b/src/course-checklist/ChecklistSection/messages.js
@@ -0,0 +1,146 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  welcomeMessageShortDescription: {
+    id: 'welcomeMessageShortDescription',
+    defaultMessage: 'Add a welcome message',
+    description: 'Label for a section that describes a welcome message for a course',
+  },
+  welcomeMessageLongDescription: {
+    id: 'welcomeMessageLongDescription',
+    defaultMessage: 'Personally welcome learners into your course and prepare learners for a positive course experience.',
+    description: 'Description for a section that prompts a user to enter a welcome message for a course',
+  },
+  gradingPolicyShortDescription: {
+    id: 'gradingPolicyShortDescription',
+    defaultMessage: 'Create your course grading policy',
+    description: 'Label for a section that describes a grading policy for a course',
+  },
+  gradingPolicyLongDescription: {
+    id: 'gradingPolicyLongDescription',
+    defaultMessage: 'Establish your grading policy, including assignment types and passing score. All assignments add up to 100%.',
+    description: 'Description for a section that prompts a user to enter a grading policy for a course',
+  },
+  gradingPolicyComment: {
+    id: 'gradingPolicyComment',
+    defaultMessage: 'Your current grading policy adds up to {percent}%.',
+    description: 'Description for a section that displays a course\'s grading policy total',
+  },
+  certificateShortDescription: {
+    id: 'certificateShortDescription',
+    defaultMessage: 'Enable your certificate',
+    description: 'Label for a section that describes a certificate for completing a course',
+  },
+  certificateLongDescription: {
+    id: 'certificateLongDescription',
+    defaultMessage: 'Make sure that all text is correct, signatures have been uploaded, and the certificate has been activated.',
+    description: 'Description for a section that prompts a user to create a course completion certificate',
+  },
+  courseDatesShortDescription: {
+    id: 'courseDatesShortDescription',
+    defaultMessage: 'Set important course dates',
+    description: 'Label for a section that describes a certificate for completing a course',
+  },
+  courseDatesLongDescription: {
+    id: 'courseDatesLongDescription',
+    defaultMessage: 'Establish your course schedule, including when the course starts and ends.',
+    description: 'Description for a section that prompts a user to set up a course schedule',
+  },
+  assignmentDeadlinesShortDescription: {
+    id: 'assignmentDeadlinesShortDescription',
+    defaultMessage: 'Validate assignment deadlines',
+    description: 'Label for a section that describes course assignment deadlines',
+  },
+  assignmentDeadlinesLongDescription: {
+    id: 'assignmentDeadlinesLongDescription',
+    defaultMessage: 'Ensure all assignment deadlines are between course start and end dates.',
+    description: 'Description for a section that prompts a user to enter course assignment deadlines',
+  },
+  assignmentDeadlinesComment: {
+    id: 'assignmentDeadlinesComment',
+    defaultMessage: 'The following assignments have deadlines that do not fall between course start and end date:',
+    description: 'Description for a section that displays which assignments are outside of a course\'s start and end date',
+  },
+  videoDurationShortDescription: {
+    id: 'videoDurationShortDescription',
+    defaultMessage: 'Check video duration',
+    description: 'Label for a section that describes video durations',
+  },
+  videoDurationLongDescription: {
+    id: 'videoDurationLongDescription',
+    defaultMessage: 'Learners engage best with short videos followed by opportunities to practice. Ensure that 80% or more of course videos are less than 10 minutes long.',
+    description: 'Description for a section that prompts a user to follow best practices for video length',
+  },
+  mobileFriendlyVideoShortDescription: {
+    id: 'mobileFriendlyVideoShortDescription',
+    defaultMessage: 'Create mobile-friendly video',
+    description: 'Label for a section that describes mobile friendly videos',
+  },
+  mobileFriendlyVideoLongDescription: {
+    id: 'mobileFriendlyVideoLongDescription',
+    defaultMessage: 'Mobile-friendly videos can be viewed across all supported devices. Ensure that at least 90% of course videos are mobile friendly by uploading course videos to the edX video pipeline.',
+    description: 'Description for a section that prompts a user to follow best practices for mobile friendly videos',
+  },
+  diverseSequencesShortDescription: {
+    id: 'diverseSequencesShortDescription',
+    defaultMessage: 'Build diverse learning sequences',
+    description: 'Label for a section that describes diverse sequences of educational content',
+  },
+  diverseSequencesLongDescription: {
+    id: 'diverseSequencesLongDescription',
+    defaultMessage: 'Research shows that a diverse content experience drives learner engagement. We recommend that 80% or more of your learning sequences or subsections include multiple content types (such as video, discussion, or problem).',
+    description: 'Description for a section that prompts a user to follow best practices diverse sequences of educational content',
+  },
+  weeklyHighlightsShortDescription: {
+    id: 'weeklyHighlightsShortDescription',
+    defaultMessage: 'Set weekly highlights',
+    description: 'Label for a section that describes weekly highlights',
+  },
+  weeklyHighlightsLongDescription: {
+    id: 'weeklyHighlightsLongDescription',
+    defaultMessage: 'Enable and specify weekly highlights to keep learners engaged and on track in your course.',
+    description: 'Description for a section that prompts a user to follow best practices for course weekly highlights',
+  },
+  unitDepthShortDescription: {
+    id: 'unitDepthShortDescription',
+    defaultMessage: 'Manage unit depth',
+    description: 'Label for a section that describes course unit depth',
+  },
+  unitDepthLongDescription: {
+    id: 'unitDepthLongDescription',
+    defaultMessage: 'Breaking up course content into manageable pieces promotes learner engagement. We recommend units contain no more than three components.',
+    description: 'Description for a section that prompts a user to follow best practices for course unit depth',
+  },
+  proctoringEmailShortDescription: {
+    id: 'proctoringEmailShortDescription',
+    defaultMessage: 'Add a proctortrack escalation email',
+    description: 'Label for a section that describes proctoring escalation email',
+  },
+  proctoringEmailLongDescription: {
+    id: 'proctoringEmailLongDescription',
+    defaultMessage: 'Courses using Proctortrack require an escalation email. Ensure learners and Support can contact your course team regarding proctoring issues (e.g. appeals, exam resets, etc).',
+    description: 'Description for a section that prompts the user to add a Proctortrack escalation email for the course',
+  },
+  updateLinkLabel: {
+    id: 'updateLinkLabel',
+    defaultMessage: 'Update',
+    description: 'Label for a link that takes the user to a page where they can update settings',
+  },
+  completionCountLabel: {
+    id: 'completionCountLabel',
+    defaultMessage: '{completed}/{total} completed',
+    description: 'Label that describes how many tasks have been completed out of a total number of tasks',
+  },
+  completedItemLabel: {
+    id: 'completedItemLabel',
+    defaultMessage: 'completed',
+    description: 'Label that describes a completed task',
+  },
+  uncompletedItemLabel: {
+    id: 'uncompletedItemLabel',
+    defaultMessage: 'uncompleted',
+    description: 'Label that describes an uncompleted task',
+  },
+});
+
+export default messages;
diff --git a/src/course-checklist/ChecklistSection/utils/courseChecklistData.jsx b/src/course-checklist/ChecklistSection/utils/courseChecklistData.jsx
new file mode 100644
index 0000000000..c59d1f83b2
--- /dev/null
+++ b/src/course-checklist/ChecklistSection/utils/courseChecklistData.jsx
@@ -0,0 +1,56 @@
+export const filters = {
+  ALL: 'ALL',
+  SELF_PACED: 'SELF_PACED',
+  INSTRUCTOR_PACED: 'INSTRUCTOR_PACED',
+};
+
+export const checklistItems = {
+  launchChecklist: [
+    {
+      id: 'welcomeMessage',
+      pacingTypeFilter: filters.ALL,
+    },
+    {
+      id: 'gradingPolicy',
+      pacingTypeFilter: filters.ALL,
+    },
+    {
+      id: 'certificate',
+      pacingTypeFilter: filters.ALL,
+    },
+    {
+      id: 'courseDates',
+      pacingTypeFilter: filters.ALL,
+    },
+    {
+      id: 'assignmentDeadlines',
+      pacingTypeFilter: filters.INSTRUCTOR_PACED,
+    },
+    {
+      id: 'proctoringEmail',
+      pacingTypeFilter: filters.ALL,
+    },
+  ],
+  bestPracticesChecklist: [
+    {
+      id: 'videoDuration',
+      pacingTypeFilter: filters.ALL,
+    },
+    {
+      id: 'mobileFriendlyVideo',
+      pacingTypeFilter: filters.ALL,
+    },
+    {
+      id: 'diverseSequences',
+      pacingTypeFilter: filters.ALL,
+    },
+    {
+      id: 'weeklyHighlights',
+      pacingTypeFilter: filters.SELF_PACED,
+    },
+    {
+      id: 'unitDepth',
+      pacingTypeFilter: filters.ALL,
+    },
+  ],
+};
diff --git a/src/course-checklist/ChecklistSection/utils/courseChecklistValidators.js b/src/course-checklist/ChecklistSection/utils/courseChecklistValidators.js
new file mode 100644
index 0000000000..583ca4bac2
--- /dev/null
+++ b/src/course-checklist/ChecklistSection/utils/courseChecklistValidators.js
@@ -0,0 +1,76 @@
+export const hasWelcomeMessage = updates => (
+  updates.hasUpdate
+);
+
+export const hasGradingPolicy = grades => (
+  grades.hasGradingPolicy
+  && parseFloat(grades.sumOfWeights.toPrecision(2), 10) === 1.0
+);
+
+export const hasCertificate = certificates => (
+  certificates.isActivated && certificates.hasCertificate
+);
+
+export const hasDates = dates => (
+  dates.hasStartDate && dates.hasEndDate
+);
+
+export const hasAssignmentDeadlines = (assignments, dates) => {
+  if (!hasDates(dates)) {
+    return false;
+  } if (assignments.totalNumber === 0) {
+    return false;
+  } if (assignments.assignmentsWithDatesBeforeStart.length > 0) {
+    return false;
+  } if (assignments.assignmentsWithDatesAfterEnd.length > 0) {
+    return false;
+  } if (assignments.assignmentsWithOraDatesBeforeStart.length > 0) {
+    return false;
+  } if (assignments.assignmentsWithOraDatesAfterEnd.length > 0) {
+    return false;
+  }
+
+  return true;
+};
+
+export const hasShortVideoDuration = (videos) => {
+  if (videos.totalNumber === 0) {
+    return true;
+  } if (videos.totalNumber > 0 && videos.durations.median <= 600) {
+    return true;
+  }
+
+  return false;
+};
+
+export const hasMobileFriendlyVideos = (videos) => {
+  if (videos.totalNumber === 0) {
+    return true;
+  } if (videos.totalNumber > 0 && (videos.numMobileEncoded / videos.totalNumber) >= 0.9) {
+    return true;
+  }
+
+  return false;
+};
+
+export const hasDiverseSequences = (subsections) => {
+  if (subsections.totalVisible === 0) {
+    return false;
+  } if (subsections.totalVisible > 0) {
+    return ((subsections.numWithOneBlockType / subsections.totalVisible) < 0.2);
+  }
+
+  return false;
+};
+
+export const hasWeeklyHighlights = sections => (
+  sections.highlightsActiveForCourse && sections.highlightsEnabled
+);
+
+export const hasShortUnitDepth = units => (
+  units.numBlocks.median <= 3
+);
+
+export const hasProctoringEscalationEmail = proctoring => (
+  proctoring.hasProctoringEscalationEmail
+);
diff --git a/src/course-checklist/ChecklistSection/utils/courseChecklistValidators.test.js b/src/course-checklist/ChecklistSection/utils/courseChecklistValidators.test.js
new file mode 100644
index 0000000000..401475bc2f
--- /dev/null
+++ b/src/course-checklist/ChecklistSection/utils/courseChecklistValidators.test.js
@@ -0,0 +1,297 @@
+import * as validators from './courseChecklistValidators';
+
+describe('courseCheckValidators utility functions', () => {
+  describe('hasWelcomeMessage', () => {
+    it('returns true when course run has an update', () => {
+      expect(validators.hasWelcomeMessage({ hasUpdate: true })).toEqual(true);
+    });
+
+    it('returns false when course run does not have an update', () => {
+      expect(validators.hasWelcomeMessage({ hasUpdate: false })).toEqual(false);
+    });
+  });
+
+  describe('hasGradingPolicy', () => {
+    it('returns true when sum of weights is 1', () => {
+      expect(validators.hasGradingPolicy(
+        { hasGradingPolicy: true, sumOfWeights: 1 },
+      )).toEqual(true);
+    });
+
+    it('returns true when sum of weights is not 1 due to floating point approximation (1.00004)', () => {
+      expect(validators.hasGradingPolicy(
+        { hasGradingPolicy: true, sumOfWeights: 1.00004 },
+      )).toEqual(true);
+    });
+
+    it('returns false when sum of weights is not 1', () => {
+      expect(validators.hasGradingPolicy(
+        { hasGradingPolicy: true, sumOfWeights: 2 },
+      )).toEqual(false);
+    });
+
+    it('returns true when hasGradingPolicy is true', () => {
+      expect(validators.hasGradingPolicy(
+        { hasGradingPolicy: true, sumOfWeights: 1 },
+      )).toEqual(true);
+    });
+
+    it('returns false when hasGradingPolicy is false', () => {
+      expect(validators.hasGradingPolicy(
+        { hasGradingPolicy: false, sumOfWeights: 1 },
+      )).toEqual(false);
+    });
+  });
+
+  describe('hasCertificate', () => {
+    it('returns true when certificates are activated and course run has a certificate', () => {
+      expect(validators.hasCertificate({ isActivated: true, hasCertificate: true }))
+        .toEqual(true);
+    });
+
+    it('returns false when certificates are not activated and course run has a certificate', () => {
+      expect(validators.hasCertificate({ isActivated: false, hasCertificate: true }))
+        .toEqual(false);
+    });
+
+    it('returns false when certificates are activated and course run does not have a certificate', () => {
+      expect(validators.hasCertificate({ isActivated: true, hasCertificate: false }))
+        .toEqual(false);
+    });
+
+    it('returns false when certificates are not activated and course run does not have a certificate', () => {
+      expect(validators.hasCertificate({ isActivated: false, hasCertificate: false }))
+        .toEqual(false);
+    });
+  });
+
+  describe('hasDates', () => {
+    it('returns true when course run has start date and end date', () => {
+      expect(validators.hasDates({ hasStartDate: true, hasEndDate: true })).toEqual(true);
+    });
+
+    it('returns false when course run has no start date and end date', () => {
+      expect(validators.hasDates({ hasStartDate: false, hasEndDate: true })).toEqual(false);
+    });
+
+    it('returns true when course run has start date and no end date', () => {
+      expect(validators.hasDates({ hasStartDate: true, hasEndDate: false })).toEqual(false);
+    });
+
+    it('returns true when course run has no start date and no end date', () => {
+      expect(validators.hasDates({ hasStartDate: false, hasEndDate: false })).toEqual(false);
+    });
+  });
+
+  describe('hasAssignmentDeadlines', () => {
+    it('returns true when a course run has start and end date and all assignments are within range', () => {
+      expect(validators.hasAssignmentDeadlines(
+        {
+          assignmentsWithDatesBeforeStart: 0,
+          assignmentsWithDatesAfterEnd: 0,
+          assignmentsWithOraDatesAfterEnd: 0,
+          assignmentsWithOraDatesBeforeStart: 0,
+        },
+        {
+          hasStartDate: true,
+          hasEndDate: true,
+        },
+      )).toEqual(true);
+    });
+
+    it('returns false when a course run has no start and no end date', () => {
+      expect(validators.hasAssignmentDeadlines(
+        {},
+        {
+          hasStartDate: false,
+          hasEndDate: false,
+        },
+      )).toEqual(false);
+    });
+
+    it('returns false when a course has start and end date and no assignments', () => {
+      expect(validators.hasAssignmentDeadlines(
+        {
+          totalNumber: 0,
+        },
+        {
+          hasStartDate: true,
+          hasEndDate: true,
+        },
+      )).toEqual(false);
+    });
+
+    it('returns false when a course run has start and end date and assignments before start', () => {
+      expect(validators.hasAssignmentDeadlines(
+        {
+          assignmentsWithDatesBeforeStart: ['test'],
+          assignmentsWithDatesAfterEnd: 0,
+          assignmentsWithOraDatesAfterEnd: 0,
+          assignmentsWithOraDatesBeforeStart: 0,
+        },
+        {
+          hasStartDate: true,
+          hasEndDate: true,
+        },
+      )).toEqual(false);
+    });
+
+    it('returns false when a course run has start and end date and assignments after end', () => {
+      expect(validators.hasAssignmentDeadlines(
+        {
+          assignmentsWithDatesBeforeStart: 0,
+          assignmentsWithDatesAfterEnd: ['test'],
+          assignmentsWithOraDatesAfterEnd: 0,
+          assignmentsWithOraDatesBeforeStart: 0,
+        },
+        {
+          hasStartDate: true,
+          hasEndDate: true,
+        },
+      )).toEqual(false);
+    });
+  });
+
+  it(
+    'returns false when a course run has start and end date and an ora with a date before start',
+    () => {
+      expect(validators.hasAssignmentDeadlines(
+        {
+          assignmentsWithDatesBeforeStart: 0,
+          assignmentsWithDatesAfterEnd: 0,
+          assignmentsWithOraDatesAfterEnd: 0,
+          assignmentsWithOraDatesBeforeStart: ['test'],
+        },
+        {
+          hasStartDate: true,
+          hasEndDate: true,
+        },
+      )).toEqual(false);
+    },
+  );
+
+  it(
+    'returns false when a course run has start and end date and an ora with a date after end',
+    () => {
+      expect(validators.hasAssignmentDeadlines(
+        {
+          assignmentsWithDatesBeforeStart: 0,
+          assignmentsWithDatesAfterEnd: 0,
+          assignmentsWithOraDatesAfterEnd: ['test'],
+          assignmentsWithOraDatesBeforeStart: 0,
+        },
+        {
+          hasStartDate: true,
+          hasEndDate: true,
+        },
+      )).toEqual(false);
+    },
+  );
+
+  describe('hasShortVideoDuration', () => {
+    it('returns true if course run has no videos', () => {
+      expect(validators.hasShortVideoDuration({ totalNumber: 0 })).toEqual(true);
+    });
+
+    it('returns true if course run videos have a median duration <= to 600', () => {
+      expect(validators.hasShortVideoDuration({ totalNumber: 1, durations: { median: 100 } }))
+        .toEqual(true);
+    });
+
+    it('returns true if course run videos have a median duration > to 600', () => {
+      expect(validators.hasShortVideoDuration({ totalNumber: 10, durations: { median: 700 } }))
+        .toEqual(false);
+    });
+  });
+
+  describe('hasMobileFriendlyVideos', () => {
+    it('returns true if course run has no videos', () => {
+      expect(validators.hasMobileFriendlyVideos({ totalNumber: 0 })).toEqual(true);
+    });
+
+    it('returns true if course run videos are >= 90% mobile friendly', () => {
+      expect(validators.hasMobileFriendlyVideos({ totalNumber: 10, numMobileEncoded: 9 }))
+        .toEqual(true);
+    });
+
+    it('returns true if course run videos are < 90% mobile friendly', () => {
+      expect(validators.hasMobileFriendlyVideos({ totalNumber: 10, numMobileEncoded: 8 }))
+        .toEqual(false);
+    });
+  });
+
+  describe('hasDiverseSequences', () => {
+    it('returns true if < 20% of visible subsections have more than one block type', () => {
+      expect(validators.hasDiverseSequences({ totalVisible: 10, numWithOneBlockType: 1 }))
+        .toEqual(true);
+    });
+
+    it('returns false if no visible subsections', () => {
+      expect(validators.hasDiverseSequences({ totalVisible: 0 })).toEqual(false);
+    });
+
+    it('returns false if >= 20% of visible subsections have more than one block type', () => {
+      expect(validators.hasDiverseSequences({ totalVisible: 10, numWithOneBlockType: 3 }))
+        .toEqual(false);
+    });
+
+    it('return false if < 0 visible subsections', () => {
+      expect(validators.hasDiverseSequences({ totalVisible: -1, numWithOneBlockType: 1 }))
+        .toEqual(false);
+    });
+  });
+
+  describe('hasWeeklyHighlights', () => {
+    it('returns true when course run has highlights enabled', () => {
+      const data = { highlightsActiveForCourse: true, highlightsEnabled: true };
+      expect(validators.hasWeeklyHighlights(data)).toEqual(true);
+    });
+
+    it('returns false when course run has highlights enabled', () => {
+      const data = { highlightsActiveForCourse: false, highlightsEnabled: false };
+      expect(validators.hasWeeklyHighlights(data)).toEqual(false);
+
+      data.highlightsEnabled = true;
+      data.highlightsActiveForCourse = false;
+      expect(validators.hasWeeklyHighlights(data)).toEqual(false);
+
+      data.highlightsEnabled = false;
+      data.highlightsActiveForCourse = true;
+      expect(validators.hasWeeklyHighlights(data)).toEqual(false);
+    });
+  });
+
+  describe('hasShortUnitDepth', () => {
+    it('returns true when course run has median number of blocks <= 3', () => {
+      const units = {
+        numBlocks: {
+          median: 3,
+        },
+      };
+
+      expect(validators.hasShortUnitDepth(units)).toEqual(true);
+    });
+
+    it('returns false when course run has median number of blocks > 3', () => {
+      const units = {
+        numBlocks: {
+          median: 4,
+        },
+      };
+
+      expect(validators.hasShortUnitDepth(units)).toEqual(false);
+    });
+  });
+
+  describe('hasProctoringEscalationEmail', () => {
+    it('returns true when the course has a proctoring escalation email', () => {
+      const proctoring = { hasProctoringEscalationEmail: true };
+      expect(validators.hasProctoringEscalationEmail(proctoring)).toEqual(true);
+    });
+
+    it('returns false when the course does not have a proctoring escalation email', () => {
+      const proctoring = { hasProctoringEscalationEmail: false };
+      expect(validators.hasProctoringEscalationEmail(proctoring)).toEqual(false);
+    });
+  });
+});
diff --git a/src/course-checklist/ChecklistSection/utils/getFilteredChecklist.js b/src/course-checklist/ChecklistSection/utils/getFilteredChecklist.js
new file mode 100644
index 0000000000..e858462405
--- /dev/null
+++ b/src/course-checklist/ChecklistSection/utils/getFilteredChecklist.js
@@ -0,0 +1,32 @@
+import { filters } from './courseChecklistData';
+
+const getFilteredChecklist = (
+  checklist,
+  isSelfPaced,
+  hasCertificatesEnabled,
+  hasHighlightsEnabled,
+  needsProctoringEscalationEmail,
+) => {
+  let filteredCheckList;
+
+  if (isSelfPaced) {
+    filteredCheckList = checklist.filter(data => data.pacingTypeFilter === filters.ALL
+        || data.pacingTypeFilter === filters.SELF_PACED);
+  } else {
+    filteredCheckList = checklist.filter(data => data.pacingTypeFilter === filters.ALL
+        || data.pacingTypeFilter === filters.INSTRUCTOR_PACED);
+  }
+
+  filteredCheckList = filteredCheckList.filter(data => data.id !== 'certificate'
+    || hasCertificatesEnabled);
+
+  filteredCheckList = filteredCheckList.filter(data => data.id !== 'weeklyHighlights'
+    || hasHighlightsEnabled);
+
+  filteredCheckList = filteredCheckList.filter(data => data.id !== 'proctoringEmail'
+    || needsProctoringEscalationEmail);
+
+  return filteredCheckList;
+};
+
+export default getFilteredChecklist;
diff --git a/src/course-checklist/ChecklistSection/utils/getFilteredChecklist.test.js b/src/course-checklist/ChecklistSection/utils/getFilteredChecklist.test.js
new file mode 100644
index 0000000000..bffcf157ff
--- /dev/null
+++ b/src/course-checklist/ChecklistSection/utils/getFilteredChecklist.test.js
@@ -0,0 +1,149 @@
+import { filters } from './courseChecklistData';
+import getFilteredChecklist from './getFilteredChecklist';
+
+const checklist = [
+  {
+    id: 'welcomeMessage',
+    pacingTypeFilter: filters.ALL,
+  },
+  {
+    id: 'gradingPolicy',
+    pacingTypeFilter: filters.ALL,
+  },
+  {
+    id: 'certificate',
+    pacingTypeFilter: filters.ALL,
+  },
+  {
+    id: 'courseDates',
+    pacingTypeFilter: filters.ALL,
+  },
+  {
+    id: 'assignmentDeadlines',
+    pacingTypeFilter: filters.INSTRUCTOR_PACED,
+  },
+  {
+    id: 'weeklyHighlights',
+    pacingTypeFilter: filters.SELF_PACED,
+  },
+  {
+    id: 'proctoringEmail',
+    pacingTypeFilter: filters.ALL,
+  },
+];
+
+let courseData;
+describe('getFilteredChecklist utility function', () => {
+  beforeEach(() => {
+    courseData = {
+      isSelfPaced: true,
+      hasCertificatesEnabled: true,
+      hasHighlightsEnabled: true,
+      needsProctoringEscalationEmail: true,
+    };
+  });
+  it('returns only checklist items with filters ALL and SELF_PACED when isSelfPaced is true', () => {
+    const filteredChecklist = getFilteredChecklist(
+      checklist,
+      courseData.isSelfPaced,
+      courseData.hasCertificatesEnabled,
+      courseData.hasHighlightsEnabled,
+      courseData.needsProctoringEscalationEmail,
+    );
+
+    filteredChecklist.forEach(((
+      item => expect(item.pacingTypeFilter === filters.ALL
+        || item.pacingTypeFilter === filters.SELF_PACED)
+    )));
+
+    expect(filteredChecklist.filter(item => item.pacingTypeFilter === filters.ALL).length)
+      .toEqual(checklist.filter(item => item.pacingTypeFilter === filters.ALL).length);
+    expect(filteredChecklist.filter(item => item.pacingTypeFilter === filters.SELF_PACED).length)
+      .toEqual(checklist.filter(item => item.pacingTypeFilter === filters.SELF_PACED).length);
+  });
+
+  it('returns only checklist items with filters ALL and INSTRUCTOR_PACED when isSelfPaced is false', () => {
+    courseData.isSelfPaced = false;
+    const filteredChecklist = getFilteredChecklist(
+      checklist,
+      courseData.isSelfPaced,
+      courseData.hasCertificatesEnabled,
+      courseData.hasHighlightsEnabled,
+      courseData.needsProctoringEscalationEmail,
+    );
+
+    filteredChecklist.forEach(((
+      item => expect(item.pacingTypeFilter === filters.ALL
+        || item.pacingTypeFilter === filters.INSTRUCTOR_PACED)
+    )));
+
+    expect(filteredChecklist.filter(item => item.pacingTypeFilter === filters.ALL).length)
+      .toEqual(checklist.filter(item => item.pacingTypeFilter === filters.ALL).length);
+    expect(filteredChecklist
+      .filter(item => item.pacingTypeFilter === filters.INSTRUCTOR_PACED).length)
+      .toEqual(checklist.filter(item => item.pacingTypeFilter === filters.INSTRUCTOR_PACED).length);
+  });
+
+  it('excludes certificates when they are disabled', () => {
+    let filteredChecklist = getFilteredChecklist(
+      checklist,
+      courseData.isSelfPaced,
+      courseData.hasCertificatesEnabled,
+      courseData.hasHighlightsEnabled,
+      courseData.needsProctoringEscalationEmail,
+    );
+    expect(checklist.filter(item => item.id === 'certificate').length).toEqual(1);
+
+    courseData.hasCertificatesEnabled = false;
+    filteredChecklist = getFilteredChecklist(
+      checklist,
+      courseData.isSelfPaced,
+      courseData.hasCertificatesEnabled,
+      courseData.hasHighlightsEnabled,
+      courseData.needsProctoringEscalationEmail,
+    );
+    expect(filteredChecklist.filter(item => item.id === 'certificate').length).toEqual(0);
+  });
+
+  it('excludes weekly highlights when they are disabled', () => {
+    let filteredChecklist = getFilteredChecklist(
+      checklist,
+      courseData.isSelfPaced,
+      courseData.hasCertificatesEnabled,
+      courseData.hasHighlightsEnabled,
+      courseData.needsProctoringEscalationEmail,
+    );
+    expect(filteredChecklist.filter(item => item.id === 'weeklyHighlights').length).toEqual(1);
+
+    courseData.hasHighlightsEnabled = false;
+    filteredChecklist = getFilteredChecklist(
+      checklist,
+      courseData.isSelfPaced,
+      courseData.hasCertificatesEnabled,
+      courseData.hasHighlightsEnabled,
+      courseData.needsProctoringEscalationEmail,
+    );
+    expect(filteredChecklist.filter(item => item.id === 'weeklyHighlights').length).toEqual(0);
+  });
+
+  it('excludes proctoring escalation email when not needed', () => {
+    let filteredChecklist = getFilteredChecklist(
+      checklist,
+      courseData.isSelfPaced,
+      courseData.hasCertificatesEnabled,
+      courseData.hasHighlightsEnabled,
+      courseData.needsProctoringEscalationEmail,
+    );
+    expect(filteredChecklist.filter(item => item.id === 'proctoringEmail').length).toEqual(1);
+
+    courseData.needsProctoringEscalationEmail = false;
+    filteredChecklist = getFilteredChecklist(
+      checklist,
+      courseData.isSelfPaced,
+      courseData.hasCertificatesEnabled,
+      courseData.hasHighlightsEnabled,
+      courseData.needsProctoringEscalationEmail,
+    );
+    expect(filteredChecklist.filter(item => item.id === 'proctoringEmail').length).toEqual(0);
+  });
+});
diff --git a/src/course-checklist/ChecklistSection/utils/getValidatedValue.js b/src/course-checklist/ChecklistSection/utils/getValidatedValue.js
new file mode 100644
index 0000000000..f6b745e1e8
--- /dev/null
+++ b/src/course-checklist/ChecklistSection/utils/getValidatedValue.js
@@ -0,0 +1,32 @@
+import * as healthValidators from './courseChecklistValidators';
+
+const getValidatedValue = (data, id) => {
+  switch (id) {
+    case 'welcomeMessage':
+      return healthValidators.hasWelcomeMessage(data.updates);
+    case 'gradingPolicy':
+      return healthValidators.hasGradingPolicy(data.grades);
+    case 'certificate':
+      return healthValidators.hasCertificate(data.certificates);
+    case 'courseDates':
+      return healthValidators.hasDates(data.dates);
+    case 'assignmentDeadlines':
+      return healthValidators.hasAssignmentDeadlines(data.assignments, data.dates);
+    case 'videoDuration':
+      return healthValidators.hasShortVideoDuration(data.videos);
+    case 'mobileFriendlyVideo':
+      return healthValidators.hasMobileFriendlyVideos(data.videos);
+    case 'diverseSequences':
+      return healthValidators.hasDiverseSequences(data.subsections);
+    case 'weeklyHighlights':
+      return healthValidators.hasWeeklyHighlights(data.sections);
+    case 'unitDepth':
+      return healthValidators.hasShortUnitDepth(data.units);
+    case 'proctoringEmail':
+      return healthValidators.hasProctoringEscalationEmail(data.proctoring);
+    default:
+      throw new Error(`Unknown validator ${id}.`);
+  }
+};
+
+export default getValidatedValue;
diff --git a/src/course-checklist/ChecklistSection/utils/getValidatedValue.test.js b/src/course-checklist/ChecklistSection/utils/getValidatedValue.test.js
new file mode 100644
index 0000000000..bed8f76ef3
--- /dev/null
+++ b/src/course-checklist/ChecklistSection/utils/getValidatedValue.test.js
@@ -0,0 +1,166 @@
+import * as validators from './courseChecklistValidators';
+import getValidatedValue from './getValidatedValue';
+
+describe('getValidatedValue utility function', () => {
+  const localValidators = validators;
+  it('welcome message', () => {
+    const spy = jest.fn();
+    localValidators.hasWelcomeMessage = spy;
+
+    const props = {
+      data: {
+        updates: {},
+      },
+    };
+
+    getValidatedValue(props, 'welcomeMessage');
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+
+  it('grading policy', () => {
+    const spy = jest.fn();
+    localValidators.hasGradingPolicy = spy;
+
+    const props = {
+      data: {
+        grades: {},
+      },
+    };
+
+    getValidatedValue(props, 'gradingPolicy');
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+
+  it('certificate', () => {
+    const spy = jest.fn();
+    localValidators.hasCertificate = spy;
+
+    const props = {
+      data: {
+        certificates: {},
+      },
+    };
+
+    getValidatedValue(props, 'certificate');
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+
+  it('course dates', () => {
+    const spy = jest.fn();
+    localValidators.hasDates = spy;
+
+    const props = {
+      data: {
+        dates: {},
+      },
+    };
+
+    getValidatedValue(props, 'courseDates');
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+
+  it('assignment deadlines', () => {
+    const spy = jest.fn();
+    localValidators.hasAssignmentDeadlines = spy;
+
+    const props = {
+      data: {
+        assignments: {},
+        dates: {},
+      },
+    };
+
+    getValidatedValue(props, 'assignmentDeadlines');
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+
+  it('video duration', () => {
+    const spy = jest.fn();
+    localValidators.hasShortVideoDuration = spy;
+
+    const props = {
+      data: {
+        videos: {},
+      },
+    };
+
+    getValidatedValue(props, 'videoDuration');
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+
+  it('mobile friendly video', () => {
+    const spy = jest.fn();
+    localValidators.hasMobileFriendlyVideos = spy;
+
+    const props = {
+      data: {
+        videos: {},
+      },
+    };
+
+    getValidatedValue(props, 'mobileFriendlyVideo');
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+
+  it('diverse sequences', () => {
+    const spy = jest.fn();
+    localValidators.hasDiverseSequences = spy;
+
+    const props = {
+      data: {
+        subsections: {},
+      },
+    };
+
+    getValidatedValue(props, 'diverseSequences');
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+
+  it('weekly highlights', () => {
+    const spy = jest.fn();
+    localValidators.hasWeeklyHighlights = spy;
+
+    const props = {
+      data: {
+        sections: {},
+      },
+    };
+
+    getValidatedValue(props, 'weeklyHighlights');
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+
+  it('unit depth', () => {
+    const spy = jest.fn();
+    localValidators.hasShortUnitDepth = spy;
+
+    const props = {
+      data: {
+        units: {},
+      },
+    };
+
+    getValidatedValue(props, 'unitDepth');
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+
+  it('proctoring email', () => {
+    const spy = jest.fn();
+    localValidators.hasProctoringEscalationEmail = spy;
+
+    const props = {
+      data: {
+        proctoring: {},
+      },
+    };
+
+    getValidatedValue(props, 'proctoringEmail');
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+
+  it('other', () => {
+    const sampleID = 'edX';
+    expect(() => getValidatedValue({}, sampleID)).toThrow(Error);
+    expect(() => getValidatedValue({}, sampleID)).toThrow(`Unknown validator ${sampleID}`);
+  });
+});
diff --git a/src/course-checklist/CourseChecklist.jsx b/src/course-checklist/CourseChecklist.jsx
new file mode 100644
index 0000000000..a220cff8fa
--- /dev/null
+++ b/src/course-checklist/CourseChecklist.jsx
@@ -0,0 +1,104 @@
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { getConfig } from '@edx/frontend-platform';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { Helmet } from 'react-helmet';
+import { useDispatch, useSelector } from 'react-redux';
+import { Container, Stack } from '@openedx/paragon';
+
+import { useModel } from '../generic/model-store';
+import SubHeader from '../generic/sub-header/SubHeader';
+import messages from './messages';
+import AriaLiveRegion from './AriaLiveRegion';
+import { RequestStatus } from '../data/constants';
+import ChecklistSection from './ChecklistSection';
+import { fetchCourseLaunchQuery, fetchCourseBestPracticesQuery } from './data/thunks';
+import ConnectionErrorAlert from '../generic/ConnectionErrorAlert';
+
+const CourseChecklist = ({
+  courseId,
+  // injected,
+  intl,
+}) => {
+  const dispatch = useDispatch();
+  const courseDetails = useModel('courseDetails', courseId);
+  const enableQuality = getConfig().ENABLE_CHECKLIST_QUALITY === 'true';
+
+  useEffect(() => {
+    dispatch(fetchCourseLaunchQuery({ courseId }));
+    dispatch(fetchCourseBestPracticesQuery({ courseId }));
+  }, [courseId]);
+
+  const {
+    loadingStatus,
+    launchData,
+    bestPracticeData,
+  } = useSelector(state => state.courseChecklist);
+
+  const { bestPracticeChecklistLoadingStatus, launchChecklistLoadingStatus, launchChecklistStatus } = loadingStatus;
+
+  const isCourseLaunchChecklistLoading = bestPracticeChecklistLoadingStatus === RequestStatus.IN_PROGRESS;
+  const isCourseBestPracticeChecklistLoading = launchChecklistLoadingStatus === RequestStatus.IN_PROGRESS;
+  const isLoadingDenied = launchChecklistStatus === RequestStatus.DENIED;
+
+  if (isLoadingDenied) {
+    return (
+      <Container size="xl" className="course-unit px-4 mt-4">
+        <ConnectionErrorAlert />
+      </Container>
+    );
+  }
+
+  return (
+    <>
+      <Helmet>
+        <title>
+          {intl.formatMessage(messages.pageTitle, {
+            headingTitle: intl.formatMessage(messages.headingTitle),
+            courseName: courseDetails?.name,
+            siteName: process.env.SITE_NAME,
+          })}
+        </title>
+      </Helmet>
+      <Container size="xl" className="p-4 pt-4.5">
+        <SubHeader
+          title={intl.formatMessage(messages.headingTitle)}
+          subtitle={intl.formatMessage(messages.headingSubtitle)}
+        />
+        <AriaLiveRegion
+          {...{
+            isCourseLaunchChecklistLoading,
+            isCourseBestPracticeChecklistLoading,
+            enableQuality,
+          }}
+        />
+        <Stack gap={4}>
+          <ChecklistSection
+            courseId={courseId}
+            dataHeading={intl.formatMessage(messages.launchChecklistLabel)}
+            data={launchData}
+            idPrefix="launchChecklist"
+            isLoading={isCourseLaunchChecklistLoading}
+          />
+          {enableQuality && (
+            <ChecklistSection
+              courseId={courseId}
+              dataHeading={intl.formatMessage(messages.bestPracticesChecklistLabel)}
+              data={bestPracticeData}
+              idPrefix="bestPracticesChecklist"
+              isLoading={isCourseBestPracticeChecklistLoading}
+            />
+          )}
+        </Stack>
+      </Container>
+    </>
+  );
+};
+
+CourseChecklist.propTypes = {
+  courseId: PropTypes.string.isRequired,
+  // injected
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(CourseChecklist);
diff --git a/src/course-checklist/CourseChecklist.scss b/src/course-checklist/CourseChecklist.scss
new file mode 100644
index 0000000000..afcbff6dc3
--- /dev/null
+++ b/src/course-checklist/CourseChecklist.scss
@@ -0,0 +1 @@
+@import "./ChecklistSection/ChecklistSection";
diff --git a/src/course-checklist/CourseChecklist.test.jsx b/src/course-checklist/CourseChecklist.test.jsx
new file mode 100644
index 0000000000..69057abf70
--- /dev/null
+++ b/src/course-checklist/CourseChecklist.test.jsx
@@ -0,0 +1,168 @@
+import {
+  render,
+  waitFor,
+  screen,
+} from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { getConfig, setConfig, initializeMockApp } from '@edx/frontend-platform';
+import MockAdapter from 'axios-mock-adapter';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { AppProvider } from '@edx/frontend-platform/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import initializeStore from '../store';
+import { RequestStatus } from '../data/constants';
+import { executeThunk } from '../utils';
+import { getCourseLaunchApiUrl, getCourseBestPracticesApiUrl } from './data/api';
+import { fetchCourseLaunchQuery, fetchCourseBestPracticesQuery } from './data/thunks';
+import {
+  courseId,
+  initialState,
+  generateCourseLaunchData,
+  generateCourseBestPracticesData,
+} from './factories/mockApiResponses';
+import messages from './messages';
+import CourseChecklist from './index';
+
+let axiosMock;
+let store;
+
+const renderComponent = () => {
+  render(
+    <IntlProvider locale="en">
+      <AppProvider store={store}>
+        <CourseChecklist {...{ courseId }} />
+      </AppProvider>
+    </IntlProvider>,
+  );
+};
+
+const mockStore = async (status) => {
+  axiosMock.onGet(getCourseLaunchApiUrl(courseId)).reply(status, generateCourseLaunchData());
+  axiosMock.onGet(getCourseBestPracticesApiUrl(courseId)).reply(status, generateCourseBestPracticesData());
+
+  await executeThunk(fetchCourseLaunchQuery(courseId), store.dispatch);
+  await executeThunk(fetchCourseBestPracticesQuery(courseId), store.dispatch);
+};
+
+describe('CourseChecklistPage', () => {
+  beforeEach(async () => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: false,
+        roles: [],
+      },
+    });
+    store = initializeStore(initialState);
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+  });
+  describe('renders', () => {
+    describe('if enable_quality prop is true', () => {
+      it('two checklist components ', () => {
+        renderComponent();
+        mockStore(200);
+
+        expect(screen.getByText(messages.launchChecklistLabel.defaultMessage)).toBeVisible();
+
+        expect(screen.getByText(messages.bestPracticesChecklistLabel.defaultMessage)).toBeVisible();
+      });
+
+      describe('an aria-live region with', () => {
+        it('an aria-live region', () => {
+          renderComponent();
+          const ariaLiveRegion = screen.getByRole('status');
+
+          expect(ariaLiveRegion).toBeDefined();
+
+          expect(ariaLiveRegion.classList.contains('sr-only')).toBe(true);
+        });
+
+        it('correct content when the launch checklist has loaded', async () => {
+          renderComponent();
+          mockStore(404);
+          await waitFor(() => {
+            const { launchChecklistStatus } = store.getState().courseChecklist.loadingStatus;
+
+            expect(launchChecklistStatus).not.toEqual(RequestStatus.SUCCESSFUL);
+
+            expect(screen.getByText(messages.launchChecklistDoneLoadingLabel.defaultMessage)).toBeInTheDocument();
+          });
+        });
+
+        it('correct content when the best practices checklist is loading', async () => {
+          renderComponent();
+          mockStore(404);
+          await waitFor(() => {
+            const { bestPracticeChecklistStatus } = store.getState().courseChecklist.loadingStatus;
+
+            expect(bestPracticeChecklistStatus).not.toEqual(RequestStatus.IN_PROGRESS);
+
+            expect(
+              screen.getByText(messages.bestPracticesChecklistDoneLoadingLabel.defaultMessage),
+            ).toBeInTheDocument();
+          });
+        });
+      });
+    });
+    describe('if enable_quality prop is false', () => {
+      beforeEach(() => {
+        setConfig({
+          ...getConfig(),
+          ENABLE_CHECKLIST_QUALITY: 'false',
+        });
+      });
+
+      it('one checklist components ', () => {
+        renderComponent();
+        mockStore(200);
+
+        expect(screen.getByText(messages.launchChecklistLabel.defaultMessage)).toBeVisible();
+
+        expect(screen.queryByText(messages.bestPracticesChecklistLabel.defaultMessage)).toBeNull();
+      });
+
+      describe('an aria-live region with', () => {
+        it('correct content when the launch checklist has loaded', async () => {
+          renderComponent();
+          mockStore(404);
+          await waitFor(() => {
+            const { launchChecklistStatus } = store.getState().courseChecklist.loadingStatus;
+
+            expect(launchChecklistStatus).not.toEqual(RequestStatus.SUCCESSFUL);
+
+            expect(screen.getByText(messages.launchChecklistDoneLoadingLabel.defaultMessage)).toBeInTheDocument();
+          });
+        });
+
+        it('correct content when the best practices checklist is loading', async () => {
+          renderComponent();
+          mockStore(404);
+          await waitFor(() => {
+            const { bestPracticeChecklistStatus } = store.getState().courseChecklist.loadingStatus;
+
+            expect(bestPracticeChecklistStatus).not.toEqual(RequestStatus.IN_PROGRESS);
+
+            expect(screen.queryByText(messages.bestPracticesChecklistDoneLoadingLabel.defaultMessage)).toBeNull();
+          });
+        });
+      });
+    });
+
+    it('displays an alert and sets status to DENIED when API responds with 403', async () => {
+      const courseLaunchApiUrl = getCourseLaunchApiUrl({
+        courseId, gradedOnly: true, validateOras: true, all: true,
+      });
+      axiosMock.onGet(courseLaunchApiUrl).reply(403);
+
+      renderComponent();
+
+      await waitFor(() => {
+        const { launchChecklistStatus } = store.getState().courseChecklist.loadingStatus;
+        expect(launchChecklistStatus).toEqual(RequestStatus.DENIED);
+        expect(screen.getByRole('alert')).toBeInTheDocument();
+      });
+    });
+  });
+});
diff --git a/src/course-checklist/data/api.js b/src/course-checklist/data/api.js
new file mode 100644
index 0000000000..c9524005c6
--- /dev/null
+++ b/src/course-checklist/data/api.js
@@ -0,0 +1,64 @@
+// @ts-check
+import { camelCaseObject, getConfig } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+
+const getApiBaseUrl = () => getConfig().STUDIO_BASE_URL;
+
+export const getCourseBestPracticesApiUrl = ({
+  courseId,
+  excludeGraded,
+  all,
+}) => `${getApiBaseUrl()}/api/courses/v1/quality/${courseId}/?exclude_graded=${excludeGraded}&all=${all}`;
+
+export const getCourseLaunchApiUrl = ({
+  courseId,
+  gradedOnly,
+  validateOras,
+  all,
+}) => `${getApiBaseUrl()}/api/courses/v1/validation/${courseId}/?graded_only=${gradedOnly}&validate_oras=${validateOras}&all=${all}`;
+
+/**
+ * Get course best practices.
+ * @param {{courseId: string, excludeGraded: boolean, all: boolean}} options
+ * @returns {Promise<{isSelfPaced: boolean, sections: any, subsection: any, units: any, videos: any }>}
+ */
+export async function getCourseBestPractices({
+  courseId,
+  excludeGraded,
+  all,
+}) {
+  const { data } = await getAuthenticatedHttpClient()
+    .get(getCourseBestPracticesApiUrl({ courseId, excludeGraded, all }));
+
+  return camelCaseObject(data);
+}
+
+/** @typedef {object} courseLaunchData
+ * @property {boolean} isSelfPaced
+ * @property {object} dates
+ * @property {object} assignments
+ * @property {object} grades
+ * @property {number} grades.sum_of_weights
+ * @property {object} certificates
+ * @property {object} updates
+ * @property {object} proctoring
+ */
+
+/**
+ * Get course launch.
+ * @param {{courseId: string, gradedOnly: boolean, validateOras: boolean, all: boolean}} options
+ * @returns {Promise<courseLaunchData>}
+ */
+export async function getCourseLaunch({
+  courseId,
+  gradedOnly,
+  validateOras,
+  all,
+}) {
+  const { data } = await getAuthenticatedHttpClient()
+    .get(getCourseLaunchApiUrl({
+      courseId, gradedOnly, validateOras, all,
+    }));
+
+  return camelCaseObject(data);
+}
diff --git a/src/course-checklist/data/slice.js b/src/course-checklist/data/slice.js
new file mode 100644
index 0000000000..d50c7ecb21
--- /dev/null
+++ b/src/course-checklist/data/slice.js
@@ -0,0 +1,41 @@
+/* eslint-disable no-param-reassign */
+import { createSlice } from '@reduxjs/toolkit';
+
+import { RequestStatus } from '../../data/constants';
+
+const slice = createSlice({
+  name: 'courseChecklist',
+  initialState: {
+    loadingStatus: {
+      launchChecklistStatus: RequestStatus.IN_PROGRESS,
+      bestPracticeChecklistStatus: RequestStatus.IN_PROGRESS,
+    },
+    launchData: {},
+    bestPracticeData: {},
+  },
+  reducers: {
+    fetchLaunchChecklistSuccess: (state, { payload }) => {
+      state.launchData = payload.data;
+    },
+    updateLaunchChecklistStatus: (state, { payload }) => {
+      state.loadingStatus.launchChecklistStatus = payload.status;
+    },
+    fetchBestPracticeChecklistSuccess: (state, { payload }) => {
+      state.bestPracticeData = payload.data;
+    },
+    updateBestPracticeChecklisttStatus: (state, { payload }) => {
+      state.loadingStatus.bestPracticeChecklistStatus = payload.status;
+    },
+  },
+});
+
+export const {
+  fetchLaunchChecklistSuccess,
+  updateLaunchChecklistStatus,
+  fetchBestPracticeChecklistSuccess,
+  updateBestPracticeChecklisttStatus,
+} = slice.actions;
+
+export const {
+  reducer,
+} = slice;
diff --git a/src/course-checklist/data/thunks.js b/src/course-checklist/data/thunks.js
new file mode 100644
index 0000000000..74547dab7b
--- /dev/null
+++ b/src/course-checklist/data/thunks.js
@@ -0,0 +1,50 @@
+import { RequestStatus } from '../../data/constants';
+import {
+  getCourseBestPractices,
+  getCourseLaunch,
+} from './api';
+import {
+  fetchLaunchChecklistSuccess,
+  updateLaunchChecklistStatus,
+  fetchBestPracticeChecklistSuccess,
+  updateBestPracticeChecklisttStatus,
+} from './slice';
+
+export function fetchCourseLaunchQuery({
+  courseId,
+  gradedOnly = true,
+  validateOras = true,
+  all = true,
+}) {
+  return async (dispatch) => {
+    try {
+      const data = await getCourseLaunch({
+        courseId, gradedOnly, validateOras, all,
+      });
+      dispatch(fetchLaunchChecklistSuccess({ data }));
+      dispatch(updateLaunchChecklistStatus({ status: RequestStatus.SUCCESSFUL }));
+    } catch (error) {
+      if (error.response && error.response.status === 403) {
+        dispatch(updateLaunchChecklistStatus({ status: RequestStatus.DENIED }));
+      } else {
+        dispatch(updateLaunchChecklistStatus({ status: RequestStatus.FAILED }));
+      }
+    }
+  };
+}
+
+export function fetchCourseBestPracticesQuery({
+  courseId,
+  excludeGraded = true,
+  all = true,
+}) {
+  return async (dispatch) => {
+    try {
+      const data = await getCourseBestPractices({ courseId, excludeGraded, all });
+      dispatch(fetchBestPracticeChecklistSuccess({ data }));
+      dispatch(updateBestPracticeChecklisttStatus({ status: RequestStatus.SUCCESSFUL }));
+    } catch (error) {
+      dispatch(updateBestPracticeChecklisttStatus({ status: RequestStatus.FAILED }));
+    }
+  };
+}
diff --git a/src/course-checklist/factories/mockApiResponses.jsx b/src/course-checklist/factories/mockApiResponses.jsx
new file mode 100644
index 0000000000..eec4f34397
--- /dev/null
+++ b/src/course-checklist/factories/mockApiResponses.jsx
@@ -0,0 +1,104 @@
+import { RequestStatus } from '../../data/constants';
+
+export const courseId = 'course-v1:edX+DemoX+Demo_Course';
+
+export const initialState = {
+  courseDetail: {
+    courseId,
+    status: 'sucessful',
+  },
+  courseChecklist: {
+    loadingStatus: {
+      launchChecklistStatus: RequestStatus.IN_PROGRESS,
+      bestPracticeChecklistStatus: RequestStatus.IN_PROGRESS,
+    },
+    launchData: {},
+    bestPracticesData: {},
+  },
+};
+
+export const generateCourseBestPracticesData = () => ({
+  is_self_paced: false,
+  sections: {
+    total_number: 2,
+    total_visible: 2,
+    number_with_highlights: 0,
+    highlights_active_for_course: false,
+    highlights_enabled: true,
+  },
+  subsections: {
+    total_visible: 1,
+    num_with_one_block_type: 1,
+    num_block_types: {
+      min: 1,
+      max: 1,
+      mean: 1.0,
+      median: 1.0,
+      mode: 1,
+    },
+  },
+  units: {
+    total_visible: 1,
+    num_blocks: {
+      min: 1,
+      max: 1,
+      mean: 1.0,
+      median: 1.0,
+      mode: 1,
+    },
+  },
+  videos: {
+    total_number: 10,
+    num_mobile_encoded: 5,
+    num_with_val_id: 10,
+    durations: {
+      min: 9.409,
+      max: 168.001,
+      mean: 41.0,
+      median: 9.0,
+      mode: 9.409,
+    },
+  },
+});
+
+export const generateCourseLaunchData = () => ({
+  is_self_paced: false,
+  dates: {
+    has_start_date: true,
+    has_end_date: true,
+  },
+  assignments: {
+    total_number: 2,
+    total_visible: 2,
+    assignments_with_dates_before_start: [],
+    assignments_with_dates_after_end: [
+      {
+        id: 'block-v1',
+        display_name: 'Subsection',
+      },
+    ],
+    assignments_with_ora_dates_before_start: [
+      {
+        id: 'block-v2',
+        display_name: 'ORA subsection',
+      },
+    ],
+    assignments_with_ora_dates_after_end: [],
+  },
+  grades: {
+    has_grading_policy: true,
+    sum_of_weights: 0.9500000000000001,
+  },
+  certificates: {
+    is_activated: false,
+    has_certificate: false,
+    is_enabled: true,
+  },
+  updates: {
+    has_update: true,
+  },
+  proctoring: {
+    needs_proctoring_escalation_email: true,
+    has_proctoring_escalation_email: false,
+  },
+});
diff --git a/src/course-checklist/index.js b/src/course-checklist/index.js
new file mode 100644
index 0000000000..a9a60ae4e5
--- /dev/null
+++ b/src/course-checklist/index.js
@@ -0,0 +1,3 @@
+import CourseChecklist from './CourseChecklist';
+
+export default CourseChecklist;
diff --git a/src/course-checklist/messages.js b/src/course-checklist/messages.js
new file mode 100644
index 0000000000..7176459c8c
--- /dev/null
+++ b/src/course-checklist/messages.js
@@ -0,0 +1,49 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  pageTitle: {
+    id: 'course-authoring.export.page.title',
+    defaultMessage: '{headingTitle} | {courseName} | {siteName}',
+  },
+  headingTitle: {
+    id: 'course-authoring.course-checklist.heading.title',
+    defaultMessage: 'Checklists',
+    description: 'Header text for the Checklist page',
+  },
+  headingSubtitle: {
+    id: 'course-authoring.course-checklist.heading.subtitle',
+    defaultMessage: 'Tools',
+  },
+  launchChecklistLabel: {
+    id: 'launchChecklistLabel',
+    defaultMessage: 'Launch checklist',
+    description: 'Header text for a checklist that describes actions to have completed before a course should launch',
+  },
+  bestPracticesChecklistLabel: {
+    id: 'bestPracticesChecklistLabel',
+    defaultMessage: 'Best practices checklist',
+    description: 'Header text for a checklist that describes best practices for a course',
+  },
+  launchChecklistLoadingLabel: {
+    id: 'doneLoadingChecklistStatusLabel',
+    defaultMessage: 'Launch Checklist data is loading',
+    description: 'Label telling the user that the Launch Checklist is loading',
+  },
+  launchChecklistDoneLoadingLabel: {
+    id: 'launchChecklistDoneLoadingLabel',
+    defaultMessage: 'Launch Checklist data is done loading',
+    description: 'Label telling the user that the Launch Checklist is done loading',
+  },
+  bestPracticesChecklistLoadingLabel: {
+    id: 'bestPracticesChecklistLoadingLabel',
+    defaultMessage: 'Best Practices Checklist data is loading',
+    description: 'Label telling the user that the Best Practices Checklist is loading',
+  },
+  bestPracticesChecklistDoneLoadingLabel: {
+    id: 'bestPracticesChecklistDoneLoadingLabel',
+    defaultMessage: 'Best Practices Checklist data is done loading',
+    description: 'Label telling the user that the Best Practices Checklist is done loading',
+  },
+});
+
+export default messages;
diff --git a/src/course-outline/CourseOutline.jsx b/src/course-outline/CourseOutline.jsx
new file mode 100644
index 0000000000..21d35831df
--- /dev/null
+++ b/src/course-outline/CourseOutline.jsx
@@ -0,0 +1,522 @@
+// @ts-check
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import {
+  Button,
+  Container,
+  Layout,
+  Row,
+  TransitionReplace,
+  Toast,
+} from '@openedx/paragon';
+import { Helmet } from 'react-helmet';
+import {
+  Add as IconAdd,
+  CheckCircle as CheckCircleIcon,
+} from '@openedx/paragon/icons';
+import { useSelector } from 'react-redux';
+import {
+  arrayMove,
+  SortableContext,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import { useLocation } from 'react-router-dom';
+
+import { LoadingSpinner } from '../generic/Loading';
+import { getProcessingNotification } from '../generic/processing-notification/data/selectors';
+import { RequestStatus } from '../data/constants';
+import SubHeader from '../generic/sub-header/SubHeader';
+import ProcessingNotification from '../generic/processing-notification';
+import InternetConnectionAlert from '../generic/internet-connection-alert';
+import DeleteModal from '../generic/delete-modal/DeleteModal';
+import ConfigureModal from '../generic/configure-modal/ConfigureModal';
+import AlertMessage from '../generic/alert-message';
+import getPageHeadTitle from '../generic/utils';
+import { getCurrentItem, getProctoredExamsFlag } from './data/selectors';
+import { COURSE_BLOCK_NAMES } from './constants';
+import HeaderNavigations from './header-navigations/HeaderNavigations';
+import OutlineSideBar from './outline-sidebar/OutlineSidebar';
+import StatusBar from './status-bar/StatusBar';
+import EnableHighlightsModal from './enable-highlights-modal/EnableHighlightsModal';
+import SectionCard from './section-card/SectionCard';
+import SubsectionCard from './subsection-card/SubsectionCard';
+import UnitCard from './unit-card/UnitCard';
+import HighlightsModal from './highlights-modal/HighlightsModal';
+import EmptyPlaceholder from './empty-placeholder/EmptyPlaceholder';
+import PublishModal from './publish-modal/PublishModal';
+import PageAlerts from './page-alerts/PageAlerts';
+import DraggableList from '../generic/drag-helper/DraggableList';
+import {
+  canMoveSection,
+  possibleUnitMoves,
+  possibleSubsectionMoves,
+} from '../generic/drag-helper/utils';
+import { useCourseOutline } from './hooks';
+import messages from './messages';
+import { getTagsExportFile } from './data/api';
+
+const CourseOutline = ({ courseId }) => {
+  const intl = useIntl();
+  const location = useLocation();
+
+  const {
+    courseName,
+    savingStatus,
+    statusBarData,
+    courseActions,
+    sectionsList,
+    isCustomRelativeDatesActive,
+    isLoading,
+    isLoadingDenied,
+    isReIndexShow,
+    showSuccessAlert,
+    isSectionsExpanded,
+    isEnableHighlightsModalOpen,
+    isInternetConnectionAlertFailed,
+    isDisabledReindexButton,
+    isHighlightsModalOpen,
+    isPublishModalOpen,
+    isConfigureModalOpen,
+    isDeleteModalOpen,
+    closeHighlightsModal,
+    closePublishModal,
+    handleConfigureModalClose,
+    closeDeleteModal,
+    openPublishModal,
+    openConfigureModal,
+    openDeleteModal,
+    headerNavigationsActions,
+    openEnableHighlightsModal,
+    closeEnableHighlightsModal,
+    handleEnableHighlightsSubmit,
+    handleInternetConnectionFailed,
+    handleOpenHighlightsModal,
+    handleHighlightsFormSubmit,
+    handleConfigureItemSubmit,
+    handlePublishItemSubmit,
+    handleEditSubmit,
+    handleDeleteItemSubmit,
+    handleDuplicateSectionSubmit,
+    handleDuplicateSubsectionSubmit,
+    handleDuplicateUnitSubmit,
+    handleNewSectionSubmit,
+    handleNewSubsectionSubmit,
+    handleNewUnitSubmit,
+    getUnitUrl,
+    handleVideoSharingOptionChange,
+    handleCopyToClipboardClick,
+    handlePasteClipboardClick,
+    notificationDismissUrl,
+    discussionsSettings,
+    discussionsIncontextFeedbackUrl,
+    discussionsIncontextLearnmoreUrl,
+    deprecatedBlocksInfo,
+    proctoringErrors,
+    mfeProctoredExamSettingsUrl,
+    handleDismissNotification,
+    advanceSettingsUrl,
+    handleSectionDragAndDrop,
+    handleSubsectionDragAndDrop,
+    handleUnitDragAndDrop,
+    errors,
+  } = useCourseOutline({ courseId });
+
+  // Use `setToastMessage` to show the toast.
+  const [toastMessage, setToastMessage] = useState(/** @type{null|string} */ (null));
+
+  useEffect(() => {
+    // Wait for the course data to load before exporting tags.
+    if (courseId && courseName && location.hash === '#export-tags') {
+      setToastMessage(intl.formatMessage(messages.exportTagsCreatingToastMessage));
+      getTagsExportFile(courseId, courseName).then(() => {
+        setToastMessage(intl.formatMessage(messages.exportTagsSuccessToastMessage));
+      }).catch(() => {
+        setToastMessage(intl.formatMessage(messages.exportTagsErrorToastMessage));
+      });
+
+      // Delete `#export-tags` from location
+      window.location.href = '#';
+    }
+  }, [location, courseId, courseName]);
+
+  const [sections, setSections] = useState(sectionsList);
+
+  const restoreSectionList = () => {
+    setSections(() => [...sectionsList]);
+  };
+
+  const {
+    isShow: isShowProcessingNotification,
+    title: processingNotificationTitle,
+  } = useSelector(getProcessingNotification);
+
+  const currentItemData = useSelector(getCurrentItem);
+  const deleteCategory = COURSE_BLOCK_NAMES[currentItemData.category]?.name.toLowerCase();
+
+  const enableProctoredExams = useSelector(getProctoredExamsFlag);
+
+  /**
+   * Move section to new index
+   * @param {any} currentIndex
+   * @param {any} newIndex
+   */
+  const updateSectionOrderByIndex = (currentIndex, newIndex) => {
+    if (currentIndex === newIndex) {
+      return;
+    }
+    setSections((prevSections) => {
+      const newSections = arrayMove(prevSections, currentIndex, newIndex);
+      handleSectionDragAndDrop(newSections.map(section => section.id));
+      return newSections;
+    });
+  };
+
+  /**
+   * Uses details from move information and moves subsection
+   * @param {any} section
+   * @param {any} moveDetails
+   * @returns {void}
+   */
+  const updateSubsectionOrderByIndex = (section, moveDetails) => {
+    const { fn, args, sectionId } = moveDetails;
+    if (!args) {
+      return;
+    }
+    const [sectionsCopy, newSubsections] = fn(...args);
+    if (newSubsections && sectionId) {
+      setSections(sectionsCopy);
+      handleSubsectionDragAndDrop(
+        sectionId,
+        section.id,
+        newSubsections.map(subsection => subsection.id),
+        restoreSectionList,
+      );
+    }
+  };
+
+  /**
+   * Uses details from move information and moves unit
+   * @param {any} section
+   * @param {any} moveDetails
+   * @returns {void}
+   */
+  const updateUnitOrderByIndex = (section, moveDetails) => {
+    const {
+      fn, args, sectionId, subsectionId,
+    } = moveDetails;
+    if (!args) {
+      return;
+    }
+    const [sectionsCopy, newUnits] = fn(...args);
+    if (newUnits && sectionId && subsectionId) {
+      setSections(sectionsCopy);
+      handleUnitDragAndDrop(
+        sectionId,
+        section.id,
+        subsectionId,
+        newUnits.map(unit => unit.id),
+        restoreSectionList,
+      );
+    }
+  };
+
+  useEffect(() => {
+    setSections(sectionsList);
+  }, [sectionsList]);
+
+  if (isLoading) {
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    return (
+      <Row className="m-0 mt-4 justify-content-center">
+        <LoadingSpinner />
+      </Row>
+    );
+  }
+
+  if (isLoadingDenied) {
+    return (
+      <Container size="xl" className="px-4 mt-4">
+        <PageAlerts
+          courseId={courseId}
+          notificationDismissUrl={notificationDismissUrl}
+          handleDismissNotification={handleDismissNotification}
+          discussionsSettings={discussionsSettings}
+          discussionsIncontextFeedbackUrl={discussionsIncontextFeedbackUrl}
+          discussionsIncontextLearnmoreUrl={discussionsIncontextLearnmoreUrl}
+          deprecatedBlocksInfo={deprecatedBlocksInfo}
+          proctoringErrors={proctoringErrors}
+          mfeProctoredExamSettingsUrl={mfeProctoredExamSettingsUrl}
+          advanceSettingsUrl={advanceSettingsUrl}
+          savingStatus={savingStatus}
+          errors={errors}
+        />
+      </Container>
+    );
+  }
+
+  return (
+    <>
+      <Helmet>
+        <title>{getPageHeadTitle(courseName, intl.formatMessage(messages.headingTitle))}</title>
+      </Helmet>
+      <Container size="xl" className="px-4">
+        <section className="course-outline-container mb-4 mt-5">
+          <PageAlerts
+            courseId={courseId}
+            notificationDismissUrl={notificationDismissUrl}
+            handleDismissNotification={handleDismissNotification}
+            discussionsSettings={discussionsSettings}
+            discussionsIncontextFeedbackUrl={discussionsIncontextFeedbackUrl}
+            discussionsIncontextLearnmoreUrl={discussionsIncontextLearnmoreUrl}
+            deprecatedBlocksInfo={deprecatedBlocksInfo}
+            proctoringErrors={proctoringErrors}
+            mfeProctoredExamSettingsUrl={mfeProctoredExamSettingsUrl}
+            advanceSettingsUrl={advanceSettingsUrl}
+            savingStatus={savingStatus}
+            errors={errors}
+          />
+          <TransitionReplace>
+            {showSuccessAlert ? (
+              <AlertMessage
+                key={intl.formatMessage(messages.alertSuccessAriaLabelledby)}
+                show={showSuccessAlert}
+                variant="success"
+                icon={CheckCircleIcon}
+                title={intl.formatMessage(messages.alertSuccessTitle)}
+                description={intl.formatMessage(messages.alertSuccessDescription)}
+                aria-hidden="true"
+                aria-labelledby={intl.formatMessage(messages.alertSuccessAriaLabelledby)}
+                aria-describedby={intl.formatMessage(messages.alertSuccessAriaDescribedby)}
+              />
+            ) : null}
+          </TransitionReplace>
+          <SubHeader
+            title={intl.formatMessage(messages.headingTitle)}
+            subtitle={intl.formatMessage(messages.headingSubtitle)}
+            headerActions={(
+              <HeaderNavigations
+                isReIndexShow={isReIndexShow}
+                isSectionsExpanded={isSectionsExpanded}
+                headerNavigationsActions={headerNavigationsActions}
+                isDisabledReindexButton={isDisabledReindexButton}
+                hasSections={Boolean(sectionsList.length)}
+                courseActions={courseActions}
+                errors={errors}
+              />
+            )}
+          />
+          <Layout
+            lg={[{ span: 9 }, { span: 3 }]}
+            md={[{ span: 9 }, { span: 3 }]}
+            sm={[{ span: 12 }, { span: 12 }]}
+            xs={[{ span: 12 }, { span: 12 }]}
+            xl={[{ span: 9 }, { span: 3 }]}
+          >
+            <Layout.Element>
+              <article>
+                <div>
+                  <section className="course-outline-section">
+                    <StatusBar
+                      courseId={courseId}
+                      isLoading={isLoading}
+                      statusBarData={statusBarData}
+                      openEnableHighlightsModal={openEnableHighlightsModal}
+                      handleVideoSharingOptionChange={handleVideoSharingOptionChange}
+                    />
+                    {!errors?.outlineIndexApi && (
+                      <div className="pt-4">
+                        {sections.length ? (
+                          <>
+                            <DraggableList
+                              items={sections}
+                              setSections={setSections}
+                              restoreSectionList={restoreSectionList}
+                              handleSectionDragAndDrop={handleSectionDragAndDrop}
+                              handleSubsectionDragAndDrop={handleSubsectionDragAndDrop}
+                              handleUnitDragAndDrop={handleUnitDragAndDrop}
+                            >
+                              <SortableContext
+                                id="root"
+                                items={sections}
+                                strategy={verticalListSortingStrategy}
+                              >
+                                {sections.map((section, sectionIndex) => (
+                                  <SectionCard
+                                    key={section.id}
+                                    section={section}
+                                    index={sectionIndex}
+                                    canMoveItem={canMoveSection(sections)}
+                                    isSelfPaced={statusBarData.isSelfPaced}
+                                    isCustomRelativeDatesActive={isCustomRelativeDatesActive}
+                                    savingStatus={savingStatus}
+                                    onOpenHighlightsModal={handleOpenHighlightsModal}
+                                    onOpenPublishModal={openPublishModal}
+                                    onOpenConfigureModal={openConfigureModal}
+                                    onOpenDeleteModal={openDeleteModal}
+                                    onEditSectionSubmit={handleEditSubmit}
+                                    onDuplicateSubmit={handleDuplicateSectionSubmit}
+                                    isSectionsExpanded={isSectionsExpanded}
+                                    onNewSubsectionSubmit={handleNewSubsectionSubmit}
+                                    onOrderChange={updateSectionOrderByIndex}
+                                  >
+                                    <SortableContext
+                                      id={section.id}
+                                      items={section.childInfo.children}
+                                      strategy={verticalListSortingStrategy}
+                                    >
+                                      {section.childInfo.children.map((subsection, subsectionIndex) => (
+                                        <SubsectionCard
+                                          key={subsection.id}
+                                          section={section}
+                                          subsection={subsection}
+                                          index={subsectionIndex}
+                                          getPossibleMoves={possibleSubsectionMoves(
+                                            [...sections],
+                                            sectionIndex,
+                                            section,
+                                            section.childInfo.children,
+                                          )}
+                                          isSelfPaced={statusBarData.isSelfPaced}
+                                          isCustomRelativeDatesActive={isCustomRelativeDatesActive}
+                                          savingStatus={savingStatus}
+                                          onOpenPublishModal={openPublishModal}
+                                          onOpenDeleteModal={openDeleteModal}
+                                          onEditSubmit={handleEditSubmit}
+                                          onDuplicateSubmit={handleDuplicateSubsectionSubmit}
+                                          onOpenConfigureModal={openConfigureModal}
+                                          onNewUnitSubmit={handleNewUnitSubmit}
+                                          onOrderChange={updateSubsectionOrderByIndex}
+                                          onPasteClick={handlePasteClipboardClick}
+                                        >
+                                          <SortableContext
+                                            id={subsection.id}
+                                            items={subsection.childInfo.children}
+                                            strategy={verticalListSortingStrategy}
+                                          >
+                                            {subsection.childInfo.children.map((unit, unitIndex) => (
+                                              <UnitCard
+                                                key={unit.id}
+                                                unit={unit}
+                                                subsection={subsection}
+                                                section={section}
+                                                isSelfPaced={statusBarData.isSelfPaced}
+                                                isCustomRelativeDatesActive={isCustomRelativeDatesActive}
+                                                index={unitIndex}
+                                                getPossibleMoves={possibleUnitMoves(
+                                                  [...sections],
+                                                  sectionIndex,
+                                                  subsectionIndex,
+                                                  section,
+                                                  subsection,
+                                                  subsection.childInfo.children,
+                                                )}
+                                                savingStatus={savingStatus}
+                                                onOpenPublishModal={openPublishModal}
+                                                onOpenConfigureModal={openConfigureModal}
+                                                onOpenDeleteModal={openDeleteModal}
+                                                onEditSubmit={handleEditSubmit}
+                                                onDuplicateSubmit={handleDuplicateUnitSubmit}
+                                                getTitleLink={getUnitUrl}
+                                                onOrderChange={updateUnitOrderByIndex}
+                                                onCopyToClipboardClick={handleCopyToClipboardClick}
+                                                discussionsSettings={discussionsSettings}
+                                              />
+                                            ))}
+                                          </SortableContext>
+                                        </SubsectionCard>
+                                      ))}
+                                    </SortableContext>
+                                  </SectionCard>
+                                ))}
+                              </SortableContext>
+                            </DraggableList>
+                            {courseActions.childAddable && (
+                              <Button
+                                data-testid="new-section-button"
+                                className="mt-4"
+                                variant="outline-primary"
+                                onClick={handleNewSectionSubmit}
+                                iconBefore={IconAdd}
+                                block
+                              >
+                                {intl.formatMessage(messages.newSectionButton)}
+                              </Button>
+                            )}
+                          </>
+                        ) : (
+                          <EmptyPlaceholder
+                            onCreateNewSection={handleNewSectionSubmit}
+                            childAddable={courseActions.childAddable}
+                          />
+                        )}
+                      </div>
+                    )}
+                  </section>
+                </div>
+              </article>
+            </Layout.Element>
+            <Layout.Element>
+              <OutlineSideBar courseId={courseId} />
+            </Layout.Element>
+          </Layout>
+          <EnableHighlightsModal
+            isOpen={isEnableHighlightsModalOpen}
+            close={closeEnableHighlightsModal}
+            onEnableHighlightsSubmit={handleEnableHighlightsSubmit}
+          />
+        </section>
+        <HighlightsModal
+          isOpen={isHighlightsModalOpen}
+          onClose={closeHighlightsModal}
+          onSubmit={handleHighlightsFormSubmit}
+        />
+        <PublishModal
+          isOpen={isPublishModalOpen}
+          onClose={closePublishModal}
+          onPublishSubmit={handlePublishItemSubmit}
+        />
+        <ConfigureModal
+          isOpen={isConfigureModalOpen}
+          onClose={handleConfigureModalClose}
+          onConfigureSubmit={handleConfigureItemSubmit}
+          currentItemData={currentItemData}
+          enableProctoredExams={enableProctoredExams}
+          isSelfPaced={statusBarData.isSelfPaced}
+        />
+        <DeleteModal
+          category={deleteCategory}
+          isOpen={isDeleteModalOpen}
+          close={closeDeleteModal}
+          onDeleteSubmit={handleDeleteItemSubmit}
+        />
+      </Container>
+      <div className="alert-toast">
+        <ProcessingNotification
+          isShow={isShowProcessingNotification}
+          title={processingNotificationTitle}
+        />
+        <InternetConnectionAlert
+          isFailed={isInternetConnectionAlertFailed}
+          isQueryPending={savingStatus === RequestStatus.PENDING}
+          onInternetConnectionFailed={handleInternetConnectionFailed}
+        />
+      </div>
+      {toastMessage && (
+        <Toast
+          show
+          onClose={/* istanbul ignore next */ () => setToastMessage(null)}
+          data-testid="taxonomy-toast"
+        >
+          {toastMessage}
+        </Toast>
+      )}
+    </>
+  );
+};
+
+CourseOutline.propTypes = {
+  courseId: PropTypes.string.isRequired,
+};
+
+export default CourseOutline;
diff --git a/src/course-outline/CourseOutline.scss b/src/course-outline/CourseOutline.scss
new file mode 100644
index 0000000000..94ca859d07
--- /dev/null
+++ b/src/course-outline/CourseOutline.scss
@@ -0,0 +1,10 @@
+@import "./header-navigations/HeaderNavigations";
+@import "./status-bar/StatusBar";
+@import "./section-card/SectionCard";
+@import "./subsection-card/SubsectionCard";
+@import "./unit-card/UnitCard";
+@import "./card-header/CardHeader";
+@import "./empty-placeholder/EmptyPlaceholder";
+@import "./highlights-modal/HighlightsModal";
+@import "./publish-modal/PublishModal";
+@import "./xblock-status/XBlockStatus";
diff --git a/src/course-outline/CourseOutline.test.jsx b/src/course-outline/CourseOutline.test.jsx
new file mode 100644
index 0000000000..ac8a4d8e1e
--- /dev/null
+++ b/src/course-outline/CourseOutline.test.jsx
@@ -0,0 +1,2308 @@
+import {
+  act, render, waitFor, fireEvent, within, screen,
+} from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { AppProvider } from '@edx/frontend-platform/react';
+import { getConfig, initializeMockApp } from '@edx/frontend-platform';
+import MockAdapter from 'axios-mock-adapter';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { cloneDeep } from 'lodash';
+import { closestCorners } from '@dnd-kit/core';
+
+import { useLocation } from 'react-router-dom';
+import {
+  getCourseBestPracticesApiUrl,
+  getCourseLaunchApiUrl,
+  getCourseOutlineIndexApiUrl,
+  getCourseReindexApiUrl,
+  getXBlockApiUrl,
+  getCourseBlockApiUrl,
+  getCourseItemApiUrl,
+  getXBlockBaseApiUrl,
+  exportTags,
+} from './data/api';
+import { RequestStatus } from '../data/constants';
+import {
+  fetchCourseBestPracticesQuery,
+  fetchCourseLaunchQuery,
+  fetchCourseOutlineIndexQuery,
+  updateCourseSectionHighlightsQuery,
+} from './data/thunk';
+import initializeStore from '../store';
+import {
+  courseOutlineIndexMock,
+  courseOutlineIndexWithoutSections,
+  courseBestPracticesMock,
+  courseLaunchMock,
+  courseSectionMock,
+  courseSubsectionMock,
+} from './__mocks__';
+import { clipboardUnit } from '../__mocks__';
+import { executeThunk } from '../utils';
+import { COURSE_BLOCK_NAMES, VIDEO_SHARING_OPTIONS } from './constants';
+import CourseOutline from './CourseOutline';
+
+import configureModalMessages from '../generic/configure-modal/messages';
+import pasteButtonMessages from '../generic/clipboard/paste-component/messages';
+import messages from './messages';
+import { getClipboardUrl } from '../generic/data/api';
+import headerMessages from './header-navigations/messages';
+import cardHeaderMessages from './card-header/messages';
+import enableHighlightsModalMessages from './enable-highlights-modal/messages';
+import statusBarMessages from './status-bar/messages';
+import subsectionMessages from './subsection-card/messages';
+import pageAlertMessages from './page-alerts/messages';
+import {
+  moveSubsectionOver,
+  moveUnitOver,
+  moveSubsection,
+  moveUnit,
+} from '../generic/drag-helper/utils';
+
+let axiosMock;
+let store;
+const mockPathname = '/foo-bar';
+const courseId = '123';
+
+window.HTMLElement.prototype.scrollIntoView = jest.fn();
+
+const clipboardBroadcastChannelMock = {
+  postMessage: jest.fn(),
+  close: jest.fn(),
+};
+
+global.BroadcastChannel = jest.fn(() => clipboardBroadcastChannelMock);
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useLocation: jest.fn(),
+}));
+
+jest.mock('../help-urls/hooks', () => ({
+  useHelpUrls: () => ({
+    contentHighlights: 'some',
+    visibility: 'some',
+    grading: 'some',
+    outline: 'some',
+  }),
+}));
+
+jest.mock('@edx/frontend-platform/i18n', () => ({
+  ...jest.requireActual('@edx/frontend-platform/i18n'),
+  useIntl: () => ({
+    formatMessage: (message) => message.defaultMessage,
+  }),
+}));
+
+jest.mock('./data/api', () => ({
+  ...jest.requireActual('./data/api'),
+  getTagsCount: () => jest.fn().mockResolvedValue({}),
+}));
+
+const queryClient = new QueryClient();
+
+jest.mock('@dnd-kit/core', () => ({
+  ...jest.requireActual('@dnd-kit/core'),
+  // Since jsdom (used by jest) does not support getBoundingClientRect function
+  // which is required for drag-n-drop calculations, we mock closestCorners fn
+  // from dnd-kit to return collided elements as per the test. This allows us to
+  // test all drag-n-drop handlers.
+  closestCorners: jest.fn(),
+}));
+
+// eslint-disable-next-line no-promise-executor-return
+const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+
+const RootWrapper = () => (
+  <AppProvider store={store}>
+    <QueryClientProvider client={queryClient}>
+      <IntlProvider locale="en">
+        <CourseOutline courseId={courseId} />
+      </IntlProvider>
+    </QueryClientProvider>
+  </AppProvider>
+);
+
+describe('<CourseOutline />', () => {
+  beforeEach(async () => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+
+    useLocation.mockReturnValue({
+      pathname: mockPathname,
+    });
+
+    store = initializeStore();
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+    axiosMock
+      .onGet(getCourseOutlineIndexApiUrl(courseId))
+      .reply(200, courseOutlineIndexMock);
+    axiosMock
+      .onGet(getCourseBestPracticesApiUrl({
+        courseId, excludeGraded: true, all: true,
+      }))
+      .reply(200, courseBestPracticesMock);
+
+    axiosMock
+      .onGet(getCourseLaunchApiUrl({
+        courseId, gradedOnly: true, validateOras: true, all: true,
+      }))
+      .reply(200, courseLaunchMock);
+    await executeThunk(fetchCourseOutlineIndexQuery(courseId), store.dispatch);
+  });
+
+  it('render CourseOutline component correctly', async () => {
+    const { getByText } = render(<RootWrapper />);
+
+    await waitFor(() => {
+      expect(getByText(messages.headingTitle.defaultMessage)).toBeInTheDocument();
+      expect(getByText(messages.headingSubtitle.defaultMessage)).toBeInTheDocument();
+    });
+  });
+
+  it('handles course outline fetch api errors', async () => {
+    axiosMock
+      .onGet(getCourseOutlineIndexApiUrl(courseId))
+      .reply(500, 'some internal error');
+
+    const { findByText, queryByRole } = render(<RootWrapper />);
+    expect(await findByText('"some internal error"')).toBeInTheDocument();
+    // check errors in store
+    expect(store.getState().courseOutline.errors).toEqual({
+      courseLaunchApi: null,
+      outlineIndexApi: {
+        data: '"some internal error"',
+        dismissible: false,
+        status: 500,
+        type: 'serverError',
+      },
+      reindexApi: null,
+      sectionLoadingApi: null,
+    });
+
+    expect(queryByRole('button', { name: 'Dismiss' })).not.toBeInTheDocument();
+  });
+
+  it('check reindex and render success alert is correctly', async () => {
+    const { findByText, findByTestId } = render(<RootWrapper />);
+
+    axiosMock
+      .onGet(getCourseReindexApiUrl(courseOutlineIndexMock.reindexLink))
+      .reply(200);
+    const reindexButton = await findByTestId('course-reindex');
+    fireEvent.click(reindexButton);
+
+    expect(await findByText(messages.alertSuccessDescription.defaultMessage)).toBeInTheDocument();
+  });
+
+  it('check video sharing option udpates correctly', async () => {
+    const { findByLabelText } = render(<RootWrapper />);
+
+    axiosMock
+      .onPost(getCourseBlockApiUrl(courseId), {
+        metadata: {
+          video_sharing_options: VIDEO_SHARING_OPTIONS.allOff,
+        },
+      })
+      .reply(200);
+    const optionDropdown = await findByLabelText(statusBarMessages.videoSharingTitle.defaultMessage);
+    await act(
+      async () => fireEvent.change(optionDropdown, { target: { value: VIDEO_SHARING_OPTIONS.allOff } }),
+    );
+
+    expect(axiosMock.history.post.length).toBe(1);
+    expect(axiosMock.history.post[0].data).toBe(JSON.stringify({
+      metadata: {
+        video_sharing_options: VIDEO_SHARING_OPTIONS.allOff,
+      },
+    }));
+  });
+
+  it('check video sharing option shows error on failure', async () => {
+    render(<RootWrapper />);
+
+    axiosMock
+      .onPost(getCourseBlockApiUrl(courseId), {
+        metadata: {
+          video_sharing_options: VIDEO_SHARING_OPTIONS.allOff,
+        },
+      })
+      .reply(500);
+    const optionDropdown = await screen.findByLabelText(statusBarMessages.videoSharingTitle.defaultMessage);
+    await act(
+      async () => fireEvent.change(optionDropdown, { target: { value: VIDEO_SHARING_OPTIONS.allOff } }),
+    );
+
+    expect(axiosMock.history.post.length).toBe(1);
+    expect(axiosMock.history.post[0].data).toBe(JSON.stringify({
+      metadata: {
+        video_sharing_options: VIDEO_SHARING_OPTIONS.allOff,
+      },
+    }));
+
+    const alertElements = screen.queryAllByRole('alert');
+    expect(alertElements.find(
+      (el) => el.classList.contains('alert-content'),
+    )).toHaveTextContent(
+      pageAlertMessages.alertFailedGeneric.defaultMessage,
+    );
+  });
+
+  it('render error alert after failed reindex correctly', async () => {
+    const { findByText, findByTestId } = render(<RootWrapper />);
+
+    axiosMock
+      .onGet(getCourseReindexApiUrl(courseOutlineIndexMock.reindexLink))
+      .reply(500);
+    const reindexButton = await findByTestId('course-reindex');
+    await act(async () => fireEvent.click(reindexButton));
+
+    expect(await findByText('Request failed with status code 500')).toBeInTheDocument();
+  });
+
+  it('check that new section list is saved when dragged', async () => {
+    const { findAllByRole } = render(<RootWrapper />);
+    const courseBlockId = courseOutlineIndexMock.courseStructure.id;
+    const sectionsDraggers = await findAllByRole('button', { name: 'Drag to reorder' });
+    const draggableButton = sectionsDraggers[6];
+
+    axiosMock
+      .onPut(getCourseBlockApiUrl(courseBlockId))
+      .reply(200, { dummy: 'value' });
+
+    const section1 = store.getState().courseOutline.sectionsList[0].id;
+    closestCorners.mockReturnValue([{ id: section1 }]);
+
+    fireEvent.keyDown(draggableButton, { code: 'Space' });
+    await sleep(1);
+    fireEvent.keyDown(draggableButton, { code: 'Space' });
+    await waitFor(async () => {
+      const saveStatus = store.getState().courseOutline.savingStatus;
+      expect(saveStatus).toEqual(RequestStatus.SUCCESSFUL);
+    });
+
+    const section2 = store.getState().courseOutline.sectionsList[1].id;
+    expect(section1).toBe(section2);
+  });
+
+  it('check section list is restored to original order when API call fails', async () => {
+    const { findAllByRole } = render(<RootWrapper />);
+    const courseBlockId = courseOutlineIndexMock.courseStructure.id;
+    const sectionsDraggers = await findAllByRole('button', { name: 'Drag to reorder' });
+    const draggableButton = sectionsDraggers[6];
+
+    axiosMock
+      .onPut(getCourseBlockApiUrl(courseBlockId))
+      .reply(500);
+
+    const section1 = store.getState().courseOutline.sectionsList[0].id;
+    closestCorners.mockReturnValue([{ id: section1 }]);
+
+    fireEvent.keyDown(draggableButton, { code: 'Space' });
+    await sleep(1);
+    fireEvent.keyDown(draggableButton, { code: 'Space' });
+    await waitFor(async () => {
+      const saveStatus = store.getState().courseOutline.savingStatus;
+      expect(saveStatus).toEqual(RequestStatus.FAILED);
+    });
+
+    const section1New = store.getState().courseOutline.sectionsList[0].id;
+    expect(section1).toBe(section1New);
+  });
+
+  it('adds new section correctly', async () => {
+    const { findAllByTestId, findByTestId } = render(<RootWrapper />);
+    let elements = await findAllByTestId('section-card');
+    window.HTMLElement.prototype.getBoundingClientRect = jest.fn(() => ({
+      top: 0,
+      bottom: 4000,
+    }));
+    expect(elements.length).toBe(4);
+
+    axiosMock
+      .onPost(getXBlockBaseApiUrl())
+      .reply(200, {
+        locator: courseSectionMock.id,
+      });
+    axiosMock
+      .onGet(getXBlockApiUrl(courseSectionMock.id))
+      .reply(200, courseSectionMock);
+    const newSectionButton = await findByTestId('new-section-button');
+    await act(async () => fireEvent.click(newSectionButton));
+
+    elements = await findAllByTestId('section-card');
+    expect(elements.length).toBe(5);
+    expect(window.HTMLElement.prototype.scrollIntoView).toBeCalled();
+  });
+
+  it('adds new subsection correctly', async () => {
+    const { findAllByTestId } = render(<RootWrapper />);
+    const [section] = await findAllByTestId('section-card');
+    let subsections = await within(section).findAllByTestId('subsection-card');
+    expect(subsections.length).toBe(2);
+    window.HTMLElement.prototype.getBoundingClientRect = jest.fn(() => ({
+      top: 0,
+      bottom: 4000,
+    }));
+
+    axiosMock
+      .onPost(getXBlockBaseApiUrl())
+      .reply(200, {
+        locator: courseSubsectionMock.id,
+      });
+    axiosMock
+      .onGet(getXBlockApiUrl(courseSubsectionMock.id))
+      .reply(200, courseSubsectionMock);
+    const newSubsectionButton = await within(section).findByTestId('new-subsection-button');
+    await act(async () => {
+      fireEvent.click(newSubsectionButton);
+    });
+
+    subsections = await within(section).findAllByTestId('subsection-card');
+    expect(subsections.length).toBe(3);
+    expect(window.HTMLElement.prototype.scrollIntoView).toBeCalled();
+  });
+
+  it('adds new unit correctly', async () => {
+    const { findAllByTestId } = render(<RootWrapper />);
+    const [sectionElement] = await findAllByTestId('section-card');
+    const [subsectionElement] = await within(sectionElement).findAllByTestId('subsection-card');
+    const expandBtn = await within(subsectionElement).findByTestId('subsection-card-header__expanded-btn');
+    fireEvent.click(expandBtn);
+    const units = await within(subsectionElement).findAllByTestId('unit-card');
+    expect(units.length).toBe(1);
+
+    axiosMock
+      .onPost(getXBlockBaseApiUrl())
+      .reply(200, {
+        locator: 'some',
+      });
+    const newUnitButton = await within(subsectionElement).findByTestId('new-unit-button');
+    await act(async () => fireEvent.click(newUnitButton));
+    expect(axiosMock.history.post.length).toBe(1);
+    const [section] = courseOutlineIndexMock.courseStructure.childInfo.children;
+    const [subsection] = section.childInfo.children;
+    expect(axiosMock.history.post[0].data).toBe(JSON.stringify({
+      parent_locator: subsection.id,
+      category: COURSE_BLOCK_NAMES.vertical.id,
+      display_name: COURSE_BLOCK_NAMES.vertical.name,
+    }));
+  });
+
+  it('render checklist value correctly', async () => {
+    const { getByText } = render(<RootWrapper />);
+
+    await executeThunk(fetchCourseLaunchQuery({
+      courseId, gradedOnly: true, validateOras: true, all: true,
+    }), store.dispatch);
+    await executeThunk(fetchCourseBestPracticesQuery({
+      courseId, excludeGraded: true, all: true,
+    }), store.dispatch);
+
+    expect(getByText('4/9 completed')).toBeInTheDocument();
+  });
+
+  it('render alerts if checklist api fails', async () => {
+    axiosMock
+      .onGet(getCourseLaunchApiUrl({
+        courseId, gradedOnly: true, validateOras: true, all: true,
+      }))
+      .reply(500);
+    const { findByText, findByRole } = render(<RootWrapper />);
+
+    await executeThunk(fetchCourseLaunchQuery({
+      courseId, gradedOnly: true, validateOras: true, all: true,
+    }), store.dispatch);
+
+    expect(await findByText('Request failed with status code 500')).toBeInTheDocument();
+    // check errors in store
+    expect(store.getState().courseOutline.errors).toEqual({
+      courseLaunchApi: {
+        data: 'Request failed with status code 500',
+        type: 'unknown',
+        dismissible: true,
+      },
+      outlineIndexApi: null,
+      reindexApi: null,
+      sectionLoadingApi: null,
+    });
+
+    const dismissBtn = await findByRole('button', { name: 'Dismiss' });
+    fireEvent.click(dismissBtn);
+    expect(store.getState().courseOutline.errors).toEqual({
+      courseLaunchApi: null,
+      outlineIndexApi: null,
+      reindexApi: null,
+      sectionLoadingApi: null,
+    });
+  });
+
+  it('check highlights are enabled after enable highlights query is successful', async () => {
+    const { findByTestId, findByText } = render(<RootWrapper />);
+
+    axiosMock.reset();
+    axiosMock
+      .onPost(getCourseBlockApiUrl(courseId), {
+        publish: 'republish',
+        metadata: {
+          highlights_enabled_for_messaging: true,
+        },
+      })
+      .reply(200);
+    axiosMock
+      .onGet(getCourseOutlineIndexApiUrl(courseId))
+      .reply(200, {
+        ...courseOutlineIndexMock,
+        courseStructure: {
+          ...courseOutlineIndexMock.courseStructure,
+          highlightsEnabledForMessaging: true,
+        },
+      });
+
+    const enableButton = await findByTestId('highlights-enable-button');
+    fireEvent.click(enableButton);
+    const saveButton = await findByText(enableHighlightsModalMessages.submitButton.defaultMessage);
+    await act(async () => fireEvent.click(saveButton));
+    expect(await findByTestId('highlights-enabled-span')).toBeInTheDocument();
+  });
+
+  it('should expand and collapse subsections, after click on subheader buttons', async () => {
+    const { queryAllByTestId, findByText } = render(<RootWrapper />);
+
+    const collapseBtn = await findByText(headerMessages.collapseAllButton.defaultMessage);
+    expect(collapseBtn).toBeInTheDocument();
+    fireEvent.click(collapseBtn);
+
+    const expandBtn = await findByText(headerMessages.expandAllButton.defaultMessage);
+    expect(expandBtn).toBeInTheDocument();
+    fireEvent.click(expandBtn);
+
+    await waitFor(() => {
+      const cardSubsections = queryAllByTestId('section-card__subsections');
+      cardSubsections.forEach(element => expect(element).toBeVisible());
+
+      fireEvent.click(collapseBtn);
+      cardSubsections.forEach(element => expect(element).not.toBeVisible());
+    });
+  });
+
+  it('render CourseOutline component without sections correctly', async () => {
+    axiosMock
+      .onGet(getCourseOutlineIndexApiUrl(courseId))
+      .reply(200, courseOutlineIndexWithoutSections);
+
+    const { getByTestId } = render(<RootWrapper />);
+
+    await waitFor(() => {
+      expect(getByTestId('empty-placeholder')).toBeInTheDocument();
+    });
+  });
+
+  it('render configuration alerts and check dismiss query', async () => {
+    axiosMock
+      .onGet(getCourseOutlineIndexApiUrl(courseId))
+      .reply(200, {
+        ...courseOutlineIndexMock,
+        notificationDismissUrl: '/some/url',
+      });
+
+    render(<RootWrapper />);
+    const alert = await screen.findByText(pageAlertMessages.configurationErrorTitle.defaultMessage);
+    expect(alert).toBeInTheDocument();
+    const dismissBtn = await screen.findByRole('button', { name: 'Dismiss' });
+    axiosMock
+      .onDelete('/some/url')
+      .reply(204);
+    fireEvent.click(dismissBtn);
+
+    expect(axiosMock.history.delete.length).toBe(1);
+  });
+
+  it('check edit title works for section, subsection and unit', async () => {
+    const { findAllByTestId } = render(<RootWrapper />);
+    const checkEditTitle = async (section, element, item, newName, elementName) => {
+      axiosMock.reset();
+      axiosMock
+        .onPost(getCourseItemApiUrl(item.id, {
+          metadata: {
+            display_name: newName,
+          },
+        }))
+        .reply(200, { dummy: 'value' });
+      // mock section, subsection and unit name and check within the elements.
+      // this is done to avoid adding conditions to this mock.
+      axiosMock
+        .onGet(getXBlockApiUrl(section.id))
+        .reply(200, {
+          ...section,
+          display_name: newName,
+          childInfo: {
+            children: [
+              {
+                ...section.childInfo.children[0],
+                display_name: newName,
+                childInfo: {
+                  children: [
+                    {
+                      ...section.childInfo.children[0].childInfo.children[0],
+                      display_name: newName,
+                    },
+                  ],
+                },
+              },
+            ],
+          },
+        });
+
+      const editButton = await within(element).findByTestId(`${elementName}-edit-button`);
+      fireEvent.click(editButton);
+      const editField = await within(element).findByTestId(`${elementName}-edit-field`);
+      fireEvent.change(editField, { target: { value: newName } });
+      await act(async () => fireEvent.blur(editField));
+      expect(
+        axiosMock.history.post[axiosMock.history.post.length - 1].data,
+        `Failed for ${elementName}!`,
+      ).toBe(JSON.stringify({
+        metadata: {
+          display_name: newName,
+        },
+      }));
+      const results = await within(element).findAllByText(newName);
+      expect(results.length, `Failed for ${elementName}!`).toBeGreaterThan(0);
+    };
+
+    // check section
+    const [section] = courseOutlineIndexMock.courseStructure.childInfo.children;
+    const [sectionElement] = await findAllByTestId('section-card');
+    await checkEditTitle(section, sectionElement, section, 'New section name', 'section');
+
+    // check subsection
+    const [subsection] = section.childInfo.children;
+    const [subsectionElement] = await within(sectionElement).findAllByTestId('subsection-card');
+    await checkEditTitle(section, subsectionElement, subsection, 'New subsection name', 'subsection');
+
+    // check unit
+    const expandBtn = await within(subsectionElement).findByTestId('subsection-card-header__expanded-btn');
+    fireEvent.click(expandBtn);
+    const [unit] = subsection.childInfo.children;
+    const [unitElement] = await within(subsectionElement).findAllByTestId('unit-card');
+    await checkEditTitle(section, unitElement, unit, 'New unit name', 'unit');
+  });
+
+  it('check whether section, subsection and unit is deleted when corresponding delete button is clicked', async () => {
+    render(<RootWrapper />);
+    // get section, subsection and unit
+    const [section] = courseOutlineIndexMock.courseStructure.childInfo.children;
+    const [sectionElement] = await screen.findAllByTestId('section-card');
+    const [subsection] = section.childInfo.children;
+    const [subsectionElement] = await within(sectionElement).findAllByTestId('subsection-card');
+    const expandBtn = await within(subsectionElement).findByTestId('subsection-card-header__expanded-btn');
+    fireEvent.click(expandBtn);
+    const [unit] = subsection.childInfo.children;
+    const [unitElement] = await within(subsectionElement).findAllByTestId('unit-card');
+
+    const checkDeleteBtn = async (item, element, elementName) => {
+      await waitFor(() => {
+        expect(screen.queryByText(item.displayName), `Failed for ${elementName}!`).toBeInTheDocument();
+      });
+
+      axiosMock.onDelete(getCourseItemApiUrl(item.id)).reply(200);
+
+      const menu = await within(element).findByTestId(`${elementName}-card-header__menu-button`);
+      fireEvent.click(menu);
+      const deleteButton = await within(element).findByTestId(`${elementName}-card-header__menu-delete-button`);
+      fireEvent.click(deleteButton);
+      const confirmButton = await screen.findByRole('button', { name: 'Delete' });
+      fireEvent.click(confirmButton);
+
+      await waitFor(() => {
+        expect(screen.queryByText(item.displayName), `Failed for ${elementName}!`).not.toBeInTheDocument();
+      });
+    };
+
+    // delete unit, subsection and then section in order.
+    // check unit
+    await checkDeleteBtn(unit, unitElement, 'unit');
+    // check subsection
+    await checkDeleteBtn(subsection, subsectionElement, 'subsection');
+    // check section
+    await checkDeleteBtn(section, sectionElement, 'section');
+  });
+
+  it('check whether section, subsection and unit is duplicated successfully', async () => {
+    const { findAllByTestId } = render(<RootWrapper />);
+    // get section, subsection and unit
+    const [section] = courseOutlineIndexMock.courseStructure.childInfo.children;
+    const [sectionElement] = await findAllByTestId('section-card');
+    const [subsection] = section.childInfo.children;
+    const [subsectionElement] = await within(sectionElement).findAllByTestId('subsection-card');
+    const expandBtn = await within(subsectionElement).findByTestId('subsection-card-header__expanded-btn');
+    fireEvent.click(expandBtn);
+    const [unit] = subsection.childInfo.children;
+    const [unitElement] = await within(subsectionElement).findAllByTestId('unit-card');
+
+    const checkDuplicateBtn = async (item, parentElement, element, elementName, expectedLength) => {
+      // baseline
+      if (parentElement) {
+        expect(
+          await within(parentElement).findAllByTestId(`${elementName}-card`),
+          `Failed for ${elementName}!`,
+        ).toHaveLength(expectedLength - 1);
+      } else {
+        expect(
+          await findAllByTestId(`${elementName}-card`),
+          `Failed for ${elementName}!`,
+        ).toHaveLength(expectedLength - 1);
+      }
+
+      const duplicatedItemId = item.id + elementName;
+      axiosMock
+        .onPost(getXBlockBaseApiUrl())
+        .reply(200, {
+          locator: duplicatedItemId,
+        });
+      if (elementName === 'section') {
+        section.id = duplicatedItemId;
+      } else if (elementName === 'subsection') {
+        section.childInfo.children = [...section.childInfo.children, { ...subsection, id: duplicatedItemId }];
+      } else if (elementName === 'unit') {
+        subsection.childInfo.children = [...subsection.childInfo.children, { ...unit, id: duplicatedItemId }];
+        section.childInfo.children = [subsection, ...section.childInfo.children.slice(1)];
+      }
+      axiosMock
+        .onGet(getXBlockApiUrl(section.id))
+        .reply(200, {
+          ...section,
+        });
+
+      const menu = await within(element).findByTestId(`${elementName}-card-header__menu-button`);
+      fireEvent.click(menu);
+      const duplicateButton = await within(element).findByTestId(`${elementName}-card-header__menu-duplicate-button`);
+      await act(async () => fireEvent.click(duplicateButton));
+      if (parentElement) {
+        expect(
+          await within(parentElement).findAllByTestId(`${elementName}-card`),
+          `Failed for ${elementName}!`,
+        ).toHaveLength(expectedLength);
+      } else {
+        expect(
+          await findAllByTestId(`${elementName}-card`),
+          `Failed for ${elementName}!`,
+        ).toHaveLength(expectedLength);
+      }
+    };
+
+    // duplicate unit, subsection and then section in order.
+    // check unit
+    await checkDuplicateBtn(unit, subsectionElement, unitElement, 'unit', 2);
+    // check subsection
+    await checkDuplicateBtn(subsection, sectionElement, subsectionElement, 'subsection', 3);
+    // check section
+    await checkDuplicateBtn(section, null, sectionElement, 'section', 5);
+  });
+
+  it('check section, subsection & unit is published when publish button is clicked', async () => {
+    const { findAllByTestId, findByTestId } = render(<RootWrapper />);
+    const [section] = courseOutlineIndexMock.courseStructure.childInfo.children;
+    const [sectionElement] = await findAllByTestId('section-card');
+    const [subsection] = section.childInfo.children;
+    const [subsectionElement] = await within(sectionElement).findAllByTestId('subsection-card');
+    const expandBtn = await within(subsectionElement).findByTestId('subsection-card-header__expanded-btn');
+    fireEvent.click(expandBtn);
+    const [unit] = subsection.childInfo.children;
+    const [unitElement] = await within(subsectionElement).findAllByTestId('unit-card');
+
+    const checkPublishBtn = async (item, element, elementName) => {
+      expect(
+        (await within(element).getAllByRole('status'))[0],
+        `Failed for ${elementName}!`,
+      ).toHaveTextContent(cardHeaderMessages.statusBadgeDraft.defaultMessage);
+
+      axiosMock
+        .onPost(getCourseItemApiUrl(item.id), {
+          publish: 'make_public',
+        })
+        .reply(200, { dummy: 'value' });
+
+      let mockReturnValue = {
+        ...section,
+        childInfo: {
+          children: [
+            {
+              ...section.childInfo.children[0],
+              published: true,
+              visibilityState: 'live',
+            },
+            ...section.childInfo.children.slice(1),
+          ],
+        },
+      };
+      if (elementName === 'unit') {
+        mockReturnValue = {
+          ...section,
+          childInfo: {
+            children: [
+              {
+                ...section.childInfo.children[0],
+                childInfo: {
+                  children: [
+                    {
+                      ...section.childInfo.children[0].childInfo.children[0],
+                      published: true,
+                      visibilityState: 'live',
+                    },
+                    ...section.childInfo.children[0].childInfo.children.slice(1),
+                  ],
+                },
+              },
+              ...section.childInfo.children.slice(1),
+            ],
+          },
+        };
+      }
+      axiosMock
+        .onGet(getXBlockApiUrl(section.id))
+        .reply(200, mockReturnValue);
+
+      const menu = await within(element).findByTestId(`${elementName}-card-header__menu-button`);
+      fireEvent.click(menu);
+      const publishButton = await within(element).findByTestId(`${elementName}-card-header__menu-publish-button`);
+      await act(async () => fireEvent.click(publishButton));
+      const confirmButton = await findByTestId('publish-confirm-button');
+      await act(async () => fireEvent.click(confirmButton));
+
+      expect(
+        (await within(element).getAllByRole('status'))[0],
+        `Failed for ${elementName}!`,
+      ).toHaveTextContent(cardHeaderMessages.statusBadgeLive.defaultMessage);
+    };
+
+    // publish unit, subsection and then section in order.
+    // check unit
+    await checkPublishBtn(unit, unitElement, 'unit');
+    // check subsection
+    await checkPublishBtn(subsection, subsectionElement, 'subsection');
+    // section doesn't display badges
+  });
+
+  it('check configure modal for section', async () => {
+    const { findByTestId, findAllByTestId } = render(<RootWrapper />);
+    const section = courseOutlineIndexMock.courseStructure.childInfo.children[0];
+    const newReleaseDateIso = '2025-09-10T22:00:00Z';
+    const newReleaseDate = '09/10/2025';
+    axiosMock
+      .onPost(getCourseItemApiUrl(section.id), {
+        publish: 'republish',
+        metadata: {
+          visible_to_staff_only: true,
+          start: newReleaseDateIso,
+        },
+      })
+      .reply(200, { dummy: 'value' });
+
+    axiosMock
+      .onGet(getXBlockApiUrl(section.id))
+      .reply(200, {
+        ...section,
+        start: newReleaseDateIso,
+      });
+
+    const [firstSection] = await findAllByTestId('section-card');
+
+    const sectionDropdownButton = await within(firstSection).findByTestId('section-card-header__menu-button');
+    await act(async () => fireEvent.click(sectionDropdownButton));
+    const configureBtn = await within(firstSection).findByTestId('section-card-header__menu-configure-button');
+    await act(async () => fireEvent.click(configureBtn));
+    let releaseDateStack = await findByTestId('release-date-stack');
+    let releaseDatePicker = await within(releaseDateStack).findByPlaceholderText('MM/DD/YYYY');
+    expect(releaseDatePicker).toHaveValue('08/10/2023');
+
+    await act(async () => fireEvent.change(releaseDatePicker, { target: { value: newReleaseDate } }));
+    expect(releaseDatePicker).toHaveValue(newReleaseDate);
+    const saveButton = await findByTestId('configure-save-button');
+    await act(async () => fireEvent.click(saveButton));
+
+    expect(axiosMock.history.post.length).toBe(1);
+    expect(axiosMock.history.post[0].data).toBe(JSON.stringify({
+      publish: 'republish',
+      metadata: {
+        visible_to_staff_only: true,
+        start: newReleaseDateIso,
+      },
+    }));
+
+    await act(async () => fireEvent.click(sectionDropdownButton));
+    await act(async () => fireEvent.click(configureBtn));
+    releaseDateStack = await findByTestId('release-date-stack');
+    releaseDatePicker = await within(releaseDateStack).findByPlaceholderText('MM/DD/YYYY');
+    expect(releaseDatePicker).toHaveValue(newReleaseDate);
+  });
+
+  it('check configure modal for subsection', async () => {
+    const {
+      findAllByTestId,
+      findByTestId,
+    } = render(<RootWrapper />);
+    const section = cloneDeep(courseOutlineIndexMock.courseStructure.childInfo.children[0]);
+    const [subsection] = section.childInfo.children;
+    const expectedRequestData = {
+      publish: 'republish',
+      graderType: 'Homework',
+      isPrereq: false,
+      prereqMinScore: 100,
+      prereqMinCompletion: 100,
+      metadata: {
+        visible_to_staff_only: null,
+        due: '2025-09-10T05:00:00Z',
+        hide_after_due: true,
+        show_correctness: 'always',
+        is_practice_exam: false,
+        is_time_limited: true,
+        is_proctored_enabled: false,
+        exam_review_rules: '',
+        default_time_limit_minutes: 3270,
+        is_onboarding_exam: false,
+        start: '2025-08-10T00:00:00Z',
+      },
+    };
+
+    axiosMock
+      .onPost(getCourseItemApiUrl(subsection.id), expectedRequestData)
+      .reply(200, { dummy: 'value' });
+
+    const [currentSection] = await findAllByTestId('section-card');
+    const [firstSubsection] = await within(currentSection).findAllByTestId('subsection-card');
+    const subsectionDropdownButton = await within(firstSubsection).findByTestId('subsection-card-header__menu-button');
+
+    subsection.start = expectedRequestData.metadata.start;
+    subsection.due = expectedRequestData.metadata.due;
+    subsection.format = expectedRequestData.graderType;
+    subsection.isTimeLimited = expectedRequestData.metadata.is_time_limited;
+    subsection.defaultTimeLimitMinutes = expectedRequestData.metadata.default_time_limit_minutes;
+    subsection.hideAfterDue = expectedRequestData.metadata.hideAfterDue;
+    section.childInfo.children[0] = subsection;
+    axiosMock
+      .onGet(getXBlockApiUrl(section.id))
+      .reply(200, section);
+
+    fireEvent.click(subsectionDropdownButton);
+    const configureBtn = await within(firstSubsection).findByTestId('subsection-card-header__menu-configure-button');
+    fireEvent.click(configureBtn);
+
+    // update fields
+    let configureModal = await findByTestId('configure-modal');
+    expect(await within(configureModal).findByText(expectedRequestData.graderType)).toBeInTheDocument();
+    let releaseDateStack = await within(configureModal).findByTestId('release-date-stack');
+    let releaseDatePicker = await within(releaseDateStack).findByPlaceholderText('MM/DD/YYYY');
+    fireEvent.change(releaseDatePicker, { target: { value: '08/10/2025' } });
+    let releaseDateTimePicker = await within(releaseDateStack).findByPlaceholderText('HH:MM');
+    fireEvent.change(releaseDateTimePicker, { target: { value: '00:00' } });
+    let dueDateStack = await within(configureModal).findByTestId('due-date-stack');
+    let dueDatePicker = await within(dueDateStack).findByPlaceholderText('MM/DD/YYYY');
+    fireEvent.change(dueDatePicker, { target: { value: '09/10/2025' } });
+    let dueDateTimePicker = await within(dueDateStack).findByPlaceholderText('HH:MM');
+    fireEvent.change(dueDateTimePicker, { target: { value: '05:00' } });
+    let graderTypeDropdown = await within(configureModal).findByTestId('grader-type-select');
+    fireEvent.change(graderTypeDropdown, { target: { value: expectedRequestData.graderType } });
+
+    // visibility tab
+    const visibilityTab = await within(configureModal).findByRole('tab', { name: configureModalMessages.visibilityTabTitle.defaultMessage });
+    fireEvent.click(visibilityTab);
+    const visibilityRadioButtons = await within(configureModal).findAllByRole('radio');
+    fireEvent.click(visibilityRadioButtons[1]);
+
+    let advancedTab = await within(configureModal).findByRole('tab', { name: configureModalMessages.advancedTabTitle.defaultMessage });
+    fireEvent.click(advancedTab);
+    let radioButtons = await within(configureModal).findAllByRole('radio');
+    fireEvent.click(radioButtons[1]);
+    let hoursWrapper = await within(configureModal).findByTestId('advanced-tab-hours-picker-wrapper');
+    let hours = await within(hoursWrapper).findByPlaceholderText('HH:MM');
+    fireEvent.change(hours, { target: { value: '54:30' } });
+    const saveButton = await within(configureModal).findByTestId('configure-save-button');
+    await act(async () => fireEvent.click(saveButton));
+
+    // verify request
+    expect(axiosMock.history.post.length).toBe(1);
+    expect(axiosMock.history.post[0].data).toBe(JSON.stringify(expectedRequestData));
+
+    // reopen modal and check values
+    await act(async () => fireEvent.click(subsectionDropdownButton));
+    await act(async () => fireEvent.click(configureBtn));
+
+    configureModal = await findByTestId('configure-modal');
+    releaseDateStack = await within(configureModal).findByTestId('release-date-stack');
+    releaseDatePicker = await within(releaseDateStack).findByPlaceholderText('MM/DD/YYYY');
+    expect(releaseDatePicker).toHaveValue('08/10/2025');
+    releaseDateTimePicker = await within(releaseDateStack).findByPlaceholderText('HH:MM');
+    expect(releaseDateTimePicker).toHaveValue('00:00');
+    dueDateStack = await await within(configureModal).findByTestId('due-date-stack');
+    dueDatePicker = await within(dueDateStack).findByPlaceholderText('MM/DD/YYYY');
+    expect(dueDatePicker).toHaveValue('09/10/2025');
+    dueDateTimePicker = await within(dueDateStack).findByPlaceholderText('HH:MM');
+    expect(dueDateTimePicker).toHaveValue('05:00');
+    graderTypeDropdown = await within(configureModal).findByTestId('grader-type-select');
+    expect(graderTypeDropdown).toHaveValue(expectedRequestData.graderType);
+
+    advancedTab = await within(configureModal).findByRole('tab', { name: configureModalMessages.advancedTabTitle.defaultMessage });
+    fireEvent.click(advancedTab);
+    radioButtons = await within(configureModal).findAllByRole('radio');
+    expect(radioButtons[0]).toHaveProperty('checked', false);
+    expect(radioButtons[1]).toHaveProperty('checked', true);
+    hoursWrapper = await within(configureModal).findByTestId('advanced-tab-hours-picker-wrapper');
+    hours = await within(hoursWrapper).findByPlaceholderText('HH:MM');
+    expect(hours).toHaveValue('54:30');
+  });
+
+  it('check prereq and proctoring settings in configure modal for subsection', async () => {
+    const {
+      findAllByTestId,
+      findByTestId,
+    } = render(<RootWrapper />);
+    const section = cloneDeep(courseOutlineIndexMock.courseStructure.childInfo.children[0]);
+    const [subsection, secondSubsection] = section.childInfo.children;
+    const expectedRequestData = {
+      publish: 'republish',
+      graderType: 'notgraded',
+      isPrereq: true,
+      prereqUsageKey: secondSubsection.id,
+      prereqMinScore: 80,
+      prereqMinCompletion: 90,
+      metadata: {
+        visible_to_staff_only: true,
+        due: '',
+        hide_after_due: false,
+        show_correctness: 'always',
+        is_practice_exam: false,
+        is_time_limited: true,
+        is_proctored_enabled: true,
+        exam_review_rules: 'some rules for proctored exams',
+        default_time_limit_minutes: 30,
+        is_onboarding_exam: false,
+        start: '1970-01-01T05:00:00Z',
+      },
+    };
+
+    axiosMock
+      .onPost(getCourseItemApiUrl(subsection.id), expectedRequestData)
+      .reply(200, { dummy: 'value' });
+
+    const [currentSection] = await findAllByTestId('section-card');
+    const [firstSubsection] = await within(currentSection).findAllByTestId('subsection-card');
+    const subsectionDropdownButton = await within(firstSubsection).findByTestId('subsection-card-header__menu-button');
+
+    subsection.isTimeLimited = expectedRequestData.metadata.is_time_limited;
+    subsection.defaultTimeLimitMinutes = expectedRequestData.metadata.default_time_limit_minutes;
+    subsection.isProctoredExam = expectedRequestData.metadata.is_proctored_enabled;
+    subsection.isPracticeExam = expectedRequestData.metadata.is_practice_exam;
+    subsection.isOnboardingExam = expectedRequestData.metadata.is_onboarding_exam;
+    subsection.examReviewRules = expectedRequestData.metadata.exam_review_rules;
+    subsection.isPrereq = expectedRequestData.isPrereq;
+    subsection.prereq = expectedRequestData.prereqUsageKey;
+    subsection.prereqMinScore = expectedRequestData.prereqMinScore;
+    subsection.prereqMinCompletion = expectedRequestData.prereqMinCompletion;
+    section.childInfo.children[0] = subsection;
+    axiosMock
+      .onGet(getXBlockApiUrl(section.id))
+      .reply(200, section);
+
+    fireEvent.click(subsectionDropdownButton);
+    const configureBtn = await within(firstSubsection).findByTestId('subsection-card-header__menu-configure-button');
+    fireEvent.click(configureBtn);
+
+    // update fields
+    let configureModal = await findByTestId('configure-modal');
+    let advancedTab = await within(configureModal).findByRole(
+      'tab',
+      { name: configureModalMessages.advancedTabTitle.defaultMessage },
+    );
+
+    // visibility tab
+    const visibilityTab = await within(configureModal).findByRole('tab', { name: configureModalMessages.visibilityTabTitle.defaultMessage });
+    fireEvent.click(visibilityTab);
+    const visibilityRadioButtons = await within(configureModal).findAllByRole('radio');
+    fireEvent.click(visibilityRadioButtons[2]);
+
+    fireEvent.click(advancedTab);
+    let radioButtons = await within(configureModal).findAllByRole('radio');
+    fireEvent.click(radioButtons[2]);
+    let hoursWrapper = await within(configureModal).findByTestId('advanced-tab-hours-picker-wrapper');
+    let hours = await within(hoursWrapper).findByPlaceholderText('HH:MM');
+    fireEvent.change(hours, { target: { value: '00:30' } });
+    // select a prerequisite
+    const prereqSelect = await within(configureModal).findByRole('combobox');
+    fireEvent.change(prereqSelect, { target: { value: expectedRequestData.prereqUsageKey } });
+
+    // update minimum score and completion percentage
+    let prereqMinScoreInput = await within(configureModal).findByLabelText(
+      configureModalMessages.minScoreLabel.defaultMessage,
+    );
+    fireEvent.change(prereqMinScoreInput, { target: { value: expectedRequestData.prereqMinScore } });
+    let prereqMinCompletionInput = await within(configureModal).findByLabelText(
+      configureModalMessages.minCompletionLabel.defaultMessage,
+    );
+    fireEvent.change(prereqMinCompletionInput, { target: { value: expectedRequestData.prereqMinCompletion } });
+
+    // enable this subsection to be used as prerequisite by other subsections
+    let prereqCheckbox = await within(configureModal).findByLabelText(
+      configureModalMessages.prereqCheckboxLabel.defaultMessage,
+    );
+    fireEvent.click(prereqCheckbox);
+
+    // fill some rules for proctored exams
+    let examsRulesInput = await within(configureModal).findByLabelText(
+      configureModalMessages.reviewRulesLabel.defaultMessage,
+    );
+    fireEvent.change(examsRulesInput, { target: { value: expectedRequestData.metadata.exam_review_rules } });
+
+    const saveButton = await within(configureModal).findByTestId('configure-save-button');
+    await act(async () => fireEvent.click(saveButton));
+
+    // verify request
+    expect(axiosMock.history.post.length).toBe(1);
+    expect(axiosMock.history.post[0].data).toBe(JSON.stringify(expectedRequestData));
+
+    // reopen modal and check values
+    await act(async () => fireEvent.click(subsectionDropdownButton));
+    await act(async () => fireEvent.click(configureBtn));
+
+    configureModal = await findByTestId('configure-modal');
+    advancedTab = await within(configureModal).findByRole('tab', {
+      name: configureModalMessages.advancedTabTitle.defaultMessage,
+    });
+    fireEvent.click(advancedTab);
+    radioButtons = await within(configureModal).findAllByRole('radio');
+    expect(radioButtons[0]).toHaveProperty('checked', false);
+    expect(radioButtons[1]).toHaveProperty('checked', false);
+    expect(radioButtons[2]).toHaveProperty('checked', true);
+    hoursWrapper = await within(configureModal).findByTestId('advanced-tab-hours-picker-wrapper');
+    hours = await within(hoursWrapper).findByPlaceholderText('HH:MM');
+    expect(hours).toHaveValue('00:30');
+    prereqCheckbox = await within(configureModal).findByLabelText(
+      configureModalMessages.prereqCheckboxLabel.defaultMessage,
+    );
+    expect(prereqCheckbox).toBeChecked();
+    const prereqSelectOption = await within(configureModal).findByRole('option', { selected: true });
+    expect(prereqSelectOption).toHaveAttribute('value', expectedRequestData.prereqUsageKey);
+    examsRulesInput = await within(configureModal).findByLabelText(
+      configureModalMessages.reviewRulesLabel.defaultMessage,
+    );
+    expect(examsRulesInput).toHaveTextContent(expectedRequestData.metadata.exam_review_rules);
+
+    prereqMinScoreInput = await within(configureModal).findByLabelText(
+      configureModalMessages.minScoreLabel.defaultMessage,
+    );
+    expect(prereqMinScoreInput).toHaveAttribute('value', `${expectedRequestData.prereqMinScore}`);
+    prereqMinCompletionInput = await within(configureModal).findByLabelText(
+      configureModalMessages.minCompletionLabel.defaultMessage,
+    );
+    expect(prereqMinCompletionInput).toHaveAttribute('value', `${expectedRequestData.prereqMinCompletion}`);
+  });
+
+  it('check practice proctoring settings in configure modal', async () => {
+    const {
+      findAllByTestId,
+      findByTestId,
+    } = render(<RootWrapper />);
+    const section = cloneDeep(courseOutlineIndexMock.courseStructure.childInfo.children[0]);
+    const [subsection] = section.childInfo.children;
+    const expectedRequestData = {
+      publish: 'republish',
+      graderType: 'notgraded',
+      isPrereq: false,
+      prereqMinScore: 100,
+      prereqMinCompletion: 100,
+      metadata: {
+        visible_to_staff_only: null,
+        due: '',
+        hide_after_due: false,
+        show_correctness: 'never',
+        is_practice_exam: true,
+        is_time_limited: true,
+        is_proctored_enabled: true,
+        exam_review_rules: '',
+        default_time_limit_minutes: 30,
+        is_onboarding_exam: false,
+        start: '1970-01-01T05:00:00Z',
+      },
+    };
+
+    axiosMock
+      .onPost(getCourseItemApiUrl(subsection.id), expectedRequestData)
+      .reply(200, { dummy: 'value' });
+
+    const [currentSection] = await findAllByTestId('section-card');
+    const [firstSubsection] = await within(currentSection).findAllByTestId('subsection-card');
+    const subsectionDropdownButton = await within(firstSubsection).findByTestId('subsection-card-header__menu-button');
+
+    subsection.isTimeLimited = expectedRequestData.metadata.is_time_limited;
+    subsection.defaultTimeLimitMinutes = expectedRequestData.metadata.default_time_limit_minutes;
+    subsection.isProctoredExam = expectedRequestData.metadata.is_proctored_enabled;
+    subsection.isPracticeExam = expectedRequestData.metadata.is_practice_exam;
+    subsection.isOnboardingExam = expectedRequestData.metadata.is_onboarding_exam;
+    subsection.examReviewRules = expectedRequestData.metadata.exam_review_rules;
+    section.childInfo.children[0] = subsection;
+    axiosMock
+      .onGet(getXBlockApiUrl(section.id))
+      .reply(200, section);
+
+    fireEvent.click(subsectionDropdownButton);
+    const configureBtn = await within(firstSubsection).findByTestId('subsection-card-header__menu-configure-button');
+    fireEvent.click(configureBtn);
+
+    // update fields
+    let configureModal = await findByTestId('configure-modal');
+    let advancedTab = await within(configureModal).findByRole(
+      'tab',
+      { name: configureModalMessages.advancedTabTitle.defaultMessage },
+    );
+    // visibility tab
+    const visibilityTab = await within(configureModal).findByRole('tab', { name: configureModalMessages.visibilityTabTitle.defaultMessage });
+    fireEvent.click(visibilityTab);
+    const visibilityRadioButtons = await within(configureModal).findAllByRole('radio');
+    fireEvent.click(visibilityRadioButtons[4]);
+
+    // advancedTab
+    fireEvent.click(advancedTab);
+    let radioButtons = await within(configureModal).findAllByRole('radio');
+    fireEvent.click(radioButtons[3]);
+    let hoursWrapper = await within(configureModal).findByTestId('advanced-tab-hours-picker-wrapper');
+    let hours = await within(hoursWrapper).findByPlaceholderText('HH:MM');
+    fireEvent.change(hours, { target: { value: '00:30' } });
+
+    // rules box should not be visible
+    expect(within(configureModal).queryByLabelText(
+      configureModalMessages.reviewRulesLabel.defaultMessage,
+    )).not.toBeInTheDocument();
+
+    const saveButton = await within(configureModal).findByTestId('configure-save-button');
+    await act(async () => fireEvent.click(saveButton));
+
+    // verify request
+    expect(axiosMock.history.post.length).toBe(1);
+    expect(axiosMock.history.post[0].data).toBe(JSON.stringify(expectedRequestData));
+
+    // reopen modal and check values
+    await act(async () => fireEvent.click(subsectionDropdownButton));
+    await act(async () => fireEvent.click(configureBtn));
+
+    configureModal = await findByTestId('configure-modal');
+    advancedTab = await within(configureModal).findByRole('tab', { name: configureModalMessages.advancedTabTitle.defaultMessage });
+    fireEvent.click(advancedTab);
+    radioButtons = await within(configureModal).findAllByRole('radio');
+    expect(radioButtons[0]).toHaveProperty('checked', false);
+    expect(radioButtons[1]).toHaveProperty('checked', false);
+    expect(radioButtons[2]).toHaveProperty('checked', false);
+    expect(radioButtons[3]).toHaveProperty('checked', true);
+    hoursWrapper = await within(configureModal).findByTestId('advanced-tab-hours-picker-wrapper');
+    hours = await within(hoursWrapper).findByPlaceholderText('HH:MM');
+    expect(hours).toHaveValue('00:30');
+  });
+
+  it('check onboarding proctoring settings in configure modal', async () => {
+    const {
+      findAllByTestId,
+      findByTestId,
+    } = render(<RootWrapper />);
+    const section = cloneDeep(courseOutlineIndexMock.courseStructure.childInfo.children[0]);
+    const [, subsection] = section.childInfo.children;
+    const expectedRequestData = {
+      publish: 'republish',
+      graderType: 'notgraded',
+      isPrereq: true,
+      prereqMinScore: 100,
+      prereqMinCompletion: 100,
+      metadata: {
+        visible_to_staff_only: null,
+        due: '',
+        hide_after_due: false,
+        show_correctness: 'past_due',
+        is_practice_exam: false,
+        is_time_limited: true,
+        is_proctored_enabled: true,
+        exam_review_rules: '',
+        default_time_limit_minutes: 30,
+        is_onboarding_exam: true,
+        start: '2013-02-05T05:00:00Z',
+      },
+    };
+
+    axiosMock
+      .onPost(getCourseItemApiUrl(subsection.id), expectedRequestData)
+      .reply(200, { dummy: 'value' });
+
+    const [currentSection] = await findAllByTestId('section-card');
+    const [, secondSubsection] = await within(currentSection).findAllByTestId('subsection-card');
+    const subsectionDropdownButton = await within(secondSubsection).findByTestId('subsection-card-header__menu-button');
+
+    subsection.isTimeLimited = expectedRequestData.metadata.is_time_limited;
+    subsection.defaultTimeLimitMinutes = expectedRequestData.metadata.default_time_limit_minutes;
+    subsection.isProctoredExam = expectedRequestData.metadata.is_proctored_enabled;
+    subsection.isPracticeExam = expectedRequestData.metadata.is_practice_exam;
+    subsection.isOnboardingExam = expectedRequestData.metadata.is_onboarding_exam;
+    subsection.examReviewRules = expectedRequestData.metadata.exam_review_rules;
+    section.childInfo.children[1] = subsection;
+    axiosMock
+      .onGet(getXBlockApiUrl(section.id))
+      .reply(200, section);
+
+    fireEvent.click(subsectionDropdownButton);
+    const configureBtn = await within(secondSubsection).findByTestId('subsection-card-header__menu-configure-button');
+    fireEvent.click(configureBtn);
+
+    // update fields
+    let configureModal = await findByTestId('configure-modal');
+    // visibility tab
+    const visibilityTab = await within(configureModal).findByRole('tab', { name: configureModalMessages.visibilityTabTitle.defaultMessage });
+    fireEvent.click(visibilityTab);
+    const visibilityRadioButtons = await within(configureModal).findAllByRole('radio');
+    fireEvent.click(visibilityRadioButtons[5]);
+
+    // advancedTab
+    let advancedTab = await within(configureModal).findByRole(
+      'tab',
+      { name: configureModalMessages.advancedTabTitle.defaultMessage },
+    );
+    fireEvent.click(advancedTab);
+    let radioButtons = await within(configureModal).findAllByRole('radio');
+    fireEvent.click(radioButtons[3]);
+    let hoursWrapper = await within(configureModal).findByTestId('advanced-tab-hours-picker-wrapper');
+    let hours = await within(hoursWrapper).findByPlaceholderText('HH:MM');
+    fireEvent.change(hours, { target: { value: '00:30' } });
+
+    // rules box should not be visible
+    expect(within(configureModal).queryByLabelText(
+      configureModalMessages.reviewRulesLabel.defaultMessage,
+    )).not.toBeInTheDocument();
+
+    const saveButton = await within(configureModal).findByTestId('configure-save-button');
+    await act(async () => fireEvent.click(saveButton));
+
+    // verify request
+    expect(axiosMock.history.post.length).toBe(1);
+    expect(axiosMock.history.post[0].data).toBe(JSON.stringify(expectedRequestData));
+
+    // reopen modal and check values
+    await act(async () => fireEvent.click(subsectionDropdownButton));
+    await act(async () => fireEvent.click(configureBtn));
+
+    configureModal = await findByTestId('configure-modal');
+    advancedTab = await within(configureModal).findByRole('tab', { name: configureModalMessages.advancedTabTitle.defaultMessage });
+    fireEvent.click(advancedTab);
+    radioButtons = await within(configureModal).findAllByRole('radio');
+    expect(radioButtons[0]).toHaveProperty('checked', false);
+    expect(radioButtons[1]).toHaveProperty('checked', false);
+    expect(radioButtons[2]).toHaveProperty('checked', false);
+    expect(radioButtons[3]).toHaveProperty('checked', true);
+    hoursWrapper = await within(configureModal).findByTestId('advanced-tab-hours-picker-wrapper');
+    hours = await within(hoursWrapper).findByPlaceholderText('HH:MM');
+    expect(hours).toHaveValue('00:30');
+  });
+
+  it('check no special exam setting in configure modal', async () => {
+    const {
+      findAllByTestId,
+      findByTestId,
+    } = render(<RootWrapper />);
+    const section = cloneDeep(courseOutlineIndexMock.courseStructure.childInfo.children[1]);
+    const [subsection] = section.childInfo.children;
+    const expectedRequestData = {
+      publish: 'republish',
+      graderType: 'notgraded',
+      prereqMinScore: 100,
+      prereqMinCompletion: 100,
+      metadata: {
+        visible_to_staff_only: null,
+        due: '',
+        hide_after_due: false,
+        show_correctness: 'always',
+        is_practice_exam: false,
+        is_time_limited: false,
+        is_proctored_enabled: false,
+        exam_review_rules: '',
+        default_time_limit_minutes: 0,
+        is_onboarding_exam: false,
+        start: '1970-01-01T05:00:00Z',
+      },
+    };
+
+    axiosMock
+      .onPost(getCourseItemApiUrl(subsection.id), expectedRequestData)
+      .reply(200, { dummy: 'value' });
+
+    const [, currentSection] = await findAllByTestId('section-card');
+    const [subsectionElement] = await within(currentSection).findAllByTestId('subsection-card');
+    const subsectionDropdownButton = await within(subsectionElement).findByTestId('subsection-card-header__menu-button');
+
+    subsection.isTimeLimited = expectedRequestData.metadata.is_time_limited;
+    subsection.defaultTimeLimitMinutes = expectedRequestData.metadata.default_time_limit_minutes;
+    subsection.isProctoredExam = expectedRequestData.metadata.is_proctored_enabled;
+    subsection.isPracticeExam = expectedRequestData.metadata.is_practice_exam;
+    subsection.isOnboardingExam = expectedRequestData.metadata.is_onboarding_exam;
+    subsection.examReviewRules = expectedRequestData.metadata.exam_review_rules;
+    section.childInfo.children[0] = subsection;
+    axiosMock
+      .onGet(getXBlockApiUrl(section.id))
+      .reply(200, section);
+
+    fireEvent.click(subsectionDropdownButton);
+    const configureBtn = await within(subsectionElement).findByTestId('subsection-card-header__menu-configure-button');
+    fireEvent.click(configureBtn);
+
+    // update fields
+    let configureModal = await findByTestId('configure-modal');
+
+    // advancedTab
+    let advancedTab = await within(configureModal).findByRole(
+      'tab',
+      { name: configureModalMessages.advancedTabTitle.defaultMessage },
+    );
+    fireEvent.click(advancedTab);
+    let radioButtons = await within(configureModal).findAllByRole('radio');
+    fireEvent.click(radioButtons[0]);
+
+    // time box should not be visible
+    expect(within(configureModal).queryByLabelText(
+      configureModalMessages.timeAllotted.defaultMessage,
+    )).not.toBeInTheDocument();
+
+    // rules box should not be visible
+    expect(within(configureModal).queryByLabelText(
+      configureModalMessages.reviewRulesLabel.defaultMessage,
+    )).not.toBeInTheDocument();
+
+    const saveButton = await within(configureModal).findByTestId('configure-save-button');
+    await act(async () => fireEvent.click(saveButton));
+
+    // verify request
+    expect(axiosMock.history.post.length).toBe(1);
+    expect(axiosMock.history.post[0].data).toBe(JSON.stringify(expectedRequestData));
+
+    // reopen modal and check values
+    await act(async () => fireEvent.click(subsectionDropdownButton));
+    await act(async () => fireEvent.click(configureBtn));
+
+    configureModal = await findByTestId('configure-modal');
+    advancedTab = await within(configureModal).findByRole('tab', { name: configureModalMessages.advancedTabTitle.defaultMessage });
+    fireEvent.click(advancedTab);
+    radioButtons = await within(configureModal).findAllByRole('radio');
+    expect(radioButtons[0]).toHaveProperty('checked', true);
+    expect(radioButtons[1]).toHaveProperty('checked', false);
+    expect(radioButtons[2]).toHaveProperty('checked', false);
+    expect(radioButtons[3]).toHaveProperty('checked', false);
+  });
+
+  it('check configure modal for unit', async () => {
+    const { findAllByTestId, findByTestId } = render(<RootWrapper />);
+    const section = courseOutlineIndexMock.courseStructure.childInfo.children[0];
+    const [subsection] = section.childInfo.children;
+    const [unit] = subsection.childInfo.children;
+    // Enrollment Track Groups : Audit
+    const newGroupAccess = { 50: [1] };
+    const isVisibleToStaffOnly = true;
+
+    axiosMock
+      .onPost(getCourseItemApiUrl(unit.id), {
+        publish: 'republish',
+        metadata: {
+          visible_to_staff_only: isVisibleToStaffOnly,
+          discussion_enabled: false,
+          group_access: newGroupAccess,
+        },
+      })
+      .reply(200, { dummy: 'value' });
+
+    axiosMock
+      .onGet(getXBlockApiUrl(section.id))
+      .reply(200, section);
+
+    const [firstSection] = await findAllByTestId('section-card');
+    const [firstSubsection] = await within(firstSection).findAllByTestId('subsection-card');
+    const subsectionExpandButton = await within(firstSubsection).getByTestId('subsection-card-header__expanded-btn');
+    fireEvent.click(subsectionExpandButton);
+    const [firstUnit] = await within(firstSubsection).findAllByTestId('unit-card');
+    const unitDropdownButton = await within(firstUnit).findByTestId('unit-card-header__menu-button');
+
+    // after configuraiton response
+    unit.visibilityState = 'staff_only';
+    unit.discussion_enabled = false;
+    unit.userPartitionInfo = {
+      selectablePartitions: [
+        {
+          id: 50,
+          name: 'Enrollment Track Groups',
+          scheme: 'enrollment_track',
+          groups: [
+            {
+              id: 2,
+              name: 'Verified Certificate',
+              selected: false,
+              deleted: false,
+            },
+            {
+              id: 1,
+              name: 'Audit',
+              selected: true,
+              deleted: false,
+            },
+          ],
+        },
+      ],
+      selectedPartitionIndex: 0,
+      selectedGroupsLabel: '',
+    };
+    subsection.childInfo.children[0] = unit;
+    section.childInfo.children[0] = subsection;
+
+    axiosMock
+      .onGet(getXBlockApiUrl(section.id))
+      .reply(200, section);
+
+    fireEvent.click(unitDropdownButton);
+    const configureBtn = await within(firstUnit).getByTestId('unit-card-header__menu-configure-button');
+    fireEvent.click(configureBtn);
+
+    let configureModal = await findByTestId('configure-modal');
+    expect(await within(configureModal).findByText(
+      configureModalMessages.unitVisibility.defaultMessage,
+    )).toBeInTheDocument();
+    let visibilityCheckbox = await within(configureModal).findByTestId('unit-visibility-checkbox');
+    await act(async () => fireEvent.click(visibilityCheckbox));
+    let discussionCheckbox = await within(configureModal).findByLabelText(
+      configureModalMessages.discussionEnabledCheckbox.defaultMessage,
+    );
+    expect(discussionCheckbox).toBeChecked();
+    await act(async () => fireEvent.click(discussionCheckbox));
+
+    let groupeType = await within(configureModal).findByTestId('group-type-select');
+    fireEvent.change(groupeType, { target: { value: '0' } });
+
+    let checkboxes = await within(await within(configureModal).findByTestId('group-checkboxes')).findAllByRole('checkbox');
+    fireEvent.click(checkboxes[1]);
+    const saveButton = await within(configureModal).findByTestId('configure-save-button');
+    await act(async () => fireEvent.click(saveButton));
+
+    // reopen modal and check values
+    await act(async () => fireEvent.click(unitDropdownButton));
+    await act(async () => fireEvent.click(configureBtn));
+
+    configureModal = await findByTestId('configure-modal');
+    visibilityCheckbox = await within(configureModal).findByTestId('unit-visibility-checkbox');
+    expect(visibilityCheckbox).toBeChecked();
+    discussionCheckbox = await within(configureModal).findByLabelText(
+      configureModalMessages.discussionEnabledCheckbox.defaultMessage,
+    );
+    expect(discussionCheckbox).not.toBeChecked();
+
+    groupeType = await within(configureModal).findByTestId('group-type-select');
+    expect(groupeType).toHaveValue('0');
+
+    checkboxes = await within(await within(configureModal).findByTestId('group-checkboxes')).findAllByRole('checkbox');
+
+    expect(checkboxes[0]).not.toBeChecked();
+    expect(checkboxes[1]).toBeChecked();
+  });
+
+  it('check update highlights when update highlights query is successfully', async () => {
+    const { getByRole } = render(<RootWrapper />);
+
+    const section = courseOutlineIndexMock.courseStructure.childInfo.children[0];
+    const highlights = [
+      'New Highlight 1',
+      'New Highlight 2',
+      'New Highlight 3',
+      'New Highlight 4',
+      'New Highlight 5',
+    ];
+
+    axiosMock
+      .onPost(getCourseItemApiUrl(section.id), {
+        publish: 'republish',
+        metadata: {
+          highlights,
+        },
+      })
+      .reply(200, { dummy: 'value' });
+
+    axiosMock
+      .onGet(getXBlockApiUrl(section.id))
+      .reply(200, {
+        ...section,
+        highlights,
+      });
+
+    await executeThunk(updateCourseSectionHighlightsQuery(section.id, highlights), store.dispatch);
+
+    await waitFor(() => {
+      expect(getByRole('button', { name: '5 Section highlights' })).toBeInTheDocument();
+    });
+  });
+
+  it('check whether section move up and down options work correctly', async () => {
+    const { findAllByTestId } = render(<RootWrapper />);
+    // get second section element
+    const courseBlockId = courseOutlineIndexMock.courseStructure.id;
+    const [, secondSection] = courseOutlineIndexMock.courseStructure.childInfo.children;
+    const [, sectionElement] = await findAllByTestId('section-card');
+
+    // mock api call
+    axiosMock
+      .onPut(getCourseBlockApiUrl(courseBlockId))
+      .reply(200, { dummy: 'value' });
+
+    // find menu button and click on it to open menu
+    const menu = await within(sectionElement).findByTestId('section-card-header__menu-button');
+    fireEvent.click(menu);
+
+    // move second section to first position to test move up option
+    const moveUpButton = await within(sectionElement).findByTestId('section-card-header__menu-move-up-button');
+    await act(async () => fireEvent.click(moveUpButton));
+    const firstSectionId = store.getState().courseOutline.sectionsList[0].id;
+    expect(secondSection.id).toBe(firstSectionId);
+
+    // move first section back to second position to test move down option
+    const moveDownButton = await within(sectionElement).findByTestId('section-card-header__menu-move-down-button');
+    await act(async () => fireEvent.click(moveDownButton));
+    const newSecondSectionId = store.getState().courseOutline.sectionsList[1].id;
+    expect(secondSection.id).toBe(newSecondSectionId);
+  });
+
+  it('check whether section move up & down option is rendered correctly based on index', async () => {
+    const { findAllByTestId } = render(<RootWrapper />);
+    // get first, second and last section element
+    const {
+      0: firstSection, 1: secondSection, length, [length - 1]: lastSection,
+    } = await findAllByTestId('section-card');
+
+    // find menu button and click on it to open menu in first section
+    const firstMenu = await within(firstSection).findByTestId('section-card-header__menu-button');
+    await act(async () => fireEvent.click(firstMenu));
+    // move down option should be enabled in first element
+    expect(
+      await within(firstSection).findByTestId('section-card-header__menu-move-down-button'),
+    ).not.toHaveAttribute('aria-disabled');
+    // move up option should not be enabled in first element
+    expect(
+      await within(firstSection).findByTestId('section-card-header__menu-move-up-button'),
+    ).toHaveAttribute('aria-disabled', 'true');
+
+    // find menu button and click on it to open menu in second section
+    const secondMenu = await within(secondSection).findByTestId('section-card-header__menu-button');
+    await act(async () => fireEvent.click(secondMenu));
+    // both move down & up option should be enabled in second element
+    expect(
+      await within(secondSection).findByTestId('section-card-header__menu-move-down-button'),
+    ).not.toHaveAttribute('aria-disabled');
+    expect(
+      await within(secondSection).findByTestId('section-card-header__menu-move-up-button'),
+    ).not.toHaveAttribute('aria-disabled');
+
+    // find menu button and click on it to open menu in last section
+    const lastMenu = await within(lastSection).findByTestId('section-card-header__menu-button');
+    await act(async () => fireEvent.click(lastMenu));
+    // move down option should not be enabled in last element
+    expect(
+      await within(lastSection).findByTestId('section-card-header__menu-move-down-button'),
+    ).toHaveAttribute('aria-disabled', 'true');
+    // move up option should be enabled in last element
+    expect(
+      await within(lastSection).findByTestId('section-card-header__menu-move-up-button'),
+    ).not.toHaveAttribute('aria-disabled');
+  });
+
+  it('check whether subsection move up and down options work correctly', async () => {
+    const { findAllByTestId } = render(<RootWrapper />);
+    // get second section element
+    const [section] = courseOutlineIndexMock.courseStructure.childInfo.children;
+    const [sectionElement] = await findAllByTestId('section-card');
+    const [, secondSubsection] = section.childInfo.children;
+    const [, subsectionElement] = await within(sectionElement).findAllByTestId('subsection-card');
+
+    // mock api call
+    axiosMock
+      .onPut(getCourseItemApiUrl(store.getState().courseOutline.sectionsList[0].id))
+      .reply(200, { dummy: 'value' });
+    const expectedSection = moveSubsection([
+      ...courseOutlineIndexMock.courseStructure.childInfo.children,
+    ], 0, 0, 1)[0][0];
+    axiosMock
+      .onGet(getXBlockApiUrl(section.id))
+      .reply(200, expectedSection);
+
+    // find menu button and click on it to open menu
+    const menu = await within(subsectionElement).findByTestId('subsection-card-header__menu-button');
+    await act(async () => fireEvent.click(menu));
+
+    // move second subsection to first position to test move up option
+    const moveUpButton = await within(subsectionElement).findByTestId('subsection-card-header__menu-move-up-button');
+    await act(async () => fireEvent.click(moveUpButton));
+    const firstSubsectionId = store.getState().courseOutline.sectionsList[0].childInfo.children[0].id;
+    expect(secondSubsection.id).toBe(firstSubsectionId);
+
+    // move first section back to second position to test move down option
+    axiosMock
+      .onGet(getXBlockApiUrl(section.id))
+      .reply(200, section);
+    const moveDownButton = await within(subsectionElement).findByTestId('subsection-card-header__menu-move-down-button');
+    await act(async () => fireEvent.click(moveDownButton));
+    const secondSubsectionId = store.getState().courseOutline.sectionsList[0].childInfo.children[1].id;
+    expect(secondSubsection.id).toBe(secondSubsectionId);
+  });
+
+  it('check whether subsection move up to prev section if it is on top of its parent section', async () => {
+    const { findAllByTestId } = render(<RootWrapper />);
+    const [firstSection, section] = courseOutlineIndexMock.courseStructure.childInfo.children;
+    const [, sectionElement] = await findAllByTestId('section-card');
+    const [subsection] = section.childInfo.children;
+    const [subsectionElement] = await within(sectionElement).findAllByTestId('subsection-card');
+
+    // mock api call
+    axiosMock
+      .onPut(getCourseItemApiUrl(firstSection.id))
+      .reply(200, { dummy: 'value' });
+    const expectedSections = moveSubsectionOver([
+      ...courseOutlineIndexMock.courseStructure.childInfo.children,
+    ], 1, 0, 0, firstSection.childInfo.children.length + 1)[0];
+    axiosMock
+      .onGet(getXBlockApiUrl(firstSection.id))
+      .reply(200, expectedSections[0]);
+    axiosMock
+      .onGet(getXBlockApiUrl(section.id))
+      .reply(200, expectedSections[1]);
+
+    // find menu button and click on it to open menu
+    const menu = await within(subsectionElement).findByTestId('subsection-card-header__menu-button');
+    await act(async () => fireEvent.click(menu));
+
+    // move first subsection in second section to last position of prev section
+    const moveUpButton = await within(subsectionElement).findByTestId('subsection-card-header__menu-move-up-button');
+    await act(async () => fireEvent.click(moveUpButton));
+    const firstSectionSubsections = store.getState().courseOutline.sectionsList[0].childInfo.children;
+    expect(firstSectionSubsections.length).toBe(firstSection.childInfo.children.length + 1);
+    const lastSubsectionFirstSection = firstSectionSubsections[firstSectionSubsections.length - 1].id;
+    expect(subsection.id).toBe(lastSubsectionFirstSection);
+    const subsectionsSecondSection = store.getState().courseOutline.sectionsList[1].childInfo.children;
+    expect(subsectionsSecondSection.length).toBe(section.childInfo.children.length - 1);
+  });
+
+  it('check whether subsection move down to next section if it is in bottom position of its parent section', async () => {
+    const { findAllByTestId } = render(<RootWrapper />);
+    const [section, secondSection] = courseOutlineIndexMock.courseStructure.childInfo.children;
+    const [sectionElement] = await findAllByTestId('section-card');
+    const lastSubsectionIdx = section.childInfo.children.length - 1;
+    const subsection = section.childInfo.children[lastSubsectionIdx];
+    const subsectionElement = (await within(sectionElement).findAllByTestId('subsection-card'))[lastSubsectionIdx];
+
+    // mock api call
+    axiosMock
+      .onPut(getCourseItemApiUrl(secondSection.id))
+      .reply(200, { dummy: 'value' });
+    const expectedSections = moveSubsectionOver([
+      ...courseOutlineIndexMock.courseStructure.childInfo.children,
+    ], 0, lastSubsectionIdx, 1, 0)[0];
+    axiosMock
+      .onGet(getXBlockApiUrl(section.id))
+      .reply(200, expectedSections[0]);
+    axiosMock
+      .onGet(getXBlockApiUrl(secondSection.id))
+      .reply(200, expectedSections[1]);
+
+    // find menu button and click on it to open menu
+    const menu = await within(subsectionElement).findByTestId('subsection-card-header__menu-button');
+    await act(async () => fireEvent.click(menu));
+
+    // move first subsection in second section to last position of prev section
+    const moveDownBtn = await within(subsectionElement).findByTestId('subsection-card-header__menu-move-down-button');
+    await act(async () => fireEvent.click(moveDownBtn));
+    const firstSectionSubsections = store.getState().courseOutline.sectionsList[0].childInfo.children;
+    expect(firstSectionSubsections.length).toBe(section.childInfo.children.length - 1);
+    const subsectionsSecondSection = store.getState().courseOutline.sectionsList[1].childInfo.children;
+    expect(subsectionsSecondSection.length).toBe(secondSection.childInfo.children.length + 1);
+    const firstSubSecondSection = subsectionsSecondSection[0].id;
+    expect(subsection.id).toBe(firstSubSecondSection);
+  });
+
+  it('check whether subsection move up & down option is rendered correctly based on index', async () => {
+    const { findAllByTestId } = render(<RootWrapper />);
+    // using first section
+    const sectionElements = await findAllByTestId('section-card');
+    const firstSectionElement = sectionElements[0];
+    // get first, second and last subsection element
+    const [
+      firstSubsection,
+      secondSubsection,
+    ] = await within(firstSectionElement).findAllByTestId('subsection-card');
+
+    // find menu button and click on it to open menu in first section
+    const firstMenu = await within(firstSubsection).findByTestId('subsection-card-header__menu-button');
+    await act(async () => fireEvent.click(firstMenu));
+    // move down option should be enabled in first element
+    expect(
+      await within(firstSubsection).findByTestId('subsection-card-header__menu-move-down-button'),
+    ).not.toHaveAttribute('aria-disabled');
+    // move up option should not be enabled in first element
+    expect(
+      await within(firstSubsection).findByTestId('subsection-card-header__menu-move-up-button'),
+    ).toHaveAttribute('aria-disabled', 'true');
+
+    // find menu button and click on it to open menu in second section
+    const secondMenu = await within(secondSubsection).findByTestId('subsection-card-header__menu-button');
+    await act(async () => fireEvent.click(secondMenu));
+    // both move down & up option should be enabled in second element
+    expect(
+      await within(secondSubsection).findByTestId('subsection-card-header__menu-move-down-button'),
+    ).not.toHaveAttribute('aria-disabled');
+    expect(
+      await within(secondSubsection).findByTestId('subsection-card-header__menu-move-up-button'),
+    ).not.toHaveAttribute('aria-disabled');
+
+    const lastSectionElement = sectionElements[sectionElements.length - 1];
+    // get first, second and last subsection element
+    const [lastSubsection] = await within(lastSectionElement).findAllByTestId('subsection-card');
+    // find menu button and click on it to open menu in last section
+    const lastMenu = await within(lastSubsection).findByTestId('subsection-card-header__menu-button');
+    await act(async () => fireEvent.click(lastMenu));
+    // move down option should not be enabled in last subsection of last section element
+    expect(
+      await within(lastSubsection).findByTestId('subsection-card-header__menu-move-down-button'),
+    ).toHaveAttribute('aria-disabled', 'true');
+    // move up option should be enabled in last element
+    expect(
+      await within(lastSubsection).findByTestId('subsection-card-header__menu-move-up-button'),
+    ).not.toHaveAttribute('aria-disabled');
+  });
+
+  it('check whether unit move up and down options work correctly', async () => {
+    const { findAllByTestId } = render(<RootWrapper />);
+    // get second section -> second subsection -> second unit element
+    const [, section] = courseOutlineIndexMock.courseStructure.childInfo.children;
+    const [, sectionElement] = await findAllByTestId('section-card');
+    const [, subsection] = section.childInfo.children;
+    const [, subsectionElement] = await within(sectionElement).findAllByTestId('subsection-card');
+    const expandBtn = await within(subsectionElement).findByTestId('subsection-card-header__expanded-btn');
+    await act(async () => fireEvent.click(expandBtn));
+    const [, secondUnit] = subsection.childInfo.children;
+    const [, unitElement] = await within(subsectionElement).findAllByTestId('unit-card');
+
+    // mock api call
+    axiosMock
+      .onPut(getCourseItemApiUrl(store.getState().courseOutline.sectionsList[1].childInfo.children[1].id))
+      .reply(200, { dummy: 'value' });
+    const expectedSection = moveUnit([...courseOutlineIndexMock.courseStructure.childInfo.children], 1, 1, 0, 1)[0][1];
+    axiosMock
+      .onGet(getXBlockApiUrl(section.id))
+      .reply(200, expectedSection);
+
+    // find menu button and click on it to open menu
+    const menu = await within(unitElement).findByTestId('unit-card-header__menu-button');
+    await act(async () => fireEvent.click(menu));
+
+    // move second unit to first position to test move up option
+    const moveUpButton = await within(unitElement).findByTestId('unit-card-header__menu-move-up-button');
+    await act(async () => fireEvent.click(moveUpButton));
+    const firstUnitId = store.getState().courseOutline.sectionsList[1].childInfo.children[1].childInfo.children[0].id;
+    expect(secondUnit.id).toBe(firstUnitId);
+
+    // move first unit back to second position to test move down option
+    axiosMock
+      .onGet(getXBlockApiUrl(section.id))
+      .reply(200, section);
+    const moveDownButton = await within(subsectionElement).findByTestId('unit-card-header__menu-move-down-button');
+    await act(async () => fireEvent.click(moveDownButton));
+    const secondUnitId = store.getState().courseOutline.sectionsList[1].childInfo.children[1].childInfo.children[1].id;
+    expect(secondUnit.id).toBe(secondUnitId);
+  });
+
+  it('check whether unit moves up to previous subsection if it is in top position in parent subsection', async () => {
+    const { findAllByTestId } = render(<RootWrapper />);
+    // get second section -> second subsection -> first unit element
+    const [, section] = courseOutlineIndexMock.courseStructure.childInfo.children;
+    const [, sectionElement] = await findAllByTestId('section-card');
+    const [firstSubsection, subsection] = section.childInfo.children;
+    const [, subsectionElement] = await within(sectionElement).findAllByTestId('subsection-card');
+    const expandBtn = await within(subsectionElement).findByTestId('subsection-card-header__expanded-btn');
+    await act(async () => fireEvent.click(expandBtn));
+    const [unit] = subsection.childInfo.children;
+    const [unitElement] = await within(subsectionElement).findAllByTestId('unit-card');
+
+    // mock api call
+    axiosMock
+      .onPut(getCourseItemApiUrl(firstSubsection.id))
+      .reply(200, { dummy: 'value' });
+    const expectedSections = moveUnitOver([
+      ...courseOutlineIndexMock.courseStructure.childInfo.children,
+    ], 1, 1, 0, 1, 0, firstSubsection.childInfo.children.length)[0];
+    axiosMock
+      .onGet(getXBlockApiUrl(section.id))
+      .reply(200, expectedSections[1]);
+
+    // find menu button and click on it to open menu
+    const menu = await within(unitElement).findByTestId('unit-card-header__menu-button');
+    await act(async () => fireEvent.click(menu));
+
+    // move first unit to last position of prev subsection
+    const moveUpButton = await within(unitElement).findByTestId('unit-card-header__menu-move-up-button');
+    await act(async () => fireEvent.click(moveUpButton));
+    const firstSubUnits = store.getState().courseOutline.sectionsList[1].childInfo.children[0].childInfo.children;
+    expect(firstSubUnits[firstSubUnits.length - 1].id).toBe(unit.id);
+    const secondSubUnits = store.getState().courseOutline.sectionsList[1].childInfo.children[1].childInfo.children;
+    expect(secondSubUnits.length).toBe(subsection.childInfo.children.length - 1);
+  });
+
+  it('check whether unit moves up to previous subsection of prev section if it is in top position in parent subsection & section', async () => {
+    const { findAllByTestId } = render(<RootWrapper />);
+    // get second section -> second subsection -> first unit element
+    const [firstSection, secondSection] = courseOutlineIndexMock.courseStructure.childInfo.children;
+    const [, sectionElement] = await findAllByTestId('section-card');
+    const [subsection] = secondSection.childInfo.children;
+    const firstSectionLastSubsection = firstSection.childInfo.children[firstSection.childInfo.children.length - 1];
+    const [subsectionElement] = await within(sectionElement).findAllByTestId('subsection-card');
+    const expandBtn = await within(subsectionElement).findByTestId('subsection-card-header__expanded-btn');
+    await act(async () => fireEvent.click(expandBtn));
+    const [unit] = subsection.childInfo.children;
+    const [unitElement] = await within(subsectionElement).findAllByTestId('unit-card');
+
+    // mock api call
+    axiosMock
+      .onPut(getCourseItemApiUrl(firstSectionLastSubsection.id))
+      .reply(200, { dummy: 'value' });
+    const expectedSections = moveUnitOver(
+      [...courseOutlineIndexMock.courseStructure.childInfo.children],
+      1,
+      0,
+      0,
+      0,
+      firstSection.childInfo.children.length - 1,
+      firstSectionLastSubsection.childInfo.children.length,
+    )[0];
+    axiosMock
+      .onGet(getXBlockApiUrl(firstSection.id))
+      .reply(200, expectedSections[0]);
+    axiosMock
+      .onGet(getXBlockApiUrl(secondSection.id))
+      .reply(200, expectedSections[1]);
+
+    // find menu button and click on it to open menu
+    const menu = await within(unitElement).findByTestId('unit-card-header__menu-button');
+    await act(async () => fireEvent.click(menu));
+
+    // move first unit to last position of prev subsection
+    const moveUpButton = await within(unitElement).findByTestId('unit-card-header__menu-move-up-button');
+    await act(async () => fireEvent.click(moveUpButton));
+    const firstSectionSubStore = store.getState().courseOutline.sectionsList[0].childInfo.children;
+    const firstSectionLastSubUnits = firstSectionSubStore[firstSectionSubStore.length - 1].childInfo.children;
+    expect(firstSectionLastSubUnits[firstSectionLastSubUnits.length - 1].id).toBe(unit.id);
+    const secondSubUnits = store.getState().courseOutline.sectionsList[1].childInfo.children[0].childInfo.children;
+    expect(secondSubUnits.length).toBe(subsection.childInfo.children.length - 1);
+  });
+
+  it('check whether unit moves down to next subsection if it is in last position in parent subsection', async () => {
+    const { findAllByTestId } = render(<RootWrapper />);
+    // get second section -> second subsection -> first unit element
+    const [, section] = courseOutlineIndexMock.courseStructure.childInfo.children;
+    const [, sectionElement] = await findAllByTestId('section-card');
+    const [firstSubsection, subsection] = section.childInfo.children;
+    const [subsectionElement] = await within(sectionElement).findAllByTestId('subsection-card');
+    const expandBtn = await within(subsectionElement).findByTestId('subsection-card-header__expanded-btn');
+    await act(async () => fireEvent.click(expandBtn));
+    const lastUnitIdx = firstSubsection.childInfo.children.length - 1;
+    const unit = firstSubsection.childInfo.children[lastUnitIdx];
+    const unitElement = (await within(subsectionElement).findAllByTestId('unit-card'))[lastUnitIdx];
+
+    // mock api call
+    axiosMock
+      .onPut(getCourseItemApiUrl(subsection.id))
+      .reply(200, { dummy: 'value' });
+    const expectedSections = moveUnitOver([
+      ...courseOutlineIndexMock.courseStructure.childInfo.children,
+    ], 1, 0, lastUnitIdx, 1, 1, 0)[0];
+    axiosMock
+      .onGet(getXBlockApiUrl(section.id))
+      .reply(200, expectedSections[1]);
+
+    // find menu button and click on it to open menu
+    const menu = await within(unitElement).findByTestId('unit-card-header__menu-button');
+    await act(async () => fireEvent.click(menu));
+
+    // move first unit to last position of prev subsection
+    const moveDownButton = await within(unitElement).findByTestId('unit-card-header__menu-move-down-button');
+    await act(async () => fireEvent.click(moveDownButton));
+    const firstSubUnits = store.getState().courseOutline.sectionsList[1].childInfo.children[0].childInfo.children;
+    expect(firstSubUnits.length).toBe(firstSubsection.childInfo.children.length - 1);
+    const secondSubUnits = store.getState().courseOutline.sectionsList[1].childInfo.children[1].childInfo.children;
+    expect(secondSubUnits[0].id).toBe(unit.id);
+  });
+
+  it('check whether unit moves down to next subsection of next section if it is in last position in parent subsection & section', async () => {
+    const { findAllByTestId } = render(<RootWrapper />);
+    // get second section -> second subsection -> first unit element
+    const [, secondSection, thirdSection] = courseOutlineIndexMock.courseStructure.childInfo.children;
+    const [, sectionElement] = await findAllByTestId('section-card');
+    const lastSubIndex = secondSection.childInfo.children.length - 1;
+    const secondSectionLastSubsection = secondSection.childInfo.children[lastSubIndex];
+    const thirdSectionFirstSubsection = thirdSection.childInfo.children[0];
+    const subsectionElement = (await within(sectionElement).findAllByTestId('subsection-card'))[lastSubIndex];
+    const expandBtn = await within(subsectionElement).findByTestId('subsection-card-header__expanded-btn');
+    await act(async () => fireEvent.click(expandBtn));
+    const lastUnitIdx = secondSectionLastSubsection.childInfo.children.length - 1;
+    const unit = secondSectionLastSubsection.childInfo.children[lastUnitIdx];
+    const unitElement = (await within(subsectionElement).findAllByTestId('unit-card'))[lastUnitIdx];
+
+    // mock api call
+    axiosMock
+      .onPut(getCourseItemApiUrl(thirdSectionFirstSubsection.id))
+      .reply(200, { dummy: 'value' });
+    const expectedSections = moveUnitOver(
+      [...courseOutlineIndexMock.courseStructure.childInfo.children],
+      1,
+      lastSubIndex,
+      lastUnitIdx,
+      2,
+      0,
+      0,
+    )[0];
+    axiosMock
+      .onGet(getXBlockApiUrl(secondSection.id))
+      .reply(200, expectedSections[1]);
+    axiosMock
+      .onGet(getXBlockApiUrl(thirdSection.id))
+      .reply(200, expectedSections[2]);
+
+    // find menu button and click on it to open menu
+    const menu = await within(unitElement).findByTestId('unit-card-header__menu-button');
+    await act(async () => fireEvent.click(menu));
+
+    // move first unit to last position of prev subsection
+    const moveDownButton = await within(unitElement).findByTestId('unit-card-header__menu-move-down-button');
+    await act(async () => fireEvent.click(moveDownButton));
+    const secondSectionSubStore = store.getState().courseOutline.sectionsList[1].childInfo.children;
+    const secondSectionLastSubUnits = secondSectionSubStore[secondSectionSubStore.length - 1].childInfo.children;
+    expect(secondSectionLastSubUnits.length).toBe(secondSectionLastSubsection.childInfo.children.length - 1);
+    const thirdSubUnits = store.getState().courseOutline.sectionsList[2].childInfo.children[0].childInfo.children;
+    expect(thirdSubUnits[0].id).toBe(unit.id);
+  });
+
+  it('check whether unit move up & down option is rendered correctly based on index', async () => {
+    const { findAllByTestId } = render(<RootWrapper />);
+    // using first section -> first subsection -> first unit
+    const sections = await findAllByTestId('section-card');
+    const [sectionElement] = sections;
+    const [subsectionElement] = await within(sectionElement).findAllByTestId('subsection-card');
+    const expandBtn = await within(subsectionElement).findByTestId('subsection-card-header__expanded-btn');
+    await act(async () => fireEvent.click(expandBtn));
+    // get first and only unit in the subsection
+    const [firstUnit] = await within(subsectionElement).findAllByTestId('unit-card');
+
+    // find menu button and click on it to open menu in first section
+    const firstMenu = await within(firstUnit).findByTestId('unit-card-header__menu-button');
+    await act(async () => fireEvent.click(firstMenu));
+    // move down option should be enabled in first element as it can move down to next subsection
+    expect(
+      await within(firstUnit).findByTestId('unit-card-header__menu-move-down-button'),
+    ).not.toHaveAttribute('aria-disabled');
+    // move up option should not be enabled in first element as we have no subsections or sections above
+    expect(
+      await within(firstUnit).findByTestId('unit-card-header__menu-move-up-button'),
+    ).toHaveAttribute('aria-disabled', 'true');
+
+    // using last section -> last subsection -> last unit
+    const lastSection = sections[sections.length - 1];
+    // it has only one subsection
+    const [lastSubsectionElement] = await within(lastSection).findAllByTestId('subsection-card');
+    const lastExpandBtn = await within(lastSubsectionElement).findByTestId('subsection-card-header__expanded-btn');
+    await act(async () => fireEvent.click(lastExpandBtn));
+    // get last and the only unit in the subsection
+    const [lastUnit] = await within(lastSubsectionElement).findAllByTestId('unit-card');
+
+    // find menu button and click on it to open menu in first section
+    const lastMenu = await within(lastUnit).findByTestId('unit-card-header__menu-button');
+    await act(async () => fireEvent.click(lastMenu));
+    // move down option should not be enabled in last element as we have no subsections or sections below
+    expect(
+      await within(lastUnit).findByTestId('unit-card-header__menu-move-down-button'),
+    ).toHaveAttribute('aria-disabled', 'true');
+    // move down option should be enabled in last element as it can move up to prev section's last subsection
+    expect(
+      await within(lastUnit).findByTestId('unit-card-header__menu-move-up-button'),
+    ).not.toHaveAttribute('aria-disabled');
+  });
+
+  it('check that new subsection list is saved when dragged', async () => {
+    const { findAllByTestId } = render(<RootWrapper />);
+
+    const [sectionElement] = await findAllByTestId('section-card');
+    const [section] = store.getState().courseOutline.sectionsList;
+    const subsectionsDraggers = within(sectionElement).getAllByRole('button', { name: 'Drag to reorder' });
+    const draggableButton = subsectionsDraggers[1];
+    const subsection1 = section.childInfo.children[0].id;
+    closestCorners.mockReturnValue([{ id: subsection1 }]);
+    axiosMock
+      .onPut(getCourseItemApiUrl(section.id))
+      .reply(200, { dummy: 'value' });
+    const expectedSection = moveSubsection([
+      ...courseOutlineIndexMock.courseStructure.childInfo.children,
+    ], 0, 1, 0)[0][0];
+    axiosMock
+      .onGet(getXBlockApiUrl(section.id))
+      .reply(200, expectedSection);
+
+    fireEvent.keyDown(draggableButton, { code: 'Space' });
+    await sleep(1);
+    fireEvent.keyDown(draggableButton, { code: 'Space' });
+    await waitFor(async () => {
+      const saveStatus = store.getState().courseOutline.savingStatus;
+      expect(saveStatus).toEqual(RequestStatus.SUCCESSFUL);
+    });
+
+    const subsection2 = store.getState().courseOutline.sectionsList[0].childInfo.children[1].id;
+    expect(subsection1).toBe(subsection2);
+  });
+
+  it('check that new subsection list is restored to original order when API call fails', async () => {
+    const { findAllByTestId } = render(<RootWrapper />);
+
+    const [sectionElement] = await findAllByTestId('section-card');
+    const [section] = store.getState().courseOutline.sectionsList;
+    const subsectionsDraggers = within(sectionElement).getAllByRole('button', { name: 'Drag to reorder' });
+    const draggableButton = subsectionsDraggers[1];
+    const subsection1 = section.childInfo.children[0].id;
+    closestCorners.mockReturnValue([{ id: subsection1 }]);
+
+    axiosMock
+      .onPut(getCourseItemApiUrl(section.id))
+      .reply(500);
+
+    fireEvent.keyDown(draggableButton, { code: 'Space' });
+    await sleep(1);
+    fireEvent.keyDown(draggableButton, { code: 'Space' });
+    await waitFor(async () => {
+      const saveStatus = store.getState().courseOutline.savingStatus;
+      expect(saveStatus).toEqual(RequestStatus.FAILED);
+    });
+
+    const subsection1New = store.getState().courseOutline.sectionsList[0].childInfo.children[0].id;
+    expect(subsection1).toBe(subsection1New);
+  });
+
+  it('check that new unit list is saved when dragged', async () => {
+    const { findAllByTestId } = render(<RootWrapper />);
+    // get third section
+    const [, , sectionElement] = await findAllByTestId('section-card');
+    const [subsectionElement] = await within(sectionElement).findAllByTestId('subsection-card');
+    const section = store.getState().courseOutline.sectionsList[2];
+    const [subsection] = section.childInfo.children;
+    const expandBtn = within(subsectionElement).getByTestId('subsection-card-header__expanded-btn');
+    fireEvent.click(expandBtn);
+    const unitDraggers = await within(subsectionElement).findAllByRole('button', { name: 'Drag to reorder' });
+    const draggableButton = unitDraggers[1];
+    const sections = courseOutlineIndexMock.courseStructure.childInfo.children;
+
+    const unit1 = subsection.childInfo.children[0].id;
+    closestCorners.mockReturnValue([{ id: unit1 }]);
+
+    axiosMock
+      .onPut(getCourseItemApiUrl(subsection.id))
+      .reply(200, { dummy: 'value' });
+    const expectedSection = moveUnit([...sections], 2, 0, 1, 0)[0][2];
+    axiosMock
+      .onGet(getXBlockApiUrl(section.id))
+      .reply(200, expectedSection);
+
+    fireEvent.keyDown(draggableButton, { code: 'Space' });
+    await sleep(1);
+    fireEvent.keyDown(draggableButton, { code: 'Space' });
+    await waitFor(async () => {
+      const saveStatus = store.getState().courseOutline.savingStatus;
+      expect(saveStatus).toEqual(RequestStatus.SUCCESSFUL);
+    });
+
+    const unit2 = store.getState().courseOutline.sectionsList[2].childInfo.children[0].childInfo.children[1].id;
+    expect(unit1).toBe(unit2);
+  });
+
+  it('check that new unit list is restored to original order when API call fails', async () => {
+    const { findAllByTestId } = render(<RootWrapper />);
+    // get third section
+    const [, , sectionElement] = await findAllByTestId('section-card');
+    const [subsectionElement] = await within(sectionElement).findAllByTestId('subsection-card');
+    const section = store.getState().courseOutline.sectionsList[2];
+    const [subsection] = section.childInfo.children;
+    const expandBtn = within(subsectionElement).getByTestId('subsection-card-header__expanded-btn');
+    fireEvent.click(expandBtn);
+    const unitDraggers = await within(subsectionElement).findAllByRole('button', { name: 'Drag to reorder' });
+    const draggableButton = unitDraggers[1];
+    const sections = courseOutlineIndexMock.courseStructure.childInfo.children;
+
+    const unit1 = subsection.childInfo.children[0].id;
+    closestCorners.mockReturnValue([{ id: unit1 }]);
+
+    axiosMock
+      .onPut(getCourseItemApiUrl(subsection.id))
+      .reply(500);
+    const expectedSection = moveUnit([...sections], 2, 0, 1, 0)[0][2];
+    axiosMock
+      .onGet(getXBlockApiUrl(section.id))
+      .reply(200, expectedSection);
+
+    fireEvent.keyDown(draggableButton, { code: 'Space' });
+    await sleep(1);
+    fireEvent.keyDown(draggableButton, { code: 'Space' });
+    await waitFor(async () => {
+      const saveStatus = store.getState().courseOutline.savingStatus;
+      expect(saveStatus).toEqual(RequestStatus.FAILED);
+    });
+
+    const unit1New = store.getState().courseOutline.sectionsList[2].childInfo.children[0].childInfo.children[0].id;
+    expect(unit1).toBe(unit1New);
+  });
+
+  it('check whether unit copy & paste option works correctly', async () => {
+    render(<RootWrapper />);
+    // get first section -> first subsection -> first unit element
+    const [section] = courseOutlineIndexMock.courseStructure.childInfo.children;
+    const [sectionElement] = await screen.findAllByTestId('section-card');
+    const [subsection] = section.childInfo.children;
+    axiosMock
+      .onGet(getXBlockApiUrl(section.id))
+      .reply(200, courseSectionMock);
+    let [subsectionElement] = await within(sectionElement).findAllByTestId('subsection-card');
+    const expandBtn = await within(subsectionElement).findByTestId('subsection-card-header__expanded-btn');
+    await act(async () => fireEvent.click(expandBtn));
+    const [unit] = subsection.childInfo.children;
+    const [unitElement] = await within(subsectionElement).findAllByTestId('unit-card');
+
+    // mock api call
+    axiosMock
+      .onPost(getClipboardUrl(), {
+        usage_key: unit.id,
+      }).reply(200, clipboardUnit);
+    // check that initialUserClipboard state is empty
+    const { initialUserClipboard } = store.getState().courseOutline;
+    expect(initialUserClipboard).toBeUndefined();
+
+    // find menu button and click on it to open menu
+    const menu = await within(unitElement).findByTestId('unit-card-header__menu-button');
+    await act(async () => fireEvent.click(menu));
+
+    // move first unit back to second position to test move down option
+    const copyButton = await within(unitElement).findByText(cardHeaderMessages.menuCopy.defaultMessage);
+    await act(async () => fireEvent.click(copyButton));
+
+    // check that initialUserClipboard state is updated
+    expect(store.getState().generic.clipboardData).toEqual(clipboardUnit);
+
+    [subsectionElement] = await within(sectionElement).findAllByTestId('subsection-card');
+    // find clipboard content label
+    const clipboardLabel = await within(subsectionElement).findByText(
+      pasteButtonMessages.pasteButtonWhatsInClipboardText.defaultMessage,
+    );
+    await act(async () => fireEvent.mouseOver(clipboardLabel));
+
+    // find clipboard content popover link
+    const popoverContent = screen.queryByTestId('popover-content');
+    expect(popoverContent.tagName).toBe('A');
+    expect(popoverContent).toHaveAttribute('href', `${getConfig().STUDIO_BASE_URL}${unit.studioUrl}`);
+
+    // check paste button functionality
+    // mock api call
+    axiosMock
+      .onPost(getXBlockBaseApiUrl(), {
+        parent_locator: subsection.id,
+        staged_content: 'clipboard',
+      }).reply(200, {
+        staticFileNotices: {
+          newFiles: ['some.css'],
+          conflictingFiles: ['con.css'],
+          errorFiles: ['error.css'],
+        },
+      });
+    const pasteBtn = await within(subsectionElement).findByText(subsectionMessages.pasteButton.defaultMessage);
+    await act(async () => fireEvent.click(pasteBtn));
+
+    [subsectionElement] = await within(sectionElement).findAllByTestId('subsection-card');
+    const lastUnitElement = (await within(subsectionElement).findAllByTestId('unit-card')).slice(-1)[0];
+    expect(lastUnitElement).toHaveTextContent(unit.displayName);
+
+    // check pasteFileNotices in store
+    expect(store.getState().courseOutline.pasteFileNotices).toEqual({
+      newFiles: ['some.css'],
+      conflictingFiles: ['con.css'],
+      errorFiles: ['error.css'],
+    });
+
+    let alerts = await screen.findAllByRole('alert');
+    // Exclude processing notification toast
+    alerts = alerts.filter((el) => !el.classList.contains('toast-container'));
+    // 3 alerts should be present
+    expect(alerts.length).toEqual(3);
+
+    // check alerts for errorFiles
+    let dismissBtn = await within(alerts[0]).findByText('Dismiss');
+    fireEvent.click(dismissBtn);
+
+    // check alerts for conflictingFiles
+    dismissBtn = await within(alerts[1]).findByText('Dismiss');
+    fireEvent.click(dismissBtn);
+
+    // check alerts for newFiles
+    dismissBtn = await within(alerts[2]).findByText('Dismiss');
+    fireEvent.click(dismissBtn);
+
+    // check pasteFileNotices in store
+    expect(store.getState().courseOutline.pasteFileNotices).toEqual({});
+  });
+
+  it('should show toats on export tags', async () => {
+    const expectedResponse = 'this is a test';
+    axiosMock
+      .onGet(exportTags(courseId))
+      .reply(200, expectedResponse);
+    useLocation.mockReturnValue({
+      pathname: '/foo-bar',
+      hash: '#export-tags',
+    });
+    window.URL.createObjectURL = jest.fn().mockReturnValue('http://example.com/archivo');
+    window.URL.revokeObjectURL = jest.fn();
+    render(<RootWrapper />);
+    expect(await screen.findByText('Please wait. Creating export file for course tags...')).toBeInTheDocument();
+
+    const expectedRequest = axiosMock.history.get.filter(request => request.url === exportTags(courseId));
+    expect(expectedRequest.length).toBe(1);
+
+    expect(await screen.findByText('Course tags exported successfully')).toBeInTheDocument();
+  });
+
+  it('should show toast on export tags error', async () => {
+    axiosMock
+      .onGet(exportTags(courseId))
+      .reply(404);
+    useLocation.mockReturnValue({
+      pathname: '/foo-bar',
+      hash: '#export-tags',
+    });
+
+    render(<RootWrapper />);
+    expect(await screen.findByText('Please wait. Creating export file for course tags...')).toBeInTheDocument();
+    expect(await screen.findByText('An error has occurred creating the file')).toBeInTheDocument();
+  });
+
+  it('displays an alert and sets status to DENIED when API responds with 403', async () => {
+    axiosMock
+      .onGet(getCourseOutlineIndexApiUrl(courseId))
+      .reply(403);
+
+    const { getByRole } = render(<RootWrapper />);
+
+    await waitFor(() => {
+      expect(getByRole('alert')).toBeInTheDocument();
+      const { outlineIndexLoadingStatus } = store.getState().courseOutline.loadingStatus;
+      expect(outlineIndexLoadingStatus).toEqual(RequestStatus.DENIED);
+    });
+  });
+});
diff --git a/src/course-outline/__mocks__/courseBestPractices.js b/src/course-outline/__mocks__/courseBestPractices.js
new file mode 100644
index 0000000000..494c54d856
--- /dev/null
+++ b/src/course-outline/__mocks__/courseBestPractices.js
@@ -0,0 +1,43 @@
+module.exports = {
+  isSelfPaced: false,
+  sections: {
+    totalNumber: 6,
+    totalVisible: 4,
+    numberWithHighlights: 2,
+    highlightsActiveForCourse: true,
+    highlightsEnabled: true,
+  },
+  subsections: {
+    totalVisible: 5,
+    numWithOneBlockType: 2,
+    numBlockTypes: {
+      min: 0,
+      max: 3,
+      mean: 1,
+      median: 1,
+      mode: 1,
+    },
+  },
+  units: {
+    totalVisible: 9,
+    numBlocks: {
+      min: 1,
+      max: 2,
+      mean: 2,
+      median: 2,
+      mode: 2,
+    },
+  },
+  videos: {
+    totalNumber: 7,
+    numMobileEncoded: 0,
+    numWithValId: 3,
+    durations: {
+      min: null,
+      max: null,
+      mean: null,
+      median: null,
+      mode: null,
+    },
+  },
+};
diff --git a/src/course-outline/__mocks__/courseLaunch.js b/src/course-outline/__mocks__/courseLaunch.js
new file mode 100644
index 0000000000..40b629f465
--- /dev/null
+++ b/src/course-outline/__mocks__/courseLaunch.js
@@ -0,0 +1,31 @@
+module.exports = {
+  isSelfPaced: false,
+  dates: {
+    hasStartDate: true,
+    hasEndDate: false,
+  },
+  assignments: {
+    totalNumber: 11,
+    totalVisible: 7,
+    assignmentsWithDatesBeforeStart: [],
+    assignmentsWithDatesAfterEnd: [],
+    assignmentsWithOraDatesBeforeStart: [],
+    assignmentsWithOraDatesAfterEnd: [],
+  },
+  grades: {
+    hasGradingPolicy: true,
+    sumOfWeights: 1,
+  },
+  certificates: {
+    isActivated: false,
+    hasCertificate: false,
+    isEnabled: true,
+  },
+  updates: {
+    hasUpdate: true,
+  },
+  proctoring: {
+    needsProctoringEscalationEmail: false,
+    hasProctoringEscalationEmail: false,
+  },
+};
diff --git a/src/course-outline/__mocks__/courseOutlineIndex.js b/src/course-outline/__mocks__/courseOutlineIndex.js
new file mode 100644
index 0000000000..59fc9484b1
--- /dev/null
+++ b/src/course-outline/__mocks__/courseOutlineIndex.js
@@ -0,0 +1,3063 @@
+module.exports = {
+  courseReleaseDate: 'Set Date',
+  courseStructure: {
+    id: 'block-v1:edX+DemoX+Demo_Course+type@course+block@course',
+    displayName: 'Demonstration Course',
+    category: 'course',
+    hasChildren: true,
+    unitLevelDiscussions: false,
+    editedOn: 'Aug 23, 2023 at 12:35 UTC',
+    published: true,
+    publishedOn: 'Aug 23, 2023 at 11:32 UTC',
+    studioUrl: '/course/course-v1:edX+DemoX+Demo_Course',
+    releasedToStudents: false,
+    releaseDate: 'Nov 09, 2023 at 22:00 UTC',
+    visibilityState: null,
+    hasExplicitStaffLock: false,
+    start: '2023-11-09T22:00:00Z',
+    graded: false,
+    dueDate: '',
+    due: null,
+    relativeWeeksDue: null,
+    format: null,
+    courseGraders: [
+      'Homework',
+      'Exam',
+    ],
+    videoSharingEnabled: true,
+    videoSharingOptions: 'per-video',
+    hasChanges: false,
+    actions: {
+      deletable: true,
+      draggable: true,
+      childAddable: true,
+      duplicable: true,
+    },
+    explanatoryMessage: null,
+    groupAccess: {},
+    userPartitions: [
+      {
+        id: 50,
+        name: 'Enrollment Track Groups',
+        scheme: 'enrollment_track',
+        groups: [
+          {
+            id: 2,
+            name: 'Verified Certificate',
+            selected: false,
+            deleted: false,
+          },
+          {
+            id: 1,
+            name: 'Audit',
+            selected: false,
+            deleted: false,
+          },
+        ],
+      },
+    ],
+    showCorrectness: 'always',
+    highlightsEnabledForMessaging: false,
+    highlightsEnabled: true,
+    highlightsPreviewOnly: false,
+    highlightsDocUrl: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/developing_course/course_sections.html#set-section-highlights-for-weekly-course-highlight-messages',
+    enableProctoredExams: true,
+    createZendeskTickets: true,
+    enableTimedExams: true,
+    childInfo: {
+      category: 'chapter',
+      displayName: 'Section',
+      children: [
+        {
+          id: 'block-v1:edX+DemoX+Demo_Course+type@chapter+block@d8a6192ade314473a78242dfeedfbf5b',
+          displayName: 'Introduction 12',
+          category: 'chapter',
+          hasChildren: true,
+          editedOn: 'Aug 23, 2023 at 12:35 UTC',
+          published: false,
+          publishedOn: 'Aug 23, 2023 at 12:35 UTC',
+          studioUrl: '/course/course-v1:edX+DemoX+Demo_Course?show=block-v1%3AedX%2BDemoX%2BDemo_Course%2Btype%40chapter%2Bblock%40d8a6192ade314473a78242dfeedfbf5b',
+          releasedToStudents: false,
+          releaseDate: 'Aug 10, 2023 at 22:00 UTC',
+          visibilityState: 'staff_only',
+          hasExplicitStaffLock: true,
+          start: '2023-08-10T22:00:00Z',
+          graded: false,
+          dueDate: '',
+          due: null,
+          relativeWeeksDue: null,
+          format: null,
+          courseGraders: [
+            'Homework',
+            'Exam',
+          ],
+          hasChanges: false,
+          actions: {
+            deletable: true,
+            draggable: true,
+            childAddable: true,
+            duplicable: true,
+          },
+          explanatoryMessage: null,
+          groupAccess: {},
+          userPartitions: [
+            {
+              id: 50,
+              name: 'Enrollment Track Groups',
+              scheme: 'enrollment_track',
+              groups: [
+                {
+                  id: 2,
+                  name: 'Verified Certificate',
+                  selected: false,
+                  deleted: false,
+                },
+                {
+                  id: 1,
+                  name: 'Audit',
+                  selected: false,
+                  deleted: false,
+                },
+              ],
+            },
+          ],
+          showCorrectness: 'always',
+          highlights: [
+            'New Highlight 1',
+            'New Highlight 4',
+          ],
+          highlightsEnabled: true,
+          highlightsPreviewOnly: false,
+          highlightsDocUrl: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/developing_course/course_sections.html#set-section-highlights-for-weekly-course-highlight-messages',
+          childInfo: {
+            category: 'sequential',
+            displayName: 'Subsection',
+            children: [
+              {
+                id: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@edx_introduction',
+                displayName: 'Demo Course Overview',
+                category: 'sequential',
+                hasChildren: true,
+                editedOn: 'Jul 07, 2023 at 11:14 UTC',
+                published: false,
+                publishedOn: 'Jul 07, 2023 at 11:14 UTC',
+                studioUrl: '/course/course-v1:edX+DemoX+Demo_Course?show=block-v1%3AedX%2BDemoX%2BDemo_Course%2Btype%40sequential%2Bblock%40edx_introduction',
+                releasedToStudents: false,
+                releaseDate: 'Jan 01, 1970 at 05:00 UTC',
+                visibilityState: 'needs_attention',
+                hasExplicitStaffLock: false,
+                start: '1970-01-01T05:00:00Z',
+                graded: false,
+                dueDate: '',
+                due: null,
+                relativeWeeksDue: null,
+                format: null,
+                isPrereq: false,
+                prereqs: [{
+                  blockDisplayName: 'Sample Subsection',
+                  blockUsageKey: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@7f75de8dcc261249250b71925f49810f',
+                }],
+                courseGraders: [
+                  'Homework',
+                  'Exam',
+                ],
+                hasChanges: true,
+                actions: {
+                  deletable: true,
+                  draggable: true,
+                  childAddable: true,
+                  duplicable: true,
+                },
+                explanatoryMessage: null,
+                groupAccess: {},
+                userPartitions: [
+                  {
+                    id: 50,
+                    name: 'Enrollment Track Groups',
+                    scheme: 'enrollment_track',
+                    groups: [
+                      {
+                        id: 2,
+                        name: 'Verified Certificate',
+                        selected: false,
+                        deleted: false,
+                      },
+                      {
+                        id: 1,
+                        name: 'Audit',
+                        selected: false,
+                        deleted: false,
+                      },
+                    ],
+                  },
+                ],
+                showCorrectness: 'always',
+                hideAfterDue: false,
+                isProctoredExam: false,
+                wasExamEverLinkedWithExternal: false,
+                onlineProctoringRules: '',
+                isPracticeExam: false,
+                isOnboardingExam: false,
+                isTimeLimited: false,
+                examReviewRules: '',
+                defaultTimeLimitMinutes: null,
+                proctoringExamConfigurationLink: null,
+                supportsOnboarding: false,
+                showReviewRules: true,
+                childInfo: {
+                  category: 'vertical',
+                  displayName: 'Unit',
+                  children: [
+                    {
+                      id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_0270f6de40fc',
+                      displayName: 'Introduction: Video and Sequences',
+                      category: 'vertical',
+                      hasChildren: true,
+                      editedOn: 'Jul 07, 2023 at 11:14 UTC',
+                      published: false,
+                      publishedOn: 'Jul 07, 2023 at 11:14 UTC',
+                      studioUrl: '/container/block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_0270f6de40fc',
+                      releasedToStudents: false,
+                      releaseDate: 'Jan 01, 1970 at 05:00 UTC',
+                      visibilityState: 'needs_attention',
+                      hasExplicitStaffLock: false,
+                      start: '1970-01-01T05:00:00Z',
+                      graded: false,
+                      dueDate: '',
+                      due: null,
+                      relativeWeeksDue: null,
+                      format: null,
+                      courseGraders: [
+                        'Homework',
+                        'Exam',
+                      ],
+                      hasChanges: true,
+                      actions: {
+                        deletable: true,
+                        draggable: true,
+                        childAddable: true,
+                        duplicable: true,
+                      },
+                      explanatoryMessage: null,
+                      groupAccess: {},
+                      userPartitions: [
+                        {
+                          id: 50,
+                          name: 'Enrollment Track Groups',
+                          scheme: 'enrollment_track',
+                          groups: [
+                            {
+                              id: 2,
+                              name: 'Verified Certificate',
+                              selected: false,
+                              deleted: false,
+                            },
+                            {
+                              id: 1,
+                              name: 'Audit',
+                              selected: false,
+                              deleted: false,
+                            },
+                          ],
+                        },
+                      ],
+                      showCorrectness: 'always',
+                      discussionEnabled: true,
+                      ancestorHasStaffLock: true,
+                      staffOnlyMessage: false,
+                      hasPartitionGroupComponents: false,
+                      enableCopyPasteUnits: true,
+                      userPartitionInfo: {
+                        selectablePartitions: [
+                          {
+                            id: 50,
+                            name: 'Enrollment Track Groups',
+                            scheme: 'enrollment_track',
+                            groups: [
+                              {
+                                id: 2,
+                                name: 'Verified Certificate',
+                                selected: false,
+                                deleted: false,
+                              },
+                              {
+                                id: 1,
+                                name: 'Audit',
+                                selected: false,
+                                deleted: false,
+                              },
+                            ],
+                          },
+                        ],
+                        selectedPartitionIndex: -1,
+                        selectedGroupsLabel: '',
+                      },
+                    },
+                  ],
+                },
+                ancestorHasStaffLock: true,
+                staffOnlyMessage: false,
+                hasPartitionGroupComponents: false,
+                enableCopyPasteUnits: true,
+                userPartitionInfo: {
+                  selectablePartitions: [
+                    {
+                      id: 50,
+                      name: 'Enrollment Track Groups',
+                      scheme: 'enrollment_track',
+                      groups: [
+                        {
+                          id: 2,
+                          name: 'Verified Certificate',
+                          selected: false,
+                          deleted: false,
+                        },
+                        {
+                          id: 1,
+                          name: 'Audit',
+                          selected: false,
+                          deleted: false,
+                        },
+                      ],
+                    },
+                  ],
+                  selectedPartitionIndex: -1,
+                  selectedGroupsLabel: '',
+                },
+              },
+              {
+                id: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@7f75de8dcc261249250b71925f49810f',
+                display_name: 'Sample Subsection',
+                category: 'sequential',
+                has_children: true,
+                edited_on: 'Dec 05, 2023 at 10:35 UTC',
+                published: true,
+                published_on: 'Dec 05, 2023 at 10:35 UTC',
+                studio_url: '/course/course-v1:edX+DemoX+Demo_Course?show=block-v1%3AedX%2BDemoX%2BDemo_Course%2Btype%40sequential%2Bblock%407f75de8dcc261249250b71925f49810f',
+                released_to_students: true,
+                release_date: 'Feb 05, 2013 at 05:00 UTC',
+                visibility_state: 'live',
+                has_explicit_staff_lock: false,
+                start: '2013-02-05T05:00:00Z',
+                graded: false,
+                due_date: '',
+                due: null,
+                relative_weeks_due: null,
+                format: null,
+                course_graders: [
+                  'Homework',
+                  'Exam',
+                ],
+                has_changes: false,
+                actions: {
+                  deletable: true,
+                  draggable: true,
+                  childAddable: true,
+                  duplicable: true,
+                },
+                explanatory_message: null,
+                group_access: {},
+                user_partitions: [
+                  {
+                    id: 50,
+                    name: 'Enrollment Track Groups',
+                    scheme: 'enrollment_track',
+                    groups: [
+                      {
+                        id: 2,
+                        name: 'Verified Certificate',
+                        selected: false,
+                        deleted: false,
+                      },
+                      {
+                        id: 1,
+                        name: 'Audit',
+                        selected: false,
+                        deleted: false,
+                      },
+                    ],
+                  },
+                ],
+                show_correctness: 'always',
+                hide_after_due: false,
+                is_proctored_exam: false,
+                was_exam_ever_linked_with_external: false,
+                online_proctoring_rules: '',
+                is_practice_exam: false,
+                is_onboarding_exam: false,
+                is_time_limited: false,
+                isPrereq: true,
+                exam_review_rules: '',
+                default_time_limit_minutes: null,
+                proctoring_exam_configuration_link: null,
+                supports_onboarding: true,
+                show_review_rules: true,
+                childInfo: {
+                  category: 'vertical',
+                  display_name: 'Unit',
+                  children: [],
+                },
+                ancestor_has_staff_lock: false,
+                staff_only_message: false,
+                enable_copy_paste_units: true,
+                has_partition_group_components: false,
+                user_partition_info: {
+                  selectable_partitions: [
+                    {
+                      id: 50,
+                      name: 'Enrollment Track Groups',
+                      scheme: 'enrollment_track',
+                      groups: [
+                        {
+                          id: 2,
+                          name: 'Verified Certificate',
+                          selected: false,
+                          deleted: false,
+                        },
+                        {
+                          id: 1,
+                          name: 'Audit',
+                          selected: false,
+                          deleted: false,
+                        },
+                      ],
+                    },
+                  ],
+                  selected_partition_index: -1,
+                  selected_groups_label: '',
+                },
+              },
+            ],
+          },
+          ancestorHasStaffLock: false,
+          staffOnlyMessage: true,
+          hasPartitionGroupComponents: false,
+          userPartitionInfo: {
+            selectablePartitions: [
+              {
+                id: 50,
+                name: 'Enrollment Track Groups',
+                scheme: 'enrollment_track',
+                groups: [
+                  {
+                    id: 2,
+                    name: 'Verified Certificate',
+                    selected: false,
+                    deleted: false,
+                  },
+                  {
+                    id: 1,
+                    name: 'Audit',
+                    selected: false,
+                    deleted: false,
+                  },
+                ],
+              },
+            ],
+            selectedPartitionIndex: -1,
+            selectedGroupsLabel: '',
+          },
+        },
+        {
+          id: 'block-v1:edX+DemoX+Demo_Course+type@chapter+block@graded_interactions',
+          displayName: 'Example Week 2: Get Interactive',
+          category: 'chapter',
+          hasChildren: true,
+          editedOn: 'Aug 16, 2023 at 11:52 UTC',
+          published: true,
+          publishedOn: 'Aug 16, 2023 at 11:52 UTC',
+          studioUrl: '/course/course-v1:edX+DemoX+Demo_Course?show=block-v1%3AedX%2BDemoX%2BDemo_Course%2Btype%40chapter%2Bblock%40graded_interactions',
+          releasedToStudents: false,
+          releaseDate: 'Nov 09, 2023 at 22:00 UTC',
+          visibilityState: 'ready',
+          hasExplicitStaffLock: false,
+          start: '2023-11-09T22:00:00Z',
+          graded: false,
+          dueDate: '',
+          due: null,
+          relativeWeeksDue: null,
+          format: null,
+          courseGraders: [
+            'Homework',
+            'Exam',
+          ],
+          hasChanges: false,
+          actions: {
+            deletable: true,
+            draggable: true,
+            childAddable: true,
+            duplicable: true,
+          },
+          explanatoryMessage: null,
+          groupAccess: {},
+          userPartitions: [
+            {
+              id: 50,
+              name: 'Enrollment Track Groups',
+              scheme: 'enrollment_track',
+              groups: [
+                {
+                  id: 2,
+                  name: 'Verified Certificate',
+                  selected: false,
+                  deleted: false,
+                },
+                {
+                  id: 1,
+                  name: 'Audit',
+                  selected: false,
+                  deleted: false,
+                },
+              ],
+            },
+          ],
+          showCorrectness: 'always',
+          highlights: [
+            'New',
+          ],
+          highlightsEnabled: true,
+          highlightsPreviewOnly: false,
+          highlightsDocUrl: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/developing_course/course_sections.html#set-section-highlights-for-weekly-course-highlight-messages',
+          childInfo: {
+            category: 'sequential',
+            displayName: 'Subsection',
+            children: [
+              {
+                id: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@simulations',
+                displayName: "Lesson 2 - Let's Get Interactive!",
+                category: 'sequential',
+                hasChildren: true,
+                editedOn: 'Jul 07, 2023 at 11:14 UTC',
+                published: true,
+                publishedOn: 'Jul 07, 2023 at 11:14 UTC',
+                studioUrl: '/course/course-v1:edX+DemoX+Demo_Course?show=block-v1%3AedX%2BDemoX%2BDemo_Course%2Btype%40sequential%2Bblock%40simulations',
+                releasedToStudents: true,
+                releaseDate: 'Jan 01, 1970 at 05:00 UTC',
+                visibilityState: 'live',
+                hasExplicitStaffLock: false,
+                start: '1970-01-01T05:00:00Z',
+                graded: false,
+                dueDate: '',
+                due: null,
+                relativeWeeksDue: null,
+                format: null,
+                courseGraders: [
+                  'Homework',
+                  'Exam',
+                ],
+                hasChanges: false,
+                actions: {
+                  deletable: true,
+                  draggable: true,
+                  childAddable: true,
+                  duplicable: true,
+                },
+                explanatoryMessage: null,
+                groupAccess: {},
+                userPartitions: [
+                  {
+                    id: 50,
+                    name: 'Enrollment Track Groups',
+                    scheme: 'enrollment_track',
+                    groups: [
+                      {
+                        id: 2,
+                        name: 'Verified Certificate',
+                        selected: false,
+                        deleted: false,
+                      },
+                      {
+                        id: 1,
+                        name: 'Audit',
+                        selected: false,
+                        deleted: false,
+                      },
+                    ],
+                  },
+                ],
+                showCorrectness: 'always',
+                hideAfterDue: false,
+                isProctoredExam: true,
+                wasExamEverLinkedWithExternal: false,
+                onlineProctoringRules: '',
+                isPracticeExam: false,
+                isOnboardingExam: false,
+                isTimeLimited: true,
+                examReviewRules: '',
+                defaultTimeLimitMinutes: null,
+                proctoringExamConfigurationLink: null,
+                supportsOnboarding: false,
+                showReviewRules: true,
+                childInfo: {
+                  category: 'vertical',
+                  displayName: 'Unit',
+                  children: [
+                    {
+                      id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@d0d804e8863c4a95a659c04d8a2b2bc0',
+                      displayName: "Lesson 2 - Let's Get Interactive! ",
+                      category: 'vertical',
+                      hasChildren: true,
+                      editedOn: 'Jul 07, 2023 at 11:14 UTC',
+                      published: true,
+                      publishedOn: 'Jul 07, 2023 at 11:14 UTC',
+                      studioUrl: '/container/block-v1:edX+DemoX+Demo_Course+type@vertical+block@d0d804e8863c4a95a659c04d8a2b2bc0',
+                      releasedToStudents: true,
+                      releaseDate: 'Jan 01, 1970 at 05:00 UTC',
+                      visibilityState: 'live',
+                      hasExplicitStaffLock: false,
+                      start: '1970-01-01T05:00:00Z',
+                      graded: false,
+                      dueDate: '',
+                      due: null,
+                      relativeWeeksDue: null,
+                      format: null,
+                      courseGraders: [
+                        'Homework',
+                        'Exam',
+                      ],
+                      hasChanges: false,
+                      actions: {
+                        deletable: true,
+                        draggable: true,
+                        childAddable: true,
+                        duplicable: true,
+                      },
+                      explanatoryMessage: null,
+                      groupAccess: {},
+                      userPartitions: [
+                        {
+                          id: 50,
+                          name: 'Enrollment Track Groups',
+                          scheme: 'enrollment_track',
+                          groups: [
+                            {
+                              id: 2,
+                              name: 'Verified Certificate',
+                              selected: false,
+                              deleted: false,
+                            },
+                            {
+                              id: 1,
+                              name: 'Audit',
+                              selected: false,
+                              deleted: false,
+                            },
+                          ],
+                        },
+                      ],
+                      showCorrectness: 'always',
+                      discussionEnabled: true,
+                      ancestorHasStaffLock: false,
+                      staffOnlyMessage: false,
+                      hasPartitionGroupComponents: false,
+                      userPartitionInfo: {
+                        selectablePartitions: [
+                          {
+                            id: 50,
+                            name: 'Enrollment Track Groups',
+                            scheme: 'enrollment_track',
+                            groups: [
+                              {
+                                id: 2,
+                                name: 'Verified Certificate',
+                                selected: false,
+                                deleted: false,
+                              },
+                              {
+                                id: 1,
+                                name: 'Audit',
+                                selected: false,
+                                deleted: false,
+                              },
+                            ],
+                          },
+                        ],
+                        selectedPartitionIndex: -1,
+                        selectedGroupsLabel: '',
+                      },
+                    },
+                    {
+                      id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_2dbb0072785e',
+                      displayName: 'An Interactive Reference Table',
+                      category: 'vertical',
+                      hasChildren: true,
+                      editedOn: 'Jul 07, 2023 at 11:14 UTC',
+                      published: true,
+                      publishedOn: 'Jul 07, 2023 at 11:14 UTC',
+                      studioUrl: '/container/block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_2dbb0072785e',
+                      releasedToStudents: true,
+                      releaseDate: 'Jan 01, 1970 at 05:00 UTC',
+                      visibilityState: 'live',
+                      hasExplicitStaffLock: false,
+                      start: '1970-01-01T05:00:00Z',
+                      graded: false,
+                      dueDate: '',
+                      due: null,
+                      relativeWeeksDue: null,
+                      format: null,
+                      courseGraders: [
+                        'Homework',
+                        'Exam',
+                      ],
+                      hasChanges: false,
+                      actions: {
+                        deletable: true,
+                        draggable: true,
+                        childAddable: true,
+                        duplicable: true,
+                      },
+                      explanatoryMessage: null,
+                      groupAccess: {},
+                      userPartitions: [
+                        {
+                          id: 50,
+                          name: 'Enrollment Track Groups',
+                          scheme: 'enrollment_track',
+                          groups: [
+                            {
+                              id: 2,
+                              name: 'Verified Certificate',
+                              selected: false,
+                              deleted: false,
+                            },
+                            {
+                              id: 1,
+                              name: 'Audit',
+                              selected: false,
+                              deleted: false,
+                            },
+                          ],
+                        },
+                      ],
+                      showCorrectness: 'always',
+                      discussionEnabled: true,
+                      ancestorHasStaffLock: false,
+                      staffOnlyMessage: false,
+                      hasPartitionGroupComponents: false,
+                      userPartitionInfo: {
+                        selectablePartitions: [
+                          {
+                            id: 50,
+                            name: 'Enrollment Track Groups',
+                            scheme: 'enrollment_track',
+                            groups: [
+                              {
+                                id: 2,
+                                name: 'Verified Certificate',
+                                selected: false,
+                                deleted: false,
+                              },
+                              {
+                                id: 1,
+                                name: 'Audit',
+                                selected: false,
+                                deleted: false,
+                              },
+                            ],
+                          },
+                        ],
+                        selectedPartitionIndex: -1,
+                        selectedGroupsLabel: '',
+                      },
+                    },
+                    {
+                      id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_98cf62510471',
+                      displayName: 'Zooming Diagrams',
+                      category: 'vertical',
+                      hasChildren: true,
+                      editedOn: 'Jul 07, 2023 at 11:14 UTC',
+                      published: true,
+                      publishedOn: 'Jul 07, 2023 at 11:14 UTC',
+                      studioUrl: '/container/block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_98cf62510471',
+                      releasedToStudents: true,
+                      releaseDate: 'Jan 01, 1970 at 05:00 UTC',
+                      visibilityState: 'live',
+                      hasExplicitStaffLock: false,
+                      start: '1970-01-01T05:00:00Z',
+                      graded: false,
+                      dueDate: '',
+                      due: null,
+                      relativeWeeksDue: null,
+                      format: null,
+                      courseGraders: [
+                        'Homework',
+                        'Exam',
+                      ],
+                      hasChanges: false,
+                      actions: {
+                        deletable: true,
+                        draggable: true,
+                        childAddable: true,
+                        duplicable: true,
+                      },
+                      explanatoryMessage: null,
+                      groupAccess: {},
+                      userPartitions: [
+                        {
+                          id: 50,
+                          name: 'Enrollment Track Groups',
+                          scheme: 'enrollment_track',
+                          groups: [
+                            {
+                              id: 2,
+                              name: 'Verified Certificate',
+                              selected: false,
+                              deleted: false,
+                            },
+                            {
+                              id: 1,
+                              name: 'Audit',
+                              selected: false,
+                              deleted: false,
+                            },
+                          ],
+                        },
+                      ],
+                      showCorrectness: 'always',
+                      discussionEnabled: true,
+                      ancestorHasStaffLock: false,
+                      staffOnlyMessage: false,
+                      hasPartitionGroupComponents: false,
+                      userPartitionInfo: {
+                        selectablePartitions: [
+                          {
+                            id: 50,
+                            name: 'Enrollment Track Groups',
+                            scheme: 'enrollment_track',
+                            groups: [
+                              {
+                                id: 2,
+                                name: 'Verified Certificate',
+                                selected: false,
+                                deleted: false,
+                              },
+                              {
+                                id: 1,
+                                name: 'Audit',
+                                selected: false,
+                                deleted: false,
+                              },
+                            ],
+                          },
+                        ],
+                        selectedPartitionIndex: -1,
+                        selectedGroupsLabel: '',
+                      },
+                    },
+                    {
+                      id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_d32bf9b2242c',
+                      displayName: 'Electronic Sound Experiment',
+                      category: 'vertical',
+                      hasChildren: true,
+                      editedOn: 'Jul 07, 2023 at 11:14 UTC',
+                      published: true,
+                      publishedOn: 'Jul 07, 2023 at 11:14 UTC',
+                      studioUrl: '/container/block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_d32bf9b2242c',
+                      releasedToStudents: true,
+                      releaseDate: 'Jan 01, 1970 at 05:00 UTC',
+                      visibilityState: 'live',
+                      hasExplicitStaffLock: false,
+                      start: '1970-01-01T05:00:00Z',
+                      graded: false,
+                      dueDate: '',
+                      due: null,
+                      relativeWeeksDue: null,
+                      format: null,
+                      courseGraders: [
+                        'Homework',
+                        'Exam',
+                      ],
+                      hasChanges: false,
+                      actions: {
+                        deletable: true,
+                        draggable: true,
+                        childAddable: true,
+                        duplicable: true,
+                      },
+                      explanatoryMessage: null,
+                      groupAccess: {},
+                      userPartitions: [
+                        {
+                          id: 50,
+                          name: 'Enrollment Track Groups',
+                          scheme: 'enrollment_track',
+                          groups: [
+                            {
+                              id: 2,
+                              name: 'Verified Certificate',
+                              selected: false,
+                              deleted: false,
+                            },
+                            {
+                              id: 1,
+                              name: 'Audit',
+                              selected: false,
+                              deleted: false,
+                            },
+                          ],
+                        },
+                      ],
+                      showCorrectness: 'always',
+                      discussionEnabled: true,
+                      ancestorHasStaffLock: false,
+                      staffOnlyMessage: false,
+                      hasPartitionGroupComponents: false,
+                      userPartitionInfo: {
+                        selectablePartitions: [
+                          {
+                            id: 50,
+                            name: 'Enrollment Track Groups',
+                            scheme: 'enrollment_track',
+                            groups: [
+                              {
+                                id: 2,
+                                name: 'Verified Certificate',
+                                selected: false,
+                                deleted: false,
+                              },
+                              {
+                                id: 1,
+                                name: 'Audit',
+                                selected: false,
+                                deleted: false,
+                              },
+                            ],
+                          },
+                        ],
+                        selectedPartitionIndex: -1,
+                        selectedGroupsLabel: '',
+                      },
+                    },
+                    {
+                      id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@4e592689563243c484af947465eaef0d',
+                      displayName: 'New Unit',
+                      category: 'vertical',
+                      hasChildren: true,
+                      editedOn: 'Jul 07, 2023 at 11:14 UTC',
+                      published: true,
+                      publishedOn: 'Jul 07, 2023 at 11:14 UTC',
+                      studioUrl: '/container/block-v1:edX+DemoX+Demo_Course+type@vertical+block@4e592689563243c484af947465eaef0d',
+                      releasedToStudents: true,
+                      releaseDate: 'Jan 01, 1970 at 05:00 UTC',
+                      visibilityState: 'live',
+                      hasExplicitStaffLock: false,
+                      start: '1970-01-01T05:00:00Z',
+                      graded: false,
+                      dueDate: '',
+                      due: null,
+                      relativeWeeksDue: null,
+                      format: null,
+                      courseGraders: [
+                        'Homework',
+                        'Exam',
+                      ],
+                      hasChanges: false,
+                      actions: {
+                        deletable: true,
+                        draggable: true,
+                        childAddable: true,
+                        duplicable: true,
+                      },
+                      explanatoryMessage: null,
+                      groupAccess: {},
+                      userPartitions: [
+                        {
+                          id: 50,
+                          name: 'Enrollment Track Groups',
+                          scheme: 'enrollment_track',
+                          groups: [
+                            {
+                              id: 2,
+                              name: 'Verified Certificate',
+                              selected: false,
+                              deleted: false,
+                            },
+                            {
+                              id: 1,
+                              name: 'Audit',
+                              selected: false,
+                              deleted: false,
+                            },
+                          ],
+                        },
+                      ],
+                      showCorrectness: 'always',
+                      discussionEnabled: true,
+                      ancestorHasStaffLock: false,
+                      staffOnlyMessage: false,
+                      hasPartitionGroupComponents: false,
+                      userPartitionInfo: {
+                        selectablePartitions: [
+                          {
+                            id: 50,
+                            name: 'Enrollment Track Groups',
+                            scheme: 'enrollment_track',
+                            groups: [
+                              {
+                                id: 2,
+                                name: 'Verified Certificate',
+                                selected: false,
+                                deleted: false,
+                              },
+                              {
+                                id: 1,
+                                name: 'Audit',
+                                selected: false,
+                                deleted: false,
+                              },
+                            ],
+                          },
+                        ],
+                        selectedPartitionIndex: -1,
+                        selectedGroupsLabel: '',
+                      },
+                    },
+                  ],
+                },
+                ancestorHasStaffLock: false,
+                staffOnlyMessage: false,
+                hasPartitionGroupComponents: false,
+                userPartitionInfo: {
+                  selectablePartitions: [
+                    {
+                      id: 50,
+                      name: 'Enrollment Track Groups',
+                      scheme: 'enrollment_track',
+                      groups: [
+                        {
+                          id: 2,
+                          name: 'Verified Certificate',
+                          selected: false,
+                          deleted: false,
+                        },
+                        {
+                          id: 1,
+                          name: 'Audit',
+                          selected: false,
+                          deleted: false,
+                        },
+                      ],
+                    },
+                  ],
+                  selectedPartitionIndex: -1,
+                  selectedGroupsLabel: '',
+                },
+              },
+              {
+                id: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@graded_simulations',
+                displayName: 'Homework - Labs and Demos',
+                category: 'sequential',
+                hasChildren: true,
+                editedOn: 'Jul 07, 2023 at 11:14 UTC',
+                published: true,
+                publishedOn: 'Jul 07, 2023 at 11:14 UTC',
+                studioUrl: '/course/course-v1:edX+DemoX+Demo_Course?show=block-v1%3AedX%2BDemoX%2BDemo_Course%2Btype%40sequential%2Bblock%40graded_simulations',
+                releasedToStudents: true,
+                releaseDate: 'Feb 05, 2013 at 00:00 UTC',
+                visibilityState: 'live',
+                hasExplicitStaffLock: false,
+                start: '2013-02-05T00:00:00Z',
+                graded: true,
+                dueDate: '',
+                due: null,
+                relativeWeeksDue: null,
+                format: 'Homework',
+                courseGraders: [
+                  'Homework',
+                  'Exam',
+                ],
+                hasChanges: false,
+                actions: {
+                  deletable: true,
+                  draggable: true,
+                  childAddable: true,
+                  duplicable: true,
+                },
+                explanatoryMessage: null,
+                groupAccess: {},
+                userPartitions: [
+                  {
+                    id: 50,
+                    name: 'Enrollment Track Groups',
+                    scheme: 'enrollment_track',
+                    groups: [
+                      {
+                        id: 2,
+                        name: 'Verified Certificate',
+                        selected: false,
+                        deleted: false,
+                      },
+                      {
+                        id: 1,
+                        name: 'Audit',
+                        selected: false,
+                        deleted: false,
+                      },
+                    ],
+                  },
+                ],
+                showCorrectness: 'always',
+                hideAfterDue: false,
+                isProctoredExam: false,
+                wasExamEverLinkedWithExternal: false,
+                onlineProctoringRules: '',
+                isPracticeExam: false,
+                isOnboardingExam: false,
+                isTimeLimited: false,
+                examReviewRules: '',
+                defaultTimeLimitMinutes: null,
+                proctoringExamConfigurationLink: null,
+                supportsOnboarding: false,
+                showReviewRules: true,
+                childInfo: {
+                  category: 'vertical',
+                  displayName: 'Unit',
+                  children: [
+                    {
+                      id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@d6cee45205a449369d7ef8f159b22bdf',
+                      displayName: 'Labs and Demos',
+                      category: 'vertical',
+                      hasChildren: true,
+                      editedOn: 'Jul 07, 2023 at 11:14 UTC',
+                      published: true,
+                      publishedOn: 'Jul 07, 2023 at 11:14 UTC',
+                      studioUrl: '/container/block-v1:edX+DemoX+Demo_Course+type@vertical+block@d6cee45205a449369d7ef8f159b22bdf',
+                      releasedToStudents: true,
+                      releaseDate: 'Feb 05, 2013 at 00:00 UTC',
+                      visibilityState: 'live',
+                      hasExplicitStaffLock: false,
+                      start: '2013-02-05T00:00:00Z',
+                      graded: true,
+                      dueDate: '',
+                      due: null,
+                      relativeWeeksDue: null,
+                      format: null,
+                      courseGraders: [
+                        'Homework',
+                        'Exam',
+                      ],
+                      hasChanges: false,
+                      actions: {
+                        deletable: true,
+                        draggable: true,
+                        childAddable: true,
+                        duplicable: true,
+                      },
+                      explanatoryMessage: null,
+                      groupAccess: {},
+                      userPartitions: [
+                        {
+                          id: 50,
+                          name: 'Enrollment Track Groups',
+                          scheme: 'enrollment_track',
+                          groups: [
+                            {
+                              id: 2,
+                              name: 'Verified Certificate',
+                              selected: false,
+                              deleted: false,
+                            },
+                            {
+                              id: 1,
+                              name: 'Audit',
+                              selected: false,
+                              deleted: false,
+                            },
+                          ],
+                        },
+                      ],
+                      showCorrectness: 'always',
+                      discussionEnabled: true,
+                      ancestorHasStaffLock: false,
+                      staffOnlyMessage: false,
+                      hasPartitionGroupComponents: false,
+                      userPartitionInfo: {
+                        selectablePartitions: [
+                          {
+                            id: 50,
+                            name: 'Enrollment Track Groups',
+                            scheme: 'enrollment_track',
+                            groups: [
+                              {
+                                id: 2,
+                                name: 'Verified Certificate',
+                                selected: false,
+                                deleted: false,
+                              },
+                              {
+                                id: 1,
+                                name: 'Audit',
+                                selected: false,
+                                deleted: false,
+                              },
+                            ],
+                          },
+                        ],
+                        selectedPartitionIndex: -1,
+                        selectedGroupsLabel: '',
+                      },
+                    },
+                    {
+                      id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_aae927868e55',
+                      displayName: 'Code Grader',
+                      category: 'vertical',
+                      hasChildren: true,
+                      editedOn: 'Jul 07, 2023 at 11:14 UTC',
+                      published: true,
+                      publishedOn: 'Jul 07, 2023 at 11:14 UTC',
+                      studioUrl: '/container/block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_aae927868e55',
+                      releasedToStudents: true,
+                      releaseDate: 'Feb 05, 2013 at 00:00 UTC',
+                      visibilityState: 'live',
+                      hasExplicitStaffLock: false,
+                      start: '2013-02-05T00:00:00Z',
+                      graded: true,
+                      dueDate: '',
+                      due: null,
+                      relativeWeeksDue: null,
+                      format: null,
+                      courseGraders: [
+                        'Homework',
+                        'Exam',
+                      ],
+                      hasChanges: false,
+                      actions: {
+                        deletable: true,
+                        draggable: true,
+                        childAddable: true,
+                        duplicable: true,
+                      },
+                      explanatoryMessage: null,
+                      groupAccess: {},
+                      userPartitions: [
+                        {
+                          id: 50,
+                          name: 'Enrollment Track Groups',
+                          scheme: 'enrollment_track',
+                          groups: [
+                            {
+                              id: 2,
+                              name: 'Verified Certificate',
+                              selected: false,
+                              deleted: false,
+                            },
+                            {
+                              id: 1,
+                              name: 'Audit',
+                              selected: false,
+                              deleted: false,
+                            },
+                          ],
+                        },
+                      ],
+                      showCorrectness: 'always',
+                      discussionEnabled: true,
+                      ancestorHasStaffLock: false,
+                      staffOnlyMessage: false,
+                      hasPartitionGroupComponents: false,
+                      userPartitionInfo: {
+                        selectablePartitions: [
+                          {
+                            id: 50,
+                            name: 'Enrollment Track Groups',
+                            scheme: 'enrollment_track',
+                            groups: [
+                              {
+                                id: 2,
+                                name: 'Verified Certificate',
+                                selected: false,
+                                deleted: false,
+                              },
+                              {
+                                id: 1,
+                                name: 'Audit',
+                                selected: false,
+                                deleted: false,
+                              },
+                            ],
+                          },
+                        ],
+                        selectedPartitionIndex: -1,
+                        selectedGroupsLabel: '',
+                      },
+                    },
+                    {
+                      id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_c037f3757df1',
+                      displayName: 'Electric Circuit Simulator',
+                      category: 'vertical',
+                      hasChildren: true,
+                      editedOn: 'Jul 07, 2023 at 11:14 UTC',
+                      published: true,
+                      publishedOn: 'Jul 07, 2023 at 11:14 UTC',
+                      studioUrl: '/container/block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_c037f3757df1',
+                      releasedToStudents: true,
+                      releaseDate: 'Feb 05, 2013 at 00:00 UTC',
+                      visibilityState: 'live',
+                      hasExplicitStaffLock: false,
+                      start: '2013-02-05T00:00:00Z',
+                      graded: true,
+                      dueDate: '',
+                      due: null,
+                      relativeWeeksDue: null,
+                      format: null,
+                      courseGraders: [
+                        'Homework',
+                        'Exam',
+                      ],
+                      hasChanges: false,
+                      actions: {
+                        deletable: true,
+                        draggable: true,
+                        childAddable: true,
+                        duplicable: true,
+                      },
+                      explanatoryMessage: null,
+                      groupAccess: {},
+                      userPartitions: [
+                        {
+                          id: 50,
+                          name: 'Enrollment Track Groups',
+                          scheme: 'enrollment_track',
+                          groups: [
+                            {
+                              id: 2,
+                              name: 'Verified Certificate',
+                              selected: false,
+                              deleted: false,
+                            },
+                            {
+                              id: 1,
+                              name: 'Audit',
+                              selected: false,
+                              deleted: false,
+                            },
+                          ],
+                        },
+                      ],
+                      showCorrectness: 'always',
+                      discussionEnabled: true,
+                      ancestorHasStaffLock: false,
+                      staffOnlyMessage: false,
+                      hasPartitionGroupComponents: false,
+                      userPartitionInfo: {
+                        selectablePartitions: [
+                          {
+                            id: 50,
+                            name: 'Enrollment Track Groups',
+                            scheme: 'enrollment_track',
+                            groups: [
+                              {
+                                id: 2,
+                                name: 'Verified Certificate',
+                                selected: false,
+                                deleted: false,
+                              },
+                              {
+                                id: 1,
+                                name: 'Audit',
+                                selected: false,
+                                deleted: false,
+                              },
+                            ],
+                          },
+                        ],
+                        selectedPartitionIndex: -1,
+                        selectedGroupsLabel: '',
+                      },
+                    },
+                    {
+                      id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_bc69a47c6fae',
+                      displayName: 'Protein Creator',
+                      category: 'vertical',
+                      hasChildren: true,
+                      editedOn: 'Jul 07, 2023 at 11:14 UTC',
+                      published: true,
+                      publishedOn: 'Jul 07, 2023 at 11:14 UTC',
+                      studioUrl: '/container/block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_bc69a47c6fae',
+                      releasedToStudents: true,
+                      releaseDate: 'Feb 05, 2013 at 00:00 UTC',
+                      visibilityState: 'live',
+                      hasExplicitStaffLock: false,
+                      start: '2013-02-05T00:00:00Z',
+                      graded: true,
+                      dueDate: '',
+                      due: null,
+                      relativeWeeksDue: null,
+                      format: null,
+                      courseGraders: [
+                        'Homework',
+                        'Exam',
+                      ],
+                      hasChanges: false,
+                      actions: {
+                        deletable: true,
+                        draggable: true,
+                        childAddable: true,
+                        duplicable: true,
+                      },
+                      explanatoryMessage: null,
+                      groupAccess: {},
+                      userPartitions: [
+                        {
+                          id: 50,
+                          name: 'Enrollment Track Groups',
+                          scheme: 'enrollment_track',
+                          groups: [
+                            {
+                              id: 2,
+                              name: 'Verified Certificate',
+                              selected: false,
+                              deleted: false,
+                            },
+                            {
+                              id: 1,
+                              name: 'Audit',
+                              selected: false,
+                              deleted: false,
+                            },
+                          ],
+                        },
+                      ],
+                      showCorrectness: 'always',
+                      discussionEnabled: true,
+                      ancestorHasStaffLock: false,
+                      staffOnlyMessage: false,
+                      hasPartitionGroupComponents: false,
+                      userPartitionInfo: {
+                        selectablePartitions: [
+                          {
+                            id: 50,
+                            name: 'Enrollment Track Groups',
+                            scheme: 'enrollment_track',
+                            groups: [
+                              {
+                                id: 2,
+                                name: 'Verified Certificate',
+                                selected: false,
+                                deleted: false,
+                              },
+                              {
+                                id: 1,
+                                name: 'Audit',
+                                selected: false,
+                                deleted: false,
+                              },
+                            ],
+                          },
+                        ],
+                        selectedPartitionIndex: -1,
+                        selectedGroupsLabel: '',
+                      },
+                    },
+                    {
+                      id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@8f89194410954e768bde1764985454a7',
+                      displayName: 'Molecule Structures',
+                      category: 'vertical',
+                      hasChildren: true,
+                      editedOn: 'Jul 07, 2023 at 11:14 UTC',
+                      published: true,
+                      publishedOn: 'Jul 07, 2023 at 11:14 UTC',
+                      studioUrl: '/container/block-v1:edX+DemoX+Demo_Course+type@vertical+block@8f89194410954e768bde1764985454a7',
+                      releasedToStudents: true,
+                      releaseDate: 'Feb 05, 2013 at 00:00 UTC',
+                      visibilityState: 'live',
+                      hasExplicitStaffLock: false,
+                      start: '2013-02-05T00:00:00Z',
+                      graded: true,
+                      dueDate: '',
+                      due: null,
+                      relativeWeeksDue: null,
+                      format: null,
+                      courseGraders: [
+                        'Homework',
+                        'Exam',
+                      ],
+                      hasChanges: false,
+                      actions: {
+                        deletable: true,
+                        draggable: true,
+                        childAddable: true,
+                        duplicable: true,
+                      },
+                      explanatoryMessage: null,
+                      groupAccess: {},
+                      userPartitions: [
+                        {
+                          id: 50,
+                          name: 'Enrollment Track Groups',
+                          scheme: 'enrollment_track',
+                          groups: [
+                            {
+                              id: 2,
+                              name: 'Verified Certificate',
+                              selected: false,
+                              deleted: false,
+                            },
+                            {
+                              id: 1,
+                              name: 'Audit',
+                              selected: false,
+                              deleted: false,
+                            },
+                          ],
+                        },
+                      ],
+                      showCorrectness: 'always',
+                      discussionEnabled: true,
+                      ancestorHasStaffLock: false,
+                      staffOnlyMessage: false,
+                      hasPartitionGroupComponents: false,
+                      userPartitionInfo: {
+                        selectablePartitions: [
+                          {
+                            id: 50,
+                            name: 'Enrollment Track Groups',
+                            scheme: 'enrollment_track',
+                            groups: [
+                              {
+                                id: 2,
+                                name: 'Verified Certificate',
+                                selected: false,
+                                deleted: false,
+                              },
+                              {
+                                id: 1,
+                                name: 'Audit',
+                                selected: false,
+                                deleted: false,
+                              },
+                            ],
+                          },
+                        ],
+                        selectedPartitionIndex: -1,
+                        selectedGroupsLabel: '',
+                      },
+                    },
+                  ],
+                },
+                ancestorHasStaffLock: false,
+                staffOnlyMessage: false,
+                hasPartitionGroupComponents: false,
+                userPartitionInfo: {
+                  selectablePartitions: [
+                    {
+                      id: 50,
+                      name: 'Enrollment Track Groups',
+                      scheme: 'enrollment_track',
+                      groups: [
+                        {
+                          id: 2,
+                          name: 'Verified Certificate',
+                          selected: false,
+                          deleted: false,
+                        },
+                        {
+                          id: 1,
+                          name: 'Audit',
+                          selected: false,
+                          deleted: false,
+                        },
+                      ],
+                    },
+                  ],
+                  selectedPartitionIndex: -1,
+                  selectedGroupsLabel: '',
+                },
+              },
+              {
+                id: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@175e76c4951144a29d46211361266e0e',
+                displayName: 'Homework - Essays',
+                category: 'sequential',
+                hasChildren: true,
+                editedOn: 'Jul 07, 2023 at 11:14 UTC',
+                published: true,
+                publishedOn: 'Jul 07, 2023 at 11:14 UTC',
+                studioUrl: '/course/course-v1:edX+DemoX+Demo_Course?show=block-v1%3AedX%2BDemoX%2BDemo_Course%2Btype%40sequential%2Bblock%40175e76c4951144a29d46211361266e0e',
+                releasedToStudents: false,
+                releaseDate: 'Nov 09, 2023 at 22:00 UTC',
+                visibilityState: 'ready',
+                hasExplicitStaffLock: false,
+                start: '2023-11-09T22:00:00Z',
+                graded: false,
+                dueDate: '',
+                due: null,
+                relativeWeeksDue: null,
+                format: null,
+                courseGraders: [
+                  'Homework',
+                  'Exam',
+                ],
+                hasChanges: false,
+                actions: {
+                  deletable: true,
+                  draggable: true,
+                  childAddable: true,
+                  duplicable: true,
+                },
+                explanatoryMessage: null,
+                groupAccess: {},
+                userPartitions: [
+                  {
+                    id: 50,
+                    name: 'Enrollment Track Groups',
+                    scheme: 'enrollment_track',
+                    groups: [
+                      {
+                        id: 2,
+                        name: 'Verified Certificate',
+                        selected: false,
+                        deleted: false,
+                      },
+                      {
+                        id: 1,
+                        name: 'Audit',
+                        selected: false,
+                        deleted: false,
+                      },
+                    ],
+                  },
+                ],
+                showCorrectness: 'always',
+                hideAfterDue: false,
+                isProctoredExam: false,
+                wasExamEverLinkedWithExternal: false,
+                onlineProctoringRules: '',
+                isPracticeExam: false,
+                isOnboardingExam: false,
+                isTimeLimited: false,
+                examReviewRules: '',
+                defaultTimeLimitMinutes: null,
+                proctoringExamConfigurationLink: null,
+                supportsOnboarding: false,
+                showReviewRules: true,
+                childInfo: {
+                  category: 'vertical',
+                  displayName: 'Unit',
+                  children: [
+                    {
+                      id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@fb79dcbad35b466a8c6364f8ffee9050',
+                      displayName: 'Peer Assessed Essays',
+                      category: 'vertical',
+                      hasChildren: true,
+                      editedOn: 'Jul 07, 2023 at 11:14 UTC',
+                      published: true,
+                      publishedOn: 'Jul 07, 2023 at 11:14 UTC',
+                      studioUrl: '/container/block-v1:edX+DemoX+Demo_Course+type@vertical+block@fb79dcbad35b466a8c6364f8ffee9050',
+                      releasedToStudents: false,
+                      releaseDate: 'Nov 09, 2023 at 22:00 UTC',
+                      visibilityState: 'ready',
+                      hasExplicitStaffLock: false,
+                      start: '2023-11-09T22:00:00Z',
+                      graded: false,
+                      dueDate: '',
+                      due: null,
+                      relativeWeeksDue: null,
+                      format: null,
+                      courseGraders: [
+                        'Homework',
+                        'Exam',
+                      ],
+                      hasChanges: false,
+                      actions: {
+                        deletable: true,
+                        draggable: true,
+                        childAddable: true,
+                        duplicable: true,
+                      },
+                      explanatoryMessage: null,
+                      groupAccess: {},
+                      userPartitions: [
+                        {
+                          id: 50,
+                          name: 'Enrollment Track Groups',
+                          scheme: 'enrollment_track',
+                          groups: [
+                            {
+                              id: 2,
+                              name: 'Verified Certificate',
+                              selected: false,
+                              deleted: false,
+                            },
+                            {
+                              id: 1,
+                              name: 'Audit',
+                              selected: false,
+                              deleted: false,
+                            },
+                          ],
+                        },
+                      ],
+                      showCorrectness: 'always',
+                      discussionEnabled: true,
+                      ancestorHasStaffLock: false,
+                      staffOnlyMessage: false,
+                      hasPartitionGroupComponents: false,
+                      userPartitionInfo: {
+                        selectablePartitions: [
+                          {
+                            id: 50,
+                            name: 'Enrollment Track Groups',
+                            scheme: 'enrollment_track',
+                            groups: [
+                              {
+                                id: 2,
+                                name: 'Verified Certificate',
+                                selected: false,
+                                deleted: false,
+                              },
+                              {
+                                id: 1,
+                                name: 'Audit',
+                                selected: false,
+                                deleted: false,
+                              },
+                            ],
+                          },
+                        ],
+                        selectedPartitionIndex: -1,
+                        selectedGroupsLabel: '',
+                      },
+                    },
+                  ],
+                },
+                ancestorHasStaffLock: false,
+                staffOnlyMessage: false,
+                hasPartitionGroupComponents: false,
+                userPartitionInfo: {
+                  selectablePartitions: [
+                    {
+                      id: 50,
+                      name: 'Enrollment Track Groups',
+                      scheme: 'enrollment_track',
+                      groups: [
+                        {
+                          id: 2,
+                          name: 'Verified Certificate',
+                          selected: false,
+                          deleted: false,
+                        },
+                        {
+                          id: 1,
+                          name: 'Audit',
+                          selected: false,
+                          deleted: false,
+                        },
+                      ],
+                    },
+                  ],
+                  selectedPartitionIndex: -1,
+                  selectedGroupsLabel: '',
+                },
+              },
+            ],
+          },
+          ancestorHasStaffLock: false,
+          staffOnlyMessage: false,
+          hasPartitionGroupComponents: false,
+          userPartitionInfo: {
+            selectablePartitions: [
+              {
+                id: 50,
+                name: 'Enrollment Track Groups',
+                scheme: 'enrollment_track',
+                groups: [
+                  {
+                    id: 2,
+                    name: 'Verified Certificate',
+                    selected: false,
+                    deleted: false,
+                  },
+                  {
+                    id: 1,
+                    name: 'Audit',
+                    selected: false,
+                    deleted: false,
+                  },
+                ],
+              },
+            ],
+            selectedPartitionIndex: -1,
+            selectedGroupsLabel: '',
+          },
+        },
+        {
+          id: 'block-v1:edX+DemoX+Demo_Course+type@chapter+block@1414ffd5143b4b508f739b563ab468b7',
+          displayName: 'About Exams and Certificates',
+          category: 'chapter',
+          hasChildren: true,
+          editedOn: 'Aug 10, 2023 at 10:40 UTC',
+          published: true,
+          publishedOn: 'Aug 10, 2023 at 10:40 UTC',
+          studioUrl: '/course/course-v1:edX+DemoX+Demo_Course?show=block-v1%3AedX%2BDemoX%2BDemo_Course%2Btype%40chapter%2Bblock%401414ffd5143b4b508f739b563ab468b7',
+          releasedToStudents: false,
+          releaseDate: 'Jan 01, 2030 at 05:00 UTC',
+          visibilityState: 'needs_attention',
+          hasExplicitStaffLock: false,
+          start: '2030-01-01T05:00:00Z',
+          graded: false,
+          dueDate: '',
+          due: null,
+          relativeWeeksDue: null,
+          format: null,
+          courseGraders: [
+            'Homework',
+            'Exam',
+          ],
+          hasChanges: false,
+          actions: {
+            deletable: true,
+            draggable: true,
+            childAddable: true,
+            duplicable: true,
+          },
+          explanatoryMessage: null,
+          groupAccess: {},
+          userPartitions: [
+            {
+              id: 50,
+              name: 'Enrollment Track Groups',
+              scheme: 'enrollment_track',
+              groups: [
+                {
+                  id: 2,
+                  name: 'Verified Certificate',
+                  selected: false,
+                  deleted: false,
+                },
+                {
+                  id: 1,
+                  name: 'Audit',
+                  selected: false,
+                  deleted: false,
+                },
+              ],
+            },
+          ],
+          showCorrectness: 'always',
+          highlights: [],
+          highlightsEnabled: true,
+          highlightsPreviewOnly: false,
+          highlightsDocUrl: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/developing_course/course_sections.html#set-section-highlights-for-weekly-course-highlight-messages',
+          childInfo: {
+            category: 'sequential',
+            displayName: 'Subsection',
+            children: [
+              {
+                id: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@workflow',
+                displayName: 'edX Exams',
+                category: 'sequential',
+                hasChildren: true,
+                editedOn: 'Jul 07, 2023 at 11:14 UTC',
+                published: true,
+                publishedOn: 'Jul 07, 2023 at 11:14 UTC',
+                studioUrl: '/course/course-v1:edX+DemoX+Demo_Course?show=block-v1%3AedX%2BDemoX%2BDemo_Course%2Btype%40sequential%2Bblock%40workflow',
+                releasedToStudents: true,
+                releaseDate: 'Feb 05, 2013 at 00:00 UTC',
+                visibilityState: 'live',
+                hasExplicitStaffLock: false,
+                start: '2013-02-05T00:00:00Z',
+                graded: true,
+                dueDate: '',
+                due: null,
+                relativeWeeksDue: null,
+                format: 'Exam',
+                courseGraders: [
+                  'Homework',
+                  'Exam',
+                ],
+                hasChanges: false,
+                actions: {
+                  deletable: true,
+                  draggable: true,
+                  childAddable: true,
+                  duplicable: true,
+                },
+                explanatoryMessage: null,
+                groupAccess: {},
+                userPartitions: [
+                  {
+                    id: 50,
+                    name: 'Enrollment Track Groups',
+                    scheme: 'enrollment_track',
+                    groups: [
+                      {
+                        id: 2,
+                        name: 'Verified Certificate',
+                        selected: false,
+                        deleted: false,
+                      },
+                      {
+                        id: 1,
+                        name: 'Audit',
+                        selected: false,
+                        deleted: false,
+                      },
+                    ],
+                  },
+                ],
+                showCorrectness: 'always',
+                hideAfterDue: false,
+                isProctoredExam: false,
+                wasExamEverLinkedWithExternal: false,
+                onlineProctoringRules: '',
+                isPracticeExam: false,
+                isOnboardingExam: false,
+                isTimeLimited: false,
+                examReviewRules: '',
+                defaultTimeLimitMinutes: null,
+                proctoringExamConfigurationLink: null,
+                supportsOnboarding: false,
+                showReviewRules: true,
+                childInfo: {
+                  category: 'vertical',
+                  displayName: 'Unit',
+                  children: [
+                    {
+                      id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@934cc32c177d41b580c8413e561346b3',
+                      displayName: 'EdX Exams',
+                      category: 'vertical',
+                      hasChildren: true,
+                      editedOn: 'Jul 07, 2023 at 11:14 UTC',
+                      published: true,
+                      publishedOn: 'Jul 07, 2023 at 11:14 UTC',
+                      studioUrl: '/container/block-v1:edX+DemoX+Demo_Course+type@vertical+block@934cc32c177d41b580c8413e561346b3',
+                      releasedToStudents: true,
+                      releaseDate: 'Feb 05, 2013 at 00:00 UTC',
+                      visibilityState: 'live',
+                      hasExplicitStaffLock: false,
+                      start: '2013-02-05T00:00:00Z',
+                      graded: true,
+                      dueDate: '',
+                      due: null,
+                      relativeWeeksDue: null,
+                      format: null,
+                      courseGraders: [
+                        'Homework',
+                        'Exam',
+                      ],
+                      hasChanges: false,
+                      actions: {
+                        deletable: true,
+                        draggable: true,
+                        childAddable: true,
+                        duplicable: true,
+                      },
+                      explanatoryMessage: null,
+                      groupAccess: {},
+                      userPartitions: [
+                        {
+                          id: 50,
+                          name: 'Enrollment Track Groups',
+                          scheme: 'enrollment_track',
+                          groups: [
+                            {
+                              id: 2,
+                              name: 'Verified Certificate',
+                              selected: false,
+                              deleted: false,
+                            },
+                            {
+                              id: 1,
+                              name: 'Audit',
+                              selected: false,
+                              deleted: false,
+                            },
+                          ],
+                        },
+                      ],
+                      showCorrectness: 'always',
+                      discussionEnabled: true,
+                      ancestorHasStaffLock: false,
+                      staffOnlyMessage: false,
+                      hasPartitionGroupComponents: false,
+                      userPartitionInfo: {
+                        selectablePartitions: [
+                          {
+                            id: 50,
+                            name: 'Enrollment Track Groups',
+                            scheme: 'enrollment_track',
+                            groups: [
+                              {
+                                id: 2,
+                                name: 'Verified Certificate',
+                                selected: false,
+                                deleted: false,
+                              },
+                              {
+                                id: 1,
+                                name: 'Audit',
+                                selected: false,
+                                deleted: false,
+                              },
+                            ],
+                          },
+                        ],
+                        selectedPartitionIndex: -1,
+                        selectedGroupsLabel: '',
+                      },
+                    },
+                    {
+                      id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_f04afeac0131',
+                      displayName: 'Immediate Feedback',
+                      category: 'vertical',
+                      hasChildren: true,
+                      editedOn: 'Jul 07, 2023 at 11:14 UTC',
+                      published: true,
+                      publishedOn: 'Jul 07, 2023 at 11:14 UTC',
+                      studioUrl: '/container/block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_f04afeac0131',
+                      releasedToStudents: true,
+                      releaseDate: 'Feb 05, 2013 at 00:00 UTC',
+                      visibilityState: 'live',
+                      hasExplicitStaffLock: false,
+                      start: '2013-02-05T00:00:00Z',
+                      graded: true,
+                      dueDate: '',
+                      due: null,
+                      relativeWeeksDue: null,
+                      format: null,
+                      courseGraders: [
+                        'Homework',
+                        'Exam',
+                      ],
+                      hasChanges: false,
+                      actions: {
+                        deletable: true,
+                        draggable: true,
+                        childAddable: true,
+                        duplicable: true,
+                      },
+                      explanatoryMessage: null,
+                      groupAccess: {},
+                      userPartitions: [
+                        {
+                          id: 50,
+                          name: 'Enrollment Track Groups',
+                          scheme: 'enrollment_track',
+                          groups: [
+                            {
+                              id: 2,
+                              name: 'Verified Certificate',
+                              selected: false,
+                              deleted: false,
+                            },
+                            {
+                              id: 1,
+                              name: 'Audit',
+                              selected: false,
+                              deleted: false,
+                            },
+                          ],
+                        },
+                      ],
+                      showCorrectness: 'always',
+                      discussionEnabled: true,
+                      ancestorHasStaffLock: false,
+                      staffOnlyMessage: false,
+                      hasPartitionGroupComponents: false,
+                      userPartitionInfo: {
+                        selectablePartitions: [
+                          {
+                            id: 50,
+                            name: 'Enrollment Track Groups',
+                            scheme: 'enrollment_track',
+                            groups: [
+                              {
+                                id: 2,
+                                name: 'Verified Certificate',
+                                selected: false,
+                                deleted: false,
+                              },
+                              {
+                                id: 1,
+                                name: 'Audit',
+                                selected: false,
+                                deleted: false,
+                              },
+                            ],
+                          },
+                        ],
+                        selectedPartitionIndex: -1,
+                        selectedGroupsLabel: '',
+                      },
+                    },
+                    {
+                      id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@b6662b497c094bcc9b870d8270c90c93',
+                      displayName: 'Getting Answers',
+                      category: 'vertical',
+                      hasChildren: true,
+                      editedOn: 'Jul 07, 2023 at 11:14 UTC',
+                      published: true,
+                      publishedOn: 'Jul 07, 2023 at 11:14 UTC',
+                      studioUrl: '/container/block-v1:edX+DemoX+Demo_Course+type@vertical+block@b6662b497c094bcc9b870d8270c90c93',
+                      releasedToStudents: true,
+                      releaseDate: 'Feb 05, 2013 at 00:00 UTC',
+                      visibilityState: 'live',
+                      hasExplicitStaffLock: false,
+                      start: '2013-02-05T00:00:00Z',
+                      graded: true,
+                      dueDate: '',
+                      due: null,
+                      relativeWeeksDue: null,
+                      format: null,
+                      courseGraders: [
+                        'Homework',
+                        'Exam',
+                      ],
+                      hasChanges: false,
+                      actions: {
+                        deletable: true,
+                        draggable: true,
+                        childAddable: true,
+                        duplicable: true,
+                      },
+                      explanatoryMessage: null,
+                      groupAccess: {},
+                      userPartitions: [
+                        {
+                          id: 50,
+                          name: 'Enrollment Track Groups',
+                          scheme: 'enrollment_track',
+                          groups: [
+                            {
+                              id: 2,
+                              name: 'Verified Certificate',
+                              selected: false,
+                              deleted: false,
+                            },
+                            {
+                              id: 1,
+                              name: 'Audit',
+                              selected: false,
+                              deleted: false,
+                            },
+                          ],
+                        },
+                      ],
+                      showCorrectness: 'always',
+                      discussionEnabled: true,
+                      ancestorHasStaffLock: false,
+                      staffOnlyMessage: false,
+                      hasPartitionGroupComponents: false,
+                      userPartitionInfo: {
+                        selectablePartitions: [
+                          {
+                            id: 50,
+                            name: 'Enrollment Track Groups',
+                            scheme: 'enrollment_track',
+                            groups: [
+                              {
+                                id: 2,
+                                name: 'Verified Certificate',
+                                selected: false,
+                                deleted: false,
+                              },
+                              {
+                                id: 1,
+                                name: 'Audit',
+                                selected: false,
+                                deleted: false,
+                              },
+                            ],
+                          },
+                        ],
+                        selectedPartitionIndex: -1,
+                        selectedGroupsLabel: '',
+                      },
+                    },
+                    {
+                      id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@f91d8d31f7cf48ce990f8d8745ae4cfa',
+                      displayName: 'Answering More Than Once',
+                      category: 'vertical',
+                      hasChildren: true,
+                      editedOn: 'Jul 07, 2023 at 11:14 UTC',
+                      published: true,
+                      publishedOn: 'Jul 07, 2023 at 11:14 UTC',
+                      studioUrl: '/container/block-v1:edX+DemoX+Demo_Course+type@vertical+block@f91d8d31f7cf48ce990f8d8745ae4cfa',
+                      releasedToStudents: true,
+                      releaseDate: 'Feb 05, 2013 at 00:00 UTC',
+                      visibilityState: 'live',
+                      hasExplicitStaffLock: false,
+                      start: '2013-02-05T00:00:00Z',
+                      graded: true,
+                      dueDate: '',
+                      due: null,
+                      relativeWeeksDue: null,
+                      format: null,
+                      courseGraders: [
+                        'Homework',
+                        'Exam',
+                      ],
+                      hasChanges: false,
+                      actions: {
+                        deletable: true,
+                        draggable: true,
+                        childAddable: true,
+                        duplicable: true,
+                      },
+                      explanatoryMessage: null,
+                      groupAccess: {},
+                      userPartitions: [
+                        {
+                          id: 50,
+                          name: 'Enrollment Track Groups',
+                          scheme: 'enrollment_track',
+                          groups: [
+                            {
+                              id: 2,
+                              name: 'Verified Certificate',
+                              selected: false,
+                              deleted: false,
+                            },
+                            {
+                              id: 1,
+                              name: 'Audit',
+                              selected: false,
+                              deleted: false,
+                            },
+                          ],
+                        },
+                      ],
+                      showCorrectness: 'always',
+                      discussionEnabled: true,
+                      ancestorHasStaffLock: false,
+                      staffOnlyMessage: false,
+                      hasPartitionGroupComponents: false,
+                      userPartitionInfo: {
+                        selectablePartitions: [
+                          {
+                            id: 50,
+                            name: 'Enrollment Track Groups',
+                            scheme: 'enrollment_track',
+                            groups: [
+                              {
+                                id: 2,
+                                name: 'Verified Certificate',
+                                selected: false,
+                                deleted: false,
+                              },
+                              {
+                                id: 1,
+                                name: 'Audit',
+                                selected: false,
+                                deleted: false,
+                              },
+                            ],
+                          },
+                        ],
+                        selectedPartitionIndex: -1,
+                        selectedGroupsLabel: '',
+                      },
+                    },
+                    {
+                      id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_ac391cde8a91',
+                      displayName: 'Limited Checks',
+                      category: 'vertical',
+                      hasChildren: true,
+                      editedOn: 'Jul 07, 2023 at 11:14 UTC',
+                      published: true,
+                      publishedOn: 'Jul 07, 2023 at 11:14 UTC',
+                      studioUrl: '/container/block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_ac391cde8a91',
+                      releasedToStudents: true,
+                      releaseDate: 'Feb 05, 2013 at 00:00 UTC',
+                      visibilityState: 'live',
+                      hasExplicitStaffLock: false,
+                      start: '2013-02-05T00:00:00Z',
+                      graded: true,
+                      dueDate: '',
+                      due: null,
+                      relativeWeeksDue: null,
+                      format: null,
+                      courseGraders: [
+                        'Homework',
+                        'Exam',
+                      ],
+                      hasChanges: false,
+                      actions: {
+                        deletable: true,
+                        draggable: true,
+                        childAddable: true,
+                        duplicable: true,
+                      },
+                      explanatoryMessage: null,
+                      groupAccess: {},
+                      userPartitions: [
+                        {
+                          id: 50,
+                          name: 'Enrollment Track Groups',
+                          scheme: 'enrollment_track',
+                          groups: [
+                            {
+                              id: 2,
+                              name: 'Verified Certificate',
+                              selected: false,
+                              deleted: false,
+                            },
+                            {
+                              id: 1,
+                              name: 'Audit',
+                              selected: false,
+                              deleted: false,
+                            },
+                          ],
+                        },
+                      ],
+                      showCorrectness: 'always',
+                      discussionEnabled: true,
+                      ancestorHasStaffLock: false,
+                      staffOnlyMessage: false,
+                      hasPartitionGroupComponents: false,
+                      userPartitionInfo: {
+                        selectablePartitions: [
+                          {
+                            id: 50,
+                            name: 'Enrollment Track Groups',
+                            scheme: 'enrollment_track',
+                            groups: [
+                              {
+                                id: 2,
+                                name: 'Verified Certificate',
+                                selected: false,
+                                deleted: false,
+                              },
+                              {
+                                id: 1,
+                                name: 'Audit',
+                                selected: false,
+                                deleted: false,
+                              },
+                            ],
+                          },
+                        ],
+                        selectedPartitionIndex: -1,
+                        selectedGroupsLabel: '',
+                      },
+                    },
+                    {
+                      id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_36e0beb03f0a',
+                      displayName: 'Randomized Questions',
+                      category: 'vertical',
+                      hasChildren: true,
+                      editedOn: 'Jul 07, 2023 at 11:14 UTC',
+                      published: true,
+                      publishedOn: 'Jul 07, 2023 at 11:14 UTC',
+                      studioUrl: '/container/block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_36e0beb03f0a',
+                      releasedToStudents: true,
+                      releaseDate: 'Feb 05, 2013 at 00:00 UTC',
+                      visibilityState: 'live',
+                      hasExplicitStaffLock: false,
+                      start: '2013-02-05T00:00:00Z',
+                      graded: true,
+                      dueDate: '',
+                      due: null,
+                      relativeWeeksDue: null,
+                      format: null,
+                      courseGraders: [
+                        'Homework',
+                        'Exam',
+                      ],
+                      hasChanges: false,
+                      actions: {
+                        deletable: true,
+                        draggable: true,
+                        childAddable: true,
+                        duplicable: true,
+                      },
+                      explanatoryMessage: null,
+                      groupAccess: {},
+                      userPartitions: [
+                        {
+                          id: 50,
+                          name: 'Enrollment Track Groups',
+                          scheme: 'enrollment_track',
+                          groups: [
+                            {
+                              id: 2,
+                              name: 'Verified Certificate',
+                              selected: false,
+                              deleted: false,
+                            },
+                            {
+                              id: 1,
+                              name: 'Audit',
+                              selected: false,
+                              deleted: false,
+                            },
+                          ],
+                        },
+                      ],
+                      showCorrectness: 'always',
+                      discussionEnabled: true,
+                      ancestorHasStaffLock: false,
+                      staffOnlyMessage: false,
+                      hasPartitionGroupComponents: false,
+                      userPartitionInfo: {
+                        selectablePartitions: [
+                          {
+                            id: 50,
+                            name: 'Enrollment Track Groups',
+                            scheme: 'enrollment_track',
+                            groups: [
+                              {
+                                id: 2,
+                                name: 'Verified Certificate',
+                                selected: false,
+                                deleted: false,
+                              },
+                              {
+                                id: 1,
+                                name: 'Audit',
+                                selected: false,
+                                deleted: false,
+                              },
+                            ],
+                          },
+                        ],
+                        selectedPartitionIndex: -1,
+                        selectedGroupsLabel: '',
+                      },
+                    },
+                    {
+                      id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@1b0e2c2c84884b95b1c99fb678cc964c',
+                      displayName: 'Overall Grade Performance',
+                      category: 'vertical',
+                      hasChildren: true,
+                      editedOn: 'Jul 07, 2023 at 11:14 UTC',
+                      published: true,
+                      publishedOn: 'Jul 07, 2023 at 11:14 UTC',
+                      studioUrl: '/container/block-v1:edX+DemoX+Demo_Course+type@vertical+block@1b0e2c2c84884b95b1c99fb678cc964c',
+                      releasedToStudents: true,
+                      releaseDate: 'Feb 05, 2013 at 00:00 UTC',
+                      visibilityState: 'live',
+                      hasExplicitStaffLock: false,
+                      start: '2013-02-05T00:00:00Z',
+                      graded: true,
+                      dueDate: '',
+                      due: null,
+                      relativeWeeksDue: null,
+                      format: null,
+                      courseGraders: [
+                        'Homework',
+                        'Exam',
+                      ],
+                      hasChanges: false,
+                      actions: {
+                        deletable: true,
+                        draggable: true,
+                        childAddable: true,
+                        duplicable: true,
+                      },
+                      explanatoryMessage: null,
+                      groupAccess: {},
+                      userPartitions: [
+                        {
+                          id: 50,
+                          name: 'Enrollment Track Groups',
+                          scheme: 'enrollment_track',
+                          groups: [
+                            {
+                              id: 2,
+                              name: 'Verified Certificate',
+                              selected: false,
+                              deleted: false,
+                            },
+                            {
+                              id: 1,
+                              name: 'Audit',
+                              selected: false,
+                              deleted: false,
+                            },
+                          ],
+                        },
+                      ],
+                      showCorrectness: 'always',
+                      discussionEnabled: true,
+                      ancestorHasStaffLock: false,
+                      staffOnlyMessage: false,
+                      hasPartitionGroupComponents: false,
+                      userPartitionInfo: {
+                        selectablePartitions: [
+                          {
+                            id: 50,
+                            name: 'Enrollment Track Groups',
+                            scheme: 'enrollment_track',
+                            groups: [
+                              {
+                                id: 2,
+                                name: 'Verified Certificate',
+                                selected: false,
+                                deleted: false,
+                              },
+                              {
+                                id: 1,
+                                name: 'Audit',
+                                selected: false,
+                                deleted: false,
+                              },
+                            ],
+                          },
+                        ],
+                        selectedPartitionIndex: -1,
+                        selectedGroupsLabel: '',
+                      },
+                    },
+                    {
+                      id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@c7e98fd39a6944edb6b286c32e1150ff',
+                      displayName: 'Passing a Course',
+                      category: 'vertical',
+                      hasChildren: true,
+                      editedOn: 'Jul 07, 2023 at 11:14 UTC',
+                      published: true,
+                      publishedOn: 'Jul 07, 2023 at 11:14 UTC',
+                      studioUrl: '/container/block-v1:edX+DemoX+Demo_Course+type@vertical+block@c7e98fd39a6944edb6b286c32e1150ff',
+                      releasedToStudents: true,
+                      releaseDate: 'Feb 05, 2013 at 00:00 UTC',
+                      visibilityState: 'live',
+                      hasExplicitStaffLock: false,
+                      start: '2013-02-05T00:00:00Z',
+                      graded: true,
+                      dueDate: '',
+                      due: null,
+                      relativeWeeksDue: null,
+                      format: null,
+                      courseGraders: [
+                        'Homework',
+                        'Exam',
+                      ],
+                      hasChanges: false,
+                      actions: {
+                        deletable: true,
+                        draggable: true,
+                        childAddable: true,
+                        duplicable: true,
+                      },
+                      explanatoryMessage: null,
+                      groupAccess: {},
+                      userPartitions: [
+                        {
+                          id: 50,
+                          name: 'Enrollment Track Groups',
+                          scheme: 'enrollment_track',
+                          groups: [
+                            {
+                              id: 2,
+                              name: 'Verified Certificate',
+                              selected: false,
+                              deleted: false,
+                            },
+                            {
+                              id: 1,
+                              name: 'Audit',
+                              selected: false,
+                              deleted: false,
+                            },
+                          ],
+                        },
+                      ],
+                      showCorrectness: 'always',
+                      discussionEnabled: true,
+                      ancestorHasStaffLock: false,
+                      staffOnlyMessage: false,
+                      hasPartitionGroupComponents: false,
+                      userPartitionInfo: {
+                        selectablePartitions: [
+                          {
+                            id: 50,
+                            name: 'Enrollment Track Groups',
+                            scheme: 'enrollment_track',
+                            groups: [
+                              {
+                                id: 2,
+                                name: 'Verified Certificate',
+                                selected: false,
+                                deleted: false,
+                              },
+                              {
+                                id: 1,
+                                name: 'Audit',
+                                selected: false,
+                                deleted: false,
+                              },
+                            ],
+                          },
+                        ],
+                        selectedPartitionIndex: -1,
+                        selectedGroupsLabel: '',
+                      },
+                    },
+                    {
+                      id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@d6eaa391d2be41dea20b8b1bfbcb1c45',
+                      displayName: 'Getting Your edX Certificate',
+                      category: 'vertical',
+                      hasChildren: true,
+                      editedOn: 'Jul 07, 2023 at 11:14 UTC',
+                      published: true,
+                      publishedOn: 'Jul 07, 2023 at 11:14 UTC',
+                      studioUrl: '/container/block-v1:edX+DemoX+Demo_Course+type@vertical+block@d6eaa391d2be41dea20b8b1bfbcb1c45',
+                      releasedToStudents: true,
+                      releaseDate: 'Feb 05, 2013 at 00:00 UTC',
+                      visibilityState: 'live',
+                      hasExplicitStaffLock: false,
+                      start: '2013-02-05T00:00:00Z',
+                      graded: true,
+                      dueDate: '',
+                      due: null,
+                      relativeWeeksDue: null,
+                      format: null,
+                      courseGraders: [
+                        'Homework',
+                        'Exam',
+                      ],
+                      hasChanges: false,
+                      actions: {
+                        deletable: true,
+                        draggable: true,
+                        childAddable: true,
+                        duplicable: true,
+                      },
+                      explanatoryMessage: null,
+                      groupAccess: {},
+                      userPartitions: [
+                        {
+                          id: 50,
+                          name: 'Enrollment Track Groups',
+                          scheme: 'enrollment_track',
+                          groups: [
+                            {
+                              id: 2,
+                              name: 'Verified Certificate',
+                              selected: false,
+                              deleted: false,
+                            },
+                            {
+                              id: 1,
+                              name: 'Audit',
+                              selected: false,
+                              deleted: false,
+                            },
+                          ],
+                        },
+                      ],
+                      showCorrectness: 'always',
+                      discussionEnabled: true,
+                      ancestorHasStaffLock: false,
+                      staffOnlyMessage: false,
+                      hasPartitionGroupComponents: false,
+                      userPartitionInfo: {
+                        selectablePartitions: [
+                          {
+                            id: 50,
+                            name: 'Enrollment Track Groups',
+                            scheme: 'enrollment_track',
+                            groups: [
+                              {
+                                id: 2,
+                                name: 'Verified Certificate',
+                                selected: false,
+                                deleted: false,
+                              },
+                              {
+                                id: 1,
+                                name: 'Audit',
+                                selected: false,
+                                deleted: false,
+                              },
+                            ],
+                          },
+                        ],
+                        selectedPartitionIndex: -1,
+                        selectedGroupsLabel: '',
+                      },
+                    },
+                  ],
+                },
+                ancestorHasStaffLock: false,
+                staffOnlyMessage: false,
+                hasPartitionGroupComponents: false,
+                userPartitionInfo: {
+                  selectablePartitions: [
+                    {
+                      id: 50,
+                      name: 'Enrollment Track Groups',
+                      scheme: 'enrollment_track',
+                      groups: [
+                        {
+                          id: 2,
+                          name: 'Verified Certificate',
+                          selected: false,
+                          deleted: false,
+                        },
+                        {
+                          id: 1,
+                          name: 'Audit',
+                          selected: false,
+                          deleted: false,
+                        },
+                      ],
+                    },
+                  ],
+                  selectedPartitionIndex: -1,
+                  selectedGroupsLabel: '',
+                },
+              },
+            ],
+          },
+          ancestorHasStaffLock: false,
+          staffOnlyMessage: false,
+          hasPartitionGroupComponents: false,
+          userPartitionInfo: {
+            selectablePartitions: [
+              {
+                id: 50,
+                name: 'Enrollment Track Groups',
+                scheme: 'enrollment_track',
+                groups: [
+                  {
+                    id: 2,
+                    name: 'Verified Certificate',
+                    selected: false,
+                    deleted: false,
+                  },
+                  {
+                    id: 1,
+                    name: 'Audit',
+                    selected: false,
+                    deleted: false,
+                  },
+                ],
+              },
+            ],
+            selectedPartitionIndex: -1,
+            selectedGroupsLabel: '',
+          },
+        },
+        {
+          id: 'block-v1:edX+DemoX+Demo_Course+type@chapter+block@46e11a7b395f45b9837df6c6ac609004',
+          displayName: 'Publish section',
+          category: 'chapter',
+          hasChildren: true,
+          editedOn: 'Aug 23, 2023 at 12:22 UTC',
+          published: true,
+          publishedOn: 'Aug 23, 2023 at 12:22 UTC',
+          studioUrl: '/course/course-v1:edX+DemoX+Demo_Course?show=block-v1%3AedX%2BDemoX%2BDemo_Course%2Btype%40chapter%2Bblock%4046e11a7b395f45b9837df6c6ac609004',
+          releasedToStudents: false,
+          releaseDate: 'Nov 09, 2023 at 22:00 UTC',
+          visibilityState: 'ready',
+          hasExplicitStaffLock: false,
+          start: '2023-11-09T22:00:00Z',
+          graded: false,
+          dueDate: '',
+          due: null,
+          relativeWeeksDue: null,
+          format: null,
+          courseGraders: [
+            'Homework',
+            'Exam',
+          ],
+          hasChanges: false,
+          actions: {
+            deletable: true,
+            draggable: true,
+            childAddable: true,
+            duplicable: true,
+          },
+          explanatoryMessage: null,
+          groupAccess: {},
+          userPartitions: [
+            {
+              id: 50,
+              name: 'Enrollment Track Groups',
+              scheme: 'enrollment_track',
+              groups: [
+                {
+                  id: 2,
+                  name: 'Verified Certificate',
+                  selected: false,
+                  deleted: false,
+                },
+                {
+                  id: 1,
+                  name: 'Audit',
+                  selected: false,
+                  deleted: false,
+                },
+              ],
+            },
+          ],
+          showCorrectness: 'always',
+          highlights: [],
+          highlightsEnabled: true,
+          highlightsPreviewOnly: false,
+          highlightsDocUrl: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/developing_course/course_sections.html#set-section-highlights-for-weekly-course-highlight-messages',
+          childInfo: {
+            category: 'sequential',
+            displayName: 'Subsection',
+            children: [
+              {
+                id: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@1945e9656cbe4abe8f2020c67e9e1f61',
+                displayName: 'Subsection sub',
+                category: 'sequential',
+                hasChildren: true,
+                editedOn: 'Aug 23, 2023 at 11:32 UTC',
+                published: true,
+                publishedOn: 'Aug 23, 2023 at 11:33 UTC',
+                studioUrl: '/course/course-v1:edX+DemoX+Demo_Course?show=block-v1%3AedX%2BDemoX%2BDemo_Course%2Btype%40sequential%2Bblock%401945e9656cbe4abe8f2020c67e9e1f61',
+                releasedToStudents: false,
+                releaseDate: 'Nov 09, 2023 at 22:00 UTC',
+                visibilityState: 'ready',
+                hasExplicitStaffLock: false,
+                start: '2023-11-09T22:00:00Z',
+                graded: false,
+                dueDate: '',
+                due: null,
+                relativeWeeksDue: null,
+                format: null,
+                courseGraders: [
+                  'Homework',
+                  'Exam',
+                ],
+                hasChanges: false,
+                actions: {
+                  deletable: true,
+                  draggable: true,
+                  childAddable: true,
+                  duplicable: true,
+                },
+                explanatoryMessage: null,
+                groupAccess: {},
+                userPartitions: [
+                  {
+                    id: 50,
+                    name: 'Enrollment Track Groups',
+                    scheme: 'enrollment_track',
+                    groups: [
+                      {
+                        id: 2,
+                        name: 'Verified Certificate',
+                        selected: false,
+                        deleted: false,
+                      },
+                      {
+                        id: 1,
+                        name: 'Audit',
+                        selected: false,
+                        deleted: false,
+                      },
+                    ],
+                  },
+                ],
+                showCorrectness: 'always',
+                hideAfterDue: false,
+                isProctoredExam: false,
+                wasExamEverLinkedWithExternal: false,
+                onlineProctoringRules: '',
+                isPracticeExam: false,
+                isOnboardingExam: false,
+                isTimeLimited: false,
+                examReviewRules: '',
+                defaultTimeLimitMinutes: null,
+                proctoringExamConfigurationLink: null,
+                supportsOnboarding: false,
+                showReviewRules: true,
+                childInfo: {
+                  category: 'vertical',
+                  displayName: 'Unit',
+                  children: [
+                    {
+                      id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@b8149aa5af944aed8eebf9c7dc9f3d0b',
+                      displayName: 'Unit',
+                      category: 'vertical',
+                      hasChildren: true,
+                      editedOn: 'Aug 23, 2023 at 11:32 UTC',
+                      published: true,
+                      publishedOn: 'Aug 23, 2023 at 11:33 UTC',
+                      studioUrl: '/container/block-v1:edX+DemoX+Demo_Course+type@vertical+block@b8149aa5af944aed8eebf9c7dc9f3d0b',
+                      releasedToStudents: false,
+                      releaseDate: 'Nov 09, 2023 at 22:00 UTC',
+                      visibilityState: 'ready',
+                      hasExplicitStaffLock: false,
+                      start: '2023-11-09T22:00:00Z',
+                      graded: false,
+                      dueDate: '',
+                      due: null,
+                      relativeWeeksDue: null,
+                      format: null,
+                      courseGraders: [
+                        'Homework',
+                        'Exam',
+                      ],
+                      hasChanges: false,
+                      actions: {
+                        deletable: true,
+                        draggable: true,
+                        childAddable: true,
+                        duplicable: true,
+                      },
+                      explanatoryMessage: null,
+                      groupAccess: {},
+                      userPartitions: [
+                        {
+                          id: 50,
+                          name: 'Enrollment Track Groups',
+                          scheme: 'enrollment_track',
+                          groups: [
+                            {
+                              id: 2,
+                              name: 'Verified Certificate',
+                              selected: false,
+                              deleted: false,
+                            },
+                            {
+                              id: 1,
+                              name: 'Audit',
+                              selected: false,
+                              deleted: false,
+                            },
+                          ],
+                        },
+                      ],
+                      showCorrectness: 'always',
+                      discussionEnabled: true,
+                      ancestorHasStaffLock: false,
+                      staffOnlyMessage: false,
+                      hasPartitionGroupComponents: false,
+                      userPartitionInfo: {
+                        selectablePartitions: [
+                          {
+                            id: 50,
+                            name: 'Enrollment Track Groups',
+                            scheme: 'enrollment_track',
+                            groups: [
+                              {
+                                id: 2,
+                                name: 'Verified Certificate',
+                                selected: false,
+                                deleted: false,
+                              },
+                              {
+                                id: 1,
+                                name: 'Audit',
+                                selected: false,
+                                deleted: false,
+                              },
+                            ],
+                          },
+                        ],
+                        selectedPartitionIndex: -1,
+                        selectedGroupsLabel: '',
+                      },
+                    },
+                  ],
+                },
+                ancestorHasStaffLock: false,
+                staffOnlyMessage: false,
+                hasPartitionGroupComponents: false,
+                userPartitionInfo: {
+                  selectablePartitions: [
+                    {
+                      id: 50,
+                      name: 'Enrollment Track Groups',
+                      scheme: 'enrollment_track',
+                      groups: [
+                        {
+                          id: 2,
+                          name: 'Verified Certificate',
+                          selected: false,
+                          deleted: false,
+                        },
+                        {
+                          id: 1,
+                          name: 'Audit',
+                          selected: false,
+                          deleted: false,
+                        },
+                      ],
+                    },
+                  ],
+                  selectedPartitionIndex: -1,
+                  selectedGroupsLabel: '',
+                },
+              },
+            ],
+          },
+          ancestorHasStaffLock: false,
+          staffOnlyMessage: false,
+          hasPartitionGroupComponents: false,
+          userPartitionInfo: {
+            selectablePartitions: [
+              {
+                id: 50,
+                name: 'Enrollment Track Groups',
+                scheme: 'enrollment_track',
+                groups: [
+                  {
+                    id: 2,
+                    name: 'Verified Certificate',
+                    selected: false,
+                    deleted: false,
+                  },
+                  {
+                    id: 1,
+                    name: 'Audit',
+                    selected: false,
+                    deleted: false,
+                  },
+                ],
+              },
+            ],
+            selectedPartitionIndex: -1,
+            selectedGroupsLabel: '',
+          },
+        },
+      ],
+    },
+    ancestorHasStaffLock: false,
+    staffOnlyMessage: false,
+    hasPartitionGroupComponents: false,
+    userPartitionInfo: {
+      selectablePartitions: [
+        {
+          id: 50,
+          name: 'Enrollment Track Groups',
+          scheme: 'enrollment_track',
+          groups: [
+            {
+              id: 2,
+              name: 'Verified Certificate',
+              selected: false,
+              deleted: false,
+            },
+            {
+              id: 1,
+              name: 'Audit',
+              selected: false,
+              deleted: false,
+            },
+          ],
+        },
+      ],
+      selectedPartitionIndex: -1,
+      selectedGroupsLabel: '',
+    },
+  },
+  deprecatedBlocksInfo: {
+    deprecatedEnabledBlockTypes: [],
+    blocks: [],
+    advanceSettingsUrl: '/settings/advanced/course-v1:edx+101+y76',
+  },
+  discussionsIncontextFeedbackUrl: '',
+  discussionsIncontextLearnmoreUrl: '',
+  initialState: {
+    expandedLocators: [
+      'block-v1:edx+101+y76+type@chapter+block@03de0adc9d1c4cc097062d80eb04abf6',
+      'block-v1:edx+101+y76+type@sequential+block@8a85e287e30a47e98d8c1f37f74a6a9d',
+    ],
+    locatorToShow: 'block-v1:edx+101+y76+type@chapter+block@03de0adc9d1c4cc097062d80eb04abf6',
+  },
+  languageCode: 'en',
+  lmsLink: '//localhost:18000/courses/course-v1:edx+101+y76/jump_to/block-v1:edx+101+y76+type@course+block@course',
+  mfeProctoredExamSettingsUrl: '',
+  notificationDismissUrl: '',
+  proctoringErrors: [],
+  reindexLink: '/course/course-v1:edx+101+y76/search_reindex',
+  rerunNotificationId: 2,
+};
diff --git a/src/course-outline/__mocks__/courseOutlineIndexWithoutSections.js b/src/course-outline/__mocks__/courseOutlineIndexWithoutSections.js
new file mode 100644
index 0000000000..89a48492d9
--- /dev/null
+++ b/src/course-outline/__mocks__/courseOutlineIndexWithoutSections.js
@@ -0,0 +1,25 @@
+module.exports = {
+  courseReleaseDate: 'Set Date',
+  courseStructure: {},
+  deprecatedBlocksInfo: {
+    deprecatedEnabledBlockTypes: [],
+    blocks: [],
+    advanceSettingsUrl: '/settings/advanced/course-v1:edx+101+y76',
+  },
+  discussionsIncontextFeedbackUrl: '',
+  discussionsIncontextLearnmoreUrl: '',
+  initialState: {
+    expandedLocators: [
+      'block-v1:edx+101+y76+type@chapter+block@03de0adc9d1c4cc097062d80eb04abf6',
+      'block-v1:edx+101+y76+type@sequential+block@8a85e287e30a47e98d8c1f37f74a6a9d',
+    ],
+    locatorToShow: 'block-v1:edx+101+y76+type@chapter+block@03de0adc9d1c4cc097062d80eb04abf6',
+  },
+  languageCode: 'en',
+  lmsLink: '//localhost:18000/courses/course-v1:edx+101+y76/jump_to/block-v1:edx+101+y76+type@course+block@course',
+  mfeProctoredExamSettingsUrl: '',
+  notificationDismissUrl: '/course_notifications/course-v1:edx+101+y76/2',
+  proctoringErrors: [],
+  reindexLink: '/course/course-v1:edx+101+y76/search_reindex',
+  rerunNotificationId: 2,
+};
diff --git a/src/course-outline/__mocks__/courseSection.js b/src/course-outline/__mocks__/courseSection.js
new file mode 100644
index 0000000000..2e4e6f8de9
--- /dev/null
+++ b/src/course-outline/__mocks__/courseSection.js
@@ -0,0 +1,93 @@
+module.exports = {
+  id: 'block-v1:edX+DemoX+Demo_Course+type@chapter+block@d0e78d363a424da6be5c22704c34f7a7',
+  display_name: 'Section',
+  category: 'chapter',
+  has_children: true,
+  edited_on: 'Nov 22, 2023 at 07:45 UTC',
+  published: true,
+  published_on: 'Nov 22, 2023 at 07:45 UTC',
+  studio_url: '/course/course-v1:edX+DemoX+Demo_Course?show=block-v1%3AedX%2BDemoX%2BDemo_Course%2Btype%40chapter%2Bblock%40d0e78d363a424da6be5c22704c34f7a7',
+  released_to_students: true,
+  release_date: 'Feb 05, 2013 at 05:00 UTC',
+  visibility_state: 'live',
+  has_explicit_staff_lock: false,
+  start: '2013-02-05T05:00:00Z',
+  graded: false,
+  due_date: '',
+  due: null,
+  relative_weeks_due: null,
+  format: null,
+  course_graders: [
+    'Homework',
+    'Exam',
+  ],
+  has_changes: false,
+  actions: {
+    deletable: true,
+    draggable: true,
+    childAddable: true,
+    duplicable: true,
+  },
+  explanatory_message: null,
+  group_access: {},
+  user_partitions: [
+    {
+      id: 50,
+      name: 'Enrollment Track Groups',
+      scheme: 'enrollment_track',
+      groups: [
+        {
+          id: 2,
+          name: 'Verified Certificate',
+          selected: false,
+          deleted: false,
+        },
+        {
+          id: 1,
+          name: 'Audit',
+          selected: false,
+          deleted: false,
+        },
+      ],
+    },
+  ],
+  show_correctness: 'always',
+  highlights: [],
+  highlights_enabled: true,
+  highlights_preview_only: false,
+  highlights_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/developing_course/course_sections.html#set-section-highlights-for-weekly-course-highlight-messages',
+  child_info: {
+    category: 'sequential',
+    display_name: 'Subsection',
+    children: [],
+  },
+  ancestor_has_staff_lock: false,
+  staff_only_message: false,
+  enable_copy_paste_units: false,
+  has_partition_group_components: false,
+  user_partition_info: {
+    selectable_partitions: [
+      {
+        id: 50,
+        name: 'Enrollment Track Groups',
+        scheme: 'enrollment_track',
+        groups: [
+          {
+            id: 2,
+            name: 'Verified Certificate',
+            selected: false,
+            deleted: false,
+          },
+          {
+            id: 1,
+            name: 'Audit',
+            selected: false,
+            deleted: false,
+          },
+        ],
+      },
+    ],
+    selected_partition_index: -1,
+    selected_groups_label: '',
+  },
+};
diff --git a/src/course-outline/__mocks__/courseSubsection.js b/src/course-outline/__mocks__/courseSubsection.js
new file mode 100644
index 0000000000..a7e72d0efa
--- /dev/null
+++ b/src/course-outline/__mocks__/courseSubsection.js
@@ -0,0 +1,101 @@
+module.exports = {
+  id: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@b713bc2830f34f6f87554028c3068729',
+  display_name: 'Subsection',
+  category: 'sequential',
+  has_children: true,
+  edited_on: 'Dec 05, 2023 at 10:35 UTC',
+  published: true,
+  published_on: 'Dec 05, 2023 at 10:35 UTC',
+  studio_url: '/course/course-v1:edX+DemoX+Demo_Course?show=block-v1%3AedX%2BDemoX%2BDemo_Course%2Btype%40sequential%2Bblock%40b713bc2830f34f6f87554028c3068729',
+  released_to_students: true,
+  release_date: 'Feb 05, 2013 at 05:00 UTC',
+  visibility_state: 'live',
+  has_explicit_staff_lock: false,
+  start: '2013-02-05T05:00:00Z',
+  graded: false,
+  due_date: '',
+  due: null,
+  relative_weeks_due: null,
+  format: null,
+  course_graders: [
+    'Homework',
+    'Exam',
+  ],
+  has_changes: false,
+  actions: {
+    deletable: true,
+    draggable: true,
+    childAddable: true,
+    duplicable: true,
+  },
+  explanatory_message: null,
+  group_access: {},
+  user_partitions: [
+    {
+      id: 50,
+      name: 'Enrollment Track Groups',
+      scheme: 'enrollment_track',
+      groups: [
+        {
+          id: 2,
+          name: 'Verified Certificate',
+          selected: false,
+          deleted: false,
+        },
+        {
+          id: 1,
+          name: 'Audit',
+          selected: false,
+          deleted: false,
+        },
+      ],
+    },
+  ],
+  show_correctness: 'always',
+  hide_after_due: false,
+  is_proctored_exam: false,
+  was_exam_ever_linked_with_external: false,
+  online_proctoring_rules: '',
+  is_practice_exam: false,
+  is_onboarding_exam: false,
+  is_time_limited: false,
+  exam_review_rules: '',
+  default_time_limit_minutes: null,
+  proctoring_exam_configuration_link: null,
+  supports_onboarding: false,
+  show_review_rules: true,
+  child_info: {
+    category: 'vertical',
+    display_name: 'Unit',
+    children: [],
+  },
+  ancestor_has_staff_lock: false,
+  staff_only_message: false,
+  enable_copy_paste_units: false,
+  has_partition_group_components: false,
+  user_partition_info: {
+    selectable_partitions: [
+      {
+        id: 50,
+        name: 'Enrollment Track Groups',
+        scheme: 'enrollment_track',
+        groups: [
+          {
+            id: 2,
+            name: 'Verified Certificate',
+            selected: false,
+            deleted: false,
+          },
+          {
+            id: 1,
+            name: 'Audit',
+            selected: false,
+            deleted: false,
+          },
+        ],
+      },
+    ],
+    selected_partition_index: -1,
+    selected_groups_label: '',
+  },
+};
diff --git a/src/course-outline/__mocks__/index.js b/src/course-outline/__mocks__/index.js
new file mode 100644
index 0000000000..15c6504cb1
--- /dev/null
+++ b/src/course-outline/__mocks__/index.js
@@ -0,0 +1,6 @@
+export { default as courseOutlineIndexMock } from './courseOutlineIndex';
+export { default as courseOutlineIndexWithoutSections } from './courseOutlineIndexWithoutSections';
+export { default as courseBestPracticesMock } from './courseBestPractices';
+export { default as courseLaunchMock } from './courseLaunch';
+export { default as courseSectionMock } from './courseSection';
+export { default as courseSubsectionMock } from './courseSubsection';
diff --git a/src/course-outline/card-header/CardHeader.jsx b/src/course-outline/card-header/CardHeader.jsx
new file mode 100644
index 0000000000..b64604676d
--- /dev/null
+++ b/src/course-outline/card-header/CardHeader.jsx
@@ -0,0 +1,300 @@
+// @ts-check
+import React, { useEffect, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import { getConfig } from '@edx/frontend-platform';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { useSearchParams } from 'react-router-dom';
+import {
+  Dropdown,
+  Form,
+  Hyperlink,
+  Icon,
+  IconButton,
+  useToggle,
+} from '@openedx/paragon';
+import {
+  MoreVert as MoveVertIcon,
+  EditOutline as EditIcon,
+} from '@openedx/paragon/icons';
+
+import { useContentTagsCount } from '../../generic/data/apiHooks';
+import { ContentTagsDrawerSheet } from '../../content-tags-drawer';
+import TagCount from '../../generic/tag-count';
+import { useEscapeClick } from '../../hooks';
+import { ITEM_BADGE_STATUS } from '../constants';
+import { scrollToElement } from '../utils';
+import CardStatus from './CardStatus';
+import messages from './messages';
+
+const CardHeader = ({
+  title,
+  status,
+  cardId,
+  hasChanges,
+  onClickPublish,
+  onClickConfigure,
+  onClickMenuButton,
+  onClickEdit,
+  isFormOpen,
+  onEditSubmit,
+  closeForm,
+  isDisabledEditField,
+  onClickDelete,
+  onClickDuplicate,
+  onClickMoveUp,
+  onClickMoveDown,
+  onClickCopy,
+  titleComponent,
+  namePrefix,
+  actions,
+  enableCopyPasteUnits,
+  isVertical,
+  isSequential,
+  proctoringExamConfigurationLink,
+  discussionEnabled,
+  discussionsSettings,
+  parentInfo,
+}) => {
+  const intl = useIntl();
+  const [searchParams] = useSearchParams();
+  const [titleValue, setTitleValue] = useState(title);
+  const cardHeaderRef = useRef(null);
+  const [isManageTagsDrawerOpen, openManageTagsDrawer, closeManageTagsDrawer] = useToggle(false);
+
+  // Use studio url as base if proctoringExamConfigurationLink is a relative link
+  const fullProctoringExamConfigurationLink = () => (
+    proctoringExamConfigurationLink && new URL(proctoringExamConfigurationLink, getConfig().STUDIO_BASE_URL).href
+  );
+
+  const isDisabledPublish = (status === ITEM_BADGE_STATUS.live
+    || status === ITEM_BADGE_STATUS.publishedNotLive) && !hasChanges;
+
+  const { data: contentTagCount } = useContentTagsCount(cardId);
+
+  useEffect(() => {
+    const locatorId = searchParams.get('show');
+    if (!locatorId) {
+      return;
+    }
+
+    if (cardHeaderRef.current && locatorId === cardId) {
+      scrollToElement(cardHeaderRef.current);
+    }
+  }, []);
+
+  const showDiscussionsEnabledBadge = (
+    isVertical
+      && !parentInfo?.isTimeLimited
+      && discussionEnabled
+      && discussionsSettings?.providerType === 'openedx'
+      && (
+        discussionsSettings?.enableGradedUnits
+          || (!discussionsSettings?.enableGradedUnits && !parentInfo.graded)
+      )
+  );
+
+  useEscapeClick({
+    onEscape: () => {
+      setTitleValue(title);
+      closeForm();
+    },
+    dependency: title,
+  });
+
+  return (
+    <>
+      <div
+        className="item-card-header"
+        data-testid={`${namePrefix}-card-header`}
+        ref={cardHeaderRef}
+      >
+        {isFormOpen ? (
+          <Form.Group className="m-0 w-75">
+            <Form.Control
+              data-testid={`${namePrefix}-edit-field`}
+              ref={(e) => e && e.focus()}
+              value={titleValue}
+              name="displayName"
+              onChange={(e) => setTitleValue(e.target.value)}
+              aria-label="edit field"
+              onBlur={() => onEditSubmit(titleValue)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') {
+                  onEditSubmit(titleValue);
+                }
+              }}
+              disabled={isDisabledEditField}
+            />
+          </Form.Group>
+        ) : (
+          <>
+            {titleComponent}
+            <IconButton
+              className="item-card-edit-icon"
+              data-testid={`${namePrefix}-edit-button`}
+              alt={intl.formatMessage(messages.altButtonEdit)}
+              iconAs={EditIcon}
+              onClick={onClickEdit}
+            />
+          </>
+        )}
+        <div className="ml-auto d-flex">
+          {(isVertical || isSequential) && (
+            <CardStatus status={status} showDiscussionsEnabledBadge={showDiscussionsEnabledBadge} />
+          )}
+          { getConfig().ENABLE_TAGGING_TAXONOMY_PAGES === 'true' && !!contentTagCount && (
+            <TagCount count={contentTagCount} onClick={openManageTagsDrawer} />
+          )}
+          <Dropdown data-testid={`${namePrefix}-card-header__menu`} onClick={onClickMenuButton}>
+            <Dropdown.Toggle
+              className="item-card-header__menu"
+              id={`${namePrefix}-card-header__menu`}
+              data-testid={`${namePrefix}-card-header__menu-button`}
+              as={IconButton}
+              src={MoveVertIcon}
+              alt={`${namePrefix}-card-header__menu`}
+              iconAs={Icon}
+            />
+            <Dropdown.Menu>
+              {isSequential && proctoringExamConfigurationLink && (
+                <Dropdown.Item
+                  as={Hyperlink}
+                  target="_blank"
+                  destination={fullProctoringExamConfigurationLink()}
+                  href={fullProctoringExamConfigurationLink()}
+                  externalLinkTitle={intl.formatMessage(messages.proctoringLinkTooltip)}
+                >
+                  {intl.formatMessage(messages.menuProctoringLinkText)}
+                </Dropdown.Item>
+              )}
+              <Dropdown.Item
+                data-testid={`${namePrefix}-card-header__menu-publish-button`}
+                disabled={isDisabledPublish}
+                onClick={onClickPublish}
+              >
+                {intl.formatMessage(messages.menuPublish)}
+              </Dropdown.Item>
+              <Dropdown.Item
+                data-testid={`${namePrefix}-card-header__menu-configure-button`}
+                onClick={onClickConfigure}
+              >
+                {intl.formatMessage(messages.menuConfigure)}
+              </Dropdown.Item>
+              {getConfig().ENABLE_TAGGING_TAXONOMY_PAGES === 'true' && (
+                <Dropdown.Item
+                  data-testid={`${namePrefix}-card-header__menu-manage-tags-button`}
+                  onClick={openManageTagsDrawer}
+                >
+                  {intl.formatMessage(messages.menuManageTags)}
+                </Dropdown.Item>
+              )}
+
+              {isVertical && enableCopyPasteUnits && (
+                <Dropdown.Item onClick={onClickCopy}>
+                  {intl.formatMessage(messages.menuCopy)}
+                </Dropdown.Item>
+              )}
+              {actions.duplicable && (
+                <Dropdown.Item
+                  data-testid={`${namePrefix}-card-header__menu-duplicate-button`}
+                  onClick={onClickDuplicate}
+                >
+                  {intl.formatMessage(messages.menuDuplicate)}
+                </Dropdown.Item>
+              )}
+              {actions.draggable && (
+                <>
+                  <Dropdown.Item
+                    data-testid={`${namePrefix}-card-header__menu-move-up-button`}
+                    onClick={onClickMoveUp}
+                    disabled={!actions.allowMoveUp}
+                  >
+                    {intl.formatMessage(messages.menuMoveUp)}
+                  </Dropdown.Item>
+                  <Dropdown.Item
+                    data-testid={`${namePrefix}-card-header__menu-move-down-button`}
+                    onClick={onClickMoveDown}
+                    disabled={!actions.allowMoveDown}
+                  >
+                    {intl.formatMessage(messages.menuMoveDown)}
+                  </Dropdown.Item>
+                </>
+              )}
+              {actions.deletable && (
+                <Dropdown.Item
+                  className="border-top border-light"
+                  data-testid={`${namePrefix}-card-header__menu-delete-button`}
+                  onClick={onClickDelete}
+                >
+                  {intl.formatMessage(messages.menuDelete)}
+                </Dropdown.Item>
+              )}
+            </Dropdown.Menu>
+          </Dropdown>
+        </div>
+      </div>
+      <ContentTagsDrawerSheet
+        id={cardId}
+        onClose={/* istanbul ignore next */ () => closeManageTagsDrawer()}
+        showSheet={isManageTagsDrawerOpen}
+      />
+    </>
+  );
+};
+
+CardHeader.defaultProps = {
+  enableCopyPasteUnits: false,
+  isVertical: false,
+  isSequential: false,
+  onClickCopy: null,
+  proctoringExamConfigurationLink: null,
+  discussionEnabled: false,
+  discussionsSettings: {},
+  parentInfo: {},
+  cardId: '',
+};
+
+CardHeader.propTypes = {
+  title: PropTypes.string.isRequired,
+  status: PropTypes.string.isRequired,
+  cardId: PropTypes.string,
+  hasChanges: PropTypes.bool.isRequired,
+  onClickPublish: PropTypes.func.isRequired,
+  onClickConfigure: PropTypes.func.isRequired,
+  onClickMenuButton: PropTypes.func.isRequired,
+  onClickEdit: PropTypes.func.isRequired,
+  isFormOpen: PropTypes.bool.isRequired,
+  onEditSubmit: PropTypes.func.isRequired,
+  closeForm: PropTypes.func.isRequired,
+  isDisabledEditField: PropTypes.bool.isRequired,
+  onClickDelete: PropTypes.func.isRequired,
+  onClickDuplicate: PropTypes.func.isRequired,
+  onClickMoveUp: PropTypes.func.isRequired,
+  onClickMoveDown: PropTypes.func.isRequired,
+  onClickCopy: PropTypes.func,
+  titleComponent: PropTypes.node.isRequired,
+  namePrefix: PropTypes.string.isRequired,
+  proctoringExamConfigurationLink: PropTypes.string,
+  actions: PropTypes.shape({
+    deletable: PropTypes.bool.isRequired,
+    draggable: PropTypes.bool.isRequired,
+    childAddable: PropTypes.bool.isRequired,
+    duplicable: PropTypes.bool.isRequired,
+    allowMoveUp: PropTypes.bool,
+    allowMoveDown: PropTypes.bool,
+  }).isRequired,
+  enableCopyPasteUnits: PropTypes.bool,
+  isVertical: PropTypes.bool,
+  isSequential: PropTypes.bool,
+  discussionEnabled: PropTypes.bool,
+  discussionsSettings: PropTypes.shape({
+    providerType: PropTypes.string,
+    enableGradedUnits: PropTypes.bool,
+  }),
+  parentInfo: PropTypes.shape({
+    isTimeLimited: PropTypes.bool,
+    graded: PropTypes.bool,
+  }),
+};
+
+export default CardHeader;
diff --git a/src/course-outline/card-header/CardHeader.scss b/src/course-outline/card-header/CardHeader.scss
new file mode 100644
index 0000000000..29a4a8e847
--- /dev/null
+++ b/src/course-outline/card-header/CardHeader.scss
@@ -0,0 +1,30 @@
+.item-card-header {
+  display: flex;
+  align-items: center;
+
+  .item-card-header__title-btn {
+    justify-content: flex-start;
+    padding: 0;
+    flex: 1 1 0%;
+    height: 1.5rem;
+    margin-right: .25rem;
+    background: transparent;
+    color: $black;
+  }
+
+  .item-card-edit-icon {
+    opacity: 0;
+    transition: opacity .3s linear;
+    margin-right: .5rem;
+
+    &:focus {
+      opacity: 1;
+    }
+  }
+
+  &:hover {
+    .item-card-edit-icon {
+      opacity: 1;
+    }
+  }
+}
diff --git a/src/course-outline/card-header/CardHeader.test.jsx b/src/course-outline/card-header/CardHeader.test.jsx
new file mode 100644
index 0000000000..d589627173
--- /dev/null
+++ b/src/course-outline/card-header/CardHeader.test.jsx
@@ -0,0 +1,342 @@
+import { MemoryRouter } from 'react-router-dom';
+import {
+  act, render, fireEvent, waitFor, screen,
+} from '@testing-library/react';
+import { setConfig, getConfig } from '@edx/frontend-platform';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
+
+import { ITEM_BADGE_STATUS } from '../constants';
+import CardHeader from './CardHeader';
+import TitleButton from './TitleButton';
+import messages from './messages';
+
+const onExpandMock = jest.fn();
+const onClickMenuButtonMock = jest.fn();
+const onClickPublishMock = jest.fn();
+const onClickEditMock = jest.fn();
+const onClickDeleteMock = jest.fn();
+const onClickDuplicateMock = jest.fn();
+const onClickConfigureMock = jest.fn();
+const onClickMoveUpMock = jest.fn();
+const onClickMoveDownMock = jest.fn();
+const closeFormMock = jest.fn();
+
+const mockGetTagsCount = jest.fn();
+
+jest.mock('../../generic/data/api', () => ({
+  ...jest.requireActual('../../generic/data/api'),
+  getTagsCount: () => mockGetTagsCount(),
+}));
+
+const cardHeaderProps = {
+  title: 'Some title',
+  status: ITEM_BADGE_STATUS.live,
+  cardId: '12345',
+  hasChanges: false,
+  onClickMenuButton: onClickMenuButtonMock,
+  onClickPublish: onClickPublishMock,
+  onClickEdit: onClickEditMock,
+  isFormOpen: false,
+  onEditSubmit: jest.fn(),
+  closeForm: closeFormMock,
+  isDisabledEditField: false,
+  onClickDelete: onClickDeleteMock,
+  onClickDuplicate: onClickDuplicateMock,
+  onClickConfigure: onClickConfigureMock,
+  onClickMoveUp: onClickMoveUpMock,
+  onClickMoveDown: onClickMoveDownMock,
+  isSequential: true,
+  namePrefix: 'subsection',
+  actions: {
+    draggable: true,
+    childAddable: true,
+    deletable: true,
+    duplicable: true,
+  },
+};
+
+const queryClient = new QueryClient();
+
+const renderComponent = (props, entry = '/') => {
+  const titleComponent = (
+    <TitleButton
+      isExpanded
+      title={cardHeaderProps.title}
+      onTitleClick={onExpandMock}
+      namePrefix={cardHeaderProps.namePrefix}
+      {...props}
+    />
+  );
+
+  return render(
+    <IntlProvider locale="en">
+      <QueryClientProvider client={queryClient}>
+        <MemoryRouter initialEntries={[entry]}>
+          <CardHeader
+            {...cardHeaderProps}
+            titleComponent={titleComponent}
+            {...props}
+          />
+        </MemoryRouter>
+      </QueryClientProvider>
+    </IntlProvider>,
+  );
+};
+
+describe('<CardHeader />', () => {
+  it('render CardHeader component correctly', async () => {
+    const { findByText, findByTestId, queryByTestId } = renderComponent();
+
+    expect(await findByText(cardHeaderProps.title)).toBeInTheDocument();
+    expect(await findByTestId('subsection-card-header__expanded-btn')).toBeInTheDocument();
+    expect(await findByTestId('subsection-card-header__menu')).toBeInTheDocument();
+    await waitFor(() => {
+      expect(queryByTestId('edit field')).not.toBeInTheDocument();
+    });
+  });
+
+  it('render status badge as live', async () => {
+    const { findByText } = renderComponent();
+    expect(await findByText(messages.statusBadgeLive.defaultMessage)).toBeInTheDocument();
+  });
+
+  it('render status badge as published_not_live', async () => {
+    const { findByText } = renderComponent({
+      ...cardHeaderProps,
+      status: ITEM_BADGE_STATUS.publishedNotLive,
+    });
+
+    expect(await findByText(messages.statusBadgePublishedNotLive.defaultMessage)).toBeInTheDocument();
+  });
+
+  it('render status badge as staff_only', async () => {
+    const { findByText } = renderComponent({
+      ...cardHeaderProps,
+      status: ITEM_BADGE_STATUS.staffOnly,
+    });
+
+    expect(await findByText(messages.statusBadgeStaffOnly.defaultMessage)).toBeInTheDocument();
+  });
+
+  it('render status badge as draft', async () => {
+    const { findByText } = renderComponent({
+      ...cardHeaderProps,
+      status: ITEM_BADGE_STATUS.draft,
+    });
+
+    expect(await findByText(messages.statusBadgeDraft.defaultMessage)).toBeInTheDocument();
+  });
+
+  it('check publish menu item is disabled when subsection status is live or published not live and it has no changes', async () => {
+    const { findByText, findByTestId } = renderComponent({
+      ...cardHeaderProps,
+      status: ITEM_BADGE_STATUS.publishedNotLive,
+    });
+
+    const menuButton = await findByTestId('subsection-card-header__menu-button');
+    fireEvent.click(menuButton);
+    expect(await findByText(messages.menuPublish.defaultMessage)).toHaveAttribute('aria-disabled', 'true');
+  });
+
+  it('check publish menu item is enabled when subsection status is live or published not live and it has changes', async () => {
+    const { findByText, findByTestId } = renderComponent({
+      ...cardHeaderProps,
+      status: ITEM_BADGE_STATUS.publishedNotLive,
+      hasChanges: true,
+    });
+
+    const menuButton = await findByTestId('subsection-card-header__menu-button');
+    fireEvent.click(menuButton);
+    expect(await findByText(messages.menuPublish.defaultMessage)).not.toHaveAttribute('aria-disabled');
+  });
+
+  it('calls handleExpanded when button is clicked', async () => {
+    const { findByTestId } = renderComponent();
+
+    const expandButton = await findByTestId('subsection-card-header__expanded-btn');
+    fireEvent.click(expandButton);
+    expect(onExpandMock).toHaveBeenCalled();
+  });
+
+  it('calls onClickMenuButton when menu is clicked', async () => {
+    const { findByTestId } = renderComponent();
+
+    const menuButton = await findByTestId('subsection-card-header__menu-button');
+    await act(async () => fireEvent.click(menuButton));
+    expect(onClickMenuButtonMock).toHaveBeenCalled();
+  });
+
+  it('calls onClickPublish when item is clicked', async () => {
+    const { findByText, findByTestId } = renderComponent({
+      ...cardHeaderProps,
+      status: ITEM_BADGE_STATUS.draft,
+    });
+
+    const menuButton = await findByTestId('subsection-card-header__menu-button');
+    fireEvent.click(menuButton);
+
+    const publishMenuItem = await findByText(messages.menuPublish.defaultMessage);
+    await act(async () => fireEvent.click(publishMenuItem));
+    expect(onClickPublishMock).toHaveBeenCalled();
+  });
+
+  it('only shows Manage tags menu if the waffle flag is enabled', async () => {
+    setConfig({
+      ...getConfig(),
+      ENABLE_TAGGING_TAXONOMY_PAGES: 'false',
+    });
+    renderComponent();
+    const menuButton = await screen.findByTestId('subsection-card-header__menu-button');
+    fireEvent.click(menuButton);
+
+    expect(screen.queryByText(messages.menuManageTags.defaultMessage)).not.toBeInTheDocument();
+  });
+
+  it('shows ContentTagsDrawer when the menu is clicked', async () => {
+    setConfig({
+      ...getConfig(),
+      ENABLE_TAGGING_TAXONOMY_PAGES: 'true',
+    });
+    renderComponent();
+    const menuButton = await screen.findByTestId('subsection-card-header__menu-button');
+    fireEvent.click(menuButton);
+
+    const manageTagsMenuItem = await screen.findByText(messages.menuManageTags.defaultMessage);
+    fireEvent.click(manageTagsMenuItem);
+
+    // Check if the drawer is open
+    expect(screen.getAllByText('Manage tags').length).toBe(2);
+  });
+
+  it('calls onClickEdit when the button is clicked', async () => {
+    const { findByTestId } = renderComponent();
+
+    const editButton = await findByTestId('subsection-edit-button');
+    await act(async () => fireEvent.click(editButton));
+    expect(onClickEditMock).toHaveBeenCalled();
+  });
+
+  it('check is field visible when isFormOpen is true', async () => {
+    const { findByTestId, queryByTestId } = renderComponent({
+      ...cardHeaderProps,
+      isFormOpen: true,
+    });
+
+    expect(await findByTestId('subsection-edit-field')).toBeInTheDocument();
+    waitFor(() => {
+      expect(queryByTestId('subsection-card-header__expanded-btn')).not.toBeInTheDocument();
+      expect(queryByTestId('edit-button')).not.toBeInTheDocument();
+    });
+  });
+
+  it('check is field disabled when isDisabledEditField is true', async () => {
+    const { findByTestId } = renderComponent({
+      ...cardHeaderProps,
+      isFormOpen: true,
+      isDisabledEditField: true,
+    });
+
+    expect(await findByTestId('subsection-edit-field')).toBeDisabled();
+  });
+
+  it('calls onClickDelete when item is clicked', async () => {
+    const { findByText, findByTestId } = renderComponent();
+
+    const menuButton = await findByTestId('subsection-card-header__menu-button');
+    await act(async () => fireEvent.click(menuButton));
+    const deleteMenuItem = await findByText(messages.menuDelete.defaultMessage);
+    await act(async () => fireEvent.click(deleteMenuItem));
+    expect(onClickDeleteMock).toHaveBeenCalledTimes(1);
+  });
+
+  it('calls onClickDuplicate when item is clicked', async () => {
+    const { findByText, findByTestId } = renderComponent();
+
+    const menuButton = await findByTestId('subsection-card-header__menu-button');
+    fireEvent.click(menuButton);
+
+    const duplicateMenuItem = await findByText(messages.menuDuplicate.defaultMessage);
+    fireEvent.click(duplicateMenuItem);
+    await act(async () => fireEvent.click(duplicateMenuItem));
+    expect(onClickDuplicateMock).toHaveBeenCalled();
+  });
+
+  it('check if proctoringExamConfigurationLink is visible', async () => {
+    const { findByText, findByTestId } = renderComponent({
+      ...cardHeaderProps,
+      proctoringExamConfigurationLink: 'proctoringlink',
+      isSequential: true,
+    });
+
+    const menuButton = await findByTestId('subsection-card-header__menu-button');
+    await act(async () => fireEvent.click(menuButton));
+
+    const element = await findByText(messages.menuProctoringLinkText.defaultMessage);
+    expect(element).toBeInTheDocument();
+    expect(element.getAttribute('href')).toBe(`${getConfig().STUDIO_BASE_URL}/proctoringlink`);
+  });
+
+  it('check if proctoringExamConfigurationLink is absolute', async () => {
+    const { findByText, findByTestId } = renderComponent({
+      ...cardHeaderProps,
+      proctoringExamConfigurationLink: 'http://localhost:9000/proctoringlink',
+      isSequential: true,
+    });
+
+    const menuButton = await findByTestId('subsection-card-header__menu-button');
+    await act(async () => fireEvent.click(menuButton));
+
+    const element = await findByText(messages.menuProctoringLinkText.defaultMessage);
+    expect(element).toBeInTheDocument();
+    expect(element.getAttribute('href')).toBe('http://localhost:9000/proctoringlink');
+  });
+
+  it('check if discussion enabled badge is visible', async () => {
+    const { queryByText } = renderComponent({
+      ...cardHeaderProps,
+      isVertical: true,
+      discussionEnabled: true,
+      discussionsSettings: {
+        providerType: 'openedx',
+        enableGradedUnits: true,
+      },
+      parentInfo: {
+        isTimeLimited: false,
+        graded: false,
+      },
+    });
+
+    expect(queryByText(messages.discussionEnabledBadgeText.defaultMessage)).toBeInTheDocument();
+  });
+
+  it('should render tag count if is not zero and the waffle flag is enabled', async () => {
+    setConfig({
+      ...getConfig(),
+      ENABLE_TAGGING_TAXONOMY_PAGES: 'true',
+    });
+    mockGetTagsCount.mockResolvedValue({ 12345: 17 });
+    renderComponent();
+    expect(await screen.findByText('17')).toBeInTheDocument();
+  });
+
+  it('shouldn render tag count if the waffle flag is disabled', async () => {
+    setConfig({
+      ...getConfig(),
+      ENABLE_TAGGING_TAXONOMY_PAGES: 'false',
+    });
+    mockGetTagsCount.mockResolvedValue({ 12345: 17 });
+    renderComponent();
+    expect(screen.queryByText('17')).not.toBeInTheDocument();
+  });
+
+  it('should not render tag count if is zero', () => {
+    setConfig({
+      ...getConfig(),
+      ENABLE_TAGGING_TAXONOMY_PAGES: 'true',
+    });
+    mockGetTagsCount.mockResolvedValue({ 12345: 0 });
+    renderComponent();
+    expect(screen.queryByText('0')).not.toBeInTheDocument();
+  });
+});
diff --git a/src/course-outline/card-header/CardStatus.jsx b/src/course-outline/card-header/CardStatus.jsx
new file mode 100644
index 0000000000..b5dc3560b9
--- /dev/null
+++ b/src/course-outline/card-header/CardStatus.jsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import classNames from 'classnames';
+import { ITEM_BADGE_STATUS } from '../constants';
+import { getItemStatusBadgeContent } from '../utils';
+import messages from './messages';
+import StatusBadge from './StatusBadge';
+
+const CardStatus = ({
+  status,
+  showDiscussionsEnabledBadge,
+}) => {
+  const intl = useIntl();
+  const { badgeTitle, badgeIcon } = getItemStatusBadgeContent(status, messages, intl);
+
+  return (
+    <>
+      {showDiscussionsEnabledBadge && (
+        <StatusBadge
+          text={intl.formatMessage(messages.discussionEnabledBadgeText)}
+        />
+      )}
+      {badgeTitle && (
+        <StatusBadge
+          text={badgeTitle}
+          icon={badgeIcon}
+          iconClassName={classNames({ 'text-success-500': status === ITEM_BADGE_STATUS.live })}
+        />
+      )}
+    </>
+  );
+};
+
+CardStatus.propTypes = {
+  status: PropTypes.string.isRequired,
+  showDiscussionsEnabledBadge: PropTypes.bool.isRequired,
+};
+
+export default CardStatus;
diff --git a/src/course-outline/card-header/StatusBadge.jsx b/src/course-outline/card-header/StatusBadge.jsx
new file mode 100644
index 0000000000..59c7d81e8e
--- /dev/null
+++ b/src/course-outline/card-header/StatusBadge.jsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Icon } from '@openedx/paragon';
+
+const StatusBadge = ({
+  text,
+  icon,
+  iconClassName,
+}) => {
+  if (text) {
+    return (
+      <div
+        className="px-2 py-1 mr-2 rounded bg-white align-self-center align-items-center d-flex border border-light-300"
+        role="status"
+      >
+        {icon && (
+          <Icon
+            src={icon}
+            size="sm"
+            className={iconClassName}
+          />
+        )}
+        <span className="small ml-1">{text}</span>
+      </div>
+    );
+  }
+  return null;
+};
+
+StatusBadge.defaultProps = {
+  text: '',
+  icon: '',
+  iconClassName: '',
+};
+
+StatusBadge.propTypes = {
+  text: PropTypes.string,
+  icon: PropTypes.func,
+  iconClassName: PropTypes.string,
+};
+
+export default StatusBadge;
diff --git a/src/course-outline/card-header/TitleButton.jsx b/src/course-outline/card-header/TitleButton.jsx
new file mode 100644
index 0000000000..82d4d83e99
--- /dev/null
+++ b/src/course-outline/card-header/TitleButton.jsx
@@ -0,0 +1,55 @@
+import PropTypes from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import {
+  Button,
+  OverlayTrigger,
+  Tooltip,
+  Truncate,
+} from '@openedx/paragon';
+import {
+  ArrowDropDown as ArrowDownIcon,
+  ArrowRight as ArrowRightIcon,
+} from '@openedx/paragon/icons';
+import messages from './messages';
+
+const TitleButton = ({
+  title,
+  isExpanded,
+  onTitleClick,
+  namePrefix,
+}) => {
+  const intl = useIntl();
+  const titleTooltipMessage = intl.formatMessage(messages.expandTooltip);
+
+  return (
+    <OverlayTrigger
+      placement="bottom"
+      overlay={(
+        <Tooltip
+          id={`${title}-${titleTooltipMessage}`}
+        >
+          {titleTooltipMessage}
+        </Tooltip>
+      )}
+    >
+      <Button
+        iconBefore={isExpanded ? ArrowDownIcon : ArrowRightIcon}
+        variant="tertiary"
+        data-testid={`${namePrefix}-card-header__expanded-btn`}
+        className="item-card-header__title-btn"
+        onClick={onTitleClick}
+      >
+        <Truncate lines={1} className={`${namePrefix}-card-title mb-0`}>{title}</Truncate>
+      </Button>
+    </OverlayTrigger>
+  );
+};
+
+TitleButton.propTypes = {
+  title: PropTypes.string.isRequired,
+  isExpanded: PropTypes.bool.isRequired,
+  onTitleClick: PropTypes.func.isRequired,
+  namePrefix: PropTypes.string.isRequired,
+};
+
+export default TitleButton;
diff --git a/src/course-outline/card-header/TitleLink.jsx b/src/course-outline/card-header/TitleLink.jsx
new file mode 100644
index 0000000000..32e68851f2
--- /dev/null
+++ b/src/course-outline/card-header/TitleLink.jsx
@@ -0,0 +1,27 @@
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+import { Button, Truncate } from '@openedx/paragon';
+
+const TitleLink = ({
+  title,
+  titleLink,
+  namePrefix,
+}) => (
+  <Button
+    as={Link}
+    variant="tertiary"
+    data-testid={`${namePrefix}-card-header__title-link`}
+    className="item-card-header__title-btn"
+    to={titleLink}
+  >
+    <Truncate lines={1} className={`${namePrefix}-card-title mb-0`}>{title}</Truncate>
+  </Button>
+);
+
+TitleLink.propTypes = {
+  title: PropTypes.string.isRequired,
+  titleLink: PropTypes.string.isRequired,
+  namePrefix: PropTypes.string.isRequired,
+};
+
+export default TitleLink;
diff --git a/src/course-outline/card-header/messages.js b/src/course-outline/card-header/messages.js
new file mode 100644
index 0000000000..0aeb34b20e
--- /dev/null
+++ b/src/course-outline/card-header/messages.js
@@ -0,0 +1,82 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  expandTooltip: {
+    id: 'course-authoring.course-outline.card.expandTooltip',
+    defaultMessage: 'Collapse/Expand this card',
+  },
+  statusBadgeLive: {
+    id: 'course-authoring.course-outline.card.status-badge.live',
+    defaultMessage: 'Live',
+  },
+  statusBadgeGated: {
+    id: 'course-authoring.course-outline.card.status-badge.gated',
+    defaultMessage: 'Gated',
+  },
+  statusBadgePublishedNotLive: {
+    id: 'course-authoring.course-outline.card.status-badge.published-not-live',
+    defaultMessage: 'Published not live',
+  },
+  statusBadgeStaffOnly: {
+    id: 'course-authoring.course-outline.card.status-badge.staff-only',
+    defaultMessage: 'Staff only',
+  },
+  statusBadgeDraft: {
+    id: 'course-authoring.course-outline.card.status-badge.draft',
+    defaultMessage: 'Draft',
+  },
+  statusBadgeUnpublishedChanges: {
+    id: 'course-authoring.course-outline.card.status-badge.draft-unpublished-changes',
+    defaultMessage: 'Draft (Unpublished changes)',
+  },
+  altButtonEdit: {
+    id: 'course-authoring.course-outline.card.button.edit.alt',
+    defaultMessage: 'Edit',
+  },
+  menuPublish: {
+    id: 'course-authoring.course-outline.card.menu.publish',
+    defaultMessage: 'Publish',
+  },
+  menuConfigure: {
+    id: 'course-authoring.course-outline.card.menu.configure',
+    defaultMessage: 'Configure',
+  },
+  menuDuplicate: {
+    id: 'course-authoring.course-outline.card.menu.duplicate',
+    defaultMessage: 'Duplicate',
+  },
+  menuMoveUp: {
+    id: 'course-authoring.course-outline.card.menu.moveup',
+    defaultMessage: 'Move up',
+  },
+  menuMoveDown: {
+    id: 'course-authoring.course-outline.card.menu.movedown',
+    defaultMessage: 'Move down',
+  },
+  menuDelete: {
+    id: 'course-authoring.course-outline.card.menu.delete',
+    defaultMessage: 'Delete',
+  },
+  menuCopy: {
+    id: 'course-authoring.course-outline.card.menu.copy',
+    defaultMessage: 'Copy to clipboard',
+  },
+  menuProctoringLinkText: {
+    id: 'course-authoring.course-outline.card.menu.proctoring-settings',
+    defaultMessage: 'Proctoring settings',
+  },
+  proctoringLinkTooltip: {
+    id: 'course-authoring.course-outline.card.menu.proctoring-settings-tooltip',
+    defaultMessage: 'Proctoring settings',
+  },
+  discussionEnabledBadgeText: {
+    id: 'course-authoring.course-outline.card.badge.discussionEnabled',
+    defaultMessage: 'Discussions enabled',
+  },
+  menuManageTags: {
+    id: 'course-authoring.course-outline.card.menu.manageTags',
+    defaultMessage: 'Manage tags',
+  },
+});
+
+export default messages;
diff --git a/src/course-outline/constants.js b/src/course-outline/constants.js
new file mode 100644
index 0000000000..4430694a78
--- /dev/null
+++ b/src/course-outline/constants.js
@@ -0,0 +1,90 @@
+export const ITEM_BADGE_STATUS = /** @type {const} */ ({
+  live: 'live',
+  gated: 'gated',
+  publishedNotLive: 'published_not_live',
+  unpublishedChanges: 'unpublished_changes',
+  staffOnly: 'staff_only',
+  draft: 'draft',
+  unscheduled: 'unscheduled',
+  needs_attention: 'needs_attention',
+});
+
+export const HIGHLIGHTS_FIELD_MAX_LENGTH = 250;
+
+export const CHECKLIST_FILTERS = /** @type {const} */ ({
+  ALL: 'ALL',
+  SELF_PACED: 'SELF_PACED',
+  INSTRUCTOR_PACED: 'INSTRUCTOR_PACED',
+});
+
+export const COURSE_BLOCK_NAMES = /** @type {const} */ ({
+  chapter: { id: 'chapter', name: 'Section' },
+  sequential: { id: 'sequential', name: 'Subsection' },
+  vertical: { id: 'vertical', name: 'Unit' },
+});
+
+export const LAUNCH_CHECKLIST = /** @type {const} */ ({
+  data: [
+    {
+      id: 'welcomeMessage',
+      pacingTypeFilter: CHECKLIST_FILTERS.ALL,
+    },
+    {
+      id: 'gradingPolicy',
+      pacingTypeFilter: CHECKLIST_FILTERS.ALL,
+    },
+    {
+      id: 'certificate',
+      pacingTypeFilter: CHECKLIST_FILTERS.ALL,
+    },
+    {
+      id: 'courseDates',
+      pacingTypeFilter: CHECKLIST_FILTERS.ALL,
+    },
+    {
+      id: 'assignmentDeadlines',
+      pacingTypeFilter: CHECKLIST_FILTERS.INSTRUCTOR_PACED,
+    },
+    {
+      id: 'proctoringEmail',
+      pacingTypeFilter: CHECKLIST_FILTERS.ALL,
+    },
+  ],
+});
+
+export const BEST_PRACTICES_CHECKLIST = /** @type {const} */ ({
+  data: [
+    {
+      id: 'videoDuration',
+      pacingTypeFilter: CHECKLIST_FILTERS.ALL,
+    },
+    {
+      id: 'mobileFriendlyVideo',
+      pacingTypeFilter: CHECKLIST_FILTERS.ALL,
+    },
+    {
+      id: 'diverseSequences',
+      pacingTypeFilter: CHECKLIST_FILTERS.ALL,
+    },
+    {
+      id: 'weeklyHighlights',
+      pacingTypeFilter: CHECKLIST_FILTERS.SELF_PACED,
+    },
+    {
+      id: 'unitDepth',
+      pacingTypeFilter: CHECKLIST_FILTERS.ALL,
+    },
+  ],
+});
+
+export const VIDEO_SHARING_OPTIONS = /** @type {const} */ ({
+  perVideo: 'per-video',
+  allOn: 'all-on',
+  allOff: 'all-off',
+});
+
+export const API_ERROR_TYPES = /** @type {const} */ ({
+  networkError: 'networkError',
+  serverError: 'serverError',
+  unknown: 'unknown',
+});
diff --git a/src/course-outline/data/api.js b/src/course-outline/data/api.js
new file mode 100644
index 0000000000..fc61f3c117
--- /dev/null
+++ b/src/course-outline/data/api.js
@@ -0,0 +1,492 @@
+// @ts-check
+import { camelCaseObject, getConfig } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+
+const getApiBaseUrl = () => getConfig().STUDIO_BASE_URL;
+
+export const getCourseOutlineIndexApiUrl = (courseId) => `${getApiBaseUrl()}/api/contentstore/v1/course_index/${courseId}`;
+
+export const getCourseBestPracticesApiUrl = ({
+  courseId,
+  excludeGraded,
+  all,
+}) => `${getApiBaseUrl()}/api/courses/v1/quality/${courseId}/?exclude_graded=${excludeGraded}&all=${all}`;
+
+export const getCourseLaunchApiUrl = ({
+  courseId,
+  gradedOnly,
+  validateOras,
+  all,
+}) => `${getApiBaseUrl()}/api/courses/v1/validation/${courseId}/?graded_only=${gradedOnly}&validate_oras=${validateOras}&all=${all}`;
+
+export const getCourseBlockApiUrl = (courseId) => {
+  const formattedCourseId = courseId.split('course-v1:')[1];
+  return `${getApiBaseUrl()}/xblock/block-v1:${formattedCourseId}+type@course+block@course`;
+};
+
+export const getCourseReindexApiUrl = (reindexLink) => `${getApiBaseUrl()}${reindexLink}`;
+export const getXBlockBaseApiUrl = () => `${getApiBaseUrl()}/xblock/`;
+export const getCourseItemApiUrl = (itemId) => `${getXBlockBaseApiUrl()}${itemId}`;
+export const getXBlockApiUrl = (blockId) => `${getXBlockBaseApiUrl()}outline/${blockId}`;
+export const getClipboardUrl = () => `${getApiBaseUrl()}/api/content-staging/v1/clipboard/`;
+export const exportTags = (courseId) => `${getApiBaseUrl()}/api/content_tagging/v1/object_tags/${courseId}/export/`;
+
+/**
+ * @typedef {Object} courseOutline
+ * @property {string} courseReleaseDate
+ * @property {Object} courseStructure
+ * @property {Object} deprecatedBlocksInfo
+ * @property {string} discussionsIncontextFeedbackUrl
+ * @property {string} discussionsIncontextLearnmoreUrl
+ * @property {Object} initialState
+ * @property {Object} initialUserClipboard
+ * @property {string} languageCode
+ * @property {string} lmsLink
+ * @property {string} mfeProctoredExamSettingsUrl
+ * @property {string} notificationDismissUrl
+ * @property {string[]} proctoringErrors
+ * @property {string} reindexLink
+ * @property {null} rerunNotificationId
+ */
+
+/**
+ * Get course outline index.
+ * @param {string} courseId
+ * @returns {Promise<courseOutline>}
+ */
+export async function getCourseOutlineIndex(courseId) {
+  const { data } = await getAuthenticatedHttpClient()
+    .get(getCourseOutlineIndexApiUrl(courseId));
+
+  return camelCaseObject(data);
+}
+
+/**
+ * Get course best practices.
+ * @param {{courseId: string, excludeGraded: boolean, all: boolean}} options
+ * @returns {Promise<{isSelfPaced: boolean, sections: any, subsection: any, units: any, videos: any }>}
+ */
+export async function getCourseBestPractices({
+  courseId,
+  excludeGraded,
+  all,
+}) {
+  const { data } = await getAuthenticatedHttpClient()
+    .get(getCourseBestPracticesApiUrl({ courseId, excludeGraded, all }));
+
+  return camelCaseObject(data);
+}
+
+/** @typedef {object} courseLaunchData
+ * @property {boolean} isSelfPaced
+ * @property {object} dates
+ * @property {object} assignments
+ * @property {object} grades
+ * @property {number} grades.sum_of_weights
+ * @property {object} certificates
+ * @property {object} updates
+ * @property {object} proctoring
+ */
+
+/**
+ * Get course launch.
+ * @param {{courseId: string, gradedOnly: boolean, validateOras: boolean, all: boolean}} options
+ * @returns {Promise<courseLaunchData>}
+ */
+export async function getCourseLaunch({
+  courseId,
+  gradedOnly,
+  validateOras,
+  all,
+}) {
+  const { data } = await getAuthenticatedHttpClient()
+    .get(getCourseLaunchApiUrl({
+      courseId, gradedOnly, validateOras, all,
+    }));
+
+  return camelCaseObject(data);
+}
+
+/**
+ * Enable course highlights emails
+ * @param {string} courseId
+ * @returns {Promise<Object>}
+ */
+export async function enableCourseHighlightsEmails(courseId) {
+  const { data } = await getAuthenticatedHttpClient()
+    .post(getCourseBlockApiUrl(courseId), {
+      publish: 'republish',
+      metadata: {
+        highlights_enabled_for_messaging: true,
+      },
+    });
+
+  return data;
+}
+
+/**
+ * Restart reindex course
+ * @param {string} reindexLink
+ * @returns {Promise<Object>}
+ */
+export async function restartIndexingOnCourse(reindexLink) {
+  const { data } = await getAuthenticatedHttpClient()
+    .get(getCourseReindexApiUrl(reindexLink));
+
+  return camelCaseObject(data);
+}
+
+/**
+ * @typedef {Object} section
+ * @property {string} id
+ * @property {string} displayName
+ * @property {string} category
+ * @property {boolean} hasChildren
+ * @property {string} editedOn
+ * @property {boolean} published
+ * @property {string} publishedOn
+ * @property {string} studioUrl
+ * @property {boolean} releasedToStudents
+ * @property {string} releaseDate
+ * @property {string} visibilityState
+ * @property {boolean} hasExplicitStaffLock
+ * @property {string} start
+ * @property {boolean} graded
+ * @property {string} dueDate
+ * @property {null} due
+ * @property {null} relativeWeeksDue
+ * @property {null} format
+ * @property {string[]} courseGraders
+ * @property {boolean} hasChanges
+ * @property {object} actions
+ * @property {null} explanatoryMessage
+ * @property {object[]} userPartitions
+ * @property {string} showCorrectness
+ * @property {string[]} highlights
+ * @property {boolean} highlightsEnabled
+ * @property {boolean} highlightsPreviewOnly
+ * @property {string} highlightsDocUrl
+ * @property {object} childInfo
+ * @property {boolean} ancestorHasStaffLock
+ * @property {boolean} staffOnlyMessage
+ * @property {boolean} hasPartitionGroupComponents
+ * @property {object} userPartitionInfo
+ * @property {boolean} enableCopyPasteUnits
+ */
+
+/**
+ * Get course section
+ * @param {string} itemId
+ * @returns {Promise<section>}
+ */
+export async function getCourseItem(itemId) {
+  const { data } = await getAuthenticatedHttpClient()
+    .get(getXBlockApiUrl(itemId));
+  return camelCaseObject(data);
+}
+
+/**
+ * Update course section highlights
+ * @param {string} sectionId
+ * @param {Array<string>} highlights
+ * @returns {Promise<Object>}
+ */
+export async function updateCourseSectionHighlights(sectionId, highlights) {
+  const { data } = await getAuthenticatedHttpClient()
+    .post(getCourseItemApiUrl(sectionId), {
+      publish: 'republish',
+      metadata: {
+        highlights,
+      },
+    });
+
+  return data;
+}
+
+/**
+ * Publish course section
+ * @param {string} sectionId
+ * @returns {Promise<Object>}
+ */
+export async function publishCourseSection(sectionId) {
+  const { data } = await getAuthenticatedHttpClient()
+    .post(getCourseItemApiUrl(sectionId), {
+      publish: 'make_public',
+    });
+
+  return data;
+}
+
+/**
+ * Configure course section
+ * @param {string} sectionId
+ * @param {boolean} isVisibleToStaffOnly
+ * @param {string} startDatetime
+ * @returns {Promise<Object>}
+ */
+export async function configureCourseSection(sectionId, isVisibleToStaffOnly, startDatetime) {
+  const { data } = await getAuthenticatedHttpClient()
+    .post(getCourseItemApiUrl(sectionId), {
+      publish: 'republish',
+      metadata: {
+        // The backend expects metadata.visible_to_staff_only to either true or null
+        visible_to_staff_only: isVisibleToStaffOnly ? true : null,
+        start: startDatetime,
+      },
+    });
+
+  return data;
+}
+
+/**
+ * Configure course section
+ * @param {string} itemId
+ * @param {string} isVisibleToStaffOnly
+ * @param {string} releaseDate
+ * @param {string} graderType
+ * @param {string} dueDate
+ * @param {boolean} isProctoredExam,
+ * @param {boolean} isOnboardingExam,
+ * @param {boolean} isPracticeExam,
+ * @param {string} examReviewRules,
+ * @param {boolean} isTimeLimited
+ * @param {number} defaultTimeLimitMin
+ * @param {string} hideAfterDue
+ * @param {string} showCorrectness
+ * @param {boolean} isPrereq,
+ * @param {string} prereqUsageKey,
+ * @param {number} prereqMinScore,
+ * @param {number} prereqMinCompletion,
+ * @returns {Promise<Object>}
+ */
+export async function configureCourseSubsection(
+  itemId,
+  isVisibleToStaffOnly,
+  releaseDate,
+  graderType,
+  dueDate,
+  isTimeLimited,
+  isProctoredExam,
+  isOnboardingExam,
+  isPracticeExam,
+  examReviewRules,
+  defaultTimeLimitMin,
+  hideAfterDue,
+  showCorrectness,
+  isPrereq,
+  prereqUsageKey,
+  prereqMinScore,
+  prereqMinCompletion,
+) {
+  const { data } = await getAuthenticatedHttpClient()
+    .post(getCourseItemApiUrl(itemId), {
+      publish: 'republish',
+      graderType,
+      isPrereq,
+      prereqUsageKey,
+      prereqMinScore,
+      prereqMinCompletion,
+      metadata: {
+        // The backend expects metadata.visible_to_staff_only to either true or null
+        visible_to_staff_only: isVisibleToStaffOnly ? true : null,
+        due: dueDate,
+        hide_after_due: hideAfterDue,
+        show_correctness: showCorrectness,
+        is_practice_exam: isPracticeExam,
+        is_time_limited: isTimeLimited,
+        is_proctored_enabled: isProctoredExam || isPracticeExam || isOnboardingExam,
+        exam_review_rules: examReviewRules,
+        default_time_limit_minutes: defaultTimeLimitMin,
+        is_onboarding_exam: isOnboardingExam,
+        start: releaseDate,
+      },
+    });
+  return data;
+}
+
+/**
+ * Configure course unit
+ * @param {string} unitId
+ * @param {boolean} isVisibleToStaffOnly
+ * @param {object} groupAccess
+ * @returns {Promise<Object>}
+ */
+export async function configureCourseUnit(unitId, isVisibleToStaffOnly, groupAccess, discussionEnabled) {
+  const { data } = await getAuthenticatedHttpClient()
+    .post(getCourseItemApiUrl(unitId), {
+      publish: 'republish',
+      metadata: {
+        // The backend expects metadata.visible_to_staff_only to either true or null
+        visible_to_staff_only: isVisibleToStaffOnly ? true : null,
+        group_access: groupAccess,
+        discussion_enabled: discussionEnabled,
+      },
+    });
+
+  return data;
+}
+
+/**
+ * Edit course section
+ * @param {string} itemId
+ * @param {string} displayName
+ * @returns {Promise<Object>}
+ */
+export async function editItemDisplayName(itemId, displayName) {
+  const { data } = await getAuthenticatedHttpClient()
+    .post(getCourseItemApiUrl(itemId), {
+      metadata: {
+        display_name: displayName,
+      },
+    });
+
+  return data;
+}
+
+/**
+ * Delete course section
+ * @param {string} itemId
+ * @returns {Promise<Object>}
+ */
+export async function deleteCourseItem(itemId) {
+  const { data } = await getAuthenticatedHttpClient()
+    .delete(getCourseItemApiUrl(itemId));
+
+  return data;
+}
+
+/**
+ * Duplicate course section
+ * @param {string} itemId
+ * @param {string} parentId
+ * @returns {Promise<Object>}
+ */
+export async function duplicateCourseItem(itemId, parentId) {
+  const { data } = await getAuthenticatedHttpClient()
+    .post(getXBlockBaseApiUrl(), {
+      duplicate_source_locator: itemId,
+      parent_locator: parentId,
+    });
+
+  return data;
+}
+
+/**
+ * Add new course item like section, subsection or unit.
+ * @param {string} parentLocator
+ * @param {string} category
+ * @param {string} displayName
+ * @returns {Promise<Object>}
+ */
+export async function addNewCourseItem(parentLocator, category, displayName) {
+  const { data } = await getAuthenticatedHttpClient()
+    .post(getXBlockBaseApiUrl(), {
+      parent_locator: parentLocator,
+      category,
+      display_name: displayName,
+    });
+
+  return data;
+}
+
+/**
+ * Set order for the list of the sections
+ * @param {string} courseId
+ * @param {Array<string>} children list of sections id's
+ * @returns {Promise<Object>}
+*/
+export async function setSectionOrderList(courseId, children) {
+  const { data } = await getAuthenticatedHttpClient()
+    .put(getCourseBlockApiUrl(courseId), {
+      children,
+    });
+
+  return data;
+}
+
+/**
+ * Set order for the list of the subsections
+ * @param {string} itemId Subsection or unit ID
+ * @param {Array<string>} children list of sections id's
+ * @returns {Promise<Object>}
+*/
+export async function setCourseItemOrderList(itemId, children) {
+  const { data } = await getAuthenticatedHttpClient()
+    .put(getCourseItemApiUrl(itemId), {
+      children,
+    });
+
+  return data;
+}
+
+/**
+ * Set video sharing setting
+ * @param {string} courseId
+ * @param {string} videoSharingOption
+ * @returns {Promise<Object>}
+*/
+export async function setVideoSharingOption(courseId, videoSharingOption) {
+  const { data } = await getAuthenticatedHttpClient()
+    .post(getCourseBlockApiUrl(courseId), {
+      metadata: {
+        video_sharing_options: videoSharingOption,
+      },
+    });
+
+  return data;
+}
+
+/**
+ * Paste block to clipboard
+ * @param {string} parentLocator
+ * @returns {Promise<Object>}
+*/
+export async function pasteBlock(parentLocator) {
+  const { data } = await getAuthenticatedHttpClient()
+    .post(getXBlockBaseApiUrl(), {
+      parent_locator: parentLocator,
+      staged_content: 'clipboard',
+    });
+
+  return camelCaseObject(data);
+}
+
+/**
+ * Dismiss notification
+ * @param {string} url
+ * @returns void
+*/
+export async function dismissNotification(url) {
+  await getAuthenticatedHttpClient()
+    .delete(url);
+}
+
+/**
+ * Downloads the file of the exported tags
+ * @param {string} courseId The ID of the content
+ * @returns void
+ */
+export async function getTagsExportFile(courseId, courseName) {
+  // Gets exported tags and builds the blob to download CSV file.
+  // This can be done with this code:
+  // `window.location.href = exportTags(contentId);`
+  // but it is done in this way so we know when the operation ends to close the toast.
+  const response = await getAuthenticatedHttpClient().get(exportTags(courseId), {
+    responseType: 'blob',
+  });
+
+  /* istanbul ignore next */
+  if (response.status !== 200) {
+    throw response.statusText;
+  }
+
+  const blob = new Blob([response.data], { type: 'text/csv' });
+  const url = window.URL.createObjectURL(blob);
+
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = `${courseName}.csv`;
+  a.click();
+
+  window.URL.revokeObjectURL(url);
+}
diff --git a/src/course-outline/data/selectors.js b/src/course-outline/data/selectors.js
new file mode 100644
index 0000000000..6ad81c7a42
--- /dev/null
+++ b/src/course-outline/data/selectors.js
@@ -0,0 +1,13 @@
+export const getOutlineIndexData = (state) => state.courseOutline.outlineIndexData;
+export const getLoadingStatus = (state) => state.courseOutline.loadingStatus;
+export const getStatusBarData = (state) => state.courseOutline.statusBarData;
+export const getSavingStatus = (state) => state.courseOutline.savingStatus;
+export const getSectionsList = (state) => state.courseOutline.sectionsList;
+export const getCurrentItem = (state) => state.courseOutline.currentItem;
+export const getCurrentSection = (state) => state.courseOutline.currentSection;
+export const getCurrentSubsection = (state) => state.courseOutline.currentSubsection;
+export const getCourseActions = (state) => state.courseOutline.actions;
+export const getCustomRelativeDatesActiveFlag = (state) => state.courseOutline.isCustomRelativeDatesActive;
+export const getProctoredExamsFlag = (state) => state.courseOutline.enableProctoredExams;
+export const getPasteFileNotices = (state) => state.courseOutline.pasteFileNotices;
+export const getErrors = (state) => state.courseOutline.errors;
diff --git a/src/course-outline/data/slice.js b/src/course-outline/data/slice.js
new file mode 100644
index 0000000000..0bd146f95d
--- /dev/null
+++ b/src/course-outline/data/slice.js
@@ -0,0 +1,231 @@
+/* eslint-disable no-param-reassign */
+import { createSlice } from '@reduxjs/toolkit';
+
+import { VIDEO_SHARING_OPTIONS } from '../constants';
+import { RequestStatus } from '../../data/constants';
+
+const slice = createSlice({
+  name: 'courseOutline',
+  initialState: {
+    loadingStatus: {
+      outlineIndexLoadingStatus: RequestStatus.IN_PROGRESS,
+      reIndexLoadingStatus: RequestStatus.IN_PROGRESS,
+      fetchSectionLoadingStatus: RequestStatus.IN_PROGRESS,
+      courseLaunchQueryStatus: RequestStatus.IN_PROGRESS,
+    },
+    errors: {
+      outlineIndexApi: null,
+      reindexApi: null,
+      sectionLoadingApi: null,
+      courseLaunchApi: null,
+    },
+    outlineIndexData: {},
+    savingStatus: '',
+    statusBarData: {
+      courseReleaseDate: '',
+      highlightsEnabledForMessaging: false,
+      isSelfPaced: false,
+      checklist: {
+        totalCourseLaunchChecks: 0,
+        completedCourseLaunchChecks: 0,
+        totalCourseBestPracticesChecks: 0,
+        completedCourseBestPracticesChecks: 0,
+      },
+      videoSharingEnabled: false,
+      videoSharingOptions: VIDEO_SHARING_OPTIONS.perVideo,
+    },
+    sectionsList: [],
+    isCustomRelativeDatesActive: false,
+    currentSection: {},
+    currentSubsection: {},
+    currentItem: {},
+    actions: {
+      deletable: true,
+      draggable: true,
+      childAddable: true,
+      duplicable: true,
+    },
+    enableProctoredExams: false,
+    pasteFileNotices: {},
+  },
+  reducers: {
+    fetchOutlineIndexSuccess: (state, { payload }) => {
+      state.outlineIndexData = payload;
+      state.sectionsList = payload.courseStructure?.childInfo?.children || [];
+      state.isCustomRelativeDatesActive = payload.isCustomRelativeDatesActive;
+      state.enableProctoredExams = payload.courseStructure?.enableProctoredExams;
+    },
+    updateOutlineIndexLoadingStatus: (state, { payload }) => {
+      state.loadingStatus = {
+        ...state.loadingStatus,
+        outlineIndexLoadingStatus: payload.status,
+      };
+      state.errors.outlineIndexApi = payload.errors || null;
+    },
+    updateReindexLoadingStatus: (state, { payload }) => {
+      state.loadingStatus = {
+        ...state.loadingStatus,
+        reIndexLoadingStatus: payload.status,
+      };
+      state.errors.reindexApi = payload.errors || null;
+    },
+    updateFetchSectionLoadingStatus: (state, { payload }) => {
+      state.loadingStatus = {
+        ...state.loadingStatus,
+        fetchSectionLoadingStatus: payload.status,
+      };
+      state.errors.sectionLoadingApi = payload.errors || null;
+    },
+    updateCourseLaunchQueryStatus: (state, { payload }) => {
+      state.loadingStatus = {
+        ...state.loadingStatus,
+        courseLaunchQueryStatus: payload.status,
+      };
+      state.errors.courseLaunchApi = payload.errors || null;
+    },
+    dismissError: (state, { payload }) => {
+      state.errors[payload] = null;
+    },
+    updateStatusBar: (state, { payload }) => {
+      state.statusBarData = {
+        ...state.statusBarData,
+        ...payload,
+      };
+    },
+    updateCourseActions: (state, { payload }) => {
+      state.actions = {
+        ...state.actions,
+        ...payload,
+      };
+    },
+    fetchStatusBarChecklistSuccess: (state, { payload }) => {
+      state.statusBarData.checklist = {
+        ...state.statusBarData.checklist,
+        ...payload,
+      };
+    },
+    fetchStatusBarSelPacedSuccess: (state, { payload }) => {
+      state.statusBarData.isSelfPaced = payload.isSelfPaced;
+    },
+    updateSavingStatus: (state, { payload }) => {
+      state.savingStatus = payload.status;
+    },
+    updateSectionList: (state, { payload }) => {
+      state.sectionsList = state.sectionsList.map((section) => (section.id in payload ? payload[section.id] : section));
+    },
+    setCurrentItem: (state, { payload }) => {
+      state.currentItem = payload;
+    },
+    reorderSectionList: (state, { payload }) => {
+      const sectionsList = [...state.sectionsList];
+      sectionsList.sort((a, b) => payload.indexOf(a.id) - payload.indexOf(b.id));
+
+      state.sectionsList = [...sectionsList];
+    },
+    setCurrentSection: (state, { payload }) => {
+      state.currentSection = payload;
+    },
+    setCurrentSubsection: (state, { payload }) => {
+      state.currentSubsection = payload;
+    },
+    addSection: (state, { payload }) => {
+      state.sectionsList = [
+        ...state.sectionsList,
+        payload,
+      ];
+    },
+    addSubsection: (state, { payload }) => {
+      state.sectionsList = state.sectionsList.map((section) => {
+        if (section.id === payload.parentLocator) {
+          section.childInfo.children = [
+            ...section.childInfo.children,
+            payload.data,
+          ];
+        }
+        return section;
+      });
+    },
+    deleteSection: (state, { payload }) => {
+      state.sectionsList = state.sectionsList.filter(
+        ({ id }) => id !== payload.itemId,
+      );
+    },
+    deleteSubsection: (state, { payload }) => {
+      state.sectionsList = state.sectionsList.map((section) => {
+        if (section.id !== payload.sectionId) {
+          return section;
+        }
+        section.childInfo.children = section.childInfo.children.filter(
+          ({ id }) => id !== payload.itemId,
+        );
+        return section;
+      });
+    },
+    deleteUnit: (state, { payload }) => {
+      state.sectionsList = state.sectionsList.map((section) => {
+        if (section.id !== payload.sectionId) {
+          return section;
+        }
+        section.childInfo.children = section.childInfo.children.map((subsection) => {
+          if (subsection.id !== payload.subsectionId) {
+            return subsection;
+          }
+          subsection.childInfo.children = subsection.childInfo.children.filter(
+            ({ id }) => id !== payload.itemId,
+          );
+          return subsection;
+        });
+        return section;
+      });
+    },
+    duplicateSection: (state, { payload }) => {
+      state.sectionsList = state.sectionsList.reduce((result, currentValue) => {
+        if (currentValue.id === payload.id) {
+          return [...result, currentValue, payload.duplicatedItem];
+        }
+        return [...result, currentValue];
+      }, []);
+    },
+    setPasteFileNotices: (state, { payload }) => {
+      state.pasteFileNotices = payload;
+    },
+    removePasteFileNotices: (state, { payload }) => {
+      const pasteFileNotices = { ...state.pasteFileNotices };
+      payload.forEach((key) => delete pasteFileNotices[key]);
+      state.pasteFileNotices = pasteFileNotices;
+    },
+  },
+});
+
+export const {
+  addSection,
+  addSubsection,
+  fetchOutlineIndexSuccess,
+  updateOutlineIndexLoadingStatus,
+  updateReindexLoadingStatus,
+  updateStatusBar,
+  updateCourseActions,
+  fetchStatusBarChecklistSuccess,
+  fetchStatusBarSelPacedSuccess,
+  updateFetchSectionLoadingStatus,
+  updateCourseLaunchQueryStatus,
+  updateSavingStatus,
+  updateSectionList,
+  setCurrentItem,
+  setCurrentSection,
+  setCurrentSubsection,
+  deleteSection,
+  deleteSubsection,
+  deleteUnit,
+  duplicateSection,
+  reorderSectionList,
+  reorderSubsectionList,
+  reorderUnitList,
+  setPasteFileNotices,
+  removePasteFileNotices,
+  dismissError,
+} = slice.actions;
+
+export const {
+  reducer,
+} = slice;
diff --git a/src/course-outline/data/thunk.js b/src/course-outline/data/thunk.js
new file mode 100644
index 0000000000..c555fcb978
--- /dev/null
+++ b/src/course-outline/data/thunk.js
@@ -0,0 +1,681 @@
+import { RequestStatus } from '../../data/constants';
+import { updateClipboardData } from '../../generic/data/slice';
+import { NOTIFICATION_MESSAGES } from '../../constants';
+import { API_ERROR_TYPES, COURSE_BLOCK_NAMES } from '../constants';
+import {
+  hideProcessingNotification,
+  showProcessingNotification,
+} from '../../generic/processing-notification/data/slice';
+import {
+  getCourseBestPracticesChecklist,
+  getCourseLaunchChecklist,
+} from '../utils/getChecklistForStatusBar';
+import {
+  addNewCourseItem,
+  deleteCourseItem,
+  duplicateCourseItem,
+  editItemDisplayName,
+  enableCourseHighlightsEmails,
+  getCourseBestPractices,
+  getCourseLaunch,
+  getCourseOutlineIndex,
+  getCourseItem,
+  publishCourseSection,
+  configureCourseSection,
+  configureCourseSubsection,
+  configureCourseUnit,
+  restartIndexingOnCourse,
+  updateCourseSectionHighlights,
+  setSectionOrderList,
+  setVideoSharingOption,
+  setCourseItemOrderList,
+  pasteBlock,
+  dismissNotification,
+} from './api';
+import {
+  addSection,
+  addSubsection,
+  fetchOutlineIndexSuccess,
+  updateOutlineIndexLoadingStatus,
+  updateReindexLoadingStatus,
+  updateStatusBar,
+  updateCourseActions,
+  fetchStatusBarChecklistSuccess,
+  fetchStatusBarSelPacedSuccess,
+  updateSavingStatus,
+  updateSectionList,
+  updateFetchSectionLoadingStatus,
+  deleteSection,
+  deleteSubsection,
+  deleteUnit,
+  duplicateSection,
+  reorderSectionList,
+  setPasteFileNotices,
+  updateCourseLaunchQueryStatus,
+} from './slice';
+
+const getErrorDetails = (error, dismissible = true) => {
+  const errorInfo = { dismissible };
+  if (error.response?.data) {
+    const { data } = error.response;
+    if ((typeof data === 'string' && !data.includes('</html>')) || typeof data === 'object') {
+      errorInfo.data = JSON.stringify(data);
+    }
+    errorInfo.status = error.response.status;
+    errorInfo.type = API_ERROR_TYPES.serverError;
+  } else if (error.request) {
+    errorInfo.type = API_ERROR_TYPES.networkError;
+  } else {
+    errorInfo.type = API_ERROR_TYPES.unknown;
+    errorInfo.data = error.message;
+  }
+  return errorInfo;
+};
+
+export function fetchCourseOutlineIndexQuery(courseId) {
+  return async (dispatch) => {
+    dispatch(updateOutlineIndexLoadingStatus({ status: RequestStatus.IN_PROGRESS }));
+
+    try {
+      const outlineIndex = await getCourseOutlineIndex(courseId);
+      const {
+        courseReleaseDate,
+        courseStructure: {
+          highlightsEnabledForMessaging,
+          videoSharingEnabled,
+          videoSharingOptions,
+          actions,
+        },
+      } = outlineIndex;
+      dispatch(fetchOutlineIndexSuccess(outlineIndex));
+      dispatch(updateClipboardData(outlineIndex.initialUserClipboard));
+      dispatch(updateStatusBar({
+        courseReleaseDate,
+        highlightsEnabledForMessaging,
+        videoSharingOptions,
+        videoSharingEnabled,
+      }));
+      dispatch(updateCourseActions(actions));
+
+      dispatch(updateOutlineIndexLoadingStatus({ status: RequestStatus.SUCCESSFUL }));
+    } catch (error) {
+      if (error.response && error.response.status === 403) {
+        dispatch(updateOutlineIndexLoadingStatus({
+          status: RequestStatus.DENIED,
+        }));
+      } else {
+        dispatch(updateOutlineIndexLoadingStatus({
+          status: RequestStatus.FAILED,
+          errors: getErrorDetails(error, false),
+        }));
+      }
+    }
+  };
+}
+
+export function fetchCourseLaunchQuery({
+  courseId,
+  gradedOnly = true,
+  validateOras = true,
+  all = true,
+}) {
+  return async (dispatch) => {
+    dispatch(updateCourseLaunchQueryStatus({ status: RequestStatus.IN_PROGRESS }));
+    try {
+      const data = await getCourseLaunch({
+        courseId, gradedOnly, validateOras, all,
+      });
+      dispatch(fetchStatusBarSelPacedSuccess({ isSelfPaced: data.isSelfPaced }));
+      dispatch(fetchStatusBarChecklistSuccess(getCourseLaunchChecklist(data)));
+
+      dispatch(updateCourseLaunchQueryStatus({ status: RequestStatus.SUCCESSFUL }));
+    } catch (error) {
+      dispatch(updateCourseLaunchQueryStatus({
+        status: RequestStatus.FAILED,
+        errors: getErrorDetails(error),
+      }));
+    }
+  };
+}
+
+export function fetchCourseBestPracticesQuery({
+  courseId,
+  excludeGraded = true,
+  all = true,
+}) {
+  return async (dispatch) => {
+    try {
+      const data = await getCourseBestPractices({ courseId, excludeGraded, all });
+      dispatch(fetchStatusBarChecklistSuccess(getCourseBestPracticesChecklist(data)));
+
+      return true;
+    } catch (error) {
+      return false;
+    }
+  };
+}
+
+export function enableCourseHighlightsEmailsQuery(courseId) {
+  return async (dispatch) => {
+    dispatch(updateSavingStatus({ status: RequestStatus.PENDING }));
+    dispatch(showProcessingNotification(NOTIFICATION_MESSAGES.saving));
+
+    try {
+      await enableCourseHighlightsEmails(courseId);
+      dispatch(fetchCourseOutlineIndexQuery(courseId));
+
+      dispatch(updateSavingStatus({ status: RequestStatus.SUCCESSFUL }));
+      dispatch(hideProcessingNotification());
+    } catch (error) {
+      dispatch(updateSavingStatus({ status: RequestStatus.FAILED }));
+    }
+  };
+}
+
+export function setVideoSharingOptionQuery(courseId, option) {
+  return async (dispatch) => {
+    dispatch(updateSavingStatus({ status: RequestStatus.PENDING }));
+    dispatch(showProcessingNotification(NOTIFICATION_MESSAGES.saving));
+
+    try {
+      await setVideoSharingOption(courseId, option);
+      dispatch(updateStatusBar({ videoSharingOptions: option }));
+
+      dispatch(updateSavingStatus({ status: RequestStatus.SUCCESSFUL }));
+      dispatch(hideProcessingNotification());
+    } catch (error) {
+      dispatch(updateSavingStatus({ status: RequestStatus.FAILED }));
+      dispatch(hideProcessingNotification());
+    }
+  };
+}
+
+export function fetchCourseReindexQuery(courseId, reindexLink) {
+  return async (dispatch) => {
+    dispatch(updateReindexLoadingStatus({ status: RequestStatus.IN_PROGRESS }));
+
+    try {
+      await restartIndexingOnCourse(reindexLink);
+      dispatch(updateReindexLoadingStatus({ status: RequestStatus.SUCCESSFUL }));
+    } catch (error) {
+      dispatch(updateReindexLoadingStatus({
+        status: RequestStatus.FAILED,
+        errors: getErrorDetails(error),
+      }));
+    }
+  };
+}
+
+export function fetchCourseSectionQuery(sectionIds, shouldScroll = false) {
+  return async (dispatch) => {
+    dispatch(updateFetchSectionLoadingStatus({ status: RequestStatus.IN_PROGRESS }));
+    try {
+      const sections = {};
+      const results = await Promise.all(sectionIds.map((sectionId) => getCourseItem(sectionId)));
+      results.forEach((data) => {
+        // eslint-disable-next-line no-param-reassign
+        data.shouldScroll = shouldScroll;
+        sections[data.id] = data;
+      });
+      dispatch(updateSectionList(sections));
+      dispatch(updateFetchSectionLoadingStatus({ status: RequestStatus.SUCCESSFUL }));
+    } catch (error) {
+      dispatch(updateFetchSectionLoadingStatus({
+        status: RequestStatus.FAILED,
+        errors: getErrorDetails(error),
+      }));
+    }
+  };
+}
+
+export function updateCourseSectionHighlightsQuery(sectionId, highlights) {
+  return async (dispatch) => {
+    dispatch(updateSavingStatus({ status: RequestStatus.PENDING }));
+    dispatch(showProcessingNotification(NOTIFICATION_MESSAGES.saving));
+
+    try {
+      await updateCourseSectionHighlights(sectionId, highlights).then(async (result) => {
+        if (result) {
+          await dispatch(fetchCourseSectionQuery([sectionId]));
+          dispatch(updateSavingStatus({ status: RequestStatus.SUCCESSFUL }));
+          dispatch(hideProcessingNotification());
+        }
+      });
+    } catch (error) {
+      dispatch(hideProcessingNotification());
+      dispatch(updateSavingStatus({ status: RequestStatus.FAILED }));
+    }
+  };
+}
+
+export function publishCourseItemQuery(itemId, sectionId) {
+  return async (dispatch) => {
+    dispatch(updateSavingStatus({ status: RequestStatus.PENDING }));
+    dispatch(showProcessingNotification(NOTIFICATION_MESSAGES.saving));
+
+    try {
+      await publishCourseSection(itemId).then(async (result) => {
+        if (result) {
+          await dispatch(fetchCourseSectionQuery([sectionId]));
+          dispatch(hideProcessingNotification());
+          dispatch(updateSavingStatus({ status: RequestStatus.SUCCESSFUL }));
+        }
+      });
+    } catch (error) {
+      dispatch(hideProcessingNotification());
+      dispatch(updateSavingStatus({ status: RequestStatus.FAILED }));
+    }
+  };
+}
+
+export function configureCourseItemQuery(sectionId, configureFn) {
+  return async (dispatch) => {
+    dispatch(updateSavingStatus({ status: RequestStatus.PENDING }));
+    dispatch(showProcessingNotification(NOTIFICATION_MESSAGES.saving));
+
+    try {
+      await configureFn().then(async (result) => {
+        if (result) {
+          await dispatch(fetchCourseSectionQuery([sectionId]));
+          dispatch(hideProcessingNotification());
+          dispatch(updateSavingStatus({ status: RequestStatus.SUCCESSFUL }));
+        }
+      });
+    } catch (error) {
+      dispatch(hideProcessingNotification());
+      dispatch(updateSavingStatus({ status: RequestStatus.FAILED }));
+    }
+  };
+}
+
+export function configureCourseSectionQuery(sectionId, isVisibleToStaffOnly, startDatetime) {
+  return async (dispatch) => {
+    dispatch(configureCourseItemQuery(
+      sectionId,
+      async () => configureCourseSection(sectionId, isVisibleToStaffOnly, startDatetime),
+    ));
+  };
+}
+
+export function configureCourseSubsectionQuery(
+  itemId,
+  sectionId,
+  isVisibleToStaffOnly,
+  releaseDate,
+  graderType,
+  dueDate,
+  isTimeLimited,
+  isProctoredExam,
+  isOnboardingExam,
+  isPracticeExam,
+  examReviewRules,
+  defaultTimeLimitMin,
+  hideAfterDue,
+  showCorrectness,
+  isPrereq,
+  prereqUsageKey,
+  prereqMinScore,
+  prereqMinCompletion,
+) {
+  return async (dispatch) => {
+    dispatch(configureCourseItemQuery(
+      sectionId,
+      async () => configureCourseSubsection(
+        itemId,
+        isVisibleToStaffOnly,
+        releaseDate,
+        graderType,
+        dueDate,
+        isTimeLimited,
+        isProctoredExam,
+        isOnboardingExam,
+        isPracticeExam,
+        examReviewRules,
+        defaultTimeLimitMin,
+        hideAfterDue,
+        showCorrectness,
+        isPrereq,
+        prereqUsageKey,
+        prereqMinScore,
+        prereqMinCompletion,
+      ),
+    ));
+  };
+}
+
+export function configureCourseUnitQuery(itemId, sectionId, isVisibleToStaffOnly, groupAccess, discussionEnabled) {
+  return async (dispatch) => {
+    dispatch(configureCourseItemQuery(
+      sectionId,
+      async () => configureCourseUnit(itemId, isVisibleToStaffOnly, groupAccess, discussionEnabled),
+    ));
+  };
+}
+
+export function editCourseItemQuery(itemId, sectionId, displayName) {
+  return async (dispatch) => {
+    dispatch(updateSavingStatus({ status: RequestStatus.PENDING }));
+    dispatch(showProcessingNotification(NOTIFICATION_MESSAGES.saving));
+
+    try {
+      await editItemDisplayName(itemId, displayName).then(async (result) => {
+        if (result) {
+          await dispatch(fetchCourseSectionQuery([sectionId]));
+          dispatch(hideProcessingNotification());
+          dispatch(updateSavingStatus({ status: RequestStatus.SUCCESSFUL }));
+        }
+      });
+    } catch (error) {
+      dispatch(hideProcessingNotification());
+      dispatch(updateSavingStatus({ status: RequestStatus.FAILED }));
+    }
+  };
+}
+
+/**
+ * Generic function to delete course item, see below wrapper funcs for specific implementations.
+ * @param {string} itemId
+ * @param {() => {}} deleteItemFn
+ * @returns {}
+ */
+function deleteCourseItemQuery(itemId, deleteItemFn) {
+  return async (dispatch) => {
+    dispatch(updateSavingStatus({ status: RequestStatus.PENDING }));
+    dispatch(showProcessingNotification(NOTIFICATION_MESSAGES.deleting));
+
+    try {
+      await deleteCourseItem(itemId);
+      dispatch(deleteItemFn());
+      dispatch(hideProcessingNotification());
+      dispatch(updateSavingStatus({ status: RequestStatus.SUCCESSFUL }));
+    } catch (error) {
+      dispatch(hideProcessingNotification());
+      dispatch(updateSavingStatus({ status: RequestStatus.FAILED }));
+    }
+  };
+}
+
+export function deleteCourseSectionQuery(sectionId) {
+  return async (dispatch) => {
+    dispatch(deleteCourseItemQuery(
+      sectionId,
+      () => deleteSection({ itemId: sectionId }),
+    ));
+  };
+}
+
+export function deleteCourseSubsectionQuery(subsectionId, sectionId) {
+  return async (dispatch) => {
+    dispatch(deleteCourseItemQuery(
+      subsectionId,
+      () => deleteSubsection({ itemId: subsectionId, sectionId }),
+    ));
+  };
+}
+
+export function deleteCourseUnitQuery(unitId, subsectionId, sectionId) {
+  return async (dispatch) => {
+    dispatch(deleteCourseItemQuery(
+      unitId,
+      () => deleteUnit({ itemId: unitId, subsectionId, sectionId }),
+    ));
+  };
+}
+
+/**
+ * Generic function to duplicate any course item. See wrapper functions below for specific implementations.
+ * @param {string} itemId
+ * @param {string} parentLocator
+ * @param {(locator) => Promise<any>} duplicateFn
+ * @returns {}
+ */
+function duplicateCourseItemQuery(itemId, parentLocator, duplicateFn) {
+  return async (dispatch) => {
+    dispatch(updateSavingStatus({ status: RequestStatus.PENDING }));
+    dispatch(showProcessingNotification(NOTIFICATION_MESSAGES.duplicating));
+
+    try {
+      await duplicateCourseItem(itemId, parentLocator).then(async (result) => {
+        if (result) {
+          await duplicateFn(result.locator);
+          dispatch(hideProcessingNotification());
+          dispatch(updateSavingStatus({ status: RequestStatus.SUCCESSFUL }));
+        }
+      });
+    } catch (error) {
+      dispatch(hideProcessingNotification());
+      dispatch(updateSavingStatus({ status: RequestStatus.FAILED }));
+    }
+  };
+}
+
+export function duplicateSectionQuery(sectionId, courseBlockId) {
+  return async (dispatch) => {
+    dispatch(duplicateCourseItemQuery(
+      sectionId,
+      courseBlockId,
+      async (locator) => {
+        const duplicatedItem = await getCourseItem(locator);
+        // Page should scroll to newly duplicated item.
+        duplicatedItem.shouldScroll = true;
+        dispatch(duplicateSection({ id: sectionId, duplicatedItem }));
+      },
+    ));
+  };
+}
+
+export function duplicateSubsectionQuery(subsectionId, sectionId) {
+  return async (dispatch) => {
+    dispatch(duplicateCourseItemQuery(
+      subsectionId,
+      sectionId,
+      async () => dispatch(fetchCourseSectionQuery([sectionId], true)),
+    ));
+  };
+}
+
+export function duplicateUnitQuery(unitId, subsectionId, sectionId) {
+  return async (dispatch) => {
+    dispatch(duplicateCourseItemQuery(
+      unitId,
+      subsectionId,
+      async () => dispatch(fetchCourseSectionQuery([sectionId], true)),
+    ));
+  };
+}
+
+/**
+ * Generic function to add any course item. See wrapper functions below for specific implementations.
+ * @param {string} parentLocator
+ * @param {string} category
+ * @param {string} displayName
+ * @param {(data) => {}} addItemFn
+ * @returns {}
+ */
+function addNewCourseItemQuery(parentLocator, category, displayName, addItemFn) {
+  return async (dispatch) => {
+    dispatch(updateSavingStatus({ status: RequestStatus.PENDING }));
+    dispatch(showProcessingNotification(NOTIFICATION_MESSAGES.saving));
+
+    try {
+      await addNewCourseItem(
+        parentLocator,
+        category,
+        displayName,
+      ).then(async (result) => {
+        if (result) {
+          await addItemFn(result);
+          dispatch(updateSavingStatus({ status: RequestStatus.SUCCESSFUL }));
+          dispatch(hideProcessingNotification());
+        }
+      });
+    } catch (error) {
+      dispatch(hideProcessingNotification());
+      dispatch(updateSavingStatus({ status: RequestStatus.FAILED }));
+    }
+  };
+}
+
+export function addNewSectionQuery(parentLocator) {
+  return async (dispatch) => {
+    dispatch(addNewCourseItemQuery(
+      parentLocator,
+      COURSE_BLOCK_NAMES.chapter.id,
+      COURSE_BLOCK_NAMES.chapter.name,
+      async (result) => {
+        const data = await getCourseItem(result.locator);
+        // Page should scroll to newly created section.
+        data.shouldScroll = true;
+        dispatch(addSection(data));
+      },
+    ));
+  };
+}
+
+export function addNewSubsectionQuery(parentLocator) {
+  return async (dispatch) => {
+    dispatch(addNewCourseItemQuery(
+      parentLocator,
+      COURSE_BLOCK_NAMES.sequential.id,
+      COURSE_BLOCK_NAMES.sequential.name,
+      async (result) => {
+        const data = await getCourseItem(result.locator);
+        // Page should scroll to newly created subsection.
+        data.shouldScroll = true;
+        dispatch(addSubsection({ parentLocator, data }));
+      },
+    ));
+  };
+}
+
+export function addNewUnitQuery(parentLocator, callback) {
+  return async (dispatch) => {
+    dispatch(addNewCourseItemQuery(
+      parentLocator,
+      COURSE_BLOCK_NAMES.vertical.id,
+      COURSE_BLOCK_NAMES.vertical.name,
+      async (result) => callback(result.locator),
+    ));
+  };
+}
+
+function setBlockOrderListQuery(
+  parentId,
+  blockIds,
+  apiFn,
+  restoreCallback,
+  successCallback,
+) {
+  return async (dispatch) => {
+    dispatch(updateSavingStatus({ status: RequestStatus.PENDING }));
+    dispatch(showProcessingNotification(NOTIFICATION_MESSAGES.saving));
+
+    try {
+      await apiFn(parentId, blockIds).then(async (result) => {
+        if (result) {
+          successCallback();
+          dispatch(updateSavingStatus({ status: RequestStatus.SUCCESSFUL }));
+          dispatch(hideProcessingNotification());
+        }
+      });
+    } catch (error) {
+      restoreCallback();
+      dispatch(hideProcessingNotification());
+      dispatch(updateSavingStatus({ status: RequestStatus.FAILED }));
+    }
+  };
+}
+
+export function setSectionOrderListQuery(courseId, sectionListIds, restoreCallback) {
+  return async (dispatch) => {
+    dispatch(setBlockOrderListQuery(
+      courseId,
+      sectionListIds,
+      setSectionOrderList,
+      restoreCallback,
+      () => dispatch(reorderSectionList(sectionListIds)),
+    ));
+  };
+}
+
+export function setSubsectionOrderListQuery(
+  sectionId,
+  prevSectionId,
+  subsectionListIds,
+  restoreCallback,
+) {
+  return async (dispatch) => {
+    dispatch(setBlockOrderListQuery(
+      sectionId,
+      subsectionListIds,
+      setCourseItemOrderList,
+      restoreCallback,
+      () => {
+        const sectionIds = [sectionId];
+        if (prevSectionId && prevSectionId !== sectionId) {
+          sectionIds.push(prevSectionId);
+        }
+        dispatch(fetchCourseSectionQuery(sectionIds));
+      },
+    ));
+  };
+}
+
+export function setUnitOrderListQuery(
+  sectionId,
+  subsectionId,
+  prevSectionId,
+  unitListIds,
+  restoreCallback,
+) {
+  return async (dispatch) => {
+    dispatch(setBlockOrderListQuery(
+      subsectionId,
+      unitListIds,
+      setCourseItemOrderList,
+      restoreCallback,
+      () => {
+        const sectionIds = [sectionId];
+        if (prevSectionId && prevSectionId !== sectionId) {
+          sectionIds.push(prevSectionId);
+        }
+        dispatch(fetchCourseSectionQuery(sectionIds));
+      },
+    ));
+  };
+}
+
+export function pasteClipboardContent(parentLocator, sectionId) {
+  return async (dispatch) => {
+    dispatch(updateSavingStatus({ status: RequestStatus.PENDING }));
+    dispatch(showProcessingNotification(NOTIFICATION_MESSAGES.pasting));
+
+    try {
+      await pasteBlock(parentLocator).then(async (result) => {
+        if (result) {
+          dispatch(fetchCourseSectionQuery([sectionId], true));
+          dispatch(updateSavingStatus({ status: RequestStatus.SUCCESSFUL }));
+          dispatch(hideProcessingNotification());
+          dispatch(setPasteFileNotices(result?.staticFileNotices));
+        }
+      });
+    } catch (error) {
+      dispatch(hideProcessingNotification());
+      dispatch(updateSavingStatus({ status: RequestStatus.FAILED }));
+    }
+  };
+}
+
+export function dismissNotificationQuery(url) {
+  return async (dispatch) => {
+    dispatch(updateSavingStatus({ status: RequestStatus.PENDING }));
+
+    try {
+      await dismissNotification(url).then(async () => {
+        dispatch(updateSavingStatus({ status: RequestStatus.SUCCESSFUL }));
+      });
+    } catch (error) {
+      dispatch(updateSavingStatus({ status: RequestStatus.FAILED }));
+    }
+  };
+}
diff --git a/src/course-outline/empty-placeholder/EmptyPlaceholder.jsx b/src/course-outline/empty-placeholder/EmptyPlaceholder.jsx
new file mode 100644
index 0000000000..a98a46011c
--- /dev/null
+++ b/src/course-outline/empty-placeholder/EmptyPlaceholder.jsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Add as IconAdd } from '@openedx/paragon/icons/es5';
+import { Button, OverlayTrigger, Tooltip } from '@openedx/paragon';
+
+import messages from './messages';
+
+const EmptyPlaceholder = ({
+  onCreateNewSection,
+  childAddable,
+}) => {
+  const intl = useIntl();
+
+  return (
+    <div className="outline-empty-placeholder bg-gray-100" data-testid="empty-placeholder">
+      <p className="mb-0 text-gray-500">{intl.formatMessage(messages.title)}</p>
+      {childAddable && (
+        <OverlayTrigger
+          placement="bottom"
+          overlay={(
+            <Tooltip id={intl.formatMessage(messages.tooltip)}>
+              {intl.formatMessage(messages.tooltip)}
+            </Tooltip>
+          )}
+        >
+          <Button
+            variant="primary"
+            size="sm"
+            iconBefore={IconAdd}
+            onClick={onCreateNewSection}
+          >
+            {intl.formatMessage(messages.button)}
+          </Button>
+        </OverlayTrigger>
+      )}
+    </div>
+  );
+};
+
+EmptyPlaceholder.propTypes = {
+  onCreateNewSection: PropTypes.func.isRequired,
+  childAddable: PropTypes.bool.isRequired,
+};
+
+export default EmptyPlaceholder;
diff --git a/src/course-outline/empty-placeholder/EmptyPlaceholder.scss b/src/course-outline/empty-placeholder/EmptyPlaceholder.scss
new file mode 100644
index 0000000000..cf7c54ca41
--- /dev/null
+++ b/src/course-outline/empty-placeholder/EmptyPlaceholder.scss
@@ -0,0 +1,10 @@
+.outline-empty-placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1.25rem;
+  border: .0625rem solid $gray-200;
+  border-radius: .375rem;
+  box-shadow: inset inset 0 1px .125rem 1px $gray-200;
+  padding: 2.5rem;
+}
diff --git a/src/course-outline/empty-placeholder/EmptyPlaceholder.test.jsx b/src/course-outline/empty-placeholder/EmptyPlaceholder.test.jsx
new file mode 100644
index 0000000000..45c6841fd8
--- /dev/null
+++ b/src/course-outline/empty-placeholder/EmptyPlaceholder.test.jsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import EmptyPlaceholder from './EmptyPlaceholder';
+import messages from './messages';
+
+const onCreateNewSectionMock = jest.fn();
+
+const renderComponent = () => render(
+  <IntlProvider locale="en">
+    <EmptyPlaceholder
+      onCreateNewSection={onCreateNewSectionMock}
+      childAddable
+    />
+  </IntlProvider>,
+);
+
+describe('<EmptyPlaceholder />', () => {
+  it('renders EmptyPlaceholder component correctly', () => {
+    const { getByText, getByRole } = renderComponent();
+
+    expect(getByText(messages.title.defaultMessage)).toBeInTheDocument();
+    expect(getByRole('button', { name: messages.button.defaultMessage })).toBeInTheDocument();
+  });
+
+  it('calls the onCreateNewSection function when the button is clicked', () => {
+    const { getByRole } = renderComponent();
+
+    const addButton = getByRole('button', { name: messages.button.defaultMessage });
+    fireEvent.click(addButton);
+    expect(onCreateNewSectionMock).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/src/course-outline/empty-placeholder/messages.js b/src/course-outline/empty-placeholder/messages.js
new file mode 100644
index 0000000000..eccb564a86
--- /dev/null
+++ b/src/course-outline/empty-placeholder/messages.js
@@ -0,0 +1,18 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  title: {
+    id: 'course-authoring.course-outline.empty-placeholder.title',
+    defaultMessage: 'You haven\'t added any content to this course yet.',
+  },
+  button: {
+    id: 'course-authoring.course-outline.empty-placeholder.button.new-section',
+    defaultMessage: 'New section',
+  },
+  tooltip: {
+    id: 'course-authoring.course-outline.empty-placeholder.button.tooltip',
+    defaultMessage: 'Click to add a new section',
+  },
+});
+
+export default messages;
diff --git a/src/course-outline/enable-highlights-modal/EnableHighlightsModal.jsx b/src/course-outline/enable-highlights-modal/EnableHighlightsModal.jsx
new file mode 100644
index 0000000000..67cb818d1d
--- /dev/null
+++ b/src/course-outline/enable-highlights-modal/EnableHighlightsModal.jsx
@@ -0,0 +1,62 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import {
+  ActionRow, AlertModal, Button, Hyperlink,
+} from '@openedx/paragon';
+
+import messages from './messages';
+import { useHelpUrls } from '../../help-urls/hooks';
+
+const EnableHighlightsModal = ({
+  onEnableHighlightsSubmit,
+  isOpen,
+  close,
+}) => {
+  const intl = useIntl();
+
+  const {
+    contentHighlights: contentHighlightsUrl,
+  } = useHelpUrls(['contentHighlights']);
+
+  return (
+    <AlertModal
+      title={intl.formatMessage(messages.title)}
+      variant="default"
+      size="lg"
+      isOpen={isOpen}
+      onClose={close}
+      footerNode={(
+        <ActionRow>
+          <Button variant="tertiary" onClick={close}>
+            {intl.formatMessage(messages.cancelButton)}
+          </Button>
+          <Button onClick={onEnableHighlightsSubmit}>
+            {intl.formatMessage(messages.submitButton)}
+          </Button>
+        </ActionRow>
+      )}
+    >
+      <p className="small">{intl.formatMessage(messages.description_1)}</p>
+      <p className="small">
+        {intl.formatMessage(messages.description_2)}
+        <Hyperlink
+          className="small ml-2 text-decoration-none"
+          destination={contentHighlightsUrl}
+          target="_blank"
+          showLaunchIcon={false}
+        >
+          {intl.formatMessage(messages.link)}
+        </Hyperlink>
+      </p>
+    </AlertModal>
+  );
+};
+
+EnableHighlightsModal.propTypes = {
+  onEnableHighlightsSubmit: PropTypes.func.isRequired,
+  isOpen: PropTypes.bool.isRequired,
+  close: PropTypes.func.isRequired,
+};
+
+export default EnableHighlightsModal;
diff --git a/src/course-outline/enable-highlights-modal/EnableHighlightsModal.test.jsx b/src/course-outline/enable-highlights-modal/EnableHighlightsModal.test.jsx
new file mode 100644
index 0000000000..50c5955998
--- /dev/null
+++ b/src/course-outline/enable-highlights-modal/EnableHighlightsModal.test.jsx
@@ -0,0 +1,83 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { AppProvider } from '@edx/frontend-platform/react';
+import { initializeMockApp } from '@edx/frontend-platform';
+
+import initializeStore from '../../store';
+import EnableHighlightsModal from './EnableHighlightsModal';
+import messages from './messages';
+
+let store;
+const mockPathname = '/foo-bar';
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useLocation: () => ({
+    pathname: mockPathname,
+  }),
+}));
+
+jest.mock('../../help-urls/hooks', () => ({
+  useHelpUrls: () => ({
+    contentHighlights: 'some',
+  }),
+}));
+
+const onEnableHighlightsSubmitMock = jest.fn();
+const closeMock = jest.fn();
+
+const renderComponent = (props) => render(
+  <AppProvider store={store}>
+    <IntlProvider locale="en">
+      <EnableHighlightsModal
+        isOpen
+        close={closeMock}
+        onEnableHighlightsSubmit={onEnableHighlightsSubmitMock}
+        {...props}
+      />
+    </IntlProvider>,
+  </AppProvider>,
+);
+
+describe('<EnableHighlightsModal />', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+
+    store = initializeStore();
+  });
+
+  it('renders EnableHighlightsModal component correctly', () => {
+    const { getByText, getByRole } = renderComponent();
+
+    expect(getByText(messages.title.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.description_1.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.description_2.defaultMessage)).toBeInTheDocument();
+    expect(getByRole('button', { name: messages.cancelButton.defaultMessage })).toBeInTheDocument();
+    expect(getByRole('button', { name: messages.submitButton.defaultMessage })).toBeInTheDocument();
+    expect(getByText(messages.link.defaultMessage)).toBeInTheDocument();
+  });
+
+  it('calls onEnableHighlightsSubmit function when the "Submit" button is clicked', () => {
+    const { getByRole } = renderComponent();
+
+    const submitButton = getByRole('button', { name: messages.submitButton.defaultMessage });
+    fireEvent.click(submitButton);
+    expect(onEnableHighlightsSubmitMock).toHaveBeenCalled();
+  });
+
+  it('calls the close function when the "Cancel" button is clicked', () => {
+    const { getByRole } = renderComponent();
+
+    const cancelButton = getByRole('button', { name: messages.cancelButton.defaultMessage });
+    fireEvent.click(cancelButton);
+    expect(closeMock).toHaveBeenCalled();
+  });
+});
diff --git a/src/course-outline/enable-highlights-modal/messages.js b/src/course-outline/enable-highlights-modal/messages.js
new file mode 100644
index 0000000000..dbad07e941
--- /dev/null
+++ b/src/course-outline/enable-highlights-modal/messages.js
@@ -0,0 +1,30 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  title: {
+    id: 'course-authoring.course-outline.status-bar.modal.title',
+    defaultMessage: 'Enable course highlight emails',
+  },
+  description_1: {
+    id: 'course-authoring.course-outline.status-bar.modal.description-1',
+    defaultMessage: 'When you enable course highlight emails, learners automatically receive email messages for each section that has highlights. You cannot disable highlights after you start sending them.',
+  },
+  description_2: {
+    id: 'course-authoring.course-outline.status-bar.modal.description-2',
+    defaultMessage: 'Are you sure you want to enable course highlight emails?',
+  },
+  link: {
+    id: 'course-authoring.course-outline.status-bar.modal.link',
+    defaultMessage: 'Learn more',
+  },
+  cancelButton: {
+    id: 'course-authoring.course-outline.status-bar.modal.cancelButton',
+    defaultMessage: 'Cancel',
+  },
+  submitButton: {
+    id: 'course-authoring.course-outline.status-bar.modal.submitButton',
+    defaultMessage: 'Enable',
+  },
+});
+
+export default messages;
diff --git a/src/course-outline/header-navigations/HeaderNavigations.jsx b/src/course-outline/header-navigations/HeaderNavigations.jsx
new file mode 100644
index 0000000000..d394bddecb
--- /dev/null
+++ b/src/course-outline/header-navigations/HeaderNavigations.jsx
@@ -0,0 +1,138 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Button, OverlayTrigger, Tooltip } from '@openedx/paragon';
+import {
+  Add as IconAdd,
+  ArrowDropDown as ArrowDownIcon,
+  ArrowDropUp as ArrowUpIcon,
+} from '@openedx/paragon/icons';
+
+import messages from './messages';
+
+const HeaderNavigations = ({
+  headerNavigationsActions,
+  isReIndexShow,
+  isSectionsExpanded,
+  isDisabledReindexButton,
+  hasSections,
+  courseActions,
+  errors,
+}) => {
+  const intl = useIntl();
+  const {
+    handleNewSection, handleReIndex, handleExpandAll, lmsLink,
+  } = headerNavigationsActions;
+
+  return (
+    <nav className="header-navigations ml-auto">
+      {courseActions.childAddable && (
+        <OverlayTrigger
+          placement="bottom"
+          overlay={(
+            <Tooltip id={intl.formatMessage(messages.newSectionButtonTooltip)}>
+              {intl.formatMessage(messages.newSectionButtonTooltip)}
+            </Tooltip>
+          )}
+        >
+          <Button
+            iconBefore={IconAdd}
+            onClick={handleNewSection}
+            disabled={errors?.outlineIndexApi}
+          >
+            {intl.formatMessage(messages.newSectionButton)}
+          </Button>
+        </OverlayTrigger>
+      )}
+      {isReIndexShow && (
+        <OverlayTrigger
+          placement="bottom"
+          overlay={!isDisabledReindexButton ? (
+            <Tooltip id={intl.formatMessage(messages.reindexButtonTooltip)}>
+              {intl.formatMessage(messages.reindexButtonTooltip)}
+            </Tooltip>
+          ) : <React.Fragment key="reindex close" />}
+        >
+          <Button
+            onClick={handleReIndex}
+            data-testid="course-reindex"
+            variant="outline-primary"
+            disabled={isDisabledReindexButton}
+          >
+            {intl.formatMessage(messages.reindexButton)}
+          </Button>
+        </OverlayTrigger>
+      )}
+      {hasSections && (
+        <Button
+          variant="outline-primary"
+          iconBefore={isSectionsExpanded ? ArrowUpIcon : ArrowDownIcon}
+          onClick={handleExpandAll}
+        >
+          {isSectionsExpanded
+            ? intl.formatMessage(messages.collapseAllButton)
+            : intl.formatMessage(messages.expandAllButton)}
+        </Button>
+      )}
+      <OverlayTrigger
+        placement="bottom"
+        overlay={(
+          <Tooltip id={intl.formatMessage(messages.viewLiveButtonTooltip)}>
+            {intl.formatMessage(messages.viewLiveButtonTooltip)}
+          </Tooltip>
+        )}
+      >
+        <Button
+          href={lmsLink}
+          target="_blank"
+          variant="outline-primary"
+        >
+          {intl.formatMessage(messages.viewLiveButton)}
+        </Button>
+      </OverlayTrigger>
+    </nav>
+  );
+};
+
+HeaderNavigations.defaultProps = {
+  errors: {},
+};
+
+HeaderNavigations.propTypes = {
+  isReIndexShow: PropTypes.bool.isRequired,
+  isSectionsExpanded: PropTypes.bool.isRequired,
+  isDisabledReindexButton: PropTypes.bool.isRequired,
+  headerNavigationsActions: PropTypes.shape({
+    handleNewSection: PropTypes.func.isRequired,
+    handleReIndex: PropTypes.func.isRequired,
+    handleExpandAll: PropTypes.func.isRequired,
+    lmsLink: PropTypes.string.isRequired,
+  }).isRequired,
+  hasSections: PropTypes.bool.isRequired,
+  courseActions: PropTypes.shape({
+    deletable: PropTypes.bool.isRequired,
+    draggable: PropTypes.bool.isRequired,
+    childAddable: PropTypes.bool.isRequired,
+    duplicable: PropTypes.bool.isRequired,
+  }).isRequired,
+  errors: PropTypes.shape({
+    outlineIndexApi: PropTypes.shape({
+      data: PropTypes.string,
+      type: PropTypes.string.isRequired,
+    }),
+    reindexApi: PropTypes.shape({
+      data: PropTypes.string,
+      type: PropTypes.string.isRequired,
+    }),
+    sectionLoadingApi: PropTypes.shape({
+      data: PropTypes.string,
+      type: PropTypes.string.isRequired,
+    }),
+    courseLaunchApi: PropTypes.shape({
+      data: PropTypes.string,
+      type: PropTypes.string.isRequired,
+    }),
+  }),
+};
+
+export default HeaderNavigations;
diff --git a/src/course-outline/header-navigations/HeaderNavigations.scss b/src/course-outline/header-navigations/HeaderNavigations.scss
new file mode 100644
index 0000000000..e5867e8068
--- /dev/null
+++ b/src/course-outline/header-navigations/HeaderNavigations.scss
@@ -0,0 +1,4 @@
+.header-navigations {
+  display: flex;
+  gap: .75rem;
+}
diff --git a/src/course-outline/header-navigations/HeaderNavigations.test.jsx b/src/course-outline/header-navigations/HeaderNavigations.test.jsx
new file mode 100644
index 0000000000..5ff884ae63
--- /dev/null
+++ b/src/course-outline/header-navigations/HeaderNavigations.test.jsx
@@ -0,0 +1,136 @@
+import React from 'react';
+import { render, fireEvent, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import HeaderNavigations from './HeaderNavigations';
+import messages from './messages';
+
+const handleNewSectionMock = jest.fn();
+const handleReIndexMock = jest.fn();
+const handleExpandAllMock = jest.fn();
+
+const headerNavigationsActions = {
+  handleNewSection: handleNewSectionMock,
+  handleReIndex: handleReIndexMock,
+  handleExpandAll: handleExpandAllMock,
+  lmsLink: '',
+};
+
+const courseActions = {
+  draggable: true,
+  childAddable: true,
+  deletable: true,
+  duplicable: true,
+};
+
+const renderComponent = (props) => render(
+  <IntlProvider locale="en">
+    <HeaderNavigations
+      headerNavigationsActions={headerNavigationsActions}
+      isSectionsExpanded={false}
+      isDisabledReindexButton={false}
+      isReIndexShow
+      hasSections
+      courseActions={courseActions}
+      {...props}
+    />
+  </IntlProvider>,
+);
+
+describe('<HeaderNavigations />', () => {
+  it('render HeaderNavigations component correctly', () => {
+    const { getByRole } = renderComponent();
+
+    expect(getByRole('button', { name: messages.newSectionButton.defaultMessage })).toBeInTheDocument();
+    expect(getByRole('button', { name: messages.reindexButton.defaultMessage })).toBeInTheDocument();
+    expect(getByRole('button', { name: messages.expandAllButton.defaultMessage })).toBeInTheDocument();
+    expect(getByRole('button', { name: messages.viewLiveButton.defaultMessage })).toBeInTheDocument();
+  });
+
+  it('render HeaderNavigations component with isReIndexShow is false correctly', () => {
+    const { getByRole, queryByRole } = renderComponent({ isReIndexShow: false });
+
+    expect(getByRole('button', { name: messages.newSectionButton.defaultMessage })).toBeInTheDocument();
+    expect(queryByRole('button', { name: messages.reindexButton.defaultMessage })).not.toBeInTheDocument();
+    expect(getByRole('button', { name: messages.expandAllButton.defaultMessage })).toBeInTheDocument();
+    expect(getByRole('button', { name: messages.viewLiveButton.defaultMessage })).toBeInTheDocument();
+  });
+
+  it('calls the correct handlers when clicking buttons', () => {
+    const { getByRole } = renderComponent();
+
+    const newSectionButton = getByRole('button', { name: messages.newSectionButton.defaultMessage });
+    fireEvent.click(newSectionButton);
+    expect(handleNewSectionMock).toHaveBeenCalledTimes(1);
+
+    const reIndexButton = getByRole('button', { name: messages.reindexButton.defaultMessage });
+    fireEvent.click(reIndexButton);
+    expect(handleReIndexMock).toHaveBeenCalledTimes(1);
+
+    const expandAllButton = getByRole('button', { name: messages.expandAllButton.defaultMessage });
+    fireEvent.click(expandAllButton);
+    expect(handleExpandAllMock).toHaveBeenCalledTimes(1);
+  });
+
+  it('render collapse button correctly', () => {
+    const { getByRole } = renderComponent({
+      isSectionsExpanded: true,
+    });
+
+    expect(getByRole('button', { name: messages.collapseAllButton.defaultMessage })).toBeInTheDocument();
+  });
+
+  it('render expand button correctly', () => {
+    const { getByRole } = renderComponent({
+      isSectionsExpanded: false,
+    });
+
+    expect(getByRole('button', { name: messages.expandAllButton.defaultMessage })).toBeInTheDocument();
+  });
+
+  it('render collapse button correctly', () => {
+    const { getByRole } = renderComponent({
+      isSectionsExpanded: true,
+    });
+
+    expect(getByRole('button', { name: messages.collapseAllButton.defaultMessage })).toBeInTheDocument();
+  });
+
+  it('render expand button correctly', () => {
+    const { getByRole } = renderComponent({
+      isSectionsExpanded: false,
+    });
+
+    expect(getByRole('button', { name: messages.expandAllButton.defaultMessage })).toBeInTheDocument();
+  });
+
+  it('render reindex button tooltip correctly', async () => {
+    const { getByText, getByRole } = renderComponent({
+      isDisabledReindexButton: false,
+    });
+    userEvent.hover(getByRole('button', { name: messages.reindexButton.defaultMessage }));
+    await waitFor(() => {
+      expect(getByText(messages.reindexButtonTooltip.defaultMessage)).toBeInTheDocument();
+    });
+  });
+
+  it('not render reindex button tooltip when button is disabled correctly', async () => {
+    const { queryByText, getByRole } = renderComponent({
+      isDisabledReindexButton: true,
+    });
+    userEvent.hover(getByRole('button', { name: messages.reindexButton.defaultMessage }));
+    await waitFor(() => {
+      expect(queryByText(messages.reindexButtonTooltip.defaultMessage)).not.toBeInTheDocument();
+    });
+  });
+
+  it('disables new section button if course outline fetch fails', () => {
+    const { getByRole } = renderComponent({
+      errors: { outlineIndexApi: { data: 'some error', type: 'serverError' } },
+    });
+
+    expect(getByRole('button', { name: messages.newSectionButton.defaultMessage })).toBeInTheDocument();
+    expect(getByRole('button', { name: messages.newSectionButton.defaultMessage })).toBeDisabled();
+  });
+});
diff --git a/src/course-outline/header-navigations/messages.js b/src/course-outline/header-navigations/messages.js
new file mode 100644
index 0000000000..588a2fa5d3
--- /dev/null
+++ b/src/course-outline/header-navigations/messages.js
@@ -0,0 +1,38 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  newSectionButton: {
+    id: 'course-authoring.course-outline.header-navigations.button.new-section',
+    defaultMessage: 'New section',
+  },
+  newSectionButtonTooltip: {
+    id: 'course-authoring.course-outline.header-navigations.button.new-section.tooltip',
+    defaultMessage: 'Click to add a new section',
+  },
+  reindexButton: {
+    id: 'course-authoring.course-outline.header-navigations.button.reindex',
+    defaultMessage: 'Reindex',
+  },
+  reindexButtonTooltip: {
+    id: 'course-authoring.course-outline.header-navigations.button.reindex.tooltip',
+    defaultMessage: 'Reindex current course',
+  },
+  expandAllButton: {
+    id: 'course-authoring.course-outline.header-navigations.button.expand-all',
+    defaultMessage: 'Expand all',
+  },
+  collapseAllButton: {
+    id: 'course-authoring.course-outline.header-navigations.button.collapse-all',
+    defaultMessage: 'Collapse all',
+  },
+  viewLiveButton: {
+    id: 'course-authoring.course-outline.header-navigations.button.view-live',
+    defaultMessage: 'View live',
+  },
+  viewLiveButtonTooltip: {
+    id: 'course-authoring.course-outline.header-navigations.button.view-live.tooltip',
+    defaultMessage: 'Click to open the courseware in the LMS in a new tab',
+  },
+});
+
+export default messages;
diff --git a/src/course-outline/highlights-modal/HighlightsModal.jsx b/src/course-outline/highlights-modal/HighlightsModal.jsx
new file mode 100644
index 0000000000..91d806f0b2
--- /dev/null
+++ b/src/course-outline/highlights-modal/HighlightsModal.jsx
@@ -0,0 +1,96 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import {
+  ModalDialog,
+  Button,
+  ActionRow,
+  Hyperlink,
+} from '@openedx/paragon';
+import { Formik } from 'formik';
+import { useSelector } from 'react-redux';
+
+import { useHelpUrls } from '../../help-urls/hooks';
+import FormikControl from '../../generic/FormikControl';
+import { getCurrentSection } from '../data/selectors';
+import { HIGHLIGHTS_FIELD_MAX_LENGTH } from '../constants';
+import { getHighlightsFormValues } from '../utils';
+import messages from './messages';
+
+const HighlightsModal = ({
+  isOpen,
+  onClose,
+  onSubmit,
+}) => {
+  const intl = useIntl();
+  const { highlights = [], displayName } = useSelector(getCurrentSection);
+  const initialFormValues = getHighlightsFormValues(highlights);
+
+  const {
+    contentHighlights: contentHighlightsUrl,
+  } = useHelpUrls(['contentHighlights']);
+
+  return (
+    <ModalDialog
+      title={displayName}
+      className="highlights-modal"
+      isOpen={isOpen}
+      onClose={onClose}
+      hasCloseButton
+      isFullscreenOnMobile
+      isOverflowVisible={false}
+    >
+      <ModalDialog.Header className="highlights-modal__header">
+        <ModalDialog.Title>
+          {intl.formatMessage(messages.title, {
+            title: displayName,
+          })}
+        </ModalDialog.Title>
+      </ModalDialog.Header>
+      <Formik initialValues={initialFormValues} onSubmit={onSubmit}>
+        {({ values, dirty, handleSubmit }) => (
+          <>
+            <ModalDialog.Body>
+              <p className="mb-4.5 pb-2">
+                {intl.formatMessage(messages.description, {
+                  documentation: (
+                    <Hyperlink destination={contentHighlightsUrl} target="_blank" showLaunchIcon={false}>
+                      {intl.formatMessage(messages.documentationLink)}
+                    </Hyperlink>),
+                })}
+              </p>
+              {Object.entries(initialFormValues).map(([key], index) => (
+                <FormikControl
+                  key={key}
+                  name={key}
+                  value={values[key]}
+                  floatingLabel={intl.formatMessage(messages.highlight, { index: index + 1 })}
+                  maxLength={HIGHLIGHTS_FIELD_MAX_LENGTH}
+                  as="textarea"
+                />
+              ))}
+            </ModalDialog.Body>
+            <ModalDialog.Footer className="pt-1">
+              <ActionRow>
+                <ModalDialog.CloseButton variant="tertiary">
+                  {intl.formatMessage(messages.cancelButton)}
+                </ModalDialog.CloseButton>
+                <Button disabled={!dirty} onClick={handleSubmit}>
+                  {intl.formatMessage(messages.saveButton)}
+                </Button>
+              </ActionRow>
+            </ModalDialog.Footer>
+          </>
+        )}
+      </Formik>
+    </ModalDialog>
+  );
+};
+
+HighlightsModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+};
+
+export default HighlightsModal;
diff --git a/src/course-outline/highlights-modal/HighlightsModal.scss b/src/course-outline/highlights-modal/HighlightsModal.scss
new file mode 100644
index 0000000000..ef991d8be2
--- /dev/null
+++ b/src/course-outline/highlights-modal/HighlightsModal.scss
@@ -0,0 +1,15 @@
+.highlights-modal {
+  max-width: 33.6875rem;
+
+  .highlights-modal__header {
+    padding-top: 1.5rem;
+  }
+
+  .form-control {
+    color: $black;
+  }
+
+  .pgn__form-control-decorator-group {
+    margin-inline-end: 0;
+  }
+}
diff --git a/src/course-outline/highlights-modal/HighlightsModal.test.jsx b/src/course-outline/highlights-modal/HighlightsModal.test.jsx
new file mode 100644
index 0000000000..4b57b59f92
--- /dev/null
+++ b/src/course-outline/highlights-modal/HighlightsModal.test.jsx
@@ -0,0 +1,122 @@
+import React from 'react';
+import {
+  render, fireEvent, act, waitFor,
+} from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { useSelector } from 'react-redux';
+import { initializeMockApp } from '@edx/frontend-platform';
+import { AppProvider } from '@edx/frontend-platform/react';
+
+import initializeStore from '../../store';
+import HighlightsModal from './HighlightsModal';
+import messages from './messages';
+
+let store;
+const mockPathname = '/foo-bar';
+
+jest.mock('react-redux', () => ({
+  ...jest.requireActual('react-redux'),
+  useSelector: jest.fn(),
+}));
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useLocation: () => ({
+    pathname: mockPathname,
+  }),
+}));
+
+jest.mock('../../help-urls/hooks', () => ({
+  useHelpUrls: () => ({
+    contentHighlights: 'some',
+  }),
+}));
+
+const currentItemMock = {
+  highlights: ['Highlight 1', 'Highlight 2'],
+  displayName: 'Test Section',
+};
+
+const onCloseMock = jest.fn();
+const onSubmitMock = jest.fn();
+
+const renderComponent = () => render(
+  <AppProvider store={store}>
+    <IntlProvider locale="en">
+      <HighlightsModal
+        isOpen
+        onClose={onCloseMock}
+        onSubmit={onSubmitMock}
+      />
+    </IntlProvider>,
+  </AppProvider>,
+);
+
+describe('<HighlightsModal />', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+
+    store = initializeStore();
+    useSelector.mockReturnValue(currentItemMock);
+  });
+
+  it('renders HighlightsModal component correctly', () => {
+    const { getByText, getByRole, getByLabelText } = renderComponent();
+
+    expect(getByText(`Highlights for ${currentItemMock.displayName}`)).toBeInTheDocument();
+    expect(getByText(/Enter 3-5 highlights to include in the email message that learners receive for this section/i)).toBeInTheDocument();
+    expect(getByText(/For more information and an example of the email template, read our/i)).toBeInTheDocument();
+    expect(getByText(messages.documentationLink.defaultMessage)).toBeInTheDocument();
+    expect(getByLabelText(messages.highlight.defaultMessage.replace('{index}', '1'))).toBeInTheDocument();
+    expect(getByLabelText(messages.highlight.defaultMessage.replace('{index}', '2'))).toBeInTheDocument();
+    expect(getByLabelText(messages.highlight.defaultMessage.replace('{index}', '3'))).toBeInTheDocument();
+    expect(getByLabelText(messages.highlight.defaultMessage.replace('{index}', '4'))).toBeInTheDocument();
+    expect(getByLabelText(messages.highlight.defaultMessage.replace('{index}', '5'))).toBeInTheDocument();
+    expect(getByRole('button', { name: messages.cancelButton.defaultMessage })).toBeInTheDocument();
+    expect(getByRole('button', { name: messages.saveButton.defaultMessage })).toBeInTheDocument();
+  });
+
+  it('calls the onClose function when the cancel button is clicked', () => {
+    const { getByRole } = renderComponent();
+
+    const cancelButton = getByRole('button', { name: messages.cancelButton.defaultMessage });
+    fireEvent.click(cancelButton);
+    expect(onCloseMock).toHaveBeenCalledTimes(1);
+  });
+
+  it('calls the onSubmit function with correct values when the save button is clicked', async () => {
+    const { getByRole, getByLabelText } = renderComponent();
+
+    const field1 = getByLabelText(messages.highlight.defaultMessage.replace('{index}', '1'));
+    const field2 = getByLabelText(messages.highlight.defaultMessage.replace('{index}', '2'));
+    fireEvent.change(field1, { target: { value: 'New highlight 1' } });
+    fireEvent.change(field2, { target: { value: 'New highlight 2' } });
+
+    const saveButton = getByRole('button', { name: messages.saveButton.defaultMessage });
+
+    await act(async () => {
+      fireEvent.click(saveButton);
+    });
+
+    await waitFor(() => {
+      expect(onSubmitMock).toHaveBeenCalledTimes(1);
+      expect(onSubmitMock).toHaveBeenCalledWith(
+        {
+          highlight_1: 'New highlight 1',
+          highlight_2: 'New highlight 2',
+          highlight_3: '',
+          highlight_4: '',
+          highlight_5: '',
+        },
+        expect.objectContaining({ submitForm: expect.any(Function) }),
+      );
+    });
+  });
+});
diff --git a/src/course-outline/highlights-modal/messages.js b/src/course-outline/highlights-modal/messages.js
new file mode 100644
index 0000000000..e8c083a9dc
--- /dev/null
+++ b/src/course-outline/highlights-modal/messages.js
@@ -0,0 +1,30 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  title: {
+    id: 'course-authoring.course-outline.highlights-modal.title',
+    defaultMessage: 'Highlights for {title}',
+  },
+  description: {
+    id: 'course-authoring.course-outline.highlights-modal.description',
+    defaultMessage: 'Enter 3-5 highlights to include in the email message that learners receive for this section (250 character limit). For more information and an example of the email template, read our {documentation}.',
+  },
+  documentationLink: {
+    id: 'course-authoring.course-outline.highlights-modal.documentation-link',
+    defaultMessage: 'documentation',
+  },
+  highlight: {
+    id: 'course-authoring.course-outline.highlights-modal.highlight',
+    defaultMessage: 'Highlight {index}',
+  },
+  cancelButton: {
+    id: 'course-authoring.course-outline.highlights-modal.button.cancel',
+    defaultMessage: 'Cancel',
+  },
+  saveButton: {
+    id: 'course-authoring.course-outline.highlights-modal.button.save',
+    defaultMessage: 'Save',
+  },
+});
+
+export default messages;
diff --git a/src/course-outline/hooks.jsx b/src/course-outline/hooks.jsx
new file mode 100644
index 0000000000..e8e3b65956
--- /dev/null
+++ b/src/course-outline/hooks.jsx
@@ -0,0 +1,364 @@
+import { useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useNavigate } from 'react-router-dom';
+import { useToggle } from '@openedx/paragon';
+import { getConfig } from '@edx/frontend-platform';
+
+import { copyToClipboard } from '../generic/data/thunks';
+import { getSavingStatus as getGenericSavingStatus } from '../generic/data/selectors';
+import { getWaffleFlags } from '../data/selectors';
+import { RequestStatus } from '../data/constants';
+import { COURSE_BLOCK_NAMES } from './constants';
+import {
+  setCurrentItem,
+  setCurrentSection,
+  updateSavingStatus,
+} from './data/slice';
+import {
+  getLoadingStatus,
+  getOutlineIndexData,
+  getSavingStatus,
+  getStatusBarData,
+  getSectionsList,
+  getCourseActions,
+  getCurrentItem,
+  getCurrentSection,
+  getCurrentSubsection,
+  getCustomRelativeDatesActiveFlag,
+  getErrors,
+} from './data/selectors';
+import {
+  addNewSectionQuery,
+  addNewSubsectionQuery,
+  addNewUnitQuery,
+  deleteCourseSectionQuery,
+  deleteCourseSubsectionQuery,
+  deleteCourseUnitQuery,
+  editCourseItemQuery,
+  duplicateSectionQuery,
+  duplicateSubsectionQuery,
+  duplicateUnitQuery,
+  enableCourseHighlightsEmailsQuery,
+  fetchCourseBestPracticesQuery,
+  fetchCourseLaunchQuery,
+  fetchCourseOutlineIndexQuery,
+  fetchCourseReindexQuery,
+  publishCourseItemQuery,
+  updateCourseSectionHighlightsQuery,
+  configureCourseSectionQuery,
+  configureCourseSubsectionQuery,
+  configureCourseUnitQuery,
+  setSectionOrderListQuery,
+  setVideoSharingOptionQuery,
+  setSubsectionOrderListQuery,
+  setUnitOrderListQuery,
+  pasteClipboardContent,
+  dismissNotificationQuery,
+} from './data/thunk';
+
+const useCourseOutline = ({ courseId }) => {
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
+  const waffleFlags = useSelector(getWaffleFlags);
+
+  const {
+    reindexLink,
+    courseStructure,
+    lmsLink,
+    notificationDismissUrl,
+    discussionsSettings,
+    discussionsIncontextFeedbackUrl,
+    discussionsIncontextLearnmoreUrl,
+    deprecatedBlocksInfo,
+    proctoringErrors,
+    mfeProctoredExamSettingsUrl,
+    advanceSettingsUrl,
+  } = useSelector(getOutlineIndexData);
+  const { outlineIndexLoadingStatus, reIndexLoadingStatus } = useSelector(getLoadingStatus);
+  const statusBarData = useSelector(getStatusBarData);
+  const savingStatus = useSelector(getSavingStatus);
+  const courseActions = useSelector(getCourseActions);
+  const sectionsList = useSelector(getSectionsList);
+  const currentItem = useSelector(getCurrentItem);
+  const currentSection = useSelector(getCurrentSection);
+  const currentSubsection = useSelector(getCurrentSubsection);
+  const isCustomRelativeDatesActive = useSelector(getCustomRelativeDatesActiveFlag);
+  const genericSavingStatus = useSelector(getGenericSavingStatus);
+  const errors = useSelector(getErrors);
+
+  const [isEnableHighlightsModalOpen, openEnableHighlightsModal, closeEnableHighlightsModal] = useToggle(false);
+  const [isSectionsExpanded, setSectionsExpanded] = useState(true);
+  const [isDisabledReindexButton, setDisableReindexButton] = useState(false);
+  const [showSuccessAlert, setShowSuccessAlert] = useState(false);
+  const [isHighlightsModalOpen, openHighlightsModal, closeHighlightsModal] = useToggle(false);
+  const [isPublishModalOpen, openPublishModal, closePublishModal] = useToggle(false);
+  const [isConfigureModalOpen, openConfigureModal, closeConfigureModal] = useToggle(false);
+  const [isDeleteModalOpen, openDeleteModal, closeDeleteModal] = useToggle(false);
+
+  const isSavingStatusFailed = savingStatus === RequestStatus.FAILED || genericSavingStatus === RequestStatus.FAILED;
+
+  const handleCopyToClipboardClick = (usageKey) => {
+    dispatch(copyToClipboard(usageKey));
+  };
+
+  const handlePasteClipboardClick = (parentLocator, sectionId) => {
+    dispatch(pasteClipboardContent(parentLocator, sectionId));
+  };
+
+  const handleNewSectionSubmit = () => {
+    dispatch(addNewSectionQuery(courseStructure.id));
+  };
+
+  const handleNewSubsectionSubmit = (sectionId) => {
+    dispatch(addNewSubsectionQuery(sectionId));
+  };
+
+  const getUnitUrl = (locator) => {
+    if (getConfig().ENABLE_UNIT_PAGE === 'true' && waffleFlags.useNewUnitPage) {
+      return `/course/${courseId}/container/${locator}`;
+    }
+    return `${getConfig().STUDIO_BASE_URL}/container/${locator}`;
+  };
+
+  const openUnitPage = (locator) => {
+    const url = getUnitUrl(locator);
+    if (getConfig().ENABLE_UNIT_PAGE === 'true' && waffleFlags.useNewUnitPage) {
+      navigate(url);
+    } else {
+      window.location.assign(url);
+    }
+  };
+
+  const handleNewUnitSubmit = (subsectionId) => {
+    dispatch(addNewUnitQuery(subsectionId, openUnitPage));
+  };
+
+  const headerNavigationsActions = {
+    handleNewSection: handleNewSectionSubmit,
+    handleReIndex: () => {
+      setDisableReindexButton(true);
+      setShowSuccessAlert(false);
+
+      dispatch(fetchCourseReindexQuery(courseId, reindexLink)).then(() => {
+        setDisableReindexButton(false);
+      });
+    },
+    handleExpandAll: () => {
+      setSectionsExpanded((prevState) => !prevState);
+    },
+    lmsLink,
+  };
+
+  const handleEnableHighlightsSubmit = () => {
+    dispatch(enableCourseHighlightsEmailsQuery(courseId));
+    closeEnableHighlightsModal();
+  };
+
+  const handleInternetConnectionFailed = () => {
+    dispatch(updateSavingStatus({ status: RequestStatus.FAILED }));
+  };
+
+  const handleOpenHighlightsModal = (section) => {
+    dispatch(setCurrentItem(section));
+    dispatch(setCurrentSection(section));
+    openHighlightsModal();
+  };
+
+  const handleHighlightsFormSubmit = (highlights) => {
+    const dataToSend = Object.values(highlights).filter(Boolean);
+    dispatch(updateCourseSectionHighlightsQuery(currentItem.id, dataToSend));
+
+    closeHighlightsModal();
+  };
+
+  const handlePublishItemSubmit = () => {
+    dispatch(publishCourseItemQuery(currentItem.id, currentSection.id));
+
+    closePublishModal();
+  };
+
+  const handleConfigureModalClose = () => {
+    closeConfigureModal();
+    // reset the currentItem so the ConfigureModal's state is also reset
+    dispatch(setCurrentItem({}));
+  };
+
+  const handleConfigureItemSubmit = (...arg) => {
+    switch (currentItem.category) {
+      case COURSE_BLOCK_NAMES.chapter.id:
+        dispatch(configureCourseSectionQuery(currentSection.id, ...arg));
+        break;
+      case COURSE_BLOCK_NAMES.sequential.id:
+        dispatch(configureCourseSubsectionQuery(currentItem.id, currentSection.id, ...arg));
+        break;
+      case COURSE_BLOCK_NAMES.vertical.id:
+        dispatch(configureCourseUnitQuery(currentItem.id, currentSection.id, ...arg));
+        break;
+      default:
+        return;
+    }
+    handleConfigureModalClose();
+  };
+
+  const handleEditSubmit = (itemId, sectionId, displayName) => {
+    dispatch(editCourseItemQuery(itemId, sectionId, displayName));
+  };
+
+  const handleDeleteItemSubmit = () => {
+    switch (currentItem.category) {
+      case COURSE_BLOCK_NAMES.chapter.id:
+        dispatch(deleteCourseSectionQuery(currentItem.id));
+        break;
+      case COURSE_BLOCK_NAMES.sequential.id:
+        dispatch(deleteCourseSubsectionQuery(currentItem.id, currentSection.id));
+        break;
+      case COURSE_BLOCK_NAMES.vertical.id:
+        dispatch(deleteCourseUnitQuery(
+          currentItem.id,
+          currentSubsection.id,
+          currentSection.id,
+        ));
+        break;
+      default:
+        return;
+    }
+    closeDeleteModal();
+  };
+
+  const handleDuplicateSectionSubmit = () => {
+    dispatch(duplicateSectionQuery(currentSection.id, courseStructure.id));
+  };
+
+  const handleDuplicateSubsectionSubmit = () => {
+    dispatch(duplicateSubsectionQuery(currentSubsection.id, currentSection.id));
+  };
+
+  const handleDuplicateUnitSubmit = () => {
+    dispatch(duplicateUnitQuery(currentItem.id, currentSubsection.id, currentSection.id));
+  };
+
+  const handleVideoSharingOptionChange = (value) => {
+    dispatch(setVideoSharingOptionQuery(courseId, value));
+  };
+
+  const handleDismissNotification = () => {
+    dispatch(dismissNotificationQuery(notificationDismissUrl));
+  };
+
+  const handleSectionDragAndDrop = (
+    sectionListIds,
+    restoreSectionList,
+  ) => {
+    dispatch(setSectionOrderListQuery(
+      courseId,
+      sectionListIds,
+      restoreSectionList,
+    ));
+  };
+
+  const handleSubsectionDragAndDrop = (
+    sectionId,
+    prevSectionId,
+    subsectionListIds,
+    restoreSectionList,
+  ) => {
+    dispatch(setSubsectionOrderListQuery(
+      sectionId,
+      prevSectionId,
+      subsectionListIds,
+      restoreSectionList,
+    ));
+  };
+
+  const handleUnitDragAndDrop = (
+    sectionId,
+    prevSectionId,
+    subsectionId,
+    unitListIds,
+    restoreSectionList,
+  ) => {
+    dispatch(setUnitOrderListQuery(
+      sectionId,
+      subsectionId,
+      prevSectionId,
+      unitListIds,
+      restoreSectionList,
+    ));
+  };
+
+  useEffect(() => {
+    dispatch(fetchCourseOutlineIndexQuery(courseId));
+    dispatch(fetchCourseBestPracticesQuery({ courseId }));
+    dispatch(fetchCourseLaunchQuery({ courseId }));
+  }, [courseId]);
+
+  useEffect(() => {
+    setShowSuccessAlert(reIndexLoadingStatus === RequestStatus.SUCCESSFUL);
+  }, [reIndexLoadingStatus]);
+
+  return {
+    courseActions,
+    savingStatus,
+    sectionsList,
+    isCustomRelativeDatesActive,
+    isLoading: outlineIndexLoadingStatus === RequestStatus.IN_PROGRESS,
+    isLoadingDenied: outlineIndexLoadingStatus === RequestStatus.DENIED,
+    isReIndexShow: Boolean(reindexLink),
+    showSuccessAlert,
+    isDisabledReindexButton,
+    isSectionsExpanded,
+    isPublishModalOpen,
+    openPublishModal,
+    closePublishModal,
+    isConfigureModalOpen,
+    openConfigureModal,
+    handleConfigureModalClose,
+    headerNavigationsActions,
+    handleEnableHighlightsSubmit,
+    handleHighlightsFormSubmit,
+    handleConfigureItemSubmit,
+    handlePublishItemSubmit,
+    handleEditSubmit,
+    statusBarData,
+    isEnableHighlightsModalOpen,
+    openEnableHighlightsModal,
+    closeEnableHighlightsModal,
+    isInternetConnectionAlertFailed: isSavingStatusFailed,
+    handleInternetConnectionFailed,
+    handleOpenHighlightsModal,
+    isHighlightsModalOpen,
+    closeHighlightsModal,
+    courseName: courseStructure?.displayName,
+    isDeleteModalOpen,
+    closeDeleteModal,
+    openDeleteModal,
+    handleDeleteItemSubmit,
+    handleDuplicateSectionSubmit,
+    handleDuplicateSubsectionSubmit,
+    handleDuplicateUnitSubmit,
+    handleNewSectionSubmit,
+    handleNewSubsectionSubmit,
+    getUnitUrl,
+    openUnitPage,
+    handleNewUnitSubmit,
+    handleVideoSharingOptionChange,
+    handleCopyToClipboardClick,
+    handlePasteClipboardClick,
+    notificationDismissUrl,
+    discussionsSettings,
+    discussionsIncontextFeedbackUrl,
+    discussionsIncontextLearnmoreUrl,
+    deprecatedBlocksInfo,
+    proctoringErrors,
+    mfeProctoredExamSettingsUrl,
+    handleDismissNotification,
+    advanceSettingsUrl,
+    genericSavingStatus,
+    handleSectionDragAndDrop,
+    handleSubsectionDragAndDrop,
+    handleUnitDragAndDrop,
+    errors,
+  };
+};
+
+export { useCourseOutline };
diff --git a/src/course-outline/index.js b/src/course-outline/index.js
new file mode 100644
index 0000000000..0e3d68a3ce
--- /dev/null
+++ b/src/course-outline/index.js
@@ -0,0 +1 @@
+export { default as CourseOutline } from './CourseOutline';
diff --git a/src/course-outline/messages.js b/src/course-outline/messages.js
new file mode 100644
index 0000000000..511bf94668
--- /dev/null
+++ b/src/course-outline/messages.js
@@ -0,0 +1,49 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  headingTitle: {
+    id: 'course-authoring.course-outline.headingTitle',
+    defaultMessage: 'Course outline',
+  },
+  headingSubtitle: {
+    id: 'course-authoring.course-outline.subTitle',
+    defaultMessage: 'Content',
+  },
+  alertSuccessTitle: {
+    id: 'course-authoring.course-outline.reindex.alert.success.title',
+    defaultMessage: 'Course index',
+  },
+  alertSuccessDescription: {
+    id: 'course-authoring.course-outline.reindex.alert.success.description',
+    defaultMessage: 'Course has been successfully reindexed.',
+  },
+  alertSuccessAriaLabelledby: {
+    id: 'course-authoring.course-outline.reindex.alert.success.aria.labelledby',
+    defaultMessage: 'alert-confirmation-title',
+  },
+  alertSuccessAriaDescribedby: {
+    id: 'course-authoring.course-outline.reindex.alert.success.aria.describedby',
+    defaultMessage: 'alert-confirmation-description',
+  },
+  newSectionButton: {
+    id: 'course-authoring.course-outline.section-list.button.new-section',
+    defaultMessage: 'New section',
+  },
+  exportTagsCreatingToastMessage: {
+    id: 'course-authoring.course-outline.export-tags.toast.creating.message',
+    defaultMessage: 'Please wait. Creating export file for course tags...',
+    description: 'In progress message in toast when exporting tags of a course',
+  },
+  exportTagsSuccessToastMessage: {
+    id: 'course-authoring.course-outline.export-tags.toast.success.message',
+    defaultMessage: 'Course tags exported successfully',
+    description: 'Success message in toast when exporting tags of a course',
+  },
+  exportTagsErrorToastMessage: {
+    id: 'course-authoring.course-outline.export-tags.toast.error.message',
+    defaultMessage: 'An error has occurred creating the file',
+    description: 'Error message in toast when exporting tags of a course',
+  },
+});
+
+export default messages;
diff --git a/src/course-outline/outline-sidebar/OutlineSidebar.jsx b/src/course-outline/outline-sidebar/OutlineSidebar.jsx
new file mode 100644
index 0000000000..4311b8da85
--- /dev/null
+++ b/src/course-outline/outline-sidebar/OutlineSidebar.jsx
@@ -0,0 +1,66 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Hyperlink } from '@openedx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import { HelpSidebar } from '../../generic/help-sidebar';
+import { useHelpUrls } from '../../help-urls/hooks';
+import { getFormattedSidebarMessages } from './utils';
+
+const OutlineSideBar = ({ courseId }) => {
+  const intl = useIntl();
+  const {
+    visibility: learnMoreVisibilityUrl,
+    grading: learnMoreGradingUrl,
+    outline: learnMoreOutlineUrl,
+  } = useHelpUrls(['visibility', 'grading', 'outline']);
+
+  const sidebarMessages = getFormattedSidebarMessages(
+    {
+      learnMoreGradingUrl,
+      learnMoreOutlineUrl,
+      learnMoreVisibilityUrl,
+    },
+    intl,
+  );
+
+  return (
+    <HelpSidebar
+      intl={intl}
+      courseId={courseId}
+      showOtherSettings={false}
+      className="outline-sidebar mt-4"
+      data-testid="outline-sidebar"
+    >
+      {sidebarMessages.map(({ title, descriptions, link }, index) => {
+        const isLastSection = index === sidebarMessages.length - 1;
+
+        return (
+          <div className="outline-sidebar-section" key={title}>
+            <h4 className="help-sidebar-about-title">{title}</h4>
+            {descriptions.map((description) => (
+              <p className="help-sidebar-about-descriptions" key={description}>{description}</p>
+            ))}
+            {Boolean(link) && Boolean(link.href) && (
+              <Hyperlink
+                className="small"
+                destination={link.href}
+                target="_blank"
+                showLaunchIcon={false}
+              >
+                {link.text}
+              </Hyperlink>
+            )}
+            {!isLastSection && <hr className="my-3.5" />}
+          </div>
+        );
+      })}
+    </HelpSidebar>
+  );
+};
+
+OutlineSideBar.propTypes = {
+  courseId: PropTypes.string.isRequired,
+};
+
+export default OutlineSideBar;
diff --git a/src/course-outline/outline-sidebar/OutlineSidebar.test.jsx b/src/course-outline/outline-sidebar/OutlineSidebar.test.jsx
new file mode 100644
index 0000000000..0df0095bbb
--- /dev/null
+++ b/src/course-outline/outline-sidebar/OutlineSidebar.test.jsx
@@ -0,0 +1,84 @@
+import React from 'react';
+import { render, waitFor } from '@testing-library/react';
+import MockAdapter from 'axios-mock-adapter';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { initializeMockApp } from '@edx/frontend-platform';
+import { AppProvider } from '@edx/frontend-platform/react';
+
+import { helpUrls } from '../../help-urls/__mocks__';
+import { getHelpUrlsApiUrl } from '../../help-urls/data/api';
+import initializeStore from '../../store';
+import OutlineSidebar from './OutlineSidebar';
+import messages from './messages';
+
+let axiosMock;
+let store;
+const mockPathname = '/foo-bar';
+const courseId = '123';
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useLocation: () => ({
+    pathname: mockPathname,
+  }),
+}));
+
+jest.mock('@edx/frontend-platform/i18n', () => ({
+  ...jest.requireActual('@edx/frontend-platform/i18n'),
+  useIntl: () => ({
+    formatMessage: (message) => message.defaultMessage,
+  }),
+}));
+
+const renderComponent = (props) => render(
+  <AppProvider store={store} messages={{}}>
+    <IntlProvider locale="en">
+      <OutlineSidebar courseId={courseId} {...props} />
+    </IntlProvider>
+  </AppProvider>,
+);
+
+describe('<OutlineSidebar />', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+    store = initializeStore();
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+    axiosMock
+      .onGet(getHelpUrlsApiUrl())
+      .reply(200, helpUrls);
+  });
+
+  it('render OutlineSidebar component correctly', async () => {
+    const { getByText } = renderComponent();
+
+    await waitFor(() => {
+      expect(getByText(messages.section_1_title.defaultMessage)).toBeInTheDocument();
+      expect(getByText(messages.section_1_descriptions_1.defaultMessage)).toBeInTheDocument();
+      expect(getByText(messages.section_1_descriptions_2.defaultMessage)).toBeInTheDocument();
+
+      expect(getByText(messages.section_2_title.defaultMessage)).toBeInTheDocument();
+      expect(getByText(messages.section_2_descriptions_1.defaultMessage)).toBeInTheDocument();
+      expect(getByText(messages.section_2_link.defaultMessage)).toBeInTheDocument();
+
+      expect(getByText(messages.section_3_title.defaultMessage)).toBeInTheDocument();
+      expect(getByText(messages.section_3_descriptions_1.defaultMessage)).toBeInTheDocument();
+      expect(getByText(messages.section_3_link.defaultMessage)).toBeInTheDocument();
+
+      expect(getByText(messages.section_4_title.defaultMessage)).toBeInTheDocument();
+      expect(getByText(messages.section_4_descriptions_1.defaultMessage)).toBeInTheDocument();
+
+      expect(getByText(messages.section_4_descriptions_2.defaultMessage)).toBeInTheDocument();
+      expect(getByText(messages.section_4_descriptions_3.defaultMessage)).toBeInTheDocument();
+
+      expect(getByText(messages.section_4_link.defaultMessage)).toBeInTheDocument();
+    });
+  });
+});
diff --git a/src/course-outline/outline-sidebar/messages.js b/src/course-outline/outline-sidebar/messages.js
new file mode 100644
index 0000000000..7ef0cf0cfb
--- /dev/null
+++ b/src/course-outline/outline-sidebar/messages.js
@@ -0,0 +1,70 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  section_1_title: {
+    id: 'course-authoring.course-outline.sidebar.section-1.title',
+    defaultMessage: 'Creating your course organization',
+  },
+  section_1_descriptions_1: {
+    id: 'course-authoring.course-outline.sidebar.section-1.descriptions-1',
+    defaultMessage: 'You add sections, subsections, and units directly in the outline.',
+  },
+  section_1_descriptions_2: {
+    id: 'course-authoring.course-outline.sidebar.section-1.descriptions-2',
+    defaultMessage: 'Create a section, then add subsections and units. Open a unit to add course components.',
+  },
+  section_2_title: {
+    id: 'course-authoring.course-outline.sidebar.section-2.title',
+    defaultMessage: 'Reorganizing your course',
+  },
+  section_2_descriptions_1: {
+    id: 'course-authoring.course-outline.sidebar.section-2.descriptions-1',
+    defaultMessage: 'Drag sections, subsections, and units to new locations in the outline.',
+  },
+  section_2_link: {
+    id: 'course-authoring.course-outline.sidebar.section-2.link',
+    defaultMessage: 'Learn more about the course outline',
+  },
+  section_3_title: {
+    id: 'course-authoring.course-outline.sidebar.section-3.title',
+    defaultMessage: 'Setting release dates and grading policies',
+  },
+  section_3_descriptions_1: {
+    id: 'course-authoring.course-outline.sidebar.section-3.descriptions-1',
+    defaultMessage: 'Select the Configure icon for a section or subsection to set its release date. When you configure a subsection, you can also set the grading policy and due date.',
+  },
+  section_3_link: {
+    id: 'course-authoring.course-outline.sidebar.section-3.link',
+    defaultMessage: 'Learn more about grading policy settings',
+  },
+  section_4_title: {
+    id: 'course-authoring.course-outline.sidebar.section-4.title',
+    defaultMessage: 'Changing the content learners see',
+  },
+  section_4_descriptions_1: {
+    id: 'course-authoring.course-outline.sidebar.section-4.descriptions-1',
+    defaultMessage: 'To publish draft content, select the Publish icon for a section, subsection, or unit.',
+  },
+  section_4_descriptions_2: {
+    id: 'course-authoring.course-outline.sidebar.section-4.descriptions-2',
+    defaultMessage: 'To make a section, subsection, or unit unavailable to learners, select the Configure icon for that level, then select the appropriate {hide} option. Grades for hidden sections, subsections, and units are not included in grade calculations.',
+  },
+  section_4_descriptions_2_hide: {
+    id: 'course-authoring.course-outline.sidebar.section-4.descriptions-2.hide',
+    defaultMessage: 'Hide',
+  },
+  section_4_descriptions_3: {
+    id: 'course-authoring.course-outline.sidebar.section-4.descriptions-3',
+    defaultMessage: 'To hide the content of a subsection from learners after the subsection due date has passed, select the Configure icon for a subsection, then select {hide}. Grades for the subsection remain included in grade calculations.',
+  },
+  section_4_descriptions_3_hide: {
+    id: 'course-authoring.course-outline.sidebar.section-4.descriptions-3.hide',
+    defaultMessage: 'Hide content after due date',
+  },
+  section_4_link: {
+    id: 'course-authoring.course-outline.sidebar.section-4.link',
+    defaultMessage: 'Learn more about content visibility settings',
+  },
+});
+
+export default messages;
diff --git a/src/course-outline/outline-sidebar/utils.jsx b/src/course-outline/outline-sidebar/utils.jsx
new file mode 100644
index 0000000000..5135c5afa5
--- /dev/null
+++ b/src/course-outline/outline-sidebar/utils.jsx
@@ -0,0 +1,68 @@
+import React from 'react';
+import messages from './messages';
+
+/**
+ * Get formatted sidebar messages for render
+ * @param {object} docsLinks - Docs links object from store
+ * @returns {Array<{
+ *   title: string,
+ *   descriptions: Array<string>,
+ *   link?: {
+ *     text: string,
+ *     href: string
+ *   }
+ * }>}
+ */
+const getFormattedSidebarMessages = (docsLinks, intl) => {
+  const { learnMoreOutlineUrl, learnMoreGradingUrl, learnMoreVisibilityUrl } = docsLinks;
+
+  return [
+    {
+      title: intl.formatMessage(messages.section_1_title),
+      descriptions: [
+        intl.formatMessage(messages.section_1_descriptions_1),
+        intl.formatMessage(messages.section_1_descriptions_2),
+      ],
+    },
+    {
+      title: intl.formatMessage(messages.section_2_title),
+      descriptions: [
+        intl.formatMessage(messages.section_2_descriptions_1),
+      ],
+      link: {
+        text: intl.formatMessage(messages.section_2_link),
+        href: learnMoreOutlineUrl,
+      },
+    },
+    {
+      title: intl.formatMessage(messages.section_3_title),
+      descriptions: [
+        intl.formatMessage(messages.section_3_descriptions_1),
+      ],
+      link: {
+        text: intl.formatMessage(messages.section_3_link),
+        href: learnMoreGradingUrl,
+      },
+    },
+    {
+      title: intl.formatMessage(messages.section_4_title),
+      descriptions: [
+        intl.formatMessage(messages.section_4_descriptions_1),
+        intl.formatMessage(
+          messages.section_4_descriptions_2,
+          { hide: <strong>{intl.formatMessage(messages.section_4_descriptions_2_hide)}</strong> },
+        ),
+        intl.formatMessage(
+          messages.section_4_descriptions_3,
+          { hide: <strong>{intl.formatMessage(messages.section_4_descriptions_3_hide)}</strong> },
+        ),
+      ],
+      link: {
+        text: intl.formatMessage(messages.section_4_link),
+        href: learnMoreVisibilityUrl,
+      },
+    },
+  ];
+};
+
+export { getFormattedSidebarMessages };
diff --git a/src/course-outline/page-alerts/PageAlerts.jsx b/src/course-outline/page-alerts/PageAlerts.jsx
new file mode 100644
index 0000000000..4b12996395
--- /dev/null
+++ b/src/course-outline/page-alerts/PageAlerts.jsx
@@ -0,0 +1,476 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { uniqBy } from 'lodash';
+import { getConfig } from '@edx/frontend-platform';
+import { useDispatch, useSelector } from 'react-redux';
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
+import {
+  Campaign as CampaignIcon,
+  InfoOutline as InfoOutlineIcon,
+  Warning as WarningIcon,
+  Error as ErrorIcon,
+} from '@openedx/paragon/icons';
+import {
+  Alert, Button, Hyperlink, Truncate,
+} from '@openedx/paragon';
+import { Link } from 'react-router-dom';
+
+import ErrorAlert from '../../editors/sharedComponents/ErrorAlerts/ErrorAlert';
+import { RequestStatus } from '../../data/constants';
+import AlertMessage from '../../generic/alert-message';
+import AlertProctoringError from '../../generic/AlertProctoringError';
+import messages from './messages';
+import advancedSettingsMessages from '../../advanced-settings/messages';
+import { getPasteFileNotices } from '../data/selectors';
+import { dismissError, removePasteFileNotices } from '../data/slice';
+import { API_ERROR_TYPES } from '../constants';
+
+const PageAlerts = ({
+  courseId,
+  notificationDismissUrl,
+  handleDismissNotification,
+  discussionsSettings,
+  discussionsIncontextFeedbackUrl,
+  discussionsIncontextLearnmoreUrl,
+  deprecatedBlocksInfo,
+  proctoringErrors,
+  mfeProctoredExamSettingsUrl,
+  advanceSettingsUrl,
+  savingStatus,
+  errors,
+}) => {
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const studioBaseUrl = getConfig().STUDIO_BASE_URL;
+  const discussionAlertDismissKey = `discussionAlertDismissed-${courseId}`;
+  const [showConfigAlert, setShowConfigAlert] = useState(true);
+  const [showDiscussionAlert, setShowDiscussionAlert] = useState(
+    localStorage.getItem(discussionAlertDismissKey) === null,
+  );
+  const { newFiles, conflictingFiles, errorFiles } = useSelector(getPasteFileNotices);
+
+  const getAssetsUrl = () => {
+    if (getConfig().ENABLE_ASSETS_PAGE === 'true') {
+      return `/course/${courseId}/assets/`;
+    }
+    return `${getConfig().STUDIO_BASE_URL}/assets/${courseId}`;
+  };
+
+  const configurationErrors = () => {
+    if (!notificationDismissUrl) {
+      return null;
+    }
+
+    const onDismiss = () => {
+      setShowConfigAlert(false);
+      handleDismissNotification();
+    };
+
+    return (
+      <AlertMessage
+        title={intl.formatMessage(messages.configurationErrorTitle)}
+        description={intl.formatMessage(messages.configurationErrorText)}
+        dismissible
+        show={showConfigAlert}
+        icon={CampaignIcon}
+        variant="info"
+        onClose={onDismiss}
+      />
+    );
+  };
+
+  const discussionNotification = () => {
+    const { providerType } = discussionsSettings || {};
+    if (providerType !== 'openedx') {
+      return null;
+    }
+
+    const onDismiss = () => {
+      setShowDiscussionAlert(false);
+      localStorage.setItem(discussionAlertDismissKey, 'true');
+    };
+
+    return (
+      <Alert
+        dismissible
+        show={showDiscussionAlert}
+        icon={InfoOutlineIcon}
+        variant="info"
+        onClose={onDismiss}
+        actions={[
+          <Button
+            href={discussionsIncontextLearnmoreUrl}
+            target="_blank"
+          >
+            {intl.formatMessage(messages.discussionNotificationLearnMore)}
+          </Button>,
+        ]}
+      >
+        <div className="font-weight-normal text-gray mw-md">
+          {intl.formatMessage(messages.discussionNotificationText, {
+            platformName: process.env.SITE_NAME,
+          })}
+        </div>
+        <Hyperlink
+          showLaunchIcon={false}
+          destination={discussionsIncontextFeedbackUrl}
+          target="_blank"
+        >
+          {intl.formatMessage(messages.discussionNotificationFeedback)}
+        </Hyperlink>
+      </Alert>
+    );
+  };
+
+  const deprecationWarning = () => {
+    const {
+      blocks,
+      deprecatedEnabledBlockTypes,
+    } = deprecatedBlocksInfo || {};
+
+    if (blocks?.length > 0 || deprecatedEnabledBlockTypes?.length > 0) {
+      return (
+        <Alert
+          icon={WarningIcon}
+          variant="warning"
+        >
+          <Alert.Heading>
+            {intl.formatMessage(messages.deprecationWarningTitle)}
+          </Alert.Heading>
+          {blocks?.length > 0 && (
+            <>
+              <div>
+                {intl.formatMessage(messages.deprecationWarningBlocksText)}
+              </div>
+              <ul>
+                {blocks.map(([parentUrl, name]) => (
+                  <li key={parentUrl}>
+                    <Hyperlink
+                      destination={parentUrl}
+                    >
+                      {name || intl.formatMessage(messages.deprecatedComponentName)}
+                    </Hyperlink>
+                  </li>
+                ))}
+              </ul>
+            </>
+          )}
+          {deprecatedEnabledBlockTypes?.length > 0 && (
+            <>
+              <div>
+                <FormattedMessage
+                  {...messages.deprecationWarningDeprecatedBlockText}
+                  values={{
+                    platformName: process.env.SITE_NAME,
+                    hyperlink: (
+                      <Hyperlink
+                        destination={`${studioBaseUrl}${deprecatedBlocksInfo.advanceSettingsUrl}`}
+                        target="_blank"
+                        showLaunchIcon={false}
+                      >
+                        <FormattedMessage
+                          {...messages.advancedSettingLinkText}
+                        />
+                      </Hyperlink>
+                    ),
+                  }}
+                />
+              </div>
+              <ul>
+                {deprecatedEnabledBlockTypes.map((name) => (
+                  <li key={name}>
+                    {name}
+                  </li>
+                ))}
+              </ul>
+            </>
+          )}
+        </Alert>
+      );
+    }
+
+    return null;
+  };
+
+  const proctoringAlerts = () => {
+    if (proctoringErrors?.length > 0) {
+      return (
+        <AlertProctoringError
+          icon={InfoOutlineIcon}
+          proctoringErrorsData={proctoringErrors}
+          aria-hidden="true"
+          aria-labelledby={intl.formatMessage(advancedSettingsMessages.alertProctoringAriaLabelledby)}
+          aria-describedby={intl.formatMessage(advancedSettingsMessages.alertProctoringDescribedby)}
+        >
+          <Alert.Heading>
+            {intl.formatMessage(messages.proctoringErrorTitle)}
+          </Alert.Heading>
+          <div className="mb-2">
+            {mfeProctoredExamSettingsUrl
+              ? (
+                <FormattedMessage
+                  {...messages.proctoringErrorText}
+                  values={{
+                    hyperlink: (
+                      <Hyperlink
+                        destination={mfeProctoredExamSettingsUrl}
+                        target="_blank"
+                        showLaunchIcon={false}
+                      >
+                        <FormattedMessage
+                          {...messages.proctoredSettingsLinkText}
+                        />
+                      </Hyperlink>
+                    ),
+                  }}
+                />
+              ) : (
+                <FormattedMessage
+                  {...messages.proctoringErrorText}
+                  values={{
+                    hyperlink: (
+                      <Hyperlink
+                        destination={`${studioBaseUrl}${advanceSettingsUrl}`}
+                        target="_blank"
+                        showLaunchIcon={false}
+                      >
+                        <FormattedMessage
+                          {...messages.advancedSettingLinkText}
+                        />
+                      </Hyperlink>
+                    ),
+                  }}
+                />
+              )}
+          </div>
+        </AlertProctoringError>
+      );
+    }
+    return null;
+  };
+
+  const newFilesPasteAlert = () => {
+    const onDismiss = () => {
+      dispatch(removePasteFileNotices(['newFiles']));
+    };
+
+    if (newFiles?.length) {
+      return (
+        <AlertMessage
+          title={intl.formatMessage(messages.newFileAlertTitle, { newFilesLen: newFiles.length })}
+          description={intl.formatMessage(
+            messages.newFileAlertDesc,
+            { newFilesLen: newFiles.length, newFilesStr: newFiles.join(', ') },
+          )}
+          dismissible
+          show
+          icon={CampaignIcon}
+          variant="info"
+          onClose={onDismiss}
+          actions={[
+            <Button
+              as={Link}
+              to={getAssetsUrl()}
+            >
+              {intl.formatMessage(messages.newFileAlertAction)}
+            </Button>,
+          ]}
+        />
+      );
+    }
+    return null;
+  };
+
+  const errorFilesPasteAlert = () => {
+    const onDismiss = () => {
+      dispatch(removePasteFileNotices(['errorFiles']));
+    };
+
+    if (errorFiles?.length) {
+      return (
+        <AlertMessage
+          title={intl.formatMessage(messages.errorFileAlertTitle)}
+          description={intl.formatMessage(
+            messages.errorFileAlertDesc,
+            { errorFilesLen: errorFiles.length, errorFilesStr: errorFiles.join(', ') },
+          )}
+          dismissible
+          show
+          icon={WarningIcon}
+          variant="danger"
+          onClose={onDismiss}
+        />
+      );
+    }
+    return null;
+  };
+
+  const conflictingFilesPasteAlert = () => {
+    const onDismiss = () => {
+      dispatch(removePasteFileNotices(['conflictingFiles']));
+    };
+
+    if (conflictingFiles?.length) {
+      return (
+        <AlertMessage
+          title={intl.formatMessage(
+            messages.conflictingFileAlertTitle,
+            { conflictingFilesLen: conflictingFiles.length },
+          )}
+          description={intl.formatMessage(
+            messages.conflictingFileAlertDesc,
+            { conflictingFilesLen: conflictingFiles.length, conflictingFilesStr: conflictingFiles.join(', ') },
+          )}
+          dismissible
+          show
+          icon={WarningIcon}
+          variant="warning"
+          onClose={onDismiss}
+          actions={[
+            <Button
+              as={Link}
+              to={getAssetsUrl()}
+            >
+              {intl.formatMessage(messages.newFileAlertAction)}
+            </Button>,
+          ]}
+        />
+      );
+    }
+    return null;
+  };
+
+  const renderApiErrors = () => {
+    let errorList = Object.entries(errors).filter(obj => obj[1] !== null).map(([k, v]) => {
+      switch (v.type) {
+        case API_ERROR_TYPES.serverError:
+          return {
+            key: k,
+            desc: v.data || intl.formatMessage(messages.serverErrorAlertBody),
+            title: intl.formatMessage(messages.serverErrorAlert),
+            dismissible: v.dismissible,
+          };
+        case API_ERROR_TYPES.networkError:
+          return {
+            key: k,
+            title: intl.formatMessage(messages.networkErrorAlert),
+            dismissible: v.dismissible,
+          };
+        default:
+          return {
+            key: k,
+            title: v.data,
+            dismissible: v.dismissible,
+          };
+      }
+    });
+    errorList = uniqBy(errorList, 'title');
+    if (!errorList?.length) {
+      return null;
+    }
+    return (
+      errorList.map((msgObj) => (
+        msgObj.dismissible ? (
+          <ErrorAlert
+            isError
+            hideHeading
+            key={msgObj.key}
+            dismissError={() => dispatch(dismissError(msgObj.key))}
+          >
+            <Alert.Heading>{msgObj.title}</Alert.Heading>
+            {msgObj.desc && <Truncate lines={2}>{msgObj.desc}</Truncate>}
+          </ErrorAlert>
+        ) : (
+          <Alert
+            variant="danger"
+            icon={ErrorIcon}
+            key={msgObj.key}
+          >
+            <Alert.Heading>{msgObj.title}</Alert.Heading>
+            {msgObj.desc && <Truncate lines={2}>{msgObj.desc}</Truncate>}
+          </Alert>
+        )
+      ))
+    );
+  };
+
+  return (
+    <>
+      {configurationErrors()}
+      {discussionNotification()}
+      {deprecationWarning()}
+      {proctoringAlerts()}
+      <ErrorAlert hideHeading isError={savingStatus === RequestStatus.FAILED}>
+        {intl.formatMessage(messages.alertFailedGeneric, { actionName: 'save', type: 'changes' })}
+      </ErrorAlert>
+      {renderApiErrors()}
+      {errorFilesPasteAlert()}
+      {conflictingFilesPasteAlert()}
+      {newFilesPasteAlert()}
+    </>
+  );
+};
+
+PageAlerts.defaultProps = {
+  notificationDismissUrl: '',
+  handleDismissNotification: null,
+  discussionsSettings: {},
+  discussionsIncontextFeedbackUrl: '',
+  discussionsIncontextLearnmoreUrl: '',
+  deprecatedBlocksInfo: {},
+  proctoringErrors: [],
+  mfeProctoredExamSettingsUrl: '',
+  advanceSettingsUrl: '',
+  savingStatus: '',
+  errors: {},
+};
+
+PageAlerts.propTypes = {
+  courseId: PropTypes.string.isRequired,
+  notificationDismissUrl: PropTypes.string,
+  handleDismissNotification: PropTypes.func,
+  discussionsSettings: PropTypes.shape({
+    providerType: PropTypes.string,
+  }),
+  discussionsIncontextFeedbackUrl: PropTypes.string,
+  discussionsIncontextLearnmoreUrl: PropTypes.string,
+  deprecatedBlocksInfo: PropTypes.shape({
+    blocks: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string)),
+    deprecatedEnabledBlockTypes: PropTypes.arrayOf(PropTypes.string),
+    advanceSettingsUrl: PropTypes.string,
+  }),
+  proctoringErrors: PropTypes.arrayOf(PropTypes.shape({
+    key: PropTypes.string,
+    message: PropTypes.string,
+    model: PropTypes.shape({
+      deprecated: PropTypes.bool,
+      displayName: PropTypes.string,
+      help: PropTypes.string,
+      hideOnEnabledPublisher: PropTypes.bool,
+    }),
+    value: PropTypes.string,
+  })),
+  mfeProctoredExamSettingsUrl: PropTypes.string,
+  advanceSettingsUrl: PropTypes.string,
+  savingStatus: PropTypes.string,
+  errors: PropTypes.shape({
+    outlineIndexApi: PropTypes.shape({
+      data: PropTypes.string,
+      type: PropTypes.string.isRequired,
+    }),
+    reindexApi: PropTypes.shape({
+      data: PropTypes.string,
+      type: PropTypes.string.isRequired,
+    }),
+    sectionLoadingApi: PropTypes.shape({
+      data: PropTypes.string,
+      type: PropTypes.string.isRequired,
+    }),
+    courseLaunchApi: PropTypes.shape({
+      data: PropTypes.string,
+      type: PropTypes.string.isRequired,
+    }),
+  }),
+};
+
+export default PageAlerts;
diff --git a/src/course-outline/page-alerts/PageAlerts.test.jsx b/src/course-outline/page-alerts/PageAlerts.test.jsx
new file mode 100644
index 0000000000..6d646f7cb4
--- /dev/null
+++ b/src/course-outline/page-alerts/PageAlerts.test.jsx
@@ -0,0 +1,221 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import {
+  act,
+  render,
+  fireEvent,
+  screen,
+  waitFor,
+} from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { AppProvider } from '@edx/frontend-platform/react';
+import { initializeMockApp, getConfig } from '@edx/frontend-platform';
+
+import PageAlerts from './PageAlerts';
+import messages from './messages';
+import initializeStore from '../../store';
+import { API_ERROR_TYPES } from '../constants';
+
+jest.mock('@edx/frontend-platform/i18n', () => ({
+  ...jest.requireActual('@edx/frontend-platform/i18n'),
+  useIntl: () => ({
+    formatMessage: (message) => message.defaultMessage,
+  }),
+}));
+
+jest.mock('react-redux', () => ({
+  ...jest.requireActual('react-redux'),
+  useSelector: jest.fn(),
+}));
+
+let store;
+const handleDismissNotification = jest.fn();
+
+const pageAlertsData = {
+  courseId: 'course-id',
+  notificationDismissUrl: '',
+  handleDismissNotification: null,
+  discussionsSettings: {},
+  discussionsIncontextFeedbackUrl: '',
+  discussionsIncontextLearnmoreUrl: '',
+  deprecatedBlocksInfo: {},
+  proctoringErrors: [],
+  mfeProctoredExamSettingsUrl: '',
+  advanceSettingsUrl: '',
+  savingStatus: '',
+};
+
+const renderComponent = (props) => render(
+  <AppProvider store={store} messages={{}}>
+    <IntlProvider locale="en">
+      <PageAlerts
+        {...pageAlertsData}
+        {...props}
+      />
+    </IntlProvider>
+  </AppProvider>,
+);
+
+describe('<PageAlerts />', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+    store = initializeStore();
+    useSelector.mockReturnValue({});
+  });
+
+  it('renders null when no alerts are present', () => {
+    const { queryByTestId } = renderComponent();
+    expect(queryByTestId('browser-router')).toBeEmptyDOMElement();
+  });
+
+  it('renders configuration alerts', async () => {
+    const { queryByText } = renderComponent({
+      ...pageAlertsData,
+      notificationDismissUrl: 'some-url',
+      handleDismissNotification,
+    });
+
+    expect(queryByText(messages.configurationErrorTitle.defaultMessage)).toBeInTheDocument();
+    const dismissBtn = queryByText('Dismiss');
+    await act(async () => fireEvent.click(dismissBtn));
+
+    expect(handleDismissNotification).toBeCalled();
+  });
+
+  it('renders discussion alerts', async () => {
+    renderComponent({
+      ...pageAlertsData,
+      discussionsSettings: {
+        providerType: 'openedx',
+      },
+      discussionsIncontextFeedbackUrl: 'some-feedback-url',
+      discussionsIncontextLearnmoreUrl: 'some-learn-more-url',
+    });
+
+    expect(screen.queryByText(messages.discussionNotificationText.defaultMessage)).toBeInTheDocument();
+    const learnMoreBtn = screen.queryByText(messages.discussionNotificationLearnMore.defaultMessage);
+    expect(learnMoreBtn).toBeInTheDocument();
+    expect(learnMoreBtn).toHaveAttribute('href', 'some-learn-more-url');
+
+    const dismissBtn = screen.queryByText('Dismiss');
+    fireEvent.click(dismissBtn);
+    const discussionAlertDismissKey = `discussionAlertDismissed-${pageAlertsData.courseId}`;
+    expect(localStorage.getItem(discussionAlertDismissKey)).toBe('true');
+
+    await waitFor(() => {
+      const feedbackLink = screen.queryByText(messages.discussionNotificationFeedback.defaultMessage);
+      expect(feedbackLink).toBeInTheDocument();
+      expect(feedbackLink).toHaveAttribute('href', 'some-feedback-url');
+    });
+  });
+
+  it('renders deprecation warning alerts', async () => {
+    const { queryByText } = renderComponent({
+      ...pageAlertsData,
+      deprecatedBlocksInfo: {
+        blocks: [['url1', 'block1'], ['url2']],
+        deprecatedEnabledBlockTypes: ['lti', 'video'],
+        advanceSettingsUrl: '/some-url',
+      },
+    });
+
+    expect(queryByText(messages.deprecationWarningTitle.defaultMessage)).toBeInTheDocument();
+    expect(queryByText(messages.deprecationWarningBlocksText.defaultMessage)).toBeInTheDocument();
+    expect(queryByText('block1')).toHaveAttribute('href', 'url1');
+    expect(queryByText(messages.deprecatedComponentName.defaultMessage)).toHaveAttribute('href', 'url2');
+
+    const feedbackLink = queryByText(messages.advancedSettingLinkText.defaultMessage);
+    expect(feedbackLink).toBeInTheDocument();
+    expect(feedbackLink).toHaveAttribute('href', `${getConfig().STUDIO_BASE_URL}/some-url`);
+    expect(queryByText('lti')).toBeInTheDocument();
+    expect(queryByText('video')).toBeInTheDocument();
+  });
+
+  it('renders proctoring alerts with mfe settings link', async () => {
+    const { queryByText } = renderComponent({
+      ...pageAlertsData,
+      mfeProctoredExamSettingsUrl: 'mfe-url',
+      proctoringErrors: [
+        { key: '1', model: { displayName: 'error 1' }, message: 'message 1' },
+        { key: '2', model: { displayName: 'error 2' }, message: 'message 2' },
+      ],
+    });
+
+    expect(queryByText('error 1')).toBeInTheDocument();
+    expect(queryByText('error 2')).toBeInTheDocument();
+    expect(queryByText('message 1')).toBeInTheDocument();
+    expect(queryByText('message 2')).toBeInTheDocument();
+    expect(queryByText(messages.proctoredSettingsLinkText.defaultMessage)).toHaveAttribute('href', 'mfe-url');
+  });
+
+  it('renders proctoring alerts without mfe settings link', async () => {
+    const { queryByText } = renderComponent({
+      ...pageAlertsData,
+      advanceSettingsUrl: '/some-url',
+      proctoringErrors: [
+        { key: '1', model: { displayName: 'error 1' }, message: 'message 1' },
+        { key: '2', model: { displayName: 'error 2' }, message: 'message 2' },
+      ],
+    });
+
+    expect(queryByText('error 1')).toBeInTheDocument();
+    expect(queryByText('error 2')).toBeInTheDocument();
+    expect(queryByText('message 1')).toBeInTheDocument();
+    expect(queryByText('message 2')).toBeInTheDocument();
+    expect(queryByText(messages.advancedSettingLinkText.defaultMessage)).toHaveAttribute(
+      'href',
+      `${getConfig().STUDIO_BASE_URL}/some-url`,
+    );
+  });
+
+  it('renders new & error files alert', async () => {
+    useSelector.mockReturnValue({
+      newFiles: ['periodic-table.css'],
+      conflictingFiles: [],
+      errorFiles: ['error.css'],
+    });
+    const { queryByText } = renderComponent();
+    expect(queryByText(messages.newFileAlertTitle.defaultMessage)).toBeInTheDocument();
+    expect(queryByText(messages.errorFileAlertTitle.defaultMessage)).toBeInTheDocument();
+    expect(queryByText(messages.newFileAlertAction.defaultMessage)).toHaveAttribute(
+      'href',
+      `${getConfig().STUDIO_BASE_URL}/assets/course-id`,
+    );
+  });
+
+  it('renders conflicting files alert', async () => {
+    useSelector.mockReturnValue({
+      newFiles: [],
+      conflictingFiles: ['some.css', 'some.js'],
+      errorFiles: [],
+    });
+    const { queryByText } = renderComponent();
+    expect(queryByText(messages.conflictingFileAlertTitle.defaultMessage)).toBeInTheDocument();
+    expect(queryByText(messages.newFileAlertAction.defaultMessage)).toHaveAttribute(
+      'href',
+      `${getConfig().STUDIO_BASE_URL}/assets/course-id`,
+    );
+  });
+
+  it('renders api error alerts', async () => {
+    const { queryByText } = renderComponent({
+      ...pageAlertsData,
+      errors: {
+        outlineIndexApi: { data: 'some error', status: 400, type: API_ERROR_TYPES.serverError },
+        courseLaunchApi: { type: API_ERROR_TYPES.networkError },
+        reindexApi: { type: API_ERROR_TYPES.unknown, data: 'some unknown error' },
+      },
+    });
+    expect(queryByText(messages.networkErrorAlert.defaultMessage)).toBeInTheDocument();
+    expect(queryByText(messages.serverErrorAlert.defaultMessage)).toBeInTheDocument();
+    expect(queryByText('some error')).toBeInTheDocument();
+    expect(queryByText('some unknown error')).toBeInTheDocument();
+  });
+});
diff --git a/src/course-outline/page-alerts/messages.js b/src/course-outline/page-alerts/messages.js
new file mode 100644
index 0000000000..f9638398d8
--- /dev/null
+++ b/src/course-outline/page-alerts/messages.js
@@ -0,0 +1,126 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  configurationErrorTitle: {
+    id: 'course-authoring.course-outline.page-alerts.configurationErrorTitle',
+    defaultMessage: 'This course was created as a re-run. Some manual configuration is needed.',
+    description: 'Configuration error alert title in course outline.',
+  },
+  configurationErrorText: {
+    id: 'course-authoring.course-outline.page-alerts.configurationErrorText',
+    defaultMessage: 'No course content is currently visible, and no learners are enrolled. Be sure to review and reset all dates, including the Course Start Date; set up the course team; review course updates and other assets for dated material; and seed the discussions and wiki.',
+    description: 'Configuration error alert body in course outline.',
+  },
+  discussionNotificationText: {
+    id: 'course-authoring.course-outline.page-alerts.discussionNotificationText',
+    defaultMessage: 'This course run is using an upgraded version of {platformName} discussion forum. In order to display the discussions sidebar, discussions xBlocks will no longer be visible to learners.',
+    description: 'Alert text for informing users about upgraded version of discussions forum.',
+  },
+  discussionNotificationLearnMore: {
+    id: 'course-authoring.course-outline.page-alerts.discussionNotificationLearnMore',
+    defaultMessage: 'Learn more',
+    description: 'Learn more link in upgraded discussion notification alert',
+  },
+  discussionNotificationFeedback: {
+    id: 'course-authoring.course-outline.page-alerts.discussionNotificationFeedback',
+    defaultMessage: 'Share feedback',
+    description: 'Share feedback link in upgraded discussion notification alert',
+  },
+  deprecationWarningTitle: {
+    id: 'course-authoring.course-outline.page-alerts.deprecationWarningTitle',
+    defaultMessage: 'This course uses features that are no longer supported.',
+    description: 'Alert title informing users about deprecated features being used in course that are not supported.',
+  },
+  deprecationWarningBlocksText: {
+    id: 'course-authoring.course-outline.page-alerts.deprecationWarningBlocksText',
+    defaultMessage: 'You must delete or replace the following components.',
+    description: 'Alert body text informing users about deprecated components which needs to be removed or replaced.',
+  },
+  deprecationWarningDeprecatedBlockText: {
+    id: 'course-authoring.course-outline.page-alerts.deprecationWarningDeprecatedBlockText',
+    defaultMessage: 'To avoid errors, {platformName} strongly recommends that you remove unsupported features from the course advanced settings. To do this, go to the {hyperlink}, locate the "Advanced Module List" setting, and then delete the following modules from the list.',
+    description: 'Alert body text informing users about how to remove deprecated components/modules.',
+  },
+  advancedSettingLinkText: {
+    id: 'course-authoring.course-outline.page-alerts.advancedSettingLinkText',
+    defaultMessage: 'Advanced Settings page',
+    description: 'Advanced settings page link text',
+  },
+  deprecatedComponentName: {
+    id: 'course-authoring.course-outline.page-alerts.deprecatedComponentName',
+    defaultMessage: 'Deprecated Component',
+    description: 'Default name for a deprecated component.',
+  },
+  proctoringErrorTitle: {
+    id: 'course-authoring.course-outline.page-alerts.proctoringErrorTitle',
+    defaultMessage: 'This course has proctored exam settings that are incomplete or invalid.',
+    description: 'Proctoring settings errors alert title.',
+  },
+  proctoringErrorText: {
+    id: 'course-authoring.course-outline.page-alerts.proctoringErrorText',
+    defaultMessage: 'To update these settings go to the {hyperlink}.',
+    description: 'Proctoring settings errors alert body text.',
+  },
+  proctoredSettingsLinkText: {
+    id: 'course-authoring.course-outline.page-alerts.proctoredSettingsLinkText',
+    defaultMessage: 'Proctored Exam Settings page',
+    description: 'Proctoring settings page link text.',
+  },
+  alertFailedGeneric: {
+    id: 'course-authoring.course-outline.page-alert.generic-error.description',
+    defaultMessage: 'Unable to {actionName} {type}. Please try again.',
+    description: 'Generic alert text.',
+  },
+  newFileAlertTitle: {
+    id: 'course-authoring.course-outline.page-alert.paste-alert.new-files.title',
+    defaultMessage: 'New {newFilesLen, plural, one {file} other {files}} added to Files.',
+    description: 'This title is displayed when new files are successfully imported into the course after pasting an unit.',
+  },
+  newFileAlertDesc: {
+    id: 'course-authoring.course-outline.page-alert.paste-alert.new-files.description',
+    defaultMessage: 'The following required {newFilesLen, plural, one {file was} other {files were}} imported to this course: {newFilesStr}',
+    description: 'This description is displayed when new files are successfully imported into the course after pasting an unit',
+  },
+  newFileAlertAction: {
+    id: 'course-authoring.course-outline.page-alert.paste-alert.new-files.action',
+    defaultMessage: 'View files',
+    description: 'This label is used as the text for a button that allows the user to view the imported files.',
+  },
+  errorFileAlertTitle: {
+    id: 'course-authoring.course-outline.page-alert.paste-alert.error-files.title',
+    defaultMessage: 'Some errors occurred',
+    description: 'This title is displayed when there are errors during the import of files while pasting an unit.',
+  },
+  errorFileAlertDesc: {
+    id: 'course-authoring.course-outline.page-alert.paste-alert.error-files.description',
+    defaultMessage: 'The following required {errorFilesLen, plural, one {file} other {files}} could not be added to the course: {errorFilesStr}',
+    description: 'This description is displayed when there are errors during the import of files and lists the files that could not be imported.',
+  },
+  conflictingFileAlertTitle: {
+    id: 'course-authoring.course-outline.page-alert.paste-alert.conflicting-files.title',
+    defaultMessage: 'You may need to update {conflictingFilesLen, plural, one {a file} other {files}} manually',
+    description: 'This alert title is displayed when files being imported conflict with existing files in the course.',
+  },
+  conflictingFileAlertDesc: {
+    id: 'course-authoring.course-outline.page-alert.paste-alert.new-conflicting.description',
+    defaultMessage: 'The following {conflictingFilesLen, plural, one {file} other {files}} already exist in this course but don\'t match the version used by the component you pasted:  {conflictingFilesStr}',
+    description: 'This alert description is displayed when files being imported conflict with existing files in the course and advises the user to update the conflicting files manually.',
+  },
+  serverErrorAlert: {
+    id: 'course-authoring.course-outline.page-alert.server-error.title',
+    defaultMessage: 'The Studio servers encountered an error',
+    description: 'Generic server error alert title.',
+  },
+  serverErrorAlertBody: {
+    id: 'course-authoring.course-outline.page-alert.server-error.body',
+    defaultMessage: ' An error occurred in Studio and the page could not be loaded. Please try again in a few moments. We\'ve logged the error and our staff is currently working to resolve this error as soon as possible.',
+    description: 'Generic server error alert title.',
+  },
+  networkErrorAlert: {
+    id: 'course-authoring.course-outline.page-alert.network-error.title',
+    defaultMessage: 'Network error',
+    description: 'Generic network error alert.',
+  },
+});
+
+export default messages;
diff --git a/src/course-outline/publish-modal/PublishModal.jsx b/src/course-outline/publish-modal/PublishModal.jsx
new file mode 100644
index 0000000000..b56488c050
--- /dev/null
+++ b/src/course-outline/publish-modal/PublishModal.jsx
@@ -0,0 +1,93 @@
+/* eslint-disable import/named */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import {
+  ModalDialog,
+  Button,
+  ActionRow,
+} from '@openedx/paragon';
+import { useSelector } from 'react-redux';
+
+import { getCurrentItem } from '../data/selectors';
+import { COURSE_BLOCK_NAMES } from '../constants';
+import messages from './messages';
+
+const PublishModal = ({
+  isOpen,
+  onClose,
+  onPublishSubmit,
+}) => {
+  const intl = useIntl();
+  const { displayName, childInfo, category } = useSelector(getCurrentItem);
+  const categoryName = COURSE_BLOCK_NAMES[category]?.name.toLowerCase();
+  const children = childInfo?.children || [];
+
+  return (
+    <ModalDialog
+      className="publish-modal"
+      isOpen={isOpen}
+      onClose={onClose}
+      hasCloseButton
+      isFullscreenOnMobile
+      isOverflowVisible={false}
+    >
+      <ModalDialog.Header className="publish-modal__header">
+        <ModalDialog.Title>
+          {intl.formatMessage(messages.title, { title: displayName })}
+        </ModalDialog.Title>
+      </ModalDialog.Header>
+      <ModalDialog.Body>
+        <p className="small">
+          {intl.formatMessage(messages.description, { category: categoryName })}
+        </p>
+        {children.filter(child => child.hasChanges).map((child) => {
+          let grandChildren = child.childInfo?.children || [];
+          grandChildren = grandChildren.filter(grandChild => grandChild.hasChanges);
+
+          return grandChildren.length ? (
+            <React.Fragment key={child.id}>
+              <span className="small text-gray-400">{child.displayName}</span>
+              {grandChildren.map((grandChild) => (
+                <div
+                  key={grandChild.id}
+                  className="small border border-light-400 p-2 publish-modal__subsection"
+                >
+                  {grandChild.displayName}
+                </div>
+              ))}
+            </React.Fragment>
+          ) : (
+            <div
+              key={child.id}
+              className="small border border-light-400 p-2 publish-modal__subsection"
+            >
+              {child.displayName}
+            </div>
+          );
+        })}
+      </ModalDialog.Body>
+      <ModalDialog.Footer className="pt-1">
+        <ActionRow>
+          <ModalDialog.CloseButton variant="tertiary">
+            {intl.formatMessage(messages.cancelButton)}
+          </ModalDialog.CloseButton>
+          <Button
+            data-testid="publish-confirm-button"
+            onClick={onPublishSubmit}
+          >
+            {intl.formatMessage(messages.publishButton)}
+          </Button>
+        </ActionRow>
+      </ModalDialog.Footer>
+    </ModalDialog>
+  );
+};
+
+PublishModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  onPublishSubmit: PropTypes.func.isRequired,
+};
+
+export default PublishModal;
diff --git a/src/course-outline/publish-modal/PublishModal.scss b/src/course-outline/publish-modal/PublishModal.scss
new file mode 100644
index 0000000000..08a8b0a573
--- /dev/null
+++ b/src/course-outline/publish-modal/PublishModal.scss
@@ -0,0 +1,15 @@
+.publish-modal {
+  max-width: 33.6875rem;
+
+  .pgn__modal-close-container {
+    transform: translateY(.5rem);
+  }
+
+  .publish-modal__header {
+    padding-top: 1.5rem;
+  }
+
+  .publish-modal__subsection:not(:last-child) {
+    margin-bottom: .5rem;
+  }
+}
diff --git a/src/course-outline/publish-modal/PublishModal.test.jsx b/src/course-outline/publish-modal/PublishModal.test.jsx
new file mode 100644
index 0000000000..f83a993d70
--- /dev/null
+++ b/src/course-outline/publish-modal/PublishModal.test.jsx
@@ -0,0 +1,131 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { useSelector } from 'react-redux';
+import { initializeMockApp } from '@edx/frontend-platform';
+import { AppProvider } from '@edx/frontend-platform/react';
+
+import initializeStore from '../../store';
+import PublishModal from './PublishModal';
+import messages from './messages';
+
+let store;
+
+jest.mock('react-redux', () => ({
+  ...jest.requireActual('react-redux'),
+  useSelector: jest.fn(),
+}));
+
+jest.mock('@edx/frontend-platform/i18n', () => ({
+  ...jest.requireActual('@edx/frontend-platform/i18n'),
+  useIntl: () => ({
+    formatMessage: (message) => message.defaultMessage,
+  }),
+}));
+
+const currentItemMock = {
+  displayName: 'Publish',
+  childInfo: {
+    displayName: 'Subsection',
+    children: [
+      {
+        displayName: 'Subsection 1',
+        id: 1,
+        hasChanges: true,
+        childInfo: {
+          displayName: 'Unit',
+          children: [
+            {
+              id: 11,
+              displayName: 'Subsection_1 Unit 1',
+              hasChanges: true,
+            },
+          ],
+        },
+      },
+      {
+        displayName: 'Subsection 2',
+        id: 2,
+        hasChanges: true,
+        childInfo: {
+          displayName: 'Unit',
+          children: [
+            {
+              id: 21,
+              displayName: 'Subsection_2 Unit 1',
+              hasChanges: true,
+            },
+          ],
+        },
+      },
+      {
+        displayName: 'Subsection 3',
+        id: 3,
+        childInfo: {
+          children: [],
+        },
+      },
+    ],
+  },
+};
+
+const onCloseMock = jest.fn();
+const onPublishSubmitMock = jest.fn();
+
+const renderComponent = () => render(
+  <AppProvider store={store}>
+    <IntlProvider locale="en">
+      <PublishModal
+        isOpen
+        onClose={onCloseMock}
+        onPublishSubmit={onPublishSubmitMock}
+      />
+    </IntlProvider>,
+  </AppProvider>,
+);
+
+describe('<PublishModal />', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+
+    store = initializeStore();
+    useSelector.mockReturnValue(currentItemMock);
+  });
+
+  it('renders PublishModal component correctly', () => {
+    const { getByText, getByRole, queryByText } = renderComponent();
+
+    expect(getByText(messages.title.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.description.defaultMessage)).toBeInTheDocument();
+    expect(getByText(/Subsection 1/i)).toBeInTheDocument();
+    expect(getByText(/Subsection_1 Unit 1/i)).toBeInTheDocument();
+    expect(getByText(/Subsection 2/i)).toBeInTheDocument();
+    expect(getByText(/Subsection_2 Unit 1/i)).toBeInTheDocument();
+    expect(queryByText(/Subsection 3/i)).not.toBeInTheDocument();
+    expect(getByRole('button', { name: messages.cancelButton.defaultMessage })).toBeInTheDocument();
+    expect(getByRole('button', { name: messages.publishButton.defaultMessage })).toBeInTheDocument();
+  });
+
+  it('calls the onClose function when the cancel button is clicked', () => {
+    const { getByRole } = renderComponent();
+
+    const cancelButton = getByRole('button', { name: messages.cancelButton.defaultMessage });
+    fireEvent.click(cancelButton);
+    expect(onCloseMock).toHaveBeenCalledTimes(1);
+  });
+
+  it('calls the onPublishSubmit function when save button is clicked', async () => {
+    const { getByRole } = renderComponent();
+
+    const publishButton = getByRole('button', { name: messages.publishButton.defaultMessage });
+    fireEvent.click(publishButton);
+    expect(onPublishSubmitMock).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/src/course-outline/publish-modal/messages.js b/src/course-outline/publish-modal/messages.js
new file mode 100644
index 0000000000..7ea14a73b7
--- /dev/null
+++ b/src/course-outline/publish-modal/messages.js
@@ -0,0 +1,22 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  title: {
+    id: 'course-authoring.course-outline.publish-modal.title',
+    defaultMessage: 'Publish {title}',
+  },
+  description: {
+    id: 'course-authoring.course-outline.publish-modal.description',
+    defaultMessage: 'Publish all unpublished changes for this {category}?',
+  },
+  cancelButton: {
+    id: 'course-authoring.course-outline.publish-modal.button.cancel',
+    defaultMessage: 'Cancel',
+  },
+  publishButton: {
+    id: 'course-authoring.course-outline.publish-modal.button.label',
+    defaultMessage: 'Publish',
+  },
+});
+
+export default messages;
diff --git a/src/course-outline/section-card/SectionCard.jsx b/src/course-outline/section-card/SectionCard.jsx
new file mode 100644
index 0000000000..f8d11a4cd0
--- /dev/null
+++ b/src/course-outline/section-card/SectionCard.jsx
@@ -0,0 +1,322 @@
+// @ts-check
+import React, {
+  useContext, useEffect, useState, useRef,
+} from 'react';
+import PropTypes from 'prop-types';
+import { useDispatch } from 'react-redux';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Bubble, Button, useToggle } from '@openedx/paragon';
+import { Add as IconAdd } from '@openedx/paragon/icons';
+import { useSearchParams } from 'react-router-dom';
+import classNames from 'classnames';
+
+import { setCurrentItem, setCurrentSection } from '../data/slice';
+import { RequestStatus } from '../../data/constants';
+import CardHeader from '../card-header/CardHeader';
+import SortableItem from '../../generic/drag-helper/SortableItem';
+import { DragContext } from '../../generic/drag-helper/DragContextProvider';
+import TitleButton from '../card-header/TitleButton';
+import XBlockStatus from '../xblock-status/XBlockStatus';
+import { getItemStatus, getItemStatusBorder, scrollToElement } from '../utils';
+import messages from './messages';
+
+const SectionCard = ({
+  section,
+  isSelfPaced,
+  isCustomRelativeDatesActive,
+  children,
+  index,
+  canMoveItem,
+  onOpenHighlightsModal,
+  onOpenPublishModal,
+  onOpenConfigureModal,
+  onEditSectionSubmit,
+  savingStatus,
+  onOpenDeleteModal,
+  onDuplicateSubmit,
+  isSectionsExpanded,
+  onNewSubsectionSubmit,
+  onOrderChange,
+}) => {
+  const currentRef = useRef(null);
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const { activeId, overId } = useContext(DragContext);
+  const [searchParams] = useSearchParams();
+  const locatorId = searchParams.get('show');
+  const isScrolledToElement = locatorId === section.id;
+
+  // Expand the section if a search result should be shown/scrolled to
+  const containsSearchResult = () => {
+    if (locatorId) {
+      const subsections = section.childInfo?.children;
+      if (subsections) {
+        for (let i = 0; i < subsections.length; i++) {
+          const subsection = subsections[i];
+
+          // Check if the search result is one of the subsections
+          const matchedSubsection = subsection.id === locatorId;
+          if (matchedSubsection) {
+            return true;
+          }
+
+          // Check if the search result is one of the units
+          const matchedUnit = !!subsection.childInfo?.children?.filter((child) => child.id === locatorId).length;
+          if (matchedUnit) {
+            return true;
+          }
+        }
+      }
+    }
+
+    return false;
+  };
+  const [isExpanded, setIsExpanded] = useState(containsSearchResult() || isSectionsExpanded);
+  const [isFormOpen, openForm, closeForm] = useToggle(false);
+  const namePrefix = 'section';
+
+  useEffect(() => {
+    setIsExpanded(isSectionsExpanded);
+  }, [isSectionsExpanded]);
+
+  const {
+    id,
+    category,
+    displayName,
+    hasChanges,
+    published,
+    visibilityState,
+    highlights,
+    actions: sectionActions,
+    isHeaderVisible = true,
+  } = section;
+
+  useEffect(() => {
+    if (activeId === id && isExpanded) {
+      setIsExpanded(false);
+    } else if (overId === id && !isExpanded) {
+      setIsExpanded(true);
+    }
+  }, [activeId, overId]);
+
+  useEffect(() => {
+    if (currentRef.current && (section.shouldScroll || isScrolledToElement)) {
+      // Align element closer to the top of the screen if scrolling for search result
+      const alignWithTop = !!isScrolledToElement;
+      scrollToElement(currentRef.current, alignWithTop);
+    }
+  }, [isScrolledToElement]);
+
+  useEffect(() => {
+    // If the locatorId is set/changed, we need to make sure that the section is expanded
+    // if it contains the result, in order to scroll to it
+    setIsExpanded((prevState) => containsSearchResult() || prevState);
+  }, [locatorId, setIsExpanded]);
+
+  // re-create actions object for customizations
+  const actions = { ...sectionActions };
+  // add actions to control display of move up & down menu buton.
+  actions.allowMoveUp = canMoveItem(index, -1);
+  actions.allowMoveDown = canMoveItem(index, 1);
+
+  const sectionStatus = getItemStatus({
+    published,
+    visibilityState,
+    hasChanges,
+  });
+
+  // remove border when section is expanded
+  const borderStyle = getItemStatusBorder(!isExpanded ? sectionStatus : '');
+
+  const handleExpandContent = () => {
+    setIsExpanded((prevState) => !prevState);
+  };
+
+  const handleClickMenuButton = () => {
+    dispatch(setCurrentItem(section));
+    dispatch(setCurrentSection(section));
+  };
+
+  const handleEditSubmit = (titleValue) => {
+    if (displayName !== titleValue) {
+      // both itemId and sectionId are same
+      onEditSectionSubmit(id, id, titleValue);
+      return;
+    }
+
+    closeForm();
+  };
+
+  const handleOpenHighlightsModal = () => {
+    onOpenHighlightsModal(section);
+  };
+
+  const handleNewSubsectionSubmit = () => {
+    onNewSubsectionSubmit(id);
+  };
+
+  const handleSectionMoveUp = () => {
+    onOrderChange(index, index - 1);
+  };
+
+  const handleSectionMoveDown = () => {
+    onOrderChange(index, index + 1);
+  };
+
+  useEffect(() => {
+    if (savingStatus === RequestStatus.SUCCESSFUL) {
+      closeForm();
+    }
+  }, [savingStatus]);
+
+  const titleComponent = (
+    <TitleButton
+      title={displayName}
+      isExpanded={isExpanded}
+      onTitleClick={handleExpandContent}
+      namePrefix={namePrefix}
+    />
+  );
+
+  const isDraggable = actions.draggable && (actions.allowMoveUp || actions.allowMoveDown);
+
+  return (
+    <SortableItem
+      id={id}
+      category={category}
+      isDraggable={isDraggable}
+      isDroppable={actions.childAddable}
+      componentStyle={{
+        padding: '1.75rem',
+        ...borderStyle,
+      }}
+    >
+      <div
+        className={`section-card ${isScrolledToElement ? 'highlight' : ''}`}
+        data-testid="section-card"
+        ref={currentRef}
+      >
+        <div>
+          {isHeaderVisible && (
+            <CardHeader
+              cardId={id}
+              title={displayName}
+              status={sectionStatus}
+              hasChanges={hasChanges}
+              onClickMenuButton={handleClickMenuButton}
+              onClickPublish={onOpenPublishModal}
+              onClickConfigure={onOpenConfigureModal}
+              onClickEdit={openForm}
+              onClickDelete={onOpenDeleteModal}
+              onClickMoveUp={handleSectionMoveUp}
+              onClickMoveDown={handleSectionMoveDown}
+              isFormOpen={isFormOpen}
+              closeForm={closeForm}
+              onEditSubmit={handleEditSubmit}
+              isDisabledEditField={savingStatus === RequestStatus.IN_PROGRESS}
+              onClickDuplicate={onDuplicateSubmit}
+              titleComponent={titleComponent}
+              namePrefix={namePrefix}
+              actions={actions}
+            />
+          )}
+          <div className="section-card__content" data-testid="section-card__content">
+            <div className="outline-section__status mb-1">
+              <Button
+                className="p-0 bg-transparent"
+                data-destid="section-card-highlights-button"
+                variant="tertiary"
+                onClick={handleOpenHighlightsModal}
+              >
+                <Bubble className="mr-1">
+                  {highlights.length}
+                </Bubble>
+                <p className="m-0 text-black">{messages.sectionHighlightsBadge.defaultMessage}</p>
+              </Button>
+            </div>
+            <XBlockStatus
+              isSelfPaced={isSelfPaced}
+              isCustomRelativeDatesActive={isCustomRelativeDatesActive}
+              blockData={section}
+            />
+          </div>
+          {isExpanded && (
+            <div
+              data-testid="section-card__subsections"
+              className={classNames('section-card__subsections', { 'item-children': isDraggable })}
+            >
+              {children}
+              {actions.childAddable && (
+                <Button
+                  data-testid="new-subsection-button"
+                  className="mt-4"
+                  variant="outline-primary"
+                  iconBefore={IconAdd}
+                  block
+                  onClick={handleNewSubsectionSubmit}
+                >
+                  {intl.formatMessage(messages.newSubsectionButton)}
+                </Button>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+    </SortableItem>
+  );
+};
+
+SectionCard.defaultProps = {
+  children: null,
+};
+
+SectionCard.propTypes = {
+  section: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    displayName: PropTypes.string.isRequired,
+    category: PropTypes.string.isRequired,
+    published: PropTypes.bool.isRequired,
+    hasChanges: PropTypes.bool.isRequired,
+    visibilityState: PropTypes.string.isRequired,
+    highlights: PropTypes.arrayOf(PropTypes.string).isRequired,
+    shouldScroll: PropTypes.bool,
+    actions: PropTypes.shape({
+      deletable: PropTypes.bool.isRequired,
+      draggable: PropTypes.bool.isRequired,
+      childAddable: PropTypes.bool.isRequired,
+      duplicable: PropTypes.bool.isRequired,
+    }).isRequired,
+    isHeaderVisible: PropTypes.bool,
+    childInfo: PropTypes.shape({
+      children: PropTypes.arrayOf(
+        PropTypes.shape({
+          id: PropTypes.string.isRequired,
+          childInfo: PropTypes.shape({
+            children: PropTypes.arrayOf(
+              PropTypes.shape({
+                id: PropTypes.string.isRequired,
+              }),
+            ).isRequired,
+          }).isRequired,
+        }),
+      ).isRequired,
+    }).isRequired,
+  }).isRequired,
+  isSelfPaced: PropTypes.bool.isRequired,
+  isCustomRelativeDatesActive: PropTypes.bool.isRequired,
+  children: PropTypes.node,
+  onOpenHighlightsModal: PropTypes.func.isRequired,
+  onOpenPublishModal: PropTypes.func.isRequired,
+  onOpenConfigureModal: PropTypes.func.isRequired,
+  onEditSectionSubmit: PropTypes.func.isRequired,
+  savingStatus: PropTypes.string.isRequired,
+  onOpenDeleteModal: PropTypes.func.isRequired,
+  onDuplicateSubmit: PropTypes.func.isRequired,
+  isSectionsExpanded: PropTypes.bool.isRequired,
+  onNewSubsectionSubmit: PropTypes.func.isRequired,
+  index: PropTypes.number.isRequired,
+  canMoveItem: PropTypes.func.isRequired,
+  onOrderChange: PropTypes.func.isRequired,
+};
+
+export default SectionCard;
diff --git a/src/course-outline/section-card/SectionCard.scss b/src/course-outline/section-card/SectionCard.scss
new file mode 100644
index 0000000000..6eae48677d
--- /dev/null
+++ b/src/course-outline/section-card/SectionCard.scss
@@ -0,0 +1,19 @@
+.section-card {
+  flex-grow: 1;
+
+  .section-card__subsections {
+    margin-top: $spacer;
+  }
+
+  .section-card-title {
+    font-size: $h3-font-size;
+    font-family: $headings-font-family;
+    font-weight: $headings-font-weight;
+    line-height: $headings-line-height;
+    color: $headings-color;
+  }
+
+  .section-card__content {
+    margin-left: 1.7rem;
+  }
+}
diff --git a/src/course-outline/section-card/SectionCard.test.jsx b/src/course-outline/section-card/SectionCard.test.jsx
new file mode 100644
index 0000000000..48b946bc1d
--- /dev/null
+++ b/src/course-outline/section-card/SectionCard.test.jsx
@@ -0,0 +1,227 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import {
+  act, render, fireEvent, within,
+} from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { AppProvider } from '@edx/frontend-platform/react';
+import { initializeMockApp } from '@edx/frontend-platform';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+import initializeStore from '../../store';
+import SectionCard from './SectionCard';
+
+let store;
+const mockPathname = '/foo-bar';
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useLocation: () => ({
+    pathname: mockPathname,
+  }),
+}));
+
+const unit = {
+  id: 'unit-1',
+};
+
+const subsection = {
+  id: '123',
+  displayName: 'Subsection Name',
+  category: 'sequential',
+  published: true,
+  visibilityState: 'live',
+  hasChanges: false,
+  actions: {
+    draggable: true,
+    childAddable: true,
+    deletable: true,
+    duplicable: true,
+  },
+  isHeaderVisible: true,
+  releasedToStudents: true,
+  childInfo: {
+    children: [{
+      id: unit.id,
+    }],
+  },
+};
+
+const section = {
+  id: '123',
+  displayName: 'Section Name',
+  category: 'chapter',
+  published: true,
+  visibilityState: 'live',
+  hasChanges: false,
+  highlights: ['highlight 1', 'highlight 2'],
+  actions: {
+    draggable: true,
+    childAddable: true,
+    deletable: true,
+    duplicable: true,
+  },
+  isHeaderVisible: true,
+  childInfo: {
+    children: [{
+      id: subsection.id,
+      childInfo: {
+        children: [{
+          id: unit.id,
+        }],
+      },
+    }],
+  },
+};
+
+const onEditSectionSubmit = jest.fn();
+
+const queryClient = new QueryClient();
+
+const renderComponent = (props, entry = '/') => render(
+  <AppProvider store={store} wrapWithRouter={false}>
+    <QueryClientProvider client={queryClient}>
+      <MemoryRouter initialEntries={[entry]}>
+        <IntlProvider locale="en">
+          <SectionCard
+            section={section}
+            index={1}
+            canMoveItem={jest.fn()}
+            onOrderChange={jest.fn()}
+            onOpenPublishModal={jest.fn()}
+            onOpenHighlightsModal={jest.fn()}
+            onOpenDeleteModal={jest.fn()}
+            onOpenConfigureModal={jest.fn()}
+            savingStatus=""
+            onEditSectionSubmit={onEditSectionSubmit}
+            onDuplicateSubmit={jest.fn()}
+            isSectionsExpanded
+            onNewSubsectionSubmit={jest.fn()}
+            isSelfPaced={false}
+            isCustomRelativeDatesActive={false}
+            {...props}
+          >
+            <span>children</span>
+          </SectionCard>
+        </IntlProvider>
+      </MemoryRouter>
+    </QueryClientProvider>
+  </AppProvider>,
+);
+
+describe('<SectionCard />', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+
+    store = initializeStore();
+  });
+
+  it('render SectionCard component correctly', () => {
+    const { getByTestId } = renderComponent();
+
+    expect(getByTestId('section-card-header')).toBeInTheDocument();
+    expect(getByTestId('section-card__content')).toBeInTheDocument();
+  });
+
+  it('expands/collapses the card when the expand button is clicked', () => {
+    const { queryByTestId, getByTestId } = renderComponent();
+
+    const expandButton = getByTestId('section-card-header__expanded-btn');
+    fireEvent.click(expandButton);
+    expect(queryByTestId('section-card__subsections')).not.toBeInTheDocument();
+    expect(queryByTestId('new-subsection-button')).not.toBeInTheDocument();
+
+    fireEvent.click(expandButton);
+    expect(queryByTestId('section-card__subsections')).toBeInTheDocument();
+    expect(queryByTestId('new-subsection-button')).toBeInTheDocument();
+  });
+
+  it('title only updates if changed', async () => {
+    const { findByTestId } = renderComponent();
+
+    let editButton = await findByTestId('section-edit-button');
+    fireEvent.click(editButton);
+    let editField = await findByTestId('section-edit-field');
+    fireEvent.blur(editField);
+
+    expect(onEditSectionSubmit).not.toHaveBeenCalled();
+
+    editButton = await findByTestId('section-edit-button');
+    fireEvent.click(editButton);
+    editField = await findByTestId('section-edit-field');
+    fireEvent.change(editField, { target: { value: 'some random value' } });
+    fireEvent.blur(editField);
+    expect(onEditSectionSubmit).toHaveBeenCalled();
+  });
+
+  it('hides header based on isHeaderVisible flag', async () => {
+    const { queryByTestId } = renderComponent({
+      section: {
+        ...section,
+        isHeaderVisible: false,
+      },
+    });
+    expect(queryByTestId('section-card-header')).not.toBeInTheDocument();
+  });
+
+  it('hides add new, duplicate & delete option based on childAddable, duplicable & deletable action flag', async () => {
+    const { findByTestId, queryByTestId } = renderComponent({
+      section: {
+        ...section,
+        actions: {
+          draggable: true,
+          childAddable: false,
+          deletable: false,
+          duplicable: false,
+        },
+      },
+    });
+    const element = await findByTestId('section-card');
+    const menu = await within(element).findByTestId('section-card-header__menu-button');
+    await act(async () => fireEvent.click(menu));
+    expect(within(element).queryByTestId('section-card-header__menu-duplicate-button')).not.toBeInTheDocument();
+    expect(within(element).queryByTestId('section-card-header__menu-delete-button')).not.toBeInTheDocument();
+    expect(queryByTestId('new-subsection-button')).not.toBeInTheDocument();
+  });
+
+  it('check extended section when URL "show" param in subsection under section', async () => {
+    const collapsedSections = { ...section };
+    collapsedSections.isSectionsExpanded = false;
+    const { findByTestId } = renderComponent(collapsedSections, `?show=${subsection.id}`);
+
+    const cardSubsections = await findByTestId('section-card__subsections');
+    const newSubsectionButton = await findByTestId('new-subsection-button');
+    expect(cardSubsections).toBeInTheDocument();
+    expect(newSubsectionButton).toBeInTheDocument();
+  });
+
+  it('check extended section when URL "show" param in unit under section', async () => {
+    const collapsedSections = { ...section };
+    collapsedSections.isSectionsExpanded = false;
+    const { findByTestId } = renderComponent(collapsedSections, `?show=${unit.id}`);
+
+    const cardSubsections = await findByTestId('section-card__subsections');
+    const newSubsectionButton = await findByTestId('new-subsection-button');
+    expect(cardSubsections).toBeInTheDocument();
+    expect(newSubsectionButton).toBeInTheDocument();
+  });
+
+  it('check not extended section when URL "show" param not in section', async () => {
+    const randomId = 'random-id';
+    const collapsedSections = { ...section };
+    collapsedSections.isSectionsExpanded = false;
+    const { queryByTestId } = renderComponent(collapsedSections, `?show=${randomId}`);
+
+    const cardSubsections = await queryByTestId('section-card__subsections');
+    const newSubsectionButton = await queryByTestId('new-subsection-button');
+    expect(cardSubsections).toBeNull();
+    expect(newSubsectionButton).toBeNull();
+  });
+});
diff --git a/src/course-outline/section-card/messages.js b/src/course-outline/section-card/messages.js
new file mode 100644
index 0000000000..4730c31a3b
--- /dev/null
+++ b/src/course-outline/section-card/messages.js
@@ -0,0 +1,14 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  newSubsectionButton: {
+    id: 'course-authoring.course-outline.section.button.new-subsection',
+    defaultMessage: 'New subsection',
+  },
+  sectionHighlightsBadge: {
+    id: 'course-authoring.course-outline.section.badge.section-highlights',
+    defaultMessage: 'Section highlights',
+  },
+});
+
+export default messages;
diff --git a/src/course-outline/status-bar/StatusBar.jsx b/src/course-outline/status-bar/StatusBar.jsx
new file mode 100644
index 0000000000..b4e25fd357
--- /dev/null
+++ b/src/course-outline/status-bar/StatusBar.jsx
@@ -0,0 +1,221 @@
+import { useContext } from 'react';
+import moment from 'moment/moment';
+import PropTypes from 'prop-types';
+import { FormattedDate, useIntl } from '@edx/frontend-platform/i18n';
+import { getConfig } from '@edx/frontend-platform/config';
+import {
+  Button, Hyperlink, Form, Stack, useToggle,
+} from '@openedx/paragon';
+import { Link } from 'react-router-dom';
+import { AppContext } from '@edx/frontend-platform/react';
+import { useSelector } from 'react-redux';
+
+import { ContentTagsDrawerSheet } from '../../content-tags-drawer';
+import TagCount from '../../generic/tag-count';
+import { useHelpUrls } from '../../help-urls/hooks';
+import { getWaffleFlags } from '../../data/selectors';
+import { VIDEO_SHARING_OPTIONS } from '../constants';
+import { useContentTagsCount } from '../../generic/data/apiHooks';
+import messages from './messages';
+import { getVideoSharingOptionText } from '../utils';
+
+const StatusBarItem = ({ title, children }) => (
+  <div className="d-flex flex-column justify-content-between">
+    <h5>{title}</h5>
+    <div className="d-flex align-items-center">
+      {children}
+    </div>
+  </div>
+);
+
+StatusBarItem.propTypes = {
+  title: PropTypes.string.isRequired,
+  children: PropTypes.node,
+};
+
+StatusBarItem.defaultProps = {
+  children: null,
+};
+
+const StatusBar = ({
+  statusBarData,
+  isLoading,
+  courseId,
+  openEnableHighlightsModal,
+  handleVideoSharingOptionChange,
+}) => {
+  const intl = useIntl();
+  const { config } = useContext(AppContext);
+  const waffleFlags = useSelector(getWaffleFlags);
+
+  const {
+    courseReleaseDate,
+    highlightsEnabledForMessaging,
+    checklist,
+    isSelfPaced,
+    videoSharingEnabled,
+    videoSharingOptions,
+  } = statusBarData;
+
+  const {
+    completedCourseLaunchChecks,
+    completedCourseBestPracticesChecks,
+    totalCourseLaunchChecks,
+    totalCourseBestPracticesChecks,
+  } = checklist;
+
+  const courseReleaseDateObj = moment.utc(courseReleaseDate, 'MMM DD, YYYY at HH:mm UTC', true);
+  const checkListTitle = `${completedCourseLaunchChecks + completedCourseBestPracticesChecks}/${totalCourseLaunchChecks + totalCourseBestPracticesChecks}`;
+  const scheduleDestination = () => new URL(`settings/details/${courseId}#schedule`, config.STUDIO_BASE_URL).href;
+
+  const {
+    contentHighlights: contentHighlightsUrl,
+    socialSharing: socialSharingUrl,
+  } = useHelpUrls(['contentHighlights', 'socialSharing']);
+
+  const { data: courseTagCount } = useContentTagsCount(courseId);
+
+  const [isManageTagsDrawerOpen, openManageTagsDrawer, closeManageTagsDrawer] = useToggle(false);
+
+  if (isLoading) {
+    return null;
+  }
+
+  return (
+    <>
+      <Stack direction="horizontal" gap={3.5} className="d-flex align-items-stretch outline-status-bar" data-testid="outline-status-bar">
+        <StatusBarItem title={intl.formatMessage(messages.startDateTitle)}>
+          <Link
+            className="small"
+            to={waffleFlags.useNewScheduleDetailsPage ? `/course/${courseId}/settings/details/#schedule` : scheduleDestination()}
+          >
+            {courseReleaseDateObj.isValid() ? (
+              <FormattedDate
+                value={courseReleaseDateObj}
+                year="numeric"
+                month="short"
+                day="2-digit"
+                hour="numeric"
+                minute="numeric"
+              />
+            ) : courseReleaseDate}
+          </Link>
+        </StatusBarItem>
+        <StatusBarItem title={intl.formatMessage(messages.pacingTypeTitle)}>
+          <span className="small">
+            {isSelfPaced
+              ? intl.formatMessage(messages.pacingTypeSelfPaced)
+              : intl.formatMessage(messages.pacingTypeInstructorPaced)}
+          </span>
+        </StatusBarItem>
+        <StatusBarItem title={intl.formatMessage(messages.checklistTitle)}>
+          <Link
+            className="small"
+            to={`/course/${courseId}/checklists`}
+          >
+            {checkListTitle} {intl.formatMessage(messages.checklistCompleted)}
+          </Link>
+        </StatusBarItem>
+        <StatusBarItem title={intl.formatMessage(messages.highlightEmailsTitle)}>
+          <div className="d-flex align-items-center">
+            {highlightsEnabledForMessaging ? (
+              <span data-testid="highlights-enabled-span" className="small">
+                {intl.formatMessage(messages.highlightEmailsEnabled)}
+              </span>
+            ) : (
+              <Button data-testid="highlights-enable-button" size="sm" onClick={openEnableHighlightsModal}>
+                {intl.formatMessage(messages.highlightEmailsButton)}
+              </Button>
+            )}
+            <Hyperlink
+              className="small ml-2"
+              destination={contentHighlightsUrl}
+              target="_blank"
+              showLaunchIcon={false}
+            >
+              {intl.formatMessage(messages.highlightEmailsLink)}
+            </Hyperlink>
+          </div>
+        </StatusBarItem>
+        {getConfig().ENABLE_TAGGING_TAXONOMY_PAGES === 'true' && (
+          <StatusBarItem title={intl.formatMessage(messages.courseTagsTitle)}>
+            <div className="d-flex align-items-center">
+              <TagCount count={courseTagCount} />
+              { /* eslint-disable-next-line jsx-a11y/anchor-is-valid */ }
+              <a
+                className="small ml-2"
+                href="#"
+                onClick={openManageTagsDrawer}
+              >
+                {intl.formatMessage(messages.courseManageTagsLink)}
+              </a>
+            </div>
+          </StatusBarItem>
+        )}
+        {videoSharingEnabled && (
+          <Form.Group
+            size="sm"
+            className="d-flex flex-column justify-content-between m-0"
+          >
+            <Form.Label
+              className="h5"
+            >{intl.formatMessage(messages.videoSharingTitle)}
+            </Form.Label>
+            <div className="d-flex align-items-center">
+              <Form.Control
+                as="select"
+                defaultValue={videoSharingOptions}
+                onChange={(e) => handleVideoSharingOptionChange(e.target.value)}
+              >
+                {Object.values(VIDEO_SHARING_OPTIONS).map((option) => (
+                  <option
+                    key={option}
+                    value={option}
+                  >
+                    {getVideoSharingOptionText(option, messages, intl)}
+                  </option>
+                ))}
+              </Form.Control>
+              <Hyperlink
+                className="small"
+                destination={socialSharingUrl}
+                target="_blank"
+                showLaunchIcon={false}
+              >
+                {intl.formatMessage(messages.videoSharingLink)}
+              </Hyperlink>
+            </div>
+          </Form.Group>
+
+        )}
+      </Stack>
+      <ContentTagsDrawerSheet
+        id={courseId}
+        onClose={/* istanbul ignore next */ () => closeManageTagsDrawer()}
+        showSheet={isManageTagsDrawerOpen}
+      />
+    </>
+  );
+};
+
+StatusBar.propTypes = {
+  courseId: PropTypes.string.isRequired,
+  isLoading: PropTypes.bool.isRequired,
+  openEnableHighlightsModal: PropTypes.func.isRequired,
+  handleVideoSharingOptionChange: PropTypes.func.isRequired,
+  statusBarData: PropTypes.shape({
+    courseReleaseDate: PropTypes.string.isRequired,
+    isSelfPaced: PropTypes.bool.isRequired,
+    checklist: PropTypes.shape({
+      totalCourseLaunchChecks: PropTypes.number.isRequired,
+      completedCourseLaunchChecks: PropTypes.number.isRequired,
+      totalCourseBestPracticesChecks: PropTypes.number.isRequired,
+      completedCourseBestPracticesChecks: PropTypes.number.isRequired,
+    }),
+    highlightsEnabledForMessaging: PropTypes.bool.isRequired,
+    videoSharingEnabled: PropTypes.bool.isRequired,
+    videoSharingOptions: PropTypes.string.isRequired,
+  }).isRequired,
+};
+
+export default StatusBar;
diff --git a/src/course-outline/status-bar/StatusBar.scss b/src/course-outline/status-bar/StatusBar.scss
new file mode 100644
index 0000000000..e6e294accc
--- /dev/null
+++ b/src/course-outline/status-bar/StatusBar.scss
@@ -0,0 +1,14 @@
+.outline-status-bar {
+  margin-bottom: .25rem;
+
+  .outline-status-bar__item {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    min-height: 3.75rem;
+
+    & h5 {
+      margin-bottom: 0;
+    }
+  }
+}
diff --git a/src/course-outline/status-bar/StatusBar.test.jsx b/src/course-outline/status-bar/StatusBar.test.jsx
new file mode 100644
index 0000000000..c57613ae04
--- /dev/null
+++ b/src/course-outline/status-bar/StatusBar.test.jsx
@@ -0,0 +1,166 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { AppProvider } from '@edx/frontend-platform/react';
+import { initializeMockApp } from '@edx/frontend-platform';
+import { getConfig, setConfig } from '@edx/frontend-platform/config';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+import StatusBar from './StatusBar';
+import messages from './messages';
+import initializeStore from '../../store';
+import { VIDEO_SHARING_OPTIONS } from '../constants';
+
+let store;
+const mockPathname = '/foo-bar';
+const courseId = 'course-v1:123';
+const isLoading = false;
+const openEnableHighlightsModalMock = jest.fn();
+const handleVideoSharingOptionChange = jest.fn();
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useLocation: () => ({
+    pathname: mockPathname,
+  }),
+}));
+
+jest.mock('../../generic/data/api', () => ({
+  ...jest.requireActual('../../generic/data/api'),
+  getTagsCount: jest.fn().mockResolvedValue({ 'course-v1:123': 17 }),
+}));
+
+jest.mock('../../help-urls/hooks', () => ({
+  useHelpUrls: () => ({
+    contentHighlights: 'content-highlights-link',
+    socialSharing: 'social-sharing-link',
+  }),
+}));
+
+const statusBarData = {
+  courseReleaseDate: 'Feb 05, 2013 at 05:00 UTC',
+  isSelfPaced: true,
+  checklist: {
+    totalCourseLaunchChecks: 5,
+    completedCourseLaunchChecks: 1,
+    totalCourseBestPracticesChecks: 4,
+    completedCourseBestPracticesChecks: 1,
+  },
+  highlightsEnabledForMessaging: true,
+  highlightsDocUrl: 'https://example.com/highlights-doc',
+  videoSharingEnabled: true,
+  videoSharingOptions: VIDEO_SHARING_OPTIONS.allOn,
+};
+
+const queryClient = new QueryClient();
+
+const renderComponent = (props) => render(
+  <AppProvider store={store} messages={{}}>
+    <QueryClientProvider client={queryClient}>
+      <IntlProvider locale="en">
+        <StatusBar
+          courseId={courseId}
+          isLoading={isLoading}
+          openEnableHighlightsModal={openEnableHighlightsModalMock}
+          handleVideoSharingOptionChange={handleVideoSharingOptionChange}
+          statusBarData={statusBarData}
+          {...props}
+        />
+      </IntlProvider>
+    </QueryClientProvider>
+  </AppProvider>,
+);
+
+describe('<StatusBar />', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+    store = initializeStore();
+  });
+
+  it('renders StatusBar component correctly', () => {
+    const { getByText } = renderComponent();
+
+    expect(getByText(messages.startDateTitle.defaultMessage)).toBeInTheDocument();
+    expect(getByText('Feb 05, 2013, 5:00 AM')).toBeInTheDocument();
+
+    expect(getByText(messages.pacingTypeTitle.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.pacingTypeSelfPaced.defaultMessage)).toBeInTheDocument();
+
+    expect(getByText(messages.checklistTitle.defaultMessage)).toBeInTheDocument();
+    expect(getByText(`2/9 ${messages.checklistCompleted.defaultMessage}`)).toBeInTheDocument();
+
+    expect(getByText(messages.highlightEmailsTitle.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.highlightEmailsEnabled.defaultMessage)).toBeInTheDocument();
+
+    expect(getByText(messages.videoSharingTitle.defaultMessage)).toBeInTheDocument();
+  });
+
+  it('renders StatusBar when isSelfPaced is false', () => {
+    const { getByText } = renderComponent({
+      statusBarData: {
+        ...statusBarData,
+        isSelfPaced: false,
+      },
+    });
+
+    expect(getByText(messages.pacingTypeInstructorPaced.defaultMessage)).toBeInTheDocument();
+  });
+
+  it('calls openEnableHighlightsModal function when the "Enable Highlight Emails" button is clicked', () => {
+    const { getByRole } = renderComponent({
+      statusBarData: {
+        ...statusBarData,
+        highlightsEnabledForMessaging: false,
+      },
+    });
+
+    const enableHighlightsButton = getByRole('button', { name: messages.highlightEmailsButton.defaultMessage });
+    fireEvent.click(enableHighlightsButton);
+    expect(openEnableHighlightsModalMock).toHaveBeenCalledTimes(1);
+  });
+
+  it('not render component when isLoading is true', () => {
+    const { queryByTestId } = renderComponent({
+      isLoading: true,
+    });
+
+    expect(queryByTestId('outline-status-bar')).not.toBeInTheDocument();
+  });
+
+  it('does not render video sharing dropdown if not enabled', () => {
+    const { queryByTestId } = renderComponent({
+      statusBarData: {
+        ...statusBarData,
+        videoSharingEnabled: false,
+      },
+    });
+
+    expect(queryByTestId('video-sharing-wrapper')).not.toBeInTheDocument();
+  });
+
+  it('renders the tag count if the waffle flag is enabled', async () => {
+    setConfig({
+      ...getConfig(),
+      ENABLE_TAGGING_TAXONOMY_PAGES: 'true',
+    });
+    const { findByText } = renderComponent();
+
+    expect(await findByText('17')).toBeInTheDocument();
+  });
+  it('doesnt renders the tag count if the waffle flag is disabled', () => {
+    setConfig({
+      ...getConfig(),
+      ENABLE_TAGGING_TAXONOMY_PAGES: 'false',
+    });
+    const { queryByText } = renderComponent();
+
+    expect(queryByText('17')).not.toBeInTheDocument();
+  });
+});
diff --git a/src/course-outline/status-bar/messages.js b/src/course-outline/status-bar/messages.js
new file mode 100644
index 0000000000..0f3f105737
--- /dev/null
+++ b/src/course-outline/status-bar/messages.js
@@ -0,0 +1,76 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  startDateTitle: {
+    id: 'course-authoring.course-outline.status-bar.start-date',
+    defaultMessage: 'Start date',
+  },
+  pacingTypeTitle: {
+    id: 'course-authoring.course-outline.status-bar.pacing-type',
+    defaultMessage: 'Pacing type',
+  },
+  pacingTypeSelfPaced: {
+    id: 'course-authoring.course-outline.status-bar.pacing-type.self-paced',
+    defaultMessage: 'Self-paced',
+  },
+  pacingTypeInstructorPaced: {
+    id: 'course-authoring.course-outline.status-bar.pacing-type.instructor-Paced',
+    defaultMessage: 'Instructor-paced',
+  },
+  checklistTitle: {
+    id: 'course-authoring.course-outline.status-bar.checklists',
+    defaultMessage: 'Checklists',
+  },
+  checklistCompleted: {
+    id: 'course-authoring.course-outline.status-bar.checklists.completed',
+    defaultMessage: 'completed',
+  },
+  highlightEmailsTitle: {
+    id: 'course-authoring.course-outline.status-bar.highlight-emails',
+    defaultMessage: 'Course highlight emails',
+  },
+  highlightEmailsButton: {
+    id: 'course-authoring.course-outline.status-bar.highlight-emails.button',
+    defaultMessage: 'Enable now',
+  },
+  highlightEmailsEnabled: {
+    id: 'course-authoring.course-outline.status-bar.highlight-emails.enabled',
+    defaultMessage: 'Enabled',
+  },
+  highlightEmailsLink: {
+    id: 'course-authoring.course-outline.status-bar.highlight-emails.link',
+    defaultMessage: 'Learn more',
+  },
+  courseTagsTitle: {
+    id: 'course-authoring.course-outline.status-bar.course-tags',
+    defaultMessage: 'Course tags',
+    description: 'Course tags header in course outline',
+  },
+  courseManageTagsLink: {
+    id: 'course-authoring.course-outline.status-bar.course-manage-tags-link',
+    defaultMessage: 'Manage tags',
+    description: 'Opens the drawer to edit content tags',
+  },
+  videoSharingTitle: {
+    id: 'course-authoring.course-outline.status-bar.video-sharing.title',
+    defaultMessage: 'Video Sharing',
+  },
+  videoSharingLink: {
+    id: 'course-authoring.course-outline.status-bar.video-sharing.link',
+    defaultMessage: 'Learn more',
+  },
+  videoSharingPerVideoText: {
+    id: 'course-authoring.course-outline.status-bar.video-sharing.perVideo.text',
+    defaultMessage: 'Per Video',
+  },
+  videoSharingAllOffText: {
+    id: 'course-authoring.course-outline.status-bar.video-sharing.allOff.text',
+    defaultMessage: 'No Videos',
+  },
+  videoSharingAllOnText: {
+    id: 'course-authoring.course-outline.status-bar.video-sharing.allOn.text',
+    defaultMessage: 'All Videos',
+  },
+});
+
+export default messages;
diff --git a/src/course-outline/subsection-card/SubsectionCard.jsx b/src/course-outline/subsection-card/SubsectionCard.jsx
new file mode 100644
index 0000000000..9f134fdbe1
--- /dev/null
+++ b/src/course-outline/subsection-card/SubsectionCard.jsx
@@ -0,0 +1,307 @@
+// @ts-check
+import React, {
+  useContext, useEffect, useState, useRef,
+} from 'react';
+import PropTypes from 'prop-types';
+import { useDispatch } from 'react-redux';
+import { useSearchParams } from 'react-router-dom';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Button, useToggle } from '@openedx/paragon';
+import { Add as IconAdd } from '@openedx/paragon/icons';
+import classNames from 'classnames';
+import { isEmpty } from 'lodash';
+
+import { setCurrentItem, setCurrentSection, setCurrentSubsection } from '../data/slice';
+import { RequestStatus } from '../../data/constants';
+import CardHeader from '../card-header/CardHeader';
+import SortableItem from '../../generic/drag-helper/SortableItem';
+import { DragContext } from '../../generic/drag-helper/DragContextProvider';
+import { useCopyToClipboard, PasteComponent } from '../../generic/clipboard';
+import TitleButton from '../card-header/TitleButton';
+import XBlockStatus from '../xblock-status/XBlockStatus';
+import { getItemStatus, getItemStatusBorder, scrollToElement } from '../utils';
+import messages from './messages';
+
+const SubsectionCard = ({
+  section,
+  subsection,
+  isSelfPaced,
+  isCustomRelativeDatesActive,
+  children,
+  index,
+  getPossibleMoves,
+  onOpenPublishModal,
+  onEditSubmit,
+  savingStatus,
+  onOpenDeleteModal,
+  onDuplicateSubmit,
+  onNewUnitSubmit,
+  onOrderChange,
+  onOpenConfigureModal,
+  onPasteClick,
+}) => {
+  const currentRef = useRef(null);
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const { activeId, overId } = useContext(DragContext);
+  const [searchParams] = useSearchParams();
+  const locatorId = searchParams.get('show');
+  const isScrolledToElement = locatorId === subsection.id;
+  const [isFormOpen, openForm, closeForm] = useToggle(false);
+  const namePrefix = 'subsection';
+  const { sharedClipboardData, showPasteUnit } = useCopyToClipboard();
+
+  const {
+    id,
+    category,
+    displayName,
+    hasChanges,
+    published,
+    visibilityState,
+    actions: subsectionActions,
+    isHeaderVisible = true,
+    enableCopyPasteUnits = false,
+    proctoringExamConfigurationLink,
+  } = subsection;
+
+  // re-create actions object for customizations
+  const actions = { ...subsectionActions };
+  // add actions to control display of move up & down menu button.
+  const moveUpDetails = getPossibleMoves(index, -1);
+  const moveDownDetails = getPossibleMoves(index, 1);
+  actions.allowMoveUp = !isEmpty(moveUpDetails);
+  actions.allowMoveDown = !isEmpty(moveDownDetails);
+
+  // Expand the subsection if a search result should be shown/scrolled to
+  const containsSearchResult = () => {
+    if (locatorId) {
+      return !!subsection.childInfo?.children?.filter((child) => child.id === locatorId).length;
+    }
+
+    return false;
+  };
+  const [isExpanded, setIsExpanded] = useState(containsSearchResult() || !isHeaderVisible);
+  const subsectionStatus = getItemStatus({
+    published,
+    visibilityState,
+    hasChanges,
+  });
+  const borderStyle = getItemStatusBorder(subsectionStatus);
+
+  const handleExpandContent = () => {
+    setIsExpanded((prevState) => !prevState);
+  };
+
+  const handleClickMenuButton = () => {
+    dispatch(setCurrentSection(section));
+    dispatch(setCurrentSubsection(subsection));
+    dispatch(setCurrentItem(subsection));
+  };
+
+  const handleEditSubmit = (titleValue) => {
+    if (displayName !== titleValue) {
+      onEditSubmit(id, section.id, titleValue);
+      return;
+    }
+
+    closeForm();
+  };
+
+  const handleSubsectionMoveUp = () => {
+    onOrderChange(section, moveUpDetails);
+  };
+
+  const handleSubsectionMoveDown = () => {
+    onOrderChange(section, moveDownDetails);
+  };
+
+  const handleNewButtonClick = () => onNewUnitSubmit(id);
+  const handlePasteButtonClick = () => onPasteClick(id, section.id);
+
+  const titleComponent = (
+    <TitleButton
+      title={displayName}
+      isExpanded={isExpanded}
+      onTitleClick={handleExpandContent}
+      namePrefix={namePrefix}
+    />
+  );
+
+  useEffect(() => {
+    if (activeId === id && isExpanded) {
+      setIsExpanded(false);
+    } else if (overId === id && !isExpanded) {
+      setIsExpanded(true);
+    }
+  }, [activeId, overId]);
+
+  useEffect(() => {
+    // if this items has been newly added, scroll to it.
+    // we need to check section.shouldScroll as whole section is fetched when a
+    // subsection is duplicated under it.
+    if (currentRef.current && (section.shouldScroll || subsection.shouldScroll || isScrolledToElement)) {
+      // Align element closer to the top of the screen if scrolling for search result
+      const alignWithTop = !!isScrolledToElement;
+      scrollToElement(currentRef.current, alignWithTop);
+    }
+  }, [isScrolledToElement]);
+
+  useEffect(() => {
+    // If the locatorId is set/changed, we need to make sure that the subsection is expanded
+    // if it contains the result, in order to scroll to it
+    setIsExpanded((prevState) => (containsSearchResult() || prevState));
+  }, [locatorId, setIsExpanded]);
+
+  useEffect(() => {
+    if (savingStatus === RequestStatus.SUCCESSFUL) {
+      closeForm();
+    }
+  }, [savingStatus]);
+
+  const isDraggable = (
+    actions.draggable
+      && (actions.allowMoveUp || actions.allowMoveDown)
+      && !(isHeaderVisible === false)
+  );
+
+  return (
+    <SortableItem
+      id={id}
+      category={category}
+      key={id}
+      isDraggable={isDraggable}
+      isDroppable={actions.childAddable}
+      componentStyle={{
+        background: '#f8f7f6',
+        ...borderStyle,
+      }}
+    >
+      <div
+        className={`subsection-card ${isScrolledToElement ? 'highlight' : ''}`}
+        data-testid="subsection-card"
+        ref={currentRef}
+      >
+        {isHeaderVisible && (
+          <>
+            <CardHeader
+              title={displayName}
+              status={subsectionStatus}
+              cardId={id}
+              hasChanges={hasChanges}
+              onClickMenuButton={handleClickMenuButton}
+              onClickPublish={onOpenPublishModal}
+              onClickEdit={openForm}
+              onClickDelete={onOpenDeleteModal}
+              onClickMoveUp={handleSubsectionMoveUp}
+              onClickMoveDown={handleSubsectionMoveDown}
+              onClickConfigure={onOpenConfigureModal}
+              isFormOpen={isFormOpen}
+              closeForm={closeForm}
+              onEditSubmit={handleEditSubmit}
+              isDisabledEditField={savingStatus === RequestStatus.IN_PROGRESS}
+              onClickDuplicate={onDuplicateSubmit}
+              titleComponent={titleComponent}
+              namePrefix={namePrefix}
+              actions={actions}
+              proctoringExamConfigurationLink={proctoringExamConfigurationLink}
+              isSequential
+            />
+            <div className="subsection-card__content item-children" data-testid="subsection-card__content">
+              <XBlockStatus
+                isSelfPaced={isSelfPaced}
+                isCustomRelativeDatesActive={isCustomRelativeDatesActive}
+                blockData={subsection}
+              />
+            </div>
+          </>
+        )}
+        {isExpanded && (
+          <div
+            data-testid="subsection-card__units"
+            className={classNames('subsection-card__units', { 'item-children': isDraggable })}
+          >
+            {children}
+            {actions.childAddable && (
+              <>
+                <Button
+                  data-testid="new-unit-button"
+                  className="mt-4"
+                  variant="outline-primary"
+                  iconBefore={IconAdd}
+                  block
+                  onClick={handleNewButtonClick}
+                >
+                  {intl.formatMessage(messages.newUnitButton)}
+                </Button>
+                {enableCopyPasteUnits && showPasteUnit && (
+                  <PasteComponent
+                    className="mt-4"
+                    text={intl.formatMessage(messages.pasteButton)}
+                    clipboardData={sharedClipboardData}
+                    onClick={handlePasteButtonClick}
+                  />
+                )}
+              </>
+            )}
+          </div>
+        )}
+      </div>
+    </SortableItem>
+  );
+};
+
+SubsectionCard.defaultProps = {
+  children: null,
+};
+
+SubsectionCard.propTypes = {
+  section: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    displayName: PropTypes.string.isRequired,
+    published: PropTypes.bool.isRequired,
+    hasChanges: PropTypes.bool.isRequired,
+    visibilityState: PropTypes.string.isRequired,
+    shouldScroll: PropTypes.bool,
+  }).isRequired,
+  subsection: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    displayName: PropTypes.string.isRequired,
+    category: PropTypes.string.isRequired,
+    published: PropTypes.bool.isRequired,
+    hasChanges: PropTypes.bool.isRequired,
+    visibilityState: PropTypes.string.isRequired,
+    shouldScroll: PropTypes.bool,
+    enableCopyPasteUnits: PropTypes.bool,
+    proctoringExamConfigurationLink: PropTypes.string,
+    actions: PropTypes.shape({
+      deletable: PropTypes.bool.isRequired,
+      draggable: PropTypes.bool.isRequired,
+      childAddable: PropTypes.bool.isRequired,
+      duplicable: PropTypes.bool.isRequired,
+    }).isRequired,
+    isHeaderVisible: PropTypes.bool,
+    childInfo: PropTypes.shape({
+      children: PropTypes.arrayOf(
+        PropTypes.shape({
+          id: PropTypes.string.isRequired,
+        }),
+      ).isRequired,
+    }).isRequired,
+  }).isRequired,
+  children: PropTypes.node,
+  isSelfPaced: PropTypes.bool.isRequired,
+  isCustomRelativeDatesActive: PropTypes.bool.isRequired,
+  onOpenPublishModal: PropTypes.func.isRequired,
+  onEditSubmit: PropTypes.func.isRequired,
+  savingStatus: PropTypes.string.isRequired,
+  onOpenDeleteModal: PropTypes.func.isRequired,
+  onDuplicateSubmit: PropTypes.func.isRequired,
+  onNewUnitSubmit: PropTypes.func.isRequired,
+  index: PropTypes.number.isRequired,
+  getPossibleMoves: PropTypes.func.isRequired,
+  onOrderChange: PropTypes.func.isRequired,
+  onOpenConfigureModal: PropTypes.func.isRequired,
+  onPasteClick: PropTypes.func.isRequired,
+};
+
+export default SubsectionCard;
diff --git a/src/course-outline/subsection-card/SubsectionCard.scss b/src/course-outline/subsection-card/SubsectionCard.scss
new file mode 100644
index 0000000000..a4cca66283
--- /dev/null
+++ b/src/course-outline/subsection-card/SubsectionCard.scss
@@ -0,0 +1,19 @@
+.subsection-card {
+  flex-grow: 1;
+
+  .subsection-card__units {
+    margin-top: $spacer;
+  }
+
+  .subsection-card-title {
+    font-size: $h4-font-size;
+    font-family: $headings-font-family;
+    font-weight: $headings-font-weight;
+    line-height: $headings-line-height;
+    color: $headings-color;
+  }
+
+  .subsection-card__content {
+    margin-left: 1.7rem;
+  }
+}
diff --git a/src/course-outline/subsection-card/SubsectionCard.test.jsx b/src/course-outline/subsection-card/SubsectionCard.test.jsx
new file mode 100644
index 0000000000..674afc8da5
--- /dev/null
+++ b/src/course-outline/subsection-card/SubsectionCard.test.jsx
@@ -0,0 +1,257 @@
+import { MemoryRouter } from 'react-router-dom';
+import {
+  act, render, fireEvent, within,
+} from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { AppProvider } from '@edx/frontend-platform/react';
+import { initializeMockApp } from '@edx/frontend-platform';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+import initializeStore from '../../store';
+import SubsectionCard from './SubsectionCard';
+import cardHeaderMessages from '../card-header/messages';
+
+let store;
+const mockPathname = '/foo-bar';
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useLocation: () => ({
+    pathname: mockPathname,
+  }),
+}));
+
+const clipboardBroadcastChannelMock = {
+  postMessage: jest.fn(),
+  close: jest.fn(),
+};
+
+global.BroadcastChannel = jest.fn(() => clipboardBroadcastChannelMock);
+
+const unit = {
+  id: 'unit-1',
+};
+
+const subsection = {
+  id: '123',
+  displayName: 'Subsection Name',
+  category: 'sequential',
+  published: true,
+  visibilityState: 'live',
+  hasChanges: false,
+  actions: {
+    draggable: true,
+    childAddable: true,
+    deletable: true,
+    duplicable: true,
+  },
+  isHeaderVisible: true,
+  releasedToStudents: true,
+  childInfo: {
+    children: [{
+      id: unit.id,
+    }],
+  },
+};
+
+const section = {
+  id: '123',
+  displayName: 'Section Name',
+  published: true,
+  visibilityState: 'live',
+  hasChanges: false,
+  highlights: ['highlight 1', 'highlight 2'],
+  childInfo: {
+    children: [{
+      id: subsection.id,
+    }],
+  },
+};
+
+const onEditSubectionSubmit = jest.fn();
+const queryClient = new QueryClient();
+
+const renderComponent = (props, entry = '/') => render(
+  <AppProvider store={store} wrapWithRouter={false}>
+    <QueryClientProvider client={queryClient}>
+      <MemoryRouter initialEntries={[entry]}>
+        <IntlProvider locale="en">
+          <SubsectionCard
+            section={section}
+            subsection={subsection}
+            index={1}
+            isSelfPaced={false}
+            getPossibleMoves={jest.fn()}
+            onOrderChange={jest.fn()}
+            onOpenPublishModal={jest.fn()}
+            onOpenHighlightsModal={jest.fn()}
+            onOpenDeleteModal={jest.fn()}
+            onNewUnitSubmit={jest.fn()}
+            isCustomRelativeDatesActive={false}
+            onEditClick={jest.fn()}
+            savingStatus=""
+            onEditSubmit={onEditSubectionSubmit}
+            onDuplicateSubmit={jest.fn()}
+            namePrefix="subsection"
+            onOpenConfigureModal={jest.fn()}
+            onPasteClick={jest.fn()}
+            {...props}
+          >
+            <span>children</span>
+          </SubsectionCard>
+        </IntlProvider>
+      </MemoryRouter>
+    </QueryClientProvider>
+  </AppProvider>,
+);
+
+describe('<SubsectionCard />', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+
+    store = initializeStore();
+  });
+
+  it('render SubsectionCard component correctly', () => {
+    const { getByTestId } = renderComponent();
+
+    expect(getByTestId('subsection-card-header')).toBeInTheDocument();
+  });
+
+  it('expands/collapses the card when the subsection button is clicked', async () => {
+    const { queryByTestId, findByTestId } = renderComponent();
+
+    const expandButton = await findByTestId('subsection-card-header__expanded-btn');
+    fireEvent.click(expandButton);
+    expect(queryByTestId('subsection-card__units')).toBeInTheDocument();
+    expect(queryByTestId('new-unit-button')).toBeInTheDocument();
+
+    fireEvent.click(expandButton);
+    expect(queryByTestId('subsection-card__units')).not.toBeInTheDocument();
+    expect(queryByTestId('new-unit-button')).not.toBeInTheDocument();
+  });
+
+  it('updates current section, subsection and item', async () => {
+    const { findByTestId } = renderComponent();
+
+    const menu = await findByTestId('subsection-card-header__menu');
+    fireEvent.click(menu);
+    const { currentSection, currentSubsection, currentItem } = store.getState().courseOutline;
+    expect(currentSection).toEqual(section);
+    expect(currentSubsection).toEqual(subsection);
+    expect(currentItem).toEqual(subsection);
+  });
+
+  it('title only updates if changed', async () => {
+    const { findByTestId } = renderComponent();
+
+    let editButton = await findByTestId('subsection-edit-button');
+    fireEvent.click(editButton);
+    let editField = await findByTestId('subsection-edit-field');
+    fireEvent.blur(editField);
+
+    expect(onEditSubectionSubmit).not.toHaveBeenCalled();
+
+    editButton = await findByTestId('subsection-edit-button');
+    fireEvent.click(editButton);
+    editField = await findByTestId('subsection-edit-field');
+    fireEvent.change(editField, { target: { value: 'some random value' } });
+    fireEvent.keyDown(editField, { key: 'Enter', keyCode: 13 });
+    expect(onEditSubectionSubmit).toHaveBeenCalled();
+  });
+
+  it('hides header based on isHeaderVisible flag', async () => {
+    const { queryByTestId } = renderComponent({
+      subsection: {
+        ...subsection,
+        isHeaderVisible: false,
+      },
+    });
+    expect(queryByTestId('subsection-card-header')).not.toBeInTheDocument();
+  });
+
+  it('hides add new, duplicate & delete option based on childAddable, duplicable & deletable action flag', async () => {
+    const { findByTestId, queryByTestId } = renderComponent({
+      subsection: {
+        ...subsection,
+        actions: {
+          draggable: true,
+          childAddable: false,
+          deletable: false,
+          duplicable: false,
+        },
+      },
+    });
+    const element = await findByTestId('subsection-card');
+    const menu = await within(element).findByTestId('subsection-card-header__menu-button');
+    await act(async () => fireEvent.click(menu));
+    expect(within(element).queryByTestId('subsection-card-header__menu-duplicate-button')).not.toBeInTheDocument();
+    expect(within(element).queryByTestId('subsection-card-header__menu-delete-button')).not.toBeInTheDocument();
+    expect(queryByTestId('new-unit-button')).not.toBeInTheDocument();
+  });
+
+  it('renders live status', async () => {
+    const { findByText } = renderComponent();
+    expect(await findByText(cardHeaderMessages.statusBadgeLive.defaultMessage)).toBeInTheDocument();
+  });
+
+  it('renders published but live status', async () => {
+    const { findByText } = renderComponent({
+      subsection: {
+        ...subsection,
+        published: true,
+        visibilityState: 'ready',
+      },
+    });
+    expect(await findByText(cardHeaderMessages.statusBadgePublishedNotLive.defaultMessage)).toBeInTheDocument();
+  });
+
+  it('renders staff status', async () => {
+    const { findByText } = renderComponent({
+      subsection: {
+        ...subsection,
+        published: false,
+        visibilityState: 'staff_only',
+      },
+    });
+    expect(await findByText(cardHeaderMessages.statusBadgeStaffOnly.defaultMessage)).toBeInTheDocument();
+  });
+
+  it('renders draft status', async () => {
+    const { findByText } = renderComponent({
+      subsection: {
+        ...subsection,
+        published: false,
+        visibilityState: 'needs_attention',
+        hasChanges: true,
+      },
+    });
+    expect(await findByText(cardHeaderMessages.statusBadgeDraft.defaultMessage)).toBeInTheDocument();
+  });
+
+  it('check extended subsection when URL "show" param in subsection', async () => {
+    const { findByTestId } = renderComponent(null, `?show=${unit.id}`);
+
+    const cardUnits = await findByTestId('subsection-card__units');
+    const newUnitButton = await findByTestId('new-unit-button');
+    expect(cardUnits).toBeInTheDocument();
+    expect(newUnitButton).toBeInTheDocument();
+  });
+
+  it('check not extended subsection when URL "show" param not in subsection', async () => {
+    const randomId = 'random-id';
+    const { queryByTestId } = renderComponent(null, `?show=${randomId}`);
+
+    const cardUnits = await queryByTestId('subsection-card__units');
+    const newUnitButton = await queryByTestId('new-unit-button');
+    expect(cardUnits).toBeNull();
+    expect(newUnitButton).toBeNull();
+  });
+});
diff --git a/src/course-outline/subsection-card/messages.js b/src/course-outline/subsection-card/messages.js
new file mode 100644
index 0000000000..f741b02ecc
--- /dev/null
+++ b/src/course-outline/subsection-card/messages.js
@@ -0,0 +1,14 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  newUnitButton: {
+    id: 'course-authoring.course-outline.subsection.button.new-unit',
+    defaultMessage: 'New unit',
+  },
+  pasteButton: {
+    id: 'course-authoring.course-outline.subsection.button.paste-unit',
+    defaultMessage: 'Paste unit',
+  },
+});
+
+export default messages;
diff --git a/src/course-outline/unit-card/UnitCard.jsx b/src/course-outline/unit-card/UnitCard.jsx
new file mode 100644
index 0000000000..b828fe05af
--- /dev/null
+++ b/src/course-outline/unit-card/UnitCard.jsx
@@ -0,0 +1,251 @@
+// @ts-check
+import React, { useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { useDispatch } from 'react-redux';
+import { useToggle } from '@openedx/paragon';
+import { isEmpty } from 'lodash';
+import { useSearchParams } from 'react-router-dom';
+
+import { setCurrentItem, setCurrentSection, setCurrentSubsection } from '../data/slice';
+import { RequestStatus } from '../../data/constants';
+import CardHeader from '../card-header/CardHeader';
+import SortableItem from '../../generic/drag-helper/SortableItem';
+import TitleLink from '../card-header/TitleLink';
+import XBlockStatus from '../xblock-status/XBlockStatus';
+import { getItemStatus, getItemStatusBorder, scrollToElement } from '../utils';
+
+const UnitCard = ({
+  unit,
+  subsection,
+  section,
+  isSelfPaced,
+  isCustomRelativeDatesActive,
+  index,
+  getPossibleMoves,
+  onOpenPublishModal,
+  onOpenConfigureModal,
+  onEditSubmit,
+  savingStatus,
+  onOpenDeleteModal,
+  onDuplicateSubmit,
+  getTitleLink,
+  onOrderChange,
+  onCopyToClipboardClick,
+  discussionsSettings,
+}) => {
+  const currentRef = useRef(null);
+  const dispatch = useDispatch();
+  const [searchParams] = useSearchParams();
+  const locatorId = searchParams.get('show');
+  const isScrolledToElement = locatorId === unit.id;
+  const [isFormOpen, openForm, closeForm] = useToggle(false);
+  const namePrefix = 'unit';
+
+  const {
+    id,
+    category,
+    displayName,
+    hasChanges,
+    published,
+    visibilityState,
+    actions: unitActions,
+    isHeaderVisible = true,
+    enableCopyPasteUnits = false,
+    discussionEnabled,
+  } = unit;
+
+  // re-create actions object for customizations
+  const actions = { ...unitActions };
+  // add actions to control display of move up & down menu buton.
+  const moveUpDetails = getPossibleMoves(index, -1);
+  const moveDownDetails = getPossibleMoves(index, 1);
+  actions.allowMoveUp = !isEmpty(moveUpDetails);
+  actions.allowMoveDown = !isEmpty(moveDownDetails);
+
+  const parentInfo = {
+    graded: subsection.graded,
+    isTimeLimited: subsection.isTimeLimited,
+  };
+
+  const unitStatus = getItemStatus({
+    published,
+    visibilityState,
+    hasChanges,
+  });
+  const borderStyle = getItemStatusBorder(unitStatus);
+
+  const handleClickMenuButton = () => {
+    dispatch(setCurrentItem(unit));
+    dispatch(setCurrentSection(section));
+    dispatch(setCurrentSubsection(subsection));
+  };
+
+  const handleEditSubmit = (titleValue) => {
+    if (displayName !== titleValue) {
+      onEditSubmit(id, section.id, titleValue);
+      return;
+    }
+
+    closeForm();
+  };
+
+  const handleUnitMoveUp = () => {
+    onOrderChange(section, moveUpDetails);
+  };
+
+  const handleUnitMoveDown = () => {
+    onOrderChange(section, moveDownDetails);
+  };
+
+  const handleCopyClick = () => {
+    onCopyToClipboardClick(unit.id);
+  };
+
+  const titleComponent = (
+    <TitleLink
+      title={displayName}
+      titleLink={getTitleLink(id)}
+      namePrefix={namePrefix}
+    />
+  );
+
+  useEffect(() => {
+    // if this items has been newly added, scroll to it.
+    // we need to check section.shouldScroll as whole section is fetched when a
+    // unit is duplicated under it.
+    if (currentRef.current && (section.shouldScroll || unit.shouldScroll || isScrolledToElement)) {
+      // Align element closer to the top of the screen if scrolling for search result
+      const alignWithTop = !!isScrolledToElement;
+      scrollToElement(currentRef.current, alignWithTop);
+    }
+  }, [isScrolledToElement]);
+
+  useEffect(() => {
+    if (savingStatus === RequestStatus.SUCCESSFUL) {
+      closeForm();
+    }
+  }, [savingStatus]);
+
+  if (!isHeaderVisible) {
+    return null;
+  }
+
+  const isDraggable = actions.draggable && (actions.allowMoveUp || actions.allowMoveDown);
+
+  return (
+    <SortableItem
+      id={id}
+      category={category}
+      key={id}
+      isDraggable={isDraggable}
+      isDroppable={actions.childAddable}
+      componentStyle={{
+        background: '#fdfdfd',
+        ...borderStyle,
+      }}
+    >
+      <div
+        className={`unit-card ${isScrolledToElement ? 'highlight' : ''}`}
+        data-testid="unit-card"
+        ref={currentRef}
+      >
+        <CardHeader
+          title={displayName}
+          status={unitStatus}
+          hasChanges={hasChanges}
+          cardId={id}
+          onClickMenuButton={handleClickMenuButton}
+          onClickPublish={onOpenPublishModal}
+          onClickConfigure={onOpenConfigureModal}
+          onClickEdit={openForm}
+          onClickDelete={onOpenDeleteModal}
+          onClickMoveUp={handleUnitMoveUp}
+          onClickMoveDown={handleUnitMoveDown}
+          isFormOpen={isFormOpen}
+          closeForm={closeForm}
+          onEditSubmit={handleEditSubmit}
+          isDisabledEditField={savingStatus === RequestStatus.IN_PROGRESS}
+          onClickDuplicate={onDuplicateSubmit}
+          titleComponent={titleComponent}
+          namePrefix={namePrefix}
+          actions={actions}
+          isVertical
+          enableCopyPasteUnits={enableCopyPasteUnits}
+          onClickCopy={handleCopyClick}
+          discussionEnabled={discussionEnabled}
+          discussionsSettings={discussionsSettings}
+          parentInfo={parentInfo}
+        />
+        <div className="unit-card__content item-children" data-testid="unit-card__content">
+          <XBlockStatus
+            isSelfPaced={isSelfPaced}
+            isCustomRelativeDatesActive={isCustomRelativeDatesActive}
+            blockData={unit}
+          />
+        </div>
+      </div>
+    </SortableItem>
+  );
+};
+
+UnitCard.defaultProps = {
+  discussionsSettings: {},
+};
+
+UnitCard.propTypes = {
+  unit: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    displayName: PropTypes.string.isRequired,
+    category: PropTypes.string.isRequired,
+    published: PropTypes.bool.isRequired,
+    hasChanges: PropTypes.bool.isRequired,
+    visibilityState: PropTypes.string.isRequired,
+    shouldScroll: PropTypes.bool,
+    actions: PropTypes.shape({
+      deletable: PropTypes.bool.isRequired,
+      draggable: PropTypes.bool.isRequired,
+      childAddable: PropTypes.bool.isRequired,
+      duplicable: PropTypes.bool.isRequired,
+    }).isRequired,
+    isHeaderVisible: PropTypes.bool,
+    enableCopyPasteUnits: PropTypes.bool,
+    discussionEnabled: PropTypes.bool,
+  }).isRequired,
+  subsection: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    displayName: PropTypes.string.isRequired,
+    published: PropTypes.bool.isRequired,
+    hasChanges: PropTypes.bool.isRequired,
+    visibilityState: PropTypes.string.isRequired,
+    shouldScroll: PropTypes.bool,
+    isTimeLimited: PropTypes.bool,
+    graded: PropTypes.bool,
+  }).isRequired,
+  section: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    displayName: PropTypes.string.isRequired,
+    published: PropTypes.bool.isRequired,
+    hasChanges: PropTypes.bool.isRequired,
+    visibilityState: PropTypes.string.isRequired,
+    shouldScroll: PropTypes.bool,
+  }).isRequired,
+  onOpenPublishModal: PropTypes.func.isRequired,
+  onOpenConfigureModal: PropTypes.func.isRequired,
+  onEditSubmit: PropTypes.func.isRequired,
+  savingStatus: PropTypes.string.isRequired,
+  onOpenDeleteModal: PropTypes.func.isRequired,
+  onDuplicateSubmit: PropTypes.func.isRequired,
+  getTitleLink: PropTypes.func.isRequired,
+  index: PropTypes.number.isRequired,
+  getPossibleMoves: PropTypes.func.isRequired,
+  onOrderChange: PropTypes.func.isRequired,
+  isSelfPaced: PropTypes.bool.isRequired,
+  isCustomRelativeDatesActive: PropTypes.bool.isRequired,
+  onCopyToClipboardClick: PropTypes.func.isRequired,
+  discussionsSettings: PropTypes.shape({
+    providerType: PropTypes.string,
+    enableGradedUnits: PropTypes.bool,
+  }),
+};
+
+export default UnitCard;
diff --git a/src/course-outline/unit-card/UnitCard.scss b/src/course-outline/unit-card/UnitCard.scss
new file mode 100644
index 0000000000..9383d1e737
--- /dev/null
+++ b/src/course-outline/unit-card/UnitCard.scss
@@ -0,0 +1,14 @@
+.unit-card {
+  flex-grow: 1;
+
+  // used in src/course-outline/card-header/TitleLink.jsx &
+  // src/course-outline/card-header/TitleButton.jsx as
+  // `${namePrefix}-card-title`
+  .unit-card-title {
+    font-size: $h5-font-size;
+    font-family: $headings-font-family;
+    font-weight: $headings-font-weight;
+    line-height: $headings-line-height;
+    color: $headings-color;
+  }
+}
diff --git a/src/course-outline/unit-card/UnitCard.test.jsx b/src/course-outline/unit-card/UnitCard.test.jsx
new file mode 100644
index 0000000000..192963375f
--- /dev/null
+++ b/src/course-outline/unit-card/UnitCard.test.jsx
@@ -0,0 +1,152 @@
+import React from 'react';
+import {
+  act, render, fireEvent, within,
+} from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { AppProvider } from '@edx/frontend-platform/react';
+import { initializeMockApp } from '@edx/frontend-platform';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+import initializeStore from '../../store';
+import UnitCard from './UnitCard';
+import cardMessages from '../card-header/messages';
+
+let store;
+
+const section = {
+  id: '1',
+  displayName: 'Section Name',
+  published: true,
+  visibilityState: 'live',
+  hasChanges: false,
+  highlights: ['highlight 1', 'highlight 2'],
+};
+
+const subsection = {
+  id: '12',
+  displayName: 'Subsection Name',
+  published: true,
+  visibilityState: 'live',
+  hasChanges: false,
+};
+
+const unit = {
+  id: '123',
+  displayName: 'unit Name',
+  category: 'vertical',
+  published: true,
+  visibilityState: 'live',
+  hasChanges: false,
+  actions: {
+    draggable: true,
+    childAddable: true,
+    deletable: true,
+    duplicable: true,
+  },
+  isHeaderVisible: true,
+};
+
+const queryClient = new QueryClient();
+
+const renderComponent = (props) => render(
+  <AppProvider store={store}>
+    <QueryClientProvider client={queryClient}>
+      <IntlProvider locale="en">
+        <UnitCard
+          section={section}
+          subsection={subsection}
+          unit={unit}
+          index={1}
+          getPossibleMoves={jest.fn()}
+          onOrderChange={jest.fn()}
+          onOpenPublishModal={jest.fn()}
+          onOpenDeleteModal={jest.fn()}
+          onOpenConfigureModal={jest.fn()}
+          onCopyToClipboardClick={jest.fn()}
+          savingStatus=""
+          onEditSubmit={jest.fn()}
+          onDuplicateSubmit={jest.fn()}
+          getTitleLink={(id) => `/some/${id}`}
+          isSelfPaced={false}
+          isCustomRelativeDatesActive={false}
+          {...props}
+        />
+      </IntlProvider>
+    </QueryClientProvider>
+  </AppProvider>,
+);
+
+describe('<UnitCard />', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+
+    store = initializeStore();
+  });
+
+  it('render UnitCard component correctly', async () => {
+    const { findByTestId } = renderComponent();
+
+    expect(await findByTestId('unit-card-header')).toBeInTheDocument();
+    expect(await findByTestId('unit-card-header__title-link')).toHaveAttribute('href', '/some/123');
+  });
+
+  it('hides header based on isHeaderVisible flag', async () => {
+    const { queryByTestId } = renderComponent({
+      unit: {
+        ...unit,
+        isHeaderVisible: false,
+      },
+    });
+    expect(queryByTestId('unit-card-header')).not.toBeInTheDocument();
+  });
+
+  it('hides duplicate & delete option based on duplicable & deletable action flag', async () => {
+    const { findByTestId } = renderComponent({
+      unit: {
+        ...unit,
+        actions: {
+          draggable: true,
+          childAddable: false,
+          deletable: false,
+          duplicable: false,
+        },
+      },
+    });
+    const element = await findByTestId('unit-card');
+    const menu = await within(element).findByTestId('unit-card-header__menu-button');
+    await act(async () => fireEvent.click(menu));
+    expect(within(element).queryByTestId('unit-card-header__menu-duplicate-button')).not.toBeInTheDocument();
+    expect(within(element).queryByTestId('unit-card-header__menu-delete-button')).not.toBeInTheDocument();
+  });
+
+  it('shows copy option based on enableCopyPasteUnits flag', async () => {
+    const { findByTestId } = renderComponent({
+      unit: {
+        ...unit,
+        enableCopyPasteUnits: true,
+      },
+    });
+    const element = await findByTestId('unit-card');
+    const menu = await within(element).findByTestId('unit-card-header__menu-button');
+    await act(async () => fireEvent.click(menu));
+    expect(within(element).queryByText(cardMessages.menuCopy.defaultMessage)).toBeInTheDocument();
+  });
+
+  it('hides status badge for unscheduled units', async () => {
+    const { queryByRole } = renderComponent({
+      unit: {
+        ...unit,
+        visibilityState: 'unscheduled',
+        hasChanges: false,
+      },
+    });
+    expect(queryByRole('status')).not.toBeInTheDocument();
+  });
+});
diff --git a/src/course-outline/utils.jsx b/src/course-outline/utils.jsx
new file mode 100644
index 0000000000..cf1cf14887
--- /dev/null
+++ b/src/course-outline/utils.jsx
@@ -0,0 +1,216 @@
+import {
+  CheckCircle as CheckCircleIcon,
+  Lock as LockIcon,
+} from '@openedx/paragon/icons';
+
+import DraftIcon from '../generic/DraftIcon';
+import { ITEM_BADGE_STATUS, VIDEO_SHARING_OPTIONS } from './constants';
+import { VisibilityTypes } from '../data/constants';
+
+/**
+ * Get section status depended on section info
+ * @param {bool} published - value from section info
+ * @param {string} visibilityState - value from section info
+ * @returns {ITEM_BADGE_STATUS[keyof ITEM_BADGE_STATUS]}
+ */
+const getItemStatus = ({
+  published,
+  visibilityState,
+  hasChanges,
+}) => {
+  switch (true) {
+    case visibilityState === VisibilityTypes.STAFF_ONLY:
+      return ITEM_BADGE_STATUS.staffOnly;
+    case visibilityState === VisibilityTypes.GATED:
+      return ITEM_BADGE_STATUS.gated;
+    case visibilityState === VisibilityTypes.LIVE:
+      return ITEM_BADGE_STATUS.live;
+    case visibilityState === VisibilityTypes.UNSCHEDULED:
+      return ITEM_BADGE_STATUS.unscheduled;
+    case published && !hasChanges:
+      return ITEM_BADGE_STATUS.publishedNotLive;
+    case published && hasChanges:
+      return ITEM_BADGE_STATUS.unpublishedChanges;
+    default:
+      return ITEM_BADGE_STATUS.draft;
+  }
+};
+
+/**
+ * Get section badge status content
+ * @param {string} status - value from on getItemStatus util
+ * @returns {
+ *   badgeTitle: string,
+ *   badgeIcon: node,
+ * }
+ */
+const getItemStatusBadgeContent = (status, messages, intl) => {
+  switch (status) {
+    case ITEM_BADGE_STATUS.gated:
+      return {
+        badgeTitle: intl.formatMessage(messages.statusBadgeGated),
+        badgeIcon: LockIcon,
+      };
+    case ITEM_BADGE_STATUS.live:
+      return {
+        badgeTitle: intl.formatMessage(messages.statusBadgeLive),
+        badgeIcon: CheckCircleIcon,
+      };
+    case ITEM_BADGE_STATUS.publishedNotLive:
+      return {
+        badgeTitle: intl.formatMessage(messages.statusBadgePublishedNotLive),
+        badgeIcon: null,
+      };
+    case ITEM_BADGE_STATUS.staffOnly:
+      return {
+        badgeTitle: intl.formatMessage(messages.statusBadgeStaffOnly),
+        badgeIcon: LockIcon,
+      };
+    case ITEM_BADGE_STATUS.unpublishedChanges:
+      return {
+        badgeTitle: intl.formatMessage(messages.statusBadgeUnpublishedChanges),
+        badgeIcon: DraftIcon,
+      };
+    case ITEM_BADGE_STATUS.draft:
+      return {
+        badgeTitle: intl.formatMessage(messages.statusBadgeDraft),
+        badgeIcon: DraftIcon,
+      };
+    default:
+      return {
+        badgeTitle: '',
+        badgeIcon: null,
+      };
+  }
+};
+
+/**
+ * Get section border color
+ * @param {string} status - value from on getItemStatus util
+ * @returns {
+ *   borderLeft: string,
+ * }
+ */
+const getItemStatusBorder = (status) => {
+  switch (status) {
+    case ITEM_BADGE_STATUS.live:
+      return {
+        borderLeft: '5px solid #00688D',
+      };
+    case ITEM_BADGE_STATUS.publishedNotLive:
+      return {
+        borderLeft: '5px solid #0D7D4D',
+      };
+    case ITEM_BADGE_STATUS.gated:
+      return {
+        borderLeft: '5px solid #000000',
+      };
+    case ITEM_BADGE_STATUS.staffOnly:
+      return {
+        borderLeft: '5px solid #000000',
+      };
+    case ITEM_BADGE_STATUS.unpublishedChanges:
+      return {
+        borderLeft: '5px solid #F0CC00',
+      };
+    case ITEM_BADGE_STATUS.draft:
+      return {
+        borderLeft: '5px solid #F0CC00',
+      };
+    case ITEM_BADGE_STATUS.unscheduled:
+      return {
+        borderLeft: '5px solid #ccc',
+      };
+    default:
+      return {};
+  }
+};
+
+/**
+ * Get formatted highlights form values
+ * @param {Array<string>} currentHighlights - section highlights
+ * @returns {
+ *   highlight_1: string,
+ *   highlight_2: string,
+ *   highlight_3: string,
+ *   highlight_4: string,
+ *   highlight_5: string,
+ * }
+ */
+const getHighlightsFormValues = (currentHighlights) => {
+  const initialFormValues = {
+    highlight_1: '',
+    highlight_2: '',
+    highlight_3: '',
+    highlight_4: '',
+    highlight_5: '',
+  };
+
+  const formValues = currentHighlights.length
+    ? Object.entries(initialFormValues).reduce((result, [key], index) => {
+      if (currentHighlights[index]) {
+        return {
+          ...result,
+          [key]: currentHighlights[index],
+        };
+      }
+      return result;
+    }, initialFormValues)
+    : initialFormValues;
+
+  return formValues;
+};
+
+/**
+ * Method to scroll into view port, if it's outside the viewport
+ *
+ * @param {Object} target - DOM Element
+ * @param {boolean} alignWithTop (optional) - Whether top of the target will be aligned to
+ *                                            the top of viewpoint. (default: false)
+ * @returns {undefined}
+ */
+const scrollToElement = (target, alignWithTop = false) => {
+  if (target.getBoundingClientRect().bottom > window.innerHeight) {
+    // if alignWithTop is set, the top of the target will be aligned to the top of visible area
+    // of the scrollable ancestor, Otherwise, the bottom of the target will be aligned to the
+    // bottom of the visible area of the scrollable ancestor.
+    target.scrollIntoView({
+      behavior: 'smooth',
+      block: alignWithTop ? 'start' : 'end',
+      inline: 'nearest',
+    });
+  }
+
+  // Target is outside the view from the top
+  if (target.getBoundingClientRect().top < 0) {
+    // The top of the target will be aligned to the top of the visible area of the scrollable ancestor
+    target.scrollIntoView({ behavior: 'smooth' });
+  }
+};
+
+/**
+ * Get video sharing dropdown translated options.
+ * @param {string} id - option id
+ * @returns {string} - text to display
+ */
+const getVideoSharingOptionText = (id, messages, intl) => {
+  switch (id) {
+    case VIDEO_SHARING_OPTIONS.perVideo:
+      return intl.formatMessage(messages.videoSharingPerVideoText);
+    case VIDEO_SHARING_OPTIONS.allOn:
+      return intl.formatMessage(messages.videoSharingAllOnText);
+    case VIDEO_SHARING_OPTIONS.allOff:
+      return intl.formatMessage(messages.videoSharingAllOffText);
+    default:
+      return '';
+  }
+};
+
+export {
+  getItemStatus,
+  getItemStatusBadgeContent,
+  getItemStatusBorder,
+  getHighlightsFormValues,
+  getVideoSharingOptionText,
+  scrollToElement,
+};
diff --git a/src/course-outline/utils/courseChecklistValidators.js b/src/course-outline/utils/courseChecklistValidators.js
new file mode 100644
index 0000000000..a304e50b7f
--- /dev/null
+++ b/src/course-outline/utils/courseChecklistValidators.js
@@ -0,0 +1,106 @@
+/**
+ * The utilities are taken from the https://github.com/openedx/studio-frontend repository.
+ * Perform a minor refactoring of the functions while preserving their original functionality.
+ */
+
+export const hasWelcomeMessage = (updates) => updates.hasUpdate;
+
+export const hasGradingPolicy = (grades) => {
+  // eslint-disable-next-line @typescript-eslint/no-shadow
+  const { hasGradingPolicy, sumOfWeights } = grades;
+
+  return hasGradingPolicy && parseFloat(sumOfWeights.toPrecision(2), 10) === 1.0;
+};
+
+export const hasCertificate = (certificates) => {
+  // eslint-disable-next-line @typescript-eslint/no-shadow
+  const { isActivated, hasCertificate } = certificates;
+
+  return isActivated && hasCertificate;
+};
+
+export const hasDates = (dates) => {
+  const { hasStartDate, hasEndDate } = dates;
+
+  return hasStartDate && hasEndDate;
+};
+
+export const hasAssignmentDeadlines = (assignments, dates) => {
+  const {
+    totalNumber,
+    assignmentsWithDatesBeforeStart,
+    assignmentsWithDatesAfterEnd,
+    assignmentsWithOraDatesBeforeStart,
+    assignmentsWithOraDatesAfterEnd,
+  } = assignments;
+
+  if (!hasDates(dates)) {
+    return false;
+  }
+  if (totalNumber === 0) {
+    return false;
+  }
+  if (assignmentsWithDatesBeforeStart.length > 0) {
+    return false;
+  }
+  if (assignmentsWithDatesAfterEnd.length > 0) {
+    return false;
+  }
+  if (assignmentsWithOraDatesBeforeStart.length > 0) {
+    return false;
+  }
+  if (assignmentsWithOraDatesAfterEnd.length > 0) {
+    return false;
+  }
+
+  return true;
+};
+
+export const hasShortVideoDuration = (videos) => {
+  const { totalNumber, durations } = videos;
+
+  if (totalNumber === 0) {
+    return true;
+  }
+  if (totalNumber > 0 && durations.median <= 600) {
+    return true;
+  }
+
+  return false;
+};
+
+export const hasMobileFriendlyVideos = (videos) => {
+  const { totalNumber, numMobileEncoded } = videos;
+
+  if (totalNumber === 0) {
+    return true;
+  }
+  if (totalNumber > 0 && (numMobileEncoded / totalNumber) >= 0.9) {
+    return true;
+  }
+
+  return false;
+};
+
+export const hasDiverseSequences = (subsections) => {
+  const { totalVisible, numWithOneBlockType } = subsections;
+
+  if (totalVisible === 0) {
+    return false;
+  }
+  if (totalVisible > 0) {
+    return ((numWithOneBlockType / totalVisible) < 0.2);
+  }
+
+  return false;
+};
+
+export const hasWeeklyHighlights = (sections) => {
+  const { highlightsActiveForCourse, highlightsEnabled } = sections;
+
+  return highlightsActiveForCourse && highlightsEnabled;
+};
+
+export const hasShortUnitDepth = (units) => units.numBlocks.median <= 3;
+
+export const hasProctoringEscalationEmail = (proctoring) => proctoring.hasProctoringEscalationEmail;
diff --git a/src/course-outline/utils/courseChecklistValidators.test.js b/src/course-outline/utils/courseChecklistValidators.test.js
new file mode 100644
index 0000000000..401475bc2f
--- /dev/null
+++ b/src/course-outline/utils/courseChecklistValidators.test.js
@@ -0,0 +1,297 @@
+import * as validators from './courseChecklistValidators';
+
+describe('courseCheckValidators utility functions', () => {
+  describe('hasWelcomeMessage', () => {
+    it('returns true when course run has an update', () => {
+      expect(validators.hasWelcomeMessage({ hasUpdate: true })).toEqual(true);
+    });
+
+    it('returns false when course run does not have an update', () => {
+      expect(validators.hasWelcomeMessage({ hasUpdate: false })).toEqual(false);
+    });
+  });
+
+  describe('hasGradingPolicy', () => {
+    it('returns true when sum of weights is 1', () => {
+      expect(validators.hasGradingPolicy(
+        { hasGradingPolicy: true, sumOfWeights: 1 },
+      )).toEqual(true);
+    });
+
+    it('returns true when sum of weights is not 1 due to floating point approximation (1.00004)', () => {
+      expect(validators.hasGradingPolicy(
+        { hasGradingPolicy: true, sumOfWeights: 1.00004 },
+      )).toEqual(true);
+    });
+
+    it('returns false when sum of weights is not 1', () => {
+      expect(validators.hasGradingPolicy(
+        { hasGradingPolicy: true, sumOfWeights: 2 },
+      )).toEqual(false);
+    });
+
+    it('returns true when hasGradingPolicy is true', () => {
+      expect(validators.hasGradingPolicy(
+        { hasGradingPolicy: true, sumOfWeights: 1 },
+      )).toEqual(true);
+    });
+
+    it('returns false when hasGradingPolicy is false', () => {
+      expect(validators.hasGradingPolicy(
+        { hasGradingPolicy: false, sumOfWeights: 1 },
+      )).toEqual(false);
+    });
+  });
+
+  describe('hasCertificate', () => {
+    it('returns true when certificates are activated and course run has a certificate', () => {
+      expect(validators.hasCertificate({ isActivated: true, hasCertificate: true }))
+        .toEqual(true);
+    });
+
+    it('returns false when certificates are not activated and course run has a certificate', () => {
+      expect(validators.hasCertificate({ isActivated: false, hasCertificate: true }))
+        .toEqual(false);
+    });
+
+    it('returns false when certificates are activated and course run does not have a certificate', () => {
+      expect(validators.hasCertificate({ isActivated: true, hasCertificate: false }))
+        .toEqual(false);
+    });
+
+    it('returns false when certificates are not activated and course run does not have a certificate', () => {
+      expect(validators.hasCertificate({ isActivated: false, hasCertificate: false }))
+        .toEqual(false);
+    });
+  });
+
+  describe('hasDates', () => {
+    it('returns true when course run has start date and end date', () => {
+      expect(validators.hasDates({ hasStartDate: true, hasEndDate: true })).toEqual(true);
+    });
+
+    it('returns false when course run has no start date and end date', () => {
+      expect(validators.hasDates({ hasStartDate: false, hasEndDate: true })).toEqual(false);
+    });
+
+    it('returns true when course run has start date and no end date', () => {
+      expect(validators.hasDates({ hasStartDate: true, hasEndDate: false })).toEqual(false);
+    });
+
+    it('returns true when course run has no start date and no end date', () => {
+      expect(validators.hasDates({ hasStartDate: false, hasEndDate: false })).toEqual(false);
+    });
+  });
+
+  describe('hasAssignmentDeadlines', () => {
+    it('returns true when a course run has start and end date and all assignments are within range', () => {
+      expect(validators.hasAssignmentDeadlines(
+        {
+          assignmentsWithDatesBeforeStart: 0,
+          assignmentsWithDatesAfterEnd: 0,
+          assignmentsWithOraDatesAfterEnd: 0,
+          assignmentsWithOraDatesBeforeStart: 0,
+        },
+        {
+          hasStartDate: true,
+          hasEndDate: true,
+        },
+      )).toEqual(true);
+    });
+
+    it('returns false when a course run has no start and no end date', () => {
+      expect(validators.hasAssignmentDeadlines(
+        {},
+        {
+          hasStartDate: false,
+          hasEndDate: false,
+        },
+      )).toEqual(false);
+    });
+
+    it('returns false when a course has start and end date and no assignments', () => {
+      expect(validators.hasAssignmentDeadlines(
+        {
+          totalNumber: 0,
+        },
+        {
+          hasStartDate: true,
+          hasEndDate: true,
+        },
+      )).toEqual(false);
+    });
+
+    it('returns false when a course run has start and end date and assignments before start', () => {
+      expect(validators.hasAssignmentDeadlines(
+        {
+          assignmentsWithDatesBeforeStart: ['test'],
+          assignmentsWithDatesAfterEnd: 0,
+          assignmentsWithOraDatesAfterEnd: 0,
+          assignmentsWithOraDatesBeforeStart: 0,
+        },
+        {
+          hasStartDate: true,
+          hasEndDate: true,
+        },
+      )).toEqual(false);
+    });
+
+    it('returns false when a course run has start and end date and assignments after end', () => {
+      expect(validators.hasAssignmentDeadlines(
+        {
+          assignmentsWithDatesBeforeStart: 0,
+          assignmentsWithDatesAfterEnd: ['test'],
+          assignmentsWithOraDatesAfterEnd: 0,
+          assignmentsWithOraDatesBeforeStart: 0,
+        },
+        {
+          hasStartDate: true,
+          hasEndDate: true,
+        },
+      )).toEqual(false);
+    });
+  });
+
+  it(
+    'returns false when a course run has start and end date and an ora with a date before start',
+    () => {
+      expect(validators.hasAssignmentDeadlines(
+        {
+          assignmentsWithDatesBeforeStart: 0,
+          assignmentsWithDatesAfterEnd: 0,
+          assignmentsWithOraDatesAfterEnd: 0,
+          assignmentsWithOraDatesBeforeStart: ['test'],
+        },
+        {
+          hasStartDate: true,
+          hasEndDate: true,
+        },
+      )).toEqual(false);
+    },
+  );
+
+  it(
+    'returns false when a course run has start and end date and an ora with a date after end',
+    () => {
+      expect(validators.hasAssignmentDeadlines(
+        {
+          assignmentsWithDatesBeforeStart: 0,
+          assignmentsWithDatesAfterEnd: 0,
+          assignmentsWithOraDatesAfterEnd: ['test'],
+          assignmentsWithOraDatesBeforeStart: 0,
+        },
+        {
+          hasStartDate: true,
+          hasEndDate: true,
+        },
+      )).toEqual(false);
+    },
+  );
+
+  describe('hasShortVideoDuration', () => {
+    it('returns true if course run has no videos', () => {
+      expect(validators.hasShortVideoDuration({ totalNumber: 0 })).toEqual(true);
+    });
+
+    it('returns true if course run videos have a median duration <= to 600', () => {
+      expect(validators.hasShortVideoDuration({ totalNumber: 1, durations: { median: 100 } }))
+        .toEqual(true);
+    });
+
+    it('returns true if course run videos have a median duration > to 600', () => {
+      expect(validators.hasShortVideoDuration({ totalNumber: 10, durations: { median: 700 } }))
+        .toEqual(false);
+    });
+  });
+
+  describe('hasMobileFriendlyVideos', () => {
+    it('returns true if course run has no videos', () => {
+      expect(validators.hasMobileFriendlyVideos({ totalNumber: 0 })).toEqual(true);
+    });
+
+    it('returns true if course run videos are >= 90% mobile friendly', () => {
+      expect(validators.hasMobileFriendlyVideos({ totalNumber: 10, numMobileEncoded: 9 }))
+        .toEqual(true);
+    });
+
+    it('returns true if course run videos are < 90% mobile friendly', () => {
+      expect(validators.hasMobileFriendlyVideos({ totalNumber: 10, numMobileEncoded: 8 }))
+        .toEqual(false);
+    });
+  });
+
+  describe('hasDiverseSequences', () => {
+    it('returns true if < 20% of visible subsections have more than one block type', () => {
+      expect(validators.hasDiverseSequences({ totalVisible: 10, numWithOneBlockType: 1 }))
+        .toEqual(true);
+    });
+
+    it('returns false if no visible subsections', () => {
+      expect(validators.hasDiverseSequences({ totalVisible: 0 })).toEqual(false);
+    });
+
+    it('returns false if >= 20% of visible subsections have more than one block type', () => {
+      expect(validators.hasDiverseSequences({ totalVisible: 10, numWithOneBlockType: 3 }))
+        .toEqual(false);
+    });
+
+    it('return false if < 0 visible subsections', () => {
+      expect(validators.hasDiverseSequences({ totalVisible: -1, numWithOneBlockType: 1 }))
+        .toEqual(false);
+    });
+  });
+
+  describe('hasWeeklyHighlights', () => {
+    it('returns true when course run has highlights enabled', () => {
+      const data = { highlightsActiveForCourse: true, highlightsEnabled: true };
+      expect(validators.hasWeeklyHighlights(data)).toEqual(true);
+    });
+
+    it('returns false when course run has highlights enabled', () => {
+      const data = { highlightsActiveForCourse: false, highlightsEnabled: false };
+      expect(validators.hasWeeklyHighlights(data)).toEqual(false);
+
+      data.highlightsEnabled = true;
+      data.highlightsActiveForCourse = false;
+      expect(validators.hasWeeklyHighlights(data)).toEqual(false);
+
+      data.highlightsEnabled = false;
+      data.highlightsActiveForCourse = true;
+      expect(validators.hasWeeklyHighlights(data)).toEqual(false);
+    });
+  });
+
+  describe('hasShortUnitDepth', () => {
+    it('returns true when course run has median number of blocks <= 3', () => {
+      const units = {
+        numBlocks: {
+          median: 3,
+        },
+      };
+
+      expect(validators.hasShortUnitDepth(units)).toEqual(true);
+    });
+
+    it('returns false when course run has median number of blocks > 3', () => {
+      const units = {
+        numBlocks: {
+          median: 4,
+        },
+      };
+
+      expect(validators.hasShortUnitDepth(units)).toEqual(false);
+    });
+  });
+
+  describe('hasProctoringEscalationEmail', () => {
+    it('returns true when the course has a proctoring escalation email', () => {
+      const proctoring = { hasProctoringEscalationEmail: true };
+      expect(validators.hasProctoringEscalationEmail(proctoring)).toEqual(true);
+    });
+
+    it('returns false when the course does not have a proctoring escalation email', () => {
+      const proctoring = { hasProctoringEscalationEmail: false };
+      expect(validators.hasProctoringEscalationEmail(proctoring)).toEqual(false);
+    });
+  });
+});
diff --git a/src/course-outline/utils/getChecklistForStatusBar.js b/src/course-outline/utils/getChecklistForStatusBar.js
new file mode 100644
index 0000000000..acab5d7eb3
--- /dev/null
+++ b/src/course-outline/utils/getChecklistForStatusBar.js
@@ -0,0 +1,79 @@
+import { LAUNCH_CHECKLIST, BEST_PRACTICES_CHECKLIST } from '../constants';
+import { getChecklistValues, getChecklistValidatedValue } from './getChecklistValues';
+
+/**
+ * Get status bar course launch checklist values
+ * @param {object} data - course launch data
+ * @returns {
+ *   totalCourseLaunchChecks: {number},
+ *   completedCourseLaunchChecks: {number}
+ * } - total and completed launch checklist items
+ */
+const getCourseLaunchChecklist = (data) => {
+  if (Object.keys(data).length > 0) {
+    const { isSelfPaced, certificates } = data;
+
+    const filteredCourseLaunchChecks = getChecklistValues({
+      checklist: LAUNCH_CHECKLIST.data,
+      isSelfPaced,
+      hasCertificatesEnabled: certificates.isEnabled,
+      hasHighlightsEnabled: false,
+    });
+
+    const completedCourseLaunchChecks = filteredCourseLaunchChecks.reduce((result, currentValue) => {
+      const value = getChecklistValidatedValue(data, currentValue.id);
+      return value ? result + 1 : result;
+    }, 0);
+
+    return {
+      totalCourseLaunchChecks: filteredCourseLaunchChecks.length,
+      completedCourseLaunchChecks,
+    };
+  }
+
+  return {
+    totalCourseLaunchChecks: 0,
+    completedCourseLaunchChecks: 0,
+  };
+};
+
+/**
+ * Get status bar course best practices checklist values
+ * @param {object} data - course best practices data
+ * @returns {
+ *   totalCourseBestPracticesChecks: {number},
+ *   completedCourseBestPracticesChecks: {number}
+ * } - total and completed launch checklist items
+ */
+const getCourseBestPracticesChecklist = (data) => {
+  if (Object.keys(data).length > 0) {
+    const { isSelfPaced, sections } = data;
+
+    const filteredBestPracticesChecks = getChecklistValues({
+      checklist: BEST_PRACTICES_CHECKLIST.data,
+      isSelfPaced,
+      hasCertificatesEnabled: false,
+      hasHighlightsEnabled: sections.highlightsEnadled,
+    });
+
+    const completedCourseBestPracticesChecks = filteredBestPracticesChecks.reduce((result, currentValue) => {
+      const value = getChecklistValidatedValue(data, currentValue.id);
+      return value ? result + 1 : result;
+    }, 0);
+
+    return {
+      totalCourseBestPracticesChecks: filteredBestPracticesChecks.length,
+      completedCourseBestPracticesChecks,
+    };
+  }
+
+  return {
+    totalCourseBestPracticesChecks: 0,
+    completedCourseBestPracticesChecks: 0,
+  };
+};
+
+export {
+  getCourseLaunchChecklist,
+  getCourseBestPracticesChecklist,
+};
diff --git a/src/course-outline/utils/getChecklistForStatusBar.test.js b/src/course-outline/utils/getChecklistForStatusBar.test.js
new file mode 100644
index 0000000000..b7bc1cd145
--- /dev/null
+++ b/src/course-outline/utils/getChecklistForStatusBar.test.js
@@ -0,0 +1,96 @@
+import {
+  getCourseLaunchChecklist,
+  getCourseBestPracticesChecklist,
+} from './getChecklistForStatusBar';
+
+describe('getChecklistForStatusBar util functions', () => {
+  it('getCourseLaunchChecklist', () => {
+    const data = {
+      isSelfPaced: false,
+      dates: {
+        hasStartDate: true,
+        hasEndDate: false,
+      },
+      assignments: {
+        totalNumber: 11,
+        totalVisible: 7,
+        assignmentsWithDatesBeforeStart: [],
+        assignmentsWithDatesAfterEnd: [],
+        assignmentsWithOraDatesBeforeStart: [],
+        assignmentsWithOraDatesAfterEnd: [],
+      },
+      grades: {
+        hasGradingPolicy: true,
+        sumOfWeights: 1,
+      },
+      certificates: {
+        isActivated: false,
+        hasCertificate: false,
+        isEnabled: true,
+      },
+      updates: {
+        hasUpdate: true,
+      },
+      proctoring: {
+        needsProctoringEscalationEmail: false,
+        hasProctoringEscalationEmail: false,
+      },
+    };
+
+    expect(getCourseLaunchChecklist(data)).toEqual({
+      totalCourseLaunchChecks: 5,
+      completedCourseLaunchChecks: 2,
+    });
+  });
+
+  it('getCourseBestPracticesChecklist', () => {
+    const data = {
+      isSelfPaced: false,
+      sections: {
+        totalNumber: 6,
+        totalVisible: 4,
+        numberWithHighlights: 2,
+        highlightsActiveForCourse: true,
+        highlightsEnabled: true,
+      },
+      subsections: {
+        totalVisible: 5,
+        numWithOneBlockType: 2,
+        numBlockTypes: {
+          min: 0,
+          max: 3,
+          mean: 1,
+          median: 1,
+          mode: 1,
+        },
+      },
+      units: {
+        totalVisible: 9,
+        numBlocks: {
+          min: 1,
+          max: 2,
+          mean: 2,
+          median: 2,
+          mode: 2,
+        },
+      },
+      videos: {
+        totalNumber: 7,
+        numMobileEncoded: 0,
+        numWithValId: 3,
+        durations: {
+          min: null,
+          max: null,
+          mean: null,
+          median: null,
+          mode: null,
+        },
+      },
+    };
+
+    expect(getCourseBestPracticesChecklist(data)).toEqual({
+      totalCourseBestPracticesChecks: 4,
+      completedCourseBestPracticesChecks: 2,
+    });
+  });
+});
diff --git a/src/course-outline/utils/getChecklistValues.js b/src/course-outline/utils/getChecklistValues.js
new file mode 100644
index 0000000000..5b53ca734d
--- /dev/null
+++ b/src/course-outline/utils/getChecklistValues.js
@@ -0,0 +1,79 @@
+import { CHECKLIST_FILTERS } from '../constants';
+import * as healthValidators from './courseChecklistValidators';
+
+/**
+ * The utilities are taken from the https://github.com/openedx/studio-frontend repository.
+ * Perform a minor refactoring of the functions while preserving their original functionality.
+ */
+const getChecklistValidatedValue = (data, id) => {
+  const {
+    updates,
+    grades,
+    certificates,
+    dates,
+    assignments,
+    videos,
+    subsections,
+    sections,
+    units,
+    proctoring,
+  } = data;
+
+  switch (id) {
+    case 'welcomeMessage':
+      return healthValidators.hasWelcomeMessage(updates);
+    case 'gradingPolicy':
+      return healthValidators.hasGradingPolicy(grades);
+    case 'certificate':
+      return healthValidators.hasCertificate(certificates);
+    case 'courseDates':
+      return healthValidators.hasDates(dates);
+    case 'assignmentDeadlines':
+      return healthValidators.hasAssignmentDeadlines(assignments, dates);
+    case 'videoDuration':
+      return healthValidators.hasShortVideoDuration(videos);
+    case 'mobileFriendlyVideo':
+      return healthValidators.hasMobileFriendlyVideos(videos);
+    case 'diverseSequences':
+      return healthValidators.hasDiverseSequences(subsections);
+    case 'weeklyHighlights':
+      return healthValidators.hasWeeklyHighlights(sections);
+    case 'unitDepth':
+      return healthValidators.hasShortUnitDepth(units);
+    case 'proctoringEmail':
+      return healthValidators.hasProctoringEscalationEmail(proctoring);
+    default:
+      throw new Error(`Unknown validator ${id}.`);
+  }
+};
+
+const getChecklistValues = ({
+  checklist,
+  isSelfPaced,
+  hasCertificatesEnabled,
+  hasHighlightsEnabled,
+  needsProctoringEscalationEmail,
+}) => {
+  let filteredCheckList;
+
+  if (isSelfPaced) {
+    filteredCheckList = checklist.filter(({ pacingTypeFilter }) => pacingTypeFilter === CHECKLIST_FILTERS.ALL
+      || pacingTypeFilter === CHECKLIST_FILTERS.SELF_PACED);
+  } else {
+    filteredCheckList = checklist.filter(({ pacingTypeFilter }) => pacingTypeFilter === CHECKLIST_FILTERS.ALL
+      || pacingTypeFilter === CHECKLIST_FILTERS.INSTRUCTOR_PACED);
+  }
+
+  filteredCheckList = filteredCheckList.filter(({ id }) => id !== 'certificate'
+    || hasCertificatesEnabled);
+
+  filteredCheckList = filteredCheckList.filter(({ id }) => id !== 'weeklyHighlights'
+    || hasHighlightsEnabled);
+
+  filteredCheckList = filteredCheckList.filter(({ id }) => id !== 'proctoringEmail'
+    || needsProctoringEscalationEmail);
+
+  return filteredCheckList;
+};
+
+export { getChecklistValues, getChecklistValidatedValue };
diff --git a/src/course-outline/utils/getChecklistValues.test.js b/src/course-outline/utils/getChecklistValues.test.js
new file mode 100644
index 0000000000..24ac32e973
--- /dev/null
+++ b/src/course-outline/utils/getChecklistValues.test.js
@@ -0,0 +1,86 @@
+import { getChecklistValues } from './getChecklistValues';
+import { CHECKLIST_FILTERS } from '../constants';
+
+const checklist = [
+  {
+    id: 'welcomeMessage',
+    pacingTypeFilter: CHECKLIST_FILTERS.ALL,
+  },
+  {
+    id: 'gradingPolicy',
+    pacingTypeFilter: CHECKLIST_FILTERS.ALL,
+  },
+  {
+    id: 'certificate',
+    pacingTypeFilter: CHECKLIST_FILTERS.ALL,
+  },
+  {
+    id: 'courseDates',
+    pacingTypeFilter: CHECKLIST_FILTERS.ALL,
+  },
+  {
+    id: 'assignmentDeadlines',
+    pacingTypeFilter: CHECKLIST_FILTERS.INSTRUCTOR_PACED,
+  },
+  {
+    id: 'weeklyHighlights',
+    pacingTypeFilter: CHECKLIST_FILTERS.SELF_PACED,
+  },
+  {
+    id: 'proctoringEmail',
+    pacingTypeFilter: CHECKLIST_FILTERS.ALL,
+  },
+];
+
+let courseData;
+describe('getChecklistValues utility function', () => {
+  beforeEach(() => {
+    courseData = {
+      isSelfPaced: true,
+      hasCertificatesEnabled: true,
+      hasHighlightsEnabled: true,
+      needsProctoringEscalationEmail: true,
+    };
+  });
+  it('returns only checklist items with filters ALL and SELF_PACED when isSelfPaced is true', () => {
+    const filteredChecklist = getChecklistValues({ checklist, ...courseData });
+
+    filteredChecklist.forEach(((
+      item => expect(item.pacingTypeFilter === CHECKLIST_FILTERS.ALL
+        || item.pacingTypeFilter === CHECKLIST_FILTERS.SELF_PACED)
+    )));
+
+    expect(filteredChecklist.filter(item => item.pacingTypeFilter === CHECKLIST_FILTERS.ALL).length)
+      .toEqual(checklist.filter(item => item.pacingTypeFilter === CHECKLIST_FILTERS.ALL).length);
+    expect(filteredChecklist.filter(item => item.pacingTypeFilter === CHECKLIST_FILTERS.SELF_PACED).length)
+      .toEqual(checklist.filter(item => item.pacingTypeFilter === CHECKLIST_FILTERS.SELF_PACED).length);
+  });
+
+  it('returns only checklist items with filters ALL and INSTRUCTOR_PACED when isSelfPaced is false', () => {
+    courseData.isSelfPaced = false;
+    const filteredChecklist = getChecklistValues({ checklist, ...courseData });
+
+    filteredChecklist.forEach(((
+      item => expect(item.pacingTypeFilter === CHECKLIST_FILTERS.ALL
+        || item.pacingTypeFilter === CHECKLIST_FILTERS.INSTRUCTOR_PACED)
+    )));
+
+    expect(filteredChecklist.filter(item => item.pacingTypeFilter === CHECKLIST_FILTERS.ALL).length)
+      .toEqual(checklist.filter(item => item.pacingTypeFilter === CHECKLIST_FILTERS.ALL).length);
+    expect(filteredChecklist
+      .filter(item => item.pacingTypeFilter === CHECKLIST_FILTERS.INSTRUCTOR_PACED).length)
+      .toEqual(checklist.filter(item => item.pacingTypeFilter === CHECKLIST_FILTERS.INSTRUCTOR_PACED).length);
+  });
+
+  it('excludes weekly highlights when they are disabled', () => {
+    courseData.hasHighlightsEnabled = false;
+    const filteredChecklist = getChecklistValues({ checklist, ...courseData });
+    expect(filteredChecklist.filter(item => item.id === 'weeklyHighlights').length).toEqual(0);
+  });
+
+  it('excludes proctoring escalation email when not needed', () => {
+    courseData.needsProctoringEscalationEmail = false;
+    const filteredChecklist = getChecklistValues({ checklist, ...courseData });
+    expect(filteredChecklist.filter(item => item.id === 'proctoringEmail').length).toEqual(0);
+  });
+});
diff --git a/src/course-outline/xblock-status/GradingPolicyAlert.jsx b/src/course-outline/xblock-status/GradingPolicyAlert.jsx
new file mode 100644
index 0000000000..1aec5c790e
--- /dev/null
+++ b/src/course-outline/xblock-status/GradingPolicyAlert.jsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Alert } from '@openedx/paragon';
+import {
+  WarningFilled as WarningIcon,
+} from '@openedx/paragon/icons';
+
+import messages from './messages';
+
+const GradingPolicyAlert = ({
+  graded,
+  gradingType,
+  courseGraders,
+}) => {
+  const intl = useIntl();
+
+  let gradingPolicyMismatch = false;
+  if (graded) {
+    if (gradingType) {
+      gradingPolicyMismatch = (
+        courseGraders.filter((cg) => cg.toLowerCase() === gradingType.toLowerCase())
+      ).length === 0;
+    }
+  }
+
+  if (gradingPolicyMismatch) {
+    return (
+      <Alert className="mt-2 grading-mismatch-alert" variant="warning" icon={WarningIcon}>
+        {intl.formatMessage(messages.gradingPolicyMismatchText, { gradingType })}
+      </Alert>
+    );
+  }
+  return null;
+};
+
+GradingPolicyAlert.defaultProps = {
+  graded: false,
+  gradingType: '',
+  courseGraders: [],
+};
+
+GradingPolicyAlert.propTypes = {
+  graded: PropTypes.bool,
+  gradingType: PropTypes.string,
+  courseGraders: PropTypes.arrayOf(PropTypes.string.isRequired),
+};
+
+export default GradingPolicyAlert;
diff --git a/src/course-outline/xblock-status/GradingTypeAndDueDate.jsx b/src/course-outline/xblock-status/GradingTypeAndDueDate.jsx
new file mode 100644
index 0000000000..b02e138346
--- /dev/null
+++ b/src/course-outline/xblock-status/GradingTypeAndDueDate.jsx
@@ -0,0 +1,134 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Icon } from '@openedx/paragon';
+import {
+  Check as CheckIcon,
+  CalendarMonth as CalendarIcon,
+} from '@openedx/paragon/icons';
+
+import messages from './messages';
+
+const GradingTypeAndDueDate = ({
+  isSelfPaced,
+  isInstructorPaced,
+  isCustomRelativeDatesActive,
+  isTimeLimited,
+  isProctoredExam,
+  isOnboardingExam,
+  isPracticeExam,
+  graded,
+  gradingType,
+  dueDate,
+  relativeWeeksDue,
+}) => {
+  const intl = useIntl();
+  const showRelativeWeeks = isSelfPaced && isCustomRelativeDatesActive && relativeWeeksDue;
+
+  let examValue = '';
+  if (isProctoredExam) {
+    if (isOnboardingExam) {
+      examValue = messages.onboardingExam;
+    } else if (isPracticeExam) {
+      examValue = messages.practiceProctoredExam;
+    } else {
+      examValue = messages.proctoredExam;
+    }
+  } else {
+    examValue = messages.timedExam;
+  }
+
+  const gradingTypeDiv = () => (
+    <div className="d-flex align-items-center mr-1" data-testid="grading-type-div">
+      <span className="sr-only status-grading-label">
+        {intl.formatMessage(messages.gradedAsScreenReaderLabel)}
+      </span>
+      <Icon className="mr-1" size="sm" src={CheckIcon} />
+      <span className="status-grading-value">
+        {gradingType || intl.formatMessage(messages.ungradedText)}
+      </span>
+    </div>
+  );
+
+  const dueDateDiv = () => {
+    if (dueDate && isInstructorPaced) {
+      return (
+        <div className="status-grading-date" data-testid="due-date-div">
+          {intl.formatMessage(messages.dueLabel)} {dueDate}
+        </div>
+      );
+    }
+    return null;
+  };
+
+  const selfPacedRelativeDueWeeksDiv = () => (
+    <div className="d-flex align-items-center" data-testid="self-paced-relative-due-weeks-div">
+      <Icon className="mr-1" size="sm" src={CalendarIcon} />
+      <span className="status-custom-grading-date">
+        {intl.formatMessage(messages.customDueDateLabel, { relativeWeeksDue })}
+      </span>
+    </div>
+  );
+
+  if (isTimeLimited) {
+    return (
+      <>
+        <div className="d-flex align-items-center">
+          {gradingTypeDiv()} -
+          <span className="sr-only">{intl.formatMessage(examValue)}</span>
+          <span className="mx-2" data-testid="exam-value-span">
+            {intl.formatMessage(examValue)}
+          </span>
+          {dueDateDiv()}
+        </div>
+        {showRelativeWeeks && (selfPacedRelativeDueWeeksDiv())}
+      </>
+    );
+  } if ((dueDate && !isSelfPaced) || graded) {
+    return (
+      <>
+        <div className="d-flex align-items-center">
+          {gradingTypeDiv()}
+          {dueDateDiv()}
+        </div>
+        {showRelativeWeeks && (selfPacedRelativeDueWeeksDiv())}
+      </>
+    );
+  } if (showRelativeWeeks) {
+    return (
+      <>
+        {gradingTypeDiv()}
+        {selfPacedRelativeDueWeeksDiv()}
+      </>
+    );
+  }
+  return null;
+};
+
+GradingTypeAndDueDate.defaultProps = {
+  isCustomRelativeDatesActive: false,
+  isTimeLimited: false,
+  isProctoredExam: false,
+  isOnboardingExam: false,
+  isPracticeExam: false,
+  graded: false,
+  gradingType: '',
+  dueDate: '',
+  relativeWeeksDue: null,
+};
+
+GradingTypeAndDueDate.propTypes = {
+  isInstructorPaced: PropTypes.bool.isRequired,
+  isSelfPaced: PropTypes.bool.isRequired,
+  isCustomRelativeDatesActive: PropTypes.bool,
+  isTimeLimited: PropTypes.bool,
+  isProctoredExam: PropTypes.bool,
+  isOnboardingExam: PropTypes.bool,
+  isPracticeExam: PropTypes.bool,
+  graded: PropTypes.bool,
+  gradingType: PropTypes.string,
+  dueDate: PropTypes.string,
+  relativeWeeksDue: PropTypes.number,
+};
+
+export default GradingTypeAndDueDate;
diff --git a/src/course-outline/xblock-status/HideAfterDueMessage.jsx b/src/course-outline/xblock-status/HideAfterDueMessage.jsx
new file mode 100644
index 0000000000..922d646cc6
--- /dev/null
+++ b/src/course-outline/xblock-status/HideAfterDueMessage.jsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Icon } from '@openedx/paragon';
+import {
+  VisibilityOff as HideIcon,
+} from '@openedx/paragon/icons';
+
+import messages from './messages';
+
+const HideAfterDueMessage = ({ isSelfPaced }) => {
+  const intl = useIntl();
+  return (
+    <div className="d-flex align-items-center" data-testid="hide-after-due-message">
+      <Icon className="mr-1" size="sm" src={HideIcon} />
+      <span className="status-hide-after-due-value">
+        {isSelfPaced
+          ? intl.formatMessage(messages.hiddenAfterEndDate)
+          : intl.formatMessage(messages.hiddenAfterDueDate)}
+      </span>
+    </div>
+  );
+};
+
+HideAfterDueMessage.propTypes = {
+  isSelfPaced: PropTypes.bool.isRequired,
+};
+
+export default HideAfterDueMessage;
diff --git a/src/course-outline/xblock-status/ReleaseStatus.jsx b/src/course-outline/xblock-status/ReleaseStatus.jsx
new file mode 100644
index 0000000000..59cbb50596
--- /dev/null
+++ b/src/course-outline/xblock-status/ReleaseStatus.jsx
@@ -0,0 +1,67 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Icon } from '@openedx/paragon';
+import {
+  AccessTime as ClockIcon,
+} from '@openedx/paragon/icons';
+
+import messages from './messages';
+
+const ReleaseStatus = ({
+  isInstructorPaced,
+  explanatoryMessage,
+  releaseDate,
+  releasedToStudents,
+}) => {
+  const intl = useIntl();
+
+  const explanatoryMessageDiv = () => (
+    <span data-testid="explanatory-message-span">
+      {explanatoryMessage}
+    </span>
+  );
+
+  let releaseLabel = messages.unscheduledLabel;
+  if (releasedToStudents) {
+    releaseLabel = messages.releasedLabel;
+  } else if (releaseDate) {
+    releaseLabel = messages.scheduledLabel;
+  }
+
+  const releaseStatusDiv = () => (
+    <div className="d-flex align-items-center" data-testid="release-status-div">
+      <span className="sr-only status-release-label">
+        {intl.formatMessage(messages.releaseStatusScreenReaderTitle)}
+      </span>
+      <Icon className="mr-1" size="sm" src={ClockIcon} />
+      {intl.formatMessage(releaseLabel)}
+      {releaseDate && releaseDate}
+    </div>
+  );
+
+  if (explanatoryMessage) {
+    return explanatoryMessageDiv();
+  }
+
+  if (isInstructorPaced) {
+    return releaseStatusDiv();
+  }
+
+  return null;
+};
+
+ReleaseStatus.defaultProps = {
+  explanatoryMessage: '',
+  releaseDate: '',
+  releasedToStudents: false,
+};
+
+ReleaseStatus.propTypes = {
+  isInstructorPaced: PropTypes.bool.isRequired,
+  explanatoryMessage: PropTypes.string,
+  releaseDate: PropTypes.string,
+  releasedToStudents: PropTypes.bool,
+};
+
+export default ReleaseStatus;
diff --git a/src/course-outline/xblock-status/StatusMessages.jsx b/src/course-outline/xblock-status/StatusMessages.jsx
new file mode 100644
index 0000000000..dd0fc53909
--- /dev/null
+++ b/src/course-outline/xblock-status/StatusMessages.jsx
@@ -0,0 +1,89 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Icon } from '@openedx/paragon';
+import {
+  Lock as LockIcon,
+  Groups as GroupsIcon,
+} from '@openedx/paragon/icons';
+
+import messages from './messages';
+
+const StatusMessages = ({
+  isVertical,
+  staffOnlyMessage,
+  prereq,
+  prereqs,
+  userPartitionInfo,
+  hasPartitionGroupComponents,
+}) => {
+  const intl = useIntl();
+  const statusMessages = [];
+
+  if (prereq) {
+    let prereqDisplayName = '';
+    prereqs.forEach((block) => {
+      if (block.blockUsageKey === prereq) {
+        prereqDisplayName = block.blockDisplayName;
+      }
+    });
+    statusMessages.push({
+      icon: LockIcon,
+      text: intl.formatMessage(messages.prerequisiteLabel, { prereqDisplayName }),
+    });
+  }
+
+  if (!staffOnlyMessage && isVertical) {
+    const { selectedPartitionIndex, selectedGroupsLabel } = userPartitionInfo;
+    if (selectedPartitionIndex !== -1 && !Number.isNaN(selectedPartitionIndex)) {
+      statusMessages.push({
+        icon: GroupsIcon,
+        text: intl.formatMessage(messages.restrictedUnitAccess, { selectedGroupsLabel }),
+      });
+    } else if (hasPartitionGroupComponents) {
+      statusMessages.push({
+        icon: GroupsIcon,
+        text: intl.formatMessage(messages.restrictedUnitAccessToSomeContent),
+      });
+    }
+  }
+
+  if (statusMessages.length > 0) {
+    return (
+      <div className="border-top border-light mt-2 text-dark" data-testid="status-messages-div">
+        {statusMessages.map(({ icon, text }) => (
+          <div key={text} className="d-flex align-items-center pt-1">
+            <Icon className="mr-1" size="sm" src={icon} />
+            {text}
+          </div>
+        ))}
+      </div>
+    );
+  }
+  return null;
+};
+
+StatusMessages.defaultProps = {
+  staffOnlyMessage: false,
+  prereq: '',
+  prereqs: [],
+  userPartitionInfo: {},
+  hasPartitionGroupComponents: false,
+};
+
+StatusMessages.propTypes = {
+  isVertical: PropTypes.bool.isRequired,
+  staffOnlyMessage: PropTypes.bool,
+  prereq: PropTypes.string,
+  prereqs: PropTypes.arrayOf(PropTypes.shape({
+    blockUsageKey: PropTypes.string.isRequired,
+    blockDisplayName: PropTypes.string.isRequired,
+  })),
+  userPartitionInfo: PropTypes.shape({
+    selectedPartitionIndex: PropTypes.number,
+    selectedGroupsLabel: PropTypes.string,
+  }),
+  hasPartitionGroupComponents: PropTypes.bool,
+};
+
+export default StatusMessages;
diff --git a/src/course-outline/xblock-status/XBlockStatus.jsx b/src/course-outline/xblock-status/XBlockStatus.jsx
new file mode 100644
index 0000000000..d077889e71
--- /dev/null
+++ b/src/course-outline/xblock-status/XBlockStatus.jsx
@@ -0,0 +1,122 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { COURSE_BLOCK_NAMES } from '../constants';
+import ReleaseStatus from './ReleaseStatus';
+import GradingPolicyAlert from './GradingPolicyAlert';
+import GradingTypeAndDueDate from './GradingTypeAndDueDate';
+import StatusMessages from './StatusMessages';
+import HideAfterDueMessage from './HideAfterDueMessage';
+
+const XBlockStatus = ({
+  isSelfPaced,
+  isCustomRelativeDatesActive,
+  blockData,
+}) => {
+  const {
+    category,
+    explanatoryMessage,
+    releasedToStudents,
+    releaseDate,
+    isProctoredExam,
+    isOnboardingExam,
+    isPracticeExam,
+    prereq,
+    prereqs,
+    staffOnlyMessage,
+    userPartitionInfo,
+    hasPartitionGroupComponents,
+    format: gradingType,
+    dueDate,
+    relativeWeeksDue,
+    isTimeLimited,
+    graded,
+    courseGraders,
+    hideAfterDue,
+  } = blockData;
+
+  const isInstructorPaced = !isSelfPaced;
+  const isVertical = category === COURSE_BLOCK_NAMES.vertical.id;
+
+  return (
+    <div className="text-secondary-400 x-small mb-1">
+      {!isVertical && (
+        <ReleaseStatus
+          isInstructorPaced={isInstructorPaced}
+          explanatoryMessage={explanatoryMessage}
+          releaseDate={releaseDate}
+          releasedToStudents={releasedToStudents}
+        />
+      )}
+      {!isVertical && (
+        <GradingTypeAndDueDate
+          isSelfPaced={isSelfPaced}
+          isInstructorPaced={isInstructorPaced}
+          isCustomRelativeDatesActive={isCustomRelativeDatesActive}
+          isTimeLimited={isTimeLimited}
+          isProctoredExam={isProctoredExam}
+          isOnboardingExam={isOnboardingExam}
+          isPracticeExam={isPracticeExam}
+          graded={graded}
+          gradingType={gradingType}
+          dueDate={dueDate}
+          relativeWeeksDue={relativeWeeksDue}
+        />
+      )}
+      {hideAfterDue && (
+        <HideAfterDueMessage isSelfPaced={isSelfPaced} />
+      )}
+      <StatusMessages
+        isVertical={isVertical}
+        staffOnlyMessage={staffOnlyMessage}
+        prereq={prereq}
+        prereqs={prereqs}
+        userPartitionInfo={userPartitionInfo}
+        hasPartitionGroupComponents={hasPartitionGroupComponents}
+      />
+      <GradingPolicyAlert
+        graded={graded}
+        gradingType={gradingType}
+        courseGraders={courseGraders}
+      />
+    </div>
+  );
+};
+
+XBlockStatus.defaultProps = {
+  isCustomRelativeDatesActive: false,
+};
+
+XBlockStatus.propTypes = {
+  isSelfPaced: PropTypes.bool.isRequired,
+  isCustomRelativeDatesActive: PropTypes.bool,
+  blockData: PropTypes.shape({
+    category: PropTypes.string.isRequired,
+    explanatoryMessage: PropTypes.string,
+    releasedToStudents: PropTypes.bool,
+    releaseDate: PropTypes.string,
+    isProctoredExam: PropTypes.bool,
+    isOnboardingExam: PropTypes.bool,
+    isPracticeExam: PropTypes.bool,
+    prereq: PropTypes.string,
+    prereqs: PropTypes.arrayOf(PropTypes.shape({
+      blockUsageKey: PropTypes.string.isRequired,
+      blockDisplayName: PropTypes.string.isRequired,
+    })),
+    staffOnlyMessage: PropTypes.bool,
+    userPartitionInfo: PropTypes.shape({
+      selectedPartitionIndex: PropTypes.number,
+      selectedGroupsLabel: PropTypes.string,
+    }),
+    hasPartitionGroupComponents: PropTypes.bool,
+    format: PropTypes.string,
+    dueDate: PropTypes.string,
+    relativeWeeksDue: PropTypes.number,
+    isTimeLimited: PropTypes.bool,
+    graded: PropTypes.bool,
+    courseGraders: PropTypes.arrayOf(PropTypes.string.isRequired),
+    hideAfterDue: PropTypes.bool,
+  }).isRequired,
+};
+
+export default XBlockStatus;
diff --git a/src/course-outline/xblock-status/XBlockStatus.scss b/src/course-outline/xblock-status/XBlockStatus.scss
new file mode 100644
index 0000000000..92fa58acac
--- /dev/null
+++ b/src/course-outline/xblock-status/XBlockStatus.scss
@@ -0,0 +1,4 @@
+.grading-mismatch-alert {
+  font-size: 14px;
+  font-weight: 400;
+}
diff --git a/src/course-outline/xblock-status/XBlockStatus.test.jsx b/src/course-outline/xblock-status/XBlockStatus.test.jsx
new file mode 100644
index 0000000000..a4cd6a064c
--- /dev/null
+++ b/src/course-outline/xblock-status/XBlockStatus.test.jsx
@@ -0,0 +1,494 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { AppProvider } from '@edx/frontend-platform/react';
+import { initializeMockApp } from '@edx/frontend-platform';
+
+import initializeStore from '../../store';
+import XBlockStatus from './XBlockStatus';
+import messages from './messages';
+
+let store;
+
+jest.mock('@edx/frontend-platform/i18n', () => ({
+  ...jest.requireActual('@edx/frontend-platform/i18n'),
+  useIntl: () => ({
+    formatMessage: (message) => message.defaultMessage,
+  }),
+}));
+
+const section = {
+  id: '123',
+  displayName: 'Section Name',
+  published: true,
+  visibilityState: 'live',
+  hasChanges: false,
+  highlights: ['highlight 1', 'highlight 2'],
+  category: 'chapter',
+  explanatoryMessage: '',
+  releasedToStudents: true,
+  releaseDate: 'Feb 05, 2013 at 01:00 UTC',
+  isProctoredExam: false,
+  isOnboardingExam: false,
+  isPracticeExam: false,
+  staffOnlyMessage: false,
+  userPartitionInfo: {
+    selectedPartitionIndex: -1,
+    selectedGroupsLabel: '',
+  },
+  hasPartitionGroupComponents: false,
+  format: 'Homework',
+  dueDate: 'Dec 28, 2023 at 22:00 UTC',
+  isTimeLimited: true,
+  graded: true,
+  courseGraders: ['Homework'],
+  hideAfterDue: true,
+};
+
+const renderComponent = (props) => render(
+  <AppProvider store={store}>
+    <IntlProvider locale="en">
+      <XBlockStatus
+        isSelfPaced={false}
+        isCustomRelativeDatesActive={false}
+        {...props}
+      />
+    </IntlProvider>,
+  </AppProvider>,
+);
+
+describe('<XBlockStatus /> for Instructor paced Section', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+
+    store = initializeStore();
+  });
+
+  it('render XBlockStatus with explanatoryMessage', () => {
+    const { queryByTestId } = renderComponent({
+      blockData: {
+        ...section,
+        explanatoryMessage: 'some explanatory message',
+      },
+    });
+
+    expect(queryByTestId('explanatory-message-span')).toBeInTheDocument();
+    // when explanatory message is displayed, release date should not be visible
+    expect(queryByTestId('release-status-div')).not.toBeInTheDocument();
+  });
+
+  it('renders XBlockStatus with release status, grading type, due date etc.', () => {
+    const { queryByTestId } = renderComponent({ blockData: section });
+
+    expect(queryByTestId('explanatory-message-span')).not.toBeInTheDocument();
+    // when explanatory message is not displayed, release date should be visible
+    const releaseStatusDiv = queryByTestId('release-status-div');
+    expect(releaseStatusDiv).toBeInTheDocument();
+    expect(releaseStatusDiv).toHaveTextContent(
+      `${messages.releasedLabel.defaultMessage}${section.releaseDate}`,
+    );
+
+    // check grading type
+    const gradingTypeDiv = queryByTestId('grading-type-div');
+    expect(gradingTypeDiv).toBeInTheDocument();
+    expect(gradingTypeDiv).toHaveTextContent(section.format);
+    // check exam value label
+    const examValue = queryByTestId('exam-value-span');
+    expect(examValue).toBeInTheDocument();
+    expect(examValue).toHaveTextContent(messages.timedExam.defaultMessage);
+    // check due date div
+    const dueDateDiv = queryByTestId('due-date-div');
+    expect(dueDateDiv).toBeInTheDocument();
+    expect(dueDateDiv).toHaveTextContent(
+      `${messages.dueLabel.defaultMessage} ${section.dueDate}`,
+    );
+    // self paced weeks should not be visible as
+    // isSelfPaced is false as well as isCustomRelativeDatesActive is false
+    expect(queryByTestId('self-paced-relative-due-weeks-div')).not.toBeInTheDocument();
+
+    // check hide after due date message
+    const hideAfterDueMessage = queryByTestId('hide-after-due-message');
+    expect(hideAfterDueMessage).toBeInTheDocument();
+    expect(hideAfterDueMessage).toHaveTextContent(messages.hiddenAfterDueDate.defaultMessage);
+
+    // check status messages
+    const statusDiv = queryByTestId('status-messages-div');
+    expect(statusDiv).not.toBeInTheDocument();
+  });
+});
+
+describe('<XBlockStatus /> for self paced Section', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+
+    store = initializeStore();
+  });
+
+  it('renders XBlockStatus with grading type, due weeks etc.', () => {
+    const { queryByTestId } = renderComponent({
+      isSelfPaced: true,
+      isCustomRelativeDatesActive: true,
+      blockData: {
+        ...section,
+        relativeWeeksDue: 2,
+      },
+    });
+
+    // both explanatoryMessage & releaseStatusDiv should not be visible
+    expect(queryByTestId('explanatory-message-span')).not.toBeInTheDocument();
+    expect(queryByTestId('release-status-div')).not.toBeInTheDocument();
+
+    // check grading type
+    const gradingTypeDiv = queryByTestId('grading-type-div');
+    expect(gradingTypeDiv).toBeInTheDocument();
+    expect(gradingTypeDiv).toHaveTextContent(section.format);
+    // due date should not be visible for self paced courses.
+    expect(queryByTestId('due-date-div')).not.toBeInTheDocument();
+    // check selfPacedRelativeDueWeeksDiv
+    const selfPacedRelativeDueWeeksDiv = queryByTestId('self-paced-relative-due-weeks-div');
+    expect(selfPacedRelativeDueWeeksDiv).toBeInTheDocument();
+    expect(selfPacedRelativeDueWeeksDiv).toHaveTextContent(
+      messages.customDueDateLabel.defaultMessage,
+    );
+
+    // check hide after due date message
+    const hideAfterDueMessage = queryByTestId('hide-after-due-message');
+    expect(hideAfterDueMessage).toBeInTheDocument();
+    expect(hideAfterDueMessage).toHaveTextContent(messages.hiddenAfterEndDate.defaultMessage);
+
+    // check status messages
+    expect(queryByTestId('status-messages-div')).not.toBeInTheDocument();
+  });
+
+  it('renders XBlockStatus with grading mismatch alert', () => {
+    const { queryByText } = renderComponent({
+      blockData: {
+        ...section,
+        format: 'Fun',
+      },
+    });
+
+    // check alert
+    const alert = queryByText(messages.gradingPolicyMismatchText.defaultMessage);
+    expect(alert).toBeInTheDocument();
+  });
+});
+
+const subsection = {
+  id: '123',
+  displayName: 'Subsection Name',
+  published: true,
+  visibilityState: 'live',
+  hasChanges: false,
+  highlights: ['highlight 1', 'highlight 2'],
+  category: 'sequential',
+  explanatoryMessage: '',
+  releasedToStudents: false,
+  releaseDate: 'Feb 05, 2025 at 01:00 UTC',
+  isProctoredExam: false,
+  isOnboardingExam: false,
+  isPracticeExam: false,
+  prereq: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@dbe8fc0',
+  prereqs: [
+    {
+      blockDisplayName: 'Find your study buddy',
+      blockUsageKey: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@dbe8fc0',
+    },
+    {
+      blockDisplayName: 'Something else',
+      blockUsageKey: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@sdafyrb',
+    },
+  ],
+  staffOnlyMessage: false,
+  userPartitionInfo: {
+    selectedPartitionIndex: -1,
+    selectedGroupsLabel: '',
+  },
+  hasPartitionGroupComponents: false,
+  format: 'Homework',
+  dueDate: 'Dec 28, 2023 at 22:00 UTC',
+  isTimeLimited: true,
+  graded: true,
+  courseGraders: ['Homework'],
+  hideAfterDue: true,
+};
+
+describe('<XBlockStatus /> for Instructor paced Subsection', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+
+    store = initializeStore();
+  });
+
+  it('renders XBlockStatus with release status, grading type, due date etc.', () => {
+    const { queryByTestId } = renderComponent({ blockData: subsection });
+
+    expect(queryByTestId('explanatory-message-span')).not.toBeInTheDocument();
+    // when explanatory message is not displayed, release date should be visible
+    const releaseStatusDiv = queryByTestId('release-status-div');
+    expect(releaseStatusDiv).toBeInTheDocument();
+    expect(releaseStatusDiv).toHaveTextContent(
+      `${messages.scheduledLabel.defaultMessage}${subsection.releaseDate}`,
+    );
+
+    // check grading type
+    const gradingTypeDiv = queryByTestId('grading-type-div');
+    expect(gradingTypeDiv).toBeInTheDocument();
+    expect(gradingTypeDiv).toHaveTextContent(subsection.format);
+    // check exam value label
+    const examValue = queryByTestId('exam-value-span');
+    expect(examValue).toBeInTheDocument();
+    expect(examValue).toHaveTextContent(messages.timedExam.defaultMessage);
+    // check due date div
+    const dueDateDiv = queryByTestId('due-date-div');
+    expect(dueDateDiv).toBeInTheDocument();
+    expect(dueDateDiv).toHaveTextContent(
+      `${messages.dueLabel.defaultMessage} ${subsection.dueDate}`,
+    );
+    // self paced weeks should not be visible as
+    // isSelfPaced is false as well as isCustomRelativeDatesActive is false
+    expect(queryByTestId('self-paced-relative-due-weeks-div')).not.toBeInTheDocument();
+
+    // check hide after due date message
+    const hideAfterDueMessage = queryByTestId('hide-after-due-message');
+    expect(hideAfterDueMessage).toBeInTheDocument();
+    expect(hideAfterDueMessage).toHaveTextContent(messages.hiddenAfterDueDate.defaultMessage);
+
+    // check status messages
+    const statusDiv = queryByTestId('status-messages-div');
+    expect(statusDiv).toBeInTheDocument();
+    expect(statusDiv).toHaveTextContent(messages.prerequisiteLabel.defaultMessage);
+  });
+
+  it('renders XBlockStatus with proctored exam info', () => {
+    const { queryByTestId } = renderComponent({
+      blockData: {
+        ...subsection,
+        isProctoredExam: true,
+        isOnboardingExam: false,
+        isPracticeExam: false,
+      },
+    });
+
+    // check exam value label
+    const examValue = queryByTestId('exam-value-span');
+    expect(examValue).toBeInTheDocument();
+    expect(examValue).toHaveTextContent(messages.proctoredExam.defaultMessage);
+  });
+
+  it('renders XBlockStatus with practice proctored exam info', () => {
+    const { queryByTestId } = renderComponent({
+      blockData: {
+        ...subsection,
+        isProctoredExam: true,
+        isOnboardingExam: false,
+        isPracticeExam: true,
+      },
+    });
+
+    // check exam value label
+    const examValue = queryByTestId('exam-value-span');
+    expect(examValue).toBeInTheDocument();
+    expect(examValue).toHaveTextContent(messages.practiceProctoredExam.defaultMessage);
+  });
+
+  it('renders XBlockStatus with onboarding exam info', () => {
+    const { queryByTestId } = renderComponent({
+      blockData: {
+        ...subsection,
+        isProctoredExam: true,
+        isOnboardingExam: true,
+        isPracticeExam: false,
+      },
+    });
+
+    // check exam value label
+    const examValue = queryByTestId('exam-value-span');
+    expect(examValue).toBeInTheDocument();
+    expect(examValue).toHaveTextContent(messages.onboardingExam.defaultMessage);
+  });
+
+  it('renders XBlockStatus correctly for graded but not time limited subsection', () => {
+    const { queryByTestId } = renderComponent({
+      blockData: {
+        ...subsection,
+        isTimeLimited: false,
+        graded: true,
+      },
+    });
+
+    // check grading type
+    const gradingTypeDiv = queryByTestId('grading-type-div');
+    expect(gradingTypeDiv).toBeInTheDocument();
+    expect(gradingTypeDiv).toHaveTextContent(subsection.format);
+    // exam value label should not be visible
+    expect(queryByTestId('exam-value-span')).not.toBeInTheDocument();
+    // check due date div
+    const dueDateDiv = queryByTestId('due-date-div');
+    expect(dueDateDiv).toBeInTheDocument();
+    expect(dueDateDiv).toHaveTextContent(
+      `${messages.dueLabel.defaultMessage} ${subsection.dueDate}`,
+    );
+    // self paced weeks should not be visible as
+    // isSelfPaced is false as well as isCustomRelativeDatesActive is false
+    expect(queryByTestId('self-paced-relative-due-weeks-div')).not.toBeInTheDocument();
+  });
+});
+
+describe('<XBlockStatus /> for self paced Subsection', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+
+    store = initializeStore();
+  });
+
+  it('renders XBlockStatus with grading type, due weeks etc.', () => {
+    const { queryByTestId } = renderComponent({
+      isSelfPaced: true,
+      isCustomRelativeDatesActive: true,
+      blockData: {
+        ...subsection,
+        relativeWeeksDue: 2,
+      },
+    });
+
+    // both explanatoryMessage & releaseStatusDiv should not be visible
+    expect(queryByTestId('explanatory-message-span')).not.toBeInTheDocument();
+    expect(queryByTestId('release-status-div')).not.toBeInTheDocument();
+
+    // check grading type
+    const gradingTypeDiv = queryByTestId('grading-type-div');
+    expect(gradingTypeDiv).toBeInTheDocument();
+    expect(gradingTypeDiv).toHaveTextContent(subsection.format);
+    // due date should not be visible for self paced courses.
+    expect(queryByTestId('due-date-div')).not.toBeInTheDocument();
+    // check selfPacedRelativeDueWeeksDiv
+    const selfPacedRelativeDueWeeksDiv = queryByTestId('self-paced-relative-due-weeks-div');
+    expect(selfPacedRelativeDueWeeksDiv).toBeInTheDocument();
+    expect(selfPacedRelativeDueWeeksDiv).toHaveTextContent(
+      messages.customDueDateLabel.defaultMessage,
+    );
+
+    // check hide after due date message
+    const hideAfterDueMessage = queryByTestId('hide-after-due-message');
+    expect(hideAfterDueMessage).toBeInTheDocument();
+    expect(hideAfterDueMessage).toHaveTextContent(messages.hiddenAfterEndDate.defaultMessage);
+
+    // check status messages
+    const statusDiv = queryByTestId('status-messages-div');
+    expect(statusDiv).toBeInTheDocument();
+    expect(statusDiv).toHaveTextContent(messages.prerequisiteLabel.defaultMessage);
+  });
+});
+
+const unit = {
+  id: '123',
+  displayName: 'Unit Name',
+  published: true,
+  visibilityState: 'live',
+  hasChanges: false,
+  highlights: ['highlight 1', 'highlight 2'],
+  category: 'vertical',
+  explanatoryMessage: '',
+  releasedToStudents: true,
+  releaseDate: 'Feb 05, 2013 at 01:00 UTC',
+  isProctoredExam: false,
+  isOnboardingExam: false,
+  isPracticeExam: false,
+  staffOnlyMessage: false,
+  userPartitionInfo: {
+    selectedPartitionIndex: 1,
+    selectedGroupsLabel: 'Some label',
+  },
+  hasPartitionGroupComponents: false,
+  format: 'Homework',
+  dueDate: 'Dec 28, 2023 at 22:00 UTC',
+  isTimeLimited: true,
+  graded: true,
+  courseGraders: ['Homework'],
+};
+
+describe('<XBlockStatus /> for unit', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+
+    store = initializeStore();
+  });
+
+  it('renders XBlockStatus with status messages', () => {
+    const { queryByTestId } = renderComponent({ blockData: unit });
+
+    expect(queryByTestId('explanatory-message-span')).not.toBeInTheDocument();
+    expect(queryByTestId('release-status-div')).not.toBeInTheDocument();
+
+    // grading type should not be visible
+    expect(queryByTestId('grading-type-div')).not.toBeInTheDocument();
+    // due date should not be visible
+    expect(queryByTestId('due-date-div')).not.toBeInTheDocument();
+
+    // self paced weeks should not be visible for units
+    expect(queryByTestId('self-paced-relative-due-weeks-div')).not.toBeInTheDocument();
+
+    // check hide after due date message
+    // hide after due date message should not be visible as the flag is set to false
+    expect(queryByTestId('hide-after-due-message')).not.toBeInTheDocument();
+
+    // check status messages for partition info
+    const statusDiv = queryByTestId('status-messages-div');
+    expect(statusDiv).toBeInTheDocument();
+    expect(statusDiv).toHaveTextContent(messages.restrictedUnitAccess.defaultMessage);
+  });
+
+  it('renders XBlockStatus with status messages', () => {
+    const { queryByTestId } = renderComponent({
+      blockData: {
+        ...unit,
+        hasPartitionGroupComponents: true,
+        userPartitionInfo: {
+          selectedPartitionIndex: -1,
+          selectedGroupsLabel: '',
+        },
+      },
+    });
+
+    // check status messages for partition info
+    const statusDiv = queryByTestId('status-messages-div');
+    expect(statusDiv).toBeInTheDocument();
+    expect(statusDiv).toHaveTextContent(messages.restrictedUnitAccessToSomeContent.defaultMessage);
+  });
+});
diff --git a/src/course-outline/xblock-status/messages.js b/src/course-outline/xblock-status/messages.js
new file mode 100644
index 0000000000..33f3397624
--- /dev/null
+++ b/src/course-outline/xblock-status/messages.js
@@ -0,0 +1,78 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  unscheduledLabel: {
+    id: 'course-authoring.course-outline.xblock-status.unscheduled.label',
+    defaultMessage: 'Unscheduled',
+  },
+  releasedLabel: {
+    id: 'course-authoring.course-outline.xblock-status.released.label',
+    defaultMessage: 'Released: ',
+  },
+  scheduledLabel: {
+    id: 'course-authoring.course-outline.xblock-status.scheduled.label',
+    defaultMessage: 'Scheduled: ',
+  },
+  onboardingExam: {
+    id: 'course-authoring.course-outline.xblock-status.onboardingExam.value',
+    defaultMessage: 'Onboarding Exam',
+  },
+  practiceProctoredExam: {
+    id: 'course-authoring.course-outline.xblock-status.practiceProctoredExam.value',
+    defaultMessage: 'Practice proctored Exam',
+  },
+  proctoredExam: {
+    id: 'course-authoring.course-outline.xblock-status.proctoredExam.value',
+    defaultMessage: 'Proctored Exam',
+  },
+  timedExam: {
+    id: 'course-authoring.course-outline.xblock-status.timedExam.value',
+    defaultMessage: 'Timed Exam',
+  },
+  releaseStatusScreenReaderTitle: {
+    id: 'course-authoring.course-outline.xblock-status.releaseStatusScreenReader.title',
+    defaultMessage: 'Release Status: ',
+  },
+  gradedAsScreenReaderLabel: {
+    id: 'course-authoring.course-outline.xblock-status.gradedAsScreenReader.label',
+    defaultMessage: 'Graded as: ',
+  },
+  ungradedText: {
+    id: 'course-authoring.course-outline.xblock-status.ungraded.text',
+    defaultMessage: 'Ungraded',
+  },
+  dueLabel: {
+    id: 'course-authoring.course-outline.xblock-status.due.label',
+    defaultMessage: 'Due:',
+  },
+  customDueDateLabel: {
+    id: 'course-authoring.course-outline.xblock-status.custom-due-date.label',
+    defaultMessage: 'Custom due date: {relativeWeeksDue, plural, one {# week} other {# weeks}} from enrollment',
+  },
+  prerequisiteLabel: {
+    id: 'course-authoring.course-outline.xblock-status.prerequisite.label',
+    defaultMessage: 'Prerequisite: {prereqDisplayName}',
+  },
+  restrictedUnitAccess: {
+    id: 'course-authoring.course-outline.xblock-status.restrictedUnitAccess.text',
+    defaultMessage: 'Access to this unit is restricted to: {selectedGroupsLabel}',
+  },
+  restrictedUnitAccessToSomeContent: {
+    id: 'course-authoring.course-outline.xblock-status.restrictedUnitAccessToSomeContent.text',
+    defaultMessage: 'Access to some content in this unit is restricted to specific groups of learners',
+  },
+  gradingPolicyMismatchText: {
+    id: 'course-authoring.course-outline.xblock-status.gradingPolicyMismatch.text',
+    defaultMessage: 'This subsection is configured as "{gradingType}", which doesn\'t exist in the current grading policy.',
+  },
+  hiddenAfterEndDate: {
+    id: 'course-authoring.course-outline.xblock-status.hiddenAfterEndDate.text',
+    defaultMessage: 'Subsection is hidden after course end date',
+  },
+  hiddenAfterDueDate: {
+    id: 'course-authoring.course-outline.xblock-status.hiddenAfterDueDate.text',
+    defaultMessage: 'Subsection is hidden after due date',
+  },
+});
+
+export default messages;
diff --git a/src/course-rerun/CourseRerun.test.jsx b/src/course-rerun/CourseRerun.test.jsx
new file mode 100644
index 0000000000..9c403b368b
--- /dev/null
+++ b/src/course-rerun/CourseRerun.test.jsx
@@ -0,0 +1,93 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { MemoryRouter } from 'react-router-dom';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { initializeMockApp } from '@edx/frontend-platform';
+import { IntlProvider, injectIntl } from '@edx/frontend-platform/i18n';
+import { AppProvider } from '@edx/frontend-platform/react';
+import {
+  act, fireEvent, render, waitFor,
+} from '@testing-library/react';
+import MockAdapter from 'axios-mock-adapter';
+
+import initializeStore from '../store';
+import { studioHomeMock } from '../studio-home/__mocks__';
+import { getStudioHomeApiUrl } from '../studio-home/data/api';
+import { RequestStatus } from '../data/constants';
+import messages from './messages';
+import CourseRerun from '.';
+
+let axiosMock;
+let store;
+const mockPathname = '/foo-bar';
+
+jest.mock('react-redux', () => ({
+  ...jest.requireActual('react-redux'),
+  useSelector: jest.fn(),
+}));
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useLocation: () => ({
+    pathname: mockPathname,
+  }),
+}));
+
+const RootWrapper = () => (
+  <MemoryRouter>
+    <AppProvider store={store} wrapWithRouter={false}>
+      <IntlProvider locale="en">
+        <CourseRerun intl={injectIntl} />
+      </IntlProvider>
+    </AppProvider>
+  </MemoryRouter>
+);
+
+describe('<CourseRerun />', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+    store = initializeStore();
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+    axiosMock.onGet(getStudioHomeApiUrl()).reply(200, studioHomeMock);
+    useSelector.mockReturnValue(studioHomeMock);
+  });
+
+  it('should render successfully', () => {
+    const { getByText, getAllByRole } = render(<RootWrapper />);
+    expect(getByText(messages.rerunTitle.defaultMessage));
+    expect(getAllByRole('button', { name: messages.cancelButton.defaultMessage }).length).toBe(2);
+  });
+
+  it('should navigate to /home on cancel button click', () => {
+    const { getAllByRole } = render(<RootWrapper />);
+    const cancelButton = getAllByRole('button', { name: messages.cancelButton.defaultMessage })[0];
+
+    fireEvent.click(cancelButton);
+    waitFor(() => {
+      expect(window.location.pathname).toBe('/home');
+    });
+  });
+
+  it('shows the spinner before the query is complete', async () => {
+    useSelector.mockReturnValue({ organizationLoadingStatus: RequestStatus.IN_PROGRESS });
+
+    await act(async () => {
+      const { getByRole } = render(<RootWrapper />);
+      const spinner = getByRole('status');
+      expect(spinner.textContent).toEqual('Loading...');
+    });
+  });
+
+  it('should show footer', () => {
+    const { getByText } = render(<RootWrapper />);
+    expect(getByText('Looking for help with Studio?')).toBeInTheDocument();
+    expect(getByText('LMS')).toHaveAttribute('href', process.env.LMS_BASE_URL);
+  });
+});
diff --git a/src/course-rerun/course-rerun-form/CourseRerunForm.test.jsx b/src/course-rerun/course-rerun-form/CourseRerunForm.test.jsx
new file mode 100644
index 0000000000..5b73f1db3c
--- /dev/null
+++ b/src/course-rerun/course-rerun-form/CourseRerunForm.test.jsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { render } from '@testing-library/react';
+import { initializeMockApp } from '@edx/frontend-platform';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { AppProvider } from '@edx/frontend-platform/react';
+
+import { studioHomeMock } from '../../studio-home/__mocks__';
+import initializeStore from '../../store';
+import CourseRerunForm from '.';
+
+jest.mock('react-redux', () => ({
+  ...jest.requireActual('react-redux'),
+  useSelector: jest.fn(),
+}));
+
+let store;
+
+const onClickCancelMock = jest.fn();
+
+const RootWrapper = (props) => (
+  <IntlProvider locale="en">
+    <AppProvider store={store}>
+      <CourseRerunForm {...props} />
+    </AppProvider>
+  </IntlProvider>
+);
+
+const props = {
+  initialFormValues: {
+    displayName: '',
+    org: '',
+    number: '',
+    run: '',
+  },
+  onClickCancel: onClickCancelMock,
+};
+
+describe('<CourseRerunForm />', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+
+    store = initializeStore();
+    useSelector.mockReturnValue(studioHomeMock);
+  });
+
+  it('renders description successfully', () => {
+    const { getByText } = render(<RootWrapper {...props} />);
+    expect(getByText('Provide identifying information for this re-run of the course. The original course is not affected in any way by a re-run', { exact: false })).toBeInTheDocument();
+  });
+});
diff --git a/src/course-rerun/course-rerun-form/index.jsx b/src/course-rerun/course-rerun-form/index.jsx
new file mode 100644
index 0000000000..426166e5ad
--- /dev/null
+++ b/src/course-rerun/course-rerun-form/index.jsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import { CreateOrRerunCourseForm } from '../../generic/create-or-rerun-course';
+import messages from './messages';
+
+const CourseRerunForm = ({ initialFormValues, onClickCancel }) => {
+  const intl = useIntl();
+  return (
+    <div className="mb-4.5">
+      <div className="my-2.5">{intl.formatMessage(messages.rerunCourseDescription, {
+        strong: (
+          <strong>{intl.formatMessage(messages.rerunCourseDescriptionStrong)}</strong>
+        ),
+      })}
+      </div>
+      <CreateOrRerunCourseForm
+        initialValues={initialFormValues}
+        onClickCancel={onClickCancel}
+      />
+    </div>
+  );
+};
+
+CourseRerunForm.propTypes = {
+  initialFormValues: PropTypes.shape({
+    displayName: PropTypes.string.isRequired,
+    org: PropTypes.string.isRequired,
+    number: PropTypes.string.isRequired,
+    run: PropTypes.string,
+  }).isRequired,
+  onClickCancel: PropTypes.func.isRequired,
+};
+
+export default CourseRerunForm;
diff --git a/src/course-rerun/course-rerun-form/messages.js b/src/course-rerun/course-rerun-form/messages.js
new file mode 100644
index 0000000000..db103fa153
--- /dev/null
+++ b/src/course-rerun/course-rerun-form/messages.js
@@ -0,0 +1,14 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  rerunCourseDescription: {
+    id: 'course-authoring.course-rerun.form.description',
+    defaultMessage: 'Provide identifying information for this re-run of the course. The original course is not affected in any way by a re-run. {strong}',
+  },
+  rerunCourseDescriptionStrong: {
+    id: 'course-authoring.course-rerun.form.description.strong',
+    defaultMessage: 'Note: Together, the organization, course number, and course run must uniquely identify this new course instance.',
+  },
+});
+
+export default messages;
diff --git a/src/course-rerun/course-rerun-sidebar/CourseRerunSidebar.test.jsx b/src/course-rerun/course-rerun-sidebar/CourseRerunSidebar.test.jsx
new file mode 100644
index 0000000000..d497d873f1
--- /dev/null
+++ b/src/course-rerun/course-rerun-sidebar/CourseRerunSidebar.test.jsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { initializeMockApp } from '@edx/frontend-platform';
+import { AppProvider } from '@edx/frontend-platform/react';
+
+import initializeStore from '../../store';
+import CourseRerunSideBar from '.';
+import messages from './messages';
+
+let store;
+const mockPathname = '/foo-bar';
+const courseId = '123';
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useLocation: () => ({
+    pathname: mockPathname,
+  }),
+}));
+
+const renderComponent = (props) => render(
+  <AppProvider store={store} messages={{}}>
+    <IntlProvider locale="en">
+      <CourseRerunSideBar courseId={courseId} {...props} />
+    </IntlProvider>
+  </AppProvider>,
+);
+
+describe('<CourseRerunSideBar />', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+    store = initializeStore();
+  });
+
+  it('render CourseRerunSideBar successfully', () => {
+    const { getByText } = renderComponent();
+
+    expect(getByText(messages.sectionTitle1.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.sectionDescription1.defaultMessage, { exact: false })).toBeInTheDocument();
+    expect(getByText(messages.sectionTitle2.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.sectionDescription2.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.sectionTitle3.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.sectionDescription3.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.sectionLink4.defaultMessage)).toBeInTheDocument();
+  });
+});
diff --git a/src/course-rerun/course-rerun-sidebar/index.jsx b/src/course-rerun/course-rerun-sidebar/index.jsx
new file mode 100644
index 0000000000..4c26995577
--- /dev/null
+++ b/src/course-rerun/course-rerun-sidebar/index.jsx
@@ -0,0 +1,83 @@
+import React from 'react';
+import { v4 as uuid } from 'uuid';
+import { Hyperlink } from '@openedx/paragon';
+import { FormattedDate, useIntl } from '@edx/frontend-platform/i18n';
+
+import { useHelpUrls } from '../../help-urls/hooks';
+import { HelpSidebar } from '../../generic/help-sidebar';
+import messages from './messages';
+
+const CourseRerunSideBar = () => {
+  const intl = useIntl();
+  const { default: learnMoreUrl } = useHelpUrls(['default']);
+  const defaultCourseDate = new Date(Date.UTC(2030, 0, 1, 0, 0));
+  const localizedCourseDate = (
+    <FormattedDate
+      value={defaultCourseDate}
+      year="numeric"
+      month="long"
+      day="2-digit"
+      hour="numeric"
+      minute="numeric"
+    />
+  );
+
+  const sidebarMessages = [
+    {
+      title: intl.formatMessage(messages.sectionTitle1),
+      description: `${intl.formatMessage(messages.sectionDescription1)}`,
+      date: localizedCourseDate,
+    },
+    {
+      title: intl.formatMessage(messages.sectionTitle2),
+      description: intl.formatMessage(messages.sectionDescription2),
+    },
+    {
+      title: intl.formatMessage(messages.sectionTitle3),
+      description: intl.formatMessage(messages.sectionDescription3),
+    },
+    {
+      link: {
+        text: intl.formatMessage(messages.sectionLink4),
+        href: learnMoreUrl,
+      },
+    },
+  ];
+
+  return (
+    <HelpSidebar
+      intl={intl}
+      showOtherSettings={false}
+      className="mt-3"
+    >
+      {sidebarMessages.map(({
+        title,
+        description,
+        link,
+        date,
+      }, index) => {
+        const isLastSection = index === sidebarMessages.length - 1;
+
+        return (
+          <div key={uuid()}>
+            <h4 className="help-sidebar-about-title">{title}</h4>
+            <p className="help-sidebar-about-descriptions">{description} {date}</p>
+            {!!link && (
+              <Hyperlink
+                className="small"
+                destination={link.href || ''}
+                target="_blank"
+                showLaunchIcon={false}
+              >
+                {link.text}
+              </Hyperlink>
+            )}
+            {!isLastSection && <hr className="my-3.5" />}
+          </div>
+        );
+      })}
+    </HelpSidebar>
+  );
+};
+
+export default CourseRerunSideBar;
diff --git a/src/course-rerun/course-rerun-sidebar/messages.js b/src/course-rerun/course-rerun-sidebar/messages.js
new file mode 100644
index 0000000000..594545bee8
--- /dev/null
+++ b/src/course-rerun/course-rerun-sidebar/messages.js
@@ -0,0 +1,34 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  sectionTitle1: {
+    id: 'course-authoring.course-rerun.sidebar.section-1.title',
+    defaultMessage: 'When will my course re-run start?',
+  },
+  sectionDescription1: {
+    id: 'course-authoring.course-rerun.sidebar.section-1.description',
+    defaultMessage: 'The new course is set to start on',
+  },
+  sectionTitle2: {
+    id: 'course-authoring.course-rerun.sidebar.section-2.title',
+    defaultMessage: 'What transfers from the original course?',
+  },
+  sectionDescription2: {
+    id: 'course-authoring.course-rerun.sidebar.section-2.description',
+    defaultMessage: 'The new course has the same course outline and content as the original course. All problems, videos, announcements, and other files are duplicated to the new course.',
+  },
+  sectionTitle3: {
+    id: 'course-authoring.course-rerun.sidebar.section-3.title',
+    defaultMessage: 'What does not transfer from the original course?',
+  },
+  sectionDescription3: {
+    id: 'course-authoring.course-rerun.sidebar.section-3.description',
+    defaultMessage: 'You are the only member of the new course\'s staff. No students are enrolled in the course, and there is no student data. There is no content in the discussion topics or wiki.',
+  },
+  sectionLink4: {
+    id: 'course-authoring.course-rerun.sidebar.section-4.link',
+    defaultMessage: 'Learn more about course re-runs',
+  },
+});
+
+export default messages;
diff --git a/src/course-rerun/hooks.jsx b/src/course-rerun/hooks.jsx
new file mode 100644
index 0000000000..13c34ba729
--- /dev/null
+++ b/src/course-rerun/hooks.jsx
@@ -0,0 +1,59 @@
+import { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import { RequestStatus } from '../data/constants';
+import { updateSavingStatus } from '../generic/data/slice';
+import {
+  getSavingStatus,
+  getCourseRerunData,
+  getCourseData,
+} from '../generic/data/selectors';
+import { fetchCourseRerunQuery, fetchOrganizationsQuery } from '../generic/data/thunks';
+import { fetchStudioHomeData } from '../studio-home/data/thunks';
+
+const useCourseRerun = (courseId) => {
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const savingStatus = useSelector(getSavingStatus);
+  const courseData = useSelector(getCourseData);
+  const courseRerunData = useSelector(getCourseRerunData);
+
+  const {
+    displayName = '',
+    org = '',
+    run = '',
+    number = '',
+  } = courseRerunData;
+  const originalCourseData = `${org} ${number} ${run}`;
+  const initialFormValues = {
+    displayName,
+    org,
+    number,
+    run: '',
+  };
+
+  useEffect(() => {
+    dispatch(fetchStudioHomeData());
+    dispatch(fetchCourseRerunQuery(courseId));
+    dispatch(fetchOrganizationsQuery());
+  }, []);
+
+  useEffect(() => {
+    if (savingStatus === RequestStatus.SUCCESSFUL) {
+      dispatch(updateSavingStatus({ status: '' }));
+    }
+  }, [savingStatus]);
+
+  return {
+    intl,
+    courseData,
+    displayName,
+    savingStatus,
+    initialFormValues,
+    originalCourseData,
+    dispatch,
+  };
+};
+
+export { useCourseRerun };
diff --git a/src/course-rerun/index.jsx b/src/course-rerun/index.jsx
new file mode 100644
index 0000000000..1bfeed4f9a
--- /dev/null
+++ b/src/course-rerun/index.jsx
@@ -0,0 +1,96 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import {
+  Container,
+  Layout,
+  Stack,
+  ActionRow,
+  Button,
+} from '@openedx/paragon';
+import { StudioFooter } from '@edx/frontend-component-footer';
+import { useNavigate, useParams } from 'react-router-dom';
+
+import Header from '../header';
+import Loading from '../generic/Loading';
+import { getLoadingStatuses } from '../generic/data/selectors';
+import InternetConnectionAlert from '../generic/internet-connection-alert';
+import { RequestStatus } from '../data/constants';
+import CourseRerunForm from './course-rerun-form';
+import CourseRerunSideBar from './course-rerun-sidebar';
+import messages from './messages';
+import { useCourseRerun } from './hooks';
+
+const CourseRerun = () => {
+  const { courseId } = useParams();
+  const navigate = useNavigate();
+  const {
+    intl,
+    displayName,
+    savingStatus,
+    initialFormValues,
+    originalCourseData,
+  } = useCourseRerun(courseId);
+  const { organizationLoadingStatus } = useSelector(getLoadingStatuses);
+
+  if (organizationLoadingStatus === RequestStatus.IN_PROGRESS) {
+    return <Loading />;
+  }
+
+  const handleRerunCourseCancel = () => {
+    navigate('/home');
+  };
+
+  return (
+    <>
+      <Header isHiddenMainMenu />
+      <Container size="xl" className="small p-4 mt-3">
+        <section className="mb-4">
+          <article>
+            <section>
+              <header className="d-flex">
+                <Stack>
+                  <h2>
+                    {intl.formatMessage(messages.rerunTitle)} {displayName}
+                  </h2>
+                  <span className="large">{originalCourseData}</span>
+                </Stack>
+                <ActionRow className="ml-auto">
+                  <Button variant="outline-primary" size="sm" onClick={handleRerunCourseCancel}>
+                    {intl.formatMessage(messages.cancelButton)}
+                  </Button>
+                </ActionRow>
+              </header>
+              <hr />
+            </section>
+          </article>
+          <Layout
+            lg={[{ span: 9 }, { span: 3 }]}
+            md={[{ span: 9 }, { span: 3 }]}
+            sm={[{ span: 9 }, { span: 3 }]}
+            xs={[{ span: 9 }, { span: 3 }]}
+            xl={[{ span: 9 }, { span: 3 }]}
+          >
+            <Layout.Element>
+              <CourseRerunForm
+                initialFormValues={initialFormValues}
+                onClickCancel={handleRerunCourseCancel}
+              />
+            </Layout.Element>
+            <Layout.Element>
+              <CourseRerunSideBar />
+            </Layout.Element>
+          </Layout>
+        </section>
+      </Container>
+      <div className="alert-toast">
+        <InternetConnectionAlert
+          isFailed={savingStatus === RequestStatus.FAILED}
+          isQueryPending={savingStatus === RequestStatus.PENDING}
+        />
+      </div>
+      <StudioFooter />
+    </>
+  );
+};
+
+export default CourseRerun;
diff --git a/src/course-rerun/messages.js b/src/course-rerun/messages.js
new file mode 100644
index 0000000000..21f6943cc2
--- /dev/null
+++ b/src/course-rerun/messages.js
@@ -0,0 +1,14 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  rerunTitle: {
+    id: 'course-authoring.course-rerun.title',
+    defaultMessage: 'Create a re-run of',
+  },
+  cancelButton: {
+    id: 'course-authoring.course-rerun.actions.button.cancel',
+    defaultMessage: 'Cancel',
+  },
+});
+
+export default messages;
diff --git a/src/course-team/CourseTeam.jsx b/src/course-team/CourseTeam.jsx
new file mode 100644
index 0000000000..29ad5b80f9
--- /dev/null
+++ b/src/course-team/CourseTeam.jsx
@@ -0,0 +1,178 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl, injectIntl } from '@edx/frontend-platform/i18n';
+import {
+  Button,
+  Container,
+  Layout,
+} from '@openedx/paragon';
+import { Add as IconAdd } from '@openedx/paragon/icons';
+
+import InternetConnectionAlert from '../generic/internet-connection-alert';
+import { useModel } from '../generic/model-store';
+import SubHeader from '../generic/sub-header/SubHeader';
+import { USER_ROLES } from '../constants';
+import messages from './messages';
+import CourseTeamSideBar from './course-team-sidebar/CourseTeamSidebar';
+import AddUserForm from './add-user-form/AddUserForm';
+import AddTeamMember from './add-team-member/AddTeamMember';
+import CourseTeamMember from './course-team-member/CourseTeamMember';
+import InfoModal from './info-modal/InfoModal';
+import { useCourseTeam } from './hooks';
+import getPageHeadTitle from '../generic/utils';
+import ConnectionErrorAlert from '../generic/ConnectionErrorAlert';
+
+const CourseTeam = ({ courseId }) => {
+  const intl = useIntl();
+
+  const courseDetails = useModel('courseDetails', courseId);
+  document.title = getPageHeadTitle(courseDetails?.name, intl.formatMessage(messages.headingTitle));
+
+  const {
+    modalType,
+    errorMessage,
+    courseName,
+    currentEmail,
+    courseTeamUsers,
+    currentUserEmail,
+    isLoading,
+    isLoadingDenied,
+    isSingleAdmin,
+    isFormVisible,
+    isQueryPending,
+    isAllowActions,
+    isInfoModalOpen,
+    isOwnershipHint,
+    isShowAddTeamMember,
+    isShowInitialSidebar,
+    isShowUserFilledSidebar,
+    isInternetConnectionAlertFailed,
+    openForm,
+    hideForm,
+    closeInfoModal,
+    handleAddUserSubmit,
+    handleOpenDeleteModal,
+    handleDeleteUserSubmit,
+    handleChangeRoleUserSubmit,
+    handleInternetConnectionFailed,
+  } = useCourseTeam({ intl, courseId });
+
+  if (isLoadingDenied) {
+    return (
+      <Container size="xl" className="course-unit px-4 mt-4">
+        <ConnectionErrorAlert />
+      </Container>
+    );
+  }
+
+  if (isLoading) {
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    return <></>;
+  }
+
+  return (
+    <>
+      <Container size="xl" className="course-team px-4">
+        <section className="course-team-container mb-4">
+          <Layout
+            lg={[{ span: 9 }, { span: 3 }]}
+            md={[{ span: 9 }, { span: 3 }]}
+            sm={[{ span: 9 }, { span: 3 }]}
+            xs={[{ span: 9 }, { span: 3 }]}
+            xl={[{ span: 9 }, { span: 3 }]}
+          >
+            <Layout.Element>
+              <article>
+                <div>
+                  <SubHeader
+                    title={intl.formatMessage(messages.headingTitle)}
+                    subtitle={intl.formatMessage(messages.headingSubtitle)}
+                    headerActions={isAllowActions && (
+                      <Button
+                        variant="primary"
+                        iconBefore={IconAdd}
+                        size="sm"
+                        onClick={openForm}
+                        disabled={isFormVisible}
+                      >
+                        {intl.formatMessage(messages.addNewMemberButton)}
+                      </Button>
+                    )}
+                  />
+                  <section className="course-team-section">
+                    <div className="members-container">
+                      {isFormVisible && (
+                        <AddUserForm
+                          onSubmit={handleAddUserSubmit}
+                          onCancel={hideForm}
+                        />
+                      )}
+                      {courseTeamUsers.length ? courseTeamUsers.map(({ username, role, email }) => (
+                        <CourseTeamMember
+                          key={email}
+                          userName={username}
+                          role={role}
+                          email={email}
+                          currentUserEmail={currentUserEmail || ''}
+                          isAllowActions={isAllowActions}
+                          isHideActions={role === USER_ROLES.admin && isSingleAdmin}
+                          onChangeRole={handleChangeRoleUserSubmit}
+                          onDelete={handleOpenDeleteModal}
+                        />
+                      )) : null}
+                      {isShowAddTeamMember && (
+                        <AddTeamMember
+                          onFormOpen={openForm}
+                          isButtonDisable={isFormVisible}
+                        />
+                      )}
+                    </div>
+                    {isShowInitialSidebar && (
+                      <div className="sidebar-container">
+                        <CourseTeamSideBar
+                          courseId={courseId}
+                          isOwnershipHint={isOwnershipHint}
+                          isShowInitialSidebar={isShowInitialSidebar}
+                        />
+                      </div>
+                    )}
+                    <InfoModal
+                      isOpen={isInfoModalOpen}
+                      close={closeInfoModal}
+                      currentEmail={currentEmail}
+                      errorMessage={errorMessage}
+                      courseName={courseName}
+                      modalType={modalType}
+                      onDeleteSubmit={handleDeleteUserSubmit}
+                    />
+                  </section>
+                </div>
+              </article>
+            </Layout.Element>
+            <Layout.Element>
+              {isShowUserFilledSidebar && (
+                <CourseTeamSideBar
+                  courseId={courseId}
+                  isOwnershipHint={isOwnershipHint}
+                />
+              )}
+            </Layout.Element>
+          </Layout>
+        </section>
+      </Container>
+      <div className="alert-toast">
+        <InternetConnectionAlert
+          isFailed={isInternetConnectionAlertFailed}
+          isQueryPending={isQueryPending}
+          onInternetConnectionFailed={handleInternetConnectionFailed}
+        />
+      </div>
+    </>
+  );
+};
+
+CourseTeam.propTypes = {
+  courseId: PropTypes.string.isRequired,
+};
+
+export default injectIntl(CourseTeam);
diff --git a/src/course-team/CourseTeam.scss b/src/course-team/CourseTeam.scss
new file mode 100644
index 0000000000..02598367bf
--- /dev/null
+++ b/src/course-team/CourseTeam.scss
@@ -0,0 +1,29 @@
+@import "./course-team-sidebar/CourseTeamSidebar";
+@import "./add-user-form/AddUserForm";
+@import "./add-team-member/AddTeamMember";
+@import "./course-team-member/CourseTeamMember";
+
+.course-team {
+  .help-sidebar {
+    margin-top: 6.563rem;
+  }
+
+  .course-team-section {
+    .sidebar-container {
+      width: 30%;
+
+      .help-sidebar {
+        margin-top: 0;
+
+        hr {
+          display: none;
+        }
+      }
+    }
+
+    .members-container {
+      flex-grow: 1;
+      padding-top: 1.25rem;
+    }
+  }
+}
diff --git a/src/course-team/CourseTeam.test.jsx b/src/course-team/CourseTeam.test.jsx
new file mode 100644
index 0000000000..046e8ef95f
--- /dev/null
+++ b/src/course-team/CourseTeam.test.jsx
@@ -0,0 +1,249 @@
+import {
+  render,
+  fireEvent,
+  cleanup,
+  waitFor,
+} from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { AppProvider } from '@edx/frontend-platform/react';
+import { initializeMockApp } from '@edx/frontend-platform';
+import MockAdapter from 'axios-mock-adapter';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+
+import initializeStore from '../store';
+import { courseTeamMock, courseTeamWithOneUser, courseTeamWithoutUsers } from './__mocks__';
+import { getCourseTeamApiUrl, updateCourseTeamUserApiUrl } from './data/api';
+import CourseTeam from './CourseTeam';
+import messages from './messages';
+import { USER_ROLES } from '../constants';
+import { executeThunk } from '../utils';
+import { RequestStatus } from '../data/constants';
+import { changeRoleTeamUserQuery, deleteCourseTeamQuery } from './data/thunk';
+
+let axiosMock;
+let store;
+const mockPathname = '/foo-bar';
+const courseId = '123';
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useLocation: () => ({
+    pathname: mockPathname,
+  }),
+}));
+
+const RootWrapper = () => (
+  <AppProvider store={store}>
+    <IntlProvider locale="en">
+      <CourseTeam courseId={courseId} />
+    </IntlProvider>
+  </AppProvider>
+);
+
+describe('<CourseTeam />', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+
+    store = initializeStore();
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+  });
+
+  it('render CourseTeam component with 3 team members correctly', async () => {
+    axiosMock
+      .onGet(getCourseTeamApiUrl(courseId))
+      .reply(200, courseTeamMock);
+
+    const {
+      getByText, getByRole, getByTestId, queryAllByTestId,
+    } = render(<RootWrapper />);
+
+    await waitFor(() => {
+      expect(getByText(messages.headingTitle.defaultMessage)).toBeInTheDocument();
+      expect(getByText(messages.headingSubtitle.defaultMessage)).toBeInTheDocument();
+      expect(getByRole('button', { name: messages.addNewMemberButton.defaultMessage })).toBeInTheDocument();
+      expect(getByTestId('course-team-sidebar')).toBeInTheDocument();
+      expect(queryAllByTestId('course-team-member')).toHaveLength(3);
+    });
+  });
+
+  it('render CourseTeam component with 1 team member correctly', async () => {
+    cleanup();
+    axiosMock
+      .onGet(getCourseTeamApiUrl(courseId))
+      .reply(200, courseTeamWithOneUser);
+
+    const {
+      getByText, getByRole, getByTestId, getAllByTestId,
+    } = render(<RootWrapper />);
+
+    await waitFor(() => {
+      expect(getByText(messages.headingTitle.defaultMessage)).toBeInTheDocument();
+      expect(getByText(messages.headingSubtitle.defaultMessage)).toBeInTheDocument();
+      expect(getByRole('button', { name: messages.addNewMemberButton.defaultMessage })).toBeInTheDocument();
+      expect(getByTestId('course-team-sidebar')).toBeInTheDocument();
+      expect(getAllByTestId('course-team-member')).toHaveLength(1);
+    });
+  });
+
+  it('render CourseTeam component without team member correctly', async () => {
+    cleanup();
+    axiosMock
+      .onGet(getCourseTeamApiUrl(courseId))
+      .reply(200, courseTeamWithoutUsers);
+
+    const {
+      getByText, getByRole, getByTestId, queryAllByTestId,
+    } = render(<RootWrapper />);
+
+    await waitFor(() => {
+      expect(getByText(messages.headingTitle.defaultMessage)).toBeInTheDocument();
+      expect(getByText(messages.headingSubtitle.defaultMessage)).toBeInTheDocument();
+      expect(getByRole('button', { name: messages.addNewMemberButton.defaultMessage })).toBeInTheDocument();
+      expect(getByTestId('course-team-sidebar__initial')).toBeInTheDocument();
+      expect(queryAllByTestId('course-team-member')).toHaveLength(0);
+    });
+  });
+
+  it('render CourseTeam component with initial sidebar correctly', async () => {
+    cleanup();
+    axiosMock
+      .onGet(getCourseTeamApiUrl(courseId))
+      .reply(200, courseTeamWithoutUsers);
+
+    const { getByTestId, queryByTestId } = render(<RootWrapper />);
+
+    await waitFor(() => {
+      expect(getByTestId('course-team-sidebar__initial')).toBeInTheDocument();
+      expect(queryByTestId('course-team-sidebar')).not.toBeInTheDocument();
+    });
+  });
+
+  it('render CourseTeam component without initial sidebar correctly', async () => {
+    cleanup();
+    axiosMock
+      .onGet(getCourseTeamApiUrl(courseId))
+      .reply(200, courseTeamMock);
+
+    const { getByTestId, queryByTestId } = render(<RootWrapper />);
+
+    await waitFor(() => {
+      expect(queryByTestId('course-team-sidebar__initial')).not.toBeInTheDocument();
+      expect(getByTestId('course-team-sidebar')).toBeInTheDocument();
+    });
+  });
+
+  it('displays AddUserForm when clicking the "Add New Member" button', async () => {
+    cleanup();
+    axiosMock
+      .onGet(getCourseTeamApiUrl(courseId))
+      .reply(200, courseTeamWithOneUser);
+
+    const { getByRole, queryByTestId } = render(<RootWrapper />);
+
+    await waitFor(() => {
+      expect(queryByTestId('add-user-form')).not.toBeInTheDocument();
+      const addButton = getByRole('button', { name: messages.addNewMemberButton.defaultMessage });
+      fireEvent.click(addButton);
+      expect(queryByTestId('add-user-form')).toBeInTheDocument();
+    });
+  });
+
+  it('displays AddUserForm when clicking the "Add a New Team member" button', async () => {
+    cleanup();
+    axiosMock
+      .onGet(getCourseTeamApiUrl(courseId))
+      .reply(200, courseTeamWithOneUser);
+
+    const { getByRole, queryByTestId } = render(<RootWrapper />);
+
+    await waitFor(() => {
+      expect(queryByTestId('add-user-form')).not.toBeInTheDocument();
+      const addButton = getByRole('button', { name: 'Add a new team member' });
+      fireEvent.click(addButton);
+      expect(queryByTestId('add-user-form')).toBeInTheDocument();
+    });
+  });
+
+  it('not displays "Add New Member" and AddTeamMember component when isAllowActions is false', async () => {
+    cleanup();
+    axiosMock
+      .onGet(getCourseTeamApiUrl(courseId))
+      .reply(200, {
+        ...courseTeamWithOneUser,
+        allowActions: false,
+      });
+
+    const { queryByRole, queryByTestId } = render(<RootWrapper />);
+
+    await waitFor(() => {
+      expect(queryByRole('button', { name: messages.addNewMemberButton.defaultMessage })).not.toBeInTheDocument();
+      expect(queryByTestId('add-team-member')).not.toBeInTheDocument();
+    });
+  });
+
+  it('should delete user', async () => {
+    cleanup();
+    axiosMock
+      .onGet(getCourseTeamApiUrl(courseId))
+      .reply(200, courseTeamMock);
+
+    const { queryByText } = render(<RootWrapper />);
+
+    axiosMock
+      .onDelete(updateCourseTeamUserApiUrl(courseId, 'staff@example.com'))
+      .reply(200);
+
+    await executeThunk(deleteCourseTeamQuery(courseId, 'staff@example.com'), store.dispatch);
+    expect(queryByText('staff@example.com')).not.toBeInTheDocument();
+  });
+
+  it('should change role user', async () => {
+    cleanup();
+    axiosMock
+      .onGet(getCourseTeamApiUrl(courseId))
+      .reply(200, courseTeamMock);
+
+    const { getAllByText } = render(<RootWrapper />);
+
+    axiosMock
+      .onPut(updateCourseTeamUserApiUrl(courseId, 'staff@example.com', { role: USER_ROLES.admin }))
+      .reply(200, { role: USER_ROLES.admin });
+
+    await executeThunk(changeRoleTeamUserQuery(courseId, 'staff@example.com', { role: USER_ROLES.admin }), store.dispatch);
+    expect(getAllByText('Admin')).toHaveLength(1);
+  });
+
+  it('displays an alert and sets status to DENIED when API responds with 403', async () => {
+    axiosMock
+      .onGet(getCourseTeamApiUrl(courseId))
+      .reply(403);
+
+    const { getByRole } = render(<RootWrapper />);
+
+    await waitFor(() => {
+      expect(getByRole('alert')).toBeInTheDocument();
+      const { loadingCourseTeamStatus } = store.getState().courseTeam;
+      expect(loadingCourseTeamStatus).toEqual(RequestStatus.DENIED);
+    });
+  });
+
+  it('sets loading status to FAILED upon receiving a 404 response from the API', async () => {
+    axiosMock
+      .onGet(getCourseTeamApiUrl(courseId))
+      .reply(404);
+
+    render(<RootWrapper />);
+
+    await waitFor(() => {
+      const { loadingCourseTeamStatus } = store.getState().courseTeam;
+      expect(loadingCourseTeamStatus).toEqual(RequestStatus.FAILED);
+    });
+  });
+});
diff --git a/src/course-team/__mocks__/courseTeam.js b/src/course-team/__mocks__/courseTeam.js
new file mode 100644
index 0000000000..3a7d479a2d
--- /dev/null
+++ b/src/course-team/__mocks__/courseTeam.js
@@ -0,0 +1,24 @@
+module.exports = {
+  showTransferOwnershipHint: true,
+  users: [
+    {
+      email: 'staff@example.com',
+      id: '2',
+      role: 'staff',
+      username: 'Staff_Name',
+    },
+    {
+      email: 'audit@example.com',
+      id: '3',
+      role: 'staff',
+      username: 'Audit_Name',
+    },
+    {
+      email: 'vladislav.keblysh@raccoongang.com',
+      id: '1',
+      role: 'instructor',
+      username: 'Vladislav_Keblysh',
+    },
+  ],
+  allowActions: true,
+};
diff --git a/src/course-team/__mocks__/courseTeamWithOneUser.js b/src/course-team/__mocks__/courseTeamWithOneUser.js
new file mode 100644
index 0000000000..136e1f7317
--- /dev/null
+++ b/src/course-team/__mocks__/courseTeamWithOneUser.js
@@ -0,0 +1,12 @@
+module.exports = {
+  showTransferOwnershipHint: true,
+  users: [
+    {
+      email: 'staff@example.com',
+      id: '2',
+      role: 'staff',
+      username: 'Staff_Name',
+    },
+  ],
+  allowActions: true,
+};
diff --git a/src/course-team/__mocks__/courseTeamWithoutUsers.js b/src/course-team/__mocks__/courseTeamWithoutUsers.js
new file mode 100644
index 0000000000..357caf9565
--- /dev/null
+++ b/src/course-team/__mocks__/courseTeamWithoutUsers.js
@@ -0,0 +1,5 @@
+module.exports = {
+  showTransferOwnershipHint: true,
+  users: [],
+  allowActions: true,
+};
diff --git a/src/course-team/__mocks__/index.js b/src/course-team/__mocks__/index.js
new file mode 100644
index 0000000000..787cfc14de
--- /dev/null
+++ b/src/course-team/__mocks__/index.js
@@ -0,0 +1,3 @@
+export { default as courseTeamMock } from './courseTeam';
+export { default as courseTeamWithOneUser } from './courseTeamWithOneUser';
+export { default as courseTeamWithoutUsers } from './courseTeamWithoutUsers';
diff --git a/src/course-team/add-team-member/AddTeamMember.jsx b/src/course-team/add-team-member/AddTeamMember.jsx
new file mode 100644
index 0000000000..46a68c7122
--- /dev/null
+++ b/src/course-team/add-team-member/AddTeamMember.jsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Add as IconAdd } from '@openedx/paragon/icons';
+import { Button } from '@openedx/paragon';
+
+import messages from './messages';
+
+const AddTeamMember = ({ onFormOpen, isButtonDisable }) => {
+  const intl = useIntl();
+
+  return (
+    <div className="add-team-member bg-gray-100" data-testid="add-team-member">
+      <div className="add-team-member-info">
+        <h3 className="add-team-member-title font-weight-bold">{intl.formatMessage(messages.title)}</h3>
+        <span className="text-gray-500 small">{intl.formatMessage(messages.description)}</span>
+      </div>
+      <Button
+        variant="primary"
+        iconBefore={IconAdd}
+        onClick={onFormOpen}
+        disabled={isButtonDisable}
+      >
+        {intl.formatMessage(messages.button)}
+      </Button>
+    </div>
+  );
+};
+
+AddTeamMember.propTypes = {
+  onFormOpen: PropTypes.func.isRequired,
+  isButtonDisable: PropTypes.bool,
+};
+
+AddTeamMember.defaultProps = {
+  isButtonDisable: false,
+};
+
+export default AddTeamMember;
diff --git a/src/course-team/add-team-member/AddTeamMember.scss b/src/course-team/add-team-member/AddTeamMember.scss
new file mode 100644
index 0000000000..6859a2dced
--- /dev/null
+++ b/src/course-team/add-team-member/AddTeamMember.scss
@@ -0,0 +1,17 @@
+.add-team-member {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border: .0625rem solid $gray-200;
+  border-radius: .375rem;
+  box-shadow: inset inset 0 1px .125rem 1px $gray-200;
+  padding: 1.25rem 1.875rem;
+
+  .add-team-member-info {
+    width: 60%;
+  }
+
+  .add-team-member-title {
+    font-size: $spacer;
+  }
+}
diff --git a/src/course-team/add-team-member/AddTeamMember.test.jsx b/src/course-team/add-team-member/AddTeamMember.test.jsx
new file mode 100644
index 0000000000..bb20a93ebf
--- /dev/null
+++ b/src/course-team/add-team-member/AddTeamMember.test.jsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import AddTeamMember from './AddTeamMember';
+import messages from './messages';
+
+const onFormOpenMock = jest.fn();
+
+const renderComponent = (props) => render(
+  <IntlProvider locale="en">
+    <AddTeamMember onFormOpen={onFormOpenMock} {...props} />
+  </IntlProvider>,
+);
+
+describe('<AddTeamMember />', () => {
+  it('render AddTeamMember component correctly', () => {
+    const { getByText, getByRole } = renderComponent();
+
+    expect(getByText(messages.title.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.description.defaultMessage)).toBeInTheDocument();
+    expect(getByRole('button', { name: messages.button.defaultMessage })).toBeInTheDocument();
+  });
+
+  it('calls onFormOpen when the button is clicked', () => {
+    const { getByText } = renderComponent();
+
+    const addButton = getByText(messages.button.defaultMessage);
+    fireEvent.click(addButton);
+    expect(onFormOpenMock).toHaveBeenCalledTimes(1);
+  });
+
+  it('"Add a New Team member" button is disabled when isButtonDisable is true', () => {
+    const { getByRole } = renderComponent({ isButtonDisable: true });
+
+    const addButton = getByRole('button', { name: messages.button.defaultMessage });
+    expect(addButton).toBeDisabled();
+  });
+
+  it('"Add a New Team member" button is not disabled when isButtonDisable is false', () => {
+    const { getByRole } = renderComponent();
+
+    const addButton = getByRole('button', { name: messages.button.defaultMessage });
+    expect(addButton).not.toBeDisabled();
+  });
+});
diff --git a/src/course-team/add-team-member/messages.js b/src/course-team/add-team-member/messages.js
new file mode 100644
index 0000000000..3def097045
--- /dev/null
+++ b/src/course-team/add-team-member/messages.js
@@ -0,0 +1,18 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  title: {
+    id: 'course-authoring.course-team.add-team-member.title',
+    defaultMessage: 'Add team members to this course',
+  },
+  description: {
+    id: 'course-authoring.course-team.add-team-member.description',
+    defaultMessage: 'Adding team members makes course authoring collaborative. Users must be signed up for Studio and have an active account.',
+  },
+  button: {
+    id: 'course-authoring.course-team.add-team-member.button',
+    defaultMessage: 'Add a new team member',
+  },
+});
+
+export default messages;
diff --git a/src/course-team/add-user-form/AddUserForm.jsx b/src/course-team/add-user-form/AddUserForm.jsx
new file mode 100644
index 0000000000..1091c71843
--- /dev/null
+++ b/src/course-team/add-user-form/AddUserForm.jsx
@@ -0,0 +1,66 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import {
+  Button,
+  Form,
+  ActionRow,
+} from '@openedx/paragon';
+import { Formik } from 'formik';
+
+import messages from './messages';
+import FormikControl from '../../generic/FormikControl';
+import { EXAMPLE_USER_EMAIL } from '../constants';
+
+const AddUserForm = ({ onSubmit, onCancel }) => {
+  const intl = useIntl();
+
+  return (
+    <div className="add-user-form" data-testid="add-user-form">
+      <Formik
+        initialValues={{ email: '' }}
+        onSubmit={onSubmit}
+        validateOnBlur
+      >
+        {({ handleSubmit, values }) => (
+          <>
+            <Form.Group size="sm" className="form-field">
+              <h3 className="form-title">{intl.formatMessage(messages.formTitle)}</h3>
+              <Form.Label size="sm" className="form-label font-weight-bold">
+                {intl.formatMessage(messages.formLabel)}
+              </Form.Label>
+              <FormikControl
+                name="email"
+                value={values.email}
+                placeholder={intl.formatMessage(messages.formPlaceholder, { email: EXAMPLE_USER_EMAIL })}
+              />
+              <Form.Control.Feedback className="form-helper-text">
+                {intl.formatMessage(messages.formHelperText)}
+              </Form.Control.Feedback>
+            </Form.Group>
+            <ActionRow>
+              <Button variant="tertiary" size="sm" onClick={onCancel}>
+                {intl.formatMessage(messages.cancelButton)}
+              </Button>
+              <Button
+                size="sm"
+                onClick={handleSubmit}
+                disabled={!values.email.length}
+                type="submit"
+              >
+                {intl.formatMessage(messages.addUserButton)}
+              </Button>
+            </ActionRow>
+          </>
+        )}
+      </Formik>
+    </div>
+  );
+};
+
+AddUserForm.propTypes = {
+  onSubmit: PropTypes.func.isRequired,
+  onCancel: PropTypes.func.isRequired,
+};
+
+export default AddUserForm;
diff --git a/src/course-team/add-user-form/AddUserForm.scss b/src/course-team/add-user-form/AddUserForm.scss
new file mode 100644
index 0000000000..0286372cae
--- /dev/null
+++ b/src/course-team/add-user-form/AddUserForm.scss
@@ -0,0 +1,42 @@
+.add-user-form {
+  display: flex;
+  flex-direction: column;
+  border: .0625rem solid $gray-200;
+  border-radius: .375rem;
+  box-shadow: 0 1px 1px $gray-200;
+  margin-bottom: 1.25rem;
+  background-color: $white;
+
+  .form-title {
+    font-size: 1.5rem;
+    margin-bottom: 1.875rem;
+  }
+
+  .form-field {
+    padding: 1.25rem 1.875rem;
+    margin-bottom: $spacer;
+
+    .pgn__form-group {
+      margin-bottom: 0;
+    }
+  }
+
+  .form-label {
+    position: relative;
+
+    &::after {
+      margin-left: .3125rem;
+      content: "*";
+    }
+  }
+
+  .form-helper-text {
+    font-size: $font-size-xs;
+  }
+
+  .pgn__action-row {
+    padding: $spacer 1.875rem;
+    border-top: .0625rem solid $gray-200;
+    justify-content: flex-start;
+  }
+}
diff --git a/src/course-team/add-user-form/AddUserForm.test.jsx b/src/course-team/add-user-form/AddUserForm.test.jsx
new file mode 100644
index 0000000000..d3716b14c1
--- /dev/null
+++ b/src/course-team/add-user-form/AddUserForm.test.jsx
@@ -0,0 +1,128 @@
+import React from 'react';
+import {
+  render,
+  fireEvent,
+  act,
+  waitFor,
+} from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { AppProvider } from '@edx/frontend-platform/react';
+import { initializeMockApp } from '@edx/frontend-platform';
+import MockAdapter from 'axios-mock-adapter';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+
+import { EXAMPLE_USER_EMAIL } from '../constants';
+import initializeStore from '../../store';
+import { USER_ROLES } from '../../constants';
+import { updateCourseTeamUserApiUrl } from '../data/api';
+import { createCourseTeamQuery } from '../data/thunk';
+import { executeThunk } from '../../utils';
+import AddUserForm from './AddUserForm';
+import messages from './messages';
+
+let axiosMock;
+let store;
+const mockPathname = '/foo-bar';
+const courseId = '123';
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useLocation: () => ({
+    pathname: mockPathname,
+  }),
+}));
+
+const onSubmitMock = jest.fn();
+const onCancelMock = jest.fn();
+
+const RootWrapper = () => (
+  <AppProvider store={store}>
+    <IntlProvider locale="en">
+      <AddUserForm
+        onSubmit={onSubmitMock}
+        onCancel={onCancelMock}
+      />
+    </IntlProvider>
+  </AppProvider>
+);
+
+describe('<AddUserForm />', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+
+    store = initializeStore();
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+  });
+
+  it('render AddUserForm component correctly', () => {
+    const { getByText, getByPlaceholderText } = render(<RootWrapper />);
+
+    expect(getByText(messages.formTitle.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.formLabel.defaultMessage)).toBeInTheDocument();
+    expect(getByPlaceholderText(messages.formPlaceholder.defaultMessage
+      .replace('{email}', EXAMPLE_USER_EMAIL))).toBeInTheDocument();
+    expect(getByText(messages.cancelButton.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.addUserButton.defaultMessage)).toBeInTheDocument();
+  });
+
+  it('calls onSubmit when the "Add User" button is clicked with a valid email', async () => {
+    const { getByPlaceholderText, getByRole } = render(<RootWrapper />);
+
+    const emailInput = getByPlaceholderText(messages.formPlaceholder.defaultMessage.replace('{email}', EXAMPLE_USER_EMAIL));
+    const addUserButton = getByRole('button', { name: messages.addUserButton.defaultMessage });
+
+    fireEvent.change(emailInput, { target: { value: EXAMPLE_USER_EMAIL } });
+
+    await act(async () => {
+      fireEvent.click(addUserButton);
+    });
+
+    await waitFor(() => {
+      expect(onSubmitMock).toHaveBeenCalledTimes(1);
+      expect(onSubmitMock).toHaveBeenCalledWith(
+        { email: EXAMPLE_USER_EMAIL },
+        expect.objectContaining({ submitForm: expect.any(Function) }),
+      );
+    });
+
+    axiosMock
+      .onPost(updateCourseTeamUserApiUrl(courseId, EXAMPLE_USER_EMAIL), { role: USER_ROLES.staff })
+      .reply(200, { role: USER_ROLES.staff });
+
+    await executeThunk(createCourseTeamQuery(courseId, EXAMPLE_USER_EMAIL), store.dispatch);
+  });
+
+  it('calls onCancel when the "Cancel" button is clicked', () => {
+    const { getByText } = render(<RootWrapper />);
+
+    const cancelButton = getByText(messages.cancelButton.defaultMessage);
+    fireEvent.click(cancelButton);
+    expect(onCancelMock).toHaveBeenCalledTimes(1);
+  });
+
+  it('"Add User" button is disabled when the email input field is empty', () => {
+    const { getByText } = render(<RootWrapper />);
+
+    const addUserButton = getByText(messages.addUserButton.defaultMessage);
+    expect(addUserButton).toBeDisabled();
+  });
+
+  it('"Add User" button is not disabled when the email input field is not empty', () => {
+    const { getByPlaceholderText, getByText } = render(<RootWrapper />);
+
+    const emailInput = getByPlaceholderText(
+      messages.formPlaceholder.defaultMessage.replace('{email}', EXAMPLE_USER_EMAIL),
+    );
+    const addUserButton = getByText(messages.addUserButton.defaultMessage);
+
+    fireEvent.change(emailInput, { target: { value: 'user@example.com' } });
+    expect(addUserButton).not.toBeDisabled();
+  });
+});
diff --git a/src/course-team/add-user-form/messages.js b/src/course-team/add-user-form/messages.js
new file mode 100644
index 0000000000..c61543b170
--- /dev/null
+++ b/src/course-team/add-user-form/messages.js
@@ -0,0 +1,31 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  formTitle: {
+    id: 'course-authoring.course-team.form.title',
+    defaultMessage: 'Add a user to your course\'s team',
+  },
+  formLabel: {
+    id: 'course-authoring.course-team.form.label',
+    defaultMessage: 'User\'s email address',
+  },
+  formPlaceholder: {
+    id: 'course-authoring.course-team.form.placeholder',
+    defaultMessage: 'example: {email}',
+  },
+  formHelperText: {
+    id: 'course-authoring.course-team.form.helperText',
+    defaultMessage: 'Provide the email address of the user you want to add as Staff',
+  },
+  addUserButton: {
+    id: 'course-authoring.course-team.form.button.addUser',
+    defaultMessage: 'Add user',
+  },
+  cancelButton: {
+    id: 'course-authoring.course-team.form.button.cancel',
+    defaultMessage: 'Cancel',
+  },
+
+});
+
+export default messages;
diff --git a/src/course-team/constants.js b/src/course-team/constants.js
new file mode 100644
index 0000000000..f7d6a11d2a
--- /dev/null
+++ b/src/course-team/constants.js
@@ -0,0 +1,17 @@
+export const MODAL_TYPES = {
+  error: 'error',
+  delete: 'delete',
+  warning: 'warning',
+};
+
+export const BADGE_STATES = {
+  admin: 'primary-700',
+  staff: 'gray-500',
+};
+
+export const USER_ROLES = {
+  admin: 'instructor',
+  staff: 'staff',
+};
+
+export const EXAMPLE_USER_EMAIL = 'username@domain.com';
diff --git a/src/course-team/course-team-member/CourseTeamMember.jsx b/src/course-team/course-team-member/CourseTeamMember.jsx
new file mode 100644
index 0000000000..98b3bc35c3
--- /dev/null
+++ b/src/course-team/course-team-member/CourseTeamMember.jsx
@@ -0,0 +1,85 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import {
+  Badge,
+  Button,
+  Icon,
+  IconButtonWithTooltip,
+  MailtoLink,
+} from '@openedx/paragon';
+import { DeleteOutline } from '@openedx/paragon/icons';
+
+import messages from './messages';
+import { USER_ROLES, BADGE_STATES } from '../constants';
+
+const CourseTeamMember = ({
+  userName,
+  role,
+  email,
+  onChangeRole,
+  onDelete,
+  currentUserEmail,
+  isHideActions,
+  isAllowActions,
+}) => {
+  const intl = useIntl();
+  const isAdminRole = role === USER_ROLES.admin;
+  const badgeColor = isAdminRole ? BADGE_STATES.admin : BADGE_STATES.staff;
+
+  return (
+    <div className="course-team-member" data-testid="course-team-member">
+      <div className="member-info">
+        <Badge className={`badge-current-user bg-${badgeColor} text-light-100`}>
+          {isAdminRole
+            ? intl.formatMessage(messages.roleAdmin)
+            : intl.formatMessage(messages.roleStaff)}
+          {currentUserEmail === email && (
+            <span className="badge-current-user x-small text-light-500">{intl.formatMessage(messages.roleYou)}</span>
+          )}
+        </Badge>
+        <span className="member-info-name font-weight-bold">{userName}</span>
+        <MailtoLink to={email}>{email}</MailtoLink>
+      </div>
+      {/* eslint-disable-next-line no-nested-ternary */}
+      {isAllowActions && (
+        !isHideActions ? (
+          <div className="member-actions">
+            <Button
+              variant={isAdminRole ? 'tertiary' : 'primary'}
+              size="sm"
+              onClick={() => onChangeRole(email, isAdminRole ? USER_ROLES.staff : USER_ROLES.admin)}
+            >
+              {isAdminRole ? intl.formatMessage(messages.removeButton) : intl.formatMessage(messages.addButton)}
+            </Button>
+            <IconButtonWithTooltip
+              src={DeleteOutline}
+              tooltipContent={intl.formatMessage(messages.deleteUserButton)}
+              onClick={() => onDelete(email)}
+              iconAs={Icon}
+              alt={intl.formatMessage(messages.deleteUserButton)}
+              data-testid="delete-button"
+            />
+          </div>
+        ) : (
+          <div className="member-hint text-right">
+            <span>{intl.formatMessage(messages.hint)}</span>
+          </div>
+        )
+      )}
+    </div>
+  );
+};
+
+CourseTeamMember.propTypes = {
+  userName: PropTypes.string.isRequired,
+  role: PropTypes.string.isRequired,
+  email: PropTypes.string.isRequired,
+  onChangeRole: PropTypes.func.isRequired,
+  onDelete: PropTypes.func.isRequired,
+  currentUserEmail: PropTypes.string.isRequired,
+  isHideActions: PropTypes.bool.isRequired,
+  isAllowActions: PropTypes.bool.isRequired,
+};
+
+export default CourseTeamMember;
diff --git a/src/course-team/course-team-member/CourseTeamMember.scss b/src/course-team/course-team-member/CourseTeamMember.scss
new file mode 100644
index 0000000000..61969a3cfb
--- /dev/null
+++ b/src/course-team/course-team-member/CourseTeamMember.scss
@@ -0,0 +1,52 @@
+.course-team-container {
+  margin-top: 3rem;
+}
+
+.course-team-member {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
+  padding: 1.563rem 1.875rem 1.25rem;
+  background-color: $white;
+  border: .0625rem solid $gray-200;
+  border-radius: .375rem;
+  box-shadow: 0 1px 1px $gray-200;
+
+  &:not(:last-child) {
+    margin-bottom: 1.25rem;
+  }
+
+  .member-info {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+
+    .badge {
+      position: absolute;
+      top: -2.25rem;
+      left: -.25rem;
+    }
+
+    .badge-current-user {
+      margin-left: .25rem;
+    }
+
+    .member-info-name {
+      font-size: 1.5rem;
+      margin-bottom: .25rem;
+    }
+  }
+
+  .member-hint {
+    width: 45%;
+    margin-right: 3.875rem;
+    color: $gray-300;
+    font-size: $font-size-sm;
+  }
+
+  .member-actions {
+    display: flex;
+    gap: $spacer;
+  }
+}
diff --git a/src/course-team/course-team-member/CourseTeamMember.test.jsx b/src/course-team/course-team-member/CourseTeamMember.test.jsx
new file mode 100644
index 0000000000..be6719ac6a
--- /dev/null
+++ b/src/course-team/course-team-member/CourseTeamMember.test.jsx
@@ -0,0 +1,91 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import { USER_ROLES } from '../../constants';
+import CourseTeamMember from './CourseTeamMember';
+import messages from './messages';
+
+const userNameMock = 'User';
+const emailMock = 'user@example.com';
+const currentUserEmailMock = 'user@example.com';
+const onChangeRoleMock = jest.fn();
+const onDeleteMock = jest.fn();
+
+const renderComponent = (props) => render(
+  <IntlProvider locale="en">
+    <CourseTeamMember
+      userName={userNameMock}
+      email={emailMock}
+      currentUserEmail="some@example.com"
+      onChangeRole={onChangeRoleMock}
+      onDelete={onDeleteMock}
+      isAllowActions
+      isHideActions={false}
+      role={USER_ROLES.admin}
+      {...props}
+    />
+  </IntlProvider>,
+);
+
+describe('<CourseTeamMember />', () => {
+  it('render CourseTeamMember component correctly', () => {
+    const { getByText, getByRole, getByTestId } = renderComponent();
+
+    expect(getByText(userNameMock)).toBeInTheDocument();
+    expect(getByText(emailMock)).toBeInTheDocument();
+    expect(getByRole('button', { name: messages.removeButton.defaultMessage })).toBeInTheDocument();
+    expect(getByTestId('delete-button')).toBeInTheDocument();
+    expect(getByText(messages.roleAdmin.defaultMessage)).toBeInTheDocument();
+  });
+
+  it('displays correct badge and "You" label for the current user', () => {
+    const { getByText } = renderComponent({
+      role: USER_ROLES.staff,
+      currentUserEmail: currentUserEmailMock,
+    });
+
+    expect(getByText(messages.roleStaff.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.roleYou.defaultMessage)).toBeInTheDocument();
+  });
+
+  it('not displays actions when isAllowActions is false', () => {
+    const { queryByRole, queryByTestId } = renderComponent({
+      role: USER_ROLES.admin,
+      currentUserEmail: currentUserEmailMock,
+      isAllowActions: false,
+    });
+
+    expect(queryByRole('button', { name: messages.removeButton.defaultMessage })).not.toBeInTheDocument();
+    expect(queryByTestId('delete-button')).not.toBeInTheDocument();
+  });
+
+  it('calls onChangeRole when the "Add"/"Remove" button is clicked', () => {
+    const { getByRole } = renderComponent({
+      role: USER_ROLES.staff,
+    });
+
+    const addButton = getByRole('button', { name: messages.addButton.defaultMessage });
+    fireEvent.click(addButton);
+    expect(onChangeRoleMock).toHaveBeenCalledTimes(1);
+    expect(onChangeRoleMock).toHaveBeenCalledWith(emailMock, USER_ROLES.admin);
+  });
+
+  it('calls onDelete when the "Delete" button is clicked', () => {
+    const { getByTestId } = renderComponent();
+
+    const deleteButton = getByTestId('delete-button');
+    fireEvent.click(deleteButton);
+    expect(onDeleteMock).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders the "Hint" when isHideActions is true', () => {
+    const { getByText, queryByRole, queryByTestId } = renderComponent({
+      isHideActions: true,
+    });
+
+    expect(queryByRole('button', { name: messages.addButton.defaultMessage })).not.toBeInTheDocument();
+    expect(queryByTestId('delete-button')).not.toBeInTheDocument();
+    expect(getByText(messages.hint.defaultMessage)).toBeInTheDocument();
+  });
+});
diff --git a/src/course-team/course-team-member/messages.js b/src/course-team/course-team-member/messages.js
new file mode 100644
index 0000000000..548b733b13
--- /dev/null
+++ b/src/course-team/course-team-member/messages.js
@@ -0,0 +1,34 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  roleAdmin: {
+    id: 'course-authoring.course-team.member.role.admin',
+    defaultMessage: 'Admin',
+  },
+  roleStaff: {
+    id: 'course-authoring.course-team.member.role.staff',
+    defaultMessage: 'Staff',
+  },
+  roleYou: {
+    id: 'course-authoring.course-team.member.role.you',
+    defaultMessage: 'You!',
+  },
+  hint: {
+    id: 'course-authoring.course-team.member.hint',
+    defaultMessage: 'Promote another member to Admin to remove your admin rights',
+  },
+  addButton: {
+    id: 'course-authoring.course-team.member.button.add',
+    defaultMessage: 'Add admin access',
+  },
+  removeButton: {
+    id: 'course-authoring.course-team.member.button.remove-admin-access',
+    defaultMessage: 'Remove admin access',
+  },
+  deleteUserButton: {
+    id: 'course-authoring.course-team.member.button.delete',
+    defaultMessage: 'Delete user',
+  },
+});
+
+export default messages;
diff --git a/src/course-team/course-team-sidebar/CourseTeamSideBar.test.jsx b/src/course-team/course-team-sidebar/CourseTeamSideBar.test.jsx
new file mode 100644
index 0000000000..7218ba40b5
--- /dev/null
+++ b/src/course-team/course-team-sidebar/CourseTeamSideBar.test.jsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { initializeMockApp } from '@edx/frontend-platform';
+import { AppProvider } from '@edx/frontend-platform/react';
+
+import CourseTeamSidebar from './CourseTeamSidebar';
+import messages from './messages';
+import initializeStore from '../../store';
+
+const courseId = 'course-123';
+let store;
+
+const renderComponent = (props) => render(
+  <AppProvider store={store} messages={{}}>
+    <IntlProvider locale="en">
+      <CourseTeamSidebar courseId={courseId} {...props} />
+    </IntlProvider>
+  </AppProvider>,
+);
+
+describe('<CourseTeamSidebar />', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+    store = initializeStore();
+  });
+
+  it('render CourseTeamSidebar component correctly', () => {
+    const { getByText } = renderComponent();
+
+    expect(getByText(messages.sidebarTitle.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.sidebarAbout_1.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.sidebarAbout_2.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.sidebarAbout_3.defaultMessage)).toBeInTheDocument();
+  });
+
+  it('render CourseTeamSidebar when isOwnershipHint is true', () => {
+    const { getByText } = renderComponent({ isOwnershipHint: true });
+
+    expect(getByText(messages.ownershipTitle.defaultMessage)).toBeInTheDocument();
+    expect(getByText(
+      'Every course must have an Admin. If you are the Admin and you want to transfer ownership of the course, click to make another user the Admin, then ask that user to remove you from the Course Team list.',
+    )).toBeInTheDocument();
+  });
+});
diff --git a/src/course-team/course-team-sidebar/CourseTeamSidebar.jsx b/src/course-team/course-team-sidebar/CourseTeamSidebar.jsx
new file mode 100644
index 0000000000..2b7f42c457
--- /dev/null
+++ b/src/course-team/course-team-sidebar/CourseTeamSidebar.jsx
@@ -0,0 +1,68 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import { HelpSidebar } from '../../generic/help-sidebar';
+import messages from './messages';
+
+const CourseTeamSideBar = ({ courseId, isOwnershipHint, isShowInitialSidebar }) => {
+  const intl = useIntl();
+
+  return (
+    <div
+      className="course-team-sidebar"
+      data-testid={isShowInitialSidebar ? 'course-team-sidebar__initial' : 'course-team-sidebar'}
+    >
+      <HelpSidebar
+        intl={intl}
+        courseId={courseId}
+        showOtherSettings={false}
+      >
+        <h4 className="help-sidebar-about-title">
+          {intl.formatMessage(messages.sidebarTitle)}
+        </h4>
+        <p className="help-sidebar-about-descriptions">
+          {intl.formatMessage(messages.sidebarAbout_1)}
+        </p>
+        <p className="help-sidebar-about-descriptions">
+          {intl.formatMessage(messages.sidebarAbout_2)}
+        </p>
+        <p className="help-sidebar-about-descriptions">
+          {intl.formatMessage(messages.sidebarAbout_3)}
+        </p>
+      </HelpSidebar>
+      {isOwnershipHint && (
+        <>
+          <hr />
+          <HelpSidebar
+            intl={intl}
+            courseId={courseId}
+            showOtherSettings={false}
+          >
+            <h4 className="help-sidebar-about-title">
+              {intl.formatMessage(messages.ownershipTitle)}
+            </h4>
+            <p className="help-sidebar-about-descriptions">
+              {intl.formatMessage(
+                messages.ownershipDescription,
+                { strong: <strong>{intl.formatMessage(messages.addAdminAccess)}</strong> },
+              )}
+            </p>
+          </HelpSidebar>
+        </>
+      )}
+    </div>
+  );
+};
+
+CourseTeamSideBar.defaultProps = {
+  isShowInitialSidebar: false,
+};
+
+CourseTeamSideBar.propTypes = {
+  courseId: PropTypes.string.isRequired,
+  isOwnershipHint: PropTypes.bool.isRequired,
+  isShowInitialSidebar: PropTypes.bool,
+};
+
+export default CourseTeamSideBar;
diff --git a/src/course-team/course-team-sidebar/CourseTeamSidebar.scss b/src/course-team/course-team-sidebar/CourseTeamSidebar.scss
new file mode 100644
index 0000000000..42a8acf52a
--- /dev/null
+++ b/src/course-team/course-team-sidebar/CourseTeamSidebar.scss
@@ -0,0 +1,11 @@
+.course-team-sidebar {
+  .help-sidebar {
+    &:not(:first-child) {
+      margin-top: 0;
+    }
+
+    hr {
+      display: none;
+    }
+  }
+}
diff --git a/src/course-team/course-team-sidebar/messages.js b/src/course-team/course-team-sidebar/messages.js
new file mode 100644
index 0000000000..a1934c19b2
--- /dev/null
+++ b/src/course-team/course-team-sidebar/messages.js
@@ -0,0 +1,34 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  sidebarTitle: {
+    id: 'course-authoring.course-team.sidebar.title',
+    defaultMessage: 'Course team roles',
+  },
+  sidebarAbout_1: {
+    id: 'course-authoring.course-team.sidebar.about-1',
+    defaultMessage: 'Course team members with the Staff role are course co-authors. They have full writing and editing privileges on all course content.',
+  },
+  sidebarAbout_2: {
+    id: 'course-authoring.course-team.sidebar.about-2',
+    defaultMessage: 'Admins are course team members who can add and remove other course team members.',
+  },
+  sidebarAbout_3: {
+    id: 'course-authoring.course-team.sidebar.about-3',
+    defaultMessage: 'All course team members can access content in Studio, the LMS, and Insights, but are not automatically enrolled in the course.',
+  },
+  ownershipTitle: {
+    id: 'course-authoring.course-team.sidebar.ownership.title',
+    defaultMessage: 'Transferring ownership',
+  },
+  ownershipDescription: {
+    id: 'course-authoring.course-team.sidebar.ownership.description',
+    defaultMessage: 'Every course must have an Admin. If you are the Admin and you want to transfer ownership of the course, click {strong} to make another user the Admin, then ask that user to remove you from the Course Team list.',
+  },
+  addAdminAccess: {
+    id: 'course-authoring.course-team.sidebar.ownership.addAdminAccess',
+    defaultMessage: 'Add admin access',
+  },
+});
+
+export default messages;
diff --git a/src/course-team/data/api.js b/src/course-team/data/api.js
new file mode 100644
index 0000000000..321671600d
--- /dev/null
+++ b/src/course-team/data/api.js
@@ -0,0 +1,54 @@
+import { camelCaseObject, getConfig } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+
+import { USER_ROLES } from '../../constants';
+
+const getApiBaseUrl = () => getConfig().STUDIO_BASE_URL;
+export const getCourseTeamApiUrl = (courseId) => `${getApiBaseUrl()}/api/contentstore/v1/course_team/${courseId}`;
+export const updateCourseTeamUserApiUrl = (courseId, email) => `${getApiBaseUrl()}/course_team/${courseId}/${email}`;
+
+/**
+ * Get course team.
+ * @param {string} courseId
+ * @returns {Promise<Object>}
+ */
+export async function getCourseTeam(courseId) {
+  const { data } = await getAuthenticatedHttpClient()
+    .get(getCourseTeamApiUrl(courseId));
+
+  return camelCaseObject(data);
+}
+
+/**
+ * Create course team user.
+ * @param {string} courseId
+ * @param {string} email
+ * @returns {Promise<Object>}
+ */
+export async function createTeamUser(courseId, email) {
+  await getAuthenticatedHttpClient()
+    .post(updateCourseTeamUserApiUrl(courseId, email), { role: USER_ROLES.staff });
+}
+
+/**
+ * Change role course team user.
+ * @param {string} courseId
+ * @param {string} email
+ * @param {string} role
+ * @returns {Promise<Object>}
+ */
+export async function changeRoleTeamUser(courseId, email, role) {
+  await getAuthenticatedHttpClient()
+    .put(updateCourseTeamUserApiUrl(courseId, email), { role });
+}
+
+/**
+ * Delete course team user.
+ * @param {string} courseId
+ * @param {string} email
+ * @returns {Promise<Object>}
+ */
+export async function deleteTeamUser(courseId, email) {
+  await getAuthenticatedHttpClient()
+    .delete(updateCourseTeamUserApiUrl(courseId, email));
+}
diff --git a/src/course-team/data/selectors.js b/src/course-team/data/selectors.js
new file mode 100644
index 0000000000..99c602fdad
--- /dev/null
+++ b/src/course-team/data/selectors.js
@@ -0,0 +1,6 @@
+export const getCourseTeamUsers = (state) => state.courseTeam.users;
+export const getCourseTeamLoadingStatus = (state) => state.courseTeam.loadingCourseTeamStatus;
+export const getErrorMessage = (state) => state.courseTeam.errorMessage;
+export const getIsAllowActions = (state) => state.courseTeam.allowActions;
+export const getIsOwnershipHint = (state) => state.courseTeam.showTransferOwnershipHint;
+export const getSavingStatus = (state) => state.courseTeam.savingStatus;
diff --git a/src/course-team/data/slice.js b/src/course-team/data/slice.js
new file mode 100644
index 0000000000..374210b034
--- /dev/null
+++ b/src/course-team/data/slice.js
@@ -0,0 +1,46 @@
+/* eslint-disable no-param-reassign */
+import { createSlice } from '@reduxjs/toolkit';
+import { RequestStatus } from '../../data/constants';
+
+const slice = createSlice({
+  name: 'courseTeam',
+  initialState: {
+    loadingCourseTeamStatus: RequestStatus.IN_PROGRESS,
+    savingStatus: '',
+    users: [],
+    showTransferOwnershipHint: false,
+    allowActions: false,
+    errorMessage: '',
+  },
+  reducers: {
+    fetchCourseTeamSuccess: (state, { payload }) => {
+      state.users = payload.users;
+      state.showTransferOwnershipHint = payload.showTransferOwnershipHint;
+      state.allowActions = payload.allowActions;
+    },
+    updateLoadingCourseTeamStatus: (state, { payload }) => {
+      state.loadingCourseTeamStatus = payload.status;
+    },
+    deleteCourseTeamUser: (state, { payload }) => {
+      state.users = state.users.filter((user) => user.email !== payload);
+    },
+    updateSavingStatus: (state, { payload }) => {
+      state.savingStatus = payload.status;
+    },
+    setErrorMessage: (state, { payload }) => {
+      state.errorMessage = payload;
+    },
+  },
+});
+
+export const {
+  fetchCourseTeamSuccess,
+  updateLoadingCourseTeamStatus,
+  deleteCourseTeamUser,
+  updateSavingStatus,
+  setErrorMessage,
+} = slice.actions;
+
+export const {
+  reducer,
+} = slice;
diff --git a/src/course-team/data/thunk.js b/src/course-team/data/thunk.js
new file mode 100644
index 0000000000..bfc3db193e
--- /dev/null
+++ b/src/course-team/data/thunk.js
@@ -0,0 +1,91 @@
+import { RequestStatus } from '../../data/constants';
+import {
+  getCourseTeam,
+  deleteTeamUser,
+  createTeamUser,
+  changeRoleTeamUser,
+} from './api';
+import {
+  fetchCourseTeamSuccess,
+  updateLoadingCourseTeamStatus,
+  deleteCourseTeamUser,
+  updateSavingStatus,
+  setErrorMessage,
+} from './slice';
+
+export function fetchCourseTeamQuery(courseId) {
+  return async (dispatch) => {
+    dispatch(updateLoadingCourseTeamStatus({ status: RequestStatus.IN_PROGRESS }));
+
+    try {
+      const courseTeam = await getCourseTeam(courseId);
+      dispatch(fetchCourseTeamSuccess(courseTeam));
+
+      dispatch(updateLoadingCourseTeamStatus({ status: RequestStatus.SUCCESSFUL }));
+      return true;
+    } catch (error) {
+      if (error.response && error.response.status === 403) {
+        dispatch(updateLoadingCourseTeamStatus({ status: RequestStatus.DENIED }));
+      } else {
+        dispatch(updateLoadingCourseTeamStatus({ status: RequestStatus.FAILED }));
+      }
+      return false;
+    }
+  };
+}
+
+export function createCourseTeamQuery(courseId, email) {
+  return async (dispatch) => {
+    dispatch(updateSavingStatus({ status: RequestStatus.IN_PROGRESS }));
+
+    try {
+      await createTeamUser(courseId, email);
+      const courseTeam = await getCourseTeam(courseId);
+      dispatch(fetchCourseTeamSuccess(courseTeam));
+
+      dispatch(updateSavingStatus({ status: RequestStatus.SUCCESSFUL }));
+      return true;
+    } catch (error) {
+      const message = error?.response?.data?.error || '';
+      dispatch(setErrorMessage(message));
+
+      dispatch(updateSavingStatus({ status: RequestStatus.FAILED }));
+      return false;
+    }
+  };
+}
+
+export function changeRoleTeamUserQuery(courseId, email, role) {
+  return async (dispatch) => {
+    dispatch(updateSavingStatus({ status: RequestStatus.IN_PROGRESS }));
+
+    try {
+      await changeRoleTeamUser(courseId, email, role);
+      const courseTeam = await getCourseTeam(courseId);
+      dispatch(fetchCourseTeamSuccess(courseTeam));
+
+      dispatch(updateSavingStatus({ status: RequestStatus.SUCCESSFUL }));
+      return true;
+    } catch ({ message }) {
+      dispatch(updateSavingStatus({ status: RequestStatus.FAILED }));
+      return false;
+    }
+  };
+}
+
+export function deleteCourseTeamQuery(courseId, email) {
+  return async (dispatch) => {
+    dispatch(updateSavingStatus({ status: RequestStatus.IN_PROGRESS }));
+
+    try {
+      await deleteTeamUser(courseId, email);
+      dispatch(deleteCourseTeamUser(email));
+
+      dispatch(updateSavingStatus({ status: RequestStatus.SUCCESSFUL }));
+      return true;
+    } catch (error) {
+      dispatch(updateSavingStatus({ status: RequestStatus.FAILED }));
+      return false;
+    }
+  };
+}
diff --git a/src/course-team/hooks.jsx b/src/course-team/hooks.jsx
new file mode 100644
index 0000000000..f5b5dd5a14
--- /dev/null
+++ b/src/course-team/hooks.jsx
@@ -0,0 +1,139 @@
+import { useDispatch, useSelector } from 'react-redux';
+import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
+import { useEffect, useState } from 'react';
+import { useToggle } from '@openedx/paragon';
+
+import { USER_ROLES } from '../constants';
+import { RequestStatus } from '../data/constants';
+import { useModel } from '../generic/model-store';
+import {
+  changeRoleTeamUserQuery,
+  createCourseTeamQuery,
+  deleteCourseTeamQuery,
+  fetchCourseTeamQuery,
+} from './data/thunk';
+import {
+  getCourseTeamLoadingStatus,
+  getCourseTeamUsers,
+  getErrorMessage,
+  getIsAllowActions,
+  getIsOwnershipHint, getSavingStatus,
+} from './data/selectors';
+import { setErrorMessage } from './data/slice';
+import { MODAL_TYPES } from './constants';
+
+const useCourseTeam = ({ courseId }) => {
+  const dispatch = useDispatch();
+
+  const { email: currentUserEmail } = getAuthenticatedUser();
+  const courseDetails = useModel('courseDetails', courseId);
+
+  const [modalType, setModalType] = useState(MODAL_TYPES.delete);
+  const [isInfoModalOpen, openInfoModal, closeInfoModal] = useToggle(false);
+  const [isFormVisible, openForm, hideForm] = useToggle(false);
+  const [currentEmail, setCurrentEmail] = useState('');
+  const [isQueryPending, setIsQueryPending] = useState(false);
+  const courseTeamUsers = useSelector(getCourseTeamUsers);
+  const errorMessage = useSelector(getErrorMessage);
+  const savingStatus = useSelector(getSavingStatus);
+  const isAllowActions = useSelector(getIsAllowActions);
+  const isOwnershipHint = useSelector(getIsOwnershipHint);
+  const loadingCourseTeamStatus = useSelector(getCourseTeamLoadingStatus);
+
+  const isSingleAdmin = courseTeamUsers.filter((user) => user.role === USER_ROLES.admin).length === 1;
+
+  const handleOpenInfoModal = (type, email) => {
+    setCurrentEmail(email);
+    setModalType(type);
+    openInfoModal();
+  };
+
+  const handleCloseInfoModal = () => {
+    dispatch(setErrorMessage(''));
+    closeInfoModal();
+  };
+
+  const handleAddUserSubmit = (data) => {
+    setIsQueryPending(true);
+
+    const { email } = data;
+    const isUserContains = courseTeamUsers.some((user) => user.email === email);
+
+    if (isUserContains) {
+      handleOpenInfoModal(MODAL_TYPES.warning, email);
+      return;
+    }
+
+    dispatch(createCourseTeamQuery(courseId, email)).then((result) => {
+      if (result) {
+        hideForm();
+        dispatch(setErrorMessage(''));
+        return;
+      }
+
+      handleOpenInfoModal(MODAL_TYPES.error, email);
+    });
+  };
+
+  const handleDeleteUserSubmit = () => {
+    setIsQueryPending(true);
+    dispatch(deleteCourseTeamQuery(courseId, currentEmail));
+    handleCloseInfoModal();
+  };
+
+  const handleChangeRoleUserSubmit = (email, role) => {
+    setIsQueryPending(true);
+    dispatch(changeRoleTeamUserQuery(courseId, email, role));
+  };
+
+  const handleInternetConnectionFailed = () => {
+    setIsQueryPending(false);
+  };
+
+  const handleOpenDeleteModal = (email) => {
+    handleOpenInfoModal(MODAL_TYPES.delete, email);
+  };
+
+  useEffect(() => {
+    dispatch(fetchCourseTeamQuery(courseId));
+  }, [courseId]);
+
+  useEffect(() => {
+    if (savingStatus === RequestStatus.SUCCESSFUL) {
+      setIsQueryPending(false);
+      window.scrollTo({ top: 0, behavior: 'smooth' });
+    }
+  }, [savingStatus]);
+
+  return {
+    modalType,
+    errorMessage,
+    courseName: courseDetails?.name || '',
+    currentEmail,
+    courseTeamUsers,
+    currentUserEmail,
+    isLoading: loadingCourseTeamStatus === RequestStatus.IN_PROGRESS,
+    isLoadingDenied: loadingCourseTeamStatus === RequestStatus.DENIED,
+    isSingleAdmin,
+    isFormVisible,
+    isAllowActions,
+    isInfoModalOpen,
+    isOwnershipHint,
+    isQueryPending,
+    isInternetConnectionAlertFailed: savingStatus === RequestStatus.FAILED,
+    isShowAddTeamMember: courseTeamUsers.length === 1 && isAllowActions,
+    isShowInitialSidebar: !courseTeamUsers.length && !isFormVisible,
+    isShowUserFilledSidebar: Boolean(courseTeamUsers.length) || isFormVisible,
+    openForm,
+    hideForm,
+    closeInfoModal,
+    handleAddUserSubmit,
+    handleOpenInfoModal,
+    handleOpenDeleteModal,
+    handleDeleteUserSubmit,
+    handleChangeRoleUserSubmit,
+    handleInternetConnectionFailed,
+  };
+};
+
+export { useCourseTeam };
diff --git a/src/course-team/info-modal/InfoModal.jsx b/src/course-team/info-modal/InfoModal.jsx
new file mode 100644
index 0000000000..d9ab33852c
--- /dev/null
+++ b/src/course-team/info-modal/InfoModal.jsx
@@ -0,0 +1,74 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  ActionRow,
+  Button,
+  AlertModal,
+} from '@openedx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import { MODAL_TYPES } from '../constants';
+import { getInfoModalSettings } from '../utils';
+
+const InfoModal = ({
+  modalType,
+  isOpen,
+  close,
+  onDeleteSubmit,
+  currentEmail,
+  errorMessage,
+  courseName,
+}) => {
+  const intl = useIntl();
+
+  const {
+    title,
+    message,
+    variant,
+    closeButtonText,
+    submitButtonText,
+    closeButtonVariant,
+  } = getInfoModalSettings(modalType, currentEmail, errorMessage, courseName, intl);
+
+  const isEmptyErrorMessage = modalType === MODAL_TYPES.error && !errorMessage;
+
+  return (
+    <AlertModal
+      title={title}
+      variant={variant}
+      isOpen={isOpen && !isEmptyErrorMessage}
+      onClose={close}
+      footerNode={(
+        <ActionRow>
+          <Button variant={closeButtonVariant} onClick={close}>
+            {closeButtonText}
+          </Button>
+          {modalType === MODAL_TYPES.delete && (
+            <Button
+              onClick={(e) => {
+                e.preventDefault();
+                onDeleteSubmit();
+              }}
+            >
+              {submitButtonText}
+            </Button>
+          )}
+        </ActionRow>
+      )}
+    >
+      <p>{message}</p>
+    </AlertModal>
+  );
+};
+
+InfoModal.propTypes = {
+  modalType: PropTypes.string.isRequired,
+  isOpen: PropTypes.bool.isRequired,
+  close: PropTypes.func.isRequired,
+  currentEmail: PropTypes.string.isRequired,
+  errorMessage: PropTypes.string.isRequired,
+  courseName: PropTypes.string.isRequired,
+  onDeleteSubmit: PropTypes.func.isRequired,
+};
+
+export default InfoModal;
diff --git a/src/course-team/info-modal/InfoModal.test.jsx b/src/course-team/info-modal/InfoModal.test.jsx
new file mode 100644
index 0000000000..f97f8a0baf
--- /dev/null
+++ b/src/course-team/info-modal/InfoModal.test.jsx
@@ -0,0 +1,85 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import { MODAL_TYPES } from '../constants';
+import InfoModal from './InfoModal';
+import messages from './messages';
+
+const closeMock = jest.fn();
+const onDeleteSubmitMock = jest.fn();
+const currentEmailMock = 'user@example.com';
+const errorMessageMock = 'Error text error@example.com';
+const courseNameMock = 'Course Name';
+
+const renderComponent = (props) => render(
+  <IntlProvider locale="en">
+    <InfoModal
+      modalType={MODAL_TYPES.delete}
+      isOpen
+      close={closeMock}
+      onDeleteSubmit={onDeleteSubmitMock}
+      currentEmail={currentEmailMock}
+      errorMessage={errorMessageMock}
+      courseName={courseNameMock}
+      {...props}
+    />
+  </IntlProvider>,
+);
+
+describe('<InfoModal />', () => {
+  it('render InfoModal component with type delete correctly', () => {
+    const { getByText, getByRole } = renderComponent({
+      modalType: MODAL_TYPES.delete,
+    });
+
+    expect(getByText(messages.deleteModalTitle.defaultMessage)).toBeInTheDocument();
+    expect(getByText(
+      messages.deleteModalMessage.defaultMessage
+        .replace('{email}', currentEmailMock)
+        .replace('{courseName}', courseNameMock),
+    )).toBeInTheDocument();
+    expect(getByRole('button', { name: messages.deleteModalCancelButton.defaultMessage })).toBeInTheDocument();
+    expect(getByRole('button', { name: messages.deleteModalDeleteButton.defaultMessage })).toBeInTheDocument();
+  });
+
+  it('render InfoModal component with type error correctly', () => {
+    const { getByText, getByRole } = renderComponent({
+      modalType: MODAL_TYPES.error,
+    });
+
+    expect(getByText(messages.errorModalTitle.defaultMessage)).toBeInTheDocument();
+    expect(getByText(errorMessageMock)).toBeInTheDocument();
+    expect(getByRole('button', { name: messages.errorModalOkButton.defaultMessage })).toBeInTheDocument();
+  });
+
+  it('render InfoModal component with type warning correctly', () => {
+    const { getByText, getByRole } = renderComponent({
+      modalType: MODAL_TYPES.warning,
+    });
+
+    expect(getByText(messages.warningModalTitle.defaultMessage)).toBeInTheDocument();
+    expect(getByText(
+      messages.warningModalMessage.defaultMessage
+        .replace('{email}', currentEmailMock)
+        .replace('{courseName}', courseNameMock),
+    )).toBeInTheDocument();
+    expect(getByRole('button', { name: messages.warningModalReturnButton.defaultMessage })).toBeInTheDocument();
+  });
+
+  it('calls close handler when the close button is clicked', () => {
+    const { getByRole } = renderComponent();
+
+    const closeButton = getByRole('button', { name: messages.deleteModalCancelButton.defaultMessage });
+    fireEvent.click(closeButton);
+    expect(closeMock).toHaveBeenCalledTimes(1);
+  });
+
+  it('calls onDeleteSubmit handler when the delete button is clicked', () => {
+    const { getByRole } = renderComponent();
+
+    const deleteButton = getByRole('button', { name: messages.deleteModalDeleteButton.defaultMessage });
+    fireEvent.click(deleteButton);
+    expect(onDeleteSubmitMock).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/src/course-team/info-modal/messages.js b/src/course-team/info-modal/messages.js
new file mode 100644
index 0000000000..8e8a965e6f
--- /dev/null
+++ b/src/course-team/info-modal/messages.js
@@ -0,0 +1,42 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  deleteModalTitle: {
+    id: 'course-authoring.course-team.member.button.remove',
+    defaultMessage: 'Delete course team member',
+  },
+  deleteModalMessage: {
+    id: 'course-authoring.course-team.delete-modal.message',
+    defaultMessage: 'Are you sure you want to delete {email} from the course team for “{courseName}”?',
+  },
+  deleteModalDeleteButton: {
+    id: 'course-authoring.course-team.delete-modal.button.delete',
+    defaultMessage: 'Delete',
+  },
+  deleteModalCancelButton: {
+    id: 'course-authoring.course-team.delete-modal.button.cancel',
+    defaultMessage: 'Cancel',
+  },
+  errorModalTitle: {
+    id: 'course-authoring.course-team.error-modal.title',
+    defaultMessage: 'Error adding user',
+  },
+  errorModalOkButton: {
+    id: 'course-authoring.course-team.error-modal.button.ok',
+    defaultMessage: 'Ok',
+  },
+  warningModalTitle: {
+    id: 'course-authoring.course-team.warning-modal.title',
+    defaultMessage: 'Already a course team member',
+  },
+  warningModalMessage: {
+    id: 'course-authoring.course-team.warning-modal.message',
+    defaultMessage: '{email} is already on the {courseName} team. Recheck the email address if you want to add a new member.',
+  },
+  warningModalReturnButton: {
+    id: 'course-authoring.course-team.warning-modal.button.return',
+    defaultMessage: 'Return to team listing',
+  },
+});
+
+export default messages;
diff --git a/src/course-team/messages.js b/src/course-team/messages.js
new file mode 100644
index 0000000000..c6a6ebc059
--- /dev/null
+++ b/src/course-team/messages.js
@@ -0,0 +1,18 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  headingTitle: {
+    id: 'course-authoring.course-team.headingTitle',
+    defaultMessage: 'Course team',
+  },
+  headingSubtitle: {
+    id: 'course-authoring.course-team.subTitle',
+    defaultMessage: 'Settings',
+  },
+  addNewMemberButton: {
+    id: 'course-authoring.course-team.button.new-team-member',
+    defaultMessage: 'New team member',
+  },
+});
+
+export default messages;
diff --git a/src/course-team/utils.js b/src/course-team/utils.js
new file mode 100644
index 0000000000..2d9399e00c
--- /dev/null
+++ b/src/course-team/utils.js
@@ -0,0 +1,52 @@
+import { MODAL_TYPES } from './constants';
+import messages from './info-modal/messages';
+
+/**
+ * Create an info modal settings dependent on modal type
+ * @param {typeof MODAL_TYPES} modalType - one of MODAL_TYPES
+ * @param {string} currentEmail - email in current user
+ * @param {string} errorEmail - email from wrong request
+ * @param {string} courseName - current course name
+ * @returns {{
+   * title: string,
+   * message: string,
+   * variant: string,
+   * closeButtonText: string,
+   * submitButtonText: string,
+   * closeButtonVariant: string
+ * }}
+ */
+
+const getInfoModalSettings = (modalType, currentEmail, errorMessage, courseName, intl) => {
+  switch (modalType) {
+    case MODAL_TYPES.delete:
+      return {
+        title: intl.formatMessage(messages.deleteModalTitle),
+        message: intl.formatMessage(messages.deleteModalMessage, { email: currentEmail, courseName }),
+        variant: '',
+        closeButtonText: intl.formatMessage(messages.deleteModalCancelButton),
+        submitButtonText: intl.formatMessage(messages.deleteModalDeleteButton),
+        closeButtonVariant: 'tertiary',
+      };
+    case MODAL_TYPES.error:
+      return {
+        title: intl.formatMessage(messages.errorModalTitle),
+        message: errorMessage,
+        variant: 'danger',
+        closeButtonText: intl.formatMessage(messages.errorModalOkButton),
+        closeButtonVariant: 'primary',
+      };
+    case MODAL_TYPES.warning:
+      return {
+        title: intl.formatMessage(messages.warningModalTitle),
+        message: intl.formatMessage(messages.warningModalMessage, { email: currentEmail, courseName }),
+        variant: 'warning',
+        closeButtonText: intl.formatMessage(messages.warningModalReturnButton),
+        mainButtonVariant: 'primary',
+      };
+    default:
+      return '';
+  }
+};
+
+export { getInfoModalSettings };
diff --git a/src/course-unit/CourseUnit.jsx b/src/course-unit/CourseUnit.jsx
new file mode 100644
index 0000000000..4c54d6775e
--- /dev/null
+++ b/src/course-unit/CourseUnit.jsx
@@ -0,0 +1,243 @@
+import { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { useSelector } from 'react-redux';
+import { useParams } from 'react-router-dom';
+import {
+  Container, Layout, Stack, Button, TransitionReplace,
+} from '@openedx/paragon';
+import { getConfig } from '@edx/frontend-platform';
+import { useIntl, injectIntl } from '@edx/frontend-platform/i18n';
+import {
+  Warning as WarningIcon,
+  CheckCircle as CheckCircleIcon,
+} from '@openedx/paragon/icons';
+
+import { getProcessingNotification } from '../generic/processing-notification/data/selectors';
+import SubHeader from '../generic/sub-header/SubHeader';
+import { RequestStatus } from '../data/constants';
+import getPageHeadTitle from '../generic/utils';
+import AlertMessage from '../generic/alert-message';
+import { PasteComponent } from '../generic/clipboard';
+import ProcessingNotification from '../generic/processing-notification';
+import { SavingErrorAlert } from '../generic/saving-error-alert';
+import ConnectionErrorAlert from '../generic/ConnectionErrorAlert';
+import Loading from '../generic/Loading';
+import AddComponent from './add-component/AddComponent';
+import HeaderTitle from './header-title/HeaderTitle';
+import Breadcrumbs from './breadcrumbs/Breadcrumbs';
+import HeaderNavigations from './header-navigations/HeaderNavigations';
+import Sequence from './course-sequence';
+import Sidebar from './sidebar';
+import { useCourseUnit } from './hooks';
+import messages from './messages';
+import PublishControls from './sidebar/PublishControls';
+import LocationInfo from './sidebar/LocationInfo';
+import TagsSidebarControls from '../content-tags-drawer/tags-sidebar-controls';
+import { PasteNotificationAlert } from './clipboard';
+import XBlockContainerIframe from './xblock-container-iframe';
+import MoveModal from './move-modal';
+import PreviewLibraryXBlockChanges from './preview-changes';
+
+const CourseUnit = ({ courseId }) => {
+  const { blockId } = useParams();
+  const intl = useIntl();
+  const {
+    isLoading,
+    sequenceId,
+    unitTitle,
+    errorMessage,
+    sequenceStatus,
+    savingStatus,
+    isTitleEditFormOpen,
+    staticFileNotices,
+    currentlyVisibleToStudents,
+    unitXBlockActions,
+    sharedClipboardData,
+    showPasteXBlock,
+    showPasteUnit,
+    handleTitleEditSubmit,
+    headerNavigationsActions,
+    handleTitleEdit,
+    handleCreateNewCourseXBlock,
+    handleConfigureSubmit,
+    courseVerticalChildren,
+    canPasteComponent,
+    isMoveModalOpen,
+    openMoveModal,
+    closeMoveModal,
+    movedXBlockParams,
+    handleRollbackMovedXBlock,
+    handleCloseXBlockMovedAlert,
+    handleNavigateToTargetUnit,
+  } = useCourseUnit({ courseId, blockId });
+
+  useEffect(() => {
+    document.title = getPageHeadTitle('', unitTitle);
+  }, [unitTitle]);
+
+  const {
+    isShow: isShowProcessingNotification,
+    title: processingNotificationTitle,
+  } = useSelector(getProcessingNotification);
+
+  if (isLoading) {
+    return <Loading />;
+  }
+
+  if (sequenceStatus === RequestStatus.FAILED) {
+    return (
+      <Container size="xl" className="course-unit px-4 mt-4">
+        <ConnectionErrorAlert />
+      </Container>
+    );
+  }
+
+  return (
+    <>
+      <Container size="xl" className="course-unit px-4">
+        <section className="course-unit-container mb-4 mt-5">
+          <TransitionReplace>
+            {movedXBlockParams.isSuccess ? (
+              <AlertMessage
+                key="xblock-moved-alert"
+                data-testid="xblock-moved-alert"
+                show={movedXBlockParams.isSuccess}
+                variant="success"
+                icon={CheckCircleIcon}
+                title={movedXBlockParams.isUndo
+                  ? intl.formatMessage(messages.alertMoveCancelTitle)
+                  : intl.formatMessage(messages.alertMoveSuccessTitle)}
+                description={movedXBlockParams.isUndo
+                  ? intl.formatMessage(messages.alertMoveCancelDescription, { title: movedXBlockParams.title })
+                  : intl.formatMessage(messages.alertMoveSuccessDescription, { title: movedXBlockParams.title })}
+                aria-hidden={movedXBlockParams.isSuccess}
+                dismissible
+                actions={movedXBlockParams.isUndo ? null : [
+                  <Button
+                    onClick={handleRollbackMovedXBlock}
+                    key="xblock-moved-alert-undo-move-button"
+                  >
+                    {intl.formatMessage(messages.undoMoveButton)}
+                  </Button>,
+                  <Button
+                    onClick={handleNavigateToTargetUnit}
+                    key="xblock-moved-alert-new-location-button"
+                  >
+                    {intl.formatMessage(messages.newLocationButton)}
+                  </Button>,
+                ]}
+                onClose={handleCloseXBlockMovedAlert}
+              />
+            ) : null}
+          </TransitionReplace>
+          <SubHeader
+            hideBorder
+            title={(
+              <HeaderTitle
+                unitTitle={unitTitle}
+                isTitleEditFormOpen={isTitleEditFormOpen}
+                handleTitleEdit={handleTitleEdit}
+                handleTitleEditSubmit={handleTitleEditSubmit}
+                handleConfigureSubmit={handleConfigureSubmit}
+              />
+            )}
+            breadcrumbs={(
+              <Breadcrumbs />
+            )}
+            headerActions={(
+              <HeaderNavigations
+                headerNavigationsActions={headerNavigationsActions}
+              />
+            )}
+          />
+          <Sequence
+            courseId={courseId}
+            sequenceId={sequenceId}
+            unitId={blockId}
+            handleCreateNewCourseXBlock={handleCreateNewCourseXBlock}
+            showPasteUnit={showPasteUnit}
+          />
+          <Layout
+            lg={[{ span: 8 }, { span: 4 }]}
+            md={[{ span: 8 }, { span: 4 }]}
+            sm={[{ span: 8 }, { span: 3 }]}
+            xs={[{ span: 9 }, { span: 3 }]}
+            xl={[{ span: 9 }, { span: 3 }]}
+          >
+            <Layout.Element>
+              {currentlyVisibleToStudents && (
+                <AlertMessage
+                  className="course-unit__alert"
+                  title={intl.formatMessage(messages.alertUnpublishedVersion)}
+                  variant="warning"
+                  icon={WarningIcon}
+                />
+              )}
+              {staticFileNotices && (
+                <PasteNotificationAlert
+                  staticFileNotices={staticFileNotices}
+                  courseId={courseId}
+                />
+              )}
+              <XBlockContainerIframe
+                blockId={blockId}
+                unitXBlockActions={unitXBlockActions}
+                courseVerticalChildren={courseVerticalChildren.children}
+              />
+              <AddComponent
+                blockId={blockId}
+                handleCreateNewCourseXBlock={handleCreateNewCourseXBlock}
+              />
+              {showPasteXBlock && canPasteComponent && (
+                <PasteComponent
+                  clipboardData={sharedClipboardData}
+                  onClick={handleCreateNewCourseXBlock}
+                  text={intl.formatMessage(messages.pasteButtonText)}
+                />
+              )}
+              <MoveModal
+                isOpenModal={isMoveModalOpen}
+                openModal={openMoveModal}
+                closeModal={closeMoveModal}
+                courseId={courseId}
+              />
+              <PreviewLibraryXBlockChanges />
+            </Layout.Element>
+            <Layout.Element>
+              <Stack gap={3}>
+                <Sidebar data-testid="course-unit-sidebar">
+                  <PublishControls blockId={blockId} />
+                </Sidebar>
+                {getConfig().ENABLE_TAGGING_TAXONOMY_PAGES === 'true'
+                && (
+                  <Sidebar className="tags-sidebar">
+                    <TagsSidebarControls />
+                  </Sidebar>
+                )}
+                <Sidebar data-testid="course-unit-location-sidebar">
+                  <LocationInfo />
+                </Sidebar>
+              </Stack>
+            </Layout.Element>
+          </Layout>
+        </section>
+      </Container>
+      <div className="alert-toast">
+        <ProcessingNotification
+          isShow={isShowProcessingNotification}
+          title={processingNotificationTitle}
+        />
+        <SavingErrorAlert
+          savingStatus={savingStatus}
+          errorMessage={errorMessage}
+        />
+      </div>
+    </>
+  );
+};
+
+CourseUnit.propTypes = {
+  courseId: PropTypes.string.isRequired,
+};
+
+export default injectIntl(CourseUnit);
diff --git a/src/course-unit/CourseUnit.scss b/src/course-unit/CourseUnit.scss
new file mode 100644
index 0000000000..a2d6124ba3
--- /dev/null
+++ b/src/course-unit/CourseUnit.scss
@@ -0,0 +1,11 @@
+@import "./breadcrumbs/Breadcrumbs";
+@import "./course-sequence/CourseSequence";
+@import "./add-component/AddComponent";
+@import "./sidebar/Sidebar";
+@import "./header-title/HeaderTitle";
+@import "./move-modal";
+@import "./preview-changes";
+
+.course-unit__alert {
+  margin-bottom: 1.75rem;
+}
diff --git a/src/course-unit/CourseUnit.test.jsx b/src/course-unit/CourseUnit.test.jsx
new file mode 100644
index 0000000000..63fb3bf1d1
--- /dev/null
+++ b/src/course-unit/CourseUnit.test.jsx
@@ -0,0 +1,1327 @@
+import MockAdapter from 'axios-mock-adapter';
+import {
+  act, render, waitFor, within, screen,
+} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { AppProvider } from '@edx/frontend-platform/react';
+import {
+  camelCaseObject,
+  getConfig,
+  initializeMockApp,
+  setConfig,
+} from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { cloneDeep, set } from 'lodash';
+
+import {
+  getCourseSectionVerticalApiUrl,
+  getCourseUnitApiUrl,
+  getCourseVerticalChildrenApiUrl,
+  getCourseOutlineInfoUrl,
+  getXBlockBaseApiUrl,
+  postXBlockBaseApiUrl,
+} from './data/api';
+import {
+  createNewCourseXBlock,
+  editCourseUnitVisibilityAndData,
+  fetchCourseSectionVerticalData,
+  fetchCourseUnitQuery,
+  fetchCourseVerticalChildrenData,
+  getCourseOutlineInfoQuery,
+  patchUnitItemQuery,
+} from './data/thunk';
+import initializeStore from '../store';
+import {
+  courseCreateXblockMock,
+  courseSectionVerticalMock,
+  courseUnitIndexMock,
+  courseUnitMock,
+  courseVerticalChildrenMock,
+  clipboardMockResponse,
+  courseOutlineInfoMock,
+} from './__mocks__';
+import { clipboardUnit } from '../__mocks__';
+import { executeThunk } from '../utils';
+import pasteComponentMessages from '../generic/clipboard/paste-component/messages';
+import pasteNotificationsMessages from './clipboard/paste-notification/messages';
+import headerNavigationsMessages from './header-navigations/messages';
+import headerTitleMessages from './header-title/messages';
+import courseSequenceMessages from './course-sequence/messages';
+import sidebarMessages from './sidebar/messages';
+import { extractCourseUnitId } from './sidebar/utils';
+import CourseUnit from './CourseUnit';
+
+import configureModalMessages from '../generic/configure-modal/messages';
+import { getContentTaxonomyTagsApiUrl, getContentTaxonomyTagsCountApiUrl } from '../content-tags-drawer/data/api';
+import addComponentMessages from './add-component/messages';
+import { messageTypes, PUBLISH_TYPES, UNIT_VISIBILITY_STATES } from './constants';
+import { IframeProvider } from './context/iFrameContext';
+import moveModalMessages from './move-modal/messages';
+import messages from './messages';
+
+let axiosMock;
+let store;
+const courseId = '123';
+const blockId = '567890';
+const unitDisplayName = courseUnitIndexMock.metadata.display_name;
+const mockedUsedNavigate = jest.fn();
+const userName = 'openedx';
+
+const postXBlockBody = {
+  parent_locator: blockId,
+  staged_content: 'clipboard',
+};
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useParams: () => ({ blockId }),
+  useNavigate: () => mockedUsedNavigate,
+}));
+
+jest.mock('@tanstack/react-query', () => ({
+  useQuery: jest.fn(({ queryKey }) => {
+    if (queryKey[0] === 'contentTaxonomyTags') {
+      return {
+        data: {
+          taxonomies: [],
+        },
+        isSuccess: true,
+      };
+    } if (queryKey[0] === 'contentTagsCount') {
+      return {
+        data: 17,
+        isSuccess: true,
+      };
+    }
+    return {
+      data: {},
+      isSuccess: true,
+    };
+  }),
+  useQueryClient: jest.fn(() => ({
+    setQueryData: jest.fn(),
+  })),
+  useMutation: jest.fn(() => ({
+    mutateAsync: jest.fn(),
+  })),
+}));
+
+const clipboardBroadcastChannelMock = {
+  postMessage: jest.fn(),
+  close: jest.fn(),
+};
+
+global.BroadcastChannel = jest.fn(() => clipboardBroadcastChannelMock);
+
+const RootWrapper = () => (
+  <AppProvider store={store}>
+    <IntlProvider locale="en">
+      <IframeProvider>
+        <CourseUnit courseId={courseId} />
+      </IframeProvider>
+    </IntlProvider>
+  </AppProvider>
+);
+
+describe('<CourseUnit />', () => {
+  beforeEach(async () => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+    window.scrollTo = jest.fn();
+    global.localStorage.clear();
+    store = initializeStore();
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+    axiosMock
+      .onGet(getCourseUnitApiUrl(courseId))
+      .reply(200, courseUnitIndexMock);
+    await executeThunk(fetchCourseUnitQuery(courseId), store.dispatch);
+    axiosMock
+      .onGet(getCourseSectionVerticalApiUrl(blockId))
+      .reply(200, courseSectionVerticalMock);
+    await executeThunk(fetchCourseSectionVerticalData(blockId), store.dispatch);
+    axiosMock
+      .onGet(getCourseVerticalChildrenApiUrl(blockId))
+      .reply(200, courseVerticalChildrenMock);
+    await executeThunk(fetchCourseVerticalChildrenData(blockId), store.dispatch);
+    axiosMock
+      .onGet(getContentTaxonomyTagsApiUrl(blockId))
+      .reply(200, {});
+    axiosMock
+      .onGet(getContentTaxonomyTagsCountApiUrl(blockId))
+      .reply(200, 17);
+  });
+
+  it('render CourseUnit component correctly', async () => {
+    const { getByText, getByRole, getByTestId } = render(<RootWrapper />);
+    const currentSectionName = courseUnitIndexMock.ancestor_info.ancestors[1].display_name;
+    const currentSubSectionName = courseUnitIndexMock.ancestor_info.ancestors[1].display_name;
+
+    await waitFor(() => {
+      const unitHeaderTitle = getByTestId('unit-header-title');
+      expect(getByText(unitDisplayName)).toBeInTheDocument();
+      expect(within(unitHeaderTitle).getByRole('button', { name: headerTitleMessages.altButtonEdit.defaultMessage })).toBeInTheDocument();
+      expect(within(unitHeaderTitle).getByRole('button', { name: headerTitleMessages.altButtonSettings.defaultMessage })).toBeInTheDocument();
+      expect(getByRole('button', { name: headerNavigationsMessages.viewLiveButton.defaultMessage })).toBeInTheDocument();
+      expect(getByRole('button', { name: headerNavigationsMessages.previewButton.defaultMessage })).toBeInTheDocument();
+      expect(getByRole('button', { name: currentSectionName })).toBeInTheDocument();
+      expect(getByRole('button', { name: currentSubSectionName })).toBeInTheDocument();
+    });
+  });
+
+  it('handles CourseUnit header action buttons', async () => {
+    const { open } = window;
+    window.open = jest.fn();
+    const { getByRole } = render(<RootWrapper />);
+    const {
+      draft_preview_link: draftPreviewLink,
+      published_preview_link: publishedPreviewLink,
+    } = courseSectionVerticalMock;
+
+    await waitFor(() => {
+      const viewLiveButton = getByRole('button', { name: headerNavigationsMessages.viewLiveButton.defaultMessage });
+      userEvent.click(viewLiveButton);
+      expect(window.open).toHaveBeenCalled();
+      expect(window.open).toHaveBeenCalledWith(publishedPreviewLink, '_blank');
+
+      const previewButton = getByRole('button', { name: headerNavigationsMessages.previewButton.defaultMessage });
+      userEvent.click(previewButton);
+      expect(window.open).toHaveBeenCalled();
+      expect(window.open).toHaveBeenCalledWith(draftPreviewLink, '_blank');
+    });
+
+    window.open = open;
+  });
+
+  it('checks courseUnit title changing when edit query is successfully', async () => {
+    const {
+      findByText,
+      queryByRole,
+      getByRole,
+      getByTestId,
+    } = render(<RootWrapper />);
+    let editTitleButton = null;
+    let titleEditField = null;
+    const newDisplayName = `${unitDisplayName} new`;
+
+    axiosMock
+      .onPost(getXBlockBaseApiUrl(blockId, {
+        metadata: {
+          display_name: newDisplayName,
+        },
+      }))
+      .reply(200, { dummy: 'value' });
+    axiosMock
+      .onGet(getCourseUnitApiUrl(blockId))
+      .reply(200, {
+        ...courseUnitIndexMock,
+        metadata: {
+          ...courseUnitIndexMock.metadata,
+          display_name: newDisplayName,
+        },
+      });
+
+    await waitFor(() => {
+      const unitHeaderTitle = getByTestId('unit-header-title');
+      editTitleButton = within(unitHeaderTitle)
+        .getByRole('button', { name: headerTitleMessages.altButtonEdit.defaultMessage });
+      titleEditField = within(unitHeaderTitle)
+        .queryByRole('textbox', { name: headerTitleMessages.ariaLabelButtonEdit.defaultMessage });
+    });
+    expect(titleEditField).not.toBeInTheDocument();
+    userEvent.click(editTitleButton);
+    titleEditField = getByRole('textbox', { name: headerTitleMessages.ariaLabelButtonEdit.defaultMessage });
+
+    await userEvent.clear(titleEditField);
+    await userEvent.type(titleEditField, newDisplayName);
+    await userEvent.tab();
+
+    expect(titleEditField).toHaveValue(newDisplayName);
+
+    titleEditField = queryByRole('textbox', { name: headerTitleMessages.ariaLabelButtonEdit.defaultMessage });
+    expect(titleEditField).not.toBeInTheDocument();
+    expect(await findByText(newDisplayName)).toBeInTheDocument();
+  });
+
+  it('doesn\'t handle creating xblock and displays an error message', async () => {
+    const { courseKey, locator } = courseCreateXblockMock;
+    axiosMock
+      .onPost(postXBlockBaseApiUrl({ type: 'video', category: 'video', parentLocator: blockId }))
+      .reply(500, {});
+    const { getByRole } = render(<RootWrapper />);
+
+    await waitFor(() => {
+      const videoButton = getByRole('button', {
+        name: new RegExp(`${addComponentMessages.buttonText.defaultMessage} Video`, 'i'),
+      });
+
+      userEvent.click(videoButton);
+      expect(mockedUsedNavigate).not.toHaveBeenCalledWith(`/course/${courseKey}/editor/video/${locator}`);
+    });
+  });
+
+  it('handle creating Problem xblock and navigate to editor page', async () => {
+    const { courseKey, locator } = courseCreateXblockMock;
+    axiosMock
+      .onPost(postXBlockBaseApiUrl({ type: 'problem', category: 'problem', parentLocator: blockId }))
+      .reply(200, courseCreateXblockMock);
+    const { getByText, getByRole } = render(<RootWrapper />);
+
+    await waitFor(() => {
+      userEvent.click(getByRole('button', { name: sidebarMessages.actionButtonPublishTitle.defaultMessage }));
+    });
+
+    axiosMock
+      .onPost(getXBlockBaseApiUrl(blockId), {
+        publish: PUBLISH_TYPES.makePublic,
+      })
+      .reply(200, { dummy: 'value' });
+    axiosMock
+      .onGet(getCourseUnitApiUrl(blockId))
+      .reply(200, {
+        ...courseUnitIndexMock,
+        visibility_state: UNIT_VISIBILITY_STATES.live,
+        has_changes: false,
+        published_by: userName,
+      });
+
+    await executeThunk(editCourseUnitVisibilityAndData(blockId, PUBLISH_TYPES.makePublic, true), store.dispatch);
+
+    await waitFor(() => {
+      const problemButton = getByRole('button', {
+        name: new RegExp(`problem ${addComponentMessages.buttonText.defaultMessage} Problem`, 'i'),
+      });
+
+      userEvent.click(problemButton);
+      expect(mockedUsedNavigate).toHaveBeenCalled();
+      expect(mockedUsedNavigate).toHaveBeenCalledWith(`/course/${courseKey}/editor/problem/${locator}`);
+    });
+
+    axiosMock
+      .onGet(getCourseUnitApiUrl(blockId))
+      .reply(200, courseUnitIndexMock);
+
+    await executeThunk(editCourseUnitVisibilityAndData(blockId, PUBLISH_TYPES.makePublic, true), store.dispatch);
+
+    // after creating problem xblock, the sidebar status changes to Draft (unpublished changes)
+    expect(getByText(sidebarMessages.sidebarTitleDraftUnpublishedChanges.defaultMessage)).toBeInTheDocument();
+    expect(getByText(sidebarMessages.visibilityStaffAndLearnersTitle.defaultMessage)).toBeInTheDocument();
+    expect(getByText(sidebarMessages.releaseStatusTitle.defaultMessage)).toBeInTheDocument();
+    expect(getByText(sidebarMessages.sidebarBodyNote.defaultMessage)).toBeInTheDocument();
+    expect(getByText(sidebarMessages.visibilityWillBeVisibleToTitle.defaultMessage)).toBeInTheDocument();
+    expect(getByText(sidebarMessages.visibilityCheckboxTitle.defaultMessage)).toBeInTheDocument();
+    expect(getByText(sidebarMessages.actionButtonPublishTitle.defaultMessage)).toBeInTheDocument();
+    expect(getByText(sidebarMessages.actionButtonDiscardChangesTitle.defaultMessage)).toBeInTheDocument();
+    expect(getByText(courseUnitIndexMock.release_date)).toBeInTheDocument();
+    expect(getByText(
+      sidebarMessages.publishInfoDraftSaved.defaultMessage
+        .replace('{editedOn}', courseUnitIndexMock.edited_on)
+        .replace('{editedBy}', courseUnitIndexMock.edited_by),
+    )).toBeInTheDocument();
+    expect(getByText(
+      sidebarMessages.releaseInfoWithSection.defaultMessage
+        .replace('{sectionName}', courseUnitIndexMock.release_date_from),
+    )).toBeInTheDocument();
+  });
+
+  it('correct addition of a new course unit after click on the "Add new unit" button', async () => {
+    const { getByRole, getAllByTestId } = render(<RootWrapper />);
+    let units = null;
+    const updatedCourseSectionVerticalData = cloneDeep(courseSectionVerticalMock);
+    const updatedAncestorsChild = updatedCourseSectionVerticalData.xblock_info.ancestor_info.ancestors[0];
+    set(updatedCourseSectionVerticalData, 'xblock_info.ancestor_info.ancestors[0].child_info.children', [
+      ...updatedAncestorsChild.child_info.children,
+      courseUnitMock,
+    ]);
+
+    await waitFor(async () => {
+      units = getAllByTestId('course-unit-btn');
+      const courseUnits = courseSectionVerticalMock.xblock_info.ancestor_info.ancestors[0].child_info.children;
+      expect(units).toHaveLength(courseUnits.length);
+    });
+
+    axiosMock
+      .onPost(postXBlockBaseApiUrl(), { parent_locator: blockId, category: 'vertical', display_name: 'Unit' })
+      .reply(200, { dummy: 'value' });
+    axiosMock.reset();
+    axiosMock
+      .onGet(getCourseSectionVerticalApiUrl(blockId))
+      .reply(200, {
+        ...updatedCourseSectionVerticalData,
+      });
+
+    await executeThunk(fetchCourseSectionVerticalData(blockId), store.dispatch);
+
+    const addNewUnitBtn = getByRole('button', { name: courseSequenceMessages.newUnitBtnText.defaultMessage });
+    units = getAllByTestId('course-unit-btn');
+    const updatedCourseUnits = updatedCourseSectionVerticalData
+      .xblock_info.ancestor_info.ancestors[0].child_info.children;
+
+    userEvent.click(addNewUnitBtn);
+    expect(units.length).toEqual(updatedCourseUnits.length);
+    expect(mockedUsedNavigate).toHaveBeenCalled();
+    expect(mockedUsedNavigate)
+      .toHaveBeenCalledWith(`/course/${courseId}/container/${blockId}/${updatedAncestorsChild.id}`, { replace: true });
+  });
+
+  it('the sequence unit is updated after changing the unit header', async () => {
+    const { getAllByTestId, getByTestId } = render(<RootWrapper />);
+    const updatedCourseSectionVerticalData = cloneDeep(courseSectionVerticalMock);
+    const updatedAncestorsChild = updatedCourseSectionVerticalData.xblock_info.ancestor_info.ancestors[0];
+    set(updatedCourseSectionVerticalData, 'xblock_info.ancestor_info.ancestors[0].child_info.children', [
+      ...updatedAncestorsChild.child_info.children,
+      courseUnitMock,
+    ]);
+
+    const newDisplayName = `${unitDisplayName} new`;
+
+    axiosMock
+      .onPost(getXBlockBaseApiUrl(blockId, {
+        metadata: {
+          display_name: newDisplayName,
+        },
+      }))
+      .reply(200, { dummy: 'value' })
+      .onGet(getCourseUnitApiUrl(blockId))
+      .reply(200, {
+        ...courseUnitIndexMock,
+        metadata: {
+          ...courseUnitIndexMock.metadata,
+          display_name: newDisplayName,
+        },
+      })
+      .onGet(getCourseSectionVerticalApiUrl(blockId))
+      .reply(200, {
+        ...updatedCourseSectionVerticalData,
+      });
+
+    await executeThunk(fetchCourseSectionVerticalData(blockId), store.dispatch);
+
+    const unitHeaderTitle = getByTestId('unit-header-title');
+
+    const editTitleButton = within(unitHeaderTitle).getByRole('button', { name: headerTitleMessages.altButtonEdit.defaultMessage });
+    userEvent.click(editTitleButton);
+
+    const titleEditField = within(unitHeaderTitle).getByRole('textbox', { name: headerTitleMessages.ariaLabelButtonEdit.defaultMessage });
+
+    await userEvent.clear(titleEditField);
+    await userEvent.type(titleEditField, newDisplayName);
+    await userEvent.tab();
+
+    await waitFor(async () => {
+      const units = getAllByTestId('course-unit-btn');
+      expect(units.some(unit => unit.title === newDisplayName)).toBe(true);
+    });
+  });
+
+  it('handles creating Video xblock and navigates to editor page', async () => {
+    const { courseKey, locator } = courseCreateXblockMock;
+    axiosMock
+      .onPost(postXBlockBaseApiUrl({ type: 'video', category: 'video', parentLocator: blockId }))
+      .reply(200, courseCreateXblockMock);
+    const { getByText, queryByRole, getByRole } = render(<RootWrapper />);
+
+    await waitFor(() => {
+      userEvent.click(getByRole('button', { name: sidebarMessages.actionButtonPublishTitle.defaultMessage }));
+    });
+
+    axiosMock
+      .onPost(getXBlockBaseApiUrl(blockId), {
+        publish: PUBLISH_TYPES.makePublic,
+      })
+      .reply(200, { dummy: 'value' });
+    axiosMock
+      .onGet(getCourseUnitApiUrl(blockId))
+      .reply(200, {
+        ...courseUnitIndexMock,
+        visibility_state: UNIT_VISIBILITY_STATES.live,
+        has_changes: false,
+        published_by: userName,
+      });
+
+    await executeThunk(editCourseUnitVisibilityAndData(blockId, PUBLISH_TYPES.makePublic, true), store.dispatch);
+
+    await waitFor(() => {
+      // check if the sidebar status is Published and Live
+      expect(getByText(sidebarMessages.sidebarTitlePublishedAndLive.defaultMessage)).toBeInTheDocument();
+      expect(getByText(
+        sidebarMessages.publishLastPublished.defaultMessage
+          .replace('{publishedOn}', courseUnitIndexMock.published_on)
+          .replace('{publishedBy}', userName),
+      )).toBeInTheDocument();
+      expect(queryByRole('button', { name: sidebarMessages.actionButtonPublishTitle.defaultMessage })).not.toBeInTheDocument();
+
+      const videoButton = getByRole('button', {
+        name: new RegExp(`${addComponentMessages.buttonText.defaultMessage} Video`, 'i'),
+      });
+
+      userEvent.click(videoButton);
+      expect(mockedUsedNavigate).toHaveBeenCalled();
+      expect(mockedUsedNavigate).toHaveBeenCalledWith(`/course/${courseKey}/editor/video/${locator}`);
+    });
+
+    axiosMock
+      .onGet(getCourseUnitApiUrl(blockId))
+      .reply(200, courseUnitIndexMock);
+
+    await executeThunk(editCourseUnitVisibilityAndData(blockId, PUBLISH_TYPES.makePublic, true), store.dispatch);
+
+    // after creating video xblock, the sidebar status changes to Draft (unpublished changes)
+    expect(getByText(sidebarMessages.sidebarTitleDraftUnpublishedChanges.defaultMessage)).toBeInTheDocument();
+    expect(getByText(sidebarMessages.visibilityStaffAndLearnersTitle.defaultMessage)).toBeInTheDocument();
+    expect(getByText(sidebarMessages.releaseStatusTitle.defaultMessage)).toBeInTheDocument();
+    expect(getByText(sidebarMessages.sidebarBodyNote.defaultMessage)).toBeInTheDocument();
+    expect(getByText(sidebarMessages.visibilityWillBeVisibleToTitle.defaultMessage)).toBeInTheDocument();
+    expect(getByText(sidebarMessages.visibilityCheckboxTitle.defaultMessage)).toBeInTheDocument();
+    expect(getByText(sidebarMessages.actionButtonPublishTitle.defaultMessage)).toBeInTheDocument();
+    expect(getByText(sidebarMessages.actionButtonDiscardChangesTitle.defaultMessage)).toBeInTheDocument();
+    expect(getByText(courseUnitIndexMock.release_date)).toBeInTheDocument();
+    expect(getByText(
+      sidebarMessages.publishInfoDraftSaved.defaultMessage
+        .replace('{editedOn}', courseUnitIndexMock.edited_on)
+        .replace('{editedBy}', courseUnitIndexMock.edited_by),
+    )).toBeInTheDocument();
+    expect(getByText(
+      sidebarMessages.releaseInfoWithSection.defaultMessage
+        .replace('{sectionName}', courseUnitIndexMock.release_date_from),
+    )).toBeInTheDocument();
+  });
+
+  it('renders course unit details for a draft with unpublished changes', async () => {
+    const { getByText } = render(<RootWrapper />);
+
+    await waitFor(() => {
+      expect(getByText(sidebarMessages.sidebarTitleDraftUnpublishedChanges.defaultMessage)).toBeInTheDocument();
+      expect(getByText(sidebarMessages.visibilityStaffAndLearnersTitle.defaultMessage)).toBeInTheDocument();
+      expect(getByText(sidebarMessages.releaseStatusTitle.defaultMessage)).toBeInTheDocument();
+      expect(getByText(sidebarMessages.sidebarBodyNote.defaultMessage)).toBeInTheDocument();
+      expect(getByText(sidebarMessages.visibilityWillBeVisibleToTitle.defaultMessage)).toBeInTheDocument();
+      expect(getByText(sidebarMessages.visibilityCheckboxTitle.defaultMessage)).toBeInTheDocument();
+      expect(getByText(sidebarMessages.actionButtonPublishTitle.defaultMessage)).toBeInTheDocument();
+      expect(getByText(sidebarMessages.actionButtonDiscardChangesTitle.defaultMessage)).toBeInTheDocument();
+      expect(getByText(courseUnitIndexMock.release_date)).toBeInTheDocument();
+      expect(getByText(
+        sidebarMessages.publishInfoDraftSaved.defaultMessage
+          .replace('{editedOn}', courseUnitIndexMock.edited_on)
+          .replace('{editedBy}', courseUnitIndexMock.edited_by),
+      )).toBeInTheDocument();
+      expect(getByText(
+        sidebarMessages.releaseInfoWithSection.defaultMessage
+          .replace('{sectionName}', courseUnitIndexMock.release_date_from),
+      )).toBeInTheDocument();
+    });
+  });
+
+  it('renders course unit details in the sidebar', async () => {
+    const { getByText } = render(<RootWrapper />);
+    const courseUnitLocationId = extractCourseUnitId(courseUnitIndexMock.id);
+
+    await waitFor(() => {
+      expect(getByText(sidebarMessages.sidebarHeaderUnitLocationTitle.defaultMessage)).toBeInTheDocument();
+      expect(getByText(sidebarMessages.unitLocationTitle.defaultMessage)).toBeInTheDocument();
+      expect(getByText(courseUnitLocationId)).toBeInTheDocument();
+      expect(getByText(sidebarMessages.unitLocationDescription.defaultMessage
+        .replace('{id}', courseUnitLocationId))).toBeInTheDocument();
+    });
+  });
+
+  it('should display a warning alert for unpublished course unit version', async () => {
+    render(<RootWrapper />);
+
+    await waitFor(() => {
+      const unpublishedAlert = screen.getAllByRole('alert').find(
+        (el) => el.classList.contains('alert-content'),
+      );
+      expect(unpublishedAlert).toHaveTextContent(messages.alertUnpublishedVersion.defaultMessage);
+      expect(unpublishedAlert).toHaveClass('alert-warning');
+    });
+  });
+
+  it('should not display an unpublished alert for a course unit with explicit staff lock and unpublished status', async () => {
+    render(<RootWrapper />);
+
+    axiosMock
+      .onGet(getCourseUnitApiUrl(courseId))
+      .reply(200, {
+        ...courseUnitIndexMock,
+        currently_visible_to_students: false,
+      });
+
+    await executeThunk(fetchCourseUnitQuery(courseId), store.dispatch);
+
+    await waitFor(() => {
+      const alert = screen.queryAllByRole('alert').find(
+        (el) => el.classList.contains('alert-content'),
+      );
+      expect(alert).toBeUndefined();
+    });
+  });
+
+  it('should toggle visibility from sidebar and update course unit state accordingly', async () => {
+    const { getByRole, getByTestId } = render(<RootWrapper />);
+    let courseUnitSidebar;
+    let draftUnpublishedChangesHeading;
+    let visibilityCheckbox;
+
+    await waitFor(() => {
+      courseUnitSidebar = getByTestId('course-unit-sidebar');
+
+      draftUnpublishedChangesHeading = within(courseUnitSidebar)
+        .getByText(sidebarMessages.sidebarTitleDraftUnpublishedChanges.defaultMessage);
+      expect(draftUnpublishedChangesHeading).toBeInTheDocument();
+
+      visibilityCheckbox = within(courseUnitSidebar)
+        .getByLabelText(sidebarMessages.visibilityCheckboxTitle.defaultMessage);
+      expect(visibilityCheckbox).not.toBeChecked();
+
+      userEvent.click(visibilityCheckbox);
+    });
+
+    axiosMock
+      .onPost(getXBlockBaseApiUrl(blockId), {
+        publish: PUBLISH_TYPES.republish,
+        metadata: { visible_to_staff_only: true, group_access: null },
+      })
+      .reply(200, { dummy: 'value' });
+    axiosMock
+      .onGet(getCourseUnitApiUrl(blockId))
+      .reply(200, {
+        ...courseUnitIndexMock,
+        visibility_state: UNIT_VISIBILITY_STATES.staffOnly,
+        has_explicit_staff_lock: true,
+      });
+
+    await executeThunk(editCourseUnitVisibilityAndData(blockId, PUBLISH_TYPES.republish, true), store.dispatch);
+
+    expect(visibilityCheckbox).toBeChecked();
+    expect(within(courseUnitSidebar)
+      .getByText(sidebarMessages.sidebarTitleVisibleToStaffOnly.defaultMessage)).toBeInTheDocument();
+    expect(within(courseUnitSidebar)
+      .getByText(sidebarMessages.visibilityStaffOnlyTitle.defaultMessage)).toBeInTheDocument();
+
+    userEvent.click(visibilityCheckbox);
+
+    const modalNotification = getByRole('dialog');
+    const makeVisibilityBtn = within(modalNotification).getByRole('button', { name: sidebarMessages.modalMakeVisibilityActionButtonText.defaultMessage });
+    const cancelBtn = within(modalNotification).getByRole('button', { name: sidebarMessages.modalMakeVisibilityCancelButtonText.defaultMessage });
+    const headingElement = within(modalNotification).getByRole('heading', { name: sidebarMessages.modalMakeVisibilityTitle.defaultMessage, class: 'pgn__modal-title' });
+
+    expect(makeVisibilityBtn).toBeInTheDocument();
+    expect(cancelBtn).toBeInTheDocument();
+    expect(headingElement).toBeInTheDocument();
+    expect(within(modalNotification)
+      .getByText(sidebarMessages.modalMakeVisibilityDescription.defaultMessage)).toBeInTheDocument();
+
+    userEvent.click(makeVisibilityBtn);
+
+    axiosMock
+      .onPost(getXBlockBaseApiUrl(blockId), {
+        publish: PUBLISH_TYPES.republish,
+        metadata: { visible_to_staff_only: null, group_access: null },
+      })
+      .reply(200, { dummy: 'value' });
+    axiosMock
+      .onGet(getCourseUnitApiUrl(blockId))
+      .reply(200, courseUnitIndexMock);
+
+    await executeThunk(editCourseUnitVisibilityAndData(blockId, PUBLISH_TYPES.republish, null), store.dispatch);
+
+    expect(within(courseUnitSidebar)
+      .getByText(sidebarMessages.visibilityStaffAndLearnersTitle.defaultMessage)).toBeInTheDocument();
+    expect(visibilityCheckbox).not.toBeChecked();
+    expect(draftUnpublishedChangesHeading).toBeInTheDocument();
+  });
+
+  it('should publish course unit after click on the "Publish" button', async () => {
+    const { getByTestId } = render(<RootWrapper />);
+    let courseUnitSidebar;
+    let publishBtn;
+
+    await waitFor(() => {
+      courseUnitSidebar = getByTestId('course-unit-sidebar');
+      publishBtn = within(courseUnitSidebar).queryByRole('button', { name: sidebarMessages.actionButtonPublishTitle.defaultMessage });
+      expect(publishBtn).toBeInTheDocument();
+
+      userEvent.click(publishBtn);
+    });
+
+    axiosMock
+      .onPost(getXBlockBaseApiUrl(blockId), {
+        publish: PUBLISH_TYPES.makePublic,
+      })
+      .reply(200, { dummy: 'value' });
+    axiosMock
+      .onGet(getCourseUnitApiUrl(blockId))
+      .reply(200, {
+        ...courseUnitIndexMock,
+        visibility_state: UNIT_VISIBILITY_STATES.live,
+        has_changes: false,
+        published_by: userName,
+      });
+
+    await executeThunk(editCourseUnitVisibilityAndData(blockId, PUBLISH_TYPES.makePublic, true), store.dispatch);
+
+    expect(within(courseUnitSidebar)
+      .getByText(sidebarMessages.sidebarTitlePublishedAndLive.defaultMessage)).toBeInTheDocument();
+    expect(within(courseUnitSidebar).getByText(
+      sidebarMessages.publishLastPublished.defaultMessage
+        .replace('{publishedOn}', courseUnitIndexMock.published_on)
+        .replace('{publishedBy}', userName),
+    )).toBeInTheDocument();
+    expect(publishBtn).not.toBeInTheDocument();
+  });
+
+  it('should discard changes after click on the "Discard changes" button', async () => {
+    const { getByTestId, getByRole } = render(<RootWrapper />);
+    let courseUnitSidebar;
+    let discardChangesBtn;
+
+    await waitFor(() => {
+      courseUnitSidebar = getByTestId('course-unit-sidebar');
+
+      const draftUnpublishedChangesHeading = within(courseUnitSidebar)
+        .getByText(sidebarMessages.sidebarTitleDraftUnpublishedChanges.defaultMessage);
+      expect(draftUnpublishedChangesHeading).toBeInTheDocument();
+      discardChangesBtn = within(courseUnitSidebar).queryByRole('button', { name: sidebarMessages.actionButtonDiscardChangesTitle.defaultMessage });
+      expect(discardChangesBtn).toBeInTheDocument();
+
+      userEvent.click(discardChangesBtn);
+
+      const modalNotification = getByRole('dialog');
+      expect(modalNotification).toBeInTheDocument();
+      expect(within(modalNotification)
+        .getByText(sidebarMessages.modalDiscardUnitChangesDescription.defaultMessage)).toBeInTheDocument();
+      expect(within(modalNotification)
+        .getByText(sidebarMessages.modalDiscardUnitChangesCancelButtonText.defaultMessage)).toBeInTheDocument();
+      const headingElement = within(modalNotification).getByRole('heading', { name: sidebarMessages.modalDiscardUnitChangesTitle.defaultMessage, class: 'pgn__modal-title' });
+      expect(headingElement).toBeInTheDocument();
+      const actionBtn = within(modalNotification).getByRole('button', { name: sidebarMessages.modalDiscardUnitChangesActionButtonText.defaultMessage });
+      expect(actionBtn).toBeInTheDocument();
+
+      userEvent.click(actionBtn);
+    });
+
+    axiosMock
+      .onPost(getXBlockBaseApiUrl(blockId), {
+        publish: PUBLISH_TYPES.discardChanges,
+      })
+      .reply(200, { dummy: 'value' });
+    axiosMock
+      .onGet(getCourseUnitApiUrl(blockId))
+      .reply(200, {
+        ...courseUnitIndexMock, published: true, has_changes: false,
+      });
+
+    await executeThunk(editCourseUnitVisibilityAndData(
+      blockId,
+      PUBLISH_TYPES.discardChanges,
+      true,
+    ), store.dispatch);
+
+    expect(within(courseUnitSidebar)
+      .getByText(sidebarMessages.sidebarTitlePublishedNotYetReleased.defaultMessage)).toBeInTheDocument();
+    expect(discardChangesBtn).not.toBeInTheDocument();
+  });
+
+  it('should toggle visibility from header configure modal and update course unit state accordingly', async () => {
+    const { getByRole, getByTestId } = render(<RootWrapper />);
+    let courseUnitSidebar;
+    let sidebarVisibilityCheckbox;
+    let modalVisibilityCheckbox;
+    let configureModal;
+    let restrictAccessSelect;
+
+    await waitFor(() => {
+      courseUnitSidebar = getByTestId('course-unit-sidebar');
+      sidebarVisibilityCheckbox = within(courseUnitSidebar)
+        .getByLabelText(sidebarMessages.visibilityCheckboxTitle.defaultMessage);
+      expect(sidebarVisibilityCheckbox).not.toBeChecked();
+
+      const headerConfigureBtn = getByRole('button', { name: /settings/i });
+      expect(headerConfigureBtn).toBeInTheDocument();
+
+      userEvent.click(headerConfigureBtn);
+      configureModal = getByTestId('configure-modal');
+      restrictAccessSelect = within(configureModal)
+        .getByRole('combobox', { name: configureModalMessages.restrictAccessTo.defaultMessage });
+      expect(within(configureModal)
+        .getByText(configureModalMessages.unitVisibility.defaultMessage)).toBeInTheDocument();
+      expect(within(configureModal)
+        .getByText(configureModalMessages.restrictAccessTo.defaultMessage)).toBeInTheDocument();
+      expect(restrictAccessSelect).toBeInTheDocument();
+      expect(restrictAccessSelect).toHaveValue('-1');
+
+      modalVisibilityCheckbox = within(configureModal)
+        .getByRole('checkbox', { name: configureModalMessages.hideFromLearners.defaultMessage });
+      expect(modalVisibilityCheckbox).not.toBeChecked();
+
+      userEvent.click(modalVisibilityCheckbox);
+      expect(modalVisibilityCheckbox).toBeChecked();
+
+      userEvent.selectOptions(restrictAccessSelect, '0');
+      const [, group1Checkbox] = within(configureModal).getAllByRole('checkbox');
+
+      userEvent.click(group1Checkbox);
+      expect(group1Checkbox).toBeChecked();
+    });
+
+    axiosMock
+      .onPost(getXBlockBaseApiUrl(courseUnitIndexMock.id), {
+        publish: null,
+        metadata: { visible_to_staff_only: true, group_access: { 50: [2] }, discussion_enabled: true },
+      })
+      .reply(200, { dummy: 'value' });
+    axiosMock
+      .onGet(getCourseUnitApiUrl(blockId))
+      .replyOnce(200, {
+        ...courseUnitIndexMock,
+        visibility_state: UNIT_VISIBILITY_STATES.staffOnly,
+        has_explicit_staff_lock: true,
+      });
+
+    const modalSaveBtn = within(configureModal)
+      .getByRole('button', { name: configureModalMessages.saveButton.defaultMessage });
+    userEvent.click(modalSaveBtn);
+
+    await waitFor(() => {
+      expect(sidebarVisibilityCheckbox).toBeChecked();
+      expect(within(courseUnitSidebar)
+        .getByText(sidebarMessages.sidebarTitleVisibleToStaffOnly.defaultMessage)).toBeInTheDocument();
+      expect(within(courseUnitSidebar)
+        .getByText(sidebarMessages.visibilityStaffOnlyTitle.defaultMessage)).toBeInTheDocument();
+    });
+  });
+
+  it('shows the Tags sidebar when enabled', async () => {
+    setConfig({
+      ...getConfig(),
+      ENABLE_TAGGING_TAXONOMY_PAGES: 'true',
+    });
+    const { getByText } = render(<RootWrapper />);
+    await waitFor(() => { expect(getByText('Unit tags')).toBeInTheDocument(); });
+  });
+
+  it('hides the Tags sidebar when not enabled', async () => {
+    setConfig({
+      ...getConfig(),
+      ENABLE_TAGGING_TAXONOMY_PAGES: 'false',
+    });
+    const { queryByText } = render(<RootWrapper />);
+    await waitFor(() => { expect(queryByText('Unit tags')).not.toBeInTheDocument(); });
+  });
+
+  describe('Copy paste functionality', () => {
+    it('should copy a unit, paste it as a new unit, and update the course section vertical data', async () => {
+      const {
+        getAllByTestId, getByRole,
+      } = render(<RootWrapper />);
+
+      axiosMock
+        .onGet(getCourseUnitApiUrl(courseId))
+        .reply(200, {
+          ...courseUnitIndexMock,
+          enable_copy_paste_units: true,
+        });
+
+      axiosMock
+        .onGet(getCourseSectionVerticalApiUrl(blockId))
+        .reply(200, {
+          ...courseSectionVerticalMock,
+          user_clipboard: clipboardUnit,
+        });
+
+      await executeThunk(fetchCourseUnitQuery(courseId), store.dispatch);
+      await executeThunk(fetchCourseSectionVerticalData(blockId), store.dispatch);
+
+      userEvent.click(getByRole('button', { name: sidebarMessages.actionButtonCopyUnitTitle.defaultMessage }));
+      userEvent.click(getByRole('button', { name: courseSequenceMessages.pasteAsNewUnitLink.defaultMessage }));
+
+      let units = null;
+      const updatedCourseSectionVerticalData = cloneDeep(courseSectionVerticalMock);
+      const updatedAncestorsChild = updatedCourseSectionVerticalData.xblock_info.ancestor_info.ancestors[0];
+      set(updatedCourseSectionVerticalData, 'xblock_info.ancestor_info.ancestors[0].child_info.children', [
+        ...updatedAncestorsChild.child_info.children,
+        courseUnitMock,
+      ]);
+
+      await waitFor(() => {
+        units = getAllByTestId('course-unit-btn');
+        const courseUnits = courseSectionVerticalMock.xblock_info.ancestor_info.ancestors[0].child_info.children;
+        expect(units).toHaveLength(courseUnits.length);
+      });
+
+      axiosMock
+        .onPost(postXBlockBaseApiUrl(), postXBlockBody)
+        .reply(200, { dummy: 'value' });
+      axiosMock
+        .onGet(getCourseSectionVerticalApiUrl(blockId))
+        .reply(200, {
+          ...updatedCourseSectionVerticalData,
+        });
+
+      await executeThunk(fetchCourseSectionVerticalData(blockId), store.dispatch);
+
+      units = getAllByTestId('course-unit-btn');
+      const updatedCourseUnits = updatedCourseSectionVerticalData
+        .xblock_info.ancestor_info.ancestors[0].child_info.children;
+
+      expect(units.length).toEqual(updatedCourseUnits.length);
+      expect(mockedUsedNavigate).toHaveBeenCalled();
+      expect(mockedUsedNavigate)
+        .toHaveBeenCalledWith(`/course/${courseId}/container/${blockId}/${updatedAncestorsChild.id}`, { replace: true });
+    });
+
+    it('displays a notification about new files after pasting a component', async () => {
+      const {
+        queryByTestId, getByTestId, getByRole,
+      } = render(<RootWrapper />);
+
+      axiosMock
+        .onGet(getCourseUnitApiUrl(courseId))
+        .reply(200, {
+          ...courseUnitIndexMock,
+          enable_copy_paste_units: true,
+        });
+
+      axiosMock
+        .onGet(getCourseSectionVerticalApiUrl(blockId))
+        .reply(200, {
+          ...courseSectionVerticalMock,
+          user_clipboard: clipboardUnit,
+        });
+
+      await executeThunk(fetchCourseUnitQuery(courseId), store.dispatch);
+      await executeThunk(fetchCourseSectionVerticalData(blockId), store.dispatch);
+
+      userEvent.click(getByRole('button', { name: sidebarMessages.actionButtonCopyUnitTitle.defaultMessage }));
+      userEvent.click(getByRole('button', { name: courseSequenceMessages.pasteAsNewUnitLink.defaultMessage }));
+
+      const updatedCourseSectionVerticalData = cloneDeep(courseSectionVerticalMock);
+      const updatedAncestorsChild = updatedCourseSectionVerticalData.xblock_info.ancestor_info.ancestors[0];
+      set(updatedCourseSectionVerticalData, 'xblock_info.ancestor_info.ancestors[0].child_info.children', [
+        ...updatedAncestorsChild.child_info.children,
+        courseUnitMock,
+      ]);
+
+      axiosMock
+        .onPost(postXBlockBaseApiUrl(postXBlockBody))
+        .reply(200, clipboardMockResponse);
+      axiosMock
+        .onGet(getCourseSectionVerticalApiUrl(blockId))
+        .reply(200, {
+          ...updatedCourseSectionVerticalData,
+        });
+
+      global.localStorage.setItem('staticFileNotices', JSON.stringify(clipboardMockResponse.staticFileNotices));
+      await executeThunk(fetchCourseSectionVerticalData(blockId), store.dispatch);
+      await executeThunk(createNewCourseXBlock(camelCaseObject(postXBlockBody), null, blockId), store.dispatch);
+      const newFilesAlert = getByTestId('has-new-files-alert');
+
+      expect(within(newFilesAlert)
+        .getByText(pasteNotificationsMessages.hasNewFilesTitle.defaultMessage)).toBeInTheDocument();
+      expect(within(newFilesAlert)
+        .getByText(pasteNotificationsMessages.hasNewFilesDescription.defaultMessage)).toBeInTheDocument();
+      expect(within(newFilesAlert)
+        .getByText(pasteNotificationsMessages.hasNewFilesButtonText.defaultMessage)).toBeInTheDocument();
+      clipboardMockResponse.staticFileNotices.newFiles.forEach((fileName) => {
+        expect(within(newFilesAlert).getByText(fileName)).toBeInTheDocument();
+      });
+
+      userEvent.click(within(newFilesAlert).getByText(/Dismiss/i));
+
+      expect(queryByTestId('has-new-files-alert')).toBeNull();
+    });
+
+    it('displays a notification about conflicting errors after pasting a component', async () => {
+      const {
+        queryByTestId, getByTestId, getByRole,
+      } = render(<RootWrapper />);
+
+      axiosMock
+        .onGet(getCourseUnitApiUrl(courseId))
+        .reply(200, {
+          ...courseUnitIndexMock,
+          enable_copy_paste_units: true,
+        });
+
+      axiosMock
+        .onGet(getCourseSectionVerticalApiUrl(blockId))
+        .reply(200, {
+          ...courseSectionVerticalMock,
+          user_clipboard: clipboardUnit,
+        });
+
+      await executeThunk(fetchCourseUnitQuery(courseId), store.dispatch);
+      await executeThunk(fetchCourseSectionVerticalData(blockId), store.dispatch);
+
+      userEvent.click(getByRole('button', { name: sidebarMessages.actionButtonCopyUnitTitle.defaultMessage }));
+      userEvent.click(getByRole('button', { name: courseSequenceMessages.pasteAsNewUnitLink.defaultMessage }));
+
+      const updatedCourseSectionVerticalData = cloneDeep(courseSectionVerticalMock);
+      const updatedAncestorsChild = updatedCourseSectionVerticalData.xblock_info.ancestor_info.ancestors[0];
+      set(updatedCourseSectionVerticalData, 'xblock_info.ancestor_info.ancestors[0].child_info.children', [
+        ...updatedAncestorsChild.child_info.children,
+        courseUnitMock,
+      ]);
+
+      axiosMock
+        .onPost(postXBlockBaseApiUrl(postXBlockBody))
+        .reply(200, clipboardMockResponse);
+      axiosMock
+        .onGet(getCourseSectionVerticalApiUrl(blockId))
+        .reply(200, {
+          ...updatedCourseSectionVerticalData,
+        });
+
+      global.localStorage.setItem('staticFileNotices', JSON.stringify(clipboardMockResponse.staticFileNotices));
+      await executeThunk(fetchCourseSectionVerticalData(blockId), store.dispatch);
+      await executeThunk(createNewCourseXBlock(camelCaseObject(postXBlockBody), null, blockId), store.dispatch);
+      const conflictingErrorsAlert = getByTestId('has-conflicting-errors-alert');
+
+      expect(within(conflictingErrorsAlert)
+        .getByText(pasteNotificationsMessages.hasConflictingErrorsTitle.defaultMessage)).toBeInTheDocument();
+      expect(within(conflictingErrorsAlert)
+        .getByText(pasteNotificationsMessages.hasConflictingErrorsDescription.defaultMessage)).toBeInTheDocument();
+      expect(within(conflictingErrorsAlert)
+        .getByText(pasteNotificationsMessages.hasConflictingErrorsButtonText.defaultMessage)).toBeInTheDocument();
+      clipboardMockResponse.staticFileNotices.conflictingFiles.forEach((fileName) => {
+        expect(within(conflictingErrorsAlert).getByText(fileName)).toBeInTheDocument();
+      });
+
+      userEvent.click(within(conflictingErrorsAlert).getByText(/Dismiss/i));
+
+      expect(queryByTestId('has-conflicting-errors-alert')).toBeNull();
+    });
+
+    it('displays a notification about error files after pasting a component', async () => {
+      const {
+        queryByTestId, getByTestId, getByRole,
+      } = render(<RootWrapper />);
+
+      axiosMock
+        .onGet(getCourseUnitApiUrl(courseId))
+        .reply(200, {
+          ...courseUnitIndexMock,
+          enable_copy_paste_units: true,
+        });
+
+      axiosMock
+        .onGet(getCourseSectionVerticalApiUrl(blockId))
+        .reply(200, {
+          ...courseSectionVerticalMock,
+          user_clipboard: clipboardUnit,
+        });
+
+      await executeThunk(fetchCourseUnitQuery(courseId), store.dispatch);
+      await executeThunk(fetchCourseSectionVerticalData(blockId), store.dispatch);
+
+      userEvent.click(getByRole('button', { name: sidebarMessages.actionButtonCopyUnitTitle.defaultMessage }));
+      userEvent.click(getByRole('button', { name: courseSequenceMessages.pasteAsNewUnitLink.defaultMessage }));
+
+      const updatedCourseSectionVerticalData = cloneDeep(courseSectionVerticalMock);
+      const updatedAncestorsChild = updatedCourseSectionVerticalData.xblock_info.ancestor_info.ancestors[0];
+      set(updatedCourseSectionVerticalData, 'xblock_info.ancestor_info.ancestors[0].child_info.children', [
+        ...updatedAncestorsChild.child_info.children,
+        courseUnitMock,
+      ]);
+
+      axiosMock
+        .onPost(postXBlockBaseApiUrl(postXBlockBody))
+        .reply(200, clipboardMockResponse);
+      axiosMock
+        .onGet(getCourseSectionVerticalApiUrl(blockId))
+        .reply(200, {
+          ...updatedCourseSectionVerticalData,
+        });
+
+      global.localStorage.setItem('staticFileNotices', JSON.stringify(clipboardMockResponse.staticFileNotices));
+      await executeThunk(fetchCourseSectionVerticalData(blockId), store.dispatch);
+      await executeThunk(createNewCourseXBlock(camelCaseObject(postXBlockBody), null, blockId), store.dispatch);
+      const errorFilesAlert = getByTestId('has-error-files-alert');
+
+      expect(within(errorFilesAlert)
+        .getByText(pasteNotificationsMessages.hasErrorsTitle.defaultMessage)).toBeInTheDocument();
+      expect(within(errorFilesAlert)
+        .getByText(pasteNotificationsMessages.hasErrorsDescription.defaultMessage)).toBeInTheDocument();
+
+      userEvent.click(within(errorFilesAlert).getByText(/Dismiss/i));
+
+      expect(queryByTestId('has-error-files')).toBeNull();
+    });
+
+    it('should hide the "Paste component" block if canPasteComponent is false', async () => {
+      const { queryByText, queryByRole } = render(<RootWrapper />);
+
+      axiosMock
+        .onGet(getCourseVerticalChildrenApiUrl(blockId))
+        .reply(200, {
+          ...courseVerticalChildrenMock,
+          canPasteComponent: false,
+        });
+
+      await executeThunk(fetchCourseVerticalChildrenData(blockId), store.dispatch);
+
+      expect(queryByRole('button', {
+        name: messages.pasteButtonText.defaultMessage,
+      })).not.toBeInTheDocument();
+      expect(queryByText(
+        pasteComponentMessages.pasteButtonWhatsInClipboardText.defaultMessage,
+      )).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Move functionality', () => {
+    const requestData = {
+      sourceLocator: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@867dddb6f55d410caaa9c1eb9c6743ec',
+      targetParentLocator: 'block-v1:edX+DemoX+Demo_Course+type@course+block@course',
+      title: 'Getting Started',
+      currentParentLocator: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@19a30717eff543078a5d94ae9d6c18a5',
+      isMoving: true,
+      callbackFn: jest.fn(),
+    };
+    const messageEvent = new MessageEvent('message', {
+      data: {
+        type: messageTypes.showMoveXBlockModal,
+        payload: {
+          sourceXBlockInfo: {
+            id: requestData.sourceLocator,
+            displayName: requestData.title,
+          },
+          sourceParentXBlockInfo: {
+            id: requestData.currentParentLocator,
+            category: 'vertical',
+            hasChildren: true,
+          },
+        },
+      },
+      origin: '*',
+    });
+
+    it('should display "Move Modal" on receive trigger message', async () => {
+      const {
+        getByText,
+        getByRole,
+      } = render(<RootWrapper />);
+
+      await act(async () => {
+        await waitFor(() => {
+          expect(getByText(unitDisplayName))
+            .toBeInTheDocument();
+        });
+
+        axiosMock
+          .onGet(getCourseOutlineInfoUrl(courseId))
+          .reply(200, courseOutlineInfoMock);
+        await executeThunk(getCourseOutlineInfoQuery(courseId), store.dispatch);
+
+        window.dispatchEvent(messageEvent);
+      });
+
+      expect(getByText(
+        moveModalMessages.moveModalTitle.defaultMessage.replace('{displayName}', requestData.title),
+      )).toBeInTheDocument();
+      expect(getByRole('button', { name: moveModalMessages.moveModalSubmitButton.defaultMessage })).toBeInTheDocument();
+      expect(getByRole('button', { name: moveModalMessages.moveModalCancelButton.defaultMessage })).toBeInTheDocument();
+    });
+
+    it('should navigates to xBlock current unit', async () => {
+      const {
+        getByText,
+        getByRole,
+      } = render(<RootWrapper />);
+
+      await act(async () => {
+        await waitFor(() => {
+          expect(getByText(unitDisplayName))
+            .toBeInTheDocument();
+        });
+
+        axiosMock
+          .onGet(getCourseOutlineInfoUrl(courseId))
+          .reply(200, courseOutlineInfoMock);
+        await executeThunk(getCourseOutlineInfoQuery(courseId), store.dispatch);
+
+        window.dispatchEvent(messageEvent);
+      });
+
+      expect(getByText(
+        moveModalMessages.moveModalTitle.defaultMessage.replace('{displayName}', requestData.title),
+      )).toBeInTheDocument();
+
+      const currentSection = courseOutlineInfoMock.child_info.children[1];
+      const currentSectionItemBtn = getByRole('button', {
+        name: `${currentSection.display_name} ${moveModalMessages.moveModalOutlineItemCurrentLocationText.defaultMessage} ${moveModalMessages.moveModalOutlineItemViewText.defaultMessage}`,
+      });
+      expect(currentSectionItemBtn).toBeInTheDocument();
+      userEvent.click(currentSectionItemBtn);
+
+      await waitFor(() => {
+        const currentSubsection = currentSection.child_info.children[0];
+        const currentSubsectionItemBtn = getByRole('button', {
+          name: `${currentSubsection.display_name} ${moveModalMessages.moveModalOutlineItemCurrentLocationText.defaultMessage} ${moveModalMessages.moveModalOutlineItemViewText.defaultMessage}`,
+        });
+        expect(currentSubsectionItemBtn).toBeInTheDocument();
+        userEvent.click(currentSubsectionItemBtn);
+      });
+
+      await waitFor(() => {
+        const currentComponentLocationText = getByText(
+          moveModalMessages.moveModalOutlineItemCurrentComponentLocationText.defaultMessage,
+        );
+        expect(currentComponentLocationText).toBeInTheDocument();
+      });
+    });
+
+    it('should allow move operation and handles it successfully', async () => {
+      const {
+        getByText,
+        getByRole,
+      } = render(<RootWrapper />);
+
+      axiosMock
+        .onPatch(postXBlockBaseApiUrl())
+        .reply(200, {});
+
+      axiosMock
+        .onGet(getCourseUnitApiUrl(blockId))
+        .reply(200, {});
+
+      await act(async () => {
+        await waitFor(() => {
+          expect(getByText(unitDisplayName))
+            .toBeInTheDocument();
+        });
+
+        axiosMock
+          .onGet(getCourseOutlineInfoUrl(courseId))
+          .reply(200, courseOutlineInfoMock);
+        await executeThunk(getCourseOutlineInfoQuery(courseId), store.dispatch);
+
+        window.dispatchEvent(messageEvent);
+      });
+
+      expect(getByText(
+        moveModalMessages.moveModalTitle.defaultMessage.replace('{displayName}', requestData.title),
+      )).toBeInTheDocument();
+
+      const currentSection = courseOutlineInfoMock.child_info.children[1];
+      const currentSectionItemBtn = getByRole('button', {
+        name: `${currentSection.display_name} ${moveModalMessages.moveModalOutlineItemCurrentLocationText.defaultMessage} ${moveModalMessages.moveModalOutlineItemViewText.defaultMessage}`,
+      });
+      expect(currentSectionItemBtn).toBeInTheDocument();
+      userEvent.click(currentSectionItemBtn);
+
+      const currentSubsection = currentSection.child_info.children[1];
+      await waitFor(() => {
+        const currentSubsectionItemBtn = getByRole('button', {
+          name: `${currentSubsection.display_name} ${moveModalMessages.moveModalOutlineItemViewText.defaultMessage}`,
+        });
+        expect(currentSubsectionItemBtn).toBeInTheDocument();
+        userEvent.click(currentSubsectionItemBtn);
+      });
+
+      await waitFor(() => {
+        const currentUnit = currentSubsection.child_info.children[0];
+        const currentUnitItemBtn = getByRole('button', {
+          name: `${currentUnit.display_name} ${moveModalMessages.moveModalOutlineItemViewText.defaultMessage}`,
+        });
+        expect(currentUnitItemBtn).toBeInTheDocument();
+        userEvent.click(currentUnitItemBtn);
+      });
+
+      const moveModalBtn = getByRole('button', {
+        name: moveModalMessages.moveModalSubmitButton.defaultMessage,
+      });
+      expect(moveModalBtn).toBeInTheDocument();
+      expect(moveModalBtn).not.toBeDisabled();
+      userEvent.click(moveModalBtn);
+
+      await waitFor(() => {
+        expect(window.scrollTo).toHaveBeenCalledWith({ top: 0, behavior: 'smooth' });
+        expect(window.scrollTo).toHaveBeenCalledTimes(1);
+      });
+    });
+
+    it('should display "Move Confirmation" alert after moving and undo operations', async () => {
+      const {
+        queryByRole,
+        getByText,
+      } = render(<RootWrapper />);
+
+      axiosMock
+        .onPatch(postXBlockBaseApiUrl())
+        .reply(200, {});
+
+      await executeThunk(patchUnitItemQuery({
+        sourceLocator: requestData.sourceLocator,
+        targetParentLocator: requestData.targetParentLocator,
+        title: requestData.title,
+        currentParentLocator: requestData.currentParentLocator,
+        isMoving: requestData.isMoving,
+        callbackFn: requestData.callbackFn,
+      }), store.dispatch);
+
+      const dismissButton = queryByRole('button', {
+        name: /dismiss/i, hidden: true,
+      });
+      const undoButton = queryByRole('button', {
+        name: messages.undoMoveButton.defaultMessage, hidden: true,
+      });
+      const newLocationButton = queryByRole('button', {
+        name: messages.newLocationButton.defaultMessage, hidden: true,
+      });
+
+      expect(getByText(messages.alertMoveSuccessTitle.defaultMessage)).toBeInTheDocument();
+      expect(getByText(`${requestData.title} has been moved`)).toBeInTheDocument();
+      expect(dismissButton).toBeInTheDocument();
+      expect(undoButton).toBeInTheDocument();
+      expect(newLocationButton).toBeInTheDocument();
+
+      userEvent.click(undoButton);
+
+      await waitFor(() => {
+        expect(getByText(messages.alertMoveCancelTitle.defaultMessage)).toBeInTheDocument();
+      });
+      expect(getByText(
+        messages.alertMoveCancelDescription.defaultMessage.replace('{title}', requestData.title),
+      )).toBeInTheDocument();
+      expect(dismissButton).toBeInTheDocument();
+      expect(undoButton).not.toBeInTheDocument();
+      expect(newLocationButton).not.toBeInTheDocument();
+    });
+
+    it('should navigate to new location by button click', async () => {
+      const {
+        queryByRole,
+      } = render(<RootWrapper />);
+
+      axiosMock
+        .onPatch(postXBlockBaseApiUrl())
+        .reply(200, {});
+
+      await executeThunk(patchUnitItemQuery({
+        sourceLocator: requestData.sourceLocator,
+        targetParentLocator: requestData.targetParentLocator,
+        title: requestData.title,
+        currentParentLocator: requestData.currentParentLocator,
+        isMoving: requestData.isMoving,
+        callbackFn: requestData.callbackFn,
+      }), store.dispatch);
+
+      const newLocationButton = queryByRole('button', {
+        name: messages.newLocationButton.defaultMessage, hidden: true,
+      });
+      userEvent.click(newLocationButton);
+      expect(mockedUsedNavigate).toHaveBeenCalledWith(
+        `/course/${courseId}/container/${blockId}/${requestData.currentParentLocator}`,
+        { replace: true },
+      );
+    });
+  });
+});
diff --git a/src/course-unit/__mocks__/clipboardResponse.js b/src/course-unit/__mocks__/clipboardResponse.js
new file mode 100644
index 0000000000..1d8a5a64d6
--- /dev/null
+++ b/src/course-unit/__mocks__/clipboardResponse.js
@@ -0,0 +1,9 @@
+export default {
+  locator: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_0270f6de40fc',
+  courseKey: 'course-v1:edX+L153+3T2023',
+  staticFileNotices: {
+    newFiles: ['new_file_1', 'new_file_2', 'new_file_3'],
+    conflictingFiles: ['conflicting_file_1', 'conflicting_file_2', 'conflicting_file_3'],
+    errorFiles: ['error_file_1', 'error_file_2', 'error_file_3'],
+  },
+};
diff --git a/src/course-unit/__mocks__/courseCreateXblock.js b/src/course-unit/__mocks__/courseCreateXblock.js
new file mode 100644
index 0000000000..7da6d4906f
--- /dev/null
+++ b/src/course-unit/__mocks__/courseCreateXblock.js
@@ -0,0 +1,4 @@
+module.exports = {
+  locator: 'block-v1:edX+L153+3T2023+type@drag-and-drop-v2+block@dc52e3cf8e6145e39ba5c1ff4888db4b',
+  courseKey: 'course-v1:edX+L153+3T2023',
+};
diff --git a/src/course-unit/__mocks__/courseOutlineInfo.js b/src/course-unit/__mocks__/courseOutlineInfo.js
new file mode 100644
index 0000000000..a5646c6fee
--- /dev/null
+++ b/src/course-unit/__mocks__/courseOutlineInfo.js
@@ -0,0 +1,1683 @@
+module.exports = {
+  id: 'block-v1:edX+DemoX+Demo_Course+type@course+block@course',
+  display_name: 'Demonstration Course',
+  category: 'course',
+  has_children: true,
+  video_sharing_enabled: true,
+  video_sharing_options: 'per-video',
+  video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+  unit_level_discussions: false,
+  child_info: {
+    category: 'chapter',
+    display_name: 'Section',
+    children: [
+      {
+        id: 'block-v1:edX+DemoX+Demo_Course+type@chapter+block@d8a6192ade314473a78242dfeedfbf5b',
+        display_name: 'Introduction',
+        category: 'chapter',
+        has_children: true,
+        video_sharing_enabled: true,
+        video_sharing_options: 'per-video',
+        video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+        child_info: {
+          category: 'sequential',
+          display_name: 'Subsection',
+          children: [
+            {
+              id: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@edx_introduction',
+              display_name: 'Demo Course Overview',
+              category: 'sequential',
+              has_children: true,
+              video_sharing_enabled: true,
+              video_sharing_options: 'per-video',
+              video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+              child_info: {
+                category: 'vertical',
+                display_name: 'Unit',
+                children: [
+                  {
+                    id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_0270f6de40fc',
+                    display_name: 'Introduction: Video and Sequences',
+                    category: 'vertical',
+                    has_children: true,
+                    video_sharing_enabled: true,
+                    video_sharing_options: 'per-video',
+                    video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                    child_info: {
+                      children: [
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@html+block@030e35c4756a4ddc8d40b95fbbfff4d4',
+                          display_name: 'Blank HTML Page',
+                          category: 'html',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@html+block@f7cc083ff66d442eafafd48152881276',
+                          display_name: '“Blank HTML Page”的副本',
+                          category: 'html',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@video+block@0b9e39477cf34507a7a48f74be381fdd',
+                          display_name: 'Welcome!',
+                          category: 'video',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@video+block@6e72ebc448694e42ac56553af74304e7',
+                          display_name: 'Video',
+                          category: 'video',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                      ],
+                    },
+                  },
+                ],
+              },
+            },
+            {
+              id: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@8c964a36521a42e3a221e7b8cf6c94fc',
+              display_name: 'Subsection',
+              category: 'sequential',
+              has_children: true,
+              video_sharing_enabled: true,
+              video_sharing_options: 'per-video',
+              video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+            },
+          ],
+        },
+      },
+      {
+        id: 'block-v1:edX+DemoX+Demo_Course+type@chapter+block@interactive_demonstrations',
+        display_name: 'Example Week 1: Getting Started',
+        category: 'chapter',
+        has_children: true,
+        video_sharing_enabled: true,
+        video_sharing_options: 'per-video',
+        video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+        child_info: {
+          category: 'sequential',
+          display_name: 'Subsection',
+          children: [
+            {
+              id: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@19a30717eff543078a5d94ae9d6c18a5',
+              display_name: 'Lesson 1 - Getting Started',
+              category: 'sequential',
+              has_children: true,
+              video_sharing_enabled: true,
+              video_sharing_options: 'per-video',
+              video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+              child_info: {
+                category: 'vertical',
+                display_name: 'Unit',
+                children: [
+                  {
+                    id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@867dddb6f55d410caaa9c1eb9c6743ec',
+                    display_name: 'Getting Started',
+                    category: 'vertical',
+                    has_children: true,
+                    video_sharing_enabled: true,
+                    video_sharing_options: 'per-video',
+                    video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                    child_info: {
+                      children: [
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@html+block@82d599b014b246c7a9b5dfc750dc08a9',
+                          display_name: 'Getting Started',
+                          category: 'html',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                      ],
+                    },
+                  },
+                  {
+                    id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@4f6c1b4e316a419ab5b6bf30e6c708e9',
+                    display_name: 'Working with Videos',
+                    category: 'vertical',
+                    has_children: true,
+                    video_sharing_enabled: true,
+                    video_sharing_options: 'per-video',
+                    video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                    child_info: {
+                      children: [
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@html+block@6bcccc2d7343416e9e03fd7325b2f232',
+                          display_name: '',
+                          category: 'html',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@video+block@7e9b434e6de3435ab99bd3fb25bde807',
+                          display_name: 'A Shared Culture',
+                          category: 'video',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@discussion+block@412dc8dbb6674014862237b23c1f643f',
+                          display_name: 'Working with Videos',
+                          category: 'discussion',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                      ],
+                    },
+                  },
+                  {
+                    id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@3dc16db8d14842e38324e95d4030b8a0',
+                    display_name: 'Videos on edX',
+                    category: 'vertical',
+                    has_children: true,
+                    video_sharing_enabled: true,
+                    video_sharing_options: 'per-video',
+                    video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                    child_info: {
+                      children: [
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@html+block@0a3b4139f51a4917a3aff9d519b1eeb6',
+                          display_name: 'Videos on edX',
+                          category: 'html',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@video+block@5c90cffecd9b48b188cbfea176bf7fe9',
+                          display_name: 'Video',
+                          category: 'video',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@discussion+block@722085be27c84ac693cfebc8ac5da700',
+                          display_name: 'Videos on edX',
+                          category: 'discussion',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                      ],
+                    },
+                  },
+                  {
+                    id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@4a1bba2a403f40bca5ec245e945b0d76',
+                    display_name: 'Video Demonstrations',
+                    category: 'vertical',
+                    has_children: true,
+                    video_sharing_enabled: true,
+                    video_sharing_options: 'per-video',
+                    video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                    child_info: {
+                      children: [
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@html+block@ed5dccf14ae94353961f46fa07217491',
+                          display_name: '',
+                          category: 'html',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@discussion+block@9f9e1373cc8243b985c8750cc8acec7d',
+                          display_name: 'Video Demonstrations',
+                          category: 'discussion',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                      ],
+                    },
+                  },
+                  {
+                    id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@256f17a44983429fb1a60802203ee4e0',
+                    display_name: 'Video Presentation Styles',
+                    category: 'vertical',
+                    has_children: true,
+                    video_sharing_enabled: true,
+                    video_sharing_options: 'per-video',
+                    video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                    child_info: {
+                      children: [
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@html+block@c2f7008c9ccf4bd09d5d800c98fb0722',
+                          display_name: '',
+                          category: 'html',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@video+block@636541acbae448d98ab484b028c9a7f6',
+                          display_name: 'Connecting a Circuit and a Circuit Diagram',
+                          category: 'video',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@discussion+block@e2cb0e0994f84b0abfa5f4ae42ed9d44',
+                          display_name: 'Video Presentation Styles',
+                          category: 'discussion',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                      ],
+                    },
+                  },
+                  {
+                    id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@e3601c0abee6427d8c17e6d6f8fdddd1',
+                    display_name: 'Interactive Questions',
+                    category: 'vertical',
+                    has_children: true,
+                    video_sharing_enabled: true,
+                    video_sharing_options: 'per-video',
+                    video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                    child_info: {
+                      children: [
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@problem+block@9cee77a606ea4c1aa5440e0ea5d0f618',
+                          display_name: 'Interactive Questions',
+                          category: 'problem',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@discussion+block@3169f89efde2452993f2f2d9bc74f5b2',
+                          display_name: '',
+                          category: 'discussion',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                      ],
+                    },
+                  },
+                  {
+                    id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@a79d59cd72034188a71d388f4954a606',
+                    display_name: 'Exciting Labs and Tools',
+                    category: 'vertical',
+                    has_children: true,
+                    video_sharing_enabled: true,
+                    video_sharing_options: 'per-video',
+                    video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                    child_info: {
+                      children: [
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@html+block@ffcd6351126d4ca984409180e41d1b51',
+                          display_name: 'Exciting Labs and Tools',
+                          category: 'html',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@discussion+block@1c8d47c425724346a7968fa1bc745dcd',
+                          display_name: 'Labs and Tools',
+                          category: 'discussion',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                      ],
+                    },
+                  },
+                  {
+                    id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@134df56c516a4a0dbb24dd5facef746e',
+                    display_name: 'Reading Assignments',
+                    category: 'vertical',
+                    has_children: true,
+                    video_sharing_enabled: true,
+                    video_sharing_options: 'per-video',
+                    video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                    child_info: {
+                      children: [
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@html+block@e0254b911fa246218bd98bbdadffef06',
+                          display_name: 'Reading Assignments',
+                          category: 'html',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@html+block@2574c523e97b477a9d72fbb37bfb995f',
+                          display_name: 'Text',
+                          category: 'html',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@problem+block@932e6f2ce8274072a355a94560216d1a',
+                          display_name: 'Perchance to Dream',
+                          category: 'problem',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@problem+block@303034da25524878a2e66fb57c91cf85',
+                          display_name: 'Attributing Blame',
+                          category: 'problem',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@discussion+block@ffa5817d49e14fec83ad6187cbe16358',
+                          display_name: 'Reading Sample',
+                          category: 'discussion',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                      ],
+                    },
+                  },
+                  {
+                    id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@d91b9e5d8bc64d57a1332d06bf2f2193',
+                    display_name: 'When Are Your Exams? ',
+                    category: 'vertical',
+                    has_children: true,
+                    video_sharing_enabled: true,
+                    video_sharing_options: 'per-video',
+                    video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                    child_info: {
+                      children: [
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@html+block@9d5104b502f24ee89c3d2f4ce9d347cf',
+                          display_name: 'When Are Your Exams? ',
+                          category: 'html',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                      ],
+                    },
+                  },
+                ],
+              },
+            },
+            {
+              id: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@basic_questions',
+              display_name: 'Homework - Question Styles',
+              category: 'sequential',
+              has_children: true,
+              video_sharing_enabled: true,
+              video_sharing_options: 'per-video',
+              video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+              child_info: {
+                category: 'vertical',
+                display_name: 'Unit',
+                children: [
+                  {
+                    id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@2152d4a4aadc4cb0af5256394a3d1fc7',
+                    display_name: 'Pointing on a Picture',
+                    category: 'vertical',
+                    has_children: true,
+                    video_sharing_enabled: true,
+                    video_sharing_options: 'per-video',
+                    video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                    child_info: {
+                      children: [
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@problem+block@c554538a57664fac80783b99d9d6da7c',
+                          display_name: 'Pointing on a Picture Component',
+                          category: 'problem',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@discussion+block@e5eac7e1a5a24f5fa7ed77bb6d136591',
+                          display_name: '',
+                          category: 'discussion',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                      ],
+                    },
+                  },
+                  {
+                    id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@47dbd5f836544e61877a483c0b75606c',
+                    display_name: 'Drag and Drop',
+                    category: 'vertical',
+                    has_children: true,
+                    video_sharing_enabled: true,
+                    video_sharing_options: 'per-video',
+                    video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                    child_info: {
+                      children: [
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@problem+block@d2e35c1d294b4ba0b3b1048615605d2a',
+                          display_name: 'Drag and Drop',
+                          category: 'problem',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@discussion+block@5ab88e67d46049b9aa694cb240c39cef',
+                          display_name: '',
+                          category: 'discussion',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                      ],
+                    },
+                  },
+                  {
+                    id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@54bb9b142c6c4c22afc62bcb628f0e68',
+                    display_name: 'Multiple Choice Questions',
+                    category: 'vertical',
+                    has_children: true,
+                    video_sharing_enabled: true,
+                    video_sharing_options: 'per-video',
+                    video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                    child_info: {
+                      children: [
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@problem+block@a0effb954cca4759994f1ac9e9434bf4',
+                          display_name: 'Multiple Choice Questions',
+                          category: 'problem',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@discussion+block@67c26b1e826e47aaa29757f62bcd1ad0',
+                          display_name: '',
+                          category: 'discussion',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                      ],
+                    },
+                  },
+                  {
+                    id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_0c92347a5c00',
+                    display_name: 'Mathematical Expressions',
+                    category: 'vertical',
+                    has_children: true,
+                    video_sharing_enabled: true,
+                    video_sharing_options: 'per-video',
+                    video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                    child_info: {
+                      children: [
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@problem+block@Sample_Algebraic_Problem',
+                          display_name: 'Mathematical Expressions',
+                          category: 'problem',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@discussion+block@870371212ba04dcf9536d7c7b8f3109e',
+                          display_name: '',
+                          category: 'discussion',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                      ],
+                    },
+                  },
+                  {
+                    id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_1fef54c2b23b',
+                    display_name: 'Chemical Equations',
+                    category: 'vertical',
+                    has_children: true,
+                    video_sharing_enabled: true,
+                    video_sharing_options: 'per-video',
+                    video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                    child_info: {
+                      children: [
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@problem+block@Sample_ChemFormula_Problem',
+                          display_name: 'Chemical Equations',
+                          category: 'problem',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@discussion+block@4d672c5893cb4f1dad0de67d2008522e',
+                          display_name: '',
+                          category: 'discussion',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                      ],
+                    },
+                  },
+                  {
+                    id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@2889db1677a549abb15eb4d886f95d1c',
+                    display_name: 'Numerical Input',
+                    category: 'vertical',
+                    has_children: true,
+                    video_sharing_enabled: true,
+                    video_sharing_options: 'per-video',
+                    video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                    child_info: {
+                      children: [
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@problem+block@75f9562c77bc4858b61f907bb810d974',
+                          display_name: 'Numerical Input',
+                          category: 'problem',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@discussion+block@501aed9d902349eeb2191fa505548de2',
+                          display_name: '',
+                          category: 'discussion',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                      ],
+                    },
+                  },
+                  {
+                    id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@e8a5cc2aed424838853defab7be45e42',
+                    display_name: 'Text input',
+                    category: 'vertical',
+                    has_children: true,
+                    video_sharing_enabled: true,
+                    video_sharing_options: 'per-video',
+                    video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                    child_info: {
+                      children: [
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@problem+block@0d759dee4f9d459c8956136dbde55f02',
+                          display_name: 'Text Input',
+                          category: 'problem',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@discussion+block@6244918637ed4ff4b5f94a840a7e4b43',
+                          display_name: '',
+                          category: 'discussion',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                      ],
+                    },
+                  },
+                  {
+                    id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@fb6b62dbec4348528629cf2232b86aea',
+                    display_name: 'Instructor Programmed Responses',
+                    category: 'vertical',
+                    has_children: true,
+                    video_sharing_enabled: true,
+                    video_sharing_options: 'per-video',
+                    video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                    child_info: {
+                      children: [],
+                    },
+                  },
+                ],
+              },
+            },
+          ],
+        },
+      },
+      {
+        id: 'block-v1:edX+DemoX+Demo_Course+type@chapter+block@graded_interactions',
+        display_name: 'Example Week 2: Get Interactive',
+        category: 'chapter',
+        has_children: true,
+        video_sharing_enabled: true,
+        video_sharing_options: 'per-video',
+        video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+        child_info: {
+          category: 'sequential',
+          display_name: 'Subsection',
+          children: [
+            {
+              id: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@simulations',
+              display_name: "Lesson 2 - Let's Get Interactive!",
+              category: 'sequential',
+              has_children: true,
+              video_sharing_enabled: true,
+              video_sharing_options: 'per-video',
+              video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+              child_info: {
+                category: 'vertical',
+                display_name: 'Unit',
+                children: [
+                  {
+                    id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@d0d804e8863c4a95a659c04d8a2b2bc0',
+                    display_name: "Lesson 2 - Let's Get Interactive! ",
+                    category: 'vertical',
+                    has_children: true,
+                    video_sharing_enabled: true,
+                    video_sharing_options: 'per-video',
+                    video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                    child_info: {
+                      children: [
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@html+block@78d7d3642f3a4dbabbd1b017861aa5f2',
+                          display_name: "Lesson 2: Let's Get Interactive!",
+                          category: 'html',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                      ],
+                    },
+                  },
+                  {
+                    id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_2dbb0072785e',
+                    display_name: 'An Interactive Reference Table',
+                    category: 'vertical',
+                    has_children: true,
+                    video_sharing_enabled: true,
+                    video_sharing_options: 'per-video',
+                    video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                    child_info: {
+                      children: [
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@html+block@html_07d547513285',
+                          display_name: 'An Interactive Reference Table',
+                          category: 'html',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@discussion+block@6f7a6670f87147149caeff6afa07a526',
+                          display_name: '',
+                          category: 'discussion',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                      ],
+                    },
+                  },
+                  {
+                    id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_98cf62510471',
+                    display_name: 'Zooming Diagrams',
+                    category: 'vertical',
+                    has_children: true,
+                    video_sharing_enabled: true,
+                    video_sharing_options: 'per-video',
+                    video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                    child_info: {
+                      children: [
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@html+block@700x_pathways',
+                          display_name: 'Zooming Diagrams',
+                          category: 'html',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@discussion+block@e0d7423118ab432582d03e8e8dad8e36',
+                          display_name: '',
+                          category: 'discussion',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                      ],
+                    },
+                  },
+                  {
+                    id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_d32bf9b2242c',
+                    display_name: 'Electronic Sound Experiment',
+                    category: 'vertical',
+                    has_children: true,
+                    video_sharing_enabled: true,
+                    video_sharing_options: 'per-video',
+                    video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                    child_info: {
+                      children: [
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@html+block@Lab_5B_Mosfet_Amplifier_Experiment',
+                          display_name: 'Electronic Sound Experiment',
+                          category: 'html',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@discussion+block@03f051f9a8814881a3783d2511613aa6',
+                          display_name: '',
+                          category: 'discussion',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                      ],
+                    },
+                  },
+                  {
+                    id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@4e592689563243c484af947465eaef0d',
+                    display_name: 'New Unit',
+                    category: 'vertical',
+                    has_children: true,
+                    video_sharing_enabled: true,
+                    video_sharing_options: 'per-video',
+                    video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                    child_info: {
+                      children: [
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@video+block@af7fe1335eb841cd81ce31c7ee8eb069',
+                          display_name: 'Video',
+                          category: 'video',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                      ],
+                    },
+                  },
+                ],
+              },
+            },
+            {
+              id: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@graded_simulations',
+              display_name: 'Homework - Labs and Demos',
+              category: 'sequential',
+              has_children: true,
+              video_sharing_enabled: true,
+              video_sharing_options: 'per-video',
+              video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+              child_info: {
+                category: 'vertical',
+                display_name: 'Unit',
+                children: [
+                  {
+                    id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@d6cee45205a449369d7ef8f159b22bdf',
+                    display_name: 'Labs and Demos',
+                    category: 'vertical',
+                    has_children: true,
+                    video_sharing_enabled: true,
+                    video_sharing_options: 'per-video',
+                    video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                    child_info: {
+                      children: [
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@html+block@2bee8c4248e842a19ba1e73ed8d426c2',
+                          display_name: 'Labs and Demos',
+                          category: 'html',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                      ],
+                    },
+                  },
+                  {
+                    id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_aae927868e55',
+                    display_name: 'Code Grader',
+                    category: 'vertical',
+                    has_children: true,
+                    video_sharing_enabled: true,
+                    video_sharing_options: 'per-video',
+                    video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                    child_info: {
+                      children: [
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@html+block@891211e17f9a472290a5f12c7a6626d7',
+                          display_name: 'Code Grader',
+                          category: 'html',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@problem+block@python_grader',
+                          display_name: 'problem',
+                          category: 'problem',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@discussion+block@c6cd4bea43454aaea60ad01beb0cf213',
+                          display_name: '',
+                          category: 'discussion',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                      ],
+                    },
+                  },
+                  {
+                    id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_c037f3757df1',
+                    display_name: 'Electric Circuit Simulator',
+                    category: 'vertical',
+                    has_children: true,
+                    video_sharing_enabled: true,
+                    video_sharing_options: 'per-video',
+                    video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                    child_info: {
+                      children: [
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@html+block@d5a5caaf35e84ebc9a747038465dcfb4',
+                          display_name: 'Electronic Circuit Simulator',
+                          category: 'html',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@problem+block@free_form_simulation',
+                          display_name: 'problem',
+                          category: 'problem',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@problem+block@logic_gate_problem',
+                          display_name: 'problem',
+                          category: 'problem',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@discussion+block@4f06b358a96f4d1dae57d6d81acd06f2',
+                          display_name: '',
+                          category: 'discussion',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                      ],
+                    },
+                  },
+                  {
+                    id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_bc69a47c6fae',
+                    display_name: 'Protein Creator',
+                    category: 'vertical',
+                    has_children: true,
+                    video_sharing_enabled: true,
+                    video_sharing_options: 'per-video',
+                    video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                    child_info: {
+                      children: [
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@html+block@78e3719e864e45f3bee938461f3c3de6',
+                          display_name: 'Protein Builder',
+                          category: 'html',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@problem+block@700x_proteinmake',
+                          display_name: 'Designing Proteins in Two Dimensions',
+                          category: 'problem',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@discussion+block@ed01bcd164e64038a78964a16eac3edc',
+                          display_name: '',
+                          category: 'discussion',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                      ],
+                    },
+                  },
+                  {
+                    id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@8f89194410954e768bde1764985454a7',
+                    display_name: 'Molecule Structures',
+                    category: 'vertical',
+                    has_children: true,
+                    video_sharing_enabled: true,
+                    video_sharing_options: 'per-video',
+                    video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                    child_info: {
+                      children: [
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@problem+block@9b9687073e904ae197799dc415df899f',
+                          display_name: 'Molecule Structures',
+                          category: 'problem',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                      ],
+                    },
+                  },
+                ],
+              },
+            },
+            {
+              id: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@175e76c4951144a29d46211361266e0e',
+              display_name: 'Homework - Essays',
+              category: 'sequential',
+              has_children: true,
+              video_sharing_enabled: true,
+              video_sharing_options: 'per-video',
+              video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+              child_info: {
+                category: 'vertical',
+                display_name: 'Unit',
+                children: [
+                  {
+                    id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@fb79dcbad35b466a8c6364f8ffee9050',
+                    display_name: 'Peer Assessed Essays',
+                    category: 'vertical',
+                    has_children: true,
+                    video_sharing_enabled: true,
+                    video_sharing_options: 'per-video',
+                    video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                    child_info: {
+                      children: [
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@openassessment+block@b24c33ea35954c7889e1d2944d3fe397',
+                          display_name: 'Open Response Assessment',
+                          category: 'openassessment',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@discussion+block@12ad4f3ff4c14114a6e629b00e000976',
+                          display_name: 'Peer Grading',
+                          category: 'discussion',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                      ],
+                    },
+                  },
+                ],
+              },
+            },
+          ],
+        },
+      },
+      {
+        id: 'block-v1:edX+DemoX+Demo_Course+type@chapter+block@social_integration',
+        display_name: 'Example Week 3: Be Social',
+        category: 'chapter',
+        has_children: true,
+        video_sharing_enabled: true,
+        video_sharing_options: 'per-video',
+        video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+        child_info: {
+          category: 'sequential',
+          display_name: 'Subsection',
+          children: [
+            {
+              id: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@48ecb924d7fe4b66a230137626bfa93e',
+              display_name: 'Lesson 3 - Be Social',
+              category: 'sequential',
+              has_children: true,
+              video_sharing_enabled: true,
+              video_sharing_options: 'per-video',
+              video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+              child_info: {
+                category: 'vertical',
+                display_name: 'Unit',
+                children: [
+                  {
+                    id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@3c4b575924bf4b75a2f3542df5c354fc',
+                    display_name: 'Be Social',
+                    category: 'vertical',
+                    has_children: true,
+                    video_sharing_enabled: true,
+                    video_sharing_options: 'per-video',
+                    video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                    child_info: {
+                      children: [
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@html+block@f9f3a25e7bab46e583fd1fbbd7a2f6a0',
+                          display_name: 'Be Social',
+                          category: 'html',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                      ],
+                    },
+                  },
+                  {
+                    id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_3888db0bc286',
+                    display_name: 'Discussion Forums',
+                    category: 'vertical',
+                    has_children: true,
+                    video_sharing_enabled: true,
+                    video_sharing_options: 'per-video',
+                    video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                    child_info: {
+                      children: [
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@html+block@html_49b4494da2f7',
+                          display_name: 'Discussion Forums',
+                          category: 'html',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@discussion+block@discussion_5deb6081620d',
+                          display_name: 'Discussion Forums',
+                          category: 'discussion',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                      ],
+                    },
+                  },
+                  {
+                    id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@312cb4faed17420e82ab3178fc3e251a',
+                    display_name: 'Getting Help',
+                    category: 'vertical',
+                    has_children: true,
+                    video_sharing_enabled: true,
+                    video_sharing_options: 'per-video',
+                    video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                    child_info: {
+                      children: [
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@html+block@8bb218cccf8d40519a971ff0e4901ccf',
+                          display_name: 'Getting Help',
+                          category: 'html',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                      ],
+                    },
+                  },
+                  {
+                    id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@7efc7bf4a47b4a6cb6595c32cde7712a',
+                    display_name: 'Homework - Find Your Study Buddy',
+                    category: 'vertical',
+                    has_children: true,
+                    video_sharing_enabled: true,
+                    video_sharing_options: 'per-video',
+                    video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                    child_info: {
+                      children: [
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@html+block@87fa6792d79f4862be098e5169e93339',
+                          display_name: 'Blank HTML Page',
+                          category: 'html',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                      ],
+                    },
+                  },
+                ],
+              },
+            },
+            {
+              id: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@dbe8fc027bcb4fe9afb744d2e8415855',
+              display_name: 'Homework - Find Your Study Buddy',
+              category: 'sequential',
+              has_children: true,
+              video_sharing_enabled: true,
+              video_sharing_options: 'per-video',
+              video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+              child_info: {
+                category: 'vertical',
+                display_name: 'Unit',
+                children: [
+                  {
+                    id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@26d89b08f75d48829a63520ed8b0037d',
+                    display_name: 'Homework - Find Your Study Buddy',
+                    category: 'vertical',
+                    has_children: true,
+                    video_sharing_enabled: true,
+                    video_sharing_options: 'per-video',
+                    video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                    child_info: {
+                      children: [
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@html+block@6018785795994726950614ce7d0f38c5',
+                          display_name: 'Find Your Study Buddy',
+                          category: 'html',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                      ],
+                    },
+                  },
+                ],
+              },
+            },
+            {
+              id: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@6ab9c442501d472c8ed200e367b4edfa',
+              display_name: 'More Ways to Connect',
+              category: 'sequential',
+              has_children: true,
+              video_sharing_enabled: true,
+              video_sharing_options: 'per-video',
+              video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+              child_info: {
+                category: 'vertical',
+                display_name: 'Unit',
+                children: [
+                  {
+                    id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@3f2c11aba9434e459676a7d7acc4d960',
+                    display_name: 'Google Hangout',
+                    category: 'vertical',
+                    has_children: true,
+                    video_sharing_enabled: true,
+                    video_sharing_options: 'per-video',
+                    video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                    child_info: {
+                      children: [
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@html+block@d45779ad3d024a40a09ad8cc317c0970',
+                          display_name: 'Text',
+                          category: 'html',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@html+block@55cbc99f262443d886a25cf84594eafb',
+                          display_name: 'Text',
+                          category: 'html',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@discussion+block@ade92343df3d4953a40ab3adc8805390',
+                          display_name: 'Google Hangout',
+                          category: 'discussion',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                      ],
+                    },
+                  },
+                ],
+              },
+            },
+          ],
+        },
+      },
+      {
+        id: 'block-v1:edX+DemoX+Demo_Course+type@chapter+block@1414ffd5143b4b508f739b563ab468b7',
+        display_name: 'About Exams and Certificates',
+        category: 'chapter',
+        has_children: true,
+        video_sharing_enabled: true,
+        video_sharing_options: 'per-video',
+        video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+        child_info: {
+          category: 'sequential',
+          display_name: 'Subsection',
+          children: [
+            {
+              id: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@workflow',
+              display_name: 'edX Exams',
+              category: 'sequential',
+              has_children: true,
+              video_sharing_enabled: true,
+              video_sharing_options: 'per-video',
+              video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+              child_info: {
+                category: 'vertical',
+                display_name: 'Unit',
+                children: [
+                  {
+                    id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@934cc32c177d41b580c8413e561346b3',
+                    display_name: 'EdX Exams',
+                    category: 'vertical',
+                    has_children: true,
+                    video_sharing_enabled: true,
+                    video_sharing_options: 'per-video',
+                    video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                    child_info: {
+                      children: [
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@html+block@8293139743f34377817d537b69911530',
+                          display_name: 'EdX Exams',
+                          category: 'html',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                      ],
+                    },
+                  },
+                  {
+                    id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_f04afeac0131',
+                    display_name: 'Immediate Feedback',
+                    category: 'vertical',
+                    has_children: true,
+                    video_sharing_enabled: true,
+                    video_sharing_options: 'per-video',
+                    video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                    child_info: {
+                      children: [
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@problem+block@ex_practice_2',
+                          display_name: 'Immediate Feedback',
+                          category: 'problem',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@discussion+block@4aba537a78774bd5a862485a8563c345',
+                          display_name: '',
+                          category: 'discussion',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                      ],
+                    },
+                  },
+                  {
+                    id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@b6662b497c094bcc9b870d8270c90c93',
+                    display_name: 'Getting Answers',
+                    category: 'vertical',
+                    has_children: true,
+                    video_sharing_enabled: true,
+                    video_sharing_options: 'per-video',
+                    video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                    child_info: {
+                      children: [
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@problem+block@45d46192272c4f6db6b63586520bbdf4',
+                          display_name: 'Getting Answers',
+                          category: 'problem',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@discussion+block@f480df4ce91347c5ae4301ddf6146238',
+                          display_name: '',
+                          category: 'discussion',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                      ],
+                    },
+                  },
+                  {
+                    id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@f91d8d31f7cf48ce990f8d8745ae4cfa',
+                    display_name: 'Answering More Than Once',
+                    category: 'vertical',
+                    has_children: true,
+                    video_sharing_enabled: true,
+                    video_sharing_options: 'per-video',
+                    video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                    child_info: {
+                      children: [
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@problem+block@651e0945b77f42e0a4c89b8c3e6f5b3b',
+                          display_name: 'Answering More Than Once',
+                          category: 'problem',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@discussion+block@b8cec2a19ebf463f90cd3544c7927b0e',
+                          display_name: '',
+                          category: 'discussion',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                      ],
+                    },
+                  },
+                  {
+                    id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_ac391cde8a91',
+                    display_name: 'Limited Checks',
+                    category: 'vertical',
+                    has_children: true,
+                    video_sharing_enabled: true,
+                    video_sharing_options: 'per-video',
+                    video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                    child_info: {
+                      children: [
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@problem+block@ex_practice_limited_checks',
+                          display_name: 'Limited Checks',
+                          category: 'problem',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@problem+block@d1b84dcd39b0423d9e288f27f0f7f242',
+                          display_name: 'Few Checks',
+                          category: 'problem',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@discussion+block@cd177caa62444fbca48aa8f843f09eac',
+                          display_name: '',
+                          category: 'discussion',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                      ],
+                    },
+                  },
+                  {
+                    id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_36e0beb03f0a',
+                    display_name: 'Randomized Questions',
+                    category: 'vertical',
+                    has_children: true,
+                    video_sharing_enabled: true,
+                    video_sharing_options: 'per-video',
+                    video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                    child_info: {
+                      children: [
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@problem+block@ex_practice_3',
+                          display_name: 'Randomized Questions',
+                          category: 'problem',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@discussion+block@ddede76df71045ffa16de9d1481d2119',
+                          display_name: '',
+                          category: 'discussion',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                      ],
+                    },
+                  },
+                  {
+                    id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@1b0e2c2c84884b95b1c99fb678cc964c',
+                    display_name: 'Overall Grade Performance',
+                    category: 'vertical',
+                    has_children: true,
+                    video_sharing_enabled: true,
+                    video_sharing_options: 'per-video',
+                    video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                    child_info: {
+                      children: [
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@html+block@f4a39219742149f781a1dda6f43a623c',
+                          display_name: 'Overall Grade',
+                          category: 'html',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@discussion+block@1a810b1a3b2447b998f0917d0e5a802b',
+                          display_name: '',
+                          category: 'discussion',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                      ],
+                    },
+                  },
+                  {
+                    id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@c7e98fd39a6944edb6b286c32e1150ff',
+                    display_name: 'Passing a Course',
+                    category: 'vertical',
+                    has_children: true,
+                    video_sharing_enabled: true,
+                    video_sharing_options: 'per-video',
+                    video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                    child_info: {
+                      children: [
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@html+block@5e009378f0b64585baa0a14b155974b9',
+                          display_name: 'Passing a Course',
+                          category: 'html',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@discussion+block@23e6eda482c04335af2bb265beacaf59',
+                          display_name: '',
+                          category: 'discussion',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                      ],
+                    },
+                  },
+                  {
+                    id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@d6eaa391d2be41dea20b8b1bfbcb1c45',
+                    display_name: 'Getting Your edX Certificate',
+                    category: 'vertical',
+                    has_children: true,
+                    video_sharing_enabled: true,
+                    video_sharing_options: 'per-video',
+                    video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                    child_info: {
+                      children: [
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@html+block@148ae8fa73ea460eb6f05505da0ba6e6',
+                          display_name: 'Getting Your edX Certificate',
+                          category: 'html',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@html+block@6b6bee43c7c641509da71c9299cc9f5a',
+                          display_name: 'Blank HTML Page',
+                          category: 'html',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                      ],
+                    },
+                  },
+                ],
+              },
+            },
+          ],
+        },
+      },
+      {
+        id: 'block-v1:edX+DemoX+Demo_Course+type@chapter+block@59666313a79946079f5ef4fff36e45f0',
+        display_name: 'IFrame',
+        category: 'chapter',
+        has_children: true,
+        video_sharing_enabled: true,
+        video_sharing_options: 'per-video',
+        video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+        child_info: {
+          category: 'sequential',
+          display_name: 'Subsection',
+          children: [
+            {
+              id: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@f9fd819dfb224d118e4df4d46c648179',
+              display_name: 'Subsection',
+              category: 'sequential',
+              has_children: true,
+              video_sharing_enabled: true,
+              video_sharing_options: 'per-video',
+              video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+              child_info: {
+                category: 'vertical',
+                display_name: 'Unit',
+                children: [
+                  {
+                    id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@c8165538b5f04283879efc8e8deb2d92',
+                    display_name: 'Iframe',
+                    category: 'vertical',
+                    has_children: true,
+                    video_sharing_enabled: true,
+                    video_sharing_options: 'per-video',
+                    video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                    child_info: {
+                      children: [
+                        {
+                          id: 'block-v1:edX+DemoX+Demo_Course+type@html+block@fd3d0a72d0d344af9a53de144d83af1f',
+                          display_name: 'IFrame Tool',
+                          category: 'html',
+                          has_children: false,
+                          video_sharing_enabled: true,
+                          video_sharing_options: 'per-video',
+                          video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+                        },
+                      ],
+                    },
+                  },
+                ],
+              },
+            },
+            {
+              id: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@a7deaeb85ee24470871c912536534a59',
+              display_name: 'Subsection',
+              category: 'sequential',
+              has_children: true,
+              video_sharing_enabled: true,
+              video_sharing_options: 'per-video',
+              video_sharing_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/open-release-quince.master/developing_course/social_sharing.html',
+            },
+          ],
+        },
+      },
+    ],
+  },
+};
diff --git a/src/course-unit/__mocks__/courseSectionVertical.js b/src/course-unit/__mocks__/courseSectionVertical.js
new file mode 100644
index 0000000000..f5b60dcca2
--- /dev/null
+++ b/src/course-unit/__mocks__/courseSectionVertical.js
@@ -0,0 +1,1479 @@
+module.exports = {
+  language_code: 'en',
+  action: 'view',
+  xblock: {
+    display_name: 'Getting Started',
+    display_type: 'Unit',
+    category: 'vertical',
+  },
+  is_unit_page: true,
+  is_collapsible: false,
+  position: 1,
+  prev_url: '%2Fcontainer%2Fblock-v1%3AedX%2BDemoX%2BDemo_Course%2Btype%40vertical%2Bblock%40vertical_0270f6de40fc',
+  next_url: '%2Fcontainer%2Fblock-v1%3AedX%2BDemoX%2BDemo_Course%2Btype%40vertical%2Bblock%404f6c1b4e316a419ab5b6bf30e6c708e9',
+  new_unit_category: 'vertical',
+  outline_url: '/course/course-v1:edX+DemoX+Demo_Course?format=concise',
+  ancestor_xblocks: [
+    {
+      children: [
+        {
+          url: '/course/course-v1:edX+DemoX+Demo_Course?show=block-v1%3AedX%2BDemoX%2BDemo_Course%2Btype%40chapter%2Bblock%40d8a6192ade314473a78242dfeedfbf5b',
+          display_name: 'Introduction 2',
+        },
+        {
+          url: '/course/course-v1:edX+DemoX+Demo_Course?show=block-v1%3AedX%2BDemoX%2BDemo_Course%2Btype%40chapter%2Bblock%40interactive_demonstrations',
+          display_name: 'Example Week 1: Getting Started',
+        },
+        {
+          url: '/course/course-v1:edX+DemoX+Demo_Course?show=block-v1%3AedX%2BDemoX%2BDemo_Course%2Btype%40chapter%2Bblock%40graded_interactions',
+          display_name: 'Example Week 2: Get Interactive',
+        },
+        {
+          url: '/course/course-v1:edX+DemoX+Demo_Course?show=block-v1%3AedX%2BDemoX%2BDemo_Course%2Btype%40chapter%2Bblock%40social_integration',
+          display_name: 'Example Week 3: Be Social',
+        },
+        {
+          url: '/course/course-v1:edX+DemoX+Demo_Course?show=block-v1%3AedX%2BDemoX%2BDemo_Course%2Btype%40chapter%2Bblock%401414ffd5143b4b508f739b563ab468b7',
+          display_name: 'About Exams and Certificates',
+        },
+      ],
+      title: 'Example Week 1: Getting Started',
+      is_last: false,
+    },
+    {
+      children: [
+        {
+          url: '/course/course-v1:edX+DemoX+Demo_Course?show=block-v1%3AedX%2BDemoX%2BDemo_Course%2Btype%40sequential%2Bblock%4019a30717eff543078a5d94ae9d6c18a5',
+          display_name: 'Lesson 1 - Getting Started',
+        },
+        {
+          url: '/course/course-v1:edX+DemoX+Demo_Course?show=block-v1%3AedX%2BDemoX%2BDemo_Course%2Btype%40sequential%2Bblock%40basic_questions',
+          display_name: 'Homework - Question Styles',
+        },
+      ],
+      title: 'Lesson 1 - Getting Started',
+      is_last: true,
+    },
+  ],
+  component_templates: [
+    {
+      type: 'advanced',
+      templates: [
+        {
+          display_name: 'Annotation',
+          category: 'annotatable',
+          boilerplate_name: null,
+          hinted: false,
+          tab: 'common',
+          support_level: true,
+        },
+        {
+          display_name: 'Video',
+          category: 'videoalpha',
+          boilerplate_name: null,
+          hinted: false,
+          tab: 'common',
+          support_level: true,
+        },
+      ],
+      display_name: 'Advanced',
+      support_legend: {
+        show_legend: false,
+        allow_unsupported_xblocks: false,
+        documentation_label: 'Your Platform Name Here Support Levels:',
+      },
+      beta: false,
+    },
+    {
+      type: 'discussion',
+      templates: [
+        {
+          display_name: 'Discussion',
+          category: 'discussion',
+          boilerplate_name: null,
+          hinted: false,
+          tab: 'advanced',
+          support_level: true,
+        },
+      ],
+      display_name: 'Discussion',
+      support_legend: {
+        show_legend: false,
+        allow_unsupported_xblocks: false,
+        documentation_label: 'Your Platform Name Here Support Levels:',
+      },
+      beta: false,
+    },
+    {
+      type: 'library',
+      templates: [
+        {
+          display_name: 'Randomized Content Block',
+          category: 'library_content',
+          boilerplate_name: null,
+          hinted: false,
+          tab: 'common',
+          support_level: true,
+        },
+      ],
+      display_name: 'Legacy Library Content',
+      support_legend: {
+        show_legend: false,
+        allow_unsupported_xblocks: false,
+        documentation_label: 'Your Platform Name Here Support Levels:',
+      },
+      beta: false,
+    },
+    {
+      type: 'html',
+      templates: [
+        {
+          display_name: 'Text',
+          category: 'html',
+          boilerplate_name: null,
+          hinted: false,
+          tab: 'advanced',
+          support_level: true,
+        },
+        {
+          display_name: 'Raw HTML',
+          category: 'html',
+          boilerplate_name: 'raw.yaml',
+          hinted: false,
+          tab: 'advanced',
+          support_level: true,
+        },
+        {
+          display_name: 'Zooming Image Tool',
+          category: 'html',
+          boilerplate_name: 'zooming_image.yaml',
+          hinted: false,
+          tab: 'advanced',
+          support_level: true,
+        },
+        {
+          display_name: 'IFrame Tool',
+          category: 'html',
+          boilerplate_name: 'iframe.yaml',
+          hinted: false,
+          tab: 'advanced',
+          support_level: true,
+        },
+        {
+          display_name: 'Anonymous User ID',
+          category: 'html',
+          boilerplate_name: 'anon_user_id.yaml',
+          hinted: false,
+          tab: 'advanced',
+          support_level: true,
+        },
+        {
+          display_name: 'Announcement',
+          category: 'html',
+          boilerplate_name: 'announcement.yaml',
+          hinted: false,
+          tab: 'advanced',
+          support_level: true,
+        },
+      ],
+      display_name: 'Text',
+      support_legend: {
+        show_legend: false,
+        allow_unsupported_xblocks: false,
+        documentation_label: 'Your Platform Name Here Support Levels:',
+      },
+      beta: false,
+    },
+    {
+      type: 'openassessment',
+      templates: [
+        {
+          display_name: 'Peer Assessment Only',
+          category: 'openassessment',
+          boilerplate_name: 'peer-assessment',
+          hinted: false,
+          tab: 'advanced',
+          support_level: true,
+        },
+        {
+          display_name: 'Self Assessment Only',
+          category: 'openassessment',
+          boilerplate_name: 'self-assessment',
+          hinted: false,
+          tab: 'advanced',
+          support_level: true,
+        },
+        {
+          display_name: 'Staff Assessment Only',
+          category: 'openassessment',
+          boilerplate_name: 'staff-assessment',
+          hinted: false,
+          tab: 'advanced',
+          support_level: true,
+        },
+        {
+          display_name: 'Self Assessment to Peer Assessment',
+          category: 'openassessment',
+          boilerplate_name: 'self-to-peer',
+          hinted: false,
+          tab: 'advanced',
+          support_level: true,
+        },
+        {
+          display_name: 'Self Assessment to Staff Assessment',
+          category: 'openassessment',
+          boilerplate_name: 'self-to-staff',
+          hinted: false,
+          tab: 'advanced',
+          support_level: true,
+        },
+      ],
+      display_name: 'Open Response',
+      support_legend: {
+        show_legend: false,
+        allow_unsupported_xblocks: false,
+        documentation_label: 'Your Platform Name Here Support Levels:',
+      },
+      beta: false,
+    },
+    {
+      type: 'problem',
+      templates: [
+        {
+          display_name: 'Blank Common Problem',
+          category: 'problem',
+          boilerplate_name: 'blank_common.yaml',
+          hinted: false,
+          tab: 'common',
+          support_level: true,
+        },
+      ],
+      display_name: 'Problem',
+      support_legend: {
+        show_legend: false,
+        allow_unsupported_xblocks: false,
+        documentation_label: 'Your Platform Name Here Support Levels:',
+      },
+      beta: false,
+    },
+    {
+      type: 'video',
+      templates: [
+        {
+          display_name: 'Video',
+          category: 'video',
+          boilerplate_name: null,
+          hinted: false,
+          tab: 'advanced',
+          support_level: true,
+        },
+      ],
+      display_name: 'Video',
+      support_legend: {
+        show_legend: false,
+        allow_unsupported_xblocks: false,
+        documentation_label: 'Your Platform Name Here Support Levels:',
+      },
+      beta: false,
+    },
+    {
+      type: 'drag-and-drop-v2',
+      templates: [
+        {
+          display_name: 'Drag and Drop',
+          category: 'drag-and-drop-v2',
+          boilerplate_name: null,
+          hinted: false,
+          tab: 'advanced',
+          support_level: true,
+        },
+      ],
+      display_name: 'Drag and Drop',
+      support_legend: {
+        show_legend: false,
+        allow_unsupported_xblocks: false,
+        documentation_label: 'Your Platform Name Here Support Levels:',
+      },
+      beta: false,
+    },
+    {
+      type: 'library_v2',
+      templates: [
+        {
+          display_name: 'Library Content',
+          category: 'library_v2',
+          boilerplate_name: null,
+          hinted: false,
+          tab: 'advanced',
+          support_level: true,
+        },
+      ],
+      display_name: 'Library Content',
+      support_legend: {
+        show_legend: false,
+        allow_unsupported_xblocks: false,
+        documentation_label: 'Your Platform Name Here Support Levels:',
+      },
+      beta: true,
+    },
+    {
+      type: 'itembank',
+      templates: [
+        {
+          display_name: 'Problem Bank',
+          category: 'itembank',
+          boilerplate_name: null,
+          hinted: false,
+          tab: 'advanced',
+          support_level: true,
+        },
+      ],
+      display_name: 'Problem Bank',
+      support_legend: {
+        show_legend: false,
+        allow_unsupported_xblocks: false,
+        documentation_label: 'Your Platform Name Here Support Levels:',
+      },
+      beta: true,
+    },
+  ],
+  course_sequence_ids: [
+    'block-v1:edx+876+2030+type@sequential+block@297321078a0f4c26a50d671ed87642a6',
+    'block-v1:edx+876+2030+type@sequential+block@4e91bdfefd8e4173a03d19c4d91e1936',
+  ],
+  xblock_info: {
+    id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@867dddb6f55d410caaa9c1eb9c6743ec',
+    display_name: 'Getting Started',
+    category: 'vertical',
+    has_children: true,
+    edited_on: 'Jan 04, 2024 at 10:32 UTC',
+    published: true,
+    published_on: 'Dec 28, 2023 at 10:00 UTC',
+    studio_url: '/container/block-v1:edX+DemoX+Demo_Course+type@vertical+block@867dddb6f55d410caaa9c1eb9c6743ec',
+    released_to_students: true,
+    release_date: 'Feb 05, 2013 at 05:00 UTC',
+    visibility_state: 'needs_attention',
+    has_explicit_staff_lock: false,
+    start: '2013-02-05T05:00:00Z',
+    graded: false,
+    due_date: '',
+    due: null,
+    relative_weeks_due: null,
+    format: null,
+    course_graders: [
+      'Homework',
+      'Exam',
+    ],
+    has_changes: true,
+    actions: {
+      deletable: true,
+      draggable: true,
+      childAddable: true,
+      duplicable: true,
+    },
+    explanatory_message: null,
+    group_access: {},
+    user_partitions: [
+      {
+        id: 50,
+        name: 'Enrollment Track Groups',
+        scheme: 'enrollment_track',
+        groups: [
+          {
+            id: 2,
+            name: 'Verified Certificate',
+            selected: false,
+            deleted: false,
+          },
+          {
+            id: 1,
+            name: 'Audit',
+            selected: false,
+            deleted: false,
+          },
+        ],
+      },
+    ],
+    show_correctness: 'always',
+    discussion_enabled: true,
+    ancestor_info: {
+      ancestors: [
+        {
+          id: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@19a30717eff543078a5d94ae9d6c18a5',
+          display_name: 'Lesson 1 - Getting Started',
+          category: 'sequential',
+          has_children: true,
+          edited_on: 'Jan 04, 2024 at 10:32 UTC',
+          published: true,
+          published_on: 'Dec 28, 2023 at 10:00 UTC',
+          studio_url: '/course/course-v1:edX+DemoX+Demo_Course?show=block-v1%3AedX%2BDemoX%2BDemo_Course%2Btype%40sequential%2Bblock%4019a30717eff543078a5d94ae9d6c18a5',
+          released_to_students: true,
+          release_date: 'Feb 05, 2013 at 05:00 UTC',
+          visibility_state: 'needs_attention',
+          has_explicit_staff_lock: false,
+          start: '2013-02-05T05:00:00Z',
+          graded: false,
+          due_date: '',
+          due: null,
+          relative_weeks_due: null,
+          format: null,
+          course_graders: [
+            'Homework',
+            'Exam',
+          ],
+          has_changes: null,
+          actions: {
+            deletable: true,
+            draggable: true,
+            childAddable: true,
+            duplicable: true,
+          },
+          explanatory_message: null,
+          group_access: {},
+          user_partitions: [
+            {
+              id: 50,
+              name: 'Enrollment Track Groups',
+              scheme: 'enrollment_track',
+              groups: [
+                {
+                  id: 2,
+                  name: 'Verified Certificate',
+                  selected: false,
+                  deleted: false,
+                },
+                {
+                  id: 1,
+                  name: 'Audit',
+                  selected: false,
+                  deleted: false,
+                },
+              ],
+            },
+          ],
+          show_correctness: 'always',
+          hide_after_due: false,
+          is_proctored_exam: false,
+          was_exam_ever_linked_with_external: false,
+          online_proctoring_rules: '',
+          is_practice_exam: false,
+          is_onboarding_exam: false,
+          is_time_limited: false,
+          exam_review_rules: '',
+          default_time_limit_minutes: null,
+          proctoring_exam_configuration_link: null,
+          supports_onboarding: false,
+          show_review_rules: true,
+          child_info: {
+            category: 'vertical',
+            display_name: 'Unit',
+            children: [
+              {
+                id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@867dddb6f55d410caaa9c1eb9c6743ec',
+                display_name: 'Getting Started',
+                category: 'vertical',
+                has_children: true,
+                edited_on: 'Jan 04, 2024 at 10:32 UTC',
+                published: true,
+                published_on: 'Dec 28, 2023 at 10:00 UTC',
+                studio_url: '/container/block-v1:edX+DemoX+Demo_Course+type@vertical+block@867dddb6f55d410caaa9c1eb9c6743ec',
+                released_to_students: true,
+                release_date: 'Feb 05, 2013 at 05:00 UTC',
+                visibility_state: 'needs_attention',
+                has_explicit_staff_lock: false,
+                start: '2013-02-05T05:00:00Z',
+                graded: false,
+                due_date: '',
+                due: null,
+                relative_weeks_due: null,
+                format: null,
+                course_graders: [
+                  'Homework',
+                  'Exam',
+                ],
+                has_changes: true,
+                actions: {
+                  deletable: true,
+                  draggable: true,
+                  childAddable: true,
+                  duplicable: true,
+                },
+                explanatory_message: null,
+                group_access: {},
+                user_partitions: [
+                  {
+                    id: 50,
+                    name: 'Enrollment Track Groups',
+                    scheme: 'enrollment_track',
+                    groups: [
+                      {
+                        id: 2,
+                        name: 'Verified Certificate',
+                        selected: false,
+                        deleted: false,
+                      },
+                      {
+                        id: 1,
+                        name: 'Audit',
+                        selected: false,
+                        deleted: false,
+                      },
+                    ],
+                  },
+                ],
+                show_correctness: 'always',
+                discussion_enabled: true,
+                ancestor_has_staff_lock: false,
+                user_partition_info: {
+                  selectable_partitions: [
+                    {
+                      id: 50,
+                      name: 'Enrollment Track Groups',
+                      scheme: 'enrollment_track',
+                      groups: [
+                        {
+                          id: 2,
+                          name: 'Verified Certificate',
+                          selected: false,
+                          deleted: false,
+                        },
+                        {
+                          id: 1,
+                          name: 'Audit',
+                          selected: false,
+                          deleted: false,
+                        },
+                      ],
+                    },
+                  ],
+                  selected_partition_index: -1,
+                  selected_groups_label: '',
+                },
+                enable_copy_paste_units: false,
+                xblock_type: 'other',
+              },
+              {
+                id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@4f6c1b4e316a419ab5b6bf30e6c708e9',
+                display_name: 'Working with Videos',
+                category: 'vertical',
+                has_children: true,
+                edited_on: 'Dec 28, 2023 at 10:00 UTC',
+                published: true,
+                published_on: 'Dec 28, 2023 at 10:00 UTC',
+                studio_url: '/container/block-v1:edX+DemoX+Demo_Course+type@vertical+block@4f6c1b4e316a419ab5b6bf30e6c708e9',
+                released_to_students: true,
+                release_date: 'Feb 05, 2013 at 05:00 UTC',
+                visibility_state: 'live',
+                has_explicit_staff_lock: false,
+                start: '2013-02-05T05:00:00Z',
+                graded: false,
+                due_date: '',
+                due: null,
+                relative_weeks_due: null,
+                format: null,
+                course_graders: [
+                  'Homework',
+                  'Exam',
+                ],
+                has_changes: false,
+                actions: {
+                  deletable: true,
+                  draggable: true,
+                  childAddable: true,
+                  duplicable: true,
+                },
+                explanatory_message: null,
+                group_access: {},
+                user_partitions: [
+                  {
+                    id: 50,
+                    name: 'Enrollment Track Groups',
+                    scheme: 'enrollment_track',
+                    groups: [
+                      {
+                        id: 2,
+                        name: 'Verified Certificate',
+                        selected: false,
+                        deleted: false,
+                      },
+                      {
+                        id: 1,
+                        name: 'Audit',
+                        selected: false,
+                        deleted: false,
+                      },
+                    ],
+                  },
+                ],
+                show_correctness: 'always',
+                discussion_enabled: true,
+                ancestor_has_staff_lock: false,
+                user_partition_info: {
+                  selectable_partitions: [
+                    {
+                      id: 50,
+                      name: 'Enrollment Track Groups',
+                      scheme: 'enrollment_track',
+                      groups: [
+                        {
+                          id: 2,
+                          name: 'Verified Certificate',
+                          selected: false,
+                          deleted: false,
+                        },
+                        {
+                          id: 1,
+                          name: 'Audit',
+                          selected: false,
+                          deleted: false,
+                        },
+                      ],
+                    },
+                  ],
+                  selected_partition_index: -1,
+                  selected_groups_label: '',
+                },
+                enable_copy_paste_units: false,
+                xblock_type: 'video',
+              },
+              {
+                id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@3dc16db8d14842e38324e95d4030b8a0',
+                display_name: 'Videos on edX',
+                category: 'vertical',
+                has_children: true,
+                edited_on: 'Dec 28, 2023 at 10:00 UTC',
+                published: true,
+                published_on: 'Dec 28, 2023 at 10:00 UTC',
+                studio_url: '/container/block-v1:edX+DemoX+Demo_Course+type@vertical+block@3dc16db8d14842e38324e95d4030b8a0',
+                released_to_students: true,
+                release_date: 'Feb 05, 2013 at 05:00 UTC',
+                visibility_state: 'live',
+                has_explicit_staff_lock: false,
+                start: '2013-02-05T05:00:00Z',
+                graded: false,
+                due_date: '',
+                due: null,
+                relative_weeks_due: null,
+                format: null,
+                course_graders: [
+                  'Homework',
+                  'Exam',
+                ],
+                has_changes: false,
+                actions: {
+                  deletable: true,
+                  draggable: true,
+                  childAddable: true,
+                  duplicable: true,
+                },
+                explanatory_message: null,
+                group_access: {},
+                user_partitions: [
+                  {
+                    id: 50,
+                    name: 'Enrollment Track Groups',
+                    scheme: 'enrollment_track',
+                    groups: [
+                      {
+                        id: 2,
+                        name: 'Verified Certificate',
+                        selected: false,
+                        deleted: false,
+                      },
+                      {
+                        id: 1,
+                        name: 'Audit',
+                        selected: false,
+                        deleted: false,
+                      },
+                    ],
+                  },
+                ],
+                show_correctness: 'always',
+                discussion_enabled: true,
+                ancestor_has_staff_lock: false,
+                user_partition_info: {
+                  selectable_partitions: [
+                    {
+                      id: 50,
+                      name: 'Enrollment Track Groups',
+                      scheme: 'enrollment_track',
+                      groups: [
+                        {
+                          id: 2,
+                          name: 'Verified Certificate',
+                          selected: false,
+                          deleted: false,
+                        },
+                        {
+                          id: 1,
+                          name: 'Audit',
+                          selected: false,
+                          deleted: false,
+                        },
+                      ],
+                    },
+                  ],
+                  selected_partition_index: -1,
+                  selected_groups_label: '',
+                },
+                enable_copy_paste_units: false,
+                xblock_type: 'other',
+              },
+              {
+                id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@4a1bba2a403f40bca5ec245e945b0d76',
+                display_name: 'Video Demonstrations',
+                category: 'vertical',
+                has_children: true,
+                edited_on: 'Dec 28, 2023 at 10:00 UTC',
+                published: true,
+                published_on: 'Dec 28, 2023 at 10:00 UTC',
+                studio_url: '/container/block-v1:edX+DemoX+Demo_Course+type@vertical+block@4a1bba2a403f40bca5ec245e945b0d76',
+                released_to_students: true,
+                release_date: 'Feb 05, 2013 at 05:00 UTC',
+                visibility_state: 'live',
+                has_explicit_staff_lock: false,
+                start: '2013-02-05T05:00:00Z',
+                graded: false,
+                due_date: '',
+                due: null,
+                relative_weeks_due: null,
+                format: null,
+                course_graders: [
+                  'Homework',
+                  'Exam',
+                ],
+                has_changes: false,
+                actions: {
+                  deletable: true,
+                  draggable: true,
+                  childAddable: true,
+                  duplicable: true,
+                },
+                explanatory_message: null,
+                group_access: {},
+                user_partitions: [
+                  {
+                    id: 50,
+                    name: 'Enrollment Track Groups',
+                    scheme: 'enrollment_track',
+                    groups: [
+                      {
+                        id: 2,
+                        name: 'Verified Certificate',
+                        selected: false,
+                        deleted: false,
+                      },
+                      {
+                        id: 1,
+                        name: 'Audit',
+                        selected: false,
+                        deleted: false,
+                      },
+                    ],
+                  },
+                ],
+                show_correctness: 'always',
+                discussion_enabled: true,
+                ancestor_has_staff_lock: false,
+                user_partition_info: {
+                  selectable_partitions: [
+                    {
+                      id: 50,
+                      name: 'Enrollment Track Groups',
+                      scheme: 'enrollment_track',
+                      groups: [
+                        {
+                          id: 2,
+                          name: 'Verified Certificate',
+                          selected: false,
+                          deleted: false,
+                        },
+                        {
+                          id: 1,
+                          name: 'Audit',
+                          selected: false,
+                          deleted: false,
+                        },
+                      ],
+                    },
+                  ],
+                  selected_partition_index: -1,
+                  selected_groups_label: '',
+                },
+                enable_copy_paste_units: false,
+                xblock_type: 'video',
+              },
+              {
+                id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@256f17a44983429fb1a60802203ee4e0',
+                display_name: 'Video Presentation Styles',
+                category: 'vertical',
+                has_children: true,
+                edited_on: 'Dec 28, 2023 at 10:00 UTC',
+                published: true,
+                published_on: 'Dec 28, 2023 at 10:00 UTC',
+                studio_url: '/container/block-v1:edX+DemoX+Demo_Course+type@vertical+block@256f17a44983429fb1a60802203ee4e0',
+                released_to_students: true,
+                release_date: 'Feb 05, 2013 at 05:00 UTC',
+                visibility_state: 'live',
+                has_explicit_staff_lock: false,
+                start: '2013-02-05T05:00:00Z',
+                graded: false,
+                due_date: '',
+                due: null,
+                relative_weeks_due: null,
+                format: null,
+                course_graders: [
+                  'Homework',
+                  'Exam',
+                ],
+                has_changes: false,
+                actions: {
+                  deletable: true,
+                  draggable: true,
+                  childAddable: true,
+                  duplicable: true,
+                },
+                explanatory_message: null,
+                group_access: {},
+                user_partitions: [
+                  {
+                    id: 50,
+                    name: 'Enrollment Track Groups',
+                    scheme: 'enrollment_track',
+                    groups: [
+                      {
+                        id: 2,
+                        name: 'Verified Certificate',
+                        selected: false,
+                        deleted: false,
+                      },
+                      {
+                        id: 1,
+                        name: 'Audit',
+                        selected: false,
+                        deleted: false,
+                      },
+                    ],
+                  },
+                ],
+                show_correctness: 'always',
+                discussion_enabled: true,
+                ancestor_has_staff_lock: false,
+                user_partition_info: {
+                  selectable_partitions: [
+                    {
+                      id: 50,
+                      name: 'Enrollment Track Groups',
+                      scheme: 'enrollment_track',
+                      groups: [
+                        {
+                          id: 2,
+                          name: 'Verified Certificate',
+                          selected: false,
+                          deleted: false,
+                        },
+                        {
+                          id: 1,
+                          name: 'Audit',
+                          selected: false,
+                          deleted: false,
+                        },
+                      ],
+                    },
+                  ],
+                  selected_partition_index: -1,
+                  selected_groups_label: '',
+                },
+                enable_copy_paste_units: false,
+                xblock_type: 'other',
+              },
+              {
+                id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@e3601c0abee6427d8c17e6d6f8fdddd1',
+                display_name: 'Interactive Questions',
+                category: 'vertical',
+                has_children: true,
+                edited_on: 'Dec 28, 2023 at 10:00 UTC',
+                published: true,
+                published_on: 'Dec 28, 2023 at 10:00 UTC',
+                studio_url: '/container/block-v1:edX+DemoX+Demo_Course+type@vertical+block@e3601c0abee6427d8c17e6d6f8fdddd1',
+                released_to_students: true,
+                release_date: 'Feb 05, 2013 at 05:00 UTC',
+                visibility_state: 'live',
+                has_explicit_staff_lock: false,
+                start: '2013-02-05T05:00:00Z',
+                graded: false,
+                due_date: '',
+                due: null,
+                relative_weeks_due: null,
+                format: null,
+                course_graders: [
+                  'Homework',
+                  'Exam',
+                ],
+                has_changes: false,
+                actions: {
+                  deletable: true,
+                  draggable: true,
+                  childAddable: true,
+                  duplicable: true,
+                },
+                explanatory_message: null,
+                group_access: {},
+                user_partitions: [
+                  {
+                    id: 50,
+                    name: 'Enrollment Track Groups',
+                    scheme: 'enrollment_track',
+                    groups: [
+                      {
+                        id: 2,
+                        name: 'Verified Certificate',
+                        selected: false,
+                        deleted: false,
+                      },
+                      {
+                        id: 1,
+                        name: 'Audit',
+                        selected: false,
+                        deleted: false,
+                      },
+                    ],
+                  },
+                ],
+                show_correctness: 'always',
+                discussion_enabled: true,
+                ancestor_has_staff_lock: false,
+                user_partition_info: {
+                  selectable_partitions: [
+                    {
+                      id: 50,
+                      name: 'Enrollment Track Groups',
+                      scheme: 'enrollment_track',
+                      groups: [
+                        {
+                          id: 2,
+                          name: 'Verified Certificate',
+                          selected: false,
+                          deleted: false,
+                        },
+                        {
+                          id: 1,
+                          name: 'Audit',
+                          selected: false,
+                          deleted: false,
+                        },
+                      ],
+                    },
+                  ],
+                  selected_partition_index: -1,
+                  selected_groups_label: '',
+                },
+                enable_copy_paste_units: false,
+                xblock_type: 'video',
+              },
+              {
+                id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@a79d59cd72034188a71d388f4954a606',
+                display_name: 'Exciting Labs and Tools',
+                category: 'vertical',
+                has_children: true,
+                edited_on: 'Dec 28, 2023 at 10:00 UTC',
+                published: true,
+                published_on: 'Dec 28, 2023 at 10:00 UTC',
+                studio_url: '/container/block-v1:edX+DemoX+Demo_Course+type@vertical+block@a79d59cd72034188a71d388f4954a606',
+                released_to_students: true,
+                release_date: 'Feb 05, 2013 at 05:00 UTC',
+                visibility_state: 'live',
+                has_explicit_staff_lock: false,
+                start: '2013-02-05T05:00:00Z',
+                graded: false,
+                due_date: '',
+                due: null,
+                relative_weeks_due: null,
+                format: null,
+                course_graders: [
+                  'Homework',
+                  'Exam',
+                ],
+                has_changes: false,
+                actions: {
+                  deletable: true,
+                  draggable: true,
+                  childAddable: true,
+                  duplicable: true,
+                },
+                explanatory_message: null,
+                group_access: {},
+                user_partitions: [
+                  {
+                    id: 50,
+                    name: 'Enrollment Track Groups',
+                    scheme: 'enrollment_track',
+                    groups: [
+                      {
+                        id: 2,
+                        name: 'Verified Certificate',
+                        selected: false,
+                        deleted: false,
+                      },
+                      {
+                        id: 1,
+                        name: 'Audit',
+                        selected: false,
+                        deleted: false,
+                      },
+                    ],
+                  },
+                ],
+                show_correctness: 'always',
+                discussion_enabled: true,
+                ancestor_has_staff_lock: false,
+                user_partition_info: {
+                  selectable_partitions: [
+                    {
+                      id: 50,
+                      name: 'Enrollment Track Groups',
+                      scheme: 'enrollment_track',
+                      groups: [
+                        {
+                          id: 2,
+                          name: 'Verified Certificate',
+                          selected: false,
+                          deleted: false,
+                        },
+                        {
+                          id: 1,
+                          name: 'Audit',
+                          selected: false,
+                          deleted: false,
+                        },
+                      ],
+                    },
+                  ],
+                  selected_partition_index: -1,
+                  selected_groups_label: '',
+                },
+                enable_copy_paste_units: false,
+                xblock_type: 'other',
+              },
+              {
+                id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@134df56c516a4a0dbb24dd5facef746e',
+                display_name: 'Reading Assignments',
+                category: 'vertical',
+                has_children: true,
+                edited_on: 'Dec 28, 2023 at 10:00 UTC',
+                published: true,
+                published_on: 'Dec 28, 2023 at 10:00 UTC',
+                studio_url: '/container/block-v1:edX+DemoX+Demo_Course+type@vertical+block@134df56c516a4a0dbb24dd5facef746e',
+                released_to_students: true,
+                release_date: 'Feb 05, 2013 at 05:00 UTC',
+                visibility_state: 'live',
+                has_explicit_staff_lock: false,
+                start: '2013-02-05T05:00:00Z',
+                graded: false,
+                due_date: '',
+                due: null,
+                relative_weeks_due: null,
+                format: null,
+                course_graders: [
+                  'Homework',
+                  'Exam',
+                ],
+                has_changes: false,
+                actions: {
+                  deletable: true,
+                  draggable: true,
+                  childAddable: true,
+                  duplicable: true,
+                },
+                explanatory_message: null,
+                group_access: {},
+                user_partitions: [
+                  {
+                    id: 50,
+                    name: 'Enrollment Track Groups',
+                    scheme: 'enrollment_track',
+                    groups: [
+                      {
+                        id: 2,
+                        name: 'Verified Certificate',
+                        selected: false,
+                        deleted: false,
+                      },
+                      {
+                        id: 1,
+                        name: 'Audit',
+                        selected: false,
+                        deleted: false,
+                      },
+                    ],
+                  },
+                ],
+                show_correctness: 'always',
+                discussion_enabled: true,
+                ancestor_has_staff_lock: false,
+                user_partition_info: {
+                  selectable_partitions: [
+                    {
+                      id: 50,
+                      name: 'Enrollment Track Groups',
+                      scheme: 'enrollment_track',
+                      groups: [
+                        {
+                          id: 2,
+                          name: 'Verified Certificate',
+                          selected: false,
+                          deleted: false,
+                        },
+                        {
+                          id: 1,
+                          name: 'Audit',
+                          selected: false,
+                          deleted: false,
+                        },
+                      ],
+                    },
+                  ],
+                  selected_partition_index: -1,
+                  selected_groups_label: '',
+                },
+                enable_copy_paste_units: false,
+                xblock_type: 'other',
+              },
+              {
+                id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@d91b9e5d8bc64d57a1332d06bf2f2193',
+                display_name: 'When Are Your Exams? ',
+                category: 'vertical',
+                has_children: true,
+                edited_on: 'Dec 28, 2023 at 10:00 UTC',
+                published: true,
+                published_on: 'Dec 28, 2023 at 10:00 UTC',
+                studio_url: '/container/block-v1:edX+DemoX+Demo_Course+type@vertical+block@d91b9e5d8bc64d57a1332d06bf2f2193',
+                released_to_students: true,
+                release_date: 'Feb 05, 2013 at 05:00 UTC',
+                visibility_state: 'live',
+                has_explicit_staff_lock: false,
+                start: '2013-02-05T05:00:00Z',
+                graded: false,
+                due_date: '',
+                due: null,
+                relative_weeks_due: null,
+                format: null,
+                course_graders: [
+                  'Homework',
+                  'Exam',
+                ],
+                has_changes: false,
+                actions: {
+                  deletable: true,
+                  draggable: true,
+                  childAddable: true,
+                  duplicable: true,
+                },
+                explanatory_message: null,
+                group_access: {},
+                user_partitions: [
+                  {
+                    id: 50,
+                    name: 'Enrollment Track Groups',
+                    scheme: 'enrollment_track',
+                    groups: [
+                      {
+                        id: 2,
+                        name: 'Verified Certificate',
+                        selected: false,
+                        deleted: false,
+                      },
+                      {
+                        id: 1,
+                        name: 'Audit',
+                        selected: false,
+                        deleted: false,
+                      },
+                    ],
+                  },
+                ],
+                show_correctness: 'always',
+                discussion_enabled: true,
+                ancestor_has_staff_lock: false,
+                user_partition_info: {
+                  selectable_partitions: [
+                    {
+                      id: 50,
+                      name: 'Enrollment Track Groups',
+                      scheme: 'enrollment_track',
+                      groups: [
+                        {
+                          id: 2,
+                          name: 'Verified Certificate',
+                          selected: false,
+                          deleted: false,
+                        },
+                        {
+                          id: 1,
+                          name: 'Audit',
+                          selected: false,
+                          deleted: false,
+                        },
+                      ],
+                    },
+                  ],
+                  selected_partition_index: -1,
+                  selected_groups_label: '',
+                },
+                enable_copy_paste_units: false,
+                xblock_type: 'video',
+              },
+            ],
+          },
+          ancestor_has_staff_lock: false,
+          user_partition_info: {
+            selectable_partitions: [
+              {
+                id: 50,
+                name: 'Enrollment Track Groups',
+                scheme: 'enrollment_track',
+                groups: [
+                  {
+                    id: 2,
+                    name: 'Verified Certificate',
+                    selected: false,
+                    deleted: false,
+                  },
+                  {
+                    id: 1,
+                    name: 'Audit',
+                    selected: false,
+                    deleted: false,
+                  },
+                ],
+              },
+            ],
+            selected_partition_index: -1,
+            selected_groups_label: '',
+          },
+        },
+        {
+          id: 'block-v1:edX+DemoX+Demo_Course+type@chapter+block@interactive_demonstrations',
+          display_name: 'Example Week 1: Getting Started',
+          category: 'chapter',
+          has_children: true,
+          edited_on: 'Jan 04, 2024 at 10:32 UTC',
+          published: true,
+          published_on: 'Dec 28, 2023 at 10:00 UTC',
+          studio_url: '/course/course-v1:edX+DemoX+Demo_Course?show=block-v1%3AedX%2BDemoX%2BDemo_Course%2Btype%40chapter%2Bblock%40interactive_demonstrations',
+          released_to_students: true,
+          release_date: 'Feb 05, 2013 at 05:00 UTC',
+          visibility_state: 'live',
+          has_explicit_staff_lock: false,
+          start: '2013-02-05T05:00:00Z',
+          graded: false,
+          due_date: '',
+          due: null,
+          relative_weeks_due: null,
+          format: null,
+          course_graders: [
+            'Homework',
+            'Exam',
+          ],
+          has_changes: null,
+          actions: {
+            deletable: true,
+            draggable: true,
+            childAddable: true,
+            duplicable: true,
+          },
+          explanatory_message: null,
+          group_access: {},
+          user_partitions: [
+            {
+              id: 50,
+              name: 'Enrollment Track Groups',
+              scheme: 'enrollment_track',
+              groups: [
+                {
+                  id: 2,
+                  name: 'Verified Certificate',
+                  selected: false,
+                  deleted: false,
+                },
+                {
+                  id: 1,
+                  name: 'Audit',
+                  selected: false,
+                  deleted: false,
+                },
+              ],
+            },
+          ],
+          show_correctness: 'always',
+          highlights: [],
+          highlights_enabled: true,
+          highlights_preview_only: false,
+          highlights_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/developing_course/course_sections.html#set-section-highlights-for-weekly-course-highlight-messages',
+          ancestor_has_staff_lock: false,
+          user_partition_info: {
+            selectable_partitions: [
+              {
+                id: 50,
+                name: 'Enrollment Track Groups',
+                scheme: 'enrollment_track',
+                groups: [
+                  {
+                    id: 2,
+                    name: 'Verified Certificate',
+                    selected: false,
+                    deleted: false,
+                  },
+                  {
+                    id: 1,
+                    name: 'Audit',
+                    selected: false,
+                    deleted: false,
+                  },
+                ],
+              },
+            ],
+            selected_partition_index: -1,
+            selected_groups_label: '',
+          },
+        },
+        {
+          id: 'block-v1:edX+DemoX+Demo_Course+type@course+block@course',
+          display_name: 'Demonstration Course',
+          category: 'course',
+          has_children: true,
+          unit_level_discussions: false,
+          edited_on: 'Jan 08, 2024 at 16:39 UTC',
+          published: true,
+          published_on: 'Jan 08, 2024 at 16:39 UTC',
+          studio_url: '/course/course-v1:edX+DemoX+Demo_Course',
+          released_to_students: true,
+          release_date: 'Feb 05, 2013 at 05:00 UTC',
+          visibility_state: null,
+          has_explicit_staff_lock: false,
+          start: '2013-02-05T05:00:00Z',
+          graded: false,
+          due_date: '',
+          due: null,
+          relative_weeks_due: null,
+          format: null,
+          course_graders: [
+            'Homework',
+            'Exam',
+          ],
+          has_changes: null,
+          actions: {
+            deletable: true,
+            draggable: true,
+            childAddable: true,
+            duplicable: true,
+          },
+          explanatory_message: null,
+          group_access: {},
+          user_partitions: [
+            {
+              id: 50,
+              name: 'Enrollment Track Groups',
+              scheme: 'enrollment_track',
+              groups: [
+                {
+                  id: 2,
+                  name: 'Verified Certificate',
+                  selected: false,
+                  deleted: false,
+                },
+                {
+                  id: 1,
+                  name: 'Audit',
+                  selected: false,
+                  deleted: false,
+                },
+              ],
+            },
+          ],
+          show_correctness: 'always',
+          highlights_enabled_for_messaging: false,
+          highlights_enabled: true,
+          highlights_preview_only: false,
+          highlights_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/developing_course/course_sections.html#set-section-highlights-for-weekly-course-highlight-messages',
+          enable_proctored_exams: false,
+          create_zendesk_tickets: true,
+          enable_timed_exams: true,
+          ancestor_has_staff_lock: false,
+          user_partition_info: {
+            selectable_partitions: [
+              {
+                id: 50,
+                name: 'Enrollment Track Groups',
+                scheme: 'enrollment_track',
+                groups: [
+                  {
+                    id: 2,
+                    name: 'Verified Certificate',
+                    selected: false,
+                    deleted: false,
+                  },
+                  {
+                    id: 1,
+                    name: 'Audit',
+                    selected: false,
+                    deleted: false,
+                  },
+                ],
+              },
+            ],
+            selected_partition_index: -1,
+            selected_groups_label: '',
+          },
+        },
+      ],
+    },
+    ancestor_has_staff_lock: false,
+    user_partition_info: {
+      selectable_partitions: [
+        {
+          id: 50,
+          name: 'Enrollment Track Groups',
+          scheme: 'enrollment_track',
+          groups: [
+            {
+              id: 2,
+              name: 'Verified Certificate',
+              selected: false,
+              deleted: false,
+            },
+            {
+              id: 1,
+              name: 'Audit',
+              selected: false,
+              deleted: false,
+            },
+          ],
+        },
+      ],
+      selected_partition_index: -1,
+      selected_groups_label: '',
+    },
+    enable_copy_paste_units: false,
+    edited_by: 'edx',
+    published_by: null,
+    currently_visible_to_students: true,
+    has_partition_group_components: false,
+    release_date_from: 'Section "Example Week 1: Getting Started"',
+    staff_lock_from: null,
+  },
+  draft_preview_link: '//preview.localhost:18000/courses/course-v1:edX+DemoX+Demo_Course/jump_to/block-v1:edX+DemoX+Demo_Course+type@vertical+block@867dddb6f55d410caaa9c1eb9c6743ec',
+  published_preview_link: '//localhost:18000/courses/course-v1:edX+DemoX+Demo_Course/jump_to/block-v1:edX+DemoX+Demo_Course+type@vertical+block@867dddb6f55d410caaa9c1eb9c6743ec',
+  show_unit_tags: false,
+  user_clipboard: {
+    content: null,
+    source_usage_key: '',
+    source_context_title: '',
+    source_edit_url: '',
+  },
+  is_fullwidth_content: false,
+  assets_url: '/assets/course-v1:edX+DemoX+Demo_Course/',
+  unit_block_id: '867dddb6f55d410caaa9c1eb9c6743ec',
+  subsection_location: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@19a30717eff543078a5d94ae9d6c18a5',
+};
diff --git a/src/course-unit/__mocks__/courseUnit.js b/src/course-unit/__mocks__/courseUnit.js
new file mode 100644
index 0000000000..07c2bf03b1
--- /dev/null
+++ b/src/course-unit/__mocks__/courseUnit.js
@@ -0,0 +1,84 @@
+module.exports = {
+  id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@d91b9e5d8bc64d57a1332d06bf2f2144',
+  display_name: 'Getting Started new',
+  category: 'vertical',
+  has_children: true,
+  edited_on: 'Dec 28, 2023 at 10:00 UTC',
+  published: true,
+  published_on: 'Dec 28, 2023 at 10:00 UTC',
+  studio_url: '/container/block-v1:edX+DemoX+Demo_Course+type@vertical+block@d91b9e5d8bc64d57a1332d06bf2f2193',
+  released_to_students: true,
+  release_date: 'Feb 05, 2013 at 05:00 UTC',
+  visibility_state: 'live',
+  has_explicit_staff_lock: false,
+  start: '2013-02-05T05:00:00Z',
+  graded: false,
+  due_date: '',
+  due: null,
+  relative_weeks_due: null,
+  format: null,
+  course_graders: [
+    'Homework',
+    'Exam',
+  ],
+  has_changes: false,
+  actions: {
+    deletable: true,
+    draggable: true,
+    childAddable: true,
+    duplicable: true,
+  },
+  explanatory_message: null,
+  group_access: {},
+  user_partitions: [
+    {
+      id: 50,
+      name: 'Enrollment Track Groups',
+      scheme: 'enrollment_track',
+      groups: [
+        {
+          id: 2,
+          name: 'Verified Certificate',
+          selected: false,
+          deleted: false,
+        },
+        {
+          id: 1,
+          name: 'Audit',
+          selected: false,
+          deleted: false,
+        },
+      ],
+    },
+  ],
+  show_correctness: 'always',
+  discussion_enabled: true,
+  ancestor_has_staff_lock: false,
+  user_partition_info: {
+    selectable_partitions: [
+      {
+        id: 50,
+        name: 'Enrollment Track Groups',
+        scheme: 'enrollment_track',
+        groups: [
+          {
+            id: 2,
+            name: 'Verified Certificate',
+            selected: false,
+            deleted: false,
+          },
+          {
+            id: 1,
+            name: 'Audit',
+            selected: false,
+            deleted: false,
+          },
+        ],
+      },
+    ],
+    selected_partition_index: -1,
+    selected_groups_label: '',
+  },
+  enable_copy_paste_units: false,
+  xblock_type: 'other',
+};
diff --git a/src/course-unit/__mocks__/courseUnitIndex.js b/src/course-unit/__mocks__/courseUnitIndex.js
new file mode 100644
index 0000000000..71fb8b1d04
--- /dev/null
+++ b/src/course-unit/__mocks__/courseUnitIndex.js
@@ -0,0 +1,1123 @@
+module.exports = {
+  id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@867dddb6f55d410caaa9c1eb9c6743ec',
+  display_name: 'Getting Started',
+  category: 'vertical',
+  has_children: true,
+  edited_on: 'Jan 03, 2024 at 12:06 UTC',
+  published: true,
+  published_on: 'Dec 28, 2023 at 10:00 UTC',
+  studio_url: '/container/block-v1:edX+DemoX+Demo_Course+type@vertical+block@867dddb6f55d410caaa9c1eb9c6743ec',
+  released_to_students: true,
+  release_date: 'Feb 05, 2013 at 05:00 UTC',
+  visibility_state: 'needs_attention',
+  has_explicit_staff_lock: false,
+  start: '2013-02-05T05:00:00Z',
+  graded: false,
+  due_date: '',
+  due: null,
+  relative_weeks_due: null,
+  format: null,
+  course_graders: [
+    'Homework',
+    'Exam',
+  ],
+  has_changes: true,
+  actions: {
+    deletable: true,
+    draggable: true,
+    childAddable: true,
+    duplicable: true,
+  },
+  explanatory_message: null,
+  group_access: {},
+  user_partitions: [
+    {
+      id: 50,
+      name: 'Enrollment Track Groups',
+      scheme: 'enrollment_track',
+      groups: [
+        {
+          id: 2,
+          name: 'Verified Certificate',
+          selected: false,
+          deleted: false,
+        },
+        {
+          id: 1,
+          name: 'Audit',
+          selected: false,
+          deleted: false,
+        },
+      ],
+    },
+  ],
+  show_correctness: 'always',
+  discussion_enabled: true,
+  data: '',
+  metadata: {
+    display_name: 'Getting Started',
+    xml_attributes: {
+      filename: [
+        'vertical/867dddb6f55d410caaa9c1eb9c6743ec.xml',
+        'vertical/867dddb6f55d410caaa9c1eb9c6743ec.xml',
+      ],
+    },
+  },
+  ancestor_info: {
+    ancestors: [
+      {
+        id: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@19a30717eff543078a5d94ae9d6c18a5',
+        display_name: 'Lesson 1 - Getting Started',
+        category: 'sequential',
+        has_children: true,
+        edited_on: 'Jan 03, 2024 at 12:06 UTC',
+        published: true,
+        published_on: 'Dec 28, 2023 at 10:00 UTC',
+        studio_url: '/course/course-v1:edX+DemoX+Demo_Course?show=block-v1%3AedX%2BDemoX%2BDemo_Course%2Btype%40sequential%2Bblock%4019a30717eff543078a5d94ae9d6c18a5',
+        released_to_students: true,
+        release_date: 'Feb 05, 2013 at 05:00 UTC',
+        visibility_state: 'needs_attention',
+        has_explicit_staff_lock: false,
+        start: '2013-02-05T05:00:00Z',
+        graded: false,
+        due_date: '',
+        due: null,
+        relative_weeks_due: null,
+        format: null,
+        course_graders: [
+          'Homework',
+          'Exam',
+        ],
+        has_changes: null,
+        actions: {
+          deletable: true,
+          draggable: true,
+          childAddable: true,
+          duplicable: true,
+        },
+        explanatory_message: null,
+        group_access: {},
+        user_partitions: [
+          {
+            id: 50,
+            name: 'Enrollment Track Groups',
+            scheme: 'enrollment_track',
+            groups: [
+              {
+                id: 2,
+                name: 'Verified Certificate',
+                selected: false,
+                deleted: false,
+              },
+              {
+                id: 1,
+                name: 'Audit',
+                selected: false,
+                deleted: false,
+              },
+            ],
+          },
+        ],
+        show_correctness: 'always',
+        hide_after_due: false,
+        is_proctored_exam: false,
+        was_exam_ever_linked_with_external: false,
+        online_proctoring_rules: '',
+        is_practice_exam: false,
+        is_onboarding_exam: false,
+        is_time_limited: false,
+        exam_review_rules: '',
+        default_time_limit_minutes: null,
+        proctoring_exam_configuration_link: null,
+        supports_onboarding: false,
+        show_review_rules: true,
+        child_info: {
+          category: 'vertical',
+          display_name: 'Unit',
+          children: [
+            {
+              id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@867dddb6f55d410caaa9c1eb9c6743ec',
+              display_name: 'Getting Started',
+              category: 'vertical',
+              has_children: true,
+              edited_on: 'Jan 03, 2024 at 12:06 UTC',
+              published: true,
+              published_on: 'Dec 28, 2023 at 10:00 UTC',
+              studio_url: '/container/block-v1:edX+DemoX+Demo_Course+type@vertical+block@867dddb6f55d410caaa9c1eb9c6743ec',
+              released_to_students: true,
+              release_date: 'Feb 05, 2013 at 05:00 UTC',
+              visibility_state: 'needs_attention',
+              has_explicit_staff_lock: false,
+              start: '2013-02-05T05:00:00Z',
+              graded: false,
+              due_date: '',
+              due: null,
+              relative_weeks_due: null,
+              format: null,
+              course_graders: [
+                'Homework',
+                'Exam',
+              ],
+              has_changes: true,
+              actions: {
+                deletable: true,
+                draggable: true,
+                childAddable: true,
+                duplicable: true,
+              },
+              explanatory_message: null,
+              group_access: {},
+              user_partitions: [
+                {
+                  id: 50,
+                  name: 'Enrollment Track Groups',
+                  scheme: 'enrollment_track',
+                  groups: [
+                    {
+                      id: 2,
+                      name: 'Verified Certificate',
+                      selected: false,
+                      deleted: false,
+                    },
+                    {
+                      id: 1,
+                      name: 'Audit',
+                      selected: false,
+                      deleted: false,
+                    },
+                  ],
+                },
+              ],
+              show_correctness: 'always',
+              discussion_enabled: true,
+              ancestor_has_staff_lock: false,
+              user_partition_info: {
+                selectable_partitions: [
+                  {
+                    id: 50,
+                    name: 'Enrollment Track Groups',
+                    scheme: 'enrollment_track',
+                    groups: [
+                      {
+                        id: 2,
+                        name: 'Verified Certificate',
+                        selected: false,
+                        deleted: false,
+                      },
+                      {
+                        id: 1,
+                        name: 'Audit',
+                        selected: false,
+                        deleted: false,
+                      },
+                    ],
+                  },
+                ],
+                selected_partition_index: -1,
+                selected_groups_label: '',
+              },
+              enable_copy_paste_units: false,
+            },
+            {
+              id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@4f6c1b4e316a419ab5b6bf30e6c708e9',
+              display_name: 'Working with Videos',
+              category: 'vertical',
+              has_children: true,
+              edited_on: 'Dec 28, 2023 at 10:00 UTC',
+              published: true,
+              published_on: 'Dec 28, 2023 at 10:00 UTC',
+              studio_url: '/container/block-v1:edX+DemoX+Demo_Course+type@vertical+block@4f6c1b4e316a419ab5b6bf30e6c708e9',
+              released_to_students: true,
+              release_date: 'Feb 05, 2013 at 05:00 UTC',
+              visibility_state: 'live',
+              has_explicit_staff_lock: false,
+              start: '2013-02-05T05:00:00Z',
+              graded: false,
+              due_date: '',
+              due: null,
+              relative_weeks_due: null,
+              format: null,
+              course_graders: [
+                'Homework',
+                'Exam',
+              ],
+              has_changes: false,
+              actions: {
+                deletable: true,
+                draggable: true,
+                childAddable: true,
+                duplicable: true,
+              },
+              explanatory_message: null,
+              group_access: {},
+              user_partitions: [
+                {
+                  id: 50,
+                  name: 'Enrollment Track Groups',
+                  scheme: 'enrollment_track',
+                  groups: [
+                    {
+                      id: 2,
+                      name: 'Verified Certificate',
+                      selected: false,
+                      deleted: false,
+                    },
+                    {
+                      id: 1,
+                      name: 'Audit',
+                      selected: false,
+                      deleted: false,
+                    },
+                  ],
+                },
+              ],
+              show_correctness: 'always',
+              discussion_enabled: true,
+              ancestor_has_staff_lock: false,
+              user_partition_info: {
+                selectable_partitions: [
+                  {
+                    id: 50,
+                    name: 'Enrollment Track Groups',
+                    scheme: 'enrollment_track',
+                    groups: [
+                      {
+                        id: 2,
+                        name: 'Verified Certificate',
+                        selected: false,
+                        deleted: false,
+                      },
+                      {
+                        id: 1,
+                        name: 'Audit',
+                        selected: false,
+                        deleted: false,
+                      },
+                    ],
+                  },
+                ],
+                selected_partition_index: -1,
+                selected_groups_label: '',
+              },
+              enable_copy_paste_units: false,
+            },
+            {
+              id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@3dc16db8d14842e38324e95d4030b8a0',
+              display_name: 'Videos on edX',
+              category: 'vertical',
+              has_children: true,
+              edited_on: 'Dec 28, 2023 at 10:00 UTC',
+              published: true,
+              published_on: 'Dec 28, 2023 at 10:00 UTC',
+              studio_url: '/container/block-v1:edX+DemoX+Demo_Course+type@vertical+block@3dc16db8d14842e38324e95d4030b8a0',
+              released_to_students: true,
+              release_date: 'Feb 05, 2013 at 05:00 UTC',
+              visibility_state: 'live',
+              has_explicit_staff_lock: false,
+              start: '2013-02-05T05:00:00Z',
+              graded: false,
+              due_date: '',
+              due: null,
+              relative_weeks_due: null,
+              format: null,
+              course_graders: [
+                'Homework',
+                'Exam',
+              ],
+              has_changes: false,
+              actions: {
+                deletable: true,
+                draggable: true,
+                childAddable: true,
+                duplicable: true,
+              },
+              explanatory_message: null,
+              group_access: {},
+              user_partitions: [
+                {
+                  id: 50,
+                  name: 'Enrollment Track Groups',
+                  scheme: 'enrollment_track',
+                  groups: [
+                    {
+                      id: 2,
+                      name: 'Verified Certificate',
+                      selected: false,
+                      deleted: false,
+                    },
+                    {
+                      id: 1,
+                      name: 'Audit',
+                      selected: false,
+                      deleted: false,
+                    },
+                  ],
+                },
+              ],
+              show_correctness: 'always',
+              discussion_enabled: true,
+              ancestor_has_staff_lock: false,
+              user_partition_info: {
+                selectable_partitions: [
+                  {
+                    id: 50,
+                    name: 'Enrollment Track Groups',
+                    scheme: 'enrollment_track',
+                    groups: [
+                      {
+                        id: 2,
+                        name: 'Verified Certificate',
+                        selected: false,
+                        deleted: false,
+                      },
+                      {
+                        id: 1,
+                        name: 'Audit',
+                        selected: false,
+                        deleted: false,
+                      },
+                    ],
+                  },
+                ],
+                selected_partition_index: -1,
+                selected_groups_label: '',
+              },
+              enable_copy_paste_units: false,
+            },
+            {
+              id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@4a1bba2a403f40bca5ec245e945b0d76',
+              display_name: 'Video Demonstrations',
+              category: 'vertical',
+              has_children: true,
+              edited_on: 'Dec 28, 2023 at 10:00 UTC',
+              published: true,
+              published_on: 'Dec 28, 2023 at 10:00 UTC',
+              studio_url: '/container/block-v1:edX+DemoX+Demo_Course+type@vertical+block@4a1bba2a403f40bca5ec245e945b0d76',
+              released_to_students: true,
+              release_date: 'Feb 05, 2013 at 05:00 UTC',
+              visibility_state: 'live',
+              has_explicit_staff_lock: false,
+              start: '2013-02-05T05:00:00Z',
+              graded: false,
+              due_date: '',
+              due: null,
+              relative_weeks_due: null,
+              format: null,
+              course_graders: [
+                'Homework',
+                'Exam',
+              ],
+              has_changes: false,
+              actions: {
+                deletable: true,
+                draggable: true,
+                childAddable: true,
+                duplicable: true,
+              },
+              explanatory_message: null,
+              group_access: {},
+              user_partitions: [
+                {
+                  id: 50,
+                  name: 'Enrollment Track Groups',
+                  scheme: 'enrollment_track',
+                  groups: [
+                    {
+                      id: 2,
+                      name: 'Verified Certificate',
+                      selected: false,
+                      deleted: false,
+                    },
+                    {
+                      id: 1,
+                      name: 'Audit',
+                      selected: false,
+                      deleted: false,
+                    },
+                  ],
+                },
+              ],
+              show_correctness: 'always',
+              discussion_enabled: true,
+              ancestor_has_staff_lock: false,
+              user_partition_info: {
+                selectable_partitions: [
+                  {
+                    id: 50,
+                    name: 'Enrollment Track Groups',
+                    scheme: 'enrollment_track',
+                    groups: [
+                      {
+                        id: 2,
+                        name: 'Verified Certificate',
+                        selected: false,
+                        deleted: false,
+                      },
+                      {
+                        id: 1,
+                        name: 'Audit',
+                        selected: false,
+                        deleted: false,
+                      },
+                    ],
+                  },
+                ],
+                selected_partition_index: -1,
+                selected_groups_label: '',
+              },
+              enable_copy_paste_units: false,
+            },
+            {
+              id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@256f17a44983429fb1a60802203ee4e0',
+              display_name: 'Video Presentation Styles',
+              category: 'vertical',
+              has_children: true,
+              edited_on: 'Dec 28, 2023 at 10:00 UTC',
+              published: true,
+              published_on: 'Dec 28, 2023 at 10:00 UTC',
+              studio_url: '/container/block-v1:edX+DemoX+Demo_Course+type@vertical+block@256f17a44983429fb1a60802203ee4e0',
+              released_to_students: true,
+              release_date: 'Feb 05, 2013 at 05:00 UTC',
+              visibility_state: 'live',
+              has_explicit_staff_lock: false,
+              start: '2013-02-05T05:00:00Z',
+              graded: false,
+              due_date: '',
+              due: null,
+              relative_weeks_due: null,
+              format: null,
+              course_graders: [
+                'Homework',
+                'Exam',
+              ],
+              has_changes: false,
+              actions: {
+                deletable: true,
+                draggable: true,
+                childAddable: true,
+                duplicable: true,
+              },
+              explanatory_message: null,
+              group_access: {},
+              user_partitions: [
+                {
+                  id: 50,
+                  name: 'Enrollment Track Groups',
+                  scheme: 'enrollment_track',
+                  groups: [
+                    {
+                      id: 2,
+                      name: 'Verified Certificate',
+                      selected: false,
+                      deleted: false,
+                    },
+                    {
+                      id: 1,
+                      name: 'Audit',
+                      selected: false,
+                      deleted: false,
+                    },
+                  ],
+                },
+              ],
+              show_correctness: 'always',
+              discussion_enabled: true,
+              ancestor_has_staff_lock: false,
+              user_partition_info: {
+                selectable_partitions: [
+                  {
+                    id: 50,
+                    name: 'Enrollment Track Groups',
+                    scheme: 'enrollment_track',
+                    groups: [
+                      {
+                        id: 2,
+                        name: 'Verified Certificate',
+                        selected: false,
+                        deleted: false,
+                      },
+                      {
+                        id: 1,
+                        name: 'Audit',
+                        selected: false,
+                        deleted: false,
+                      },
+                    ],
+                  },
+                ],
+                selected_partition_index: -1,
+                selected_groups_label: '',
+              },
+              enable_copy_paste_units: false,
+            },
+            {
+              id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@e3601c0abee6427d8c17e6d6f8fdddd1',
+              display_name: 'Interactive Questions',
+              category: 'vertical',
+              has_children: true,
+              edited_on: 'Dec 28, 2023 at 10:00 UTC',
+              published: true,
+              published_on: 'Dec 28, 2023 at 10:00 UTC',
+              studio_url: '/container/block-v1:edX+DemoX+Demo_Course+type@vertical+block@e3601c0abee6427d8c17e6d6f8fdddd1',
+              released_to_students: true,
+              release_date: 'Feb 05, 2013 at 05:00 UTC',
+              visibility_state: 'live',
+              has_explicit_staff_lock: false,
+              start: '2013-02-05T05:00:00Z',
+              graded: false,
+              due_date: '',
+              due: null,
+              relative_weeks_due: null,
+              format: null,
+              course_graders: [
+                'Homework',
+                'Exam',
+              ],
+              has_changes: false,
+              actions: {
+                deletable: true,
+                draggable: true,
+                childAddable: true,
+                duplicable: true,
+              },
+              explanatory_message: null,
+              group_access: {},
+              user_partitions: [
+                {
+                  id: 50,
+                  name: 'Enrollment Track Groups',
+                  scheme: 'enrollment_track',
+                  groups: [
+                    {
+                      id: 2,
+                      name: 'Verified Certificate',
+                      selected: false,
+                      deleted: false,
+                    },
+                    {
+                      id: 1,
+                      name: 'Audit',
+                      selected: false,
+                      deleted: false,
+                    },
+                  ],
+                },
+              ],
+              show_correctness: 'always',
+              discussion_enabled: true,
+              ancestor_has_staff_lock: false,
+              user_partition_info: {
+                selectable_partitions: [
+                  {
+                    id: 50,
+                    name: 'Enrollment Track Groups',
+                    scheme: 'enrollment_track',
+                    groups: [
+                      {
+                        id: 2,
+                        name: 'Verified Certificate',
+                        selected: false,
+                        deleted: false,
+                      },
+                      {
+                        id: 1,
+                        name: 'Audit',
+                        selected: false,
+                        deleted: false,
+                      },
+                    ],
+                  },
+                ],
+                selected_partition_index: -1,
+                selected_groups_label: '',
+              },
+              enable_copy_paste_units: false,
+            },
+            {
+              id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@a79d59cd72034188a71d388f4954a606',
+              display_name: 'Exciting Labs and Tools',
+              category: 'vertical',
+              has_children: true,
+              edited_on: 'Dec 28, 2023 at 10:00 UTC',
+              published: true,
+              published_on: 'Dec 28, 2023 at 10:00 UTC',
+              studio_url: '/container/block-v1:edX+DemoX+Demo_Course+type@vertical+block@a79d59cd72034188a71d388f4954a606',
+              released_to_students: true,
+              release_date: 'Feb 05, 2013 at 05:00 UTC',
+              visibility_state: 'live',
+              has_explicit_staff_lock: false,
+              start: '2013-02-05T05:00:00Z',
+              graded: false,
+              due_date: '',
+              due: null,
+              relative_weeks_due: null,
+              format: null,
+              course_graders: [
+                'Homework',
+                'Exam',
+              ],
+              has_changes: false,
+              actions: {
+                deletable: true,
+                draggable: true,
+                childAddable: true,
+                duplicable: true,
+              },
+              explanatory_message: null,
+              group_access: {},
+              user_partitions: [
+                {
+                  id: 50,
+                  name: 'Enrollment Track Groups',
+                  scheme: 'enrollment_track',
+                  groups: [
+                    {
+                      id: 2,
+                      name: 'Verified Certificate',
+                      selected: false,
+                      deleted: false,
+                    },
+                    {
+                      id: 1,
+                      name: 'Audit',
+                      selected: false,
+                      deleted: false,
+                    },
+                  ],
+                },
+              ],
+              show_correctness: 'always',
+              discussion_enabled: true,
+              ancestor_has_staff_lock: false,
+              user_partition_info: {
+                selectable_partitions: [
+                  {
+                    id: 50,
+                    name: 'Enrollment Track Groups',
+                    scheme: 'enrollment_track',
+                    groups: [
+                      {
+                        id: 2,
+                        name: 'Verified Certificate',
+                        selected: false,
+                        deleted: false,
+                      },
+                      {
+                        id: 1,
+                        name: 'Audit',
+                        selected: false,
+                        deleted: false,
+                      },
+                    ],
+                  },
+                ],
+                selected_partition_index: -1,
+                selected_groups_label: '',
+              },
+              enable_copy_paste_units: false,
+            },
+            {
+              id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@134df56c516a4a0dbb24dd5facef746e',
+              display_name: 'Reading Assignments',
+              category: 'vertical',
+              has_children: true,
+              edited_on: 'Dec 28, 2023 at 10:00 UTC',
+              published: true,
+              published_on: 'Dec 28, 2023 at 10:00 UTC',
+              studio_url: '/container/block-v1:edX+DemoX+Demo_Course+type@vertical+block@134df56c516a4a0dbb24dd5facef746e',
+              released_to_students: true,
+              release_date: 'Feb 05, 2013 at 05:00 UTC',
+              visibility_state: 'live',
+              has_explicit_staff_lock: false,
+              start: '2013-02-05T05:00:00Z',
+              graded: false,
+              due_date: '',
+              due: null,
+              relative_weeks_due: null,
+              format: null,
+              course_graders: [
+                'Homework',
+                'Exam',
+              ],
+              has_changes: false,
+              actions: {
+                deletable: true,
+                draggable: true,
+                childAddable: true,
+                duplicable: true,
+              },
+              explanatory_message: null,
+              group_access: {},
+              user_partitions: [
+                {
+                  id: 50,
+                  name: 'Enrollment Track Groups',
+                  scheme: 'enrollment_track',
+                  groups: [
+                    {
+                      id: 2,
+                      name: 'Verified Certificate',
+                      selected: false,
+                      deleted: false,
+                    },
+                    {
+                      id: 1,
+                      name: 'Audit',
+                      selected: false,
+                      deleted: false,
+                    },
+                  ],
+                },
+              ],
+              show_correctness: 'always',
+              discussion_enabled: true,
+              ancestor_has_staff_lock: false,
+              user_partition_info: {
+                selectable_partitions: [
+                  {
+                    id: 50,
+                    name: 'Enrollment Track Groups',
+                    scheme: 'enrollment_track',
+                    groups: [
+                      {
+                        id: 2,
+                        name: 'Verified Certificate',
+                        selected: false,
+                        deleted: false,
+                      },
+                      {
+                        id: 1,
+                        name: 'Audit',
+                        selected: false,
+                        deleted: false,
+                      },
+                    ],
+                  },
+                ],
+                selected_partition_index: -1,
+                selected_groups_label: '',
+              },
+              enable_copy_paste_units: false,
+            },
+            {
+              id: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@d91b9e5d8bc64d57a1332d06bf2f2193',
+              display_name: 'When Are Your Exams? ',
+              category: 'vertical',
+              has_children: true,
+              edited_on: 'Dec 28, 2023 at 10:00 UTC',
+              published: true,
+              published_on: 'Dec 28, 2023 at 10:00 UTC',
+              studio_url: '/container/block-v1:edX+DemoX+Demo_Course+type@vertical+block@d91b9e5d8bc64d57a1332d06bf2f2193',
+              released_to_students: true,
+              release_date: 'Feb 05, 2013 at 05:00 UTC',
+              visibility_state: 'live',
+              has_explicit_staff_lock: false,
+              start: '2013-02-05T05:00:00Z',
+              graded: false,
+              due_date: '',
+              due: null,
+              relative_weeks_due: null,
+              format: null,
+              course_graders: [
+                'Homework',
+                'Exam',
+              ],
+              has_changes: false,
+              actions: {
+                deletable: true,
+                draggable: true,
+                childAddable: true,
+                duplicable: true,
+              },
+              explanatory_message: null,
+              group_access: {},
+              user_partitions: [
+                {
+                  id: 50,
+                  name: 'Enrollment Track Groups',
+                  scheme: 'enrollment_track',
+                  groups: [
+                    {
+                      id: 2,
+                      name: 'Verified Certificate',
+                      selected: false,
+                      deleted: false,
+                    },
+                    {
+                      id: 1,
+                      name: 'Audit',
+                      selected: false,
+                      deleted: false,
+                    },
+                  ],
+                },
+              ],
+              show_correctness: 'always',
+              discussion_enabled: true,
+              ancestor_has_staff_lock: false,
+              user_partition_info: {
+                selectable_partitions: [
+                  {
+                    id: 50,
+                    name: 'Enrollment Track Groups',
+                    scheme: 'enrollment_track',
+                    groups: [
+                      {
+                        id: 2,
+                        name: 'Verified Certificate',
+                        selected: false,
+                        deleted: false,
+                      },
+                      {
+                        id: 1,
+                        name: 'Audit',
+                        selected: false,
+                        deleted: false,
+                      },
+                    ],
+                  },
+                ],
+                selected_partition_index: -1,
+                selected_groups_label: '',
+              },
+              enable_copy_paste_units: false,
+            },
+          ],
+        },
+        ancestor_has_staff_lock: false,
+        user_partition_info: {
+          selectable_partitions: [
+            {
+              id: 50,
+              name: 'Enrollment Track Groups',
+              scheme: 'enrollment_track',
+              groups: [
+                {
+                  id: 2,
+                  name: 'Verified Certificate',
+                  selected: false,
+                  deleted: false,
+                },
+                {
+                  id: 1,
+                  name: 'Audit',
+                  selected: false,
+                  deleted: false,
+                },
+              ],
+            },
+          ],
+          selected_partition_index: -1,
+          selected_groups_label: '',
+        },
+      },
+      {
+        id: 'block-v1:edX+DemoX+Demo_Course+type@chapter+block@graded_interactions',
+        display_name: 'Example Week 1: Getting Started',
+        category: 'chapter',
+        has_children: true,
+        edited_on: 'Jan 03, 2024 at 12:06 UTC',
+        published: true,
+        published_on: 'Dec 28, 2023 at 10:00 UTC',
+        studio_url: '/course/course-v1:edX+DemoX+Demo_Course?show=block-v1%3AedX%2BDemoX%2BDemo_Course%2Btype%40chapter%2Bblock%40interactive_demonstrations',
+        released_to_students: true,
+        release_date: 'Feb 05, 2013 at 05:00 UTC',
+        visibility_state: 'live',
+        has_explicit_staff_lock: false,
+        start: '2013-02-05T05:00:00Z',
+        graded: false,
+        due_date: '',
+        due: null,
+        relative_weeks_due: null,
+        format: null,
+        course_graders: [
+          'Homework',
+          'Exam',
+        ],
+        has_changes: null,
+        actions: {
+          deletable: true,
+          draggable: true,
+          childAddable: true,
+          duplicable: true,
+        },
+        explanatory_message: null,
+        group_access: {},
+        user_partitions: [
+          {
+            id: 50,
+            name: 'Enrollment Track Groups',
+            scheme: 'enrollment_track',
+            groups: [
+              {
+                id: 2,
+                name: 'Verified Certificate',
+                selected: false,
+                deleted: false,
+              },
+              {
+                id: 1,
+                name: 'Audit',
+                selected: false,
+                deleted: false,
+              },
+            ],
+          },
+        ],
+        show_correctness: 'always',
+        highlights: [],
+        highlights_enabled: true,
+        highlights_preview_only: false,
+        highlights_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/developing_course/course_sections.html#set-section-highlights-for-weekly-course-highlight-messages',
+        ancestor_has_staff_lock: false,
+        user_partition_info: {
+          selectable_partitions: [
+            {
+              id: 50,
+              name: 'Enrollment Track Groups',
+              scheme: 'enrollment_track',
+              groups: [
+                {
+                  id: 2,
+                  name: 'Verified Certificate',
+                  selected: false,
+                  deleted: false,
+                },
+                {
+                  id: 1,
+                  name: 'Audit',
+                  selected: false,
+                  deleted: false,
+                },
+              ],
+            },
+          ],
+          selected_partition_index: -1,
+          selected_groups_label: '',
+        },
+      },
+      {
+        id: 'block-v1:edX+DemoX+Demo_Course+type@course+block@course',
+        display_name: 'Demonstration Course',
+        category: 'course',
+        has_children: true,
+        unit_level_discussions: false,
+        edited_on: 'Jan 03, 2024 at 12:06 UTC',
+        published: true,
+        published_on: 'Jan 03, 2024 at 08:57 UTC',
+        studio_url: '/course/course-v1:edX+DemoX+Demo_Course',
+        released_to_students: true,
+        release_date: 'Feb 05, 2013 at 05:00 UTC',
+        visibility_state: null,
+        has_explicit_staff_lock: false,
+        start: '2013-02-05T05:00:00Z',
+        graded: false,
+        due_date: '',
+        due: null,
+        relative_weeks_due: null,
+        format: null,
+        course_graders: [
+          'Homework',
+          'Exam',
+        ],
+        has_changes: null,
+        actions: {
+          deletable: true,
+          draggable: true,
+          childAddable: true,
+          duplicable: true,
+        },
+        explanatory_message: null,
+        group_access: {},
+        user_partitions: [
+          {
+            id: 50,
+            name: 'Enrollment Track Groups',
+            scheme: 'enrollment_track',
+            groups: [
+              {
+                id: 2,
+                name: 'Verified Certificate',
+                selected: false,
+                deleted: false,
+              },
+              {
+                id: 1,
+                name: 'Audit',
+                selected: false,
+                deleted: false,
+              },
+            ],
+          },
+        ],
+        show_correctness: 'always',
+        highlights_enabled_for_messaging: false,
+        highlights_enabled: true,
+        highlights_preview_only: false,
+        highlights_doc_url: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/developing_course/course_sections.html#set-section-highlights-for-weekly-course-highlight-messages',
+        enable_proctored_exams: false,
+        create_zendesk_tickets: true,
+        enable_timed_exams: true,
+        ancestor_has_staff_lock: false,
+        user_partition_info: {
+          selectable_partitions: [
+            {
+              id: 50,
+              name: 'Enrollment Track Groups',
+              scheme: 'enrollment_track',
+              groups: [
+                {
+                  id: 2,
+                  name: 'Verified Certificate',
+                  selected: false,
+                  deleted: false,
+                },
+                {
+                  id: 1,
+                  name: 'Audit',
+                  selected: false,
+                  deleted: false,
+                },
+              ],
+            },
+          ],
+          selected_partition_index: -1,
+          selected_groups_label: '',
+        },
+      },
+    ],
+  },
+  ancestor_has_staff_lock: false,
+  user_partition_info: {
+    selectable_partitions: [
+      {
+        id: 50,
+        name: 'Enrollment Track Groups',
+        scheme: 'enrollment_track',
+        groups: [
+          {
+            id: 2,
+            name: 'Verified Certificate',
+            selected: false,
+            deleted: false,
+          },
+          {
+            id: 1,
+            name: 'Audit',
+            selected: false,
+            deleted: false,
+          },
+        ],
+      },
+    ],
+    selected_partition_index: -1,
+    selected_groups_label: '',
+  },
+  enable_copy_paste_units: false,
+  edited_by: 'edx',
+  published_by: null,
+  currently_visible_to_students: true,
+  has_partition_group_components: false,
+  release_date_from: 'Section "Example Week 1: Getting Started"',
+  staff_lock_from: null,
+};
diff --git a/src/course-unit/__mocks__/courseVerticalChildren.js b/src/course-unit/__mocks__/courseVerticalChildren.js
new file mode 100644
index 0000000000..32bd8272b6
--- /dev/null
+++ b/src/course-unit/__mocks__/courseVerticalChildren.js
@@ -0,0 +1,148 @@
+module.exports = {
+  children: [
+    {
+      name: 'Discussion',
+      block_id: 'block-v1:OpenedX+L153+3T2023+type@discussion+block@5a28279f24344723a96b1268d3b7cfc0',
+      block_type: 'discussion',
+      actions: {
+        can_copy: true,
+        can_duplicate: true,
+        can_move: true,
+        can_manage_access: true,
+        can_delete: true,
+      },
+      user_partition_info: {
+        selectable_partitions: [
+          {
+            id: 970807507,
+            name: 'Content Groups',
+            scheme: 'cohort',
+            groups: [
+              {
+                id: 1959537066,
+                name: 'Group 1',
+                selected: false,
+                deleted: false,
+              },
+              {
+                id: 108068059,
+                name: 'Group 2',
+                selected: false,
+                deleted: false,
+              },
+            ],
+          },
+        ],
+        selected_partition_index: -1,
+        selected_groups_label: '',
+      },
+      user_partitions: [
+        {
+          id: 970807507,
+          name: 'Content Groups',
+          scheme: 'cohort',
+          groups: [
+            {
+              id: 1959537066,
+              name: 'Group 1',
+              selected: false,
+              deleted: false,
+            },
+            {
+              id: 108068059,
+              name: 'Group 2',
+              selected: false,
+              deleted: false,
+            },
+          ],
+        },
+        {
+          id: 50,
+          name: 'Enrollment Track Groups',
+          scheme: 'enrollment_track',
+          groups: [
+            {
+              id: 1,
+              name: 'Audit',
+              selected: false,
+              deleted: false,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      name: 'Drag and Drop',
+      block_id: 'block-v1:OpenedX+L153+3T2023+type@drag-and-drop-v2+block@b33cf1f6df4c41639659bc91132eeb02',
+      block_type: 'drag-and-drop-v2',
+      actions: {
+        can_copy: true,
+        can_duplicate: true,
+        can_move: true,
+        can_manage_access: true,
+        can_delete: true,
+      },
+      user_partition_info: {
+        selectable_partitions: [
+          {
+            id: 970807507,
+            name: 'Content Groups',
+            scheme: 'cohort',
+            groups: [
+              {
+                id: 1959537066,
+                name: 'Group 1',
+                selected: false,
+                deleted: false,
+              },
+              {
+                id: 108068059,
+                name: 'Group 2',
+                selected: false,
+                deleted: false,
+              },
+            ],
+          },
+        ],
+        selected_partition_index: -1,
+        selected_groups_label: '',
+      },
+      user_partitions: [
+        {
+          id: 970807507,
+          name: 'Content Groups',
+          scheme: 'cohort',
+          groups: [
+            {
+              id: 1959537066,
+              name: 'Group 1',
+              selected: false,
+              deleted: false,
+            },
+            {
+              id: 108068059,
+              name: 'Group 2',
+              selected: false,
+              deleted: false,
+            },
+          ],
+        },
+        {
+          id: 50,
+          name: 'Enrollment Track Groups',
+          scheme: 'enrollment_track',
+          groups: [
+            {
+              id: 1,
+              name: 'Audit',
+              selected: false,
+              deleted: false,
+            },
+          ],
+        },
+      ],
+    },
+  ],
+  isPublished: false,
+  canPasteComponent: true,
+};
diff --git a/src/course-unit/__mocks__/index.js b/src/course-unit/__mocks__/index.js
new file mode 100644
index 0000000000..bfbbb9a4bb
--- /dev/null
+++ b/src/course-unit/__mocks__/index.js
@@ -0,0 +1,7 @@
+export { default as courseUnitIndexMock } from './courseUnitIndex';
+export { default as courseSectionVerticalMock } from './courseSectionVertical';
+export { default as courseUnitMock } from './courseUnit';
+export { default as courseCreateXblockMock } from './courseCreateXblock';
+export { default as courseVerticalChildrenMock } from './courseVerticalChildren';
+export { default as clipboardMockResponse } from './clipboardResponse';
+export { default as courseOutlineInfoMock } from './courseOutlineInfo';
diff --git a/src/course-unit/add-component/AddComponent.jsx b/src/course-unit/add-component/AddComponent.jsx
new file mode 100644
index 0000000000..70962a7ac6
--- /dev/null
+++ b/src/course-unit/add-component/AddComponent.jsx
@@ -0,0 +1,201 @@
+import { useCallback, useState } from 'react';
+import PropTypes from 'prop-types';
+import { useSelector } from 'react-redux';
+import { useNavigate } from 'react-router-dom';
+import { useIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
+import {
+  ActionRow, Button, StandardModal, useToggle,
+} from '@openedx/paragon';
+
+import { getCourseSectionVertical } from '../data/selectors';
+import { COMPONENT_TYPES } from '../../generic/block-type-utils/constants';
+import ComponentModalView from './add-component-modals/ComponentModalView';
+import AddComponentButton from './add-component-btn';
+import messages from './messages';
+import { ComponentPicker } from '../../library-authoring/component-picker';
+import { messageTypes } from '../constants';
+import { useIframe } from '../context/hooks';
+import { useEventListener } from '../../generic/hooks';
+
+const AddComponent = ({ blockId, handleCreateNewCourseXBlock }) => {
+  const navigate = useNavigate();
+  const intl = useIntl();
+  const [isOpenAdvanced, openAdvanced, closeAdvanced] = useToggle(false);
+  const [isOpenHtml, openHtml, closeHtml] = useToggle(false);
+  const [isOpenOpenAssessment, openOpenAssessment, closeOpenAssessment] = useToggle(false);
+  const { componentTemplates } = useSelector(getCourseSectionVertical);
+  const [isAddLibraryContentModalOpen, showAddLibraryContentModal, closeAddLibraryContentModal] = useToggle();
+  const [isSelectLibraryContentModalOpen, showSelectLibraryContentModal, closeSelectLibraryContentModal] = useToggle();
+  const [selectedComponents, setSelectedComponents] = useState([]);
+  const { sendMessageToIframe } = useIframe();
+
+  const receiveMessage = useCallback(({ data: { type } }) => {
+    if (type === messageTypes.showMultipleComponentPicker) {
+      showSelectLibraryContentModal();
+    }
+  }, [showSelectLibraryContentModal]);
+
+  useEventListener('message', receiveMessage);
+
+  const onComponentSelectionSubmit = useCallback(() => {
+    sendMessageToIframe(messageTypes.addSelectedComponentsToBank, { selectedComponents });
+    closeSelectLibraryContentModal();
+  }, [selectedComponents]);
+
+  const handleLibraryV2Selection = useCallback((selection) => {
+    handleCreateNewCourseXBlock({
+      type: COMPONENT_TYPES.libraryV2,
+      category: selection.blockType,
+      parentLocator: blockId,
+      libraryContentKey: selection.usageKey,
+    });
+    closeAddLibraryContentModal();
+  }, []);
+
+  const handleCreateNewXBlock = (type, moduleName) => {
+    switch (type) {
+      case COMPONENT_TYPES.discussion:
+      case COMPONENT_TYPES.dragAndDrop:
+        handleCreateNewCourseXBlock({ type, parentLocator: blockId });
+        break;
+      case COMPONENT_TYPES.problem:
+      case COMPONENT_TYPES.video:
+        handleCreateNewCourseXBlock({ type, parentLocator: blockId }, ({ courseKey, locator }) => {
+          navigate(`/course/${courseKey}/editor/${type}/${locator}`);
+        });
+        break;
+        // TODO: The library functional will be a bit different of current legacy (CMS)
+        //  behaviour and this ticket is on hold (blocked by other development team).
+      case COMPONENT_TYPES.library:
+        handleCreateNewCourseXBlock({ type, category: 'library_content', parentLocator: blockId });
+        break;
+      case COMPONENT_TYPES.itembank:
+        handleCreateNewCourseXBlock({ type, category: 'itembank', parentLocator: blockId });
+        break;
+      case COMPONENT_TYPES.libraryV2:
+        showAddLibraryContentModal();
+        break;
+      case COMPONENT_TYPES.advanced:
+        handleCreateNewCourseXBlock({
+          type: moduleName, category: moduleName, parentLocator: blockId,
+        });
+        break;
+      case COMPONENT_TYPES.openassessment:
+        handleCreateNewCourseXBlock({
+          boilerplate: moduleName, category: type, parentLocator: blockId,
+        });
+        break;
+      case COMPONENT_TYPES.html:
+        handleCreateNewCourseXBlock({
+          type,
+          boilerplate: moduleName,
+          parentLocator: blockId,
+        }, ({ courseKey, locator }) => {
+          navigate(`/course/${courseKey}/editor/html/${locator}`);
+        });
+        break;
+      default:
+    }
+  };
+
+  if (!Object.keys(componentTemplates).length) {
+    return null;
+  }
+
+  return (
+    <div className="py-4">
+      <h5 className="h3 mb-4 text-center">{intl.formatMessage(messages.title)}</h5>
+      <ul className="new-component-type list-unstyled m-0 d-flex flex-wrap justify-content-center">
+        {componentTemplates.map((component) => {
+          const { type, displayName, beta } = component;
+          let modalParams;
+
+          if (!component.templates.length) {
+            return null;
+          }
+
+          switch (type) {
+            case COMPONENT_TYPES.advanced:
+              modalParams = {
+                open: openAdvanced,
+                close: closeAdvanced,
+                isOpen: isOpenAdvanced,
+              };
+              break;
+            case COMPONENT_TYPES.html:
+              modalParams = {
+                open: openHtml,
+                close: closeHtml,
+                isOpen: isOpenHtml,
+              };
+              break;
+            case COMPONENT_TYPES.openassessment:
+              modalParams = {
+                open: openOpenAssessment,
+                close: closeOpenAssessment,
+                isOpen: isOpenOpenAssessment,
+              };
+              break;
+            default:
+              return (
+                <li key={type}>
+                  <AddComponentButton
+                    onClick={() => handleCreateNewXBlock(type)}
+                    displayName={displayName}
+                    type={type}
+                    beta={beta}
+                  />
+                </li>
+              );
+          }
+
+          return (
+            <ComponentModalView
+              key={type}
+              component={component}
+              handleCreateNewXBlock={handleCreateNewXBlock}
+              modalParams={modalParams}
+            />
+          );
+        })}
+      </ul>
+      <StandardModal
+        title={
+          isAddLibraryContentModalOpen
+            ? intl.formatMessage(messages.singleComponentPickerModalTitle)
+            : intl.formatMessage(messages.multipleComponentPickerModalTitle)
+        }
+        isOpen={isAddLibraryContentModalOpen || isSelectLibraryContentModalOpen}
+        onClose={() => {
+          closeAddLibraryContentModal();
+          closeSelectLibraryContentModal();
+        }}
+        isOverflowVisible={false}
+        size="xl"
+        footerNode={
+          isSelectLibraryContentModalOpen && (
+          <ActionRow>
+            <Button variant="primary" onClick={onComponentSelectionSubmit}>
+              <FormattedMessage {...messages.multipleComponentPickerModalBtn} />
+            </Button>
+          </ActionRow>
+          )
+        }
+      >
+        <ComponentPicker
+          showOnlyPublished
+          componentPickerMode={isAddLibraryContentModalOpen ? 'single' : 'multiple'}
+          onComponentSelected={handleLibraryV2Selection}
+          onChangeComponentSelection={setSelectedComponents}
+        />
+      </StandardModal>
+    </div>
+  );
+};
+
+AddComponent.propTypes = {
+  blockId: PropTypes.string.isRequired,
+  handleCreateNewCourseXBlock: PropTypes.func.isRequired,
+};
+
+export default AddComponent;
diff --git a/src/course-unit/add-component/AddComponent.scss b/src/course-unit/add-component/AddComponent.scss
new file mode 100644
index 0000000000..afb97fafd0
--- /dev/null
+++ b/src/course-unit/add-component/AddComponent.scss
@@ -0,0 +1,16 @@
+.course-unit {
+  .new-component-type {
+    gap: .75rem;
+  }
+
+  .add-component-button {
+    @include pgn-box-shadow(1, "down");
+
+    width: 11.63rem;
+    height: 6.875rem;
+  }
+}
+
+.add-component-modal-radio .pgn__form-radio-input {
+  min-width: 1.25rem;
+}
diff --git a/src/course-unit/add-component/AddComponent.test.jsx b/src/course-unit/add-component/AddComponent.test.jsx
new file mode 100644
index 0000000000..0971c20088
--- /dev/null
+++ b/src/course-unit/add-component/AddComponent.test.jsx
@@ -0,0 +1,602 @@
+/* eslint-disable react/prop-types */
+import MockAdapter from 'axios-mock-adapter';
+import {
+  act, render, screen, waitFor, within,
+} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { initializeMockApp } from '@edx/frontend-platform';
+import { AppProvider } from '@edx/frontend-platform/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+
+import initializeStore from '../../store';
+import { executeThunk } from '../../utils';
+import { fetchCourseSectionVerticalData } from '../data/thunk';
+import { getCourseSectionVerticalApiUrl } from '../data/api';
+import { courseSectionVerticalMock } from '../__mocks__';
+import { COMPONENT_TYPES } from '../../generic/block-type-utils/constants';
+import AddComponent from './AddComponent';
+import messages from './messages';
+import { IframeProvider } from '../context/iFrameContext';
+import { messageTypes } from '../constants';
+
+let store;
+let axiosMock;
+const blockId = '123';
+const handleCreateNewCourseXBlockMock = jest.fn();
+const usageKey = 'lb:Axim:TEST:html:571fe018-f3ce-45c9-8f53-5dafcb422fddest-usage-key';
+
+// Mock ComponentPicker to call onComponentSelected on click
+jest.mock('../../library-authoring/component-picker', () => ({
+  ComponentPicker: (props) => {
+    const onClick = () => {
+      if (props.componentPickerMode === 'single') {
+        props.onComponentSelected({
+          usageKey,
+          blockType: 'html',
+        });
+      } else {
+        props.onChangeComponentSelection([{
+          usageKey,
+          blockType: 'html',
+        }]);
+      }
+    };
+    return (
+      <button type="submit" onClick={onClick}>
+        Dummy button
+      </button>
+    );
+  },
+}));
+
+const mockSendMessageToIframe = jest.fn();
+jest.mock('../context/hooks', () => ({
+  useIframe: () => ({
+    sendMessageToIframe: mockSendMessageToIframe,
+  }),
+}));
+
+const renderComponent = (props) => render(
+  <AppProvider store={store}>
+    <IntlProvider locale="en">
+      <IframeProvider>
+        <AddComponent
+          blockId={blockId}
+          handleCreateNewCourseXBlock={handleCreateNewCourseXBlockMock}
+          {...props}
+        />
+      </IframeProvider>
+    </IntlProvider>
+  </AppProvider>,
+);
+
+describe('<AddComponent />', () => {
+  beforeEach(async () => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+
+    store = initializeStore();
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+    axiosMock
+      .onGet(getCourseSectionVerticalApiUrl(blockId))
+      .reply(200, courseSectionVerticalMock);
+    await executeThunk(fetchCourseSectionVerticalData(blockId), store.dispatch);
+  });
+
+  it('render AddComponent component correctly', () => {
+    const { getByRole } = renderComponent();
+    const componentTemplates = courseSectionVerticalMock.component_templates;
+
+    expect(getByRole('heading', { name: messages.title.defaultMessage })).toBeInTheDocument();
+    Object.keys(componentTemplates).forEach((component) => {
+      const btn = getByRole('button', {
+        name: new RegExp(
+          `${componentTemplates[component].type
+          } ${messages.buttonText.defaultMessage} ${componentTemplates[component].display_name}`,
+          'i',
+        ),
+      });
+      expect(btn).toBeInTheDocument();
+      if (component.beta) {
+        expect(within(btn).queryByText('Beta')).toBeInTheDocument();
+      }
+    });
+  });
+
+  it('AddComponent component doesn\'t render when there aren\'t componentTemplates', async () => {
+    axiosMock
+      .onGet(getCourseSectionVerticalApiUrl(blockId))
+      .reply(200, {
+        ...courseSectionVerticalMock,
+        component_templates: [],
+      });
+    await executeThunk(fetchCourseSectionVerticalData(blockId), store.dispatch);
+
+    const { queryByRole } = renderComponent();
+
+    expect(queryByRole('heading', { name: messages.title.defaultMessage })).not.toBeInTheDocument();
+  });
+
+  it('AddComponent component item doesn\'t render when there aren\'t templates', async () => {
+    const componentTemplates = courseSectionVerticalMock.component_templates;
+    axiosMock
+      .onGet(getCourseSectionVerticalApiUrl(blockId))
+      .reply(200, {
+        ...courseSectionVerticalMock,
+        component_templates: [
+          ...courseSectionVerticalMock.component_templates.map((component) => {
+            if (component.type === COMPONENT_TYPES.discussion) {
+              return {
+                ...component,
+                templates: [],
+              };
+            }
+
+            return component;
+          }),
+        ],
+      });
+    await executeThunk(fetchCourseSectionVerticalData(blockId), store.dispatch);
+
+    const { queryByRole, getByRole } = renderComponent();
+
+    Object.keys(componentTemplates).map((component) => {
+      if (componentTemplates[component].type === COMPONENT_TYPES.discussion) {
+        return expect(queryByRole('button', {
+          name: new RegExp(`${messages.buttonText.defaultMessage} ${componentTemplates[component].display_name}`, 'i'),
+        })).not.toBeInTheDocument();
+      }
+
+      return expect(getByRole('button', {
+        name: new RegExp(
+          `${componentTemplates[component].type
+          } ${messages.buttonText.defaultMessage} ${componentTemplates[component].display_name}`,
+          'i',
+        ),
+      })).toBeInTheDocument();
+    });
+  });
+
+  it('handleCreateNewCourseXblock does\'t call with custom component create button is clicked', async () => {
+    axiosMock
+      .onGet(getCourseSectionVerticalApiUrl(blockId))
+      .reply(200, {
+        ...courseSectionVerticalMock,
+        component_templates: [
+          {
+            type: 'custom',
+            templates: [{ display_name: 'Custom' }],
+            display_name: 'Custom',
+            support_legend: {},
+          },
+        ],
+      });
+    await executeThunk(fetchCourseSectionVerticalData(blockId), store.dispatch);
+
+    const { getByRole } = renderComponent();
+
+    const customComponentButton = getByRole('button', {
+      name: new RegExp(`${messages.buttonText.defaultMessage} Custom`, 'i'),
+    });
+
+    userEvent.click(customComponentButton);
+    expect(handleCreateNewCourseXBlockMock).not.toHaveBeenCalled();
+  });
+
+  it('calls handleCreateNewCourseXblock with correct parameters when Discussion xblock create button is clicked', () => {
+    const { getByRole } = renderComponent();
+
+    const discussionButton = getByRole('button', {
+      name: new RegExp(`${messages.buttonText.defaultMessage} Discussion`, 'i'),
+    });
+
+    userEvent.click(discussionButton);
+    expect(handleCreateNewCourseXBlockMock).toHaveBeenCalled();
+    expect(handleCreateNewCourseXBlockMock).toHaveBeenCalledWith({
+      parentLocator: '123',
+      type: COMPONENT_TYPES.discussion,
+    });
+  });
+
+  it('calls handleCreateNewCourseXblock with correct parameters when Drag-and-Drop xblock create button is clicked', () => {
+    const { getByRole } = renderComponent();
+
+    const discussionButton = getByRole('button', {
+      name: new RegExp(`${messages.buttonText.defaultMessage} Drag and Drop`, 'i'),
+    });
+
+    userEvent.click(discussionButton);
+    expect(handleCreateNewCourseXBlockMock).toHaveBeenCalled();
+    expect(handleCreateNewCourseXBlockMock).toHaveBeenCalledWith({
+      parentLocator: '123',
+      type: COMPONENT_TYPES.dragAndDrop,
+    });
+  });
+
+  it('calls handleCreateNewCourseXBlock with correct parameters when Problem xblock create button is clicked', () => {
+    const { getByRole } = renderComponent();
+
+    const discussionButton = getByRole('button', {
+      name: new RegExp(`problem ${messages.buttonText.defaultMessage} Problem`, 'i'),
+    });
+
+    userEvent.click(discussionButton);
+    expect(handleCreateNewCourseXBlockMock).toHaveBeenCalled();
+    expect(handleCreateNewCourseXBlockMock).toHaveBeenCalledWith({
+      parentLocator: '123',
+      type: COMPONENT_TYPES.problem,
+    }, expect.any(Function));
+  });
+
+  it('calls handleCreateNewCourseXBlock with correct parameters when Problem bank xblock create button is clicked', () => {
+    const { getByRole } = renderComponent();
+
+    const problemBankBtn = getByRole('button', {
+      name: new RegExp(`${messages.buttonText.defaultMessage} Problem Bank`, 'i'),
+    });
+
+    userEvent.click(problemBankBtn);
+    expect(handleCreateNewCourseXBlockMock).toHaveBeenCalled();
+    expect(handleCreateNewCourseXBlockMock).toHaveBeenCalledWith({
+      parentLocator: '123',
+      type: COMPONENT_TYPES.itembank,
+      category: 'itembank',
+    });
+  });
+
+  it('calls handleCreateNewCourseXBlock with correct parameters when Video xblock create button is clicked', () => {
+    const { getByRole } = renderComponent();
+
+    const discussionButton = getByRole('button', {
+      name: new RegExp(`${messages.buttonText.defaultMessage} Video`, 'i'),
+    });
+
+    userEvent.click(discussionButton);
+    expect(handleCreateNewCourseXBlockMock).toHaveBeenCalled();
+    expect(handleCreateNewCourseXBlockMock).toHaveBeenCalledWith({
+      parentLocator: '123',
+      type: COMPONENT_TYPES.video,
+    }, expect.any(Function));
+  });
+
+  it('creates new "Library" xblock on click', () => {
+    const { getByRole } = renderComponent();
+
+    const libraryButton = getByRole('button', {
+      name: new RegExp(`${messages.buttonText.defaultMessage} Legacy Library Content`, 'i'),
+    });
+
+    userEvent.click(libraryButton);
+    expect(handleCreateNewCourseXBlockMock).toHaveBeenCalled();
+    expect(handleCreateNewCourseXBlockMock).toHaveBeenCalledWith({
+      parentLocator: '123',
+      category: 'library_content',
+      type: COMPONENT_TYPES.library,
+    });
+  });
+
+  it('verifies modal behavior on button click', async () => {
+    const { getByRole, queryByRole } = renderComponent();
+    const advancedBtn = getByRole('button', {
+      name: new RegExp(`${messages.buttonText.defaultMessage} Advanced`, 'i'),
+    });
+
+    userEvent.click(advancedBtn);
+    const modalContainer = getByRole('dialog');
+
+    expect(within(modalContainer).getByRole('button', { name: messages.modalContainerCancelBtnText.defaultMessage })).toBeInTheDocument();
+    expect(within(modalContainer).getByRole('button', { name: messages.modalBtnText.defaultMessage })).toBeInTheDocument();
+
+    userEvent.click(within(modalContainer).getByRole('button', { name: messages.modalContainerCancelBtnText.defaultMessage }));
+
+    expect(queryByRole('button', { name: messages.modalContainerCancelBtnText.defaultMessage })).toBeNull();
+    expect(queryByRole('button', { name: messages.modalBtnText.defaultMessage })).toBeNull();
+  });
+
+  it('verifies "Advanced" component selection in modal', async () => {
+    const { getByRole, getByText } = renderComponent();
+    const advancedBtn = getByRole('button', {
+      name: new RegExp(`${messages.buttonText.defaultMessage} Advanced`, 'i'),
+    });
+    const componentTemplates = courseSectionVerticalMock.component_templates;
+
+    userEvent.click(advancedBtn);
+    const modalContainer = getByRole('dialog');
+
+    await waitFor(() => {
+      expect(getByText(/Add advanced component/i)).toBeInTheDocument();
+      componentTemplates.forEach((componentTemplate) => {
+        if (componentTemplate.type === COMPONENT_TYPES.advanced) {
+          componentTemplate.templates.forEach((template) => {
+            expect(within(modalContainer).getByRole('radio', { name: template.display_name })).toBeInTheDocument();
+          });
+        }
+      });
+    });
+  });
+
+  it('verifies "Text" component selection in modal', async () => {
+    const { getByRole, getByText } = renderComponent();
+    const textBtn = getByRole('button', {
+      name: new RegExp(`${messages.buttonText.defaultMessage} Text`, 'i'),
+    });
+    const componentTemplates = courseSectionVerticalMock.component_templates;
+    userEvent.click(textBtn);
+    const modalContainer = getByRole('dialog');
+
+    await waitFor(() => {
+      expect(getByText(/Add text component/i)).toBeInTheDocument();
+      componentTemplates.forEach((componentTemplate) => {
+        if (componentTemplate.type === COMPONENT_TYPES.html) {
+          componentTemplate.templates.forEach((template) => {
+            expect(within(modalContainer).getByRole('radio', { name: template.display_name })).toBeInTheDocument();
+          });
+        }
+      });
+    });
+  });
+
+  it('verifies "Open Response" component selection in modal', async () => {
+    const { getByRole, getByText } = renderComponent();
+    const openResponseBtn = getByRole('button', {
+      name: new RegExp(`${messages.buttonText.defaultMessage} Open Response`, 'i'),
+    });
+    const componentTemplates = courseSectionVerticalMock.component_templates;
+
+    userEvent.click(openResponseBtn);
+    const modalContainer = getByRole('dialog');
+
+    await waitFor(() => {
+      expect(getByText(/Add open response component/i)).toBeInTheDocument();
+      componentTemplates.forEach((componentTemplate) => {
+        if (componentTemplate.type === COMPONENT_TYPES.openassessment) {
+          componentTemplate.templates.forEach((template) => {
+            expect(within(modalContainer).getByRole('radio', { name: template.display_name })).toBeInTheDocument();
+          });
+        }
+      });
+    });
+  });
+
+  it('verifies "Advanced" component creation and submission in modal', () => {
+    const { getByRole } = renderComponent();
+    const advancedButton = getByRole('button', {
+      name: new RegExp(`${messages.buttonText.defaultMessage} Advanced`, 'i'),
+    });
+
+    userEvent.click(advancedButton);
+    const modalContainer = getByRole('dialog');
+
+    const radioInput = within(modalContainer).getByRole('radio', { name: 'Annotation' });
+    const sendBtn = within(modalContainer).getByRole('button', { name: messages.modalBtnText.defaultMessage });
+
+    expect(sendBtn).toBeDisabled();
+    userEvent.click(radioInput);
+    expect(sendBtn).not.toBeDisabled();
+
+    userEvent.click(sendBtn);
+
+    expect(handleCreateNewCourseXBlockMock).toHaveBeenCalled();
+    expect(handleCreateNewCourseXBlockMock).toHaveBeenCalledWith({
+      parentLocator: '123',
+      type: 'annotatable',
+      category: 'annotatable',
+    });
+  });
+
+  it('verifies "Text" component creation and submission in modal', () => {
+    const { getByRole } = renderComponent();
+    const textButton = getByRole('button', {
+      name: new RegExp(`${messages.buttonText.defaultMessage} Text`, 'i'),
+    });
+
+    userEvent.click(textButton);
+    const modalContainer = getByRole('dialog');
+
+    const radioInput = within(modalContainer).getByRole('radio', { name: 'Text' });
+    const sendBtn = within(modalContainer).getByRole('button', { name: messages.modalBtnText.defaultMessage });
+
+    expect(sendBtn).toBeDisabled();
+    userEvent.click(radioInput);
+    expect(sendBtn).not.toBeDisabled();
+
+    userEvent.click(sendBtn);
+
+    expect(handleCreateNewCourseXBlockMock).toHaveBeenCalled();
+    expect(handleCreateNewCourseXBlockMock).toHaveBeenCalledWith({
+      parentLocator: '123',
+      type: COMPONENT_TYPES.html,
+      boilerplate: COMPONENT_TYPES.html,
+    }, expect.any(Function));
+  });
+
+  it('verifies "Open Response" component creation and submission in modal', () => {
+    const { getByRole } = renderComponent();
+    const openResponseButton = getByRole('button', {
+      name: new RegExp(`${messages.buttonText.defaultMessage} Open Response`, 'i'),
+    });
+
+    userEvent.click(openResponseButton);
+    const modalContainer = getByRole('dialog');
+
+    const radioInput = within(modalContainer).getByRole('radio', { name: 'Peer Assessment Only' });
+    const sendBtn = within(modalContainer).getByRole('button', { name: messages.modalBtnText.defaultMessage });
+
+    expect(sendBtn).toBeDisabled();
+    userEvent.click(radioInput);
+    expect(sendBtn).not.toBeDisabled();
+
+    userEvent.click(sendBtn);
+
+    expect(handleCreateNewCourseXBlockMock).toHaveBeenCalled();
+    expect(handleCreateNewCourseXBlockMock).toHaveBeenCalledWith({
+      parentLocator: '123',
+      category: COMPONENT_TYPES.openassessment,
+      boilerplate: 'peer-assessment',
+    });
+  });
+
+  it('shows library picker on clicking v2 library content btn', async () => {
+    renderComponent();
+    const libBtn = await screen.findByRole('button', {
+      name: new RegExp(`${messages.buttonText.defaultMessage} Library content`, 'i'),
+    });
+    userEvent.click(libBtn);
+
+    // click dummy button to execute onComponentSelected prop.
+    const dummyBtn = await screen.findByRole('button', { name: 'Dummy button' });
+    userEvent.click(dummyBtn);
+
+    expect(handleCreateNewCourseXBlockMock).toHaveBeenCalled();
+    expect(handleCreateNewCourseXBlockMock).toHaveBeenCalledWith({
+      type: COMPONENT_TYPES.libraryV2,
+      parentLocator: '123',
+      category: 'html',
+      libraryContentKey: usageKey,
+    });
+  });
+
+  it('closes library component picker on close', async () => {
+    renderComponent();
+    const libBtn = await screen.findByRole('button', {
+      name: new RegExp(`${messages.buttonText.defaultMessage} Library content`, 'i'),
+    });
+    userEvent.click(libBtn);
+
+    expect(screen.queryByRole('button', { name: 'Dummy button' })).toBeInTheDocument();
+    // click dummy button to execute onComponentSelected prop.
+    const closeBtn = await screen.findByRole('button', { name: 'Close' });
+    userEvent.click(closeBtn);
+
+    expect(screen.queryByRole('button', { name: 'Dummy button' })).not.toBeInTheDocument();
+  });
+
+  it('shows component picker on window message', async () => {
+    renderComponent();
+    const message = {
+      data: {
+        type: messageTypes.showMultipleComponentPicker,
+      },
+    };
+    // Dispatch showMultipleComponentPicker message event to open the picker modal.
+    act(() => {
+      window.dispatchEvent(new MessageEvent('message', message));
+    });
+
+    // click dummy button to execute onChangeComponentSelection prop.
+    const dummyBtn = await screen.findByRole('button', { name: 'Dummy button' });
+    userEvent.click(dummyBtn);
+
+    const submitBtn = await screen.findByRole('button', { name: 'Add selected components' });
+    userEvent.click(submitBtn);
+
+    expect(mockSendMessageToIframe).toHaveBeenCalledWith(messageTypes.addSelectedComponentsToBank, {
+      selectedComponents: [{
+        blockType: 'html',
+        usageKey,
+      }],
+    });
+  });
+
+  describe('component support label', () => {
+    it('component support label is hidden if component support legend is disabled', async () => {
+      const supportLevels = ['fs', 'ps'];
+      axiosMock
+        .onGet(getCourseSectionVerticalApiUrl(blockId))
+        .reply(200, {
+          ...courseSectionVerticalMock,
+          component_templates: [
+            ...courseSectionVerticalMock.component_templates.map((component) => {
+              if (component.type === COMPONENT_TYPES.advanced) {
+                return {
+                  ...component,
+                  support_legend: { show_legend: false },
+                  templates: [
+                    ...component.templates.map((template, i) => ({
+                      ...template,
+                      support_level: supportLevels[i] || true,
+                    })),
+                  ],
+                };
+              }
+
+              return component;
+            }),
+          ],
+        });
+      await executeThunk(fetchCourseSectionVerticalData(blockId), store.dispatch);
+
+      const { getByRole } = renderComponent();
+      const advancedButton = getByRole('button', {
+        name: new RegExp(`${messages.buttonText.defaultMessage} Advanced`, 'i'),
+      });
+
+      userEvent.click(advancedButton);
+      const modalContainer = getByRole('dialog');
+      const fullySupportLabel = within(modalContainer)
+        .queryByText(messages.modalComponentSupportLabelFullySupported.defaultMessage);
+      const provisionallySupportLabel = within(modalContainer)
+        .queryByText(messages.modalComponentSupportLabelProvisionallySupported.defaultMessage);
+
+      expect(fullySupportLabel).not.toBeInTheDocument();
+      expect(provisionallySupportLabel).not.toBeInTheDocument();
+    });
+
+    it('displays component support label and tooltip in component modal', async () => {
+      const supportLevels = ['fs', 'ps'];
+      axiosMock
+        .onGet(getCourseSectionVerticalApiUrl(blockId))
+        .reply(200, {
+          ...courseSectionVerticalMock,
+          component_templates: [
+            ...courseSectionVerticalMock.component_templates.map((component) => {
+              if (component.type === COMPONENT_TYPES.advanced) {
+                return {
+                  ...component,
+                  support_legend: { show_legend: true },
+                  templates: [
+                    ...component.templates.map((template, i) => ({
+                      ...template,
+                      support_level: supportLevels[i] || true,
+                    })),
+                  ],
+                };
+              }
+
+              return component;
+            }),
+          ],
+        });
+      await executeThunk(fetchCourseSectionVerticalData(blockId), store.dispatch);
+
+      const { getByRole, getByText } = renderComponent();
+      const advancedButton = getByRole('button', {
+        name: new RegExp(`${messages.buttonText.defaultMessage} Advanced`, 'i'),
+      });
+
+      userEvent.click(advancedButton);
+      const modalContainer = getByRole('dialog');
+      const fullySupportLabel = within(modalContainer)
+        .getByText(messages.modalComponentSupportLabelFullySupported.defaultMessage);
+      const provisionallySupportLabel = within(modalContainer)
+        .getByText(messages.modalComponentSupportLabelProvisionallySupported.defaultMessage);
+
+      expect(fullySupportLabel).toBeInTheDocument();
+      expect(provisionallySupportLabel).toBeInTheDocument();
+
+      userEvent.hover(fullySupportLabel);
+      expect(getByText(messages.modalComponentSupportTooltipFullySupported.defaultMessage)).toBeInTheDocument();
+
+      userEvent.hover(provisionallySupportLabel);
+      expect(getByText(messages.modalComponentSupportTooltipProvisionallySupported.defaultMessage)).toBeInTheDocument();
+    });
+  });
+});
diff --git a/src/course-unit/add-component/add-component-btn/AddComponentIcon.jsx b/src/course-unit/add-component/add-component-btn/AddComponentIcon.jsx
new file mode 100644
index 0000000000..91cc5b09b1
--- /dev/null
+++ b/src/course-unit/add-component/add-component-btn/AddComponentIcon.jsx
@@ -0,0 +1,17 @@
+import PropTypes from 'prop-types';
+import { Icon } from '@openedx/paragon';
+import { EditNote as EditNoteIcon } from '@openedx/paragon/icons';
+
+import { COMPONENT_TYPES, COMPONENT_TYPE_ICON_MAP } from '../../../generic/block-type-utils/constants';
+
+const AddComponentIcon = ({ type }) => {
+  const icon = COMPONENT_TYPE_ICON_MAP[type] || EditNoteIcon;
+
+  return <Icon src={icon} screenReaderText={type} />;
+};
+
+AddComponentIcon.propTypes = {
+  type: PropTypes.oneOf(Object.values(COMPONENT_TYPES)).isRequired,
+};
+
+export default AddComponentIcon;
diff --git a/src/course-unit/add-component/add-component-btn/index.jsx b/src/course-unit/add-component/add-component-btn/index.jsx
new file mode 100644
index 0000000000..8745806d6e
--- /dev/null
+++ b/src/course-unit/add-component/add-component-btn/index.jsx
@@ -0,0 +1,38 @@
+import PropTypes from 'prop-types';
+import { Badge, Button } from '@openedx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import messages from '../messages';
+import AddComponentIcon from './AddComponentIcon';
+
+const AddComponentButton = ({
+  type, displayName, onClick, beta,
+}) => {
+  const intl = useIntl();
+
+  return (
+    <Button
+      variant="outline-primary"
+      className="add-component-button flex-column rounded-sm"
+      onClick={onClick}
+    >
+      <AddComponentIcon type={type} />
+      <span className="sr-only">{intl.formatMessage(messages.buttonText)}</span>
+      <span className="small mt-2">{displayName}</span>
+      {beta && <Badge className="pb-1 mt-1" variant="primary">Beta</Badge>}
+    </Button>
+  );
+};
+
+AddComponentButton.defaultProps = {
+  beta: false,
+};
+
+AddComponentButton.propTypes = {
+  type: PropTypes.string.isRequired,
+  displayName: PropTypes.string.isRequired,
+  onClick: PropTypes.func.isRequired,
+  beta: PropTypes.bool,
+};
+
+export default AddComponentButton;
diff --git a/src/course-unit/add-component/add-component-modals/ComponentModalView.jsx b/src/course-unit/add-component/add-component-modals/ComponentModalView.jsx
new file mode 100644
index 0000000000..84fbc16115
--- /dev/null
+++ b/src/course-unit/add-component/add-component-modals/ComponentModalView.jsx
@@ -0,0 +1,122 @@
+import { useState } from 'react';
+import { useDispatch } from 'react-redux';
+import PropTypes from 'prop-types';
+import { Form, OverlayTrigger, Tooltip } from '@openedx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import { updateQueryPendingStatus } from '../../data/slice';
+import { getXBlockSupportMessages } from '../../constants';
+import AddComponentButton from '../add-component-btn';
+import messages from '../messages';
+import ModalContainer from './ModalContainer';
+
+const ComponentModalView = ({
+  component,
+  modalParams,
+  handleCreateNewXBlock,
+}) => {
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const [moduleTitle, setModuleTitle] = useState('');
+  const { open, close, isOpen } = modalParams;
+  const {
+    type, displayName, templates, supportLegend,
+  } = component;
+  const supportLabels = getXBlockSupportMessages(intl);
+
+  const handleSubmit = () => {
+    handleCreateNewXBlock(type, moduleTitle);
+    dispatch(updateQueryPendingStatus(true));
+    setModuleTitle('');
+  };
+
+  return (
+    <>
+      <li>
+        <AddComponentButton
+          onClick={open}
+          type={type}
+          displayName={displayName}
+        />
+      </li>
+      <ModalContainer
+        isOpen={isOpen}
+        close={close}
+        title={intl.formatMessage(messages.modalContainerTitle, { componentTitle: (displayName ?? '').toLowerCase() })}
+        btnText={intl.formatMessage(messages.modalBtnText)}
+        onSubmit={handleSubmit}
+        resetDisabled={() => setModuleTitle('')}
+        hasValue={!moduleTitle.length}
+      >
+        <Form.Group>
+          <Form.RadioSet
+            name={displayName}
+            onChange={(e) => setModuleTitle(e.target.value)}
+          >
+            {templates.map((componentTemplate) => {
+              const value = componentTemplate.boilerplateName || componentTemplate.category;
+              const isDisplaySupportLabel = supportLegend.showLegend && supportLabels[componentTemplate.supportLevel];
+
+              return (
+                <div
+                  key={componentTemplate.displayName}
+                  className="d-flex justify-content-between w-100 mb-2.5 align-items-end"
+                >
+                  <Form.Radio
+                    className="add-component-modal-radio"
+                    value={value}
+                  >
+                    {componentTemplate.displayName}
+                  </Form.Radio>
+                  {isDisplaySupportLabel && (
+                    <OverlayTrigger
+                      placement="right"
+                      overlay={(
+                        <Tooltip>
+                          {supportLabels[componentTemplate.supportLevel].tooltip}
+                        </Tooltip>
+                      )}
+                    >
+                      <span className="x-small text-gray-500 flex-shrink-0 ml-2">
+                        {supportLabels[componentTemplate.supportLevel].label}
+                      </span>
+                    </OverlayTrigger>
+                  )}
+                </div>
+              );
+            })}
+          </Form.RadioSet>
+        </Form.Group>
+      </ModalContainer>
+    </>
+  );
+};
+
+ComponentModalView.propTypes = {
+  modalParams: PropTypes.shape({
+    open: PropTypes.func,
+    close: PropTypes.func,
+    isOpen: PropTypes.bool,
+  }).isRequired,
+  handleCreateNewXBlock: PropTypes.func.isRequired,
+  component: PropTypes.shape({
+    displayName: PropTypes.string.isRequired,
+    category: PropTypes.string,
+    type: PropTypes.string.isRequired,
+    templates: PropTypes.arrayOf(
+      PropTypes.shape({
+        boilerplateName: PropTypes.string,
+        category: PropTypes.string,
+        displayName: PropTypes.string.isRequired,
+        supportLevel: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+      }),
+    ),
+    supportLegend: PropTypes.shape({
+      allowUnsupportedXblocks: PropTypes.bool,
+      documentationLabel: PropTypes.string,
+      showLegend: PropTypes.bool,
+    }),
+  }).isRequired,
+};
+
+export default ComponentModalView;
diff --git a/src/course-unit/add-component/add-component-modals/ModalContainer.jsx b/src/course-unit/add-component/add-component-modals/ModalContainer.jsx
new file mode 100644
index 0000000000..047e26d34f
--- /dev/null
+++ b/src/course-unit/add-component/add-component-modals/ModalContainer.jsx
@@ -0,0 +1,61 @@
+import PropTypes from 'prop-types';
+import { ActionRow, Button, StandardModal } from '@openedx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import messages from '../messages';
+
+const ModalContainer = ({
+  title, isOpen, close, children, btnText, size, onSubmit, hasValue, resetDisabled,
+}) => {
+  const intl = useIntl();
+
+  const handleSubmit = () => {
+    onSubmit();
+    close();
+  };
+
+  const handleClose = () => {
+    resetDisabled();
+    close();
+  };
+
+  return (
+    <StandardModal
+      title={title}
+      isOpen={isOpen}
+      onClose={handleClose}
+      size={size}
+      footerNode={(
+        <ActionRow>
+          <ActionRow.Spacer />
+          <Button variant="tertiary" onClick={handleClose}>
+            {intl.formatMessage(messages.modalContainerCancelBtnText)}
+          </Button>
+          <Button onClick={handleSubmit} disabled={hasValue}>
+            {btnText}
+          </Button>
+        </ActionRow>
+      )}
+    >
+      {children}
+    </StandardModal>
+  );
+};
+
+ModalContainer.propTypes = {
+  title: PropTypes.string.isRequired,
+  isOpen: PropTypes.bool.isRequired,
+  close: PropTypes.func.isRequired,
+  children: PropTypes.node.isRequired,
+  btnText: PropTypes.string.isRequired,
+  size: PropTypes.string,
+  onSubmit: PropTypes.func.isRequired,
+  hasValue: PropTypes.bool.isRequired,
+  resetDisabled: PropTypes.func.isRequired,
+};
+
+ModalContainer.defaultProps = {
+  size: 'md',
+};
+
+export default ModalContainer;
diff --git a/src/course-unit/add-component/messages.js b/src/course-unit/add-component/messages.js
new file mode 100644
index 0000000000..71fdae52a1
--- /dev/null
+++ b/src/course-unit/add-component/messages.js
@@ -0,0 +1,86 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  title: {
+    id: 'course-authoring.course-unit.add.component.title',
+    defaultMessage: 'Add a new component',
+    description: 'Title text for add component section in course unit.',
+  },
+  buttonText: {
+    id: 'course-authoring.course-unit.add.component.button.text',
+    defaultMessage: 'Add Component:',
+    description: 'Information text for screen-readers about each add component button',
+  },
+  modalBtnText: {
+    id: 'course-authoring.course-unit.modal.button.text',
+    defaultMessage: 'Select',
+    description: 'Information text for screen-readers about each add component button',
+  },
+  singleComponentPickerModalTitle: {
+    id: 'course-authoring.course-unit.modal.single-title.text',
+    defaultMessage: 'Select component',
+    description: 'Library content picker modal title.',
+  },
+  multipleComponentPickerModalTitle: {
+    id: 'course-authoring.course-unit.modal.multiple-title.text',
+    defaultMessage: 'Select components',
+    description: 'Problem bank component picker modal title.',
+  },
+  multipleComponentPickerModalBtn: {
+    id: 'course-authoring.course-unit.modal.multiple-btn.text',
+    defaultMessage: 'Add selected components',
+    description: 'Problem bank component add button text.',
+  },
+  modalContainerTitle: {
+    id: 'course-authoring.course-unit.modal.container.title',
+    defaultMessage: 'Add {componentTitle} component',
+    description: 'Modal title for adding components',
+  },
+  modalContainerCancelBtnText: {
+    id: 'course-authoring.course-unit.modal.container.cancel.button.text',
+    defaultMessage: 'Cancel',
+    description: 'Modal cancel button text.',
+  },
+  modalComponentSupportLabelFullySupported: {
+    id: 'course-authoring.course-unit.modal.component.support.label.fully-supported',
+    defaultMessage: 'Fully supported',
+    description: 'Label for advance problem type\'s support status with full platform support',
+  },
+  modalComponentSupportLabelProvisionallySupported: {
+    id: 'course-authoring.course-unit.modal.component.support.label.provisionally-support',
+    defaultMessage: 'Provisionally supported',
+    description: 'Label for advance problem type\'s support status with provisional platform support',
+  },
+  modalComponentSupportLabelNotSupported: {
+    id: 'course-authoring.course-unit.modal.component.support.label.not-supported',
+    defaultMessage: 'Not supported',
+    description: 'Label for advance problem type\'s support status with no platform support',
+  },
+  modalComponentSupportTooltipFullySupported: {
+    id: 'course-authoring.course-unit.modal.component.support.tooltip.fully-supported',
+    defaultMessage: 'Fully supported tools and features are available on edX, are '
+      + 'fully tested, have user interfaces where applicable, and are documented in the '
+      + 'official edX guides that are available on docs.edx.org.',
+    description: 'Message for support status tooltip for modules with full platform support',
+  },
+  modalComponentSupportTooltipNotSupported: {
+    id: 'course-authoring.course-unit.modal.component.support.tooltip.not-supported',
+    defaultMessage: 'Tools with no support are not maintained by edX, and might be '
+      + 'deprecated in the future. They are not recommended for use in courses due to '
+      + 'non-compliance with one or more of the base requirements, such as testing, '
+      + 'accessibility, internationalization, and documentation.',
+    description: 'Message for support status tooltip for modules which is not supported',
+  },
+  modalComponentSupportTooltipProvisionallySupported: {
+    id: 'course-authoring.course-unit.modal.component.support.tooltip.provisionally-support',
+    defaultMessage: 'Provisionally supported tools might lack the robustness of functionality '
+      + 'that your courses require. edX does not have control over the quality of the software, '
+      + 'or of the content that can be provided using these tools. Test these tools thoroughly '
+      + 'before using them in your course, especially in graded sections. Complete documentation '
+      + 'might not be available for provisionally supported tools, or documentation might be '
+      + 'available from sources other than edX.',
+    description: 'Message for support status tooltip for modules with provisional platform support',
+  },
+});
+
+export default messages;
diff --git a/src/course-unit/breadcrumbs/Breadcrumbs.jsx b/src/course-unit/breadcrumbs/Breadcrumbs.jsx
new file mode 100644
index 0000000000..26bfa53562
--- /dev/null
+++ b/src/course-unit/breadcrumbs/Breadcrumbs.jsx
@@ -0,0 +1,86 @@
+import { useSelector } from 'react-redux';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Dropdown, Icon } from '@openedx/paragon';
+import { Link } from 'react-router-dom';
+import {
+  ArrowDropDown as ArrowDropDownIcon,
+  ChevronRight as ChevronRightIcon,
+} from '@openedx/paragon/icons';
+import { getConfig } from '@edx/frontend-platform';
+
+import { getWaffleFlags } from '../../data/selectors';
+import { getCourseSectionVertical } from '../data/selectors';
+import messages from './messages';
+
+const Breadcrumbs = () => {
+  const intl = useIntl();
+  const { ancestorXblocks } = useSelector(getCourseSectionVertical);
+  const [section, subsection] = ancestorXblocks ?? [];
+  const waffleFlags = useSelector(getWaffleFlags);
+
+  const getPathToCourseOutlinePage = (url) => (waffleFlags.useNewCourseOutlinePage
+    ? url : `${getConfig().STUDIO_BASE_URL}${url}`);
+
+  return (
+    <nav className="d-flex align-center mb-2.5">
+      <ol className="p-0 m-0 d-flex align-center">
+        <li className="d-flex">
+          <Dropdown>
+            <Dropdown.Toggle id="breadcrumbs-dropdown-section" variant="link" className="p-0 text-primary small">
+              <span className="small text-gray-700">{section.title}</span>
+              <Icon
+                src={ArrowDropDownIcon}
+                className="text-primary ml-1"
+              />
+            </Dropdown.Toggle>
+            <Dropdown.Menu>
+              {section.children.map(({ url, displayName }) => (
+                <Dropdown.Item
+                  as={Link}
+                  key={url}
+                  to={getPathToCourseOutlinePage(url)}
+                  className="small"
+                  data-testid="breadcrumbs-section-dropdown-item"
+                >
+                  {displayName}
+                </Dropdown.Item>
+              ))}
+            </Dropdown.Menu>
+          </Dropdown>
+          <Icon
+            src={ChevronRightIcon}
+            size="md"
+            className="text-primary mx-2"
+            alt={intl.formatMessage(messages.altIconChevron)}
+          />
+        </li>
+        <li className="d-flex">
+          <Dropdown>
+            <Dropdown.Toggle id="breadcrumbs-dropdown-subsection" variant="link" className="p-0 text-primary">
+              <span className="small text-gray-700">{subsection.title}</span>
+              <Icon
+                src={ArrowDropDownIcon}
+                className="text-primary ml-1"
+              />
+            </Dropdown.Toggle>
+            <Dropdown.Menu>
+              {subsection.children.map(({ url, displayName }) => (
+                <Dropdown.Item
+                  as={Link}
+                  key={url}
+                  to={getPathToCourseOutlinePage(url)}
+                  className="small"
+                  data-testid="breadcrumbs-subsection-dropdown-item"
+                >
+                  {displayName}
+                </Dropdown.Item>
+              ))}
+            </Dropdown.Menu>
+          </Dropdown>
+        </li>
+      </ol>
+    </nav>
+  );
+};
+
+export default Breadcrumbs;
diff --git a/src/course-unit/breadcrumbs/Breadcrumbs.scss b/src/course-unit/breadcrumbs/Breadcrumbs.scss
new file mode 100644
index 0000000000..d816b76c90
--- /dev/null
+++ b/src/course-unit/breadcrumbs/Breadcrumbs.scss
@@ -0,0 +1,15 @@
+.course-unit {
+  .sub-header {
+    background: transparent;
+  }
+
+  .sub-header-title .sub-header-breadcrumbs {
+    .dropdown-toggle::after {
+      display: none;
+    }
+
+    [aria-expanded="true"] .pgn__icon {
+      transform: scale(1, -1);
+    }
+  }
+}
diff --git a/src/course-unit/breadcrumbs/Breadcrumbs.test.jsx b/src/course-unit/breadcrumbs/Breadcrumbs.test.jsx
new file mode 100644
index 0000000000..d20a35c339
--- /dev/null
+++ b/src/course-unit/breadcrumbs/Breadcrumbs.test.jsx
@@ -0,0 +1,123 @@
+import userEvent from '@testing-library/user-event';
+import { getConfig } from '@edx/frontend-platform';
+import {
+  initializeMocks, waitFor, act, render,
+} from '../../testUtils';
+
+import { executeThunk } from '../../utils';
+import { getCourseSectionVerticalApiUrl, getCourseUnitApiUrl } from '../data/api';
+import { getApiWaffleFlagsUrl } from '../../data/api';
+import { fetchWaffleFlags } from '../../data/thunks';
+import { fetchCourseSectionVerticalData, fetchCourseUnitQuery } from '../data/thunk';
+import { courseSectionVerticalMock, courseUnitIndexMock } from '../__mocks__';
+import Breadcrumbs from './Breadcrumbs';
+
+let axiosMock;
+let reduxStore;
+const courseId = '123';
+const mockNavigate = jest.fn();
+const breadcrumbsExpected = {
+  section: {
+    id: 'block-v1:edX+DemoX+Demo_Course+type@chapter+block@interactive_demonstrations',
+    displayName: 'Example Week 1: Getting Started',
+  },
+  subsection: {
+    displayName: 'Lesson 1 - Getting Started',
+  },
+};
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useNavigate: () => mockNavigate,
+}));
+
+const renderComponent = () => render(
+  <Breadcrumbs courseId={courseId} />,
+);
+
+describe('<Breadcrumbs />', () => {
+  beforeEach(async () => {
+    const mocks = initializeMocks();
+    axiosMock = mocks.axiosMock;
+    reduxStore = mocks.reduxStore;
+
+    axiosMock
+      .onGet(getCourseUnitApiUrl(courseId))
+      .reply(200, courseUnitIndexMock);
+    await executeThunk(fetchCourseUnitQuery(courseId), reduxStore.dispatch);
+    axiosMock
+      .onGet(getCourseSectionVerticalApiUrl(courseId))
+      .reply(200, courseSectionVerticalMock);
+    await executeThunk(fetchCourseSectionVerticalData(courseId), reduxStore.dispatch);
+    axiosMock
+      .onGet(getApiWaffleFlagsUrl(courseId))
+      .reply(200, { useNewCourseOutlinePage: true });
+    await executeThunk(fetchWaffleFlags(courseId), reduxStore.dispatch);
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+    axiosMock.restore();
+  });
+
+  it('render Breadcrumbs component correctly', async () => {
+    const { getByText } = renderComponent();
+
+    await waitFor(() => {
+      expect(getByText(breadcrumbsExpected.section.displayName)).toBeInTheDocument();
+      expect(getByText(breadcrumbsExpected.subsection.displayName)).toBeInTheDocument();
+    });
+  });
+
+  it('render Breadcrumbs\'s dropdown menus correctly', async () => {
+    const { getByText, queryAllByTestId } = renderComponent();
+
+    expect(getByText(breadcrumbsExpected.section.displayName)).toBeInTheDocument();
+    expect(getByText(breadcrumbsExpected.subsection.displayName)).toBeInTheDocument();
+    expect(queryAllByTestId('breadcrumbs-section-dropdown-item')).toHaveLength(0);
+    expect(queryAllByTestId('breadcrumbs-subsection-dropdown-item')).toHaveLength(0);
+
+    const button = getByText(breadcrumbsExpected.section.displayName);
+    userEvent.click(button);
+    await waitFor(() => {
+      expect(queryAllByTestId('breadcrumbs-section-dropdown-item')).toHaveLength(5);
+    });
+
+    userEvent.click(getByText(breadcrumbsExpected.subsection.displayName));
+    expect(queryAllByTestId('breadcrumbs-subsection-dropdown-item')).toHaveLength(2);
+  });
+
+  it('navigates using the new course outline page when the waffle flag is enabled', async () => {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    const { ancestor_xblocks: [{ children: [{ display_name, url }] }] } = courseSectionVerticalMock;
+    const { getByText, getByRole } = renderComponent();
+
+    await act(async () => {
+      const dropdownBtn = getByText(breadcrumbsExpected.section.displayName);
+      userEvent.click(dropdownBtn);
+    });
+
+    await act(async () => {
+      const dropdownItem = getByRole('link', { name: display_name });
+      userEvent.click(dropdownItem);
+      expect(dropdownItem).toHaveAttribute('href', url);
+    });
+  });
+
+  it('falls back to window.location.href when the waffle flag is disabled', async () => {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    const { ancestor_xblocks: [{ children: [{ display_name, url }] }] } = courseSectionVerticalMock;
+    axiosMock
+      .onGet(getApiWaffleFlagsUrl(courseId))
+      .reply(200, { useNewCourseOutlinePage: false });
+    await executeThunk(fetchWaffleFlags(courseId), reduxStore.dispatch);
+
+    const { getByText, getByRole } = renderComponent();
+
+    const dropdownBtn = getByText(breadcrumbsExpected.section.displayName);
+    userEvent.click(dropdownBtn);
+
+    const dropdownItem = getByRole('link', { name: display_name });
+    expect(dropdownItem.href).toBe(`${getConfig().STUDIO_BASE_URL}${url}`);
+  });
+});
diff --git a/src/course-unit/breadcrumbs/messages.js b/src/course-unit/breadcrumbs/messages.js
new file mode 100644
index 0000000000..9a602ee29b
--- /dev/null
+++ b/src/course-unit/breadcrumbs/messages.js
@@ -0,0 +1,15 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  altIconChevron: {
+    id: 'course-authoring.course-unit.heading.icon.chevron.alt',
+    defaultMessage: 'Toggle dropdown menu',
+  },
+  loading: {
+    id: 'course-authoring.course-unit.heading.breadcrumbs.loading',
+    defaultMessage: 'Loading...',
+    description: 'Message displayed while loading breadcrumbs content',
+  },
+});
+
+export default messages;
diff --git a/src/course-unit/clipboard/index.js b/src/course-unit/clipboard/index.js
new file mode 100644
index 0000000000..16aeab9d98
--- /dev/null
+++ b/src/course-unit/clipboard/index.js
@@ -0,0 +1 @@
+export { default as PasteNotificationAlert } from './paste-notification';
diff --git a/src/course-unit/clipboard/paste-notification/components/ActionButton.jsx b/src/course-unit/clipboard/paste-notification/components/ActionButton.jsx
new file mode 100644
index 0000000000..bc9dcc6daf
--- /dev/null
+++ b/src/course-unit/clipboard/paste-notification/components/ActionButton.jsx
@@ -0,0 +1,21 @@
+import PropTypes from 'prop-types';
+import { Button } from '@openedx/paragon';
+import { Link } from 'react-router-dom';
+import { getConfig } from '@edx/frontend-platform';
+
+const ActionButton = ({ courseId, title }) => (
+  <Button
+    as={Link}
+    to={`${getConfig().STUDIO_BASE_URL}/assets/${courseId}/`}
+    size="sm"
+  >
+    {title}
+  </Button>
+);
+
+ActionButton.propTypes = {
+  courseId: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+};
+
+export default ActionButton;
diff --git a/src/course-unit/clipboard/paste-notification/components/AlertContent.jsx b/src/course-unit/clipboard/paste-notification/components/AlertContent.jsx
new file mode 100644
index 0000000000..f5e8c55a98
--- /dev/null
+++ b/src/course-unit/clipboard/paste-notification/components/AlertContent.jsx
@@ -0,0 +1,22 @@
+import PropTypes from 'prop-types';
+
+import { FILE_LIST_DEFAULT_VALUE } from '../constants';
+import FileList from './FileList';
+
+const AlertContent = ({ fileList, text }) => (
+  <>
+    <span>{text}</span>
+    <FileList fileList={fileList} />
+  </>
+);
+
+AlertContent.propTypes = {
+  fileList: PropTypes.arrayOf(PropTypes.string),
+  text: PropTypes.string.isRequired,
+};
+
+AlertContent.defaultProps = {
+  fileList: FILE_LIST_DEFAULT_VALUE,
+};
+
+export default AlertContent;
diff --git a/src/course-unit/clipboard/paste-notification/components/FileList.jsx b/src/course-unit/clipboard/paste-notification/components/FileList.jsx
new file mode 100644
index 0000000000..f3f9e3beaa
--- /dev/null
+++ b/src/course-unit/clipboard/paste-notification/components/FileList.jsx
@@ -0,0 +1,21 @@
+import PropTypes from 'prop-types';
+
+import { FILE_LIST_DEFAULT_VALUE } from '../constants';
+
+const FileList = ({ fileList }) => (
+  <ul>
+    {fileList.map((fileName) => (
+      <li>{fileName}</li>
+    ))}
+  </ul>
+);
+
+FileList.propTypes = {
+  fileList: PropTypes.arrayOf(PropTypes.string),
+};
+
+FileList.defaultProps = {
+  fileList: FILE_LIST_DEFAULT_VALUE,
+};
+
+export default FileList;
diff --git a/src/course-unit/clipboard/paste-notification/components/index.js b/src/course-unit/clipboard/paste-notification/components/index.js
new file mode 100644
index 0000000000..ccee5ba494
--- /dev/null
+++ b/src/course-unit/clipboard/paste-notification/components/index.js
@@ -0,0 +1,3 @@
+export { default as AlertContent } from './AlertContent';
+export { default as FileList } from './FileList';
+export { default as ActionButton } from './ActionButton';
diff --git a/src/course-unit/clipboard/paste-notification/constants.js b/src/course-unit/clipboard/paste-notification/constants.js
new file mode 100644
index 0000000000..a44ab2276c
--- /dev/null
+++ b/src/course-unit/clipboard/paste-notification/constants.js
@@ -0,0 +1,7 @@
+export const FILE_LIST_DEFAULT_VALUE = [];
+
+export const initialNotificationAlertsState = {
+  conflictingFilesAlert: true,
+  errorFilesAlert: true,
+  newFilesAlert: true,
+};
diff --git a/src/course-unit/clipboard/paste-notification/index.jsx b/src/course-unit/clipboard/paste-notification/index.jsx
new file mode 100644
index 0000000000..b92334c717
--- /dev/null
+++ b/src/course-unit/clipboard/paste-notification/index.jsx
@@ -0,0 +1,115 @@
+import { useState } from 'react';
+import PropTypes from 'prop-types';
+import {
+  Error as ErrorIcon,
+  Info as InfoIcon,
+  Warning as WarningIcon,
+} from '@openedx/paragon/icons';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import AlertMessage from '../../../generic/alert-message';
+import { ActionButton, AlertContent } from './components';
+import { getAlertStatus } from './utils';
+import { initialNotificationAlertsState } from './constants';
+import messages from './messages';
+
+const PastNotificationAlert = ({ staticFileNotices, courseId }) => {
+  const intl = useIntl();
+  const [notificationAlerts, toggleNotificationAlerts] = useState(initialNotificationAlertsState);
+  const { conflictingFiles, errorFiles, newFiles } = staticFileNotices;
+
+  const hasConflictingErrors = getAlertStatus(conflictingFiles, 'conflictingFilesAlert', notificationAlerts);
+  const hasErrorFiles = getAlertStatus(errorFiles, 'errorFilesAlert', notificationAlerts);
+  const hasNewFiles = getAlertStatus(newFiles, 'newFilesAlert', notificationAlerts);
+
+  const handleCloseNotificationAlert = (alertKey) => {
+    toggleNotificationAlerts((prevAlerts) => ({
+      ...prevAlerts,
+      [alertKey]: false,
+    }));
+  };
+
+  return (
+    <>
+      {hasConflictingErrors && (
+        <AlertMessage
+          data-testid="has-conflicting-errors-alert"
+          className="course-unit__alert"
+          title={intl.formatMessage(messages.hasConflictingErrorsTitle)}
+          onClose={() => handleCloseNotificationAlert('conflictingFilesAlert')}
+          description={(
+            <AlertContent
+              fileList={conflictingFiles}
+              text={intl.formatMessage(messages.hasConflictingErrorsDescription)}
+            />
+          )}
+          variant="warning"
+          icon={WarningIcon}
+          dismissible
+          actions={[
+            <ActionButton
+              courseId={courseId}
+              title={intl.formatMessage(messages.hasConflictingErrorsButtonText)}
+            />,
+          ]}
+        />
+      )}
+      {hasErrorFiles && (
+        <AlertMessage
+          data-testid="has-error-files-alert"
+          className="course-unit__alert"
+          title={intl.formatMessage(messages.hasErrorsTitle)}
+          onClose={() => handleCloseNotificationAlert('errorFilesAlert')}
+          description={(
+            <AlertContent
+              fileList={errorFiles}
+              text={intl.formatMessage(messages.hasErrorsDescription)}
+            />
+          )}
+          variant="danger"
+          icon={ErrorIcon}
+          dismissible
+        />
+      )}
+      {hasNewFiles && (
+        <AlertMessage
+          data-testid="has-new-files-alert"
+          className="course-unit__alert"
+          title={intl.formatMessage(messages.hasNewFilesTitle)}
+          onClose={() => handleCloseNotificationAlert('newFilesAlert')}
+          description={(
+            <AlertContent
+              fileList={newFiles}
+              text={intl.formatMessage(messages.hasNewFilesDescription)}
+            />
+          )}
+          variant="info"
+          icon={InfoIcon}
+          dismissible
+          actions={[
+            <ActionButton
+              courseId={courseId}
+              title={intl.formatMessage(messages.hasNewFilesButtonText)}
+            />,
+          ]}
+        />
+      )}
+    </>
+  );
+};
+
+PastNotificationAlert.propTypes = {
+  courseId: PropTypes.string.isRequired,
+  staticFileNotices:
+    PropTypes.objectOf({
+      conflictingFiles: PropTypes.arrayOf(PropTypes.string),
+      errorFiles: PropTypes.arrayOf(PropTypes.string),
+      newFiles: PropTypes.arrayOf(PropTypes.string),
+    }),
+};
+
+PastNotificationAlert.defaultProps = {
+  staticFileNotices: {},
+};
+
+export default PastNotificationAlert;
diff --git a/src/course-unit/clipboard/paste-notification/messages.js b/src/course-unit/clipboard/paste-notification/messages.js
new file mode 100644
index 0000000000..81f37e4d5f
--- /dev/null
+++ b/src/course-unit/clipboard/paste-notification/messages.js
@@ -0,0 +1,52 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  hasConflictingErrorsTitle: {
+    id: 'course-authoring.course-unit.paste-notification.has-conflicting-errors.title',
+    defaultMessage: 'Files need to be updated manually.',
+    description: 'Title for a notification indicating that files need manual updates '
+      + 'due to a conflict in the clipboard.',
+  },
+  hasConflictingErrorsDescription: {
+    id: 'course-authoring.course-unit.paste-notification.has-conflicting-errors.description',
+    defaultMessage: 'The following files must be updated manually for components to work as intended:',
+    description: 'Description for the notification indicating which files need manual '
+      + 'updates due to a clipboard conflict.',
+  },
+  hasConflictingErrorsButtonText: {
+    id: 'course-authoring.course-unit.paste-notification.has-conflicting-errors.button.text',
+    defaultMessage: 'Upload files',
+    description: 'Button text prompting users to upload files to resolve a clipboard conflict.',
+  },
+  hasErrorsTitle: {
+    id: 'course-authoring.course-unit.paste-notification.has-errors.title',
+    defaultMessage: 'Some errors occurred',
+    description: 'Title for a notification indicating that some errors occurred, likely '
+      + 'related to file conflicts.',
+  },
+  hasErrorsDescription: {
+    id: 'course-authoring.course-unit.paste-notification.has-errors.description',
+    defaultMessage: 'The following required files could not be added to the course:',
+    description: 'Description for the notification indicating which required files '
+      + 'couldn\'t be added to the course due to errors.',
+  },
+  hasNewFilesTitle: {
+    id: 'course-authoring.course-unit.paste-notification.has-new-files.title',
+    defaultMessage: 'New file(s) added to Files & Uploads.',
+    description: 'Title for a notification indicating that new files have been added to '
+      + 'the Files & Uploads section.',
+  },
+  hasNewFilesDescription: {
+    id: 'course-authoring.course-unit.paste-notification.has-new-files.description',
+    defaultMessage: 'The following required files were imported to this course:',
+    description: 'Description for the notification indicating which required files '
+      + 'were imported to the course.',
+  },
+  hasNewFilesButtonText: {
+    id: 'course-authoring.course-unit.paste-notification.has-new-files.button.text',
+    defaultMessage: 'View files',
+    description: 'Button text prompting users to view new files imported to the course.',
+  },
+});
+
+export default messages;
diff --git a/src/course-unit/clipboard/paste-notification/utils.js b/src/course-unit/clipboard/paste-notification/utils.js
new file mode 100644
index 0000000000..55428a011d
--- /dev/null
+++ b/src/course-unit/clipboard/paste-notification/utils.js
@@ -0,0 +1,11 @@
+/**
+ * Gets the status of an alert based on the length of a fileList.
+ *
+ * @param {Array<string>} fileList - The list of files.
+ * @param {string} alertKey - The key associated with the alert in the alertState.
+ * @param {Object} alertState - The state object containing alert statuses.
+ * @returns {boolean|null} - The status of the alert. Returns `true` if the fileList has length,
+ *                          `false` if it does not, and `null` if fileList is not defined.
+ */
+export const getAlertStatus = (fileList, alertKey, alertState) => (
+  fileList?.length ? fileList && alertState[alertKey] : null);
diff --git a/src/course-unit/constants.js b/src/course-unit/constants.js
new file mode 100644
index 0000000000..129fa55d9b
--- /dev/null
+++ b/src/course-unit/constants.js
@@ -0,0 +1,62 @@
+import messages from './sidebar/messages';
+import addComponentMessages from './add-component/messages';
+
+export const getUnitReleaseStatus = (intl) => ({
+  release: intl.formatMessage(messages.releaseStatusTitle),
+  released: intl.formatMessage(messages.releasedStatusTitle),
+  scheduled: intl.formatMessage(messages.scheduledStatusTitle),
+});
+
+export const UNIT_VISIBILITY_STATES = {
+  staffOnly: 'staff_only',
+  live: 'live',
+  ready: 'ready',
+};
+
+export const ICON_COLOR_VARIANTS = {
+  BLACK: '#000',
+  GREEN: '#0D7D4D',
+};
+
+export const PUBLISH_TYPES = {
+  republish: 'republish',
+  discardChanges: 'discard_changes',
+  makePublic: 'make_public',
+};
+
+export const getXBlockSupportMessages = (intl) => ({
+  fs: { // Fully supported
+    label: intl.formatMessage(addComponentMessages.modalComponentSupportLabelFullySupported),
+    tooltip: intl.formatMessage(addComponentMessages.modalComponentSupportTooltipFullySupported),
+  },
+  ps: { // Provisionally supported
+    label: intl.formatMessage(addComponentMessages.modalComponentSupportLabelProvisionallySupported),
+    tooltip: intl.formatMessage(addComponentMessages.modalComponentSupportTooltipProvisionallySupported),
+  },
+  us: { // Not supported
+    label: intl.formatMessage(addComponentMessages.modalComponentSupportLabelNotSupported),
+    tooltip: intl.formatMessage(addComponentMessages.modalComponentSupportTooltipNotSupported),
+  },
+});
+
+export const stateKeys = {
+  iframeHeight: 'iframeHeight',
+  hasLoaded: 'hasLoaded',
+  showError: 'showError',
+  windowTopOffset: 'windowTopOffset',
+};
+
+export const messageTypes = {
+  modal: 'plugin.modal',
+  resize: 'plugin.resize',
+  videoFullScreen: 'plugin.videoFullScreen',
+  refreshXBlock: 'refreshXBlock',
+  showMoveXBlockModal: 'showMoveXBlockModal',
+  showMultipleComponentPicker: 'showMultipleComponentPicker',
+  addSelectedComponentsToBank: 'addSelectedComponentsToBank',
+  showXBlockLibraryChangesPreview: 'showXBlockLibraryChangesPreview',
+};
+
+export const IFRAME_FEATURE_POLICY = (
+  'microphone *; camera *; midi *; geolocation *; encrypted-media *, clipboard-write *'
+);
diff --git a/src/course-unit/context/hooks.test.tsx b/src/course-unit/context/hooks.test.tsx
new file mode 100644
index 0000000000..fb94d57d11
--- /dev/null
+++ b/src/course-unit/context/hooks.test.tsx
@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+import { renderHook } from '@testing-library/react-hooks';
+
+import { useIframe } from './hooks';
+import { IframeProvider } from './iFrameContext';
+
+describe('useIframe hook', () => {
+  it('throws an error when used outside of IframeProvider', () => {
+    const { result } = renderHook(() => useIframe());
+    expect(result.error).toEqual(new Error('useIframe must be used within an IframeProvider'));
+  });
+
+  it('returns context value when used inside IframeProvider', () => {
+    const wrapper = ({ children }: { children: ReactNode }) => (
+      <IframeProvider>
+        {children}
+      </IframeProvider>
+    );
+
+    const { result } = renderHook(() => useIframe(), { wrapper });
+    expect(result.current).toHaveProperty('setIframeRef');
+    expect(result.current).toHaveProperty('sendMessageToIframe');
+  });
+});
diff --git a/src/course-unit/context/hooks.tsx b/src/course-unit/context/hooks.tsx
new file mode 100644
index 0000000000..9760c07afc
--- /dev/null
+++ b/src/course-unit/context/hooks.tsx
@@ -0,0 +1,12 @@
+import { useContext } from 'react';
+
+import { IframeContext, IframeContextType } from './iFrameContext';
+
+// eslint-disable-next-line import/prefer-default-export
+export const useIframe = (): IframeContextType => {
+  const context = useContext(IframeContext);
+  if (!context) {
+    throw new Error('useIframe must be used within an IframeProvider');
+  }
+  return context;
+};
diff --git a/src/course-unit/context/iFrameContext.tsx b/src/course-unit/context/iFrameContext.tsx
new file mode 100644
index 0000000000..75418f0d39
--- /dev/null
+++ b/src/course-unit/context/iFrameContext.tsx
@@ -0,0 +1,42 @@
+import {
+  createContext, MutableRefObject, useRef, useCallback, useMemo, ReactNode,
+} from 'react';
+import { logError } from '@edx/frontend-platform/logging';
+
+export interface IframeContextType {
+  setIframeRef: (ref: MutableRefObject<HTMLIFrameElement | null>) => void;
+  sendMessageToIframe: (messageType: string, payload: unknown) => void;
+}
+
+export const IframeContext = createContext<IframeContextType | undefined>(undefined);
+
+export const IframeProvider: React.FC = ({ children }: { children: ReactNode }) => {
+  const iframeRef = useRef<HTMLIFrameElement | null>(null);
+  const setIframeRef = useCallback((ref: MutableRefObject<HTMLIFrameElement | null>) => {
+    iframeRef.current = ref.current;
+  }, []);
+
+  const sendMessageToIframe = useCallback((messageType: string, payload: any) => {
+    const iframeWindow = iframeRef?.current?.contentWindow;
+    if (iframeWindow) {
+      try {
+        iframeWindow.postMessage({ type: messageType, payload }, '*');
+      } catch (error) {
+        logError('Failed to send message to iframe:', error);
+      }
+    } else {
+      logError('Iframe is not accessible or loaded yet.');
+    }
+  }, [iframeRef]);
+
+  const value = useMemo(() => ({
+    setIframeRef,
+    sendMessageToIframe,
+  }), [setIframeRef, sendMessageToIframe]);
+
+  return (
+    <IframeContext.Provider value={value}>
+      {children}
+    </IframeContext.Provider>
+  );
+};
diff --git a/src/course-unit/course-sequence/CourseSequence.scss b/src/course-unit/course-sequence/CourseSequence.scss
new file mode 100644
index 0000000000..9a0a34004c
--- /dev/null
+++ b/src/course-unit/course-sequence/CourseSequence.scss
@@ -0,0 +1,83 @@
+.sequence-container {
+  margin-bottom: 1.75rem;
+  width: 100%;
+}
+
+.sequence-load-failure-msg {
+  max-width: 30em;
+}
+
+.sequence-navigation {
+  .btn {
+    flex-grow: 1;
+    position: relative;
+    white-space: nowrap;
+    color: $gray-700;
+
+    &.btn-primary {
+      color: $white;
+    }
+
+    &:focus {
+      z-index: 1;
+    }
+  }
+
+  .sequence-navigation-tabs-wrapper {
+    flex-basis: 100%;
+    min-width: 0;
+  }
+
+  .sequence-navigation-tabs-container {
+    flex: 1 1 100%;
+    // min-width 0 prevents the flex item from overflowing the parent container
+    // https://dev.to/martyhimmel/quick-tip-to-stop-flexbox-from-overflowing-peb
+    min-width: 0;
+  }
+
+  .sequence-navigation-tabs .btn:not(.sequence-navigation-tabs-action-btn) {
+    flex-basis: 100%;
+    min-width: 2rem;
+  }
+
+  .sequence-navigation-dropdown {
+    .dropdown-menu .btn {
+      flex-basis: 100%;
+      min-width: 4rem;
+
+      .unit-title {
+        flex-grow: 1;
+        text-align: left;
+        overflow: hidden;
+        min-width: 0;
+        margin: map-get($spacers, 0) $spacer;
+        text-overflow: ellipsis;
+      }
+
+      &.btn-primary {
+        background-color: $primary-500;
+        color: $white;
+      }
+    }
+  }
+
+  .sequence-navigation-prev-btn,
+  .sequence-navigation-next-btn,
+  .sequence-navigation-tabs-action-btn {
+    min-width: 12.5rem;
+  }
+
+  .sequence-navigation-prev-btn,
+  .sequence-navigation-next-btn {
+    @media (max-width: -1 + map-get($grid-breakpoints, "sm")) {
+      min-width: fit-content;
+      padding-top: $spacer;
+      padding-bottom: $spacer;
+    }
+
+    @media (min-width: map-get($grid-breakpoints, "sm")) {
+      padding-left: map-get($spacers, 4\.5);
+      padding-right: map-get($spacers, 4\.5);
+    }
+  }
+}
diff --git a/src/course-unit/course-sequence/Sequence.jsx b/src/course-unit/course-sequence/Sequence.jsx
new file mode 100644
index 0000000000..f8a7ea007f
--- /dev/null
+++ b/src/course-unit/course-sequence/Sequence.jsx
@@ -0,0 +1,74 @@
+import PropTypes from 'prop-types';
+import { useSelector } from 'react-redux';
+import classNames from 'classnames';
+import { breakpoints, useWindowSize } from '@openedx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import Loading from '../../generic/Loading';
+import { RequestStatus } from '../../data/constants';
+import SequenceNavigation from './sequence-navigation/SequenceNavigation';
+import messages from './messages';
+
+const Sequence = ({
+  courseId,
+  sequenceId,
+  unitId,
+  handleCreateNewCourseXBlock,
+  showPasteUnit,
+}) => {
+  const intl = useIntl();
+  const { IN_PROGRESS, FAILED, SUCCESSFUL } = RequestStatus;
+  const shouldDisplayNotificationTriggerInSequence = useWindowSize().width < breakpoints.small.minWidth;
+  const { sequenceStatus, sequenceMightBeUnit } = useSelector(state => state.courseUnit);
+
+  const defaultContent = (
+    <div className="sequence-container d-inline-flex flex-row">
+      <div className={classNames('sequence w-100', { 'position-relative': shouldDisplayNotificationTriggerInSequence })}>
+        <SequenceNavigation
+          sequenceId={sequenceId}
+          unitId={unitId}
+          courseId={courseId}
+          handleCreateNewCourseXBlock={handleCreateNewCourseXBlock}
+          showPasteUnit={showPasteUnit}
+        />
+      </div>
+    </div>
+  );
+
+  // If sequence might be a unit, we want to keep showing a spinner - the courseware container will redirect us when
+  // it knows which sequence to actually go to.
+  const isLoading = sequenceStatus === IN_PROGRESS || (sequenceStatus === FAILED && sequenceMightBeUnit);
+  if (isLoading) {
+    if (!sequenceId) {
+      return (<div>{intl.formatMessage(messages.sequenceNoContent)}</div>);
+    }
+
+    return <Loading />;
+  }
+
+  if (sequenceStatus === SUCCESSFUL) {
+    return defaultContent;
+  }
+
+  // sequence status 'failed' and any other unexpected sequence status.
+  return (
+    <p className="sequence-load-failure-msg text-center py-5 mx-auto">
+      {intl.formatMessage(messages.sequenceLoadFailure)}
+    </p>
+  );
+};
+
+Sequence.propTypes = {
+  unitId: PropTypes.string,
+  courseId: PropTypes.string.isRequired,
+  sequenceId: PropTypes.string,
+  handleCreateNewCourseXBlock: PropTypes.func.isRequired,
+  showPasteUnit: PropTypes.bool.isRequired,
+};
+
+Sequence.defaultProps = {
+  sequenceId: null,
+  unitId: null,
+};
+
+export default Sequence;
diff --git a/src/course-unit/course-sequence/hooks.js b/src/course-unit/course-sequence/hooks.js
new file mode 100644
index 0000000000..28035e1afd
--- /dev/null
+++ b/src/course-unit/course-sequence/hooks.js
@@ -0,0 +1,120 @@
+import { useSelector } from 'react-redux';
+import { useLayoutEffect, useRef, useState } from 'react';
+import { useWindowSize } from '@openedx/paragon';
+
+import { useModel } from '../../generic/model-store';
+import { getCourseSectionVertical, getSequenceIds } from '../data/selectors';
+
+export function useSequenceNavigationMetadata(courseId, currentSequenceId, currentUnitId) {
+  const { nextUrl, prevUrl } = useSelector(getCourseSectionVertical);
+  const sequence = useModel('sequences', currentSequenceId);
+  const isFirstUnit = !prevUrl;
+  const isLastUnit = !nextUrl;
+  const sequenceIds = useSelector(getSequenceIds);
+  const sequenceIndex = sequenceIds.indexOf(currentSequenceId);
+  const unitIndex = sequence.unitIds.indexOf(currentUnitId);
+
+  const nextSequenceId = sequenceIndex < sequenceIds.length - 1 ? sequenceIds[sequenceIndex + 1] : null;
+  const previousSequenceId = sequenceIndex > 0 ? sequenceIds[sequenceIndex - 1] : null;
+
+  let nextLink;
+  const nextIndex = unitIndex + 1;
+
+  if (nextIndex < sequence.unitIds.length) {
+    const nextUnitId = sequence.unitIds[nextIndex];
+    nextLink = `/course/${courseId}/container/${nextUnitId}/${currentSequenceId}`;
+  } else if (nextSequenceId) {
+    const pathToNextUnit = decodeURIComponent(nextUrl);
+    nextLink = `/course/${courseId}${pathToNextUnit}/${nextSequenceId}`;
+  }
+
+  let previousLink;
+  const previousIndex = unitIndex - 1;
+
+  if (previousIndex >= 0) {
+    const previousUnitId = sequence.unitIds[previousIndex];
+    previousLink = `/course/${courseId}/container/${previousUnitId}/${currentSequenceId}`;
+  } else if (previousSequenceId) {
+    const pathToPreviousUnit = decodeURIComponent(prevUrl);
+    previousLink = `/course/${courseId}${pathToPreviousUnit}/${previousSequenceId}`;
+  }
+
+  return {
+    isFirstUnit, isLastUnit, nextLink, previousLink,
+  };
+}
+
+const invisibleStyle = {
+  position: 'absolute',
+  left: 0,
+  pointerEvents: 'none',
+  visibility: 'hidden',
+};
+
+/**
+ * This hook will find the index of the last child of a containing element
+ * that fits within its bounding rectangle. This is done by summing the widths
+ * of the children until they exceed the width of the container.
+ *
+ * The hook returns an array containing:
+ * [indexOfLastVisibleChild, containerElementRef, invisibleStyle, overflowElementRef]
+ *
+ * indexOfLastVisibleChild - the index of the last visible child
+ * containerElementRef - a ref to be added to the containing html node
+ * invisibleStyle - a set of styles to be applied to child of the containing node
+ *    if it needs to be hidden. These styles remove the element visually, from
+ *    screen readers, and from normal layout flow. But, importantly, these styles
+ *    preserve the width of the element, so that future width calculations will
+ *    still be accurate.
+ * overflowElementRef - a ref to be added to an html node inside the container
+ *    that is likely to be used to contain a "More" type dropdown or other
+ *    mechanism to reveal hidden children. The width of this element is always
+ *    included when determining which children will fit or not. Usage of this ref
+ *    is optional.
+ */
+export function useIndexOfLastVisibleChild() {
+  const containerElementRef = useRef(null);
+  const overflowElementRef = useRef(null);
+  const containingRectRef = useRef({});
+  const [indexOfLastVisibleChild, setIndexOfLastVisibleChild] = useState(-1);
+  const windowSize = useWindowSize();
+
+  useLayoutEffect(() => {
+    const containingRect = containerElementRef.current.getBoundingClientRect();
+
+    // No-op if the width is unchanged.
+    // (Assumes tabs themselves don't change count or width).
+    if (!containingRect.width === containingRectRef.current.width) {
+      return;
+    }
+    // Update for future comparison
+    containingRectRef.current = containingRect;
+
+    // Get array of child nodes from NodeList form
+    const childNodesArr = Array.prototype.slice.call(containerElementRef.current.children);
+    const { nextIndexOfLastVisibleChild } = childNodesArr
+      // filter out the overflow element
+      .filter(childNode => childNode !== overflowElementRef.current)
+      // sum the widths to find the last visible element's index
+      .reduce((acc, childNode, index) => {
+        // use floor to prevent rounding errors
+        acc.sumWidth += Math.floor(childNode.getBoundingClientRect().width);
+        if (acc.sumWidth <= containingRect.width) {
+          acc.nextIndexOfLastVisibleChild = index;
+        }
+        return acc;
+      }, {
+        // Include the overflow element's width to begin with. Doing this means
+        // sometimes we'll show a dropdown with one item in it when it would fit,
+        // but allowing this case dramatically simplifies the calculations we need
+        // to do above.
+        sumWidth: overflowElementRef.current ? overflowElementRef.current.getBoundingClientRect().width : 0,
+        nextIndexOfLastVisibleChild: -1,
+      });
+
+    setIndexOfLastVisibleChild(nextIndexOfLastVisibleChild);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [windowSize, containerElementRef.current]);
+
+  return [indexOfLastVisibleChild, containerElementRef, invisibleStyle, overflowElementRef];
+}
diff --git a/src/course-unit/course-sequence/hooks.test.js b/src/course-unit/course-sequence/hooks.test.js
new file mode 100644
index 0000000000..8ce0a730cd
--- /dev/null
+++ b/src/course-unit/course-sequence/hooks.test.js
@@ -0,0 +1,57 @@
+import { renderHook } from '@testing-library/react-hooks';
+import { useSelector } from 'react-redux';
+import { useSequenceNavigationMetadata } from './hooks';
+import { getCourseSectionVertical, getSequenceIds } from '../data/selectors';
+
+import { useModel } from '../../generic/model-store';
+
+jest.mock('react-redux', () => ({
+  useSelector: jest.fn(),
+}));
+
+jest.mock('../../generic/model-store', () => ({
+  useModel: jest.fn(),
+}));
+
+jest.mock('@openedx/paragon', () => ({
+  useWindowSize: jest.fn(),
+}));
+
+describe('useSequenceNavigationMetadata', () => {
+  const mockCourseId = 'course-v1:example';
+  const mockCurrentSequenceId = 'sequence-1';
+  const mockCurrentUnitId = 'unit-1';
+  const mockNextUrl = '/next-url';
+  const mockPrevUrl = '/prev-url';
+  const mockSequenceIds = ['sequence-1', 'sequence-2'];
+  const mockSequence = {
+    unitIds: ['unit-1', 'unit-2'],
+  };
+
+  beforeEach(() => {
+    useSelector.mockImplementation((selector) => {
+      if (selector === getCourseSectionVertical) { return { nextUrl: mockNextUrl, prevUrl: mockPrevUrl }; }
+      if (selector === getSequenceIds) { return mockSequenceIds; }
+      return null;
+    });
+    useModel.mockReturnValue(mockSequence);
+  });
+
+  it('sets isLastUnit to true if no nextUrl is provided', () => {
+    useSelector.mockReturnValueOnce({ nextUrl: null, prevUrl: mockPrevUrl });
+    const { result } = renderHook(
+      () => useSequenceNavigationMetadata(mockCourseId, mockCurrentSequenceId, mockCurrentUnitId),
+    );
+
+    expect(result.current.isLastUnit).toBe(true);
+  });
+
+  it('sets isFirstUnit to true if no prevUrl is provided', () => {
+    useSelector.mockReturnValueOnce({ nextUrl: mockNextUrl, prevUrl: null });
+    const { result } = renderHook(
+      () => useSequenceNavigationMetadata(mockCourseId, mockCurrentSequenceId, mockCurrentUnitId),
+    );
+
+    expect(result.current.isFirstUnit).toBe(true);
+  });
+});
diff --git a/src/course-unit/course-sequence/index.jsx b/src/course-unit/course-sequence/index.jsx
new file mode 100644
index 0000000000..285eab20bb
--- /dev/null
+++ b/src/course-unit/course-sequence/index.jsx
@@ -0,0 +1 @@
+export { default } from './Sequence';
diff --git a/src/course-unit/course-sequence/messages.js b/src/course-unit/course-sequence/messages.js
new file mode 100644
index 0000000000..0f7019ae20
--- /dev/null
+++ b/src/course-unit/course-sequence/messages.js
@@ -0,0 +1,38 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  prevBtnText: {
+    id: 'course-authoring.course-unit.prev-btn-text',
+    defaultMessage: 'Previous',
+  },
+  nextBtnText: {
+    id: 'course-authoring.course-unit.next-btn-text',
+    defaultMessage: 'Next',
+  },
+  newUnitBtnText: {
+    id: 'course-authoring.course-unit.new-unit-btn-text',
+    defaultMessage: 'New unit',
+  },
+  sequenceNavLabelText: {
+    id: 'course-authoring.course-unit.sequence-nav-label-text',
+    defaultMessage: 'Sequence navigation',
+  },
+  sequenceLoadFailure: {
+    id: 'course-authoring.course-unit.sequence.load.failure',
+    defaultMessage: 'There was an error loading this course.',
+  },
+  sequenceNoContent: {
+    id: 'course-authoring.course-unit.sequence.no.content',
+    defaultMessage: 'There is no content here.',
+  },
+  sequenceDropdownTitle: {
+    id: 'course-authoring.course-unit.sequence.navigation.menu',
+    defaultMessage: '{current} of {total}',
+  },
+  pasteAsNewUnitLink: {
+    id: 'course-authoring.course-unit.sequence.navigation.menu.copy-unit.past-unit-link',
+    defaultMessage: 'Paste as new unit',
+  },
+});
+
+export default messages;
diff --git a/src/course-unit/course-sequence/sequence-navigation/SequenceNavigation.jsx b/src/course-unit/course-sequence/sequence-navigation/SequenceNavigation.jsx
new file mode 100644
index 0000000000..0fa15fa29e
--- /dev/null
+++ b/src/course-unit/course-sequence/sequence-navigation/SequenceNavigation.jsx
@@ -0,0 +1,124 @@
+import { Link } from 'react-router-dom';
+import { useSelector } from 'react-redux';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import {
+  injectIntl, intlShape, isRtl, getLocale,
+} from '@edx/frontend-platform/i18n';
+import { Button, useWindowSize, breakpoints } from '@openedx/paragon';
+import {
+  ChevronLeft as ChevronLeftIcon,
+  ChevronRight as ChevronRightIcon,
+} from '@openedx/paragon/icons';
+
+import { useModel } from '../../../generic/model-store';
+import { RequestStatus } from '../../../data/constants';
+import { getSequenceStatus } from '../../data/selectors';
+import { useSequenceNavigationMetadata } from '../hooks';
+import messages from '../messages';
+import SequenceNavigationTabs from './SequenceNavigationTabs';
+
+const SequenceNavigation = ({
+  intl,
+  courseId,
+  unitId,
+  sequenceId,
+  className,
+  handleCreateNewCourseXBlock,
+  showPasteUnit,
+}) => {
+  const sequenceStatus = useSelector(getSequenceStatus);
+  const {
+    isFirstUnit, isLastUnit, nextLink, previousLink,
+  } = useSequenceNavigationMetadata(courseId, sequenceId, unitId);
+  const sequence = useModel('sequences', sequenceId);
+
+  const shouldDisplayNotificationTriggerInSequence = useWindowSize().width < breakpoints.small.minWidth;
+  const renderUnitButtons = () => {
+    if (sequence.unitIds?.length === 0 || unitId === null) {
+      return (
+        <div style={{ flexBasis: '100%', minWidth: 0, borderBottom: 'solid 1px #EAEAEA' }} />
+      );
+    }
+
+    return (
+      <SequenceNavigationTabs
+        unitIds={sequence.unitIds || []}
+        unitId={unitId}
+        handleCreateNewCourseXBlock={handleCreateNewCourseXBlock}
+        showPasteUnit={showPasteUnit}
+      />
+    );
+  };
+
+  const renderPreviousButton = () => {
+    const buttonText = intl.formatMessage(messages.prevBtnText);
+    const prevArrow = isRtl(getLocale()) ? ChevronRightIcon : ChevronLeftIcon;
+
+    if (!isFirstUnit) {
+      return (
+        <Button
+          className="sequence-navigation-prev-btn"
+          variant="outline-primary"
+          iconBefore={prevArrow}
+          as={Link}
+          to={previousLink}
+        >
+          {shouldDisplayNotificationTriggerInSequence ? null : buttonText}
+        </Button>
+      );
+    }
+
+    return null;
+  };
+
+  const renderNextButton = () => {
+    const buttonText = intl.formatMessage(messages.nextBtnText);
+    const nextArrow = isRtl(getLocale()) ? ChevronLeftIcon : ChevronRightIcon;
+
+    if (!isLastUnit) {
+      return (
+        <Button
+          className="sequence-navigation-next-btn"
+          variant="outline-primary"
+          iconAfter={nextArrow}
+          as={Link}
+          to={nextLink}
+        >
+          {shouldDisplayNotificationTriggerInSequence ? null : buttonText}
+        </Button>
+      );
+    }
+
+    return null;
+  };
+
+  return sequenceStatus === RequestStatus.SUCCESSFUL && (
+    <nav
+      className={classNames('sequence-navigation d-flex', className)}
+      style={{ width: shouldDisplayNotificationTriggerInSequence ? '90%' : null }}
+    >
+      {renderPreviousButton()}
+      {renderUnitButtons()}
+      {renderNextButton()}
+    </nav>
+  );
+};
+
+SequenceNavigation.propTypes = {
+  intl: intlShape.isRequired,
+  courseId: PropTypes.string.isRequired,
+  unitId: PropTypes.string,
+  className: PropTypes.string,
+  sequenceId: PropTypes.string,
+  handleCreateNewCourseXBlock: PropTypes.func.isRequired,
+  showPasteUnit: PropTypes.bool.isRequired,
+};
+
+SequenceNavigation.defaultProps = {
+  sequenceId: null,
+  unitId: null,
+  className: undefined,
+};
+
+export default injectIntl(SequenceNavigation);
diff --git a/src/course-unit/course-sequence/sequence-navigation/SequenceNavigationDropdown.jsx b/src/course-unit/course-sequence/sequence-navigation/SequenceNavigationDropdown.jsx
new file mode 100644
index 0000000000..2e2923d272
--- /dev/null
+++ b/src/course-unit/course-sequence/sequence-navigation/SequenceNavigationDropdown.jsx
@@ -0,0 +1,68 @@
+import PropTypes from 'prop-types';
+import { Button, Dropdown } from '@openedx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Plus as PlusIcon, ContentPasteGo as ContentPasteGoIcon } from '@openedx/paragon/icons/';
+
+import messages from '../messages';
+import UnitButton from './UnitButton';
+
+const SequenceNavigationDropdown = ({
+  unitId,
+  unitIds,
+  handleAddNewSequenceUnit,
+  handlePasteNewSequenceUnit,
+  showPasteUnit,
+}) => {
+  const intl = useIntl();
+
+  return (
+    <Dropdown className="sequence-navigation-dropdown">
+      <Dropdown.Toggle id="sequence-navigation-dropdown" variant="outline-primary" className="w-100">
+        {intl.formatMessage(messages.sequenceDropdownTitle, {
+          current: unitIds.indexOf(unitId) + 1,
+          total: unitIds.length,
+        })}
+      </Dropdown.Toggle>
+      <Dropdown.Menu className="w-100">
+        {unitIds.map(buttonUnitId => (
+          <Dropdown.Item
+            as={UnitButton}
+            className="w-100"
+            isActive={unitId === buttonUnitId}
+            key={buttonUnitId}
+            showTitle
+            unitId={buttonUnitId}
+          />
+        ))}
+        <Button
+          as={Dropdown.Item}
+          variant="outline-primary"
+          iconBefore={PlusIcon}
+          onClick={handleAddNewSequenceUnit}
+        >
+          {intl.formatMessage(messages.newUnitBtnText)}
+        </Button>
+        {showPasteUnit && (
+          <Button
+            as={Dropdown.Item}
+            variant="outline-primary"
+            iconBefore={ContentPasteGoIcon}
+            onClick={handlePasteNewSequenceUnit}
+          >
+            {intl.formatMessage(messages.pasteAsNewUnitLink)}
+          </Button>
+        )}
+      </Dropdown.Menu>
+    </Dropdown>
+  );
+};
+
+SequenceNavigationDropdown.propTypes = {
+  unitId: PropTypes.string.isRequired,
+  unitIds: PropTypes.arrayOf(PropTypes.string).isRequired,
+  handleAddNewSequenceUnit: PropTypes.func.isRequired,
+  handlePasteNewSequenceUnit: PropTypes.func.isRequired,
+  showPasteUnit: PropTypes.bool.isRequired,
+};
+
+export default SequenceNavigationDropdown;
diff --git a/src/course-unit/course-sequence/sequence-navigation/SequenceNavigationTabs.jsx b/src/course-unit/course-sequence/sequence-navigation/SequenceNavigationTabs.jsx
new file mode 100644
index 0000000000..77372988ff
--- /dev/null
+++ b/src/course-unit/course-sequence/sequence-navigation/SequenceNavigationTabs.jsx
@@ -0,0 +1,101 @@
+import { useDispatch, useSelector } from 'react-redux';
+import PropTypes from 'prop-types';
+import { useNavigate } from 'react-router-dom';
+import { Button } from '@openedx/paragon';
+import { Plus as PlusIcon, ContentPasteGo as ContentPasteGoIcon } from '@openedx/paragon/icons';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import { changeEditTitleFormOpen, updateQueryPendingStatus } from '../../data/slice';
+import { getCourseId, getSequenceId } from '../../data/selectors';
+import messages from '../messages';
+import { useIndexOfLastVisibleChild } from '../hooks';
+import SequenceNavigationDropdown from './SequenceNavigationDropdown';
+import UnitButton from './UnitButton';
+
+const SequenceNavigationTabs = ({
+  unitIds, unitId, handleCreateNewCourseXBlock, showPasteUnit,
+}) => {
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
+  const sequenceId = useSelector(getSequenceId);
+  const courseId = useSelector(getCourseId);
+
+  const [
+    indexOfLastVisibleChild,
+    containerRef,
+    invisibleStyle,
+  ] = useIndexOfLastVisibleChild();
+  const shouldDisplayDropdown = indexOfLastVisibleChild === -1;
+
+  const handleAddNewSequenceUnit = () => {
+    dispatch(updateQueryPendingStatus(true));
+    handleCreateNewCourseXBlock({ parentLocator: sequenceId, category: 'vertical', displayName: 'Unit' }, ({ courseKey, locator }) => {
+      navigate(`/course/${courseKey}/container/${locator}/${sequenceId}`, courseId);
+      dispatch(changeEditTitleFormOpen(true));
+    });
+  };
+
+  const handlePasteNewSequenceUnit = () => {
+    dispatch(updateQueryPendingStatus(true));
+    handleCreateNewCourseXBlock({ parentLocator: sequenceId, stagedContent: 'clipboard' }, ({ courseKey, locator }) => {
+      navigate(`/course/${courseKey}/container/${locator}/${sequenceId}`, courseId);
+      dispatch(changeEditTitleFormOpen(true));
+    }, unitId);
+  };
+
+  return (
+    <div className="sequence-navigation-tabs-wrapper">
+      <div className="sequence-navigation-tabs-container d-flex" ref={containerRef}>
+        <div
+          className="sequence-navigation-tabs d-flex flex-grow-1"
+          style={shouldDisplayDropdown ? invisibleStyle : null}
+        >
+          {unitIds.map((buttonUnitId) => (
+            <UnitButton
+              key={buttonUnitId}
+              unitId={buttonUnitId}
+              isActive={unitId === buttonUnitId}
+            />
+          ))}
+          <Button
+            className="sequence-navigation-tabs-action-btn"
+            variant="outline-primary"
+            iconBefore={PlusIcon}
+            onClick={handleAddNewSequenceUnit}
+          >
+            {intl.formatMessage(messages.newUnitBtnText)}
+          </Button>
+          {showPasteUnit && (
+            <Button
+              className="sequence-navigation-tabs-action-btn"
+              variant="outline-primary"
+              iconBefore={ContentPasteGoIcon}
+              onClick={handlePasteNewSequenceUnit}
+            >
+              {intl.formatMessage(messages.pasteAsNewUnitLink)}
+            </Button>
+          )}
+        </div>
+      </div>
+      {shouldDisplayDropdown && (
+        <SequenceNavigationDropdown
+          unitId={unitId}
+          unitIds={unitIds}
+          handleAddNewSequenceUnit={handleAddNewSequenceUnit}
+          handlePasteNewSequenceUnit={handlePasteNewSequenceUnit}
+          showPasteUnit={showPasteUnit}
+        />
+      )}
+    </div>
+  );
+};
+
+SequenceNavigationTabs.propTypes = {
+  unitId: PropTypes.string.isRequired,
+  unitIds: PropTypes.arrayOf(PropTypes.string).isRequired,
+  handleCreateNewCourseXBlock: PropTypes.func.isRequired,
+  showPasteUnit: PropTypes.bool.isRequired,
+};
+
+export default SequenceNavigationTabs;
diff --git a/src/course-unit/course-sequence/sequence-navigation/UnitButton.jsx b/src/course-unit/course-sequence/sequence-navigation/UnitButton.jsx
new file mode 100644
index 0000000000..bb9801077e
--- /dev/null
+++ b/src/course-unit/course-sequence/sequence-navigation/UnitButton.jsx
@@ -0,0 +1,54 @@
+import PropTypes from 'prop-types';
+import { connect, useSelector } from 'react-redux';
+import { Button } from '@openedx/paragon';
+import { Link } from 'react-router-dom';
+
+import UnitIcon from './UnitIcon';
+import { getCourseId, getSequenceId } from '../../data/selectors';
+
+const UnitButton = ({
+  title, contentType, isActive, unitId, className, showTitle,
+}) => {
+  const courseId = useSelector(getCourseId);
+  const sequenceId = useSelector(getSequenceId);
+
+  return (
+    <Button
+      className={className}
+      variant={isActive ? 'primary' : 'outline-primary'}
+      as={Link}
+      title={title}
+      to={`/course/${courseId}/container/${unitId}/${sequenceId}/`}
+      data-testid="course-unit-btn"
+    >
+      <UnitIcon type={contentType} />
+      {showTitle && <span className="unit-title">{title}</span>}
+    </Button>
+  );
+};
+
+UnitButton.propTypes = {
+  className: PropTypes.string,
+  contentType: PropTypes.string.isRequired,
+  isActive: PropTypes.bool,
+  showTitle: PropTypes.bool,
+  title: PropTypes.string.isRequired,
+  unitId: PropTypes.string.isRequired,
+};
+
+UnitButton.defaultProps = {
+  className: undefined,
+  isActive: false,
+  showTitle: false,
+};
+
+const mapStateToProps = (state, props) => {
+  if (props.unitId) {
+    return {
+      ...state.models.units[props.unitId],
+    };
+  }
+  return {};
+};
+
+export default connect(mapStateToProps)(UnitButton);
diff --git a/src/course-unit/course-sequence/sequence-navigation/UnitIcon.jsx b/src/course-unit/course-sequence/sequence-navigation/UnitIcon.jsx
new file mode 100644
index 0000000000..9294d419f1
--- /dev/null
+++ b/src/course-unit/course-sequence/sequence-navigation/UnitIcon.jsx
@@ -0,0 +1,17 @@
+import PropTypes from 'prop-types';
+import { Icon } from '@openedx/paragon';
+import { BookOpen as BookOpenIcon } from '@openedx/paragon/icons';
+
+import { UNIT_TYPE_ICONS_MAP, UNIT_ICON_TYPES } from '../../../generic/block-type-utils/constants';
+
+const UnitIcon = ({ type }) => {
+  const icon = UNIT_TYPE_ICONS_MAP[type] || BookOpenIcon;
+
+  return <Icon src={icon} screenReaderText={type} />;
+};
+
+UnitIcon.propTypes = {
+  type: PropTypes.oneOf(UNIT_ICON_TYPES).isRequired,
+};
+
+export default UnitIcon;
diff --git a/src/course-unit/data/api.js b/src/course-unit/data/api.js
new file mode 100644
index 0000000000..039285dcf4
--- /dev/null
+++ b/src/course-unit/data/api.js
@@ -0,0 +1,227 @@
+// @ts-check
+import { camelCaseObject, getConfig } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+
+import { PUBLISH_TYPES } from '../constants';
+import { normalizeCourseSectionVerticalData, updateXBlockBlockIdToId } from './utils';
+
+const getStudioBaseUrl = () => getConfig().STUDIO_BASE_URL;
+
+export const getCourseUnitApiUrl = (itemId) => `${getStudioBaseUrl()}/xblock/container/${itemId}`;
+export const getXBlockBaseApiUrl = (itemId) => `${getStudioBaseUrl()}/xblock/${itemId}`;
+export const getCourseSectionVerticalApiUrl = (itemId) => `${getStudioBaseUrl()}/api/contentstore/v1/container_handler/${itemId}`;
+export const getCourseVerticalChildrenApiUrl = (itemId) => `${getStudioBaseUrl()}/api/contentstore/v1/container/vertical/${itemId}/children`;
+export const getCourseOutlineInfoUrl = (courseId) => `${getStudioBaseUrl()}/course/${courseId}?format=concise`;
+export const postXBlockBaseApiUrl = () => `${getStudioBaseUrl()}/xblock/`;
+export const libraryBlockChangesUrl = (blockId) => `${getStudioBaseUrl()}/api/contentstore/v2/downstreams/${blockId}/sync`;
+
+/**
+ * Get course unit.
+ * @param {string} unitId
+ * @returns {Promise<Object>}
+ */
+export async function getCourseUnitData(unitId) {
+  const { data } = await getAuthenticatedHttpClient()
+    .get(getCourseUnitApiUrl(unitId));
+
+  return camelCaseObject(data);
+}
+
+/**
+ * Edit course unit display name.
+ * @param {string} unitId
+ * @param {string} displayName
+ * @returns {Promise<Object>}
+ */
+export async function editUnitDisplayName(unitId, displayName) {
+  const { data } = await getAuthenticatedHttpClient()
+    .post(getXBlockBaseApiUrl(unitId), {
+      metadata: {
+        display_name: displayName,
+      },
+    });
+
+  return data;
+}
+
+/**
+ * Get an object containing course section vertical data.
+ * @param {string} unitId
+ * @returns {Promise<Object>}
+ */
+export async function getCourseSectionVerticalData(unitId) {
+  const { data } = await getAuthenticatedHttpClient()
+    .get(getCourseSectionVerticalApiUrl(unitId));
+
+  return normalizeCourseSectionVerticalData(data);
+}
+
+/**
+ * Creates a new course XBlock.
+ * @param {Object} options - The options for creating the XBlock.
+ * @param {string} options.type - The type of the XBlock.
+ * @param {string} [options.category] - The category of the XBlock. Defaults to the type if not provided.
+ * @param {string} options.parentLocator - The parent locator.
+ * @param {string} [options.displayName] - The display name.
+ * @param {string} [options.boilerplate] - The boilerplate.
+ * @param {string} [options.stagedContent] - The staged content.
+ * @param {string} [options.libraryContentKey] - component key from library if being imported.
+ */
+export async function createCourseXblock({
+  type,
+  category,
+  parentLocator,
+  displayName,
+  boilerplate,
+  stagedContent,
+  libraryContentKey,
+}) {
+  const body = {
+    type,
+    boilerplate,
+    category: category || type,
+    parent_locator: parentLocator,
+    display_name: displayName,
+    staged_content: stagedContent,
+    library_content_key: libraryContentKey,
+  };
+
+  const { data } = await getAuthenticatedHttpClient()
+    .post(postXBlockBaseApiUrl(), body);
+
+  return data;
+}
+
+/**
+ * Handles the visibility and data of a course unit, such as publishing, resetting to default values,
+ * and toggling visibility to students.
+ * @param {string} unitId - The ID of the course unit.
+ * @param {string} type - The action type (e.g., PUBLISH_TYPES.discardChanges).
+ * @param {boolean} isVisible - The visibility status for students.
+ * @param {boolean} groupAccess - Access group key set.
+ * @returns {Promise<any>} A promise that resolves with the response data.
+ */
+export async function handleCourseUnitVisibilityAndData(unitId, type, isVisible, groupAccess, isDiscussionEnabled) {
+  const body = {
+    publish: groupAccess ? null : type,
+    ...(type === PUBLISH_TYPES.republish ? {
+      metadata: {
+        visible_to_staff_only: isVisible ? true : null,
+        group_access: groupAccess || null,
+        discussion_enabled: isDiscussionEnabled,
+      },
+    } : {}),
+  };
+
+  const { data } = await getAuthenticatedHttpClient()
+    .post(getXBlockBaseApiUrl(unitId), body);
+
+  return camelCaseObject(data);
+}
+
+/**
+ * Get an object containing course section vertical children data.
+ * @param {string} itemId
+ * @returns {Promise<Object>}
+ */
+export async function getCourseVerticalChildren(itemId) {
+  const { data } = await getAuthenticatedHttpClient()
+    .get(getCourseVerticalChildrenApiUrl(itemId));
+  const camelCaseData = camelCaseObject(data);
+
+  return updateXBlockBlockIdToId(camelCaseData);
+}
+
+/**
+ * Delete a unit item.
+ * @param {string} itemId
+ * @returns {Promise<Object>}
+ */
+export async function deleteUnitItem(itemId) {
+  const { data } = await getAuthenticatedHttpClient()
+    .delete(getXBlockBaseApiUrl(itemId));
+
+  return data;
+}
+
+/**
+ * Duplicate a unit item.
+ * @param {string} itemId
+ * @param {string} XBlockId
+ * @returns {Promise<Object>}
+ */
+export async function duplicateUnitItem(itemId, XBlockId) {
+  const { data } = await getAuthenticatedHttpClient()
+    .post(postXBlockBaseApiUrl(), {
+      parent_locator: itemId,
+      duplicate_source_locator: XBlockId,
+    });
+
+  return data;
+}
+
+/**
+ * @typedef {Object} courseOutline
+ * @property {string} id - The unique identifier of the course.
+ * @property {string} displayName - The display name of the course.
+ * @property {string} category - The category of the course (e.g., "course").
+ * @property {boolean} hasChildren - Whether the course has child items.
+ * @property {boolean} unitLevelDiscussions - Indicates if unit-level discussions are available.
+ * @property {Object} childInfo - Information about the child elements of the course.
+ * @property {string} childInfo.category - The category of the child (e.g., "chapter").
+ * @property {string} childInfo.display_name - The display name of the child element.
+ * @property {Array<Object>} childInfo.children - List of children within the child_info (could be empty).
+ */
+
+/**
+ * Get an object containing course outline data.
+ * @param {string} courseId - The identifier of the course.
+ * @returns {Promise<courseOutline>} - The course outline data.
+ */
+export async function getCourseOutlineInfo(courseId) {
+  const { data } = await getAuthenticatedHttpClient()
+    .get(getCourseOutlineInfoUrl(courseId));
+
+  return camelCaseObject(data);
+}
+
+/**
+ * @typedef {Object} moveInfo
+ * @property {string} moveSourceLocator - The locator of the source block being moved.
+ * @property {string} parentLocator - The locator of the parent block where the source is being moved to.
+ * @property {number} sourceIndex - The index position of the source block.
+ */
+
+/**
+ * Move a unit item to new unit.
+ * @param {string} sourceLocator - The ID of the item to be moved.
+ * @param {string} targetParentLocator - The ID of the XBlock associated with the item.
+ * @returns {Promise<moveInfo>} - The move information.
+ */
+export async function patchUnitItem(sourceLocator, targetParentLocator) {
+  const { data } = await getAuthenticatedHttpClient()
+    .patch(postXBlockBaseApiUrl(), {
+      parent_locator: targetParentLocator,
+      move_source_locator: sourceLocator,
+    });
+
+  return camelCaseObject(data);
+}
+
+/**
+ * Accept the changes from upstream library block in course
+ * @param {string} blockId - The ID of the item to be updated from library.
+ */
+export async function acceptLibraryBlockChanges(blockId) {
+  await getAuthenticatedHttpClient()
+    .post(libraryBlockChangesUrl(blockId));
+}
+
+/**
+ * Ignore the changes from upstream library block in course
+ * @param {string} blockId - The ID of the item to be updated from library.
+ */
+export async function ignoreLibraryBlockChanges(blockId) {
+  await getAuthenticatedHttpClient()
+    .delete(libraryBlockChangesUrl(blockId));
+}
diff --git a/src/course-unit/data/apiHooks.ts b/src/course-unit/data/apiHooks.ts
new file mode 100644
index 0000000000..e07fd10004
--- /dev/null
+++ b/src/course-unit/data/apiHooks.ts
@@ -0,0 +1,19 @@
+import { useMutation } from '@tanstack/react-query';
+
+import { acceptLibraryBlockChanges, ignoreLibraryBlockChanges } from './api';
+
+/**
+ * Hook that provides a "mutation" that can be used to accept library block changes.
+ */
+// eslint-disable-next-line import/prefer-default-export
+export const useAcceptLibraryBlockChanges = () => useMutation({
+  mutationFn: acceptLibraryBlockChanges,
+});
+
+/**
+ * Hook that provides a "mutation" that can be used to ignore library block changes.
+ */
+// eslint-disable-next-line import/prefer-default-export
+export const useIgnoreLibraryBlockChanges = () => useMutation({
+  mutationFn: ignoreLibraryBlockChanges,
+});
diff --git a/src/course-unit/data/selectors.js b/src/course-unit/data/selectors.js
new file mode 100644
index 0000000000..824b4545d4
--- /dev/null
+++ b/src/course-unit/data/selectors.js
@@ -0,0 +1,24 @@
+import { createSelector } from '@reduxjs/toolkit';
+import { RequestStatus } from 'CourseAuthoring/data/constants';
+
+export const getCourseUnitData = (state) => state.courseUnit.unit;
+export const getCanEdit = (state) => state.courseUnit.canEdit;
+export const getStaticFileNotices = (state) => state.courseUnit.staticFileNotices;
+export const getCourseUnit = (state) => state.courseUnit;
+export const getSavingStatus = (state) => state.courseUnit.savingStatus;
+export const getErrorMessage = (state) => state.courseUnit.errorMessage;
+export const getSequenceStatus = (state) => state.courseUnit.sequenceStatus;
+export const getSequenceIds = (state) => state.courseUnit.courseSectionVertical.courseSequenceIds;
+export const getCourseSectionVertical = (state) => state.courseUnit.courseSectionVertical;
+export const getCourseId = (state) => state.courseDetail.courseId;
+export const getSequenceId = (state) => state.courseUnit.sequenceId;
+export const getCourseVerticalChildren = (state) => state.courseUnit.courseVerticalChildren;
+export const getCourseOutlineInfo = (state) => state.courseUnit.courseOutlineInfo;
+export const getCourseOutlineInfoLoadingStatus = (state) => state.courseUnit.courseOutlineInfoLoadingStatus;
+export const getMovedXBlockParams = (state) => state.courseUnit.movedXBlockParams;
+const getLoadingStatuses = (state) => state.courseUnit.loadingStatus;
+export const getIsLoading = createSelector(
+  [getLoadingStatuses],
+  loadingStatus => Object.values(loadingStatus)
+    .some((status) => status === RequestStatus.IN_PROGRESS),
+);
diff --git a/src/course-unit/data/slice.js b/src/course-unit/data/slice.js
new file mode 100644
index 0000000000..aab66ea260
--- /dev/null
+++ b/src/course-unit/data/slice.js
@@ -0,0 +1,152 @@
+/* eslint-disable no-param-reassign */
+import { createSlice } from '@reduxjs/toolkit';
+
+import { RequestStatus } from '../../data/constants';
+
+const slice = createSlice({
+  name: 'courseUnit',
+  initialState: {
+    savingStatus: '',
+    errorMessage: '',
+    isQueryPending: false,
+    isTitleEditFormOpen: false,
+    canEdit: true,
+    loadingStatus: {
+      fetchUnitLoadingStatus: RequestStatus.IN_PROGRESS,
+      courseSectionVerticalLoadingStatus: RequestStatus.IN_PROGRESS,
+      courseVerticalChildrenLoadingStatus: RequestStatus.IN_PROGRESS,
+    },
+    unit: {},
+    courseSectionVertical: {},
+    courseVerticalChildren: { children: [], isPublished: true },
+    staticFileNotices: {},
+    courseOutlineInfo: {},
+    courseOutlineInfoLoadingStatus: RequestStatus.IN_PROGRESS,
+    movedXBlockParams: {
+      isSuccess: false,
+      isUndo: false,
+      title: '',
+      sourceLocator: '',
+      targetParentLocator: '',
+    },
+  },
+  reducers: {
+    fetchCourseItemSuccess: (state, { payload }) => {
+      state.unit = payload;
+    },
+    updateLoadingCourseUnitStatus: (state, { payload }) => {
+      state.loadingStatus = {
+        ...state.loadingStatus,
+        fetchUnitLoadingStatus: payload.status,
+      };
+    },
+    updateQueryPendingStatus: (state, { payload }) => {
+      state.isQueryPending = payload;
+    },
+    changeEditTitleFormOpen: (state, { payload }) => {
+      state.isTitleEditFormOpen = payload;
+    },
+    updateSavingStatus: (state, { payload }) => {
+      const { status, errorMessage } = payload;
+      state.savingStatus = status;
+      state.errorMessage = errorMessage;
+    },
+    fetchSequenceRequest: (state, { payload }) => {
+      state.sequenceId = payload.sequenceId;
+      state.sequenceStatus = RequestStatus.IN_PROGRESS;
+      state.sequenceMightBeUnit = false;
+    },
+    fetchSequenceSuccess: (state, { payload }) => {
+      state.sequenceId = payload.sequenceId;
+      state.sequenceStatus = RequestStatus.SUCCESSFUL;
+      state.sequenceMightBeUnit = false;
+    },
+    fetchSequenceFailure: (state, { payload }) => {
+      state.sequenceId = payload.sequenceId;
+      state.sequenceStatus = RequestStatus.FAILED;
+      state.sequenceMightBeUnit = payload.sequenceMightBeUnit || false;
+    },
+    fetchCourseSectionVerticalDataSuccess: (state, { payload }) => {
+      state.courseSectionVertical = payload;
+    },
+    updateLoadingCourseSectionVerticalDataStatus: (state, { payload }) => {
+      state.loadingStatus = {
+        ...state.loadingStatus,
+        courseSectionVerticalLoadingStatus: payload.status,
+      };
+    },
+    updateLoadingCourseXblockStatus: (state, { payload }) => {
+      state.loadingStatus = {
+        ...state.loadingStatus,
+        createUnitXblockLoadingStatus: payload.status,
+      };
+    },
+    addNewUnitStatus: (state, { payload }) => {
+      state.loadingStatus = {
+        ...state.loadingStatus,
+        fetchUnitLoadingStatus: payload.status,
+      };
+    },
+    updateCourseVerticalChildren: (state, { payload }) => {
+      state.courseVerticalChildren = payload;
+    },
+    updateCourseVerticalChildrenLoadingStatus: (state, { payload }) => {
+      state.loadingStatus.courseVerticalChildrenLoadingStatus = payload.status;
+    },
+    deleteXBlock: (state, { payload }) => {
+      state.courseVerticalChildren.children = state.courseVerticalChildren.children.filter(
+        (component) => component.id !== payload,
+      );
+    },
+    duplicateXBlock: (state, { payload }) => {
+      state.courseVerticalChildren = {
+        ...payload.newCourseVerticalChildren,
+        children: payload.newCourseVerticalChildren.children.map((component) => {
+          if (component.blockId === payload.newId) {
+            component.shouldScroll = true;
+          }
+          return component;
+        }),
+      };
+    },
+    fetchStaticFileNoticesSuccess: (state, { payload }) => {
+      state.staticFileNotices = payload;
+    },
+    updateCourseOutlineInfo: (state, { payload }) => {
+      state.courseOutlineInfo = payload;
+    },
+    updateCourseOutlineInfoLoadingStatus: (state, { payload }) => {
+      state.courseOutlineInfoLoadingStatus = payload.status;
+    },
+    updateMovedXBlockParams: (state, { payload }) => {
+      state.movedXBlockParams = { ...state.movedXBlockParams, ...payload };
+    },
+  },
+});
+
+export const {
+  fetchCourseItemSuccess,
+  updateLoadingCourseUnitStatus,
+  updateSavingStatus,
+  updateModel,
+  fetchSequenceRequest,
+  fetchSequenceSuccess,
+  fetchSequenceFailure,
+  fetchCourseSectionVerticalDataSuccess,
+  updateLoadingCourseSectionVerticalDataStatus,
+  changeEditTitleFormOpen,
+  updateQueryPendingStatus,
+  updateLoadingCourseXblockStatus,
+  updateCourseVerticalChildren,
+  updateCourseVerticalChildrenLoadingStatus,
+  deleteXBlock,
+  duplicateXBlock,
+  fetchStaticFileNoticesSuccess,
+  updateCourseOutlineInfo,
+  updateCourseOutlineInfoLoadingStatus,
+  updateMovedXBlockParams,
+} = slice.actions;
+
+export const {
+  reducer,
+} = slice;
diff --git a/src/course-unit/data/thunk.js b/src/course-unit/data/thunk.js
new file mode 100644
index 0000000000..a0d421eea3
--- /dev/null
+++ b/src/course-unit/data/thunk.js
@@ -0,0 +1,320 @@
+import { camelCaseObject } from '@edx/frontend-platform';
+
+import {
+  hideProcessingNotification,
+  showProcessingNotification,
+} from '../../generic/processing-notification/data/slice';
+import { handleResponseErrors } from '../../generic/saving-error-alert';
+import { RequestStatus } from '../../data/constants';
+import { NOTIFICATION_MESSAGES } from '../../constants';
+import { updateModel, updateModels } from '../../generic/model-store';
+import { updateClipboardData } from '../../generic/data/slice';
+import {
+  getCourseUnitData,
+  editUnitDisplayName,
+  getCourseSectionVerticalData,
+  createCourseXblock,
+  getCourseVerticalChildren,
+  handleCourseUnitVisibilityAndData,
+  deleteUnitItem,
+  duplicateUnitItem,
+  getCourseOutlineInfo,
+  patchUnitItem,
+} from './api';
+import {
+  updateLoadingCourseUnitStatus,
+  fetchCourseItemSuccess,
+  updateSavingStatus,
+  fetchSequenceRequest,
+  fetchSequenceFailure,
+  fetchSequenceSuccess,
+  fetchCourseSectionVerticalDataSuccess,
+  updateLoadingCourseSectionVerticalDataStatus,
+  updateLoadingCourseXblockStatus,
+  updateCourseVerticalChildren,
+  updateCourseVerticalChildrenLoadingStatus,
+  updateQueryPendingStatus,
+  deleteXBlock,
+  duplicateXBlock,
+  fetchStaticFileNoticesSuccess,
+  updateCourseOutlineInfo,
+  updateCourseOutlineInfoLoadingStatus,
+  updateMovedXBlockParams,
+} from './slice';
+import { getNotificationMessage } from './utils';
+
+export function fetchCourseUnitQuery(courseId) {
+  return async (dispatch) => {
+    dispatch(updateLoadingCourseUnitStatus({ status: RequestStatus.IN_PROGRESS }));
+
+    try {
+      const courseUnit = await getCourseUnitData(courseId);
+      dispatch(fetchCourseItemSuccess(courseUnit));
+      dispatch(updateLoadingCourseUnitStatus({ status: RequestStatus.SUCCESSFUL }));
+      return true;
+    } catch (error) {
+      dispatch(updateLoadingCourseUnitStatus({ status: RequestStatus.FAILED }));
+      return false;
+    }
+  };
+}
+
+export function fetchCourseSectionVerticalData(courseId, sequenceId) {
+  return async (dispatch) => {
+    dispatch(updateLoadingCourseSectionVerticalDataStatus({ status: RequestStatus.IN_PROGRESS }));
+    dispatch(fetchSequenceRequest({ sequenceId }));
+
+    try {
+      const courseSectionVerticalData = await getCourseSectionVerticalData(courseId);
+      dispatch(fetchCourseSectionVerticalDataSuccess(courseSectionVerticalData));
+      dispatch(updateLoadingCourseSectionVerticalDataStatus({ status: RequestStatus.SUCCESSFUL }));
+      dispatch(updateModel({
+        modelType: 'sequences',
+        model: courseSectionVerticalData.sequence,
+      }));
+      dispatch(updateModels({
+        modelType: 'units',
+        models: courseSectionVerticalData.units,
+      }));
+      dispatch(fetchStaticFileNoticesSuccess(JSON.parse(localStorage.getItem('staticFileNotices'))));
+      localStorage.removeItem('staticFileNotices');
+      dispatch(updateClipboardData(courseSectionVerticalData.userClipboard));
+      dispatch(fetchSequenceSuccess({ sequenceId }));
+      return true;
+    } catch (error) {
+      dispatch(updateLoadingCourseSectionVerticalDataStatus({ status: RequestStatus.FAILED }));
+      dispatch(fetchSequenceFailure({ sequenceId }));
+      return false;
+    }
+  };
+}
+
+export function editCourseItemQuery(itemId, displayName, sequenceId) {
+  return async (dispatch) => {
+    dispatch(updateSavingStatus({ status: RequestStatus.PENDING }));
+    dispatch(showProcessingNotification(NOTIFICATION_MESSAGES.saving));
+
+    try {
+      await editUnitDisplayName(itemId, displayName).then(async (result) => {
+        if (result) {
+          const courseUnit = await getCourseUnitData(itemId);
+          const courseSectionVerticalData = await getCourseSectionVerticalData(itemId);
+          dispatch(fetchCourseSectionVerticalDataSuccess(courseSectionVerticalData));
+          dispatch(updateLoadingCourseSectionVerticalDataStatus({ status: RequestStatus.SUCCESSFUL }));
+          dispatch(updateModel({
+            modelType: 'sequences',
+            model: courseSectionVerticalData.sequence,
+          }));
+          dispatch(updateModels({
+            modelType: 'units',
+            models: courseSectionVerticalData.units,
+          }));
+          dispatch(fetchSequenceSuccess({ sequenceId }));
+          dispatch(fetchCourseItemSuccess(courseUnit));
+          dispatch(hideProcessingNotification());
+          dispatch(updateSavingStatus({ status: RequestStatus.SUCCESSFUL }));
+        }
+      });
+    } catch (error) {
+      dispatch(hideProcessingNotification());
+      handleResponseErrors(error, dispatch, updateSavingStatus);
+    }
+  };
+}
+
+export function editCourseUnitVisibilityAndData(
+  itemId,
+  type,
+  isVisible,
+  groupAccess,
+  isDiscussionEnabled,
+  blockId = itemId,
+) {
+  return async (dispatch) => {
+    dispatch(updateSavingStatus({ status: RequestStatus.PENDING }));
+    dispatch(updateQueryPendingStatus(true));
+    const notification = getNotificationMessage(type, isVisible, true);
+    dispatch(showProcessingNotification(notification));
+
+    try {
+      await handleCourseUnitVisibilityAndData(
+        itemId,
+        type,
+        isVisible,
+        groupAccess,
+        isDiscussionEnabled,
+      ).then(async (result) => {
+        if (result) {
+          const courseUnit = await getCourseUnitData(blockId);
+          dispatch(fetchCourseItemSuccess(courseUnit));
+          const courseVerticalChildrenData = await getCourseVerticalChildren(blockId);
+          dispatch(updateCourseVerticalChildren(courseVerticalChildrenData));
+          dispatch(hideProcessingNotification());
+          dispatch(updateSavingStatus({ status: RequestStatus.SUCCESSFUL }));
+        }
+      });
+    } catch (error) {
+      dispatch(hideProcessingNotification());
+      handleResponseErrors(error, dispatch, updateSavingStatus);
+    }
+  };
+}
+
+export function createNewCourseXBlock(body, callback, blockId) {
+  return async (dispatch) => {
+    dispatch(updateLoadingCourseXblockStatus({ status: RequestStatus.IN_PROGRESS }));
+    dispatch(updateSavingStatus({ status: RequestStatus.PENDING }));
+
+    if (body.stagedContent) {
+      dispatch(showProcessingNotification(NOTIFICATION_MESSAGES.pasting));
+    } else {
+      dispatch(showProcessingNotification(NOTIFICATION_MESSAGES.adding));
+    }
+
+    try {
+      await createCourseXblock(body).then(async (result) => {
+        if (result) {
+          const formattedResult = camelCaseObject(result);
+          if (body.category === 'vertical') {
+            const courseSectionVerticalData = await getCourseSectionVerticalData(formattedResult.locator);
+            dispatch(fetchCourseSectionVerticalDataSuccess(courseSectionVerticalData));
+          }
+          if (body.stagedContent) {
+            localStorage.setItem('staticFileNotices', JSON.stringify(formattedResult.staticFileNotices));
+            dispatch(fetchStaticFileNoticesSuccess(formattedResult.staticFileNotices));
+
+            if (body.parentLocator.includes('vertical')) {
+              localStorage.removeItem('staticFileNotices');
+            }
+          }
+          const courseVerticalChildrenData = await getCourseVerticalChildren(blockId);
+          dispatch(updateCourseVerticalChildren(courseVerticalChildrenData));
+          dispatch(hideProcessingNotification());
+          dispatch(updateLoadingCourseXblockStatus({ status: RequestStatus.SUCCESSFUL }));
+          dispatch(updateSavingStatus({ status: RequestStatus.SUCCESSFUL }));
+          if (callback) {
+            callback(result);
+          }
+          const currentBlockId = body.category === 'vertical' ? formattedResult.locator : blockId;
+          const courseUnit = await getCourseUnitData(currentBlockId);
+          dispatch(fetchCourseItemSuccess(courseUnit));
+        }
+      });
+    } catch (error) {
+      dispatch(hideProcessingNotification());
+      dispatch(updateLoadingCourseXblockStatus({ status: RequestStatus.FAILED }));
+      handleResponseErrors(error, dispatch, updateSavingStatus);
+    }
+  };
+}
+
+export function fetchCourseVerticalChildrenData(itemId) {
+  return async (dispatch) => {
+    dispatch(updateCourseVerticalChildrenLoadingStatus({ status: RequestStatus.IN_PROGRESS }));
+
+    try {
+      const courseVerticalChildrenData = await getCourseVerticalChildren(itemId);
+      dispatch(updateCourseVerticalChildren(courseVerticalChildrenData));
+      dispatch(updateCourseVerticalChildrenLoadingStatus({ status: RequestStatus.SUCCESSFUL }));
+    } catch (error) {
+      dispatch(updateCourseVerticalChildrenLoadingStatus({ status: RequestStatus.FAILED }));
+    }
+  };
+}
+
+export function deleteUnitItemQuery(itemId, xblockId) {
+  return async (dispatch) => {
+    dispatch(updateSavingStatus({ status: RequestStatus.PENDING }));
+    dispatch(showProcessingNotification(NOTIFICATION_MESSAGES.deleting));
+
+    try {
+      await deleteUnitItem(xblockId);
+      dispatch(deleteXBlock(xblockId));
+      const { userClipboard } = await getCourseSectionVerticalData(itemId);
+      dispatch(updateClipboardData(userClipboard));
+      const courseUnit = await getCourseUnitData(itemId);
+      dispatch(fetchCourseItemSuccess(courseUnit));
+      dispatch(hideProcessingNotification());
+      dispatch(updateSavingStatus({ status: RequestStatus.SUCCESSFUL }));
+    } catch (error) {
+      dispatch(hideProcessingNotification());
+      handleResponseErrors(error, dispatch, updateSavingStatus);
+    }
+  };
+}
+
+export function duplicateUnitItemQuery(itemId, xblockId) {
+  return async (dispatch) => {
+    dispatch(updateSavingStatus({ status: RequestStatus.PENDING }));
+    dispatch(showProcessingNotification(NOTIFICATION_MESSAGES.duplicating));
+
+    try {
+      const { locator } = await duplicateUnitItem(itemId, xblockId);
+      const newCourseVerticalChildren = await getCourseVerticalChildren(itemId);
+      dispatch(duplicateXBlock({
+        newId: locator,
+        newCourseVerticalChildren,
+      }));
+      const courseUnit = await getCourseUnitData(itemId);
+      dispatch(fetchCourseItemSuccess(courseUnit));
+      dispatch(hideProcessingNotification());
+      dispatch(updateSavingStatus({ status: RequestStatus.SUCCESSFUL }));
+    } catch (error) {
+      dispatch(hideProcessingNotification());
+      handleResponseErrors(error, dispatch, updateSavingStatus);
+    }
+  };
+}
+
+export function getCourseOutlineInfoQuery(courseId) {
+  return async (dispatch) => {
+    dispatch(updateCourseOutlineInfoLoadingStatus({ status: RequestStatus.IN_PROGRESS }));
+
+    try {
+      const result = await getCourseOutlineInfo(courseId);
+      if (result) {
+        dispatch(updateCourseOutlineInfo(result));
+        dispatch(updateCourseOutlineInfoLoadingStatus({ status: RequestStatus.SUCCESSFUL }));
+      }
+    } catch (error) {
+      handleResponseErrors(error, dispatch, updateSavingStatus);
+      dispatch(updateCourseOutlineInfoLoadingStatus({ status: RequestStatus.FAILED }));
+    }
+  };
+}
+
+export function patchUnitItemQuery({
+  sourceLocator = '',
+  targetParentLocator = '',
+  title,
+  currentParentLocator = '',
+  isMoving,
+  callbackFn,
+}) {
+  return async (dispatch) => {
+    dispatch(updateSavingStatus({ status: RequestStatus.PENDING }));
+    dispatch(showProcessingNotification(NOTIFICATION_MESSAGES[isMoving ? 'moving' : 'undoMoving']));
+
+    try {
+      await patchUnitItem(sourceLocator, isMoving ? targetParentLocator : currentParentLocator);
+      const xBlockParams = {
+        title,
+        isSuccess: true,
+        isUndo: !isMoving,
+        sourceLocator,
+        targetParentLocator,
+        currentParentLocator,
+      };
+      dispatch(updateMovedXBlockParams(xBlockParams));
+      dispatch(updateCourseOutlineInfo({}));
+      dispatch(updateCourseOutlineInfoLoadingStatus({ status: RequestStatus.IN_PROGRESS }));
+      const courseUnit = await getCourseUnitData(currentParentLocator);
+      dispatch(fetchCourseItemSuccess(courseUnit));
+      callbackFn();
+    } catch (error) {
+      handleResponseErrors(error, dispatch, updateSavingStatus);
+    } finally {
+      dispatch(hideProcessingNotification());
+    }
+  };
+}
diff --git a/src/course-unit/data/utils.js b/src/course-unit/data/utils.js
new file mode 100644
index 0000000000..def2b38492
--- /dev/null
+++ b/src/course-unit/data/utils.js
@@ -0,0 +1,86 @@
+import { camelCaseObject } from '@edx/frontend-platform';
+
+import { NOTIFICATION_MESSAGES } from '../../constants';
+import { PUBLISH_TYPES } from '../constants';
+
+export function normalizeCourseSectionVerticalData(metadata) {
+  const data = camelCaseObject(metadata);
+  return {
+    ...data,
+    sequence: {
+      id: data.subsectionLocation,
+      title: data.xblock.displayName,
+      unitIds: data.xblockInfo.ancestorInfo.ancestors[0].childInfo.children.map((item) => item.id),
+    },
+    units: data.xblockInfo.ancestorInfo.ancestors[0].childInfo.children.map((unit) => ({
+      id: unit.id,
+      sequenceId: data.subsectionLocation,
+      bookmarked: unit.bookmarked,
+      complete: unit.complete,
+      title: unit.displayName,
+      contentType: unit.xblockType,
+      graded: unit.graded,
+      containsContentTypeGatedContent: unit.contains_content_type_gated_content,
+    })),
+  };
+}
+
+/**
+ * Get the notification message based on the publishing type and visibility.
+ * @param {string} type - The publishing type.
+ * @param {boolean} isVisible - The visibility status.
+ * @param {boolean} isModalView - The modal view status.
+ * @returns {string} The corresponding notification message.
+ */
+export const getNotificationMessage = (type, isVisible, isModalView) => {
+  let notificationMessage;
+
+  if (type === PUBLISH_TYPES.discardChanges) {
+    notificationMessage = NOTIFICATION_MESSAGES.discardChanges;
+  } else if (type === PUBLISH_TYPES.makePublic) {
+    notificationMessage = NOTIFICATION_MESSAGES.publishing;
+  } else if (type === PUBLISH_TYPES.republish && isModalView) {
+    notificationMessage = NOTIFICATION_MESSAGES.saving;
+  } else if (type === PUBLISH_TYPES.republish && !isVisible) {
+    notificationMessage = NOTIFICATION_MESSAGES.makingVisibleToStudents;
+  } else if (type === PUBLISH_TYPES.republish && isVisible) {
+    notificationMessage = NOTIFICATION_MESSAGES.hidingFromStudents;
+  }
+
+  return notificationMessage;
+};
+
+/**
+ * Updates the 'id' property of objects in the data structure using the 'blockId' value where present.
+ * @param {Object} data - The original data structure to be updated.
+ * @returns {Object} - The updated data structure with updated 'id' values.
+ */
+export const updateXBlockBlockIdToId = (data) => {
+  if (typeof data !== 'object' || data === null) {
+    return data;
+  }
+
+  if (Array.isArray(data)) {
+    return data.map(updateXBlockBlockIdToId);
+  }
+
+  const updatedData = {};
+
+  Object.keys(data).forEach(key => {
+    const value = data[key];
+
+    if (key === 'children' || key === 'selectablePartitions' || key === 'groups') {
+      updatedData[key] = updateXBlockBlockIdToId(value);
+    } else {
+      // Copy other properties unchanged
+      updatedData[key] = value;
+    }
+  });
+
+  // Special handling for objects with both 'id' and 'blockId' to ensure 'blockId' takes precedence
+  if ('blockId' in data) {
+    updatedData.id = data.blockId;
+  }
+
+  return updatedData;
+};
diff --git a/src/course-unit/header-navigations/HeaderNavigations.jsx b/src/course-unit/header-navigations/HeaderNavigations.jsx
new file mode 100644
index 0000000000..178c768dfd
--- /dev/null
+++ b/src/course-unit/header-navigations/HeaderNavigations.jsx
@@ -0,0 +1,36 @@
+import PropTypes from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Button } from '@openedx/paragon';
+
+import messages from './messages';
+
+const HeaderNavigations = ({ headerNavigationsActions }) => {
+  const intl = useIntl();
+  const { handleViewLive, handlePreview } = headerNavigationsActions;
+
+  return (
+    <nav className="header-navigations ml-auto flex-shrink-0">
+      <Button
+        variant="outline-primary"
+        onClick={handleViewLive}
+      >
+        {intl.formatMessage(messages.viewLiveButton)}
+      </Button>
+      <Button
+        variant="outline-primary"
+        onClick={handlePreview}
+      >
+        {intl.formatMessage(messages.previewButton)}
+      </Button>
+    </nav>
+  );
+};
+
+HeaderNavigations.propTypes = {
+  headerNavigationsActions: PropTypes.shape({
+    handleViewLive: PropTypes.func.isRequired,
+    handlePreview: PropTypes.func.isRequired,
+  }).isRequired,
+};
+
+export default HeaderNavigations;
diff --git a/src/course-unit/header-navigations/HeaderNavigations.test.jsx b/src/course-unit/header-navigations/HeaderNavigations.test.jsx
new file mode 100644
index 0000000000..e5a094247e
--- /dev/null
+++ b/src/course-unit/header-navigations/HeaderNavigations.test.jsx
@@ -0,0 +1,42 @@
+import { fireEvent, render } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import HeaderNavigations from './HeaderNavigations';
+import messages from './messages';
+
+const handleViewLiveFn = jest.fn();
+const handlePreviewFn = jest.fn();
+const headerNavigationsActions = {
+  handleViewLive: handleViewLiveFn,
+  handlePreview: handlePreviewFn,
+};
+
+const renderComponent = (props) => render(
+  <IntlProvider locale="en">
+    <HeaderNavigations
+      headerNavigationsActions={headerNavigationsActions}
+      {...props}
+    />
+  </IntlProvider>,
+);
+
+describe('<HeaderNavigations />', () => {
+  it('render HeaderNavigations component correctly', () => {
+    const { getByRole } = renderComponent();
+
+    expect(getByRole('button', { name: messages.viewLiveButton.defaultMessage })).toBeInTheDocument();
+    expect(getByRole('button', { name: messages.previewButton.defaultMessage })).toBeInTheDocument();
+  });
+
+  it('calls the correct handlers when clicking buttons', () => {
+    const { getByRole } = renderComponent();
+
+    const viewLiveButton = getByRole('button', { name: messages.viewLiveButton.defaultMessage });
+    fireEvent.click(viewLiveButton);
+    expect(handleViewLiveFn).toHaveBeenCalledTimes(1);
+
+    const previewButton = getByRole('button', { name: messages.previewButton.defaultMessage });
+    fireEvent.click(previewButton);
+    expect(handlePreviewFn).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/src/course-unit/header-navigations/messages.js b/src/course-unit/header-navigations/messages.js
new file mode 100644
index 0000000000..55e60fc965
--- /dev/null
+++ b/src/course-unit/header-navigations/messages.js
@@ -0,0 +1,14 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  viewLiveButton: {
+    id: 'course-authoring.course-unit.button.view-live',
+    defaultMessage: 'View live version',
+  },
+  previewButton: {
+    id: 'course-authoring.course-unit.button.preview',
+    defaultMessage: 'Preview',
+  },
+});
+
+export default messages;
diff --git a/src/course-unit/header-title/HeaderTitle.jsx b/src/course-unit/header-title/HeaderTitle.jsx
new file mode 100644
index 0000000000..336d986fab
--- /dev/null
+++ b/src/course-unit/header-title/HeaderTitle.jsx
@@ -0,0 +1,104 @@
+import { useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import PropTypes from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Form, IconButton, useToggle } from '@openedx/paragon';
+import {
+  EditOutline as EditIcon,
+  Settings as SettingsIcon,
+} from '@openedx/paragon/icons';
+
+import ConfigureModal from '../../generic/configure-modal/ConfigureModal';
+import { getCourseUnitData } from '../data/selectors';
+import { updateQueryPendingStatus } from '../data/slice';
+import messages from './messages';
+
+const HeaderTitle = ({
+  unitTitle,
+  isTitleEditFormOpen,
+  handleTitleEdit,
+  handleTitleEditSubmit,
+  handleConfigureSubmit,
+}) => {
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const [titleValue, setTitleValue] = useState(unitTitle);
+  const currentItemData = useSelector(getCourseUnitData);
+  const [isConfigureModalOpen, openConfigureModal, closeConfigureModal] = useToggle(false);
+  const { selectedPartitionIndex, selectedGroupsLabel } = currentItemData.userPartitionInfo;
+
+  const onConfigureSubmit = (...arg) => {
+    handleConfigureSubmit(currentItemData.id, ...arg, closeConfigureModal);
+  };
+
+  const getVisibilityMessage = () => {
+    let message;
+
+    if (selectedPartitionIndex !== -1 && !Number.isNaN(selectedPartitionIndex) && selectedGroupsLabel) {
+      message = intl.formatMessage(messages.definedVisibilityMessage, { selectedGroupsLabel });
+    } else if (currentItemData.hasPartitionGroupComponents) {
+      message = intl.formatMessage(messages.commonVisibilityMessage);
+    }
+
+    return message ? (<p className="header-title__visibility-message mb-0">{message}</p>) : null;
+  };
+
+  useEffect(() => {
+    setTitleValue(unitTitle);
+    dispatch(updateQueryPendingStatus(true));
+  }, [unitTitle]);
+
+  return (
+    <>
+      <div className="d-flex align-items-center lead" data-testid="unit-header-title">
+        {isTitleEditFormOpen ? (
+          <Form.Group className="m-0">
+            <Form.Control
+              ref={(e) => e && e.focus()}
+              value={titleValue}
+              name="displayName"
+              onChange={(e) => setTitleValue(e.target.value)}
+              aria-label={intl.formatMessage(messages.ariaLabelButtonEdit)}
+              onBlur={() => handleTitleEditSubmit(titleValue)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') {
+                  handleTitleEditSubmit(titleValue);
+                }
+              }}
+            />
+          </Form.Group>
+        ) : unitTitle}
+        <IconButton
+          alt={intl.formatMessage(messages.altButtonEdit)}
+          className="ml-1 flex-shrink-0"
+          iconAs={EditIcon}
+          onClick={handleTitleEdit}
+        />
+        <IconButton
+          alt={intl.formatMessage(messages.altButtonSettings)}
+          className="flex-shrink-0"
+          iconAs={SettingsIcon}
+          onClick={openConfigureModal}
+        />
+        <ConfigureModal
+          isOpen={isConfigureModalOpen}
+          onClose={closeConfigureModal}
+          onConfigureSubmit={onConfigureSubmit}
+          currentItemData={currentItemData}
+          isSelfPaced={false}
+        />
+      </div>
+      {getVisibilityMessage()}
+    </>
+  );
+};
+
+HeaderTitle.propTypes = {
+  unitTitle: PropTypes.string.isRequired,
+  isTitleEditFormOpen: PropTypes.bool.isRequired,
+  handleTitleEdit: PropTypes.func.isRequired,
+  handleTitleEditSubmit: PropTypes.func.isRequired,
+  handleConfigureSubmit: PropTypes.func.isRequired,
+};
+
+export default HeaderTitle;
diff --git a/src/course-unit/header-title/HeaderTitle.scss b/src/course-unit/header-title/HeaderTitle.scss
new file mode 100644
index 0000000000..753c3b7184
--- /dev/null
+++ b/src/course-unit/header-title/HeaderTitle.scss
@@ -0,0 +1,4 @@
+.header-title__visibility-message {
+  font-size: $font-size-sm;
+  font-weight: $font-weight-normal;
+}
diff --git a/src/course-unit/header-title/HeaderTitle.test.jsx b/src/course-unit/header-title/HeaderTitle.test.jsx
new file mode 100644
index 0000000000..7e57c408e0
--- /dev/null
+++ b/src/course-unit/header-title/HeaderTitle.test.jsx
@@ -0,0 +1,135 @@
+import MockAdapter from 'axios-mock-adapter';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { AppProvider } from '@edx/frontend-platform/react';
+import { initializeMockApp } from '@edx/frontend-platform';
+
+import initializeStore from '../../store';
+import { executeThunk } from '../../utils';
+import { getCourseUnitApiUrl } from '../data/api';
+import { fetchCourseUnitQuery } from '../data/thunk';
+import { courseUnitIndexMock } from '../__mocks__';
+import HeaderTitle from './HeaderTitle';
+import messages from './messages';
+
+const blockId = '123';
+const unitTitle = 'Getting Started';
+const isTitleEditFormOpen = false;
+const handleTitleEdit = jest.fn();
+const handleTitleEditSubmit = jest.fn();
+const handleConfigureSubmit = jest.fn();
+let store;
+let axiosMock;
+
+const renderComponent = (props) => render(
+  <AppProvider store={store}>
+    <IntlProvider locale="en">
+      <HeaderTitle
+        unitTitle={unitTitle}
+        isTitleEditFormOpen={isTitleEditFormOpen}
+        handleTitleEdit={handleTitleEdit}
+        handleTitleEditSubmit={handleTitleEditSubmit}
+        handleConfigureSubmit={handleConfigureSubmit}
+        {...props}
+      />
+    </IntlProvider>
+  </AppProvider>,
+);
+
+describe('<HeaderTitle />', () => {
+  beforeEach(async () => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+
+    store = initializeStore();
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+    axiosMock
+      .onGet(getCourseUnitApiUrl(blockId))
+      .reply(200, courseUnitIndexMock);
+    await executeThunk(fetchCourseUnitQuery(blockId), store.dispatch);
+  });
+
+  it('render HeaderTitle component correctly', () => {
+    const { getByText, getByRole } = renderComponent();
+
+    expect(getByText(unitTitle)).toBeInTheDocument();
+    expect(getByRole('button', { name: messages.altButtonEdit.defaultMessage })).toBeInTheDocument();
+    expect(getByRole('button', { name: messages.altButtonSettings.defaultMessage })).toBeInTheDocument();
+  });
+
+  it('render HeaderTitle with open edit form', () => {
+    const { getByRole } = renderComponent({
+      isTitleEditFormOpen: true,
+    });
+
+    expect(getByRole('textbox', { name: messages.ariaLabelButtonEdit.defaultMessage })).toBeInTheDocument();
+    expect(getByRole('textbox', { name: messages.ariaLabelButtonEdit.defaultMessage })).toHaveValue(unitTitle);
+    expect(getByRole('button', { name: messages.altButtonEdit.defaultMessage })).toBeInTheDocument();
+    expect(getByRole('button', { name: messages.altButtonSettings.defaultMessage })).toBeInTheDocument();
+  });
+
+  it('calls toggle edit title form by clicking on Edit button', () => {
+    const { getByRole } = renderComponent();
+
+    const editTitleButton = getByRole('button', { name: messages.altButtonEdit.defaultMessage });
+    userEvent.click(editTitleButton);
+    expect(handleTitleEdit).toHaveBeenCalledTimes(1);
+  });
+
+  it('calls saving title by clicking outside or press Enter key', async () => {
+    const { getByRole } = renderComponent({
+      isTitleEditFormOpen: true,
+    });
+
+    const titleField = getByRole('textbox', { name: messages.ariaLabelButtonEdit.defaultMessage });
+    userEvent.type(titleField, ' 1');
+    expect(titleField).toHaveValue(`${unitTitle} 1`);
+    userEvent.click(document.body);
+    expect(handleTitleEditSubmit).toHaveBeenCalledTimes(1);
+
+    userEvent.click(titleField);
+    userEvent.type(titleField, ' 2[Enter]');
+    expect(titleField).toHaveValue(`${unitTitle} 1 2`);
+    expect(handleTitleEditSubmit).toHaveBeenCalledTimes(2);
+  });
+
+  it('displays a visibility message with the selected groups for the unit', async () => {
+    axiosMock
+      .onGet(getCourseUnitApiUrl(blockId))
+      .reply(200, {
+        ...courseUnitIndexMock,
+        user_partition_info: {
+          ...courseUnitIndexMock.user_partition_info,
+          selected_partition_index: '1',
+          selected_groups_label: 'Visibility group 1',
+        },
+      });
+    await executeThunk(fetchCourseUnitQuery(blockId), store.dispatch);
+    const { getByText } = renderComponent();
+    const visibilityMessage = messages.definedVisibilityMessage.defaultMessage
+      .replace('{selectedGroupsLabel}', 'Visibility group 1');
+
+    expect(getByText(visibilityMessage)).toBeInTheDocument();
+  });
+
+  it('displays a visibility message with the selected groups for some of xblock', async () => {
+    axiosMock
+      .onGet(getCourseUnitApiUrl(blockId))
+      .reply(200, {
+        ...courseUnitIndexMock,
+        has_partition_group_components: true,
+      });
+    await executeThunk(fetchCourseUnitQuery(blockId), store.dispatch);
+    const { getByText } = renderComponent();
+
+    expect(getByText(messages.commonVisibilityMessage.defaultMessage)).toBeInTheDocument();
+  });
+});
diff --git a/src/course-unit/header-title/messages.js b/src/course-unit/header-title/messages.js
new file mode 100644
index 0000000000..036e9ddef8
--- /dev/null
+++ b/src/course-unit/header-title/messages.js
@@ -0,0 +1,31 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  altButtonEdit: {
+    id: 'course-authoring.course-unit.heading.button.edit.alt',
+    defaultMessage: 'Edit',
+    description: 'The unit edit button text',
+  },
+  ariaLabelButtonEdit: {
+    id: 'course-authoring.course-unit.heading.button.edit.aria-label',
+    defaultMessage: 'Edit field',
+    description: 'The unit edit button aria label',
+  },
+  altButtonSettings: {
+    id: 'course-authoring.course-unit.heading.button.settings.alt',
+    defaultMessage: 'Settings',
+    description: 'The unit settings button text',
+  },
+  definedVisibilityMessage: {
+    id: 'course-authoring.course-unit.heading.visibility.defined.message',
+    defaultMessage: 'Access to this unit is restricted to: {selectedGroupsLabel}',
+    description: 'Group visibility accessibility text for Unit',
+  },
+  commonVisibilityMessage: {
+    id: 'course-authoring.course-unit.heading.visibility.common.message',
+    defaultMessage: 'Access to some content in this unit is restricted to specific groups of learners.',
+    description: 'The label text of some content restriction in this unit',
+  },
+});
+
+export default messages;
diff --git a/src/course-unit/hooks.jsx b/src/course-unit/hooks.jsx
new file mode 100644
index 0000000000..11731cc2ad
--- /dev/null
+++ b/src/course-unit/hooks.jsx
@@ -0,0 +1,204 @@
+import { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import { useToggle } from '@openedx/paragon';
+
+import { RequestStatus } from '../data/constants';
+import { useCopyToClipboard } from '../generic/clipboard';
+import {
+  createNewCourseXBlock,
+  fetchCourseUnitQuery,
+  editCourseItemQuery,
+  fetchCourseSectionVerticalData,
+  fetchCourseVerticalChildrenData,
+  deleteUnitItemQuery,
+  duplicateUnitItemQuery,
+  editCourseUnitVisibilityAndData,
+  getCourseOutlineInfoQuery,
+  patchUnitItemQuery,
+} from './data/thunk';
+import {
+  getCourseSectionVertical,
+  getCourseVerticalChildren,
+  getCourseUnitData,
+  getIsLoading,
+  getSavingStatus,
+  getErrorMessage,
+  getSequenceStatus,
+  getStaticFileNotices,
+  getCanEdit,
+  getCourseOutlineInfo,
+  getMovedXBlockParams,
+} from './data/selectors';
+import {
+  changeEditTitleFormOpen,
+  updateQueryPendingStatus,
+  updateMovedXBlockParams,
+} from './data/slice';
+import { useIframe } from './context/hooks';
+import { messageTypes, PUBLISH_TYPES } from './constants';
+
+export const useCourseUnit = ({ courseId, blockId }) => {
+  const dispatch = useDispatch();
+  const [searchParams] = useSearchParams();
+  const { sendMessageToIframe } = useIframe();
+  const [isMoveModalOpen, openMoveModal, closeMoveModal] = useToggle(false);
+
+  const courseUnit = useSelector(getCourseUnitData);
+  const savingStatus = useSelector(getSavingStatus);
+  const isLoading = useSelector(getIsLoading);
+  const errorMessage = useSelector(getErrorMessage);
+  const sequenceStatus = useSelector(getSequenceStatus);
+  const { draftPreviewLink, publishedPreviewLink } = useSelector(getCourseSectionVertical);
+  const courseVerticalChildren = useSelector(getCourseVerticalChildren);
+  const staticFileNotices = useSelector(getStaticFileNotices);
+  const navigate = useNavigate();
+  const isTitleEditFormOpen = useSelector(state => state.courseUnit.isTitleEditFormOpen);
+  const canEdit = useSelector(getCanEdit);
+  const courseOutlineInfo = useSelector(getCourseOutlineInfo);
+  const movedXBlockParams = useSelector(getMovedXBlockParams);
+  const { currentlyVisibleToStudents } = courseUnit;
+  const { sharedClipboardData, showPasteXBlock, showPasteUnit } = useCopyToClipboard(canEdit);
+  const { canPasteComponent } = courseVerticalChildren;
+
+  const unitTitle = courseUnit.metadata?.displayName || '';
+  const sequenceId = courseUnit.ancestorInfo?.ancestors[0].id;
+
+  const headerNavigationsActions = {
+    handleViewLive: () => {
+      window.open(publishedPreviewLink, '_blank');
+    },
+    handlePreview: () => {
+      window.open(draftPreviewLink, '_blank');
+    },
+  };
+
+  const handleTitleEdit = () => {
+    dispatch(changeEditTitleFormOpen(!isTitleEditFormOpen));
+  };
+
+  const handleConfigureSubmit = (id, isVisible, groupAccess, isDiscussionEnabled, closeModalFn) => {
+    dispatch(editCourseUnitVisibilityAndData(
+      id,
+      PUBLISH_TYPES.republish,
+      isVisible,
+      groupAccess,
+      isDiscussionEnabled,
+      blockId,
+    ));
+    closeModalFn();
+  };
+
+  const handleTitleEditSubmit = (displayName) => {
+    if (unitTitle !== displayName) {
+      dispatch(editCourseItemQuery(blockId, displayName, sequenceId));
+    }
+
+    handleTitleEdit();
+  };
+
+  const handleNavigate = (id) => {
+    if (sequenceId) {
+      const path = `/course/${courseId}/container/${blockId}/${id}`;
+      const options = { replace: true };
+      if (searchParams.size) {
+        navigate({
+          pathname: path,
+          search: `?${searchParams}`,
+        }, options);
+      } else {
+        navigate(path, options);
+      }
+    }
+  };
+
+  const handleCreateNewCourseXBlock = (body, callback) => (
+    dispatch(createNewCourseXBlock(body, callback, blockId))
+  );
+
+  const unitXBlockActions = {
+    handleDelete: (XBlockId) => {
+      dispatch(deleteUnitItemQuery(blockId, XBlockId));
+    },
+    handleDuplicate: (XBlockId) => {
+      dispatch(duplicateUnitItemQuery(blockId, XBlockId));
+    },
+  };
+
+  const handleRollbackMovedXBlock = () => {
+    const {
+      sourceLocator, targetParentLocator, title, currentParentLocator,
+    } = movedXBlockParams;
+    dispatch(patchUnitItemQuery({
+      sourceLocator,
+      targetParentLocator,
+      title,
+      currentParentLocator,
+      isMoving: false,
+      callbackFn: () => {
+        sendMessageToIframe(messageTypes.refreshXBlock, null);
+        window.scrollTo({ top: 0, behavior: 'smooth' });
+      },
+    }));
+  };
+
+  const handleCloseXBlockMovedAlert = () => {
+    dispatch(updateMovedXBlockParams({ isSuccess: false }));
+  };
+
+  const handleNavigateToTargetUnit = () => {
+    navigate(`/course/${courseId}/container/${movedXBlockParams.targetParentLocator}`);
+  };
+
+  useEffect(() => {
+    if (savingStatus === RequestStatus.SUCCESSFUL) {
+      dispatch(updateQueryPendingStatus(true));
+    }
+  }, [savingStatus]);
+
+  useEffect(() => {
+    dispatch(fetchCourseUnitQuery(blockId));
+    dispatch(fetchCourseSectionVerticalData(blockId, sequenceId));
+    dispatch(fetchCourseVerticalChildrenData(blockId));
+
+    handleNavigate(sequenceId);
+    dispatch(updateMovedXBlockParams({ isSuccess: false }));
+  }, [courseId, blockId, sequenceId]);
+
+  useEffect(() => {
+    if (isMoveModalOpen && !Object.keys(courseOutlineInfo).length) {
+      dispatch(getCourseOutlineInfoQuery(courseId));
+    }
+  }, [isMoveModalOpen]);
+
+  return {
+    sequenceId,
+    courseUnit,
+    unitTitle,
+    errorMessage,
+    sequenceStatus,
+    savingStatus,
+    staticFileNotices,
+    currentlyVisibleToStudents,
+    isLoading,
+    isTitleEditFormOpen,
+    sharedClipboardData,
+    showPasteXBlock,
+    showPasteUnit,
+    unitXBlockActions,
+    headerNavigationsActions,
+    handleTitleEdit,
+    handleTitleEditSubmit,
+    handleCreateNewCourseXBlock,
+    handleConfigureSubmit,
+    courseVerticalChildren,
+    canPasteComponent,
+    isMoveModalOpen,
+    openMoveModal,
+    closeMoveModal,
+    handleRollbackMovedXBlock,
+    handleCloseXBlockMovedAlert,
+    movedXBlockParams,
+    handleNavigateToTargetUnit,
+  };
+};
diff --git a/src/course-unit/index.js b/src/course-unit/index.js
new file mode 100644
index 0000000000..e4ace54b03
--- /dev/null
+++ b/src/course-unit/index.js
@@ -0,0 +1,2 @@
+export { default as CourseUnit } from './CourseUnit';
+export { IframeProvider } from './context/iFrameContext';
diff --git a/src/course-unit/messages.js b/src/course-unit/messages.js
new file mode 100644
index 0000000000..83779747a0
--- /dev/null
+++ b/src/course-unit/messages.js
@@ -0,0 +1,48 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  alertFailedGeneric: {
+    id: 'course-authoring.course-unit.general.alert.error.description',
+    defaultMessage: 'Unable to {actionName} {type}. Please try again.',
+  },
+  alertUnpublishedVersion: {
+    id: 'course-authoring.course-unit.general.alert.unpublished-version.description',
+    defaultMessage: 'Note: The last published version of this unit is live. By publishing changes you will change the student experience.',
+  },
+  pasteButtonText: {
+    id: 'course-authoring.course-unit.paste-component.btn.text',
+    defaultMessage: 'Paste component',
+  },
+  alertMoveSuccessTitle: {
+    id: 'course-authoring.course-unit.alert.xblock.move.success.title',
+    defaultMessage: 'Success!',
+    description: 'Title for the success alert when an XBlock is moved successfully',
+  },
+  alertMoveSuccessDescription: {
+    id: 'course-authoring.course-unit.alert.xblock.move.success.description',
+    defaultMessage: '{title} has been moved',
+    description: 'Description for the success alert when an XBlock is moved successfully',
+  },
+  alertMoveCancelTitle: {
+    id: 'course-authoring.course-unit.alert.xblock.move.cancel.title',
+    defaultMessage: 'Move cancelled',
+    description: 'Title for the alert when moving an XBlock is cancelled',
+  },
+  alertMoveCancelDescription: {
+    id: 'course-authoring.course-unit.alert.xblock.move.cancel.description',
+    defaultMessage: '{title} has been moved back to its original location',
+    description: 'Description for the alert when moving an XBlock is cancelled and the XBlock is moved back to its original location',
+  },
+  undoMoveButton: {
+    id: 'course-authoring.course-unit.alert.xblock.move.undo.btn.text',
+    defaultMessage: 'Undo move',
+    description: 'Text for the button allowing users to undo a move action of an XBlock',
+  },
+  newLocationButton: {
+    id: 'course-authoring.course-unit.alert.xblock.new.location.btn.text',
+    defaultMessage: 'Take me to the new location',
+    description: 'Text for the button allowing users to navigate to the new location after an XBlock has been moved',
+  },
+});
+
+export default messages;
diff --git a/src/course-unit/move-modal/components/CategoryIndicator.tsx b/src/course-unit/move-modal/components/CategoryIndicator.tsx
new file mode 100644
index 0000000000..58160b51b4
--- /dev/null
+++ b/src/course-unit/move-modal/components/CategoryIndicator.tsx
@@ -0,0 +1,26 @@
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import messages from '../messages';
+
+const CategoryIndicator = ({ categoryText, displayName }: { categoryText: string, displayName: string }) => {
+  const intl = useIntl();
+  return (
+    <div className="xblock-items-category small text-gray-500">
+      <span className="sr-only">
+        {intl.formatMessage(messages.moveModalCategoryIndicatorAccessibilityText, {
+          categoryText,
+          displayName,
+        })}
+      </span>
+      <span
+        className="category-text"
+        aria-hidden="true"
+        data-testid="move-xblock-modal-category"
+      >
+        {categoryText}
+      </span>
+    </div>
+  );
+};
+
+export default CategoryIndicator;
diff --git a/src/course-unit/move-modal/components/EmptyMessage.tsx b/src/course-unit/move-modal/components/EmptyMessage.tsx
new file mode 100644
index 0000000000..99737b0aa3
--- /dev/null
+++ b/src/course-unit/move-modal/components/EmptyMessage.tsx
@@ -0,0 +1,17 @@
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import messages from '../messages';
+
+const EmptyMessage = ({ category, categoryText }: { category: string, categoryText: string }) => {
+  const intl = useIntl();
+  return (
+    <li className="xblock-no-child-message">
+      {intl.formatMessage(messages.moveModalEmptyCategoryText, {
+        category,
+        categoryText: categoryText.toLowerCase(),
+      })}
+    </li>
+  );
+};
+
+export default EmptyMessage;
diff --git a/src/course-unit/move-modal/components/ModalLoader.tsx b/src/course-unit/move-modal/components/ModalLoader.tsx
new file mode 100644
index 0000000000..0685d2b93f
--- /dev/null
+++ b/src/course-unit/move-modal/components/ModalLoader.tsx
@@ -0,0 +1,9 @@
+import { LoadingSpinner } from '../../../generic/Loading';
+
+const ModalLoader = () => (
+  <div className="move-xblock-modal-loading">
+    <LoadingSpinner />
+  </div>
+);
+
+export default ModalLoader;
diff --git a/src/course-unit/move-modal/components/index.ts b/src/course-unit/move-modal/components/index.ts
new file mode 100644
index 0000000000..4d07788092
--- /dev/null
+++ b/src/course-unit/move-modal/components/index.ts
@@ -0,0 +1,3 @@
+export { default as EmptyMessage } from './EmptyMessage';
+export { default as ModalLoader } from './ModalLoader';
+export { default as CategoryIndicator } from './CategoryIndicator';
diff --git a/src/course-unit/move-modal/constants.ts b/src/course-unit/move-modal/constants.ts
new file mode 100644
index 0000000000..d013ec4df7
--- /dev/null
+++ b/src/course-unit/move-modal/constants.ts
@@ -0,0 +1,41 @@
+import messages from './messages';
+
+export const CATEGORIES = {
+  TEXT: {
+    section: messages.moveModalBreadcrumbsSections,
+    subsection: messages.moveModalBreadcrumbsSubsections,
+    unit: messages.moveModalBreadcrumbsUnits,
+    component: messages.moveModalBreadcrumbsComponents,
+    group: messages.moveModalBreadcrumbsGroups,
+  },
+  KEYS: {
+    course: 'course',
+    chapter: 'chapter',
+    section: 'section',
+    sequential: 'sequential',
+    subsection: 'subsection',
+    vertical: 'vertical',
+    unit: 'unit',
+    component: 'component',
+    split_test: 'split_test',
+    group: 'group',
+  },
+  RELATION_MAP: {
+    course: 'section',
+    section: 'subsection',
+    subsection: 'unit',
+    unit: 'component',
+  },
+} as const;
+
+export const MOVE_DIRECTIONS = {
+  forward: 'forward',
+  backward: 'backward',
+} as const;
+
+export const BASIC_BLOCK_TYPES = [
+  'course',
+  'chapter',
+  'sequential',
+  'vertical',
+] as const;
diff --git a/src/course-unit/move-modal/hooks.tsx b/src/course-unit/move-modal/hooks.tsx
new file mode 100644
index 0000000000..69ad13470c
--- /dev/null
+++ b/src/course-unit/move-modal/hooks.tsx
@@ -0,0 +1,234 @@
+import {
+  useCallback, useEffect, useState, useMemo,
+} from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useParams } from 'react-router-dom';
+import { useMediaQuery } from 'react-responsive';
+import { breakpoints } from '@openedx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import { RequestStatus } from '../../data/constants';
+import { useEventListener } from '../../generic/hooks';
+import { getCourseOutlineInfo, getCourseOutlineInfoLoadingStatus } from '../data/selectors';
+import { getCourseOutlineInfoQuery, patchUnitItemQuery } from '../data/thunk';
+import { useIframe } from '../context/hooks';
+import { messageTypes } from '../constants';
+import { CATEGORIES, MOVE_DIRECTIONS } from './constants';
+import {
+  findParentIds, getBreadcrumbs, getXBlockType, isValidCategory,
+} from './utils';
+import {
+  IState, IUseMoveModalParams, IUseMoveModalReturn, IXBlockInfo,
+} from './interfaces';
+
+// eslint-disable-next-line import/prefer-default-export
+export const useMoveModal = ({
+  isOpenModal, closeModal, openModal, courseId,
+}: IUseMoveModalParams): IUseMoveModalReturn => {
+  const { blockId } = useParams<{ blockId: string }>();
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const { sendMessageToIframe } = useIframe();
+  const courseOutlineInfo = useSelector(getCourseOutlineInfo);
+  const courseOutlineInfoLoadingStatus = useSelector(getCourseOutlineInfoLoadingStatus);
+
+  const initialValues = useMemo<IState>(() => ({
+    childrenInfo: { children: courseOutlineInfo.childInfo?.children ?? [], category: CATEGORIES.KEYS.section },
+    parentInfo: { parent: courseOutlineInfo, category: CATEGORIES.KEYS.course },
+    isValidMove: false,
+    sourceXBlockInfo: { current: {} as IXBlockInfo, parent: {} as IXBlockInfo },
+    visitedAncestors: [courseOutlineInfo],
+  }), [courseOutlineInfo]);
+
+  const [state, setState] = useState<IState>(initialValues);
+
+  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });
+
+  const currentXBlockParentIds = useMemo(
+    () => findParentIds(courseOutlineInfo, state.sourceXBlockInfo.current.id as string),
+    [courseOutlineInfo, state.sourceXBlockInfo.current.id],
+  );
+
+  const receiveMessage = useCallback(({ data }: { data: any }) => {
+    const { payload, type } = data;
+
+    if (type === messageTypes.showMoveXBlockModal) {
+      setState((prevState) => ({
+        ...prevState,
+        sourceXBlockInfo: {
+          current: payload.sourceXBlockInfo,
+          parent: payload.sourceParentXBlockInfo,
+        },
+      }));
+      openModal();
+    }
+  }, [openModal]);
+
+  useEventListener('message', receiveMessage);
+
+  const updateParentItemsData = useCallback((direction?: string, newParentIndex?: string) => {
+    setState((prevState: IState) => {
+      if (!direction) {
+        return {
+          ...prevState,
+          parentInfo: {
+            parent: initialValues.parentInfo.parent,
+            category: initialValues.parentInfo.category,
+          },
+          visitedAncestors: [initialValues.parentInfo.parent],
+        };
+      }
+
+      if (
+        direction === MOVE_DIRECTIONS.forward && newParentIndex !== undefined
+        && prevState.childrenInfo.children[newParentIndex]
+      ) {
+        const newParent = prevState.childrenInfo.children[newParentIndex];
+        return {
+          ...prevState,
+          parentInfo: {
+            parent: newParent,
+            category: prevState.parentInfo.category,
+          },
+          visitedAncestors: [...prevState.visitedAncestors, newParent],
+        };
+      }
+
+      if (
+        direction === MOVE_DIRECTIONS.backward && newParentIndex !== undefined
+        && prevState.visitedAncestors[newParentIndex]
+      ) {
+        return {
+          ...prevState,
+          parentInfo: {
+            parent: prevState.visitedAncestors[newParentIndex],
+            category: prevState.parentInfo.category,
+          },
+          visitedAncestors: prevState.visitedAncestors.slice(0, parseInt(newParentIndex, 10) + 1),
+        };
+      }
+
+      return prevState;
+    });
+  }, [initialValues]);
+
+  const handleXBlockClick = useCallback((newParentIndex: string) => {
+    updateParentItemsData(MOVE_DIRECTIONS.forward, newParentIndex);
+  }, [updateParentItemsData]);
+
+  const handleBreadcrumbsClick = useCallback((newParentIndex: string) => {
+    updateParentItemsData(MOVE_DIRECTIONS.backward, newParentIndex);
+  }, [updateParentItemsData]);
+
+  const updateChildrenItemsData = useCallback(() => {
+    setState((prevState: IState) => ({
+      ...prevState,
+      childrenInfo: {
+        ...prevState.childrenInfo,
+        children: prevState.parentInfo.parent?.childInfo?.children || [],
+      },
+    }));
+  }, []);
+
+  const getCategoryText = useCallback(() => (
+    intl.formatMessage(CATEGORIES.TEXT[state.childrenInfo.category]) || ''
+  ), [intl, state.childrenInfo.category]);
+
+  const breadcrumbs = useMemo(() => (
+    getBreadcrumbs(state.visitedAncestors, intl.formatMessage)
+  ), [state.visitedAncestors]);
+
+  const setDisplayedXBlocksCategories = useCallback(() => {
+    setState((prevState) => {
+      const childCategory = CATEGORIES.KEYS.component;
+      const newParentCategory = getXBlockType(prevState.parentInfo.parent?.category || '');
+
+      if (prevState.parentInfo.category !== newParentCategory) {
+        return {
+          ...prevState,
+          parentInfo: {
+            ...prevState.parentInfo,
+            category: newParentCategory,
+          },
+          childrenInfo: {
+            ...prevState.childrenInfo,
+            category: CATEGORIES.RELATION_MAP[newParentCategory] || childCategory,
+          },
+        };
+      }
+      return prevState;
+    });
+  }, []);
+
+  const handleCLoseModal = useCallback(() => {
+    setState(initialValues);
+    closeModal();
+  }, [initialValues, closeModal]);
+
+  const enableMoveOperation = useCallback((targetParentXBlockInfo: IXBlockInfo) => {
+    const isValid = isValidCategory(state.sourceXBlockInfo.parent, targetParentXBlockInfo)
+      && state.sourceXBlockInfo.parent.id !== targetParentXBlockInfo.id // different parent
+      && state.sourceXBlockInfo.current.id !== targetParentXBlockInfo.id; // different source item
+
+    setState((prevState) => ({
+      ...prevState,
+      isValidMove: isValid,
+    }));
+  }, [isValidCategory, state.sourceXBlockInfo]);
+
+  const handleMoveXBlock = useCallback(() => {
+    const lastAncestor = state.visitedAncestors[state.visitedAncestors.length - 1];
+    dispatch(patchUnitItemQuery({
+      sourceLocator: state.sourceXBlockInfo.current.id,
+      targetParentLocator: lastAncestor.id,
+      title: state.sourceXBlockInfo.current.displayName,
+      currentParentLocator: blockId,
+      isMoving: true,
+      callbackFn: () => {
+        sendMessageToIframe(messageTypes.refreshXBlock, null);
+        closeModal();
+        window.scrollTo({ top: 0, behavior: 'smooth' });
+      },
+    }));
+  }, [state, dispatch, blockId, closeModal]);
+
+  useEffect(() => {
+    if (isOpenModal && !Object.keys(courseOutlineInfo).length) {
+      dispatch(getCourseOutlineInfoQuery(courseId));
+    }
+  }, [isOpenModal, courseOutlineInfo, courseId, dispatch]);
+
+  useEffect(() => {
+    if (isOpenModal && courseOutlineInfoLoadingStatus === RequestStatus.SUCCESSFUL) {
+      updateParentItemsData();
+    }
+  }, [courseOutlineInfoLoadingStatus, isOpenModal, updateParentItemsData]);
+
+  useEffect(() => {
+    if (isOpenModal && courseOutlineInfoLoadingStatus === RequestStatus.SUCCESSFUL) {
+      updateChildrenItemsData();
+      setDisplayedXBlocksCategories();
+      enableMoveOperation(state.parentInfo.parent);
+    }
+  }, [
+    state.parentInfo, isOpenModal, courseOutlineInfoLoadingStatus, updateChildrenItemsData,
+    setDisplayedXBlocksCategories, enableMoveOperation,
+  ]);
+
+  return {
+    isLoading: courseOutlineInfoLoadingStatus === RequestStatus.IN_PROGRESS,
+    isValidMove: state.isValidMove,
+    isExtraSmall,
+    parentInfo: state.parentInfo,
+    childrenInfo: state.childrenInfo,
+    displayName: state.sourceXBlockInfo.current.displayName,
+    sourceXBlockId: state.sourceXBlockInfo.current.id,
+    categoryText: getCategoryText(),
+    breadcrumbs,
+    currentXBlockParentIds,
+    handleXBlockClick,
+    handleBreadcrumbsClick,
+    handleCLoseModal,
+    handleMoveXBlock,
+  };
+};
diff --git a/src/course-unit/move-modal/index.scss b/src/course-unit/move-modal/index.scss
new file mode 100644
index 0000000000..b644898e2d
--- /dev/null
+++ b/src/course-unit/move-modal/index.scss
@@ -0,0 +1,79 @@
+.move-xblock-modal {
+    max-width: 57.5rem;
+
+    .move-xblock-modal-loading {
+        min-height: 10rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .pgn__modal-header,
+    .pgn__modal-footer {
+        z-index: 2;
+    }
+
+    .pgn__modal-header {
+        @include pgn-box-shadow(2, "centered");
+    }
+
+    .pgn__modal-footer {
+        @include pgn-box-shadow(2, "down");
+    }
+
+    .pgn__modal-body {
+        background: $white;
+        padding-left: 0;
+        padding-right: 0;
+    }
+
+    .pgn__breadcrumb {
+        border-bottom: 1px solid $light-300;
+        padding: map-get($spacers, 1) map-get($spacers, 4) $spacer;
+
+        .list-inline {
+            flex-wrap: wrap;
+        }
+
+        .list-inline-item {
+            &.active,
+            a.link-muted {
+                color: $dark-500;
+            }
+
+            a.link-muted {
+                cursor: pointer;
+            }
+        }
+    }
+
+    .xblock-items-category {
+        padding: $spacer map-get($spacers, 4) map-get($spacers, 2\.5);
+    }
+
+    .xblock-items-container {
+        list-style: none;
+    }
+
+    .xblock-item {
+        .btn,
+        .component {
+            display: flex;
+            border-radius: 0;
+            width: 100%;
+            gap: map-get($spacers, 2);
+            padding: .5625rem $spacer .5625rem map-get($spacers, 4);
+        }
+
+        .btn {
+            &:hover {
+                background: $light-300;
+                text-decoration: none;
+            }
+        }
+    }
+
+    .xblock-no-child-message {
+        text-align: center;
+    }
+}
diff --git a/src/course-unit/move-modal/index.tsx b/src/course-unit/move-modal/index.tsx
new file mode 100644
index 0000000000..7844d7c310
--- /dev/null
+++ b/src/course-unit/move-modal/index.tsx
@@ -0,0 +1,164 @@
+import React, { FC, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import {
+  ActionRow,
+  Breadcrumb,
+  Button,
+  ModalDialog,
+} from '@openedx/paragon';
+import {
+  ArrowForwardIos as ArrowForwardIosIcon,
+} from '@openedx/paragon/icons';
+
+import { CATEGORIES } from './constants';
+import { IUseMoveModalParams, IXBlock, IXBlockInfo } from './interfaces';
+import { useMoveModal } from './hooks';
+import { EmptyMessage, ModalLoader, CategoryIndicator } from './components';
+import messages from './messages';
+
+const MoveModal: FC<IUseMoveModalParams> = ({
+  isOpenModal, closeModal, openModal, courseId,
+}) => {
+  const intl = useIntl();
+
+  const {
+    isLoading,
+    isValidMove,
+    isExtraSmall,
+    parentInfo,
+    childrenInfo,
+    displayName,
+    categoryText,
+    breadcrumbs,
+    sourceXBlockId,
+    currentXBlockParentIds,
+    handleXBlockClick,
+    handleBreadcrumbsClick,
+    handleCLoseModal,
+    handleMoveXBlock,
+  } = useMoveModal({
+    isOpenModal, closeModal, openModal, courseId,
+  });
+
+  const renderBreadcrumbs = useCallback(() => (
+    <Breadcrumb
+      ariaLabel={intl.formatMessage(messages.moveModalBreadcrumbsLabel)}
+      data-testid="move-xblock-modal-breadcrumbs"
+      isMobile={isExtraSmall}
+      links={breadcrumbs.slice(0, -1).map((breadcrumb, index) => (
+        { label: breadcrumb, 'data-parent-index': index }
+      ))}
+      activeLabel={breadcrumbs[breadcrumbs.length - 1]}
+      clickHandler={({ target }) => handleBreadcrumbsClick(target.dataset.parentIndex)}
+    />
+  ), [isExtraSmall, breadcrumbs, handleBreadcrumbsClick]);
+
+  const getCourseStructureItemButton = useCallback((xBlock: IXBlock, index: number) => (
+    <Button
+      variant="link"
+      className="button-forward text-left justify-content-start text-gray-700"
+      onClick={() => handleXBlockClick(index)}
+    >
+      <span className="xblock-display-name text-truncate">
+        {xBlock?.displayName}
+      </span>
+      {currentXBlockParentIds.includes(xBlock.id) && (
+        <span className="current-location text-nowrap mr-3">
+          {intl.formatMessage(messages.moveModalOutlineItemCurrentLocationText)}
+        </span>
+      )}
+      <ArrowForwardIosIcon className="ml-auto flex-shrink-0" />
+      <span className="sr-only">
+        {intl.formatMessage(messages.moveModalOutlineItemViewText)}
+      </span>
+    </Button>
+  ), [currentXBlockParentIds, handleXBlockClick]);
+
+  const renderCourseStructureItemSpan = useCallback((xBlock: IXBlock) => (
+    <span className="component text-left justify-content-start text-gray-700">
+      <span className="xblock-display-name text-truncate">
+        {xBlock?.displayName}
+      </span>
+      {currentXBlockParentIds.includes(xBlock.id) && (
+        <span className="current-location text-nowrap mr-3">
+          {intl.formatMessage(messages.moveModalOutlineItemCurrentComponentLocationText)}
+        </span>
+      )}
+    </span>
+  ), [currentXBlockParentIds]);
+
+  const renderCourseStructureListItem = useCallback((xBlock: IXBlock, index: number) => (
+    <li key={xBlock.id} className="xblock-item">
+      {sourceXBlockId !== xBlock.id && (xBlock?.childInfo || childrenInfo.category !== CATEGORIES.KEYS.component)
+        ? getCourseStructureItemButton(xBlock, index)
+        : renderCourseStructureItemSpan(xBlock)}
+    </li>
+  ), [sourceXBlockId, childrenInfo.category, getCourseStructureItemButton, renderCourseStructureItemSpan]);
+
+  return (
+    <ModalDialog
+      isOpen={isOpenModal}
+      onClose={handleCLoseModal}
+      size="xl"
+      className="move-xblock-modal"
+      hasCloseButton
+      isFullscreenOnMobile
+    >
+      <ModalDialog.Header>
+        <ModalDialog.Title>
+          {intl.formatMessage(messages.moveModalTitle, { displayName })}
+        </ModalDialog.Title>
+      </ModalDialog.Header>
+      <ModalDialog.Body>
+        {isLoading ? <ModalLoader /> : (
+          <>
+            {renderBreadcrumbs()}
+            <div className="xblock-list-container">
+              <CategoryIndicator
+                categoryText={categoryText}
+                displayName={displayName}
+              />
+              <ul className="xblock-items-container p-0 m-0">
+                {!childrenInfo.children?.length
+                  ? (
+                    <EmptyMessage
+                      category={parentInfo.category}
+                      categoryText={categoryText.toLowerCase()}
+                    />
+                  )
+                  : childrenInfo.children.map(
+                    (xBlock: IXBlock | IXBlockInfo, index: number) => (
+                      renderCourseStructureListItem(xBlock as IXBlock, index)
+                    ),
+                  )}
+              </ul>
+            </div>
+          </>
+        )}
+      </ModalDialog.Body>
+      <ModalDialog.Footer>
+        <ActionRow>
+          <ModalDialog.CloseButton variant="tertiary">
+            {intl.formatMessage(messages.moveModalCancelButton)}
+          </ModalDialog.CloseButton>
+          <Button
+            disabled={!isValidMove}
+            onClick={handleMoveXBlock}
+          >
+            {intl.formatMessage(messages.moveModalSubmitButton)}
+          </Button>
+        </ActionRow>
+      </ModalDialog.Footer>
+    </ModalDialog>
+  );
+};
+
+MoveModal.propTypes = {
+  isOpenModal: PropTypes.bool.isRequired,
+  closeModal: PropTypes.func.isRequired,
+  openModal: PropTypes.func.isRequired,
+  courseId: PropTypes.string.isRequired,
+};
+
+export default MoveModal;
diff --git a/src/course-unit/move-modal/interfaces.ts b/src/course-unit/move-modal/interfaces.ts
new file mode 100644
index 0000000000..3806acd707
--- /dev/null
+++ b/src/course-unit/move-modal/interfaces.ts
@@ -0,0 +1,82 @@
+export interface IXBlockInfo {
+  id: string;
+  displayName: string;
+  childInfo?: {
+    children?: IXBlockInfo[];
+  };
+  category?: string;
+  hasChildren?: boolean;
+}
+
+export interface IUseMoveModalParams {
+  isOpenModal: boolean;
+  closeModal: () => void;
+  openModal: () => void;
+  courseId: string;
+}
+
+export interface IUseMoveModalReturn {
+  isLoading: boolean;
+  isValidMove: boolean;
+  isExtraSmall: boolean;
+  parentInfo: {
+    parent: IXBlockInfo;
+    category: string;
+  };
+  childrenInfo: {
+    children: IXBlockInfo[];
+    category: string;
+  };
+  displayName: string;
+  sourceXBlockId: string;
+  categoryText: string;
+  breadcrumbs: string[];
+  currentXBlockParentIds: string[];
+  handleXBlockClick: (newParentIndex: string | number) => void;
+  handleBreadcrumbsClick: (newParentIndex: string | number) => void;
+  handleCLoseModal: () => void;
+  handleMoveXBlock: () => void;
+}
+
+export interface IState {
+  sourceXBlockInfo: {
+    current: IXBlockInfo;
+    parent: IXBlockInfo;
+  };
+  childrenInfo: {
+    children: IXBlockInfo[];
+    category: string;
+  };
+  parentInfo: {
+    parent: IXBlockInfo;
+    category: string;
+  };
+  visitedAncestors: IXBlockInfo[];
+  isValidMove: boolean;
+}
+
+export interface ITreeNode {
+  id: string;
+  childInfo?: {
+    children?: ITreeNode[];
+  };
+}
+
+export interface IAncestor {
+  category?: string;
+  displayName?: string;
+}
+
+export interface IXBlockChildInfo {
+  category?: string;
+  displayName?: string;
+  children?: IXBlock[];
+}
+
+export interface IXBlock {
+  id: string;
+  displayName: string;
+  category: string;
+  hasChildren: boolean;
+  childInfo?: IXBlockChildInfo;
+}
diff --git a/src/course-unit/move-modal/messages.ts b/src/course-unit/move-modal/messages.ts
new file mode 100644
index 0000000000..b1d71f2a66
--- /dev/null
+++ b/src/course-unit/move-modal/messages.ts
@@ -0,0 +1,81 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  moveModalTitle: {
+    id: 'course-authoring.course-unit.xblock.move.modal.title',
+    defaultMessage: 'Move: {displayName}',
+    description: 'Text for the move modal heading',
+  },
+  moveModalCancelButton: {
+    id: 'course-authoring.course-unit.xblock.move.modal.cancel.btn.text',
+    defaultMessage: 'Cancel',
+    description: 'Text for the button closing move modal of an XBlock',
+  },
+  moveModalSubmitButton: {
+    id: 'course-authoring.course-unit.xblock.move.modal.submit.btn.text',
+    defaultMessage: 'Move',
+    description: 'Text for the button submitting move modal of an XBlock',
+  },
+  moveModalBreadcrumbsBaseCategory: {
+    id: 'course-authoring.course-unit.xblock.move.modal.breadcrumbs.core.category.text',
+    defaultMessage: 'Course Outline',
+    description: 'Text for the core breadcrumbs item in move modal of an XBlock',
+  },
+  moveModalBreadcrumbsSections: {
+    id: 'course-authoring.course-unit.xblock.move.modal.breadcrumbs.sections.text',
+    defaultMessage: 'Sections',
+    description: 'Text for the sections breadcrumbs item in move modal of an XBlock',
+  },
+  moveModalBreadcrumbsSubsections: {
+    id: 'course-authoring.course-unit.xblock.move.modal.breadcrumbs.subsections.text',
+    defaultMessage: 'Subsections',
+    description: 'Text for the subsections breadcrumbs item in move modal of an XBlock',
+  },
+  moveModalBreadcrumbsUnits: {
+    id: 'course-authoring.course-unit.xblock.move.modal.breadcrumbs.units.text',
+    defaultMessage: 'Units',
+    description: 'Text for the units breadcrumbs item in move modal of an XBlock',
+  },
+  moveModalBreadcrumbsComponents: {
+    id: 'course-authoring.course-unit.xblock.move.modal.breadcrumbs.components.text',
+    defaultMessage: 'Components',
+    description: 'Text for the components breadcrumbs item in move modal of an XBlock',
+  },
+  moveModalBreadcrumbsGroups: {
+    id: 'course-authoring.course-unit.xblock.move.modal.breadcrumbs.groups.text',
+    defaultMessage: 'Groups',
+    description: 'Text for the groups breadcrumbs item in move modal of an XBlock',
+  },
+  moveModalBreadcrumbsLabel: {
+    id: 'course-authoring.course-unit.xblock.move.modal.breadcrumbs.label.text',
+    defaultMessage: 'Course Outline breadcrumb',
+    description: 'Text for the breadcrumbs label in move modal of an XBlock',
+  },
+  moveModalEmptyCategoryText: {
+    id: 'course-authoring.course-unit.xblock.move.modal.category.empty.text',
+    defaultMessage: 'This {category} has no {categoryText}',
+    description: 'Text for the category with empty children in move modal of an XBlock',
+  },
+  moveModalCategoryIndicatorAccessibilityText: {
+    id: 'course-authoring.course-unit.xblock.move.modal.category.accessibility.text',
+    defaultMessage: '{categoryText} in {displayName}',
+    description: 'Text for the category indicator accessibility in move modal of an XBlock',
+  },
+  moveModalOutlineItemCurrentLocationText: {
+    id: 'course-authoring.course-unit.xblock.move.modal.outline.item.location.text',
+    defaultMessage: '(Current location)',
+    description: 'Text for the outline item that indicates the current location in move modal of an XBlock',
+  },
+  moveModalOutlineItemCurrentComponentLocationText: {
+    id: 'course-authoring.course-unit.xblock.move.modal.outline.item.component.location.text',
+    defaultMessage: '(Currently selected)',
+    description: 'Text for the outline item that indicates the current component location in move modal of an XBlock',
+  },
+  moveModalOutlineItemViewText: {
+    id: 'course-authoring.course-unit.xblock.move.modal.outline.item.view.text',
+    defaultMessage: 'View child items',
+    description: 'Text for the outline item action description in move modal of an XBlock',
+  },
+});
+
+export default messages;
diff --git a/src/course-unit/move-modal/moveModal.test.tsx b/src/course-unit/move-modal/moveModal.test.tsx
new file mode 100644
index 0000000000..ba94e018a9
--- /dev/null
+++ b/src/course-unit/move-modal/moveModal.test.tsx
@@ -0,0 +1,182 @@
+import MockAdapter from 'axios-mock-adapter';
+import { render, waitFor, within } from '@testing-library/react';
+import { AppProvider } from '@edx/frontend-platform/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { camelCaseObject, initializeMockApp } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import userEvent from '@testing-library/user-event';
+
+import initializeStore from '../../store';
+import { getCourseOutlineInfoUrl } from '../data/api';
+import { courseOutlineInfoMock } from '../__mocks__';
+import { executeThunk } from '../../utils';
+import { getCourseOutlineInfoQuery } from '../data/thunk';
+import { IframeProvider } from '../context/iFrameContext';
+import { IXBlock } from './interfaces';
+import MoveModal from './index';
+import messages from './messages';
+
+let store;
+let axiosMock: MockAdapter;
+const courseId = '1234567890';
+const closeModalMockFn = jest.fn() as jest.MockedFunction<() => void>;
+const openModalMockFn = jest.fn() as jest.MockedFunction<() => void>;
+const scrollToMockFn = jest.fn() as jest.MockedFunction<() => void>;
+const sections: IXBlock[] | any = camelCaseObject(courseOutlineInfoMock)?.childInfo.children || [];
+const subsections: IXBlock[] = sections[1]?.childInfo?.children || [];
+const units: IXBlock[] = subsections[1]?.childInfo?.children || [];
+const components: IXBlock[] = units[0]?.childInfo?.children || [];
+
+const renderComponent = (props?: any) => render(
+  <AppProvider store={store}>
+    <IntlProvider locale="en">
+      <IframeProvider>
+        <MoveModal
+          isOpenModal
+          closeModal={closeModalMockFn}
+          openModal={openModalMockFn}
+          courseId={courseId}
+          {...props}
+        />
+      </IframeProvider>
+    </IntlProvider>
+  </AppProvider>,
+);
+
+describe('<MoveModal />', () => {
+  beforeEach(async () => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+
+    window.scrollTo = scrollToMockFn;
+    store = initializeStore();
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+    axiosMock
+      .onGet(getCourseOutlineInfoUrl(courseId))
+      .reply(200, courseOutlineInfoMock);
+    await executeThunk(getCourseOutlineInfoQuery(courseId), store.dispatch);
+  });
+
+  it('renders loading indicator correctly', async () => {
+    axiosMock
+      .onGet(getCourseOutlineInfoUrl(courseId))
+      .reply(200, null);
+    await executeThunk(getCourseOutlineInfoQuery(courseId), store.dispatch);
+
+    const { getByText } = renderComponent();
+    expect(getByText('Loading...')).toBeInTheDocument();
+  });
+
+  it('renders component properly', () => {
+    const { getByText, getByRole, getByTestId } = renderComponent();
+    const breadcrumbs: HTMLElement = getByTestId('move-xblock-modal-breadcrumbs');
+    const categoryIndicator: HTMLElement = getByTestId('move-xblock-modal-category');
+
+    expect(getByText(messages.moveModalTitle.defaultMessage.replace(' {displayName}', ''))).toBeInTheDocument();
+    expect(within(breadcrumbs).getByText(messages.moveModalBreadcrumbsBaseCategory.defaultMessage)).toBeInTheDocument();
+    expect(
+      within(categoryIndicator).getByText(messages.moveModalBreadcrumbsSections.defaultMessage),
+    ).toBeInTheDocument();
+    expect(getByRole('button', { name: messages.moveModalSubmitButton.defaultMessage })).toBeInTheDocument();
+    expect(getByRole('button', { name: messages.moveModalCancelButton.defaultMessage })).toBeInTheDocument();
+
+    userEvent.click(getByRole('button', { name: messages.moveModalCancelButton.defaultMessage }));
+    expect(closeModalMockFn).toHaveBeenCalledTimes(1);
+  });
+
+  it('correctly navigates through the structure list', async () => {
+    const { getByText, getByRole, getByTestId } = renderComponent();
+    const breadcrumbs: HTMLElement = getByTestId('move-xblock-modal-breadcrumbs');
+    const categoryIndicator: HTMLElement = getByTestId('move-xblock-modal-category');
+
+    expect(within(breadcrumbs).getByText(messages.moveModalBreadcrumbsBaseCategory.defaultMessage)).toBeInTheDocument();
+    expect(
+      within(categoryIndicator).getByText(messages.moveModalBreadcrumbsSections.defaultMessage),
+    ).toBeInTheDocument();
+    sections.forEach((section) => {
+      expect(getByText(section.displayName)).toBeInTheDocument();
+    });
+    userEvent.click(getByRole('button', { name: new RegExp(sections[1].displayName, 'i') }));
+    await waitFor(() => {
+      expect(
+        within(categoryIndicator).getByText(messages.moveModalBreadcrumbsSubsections.defaultMessage),
+      ).toBeInTheDocument();
+      expect(within(breadcrumbs).getByText(sections[1].displayName)).toBeInTheDocument();
+      subsections.forEach((subsection) => {
+        expect(getByRole('button', { name: new RegExp(subsection.displayName, 'i') })).toBeInTheDocument();
+      });
+    });
+    userEvent.click(getByRole('button', { name: new RegExp(subsections[1].displayName, 'i') }));
+    await waitFor(() => {
+      expect(
+        within(categoryIndicator).getByText(messages.moveModalBreadcrumbsUnits.defaultMessage),
+      ).toBeInTheDocument();
+      expect(within(breadcrumbs).getByText(subsections[1].displayName)).toBeInTheDocument();
+      units.forEach((unit) => {
+        expect(getByRole('button', { name: new RegExp(unit.displayName, 'i') })).toBeInTheDocument();
+      });
+    });
+    userEvent.click(getByRole('button', { name: new RegExp(units[0].displayName, 'i') }));
+    await waitFor(() => {
+      expect(
+        within(categoryIndicator).getByText(messages.moveModalBreadcrumbsComponents.defaultMessage),
+      ).toBeInTheDocument();
+      expect(within(breadcrumbs).getByText(units[0].displayName)).toBeInTheDocument();
+      components.forEach((component) => {
+        if (component.displayName) {
+          expect(getByText(component.displayName)).toBeInTheDocument();
+        }
+      });
+    });
+  });
+
+  it('correctly navigates using breadcrumbs', async () => {
+    const { getByRole, getByTestId } = renderComponent();
+    const breadcrumbs: HTMLElement = getByTestId('move-xblock-modal-breadcrumbs');
+    const categoryIndicator: HTMLElement = getByTestId('move-xblock-modal-category');
+
+    await waitFor(() => {
+      userEvent.click(getByRole('button', { name: new RegExp(sections[1].displayName, 'i') }));
+      userEvent.click(getByRole('button', { name: new RegExp(subsections[1].displayName, 'i') }));
+      userEvent.click(within(breadcrumbs).getByText(sections[1].displayName));
+    });
+
+    await waitFor(() => {
+      expect(
+        within(categoryIndicator).getByText(messages.moveModalBreadcrumbsSubsections.defaultMessage),
+      ).toBeInTheDocument();
+      expect(within(breadcrumbs).getByText(sections[1].displayName)).toBeInTheDocument();
+      subsections.forEach((subsection) => (
+        expect(getByRole('button', { name: new RegExp(subsection.displayName, 'i') })).toBeInTheDocument()
+      ));
+    });
+  });
+
+  it('renders empty message when no components are provided', async () => {
+    const { getByText, getByRole } = renderComponent();
+
+    await waitFor(() => {
+      userEvent.click(getByRole('button', { name: new RegExp(sections[1].displayName, 'i') }));
+      userEvent.click(getByRole('button', { name: new RegExp(subsections[1].displayName, 'i') }));
+    });
+
+    await waitFor(() => {
+      const unitBtn = getByRole('button', { name: new RegExp(units[7].displayName, 'i') });
+      userEvent.click(unitBtn);
+    });
+
+    await waitFor(() => {
+      expect(getByText(
+        messages.moveModalEmptyCategoryText.defaultMessage
+          .replace('{category}', 'unit')
+          .replace('{categoryText}', 'components'),
+      )).toBeInTheDocument();
+    });
+  });
+});
diff --git a/src/course-unit/move-modal/utils.test.ts b/src/course-unit/move-modal/utils.test.ts
new file mode 100644
index 0000000000..8721787de2
--- /dev/null
+++ b/src/course-unit/move-modal/utils.test.ts
@@ -0,0 +1,175 @@
+import { CATEGORIES } from './constants';
+import { ITreeNode, IXBlockInfo, IAncestor } from './interfaces';
+import {
+  getXBlockType, findParentIds, isValidCategory, getBreadcrumbs,
+} from './utils';
+import messages from './messages';
+
+const mockFormatMessage = jest.fn((message) => message.defaultMessage);
+
+const tree: ITreeNode = {
+  id: 'root',
+  childInfo: {
+    children: [
+      {
+        id: 'child-1',
+        childInfo: {
+          children: [
+            {
+              id: 'grandchild-1',
+              childInfo: {
+                children: [],
+              },
+            },
+            {
+              id: 'grandchild-2',
+              childInfo: {
+                children: [],
+              },
+            },
+          ],
+        },
+      },
+      {
+        id: 'child-2',
+        childInfo: {
+          children: [],
+        },
+      },
+    ],
+  },
+};
+
+describe('getXBlockType utility', () => {
+  it('returns section for chapter category', () => {
+    const result = getXBlockType(CATEGORIES.KEYS.chapter);
+    expect(result).toBe(CATEGORIES.KEYS.section);
+  });
+
+  it('returns subsection for sequential category', () => {
+    const result = getXBlockType(CATEGORIES.KEYS.sequential);
+    expect(result).toBe(CATEGORIES.KEYS.subsection);
+  });
+
+  it('returns unit for vertical category', () => {
+    const result = getXBlockType(CATEGORIES.KEYS.vertical);
+    expect(result).toBe(CATEGORIES.KEYS.unit);
+  });
+
+  it('returns the same category if no match is found', () => {
+    const customCategory = 'custom-category';
+    const result = getXBlockType(customCategory);
+    expect(result).toBe(customCategory);
+  });
+});
+
+describe('findParentIds utility', () => {
+  it('returns path to target ID in the tree', () => {
+    const result = findParentIds(tree, 'grandchild-2');
+    expect(result).toEqual(['root', 'child-1', 'grandchild-2']);
+  });
+
+  it('returns empty array if target ID is not found', () => {
+    const result = findParentIds(tree, 'non-existent-id');
+    expect(result).toEqual([]);
+  });
+
+  it('returns path with only root when target ID is the root', () => {
+    const result = findParentIds(tree, 'root');
+    expect(result).toEqual(['root']);
+  });
+
+  it('returns empty array if tree is undefined', () => {
+    const result = findParentIds(undefined, 'some-id');
+    expect(result).toEqual([]);
+  });
+});
+
+describe('isValidCategory utility', () => {
+  const sourceParentInfo: IXBlockInfo = {
+    displayName: 'test-source-parent-name',
+    id: '12345',
+    category: 'chapter',
+    hasChildren: true,
+  };
+  const targetParentInfo: IXBlockInfo = {
+    displayName: 'test-target-parent-name',
+    id: '67890',
+    category: 'chapter',
+    hasChildren: true,
+  };
+
+  it('returns true when target and source categories are the same', () => {
+    const result = isValidCategory(sourceParentInfo, targetParentInfo);
+    expect(result).toBe(true);
+  });
+
+  it('returns false when categories are different', () => {
+    const result = isValidCategory(sourceParentInfo, { ...targetParentInfo, category: 'unit' });
+    expect(result).toBe(false);
+  });
+
+  it('converts source category to vertical if it has children and is not basic block type', () => {
+    const result = isValidCategory(
+      { ...sourceParentInfo, category: 'section' },
+      { ...targetParentInfo, category: 'vertical' },
+    );
+    expect(result).toBe(true);
+  });
+
+  it('converts target category to vertical if it has children and is not basic block type or split_test', () => {
+    const result = isValidCategory(
+      { ...sourceParentInfo, category: 'vertical' },
+      { ...targetParentInfo, category: 'section' },
+    );
+    expect(result).toBe(true);
+  });
+
+  it('returns false when categories are different after conversion', () => {
+    const result = isValidCategory(
+      { ...sourceParentInfo, category: 'chapter' },
+      { ...targetParentInfo, category: 'section' },
+    );
+    expect(result).toBe(false);
+  });
+});
+
+describe('getBreadcrumbs utility', () => {
+  it('returns correct breadcrumb labels for visited ancestors', () => {
+    const visitedAncestors: IAncestor[] = [
+      { category: 'chapter', displayName: 'Chapter 1' },
+      { category: 'section', displayName: 'Section 1' },
+    ];
+
+    const result = getBreadcrumbs(visitedAncestors, mockFormatMessage);
+
+    expect(result).toEqual(['Chapter 1', 'Section 1']);
+  });
+
+  it('returns base category label when category is course', () => {
+    const visitedAncestors: IAncestor[] = [
+      { category: CATEGORIES.KEYS.course, displayName: 'Course Name' },
+    ];
+
+    const result = getBreadcrumbs(visitedAncestors, mockFormatMessage);
+
+    expect(result).toEqual(['Course Outline']);
+    expect(mockFormatMessage).toHaveBeenCalledWith(messages.moveModalBreadcrumbsBaseCategory);
+  });
+
+  it('returns empty string if displayName is missing', () => {
+    const visitedAncestors: IAncestor[] = [
+      { category: 'chapter', displayName: '' },
+    ];
+
+    const result = getBreadcrumbs(visitedAncestors, mockFormatMessage);
+
+    expect(result).toEqual(['']);
+  });
+
+  it('returns empty array if visitedAncestors is not an array', () => {
+    const result = getBreadcrumbs(undefined as any, mockFormatMessage);
+
+    expect(result).toEqual([]);
+  });
+});
diff --git a/src/course-unit/move-modal/utils.ts b/src/course-unit/move-modal/utils.ts
new file mode 100644
index 0000000000..e875d672c6
--- /dev/null
+++ b/src/course-unit/move-modal/utils.ts
@@ -0,0 +1,116 @@
+import { BASIC_BLOCK_TYPES, CATEGORIES } from './constants';
+import { ITreeNode, IXBlockInfo, IAncestor } from './interfaces';
+import messages from './messages';
+
+/**
+ * Determines the XBlock type based on the provided category and parent information.
+ *
+ * @param {string} category - The category of the XBlock (e.g., 'chapter', 'sequential', 'vertical').
+ * @returns {string} - The determined XBlock type (e.g., 'section', 'subsection', 'unit').
+ */
+export const getXBlockType = (category: string): string => {
+  const categoryMap: { [key: string]: string } = {
+    [CATEGORIES.KEYS.chapter]: CATEGORIES.KEYS.section,
+    [CATEGORIES.KEYS.sequential]: CATEGORIES.KEYS.subsection,
+    [CATEGORIES.KEYS.vertical]: CATEGORIES.KEYS.unit,
+  };
+  return categoryMap[category] || category;
+};
+
+/**
+ * Recursively finds the parent IDs of the target ID in a hierarchical object structure.
+ * It returns an array of IDs leading to the target, including the target's own ID.
+ *
+ * @param {Object} tree - The hierarchical object to search through.
+ * @param {string} targetId - The ID of the target element for which to find the parent IDs.
+ * @returns {string[]}  - An array of IDs representing the path from the root to the target element.
+ */
+export const findParentIds = (
+  tree: ITreeNode | undefined,
+  targetId: string,
+): string[] => {
+  let path: string[] = [];
+
+  function traverse(node: ITreeNode | undefined, id: string, currentPath: string[]): boolean {
+    if (!node) {
+      return false;
+    }
+
+    currentPath.push(node.id);
+
+    if (node.id === id) {
+      path = currentPath.slice();
+      return true;
+    }
+
+    for (const child of node.childInfo?.children ?? []) {
+      if (traverse(child, id, currentPath)) {
+        return true;
+      }
+    }
+
+    currentPath.pop();
+    return false;
+  }
+
+  traverse(tree, targetId, []);
+  return path;
+};
+
+/**
+ * Checks if the target category is valid for moving.
+ * @param {Object} sourceParentInfo - Current parent information.
+ * @param {Object} targetParentInfo - Target parent information.
+ * @returns {boolean} - Returns true if moving is valid.
+ */
+export const isValidCategory = (
+  sourceParentInfo: IXBlockInfo,
+  targetParentInfo: IXBlockInfo,
+): boolean => {
+  let { category: sourceParentCategory } = sourceParentInfo;
+  let { category: targetParentCategory } = targetParentInfo;
+  const { hasChildren: sourceParentHasChildren } = sourceParentInfo;
+  const { hasChildren: targetParentHasChildren } = targetParentInfo;
+
+  if (
+    sourceParentHasChildren
+      && sourceParentCategory
+      && !(BASIC_BLOCK_TYPES as readonly string[]).includes(sourceParentCategory)
+  ) {
+    sourceParentCategory = CATEGORIES.KEYS.vertical;
+  }
+
+  if (
+    targetParentHasChildren
+      && targetParentCategory
+      && !(BASIC_BLOCK_TYPES as readonly string[]).includes(targetParentCategory)
+      && targetParentCategory !== CATEGORIES.KEYS.split_test
+  ) {
+    targetParentCategory = CATEGORIES.KEYS.vertical;
+  }
+
+  return targetParentCategory === sourceParentCategory;
+};
+
+/**
+ * Builds breadcrumbs based on visited ancestors.
+ * @param {Array} visitedAncestors - Array of ancestors.
+ * @param {Function} formatMessage - Intl formatting function.
+ * @returns {Array} - Array of breadcrumb elements.
+ */
+export const getBreadcrumbs = (
+  visitedAncestors: IAncestor[],
+  formatMessage: any,
+): string[] => {
+  if (!Array.isArray(visitedAncestors)) {
+    return [];
+  }
+
+  return visitedAncestors.map((ancestor) => {
+    if (ancestor?.category === CATEGORIES.KEYS.course) {
+      return formatMessage(messages.moveModalBreadcrumbsBaseCategory);
+    }
+
+    return ancestor?.displayName || '';
+  });
+};
diff --git a/src/course-unit/preview-changes/index.scss b/src/course-unit/preview-changes/index.scss
new file mode 100644
index 0000000000..b6749c9214
--- /dev/null
+++ b/src/course-unit/preview-changes/index.scss
@@ -0,0 +1,4 @@
+.lib-preview-xblock-changes-modal {
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
diff --git a/src/course-unit/preview-changes/index.test.tsx b/src/course-unit/preview-changes/index.test.tsx
new file mode 100644
index 0000000000..235560820f
--- /dev/null
+++ b/src/course-unit/preview-changes/index.test.tsx
@@ -0,0 +1,138 @@
+import userEvent from '@testing-library/user-event';
+import MockAdapter from 'axios-mock-adapter/types';
+import {
+  act,
+  render as baseRender,
+  screen,
+  initializeMocks,
+  waitFor,
+} from '../../testUtils';
+
+import PreviewLibraryXBlockChanges, { LibraryChangesMessageData } from '.';
+import { messageTypes } from '../constants';
+import { IframeProvider } from '../context/iFrameContext';
+import { libraryBlockChangesUrl } from '../data/api';
+import { ToastActionData } from '../../generic/toast-context';
+import { getLibraryBlockMetadataUrl } from '../../library-authoring/data/api';
+
+const usageKey = 'some-id';
+const defaultEventData: LibraryChangesMessageData = {
+  displayName: 'Test block',
+  downstreamBlockId: usageKey,
+  upstreamBlockId: 'some-lib-id',
+  upstreamBlockVersionSynced: 1,
+  isVertical: false,
+};
+
+const mockSendMessageToIframe = jest.fn();
+jest.mock('../context/hooks', () => ({
+  useIframe: () => ({
+    sendMessageToIframe: mockSendMessageToIframe,
+  }),
+}));
+const render = (eventData?: LibraryChangesMessageData) => {
+  baseRender(<PreviewLibraryXBlockChanges />, {
+    extraWrapper: ({ children }) => <IframeProvider>{ children }</IframeProvider>,
+  });
+  const message = {
+    data: {
+      type: messageTypes.showXBlockLibraryChangesPreview,
+      payload: eventData || defaultEventData,
+    },
+  };
+  // Dispatch showXBlockLibraryChangesPreview message event to open the preivew modal.
+  act(() => {
+    window.dispatchEvent(new MessageEvent('message', message));
+  });
+};
+
+let axiosMock: MockAdapter;
+let mockShowToast: (message: string, action?: ToastActionData | undefined) => void;
+
+describe('<PreviewLibraryXBlockChanges />', () => {
+  beforeEach(() => {
+    const mocks = initializeMocks();
+    axiosMock = mocks.axiosMock;
+    mockShowToast = mocks.mockShowToast;
+  });
+
+  it('renders modal', async () => {
+    render();
+
+    expect(await screen.findByText('Preview changes: Test block')).toBeInTheDocument();
+    expect(await screen.findByRole('button', { name: 'Accept changes' })).toBeInTheDocument();
+    expect(await screen.findByRole('button', { name: 'Ignore changes' })).toBeInTheDocument();
+    expect(await screen.findByRole('button', { name: 'Cancel' })).toBeInTheDocument();
+    expect(await screen.findByRole('tab', { name: 'New version' })).toBeInTheDocument();
+    expect(await screen.findByRole('tab', { name: 'Old version' })).toBeInTheDocument();
+  });
+
+  it('renders displayName for units', async () => {
+    render({ ...defaultEventData, isVertical: true, displayName: '' });
+
+    expect(await screen.findByText('Preview changes: Unit')).toBeInTheDocument();
+  });
+
+  it('renders default displayName for components with no displayName', async () => {
+    render({ ...defaultEventData, displayName: '' });
+
+    expect(await screen.findByText('Preview changes: Component')).toBeInTheDocument();
+  });
+
+  it('renders both new and old title if they are different', async () => {
+    axiosMock.onGet(getLibraryBlockMetadataUrl(defaultEventData.upstreamBlockId)).reply(200, {
+      displayName: 'New test block',
+    });
+    render();
+
+    expect(await screen.findByText('Preview changes: Test block -> New test block')).toBeInTheDocument();
+  });
+
+  it('accept changes works', async () => {
+    axiosMock.onPost(libraryBlockChangesUrl(usageKey)).reply(200, {});
+    render();
+
+    expect(await screen.findByText('Preview changes: Test block')).toBeInTheDocument();
+    const acceptBtn = await screen.findByRole('button', { name: 'Accept changes' });
+    userEvent.click(acceptBtn);
+    await waitFor(() => {
+      expect(mockSendMessageToIframe).toHaveBeenCalledWith(messageTypes.refreshXBlock, null);
+      expect(axiosMock.history.post.length).toEqual(1);
+      expect(axiosMock.history.post[0].url).toEqual(libraryBlockChangesUrl(usageKey));
+    });
+    expect(screen.queryByText('Preview changes: Test block')).not.toBeInTheDocument();
+  });
+
+  it('shows toast if accept changes fails', async () => {
+    axiosMock.onPost(libraryBlockChangesUrl(usageKey)).reply(500, {});
+    render();
+
+    expect(await screen.findByText('Preview changes: Test block')).toBeInTheDocument();
+    const acceptBtn = await screen.findByRole('button', { name: 'Accept changes' });
+    userEvent.click(acceptBtn);
+    await waitFor(() => {
+      expect(mockSendMessageToIframe).not.toHaveBeenCalledWith(messageTypes.refreshXBlock, null);
+      expect(axiosMock.history.post.length).toEqual(1);
+      expect(axiosMock.history.post[0].url).toEqual(libraryBlockChangesUrl(usageKey));
+    });
+    expect(screen.queryByText('Preview changes: Test block')).not.toBeInTheDocument();
+    expect(mockShowToast).toHaveBeenCalledWith('Failed to update component');
+  });
+
+  it('ignore changes works', async () => {
+    axiosMock.onDelete(libraryBlockChangesUrl(usageKey)).reply(200, {});
+    render();
+
+    expect(await screen.findByText('Preview changes: Test block')).toBeInTheDocument();
+    const ignoreBtn = await screen.findByRole('button', { name: 'Ignore changes' });
+    userEvent.click(ignoreBtn);
+    const ignoreConfirmBtn = await screen.findByRole('button', { name: 'Ignore' });
+    userEvent.click(ignoreConfirmBtn);
+    await waitFor(() => {
+      expect(mockSendMessageToIframe).toHaveBeenCalledWith(messageTypes.refreshXBlock, null);
+      expect(axiosMock.history.delete.length).toEqual(1);
+      expect(axiosMock.history.delete[0].url).toEqual(libraryBlockChangesUrl(usageKey));
+    });
+    expect(screen.queryByText('Preview changes: Test block')).not.toBeInTheDocument();
+  });
+});
diff --git a/src/course-unit/preview-changes/index.tsx b/src/course-unit/preview-changes/index.tsx
new file mode 100644
index 0000000000..dc39755183
--- /dev/null
+++ b/src/course-unit/preview-changes/index.tsx
@@ -0,0 +1,153 @@
+import { useCallback, useContext, useState } from 'react';
+import {
+  ActionRow, Button, ModalDialog, useToggle,
+} from '@openedx/paragon';
+import { useIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
+
+import { useEventListener } from '../../generic/hooks';
+import { messageTypes } from '../constants';
+import CompareChangesWidget from '../../library-authoring/component-comparison/CompareChangesWidget';
+import { useAcceptLibraryBlockChanges, useIgnoreLibraryBlockChanges } from '../data/apiHooks';
+import { useIframe } from '../context/hooks';
+import DeleteModal from '../../generic/delete-modal/DeleteModal';
+import messages from './messages';
+import { ToastContext } from '../../generic/toast-context';
+import LoadingButton from '../../generic/loading-button';
+import Loading from '../../generic/Loading';
+import { useLibraryBlockMetadata } from '../../library-authoring/data/apiHooks';
+
+export interface LibraryChangesMessageData {
+  displayName: string,
+  downstreamBlockId: string,
+  upstreamBlockId: string,
+  upstreamBlockVersionSynced: number,
+  isVertical: boolean,
+}
+
+const PreviewLibraryXBlockChanges = () => {
+  const { showToast } = useContext(ToastContext);
+  const intl = useIntl();
+
+  const [blockData, setBlockData] = useState<LibraryChangesMessageData | undefined>(undefined);
+
+  // Main preview library modal toggle.
+  const [isModalOpen, openModal, closeModal] = useToggle(false);
+  // ignore changes confirmation modal toggle.
+  const [isConfirmModalOpen, openConfirmModal, closeConfirmModal] = useToggle(false);
+
+  const acceptChangesMutation = useAcceptLibraryBlockChanges();
+  const ignoreChangesMutation = useIgnoreLibraryBlockChanges();
+  const { data: componentMetadata } = useLibraryBlockMetadata(blockData?.upstreamBlockId);
+
+  const { sendMessageToIframe } = useIframe();
+
+  const receiveMessage = useCallback(({ data }: { data: {
+    payload: LibraryChangesMessageData;
+    type: string;
+  } }) => {
+    const { payload, type } = data;
+
+    if (type === messageTypes.showXBlockLibraryChangesPreview) {
+      setBlockData(payload);
+      openModal();
+    }
+  }, [openModal]);
+
+  useEventListener('message', receiveMessage);
+
+  const getTitle = useCallback(() => {
+    const oldName = blockData?.displayName;
+    const newName = componentMetadata?.displayName;
+
+    if (!oldName) {
+      if (blockData?.isVertical) {
+        return intl.formatMessage(messages.defaultUnitTitle);
+      }
+      return intl.formatMessage(messages.defaultComponentTitle);
+    }
+    if (oldName === newName || !newName) {
+      return intl.formatMessage(messages.title, { blockTitle: oldName });
+    }
+    return intl.formatMessage(messages.diffTitle, { oldName, newName });
+  }, [blockData, componentMetadata]);
+
+  const getBody = useCallback(() => {
+    if (!blockData) {
+      return <Loading />;
+    }
+    return (
+      <CompareChangesWidget
+        usageKey={blockData.upstreamBlockId}
+        oldVersion={blockData.upstreamBlockVersionSynced || 'published'}
+        newVersion="published"
+      />
+    );
+  }, [blockData]);
+
+  const updateAndRefresh = useCallback(async (accept: boolean) => {
+    // istanbul ignore if: this should never happen
+    if (!blockData) {
+      return;
+    }
+
+    const mutation = accept ? acceptChangesMutation : ignoreChangesMutation;
+    const failureMsg = accept ? messages.acceptChangesFailure : messages.ignoreChangesFailure;
+
+    try {
+      await mutation.mutateAsync(blockData.downstreamBlockId);
+      sendMessageToIframe(messageTypes.refreshXBlock, null);
+    } catch (e) {
+      showToast(intl.formatMessage(failureMsg));
+    } finally {
+      closeModal();
+    }
+  }, [blockData]);
+
+  return (
+    <ModalDialog
+      isOpen={isModalOpen}
+      onClose={closeModal}
+      size="xl"
+      className="lib-preview-xblock-changes-modal"
+      hasCloseButton
+      isFullscreenOnMobile
+    >
+      <ModalDialog.Header>
+        <ModalDialog.Title>
+          {getTitle()}
+        </ModalDialog.Title>
+      </ModalDialog.Header>
+      <ModalDialog.Body>
+        {getBody()}
+      </ModalDialog.Body>
+      <ModalDialog.Footer>
+        <ActionRow>
+          <LoadingButton
+            onClick={() => updateAndRefresh(true)}
+            label={intl.formatMessage(messages.acceptChangesBtn)}
+          />
+          <Button
+            variant="tertiary"
+            onClick={openConfirmModal}
+          >
+            <FormattedMessage {...messages.ignoreChangesBtn} />
+          </Button>
+          <ModalDialog.CloseButton variant="tertiary">
+            <FormattedMessage {...messages.cancelBtn} />
+          </ModalDialog.CloseButton>
+        </ActionRow>
+      </ModalDialog.Footer>
+      <DeleteModal
+        isOpen={isConfirmModalOpen}
+        close={closeConfirmModal}
+        variant="warning"
+        title={intl.formatMessage(messages.confirmationTitle)}
+        description={intl.formatMessage(messages.confirmationDescription)}
+        onDeleteSubmit={() => updateAndRefresh(false)}
+        btnLabel={intl.formatMessage(messages.confirmationConfirmBtn)}
+      />
+    </ModalDialog>
+  );
+};
+
+export default PreviewLibraryXBlockChanges;
diff --git a/src/course-unit/preview-changes/messages.ts b/src/course-unit/preview-changes/messages.ts
new file mode 100644
index 0000000000..6b0d778c26
--- /dev/null
+++ b/src/course-unit/preview-changes/messages.ts
@@ -0,0 +1,66 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  title: {
+    id: 'authoring.course-unit.preview-changes.modal-title',
+    defaultMessage: 'Preview changes: {blockTitle}',
+    description: 'Preview changes modal title text',
+  },
+  diffTitle: {
+    id: 'authoring.course-unit.preview-changes.modal-diff-title',
+    defaultMessage: 'Preview changes: {oldName} -> {newName}',
+    description: 'Preview changes modal title text',
+  },
+  defaultUnitTitle: {
+    id: 'authoring.course-unit.preview-changes.modal-default-unit-title',
+    defaultMessage: 'Preview changes: Unit',
+    description: 'Preview changes modal default title text for units',
+  },
+  defaultComponentTitle: {
+    id: 'authoring.course-unit.preview-changes.modal-default-component-title',
+    defaultMessage: 'Preview changes: Component',
+    description: 'Preview changes modal default title text for components',
+  },
+  acceptChangesBtn: {
+    id: 'authoring.course-unit.preview-changes.accept-changes-btn',
+    defaultMessage: 'Accept changes',
+    description: 'Preview changes modal accept button text.',
+  },
+  acceptChangesFailure: {
+    id: 'authoring.course-unit.preview-changes.accept-changes-failure',
+    defaultMessage: 'Failed to update component',
+    description: 'Toast message to display when accepting changes call fails',
+  },
+  ignoreChangesBtn: {
+    id: 'authoring.course-unit.preview-changes.accept-ignore-btn',
+    defaultMessage: 'Ignore changes',
+    description: 'Preview changes modal ignore button text.',
+  },
+  ignoreChangesFailure: {
+    id: 'authoring.course-unit.preview-changes.ignore-changes-failure',
+    defaultMessage: 'Failed to ignore changes',
+    description: 'Toast message to display when ignore changes call fails',
+  },
+  cancelBtn: {
+    id: 'authoring.course-unit.preview-changes.cancel-btn',
+    defaultMessage: 'Cancel',
+    description: 'Preview changes modal cancel button text.',
+  },
+  confirmationTitle: {
+    id: 'authoring.course-unit.preview-changes.confirmation-dialog-title',
+    defaultMessage: 'Ignore these changes?',
+    description: 'Preview changes confirmation dialog title when user clicks on ignore changes.',
+  },
+  confirmationDescription: {
+    id: 'authoring.course-unit.preview-changes.confirmation-dialog-description',
+    defaultMessage: 'Would you like to permanently ignore this updated version? If so, you won\'t be able to update this until a newer version is published (in the library).',
+    description: 'Preview changes confirmation dialog description text when user clicks on ignore changes.',
+  },
+  confirmationConfirmBtn: {
+    id: 'authoring.course-unit.preview-changes.confirmation-dialog-confirm-btn',
+    defaultMessage: 'Ignore',
+    description: 'Preview changes confirmation dialog confirm button text when user clicks on ignore changes.',
+  },
+});
+
+export default messages;
diff --git a/src/course-unit/sidebar/LocationInfo.jsx b/src/course-unit/sidebar/LocationInfo.jsx
new file mode 100644
index 0000000000..1d63180883
--- /dev/null
+++ b/src/course-unit/sidebar/LocationInfo.jsx
@@ -0,0 +1,38 @@
+import { useSelector } from 'react-redux';
+import useCourseUnitData from './hooks';
+import { getCourseUnitData } from '../data/selectors';
+import { SidebarBody, SidebarFooter, SidebarHeader } from './components';
+
+const LocationInfo = () => {
+  const {
+    title,
+    locationId,
+    releaseLabel,
+    visibilityState,
+    visibleToStaffOnly,
+  } = useCourseUnitData(useSelector(getCourseUnitData));
+
+  return (
+    <>
+      <SidebarHeader
+        title={title}
+        visibilityState={visibilityState}
+        displayUnitLocation
+      />
+      <SidebarBody
+        locationId={locationId}
+        releaseLabel={releaseLabel}
+        displayUnitLocation
+      />
+      <SidebarFooter
+        locationId={locationId}
+        visibleToStaffOnly={visibleToStaffOnly}
+        displayUnitLocation
+      />
+    </>
+  );
+};
+
+LocationInfo.propTypes = {};
+
+export default LocationInfo;
diff --git a/src/course-unit/sidebar/PublishControls.jsx b/src/course-unit/sidebar/PublishControls.jsx
new file mode 100644
index 0000000000..424594f35b
--- /dev/null
+++ b/src/course-unit/sidebar/PublishControls.jsx
@@ -0,0 +1,92 @@
+import PropTypes from 'prop-types';
+import { useDispatch, useSelector } from 'react-redux';
+import { useToggle } from '@openedx/paragon';
+import { InfoOutline as InfoOutlineIcon } from '@openedx/paragon/icons';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import useCourseUnitData from './hooks';
+import { editCourseUnitVisibilityAndData } from '../data/thunk';
+import { SidebarBody, SidebarFooter, SidebarHeader } from './components';
+import { PUBLISH_TYPES } from '../constants';
+import { getCourseUnitData } from '../data/selectors';
+import messages from './messages';
+import ModalNotification from '../../generic/modal-notification';
+
+const PublishControls = ({ blockId }) => {
+  const {
+    title,
+    locationId,
+    releaseLabel,
+    visibilityState,
+    visibleToStaffOnly,
+  } = useCourseUnitData(useSelector(getCourseUnitData));
+  const intl = useIntl();
+
+  const [isDiscardModalOpen, openDiscardModal, closeDiscardModal] = useToggle(false);
+  const [isVisibleModalOpen, openVisibleModal, closeVisibleModal] = useToggle(false);
+
+  const dispatch = useDispatch();
+
+  const handleCourseUnitVisibility = () => {
+    closeVisibleModal();
+    dispatch(editCourseUnitVisibilityAndData(blockId, PUBLISH_TYPES.republish, null));
+  };
+
+  const handleCourseUnitDiscardChanges = () => {
+    closeDiscardModal();
+    dispatch(editCourseUnitVisibilityAndData(blockId, PUBLISH_TYPES.discardChanges));
+  };
+
+  const handleCourseUnitPublish = () => {
+    dispatch(editCourseUnitVisibilityAndData(blockId, PUBLISH_TYPES.makePublic));
+  };
+
+  return (
+    <>
+      <SidebarHeader
+        title={title}
+        visibilityState={visibilityState}
+      />
+      <SidebarBody
+        releaseLabel={releaseLabel}
+        visibleToStaffOnly={visibleToStaffOnly}
+      />
+      <SidebarFooter
+        locationId={locationId}
+        openDiscardModal={openDiscardModal}
+        openVisibleModal={openVisibleModal}
+        handlePublishing={handleCourseUnitPublish}
+        visibleToStaffOnly={visibleToStaffOnly}
+      />
+      <ModalNotification
+        title={intl.formatMessage(messages.modalDiscardUnitChangesTitle)}
+        isOpen={isDiscardModalOpen}
+        actionButtonText={intl.formatMessage(messages.modalDiscardUnitChangesActionButtonText)}
+        cancelButtonText={intl.formatMessage(messages.modalDiscardUnitChangesCancelButtonText)}
+        handleAction={handleCourseUnitDiscardChanges}
+        handleCancel={closeDiscardModal}
+        message={intl.formatMessage(messages.modalDiscardUnitChangesDescription)}
+        icon={InfoOutlineIcon}
+      />
+      <ModalNotification
+        title={intl.formatMessage(messages.modalMakeVisibilityTitle)}
+        isOpen={isVisibleModalOpen}
+        actionButtonText={intl.formatMessage(messages.modalMakeVisibilityActionButtonText)}
+        cancelButtonText={intl.formatMessage(messages.modalMakeVisibilityCancelButtonText)}
+        handleAction={handleCourseUnitVisibility}
+        handleCancel={closeVisibleModal}
+        message={intl.formatMessage(messages.modalMakeVisibilityDescription)}
+        icon={InfoOutlineIcon}
+      />
+    </>
+  );
+};
+
+PublishControls.propTypes = {
+  blockId: PropTypes.string,
+};
+
+PublishControls.defaultProps = {
+  blockId: null,
+};
+
+export default PublishControls;
diff --git a/src/course-unit/sidebar/Sidebar.scss b/src/course-unit/sidebar/Sidebar.scss
new file mode 100644
index 0000000000..f60bfe0879
--- /dev/null
+++ b/src/course-unit/sidebar/Sidebar.scss
@@ -0,0 +1,84 @@
+%base-font-params {
+  font-size: $font-size-sm;
+  line-height: $line-height-base;
+}
+
+.course-unit-sidebar {
+  .course-unit-sidebar-header {
+    padding: $spacer $spacer map-get($spacers, 3\.5);
+
+    .course-unit-sidebar-header-icon {
+      margin-right: map-get($spacers, 1);
+    }
+
+    .course-unit-sidebar-header-title {
+      font-size: $font-size-base;
+      line-height: $line-height-base;
+    }
+  }
+
+  .course-unit-sidebar-footer {
+    padding: 0 $spacer $spacer;
+
+    .course-unit-sidebar-visibility {
+      .course-unit-sidebar-visibility-title {
+        font-weight: $font-weight-normal;
+        color: $gray-700;
+
+        @extend %base-font-params;
+      }
+
+      .course-unit-sidebar-visibility-section {
+        @extend %base-font-params;
+      }
+
+      .course-unit-sidebar-location-description {
+        font-size: $font-size-xs;
+        line-height: $line-height-base;
+        word-break: break-word;
+      }
+
+      .course-unit-sidebar-visibility-copy {
+        font-weight: $font-weight-bold;
+        color: $gray-700;
+
+        @extend %base-font-params;
+      }
+
+      .course-unit-sidebar-visibility-checkbox .pgn__form-label {
+        font-size: $font-size-sm;
+        line-height: $headings-line-height;
+      }
+    }
+
+    .course-unit-sidebar-footer__divider {
+      margin: map-get($spacers, 3\.5) map-get($spacers, 0) map-get($spacers, 3\.5);
+    }
+
+    .course-unit-sidebar-footer__discard-changes__btn + .course-unit-sidebar-footer__divider {
+      margin: map-get($spacers, 2) map-get($spacers, 0) map-get($spacers, 3\.5);
+    }
+  }
+
+  .course-unit-sidebar-date {
+    padding: 0 $spacer $spacer;
+
+    @extend %base-font-params;
+
+    .course-unit-sidebar-date-stage {
+      font-weight: $font-weight-normal;
+
+      @extend %base-font-params;
+    }
+
+    .course-unit-sidebar-date-timestamp {
+      color: $gray-700;
+
+      @extend %base-font-params;
+    }
+
+    &.is-stuff-only .course-unit-sidebar-date-and-with {
+      text-decoration: line-through;
+    }
+  }
+}
diff --git a/src/course-unit/sidebar/components/ReleaseInfoComponent.jsx b/src/course-unit/sidebar/components/ReleaseInfoComponent.jsx
new file mode 100644
index 0000000000..9861fa2094
--- /dev/null
+++ b/src/course-unit/sidebar/components/ReleaseInfoComponent.jsx
@@ -0,0 +1,29 @@
+import { useSelector } from 'react-redux';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import { getCourseUnitData } from '../../data/selectors';
+import { getReleaseInfo } from '../utils';
+
+const ReleaseInfoComponent = () => {
+  const intl = useIntl();
+  const {
+    releaseDate,
+    releaseDateFrom,
+  } = useSelector(getCourseUnitData);
+  const releaseInfo = getReleaseInfo(intl, releaseDate, releaseDateFrom);
+
+  if (releaseInfo.isScheduled) {
+    return (
+      <span className="course-unit-sidebar-date-and-with">
+        <h6 className="course-unit-sidebar-date-timestamp m-0 d-inline">
+          {releaseInfo.releaseDate}&nbsp;
+        </h6>
+        {releaseInfo.sectionNameMessage}
+      </span>
+    );
+  }
+
+  return releaseInfo.message;
+};
+
+export default ReleaseInfoComponent;
diff --git a/src/course-unit/sidebar/components/SidebarBody.jsx b/src/course-unit/sidebar/components/SidebarBody.jsx
new file mode 100644
index 0000000000..b7dce23a23
--- /dev/null
+++ b/src/course-unit/sidebar/components/SidebarBody.jsx
@@ -0,0 +1,76 @@
+import PropTypes from 'prop-types';
+import { useSelector } from 'react-redux';
+import { Card, Stack } from '@openedx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import classNames from 'classnames';
+import { getCourseUnitData } from '../../data/selectors';
+import { getPublishInfo } from '../utils';
+import messages from '../messages';
+import ReleaseInfoComponent from './ReleaseInfoComponent';
+
+const SidebarBody = ({
+  releaseLabel,
+  displayUnitLocation,
+  locationId,
+  visibleToStaffOnly,
+}) => {
+  const intl = useIntl();
+  const {
+    editedOn,
+    editedBy,
+    hasChanges,
+    publishedBy,
+    publishedOn,
+  } = useSelector(getCourseUnitData);
+
+  return (
+    <Card.Body className={classNames('course-unit-sidebar-date', {
+      'is-stuff-only': visibleToStaffOnly,
+    })}
+    >
+      <Stack>
+        {displayUnitLocation ? (
+          <span>
+            <h5 className="course-unit-sidebar-date-stage m-0">
+              {intl.formatMessage(messages.unitLocationTitle)}
+            </h5>
+            <p className="m-0 font-weight-bold">
+              {locationId}
+            </p>
+          </span>
+        ) : (
+          <>
+            <span>
+              {getPublishInfo(intl, hasChanges, editedBy, editedOn, publishedBy, publishedOn)}
+            </span>
+            <span className="mt-3.5">
+              <h5 className="course-unit-sidebar-date-stage m-0">
+                {releaseLabel}
+              </h5>
+              <ReleaseInfoComponent />
+            </span>
+            <p className="mt-3.5 mb-0">
+              {intl.formatMessage(messages.sidebarBodyNote)}
+            </p>
+          </>
+        )}
+      </Stack>
+    </Card.Body>
+  );
+};
+
+SidebarBody.propTypes = {
+  releaseLabel: PropTypes.string.isRequired,
+  displayUnitLocation: PropTypes.bool,
+  locationId: PropTypes.string,
+  visibleToStaffOnly: PropTypes.bool,
+};
+
+SidebarBody.defaultProps = {
+  displayUnitLocation: false,
+  locationId: null,
+  visibleToStaffOnly: false,
+};
+
+export default SidebarBody;
diff --git a/src/course-unit/sidebar/components/SidebarHeader.jsx b/src/course-unit/sidebar/components/SidebarHeader.jsx
new file mode 100644
index 0000000000..b6b6feda03
--- /dev/null
+++ b/src/course-unit/sidebar/components/SidebarHeader.jsx
@@ -0,0 +1,41 @@
+import PropTypes from 'prop-types';
+import { useSelector } from 'react-redux';
+import { Icon, Stack } from '@openedx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import { getCourseUnitData } from '../../data/selectors';
+import { getIconVariant } from '../utils';
+import messages from '../messages';
+
+const SidebarHeader = ({ title, visibilityState, displayUnitLocation }) => {
+  const intl = useIntl();
+  const { hasChanges, published } = useSelector(getCourseUnitData);
+  const { iconSrc, colorVariant } = getIconVariant(visibilityState, published, hasChanges);
+
+  return (
+    <Stack className="course-unit-sidebar-header" direction="horizontal">
+      {!displayUnitLocation && (
+        <Icon
+          className="course-unit-sidebar-header-icon"
+          svgAttrs={{ color: colorVariant }}
+          src={iconSrc}
+        />
+      )}
+      <h3 className="course-unit-sidebar-header-title m-0">
+        {displayUnitLocation ? intl.formatMessage(messages.sidebarHeaderUnitLocationTitle) : title}
+      </h3>
+    </Stack>
+  );
+};
+
+SidebarHeader.propTypes = {
+  title: PropTypes.string.isRequired,
+  visibilityState: PropTypes.string.isRequired,
+  displayUnitLocation: PropTypes.bool,
+};
+
+SidebarHeader.defaultProps = {
+  displayUnitLocation: false,
+};
+
+export default SidebarHeader;
diff --git a/src/course-unit/sidebar/components/index.js b/src/course-unit/sidebar/components/index.js
new file mode 100644
index 0000000000..6637529e61
--- /dev/null
+++ b/src/course-unit/sidebar/components/index.js
@@ -0,0 +1,3 @@
+export { default as SidebarHeader } from './SidebarHeader';
+export { default as SidebarBody } from './SidebarBody';
+export { default as SidebarFooter } from './sidebar-footer';
diff --git a/src/course-unit/sidebar/components/sidebar-footer/ActionButtons.jsx b/src/course-unit/sidebar/components/sidebar-footer/ActionButtons.jsx
new file mode 100644
index 0000000000..5f78ae7617
--- /dev/null
+++ b/src/course-unit/sidebar/components/sidebar-footer/ActionButtons.jsx
@@ -0,0 +1,60 @@
+import PropTypes from 'prop-types';
+import { useDispatch, useSelector } from 'react-redux';
+import { Button } from '@openedx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import { Divider } from '../../../../generic/divider';
+import { getCanEdit, getCourseUnitData } from '../../../data/selectors';
+import { copyToClipboard } from '../../../../generic/data/thunks';
+import messages from '../../messages';
+
+const ActionButtons = ({ openDiscardModal, handlePublishing }) => {
+  const dispatch = useDispatch();
+  const intl = useIntl();
+  const {
+    id,
+    published,
+    hasChanges,
+    enableCopyPasteUnits,
+  } = useSelector(getCourseUnitData);
+  const canEdit = useSelector(getCanEdit);
+
+  return (
+    <>
+      {(!published || hasChanges) && (
+        <Button size="sm" className="mt-3.5" variant="outline-primary" onClick={handlePublishing}>
+          {intl.formatMessage(messages.actionButtonPublishTitle)}
+        </Button>
+      )}
+      {(published && hasChanges) && (
+        <Button
+          size="sm"
+          variant="link"
+          onClick={openDiscardModal}
+          className="course-unit-sidebar-footer__discard-changes__btn mt-2"
+        >
+          {intl.formatMessage(messages.actionButtonDiscardChangesTitle)}
+        </Button>
+      )}
+      {enableCopyPasteUnits && canEdit && (
+        <>
+          <Divider className="course-unit-sidebar-footer__divider" />
+          <Button
+            onClick={() => dispatch(copyToClipboard(id))}
+            variant="outline-primary"
+            size="sm"
+          >
+            {intl.formatMessage(messages.actionButtonCopyUnitTitle)}
+          </Button>
+        </>
+      )}
+    </>
+  );
+};
+
+ActionButtons.propTypes = {
+  openDiscardModal: PropTypes.func.isRequired,
+  handlePublishing: PropTypes.func.isRequired,
+};
+
+export default ActionButtons;
diff --git a/src/course-unit/sidebar/components/sidebar-footer/ActionButtons.test.jsx b/src/course-unit/sidebar/components/sidebar-footer/ActionButtons.test.jsx
new file mode 100644
index 0000000000..2289968c18
--- /dev/null
+++ b/src/course-unit/sidebar/components/sidebar-footer/ActionButtons.test.jsx
@@ -0,0 +1,80 @@
+import { render } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { AppProvider } from '@edx/frontend-platform/react';
+import { initializeMockApp } from '@edx/frontend-platform';
+import MockAdapter from 'axios-mock-adapter';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import userEvent from '@testing-library/user-event';
+
+import initializeStore from '../../../../store';
+import { executeThunk } from '../../../../utils';
+import { clipboardUnit } from '../../../../__mocks__';
+import { getCourseUnitApiUrl } from '../../../data/api';
+import { getClipboardUrl } from '../../../../generic/data/api';
+import { fetchCourseUnitQuery } from '../../../data/thunk';
+import { copyToClipboard } from '../../../../generic/data/thunks';
+import { courseUnitIndexMock } from '../../../__mocks__';
+import messages from '../../messages';
+import ActionButtons from './ActionButtons';
+
+jest.mock('../../../../generic/data/thunks', () => ({
+  ...jest.requireActual('../../../../generic/data/thunks'),
+  copyToClipboard: jest.fn().mockImplementation(() => () => {}),
+}));
+
+let store;
+let axiosMock;
+const courseId = '123';
+
+const renderComponent = (props = {}) => render(
+  <AppProvider store={store}>
+    <IntlProvider locale="en">
+      <ActionButtons {...props} />
+    </IntlProvider>
+  </AppProvider>,
+);
+
+describe('<ActionButtons />', () => {
+  beforeEach(async () => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+
+    store = initializeStore();
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+    axiosMock
+      .onGet(getCourseUnitApiUrl(courseId))
+      .reply(200, { ...courseUnitIndexMock, enable_copy_paste_units: true });
+    axiosMock
+      .onPost(getClipboardUrl())
+      .reply(200, clipboardUnit);
+    axiosMock
+      .onGet(getClipboardUrl())
+      .reply(200, clipboardUnit);
+
+    await executeThunk(fetchCourseUnitQuery(courseId), store.dispatch);
+  });
+
+  it('render ActionButtons component with Copy to clipboard', () => {
+    const { getByRole } = renderComponent();
+
+    const copyXBlockBtn = getByRole('button', { name: messages.actionButtonCopyUnitTitle.defaultMessage });
+    expect(copyXBlockBtn).toBeInTheDocument();
+  });
+
+  it('click on the Copy to clipboard button updates clipboardData', async () => {
+    const { getByRole } = renderComponent();
+
+    const copyXBlockBtn = getByRole('button', { name: messages.actionButtonCopyUnitTitle.defaultMessage });
+
+    userEvent.click(copyXBlockBtn);
+
+    expect(copyToClipboard).toHaveBeenCalledWith(courseUnitIndexMock.id);
+    jest.resetAllMocks();
+  });
+});
diff --git a/src/course-unit/sidebar/components/sidebar-footer/UnitVisibilityInfo.jsx b/src/course-unit/sidebar/components/sidebar-footer/UnitVisibilityInfo.jsx
new file mode 100644
index 0000000000..b4dc35b568
--- /dev/null
+++ b/src/course-unit/sidebar/components/sidebar-footer/UnitVisibilityInfo.jsx
@@ -0,0 +1,67 @@
+import PropTypes from 'prop-types';
+import { useDispatch, useSelector } from 'react-redux';
+import { Form } from '@openedx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { useParams } from 'react-router-dom';
+
+import { getCourseUnitData } from '../../../data/selectors';
+import { editCourseUnitVisibilityAndData } from '../../../data/thunk';
+import { PUBLISH_TYPES } from '../../../constants';
+import { getVisibilityTitle } from '../../utils';
+import messages from '../../messages';
+
+const UnitVisibilityInfo = ({ openVisibleModal, visibleToStaffOnly }) => {
+  const intl = useIntl();
+  const { blockId } = useParams();
+  const dispatch = useDispatch();
+  const {
+    published,
+    hasChanges,
+    staffLockFrom,
+    releasedToStudents,
+    hasExplicitStaffLock,
+  } = useSelector(getCourseUnitData);
+
+  const handleCourseUnitVisibility = () => {
+    dispatch(editCourseUnitVisibilityAndData(blockId, PUBLISH_TYPES.republish, true));
+  };
+
+  return (
+    <>
+      <small className="course-unit-sidebar-visibility-title">
+        {getVisibilityTitle(intl, releasedToStudents, published, hasChanges)}
+      </small>
+      {visibleToStaffOnly ? (
+        <>
+          <h6 className="course-unit-sidebar-visibility-copy">
+            {intl.formatMessage(messages.visibilityStaffOnlyTitle)}
+          </h6>
+          {!hasExplicitStaffLock && (
+            <span className="course-unit-sidebar-visibility-section mb-2">
+              {intl.formatMessage(messages.visibilityHasExplicitStaffLockText, { sectionName: staffLockFrom })}
+            </span>
+          )}
+        </>
+      ) : (
+        <h6 className="course-unit-sidebar-visibility-copy">
+          {intl.formatMessage(messages.visibilityStaffAndLearnersTitle)}
+        </h6>
+      )}
+      <Form.Checkbox
+        className="course-unit-sidebar-visibility-checkbox"
+        checked={hasExplicitStaffLock}
+        onChange={hasExplicitStaffLock ? null : handleCourseUnitVisibility}
+        onClick={hasExplicitStaffLock ? openVisibleModal : null}
+      >
+        {intl.formatMessage(messages.visibilityCheckboxTitle)}
+      </Form.Checkbox>
+    </>
+  );
+};
+
+UnitVisibilityInfo.propTypes = {
+  openVisibleModal: PropTypes.func.isRequired,
+  visibleToStaffOnly: PropTypes.bool.isRequired,
+};
+
+export default UnitVisibilityInfo;
diff --git a/src/course-unit/sidebar/components/sidebar-footer/index.jsx b/src/course-unit/sidebar/components/sidebar-footer/index.jsx
new file mode 100644
index 0000000000..ee1e816bad
--- /dev/null
+++ b/src/course-unit/sidebar/components/sidebar-footer/index.jsx
@@ -0,0 +1,57 @@
+import PropTypes from 'prop-types';
+import { Card, Stack } from '@openedx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import messages from '../../messages';
+import UnitVisibilityInfo from './UnitVisibilityInfo';
+import ActionButtons from './ActionButtons';
+
+const SidebarFooter = ({
+  locationId,
+  openVisibleModal,
+  handlePublishing,
+  openDiscardModal,
+  visibleToStaffOnly,
+  displayUnitLocation,
+}) => {
+  const intl = useIntl();
+
+  return (
+    <Card.Footer className="course-unit-sidebar-footer" orientation="horizontal">
+      <Stack className="course-unit-sidebar-visibility">
+        {displayUnitLocation ? (
+          <small className="course-unit-sidebar-location-description">
+            {intl.formatMessage(messages.unitLocationDescription, { id: locationId })}
+          </small>
+        ) : (
+          <>
+            <UnitVisibilityInfo
+              openVisibleModal={openVisibleModal}
+              visibleToStaffOnly={visibleToStaffOnly}
+            />
+            <ActionButtons
+              openDiscardModal={openDiscardModal}
+              handlePublishing={handlePublishing}
+            />
+          </>
+        )}
+      </Stack>
+    </Card.Footer>
+  );
+};
+
+SidebarFooter.propTypes = {
+  locationId: PropTypes.string,
+  displayUnitLocation: PropTypes.bool,
+  openDiscardModal: PropTypes.func.isRequired,
+  openVisibleModal: PropTypes.func.isRequired,
+  handlePublishing: PropTypes.func.isRequired,
+  visibleToStaffOnly: PropTypes.bool.isRequired,
+};
+
+SidebarFooter.defaultProps = {
+  displayUnitLocation: false,
+  locationId: null,
+};
+
+export default SidebarFooter;
diff --git a/src/course-unit/sidebar/hooks.jsx b/src/course-unit/sidebar/hooks.jsx
new file mode 100644
index 0000000000..bbe6c073fc
--- /dev/null
+++ b/src/course-unit/sidebar/hooks.jsx
@@ -0,0 +1,43 @@
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import { getUnitReleaseStatus, UNIT_VISIBILITY_STATES } from '../constants';
+import messages from './messages';
+import { extractCourseUnitId } from './utils';
+
+const useCourseUnitData = ({
+  hasChanges, published, visibilityState, id,
+}) => {
+  const intl = useIntl();
+  const releaseStatus = getUnitReleaseStatus(intl);
+  const locationId = extractCourseUnitId(id);
+  const visibleToStaffOnly = visibilityState === UNIT_VISIBILITY_STATES.staffOnly;
+  const titleMessages = {
+    [UNIT_VISIBILITY_STATES.staffOnly]: messages.sidebarTitleVisibleToStaffOnly,
+    [UNIT_VISIBILITY_STATES.live]: messages.sidebarTitlePublishedAndLive,
+    // eslint-disable-next-line no-nested-ternary
+    default: published
+      ? (hasChanges ? messages.sidebarTitleDraftUnpublishedChanges
+        : messages.sidebarTitlePublishedNotYetReleased)
+      : messages.sidebarTitleDraftNeverPublished,
+  };
+
+  const releaseLabels = {
+    [UNIT_VISIBILITY_STATES.staffOnly]: releaseStatus.release,
+    [UNIT_VISIBILITY_STATES.live]: releaseStatus.released,
+    [UNIT_VISIBILITY_STATES.ready]: releaseStatus.scheduled,
+    default: releaseStatus.release,
+  };
+
+  const title = intl.formatMessage(titleMessages[visibilityState] || titleMessages.default);
+  const releaseLabel = releaseLabels[visibilityState] || releaseLabels.default;
+
+  return {
+    title,
+    locationId,
+    releaseLabel,
+    visibilityState,
+    visibleToStaffOnly,
+  };
+};
+
+export default useCourseUnitData;
diff --git a/src/course-unit/sidebar/index.jsx b/src/course-unit/sidebar/index.jsx
new file mode 100644
index 0000000000..a7697c8abd
--- /dev/null
+++ b/src/course-unit/sidebar/index.jsx
@@ -0,0 +1,24 @@
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { Card } from '@openedx/paragon';
+
+const Sidebar = ({ className, children, ...props }) => (
+  <Card
+    className={classNames('course-unit-sidebar', className)}
+    {...props}
+  >
+    {children}
+  </Card>
+);
+
+Sidebar.propTypes = {
+  className: PropTypes.string,
+  children: PropTypes.node,
+};
+
+Sidebar.defaultProps = {
+  className: null,
+  children: null,
+};
+
+export default Sidebar;
diff --git a/src/course-unit/sidebar/messages.js b/src/course-unit/sidebar/messages.js
new file mode 100644
index 0000000000..7d9d161d5c
--- /dev/null
+++ b/src/course-unit/sidebar/messages.js
@@ -0,0 +1,142 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  sidebarTitleDraftNeverPublished: {
+    id: 'course-authoring.course-unit.sidebar.title.draft.never-published',
+    defaultMessage: 'Draft (never published)',
+  },
+  sidebarTitleVisibleToStaffOnly: {
+    id: 'course-authoring.course-unit.sidebar.title.visible.to-staff-only',
+    defaultMessage: 'Visible to staff only',
+  },
+  sidebarTitlePublishedAndLive: {
+    id: 'course-authoring.course-unit.sidebar.title.published.live',
+    defaultMessage: 'Published and live',
+  },
+  sidebarTitleDraftUnpublishedChanges: {
+    id: 'course-authoring.course-unit.sidebar.title.draft.unpublished',
+    defaultMessage: 'Draft (unpublished changes)',
+  },
+  sidebarTitlePublishedNotYetReleased: {
+    id: 'course-authoring.course-unit.sidebar.title.published.not-yet-released',
+    defaultMessage: 'Published (not yet released)',
+  },
+  sidebarHeaderUnitLocationTitle: {
+    id: 'course-authoring.course-unit.sidebar.header.unit-location.title',
+    defaultMessage: 'Unit location',
+  },
+  sidebarBodyNote: {
+    id: 'course-authoring.course-unit.sidebar.body.note',
+    defaultMessage: 'Note: Do not hide graded assignments after they have been released.',
+  },
+  publishInfoPreviouslyPublished: {
+    id: 'course-authoring.course-unit.publish.info.previously-published',
+    defaultMessage: 'Previously published',
+  },
+  publishInfoDraftSaved: {
+    id: 'course-authoring.course-unit.publish.info.draft.saved',
+    defaultMessage: 'Draft saved on {editedOn} by {editedBy}',
+  },
+  publishLastPublished: {
+    id: 'course-authoring.course-unit.publish.info.last.published',
+    defaultMessage: 'Last published {publishedOn} by {publishedBy}',
+  },
+  releaseInfoUnscheduled: {
+    id: 'course-authoring.course-unit.release.info.unscheduled',
+    defaultMessage: 'Unscheduled',
+  },
+  releaseInfoWithSection: {
+    id: 'course-authoring.course-unit.release.info.with-unit',
+    defaultMessage: 'with {sectionName}',
+  },
+  visibilityIsVisibleToTitle: {
+    id: 'course-authoring.course-unit.visibility.is-visible-to.title',
+    defaultMessage: 'IS VISIBLE TO',
+  },
+  visibilityWillBeVisibleToTitle: {
+    id: 'course-authoring.course-unit.visibility.will-be-visible-to.title',
+    defaultMessage: 'WILL BE VISIBLE TO',
+  },
+  unitLocationTitle: {
+    id: 'course-authoring.course-unit.unit-location.title',
+    defaultMessage: 'LOCATION ID',
+  },
+  unitLocationDescription: {
+    id: 'course-authoring.course-unit.unit-location.description',
+    defaultMessage: 'To create a link to this unit from an HTML component in this course, enter /jump_to_id/{id} as the URL value',
+  },
+  visibilityCheckboxTitle: {
+    id: 'course-authoring.course-unit.visibility.checkbox.title',
+    defaultMessage: 'Hide from learners',
+  },
+  visibilityStaffOnlyTitle: {
+    id: 'course-authoring.course-unit.visibility.staff-only.title',
+    defaultMessage: 'Staff only',
+  },
+  visibilityStaffAndLearnersTitle: {
+    id: 'course-authoring.course-unit.visibility.staff-and-learners.title',
+    defaultMessage: 'Staff and learners',
+  },
+  visibilityHasExplicitStaffLockText: {
+    id: 'course-authoring.course-unit.visibility.has-explicit-staff-lock.text',
+    defaultMessage: 'with {sectionName}',
+  },
+  actionButtonPublishTitle: {
+    id: 'course-authoring.course-unit.action-buttons.publish.title',
+    defaultMessage: 'Publish',
+  },
+  actionButtonDiscardChangesTitle: {
+    id: 'course-authoring.course-unit.action-button.discard-changes.title',
+    defaultMessage: 'Discard changes',
+  },
+  actionButtonCopyUnitTitle: {
+    id: 'course-authoring.course-unit.action-button.copy-unit.title',
+    defaultMessage: 'Copy unit',
+  },
+  releaseStatusTitle: {
+    id: 'course-authoring.course-unit.status.release.title',
+    defaultMessage: 'RELEASE',
+  },
+  releasedStatusTitle: {
+    id: 'course-authoring.course-unit.status.released.title',
+    defaultMessage: 'RELEASED',
+  },
+  scheduledStatusTitle: {
+    id: 'course-authoring.course-unit.status.scheduled.title',
+    defaultMessage: 'SCHEDULED',
+  },
+  modalDiscardUnitChangesTitle: {
+    id: 'course-authoring.course-unit.modal.discard-unit-changes.title',
+    defaultMessage: 'Discard changes',
+  },
+  modalDiscardUnitChangesActionButtonText: {
+    id: 'course-authoring.course-unit.modal.discard-unit-changes.btn.action.text',
+    defaultMessage: 'Discard changes',
+  },
+  modalDiscardUnitChangesCancelButtonText: {
+    id: 'course-authoring.course-unit.modal.discard-unit-changes.btn.cancel.text',
+    defaultMessage: 'Cancel',
+  },
+  modalDiscardUnitChangesDescription: {
+    id: 'course-authoring.course-unit.modal.discard-unit-changes.description',
+    defaultMessage: 'Are you sure you want to revert to the last published version of the unit? You cannot undo this action.',
+  },
+  modalMakeVisibilityTitle: {
+    id: 'course-authoring.course-unit.modal.make-visibility.title',
+    defaultMessage: 'Make visible to students',
+  },
+  modalMakeVisibilityActionButtonText: {
+    id: 'course-authoring.course-unit.modal.make-visibility.btn.action.text',
+    defaultMessage: 'Make visible to students',
+  },
+  modalMakeVisibilityCancelButtonText: {
+    id: 'course-authoring.course-unit.modal.make-visibility.btn.cancel.text',
+    defaultMessage: 'Cancel',
+  },
+  modalMakeVisibilityDescription: {
+    id: 'course-authoring.course-unit.modal.make-visibility.description',
+    defaultMessage: 'If the unit was previously published and released to students, any changes you made to the unit when it was hidden will now be visible to students. Do you want to proceed?',
+  },
+});
+
+export default messages;
diff --git a/src/course-unit/sidebar/utils.js b/src/course-unit/sidebar/utils.js
new file mode 100644
index 0000000000..af3263861f
--- /dev/null
+++ b/src/course-unit/sidebar/utils.js
@@ -0,0 +1,102 @@
+import {
+  CheckCircle as CheckCircleIcon,
+  CheckCircleOutline as CheckCircleOutlineIcon,
+  InfoOutline as InfoOutlineIcon,
+} from '@openedx/paragon/icons';
+
+import { ICON_COLOR_VARIANTS, UNIT_VISIBILITY_STATES } from '../constants';
+import messages from './messages';
+
+/**
+ * Get information about the publishing status.
+ * @param {Object} intl - The internationalization object.
+ * @param {boolean} hasChanges - Indicates if there are unpublished changes.
+ * @param {string} editedBy - The user who edited the content.
+ * @param {string} editedOn - The timestamp when the content was edited.
+ * @param {string} publishedBy - The user who last published the content.
+ * @param {string} publishedOn - The timestamp when the content was last published.
+ * @returns {string} Publish information based on the provided parameters.
+ */
+export const getPublishInfo = (intl, hasChanges, editedBy, editedOn, publishedBy, publishedOn) => {
+  let publishInfoText;
+  if (hasChanges && editedOn && editedBy) {
+    publishInfoText = intl.formatMessage(messages.publishInfoDraftSaved, { editedOn, editedBy });
+  } else if (publishedOn && publishedBy) {
+    publishInfoText = intl.formatMessage(messages.publishLastPublished, { publishedOn, publishedBy });
+  } else {
+    publishInfoText = intl.formatMessage(messages.publishInfoPreviouslyPublished);
+  }
+
+  return publishInfoText;
+};
+
+/**
+ * Get information about the release status.
+ * @param {Object} intl - The internationalization object.
+ * @param {string} releaseDate - The release date of the content.
+ * @param {string} releaseDateFrom - The section name associated with the release date.
+ * @returns {string|ReactElement} Release information based on the provided parameters.
+ */
+export const getReleaseInfo = (intl, releaseDate, releaseDateFrom) => {
+  if (releaseDate) {
+    return {
+      isScheduled: true,
+      releaseDate,
+      releaseDateFrom,
+      sectionNameMessage: intl.formatMessage(messages.releaseInfoWithSection, { sectionName: releaseDateFrom }),
+    };
+  }
+  return {
+    isScheduled: false,
+    message: intl.formatMessage(messages.releaseInfoUnscheduled),
+  };
+};
+
+/**
+ * Get the visibility title.
+ * @param {Object} intl - The internationalization object.
+ * @param {boolean} releasedToStudents - Indicates if the content is released to students.
+ * @param {boolean} published - Indicates if the content is published.
+ * @param {boolean} hasChanges - Indicates if there are unpublished changes.
+ * @returns {string} The visibility title determined by the provided parameters.
+ */
+export const getVisibilityTitle = (intl, releasedToStudents, published, hasChanges) => {
+  if (releasedToStudents && published && !hasChanges) {
+    return intl.formatMessage(messages.visibilityIsVisibleToTitle);
+  }
+
+  return intl.formatMessage(messages.visibilityWillBeVisibleToTitle);
+};
+
+/**
+ * Get the icon variant based on the provided visibility state and publication status.
+ * @param {string} visibilityState - The visibility state of the content.
+ * @param {boolean} published - Indicates if the content is published.
+ * @param {boolean} hasChanges - Indicates if there are unpublished changes.
+ * @returns {Object} An object containing the icon component and color variant.
+ *   - iconSrc: The source component for the icon.
+ *   - colorVariant: The color variant for the icon.
+ */
+export const getIconVariant = (visibilityState, published, hasChanges) => {
+  const iconVariants = {
+    [UNIT_VISIBILITY_STATES.staffOnly]: { iconSrc: InfoOutlineIcon, colorVariant: ICON_COLOR_VARIANTS.BLACK },
+    [UNIT_VISIBILITY_STATES.live]: { iconSrc: CheckCircleIcon, colorVariant: ICON_COLOR_VARIANTS.GREEN },
+    publishedNoChanges: { iconSrc: CheckCircleOutlineIcon, colorVariant: ICON_COLOR_VARIANTS.BLACK },
+    publishedWithChanges: { iconSrc: InfoOutlineIcon, colorVariant: ICON_COLOR_VARIANTS.BLACK },
+    default: { iconSrc: InfoOutlineIcon, colorVariant: ICON_COLOR_VARIANTS.BLACK },
+  };
+  if (visibilityState in iconVariants) {
+    return iconVariants[visibilityState];
+  }
+  if (published) {
+    return hasChanges ? iconVariants.publishedWithChanges : iconVariants.publishedNoChanges;
+  }
+  return iconVariants.default;
+};
+
+/**
+ * Extracts the clear course unit ID from the given course unit data.
+ * @param {string} id - The course unit ID.
+ * @returns {string} The clear course unit ID extracted from the provided data.
+ */
+export const extractCourseUnitId = (id) => id.match(/block@(.+)$/)[1];
diff --git a/src/course-unit/xblock-container-iframe/hooks.tsx b/src/course-unit/xblock-container-iframe/hooks.tsx
new file mode 100644
index 0000000000..1a81e7852a
--- /dev/null
+++ b/src/course-unit/xblock-container-iframe/hooks.tsx
@@ -0,0 +1,139 @@
+import {
+  useState, useLayoutEffect, useCallback, useEffect,
+} from 'react';
+import { logError } from '@edx/frontend-platform/logging';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { useKeyedState } from '@edx/react-unit-test-utils';
+
+import { useEventListener } from '../../generic/hooks';
+import { stateKeys, messageTypes } from '../constants';
+
+interface UseIFrameBehaviorParams {
+  id: string;
+  iframeUrl: string;
+  onLoaded?: boolean;
+}
+
+interface UseIFrameBehaviorReturn {
+  iframeHeight: number;
+  handleIFrameLoad: () => void;
+  showError: boolean;
+  hasLoaded: boolean;
+}
+
+/**
+ * We discovered an error in Firefox where - upon iframe load - React would cease to call any
+ * useEffect hooks until the user interacts with the page again.  This is particularly confusing
+ * when navigating between sequences, as the UI partially updates leaving the user in a nebulous
+ * state.
+ *
+ * We were able to solve this error by using a layout effect to update some component state, which
+ * executes synchronously on render.  Somehow this forces React to continue it's lifecycle
+ * immediately, rather than waiting for user interaction.  This layout effect could be anywhere in
+ * the parent tree, as far as we can tell - we chose to add a conspicuously 'load bearing' (that's
+ * a joke) one here so it wouldn't be accidentally removed elsewhere.
+ *
+ * If we remove this hook when one of these happens:
+ * 1. React figures out that there's an issue here and fixes a bug.
+ * 2. We cease to use an iframe for unit rendering.
+ * 3. Firefox figures out that there's an issue in their iframe loading and fixes a bug.
+ * 4. We stop supporting Firefox.
+ * 5. An enterprising engineer decides to create a repo that reproduces the problem, submits it to
+ *    Firefox/React for review, and they kindly help us figure out what in the world is happening
+ *    so  we can fix it.
+ *
+ * This hook depends on the unit id just to make sure it re-evaluates whenever the ID changes.  If
+ * we change whether or not the Unit component is re-mounted when the unit ID changes, this may
+ * become important, as this hook will otherwise only evaluate the useLayoutEffect once.
+ */
+export const useLoadBearingHook = (id: string): void => {
+  const setValue = useState(0)[1];
+  useLayoutEffect(() => {
+    setValue(currentValue => currentValue + 1);
+  }, [id]);
+};
+
+/**
+ * Custom hook to manage iframe behavior.
+ *
+ * @param {Object} params - The parameters for the hook.
+ * @param {string} params.id - The unique identifier for the iframe.
+ * @param {string} params.iframeUrl - The URL of the iframe.
+ * @param {boolean} [params.onLoaded=true] - Flag to indicate if the iframe has loaded.
+ * @returns {Object} The state and handlers for the iframe.
+ * @returns {number} return.iframeHeight - The height of the iframe.
+ * @returns {Function} return.handleIFrameLoad - The handler for iframe load event.
+ * @returns {boolean} return.showError - Flag to indicate if there was an error loading the iframe.
+ * @returns {boolean} return.hasLoaded - Flag to indicate if the iframe has loaded.
+ */
+export const useIFrameBehavior = ({
+  id,
+  iframeUrl,
+  onLoaded = true,
+}: UseIFrameBehaviorParams): UseIFrameBehaviorReturn => {
+  // Do not remove this hook.  See function description.
+  useLoadBearingHook(id);
+
+  const [iframeHeight, setIframeHeight] = useKeyedState<number>(stateKeys.iframeHeight, 0);
+  const [hasLoaded, setHasLoaded] = useKeyedState<boolean>(stateKeys.hasLoaded, false);
+  const [showError, setShowError] = useKeyedState<boolean>(stateKeys.showError, false);
+  const [windowTopOffset, setWindowTopOffset] = useKeyedState<number | null>(stateKeys.windowTopOffset, null);
+
+  const receiveMessage = useCallback(({ data }: MessageEvent) => {
+    const { payload, type } = data;
+
+    if (type === messageTypes.resize) {
+      setIframeHeight(payload.height);
+
+      if (!hasLoaded && iframeHeight === 0 && payload.height > 0) {
+        setHasLoaded(true);
+      }
+    } else if (type === messageTypes.videoFullScreen) {
+      // We observe exit from the video xblock fullscreen mode
+      // and scroll to the previously saved scroll position
+      if (!payload.open && windowTopOffset !== null) {
+        window.scrollTo(0, Number(windowTopOffset));
+      }
+
+      // We listen for this message from LMS to know when we need to
+      // save or reset scroll position on toggle video xblock fullscreen mode
+      setWindowTopOffset(payload.open ? window.scrollY : null);
+    } else if (data.offset) {
+      // We listen for this message from LMS to know when the page needs to
+      // be scrolled to another location on the page.
+      window.scrollTo(0, data.offset + document.getElementById('unit-iframe')!.offsetTop);
+    }
+  }, [
+    id,
+    onLoaded,
+    hasLoaded,
+    setHasLoaded,
+    iframeHeight,
+    setIframeHeight,
+    windowTopOffset,
+    setWindowTopOffset,
+  ]);
+
+  useEventListener('message', receiveMessage);
+
+  const handleIFrameLoad = () => {
+    if (!hasLoaded) {
+      setShowError(true);
+      logError('Unit iframe failed to load. Server possibly returned 4xx or 5xx response.', {
+        iframeUrl,
+      });
+    }
+  };
+
+  useEffect(() => {
+    setIframeHeight(0);
+    setHasLoaded(false);
+  }, [iframeUrl]);
+
+  return {
+    iframeHeight,
+    handleIFrameLoad,
+    showError,
+    hasLoaded,
+  };
+};
diff --git a/src/course-unit/xblock-container-iframe/index.tsx b/src/course-unit/xblock-container-iframe/index.tsx
new file mode 100644
index 0000000000..761d637750
--- /dev/null
+++ b/src/course-unit/xblock-container-iframe/index.tsx
@@ -0,0 +1,57 @@
+import { useRef, useEffect, FC } from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { getConfig } from '@edx/frontend-platform';
+
+import { IFRAME_FEATURE_POLICY } from '../constants';
+import { useIframe } from '../context/hooks';
+import { useIFrameBehavior } from './hooks';
+import messages from './messages';
+
+/**
+ * This offset is necessary to fully display the dropdown actions of the XBlock
+ * in case the XBlock does not have content inside.
+ */
+const IFRAME_BOTTOM_OFFSET = 220;
+
+interface XBlockContainerIframeProps {
+  blockId: string;
+}
+
+const XBlockContainerIframe: FC<XBlockContainerIframeProps> = ({ blockId }) => {
+  const intl = useIntl();
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  const { setIframeRef } = useIframe();
+
+  const iframeUrl = `${getConfig().STUDIO_BASE_URL}/container_embed/${blockId}`;
+
+  const { iframeHeight } = useIFrameBehavior({
+    id: blockId,
+    iframeUrl,
+  });
+
+  useEffect(() => {
+    setIframeRef(iframeRef);
+  }, [setIframeRef]);
+
+  return (
+    <iframe
+      ref={iframeRef}
+      title={intl.formatMessage(messages.xblockIframeTitle)}
+      src={iframeUrl}
+      frameBorder="0"
+      allow={IFRAME_FEATURE_POLICY}
+      allowFullScreen
+      loading="lazy"
+      style={{ width: '100%', height: iframeHeight + IFRAME_BOTTOM_OFFSET }}
+      scrolling="no"
+      referrerPolicy="origin"
+    />
+  );
+};
+
+XBlockContainerIframe.propTypes = {
+  blockId: PropTypes.string.isRequired,
+};
+
+export default XBlockContainerIframe;
diff --git a/src/course-unit/xblock-container-iframe/messages.ts b/src/course-unit/xblock-container-iframe/messages.ts
new file mode 100644
index 0000000000..9ec46b07d5
--- /dev/null
+++ b/src/course-unit/xblock-container-iframe/messages.ts
@@ -0,0 +1,11 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  xblockIframeTitle: {
+    id: 'course-authoring.course-unit.xblock.iframe.title',
+    defaultMessage: 'Course unit iframe',
+    description: 'Title for the xblock iframe',
+  },
+});
+
+export default messages;
diff --git a/src/course-unit/xblock-container-iframe/tests/XblockContainerIframe.test.tsx b/src/course-unit/xblock-container-iframe/tests/XblockContainerIframe.test.tsx
new file mode 100644
index 0000000000..b3bee233b8
--- /dev/null
+++ b/src/course-unit/xblock-container-iframe/tests/XblockContainerIframe.test.tsx
@@ -0,0 +1,47 @@
+import { render } from '@testing-library/react';
+import { getConfig } from '@edx/frontend-platform';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import { IFRAME_FEATURE_POLICY } from '../../constants';
+import { useIFrameBehavior } from '../hooks';
+import XBlockContainerIframe from '..';
+import { IframeProvider } from '../../context/iFrameContext';
+
+jest.mock('@edx/frontend-platform', () => ({
+  getConfig: jest.fn(),
+}));
+
+jest.mock('../hooks', () => ({
+  useIFrameBehavior: jest.fn(),
+}));
+
+describe('<XBlockContainerIframe />', () => {
+  const blockId = 'test-block-id';
+  const iframeUrl = `http://example.com/container_embed/${blockId}`;
+  const iframeHeight = '500px';
+
+  beforeEach(() => {
+    (getConfig as jest.Mock).mockReturnValue({ STUDIO_BASE_URL: 'http://example.com' });
+    (useIFrameBehavior as jest.Mock).mockReturnValue({ iframeHeight });
+  });
+
+  it('renders correctly with the given blockId', () => {
+    const { getByTitle } = render(
+      <IntlProvider locale="en">
+        <IframeProvider>
+          <XBlockContainerIframe blockId={blockId} />
+        </IframeProvider>
+      </IntlProvider>,
+    );
+    const iframe = getByTitle('Course unit iframe');
+
+    expect(iframe).toBeInTheDocument();
+    expect(iframe).toHaveAttribute('src', iframeUrl);
+    expect(iframe).toHaveAttribute('frameBorder', '0');
+    expect(iframe).toHaveAttribute('allow', IFRAME_FEATURE_POLICY);
+    expect(iframe).toHaveAttribute('allowFullScreen');
+    expect(iframe).toHaveAttribute('loading', 'lazy');
+    expect(iframe).toHaveAttribute('scrolling', 'no');
+    expect(iframe).toHaveAttribute('referrerPolicy', 'origin');
+  });
+});
diff --git a/src/course-unit/xblock-container-iframe/tests/hooks.test.tsx b/src/course-unit/xblock-container-iframe/tests/hooks.test.tsx
new file mode 100644
index 0000000000..13b5467622
--- /dev/null
+++ b/src/course-unit/xblock-container-iframe/tests/hooks.test.tsx
@@ -0,0 +1,173 @@
+import React from 'react';
+import { renderHook, act } from '@testing-library/react-hooks';
+import { useKeyedState } from '@edx/react-unit-test-utils';
+import { logError } from '@edx/frontend-platform/logging';
+
+import { stateKeys, messageTypes } from '../../constants';
+import { useIFrameBehavior, useLoadBearingHook } from '../hooks';
+
+jest.mock('@edx/react-unit-test-utils', () => ({
+  useKeyedState: jest.fn(),
+}));
+
+jest.mock('@edx/frontend-platform/logging', () => ({
+  logError: jest.fn(),
+}));
+
+describe('useIFrameBehavior', () => {
+  const id = 'test-id';
+  const iframeUrl = 'http://example.com';
+  const setIframeHeight = jest.fn();
+  const setHasLoaded = jest.fn();
+  const setShowError = jest.fn();
+  const setWindowTopOffset = jest.fn();
+
+  beforeEach(() => {
+    (useKeyedState as jest.Mock).mockImplementation((key, initialValue) => {
+      switch (key) {
+        case stateKeys.iframeHeight:
+          return [0, setIframeHeight];
+        case stateKeys.hasLoaded:
+          return [false, setHasLoaded];
+        case stateKeys.showError:
+          return [false, setShowError];
+        case stateKeys.windowTopOffset:
+          return [null, setWindowTopOffset];
+        default:
+          return [initialValue, jest.fn()];
+      }
+    });
+
+    window.scrollTo = jest.fn((x: number | ScrollToOptions, y?: number): void => {
+      const scrollY = typeof x === 'number' ? y : (x as ScrollToOptions).top || 0;
+      Object.defineProperty(window, 'scrollY', { value: scrollY, writable: true });
+    }) as typeof window.scrollTo;
+  });
+
+  it('initializes state correctly', () => {
+    const { result } = renderHook(() => useIFrameBehavior({ id, iframeUrl }));
+
+    expect(result.current.iframeHeight).toBe(0);
+    expect(result.current.showError).toBe(false);
+    expect(result.current.hasLoaded).toBe(false);
+  });
+
+  it('scrolls to previous position on video fullscreen exit', () => {
+    const mockWindowTopOffset = 100;
+
+    (useKeyedState as jest.Mock).mockImplementation((key) => {
+      if (key === stateKeys.windowTopOffset) {
+        return [mockWindowTopOffset, setWindowTopOffset];
+      }
+      return [null, jest.fn()];
+    });
+
+    renderHook(() => useIFrameBehavior({ id, iframeUrl }));
+
+    const message = {
+      data: {
+        type: messageTypes.videoFullScreen,
+        payload: { open: false },
+      },
+    };
+
+    act(() => {
+      window.dispatchEvent(new MessageEvent('message', message));
+    });
+
+    expect(window.scrollTo).toHaveBeenCalledWith(0, mockWindowTopOffset);
+  });
+
+  it('handles resize message correctly', () => {
+    renderHook(() => useIFrameBehavior({ id, iframeUrl }));
+
+    const message = {
+      data: {
+        type: messageTypes.resize,
+        payload: { height: 500 },
+      },
+    };
+
+    act(() => {
+      window.dispatchEvent(new MessageEvent('message', message));
+    });
+
+    expect(setIframeHeight).toHaveBeenCalledWith(500);
+    expect(setHasLoaded).toHaveBeenCalledWith(true);
+  });
+
+  it('handles videoFullScreen message correctly', () => {
+    renderHook(() => useIFrameBehavior({ id, iframeUrl }));
+
+    const message = {
+      data: {
+        type: messageTypes.videoFullScreen,
+        payload: { open: true },
+      },
+    };
+
+    act(() => {
+      window.dispatchEvent(new MessageEvent('message', message));
+    });
+
+    expect(setWindowTopOffset).toHaveBeenCalledWith(window.scrollY);
+  });
+
+  it('handles offset message correctly', () => {
+    document.body.innerHTML = '<div id="unit-iframe" style="position: absolute; top: 50px;"></div>';
+    renderHook(() => useIFrameBehavior({ id, iframeUrl }));
+
+    const message = {
+      data: { offset: 100 },
+    };
+
+    act(() => {
+      window.dispatchEvent(new MessageEvent('message', message));
+    });
+
+    expect(window.scrollY).toBe(100 + (document.getElementById('unit-iframe') as HTMLElement).offsetTop);
+  });
+
+  it('handles iframe load error correctly', () => {
+    const { result } = renderHook(() => useIFrameBehavior({ id, iframeUrl }));
+
+    act(() => {
+      result.current.handleIFrameLoad();
+    });
+
+    expect(setShowError).toHaveBeenCalledWith(true);
+    expect(logError).toHaveBeenCalledWith('Unit iframe failed to load. Server possibly returned 4xx or 5xx response.', {
+      iframeUrl,
+    });
+  });
+
+  it('resets state when iframeUrl changes', () => {
+    // eslint-disable-next-line @typescript-eslint/no-shadow
+    const { rerender } = renderHook(({ id, iframeUrl }) => useIFrameBehavior({ id, iframeUrl }), {
+      initialProps: { id, iframeUrl },
+    });
+
+    rerender({ id, iframeUrl: 'http://new-url.com' });
+
+    expect(setIframeHeight).toHaveBeenCalledWith(0);
+    expect(setHasLoaded).toHaveBeenCalledWith(false);
+  });
+});
+
+describe('useLoadBearingHook', () => {
+  it('updates state when id changes', () => {
+    const setValue = jest.fn();
+    jest.spyOn(React, 'useState').mockReturnValue([0, setValue]);
+
+    const { rerender } = renderHook(({ id }) => useLoadBearingHook(id), {
+      initialProps: { id: 'initial-id' },
+    });
+
+    setValue.mockClear();
+
+    rerender({ id: 'new-id' });
+
+    expect(setValue).toHaveBeenCalledWith(expect.any(Function));
+    expect(setValue.mock.calls);
+  });
+});
diff --git a/src/course-updates/CourseUpdates.jsx b/src/course-updates/CourseUpdates.jsx
new file mode 100644
index 0000000000..0d82f3bf8d
--- /dev/null
+++ b/src/course-updates/CourseUpdates.jsx
@@ -0,0 +1,258 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Helmet } from 'react-helmet';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import {
+  ActionRow,
+  Button,
+  Container,
+  Layout,
+} from '@openedx/paragon';
+import { Add as AddIcon, ErrorOutline as ErrorIcon } from '@openedx/paragon/icons';
+import { useSelector } from 'react-redux';
+
+import { useModel } from '../generic/model-store';
+import { getProcessingNotification } from '../generic/processing-notification/data/selectors';
+import ProcessingNotification from '../generic/processing-notification';
+import SubHeader from '../generic/sub-header/SubHeader';
+import InternetConnectionAlert from '../generic/internet-connection-alert';
+import ConnectionErrorAlert from '../generic/ConnectionErrorAlert';
+import { RequestStatus } from '../data/constants';
+import CourseHandouts from './course-handouts/CourseHandouts';
+import CourseUpdate from './course-update/CourseUpdate';
+import DeleteModal from './delete-modal/DeleteModal';
+import UpdateForm from './update-form/UpdateForm';
+import { REQUEST_TYPES } from './constants';
+import messages from './messages';
+import { useCourseUpdates } from './hooks';
+import {
+  getErrors,
+  getLoadingStatuses,
+  getSavingStatuses,
+} from './data/selectors';
+import { matchesAnyStatus } from './utils';
+import getPageHeadTitle from '../generic/utils';
+import AlertMessage from '../generic/alert-message';
+
+const CourseUpdates = ({ courseId }) => {
+  const intl = useIntl();
+  const courseDetails = useModel('courseDetails', courseId);
+
+  const {
+    requestType,
+    courseUpdates,
+    courseHandouts,
+    courseUpdatesInitialValues,
+    isMainFormOpen,
+    isInnerFormOpen,
+    isUpdateFormOpen,
+    isDeleteModalOpen,
+    closeUpdateForm,
+    closeDeleteModal,
+    handleUpdatesSubmit,
+    handleOpenUpdateForm,
+    handleOpenDeleteForm,
+    handleDeleteUpdateSubmit,
+  } = useCourseUpdates({ courseId });
+
+  const {
+    isShow: isShowProcessingNotification,
+    title: processingNotificationTitle,
+  } = useSelector(getProcessingNotification);
+
+  const loadingStatuses = useSelector(getLoadingStatuses);
+  const savingStatuses = useSelector(getSavingStatuses);
+  const errors = useSelector(getErrors);
+
+  const anyStatusFailed = matchesAnyStatus({ ...loadingStatuses, ...savingStatuses }, RequestStatus.FAILED);
+  const anyStatusDenied = matchesAnyStatus({ ...loadingStatuses, ...savingStatuses }, RequestStatus.DENIED);
+  const anyStatusInProgress = matchesAnyStatus({ ...loadingStatuses, ...savingStatuses }, RequestStatus.IN_PROGRESS);
+  const anyStatusPending = matchesAnyStatus({ ...loadingStatuses, ...savingStatuses }, RequestStatus.PENDING);
+
+  if (anyStatusDenied) {
+    return (
+      <Container size="xl" className="course-unit px-4 mt-4">
+        <ConnectionErrorAlert />
+      </Container>
+    );
+  }
+
+  return (
+    <>
+      <Helmet>
+        <title>
+          {getPageHeadTitle(courseDetails?.name, intl.formatMessage(messages.headingTitle))}
+        </title>
+      </Helmet>
+      <Container size="xl" className="px-4 pt-4">
+        <section className="setting-items mb-4">
+          {errors.loadingUpdates && (
+            <AlertMessage
+              title={intl.formatMessage(messages.loadingUpdatesErrorTitle)}
+              description={intl.formatMessage(messages.loadingUpdatesErrorDescription, { courseId })}
+              variant="danger"
+              icon={ErrorIcon}
+            />
+          )}
+          {errors.loadingHandouts && (
+            <AlertMessage
+              title={intl.formatMessage(messages.loadingHandoutsErrorTitle)}
+              description={intl.formatMessage(messages.loadingHandoutsErrorDescription, { courseId })}
+              variant="danger"
+              icon={ErrorIcon}
+            />
+          )}
+          {errors.creatingUpdate && (
+            <AlertMessage
+              title={intl.formatMessage(messages.savingUpdatesErrorTitle)}
+              description={intl.formatMessage(messages.savingNewUpdateErrorAlertDescription)}
+              variant="danger"
+              icon={ErrorIcon}
+            />
+          )}
+          {errors.savingUpdates && (
+            <AlertMessage
+              title={intl.formatMessage(messages.savingUpdatesErrorTitle)}
+              description={intl.formatMessage(messages.savingUpdatesErrorDescription)}
+              variant="danger"
+              icon={ErrorIcon}
+            />
+          )}
+          {errors.deletingUpdates && (
+            <AlertMessage
+              title={intl.formatMessage(messages.deletingUpdatesErrorTitle)}
+              description={intl.formatMessage(messages.deletingUpdatesErrorDescription)}
+              variant="danger"
+              icon={ErrorIcon}
+            />
+          )}
+          {errors.savingHandouts && (
+            <AlertMessage
+              title={intl.formatMessage(messages.savingHandoutsErrorTitle)}
+              description={intl.formatMessage(messages.savingHandoutsErrorDescription)}
+              variant="danger"
+              icon={ErrorIcon}
+            />
+          )}
+          <Layout
+            lg={[{ span: 12 }]}
+            md={[{ span: 12 }]}
+            sm={[{ span: 12 }]}
+            xs={[{ span: 12 }]}
+            xl={[{ span: 12 }]}
+          >
+            <Layout.Element className="mt-3">
+              <article>
+                <div>
+                  <SubHeader
+                    title={intl.formatMessage(messages.headingTitle)}
+                    subtitle={intl.formatMessage(messages.headingSubtitle)}
+                    instruction={intl.formatMessage(messages.sectionInfo)}
+                    headerActions={(
+                      <Button
+                        variant="primary"
+                        iconBefore={AddIcon}
+                        size="sm"
+                        onClick={() => handleOpenUpdateForm(REQUEST_TYPES.add_new_update)}
+                        disabled={isUpdateFormOpen || errors.loadingUpdates}
+                      >
+                        {intl.formatMessage(messages.newUpdateButton)}
+                      </Button>
+                    )}
+                  />
+                  <section className="updates-section">
+                    {isMainFormOpen && (
+                      <UpdateForm
+                        isOpen={isUpdateFormOpen}
+                        close={closeUpdateForm}
+                        requestType={requestType}
+                        onSubmit={handleUpdatesSubmit}
+                        courseUpdatesInitialValues={courseUpdatesInitialValues}
+                      />
+                    )}
+                    <div className="updates-container">
+                      {courseUpdates.length > 0 && (
+                        <div className="p-4.5">
+                          {courseUpdates.map((courseUpdate, index) => (
+                            isInnerFormOpen(courseUpdate.id) ? (
+                              <UpdateForm
+                                isOpen={isUpdateFormOpen}
+                                close={closeUpdateForm}
+                                requestType={requestType}
+                                isInnerForm
+                                isFirstUpdate={index === 0}
+                                onSubmit={handleUpdatesSubmit}
+                                courseUpdatesInitialValues={courseUpdatesInitialValues}
+                              />
+                            ) : (
+                              <CourseUpdate
+                                dateForUpdate={courseUpdate.date}
+                                contentForUpdate={courseUpdate.content}
+                                onEdit={() => handleOpenUpdateForm(REQUEST_TYPES.edit_update, courseUpdate)}
+                                onDelete={() => handleOpenDeleteForm(courseUpdate)}
+                                isDisabledButtons={isUpdateFormOpen}
+                              />
+                            )
+                          ))}
+                        </div>
+                      )}
+                      {!courseUpdates.length && (
+                        <ActionRow>
+                          <ActionRow.Spacer />
+                          <span className="small mr-2">
+                            {intl.formatMessage(messages.noCourseUpdates)}
+                          </span>
+                          <Button
+                            variant="primary"
+                            iconBefore={AddIcon}
+                            size="sm"
+                            onClick={() => handleOpenUpdateForm(REQUEST_TYPES.add_new_update)}
+                            disabled={isUpdateFormOpen || errors.loadingUpdates}
+                          >
+                            {intl.formatMessage(messages.firstUpdateButton)}
+                          </Button>
+                          <ActionRow.Spacer />
+                        </ActionRow>
+                      )}
+                      <div className="updates-handouts-container">
+                        <CourseHandouts
+                          contentForHandouts={courseHandouts?.data || ''}
+                          onEdit={() => handleOpenUpdateForm(REQUEST_TYPES.edit_handouts)}
+                          isDisabledButtons={isUpdateFormOpen || errors.loadingHandouts}
+                        />
+                      </div>
+                      <DeleteModal
+                        isOpen={isDeleteModalOpen}
+                        close={closeDeleteModal}
+                        onDeleteSubmit={handleDeleteUpdateSubmit}
+                      />
+                      {isShowProcessingNotification && (
+                        <ProcessingNotification
+                          isShow={isShowProcessingNotification}
+                          title={processingNotificationTitle}
+                        />
+                      )}
+                    </div>
+                  </section>
+                </div>
+              </article>
+            </Layout.Element>
+          </Layout>
+        </section>
+      </Container>
+      <div className="alert-toast">
+        <InternetConnectionAlert
+          isFailed={anyStatusFailed}
+          isQueryPending={anyStatusInProgress || anyStatusPending}
+          onInternetConnectionFailed={() => null}
+        />
+      </div>
+    </>
+  );
+};
+
+CourseUpdates.propTypes = {
+  courseId: PropTypes.string.isRequired,
+};
+
+export default CourseUpdates;
diff --git a/src/course-updates/CourseUpdates.scss b/src/course-updates/CourseUpdates.scss
new file mode 100644
index 0000000000..72a9ff7ab6
--- /dev/null
+++ b/src/course-updates/CourseUpdates.scss
@@ -0,0 +1,20 @@
+@import "./course-handouts/CourseHandouts";
+@import "./course-update/CourseUpdate";
+@import "./update-form/UpdateForm";
+
+.updates-container {
+  @include pgn-box-shadow(1, "centered");
+
+  display: grid;
+  grid-template-columns: 65% 35%;
+  border: .0625rem solid $gray-200;
+  border-radius: .375rem;
+  background: $white;
+  overflow: hidden;
+}
+
+.updates-handouts-container {
+  border-left: .0625rem solid $gray-200;
+  padding: 1.875rem;
+  background: $white;
+}
diff --git a/src/course-updates/CourseUpdates.test.jsx b/src/course-updates/CourseUpdates.test.jsx
new file mode 100644
index 0000000000..ab8e1a8022
--- /dev/null
+++ b/src/course-updates/CourseUpdates.test.jsx
@@ -0,0 +1,393 @@
+import {
+  render, waitFor, fireEvent,
+} from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { AppProvider } from '@edx/frontend-platform/react';
+import { initializeMockApp } from '@edx/frontend-platform';
+import MockAdapter from 'axios-mock-adapter';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+
+import {
+  getCourseUpdatesApiUrl,
+  getCourseHandoutApiUrl,
+  updateCourseUpdatesApiUrl,
+} from './data/api';
+import {
+  createCourseUpdateQuery,
+  deleteCourseUpdateQuery,
+  editCourseHandoutsQuery,
+  editCourseUpdateQuery,
+} from './data/thunk';
+import initializeStore from '../store';
+import { executeThunk } from '../utils';
+import { RequestStatus } from '../data/constants';
+import { courseUpdatesMock, courseHandoutsMock } from './__mocks__';
+import CourseUpdates from './CourseUpdates';
+import messages from './messages';
+
+let axiosMock;
+let store;
+const mockPathname = '/foo-bar';
+const courseId = '123';
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useLocation: () => ({
+    pathname: mockPathname,
+  }),
+}));
+
+jest.mock('@tinymce/tinymce-react', () => {
+  const originalModule = jest.requireActual('@tinymce/tinymce-react');
+  return {
+    __esModule: true,
+    ...originalModule,
+    Editor: () => 'foo bar',
+  };
+});
+
+jest.mock('../editors/sharedComponents/TinyMceWidget', () => ({
+  __esModule: true, // Required to mock a default export
+  default: () => <div>Widget</div>,
+  prepareEditorRef: jest.fn(() => ({
+    refReady: true,
+    setEditorRef: jest.fn().mockName('prepareEditorRef.setEditorRef'),
+  })),
+}));
+
+const RootWrapper = () => (
+  <AppProvider store={store}>
+    <IntlProvider locale="es">
+      <CourseUpdates courseId={courseId} />
+    </IntlProvider>
+  </AppProvider>
+);
+
+describe('<CourseUpdates />', () => {
+  describe('Successful API responses', () => {
+    beforeEach(() => {
+      initializeMockApp({
+        authenticatedUser: {
+          userId: 3,
+          username: 'abc123',
+          administrator: true,
+          roles: [],
+        },
+      });
+
+      store = initializeStore();
+      axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+      axiosMock
+        .onGet(getCourseUpdatesApiUrl(courseId))
+        .reply(200, courseUpdatesMock);
+      axiosMock
+        .onGet(getCourseHandoutApiUrl(courseId))
+        .reply(200, courseHandoutsMock);
+    });
+
+    it('render CourseUpdates component correctly', async () => {
+      const {
+        getByText, getAllByTestId, getByTestId, getByRole,
+      } = render(<RootWrapper />);
+
+      await waitFor(() => {
+        expect(getByText(messages.headingTitle.defaultMessage)).toBeInTheDocument();
+        expect(getByText(messages.headingSubtitle.defaultMessage)).toBeInTheDocument();
+        expect(getByText(messages.sectionInfo.defaultMessage)).toBeInTheDocument();
+        expect(getByRole('button', { name: messages.newUpdateButton.defaultMessage })).toBeInTheDocument();
+        expect(getAllByTestId('course-update')).toHaveLength(3);
+        expect(getByTestId('course-handouts')).toBeInTheDocument();
+      });
+    });
+
+    it('should create course update', async () => {
+      const { getByText } = render(<RootWrapper />);
+
+      const data = {
+        content: '<p>Some text</p>',
+        date: 'August 29, 2023',
+      };
+
+      axiosMock
+        .onPost(getCourseUpdatesApiUrl(courseId))
+        .reply(200, data);
+
+      await executeThunk(createCourseUpdateQuery(courseId, data), store.dispatch);
+      expect(getByText('Some text')).toBeInTheDocument();
+      expect(getByText(data.date)).toBeInTheDocument();
+    });
+
+    it('should edit course update', async () => {
+      const { getByText, queryByText } = render(<RootWrapper />);
+
+      const data = {
+        id: courseUpdatesMock[0].id,
+        content: '<p>Some text</p>',
+        date: 'August 29, 2023',
+      };
+
+      axiosMock
+        .onPut(updateCourseUpdatesApiUrl(courseId, courseUpdatesMock[0].id))
+        .reply(200, data);
+
+      await executeThunk(editCourseUpdateQuery(courseId, data), store.dispatch);
+      expect(getByText('Some text')).toBeInTheDocument();
+      expect(getByText(data.date)).toBeInTheDocument();
+      expect(queryByText(courseUpdatesMock[0].date)).not.toBeInTheDocument();
+      expect(queryByText(courseUpdatesMock[0].content)).not.toBeInTheDocument();
+    });
+
+    it('should delete course update', async () => {
+      const { queryByText } = render(<RootWrapper />);
+
+      axiosMock
+        .onDelete(updateCourseUpdatesApiUrl(courseId, courseUpdatesMock[0].id))
+        .reply(200);
+
+      await executeThunk(deleteCourseUpdateQuery(courseId, courseUpdatesMock[0].id), store.dispatch);
+      expect(queryByText(courseUpdatesMock[0].date)).not.toBeInTheDocument();
+      expect(queryByText(courseUpdatesMock[0].content)).not.toBeInTheDocument();
+    });
+
+    it('should edit course handouts', async () => {
+      const { getByText, queryByText } = render(<RootWrapper />);
+
+      const data = {
+        ...courseHandoutsMock,
+        data: '<p>Some handouts 1</p>',
+      };
+
+      axiosMock
+        .onPut(getCourseHandoutApiUrl(courseId))
+        .reply(200, data);
+
+      await executeThunk(editCourseHandoutsQuery(courseId, data), store.dispatch);
+      expect(getByText('Some handouts 1')).toBeInTheDocument();
+      expect(queryByText(courseHandoutsMock.data)).not.toBeInTheDocument();
+    });
+
+    it('Add new update form is visible after clicking "New update" button', async () => {
+      const { getByText, getByRole, getAllByTestId } = render(<RootWrapper />);
+
+      await waitFor(() => {
+        const editUpdateButtons = getAllByTestId('course-update-edit-button');
+        const deleteButtons = getAllByTestId('course-update-delete-button');
+        const editHandoutsButtons = getAllByTestId('course-handouts-edit-button');
+        const newUpdateButton = getByRole('button', { name: messages.newUpdateButton.defaultMessage });
+
+        fireEvent.click(newUpdateButton);
+
+        expect(newUpdateButton).toBeDisabled();
+        editUpdateButtons.forEach((button) => expect(button).toBeDisabled());
+        editHandoutsButtons.forEach((button) => expect(button).toBeDisabled());
+        deleteButtons.forEach((button) => expect(button).toBeDisabled());
+        expect(getByText('Add new update')).toBeInTheDocument();
+      });
+    });
+
+    it('Edit handouts form is visible after clicking "Edit" button', async () => {
+      const { getByText, getByRole, getAllByTestId } = render(<RootWrapper />);
+
+      await waitFor(() => {
+        const editUpdateButtons = getAllByTestId('course-update-edit-button');
+        const deleteButtons = getAllByTestId('course-update-delete-button');
+        const editHandoutsButtons = getAllByTestId('course-handouts-edit-button');
+        const editHandoutsButton = editHandoutsButtons[0];
+
+        fireEvent.click(editHandoutsButton);
+
+        expect(editHandoutsButton).toBeDisabled();
+        expect(getByRole('button', { name: messages.newUpdateButton.defaultMessage })).toBeDisabled();
+        editUpdateButtons.forEach((button) => expect(button).toBeDisabled());
+        editHandoutsButtons.forEach((button) => expect(button).toBeDisabled());
+        deleteButtons.forEach((button) => expect(button).toBeDisabled());
+        expect(getByText('Edit handouts')).toBeInTheDocument();
+      });
+    });
+
+    it('Edit update form is visible after clicking "Edit" button', async () => {
+      const {
+        getByText, getByRole, getAllByTestId, queryByText,
+      } = render(<RootWrapper />);
+
+      await waitFor(() => {
+        const editUpdateButtons = getAllByTestId('course-update-edit-button');
+        const deleteButtons = getAllByTestId('course-update-delete-button');
+        const editHandoutsButtons = getAllByTestId('course-handouts-edit-button');
+        const editUpdateFirstButton = editUpdateButtons[0];
+
+        fireEvent.click(editUpdateFirstButton);
+        expect(getByText('Edit update')).toBeInTheDocument();
+        expect(getByRole('button', { name: messages.newUpdateButton.defaultMessage })).toBeDisabled();
+        editUpdateButtons.forEach((button) => expect(button).toBeDisabled());
+        editHandoutsButtons.forEach((button) => expect(button).toBeDisabled());
+        deleteButtons.forEach((button) => expect(button).toBeDisabled());
+        expect(queryByText(courseUpdatesMock[0].content)).not.toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('page load failure API responses', () => {
+    beforeEach(() => {
+      initializeMockApp({
+        authenticatedUser: {
+          userId: 3,
+          username: 'abc123',
+          administrator: true,
+          roles: [],
+        },
+      });
+
+      store = initializeStore();
+      axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+    });
+
+    it('Course updates fetch should show updates loading error', async () => {
+      axiosMock
+        .onGet(getCourseUpdatesApiUrl(courseId))
+        .reply(404);
+      axiosMock
+        .onGet(getCourseHandoutApiUrl(courseId))
+        .reply(200, courseHandoutsMock);
+
+      const {
+        getByText, queryByTestId, getByRole,
+      } = render(<RootWrapper />);
+
+      await waitFor(() => {
+        const newButton = getByRole('button', { name: messages.newUpdateButton.defaultMessage });
+        expect(getByText(messages.loadingUpdatesErrorTitle.defaultMessage));
+        expect(newButton).toBeDisabled();
+        expect(getByText(messages.noCourseUpdates.defaultMessage)).toBeVisible();
+        expect(queryByTestId('course-update')).toBeNull();
+      });
+    });
+
+    it('Course handouts fetch should show handouts loading error', async () => {
+      axiosMock
+        .onGet(getCourseUpdatesApiUrl(courseId))
+        .reply(200, courseUpdatesMock);
+      axiosMock
+        .onGet(getCourseHandoutApiUrl(courseId))
+        .reply(404);
+
+      const {
+        getByText, getByTestId,
+      } = render(<RootWrapper />);
+
+      await waitFor(() => {
+        expect(getByText(messages.loadingHandoutsErrorTitle.defaultMessage));
+        expect(getByTestId('course-handouts-edit-button')).toBeDisabled();
+      });
+    });
+
+    it('displays an alert and sets status to DENIED when API responds with 403', async () => {
+      axiosMock
+        .onGet(getCourseUpdatesApiUrl(courseId))
+        .reply(403, courseUpdatesMock);
+      axiosMock
+        .onGet(getCourseHandoutApiUrl(courseId))
+        .reply(403);
+
+      const { getByTestId } = render(<RootWrapper />);
+
+      await waitFor(() => {
+        expect(getByTestId('connectionErrorAlert')).toBeInTheDocument();
+        const { loadingStatuses } = store.getState().courseUpdates;
+        Object.values(loadingStatuses)
+          .some(status => expect(status).toEqual(RequestStatus.DENIED));
+      });
+    });
+  });
+
+  describe('saving failure API responses', () => {
+    beforeEach(() => {
+      initializeMockApp({
+        authenticatedUser: {
+          userId: 3,
+          username: 'abc123',
+          administrator: true,
+          roles: [],
+        },
+      });
+
+      store = initializeStore();
+      axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+      axiosMock
+        .onGet(getCourseUpdatesApiUrl(courseId))
+        .reply(200, courseUpdatesMock);
+      axiosMock
+        .onGet(getCourseHandoutApiUrl(courseId))
+        .reply(200, courseHandoutsMock);
+    });
+    it('creating new update should show saving error alert', async () => {
+      const { getByText, queryByText } = render(<RootWrapper />);
+
+      const data = {
+        content: '<p>Some text</p>',
+        date: 'August 29, 2023',
+      };
+
+      axiosMock
+        .onPost(getCourseUpdatesApiUrl(courseId), data)
+        .reply(404);
+
+      await executeThunk(createCourseUpdateQuery(courseId, data), store.dispatch);
+      expect(getByText(messages.savingNewUpdateErrorAlertDescription.defaultMessage)).toBeVisible();
+      expect(queryByText('Some text')).toBeNull();
+      expect(queryByText(data.date)).toBeNull();
+    });
+
+    it('editing course update should show saving error alert', async () => {
+      const { getByText, queryByText } = render(<RootWrapper />);
+
+      const data = {
+        id: courseUpdatesMock[0].id,
+        content: '<p>Some text</p>',
+        date: 'August 29, 2023',
+      };
+
+      axiosMock
+        .onPut(updateCourseUpdatesApiUrl(courseId, courseUpdatesMock[0].id))
+        .reply(404);
+
+      await executeThunk(editCourseUpdateQuery(courseId, data), store.dispatch);
+      expect(queryByText('Some text')).toBeNull();
+      expect(queryByText(data.date)).toBeNull();
+      expect(getByText(courseUpdatesMock[0].date)).toBeVisible();
+      expect(getByText(courseUpdatesMock[0].content)).toBeVisible();
+      expect(getByText(messages.savingUpdatesErrorDescription.defaultMessage)).toBeVisible();
+    });
+
+    it('deleting course update should show delete saving error alert', async () => {
+      const { getByText } = render(<RootWrapper />);
+
+      axiosMock
+        .onDelete(updateCourseUpdatesApiUrl(courseId, courseUpdatesMock[0].id))
+        .reply(404);
+
+      await executeThunk(deleteCourseUpdateQuery(courseId, courseUpdatesMock[0].id), store.dispatch);
+      expect(getByText(courseUpdatesMock[0].date)).toBeVisible();
+      expect(getByText(courseUpdatesMock[0].content)).toBeVisible();
+      expect(getByText(messages.deletingUpdatesErrorDescription.defaultMessage)).toBeVisible();
+    });
+
+    it('editing course handouts should show saving error alert', async () => {
+      const { getByText, queryByText } = render(<RootWrapper />);
+
+      const data = {
+        ...courseHandoutsMock,
+        data: '<p>Some handouts 1</p>',
+      };
+
+      axiosMock
+        .onPut(getCourseHandoutApiUrl(courseId))
+        .reply(404);
+
+      await executeThunk(editCourseHandoutsQuery(courseId, data), store.dispatch);
+      expect(queryByText('Some handouts 1')).toBeNull();
+      expect(getByText(courseHandoutsMock.data)).toBeVisible();
+      expect(getByText(messages.savingHandoutsErrorDescription.defaultMessage));
+    });
+  });
+});
diff --git a/src/course-updates/__mocks__/courseHandouts.js b/src/course-updates/__mocks__/courseHandouts.js
new file mode 100644
index 0000000000..55a6b25794
--- /dev/null
+++ b/src/course-updates/__mocks__/courseHandouts.js
@@ -0,0 +1,83 @@
+module.exports = {
+  id: 'block-v1:edX+DemoX+Demo_Course+type@course_info+block@handouts',
+  display_name: 'Text',
+  category: 'course_info',
+  has_children: false,
+  edited_on: 'Jul 12, 2023 at 17:52 UTC',
+  published: true,
+  published_on: 'Jul 12, 2023 at 17:52 UTC',
+  studio_url: null,
+  released_to_students: false,
+  release_date: null,
+  visibility_state: 'unscheduled',
+  has_explicit_staff_lock: false,
+  start: '2030-01-01T00:00:00Z',
+  graded: false,
+  due_date: '',
+  due: null,
+  relative_weeks_due: null,
+  format: null,
+  course_graders: [
+    'Homework',
+    'Exam',
+  ],
+  has_changes: null,
+  actions: {
+    deletable: true,
+    draggable: true,
+    childAddable: true,
+    duplicable: true,
+  },
+  explanatory_message: null,
+  group_access: {},
+  user_partitions: [
+    {
+      id: 50,
+      name: 'Enrollment Track Groups',
+      scheme: 'enrollment_track',
+      groups: [
+        {
+          id: 2,
+          name: 'Verified Certificate',
+          selected: false,
+          deleted: false,
+        },
+        {
+          id: 1,
+          name: 'Audit',
+          selected: false,
+          deleted: false,
+        },
+      ],
+    },
+  ],
+  show_correctness: 'always',
+  data: 'Some handouts',
+  metadata: {},
+  ancestor_has_staff_lock: false,
+  user_partition_info: {
+    selectable_partitions: [
+      {
+        id: 50,
+        name: 'Enrollment Track Groups',
+        scheme: 'enrollment_track',
+        groups: [
+          {
+            id: 2,
+            name: 'Verified Certificate',
+            selected: false,
+            deleted: false,
+          },
+          {
+            id: 1,
+            name: 'Audit',
+            selected: false,
+            deleted: false,
+          },
+        ],
+      },
+    ],
+    selected_partition_index: -1,
+    selected_groups_label: '',
+  },
+};
diff --git a/src/course-updates/__mocks__/courseUpdates.js b/src/course-updates/__mocks__/courseUpdates.js
new file mode 100644
index 0000000000..dca2909eb0
--- /dev/null
+++ b/src/course-updates/__mocks__/courseUpdates.js
@@ -0,0 +1,5 @@
+module.exports = [
+  { id: 1, date: 'July 11, 2023', content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.' },
+  { id: 2, date: 'August 20, 2023', content: 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.' },
+  { id: 3, date: 'January 30, 2023', content: 'But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself' },
+];
diff --git a/src/course-updates/__mocks__/index.js b/src/course-updates/__mocks__/index.js
new file mode 100644
index 0000000000..bb4cba111d
--- /dev/null
+++ b/src/course-updates/__mocks__/index.js
@@ -0,0 +1,2 @@
+export { default as courseUpdatesMock } from './courseUpdates';
+export { default as courseHandoutsMock } from './courseHandouts';
diff --git a/src/course-updates/constants.ts b/src/course-updates/constants.ts
new file mode 100644
index 0000000000..898f086b76
--- /dev/null
+++ b/src/course-updates/constants.ts
@@ -0,0 +1,6 @@
+export const REQUEST_TYPES = {
+  add_new_update: 'add_new_update',
+  edit_update: 'edit_update',
+  edit_handouts: 'edit_handouts',
+  delete_update: 'delete_update',
+};
diff --git a/src/course-updates/course-handouts/CourseHandouts.jsx b/src/course-updates/course-handouts/CourseHandouts.jsx
new file mode 100644
index 0000000000..c3303e2d56
--- /dev/null
+++ b/src/course-updates/course-handouts/CourseHandouts.jsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Icon, IconButtonWithTooltip } from '@openedx/paragon';
+import { EditOutline } from '@openedx/paragon/icons';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import messages from './messages';
+
+const CourseHandouts = ({ contentForHandouts, onEdit, isDisabledButtons }) => {
+  const intl = useIntl();
+
+  return (
+    <div className="course-handouts" data-testid="course-handouts">
+      <div className="course-handouts-header">
+        <h2 className="course-handouts-header__title lead">{intl.formatMessage(messages.handoutsTitle)}</h2>
+        <IconButtonWithTooltip
+          tooltipContent={intl.formatMessage(messages.editButton)}
+          src={EditOutline}
+          iconAs={Icon}
+          disabled={isDisabledButtons}
+          data-testid="course-handouts-edit-button"
+          onClick={onEdit}
+        />
+      </div>
+      <div
+        className="small"
+        // eslint-disable-next-line react/no-danger
+        dangerouslySetInnerHTML={{ __html: contentForHandouts || '' }}
+      />
+    </div>
+  );
+};
+
+CourseHandouts.propTypes = {
+  contentForHandouts: PropTypes.string.isRequired,
+  onEdit: PropTypes.func.isRequired,
+  isDisabledButtons: PropTypes.bool.isRequired,
+};
+
+export default CourseHandouts;
diff --git a/src/course-updates/course-handouts/CourseHandouts.scss b/src/course-updates/course-handouts/CourseHandouts.scss
new file mode 100644
index 0000000000..731ddae5d9
--- /dev/null
+++ b/src/course-updates/course-handouts/CourseHandouts.scss
@@ -0,0 +1,16 @@
+.course-handouts {
+  .course-handouts-header {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: $spacer;
+
+    .course-handouts-header__title {
+      font-weight: 300;
+      color: $gray-800;
+    }
+
+    .course-handouts-header__btn {
+      align-self: flex-start;
+    }
+  }
+}
diff --git a/src/course-updates/course-handouts/CourseHandouts.test.jsx b/src/course-updates/course-handouts/CourseHandouts.test.jsx
new file mode 100644
index 0000000000..994d7a7b9d
--- /dev/null
+++ b/src/course-updates/course-handouts/CourseHandouts.test.jsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import CourseHandouts from './CourseHandouts';
+import messages from './messages';
+
+const onEditMock = jest.fn();
+const handoutsContentMock = 'Handouts Content';
+
+const renderComponent = (props) => render(
+  <IntlProvider locale="en">
+    <CourseHandouts
+      onEdit={onEditMock}
+      contentForHandouts={handoutsContentMock}
+      isDisabledButtons={false}
+      {...props}
+    />
+  </IntlProvider>,
+);
+
+describe('<CourseHandouts />', () => {
+  it('render CourseHandouts component correctly', () => {
+    const { getByText, getByTestId } = renderComponent();
+
+    expect(getByText(messages.handoutsTitle.defaultMessage)).toBeInTheDocument();
+    expect(getByText(handoutsContentMock)).toBeInTheDocument();
+    expect(getByTestId('course-handouts-edit-button')).toBeInTheDocument();
+  });
+
+  it('calls the onEdit function when the edit button is clicked', () => {
+    const { getByTestId } = renderComponent();
+
+    const editButton = getByTestId('course-handouts-edit-button');
+    fireEvent.click(editButton);
+    expect(onEditMock).toHaveBeenCalledTimes(1);
+  });
+
+  it('"Edit" button is disabled when isDisabledButtons is true', () => {
+    const { getByTestId } = renderComponent({ isDisabledButtons: true });
+
+    const editButton = getByTestId('course-handouts-edit-button');
+    expect(editButton).toBeDisabled();
+  });
+});
diff --git a/src/course-updates/course-handouts/messages.js b/src/course-updates/course-handouts/messages.js
new file mode 100644
index 0000000000..ea412c6a42
--- /dev/null
+++ b/src/course-updates/course-handouts/messages.js
@@ -0,0 +1,14 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  handoutsTitle: {
+    id: 'course-authoring.course-updates.handouts.title',
+    defaultMessage: 'Course handouts',
+  },
+  editButton: {
+    id: 'course-authoring.course-updates.actions.edit',
+    defaultMessage: 'Edit',
+  },
+});
+
+export default messages;
diff --git a/src/course-updates/course-update/CourseUpdate.jsx b/src/course-updates/course-update/CourseUpdate.jsx
new file mode 100644
index 0000000000..f02f74f9dd
--- /dev/null
+++ b/src/course-updates/course-update/CourseUpdate.jsx
@@ -0,0 +1,68 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Icon, IconButtonWithTooltip } from '@openedx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { DeleteOutline, EditOutline, Error as ErrorIcon } from '@openedx/paragon/icons';
+
+import { isDateForUpdateValid } from './utils';
+import messages from './messages';
+
+const CourseUpdate = ({
+  dateForUpdate,
+  contentForUpdate,
+  onEdit,
+  onDelete,
+  isDisabledButtons,
+}) => {
+  const intl = useIntl();
+
+  return (
+    <div className="course-update" data-testid="course-update">
+      <div className="course-update-header">
+        <span className="course-update-header__date small font-weight-bold">{dateForUpdate}</span>
+        {!isDateForUpdateValid(dateForUpdate) && (
+          <div className="course-update-header__error">
+            <Icon src={ErrorIcon} alt={intl.formatMessage(messages.errorMessage)} />
+            <p className="message-error small m-0">{intl.formatMessage(messages.errorMessage)}</p>
+          </div>
+        )}
+        <div className="course-update-header__action">
+          <IconButtonWithTooltip
+            tooltipContent={intl.formatMessage(messages.editButton)}
+            src={EditOutline}
+            iconAs={Icon}
+            disabled={isDisabledButtons}
+            data-testid="course-update-edit-button"
+            onClick={onEdit}
+          />
+          <IconButtonWithTooltip
+            tooltipContent={intl.formatMessage(messages.deleteButton)}
+            src={DeleteOutline}
+            iconAs={Icon}
+            disabled={isDisabledButtons}
+            data-testid="course-update-delete-button"
+            onClick={onDelete}
+          />
+        </div>
+      </div>
+      {Boolean(contentForUpdate) && (
+        <div
+          className="small text-gray-800"
+          data-testid="course-update-content"
+          // eslint-disable-next-line react/no-danger
+          dangerouslySetInnerHTML={{ __html: contentForUpdate }}
+        />
+      )}
+    </div>
+  );
+};
+
+CourseUpdate.propTypes = {
+  dateForUpdate: PropTypes.string.isRequired,
+  contentForUpdate: PropTypes.string.isRequired,
+  onEdit: PropTypes.func.isRequired,
+  onDelete: PropTypes.func.isRequired,
+  isDisabledButtons: PropTypes.bool.isRequired,
+};
+
+export default CourseUpdate;
diff --git a/src/course-updates/course-update/CourseUpdate.scss b/src/course-updates/course-update/CourseUpdate.scss
new file mode 100644
index 0000000000..43f98bdfa1
--- /dev/null
+++ b/src/course-updates/course-update/CourseUpdate.scss
@@ -0,0 +1,36 @@
+.course-update {
+  &:not(:first-child) {
+    padding-top: 1.875rem;
+    margin-top: 1.875rem;
+    border-top: 1px solid $light-400;
+  }
+
+  .course-update-header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 1.125rem;
+    gap: .5rem;
+
+    .course-update-header__date {
+      line-height: 1.875rem;
+      letter-spacing: 1px;
+    }
+
+    .course-update-header__error {
+      display: flex;
+      align-items: center;
+      gap: .25rem;
+
+      svg {
+        color: $warning-300;
+      }
+    }
+
+    .course-update-header__action {
+      display: flex;
+      width: auto;
+      margin-left: auto;
+      gap: .5rem;
+    }
+  }
+}
diff --git a/src/course-updates/course-update/CourseUpdate.test.jsx b/src/course-updates/course-update/CourseUpdate.test.jsx
new file mode 100644
index 0000000000..9ce99248ba
--- /dev/null
+++ b/src/course-updates/course-update/CourseUpdate.test.jsx
@@ -0,0 +1,72 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import CourseUpdate from './CourseUpdate';
+import messages from './messages';
+
+const onEditMock = jest.fn();
+const onDeleteMock = jest.fn();
+const dateForUpdateMock = 'May 1, 2023';
+const contentForUpdateMock = 'Update Content';
+
+const renderComponent = (props) => render(
+  <IntlProvider locale="en">
+    <CourseUpdate
+      dateForUpdate={dateForUpdateMock}
+      contentForUpdate={contentForUpdateMock}
+      onEdit={onEditMock}
+      onDelete={onDeleteMock}
+      isDisabledButtons={false}
+      {...props}
+    />
+  </IntlProvider>,
+);
+
+describe('<CourseUpdate />', () => {
+  it('render CourseUpdate component correctly', () => {
+    const { getByText, getByTestId } = renderComponent();
+
+    expect(getByText(dateForUpdateMock)).toBeInTheDocument();
+    expect(getByTestId('course-update-edit-button')).toBeInTheDocument();
+    expect(getByTestId('course-update-delete-button')).toBeInTheDocument();
+  });
+
+  it('render CourseUpdate component without content correctly', () => {
+    const { getByText, queryByTestId, getByTestId } = renderComponent({ contentForUpdate: '' });
+
+    expect(getByText(dateForUpdateMock)).toBeInTheDocument();
+    expect(queryByTestId('course-update-content')).not.toBeInTheDocument();
+    expect(getByTestId('course-update-edit-button')).toBeInTheDocument();
+    expect(getByTestId('course-update-delete-button')).toBeInTheDocument();
+  });
+
+  it('render error message when dateForUpdate is inValid', () => {
+    const { getByText } = renderComponent({ dateForUpdate: 'Welcome' });
+
+    expect(getByText(messages.errorMessage.defaultMessage)).toBeInTheDocument();
+  });
+
+  it('calls the onEdit function when the "Edit" button is clicked', () => {
+    const { getByTestId } = renderComponent();
+
+    const editButton = getByTestId('course-update-edit-button');
+    fireEvent.click(editButton);
+    expect(onEditMock).toHaveBeenCalledTimes(1);
+  });
+
+  it('calls the onDelete function when the "Delete" button is clicked', () => {
+    const { getByTestId } = renderComponent();
+
+    const deleteButton = getByTestId('course-update-delete-button');
+    fireEvent.click(deleteButton);
+    expect(onDeleteMock).toHaveBeenCalledTimes(1);
+  });
+
+  it('"Edit" and "Delete" buttons is disabled when isDisabledButtons is true', () => {
+    const { getByTestId } = renderComponent({ isDisabledButtons: true });
+
+    expect(getByTestId('course-update-edit-button')).toBeDisabled();
+    expect(getByTestId('course-update-delete-button')).toBeDisabled();
+  });
+});
diff --git a/src/course-updates/course-update/messages.js b/src/course-updates/course-update/messages.js
new file mode 100644
index 0000000000..0814df91d2
--- /dev/null
+++ b/src/course-updates/course-update/messages.js
@@ -0,0 +1,18 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  editButton: {
+    id: 'course-authoring.course-updates.button.edit',
+    defaultMessage: 'Edit',
+  },
+  deleteButton: {
+    id: 'course-authoring.course-updates.button.delete',
+    defaultMessage: 'Delete',
+  },
+  errorMessage: {
+    id: 'course-authoring.course-updates.date-invalid',
+    defaultMessage: 'Action required: Enter a valid date.',
+  },
+});
+
+export default messages;
diff --git a/src/course-updates/course-update/utils.js b/src/course-updates/course-update/utils.js
new file mode 100644
index 0000000000..6c76eb70bd
--- /dev/null
+++ b/src/course-updates/course-update/utils.js
@@ -0,0 +1,16 @@
+import moment from 'moment';
+
+import { COMMA_SEPARATED_DATE_FORMAT } from '../../constants';
+
+/**
+ * Check is valid date format in course update
+ * @param {string} date - date for update
+ * @returns {boolean} - is valid date format
+ */
+const isDateForUpdateValid = (date) => {
+  const parsedDate = moment(date, COMMA_SEPARATED_DATE_FORMAT, true);
+
+  return parsedDate.isValid() && parsedDate.format(COMMA_SEPARATED_DATE_FORMAT) === date;
+};
+
+export { isDateForUpdateValid };
diff --git a/src/course-updates/data/api.js b/src/course-updates/data/api.js
new file mode 100644
index 0000000000..818ccd1ed1
--- /dev/null
+++ b/src/course-updates/data/api.js
@@ -0,0 +1,84 @@
+import { getConfig } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+
+const getApiBaseUrl = () => getConfig().STUDIO_BASE_URL;
+export const getCourseUpdatesApiUrl = (courseId) => `${getApiBaseUrl()}/course_info_update/${courseId}/`;
+export const updateCourseUpdatesApiUrl = (courseId, updateId) => `${getApiBaseUrl()}/course_info_update/${courseId}/${updateId}`;
+export const getCourseHandoutApiUrl = (courseId) => {
+  const formattedCourseId = courseId.split('course-v1:')[1];
+  return `${getApiBaseUrl()}/xblock/block-v1:${formattedCourseId}+type@course_info+block@handouts`;
+};
+
+/**
+ * Get course updates.
+ * @param {string} courseId
+ * @returns {Promise<Object>}
+ */
+export async function getCourseUpdates(courseId) {
+  const { data } = await getAuthenticatedHttpClient()
+    .get(getCourseUpdatesApiUrl(courseId));
+
+  return data;
+}
+
+/**
+ * Create new course update.
+ * @param {string} courseId
+ * @param {object} courseUpdate
+ * @returns {Promise<Object>}
+ */
+export async function createUpdate(courseId, courseUpdate) {
+  const { data } = await getAuthenticatedHttpClient()
+    .post(getCourseUpdatesApiUrl(courseId), courseUpdate);
+
+  return data;
+}
+
+/**
+ * Edit course update.
+ * @param {string} courseId
+ * @param {object} courseUpdate
+ * @returns {Promise<Object>}
+ */
+export async function editUpdate(courseId, courseUpdate) {
+  const { data } = await getAuthenticatedHttpClient()
+    .put(updateCourseUpdatesApiUrl(courseId, courseUpdate.id), courseUpdate);
+
+  return data;
+}
+
+/**
+ * Delete course update.
+ * @param {string} courseId
+ * @param {number} updateId
+1 */
+export async function deleteUpdate(courseId, updateId) {
+  const { data } = await getAuthenticatedHttpClient()
+    .delete(updateCourseUpdatesApiUrl(courseId, updateId));
+
+  return data;
+}
+
+/**
+ * Get course handouts.
+ * @param {string} courseId
+ * @returns {Promise<Object>}
+ */
+export async function getCourseHandouts(courseId) {
+  const { data } = await getAuthenticatedHttpClient()
+    .get(getCourseHandoutApiUrl(courseId));
+  return data;
+}
+
+/**
+ * Edit course handouts.
+ * @param {string} courseId
+ * @param {object} courseHandouts
+ * @returns {Promise<Object>}
+ */
+export async function editHandouts(courseId, courseHandouts) {
+  const { data } = await getAuthenticatedHttpClient()
+    .put(getCourseHandoutApiUrl(courseId), courseHandouts);
+
+  return data;
+}
diff --git a/src/course-updates/data/selectors.js b/src/course-updates/data/selectors.js
new file mode 100644
index 0000000000..b062f67481
--- /dev/null
+++ b/src/course-updates/data/selectors.js
@@ -0,0 +1,5 @@
+export const getCourseUpdates = (state) => state.courseUpdates.courseUpdates;
+export const getCourseHandouts = (state) => state.courseUpdates.courseHandouts;
+export const getSavingStatuses = (state) => state.courseUpdates.savingStatuses;
+export const getLoadingStatuses = (state) => state.courseUpdates.loadingStatuses;
+export const getErrors = (state) => state.courseUpdates.errors;
diff --git a/src/course-updates/data/slice.js b/src/course-updates/data/slice.js
new file mode 100644
index 0000000000..dbb130fcf4
--- /dev/null
+++ b/src/course-updates/data/slice.js
@@ -0,0 +1,84 @@
+/* eslint-disable no-param-reassign */
+import { createSlice } from '@reduxjs/toolkit';
+import { sortBy } from 'lodash';
+
+const initialState = {
+  courseUpdates: [],
+  courseHandouts: {},
+  savingStatuses: {
+    createCourseUpdateQuery: '',
+    editCourseUpdateQuery: '',
+    deleteCourseUpdateQuery: '',
+    editCourseHandoutsQuery: '',
+  },
+  loadingStatuses: {
+    fetchCourseUpdatesQuery: '',
+    fetchCourseHandoutsQuery: '',
+  },
+  errors: {
+    creatingUpdate: false,
+    deletingUpdates: false,
+    loadingUpdates: false,
+    loadingHandouts: false,
+    savingUpdates: false,
+    savingHandouts: false,
+  },
+};
+
+const slice = createSlice({
+  name: 'courseUpdates',
+  initialState,
+  reducers: {
+    fetchCourseUpdatesSuccess: (state, { payload }) => {
+      state.courseUpdates = payload;
+    },
+    createCourseUpdate: (state, { payload }) => {
+      state.courseUpdates = [payload, ...state.courseUpdates];
+    },
+    editCourseUpdate: (state, { payload }) => {
+      state.courseUpdates = state.courseUpdates.map((courseUpdate) => {
+        if (courseUpdate.id === payload.id) {
+          return payload;
+        }
+        return courseUpdate;
+      });
+    },
+    deleteCourseUpdate: (state, { payload }) => {
+      state.courseUpdates = sortBy(payload, 'id').reverse();
+    },
+    fetchCourseHandoutsSuccess: (state, { payload }) => {
+      state.courseHandouts = payload;
+    },
+    editCourseHandouts: (state, { payload }) => {
+      state.courseHandouts = {
+        ...state.courseHandouts,
+        ...payload,
+      };
+    },
+    updateSavingStatuses: (state, { payload }) => {
+      const { status, error } = payload;
+      state.errors = { ...initialState.errors, ...error };
+      state.savingStatuses = { ...state.savingStatuses, ...status };
+    },
+    updateLoadingStatuses: (state, { payload }) => {
+      const { status, error } = payload;
+      state.errors = { ...initialState.errors, ...error };
+      state.loadingStatuses = { ...state.loadingStatuses, ...status };
+    },
+  },
+});
+
+export const {
+  fetchCourseUpdatesSuccess,
+  createCourseUpdate,
+  editCourseUpdate,
+  deleteCourseUpdate,
+  fetchCourseHandoutsSuccess,
+  editCourseHandouts,
+  updateSavingStatuses,
+  updateLoadingStatuses,
+} = slice.actions;
+
+export const {
+  reducer,
+} = slice;
diff --git a/src/course-updates/data/thunk.js b/src/course-updates/data/thunk.js
new file mode 100644
index 0000000000..225ca9e461
--- /dev/null
+++ b/src/course-updates/data/thunk.js
@@ -0,0 +1,161 @@
+import { NOTIFICATION_MESSAGES } from '../../constants';
+import { RequestStatus } from '../../data/constants';
+import { hideProcessingNotification, showProcessingNotification } from '../../generic/processing-notification/data/slice';
+import {
+  getCourseUpdates,
+  getCourseHandouts,
+  createUpdate,
+  editUpdate,
+  deleteUpdate,
+  editHandouts,
+} from './api';
+import {
+  fetchCourseUpdatesSuccess,
+  createCourseUpdate,
+  editCourseUpdate,
+  deleteCourseUpdate,
+  fetchCourseHandoutsSuccess,
+  editCourseHandouts,
+  updateLoadingStatuses,
+  updateSavingStatuses,
+} from './slice';
+
+export function fetchCourseUpdatesQuery(courseId) {
+  return async (dispatch) => {
+    try {
+      dispatch(updateLoadingStatuses({ fetchCourseUpdatesQuery: RequestStatus.IN_PROGRESS }));
+      const courseUpdates = await getCourseUpdates(courseId);
+      dispatch(fetchCourseUpdatesSuccess(courseUpdates));
+      dispatch(updateLoadingStatuses({
+        status: { fetchCourseUpdatesQuery: RequestStatus.SUCCESSFUL },
+        error: { loadingUpdates: false },
+      }));
+    } catch (error) {
+      if (error.response && error.response.status === 403) {
+        dispatch(updateLoadingStatuses({
+          status: { fetchCourseUpdatesQuery: RequestStatus.DENIED },
+          error: { loadingUpdates: true },
+        }));
+      } else {
+        dispatch(updateLoadingStatuses({
+          status: { fetchCourseUpdatesQuery: RequestStatus.FAILED },
+          error: { loadingUpdates: true },
+        }));
+      }
+    }
+  };
+}
+
+export function createCourseUpdateQuery(courseId, data) {
+  return async (dispatch) => {
+    try {
+      dispatch(updateSavingStatuses({ createCourseUpdateQuery: RequestStatus.PENDING }));
+      dispatch(showProcessingNotification(NOTIFICATION_MESSAGES.saving));
+      const courseUpdate = await createUpdate(courseId, data);
+      dispatch(createCourseUpdate(courseUpdate));
+      dispatch(hideProcessingNotification());
+      dispatch(updateSavingStatuses({
+        status: { createCourseUpdateQuery: RequestStatus.SUCCESSFUL },
+        error: { creatingUpdate: false },
+      }));
+    } catch (error) {
+      dispatch(hideProcessingNotification());
+      dispatch(updateSavingStatuses({
+        status: { createCourseUpdateQuery: RequestStatus.FAILED },
+        error: { creatingUpdate: true },
+      }));
+    }
+  };
+}
+
+export function editCourseUpdateQuery(courseId, data) {
+  return async (dispatch) => {
+    try {
+      dispatch(updateSavingStatuses({ createCourseUpdateQuery: RequestStatus.PENDING }));
+      dispatch(showProcessingNotification(NOTIFICATION_MESSAGES.saving));
+      const courseUpdate = await editUpdate(courseId, data);
+      dispatch(editCourseUpdate(courseUpdate));
+      dispatch(hideProcessingNotification());
+      dispatch(updateSavingStatuses({
+        status: { createCourseUpdateQuery: RequestStatus.SUCCESSFUL },
+        error: { savingUpdates: false },
+      }));
+    } catch (error) {
+      dispatch(hideProcessingNotification());
+      dispatch(updateSavingStatuses({
+        status: { createCourseUpdateQuery: RequestStatus.FAILED },
+        error: { savingUpdates: true },
+      }));
+    }
+  };
+}
+
+export function deleteCourseUpdateQuery(courseId, updateId) {
+  return async (dispatch) => {
+    try {
+      dispatch(updateSavingStatuses({ createCourseUpdateQuery: RequestStatus.PENDING }));
+      dispatch(showProcessingNotification(NOTIFICATION_MESSAGES.deleting));
+      const courseUpdates = await deleteUpdate(courseId, updateId);
+      dispatch(deleteCourseUpdate(courseUpdates));
+      dispatch(hideProcessingNotification());
+      dispatch(updateSavingStatuses({
+        status: { createCourseUpdateQuery: RequestStatus.SUCCESSFUL },
+        error: { deletingUpdates: false },
+      }));
+    } catch (error) {
+      dispatch(hideProcessingNotification());
+      dispatch(updateSavingStatuses({
+        status: { createCourseUpdateQuery: RequestStatus.FAILED },
+        error: { deletingUpdates: true },
+      }));
+    }
+  };
+}
+
+export function fetchCourseHandoutsQuery(courseId) {
+  return async (dispatch) => {
+    try {
+      dispatch(updateLoadingStatuses({ fetchCourseHandoutsQuery: RequestStatus.IN_PROGRESS }));
+      const courseHandouts = await getCourseHandouts(courseId);
+      dispatch(fetchCourseHandoutsSuccess(courseHandouts));
+      dispatch(updateLoadingStatuses({
+        status: { fetchCourseHandoutsQuery: RequestStatus.SUCCESSFUL },
+        error: { loadingHandouts: false },
+      }));
+    } catch (error) {
+      if (error.response && error.response.status === 403) {
+        dispatch(updateLoadingStatuses({
+          status: { fetchCourseHandoutsQuery: RequestStatus.DENIED },
+          error: { loadingHandouts: true },
+        }));
+      } else {
+        dispatch(updateLoadingStatuses({
+          status: { fetchCourseHandoutsQuery: RequestStatus.FAILED },
+          error: { loadingHandouts: true },
+        }));
+      }
+    }
+  };
+}
+
+export function editCourseHandoutsQuery(courseId, data) {
+  return async (dispatch) => {
+    try {
+      dispatch(updateSavingStatuses({ createCourseUpdateQuery: RequestStatus.PENDING }));
+      dispatch(showProcessingNotification(NOTIFICATION_MESSAGES.saving));
+      const courseHandouts = await editHandouts(courseId, data);
+      dispatch(editCourseHandouts(courseHandouts));
+      dispatch(hideProcessingNotification());
+      dispatch(updateSavingStatuses({
+        status: { createCourseUpdateQuery: RequestStatus.SUCCESSFUL },
+        error: { savingHandouts: false },
+      }));
+    } catch (error) {
+      dispatch(hideProcessingNotification());
+      dispatch(updateSavingStatuses({
+        status: { createCourseUpdateQuery: RequestStatus.FAILED },
+        error: { savingHandouts: true },
+      }));
+    }
+  };
+}
diff --git a/src/course-updates/delete-modal/DeleteModal.jsx b/src/course-updates/delete-modal/DeleteModal.jsx
new file mode 100644
index 0000000000..68f946dc9a
--- /dev/null
+++ b/src/course-updates/delete-modal/DeleteModal.jsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  ActionRow,
+  Button,
+  AlertModal,
+} from '@openedx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import messages from './messages';
+
+const DeleteModal = ({ isOpen, close, onDeleteSubmit }) => {
+  const intl = useIntl();
+
+  return (
+    <AlertModal
+      title={intl.formatMessage(messages.deleteModalTitle)}
+      isOpen={isOpen}
+      onClose={close}
+      footerNode={(
+        <ActionRow>
+          <Button variant="tertiary" onClick={close}>
+            {intl.formatMessage(messages.cancelButton)}
+          </Button>
+          <Button
+            onClick={(e) => {
+              e.preventDefault();
+              onDeleteSubmit();
+            }}
+          >
+            {intl.formatMessage(messages.deleteButton)}
+          </Button>
+        </ActionRow>
+      )}
+    >
+      <p>{intl.formatMessage(messages.deleteModalDescription)}</p>
+    </AlertModal>
+  );
+};
+
+DeleteModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  close: PropTypes.func.isRequired,
+  onDeleteSubmit: PropTypes.func.isRequired,
+};
+
+export default DeleteModal;
diff --git a/src/course-updates/delete-modal/DeleteModal.test.jsx b/src/course-updates/delete-modal/DeleteModal.test.jsx
new file mode 100644
index 0000000000..54403cf603
--- /dev/null
+++ b/src/course-updates/delete-modal/DeleteModal.test.jsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import DeleteModal from './DeleteModal';
+import messages from './messages';
+
+const onDeleteSubmitMock = jest.fn();
+const closeMock = jest.fn();
+
+const renderComponent = (props) => render(
+  <IntlProvider locale="en">
+    <DeleteModal
+      isOpen
+      close={closeMock}
+      onDeleteSubmit={onDeleteSubmitMock}
+      {...props}
+    />
+  </IntlProvider>,
+);
+
+describe('<DeleteModal />', () => {
+  it('render DeleteModal component correctly', () => {
+    const { getByText, getByRole } = renderComponent();
+
+    expect(getByText(messages.deleteModalTitle.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.deleteModalDescription.defaultMessage)).toBeInTheDocument();
+    expect(getByRole('button', { name: messages.cancelButton.defaultMessage })).toBeInTheDocument();
+    expect(getByRole('button', { name: messages.deleteButton.defaultMessage })).toBeInTheDocument();
+  });
+
+  it('calls onDeleteSubmit function when the "Ok" button is clicked', () => {
+    const { getByRole } = renderComponent();
+
+    const deleteButton = getByRole('button', { name: messages.deleteButton.defaultMessage });
+    fireEvent.click(deleteButton);
+    expect(onDeleteSubmitMock).toHaveBeenCalledTimes(1);
+  });
+
+  it('calls the close function when the "Cancel" button is clicked', () => {
+    const { getByRole } = renderComponent();
+
+    const cancelButton = getByRole('button', { name: messages.cancelButton.defaultMessage });
+    fireEvent.click(cancelButton);
+    expect(closeMock).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/src/course-updates/delete-modal/messages.js b/src/course-updates/delete-modal/messages.js
new file mode 100644
index 0000000000..af946884b3
--- /dev/null
+++ b/src/course-updates/delete-modal/messages.js
@@ -0,0 +1,22 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  deleteModalTitle: {
+    id: 'course-authoring.course-updates.delete-modal.title',
+    defaultMessage: 'Are you sure you want to delete this update?',
+  },
+  deleteModalDescription: {
+    id: 'course-authoring.course-updates.delete-modal.description',
+    defaultMessage: 'This action cannot be undone.',
+  },
+  cancelButton: {
+    id: 'course-authoring.course-updates.actions.cancel',
+    defaultMessage: 'Cancel',
+  },
+  deleteButton: {
+    id: 'course-authoring.course-updates.button.delete',
+    defaultMessage: 'Delete',
+  },
+});
+
+export default messages;
diff --git a/src/course-updates/hooks.jsx b/src/course-updates/hooks.jsx
new file mode 100644
index 0000000000..8bf1d36616
--- /dev/null
+++ b/src/course-updates/hooks.jsx
@@ -0,0 +1,115 @@
+import { useDispatch, useSelector } from 'react-redux';
+import moment from 'moment/moment';
+import { useEffect, useState } from 'react';
+import { useToggle } from '@openedx/paragon';
+
+import { COMMA_SEPARATED_DATE_FORMAT } from '../constants';
+import { convertToDateFromString } from '../utils';
+import { getCourseHandouts, getCourseUpdates } from './data/selectors';
+import { REQUEST_TYPES } from './constants';
+import {
+  createCourseUpdateQuery,
+  deleteCourseUpdateQuery,
+  editCourseHandoutsQuery,
+  editCourseUpdateQuery,
+  fetchCourseHandoutsQuery,
+  fetchCourseUpdatesQuery,
+} from './data/thunk';
+
+const useCourseUpdates = ({ courseId }) => {
+  const dispatch = useDispatch();
+  const initialUpdate = { id: 0, date: moment().utc().toDate(), content: '' };
+
+  const [requestType, setRequestType] = useState('');
+  const [isUpdateFormOpen, openUpdateForm, closeUpdateForm] = useToggle(false);
+  const [isDeleteModalOpen, openDeleteModal, closeDeleteModal] = useToggle(false);
+  const [currentUpdate, setCurrentUpdate] = useState(initialUpdate);
+
+  const courseUpdates = useSelector(getCourseUpdates);
+  const courseHandouts = useSelector(getCourseHandouts);
+
+  const courseUpdatesInitialValues = requestType === REQUEST_TYPES.edit_handouts
+    ? courseHandouts
+    : currentUpdate;
+
+  const handleOpenUpdateForm = (type, courseUpdate) => {
+    setRequestType(type);
+
+    switch (type) {
+      case REQUEST_TYPES.add_new_update:
+        setCurrentUpdate(initialUpdate);
+        break;
+      case REQUEST_TYPES.edit_update:
+        setCurrentUpdate(courseUpdate);
+        break;
+      default:
+        window.scrollTo(0, 0);
+    }
+
+    openUpdateForm();
+  };
+
+  const handleOpenDeleteForm = (courseUpdate) => {
+    setRequestType(REQUEST_TYPES.delete_update);
+    setCurrentUpdate(courseUpdate);
+    openDeleteModal();
+  };
+
+  const handleUpdatesSubmit = (data) => {
+    const dateWithoutTimezone = convertToDateFromString(data.date);
+    const dataToSend = {
+      ...data,
+      date: moment(dateWithoutTimezone).format(COMMA_SEPARATED_DATE_FORMAT),
+    };
+    const { id, date, content } = dataToSend;
+
+    const handleQuerySubmit = (handler) => {
+      closeUpdateForm();
+      setCurrentUpdate(initialUpdate);
+      return handler();
+    };
+
+    switch (requestType) {
+      case REQUEST_TYPES.add_new_update:
+        return handleQuerySubmit(dispatch(createCourseUpdateQuery(courseId, { date, content })));
+      case REQUEST_TYPES.edit_update:
+        return handleQuerySubmit(dispatch(editCourseUpdateQuery(courseId, { id, date, content })));
+      case REQUEST_TYPES.edit_handouts:
+        return handleQuerySubmit(dispatch(editCourseHandoutsQuery(courseId, { ...data, data: data?.data || '' })));
+      default:
+        return true;
+    }
+  };
+
+  const handleDeleteUpdateSubmit = () => {
+    const { id } = currentUpdate;
+
+    dispatch(deleteCourseUpdateQuery(courseId, id));
+    setCurrentUpdate(initialUpdate);
+    closeDeleteModal();
+  };
+
+  useEffect(() => {
+    dispatch(fetchCourseUpdatesQuery(courseId));
+    dispatch(fetchCourseHandoutsQuery(courseId));
+  }, [courseId]);
+
+  return {
+    requestType,
+    courseUpdates,
+    courseHandouts,
+    courseUpdatesInitialValues,
+    isMainFormOpen: isUpdateFormOpen && requestType !== REQUEST_TYPES.edit_update,
+    isInnerFormOpen: (id) => (isUpdateFormOpen && currentUpdate.id === id && requestType === REQUEST_TYPES.edit_update),
+    isUpdateFormOpen,
+    isDeleteModalOpen,
+    closeUpdateForm,
+    closeDeleteModal,
+    handleUpdatesSubmit,
+    handleOpenUpdateForm,
+    handleDeleteUpdateSubmit,
+    handleOpenDeleteForm,
+  };
+};
+
+export { useCourseUpdates };
diff --git a/src/course-updates/index.js b/src/course-updates/index.js
new file mode 100644
index 0000000000..69d920c5a8
--- /dev/null
+++ b/src/course-updates/index.js
@@ -0,0 +1 @@
+export { default as CourseUpdates } from './CourseUpdates';
diff --git a/src/course-updates/messages.js b/src/course-updates/messages.js
new file mode 100644
index 0000000000..a148972aec
--- /dev/null
+++ b/src/course-updates/messages.js
@@ -0,0 +1,91 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  headingTitle: {
+    id: 'course-authoring.course-updates.header.title',
+    defaultMessage: 'Course updates',
+    description: 'Title for page',
+  },
+  headingSubtitle: {
+    id: 'course-authoring.course-updates.header.subtitle',
+    defaultMessage: 'Content',
+    description: 'Subtitle for page',
+  },
+  sectionInfo: {
+    id: 'course-authoring.course-updates.section-info',
+    defaultMessage: 'Use course updates to notify students of important dates or exams, highlight particular discussions in the forums, announce schedule changes, and respond to student questions.',
+    description: 'Message describing the use of course updates in a course',
+  },
+  newUpdateButton: {
+    id: 'course-authoring.course-updates.actions.new-update',
+    defaultMessage: 'New update',
+    description: 'Button label for header button to add a new course update',
+  },
+  firstUpdateButton: {
+    id: 'course-authoring.course-updates.actions.first-update',
+    defaultMessage: 'Add first update',
+    description: 'Button label for button to add first course update',
+  },
+  noCourseUpdates: {
+    id: 'course-authoring.course-updates.actions.first-update-message',
+    defaultMessage: 'You have not added any updates to this course yet.',
+    description: 'Message to notify user that they do not have any existing course updates',
+  },
+  loadingUpdatesErrorTitle: {
+    id: 'course-authoring.course-updates.error.loading-updates.title',
+    defaultMessage: 'Failed to load course updates',
+    description: 'Alert title for loading updates error alert',
+  },
+  loadingUpdatesErrorDescription: {
+    id: 'course-authoring.course-updates.error.loading-updates.description',
+    defaultMessage: 'Failed to load course updates for {courseId}. Please try again later.',
+    description: 'Alert body message for loading course update errors',
+  },
+  loadingHandoutsErrorTitle: {
+    id: 'course-authoring.course-updates.error.loading-handouts.title',
+    defaultMessage: 'Failed to load course handouts',
+    description: 'Alert title for loading handouts error alert',
+  },
+  loadingHandoutsErrorDescription: {
+    id: 'course-authoring.course-updates.error.loading-handouts.description',
+    defaultMessage: 'Failed to load course updates for {courseId}. Please try again later.',
+    description: 'Alert body message for loading course handout errors',
+  },
+  savingUpdatesErrorTitle: {
+    id: 'course-authoring.course-updates.error.saving-updates.title',
+    defaultMessage: 'Failed to save course update',
+    description: 'Alert title for saving updates error alert',
+  },
+  savingUpdatesErrorDescription: {
+    id: 'course-authoring.course-updates.error.saving-updates.description',
+    defaultMessage: 'Failed to save recent changes to course update. Please try again later.',
+    description: 'Alert body message for saving edits to course update errors',
+  },
+  savingNewUpdateErrorAlertDescription: {
+    id: 'course-authoring.course-updates.error.saving-new-updates.description',
+    defaultMessage: 'Failed to save new course update. Please try again later.',
+    description: 'Alert body message for saving new course update errors',
+  },
+  savingHandoutsErrorTitle: {
+    id: 'course-authoring.course-updates.error.saving-handouts.title',
+    defaultMessage: 'Failed to save course handouts',
+    description: 'Alert title for saving handouts error alert',
+  },
+  savingHandoutsErrorDescription: {
+    id: 'course-authoring.course-updates.error.saving-handouts.description',
+    defaultMessage: 'Failed to save recent changes to course handouts. Please try again later.',
+    description: 'Alert body message for saving course handout errors',
+  },
+  deletingUpdatesErrorTitle: {
+    id: 'course-authoring.course-updates.error.deleting-updates.title',
+    defaultMessage: 'Failed to delete course update',
+    description: 'Alert title for deleting update error alert',
+  },
+  deletingUpdatesErrorDescription: {
+    id: 'course-authoring.course-updates.error.deleting-updates.description',
+    defaultMessage: 'Failed to delete selected course update. Please try again later.',
+    description: 'Alert body message for deleting course update errors',
+  },
+});
+
+export default messages;
diff --git a/src/course-updates/update-form/UpdateForm.jsx b/src/course-updates/update-form/UpdateForm.jsx
new file mode 100644
index 0000000000..23fa88321c
--- /dev/null
+++ b/src/course-updates/update-form/UpdateForm.jsx
@@ -0,0 +1,141 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  ActionRow,
+  Button,
+  Form,
+  Icon,
+} from '@openedx/paragon';
+import classNames from 'classnames';
+import DatePicker from 'react-datepicker/dist';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Calendar as CalendarIcon, Error as ErrorIcon } from '@openedx/paragon/icons';
+import { Formik } from 'formik';
+
+import {
+  convertToStringFromDate,
+  convertToDateFromString,
+  isValidDate,
+} from '../../utils';
+import { DATE_FORMAT, DEFAULT_EMPTY_WYSIWYG_VALUE } from '../../constants';
+import { WysiwygEditor } from '../../generic/WysiwygEditor';
+import { REQUEST_TYPES } from '../constants';
+import { geUpdateFormSettings } from './utils';
+import messages from './messages';
+
+const UpdateForm = ({
+  close,
+  requestType,
+  onSubmit,
+  courseUpdatesInitialValues,
+  isInnerForm,
+  isFirstUpdate,
+}) => {
+  const intl = useIntl();
+
+  const {
+    currentContent,
+    formTitle,
+    validationSchema,
+    contentFieldName,
+    submitButtonText,
+  } = geUpdateFormSettings(requestType, courseUpdatesInitialValues, intl);
+
+  return (
+    <div className={classNames('update-form', {
+      'update-form__inner': isInnerForm,
+      'update-form__inner-first': isFirstUpdate,
+    })}
+    >
+      <Formik
+        initialValues={courseUpdatesInitialValues}
+        validationSchema={validationSchema}
+        validateOnMount
+        validateOnBlur
+        onSubmit={onSubmit}
+      >
+        {({
+          values, handleSubmit, isValid, setFieldValue,
+        }) => (
+          <>
+            <h3 className="update-form-title">{formTitle}</h3>
+            {(requestType !== REQUEST_TYPES.edit_handouts) && (
+              <Form.Group className="mb-4 datepicker-field datepicker-custom">
+                <Form.Control.Feedback className="datepicker-float-labels">
+                  {intl.formatMessage(messages.updateFormDate)}
+                </Form.Control.Feedback>
+                <div className="position-relative">
+                  <Icon
+                    src={CalendarIcon}
+                    className="datepicker-custom-control-icon"
+                    alt={intl.formatMessage(messages.updateFormCalendarAltText)}
+                  />
+                  <DatePicker
+                    name="date"
+                    data-testid="course-updates-datepicker"
+                    selected={isValidDate(values.date) ? convertToDateFromString(values.date) : ''}
+                    dateFormat={DATE_FORMAT}
+                    className={classNames('datepicker-custom-control', {
+                      'datepicker-custom-control_isInvalid': !isValid,
+                    })}
+                    autoComplete="off"
+                    selectsStart
+                    showPopperArrow={false}
+                    onChange={(value) => {
+                      if (!isValidDate(value)) {
+                        return;
+                      }
+                      setFieldValue('date', convertToStringFromDate(value));
+                    }}
+                  />
+                </div>
+                {!isValid && (
+                  <div className="datepicker-field-error">
+                    <Icon src={ErrorIcon} className="text-danger-500" alt={intl.formatMessage(messages.updateFormErrorAltText)} />
+                    <span className="message-error">{intl.formatMessage(messages.updateFormInValid)}</span>
+                  </div>
+                )}
+              </Form.Group>
+            )}
+            <Form.Group className="m-0 mb-3">
+              <WysiwygEditor
+                initialValue={currentContent}
+                data-testid="course-updates-wisiwyg-editor"
+                name={contentFieldName}
+                minHeight={300}
+                onChange={(value) => {
+                  setFieldValue(contentFieldName, value || DEFAULT_EMPTY_WYSIWYG_VALUE);
+                }}
+              />
+            </Form.Group>
+            <ActionRow>
+              <Button variant="tertiary" type="button" onClick={close}>
+                {intl.formatMessage(messages.cancelButton)}
+              </Button>
+              <Button onClick={handleSubmit} type="submit" disabled={!isValid}>
+                {submitButtonText}
+              </Button>
+            </ActionRow>
+          </>
+        )}
+      </Formik>
+    </div>
+  );
+};
+
+UpdateForm.defaultProps = {
+  isInnerForm: false,
+  isFirstUpdate: false,
+};
+
+UpdateForm.propTypes = {
+  // eslint-disable-next-line react/forbid-prop-types
+  courseUpdatesInitialValues: PropTypes.object.isRequired,
+  close: PropTypes.func.isRequired,
+  requestType: PropTypes.string.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  isInnerForm: PropTypes.bool,
+  isFirstUpdate: PropTypes.bool,
+};
+
+export default UpdateForm;
diff --git a/src/course-updates/update-form/UpdateForm.scss b/src/course-updates/update-form/UpdateForm.scss
new file mode 100644
index 0000000000..a7a0ad0d15
--- /dev/null
+++ b/src/course-updates/update-form/UpdateForm.scss
@@ -0,0 +1,59 @@
+.update-form {
+  @include pgn-box-shadow(1, "centered");
+
+  border: .0625rem solid $gray-200;
+  border-radius: .375rem;
+  background: $white;
+  margin-bottom: map-get($spacers, 4);
+  padding: $spacer 1.875rem;
+
+  .update-form-title {
+    font-size: 1.5rem;
+    font-weight: 600;
+    margin-bottom: $spacer;
+  }
+
+  .datepicker-field {
+    display: flex;
+    align-items: center;
+    gap: .5rem;
+    position: relative;
+
+    .datepicker-float-labels {
+      position: absolute;
+      padding: 0 .1875rem;
+      top: -.625rem;
+      left: .3125rem;
+      z-index: 9;
+      background-color: $white;
+    }
+
+    .datepicker-field-error {
+      display: flex;
+      align-items: center;
+      gap: .25rem;
+    }
+
+    .react-datepicker-popper {
+      z-index: $zindex-dropdown;
+    }
+  }
+}
+
+.update-form__inner {
+  margin-bottom: 0;
+  margin-top: 1.875rem;
+  padding: map-get($spacers, 4) 0 0;
+  border-top: .0625rem solid $light-400;
+  border-bottom: none;
+  border-left: none;
+  border-right: none;
+  border-radius: 0;
+  box-shadow: none;
+}
+
+.update-form__inner-first {
+  border-top: none;
+  padding-top: 0;
+  margin-top: 0;
+}
diff --git a/src/course-updates/update-form/UpdateForm.test.jsx b/src/course-updates/update-form/UpdateForm.test.jsx
new file mode 100644
index 0000000000..b48e07374d
--- /dev/null
+++ b/src/course-updates/update-form/UpdateForm.test.jsx
@@ -0,0 +1,159 @@
+import React from 'react';
+import {
+  render,
+  fireEvent,
+  waitFor,
+  act,
+} from '@testing-library/react';
+import { AppProvider } from '@edx/frontend-platform/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { initializeMockApp } from '@edx/frontend-platform';
+import moment from 'moment/moment';
+
+import initializeStore from '../../store';
+import { REQUEST_TYPES } from '../constants';
+import { courseHandoutsMock, courseUpdatesMock } from '../__mocks__';
+import UpdateForm from './UpdateForm';
+import messages from './messages';
+
+let store;
+const closeMock = jest.fn();
+const onSubmitMock = jest.fn();
+const addNewUpdateMock = { id: 0, date: moment().utc().toDate(), content: 'Some content' };
+const formattedDateMock = '07/11/2023';
+const contentMock = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
+
+jest.mock('@tinymce/tinymce-react', () => {
+  const originalModule = jest.requireActual('@tinymce/tinymce-react');
+  return {
+    __esModule: true,
+    ...originalModule,
+    Editor: () => 'foo bar',
+  };
+});
+
+jest.mock('../../editors/sharedComponents/TinyMceWidget', () => ({
+  __esModule: true, // Required to mock a default export
+  default: () => <div>Widget</div>,
+  prepareEditorRef: jest.fn(() => ({
+    refReady: true,
+    setEditorRef: jest.fn().mockName('prepareEditorRef.setEditorRef'),
+  })),
+}));
+
+const courseUpdatesInitialValues = (requestType) => {
+  switch (requestType) {
+    case REQUEST_TYPES.add_new_update:
+      return addNewUpdateMock;
+    case REQUEST_TYPES.edit_update:
+      return courseUpdatesMock[0];
+    default:
+      return courseHandoutsMock;
+  }
+};
+
+const renderComponent = ({ requestType }) => render(
+  <AppProvider store={store}>
+    <IntlProvider locale="en">
+      <UpdateForm
+        isOpen
+        close={closeMock}
+        requestType={requestType}
+        onSubmit={onSubmitMock}
+        courseUpdatesInitialValues={courseUpdatesInitialValues(requestType)}
+      />
+    </IntlProvider>
+  </AppProvider>,
+);
+
+describe('<UpdateForm />', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+
+    store = initializeStore();
+  });
+  it('render Add new update form correctly', async () => {
+    const { getByText, getByDisplayValue, getByRole } = renderComponent({ requestType: REQUEST_TYPES.add_new_update });
+    const { date } = courseUpdatesInitialValues(REQUEST_TYPES.add_new_update);
+    const formattedDate = moment(date).utc().format('MM/DD/yyyy');
+
+    expect(getByText(messages.addNewUpdateTitle.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.updateFormDate.defaultMessage)).toBeInTheDocument();
+    expect(getByDisplayValue(formattedDate)).toBeInTheDocument();
+    expect(getByRole('button', { name: messages.cancelButton.defaultMessage }));
+    expect(getByRole('button', { name: messages.postButton.defaultMessage }));
+  });
+
+  it('render Edit update form correctly', async () => {
+    const { getByText, getByDisplayValue, getByRole } = renderComponent({ requestType: REQUEST_TYPES.edit_update });
+
+    expect(getByText(messages.editUpdateTitle.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.updateFormDate.defaultMessage)).toBeInTheDocument();
+    expect(getByDisplayValue(formattedDateMock)).toBeInTheDocument();
+    expect(getByRole('button', { name: messages.cancelButton.defaultMessage }));
+    expect(getByRole('button', { name: messages.postButton.defaultMessage }));
+  });
+
+  it('render Edit handouts form correctly', async () => {
+    const {
+      getByText, getByRole, queryByTestId, queryByText,
+    } = renderComponent({ requestType: REQUEST_TYPES.edit_handouts });
+
+    expect(getByText(messages.editHandoutsTitle.defaultMessage)).toBeInTheDocument();
+    expect(queryByText(messages.updateFormDate.defaultMessage)).not.toBeInTheDocument();
+    expect(queryByTestId('course-updates-datepicker')).not.toBeInTheDocument();
+    expect(getByRole('button', { name: messages.cancelButton.defaultMessage }));
+    expect(getByRole('button', { name: messages.saveButton.defaultMessage }));
+  });
+
+  it('calls closeMock when clicking cancel button', () => {
+    const { getByRole } = renderComponent({ requestType: REQUEST_TYPES.add_new_update });
+
+    const cancelButton = getByRole('button', { name: messages.cancelButton.defaultMessage });
+    fireEvent.click(cancelButton);
+    expect(closeMock).toHaveBeenCalledTimes(1);
+  });
+
+  it('calls onSubmitMock with correct values when clicking post button', async () => {
+    const { getByDisplayValue, getByRole } = renderComponent({ requestType: REQUEST_TYPES.edit_update });
+    const datePicker = getByDisplayValue(formattedDateMock);
+    const postButton = getByRole('button', { name: messages.postButton.defaultMessage });
+
+    fireEvent.change(datePicker, { target: { value: formattedDateMock } });
+
+    await act(async () => {
+      fireEvent.click(postButton);
+    });
+
+    await waitFor(() => {
+      expect(onSubmitMock).toHaveBeenCalledTimes(1);
+      expect(onSubmitMock).toHaveBeenCalledWith(
+        {
+          id: 1,
+          date: 'July 11, 2023',
+          content: contentMock,
+        },
+        expect.objectContaining({ submitForm: expect.any(Function) }),
+      );
+    });
+  });
+
+  it('render error message when date is inValid', async () => {
+    const { getByDisplayValue, getByText, getByRole } = renderComponent({ requestType: REQUEST_TYPES.edit_update });
+    const datePicker = getByDisplayValue(formattedDateMock);
+
+    fireEvent.change(datePicker, { target: { value: '' } });
+
+    await waitFor(() => {
+      expect(getByText(messages.updateFormInValid.defaultMessage)).toBeInTheDocument();
+      expect(getByRole('button', { name: messages.postButton.defaultMessage })).toBeDisabled();
+    });
+  });
+});
diff --git a/src/course-updates/update-form/messages.js b/src/course-updates/update-form/messages.js
new file mode 100644
index 0000000000..8f36a9ff05
--- /dev/null
+++ b/src/course-updates/update-form/messages.js
@@ -0,0 +1,46 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  updateFormDate: {
+    id: 'course-authoring.course-updates.update-form.date',
+    defaultMessage: 'Date',
+  },
+  updateFormInValid: {
+    id: 'course-authoring.course-updates.update-form.inValid',
+    defaultMessage: 'Action required: Enter a valid date.',
+  },
+  updateFormCalendarAltText: {
+    id: 'course-authoring.course-updates.update-form.calendar-alt-text',
+    defaultMessage: 'Calendar for datepicker input',
+  },
+  updateFormErrorAltText: {
+    id: 'course-authoring.course-updates.update-form.error-alt-text',
+    defaultMessage: 'Error icon',
+  },
+  addNewUpdateTitle: {
+    id: 'course-authoring.course-updates.update-form.new-update-title',
+    defaultMessage: 'Add new update',
+  },
+  editUpdateTitle: {
+    id: 'course-authoring.course-updates.update-form.edit-update-title',
+    defaultMessage: 'Edit update',
+  },
+  editHandoutsTitle: {
+    id: 'course-authoring.course-updates.update-form.edit-handouts-title',
+    defaultMessage: 'Edit handouts',
+  },
+  saveButton: {
+    id: 'course-authoring.course-updates.actions.save',
+    defaultMessage: 'Save',
+  },
+  postButton: {
+    id: 'course-authoring.course-updates.actions.post',
+    defaultMessage: 'Post',
+  },
+  cancelButton: {
+    id: 'course-authoring.course-updates.actions.cancel',
+    defaultMessage: 'Cancel',
+  },
+});
+
+export default messages;
diff --git a/src/course-updates/update-form/utils.js b/src/course-updates/update-form/utils.js
new file mode 100644
index 0000000000..f62e085a72
--- /dev/null
+++ b/src/course-updates/update-form/utils.js
@@ -0,0 +1,55 @@
+import * as Yup from 'yup';
+
+import { REQUEST_TYPES } from '../constants';
+import messages from './messages';
+
+/**
+ * Get Update form settings depending on requestType
+ * @param {typeof REQUEST_TYPES} requestType - one of REQUEST_TYPES
+ * @param {object} courseUpdatesInitialValues - form initial values depending on requestType
+ * @returns {{
+  *  currentContent: string,
+  *  validationSchema: object,
+  *  formTitle: string,
+  *  submitButtonText: string,
+  *  contentFieldName: string
+ *  }}
+ */
+const geUpdateFormSettings = (requestType, courseUpdatesInitialValues, intl) => {
+  const updatesValidationSchema = Yup.object().shape({
+    id: Yup.number().required(),
+    date: Yup.date().required(),
+    content: Yup.string(),
+  });
+
+  switch (requestType) {
+    case REQUEST_TYPES.edit_handouts:
+      return {
+        currentContent: courseUpdatesInitialValues.data,
+        formTitle: intl.formatMessage(messages.editHandoutsTitle),
+        validationSchema: Yup.object().shape(),
+        contentFieldName: 'data',
+        submitButtonText: intl.formatMessage(messages.saveButton),
+      };
+    case REQUEST_TYPES.add_new_update:
+      return {
+        currentContent: courseUpdatesInitialValues.content,
+        formTitle: intl.formatMessage(messages.addNewUpdateTitle),
+        validationSchema: updatesValidationSchema,
+        contentFieldName: 'content',
+        submitButtonText: intl.formatMessage(messages.postButton),
+      };
+    case REQUEST_TYPES.edit_update:
+      return {
+        currentContent: courseUpdatesInitialValues.content,
+        formTitle: intl.formatMessage(messages.editUpdateTitle),
+        validationSchema: updatesValidationSchema,
+        contentFieldName: 'content',
+        submitButtonText: intl.formatMessage(messages.postButton),
+      };
+    default:
+      return '';
+  }
+};
+
+export { geUpdateFormSettings };
diff --git a/src/course-updates/utils.js b/src/course-updates/utils.js
new file mode 100644
index 0000000000..8518ee7ef6
--- /dev/null
+++ b/src/course-updates/utils.js
@@ -0,0 +1 @@
+export const matchesAnyStatus = (statuses, status) => Object.values(statuses).some(s => s === status);
diff --git a/src/custom-pages/CustomPageCard.jsx b/src/custom-pages/CustomPageCard.jsx
new file mode 100644
index 0000000000..1d5319efb5
--- /dev/null
+++ b/src/custom-pages/CustomPageCard.jsx
@@ -0,0 +1,136 @@
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import { intlShape, injectIntl } from '@edx/frontend-platform/i18n';
+import {
+  ActionRow,
+  IconButtonWithTooltip,
+  Icon,
+  AlertModal,
+  Button,
+  StatefulButton,
+  useToggle,
+} from '@openedx/paragon';
+import {
+  DeleteOutline,
+  EditOutline,
+  SpinnerSimple,
+  Visibility,
+  VisibilityOff,
+} from '@openedx/paragon/icons';
+import { useNavigate } from 'react-router-dom';
+import { deleteSingleCustomPage, updateCustomPageVisibility } from './data/thunks';
+import messages from './messages';
+import { CustomPagesContext } from './CustomPagesProvider';
+
+const CustomPageCard = ({
+  page,
+  dispatch,
+  deletePageStatus,
+  setCurrentPage,
+  // injected
+  intl,
+}) => {
+  const [isDeleteConfirmationOpen, openDeleteConfirmation, closeDeleteConfirmation] = useToggle(false);
+  const { path: customPagesPath } = useContext(CustomPagesContext);
+  const navigate = useNavigate();
+
+  const handleDelete = () => {
+    dispatch(deleteSingleCustomPage({
+      blockId: page.id,
+      closeConfirmation: closeDeleteConfirmation,
+    }));
+  };
+
+  const toggleVisibility = () => {
+    dispatch(updateCustomPageVisibility({
+      blockId: page.id,
+      metadata: { course_staff_only: !page.courseStaffOnly },
+    }));
+  };
+  const handleEditOpen = () => {
+    setCurrentPage(page.id);
+    navigate(`${customPagesPath}/editor`);
+  };
+
+  const deletePageStateProps = {
+    labels: {
+      default: intl.formatMessage(messages.deletePageLabel),
+      pending: intl.formatMessage(messages.deletingPageBodyLabel),
+    },
+    icons: {
+      pending: <Icon src={SpinnerSimple} className="icon-spin" />,
+    },
+    disabledStates: ['pending'],
+  };
+
+  return (
+    <>
+      <ActionRow>
+        <div className="h4" data-testid="card-title">
+          {page?.name || intl.formatMessage(messages.newPageTitle)}
+        </div>
+        <ActionRow.Spacer />
+        <IconButtonWithTooltip
+          key={intl.formatMessage(messages.editTooltipContent)}
+          tooltipPlacement="top"
+          tooltipContent={intl.formatMessage(messages.editTooltipContent)}
+          src={EditOutline}
+          iconAs={Icon}
+          alt={intl.formatMessage(messages.editTooltipContent)}
+          onClick={handleEditOpen}
+          data-testid="edit-modal-icon"
+        />
+        <IconButtonWithTooltip
+          key={intl.formatMessage(messages.visibilityTooltipContent)}
+          tooltipPlacement="top"
+          tooltipContent={intl.formatMessage(messages.visibilityTooltipContent)}
+          src={page.courseStaffOnly ? VisibilityOff : Visibility}
+          iconAs={Icon}
+          alt={intl.formatMessage(messages.visibilityTooltipContent)}
+          onClick={toggleVisibility}
+          data-testid="visibility-toggle-icon"
+        />
+        <IconButtonWithTooltip
+          key={intl.formatMessage(messages.deleteTooltipContent)}
+          tooltipPlacement="top"
+          tooltipContent={intl.formatMessage(messages.deleteTooltipContent)}
+          src={DeleteOutline}
+          iconAs={Icon}
+          alt={intl.formatMessage(messages.deleteTooltipContent)}
+          onClick={openDeleteConfirmation}
+          data-testid="delete-modal-icon"
+        />
+      </ActionRow>
+      <AlertModal
+        title={intl.formatMessage(messages.deleteConfirmationTitle)}
+        isOpen={isDeleteConfirmationOpen}
+        onClose={closeDeleteConfirmation}
+        footerNode={(
+          <ActionRow>
+            <Button variant="tertiary" onClick={closeDeleteConfirmation}>
+              {intl.formatMessage(messages.cancelButtonLabel)}
+            </Button>
+            <StatefulButton onClick={handleDelete} state={deletePageStatus} {...deletePageStateProps} />
+          </ActionRow>
+        )}
+      >
+        {intl.formatMessage(messages.deleteConfirmationMessage)}
+      </AlertModal>
+    </>
+  );
+};
+
+CustomPageCard.propTypes = {
+  page: PropTypes.shape({
+    name: PropTypes.string,
+    id: PropTypes.string.isRequired,
+    courseStaffOnly: PropTypes.bool.isRequired,
+  }).isRequired,
+  dispatch: PropTypes.func.isRequired,
+  deletePageStatus: PropTypes.string.isRequired,
+  setCurrentPage: PropTypes.func.isRequired,
+  // injected
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(CustomPageCard);
diff --git a/src/custom-pages/CustomPageCard.test.jsx b/src/custom-pages/CustomPageCard.test.jsx
new file mode 100644
index 0000000000..98cf524e3d
--- /dev/null
+++ b/src/custom-pages/CustomPageCard.test.jsx
@@ -0,0 +1,148 @@
+import {
+  render,
+  act,
+  fireEvent,
+  screen,
+  within,
+} from '@testing-library/react';
+
+import {
+  initializeMockApp,
+} from '@edx/frontend-platform';
+import MockAdapter from 'axios-mock-adapter';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { AppProvider } from '@edx/frontend-platform/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import initializeStore from '../store';
+import { executeThunk } from '../utils';
+import { RequestStatus } from '../data/constants';
+import CustomPageCard from './CustomPageCard';
+import {
+  generateUpdateVisibilityApiResponse,
+  courseId,
+  initialState,
+  generateXblockData,
+} from './factories/mockApiResponses';
+
+import { deleteSingleCustomPage, updateCustomPageVisibility } from './data/thunks';
+import { getApiBaseUrl } from './data/api';
+import messages from './messages';
+import CustomPagesProvider from './CustomPagesProvider';
+
+const defaultProps = {
+  courseId,
+  page: {
+    id: 'mOckID1',
+    name: 'test',
+    courseStaffOnly: false,
+  },
+  dispatch: jest.fn(),
+  deletePageStatus: '',
+  setCurrentPage: jest.fn(),
+};
+
+let axiosMock;
+let store;
+
+const renderComponent = (courseStaffOnly) => {
+  render(
+    <IntlProvider locale="en">
+      <AppProvider store={store}>
+        <CustomPagesProvider courseId={courseId}>
+          <CustomPageCard {...defaultProps} page={{ ...defaultProps.page, courseStaffOnly }} />
+        </CustomPagesProvider>
+      </AppProvider>
+    </IntlProvider>,
+  );
+};
+
+const mockStore = async ({
+  blockId,
+  visibility,
+}) => {
+  const xblockEditUrl = `${getApiBaseUrl()}/xblock/${blockId}`;
+
+  axiosMock.onDelete(xblockEditUrl).reply(204);
+  axiosMock.onPut(xblockEditUrl).reply(200, generateUpdateVisibilityApiResponse(blockId, visibility));
+  axiosMock.onGet(xblockEditUrl).reply(200, generateXblockData(blockId));
+
+  await executeThunk(deleteSingleCustomPage({
+    blockId,
+    closeConfirmation: jest.fn(),
+  }), store.dispatch);
+  await executeThunk(updateCustomPageVisibility({
+    blockId,
+    metadata: { courseStaffOnly: visibility },
+  }), store.dispatch);
+};
+
+describe('CustomPageCard', () => {
+  beforeEach(async () => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: false,
+        roles: [],
+      },
+    });
+    store = initializeStore(initialState);
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+  });
+  it('should have title from redux store', async () => {
+    renderComponent();
+    const { getByText } = within(screen.getByTestId('card-title'));
+    expect(getByText('test')).toBeInTheDocument();
+  });
+  it('should contain icon row', () => {
+    renderComponent();
+    expect(screen.getByTestId('edit-modal-icon')).toBeVisible();
+    expect(screen.getByTestId('visibility-toggle-icon')).toBeVisible();
+    expect(screen.getByTestId('delete-modal-icon')).toBeVisible();
+  });
+  it('should open delete confirmation modal and handle cancel', () => {
+    renderComponent();
+    const deleteButton = screen.getByTestId('delete-modal-icon');
+    fireEvent.click(deleteButton);
+    expect(screen.getByText(messages.deleteConfirmationTitle.defaultMessage)).toBeVisible();
+    const cancelButton = screen.getByText(messages.cancelButtonLabel.defaultMessage);
+    fireEvent.click(cancelButton);
+    expect(screen.queryByText(messages.deleteConfirmationTitle.defaultMessage)).toBeNull();
+  });
+  it('should open delete confirmation modal and handle delete', async () => {
+    renderComponent();
+    const deleteButton = screen.getByTestId('delete-modal-icon');
+    fireEvent.click(deleteButton);
+    expect(screen.getByText(messages.deleteConfirmationTitle.defaultMessage)).toBeVisible();
+    expect(screen.queryByTestId('delete-confirmation-alert-modal')).toBeNull();
+    const confirmButton = screen.getByText(messages.deletePageLabel.defaultMessage);
+    await mockStore({ blockId: 'mOckID1' });
+    await act(async () => { fireEvent.click(confirmButton); });
+    const deleteStatus = store.getState().customPages.deletingStatus;
+    expect(deleteStatus).toEqual(RequestStatus.SUCCESSFUL);
+  });
+  it('should open edit modal', async () => {
+    renderComponent();
+    const editButton = screen.getByTestId('edit-modal-icon');
+    await mockStore({ blockId: 'mOckID1' });
+    await act(async () => { fireEvent.click(editButton); });
+    expect(defaultProps.setCurrentPage).toHaveBeenCalled();
+  });
+  it('should open update courseStaffOnly to true', async () => {
+    renderComponent(false);
+    const visibilityButton = screen.getByTestId('visibility-toggle-icon');
+    await mockStore({ blockId: 'mOckID1', visibility: true });
+    await act(async () => { fireEvent.click(visibilityButton); });
+    const { courseStaffOnly } = store.getState().models.customPages[defaultProps.page.id];
+    expect(courseStaffOnly).toBeTruthy();
+  });
+  it('should open update courseStaffOnly to false', async () => {
+    renderComponent(true);
+    const visibilityButton = screen.getByTestId('visibility-toggle-icon');
+    await mockStore({ blockId: 'mOckID1', visibility: false });
+    await act(async () => { fireEvent.click(visibilityButton); });
+    const { courseStaffOnly } = store.getState().models.customPages[defaultProps.page.id];
+    expect(courseStaffOnly).toBeFalsy();
+  });
+});
diff --git a/src/custom-pages/CustomPages.jsx b/src/custom-pages/CustomPages.jsx
new file mode 100644
index 0000000000..28669b856d
--- /dev/null
+++ b/src/custom-pages/CustomPages.jsx
@@ -0,0 +1,284 @@
+import { useEffect, useContext, useState } from 'react';
+import PropTypes from 'prop-types';
+import {
+  Routes, Route, useNavigate, Link,
+} from 'react-router-dom';
+import { useDispatch, useSelector } from 'react-redux';
+import { AppContext, PageWrap } from '@edx/frontend-platform/react';
+import { injectIntl, FormattedMessage, intlShape } from '@edx/frontend-platform/i18n';
+import {
+  ActionRow,
+  Breadcrumb,
+  Button,
+  Layout,
+  Hyperlink,
+  StatefulButton,
+  Icon,
+  useToggle,
+  Image,
+  ModalDialog,
+  Container,
+} from '@openedx/paragon';
+import { Add, SpinnerSimple } from '@openedx/paragon/icons';
+import Placeholder from '../editors/Placeholder';
+import DraggableList, { SortableItem } from '../editors/sharedComponents/DraggableList';
+import ErrorAlert from '../editors/sharedComponents/ErrorAlerts/ErrorAlert';
+
+import { RequestStatus } from '../data/constants';
+import { useModels, useModel } from '../generic/model-store';
+import { getLoadingStatus, getSavingStatus } from './data/selectors';
+import {
+  addSingleCustomPage,
+  fetchCustomPages,
+  updatePageOrder,
+  updateSingleCustomPage,
+} from './data/thunks';
+
+import previewLmsStaticPages from './data/images/previewLmsStaticPages.png';
+import CustomPageCard from './CustomPageCard';
+import messages from './messages';
+import CustomPagesProvider from './CustomPagesProvider';
+import EditModal from './EditModal';
+import { getWaffleFlags } from '../data/selectors';
+import getPageHeadTitle from '../generic/utils';
+import { getPagePath } from '../utils';
+
+const CustomPages = ({
+  courseId,
+  // injected
+  intl,
+}) => {
+  const navigate = useNavigate();
+  const dispatch = useDispatch();
+  const [orderedPages, setOrderedPages] = useState([]);
+  const [currentPage, setCurrentPage] = useState();
+  const [isOpen, open, close] = useToggle(false);
+
+  const courseDetails = useModel('courseDetails', courseId);
+  document.title = getPageHeadTitle(courseDetails?.name, intl.formatMessage(messages.heading));
+
+  const { config } = useContext(AppContext);
+  const learningCourseURL = `${config.LEARNING_BASE_URL}/course/${courseId}`;
+
+  useEffect(() => {
+    dispatch(fetchCustomPages(courseId));
+  }, [courseId]);
+
+  const customPagesIds = useSelector(state => state.customPages.customPagesIds);
+  const addPageStatus = useSelector(state => state.customPages.addingStatus);
+  const deletePageStatus = useSelector(state => state.customPages.deletingStatus);
+  const savingStatus = useSelector(getSavingStatus);
+  const loadingStatus = useSelector(getLoadingStatus);
+  const waffleFlags = useSelector(getWaffleFlags);
+
+  const pages = useModels('customPages', customPagesIds);
+
+  const handleAddPage = () => { dispatch(addSingleCustomPage(courseId)); };
+  const handleReorder = () => (newPageOrder) => {
+    dispatch(updatePageOrder(courseId, newPageOrder));
+  };
+  const handleEditClose = () => (content) => {
+    navigate(`/course/${courseId}/custom-pages`);
+    if (!content?.metadata) {
+      setCurrentPage(null);
+      return;
+    }
+    dispatch(updateSingleCustomPage({
+      blockId: currentPage,
+      metadata: { displayName: content.metadata.display_name },
+      setCurrentPage,
+    }));
+  };
+
+  const addPageStateProps = {
+    labels: {
+      default: intl.formatMessage(messages.addPageBodyLabel),
+      pending: intl.formatMessage(messages.addingPageBodyLabel),
+    },
+    icons: {
+      default: <Icon src={Add} />,
+      pending: <Icon src={SpinnerSimple} className="icon-spin" />,
+    },
+    disabledStates: ['pending'],
+  };
+  useEffect(() => { setOrderedPages(pages); }, [customPagesIds, savingStatus]);
+  if (loadingStatus === RequestStatus.IN_PROGRESS) {
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    return (<></>);
+  }
+  if (loadingStatus === RequestStatus.DENIED) {
+    return (
+      <div data-testid="under-construction-placeholder" className="row justify-content-center m-6">
+        <Placeholder />
+      </div>
+    );
+  }
+  return (
+    <CustomPagesProvider courseId={courseId}>
+      <Container size="xl" className="p-4 pt-5">
+        <div className="small gray-700">
+          <Breadcrumb
+            ariaLabel="Custom Page breadcrumbs"
+            linkAs={Link}
+            links={[
+              {
+                label: 'Content',
+                to: waffleFlags.useNewCourseOutlinePage ? `/course/${courseId}` : `${config.STUDIO_BASE_URL}/course/${courseId}`,
+              },
+              { label: 'Pages and Resources', to: getPagePath(courseId, 'true', 'tabs') },
+            ]}
+          />
+        </div>
+        <ActionRow>
+          <div className="h2">
+            <FormattedMessage {...messages.heading} />
+          </div>
+          <ActionRow.Spacer />
+          <Button
+            iconBefore={Add}
+            onClick={handleAddPage}
+            data-testid="header-add-button"
+          >
+            <FormattedMessage {...messages.addPageHeaderLabel} />
+          </Button>
+          <Hyperlink
+            destination={learningCourseURL}
+            target="_blank"
+            rel="noopener noreferrer"
+            showLaunchIcon={false}
+            data-testid="header-view-live-button"
+          >
+            <Button>
+              <FormattedMessage {...messages.viewLiveLabel} />
+            </Button>
+          </Hyperlink>
+        </ActionRow>
+        <hr />
+        <Layout
+          lg={[{ span: 9, offset: 0 }, { span: 3, offset: 0 }]}
+          md={[{ span: 9, offset: 0 }, { span: 3, offset: 0 }]}
+          sm={[{ span: 9, offset: 0 }, { span: 3, offset: 0 }]}
+          xs={[{ span: 9, offset: 0 }, { span: 3, offset: 0 }]}
+          xl={[{ span: 9, offset: 0 }, { span: 3, offset: 0 }]}
+        >
+          <Layout.Element>
+            <ErrorAlert hideHeading isError={deletePageStatus === RequestStatus.FAILED}>
+              {intl.formatMessage(messages.errorAlertMessage, { actionName: 'delete' })}
+            </ErrorAlert>
+            <ErrorAlert hideHeading isError={addPageStatus === RequestStatus.FAILED}>
+              {intl.formatMessage(messages.errorAlertMessage, { actionName: 'add' })}
+            </ErrorAlert>
+            <ErrorAlert hideHeading isError={savingStatus === RequestStatus.FAILED}>
+              {intl.formatMessage(messages.errorAlertMessage, { actionName: 'save' })}
+            </ErrorAlert>
+            <div className="small gray-700 mb-4">
+              <FormattedMessage {...messages.note} />
+            </div>
+            <DraggableList itemList={orderedPages} setState={setOrderedPages} updateOrder={handleReorder}>
+              {orderedPages.map((page) => (
+                <SortableItem
+                  id={page.id}
+                  key={page.id}
+                  componentStyle={{
+                    background: 'white',
+                    borderRadius: '6px',
+                    padding: '24px',
+                    marginBottom: '16px',
+                    boxShadow: '0px 1px 5px #ADADAD',
+                  }}
+                >
+                  <CustomPageCard
+                    {...{
+                      page,
+                      dispatch,
+                      deletePageStatus,
+                      courseId,
+                      setCurrentPage,
+                    }}
+                  />
+                </SortableItem>
+              ))}
+            </DraggableList>
+            <StatefulButton
+              data-testid="body-add-button"
+              onClick={handleAddPage}
+              state={addPageStatus}
+              {...addPageStateProps}
+            />
+          </Layout.Element>
+          <Layout.Element>
+            <div className="h4">
+              <FormattedMessage {...messages.pageExplanationHeader} />
+            </div>
+            <div className="small gray-700">
+              <FormattedMessage {...messages.pageExplanationBody} />
+            </div>
+            <hr />
+            <div className="h4">
+              <FormattedMessage {...messages.customPagesExplanationHeader} />
+            </div>
+            <div className="small gray-700">
+              <FormattedMessage {...messages.customPagesExplanationBody} />
+            </div>
+            <hr />
+            <div className="h4">
+              <FormattedMessage {...messages.studentViewExplanationHeader} />
+            </div>
+            <div className="small gray-700">
+              <FormattedMessage {...messages.studentViewExplanationBody} />
+            </div>
+            <Button
+              data-testid="student-view-example-button"
+              variant="link"
+              size="sm"
+              onClick={open}
+              className="pl-0"
+            >
+              <FormattedMessage {...messages.studentViewExampleButton} />
+            </Button>
+          </Layout.Element>
+        </Layout>
+        <ModalDialog
+          isOpen={isOpen}
+          onClose={close}
+          size="lg"
+          title={intl.formatMessage(messages.studentViewModalTitle)}
+        >
+          <ModalDialog.Header>
+            <ModalDialog.Title>
+              <FormattedMessage {...messages.studentViewModalTitle} />
+            </ModalDialog.Title>
+          </ModalDialog.Header>
+          <ModalDialog.Body>
+            <Image src={previewLmsStaticPages} fluid className="mb-3" />
+            <div className="small">
+              <FormattedMessage {...messages.studentViewModalBody} />
+            </div>
+          </ModalDialog.Body>
+        </ModalDialog>
+        <Routes>
+          <Route
+            path="/editor"
+            element={currentPage && (
+              <PageWrap>
+                <EditModal
+                  courseId={courseId}
+                  pageId={currentPage}
+                  onClose={handleEditClose}
+                />
+              </PageWrap>
+            )}
+          />
+        </Routes>
+      </Container>
+    </CustomPagesProvider>
+  );
+};
+
+CustomPages.propTypes = {
+  courseId: PropTypes.string.isRequired,
+  // injected
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(CustomPages);
diff --git a/src/custom-pages/CustomPages.test.jsx b/src/custom-pages/CustomPages.test.jsx
new file mode 100644
index 0000000000..de57e25b80
--- /dev/null
+++ b/src/custom-pages/CustomPages.test.jsx
@@ -0,0 +1,117 @@
+import ReactDOM from 'react-dom';
+
+import {
+  initializeMocks,
+  fireEvent,
+  screen,
+  act,
+  render,
+} from '../testUtils';
+import { executeThunk } from '../utils';
+import { RequestStatus } from '../data/constants';
+import { getApiWaffleFlagsUrl } from '../data/api';
+import { fetchWaffleFlags } from '../data/thunks';
+import CustomPages from './CustomPages';
+import {
+  generateFetchPageApiResponse,
+  generateNewPageApiResponse,
+  getStatusValue,
+  courseId,
+} from './factories/mockApiResponses';
+
+import {
+  addSingleCustomPage,
+  fetchCustomPages,
+  updatePageOrder,
+} from './data/thunks';
+import { getApiBaseUrl, getTabHandlerUrl } from './data/api';
+import messages from './messages';
+
+let axiosMock;
+let store;
+ReactDOM.createPortal = jest.fn(node => node);
+
+const renderComponent = () => {
+  render(<CustomPages courseId={courseId} />);
+};
+
+const mockStore = async (status) => {
+  const xblockAddUrl = `${getApiBaseUrl()}/xblock/`;
+  const reorderUrl = `${getTabHandlerUrl(courseId)}/reorder`;
+  const fetchPagesUrl = `${getTabHandlerUrl(courseId)}`;
+
+  axiosMock.onGet(fetchPagesUrl).reply(getStatusValue(status), generateFetchPageApiResponse());
+  axiosMock.onPost(reorderUrl).reply(204);
+  axiosMock.onPut(xblockAddUrl).reply(200, generateNewPageApiResponse());
+
+  await executeThunk(fetchCustomPages(courseId), store.dispatch);
+  await executeThunk(addSingleCustomPage(courseId), store.dispatch);
+  await executeThunk(updatePageOrder(courseId, [{ id: 'mOckID2' }, { id: 'mOckID1' }]), store.dispatch);
+};
+
+describe('CustomPages', () => {
+  beforeEach(async () => {
+    const mocks = initializeMocks();
+    store = mocks.reduxStore;
+    axiosMock = mocks.axiosMock;
+    axiosMock
+      .onGet(getApiWaffleFlagsUrl(courseId))
+      .reply(200, {
+        useNewGradingPage: true,
+        useNewCertificatesPage: true,
+        useNewScheduleDetailsPage: true,
+        useNewCourseOutlinePage: true,
+      });
+    await executeThunk(fetchWaffleFlags(courseId), store.dispatch);
+  });
+  it('should ', async () => {
+    renderComponent();
+    await mockStore(RequestStatus.DENIED);
+    expect(screen.getByTestId('under-construction-placeholder')).toBeVisible();
+  });
+  it('should have breadecrumbs', async () => {
+    renderComponent();
+    await mockStore(RequestStatus.SUCCESSFUL);
+    expect(screen.getByLabelText('Custom Page breadcrumbs')).toBeVisible();
+  });
+  it('should contain header row with title, add button and view live button', async () => {
+    renderComponent();
+    await mockStore(RequestStatus.SUCCESSFUL);
+    expect(screen.getByText(messages.heading.defaultMessage)).toBeVisible();
+    expect(screen.getByTestId('header-add-button')).toBeVisible();
+    expect(screen.getByTestId('header-view-live-button')).toBeVisible();
+  });
+  it('should add new page when "add a new page button" is clicked', async () => {
+    renderComponent();
+    await mockStore(RequestStatus.SUCCESSFUL);
+    const addButton = screen.getByTestId('body-add-button');
+    expect(addButton).toBeVisible();
+    await act(async () => { fireEvent.click(addButton); });
+    const addStatus = store.getState().customPages.addingStatus;
+    expect(addStatus).toEqual(RequestStatus.SUCCESSFUL);
+  });
+  it('should open student view modal when "add a new page button" is clicked', async () => {
+    renderComponent();
+    await mockStore(RequestStatus.SUCCESSFUL);
+    const viewButton = screen.getByTestId('student-view-example-button');
+    expect(viewButton).toBeVisible();
+    expect(screen.queryByLabelText(messages.studentViewModalTitle.defaultMessage)).toBeNull();
+    fireEvent.click(viewButton);
+    expect(screen.getByText(messages.studentViewModalTitle.defaultMessage)).toBeVisible();
+  });
+  it('should update page order on drag', async () => {
+    renderComponent();
+    await mockStore(RequestStatus.SUCCESSFUL);
+    const buttons = await screen.queryAllByRole('button');
+    const draggableButton = buttons[9];
+    expect(draggableButton).toBeVisible();
+    await act(async () => {
+      fireEvent.click(draggableButton);
+      fireEvent.keyDown(draggableButton, { key: '' });
+      fireEvent.keyDown(draggableButton, { key: 'ArrowDown' });
+      fireEvent.keyDown(draggableButton, { key: '' });
+    });
+    const saveStatus = store.getState().customPages.savingStatus;
+    expect(saveStatus).toEqual(RequestStatus.SUCCESSFUL);
+  });
+});
diff --git a/src/custom-pages/CustomPagesProvider.jsx b/src/custom-pages/CustomPagesProvider.jsx
new file mode 100644
index 0000000000..8ac4a4d734
--- /dev/null
+++ b/src/custom-pages/CustomPagesProvider.jsx
@@ -0,0 +1,25 @@
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+
+export const CustomPagesContext = React.createContext({});
+
+const CustomPagesProvider = ({ courseId, children }) => {
+  const contextValue = useMemo(() => ({
+    courseId,
+    path: `/course/${courseId}/custom-pages`,
+  }), []);
+  return (
+    <CustomPagesContext.Provider
+      value={contextValue}
+    >
+      {children}
+    </CustomPagesContext.Provider>
+  );
+};
+
+CustomPagesProvider.propTypes = {
+  courseId: PropTypes.string.isRequired,
+  children: PropTypes.node.isRequired,
+};
+
+export default CustomPagesProvider;
diff --git a/src/custom-pages/EditModal.jsx b/src/custom-pages/EditModal.jsx
new file mode 100644
index 0000000000..e89b39b827
--- /dev/null
+++ b/src/custom-pages/EditModal.jsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { getConfig } from '@edx/frontend-platform';
+
+import EditorPage from '../editors/EditorPage';
+
+const EditModal = ({
+  pageId,
+  courseId,
+  onClose,
+}) => (
+  <div
+    style={{
+      position: 'fixed',
+      width: '100%',
+      height: '100%',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      'overflow-y': 'scroll',
+      'background-color': 'white',
+      'z-index': 100,
+    }}
+  >
+    <EditorPage
+      courseId={courseId}
+      blockType="html"
+      blockId={pageId}
+      studioEndpointUrl={getConfig().STUDIO_BASE_URL}
+      lmsEndpointUrl={getConfig().LMS_BASE_URL}
+      returnFunction={onClose}
+    />
+  </div>
+);
+
+EditModal.propTypes = {
+  pageId: PropTypes.string.isRequired,
+  onClose: PropTypes.func.isRequired,
+  courseId: PropTypes.string.isRequired,
+};
+
+export default EditModal;
diff --git a/src/custom-pages/data/api.js b/src/custom-pages/data/api.js
new file mode 100644
index 0000000000..078c03bdb6
--- /dev/null
+++ b/src/custom-pages/data/api.js
@@ -0,0 +1,71 @@
+import { camelCaseObject, ensureConfig, getConfig } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+
+ensureConfig([
+  'STUDIO_BASE_URL',
+], 'Course Apps API service');
+
+export const getApiBaseUrl = () => getConfig().STUDIO_BASE_URL;
+export const getTabHandlerUrl = (courseId) => `${getApiBaseUrl()}/api/contentstore/v0/tabs/${courseId}`;
+
+/**
+ * Fetches the course custom pages for provided course
+ * @param {string} courseId
+ * @returns {Promise<[{}]>}
+ */
+export async function getCustomPages(courseId) {
+  const { data } = await getAuthenticatedHttpClient()
+    .get(`${getTabHandlerUrl(courseId)}`);
+  return camelCaseObject(data);
+}
+
+/**
+ * Delete custom page for provided block.
+ * @param {blockId} courseId Course ID for the course to operate on
+
+ */
+export async function deleteCustomPage(blockId) {
+  await getAuthenticatedHttpClient()
+    .delete(`${getApiBaseUrl()}/xblock/${blockId}`);
+}
+
+/**
+ * Add custom page for provided block.
+ * @param {blockId} courseId Course ID for the course to operate on
+
+ */
+export async function addCustomPage(courseId) {
+  const v1CourseId = courseId.substring(7);
+  const courseBlockId = `block-${v1CourseId}+type@course+block@course`;
+  const { data } = await getAuthenticatedHttpClient()
+    .put(`${getApiBaseUrl()}/xblock/`, {
+      category: 'static_tab',
+      parent_locator: courseBlockId,
+    });
+  return camelCaseObject(data);
+}
+
+/**
+ * Update custom page html for provided block.
+ * @param {blockId} courseId Course ID for the course to operate on
+
+ */
+export async function updateCustomPage({ blockId, htmlString, metadata }) {
+  const { data } = await getAuthenticatedHttpClient()
+    .put(`${getApiBaseUrl()}/xblock/${blockId}`, {
+      id: blockId,
+      data: htmlString,
+      metadata,
+    });
+  return camelCaseObject(data);
+}
+
+/**
+ * Update order of custom pages.
+ * @param {blockId} courseId Course ID for the course to operate on
+
+ */
+export async function updateCustomPageOrder(courseId, tabs) {
+  await getAuthenticatedHttpClient()
+    .post(`${getTabHandlerUrl(courseId)}/reorder`, tabs);
+}
diff --git a/src/custom-pages/data/images/previewLmsStaticPages.png b/src/custom-pages/data/images/previewLmsStaticPages.png
new file mode 100644
index 0000000000..3b05ae2ee1
Binary files /dev/null and b/src/custom-pages/data/images/previewLmsStaticPages.png differ
diff --git a/src/custom-pages/data/selectors.js b/src/custom-pages/data/selectors.js
new file mode 100644
index 0000000000..74f7d1a014
--- /dev/null
+++ b/src/custom-pages/data/selectors.js
@@ -0,0 +1,6 @@
+export const getLoadingStatus = (state) => state.customPages.loadingStatus;
+export const getSavingStatus = (state) => state.customPages.savingStatus;
+export const getCustomPagesApiStatus = (state) => state.customPages.customPagesApiStatus;
+// export const getCourseAppSettingValue = (setting) => (state) => (
+//   state.pagesAndResources.courseAppSettings[setting]?.value
+// );
diff --git a/src/custom-pages/data/slice.js b/src/custom-pages/data/slice.js
new file mode 100644
index 0000000000..1e30f93187
--- /dev/null
+++ b/src/custom-pages/data/slice.js
@@ -0,0 +1,53 @@
+/* eslint-disable no-param-reassign */
+import { createSlice } from '@reduxjs/toolkit';
+
+import { RequestStatus } from '../../data/constants';
+
+const slice = createSlice({
+  name: 'customPages',
+  initialState: {
+    customPagesIds: [],
+    loadingStatus: RequestStatus.IN_PROGRESS,
+    savingStatus: '',
+    addingStatus: 'default',
+    deletingStatus: '',
+  },
+  reducers: {
+    setPageIds: (state, { payload }) => {
+      state.customPagesIds = payload.customPagesIds;
+    },
+    updateLoadingStatus: (state, { payload }) => {
+      state.loadingStatus = payload.status;
+    },
+    updateSavingStatus: (state, { payload }) => {
+      state.savingStatus = payload.status;
+    },
+    updateAddingStatus: (state, { payload }) => {
+      state.addingStatus = payload.status;
+    },
+    updateDeletingStatus: (state, { payload }) => {
+      state.deletingStatus = payload.status;
+    },
+    deleteCustomPageSuccess: (state, { payload }) => {
+      state.customPagesIds = state.customPagesIds.filter(id => id !== payload.customPageId);
+    },
+    addCustomPageSuccess: (state, { payload }) => {
+      state.customPagesIds = [...state.customPagesIds, payload.customPageId];
+    },
+  },
+});
+
+export const {
+  setPageIds,
+  updateLoadingStatus,
+  updateSavingStatus,
+  updateCustomPagesApiStatus,
+  deleteCustomPageSuccess,
+  updateDeletingStatus,
+  addCustomPageSuccess,
+  updateAddingStatus,
+} = slice.actions;
+
+export const {
+  reducer,
+} = slice;
diff --git a/src/custom-pages/data/thunks.js b/src/custom-pages/data/thunks.js
new file mode 100644
index 0000000000..d485c7f9c3
--- /dev/null
+++ b/src/custom-pages/data/thunks.js
@@ -0,0 +1,160 @@
+import { RequestStatus } from '../../data/constants';
+import {
+  addModel,
+  addModels,
+  removeModel,
+  updateModel,
+  updateModels,
+} from '../../generic/model-store';
+import {
+  getCustomPages,
+  deleteCustomPage,
+  addCustomPage,
+  updateCustomPage,
+  updateCustomPageOrder,
+} from './api';
+import {
+  setPageIds,
+  updateCustomPagesApiStatus,
+  updateLoadingStatus,
+  updateSavingStatus,
+  updateAddingStatus,
+  updateDeletingStatus,
+  deleteCustomPageSuccess,
+  addCustomPageSuccess,
+} from './slice';
+
+export function fetchCustomPages(courseId) {
+  return async (dispatch) => {
+    dispatch(updateLoadingStatus({ courseId, status: RequestStatus.IN_PROGRESS }));
+
+    try {
+      const customPages = await getCustomPages(courseId);
+
+      dispatch(addModels({ modelType: 'customPages', models: customPages }));
+      dispatch(setPageIds({
+        customPagesIds: customPages.map(page => page.id),
+      }));
+      dispatch(updateLoadingStatus({ courseId, status: RequestStatus.SUCCESSFUL }));
+    } catch (error) {
+      if (error.response && error.response.status === 403) {
+        dispatch(updateLoadingStatus({ courseId, status: RequestStatus.DENIED }));
+      } else {
+        dispatch(updateLoadingStatus({ courseId, status: RequestStatus.FAILED }));
+      }
+    }
+  };
+}
+
+export function deleteSingleCustomPage({ blockId, closeConfirmation }) {
+  return async (dispatch) => {
+    dispatch(updateDeletingStatus({ status: RequestStatus.PENDING }));
+
+    try {
+      await deleteCustomPage(blockId);
+      dispatch(removeModel({ modelType: 'customPages', model: blockId }));
+      dispatch(deleteCustomPageSuccess({
+        customPageId: blockId,
+      }));
+      dispatch(updateDeletingStatus({ status: RequestStatus.SUCCESSFUL }));
+    } catch (error) {
+      if (error.response && error.response.status === 403) {
+        dispatch(updateDeletingStatus({ status: RequestStatus.DENIED }));
+      }
+      dispatch(updateDeletingStatus({ status: RequestStatus.FAILED }));
+    }
+    closeConfirmation();
+  };
+}
+
+export function addSingleCustomPage(courseId) {
+  return async (dispatch) => {
+    dispatch(updateAddingStatus({ status: RequestStatus.PENDING }));
+
+    try {
+      const pageData = await addCustomPage(courseId);
+      dispatch(addModel({
+        modelType: 'customPages',
+        model: {
+          id: pageData.locator,
+          courseStaffOnly: false,
+          ...pageData,
+        },
+      }));
+      dispatch(addCustomPageSuccess({
+        customPageId: pageData.locator,
+      }));
+      dispatch(updateAddingStatus({ courseId, status: RequestStatus.SUCCESSFUL }));
+    } catch (error) {
+      if (error.response && error.response.status === 403) {
+        dispatch(updateAddingStatus({ status: RequestStatus.DENIED }));
+      }
+      dispatch(updateAddingStatus({ status: RequestStatus.FAILED }));
+    }
+  };
+}
+
+export function updatePageOrder(courseId, pages) {
+  const tabs = [];
+  pages.forEach(page => {
+    const currentTab = {};
+    currentTab.tab_locator = page.id;
+    tabs.push(currentTab);
+  });
+  return async (dispatch) => {
+    try {
+      await updateCustomPageOrder(courseId, tabs);
+      dispatch(updateModels({ modelType: 'customPages', models: pages }));
+      dispatch(setPageIds({
+        customPagesIds: pages.map(page => page.id),
+      }));
+      dispatch(updateSavingStatus({ status: RequestStatus.SUCCESSFUL }));
+    } catch (error) {
+      if (error.response && error.response.status === 403) {
+        dispatch(updateCustomPagesApiStatus({ status: RequestStatus.DENIED }));
+      }
+      dispatch(updateSavingStatus({ status: RequestStatus.FAILED }));
+    }
+  };
+}
+
+export function updateCustomPageVisibility({ blockId, metadata }) {
+  return async (dispatch) => {
+    dispatch(updateSavingStatus({ status: RequestStatus.IN_PROGRESS }));
+
+    try {
+      const pageData = await updateCustomPage({ blockId, metadata });
+      dispatch(updateModel({
+        modelType: 'customPages',
+        model: {
+          id: blockId,
+          courseStaffOnly: pageData.metadata.courseStaffOnly,
+        },
+      }));
+      dispatch(updateSavingStatus({ status: RequestStatus.SUCCESSFUL }));
+    } catch (error) {
+      dispatch(updateSavingStatus({ status: RequestStatus.FAILED }));
+    }
+  };
+}
+
+export const updateSingleCustomPage = ({
+  blockId,
+  metadata,
+  setCurrentPage,
+}) => (dispatch) => {
+  dispatch(updateSavingStatus({ status: RequestStatus.IN_PROGRESS }));
+  try {
+    dispatch(updateModel({
+      modelType: 'customPages',
+      model: {
+        id: blockId,
+        name: metadata.displayName,
+      },
+    }));
+    setCurrentPage(null);
+    dispatch(updateSavingStatus({ status: RequestStatus.SUCCESSFUL }));
+  } catch (error) {
+    dispatch(updateSavingStatus({ status: RequestStatus.FAILED }));
+  }
+};
diff --git a/src/custom-pages/factories/mockApiResponses.jsx b/src/custom-pages/factories/mockApiResponses.jsx
new file mode 100644
index 0000000000..5c40d0cbae
--- /dev/null
+++ b/src/custom-pages/factories/mockApiResponses.jsx
@@ -0,0 +1,75 @@
+import { RequestStatus } from '../../data/constants';
+
+export const courseId = 'course-v1:edX+DemoX+Demo_Course';
+
+export const initialState = {
+  courseDetail: {
+    courseId,
+    status: 'sucessful',
+  },
+  customPages: {
+    customPagesIds: [
+      'mOckID1',
+    ],
+    loadingStatus: 'successful',
+    savingStatus: '',
+    deletingStatus: '',
+    addingStatus: '',
+    customPagesApiStatus: {},
+  },
+  models: {
+    customPages: {
+      mOckID1: {
+        id: 'mOckID1',
+        name: 'test',
+        courseStaffOnly: false,
+        tabId: 'static_tab_1',
+      },
+    },
+  },
+};
+
+export const generateFetchPageApiResponse = () => ([{
+  type: 'static_tab',
+  title: null,
+  is_hideable: false,
+  is_hidden: false,
+  is_movable: true,
+  course_staff_only: false,
+  name: 'test',
+  tab_id: 'static_tab_1',
+  settings: {
+    url_slug: '1',
+  },
+  id: 'mOckID1',
+}]);
+
+export const generateXblockData = (
+  blockId,
+) => ({
+  id: blockId,
+  display_name: 'test',
+  data: '<p>test</p>',
+});
+
+export const generateUpdateVisibilityApiResponse = (
+  blockId,
+  visibility,
+) => ({
+  id: blockId,
+  metadata: { display_name: 'test', course_staff_only: visibility },
+});
+
+export const generateNewPageApiResponse = () => ({
+  locator: 'mOckID2',
+  courseKey: courseId,
+});
+
+export const getStatusValue = (status) => {
+  switch (status) {
+    case RequestStatus.DENIED:
+      return 403;
+    default:
+      return 200;
+  }
+};
diff --git a/src/custom-pages/index.js b/src/custom-pages/index.js
new file mode 100644
index 0000000000..0e44500419
--- /dev/null
+++ b/src/custom-pages/index.js
@@ -0,0 +1 @@
+export { default } from './CustomPages';
diff --git a/src/custom-pages/messages.js b/src/custom-pages/messages.js
new file mode 100644
index 0000000000..60e8da9e04
--- /dev/null
+++ b/src/custom-pages/messages.js
@@ -0,0 +1,110 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  heading: {
+    id: 'course-authoring.custom-pages.heading',
+    defaultMessage: 'Custom Pages',
+  },
+  errorAlertMessage: {
+    id: 'course-authoring.custom-pages.errorAlert.message',
+    defaultMessage: 'Unable to {actionName} page. Please try again.',
+  },
+  note: {
+    id: 'course-authoring.custom-pages.note',
+    defaultMessage: `Note: Pages are publicly visible. If users know the URL
+      of a page, they can view the page even if they are not registered for
+      or logged in to your course.`,
+  },
+  addPageHeaderLabel: {
+    id: 'course-authoring.custom-pages.header.addPage.label',
+    defaultMessage: 'New page',
+  },
+  viewLiveLabel: {
+    id: 'course-authoring.custom-pages.header.viewLive.label',
+    defaultMessage: 'View live',
+  },
+  pageExplanationHeader: {
+    id: 'course-authoring.custom-pages.pageExplanation.header',
+    defaultMessage: 'What are pages?',
+  },
+  pageExplanationBody: {
+    id: 'course-authoring.custom-pages.pageExplanation.body',
+    defaultMessage: `Pages are listed horizontally at the top of your course. Default pages (Home, Course, Discussion, Wiki, and Progress)
+      are followed by textbooks and custom pages that you create.`,
+  },
+  customPagesExplanationHeader: {
+    id: 'course-authoring.custom-pages.customPagesExplanation.header',
+    defaultMessage: 'Custom pages',
+  },
+  customPagesExplanationBody: {
+    id: 'course-authoring.custom-pages.customPagesExplanation.body',
+    defaultMessage: `You can create and edit custom pages to probide students with additional course content. For example, you can create
+      pages for the grading policy, course slide, and a course calendar.`,
+  },
+  studentViewExplanationHeader: {
+    id: 'course-authoring.custom-pages.studentViewExplanation.header',
+    defaultMessage: 'How do pages look to students in my course?',
+  },
+  studentViewExplanationBody: {
+    id: 'course-authoring.custom-pages.studentViewExplanation.body',
+    defaultMessage: 'Students see the default and custom pages at the top of your course and use the links to navigate.',
+  },
+  studentViewExampleButton: {
+    id: 'course-authoring.custom-pages.studentViewExampleButton.label',
+    defaultMessage: 'See an example',
+  },
+  studentViewModalTitle: {
+    id: 'course-authoring.custom-pages.studentViewModal.title',
+    defaultMessage: 'Pages in Your Course',
+  },
+  studentViewModalBody: {
+    id: 'course-authoring.custom-pages.studentViewModal.Body',
+    defaultMessage: "Pages appear in your course's top navigation bar. The default pages (Home, Course, Discussion, Wiki, and Progress) are followed by textbooks and custom pages.",
+  },
+  newPageTitle: {
+    id: 'course-authoring.custom-pages.page.newPage.title',
+    defaultMessage: 'Empty',
+  },
+  editTooltipContent: {
+    id: 'course-authoring.custom-pages.editTooltip.content',
+    defaultMessage: 'Edit',
+  },
+  deleteTooltipContent: {
+    id: 'course-authoring.custom-pages.deleteTooltip.content',
+    defaultMessage: 'Delete',
+  },
+  visibilityTooltipContent: {
+    id: 'course-authoring.custom-pages.visibilityTooltip.content',
+    defaultMessage: 'Hide/show page from learners',
+  },
+  addPageBodyLabel: {
+    id: 'course-authoring.custom-pages.body.addPage.label',
+    defaultMessage: 'Add a new page',
+  },
+  addingPageBodyLabel: {
+    id: 'course-authoring.custom-pages.body.addingPage.label',
+    defaultMessage: 'Adding a new page',
+  },
+  deleteConfirmationTitle: {
+    id: 'course-authoring.custom-pages..deleteConfirmation.title',
+    defaultMessage: 'Delete Page Confirmation',
+  },
+  deleteConfirmationMessage: {
+    id: 'course-authoring.custom-pages..deleteConfirmation.message',
+    defaultMessage: 'Are you sure you want to delete this page? This action cannot be undone.',
+  },
+  deletePageLabel: {
+    id: 'course-authoring.custom-pages.deleteConfirmation.deletePage.label',
+    defaultMessage: 'Delete',
+  },
+  deletingPageBodyLabel: {
+    id: 'course-authoring.custom-pages.deleteConfirmation.deletingPage.label',
+    defaultMessage: 'Deleting',
+  },
+  cancelButtonLabel: {
+    id: 'course-authoring.custom-pages.deleteConfirmation.cancelButton.label',
+    defaultMessage: 'Cancel',
+  },
+});
+
+export default messages;
diff --git a/src/custom.d.ts b/src/custom.d.ts
new file mode 100644
index 0000000000..63c5b2cf57
--- /dev/null
+++ b/src/custom.d.ts
@@ -0,0 +1,14 @@
+declare module '*.svg' {
+  const content: string;
+  export default content;
+}
+
+declare module '*.png' {
+  const content: string;
+  export default content;
+}
+
+declare module '*.json' {
+  const value: any;
+  export default value;
+}
diff --git a/src/data/api.js b/src/data/api.js
index 846fa2d293..61a0719fb9 100644
--- a/src/data/api.js
+++ b/src/data/api.js
@@ -1,7 +1,15 @@
-/* eslint-disable import/prefer-default-export */
 import { camelCaseObject, getConfig } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 
+const getStudioBaseUrl = () => getConfig().STUDIO_BASE_URL;
+
+export const getApiWaffleFlagsUrl = (courseId) => {
+  const baseUrl = getStudioBaseUrl();
+  const apiPath = '/api/contentstore/v1/course_waffle_flags';
+
+  return courseId ? `${baseUrl}${apiPath}/${courseId}` : `${baseUrl}${apiPath}`;
+};
+
 function normalizeCourseDetail(data) {
   return {
     id: data.course_id,
@@ -9,9 +17,16 @@ function normalizeCourseDetail(data) {
   };
 }
 
-export async function getCourseDetail(courseId) {
+export async function getCourseDetail(courseId, username) {
+  const { data } = await getAuthenticatedHttpClient()
+    .get(`${getConfig().LMS_BASE_URL}/api/courses/v1/courses/${courseId}?username=${username}`);
+
+  return normalizeCourseDetail(data);
+}
+
+export async function getWaffleFlags(courseId) {
   const { data } = await getAuthenticatedHttpClient()
-    .get(`${getConfig().LMS_BASE_URL}/api/courses/v1/courses/${courseId}`);
+    .get(getApiWaffleFlagsUrl(courseId));
 
   return normalizeCourseDetail(data);
 }
diff --git a/src/data/constants.js b/src/data/constants.js
index 2feca441c8..2c63f26289 100644
--- a/src/data/constants.js
+++ b/src/data/constants.js
@@ -1,13 +1,57 @@
-/* eslint-disable import/prefer-default-export */
-
 /**
  * Enum for request status.
  * @readonly
  * @enum {string}
  */
-export const RequestStatus = {
+export const RequestStatus = /** @type {const} */ ({
   IN_PROGRESS: 'in-progress',
   SUCCESSFUL: 'successful',
   FAILED: 'failed',
   DENIED: 'denied',
-};
+  PENDING: 'pending',
+  CLEAR: 'clear',
+  PARTIAL: 'partial',
+  PARTIAL_FAILURE: 'partial failure',
+  NOT_FOUND: 'not-found',
+});
+
+/**
+ * Team sizes enum
+ * @enum
+ * @type {{MIN: number, MAX: number, DEFAULT: number}}
+ */
+export const TeamSizes = /** @type {const} */ ({
+  DEFAULT: 5,
+  MIN: 1,
+  MAX: 500,
+});
+
+/**
+ * Group types enum
+ * @enum
+ * @type {{PRIVATE_MANAGED: string, PUBLIC_MANAGED: string, OPEN: string}}
+ */
+export const GroupTypes = /** @type {const} */ ({
+  OPEN: 'open',
+  PUBLIC_MANAGED: 'public_managed',
+  PRIVATE_MANAGED: 'private_managed',
+  OPEN_MANAGED: 'open_managed',
+});
+
+export const DivisionSchemes = /** @type {const} */ ({
+  NONE: 'none',
+  COHORT: 'cohort',
+});
+
+export const VisibilityTypes = /** @type {const} */ ({
+  GATED: 'gated',
+  LIVE: 'live',
+  STAFF_ONLY: 'staff_only',
+  HIDE_AFTER_DUE: 'hide_after_due',
+  UNSCHEDULED: 'unscheduled',
+  NEEDS_ATTENTION: 'needs_attention',
+});
+
+export const TOTAL_LENGTH_KEY = 'total-length';
+
+export const MAX_TOTAL_LENGTH = 65;
diff --git a/src/data/selectors.js b/src/data/selectors.js
new file mode 100644
index 0000000000..ad41d0852b
--- /dev/null
+++ b/src/data/selectors.js
@@ -0,0 +1 @@
+export const getWaffleFlags = (state) => state.courseDetail?.waffleFlags;
diff --git a/src/data/services/ExamsApiService.js b/src/data/services/ExamsApiService.js
new file mode 100644
index 0000000000..ec9b573209
--- /dev/null
+++ b/src/data/services/ExamsApiService.js
@@ -0,0 +1,36 @@
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { getConfig } from '@edx/frontend-platform';
+import { convertObjectToSnakeCase } from '../../utils';
+
+class ExamsApiService {
+  static isAvailable() {
+    return !!this.getExamsBaseUrl();
+  }
+
+  static getExamsBaseUrl() {
+    return getConfig().EXAMS_BASE_URL;
+  }
+
+  static getExamConfigurationUrl(courseId) {
+    return `${ExamsApiService.getExamsBaseUrl()}/api/v1/configs/course_id/${courseId}`;
+  }
+
+  static getAvailableProviders(org) {
+    const apiClient = getAuthenticatedHttpClient();
+    const providersUrl = `${ExamsApiService.getExamsBaseUrl()}/api/v1/providers${org ? `?org=${org}` : ''}`;
+    return apiClient.get(providersUrl);
+  }
+
+  static getCourseExamConfiguration(courseId) {
+    const apiClient = getAuthenticatedHttpClient();
+    return apiClient.get(this.getExamConfigurationUrl(courseId));
+  }
+
+  static saveCourseExamConfiguration(courseId, dataToSave) {
+    const snakecaseDataToSave = convertObjectToSnakeCase(dataToSave, true);
+    const apiClient = getAuthenticatedHttpClient();
+    return apiClient.patch(this.getExamConfigurationUrl(courseId), snakecaseDataToSave);
+  }
+}
+
+export default ExamsApiService;
diff --git a/src/data/services/StudioApiService.js b/src/data/services/StudioApiService.js
index f83b3b7d13..9fa04cafa9 100644
--- a/src/data/services/StudioApiService.js
+++ b/src/data/services/StudioApiService.js
@@ -5,11 +5,11 @@ ensureConfig([
   'STUDIO_BASE_URL',
 ], 'Studio API service');
 
-const studioBaseUrl = getConfig().STUDIO_BASE_URL;
+const getStudioBaseUrl = () => getConfig().STUDIO_BASE_URL;
 
 class StudioApiService {
   static getProctoredExamSettingsUrl(courseID) {
-    return `${studioBaseUrl}/api/contentstore/v1/proctored_exam_settings/${courseID}`;
+    return `${getStudioBaseUrl()}/api/contentstore/v1/proctored_exam_settings/${courseID}`;
   }
 
   static getProctoredExamSettingsData(courseID) {
@@ -25,7 +25,7 @@ class StudioApiService {
   }
 
   static getStudioCourseRunUrl(courseID) {
-    return `${studioBaseUrl}/course/${courseID}`;
+    return `${getStudioBaseUrl()}/course/${courseID}`;
   }
 }
 
diff --git a/src/data/slice.js b/src/data/slice.js
index 574ff318a9..5953d6d3fa 100644
--- a/src/data/slice.js
+++ b/src/data/slice.js
@@ -1,9 +1,7 @@
 /* eslint-disable no-param-reassign */
 import { createSlice } from '@reduxjs/toolkit';
 
-export const LOADING = 'LOADING';
 export const LOADED = 'LOADED';
-export const FAILED = 'FAILED';
 
 const slice = createSlice({
   name: 'courseDetail',
@@ -11,6 +9,24 @@ const slice = createSlice({
     courseId: null,
     status: null,
     canChangeProvider: null,
+    waffleFlags: {
+      useNewHomePage: true,
+      useNewCustomPages: true,
+      useNewScheduleDetailsPage: true,
+      useNewAdvancedSettingsPage: true,
+      useNewGradingPage: true,
+      useNewUpdatesPage: true,
+      useNewImportPage: false,
+      useNewExportPage: true,
+      useNewFilesUploadsPage: true,
+      useNewVideoUploadsPage: true,
+      useNewCourseOutlinePage: true,
+      useNewUnitPage: false,
+      useNewCourseTeamPage: true,
+      useNewCertificatesPage: true,
+      useNewTextbooksPage: true,
+      useNewGroupConfigurationsPage: true,
+    },
   },
   reducers: {
     updateStatus: (state, { payload }) => {
@@ -20,12 +36,16 @@ const slice = createSlice({
     updateCanChangeProviders: (state, { payload }) => {
       state.canChangeProviders = payload.canChangeProviders;
     },
+    fetchWaffleFlagsSuccess: (state, { payload }) => {
+      state.waffleFlags = payload.waffleFlags;
+    },
   },
 });
 
 export const {
   updateStatus,
   updateCanChangeProviders,
+  fetchWaffleFlagsSuccess,
 } = slice.actions;
 
 export const {
diff --git a/src/data/thunks.js b/src/data/thunks.js
index 5de8142a51..9c30693161 100644
--- a/src/data/thunks.js
+++ b/src/data/thunks.js
@@ -1,29 +1,41 @@
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import { addModel } from '../generic/model-store';
-import { getCourseDetail } from './api';
+import { getCourseDetail, getWaffleFlags } from './api';
 import {
   updateStatus,
   updateCanChangeProviders,
-  LOADING,
-  LOADED,
-  FAILED,
+  fetchWaffleFlagsSuccess,
 } from './slice';
+import { RequestStatus } from './constants';
 
-/* eslint-disable import/prefer-default-export */
 export function fetchCourseDetail(courseId) {
   return async (dispatch) => {
-    dispatch(updateStatus({ courseId, status: LOADING }));
+    dispatch(updateStatus({ courseId, status: RequestStatus.IN_PROGRESS }));
 
     try {
-      const courseDetail = await getCourseDetail(courseId);
-      dispatch(updateStatus({ courseId, status: LOADED }));
+      const courseDetail = await getCourseDetail(courseId, getAuthenticatedUser().username);
+      dispatch(updateStatus({ courseId, status: RequestStatus.SUCCESSFUL }));
 
       dispatch(addModel({ modelType: 'courseDetails', model: courseDetail }));
       dispatch(updateCanChangeProviders({
         canChangeProviders: getAuthenticatedUser().administrator || new Date(courseDetail.start) > new Date(),
       }));
     } catch (error) {
-      dispatch(updateStatus({ courseId, status: FAILED }));
+      if (error.response && error.response.status === 404) {
+        dispatch(updateStatus({ courseId, status: RequestStatus.NOT_FOUND }));
+      } else {
+        dispatch(updateStatus({ courseId, status: RequestStatus.FAILED }));
+      }
     }
   };
 }
+
+export function fetchWaffleFlags(courseId) {
+  return async (dispatch) => {
+    dispatch(updateStatus({ courseId, status: RequestStatus.IN_PROGRESS }));
+
+    const waffleFlags = await getWaffleFlags(courseId);
+    dispatch(updateStatus({ courseId, status: RequestStatus.SUCCESSFUL }));
+    dispatch(fetchWaffleFlagsSuccess({ waffleFlags }));
+  };
+}
diff --git a/src/editors/Editor.tsx b/src/editors/Editor.tsx
new file mode 100644
index 0000000000..8e52448242
--- /dev/null
+++ b/src/editors/Editor.tsx
@@ -0,0 +1,68 @@
+// Note: there is no Editor.test.tsx. This component only works together with
+// <EditorPage> as its parent, so they are tested together in EditorPage.test.tsx
+import React from 'react';
+import { useDispatch } from 'react-redux';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+
+import messages from './messages';
+import * as hooks from './hooks';
+
+import supportedEditors from './supportedEditors';
+import type { EditorComponent } from './EditorComponent';
+import { useEditorContext } from './EditorContext';
+
+export interface Props extends EditorComponent {
+  blockType: string;
+  blockId: string | null;
+  learningContextId: string | null;
+  lmsEndpointUrl: string | null;
+  studioEndpointUrl: string | null;
+  fullScreen?: boolean;
+}
+
+const Editor: React.FC<Props> = ({
+  learningContextId,
+  blockType,
+  blockId,
+  lmsEndpointUrl,
+  studioEndpointUrl,
+  onClose = null,
+  returnFunction = null,
+}) => {
+  const dispatch = useDispatch();
+  hooks.initializeApp({
+    dispatch,
+    data: {
+      blockId,
+      blockType,
+      learningContextId,
+      lmsEndpointUrl,
+      studioEndpointUrl,
+    },
+  });
+  const { fullScreen } = useEditorContext();
+
+  const EditorComponent = supportedEditors[blockType];
+  const innerEditor = (EditorComponent !== undefined)
+    ? <EditorComponent {...{ onClose, returnFunction }} />
+    : <FormattedMessage {...messages.couldNotFindEditor} />;
+
+  if (fullScreen) {
+    return (
+      <div
+        className="d-flex flex-column"
+      >
+        <div
+          className="pgn__modal-fullscreen h-100"
+          role="dialog"
+          aria-label={blockType}
+        >
+          {innerEditor}
+        </div>
+      </div>
+    );
+  }
+  return innerEditor;
+};
+
+export default Editor;
diff --git a/src/editors/EditorComponent.ts b/src/editors/EditorComponent.ts
new file mode 100644
index 0000000000..e670ff6f5d
--- /dev/null
+++ b/src/editors/EditorComponent.ts
@@ -0,0 +1,6 @@
+/** Shared interface that all Editor components (like ProblemEditor) adhere to */
+export interface EditorComponent {
+  onClose: (() => void) | null;
+  // TODO: get a better type for the 'result' here
+  returnFunction?: (() => (result: any) => void) | null;
+}
diff --git a/src/editors/EditorContainer.test.jsx b/src/editors/EditorContainer.test.jsx
new file mode 100644
index 0000000000..436f81c3c4
--- /dev/null
+++ b/src/editors/EditorContainer.test.jsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+import EditorContainer from './EditorContainer';
+
+const mockPathname = '/editor/';
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'), // use actual for all non-hook parts
+  useParams: () => ({
+    blockId: 'company-id1',
+    blockType: 'html',
+  }),
+  useLocation: () => ({
+    pathname: mockPathname,
+  }),
+  useSearchParams: () => [{
+    get: () => 'lb:Axim:TEST:html:571fe018-f3ce-45c9-8f53-5dafcb422fdd',
+  }],
+}));
+
+jest.mock('@edx/frontend-platform/i18n', () => ({
+  ...jest.requireActual('@edx/frontend-platform/i18n'),
+  useIntl: () => ({
+    formatMessage: (message) => message.defaultMessage,
+  }),
+}));
+
+const props = { learningContextId: 'cOuRsEId' };
+
+describe('Editor Container', () => {
+  describe('snapshots', () => {
+    test('rendering correctly with expected Input', () => {
+      expect(shallow(<EditorContainer {...props} />).snapshot).toMatchSnapshot();
+    });
+  });
+});
diff --git a/src/editors/EditorContainer.tsx b/src/editors/EditorContainer.tsx
new file mode 100644
index 0000000000..c3962cf3b6
--- /dev/null
+++ b/src/editors/EditorContainer.tsx
@@ -0,0 +1,88 @@
+import React from 'react';
+import { useLocation, useParams, useSearchParams } from 'react-router-dom';
+import { getConfig } from '@edx/frontend-platform';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Button, Hyperlink } from '@openedx/paragon';
+import { Warning as WarningIcon } from '@openedx/paragon/icons';
+
+import EditorPage from './EditorPage';
+import AlertMessage from '../generic/alert-message';
+import messages from './messages';
+import { getLibraryId } from '../generic/key-utils';
+import { createCorrectInternalRoute } from '../utils';
+
+interface Props {
+  /** Course ID or Library ID */
+  learningContextId: string;
+  /** Event handler sometimes called when user cancels out of the editor page */
+  onClose?: (prevPath?: string) => void;
+  /**
+   * Event handler called after when user saves their changes using an editor
+   * and sometimes called when user cancels the editor, instead of onClose.
+   * If changes are saved, newData will be present, and if it was cancellation,
+   * newData will be undefined.
+   * TODO: clean this up so there are separate onCancel and onSave callbacks,
+   * and they are used consistently instead of this mess.
+   */
+  returnFunction?: (prevPath?: string) => (newData: Record<string, any> | undefined) => void;
+}
+
+const EditorContainer: React.FC<Props> = ({
+  learningContextId,
+  onClose,
+  returnFunction,
+}) => {
+  const intl = useIntl();
+  const { blockType, blockId } = useParams();
+  const location = useLocation();
+  const [searchParams] = useSearchParams();
+  const upstreamLibRef = searchParams.get('upstreamLibRef');
+
+  if (blockType === undefined || blockId === undefined) {
+    // istanbul ignore next - This shouldn't be possible; it's just here to satisfy the type checker.
+    return <div>Error: missing URL parameters</div>;
+  }
+
+  const getLibraryBlockUrl = () => {
+    if (!upstreamLibRef) {
+      return '';
+    }
+    const libId = getLibraryId(upstreamLibRef);
+    return createCorrectInternalRoute(`/library/${libId}/components?usageKey=${upstreamLibRef}`);
+  };
+
+  return (
+    <div className="editor-page">
+      <AlertMessage
+        className="m-3"
+        show={upstreamLibRef}
+        variant="warning"
+        icon={WarningIcon}
+        title={intl.formatMessage(messages.libraryBlockEditWarningTitle)}
+        description={intl.formatMessage(messages.libraryBlockEditWarningDescription)}
+        actions={[
+          <Button
+            destination={getLibraryBlockUrl()}
+            target="_blank"
+            rel="noopener noreferrer"
+            showLaunchIcon
+            as={Hyperlink}
+          >
+            {intl.formatMessage(messages.libraryBlockEditWarningLink)}
+          </Button>,
+        ]}
+      />
+      <EditorPage
+        courseId={learningContextId}
+        blockType={blockType}
+        blockId={blockId}
+        studioEndpointUrl={getConfig().STUDIO_BASE_URL}
+        lmsEndpointUrl={getConfig().LMS_BASE_URL}
+        onClose={onClose ? () => onClose(location.state?.from) : null}
+        returnFunction={returnFunction ? () => returnFunction(location.state?.from) : null}
+      />
+    </div>
+  );
+};
+
+export default EditorContainer;
diff --git a/src/editors/EditorContext.tsx b/src/editors/EditorContext.tsx
new file mode 100644
index 0000000000..e43b60a815
--- /dev/null
+++ b/src/editors/EditorContext.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+
+/**
+ * Shared context that's used by all our editors.
+ *
+ * Note: we're in the process of moving things from redux into this.
+ */
+export interface EditorContext {
+  learningContextId: string;
+  /**
+   * When editing components in the libraries part of the Authoring MFE, we show
+   * the editors in a modal (fullScreen = false). This is the preferred approach
+   * so that authors can see context behind the modal.
+   * However, when making edits from the legacy course view, we display the
+   * editors in a fullscreen view. This approach is deprecated.
+   */
+  fullScreen: boolean;
+}
+
+const context = React.createContext<EditorContext | undefined>(undefined);
+
+/** Hook to get the editor context (shared context) */
+export function useEditorContext() {
+  const ctx = React.useContext(context);
+  if (ctx === undefined) {
+    /* istanbul ignore next */
+    throw new Error('This component needs to be wrapped in <EditorContextProvider>');
+  }
+  return ctx;
+}
+
+export const EditorContextProvider: React.FC<{
+  children: React.ReactNode,
+  learningContextId: string;
+  fullScreen: boolean;
+}> = ({ children, ...contextData }) => {
+  const ctx: EditorContext = React.useMemo(() => ({ ...contextData }), []);
+  return <context.Provider value={ctx}>{children}</context.Provider>;
+};
diff --git a/src/editors/EditorPage.test.tsx b/src/editors/EditorPage.test.tsx
new file mode 100644
index 0000000000..4ae9817d3b
--- /dev/null
+++ b/src/editors/EditorPage.test.tsx
@@ -0,0 +1,98 @@
+import { snakeCaseObject } from '@edx/frontend-platform';
+import {
+  render,
+  screen,
+  initializeMocks,
+} from '../testUtils';
+import editorCmsApi from './data/services/cms/api';
+
+import EditorPage from './EditorPage';
+
+// Mock this plugins component:
+jest.mock('frontend-components-tinymce-advanced-plugins', () => ({ a11ycheckerCss: '' }));
+// Always mock out the "fetch course images" endpoint:
+jest.spyOn(editorCmsApi, 'fetchCourseImages').mockImplementation(async () => ( // eslint-disable-next-line
+  { data: { assets: [], start: 0, end: 0, page: 0, pageSize: 50, totalCount: 0 } }
+));
+// Mock out the 'get ancestors' API:
+jest.spyOn(editorCmsApi, 'fetchByUnitId').mockImplementation(async () => ({
+  status: 200,
+  data: {
+    ancestors: [{
+      id: 'block-v1:Org+TS100+24+type@vertical+block@parent',
+      display_name: 'You-Knit? The Test Unit',
+      category: 'vertical',
+      has_children: true,
+    }],
+  },
+}));
+
+const defaultPropsHtml = {
+  blockId: 'block-v1:Org+TS100+24+type@html+block@123456html',
+  blockType: 'html',
+  courseId: 'course-v1:Org+TS100+24',
+  lmsEndpointUrl: 'http://lms.test.none/',
+  studioEndpointUrl: 'http://cms.test.none/',
+  onClose: jest.fn(),
+  fullScreen: false,
+};
+const fieldsHtml = {
+  displayName: 'Introduction to Testing',
+  data: '<p>This is a text component which uses <strong>HTML</strong>.</p>',
+  metadata: { displayName: 'Introduction to Testing' },
+};
+
+describe('EditorPage', () => {
+  beforeEach(() => {
+    initializeMocks();
+  });
+
+  test('it can display the Text (html) editor in a modal', async () => {
+    jest.spyOn(editorCmsApi, 'fetchBlockById').mockImplementationOnce(async () => (
+      { status: 200, data: snakeCaseObject(fieldsHtml) }
+    ));
+
+    render(<EditorPage {...defaultPropsHtml} />);
+
+    // Then the editor should open
+    expect(await screen.findByRole('heading', { name: /Introduction to Testing/ })).toBeInTheDocument();
+
+    const modalElement = screen.getByRole('dialog');
+    expect(modalElement.classList).toContain('pgn__modal');
+    expect(modalElement.classList).toContain('pgn__modal-xl');
+    expect(modalElement.classList).not.toContain('pgn__modal-fullscreen');
+  });
+
+  test('it can display the Text (html) editor as a full page (when coming from the legacy UI)', async () => {
+    jest.spyOn(editorCmsApi, 'fetchBlockById').mockImplementationOnce(async () => (
+      { status: 200, data: snakeCaseObject(fieldsHtml) }
+    ));
+
+    render(<EditorPage {...defaultPropsHtml} fullScreen />);
+
+    // Then the editor should open
+    expect(await screen.findByRole('heading', { name: /Introduction to Testing/ })).toBeInTheDocument();
+
+    const modalElement = screen.getByRole('dialog');
+    expect(modalElement.classList).toContain('pgn__modal-fullscreen');
+    expect(modalElement.classList).not.toContain('pgn__modal');
+    expect(modalElement.classList).not.toContain('pgn__modal-xl');
+  });
+
+  test('it shows an error message if there is no corresponding editor', async () => {
+    // We can edit 'html', 'problem', and 'video' blocks.
+    // But if we try to edit some other type, say 'fake', we should get an error:
+    jest.spyOn(editorCmsApi, 'fetchBlockById').mockImplementationOnce(async () => ( // eslint-disable-next-line
+      { status: 200, data: { display_name: 'Fake Un-editable Block', category: 'fake', metadata: {}, data: '' } }
+    ));
+
+    const defaultPropsFake = {
+      ...defaultPropsHtml,
+      blockId: 'block-v1:Org+TS100+24+type@fake+block@123456fake',
+      blockType: 'fake',
+    };
+    render(<EditorPage {...defaultPropsFake} />);
+
+    expect(await screen.findByText('Error: Could Not find Editor')).toBeInTheDocument();
+  });
+});
diff --git a/src/editors/EditorPage.tsx b/src/editors/EditorPage.tsx
new file mode 100644
index 0000000000..a0dd365954
--- /dev/null
+++ b/src/editors/EditorPage.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+
+import store from './data/store';
+import Editor from './Editor';
+import ErrorBoundary from './sharedComponents/ErrorBoundary';
+import { EditorComponent } from './EditorComponent';
+import { EditorContextProvider } from './EditorContext';
+
+interface Props extends EditorComponent {
+  blockId?: string;
+  blockType: string;
+  courseId: string;
+  lmsEndpointUrl?: string;
+  studioEndpointUrl?: string;
+  fullScreen?: boolean;
+  children?: never;
+}
+
+/**
+ * Wraps the editors with the redux state provider.
+ * TODO: refactor some of this to be React Context and React Query
+ */
+const EditorPage: React.FC<Props> = ({
+  courseId,
+  blockType,
+  blockId = null,
+  lmsEndpointUrl = null,
+  studioEndpointUrl = null,
+  onClose = null,
+  returnFunction = null,
+  fullScreen = true,
+}) => (
+  <Provider store={store}>
+    <ErrorBoundary
+      {...{
+        learningContextId: courseId,
+        studioEndpointUrl,
+      }}
+    >
+      <EditorContextProvider fullScreen={fullScreen} learningContextId={courseId}>
+        <Editor
+          {...{
+            onClose,
+            learningContextId: courseId,
+            blockType,
+            blockId,
+            lmsEndpointUrl,
+            studioEndpointUrl,
+            returnFunction,
+          }}
+        />
+      </EditorContextProvider>
+    </ErrorBoundary>
+  </Provider>
+);
+
+export default EditorPage;
diff --git a/src/editors/Placeholder.jsx b/src/editors/Placeholder.jsx
new file mode 100644
index 0000000000..33cebdb51c
--- /dev/null
+++ b/src/editors/Placeholder.jsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+const Placeholder = () => (
+  <div className="Placeholder">
+    <h1>
+      Under Construction
+      <br />
+      Coming Soon
+    </h1>
+  </div>
+);
+
+export default Placeholder;
diff --git a/src/editors/Placeholder.test.jsx b/src/editors/Placeholder.test.jsx
new file mode 100644
index 0000000000..186bc9d781
--- /dev/null
+++ b/src/editors/Placeholder.test.jsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import TestRenderer from 'react-test-renderer';
+import { AppContext } from '@edx/frontend-platform/react';
+import { Context as ResponsiveContext } from 'react-responsive';
+
+import Placeholder from './Placeholder';
+
+describe('<Placeholder />', () => {
+  it('renders correctly', () => {
+    const component = (
+      <ResponsiveContext.Provider value={{ width: 1280 }}>
+        <IntlProvider locale="en" messages={{}}>
+          <AppContext.Provider
+            value={{
+              authenticatedUser: null,
+              config: {
+                LMS_BASE_URL: process.env.LMS_BASE_URL,
+                SITE_NAME: process.env.SITE_NAME,
+                LOGIN_URL: process.env.LOGIN_URL,
+                LOGOUT_URL: process.env.LOGOUT_URL,
+                LOGO_URL: process.env.LOGO_URL,
+              },
+            }}
+          >
+            <Placeholder />
+          </AppContext.Provider>
+        </IntlProvider>
+      </ResponsiveContext.Provider>
+    );
+
+    const wrapper = TestRenderer.create(component);
+
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+});
diff --git a/src/editors/VideoSelector.jsx b/src/editors/VideoSelector.jsx
new file mode 100644
index 0000000000..4711b76cfc
--- /dev/null
+++ b/src/editors/VideoSelector.jsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import { useDispatch } from 'react-redux';
+import PropTypes from 'prop-types';
+import VideoGallery from './containers/VideoGallery';
+import * as hooks from './hooks';
+
+const VideoSelector = ({
+  blockId,
+  learningContextId,
+  lmsEndpointUrl,
+  studioEndpointUrl,
+}) => {
+  const dispatch = useDispatch();
+  hooks.initializeApp({
+    dispatch,
+    data: {
+      blockId,
+      blockType: 'video',
+      learningContextId,
+      lmsEndpointUrl,
+      studioEndpointUrl,
+    },
+  });
+  return (
+    <VideoGallery />
+  );
+};
+
+VideoSelector.propTypes = {
+  blockId: PropTypes.string.isRequired,
+  learningContextId: PropTypes.string.isRequired,
+  lmsEndpointUrl: PropTypes.string.isRequired,
+  studioEndpointUrl: PropTypes.string.isRequired,
+};
+
+export default VideoSelector;
diff --git a/src/editors/VideoSelector.test.jsx b/src/editors/VideoSelector.test.jsx
new file mode 100644
index 0000000000..f3d0e60ae3
--- /dev/null
+++ b/src/editors/VideoSelector.test.jsx
@@ -0,0 +1,41 @@
+import 'CourseAuthoring/editors/setupEditorTest';
+import React from 'react';
+import { useDispatch } from 'react-redux';
+import { shallow } from '@edx/react-unit-test-utils';
+import * as hooks from './hooks';
+import VideoSelector from './VideoSelector';
+
+jest.mock('./hooks', () => ({
+  initializeApp: jest.fn(),
+}));
+
+jest.mock('./containers/VideoGallery', () => 'VideoGallery');
+
+const props = {
+  blockId: 'block-v1:edX+DemoX+Demo_Course+type@html+block@030e35c4756a4ddc8d40b95fbbfff4d4',
+  learningContextId: 'course-v1:edX+DemoX+Demo_Course',
+  lmsEndpointUrl: 'evenfakerurl.com',
+  studioEndpointUrl: 'fakeurl.com',
+};
+
+const initData = {
+  blockType: 'video',
+  ...props,
+};
+
+describe('Video Selector', () => {
+  describe('render', () => {
+    test('rendering correctly with expected Input', () => {
+      expect(shallow(<VideoSelector {...props} />).snapshot).toMatchSnapshot();
+    });
+  });
+  describe('behavior', () => {
+    it('calls initializeApp hook with dispatch, and passed data', () => {
+      shallow(<VideoSelector {...props} />);
+      expect(hooks.initializeApp).toHaveBeenCalledWith({
+        dispatch: useDispatch(),
+        data: initData,
+      });
+    });
+  });
+});
diff --git a/src/editors/VideoSelectorPage.jsx b/src/editors/VideoSelectorPage.jsx
new file mode 100644
index 0000000000..0d9609b045
--- /dev/null
+++ b/src/editors/VideoSelectorPage.jsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+import PropTypes from 'prop-types';
+import ErrorBoundary from './sharedComponents/ErrorBoundary';
+import VideoSelector from './VideoSelector';
+import store from './data/store';
+
+const VideoSelectorPage = ({
+  blockId,
+  courseId,
+  lmsEndpointUrl,
+  studioEndpointUrl,
+}) => (
+  <Provider store={store}>
+    <ErrorBoundary
+      {...{
+        learningContextId: courseId,
+        studioEndpointUrl,
+      }}
+    >
+      <VideoSelector
+        {...{
+          blockId,
+          learningContextId: courseId,
+          lmsEndpointUrl,
+          studioEndpointUrl,
+        }}
+      />
+    </ErrorBoundary>
+  </Provider>
+);
+
+VideoSelectorPage.defaultProps = {
+  blockId: null,
+  courseId: null,
+  lmsEndpointUrl: null,
+  studioEndpointUrl: null,
+};
+
+VideoSelectorPage.propTypes = {
+  blockId: PropTypes.string,
+  courseId: PropTypes.string,
+  lmsEndpointUrl: PropTypes.string,
+  studioEndpointUrl: PropTypes.string,
+};
+
+export default VideoSelectorPage;
diff --git a/src/editors/VideoSelectorPage.test.jsx b/src/editors/VideoSelectorPage.test.jsx
new file mode 100644
index 0000000000..5f55f7c337
--- /dev/null
+++ b/src/editors/VideoSelectorPage.test.jsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+import VideoSelectorPage from './VideoSelectorPage';
+
+const props = {
+  blockId: 'block-v1:edX+DemoX+Demo_Course+type@html+block@030e35c4756a4ddc8d40b95fbbfff4d4',
+  courseId: 'course-v1:edX+DemoX+Demo_Course',
+  lmsEndpointUrl: 'evenfakerurl.com',
+  studioEndpointUrl: 'fakeurl.com',
+};
+
+jest.mock('react-redux', () => ({
+  Provider: 'Provider',
+  connect: (mapStateToProps, mapDispatchToProps) => (component) => ({
+    mapStateToProps,
+    mapDispatchToProps,
+    component,
+  }),
+}));
+jest.mock('./VideoSelector', () => 'VideoSelector');
+
+describe('Video Selector Page', () => {
+  describe('snapshots', () => {
+    test('rendering correctly with expected Input', () => {
+      expect(shallow(<VideoSelectorPage {...props} />).snapshot).toMatchSnapshot();
+    });
+    test('rendering with props to null', () => {
+      expect(shallow(<VideoSelectorPage />).snapshot).toMatchSnapshot();
+    });
+  });
+});
diff --git a/src/editors/__snapshots__/EditorContainer.test.jsx.snap b/src/editors/__snapshots__/EditorContainer.test.jsx.snap
new file mode 100644
index 0000000000..6344ed8bd4
--- /dev/null
+++ b/src/editors/__snapshots__/EditorContainer.test.jsx.snap
@@ -0,0 +1,66 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Editor Container snapshots rendering correctly with expected Input 1`] = `
+<div
+  className="editor-page"
+>
+  <AlertMessage
+    actions={
+      [
+        <ForwardRef
+          as={
+            {
+              "$$typeof": Symbol(react.forward_ref),
+              "defaultProps": {
+                "className": undefined,
+                "externalLinkAlternativeText": "in a new tab",
+                "externalLinkTitle": "Opens in a new tab",
+                "isInline": false,
+                "onClick": [Function],
+                "showLaunchIcon": true,
+                "target": "_self",
+                "variant": "default",
+              },
+              "propTypes": {
+                "children": [Function],
+                "className": [Function],
+                "destination": [Function],
+                "externalLinkAlternativeText": [Function],
+                "externalLinkTitle": [Function],
+                "isInline": [Function],
+                "onClick": [Function],
+                "showLaunchIcon": [Function],
+                "target": [Function],
+                "variant": [Function],
+              },
+              "render": [Function],
+            }
+          }
+          destination="/library/lib:Axim:TEST/components?usageKey=lb:Axim:TEST:html:571fe018-f3ce-45c9-8f53-5dafcb422fdd"
+          disabled={false}
+          rel="noopener noreferrer"
+          showLaunchIcon={true}
+          target="_blank"
+        >
+          View in Library
+        </ForwardRef>,
+      ]
+    }
+    className="m-3"
+    description="Edits made here will only be reflected in this course. These edits may be overridden later if updates are accepted."
+    icon={[Function]}
+    show="lb:Axim:TEST:html:571fe018-f3ce-45c9-8f53-5dafcb422fdd"
+    title="Editing Content from a Library"
+    variant="warning"
+  />
+  <EditorPage
+    blockId="company-id1"
+    blockType="html"
+    courseId="cOuRsEId"
+    lmsEndpointUrl="http://localhost:18000"
+    onClose={null}
+    returnFunction={null}
+    studioEndpointUrl="http://localhost:18010"
+  />
+</div>
+`;
diff --git a/src/editors/__snapshots__/Placeholder.test.jsx.snap b/src/editors/__snapshots__/Placeholder.test.jsx.snap
new file mode 100644
index 0000000000..f504cf0632
--- /dev/null
+++ b/src/editors/__snapshots__/Placeholder.test.jsx.snap
@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Placeholder /> renders correctly 1`] = `
+<div
+  className="Placeholder"
+>
+  <h1>
+    Under Construction
+    <br />
+    Coming Soon
+  </h1>
+</div>
+`;
diff --git a/src/editors/__snapshots__/VideoSelector.test.jsx.snap b/src/editors/__snapshots__/VideoSelector.test.jsx.snap
new file mode 100644
index 0000000000..d067c4a41b
--- /dev/null
+++ b/src/editors/__snapshots__/VideoSelector.test.jsx.snap
@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Video Selector render rendering correctly with expected Input 1`] = `<VideoGallery />`;
diff --git a/src/editors/__snapshots__/VideoSelectorPage.test.jsx.snap b/src/editors/__snapshots__/VideoSelectorPage.test.jsx.snap
new file mode 100644
index 0000000000..3a4ddcaaa1
--- /dev/null
+++ b/src/editors/__snapshots__/VideoSelectorPage.test.jsx.snap
@@ -0,0 +1,53 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Video Selector Page snapshots rendering correctly with expected Input 1`] = `
+<Provider
+  store={
+    {
+      "dispatch": [Function],
+      "getState": [Function],
+      "replaceReducer": [Function],
+      "subscribe": [Function],
+      Symbol(Symbol.observable): [Function],
+    }
+  }
+>
+  <ErrorBoundary
+    learningContextId="course-v1:edX+DemoX+Demo_Course"
+    studioEndpointUrl="fakeurl.com"
+  >
+    <VideoSelector
+      blockId="block-v1:edX+DemoX+Demo_Course+type@html+block@030e35c4756a4ddc8d40b95fbbfff4d4"
+      learningContextId="course-v1:edX+DemoX+Demo_Course"
+      lmsEndpointUrl="evenfakerurl.com"
+      studioEndpointUrl="fakeurl.com"
+    />
+  </ErrorBoundary>
+</Provider>
+`;
+
+exports[`Video Selector Page snapshots rendering with props to null 1`] = `
+<Provider
+  store={
+    {
+      "dispatch": [Function],
+      "getState": [Function],
+      "replaceReducer": [Function],
+      "subscribe": [Function],
+      Symbol(Symbol.observable): [Function],
+    }
+  }
+>
+  <ErrorBoundary
+    learningContextId={null}
+    studioEndpointUrl={null}
+  >
+    <VideoSelector
+      blockId={null}
+      learningContextId={null}
+      lmsEndpointUrl={null}
+      studioEndpointUrl={null}
+    />
+  </ErrorBoundary>
+</Provider>
+`;
diff --git a/src/editors/containers/EditorContainer/components/TitleHeader/EditConfirmationButtons.jsx b/src/editors/containers/EditorContainer/components/TitleHeader/EditConfirmationButtons.jsx
new file mode 100644
index 0000000000..6b53531cf2
--- /dev/null
+++ b/src/editors/containers/EditorContainer/components/TitleHeader/EditConfirmationButtons.jsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { IconButtonWithTooltip, ButtonGroup, Icon } from '@openedx/paragon';
+import { Check, Close } from '@openedx/paragon/icons';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import messages from './messages';
+
+const EditConfirmationButtons = ({
+  updateTitle,
+  cancelEdit,
+}) => {
+  const intl = useIntl();
+  return (
+    <ButtonGroup>
+      <IconButtonWithTooltip
+        tooltipPlacement="left"
+        tooltipContent={intl.formatMessage(messages.saveTitleEdit)}
+        src={Check}
+        iconAs={Icon}
+        onClick={updateTitle}
+      />
+      <IconButtonWithTooltip
+        tooltipPlacement="right"
+        tooltipContent={intl.formatMessage(messages.cancelTitleEdit)}
+        src={Close}
+        iconAs={Icon}
+        onClick={cancelEdit}
+      />
+    </ButtonGroup>
+  );
+};
+
+EditConfirmationButtons.propTypes = {
+  updateTitle: PropTypes.func.isRequired,
+  cancelEdit: PropTypes.func.isRequired,
+};
+
+export default EditConfirmationButtons;
diff --git a/src/editors/containers/EditorContainer/components/TitleHeader/EditConfirmationButtons.test.jsx b/src/editors/containers/EditorContainer/components/TitleHeader/EditConfirmationButtons.test.jsx
new file mode 100644
index 0000000000..e69ff16b5c
--- /dev/null
+++ b/src/editors/containers/EditorContainer/components/TitleHeader/EditConfirmationButtons.test.jsx
@@ -0,0 +1,19 @@
+import 'CourseAuthoring/editors/setupEditorTest';
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+import { formatMessage } from '../../../../testUtils';
+
+import EditConfirmationButtons from './EditConfirmationButtons';
+
+describe('EditConfirmationButtons', () => {
+  const props = {
+    intl: { formatMessage },
+    updateTitle: jest.fn().mockName('args.updateTitle'),
+    cancelEdit: jest.fn().mockName('args.cancelEdit'),
+  };
+  describe('snapshot', () => {
+    test('snapshot', () => {
+      expect(shallow(<EditConfirmationButtons {...props} />).snapshot).toMatchSnapshot();
+    });
+  });
+});
diff --git a/src/editors/containers/EditorContainer/components/TitleHeader/EditableHeader.jsx b/src/editors/containers/EditorContainer/components/TitleHeader/EditableHeader.jsx
new file mode 100644
index 0000000000..ba212f162c
--- /dev/null
+++ b/src/editors/containers/EditorContainer/components/TitleHeader/EditableHeader.jsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Form } from '@openedx/paragon';
+import EditConfirmationButtons from './EditConfirmationButtons';
+
+const EditableHeader = ({
+  handleChange,
+  updateTitle,
+  handleKeyDown,
+  inputRef,
+  localTitle,
+  cancelEdit,
+}) => (
+  <Form.Group onBlur={(e) => updateTitle(e)}>
+    <Form.Control
+      style={{ paddingInlineEnd: 'calc(1rem + 84px)' }}
+      autoFocus
+      trailingElement={<EditConfirmationButtons {...{ updateTitle, cancelEdit }} />}
+      onChange={handleChange}
+      onKeyDown={handleKeyDown}
+      placeholder="Title"
+      ref={inputRef}
+      value={localTitle}
+    />
+  </Form.Group>
+);
+EditableHeader.defaultProps = {
+  inputRef: null,
+};
+EditableHeader.propTypes = {
+  inputRef: PropTypes.oneOfType([
+    PropTypes.func,
+    // eslint-disable-next-line react/forbid-prop-types
+    PropTypes.shape({ current: PropTypes.any }),
+  ]),
+  handleChange: PropTypes.func.isRequired,
+  updateTitle: PropTypes.func.isRequired,
+  handleKeyDown: PropTypes.func.isRequired,
+  localTitle: PropTypes.string.isRequired,
+  cancelEdit: PropTypes.func.isRequired,
+};
+
+export const EditableHeaderInternal = EditableHeader; // For testing only
+export default EditableHeader;
diff --git a/src/editors/containers/EditorContainer/components/TitleHeader/EditableHeader.test.jsx b/src/editors/containers/EditorContainer/components/TitleHeader/EditableHeader.test.jsx
new file mode 100644
index 0000000000..349b89b5aa
--- /dev/null
+++ b/src/editors/containers/EditorContainer/components/TitleHeader/EditableHeader.test.jsx
@@ -0,0 +1,33 @@
+import 'CourseAuthoring/editors/setupEditorTest';
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+import { Form } from '@openedx/paragon';
+import { EditableHeaderInternal as EditableHeader } from './EditableHeader';
+import EditConfirmationButtons from './EditConfirmationButtons';
+
+describe('EditableHeader', () => {
+  const props = {
+    handleChange: jest.fn().mockName('args.handleChange'),
+    updateTitle: jest.fn().mockName('args.updateTitle'),
+    handleKeyDown: jest.fn().mockName('args.handleKeyDown'),
+    inputRef: jest.fn().mockName('args.inputRef'),
+    localTitle: 'test-title-text',
+    cancelEdit: jest.fn().mockName('args.cancelEdit'),
+  };
+  let el;
+  beforeEach(() => {
+    el = shallow(<EditableHeader {...props} />);
+  });
+
+  describe('snapshot', () => {
+    test('snapshot', () => {
+      expect(el.snapshot).toMatchSnapshot();
+    });
+    test('displays Edit Icon', () => {
+      const formControl = el.instance.findByType(Form.Control)[0];
+      expect(formControl.props.trailingElement).toMatchObject(
+        <EditConfirmationButtons updateTitle={props.updateTitle} cancelEdit={props.cancelEdit} />,
+      );
+    });
+  });
+});
diff --git a/src/editors/containers/EditorContainer/components/TitleHeader/__snapshots__/EditConfirmationButtons.test.jsx.snap b/src/editors/containers/EditorContainer/components/TitleHeader/__snapshots__/EditConfirmationButtons.test.jsx.snap
new file mode 100644
index 0000000000..5ad61806cb
--- /dev/null
+++ b/src/editors/containers/EditorContainer/components/TitleHeader/__snapshots__/EditConfirmationButtons.test.jsx.snap
@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EditConfirmationButtons snapshot snapshot 1`] = `
+<ButtonGroup>
+  <IconButtonWithTooltip
+    iconAs="Icon"
+    onClick={[MockFunction args.updateTitle]}
+    tooltipContent="Save"
+    tooltipPlacement="left"
+  />
+  <IconButtonWithTooltip
+    iconAs="Icon"
+    onClick={[MockFunction args.cancelEdit]}
+    src={[MockFunction icons.Close]}
+    tooltipContent="Cancel"
+    tooltipPlacement="right"
+  />
+</ButtonGroup>
+`;
diff --git a/src/editors/containers/EditorContainer/components/TitleHeader/__snapshots__/EditableHeader.test.jsx.snap b/src/editors/containers/EditorContainer/components/TitleHeader/__snapshots__/EditableHeader.test.jsx.snap
new file mode 100644
index 0000000000..0d202841d6
--- /dev/null
+++ b/src/editors/containers/EditorContainer/components/TitleHeader/__snapshots__/EditableHeader.test.jsx.snap
@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EditableHeader snapshot snapshot 1`] = `
+<Form.Group
+  onBlur={[Function]}
+>
+  <Form.Control
+    autoFocus={true}
+    onChange={[MockFunction args.handleChange]}
+    onKeyDown={[MockFunction args.handleKeyDown]}
+    placeholder="Title"
+    style={
+      {
+        "paddingInlineEnd": "calc(1rem + 84px)",
+      }
+    }
+    trailingElement={
+      <EditConfirmationButtons
+        cancelEdit={[MockFunction args.cancelEdit]}
+        updateTitle={[MockFunction args.updateTitle]}
+      />
+    }
+    value="test-title-text"
+  />
+</Form.Group>
+`;
diff --git a/src/editors/containers/EditorContainer/components/TitleHeader/__snapshots__/index.test.jsx.snap b/src/editors/containers/EditorContainer/components/TitleHeader/__snapshots__/index.test.jsx.snap
new file mode 100644
index 0000000000..bcc8a044ed
--- /dev/null
+++ b/src/editors/containers/EditorContainer/components/TitleHeader/__snapshots__/index.test.jsx.snap
@@ -0,0 +1,32 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TitleHeader snapshots editing 1`] = `
+<EditableHeader
+  handleChange={[MockFunction localTitleHooks.handleChange]}
+  handleKeyDown={[MockFunction localTitleHooks.handleKeyDown]}
+  inputRef={[MockFunction localTitleHooks.inputRef]}
+  localTitle="TeST LocALtitLE"
+  updateTitle={[MockFunction localTitleHooks.updateTitle]}
+/>
+`;
+
+exports[`TitleHeader snapshots initialized 1`] = `
+<div
+  className="d-flex flex-row align-items-center mt-1"
+>
+  <Truncate>
+    {
+      "useSelector": [Function],
+    }
+  </Truncate>
+  <IconButton
+    alt="Edit Title"
+    className="mx-2"
+    iconAs="Icon"
+    onClick={[MockFunction localTitleHooks.startEditing]}
+    size="sm"
+  />
+</div>
+`;
+
+exports[`TitleHeader snapshots not initialized 1`] = `"Loading..."`;
diff --git a/src/editors/containers/EditorContainer/components/TitleHeader/hooks.js b/src/editors/containers/EditorContainer/components/TitleHeader/hooks.js
new file mode 100644
index 0000000000..d64801c071
--- /dev/null
+++ b/src/editors/containers/EditorContainer/components/TitleHeader/hooks.js
@@ -0,0 +1,76 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+
+import { actions, selectors } from '../../../../data/redux';
+import * as textEditorHooks from '../../hooks';
+// This 'module' self-import hack enables mocking during tests.
+// See src/editors/decisions/0005-internal-editor-testability-decisions.md. The whole approach to how hooks are tested
+// should be re-thought and cleaned up to avoid this pattern.
+// eslint-disable-next-line import/no-self-import
+import * as module from './hooks';
+
+export const { navigateCallback } = textEditorHooks;
+
+export const state = {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  localTitle: (args) => React.useState(args),
+};
+
+export const hooks = {
+  isEditing: () => {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [isEditing, setIsEditing] = React.useState(false);
+    return {
+      isEditing,
+      startEditing: () => setIsEditing(true),
+      stopEditing: () => setIsEditing(false),
+    };
+  },
+
+  localTitle: ({ dispatch, stopEditing }) => {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+    const title = useSelector(selectors.app.displayTitle);
+    const [localTitle, setLocalTitle] = module.state.localTitle(title);
+    return {
+      updateTitle: (e) => {
+        if (localTitle.length <= 0) {
+          setLocalTitle(title);
+          stopEditing();
+        } else if (!e.currentTarget.contains(e.relatedTarget)) {
+          dispatch(actions.app.setBlockTitle(localTitle));
+          stopEditing();
+        }
+      },
+      handleChange: (e) => setLocalTitle(e.target.value),
+      cancelEdit: () => {
+        setLocalTitle(title);
+        stopEditing();
+      },
+      localTitle,
+    };
+  },
+};
+
+export const localTitleHooks = ({ dispatch }) => {
+  const { isEditing, startEditing, stopEditing } = module.hooks.isEditing();
+  const {
+    localTitle,
+    handleChange,
+    updateTitle,
+    cancelEdit,
+  } = module.hooks.localTitle({
+    dispatch,
+    stopEditing,
+  });
+  return {
+    isEditing,
+    startEditing,
+    stopEditing,
+    cancelEdit,
+    localTitle,
+    updateTitle,
+    handleChange,
+
+    inputRef: React.createRef(),
+  };
+};
diff --git a/src/editors/containers/EditorContainer/components/TitleHeader/hooks.test.js b/src/editors/containers/EditorContainer/components/TitleHeader/hooks.test.js
new file mode 100644
index 0000000000..8698282021
--- /dev/null
+++ b/src/editors/containers/EditorContainer/components/TitleHeader/hooks.test.js
@@ -0,0 +1,155 @@
+import 'CourseAuthoring/editors/setupEditorTest';
+import React from 'react';
+import { useSelector } from 'react-redux';
+
+import { actions, selectors } from '../../../../data/redux';
+import { MockUseState } from '../../../../testUtils';
+import * as hooks from './hooks';
+
+jest.mock('react', () => {
+  const updateState = jest.fn();
+  return {
+    updateState,
+    useState: jest.fn(val => ([{ state: val }, (newVal) => updateState({ val, newVal })])),
+    createRef: jest.fn(val => ({ ref: val })),
+  };
+});
+
+jest.mock('../../hooks', () => ({
+  navigateCallback: (args) => ({ navigateCallback: args }),
+}));
+
+jest.mock('../../../../data/redux', () => ({
+  actions: {
+    app: {
+      setBlockTitle: (args) => ({ setBlockTitle: args }),
+    },
+  },
+  selectors: {
+    app: {
+      displayTitle: (state) => ({ displayTitle: state }),
+    },
+  },
+}));
+
+const state = new MockUseState(hooks);
+
+describe('TitleHeader hooks', () => {
+  let output;
+  let dispatch;
+  beforeEach(() => {
+    dispatch = jest.fn();
+  });
+  describe('state hooks', () => {
+    state.testGetter(state.keys.localTitle);
+  });
+  describe('non-state hooks', () => {
+    beforeEach(() => { state.mock(); });
+    afterEach(() => { state.restore(); });
+
+    describe('isEditing', () => {
+      beforeEach(() => {
+        output = hooks.hooks.isEditing();
+      });
+      test('returns isEditing field, defaulted to false', () => {
+        expect(output.isEditing).toEqual({ state: false });
+      });
+      test('startEditing calls the setter function with true', () => {
+        output.startEditing();
+        expect(React.updateState).toHaveBeenCalledWith({ val: false, newVal: true });
+      });
+      test('stopEditing calls the setter function with false', () => {
+        output.stopEditing();
+        expect(React.updateState).toHaveBeenCalledWith({ val: false, newVal: false });
+      });
+    });
+
+    describe('localTitle', () => {
+      let stopEditing;
+      beforeEach(() => {
+        stopEditing = jest.fn();
+        output = hooks.hooks.localTitle({ dispatch, stopEditing });
+      });
+      test('returns the state value for localTitle, defaulted to displayTitle', () => {
+        expect(output.localTitle).toEqual(useSelector(selectors.app.displayTitle));
+      });
+      describe('updateTitle hook', () => {
+        it('calls setBlockTitle with localTitle, and stopEditing', () => {
+          const div = document.createElement('div');
+          const mockEvent = { currentTarget: div };
+          output.updateTitle(mockEvent);
+          expect(dispatch).toHaveBeenCalledWith(actions.app.setBlockTitle(output.localTitle));
+          expect(stopEditing).toHaveBeenCalled();
+        });
+      });
+      describe('handleChange', () => {
+        it('calls setLocalTitle with the event target value', () => {
+          const value = 'SOME VALUe';
+          output.handleChange({ target: { value } });
+          expect(state.setState[state.keys.localTitle]).toHaveBeenCalledWith(value);
+        });
+      });
+      describe('cancelEdit', () => {
+        it('calls setLocalTitle with previously stored title, and stopEditing', () => {
+          output.cancelEdit();
+          expect(state.setState[state.keys.localTitle]).toHaveBeenCalledWith(useSelector(selectors.app.displayTitle));
+          expect(stopEditing).toHaveBeenCalled();
+        });
+      });
+    });
+    describe('local title hooks', () => {
+      let oldHooks;
+      const values = {
+        isEditing: 'ISeDITING',
+        startEditing: 'STARTeDITING',
+        stopEditing: 'STOPeDITING',
+        handleChange: 'HANDLEcHANGE',
+        localTitle: 'LOCALtITLE',
+        cancelEdit: 'CANCelEDit',
+      };
+      const newHooks = {
+        isEditing: () => ({
+          isEditing: values.isEditing,
+          startEditing: values.startEditing,
+          stopEditing: values.stopEditing,
+        }),
+        localTitle: jest.fn((args) => ({
+          updateTitle: args,
+          handleChange: values.handleChange,
+          localTitle: values.localTitle,
+          cancelEdit: values.cancelEdit,
+        })),
+        handleKeyDown: jest.fn(args => ({ handleKeyDown: args })),
+      };
+      beforeEach(() => {
+        oldHooks = hooks.hooks;
+        hooks.hooks.isEditing = newHooks.isEditing;
+        hooks.hooks.localTitle = newHooks.localTitle;
+        hooks.hooks.handleKeyDown = newHooks.handleKeyDown;
+
+        output = hooks.localTitleHooks({ dispatch });
+      });
+      afterEach(() => {
+        // eslint-disable-next-line no-import-assign
+        hooks.hooks = oldHooks;
+      });
+      it('returns isEditing, startEditing, and stopEditing, tied to the isEditing hook', () => {
+        expect(output.isEditing).toEqual(values.isEditing);
+        expect(output.startEditing).toEqual(values.startEditing);
+        expect(output.stopEditing).toEqual(values.stopEditing);
+      });
+      it('returns localTitle, updateTitle, handleChange, and cancelEdit tied to the localTitle hook', () => {
+        expect(output.updateTitle).toEqual({
+          dispatch,
+          stopEditing: values.stopEditing,
+        });
+        expect(output.handleChange).toEqual(values.handleChange);
+        expect(output.localTitle).toEqual(values.localTitle);
+        expect(output.cancelEdit).toEqual(values.cancelEdit);
+      });
+      it('returns a new ref for inputRef', () => {
+        expect(output.inputRef).toEqual({ ref: undefined });
+      });
+    });
+  });
+});
diff --git a/src/editors/containers/EditorContainer/components/TitleHeader/index.jsx b/src/editors/containers/EditorContainer/components/TitleHeader/index.jsx
new file mode 100644
index 0000000000..8e3f017bce
--- /dev/null
+++ b/src/editors/containers/EditorContainer/components/TitleHeader/index.jsx
@@ -0,0 +1,74 @@
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import PropTypes from 'prop-types';
+
+import { Icon, IconButton, Truncate } from '@openedx/paragon';
+import { EditOutline } from '@openedx/paragon/icons';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+
+import { selectors } from '../../../../data/redux';
+import { localTitleHooks } from './hooks';
+import messages from './messages';
+import EditableHeader from './EditableHeader';
+
+const TitleHeader = ({
+  isInitialized,
+  // injected
+  intl,
+}) => {
+  if (!isInitialized) { return intl.formatMessage(messages.loading); }
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const dispatch = useDispatch();
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const title = useSelector(selectors.app.displayTitle);
+
+  const {
+    inputRef,
+    isEditing,
+    handleChange,
+    handleKeyDown,
+    localTitle,
+    startEditing,
+    cancelEdit,
+    updateTitle,
+  } = localTitleHooks({ dispatch });
+
+  if (isEditing) {
+    return (
+      <EditableHeader
+        {...{
+          inputRef,
+          handleChange,
+          handleKeyDown,
+          localTitle,
+          updateTitle,
+          cancelEdit,
+        }}
+      />
+    );
+  }
+  return (
+    <div className="d-flex flex-row align-items-center mt-1">
+      <Truncate>
+        {title}
+      </Truncate>
+      <IconButton
+        alt={intl.formatMessage(messages.editTitleLabel)}
+        iconAs={Icon}
+        className="mx-2"
+        onClick={startEditing}
+        size="sm"
+        src={EditOutline}
+      />
+    </div>
+  );
+};
+TitleHeader.defaultProps = {};
+TitleHeader.propTypes = {
+  isInitialized: PropTypes.bool.isRequired,
+  // injected
+  intl: intlShape.isRequired,
+};
+
+export const TitleHeaderInternal = TitleHeader; // For testing only
+export default injectIntl(TitleHeader);
diff --git a/src/editors/containers/EditorContainer/components/TitleHeader/index.test.jsx b/src/editors/containers/EditorContainer/components/TitleHeader/index.test.jsx
new file mode 100644
index 0000000000..6366e1c758
--- /dev/null
+++ b/src/editors/containers/EditorContainer/components/TitleHeader/index.test.jsx
@@ -0,0 +1,62 @@
+import 'CourseAuthoring/editors/setupEditorTest';
+import React from 'react';
+import { useDispatch } from 'react-redux';
+import { shallow } from '@edx/react-unit-test-utils';
+
+import { formatMessage } from '../../../../testUtils';
+import { localTitleHooks } from './hooks';
+import { TitleHeaderInternal as TitleHeader } from '.';
+
+jest.mock('./hooks', () => ({
+  localTitleHooks: jest.fn(),
+}));
+jest.mock('@openedx/paragon', () => ({
+  ...jest.requireActual('@openedx/paragon'),
+  Truncate: ({ children }) => <div>{children}</div>, // eslint-disable-line react/prop-types
+  IconButton: 'IconButton',
+  Icon: 'Icon',
+}));
+jest.mock('./EditableHeader');
+
+describe('TitleHeader', () => {
+  const props = {
+    intl: { formatMessage },
+    isInitialized: false,
+    setTitle: jest.fn().mockName('args.setTitle'),
+    title: 'html',
+  };
+  const localTitleHooksProps = {
+    inputRef: jest.fn().mockName('localTitleHooks.inputRef'),
+    isEditing: false,
+    handleChange: jest.fn().mockName('localTitleHooks.handleChange'),
+    handleKeyDown: jest.fn().mockName('localTitleHooks.handleKeyDown'),
+    localTitle: 'TeST LocALtitLE',
+    startEditing: jest.fn().mockName('localTitleHooks.startEditing'),
+    updateTitle: jest.fn().mockName('localTitleHooks.updateTitle'),
+  };
+
+  describe('behavior', () => {
+    it(' calls localTitleHooks with initialization args', () => {
+      localTitleHooks.mockReturnValue(localTitleHooksProps);
+      shallow(<TitleHeader {...props} isInitialized />);
+      const dispatch = useDispatch();
+      expect(localTitleHooks).toHaveBeenCalledWith({
+        dispatch,
+      });
+    });
+  });
+
+  describe('snapshots', () => {
+    test('not initialized', () => {
+      expect(shallow(<TitleHeader {...props} />).snapshot).toMatchSnapshot();
+    });
+    test('initialized', () => {
+      localTitleHooks.mockReturnValue(localTitleHooksProps);
+      expect(shallow(<TitleHeader {...props} isInitialized />).shallowWrapper).toMatchSnapshot();
+    });
+    test('editing', () => {
+      localTitleHooks.mockReturnValue({ ...localTitleHooksProps, isEditing: true });
+      expect(shallow(<TitleHeader {...props} isInitialized />).snapshot).toMatchSnapshot();
+    });
+  });
+});
diff --git a/src/editors/containers/EditorContainer/components/TitleHeader/messages.js b/src/editors/containers/EditorContainer/components/TitleHeader/messages.js
new file mode 100644
index 0000000000..54d92ac16b
--- /dev/null
+++ b/src/editors/containers/EditorContainer/components/TitleHeader/messages.js
@@ -0,0 +1,32 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+
+  loading: {
+    id: 'authoring.texteditor.title.loading',
+    defaultMessage: 'Loading...',
+    description: 'Message displayed while loading content',
+  },
+  cancelChangesLabel: {
+    id: 'authoring.texteditor.header.cancelChangesLabel',
+    defaultMessage: 'Cancel Changes and Return to Learning Context',
+    description: 'Screen reader label title for icon button to return to learning context',
+  },
+  editTitleLabel: {
+    id: 'authoring.texteditor.header.editTitleLabel',
+    defaultMessage: 'Edit Title',
+    description: 'Screen reader label title for icon button to edit the xblock title',
+  },
+  cancelTitleEdit: {
+    id: 'authoring.texteditor.header.cancelTitleEdit',
+    defaultMessage: 'Cancel',
+    description: 'Screen reader label title for icon button to edit the xblock title',
+  },
+  saveTitleEdit: {
+    id: 'authoring.texteditor.header.saveTitleEdit',
+    defaultMessage: 'Save',
+    description: 'Screen reader label title for icon button to edit the xblock title',
+  },
+});
+
+export default messages;
diff --git a/src/editors/containers/EditorContainer/hooks.test.jsx b/src/editors/containers/EditorContainer/hooks.test.jsx
new file mode 100644
index 0000000000..815a4cc12a
--- /dev/null
+++ b/src/editors/containers/EditorContainer/hooks.test.jsx
@@ -0,0 +1,151 @@
+import 'CourseAuthoring/editors/setupEditorTest';
+import * as reactRedux from 'react-redux';
+import { MockUseState } from '../../testUtils';
+
+import { RequestKeys } from '../../data/constants/requests';
+import { selectors } from '../../data/redux';
+
+import * as appHooks from '../../hooks';
+import * as hooks from './hooks';
+import analyticsEvt from '../../data/constants/analyticsEvt';
+
+const hookState = new MockUseState(hooks);
+
+jest.mock('../../data/redux', () => ({
+  selectors: {
+    app: {
+      isInitialized: (state) => ({ isInitialized: state }),
+      images: (state) => ({ images: state }),
+    },
+    requests: {
+      isFailed: (...args) => ({ requestFailed: args }),
+    },
+  },
+}));
+jest.mock('../../hooks', () => ({
+  ...jest.requireActual('../../hooks'),
+  navigateCallback: jest.fn((args) => ({ navigateCallback: args })),
+  saveBlock: jest.fn((args) => ({ saveBlock: args })),
+}));
+
+const dispatch = jest.fn();
+describe('EditorContainer hooks', () => {
+  describe('forwarded hooks', () => {
+    it('forwards clearSaveError from app hooks', () => {
+      expect(hooks.clearSaveError).toEqual(appHooks.clearSaveError);
+    });
+    it('forwards navigateCallback from app hooks', () => {
+      expect(hooks.navigateCallback).toEqual(appHooks.navigateCallback);
+    });
+    it('forwards nullMethod from app hooks', () => {
+      expect(hooks.nullMethod).toEqual(appHooks.nullMethod);
+    });
+    it('forwards saveBlock from app hooks', () => {
+      expect(hooks.saveBlock).toEqual(appHooks.saveBlock);
+    });
+  });
+  describe('local hooks', () => {
+    beforeEach(() => {
+      jest.clearAllMocks();
+    });
+    describe('handleSaveClicked', () => {
+      it('returns callback to saveBlock with dispatch and content from setAssetToStaticUrl', () => {
+        const getContent = () => 'myTestContentValue';
+        const setAssetToStaticUrl = () => 'myTestContentValue';
+        const validateEntry = () => 'vaLIdAteENTry';
+        const output = hooks.handleSaveClicked({
+          getContent,
+          images: {
+            portableUrl: '/static/sOmEuiMAge.jpeg',
+            displayName: 'sOmEuiMAge',
+          },
+          destination: 'testDEsTURL',
+          analytics: 'soMEanALytics',
+          dispatch,
+          validateEntry,
+        });
+        output();
+        expect(appHooks.saveBlock).toHaveBeenCalledWith({
+          content: setAssetToStaticUrl(reactRedux.useSelector(selectors.app.images), getContent),
+          destination: reactRedux.useSelector(selectors.app.returnUrl),
+          analytics: reactRedux.useSelector(selectors.app.analytics),
+          dispatch,
+          validateEntry,
+        });
+      });
+    });
+
+    describe('cancelConfirmModalToggle', () => {
+      const hookKey = hookState.keys.isCancelConfirmModalOpen;
+      beforeEach(() => {
+        jest.clearAllMocks();
+      });
+      describe('state hook', () => {
+        hookState.testGetter(hookKey);
+      });
+      describe('using state', () => {
+        beforeEach(() => {
+          hookState.mock();
+        });
+        afterEach(() => {
+          hookState.restore();
+        });
+
+        describe('cancelConfirmModalToggle', () => {
+          let hook;
+          beforeEach(() => {
+            hook = hooks.cancelConfirmModalToggle();
+          });
+          test('isCancelConfirmOpen: state value', () => {
+            expect(hook.isCancelConfirmOpen).toEqual(hookState.stateVals[hookKey]);
+          });
+          test('openCancelConfirmModal: calls setter with true', () => {
+            hook.openCancelConfirmModal();
+            expect(hookState.setState[hookKey]).toHaveBeenCalledWith(true);
+          });
+          test('closeCancelConfirmModal: calls setter with false', () => {
+            hook.closeCancelConfirmModal();
+            expect(hookState.setState[hookKey]).toHaveBeenCalledWith(false);
+          });
+        });
+      });
+    });
+
+    describe('handleCancel', () => {
+      it('calls navigateCallback to returnUrl if onClose is not passed', () => {
+        expect(hooks.handleCancel({})).toEqual(
+          appHooks.navigateCallback({
+            destination: reactRedux.useSelector(selectors.app.returnUrl),
+            analyticsEvent: analyticsEvt.editorCancelClick,
+            analytics: reactRedux.useSelector(selectors.app.analytics),
+            returnFunction: null,
+          }),
+        );
+      });
+      it('calls onClose and not navigateCallback if onClose is passed', () => {
+        const onClose = () => 'my close value';
+        expect(hooks.handleCancel({ onClose })).toEqual(onClose);
+        expect(appHooks.navigateCallback).not.toHaveBeenCalled();
+      });
+    });
+    describe('isInitialized', () => {
+      it('forwards selectors.app.isInitialized', () => {
+        expect(hooks.isInitialized()).toEqual(
+          reactRedux.useSelector(selectors.app.isInitialized),
+        );
+      });
+    });
+    describe('saveFailed', () => {
+      it('forwards requests.isFailed selector for saveBlock request', () => {
+        const testState = { some: 'state' };
+        const testValue = 'Some data';
+        reactRedux.useSelector.mockReturnValueOnce(testValue);
+        expect(hooks.saveFailed()).toEqual(testValue);
+        const [[cb]] = reactRedux.useSelector.mock.calls;
+        expect(cb(testState)).toEqual(
+          selectors.requests.isFailed(testState, { requestKey: RequestKeys.saveBlock }),
+        );
+      });
+    });
+  });
+});
diff --git a/src/editors/containers/EditorContainer/hooks.ts b/src/editors/containers/EditorContainer/hooks.ts
new file mode 100644
index 0000000000..935e3ad89d
--- /dev/null
+++ b/src/editors/containers/EditorContainer/hooks.ts
@@ -0,0 +1,81 @@
+import { useState } from 'react';
+import { useSelector } from 'react-redux';
+
+import analyticsEvt from '../../data/constants/analyticsEvt';
+import { RequestKeys } from '../../data/constants/requests';
+import { selectors } from '../../data/redux';
+import { StrictDict } from '../../utils';
+import * as appHooks from '../../hooks';
+
+export const {
+  clearSaveError,
+  navigateCallback,
+  nullMethod,
+  saveBlock,
+} = appHooks;
+
+export const state = StrictDict({
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  isCancelConfirmModalOpen: (val) => useState(val),
+});
+
+export const handleSaveClicked = ({
+  dispatch,
+  getContent,
+  validateEntry,
+  returnFunction,
+}) => {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const returnUrl = useSelector(selectors.app.returnUrl);
+  const destination = returnFunction ? '' : returnUrl;
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const analytics = useSelector(selectors.app.analytics);
+
+  return () => saveBlock({
+    analytics,
+    content: getContent({ dispatch }),
+    destination,
+    dispatch,
+    returnFunction,
+    validateEntry,
+  });
+};
+
+export const cancelConfirmModalToggle = () => {
+  const [isCancelConfirmOpen, setIsOpen] = state.isCancelConfirmModalOpen(false);
+  return {
+    isCancelConfirmOpen,
+    openCancelConfirmModal: () => setIsOpen(true),
+    closeCancelConfirmModal: () => setIsOpen(false),
+  };
+};
+
+export const handleCancel = ({
+  onClose = null,
+  returnFunction = null,
+}: {
+  onClose?: (() => void) | null;
+  returnFunction?: (() => (result: any) => void) | null;
+}): ((result?: any) => void) => {
+  if (onClose) {
+    return onClose;
+  }
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const returnUrl = useSelector(selectors.app.returnUrl);
+  return navigateCallback({
+    returnFunction,
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    destination: returnFunction ? '' : returnUrl,
+    analyticsEvent: analyticsEvt.editorCancelClick,
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    analytics: useSelector(selectors.app.analytics),
+  });
+};
+
+// eslint-disable-next-line react-hooks/rules-of-hooks
+export const isInitialized = () => useSelector(selectors.app.isInitialized);
+
+// eslint-disable-next-line react-hooks/rules-of-hooks
+export const saveFailed = () => useSelector((rootState) => (
+  selectors.requests.isFailed(rootState, { requestKey: RequestKeys.saveBlock })
+));
diff --git a/src/editors/containers/EditorContainer/index.scss b/src/editors/containers/EditorContainer/index.scss
new file mode 100644
index 0000000000..27f72bb2fd
--- /dev/null
+++ b/src/editors/containers/EditorContainer/index.scss
@@ -0,0 +1,6 @@
+// fix double scrollbars
+.editor-container {
+  .pgn__modal-body {
+    overflow: visible;
+  }
+}
diff --git a/src/editors/containers/EditorContainer/index.test.tsx b/src/editors/containers/EditorContainer/index.test.tsx
new file mode 100644
index 0000000000..a35e4d74b8
--- /dev/null
+++ b/src/editors/containers/EditorContainer/index.test.tsx
@@ -0,0 +1,168 @@
+import { snakeCaseObject } from '@edx/frontend-platform';
+import {
+  render,
+  screen,
+  initializeMocks,
+  fireEvent,
+  waitFor,
+} from '../../../testUtils';
+import editorCmsApi from '../../data/services/cms/api';
+
+import EditorPage from '../../EditorPage';
+
+// Mock this plugins component:
+jest.mock('frontend-components-tinymce-advanced-plugins', () => ({ a11ycheckerCss: '' }));
+// Always mock out the "fetch course images" endpoint:
+jest.spyOn(editorCmsApi, 'fetchCourseImages').mockImplementation(async () => ( // eslint-disable-next-line
+  { data: { assets: [], start: 0, end: 0, page: 0, pageSize: 50, totalCount: 0 } }
+));
+// Mock out the 'get ancestors' API:
+jest.spyOn(editorCmsApi, 'fetchByUnitId').mockImplementation(async () => ({
+  status: 200,
+  data: {
+    ancestors: [{
+      id: 'block-v1:Org+TS100+24+type@vertical+block@parent',
+      display_name: 'You-Knit? The Test Unit',
+      category: 'vertical',
+      has_children: true,
+    }],
+  },
+}));
+
+const isDirtyMock = jest.fn();
+jest.mock('../TextEditor/hooks', () => ({
+  ...jest.requireActual('../TextEditor/hooks'),
+  isDirty: () => isDirtyMock,
+}));
+
+const defaultPropsHtml = {
+  blockId: 'block-v1:Org+TS100+24+type@html+block@123456html',
+  blockType: 'html',
+  courseId: 'course-v1:Org+TS100+24',
+  lmsEndpointUrl: 'http://lms.test.none/',
+  studioEndpointUrl: 'http://cms.test.none/',
+  onClose: jest.fn(),
+  fullScreen: false,
+};
+const fieldsHtml = {
+  displayName: 'Introduction to Testing',
+  data: '<p>This is a text component which uses <strong>HTML</strong>.</p>',
+  metadata: { displayName: 'Introduction to Testing' },
+};
+
+describe('EditorContainer', () => {
+  let mockEvent: Event;
+
+  beforeEach(() => {
+    initializeMocks();
+    mockEvent = new Event('beforeunload');
+    jest.spyOn(window, 'addEventListener');
+    jest.spyOn(window, 'removeEventListener');
+    jest.spyOn(mockEvent, 'preventDefault');
+    Object.defineProperty(mockEvent, 'returnValue', { writable: true });
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  test('it displays a confirmation dialog when closing the editor modal if data is changed', async () => {
+    jest.spyOn(editorCmsApi, 'fetchBlockById').mockImplementationOnce(async () => (
+      { status: 200, data: snakeCaseObject(fieldsHtml) }
+    ));
+
+    isDirtyMock.mockReturnValue(true);
+    render(<EditorPage {...defaultPropsHtml} />);
+
+    // Then the editor should open
+    expect(await screen.findByRole('heading', { name: /Introduction to Testing/ })).toBeInTheDocument();
+
+    // Assert the "are you sure?" message isn't visible yet
+    const confirmMessage = /Are you sure you want to exit the editor/;
+    expect(screen.queryByText(confirmMessage)).not.toBeInTheDocument();
+
+    // Find and click the close button
+    const closeButton = await screen.findByRole('button', { name: 'Exit the editor' });
+    fireEvent.click(closeButton);
+    // Now we should see the confirmation message:
+    expect(await screen.findByText(confirmMessage)).toBeInTheDocument();
+    expect(defaultPropsHtml.onClose).not.toHaveBeenCalled();
+
+    // Should close modal if cancelled
+    const cancelBtn = await screen.findByRole('button', { name: 'Cancel' });
+    fireEvent.click(cancelBtn);
+    expect(defaultPropsHtml.onClose).not.toHaveBeenCalled();
+
+    // open modal again
+    fireEvent.click(closeButton);
+    // And can confirm the cancelation:
+    const confirmButton = await screen.findByRole('button', { name: 'OK' });
+    fireEvent.click(confirmButton);
+    expect(defaultPropsHtml.onClose).toHaveBeenCalled();
+    window.dispatchEvent(mockEvent);
+    // should not be blocked by beforeunload event as the page was unloaded using close/cancel option
+    expect(window.removeEventListener).toHaveBeenCalledWith('beforeunload', expect.any(Function));
+    expect(mockEvent.preventDefault).not.toHaveBeenCalled();
+  });
+
+  test('it does not display any confirmation dialog when closing the editor modal if data is not changed', async () => {
+    jest.spyOn(editorCmsApi, 'fetchBlockById').mockImplementationOnce(async () => (
+      { status: 200, data: snakeCaseObject(fieldsHtml) }
+    ));
+
+    isDirtyMock.mockReturnValue(false);
+    render(<EditorPage {...defaultPropsHtml} />);
+
+    // Then the editor should open
+    expect(await screen.findByRole('heading', { name: /Introduction to Testing/ })).toBeInTheDocument();
+
+    // Assert the "are you sure?" message isn't visible yet
+    const confirmMessage = /Are you sure you want to exit the editor/;
+    expect(screen.queryByText(confirmMessage)).not.toBeInTheDocument();
+
+    // Find and click the close button
+    const closeButton = await screen.findByRole('button', { name: 'Exit the editor' });
+    fireEvent.click(closeButton);
+    // Even now we should not see the confirmation message as data is not dirty, i.e. not changed:
+    expect(screen.queryByText(confirmMessage)).not.toBeInTheDocument();
+
+    // And onClose is directly called
+    expect(defaultPropsHtml.onClose).toHaveBeenCalled();
+  });
+
+  test('it disables the save button until the fields have been loaded', async () => {
+    // Mock that loading the block data has begun but not completed yet:
+    let resolver: (result: { data: any }) => void;
+    jest.spyOn(editorCmsApi, 'fetchBlockById').mockImplementationOnce(() => new Promise((r) => { resolver = r; }));
+
+    render(<EditorPage {...defaultPropsHtml} />);
+
+    // Then the editor should open. The "Save" button should be disabled
+    const saveButton = await screen.findByRole('button', { name: /Save changes and return/ });
+    expect(saveButton).toBeDisabled();
+
+    // Now complete the loading of the data:
+    await waitFor(() => expect(resolver).not.toBeUndefined());
+    resolver!({ data: snakeCaseObject(fieldsHtml) });
+
+    // Now the save button should be active:
+    await waitFor(() => expect(saveButton).not.toBeDisabled());
+  });
+
+  test('beforeunload event is triggered on page unload if data is changed', async () => {
+    jest.spyOn(editorCmsApi, 'fetchBlockById').mockImplementationOnce(async () => (
+      { status: 200, data: snakeCaseObject(fieldsHtml) }
+    ));
+
+    isDirtyMock.mockReturnValue(true);
+    render(<EditorPage {...defaultPropsHtml} />);
+
+    // Then the editor should open
+    expect(await screen.findByRole('heading', { name: /Introduction to Testing/ })).toBeInTheDocument();
+    // on beforeunload event block user
+    window.dispatchEvent(mockEvent);
+    expect(window.removeEventListener).toHaveBeenCalledWith('beforeunload', expect.any(Function));
+    expect(mockEvent.preventDefault).toHaveBeenCalled();
+    expect(mockEvent.returnValue).toBe(true);
+  });
+});
diff --git a/src/editors/containers/EditorContainer/index.tsx b/src/editors/containers/EditorContainer/index.tsx
new file mode 100644
index 0000000000..eb9e08ab2c
--- /dev/null
+++ b/src/editors/containers/EditorContainer/index.tsx
@@ -0,0 +1,186 @@
+import React from 'react';
+import { useDispatch } from 'react-redux';
+
+import {
+  ActionRow,
+  Button,
+  Icon,
+  IconButton,
+  ModalDialog,
+  Spinner,
+  Toast,
+} from '@openedx/paragon';
+import { Close } from '@openedx/paragon/icons';
+import { useIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
+
+import { EditorComponent } from '../../EditorComponent';
+import { useEditorContext } from '../../EditorContext';
+import BaseModal from '../../sharedComponents/BaseModal';
+import TitleHeader from './components/TitleHeader';
+import * as hooks from './hooks';
+import messages from './messages';
+import './index.scss';
+import usePromptIfDirty from '../../../generic/promptIfDirty/usePromptIfDirty';
+
+interface WrapperProps {
+  children: React.ReactNode;
+}
+
+export const EditorModalWrapper: React.FC<WrapperProps & { onClose: () => void }> = ({ children, onClose }) => {
+  const { fullScreen } = useEditorContext();
+  const intl = useIntl();
+  if (fullScreen) {
+    return (
+      <div
+        className="editor-container d-flex flex-column position-relative zindex-0"
+        style={{ minHeight: '100%' }}
+      >
+        {children}
+      </div>
+    );
+  }
+  const title = intl.formatMessage(messages.modalTitle);
+  return (
+    <ModalDialog isOpen size="xl" isOverflowVisible={false} onClose={onClose} title={title}>{children}</ModalDialog>
+  );
+};
+
+export const EditorModalBody: React.FC<WrapperProps> = ({ children }) => {
+  const { fullScreen } = useEditorContext();
+  return <ModalDialog.Body className={fullScreen ? 'pb-6' : 'pb-0'}>{ children }</ModalDialog.Body>;
+};
+
+export const FooterWrapper: React.FC<WrapperProps> = ({ children }) => {
+  const { fullScreen } = useEditorContext();
+  if (fullScreen) {
+    return <div className="editor-footer fixed-bottom">{children}</div>;
+  }
+  // eslint-disable-next-line react/jsx-no-useless-fragment
+  return <>{ children }</>;
+};
+
+interface Props extends EditorComponent {
+  children: React.ReactNode;
+  getContent: Function;
+  isDirty: () => boolean;
+  validateEntry?: Function | null;
+}
+
+const EditorContainer: React.FC<Props> = ({
+  children,
+  getContent,
+  isDirty,
+  onClose = null,
+  validateEntry = null,
+  returnFunction = null,
+}) => {
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  // Required to mark data as not dirty on save
+  const [saved, setSaved] = React.useState(false);
+  const isInitialized = hooks.isInitialized();
+  const { isCancelConfirmOpen, openCancelConfirmModal, closeCancelConfirmModal } = hooks.cancelConfirmModalToggle();
+  const handleCancel = hooks.handleCancel({ onClose, returnFunction });
+  const disableSave = !isInitialized;
+  const saveFailed = hooks.saveFailed();
+  const clearSaveFailed = hooks.clearSaveError({ dispatch });
+  const handleSave = hooks.handleSaveClicked({
+    dispatch,
+    getContent,
+    validateEntry,
+    returnFunction,
+  });
+
+  const onSave = () => {
+    setSaved(true);
+    handleSave();
+  };
+  // Stops user from navigating away if they have unsaved changes.
+  usePromptIfDirty(() => {
+    // Do not block if cancel modal is used or data is saved.
+    if (isCancelConfirmOpen || saved) {
+      return false;
+    }
+    return isDirty();
+  });
+
+  const confirmCancelIfDirty = () => {
+    if (isDirty()) {
+      openCancelConfirmModal();
+    } else {
+      handleCancel();
+    }
+  };
+  return (
+    <EditorModalWrapper onClose={confirmCancelIfDirty}>
+      {saveFailed && (
+        <Toast show onClose={clearSaveFailed}>
+          <FormattedMessage {...messages.contentSaveFailed} />
+        </Toast>
+      )}
+      <BaseModal
+        size="md"
+        confirmAction={(
+          <Button
+            variant="primary"
+            onClick={() => {
+              handleCancel();
+              if (returnFunction) {
+                closeCancelConfirmModal();
+              }
+            }}
+          >
+            <FormattedMessage {...messages.okButtonLabel} />
+          </Button>
+        )}
+        isOpen={isCancelConfirmOpen}
+        close={() => {
+          closeCancelConfirmModal();
+        }}
+        title={intl.formatMessage(messages.cancelConfirmTitle)}
+      >
+        <FormattedMessage {...messages.cancelConfirmDescription} />
+      </BaseModal>
+      <ModalDialog.Header className="shadow-sm zindex-10">
+        <div className="d-flex flex-row justify-content-between">
+          <h2 className="h3 col pl-0">
+            <TitleHeader isInitialized={isInitialized} />
+          </h2>
+          <IconButton
+            src={Close}
+            iconAs={Icon}
+            onClick={confirmCancelIfDirty}
+            alt={intl.formatMessage(messages.exitButtonAlt)}
+          />
+        </div>
+      </ModalDialog.Header>
+      <EditorModalBody>
+        {isInitialized && children}
+      </EditorModalBody>
+      <FooterWrapper>
+        <ModalDialog.Footer className="shadow-sm">
+          <ActionRow>
+            <Button
+              aria-label={intl.formatMessage(messages.cancelButtonAriaLabel)}
+              variant="tertiary"
+              onClick={confirmCancelIfDirty}
+            >
+              <FormattedMessage {...messages.cancelButtonLabel} />
+            </Button>
+            <Button
+              aria-label={intl.formatMessage(messages.saveButtonAriaLabel)}
+              onClick={onSave}
+              disabled={disableSave}
+            >
+              {disableSave
+                ? <Spinner animation="border" className="mr-3" />
+                : <FormattedMessage {...messages.saveButtonLabel} />}
+            </Button>
+          </ActionRow>
+        </ModalDialog.Footer>
+      </FooterWrapper>
+    </EditorModalWrapper>
+  );
+};
+
+export default EditorContainer;
diff --git a/src/editors/containers/EditorContainer/messages.ts b/src/editors/containers/EditorContainer/messages.ts
new file mode 100644
index 0000000000..55b4259ca9
--- /dev/null
+++ b/src/editors/containers/EditorContainer/messages.ts
@@ -0,0 +1,57 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+
+  cancelConfirmTitle: {
+    id: 'authoring.editorContainer.cancelConfirm.title',
+    defaultMessage: 'Exit the editor?',
+    description: 'Label for modal confirming cancellation',
+  },
+  cancelConfirmDescription: {
+    id: 'authoring.editorContainer.cancelConfirm.description',
+    defaultMessage: 'Are you sure you want to exit the editor? Any unsaved changes will be lost.',
+    description: 'Description text for modal confirming cancellation',
+  },
+  exitButtonAlt: {
+    id: 'authoring.editorContainer.exitButton.alt',
+    defaultMessage: 'Exit the editor',
+    description: 'Alt text for the Exit button',
+  },
+  okButtonLabel: {
+    id: 'authoring.editorContainer.okButton.label',
+    defaultMessage: 'OK',
+    description: 'Label for OK button',
+  },
+  modalTitle: {
+    id: 'authoring.editorContainer.accessibleTitle',
+    defaultMessage: 'Editor Dialog',
+    description: 'Text that labels the the editor modal dialog for non-visual users',
+  },
+  contentSaveFailed: {
+    id: 'authoring.editorfooter.save.error',
+    defaultMessage: 'Error: Content save failed. Please check recent changes and try again later.',
+    description: 'Error message displayed when content fails to save.',
+  },
+  cancelButtonAriaLabel: {
+    id: 'authoring.editorfooter.cancelButton.ariaLabel',
+    defaultMessage: 'Discard changes and return to learning context',
+    description: 'Screen reader label for cancel button',
+  },
+  cancelButtonLabel: {
+    id: 'authoring.editorfooter.cancelButton.label',
+    defaultMessage: 'Cancel',
+    description: 'Label for cancel button',
+  },
+  saveButtonAriaLabel: {
+    id: 'authoring.editorfooter.savebutton.ariaLabel',
+    defaultMessage: 'Save changes and return to learning context',
+    description: 'Screen reader label for save button',
+  },
+  saveButtonLabel: {
+    id: 'authoring.editorfooter.savebutton.label',
+    defaultMessage: 'Save',
+    description: 'Label for Save button',
+  },
+});
+
+export default messages;
diff --git a/src/editors/containers/GameEditor/index.jsx b/src/editors/containers/GameEditor/index.jsx
new file mode 100644
index 0000000000..e14c3bad0f
--- /dev/null
+++ b/src/editors/containers/GameEditor/index.jsx
@@ -0,0 +1,106 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable no-unused-vars */
+/* eslint-disable import/extensions */
+/* eslint-disable import/no-unresolved */
+/**
+ * This is an example component for an xblock Editor
+ * It uses pre-existing components to handle the saving of a the result of a function into the xblock's data.
+ * To use run npm run-script addXblock <your>
+ */
+
+import React from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+
+import { Spinner } from '@openedx/paragon';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+
+import EditorContainer from '../EditorContainer';
+// This 'module' self-import hack enables mocking during tests.
+// See src/editors/decisions/0005-internal-editor-testability-decisions.md. The whole approach to how hooks are tested
+// should be re-thought and cleaned up to avoid this pattern.
+// eslint-disable-next-line import/no-self-import
+import * as module from '.';
+import { actions, selectors } from '../../data/redux';
+import { RequestKeys } from '../../data/constants/requests';
+
+export const hooks = {
+  getContent: () => ({
+    some: 'content',
+  }),
+};
+
+export const thumbEditor = ({
+  onClose,
+  // redux
+  blockValue,
+  lmsEndpointUrl,
+  blockFailed,
+  blockFinished,
+  initializeEditor,
+  exampleValue,
+  // inject
+  intl,
+}) => (
+  <EditorContainer
+    getContent={module.hooks.getContent}
+    onClose={onClose}
+  >
+    <div>
+      {exampleValue}
+    </div>
+    <div className="editor-body h-75 overflow-auto">
+      {!blockFinished
+        ? (
+          <div className="text-center p-6">
+            <Spinner
+              animation="border"
+              className="m-3"
+              // Use a messages.js file for intl messages.
+              screenreadertext={intl.formatMessage('Loading Spinner')}
+            />
+          </div>
+        )
+        : (
+          <p>
+            Your Editor Goes here.
+            You can get at the xblock data with the blockValue field.
+            here is what is in your xblock:  {JSON.stringify(blockValue)}
+          </p>
+        )}
+    </div>
+  </EditorContainer>
+);
+thumbEditor.defaultProps = {
+  blockValue: null,
+  lmsEndpointUrl: null,
+};
+thumbEditor.propTypes = {
+  onClose: PropTypes.func.isRequired,
+  // redux
+  blockValue: PropTypes.shape({
+    data: PropTypes.shape({ data: PropTypes.string }),
+  }),
+  lmsEndpointUrl: PropTypes.string,
+  blockFailed: PropTypes.bool.isRequired,
+  blockFinished: PropTypes.bool.isRequired,
+  initializeEditor: PropTypes.func.isRequired,
+  // inject
+  intl: intlShape.isRequired,
+};
+
+export const mapStateToProps = (state) => ({
+  blockValue: selectors.app.blockValue(state),
+  lmsEndpointUrl: selectors.app.lmsEndpointUrl(state),
+  blockFailed: selectors.requests.isFailed(state, { requestKey: RequestKeys.fetchBlock }),
+  blockFinished: selectors.requests.isFinished(state, { requestKey: RequestKeys.fetchBlock }),
+  // TODO fill with redux state here if needed
+  exampleValue: selectors.game.exampleValue(state),
+});
+
+export const mapDispatchToProps = {
+  initializeEditor: actions.app.initializeEditor,
+  // TODO fill with dispatches here if needed
+};
+
+export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(thumbEditor));
diff --git a/src/editors/containers/ProblemEditor/__snapshots__/index.test.tsx.snap b/src/editors/containers/ProblemEditor/__snapshots__/index.test.tsx.snap
new file mode 100644
index 0000000000..0370230fc0
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/__snapshots__/index.test.tsx.snap
@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ProblemEditor snapshots block failed, message appears 1`] = `
+<div
+  className="text-center p-6"
+>
+  <FormattedMessage
+    defaultMessage="Problem failed to load"
+    description="Error message for problem block failing to load"
+    id="authoring.problemEditor.blockFailed"
+  />
+</div>
+`;
+
+exports[`ProblemEditor snapshots renders as expected with default behavior 1`] = `
+<div
+  className="text-center p-6"
+>
+  <Spinner
+    animation="border"
+    className="m-3"
+    screenreadertext="Loading Problem Editor"
+  />
+</div>
+`;
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswerOption.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswerOption.jsx
new file mode 100644
index 0000000000..57012064ac
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswerOption.jsx
@@ -0,0 +1,165 @@
+import React, { memo } from 'react';
+import { connect, useDispatch } from 'react-redux';
+import PropTypes from 'prop-types';
+import {
+  Collapsible,
+  Icon,
+  IconButton,
+  Form,
+} from '@openedx/paragon';
+import { FeedbackOutline, DeleteOutline } from '@openedx/paragon/icons';
+import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import messages from './messages';
+import { selectors } from '../../../../../data/redux';
+import { answerOptionProps } from '../../../../../data/services/cms/types';
+import Checker from './components/Checker';
+import { FeedbackBox } from './components/Feedback';
+import * as hooks from './hooks';
+import { ProblemTypeKeys } from '../../../../../data/constants/problem';
+import ExpandableTextArea from '../../../../../sharedComponents/ExpandableTextArea';
+
+const AnswerOption = ({
+  answer,
+  hasSingleAnswer,
+  // injected
+  intl,
+  // redux
+  problemType,
+  images,
+  isLibrary,
+  learningContextId,
+}) => {
+  const dispatch = useDispatch();
+  const removeAnswer = hooks.removeAnswer({ answer, dispatch });
+  const setAnswer = hooks.setAnswer({ answer, hasSingleAnswer, dispatch });
+  const setAnswerTitle = hooks.setAnswerTitle({
+    answer,
+    hasSingleAnswer,
+    dispatch,
+    problemType,
+  });
+  const setSelectedFeedback = hooks.setSelectedFeedback({ answer, hasSingleAnswer, dispatch });
+  const setUnselectedFeedback = hooks.setUnselectedFeedback({ answer, hasSingleAnswer, dispatch });
+  const { isFeedbackVisible, toggleFeedback } = hooks.useFeedback(answer);
+
+  const getInputArea = () => {
+    if ([ProblemTypeKeys.SINGLESELECT, ProblemTypeKeys.MULTISELECT].includes(problemType)) {
+      return (
+        <ExpandableTextArea
+          value={answer.title}
+          setContent={setAnswerTitle}
+          placeholder={intl.formatMessage(messages.answerTextboxPlaceholder)}
+          id={`answer-${answer.id}`}
+          {...{
+            images,
+            isLibrary,
+            learningContextId,
+          }}
+        />
+      );
+    }
+    if (problemType !== ProblemTypeKeys.NUMERIC || !answer.isAnswerRange) {
+      return (
+        <Form.Control
+          as="textarea"
+          className="answer-option-textarea text-gray-500 small"
+          autoResize
+          rows={1}
+          value={answer.title}
+          onChange={setAnswerTitle}
+          placeholder={intl.formatMessage(messages.answerTextboxPlaceholder)}
+        />
+      );
+    }
+    // Return Answer Range View
+    return (
+      <div>
+        <Form.Control
+          as="textarea"
+          className="answer-option-textarea text-gray-500 small"
+          autoResize
+          rows={1}
+          value={answer.title}
+          onChange={setAnswerTitle}
+          placeholder={intl.formatMessage(messages.answerRangeTextboxPlaceholder)}
+        />
+        <div className="pgn__form-switch-helper-text">
+          <FormattedMessage {...messages.answerRangeHelperText} />
+        </div>
+      </div>
+
+    );
+  };
+
+  return (
+    <Collapsible.Advanced
+      open={isFeedbackVisible}
+      onToggle={toggleFeedback}
+      className="answer-option d-flex flex-row justify-content-between flex-nowrap pb-2 pt-2"
+    >
+      <div className="mr-1 d-flex">
+        <Checker
+          hasSingleAnswer={hasSingleAnswer}
+          answer={answer}
+          setAnswer={setAnswer}
+          disabled={problemType === ProblemTypeKeys.NUMERIC}
+        />
+      </div>
+      <div className="ml-1 flex-grow-1">
+        {getInputArea()}
+        <Collapsible.Body>
+          <FeedbackBox
+            problemType={problemType}
+            answer={answer}
+            setSelectedFeedback={setSelectedFeedback}
+            setUnselectedFeedback={setUnselectedFeedback}
+            intl={intl}
+            {...{
+              images,
+              isLibrary,
+              learningContextId,
+            }}
+          />
+        </Collapsible.Body>
+      </div>
+      <div className="d-flex flex-row flex-nowrap">
+        <Collapsible.Trigger aria-label="Toggle feedback" className="btn-icon btn-icon-primary btn-icon-md align-items-center">
+          <Icon
+            src={FeedbackOutline}
+            alt={intl.formatMessage(messages.feedbackToggleIconAltText)}
+          />
+        </Collapsible.Trigger>
+        <IconButton
+          src={DeleteOutline}
+          iconAs={Icon}
+          alt={intl.formatMessage(messages.answerDeleteIconAltText)}
+          onClick={removeAnswer}
+          variant="primary"
+        />
+      </div>
+    </Collapsible.Advanced>
+  );
+};
+
+AnswerOption.propTypes = {
+  answer: answerOptionProps.isRequired,
+  hasSingleAnswer: PropTypes.bool.isRequired,
+  // injected
+  intl: intlShape.isRequired,
+  // redux
+  problemType: PropTypes.string.isRequired,
+  images: PropTypes.shape({}).isRequired,
+  learningContextId: PropTypes.string.isRequired,
+  isLibrary: PropTypes.bool.isRequired,
+};
+
+export const mapStateToProps = (state) => ({
+  problemType: selectors.problem.problemType(state),
+  images: selectors.app.images(state),
+  isLibrary: selectors.app.isLibrary(state),
+  learningContextId: selectors.app.learningContextId(state),
+});
+
+export const mapDispatchToProps = {};
+export const AnswerOptionInternal = AnswerOption; // For testing only
+export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(memo(AnswerOption)));
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswerOption.test.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswerOption.test.jsx
new file mode 100644
index 0000000000..59c05a67e5
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswerOption.test.jsx
@@ -0,0 +1,100 @@
+import 'CourseAuthoring/editors/setupEditorTest';
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+import { formatMessage } from '../../../../../testUtils';
+import { selectors } from '../../../../../data/redux';
+import { AnswerOptionInternal as AnswerOption, mapStateToProps } from './AnswerOption';
+
+jest.mock('../../../../../data/redux', () => ({
+  __esModule: true,
+  default: jest.fn(),
+  selectors: {
+    problem: {
+      problemType: jest.fn(state => ({ problemType: state })),
+    },
+    app: {
+      images: jest.fn(state => ({ images: state })),
+      isLibrary: jest.fn(state => ({ isLibrary: state })),
+      learningContextId: jest.fn(state => ({ learningContextId: state })),
+    },
+  },
+  thunkActions: {
+    video: {
+      importTranscripts: jest.fn(),
+    },
+  },
+}));
+
+describe('AnswerOption', () => {
+  const answerWithOnlyFeedback = {
+    id: 'A',
+    title: 'Answer 1',
+    correct: true,
+    selectedFeedback: 'some feedback',
+  };
+  const answerWithSelectedUnselectedFeedback = {
+    id: 'A',
+    title: 'Answer 1',
+    correct: true,
+    selectedFeedback: 'selected feedback',
+    unselectedFeedback: 'unselected feedback',
+  };
+  const answerRange = {
+    id: 'A',
+    title: 'Answer 1',
+    correct: true,
+    selectedFeedback: 'selected feedback',
+    unselectedFeedback: 'unselected feedback',
+    isAnswerRange: true,
+  };
+
+  const props = {
+    hasSingleAnswer: false,
+    answer: answerWithOnlyFeedback,
+    // inject
+    intl: { formatMessage },
+    // redux
+    problemType: 'multiplechoiceresponse',
+    images: {},
+    isLibrary: false,
+    learningContextId: 'course+org+run',
+  };
+  describe('render', () => {
+    test('snapshot: renders correct option with feedback', () => {
+      expect(shallow(<AnswerOption {...props} />).snapshot).toMatchSnapshot();
+    });
+    test('snapshot: renders correct option with selected unselected feedback', () => {
+      expect(shallow(<AnswerOption {...props} problemType="choiceresponse" answer={answerWithSelectedUnselectedFeedback} />).snapshot).toMatchSnapshot();
+    });
+    test('snapshot: renders correct option with numeric input problem', () => {
+      expect(shallow(<AnswerOption {...props} problemType="numericalresponse" />).snapshot).toMatchSnapshot();
+    });
+    test('snapshot: renders correct option with numeric input problem and answer range', () => {
+      expect(shallow(<AnswerOption {...props} problemType="numericalresponse" answer={answerRange} />).snapshot).toMatchSnapshot();
+    });
+  });
+
+  describe('mapStateToProps', () => {
+    const testState = { A: 'pple', B: 'anana', C: 'ucumber' };
+    test('problemType from problem.problemType', () => {
+      expect(
+        mapStateToProps(testState).problemType,
+      ).toEqual(selectors.problem.problemType(testState));
+    });
+    test('images from app.images', () => {
+      expect(
+        mapStateToProps(testState).images,
+      ).toEqual(selectors.app.images(testState));
+    });
+    test('learningContextId from app.learningContextId', () => {
+      expect(
+        mapStateToProps(testState).learningContextId,
+      ).toEqual(selectors.app.learningContextId(testState));
+    });
+    test('isLibrary from app.isLibrary', () => {
+      expect(
+        mapStateToProps(testState).isLibrary,
+      ).toEqual(selectors.app.isLibrary(testState));
+    });
+  });
+});
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswersContainer.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswersContainer.jsx
new file mode 100644
index 0000000000..1a5d547cb4
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswersContainer.jsx
@@ -0,0 +1,99 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+
+import { Dropdown, Icon } from '@openedx/paragon';
+import { Add } from '@openedx/paragon/icons';
+import messages from './messages';
+import { useAnswerContainer, isSingleAnswerProblem } from './hooks';
+import { actions, selectors } from '../../../../../data/redux';
+import { answerOptionProps } from '../../../../../data/services/cms/types';
+import AnswerOption from './AnswerOption';
+import Button from '../../../../../sharedComponents/Button';
+import { ProblemTypeKeys } from '../../../../../data/constants/problem';
+
+const AnswersContainer = ({
+  problemType,
+  // Redux
+  answers,
+  addAnswer,
+  addAnswerRange,
+  updateField,
+}) => {
+  const hasSingleAnswer = isSingleAnswerProblem(problemType);
+
+  useAnswerContainer({ answers, problemType, updateField });
+
+  return (
+    <div className="answers-container border border-light-700 rounded py-4 pl-4 pr-3">
+      {answers.map((answer) => (
+        <AnswerOption
+          key={answer.id}
+          hasSingleAnswer={hasSingleAnswer}
+          answer={answer}
+        />
+      ))}
+
+      {problemType !== ProblemTypeKeys.NUMERIC ? (
+        <Button
+          variant="add"
+          onClick={addAnswer}
+        >
+          <FormattedMessage {...messages.addAnswerButtonText} />
+        </Button>
+
+      ) : (
+        <Dropdown>
+          <Dropdown.Toggle
+            id="Add-Answer-Or-Answer-Range"
+            variant="tertiary"
+            className="pl-0"
+          >
+            <Icon
+              src={Add}
+            />
+            <FormattedMessage {...messages.addAnswerButtonText} />
+          </Dropdown.Toggle>
+          <Dropdown.Menu>
+            <Dropdown.Item
+              key="add-answer"
+              onClick={addAnswer}
+              className={`AddAnswerRange ${answers.length === 1 && answers[0].isAnswerRange ? 'disabled' : ''}`}
+            >
+              <FormattedMessage {...messages.addAnswerButtonText} />
+            </Dropdown.Item>
+            <Dropdown.Item
+              key="add-answer-range"
+              onClick={addAnswerRange}
+              className={`AddAnswerRange ${answers.length > 1 || (answers.length === 1 && answers[0].isAnswerRange) ? 'disabled' : ''}`}
+            >
+              <FormattedMessage {...messages.addAnswerRangeButtonText} />
+            </Dropdown.Item>
+          </Dropdown.Menu>
+        </Dropdown>
+      )}
+    </div>
+  );
+};
+
+AnswersContainer.propTypes = {
+  problemType: PropTypes.string.isRequired,
+  answers: PropTypes.arrayOf(answerOptionProps).isRequired,
+  addAnswer: PropTypes.func.isRequired,
+  addAnswerRange: PropTypes.func.isRequired,
+  updateField: PropTypes.func.isRequired,
+};
+
+export const mapStateToProps = (state) => ({
+  answers: selectors.problem.answers(state),
+});
+
+export const mapDispatchToProps = {
+  addAnswer: actions.problem.addAnswer,
+  addAnswerRange: actions.problem.addAnswerRange,
+  updateField: actions.problem.updateField,
+};
+
+export const AnswersContainerInternal = AnswersContainer; // For testing only
+export default connect(mapStateToProps, mapDispatchToProps)(AnswersContainer);
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswersContainer.test.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswersContainer.test.jsx
new file mode 100644
index 0000000000..c52933af2d
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswersContainer.test.jsx
@@ -0,0 +1,165 @@
+/* eslint-disable react/prop-types */
+import 'CourseAuthoring/editors/setupEditorTest';
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+import { act, render, waitFor } from '@testing-library/react';
+
+import { actions, selectors } from '../../../../../data/redux';
+
+import { AnswersContainerInternal as AnswersContainer, mapStateToProps, mapDispatchToProps } from './AnswersContainer';
+import { ProblemTypeKeys } from '../../../../../data/constants/problem';
+
+jest.mock('@edx/frontend-platform/i18n', () => ({
+  FormattedMessage: ({ defaultMessage }) => (<p>{defaultMessage}</p>),
+  defineMessages: m => m,
+  injectIntl: (args) => args,
+  intlShape: {},
+  getLocale: jest.fn(),
+}));
+
+jest.mock('./AnswerOption', () => function mockAnswerOption() {
+  return <div>MockAnswerOption</div>;
+});
+
+jest.mock('../../../../../data/redux', () => ({
+  actions: {
+    problem: {
+      updateField: jest.fn().mockName('actions.problem.updateField'),
+      addAnswer: jest.fn().mockName('actions.problem.addAnswer'),
+    },
+  },
+  selectors: {
+    problem: {
+      answers: jest.fn(state => ({ answers: state })),
+    },
+  },
+}));
+describe('AnswersContainer', () => {
+  const props = {
+    answers: [],
+    updateField: jest.fn(),
+    addAnswer: jest.fn(),
+  };
+  describe('render', () => {
+    test('snapshot: renders correct default', () => {
+      act(() => {
+        expect(shallow(<AnswersContainer {...props} />).snapshot).toMatchSnapshot();
+      });
+    });
+    test('snapshot: renders correctly with answers', () => {
+      act(() => {
+        expect(shallow(
+          <AnswersContainer
+            {...props}
+            answers={[{ id: 'a', title: 'sOMetITlE', correct: true }, { id: 'b', title: 'sOMetITlE', correct: true }]}
+          />,
+        ).snapshot).toMatchSnapshot();
+      });
+    });
+    test('snapshot: numeric problems: answer range/answer select button: empty', () => {
+      act(() => {
+        const emptyAnswerProps = {
+          problemType: ProblemTypeKeys.NUMERIC,
+          answers: [],
+          updateField: jest.fn(),
+          addAnswer: jest.fn(),
+          addAnswerRange: jest.fn(),
+        };
+        expect(shallow(
+          <AnswersContainer
+            {...emptyAnswerProps}
+          />,
+        ).snapshot).toMatchSnapshot();
+      });
+    });
+    test('snapshot: numeric problems: answer range/answer select button: Range disables the additon of more adds', () => {
+      act(() => {
+        const answerRangeProps = {
+          problemType: ProblemTypeKeys.NUMERIC,
+          answers: [{
+            id: 'A',
+            title: 'Answer 1',
+            correct: true,
+            selectedFeedback: 'selected feedback',
+            unselectedFeedback: 'unselected feedback',
+            isAnswerRange: true,
+          }],
+          updateField: jest.fn(),
+          addAnswer: jest.fn(),
+          addAnswerRange: jest.fn(),
+        };
+        expect(shallow(
+          <AnswersContainer
+            {...answerRangeProps}
+          />,
+        ).snapshot).toMatchSnapshot();
+      });
+    });
+    test('snapshot: numeric problems: answer range/answer select button: multiple answers disables range.', () => {
+      act(() => {
+        const answersProps = {
+          problemType: ProblemTypeKeys.NUMERIC,
+          answers: [{
+            id: 'A',
+            title: 'Answer 1',
+            correct: true,
+            selectedFeedback: 'selected feedback',
+            unselectedFeedback: 'unselected feedback',
+            isAnswerRange: false,
+          },
+          {
+            id: 'B',
+            title: 'Answer 1',
+            correct: true,
+            selectedFeedback: 'selected feedback',
+            unselectedFeedback: 'unselected feedback',
+            isAnswerRange: false,
+          },
+          ],
+          updateField: jest.fn(),
+          addAnswer: jest.fn(),
+          addAnswerRange: jest.fn(),
+        };
+        expect(shallow(
+          <AnswersContainer
+            {...answersProps}
+          />,
+        ).snapshot).toMatchSnapshot();
+      });
+    });
+
+    test('useAnswerContainer', async () => {
+      let container = null;
+      await act(async () => {
+        const wrapper = render(
+          <AnswersContainer
+            {...props}
+            answers={[{ id: 'a', title: 'sOMetITlE', correct: true }, { id: 'b', title: 'sOMetITlE', correct: true }]}
+          />,
+        );
+        container = wrapper.container;
+      });
+
+      await waitFor(() => expect(container.querySelector('button')).toBeTruthy());
+      await new Promise(resolve => { setTimeout(resolve, 500); });
+
+      expect(props.updateField).toHaveBeenCalledWith(expect.objectContaining({ correctAnswerCount: 2 }));
+    });
+  });
+  describe('mapStateToProps', () => {
+    const testState = { A: 'pple', B: 'anana', C: 'ucumber' };
+    test('answers from problem.answers', () => {
+      expect(
+        mapStateToProps(testState).answers,
+      ).toEqual(selectors.problem.answers(testState));
+    });
+  });
+  describe('mapDispatchToProps', () => {
+    test('updateField from actions.problem.updateField', () => {
+      expect(mapDispatchToProps.updateField).toEqual(actions.problem.updateField);
+    });
+    test('updateField from actions.problem.addAnswer', () => {
+      expect(mapDispatchToProps.addAnswer).toEqual(actions.problem.addAnswer);
+    });
+  });
+});
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/__snapshots__/AnswerOption.test.jsx.snap b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/__snapshots__/AnswerOption.test.jsx.snap
new file mode 100644
index 0000000000..d1443d903a
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/__snapshots__/AnswerOption.test.jsx.snap
@@ -0,0 +1,342 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AnswerOption render snapshot: renders correct option with feedback 1`] = `
+<Advanced
+  className="answer-option d-flex flex-row justify-content-between flex-nowrap pb-2 pt-2"
+  onToggle={[Function]}
+  open={false}
+>
+  <div
+    className="mr-1 d-flex"
+  >
+    <Checker
+      answer={
+        {
+          "correct": true,
+          "id": "A",
+          "selectedFeedback": "some feedback",
+          "title": "Answer 1",
+        }
+      }
+      disabled={false}
+      hasSingleAnswer={false}
+      setAnswer={[Function]}
+    />
+  </div>
+  <div
+    className="ml-1 flex-grow-1"
+  >
+    <ExpandableTextArea
+      error={false}
+      errorMessage={null}
+      id="answer-A"
+      images={{}}
+      isLibrary={false}
+      learningContextId="course+org+run"
+      placeholder="Enter an answer"
+      setContent={[Function]}
+      value="Answer 1"
+    />
+    <Body>
+      <injectIntl(ShimmedIntlComponent)
+        answer={
+          {
+            "correct": true,
+            "id": "A",
+            "selectedFeedback": "some feedback",
+            "title": "Answer 1",
+          }
+        }
+        images={{}}
+        intl={
+          {
+            "formatMessage": [Function],
+          }
+        }
+        isLibrary={false}
+        learningContextId="course+org+run"
+        problemType="multiplechoiceresponse"
+        setSelectedFeedback={[Function]}
+        setUnselectedFeedback={[Function]}
+      />
+    </Body>
+  </div>
+  <div
+    className="d-flex flex-row flex-nowrap"
+  >
+    <Trigger
+      aria-label="Toggle feedback"
+      className="btn-icon btn-icon-primary btn-icon-md align-items-center"
+    >
+      <Icon
+        alt="Toggle feedback"
+      />
+    </Trigger>
+    <IconButton
+      alt="Delete answer"
+      iconAs="Icon"
+      onClick={[Function]}
+      variant="primary"
+    />
+  </div>
+</Advanced>
+`;
+
+exports[`AnswerOption render snapshot: renders correct option with numeric input problem 1`] = `
+<Advanced
+  className="answer-option d-flex flex-row justify-content-between flex-nowrap pb-2 pt-2"
+  onToggle={[Function]}
+  open={false}
+>
+  <div
+    className="mr-1 d-flex"
+  >
+    <Checker
+      answer={
+        {
+          "correct": true,
+          "id": "A",
+          "selectedFeedback": "some feedback",
+          "title": "Answer 1",
+        }
+      }
+      disabled={true}
+      hasSingleAnswer={false}
+      setAnswer={[Function]}
+    />
+  </div>
+  <div
+    className="ml-1 flex-grow-1"
+  >
+    <Form.Control
+      as="textarea"
+      autoResize={true}
+      className="answer-option-textarea text-gray-500 small"
+      onChange={[Function]}
+      placeholder="Enter an answer"
+      rows={1}
+      value="Answer 1"
+    />
+    <Body>
+      <injectIntl(ShimmedIntlComponent)
+        answer={
+          {
+            "correct": true,
+            "id": "A",
+            "selectedFeedback": "some feedback",
+            "title": "Answer 1",
+          }
+        }
+        images={{}}
+        intl={
+          {
+            "formatMessage": [Function],
+          }
+        }
+        isLibrary={false}
+        learningContextId="course+org+run"
+        problemType="numericalresponse"
+        setSelectedFeedback={[Function]}
+        setUnselectedFeedback={[Function]}
+      />
+    </Body>
+  </div>
+  <div
+    className="d-flex flex-row flex-nowrap"
+  >
+    <Trigger
+      aria-label="Toggle feedback"
+      className="btn-icon btn-icon-primary btn-icon-md align-items-center"
+    >
+      <Icon
+        alt="Toggle feedback"
+      />
+    </Trigger>
+    <IconButton
+      alt="Delete answer"
+      iconAs="Icon"
+      onClick={[Function]}
+      variant="primary"
+    />
+  </div>
+</Advanced>
+`;
+
+exports[`AnswerOption render snapshot: renders correct option with numeric input problem and answer range 1`] = `
+<Advanced
+  className="answer-option d-flex flex-row justify-content-between flex-nowrap pb-2 pt-2"
+  onToggle={[Function]}
+  open={false}
+>
+  <div
+    className="mr-1 d-flex"
+  >
+    <Checker
+      answer={
+        {
+          "correct": true,
+          "id": "A",
+          "isAnswerRange": true,
+          "selectedFeedback": "selected feedback",
+          "title": "Answer 1",
+          "unselectedFeedback": "unselected feedback",
+        }
+      }
+      disabled={true}
+      hasSingleAnswer={false}
+      setAnswer={[Function]}
+    />
+  </div>
+  <div
+    className="ml-1 flex-grow-1"
+  >
+    <div>
+      <Form.Control
+        as="textarea"
+        autoResize={true}
+        className="answer-option-textarea text-gray-500 small"
+        onChange={[Function]}
+        placeholder="Enter an answer range"
+        rows={1}
+        value="Answer 1"
+      />
+      <div
+        className="pgn__form-switch-helper-text"
+      >
+        <FormattedMessage
+          defaultMessage="Enter min and max values separated by a comma. Use a bracket to include the number next to it in the range, or a parenthesis to exclude the number. For example, to identify the correct answers as 5, 6, or 7, but not 8, specify [5,8)."
+          description="Helper text describing usage of answer ranges"
+          id="authoring.answerwidget.answer.answerRangeHelperText"
+        />
+      </div>
+    </div>
+    <Body>
+      <injectIntl(ShimmedIntlComponent)
+        answer={
+          {
+            "correct": true,
+            "id": "A",
+            "isAnswerRange": true,
+            "selectedFeedback": "selected feedback",
+            "title": "Answer 1",
+            "unselectedFeedback": "unselected feedback",
+          }
+        }
+        images={{}}
+        intl={
+          {
+            "formatMessage": [Function],
+          }
+        }
+        isLibrary={false}
+        learningContextId="course+org+run"
+        problemType="numericalresponse"
+        setSelectedFeedback={[Function]}
+        setUnselectedFeedback={[Function]}
+      />
+    </Body>
+  </div>
+  <div
+    className="d-flex flex-row flex-nowrap"
+  >
+    <Trigger
+      aria-label="Toggle feedback"
+      className="btn-icon btn-icon-primary btn-icon-md align-items-center"
+    >
+      <Icon
+        alt="Toggle feedback"
+      />
+    </Trigger>
+    <IconButton
+      alt="Delete answer"
+      iconAs="Icon"
+      onClick={[Function]}
+      variant="primary"
+    />
+  </div>
+</Advanced>
+`;
+
+exports[`AnswerOption render snapshot: renders correct option with selected unselected feedback 1`] = `
+<Advanced
+  className="answer-option d-flex flex-row justify-content-between flex-nowrap pb-2 pt-2"
+  onToggle={[Function]}
+  open={false}
+>
+  <div
+    className="mr-1 d-flex"
+  >
+    <Checker
+      answer={
+        {
+          "correct": true,
+          "id": "A",
+          "selectedFeedback": "selected feedback",
+          "title": "Answer 1",
+          "unselectedFeedback": "unselected feedback",
+        }
+      }
+      disabled={false}
+      hasSingleAnswer={false}
+      setAnswer={[Function]}
+    />
+  </div>
+  <div
+    className="ml-1 flex-grow-1"
+  >
+    <ExpandableTextArea
+      error={false}
+      errorMessage={null}
+      id="answer-A"
+      images={{}}
+      isLibrary={false}
+      learningContextId="course+org+run"
+      placeholder="Enter an answer"
+      setContent={[Function]}
+      value="Answer 1"
+    />
+    <Body>
+      <injectIntl(ShimmedIntlComponent)
+        answer={
+          {
+            "correct": true,
+            "id": "A",
+            "selectedFeedback": "selected feedback",
+            "title": "Answer 1",
+            "unselectedFeedback": "unselected feedback",
+          }
+        }
+        images={{}}
+        intl={
+          {
+            "formatMessage": [Function],
+          }
+        }
+        isLibrary={false}
+        learningContextId="course+org+run"
+        problemType="choiceresponse"
+        setSelectedFeedback={[Function]}
+        setUnselectedFeedback={[Function]}
+      />
+    </Body>
+  </div>
+  <div
+    className="d-flex flex-row flex-nowrap"
+  >
+    <Trigger
+      aria-label="Toggle feedback"
+      className="btn-icon btn-icon-primary btn-icon-md align-items-center"
+    >
+      <Icon
+        alt="Toggle feedback"
+      />
+    </Trigger>
+    <IconButton
+      alt="Delete answer"
+      iconAs="Icon"
+      onClick={[Function]}
+      variant="primary"
+    />
+  </div>
+</Advanced>
+`;
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/__snapshots__/AnswersContainer.test.jsx.snap b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/__snapshots__/AnswersContainer.test.jsx.snap
new file mode 100644
index 0000000000..9977f0dac7
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/__snapshots__/AnswersContainer.test.jsx.snap
@@ -0,0 +1,238 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AnswersContainer render snapshot: numeric problems: answer range/answer select button: Range disables the additon of more adds 1`] = `
+<div
+  className="answers-container border border-light-700 rounded py-4 pl-4 pr-3"
+>
+  <mockAnswerOption
+    answer={
+      {
+        "correct": true,
+        "id": "A",
+        "isAnswerRange": true,
+        "selectedFeedback": "selected feedback",
+        "title": "Answer 1",
+        "unselectedFeedback": "unselected feedback",
+      }
+    }
+    hasSingleAnswer={false}
+    key="A"
+  />
+  <Dropdown>
+    <Dropdown.Toggle
+      className="pl-0"
+      id="Add-Answer-Or-Answer-Range"
+      variant="tertiary"
+    >
+      <Icon />
+      <FormattedMessage
+        defaultMessage="Add answer"
+        description="Button text to add answer"
+        id="authoring.answerwidget.answer.addAnswerButton"
+      />
+    </Dropdown.Toggle>
+    <Dropdown.Menu>
+      <Dropdown.Item
+        className="AddAnswerRange disabled"
+        key="add-answer"
+        onClick={[MockFunction]}
+      >
+        <FormattedMessage
+          defaultMessage="Add answer"
+          description="Button text to add answer"
+          id="authoring.answerwidget.answer.addAnswerButton"
+        />
+      </Dropdown.Item>
+      <Dropdown.Item
+        className="AddAnswerRange disabled"
+        key="add-answer-range"
+        onClick={[MockFunction]}
+      >
+        <FormattedMessage
+          defaultMessage="Add answer range"
+          description="Button text to add a range of answers"
+          id="authoring.answerwidget.answer.addAnswerRangeButton"
+        />
+      </Dropdown.Item>
+    </Dropdown.Menu>
+  </Dropdown>
+</div>
+`;
+
+exports[`AnswersContainer render snapshot: numeric problems: answer range/answer select button: empty 1`] = `
+<div
+  className="answers-container border border-light-700 rounded py-4 pl-4 pr-3"
+>
+  <Dropdown>
+    <Dropdown.Toggle
+      className="pl-0"
+      id="Add-Answer-Or-Answer-Range"
+      variant="tertiary"
+    >
+      <Icon />
+      <FormattedMessage
+        defaultMessage="Add answer"
+        description="Button text to add answer"
+        id="authoring.answerwidget.answer.addAnswerButton"
+      />
+    </Dropdown.Toggle>
+    <Dropdown.Menu>
+      <Dropdown.Item
+        className="AddAnswerRange "
+        key="add-answer"
+        onClick={[MockFunction]}
+      >
+        <FormattedMessage
+          defaultMessage="Add answer"
+          description="Button text to add answer"
+          id="authoring.answerwidget.answer.addAnswerButton"
+        />
+      </Dropdown.Item>
+      <Dropdown.Item
+        className="AddAnswerRange "
+        key="add-answer-range"
+        onClick={[MockFunction]}
+      >
+        <FormattedMessage
+          defaultMessage="Add answer range"
+          description="Button text to add a range of answers"
+          id="authoring.answerwidget.answer.addAnswerRangeButton"
+        />
+      </Dropdown.Item>
+    </Dropdown.Menu>
+  </Dropdown>
+</div>
+`;
+
+exports[`AnswersContainer render snapshot: numeric problems: answer range/answer select button: multiple answers disables range. 1`] = `
+<div
+  className="answers-container border border-light-700 rounded py-4 pl-4 pr-3"
+>
+  <mockAnswerOption
+    answer={
+      {
+        "correct": true,
+        "id": "A",
+        "isAnswerRange": false,
+        "selectedFeedback": "selected feedback",
+        "title": "Answer 1",
+        "unselectedFeedback": "unselected feedback",
+      }
+    }
+    hasSingleAnswer={false}
+    key="A"
+  />
+  <mockAnswerOption
+    answer={
+      {
+        "correct": true,
+        "id": "B",
+        "isAnswerRange": false,
+        "selectedFeedback": "selected feedback",
+        "title": "Answer 1",
+        "unselectedFeedback": "unselected feedback",
+      }
+    }
+    hasSingleAnswer={false}
+    key="B"
+  />
+  <Dropdown>
+    <Dropdown.Toggle
+      className="pl-0"
+      id="Add-Answer-Or-Answer-Range"
+      variant="tertiary"
+    >
+      <Icon />
+      <FormattedMessage
+        defaultMessage="Add answer"
+        description="Button text to add answer"
+        id="authoring.answerwidget.answer.addAnswerButton"
+      />
+    </Dropdown.Toggle>
+    <Dropdown.Menu>
+      <Dropdown.Item
+        className="AddAnswerRange "
+        key="add-answer"
+        onClick={[MockFunction]}
+      >
+        <FormattedMessage
+          defaultMessage="Add answer"
+          description="Button text to add answer"
+          id="authoring.answerwidget.answer.addAnswerButton"
+        />
+      </Dropdown.Item>
+      <Dropdown.Item
+        className="AddAnswerRange disabled"
+        key="add-answer-range"
+        onClick={[MockFunction]}
+      >
+        <FormattedMessage
+          defaultMessage="Add answer range"
+          description="Button text to add a range of answers"
+          id="authoring.answerwidget.answer.addAnswerRangeButton"
+        />
+      </Dropdown.Item>
+    </Dropdown.Menu>
+  </Dropdown>
+</div>
+`;
+
+exports[`AnswersContainer render snapshot: renders correct default 1`] = `
+<div
+  className="answers-container border border-light-700 rounded py-4 pl-4 pr-3"
+>
+  <Button
+    className={null}
+    onClick={[MockFunction]}
+    text={null}
+    variant="add"
+  >
+    <FormattedMessage
+      defaultMessage="Add answer"
+      description="Button text to add answer"
+      id="authoring.answerwidget.answer.addAnswerButton"
+    />
+  </Button>
+</div>
+`;
+
+exports[`AnswersContainer render snapshot: renders correctly with answers 1`] = `
+<div
+  className="answers-container border border-light-700 rounded py-4 pl-4 pr-3"
+>
+  <mockAnswerOption
+    answer={
+      {
+        "correct": true,
+        "id": "a",
+        "title": "sOMetITlE",
+      }
+    }
+    hasSingleAnswer={false}
+    key="a"
+  />
+  <mockAnswerOption
+    answer={
+      {
+        "correct": true,
+        "id": "b",
+        "title": "sOMetITlE",
+      }
+    }
+    hasSingleAnswer={false}
+    key="b"
+  />
+  <Button
+    className={null}
+    onClick={[MockFunction]}
+    text={null}
+    variant="add"
+  >
+    <FormattedMessage
+      defaultMessage="Add answer"
+      description="Button text to add answer"
+      id="authoring.answerwidget.answer.addAnswerButton"
+    />
+  </Button>
+</div>
+`;
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Checker/__snapshots__/index.test.jsx.snap b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Checker/__snapshots__/index.test.jsx.snap
new file mode 100644
index 0000000000..8dceea7438
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Checker/__snapshots__/index.test.jsx.snap
@@ -0,0 +1,55 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Checker component with disabled 1`] = `
+<Fragment>
+  <Radio
+    checked={true}
+    className="pt-2.5"
+    disabled={true}
+    isValid={true}
+    onChange={[Function]}
+    value="A"
+  />
+  <Form.Label
+    className="pt-2"
+  >
+    A
+  </Form.Label>
+</Fragment>
+`;
+
+exports[`Checker component with multiple answers 1`] = `
+<Fragment>
+  <Form.Checkbox
+    checked={true}
+    className="pt-2.5"
+    disabled={false}
+    isValid={true}
+    onChange={[Function]}
+    value="A"
+  />
+  <Form.Label
+    className="pt-2"
+  >
+    A
+  </Form.Label>
+</Fragment>
+`;
+
+exports[`Checker component with single answer 1`] = `
+<Fragment>
+  <Radio
+    checked={true}
+    className="pt-2.5"
+    disabled={false}
+    isValid={true}
+    onChange={[Function]}
+    value="A"
+  />
+  <Form.Label
+    className="pt-2"
+  >
+    A
+  </Form.Label>
+</Fragment>
+`;
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Checker/index.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Checker/index.jsx
new file mode 100644
index 0000000000..308e175477
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Checker/index.jsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Form } from '@openedx/paragon';
+
+const Checker = ({
+  hasSingleAnswer,
+  answer,
+  setAnswer,
+  disabled,
+}) => {
+  let CheckerType = Form.Checkbox;
+  if (hasSingleAnswer) {
+    CheckerType = Form.Radio;
+  }
+  return (
+    <>
+      <CheckerType
+        className="pt-2.5"
+        value={answer.id}
+        onChange={(e) => setAnswer({ correct: e.target.checked })}
+        checked={answer.correct}
+        isValid={answer.correct}
+        disabled={disabled}
+      />
+      <Form.Label
+        className="pt-2"
+      >
+        {answer.id}
+      </Form.Label>
+    </>
+  );
+};
+Checker.defaultProps = {
+  disabled: false,
+};
+Checker.propTypes = {
+  hasSingleAnswer: PropTypes.bool.isRequired,
+  answer: PropTypes.shape({
+    correct: PropTypes.bool,
+    id: PropTypes.number,
+  }).isRequired,
+  setAnswer: PropTypes.func.isRequired,
+  disabled: PropTypes.bool,
+};
+
+export default Checker;
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Checker/index.test.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Checker/index.test.jsx
new file mode 100644
index 0000000000..1f99057ac2
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Checker/index.test.jsx
@@ -0,0 +1,27 @@
+import 'CourseAuthoring/editors/setupEditorTest';
+import { shallow } from '@edx/react-unit-test-utils';
+import Checker from '.';
+
+const props = {
+  hasSingleAnswer: true,
+  answer: {
+    id: 'A',
+    title: 'Answer 1',
+    correct: true,
+    selectedFeedback: 'some feedback',
+  },
+  setAnswer: jest.fn(),
+};
+describe('Checker component', () => {
+  test('with single answer', () => {
+    expect(shallow(<Checker {...props} />).snapshot).toMatchSnapshot();
+  });
+
+  test('with multiple answers', () => {
+    expect(shallow(<Checker {...props} hasSingleAnswer={false} />).snapshot).toMatchSnapshot();
+  });
+
+  test('with disabled', () => {
+    expect(shallow(<Checker {...props} disabled />).snapshot).toMatchSnapshot();
+  });
+});
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Feedback/FeedbackBox.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Feedback/FeedbackBox.jsx
new file mode 100644
index 0000000000..91522d3aa6
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Feedback/FeedbackBox.jsx
@@ -0,0 +1,76 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+
+import { answerOptionProps } from '../../../../../../../data/services/cms/types';
+import FeedbackControl from './FeedbackControl';
+import messages from './messages';
+import { ProblemTypeKeys } from '../../../../../../../data/constants/problem';
+
+export const FeedbackBox = ({
+  answer,
+  problemType,
+  setSelectedFeedback,
+  setUnselectedFeedback,
+  images,
+  isLibrary,
+  learningContextId,
+  // injected
+  intl,
+}) => {
+  const props = {
+    answer,
+    intl,
+    images,
+    isLibrary,
+    learningContextId,
+  };
+
+  return ((problemType === ProblemTypeKeys.MULTISELECT) ? (
+    <div className="bg-light-300 p-4 mt-3 rounded text-primary-500">
+      <FeedbackControl
+        key={`selectedfeedback-${answer.id}`}
+        feedback={answer.selectedFeedback}
+        labelMessage={messages.selectedFeedbackLabel}
+        labelMessageBoldUnderline={messages.selectedFeedbackLabelBoldUnderlineText}
+        onChange={setSelectedFeedback}
+        type="selected"
+        {...props}
+      />
+      <FeedbackControl
+        key={`unselectedfeedback-${answer.id}`}
+        feedback={answer.unselectedFeedback}
+        labelMessage={messages.unSelectedFeedbackLabel}
+        labelMessageBoldUnderline={messages.unSelectedFeedbackLabelBoldUnderlineText}
+        onChange={setUnselectedFeedback}
+        type="unselected"
+        {...props}
+      />
+    </div>
+  ) : (
+    <div className="bg-light-300 p-4 mt-3 rounded text-primary-500">
+      <FeedbackControl
+        key={`selectedfeedback-${answer.id}`}
+        feedback={answer.selectedFeedback}
+        labelMessage={messages.selectedFeedbackLabel}
+        labelMessageBoldUnderline={messages.selectedFeedbackLabelBoldUnderlineText}
+        onChange={setSelectedFeedback}
+        type="selected"
+        {...props}
+      />
+    </div>
+  ));
+};
+FeedbackBox.propTypes = {
+  answer: answerOptionProps.isRequired,
+  problemType: PropTypes.string.isRequired,
+  setAnswer: PropTypes.func.isRequired,
+  setSelectedFeedback: PropTypes.func.isRequired,
+  setUnselectedFeedback: PropTypes.func.isRequired,
+  images: PropTypes.shape({}).isRequired,
+  learningContextId: PropTypes.string.isRequired,
+  isLibrary: PropTypes.bool.isRequired,
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(FeedbackBox);
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Feedback/FeedbackBox.test.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Feedback/FeedbackBox.test.jsx
new file mode 100644
index 0000000000..2c1fa2dd5c
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Feedback/FeedbackBox.test.jsx
@@ -0,0 +1,31 @@
+import { shallow } from '@edx/react-unit-test-utils';
+import { FeedbackBox } from './FeedbackBox';
+
+const answerWithFeedback = {
+  id: 'A',
+  title: 'Answer 1',
+  correct: true,
+  selectedFeedback: 'some feedback',
+  unselectedFeedback: 'unselectedFeedback',
+  problemType: 'sOMepRObleM',
+  images: {},
+  isLibrary: false,
+  learningContextId: 'course+org+run',
+};
+
+const props = {
+  answer: answerWithFeedback,
+  intl: {},
+};
+
+describe('FeedbackBox component', () => {
+  test('renders as expected with default props', () => {
+    expect(shallow(<FeedbackBox {...props} />).snapshot).toMatchSnapshot();
+  });
+  test('renders as expected with a numeric input problem', () => {
+    expect(shallow(<FeedbackBox {...props} problemType="numericalresponse" />).snapshot).toMatchSnapshot();
+  });
+  test('renders as expected with a multi select problem', () => {
+    expect(shallow(<FeedbackBox {...props} problemType="choiceresponse" />).snapshot).toMatchSnapshot();
+  });
+});
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Feedback/FeedbackControl.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Feedback/FeedbackControl.jsx
new file mode 100644
index 0000000000..4a84656ea6
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Feedback/FeedbackControl.jsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage, intlShape } from '@edx/frontend-platform/i18n';
+import { Form } from '@openedx/paragon';
+
+import { answerOptionProps } from '../../../../../../../data/services/cms/types';
+import ExpandableTextArea from '../../../../../../../sharedComponents/ExpandableTextArea';
+import messages from './messages';
+
+const FeedbackControl = ({
+  feedback,
+  onChange,
+  labelMessage,
+  labelMessageBoldUnderline,
+  answer,
+  intl,
+  type,
+  images,
+  isLibrary,
+  learningContextId,
+}) => (
+  <Form.Group>
+    <Form.Label className="mb-3">
+      <FormattedMessage
+        {...labelMessage}
+        values={{
+          answerId: answer.id,
+          boldunderline: <b><u><FormattedMessage {...labelMessageBoldUnderline} /></u></b>,
+        }}
+      />
+    </Form.Label>
+    <ExpandableTextArea
+      id={`${type}Feedback-${answer.id}`}
+      value={feedback}
+      setContent={onChange}
+      placeholder={intl.formatMessage(messages.feedbackPlaceholder)}
+      {...{
+        images,
+        isLibrary,
+        learningContextId,
+      }}
+    />
+  </Form.Group>
+);
+FeedbackControl.propTypes = {
+  feedback: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+  labelMessage: PropTypes.string.isRequired,
+  labelMessageBoldUnderline: PropTypes.string.isRequired,
+  answer: answerOptionProps.isRequired,
+  type: PropTypes.string.isRequired,
+  images: PropTypes.shape({}).isRequired,
+  learningContextId: PropTypes.string.isRequired,
+  isLibrary: PropTypes.bool.isRequired,
+  intl: intlShape.isRequired,
+};
+
+export default FeedbackControl;
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Feedback/FeedbackControl.test.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Feedback/FeedbackControl.test.jsx
new file mode 100644
index 0000000000..1dd77266eb
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Feedback/FeedbackControl.test.jsx
@@ -0,0 +1,30 @@
+import 'CourseAuthoring/editors/setupEditorTest';
+import { shallow } from '@edx/react-unit-test-utils';
+import FeedbackControl from './FeedbackControl';
+
+const answerWithFeedback = {
+  id: 'A',
+  title: 'Answer 1',
+  correct: true,
+  selectedFeedback: 'some feedback',
+  unselectedFeedback: 'unselectedFeedback',
+};
+
+const props = {
+  answer: answerWithFeedback,
+  intl: { formatMessage: jest.fn() },
+  setAnswer: jest.fn(),
+  feedback: 'feedback',
+  onChange: jest.fn(),
+  labelMessage: 'msg',
+  labelMessageBoldUnderline: 'msg',
+  images: {},
+  isLibrary: false,
+  learningContextId: 'course+org+run',
+};
+
+describe('FeedbackControl component', () => {
+  test('renders', () => {
+    expect(shallow(<FeedbackControl {...props} />).snapshot).toMatchSnapshot();
+  });
+});
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Feedback/__snapshots__/FeedbackBox.test.jsx.snap b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Feedback/__snapshots__/FeedbackBox.test.jsx.snap
new file mode 100644
index 0000000000..ec31f4becb
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Feedback/__snapshots__/FeedbackBox.test.jsx.snap
@@ -0,0 +1,154 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FeedbackBox component renders as expected with a multi select problem 1`] = `
+<div
+  className="bg-light-300 p-4 mt-3 rounded text-primary-500"
+>
+  <FeedbackControl
+    answer={
+      {
+        "correct": true,
+        "id": "A",
+        "images": {},
+        "isLibrary": false,
+        "learningContextId": "course+org+run",
+        "problemType": "sOMepRObleM",
+        "selectedFeedback": "some feedback",
+        "title": "Answer 1",
+        "unselectedFeedback": "unselectedFeedback",
+      }
+    }
+    feedback="some feedback"
+    intl={{}}
+    key="selectedfeedback-A"
+    labelMessage={
+      {
+        "defaultMessage": "Show following feedback when {answerId} {boldunderline}:",
+        "description": "Label text for feedback if option is selected",
+        "id": "authoring.answerwidget.feedback.selected.label",
+      }
+    }
+    labelMessageBoldUnderline={
+      {
+        "defaultMessage": "is selected",
+        "description": "Bold & underlined text for feedback if option is selected",
+        "id": "authoring.answerwidget.feedback.selected.label.boldunderline",
+      }
+    }
+    type="selected"
+  />
+  <FeedbackControl
+    answer={
+      {
+        "correct": true,
+        "id": "A",
+        "images": {},
+        "isLibrary": false,
+        "learningContextId": "course+org+run",
+        "problemType": "sOMepRObleM",
+        "selectedFeedback": "some feedback",
+        "title": "Answer 1",
+        "unselectedFeedback": "unselectedFeedback",
+      }
+    }
+    feedback="unselectedFeedback"
+    intl={{}}
+    key="unselectedfeedback-A"
+    labelMessage={
+      {
+        "defaultMessage": "Show following feedback when {answerId} {boldunderline}:",
+        "description": "Label text for feedback if option is not selected",
+        "id": "authoring.answerwidget.feedback.unselected.label",
+      }
+    }
+    labelMessageBoldUnderline={
+      {
+        "defaultMessage": "is not selected",
+        "description": "Bold & underlined text for feedback if option is not selected",
+        "id": "authoring.answerwidget.feedback.unselected.label.boldunderline",
+      }
+    }
+    type="unselected"
+  />
+</div>
+`;
+
+exports[`FeedbackBox component renders as expected with a numeric input problem 1`] = `
+<div
+  className="bg-light-300 p-4 mt-3 rounded text-primary-500"
+>
+  <FeedbackControl
+    answer={
+      {
+        "correct": true,
+        "id": "A",
+        "images": {},
+        "isLibrary": false,
+        "learningContextId": "course+org+run",
+        "problemType": "sOMepRObleM",
+        "selectedFeedback": "some feedback",
+        "title": "Answer 1",
+        "unselectedFeedback": "unselectedFeedback",
+      }
+    }
+    feedback="some feedback"
+    intl={{}}
+    key="selectedfeedback-A"
+    labelMessage={
+      {
+        "defaultMessage": "Show following feedback when {answerId} {boldunderline}:",
+        "description": "Label text for feedback if option is selected",
+        "id": "authoring.answerwidget.feedback.selected.label",
+      }
+    }
+    labelMessageBoldUnderline={
+      {
+        "defaultMessage": "is selected",
+        "description": "Bold & underlined text for feedback if option is selected",
+        "id": "authoring.answerwidget.feedback.selected.label.boldunderline",
+      }
+    }
+    type="selected"
+  />
+</div>
+`;
+
+exports[`FeedbackBox component renders as expected with default props 1`] = `
+<div
+  className="bg-light-300 p-4 mt-3 rounded text-primary-500"
+>
+  <FeedbackControl
+    answer={
+      {
+        "correct": true,
+        "id": "A",
+        "images": {},
+        "isLibrary": false,
+        "learningContextId": "course+org+run",
+        "problemType": "sOMepRObleM",
+        "selectedFeedback": "some feedback",
+        "title": "Answer 1",
+        "unselectedFeedback": "unselectedFeedback",
+      }
+    }
+    feedback="some feedback"
+    intl={{}}
+    key="selectedfeedback-A"
+    labelMessage={
+      {
+        "defaultMessage": "Show following feedback when {answerId} {boldunderline}:",
+        "description": "Label text for feedback if option is selected",
+        "id": "authoring.answerwidget.feedback.selected.label",
+      }
+    }
+    labelMessageBoldUnderline={
+      {
+        "defaultMessage": "is selected",
+        "description": "Bold & underlined text for feedback if option is selected",
+        "id": "authoring.answerwidget.feedback.selected.label.boldunderline",
+      }
+    }
+    type="selected"
+  />
+</div>
+`;
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Feedback/__snapshots__/FeedbackControl.test.jsx.snap b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Feedback/__snapshots__/FeedbackControl.test.jsx.snap
new file mode 100644
index 0000000000..614505617b
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Feedback/__snapshots__/FeedbackControl.test.jsx.snap
@@ -0,0 +1,40 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FeedbackControl component renders 1`] = `
+<Form.Group>
+  <Form.Label
+    className="mb-3"
+  >
+    <FormattedMessage
+      0="m"
+      1="s"
+      2="g"
+      values={
+        {
+          "answerId": "A",
+          "boldunderline": <b>
+            <u>
+              <FormattedMessage
+                0="m"
+                1="s"
+                2="g"
+              />
+            </u>
+          </b>,
+        }
+      }
+    />
+  </Form.Label>
+  <ExpandableTextArea
+    error={false}
+    errorMessage={null}
+    id="undefinedFeedback-A"
+    images={{}}
+    isLibrary={false}
+    learningContextId="course+org+run"
+    placeholder={null}
+    setContent={[MockFunction]}
+    value="feedback"
+  />
+</Form.Group>
+`;
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Feedback/index.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Feedback/index.jsx
new file mode 100644
index 0000000000..bce02835a9
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Feedback/index.jsx
@@ -0,0 +1,2 @@
+export { default as FeedbackBox } from './FeedbackBox';
+export { default as FeedbackControl } from './FeedbackControl';
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Feedback/messages.js b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Feedback/messages.js
new file mode 100644
index 0000000000..b8b9ad8b2f
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Feedback/messages.js
@@ -0,0 +1,37 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+
+  feedbackPlaceholder: {
+    id: 'authoring.answerwidget.feedback.placeholder',
+    defaultMessage: 'Feedback message',
+    description: 'Placeholder text for feedback text',
+  },
+  feedbackToggleIconAltText: {
+    id: 'authoring.answerwidget.feedback.icon.alt',
+    defaultMessage: 'Toggle feedback',
+    description: 'Alt text for feedback toggle icon',
+  },
+  selectedFeedbackLabel: {
+    id: 'authoring.answerwidget.feedback.selected.label',
+    defaultMessage: 'Show following feedback when {answerId} {boldunderline}:',
+    description: 'Label text for feedback if option is selected',
+  },
+  selectedFeedbackLabelBoldUnderlineText: {
+    id: 'authoring.answerwidget.feedback.selected.label.boldunderline',
+    defaultMessage: 'is selected',
+    description: 'Bold & underlined text for feedback if option is selected',
+  },
+  unSelectedFeedbackLabel: {
+    id: 'authoring.answerwidget.feedback.unselected.label',
+    defaultMessage: 'Show following feedback when {answerId} {boldunderline}:',
+    description: 'Label text for feedback if option is not selected',
+  },
+  unSelectedFeedbackLabelBoldUnderlineText: {
+    id: 'authoring.answerwidget.feedback.unselected.label.boldunderline',
+    defaultMessage: 'is not selected',
+    description: 'Bold & underlined text for feedback if option is not selected',
+  },
+});
+
+export default messages;
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/hooks.js b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/hooks.js
new file mode 100644
index 0000000000..a2ac1b44ea
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/hooks.js
@@ -0,0 +1,107 @@
+import { useState, useEffect } from 'react';
+import { StrictDict } from '../../../../../utils';
+// This 'module' self-import hack enables mocking during tests.
+// See src/editors/decisions/0005-internal-editor-testability-decisions.md. The whole approach to how hooks are tested
+// should be re-thought and cleaned up to avoid this pattern.
+// eslint-disable-next-line import/no-self-import
+import * as module from './hooks';
+import { actions } from '../../../../../data/redux';
+import { ProblemTypeKeys } from '../../../../../data/constants/problem';
+import { fetchEditorContent } from '../hooks';
+
+export const state = StrictDict({
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  isFeedbackVisible: (val) => useState(val),
+});
+
+export const removeAnswer = ({
+  answer,
+  dispatch,
+}) => () => {
+  dispatch(actions.problem.deleteAnswer({
+    id: answer.id,
+    correct: answer.correct,
+    editorState: fetchEditorContent({ format: '' }),
+  }));
+};
+
+export const setAnswer = ({ answer, hasSingleAnswer, dispatch }) => (payload) => {
+  dispatch(actions.problem.updateAnswer({ id: answer.id, hasSingleAnswer, ...payload }));
+};
+
+export const setAnswerTitle = ({
+  answer,
+  hasSingleAnswer,
+  dispatch,
+  problemType,
+}) => (updatedTitle) => {
+  let title = updatedTitle;
+  if ([ProblemTypeKeys.TEXTINPUT, ProblemTypeKeys.NUMERIC, ProblemTypeKeys.DROPDOWN].includes(problemType)) {
+    title = updatedTitle.target.value;
+  }
+  dispatch(actions.problem.updateAnswer({ id: answer.id, hasSingleAnswer, title }));
+};
+
+export const setSelectedFeedback = ({ answer, hasSingleAnswer, dispatch }) => (value) => {
+  if (value) {
+    dispatch(actions.problem.updateAnswer({
+      id: answer.id,
+      hasSingleAnswer,
+      selectedFeedback: value,
+    }));
+  }
+};
+
+export const setUnselectedFeedback = ({ answer, hasSingleAnswer, dispatch }) => (value) => {
+  if (value) {
+    dispatch(actions.problem.updateAnswer({
+      id: answer.id,
+      hasSingleAnswer,
+      unselectedFeedback: value,
+    }));
+  }
+};
+
+export const useFeedback = (answer) => {
+  const [isFeedbackVisible, setIsFeedbackVisible] = module.state.isFeedbackVisible(false);
+  useEffect(() => {
+    // Show feedback fields if feedback is present
+    const isVisible = !!answer.selectedFeedback || !!answer.unselectedFeedback;
+    setIsFeedbackVisible(isVisible);
+  }, [answer]);
+
+  const toggleFeedback = (open) => {
+    // Do not allow to hide if feedback is added
+    const { selectedFeedback, unselectedFeedback } = fetchEditorContent({ format: '' });
+
+    if (!!selectedFeedback?.[answer.id] || !!unselectedFeedback?.[answer.id]) {
+      setIsFeedbackVisible(true);
+      return;
+    }
+    setIsFeedbackVisible(open);
+  };
+  return {
+    isFeedbackVisible,
+    toggleFeedback,
+  };
+};
+
+export const isSingleAnswerProblem = (problemType) => (
+  problemType === ProblemTypeKeys.DROPDOWN
+);
+
+export const useAnswerContainer = ({ answers, updateField }) => {
+  useEffect(() => {
+    let answerCount = 0;
+    answers.forEach(answer => {
+      if (answer.correct) {
+        answerCount += 1;
+      }
+    });
+    updateField({ correctAnswerCount: answerCount });
+  }, []);
+};
+
+export default {
+  state, removeAnswer, setAnswer, setAnswerTitle, useFeedback, isSingleAnswerProblem, useAnswerContainer,
+};
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/hooks.test.js b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/hooks.test.js
new file mode 100644
index 0000000000..028682249a
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/hooks.test.js
@@ -0,0 +1,210 @@
+import 'CourseAuthoring/editors/setupEditorTest';
+import { useEffect } from 'react';
+import { useDispatch } from 'react-redux';
+
+import { actions } from '../../../../../data/redux';
+import { MockUseState } from '../../../../../testUtils';
+import { ProblemTypeKeys } from '../../../../../data/constants/problem';
+// This 'module' self-import hack enables mocking during tests.
+// See src/editors/decisions/0005-internal-editor-testability-decisions.md. The whole approach to how hooks are tested
+// should be re-thought and cleaned up to avoid this pattern.
+// eslint-disable-next-line import/no-self-import
+import * as module from './hooks';
+
+jest.mock('react', () => {
+  const updateState = jest.fn();
+  return {
+    useEffect: jest.fn(),
+    useState: jest.fn(val => ([{ state: val }, (newVal) => updateState({ val, newVal })])),
+  };
+});
+jest.mock('@edx/frontend-platform/i18n', () => ({
+  defineMessages: m => m,
+}));
+jest.mock('../../../../../data/redux', () => ({
+  actions: {
+    problem: {
+      deleteAnswer: (args) => ({ deleteAnswer: args }),
+      updateAnswer: (args) => ({ updateAnswer: args }),
+    },
+  },
+}));
+
+const state = new MockUseState(module);
+
+let output;
+const answerWithOnlyFeedback = {
+  id: 'A',
+  title: 'Answer 1',
+  correct: true,
+  selectedFeedback: 'some feedback',
+};
+let windowSpy;
+
+describe('Answer Options Hooks', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+  describe('state hooks', () => {
+    state.testGetter(state.keys.isFeedbackVisible);
+  });
+  describe('removeAnswer', () => {
+    beforeEach(() => {
+      windowSpy = jest.spyOn(window, 'window', 'get');
+    });
+    afterEach(() => {
+      windowSpy.mockRestore();
+    });
+    const answer = { id: 'A', correct: false };
+    const dispatch = useDispatch();
+    it('dispatches actions.problem.deleteAnswer', () => {
+      windowSpy.mockImplementation(() => ({ tinymce: { editors: { 'answer-A': { getContent: () => 'string' } } } }));
+      module.removeAnswer({
+        answer,
+        dispatch,
+      })();
+      expect(dispatch).toHaveBeenCalledWith(actions.problem.deleteAnswer({
+        id: answer.id,
+        correct: answer.correct,
+        editorState: {
+          answers: { A: 'string' },
+          hints: [],
+        },
+      }));
+    });
+  });
+  describe('setAnswer', () => {
+    test('it dispatches actions.problem.updateAnswer', () => {
+      const answer = { id: 'A' };
+      const hasSingleAnswer = false;
+      const dispatch = useDispatch();
+      const payload = { random: 'string' };
+      module.setAnswer({ answer, hasSingleAnswer, dispatch })(payload);
+      expect(dispatch).toHaveBeenCalledWith(actions.problem.updateAnswer({
+        id: answer.id,
+        hasSingleAnswer,
+        ...payload,
+      }));
+    });
+  });
+  describe('setAnswerTitle', () => {
+    test('it dispatches actions.problem.updateAnswer for numeric problem', () => {
+      const answer = { id: 'A' };
+      const hasSingleAnswer = false;
+      const dispatch = useDispatch();
+      const updatedTitle = { target: { value: 'string' } };
+      const problemType = 'numericalresponse';
+      module.setAnswerTitle({
+        answer,
+        hasSingleAnswer,
+        dispatch,
+        problemType,
+      })(updatedTitle);
+      expect(dispatch).toHaveBeenCalledWith(actions.problem.updateAnswer({
+        id: answer.id,
+        hasSingleAnswer,
+        title: updatedTitle.target.value,
+      }));
+    });
+    test('it dispatches actions.problem.updateAnswer for single select problem', () => {
+      const answer = { id: 'A' };
+      const hasSingleAnswer = false;
+      const dispatch = useDispatch();
+      const updatedTitle = 'string';
+      const problemType = 'multiplechoiceresponse';
+      module.setAnswerTitle({
+        answer,
+        hasSingleAnswer,
+        dispatch,
+        problemType,
+      })(updatedTitle);
+      expect(dispatch).toHaveBeenCalledWith(actions.problem.updateAnswer({
+        id: answer.id,
+        hasSingleAnswer,
+        title: updatedTitle,
+      }));
+    });
+  });
+  describe('setSelectedFeedback', () => {
+    test('it dispatches actions.problem.updateAnswer', () => {
+      const answer = { id: 'A' };
+      const hasSingleAnswer = false;
+      const dispatch = useDispatch();
+      const value = 'string';
+      module.setSelectedFeedback({ answer, hasSingleAnswer, dispatch })(value);
+      expect(dispatch).toHaveBeenCalledWith(actions.problem.updateAnswer({
+        id: answer.id,
+        hasSingleAnswer,
+        selectedFeedback: value,
+      }));
+    });
+  });
+  describe('setUnselectedFeedback', () => {
+    test('it dispatches actions.problem.updateAnswer', () => {
+      const answer = { id: 'A' };
+      const hasSingleAnswer = false;
+      const dispatch = useDispatch();
+      const value = 'string';
+      module.setUnselectedFeedback({ answer, hasSingleAnswer, dispatch })(value);
+      expect(dispatch).toHaveBeenCalledWith(actions.problem.updateAnswer({
+        id: answer.id,
+        hasSingleAnswer,
+        unselectedFeedback: value,
+      }));
+    });
+  });
+  describe('useFeedback hook', () => {
+    beforeEach(() => {
+      state.mock();
+      windowSpy = jest.spyOn(window, 'window', 'get');
+    });
+    afterEach(() => {
+      state.restore();
+      windowSpy.mockRestore();
+    });
+    test('default state is false', () => {
+      output = module.useFeedback(answerWithOnlyFeedback);
+      expect(output.isFeedbackVisible).toBeFalsy();
+    });
+    test('when useEffect triggers, isFeedbackVisible is set to true', () => {
+      const key = state.keys.isFeedbackVisible;
+      output = module.useFeedback(answerWithOnlyFeedback);
+      expect(state.setState[key]).not.toHaveBeenCalled();
+      const [cb] = useEffect.mock.calls[0];
+      cb();
+      expect(state.setState[key]).toHaveBeenCalledWith(true);
+    });
+    test('toggleFeedback with selected feedback', () => {
+      const key = state.keys.isFeedbackVisible;
+      output = module.useFeedback(answerWithOnlyFeedback);
+      windowSpy.mockImplementation(() => ({ tinymce: { editors: { 'selectedFeedback-A': { getContent: () => 'string' } } } }));
+      output.toggleFeedback(false);
+      expect(state.setState[key]).toHaveBeenCalledWith(true);
+    });
+    test('toggleFeedback with unselected feedback', () => {
+      const key = state.keys.isFeedbackVisible;
+      output = module.useFeedback(answerWithOnlyFeedback);
+      windowSpy.mockImplementation(() => ({ tinymce: { editors: { 'unselectedFeedback-A': { getContent: () => 'string' } } } }));
+      output.toggleFeedback(false);
+      expect(state.setState[key]).toHaveBeenCalledWith(true);
+    });
+    test('toggleFeedback with unselected feedback', () => {
+      const key = state.keys.isFeedbackVisible;
+      output = module.useFeedback(answerWithOnlyFeedback);
+      windowSpy.mockImplementation(() => ({ tinymce: { editors: { 'answer-A': { getContent: () => 'string' } } } }));
+      output.toggleFeedback(false);
+      expect(state.setState[key]).toHaveBeenCalledWith(false);
+    });
+  });
+  describe('isSingleAnswerProblem()', () => {
+    test('singleSelect', () => {
+      expect(module.isSingleAnswerProblem(ProblemTypeKeys.SINGLESELECT)).toBe(false);
+    });
+    test('multiSelect', () => {
+      expect(module.isSingleAnswerProblem(ProblemTypeKeys.MULTISELECT)).toBe(false);
+    });
+    test('dropdown', () => {
+      expect(module.isSingleAnswerProblem(ProblemTypeKeys.DROPDOWN)).toBe(true);
+    });
+  });
+});
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/index.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/index.jsx
new file mode 100644
index 0000000000..c7e865212e
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/index.jsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+
+import messages from './messages';
+import { ProblemTypes } from '../../../../../data/constants/problem';
+import AnswersContainer from './AnswersContainer';
+
+// This widget should be connected, grab all answers from store, update them as needed.
+const AnswerWidget = ({
+  // Redux
+  problemType,
+  // injected
+  intl,
+}) => {
+  const problemStaticData = ProblemTypes[problemType];
+  return (
+    <div>
+      <div className="mt-4 text-primary-500">
+        <div className="h4">
+          <FormattedMessage {...messages.answerWidgetTitle} />
+        </div>
+        <div className="small">
+          {intl.formatMessage(messages.answerHelperText, { helperText: problemStaticData.description })}
+        </div>
+      </div>
+      <AnswersContainer problemType={problemType} />
+    </div>
+  );
+};
+
+AnswerWidget.propTypes = {
+  problemType: PropTypes.string.isRequired,
+  // injected
+  intl: intlShape.isRequired,
+};
+export const AnswerWidgetInternal = AnswerWidget; // For testing only
+export default injectIntl(AnswerWidget);
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/messages.js b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/messages.js
new file mode 100644
index 0000000000..bd2358fc7f
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/messages.js
@@ -0,0 +1,77 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  answerWidgetTitle: {
+    id: 'authoring.answerwidget.answer.answerWidgetTitle',
+    defaultMessage: 'Answers',
+    description: 'Main title for Answers widget',
+  },
+  answerHelperText: {
+    id: 'authoring.problemEditor.answerWidget.answer.answerHelperText',
+    defaultMessage: '{helperText}',
+    description: 'Helper text describing how the user should input answers',
+  },
+  addAnswerButtonText: {
+    id: 'authoring.answerwidget.answer.addAnswerButton',
+    defaultMessage: 'Add answer',
+    description: 'Button text to add answer',
+  },
+  answerTextboxPlaceholder: {
+    id: 'authoring.answerwidget.answer.placeholder',
+    defaultMessage: 'Enter an answer',
+    description: 'Placeholder text for answer option text',
+  },
+  feedbackPlaceholder: {
+    id: 'authoring.answerwidget.feedback.placeholder',
+    defaultMessage: 'Feedback message',
+    description: 'Placeholder text for feedback text',
+  },
+  feedbackToggleIconAltText: {
+    id: 'authoring.answerwidget.feedback.icon.alt',
+    defaultMessage: 'Toggle feedback',
+    description: 'Alt text for feedback toggle icon',
+  },
+  answerDeleteIconAltText: {
+    id: 'authoring.answerwidget.answer.delete.icon.alt',
+    defaultMessage: 'Delete answer',
+    description: 'Alt text for delete icon',
+  },
+  selectedFeedbackLabel: {
+    id: 'authoring.answerwidget.feedback.selected.label',
+    defaultMessage: 'Show following feedback when {answerId} {boldunderline}:',
+    description: 'Label text for feedback if option is selected',
+  },
+  selectedFeedbackLabelBoldUnderlineText: {
+    id: 'authoring.answerwidget.feedback.selected.label.boldunderline',
+    defaultMessage: 'is selected',
+    description: 'Bold & underlined text for feedback if option is selected',
+  },
+  unSelectedFeedbackLabel: {
+    id: 'authoring.answerwidget.feedback.unselected.label',
+    defaultMessage: 'Show following feedback when {answerId} {boldunderline}:',
+    description: 'Label text for feedback if option is not selected',
+  },
+  unSelectedFeedbackLabelBoldUnderlineText: {
+    id: 'authoring.answerwidget.feedback.unselected.label.boldunderline',
+    defaultMessage: 'is not selected',
+    description: 'Bold & underlined text for feedback if option is not selected',
+  },
+
+  addAnswerRangeButtonText: {
+    id: 'authoring.answerwidget.answer.addAnswerRangeButton',
+    defaultMessage: 'Add answer range',
+    description: 'Button text to add a range of answers',
+  },
+  answerRangeTextboxPlaceholder: {
+    id: 'authoring.answerwidget.answer.answerRangeTextboxPlaceholder',
+    defaultMessage: 'Enter an answer range',
+    description: 'Text to prompt the user to add an answer range to the textbox.',
+  },
+  answerRangeHelperText: {
+    id: 'authoring.answerwidget.answer.answerRangeHelperText',
+    defaultMessage: 'Enter min and max values separated by a comma. Use a bracket to include the number next to it in the range, or a parenthesis to exclude the number. For example, to identify the correct answers as 5, 6, or 7, but not 8, specify [5,8).',
+    description: 'Helper text describing usage of answer ranges',
+  },
+});
+
+export default messages;
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/ExplanationWidget/__snapshots__/index.test.jsx.snap b/src/editors/containers/ProblemEditor/components/EditProblemView/ExplanationWidget/__snapshots__/index.test.jsx.snap
new file mode 100644
index 0000000000..67980f3f41
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/ExplanationWidget/__snapshots__/index.test.jsx.snap
@@ -0,0 +1,43 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SolutionWidget render snapshot: renders correct default 1`] = `
+<div
+  className="tinyMceWidget mt-4 text-primary-500"
+>
+  <div
+    className="h4 mb-3"
+  >
+    <FormattedMessage
+      defaultMessage="Explanation"
+      description="Explanation Title"
+      id="authoring.problemEditor.explanationwidget.explanationWidgetTitle"
+    />
+  </div>
+  <div
+    className="small mb-3"
+  >
+    <FormattedMessage
+      defaultMessage="Provide an explanation for the correct answer"
+      description="Description of the solution widget"
+      id="authoring.problemEditor.explanationwidget.solutionDescriptionText"
+    />
+  </div>
+  <TinyMceWidget
+    disabled={false}
+    editorContentHtml="This is my solution"
+    editorRef={null}
+    editorType="solution"
+    enableImageUpload={true}
+    id="solution"
+    images={{}}
+    isLibrary={false}
+    learningContextId="course+org+run"
+    lmsEndpointUrl=""
+    minHeight={150}
+    onChange={[Function]}
+    placeholder="Enter your explanation"
+    setEditorRef={[MockFunction prepareEditorRef.setEditorRef]}
+    studioEndpointUrl=""
+  />
+</div>
+`;
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/ExplanationWidget/index.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/ExplanationWidget/index.jsx
new file mode 100644
index 0000000000..bf4d5b6ccb
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/ExplanationWidget/index.jsx
@@ -0,0 +1,72 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { injectIntl, FormattedMessage, intlShape } from '@edx/frontend-platform/i18n';
+import { selectors } from '../../../../../data/redux';
+import messages from './messages';
+
+import TinyMceWidget from '../../../../../sharedComponents/TinyMceWidget';
+import { prepareEditorRef, replaceStaticWithAsset } from '../../../../../sharedComponents/TinyMceWidget/hooks';
+
+const ExplanationWidget = ({
+  // redux
+  settings,
+  learningContextId,
+  images,
+  isLibrary,
+  // injected
+  intl,
+}) => {
+  const { editorRef, refReady, setEditorRef } = prepareEditorRef();
+  const initialContent = settings?.solutionExplanation || '';
+  const newContent = replaceStaticWithAsset({
+    initialContent,
+    learningContextId,
+  });
+  const solutionContent = newContent || initialContent;
+  if (!refReady) { return null; }
+  return (
+    <div className="tinyMceWidget mt-4 text-primary-500">
+      <div className="h4 mb-3">
+        <FormattedMessage {...messages.solutionWidgetTitle} />
+      </div>
+      <div className="small mb-3">
+        <FormattedMessage {...messages.solutionDescriptionText} />
+      </div>
+      <TinyMceWidget
+        id="solution"
+        editorType="solution"
+        editorRef={editorRef}
+        editorContentHtml={solutionContent}
+        setEditorRef={setEditorRef}
+        minHeight={150}
+        placeholder={intl.formatMessage(messages.placeholder)}
+        {...{
+          images,
+          isLibrary,
+          learningContextId,
+        }}
+      />
+    </div>
+  );
+};
+
+ExplanationWidget.propTypes = {
+  // redux
+  // eslint-disable-next-line
+  settings: PropTypes.any.isRequired,
+  learningContextId: PropTypes.string.isRequired,
+  images: PropTypes.shape({}).isRequired,
+  isLibrary: PropTypes.bool.isRequired,
+  // injected
+  intl: intlShape.isRequired,
+};
+export const mapStateToProps = (state) => ({
+  settings: selectors.problem.settings(state),
+  learningContextId: selectors.app.learningContextId(state),
+  images: selectors.app.images(state),
+  isLibrary: selectors.app.isLibrary(state),
+});
+
+export const ExplanationWidgetInternal = ExplanationWidget; // For testing only
+export default injectIntl(connect(mapStateToProps)(ExplanationWidget));
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/ExplanationWidget/index.test.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/ExplanationWidget/index.test.jsx
new file mode 100644
index 0000000000..294e06ac55
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/ExplanationWidget/index.test.jsx
@@ -0,0 +1,69 @@
+import 'CourseAuthoring/editors/setupEditorTest';
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+import { formatMessage } from '../../../../../testUtils';
+import { selectors } from '../../../../../data/redux';
+import { ExplanationWidgetInternal as ExplanationWidget, mapStateToProps } from '.';
+
+jest.mock('../../../../../data/redux', () => ({
+  __esModule: true,
+  default: jest.fn(),
+  selectors: {
+    problem: {
+      settings: jest.fn(state => ({ question: state })),
+    },
+    app: {
+      learningContextId: jest.fn(state => ({ learningContextId: state })),
+      images: jest.fn(state => ({ images: state })),
+      isLibrary: jest.fn(state => ({ isLibrary: state })),
+    },
+  },
+  thunkActions: {
+    video: {
+      importTranscript: jest.fn(),
+    },
+  },
+}));
+
+jest.mock('../../../../../sharedComponents/TinyMceWidget/hooks', () => ({
+  ...jest.requireActual('../../../../../sharedComponents/TinyMceWidget/hooks'),
+  prepareEditorRef: jest.fn(() => ({
+    refReady: true,
+    setEditorRef: jest.fn().mockName('prepareEditorRef.setEditorRef'),
+  })),
+}));
+
+describe('SolutionWidget', () => {
+  const props = {
+    settings: { solutionExplanation: 'This is my solution' },
+    learningContextId: 'course+org+run',
+    images: {},
+    isLibrary: false,
+    // injected
+    intl: { formatMessage },
+  };
+  describe('render', () => {
+    test('snapshot: renders correct default', () => {
+      expect(shallow(<ExplanationWidget {...props} />).snapshot).toMatchSnapshot();
+    });
+  });
+  describe('mapStateToProps', () => {
+    const testState = { A: 'pple', B: 'anana', C: 'ucumber' };
+    test('settings from problem.settings', () => {
+      expect(mapStateToProps(testState).settings).toEqual(selectors.problem.settings(testState));
+    });
+    test('learningContextId from app.learningContextId', () => {
+      expect(mapStateToProps(testState).learningContextId).toEqual(selectors.app.learningContextId(testState));
+    });
+    test('images from app.images', () => {
+      expect(
+        mapStateToProps(testState).images,
+      ).toEqual(selectors.app.images(testState));
+    });
+    test('isLibrary from app.isLibrary', () => {
+      expect(
+        mapStateToProps(testState).isLibrary,
+      ).toEqual(selectors.app.isLibrary(testState));
+    });
+  });
+});
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/ExplanationWidget/messages.js b/src/editors/containers/ProblemEditor/components/EditProblemView/ExplanationWidget/messages.js
new file mode 100644
index 0000000000..5b0eeda7d9
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/ExplanationWidget/messages.js
@@ -0,0 +1,22 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+
+  solutionWidgetTitle: {
+    id: 'authoring.problemEditor.explanationwidget.explanationWidgetTitle',
+    defaultMessage: 'Explanation',
+    description: 'Explanation Title',
+  },
+  solutionDescriptionText: {
+    id: 'authoring.problemEditor.explanationwidget.solutionDescriptionText',
+    defaultMessage: 'Provide an explanation for the correct answer',
+    description: 'Description of the solution widget',
+  },
+  placeholder: {
+    id: 'authoring.problemEditor.explanationwidget.placeholder',
+    defaultMessage: 'Enter your explanation',
+    description: 'Placeholder text for tinyMCE editor',
+  },
+});
+
+export default messages;
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/QuestionWidget/__snapshots__/index.test.jsx.snap b/src/editors/containers/ProblemEditor/components/EditProblemView/QuestionWidget/__snapshots__/index.test.jsx.snap
new file mode 100644
index 0000000000..ace21ac47e
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/QuestionWidget/__snapshots__/index.test.jsx.snap
@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`QuestionWidget render snapshot: renders correct default 1`] = `
+<div
+  className="tinyMceWidget"
+>
+  <div
+    className="h4 mb-3"
+  >
+    <FormattedMessage
+      defaultMessage="Question"
+      description="Question Title"
+      id="authoring.questionwidget.question.questionWidgetTitle"
+    />
+  </div>
+  <TinyMceWidget
+    disabled={false}
+    editorContentHtml="This is my question"
+    editorRef={null}
+    editorType="question"
+    enableImageUpload={true}
+    id="question"
+    images={{}}
+    isLibrary={false}
+    learningContextId="course+org+run"
+    lmsEndpointUrl=""
+    minHeight={150}
+    onChange={[Function]}
+    placeholder="Enter your question"
+    setEditorRef={[MockFunction prepareEditorRef.setEditorRef]}
+    studioEndpointUrl=""
+  />
+</div>
+`;
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/QuestionWidget/index.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/QuestionWidget/index.jsx
new file mode 100644
index 0000000000..f1bc9f11d6
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/QuestionWidget/index.jsx
@@ -0,0 +1,68 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { injectIntl, FormattedMessage, intlShape } from '@edx/frontend-platform/i18n';
+import { selectors } from '../../../../../data/redux';
+import messages from './messages';
+
+import TinyMceWidget from '../../../../../sharedComponents/TinyMceWidget';
+import { prepareEditorRef, replaceStaticWithAsset } from '../../../../../sharedComponents/TinyMceWidget/hooks';
+
+const QuestionWidget = ({
+  // redux
+  question,
+  learningContextId,
+  images,
+  isLibrary,
+  // injected
+  intl,
+}) => {
+  const { editorRef, refReady, setEditorRef } = prepareEditorRef();
+  const initialContent = question;
+  const newContent = replaceStaticWithAsset({
+    initialContent,
+    learningContextId,
+  });
+  const questionContent = newContent || initialContent;
+  if (!refReady) { return null; }
+  return (
+    <div className="tinyMceWidget">
+      <div className="h4 mb-3">
+        <FormattedMessage {...messages.questionWidgetTitle} />
+      </div>
+      <TinyMceWidget
+        id="question"
+        editorType="question"
+        editorRef={editorRef}
+        editorContentHtml={questionContent}
+        setEditorRef={setEditorRef}
+        minHeight={150}
+        placeholder={intl.formatMessage(messages.placeholder)}
+        {...{
+          images,
+          isLibrary,
+          learningContextId,
+        }}
+      />
+    </div>
+  );
+};
+
+QuestionWidget.propTypes = {
+  // redux
+  question: PropTypes.string.isRequired,
+  learningContextId: PropTypes.string.isRequired,
+  images: PropTypes.shape({}).isRequired,
+  isLibrary: PropTypes.bool.isRequired,
+  // injected
+  intl: intlShape.isRequired,
+};
+export const mapStateToProps = (state) => ({
+  question: selectors.problem.question(state),
+  learningContextId: selectors.app.learningContextId(state),
+  images: selectors.app.images(state),
+  isLibrary: selectors.app.isLibrary(state),
+});
+
+export const QuestionWidgetInternal = QuestionWidget; // For testing only
+export default injectIntl(connect(mapStateToProps)(QuestionWidget));
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/QuestionWidget/index.test.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/QuestionWidget/index.test.jsx
new file mode 100644
index 0000000000..da4df5a7ae
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/QuestionWidget/index.test.jsx
@@ -0,0 +1,75 @@
+import 'CourseAuthoring/editors/setupEditorTest';
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+import { formatMessage } from '../../../../../testUtils';
+import { selectors } from '../../../../../data/redux';
+import { QuestionWidgetInternal as QuestionWidget, mapStateToProps } from '.';
+
+jest.mock('../../../../../data/redux', () => ({
+  __esModule: true,
+  default: jest.fn(),
+  actions: {
+    problem: {
+      updateQuestion: jest.fn().mockName('actions.problem.updateQuestion'),
+    },
+  },
+  selectors: {
+    app: {
+      learningContextId: jest.fn(state => ({ learningContextId: state })),
+      images: jest.fn(state => ({ images: state })),
+      isLibrary: jest.fn(state => ({ isLibrary: state })),
+    },
+    problem: {
+      question: jest.fn(state => ({ question: state })),
+    },
+  },
+  thunkActions: {
+    video: {
+      importTranscript: jest.fn(),
+    },
+  },
+}));
+
+jest.mock('../../../../../sharedComponents/TinyMceWidget/hooks', () => ({
+  ...jest.requireActual('../../../../../sharedComponents/TinyMceWidget/hooks'),
+  prepareEditorRef: jest.fn(() => ({
+    refReady: true,
+    setEditorRef: jest.fn().mockName('prepareEditorRef.setEditorRef'),
+  })),
+}));
+
+describe('QuestionWidget', () => {
+  const props = {
+    question: 'This is my question',
+    updateQuestion: jest.fn(),
+    learningContextId: 'course+org+run',
+    images: {},
+    isLibrary: false,
+    // injected
+    intl: { formatMessage },
+  };
+  describe('render', () => {
+    test('snapshot: renders correct default', () => {
+      expect(shallow(<QuestionWidget {...props} />).snapshot).toMatchSnapshot();
+    });
+  });
+  describe('mapStateToProps', () => {
+    const testState = { A: 'pple', B: 'anana', C: 'ucumber' };
+    test('question from problem.question', () => {
+      expect(mapStateToProps(testState).question).toEqual(selectors.problem.question(testState));
+    });
+    test('learningContextId from app.learningContextId', () => {
+      expect(mapStateToProps(testState).learningContextId).toEqual(selectors.app.learningContextId(testState));
+    });
+    test('images from app.images', () => {
+      expect(
+        mapStateToProps(testState).images,
+      ).toEqual(selectors.app.images(testState));
+    });
+    test('isLibrary from app.isLibrary', () => {
+      expect(
+        mapStateToProps(testState).isLibrary,
+      ).toEqual(selectors.app.isLibrary(testState));
+    });
+  });
+});
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/QuestionWidget/messages.js b/src/editors/containers/ProblemEditor/components/EditProblemView/QuestionWidget/messages.js
new file mode 100644
index 0000000000..a3a61fd957
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/QuestionWidget/messages.js
@@ -0,0 +1,17 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+
+  questionWidgetTitle: {
+    id: 'authoring.questionwidget.question.questionWidgetTitle',
+    defaultMessage: 'Question',
+    description: 'Question Title',
+  },
+  placeholder: {
+    id: 'authoring.problemEditor.questionwidget.placeholder',
+    defaultMessage: 'Enter your question',
+    description: 'Placeholder text for tinyMCE editor',
+  },
+});
+
+export default messages;
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/CardSection.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/CardSection.jsx
new file mode 100644
index 0000000000..4c0157c0e2
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/CardSection.jsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { Collapsible, Card } from '@openedx/paragon';
+import {
+  bool, string, node,
+} from 'prop-types';
+
+const CardSection = ({
+  children, none, isCardCollapsibleOpen, summary,
+}) => {
+  const show = isCardCollapsibleOpen || summary;
+  if (!show) { return null; }
+
+  return (
+    <Card.Section className="pt-0">
+      <Collapsible.Advanced
+        open={!isCardCollapsibleOpen}
+      >
+        <Collapsible.Body className="collapsible-body">
+          <span className={`small ${none ? 'text-gray-500' : 'text-primary-500'}`}>{summary}</span>
+        </Collapsible.Body>
+      </Collapsible.Advanced>
+      <Collapsible.Advanced
+        open={isCardCollapsibleOpen}
+      >
+        <Collapsible.Body className="collapsible-body text-primary-500 x-small">
+          {children}
+        </Collapsible.Body>
+      </Collapsible.Advanced>
+    </Card.Section>
+  );
+};
+CardSection.propTypes = {
+  none: bool,
+  children: node.isRequired,
+  summary: string,
+  isCardCollapsibleOpen: bool.isRequired,
+};
+CardSection.defaultProps = {
+  none: false,
+  summary: null,
+};
+
+export default CardSection;
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/CardSection.test.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/CardSection.test.jsx
new file mode 100644
index 0000000000..a11f9ea276
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/CardSection.test.jsx
@@ -0,0 +1,15 @@
+import 'CourseAuthoring/editors/setupEditorTest';
+import { shallow } from '@edx/react-unit-test-utils';
+import CardSection from './CardSection';
+
+describe('CardSection', () => {
+  test('open', () => {
+    expect(shallow(<CardSection summary="summary" isCardCollapsibleOpen><h1>Section Text</h1></CardSection>).snapshot).toMatchSnapshot();
+  });
+
+  test('closed', () => {
+    expect(
+      shallow(<CardSection isCardCollapsibleOpen={false}><h1>Section Text</h1></CardSection>).snapshot,
+    ).toMatchSnapshot();
+  });
+});
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/SettingsOption.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/SettingsOption.jsx
new file mode 100644
index 0000000000..929bedb245
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/SettingsOption.jsx
@@ -0,0 +1,68 @@
+import React from 'react';
+import { Collapsible, Icon, Card } from '@openedx/paragon';
+import { KeyboardArrowUp, KeyboardArrowDown } from '@openedx/paragon/icons';
+import {
+  arrayOf,
+  shape,
+  string,
+  node,
+  bool,
+} from 'prop-types';
+import { showFullCard } from './hooks';
+import CardSection from './CardSection';
+
+const SettingsOption = ({
+  title, className, extraSections, children, summary, hasExpandableTextArea, ...passThroughProps
+}) => {
+  const { isCardCollapsibleOpen, toggleCardCollapse } = showFullCard(hasExpandableTextArea);
+
+  return (
+    <Card className={`${className} settingsOption border border-light-700 shadow-none`}>
+      <Card.Section className="settingsCardTitleSection" key={`settingsOption-${title}-header`}>
+        <Collapsible.Advanced
+          open={isCardCollapsibleOpen}
+          onToggle={toggleCardCollapse}
+        >
+          <Collapsible.Trigger className="collapsible-trigger d-flex">
+            <span className="flex-grow-1 text-primary-500 x-small">{title}</span>
+            <Collapsible.Visible whenClosed>
+              <Icon src={KeyboardArrowDown} />
+            </Collapsible.Visible>
+            <Collapsible.Visible whenOpen>
+              <Icon src={KeyboardArrowUp} />
+            </Collapsible.Visible>
+          </Collapsible.Trigger>
+        </Collapsible.Advanced>
+      </Card.Section>
+      <CardSection {...passThroughProps} isCardCollapsibleOpen={isCardCollapsibleOpen} summary={summary} key={`settingsOption-${title}-children`}>
+        {children}
+      </CardSection>
+      {extraSections.map((section, index) => (
+        <>
+          {isCardCollapsibleOpen && <hr />}
+          {/* eslint-disable-next-line react/no-array-index-key */}
+          <CardSection {...passThroughProps} isCardCollapsibleOpen={isCardCollapsibleOpen} key={`settingsOption-${title}-${index}`}>
+            {section.children}
+          </CardSection>
+        </>
+      ))}
+    </Card>
+  );
+};
+SettingsOption.propTypes = {
+  title: string.isRequired,
+  children: node.isRequired,
+  className: string,
+  summary: string.isRequired,
+  extraSections: arrayOf(shape({
+    children: node,
+  })),
+  hasExpandableTextArea: bool,
+};
+SettingsOption.defaultProps = {
+  className: '',
+  extraSections: [],
+  hasExpandableTextArea: false,
+};
+
+export default SettingsOption;
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/SettingsOption.test.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/SettingsOption.test.jsx
new file mode 100644
index 0000000000..5c9c1a17e8
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/SettingsOption.test.jsx
@@ -0,0 +1,24 @@
+import 'CourseAuthoring/editors/setupEditorTest';
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+import SettingsOption from './SettingsOption';
+
+describe('SettingsOption', () => {
+  describe('default with children', () => {
+    const children = (<h1>My test content</h1>);
+    test('snapshot: renders correct', () => {
+      expect(shallow(<SettingsOption title="Settings Option Title" summary="Settings Option Summary">{children}</SettingsOption>).snapshot).toMatchSnapshot();
+    });
+  });
+  describe('with additional sections', () => {
+    const children = (<h1>First Section</h1>);
+    const sections = [<h1>Second Section</h1>, <h1>Third Section</h1>];
+    test('snapshot: renders correct', () => {
+      expect(shallow(
+        <SettingsOption title="Settings Option Title" summary="Settings Option Summary" extraSections={sections}>
+          {children}
+        </SettingsOption>,
+      ).snapshot).toMatchSnapshot();
+    });
+  });
+});
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/__snapshots__/CardSection.test.jsx.snap b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/__snapshots__/CardSection.test.jsx.snap
new file mode 100644
index 0000000000..f5ba5df9f8
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/__snapshots__/CardSection.test.jsx.snap
@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CardSection closed 1`] = `null`;
+
+exports[`CardSection open 1`] = `
+<Card.Section
+  className="pt-0"
+>
+  <Advanced
+    open={false}
+  >
+    <Body
+      className="collapsible-body"
+    >
+      <span
+        className="small text-primary-500"
+      >
+        summary
+      </span>
+    </Body>
+  </Advanced>
+  <Advanced
+    open={true}
+  >
+    <Body
+      className="collapsible-body text-primary-500 x-small"
+    >
+      <h1>
+        Section Text
+      </h1>
+    </Body>
+  </Advanced>
+</Card.Section>
+`;
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/__snapshots__/SettingsOption.test.jsx.snap b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/__snapshots__/SettingsOption.test.jsx.snap
new file mode 100644
index 0000000000..031121967a
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/__snapshots__/SettingsOption.test.jsx.snap
@@ -0,0 +1,109 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SettingsOption default with children snapshot: renders correct 1`] = `
+<Card
+  className=" settingsOption border border-light-700 shadow-none"
+>
+  <Card.Section
+    className="settingsCardTitleSection"
+    key="settingsOption-Settings Option Title-header"
+  >
+    <Advanced
+      onToggle={[Function]}
+      open={false}
+    >
+      <Trigger
+        className="collapsible-trigger d-flex"
+      >
+        <span
+          className="flex-grow-1 text-primary-500 x-small"
+        >
+          Settings Option Title
+        </span>
+        <Visible
+          whenClosed={true}
+        >
+          <Icon />
+        </Visible>
+        <Visible
+          whenOpen={true}
+        >
+          <Icon />
+        </Visible>
+      </Trigger>
+    </Advanced>
+  </Card.Section>
+  <CardSection
+    isCardCollapsibleOpen={false}
+    key="settingsOption-Settings Option Title-children"
+    none={false}
+    summary="Settings Option Summary"
+  >
+    <h1>
+      My test content
+    </h1>
+  </CardSection>
+</Card>
+`;
+
+exports[`SettingsOption with additional sections snapshot: renders correct 1`] = `
+<Card
+  className=" settingsOption border border-light-700 shadow-none"
+>
+  <Card.Section
+    className="settingsCardTitleSection"
+    key="settingsOption-Settings Option Title-header"
+  >
+    <Advanced
+      onToggle={[Function]}
+      open={false}
+    >
+      <Trigger
+        className="collapsible-trigger d-flex"
+      >
+        <span
+          className="flex-grow-1 text-primary-500 x-small"
+        >
+          Settings Option Title
+        </span>
+        <Visible
+          whenClosed={true}
+        >
+          <Icon />
+        </Visible>
+        <Visible
+          whenOpen={true}
+        >
+          <Icon />
+        </Visible>
+      </Trigger>
+    </Advanced>
+  </Card.Section>
+  <CardSection
+    isCardCollapsibleOpen={false}
+    key="settingsOption-Settings Option Title-children"
+    none={false}
+    summary="Settings Option Summary"
+  >
+    <h1>
+      First Section
+    </h1>
+  </CardSection>
+  <Fragment>
+    <CardSection
+      isCardCollapsibleOpen={false}
+      key="settingsOption-Settings Option Title-0"
+      none={false}
+      summary={null}
+    />
+  </Fragment>
+  <Fragment>
+    <CardSection
+      isCardCollapsibleOpen={false}
+      key="settingsOption-Settings Option Title-1"
+      none={false}
+      summary={null}
+    />
+  </Fragment>
+</Card>
+`;
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/__snapshots__/index.test.jsx.snap b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/__snapshots__/index.test.jsx.snap
new file mode 100644
index 0000000000..0fcfc6ed06
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/__snapshots__/index.test.jsx.snap
@@ -0,0 +1,262 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SettingsWidget snapshot snapshot: renders Settings widget for Advanced Problem with correct widgets 1`] = `
+<div
+  className="settingsWidget ml-4"
+>
+  <div
+    className="mb-3"
+  >
+    <TypeCard
+      problemType="stringresponse"
+    />
+  </div>
+  <div
+    className="my-3"
+  >
+    <ScoringCard
+      defaultValue={2}
+    />
+  </div>
+  <div
+    className="mt-3"
+  >
+    <HintsCard
+      images={{}}
+      isLibrary={false}
+      learningContextId="course+org+run"
+      problemType="stringresponse"
+    />
+  </div>
+  <Fragment />
+  <div>
+    <Advanced
+      open={false}
+    >
+      <Body
+        className="collapsible-body small"
+      >
+        <Button
+          className="my-3 px-0 text-info-500"
+          size="inline"
+          variant="link"
+        >
+          <FormattedMessage
+            defaultMessage="Show advanced settings"
+            description="Button text to show advanced settings"
+            id="authoring.problemeditor.settings.showAdvancedButton"
+          />
+        </Button>
+      </Body>
+    </Advanced>
+  </div>
+  <Advanced
+    open={true}
+  >
+    <Body
+      className="collapsible-body"
+    >
+      <div
+        className="my-3"
+      >
+        <ShowAnswerCard
+          defaultValue="finished"
+        />
+      </div>
+      <div
+        className="my-3"
+      >
+        <ResetCard
+          defaultValue={false}
+        />
+      </div>
+      <div
+        className="my-3"
+      >
+        <TimerCard />
+      </div>
+      <div
+        className="my-3"
+      >
+        <SwitchToAdvancedEditorCard
+          problemType="stringresponse"
+        />
+      </div>
+    </Body>
+  </Advanced>
+</div>
+`;
+
+exports[`SettingsWidget snapshot snapshot: renders Settings widget page 1`] = `
+<div
+  className="settingsWidget ml-4"
+>
+  <div
+    className="mb-3"
+  >
+    <TypeCard
+      problemType="stringresponse"
+    />
+  </div>
+  <div
+    className="my-3"
+  >
+    <ScoringCard
+      defaultValue={2}
+    />
+  </div>
+  <div
+    className="mt-3"
+  >
+    <HintsCard
+      images={{}}
+      isLibrary={false}
+      learningContextId="course+org+run"
+      problemType="stringresponse"
+    />
+  </div>
+  <Fragment />
+  <div>
+    <Advanced
+      open={true}
+    >
+      <Body
+        className="collapsible-body small"
+      >
+        <Button
+          className="my-3 px-0 text-info-500"
+          size="inline"
+          variant="link"
+        >
+          <FormattedMessage
+            defaultMessage="Show advanced settings"
+            description="Button text to show advanced settings"
+            id="authoring.problemeditor.settings.showAdvancedButton"
+          />
+        </Button>
+      </Body>
+    </Advanced>
+  </div>
+  <Advanced
+    open={false}
+  >
+    <Body
+      className="collapsible-body"
+    >
+      <div
+        className="my-3"
+      >
+        <ShowAnswerCard
+          defaultValue="finished"
+        />
+      </div>
+      <div
+        className="my-3"
+      >
+        <ResetCard
+          defaultValue={false}
+        />
+      </div>
+      <div
+        className="my-3"
+      >
+        <TimerCard />
+      </div>
+      <div
+        className="my-3"
+      >
+        <SwitchToAdvancedEditorCard
+          problemType="stringresponse"
+        />
+      </div>
+    </Body>
+  </Advanced>
+</div>
+`;
+
+exports[`SettingsWidget snapshot snapshot: renders Settings widget page advanced settings visible 1`] = `
+<div
+  className="settingsWidget ml-4"
+>
+  <div
+    className="mb-3"
+  >
+    <TypeCard
+      problemType="stringresponse"
+    />
+  </div>
+  <div
+    className="my-3"
+  >
+    <ScoringCard
+      defaultValue={2}
+    />
+  </div>
+  <div
+    className="mt-3"
+  >
+    <HintsCard
+      images={{}}
+      isLibrary={false}
+      learningContextId="course+org+run"
+      problemType="stringresponse"
+    />
+  </div>
+  <Fragment />
+  <div>
+    <Advanced
+      open={false}
+    >
+      <Body
+        className="collapsible-body small"
+      >
+        <Button
+          className="my-3 px-0 text-info-500"
+          size="inline"
+          variant="link"
+        >
+          <FormattedMessage
+            defaultMessage="Show advanced settings"
+            description="Button text to show advanced settings"
+            id="authoring.problemeditor.settings.showAdvancedButton"
+          />
+        </Button>
+      </Body>
+    </Advanced>
+  </div>
+  <Advanced
+    open={true}
+  >
+    <Body
+      className="collapsible-body"
+    >
+      <div
+        className="my-3"
+      >
+        <ShowAnswerCard
+          defaultValue="finished"
+        />
+      </div>
+      <div
+        className="my-3"
+      >
+        <ResetCard
+          defaultValue={false}
+        />
+      </div>
+      <div
+        className="my-3"
+      >
+        <TimerCard />
+      </div>
+      <div
+        className="my-3"
+      >
+        <SwitchToAdvancedEditorCard
+          problemType="stringresponse"
+        />
+      </div>
+    </Body>
+  </Advanced>
+</div>
+`;
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/hooks.js b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/hooks.js
new file mode 100644
index 0000000000..5f10f22894
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/hooks.js
@@ -0,0 +1,333 @@
+import { useState, useEffect } from 'react';
+
+import _ from 'lodash';
+// This 'module' self-import hack enables mocking during tests.
+// See src/editors/decisions/0005-internal-editor-testability-decisions.md. The whole approach to how hooks are tested
+// should be re-thought and cleaned up to avoid this pattern.
+// eslint-disable-next-line import/no-self-import
+import * as module from './hooks';
+import messages from './messages';
+import {
+  ProblemTypeKeys,
+  ProblemTypes,
+  RichTextProblems,
+  ShowAnswerTypesKeys,
+} from '../../../../../data/constants/problem';
+import { fetchEditorContent } from '../hooks';
+
+export const state = {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  showAdvanced: (val) => useState(val),
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  cardCollapsed: (val) => useState(val),
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  summary: (val) => useState(val),
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  showAttempts: (val) => useState(val),
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  attemptDisplayValue: (val) => useState(val),
+};
+
+export const showAdvancedSettingsCards = () => {
+  const [isAdvancedCardsVisible, setIsAdvancedCardsVisible] = module.state.showAdvanced(false);
+  return {
+    isAdvancedCardsVisible,
+    showAdvancedCards: () => setIsAdvancedCardsVisible(true),
+  };
+};
+
+export const showFullCard = (hasExpandableTextArea) => {
+  const [isCardCollapsibleOpen, setIsCardCollapsibleOpen] = module.state.cardCollapsed(hasExpandableTextArea);
+  return {
+    isCardCollapsibleOpen,
+    toggleCardCollapse: () => {
+      if (hasExpandableTextArea) {
+        setIsCardCollapsibleOpen(true);
+      } else {
+        setIsCardCollapsibleOpen(!isCardCollapsibleOpen);
+      }
+    },
+  };
+};
+
+export const hintsCardHooks = (hints, updateSettings) => {
+  const [summary, setSummary] = module.state.summary({ message: messages.noHintSummary, values: {} });
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useEffect(() => {
+    const hintsNumber = hints.length;
+    if (hintsNumber === 0) {
+      setSummary({ message: messages.noHintSummary, values: {} });
+    } else {
+      setSummary({ message: messages.hintSummary, values: { hint: hints[0].value, count: (hintsNumber - 1) } });
+    }
+  }, [hints]);
+
+  const handleAdd = () => {
+    let newId = 0;
+    if (!_.isEmpty(hints)) {
+      newId = Math.max(...hints.map(hint => hint.id)) + 1;
+    }
+    const hint = { id: newId, value: '' };
+    const modifiedHints = [...hints, hint];
+    updateSettings({ hints: modifiedHints });
+  };
+
+  return {
+    summary,
+    handleAdd,
+  };
+};
+
+export const hintsRowHooks = (id, hints, updateSettings) => {
+  const handleChange = (value) => {
+    const modifiedHints = hints.map(hint => {
+      if (hint.id === id) {
+        return { ...hint, value };
+      }
+      return hint;
+    });
+    updateSettings({ hints: modifiedHints });
+  };
+
+  const handleDelete = () => {
+    const modifiedHints = hints.filter((hint) => (hint.id !== id));
+    updateSettings({ hints: modifiedHints });
+  };
+
+  return {
+    handleChange,
+    handleDelete,
+  };
+};
+
+export const resetCardHooks = (updateSettings) => {
+  const setReset = (value) => {
+    updateSettings({ showResetButton: value });
+  };
+
+  return {
+    setResetTrue: () => setReset(true),
+    setResetFalse: () => setReset(false),
+  };
+};
+
+export const scoringCardHooks = (scoring, updateSettings, defaultValue) => {
+  let loadedAttemptsNumber = scoring.attempts.number;
+  if ((loadedAttemptsNumber === defaultValue || !_.isFinite(loadedAttemptsNumber)) && _.isFinite(defaultValue)) {
+    loadedAttemptsNumber = `${defaultValue} (Default)`;
+  } else if (loadedAttemptsNumber === defaultValue && _.isNil(defaultValue)) {
+    loadedAttemptsNumber = '';
+  }
+  const [attemptDisplayValue, setAttemptDisplayValue] = module.state.attemptDisplayValue(loadedAttemptsNumber);
+
+  const handleUnlimitedChange = (event) => {
+    const isUnlimited = event.target.checked;
+    if (isUnlimited) {
+      setAttemptDisplayValue('');
+      updateSettings({ scoring: { ...scoring, attempts: { number: null, unlimited: true } } });
+    } else {
+      updateSettings({ scoring: { ...scoring, attempts: { number: null, unlimited: false } } });
+    }
+  };
+
+  const handleMaxAttemptChange = (event) => {
+    let unlimitedAttempts = false;
+    let attemptNumber = parseInt(event.target.value, 10);
+
+    if (!_.isFinite(attemptNumber) || attemptNumber === defaultValue) {
+      attemptNumber = null;
+      if (_.isFinite(defaultValue)) {
+        setAttemptDisplayValue(`${defaultValue} (Default)`);
+      } else {
+        setAttemptDisplayValue('');
+        unlimitedAttempts = true;
+      }
+    } else if (attemptNumber <= 0) {
+      attemptNumber = 0;
+    }
+
+    updateSettings({ scoring: { ...scoring, attempts: { number: attemptNumber, unlimited: unlimitedAttempts } } });
+  };
+
+  const handleOnChange = (event) => {
+    let newMaxAttempt = parseInt(event.target.value, 10);
+    if (newMaxAttempt === defaultValue) {
+      newMaxAttempt = `${defaultValue} (Default)`;
+    } else if (_.isNaN(newMaxAttempt)) {
+      newMaxAttempt = '';
+    } else if (newMaxAttempt < 0) {
+      newMaxAttempt = 0;
+    }
+    setAttemptDisplayValue(newMaxAttempt);
+  };
+
+  const handleWeightChange = (event) => {
+    let weight = parseFloat(event.target.value);
+    if (_.isNaN(weight) || weight < 0) {
+      weight = 0;
+    }
+    updateSettings({ scoring: { ...scoring, weight } });
+  };
+
+  return {
+    attemptDisplayValue,
+    handleUnlimitedChange,
+    handleMaxAttemptChange,
+    handleOnChange,
+    handleWeightChange,
+  };
+};
+
+export const useAnswerSettings = (showAnswer, updateSettings) => {
+  const [showAttempts, setShowAttempts] = module.state.showAttempts(false);
+
+  const numberOfAttemptsChoice = [
+    ShowAnswerTypesKeys.AFTER_SOME_NUMBER_OF_ATTEMPTS,
+  ];
+
+  useEffect(() => {
+    setShowAttempts(_.includes(numberOfAttemptsChoice, showAnswer.on));
+  }, [showAttempts]);
+
+  const handleShowAnswerChange = (event) => {
+    const { value } = event.target;
+    setShowAttempts(_.includes(numberOfAttemptsChoice, value));
+    updateSettings({ showAnswer: { ...showAnswer, on: value } });
+  };
+
+  const handleAttemptsChange = (event) => {
+    let attempts = parseInt(event.target.value, 10);
+    if (_.isNaN(attempts) || attempts < 0) {
+      attempts = 0;
+    }
+    updateSettings({ showAnswer: { ...showAnswer, afterAttempts: attempts } });
+  };
+
+  return {
+    handleShowAnswerChange,
+    handleAttemptsChange,
+    showAttempts,
+  };
+};
+
+export const timerCardHooks = (updateSettings) => ({
+  handleChange: (event) => {
+    let time = parseInt(event.target.value, 10);
+    if (_.isNaN(time) || time < 0) {
+      time = 0;
+    }
+    updateSettings({ timeBetween: time });
+  },
+});
+
+export const typeRowHooks = ({
+  answers,
+  blockTitle,
+  correctAnswerCount,
+  problemType,
+  setBlockTitle,
+  typeKey,
+  updateField,
+  updateAnswer,
+}) => {
+  const clearPreviouslySelectedAnswers = () => {
+    let currentAnswerTitles;
+    const { selectedFeedback, unselectedFeedback, ...editorContent } = fetchEditorContent({ format: 'text' });
+    if (RichTextProblems.includes(problemType)) {
+      currentAnswerTitles = editorContent.answers;
+    }
+    answers.forEach(answer => {
+      const title = currentAnswerTitles?.[answer.id] || answer.title;
+      if (answer.correct) {
+        updateAnswer({
+          ...answer,
+          title,
+          selectedFeedback,
+          unselectedFeedback,
+          correct: false,
+        });
+      } else {
+        updateAnswer({
+          ...answer,
+          selectedFeedback,
+          unselectedFeedback,
+          title,
+        });
+      }
+    });
+  };
+
+  const updateAnswersToCorrect = () => {
+    let currentAnswerTitles;
+    const { selectedFeedback, unselectedFeedback, ...editorContent } = fetchEditorContent({ format: 'text' });
+    if (RichTextProblems.includes(problemType)) {
+      currentAnswerTitles = editorContent.answers;
+    }
+    answers.forEach(answer => {
+      const title = currentAnswerTitles ? currentAnswerTitles[answer.id] : answer.title;
+      updateAnswer({
+        ...answer,
+        title,
+        selectedFeedback,
+        unselectedFeedback,
+        correct: true,
+      });
+    });
+  };
+
+  const convertToPlainText = () => {
+    const { selectedFeedback, unselectedFeedback, ...editorContent } = fetchEditorContent({ format: 'text' });
+    const currentAnswerTitles = editorContent.answers;
+    answers.forEach(answer => {
+      updateAnswer({
+        ...answer,
+        selectedFeedback,
+        unselectedFeedback,
+        title: currentAnswerTitles[answer.id],
+      });
+    });
+  };
+
+  const onClick = () => {
+    // Numeric, text, and dropdowns cannot render HTML as answer values, so if switching from a single select
+    // or multi-select problem the rich text needs to covert to plain text
+    if (typeKey === ProblemTypeKeys.TEXTINPUT && RichTextProblems.includes(problemType)) {
+      convertToPlainText();
+    }
+    // Dropdown problems can only have one correct answer. When there is more than one correct answer
+    // from a previous problem type, the correct attribute for selected answers need to be set to false.
+    if (typeKey === ProblemTypeKeys.DROPDOWN) {
+      if (correctAnswerCount > 1) {
+        clearPreviouslySelectedAnswers();
+      } else if (RichTextProblems.includes(problemType)) {
+        convertToPlainText();
+      }
+    }
+    // Numeric input problems can only have correct answers. Switch all answers to correct when switching
+    // to numeric input.
+    if (typeKey === ProblemTypeKeys.NUMERIC) {
+      updateAnswersToCorrect();
+    }
+
+    if (blockTitle === ProblemTypes[problemType].title) {
+      setBlockTitle(ProblemTypes[typeKey].title);
+    }
+    updateField({ problemType: typeKey });
+  };
+  return {
+    onClick,
+  };
+};
+
+export const confirmSwitchToAdvancedEditor = ({
+  switchToAdvancedEditor,
+  setConfirmOpen,
+}) => {
+  switchToAdvancedEditor();
+  setConfirmOpen(false);
+  window.scrollTo({
+    top: 0,
+    behavior: 'smooth',
+  });
+};
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/hooks.test.js b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/hooks.test.js
new file mode 100644
index 0000000000..2576025a99
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/hooks.test.js
@@ -0,0 +1,397 @@
+import { useEffect } from 'react';
+import { MockUseState } from '../../../../../testUtils';
+import messages from './messages';
+import { keyStore } from '../../../../../utils';
+import * as hooks from './hooks';
+import { ProblemTypeKeys, ProblemTypes } from '../../../../../data/constants/problem';
+import * as editHooks from '../hooks';
+
+jest.mock('react', () => {
+  const updateState = jest.fn();
+  return {
+    updateState,
+    useEffect: jest.fn(),
+    useState: jest.fn(val => ([{ state: val }, (newVal) => updateState({ val, newVal })])),
+  };
+});
+
+jest.mock('@edx/frontend-platform/i18n', () => ({
+  defineMessages: m => m,
+}));
+
+jest.mock('../../../../../data/redux', () => ({
+  actions: {
+    problem: {
+      updateSettings: (args) => ({ updateSettings: args }),
+      updateField: (args) => ({ updateField: args }),
+      updateAnswer: (args) => ({ updateAnswer: args }),
+    },
+  },
+}));
+
+const state = new MockUseState(hooks);
+const moduleKeys = keyStore(editHooks);
+
+describe('Problem settings hooks', () => {
+  let output;
+  let updateSettings;
+  beforeEach(() => {
+    updateSettings = jest.fn();
+    state.mock();
+  });
+  afterEach(() => {
+    state.restore();
+    useEffect.mockClear();
+  });
+  describe('Show advanced settings', () => {
+    beforeEach(() => {
+      output = hooks.showAdvancedSettingsCards();
+    });
+    test('test default state is false', () => {
+      expect(output.isAdvancedCardsVisible).toBeFalsy();
+    });
+    test('test showAdvancedCards sets state to true', () => {
+      output.showAdvancedCards();
+      expect(state.setState[state.keys.showAdvanced]).toHaveBeenCalledWith(true);
+    });
+  });
+  describe('Show full card', () => {
+    beforeEach(() => {
+      output = hooks.showFullCard();
+    });
+    test('test default state is false', () => {
+      expect(output.isCardCollapsibleOpen).toBeFalsy();
+    });
+    test('test toggleCardCollapse to true', () => {
+      output.toggleCardCollapse();
+      expect(state.setState[state.keys.cardCollapsed]).toHaveBeenCalledWith(true);
+    });
+    test('test toggleCardCollapse to true', () => {
+      output = hooks.showFullCard(true);
+      output.toggleCardCollapse();
+      expect(state.setState[state.keys.cardCollapsed]).toHaveBeenCalledWith(true);
+    });
+  });
+
+  describe('Hint card hooks', () => {
+    test('test useEffect triggers set hints summary no hint', () => {
+      const hints = [];
+      hooks.hintsCardHooks(hints, updateSettings);
+      expect(state.setState[state.keys.summary]).not.toHaveBeenCalled();
+      const [cb, prereqs] = useEffect.mock.calls[0];
+      expect(prereqs).toStrictEqual([[]]);
+      cb();
+      expect(state.setState[state.keys.summary])
+        .toHaveBeenCalledWith({ message: messages.noHintSummary, values: {} });
+    });
+    test('test useEffect triggers set hints summary', () => {
+      const hints = [{ id: 1, value: 'hint1' }];
+      output = hooks.hintsCardHooks(hints, updateSettings);
+      expect(state.setState[state.keys.summary]).not.toHaveBeenCalled();
+      const [cb, prereqs] = useEffect.mock.calls[0];
+      expect(prereqs).toStrictEqual([[{ id: 1, value: 'hint1' }]]);
+      cb();
+      expect(state.setState[state.keys.summary])
+        .toHaveBeenCalledWith({
+          message: messages.hintSummary,
+          values: { hint: hints[0].value, count: (hints.length - 1) },
+        });
+    });
+    test('test handleAdd triggers updateSettings', () => {
+      const hint1 = { id: 1, value: 'hint1' };
+      const hint2 = { id: 2, value: '' };
+      const hints = [hint1];
+      output = hooks.hintsCardHooks(hints, updateSettings);
+      output.handleAdd();
+      expect(updateSettings).toHaveBeenCalledWith({ hints: [hint1, hint2] });
+    });
+  });
+  describe('Hint rows hooks', () => {
+    const hint1 = { id: 1, value: 'hint1' };
+    const hint2 = { id: 2, value: '' };
+    const value = 'modifiedHint';
+    const modifiedHint = { id: 2, value };
+    const hints = [hint1, hint2];
+    beforeEach(() => {
+      output = hooks.hintsRowHooks(2, hints, updateSettings);
+    });
+    test('test handleChange', () => {
+      output.handleChange(value);
+      expect(updateSettings).toHaveBeenCalledWith({ hints: [hint1, modifiedHint] });
+    });
+    test('test handleDelete', () => {
+      output.handleDelete();
+      expect(updateSettings).toHaveBeenCalledWith({ hints: [hint1] });
+    });
+  });
+
+  describe('Reset card hooks', () => {
+    beforeEach(() => {
+      output = hooks.resetCardHooks(updateSettings);
+    });
+    test('test setResetTrue', () => {
+      output.setResetTrue();
+      expect(updateSettings).toHaveBeenCalledWith({ showResetButton: true });
+    });
+    test('test setResetFalse', () => {
+      output.setResetFalse();
+      expect(updateSettings).toHaveBeenCalledWith({ showResetButton: false });
+    });
+  });
+
+  describe('Scoring card hooks', () => {
+    const scoring = {
+      weight: 1.5,
+      attempts: {
+        unlimited: false,
+        number: 5,
+      },
+    };
+    const defaultValue = 1;
+    test('test scoringCardHooks initializes display value when attempts.number is null', () => {
+      const nilScoring = { ...scoring, attempts: { unlimited: false, number: null } };
+      output = hooks.scoringCardHooks(nilScoring, updateSettings, defaultValue);
+      expect(state.stateVals[state.keys.attemptDisplayValue]).toEqual(`${defaultValue} (Default)`);
+    });
+    test('test scoringCardHooks initializes display value when attempts.number is blank', () => {
+      const nilScoring = { ...scoring, attempts: { unlimited: false, number: '' } };
+      output = hooks.scoringCardHooks(nilScoring, updateSettings, defaultValue);
+      expect(state.stateVals[state.keys.attemptDisplayValue]).toEqual(`${defaultValue} (Default)`);
+    });
+    test('test scoringCardHooks initializes display value when attempts.number is not null', () => {
+      const nonNilScoring = { ...scoring, attempts: { unlimited: false, number: 2 } };
+      output = hooks.scoringCardHooks(nonNilScoring, updateSettings, defaultValue);
+      expect(state.stateVals[state.keys.attemptDisplayValue]).toEqual(2);
+    });
+    test('test scoringCardHooks initializes display value when attempts.number and defaultValue is null', () => {
+      const nonNilScoring = { ...scoring, attempts: { unlimited: false, number: null } };
+      output = hooks.scoringCardHooks(nonNilScoring, updateSettings, null);
+      expect(state.stateVals[state.keys.attemptDisplayValue]).toEqual('');
+    });
+    beforeEach(() => {
+      output = hooks.scoringCardHooks(scoring, updateSettings, defaultValue);
+    });
+    test('test handleUnlimitedChange sets attempts.unlimited to true when checked', () => {
+      output.handleUnlimitedChange({ target: { checked: true } });
+      expect(state.setState[state.keys.attemptDisplayValue]).toHaveBeenCalledWith('');
+      expect(updateSettings)
+        .toHaveBeenCalledWith({ scoring: { ...scoring, attempts: { number: null, unlimited: true } } });
+    });
+    test('test handleUnlimitedChange sets attempts.unlimited to false when unchecked', () => {
+      output.handleUnlimitedChange({ target: { checked: false } });
+      expect(updateSettings)
+        .toHaveBeenCalledWith({ scoring: { ...scoring, attempts: { number: null, unlimited: false } } });
+    });
+    test('test handleMaxAttemptChange', () => {
+      const value = 6;
+      output.handleMaxAttemptChange({ target: { value } });
+      expect(updateSettings)
+        .toHaveBeenCalledWith({ scoring: { ...scoring, attempts: { number: value, unlimited: false } } });
+    });
+    test('test handleMaxAttemptChange set attempts to zero', () => {
+      const value = 0;
+      output.handleMaxAttemptChange({ target: { value } });
+      expect(updateSettings)
+        .toHaveBeenCalledWith({ scoring: { ...scoring, attempts: { number: value, unlimited: false } } });
+    });
+    test('test handleMaxAttemptChange set attempts to null value when default max_attempts is present', () => {
+      const value = null;
+      output.handleMaxAttemptChange({ target: { value } });
+      expect(updateSettings)
+        .toHaveBeenCalledWith({ scoring: { ...scoring, attempts: { number: null, unlimited: false } } });
+    });
+    test('test handleMaxAttemptChange set attempts to null when default value is inputted', () => {
+      const value = '1 (Default)';
+      output.handleMaxAttemptChange({ target: { value } });
+      expect(updateSettings)
+        .toHaveBeenCalledWith({ scoring: { ...scoring, attempts: { number: null, unlimited: false } } });
+    });
+    test('test handleMaxAttemptChange set attempts to non-numeric value', () => {
+      const value = 'abc';
+      output.handleMaxAttemptChange({ target: { value } });
+      expect(updateSettings)
+        .toHaveBeenCalledWith({ scoring: { ...scoring, attempts: { number: null, unlimited: false } } });
+    });
+    test('test handleMaxAttemptChange set attempts to empty value', () => {
+      const value = '';
+      output.handleMaxAttemptChange({ target: { value } });
+      expect(state.setState[state.keys.attemptDisplayValue]).toHaveBeenCalledWith(`${defaultValue} (Default)`);
+      expect(updateSettings)
+        .toHaveBeenCalledWith({ scoring: { ...scoring, attempts: { number: null, unlimited: false } } });
+    });
+    test('test handleMaxAttemptChange set attempts to negative value', () => {
+      const value = -1;
+      output.handleMaxAttemptChange({ target: { value } });
+      expect(updateSettings)
+        .toHaveBeenCalledWith({ scoring: { ...scoring, attempts: { number: 0, unlimited: false } } });
+    });
+    test('test handleMaxAttemptChange set attempts to empty value with no default', () => {
+      const value = '';
+      output = hooks.scoringCardHooks(scoring, updateSettings, null);
+      output.handleMaxAttemptChange({ target: { value } });
+      expect(state.setState[state.keys.attemptDisplayValue]).toHaveBeenCalledWith('');
+      expect(updateSettings)
+        .toHaveBeenCalledWith({ scoring: { ...scoring, attempts: { number: null, unlimited: true } } });
+    });
+    test('test handleOnChange', () => {
+      const value = 6;
+      output.handleOnChange({ target: { value } });
+      expect(state.setState[state.keys.attemptDisplayValue]).toHaveBeenCalledWith(value);
+    });
+    test('test handleOnChange set attempts to zero', () => {
+      const value = 0;
+      output.handleOnChange({ target: { value } });
+      expect(state.setState[state.keys.attemptDisplayValue]).toHaveBeenCalledWith(value);
+    });
+    test('test handleOnChange set attempts to default value from empty string', () => {
+      const value = '';
+      output.handleOnChange({ target: { value } });
+      expect(state.setState[state.keys.attemptDisplayValue]).toHaveBeenCalledWith('');
+    });
+    test('test handleOnChange set attempts to default value', () => {
+      const value = 1;
+      output.handleOnChange({ target: { value } });
+      expect(state.setState[state.keys.attemptDisplayValue]).toHaveBeenCalledWith('1 (Default)');
+    });
+    test('test handleOnChange set attempts to non-numeric value', () => {
+      const value = '';
+      output.handleOnChange({ target: { value } });
+      expect(state.setState[state.keys.attemptDisplayValue]).toHaveBeenCalledWith(value);
+    });
+    test('test handleOnChange set attempts to negative value', () => {
+      const value = -1;
+      output.handleOnChange({ target: { value } });
+      expect(state.setState[state.keys.attemptDisplayValue]).toHaveBeenCalledWith(0);
+    });
+    test('test handleWeightChange', () => {
+      const value = 2;
+      output.handleWeightChange({ target: { value } });
+      expect(updateSettings).toHaveBeenCalledWith({ scoring: { ...scoring, weight: parseFloat(value) } });
+    });
+  });
+
+  describe('Show answer card hooks', () => {
+    const showAnswer = {
+      on: 'after_attempts',
+      afterAttempts: 5,
+    };
+    beforeEach(() => {
+      output = hooks.useAnswerSettings(showAnswer, updateSettings);
+    });
+    test('test handleShowAnswerChange', () => {
+      const value = 'always';
+      output.handleShowAnswerChange({ target: { value } });
+      expect(updateSettings).toHaveBeenCalledWith({ showAnswer: { ...showAnswer, on: value } });
+    });
+    test('test handleAttemptsChange', () => {
+      const value = 3;
+      output.handleAttemptsChange({ target: { value } });
+      expect(updateSettings).toHaveBeenCalledWith({
+        showAnswer: { ...showAnswer, afterAttempts: parseInt(value, 10) },
+      });
+    });
+  });
+
+  describe('Timer card hooks', () => {
+    test('test handleChange', () => {
+      output = hooks.timerCardHooks(updateSettings);
+      const value = 5;
+      output.handleChange({ target: { value } });
+      expect(updateSettings).toHaveBeenCalledWith({ timeBetween: value });
+    });
+  });
+
+  describe('Type row hooks', () => {
+    const typeRowProps = {
+      problemType: ProblemTypeKeys.MULTISELECT,
+      typeKey: ProblemTypeKeys.DROPDOWN,
+      blockTitle: ProblemTypes[ProblemTypeKeys.MULTISELECT].title,
+      setBlockTitle: jest.fn(),
+      updateField: jest.fn(),
+      updateAnswer: jest.fn(),
+      correctAnswerCount: 2,
+      answers: [
+        { correct: true, id: 'a', title: '<p>testA</p>' },
+        { correct: true, id: 'b', title: '<p>testB</p>' },
+        { correct: false, id: 'c', title: '<p>testC</p>' },
+      ],
+    };
+    const fetchEditorContent = () => ({
+      answers: {
+        a: 'testA',
+        b: 'testB',
+        c: 'testC',
+      },
+    });
+    beforeEach(() => {
+      jest.clearAllMocks();
+      jest.spyOn(editHooks, moduleKeys.fetchEditorContent)
+        .mockImplementationOnce(fetchEditorContent);
+    });
+    test('test onClick Multi-select to Dropdown', () => {
+      output = hooks.typeRowHooks(typeRowProps);
+      output.onClick();
+      expect(typeRowProps.setBlockTitle).toHaveBeenCalledWith(ProblemTypes[ProblemTypeKeys.DROPDOWN].title);
+      expect(typeRowProps.updateAnswer).toHaveBeenNthCalledWith(1, { ...typeRowProps.answers[0], correct: false, title: 'testA' });
+      expect(typeRowProps.updateAnswer).toHaveBeenNthCalledWith(2, { ...typeRowProps.answers[1], correct: false, title: 'testB' });
+      expect(typeRowProps.updateAnswer).toHaveBeenNthCalledWith(3, { ...typeRowProps.answers[2], correct: false, title: 'testC' });
+      expect(typeRowProps.updateField).toHaveBeenCalledWith({ problemType: ProblemTypeKeys.DROPDOWN });
+    });
+
+    test('test onClick Multi-select to Dropdown with one correct answer', () => {
+      const oneAnswerTypeRowProps = {
+        ...typeRowProps,
+        correctAnswerCount: 1,
+        answers: [
+          { correct: true, id: 'a', title: '<p>testA</p>' },
+          { correct: false, id: 'b', title: '<p>testB</p>' },
+          { correct: false, id: 'c', title: '<p>testC</p>' },
+        ],
+      };
+      output = hooks.typeRowHooks(oneAnswerTypeRowProps);
+      output.onClick();
+      expect(typeRowProps.setBlockTitle).toHaveBeenCalledWith(ProblemTypes[ProblemTypeKeys.DROPDOWN].title);
+      expect(typeRowProps.updateAnswer).toHaveBeenNthCalledWith(1, { ...oneAnswerTypeRowProps.answers[0], title: 'testA' });
+      expect(typeRowProps.updateAnswer).toHaveBeenNthCalledWith(2, { ...oneAnswerTypeRowProps.answers[1], title: 'testB' });
+      expect(typeRowProps.updateAnswer).toHaveBeenNthCalledWith(3, { ...oneAnswerTypeRowProps.answers[2], title: 'testC' });
+      expect(typeRowProps.updateField).toHaveBeenCalledWith({ problemType: ProblemTypeKeys.DROPDOWN });
+    });
+    test('test onClick Multi-select to Numeric', () => {
+      output = hooks.typeRowHooks({
+        ...typeRowProps,
+        typeKey: ProblemTypeKeys.NUMERIC,
+      });
+      output.onClick();
+      expect(typeRowProps.setBlockTitle).toHaveBeenCalledWith(ProblemTypes[ProblemTypeKeys.NUMERIC].title);
+      expect(typeRowProps.updateAnswer).toHaveBeenNthCalledWith(1, { ...typeRowProps.answers[0], correct: true, title: 'testA' });
+      expect(typeRowProps.updateAnswer).toHaveBeenNthCalledWith(2, { ...typeRowProps.answers[1], correct: true, title: 'testB' });
+      expect(typeRowProps.updateAnswer).toHaveBeenNthCalledWith(3, { ...typeRowProps.answers[2], correct: true, title: 'testC' });
+      expect(typeRowProps.updateField).toHaveBeenCalledWith({ problemType: ProblemTypeKeys.NUMERIC });
+    });
+
+    test('test onClick Multi-select to Text Input', () => {
+      output = hooks.typeRowHooks({
+        ...typeRowProps,
+        typeKey: ProblemTypeKeys.TEXTINPUT,
+      });
+      output.onClick();
+      expect(typeRowProps.setBlockTitle).toHaveBeenCalledWith(ProblemTypes[ProblemTypeKeys.TEXTINPUT].title);
+      expect(typeRowProps.updateAnswer).toHaveBeenNthCalledWith(1, { ...typeRowProps.answers[0], title: 'testA' });
+      expect(typeRowProps.updateAnswer).toHaveBeenNthCalledWith(2, { ...typeRowProps.answers[1], title: 'testB' });
+      expect(typeRowProps.updateAnswer).toHaveBeenNthCalledWith(3, { ...typeRowProps.answers[2], title: 'testC' });
+      expect(typeRowProps.updateField).toHaveBeenCalledWith({ problemType: ProblemTypeKeys.TEXTINPUT });
+    });
+  });
+  test('test confirmSwitchToAdvancedEditor hook', () => {
+    const switchToAdvancedEditor = jest.fn();
+    const setConfirmOpen = jest.fn();
+    window.scrollTo = jest.fn();
+    hooks.confirmSwitchToAdvancedEditor({
+      switchToAdvancedEditor,
+      setConfirmOpen,
+    });
+    expect(switchToAdvancedEditor).toHaveBeenCalled();
+    expect(setConfirmOpen).toHaveBeenCalledWith(false);
+    expect(window.scrollTo).toHaveBeenCalled();
+  });
+});
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/index.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/index.jsx
new file mode 100644
index 0000000000..095c44eddd
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/index.jsx
@@ -0,0 +1,214 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { injectIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
+import { connect } from 'react-redux';
+import {
+  Button, Collapsible,
+} from '@openedx/paragon';
+import { selectors, actions } from '../../../../../data/redux';
+import ScoringCard from './settingsComponents/ScoringCard';
+import ShowAnswerCard from './settingsComponents/ShowAnswerCard';
+import HintsCard from './settingsComponents/HintsCard';
+import ResetCard from './settingsComponents/ResetCard';
+import TimerCard from './settingsComponents/TimerCard';
+import TypeCard from './settingsComponents/TypeCard';
+import ToleranceCard from './settingsComponents/Tolerance';
+import GroupFeedbackCard from './settingsComponents/GroupFeedback/index';
+import SwitchToAdvancedEditorCard from './settingsComponents/SwitchToAdvancedEditorCard';
+import messages from './messages';
+import { showAdvancedSettingsCards } from './hooks';
+
+import './index.scss';
+import { ProblemTypeKeys } from '../../../../../data/constants/problem';
+import Randomization from './settingsComponents/Randomization';
+
+// This widget should be connected, grab all settings from store, update them as needed.
+const SettingsWidget = ({
+  problemType,
+  // redux
+  answers,
+  groupFeedbackList,
+  blockTitle,
+  correctAnswerCount,
+  settings,
+  setBlockTitle,
+  updateSettings,
+  updateField,
+  updateAnswer,
+  defaultSettings,
+  images,
+  isLibrary,
+  learningContextId,
+}) => {
+  const { isAdvancedCardsVisible, showAdvancedCards } = showAdvancedSettingsCards();
+
+  const feedbackCard = () => {
+    if ([ProblemTypeKeys.MULTISELECT].includes(problemType)) {
+      return (
+        <div className="mt-3"><GroupFeedbackCard
+          groupFeedbacks={groupFeedbackList}
+          updateSettings={updateField}
+          answers={answers}
+        />
+        </div>
+      );
+    }
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    return (<></>);
+  };
+
+  return (
+    <div className="settingsWidget ml-4">
+      <div className="mb-3">
+        <TypeCard
+          answers={answers}
+          blockTitle={blockTitle}
+          correctAnswerCount={correctAnswerCount}
+          problemType={problemType}
+          setBlockTitle={setBlockTitle}
+          updateField={updateField}
+          updateAnswer={updateAnswer}
+        />
+      </div>
+      {ProblemTypeKeys.NUMERIC === problemType
+          && (
+          <div className="my-3">
+            <ToleranceCard
+              updateSettings={updateSettings}
+              answers={answers}
+              tolerance={settings.tolerance}
+            />
+          </div>
+          )}
+      <div className="my-3">
+        <ScoringCard
+          scoring={settings.scoring}
+          defaultValue={defaultSettings.maxAttempts}
+          updateSettings={updateSettings}
+        />
+      </div>
+      <div className="mt-3">
+        <HintsCard
+          problemType={problemType}
+          hints={settings.hints}
+          updateSettings={updateSettings}
+          {...{
+            images,
+            isLibrary,
+            learningContextId,
+          }}
+        />
+      </div>
+      {feedbackCard()}
+      <div>
+        <Collapsible.Advanced open={!isAdvancedCardsVisible}>
+          <Collapsible.Body className="collapsible-body small">
+            <Button
+              className="my-3 px-0 text-info-500"
+              variant="link"
+              size="inline"
+              onClick={showAdvancedCards}
+            >
+              <FormattedMessage {...messages.showAdvanceSettingsButtonText} />
+            </Button>
+          </Collapsible.Body>
+        </Collapsible.Advanced>
+      </div>
+
+      <Collapsible.Advanced open={isAdvancedCardsVisible}>
+        <Collapsible.Body className="collapsible-body">
+          <div className="my-3">
+            <ShowAnswerCard
+              showAnswer={settings.showAnswer}
+              defaultValue={defaultSettings.showanswer}
+              updateSettings={updateSettings}
+            />
+          </div>
+          <div className="my-3">
+            <ResetCard
+              showResetButton={settings.showResetButton}
+              defaultValue={defaultSettings.showResetButton}
+              updateSettings={updateSettings}
+            />
+          </div>
+          {
+            problemType === ProblemTypeKeys.ADVANCED && (
+            <div className="my-3">
+              <Randomization
+                randomization={settings.randomization}
+                defaultValue={defaultSettings.rerandomize}
+                updateSettings={updateSettings}
+              />
+            </div>
+            )
+          }
+          <div className="my-3">
+            <TimerCard timeBetween={settings.timeBetween} updateSettings={updateSettings} />
+          </div>
+          <div className="my-3">
+            <SwitchToAdvancedEditorCard problemType={problemType} />
+          </div>
+        </Collapsible.Body>
+      </Collapsible.Advanced>
+    </div>
+  );
+};
+
+SettingsWidget.propTypes = {
+  answers: PropTypes.arrayOf(PropTypes.shape({
+    correct: PropTypes.bool,
+    id: PropTypes.string,
+    selectedFeedback: PropTypes.string,
+    title: PropTypes.string,
+    unselectedFeedback: PropTypes.string,
+  })).isRequired,
+  groupFeedbackList: PropTypes.arrayOf(
+    PropTypes.shape(
+      {
+        id: PropTypes.number,
+        feedback: PropTypes.string,
+        answers: PropTypes.arrayOf(PropTypes.string),
+      },
+    ),
+  ).isRequired,
+  blockTitle: PropTypes.string.isRequired,
+  correctAnswerCount: PropTypes.number.isRequired,
+  problemType: PropTypes.string.isRequired,
+  setBlockTitle: PropTypes.func.isRequired,
+  updateAnswer: PropTypes.func.isRequired,
+  updateField: PropTypes.func.isRequired,
+  updateSettings: PropTypes.func.isRequired,
+  defaultSettings: PropTypes.shape({
+    maxAttempts: PropTypes.number,
+    showanswer: PropTypes.string,
+    showResetButton: PropTypes.bool,
+    rerandomize: PropTypes.string,
+  }).isRequired,
+  images: PropTypes.shape({}).isRequired,
+  learningContextId: PropTypes.string.isRequired,
+  isLibrary: PropTypes.bool.isRequired,
+  // eslint-disable-next-line
+  settings: PropTypes.any.isRequired,
+};
+
+const mapStateToProps = (state) => ({
+  groupFeedbackList: selectors.problem.groupFeedbackList(state),
+  settings: selectors.problem.settings(state),
+  answers: selectors.problem.answers(state),
+  blockTitle: selectors.app.blockTitle(state),
+  correctAnswerCount: selectors.problem.correctAnswerCount(state),
+  defaultSettings: selectors.problem.defaultSettings(state),
+  images: selectors.app.images(state),
+  isLibrary: selectors.app.isLibrary(state),
+  learningContextId: selectors.app.learningContextId(state),
+});
+
+export const mapDispatchToProps = {
+  setBlockTitle: actions.app.setBlockTitle,
+  updateSettings: actions.problem.updateSettings,
+  updateField: actions.problem.updateField,
+  updateAnswer: actions.problem.updateAnswer,
+};
+
+export const SettingsWidgetInternal = SettingsWidget; // For testing only
+export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(SettingsWidget));
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/index.scss b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/index.scss
new file mode 100644
index 0000000000..ad6d2705a5
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/index.scss
@@ -0,0 +1,25 @@
+.settingsCardTitleSection {
+    padding-bottom: 0;
+}
+
+.halfSpacedMessage {
+    padding-bottom: .5rem;
+}
+
+.spacedMessage {
+    padding-bottom: 1.5rem;
+}
+
+.settingsWidget {
+    margin-top: 40px;
+
+    .pgn__form-text {
+        font-size: small;
+    }
+}
+
+.resetCard {
+    .resetSettingsButtons {
+        width: 100%;
+    }
+}
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/index.test.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/index.test.jsx
new file mode 100644
index 0000000000..1630753c05
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/index.test.jsx
@@ -0,0 +1,100 @@
+import 'CourseAuthoring/editors/setupEditorTest';
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+import { showAdvancedSettingsCards } from './hooks';
+import { SettingsWidgetInternal as SettingsWidget, mapDispatchToProps } from '.';
+import { ProblemTypeKeys } from '../../../../../data/constants/problem';
+import { actions } from '../../../../../data/redux';
+
+jest.mock('./hooks', () => ({
+  showAdvancedSettingsCards: jest.fn(),
+}));
+
+jest.mock('./settingsComponents/GeneralFeedback', () => 'GeneralFeedback');
+jest.mock('./settingsComponents/GroupFeedback', () => 'GroupFeedback');
+jest.mock('./settingsComponents/Randomization', () => 'Randomization');
+jest.mock('./settingsComponents/HintsCard', () => 'HintsCard');
+jest.mock('./settingsComponents/ResetCard', () => 'ResetCard');
+jest.mock('./settingsComponents/ScoringCard', () => 'ScoringCard');
+jest.mock('./settingsComponents/ShowAnswerCard', () => 'ShowAnswerCard');
+jest.mock('./settingsComponents/SwitchToAdvancedEditorCard', () => 'SwitchToAdvancedEditorCard');
+jest.mock('./settingsComponents/TimerCard', () => 'TimerCard');
+jest.mock('./settingsComponents/TypeCard', () => 'TypeCard');
+
+describe('SettingsWidget', () => {
+  const props = {
+    problemType: ProblemTypeKeys.TEXTINPUT,
+    settings: {},
+    defaultSettings: {
+      maxAttempts: 2,
+      showanswer: 'finished',
+      showResetButton: false,
+    },
+    images: {},
+    isLibrary: false,
+    learningContextId: 'course+org+run',
+  };
+
+  describe('behavior', () => {
+    it(' calls showAdvancedSettingsCards when initialized', () => {
+      const showAdvancedSettingsCardsProps = {
+        isAdvancedCardsVisible: false,
+        setResetTrue: jest.fn().mockName('showAdvancedSettingsCards.setResetTrue'),
+      };
+      showAdvancedSettingsCards.mockReturnValue(showAdvancedSettingsCardsProps);
+      shallow(<SettingsWidget {...props} />);
+      expect(showAdvancedSettingsCards).toHaveBeenCalledWith();
+    });
+  });
+
+  describe('snapshot', () => {
+    test('snapshot: renders Settings widget page', () => {
+      const showAdvancedSettingsCardsProps = {
+        isAdvancedCardsVisible: false,
+        setResetTrue: jest.fn().mockName('showAdvancedSettingsCards.setResetTrue'),
+      };
+      showAdvancedSettingsCards.mockReturnValue(showAdvancedSettingsCardsProps);
+      expect(shallow(<SettingsWidget {...props} />).snapshot).toMatchSnapshot();
+    });
+    test('snapshot: renders Settings widget page advanced settings visible', () => {
+      const showAdvancedSettingsCardsProps = {
+        isAdvancedCardsVisible: true,
+        setResetTrue: jest.fn().mockName('showAdvancedSettingsCards.setResetTrue'),
+      };
+      showAdvancedSettingsCards.mockReturnValue(showAdvancedSettingsCardsProps);
+      expect(shallow(<SettingsWidget {...props} />).snapshot).toMatchSnapshot();
+    });
+    test('snapshot: renders Settings widget for Advanced Problem with correct widgets', () => {
+      const showAdvancedSettingsCardsProps = {
+        isAdvancedCardsVisible: true,
+        setResetTrue: jest.fn().mockName('showAdvancedSettingsCards.setResetTrue'),
+      };
+      showAdvancedSettingsCards.mockReturnValue(showAdvancedSettingsCardsProps);
+      expect(shallow(<SettingsWidget problemType={ProblemTypeKeys.ADVANCED} {...props} />).snapshot).toMatchSnapshot();
+    });
+  });
+
+  describe('mapDispatchToProps', () => {
+    test('setBlockTitle from actions.app.setBlockTitle', () => {
+      expect(mapDispatchToProps.setBlockTitle).toEqual(actions.app.setBlockTitle);
+    });
+  });
+
+  describe('mapDispatchToProps', () => {
+    test('updateSettings from actions.problem.updateSettings', () => {
+      expect(mapDispatchToProps.updateSettings).toEqual(actions.problem.updateSettings);
+    });
+  });
+
+  describe('mapDispatchToProps', () => {
+    test('updateField from actions.problem.updateField', () => {
+      expect(mapDispatchToProps.updateField).toEqual(actions.problem.updateField);
+    });
+  });
+
+  describe('mapDispatchToProps', () => {
+    test('updateAnswer from actions.problem.updateAnswer', () => {
+      expect(mapDispatchToProps.updateAnswer).toEqual(actions.problem.updateAnswer);
+    });
+  });
+});
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/messages.js b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/messages.js
new file mode 100644
index 0000000000..26c5414a1c
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/messages.js
@@ -0,0 +1,192 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+
+  settingsWidgetTitle: {
+    id: 'authoring.problemeditor.settings.settingsWidgetTitle',
+    defaultMessage: 'Settings',
+    description: 'Settings Title',
+  },
+  showAdvanceSettingsButtonText: {
+    id: 'authoring.problemeditor.settings.showAdvancedButton',
+    defaultMessage: 'Show advanced settings',
+    description: 'Button text to show advanced settings',
+  },
+  settingsDeleteIconAltText: {
+    id: 'authoring.problemeditor.settings.delete.icon.alt',
+    defaultMessage: 'Delete answer',
+    description: 'Alt text for delete icon',
+  },
+  advancedSettingsLinkText: {
+    id: 'authoring.problemeditor.settings.advancedSettingLink.text',
+    defaultMessage: 'Set a default value in advanced settings',
+    description: 'Advanced settings link text',
+  },
+  hintSettingTitle: {
+    id: 'authoring.problemeditor.settings.hint.title',
+    defaultMessage: 'Hints',
+    description: 'Hint settings card title',
+  },
+  hintInputLabel: {
+    id: 'authoring.problemeditor.settings.hint.inputLabel',
+    defaultMessage: 'Hint',
+    description: 'Hint text input label',
+  },
+  addHintButtonText: {
+    id: 'authoring.problemeditor.settings.hint.addHintButton',
+    defaultMessage: 'Add hint',
+    description: 'Add hint button text',
+  },
+  noHintSummary: {
+    id: 'authoring.problemeditor.settings.hint.noHintSummary',
+    defaultMessage: 'None',
+    description: 'Summary text for no hints',
+  },
+  hintSummary: {
+    id: 'authoring.problemeditor.settings.hint.summary',
+    defaultMessage: '{hint} {count, plural, =0 {} other {(+# more)}}',
+    description: 'Summary text for hint settings',
+  },
+  resetSettingsTitle: {
+    id: 'authoring.problemeditor.settings.reset.title',
+    defaultMessage: 'Show reset option',
+    description: 'Reset settings card title',
+  },
+  resetSettingsTrue: {
+    id: 'authoring.problemeditor.settings.reset.true',
+    defaultMessage: 'True',
+    description: 'True option for reset',
+  },
+  resetSettingsFalse: {
+    id: 'authoring.problemeditor.settings.reset.false',
+    defaultMessage: 'False',
+    description: 'False option for reset',
+  },
+  resetSettingText: {
+    id: 'authoring.problemeditor.settings.reset.text',
+    defaultMessage: "Determines whether a 'Reset' button is shown so the user may reset their answer, generally for use in practice or formative assessments.",
+    description: 'Reset settings card text',
+  },
+  scoringSettingsTitle: {
+    id: 'authoring.problemeditor.settings.scoring.title',
+    defaultMessage: 'Scoring',
+    description: 'Scoring settings card title',
+  },
+  scoringAttemptsInputLabel: {
+    id: 'authoring.problemeditor.settings.scoring.attempts.inputLabel',
+    defaultMessage: 'Attempts',
+    description: 'Scoring attempts text input label',
+  },
+  scoringWeightInputLabel: {
+    id: 'authoring.problemeditor.settings.scoring.weight.inputLabel',
+    defaultMessage: 'Points',
+    description: 'Scoring weight input label',
+  },
+  unlimitedAttemptsSummary: {
+    id: 'authoring.problemeditor.settings.scoring.unlimited',
+    defaultMessage: 'Unlimited attempts',
+    description: 'Summary text for unlimited attempts',
+  },
+  attemptsSummary: {
+    id: 'authoring.problemeditor.settings.scoring.attempts',
+    defaultMessage: '{attempts, plural, =1 {# attempt} other {# attempts}}',
+    description: 'Summary text for number of attempts',
+  },
+  unlimitedAttemptsCheckboxLabel: {
+    id: 'authoring.problemeditor.settings.scoring.attempts.unlimitedCheckbox',
+    defaultMessage: 'Unlimited attempts',
+    description: 'Label for unlimited attempts checkbox',
+  },
+  weightSummary: {
+    id: 'authoring.problemeditor.settings.scoring.weight',
+    defaultMessage: '{weight, plural, =0 {Ungraded} other {# points}}',
+    description: 'Summary text for scoring weight',
+  },
+  scoringSettingsLabel: {
+    id: 'authoring.problemeditor.settings.scoring.label',
+    defaultMessage: 'Specify point weight and the number of answer attempts',
+    description: 'Descriptive text for scoring settings',
+  },
+  attemptsHint: {
+    id: 'authoring.problemeditor.settings.scoring.attempts.hint',
+    defaultMessage: 'If a default value is not set in advanced settings, unlimited attempts are allowed',
+    description: 'Summary text for scoring weight',
+  },
+  weightHint: {
+    id: 'authoring.problemeditor.settings.scoring.weight.hint',
+    defaultMessage: 'If a value is not set, the problem is worth one point',
+    description: 'Summary text for scoring weight',
+  },
+  showAnswerSettingsTitle: {
+    id: 'authoring.problemeditor.settings.showAnswer.title',
+    defaultMessage: 'Show answer',
+    description: 'Show Answer settings card title',
+  },
+  showAnswerAttemptsInputLabel: {
+    id: 'authoring.problemeditor.settings.showAnswer.attempts.inputLabel',
+    defaultMessage: 'Number of Attempts',
+    description: 'Show Answer attempts text input label',
+  },
+  showAnswerSettingText: {
+    id: 'authoring.problemeditor.settings.showAnswer.text',
+    defaultMessage: 'Define when learners can see the correct answer.',
+    description: 'Show Answer settings card text',
+  },
+  timerSettingsTitle: {
+    id: 'authoring.problemeditor.settings.timer.title',
+    defaultMessage: 'Time between attempts',
+    description: 'Timer settings card title',
+  },
+  timerSummary: {
+    id: 'authoring.problemeditor.settings.timer.summary',
+    defaultMessage: '{time} seconds',
+    description: 'Summary text for timer settings',
+  },
+  timerSettingText: {
+    id: 'authoring.problemeditor.settings.timer.text',
+    defaultMessage: 'Seconds a student must wait between submissions for a problem with multiple attempts.',
+    description: 'Timer settings card text',
+  },
+  timerInputLabel: {
+    id: 'authoring.problemeditor.settings.timer.inputLabel',
+    defaultMessage: 'Seconds',
+    description: 'Timer text input label',
+  },
+  typeSettingTitle: {
+    id: 'authoring.problemeditor.settings.type.title',
+    defaultMessage: 'Type',
+    description: 'Type settings card title',
+  },
+  SwitchButtonLabel: {
+    id: 'authoring.problemeditor.settings.switchtoadvancededitor.label',
+    defaultMessage: 'Switch to advanced editor',
+    description: 'button to switch to the advanced mode of the editor.',
+  },
+  ConfirmSwitchMessage: {
+    id: 'authoring.problemeditor.settings.switchtoadvancededitor.ConfirmSwitchMessage',
+    defaultMessage: 'If you use the advanced editor, this problem will be converted to OLX and you will not be able to return to the simple editor.',
+    description: 'message to confirm that a user wants to use the advanced editor',
+  },
+  ConfirmSwitchMessageTitle: {
+    id: 'authoring.problemeditor.settings.switchtoadvancededitor.ConfirmSwitchMessageTitle',
+    defaultMessage: 'Convert to OLX?',
+    description: 'message to confirm that a user wants to use the advanced editor',
+  },
+  ConfirmSwitchButtonLabel: {
+    id: 'authoring.problemeditor.settings.switchtoadvancededitor.ConfirmSwitchButtonLabel',
+    defaultMessage: 'Switch to advanced editor',
+    description: 'message to confirm that a user wants to use the advanced editor',
+  },
+  explanationInputLabel: {
+    id: 'authoring.problemeditor.settings.showAnswer.explanation.inputLabel',
+    defaultMessage: 'Explanation',
+    description: 'answer explanation input label',
+  },
+  explanationSettingText: {
+    id: 'authoring.problemeditor.settings.showAnswer.explanation.text',
+    defaultMessage: 'Provide an explanation for the correct answer.',
+    description: 'Solution Explanation text',
+  },
+});
+
+export default messages;
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/GeneralFeedback/__snapshots__/index.test.jsx.snap b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/GeneralFeedback/__snapshots__/index.test.jsx.snap
new file mode 100644
index 0000000000..4912079ebd
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/GeneralFeedback/__snapshots__/index.test.jsx.snap
@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RandomizationCard snapshot snapshot: renders general feedback setting card 1`] = `
+<SettingsOption
+  className=""
+  extraSections={[]}
+  hasExpandableTextArea={false}
+  none={false}
+  summary={
+    {
+      "defaultMessage": "sUmmary",
+    }
+  }
+  title="General Feedback"
+>
+  <div
+    className="halfSpacedMessage"
+  >
+    <span>
+      <FormattedMessage
+        defaultMessage="Enter the feedback to appear when a student submits a wrong answer. This will be overridden if you add answer-specific feedback."
+        description="description for general feedback input, clariying useage"
+        id="authoring.problemeditor.settings.generalFeedbackInputDescription"
+      />
+    </span>
+  </div>
+  <Form.Group>
+    <Form.Control
+      floatingLabel="Enter General Feedback"
+      onChange={[MockFunction randomizationCardHooks.handleChange]}
+      value="sOmE_vAlUE"
+    />
+  </Form.Group>
+</SettingsOption>
+`;
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/GeneralFeedback/hooks.js b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/GeneralFeedback/hooks.js
new file mode 100644
index 0000000000..c168392b37
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/GeneralFeedback/hooks.js
@@ -0,0 +1,41 @@
+import { useState, useEffect } from 'react';
+import _ from 'lodash';
+import messages from './messages';
+// This 'module' self-import hack enables mocking during tests.
+// See src/editors/decisions/0005-internal-editor-testability-decisions.md. The whole approach to how hooks are tested
+// should be re-thought and cleaned up to avoid this pattern.
+// eslint-disable-next-line import/no-self-import
+import * as module from './hooks';
+
+export const state = {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  summary: (val) => useState(val),
+};
+
+export const generalFeedbackHooks = (generalFeedback, updateSettings) => {
+  const [summary, setSummary] = module.state.summary({
+    message: messages.noGeneralFeedbackSummary, values: {}, intl: true,
+  });
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useEffect(() => {
+    if (_.isEmpty(generalFeedback)) {
+      setSummary({ message: messages.noGeneralFeedbackSummary, values: {}, intl: true });
+    } else {
+      setSummary({
+        message: generalFeedback,
+        values: {},
+        intl: false,
+      });
+    }
+  }, [generalFeedback]);
+
+  const handleChange = (event) => {
+    updateSettings({ generalFeedback: event.target.value });
+  };
+
+  return {
+    summary,
+    handleChange,
+  };
+};
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/GeneralFeedback/hooks.test.js b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/GeneralFeedback/hooks.test.js
new file mode 100644
index 0000000000..5d5c98d528
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/GeneralFeedback/hooks.test.js
@@ -0,0 +1,47 @@
+import { useEffect } from 'react';
+import { MockUseState } from '../../../../../../../testUtils';
+import messages from './messages';
+import * as hooks from './hooks';
+
+jest.mock('react', () => {
+  const updateState = jest.fn();
+  return {
+    updateState,
+    useEffect: jest.fn(),
+    useState: jest.fn(val => ([{ state: val }, (newVal) => updateState({ val, newVal })])),
+  };
+});
+
+jest.mock('@edx/frontend-platform/i18n', () => ({
+  defineMessages: m => m,
+}));
+
+const state = new MockUseState(hooks);
+
+describe('Problem settings hooks', () => {
+  let output;
+  let updateSettings;
+  let generalFeedback;
+  beforeEach(() => {
+    updateSettings = jest.fn();
+    generalFeedback = 'sOmE_vAlUe';
+    state.mock();
+  });
+  afterEach(() => {
+    state.restore();
+    useEffect.mockClear();
+  });
+  describe('Show advanced settings', () => {
+    beforeEach(() => {
+      output = hooks.generalFeedbackHooks(generalFeedback, updateSettings);
+    });
+    test('test default state is false', () => {
+      expect(output.summary.message).toEqual(messages.noGeneralFeedbackSummary);
+    });
+    test('test showAdvancedCards sets state to true', () => {
+      const mockEvent = { target: { value: 'sOmE_otheR_ValUe' } };
+      output.handleChange(mockEvent);
+      expect(updateSettings).toHaveBeenCalledWith({ generalFeedback: mockEvent.target.value });
+    });
+  });
+});
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/GeneralFeedback/index.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/GeneralFeedback/index.jsx
new file mode 100644
index 0000000000..f7cb81aca8
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/GeneralFeedback/index.jsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import { injectIntl, FormattedMessage, intlShape } from '@edx/frontend-platform/i18n';
+import { Form } from '@openedx/paragon';
+import PropTypes from 'prop-types';
+import SettingsOption from '../../SettingsOption';
+import messages from './messages';
+import { generalFeedbackHooks } from './hooks';
+
+export const GeneralFeedbackCard = ({
+  generalFeedback,
+  updateSettings,
+  // inject
+  intl,
+}) => {
+  const { summary, handleChange } = generalFeedbackHooks(generalFeedback, updateSettings);
+  return (
+    <SettingsOption
+      title={intl.formatMessage(messages.generalFeebackSettingTitle)}
+      summary={summary.intl ? intl.formatMessage(summary.message) : summary.message}
+      none={!generalFeedback}
+    >
+      <div className="halfSpacedMessage">
+        <span>
+          <FormattedMessage {...messages.generalFeedbackDescription} />
+        </span>
+      </div>
+      <Form.Group>
+        <Form.Control
+          value={generalFeedback}
+          onChange={handleChange}
+          floatingLabel={intl.formatMessage(messages.generalFeedbackInputLabel)}
+        />
+      </Form.Group>
+    </SettingsOption>
+  );
+};
+
+GeneralFeedbackCard.propTypes = {
+  generalFeedback: PropTypes.string.isRequired,
+  updateSettings: PropTypes.func.isRequired,
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(GeneralFeedbackCard);
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/GeneralFeedback/index.test.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/GeneralFeedback/index.test.jsx
new file mode 100644
index 0000000000..f24152c649
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/GeneralFeedback/index.test.jsx
@@ -0,0 +1,38 @@
+import 'CourseAuthoring/editors/setupEditorTest';
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+import { formatMessage } from '../../../../../../../testUtils';
+import { GeneralFeedbackCard } from './index';
+import { generalFeedbackHooks } from './hooks';
+
+jest.mock('./hooks', () => ({
+  generalFeedbackHooks: jest.fn(),
+}));
+
+describe('RandomizationCard', () => {
+  const props = {
+    generalFeedback: 'sOmE_vAlUE',
+    updateSettings: jest.fn().mockName('args.updateSettings'),
+    intl: { formatMessage },
+  };
+
+  const randomizationCardHooksProps = {
+    summary: { message: { defaultMessage: 'sUmmary' } },
+    handleChange: jest.fn().mockName('randomizationCardHooks.handleChange'),
+  };
+
+  generalFeedbackHooks.mockReturnValue(randomizationCardHooksProps);
+
+  describe('behavior', () => {
+    it(' calls generalFeedbackHooks with props when initialized', () => {
+      shallow(<GeneralFeedbackCard {...props} />);
+      expect(generalFeedbackHooks).toHaveBeenCalledWith(props.generalFeedback, props.updateSettings);
+    });
+  });
+
+  describe('snapshot', () => {
+    test('snapshot: renders general feedback setting card', () => {
+      expect(shallow(<GeneralFeedbackCard {...props} />).snapshot).toMatchSnapshot();
+    });
+  });
+});
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/GeneralFeedback/messages.js b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/GeneralFeedback/messages.js
new file mode 100644
index 0000000000..acec226278
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/GeneralFeedback/messages.js
@@ -0,0 +1,26 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+
+  generalFeebackSettingTitle: {
+    id: 'authoring.problemeditor.settings.generalFeebackSettingTitle',
+    defaultMessage: 'General Feedback',
+    description: 'label for general feedback setting',
+  },
+  generalFeedbackInputLabel: {
+    id: 'authoring.problemeditor.settings.generalFeedbackInputLabel',
+    defaultMessage: 'Enter General Feedback',
+    description: 'label for general feedback input describing rules',
+  },
+  generalFeedbackDescription: {
+    id: 'authoring.problemeditor.settings.generalFeedbackInputDescription',
+    defaultMessage: 'Enter the feedback to appear when a student submits a wrong answer. This will be overridden if you add answer-specific feedback.',
+    description: 'description for general feedback input, clariying useage',
+  },
+  noGeneralFeedbackSummary: {
+    id: 'authoring.problemeditor.settings.generalFeedback.noFeedbackSummary',
+    defaultMessage: 'None',
+    description: 'message which informs use there is no general feedback set.',
+  },
+});
+export default messages;
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/GroupFeedback/GroupFeedbackRow.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/GroupFeedback/GroupFeedbackRow.jsx
new file mode 100644
index 0000000000..53e232cbc9
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/GroupFeedback/GroupFeedbackRow.jsx
@@ -0,0 +1,80 @@
+import React from 'react';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import {
+  ActionRow, Form, Icon, IconButton, Row,
+} from '@openedx/paragon';
+import { DeleteOutline } from '@openedx/paragon/icons';
+import PropTypes from 'prop-types';
+import messages from '../../messages';
+
+const GroupFeedbackRow = ({
+  value,
+  handleAnswersSelectedChange,
+  handleFeedbackChange,
+  handleDelete,
+  answers,
+  // injected
+  intl,
+}) => (
+
+  <div className="mb-4">
+    <ActionRow className="mb-2">
+      <Form.Control
+        value={value.feedback}
+        onChange={handleFeedbackChange}
+      />
+      <div className="d-flex flex-row flex-nowrap">
+        <IconButton
+          src={DeleteOutline}
+          iconAs={Icon}
+          alt={intl.formatMessage(messages.settingsDeleteIconAltText)}
+          onClick={handleDelete}
+          variant="primary"
+        />
+      </div>
+    </ActionRow>
+    <Form.CheckboxSet
+      onChange={handleAnswersSelectedChange}
+      value={value.answers}
+    >
+      <Row className="mx-0">
+        {answers.map((letter) => (
+          <Form.Checkbox
+            className="mr-4 mt-1"
+            value={letter.id}
+            checked={value.answers.indexOf(letter.id)}
+            isValid={value.answers.indexOf(letter.id) >= 0}
+          >
+            <div className="x-small">
+              {letter.id}
+            </div>
+          </Form.Checkbox>
+        ))}
+      </Row>
+    </Form.CheckboxSet>
+  </div>
+
+);
+
+GroupFeedbackRow.propTypes = {
+  answers: PropTypes.arrayOf(PropTypes.shape({
+    correct: PropTypes.bool,
+    id: PropTypes.string,
+    selectedFeedback: PropTypes.string,
+    title: PropTypes.string,
+    unselectedFeedback: PropTypes.string,
+  })).isRequired,
+  handleAnswersSelectedChange: PropTypes.func.isRequired,
+  handleFeedbackChange: PropTypes.func.isRequired,
+  handleDelete: PropTypes.func.isRequired,
+  value: PropTypes.shape({
+    id: PropTypes.number.isRequired,
+    answers: PropTypes.arrayOf(PropTypes.string),
+    feedback: PropTypes.string,
+  }).isRequired,
+  // injected
+  intl: intlShape.isRequired,
+};
+
+export const GroupFeedbackRowInternal = GroupFeedbackRow; // For testing only
+export default injectIntl(GroupFeedbackRow);
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/GroupFeedback/GroupFeedbackRow.test.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/GroupFeedback/GroupFeedbackRow.test.jsx
new file mode 100644
index 0000000000..93be2e2664
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/GroupFeedback/GroupFeedbackRow.test.jsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+import { formatMessage } from '../../../../../../../testUtils';
+import { GroupFeedbackRowInternal as GroupFeedbackRow } from './GroupFeedbackRow';
+
+jest.mock('@openedx/paragon', () => ({
+  ...jest.requireActual('@openedx/paragon'),
+  Row: 'Row',
+  IconButton: 'IconButton',
+  Icon: 'Icon',
+  Form: {
+    CheckboxSet: 'Form.CheckboxSet',
+    Checkbox: 'Form.CheckboxSet',
+    Control: 'Form.Control',
+  },
+  ActionRow: 'ActionRow',
+}));
+jest.mock('@openedx/paragon/icons', () => ({
+  ...jest.requireActual('@openedx/paragon/icons'),
+  DeleteOutline: 'DeleteOutline',
+}));
+
+describe('GroupFeedbackRow', () => {
+  const props = {
+    value: { answers: ['A', 'C'], feedback: 'sOmE FeEDBACK' },
+    answers: ['A', 'B', 'C', 'D'],
+    handleAnswersSelectedChange: jest.fn().mockName('handleAnswersSelectedChange'),
+    handleFeedbackChange: jest.fn().mockName('handleFeedbackChange'),
+    handleDelete: jest.fn().mockName('handleDelete'),
+    intl: { formatMessage },
+  };
+
+  describe('snapshot', () => {
+    test('snapshot: renders hints row', () => {
+      expect(shallow(<GroupFeedbackRow {...props} />).snapshot).toMatchSnapshot();
+    });
+  });
+});
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/GroupFeedback/__snapshots__/GroupFeedbackRow.test.jsx.snap b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/GroupFeedback/__snapshots__/GroupFeedbackRow.test.jsx.snap
new file mode 100644
index 0000000000..21c50f9825
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/GroupFeedback/__snapshots__/GroupFeedbackRow.test.jsx.snap
@@ -0,0 +1,77 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`GroupFeedbackRow snapshot snapshot: renders hints row 1`] = `
+<div
+  className="mb-4"
+>
+  <ActionRow
+    className="mb-2"
+  >
+    <Form.Control
+      onChange={[MockFunction handleFeedbackChange]}
+      value="sOmE FeEDBACK"
+    />
+    <div
+      className="d-flex flex-row flex-nowrap"
+    >
+      <IconButton
+        alt="Delete answer"
+        iconAs="Icon"
+        onClick={[MockFunction handleDelete]}
+        src="DeleteOutline"
+        variant="primary"
+      />
+    </div>
+  </ActionRow>
+  <Form.CheckboxSet
+    onChange={[MockFunction handleAnswersSelectedChange]}
+    value={
+      [
+        "A",
+        "C",
+      ]
+    }
+  >
+    <Row
+      className="mx-0"
+    >
+      <Form.CheckboxSet
+        checked={-1}
+        className="mr-4 mt-1"
+        isValid={false}
+      >
+        <div
+          className="x-small"
+        />
+      </Form.CheckboxSet>
+      <Form.CheckboxSet
+        checked={-1}
+        className="mr-4 mt-1"
+        isValid={false}
+      >
+        <div
+          className="x-small"
+        />
+      </Form.CheckboxSet>
+      <Form.CheckboxSet
+        checked={-1}
+        className="mr-4 mt-1"
+        isValid={false}
+      >
+        <div
+          className="x-small"
+        />
+      </Form.CheckboxSet>
+      <Form.CheckboxSet
+        checked={-1}
+        className="mr-4 mt-1"
+        isValid={false}
+      >
+        <div
+          className="x-small"
+        />
+      </Form.CheckboxSet>
+    </Row>
+  </Form.CheckboxSet>
+</div>
+`;
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/GroupFeedback/__snapshots__/index.test.jsx.snap b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/GroupFeedback/__snapshots__/index.test.jsx.snap
new file mode 100644
index 0000000000..7ba7675040
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/GroupFeedback/__snapshots__/index.test.jsx.snap
@@ -0,0 +1,171 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`HintsCard snapshot snapshot: renders groupFeedbacks setting card multiple groupFeedbacks 1`] = `
+<SettingsOption
+  className=""
+  extraSections={[]}
+  hasExpandableTextArea={true}
+  none={false}
+  summary=""
+  title="Group Feedback"
+>
+  <div
+    className="pb-3"
+  >
+    <FormattedMessage
+      defaultMessage="Group feedback will appear when a student selects a specific set of answers."
+      description="label for group feedback input"
+      id="authoring.problemeditor.settings.GroupFeedbackInputLabel"
+    />
+  </div>
+  <injectIntl(ShimmedIntlComponent)
+    answers={
+      [
+        "A",
+        "B",
+        "C",
+      ]
+    }
+    id={1}
+    key="1"
+    props="propsValue"
+    value={
+      {
+        "answers": [
+          "A",
+          "C",
+        ],
+        "feedback": "sOmE FeEDBACK",
+        "id": 1,
+        "value": "groupFeedback1",
+      }
+    }
+  />
+  <injectIntl(ShimmedIntlComponent)
+    answers={
+      [
+        "A",
+        "B",
+        "C",
+      ]
+    }
+    id={2}
+    key="2"
+    props="propsValue"
+    value={
+      {
+        "answers": [
+          "A",
+        ],
+        "feedback": "sOmE FeEDBACK oTher FeEdback",
+        "id": 2,
+        "value": "",
+      }
+    }
+  />
+  <Button
+    className="m-0 p-0 font-weight-bold"
+    onClick={[MockFunction groupFeedbacksCardHooks.handleAdd]}
+    size="sm"
+    text={null}
+    variant="add"
+  >
+    <FormattedMessage
+      defaultMessage="Add group feedback"
+      description="addGroupFeedbackButtonText"
+      id="authoring.problemeditor.settings.addGroupFeedbackButtonText"
+    />
+  </Button>
+</SettingsOption>
+`;
+
+exports[`HintsCard snapshot snapshot: renders groupFeedbacks setting card no groupFeedbacks 1`] = `
+<SettingsOption
+  className=""
+  extraSections={[]}
+  hasExpandableTextArea={true}
+  none={true}
+  summary="None"
+  title="Group Feedback"
+>
+  <div
+    className="pb-3"
+  >
+    <FormattedMessage
+      defaultMessage="Group feedback will appear when a student selects a specific set of answers."
+      description="label for group feedback input"
+      id="authoring.problemeditor.settings.GroupFeedbackInputLabel"
+    />
+  </div>
+  <Button
+    className="m-0 p-0 font-weight-bold"
+    onClick={[MockFunction groupFeedbacksCardHooks.handleAdd]}
+    size="sm"
+    text={null}
+    variant="add"
+  >
+    <FormattedMessage
+      defaultMessage="Add group feedback"
+      description="addGroupFeedbackButtonText"
+      id="authoring.problemeditor.settings.addGroupFeedbackButtonText"
+    />
+  </Button>
+</SettingsOption>
+`;
+
+exports[`HintsCard snapshot snapshot: renders groupFeedbacks setting card one groupFeedback 1`] = `
+<SettingsOption
+  className=""
+  extraSections={[]}
+  hasExpandableTextArea={true}
+  none={false}
+  summary="groupFeedback1"
+  title="Group Feedback"
+>
+  <div
+    className="pb-3"
+  >
+    <FormattedMessage
+      defaultMessage="Group feedback will appear when a student selects a specific set of answers."
+      description="label for group feedback input"
+      id="authoring.problemeditor.settings.GroupFeedbackInputLabel"
+    />
+  </div>
+  <injectIntl(ShimmedIntlComponent)
+    answers={
+      [
+        "A",
+        "B",
+        "C",
+      ]
+    }
+    id={1}
+    key="1"
+    props="propsValue"
+    value={
+      {
+        "answers": [
+          "A",
+          "C",
+        ],
+        "feedback": "sOmE FeEDBACK",
+        "id": 1,
+        "value": "groupFeedback1",
+      }
+    }
+  />
+  <Button
+    className="m-0 p-0 font-weight-bold"
+    onClick={[MockFunction groupFeedbacksCardHooks.handleAdd]}
+    size="sm"
+    text={null}
+    variant="add"
+  >
+    <FormattedMessage
+      defaultMessage="Add group feedback"
+      description="addGroupFeedbackButtonText"
+      id="authoring.problemeditor.settings.addGroupFeedbackButtonText"
+    />
+  </Button>
+</SettingsOption>
+`;
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/GroupFeedback/hooks.js b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/GroupFeedback/hooks.js
new file mode 100644
index 0000000000..4dbe89c00c
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/GroupFeedback/hooks.js
@@ -0,0 +1,101 @@
+import { useState, useEffect } from 'react';
+import { isEmpty } from 'lodash';
+import messages from './messages';
+// This 'module' self-import hack enables mocking during tests.
+// See src/editors/decisions/0005-internal-editor-testability-decisions.md. The whole approach to how hooks are tested
+// should be re-thought and cleaned up to avoid this pattern.
+// eslint-disable-next-line import/no-self-import
+import * as module from './hooks';
+
+export const state = {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  summary: (val) => useState(val),
+};
+
+export const groupFeedbackCardHooks = (groupFeedbacks, updateSettings, answerslist) => {
+  const [summary, setSummary] = module.state.summary({ message: messages.noGroupFeedbackSummary, values: {} });
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useEffect(() => {
+    if (groupFeedbacks.length === 0) {
+      setSummary({ message: messages.noGroupFeedbackSummary, values: {} });
+    } else {
+      const feedbacksInList = groupFeedbacks.map(({ answers, feedback }) => {
+        const answerIDs = answerslist.map((a) => a.id);
+        const answersString = answers.filter((value) => answerIDs.includes(value));
+        return `${answersString} ${feedback}\n`;
+      });
+      setSummary({
+        message: messages.groupFeedbackSummary,
+        values: { groupFeedback: feedbacksInList },
+      });
+    }
+  }, [groupFeedbacks, answerslist]);
+
+  const handleAdd = () => {
+    let newId = 0;
+    if (!isEmpty(groupFeedbacks)) {
+      newId = Math.max(...groupFeedbacks.map(feedback => feedback.id)) + 1;
+    }
+    const groupFeedback = { id: newId, answers: [], feedback: '' };
+    const modifiedGroupFeedbacks = [...groupFeedbacks, groupFeedback];
+    updateSettings({ groupFeedbackList: modifiedGroupFeedbacks });
+  };
+
+  return {
+    summary,
+    handleAdd,
+  };
+};
+
+export const groupFeedbackRowHooks = ({ id, groupFeedbacks, updateSettings }) => {
+  // Hooks for the answers associated with a groupfeedback
+  const addSelectedAnswer = ({ value }) => {
+    const oldGroupFeedback = groupFeedbacks.find(x => x.id === id);
+    const newAnswers = [...oldGroupFeedback.answers, value];
+    const newFeedback = { ...oldGroupFeedback, answers: newAnswers };
+    const remainingFeedbacks = groupFeedbacks.filter((item) => (item.id !== id));
+    const updatedFeedbackList = [newFeedback, ...remainingFeedbacks].sort((a, b) => a.id - b.id);
+
+    updateSettings({ groupFeedbackList: updatedFeedbackList });
+  };
+  const removedSelectedAnswer = ({ value }) => {
+    const oldGroupFeedback = groupFeedbacks.find(x => x.id === id);
+    const newAnswers = oldGroupFeedback.answers.filter(item => item !== value);
+    const newFeedback = { ...oldGroupFeedback, answers: newAnswers };
+    const remainingFeedbacks = groupFeedbacks.filter((item) => (item.id !== id));
+    const updatedFeedbackList = [newFeedback, ...remainingFeedbacks].sort((a, b) => a.id - b.id);
+
+    updateSettings({ groupFeedbackList: updatedFeedbackList });
+  };
+  const handleAnswersSelectedChange = (event) => {
+    const { checked, value } = event.target;
+    if (checked) {
+      addSelectedAnswer({ value });
+    } else {
+      removedSelectedAnswer({ value });
+    }
+  };
+
+  // Delete Button
+  const handleDelete = () => {
+    const modifiedGroupFeedbacks = groupFeedbacks.filter((item) => (item.id !== id));
+    updateSettings({ groupFeedbackList: modifiedGroupFeedbacks });
+  };
+
+  // Hooks for the feedback associated with a groupfeedback
+  const handleFeedbackChange = (event) => {
+    const { value } = event.target;
+    const modifiedGroupFeedback = groupFeedbacks.map(groupFeedback => {
+      if (groupFeedback.id === id) {
+        return { ...groupFeedback, feedback: value };
+      }
+      return groupFeedback;
+    });
+    updateSettings({ groupFeedbackList: modifiedGroupFeedback });
+  };
+
+  return {
+    handleAnswersSelectedChange, handleFeedbackChange, handleDelete,
+  };
+};
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/GroupFeedback/hooks.test.js b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/GroupFeedback/hooks.test.js
new file mode 100644
index 0000000000..14adde6d3b
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/GroupFeedback/hooks.test.js
@@ -0,0 +1,96 @@
+import { useEffect } from 'react';
+import { MockUseState } from '../../../../../../../testUtils';
+import messages from './messages';
+import * as hooks from './hooks';
+
+jest.mock('react', () => {
+  const updateState = jest.fn();
+  return {
+    updateState,
+    useEffect: jest.fn(),
+    useState: jest.fn(val => ([{ state: val }, (newVal) => updateState({ val, newVal })])),
+  };
+});
+
+jest.mock('@edx/frontend-platform/i18n', () => ({
+  defineMessages: m => m,
+}));
+
+const state = new MockUseState(hooks);
+
+describe('groupFeedbackCardHooks', () => {
+  let output;
+  let updateSettings;
+  let groupFeedbacks;
+  beforeEach(() => {
+    updateSettings = jest.fn();
+    groupFeedbacks = [];
+    state.mock();
+  });
+  afterEach(() => {
+    state.restore();
+    useEffect.mockClear();
+  });
+  describe('Show advanced settings', () => {
+    beforeEach(() => {
+      output = hooks.groupFeedbackCardHooks(groupFeedbacks, updateSettings);
+    });
+    test('test default state is false', () => {
+      expect(output.summary.message).toEqual(messages.noGroupFeedbackSummary);
+    });
+    test('test Event adds a new feedback ', () => {
+      output.handleAdd();
+      expect(updateSettings).toHaveBeenCalledWith({ groupFeedbackList: [{ id: 0, answers: [], feedback: '' }] });
+    });
+  });
+});
+
+describe('groupFeedbackRowHooks', () => {
+  const mockId = 'iD';
+  const mockAnswer = 'moCkAnsweR';
+  const mockFeedback = 'mOckFEEdback';
+  let groupFeedbacks;
+  let output;
+  let updateSettings;
+
+  beforeEach(() => {
+    updateSettings = jest.fn();
+    groupFeedbacks = [{ id: mockId, answers: [mockAnswer], feedback: mockFeedback }];
+    state.mock();
+  });
+  afterEach(() => {
+    state.restore();
+    useEffect.mockClear();
+  });
+  describe('Show advanced settings', () => {
+    beforeEach(() => {
+      output = hooks.groupFeedbackRowHooks({ id: mockId, groupFeedbacks, updateSettings });
+    });
+    test('test associate an answer with the feedback object', () => {
+      const mockNewAnswer = 'nEw VAluE';
+      output.handleAnswersSelectedChange({ target: { checked: true, value: mockNewAnswer } });
+      expect(updateSettings).toHaveBeenCalledWith(
+        { groupFeedbackList: [{ id: mockId, answers: [mockAnswer, mockNewAnswer], feedback: mockFeedback }] },
+      );
+    });
+    test('test unassociate an answer with the feedback object', () => {
+      output.handleAnswersSelectedChange({ target: { checked: false, value: mockAnswer } });
+      expect(updateSettings).toHaveBeenCalledWith(
+        { groupFeedbackList: [{ id: mockId, answers: [], feedback: mockFeedback }] },
+      );
+    });
+    test('test update feedback text with a groupfeedback', () => {
+      const mockNewFeedback = 'nEw fEedBack';
+      output.handleFeedbackChange({ target: { checked: false, value: mockNewFeedback } });
+      expect(updateSettings).toHaveBeenCalledWith(
+        { groupFeedbackList: [{ id: mockId, answers: [mockAnswer], feedback: mockNewFeedback }] },
+      );
+    });
+    test('Delete a Row from the list of feedbacks', () => {
+      output.handleDelete();
+      expect(updateSettings).toHaveBeenCalledWith(
+        { groupFeedbackList: [] },
+      );
+    });
+  });
+});
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/GroupFeedback/index.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/GroupFeedback/index.jsx
new file mode 100644
index 0000000000..531be7bad4
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/GroupFeedback/index.jsx
@@ -0,0 +1,67 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { injectIntl, FormattedMessage, intlShape } from '@edx/frontend-platform/i18n';
+import SettingsOption from '../../SettingsOption';
+import messages from './messages';
+import { groupFeedbackCardHooks, groupFeedbackRowHooks } from './hooks';
+import GroupFeedbackRow from './GroupFeedbackRow';
+import Button from '../../../../../../../sharedComponents/Button';
+
+const GroupFeedbackCard = ({
+  groupFeedbacks,
+  updateSettings,
+  answers,
+  // inject
+  intl,
+}) => {
+  const { summary, handleAdd } = groupFeedbackCardHooks(groupFeedbacks, updateSettings, answers);
+  return (
+    <SettingsOption
+      title={intl.formatMessage(messages.groupFeedbackSettingTitle)}
+      summary={intl.formatMessage(summary.message, { ...summary.values })}
+      none={!groupFeedbacks.length}
+      hasExpandableTextArea
+    >
+      <div className="pb-3">
+        <FormattedMessage {...messages.groupFeedbackInputLabel} />
+      </div>
+      {groupFeedbacks.map((groupFeedback) => (
+        <GroupFeedbackRow
+          key={groupFeedback.id}
+          id={groupFeedback.id}
+          value={groupFeedback}
+          answers={answers}
+          {...groupFeedbackRowHooks({ id: groupFeedback.id, groupFeedbacks, updateSettings })}
+        />
+      ))}
+      <Button
+        className="m-0 p-0 font-weight-bold"
+        variant="add"
+        onClick={handleAdd}
+        size="sm"
+      >
+        <FormattedMessage {...messages.addGroupFeedbackButtonText} />
+      </Button>
+    </SettingsOption>
+  );
+};
+
+GroupFeedbackCard.propTypes = {
+  intl: intlShape.isRequired,
+  groupFeedbacks: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.number.isRequired,
+    feedback: PropTypes.string.isRequired,
+    answers: PropTypes.arrayOf(PropTypes.string).isRequired,
+  })).isRequired,
+  answers: PropTypes.arrayOf(PropTypes.shape({
+    correct: PropTypes.bool,
+    id: PropTypes.string,
+    selectedFeedback: PropTypes.string,
+    title: PropTypes.string,
+    unselectedFeedback: PropTypes.string,
+  })).isRequired,
+  updateSettings: PropTypes.func.isRequired,
+};
+
+export const GroupFeedbackCardInternal = GroupFeedbackCard; // For testing only
+export default injectIntl(GroupFeedbackCard);
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/GroupFeedback/index.test.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/GroupFeedback/index.test.jsx
new file mode 100644
index 0000000000..2c52195242
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/GroupFeedback/index.test.jsx
@@ -0,0 +1,83 @@
+import 'CourseAuthoring/editors/setupEditorTest';
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+import { formatMessage } from '../../../../../../../testUtils';
+import { GroupFeedbackCardInternal as GroupFeedbackCard } from './index';
+import { groupFeedbackRowHooks, groupFeedbackCardHooks } from './hooks';
+import messages from './messages';
+
+jest.mock('./hooks', () => ({
+  groupFeedbackCardHooks: jest.fn(),
+  groupFeedbackRowHooks: jest.fn(),
+}));
+
+describe('HintsCard', () => {
+  const answers = ['A', 'B', 'C'];
+  const groupFeedback1 = {
+    id: 1, value: 'groupFeedback1', answers: ['A', 'C'], feedback: 'sOmE FeEDBACK',
+  };
+  const groupFeedback2 = {
+    id: 2, value: '', answers: ['A'], feedback: 'sOmE FeEDBACK oTher FeEdback',
+  };
+  const groupFeedbacks0 = [];
+  const groupFeedbacks1 = [groupFeedback1];
+  const groupFeedbacks2 = [groupFeedback1, groupFeedback2];
+  const props = {
+    intl: { formatMessage },
+    groupFeedbacks: groupFeedbacks0,
+    updateSettings: jest.fn().mockName('args.updateSettings'),
+    answers,
+  };
+
+  const groupFeedbacksRowHooksProps = { props: 'propsValue' };
+  groupFeedbackRowHooks.mockReturnValue(groupFeedbacksRowHooksProps);
+
+  describe('behavior', () => {
+    it(' calls groupFeedbacksCardHooks when initialized', () => {
+      const groupFeedbacksCardHooksProps = {
+        summary: { message: messages.noGroupFeedbackSummary },
+        handleAdd: jest.fn().mockName('groupFeedbacksCardHooks.handleAdd'),
+      };
+
+      groupFeedbackCardHooks.mockReturnValue(groupFeedbacksCardHooksProps);
+      shallow(<GroupFeedbackCard {...props} />);
+      expect(groupFeedbackCardHooks).toHaveBeenCalledWith(groupFeedbacks0, props.updateSettings, answers);
+    });
+  });
+
+  describe('snapshot', () => {
+    test('snapshot: renders groupFeedbacks setting card no groupFeedbacks', () => {
+      const groupFeedbacksCardHooksProps = {
+        summary: { message: messages.noGroupFeedbackSummary, values: {} },
+        handleAdd: jest.fn().mockName('groupFeedbacksCardHooks.handleAdd'),
+      };
+
+      groupFeedbackCardHooks.mockReturnValue(groupFeedbacksCardHooksProps);
+      expect(shallow(<GroupFeedbackCard {...props} />).snapshot).toMatchSnapshot();
+    });
+    test('snapshot: renders groupFeedbacks setting card one groupFeedback', () => {
+      const groupFeedbacksCardHooksProps = {
+        summary: {
+          message: messages.groupFeedbackSummary,
+          values: { groupFeedback: groupFeedback1.value, count: 1 },
+        },
+        handleAdd: jest.fn().mockName('groupFeedbacksCardHooks.handleAdd'),
+      };
+
+      groupFeedbackCardHooks.mockReturnValue(groupFeedbacksCardHooksProps);
+      expect(shallow(<GroupFeedbackCard {...props} groupFeedbacks={groupFeedbacks1} />).snapshot).toMatchSnapshot();
+    });
+    test('snapshot: renders groupFeedbacks setting card multiple groupFeedbacks', () => {
+      const groupFeedbacksCardHooksProps = {
+        summary: {
+          message: messages.groupFeedbackSummary,
+          values: { groupFeedback: groupFeedback2.value, count: 2 },
+        },
+        handleAdd: jest.fn().mockName('groupFeedbacksCardHooks.handleAdd'),
+      };
+
+      groupFeedbackCardHooks.mockReturnValue(groupFeedbacksCardHooksProps);
+      expect(shallow(<GroupFeedbackCard {...props} groupFeedbacks={groupFeedbacks2} />).snapshot).toMatchSnapshot();
+    });
+  });
+});
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/GroupFeedback/messages.js b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/GroupFeedback/messages.js
new file mode 100644
index 0000000000..de4a5c6feb
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/GroupFeedback/messages.js
@@ -0,0 +1,32 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+
+  noGroupFeedbackSummary: {
+    id: 'authoring.problemeditor.settings.GroupFeedbackSummary.nonMessage',
+    defaultMessage: 'None',
+    description: 'message to confirm that a user wants to use the advanced editor',
+  },
+  groupFeedbackSummary: {
+    id: 'authoring.problemeditor.settings.GroupFeedbackSummary.message',
+    defaultMessage: '{groupFeedback}',
+    description: 'summary of current feedbacks provided for multiple problems',
+  },
+  addGroupFeedbackButtonText: {
+    id: 'authoring.problemeditor.settings.addGroupFeedbackButtonText',
+    defaultMessage: 'Add group feedback',
+    description: 'addGroupFeedbackButtonText',
+  },
+  groupFeedbackInputLabel: {
+    id: 'authoring.problemeditor.settings.GroupFeedbackInputLabel',
+    defaultMessage: 'Group feedback will appear when a student selects a specific set of answers.',
+    description: 'label for group feedback input',
+  },
+  groupFeedbackSettingTitle: {
+    id: 'authoring.problemeditor.settings.GroupFeedbackSettingTitle',
+    defaultMessage: 'Group Feedback',
+    description: 'label for group feedback setting',
+  },
+});
+
+export default messages;
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/HintRow.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/HintRow.jsx
new file mode 100644
index 0000000000..31fa88ca63
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/HintRow.jsx
@@ -0,0 +1,64 @@
+import React from 'react';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import {
+  ActionRow,
+  Container,
+  Icon,
+  IconButton,
+} from '@openedx/paragon';
+import { DeleteOutline } from '@openedx/paragon/icons';
+import PropTypes from 'prop-types';
+import messages from '../messages';
+import ExpandableTextArea from '../../../../../../sharedComponents/ExpandableTextArea';
+
+const HintRow = ({
+  value,
+  handleChange,
+  handleDelete,
+  id,
+  images,
+  isLibrary,
+  learningContextId,
+  // injected
+  intl,
+}) => (
+  <ActionRow className="mb-4">
+    <Container fluid className="p-0">
+      <ExpandableTextArea
+        value={value}
+        setContent={handleChange}
+        placeholder={intl.formatMessage(messages.hintInputLabel)}
+        id={`hint-${id}`}
+        {...{
+          images,
+          isLibrary,
+          learningContextId,
+        }}
+      />
+    </Container>
+    <div className="d-flex flex-row flex-nowrap">
+      <IconButton
+        src={DeleteOutline}
+        iconAs={Icon}
+        alt={intl.formatMessage(messages.settingsDeleteIconAltText)}
+        onClick={handleDelete}
+        variant="primary"
+      />
+    </div>
+  </ActionRow>
+);
+
+HintRow.propTypes = {
+  value: PropTypes.string.isRequired,
+  handleChange: PropTypes.func.isRequired,
+  handleDelete: PropTypes.func.isRequired,
+  id: PropTypes.string.isRequired,
+  images: PropTypes.shape({}).isRequired,
+  learningContextId: PropTypes.string.isRequired,
+  isLibrary: PropTypes.bool.isRequired,
+  // injected
+  intl: intlShape.isRequired,
+};
+
+export const HintRowInternal = HintRow; // For testing only
+export default injectIntl(HintRow);
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/HintRow.test.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/HintRow.test.jsx
new file mode 100644
index 0000000000..89ec54b234
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/HintRow.test.jsx
@@ -0,0 +1,24 @@
+import 'CourseAuthoring/editors/setupEditorTest';
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+import { formatMessage } from '../../../../../../testUtils';
+import { HintRowInternal as HintRow } from './HintRow';
+
+describe('HintRow', () => {
+  const props = {
+    value: 'hint_1',
+    handleChange: jest.fn(),
+    handleDelete: jest.fn(),
+    id: '0',
+    intl: { formatMessage },
+    images: {},
+    isLibrary: false,
+    learningContextId: 'course+org+run',
+  };
+
+  describe('snapshot', () => {
+    test('snapshot: renders hints row', () => {
+      expect(shallow(<HintRow {...props} />).snapshot).toMatchSnapshot();
+    });
+  });
+});
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/HintsCard.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/HintsCard.jsx
new file mode 100644
index 0000000000..dc7a059073
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/HintsCard.jsx
@@ -0,0 +1,71 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { injectIntl, FormattedMessage, intlShape } from '@edx/frontend-platform/i18n';
+import SettingsOption from '../SettingsOption';
+import { ProblemTypeKeys } from '../../../../../../data/constants/problem';
+import messages from '../messages';
+import { hintsCardHooks, hintsRowHooks } from '../hooks';
+import HintRow from './HintRow';
+import Button from '../../../../../../sharedComponents/Button';
+
+const HintsCard = ({
+  hints,
+  problemType,
+  updateSettings,
+  images,
+  isLibrary,
+  learningContextId,
+  // inject
+  intl,
+}) => {
+  const { summary, handleAdd } = hintsCardHooks(hints, updateSettings);
+
+  if (problemType === ProblemTypeKeys.ADVANCED) { return null; }
+
+  return (
+    <SettingsOption
+      title={intl.formatMessage(messages.hintSettingTitle)}
+      summary={intl.formatMessage(summary.message, { ...summary.values })}
+      none={!hints.length}
+      hasExpandableTextArea
+    >
+      {hints.map((hint) => (
+        <HintRow
+          key={hint.id}
+          id={hint.id}
+          value={hint.value}
+          {...{
+            ...hintsRowHooks(hint.id, hints, updateSettings),
+            images,
+            isLibrary,
+            learningContextId,
+          }}
+        />
+      ))}
+      <Button
+        className="m-0 p-0 font-weight-bold"
+        variant="add"
+        onClick={handleAdd}
+        size="sm"
+      >
+        <FormattedMessage {...messages.addHintButtonText} />
+      </Button>
+    </SettingsOption>
+  );
+};
+
+HintsCard.propTypes = {
+  intl: intlShape.isRequired,
+  hints: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    value: PropTypes.string.isRequired,
+  })).isRequired,
+  problemType: PropTypes.string.isRequired,
+  updateSettings: PropTypes.func.isRequired,
+  images: PropTypes.shape({}).isRequired,
+  learningContextId: PropTypes.string.isRequired,
+  isLibrary: PropTypes.bool.isRequired,
+};
+
+export const HintsCardInternal = HintsCard; // For testing only
+export default injectIntl(HintsCard);
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/HintsCard.test.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/HintsCard.test.jsx
new file mode 100644
index 0000000000..9dd5e06a4e
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/HintsCard.test.jsx
@@ -0,0 +1,83 @@
+import 'CourseAuthoring/editors/setupEditorTest';
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+import { formatMessage } from '../../../../../../testUtils';
+import { HintsCardInternal as HintsCard } from './HintsCard';
+import { hintsCardHooks, hintsRowHooks } from '../hooks';
+import messages from '../messages';
+
+jest.mock('../hooks', () => ({
+  hintsCardHooks: jest.fn(),
+  hintsRowHooks: jest.fn(),
+}));
+
+describe('HintsCard', () => {
+  const hint1 = { id: 1, value: 'hint1' };
+  const hint2 = { id: 2, value: '' };
+  const hints0 = [];
+  const hints1 = [hint1];
+  const hints2 = [hint1, hint2];
+  const props = {
+    intl: { formatMessage },
+    hints: hints0,
+    updateSettings: jest.fn().mockName('args.updateSettings'),
+  };
+
+  const hintsRowHooksProps = {
+    handleChange: jest.fn().mockName('hintsRowHooks.handleChange'),
+    handleDelete: jest.fn().mockName('hintsRowHooks.handleDelete'),
+    images: {},
+    isLibrary: false,
+    learningContextId: 'course+org+run',
+  };
+  hintsRowHooks.mockReturnValue(hintsRowHooksProps);
+
+  describe('behavior', () => {
+    it(' calls hintsCardHooks when initialized', () => {
+      const hintsCardHooksProps = {
+        summary: { message: messages.noHintSummary, values: {} },
+        handleAdd: jest.fn().mockName('hintsCardHooks.handleAdd'),
+      };
+
+      hintsCardHooks.mockReturnValue(hintsCardHooksProps);
+      shallow(<HintsCard {...props} />);
+      expect(hintsCardHooks).toHaveBeenCalledWith(hints0, props.updateSettings);
+    });
+  });
+
+  describe('snapshot', () => {
+    test('snapshot: renders hints setting card no hints', () => {
+      const hintsCardHooksProps = {
+        summary: { message: messages.noHintSummary, values: {} },
+        handleAdd: jest.fn().mockName('hintsCardHooks.handleAdd'),
+      };
+
+      hintsCardHooks.mockReturnValue(hintsCardHooksProps);
+      expect(shallow(<HintsCard {...props} />).snapshot).toMatchSnapshot();
+    });
+    test('snapshot: renders hints setting card one hint', () => {
+      const hintsCardHooksProps = {
+        summary: {
+          message: messages.hintSummary,
+          values: { hint: hint1.value, count: 1 },
+        },
+        handleAdd: jest.fn().mockName('hintsCardHooks.handleAdd'),
+      };
+
+      hintsCardHooks.mockReturnValue(hintsCardHooksProps);
+      expect(shallow(<HintsCard {...props} hints={hints1} />).snapshot).toMatchSnapshot();
+    });
+    test('snapshot: renders hints setting card multiple hints', () => {
+      const hintsCardHooksProps = {
+        summary: {
+          message: messages.hintSummary,
+          values: { hint: hint2.value, count: 2 },
+        },
+        handleAdd: jest.fn().mockName('hintsCardHooks.handleAdd'),
+      };
+
+      hintsCardHooks.mockReturnValue(hintsCardHooksProps);
+      expect(shallow(<HintsCard {...props} hints={hints2} />).snapshot).toMatchSnapshot();
+    });
+  });
+});
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/Randomization/__snapshots__/index.test.jsx.snap b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/Randomization/__snapshots__/index.test.jsx.snap
new file mode 100644
index 0000000000..08c3a66986
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/Randomization/__snapshots__/index.test.jsx.snap
@@ -0,0 +1,157 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RandomizationCard snapshot snapshot: renders randomization setting card with default randomization 1`] = `
+<SettingsOption
+  className=""
+  extraSections={[]}
+  hasExpandableTextArea={false}
+  none={true}
+  summary="sUmmary"
+  title="Randomization"
+>
+  <div
+    className="mb-3"
+  >
+    {randomization, select,
+      null {No Python based randomization is present in this problem.}
+      other {Defines when to randomize the variables specified in the associated Python script. For problems that do not randomize values, specify "Never".}
+    }
+  </div>
+  <Form.Group>
+    <Form.Control
+      as="select"
+      onChange={[MockFunction randomizationCardHooks.handleChange]}
+      value="default_vAlUE"
+    >
+      <option
+        key="never"
+        value="never"
+      >
+        Never
+      </option>
+      <option
+        key="always"
+        value="always"
+      >
+        Always
+      </option>
+      <option
+        key="onreset"
+        value="onreset"
+      >
+        On Reset
+      </option>
+      <option
+        key="per_student"
+        value="per_student"
+      >
+        Per Student
+      </option>
+    </Form.Control>
+  </Form.Group>
+</SettingsOption>
+`;
+
+exports[`RandomizationCard snapshot snapshot: renders randomization setting card with randomization defined 1`] = `
+<SettingsOption
+  className=""
+  extraSections={[]}
+  hasExpandableTextArea={false}
+  none={false}
+  summary="sUmmary"
+  title="Randomization"
+>
+  <div
+    className="mb-3"
+  >
+    {randomization, select,
+      null {No Python based randomization is present in this problem.}
+      other {Defines when to randomize the variables specified in the associated Python script. For problems that do not randomize values, specify "Never".}
+    }
+  </div>
+  <Form.Group>
+    <Form.Control
+      as="select"
+      onChange={[MockFunction randomizationCardHooks.handleChange]}
+      value="sOmE_vAlUE"
+    >
+      <option
+        key="never"
+        value="never"
+      >
+        Never
+      </option>
+      <option
+        key="always"
+        value="always"
+      >
+        Always
+      </option>
+      <option
+        key="onreset"
+        value="onreset"
+      >
+        On Reset
+      </option>
+      <option
+        key="per_student"
+        value="per_student"
+      >
+        Per Student
+      </option>
+    </Form.Control>
+  </Form.Group>
+</SettingsOption>
+`;
+
+exports[`RandomizationCard snapshot snapshot: renders randomization setting card with randomization null 1`] = `
+<SettingsOption
+  className=""
+  extraSections={[]}
+  hasExpandableTextArea={false}
+  none={true}
+  summary="sUmmary"
+  title="Randomization"
+>
+  <div
+    className="mb-3"
+  >
+    {randomization, select,
+      null {No Python based randomization is present in this problem.}
+      other {Defines when to randomize the variables specified in the associated Python script. For problems that do not randomize values, specify "Never".}
+    }
+  </div>
+  <Form.Group>
+    <Form.Control
+      as="select"
+      onChange={[MockFunction randomizationCardHooks.handleChange]}
+      value={null}
+    >
+      <option
+        key="never"
+        value="never"
+      >
+        Never
+      </option>
+      <option
+        key="always"
+        value="always"
+      >
+        Always
+      </option>
+      <option
+        key="onreset"
+        value="onreset"
+      >
+        On Reset
+      </option>
+      <option
+        key="per_student"
+        value="per_student"
+      >
+        Per Student
+      </option>
+    </Form.Control>
+  </Form.Group>
+</SettingsOption>
+`;
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/Randomization/hooks.js b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/Randomization/hooks.js
new file mode 100644
index 0000000000..888488895c
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/Randomization/hooks.js
@@ -0,0 +1,31 @@
+import { useState, useEffect } from 'react';
+import { RandomizationTypes, RandomizationTypesKeys } from '../../../../../../../data/constants/problem';
+// This 'module' self-import hack enables mocking during tests.
+// See src/editors/decisions/0005-internal-editor-testability-decisions.md. The whole approach to how hooks are tested
+// should be re-thought and cleaned up to avoid this pattern.
+// eslint-disable-next-line import/no-self-import
+import * as module from './hooks';
+
+export const state = {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  summary: (val) => useState(val),
+};
+
+export const useRandomizationSettingStatus = ({ randomization, updateSettings }) => {
+  const [summary, setSummary] = module.state.summary({
+    message: RandomizationTypes[RandomizationTypesKeys.NEVER],
+    values: {},
+  });
+  useEffect(() => {
+    setSummary({
+      message: randomization ? RandomizationTypes[randomization] : RandomizationTypes[RandomizationTypesKeys.NEVER],
+    });
+  }, [randomization]);
+
+  const handleChange = (event) => {
+    updateSettings({ randomization: event.target.value });
+  };
+  return { summary, handleChange };
+};
+
+export default useRandomizationSettingStatus;
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/Randomization/hooks.test.js b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/Randomization/hooks.test.js
new file mode 100644
index 0000000000..dc4cf2cb1c
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/Randomization/hooks.test.js
@@ -0,0 +1,47 @@
+import { useEffect } from 'react';
+import { MockUseState } from '../../../../../../../testUtils';
+import * as hooks from './hooks';
+import { RandomizationTypes, RandomizationTypesKeys } from '../../../../../../../data/constants/problem';
+
+jest.mock('react', () => {
+  const updateState = jest.fn();
+  return {
+    updateState,
+    useEffect: jest.fn(),
+    useState: jest.fn(val => ([{ state: val }, (newVal) => updateState({ val, newVal })])),
+  };
+});
+
+jest.mock('@edx/frontend-platform/i18n', () => ({
+  defineMessages: m => m,
+}));
+
+const state = new MockUseState(hooks);
+
+describe('Problem settings hooks', () => {
+  let output;
+  let updateSettings;
+  let randomization;
+  beforeEach(() => {
+    updateSettings = jest.fn();
+    randomization = 'sOmE_vAlUe';
+    state.mock();
+  });
+  afterEach(() => {
+    state.restore();
+    useEffect.mockClear();
+  });
+  describe('Show advanced settings', () => {
+    beforeEach(() => {
+      output = hooks.useRandomizationSettingStatus({ randomization, updateSettings });
+    });
+    test('test default state is false', () => {
+      expect(output.summary).toEqual({ message: RandomizationTypes[RandomizationTypesKeys.NEVER], values: {} });
+    });
+    test('test showAdvancedCards sets state to true', () => {
+      const mockEvent = { target: { value: 'sOmE_otheR_ValUe' } };
+      output.handleChange(mockEvent);
+      expect(updateSettings).toHaveBeenCalledWith({ randomization: mockEvent.target.value });
+    });
+  });
+});
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/Randomization/index.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/Randomization/index.jsx
new file mode 100644
index 0000000000..0b76264217
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/Randomization/index.jsx
@@ -0,0 +1,62 @@
+import React from 'react';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { Form } from '@openedx/paragon';
+import PropTypes from 'prop-types';
+import SettingsOption from '../../SettingsOption';
+import messages from './messages';
+import { useRandomizationSettingStatus } from './hooks';
+import { RandomizationTypesKeys, RandomizationTypes } from '../../../../../../../data/constants/problem';
+
+export const RandomizationCard = ({
+  randomization,
+  defaultValue,
+  updateSettings,
+  // inject
+  intl,
+}) => {
+  const curretRandomization = randomization || defaultValue;
+  const { summary, handleChange } = useRandomizationSettingStatus({
+    randomization: curretRandomization,
+    updateSettings,
+  });
+  return (
+    <SettingsOption
+      title={intl.formatMessage(messages.randomizationSettingTitle)}
+      summary={intl.formatMessage(summary.message)}
+      none={!randomization}
+    >
+      <div className="mb-3">
+        {intl.formatMessage(messages.randomizationSettingText, { randomization })}
+      </div>
+
+      <Form.Group>
+        <Form.Control
+          as="select"
+          value={curretRandomization}
+          onChange={handleChange}
+        >
+          {
+            Object.values(RandomizationTypesKeys).map((randomizationType) => (
+              <option
+                key={randomizationType}
+                value={randomizationType}
+              >
+                {intl.formatMessage(RandomizationTypes[randomizationType])}
+              </option>
+            ))
+          }
+        </Form.Control>
+      </Form.Group>
+
+    </SettingsOption>
+  );
+};
+
+RandomizationCard.propTypes = {
+  defaultValue: PropTypes.string.isRequired,
+  randomization: PropTypes.string.isRequired,
+  updateSettings: PropTypes.func.isRequired,
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(RandomizationCard);
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/Randomization/index.test.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/Randomization/index.test.jsx
new file mode 100644
index 0000000000..d3438f6196
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/Randomization/index.test.jsx
@@ -0,0 +1,49 @@
+import 'CourseAuthoring/editors/setupEditorTest';
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+import { formatMessage } from '../../../../../../../testUtils';
+import { RandomizationCard } from './index';
+import { useRandomizationSettingStatus } from './hooks';
+
+jest.mock('./hooks', () => ({
+  useRandomizationSettingStatus: jest.fn(),
+}));
+
+describe('RandomizationCard', () => {
+  const props = {
+    randomization: 'sOmE_vAlUE',
+    defaultValue: 'default_vAlUE',
+    updateSettings: jest.fn().mockName('args.updateSettings'),
+    intl: { formatMessage },
+  };
+
+  const randomizationCardHooksProps = {
+    summary: { message: { defaultMessage: 'sUmmary' } },
+    handleChange: jest.fn().mockName('randomizationCardHooks.handleChange'),
+  };
+
+  useRandomizationSettingStatus.mockReturnValue(randomizationCardHooksProps);
+
+  describe('behavior', () => {
+    it(' calls useRandomizationSettingStatus when initialized', () => {
+      shallow(<RandomizationCard {...props} />);
+      expect(useRandomizationSettingStatus).toHaveBeenCalledWith(
+        { updateSettings: props.updateSettings, randomization: props.randomization },
+      );
+    });
+  });
+
+  describe('snapshot', () => {
+    test('snapshot: renders randomization setting card with randomization defined', () => {
+      expect(shallow(<RandomizationCard {...props} />).snapshot).toMatchSnapshot();
+    });
+    test('snapshot: renders randomization setting card with default randomization', () => {
+      expect(shallow(<RandomizationCard {...props} randomization={null} />).snapshot).toMatchSnapshot();
+    });
+    test('snapshot: renders randomization setting card with randomization null', () => {
+      expect(
+        shallow(<RandomizationCard {...props} randomization={null} defaultValue={null} />).snapshot,
+      ).toMatchSnapshot();
+    });
+  });
+});
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/Randomization/messages.js b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/Randomization/messages.js
new file mode 100644
index 0000000000..3f622bd327
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/Randomization/messages.js
@@ -0,0 +1,20 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+
+  randomizationSettingTitle: {
+    id: 'authoring.problemeditor.settings.randomization.SettingTitle',
+    defaultMessage: 'Randomization',
+    description: 'Settings Title for Randomization widget',
+  },
+  randomizationSettingText: {
+    id: 'authoring.problemeditor.settings.randomization.SettingText',
+    defaultMessage: `{randomization, select,
+      null {No Python based randomization is present in this problem.}
+      other {Defines when to randomize the variables specified in the associated Python script. For problems that do not randomize values, specify "Never".}
+    }`,
+    description: 'Description of Possibilities for value in Randomization widget',
+  },
+});
+
+export default messages;
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/ResetCard.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/ResetCard.jsx
new file mode 100644
index 0000000000..1413f092e9
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/ResetCard.jsx
@@ -0,0 +1,62 @@
+import React from 'react';
+import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { Button, ButtonGroup, Hyperlink } from '@openedx/paragon';
+import PropTypes from 'prop-types';
+import { useSelector } from 'react-redux';
+import SettingsOption from '../SettingsOption';
+import messages from '../messages';
+import { resetCardHooks } from '../hooks';
+import { selectors } from '../../../../../../data/redux';
+
+const ResetCard = ({
+  showResetButton,
+  defaultValue,
+  updateSettings,
+  // inject
+  intl,
+}) => {
+  const isLibrary = useSelector(selectors.app.isLibrary);
+  const { setResetTrue, setResetFalse } = resetCardHooks(updateSettings);
+  const advancedSettingsLink = `${useSelector(selectors.app.studioEndpointUrl)}/settings/advanced/${useSelector(selectors.app.learningContextId)}#show_reset_button`;
+  const currentResetButton = showResetButton !== null ? showResetButton : defaultValue;
+  return (
+    <SettingsOption
+      title={intl.formatMessage(messages.resetSettingsTitle)}
+      summary={currentResetButton
+        ? intl.formatMessage(messages.resetSettingsTrue) : intl.formatMessage(messages.resetSettingsFalse)}
+      className="resetCard"
+    >
+      <div className="halfSpacedMessage">
+        <span>
+          <FormattedMessage {...messages.resetSettingText} />
+        </span>
+      </div>
+      {!isLibrary && (
+        <div className="spacedMessage">
+          <Hyperlink destination={advancedSettingsLink} target="_blank">
+            <FormattedMessage {...messages.advancedSettingsLinkText} />
+          </Hyperlink>
+        </div>
+      )}
+      <ButtonGroup size="sm" className="resetSettingsButtons mb-2">
+        <Button variant={currentResetButton ? 'outline-primary' : 'primary'} size="sm" onClick={setResetFalse}>
+          <FormattedMessage {...messages.resetSettingsFalse} />
+        </Button>
+        <Button variant={currentResetButton ? 'primary' : 'outline-primary'} size="sm" onClick={setResetTrue}>
+          <FormattedMessage {...messages.resetSettingsTrue} />
+        </Button>
+      </ButtonGroup>
+    </SettingsOption>
+  );
+};
+
+ResetCard.propTypes = {
+  showResetButton: PropTypes.bool.isRequired,
+  defaultValue: PropTypes.bool.isRequired,
+  updateSettings: PropTypes.func.isRequired,
+  // injected
+  intl: intlShape.isRequired,
+};
+
+export const ResetCardInternal = ResetCard; // For testing only
+export default injectIntl(ResetCard);
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/ResetCard.test.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/ResetCard.test.jsx
new file mode 100644
index 0000000000..d3c46314fb
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/ResetCard.test.jsx
@@ -0,0 +1,53 @@
+import 'CourseAuthoring/editors/setupEditorTest';
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+import { useSelector } from 'react-redux';
+import { formatMessage } from '../../../../../../testUtils';
+import { ResetCardInternal as ResetCard } from './ResetCard';
+import { resetCardHooks } from '../hooks';
+
+jest.mock('../hooks', () => ({
+  resetCardHooks: jest.fn(),
+}));
+
+jest.mock('../../../../../../data/redux', () => ({
+  selectors: {
+    app: {
+      studioEndpointUrl: 'sTuDioEndpOintUrl',
+      learningContextId: 'leArningCoNteXtId',
+    },
+  },
+}));
+
+useSelector.mockImplementation((args) => args);
+
+describe('ResetCard', () => {
+  const props = {
+    showResetButton: false,
+    updateSettings: jest.fn().mockName('args.updateSettings'),
+    intl: { formatMessage },
+  };
+
+  const resetCardHooksProps = {
+    setResetTrue: jest.fn().mockName('resetCardHooks.setResetTrue'),
+    setResetFalse: jest.fn().mockName('resetCardHooks.setResetFalse'),
+  };
+
+  resetCardHooks.mockReturnValue(resetCardHooksProps);
+
+  describe('behavior', () => {
+    it(' calls resetCardHooks when initialized', () => {
+      shallow(<ResetCard {...props} />);
+      expect(resetCardHooks).toHaveBeenCalledWith(props.updateSettings);
+    });
+  });
+
+  describe('snapshot', () => {
+    test('snapshot: renders reset true setting card', () => {
+      expect(shallow(<ResetCard {...props} />).snapshot).toMatchSnapshot();
+    });
+    test('snapshot: renders reset true setting card', () => {
+      expect(shallow(<ResetCard {...props} showResetButton />).snapshot).toMatchSnapshot();
+    });
+  });
+});
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/ScoringCard.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/ScoringCard.jsx
new file mode 100644
index 0000000000..3935c7cb7e
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/ScoringCard.jsx
@@ -0,0 +1,121 @@
+import React from 'react';
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { Form, Hyperlink } from '@openedx/paragon';
+import { selectors } from '../../../../../../data/redux';
+import SettingsOption from '../SettingsOption';
+import messages from '../messages';
+import { scoringCardHooks } from '../hooks';
+
+const ScoringCard = ({
+  scoring,
+  defaultValue,
+  updateSettings,
+  // inject
+  intl,
+  // redux
+  studioEndpointUrl,
+  learningContextId,
+  isLibrary,
+}) => {
+  const {
+    handleUnlimitedChange,
+    handleMaxAttemptChange,
+    handleWeightChange,
+    handleOnChange,
+    attemptDisplayValue,
+  } = scoringCardHooks(scoring, updateSettings, defaultValue);
+
+  const getScoringSummary = (weight, attempts, unlimited) => {
+    let summary = intl.formatMessage(messages.weightSummary, { weight });
+    summary += ` ${String.fromCharCode(183)} `;
+    summary += unlimited
+      ? intl.formatMessage(messages.unlimitedAttemptsSummary)
+      : intl.formatMessage(messages.attemptsSummary, { attempts: attempts || defaultValue });
+    return summary;
+  };
+
+  return (
+    <SettingsOption
+      title={intl.formatMessage(messages.scoringSettingsTitle)}
+      summary={getScoringSummary(scoring.weight, scoring.attempts.number, scoring.attempts.unlimited)}
+      className="scoringCard"
+    >
+      <div className="mb-4">
+        <FormattedMessage {...messages.scoringSettingsLabel} />
+      </div>
+      <Form.Group>
+        <Form.Control
+          type="number"
+          min={0}
+          step={0.1}
+          value={scoring.weight}
+          onChange={handleWeightChange}
+          floatingLabel={intl.formatMessage(messages.scoringWeightInputLabel)}
+        />
+        <Form.Control.Feedback>
+          <FormattedMessage {...messages.weightHint} />
+        </Form.Control.Feedback>
+      </Form.Group>
+      <Form.Group>
+        <Form.Control
+          type="number"
+          min={0}
+          value={attemptDisplayValue}
+          onChange={handleOnChange}
+          onBlur={handleMaxAttemptChange}
+          floatingLabel={intl.formatMessage(messages.scoringAttemptsInputLabel)}
+          disabled={scoring.attempts.unlimited}
+        />
+        <Form.Control.Feedback>
+          <FormattedMessage {...messages.attemptsHint} />
+        </Form.Control.Feedback>
+        <Form.Checkbox
+          className="mt-3 decoration-control-label"
+          checked={scoring.attempts.unlimited}
+          onChange={handleUnlimitedChange}
+          disabled={!_.isNil(defaultValue)}
+        >
+          <div className="x-small">
+            <FormattedMessage {...messages.unlimitedAttemptsCheckboxLabel} />
+          </div>
+        </Form.Checkbox>
+      </Form.Group>
+      {!isLibrary && (
+        <Hyperlink destination={`${studioEndpointUrl}/settings/advanced/${learningContextId}#max_attempts`} target="_blank">
+          <FormattedMessage {...messages.advancedSettingsLinkText} />
+        </Hyperlink>
+      )}
+    </SettingsOption>
+  );
+};
+
+ScoringCard.propTypes = {
+  intl: intlShape.isRequired,
+  // eslint-disable-next-line
+  scoring: PropTypes.any.isRequired,
+  updateSettings: PropTypes.func.isRequired,
+  defaultValue: PropTypes.number,
+  // redux
+  studioEndpointUrl: PropTypes.string.isRequired,
+  learningContextId: PropTypes.string,
+  isLibrary: PropTypes.bool.isRequired,
+};
+
+ScoringCard.defaultProps = {
+  learningContextId: null,
+  defaultValue: null,
+};
+
+export const mapStateToProps = (state) => ({
+  studioEndpointUrl: selectors.app.studioEndpointUrl(state),
+  learningContextId: selectors.app.learningContextId(state),
+  isLibrary: selectors.app.isLibrary(state),
+});
+
+export const mapDispatchToProps = {};
+
+export const ScoringCardInternal = ScoringCard; // For testing only
+export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(ScoringCard));
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/ScoringCard.test.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/ScoringCard.test.jsx
new file mode 100644
index 0000000000..29d8e922cf
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/ScoringCard.test.jsx
@@ -0,0 +1,71 @@
+import 'CourseAuthoring/editors/setupEditorTest';
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+import { formatMessage } from '../../../../../../testUtils';
+import { scoringCardHooks } from '../hooks';
+import { ScoringCardInternal as ScoringCard } from './ScoringCard';
+
+jest.mock('../hooks', () => ({
+  scoringCardHooks: jest.fn(),
+}));
+
+describe('ScoringCard', () => {
+  const scoring = {
+    weight: 1.5,
+    attempts: {
+      unlimited: false,
+      number: 5,
+    },
+    updateSettings: jest.fn().mockName('args.updateSettings'),
+    intl: { formatMessage },
+  };
+
+  const props = {
+    scoring,
+    intl: { formatMessage },
+    defaultValue: 1,
+  };
+
+  const scoringCardHooksProps = {
+    handleMaxAttemptChange: jest.fn().mockName('scoringCardHooks.handleMaxAttemptChange'),
+    handleWeightChange: jest.fn().mockName('scoringCardHooks.handleWeightChange'),
+    handleOnChange: jest.fn().mockName('scoringCardHooks.handleOnChange'),
+    local: 5,
+  };
+
+  scoringCardHooks.mockReturnValue(scoringCardHooksProps);
+
+  describe('behavior', () => {
+    it(' calls scoringCardHooks when initialized', () => {
+      shallow(<ScoringCard {...props} />);
+      expect(scoringCardHooks).toHaveBeenCalledWith(scoring, props.updateSettings, props.defaultValue);
+    });
+  });
+
+  describe('snapshot', () => {
+    test('snapshot: scoring setting card', () => {
+      expect(shallow(<ScoringCard {...props} />).snapshot).toMatchSnapshot();
+    });
+    test('snapshot: scoring setting card zero zero weight', () => {
+      expect(shallow(<ScoringCard
+        {...props}
+        scoring={{
+          ...scoring,
+          weight: 0,
+        }}
+      />).snapshot).toMatchSnapshot();
+    });
+    test('snapshot: scoring setting card max attempts', () => {
+      expect(shallow(<ScoringCard
+        {...props}
+        scoring={{
+          ...scoring,
+          attempts: {
+            unlimited: true,
+            number: 0,
+          },
+        }}
+      />).snapshot).toMatchSnapshot();
+    });
+  });
+});
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/ShowAnswerCard.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/ShowAnswerCard.jsx
new file mode 100644
index 0000000000..77a2163c6e
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/ShowAnswerCard.jsx
@@ -0,0 +1,118 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { injectIntl, FormattedMessage, intlShape } from '@edx/frontend-platform/i18n';
+import { Form, Hyperlink } from '@openedx/paragon';
+import SettingsOption from '../SettingsOption';
+import { ShowAnswerTypes, ShowAnswerTypesKeys } from '../../../../../../data/constants/problem';
+import { selectors } from '../../../../../../data/redux';
+import messages from '../messages';
+import { useAnswerSettings } from '../hooks';
+
+const ShowAnswerCard = ({
+  showAnswer,
+  updateSettings,
+  defaultValue,
+  // inject
+  intl,
+  // redux
+  studioEndpointUrl,
+  learningContextId,
+  isLibrary,
+}) => {
+  const {
+    handleShowAnswerChange,
+    handleAttemptsChange,
+    showAttempts,
+  } = useAnswerSettings(showAnswer, updateSettings);
+
+  const currentShowAnswer = showAnswer.on || defaultValue;
+
+  const showAnswerSection = (
+    <>
+      <div className="pb-2">
+        <span>
+          <FormattedMessage {...messages.showAnswerSettingText} />
+        </span>
+      </div>
+      {!isLibrary && (
+        <div className="pb-4">
+          <Hyperlink destination={`${studioEndpointUrl}/settings/advanced/${learningContextId}#showanswer`} target="_blank">
+            <FormattedMessage {...messages.advancedSettingsLinkText} />
+          </Hyperlink>
+        </div>
+      )}
+      <Form.Group className="pb-0 mb-0">
+        <Form.Control
+          as="select"
+          value={currentShowAnswer}
+          onChange={handleShowAnswerChange}
+        >
+          {Object.values(ShowAnswerTypesKeys).map((answerType) => {
+            let optionDisplayName = ShowAnswerTypes[answerType];
+            if (answerType === defaultValue) {
+              optionDisplayName = { ...optionDisplayName, defaultMessage: `${optionDisplayName.defaultMessage} (Default)` };
+            }
+            return (
+              <option
+                key={answerType}
+                value={answerType}
+              >
+                {intl.formatMessage(optionDisplayName)}
+              </option>
+            );
+          })}
+        </Form.Control>
+      </Form.Group>
+      {showAttempts
+        && (
+        <Form.Group className="pb-0 mb-0 mt-4">
+          <Form.Control
+            type="number"
+            min={0}
+            value={showAnswer.afterAttempts}
+            onChange={handleAttemptsChange}
+            floatingLabel={intl.formatMessage(messages.showAnswerAttemptsInputLabel)}
+          />
+        </Form.Group>
+        )}
+    </>
+  );
+
+  return (
+    <SettingsOption
+      title={intl.formatMessage(messages.showAnswerSettingsTitle)}
+      summary={intl.formatMessage(ShowAnswerTypes[currentShowAnswer])}
+    >
+      {showAnswerSection}
+    </SettingsOption>
+  );
+};
+
+ShowAnswerCard.propTypes = {
+  intl: intlShape.isRequired,
+  // eslint-disable-next-line
+  showAnswer: PropTypes.any.isRequired,
+  solutionExplanation: PropTypes.string,
+  updateSettings: PropTypes.func.isRequired,
+  studioEndpointUrl: PropTypes.string.isRequired,
+  learningContextId: PropTypes.string,
+  isLibrary: PropTypes.bool.isRequired,
+  defaultValue: PropTypes.string,
+};
+ShowAnswerCard.defaultProps = {
+  solutionExplanation: '',
+  learningContextId: null,
+  defaultValue: 'finished',
+};
+
+export const mapStateToProps = (state) => ({
+  studioEndpointUrl: selectors.app.studioEndpointUrl(state),
+  learningContextId: selectors.app.learningContextId(state),
+  isLibrary: selectors.app.isLibrary(state),
+});
+
+export const mapDispatchToProps = {};
+
+export const ShowAnswerCardInternal = ShowAnswerCard; // For testing only
+export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(ShowAnswerCard));
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/ShowAnswerCard.test.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/ShowAnswerCard.test.jsx
new file mode 100644
index 0000000000..dae004510b
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/ShowAnswerCard.test.jsx
@@ -0,0 +1,80 @@
+import 'CourseAuthoring/editors/setupEditorTest';
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+import { formatMessage } from '../../../../../../testUtils';
+import { selectors } from '../../../../../../data/redux';
+import { ShowAnswerCardInternal as ShowAnswerCard, mapStateToProps, mapDispatchToProps } from './ShowAnswerCard';
+import { useAnswerSettings } from '../hooks';
+
+jest.mock('../hooks', () => ({
+  useAnswerSettings: jest.fn(),
+}));
+
+jest.mock('../../../../../../data/redux', () => ({
+  selectors: {
+    app: {
+      studioEndpointUrl: jest.fn(state => ({ studioEndpointUrl: state })),
+      learningContextId: jest.fn(state => ({ learningContextId: state })),
+      isLibrary: jest.fn(state => ({ isLibrary: state })),
+    },
+  },
+  thunkActions: {
+    video: jest.fn(),
+  },
+}));
+
+describe('ShowAnswerCard', () => {
+  const showAnswer = {
+    on: 'after_attempts',
+    afterAttempts: 5,
+    updateSettings: jest.fn().mockName('args.updateSettings'),
+    intl: { formatMessage },
+  };
+  const props = {
+    showAnswer,
+    defaultValue: 'finished',
+    // injected
+    intl: { formatMessage },
+    // redux
+    studioEndpointUrl: 'SoMEeNDpOinT',
+    learningContextId: 'sOMEcouRseId',
+  };
+
+  const useAnswerSettingsProps = {
+    handleShowAnswerChange: jest.fn().mockName('useAnswerSettings.handleShowAnswerChange'),
+    handleAttemptsChange: jest.fn().mockName('useAnswerSettings.handleAttemptsChange'),
+  };
+
+  useAnswerSettings.mockReturnValue(useAnswerSettingsProps);
+
+  describe('behavior', () => {
+    it(' calls useAnswerSettings when initialized', () => {
+      shallow(<ShowAnswerCard {...props} />);
+      expect(useAnswerSettings).toHaveBeenCalledWith(showAnswer, props.updateSettings);
+    });
+  });
+
+  describe('snapshot', () => {
+    test('snapshot: show answer setting card', () => {
+      expect(shallow(<ShowAnswerCard {...props} />).snapshot).toMatchSnapshot();
+    });
+  });
+  describe('mapStateToProps', () => {
+    const testState = { A: 'pple', B: 'anana', C: 'ucumber' };
+    test('studioEndpointUrl from app.studioEndpointUrl', () => {
+      expect(
+        mapStateToProps(testState).studioEndpointUrl,
+      ).toEqual(selectors.app.studioEndpointUrl(testState));
+    });
+    test('learningContextId from app.learningContextId', () => {
+      expect(
+        mapStateToProps(testState).learningContextId,
+      ).toEqual(selectors.app.learningContextId(testState));
+    });
+  });
+  describe('mapDispatchToProps', () => {
+    test('equal an empty object', () => {
+      expect(mapDispatchToProps).toEqual({});
+    });
+  });
+});
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/SwitchToAdvancedEditorCard.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/SwitchToAdvancedEditorCard.jsx
new file mode 100644
index 0000000000..90454579ea
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/SwitchToAdvancedEditorCard.jsx
@@ -0,0 +1,63 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { injectIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
+import { Card } from '@openedx/paragon';
+import PropTypes from 'prop-types';
+import messages from '../messages';
+import { thunkActions } from '../../../../../../data/redux';
+import BaseModal from '../../../../../../sharedComponents/BaseModal';
+import Button from '../../../../../../sharedComponents/Button';
+import { confirmSwitchToAdvancedEditor } from '../hooks';
+import { ProblemTypeKeys } from '../../../../../../data/constants/problem';
+
+const SwitchToAdvancedEditorCard = ({
+  problemType,
+  switchToAdvancedEditor,
+}) => {
+  const [isConfirmOpen, setConfirmOpen] = React.useState(false);
+
+  if (problemType === ProblemTypeKeys.ADVANCED) { return null; }
+
+  return (
+    <Card className="border border-light-700 shadow-none">
+      <BaseModal
+        isOpen={isConfirmOpen}
+        close={() => { setConfirmOpen(false); }}
+        title={(<FormattedMessage {...messages.ConfirmSwitchMessageTitle} />)}
+        confirmAction={(
+          <Button
+            onClick={() => confirmSwitchToAdvancedEditor({ switchToAdvancedEditor, setConfirmOpen })}
+            variant="primary"
+          >
+            <FormattedMessage {...messages.ConfirmSwitchButtonLabel} />
+          </Button>
+        )}
+        size="md"
+      >
+        <FormattedMessage {...messages.ConfirmSwitchMessage} />
+      </BaseModal>
+      <Button
+        className="my-3 ml-2 py-0"
+        variant="link"
+        size="sm"
+        onClick={() => { setConfirmOpen(true); }}
+      >
+        <FormattedMessage {...messages.SwitchButtonLabel} />
+      </Button>
+    </Card>
+  );
+};
+
+SwitchToAdvancedEditorCard.propTypes = {
+  switchToAdvancedEditor: PropTypes.func.isRequired,
+  problemType: PropTypes.string.isRequired,
+};
+
+export const mapStateToProps = () => ({
+});
+export const mapDispatchToProps = {
+  switchToAdvancedEditor: thunkActions.problem.switchToAdvancedEditor,
+};
+
+export const SwitchToAdvancedEditorCardInternal = SwitchToAdvancedEditorCard; // For testing only
+export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(SwitchToAdvancedEditorCard));
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/SwitchToAdvancedEditorCard.test.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/SwitchToAdvancedEditorCard.test.jsx
new file mode 100644
index 0000000000..b9d59f27f1
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/SwitchToAdvancedEditorCard.test.jsx
@@ -0,0 +1,25 @@
+import 'CourseAuthoring/editors/setupEditorTest';
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+import { SwitchToAdvancedEditorCardInternal as SwitchToAdvancedEditorCard, mapDispatchToProps } from './SwitchToAdvancedEditorCard';
+import { thunkActions } from '../../../../../../data/redux';
+
+describe('SwitchToAdvancedEditorCard snapshot', () => {
+  const mockSwitchToAdvancedEditor = jest.fn().mockName('switchToAdvancedEditor');
+  test('snapshot: SwitchToAdvancedEditorCard', () => {
+    expect(
+      shallow(<SwitchToAdvancedEditorCard switchToAdvancedEditor={mockSwitchToAdvancedEditor} problemType="stringresponse" />).snapshot,
+    ).toMatchSnapshot();
+  });
+  test('snapshot: SwitchToAdvancedEditorCard returns null', () => {
+    expect(
+      shallow(<SwitchToAdvancedEditorCard switchToAdvancedEditor={mockSwitchToAdvancedEditor} problemType="advanced" />).snapshot,
+    ).toMatchSnapshot();
+  });
+
+  describe('mapDispatchToProps', () => {
+    test('updateField from actions.problem.updateField', () => {
+      expect(mapDispatchToProps.switchToAdvancedEditor).toEqual(thunkActions.problem.switchToAdvancedEditor);
+    });
+  });
+});
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/TimerCard.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/TimerCard.jsx
new file mode 100644
index 0000000000..be4a3fe771
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/TimerCard.jsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import { injectIntl, FormattedMessage, intlShape } from '@edx/frontend-platform/i18n';
+import { Form } from '@openedx/paragon';
+import PropTypes from 'prop-types';
+import SettingsOption from '../SettingsOption';
+import messages from '../messages';
+import { timerCardHooks } from '../hooks';
+
+const TimerCard = ({
+  timeBetween,
+  updateSettings,
+  // inject
+  intl,
+}) => {
+  const { handleChange } = timerCardHooks(updateSettings);
+
+  return (
+    <SettingsOption
+      title={intl.formatMessage(messages.timerSettingsTitle)}
+      summary={intl.formatMessage(messages.timerSummary, { time: timeBetween })}
+    >
+      <div className="spacedMessage">
+        <span>
+          <FormattedMessage {...messages.timerSettingText} />
+        </span>
+      </div>
+      <Form.Group>
+        <Form.Control
+          type="number"
+          min={0}
+          value={timeBetween}
+          onChange={handleChange}
+          floatingLabel={intl.formatMessage(messages.timerInputLabel)}
+        />
+      </Form.Group>
+    </SettingsOption>
+  );
+};
+
+TimerCard.propTypes = {
+  timeBetween: PropTypes.number.isRequired,
+  updateSettings: PropTypes.func.isRequired,
+  intl: intlShape.isRequired,
+};
+
+export const TimerCardInternal = TimerCard; // For testing only
+export default injectIntl(TimerCard);
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/TimerCard.test.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/TimerCard.test.jsx
new file mode 100644
index 0000000000..614a73639b
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/TimerCard.test.jsx
@@ -0,0 +1,37 @@
+import 'CourseAuthoring/editors/setupEditorTest';
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+import { formatMessage } from '../../../../../../testUtils';
+import { TimerCardInternal as TimerCard } from './TimerCard';
+import { timerCardHooks } from '../hooks';
+
+jest.mock('../hooks', () => ({
+  timerCardHooks: jest.fn(),
+}));
+
+describe('TimerCard', () => {
+  const props = {
+    timeBetween: 5,
+    updateSettings: jest.fn().mockName('args.updateSettings'),
+    intl: { formatMessage },
+  };
+
+  const timerCardHooksProps = {
+    handleChange: jest.fn().mockName('timerCardHooks.handleChange'),
+  };
+
+  timerCardHooks.mockReturnValue(timerCardHooksProps);
+
+  describe('behavior', () => {
+    it(' calls timerCardHooks when initialized', () => {
+      shallow(<TimerCard {...props} />);
+      expect(timerCardHooks).toHaveBeenCalledWith(props.updateSettings);
+    });
+  });
+
+  describe('snapshot', () => {
+    test('snapshot: renders reset true setting card', () => {
+      expect(shallow(<TimerCard {...props} />).snapshot).toMatchSnapshot();
+    });
+  });
+});
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/Tolerance/constants.ts b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/Tolerance/constants.ts
new file mode 100644
index 0000000000..aa787f6f2a
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/Tolerance/constants.ts
@@ -0,0 +1,16 @@
+import messages from './messages';
+
+export const ToleranceTypes = {
+  percent: {
+    type: 'Percent',
+    message: messages.typesPercentage,
+  },
+  number: {
+    type: 'Number',
+    message: messages.typesNumber,
+  },
+  none: {
+    type: 'None',
+    message: messages.typesNone,
+  },
+} as const;
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/Tolerance/index.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/Tolerance/index.jsx
new file mode 100644
index 0000000000..96d7326570
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/Tolerance/index.jsx
@@ -0,0 +1,129 @@
+import React, { useEffect } from 'react';
+import { injectIntl, FormattedMessage, intlShape } from '@edx/frontend-platform/i18n';
+import { Alert, Form } from '@openedx/paragon';
+import PropTypes from 'prop-types';
+import SettingsOption from '../../SettingsOption';
+import messages from './messages';
+import { ToleranceTypes } from './constants';
+
+// eslint-disable-next-line no-unused-vars
+export const isAnswerRangeSet = ({ answers }) => !!answers[0].isAnswerRange;
+
+export const handleToleranceTypeChange = ({ updateSettings, tolerance, answers }) => (event) => {
+  if (!isAnswerRangeSet({ answers })) {
+    let value;
+    if (event.target.value === ToleranceTypes.none.type) {
+      value = null;
+    } else {
+      value = tolerance.value || 0;
+    }
+    const newTolerance = { type: ToleranceTypes[Object.keys(ToleranceTypes)[event.target.selectedIndex]].type, value };
+    updateSettings({ tolerance: newTolerance });
+  }
+};
+
+export const handleToleranceValueChange = ({ updateSettings, tolerance, answers }) => (event) => {
+  if (!isAnswerRangeSet({ answers })) {
+    let value = parseFloat(event.target.value);
+    if (value < 0) {
+      value = 0;
+    }
+    const newTolerance = { value, type: tolerance.type };
+    updateSettings({ tolerance: newTolerance });
+  }
+};
+
+export const getSummary = ({ tolerance, intl }) => {
+  switch (tolerance?.type) {
+    case ToleranceTypes.percent.type:
+      return `± ${tolerance.value}%`;
+    case ToleranceTypes.number.type:
+      return `± ${tolerance.value}`;
+    case ToleranceTypes.none.type:
+      return intl.formatMessage(messages.noneToleranceSummary);
+    default:
+      return intl.formatMessage(messages.noneToleranceSummary);
+  }
+};
+
+const ToleranceCard = ({
+  tolerance,
+  answers,
+  updateSettings,
+  // inject
+  intl,
+}) => {
+  const isAnswerRange = isAnswerRangeSet({ answers });
+  let summary = getSummary({ tolerance, intl });
+  useEffect(() => { summary = getSummary({ tolerance, intl }); }, [tolerance]);
+  return (
+    <SettingsOption
+      title={intl.formatMessage(messages.toleranceSettingTitle)}
+      summary={summary}
+      none={tolerance.type === ToleranceTypes.none.type}
+    >
+      { isAnswerRange
+       && (
+       <Alert
+         variant="info"
+       >
+         <FormattedMessage {...messages.toleranceAnswerRangeWarning} />
+       </Alert>
+       )}
+      <div className="mb-3">
+        <span>
+          <FormattedMessage {...messages.toleranceSettingText} />
+        </span>
+      </div>
+      <Form.Group className="pb-0 mb-0">
+        <Form.Control
+          as="select"
+          onChange={handleToleranceTypeChange({ updateSettings, tolerance, answers })}
+          disabled={isAnswerRange}
+          value={tolerance.type}
+        >
+          {Object.keys(ToleranceTypes).map((toleranceType) => (
+            <option
+              key={toleranceType.type}
+              value={toleranceType.type}
+            >
+              {intl.formatMessage(ToleranceTypes[toleranceType].message)}
+            </option>
+          ))}
+        </Form.Control>
+        { tolerance?.type !== ToleranceTypes.none.type && !isAnswerRange
+          && (
+          <Form.Control
+            className="mt-4"
+            type="number"
+            min={0}
+            step={0.1}
+            value={tolerance.value}
+            onChange={handleToleranceValueChange({ updateSettings, tolerance, answers })}
+            floatingLabel={intl.formatMessage(messages.toleranceValueInputLabel)}
+          />
+          )}
+      </Form.Group>
+
+    </SettingsOption>
+  );
+};
+
+ToleranceCard.propTypes = {
+  tolerance: PropTypes.shape({
+    type: PropTypes.string,
+    value: PropTypes.oneOfType([PropTypes.number, PropTypes.any]),
+  }).isRequired,
+  answers: PropTypes.arrayOf(PropTypes.shape({
+    correct: PropTypes.bool,
+    id: PropTypes.string,
+    selectedFeedback: PropTypes.string,
+    title: PropTypes.string,
+    unselectedFeedback: PropTypes.string,
+  })).isRequired,
+  updateSettings: PropTypes.func.isRequired,
+  intl: intlShape.isRequired,
+};
+
+export const ToleranceCardInternal = ToleranceCard; // For testing only
+export default injectIntl(ToleranceCard);
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/Tolerance/index.test.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/Tolerance/index.test.jsx
new file mode 100644
index 0000000000..f781f097d6
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/Tolerance/index.test.jsx
@@ -0,0 +1,157 @@
+import {
+  render, screen, fireEvent,
+} from '@testing-library/react';
+import React from 'react';
+import messages from './messages';
+import { ToleranceTypes } from './constants';
+import { ToleranceCardInternal as ToleranceCard } from './index';
+import { formatMessage } from '../../../../../../../testUtils';
+
+jest.mock('@edx/frontend-platform/i18n', () => ({
+  __esmodule: true,
+  ...jest.requireActual('@edx/frontend-platform/i18n'),
+  FormattedMessage: jest.fn(({ defaultMessage }) => (
+    <div>{ defaultMessage }</div>
+  )),
+}));
+
+// eslint-disable-next-line react/prop-types
+jest.mock('../../SettingsOption', () => function mockSettingsOption({ children, summary }) {
+  return <div className="SettingsOption" data-testid="Settings-Option">{summary}{children}</div>;
+});
+
+jest.mock('@openedx/paragon', () => ({
+  Alert: jest.fn(({ children }) => (
+    <div className="PGN-Alert">{children}</div>)),
+  Form: {
+    Control: jest.fn(({
+      children, onChange, as, value, disabled,
+    }) => {
+      if (as === 'select') {
+        return (<select className="PGN-Form-Control" data-testid="select" onChange={onChange} disabled={disabled}>{children}</select>);
+      }
+      return (<input type="number" data-testid="input" onChange={onChange} value={value} />);
+    }),
+    Group: jest.fn(({ children }) => (<div className="PGN-Form-Group">{children}</div>)),
+  },
+}));
+
+describe('ToleranceCard', () => {
+  const mockToleranceNull = {
+    type: ToleranceTypes.none.type,
+    value: null,
+  };
+  const mockTolerancePercent = {
+    type: ToleranceTypes.percent.type,
+    value: 0,
+  };
+  const mockToleranceNumber = {
+    type: ToleranceTypes.number.type,
+    value: 0,
+  };
+
+  const props = {
+    answers: [{
+      id: 'A',
+      correct: true,
+      selectedFeedback: '',
+      title: 'An Answer',
+      isAnswerRange: false,
+      unselectedFeedback: '',
+    },
+    ],
+    updateSettings: jest.fn(),
+    intl: {
+      formatMessage,
+    },
+  };
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+  describe('summary', () => {
+    it('Renders None', async () => {
+      render(<ToleranceCard tolerance={mockToleranceNull} {...props} />);
+      const NoneText = screen.getAllByText(ToleranceTypes.none.type);
+      expect(NoneText).toBeDefined();
+    });
+    it('Render Percent Value', () => {
+      render(<ToleranceCard tolerance={mockTolerancePercent} {...props} />);
+      const PercentText = screen.getByText(`± ${mockTolerancePercent.value}%`);
+      expect(PercentText).toBeDefined();
+    });
+    it('Renders Number Value', () => {
+      render(<ToleranceCard tolerance={mockToleranceNumber} {...props} />);
+      const NumberText = screen.getByText(`± ${mockToleranceNumber.value}`);
+      expect(NumberText).toBeDefined();
+    });
+
+    it('If there is an answer range, show message and disable dropdown.', () => {
+      const rangeprops = {
+        answers: [{
+          id: 'A',
+          correct: true,
+          selectedFeedback: '',
+          title: 'An Answer',
+          isAnswerRange: true,
+          unselectedFeedback: '',
+        },
+        ],
+        updateSettings: jest.fn(),
+        intl: {
+          formatMessage,
+        },
+      };
+
+      render(<ToleranceCard
+        tolerance={mockToleranceNumber}
+        {...rangeprops}
+      />);
+      const NumberText = screen.getByText(messages.toleranceAnswerRangeWarning.defaultMessage);
+      expect(NumberText).toBeDefined();
+      expect(screen.getByTestId('select').getAttributeNames().includes('disabled')).toBeTruthy();
+    });
+  });
+  describe('Type Select', () => {
+    it('Renders the types for selection', async () => {
+      const { container } = render(<ToleranceCard tolerance={mockToleranceNull} {...props} />);
+      const options = container.querySelectorAll('option');
+      expect(options.length).toBe(3);
+      Object.keys(ToleranceTypes).forEach(type => {
+        expect(screen.getAllByText(ToleranceTypes[type].message.defaultMessage)).toBeDefined();
+      });
+    });
+    it('Calls updateSettings on selection of an option', async () => {
+      const { container, getByTestId } = render(<ToleranceCard tolerance={mockToleranceNull} {...props} />);
+      const select = getByTestId('select');
+      fireEvent.change(select, { target: { value: ToleranceTypes.number.type } });
+      const options = container.querySelectorAll('option');
+      expect(options[0].selected).toBeFalsy();
+      expect(options[1].selected).toBeTruthy();
+      expect(options[2].selected).toBeFalsy();
+      expect(props.updateSettings).toHaveBeenCalledWith({ tolerance: { type: ToleranceTypes.number.type, value: 0 } });
+      fireEvent.change(select, { target: { value: ToleranceTypes.none.type } });
+      expect(props.updateSettings).toHaveBeenCalledWith({ tolerance: { type: ToleranceTypes.none.type, value: null } });
+    });
+  });
+  describe('Value Select', () => {
+    it('Doesnt render if type is null', async () => {
+      const { queryByTestId } = render(<ToleranceCard tolerance={mockToleranceNull} {...props} />);
+      expect(queryByTestId('input')).toBeFalsy();
+    });
+    it('Renders with initial value of tolerance', async () => {
+      const { queryByTestId } = render(<ToleranceCard tolerance={mockToleranceNumber} {...props} />);
+      expect(queryByTestId('input')).toBeTruthy();
+      expect(screen.getByDisplayValue('0')).toBeTruthy();
+    });
+    it('Calls change function on change.', () => {
+      const { queryByTestId } = render(<ToleranceCard tolerance={mockToleranceNumber} {...props} />);
+      fireEvent.change(queryByTestId('input'), { target: { value: 52 } });
+      expect(props.updateSettings).toHaveBeenCalledWith({ tolerance: { type: ToleranceTypes.number.type, value: 52 } });
+    });
+    it('Resets negative value on change.', () => {
+      const { queryByTestId } = render(<ToleranceCard tolerance={mockToleranceNumber} {...props} />);
+      fireEvent.change(queryByTestId('input'), { target: { value: -52 } });
+      expect(props.updateSettings).toHaveBeenCalledWith({ tolerance: { type: ToleranceTypes.number.type, value: 0 } });
+    });
+  });
+});
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/Tolerance/messages.js b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/Tolerance/messages.js
new file mode 100644
index 0000000000..1b16c0cfb2
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/Tolerance/messages.js
@@ -0,0 +1,49 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  toleranceSettingTitle: {
+    id: 'problemEditor.settings.tolerance.title',
+    defaultMessage: 'Tolerance',
+    description: 'Title for tolerance setting menu',
+  },
+  noneToleranceSummary: {
+    id: 'problemEditor.settings.tolerance.summary.none',
+    defaultMessage: 'None',
+    description: 'message provided when no tolerance is set for a problem',
+  },
+  toleranceSettingText: {
+    id: 'problemEditor.settings.tolerance.description.text',
+    defaultMessage: 'The margin of error on either side of an answer.',
+    description: 'Description of the features of setting a tolerance for a problem',
+  },
+  toleranceValueInputLabel: {
+    id: 'problemEditor.settings.tolerance.valueinput',
+    defaultMessage: 'Tolerance',
+    description: 'floating label for input to set the value of the tolerance',
+  },
+  toleranceAnswerRangeWarning: {
+    id: 'problemEditor.settings.tolerance.answerrangewarning',
+    defaultMessage: 'Tolerance cannot be applied to an answer range',
+    description: 'a warning to users that tolerance cannot be aplied to an answer range.',
+  },
+  typesPercentage: {
+    id: 'problemEditor.settings.tolerance.type.percent',
+    defaultMessage: 'Percentage',
+    description: 'A possible value type for a tolerance',
+
+  },
+  typesNumber: {
+    id: 'problemEditor.settings.tolerance.type.number',
+    defaultMessage: 'Number',
+    description: 'A possible value type for a tolerance',
+
+  },
+  typesNone: {
+    id: 'problemEditor.settings.tolerance.type.none',
+    defaultMessage: 'None',
+    description: 'A possible value type for a tolerance',
+  },
+
+});
+
+export default messages;
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/TypeCard.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/TypeCard.jsx
new file mode 100644
index 0000000000..75137b5050
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/TypeCard.jsx
@@ -0,0 +1,68 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import SettingsOption from '../SettingsOption';
+import { ProblemTypeKeys, ProblemTypes } from '../../../../../../data/constants/problem';
+import messages from '../messages';
+import TypeRow from './TypeRow';
+
+const TypeCard = ({
+  answers,
+  blockTitle,
+  correctAnswerCount,
+  problemType,
+  setBlockTitle,
+  updateField,
+  updateAnswer,
+  // inject
+  intl,
+}) => {
+  const problemTypeKeysArray = Object.values(ProblemTypeKeys).filter(key => key !== ProblemTypeKeys.ADVANCED);
+
+  if (problemType === ProblemTypeKeys.ADVANCED) { return null; }
+
+  return (
+    <SettingsOption
+      title={intl.formatMessage(messages.typeSettingTitle)}
+      summary={ProblemTypes[problemType].title}
+    >
+      {problemTypeKeysArray.map((typeKey, i) => (
+        <TypeRow
+          answers={answers}
+          blockTitle={blockTitle}
+          correctAnswerCount={correctAnswerCount}
+          key={typeKey}
+          typeKey={typeKey}
+          label={ProblemTypes[typeKey].title}
+          selected={typeKey !== problemType}
+          problemType={problemType}
+          lastRow={(i + 1) === problemTypeKeysArray.length}
+          setBlockTitle={setBlockTitle}
+          updateField={updateField}
+          updateAnswer={updateAnswer}
+        />
+      ))}
+    </SettingsOption>
+  );
+};
+
+TypeCard.propTypes = {
+  answers: PropTypes.arrayOf(PropTypes.shape({
+    correct: PropTypes.bool,
+    id: PropTypes.string,
+    selectedFeedback: PropTypes.string,
+    title: PropTypes.string,
+    unselectedFeedback: PropTypes.string,
+  })).isRequired,
+  blockTitle: PropTypes.string.isRequired,
+  correctAnswerCount: PropTypes.number.isRequired,
+  problemType: PropTypes.string.isRequired,
+  setBlockTitle: PropTypes.func.isRequired,
+  updateField: PropTypes.func.isRequired,
+  updateAnswer: PropTypes.func.isRequired,
+  // injected
+  intl: intlShape.isRequired,
+};
+
+export const TypeCardInternal = TypeCard; // For testing only
+export default injectIntl(TypeCard);
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/TypeCard.test.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/TypeCard.test.jsx
new file mode 100644
index 0000000000..bd914dec9a
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/TypeCard.test.jsx
@@ -0,0 +1,26 @@
+import 'CourseAuthoring/editors/setupEditorTest';
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+import { formatMessage } from '../../../../../../testUtils';
+import { TypeCardInternal as TypeCard } from './TypeCard';
+import { ProblemTypeKeys } from '../../../../../../data/constants/problem';
+
+describe('TypeCard', () => {
+  const props = {
+    answers: [],
+    blockTitle: 'BLocktiTLE',
+    correctAnswerCount: 0,
+    problemType: ProblemTypeKeys.TEXTINPUT,
+    setBlockTitle: jest.fn().mockName('args.setBlockTitle'),
+    updateField: jest.fn().mockName('args.updateField'),
+    updateAnswer: jest.fn().mockName('args.updateAnswer'),
+    // injected
+    intl: { formatMessage },
+  };
+
+  describe('snapshot', () => {
+    test('snapshot: renders type setting card', () => {
+      expect(shallow(<TypeCard {...props} />).snapshot).toMatchSnapshot();
+    });
+  });
+});
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/TypeRow.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/TypeRow.jsx
new file mode 100644
index 0000000000..ec8bc78ec9
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/TypeRow.jsx
@@ -0,0 +1,64 @@
+import React from 'react';
+import { Icon } from '@openedx/paragon';
+import PropTypes from 'prop-types';
+import { Check } from '@openedx/paragon/icons';
+import { typeRowHooks } from '../hooks';
+
+import Button from '../../../../../../sharedComponents/Button';
+
+const TypeRow = ({
+  answers,
+  blockTitle,
+  correctAnswerCount,
+  typeKey,
+  label,
+  selected,
+  problemType,
+  lastRow,
+  setBlockTitle,
+  updateField,
+  updateAnswer,
+}) => {
+  const { onClick } = typeRowHooks({
+    answers,
+    blockTitle,
+    correctAnswerCount,
+    problemType,
+    setBlockTitle,
+    typeKey,
+    updateField,
+    updateAnswer,
+  });
+
+  return (
+    <>
+      <Button onClick={onClick} className="d-flex p-0 flex-row justify-content-between w-100">
+        <span className="small text-primary-500">{label}</span>
+        <span hidden={selected}><Icon src={Check} className="text-success" /></span>
+      </Button>
+      <hr className={lastRow ? 'd-none' : 'd-block'} />
+    </>
+  );
+};
+
+TypeRow.propTypes = {
+  answers: PropTypes.arrayOf(PropTypes.shape({
+    correct: PropTypes.bool,
+    id: PropTypes.string,
+    selectedFeedback: PropTypes.string,
+    title: PropTypes.string,
+    unselectedFeedback: PropTypes.string,
+  })).isRequired,
+  blockTitle: PropTypes.string.isRequired,
+  correctAnswerCount: PropTypes.number.isRequired,
+  typeKey: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+  selected: PropTypes.bool.isRequired,
+  lastRow: PropTypes.bool.isRequired,
+  problemType: PropTypes.string.isRequired,
+  setBlockTitle: PropTypes.func.isRequired,
+  updateAnswer: PropTypes.func.isRequired,
+  updateField: PropTypes.func.isRequired,
+};
+
+export default TypeRow;
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/TypeRow.test.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/TypeRow.test.jsx
new file mode 100644
index 0000000000..3902fd9659
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/TypeRow.test.jsx
@@ -0,0 +1,60 @@
+import 'CourseAuthoring/editors/setupEditorTest';
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+import TypeRow from './TypeRow';
+import { typeRowHooks } from '../hooks';
+
+jest.mock('../hooks', () => ({
+  typeRowHooks: jest.fn(),
+}));
+
+describe('TypeRow', () => {
+  const typeKey = 'TEXTINPUT';
+  const props = {
+    answers: [],
+    blockTitle: 'bLoCkTiTLE',
+    correctAnswerCount: 0,
+    typeKey,
+    label: 'Text Input Problem',
+    selected: true,
+    lastRow: false,
+    problemType: 'prOBlEMtyPE',
+    setBlockTitle: jest.fn().mockName('args.setBlockTitle'),
+    updateField: jest.fn().mockName('args.updateField'),
+    updateAnswer: jest.fn().mockName('args.updateAnswer'),
+  };
+
+  const typeRowHooksProps = {
+    onClick: jest.fn().mockName('typeRowHooks.onClick'),
+  };
+
+  typeRowHooks.mockReturnValue(typeRowHooksProps);
+
+  describe('behavior', () => {
+    it(' calls typeRowHooks when initialized', () => {
+      shallow(<TypeRow {...props} />);
+      expect(typeRowHooks).toHaveBeenCalledWith({
+        answers: props.answers,
+        blockTitle: props.blockTitle,
+        correctAnswerCount: props.correctAnswerCount,
+        problemType: props.problemType,
+        typeKey,
+        setBlockTitle: props.setBlockTitle,
+        updateField: props.updateField,
+        updateAnswer: props.updateAnswer,
+      });
+    });
+  });
+
+  describe('snapshot', () => {
+    test('snapshot: renders type row setting card', () => {
+      expect(shallow(<TypeRow {...props} />).snapshot).toMatchSnapshot();
+    });
+    test('snapshot: renders type row setting card not selected', () => {
+      expect(shallow(<TypeRow {...props} selected={false} />).snapshot).toMatchSnapshot();
+    });
+    test('snapshot: renders type row setting card last row', () => {
+      expect(shallow(<TypeRow {...props} lastRow />).snapshot).toMatchSnapshot();
+    });
+  });
+});
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/HintRow.test.jsx.snap b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/HintRow.test.jsx.snap
new file mode 100644
index 0000000000..b557d1dc1f
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/HintRow.test.jsx.snap
@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`HintRow snapshot snapshot: renders hints row 1`] = `
+<ActionRow
+  className="mb-4"
+>
+  <Container
+    className="p-0"
+    fluid={true}
+  >
+    <ExpandableTextArea
+      error={false}
+      errorMessage={null}
+      id="hint-0"
+      images={{}}
+      isLibrary={false}
+      learningContextId="course+org+run"
+      placeholder="Hint"
+      setContent={[MockFunction]}
+      value="hint_1"
+    />
+  </Container>
+  <div
+    className="d-flex flex-row flex-nowrap"
+  >
+    <IconButton
+      alt="Delete answer"
+      iconAs="Icon"
+      onClick={[MockFunction]}
+      variant="primary"
+    />
+  </div>
+</ActionRow>
+`;
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/HintsCard.test.jsx.snap b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/HintsCard.test.jsx.snap
new file mode 100644
index 0000000000..7e7fe0fc0d
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/HintsCard.test.jsx.snap
@@ -0,0 +1,97 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`HintsCard snapshot snapshot: renders hints setting card multiple hints 1`] = `
+<SettingsOption
+  className=""
+  extraSections={[]}
+  hasExpandableTextArea={true}
+  none={false}
+  summary=" {count, plural, =0 {} other {(+# more)}}"
+  title="Hints"
+>
+  <injectIntl(ShimmedIntlComponent)
+    handleChange={[MockFunction hintsRowHooks.handleChange]}
+    handleDelete={[MockFunction hintsRowHooks.handleDelete]}
+    id={1}
+    key="1"
+    value="hint1"
+  />
+  <injectIntl(ShimmedIntlComponent)
+    handleChange={[MockFunction hintsRowHooks.handleChange]}
+    handleDelete={[MockFunction hintsRowHooks.handleDelete]}
+    id={2}
+    key="2"
+    value=""
+  />
+  <Button
+    className="m-0 p-0 font-weight-bold"
+    onClick={[MockFunction hintsCardHooks.handleAdd]}
+    size="sm"
+    text={null}
+    variant="add"
+  >
+    <FormattedMessage
+      defaultMessage="Add hint"
+      description="Add hint button text"
+      id="authoring.problemeditor.settings.hint.addHintButton"
+    />
+  </Button>
+</SettingsOption>
+`;
+
+exports[`HintsCard snapshot snapshot: renders hints setting card no hints 1`] = `
+<SettingsOption
+  className=""
+  extraSections={[]}
+  hasExpandableTextArea={true}
+  none={true}
+  summary="None"
+  title="Hints"
+>
+  <Button
+    className="m-0 p-0 font-weight-bold"
+    onClick={[MockFunction hintsCardHooks.handleAdd]}
+    size="sm"
+    text={null}
+    variant="add"
+  >
+    <FormattedMessage
+      defaultMessage="Add hint"
+      description="Add hint button text"
+      id="authoring.problemeditor.settings.hint.addHintButton"
+    />
+  </Button>
+</SettingsOption>
+`;
+
+exports[`HintsCard snapshot snapshot: renders hints setting card one hint 1`] = `
+<SettingsOption
+  className=""
+  extraSections={[]}
+  hasExpandableTextArea={true}
+  none={false}
+  summary="hint1 {count, plural, =0 {} other {(+# more)}}"
+  title="Hints"
+>
+  <injectIntl(ShimmedIntlComponent)
+    handleChange={[MockFunction hintsRowHooks.handleChange]}
+    handleDelete={[MockFunction hintsRowHooks.handleDelete]}
+    id={1}
+    key="1"
+    value="hint1"
+  />
+  <Button
+    className="m-0 p-0 font-weight-bold"
+    onClick={[MockFunction hintsCardHooks.handleAdd]}
+    size="sm"
+    text={null}
+    variant="add"
+  >
+    <FormattedMessage
+      defaultMessage="Add hint"
+      description="Add hint button text"
+      id="authoring.problemeditor.settings.hint.addHintButton"
+    />
+  </Button>
+</SettingsOption>
+`;
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/ResetCard.test.jsx.snap b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/ResetCard.test.jsx.snap
new file mode 100644
index 0000000000..23d9f5c69a
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/ResetCard.test.jsx.snap
@@ -0,0 +1,127 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ResetCard snapshot snapshot: renders reset true setting card 1`] = `
+<SettingsOption
+  className="resetCard"
+  extraSections={[]}
+  hasExpandableTextArea={false}
+  summary="False"
+  title="Show reset option"
+>
+  <div
+    className="halfSpacedMessage"
+  >
+    <span>
+      <FormattedMessage
+        defaultMessage="Determines whether a 'Reset' button is shown so the user may reset their answer, generally for use in practice or formative assessments."
+        description="Reset settings card text"
+        id="authoring.problemeditor.settings.reset.text"
+      />
+    </span>
+  </div>
+  <div
+    className="spacedMessage"
+  >
+    <Hyperlink
+      destination="sTuDioEndpOintUrl/settings/advanced/leArningCoNteXtId#show_reset_button"
+      target="_blank"
+    >
+      <FormattedMessage
+        defaultMessage="Set a default value in advanced settings"
+        description="Advanced settings link text"
+        id="authoring.problemeditor.settings.advancedSettingLink.text"
+      />
+    </Hyperlink>
+  </div>
+  <ButtonGroup
+    className="resetSettingsButtons mb-2"
+    size="sm"
+  >
+    <Button
+      onClick={[MockFunction resetCardHooks.setResetFalse]}
+      size="sm"
+      variant="primary"
+    >
+      <FormattedMessage
+        defaultMessage="False"
+        description="False option for reset"
+        id="authoring.problemeditor.settings.reset.false"
+      />
+    </Button>
+    <Button
+      onClick={[MockFunction resetCardHooks.setResetTrue]}
+      size="sm"
+      variant="outline-primary"
+    >
+      <FormattedMessage
+        defaultMessage="True"
+        description="True option for reset"
+        id="authoring.problemeditor.settings.reset.true"
+      />
+    </Button>
+  </ButtonGroup>
+</SettingsOption>
+`;
+
+exports[`ResetCard snapshot snapshot: renders reset true setting card 2`] = `
+<SettingsOption
+  className="resetCard"
+  extraSections={[]}
+  hasExpandableTextArea={false}
+  summary="True"
+  title="Show reset option"
+>
+  <div
+    className="halfSpacedMessage"
+  >
+    <span>
+      <FormattedMessage
+        defaultMessage="Determines whether a 'Reset' button is shown so the user may reset their answer, generally for use in practice or formative assessments."
+        description="Reset settings card text"
+        id="authoring.problemeditor.settings.reset.text"
+      />
+    </span>
+  </div>
+  <div
+    className="spacedMessage"
+  >
+    <Hyperlink
+      destination="sTuDioEndpOintUrl/settings/advanced/leArningCoNteXtId#show_reset_button"
+      target="_blank"
+    >
+      <FormattedMessage
+        defaultMessage="Set a default value in advanced settings"
+        description="Advanced settings link text"
+        id="authoring.problemeditor.settings.advancedSettingLink.text"
+      />
+    </Hyperlink>
+  </div>
+  <ButtonGroup
+    className="resetSettingsButtons mb-2"
+    size="sm"
+  >
+    <Button
+      onClick={[MockFunction resetCardHooks.setResetFalse]}
+      size="sm"
+      variant="outline-primary"
+    >
+      <FormattedMessage
+        defaultMessage="False"
+        description="False option for reset"
+        id="authoring.problemeditor.settings.reset.false"
+      />
+    </Button>
+    <Button
+      onClick={[MockFunction resetCardHooks.setResetTrue]}
+      size="sm"
+      variant="primary"
+    >
+      <FormattedMessage
+        defaultMessage="True"
+        description="True option for reset"
+        id="authoring.problemeditor.settings.reset.true"
+      />
+    </Button>
+  </ButtonGroup>
+</SettingsOption>
+`;
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/ScoringCard.test.jsx.snap b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/ScoringCard.test.jsx.snap
new file mode 100644
index 0000000000..9f07b02d06
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/ScoringCard.test.jsx.snap
@@ -0,0 +1,238 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ScoringCard snapshot snapshot: scoring setting card 1`] = `
+<SettingsOption
+  className="scoringCard"
+  extraSections={[]}
+  hasExpandableTextArea={false}
+  summary="{weight, plural, =0 {Ungraded} other {# points}} · {attempts, plural, =1 {# attempt} other {# attempts}}"
+  title="Scoring"
+>
+  <div
+    className="mb-4"
+  >
+    <FormattedMessage
+      defaultMessage="Specify point weight and the number of answer attempts"
+      description="Descriptive text for scoring settings"
+      id="authoring.problemeditor.settings.scoring.label"
+    />
+  </div>
+  <Form.Group>
+    <Form.Control
+      floatingLabel="Points"
+      min={0}
+      onChange={[MockFunction scoringCardHooks.handleWeightChange]}
+      step={0.1}
+      type="number"
+      value={1.5}
+    />
+    <Form.Control.Feedback>
+      <FormattedMessage
+        defaultMessage="If a value is not set, the problem is worth one point"
+        description="Summary text for scoring weight"
+        id="authoring.problemeditor.settings.scoring.weight.hint"
+      />
+    </Form.Control.Feedback>
+  </Form.Group>
+  <Form.Group>
+    <Form.Control
+      disabled={false}
+      floatingLabel="Attempts"
+      min={0}
+      onBlur={[MockFunction scoringCardHooks.handleMaxAttemptChange]}
+      onChange={[MockFunction scoringCardHooks.handleOnChange]}
+      type="number"
+    />
+    <Form.Control.Feedback>
+      <FormattedMessage
+        defaultMessage="If a default value is not set in advanced settings, unlimited attempts are allowed"
+        description="Summary text for scoring weight"
+        id="authoring.problemeditor.settings.scoring.attempts.hint"
+      />
+    </Form.Control.Feedback>
+    <Form.Checkbox
+      checked={false}
+      className="mt-3 decoration-control-label"
+      disabled={true}
+    >
+      <div
+        className="x-small"
+      >
+        <FormattedMessage
+          defaultMessage="Unlimited attempts"
+          description="Label for unlimited attempts checkbox"
+          id="authoring.problemeditor.settings.scoring.attempts.unlimitedCheckbox"
+        />
+      </div>
+    </Form.Checkbox>
+  </Form.Group>
+  <Hyperlink
+    destination="undefined/settings/advanced/null#max_attempts"
+    target="_blank"
+  >
+    <FormattedMessage
+      defaultMessage="Set a default value in advanced settings"
+      description="Advanced settings link text"
+      id="authoring.problemeditor.settings.advancedSettingLink.text"
+    />
+  </Hyperlink>
+</SettingsOption>
+`;
+
+exports[`ScoringCard snapshot snapshot: scoring setting card max attempts 1`] = `
+<SettingsOption
+  className="scoringCard"
+  extraSections={[]}
+  hasExpandableTextArea={false}
+  summary="{weight, plural, =0 {Ungraded} other {# points}} · Unlimited attempts"
+  title="Scoring"
+>
+  <div
+    className="mb-4"
+  >
+    <FormattedMessage
+      defaultMessage="Specify point weight and the number of answer attempts"
+      description="Descriptive text for scoring settings"
+      id="authoring.problemeditor.settings.scoring.label"
+    />
+  </div>
+  <Form.Group>
+    <Form.Control
+      floatingLabel="Points"
+      min={0}
+      onChange={[MockFunction scoringCardHooks.handleWeightChange]}
+      step={0.1}
+      type="number"
+      value={1.5}
+    />
+    <Form.Control.Feedback>
+      <FormattedMessage
+        defaultMessage="If a value is not set, the problem is worth one point"
+        description="Summary text for scoring weight"
+        id="authoring.problemeditor.settings.scoring.weight.hint"
+      />
+    </Form.Control.Feedback>
+  </Form.Group>
+  <Form.Group>
+    <Form.Control
+      disabled={true}
+      floatingLabel="Attempts"
+      min={0}
+      onBlur={[MockFunction scoringCardHooks.handleMaxAttemptChange]}
+      onChange={[MockFunction scoringCardHooks.handleOnChange]}
+      type="number"
+    />
+    <Form.Control.Feedback>
+      <FormattedMessage
+        defaultMessage="If a default value is not set in advanced settings, unlimited attempts are allowed"
+        description="Summary text for scoring weight"
+        id="authoring.problemeditor.settings.scoring.attempts.hint"
+      />
+    </Form.Control.Feedback>
+    <Form.Checkbox
+      checked={true}
+      className="mt-3 decoration-control-label"
+      disabled={true}
+    >
+      <div
+        className="x-small"
+      >
+        <FormattedMessage
+          defaultMessage="Unlimited attempts"
+          description="Label for unlimited attempts checkbox"
+          id="authoring.problemeditor.settings.scoring.attempts.unlimitedCheckbox"
+        />
+      </div>
+    </Form.Checkbox>
+  </Form.Group>
+  <Hyperlink
+    destination="undefined/settings/advanced/null#max_attempts"
+    target="_blank"
+  >
+    <FormattedMessage
+      defaultMessage="Set a default value in advanced settings"
+      description="Advanced settings link text"
+      id="authoring.problemeditor.settings.advancedSettingLink.text"
+    />
+  </Hyperlink>
+</SettingsOption>
+`;
+
+exports[`ScoringCard snapshot snapshot: scoring setting card zero zero weight 1`] = `
+<SettingsOption
+  className="scoringCard"
+  extraSections={[]}
+  hasExpandableTextArea={false}
+  summary="{weight, plural, =0 {Ungraded} other {# points}} · {attempts, plural, =1 {# attempt} other {# attempts}}"
+  title="Scoring"
+>
+  <div
+    className="mb-4"
+  >
+    <FormattedMessage
+      defaultMessage="Specify point weight and the number of answer attempts"
+      description="Descriptive text for scoring settings"
+      id="authoring.problemeditor.settings.scoring.label"
+    />
+  </div>
+  <Form.Group>
+    <Form.Control
+      floatingLabel="Points"
+      min={0}
+      onChange={[MockFunction scoringCardHooks.handleWeightChange]}
+      step={0.1}
+      type="number"
+      value={0}
+    />
+    <Form.Control.Feedback>
+      <FormattedMessage
+        defaultMessage="If a value is not set, the problem is worth one point"
+        description="Summary text for scoring weight"
+        id="authoring.problemeditor.settings.scoring.weight.hint"
+      />
+    </Form.Control.Feedback>
+  </Form.Group>
+  <Form.Group>
+    <Form.Control
+      disabled={false}
+      floatingLabel="Attempts"
+      min={0}
+      onBlur={[MockFunction scoringCardHooks.handleMaxAttemptChange]}
+      onChange={[MockFunction scoringCardHooks.handleOnChange]}
+      type="number"
+    />
+    <Form.Control.Feedback>
+      <FormattedMessage
+        defaultMessage="If a default value is not set in advanced settings, unlimited attempts are allowed"
+        description="Summary text for scoring weight"
+        id="authoring.problemeditor.settings.scoring.attempts.hint"
+      />
+    </Form.Control.Feedback>
+    <Form.Checkbox
+      checked={false}
+      className="mt-3 decoration-control-label"
+      disabled={true}
+    >
+      <div
+        className="x-small"
+      >
+        <FormattedMessage
+          defaultMessage="Unlimited attempts"
+          description="Label for unlimited attempts checkbox"
+          id="authoring.problemeditor.settings.scoring.attempts.unlimitedCheckbox"
+        />
+      </div>
+    </Form.Checkbox>
+  </Form.Group>
+  <Hyperlink
+    destination="undefined/settings/advanced/null#max_attempts"
+    target="_blank"
+  >
+    <FormattedMessage
+      defaultMessage="Set a default value in advanced settings"
+      description="Advanced settings link text"
+      id="authoring.problemeditor.settings.advancedSettingLink.text"
+    />
+  </Hyperlink>
+</SettingsOption>
+`;
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/ShowAnswerCard.test.jsx.snap b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/ShowAnswerCard.test.jsx.snap
new file mode 100644
index 0000000000..fbebc864fc
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/ShowAnswerCard.test.jsx.snap
@@ -0,0 +1,121 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ShowAnswerCard snapshot snapshot: show answer setting card 1`] = `
+<SettingsOption
+  className=""
+  extraSections={[]}
+  hasExpandableTextArea={false}
+  summary="After Some Number of Attempts"
+  title="Show answer"
+>
+  <Fragment>
+    <div
+      className="pb-2"
+    >
+      <span>
+        <FormattedMessage
+          defaultMessage="Define when learners can see the correct answer."
+          description="Show Answer settings card text"
+          id="authoring.problemeditor.settings.showAnswer.text"
+        />
+      </span>
+    </div>
+    <div
+      className="pb-4"
+    >
+      <Hyperlink
+        destination="SoMEeNDpOinT/settings/advanced/sOMEcouRseId#showanswer"
+        target="_blank"
+      >
+        <FormattedMessage
+          defaultMessage="Set a default value in advanced settings"
+          description="Advanced settings link text"
+          id="authoring.problemeditor.settings.advancedSettingLink.text"
+        />
+      </Hyperlink>
+    </div>
+    <Form.Group
+      className="pb-0 mb-0"
+    >
+      <Form.Control
+        as="select"
+        onChange={[MockFunction useAnswerSettings.handleShowAnswerChange]}
+        value="after_attempts"
+      >
+        <option
+          key="always"
+          value="always"
+        >
+          Always
+        </option>
+        <option
+          key="answered"
+          value="answered"
+        >
+          Answered
+        </option>
+        <option
+          key="attempted"
+          value="attempted"
+        >
+          Attempted or Past Due
+        </option>
+        <option
+          key="closed"
+          value="closed"
+        >
+          Closed
+        </option>
+        <option
+          key="finished"
+          value="finished"
+        >
+          Finished (Default)
+        </option>
+        <option
+          key="correct_or_past_due"
+          value="correct_or_past_due"
+        >
+          Correct or Past Due
+        </option>
+        <option
+          key="past_due"
+          value="past_due"
+        >
+          Past Due
+        </option>
+        <option
+          key="never"
+          value="never"
+        >
+          Never
+        </option>
+        <option
+          key="after_attempts"
+          value="after_attempts"
+        >
+          After Some Number of Attempts
+        </option>
+        <option
+          key="after_all_attempts"
+          value="after_all_attempts"
+        >
+          After All Attempts
+        </option>
+        <option
+          key="after_all_attempts_or_correct"
+          value="after_all_attempts_or_correct"
+        >
+          After All Attempts or Correct
+        </option>
+        <option
+          key="attempted_no_past_due"
+          value="attempted_no_past_due"
+        >
+          Attempted
+        </option>
+      </Form.Control>
+    </Form.Group>
+  </Fragment>
+</SettingsOption>
+`;
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/SwitchToAdvancedEditorCard.test.jsx.snap b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/SwitchToAdvancedEditorCard.test.jsx.snap
new file mode 100644
index 0000000000..4996845242
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/SwitchToAdvancedEditorCard.test.jsx.snap
@@ -0,0 +1,59 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SwitchToAdvancedEditorCard snapshot snapshot: SwitchToAdvancedEditorCard 1`] = `
+<Card
+  className="border border-light-700 shadow-none"
+>
+  <BaseModal
+    bodyStyle={null}
+    close={[Function]}
+    confirmAction={
+      <Button
+        className={null}
+        onClick={[Function]}
+        text={null}
+        variant="primary"
+      >
+        <FormattedMessage
+          defaultMessage="Switch to advanced editor"
+          description="message to confirm that a user wants to use the advanced editor"
+          id="authoring.problemeditor.settings.switchtoadvancededitor.ConfirmSwitchButtonLabel"
+        />
+      </Button>
+    }
+    footerAction={null}
+    headerComponent={null}
+    isFullscreenScroll={true}
+    isOpen={false}
+    size="md"
+    title={
+      <FormattedMessage
+        defaultMessage="Convert to OLX?"
+        description="message to confirm that a user wants to use the advanced editor"
+        id="authoring.problemeditor.settings.switchtoadvancededitor.ConfirmSwitchMessageTitle"
+      />
+    }
+  >
+    <FormattedMessage
+      defaultMessage="If you use the advanced editor, this problem will be converted to OLX and you will not be able to return to the simple editor."
+      description="message to confirm that a user wants to use the advanced editor"
+      id="authoring.problemeditor.settings.switchtoadvancededitor.ConfirmSwitchMessage"
+    />
+  </BaseModal>
+  <Button
+    className="my-3 ml-2 py-0"
+    onClick={[Function]}
+    size="sm"
+    text={null}
+    variant="link"
+  >
+    <FormattedMessage
+      defaultMessage="Switch to advanced editor"
+      description="button to switch to the advanced mode of the editor."
+      id="authoring.problemeditor.settings.switchtoadvancededitor.label"
+    />
+  </Button>
+</Card>
+`;
+
+exports[`SwitchToAdvancedEditorCard snapshot snapshot: SwitchToAdvancedEditorCard returns null 1`] = `null`;
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/TimerCard.test.jsx.snap b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/TimerCard.test.jsx.snap
new file mode 100644
index 0000000000..8204e4a019
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/TimerCard.test.jsx.snap
@@ -0,0 +1,32 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TimerCard snapshot snapshot: renders reset true setting card 1`] = `
+<SettingsOption
+  className=""
+  extraSections={[]}
+  hasExpandableTextArea={false}
+  summary="5 seconds"
+  title="Time between attempts"
+>
+  <div
+    className="spacedMessage"
+  >
+    <span>
+      <FormattedMessage
+        defaultMessage="Seconds a student must wait between submissions for a problem with multiple attempts."
+        description="Timer settings card text"
+        id="authoring.problemeditor.settings.timer.text"
+      />
+    </span>
+  </div>
+  <Form.Group>
+    <Form.Control
+      floatingLabel="Seconds"
+      min={0}
+      onChange={[MockFunction timerCardHooks.handleChange]}
+      type="number"
+      value={5}
+    />
+  </Form.Group>
+</SettingsOption>
+`;
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/TypeCard.test.jsx.snap b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/TypeCard.test.jsx.snap
new file mode 100644
index 0000000000..03f9dc771d
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/TypeCard.test.jsx.snap
@@ -0,0 +1,82 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TypeCard snapshot snapshot: renders type setting card 1`] = `
+<SettingsOption
+  className=""
+  extraSections={[]}
+  hasExpandableTextArea={false}
+  summary="Text input"
+  title="Type"
+>
+  <TypeRow
+    answers={[]}
+    blockTitle="BLocktiTLE"
+    correctAnswerCount={0}
+    key="multiplechoiceresponse"
+    label="Single select"
+    lastRow={false}
+    problemType="stringresponse"
+    selected={true}
+    setBlockTitle={[MockFunction args.setBlockTitle]}
+    typeKey="multiplechoiceresponse"
+    updateAnswer={[MockFunction args.updateAnswer]}
+    updateField={[MockFunction args.updateField]}
+  />
+  <TypeRow
+    answers={[]}
+    blockTitle="BLocktiTLE"
+    correctAnswerCount={0}
+    key="choiceresponse"
+    label="Multi-select"
+    lastRow={false}
+    problemType="stringresponse"
+    selected={true}
+    setBlockTitle={[MockFunction args.setBlockTitle]}
+    typeKey="choiceresponse"
+    updateAnswer={[MockFunction args.updateAnswer]}
+    updateField={[MockFunction args.updateField]}
+  />
+  <TypeRow
+    answers={[]}
+    blockTitle="BLocktiTLE"
+    correctAnswerCount={0}
+    key="optionresponse"
+    label="Dropdown"
+    lastRow={false}
+    problemType="stringresponse"
+    selected={true}
+    setBlockTitle={[MockFunction args.setBlockTitle]}
+    typeKey="optionresponse"
+    updateAnswer={[MockFunction args.updateAnswer]}
+    updateField={[MockFunction args.updateField]}
+  />
+  <TypeRow
+    answers={[]}
+    blockTitle="BLocktiTLE"
+    correctAnswerCount={0}
+    key="numericalresponse"
+    label="Numerical input"
+    lastRow={false}
+    problemType="stringresponse"
+    selected={true}
+    setBlockTitle={[MockFunction args.setBlockTitle]}
+    typeKey="numericalresponse"
+    updateAnswer={[MockFunction args.updateAnswer]}
+    updateField={[MockFunction args.updateField]}
+  />
+  <TypeRow
+    answers={[]}
+    blockTitle="BLocktiTLE"
+    correctAnswerCount={0}
+    key="stringresponse"
+    label="Text input"
+    lastRow={true}
+    problemType="stringresponse"
+    selected={false}
+    setBlockTitle={[MockFunction args.setBlockTitle]}
+    typeKey="stringresponse"
+    updateAnswer={[MockFunction args.updateAnswer]}
+    updateField={[MockFunction args.updateField]}
+  />
+</SettingsOption>
+`;
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/TypeRow.test.jsx.snap b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/TypeRow.test.jsx.snap
new file mode 100644
index 0000000000..af70e8dfda
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/TypeRow.test.jsx.snap
@@ -0,0 +1,82 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TypeRow snapshot snapshot: renders type row setting card 1`] = `
+<Fragment>
+  <Button
+    className="d-flex p-0 flex-row justify-content-between w-100"
+    onClick={[MockFunction typeRowHooks.onClick]}
+    text={null}
+    variant="default"
+  >
+    <span
+      className="small text-primary-500"
+    >
+      Text Input Problem
+    </span>
+    <span
+      hidden={true}
+    >
+      <Icon
+        className="text-success"
+      />
+    </span>
+  </Button>
+  <hr
+    className="d-block"
+  />
+</Fragment>
+`;
+
+exports[`TypeRow snapshot snapshot: renders type row setting card last row 1`] = `
+<Fragment>
+  <Button
+    className="d-flex p-0 flex-row justify-content-between w-100"
+    onClick={[MockFunction typeRowHooks.onClick]}
+    text={null}
+    variant="default"
+  >
+    <span
+      className="small text-primary-500"
+    >
+      Text Input Problem
+    </span>
+    <span
+      hidden={true}
+    >
+      <Icon
+        className="text-success"
+      />
+    </span>
+  </Button>
+  <hr
+    className="d-none"
+  />
+</Fragment>
+`;
+
+exports[`TypeRow snapshot snapshot: renders type row setting card not selected 1`] = `
+<Fragment>
+  <Button
+    className="d-flex p-0 flex-row justify-content-between w-100"
+    onClick={[MockFunction typeRowHooks.onClick]}
+    text={null}
+    variant="default"
+  >
+    <span
+      className="small text-primary-500"
+    >
+      Text Input Problem
+    </span>
+    <span
+      hidden={false}
+    >
+      <Icon
+        className="text-success"
+      />
+    </span>
+  </Button>
+  <hr
+    className="d-block"
+  />
+</Fragment>
+`;
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/__snapshots__/index.test.jsx.snap b/src/editors/containers/ProblemEditor/components/EditProblemView/__snapshots__/index.test.jsx.snap
new file mode 100644
index 0000000000..987a731128
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/__snapshots__/index.test.jsx.snap
@@ -0,0 +1,145 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EditorProblemView component renders raw editor 1`] = `
+<EditorContainer
+  getContent={[Function]}
+  isDirty={[Function]}
+  returnFunction={null}
+>
+  <AlertModal
+    footerNode={
+      <ActionRow>
+        <Button
+          onClick={[Function]}
+          variant="tertiary"
+        >
+          <FormattedMessage
+            defaultMessage="Cancel"
+            description="Label for cancel button in the save warning modal"
+            id="authoring.problemEditor.editProblemView.saveWarningModal.cancelButton.label"
+          />
+        </Button>
+        <Button
+          onClick={[Function]}
+        >
+          <FormattedMessage
+            defaultMessage="Ok"
+            description="Label for save button in the save warning modal"
+            id="authoring.problemEditor.editProblemView.saveWarningModal.saveButton.label"
+          />
+        </Button>
+      </ActionRow>
+    }
+    isOpen={false}
+    onClose={[Function]}
+    title="OLX settings discrepancy"
+  >
+    <FormattedMessage
+      defaultMessage="A discrepancy was found between the settings defined in the OLX's problem tag and the
+      settings selected in the sidebar. The settings defined in the OLX's problem tag will be saved and
+      corresponding values in the sidebar will be discarded."
+      description="Explanation in body of mismatched settings modal"
+      id="authoring.problemEditor.editProblemView.saveWarningModal.olxSettingDiscrepancy.body.explanation"
+    />
+  </AlertModal>
+  <div
+    className="editProblemView d-flex flex-row flex-nowrap justify-content-end"
+  >
+    <Container
+      className="advancedEditorTopMargin p-0"
+      fluid={true}
+    >
+      <RawEditor
+        content={null}
+        editorRef={
+          {
+            "current": null,
+          }
+        }
+        lang="xml"
+      />
+    </Container>
+    <span
+      className="editProblemView-settingsColumn"
+    >
+      <injectIntl(ShimmedIntlComponent)
+        problemType="advanced"
+      />
+    </span>
+  </div>
+</EditorContainer>
+`;
+
+exports[`EditorProblemView component renders simple view 1`] = `
+<EditorContainer
+  getContent={[Function]}
+  isDirty={[Function]}
+  returnFunction={null}
+>
+  <AlertModal
+    footerNode={
+      <ActionRow>
+        <Button
+          onClick={[Function]}
+          variant="tertiary"
+        >
+          <FormattedMessage
+            defaultMessage="Cancel"
+            description="Label for cancel button in the save warning modal"
+            id="authoring.problemEditor.editProblemView.saveWarningModal.cancelButton.label"
+          />
+        </Button>
+        <Button
+          onClick={[Function]}
+        >
+          <FormattedMessage
+            defaultMessage="Ok"
+            description="Label for save button in the save warning modal"
+            id="authoring.problemEditor.editProblemView.saveWarningModal.saveButton.label"
+          />
+        </Button>
+      </ActionRow>
+    }
+    isOpen={false}
+    onClose={[Function]}
+    title="No answer specified"
+  >
+    <Fragment>
+      <div>
+        <FormattedMessage
+          defaultMessage="Are you sure you want to exit the editor?"
+          description="Question in body of save warning modal"
+          id="authoring.problemEditor.editProblemView.saveWarningModal.body.question"
+        />
+      </div>
+      <div>
+        <FormattedMessage
+          defaultMessage="No correct answer has been specified."
+          description="Explanation in body of no answer modal"
+          id="authoring.problemEditor.editProblemView.saveWarningModal.noAnswer.body.explanation"
+        />
+      </div>
+    </Fragment>
+  </AlertModal>
+  <div
+    className="editProblemView d-flex flex-row flex-nowrap justify-content-end"
+  >
+    <span
+      className="flex-grow-1 mb-5"
+    >
+      <injectIntl(ShimmedIntlComponent) />
+      <injectIntl(ShimmedIntlComponent) />
+      <injectIntl(ShimmedIntlComponent)
+        problemType="multiplechoiceresponse"
+      />
+    </span>
+    <span
+      className="editProblemView-settingsColumn"
+    >
+      <injectIntl(ShimmedIntlComponent)
+        problemType="multiplechoiceresponse"
+      />
+    </span>
+  </div>
+</EditorContainer>
+`;
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/hooks.js b/src/editors/containers/ProblemEditor/components/EditProblemView/hooks.js
new file mode 100644
index 0000000000..a8755c8e41
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/hooks.js
@@ -0,0 +1,180 @@
+import { useState } from 'react';
+import 'tinymce';
+import { StrictDict } from '../../../../utils';
+import ReactStateSettingsParser from '../../data/ReactStateSettingsParser';
+import ReactStateOLXParser from '../../data/ReactStateOLXParser';
+import { setAssetToStaticUrl } from '../../../../sharedComponents/TinyMceWidget/hooks';
+import { ProblemTypeKeys } from '../../../../data/constants/problem';
+
+export const state = StrictDict({
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  isSaveWarningModalOpen: (val) => useState(val),
+});
+
+export const saveWarningModalToggle = () => {
+  const [isSaveWarningModalOpen, setIsOpen] = state.isSaveWarningModalOpen(false);
+  return {
+    isSaveWarningModalOpen,
+    openSaveWarningModal: () => setIsOpen(true),
+    closeSaveWarningModal: () => setIsOpen(false),
+  };
+};
+
+/** Checks if any tinymce editor in window is dirty */
+export const checkIfEditorsDirty = () => {
+  const EditorsArray = window.tinymce.editors;
+  return Object.entries(EditorsArray).some(([id, editor]) => {
+    if (Number.isNaN(parseInt(id, 10))) {
+      if (!editor.isNotDirty) {
+        return true;
+      }
+    }
+    return false;
+  });
+};
+
+export const fetchEditorContent = ({ format }) => {
+  const editorObject = { hints: [] };
+  const EditorsArray = window.tinymce.editors;
+  Object.entries(EditorsArray).forEach(([id, editor]) => {
+    if (Number.isNaN(parseInt(id, 10))) {
+      if (id.startsWith('answer')) {
+        const { answers } = editorObject;
+        const answerId = id.substring(id.indexOf('-') + 1);
+        editorObject.answers = { ...answers, [answerId]: editor.getContent({ format }) };
+      } else if (id.includes('Feedback')) {
+        const { selectedFeedback, unselectedFeedback, groupFeedback } = editorObject;
+        const feedbackId = id.substring(id.indexOf('-') + 1);
+        if (id.startsWith('selected')) {
+          editorObject.selectedFeedback = { ...selectedFeedback, [feedbackId]: editor.getContent() };
+        }
+        if (id.startsWith('unselected')) {
+          editorObject.unselectedFeedback = { ...unselectedFeedback, [feedbackId]: editor.getContent() };
+        }
+        if (id.startsWith('group')) {
+          editorObject.groupFeedback = { ...groupFeedback, [feedbackId]: editor.getContent() };
+        }
+      } else if (id.startsWith('hint')) {
+        const { hints } = editorObject;
+        hints.push(editor.getContent());
+      } else {
+        editorObject[id] = editor.getContent();
+      }
+    }
+  });
+  return editorObject;
+};
+
+export const parseState = ({
+  problem,
+  isAdvanced,
+  ref,
+  lmsEndpointUrl,
+}) => () => {
+  const rawOLX = ref?.current?.state.doc.toString();
+  const editorObject = fetchEditorContent({ format: '' });
+  const reactOLXParser = new ReactStateOLXParser({ problem, editorObject });
+  const reactSettingsParser = new ReactStateSettingsParser({ problem, rawOLX });
+  const reactBuiltOlx = setAssetToStaticUrl({ editorValue: reactOLXParser.buildOLX(), lmsEndpointUrl });
+  return {
+    settings: isAdvanced ? reactSettingsParser.parseRawOlxSettings() : reactSettingsParser.getSettings(),
+    olx: isAdvanced ? rawOLX : reactBuiltOlx,
+  };
+};
+
+export const checkForNoAnswers = ({ openSaveWarningModal, problem }) => {
+  const simpleTextAreaProblems = [ProblemTypeKeys.DROPDOWN, ProblemTypeKeys.NUMERIC, ProblemTypeKeys.TEXTINPUT];
+  const editorObject = fetchEditorContent({ format: '' });
+  const { problemType } = problem;
+  const { answers } = problem;
+  const answerTitles = simpleTextAreaProblems.includes(problemType) ? {} : editorObject.answers;
+
+  const hasTitle = () => {
+    const titles = [];
+    answers.forEach(answer => {
+      const title = simpleTextAreaProblems.includes(problemType) ? answer.title : answerTitles[answer.id];
+      if (title.length > 0) {
+        titles.push(title);
+      }
+    });
+    if (titles.length > 0) {
+      return true;
+    }
+    return false;
+  };
+
+  const hasCorrectAnswer = () => {
+    let correctAnswer;
+    answers.forEach(answer => {
+      if (answer.correct) {
+        const title = simpleTextAreaProblems.includes(problemType) ? answer.title : answerTitles[answer.id];
+        if (title.length > 0) {
+          correctAnswer = true;
+        }
+      }
+    });
+    if (correctAnswer) {
+      return true;
+    }
+    return false;
+  };
+
+  if (problemType === ProblemTypeKeys.NUMERIC && !hasTitle()) {
+    openSaveWarningModal();
+    return true;
+  }
+  if (!hasCorrectAnswer()) {
+    openSaveWarningModal();
+    return true;
+  }
+  return false;
+};
+
+export const checkForSettingDiscrepancy = ({ problem, ref, openSaveWarningModal }) => {
+  const rawOLX = ref?.current?.state.doc.toString();
+  const reactSettingsParser = new ReactStateSettingsParser({ problem, rawOLX });
+  const problemSettings = reactSettingsParser.getSettings();
+  const rawOlxSettings = reactSettingsParser.parseRawOlxSettings();
+  let isMismatched = false;
+
+  Object.entries(rawOlxSettings).forEach(([key, value]) => {
+    if (value !== problemSettings[key]) {
+      isMismatched = true;
+    }
+  });
+
+  if (isMismatched) {
+    openSaveWarningModal();
+    return true;
+  }
+  return false;
+};
+
+export const getContent = ({
+  problemState,
+  openSaveWarningModal,
+  isAdvancedProblemType,
+  editorRef,
+  lmsEndpointUrl,
+}) => {
+  const problem = problemState;
+  const hasNoAnswers = isAdvancedProblemType ? false : checkForNoAnswers({
+    problem,
+    openSaveWarningModal,
+  });
+  const hasMismatchedSettings = isAdvancedProblemType ? checkForSettingDiscrepancy({
+    ref: editorRef,
+    problem,
+    openSaveWarningModal,
+  }) : false;
+  if (!hasNoAnswers && !hasMismatchedSettings) {
+    const data = parseState({
+      isAdvanced: isAdvancedProblemType,
+      ref: editorRef,
+      problem,
+      lmsEndpointUrl,
+    })();
+    return data;
+  }
+  return null;
+};
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/hooks.test.js b/src/editors/containers/ProblemEditor/components/EditProblemView/hooks.test.js
new file mode 100644
index 0000000000..6fa704fc30
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/hooks.test.js
@@ -0,0 +1,404 @@
+import { ProblemTypeKeys, ShowAnswerTypesKeys } from '../../../../data/constants/problem';
+import * as hooks from './hooks';
+import { MockUseState } from '../../../../testUtils';
+
+const mockRawOLX = '<problem>rawOLX</problem>';
+const mockBuiltOLX = 'builtOLX';
+const mockGetSettings = {
+  max_attempts: 1,
+  weight: 2,
+  showanswer: ShowAnswerTypesKeys.AFTER_SOME_NUMBER_OF_ATTEMPTS,
+  show_reset_button: false,
+  rerandomize: 'never',
+};
+const mockParseRawOlxSettingsDiscrepancy = {
+  max_attempts: 1,
+  weight: 2,
+  showanswer: ShowAnswerTypesKeys.AFTER_SOME_NUMBER_OF_ATTEMPTS,
+  show_reset_button: true,
+  rerandomize: 'never',
+};
+const mockParseRawOlxSettings = {
+  max_attempts: 1,
+  weight: 2,
+  showanswer: ShowAnswerTypesKeys.AFTER_SOME_NUMBER_OF_ATTEMPTS,
+  show_reset_button: false,
+  rerandomize: 'never',
+};
+const problemState = {
+  problemType: ProblemTypeKeys.ADVANCED,
+  defaultSettings: {},
+  settings: {
+    randomization: null,
+    scoring: {
+      weight: 1,
+      attempts: {
+        unlimited: true,
+        number: '',
+      },
+    },
+    timeBetween: 0,
+    showAnswer: {
+      on: ShowAnswerTypesKeys.AFTER_SOME_NUMBER_OF_ATTEMPTS,
+      afterAttempts: 0,
+    },
+    showResetButton: false,
+    solutionExplanation: '',
+  },
+};
+
+const toStringMock = () => mockRawOLX;
+const refMock = { current: { state: { doc: { toString: toStringMock } } } };
+
+jest.mock('../../data/ReactStateOLXParser', () => (
+  jest.fn().mockImplementation(() => ({
+    buildOLX: () => mockBuiltOLX,
+  }))
+));
+
+const hookState = new MockUseState(hooks);
+
+describe('saveWarningModalToggle', () => {
+  const hookKey = hookState.keys.isSaveWarningModalOpen;
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+  describe('state hook', () => {
+    hookState.testGetter(hookKey);
+  });
+  describe('using state', () => {
+    beforeEach(() => {
+      hookState.mock();
+    });
+    afterEach(() => {
+      hookState.restore();
+    });
+
+    describe('saveWarningModalToggle', () => {
+      let hook;
+      beforeEach(() => {
+        hook = hooks.saveWarningModalToggle();
+      });
+      test('isSaveWarningModalOpen: state value', () => {
+        expect(hook.isSaveWarningModalOpen).toEqual(hookState.stateVals[hookKey]);
+      });
+      test('openSaveWarningModal: calls setter with true', () => {
+        hook.openSaveWarningModal();
+        expect(hookState.setState[hookKey]).toHaveBeenCalledWith(true);
+      });
+      test('closeSaveWarningModal: calls setter with false', () => {
+        hook.closeSaveWarningModal();
+        expect(hookState.setState[hookKey]).toHaveBeenCalledWith(false);
+      });
+    });
+  });
+});
+
+describe('EditProblemView hooks parseState', () => {
+  describe('fetchEditorContent', () => {
+    const getContent = () => '<p>testString</p>';
+    test('returns answers', () => {
+      window.tinymce.editors = { 'answer-A': { getContent } };
+      const editorObject = hooks.fetchEditorContent({ format: '' });
+      expect(editorObject).toEqual({ answers: { A: '<p>testString</p>' }, hints: [] });
+    });
+    test('returns hints', () => {
+      window.tinymce.editors = { 'hint-0': { getContent } };
+      const editorObject = hooks.fetchEditorContent({ format: '' });
+      expect(editorObject).toEqual({ hints: ['<p>testString</p>'] });
+    });
+    test('returns question', () => {
+      window.tinymce.editors = { question: { getContent } };
+      const editorObject = hooks.fetchEditorContent({ format: '' });
+      expect(editorObject).toEqual({ question: '<p>testString</p>', hints: [] });
+    });
+    test('returns selectedFeedback', () => {
+      window.tinymce.editors = { 'selectedFeedback-A': { getContent } };
+      const editorObject = hooks.fetchEditorContent({ format: '' });
+      expect(editorObject).toEqual({ selectedFeedback: { A: '<p>testString</p>' }, hints: [] });
+    });
+    test('returns unselectedFeedback', () => {
+      window.tinymce.editors = { 'unselectedFeedback-A': { getContent } };
+      const editorObject = hooks.fetchEditorContent({ format: '' });
+      expect(editorObject).toEqual({ unselectedFeedback: { A: '<p>testString</p>' }, hints: [] });
+    });
+    test('returns groupFeedback', () => {
+      window.tinymce.editors = { 'groupFeedback-0': { getContent } };
+      const editorObject = hooks.fetchEditorContent({ format: '' });
+      expect(editorObject).toEqual({ groupFeedback: { 0: '<p>testString</p>' }, hints: [] });
+    });
+    test('returns groupFeedback', () => {
+      window.tinymce.editors = {};
+      const editorObject = hooks.fetchEditorContent({ format: '' });
+      expect(editorObject).toEqual({ hints: [] });
+    });
+  });
+  describe('parseState', () => {
+    jest.mock('../../data/ReactStateSettingsParser', () => (
+      jest.fn().mockImplementationOnce(() => ({
+        getSettings: () => mockGetSettings,
+        parseRawOlxSettings: () => mockParseRawOlxSettings,
+      }))
+    ));
+    it('default problem', () => {
+      const res = hooks.parseState({
+        problem: problemState,
+        isAdvanced: false,
+        ref: refMock,
+        assets: {},
+      })();
+      expect(res.olx).toBe(mockBuiltOLX);
+    });
+    it('advanced problem', () => {
+      const res = hooks.parseState({
+        problem: problemState,
+        isAdvanced: true,
+        ref: refMock,
+        assets: {},
+      })();
+      expect(res.olx).toBe(mockRawOLX);
+    });
+  });
+  describe('checkNoAnswers', () => {
+    const openSaveWarningModal = jest.fn();
+    describe('hasTitle', () => {
+      const problem = {
+        problemType: ProblemTypeKeys.NUMERIC,
+      };
+      beforeEach(() => {
+        jest.clearAllMocks();
+      });
+      it('should call openSaveWarningModal for numerical problem with empty title', () => {
+        const expected = hooks.checkForNoAnswers({
+          openSaveWarningModal,
+          problem: {
+            ...problem,
+            answers: [{ id: 'A', title: '', correct: true }],
+          },
+        });
+        expect(openSaveWarningModal).toHaveBeenCalled();
+        expect(expected).toEqual(true);
+      });
+      it('returns false for numerical problem with title', () => {
+        const expected = hooks.checkForNoAnswers({
+          openSaveWarningModal,
+          problem: {
+            ...problem,
+            answers: [{ id: 'A', title: 'sOmevALUe', correct: true }],
+          },
+        });
+        expect(openSaveWarningModal).not.toHaveBeenCalled();
+        expect(expected).toEqual(false);
+      });
+    });
+    describe('hasCorrectAnswer', () => {
+      const problem = {
+        problemType: ProblemTypeKeys.SINGLESELECT,
+      };
+      beforeEach(() => {
+        jest.clearAllMocks();
+      });
+      it('should call openSaveWarningModal for single select problem with empty title', () => {
+        window.tinymce.editors = { 'answer-A': { getContent: () => '' }, 'answer-B': { getContent: () => 'sOmevALUe' } };
+        const expected = hooks.checkForNoAnswers({
+          openSaveWarningModal,
+          problem: {
+            ...problem,
+            answers: [{ id: 'A', title: '', correct: true }, { id: 'B', title: 'sOmevALUe', correct: false }],
+          },
+        });
+        expect(openSaveWarningModal).toHaveBeenCalled();
+        expect(expected).toEqual(true);
+      });
+      it('returns true for single select with title but no correct answer', () => {
+        window.tinymce.editors = { 'answer-A': { getContent: () => 'sOmevALUe' } };
+        const expected = hooks.checkForNoAnswers({
+          openSaveWarningModal,
+          problem: {
+            ...problem,
+            answers: [{ id: 'A', title: 'sOmevALUe', correct: false }, { id: 'B', title: '', correct: false }],
+          },
+        });
+        expect(openSaveWarningModal).toHaveBeenCalled();
+        expect(expected).toEqual(true);
+      });
+      it('returns true for single select with title and correct answer', () => {
+        window.tinymce.editors = { 'answer-A': { getContent: () => 'sOmevALUe' } };
+        const expected = hooks.checkForNoAnswers({
+          openSaveWarningModal,
+          problem: {
+            ...problem,
+            answers: [{ id: 'A', title: 'sOmevALUe', correct: true }],
+          },
+        });
+        expect(openSaveWarningModal).not.toHaveBeenCalled();
+        expect(expected).toEqual(false);
+      });
+    });
+  });
+  describe('checkForSettingDiscrepancy', () => {
+    const openSaveWarningModal = jest.fn();
+    const problem = problemState;
+    beforeEach(() => {
+      jest.clearAllMocks();
+    });
+    it('returns true for setting discrepancies', () => {
+      jest.mock('../../data/ReactStateSettingsParser', () => (
+        jest.fn().mockImplementationOnce(() => ({
+          getSettings: () => mockGetSettings,
+          parseRawOlxSettings: () => mockParseRawOlxSettingsDiscrepancy,
+        }))
+      ));
+      const mockRawOLXWithSettings = '<problem show_reset_button="true">rawOLX</problem>';
+      const refMockWithSettings = { current: { state: { doc: { toString: () => mockRawOLXWithSettings } } } };
+      const expected = hooks.checkForSettingDiscrepancy({
+        openSaveWarningModal,
+        problem,
+        ref: refMockWithSettings,
+      });
+      expect(openSaveWarningModal).toHaveBeenCalled();
+      expect(expected).toEqual(true);
+    });
+    it('returns false when there are no setting discrepancies', () => {
+      jest.mock('../../data/ReactStateSettingsParser', () => (
+        jest.fn().mockImplementationOnce(() => ({
+          getSettings: () => mockGetSettings,
+          parseRawOlxSettings: () => mockParseRawOlxSettings,
+        }))
+      ));
+      const expected = hooks.checkForSettingDiscrepancy({
+        openSaveWarningModal,
+        problem,
+        ref: refMock,
+      });
+      expect(openSaveWarningModal).not.toHaveBeenCalled();
+      expect(expected).toEqual(false);
+    });
+  });
+  describe('getContent', () => {
+    const assets = {};
+    const lmsEndpointUrl = 'someUrl';
+    const editorRef = refMock;
+    const expectedSettings = {
+      max_attempts: '',
+      weight: 1,
+      showanswer: ShowAnswerTypesKeys.AFTER_SOME_NUMBER_OF_ATTEMPTS,
+      show_reset_button: false,
+      submission_wait_seconds: 0,
+      attempts_before_showanswer_button: 0,
+    };
+    const openSaveWarningModal = jest.fn();
+
+    it('default visual save and returns parseState data', () => {
+      const problem = { ...problemState, problemType: ProblemTypeKeys.NUMERIC, answers: [{ id: 'A', title: 'problem', correct: true }] };
+      const content = hooks.getContent({
+        isAdvancedProblemType: false,
+        problemState: problem,
+        editorRef,
+        assets,
+        lmsEndpointUrl,
+        openSaveWarningModal,
+      });
+      expect(content).toEqual({
+        olx: 'builtOLX',
+        settings: expectedSettings,
+      });
+    });
+
+    it('returned parseState content.settings should not include default values (not including maxAttempts)', () => {
+      const problem = {
+        ...problemState,
+        problemType: ProblemTypeKeys.NUMERIC,
+        answers: [{ id: 'A', title: 'problem', correct: true }],
+        defaultSettings: {
+          maxAttempts: '',
+          showanswer: ShowAnswerTypesKeys.AFTER_SOME_NUMBER_OF_ATTEMPTS,
+          showResetButton: false,
+          rerandomize: 'never',
+        },
+      };
+      const { settings } = hooks.getContent({
+        isAdvancedProblemType: false,
+        problemState: problem,
+        editorRef,
+        assets,
+        lmsEndpointUrl,
+        openSaveWarningModal,
+      });
+      expect(settings).toEqual({
+        max_attempts: '',
+        attempts_before_showanswer_button: 0,
+        submission_wait_seconds: 0,
+        weight: 1,
+      });
+    });
+
+    it('default advanced save and returns parseState data', () => {
+      const content = hooks.getContent({
+        isAdvancedProblemType: true,
+        problemState,
+        editorRef,
+        assets,
+        lmsEndpointUrl,
+        openSaveWarningModal,
+      });
+      expect(content).toEqual({
+        olx: '<problem>rawOLX</problem>',
+        settings: expectedSettings,
+      });
+    });
+    it('should return null', () => {
+      const problem = { ...problemState, problemType: ProblemTypeKeys.NUMERIC, answers: [{ id: 'A', title: '', correct: true }] };
+      const content = hooks.getContent({
+        isAdvancedProblemType: false,
+        problemState: problem,
+        editorRef,
+        assets,
+        lmsEndpointUrl,
+        openSaveWarningModal,
+      });
+      expect(openSaveWarningModal).toHaveBeenCalled();
+      expect(content).toEqual(null);
+    });
+  });
+});
+
+describe('checkIfEditorsDirty', () => {
+  let windowSpy;
+  beforeEach(() => {
+    windowSpy = jest.spyOn(window, 'window', 'get');
+  });
+  afterEach(() => {
+    windowSpy.mockRestore();
+  });
+  describe('state hook', () => {
+    test('should return false if none of editors are dirty', () => {
+      windowSpy.mockImplementation(() => ({
+        tinymce: {
+          editors: {
+            some_id: { isNotDirty: true },
+            some_id2: { isNotDirty: true },
+            some_id3: { isNotDirty: true },
+            some_id4: { isNotDirty: true },
+            some_id5: { isNotDirty: true },
+          },
+        },
+      }));
+      expect(hooks.checkIfEditorsDirty()).toEqual(false);
+    });
+    test('should return true if any editor is dirty', () => {
+      windowSpy.mockImplementation(() => ({
+        tinymce: {
+          editors: {
+            some_id: { isNotDirty: true },
+            some_id2: { isNotDirty: true },
+            some_id3: { isNotDirty: false },
+            some_id4: { isNotDirty: true },
+            some_id5: { isNotDirty: false },
+          },
+        },
+      }));
+      expect(hooks.checkIfEditorsDirty()).toEqual(true);
+    });
+  });
+});
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/index.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/index.jsx
new file mode 100644
index 0000000000..fbeb086b26
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/index.jsx
@@ -0,0 +1,158 @@
+import React, { useRef } from 'react';
+import PropTypes from 'prop-types';
+import { connect, useDispatch } from 'react-redux';
+import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';
+
+import {
+  Container,
+  Button,
+  AlertModal,
+  ActionRow,
+} from '@openedx/paragon';
+import AnswerWidget from './AnswerWidget';
+import SettingsWidget from './SettingsWidget';
+import QuestionWidget from './QuestionWidget';
+import EditorContainer from '../../../EditorContainer';
+import { selectors } from '../../../../data/redux';
+import RawEditor from '../../../../sharedComponents/RawEditor';
+import { ProblemTypeKeys } from '../../../../data/constants/problem';
+
+import {
+  checkIfEditorsDirty, parseState, saveWarningModalToggle, getContent,
+} from './hooks';
+import './index.scss';
+import messages from './messages';
+
+import ExplanationWidget from './ExplanationWidget';
+import { saveBlock } from '../../../../hooks';
+
+const EditProblemView = ({
+  returnFunction,
+  // redux
+  problemType,
+  problemState,
+  lmsEndpointUrl,
+  returnUrl,
+  analytics,
+  isDirty,
+  // injected
+  intl,
+}) => {
+  const dispatch = useDispatch();
+  const editorRef = useRef(null);
+  const isAdvancedProblemType = problemType === ProblemTypeKeys.ADVANCED;
+  const { isSaveWarningModalOpen, openSaveWarningModal, closeSaveWarningModal } = saveWarningModalToggle();
+
+  const checkIfDirty = () => {
+    if (isAdvancedProblemType && editorRef && editorRef?.current) {
+      /* istanbul ignore next */
+      return editorRef.current.observer?.lastChange !== 0;
+    }
+    return isDirty || checkIfEditorsDirty();
+  };
+
+  return (
+    <EditorContainer
+      getContent={() => getContent({
+        problemState,
+        openSaveWarningModal,
+        isAdvancedProblemType,
+        editorRef,
+        lmsEndpointUrl,
+      })}
+      isDirty={checkIfDirty}
+      returnFunction={returnFunction}
+    >
+      <AlertModal
+        title={isAdvancedProblemType ? (
+          intl.formatMessage(messages.olxSettingDiscrepancyTitle)
+        ) : intl.formatMessage(messages.noAnswerTitle)}
+        isOpen={isSaveWarningModalOpen}
+        onClose={closeSaveWarningModal}
+        footerNode={(
+          <ActionRow>
+            <Button variant="tertiary" onClick={closeSaveWarningModal}>
+              <FormattedMessage {...messages.saveWarningModalCancelButtonLabel} />
+            </Button>
+            <Button
+              onClick={() => saveBlock({
+                content: parseState({
+                  problem: problemState,
+                  isAdvanced: isAdvancedProblemType,
+                  ref: editorRef,
+                  lmsEndpointUrl,
+                })(),
+                returnFunction,
+                destination: returnUrl,
+                dispatch,
+                analytics,
+              })}
+            >
+              <FormattedMessage {...messages.saveWarningModalSaveButtonLabel} />
+            </Button>
+          </ActionRow>
+        )}
+      >
+        {isAdvancedProblemType ? (
+          <FormattedMessage {...messages.olxSettingDiscrepancyBodyExplanation} />
+        ) : (
+          <>
+            <div>
+              <FormattedMessage {...messages.saveWarningModalBodyQuestion} />
+            </div>
+            <div>
+              <FormattedMessage {...messages.noAnswerBodyExplanation} />
+            </div>
+          </>
+        )}
+      </AlertModal>
+      <div className="editProblemView d-flex flex-row flex-nowrap justify-content-end">
+        {isAdvancedProblemType ? (
+          <Container fluid className="advancedEditorTopMargin p-0">
+            <RawEditor editorRef={editorRef} lang="xml" content={problemState.rawOLX} />
+          </Container>
+        ) : (
+          <span className="flex-grow-1 mb-5">
+            <QuestionWidget />
+            <ExplanationWidget />
+            <AnswerWidget problemType={problemType} />
+          </span>
+        )}
+        <span className="editProblemView-settingsColumn">
+          <SettingsWidget problemType={problemType} />
+        </span>
+      </div>
+    </EditorContainer>
+  );
+};
+
+EditProblemView.defaultProps = {
+  lmsEndpointUrl: null,
+  returnFunction: null,
+  isDirty: false,
+};
+
+EditProblemView.propTypes = {
+  problemType: PropTypes.string.isRequired,
+  returnFunction: PropTypes.func,
+  // eslint-disable-next-line
+  problemState: PropTypes.any.isRequired,
+  analytics: PropTypes.shape({}).isRequired,
+  lmsEndpointUrl: PropTypes.string,
+  returnUrl: PropTypes.string.isRequired,
+  isDirty: PropTypes.bool,
+  // injected
+  intl: intlShape.isRequired,
+};
+
+export const mapStateToProps = (state) => ({
+  analytics: selectors.app.analytics(state),
+  lmsEndpointUrl: selectors.app.lmsEndpointUrl(state),
+  returnUrl: selectors.app.returnUrl(state),
+  problemType: selectors.problem.problemType(state),
+  problemState: selectors.problem.completeState(state),
+  isDirty: selectors.problem.isDirty(state),
+});
+
+export const EditProblemViewInternal = EditProblemView; // For testing only
+export default injectIntl(connect(mapStateToProps)(EditProblemView));
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/index.scss b/src/editors/containers/ProblemEditor/components/EditProblemView/index.scss
new file mode 100644
index 0000000000..1c14750ebf
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/index.scss
@@ -0,0 +1,55 @@
+.editProblemView {
+  .editProblemView-settingsColumn {
+    width: 320px;
+    flex-grow: 0;
+    flex-shrink: 0;
+  }
+
+  .advancedEditorTopMargin {
+    margin-top: 40px;
+  }
+
+  .answer-option {
+    .pgn__form-checkbox,
+    .pgn__form-radio {
+      & + .pgn__form-label {
+        min-width: 1.1rem;
+      }
+    }
+  }
+
+  .settingsOption {
+    .pgn__form-checkbox .pgn__form-label {
+      min-width: .8rem;
+    }
+  }
+}
+
+.tinyMceWidget {
+  .tox-tinymce {
+    border-radius: .375rem;
+  }
+
+  .tox {
+    .tox-toolbar__primary {
+      background: none;
+    }
+  }
+
+  .tox-statusbar {
+    border-top: none;
+  }
+
+  .tox-toolbar__group:not(:last-of-type) {
+    // TODO: Find a way to override the border without !important
+    border-right: none !important;
+
+    &::after {
+      content: '';
+      position: relative;
+      left: 5px;
+      border: 1px solid #EAE6E5;
+      height: 24px;
+    }
+  }
+}
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/index.test.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/index.test.jsx
new file mode 100644
index 0000000000..a55d025bad
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/index.test.jsx
@@ -0,0 +1,36 @@
+import 'CourseAuthoring/editors/setupEditorTest';
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+import { EditProblemViewInternal as EditProblemView } from '.';
+import { AnswerWidgetInternal as AnswerWidget } from './AnswerWidget';
+import { ProblemTypeKeys } from '../../../../data/constants/problem';
+import RawEditor from '../../../../sharedComponents/RawEditor';
+import { formatMessage } from '../../../../testUtils';
+
+describe('EditorProblemView component', () => {
+  test('renders simple view', () => {
+    const wrapper = shallow(<EditProblemView
+      problemType={ProblemTypeKeys.SINGLESELECT}
+      problemState={{}}
+      assets={{}}
+      intl={{ formatMessage }}
+    />);
+    expect(wrapper.snapshot).toMatchSnapshot();
+
+    const AnswerWidgetComponent = wrapper.shallowWrapper.props.children[1].props.children[1].props.children;
+    expect(AnswerWidgetComponent.props.problemType).toBe(ProblemTypeKeys.SINGLESELECT);
+    expect(wrapper.instance.findByType(RawEditor).length).toBe(0);
+  });
+
+  test('renders raw editor', () => {
+    const wrapper = shallow(<EditProblemView
+      problemType={ProblemTypeKeys.ADVANCED}
+      problemState={{}}
+      assets={{}}
+      intl={{ formatMessage }}
+    />);
+    expect(wrapper.snapshot).toMatchSnapshot();
+    expect(wrapper.instance.findByType(AnswerWidget).length).toBe(0);
+    expect(wrapper.instance.findByType(RawEditor).length).toBe(1);
+  });
+});
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/messages.js b/src/editors/containers/ProblemEditor/components/EditProblemView/messages.js
new file mode 100644
index 0000000000..68cd4085d6
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/messages.js
@@ -0,0 +1,43 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  saveWarningModalCancelButtonLabel: {
+    id: 'authoring.problemEditor.editProblemView.saveWarningModal.cancelButton.label',
+    defaultMessage: 'Cancel',
+    description: 'Label for cancel button in the save warning modal',
+  },
+  saveWarningModalSaveButtonLabel: {
+    id: 'authoring.problemEditor.editProblemView.saveWarningModal.saveButton.label',
+    defaultMessage: 'Ok',
+    description: 'Label for save button in the save warning modal',
+  },
+  saveWarningModalBodyQuestion: {
+    id: 'authoring.problemEditor.editProblemView.saveWarningModal.body.question',
+    defaultMessage: 'Are you sure you want to exit the editor?',
+    description: 'Question in body of save warning modal',
+  },
+  noAnswerTitle: {
+    id: 'authoring.problemEditor.editProblemView.saveWarningModal.noAnswer.title',
+    defaultMessage: 'No answer specified',
+    description: 'Title for no answer modal',
+  },
+  noAnswerBodyExplanation: {
+    id: 'authoring.problemEditor.editProblemView.saveWarningModal.noAnswer.body.explanation',
+    defaultMessage: 'No correct answer has been specified.',
+    description: 'Explanation in body of no answer modal',
+  },
+  olxSettingDiscrepancyTitle: {
+    id: 'authoring.problemEditor.editProblemView.saveWarningModal.olxSettingDiscrepancy.title',
+    defaultMessage: 'OLX settings discrepancy',
+    description: 'Title for mismatched settings modal',
+  },
+  olxSettingDiscrepancyBodyExplanation: {
+    id: 'authoring.problemEditor.editProblemView.saveWarningModal.olxSettingDiscrepancy.body.explanation',
+    defaultMessage: `A discrepancy was found between the settings defined in the OLX's problem tag and the
+      settings selected in the sidebar. The settings defined in the OLX's problem tag will be saved and
+      corresponding values in the sidebar will be discarded.`,
+    description: 'Explanation in body of mismatched settings modal',
+  },
+});
+
+export default messages;
diff --git a/src/editors/containers/ProblemEditor/components/SelectTypeModal/SelectTypeWrapper/__snapshots__/index.test.tsx.snap b/src/editors/containers/ProblemEditor/components/SelectTypeModal/SelectTypeWrapper/__snapshots__/index.test.tsx.snap
new file mode 100644
index 0000000000..44c6994873
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/SelectTypeModal/SelectTypeWrapper/__snapshots__/index.test.tsx.snap
@@ -0,0 +1,61 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SelectTypeWrapper snapshot 1`] = `
+<EditorModalWrapper>
+  <ModalDialog.Header
+    className="shadow-sm zindex-10"
+  >
+    <ModalDialog.Title>
+      <FormattedMessage
+        defaultMessage="Select problem type"
+        description="Title for select problem type modal"
+        id="authoring.problemEditor.selectType.title"
+      />
+      <div
+        className="pgn__modal-close-container"
+      >
+        <IconButton
+          alt="Exit the editor"
+          iconAs="Icon"
+          src={[MockFunction icons.Close]}
+        />
+      </div>
+    </ModalDialog.Title>
+  </ModalDialog.Header>
+  <EditorModalBody>
+    <h1>
+      test child
+    </h1>
+  </EditorModalBody>
+  <FooterWrapper>
+    <ModalDialog.Footer
+      className="border-top-0"
+    >
+      <ActionRow>
+        <ActionRow.Spacer />
+        <Button
+          aria-label="Cancel"
+          variant="tertiary"
+        >
+          <FormattedMessage
+            defaultMessage="Cancel"
+            description="Label for cancel button."
+            id="authoring.problemeditor.selecttype.cancelButton.label"
+          />
+        </Button>
+        <Button
+          aria-label="Select"
+          disabled={false}
+          onClick={[Function]}
+        >
+          <FormattedMessage
+            defaultMessage="Select"
+            description="Label for select button."
+            id="authoring.problemeditor.selecttype.selectButton.label"
+          />
+        </Button>
+      </ActionRow>
+    </ModalDialog.Footer>
+  </FooterWrapper>
+</EditorModalWrapper>
+`;
diff --git a/src/editors/containers/ProblemEditor/components/SelectTypeModal/SelectTypeWrapper/index.test.tsx b/src/editors/containers/ProblemEditor/components/SelectTypeModal/SelectTypeWrapper/index.test.tsx
new file mode 100644
index 0000000000..8ac7456052
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/SelectTypeModal/SelectTypeWrapper/index.test.tsx
@@ -0,0 +1,34 @@
+import 'CourseAuthoring/editors/setupEditorTest';
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+import { IconButton } from '@openedx/paragon';
+import SelectTypeWrapper from '.';
+import { handleCancel } from '../../../../EditorContainer/hooks';
+
+jest.mock('../../../../EditorContainer/hooks', () => ({
+  handleCancel: jest.fn().mockName('handleCancel'),
+}));
+
+describe('SelectTypeWrapper', () => {
+  const props = {
+    children: (<h1>test child</h1>),
+    onClose: jest.fn(),
+    selected: 'iMAsElecTedValUE',
+  };
+
+  test('snapshot', () => {
+    expect(shallow(<SelectTypeWrapper {...props} />).snapshot).toMatchSnapshot();
+  });
+
+  describe('behavior', () => {
+    let el;
+    beforeEach(() => {
+      el = shallow(<SelectTypeWrapper {...props} />);
+    });
+    test('close behavior is linked to modal onClose', () => {
+      const expected = handleCancel({ onClose: props.onClose });
+      expect(el.instance.findByType(IconButton)[0].props.onClick)
+        .toEqual(expected);
+    });
+  });
+});
diff --git a/src/editors/containers/ProblemEditor/components/SelectTypeModal/SelectTypeWrapper/index.tsx b/src/editors/containers/ProblemEditor/components/SelectTypeModal/SelectTypeWrapper/index.tsx
new file mode 100644
index 0000000000..5df0c0be09
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/SelectTypeModal/SelectTypeWrapper/index.tsx
@@ -0,0 +1,85 @@
+import React from 'react';
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
+import { useDispatch, useSelector } from 'react-redux';
+import {
+  ActionRow,
+  Button,
+  Icon,
+  ModalDialog,
+  IconButton,
+} from '@openedx/paragon';
+import { Close } from '@openedx/paragon/icons';
+
+import { EditorModalBody, EditorModalWrapper, FooterWrapper } from '../../../../EditorContainer';
+import { actions, selectors } from '../../../../../data/redux';
+import * as containerHooks from '../../../../EditorContainer/hooks';
+import * as hooks from '../hooks';
+import ecMessages from '../../../../EditorContainer/messages';
+import messages from './messages';
+
+interface Props {
+  selected: string;
+  onClose: (() => void) | null;
+}
+
+const SelectTypeWrapper: React.FC<Props> = ({
+  children,
+  onClose = null,
+  selected,
+}) => {
+  const handleCancel = containerHooks.handleCancel({ onClose });
+  const intl = useIntl();
+  const defaultSettings = useSelector(selectors.problem.defaultSettings);
+  const dispatch = useDispatch();
+  const updateField = React.useCallback((data) => dispatch(actions.problem.updateField(data)), [dispatch]);
+  const setBlockTitle = React.useCallback((title) => dispatch(actions.app.setBlockTitle(title)), [dispatch]);
+
+  return (
+    <EditorModalWrapper onClose={handleCancel}>
+      <ModalDialog.Header className="shadow-sm zindex-10">
+        <ModalDialog.Title>
+          <FormattedMessage {...messages.selectTypeTitle} />
+          <div className="pgn__modal-close-container">
+            <IconButton
+              src={Close}
+              iconAs={Icon}
+              onClick={handleCancel}
+              alt={intl.formatMessage(ecMessages.exitButtonAlt)}
+            />
+          </div>
+        </ModalDialog.Title>
+      </ModalDialog.Header>
+      <EditorModalBody>
+        {children}
+      </EditorModalBody>
+      <FooterWrapper>
+        <ModalDialog.Footer className="border-top-0">
+          <ActionRow>
+            <ActionRow.Spacer />
+            <Button
+              aria-label={intl.formatMessage(messages.cancelButtonAriaLabel)}
+              variant="tertiary"
+              onClick={handleCancel}
+            >
+              <FormattedMessage {...messages.cancelButtonLabel} />
+            </Button>
+            <Button
+              aria-label={intl.formatMessage(messages.selectButtonAriaLabel)}
+              onClick={hooks.onSelect({
+                selected,
+                updateField,
+                setBlockTitle,
+                defaultSettings,
+              })}
+              disabled={!selected}
+            >
+              <FormattedMessage {...messages.selectButtonLabel} />
+            </Button>
+          </ActionRow>
+        </ModalDialog.Footer>
+      </FooterWrapper>
+    </EditorModalWrapper>
+  );
+};
+
+export default SelectTypeWrapper;
diff --git a/src/editors/containers/ProblemEditor/components/SelectTypeModal/SelectTypeWrapper/messages.ts b/src/editors/containers/ProblemEditor/components/SelectTypeModal/SelectTypeWrapper/messages.ts
new file mode 100644
index 0000000000..120968e307
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/SelectTypeModal/SelectTypeWrapper/messages.ts
@@ -0,0 +1,32 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+
+  selectTypeTitle: {
+    id: 'authoring.problemEditor.selectType.title',
+    defaultMessage: 'Select problem type',
+    description: 'Title for select problem type modal',
+  },
+  cancelButtonLabel: {
+    id: 'authoring.problemeditor.selecttype.cancelButton.label',
+    defaultMessage: 'Cancel',
+    description: 'Label for cancel button.',
+  },
+  cancelButtonAriaLabel: {
+    id: 'authoring.problemeditor.selecttype.cancelButton.ariaLabel',
+    defaultMessage: 'Cancel',
+    description: 'Screen reader label for cancel button.',
+  },
+  selectButtonLabel: {
+    id: 'authoring.problemeditor.selecttype.selectButton.label',
+    defaultMessage: 'Select',
+    description: 'Label for select button.',
+  },
+  selectButtonAriaLabel: {
+    id: 'authoring.problemeditor.selecttype.selectButton.ariaLabel',
+    defaultMessage: 'Select',
+    description: 'Screen reader label for select button.',
+  },
+});
+
+export default messages;
diff --git a/src/editors/containers/ProblemEditor/components/SelectTypeModal/content/AdvanceTypeSelect.test.tsx b/src/editors/containers/ProblemEditor/components/SelectTypeModal/content/AdvanceTypeSelect.test.tsx
new file mode 100644
index 0000000000..09d0e40e39
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/SelectTypeModal/content/AdvanceTypeSelect.test.tsx
@@ -0,0 +1,48 @@
+import 'CourseAuthoring/editors/setupEditorTest';
+import { shallow } from '@edx/react-unit-test-utils';
+
+import AdvanceTypeSelect from './AdvanceTypeSelect';
+
+describe('AdvanceTypeSelect', () => {
+  const props = {
+    selected: 'blankadvanced' as const,
+    setSelected: jest.fn().mockName('setSelect'),
+  };
+  describe('snapshots', () => {
+    test('snapshots: renders as expected with default props', () => {
+      expect(
+        shallow(<AdvanceTypeSelect {...props} />).snapshot,
+      ).toMatchSnapshot();
+    });
+    test('snapshots: renders as expected with problemType is circuitschematic', () => {
+      expect(
+        shallow(<AdvanceTypeSelect {...props} selected="circuitschematic" />).snapshot,
+      ).toMatchSnapshot();
+    });
+    test('snapshots: renders as expected with problemType is customgrader', () => {
+      expect(
+        shallow(<AdvanceTypeSelect {...props} selected="customgrader" />).snapshot,
+      ).toMatchSnapshot();
+    });
+    test('snapshots: renders as expected with problemType is formularesponse', () => {
+      expect(
+        shallow(<AdvanceTypeSelect {...props} selected="formularesponse" />).snapshot,
+      ).toMatchSnapshot();
+    });
+    test('snapshots: renders as expected with problemType is imageresponse', () => {
+      expect(
+        shallow(<AdvanceTypeSelect {...props} selected="imageresponse" />).snapshot,
+      ).toMatchSnapshot();
+    });
+    test('snapshots: renders as expected with problemType is jsinputresponse', () => {
+      expect(
+        shallow(<AdvanceTypeSelect {...props} selected="jsinputresponse" />).snapshot,
+      ).toMatchSnapshot();
+    });
+    test('snapshots: renders as expected with problemType is problemwithhint', () => {
+      expect(
+        shallow(<AdvanceTypeSelect {...props} selected="problemwithhint" />).snapshot,
+      ).toMatchSnapshot();
+    });
+  });
+});
diff --git a/src/editors/containers/ProblemEditor/components/SelectTypeModal/content/AdvanceTypeSelect.tsx b/src/editors/containers/ProblemEditor/components/SelectTypeModal/content/AdvanceTypeSelect.tsx
new file mode 100644
index 0000000000..2add431b27
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/SelectTypeModal/content/AdvanceTypeSelect.tsx
@@ -0,0 +1,102 @@
+import React from 'react';
+
+import {
+  Form,
+  ActionRow,
+  IconButton,
+  Icon,
+  OverlayTrigger,
+  Tooltip,
+  Hyperlink,
+  Col,
+} from '@openedx/paragon';
+import { ArrowBack } from '@openedx/paragon/icons';
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
+import {
+  AdvancedProblemType,
+  AdvanceProblems,
+  ProblemType,
+  ProblemTypeKeys,
+} from '../../../../../data/constants/problem';
+import messages from './messages';
+
+interface Props {
+  selected: AdvancedProblemType;
+  setSelected: React.Dispatch<ProblemType | AdvancedProblemType>;
+}
+
+const AdvanceTypeSelect: React.FC<Props> = ({
+  selected,
+  setSelected,
+}) => {
+  const intl = useIntl();
+  const handleChange = e => { setSelected(e.target.value); };
+  return (
+    <Col xs={12} md={8} className="justify-content-center">
+      <Form.Group className="border rounded text-primary-500 p-0">
+        <ActionRow className="border-primary-100 border-bottom py-3 pl-2.5 pr-4">
+          <IconButton
+            src={ArrowBack}
+            iconAs={Icon}
+            alt={intl.formatMessage(messages.advanceMenuGoBack)}
+            onClick={() => setSelected(ProblemTypeKeys.SINGLESELECT)}
+          />
+          <ActionRow.Spacer />
+          <Form.Label className="h4">
+            <FormattedMessage {...messages.advanceMenuTitle} />
+          </Form.Label>
+          <ActionRow.Spacer />
+        </ActionRow>
+        <Form.RadioSet
+          name="advanceTypes"
+          onChange={handleChange}
+          value={selected}
+          className="px-4"
+        >
+          {Object.entries(AdvanceProblems).map(([type, data]) => {
+            if (data.status !== '') {
+              return (
+                <ActionRow className="border-primary-100 border-bottom m-0 py-3 w-100" key={type}>
+                  <Form.Radio id={type} value={type}>
+                    {intl.formatMessage(messages.advanceProblemTypeLabel, { problemType: data.title })}
+                  </Form.Radio>
+                  <ActionRow.Spacer />
+                  <OverlayTrigger
+                    placement="right"
+                    overlay={(
+                      <Tooltip id={`tooltip-adv-${type}`}>
+                        <div className="text-left">
+                          {intl.formatMessage(messages.supportStatusTooltipMessage, { supportStatus: data.status.replace(' ', '_') })}
+                        </div>
+                      </Tooltip>
+                    )}
+                  >
+                    <div className="text-gray-500">
+                      {intl.formatMessage(messages.problemSupportStatus, { supportStatus: data.status })}
+                    </div>
+                  </OverlayTrigger>
+                </ActionRow>
+              );
+            }
+            return (
+              <ActionRow className="border-primary-100 border-bottom m-0 py-3 w-100" key={type}>
+                <Form.Radio id={type} value={type}>
+                  {intl.formatMessage(messages.advanceProblemTypeLabel, { problemType: data.title })}
+                </Form.Radio>
+                <ActionRow.Spacer />
+              </ActionRow>
+            );
+          })}
+        </Form.RadioSet>
+      </Form.Group>
+      <Hyperlink
+        destination="https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/exercises_tools/create_exercises_and_tools.html#advanced"
+        target="_blank"
+      >
+        <FormattedMessage {...messages.learnMoreAdvancedButtonLabel} />
+      </Hyperlink>
+    </Col>
+  );
+};
+
+export default AdvanceTypeSelect;
diff --git a/src/editors/containers/ProblemEditor/components/SelectTypeModal/content/Preview.jsx b/src/editors/containers/ProblemEditor/components/SelectTypeModal/content/Preview.jsx
new file mode 100644
index 0000000000..7077c18a56
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/SelectTypeModal/content/Preview.jsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Hyperlink, Image, Container } from '@openedx/paragon';
+import {
+  FormattedMessage,
+  injectIntl,
+  intlShape,
+} from '@edx/frontend-platform/i18n';
+import messages from './messages';
+import { ProblemTypes } from '../../../../../data/constants/problem';
+
+const Preview = ({
+  problemType,
+  // injected
+  intl,
+}) => {
+  if (problemType === null) {
+    return null;
+  }
+  const data = ProblemTypes[problemType];
+  return (
+    <Container style={{ width: '494px', height: '400px' }} className="bg-light-300 rounded p-4">
+      <div className="small">
+        {intl.formatMessage(messages.previewTitle, { previewTitle: data.title })}
+      </div>
+      <Image
+        fluid
+        className="my-3"
+        src={data.preview}
+        alt={intl.formatMessage(messages.previewAltText, { problemType })}
+      />
+      <div className="mb-3">
+        {intl.formatMessage(messages.previewDescription, { previewDescription: data.previewDescription })}
+      </div>
+      <Hyperlink
+        destination={data.helpLink}
+        target="_blank"
+      >
+        <FormattedMessage {...messages.learnMoreButtonLabel} />
+      </Hyperlink>
+    </Container>
+  );
+};
+
+Preview.defaultProps = {
+  problemType: null,
+};
+
+Preview.propTypes = {
+  problemType: PropTypes.string,
+  // injected
+  intl: intlShape.isRequired,
+};
+
+export const PreviewInternal = Preview; // For testing only
+export default injectIntl(Preview);
diff --git a/src/editors/containers/ProblemEditor/components/SelectTypeModal/content/Preview.test.jsx b/src/editors/containers/ProblemEditor/components/SelectTypeModal/content/Preview.test.jsx
new file mode 100644
index 0000000000..36cf961fc8
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/SelectTypeModal/content/Preview.test.jsx
@@ -0,0 +1,45 @@
+import 'CourseAuthoring/editors/setupEditorTest';
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+
+import { formatMessage } from '../../../../../testUtils';
+import { PreviewInternal as Preview } from './Preview';
+
+describe('Preview', () => {
+  const props = {
+    intl: { formatMessage },
+    problemType: null,
+  };
+  describe('snapshots', () => {
+    test('snapshots: renders as expected with default props', () => {
+      expect(
+        shallow(<Preview {...props} />).snapshot,
+      ).toMatchSnapshot();
+    });
+    test('snapshots: renders as expected with problemType is stringresponse', () => {
+      expect(
+        shallow(<Preview {...props} problemType="stringresponse" />).snapshot,
+      ).toMatchSnapshot();
+    });
+    test('snapshots: renders as expected with problemType is numericalresponse', () => {
+      expect(
+        shallow(<Preview {...props} problemType="numericalresponse" />).snapshot,
+      ).toMatchSnapshot();
+    });
+    test('snapshots: renders as expected with problemType is optionresponse', () => {
+      expect(
+        shallow(<Preview {...props} problemType="optionresponse" />).snapshot,
+      ).toMatchSnapshot();
+    });
+    test('snapshots: renders as expected with problemType is choiceresponse', () => {
+      expect(
+        shallow(<Preview {...props} problemType="choiceresponse" />).snapshot,
+      ).toMatchSnapshot();
+    });
+    test('snapshots: renders as expected with problemType is multiplechoiceresponse', () => {
+      expect(
+        shallow(<Preview {...props} problemType="multiplechoiceresponse" />).snapshot,
+      ).toMatchSnapshot();
+    });
+  });
+});
diff --git a/src/editors/containers/ProblemEditor/components/SelectTypeModal/content/ProblemTypeSelect.test.tsx b/src/editors/containers/ProblemEditor/components/SelectTypeModal/content/ProblemTypeSelect.test.tsx
new file mode 100644
index 0000000000..e7d433c92d
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/SelectTypeModal/content/ProblemTypeSelect.test.tsx
@@ -0,0 +1,39 @@
+import 'CourseAuthoring/editors/setupEditorTest';
+
+import { shallow } from '@edx/react-unit-test-utils';
+import { ProblemTypeKeys } from '../../../../../data/constants/problem';
+import ProblemTypeSelect from './ProblemTypeSelect';
+
+describe('ProblemTypeSelect', () => {
+  const props = {
+    setSelected: jest.fn(),
+  };
+
+  describe('snapshot', () => {
+    test('SINGLESELECT', () => {
+      expect(shallow(
+        <ProblemTypeSelect {...props} selected={ProblemTypeKeys.SINGLESELECT} />,
+      ).snapshot).toMatchSnapshot();
+    });
+    test('MULTISELECT', () => {
+      expect(shallow(
+        <ProblemTypeSelect {...props} selected={ProblemTypeKeys.MULTISELECT} />,
+      ).snapshot).toMatchSnapshot();
+    });
+    test('DROPDOWN', () => {
+      expect(shallow(
+        <ProblemTypeSelect {...props} selected={ProblemTypeKeys.DROPDOWN} />,
+      ).snapshot).toMatchSnapshot();
+    });
+    test('NUMERIC', () => {
+      expect(shallow(
+        <ProblemTypeSelect {...props} selected={ProblemTypeKeys.NUMERIC} />,
+      ).snapshot).toMatchSnapshot();
+    });
+    test('TEXTINPUT', () => {
+      expect(shallow(
+        <ProblemTypeSelect {...props} selected={ProblemTypeKeys.TEXTINPUT} />,
+      ).snapshot).toMatchSnapshot();
+    });
+  });
+});
diff --git a/src/editors/containers/ProblemEditor/components/SelectTypeModal/content/ProblemTypeSelect.tsx b/src/editors/containers/ProblemEditor/components/SelectTypeModal/content/ProblemTypeSelect.tsx
new file mode 100644
index 0000000000..a87f329042
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/SelectTypeModal/content/ProblemTypeSelect.tsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import { Button, Container } from '@openedx/paragon';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+
+// SelectableBox in paragon has a bug where you can't change selection. So we override it
+import SelectableBox from '../../../../../sharedComponents/SelectableBox';
+import {
+  ProblemTypes,
+  ProblemTypeKeys,
+  AdvanceProblemKeys,
+  AdvancedProblemType,
+  ProblemType,
+} from '../../../../../data/constants/problem';
+import messages from './messages';
+
+interface Props {
+  selected: ProblemType;
+  setSelected: (selected: ProblemType | AdvancedProblemType) => void;
+}
+
+const ProblemTypeSelect: React.FC<Props> = ({
+  selected,
+  setSelected,
+}) => {
+  const handleChange = e => setSelected(e.target.value);
+  const handleClick = () => setSelected(AdvanceProblemKeys.BLANK);
+  const settings = { type: 'radio' };
+
+  return (
+    <Container style={{ width: '494px', height: '400px' }}>
+      <SelectableBox.Set
+        name="problem-type"
+        columns={1}
+        onChange={handleChange}
+        type={settings.type}
+        value={selected}
+      >
+        {Object.values(ProblemTypeKeys).map((key) => (
+          key !== 'advanced'
+            ? (
+              <SelectableBox
+                className="border border-light-400 text-primary-500 shadow-none"
+                id={key}
+                key={key}
+                value={key}
+                {...settings}
+              >
+                {ProblemTypes[key].title}
+              </SelectableBox>
+            )
+            : null
+        ))}
+      </SelectableBox.Set>
+      <Button variant="link" className="pl-0 mt-2" onClick={handleClick}>
+        <FormattedMessage {...messages.advanceProblemButtonLabel} />
+      </Button>
+    </Container>
+  );
+};
+
+export default ProblemTypeSelect;
diff --git a/src/editors/containers/ProblemEditor/components/SelectTypeModal/content/__snapshots__/AdvanceTypeSelect.test.tsx.snap b/src/editors/containers/ProblemEditor/components/SelectTypeModal/content/__snapshots__/AdvanceTypeSelect.test.tsx.snap
new file mode 100644
index 0000000000..73f572377d
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/SelectTypeModal/content/__snapshots__/AdvanceTypeSelect.test.tsx.snap
@@ -0,0 +1,1919 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with default props 1`] = `
+<Col
+  className="justify-content-center"
+  md={8}
+  xs={12}
+>
+  <Form.Group
+    className="border rounded text-primary-500 p-0"
+  >
+    <ActionRow
+      className="border-primary-100 border-bottom py-3 pl-2.5 pr-4"
+    >
+      <IconButton
+        alt="Go back"
+        iconAs="Icon"
+        onClick={[Function]}
+      />
+      <ActionRow.Spacer />
+      <Form.Label
+        className="h4"
+      >
+        <FormattedMessage
+          defaultMessage="Advanced problems"
+          description="Title for advanced problem menu"
+          id="authoring.problemEditor.advanceProblem.menu.title"
+        />
+      </Form.Label>
+      <ActionRow.Spacer />
+    </ActionRow>
+    <RadioSet
+      className="px-4"
+      name="advanceTypes"
+      onChange={[Function]}
+      value="blankadvanced"
+    >
+      <ActionRow
+        className="border-primary-100 border-bottom m-0 py-3 w-100"
+        key="blankadvanced"
+      >
+        <Radio
+          id="blankadvanced"
+          value="blankadvanced"
+        >
+          Blank problem
+        </Radio>
+        <ActionRow.Spacer />
+      </ActionRow>
+      <ActionRow
+        className="border-primary-100 border-bottom m-0 py-3 w-100"
+        key="circuitschematic"
+      >
+        <Radio
+          id="circuitschematic"
+          value="circuitschematic"
+        >
+          Circuit schematic builder
+        </Radio>
+        <ActionRow.Spacer />
+        <OverlayTrigger
+          overlay={
+            <Tooltip
+              id="tooltip-adv-circuitschematic"
+            >
+              <div
+                className="text-left"
+              >
+                {supportStatus,  select,
+      Provisional {Provisionally supported tools might lack the robustness of functionality
+        that your courses require. edX does not have control over the quality of the software,
+        or of the content that can be provided using these tools.
+        
+ 
+
+        Test these tools thoroughly before using them in your course, especially in graded
+        sections. Complete documentstion might not be available for provisionally supported
+        tools, or documentation might be available from sources other than edX.}
+      Not_supported {Tools with no support are not maintained by edX, and might be deprecated
+        in the future. They are not recommened for use in courses due to non-compliance with one
+        or more of the base requirements, such as testing, accessibility, internationalization,
+        and documentation.}
+      other { } 
+    }
+              </div>
+            </Tooltip>
+          }
+          placement="right"
+        >
+          <div
+            className="text-gray-500"
+          >
+            Not supported
+          </div>
+        </OverlayTrigger>
+      </ActionRow>
+      <ActionRow
+        className="border-primary-100 border-bottom m-0 py-3 w-100"
+        key="jsinputresponse"
+      >
+        <Radio
+          id="jsinputresponse"
+          value="jsinputresponse"
+        >
+          Custom JavaScript display and grading
+        </Radio>
+        <ActionRow.Spacer />
+      </ActionRow>
+      <ActionRow
+        className="border-primary-100 border-bottom m-0 py-3 w-100"
+        key="customgrader"
+      >
+        <Radio
+          id="customgrader"
+          value="customgrader"
+        >
+          Custom Python-evaluated input
+        </Radio>
+        <ActionRow.Spacer />
+        <OverlayTrigger
+          overlay={
+            <Tooltip
+              id="tooltip-adv-customgrader"
+            >
+              <div
+                className="text-left"
+              >
+                {supportStatus,  select,
+      Provisional {Provisionally supported tools might lack the robustness of functionality
+        that your courses require. edX does not have control over the quality of the software,
+        or of the content that can be provided using these tools.
+        
+ 
+
+        Test these tools thoroughly before using them in your course, especially in graded
+        sections. Complete documentstion might not be available for provisionally supported
+        tools, or documentation might be available from sources other than edX.}
+      Not_supported {Tools with no support are not maintained by edX, and might be deprecated
+        in the future. They are not recommened for use in courses due to non-compliance with one
+        or more of the base requirements, such as testing, accessibility, internationalization,
+        and documentation.}
+      other { } 
+    }
+              </div>
+            </Tooltip>
+          }
+          placement="right"
+        >
+          <div
+            className="text-gray-500"
+          >
+            Provisional
+          </div>
+        </OverlayTrigger>
+      </ActionRow>
+      <ActionRow
+        className="border-primary-100 border-bottom m-0 py-3 w-100"
+        key="imageresponse"
+      >
+        <Radio
+          id="imageresponse"
+          value="imageresponse"
+        >
+          Image mapped input
+        </Radio>
+        <ActionRow.Spacer />
+        <OverlayTrigger
+          overlay={
+            <Tooltip
+              id="tooltip-adv-imageresponse"
+            >
+              <div
+                className="text-left"
+              >
+                {supportStatus,  select,
+      Provisional {Provisionally supported tools might lack the robustness of functionality
+        that your courses require. edX does not have control over the quality of the software,
+        or of the content that can be provided using these tools.
+        
+ 
+
+        Test these tools thoroughly before using them in your course, especially in graded
+        sections. Complete documentstion might not be available for provisionally supported
+        tools, or documentation might be available from sources other than edX.}
+      Not_supported {Tools with no support are not maintained by edX, and might be deprecated
+        in the future. They are not recommened for use in courses due to non-compliance with one
+        or more of the base requirements, such as testing, accessibility, internationalization,
+        and documentation.}
+      other { } 
+    }
+              </div>
+            </Tooltip>
+          }
+          placement="right"
+        >
+          <div
+            className="text-gray-500"
+          >
+            Not supported
+          </div>
+        </OverlayTrigger>
+      </ActionRow>
+      <ActionRow
+        className="border-primary-100 border-bottom m-0 py-3 w-100"
+        key="formularesponse"
+      >
+        <Radio
+          id="formularesponse"
+          value="formularesponse"
+        >
+          Math expression input
+        </Radio>
+        <ActionRow.Spacer />
+      </ActionRow>
+      <ActionRow
+        className="border-primary-100 border-bottom m-0 py-3 w-100"
+        key="problemwithhint"
+      >
+        <Radio
+          id="problemwithhint"
+          value="problemwithhint"
+        >
+          Problem with adaptive hint
+        </Radio>
+        <ActionRow.Spacer />
+        <OverlayTrigger
+          overlay={
+            <Tooltip
+              id="tooltip-adv-problemwithhint"
+            >
+              <div
+                className="text-left"
+              >
+                {supportStatus,  select,
+      Provisional {Provisionally supported tools might lack the robustness of functionality
+        that your courses require. edX does not have control over the quality of the software,
+        or of the content that can be provided using these tools.
+        
+ 
+
+        Test these tools thoroughly before using them in your course, especially in graded
+        sections. Complete documentstion might not be available for provisionally supported
+        tools, or documentation might be available from sources other than edX.}
+      Not_supported {Tools with no support are not maintained by edX, and might be deprecated
+        in the future. They are not recommened for use in courses due to non-compliance with one
+        or more of the base requirements, such as testing, accessibility, internationalization,
+        and documentation.}
+      other { } 
+    }
+              </div>
+            </Tooltip>
+          }
+          placement="right"
+        >
+          <div
+            className="text-gray-500"
+          >
+            Not supported
+          </div>
+        </OverlayTrigger>
+      </ActionRow>
+    </RadioSet>
+  </Form.Group>
+  <Hyperlink
+    destination="https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/exercises_tools/create_exercises_and_tools.html#advanced"
+    target="_blank"
+  >
+    <FormattedMessage
+      defaultMessage="Learn more about advanced problem types"
+      description="Label for Learn more about advanced problem types button"
+      id="authoring.problemEditor.advanceProblem.learnMoreButtonLabel.label"
+    />
+  </Hyperlink>
+</Col>
+`;
+
+exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problemType is circuitschematic 1`] = `
+<Col
+  className="justify-content-center"
+  md={8}
+  xs={12}
+>
+  <Form.Group
+    className="border rounded text-primary-500 p-0"
+  >
+    <ActionRow
+      className="border-primary-100 border-bottom py-3 pl-2.5 pr-4"
+    >
+      <IconButton
+        alt="Go back"
+        iconAs="Icon"
+        onClick={[Function]}
+      />
+      <ActionRow.Spacer />
+      <Form.Label
+        className="h4"
+      >
+        <FormattedMessage
+          defaultMessage="Advanced problems"
+          description="Title for advanced problem menu"
+          id="authoring.problemEditor.advanceProblem.menu.title"
+        />
+      </Form.Label>
+      <ActionRow.Spacer />
+    </ActionRow>
+    <RadioSet
+      className="px-4"
+      name="advanceTypes"
+      onChange={[Function]}
+      value="circuitschematic"
+    >
+      <ActionRow
+        className="border-primary-100 border-bottom m-0 py-3 w-100"
+        key="blankadvanced"
+      >
+        <Radio
+          id="blankadvanced"
+          value="blankadvanced"
+        >
+          Blank problem
+        </Radio>
+        <ActionRow.Spacer />
+      </ActionRow>
+      <ActionRow
+        className="border-primary-100 border-bottom m-0 py-3 w-100"
+        key="circuitschematic"
+      >
+        <Radio
+          id="circuitschematic"
+          value="circuitschematic"
+        >
+          Circuit schematic builder
+        </Radio>
+        <ActionRow.Spacer />
+        <OverlayTrigger
+          overlay={
+            <Tooltip
+              id="tooltip-adv-circuitschematic"
+            >
+              <div
+                className="text-left"
+              >
+                {supportStatus,  select,
+      Provisional {Provisionally supported tools might lack the robustness of functionality
+        that your courses require. edX does not have control over the quality of the software,
+        or of the content that can be provided using these tools.
+        
+ 
+
+        Test these tools thoroughly before using them in your course, especially in graded
+        sections. Complete documentstion might not be available for provisionally supported
+        tools, or documentation might be available from sources other than edX.}
+      Not_supported {Tools with no support are not maintained by edX, and might be deprecated
+        in the future. They are not recommened for use in courses due to non-compliance with one
+        or more of the base requirements, such as testing, accessibility, internationalization,
+        and documentation.}
+      other { } 
+    }
+              </div>
+            </Tooltip>
+          }
+          placement="right"
+        >
+          <div
+            className="text-gray-500"
+          >
+            Not supported
+          </div>
+        </OverlayTrigger>
+      </ActionRow>
+      <ActionRow
+        className="border-primary-100 border-bottom m-0 py-3 w-100"
+        key="jsinputresponse"
+      >
+        <Radio
+          id="jsinputresponse"
+          value="jsinputresponse"
+        >
+          Custom JavaScript display and grading
+        </Radio>
+        <ActionRow.Spacer />
+      </ActionRow>
+      <ActionRow
+        className="border-primary-100 border-bottom m-0 py-3 w-100"
+        key="customgrader"
+      >
+        <Radio
+          id="customgrader"
+          value="customgrader"
+        >
+          Custom Python-evaluated input
+        </Radio>
+        <ActionRow.Spacer />
+        <OverlayTrigger
+          overlay={
+            <Tooltip
+              id="tooltip-adv-customgrader"
+            >
+              <div
+                className="text-left"
+              >
+                {supportStatus,  select,
+      Provisional {Provisionally supported tools might lack the robustness of functionality
+        that your courses require. edX does not have control over the quality of the software,
+        or of the content that can be provided using these tools.
+        
+ 
+
+        Test these tools thoroughly before using them in your course, especially in graded
+        sections. Complete documentstion might not be available for provisionally supported
+        tools, or documentation might be available from sources other than edX.}
+      Not_supported {Tools with no support are not maintained by edX, and might be deprecated
+        in the future. They are not recommened for use in courses due to non-compliance with one
+        or more of the base requirements, such as testing, accessibility, internationalization,
+        and documentation.}
+      other { } 
+    }
+              </div>
+            </Tooltip>
+          }
+          placement="right"
+        >
+          <div
+            className="text-gray-500"
+          >
+            Provisional
+          </div>
+        </OverlayTrigger>
+      </ActionRow>
+      <ActionRow
+        className="border-primary-100 border-bottom m-0 py-3 w-100"
+        key="imageresponse"
+      >
+        <Radio
+          id="imageresponse"
+          value="imageresponse"
+        >
+          Image mapped input
+        </Radio>
+        <ActionRow.Spacer />
+        <OverlayTrigger
+          overlay={
+            <Tooltip
+              id="tooltip-adv-imageresponse"
+            >
+              <div
+                className="text-left"
+              >
+                {supportStatus,  select,
+      Provisional {Provisionally supported tools might lack the robustness of functionality
+        that your courses require. edX does not have control over the quality of the software,
+        or of the content that can be provided using these tools.
+        
+ 
+
+        Test these tools thoroughly before using them in your course, especially in graded
+        sections. Complete documentstion might not be available for provisionally supported
+        tools, or documentation might be available from sources other than edX.}
+      Not_supported {Tools with no support are not maintained by edX, and might be deprecated
+        in the future. They are not recommened for use in courses due to non-compliance with one
+        or more of the base requirements, such as testing, accessibility, internationalization,
+        and documentation.}
+      other { } 
+    }
+              </div>
+            </Tooltip>
+          }
+          placement="right"
+        >
+          <div
+            className="text-gray-500"
+          >
+            Not supported
+          </div>
+        </OverlayTrigger>
+      </ActionRow>
+      <ActionRow
+        className="border-primary-100 border-bottom m-0 py-3 w-100"
+        key="formularesponse"
+      >
+        <Radio
+          id="formularesponse"
+          value="formularesponse"
+        >
+          Math expression input
+        </Radio>
+        <ActionRow.Spacer />
+      </ActionRow>
+      <ActionRow
+        className="border-primary-100 border-bottom m-0 py-3 w-100"
+        key="problemwithhint"
+      >
+        <Radio
+          id="problemwithhint"
+          value="problemwithhint"
+        >
+          Problem with adaptive hint
+        </Radio>
+        <ActionRow.Spacer />
+        <OverlayTrigger
+          overlay={
+            <Tooltip
+              id="tooltip-adv-problemwithhint"
+            >
+              <div
+                className="text-left"
+              >
+                {supportStatus,  select,
+      Provisional {Provisionally supported tools might lack the robustness of functionality
+        that your courses require. edX does not have control over the quality of the software,
+        or of the content that can be provided using these tools.
+        
+ 
+
+        Test these tools thoroughly before using them in your course, especially in graded
+        sections. Complete documentstion might not be available for provisionally supported
+        tools, or documentation might be available from sources other than edX.}
+      Not_supported {Tools with no support are not maintained by edX, and might be deprecated
+        in the future. They are not recommened for use in courses due to non-compliance with one
+        or more of the base requirements, such as testing, accessibility, internationalization,
+        and documentation.}
+      other { } 
+    }
+              </div>
+            </Tooltip>
+          }
+          placement="right"
+        >
+          <div
+            className="text-gray-500"
+          >
+            Not supported
+          </div>
+        </OverlayTrigger>
+      </ActionRow>
+    </RadioSet>
+  </Form.Group>
+  <Hyperlink
+    destination="https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/exercises_tools/create_exercises_and_tools.html#advanced"
+    target="_blank"
+  >
+    <FormattedMessage
+      defaultMessage="Learn more about advanced problem types"
+      description="Label for Learn more about advanced problem types button"
+      id="authoring.problemEditor.advanceProblem.learnMoreButtonLabel.label"
+    />
+  </Hyperlink>
+</Col>
+`;
+
+exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problemType is customgrader 1`] = `
+<Col
+  className="justify-content-center"
+  md={8}
+  xs={12}
+>
+  <Form.Group
+    className="border rounded text-primary-500 p-0"
+  >
+    <ActionRow
+      className="border-primary-100 border-bottom py-3 pl-2.5 pr-4"
+    >
+      <IconButton
+        alt="Go back"
+        iconAs="Icon"
+        onClick={[Function]}
+      />
+      <ActionRow.Spacer />
+      <Form.Label
+        className="h4"
+      >
+        <FormattedMessage
+          defaultMessage="Advanced problems"
+          description="Title for advanced problem menu"
+          id="authoring.problemEditor.advanceProblem.menu.title"
+        />
+      </Form.Label>
+      <ActionRow.Spacer />
+    </ActionRow>
+    <RadioSet
+      className="px-4"
+      name="advanceTypes"
+      onChange={[Function]}
+      value="customgrader"
+    >
+      <ActionRow
+        className="border-primary-100 border-bottom m-0 py-3 w-100"
+        key="blankadvanced"
+      >
+        <Radio
+          id="blankadvanced"
+          value="blankadvanced"
+        >
+          Blank problem
+        </Radio>
+        <ActionRow.Spacer />
+      </ActionRow>
+      <ActionRow
+        className="border-primary-100 border-bottom m-0 py-3 w-100"
+        key="circuitschematic"
+      >
+        <Radio
+          id="circuitschematic"
+          value="circuitschematic"
+        >
+          Circuit schematic builder
+        </Radio>
+        <ActionRow.Spacer />
+        <OverlayTrigger
+          overlay={
+            <Tooltip
+              id="tooltip-adv-circuitschematic"
+            >
+              <div
+                className="text-left"
+              >
+                {supportStatus,  select,
+      Provisional {Provisionally supported tools might lack the robustness of functionality
+        that your courses require. edX does not have control over the quality of the software,
+        or of the content that can be provided using these tools.
+        
+ 
+
+        Test these tools thoroughly before using them in your course, especially in graded
+        sections. Complete documentstion might not be available for provisionally supported
+        tools, or documentation might be available from sources other than edX.}
+      Not_supported {Tools with no support are not maintained by edX, and might be deprecated
+        in the future. They are not recommened for use in courses due to non-compliance with one
+        or more of the base requirements, such as testing, accessibility, internationalization,
+        and documentation.}
+      other { } 
+    }
+              </div>
+            </Tooltip>
+          }
+          placement="right"
+        >
+          <div
+            className="text-gray-500"
+          >
+            Not supported
+          </div>
+        </OverlayTrigger>
+      </ActionRow>
+      <ActionRow
+        className="border-primary-100 border-bottom m-0 py-3 w-100"
+        key="jsinputresponse"
+      >
+        <Radio
+          id="jsinputresponse"
+          value="jsinputresponse"
+        >
+          Custom JavaScript display and grading
+        </Radio>
+        <ActionRow.Spacer />
+      </ActionRow>
+      <ActionRow
+        className="border-primary-100 border-bottom m-0 py-3 w-100"
+        key="customgrader"
+      >
+        <Radio
+          id="customgrader"
+          value="customgrader"
+        >
+          Custom Python-evaluated input
+        </Radio>
+        <ActionRow.Spacer />
+        <OverlayTrigger
+          overlay={
+            <Tooltip
+              id="tooltip-adv-customgrader"
+            >
+              <div
+                className="text-left"
+              >
+                {supportStatus,  select,
+      Provisional {Provisionally supported tools might lack the robustness of functionality
+        that your courses require. edX does not have control over the quality of the software,
+        or of the content that can be provided using these tools.
+        
+ 
+
+        Test these tools thoroughly before using them in your course, especially in graded
+        sections. Complete documentstion might not be available for provisionally supported
+        tools, or documentation might be available from sources other than edX.}
+      Not_supported {Tools with no support are not maintained by edX, and might be deprecated
+        in the future. They are not recommened for use in courses due to non-compliance with one
+        or more of the base requirements, such as testing, accessibility, internationalization,
+        and documentation.}
+      other { } 
+    }
+              </div>
+            </Tooltip>
+          }
+          placement="right"
+        >
+          <div
+            className="text-gray-500"
+          >
+            Provisional
+          </div>
+        </OverlayTrigger>
+      </ActionRow>
+      <ActionRow
+        className="border-primary-100 border-bottom m-0 py-3 w-100"
+        key="imageresponse"
+      >
+        <Radio
+          id="imageresponse"
+          value="imageresponse"
+        >
+          Image mapped input
+        </Radio>
+        <ActionRow.Spacer />
+        <OverlayTrigger
+          overlay={
+            <Tooltip
+              id="tooltip-adv-imageresponse"
+            >
+              <div
+                className="text-left"
+              >
+                {supportStatus,  select,
+      Provisional {Provisionally supported tools might lack the robustness of functionality
+        that your courses require. edX does not have control over the quality of the software,
+        or of the content that can be provided using these tools.
+        
+ 
+
+        Test these tools thoroughly before using them in your course, especially in graded
+        sections. Complete documentstion might not be available for provisionally supported
+        tools, or documentation might be available from sources other than edX.}
+      Not_supported {Tools with no support are not maintained by edX, and might be deprecated
+        in the future. They are not recommened for use in courses due to non-compliance with one
+        or more of the base requirements, such as testing, accessibility, internationalization,
+        and documentation.}
+      other { } 
+    }
+              </div>
+            </Tooltip>
+          }
+          placement="right"
+        >
+          <div
+            className="text-gray-500"
+          >
+            Not supported
+          </div>
+        </OverlayTrigger>
+      </ActionRow>
+      <ActionRow
+        className="border-primary-100 border-bottom m-0 py-3 w-100"
+        key="formularesponse"
+      >
+        <Radio
+          id="formularesponse"
+          value="formularesponse"
+        >
+          Math expression input
+        </Radio>
+        <ActionRow.Spacer />
+      </ActionRow>
+      <ActionRow
+        className="border-primary-100 border-bottom m-0 py-3 w-100"
+        key="problemwithhint"
+      >
+        <Radio
+          id="problemwithhint"
+          value="problemwithhint"
+        >
+          Problem with adaptive hint
+        </Radio>
+        <ActionRow.Spacer />
+        <OverlayTrigger
+          overlay={
+            <Tooltip
+              id="tooltip-adv-problemwithhint"
+            >
+              <div
+                className="text-left"
+              >
+                {supportStatus,  select,
+      Provisional {Provisionally supported tools might lack the robustness of functionality
+        that your courses require. edX does not have control over the quality of the software,
+        or of the content that can be provided using these tools.
+        
+ 
+
+        Test these tools thoroughly before using them in your course, especially in graded
+        sections. Complete documentstion might not be available for provisionally supported
+        tools, or documentation might be available from sources other than edX.}
+      Not_supported {Tools with no support are not maintained by edX, and might be deprecated
+        in the future. They are not recommened for use in courses due to non-compliance with one
+        or more of the base requirements, such as testing, accessibility, internationalization,
+        and documentation.}
+      other { } 
+    }
+              </div>
+            </Tooltip>
+          }
+          placement="right"
+        >
+          <div
+            className="text-gray-500"
+          >
+            Not supported
+          </div>
+        </OverlayTrigger>
+      </ActionRow>
+    </RadioSet>
+  </Form.Group>
+  <Hyperlink
+    destination="https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/exercises_tools/create_exercises_and_tools.html#advanced"
+    target="_blank"
+  >
+    <FormattedMessage
+      defaultMessage="Learn more about advanced problem types"
+      description="Label for Learn more about advanced problem types button"
+      id="authoring.problemEditor.advanceProblem.learnMoreButtonLabel.label"
+    />
+  </Hyperlink>
+</Col>
+`;
+
+exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problemType is formularesponse 1`] = `
+<Col
+  className="justify-content-center"
+  md={8}
+  xs={12}
+>
+  <Form.Group
+    className="border rounded text-primary-500 p-0"
+  >
+    <ActionRow
+      className="border-primary-100 border-bottom py-3 pl-2.5 pr-4"
+    >
+      <IconButton
+        alt="Go back"
+        iconAs="Icon"
+        onClick={[Function]}
+      />
+      <ActionRow.Spacer />
+      <Form.Label
+        className="h4"
+      >
+        <FormattedMessage
+          defaultMessage="Advanced problems"
+          description="Title for advanced problem menu"
+          id="authoring.problemEditor.advanceProblem.menu.title"
+        />
+      </Form.Label>
+      <ActionRow.Spacer />
+    </ActionRow>
+    <RadioSet
+      className="px-4"
+      name="advanceTypes"
+      onChange={[Function]}
+      value="formularesponse"
+    >
+      <ActionRow
+        className="border-primary-100 border-bottom m-0 py-3 w-100"
+        key="blankadvanced"
+      >
+        <Radio
+          id="blankadvanced"
+          value="blankadvanced"
+        >
+          Blank problem
+        </Radio>
+        <ActionRow.Spacer />
+      </ActionRow>
+      <ActionRow
+        className="border-primary-100 border-bottom m-0 py-3 w-100"
+        key="circuitschematic"
+      >
+        <Radio
+          id="circuitschematic"
+          value="circuitschematic"
+        >
+          Circuit schematic builder
+        </Radio>
+        <ActionRow.Spacer />
+        <OverlayTrigger
+          overlay={
+            <Tooltip
+              id="tooltip-adv-circuitschematic"
+            >
+              <div
+                className="text-left"
+              >
+                {supportStatus,  select,
+      Provisional {Provisionally supported tools might lack the robustness of functionality
+        that your courses require. edX does not have control over the quality of the software,
+        or of the content that can be provided using these tools.
+        
+ 
+
+        Test these tools thoroughly before using them in your course, especially in graded
+        sections. Complete documentstion might not be available for provisionally supported
+        tools, or documentation might be available from sources other than edX.}
+      Not_supported {Tools with no support are not maintained by edX, and might be deprecated
+        in the future. They are not recommened for use in courses due to non-compliance with one
+        or more of the base requirements, such as testing, accessibility, internationalization,
+        and documentation.}
+      other { } 
+    }
+              </div>
+            </Tooltip>
+          }
+          placement="right"
+        >
+          <div
+            className="text-gray-500"
+          >
+            Not supported
+          </div>
+        </OverlayTrigger>
+      </ActionRow>
+      <ActionRow
+        className="border-primary-100 border-bottom m-0 py-3 w-100"
+        key="jsinputresponse"
+      >
+        <Radio
+          id="jsinputresponse"
+          value="jsinputresponse"
+        >
+          Custom JavaScript display and grading
+        </Radio>
+        <ActionRow.Spacer />
+      </ActionRow>
+      <ActionRow
+        className="border-primary-100 border-bottom m-0 py-3 w-100"
+        key="customgrader"
+      >
+        <Radio
+          id="customgrader"
+          value="customgrader"
+        >
+          Custom Python-evaluated input
+        </Radio>
+        <ActionRow.Spacer />
+        <OverlayTrigger
+          overlay={
+            <Tooltip
+              id="tooltip-adv-customgrader"
+            >
+              <div
+                className="text-left"
+              >
+                {supportStatus,  select,
+      Provisional {Provisionally supported tools might lack the robustness of functionality
+        that your courses require. edX does not have control over the quality of the software,
+        or of the content that can be provided using these tools.
+        
+ 
+
+        Test these tools thoroughly before using them in your course, especially in graded
+        sections. Complete documentstion might not be available for provisionally supported
+        tools, or documentation might be available from sources other than edX.}
+      Not_supported {Tools with no support are not maintained by edX, and might be deprecated
+        in the future. They are not recommened for use in courses due to non-compliance with one
+        or more of the base requirements, such as testing, accessibility, internationalization,
+        and documentation.}
+      other { } 
+    }
+              </div>
+            </Tooltip>
+          }
+          placement="right"
+        >
+          <div
+            className="text-gray-500"
+          >
+            Provisional
+          </div>
+        </OverlayTrigger>
+      </ActionRow>
+      <ActionRow
+        className="border-primary-100 border-bottom m-0 py-3 w-100"
+        key="imageresponse"
+      >
+        <Radio
+          id="imageresponse"
+          value="imageresponse"
+        >
+          Image mapped input
+        </Radio>
+        <ActionRow.Spacer />
+        <OverlayTrigger
+          overlay={
+            <Tooltip
+              id="tooltip-adv-imageresponse"
+            >
+              <div
+                className="text-left"
+              >
+                {supportStatus,  select,
+      Provisional {Provisionally supported tools might lack the robustness of functionality
+        that your courses require. edX does not have control over the quality of the software,
+        or of the content that can be provided using these tools.
+        
+ 
+
+        Test these tools thoroughly before using them in your course, especially in graded
+        sections. Complete documentstion might not be available for provisionally supported
+        tools, or documentation might be available from sources other than edX.}
+      Not_supported {Tools with no support are not maintained by edX, and might be deprecated
+        in the future. They are not recommened for use in courses due to non-compliance with one
+        or more of the base requirements, such as testing, accessibility, internationalization,
+        and documentation.}
+      other { } 
+    }
+              </div>
+            </Tooltip>
+          }
+          placement="right"
+        >
+          <div
+            className="text-gray-500"
+          >
+            Not supported
+          </div>
+        </OverlayTrigger>
+      </ActionRow>
+      <ActionRow
+        className="border-primary-100 border-bottom m-0 py-3 w-100"
+        key="formularesponse"
+      >
+        <Radio
+          id="formularesponse"
+          value="formularesponse"
+        >
+          Math expression input
+        </Radio>
+        <ActionRow.Spacer />
+      </ActionRow>
+      <ActionRow
+        className="border-primary-100 border-bottom m-0 py-3 w-100"
+        key="problemwithhint"
+      >
+        <Radio
+          id="problemwithhint"
+          value="problemwithhint"
+        >
+          Problem with adaptive hint
+        </Radio>
+        <ActionRow.Spacer />
+        <OverlayTrigger
+          overlay={
+            <Tooltip
+              id="tooltip-adv-problemwithhint"
+            >
+              <div
+                className="text-left"
+              >
+                {supportStatus,  select,
+      Provisional {Provisionally supported tools might lack the robustness of functionality
+        that your courses require. edX does not have control over the quality of the software,
+        or of the content that can be provided using these tools.
+        
+ 
+
+        Test these tools thoroughly before using them in your course, especially in graded
+        sections. Complete documentstion might not be available for provisionally supported
+        tools, or documentation might be available from sources other than edX.}
+      Not_supported {Tools with no support are not maintained by edX, and might be deprecated
+        in the future. They are not recommened for use in courses due to non-compliance with one
+        or more of the base requirements, such as testing, accessibility, internationalization,
+        and documentation.}
+      other { } 
+    }
+              </div>
+            </Tooltip>
+          }
+          placement="right"
+        >
+          <div
+            className="text-gray-500"
+          >
+            Not supported
+          </div>
+        </OverlayTrigger>
+      </ActionRow>
+    </RadioSet>
+  </Form.Group>
+  <Hyperlink
+    destination="https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/exercises_tools/create_exercises_and_tools.html#advanced"
+    target="_blank"
+  >
+    <FormattedMessage
+      defaultMessage="Learn more about advanced problem types"
+      description="Label for Learn more about advanced problem types button"
+      id="authoring.problemEditor.advanceProblem.learnMoreButtonLabel.label"
+    />
+  </Hyperlink>
+</Col>
+`;
+
+exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problemType is imageresponse 1`] = `
+<Col
+  className="justify-content-center"
+  md={8}
+  xs={12}
+>
+  <Form.Group
+    className="border rounded text-primary-500 p-0"
+  >
+    <ActionRow
+      className="border-primary-100 border-bottom py-3 pl-2.5 pr-4"
+    >
+      <IconButton
+        alt="Go back"
+        iconAs="Icon"
+        onClick={[Function]}
+      />
+      <ActionRow.Spacer />
+      <Form.Label
+        className="h4"
+      >
+        <FormattedMessage
+          defaultMessage="Advanced problems"
+          description="Title for advanced problem menu"
+          id="authoring.problemEditor.advanceProblem.menu.title"
+        />
+      </Form.Label>
+      <ActionRow.Spacer />
+    </ActionRow>
+    <RadioSet
+      className="px-4"
+      name="advanceTypes"
+      onChange={[Function]}
+      value="imageresponse"
+    >
+      <ActionRow
+        className="border-primary-100 border-bottom m-0 py-3 w-100"
+        key="blankadvanced"
+      >
+        <Radio
+          id="blankadvanced"
+          value="blankadvanced"
+        >
+          Blank problem
+        </Radio>
+        <ActionRow.Spacer />
+      </ActionRow>
+      <ActionRow
+        className="border-primary-100 border-bottom m-0 py-3 w-100"
+        key="circuitschematic"
+      >
+        <Radio
+          id="circuitschematic"
+          value="circuitschematic"
+        >
+          Circuit schematic builder
+        </Radio>
+        <ActionRow.Spacer />
+        <OverlayTrigger
+          overlay={
+            <Tooltip
+              id="tooltip-adv-circuitschematic"
+            >
+              <div
+                className="text-left"
+              >
+                {supportStatus,  select,
+      Provisional {Provisionally supported tools might lack the robustness of functionality
+        that your courses require. edX does not have control over the quality of the software,
+        or of the content that can be provided using these tools.
+        
+ 
+
+        Test these tools thoroughly before using them in your course, especially in graded
+        sections. Complete documentstion might not be available for provisionally supported
+        tools, or documentation might be available from sources other than edX.}
+      Not_supported {Tools with no support are not maintained by edX, and might be deprecated
+        in the future. They are not recommened for use in courses due to non-compliance with one
+        or more of the base requirements, such as testing, accessibility, internationalization,
+        and documentation.}
+      other { } 
+    }
+              </div>
+            </Tooltip>
+          }
+          placement="right"
+        >
+          <div
+            className="text-gray-500"
+          >
+            Not supported
+          </div>
+        </OverlayTrigger>
+      </ActionRow>
+      <ActionRow
+        className="border-primary-100 border-bottom m-0 py-3 w-100"
+        key="jsinputresponse"
+      >
+        <Radio
+          id="jsinputresponse"
+          value="jsinputresponse"
+        >
+          Custom JavaScript display and grading
+        </Radio>
+        <ActionRow.Spacer />
+      </ActionRow>
+      <ActionRow
+        className="border-primary-100 border-bottom m-0 py-3 w-100"
+        key="customgrader"
+      >
+        <Radio
+          id="customgrader"
+          value="customgrader"
+        >
+          Custom Python-evaluated input
+        </Radio>
+        <ActionRow.Spacer />
+        <OverlayTrigger
+          overlay={
+            <Tooltip
+              id="tooltip-adv-customgrader"
+            >
+              <div
+                className="text-left"
+              >
+                {supportStatus,  select,
+      Provisional {Provisionally supported tools might lack the robustness of functionality
+        that your courses require. edX does not have control over the quality of the software,
+        or of the content that can be provided using these tools.
+        
+ 
+
+        Test these tools thoroughly before using them in your course, especially in graded
+        sections. Complete documentstion might not be available for provisionally supported
+        tools, or documentation might be available from sources other than edX.}
+      Not_supported {Tools with no support are not maintained by edX, and might be deprecated
+        in the future. They are not recommened for use in courses due to non-compliance with one
+        or more of the base requirements, such as testing, accessibility, internationalization,
+        and documentation.}
+      other { } 
+    }
+              </div>
+            </Tooltip>
+          }
+          placement="right"
+        >
+          <div
+            className="text-gray-500"
+          >
+            Provisional
+          </div>
+        </OverlayTrigger>
+      </ActionRow>
+      <ActionRow
+        className="border-primary-100 border-bottom m-0 py-3 w-100"
+        key="imageresponse"
+      >
+        <Radio
+          id="imageresponse"
+          value="imageresponse"
+        >
+          Image mapped input
+        </Radio>
+        <ActionRow.Spacer />
+        <OverlayTrigger
+          overlay={
+            <Tooltip
+              id="tooltip-adv-imageresponse"
+            >
+              <div
+                className="text-left"
+              >
+                {supportStatus,  select,
+      Provisional {Provisionally supported tools might lack the robustness of functionality
+        that your courses require. edX does not have control over the quality of the software,
+        or of the content that can be provided using these tools.
+        
+ 
+
+        Test these tools thoroughly before using them in your course, especially in graded
+        sections. Complete documentstion might not be available for provisionally supported
+        tools, or documentation might be available from sources other than edX.}
+      Not_supported {Tools with no support are not maintained by edX, and might be deprecated
+        in the future. They are not recommened for use in courses due to non-compliance with one
+        or more of the base requirements, such as testing, accessibility, internationalization,
+        and documentation.}
+      other { } 
+    }
+              </div>
+            </Tooltip>
+          }
+          placement="right"
+        >
+          <div
+            className="text-gray-500"
+          >
+            Not supported
+          </div>
+        </OverlayTrigger>
+      </ActionRow>
+      <ActionRow
+        className="border-primary-100 border-bottom m-0 py-3 w-100"
+        key="formularesponse"
+      >
+        <Radio
+          id="formularesponse"
+          value="formularesponse"
+        >
+          Math expression input
+        </Radio>
+        <ActionRow.Spacer />
+      </ActionRow>
+      <ActionRow
+        className="border-primary-100 border-bottom m-0 py-3 w-100"
+        key="problemwithhint"
+      >
+        <Radio
+          id="problemwithhint"
+          value="problemwithhint"
+        >
+          Problem with adaptive hint
+        </Radio>
+        <ActionRow.Spacer />
+        <OverlayTrigger
+          overlay={
+            <Tooltip
+              id="tooltip-adv-problemwithhint"
+            >
+              <div
+                className="text-left"
+              >
+                {supportStatus,  select,
+      Provisional {Provisionally supported tools might lack the robustness of functionality
+        that your courses require. edX does not have control over the quality of the software,
+        or of the content that can be provided using these tools.
+        
+ 
+
+        Test these tools thoroughly before using them in your course, especially in graded
+        sections. Complete documentstion might not be available for provisionally supported
+        tools, or documentation might be available from sources other than edX.}
+      Not_supported {Tools with no support are not maintained by edX, and might be deprecated
+        in the future. They are not recommened for use in courses due to non-compliance with one
+        or more of the base requirements, such as testing, accessibility, internationalization,
+        and documentation.}
+      other { } 
+    }
+              </div>
+            </Tooltip>
+          }
+          placement="right"
+        >
+          <div
+            className="text-gray-500"
+          >
+            Not supported
+          </div>
+        </OverlayTrigger>
+      </ActionRow>
+    </RadioSet>
+  </Form.Group>
+  <Hyperlink
+    destination="https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/exercises_tools/create_exercises_and_tools.html#advanced"
+    target="_blank"
+  >
+    <FormattedMessage
+      defaultMessage="Learn more about advanced problem types"
+      description="Label for Learn more about advanced problem types button"
+      id="authoring.problemEditor.advanceProblem.learnMoreButtonLabel.label"
+    />
+  </Hyperlink>
+</Col>
+`;
+
+exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problemType is jsinputresponse 1`] = `
+<Col
+  className="justify-content-center"
+  md={8}
+  xs={12}
+>
+  <Form.Group
+    className="border rounded text-primary-500 p-0"
+  >
+    <ActionRow
+      className="border-primary-100 border-bottom py-3 pl-2.5 pr-4"
+    >
+      <IconButton
+        alt="Go back"
+        iconAs="Icon"
+        onClick={[Function]}
+      />
+      <ActionRow.Spacer />
+      <Form.Label
+        className="h4"
+      >
+        <FormattedMessage
+          defaultMessage="Advanced problems"
+          description="Title for advanced problem menu"
+          id="authoring.problemEditor.advanceProblem.menu.title"
+        />
+      </Form.Label>
+      <ActionRow.Spacer />
+    </ActionRow>
+    <RadioSet
+      className="px-4"
+      name="advanceTypes"
+      onChange={[Function]}
+      value="jsinputresponse"
+    >
+      <ActionRow
+        className="border-primary-100 border-bottom m-0 py-3 w-100"
+        key="blankadvanced"
+      >
+        <Radio
+          id="blankadvanced"
+          value="blankadvanced"
+        >
+          Blank problem
+        </Radio>
+        <ActionRow.Spacer />
+      </ActionRow>
+      <ActionRow
+        className="border-primary-100 border-bottom m-0 py-3 w-100"
+        key="circuitschematic"
+      >
+        <Radio
+          id="circuitschematic"
+          value="circuitschematic"
+        >
+          Circuit schematic builder
+        </Radio>
+        <ActionRow.Spacer />
+        <OverlayTrigger
+          overlay={
+            <Tooltip
+              id="tooltip-adv-circuitschematic"
+            >
+              <div
+                className="text-left"
+              >
+                {supportStatus,  select,
+      Provisional {Provisionally supported tools might lack the robustness of functionality
+        that your courses require. edX does not have control over the quality of the software,
+        or of the content that can be provided using these tools.
+        
+ 
+
+        Test these tools thoroughly before using them in your course, especially in graded
+        sections. Complete documentstion might not be available for provisionally supported
+        tools, or documentation might be available from sources other than edX.}
+      Not_supported {Tools with no support are not maintained by edX, and might be deprecated
+        in the future. They are not recommened for use in courses due to non-compliance with one
+        or more of the base requirements, such as testing, accessibility, internationalization,
+        and documentation.}
+      other { } 
+    }
+              </div>
+            </Tooltip>
+          }
+          placement="right"
+        >
+          <div
+            className="text-gray-500"
+          >
+            Not supported
+          </div>
+        </OverlayTrigger>
+      </ActionRow>
+      <ActionRow
+        className="border-primary-100 border-bottom m-0 py-3 w-100"
+        key="jsinputresponse"
+      >
+        <Radio
+          id="jsinputresponse"
+          value="jsinputresponse"
+        >
+          Custom JavaScript display and grading
+        </Radio>
+        <ActionRow.Spacer />
+      </ActionRow>
+      <ActionRow
+        className="border-primary-100 border-bottom m-0 py-3 w-100"
+        key="customgrader"
+      >
+        <Radio
+          id="customgrader"
+          value="customgrader"
+        >
+          Custom Python-evaluated input
+        </Radio>
+        <ActionRow.Spacer />
+        <OverlayTrigger
+          overlay={
+            <Tooltip
+              id="tooltip-adv-customgrader"
+            >
+              <div
+                className="text-left"
+              >
+                {supportStatus,  select,
+      Provisional {Provisionally supported tools might lack the robustness of functionality
+        that your courses require. edX does not have control over the quality of the software,
+        or of the content that can be provided using these tools.
+        
+ 
+
+        Test these tools thoroughly before using them in your course, especially in graded
+        sections. Complete documentstion might not be available for provisionally supported
+        tools, or documentation might be available from sources other than edX.}
+      Not_supported {Tools with no support are not maintained by edX, and might be deprecated
+        in the future. They are not recommened for use in courses due to non-compliance with one
+        or more of the base requirements, such as testing, accessibility, internationalization,
+        and documentation.}
+      other { } 
+    }
+              </div>
+            </Tooltip>
+          }
+          placement="right"
+        >
+          <div
+            className="text-gray-500"
+          >
+            Provisional
+          </div>
+        </OverlayTrigger>
+      </ActionRow>
+      <ActionRow
+        className="border-primary-100 border-bottom m-0 py-3 w-100"
+        key="imageresponse"
+      >
+        <Radio
+          id="imageresponse"
+          value="imageresponse"
+        >
+          Image mapped input
+        </Radio>
+        <ActionRow.Spacer />
+        <OverlayTrigger
+          overlay={
+            <Tooltip
+              id="tooltip-adv-imageresponse"
+            >
+              <div
+                className="text-left"
+              >
+                {supportStatus,  select,
+      Provisional {Provisionally supported tools might lack the robustness of functionality
+        that your courses require. edX does not have control over the quality of the software,
+        or of the content that can be provided using these tools.
+        
+ 
+
+        Test these tools thoroughly before using them in your course, especially in graded
+        sections. Complete documentstion might not be available for provisionally supported
+        tools, or documentation might be available from sources other than edX.}
+      Not_supported {Tools with no support are not maintained by edX, and might be deprecated
+        in the future. They are not recommened for use in courses due to non-compliance with one
+        or more of the base requirements, such as testing, accessibility, internationalization,
+        and documentation.}
+      other { } 
+    }
+              </div>
+            </Tooltip>
+          }
+          placement="right"
+        >
+          <div
+            className="text-gray-500"
+          >
+            Not supported
+          </div>
+        </OverlayTrigger>
+      </ActionRow>
+      <ActionRow
+        className="border-primary-100 border-bottom m-0 py-3 w-100"
+        key="formularesponse"
+      >
+        <Radio
+          id="formularesponse"
+          value="formularesponse"
+        >
+          Math expression input
+        </Radio>
+        <ActionRow.Spacer />
+      </ActionRow>
+      <ActionRow
+        className="border-primary-100 border-bottom m-0 py-3 w-100"
+        key="problemwithhint"
+      >
+        <Radio
+          id="problemwithhint"
+          value="problemwithhint"
+        >
+          Problem with adaptive hint
+        </Radio>
+        <ActionRow.Spacer />
+        <OverlayTrigger
+          overlay={
+            <Tooltip
+              id="tooltip-adv-problemwithhint"
+            >
+              <div
+                className="text-left"
+              >
+                {supportStatus,  select,
+      Provisional {Provisionally supported tools might lack the robustness of functionality
+        that your courses require. edX does not have control over the quality of the software,
+        or of the content that can be provided using these tools.
+        
+ 
+
+        Test these tools thoroughly before using them in your course, especially in graded
+        sections. Complete documentstion might not be available for provisionally supported
+        tools, or documentation might be available from sources other than edX.}
+      Not_supported {Tools with no support are not maintained by edX, and might be deprecated
+        in the future. They are not recommened for use in courses due to non-compliance with one
+        or more of the base requirements, such as testing, accessibility, internationalization,
+        and documentation.}
+      other { } 
+    }
+              </div>
+            </Tooltip>
+          }
+          placement="right"
+        >
+          <div
+            className="text-gray-500"
+          >
+            Not supported
+          </div>
+        </OverlayTrigger>
+      </ActionRow>
+    </RadioSet>
+  </Form.Group>
+  <Hyperlink
+    destination="https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/exercises_tools/create_exercises_and_tools.html#advanced"
+    target="_blank"
+  >
+    <FormattedMessage
+      defaultMessage="Learn more about advanced problem types"
+      description="Label for Learn more about advanced problem types button"
+      id="authoring.problemEditor.advanceProblem.learnMoreButtonLabel.label"
+    />
+  </Hyperlink>
+</Col>
+`;
+
+exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problemType is problemwithhint 1`] = `
+<Col
+  className="justify-content-center"
+  md={8}
+  xs={12}
+>
+  <Form.Group
+    className="border rounded text-primary-500 p-0"
+  >
+    <ActionRow
+      className="border-primary-100 border-bottom py-3 pl-2.5 pr-4"
+    >
+      <IconButton
+        alt="Go back"
+        iconAs="Icon"
+        onClick={[Function]}
+      />
+      <ActionRow.Spacer />
+      <Form.Label
+        className="h4"
+      >
+        <FormattedMessage
+          defaultMessage="Advanced problems"
+          description="Title for advanced problem menu"
+          id="authoring.problemEditor.advanceProblem.menu.title"
+        />
+      </Form.Label>
+      <ActionRow.Spacer />
+    </ActionRow>
+    <RadioSet
+      className="px-4"
+      name="advanceTypes"
+      onChange={[Function]}
+      value="problemwithhint"
+    >
+      <ActionRow
+        className="border-primary-100 border-bottom m-0 py-3 w-100"
+        key="blankadvanced"
+      >
+        <Radio
+          id="blankadvanced"
+          value="blankadvanced"
+        >
+          Blank problem
+        </Radio>
+        <ActionRow.Spacer />
+      </ActionRow>
+      <ActionRow
+        className="border-primary-100 border-bottom m-0 py-3 w-100"
+        key="circuitschematic"
+      >
+        <Radio
+          id="circuitschematic"
+          value="circuitschematic"
+        >
+          Circuit schematic builder
+        </Radio>
+        <ActionRow.Spacer />
+        <OverlayTrigger
+          overlay={
+            <Tooltip
+              id="tooltip-adv-circuitschematic"
+            >
+              <div
+                className="text-left"
+              >
+                {supportStatus,  select,
+      Provisional {Provisionally supported tools might lack the robustness of functionality
+        that your courses require. edX does not have control over the quality of the software,
+        or of the content that can be provided using these tools.
+        
+ 
+
+        Test these tools thoroughly before using them in your course, especially in graded
+        sections. Complete documentstion might not be available for provisionally supported
+        tools, or documentation might be available from sources other than edX.}
+      Not_supported {Tools with no support are not maintained by edX, and might be deprecated
+        in the future. They are not recommened for use in courses due to non-compliance with one
+        or more of the base requirements, such as testing, accessibility, internationalization,
+        and documentation.}
+      other { } 
+    }
+              </div>
+            </Tooltip>
+          }
+          placement="right"
+        >
+          <div
+            className="text-gray-500"
+          >
+            Not supported
+          </div>
+        </OverlayTrigger>
+      </ActionRow>
+      <ActionRow
+        className="border-primary-100 border-bottom m-0 py-3 w-100"
+        key="jsinputresponse"
+      >
+        <Radio
+          id="jsinputresponse"
+          value="jsinputresponse"
+        >
+          Custom JavaScript display and grading
+        </Radio>
+        <ActionRow.Spacer />
+      </ActionRow>
+      <ActionRow
+        className="border-primary-100 border-bottom m-0 py-3 w-100"
+        key="customgrader"
+      >
+        <Radio
+          id="customgrader"
+          value="customgrader"
+        >
+          Custom Python-evaluated input
+        </Radio>
+        <ActionRow.Spacer />
+        <OverlayTrigger
+          overlay={
+            <Tooltip
+              id="tooltip-adv-customgrader"
+            >
+              <div
+                className="text-left"
+              >
+                {supportStatus,  select,
+      Provisional {Provisionally supported tools might lack the robustness of functionality
+        that your courses require. edX does not have control over the quality of the software,
+        or of the content that can be provided using these tools.
+        
+ 
+
+        Test these tools thoroughly before using them in your course, especially in graded
+        sections. Complete documentstion might not be available for provisionally supported
+        tools, or documentation might be available from sources other than edX.}
+      Not_supported {Tools with no support are not maintained by edX, and might be deprecated
+        in the future. They are not recommened for use in courses due to non-compliance with one
+        or more of the base requirements, such as testing, accessibility, internationalization,
+        and documentation.}
+      other { } 
+    }
+              </div>
+            </Tooltip>
+          }
+          placement="right"
+        >
+          <div
+            className="text-gray-500"
+          >
+            Provisional
+          </div>
+        </OverlayTrigger>
+      </ActionRow>
+      <ActionRow
+        className="border-primary-100 border-bottom m-0 py-3 w-100"
+        key="imageresponse"
+      >
+        <Radio
+          id="imageresponse"
+          value="imageresponse"
+        >
+          Image mapped input
+        </Radio>
+        <ActionRow.Spacer />
+        <OverlayTrigger
+          overlay={
+            <Tooltip
+              id="tooltip-adv-imageresponse"
+            >
+              <div
+                className="text-left"
+              >
+                {supportStatus,  select,
+      Provisional {Provisionally supported tools might lack the robustness of functionality
+        that your courses require. edX does not have control over the quality of the software,
+        or of the content that can be provided using these tools.
+        
+ 
+
+        Test these tools thoroughly before using them in your course, especially in graded
+        sections. Complete documentstion might not be available for provisionally supported
+        tools, or documentation might be available from sources other than edX.}
+      Not_supported {Tools with no support are not maintained by edX, and might be deprecated
+        in the future. They are not recommened for use in courses due to non-compliance with one
+        or more of the base requirements, such as testing, accessibility, internationalization,
+        and documentation.}
+      other { } 
+    }
+              </div>
+            </Tooltip>
+          }
+          placement="right"
+        >
+          <div
+            className="text-gray-500"
+          >
+            Not supported
+          </div>
+        </OverlayTrigger>
+      </ActionRow>
+      <ActionRow
+        className="border-primary-100 border-bottom m-0 py-3 w-100"
+        key="formularesponse"
+      >
+        <Radio
+          id="formularesponse"
+          value="formularesponse"
+        >
+          Math expression input
+        </Radio>
+        <ActionRow.Spacer />
+      </ActionRow>
+      <ActionRow
+        className="border-primary-100 border-bottom m-0 py-3 w-100"
+        key="problemwithhint"
+      >
+        <Radio
+          id="problemwithhint"
+          value="problemwithhint"
+        >
+          Problem with adaptive hint
+        </Radio>
+        <ActionRow.Spacer />
+        <OverlayTrigger
+          overlay={
+            <Tooltip
+              id="tooltip-adv-problemwithhint"
+            >
+              <div
+                className="text-left"
+              >
+                {supportStatus,  select,
+      Provisional {Provisionally supported tools might lack the robustness of functionality
+        that your courses require. edX does not have control over the quality of the software,
+        or of the content that can be provided using these tools.
+        
+ 
+
+        Test these tools thoroughly before using them in your course, especially in graded
+        sections. Complete documentstion might not be available for provisionally supported
+        tools, or documentation might be available from sources other than edX.}
+      Not_supported {Tools with no support are not maintained by edX, and might be deprecated
+        in the future. They are not recommened for use in courses due to non-compliance with one
+        or more of the base requirements, such as testing, accessibility, internationalization,
+        and documentation.}
+      other { } 
+    }
+              </div>
+            </Tooltip>
+          }
+          placement="right"
+        >
+          <div
+            className="text-gray-500"
+          >
+            Not supported
+          </div>
+        </OverlayTrigger>
+      </ActionRow>
+    </RadioSet>
+  </Form.Group>
+  <Hyperlink
+    destination="https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/exercises_tools/create_exercises_and_tools.html#advanced"
+    target="_blank"
+  >
+    <FormattedMessage
+      defaultMessage="Learn more about advanced problem types"
+      description="Label for Learn more about advanced problem types button"
+      id="authoring.problemEditor.advanceProblem.learnMoreButtonLabel.label"
+    />
+  </Hyperlink>
+</Col>
+`;
diff --git a/src/editors/containers/ProblemEditor/components/SelectTypeModal/content/__snapshots__/Preview.test.jsx.snap b/src/editors/containers/ProblemEditor/components/SelectTypeModal/content/__snapshots__/Preview.test.jsx.snap
new file mode 100644
index 0000000000..16dd56b0f8
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/SelectTypeModal/content/__snapshots__/Preview.test.jsx.snap
@@ -0,0 +1,233 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Preview snapshots snapshots: renders as expected with default props 1`] = `null`;
+
+exports[`Preview snapshots snapshots: renders as expected with problemType is choiceresponse 1`] = `
+<Container
+  className="bg-light-300 rounded p-4"
+  style={
+    {
+      "height": "400px",
+      "width": "494px",
+    }
+  }
+>
+  <div
+    className="small"
+  >
+    Multi-select problem
+  </div>
+  <Image
+    alt="A preview illustration of a {problemType, select,
+      multiplechoiceresponse {single select}
+      stringreponse {text input}
+      numericalresponse {numerical input}
+      optionresponse {dropdown}
+      choiceresponse {multiple select}
+      other {null}
+    } problem"
+    className="my-3"
+    fluid={true}
+    src="test-file-stub"
+  />
+  <div
+    className="mb-3"
+  >
+    Learners must select all correct answers from a list of possible options.
+  </div>
+  <Hyperlink
+    destination="https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/exercises_tools/checkbox.html"
+    target="_blank"
+  >
+    <FormattedMessage
+      defaultMessage="Learn more"
+      description="Label for Learn more button"
+      id="authoring.problemEditor.learnMoreButtonLabel.label"
+    />
+  </Hyperlink>
+</Container>
+`;
+
+exports[`Preview snapshots snapshots: renders as expected with problemType is multiplechoiceresponse 1`] = `
+<Container
+  className="bg-light-300 rounded p-4"
+  style={
+    {
+      "height": "400px",
+      "width": "494px",
+    }
+  }
+>
+  <div
+    className="small"
+  >
+    Single select problem
+  </div>
+  <Image
+    alt="A preview illustration of a {problemType, select,
+      multiplechoiceresponse {single select}
+      stringreponse {text input}
+      numericalresponse {numerical input}
+      optionresponse {dropdown}
+      choiceresponse {multiple select}
+      other {null}
+    } problem"
+    className="my-3"
+    fluid={true}
+    src="test-file-stub"
+  />
+  <div
+    className="mb-3"
+  >
+    Learners must select the correct answer from a list of possible options.
+  </div>
+  <Hyperlink
+    destination="https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/exercises_tools/multiple_choice.html"
+    target="_blank"
+  >
+    <FormattedMessage
+      defaultMessage="Learn more"
+      description="Label for Learn more button"
+      id="authoring.problemEditor.learnMoreButtonLabel.label"
+    />
+  </Hyperlink>
+</Container>
+`;
+
+exports[`Preview snapshots snapshots: renders as expected with problemType is numericalresponse 1`] = `
+<Container
+  className="bg-light-300 rounded p-4"
+  style={
+    {
+      "height": "400px",
+      "width": "494px",
+    }
+  }
+>
+  <div
+    className="small"
+  >
+    Numerical input problem
+  </div>
+  <Image
+    alt="A preview illustration of a {problemType, select,
+      multiplechoiceresponse {single select}
+      stringreponse {text input}
+      numericalresponse {numerical input}
+      optionresponse {dropdown}
+      choiceresponse {multiple select}
+      other {null}
+    } problem"
+    className="my-3"
+    fluid={true}
+    src="test-file-stub"
+  />
+  <div
+    className="mb-3"
+  >
+    Specify one or more correct numeric answers, submitted in a response field.
+  </div>
+  <Hyperlink
+    destination="https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/exercises_tools/numerical_input.html"
+    target="_blank"
+  >
+    <FormattedMessage
+      defaultMessage="Learn more"
+      description="Label for Learn more button"
+      id="authoring.problemEditor.learnMoreButtonLabel.label"
+    />
+  </Hyperlink>
+</Container>
+`;
+
+exports[`Preview snapshots snapshots: renders as expected with problemType is optionresponse 1`] = `
+<Container
+  className="bg-light-300 rounded p-4"
+  style={
+    {
+      "height": "400px",
+      "width": "494px",
+    }
+  }
+>
+  <div
+    className="small"
+  >
+    Dropdown problem
+  </div>
+  <Image
+    alt="A preview illustration of a {problemType, select,
+      multiplechoiceresponse {single select}
+      stringreponse {text input}
+      numericalresponse {numerical input}
+      optionresponse {dropdown}
+      choiceresponse {multiple select}
+      other {null}
+    } problem"
+    className="my-3"
+    fluid={true}
+    src="test-file-stub"
+  />
+  <div
+    className="mb-3"
+  >
+    Learners must select the correct answer from a list of possible options
+  </div>
+  <Hyperlink
+    destination="https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/exercises_tools/dropdown.html"
+    target="_blank"
+  >
+    <FormattedMessage
+      defaultMessage="Learn more"
+      description="Label for Learn more button"
+      id="authoring.problemEditor.learnMoreButtonLabel.label"
+    />
+  </Hyperlink>
+</Container>
+`;
+
+exports[`Preview snapshots snapshots: renders as expected with problemType is stringresponse 1`] = `
+<Container
+  className="bg-light-300 rounded p-4"
+  style={
+    {
+      "height": "400px",
+      "width": "494px",
+    }
+  }
+>
+  <div
+    className="small"
+  >
+    Text input problem
+  </div>
+  <Image
+    alt="A preview illustration of a {problemType, select,
+      multiplechoiceresponse {single select}
+      stringreponse {text input}
+      numericalresponse {numerical input}
+      optionresponse {dropdown}
+      choiceresponse {multiple select}
+      other {null}
+    } problem"
+    className="my-3"
+    fluid={true}
+    src="test-file-stub"
+  />
+  <div
+    className="mb-3"
+  >
+    Specify one or more correct text answers, including numbers and special characters, submitted in a response field.
+  </div>
+  <Hyperlink
+    destination="https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/exercises_tools/text_input.html"
+    target="_blank"
+  >
+    <FormattedMessage
+      defaultMessage="Learn more"
+      description="Label for Learn more button"
+      id="authoring.problemEditor.learnMoreButtonLabel.label"
+    />
+  </Hyperlink>
+</Container>
+`;
diff --git a/src/editors/containers/ProblemEditor/components/SelectTypeModal/content/__snapshots__/ProblemTypeSelect.test.tsx.snap b/src/editors/containers/ProblemEditor/components/SelectTypeModal/content/__snapshots__/ProblemTypeSelect.test.tsx.snap
new file mode 100644
index 0000000000..f21b392688
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/SelectTypeModal/content/__snapshots__/ProblemTypeSelect.test.tsx.snap
@@ -0,0 +1,531 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ProblemTypeSelect snapshot DROPDOWN 1`] = `
+<Container
+  style={
+    {
+      "height": "400px",
+      "width": "494px",
+    }
+  }
+>
+  <ForwardRef
+    columns={1}
+    name="problem-type"
+    onChange={[Function]}
+    type="radio"
+    value="optionresponse"
+  >
+    <ForwardRef
+      checked={false}
+      className="border border-light-400 text-primary-500 shadow-none"
+      id="multiplechoiceresponse"
+      inputHidden={true}
+      isIndeterminate={false}
+      isInvalid={false}
+      key="multiplechoiceresponse"
+      onClick={[Function]}
+      onFocus={[Function]}
+      type="radio"
+      value="multiplechoiceresponse"
+    >
+      Single select
+    </ForwardRef>
+    <ForwardRef
+      checked={false}
+      className="border border-light-400 text-primary-500 shadow-none"
+      id="choiceresponse"
+      inputHidden={true}
+      isIndeterminate={false}
+      isInvalid={false}
+      key="choiceresponse"
+      onClick={[Function]}
+      onFocus={[Function]}
+      type="radio"
+      value="choiceresponse"
+    >
+      Multi-select
+    </ForwardRef>
+    <ForwardRef
+      checked={false}
+      className="border border-light-400 text-primary-500 shadow-none"
+      id="optionresponse"
+      inputHidden={true}
+      isIndeterminate={false}
+      isInvalid={false}
+      key="optionresponse"
+      onClick={[Function]}
+      onFocus={[Function]}
+      type="radio"
+      value="optionresponse"
+    >
+      Dropdown
+    </ForwardRef>
+    <ForwardRef
+      checked={false}
+      className="border border-light-400 text-primary-500 shadow-none"
+      id="numericalresponse"
+      inputHidden={true}
+      isIndeterminate={false}
+      isInvalid={false}
+      key="numericalresponse"
+      onClick={[Function]}
+      onFocus={[Function]}
+      type="radio"
+      value="numericalresponse"
+    >
+      Numerical input
+    </ForwardRef>
+    <ForwardRef
+      checked={false}
+      className="border border-light-400 text-primary-500 shadow-none"
+      id="stringresponse"
+      inputHidden={true}
+      isIndeterminate={false}
+      isInvalid={false}
+      key="stringresponse"
+      onClick={[Function]}
+      onFocus={[Function]}
+      type="radio"
+      value="stringresponse"
+    >
+      Text input
+    </ForwardRef>
+  </ForwardRef>
+  <Button
+    className="pl-0 mt-2"
+    onClick={[Function]}
+    variant="link"
+  >
+    <FormattedMessage
+      defaultMessage="Advanced problem types"
+      description="Button label for advance problem types option"
+      id="authoring.problemEditor.problemSelect.advanceButton.label"
+    />
+  </Button>
+</Container>
+`;
+
+exports[`ProblemTypeSelect snapshot MULTISELECT 1`] = `
+<Container
+  style={
+    {
+      "height": "400px",
+      "width": "494px",
+    }
+  }
+>
+  <ForwardRef
+    columns={1}
+    name="problem-type"
+    onChange={[Function]}
+    type="radio"
+    value="choiceresponse"
+  >
+    <ForwardRef
+      checked={false}
+      className="border border-light-400 text-primary-500 shadow-none"
+      id="multiplechoiceresponse"
+      inputHidden={true}
+      isIndeterminate={false}
+      isInvalid={false}
+      key="multiplechoiceresponse"
+      onClick={[Function]}
+      onFocus={[Function]}
+      type="radio"
+      value="multiplechoiceresponse"
+    >
+      Single select
+    </ForwardRef>
+    <ForwardRef
+      checked={false}
+      className="border border-light-400 text-primary-500 shadow-none"
+      id="choiceresponse"
+      inputHidden={true}
+      isIndeterminate={false}
+      isInvalid={false}
+      key="choiceresponse"
+      onClick={[Function]}
+      onFocus={[Function]}
+      type="radio"
+      value="choiceresponse"
+    >
+      Multi-select
+    </ForwardRef>
+    <ForwardRef
+      checked={false}
+      className="border border-light-400 text-primary-500 shadow-none"
+      id="optionresponse"
+      inputHidden={true}
+      isIndeterminate={false}
+      isInvalid={false}
+      key="optionresponse"
+      onClick={[Function]}
+      onFocus={[Function]}
+      type="radio"
+      value="optionresponse"
+    >
+      Dropdown
+    </ForwardRef>
+    <ForwardRef
+      checked={false}
+      className="border border-light-400 text-primary-500 shadow-none"
+      id="numericalresponse"
+      inputHidden={true}
+      isIndeterminate={false}
+      isInvalid={false}
+      key="numericalresponse"
+      onClick={[Function]}
+      onFocus={[Function]}
+      type="radio"
+      value="numericalresponse"
+    >
+      Numerical input
+    </ForwardRef>
+    <ForwardRef
+      checked={false}
+      className="border border-light-400 text-primary-500 shadow-none"
+      id="stringresponse"
+      inputHidden={true}
+      isIndeterminate={false}
+      isInvalid={false}
+      key="stringresponse"
+      onClick={[Function]}
+      onFocus={[Function]}
+      type="radio"
+      value="stringresponse"
+    >
+      Text input
+    </ForwardRef>
+  </ForwardRef>
+  <Button
+    className="pl-0 mt-2"
+    onClick={[Function]}
+    variant="link"
+  >
+    <FormattedMessage
+      defaultMessage="Advanced problem types"
+      description="Button label for advance problem types option"
+      id="authoring.problemEditor.problemSelect.advanceButton.label"
+    />
+  </Button>
+</Container>
+`;
+
+exports[`ProblemTypeSelect snapshot NUMERIC 1`] = `
+<Container
+  style={
+    {
+      "height": "400px",
+      "width": "494px",
+    }
+  }
+>
+  <ForwardRef
+    columns={1}
+    name="problem-type"
+    onChange={[Function]}
+    type="radio"
+    value="numericalresponse"
+  >
+    <ForwardRef
+      checked={false}
+      className="border border-light-400 text-primary-500 shadow-none"
+      id="multiplechoiceresponse"
+      inputHidden={true}
+      isIndeterminate={false}
+      isInvalid={false}
+      key="multiplechoiceresponse"
+      onClick={[Function]}
+      onFocus={[Function]}
+      type="radio"
+      value="multiplechoiceresponse"
+    >
+      Single select
+    </ForwardRef>
+    <ForwardRef
+      checked={false}
+      className="border border-light-400 text-primary-500 shadow-none"
+      id="choiceresponse"
+      inputHidden={true}
+      isIndeterminate={false}
+      isInvalid={false}
+      key="choiceresponse"
+      onClick={[Function]}
+      onFocus={[Function]}
+      type="radio"
+      value="choiceresponse"
+    >
+      Multi-select
+    </ForwardRef>
+    <ForwardRef
+      checked={false}
+      className="border border-light-400 text-primary-500 shadow-none"
+      id="optionresponse"
+      inputHidden={true}
+      isIndeterminate={false}
+      isInvalid={false}
+      key="optionresponse"
+      onClick={[Function]}
+      onFocus={[Function]}
+      type="radio"
+      value="optionresponse"
+    >
+      Dropdown
+    </ForwardRef>
+    <ForwardRef
+      checked={false}
+      className="border border-light-400 text-primary-500 shadow-none"
+      id="numericalresponse"
+      inputHidden={true}
+      isIndeterminate={false}
+      isInvalid={false}
+      key="numericalresponse"
+      onClick={[Function]}
+      onFocus={[Function]}
+      type="radio"
+      value="numericalresponse"
+    >
+      Numerical input
+    </ForwardRef>
+    <ForwardRef
+      checked={false}
+      className="border border-light-400 text-primary-500 shadow-none"
+      id="stringresponse"
+      inputHidden={true}
+      isIndeterminate={false}
+      isInvalid={false}
+      key="stringresponse"
+      onClick={[Function]}
+      onFocus={[Function]}
+      type="radio"
+      value="stringresponse"
+    >
+      Text input
+    </ForwardRef>
+  </ForwardRef>
+  <Button
+    className="pl-0 mt-2"
+    onClick={[Function]}
+    variant="link"
+  >
+    <FormattedMessage
+      defaultMessage="Advanced problem types"
+      description="Button label for advance problem types option"
+      id="authoring.problemEditor.problemSelect.advanceButton.label"
+    />
+  </Button>
+</Container>
+`;
+
+exports[`ProblemTypeSelect snapshot SINGLESELECT 1`] = `
+<Container
+  style={
+    {
+      "height": "400px",
+      "width": "494px",
+    }
+  }
+>
+  <ForwardRef
+    columns={1}
+    name="problem-type"
+    onChange={[Function]}
+    type="radio"
+    value="multiplechoiceresponse"
+  >
+    <ForwardRef
+      checked={false}
+      className="border border-light-400 text-primary-500 shadow-none"
+      id="multiplechoiceresponse"
+      inputHidden={true}
+      isIndeterminate={false}
+      isInvalid={false}
+      key="multiplechoiceresponse"
+      onClick={[Function]}
+      onFocus={[Function]}
+      type="radio"
+      value="multiplechoiceresponse"
+    >
+      Single select
+    </ForwardRef>
+    <ForwardRef
+      checked={false}
+      className="border border-light-400 text-primary-500 shadow-none"
+      id="choiceresponse"
+      inputHidden={true}
+      isIndeterminate={false}
+      isInvalid={false}
+      key="choiceresponse"
+      onClick={[Function]}
+      onFocus={[Function]}
+      type="radio"
+      value="choiceresponse"
+    >
+      Multi-select
+    </ForwardRef>
+    <ForwardRef
+      checked={false}
+      className="border border-light-400 text-primary-500 shadow-none"
+      id="optionresponse"
+      inputHidden={true}
+      isIndeterminate={false}
+      isInvalid={false}
+      key="optionresponse"
+      onClick={[Function]}
+      onFocus={[Function]}
+      type="radio"
+      value="optionresponse"
+    >
+      Dropdown
+    </ForwardRef>
+    <ForwardRef
+      checked={false}
+      className="border border-light-400 text-primary-500 shadow-none"
+      id="numericalresponse"
+      inputHidden={true}
+      isIndeterminate={false}
+      isInvalid={false}
+      key="numericalresponse"
+      onClick={[Function]}
+      onFocus={[Function]}
+      type="radio"
+      value="numericalresponse"
+    >
+      Numerical input
+    </ForwardRef>
+    <ForwardRef
+      checked={false}
+      className="border border-light-400 text-primary-500 shadow-none"
+      id="stringresponse"
+      inputHidden={true}
+      isIndeterminate={false}
+      isInvalid={false}
+      key="stringresponse"
+      onClick={[Function]}
+      onFocus={[Function]}
+      type="radio"
+      value="stringresponse"
+    >
+      Text input
+    </ForwardRef>
+  </ForwardRef>
+  <Button
+    className="pl-0 mt-2"
+    onClick={[Function]}
+    variant="link"
+  >
+    <FormattedMessage
+      defaultMessage="Advanced problem types"
+      description="Button label for advance problem types option"
+      id="authoring.problemEditor.problemSelect.advanceButton.label"
+    />
+  </Button>
+</Container>
+`;
+
+exports[`ProblemTypeSelect snapshot TEXTINPUT 1`] = `
+<Container
+  style={
+    {
+      "height": "400px",
+      "width": "494px",
+    }
+  }
+>
+  <ForwardRef
+    columns={1}
+    name="problem-type"
+    onChange={[Function]}
+    type="radio"
+    value="stringresponse"
+  >
+    <ForwardRef
+      checked={false}
+      className="border border-light-400 text-primary-500 shadow-none"
+      id="multiplechoiceresponse"
+      inputHidden={true}
+      isIndeterminate={false}
+      isInvalid={false}
+      key="multiplechoiceresponse"
+      onClick={[Function]}
+      onFocus={[Function]}
+      type="radio"
+      value="multiplechoiceresponse"
+    >
+      Single select
+    </ForwardRef>
+    <ForwardRef
+      checked={false}
+      className="border border-light-400 text-primary-500 shadow-none"
+      id="choiceresponse"
+      inputHidden={true}
+      isIndeterminate={false}
+      isInvalid={false}
+      key="choiceresponse"
+      onClick={[Function]}
+      onFocus={[Function]}
+      type="radio"
+      value="choiceresponse"
+    >
+      Multi-select
+    </ForwardRef>
+    <ForwardRef
+      checked={false}
+      className="border border-light-400 text-primary-500 shadow-none"
+      id="optionresponse"
+      inputHidden={true}
+      isIndeterminate={false}
+      isInvalid={false}
+      key="optionresponse"
+      onClick={[Function]}
+      onFocus={[Function]}
+      type="radio"
+      value="optionresponse"
+    >
+      Dropdown
+    </ForwardRef>
+    <ForwardRef
+      checked={false}
+      className="border border-light-400 text-primary-500 shadow-none"
+      id="numericalresponse"
+      inputHidden={true}
+      isIndeterminate={false}
+      isInvalid={false}
+      key="numericalresponse"
+      onClick={[Function]}
+      onFocus={[Function]}
+      type="radio"
+      value="numericalresponse"
+    >
+      Numerical input
+    </ForwardRef>
+    <ForwardRef
+      checked={false}
+      className="border border-light-400 text-primary-500 shadow-none"
+      id="stringresponse"
+      inputHidden={true}
+      isIndeterminate={false}
+      isInvalid={false}
+      key="stringresponse"
+      onClick={[Function]}
+      onFocus={[Function]}
+      type="radio"
+      value="stringresponse"
+    >
+      Text input
+    </ForwardRef>
+  </ForwardRef>
+  <Button
+    className="pl-0 mt-2"
+    onClick={[Function]}
+    variant="link"
+  >
+    <FormattedMessage
+      defaultMessage="Advanced problem types"
+      description="Button label for advance problem types option"
+      id="authoring.problemEditor.problemSelect.advanceButton.label"
+    />
+  </Button>
+</Container>
+`;
diff --git a/src/editors/containers/ProblemEditor/components/SelectTypeModal/content/messages.ts b/src/editors/containers/ProblemEditor/components/SelectTypeModal/content/messages.ts
new file mode 100644
index 0000000000..66873921de
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/SelectTypeModal/content/messages.ts
@@ -0,0 +1,82 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+
+  advanceProblemButtonLabel: {
+    id: 'authoring.problemEditor.problemSelect.advanceButton.label',
+    defaultMessage: 'Advanced problem types',
+    description: 'Button label for advance problem types option',
+  },
+  advanceMenuTitle: {
+    id: 'authoring.problemEditor.advanceProblem.menu.title',
+    defaultMessage: 'Advanced problems',
+    description: 'Title for advanced problem menu',
+  },
+  advanceMenuGoBack: {
+    id: 'authoring.problemEditor.advanceProblem.menu.goBack',
+    defaultMessage: 'Go back',
+    description: 'Return to the previous menu that shows basic problem types',
+  },
+  advanceProblemTypeLabel: {
+    id: 'authoring.problemEditor.advanceProblem.problemType.label',
+    defaultMessage: '{problemType}',
+    description: 'Label for advance problem type radio select',
+  },
+  problemSupportStatus: {
+    id: 'authoring.problemEditor.advanceProblem.supportStatus',
+    defaultMessage: '{supportStatus}',
+    description: 'Text for advance problem type\'s support status',
+  },
+  supportStatusTooltipMessage: {
+    id: 'authoring.problemEditor.advanceProblem.supportStatus.tooltipMessage',
+    defaultMessage: `{supportStatus,  select,
+      Provisional {Provisionally supported tools might lack the robustness of functionality
+        that your courses require. edX does not have control over the quality of the software,
+        or of the content that can be provided using these tools.
+        \n \n
+        Test these tools thoroughly before using them in your course, especially in graded
+        sections. Complete documentstion might not be available for provisionally supported
+        tools, or documentation might be available from sources other than edX.}
+      Not_supported {Tools with no support are not maintained by edX, and might be deprecated
+        in the future. They are not recommened for use in courses due to non-compliance with one
+        or more of the base requirements, such as testing, accessibility, internationalization,
+        and documentation.}
+      other { } 
+    }`,
+    description: 'Message for support status tooltip',
+  },
+  previewTitle: {
+    id: 'authoring.problemEditor.preview.title',
+    defaultMessage: '{previewTitle} problem',
+    description: 'Title for the problem preview column',
+  },
+  previewAltText: {
+    id: 'authoring.problemEditor.preview.altText',
+    defaultMessage: `A preview illustration of a {problemType, select,
+      multiplechoiceresponse {single select}
+      stringreponse {text input}
+      numericalresponse {numerical input}
+      optionresponse {dropdown}
+      choiceresponse {multiple select}
+      other {null}
+    } problem`,
+    description: 'Alt text for the illustration of the problem preview',
+  },
+  previewDescription: {
+    id: 'authoring.problemEditor.preview.description',
+    defaultMessage: '{previewDescription}',
+    description: 'Description of the selected problem type',
+  },
+  learnMoreButtonLabel: {
+    id: 'authoring.problemEditor.learnMoreButtonLabel.label',
+    defaultMessage: 'Learn more',
+    description: 'Label for Learn more button',
+  },
+  learnMoreAdvancedButtonLabel: {
+    id: 'authoring.problemEditor.advanceProblem.learnMoreButtonLabel.label',
+    defaultMessage: 'Learn more about advanced problem types',
+    description: 'Label for Learn more about advanced problem types button',
+  },
+});
+
+export default messages;
diff --git a/src/editors/containers/ProblemEditor/components/SelectTypeModal/hooks.js b/src/editors/containers/ProblemEditor/components/SelectTypeModal/hooks.js
new file mode 100644
index 0000000000..a2165da8cf
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/SelectTypeModal/hooks.js
@@ -0,0 +1,60 @@
+import { useEffect } from 'react';
+import {
+  AdvanceProblemKeys, AdvanceProblems, ProblemTypeKeys, ProblemTypes,
+} from '../../../../data/constants/problem';
+import { snakeCaseKeys } from '../../../../utils';
+import { getDataFromOlx } from '../../../../data/redux/thunkActions/problem';
+
+export const onSelect = ({
+  selected,
+  updateField,
+  setBlockTitle,
+  defaultSettings,
+}) => () => {
+  if (Object.values(AdvanceProblemKeys).includes(selected)) {
+    updateField({ problemType: ProblemTypeKeys.ADVANCED, rawOLX: AdvanceProblems[selected].template });
+    setBlockTitle(AdvanceProblems[selected].title);
+  } else {
+    const newOLX = ProblemTypes[selected].template;
+    const newState = getDataFromOlx({
+      rawOLX: newOLX,
+      rawSettings: {
+        weight: 1,
+        attempts_before_showanswer_button: 0,
+        show_reset_button: null,
+        showanswer: null,
+        defaultToAdvanced: false,
+      },
+      defaultSettings: snakeCaseKeys(defaultSettings),
+    });
+    updateField(newState);
+    setBlockTitle(ProblemTypes[selected].title);
+  }
+};
+
+export const useArrowNav = (selected, setSelected) => {
+  const detectKeyDown = (e) => {
+    const problemTypeValues = Object.values(ProblemTypeKeys);
+    switch (e.key) {
+      case 'ArrowUp':
+        if (problemTypeValues.includes(selected) && ProblemTypes[selected].prev) {
+          setSelected(ProblemTypes[selected].prev);
+          document.getElementById(ProblemTypes[selected].prev).focus();
+        }
+        break;
+      case 'ArrowDown':
+        if (problemTypeValues.includes(selected) && ProblemTypes[selected].next) {
+          setSelected(ProblemTypes[selected].next);
+          document.getElementById(ProblemTypes[selected].next).focus();
+        }
+        break;
+      default:
+    }
+  };
+  useEffect(() => {
+    document.addEventListener('keydown', detectKeyDown, true);
+    return () => {
+      document.removeEventListener('keydown', detectKeyDown, true);
+    };
+  }, [selected, setSelected]);
+};
diff --git a/src/editors/containers/ProblemEditor/components/SelectTypeModal/hooks.test.js b/src/editors/containers/ProblemEditor/components/SelectTypeModal/hooks.test.js
new file mode 100644
index 0000000000..0c7f987f4c
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/SelectTypeModal/hooks.test.js
@@ -0,0 +1,176 @@
+/* eslint-disable prefer-destructuring */
+import React from 'react';
+import * as hooks from './hooks';
+import { AdvanceProblems, ProblemTypeKeys, ProblemTypes } from '../../../../data/constants/problem';
+import { getDataFromOlx } from '../../../../data/redux/thunkActions/problem';
+
+jest.mock('react', () => ({
+  ...jest.requireActual('react'),
+  useState: (val) => ({ useState: val }),
+  useEffect: jest.fn(),
+}));
+
+const mockUpdateField = jest.fn().mockName('updateField');
+const mockSelected = 'multiplechoiceresponse';
+const mockAdvancedSelected = 'circuitschematic';
+const mockSetSelected = jest.fn().mockName('setSelected');
+const mocksetBlockTitle = jest.fn().mockName('setBlockTitle');
+const mockDefaultSettings = {
+  max_attempts: null,
+  rerandomize: 'never',
+  showR_reset_button: false,
+  showanswer: 'always',
+};
+
+describe('SelectTypeModal hooks', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('onSelect', () => {
+    test('updateField is called with selected templated if selected is an Advanced Problem', () => {
+      hooks.onSelect({
+        selected: mockAdvancedSelected,
+        updateField: mockUpdateField,
+        setBlockTitle: mocksetBlockTitle,
+      })();
+      expect(mockUpdateField).toHaveBeenCalledWith({
+        problemType: ProblemTypeKeys.ADVANCED,
+        rawOLX: AdvanceProblems[mockAdvancedSelected].template,
+      });
+      expect(mocksetBlockTitle).toHaveBeenCalledWith(AdvanceProblems[mockAdvancedSelected].title);
+    });
+    test('updateField is called with selected on visual propblems', () => {
+      hooks.onSelect({
+        selected: mockSelected,
+        updateField: mockUpdateField,
+        setBlockTitle: mocksetBlockTitle,
+        defaultSettings: mockDefaultSettings,
+      })();
+      // const testOlXParser = new OLXParser(ProblemTypes[mockSelected].template);
+      const testState = getDataFromOlx({
+        rawOLX: ProblemTypes[mockSelected].template,
+        rawSettings: {
+          weight: 1,
+          attempts_before_showanswer_button: 0,
+          show_reset_button: null,
+          showanswer: null,
+          defaultToAdvanced: false,
+        },
+        defaultSettings: mockDefaultSettings,
+      });
+      expect(mockUpdateField).toHaveBeenCalledWith(testState);
+      expect(mocksetBlockTitle).toHaveBeenCalledWith(ProblemTypes[mockSelected].title);
+    });
+  });
+
+  describe('useArrowNav', () => {
+    document.body.innerHTML = `
+      <div id="multiplechoiceresponse" />
+      <div id="choiceresponse" />
+      <div id="optionresponse" />
+      <div id="numericalresponse" />
+      <div id="stringresponse" />
+    `;
+    const mockKeyUp = new KeyboardEvent('keydown', { key: 'ArrowUp' });
+    const mockKeyDown = new KeyboardEvent('keydown', { key: 'ArrowDown' });
+    let cb;
+    let prereqs;
+
+    describe('SINGLESELECT', () => {
+      beforeEach(() => {
+        hooks.useArrowNav(ProblemTypeKeys.SINGLESELECT, mockSetSelected);
+        [cb, prereqs] = React.useEffect.mock.calls[0];
+        cb();
+      });
+      test('pressing up arrow sets MULTISELECT', () => {
+        expect(React.useEffect.mock.calls.length).toEqual(1);
+        expect(prereqs).toStrictEqual([ProblemTypeKeys.SINGLESELECT, mockSetSelected]);
+        document.dispatchEvent(mockKeyUp);
+        expect(mockSetSelected).toHaveBeenCalledWith(ProblemTypeKeys.TEXTINPUT);
+      });
+      test('pressing down arrow sets MULTISELECT', () => {
+        expect(React.useEffect.mock.calls.length).toEqual(1);
+        expect(prereqs).toStrictEqual([ProblemTypeKeys.SINGLESELECT, mockSetSelected]);
+        document.dispatchEvent(mockKeyDown);
+        expect(mockSetSelected).toHaveBeenCalledWith(ProblemTypeKeys.MULTISELECT);
+      });
+    });
+    describe('MULTISELECT', () => {
+      beforeEach(() => {
+        hooks.useArrowNav(ProblemTypeKeys.MULTISELECT, mockSetSelected);
+        [cb, prereqs] = React.useEffect.mock.calls[0];
+        cb();
+      });
+      test('pressing up arrow sets SINGLESELECT', () => {
+        expect(React.useEffect.mock.calls.length).toEqual(1);
+        expect(prereqs).toStrictEqual([ProblemTypeKeys.MULTISELECT, mockSetSelected]);
+        document.dispatchEvent(mockKeyUp);
+        expect(mockSetSelected).toHaveBeenCalledWith(ProblemTypeKeys.SINGLESELECT);
+      });
+      test('pressing down arrow sets DROPDOWN', () => {
+        expect(React.useEffect.mock.calls.length).toEqual(1);
+        expect(prereqs).toStrictEqual([ProblemTypeKeys.MULTISELECT, mockSetSelected]);
+        document.dispatchEvent(mockKeyDown);
+        expect(mockSetSelected).toHaveBeenCalledWith(ProblemTypeKeys.DROPDOWN);
+      });
+    });
+    describe('DROPDOWN', () => {
+      beforeEach(() => {
+        hooks.useArrowNav(ProblemTypeKeys.DROPDOWN, mockSetSelected);
+        [cb, prereqs] = React.useEffect.mock.calls[0];
+        cb();
+      });
+      test('pressing up arrow sets MULTISELECT', () => {
+        expect(React.useEffect.mock.calls.length).toEqual(1);
+        expect(prereqs).toStrictEqual([ProblemTypeKeys.DROPDOWN, mockSetSelected]);
+        document.dispatchEvent(mockKeyUp);
+        expect(mockSetSelected).toHaveBeenCalledWith(ProblemTypeKeys.MULTISELECT);
+      });
+      test('pressing down arrow sets NUMERIC', () => {
+        expect(React.useEffect.mock.calls.length).toEqual(1);
+        expect(prereqs).toStrictEqual([ProblemTypeKeys.DROPDOWN, mockSetSelected]);
+        document.dispatchEvent(mockKeyDown);
+        expect(mockSetSelected).toHaveBeenCalledWith(ProblemTypeKeys.NUMERIC);
+      });
+    });
+    describe('NUMERIC', () => {
+      beforeEach(() => {
+        hooks.useArrowNav(ProblemTypeKeys.NUMERIC, mockSetSelected);
+        [cb, prereqs] = React.useEffect.mock.calls[0];
+        cb();
+      });
+      test('pressing up arrow sets DROPDOWN', () => {
+        expect(React.useEffect.mock.calls.length).toEqual(1);
+        expect(prereqs).toStrictEqual([ProblemTypeKeys.NUMERIC, mockSetSelected]);
+        document.dispatchEvent(mockKeyUp);
+        expect(mockSetSelected).toHaveBeenCalledWith(ProblemTypeKeys.DROPDOWN);
+      });
+      test('pressing down arrow sets TEXTINPUT', () => {
+        expect(React.useEffect.mock.calls.length).toEqual(1);
+        expect(prereqs).toStrictEqual([ProblemTypeKeys.NUMERIC, mockSetSelected]);
+        document.dispatchEvent(mockKeyDown);
+        expect(mockSetSelected).toHaveBeenCalledWith(ProblemTypeKeys.TEXTINPUT);
+      });
+    });
+    describe('TEXTINPUT', () => {
+      beforeEach(() => {
+        hooks.useArrowNav(ProblemTypeKeys.TEXTINPUT, mockSetSelected);
+        [cb, prereqs] = React.useEffect.mock.calls[0];
+        cb();
+      });
+      test('pressing up arrow sets NUMERIC', () => {
+        expect(React.useEffect.mock.calls.length).toEqual(1);
+        expect(prereqs).toStrictEqual([ProblemTypeKeys.TEXTINPUT, mockSetSelected]);
+        document.dispatchEvent(mockKeyUp);
+        expect(mockSetSelected).toHaveBeenCalledWith(ProblemTypeKeys.NUMERIC);
+      });
+      test('pressing down arrow sets SINGLESELECT', () => {
+        expect(React.useEffect.mock.calls.length).toEqual(1);
+        expect(prereqs).toStrictEqual([ProblemTypeKeys.TEXTINPUT, mockSetSelected]);
+        document.dispatchEvent(mockKeyDown);
+        expect(mockSetSelected).toHaveBeenCalledWith(ProblemTypeKeys.SINGLESELECT);
+      });
+    });
+  });
+});
diff --git a/src/editors/containers/ProblemEditor/components/SelectTypeModal/index.test.tsx b/src/editors/containers/ProblemEditor/components/SelectTypeModal/index.test.tsx
new file mode 100644
index 0000000000..ce2fbd7037
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/SelectTypeModal/index.test.tsx
@@ -0,0 +1,54 @@
+import { Provider } from 'react-redux';
+import {
+  fireEvent,
+  render,
+  screen,
+  initializeMocks,
+} from '../../../../../testUtils';
+import editorStore from '../../../../data/store';
+import { EditorContextProvider } from '../../../../EditorContext';
+import * as hooks from './hooks';
+import SelectTypeModal from '.';
+
+describe('SelectTypeModal', () => {
+  beforeEach(() => {
+    initializeMocks();
+  });
+  test('it can select a basic problem type', async () => {
+    const mockClose = jest.fn();
+    const mockSelect = jest.fn();
+    jest.spyOn(hooks, 'onSelect').mockImplementation(mockSelect);
+    // This is a new-style test, unlike most of the old snapshot-based editor tests.
+    render(
+      <EditorContextProvider fullScreen={false} learningContextId="course-v1:Org+COURSE+RUN">
+        <Provider store={editorStore}>
+          <SelectTypeModal onClose={mockClose} />
+        </Provider>
+      </EditorContextProvider>,
+    );
+
+    // First we see the menu of problem types:
+    expect(await screen.findByRole('button', { name: 'Numerical input' })).toBeInTheDocument();
+    // And the "Advanced" types are not yet listed:
+    expect(screen.queryByRole('radio', { name: 'Custom JavaScript display and grading' })).not.toBeInTheDocument();
+
+    // Before we select a problem type, try viewing the advanced types and then going back:
+    const advancedButton = await screen.findByRole('button', { name: 'Advanced problem types' });
+    fireEvent.click(advancedButton);
+
+    // Now we see the advanced types:
+    await screen.findByRole('radio', { name: 'Custom JavaScript display and grading' });
+    expect(screen.queryByRole('button', { name: 'Numerical input' })).not.toBeInTheDocument();
+
+    const goBackButton = screen.getByRole('button', { name: 'Go back' });
+    fireEvent.click(goBackButton);
+
+    const numericalInputBtn = await screen.findByRole('button', { name: 'Numerical input' });
+    fireEvent.click(numericalInputBtn);
+
+    // Now we save our selection:
+    const selectBtn = screen.getByRole('button', { name: 'Select' });
+    fireEvent.click(selectBtn);
+    expect(mockSelect).toHaveBeenLastCalledWith(expect.objectContaining({ selected: 'numericalresponse' }));
+  });
+});
diff --git a/src/editors/containers/ProblemEditor/components/SelectTypeModal/index.tsx b/src/editors/containers/ProblemEditor/components/SelectTypeModal/index.tsx
new file mode 100644
index 0000000000..fbb17fad43
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/components/SelectTypeModal/index.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+
+import { Row, Stack } from '@openedx/paragon';
+import ProblemTypeSelect from './content/ProblemTypeSelect';
+import Preview from './content/Preview';
+import AdvanceTypeSelect from './content/AdvanceTypeSelect';
+import SelectTypeWrapper from './SelectTypeWrapper';
+import * as hooks from './hooks';
+import {
+  AdvancedProblemType,
+  isAdvancedProblemType,
+  ProblemType,
+  ProblemTypeKeys,
+} from '../../../../data/constants/problem';
+
+interface Props {
+  onClose: (() => void) | null;
+}
+
+const SelectTypeModal: React.FC<Props> = ({
+  onClose,
+}) => {
+  const [selected, setSelected] = React.useState<ProblemType | AdvancedProblemType>(ProblemTypeKeys.SINGLESELECT);
+  hooks.useArrowNav(selected, setSelected);
+
+  return (
+    <SelectTypeWrapper onClose={onClose} selected={selected}>
+      <Row className="justify-content-center">
+        {(!isAdvancedProblemType(selected)) ? (
+          <Stack direction="horizontal" gap={4} className="flex-wrap mb-6">
+            <ProblemTypeSelect selected={selected} setSelected={setSelected} />
+            <Preview problemType={selected} />
+          </Stack>
+        ) : <AdvanceTypeSelect selected={selected} setSelected={setSelected} />}
+      </Row>
+    </SelectTypeWrapper>
+  );
+};
+
+export default SelectTypeModal;
diff --git a/src/editors/containers/ProblemEditor/data/OLXParser.js b/src/editors/containers/ProblemEditor/data/OLXParser.js
new file mode 100644
index 0000000000..cbdb163c53
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/data/OLXParser.js
@@ -0,0 +1,758 @@
+// Parse OLX to JavaScript objects.
+/* eslint no-eval: 0 */
+
+import { XMLParser, XMLBuilder } from 'fast-xml-parser';
+import _ from 'lodash';
+import {
+  ProblemTypeKeys,
+  RichTextProblems,
+  settingsOlxAttributes,
+  ignoredOlxAttributes,
+} from '../../../data/constants/problem';
+
+export const indexToLetterMap = [...Array(26)].map((val, i) => String.fromCharCode(i + 65));
+
+export const nonQuestionKeys = [
+  '@_answer',
+  '@_type',
+  'additional_answer',
+  'checkboxgroup',
+  'choicegroup',
+  'choiceresponse',
+  'correcthint',
+  'demandhint',
+  'formulaequationinput',
+  'multiplechoiceresponse',
+  'numericalresponse',
+  'optioninput',
+  'optionresponse',
+  'responseparam',
+  'solution',
+  'stringequalhint',
+  'stringresponse',
+  'textline',
+];
+
+export const responseKeys = [
+  'multiplechoiceresponse',
+  'numericalresponse',
+  'optionresponse',
+  'stringresponse',
+  'choiceresponse',
+  'multiplechoiceresponse',
+  'truefalseresponse',
+  'optionresponse',
+  'numericalresponse',
+  'stringresponse',
+  'customresponse',
+  'symbolicresponse',
+  'coderesponse',
+  'externalresponse',
+  'formularesponse',
+  'schematicresponse',
+  'imageresponse',
+  'annotationresponse',
+  'choicetextresponse',
+];
+
+export const stripNonTextTags = ({ input, tag }) => {
+  const stripedTags = {};
+  Object.entries(input).forEach(([key, value]) => {
+    if (key !== tag) {
+      stripedTags[key] = value;
+    }
+  });
+  return stripedTags;
+};
+
+export class OLXParser {
+  constructor(olxString) {
+    // There are two versions of the parsed XLM because the fields using tinymce require the order
+    // of the parsed data and spacing values to be preserved. However, all the other widgets need
+    // the data grouped by the wrapping tag. Examples of the parsed format can be found here:
+    // https://github.com/NaturalIntelligence/fast-xml-parser/blob/master/docs/v4/2.XMLparseOptions.md
+    const baseParserOptions = {
+      ignoreAttributes: false,
+      numberParseOptions: {
+        leadingZeros: false,
+        hex: false,
+      },
+      processEntities: false,
+    };
+
+    // Base Parser
+    this.problem = {};
+    const parserOptions = {
+      ...baseParserOptions,
+      alwaysCreateTextNode: true,
+    };
+    const builderOptions = {
+      ...baseParserOptions,
+    };
+    const parser = new XMLParser(parserOptions);
+    this.builder = new XMLBuilder(builderOptions);
+    this.parsedOLX = parser.parse(olxString);
+    if (_.has(this.parsedOLX, 'problem')) {
+      this.problem = this.parsedOLX.problem;
+    }
+
+    // Parser with `preservedOrder: true` and `trimValues: false`
+    this.richTextProblem = [];
+    const richTextOptions = {
+      ...baseParserOptions,
+      alwaysCreateTextNode: true,
+      preserveOrder: true,
+      trimValues: false,
+    };
+    const richTextBuilderOptions = {
+      ...baseParserOptions,
+      preserveOrder: true,
+      trimValues: false,
+    };
+    const richTextParser = new XMLParser(richTextOptions);
+    this.richTextBuilder = new XMLBuilder(richTextBuilderOptions);
+    this.richTextOLX = richTextParser.parse(olxString);
+    if (_.has(this.parsedOLX, 'problem')) {
+      this.richTextProblem = this.richTextOLX[0].problem;
+    }
+  }
+
+  /** getPreservedAnswersAndFeedback(problemType, widgetName, option)
+   * getPreservedAnswersAndFeedback takes a problemType, widgetName, and a valid option. The
+   * olx for the given problem type and widget is parsed. Do to the structure of xml that is
+   * parsed with the prsereved attribute, the function has to loop through arrays of objects.
+   * The first for-loop checks for feedback tags and answer choices and appended to the
+   * preservedAnswers. The nested for loop checks for feedback and answer values inside the
+   * option (answer) tags.
+   * @param {string} problemType - string of the olx problem type
+   * @param {string} widgetName - string of the wrapping tag name
+   *                              (optioninput, choicegroup, checkboxgroup, additional_answer)
+   * @param {string} option - string of the type of answers (choice, option, correcthint, stringequalhint)
+   * @return {array} array containing answer objects and possibly an array of grouped feedback
+   */
+  getPreservedAnswersAndFeedback(problemType, widgetName, option) {
+    const [problemBody] = this.richTextProblem.filter(section => Object.keys(section).includes(problemType));
+    const isChoiceProblem = !([ProblemTypeKeys.NUMERIC, ProblemTypeKeys.TEXTINPUT].includes(problemType));
+    const preservedAnswers = [];
+    let correctAnswerFeedbackTag = option;
+    let incorrectAnswerFeedbackTag;
+    if (problemType === ProblemTypeKeys.TEXTINPUT) {
+      [correctAnswerFeedbackTag, incorrectAnswerFeedbackTag] = option;
+    }
+    const problemBodyArr = problemBody[problemType];
+    problemBodyArr.forEach(subtag => {
+      const tagNames = Object.keys(subtag);
+      if (!isChoiceProblem && tagNames.includes(correctAnswerFeedbackTag)) {
+        preservedAnswers.unshift(subtag[correctAnswerFeedbackTag]);
+      }
+      if (problemType === ProblemTypeKeys.TEXTINPUT && tagNames.includes(incorrectAnswerFeedbackTag)) {
+        preservedAnswers.push(subtag);
+      }
+      if (tagNames.includes(widgetName)) {
+        const currentAnswerArr = subtag[widgetName];
+        currentAnswerArr.forEach(answer => {
+          if (Object.keys(answer).includes(correctAnswerFeedbackTag)) {
+            preservedAnswers.push(answer[correctAnswerFeedbackTag]);
+          }
+        });
+      }
+    });
+    return preservedAnswers;
+  }
+
+  /** parseMultipleChoiceAnswers(problemType, widgetName, option)
+   * parseMultipleChoiceAnswers takes a problemType, widgetName, and a valid option. The
+   * olx for the given problem type and widget is parsed. Depending on the problem
+   * type, the title for an answer will be parsed differently because of single select and multiselect
+   * problems are rich text while dropdown answers are plain text. The rich text is parsed into an object
+   * and is converted back into a string before being added to the answer object. The parsing returns a
+   * data object with an array of answer objects. If the olx has grouped feedback, this will also be
+   * included in the data object.
+   * @param {string} problemType - string of the olx problem type
+   * @param {string} widgetName - string of the wrapping tag name (optioninput, choicegroup, checkboxgroup)
+   * @param {string} option - string of the type of answers (choice or option)
+   * @return {object} object containing an array of answer objects and possibly an array of grouped feedback
+   */
+  parseMultipleChoiceAnswers(problemType, widgetName, option) {
+    const preservedAnswers = this.getPreservedAnswersAndFeedback(
+      problemType,
+      widgetName,
+      option,
+    );
+    const answers = [];
+    let data = {};
+    const widget = _.get(this.problem, `${problemType}.${widgetName}`);
+    const permissableTags = ['choice', '@_type', 'compoundhint', 'option', '#text'];
+    if (_.keys(widget).some((tag) => !permissableTags.includes(tag))) {
+      throw new Error('Misc Tags, reverting to Advanced Editor');
+    }
+    if (_.get(this.problem, `${problemType}.@_partial_credit`)) {
+      throw new Error('Partial credit not supported by GUI, reverting to Advanced Editor');
+    }
+    const choice = _.get(widget, option);
+    const isComplexAnswer = RichTextProblems.includes(problemType);
+    if (_.isEmpty(choice)) {
+      answers.push(
+        {
+          id: indexToLetterMap[answers.length],
+          title: '',
+          correct: true,
+        },
+      );
+    } else if (_.isArray(choice)) {
+      choice.forEach((element, index) => {
+        const preservedAnswer = preservedAnswers[index].filter(answer => !Object.keys(answer).includes(`${option}hint`));
+        const preservedFeedback = preservedAnswers[index].filter(answer => Object.keys(answer).includes(`${option}hint`));
+        let title = element['#text'];
+
+        if (isComplexAnswer && preservedAnswer) {
+          title = this.richTextBuilder.build(preservedAnswer);
+        }
+        const correct = eval(element['@_correct'].toLowerCase());
+        const id = indexToLetterMap[index];
+        const feedback = this.getAnswerFeedback(preservedFeedback, `${option}hint`);
+        answers.push(
+          {
+            id,
+            correct,
+            title,
+            ...feedback,
+          },
+        );
+      });
+    } else {
+      const preservedAnswer = preservedAnswers[0].filter(answer => !Object.keys(answer).includes(`${option}hint`));
+      const preservedFeedback = preservedAnswers[0].filter(answer => Object.keys(answer).includes(`${option}hint`));
+      let title = choice['#text'];
+
+      if (isComplexAnswer && preservedAnswer) {
+        title = this.richTextBuilder.build(preservedAnswer);
+      }
+      const feedback = this.getAnswerFeedback(preservedFeedback, `${option}hint`);
+      answers.push({
+        correct: eval(choice['@_correct'].toLowerCase()),
+        id: indexToLetterMap[answers.length],
+        title,
+        ...feedback,
+      });
+    }
+    data = { answers };
+    const groupFeedbackList = this.getGroupedFeedback(widget);
+    if (groupFeedbackList.length) {
+      data = {
+        ...data,
+        groupFeedbackList,
+      };
+    }
+    return data;
+  }
+
+  /** getAnswerFeedback(preservedFeedback, hintKey)
+   * getAnswerFeedback takes preservedFeedback and a valid option. The preservedFeedback object
+   * is checked for selected and unselected feedback. The respective values are added to the
+   * feedback object. The feedback object is returned.
+   * @param {array} preservedFeedback - array of feedback objects
+   * @param {string} hintKey - string of the wrapping tag name (optionhint or choicehint)
+   * @return {object} object containing selected and unselected feedback
+   */
+  getAnswerFeedback(preservedFeedback, hintKey) {
+    const feedback = {};
+    let feedbackKeys = 'selectedFeedback';
+    if (_.isEmpty(preservedFeedback)) { return feedback; }
+
+    preservedFeedback.forEach((feedbackArr) => {
+      if (_.has(feedbackArr, hintKey)) {
+        if (_.has(feedbackArr, ':@') && _.has(feedbackArr[':@'], '@_selected')) {
+          const isSelectedFeedback = feedbackArr[':@']['@_selected'] === 'true';
+          feedbackKeys = isSelectedFeedback ? 'selectedFeedback' : 'unselectedFeedback';
+        }
+        feedback[feedbackKeys] = this.richTextBuilder.build(feedbackArr[hintKey]);
+      }
+    });
+    return feedback;
+  }
+
+  /** getGroupedFeedback(choices)
+   * getGroupedFeedback takes choices. The choices with the attribute compoundhint are parsed for
+   * the text value and the answers associated with the feedback. The groupFeedback array is returned.
+   * @param {object} choices - object of problem's subtags
+   * @return {array} array containing objects of feedback and associated answer ids
+   */
+  getGroupedFeedback(choices) {
+    const groupFeedback = [];
+    if (_.has(choices, 'compoundhint')) {
+      const groupFeedbackArray = choices.compoundhint;
+      if (_.isArray(groupFeedbackArray)) {
+        groupFeedbackArray.forEach((element) => {
+          const parsedFeedback = stripNonTextTags({ input: element, tag: '@_value' });
+          groupFeedback.push({
+            id: groupFeedback.length,
+            answers: element['@_value'].split(' '),
+            feedback: this.builder.build(parsedFeedback),
+          });
+        });
+      } else {
+        const parsedFeedback = stripNonTextTags({ input: groupFeedbackArray, tag: '@_value' });
+        groupFeedback.push({
+          id: groupFeedback.length,
+          answers: groupFeedbackArray['@_value'].split(' '),
+          feedback: this.builder.build(parsedFeedback),
+        });
+      }
+    }
+    return groupFeedback;
+  }
+
+  /** parseStringResponse()
+   * The OLX saved to the class constuctor is parsed for text input answers. There are two
+   * types of tags with the answer attribute, stringresponse (the problem wrapper) and
+   * additional_answer. Looping through each tag, the associated title and feedback are added
+   * to the answers object and appended to the answers array. The array returned in an object
+   * with the key "answers". The object also conatins additional attributes that belong to the
+   * string response tag.
+   * @return {object} object containing an array of answer objects and object of additionalStringAttributes
+   */
+  parseStringResponse() {
+    const [firstCorrectFeedback, ...preservedFeedback] = this.getPreservedAnswersAndFeedback(
+      ProblemTypeKeys.TEXTINPUT,
+      'additional_answer',
+      ['correcthint', 'stringequalhint'],
+    );
+    const { stringresponse } = this.problem;
+    const answers = [];
+    let answerFeedback = '';
+    let additionalStringAttributes = {};
+    let data = {};
+    const firstFeedback = this.getFeedback(firstCorrectFeedback);
+    answers.push({
+      id: indexToLetterMap[answers.length],
+      title: stringresponse['@_answer'],
+      correct: true,
+      selectedFeedback: firstFeedback,
+    });
+
+    const additionalAnswerFeedback = preservedFeedback.filter(feedback => _.isArray(feedback));
+    const stringEqualHintFeedback = preservedFeedback.filter(feedback => !_.isArray(feedback));
+
+    // Parsing additional_answer for string response.
+    const additionalAnswer = _.get(stringresponse, 'additional_answer', []);
+    if (_.isArray(additionalAnswer)) {
+      additionalAnswer.forEach((newAnswer, indx) => {
+        answerFeedback = this.getFeedback(additionalAnswerFeedback[indx]);
+        answers.push({
+          id: indexToLetterMap[answers.length],
+          title: newAnswer['@_answer'],
+          correct: true,
+          selectedFeedback: answerFeedback,
+        });
+      });
+    } else {
+      answerFeedback = this.getFeedback(additionalAnswerFeedback[0]);
+      answers.push({
+        id: indexToLetterMap[answers.length],
+        title: additionalAnswer['@_answer'],
+        correct: true,
+        selectedFeedback: answerFeedback,
+      });
+    }
+
+    // Parsing stringequalhint for string response.
+    const stringEqualHint = _.get(stringresponse, 'stringequalhint', []);
+    if (_.isArray(stringEqualHint)) {
+      stringEqualHint.forEach((newAnswer, indx) => {
+        answerFeedback = this.richTextBuilder.build(stringEqualHintFeedback[indx].stringequalhint);
+        answers.push({
+          id: indexToLetterMap[answers.length],
+          title: newAnswer['@_answer'],
+          correct: false,
+          selectedFeedback: answerFeedback,
+        });
+      });
+    } else {
+      answerFeedback = this.richTextBuilder.build(stringEqualHintFeedback[0].stringequalhint);
+      answers.push({
+        id: indexToLetterMap[answers.length],
+        title: stringEqualHint['@_answer'],
+        correct: false,
+        selectedFeedback: answerFeedback,
+      });
+    }
+
+    // TODO: Support multiple types.
+    additionalStringAttributes = {
+      type: _.get(stringresponse, '@_type'),
+      textline: {
+        size: _.get(stringresponse, 'textline.@_size'),
+      },
+    };
+
+    data = {
+      answers,
+      additionalStringAttributes,
+    };
+
+    return data;
+  }
+
+  /** parseNumericResponse()
+   * The OLX saved to the class constuctor is parsed for numeric answers. There are two
+   * types of tags for numeric answers, responseparam and additional_answer. Looping through
+   * each tag, the associated title and feedback and if the answer is an answer range are
+   * added to the answers object and appended to the answers array. The array returned in
+   * an object with the key "answers".
+   * @return {object} object containing an array of answer objects
+   */
+  parseNumericResponse() {
+    const [firstCorrectFeedback, ...preservedFeedback] = this.getPreservedAnswersAndFeedback(
+      ProblemTypeKeys.NUMERIC,
+      'additional_answer',
+      'correcthint',
+    );
+    const { numericalresponse } = this.problem;
+    if (_.get(numericalresponse, '@_partial_credit')) {
+      throw new Error('Partial credit not supported by GUI, reverting to Advanced Editor');
+    }
+    let answerFeedback = '';
+    const answers = [];
+    let responseParam = {};
+    const feedback = this.getFeedback(firstCorrectFeedback);
+    if (_.has(numericalresponse, 'responseparam')) {
+      const type = _.get(numericalresponse, 'responseparam.@_type');
+      const defaultValue = _.get(numericalresponse, 'responseparam.@_default');
+      responseParam = {
+        [type]: defaultValue,
+      };
+    }
+    const isAnswerRange = /[([]\s*\d*,\s*\d*\s*[)\]]/gm.test(numericalresponse['@_answer']);
+    answers.push({
+      id: indexToLetterMap[answers.length],
+      title: numericalresponse['@_answer'],
+      correct: true,
+      selectedFeedback: feedback,
+      isAnswerRange,
+      ...responseParam,
+    });
+
+    // Parsing additional_answer for numerical response.
+    const additionalAnswer = _.get(numericalresponse, 'additional_answer', []);
+    if (_.isArray(additionalAnswer)) {
+      additionalAnswer.forEach((newAnswer, indx) => {
+        answerFeedback = this.getFeedback(preservedFeedback[indx]);
+        answers.push({
+          id: indexToLetterMap[answers.length],
+          title: newAnswer['@_answer'],
+          correct: true,
+          selectedFeedback: answerFeedback,
+        });
+      });
+    } else {
+      answerFeedback = this.getFeedback(preservedFeedback[0]);
+      answers.push({
+        id: indexToLetterMap[answers.length],
+        title: additionalAnswer['@_answer'],
+        correct: true,
+        selectedFeedback: answerFeedback,
+        isAnswerRange: false,
+      });
+    }
+    return { answers };
+  }
+
+  /** parseQuestions(problemType)
+   * parseQuestions takes a problemType. The problem type is used to determine where the
+   * text for the question lies (sibling or child to warpping problem type tags).
+   * Using the XMLBuilder, the question is built with its proper children (including label
+   * and description). The string version of the OLX is return, replacing the description
+   * tags with italicized tags for styling purposes.
+   * @param {string} problemType - string of the olx problem type
+   * @return {string} string of OLX
+   */
+  parseQuestions(problemType) {
+    const problemArray = _.get(this.richTextProblem[0], problemType) || this.richTextProblem;
+
+    const questionArray = [];
+    problemArray.forEach(tag => {
+      const tagName = Object.keys(tag)[0];
+      if (!nonQuestionKeys.includes(tagName)) {
+        if (tagName === 'script') {
+          throw new Error('Script Tag, reverting to Advanced Editor');
+        }
+        questionArray.push(tag);
+      } else if (responseKeys.includes(tagName)) {
+        /* Tags that are not used for other parts of the question such as <solution> or <choicegroup>
+         should be included in the question. These include but are not limited to tags like <label>,
+         <description> and <table> as they often are both valid olx as siblings or children of response
+         type tags. */
+        tag[tagName].forEach(subTag => {
+          const subTagName = Object.keys(subTag)[0];
+          if (!nonQuestionKeys.includes(subTagName)) {
+            questionArray.push(subTag);
+          }
+        });
+      }
+    });
+    const questionString = this.richTextBuilder.build(questionArray);
+    const res = this.replaceOlxDescriptionTag(questionString);
+    return res;
+  }
+
+  /** hasOLXAfterProblemTypeTag(problemType)
+   * checkTextAfterProblemTypeTag takes a problemType. The problem type is used to determine
+   * if there is olx after the answer choices the problem. Simple problems are not expected
+   * to have olx after the answer choices and returns false. In the event that a problem has
+   * olx after the answer choices it returns true and will raise an error.
+   * @param {string} problemType - string of the olx problem type
+   * @return {bool}
+   */
+  hasOLXAfterProblemTypeTag(problemType) {
+    let problemTagIndex = this.richTextProblem.length - 1;
+    let hasExtraOLX = false;
+    Object.entries(this.richTextProblem).forEach(([i, value]) => {
+      if (Object.keys(value).includes(problemType)) {
+        problemTagIndex = i;
+      }
+    });
+
+    if (problemTagIndex < this.richTextProblem.length - 1) {
+      const olxAfterProblemType = this.richTextProblem.slice(problemTagIndex + 1);
+      Object.values(olxAfterProblemType).forEach(value => {
+        const currentKey = Object.keys(value)[0];
+        const invalidText = currentKey === '#text' && value[currentKey] !== '\n';
+        const invalidKey = !nonQuestionKeys.includes(currentKey) && currentKey !== '#text';
+        if (invalidText) {
+          hasExtraOLX = true;
+        } else if (invalidKey) {
+          hasExtraOLX = true;
+        }
+      });
+    }
+    return hasExtraOLX;
+  }
+
+  replaceOlxDescriptionTag(questionString) {
+    return questionString.replace(/<description>/gm, '<em class="olx_description">').replace(/<\/description>/gm, '</em>');
+  }
+
+  /** getHints()
+   * The OLX saved to the class constuctor is parsed for demand hint tags with hint subtags. An empty array is returned
+   * if there are no hints in the OLX. Otherwise the hint tag is parsed and appended to the hintsObject arrary. After
+   * going through all the hints the hintsObject array is returned.
+   * @return {array} array of hint objects
+   */
+  getHints() {
+    const hintsObject = [];
+    if (_.has(this.problem, 'demandhint.hint')) {
+      const preservedProblem = this.richTextProblem;
+      preservedProblem.forEach(obj => {
+        const objKeys = Object.keys(obj);
+        if (objKeys.includes('demandhint')) {
+          const currentDemandHint = obj.demandhint;
+          currentDemandHint.forEach(hint => {
+            if (Object.keys(hint).includes('hint')) {
+              const hintValue = this.richTextBuilder.build(hint.hint);
+              hintsObject.push({
+                id: hintsObject.length,
+                value: hintValue,
+              });
+            }
+          });
+        }
+      });
+    }
+    return hintsObject;
+  }
+
+  /** getSolutionExplanation(problemType)
+   * getSolutionExplanation takes a problemType. The problem type is used to determine where the
+   * text for the solution lies (sibling or child to warpping problem type tags).
+   * Using the XMLBuilder, the solution is built removing the redundant "explanation" that is
+   * appended for Studio styling purposes. The string version of the OLX is return.
+   * @param {string} problemType - string of the olx problem type
+   * @return {string} string of OLX
+   */
+  getSolutionExplanation(problemType) {
+    if (!_.has(this.problem, `${problemType}.solution`) && !_.has(this.problem, 'solution')) { return null; }
+    const [problemBody] = this.richTextProblem.filter(section => Object.keys(section).includes(problemType));
+    const [solutionBody] = problemBody[problemType].filter(section => Object.keys(section).includes('solution'));
+    const [divBody] = solutionBody.solution.filter(section => Object.keys(section).includes('div'));
+    const solutionArray = [];
+    if (divBody && divBody.div) {
+      divBody.div.forEach(tag => {
+        const tagText = _.get(Object.values(tag)[0][0], '#text', '');
+        if (tagText.toString().trim() !== 'Explanation') {
+          solutionArray.push(tag);
+        }
+      });
+    } else {
+      solutionBody.solution.forEach(tag => {
+        const tagText = _.get(Object.values(tag)[0][0], '#text', '');
+        if (tagText.toString().trim() !== 'Explanation') {
+          solutionArray.push(tag);
+        }
+      });
+    }
+    const solutionString = this.richTextBuilder.build(solutionArray);
+    return solutionString;
+  }
+
+  /** getFeedback(xmlElement)
+   * getFeedback takes xmlElement. The xmlElement is searched for the attribute correcthint.
+   * An empty string is returned if the parameter is not present. Otherwise a string of the feedback
+   * is returned.
+   * @param {object} xmlElement - object of answer attributes
+   * @return {string} string of feedback
+   */
+  getFeedback(xmlElement) {
+    if (_.isEmpty(xmlElement)) { return ''; }
+    const feedbackString = this.richTextBuilder.build(xmlElement);
+    return feedbackString;
+  }
+
+  /** getProblemType()
+   * The OLX saved to the class constuctor is parsed for a valid problem type (referencing problemKeys).
+   * For blank problems, it returns null. For OLX problems tags not defined in problemKeys or OLX with
+   * multiple problem tags, it returns advanced. For defined, single problem tag, it returns the
+   * associated problem type.
+   * @return {string} problem type
+   */
+  getProblemType() {
+    const problemKeys = Object.keys(this.problem);
+    const problemTypeKeys = problemKeys.filter(key => Object.values(ProblemTypeKeys).indexOf(key) !== -1);
+    if (problemTypeKeys.length === 0) {
+      // a blank problem is a problem which contains only `<problem></problem>` as it's olx.
+      // blank problems are not given types, so that a type may be selected.
+      if (problemKeys.length === 1 && problemKeys[0] === '#text' && this.problem[problemKeys[0]] === '') {
+        return null;
+      }
+      // if we have no matching problem type, the problem is advanced.
+      return ProblemTypeKeys.ADVANCED;
+    }
+    // make sure compound problems are treated as advanced
+    if ((problemTypeKeys.length > 1)
+      || (_.isArray(this.problem[problemTypeKeys[0]])
+        && this.problem[problemTypeKeys[0]].length > 1)) {
+      return ProblemTypeKeys.ADVANCED;
+    }
+    const problemType = problemTypeKeys[0];
+    return problemType;
+  }
+
+  /** getGeneralFeedback({ answers, problemType })
+   * getGeneralFeedback takes answers and problemType. The problem type determines if the problem should be checked
+   * for general feedback. The incorrect answers are checked to seee if all of their feedback is the same and
+   * returns the first incorrect answer's feedback if true. When conditions are unmet, it returns and empty string.
+   * @param {array} answers - array of answer objects
+   * @param {string} problemType - string of string of the olx problem type
+   * @return {string} text for incorrect feedback
+   */
+  getGeneralFeedback({ answers, problemType }) {
+    /* Feedback is Generalized for a Problem IFF:
+    1. The problem is of Types: Single Select or Dropdown.
+    2. All the problem's incorrect, if Selected answers are equivalent strings, and there is no other feedback.
+    */
+    if (problemType === ProblemTypeKeys.SINGLESELECT || problemType === ProblemTypeKeys.DROPDOWN) {
+      const firstIncorrectAnswerText = answers.find(answer => answer.correct === false)?.selectedFeedback;
+      const isAllIncorrectSelectedFeedbackTheSame = answers.every(answer => (answer.correct
+        ? true
+        : answer?.selectedFeedback === firstIncorrectAnswerText
+      ));
+      if (isAllIncorrectSelectedFeedbackTheSame) {
+        return firstIncorrectAnswerText;
+      }
+    }
+    return '';
+  }
+
+  getParsedOLXData() {
+    if (_.isEmpty(this.problem)) {
+      return {};
+    }
+
+    Object.keys(this.problem).forEach((key) => {
+      if (key.indexOf('@_') !== -1 && !settingsOlxAttributes.includes(key) && !ignoredOlxAttributes.includes(key)) {
+        const plainKey = key.replace(/^@_/, '');
+        throw new Error(`Unrecognized attribute "${plainKey}" associated with problem, opening in advanced editor`);
+      }
+    });
+
+    const problemType = this.getProblemType();
+
+    if (this.hasOLXAfterProblemTypeTag(problemType)) {
+      throw new Error(`OLX was found after the ${problemType} tags, opening in advanced editor`);
+    }
+
+    let answersObject = {};
+    let additionalAttributes = {};
+    let groupFeedbackList = [];
+    const hints = this.getHints();
+    const question = this.parseQuestions(problemType);
+    const solutionExplanation = this.getSolutionExplanation(problemType);
+    switch (problemType) {
+      case ProblemTypeKeys.DROPDOWN:
+        answersObject = this.parseMultipleChoiceAnswers(ProblemTypeKeys.DROPDOWN, 'optioninput', 'option');
+        break;
+      case ProblemTypeKeys.TEXTINPUT:
+        answersObject = this.parseStringResponse();
+        break;
+      case ProblemTypeKeys.NUMERIC:
+        answersObject = this.parseNumericResponse();
+        break;
+      case ProblemTypeKeys.MULTISELECT:
+        answersObject = this.parseMultipleChoiceAnswers(ProblemTypeKeys.MULTISELECT, 'checkboxgroup', 'choice');
+        break;
+      case ProblemTypeKeys.SINGLESELECT:
+        answersObject = this.parseMultipleChoiceAnswers(ProblemTypeKeys.SINGLESELECT, 'choicegroup', 'choice');
+        break;
+      case ProblemTypeKeys.ADVANCED:
+        return {
+          problemType,
+          settings: {},
+        };
+      default:
+        // if problem is unset, return null
+        return {};
+    }
+    const generalFeedback = this.getGeneralFeedback({ answers: answersObject.answers, problemType });
+    if (_.has(answersObject, 'additionalStringAttributes')) {
+      additionalAttributes = { ...answersObject.additionalStringAttributes };
+    }
+
+    if (_.has(answersObject, 'groupFeedbackList')) {
+      groupFeedbackList = answersObject.groupFeedbackList;
+    }
+    const { answers } = answersObject;
+    const settings = { hints };
+    if (ProblemTypeKeys.NUMERIC === problemType && _.has(answers[0], 'tolerance')) {
+      const toleranceValue = answers[0].tolerance;
+      if (!toleranceValue || toleranceValue.length === 0) {
+        settings.tolerance = { value: null, type: 'None' };
+      } else if (toleranceValue.includes('%')) {
+        settings.tolerance = { value: parseInt(toleranceValue.slice(0, -1), 10), type: 'Percent' };
+      } else {
+        settings.tolerance = { value: parseInt(toleranceValue, 10), type: 'Number' };
+      }
+    } else {
+      settings.tolerance = { value: null, type: 'None' };
+    }
+    if (solutionExplanation) { settings.solutionExplanation = solutionExplanation; }
+
+    return {
+      question,
+      settings,
+      answers,
+      problemType,
+      additionalAttributes,
+      generalFeedback,
+      groupFeedbackList,
+    };
+  }
+
+  getBetaParsedOLXData() {
+    /* TODO: Replace olxParser.getParsedOLXData() with new parser function
+    * and remove console.log()
+    */
+    // eslint-disable-next-line no-console
+    console.log('Should default to the advanced editor');
+    return this.getParsedOLXData();
+  }
+}
diff --git a/src/editors/containers/ProblemEditor/data/OLXParser.test.js b/src/editors/containers/ProblemEditor/data/OLXParser.test.js
new file mode 100644
index 0000000000..b463ccf343
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/data/OLXParser.test.js
@@ -0,0 +1,386 @@
+import { OLXParser } from './OLXParser';
+import {
+  checkboxesOLXWithFeedbackAndHintsOLX,
+  dropdownOLXWithFeedbackAndHintsOLX,
+  numericInputWithFeedbackAndHintsOLX,
+  textInputWithFeedbackAndHintsOLX,
+  multipleChoiceWithoutAnswers,
+  multipleChoiceSingleAnswer,
+  multipleChoiceWithFeedbackAndHintsOLX,
+  textInputWithFeedbackAndHintsOLXWithMultipleAnswers,
+  advancedProblemOlX,
+  multipleTextInputProblemOlX,
+  multipleNumericProblemOlX,
+  multiSelectPartialCredit,
+  NumericAndTextInputProblemOlX,
+  blankProblemOLX,
+  blankQuestionOLX,
+  styledQuestionOLX,
+  shuffleProblemOLX,
+  scriptProblemOlX,
+  singleSelectPartialCredit,
+  labelDescriptionQuestionOLX,
+  htmlEntityTestOLX,
+  numberParseTestOLX,
+  numericalProblemPartialCredit,
+  solutionExplanationTest,
+  solutionExplanationWithoutDivTest,
+  tablesInRichTextTest,
+  parseOutExplanationTests,
+  unexpectOlxAfterProblemTypeTags,
+} from './mockData/olxTestData';
+import { ProblemTypeKeys } from '../../../data/constants/problem';
+
+const blankOlxParser = new OLXParser(blankProblemOLX.rawOLX);
+const checkboxOlxParser = new OLXParser(checkboxesOLXWithFeedbackAndHintsOLX.rawOLX);
+const numericOlxParser = new OLXParser(numericInputWithFeedbackAndHintsOLX.rawOLX);
+const dropdownOlxParser = new OLXParser(dropdownOLXWithFeedbackAndHintsOLX.rawOLX);
+const multipleChoiceOlxParser = new OLXParser(multipleChoiceWithFeedbackAndHintsOLX.rawOLX);
+const multipleChoiceWithoutAnswersOlxParser = new OLXParser(multipleChoiceWithoutAnswers.rawOLX);
+const multipleChoiceSingleAnswerOlxParser = new OLXParser(multipleChoiceSingleAnswer.rawOLX);
+const textInputOlxParser = new OLXParser(textInputWithFeedbackAndHintsOLX.rawOLX);
+const textInputMultipleAnswersOlxParser = new OLXParser(textInputWithFeedbackAndHintsOLXWithMultipleAnswers.rawOLX);
+const advancedOlxParser = new OLXParser(advancedProblemOlX.rawOLX);
+const multipleTextInputOlxParser = new OLXParser(multipleTextInputProblemOlX.rawOLX);
+const multipleNumericOlxParser = new OLXParser(multipleNumericProblemOlX.rawOLX);
+const numericAndTextInputOlxParser = new OLXParser(NumericAndTextInputProblemOlX.rawOLX);
+const labelDescriptionQuestionOlxParser = new OLXParser(labelDescriptionQuestionOLX.rawOLX);
+const shuffleOlxParser = new OLXParser(shuffleProblemOLX.rawOLX);
+const multiSelectPartialCreditOlxParser = new OLXParser(multiSelectPartialCredit.rawOLX);
+const singleSelectPartialCreditParser = new OLXParser(singleSelectPartialCredit.rawOLX);
+const numericalProblemPartialCreditParser = new OLXParser(numericalProblemPartialCredit.rawOLX);
+
+describe('OLXParser', () => {
+  describe('throws error and redirects to advanced editor', () => {
+    describe('when settings attributes are on problem tags', () => {
+      it('should throw error and contain message regarding opening advanced editor', () => {
+        try {
+          labelDescriptionQuestionOlxParser.getParsedOLXData();
+        } catch (e) {
+          expect(e).toBeInstanceOf(Error);
+          expect(e.message).toBe('Unrecognized attribute "markdown" associated with problem, opening in advanced editor');
+        }
+      });
+    });
+    describe('when settings attributes are on problem tags', () => {
+      it('should throw error and contain message regarding opening advanced editor', () => {
+        try {
+          shuffleOlxParser.getParsedOLXData();
+        } catch (e) {
+          expect(e).toBeInstanceOf(Error);
+          expect(e.message).toBe('Misc Tags, reverting to Advanced Editor');
+        }
+      });
+    });
+    describe('when question parser finds script tags', () => {
+      it('should throw error and contain message regarding opening advanced editor', () => {
+        const olxparser = new OLXParser(scriptProblemOlX.rawOLX);
+        expect(() => olxparser.parseQuestions('numericalresponse')).toThrow(new Error('Script Tag, reverting to Advanced Editor'));
+      });
+    });
+    describe('when multi select problem finds partial_credit attribute', () => {
+      it('should throw error and contain message regarding opening advanced editor', () => {
+        try {
+          multiSelectPartialCreditOlxParser.getParsedOLXData();
+        } catch (e) {
+          expect(e).toBeInstanceOf(Error);
+          expect(e.message).toBe('Partial credit not supported by GUI, reverting to Advanced Editor');
+        }
+      });
+    });
+    describe('when numerical problem finds partial_credit attribute', () => {
+      it('should throw error and contain message regarding opening advanced editor', () => {
+        try {
+          numericalProblemPartialCreditParser.getParsedOLXData();
+        } catch (e) {
+          expect(e).toBeInstanceOf(Error);
+          expect(e.message).toBe('Partial credit not supported by GUI, reverting to Advanced Editor');
+        }
+      });
+    });
+    describe('when single select problem finds partial_credit attribute', () => {
+      it('should throw error and contain message regarding opening advanced editor', () => {
+        try {
+          singleSelectPartialCreditParser.getParsedOLXData();
+        } catch (e) {
+          expect(e).toBeInstanceOf(Error);
+          expect(e.message).toBe('Partial credit not supported by GUI, reverting to Advanced Editor');
+        }
+      });
+    });
+    describe('when signle select problem has unexpected olx after multiplechoiceresponse tag', () => {
+      it('should throw error and contain message regarding opening advanced editor', () => {
+        const unexpectOlxAfterProblemTypeTagsParser = new OLXParser(unexpectOlxAfterProblemTypeTags.rawOLX);
+        try {
+          unexpectOlxAfterProblemTypeTagsParser.getParsedOLXData();
+        } catch (e) {
+          expect(e).toBeInstanceOf(Error);
+          expect(e.message).toBe('OLX found after the multiplechoiceresponse tags, opening in advanced editor');
+        }
+      });
+    });
+  });
+  describe('getProblemType()', () => {
+    describe('given a blank problem', () => {
+      const problemType = blankOlxParser.getProblemType();
+      it('should equal ProblemTypeKeys.MULTISELECT', () => {
+        expect(problemType).toEqual(null);
+      });
+    });
+    describe('given checkbox olx with feedback and hints', () => {
+      const problemType = checkboxOlxParser.getProblemType();
+      it('should equal ProblemTypeKeys.MULTISELECT', () => {
+        expect(problemType).toEqual(ProblemTypeKeys.MULTISELECT);
+      });
+    });
+    describe('given numeric olx with feedback and hints', () => {
+      const problemType = numericOlxParser.getProblemType();
+      it('should equal ProblemTypeKeys.NUMERIC', () => {
+        expect(problemType).toEqual(ProblemTypeKeys.NUMERIC);
+      });
+    });
+    describe('given dropdown olx with feedback and hints', () => {
+      const problemType = dropdownOlxParser.getProblemType();
+      it('should equal ProblemTypeKeys.DROPDOWN', () => {
+        expect(problemType).toEqual(ProblemTypeKeys.DROPDOWN);
+      });
+    });
+    describe('given multiple choice olx with feedback and hints', () => {
+      const problemType = multipleChoiceOlxParser.getProblemType();
+      it('should equal ProblemTypeKeys.SINGLESELECT', () => {
+        expect(problemType).toEqual(ProblemTypeKeys.SINGLESELECT);
+      });
+    });
+    describe('given text input olx with feedback and hints', () => {
+      const problemType = textInputOlxParser.getProblemType();
+      it('should equal ProblemTypeKeys.TEXTINPUT', () => {
+        expect(problemType).toEqual(ProblemTypeKeys.TEXTINPUT);
+      });
+    });
+    describe('given an advanced problem', () => {
+      const problemType = advancedOlxParser.getProblemType();
+      it('should equal ProblemTypeKeys.ADVANCED', () => {
+        expect(problemType).toEqual(ProblemTypeKeys.ADVANCED);
+      });
+    });
+    describe('given a problem with multiple text inputs', () => {
+      const problemType = multipleTextInputOlxParser.getProblemType();
+      it('should equal ProblemTypeKeys.ADVANCED', () => {
+        expect(problemType).toEqual(ProblemTypeKeys.ADVANCED);
+      });
+    });
+    describe('given a problem with multiple numeric inputs', () => {
+      const problemType = multipleNumericOlxParser.getProblemType();
+      it('should equal ProblemTypeKeys.ADVANCED', () => {
+        expect(problemType).toEqual(ProblemTypeKeys.ADVANCED);
+      });
+    });
+    describe('given a problem with both a text and numeric input', () => {
+      const problemType = numericAndTextInputOlxParser.getProblemType();
+      it('should equal ProblemTypeKeys.ADVANCED', () => {
+        expect(problemType).toEqual(ProblemTypeKeys.ADVANCED);
+      });
+    });
+  });
+  describe('getHints()', () => {
+    describe('given a problem with no hints', () => {
+      const hints = labelDescriptionQuestionOlxParser.getHints();
+      it('should return an empty array', () => {
+        expect(hints).toEqual([]);
+      });
+    });
+    describe('given checkbox olx with feedback and hints', () => {
+      const hints = checkboxOlxParser.getHints();
+      it('should equal an array of hints', () => {
+        expect(hints).toEqual(checkboxesOLXWithFeedbackAndHintsOLX.hints);
+      });
+    });
+    describe('given numeric olx with feedback and hints', () => {
+      const hints = numericOlxParser.getHints();
+      it('should equal an array of hints', () => {
+        expect(hints).toEqual(numericInputWithFeedbackAndHintsOLX.hints);
+      });
+    });
+    describe('given dropdown olx with feedback and hints', () => {
+      const hints = dropdownOlxParser.getHints();
+      it('should equal an array of hints', () => {
+        expect(hints).toEqual(dropdownOLXWithFeedbackAndHintsOLX.hints);
+      });
+    });
+    describe('given multiple choice olx with feedback and hints', () => {
+      const hints = multipleChoiceOlxParser.getHints();
+      it('should equal an array of hints', () => {
+        expect(hints).toEqual(multipleChoiceWithFeedbackAndHintsOLX.hints);
+      });
+    });
+    describe('given text input olx with feedback and hints', () => {
+      const hints = textInputOlxParser.getHints();
+      it('should equal an array of hints', () => {
+        expect(hints).toEqual(textInputWithFeedbackAndHintsOLX.hints);
+      });
+    });
+  });
+  describe('parseMultipleChoiceAnswers()', () => {
+    describe('given a problem with no answers', () => {
+      const { answers } = multipleChoiceWithoutAnswersOlxParser.parseMultipleChoiceAnswers(
+        'multiplechoiceresponse',
+        'choicegroup',
+        'choice',
+      );
+      it('should return a default answer', () => {
+        expect(answers).toEqual(multipleChoiceWithoutAnswers.data.answers);
+        expect(answers).toHaveLength(1);
+      });
+    });
+    describe('given a problem with one answer', () => {
+      const { answers } = multipleChoiceSingleAnswerOlxParser.parseMultipleChoiceAnswers(
+        'multiplechoiceresponse',
+        'choicegroup',
+        'choice',
+      );
+      it('should return a single answer', () => {
+        expect(answers).toEqual(multipleChoiceSingleAnswer.data.answers);
+        expect(answers).toHaveLength(1);
+      });
+    });
+    describe('given multiple choice olx with hex numbers and leading zeros', () => {
+      const olxparser = new OLXParser(numberParseTestOLX.rawOLX);
+      const { answers } = olxparser.parseMultipleChoiceAnswers('multiplechoiceresponse', 'choicegroup', 'choice');
+      it('should not parse hex numbers and leading zeros', () => {
+        expect(answers).toEqual(numberParseTestOLX.data.answers);
+      });
+      it('should equal an array of objects with length four', () => {
+        expect(answers).toHaveLength(4);
+      });
+    });
+    describe('given checkbox olx with feedback and hints', () => {
+      const { answers } = checkboxOlxParser.parseMultipleChoiceAnswers('choiceresponse', 'checkboxgroup', 'choice');
+      it('should equal an array of objects with length four', () => {
+        expect(answers).toEqual(checkboxesOLXWithFeedbackAndHintsOLX.data.answers);
+        expect(answers).toHaveLength(4);
+      });
+    });
+    describe('given dropdown olx with feedback and hints', () => {
+      const { answers } = dropdownOlxParser.parseMultipleChoiceAnswers('optionresponse', 'optioninput', 'option');
+      it('should equal an array of objects with length three', () => {
+        expect(answers).toEqual(dropdownOLXWithFeedbackAndHintsOLX.data.answers);
+        expect(answers).toHaveLength(3);
+      });
+    });
+    describe('given multiple choice olx with feedback and hints', () => {
+      const { answers } = multipleChoiceOlxParser.parseMultipleChoiceAnswers('multiplechoiceresponse', 'choicegroup', 'choice');
+      it('should equal an array of objects with length three', () => {
+        expect(answers).toEqual(multipleChoiceWithFeedbackAndHintsOLX.data.answers);
+        expect(answers).toHaveLength(3);
+      });
+    });
+  });
+  describe('parseStringResponse()', () => {
+    // describe('given a problem with no answers', () => {
+    //   // TODO
+    // });
+    describe('given text input olx with feedback and hints', () => {
+      const { answers } = textInputOlxParser.parseStringResponse();
+      it('should equal an array of objects with length three', () => {
+        expect(answers).toEqual(textInputWithFeedbackAndHintsOLX.data.answers);
+        expect(answers).toHaveLength(3);
+      });
+    });
+    describe('given text input olx with feedback and hints with multiple answers', () => {
+      const { answers } = textInputMultipleAnswersOlxParser.parseStringResponse();
+      it('should equal an array of objects with length four', () => {
+        expect(answers).toEqual(textInputWithFeedbackAndHintsOLXWithMultipleAnswers.data.answers);
+        expect(answers).toHaveLength(4);
+      });
+    });
+  });
+  describe('parseNumericResponse()', () => {
+    // describe('given a problem with no answers', () => {
+    //   // TODDO
+    // });
+    describe('given numeric olx with feedback and hints', () => {
+      const { answers } = numericOlxParser.parseNumericResponse();
+      it('should equal an array of objects with length two', () => {
+        expect(answers).toEqual(numericInputWithFeedbackAndHintsOLX.data.answers);
+        expect(answers).toHaveLength(2);
+      });
+    });
+  });
+  describe('parseQuestions()', () => {
+    describe('given olx with no question content', () => {
+      const olxparser = new OLXParser(blankQuestionOLX.rawOLX);
+      const problemType = olxparser.getProblemType();
+      const question = olxparser.parseQuestions(problemType);
+      it('should return an empty string for question', () => {
+        expect(question.trim()).toBe(blankQuestionOLX.question);
+      });
+    });
+    describe('given a simple problem olx', () => {
+      const question = textInputOlxParser.parseQuestions('stringresponse');
+      it('should return a string of HTML', () => {
+        expect(question.trim()).toEqual(textInputWithFeedbackAndHintsOLX.question);
+      });
+    });
+    describe('given olx with html entities', () => {
+      const olxparser = new OLXParser(htmlEntityTestOLX.rawOLX);
+      const problemType = olxparser.getProblemType();
+      const question = olxparser.parseQuestions(problemType);
+      it('should not encode html entities', () => {
+        expect(question.trim()).toEqual(htmlEntityTestOLX.question);
+      });
+    });
+    describe('given olx with styled content', () => {
+      const olxparser = new OLXParser(styledQuestionOLX.rawOLX);
+      const problemType = olxparser.getProblemType();
+      const question = olxparser.parseQuestions(problemType);
+      it('should pase/build correct styling', () => {
+        expect(question.trim()).toBe(styledQuestionOLX.question);
+      });
+    });
+    describe('given olx with label and description tags inside response tag', () => {
+      const olxparser = new OLXParser(labelDescriptionQuestionOLX.rawOLX);
+      const problemType = olxparser.getProblemType();
+      const question = olxparser.parseQuestions(problemType);
+      it('should append the label/description to the question, converting description to <em> with "olx_description" class', () => {
+        expect(question.trim()).toBe(labelDescriptionQuestionOLX.question);
+      });
+    });
+    describe('given olx with table tags', () => {
+      const olxparser = new OLXParser(tablesInRichTextTest.rawOLX);
+      const problemType = olxparser.getProblemType();
+      const question = olxparser.parseQuestions(problemType);
+      it('should append the table to the question', () => {
+        expect(question.trim()).toBe(tablesInRichTextTest.question);
+      });
+    });
+  });
+  describe('getSolutionExplanation()', () => {
+    describe('for checkbox questions', () => {
+      test('should parse text in p tags', () => {
+        const olxparser = new OLXParser(checkboxesOLXWithFeedbackAndHintsOLX.rawOLX);
+        const problemType = olxparser.getProblemType();
+        const explanation = olxparser.getSolutionExplanation(problemType);
+        const expected = checkboxesOLXWithFeedbackAndHintsOLX.solutionExplanation;
+        expect(explanation.replace(/\s/g, '')).toBe(expected.replace(/\s/g, ''));
+      });
+    });
+    it('should parse text with proper spacing', () => {
+      const olxparser = new OLXParser(solutionExplanationTest.rawOLX);
+      const problemType = olxparser.getProblemType();
+      const explanation = olxparser.getSolutionExplanation(problemType);
+      expect(explanation).toBe(solutionExplanationTest.solutionExplanation);
+    });
+    it('should parse solution fields without div', () => {
+      const olxparser = new OLXParser(solutionExplanationWithoutDivTest.rawOLX);
+      const problemType = olxparser.getProblemType();
+      const explanation = olxparser.getSolutionExplanation(problemType);
+      expect(explanation).toBe(solutionExplanationWithoutDivTest.solutionExplanation);
+    });
+    it('should parse out <p>Explanation</p>', () => {
+      const olxparser = new OLXParser(parseOutExplanationTests.rawOLX);
+      const problemType = olxparser.getProblemType();
+      const explanation = olxparser.getSolutionExplanation(problemType);
+      expect(explanation).toBe(parseOutExplanationTests.solutionExplanation);
+    });
+  });
+});
diff --git a/src/editors/containers/ProblemEditor/data/ReactStateOLXParser.js b/src/editors/containers/ProblemEditor/data/ReactStateOLXParser.js
new file mode 100644
index 0000000000..673763de61
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/data/ReactStateOLXParser.js
@@ -0,0 +1,523 @@
+import _ from 'lodash';
+import { XMLParser, XMLBuilder } from 'fast-xml-parser';
+import { ProblemTypeKeys } from '../../../data/constants/problem';
+import { ToleranceTypes } from '../components/EditProblemView/SettingsWidget/settingsComponents/Tolerance/constants';
+import { findNodesAndRemoveTheirParentNodes } from './reactStateOLXHelpers';
+
+const HtmlBlockTags = ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'div', 'pre', 'blockquote', 'ol', 'ul', 'li', 'dl', 'dt', 'dd', 'hr', 'table', 'thead', 'caption', 'tbody', 'tr', 'th', 'td', 'colgroup', 'col', 'address', 'fieldset', 'legend'];
+
+class ReactStateOLXParser {
+  constructor(problemState) {
+    const richTextParserOptions = {
+      ignoreAttributes: false,
+      alwaysCreateTextNode: true,
+      numberParseOptions: {
+        leadingZeros: false,
+        hex: false,
+      },
+      preserveOrder: true,
+      // Ensure whitespace inside <pre> tags is preserved
+      trimValues: false,
+      // Parse <br> correctly
+      unpairedTags: ['br'],
+    };
+    const richTextBuilderOptions = {
+      ignoreAttributes: false,
+      attributeNamePrefix: '@_',
+      suppressBooleanAttributes: false,
+      // Avoid formatting as it adds unwanted newlines and whitespace,
+      // breaking <pre> tags
+      format: false,
+      numberParseOptions: {
+        leadingZeros: false,
+        hex: false,
+      },
+      preserveOrder: true,
+      unpairedTags: ['br'],
+      // Output <br/> rather than <br>
+      suppressUnpairedNode: false,
+    };
+
+    this.richTextParser = new XMLParser(richTextParserOptions);
+    this.richTextBuilder = new XMLBuilder(richTextBuilderOptions);
+    this.editorObject = problemState.editorObject;
+    this.problemState = problemState.problem;
+  }
+
+  /** addHints()
+   * The editorObject saved to the class constuctor is parsed for the attribute hints. No hints returns an empty object.
+   * The hints are parsed and appended to the hintsArray as object representations of the hint. The hints array is saved
+   * to the hint key in the demandHint object and returned.
+   * @return {object} demandhint object with atrribut hint with array of objects
+   */
+  addHints() {
+    const hintsArray = [];
+    const { hints } = this.editorObject;
+    if (hints.length < 1) {
+      return hintsArray;
+    }
+    hints.forEach(hint => {
+      if (hint.length > 0) {
+        const parsedHint = this.richTextParser.parse(hint);
+        hintsArray.push({
+          hint: [...parsedHint],
+        });
+      }
+    });
+    const demandhint = [{ demandhint: hintsArray }];
+    return demandhint;
+  }
+
+  /** addSolution()
+   * The editorObject saved to the class constuctor is parsed for the attribute solution. If the soltuion is empty, it
+   * returns an empty object. The solution is parsed and checked if paragraph key's value is a string or array. Studio
+   * requires a div wrapper with a heading (Explanation). The heading is prepended to the parsed solution object. The
+   * solution object is returned with the updated div wrapper.
+   * @return {object} object representation of solution
+   */
+  addSolution() {
+    const { solution } = this.editorObject;
+    if (!solution || solution.length <= 0) { return []; }
+    const solutionTitle = { p: [{ '#text': 'Explanation' }] };
+    const parsedSolution = this.richTextParser.parse(solution);
+    const withWrapper = [solutionTitle, ...parsedSolution];
+    const solutionObject = [{
+      solution: [{
+        ':@': { '@_class': 'detailed-solution' },
+        div: [...withWrapper],
+      }],
+    }];
+    return solutionObject;
+  }
+
+  /** addMultiSelectAnswers(option)
+   * addMultiSelectAnswers takes option. Option is used to assign an answers to the
+   * correct OLX tag. This function is used for multiple choice, checkbox, and
+   * dropdown problems. The editorObject saved to the class constuctor is parsed for
+   * answers (titles only), selectFeedback, and unselectedFeedback. The problemState
+   * saved to the class constructor is parsed for the problemType and answers (full
+   * object). The answers are looped through to  pair feedback with its respective
+   * OLX tags. While matching feedback tags, answers are also mapped to their
+   * respective OLX tags. he object representation of the answers is returned with
+   * the correct wrapping tags. For checkbox problems, compound hints are also returned.
+   * @param {string} option - string of answer tag name
+   * @return {object} object representation of answers
+   */
+  addMultiSelectAnswers(option) {
+    const choice = [];
+    let compoundhint = [];
+    // eslint-disable-next-line prefer-const
+    let { answers, problemType } = this.problemState;
+    const answerTitles = this.editorObject?.answers;
+    const { selectedFeedback, unselectedFeedback } = this.editorObject;
+    /* todo */
+    /*
+      * the logic for general  feedback is ot current being used.
+      * when component is updated will need to return to this code.
+      * general feedback replaces selected feedback if all incorrect selected feedback is the same.
+      * ******************************************
+    if (generalFeedback !== ''
+    && answers.every(
+      answer => (
+        answer.correct
+          ? true
+          : answer?.selectedFeedback === answers.find(a => a.correct === false).selectedFeedback
+      ),
+    )) {
+      answers = answers.map(answer => (!answer?.correct
+        ? { ...answer, selectedFeedback: generalFeedback }
+        : answer));
+    }
+    */
+    answers.forEach((answer) => {
+      const feedback = [];
+      let singleAnswer = [];
+      const title = answerTitles ? this.richTextParser.parse(answerTitles[answer.id]) : [{ '#text': answer.title }];
+      const currentSelectedFeedback = selectedFeedback?.[answer.id] || null;
+      const currentUnselectedFeedback = unselectedFeedback?.[answer.id] || null;
+      let isEmpty;
+      if (answerTitles) {
+        isEmpty = Object.keys(title)?.length <= 0;
+      } else {
+        isEmpty = title['#text']?.length <= 0;
+      }
+      if (title && !isEmpty) {
+        if (currentSelectedFeedback && problemType === ProblemTypeKeys.MULTISELECT) {
+          const parsedSelectedFeedback = this.richTextParser.parse(currentSelectedFeedback);
+          feedback.push({
+            ':@': { '@_selected': true },
+            [`${option}hint`]: parsedSelectedFeedback,
+          });
+        }
+        if (currentSelectedFeedback && problemType !== ProblemTypeKeys.MULTISELECT) {
+          const parsedSelectedFeedback = this.richTextParser.parse(currentSelectedFeedback);
+          feedback.push({
+            [`${option}hint`]: parsedSelectedFeedback,
+          });
+        }
+        if (currentUnselectedFeedback && problemType === ProblemTypeKeys.MULTISELECT) {
+          const parsedUnselectedFeedback = this.richTextParser.parse(currentUnselectedFeedback);
+          feedback.push({
+            ':@': { '@_selected': false },
+            [`${option}hint`]: parsedUnselectedFeedback,
+          });
+        }
+        singleAnswer = {
+          ':@': { '@_correct': answer.correct },
+          [option]: [...title, ...feedback],
+        };
+        choice.push(singleAnswer);
+      }
+    });
+    if (_.has(this.problemState, 'groupFeedbackList') && problemType === ProblemTypeKeys.MULTISELECT) {
+      compoundhint = this.addGroupFeedbackList();
+      choice.push(...compoundhint);
+    }
+    return choice;
+  }
+
+  /** addGroupFeedbackList()
+   * The problemState saved to the class constuctor is parsed for the attribute groupFeedbackList.
+   * No group feedback returns an empty array. Each groupFeedback in the groupFeedback list is
+   * mapped to a new object and appended to the compoundhint array.
+   * @return {object} object representation of compoundhints
+   */
+  addGroupFeedbackList() {
+    const compoundhint = [];
+    const { groupFeedbackList } = this.problemState;
+    groupFeedbackList.forEach((element) => {
+      compoundhint.push({
+        compoundhint: [{ '#text': element.feedback }],
+        ':@': { '@_value': element.answers.join(' ') },
+      });
+    });
+    return compoundhint;
+  }
+
+  /** addQuestion()
+   * The editorObject saved to the class constuctor is parsed for the attribute question. The question is parsed and
+   * checked for label tags. label tags are extracted from block-type tags like <p> or <h1>, and the block-type tag is
+   * deleted while label is kept. For example, <p><label>Question</label></p> becomes <label>Question</label>, while
+   * <p><span>Text</span></p> remains <p><span>Text</span></p>. The question is returned as an object representation.
+   * @return {object} object representaion of question
+   */
+  addQuestion() {
+    const { question } = this.editorObject;
+    const questionObjectArray = this.richTextParser.parse(question);
+    /* Removes block tags like <p> or <h1> that surround the <label> format.
+      Block tags are required by tinyMCE but have adverse effect on css in studio.
+      */
+    const result = findNodesAndRemoveTheirParentNodes({
+      arrayOfNodes: questionObjectArray,
+      nodesToFind: ['label'],
+      parentsToRemove: HtmlBlockTags,
+    });
+
+    return result;
+  }
+
+  // findNodesWithChildTags(nodes, tagNames, recursive=false) {
+  //   const result = [];
+
+  /** buildMultiSelectProblem()
+   * OLX builder for multiple choice, checkbox, and dropdown problems. The question
+   * builder has a different format than the other parts (demand hint, answers, and
+   * solution) of the problem so it has to be inserted into the OLX after the rest
+   * of the problem is built.
+   * @param {string} problemType - string of problem type tag
+   * @param {string} widget - string of answer tag name
+   * @param {string} option - string of feedback tag name
+   * @return {string} string of OLX
+   */
+  buildMultiSelectProblem(problemType, widget, option) {
+    const question = this.addQuestion();
+    const widgetObject = this.addMultiSelectAnswers(option);
+    const demandhint = this.addHints();
+    const solution = this.addSolution();
+
+    const problemBodyArr = [{
+      [problemType]: [
+        { [widget]: widgetObject },
+        ...solution,
+      ],
+    }];
+
+    const questionString = this.richTextBuilder.build(question);
+    const hintString = this.richTextBuilder.build(demandhint);
+    const problemBody = this.richTextBuilder.build(problemBodyArr);
+    let problemTypeTag;
+
+    switch (problemType) {
+      case ProblemTypeKeys.MULTISELECT:
+        [problemTypeTag] = problemBody.match(/<choiceresponse>|<choiceresponse.[^>]+>/);
+        break;
+      case ProblemTypeKeys.DROPDOWN:
+        [problemTypeTag] = problemBody.match(/<optionresponse>|<optionresponse.[^>]+>/);
+        break;
+      case ProblemTypeKeys.SINGLESELECT:
+        [problemTypeTag] = problemBody.match(/<multiplechoiceresponse>|<multiplechoiceresponse.[^>]+>/);
+        break;
+      default:
+        break;
+    }
+    const questionStringWithEmDescriptionReplace = this.replaceEmWithDescriptionTag(questionString);
+    const updatedString = `${problemTypeTag}\n${questionStringWithEmDescriptionReplace}`;
+    const problemBodyString = problemBody.replace(problemTypeTag, updatedString);
+    const fullProblemString = `<problem>${problemBodyString}${hintString}\n</problem>`;
+
+    return fullProblemString;
+  }
+
+  replaceEmWithDescriptionTag(xmlString) {
+    const regexPattern = /<em class="olx_description">(.*?)<\/em>/g;
+    const replacement = '<description>$1</description>';
+
+    const updatedHtml = xmlString.replace(regexPattern, replacement);
+    return updatedHtml;
+  }
+
+  /** buildTextInput()
+   * String response OLX builder. The question builder has a different format than the
+   * other parts (demand hint, answers, and solution) of the problem so it has to be
+   * inserted into the OLX after the rest of the problem is built.
+   * @return {string} string of string response OLX
+   */
+  buildTextInput() {
+    const question = this.addQuestion();
+    const demandhint = this.addHints();
+    const answerObject = this.buildTextInputAnswersFeedback();
+    const solution = this.addSolution();
+
+    answerObject[ProblemTypeKeys.TEXTINPUT].push(...solution);
+
+    const problemBody = this.richTextBuilder.build([answerObject]);
+    const questionString = this.richTextBuilder.build(question);
+    const hintString = this.richTextBuilder.build(demandhint);
+    const [problemTypeTag] = problemBody.match(/<stringresponse>|<stringresponse.[^>]+>/);
+    const updatedString = `${problemTypeTag}\n${questionString}`;
+    const problemBodyString = problemBody.replace(problemTypeTag, updatedString);
+    const fullProblemString = `<problem>${problemBodyString}${hintString}\n</problem>`;
+
+    return fullProblemString;
+  }
+
+  /** buildTextInputAnswersFeedback()
+   * The editorObject saved to the class constuctor is parsed for the attribute
+   * selectedFeedback. String response problems have two types of feedback tags,
+   * correcthint and stringequalhint. Correcthint is for feedback associated with
+   * correct answers and stringequalhint is for feedback associated with wrong
+   * answers. The answers are fetched from the problemState and looped through to
+   * pair feedback with its respective OLX tags. While matching feedback tags,
+   * answers are also mapped to their respective OLX tags. The first correct
+   * answer is wrapped in stringreponse tag. All other correct answers are wrapped
+   * in additonal_answer tags. Incorrect answers are wrapped in stringequalhint
+   * tags. The object representation of the answers is returned with the correct
+   * wrapping tags.
+   * @return {object} object representation of answers
+   */
+  buildTextInputAnswersFeedback() {
+    const { answers, problemType } = this.problemState;
+    const { selectedFeedback } = this.editorObject;
+    let answerObject = { [problemType]: [] };
+    let firstCorrectAnswerParsed = false;
+    answers.forEach((answer) => {
+      const correcthint = this.getAnswerHints(selectedFeedback?.[answer.id]);
+      if (this.hasAttributeWithValue(answer, 'title')) {
+        if (answer.correct && firstCorrectAnswerParsed) {
+          answerObject[problemType].push({
+            ':@': { '@_answer': answer.title },
+            additional_answer: [...correcthint],
+          });
+        } else if (answer.correct && !firstCorrectAnswerParsed) {
+          firstCorrectAnswerParsed = true;
+          answerObject = {
+            ':@': {
+              '@_answer': answer.title,
+              '@_type': _.get(this.problemState, 'additionalAttributes.type', 'ci'),
+            },
+            [problemType]: [...correcthint],
+          };
+        } else if (!answer.correct) {
+          const wronghint = correcthint[0]?.correcthint;
+          answerObject[problemType].push({
+            ':@': { '@_answer': answer.title },
+            stringequalhint: wronghint ? [...wronghint] : [],
+          });
+        }
+      }
+    });
+    answerObject[problemType].push({
+      textline: { '#text': '' },
+      ':@': { '@_size': _.get(this.problemState, 'additionalAttributes.textline.size', 20) },
+    });
+    return answerObject;
+  }
+
+  /** buildNumericInput()
+   * Numeric response OLX builder. The question builder has a different format than the
+   * other parts (demand hint, answers, and solution) of the problem so it has to be
+   * inserted into the OLX after the rest of the problem is built.
+   * @return {string} string of numeric response OLX
+   */
+  buildNumericInput() {
+    const question = this.addQuestion();
+    const demandhint = this.addHints();
+    const answerObject = this.buildNumericalResponse();
+    const solution = this.addSolution();
+
+    answerObject[ProblemTypeKeys.NUMERIC].push(...solution);
+
+    const problemBody = this.richTextBuilder.build([answerObject]);
+    const questionString = this.richTextBuilder.build(question);
+    const hintString = this.richTextBuilder.build(demandhint);
+    const [problemTypeTag] = problemBody.match(/<numericalresponse>|<numericalresponse.[^>]+>/);
+    const updatedString = `${questionString}\n${problemTypeTag}`;
+    const problemBodyString = problemBody.replace(problemTypeTag, updatedString);
+    const fullProblemString = `<problem>${problemBodyString}${hintString}\n</problem>`;
+
+    return fullProblemString;
+  }
+
+  /** buildNumericalResponse()
+   * The editorObject saved to the class constuctor is parsed for the attribute
+   * selectedFeedback. The tolerance is fetched from the problemState settings.
+   * The answers are fetched from the problemState and looped through to
+   * pair feedback with its respective OLX tags. While matching feedback tags,
+   * answers are also mapped to their respective OLX tags. For each answer, if
+   * it is an answer range, it is santized to be less than to great than. The
+   * first answer is wrapped in numericresponse tag. All other answers are
+   * wrapped in additonal_answer tags. The object representation of the answers
+   * is returned with the correct  wrapping tags.
+   * @return {object} object representation of answers
+   */
+  buildNumericalResponse() {
+    const { answers, problemType } = this.problemState;
+    const { tolerance } = this.problemState.settings;
+    const { selectedFeedback } = this.editorObject;
+    let answerObject = { [problemType]: [] };
+    let firstCorrectAnswerParsed = false;
+    answers.forEach((answer) => {
+      const correcthint = this.getAnswerHints(selectedFeedback?.[answer.id]);
+      if (this.hasAttributeWithValue(answer, 'title')) {
+        let { title } = answer;
+        if (title.startsWith('(') || title.startsWith('[')) {
+          const parsedRange = title.split(',');
+          const [rawLowerBound, rawUpperBound] = parsedRange;
+          let lowerBoundInt;
+          let lowerBoundFraction;
+          let upperBoundInt;
+          let upperBoundFraction;
+          if (rawLowerBound.includes('/')) {
+            lowerBoundFraction = rawLowerBound.replace(/[^0-9-/]/gm, '');
+            const [numerator, denominator] = lowerBoundFraction.split('/');
+            const lowerBoundFloat = Number(numerator) / Number(denominator);
+            lowerBoundInt = lowerBoundFloat;
+          } else {
+            // these regex replaces remove everything that is not a decimal or positive/negative numer
+            lowerBoundInt = Number(rawLowerBound.replace(/[^0-9-.]/gm, ''));
+          }
+          if (rawUpperBound.includes('/')) {
+            upperBoundFraction = rawUpperBound.replace(/[^0-9-/]/gm, '');
+            const [numerator, denominator] = upperBoundFraction.split('/');
+            const upperBoundFloat = Number(numerator) / Number(denominator);
+            upperBoundInt = upperBoundFloat;
+          } else {
+            // these regex replaces remove everything that is not a decimal or positive/negative numer
+            upperBoundInt = Number(rawUpperBound.replace(/[^0-9-.]/gm, ''));
+          }
+          if (lowerBoundInt > upperBoundInt) {
+            const lowerBoundChar = rawUpperBound[rawUpperBound.length - 1] === ']' ? '[' : '(';
+            const upperBoundChar = rawLowerBound[0] === '[' ? ']' : ')';
+            if (lowerBoundFraction) {
+              lowerBoundInt = lowerBoundFraction;
+            }
+            if (upperBoundFraction) {
+              upperBoundInt = upperBoundFraction;
+            }
+            title = `${lowerBoundChar}${upperBoundInt},${lowerBoundInt}${upperBoundChar}`;
+          }
+        }
+        if (answer.correct && !firstCorrectAnswerParsed) {
+          firstCorrectAnswerParsed = true;
+          const responseParam = [];
+          if (tolerance?.value) {
+            responseParam.push({
+              responseparam: [],
+              ':@': {
+                '@_type': 'tolerance',
+                '@_default': `${tolerance.value}${tolerance.type === ToleranceTypes.number.type ? '' : '%'}`,
+              },
+            });
+          }
+          answerObject = {
+            ':@': { '@_answer': title },
+            [problemType]: [...responseParam, ...correcthint],
+          };
+        } else if (answer.correct && firstCorrectAnswerParsed) {
+          answerObject[problemType].push({
+            ':@': { '@_answer': title },
+            additional_answer: [...correcthint],
+          });
+        }
+      }
+    });
+    answerObject[problemType].push({ formulaequationinput: { '#text': '' } });
+    return answerObject;
+  }
+
+  /** getAnswerHints(feedback)
+   * getAnswerHints takes feedback. The feedback is checked for definition. If feedback is
+   * undefined or an empty string, it returns an empty object. The defined feedback is
+   * parsed and saved to the key correcthint. Correcthint is the tag name for
+   * numeric response and string response feedback.
+   * @param {string} feedback - string of feedback
+   * @return {object} object representaion of feedback
+   */
+  getAnswerHints(feedback) {
+    const correcthint = [];
+    if (feedback !== undefined && feedback !== '') {
+      const parsedFeedback = this.richTextParser.parse(feedback);
+      correcthint.push({ correcthint: parsedFeedback });
+    }
+    return correcthint;
+  }
+
+  /** hasAttributeWithValue(obj, attr)
+   * hasAttributeWithValue takes obj and atrr. The obj is checked for the attribute defined by attr.
+   * Returns true if attribute is present, otherwise false.
+   * @param {object} obj - defined object
+   * @param {string} attr - string of desired attribute
+   * @return {bool}
+   */
+  hasAttributeWithValue(obj, attr) {
+    return _.has(obj, attr) && _.get(obj, attr, '').toString().trim() !== '';
+  }
+
+  buildOLX() {
+    const { problemType } = this.problemState;
+    let problemString = '';
+
+    switch (problemType) {
+      case ProblemTypeKeys.MULTISELECT:
+        problemString = this.buildMultiSelectProblem(ProblemTypeKeys.MULTISELECT, 'checkboxgroup', 'choice');
+        break;
+      case ProblemTypeKeys.DROPDOWN:
+        problemString = this.buildMultiSelectProblem(ProblemTypeKeys.DROPDOWN, 'optioninput', 'option');
+        break;
+      case ProblemTypeKeys.SINGLESELECT:
+        problemString = this.buildMultiSelectProblem(ProblemTypeKeys.SINGLESELECT, 'choicegroup', 'choice');
+        break;
+      case ProblemTypeKeys.TEXTINPUT:
+        problemString = this.buildTextInput();
+        break;
+      case ProblemTypeKeys.NUMERIC:
+        problemString = this.buildNumericInput();
+        break;
+      default:
+        break;
+    }
+    return problemString;
+  }
+}
+
+export default ReactStateOLXParser;
diff --git a/src/editors/containers/ProblemEditor/data/ReactStateOLXParser.test.js b/src/editors/containers/ProblemEditor/data/ReactStateOLXParser.test.js
new file mode 100644
index 0000000000..416fafdcd8
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/data/ReactStateOLXParser.test.js
@@ -0,0 +1,150 @@
+import { OLXParser } from './OLXParser';
+import {
+  checkboxesOLXWithFeedbackAndHintsOLX,
+  dropdownOLXWithFeedbackAndHintsOLX,
+  numericInputWithFeedbackAndHintsOLX,
+  numericInputWithAnswerRangeOLX,
+  textInputWithFeedbackAndHintsOLX,
+  multipleChoiceWithFeedbackAndHintsOLX,
+  textInputWithFeedbackAndHintsOLXWithMultipleAnswers,
+  numberParseTestOLX,
+} from './mockData/olxTestData';
+import {
+  checkboxesWithFeedbackAndHints,
+  dropdownWithFeedbackAndHints,
+  textInputWithFeedbackAndHints,
+  multipleChoiceWithFeedbackAndHints,
+  numericInputWithFeedbackAndHints,
+  numericInputWithAnswerRange,
+  textInputWithFeedbackAndHintsWithMultipleAnswers,
+  numberParseTest,
+} from './mockData/editorTestData';
+import ReactStateOLXParser from './ReactStateOLXParser';
+
+describe('Check React State OLXParser problem', () => {
+  test('for checkbox with feedback and hints problem type', () => {
+    const olxparser = new OLXParser(checkboxesOLXWithFeedbackAndHintsOLX.rawOLX);
+    const problem = olxparser.getParsedOLXData();
+    const stateParser = new ReactStateOLXParser({
+      problem,
+      editorObject: checkboxesWithFeedbackAndHints,
+    });
+    const buildOLX = stateParser.buildOLX();
+    expect(buildOLX.replace(/\s/g, '')).toBe(checkboxesOLXWithFeedbackAndHintsOLX.buildOLX.replace(/\s/g, ''));
+  });
+  test('Test dropdown with feedback and hints problem type', () => {
+    const olxparser = new OLXParser(dropdownOLXWithFeedbackAndHintsOLX.rawOLX);
+    const problem = olxparser.getParsedOLXData();
+    const stateParser = new ReactStateOLXParser({
+      problem,
+      editorObject: dropdownWithFeedbackAndHints,
+    });
+    const buildOLX = stateParser.buildOLX();
+    expect(buildOLX.replace(/\s/g, '')).toEqual(dropdownOLXWithFeedbackAndHintsOLX.buildOLX.replace(/\s/g, ''));
+  });
+  test('Test string response with feedback and hints problem type', () => {
+    const olxparser = new OLXParser(textInputWithFeedbackAndHintsOLX.rawOLX);
+    const problem = olxparser.getParsedOLXData();
+    const stateParser = new ReactStateOLXParser({
+      problem,
+      editorObject: textInputWithFeedbackAndHints,
+    });
+    const buildOLX = stateParser.buildOLX();
+    expect(buildOLX.replace(/\s/g, '')).toEqual(textInputWithFeedbackAndHintsOLX.buildOLX.replace(/\s/g, ''));
+  });
+  describe('Multiple choice with feedback and hints problem type', () => {
+    const olxparser = new OLXParser(multipleChoiceWithFeedbackAndHintsOLX.rawOLX);
+    const problem = olxparser.getParsedOLXData();
+    const stateParser = new ReactStateOLXParser({
+      problem,
+      editorObject: multipleChoiceWithFeedbackAndHints,
+    });
+
+    it('should parse correctly', () => {
+      const buildOLX = stateParser.buildOLX();
+      expect(buildOLX.replace(/\s/g, '')).toEqual(multipleChoiceWithFeedbackAndHintsOLX.buildOLX.replace(/\s/g, ''));
+    });
+  });
+
+  describe('with label and em tag wrapped in div: ', () => {
+    const olxparser = new OLXParser(multipleChoiceWithFeedbackAndHintsOLX.rawOLX);
+    const problem = olxparser.getParsedOLXData();
+    const stateParser = new ReactStateOLXParser({
+      problem,
+      editorObject: multipleChoiceWithFeedbackAndHints,
+    });
+    stateParser.editorObject.question = '<p>You can use this template as a guide to the simple editor markdown and OLX markup to use for multiple choice with hints and feedback problems. Edit this component to replace this template with your own assessment.</p>\n<div><label>Add the question text, or prompt, here. This text is required.</label> <em class="olx_description">You can add an optional tip or note related to the prompt like this. </em><em>Just a generic em tag</em></div>';
+
+    it('parser should not delete <em> tags', () => {
+      const buildOLX = stateParser.buildOLX();
+      expect(buildOLX.replace(/\s/g, '')).toEqual(multipleChoiceWithFeedbackAndHintsOLX.buildOLX.replace(/\s/g, ''));
+    });
+
+    it('addQuestion method should add a question to the problemState correctly', () => {
+      const received = stateParser.addQuestion();
+      expect(received).toEqual(
+        [
+          { p: [{ '#text': 'You can use this template as a guide to the simple editor markdown and OLX markup to use for multiple choice with hints and feedback problems. Edit this component to replace this template with your own assessment.' }] },
+          { label: [{ '#text': 'Add the question text, or prompt, here. This text is required.' }] },
+          { '#text': ' ' },
+          { em: [{ '#text': 'You can add an optional tip or note related to the prompt like this. ' }], ':@': { '@_class': 'olx_description' } },
+          { em: [{ '#text': 'Just a generic em tag' }] },
+        ],
+      );
+    });
+  });
+
+  test('Test numerical response with feedback and hints problem type', () => {
+    const olxparser = new OLXParser(numericInputWithFeedbackAndHintsOLX.rawOLX);
+    const problem = olxparser.getParsedOLXData();
+    const stateParser = new ReactStateOLXParser({
+      problem,
+      editorObject: numericInputWithFeedbackAndHints,
+    });
+    const buildOLX = stateParser.buildOLX();
+    expect(buildOLX.replace(/\s/g, '')).toEqual(numericInputWithFeedbackAndHintsOLX.buildOLX.replace(/\s/g, ''));
+  });
+
+  test('Test numerical response with isAnswerRange true', () => {
+    const olxparser = new OLXParser(numericInputWithAnswerRangeOLX.rawOLX);
+    const problem = olxparser.getParsedOLXData();
+    const stateParser = new ReactStateOLXParser({
+      problem,
+      editorObject: numericInputWithAnswerRange,
+    });
+    const buildOLX = stateParser.buildOLX();
+    expect(buildOLX.replace(/\s/g, '')).toEqual(numericInputWithAnswerRangeOLX.buildOLX.replace(/\s/g, ''));
+  });
+  test('Test string response with feedback and hints, multiple answers', () => {
+    const olxparser = new OLXParser(textInputWithFeedbackAndHintsOLXWithMultipleAnswers.rawOLX);
+    const problem = olxparser.getParsedOLXData();
+    const stateParser = new ReactStateOLXParser({
+      problem,
+      editorObject: textInputWithFeedbackAndHintsWithMultipleAnswers,
+    });
+    const buildOLX = stateParser.buildOLX();
+    expect(buildOLX.replace(/\s/g, '')).toEqual(textInputWithFeedbackAndHintsOLXWithMultipleAnswers.buildOLX.replace(/\s/g, ''));
+  });
+  describe('encode/decode', () => {
+    test('does not change hex values to dec and does not remove leading 0s', () => {
+      const olxparser = new OLXParser(numberParseTestOLX.rawOLX);
+      const problem = olxparser.getParsedOLXData();
+      const stateParser = new ReactStateOLXParser({
+        problem,
+        editorObject: numberParseTest,
+      });
+      const buildOLX = stateParser.buildOLX();
+      expect(buildOLX.replace(/\s/g, '')).toEqual(numberParseTestOLX.buildOLX.replace(/\s/g, ''));
+    });
+    test('correctly preserves whitespace inside pre tags', () => {
+      const stateParser = new ReactStateOLXParser({
+        problem: { problemType: 'optionresponse', answers: [] },
+        editorObject: { question: '<pre>  1  a<br />  2  b<br /></pre>', hints: [] },
+      });
+      const buildOLX = stateParser.buildOLX();
+      expect(buildOLX).toEqual(
+        '<problem><optionresponse>\n<pre>  1  a<br/>  2  b<br/></pre><optioninput></optioninput></optionresponse>\n</problem>',
+      );
+    });
+  });
+});
diff --git a/src/editors/containers/ProblemEditor/data/ReactStateSettingsParser.js b/src/editors/containers/ProblemEditor/data/ReactStateSettingsParser.js
new file mode 100644
index 0000000000..49ddac5324
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/data/ReactStateSettingsParser.js
@@ -0,0 +1,74 @@
+import { XMLParser } from 'fast-xml-parser';
+import _ from 'lodash';
+
+import {
+  ShowAnswerTypesKeys,
+} from '../../../data/constants/problem';
+import { popuplateItem } from './SettingsParser';
+
+const SETTING_KEYS = [
+  'max_attempts',
+  'weight',
+  'showanswer',
+  'show_reset_button',
+  'rerandomize',
+];
+
+class ReactStateSettingsParser {
+  constructor(problemState) {
+    this.problem = problemState.problem;
+    this.rawOLX = problemState.rawOLX;
+  }
+
+  getSettings() {
+    let settings = {};
+    const { defaultSettings } = this.problem;
+    const stateSettings = this.problem.settings;
+
+    const numberOfAttemptsChoice = [
+      ShowAnswerTypesKeys.AFTER_SOME_NUMBER_OF_ATTEMPTS,
+      ShowAnswerTypesKeys.AFTER_ALL_ATTEMPTS,
+      ShowAnswerTypesKeys.AFTER_ALL_ATTEMPTS_OR_CORRECT,
+    ];
+
+    settings = popuplateItem(settings, 'number', 'max_attempts', stateSettings.scoring.attempts, defaultSettings?.maxAttempts, true);
+    settings = popuplateItem(settings, 'weight', 'weight', stateSettings.scoring);
+    settings = popuplateItem(settings, 'on', 'showanswer', stateSettings.showAnswer, defaultSettings?.showanswer);
+    if (_.includes(numberOfAttemptsChoice, stateSettings.showAnswer.on)) {
+      settings = popuplateItem(settings, 'afterAttempts', 'attempts_before_showanswer_button', stateSettings.showAnswer);
+    }
+    settings = popuplateItem(settings, 'showResetButton', 'show_reset_button', stateSettings, defaultSettings?.showResetButton);
+    settings = popuplateItem(settings, 'timeBetween', 'submission_wait_seconds', stateSettings);
+    settings = popuplateItem(settings, 'randomization', 'rerandomize', stateSettings, defaultSettings?.rerandomize);
+
+    return settings;
+  }
+
+  parseRawOlxSettings() {
+    const rawOlxSettings = this.getSettings();
+    const parserOptions = {
+      ignoreAttributes: false,
+      alwaysCreateTextNode: true,
+      numberParseOptions: {
+        leadingZeros: false,
+        hex: false,
+      },
+    };
+    const parser = new XMLParser(parserOptions);
+    const olx = parser.parse(this.rawOLX);
+    const settingAttributes = Object.keys(olx.problem).filter(tag => tag.startsWith('@_'));
+    settingAttributes.forEach(attribute => {
+      const attributeKey = attribute.substring(2);
+      if (SETTING_KEYS.includes(attributeKey)) {
+        if (attributeKey === 'max_attempts' || attributeKey === 'weight') {
+          rawOlxSettings[attributeKey] = parseInt(olx.problem[attribute], 10);
+        } else {
+          rawOlxSettings[attributeKey] = olx.problem[attribute];
+        }
+      }
+    });
+    return rawOlxSettings;
+  }
+}
+
+export default ReactStateSettingsParser;
diff --git a/src/editors/containers/ProblemEditor/data/ReactStateSettingsParser.test.js b/src/editors/containers/ProblemEditor/data/ReactStateSettingsParser.test.js
new file mode 100644
index 0000000000..0979dd3a85
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/data/ReactStateSettingsParser.test.js
@@ -0,0 +1,20 @@
+import ReactStateSettingsParser from './ReactStateSettingsParser';
+import {
+  checklistWithFeebackHints,
+} from './mockData/problemTestData';
+
+describe('Test State to Settings Parser', () => {
+  test('Test settings parsed from react state', () => {
+    const settings = new ReactStateSettingsParser({ problem: checklistWithFeebackHints.state }).getSettings();
+    const { markdown, ...settingsPayload } = checklistWithFeebackHints.metadata;
+    expect(settings).toStrictEqual(settingsPayload);
+  });
+  test('Test settings parsed from raw olx', () => {
+    const settings = new ReactStateSettingsParser({
+      problem: checklistWithFeebackHints.state,
+      rawOLX: '<problem showanswer="always">text</problem>',
+    }).parseRawOlxSettings();
+    const { markdown, ...settingsPayload } = checklistWithFeebackHints.metadata;
+    expect(settings).toStrictEqual({ ...settingsPayload, showanswer: 'always' });
+  });
+});
diff --git a/src/editors/containers/ProblemEditor/data/SettingsParser.js b/src/editors/containers/ProblemEditor/data/SettingsParser.js
new file mode 100644
index 0000000000..1c90470675
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/data/SettingsParser.js
@@ -0,0 +1,85 @@
+import _ from 'lodash';
+
+import { ShowAnswerTypes, RandomizationTypesKeys } from '../../../data/constants/problem';
+
+export const popuplateItem = (parentObject, itemName, statekey, metadata, defaultValue = null, allowNull = false) => {
+  let parent = parentObject;
+  const item = _.get(metadata, itemName, null);
+  const equalsDefault = item === defaultValue;
+  if (allowNull) {
+    parent = { ...parentObject, [statekey]: item };
+  } else if (!_.isNil(item) && !equalsDefault) {
+    parent = { ...parentObject, [statekey]: item };
+  }
+  return parent;
+};
+
+export const parseScoringSettings = (metadata, defaultSettings) => {
+  let scoring = {};
+
+  const attempts = popuplateItem({}, 'max_attempts', 'number', metadata);
+  const initialAttempts = _.get(attempts, 'number', null);
+  const defaultAttempts = _.get(defaultSettings, 'max_attempts', null);
+  attempts.unlimited = false;
+
+  // isFinite checks if value is a finite primitive number.
+  if (!_.isFinite(initialAttempts) || initialAttempts === defaultAttempts) {
+    // set number to null in any case as lms will pick default value if it exists.
+    attempts.number = null;
+  }
+
+  // if both block number and default number are null set unlimited to true.
+  if (_.isNil(initialAttempts) && _.isNil(defaultAttempts)) {
+    attempts.unlimited = true;
+  }
+
+  if (attempts.number < 0) {
+    attempts.number = 0;
+  }
+
+  scoring = { ...scoring, attempts };
+
+  scoring = popuplateItem(scoring, 'weight', 'weight', metadata);
+
+  return scoring;
+};
+
+export const parseShowAnswer = (metadata) => {
+  let showAnswer = {};
+
+  const showAnswerType = _.get(metadata, 'showanswer', {});
+  if (!_.isNil(showAnswerType) && showAnswerType in ShowAnswerTypes) {
+    showAnswer = { ...showAnswer, on: showAnswerType };
+  }
+
+  showAnswer = popuplateItem(showAnswer, 'attempts_before_showanswer_button', 'afterAttempts', metadata);
+
+  return showAnswer;
+};
+
+export const parseSettings = (metadata, defaultSettings) => {
+  let settings = {};
+
+  if (_.isNil(metadata) || _.isEmpty(metadata)) {
+    return settings;
+  }
+
+  const scoring = parseScoringSettings(metadata, defaultSettings);
+  if (!_.isEmpty(scoring)) {
+    settings = { ...settings, scoring };
+  }
+
+  const showAnswer = parseShowAnswer(metadata);
+  if (!_.isEmpty(showAnswer)) {
+    settings = { ...settings, showAnswer };
+  }
+
+  const randomizationType = _.get(metadata, 'rerandomize', {});
+  if (!_.isEmpty(randomizationType) && Object.values(RandomizationTypesKeys).includes(randomizationType)) {
+    settings = popuplateItem(settings, 'rerandomize', 'randomization', metadata);
+  }
+
+  settings = popuplateItem(settings, 'show_reset_button', 'showResetButton', metadata);
+  settings = popuplateItem(settings, 'submission_wait_seconds', 'timeBetween', metadata);
+  return settings;
+};
diff --git a/src/editors/containers/ProblemEditor/data/SettingsParser.test.js b/src/editors/containers/ProblemEditor/data/SettingsParser.test.js
new file mode 100644
index 0000000000..063484ceac
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/data/SettingsParser.test.js
@@ -0,0 +1,82 @@
+import { parseScoringSettings, parseSettings, parseShowAnswer } from './SettingsParser';
+import {
+  checklistWithFeebackHints,
+  numericWithHints,
+  textInputWithHints,
+  singleSelectWithHints,
+  negativeAttempts,
+} from './mockData/problemTestData';
+
+describe('Test Settings to State Parser', () => {
+  const defaultSettings = { max_attempts: 1 };
+  test('Test all fields populated', () => {
+    const settings = parseSettings(checklistWithFeebackHints.metadata, defaultSettings);
+    const { hints, ...settingsPayload } = checklistWithFeebackHints.state.settings;
+    expect(settings).toStrictEqual(settingsPayload);
+  });
+
+  test('Test score settings', () => {
+    const scoreSettings = parseScoringSettings(checklistWithFeebackHints.metadata, defaultSettings);
+    expect(scoreSettings).toStrictEqual(checklistWithFeebackHints.state.settings.scoring);
+  });
+
+  test('Test score settings zero attempts', () => {
+    const scoreSettings = parseScoringSettings(numericWithHints.metadata, defaultSettings);
+    expect(scoreSettings).toStrictEqual(numericWithHints.state.settings.scoring);
+  });
+
+  test('Test score settings attempts missing with no default max_attempts', () => {
+    const scoreSettings = parseScoringSettings(singleSelectWithHints.metadata, {});
+    expect(scoreSettings.attempts).toStrictEqual(singleSelectWithHints.state.settings.scoring.attempts);
+  });
+
+  test('Test score settings attempts missing with default max_attempts', () => {
+    const scoreSettings = parseScoringSettings(singleSelectWithHints.metadata, defaultSettings);
+    expect(scoreSettings.attempts).toStrictEqual({ number: null, unlimited: false });
+  });
+
+  test('Test negative attempts in score', () => {
+    const scoreSettings = parseScoringSettings(negativeAttempts.metadata, defaultSettings);
+    expect(scoreSettings.attempts).toStrictEqual(negativeAttempts.state.settings.scoring.attempts);
+  });
+
+  test('Test score settings missing with no default', () => {
+    const settings = parseSettings(singleSelectWithHints.metadata, {});
+    expect(settings.scoring).toStrictEqual(singleSelectWithHints.state.settings.scoring);
+  });
+
+  test('Test score settings missing with default', () => {
+    const settings = parseSettings(singleSelectWithHints.metadata, defaultSettings);
+    expect(settings.scoring).toStrictEqual({ attempts: { number: null, unlimited: false } });
+  });
+
+  test('Test score settings missing with null default', () => {
+    const settings = parseSettings(singleSelectWithHints.metadata, { max_attempts: null });
+    expect(settings.scoring).toStrictEqual({ attempts: { number: null, unlimited: true } });
+  });
+
+  test('Test invalid randomization', () => {
+    const settings = parseSettings(numericWithHints.metadata, defaultSettings);
+    expect(settings.randomization).toBeUndefined();
+  });
+
+  test('Test invalid show answer', () => {
+    const showAnswerSettings = parseShowAnswer(numericWithHints.metadata);
+    expect(showAnswerSettings.on).toBeUndefined();
+  });
+
+  test('Test show answer settings missing', () => {
+    const settings = parseShowAnswer(textInputWithHints.metadata);
+    expect(settings.showAnswer).toBeUndefined();
+  });
+
+  test('Test empty metadata', () => {
+    const scoreSettings = parseSettings({}, defaultSettings);
+    expect(scoreSettings).toStrictEqual({});
+  });
+
+  test('Test null metadata', () => {
+    const scoreSettings = parseSettings(null, defaultSettings);
+    expect(scoreSettings).toStrictEqual({});
+  });
+});
diff --git a/src/editors/containers/ProblemEditor/data/mockData/editorTestData.js b/src/editors/containers/ProblemEditor/data/mockData/editorTestData.js
new file mode 100644
index 0000000000..a96230c46e
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/data/mockData/editorTestData.js
@@ -0,0 +1,132 @@
+export const checkboxesWithFeedbackAndHints = {
+  solution: `
+    <p>
+        You can form a voltage divider that evenly divides the input
+        voltage with two identically valued resistors, with the sampled
+        voltage taken in between the two.
+    </p>
+    <p><img src="/static/images/voltage_divider.png" alt=""></img></p>
+  `,
+  question: '<p>You can use this template as a guide to the simple editor markdown and OLX markup to use for checkboxes with hints and feedback problems. Edit this component to replace this template with your own assessment.</p><label>Add the question text, or prompt, here. This text is required.</label><em>You can add an optional tip or note related to the prompt like this.</em>',
+  answers: {
+    A: '<p>a correct answer</p>',
+    B: '<p>an incorrect answer</p>',
+    C: '<p>an incorrect answer</p>',
+    D: '<p>a correct answer</p>',
+  },
+  selectedFeedback: {
+    A: '<p>You can specify optional feedback that appears after the learner selects and submits this answer.</p>',
+    B: '',
+    C: '<p>You can specify optional feedback for none, all, or a subset of the answers.</p>',
+    D: '',
+  },
+  unselectedFeedback: {
+    A: '<p>You can specify optional feedback that appears after the learner clears and submits this answer.</p>',
+    B: '',
+    C: '<p>You can specify optional feedback for selected answers, cleared answers, or both.</p>',
+    D: '',
+  },
+  hints: [
+    '<p>You can add an optional hint like this. Problems that have a hint include a hint button, and this text appears the first time learners select the button.</p>',
+    '<p>If you add more than one hint, a different hint appears each time learners select the hint button.</p>',
+  ],
+  groupFeedback: {
+    0: 'You can specify optional feedback for a combination of answers which appears after the specified set of answers is submitted.',
+    1: 'You can specify optional feedback for one, several, or all answer combinations.',
+  },
+};
+
+export const dropdownWithFeedbackAndHints = {
+  solution: '',
+  selectedFeedback: {
+    A: '<p>You can specify optional feedback like this, which appears after this answer is submitted.</p>',
+    B: '',
+    C: '<p>You can specify optional feedback for none, a subset, or all of the answers.</p>',
+  },
+  hints: [
+    '<p>You can add an optional hint like this. Problems that have a hint include a hint button, and this text appears the first time learners select the button.</p>',
+    '<p>If you add more than one hint, a different hint appears each time learners select the hint button.</p>',
+  ],
+  question: '<p>You can use this template as a guide to the simple editor markdown and OLX markup to use for dropdown with hints and feedback problems. Edit this component to replace this template with your own assessment.</p><label>Add the question text, or prompt, here. This text is required.</label><em>You can add an optional tip or note related to the prompt like this.</em>',
+};
+
+export const multipleChoiceWithFeedbackAndHints = {
+  solution: '<p>You can add a solution</p>',
+  question: `<p>You can use this template as a guide to the simple editor markdown and OLX markup to use for multiple choice with hints and feedback problems. Edit this component to replace this template with your own assessment.</p>
+    <p><label>Add the question text, or prompt, here. This text is required.</label></p>
+    <em>You can add an optional tip or note related to the prompt like this.</em>`,
+  answers: {
+    A: '<p>an incorrect answer</p>',
+    B: '<p>the correct answer</p>',
+    C: '<p>an incorrect answer</p>',
+  },
+  selectedFeedback: {
+    A: '<p>You can specify optional feedback like this, which appears after this answer is submitted.</p>',
+    B: '',
+    C: '<p>You can specify optional feedback for none, a subset, or all of the answers.</p>',
+  },
+  hints: [
+    '<p>You can add an optional hint like this. Problems that have a hint include a hint button, and this text appears the first time learners select the button.</p>',
+    '<p>If you add more than one hint, a different hint appears each time learners select the hint button.</p>',
+  ],
+};
+
+export const numericInputWithFeedbackAndHints = {
+  solution: '',
+  selectedFeedback: {
+    A: '<p>You can specify optional feedback like this, which appears after this answer is submitted.</p>',
+    B: '<p>You can specify optional feedback like this, which appears after this answer is submitted.</p>',
+  },
+  hints: [
+    '<p>You can add an optional hint like this. Problems that have a hint include a hint button, and this text appears the first time learners select the button.</p>',
+    '<p>If you add more than one hint, a different hint appears each time learners select the hint button.</p>',
+  ],
+  question: '<p>You can use this template as a guide to the simple editor markdown and OLX markup to use for numerical input with hints and feedback problems. Edit this component to replace this template with your own assessment.</p><label>Add the question text, or prompt, here. This text is required.</label><em>You can add an optional tip or note related to the prompt like this.</em>',
+};
+
+export const numericInputWithAnswerRange = {
+  solution: '',
+  hints: [],
+  question: '<p>You can use this template as a guide to the simple editor markdown and OLX markup to use for numerical input with hints and feedback problems. Edit this component to replace this template with your own assessment.</p><label>Add the question text, or prompt, here. This text is required.</label><em>You can add an optional tip or note related to the prompt like this.</em>',
+};
+
+export const textInputWithFeedbackAndHints = {
+  solution: '',
+  selectedFeedback: {
+    A: '<p>You can specify optional feedback like this, which appears after this answer is submitted.</p>',
+    B: '',
+    C: '<p>You can specify optional feedback for none, a subset, or all of the answers.</p>',
+  },
+  hints: [
+    '<p>You can add an optional hint like this. Problems that have a hint include a hint button, and this text appears the first time learners select the button.</p>',
+    '<p>If you add more than one hint, a different hint appears each time learners select the hint button.</p>',
+  ],
+  question: '<p>You can use this template as a guide to the simple editor markdown and OLX markup to use for text input with hints and feedback problems. Edit this component to replace this template with your own assessment.</p><label>Add the question text, or prompt, here. This text is required.</label><em>You can add an optional tip or note related to the prompt like this.</em>',
+};
+
+export const textInputWithFeedbackAndHintsWithMultipleAnswers = {
+  solution: '',
+  selectedFeedback: {
+    A: '<p>You can specify optional feedback like this, which appears after this answer is submitted.</p>',
+    B: '<p>You can specify optional feedback like this, which appears after this answer is submitted.</p>',
+    C: '<p>You can specify optional feedback like this, which appears after this answer is submitted.</p>',
+    D: '<p>You can specify optional feedback for none, a subset, or all of the answers.</p>',
+  },
+  hints: [
+    '<p>You can add an optional hint like this. Problems that have a hint include a hint button, and this text appears the first time learners select the button.</p>',
+    '<p>If you add more than one hint, a different hint appears each time learners select the hint button.</p>',
+  ],
+  question: '<p>You can use this template as a guide to the simple editor markdown and OLX markup to use for text input with hints and feedback problems. Edit this component to replace this template with your own assessment.</p><label>Add the question text, or prompt, here. This text is required.</label><em>You can add an optional tip or note related to the prompt like this.</em>',
+};
+
+export const numberParseTest = {
+  solution: '',
+  answers: {
+    A: `<span style="font-family: 'courier new', courier;"><strong>0x10</strong></span>`, // eslint-disable-line
+    B: `<span style="font-family: 'courier new', courier;"><strong>0x0f</strong></span>`, // eslint-disable-line
+    C: `<span style="font-family: 'courier new', courier;"><strong>0x07</strong></span>`, // eslint-disable-line
+    D: `<span style="font-family: 'courier new', courier;"><strong>0009</strong></span>`, // eslint-disable-line
+  },
+  hints: [],
+  question: '<p>What is the content of the register x2 after executing the following three lines of instructions?</p>',
+};
diff --git a/src/editors/containers/ProblemEditor/data/mockData/olxTestData.js b/src/editors/containers/ProblemEditor/data/mockData/olxTestData.js
new file mode 100644
index 0000000000..99e25a2b5b
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/data/mockData/olxTestData.js
@@ -0,0 +1,1174 @@
+/* eslint-disable */
+// lint is disabled for this file due to strict spacing
+
+export const checkboxesOLXWithFeedbackAndHintsOLX = {
+  rawOLX: `<problem url_name="this_should_be_ignored">
+  <choiceresponse>
+    <p>You can use this template as a guide to the simple editor markdown and OLX markup to use for checkboxes with hints and feedback problems. Edit this component to replace this template with your own assessment.</p>
+  <label>Add the question text, or prompt, here. This text is required.</label>
+  <description>You can add an optional tip or note related to the prompt like this.</description>
+  <checkboxgroup>
+      <choice correct="true"><p>a correct answer</p>
+        <choicehint selected="true"><p>You can specify optional feedback that appears after the learner selects and submits this answer.</p></choicehint>
+        <choicehint selected="false"><p>You can specify optional feedback that appears after the learner clears and submits this answer.</p></choicehint>
+      </choice>
+      <choice correct="false"><p>an incorrect answer</p></choice>
+      <choice correct="false"><p>an incorrect answer</p>
+        <choicehint selected="true"><p>You can specify optional feedback for none, all, or a subset of the answers.</p></choicehint>
+        <choicehint selected="false"><p>You can specify optional feedback for selected answers, cleared answers, or both.</p></choicehint>
+      </choice>
+      <choice correct="true"><p>a correct answer</p></choice>
+      <compoundhint value="A B D">You can specify optional feedback for a combination of answers which appears after the specified set of answers is submitted.</compoundhint>
+      <compoundhint value="A B C D">You can specify optional feedback for one, several, or all answer combinations.</compoundhint>
+    </checkboxgroup>
+    <solution>
+        <div class="detailed-solution">
+            <p>Explanation</p>
+            <p>
+                You can form a voltage divider that evenly divides the input
+                voltage with two identically valued resistors, with the sampled
+                voltage taken in between the two.
+            </p>
+            <p><img src="/static/images/voltage_divider.png" alt=""></img></p>
+         </div>
+      </solution>
+  </choiceresponse>
+  <demandhint>
+    <hint><p>You can add an optional hint like this. Problems that have a hint include a hint button, and this text appears the first time learners select the button.</p></hint>
+    <hint><p>If you add more than one hint, a different hint appears each time learners select the hint button.</p></hint>
+  </demandhint>
+  </problem>`,
+  hints: [
+    {
+      id: 0,
+      value: '<p>You can add an optional hint like this. Problems that have a hint include a hint button, and this text appears the first time learners select the button.</p>',
+    },
+    {
+      id: 1,
+      value: '<p>If you add more than one hint, a different hint appears each time learners select the hint button.</p>',
+    },
+  ],
+  solutionExplanation: `
+  <p>
+      You can form a voltage divider that evenly divides the input
+      voltage with two identically valued resistors, with the sampled
+      voltage taken in between the two.
+  </p>
+  <p><img src="/static/images/voltage_divider.png" alt=""></img></p>`,
+  data: {
+    answers: [
+      {
+        id: 'A',
+        title: `<p>a correct answer</p>\n        \n        \n      `,
+        correct: true,
+        selectedFeedback: '<p>You can specify optional feedback that appears after the learner selects and submits this answer.</p>',
+        unselectedFeedback: '<p>You can specify optional feedback that appears after the learner clears and submits this answer.</p>',
+      },
+      {
+        id: 'B',
+        title: '<p>an incorrect answer</p>',
+        correct: false,
+      },
+      {
+        id: 'C',
+        title: `<p>an incorrect answer</p>\n        \n        \n      `,
+        correct: false,
+        selectedFeedback: '<p>You can specify optional feedback for none, all, or a subset of the answers.</p>',
+        unselectedFeedback: '<p>You can specify optional feedback for selected answers, cleared answers, or both.</p>',
+      },
+      {
+        id: 'D',
+        title: '<p>a correct answer</p>',
+        correct: true,
+      },
+    ],
+    groupFeedbackList: [
+      {
+        id: 0,
+        answers: [
+          'A',
+          'B',
+          'D',
+        ],
+        feedback: 'You can specify optional feedback for a combination of answers which appears after the specified set of answers is submitted.',
+      },
+      {
+        id: 1,
+        answers: [
+          'A',
+          'B',
+          'C',
+          'D',
+        ],
+        feedback: 'You can specify optional feedback for one, several, or all answer combinations.',
+      },
+    ],
+  },
+  question: '<p>You can use this template as a guide to the simple editor markdown and OLX markup to use for checkboxes with hints and feedback problems. Edit this component to replace this template with your own assessment.</p><label>Add the question text, or prompt, here. This text is required.</label><em>You can add an optional tip or note related to the prompt like this.</em>',
+  buildOLX: `<problem>
+    <choiceresponse>
+      <p>You can use this template as a guide to the simple editor markdown and OLX markup to use for checkboxes with hints and feedback problems. Edit this component to replace this template with your own assessment.</p>
+      <label>Add the question text, or prompt, here. This text is required.</label>
+      <em>You can add an optional tip or note related to the prompt like this.</em>
+      <checkboxgroup>
+        <choice correct="true">
+          <p>a correct answer </p>       <choicehint selected="true"><p>You can specify optional feedback that appears after the learner selects and submits this answer.</p></choicehint>
+          <choicehint selected="false"><p>You can specify optional feedback that appears after the learner clears and submits this answer.</p></choicehint>
+        </choice>
+        <choice correct="false"><p>an incorrect answer</p></choice>
+        <choice correct="false">
+          <p>an incorrect answer</p>        <choicehint selected="true"><p>You can specify optional feedback for none, all, or a subset of the answers.</p></choicehint>
+          <choicehint selected="false"><p>You can specify optional feedback for selected answers, cleared answers, or both.</p></choicehint>
+        </choice>
+        <choice correct="true"><p>a correct answer</p></choice>
+        <compoundhint value="A B D">You can specify optional feedback for a combination of answers which appears after the specified set of answers is submitted.</compoundhint>
+        <compoundhint value="A B C D">You can specify optional feedback for one, several, or all answer combinations.</compoundhint>
+      </checkboxgroup>
+        <solution>
+        <div class="detailed-solution">
+        <p>Explanation</p>
+        <p>
+          You can form a voltage divider that evenly divides the input
+          voltage with two identically valued resistors, with the sampled
+          voltage taken in between the two.
+        </p>
+        <p><img src="/static/images/voltage_divider.png" alt=""></img></p>
+      </div>
+        </solution>
+    </choiceresponse>
+    <demandhint>
+      <hint><p>You can add an optional hint like this. Problems that have a hint include a hint button, and this text appears the first time learners select the button.</p></hint>
+      <hint><p>If you add more than one hint, a different hint appears each time learners select the hint button.</p></hint>
+    </demandhint>
+  </problem>
+  `,
+};
+
+export const multipleChoiceWithoutAnswers = {
+  rawOLX: `<problem>
+  <multiplechoiceresponse>
+    <choicegroup>
+  </choicegroup>
+  </multiplechoiceresponse>
+  <demandhint></demandhint>
+  <solution></solution>
+  </problem>`,
+  data: {
+    answers: [
+      {
+        id: 'A',
+        title: '',
+        correct: true,
+      },
+    ],
+  },
+};
+
+export const multipleChoiceSingleAnswer = {
+  rawOLX: `<problem>
+  <multiplechoiceresponse>
+    <p>You can use this template as a guide to the simple editor markdown and OLX markup to use for checkboxes with hints and feedback problems. Edit this component to replace this template with your own assessment.</p>
+    <label>Add the question text, or prompt, here. This text is required.</label>
+    <description>You can add an optional tip or note related to the prompt like this.</description>
+    <choicegroup>
+      <choice correct="true"><p>a correct answer</p><div><img src="#" />image with <strong>caption</strong>.</div>
+        <choicehint selected="true"><p>You can specify optional feedback that appears after the learner selects and submits this answer.</p></choicehint>
+        <choicehint selected="false"><p>You can specify optional feedback that appears after the learner clears and submits this answer.</p></choicehint>
+      </choice>
+    </choicegroup>
+    <solution>
+      <div class="detailed-solution">
+          <p>Explanation</p>
+          <p>
+            You can form a voltage divider that evenly divides the input
+            voltage with two identically valued resistors, with the sampled
+            voltage taken in between the two.
+          </p>
+          <p><img src="/static/images/voltage_divider.png" alt=""></img></p>
+        </div>
+      </solution>
+  </multiplechoiceresponse>
+  </problem>`,
+  solutionExplanation: `
+  <p>
+      You can form a voltage divider that evenly divides the input
+      voltage with two identically valued resistors, with the sampled
+      voltage taken in between the two.
+  </p>
+  <p><img src="/static/images/voltage_divider.png" alt=""></img></p>`,
+  data: {
+    answers: [
+      {
+        id: 'A',
+        title: `<p>a correct answer</p><div><img src="#"></img>image with <strong>caption</strong>.</div>\n        \n        \n      `,
+        correct: true,
+        selectedFeedback: '<p>You can specify optional feedback that appears after the learner selects and submits this answer.</p>',
+        unselectedFeedback: '<p>You can specify optional feedback that appears after the learner clears and submits this answer.</p>',
+      },
+    ],
+  },
+  question: '<p>You can use this template as a guide to the simple editor markdown and OLX markup to use for checkboxes with hints and feedback problems. Edit this component to replace this template with your own assessment.</p><label>Add the question text, or prompt, here. This text is required.</label><em>You can add an optional tip or note related to the prompt like this.</em>',
+  buildOLX: `<problem>
+  <multiplechoiceresponse>
+    <p>You can use this template as a guide to the simple editor markdown and OLX markup to use for checkboxes with hints and feedback problems. Edit this component to replace this template with your own assessment.</p>
+    <label>Add the question text, or prompt, here. This text is required.</label>
+    <em>You can add an optional tip or note related to the prompt like this.</em>
+    <checkboxgroup>
+      <choice correct="true">
+<p>a correct answer </p>       <choicehint selected="true"><p>You can specify optional feedback that appears after the learner selects and submits this answer.</p></choicehint>
+        <choicehint selected="false"><p>You can specify optional feedback that appears after the learner clears and submits this answer.</p></choicehint>
+      </choice>
+    </checkboxgroup>
+      <solution>
+      <div class="detailed-solution">
+      <p>Explanation</p>
+      <p>
+          You can form a voltage divider that evenly divides the input
+          voltage with two identically valued resistors, with the sampled
+          voltage taken in between the two.
+      </p>
+      <p><img src="/static/images/voltage_divider.png" alt=""></img></p>
+    </div>
+      </solution>
+  </multiplechoiceresponse>
+</problem>
+`,
+};
+
+export const dropdownOLXWithFeedbackAndHintsOLX = {
+  rawOLX: `<problem>
+<optionresponse>
+  <p>You can use this template as a guide to the simple editor markdown and OLX markup to use for dropdown with hints and feedback problems. Edit this component to replace this template with your own assessment.</p>
+<label>Add the question text, or prompt, here. This text is required.</label>
+<description>You can add an optional tip or note related to the prompt like this. </description>
+<optioninput>
+    <option correct="false">an incorrect answer <optionhint><p>You can specify optional feedback like this, which appears after this answer is submitted.</p></optionhint>
+</option>
+    <option correct="true">the correct answer</option>
+    <option correct="false">an incorrect answer <optionhint><p>You can specify optional feedback for none, a subset, or all of the answers.</p></optionhint>
+</option>
+  </optioninput>
+</optionresponse>
+<demandhint>
+  <hint><p>You can add an optional hint like this. Problems that have a hint include a hint button, and this text appears the first time learners select the button.</p></hint>
+  <hint><p>If you add more than one hint, a different hint appears each time learners select the hint button.</p></hint>
+</demandhint>
+</problem>`,
+  hints: [{
+    id: 0,
+    value: '<p>You can add an optional hint like this. Problems that have a hint include a hint button, and this text appears the first time learners select the button.</p>',
+  },
+  {
+    id: 1,
+    value: '<p>If you add more than one hint, a different hint appears each time learners select the hint button.</p>',
+  },
+  ],
+  data: {
+    answers: [
+      {
+        id: 'A',
+        title: 'an incorrect answer',
+        correct: false,
+        selectedFeedback: '<p>You can specify optional feedback like this, which appears after this answer is submitted.</p>',
+      },
+      {
+        id: 'B',
+        title: 'the correct answer',
+        correct: true,
+      },
+      {
+        id: 'C',
+        title: 'an incorrect answer',
+        correct: false,
+        selectedFeedback: '<p>You can specify optional feedback for none, a subset, or all of the answers.</p>',
+      },
+    ],
+  },
+  question: '<p>You can use this template as a guide to the simple editor markdown and OLX markup to use for dropdown with hints and feedback problems. Edit this component to replace this template with your own assessment.</p><label>Add the question text, or prompt, here. This text is required.</label><em>You can add an optional tip or note related to the prompt like this.</em>',
+  buildOLX: `<problem>
+  <optionresponse>
+    <p>You can use this template as a guide to the simple editor markdown and OLX markup to use for dropdown with hints and feedback problems. Edit this component to replace this template with your own assessment.</p>
+    <label>Add the question text, or prompt, here. This text is required.</label>
+    <em>You can add an optional tip or note related to the prompt like this.</em>
+    <optioninput>
+      <option correct="false">
+an incorrect answer        <optionhint><p>You can specify optional feedback like this, which appears after this answer is submitted.</p></optionhint>
+      </option>
+      <option correct="true">the correct answer</option>
+      <option correct="false">
+an incorrect answer        <optionhint><p>You can specify optional feedback for none, a subset, or all of the answers.</p></optionhint>
+      </option>
+    </optioninput>
+  </optionresponse>
+  <demandhint>
+    <hint><p>You can add an optional hint like this. Problems that have a hint include a hint button, and this text appears the first time learners select the button.</p></hint>
+    <hint><p>If you add more than one hint, a different hint appears each time learners select the hint button.</p></hint>
+  </demandhint>
+</problem>
+`,
+};
+
+export const multipleChoiceWithFeedbackAndHintsOLX = {
+  rawOLX: `<problem>
+<multiplechoiceresponse>
+  <p>You can use this template as a guide to the simple editor markdown and OLX markup to use for multiple choice with hints and feedback problems. Edit this component to replace this template with your own assessment.</p>
+<label>Add the question text, or prompt, here. This text is required.</label>
+<description>You can add an optional tip or note related to the prompt like this. </description>
+<em>Just a generic em tag</em>
+<choicegroup type="MultipleChoice">
+    <choice correct="false"><p>an incorrect answer</p><choicehint><p>You can specify optional feedback like this, which appears after this answer is submitted.</p></choicehint></choice>
+    <choice correct="true"><p>the correct answer</p></choice>
+    <choice correct="false"><p>an incorrect answer</p><choicehint><p>You can specify optional feedback for none, a subset, or all of the answers.</p></choicehint></choice>
+  </choicegroup>
+  <solution>
+    <p>You can add a solution</p>
+  </solution>
+</multiplechoiceresponse>
+<demandhint>
+  <hint><p>You can add an optional hint like this. Problems that have a hint include a hint button, and this text appears the first time learners select the button.</p></hint>
+  <hint><p>If you add more than one hint, a different hint appears each time learners select the hint button.</p></hint>
+</demandhint>
+</problem>`,
+  hints: [{
+    id: 0,
+    value: '<p>You can add an optional hint like this. Problems that have a hint include a hint button, and this text appears the first time learners select the button.</p>',
+  },
+  {
+    id: 1,
+    value: '<p>If you add more than one hint, a different hint appears each time learners select the hint button.</p>',
+  },
+  ],
+  solutionExplanation: '<p>You can add a solution</p>',
+  data: {
+    answers: [
+      {
+        id: 'A',
+        title: '<p>an incorrect answer</p>',
+        correct: false,
+        selectedFeedback: '<p>You can specify optional feedback like this, which appears after this answer is submitted.</p>',
+      },
+      {
+        id: 'B',
+        title: '<p>the correct answer</p>',
+        correct: true,
+      },
+      {
+        id: 'C',
+        title: '<p>an incorrect answer</p>',
+        correct: false,
+        selectedFeedback: '<p>You can specify optional feedback for none, a subset, or all of the answers.</p>',
+      },
+    ],
+  },
+  question: '<p>You can use this template as a guide to the simple editor markdown and OLX markup to use for multiple choice with hints and feedback problems. Edit this component to replace this template with your own assessment.</p><label>Add the question text, or prompt, here. This text is required.</label><em class="olx_description">You can add an optional tip or note related to the prompt like this.</em><em>Just a generic em tag</em>',
+  buildOLX: `<problem>
+  <multiplechoiceresponse>
+    <p>You can use this template as a guide to the simple editor markdown and OLX markup to use for multiple choice with hints and feedback problems. Edit this component to replace this template with your own assessment.</p>
+    <label>Add the question text, or prompt, here. This text is required.</label>
+    <description>You can add an optional tip or note related to the prompt like this.</description>
+    <em>Just a generic em tag</em>
+    <choicegroup>
+      <choice correct="false">
+<p>an incorrect answer</p>        <choicehint><p>You can specify optional feedback like this, which appears after this answer is submitted.</p></choicehint>
+      </choice>
+      <choice correct="true"><p>the correct answer</p></choice>
+      <choice correct="false">
+<p>an incorrect answer </p>       <choicehint><p>You can specify optional feedback for none, a subset, or all of the answers.</p></choicehint>
+      </choice>
+    </choicegroup>
+    <solution>
+    <div class="detailed-solution">
+  <p>Explanation</p>
+  <p>You can add a solution</p>
+</div>
+</solution>
+  </multiplechoiceresponse>
+  <demandhint>
+    <hint><p>You can add an optional hint like this. Problems that have a hint include a hint button, and this text appears the first time learners select the button.</p></hint>
+    <hint><p>If you add more than one hint, a different hint appears each time learners select the hint button.</p></hint>
+  </demandhint>
+</problem>
+`,
+};
+
+export const numericInputWithFeedbackAndHintsOLX = {
+  rawOLX: `<problem>
+<numericalresponse answer="100">
+  <p>You can use this template as a guide to the simple editor markdown and OLX markup to use for numerical input with hints and feedback problems. Edit this component to replace this template with your own assessment.</p>
+<label>Add the question text, or prompt, here. This text is required.</label>
+<description>You can add an optional tip or note related to the prompt like this. </description>
+<responseparam type="tolerance" default="5"/>
+  <formulaequationinput/>
+  <correcthint><p>You can specify optional feedback like this, which appears after this answer is submitted.</p></correcthint>
+  <additional_answer answer="200"><correcthint><p>You can specify optional feedback like this, which appears after this answer is submitted.</p></correcthint></additional_answer>
+</numericalresponse>
+<demandhint>
+  <hint><p>You can add an optional hint like this. Problems that have a hint include a hint button, and this text appears the first time learners select the button.</p></hint>
+  <hint><p>If you add more than one hint, a different hint appears each time learners select the hint button.</p></hint>
+</demandhint>
+</problem>`,
+  hints: [{
+    id: 0,
+    value: '<p>You can add an optional hint like this. Problems that have a hint include a hint button, and this text appears the first time learners select the button.</p>',
+  },
+  {
+    id: 1,
+    value: '<p>If you add more than one hint, a different hint appears each time learners select the hint button.</p>',
+  },
+  ],
+  data: {
+    answers: [
+      {
+        id: 'A',
+        title: '100',
+        correct: true,
+        selectedFeedback: '<p>You can specify optional feedback like this, which appears after this answer is submitted.</p>',
+        isAnswerRange: false,
+        tolerance: '5',
+      },
+      {
+        id: 'B',
+        title: '200',
+        correct: true,
+        isAnswerRange: false,
+        selectedFeedback: '<p>You can specify optional feedback like this, which appears after this answer is submitted.</p>',
+      },
+    ],
+  },
+  question: '<p>You can use this template as a guide to the simple editor markdown and OLX markup to use for numerical input with hints and feedback problems. Edit this component to replace this template with your own assessment.</p><label>Add the question text, or prompt, here. This text is required.</label><em>You can add an optional tip or note related to the prompt like this.</em>',
+  buildOLX: `<problem>
+  <p>You can use this template as a guide to the simple editor markdown and OLX markup to use for numerical input with hints and feedback problems. Edit this component to replace this template with your own assessment.</p>
+  <label>Add the question text, or prompt, here. This text is required.</label>
+  <em>You can add an optional tip or note related to the prompt like this.</em>
+  <numericalresponse answer="100">
+    <responseparam type="tolerance" default="5"></responseparam>
+    <correcthint><p>You can specify optional feedback like this, which appears after this answer is submitted.</p></correcthint>
+    <additional_answer answer="200">
+      <correcthint><p>You can specify optional feedback like this, which appears after this answer is submitted.</p></correcthint>
+    </additional_answer>
+    <formulaequationinput></formulaequationinput>
+  </numericalresponse>
+  <demandhint>
+    <hint><p>You can add an optional hint like this. Problems that have a hint include a hint button, and this text appears the first time learners select the button.</p></hint>
+    <hint><p>If you add more than one hint, a different hint appears each time learners select the hint button.</p></hint>
+  </demandhint>
+</problem>
+`,
+};
+
+export const numericInputWithAnswerRangeOLX = {
+  rawOLX: `<problem>
+<numericalresponse answer="[3/2,-1.3)">
+  <p>You can use this template as a guide to the simple editor markdown and OLX markup to use for numerical input with hints and feedback problems. Edit this component to replace this template with your own assessment.</p>
+<label>Add the question text, or prompt, here. This text is required.</label>
+<description>You can add an optional tip or note related to the prompt like this. </description>
+  <formulaequationinput/>\
+</numericalresponse>
+</problem>`,
+  data: {
+    answers: [
+      {
+        id: 'A',
+        title: '[32,-1.3)',
+        correct: true,
+        selectedFeedback: '<p>You can specify optional feedback like this, which appears after this answer is submitted.</p>',
+        isAnswerRange: true,
+      },
+    ],
+  },
+  question: '<p>You can use this template as a guide to the simple editor markdown and OLX markup to use for numerical input with hints and feedback problems. Edit this component to replace this template with your own assessment.</p><label>Add the question text, or prompt, here. This text is required.</label><em>You can add an optional tip or note related to the prompt like this.</em>',
+  buildOLX: `<problem>
+  <p>You can use this template as a guide to the simple editor markdown and OLX markup to use for numerical input with hints and feedback problems. Edit this component to replace this template with your own assessment.</p>
+  <label>Add the question text, or prompt, here. This text is required.</label>
+  <em>You can add an optional tip or note related to the prompt like this.</em>
+  <numericalresponse answer="(-1.3,3/2]">
+    <formulaequationinput></formulaequationinput>
+  </numericalresponse>
+</problem>
+`,
+};
+
+export const textInputWithFeedbackAndHintsOLX = {
+  rawOLX: `<problem>
+<stringresponse answer="the correct answer" type="ci">
+  <p>You can use this template as a guide to the simple editor markdown and OLX markup to use for text input with hints and feedback problems. Edit this component to replace this template with your own assessment.</p>
+<label>Add the question text, or prompt, here. This text is required.</label>
+<description>You can add an optional tip or note related to the prompt like this. </description>
+<correcthint><p>You can specify optional feedback like this, which appears after this answer is submitted.</p></correcthint>
+  <additional_answer answer="optional acceptable variant of the correct answer"/>
+  <stringequalhint answer="optional incorrect answer such as a frequent misconception"><p>You can specify optional feedback for none, a subset, or all of the answers.</p></stringequalhint>
+  <textline size="20"/>
+</stringresponse>
+<demandhint>
+  <hint><p>You can add an optional hint like this. Problems that have a hint include a hint button, and this text appears the first time learners select the button.</p></hint>
+  <hint><p>If you add more than one hint, a different hint appears each time learners select the hint button.</p></hint>
+</demandhint>
+</problem>`,
+  hints: [{
+    id: 0,
+    value: '<p>You can add an optional hint like this. Problems that have a hint include a hint button, and this text appears the first time learners select the button.</p>',
+  },
+  {
+    id: 1,
+    value: '<p>If you add more than one hint, a different hint appears each time learners select the hint button.</p>',
+  },
+  ],
+  data: {
+    answers: [
+      {
+        id: 'A',
+        title: 'the correct answer',
+        correct: true,
+        selectedFeedback: '<p>You can specify optional feedback like this, which appears after this answer is submitted.</p>',
+      },
+      {
+        id: 'B',
+        title: 'optional acceptable variant of the correct answer',
+        correct: true,
+        selectedFeedback: '',
+      },
+      {
+        id: 'C',
+        title: 'optional incorrect answer such as a frequent misconception',
+        correct: false,
+        selectedFeedback: '<p>You can specify optional feedback for none, a subset, or all of the answers.</p>',
+      },
+    ],
+    additionalStringAttributes: {
+      type: 'ci',
+      textline: {
+        size: '20',
+      },
+    },
+  },
+  question: `<p>You can use this template as a guide to the simple editor markdown and OLX markup to use for text input with hints and feedback problems. Edit this component to replace this template with your own assessment.</p>
+<label>Add the question text, or prompt, here. This text is required.</label>
+<em class="olx_description">You can add an optional tip or note related to the prompt like this. </em>`,
+  buildOLX: `<problem>
+  <stringresponse answer="the correct answer" type="ci">
+    <p>You can use this template as a guide to the simple editor markdown and OLX markup to use for text input with hints and feedback problems. Edit this component to replace this template with your own assessment.</p>
+    <label>Add the question text, or prompt, here. This text is required.</label>
+    <em>You can add an optional tip or note related to the prompt like this.</em>
+    <correcthint><p>You can specify optional feedback like this, which appears after this answer is submitted.</p></correcthint>
+    <additional_answer answer="optional acceptable variant of the correct answer"></additional_answer>
+    <stringequalhint answer="optional incorrect answer such as a frequent misconception"><p>You can specify optional feedback for none, a subset, or all of the answers.</p></stringequalhint>
+    <textline size="20"></textline>
+  </stringresponse>
+  <demandhint>
+    <hint><p>You can add an optional hint like this. Problems that have a hint include a hint button, and this text appears the first time learners select the button.</p></hint>
+    <hint><p>If you add more than one hint, a different hint appears each time learners select the hint button.</p></hint>
+  </demandhint>
+</problem>
+`,
+};
+
+export const textInputWithFeedbackAndHintsOLXWithMultipleAnswers = {
+  rawOLX: `<problem>
+<stringresponse answer="the correct answer" type="ci">
+  <p>You can use this template as a guide to the simple editor markdown and OLX markup to use for text input with hints and feedback problems. Edit this component to replace this template with your own assessment.</p>
+<label>Add the question text, or prompt, here. This text is required.</label>
+<description>You can add an optional tip or note related to the prompt like this. </description>
+<correcthint>You can specify optional feedback like this, which appears after this answer is submitted.</correcthint>
+  <additional_answer answer="300"><correcthint>You can specify optional feedback like this, which appears after this answer is submitted.</correcthint> </additional_answer>
+  <additional_answer answer="400"><correcthint>You can specify optional feedback like this, which appears after this answer is submitted.</correcthint> </additional_answer>
+  <stringequalhint answer="optional incorrect answer such as a frequent misconception">You can specify optional feedback for none, a subset, or all of the answers.</stringequalhint>
+  <textline size="20"/>
+</stringresponse>
+<demandhint>
+  <hint><p>You can add an optional hint like this. Problems that have a hint include a hint button, and this text appears the first time learners select the button.</p></hint>
+  <hint><p>If you add more than one hint, a different hint appears each time learners select the hint button.</p></hint>
+</demandhint>
+</problem>`,
+  hints: [{
+    id: 0,
+    value: '<p>You can add an optional hint like this. Problems that have a hint include a hint button, and this text appears the first time learners select the button.</p>',
+  },
+  {
+    id: 1,
+    value: '<p>If you add more than one hint, a different hint appears each time learners select the hint button.</p>',
+  },
+  ],
+  data: {
+    answers: [
+      {
+        id: 'A',
+        title: 'the correct answer',
+        correct: true,
+        selectedFeedback: 'You can specify optional feedback like this, which appears after this answer is submitted.',
+      },
+      {
+        id: 'B',
+        title: '300',
+        correct: true,
+        selectedFeedback: 'You can specify optional feedback like this, which appears after this answer is submitted.',
+      },
+      {
+        correct: true,
+        selectedFeedback: 'You can specify optional feedback like this, which appears after this answer is submitted.',
+        id: 'C',
+        title: '400',
+      },
+      {
+        id: 'D',
+        title: 'optional incorrect answer such as a frequent misconception',
+        correct: false,
+        selectedFeedback: 'You can specify optional feedback for none, a subset, or all of the answers.',
+      },
+    ],
+    additionalStringAttributes: {
+      type: 'ci',
+      textline: {
+        size: '20',
+      },
+    },
+  },
+  question: '<p>You can use this template as a guide to the simple editor markdown and OLX markup to use for text input with hints and feedback problems. Edit this component to replace this template with your own assessment.</p><label>Add the question text, or prompt, here. This text is required.</label><em>You can add an optional tip or note related to the prompt like this.</em>',
+  buildOLX: `<problem>
+  <stringresponse answer="the correct answer" type="ci">
+    <p>You can use this template as a guide to the simple editor markdown and OLX markup to use for text input with hints and feedback problems. Edit this component to replace this template with your own assessment.</p>
+    <label>Add the question text, or prompt, here. This text is required.</label>
+    <em>You can add an optional tip or note related to the prompt like this.</em>
+    <correcthint><p>You can specify optional feedback like this, which appears after this answer is submitted.</p></correcthint>
+    <additional_answer answer="300">
+      <correcthint><p>You can specify optional feedback like this, which appears after this answer is submitted.</p></correcthint>
+    </additional_answer>
+    <additional_answer answer="400">
+      <correcthint><p>You can specify optional feedback like this, which appears after this answer is submitted.</p></correcthint>
+    </additional_answer>
+    <stringequalhint answer="optional incorrect answer such as a frequent misconception"><p>You can specify optional feedback for none, a subset, or all of the answers.</p></stringequalhint>
+    <textline size="20"></textline>
+  </stringresponse>
+  <demandhint>
+    <hint><p>You can add an optional hint like this. Problems that have a hint include a hint button, and this text appears the first time learners select the button.</p></hint>
+    <hint><p>If you add more than one hint, a different hint appears each time learners select the hint button.</p></hint>
+  </demandhint>
+</problem>
+`,
+};
+
+export const advancedProblemOlX = {
+  rawOLX: `<problem>
+  <formularesponse type="ci" samples="R_1,R_2,R_3@1,2,3:3,4,5#10" answer="R_1*R_2/R_3">
+      <p>You can use this template as a guide to the OLX markup to use for math expression problems. Edit this component to replace the example with your own assessment.</p>
+      <label>Add the question text, or prompt, here. This text is required. Example: Write an expression for the product of R_1, R_2, and the inverse of R_3.</label>
+      <description>You can add an optional tip or note related to the prompt like this. Example: To test this example, the correct answer is R_1*R_2/R_3</description>
+      <responseparam type="tolerance" default="0.00001"/>
+      <formulaequationinput size="40"/>
+  </formularesponse>
+</problem>`,
+};
+export const scriptProblemOlX = {
+  rawOLX: `<problem>
+    <script>
+      some code
+    </script>
+  <numericalresponse answer="100">
+  <p>You can use this template as a guide to the simple editor markdown and OLX markup to use for numerical input with hints and feedback problems. Edit this component to replace this template with your own assessment.</p>
+<label>Add the question text, or prompt, here. This text is required.</label>
+<description>You can add an optional tip or note related to the prompt like this. </description>
+<responseparam type="tolerance" default="5"/>
+  <formulaequationinput/>
+  <correcthint><p>You can specify optional feedback like this, which appears after this answer is submitted.</p></correcthint>
+  <additional_answer answer="200"><correcthint><p>You can specify optional feedback like this, which appears after this answer is submitted.</p></correcthint></additional_answer>
+</numericalresponse>
+</problem>`,
+};
+export const multipleTextInputProblemOlX = {
+  rawOLX: `<problem>
+  <stringresponse answer="correct answer">
+    <textline size="20"/>
+  </stringresponse>
+  <stringresponse answer="other correct answer">
+    <textline size="20"/>
+  </stringresponse>
+</problem>`,
+};
+export const multipleNumericProblemOlX = {
+  rawOLX: `<problem>
+  <numericalresponse answer="100">
+    <formulaequationinput></formulaequationinput>
+  </numericalresponse>
+  <numericalresponse answer="200">
+    <formulaequationinput></formulaequationinput>
+  </numericalresponse>
+</problem>`,
+};
+export const NumericAndTextInputProblemOlX = {
+  rawOLX: `<problem>
+  <stringresponse answer="correct answer">
+    <textline size="20"/>
+  </stringresponse>
+  <numericalresponse answer="200">
+    <formulaequationinput></formulaequationinput>
+  </numericalresponse>
+</problem>`,
+};
+export const blankProblemOLX = {
+  rawOLX: '<problem></problem>',
+};
+export const blankQuestionOLX = {
+  rawOLX: `<problem>
+  <stringresponse type="ci">
+    <additional_answer />
+    <textline size="20"/>
+  </stringresponse>
+</problem>`,
+  question: '',
+};
+export const styledQuestionOLX = {
+  rawOLX: `<problem>
+  <p>
+    <strong>
+      <span style="background-color: #e03e2d;">
+        test
+      </span>
+    </strong>
+  </p>
+  <stringresponse type="ci">
+    <additional_answer />
+    <textline size="20"/>
+  </stringresponse>
+</problem>`,
+  question: `<p>
+    <strong>
+      <span style="background-color: #e03e2d;">
+        test
+      </span>
+    </strong>
+  </p>`,
+};
+
+export const shuffleProblemOLX = {
+  rawOLX: `<problem>
+  <multiplechoiceresponse>
+    <label>What Apple device competed with the portable CD player?</label>
+    <choicegroup type="MultipleChoice" shuffle="true">
+      <choice correct="false">The iPad</choice>
+      <choice correct="false">Napster</choice>
+      <choice correct="true">The iPod</choice>
+      <choice correct="false">The vegetable peeler</choice>
+    </choicegroup>
+  </multiplechoiceresponse>
+</problem>`,
+};
+
+export const labelDescriptionQuestionOLX = {
+  rawOLX:
+`<problem display_name="Eggs b) - Choosing a System" markdown="null" max_attempts="3" weight="0.5">
+  <p style="text-align: center;"><img height="274" width="" src="/static/boiling_eggs_water_system.png" alt="boiling eggs: water system"/></p>
+  <multiplechoiceresponse>
+  <label>Taking the system as just the <b>water</b>, as indicated by the red dashed line, what would be the correct expression for the first law of thermodynamics applied to this system?</label>
+  <description>Watch out, boiling water is hot</description>
+  <choicegroup type="MultipleChoice">
+    <choice correct="true">( Delta E_text{water} = Q )</choice>
+    <choice correct="false">( Delta E_text{water} = - W )</choice>
+    <choice correct="false">( Delta E_text{water} = 0 )</choice>
+  </choicegroup>
+  </multiplechoiceresponse>
+  <solution>
+    <div class="detailed-solution">
+      <h2>Explanation</h2>
+    </div>
+  </solution>
+</problem>`,
+
+  question: `<p style="text-align: center;"><img height="274" width="" src="/static/boiling_eggs_water_system.png" alt="boiling eggs: water system"></img></p>
+  
+  <label>Taking the system as just the <b>water</b>, as indicated by the red dashed line, what would be the correct expression for the first law of thermodynamics applied to this system?</label>
+  <em class="olx_description">Watch out, boiling water is hot</em>`,
+};
+
+export const htmlEntityTestOLX = {
+  rawOLX:
+  `<problem>
+  <multiplechoiceresponse>
+  <p>What is the content of the register x2 after executing the following three lines of instructions?</p>
+  <p><span style="font-family: 'courier new', courier;"><strong>Address&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;assembly instructions <br />0x0&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;addi x1, x0, 1<br />0x4&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;slli x2, x1, 4<br />0x8&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;sub x1, x2, x1</strong></span></p>
+  <choicegroup type="MultipleChoice">
+      <choice correct="false">answerA</choice>
+      <choice correct="true">answerB</choice>
+    </choicegroup>
+  <solution>
+  <div class="detailed-solution">
+   <p>Explanation</p>
+    <p><span style="font-family: 'courier new', courier;"><strong>Address&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;assembly instructions&#160;&#160;&#160;&#160;comment<br />0x0&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;addi x1, x0, 1&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;x1 = 0x1<br />0x4&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;slli x2, x1, 4&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;x2 = x1 &lt;&lt; 4 = 0x10<br />0x8&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;sub x1, x2, x1&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;x1 = x2 - x1 = 0x10 - 0x01 = 0xf</strong></span></p>
+    </div>
+    </solution>
+  </multiplechoiceresponse>
+  </problem>`,
+  data: {
+    answers: [
+      {
+        id: 'A',
+        title: 'answerA',
+        correct: false,
+      },
+      {
+        id: 'B',
+        title: 'answerB',
+        correct: true,
+      },
+    ],
+  },
+  question: `<p>What is the content of the register x2 after executing the following three lines of instructions?</p>
+  <p><span style="font-family: 'courier new', courier;"><strong>Address&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;assembly instructions <br></br>0x0&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;addi x1, x0, 1<br></br>0x4&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;slli x2, x1, 4<br></br>0x8&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;sub x1, x2, x1</strong></span></p>`,
+  solutionExplanation: `<p><span style="font-family: 'courier new', courier;"><strong>Address&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;assembly instructions&#160;&#160;&#160;&#160;comment<br></br>0x0&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;addi x1, x0, 1&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;x1 = 0x1<br></br>0x4&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;slli x2, x1, 4&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;x2 = x1 &lt;&lt; 4 = 0x10<br></br>0x8&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;sub x1, x2, x1&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;x1 = x2 - x1 = 0x10 - 0x01 = 0xf</strong></span></p>`,
+};
+
+export const numberParseTestOLX = {
+  rawOLX: `<problem>
+  <multiplechoiceresponse>
+  <p>What is the content of the register x2 after executing the following three lines of instructions?</p>
+  <choicegroup type="MultipleChoice">
+      <choice correct="false"><span style="font-family: 'courier new', courier;"><strong>0x10</strong></span></choice>
+      <choice correct="true"><span style="font-family: 'courier new', courier;"><strong>0x0f</strong></span></choice>
+      <choice correct="false"><span style="font-family: 'courier new', courier;"><strong>0x07</strong></span></choice>
+      <choice correct="false"><span style="font-family: 'courier new', courier;"><strong>0009</strong></span></choice>
+    </choicegroup>
+  </multiplechoiceresponse>
+  </problem>`,
+  data: {
+    answers: [
+      {
+        id: 'A',
+        title: `<span style="font-family: 'courier new', courier;"><strong>0x10</strong></span>`,
+        correct: false,
+      },
+      {
+        id: 'B',
+        title: `<span style="font-family: 'courier new', courier;"><strong>0x0f</strong></span>`,
+        correct: true,
+      },
+      {
+        id: 'C',
+        title: `<span style="font-family: 'courier new', courier;"><strong>0x07</strong></span>`,
+        correct: false,
+      },
+      {
+        id: 'D',
+        title: `<span style="font-family: 'courier new', courier;"><strong>0009</strong></span>`,
+        correct: false,
+      },
+    ],
+  },
+  question: '<p>What is the content of the register x2 after executing the following three lines of instructions?</p>',
+  buildOLX: `<problem>
+  <multiplechoiceresponse>
+  <p>What is the content of the register x2 after executing the following three lines of instructions?</p>
+  <choicegroup>
+      <choice correct="false"><span style="font-family: &apos;courier new&apos;, courier;"><strong>0x10</strong></span></choice>
+      <choice correct="true"><span style="font-family: &apos;courier new&apos;, courier;"><strong>0x0f</strong></span></choice>
+      <choice correct="false"><span style="font-family: &apos;courier new&apos;, courier;"><strong>0x07</strong></span></choice>
+      <choice correct="false"><span style="font-family: &apos;courier new&apos;, courier;"><strong>0009</strong></span></choice>
+    </choicegroup>
+  </multiplechoiceresponse>
+  </problem>`,
+};
+
+export const solutionExplanationTest = {
+  rawOLX: `<problem>
+      How <code class="lang-matlab">99</code> long is the array <code class="lang-matlab">q</code> after the following loop runs?
+      <pre><code class="lang-matlab">for i = 1:99
+      q(2*i - 1) = i;
+      end</code></pre>
+      <numericalresponse answer="197">
+        <label/>
+        <description>Enter your answer below. Type "e" if this code would produce an error</description>
+        <formulaequationinput/>
+        <responseparam default="2%" type="tolerance"/>
+        <solution>
+          <div class="detailed-solution">
+            <p>Explanation</p>
+            This loop will iterate <code class="lang-matlab">99</code> times, but the length of <code class="lang-matlab">q</code> will not be <code class="lang-matlab">99</code> due to indexing with the value <code class="lang-matlab">2*i -1</code>. On the last iteration, <code class="lang-matlab">i = 99</code>, so <code class="lang-matlab">2*i - 1 = 2*78 - 1 = 197</code>. This will be the last position filled in <code class="lang-matlab">q</code>, so the answer is <code class="lang-matlab">197</code>.
+          </div>
+        </solution>
+      </numericalresponse>
+    </problem>`,
+  solutionExplanation: `\n            
+            This loop will iterate <code class="lang-matlab">99</code> times, but the length of <code class="lang-matlab">q</code> will not be <code class="lang-matlab">99</code> due to indexing with the value <code class="lang-matlab">2*i -1</code>. On the last iteration, <code class="lang-matlab">i = 99</code>, so <code class="lang-matlab">2*i - 1 = 2*78 - 1 = 197</code>. This will be the last position filled in <code class="lang-matlab">q</code>, so the answer is <code class="lang-matlab">197</code>.\n          `,
+};
+
+export const solutionExplanationWithoutDivTest = {
+  rawOLX: `<problem display_name="For loop" markdown="null" max_attempts="3" showanswer="answered" weight="0.0">
+      <multiplechoiceresponse>
+        <p>Considering a list z=[8,12,2,9,7] and the following for loop:</p>
+        <b>
+          <p>for i in z: </p>
+          <p>     y=i+1 </p>
+          <p>     print(y)</p>
+        </b>
+        <label>What would be the result of running this code?</label>
+        <description>Select the correct answer </description>
+        <choicegroup type="MultipleChoice">
+          <choice correct="false">8 </choice>
+          <choice correct="false">[9,13,3,10,8] </choice>
+          <choice correct="true">9<br>
+          13</br>
+        3
+          <br>10</br>
+      8 </choice>
+        </choicegroup>
+        <solution>
+          <p/>
+          <img src="https://courses.edx.org/asset-v1:MITx+CTL.SC0x+1T2023+type@asset+block@Screenshot_2022-12-19_205625.png"/>
+          <p>How would you adjust your code to get the other results? We encourage you to try different for loops and share them in the discussion forum.</p>
+        </solution>
+      </multiplechoiceresponse>
+    </problem>`,
+  solutionExplanation: `
+          <p></p>
+          <img src="https://courses.edx.org/asset-v1:MITx+CTL.SC0x+1T2023+type@asset+block@Screenshot_2022-12-19_205625.png"></img>
+          <p>How would you adjust your code to get the other results? We encourage you to try different for loops and share them in the discussion forum.</p>
+        `,
+};
+
+export const tablesInRichTextTest = {
+  rawOLX: `<problem>
+    <choiceresponse>
+      <p>
+        The table shows the number of protein-coding genes, chromosomes, and bases in a range of eukaryotic species.
+      </p>
+      <table class="chart" summary="A list of eukaryotic organisms and their genome contents." label="Four columns. The first column lists the species, the second column lists the number of protein-coding genes, the third column lists the number of chromosomes, and the fourth column lists the genome size in bases." width="100%">
+        <caption>Eukaryotic Genomes Comparison</caption>
+        <tbody>
+          <tr>
+            <th scope="col" style="text-align: center; border: 1px solid black;">
+              <b>Species</b>
+            </th>
+            <th scope="col" style="text-align: center; border: 1px solid black;">
+              <b>Protein-coding genes</b>
+            </th>
+            <th scope="col" style="text-align: center; border: 1px solid black;">
+              <b>Chromosomes</b>
+            </th>
+            <th scope="col" style="text-align: center; border: 1px solid black;">
+              <b>Bases</b>
+            </th>
+          </tr>
+          <tr>
+            <td style="text-align: center; border: 1px solid black;">Yeast (<i>S. cerevisiae</i>)</td>
+            <td style="text-align: center; border: 1px solid black;">~5,800</td>
+            <td style="text-align: center; border: 1px solid black;">16</td>
+            <td style="text-align: center; border: 1px solid black;">~12 Mb</td>
+          </tr>
+          <tr>
+            <td style="text-align: center; border: 1px solid black;">Arabidopsis (<i>A. thaliana</i>)</td>
+            <td style="text-align: center; border: 1px solid black;">~27,000</td>
+            <td style="text-align: center; border: 1px solid black;">5</td>
+            <td style="text-align: center; border: 1px solid black;">~115 Mb</td>
+          </tr>
+          <tr>
+            <td style="text-align: center; border: 1px solid black;">Rice (<i>O. sativa</i>)</td>
+            <td style="text-align: center; border: 1px solid black;">~41,000</td>
+            <td style="text-align: center; border: 1px solid black;">12</td>
+            <td style="text-align: center; border: 1px solid black;">~390 Mb</td>
+          </tr>
+          <tr>
+            <td style="text-align: center; border: 1px solid black;">Worm (<i>C. elegans</i>)</td>
+            <td style="text-align: center; border: 1px solid black;">~19,000</td>
+            <td style="text-align: center; border: 1px solid black;">6</td>
+            <td style="text-align: center; border: 1px solid black;">~100 Mb</td>
+          </tr>
+          <tr>
+            <td style="text-align: center; border: 1px solid black;">Fly (<i>D. melanogaster</i>)</td>
+            <td style="text-align: center; border: 1px solid black;">~14,000</td>
+            <td style="text-align: center; border: 1px solid black;">4</td>
+            <td style="text-align: center; border: 1px solid black;">~165 Mb</td>
+          </tr>
+          <tr>
+            <td style="text-align: center; border: 1px solid black;">Mouse (<i>M. musculus</i>)</td>
+            <td style="text-align: center; border: 1px solid black;">~23,000</td>
+            <td style="text-align: center; border: 1px solid black;">20</td>
+            <td style="text-align: center; border: 1px solid black;">~3 Gb</td>
+          </tr>
+          <tr>
+            <td style="text-align: center; border: 1px solid black;">Human (<i>H. sapiens</i>)</td>
+            <td style="text-align: center; border: 1px solid black;">~21,000</td>
+            <td style="text-align: center; border: 1px solid black;">23</td>
+            <td style="text-align: center; border: 1px solid black;">~3 Gb</td>
+          </tr>
+        </tbody>
+      </table>
+      <p>
+        In which of the following observations does the C-value paradox apply? Select all that apply.
+      </p>
+      <checkboxgroup>
+        <choice correct="false">
+          <div>
+            Rice has a larger genome and more genes than <i>Arabidopsis</i>.
+          </div>
+        </choice>
+        <choice correct="true">
+          <div>
+            Humans have a larger genome but fewer genes than <i>Arabidopsis</i>.
+          </div>
+        </choice>
+        <choice correct="true">
+          <div>
+            Worms have a smaller genome but more genes than flies.
+          </div>
+        </choice>
+      </checkboxgroup>
+      <solution>
+        <div class="detailed-solution">
+          <p>
+            Explanation
+          </p>
+          <p>
+            Explanation
+          </p>
+          <p dir="ltr" id="docs-internal-guid-8b7482ab-7fff-27bd-79c5-a433e43a95ea">
+            The C-value paradox states that there is no relation between size of genome and number of genes. In the comparison between rice and <i>Arabidopsis</i>, the size of the rice genome is both larger and contains a greater number of genes than <i>Arabidopsis</i>, so the C-value paradox does not apply here. In the remaining options, the larger genomes have fewer genes.
+          </p>
+        </div>
+      </solution>
+    </choiceresponse>
+  </problem>`,
+  question: `<p>
+        The table shows the number of protein-coding genes, chromosomes, and bases in a range of eukaryotic species.
+      </p>
+      <table class="chart" summary="A list of eukaryotic organisms and their genome contents." label="Four columns. The first column lists the species, the second column lists the number of protein-coding genes, the third column lists the number of chromosomes, and the fourth column lists the genome size in bases." width="100%">
+        <caption>Eukaryotic Genomes Comparison</caption>
+        <tbody>
+          <tr>
+            <th scope="col" style="text-align: center; border: 1px solid black;">
+              <b>Species</b>
+            </th>
+            <th scope="col" style="text-align: center; border: 1px solid black;">
+              <b>Protein-coding genes</b>
+            </th>
+            <th scope="col" style="text-align: center; border: 1px solid black;">
+              <b>Chromosomes</b>
+            </th>
+            <th scope="col" style="text-align: center; border: 1px solid black;">
+              <b>Bases</b>
+            </th>
+          </tr>
+          <tr>
+            <td style="text-align: center; border: 1px solid black;">Yeast (<i>S. cerevisiae</i>)</td>
+            <td style="text-align: center; border: 1px solid black;">~5,800</td>
+            <td style="text-align: center; border: 1px solid black;">16</td>
+            <td style="text-align: center; border: 1px solid black;">~12 Mb</td>
+          </tr>
+          <tr>
+            <td style="text-align: center; border: 1px solid black;">Arabidopsis (<i>A. thaliana</i>)</td>
+            <td style="text-align: center; border: 1px solid black;">~27,000</td>
+            <td style="text-align: center; border: 1px solid black;">5</td>
+            <td style="text-align: center; border: 1px solid black;">~115 Mb</td>
+          </tr>
+          <tr>
+            <td style="text-align: center; border: 1px solid black;">Rice (<i>O. sativa</i>)</td>
+            <td style="text-align: center; border: 1px solid black;">~41,000</td>
+            <td style="text-align: center; border: 1px solid black;">12</td>
+            <td style="text-align: center; border: 1px solid black;">~390 Mb</td>
+          </tr>
+          <tr>
+            <td style="text-align: center; border: 1px solid black;">Worm (<i>C. elegans</i>)</td>
+            <td style="text-align: center; border: 1px solid black;">~19,000</td>
+            <td style="text-align: center; border: 1px solid black;">6</td>
+            <td style="text-align: center; border: 1px solid black;">~100 Mb</td>
+          </tr>
+          <tr>
+            <td style="text-align: center; border: 1px solid black;">Fly (<i>D. melanogaster</i>)</td>
+            <td style="text-align: center; border: 1px solid black;">~14,000</td>
+            <td style="text-align: center; border: 1px solid black;">4</td>
+            <td style="text-align: center; border: 1px solid black;">~165 Mb</td>
+          </tr>
+          <tr>
+            <td style="text-align: center; border: 1px solid black;">Mouse (<i>M. musculus</i>)</td>
+            <td style="text-align: center; border: 1px solid black;">~23,000</td>
+            <td style="text-align: center; border: 1px solid black;">20</td>
+            <td style="text-align: center; border: 1px solid black;">~3 Gb</td>
+          </tr>
+          <tr>
+            <td style="text-align: center; border: 1px solid black;">Human (<i>H. sapiens</i>)</td>
+            <td style="text-align: center; border: 1px solid black;">~21,000</td>
+            <td style="text-align: center; border: 1px solid black;">23</td>
+            <td style="text-align: center; border: 1px solid black;">~3 Gb</td>
+          </tr>
+        </tbody>
+      </table>
+      <p>
+        In which of the following observations does the C-value paradox apply? Select all that apply.
+      </p>`,
+};
+
+export const parseOutExplanationTests = {
+  rawOLX: `<problem>
+    <multiplechoiceresponse>
+      <choicegroup>
+      </choicegroup>
+      <solution>
+        <p>Explanation</p>
+        <p>
+          Explanation
+        </p>
+        <p>solution meat</p>
+      </solution>
+    </multiplechoiceresponse>
+    <demandhint></demandhint>
+  </problem>`,
+  solutionExplanation: `
+        
+        
+        <p>solution meat</p>
+      `
+};
+
+export const multiSelectPartialCredit = {
+  rawOLX: `<problem>
+    <choiceresponse partial_credit="EDC">
+      <label>Which of the following is a fruit?</label>
+      <description>Select all that apply.</description>
+      <checkboxgroup>
+        <choice correct="true">apple</choice>
+        <choice correct="true">pumpkin</choice>
+        <choice correct="false">potato</choice>
+        <choice correct="true">tomato</choice>
+      </checkboxgroup>
+    </choiceresponse>
+  </problem>`
+}
+
+export const singleSelectPartialCredit = {
+  rawOLX: `<problem>
+    <multiplechoiceresponse partial_credit="points">
+      <label>What Apple device competed with the portable CD player?</label>
+      <choicegroup type="MultipleChoice">
+        <choice correct="false">The iPad</choice>
+        <choice correct="false">Napster</choice>
+        <choice correct="true">The iPod</choice>
+        <choice correct="partial" point_value="0.25">The vegetable peeler</choice>
+      </choicegroup>
+    </multiplechoiceresponse>
+  </problem>`
+}
+
+export const numericalProblemPartialCredit = {
+  rawOLX: `<problem>
+    <numericalresponse answer="9.3*10^7" partial_credit="close">
+      <label>How many miles away from Earth is the sun?</label>
+      <description>Use scientific notation to answer.</description>
+      <formulaequationinput/>
+      <responseparam type="tolerance" default="1%" partial_range="3"/>
+    </numericalresponse>
+  </problem>`
+}
+
+export const unexpectOlxAfterProblemTypeTags = {
+  rawOLX: `<problem>
+    <multiplechoiceresponse>
+      <label>What Apple device competed with the portable CD player?</label>
+      <choicegroup type="MultipleChoice">
+        <choice correct="false">The iPad</choice>
+        <choice correct="false">Napster</choice>
+        <choice correct="true">The iPod</choice>
+      </choicegroup>
+    </multiplechoiceresponse>
+    <a href="#">Check out Apple's history for more information.</a>
+    <demandhint>
+      <hint><p>You can add an optional hint like this. Problems that have a hint include a hint button, and this text appears the first time learners select the button.</p></hint>
+      <hint><p>If you add more than one hint, a different hint appears each time learners select the hint button.</p></hint>
+    </demandhint>
+  </problem>`
+}
diff --git a/src/editors/containers/ProblemEditor/data/mockData/problemTestData.js b/src/editors/containers/ProblemEditor/data/mockData/problemTestData.js
new file mode 100644
index 0000000000..65e6d3a896
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/data/mockData/problemTestData.js
@@ -0,0 +1,417 @@
+export const checklistWithFeebackHints = {
+  state: {
+    rawOLX: '<problem>\n    <choiceresponse>\n        <p>You can use this template as a guide to the simple editor markdown and OLX markup to use for checkboxes with hints and feedback problems. Edit this component to replace this template with your own assessment.</p>\n        <label>Add the question text, or prompt, here. This text is required.</label>\n        <description>You can add an optional tip or note related to the prompt like this.</description>\n        <checkboxgroup>\n            <choice correct="true">a correct answer\n                <choicehint selected="true">You can specify optional feedback that appears after the learner selects and submits this answer.</choicehint>\n                <choicehint selected="false">You can specify optional feedback that appears after the learner clears and submits this answer.</choicehint>\n            </choice>\n            <choice correct="false">an incorrect answer\n            </choice>\n            <choice correct="false">an incorrect answer\n                <choicehint selected="true">You can specify optional feedback for none, all, or a subset of the answers.</choicehint>\n                <choicehint selected="false">You can specify optional feedback for selected answers, cleared answers, or both.</choicehint>\n            </choice>\n            <choice correct="true">a correct answer\n            </choice>\n            <compoundhint value="A B D">You can specify optional feedback for a combination of answers which appears after the specified set of answers is submitted.</compoundhint>\n            <compoundhint value="A B C D">You can specify optional feedback for one, several, or all answer combinations.</compoundhint>\n        </checkboxgroup>\n    </choiceresponse>\n\n    <demandhint>\n        <hint>You can add an optional hint like this. Problems that have a hint include a hint button, and this text appears the first time learners select the button.</hint>\n        <hint>If you add more than one hint, a different hint appears each time learners select the hint button.</hint>\n    </demandhint>\n</problem>\n',
+    problemType: 'MULTISELECT',
+    question: 'You can use this template as a guide to the simple editor markdown and OLX markup to use for checkboxes with hints and feedback problems. Edit this component to replace this template with your own assessment.\n\n<p>Add the question text, or prompt, here. This text is required.||You can add an optional tip or note related to the prompt like this.</p>\n\n',
+    answers: [
+      {
+        id: 'A',
+        title: 'a correct answer',
+        correct: true,
+        selectedFeedback: ' You can specify optional feedback that appears after the learner selects and submits this answer.',
+        unselectedFeedback: 'You can specify optional feedback that appears after the learner clears and submits this answer.',
+      },
+      {
+        id: 'B',
+        title: 'an incorrect answer',
+        correct: false,
+        selectedFeedback: '',
+        unselectedFeedback: '',
+      },
+      {
+        id: 'C',
+        title: 'an incorrect answer',
+        correct: false,
+        selectedFeedback: ' You can specify optional feedback for none, all, or a subset of the answers.',
+        unselectedFeedback: 'You can specify optional feedback for selected answers, cleared answers, or both.',
+      },
+      {
+        id: 'D',
+        title: 'a correct answer',
+        correct: true,
+        selectedFeedback: '',
+        unselectedFeedback: '',
+      },
+    ],
+    groupFeedbackList: [
+      {
+        id: 3,
+        answers: [
+          'A',
+          'B',
+          'D',
+        ],
+        selectedFeedback: 'You can specify optional feedback for a combination of answers which appears after the specified set of answers is submitted.',
+      },
+      {
+        id: 4,
+        answers: [
+          'A',
+          'B',
+          'C',
+          'D',
+        ],
+        selectedFeedback: 'You can specify optional feedback for one, several, or all answer combinations.',
+      },
+    ],
+    settings: {
+      hints: [
+        {
+          id: 14,
+          value: 'You can add an optional hint like this. Problems that have a hint include a hint button, and this text appears the first time learners select the button.',
+        },
+        {
+          id: 15,
+          value: 'If you add more than one hint, a different hint appears each time learners select the hint button.',
+        },
+      ],
+      scoring: {
+        weight: 2.5,
+        attempts: {
+          unlimited: false,
+          number: 5,
+        },
+      },
+      timeBetween: 3,
+      showAnswer: {
+        on: 'after_attempts',
+        afterAttempts: 2,
+      },
+      showResetButton: true,
+    },
+  },
+  metadata: {
+    markdown: `You can use this template as a guide to the simple editor markdown and OLX markup to use for checkboxes with hints and feedback problems. Edit this component to replace this template with your own assessment.
+
+>>Add the question text, or prompt, here. This text is required.||You can add an optional tip or note related to the prompt like this.<<
+[x] a correct answer{{selected:  You can specify optional feedback that appears after the learner selects and submits this answer.},{unselected: You can specify optional feedback that appears after the learner clears and submits this answer.}}
+[ ] an incorrect answer
+[ ] an incorrect answer{{selected:  You can specify optional feedback for none, all, or a subset of the answers.},{unselected: You can specify optional feedback for selected answers, cleared answers, or both.}}
+[x] a correct answer
+||You can add an optional hint like this. Problems that have a hint include a hint button, and this text appears the first time learners select the button.||
+||If you add more than one hint, a different hint appears each time learners select the hint button.||
+{{ (( A B D )) You can specify optional feedback for a combination of answers which appears after the specified set of answers is submitted. }}
+{{ (( A B C D )) You can specify optional feedback for one, several, or all answer combinations. }}
+`,
+    max_attempts: 5,
+    show_reset_button: true,
+    showanswer: 'after_attempts',
+    attempts_before_showanswer_button: 2,
+    submission_wait_seconds: 3,
+    weight: 2.5,
+  },
+};
+
+export const dropdownWithFeedbackHints = {
+  state: {
+    rawOLX: '<problem>\n    <optionresponse>\n        <p>You can use this template as a guide to the simple editor markdown and OLX markup to use for dropdown with hints and feedback problems. Edit this component to replace this template with your own assessment.</p>\n        <label>Add the question text, or prompt, here. This text is required.</label>\n        <description>You can add an optional tip or note related to the prompt like this. </description>\n        <optioninput>\n            <option correct="False">an incorrect answer <optionhint>You can specify optional feedback like this, which appears after this answer is submitted.</optionhint></option>\n            <option correct="True">the correct answer</option>\n            <option correct="False">an incorrect answer <optionhint>You can specify optional feedback for none, a subset, or all of the answers.</optionhint></option>\n        </optioninput>\n    </optionresponse>\n    <demandhint>\n      <hint>You can add an optional hint like this. Problems that have a hint include a hint button, and this text appears the first time learners select the button.</hint>\n      <hint>If you add more than one hint, a different hint appears each time learners select the hint button.</hint>\n    </demandhint>\n</problem>\n',
+    problemType: 'DROPDOWN',
+    question: 'You can use this template as a guide to the simple editor markdown and OLX markup to use for dropdown with hints and feedback problems. Edit this component to replace this template with your own assessment.\n<p>Add the question text, or prompt, here. This text is required.||You can add an optional tip or note related to the prompt like this. </p>\n',
+    answers: [
+      {
+        id: 'A',
+        title: 'an incorrect answer',
+        correct: false,
+        selectedFeedback: 'You can specify optional feedback like this, which appears after this answer is submitted.',
+      },
+      {
+        id: 'B',
+        title: 'the correct answer',
+        correct: true,
+        selectedFeedback: '',
+      },
+      {
+        id: 'C',
+        title: 'an incorrect answer',
+        correct: false,
+        selectedFeedback: 'You can specify optional feedback for none, a subset, or all of the answers.',
+      },
+    ],
+    groupFeedbackList: [],
+    settings: {
+      hints: [
+        {
+          id: 8,
+          value: 'You can add an optional hint like this. Problems that have a hint include a hint button, and this text appears the first time learners select the button.',
+        },
+        {
+          id: 9,
+          value: 'If you add more than one hint, a different hint appears each time learners select the hint button.',
+        },
+      ],
+      scoring: {
+        weight: 2.5,
+        attempts: {
+          unlimited: false,
+          number: 5,
+        },
+      },
+      timeBetween: 3,
+      showAnswer: {
+        on: 'after_attempts',
+        afterAttempts: 2,
+      },
+      showResetButton: true,
+    },
+  },
+  metadata: {
+    markdown: `You can use this template as a guide to the simple editor markdown and OLX markup to use for dropdown with hints and feedback problems. Edit this component to replace this template with your own assessment.
+>>Add the question text, or prompt, here. This text is required.||You can add an optional tip or note related to the prompt like this. <<
+[[
+ an incorrect answer {{You can specify optional feedback like this, which appears after this answer is submitted.}}
+ (the correct answer)
+ an incorrect answer {{You can specify optional feedback for none, a subset, or all of the answers.}}
+]]
+||You can add an optional hint like this. Problems that have a hint include a hint button, and this text appears the first time learners select the button.||
+||If you add more than one hint, a different hint appears each time learners select the hint button.||
+`,
+    max_attempts: 5,
+    show_reset_button: true,
+    showanswer: 'after_attempts',
+    attempts_before_showanswer_button: 2,
+    submission_wait_seconds: 3,
+    weight: 2.5,
+  },
+};
+
+export const numericWithHints = {
+  state: {
+    rawOLX: '<problem>\n    <numericalresponse answer="100">\n        <p>You can use this template as a guide to the simple editor markdown and OLX markup to use for numerical input with hints and feedback problems. Edit this component to replace this template with your own assessment.</p>\n        <label>Add the question text, or prompt, here. This text is required.</label>\n        <description>You can add an optional tip or note related to the prompt like this.</description>\n        <responseparam type="tolerance" default="5"/>\n        <formulaequationinput/>\n        <correcthint>You can specify optional feedback like this, which appears after this answer is submitted.</correcthint>\n    </numericalresponse>\n    <demandhint>\n        <hint>You can add an optional hint like this. Problems that have a hint include a hint button, and this text appears the first time learners select the button.</hint>\n        <hint>If you add more than one hint, a different hint appears each time learners select the hint button.</hint>\n    </demandhint>\n</problem>\n',
+    problemType: 'TEXTINPUT',
+    question: 'You can use this template as a guide to the simple editor markdown and OLX markup to use for numerical input with hints and feedback problems. Edit this component to replace this template with your own assessment.\n\n<p>Add the question text, or prompt, here. This text is required.||You can add an optional tip or note related to the prompt like this. </p>\n\n',
+    answers: [
+      {
+        id: 'A',
+        title: '100 +-5',
+        selectedFeedback: 'You can specify optional feedback like this, which appears after this answer is submitted.',
+        correct: true,
+      },
+      {
+        id: 'B',
+        title: '90 +-5',
+        selectedFeedback: 'You can specify optional feedback like this, which appears after this answer is submitted.',
+        correct: true,
+      },
+      {
+        id: 'C',
+        title: '60 +-5',
+        selectedFeedback: 'You can specify optional feedback like this, which appears after this answer is submitted.',
+        correct: false,
+      },
+    ],
+    groupFeedbackList: [],
+    settings: {
+      hints: [
+        {
+          id: 6,
+          value: 'You can add an optional hint like this. Problems that have a hint include a hint button, and this text appears the first time learners select the button.',
+        },
+        {
+          id: 7,
+          value: 'If you add more than one hint, a different hint appears each time learners select the hint button.',
+        },
+      ],
+      scoring: {
+        weight: 2.5,
+        attempts: {
+          unlimited: false,
+          number: 0,
+        },
+      },
+      timeBetween: 0,
+      showAnswer: {
+        on: 'after_attempts',
+        afterAttempts: 1,
+      },
+      showResetButton: false,
+    },
+  },
+  metadata: {
+    markdown: `You can use this template as a guide to the simple editor markdown and OLX markup to use for numerical input with hints and feedback problems. Edit this component to replace this template with your own assessment.
+
+>>Add the question text, or prompt, here. This text is required.||You can add an optional tip or note related to the prompt like this. <<
+=100 +-5 {{You can specify optional feedback like this, which appears after this answer is submitted.}}
+or=90 +-5 {{You can specify optional feedback like this, which appears after this answer is submitted.}}
+not=60 +-5 {{You can specify optional feedback like this, which appears after this answer is submitted.}}
+||You can add an optional hint like this. Problems that have a hint include a hint button, and this text appears the first time learners select the button.||
+||If you add more than one hint, a different hint appears each time learners select the hint button.||
+`,
+    weight: 2.5,
+    max_attempts: 0,
+    rerandomize: 'invalid_input',
+    showanswer: 'invalid_input',
+    attempts_before_showanswer_button: 2,
+  },
+};
+
+export const textInputWithHints = {
+  state: {
+    rawOLX: '<problem>\n    <stringresponse answer="the correct answer" type="ci">\n        <p>You can use this template as a guide to the simple editor markdown and OLX markup to use for text input with hints and feedback problems. Edit this component to replace this template with your own assessment.</p>\n        <label>Add the question text, or prompt, here. This text is required.</label>\n        <description>You can add an optional tip or note related to the prompt like this.</description>\n        <correcthint>You can specify optional feedback like this, which appears after this answer is submitted.</correcthint>\n        <additional_answer answer="optional acceptable variant of the correct answer"/>\n        <stringequalhint answer="optional incorrect answer such as a frequent misconception">You can specify optional feedback for none, a subset, or all of the answers.</stringequalhint>\n        <textline size="20"/>\n    </stringresponse>\n    <demandhint>\n        <hint>You can add an optional hint like this. Problems that have a hint include a hint button, and this text appears the first time learners select the button.</hint>\n        <hint>If you add more than one hint, a different hint appears each time learners select the hint button.</hint>\n    </demandhint>\n</problem>\n',
+    problemType: 'TEXTINPUT',
+    question: 'You can use this template as a guide to the simple editor markdown and OLX markup to use for text input with hints and feedback problems. Edit this component to replace this template with your own assessment.\n\n<p>Add the question text, or prompt, here. This text is required.||You can add an optional tip or note related to the prompt like this. </p>\n\n',
+    answers: [
+      {
+        id: 'A',
+        title: 'the correct answer',
+        selectedFeedback: 'You can specify optional feedback like this, which appears after this answer is submitted.',
+        correct: true,
+      },
+      {
+        id: 'B',
+        title: 'optional acceptable variant of the correct answer',
+        selectedFeedback: '',
+        correct: true,
+      },
+      {
+        id: 'C',
+        title: 'optional incorrect answer such as a frequent misconception',
+        selectedFeedback: 'You can specify optional feedback for none, a subset, or all of the answers.',
+        correct: false,
+      },
+    ],
+    groupFeedbackList: [],
+    settings: {
+      hints: [
+        {
+          id: 9,
+          value: 'You can add an optional hint like this. Problems that have a hint include a hint button, and this text appears the first time learners select the button.',
+        },
+        {
+          id: 10,
+          value: 'If you add more than one hint, a different hint appears each time learners select the hint button.',
+        },
+      ],
+      scoring: {
+        weight: 2.5,
+        attempts: {
+          unlimited: false,
+          number: 0,
+        },
+      },
+      timeBetween: 0,
+      showAnswer: {
+        on: '',
+        afterAttempts: 1,
+      },
+      showResetButton: false,
+    },
+  },
+  metadata: {
+    markdown: `You can use this template as a guide to the simple editor markdown and OLX markup to use for text input with hints and feedback problems. Edit this component to replace this template with your own assessment.
+
+>>Add the question text, or prompt, here. This text is required.||You can add an optional tip or note related to the prompt like this. <<
+=the correct answer {{You can specify optional feedback like this, which appears after this answer is submitted.}}
+or=optional acceptable variant of the correct answer
+not=optional incorrect answer such as a frequent misconception {{You can specify optional feedback for none, a subset, or all of the answers.}}
+||You can add an optional hint like this. Problems that have a hint include a hint button, and this text appears the first time learners select the button.||
+||If you add more than one hint, a different hint appears each time learners select the hint button.||
+`,
+    weight: 2.5,
+  },
+};
+
+export const singleSelectWithHints = {
+  state: {
+    rawOLX: '<problem>\n<p>You can use this template as a guide to the simple editor markdown and OLX markup to use for checkboxes with hints and feedback problems. Edit this component to replace this template with your own assessment.</p>\n\n<label>Add the question text, or prompt, here. This text is required.</label>\n<description>You can add an optional tip or note related to the prompt like this.</description>\n<multiplechoiceresponse>\n  <choicegroup type="MultipleChoice">\n    <choice correct="true">a correct answer <choicehint>selected: You can specify optional feedback that appears after the learner selects and submits this answer. }, { unselected: You can specify optional feedback that appears after the learner clears and submits this answer.</choicehint></choice>\n    <choice correct="false">an incorrect answer</choice>\n    <choice correct="false">an incorrect answer <choicehint>selected: You can specify optional feedback for none, all, or a subset of the answers. }, { unselected: You can specify optional feedback for selected answers, cleared answers, or both.</choicehint></choice>\n    <choice correct="false">an incorrect answer again</choice>\n  </choicegroup>\n</multiplechoiceresponse>\n<choiceresponse>\n  <checkboxgroup>\n    <compoundhint value="A B D">You can specify optional feedback for a combination of answers which appears after the specified set of answers is submitted.</compoundhint>\n    <compoundhint value="A B C D">You can specify optional feedback for one, several, or all answer combinations.</compoundhint>\n  </checkboxgroup>\n</choiceresponse>\n\n\n<demandhint>\n  <hint>You can add an optional hint like this. Problems that have a hint include a hint button, and this text appears the first time learners select the button.</hint>\n  <hint>If you add more than one hint, a different hint appears each time learners select the hint button.</hint>\n</demandhint>\n</problem>',
+    problemType: 'SINGLESELECT',
+    question: 'You can use this template as a guide to the simple editor markdown and OLX markup to use for checkboxes with hints and feedback problems. Edit this component to replace this template with your own assessment.\n\n<p>Add the question text, or prompt, here. This text is required.||You can add an optional tip or note related to the prompt like this.</p>\n\n',
+    answers: [
+      {
+        id: 'A',
+        title: 'a correct answer',
+        correct: true,
+        selectedFeedback: 'Some new feedback',
+      },
+      {
+        id: 'B',
+        title: 'an incorrect answer',
+        correct: false,
+        selectedFeedback: '',
+      },
+      {
+        id: 'C',
+        title: 'an incorrect answer',
+        correct: false,
+        selectedFeedback: 'Wrong feedback',
+      },
+      {
+        id: 'D',
+        title: 'an incorrect answer again',
+        correct: false,
+        selectedFeedback: '',
+      },
+    ],
+    groupFeedbackList: [],
+    settings: {
+      hints: [
+        {
+          id: 13,
+          value: 'You can add an optional hint like this. Problems that have a hint include a hint button, and this text appears the first time learners select the button.',
+        },
+        {
+          id: 14,
+          value: 'If you add more than one hint, a different hint appears each time learners select the hint button.',
+        },
+      ],
+      scoring: {
+        attempts: {
+          unlimited: true,
+          number: null,
+        },
+      },
+      timeBetween: 0,
+      showAnswer: {
+        on: '',
+        afterAttempts: 1,
+      },
+      showResetButton: false,
+    },
+  },
+  metadata: {
+    markdown: `You can use this template as a guide to the simple editor markdown and OLX markup to use for checkboxes with hints and feedback problems. Edit this component to replace this template with your own assessment.
+
+>>Add the question text, or prompt, here. This text is required.||You can add an optional tip or note related to the prompt like this.<<
+(x) a correct answer {{Some new feedback}}
+( ) an incorrect answer
+( ) an incorrect answer {{Wrong feedback}}
+( ) an incorrect answer again
+||You can add an optional hint like this. Problems that have a hint include a hint button, and this text appears the first time learners select the button.||
+||If you add more than one hint, a different hint appears each time learners select the hint button.||
+`,
+  },
+};
+
+export const negativeAttempts = {
+  state: {
+    rawOLX: '<problem>\n    <numericalresponse answer="100">\n        <responseparam type="tolerance" default="5"/>\n        <formulaequationinput/>\n    </numericalresponse>\n</problem>\n',
+    problemType: 'TEXTINPUT',
+    question: '',
+    answers: [
+      {
+        id: 'A',
+        title: '100 +-5',
+        correct: true,
+      },
+    ],
+    groupFeedbackList: [],
+    settings: {
+      scoring: {
+        weight: 2.5,
+        attempts: {
+          unlimited: false,
+          number: 0,
+        },
+      },
+    },
+  },
+  metadata: {
+    markdown: `
+=100 +-5 {{You can specify optional feedback like this, which appears after this answer is submitted.}}
+`,
+    weight: 2.5,
+    max_attempts: -1,
+    rerandomize: 'invalid_input',
+    showanswer: 'invalid_input',
+    attempts_before_showanswer_button: 2,
+  },
+};
diff --git a/src/editors/containers/ProblemEditor/data/reactStateOLXHelpers.js b/src/editors/containers/ProblemEditor/data/reactStateOLXHelpers.js
new file mode 100644
index 0000000000..fcece04feb
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/data/reactStateOLXHelpers.js
@@ -0,0 +1,114 @@
+import { flatten } from 'lodash';
+
+/**
+ * flattenSubNodes - appends a nodes children to a given array 'subNodes' in a flattened format.
+ * Only appends direct children unless `recursive` is set to true.
+ * @param {object} node
+ * @param {object[]} subNodes
+ * @param {object} options - { recursive: false } Whether to search recursively for child tags.
+ * @returns {void}
+ */
+function flattenSubNodes(node, subNodes, options = { recursive: false }) {
+  const values = Array.isArray(node) ? (
+    flatten(node.map(n => Object.values(n)))
+  ) : Object.values(node);
+
+  values.forEach(value => {
+    if (Array.isArray(value)) {
+      subNodes.push(...value);
+
+      if (options.recursive) {
+        value.forEach(nestedNode => {
+          flattenSubNodes(nestedNode, subNodes, options);
+        });
+      }
+    }
+  });
+}
+
+/**
+ * function nodeContainsChildTags - checks whether a node contains any subnodes with the specified tag names.
+ *
+ * @param {object} node - Example for node:
+ *   {"div":
+ *     [
+ *       {"label":
+ *         [
+ *           {"#text":"def"}
+ *         ]
+ *       },
+ *       {"div":
+ *         [{
+ *           label:
+ *             [
+ *               { '#text': 'def' },
+ *             ],
+ *         }],
+ *       },
+ *       {"#text":" "},
+ *       {"em":
+ *         [
+ *           {"#text":"ghi"}
+ *         ],
+ *         ":@": {"@_class":"olx_description"}
+ *       },
+ *       {"em":
+ *         [
+ *           {"#text":"jkl"}
+ *         ]
+ *       }
+ *     ]
+ *   }
+ * @param {string[]} tagNames
+ * @param {boolean} [recursive=false] - Whether to search recursively for child tags.
+ *
+ * @returns {boolean} whether node contains the specified child tags
+ */
+export function nodeContainsChildTags(node, tagNames, options = { recursive: false }) {
+  const subNodes = [];
+  flattenSubNodes(node, subNodes, options);
+  const res = subNodes.some(subNode => tagNames.includes(Object.keys(subNode)[0]));
+  return res;
+}
+
+/**
+ * @param {object} node
+ * @returns {string} the tag name of the node
+ */
+export function tagName(node) {
+  if (Array.isArray(node)) {
+    throw new TypeError('function tagName does not accept arrays as input');
+  }
+  return Object.keys(node).find(key => key.match(/^[a-zA-Z].*/));
+}
+
+/**
+ * findNodesAndRemoveTheirParentNodes - given 'arrayOfNodes', an array that results from the
+ * XMLParser, this looks for 'nodesToFind': specific child tags (e.g. 'label'), and removes
+ * their parent tags (e.g. 'div') but keeps all their content one level higher.
+ * The 'parentsToRemove' array should contain a list of parent tags that will be removed.
+ *
+ * For example, if you have a div containing a p that contains a label and an em, and you specify
+ * 'label' as the nodeToFind and 'p' as the parentToRemove, then you will get a div containing a label and an em.
+ * @param {object} { arrayOfNodes, nodesToFind, parentsToRemove }
+ *
+ * @returns {object} - an array of nodes
+ */
+export function findNodesAndRemoveTheirParentNodes({
+  arrayOfNodes,
+  nodesToFind,
+  parentsToRemove,
+}) {
+  const result = [];
+  arrayOfNodes.forEach((node) => {
+    const containsRelevantSubnodes = nodeContainsChildTags(node, nodesToFind);
+
+    if (!containsRelevantSubnodes || !parentsToRemove.includes(tagName(node))) {
+      result.push(node);
+    } else {
+      const subNodes = Object.values(node)[0];
+      result.push(...subNodes);
+    }
+  });
+  return result;
+}
diff --git a/src/editors/containers/ProblemEditor/data/reactStateOLXHelpers.test.js b/src/editors/containers/ProblemEditor/data/reactStateOLXHelpers.test.js
new file mode 100644
index 0000000000..ab5b31c1bf
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/data/reactStateOLXHelpers.test.js
@@ -0,0 +1,182 @@
+import { nodeContainsChildTags, findNodesAndRemoveTheirParentNodes, tagName } from './reactStateOLXHelpers';
+
+describe('reactStateOLXHelpers', () => {
+  describe('findNodesWithChildTags', () => {
+    const node = {
+      div:
+       [
+         {
+           label:
+           [
+             { '#text': 'def' },
+           ],
+         },
+         { '#text': ' ' },
+         {
+           em:
+           [
+             { '#text': 'ghi' },
+           ],
+           ':@': { '@_class': 'olx_description' },
+         },
+         {
+           em:
+           [
+             { '#text': 'jkl' },
+           ],
+         },
+       ],
+    };
+
+    const nodeWithNestedLabel = {
+      div:
+       [
+         {
+           div:
+           [{
+             label:
+            [
+              { '#text': 'def' },
+            ],
+           }],
+         },
+         { '#text': ' ' },
+         {
+           em:
+           [
+             { '#text': 'ghi' },
+           ],
+           ':@': { '@_class': 'olx_description' },
+         },
+         {
+           em:
+           [
+             { '#text': 'jkl' },
+           ],
+         },
+       ],
+    };
+
+    it('should return true if node contains specified child tags', () => {
+      const received = nodeContainsChildTags(node, ['p', 'label']);
+      expect(received).toEqual(true);
+    });
+
+    it('should return false if node does not contain child tags', () => {
+      const received = nodeContainsChildTags(node, ['p', 'span']);
+      expect(received).toEqual(false);
+    });
+
+    it('should return true if node contains specified nested child tags and recursive is true', () => {
+      const received = nodeContainsChildTags(nodeWithNestedLabel, ['p', 'label'], { recursive: true });
+      expect(received).toEqual(true);
+    });
+
+    it('should return false if node contains specified nested child tags and recursive is not set', () => {
+      const received = nodeContainsChildTags(nodeWithNestedLabel, ['p', 'label']);
+      expect(received).toEqual(false);
+    });
+
+    it('should handle arrays somehow, in case there is an edge case where it is passed', () => {
+      const received = nodeContainsChildTags([nodeWithNestedLabel, node], ['p', 'label'], { recursive: true });
+      expect(received).toEqual(true);
+    });
+  });
+
+  describe('findNodesAndRemoveTheirParentNodes', () => {
+    const exampleQuestionObject = [
+      {
+        p: [{
+          '#text': 'abc',
+        }],
+      },
+      {
+        div:
+        [
+          {
+            label:
+            [{ '#text': 'def' }],
+          },
+          { '#text': ' ' },
+          {
+            em:
+            [{
+              '#text': 'ghi',
+            }],
+            ':@': { '@_class': 'olx_description' },
+          },
+          { em: [{ '#text': 'Just a generic em tag' }] },
+        ],
+      },
+    ];
+
+    const questionObjectWithoutDiv = [
+      {
+        p: [{
+          '#text': 'abc',
+        }],
+      },
+      {
+        label: [{ '#text': 'def' }],
+      },
+      { '#text': ' ' },
+      {
+        em:
+            [{
+              '#text': 'ghi',
+            }],
+        ':@': { '@_class': 'olx_description' },
+      },
+      { em: [{ '#text': 'Just a generic em tag' }] },
+    ];
+
+    it('should remove parent nodes of specified child tags', () => {
+      expect(findNodesAndRemoveTheirParentNodes({
+        arrayOfNodes: exampleQuestionObject,
+        nodesToFind: ['label'],
+        parentsToRemove: ['div'],
+      })).toEqual(questionObjectWithoutDiv);
+    });
+
+    it('should not remove anything unless specified in "parentsToRemove"', () => {
+      expect(findNodesAndRemoveTheirParentNodes({
+        arrayOfNodes: exampleQuestionObject,
+        nodesToFind: ['label'],
+        parentsToRemove: ['span'],
+      })).toEqual(exampleQuestionObject);
+    });
+  });
+
+  describe('tagName', () => {
+    it('should return the tag name of the node', () => {
+      expect(tagName({
+        p: [{
+          '#text': 'abc',
+        }],
+      })).toEqual('p');
+    });
+
+    it('should throw an error if the node is an array', () => {
+      expect(() => tagName([])).toThrow(TypeError);
+    });
+
+    it('should return undefined if the node is text-only', () => {
+      expect(tagName({ '#text': 'abc' })).toEqual(undefined);
+    });
+
+    it('should return undefined if the node is an empty object', () => {
+      expect(tagName({})).toEqual(undefined);
+    });
+
+    it('should return correct tagName if the node has text and class properties as well', () => {
+      expect(tagName({
+        ':@': { '@_class': 'olx_description' },
+        '#text': 'abc',
+        em:
+            [{
+              '#text': 'ghi',
+            }],
+      })).toEqual('em');
+    });
+  });
+});
diff --git a/src/editors/containers/ProblemEditor/index.test.tsx b/src/editors/containers/ProblemEditor/index.test.tsx
new file mode 100644
index 0000000000..ab3d37095a
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/index.test.tsx
@@ -0,0 +1,120 @@
+import 'CourseAuthoring/editors/setupEditorTest';
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+import { Spinner } from '@openedx/paragon';
+import { thunkActions, selectors } from '../../data/redux';
+import { RequestKeys } from '../../data/constants/requests';
+import { ProblemEditorInternal as ProblemEditor, mapStateToProps, mapDispatchToProps } from '.';
+
+jest.mock('./components/EditProblemView', () => 'EditProblemView');
+jest.mock('./components/SelectTypeModal', () => 'SelectTypeModal');
+
+jest.mock('react', () => {
+  const updateState = jest.fn();
+  return {
+    ...jest.requireActual('react'),
+    updateState,
+    useState: jest.fn(val => ([{ state: val }, jest.fn().mockName('setState')])),
+  };
+});
+
+jest.mock('../../data/redux', () => ({
+  thunkActions: {
+    problem: {
+      initializeProblemEditor: jest.fn().mockName('thunkActions.problem.initializeProblem'),
+    },
+  },
+  selectors: {
+    app: {
+      blockValue: jest.fn(state => ({ blockValue: state })),
+    },
+    problem: {
+      problemType: jest.fn(state => ({ problemType: state })),
+    },
+    requests: {
+      isFinished: jest.fn((state, params) => ({ isFinished: { state, params } })),
+      isFailed: jest.fn((state, params) => ({ isFailed: { state, params } })),
+    },
+  },
+}));
+
+describe('ProblemEditor', () => {
+  const props = {
+    onClose: jest.fn().mockName('props.onClose'),
+    // redux
+    problemType: null,
+    blockValue: { data: { data: 'eDiTablE Text' } },
+    blockFinished: false,
+    blockFailed: false,
+    initializeProblemEditor: jest.fn().mockName('args.intializeProblemEditor'),
+    advancedSettingsFinished: false,
+  };
+  describe('snapshots', () => {
+    test('renders as expected with default behavior', () => {
+      expect(shallow(<ProblemEditor {...props} />).snapshot).toMatchSnapshot();
+    });
+    test('block loaded, studio view and assets not yet loaded, Spinner appears', () => {
+      const wrapper = shallow(<ProblemEditor {...props} blockFinished />);
+      expect(wrapper.instance.findByType(Spinner)).toBeTruthy();
+    });
+    test('advanceSettings loaded, block and studio view not yet loaded, Spinner appears', () => {
+      const wrapper = shallow(<ProblemEditor {...props} advancedSettingsFinished />);
+      expect(wrapper.instance.findByType(Spinner)).toBeTruthy();
+    });
+    test('block failed, message appears', () => {
+      const wrapper = shallow(<ProblemEditor
+        {...props}
+        blockFinished
+        advancedSettingsFinished
+        blockFailed
+      />);
+      expect(wrapper.snapshot).toMatchSnapshot();
+    });
+    test('renders SelectTypeModal', () => {
+      const wrapper = shallow(<ProblemEditor
+        {...props}
+        blockFinished
+        advancedSettingsFinished
+      />);
+      expect(wrapper.instance.findByType('SelectTypeModal')).toHaveLength(1);
+    });
+    test('renders EditProblemView', () => {
+      const wrapper = shallow(<ProblemEditor
+        {...props}
+        problemType="multiplechoiceresponse"
+        blockFinished
+        advancedSettingsFinished
+      />);
+      expect(wrapper.instance.findByType('EditProblemView')).toHaveLength(1);
+    });
+  });
+
+  describe('mapStateToProps', () => {
+    const testState = { A: 'pple', B: 'anana', C: 'ucumber' } as any;
+    test('blockValue from app.blockValue', () => {
+      expect(
+        mapStateToProps(testState).blockValue,
+      ).toEqual(selectors.app.blockValue(testState));
+    });
+    test('problemType from problem.problemType', () => {
+      expect(
+        mapStateToProps(testState).problemType,
+      ).toEqual(selectors.problem.problemType(testState));
+    });
+    test('blockFinished from requests.isFinished', () => {
+      expect(
+        mapStateToProps(testState).blockFinished,
+      ).toEqual(selectors.requests.isFinished(testState, { requestKey: RequestKeys.fetchBlock }));
+    });
+    test('advancedSettingsFinished from requests.isFinished', () => {
+      expect(
+        mapStateToProps(testState).advancedSettingsFinished,
+      ).toEqual(selectors.requests.isFinished(testState, { requestKey: RequestKeys.fetchAdvancedSettings }));
+    });
+  });
+  describe('mapDispatchToProps', () => {
+    test('initializeProblemEditor from thunkActions.problem.initializeProblem', () => {
+      expect(mapDispatchToProps.initializeProblemEditor).toEqual(thunkActions.problem.initializeProblem);
+    });
+  });
+});
diff --git a/src/editors/containers/ProblemEditor/index.tsx b/src/editors/containers/ProblemEditor/index.tsx
new file mode 100644
index 0000000000..d8154c7e87
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/index.tsx
@@ -0,0 +1,80 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { Spinner } from '@openedx/paragon';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import SelectTypeModal from './components/SelectTypeModal';
+import EditProblemView from './components/EditProblemView';
+import { selectors, thunkActions } from '../../data/redux';
+import { RequestKeys } from '../../data/constants/requests';
+import messages from './messages';
+import { ProblemType } from '../../data/constants/problem';
+import type { EditorComponent } from '../../EditorComponent';
+
+export interface Props extends EditorComponent {
+  // redux
+  advancedSettingsFinished: boolean;
+  blockFinished: boolean;
+  blockFailed: boolean;
+  /** null if this is a new problem */
+  problemType: ProblemType | null;
+  initializeProblemEditor: (blockValue: any) => void;
+  blockValue: Record<string, any> | null;
+}
+
+const ProblemEditor: React.FC<Props> = ({
+  onClose,
+  returnFunction = null,
+  // Redux
+  problemType,
+  blockFinished,
+  blockFailed,
+  blockValue,
+  initializeProblemEditor,
+  advancedSettingsFinished,
+}) => {
+  React.useEffect(() => {
+    if (blockFinished && !blockFailed) {
+      initializeProblemEditor(blockValue);
+    }
+  }, [blockFinished, blockFailed]);
+
+  if (!blockFinished || !advancedSettingsFinished) {
+    return (
+      <div className="text-center p-6">
+        <Spinner
+          animation="border"
+          className="m-3"
+          screenreadertext="Loading Problem Editor"
+        />
+      </div>
+    );
+  }
+
+  if (blockFailed) {
+    return (
+      <div className="text-center p-6">
+        <FormattedMessage {...messages.blockFailed} />
+      </div>
+    );
+  }
+
+  if (problemType === null) {
+    return (<SelectTypeModal {...{ onClose }} />);
+  }
+  return (<EditProblemView {...{ onClose, returnFunction }} />);
+};
+
+export const mapStateToProps = (state) => ({
+  blockFinished: selectors.requests.isFinished(state, { requestKey: RequestKeys.fetchBlock }),
+  blockFailed: selectors.requests.isFailed(state, { requestKey: RequestKeys.fetchBlock }),
+  problemType: selectors.problem.problemType(state),
+  blockValue: selectors.app.blockValue(state),
+  advancedSettingsFinished: selectors.requests.isFinished(state, { requestKey: RequestKeys.fetchAdvancedSettings }),
+});
+
+export const mapDispatchToProps = {
+  initializeProblemEditor: thunkActions.problem.initializeProblem,
+};
+
+export const ProblemEditorInternal = ProblemEditor; // For testing only
+export default connect(mapStateToProps, mapDispatchToProps)(ProblemEditor);
diff --git a/src/editors/containers/ProblemEditor/messages.js b/src/editors/containers/ProblemEditor/messages.js
new file mode 100644
index 0000000000..d9fa05cb42
--- /dev/null
+++ b/src/editors/containers/ProblemEditor/messages.js
@@ -0,0 +1,12 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+
+  blockFailed: {
+    id: 'authoring.problemEditor.blockFailed',
+    defaultMessage: 'Problem failed to load',
+    description: 'Error message for problem block failing to load',
+  },
+});
+
+export default messages;
diff --git a/src/editors/containers/TextEditor/__snapshots__/index.test.jsx.snap b/src/editors/containers/TextEditor/__snapshots__/index.test.jsx.snap
new file mode 100644
index 0000000000..d6c6e81617
--- /dev/null
+++ b/src/editors/containers/TextEditor/__snapshots__/index.test.jsx.snap
@@ -0,0 +1,309 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TextEditor snapshots block failed to load, Toast is shown 1`] = `
+<EditorContainer
+  getContent={
+    {
+      "getContent": {
+        "editorRef": {
+          "current": {
+            "value": "something",
+          },
+        },
+        "showRawEditor": false,
+      },
+    }
+  }
+  isDirty={
+    {
+      "isDirty": {
+        "editorRef": {
+          "current": {
+            "value": "something",
+          },
+        },
+        "showRawEditor": false,
+      },
+    }
+  }
+  onClose={[MockFunction props.onClose]}
+  returnFunction={null}
+>
+  <div
+    className="editor-body h-75 overflow-auto"
+  >
+    <Toast
+      onClose={[MockFunction hooks.nullMethod]}
+      show={true}
+    >
+      Error: Could Not Load Text Content
+    </Toast>
+    <TinyMceWidget
+      disabled={false}
+      editorContentHtml="eDiTablE Text"
+      editorRef={
+        {
+          "current": {
+            "value": "something",
+          },
+        }
+      }
+      editorType="text"
+      enableImageUpload={true}
+      height="100%"
+      id={null}
+      images={{}}
+      initializeEditor={[MockFunction args.intializeEditor]}
+      isLibrary={null}
+      learningContextId="course+org+run"
+      lmsEndpointUrl=""
+      minHeight={500}
+      onChange={[Function]}
+      setEditorRef={[MockFunction hooks.prepareEditorRef.setEditorRef]}
+      studioEndpointUrl=""
+    />
+  </div>
+</EditorContainer>
+`;
+
+exports[`TextEditor snapshots loaded, raw editor 1`] = `
+<EditorContainer
+  getContent={
+    {
+      "getContent": {
+        "editorRef": {
+          "current": {
+            "value": "something",
+          },
+        },
+        "showRawEditor": true,
+      },
+    }
+  }
+  isDirty={
+    {
+      "isDirty": {
+        "editorRef": {
+          "current": {
+            "value": "something",
+          },
+        },
+        "showRawEditor": true,
+      },
+    }
+  }
+  onClose={[MockFunction props.onClose]}
+  returnFunction={null}
+>
+  <div
+    className="editor-body h-75 overflow-auto"
+  >
+    <Toast
+      onClose={[MockFunction hooks.nullMethod]}
+      show={false}
+    >
+      Error: Could Not Load Text Content
+    </Toast>
+    <RawEditor
+      content={
+        {
+          "data": {
+            "data": "eDiTablE Text",
+          },
+        }
+      }
+      editorRef={
+        {
+          "current": {
+            "value": "something",
+          },
+        }
+      }
+      lang="html"
+    />
+  </div>
+</EditorContainer>
+`;
+
+exports[`TextEditor snapshots not yet loaded, Spinner appears 1`] = `
+<EditorContainer
+  getContent={
+    {
+      "getContent": {
+        "editorRef": {
+          "current": {
+            "value": "something",
+          },
+        },
+        "showRawEditor": false,
+      },
+    }
+  }
+  isDirty={
+    {
+      "isDirty": {
+        "editorRef": {
+          "current": {
+            "value": "something",
+          },
+        },
+        "showRawEditor": false,
+      },
+    }
+  }
+  onClose={[MockFunction props.onClose]}
+  returnFunction={null}
+>
+  <div
+    className="editor-body h-75 overflow-auto"
+  >
+    <Toast
+      onClose={[MockFunction hooks.nullMethod]}
+      show={false}
+    >
+      Error: Could Not Load Text Content
+    </Toast>
+    <div
+      className="text-center p-6"
+    >
+      <Spinner
+        animation="border"
+        className="m-3"
+        screenreadertext="loading"
+      />
+    </div>
+  </div>
+</EditorContainer>
+`;
+
+exports[`TextEditor snapshots renders as expected with default behavior 1`] = `
+<EditorContainer
+  getContent={
+    {
+      "getContent": {
+        "editorRef": {
+          "current": {
+            "value": "something",
+          },
+        },
+        "showRawEditor": false,
+      },
+    }
+  }
+  isDirty={
+    {
+      "isDirty": {
+        "editorRef": {
+          "current": {
+            "value": "something",
+          },
+        },
+        "showRawEditor": false,
+      },
+    }
+  }
+  onClose={[MockFunction props.onClose]}
+  returnFunction={null}
+>
+  <div
+    className="editor-body h-75 overflow-auto"
+  >
+    <Toast
+      onClose={[MockFunction hooks.nullMethod]}
+      show={false}
+    >
+      Error: Could Not Load Text Content
+    </Toast>
+    <TinyMceWidget
+      disabled={false}
+      editorContentHtml="eDiTablE Text"
+      editorRef={
+        {
+          "current": {
+            "value": "something",
+          },
+        }
+      }
+      editorType="text"
+      enableImageUpload={true}
+      height="100%"
+      id={null}
+      images={{}}
+      initializeEditor={[MockFunction args.intializeEditor]}
+      isLibrary={null}
+      learningContextId="course+org+run"
+      lmsEndpointUrl=""
+      minHeight={500}
+      onChange={[Function]}
+      setEditorRef={[MockFunction hooks.prepareEditorRef.setEditorRef]}
+      studioEndpointUrl=""
+    />
+  </div>
+</EditorContainer>
+`;
+
+exports[`TextEditor snapshots renders static images with relative paths 1`] = `
+<EditorContainer
+  getContent={
+    {
+      "getContent": {
+        "editorRef": {
+          "current": {
+            "value": "something",
+          },
+        },
+        "showRawEditor": false,
+      },
+    }
+  }
+  isDirty={
+    {
+      "isDirty": {
+        "editorRef": {
+          "current": {
+            "value": "something",
+          },
+        },
+        "showRawEditor": false,
+      },
+    }
+  }
+  onClose={[MockFunction props.onClose]}
+  returnFunction={null}
+>
+  <div
+    className="editor-body h-75 overflow-auto"
+  >
+    <Toast
+      onClose={[MockFunction hooks.nullMethod]}
+      show={false}
+    >
+      Error: Could Not Load Text Content
+    </Toast>
+    <TinyMceWidget
+      disabled={false}
+      editorContentHtml="eDiTablE Text with <img src="/asset+org+run+type@asset+block@img.jpg" />"
+      editorRef={
+        {
+          "current": {
+            "value": "something",
+          },
+        }
+      }
+      editorType="text"
+      enableImageUpload={true}
+      height="100%"
+      id={null}
+      images={{}}
+      initializeEditor={[MockFunction args.intializeEditor]}
+      isLibrary={null}
+      learningContextId="course+org+run"
+      lmsEndpointUrl=""
+      minHeight={500}
+      onChange={[Function]}
+      setEditorRef={[MockFunction hooks.prepareEditorRef.setEditorRef]}
+      studioEndpointUrl=""
+    />
+  </div>
+</EditorContainer>
+`;
diff --git a/src/editors/containers/TextEditor/hooks.js b/src/editors/containers/TextEditor/hooks.js
new file mode 100644
index 0000000000..6271776f0d
--- /dev/null
+++ b/src/editors/containers/TextEditor/hooks.js
@@ -0,0 +1,22 @@
+import * as appHooks from '../../hooks';
+import { setAssetToStaticUrl } from '../../sharedComponents/TinyMceWidget/hooks';
+
+export const { nullMethod, navigateCallback, navigateTo } = appHooks;
+
+export const getContent = ({ editorRef, showRawEditor }) => () => {
+  const content = (showRawEditor && editorRef && editorRef.current
+    ? editorRef.current.state.doc.toString()
+    : editorRef.current?.getContent());
+  return setAssetToStaticUrl({ editorValue: content });
+};
+
+export const isDirty = ({ editorRef, showRawEditor }) => () => {
+  /* istanbul ignore next */
+  if (!editorRef?.current) {
+    return false;
+  }
+  const dirty = (showRawEditor && editorRef && editorRef.current
+    ? editorRef.current.observer?.lastChange !== 0
+    : !editorRef.current.isNotDirty);
+  return dirty;
+};
diff --git a/src/editors/containers/TextEditor/hooks.test.jsx b/src/editors/containers/TextEditor/hooks.test.jsx
new file mode 100644
index 0000000000..c12b2e2712
--- /dev/null
+++ b/src/editors/containers/TextEditor/hooks.test.jsx
@@ -0,0 +1,86 @@
+import { keyStore } from '../../utils';
+import * as appHooks from '../../hooks';
+// This 'module' self-import hack enables mocking during tests.
+// See src/editors/decisions/0005-internal-editor-testability-decisions.md. The whole approach to how hooks are tested
+// should be re-thought and cleaned up to avoid this pattern.
+// eslint-disable-next-line import/no-self-import
+import * as module from './hooks';
+import * as tinyMceHooks from '../../sharedComponents/TinyMceWidget/hooks';
+
+const tinyMceHookKeys = keyStore(tinyMceHooks);
+
+describe('TextEditor hooks', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('appHooks', () => {
+    it('forwards navigateCallback from appHooks', () => {
+      expect(module.navigateCallback).toEqual(appHooks.navigateCallback);
+    });
+    it('forwards navigateTo from appHooks', () => {
+      expect(module.navigateTo).toEqual(appHooks.navigateTo);
+    });
+    it('forwards nullMethod from appHooks', () => {
+      expect(module.nullMethod).toEqual(appHooks.nullMethod);
+    });
+  });
+
+  describe('non-state hooks', () => {
+    describe('getContent', () => {
+      const visualContent = 'sOmEViSualContent';
+      const rawContent = 'soMeRawContent';
+      const editorRef = {
+        current: {
+          getContent: () => visualContent,
+          state: {
+            doc: rawContent,
+          },
+        },
+      };
+      const spies = {};
+      spies.visualHtml = jest.spyOn(
+        tinyMceHooks,
+        tinyMceHookKeys.setAssetToStaticUrl,
+      ).mockReturnValueOnce(visualContent);
+      spies.rawHtml = jest.spyOn(
+        tinyMceHooks,
+        tinyMceHookKeys.setAssetToStaticUrl,
+      ).mockReturnValueOnce(rawContent);
+      test('returns correct content based on showRawEditor equals false', () => {
+        const getContent = module.getContent({ editorRef, showRawEditor: false })();
+        expect(spies.visualHtml.mock.calls.length).toEqual(1);
+        expect(spies.visualHtml).toHaveBeenCalledWith({ editorValue: visualContent });
+        expect(getContent).toEqual(visualContent);
+      });
+      test('returns correct content based on showRawEditor equals true', () => {
+        jest.clearAllMocks();
+        const getContent = module.getContent({ editorRef, showRawEditor: true })();
+        expect(spies.rawHtml.mock.calls.length).toEqual(1);
+        expect(spies.rawHtml).toHaveBeenCalledWith({ editorValue: rawContent });
+        expect(getContent).toEqual(rawContent);
+      });
+    });
+
+    describe('isDirty', () => {
+      test('checks isNotDirty flag when showRawEditor is false', () => {
+        const editorRef = {
+          current: {
+            isNotDirty: false,
+          },
+        };
+        const isDirty = module.isDirty({ editorRef, showRawEditor: false })();
+        expect(isDirty).toEqual(true);
+      });
+      test('checks observer.lastChange flag when showRawEditor is true', () => {
+        const editorRef = {
+          current: {
+            observer: { lastChange: 123 },
+          },
+        };
+        const isDirty = module.isDirty({ editorRef, showRawEditor: true })();
+        expect(isDirty).toEqual(true);
+      });
+    });
+  });
+});
diff --git a/src/editors/containers/TextEditor/index.jsx b/src/editors/containers/TextEditor/index.jsx
new file mode 100644
index 0000000000..0546e65b04
--- /dev/null
+++ b/src/editors/containers/TextEditor/index.jsx
@@ -0,0 +1,146 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+
+import {
+  Spinner,
+  Toast,
+} from '@openedx/paragon';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+
+import { getConfig } from '@edx/frontend-platform';
+import { actions, selectors } from '../../data/redux';
+import { RequestKeys } from '../../data/constants/requests';
+
+import EditorContainer from '../EditorContainer';
+import RawEditor from '../../sharedComponents/RawEditor';
+import * as hooks from './hooks';
+import messages from './messages';
+import TinyMceWidget from '../../sharedComponents/TinyMceWidget';
+import { prepareEditorRef, replaceStaticWithAsset } from '../../sharedComponents/TinyMceWidget/hooks';
+
+const TextEditor = ({
+  onClose,
+  returnFunction,
+  // redux
+  showRawEditor,
+  blockValue,
+  blockId,
+  blockFailed,
+  initializeEditor,
+  blockFinished,
+  learningContextId,
+  images,
+  isLibrary,
+  // inject
+  intl,
+}) => {
+  const { editorRef, refReady, setEditorRef } = prepareEditorRef();
+  const initialContent = blockValue ? blockValue.data.data : '';
+  const newContent = replaceStaticWithAsset({
+    initialContent,
+    learningContextId,
+  });
+  const editorContent = newContent || initialContent;
+  let staticRootUrl;
+  if (isLibrary) {
+    staticRootUrl = `${getConfig().STUDIO_BASE_URL }/library_assets/blocks/${ blockId }/`;
+  }
+
+  if (!refReady) { return null; }
+
+  const selectEditor = () => {
+    if (showRawEditor) {
+      return (
+        <RawEditor
+          editorRef={editorRef}
+          content={blockValue}
+        />
+      );
+    }
+    return (
+      <TinyMceWidget
+        editorType="text"
+        editorRef={editorRef}
+        editorContentHtml={editorContent}
+        setEditorRef={setEditorRef}
+        minHeight={500}
+        height="100%"
+        initializeEditor={initializeEditor}
+        {...{
+          images,
+          isLibrary,
+          learningContextId,
+          staticRootUrl,
+        }}
+      />
+    );
+  };
+
+  return (
+    <EditorContainer
+      getContent={hooks.getContent({ editorRef, showRawEditor })}
+      isDirty={hooks.isDirty({ editorRef, showRawEditor })}
+      onClose={onClose}
+      returnFunction={returnFunction}
+    >
+      <div className="editor-body h-75 overflow-auto">
+        <Toast show={blockFailed} onClose={hooks.nullMethod}>
+          { intl.formatMessage(messages.couldNotLoadTextContext) }
+        </Toast>
+
+        {(!blockFinished)
+          ? (
+            <div className="text-center p-6">
+              <Spinner
+                animation="border"
+                className="m-3"
+                screenreadertext={intl.formatMessage(messages.spinnerScreenReaderText)}
+              />
+            </div>
+          ) : (selectEditor())}
+      </div>
+    </EditorContainer>
+  );
+};
+TextEditor.defaultProps = {
+  blockValue: null,
+  blockFinished: null,
+  returnFunction: null,
+};
+TextEditor.propTypes = {
+  onClose: PropTypes.func.isRequired,
+  returnFunction: PropTypes.func,
+  // redux
+  blockValue: PropTypes.shape({
+    data: PropTypes.shape({ data: PropTypes.string }),
+  }),
+  blockId: PropTypes.string,
+  blockFailed: PropTypes.bool.isRequired,
+  initializeEditor: PropTypes.func.isRequired,
+  showRawEditor: PropTypes.bool.isRequired,
+  blockFinished: PropTypes.bool,
+  learningContextId: PropTypes.string, // This should be required but is NULL when the store is in initial state :/
+  images: PropTypes.shape({}).isRequired,
+  isLibrary: PropTypes.bool.isRequired,
+  // inject
+  intl: intlShape.isRequired,
+};
+
+export const mapStateToProps = (state) => ({
+  blockValue: selectors.app.blockValue(state),
+  blockFailed: selectors.requests.isFailed(state, { requestKey: RequestKeys.fetchBlock }),
+  blockId: selectors.app.blockId(state),
+  showRawEditor: selectors.app.showRawEditor(state),
+  blockFinished: selectors.requests.isFinished(state, { requestKey: RequestKeys.fetchBlock }),
+  learningContextId: selectors.app.learningContextId(state),
+  images: selectors.app.images(state),
+  isLibrary: selectors.app.isLibrary(state),
+});
+
+export const mapDispatchToProps = {
+  initializeEditor: actions.app.initializeEditor,
+};
+
+export const TextEditorInternal = TextEditor; // For testing only
+export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(TextEditor));
diff --git a/src/editors/containers/TextEditor/index.test.jsx b/src/editors/containers/TextEditor/index.test.jsx
new file mode 100644
index 0000000000..ea3bffc945
--- /dev/null
+++ b/src/editors/containers/TextEditor/index.test.jsx
@@ -0,0 +1,148 @@
+import 'CourseAuthoring/editors/setupEditorTest';
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+
+import { formatMessage } from '../../testUtils';
+import { actions, selectors } from '../../data/redux';
+import { RequestKeys } from '../../data/constants/requests';
+import { TextEditorInternal as TextEditor, mapStateToProps, mapDispatchToProps } from '.';
+
+// Per https://github.com/tinymce/tinymce-react/issues/91 React unit testing in JSDOM is not supported by tinymce.
+// Consequently, mock the Editor out.
+jest.mock('@tinymce/tinymce-react', () => {
+  const originalModule = jest.requireActual('@tinymce/tinymce-react');
+  return {
+    __esModule: true,
+    ...originalModule,
+    Editor: () => 'TiNYmCE EDitOR',
+  };
+});
+
+jest.mock('../EditorContainer', () => 'EditorContainer');
+
+jest.mock('./hooks', () => ({
+  getContent: jest.fn(args => ({ getContent: args })),
+  isDirty: jest.fn(args => ({ isDirty: args })),
+  nullMethod: jest.fn().mockName('hooks.nullMethod'),
+}));
+
+jest.mock('../../sharedComponents/TinyMceWidget/hooks', () => ({
+  ...jest.requireActual('../../sharedComponents/TinyMceWidget/hooks'),
+  prepareEditorRef: jest.fn(() => ({
+    editorRef: { current: { value: 'something' } },
+    refReady: true,
+    setEditorRef: jest.fn().mockName('hooks.prepareEditorRef.setEditorRef'),
+  })),
+}));
+
+jest.mock('react', () => {
+  const updateState = jest.fn();
+  return {
+    ...jest.requireActual('react'),
+    updateState,
+    useState: jest.fn(val => ([{ state: val }, jest.fn().mockName('setState')])),
+  };
+});
+
+jest.mock('../../data/redux', () => ({
+  __esModule: true,
+  default: jest.fn(),
+  actions: {
+    app: {
+      initializeEditor: jest.fn().mockName('actions.app.initializeEditor'),
+    },
+  },
+  selectors: {
+    app: {
+      blockValue: jest.fn(state => ({ blockValue: state })),
+      lmsEndpointUrl: jest.fn(state => ({ lmsEndpointUrl: state })),
+      studioEndpointUrl: jest.fn(state => ({ studioEndpointUrl: state })),
+      showRawEditor: jest.fn(state => ({ showRawEditor: state })),
+      images: jest.fn(state => ({ images: state })),
+      isLibrary: jest.fn(state => ({ isLibrary: state })),
+      blockId: jest.fn(state => ({ blockId: state })),
+      learningContextId: jest.fn(state => ({ learningContextId: state })),
+    },
+    requests: {
+      isFailed: jest.fn((state, params) => ({ isFailed: { state, params } })),
+      isFinished: jest.fn((state, params) => ({ isFailed: { state, params } })),
+    },
+  },
+  thunkActions: {
+    video: {
+      importTranscript: jest.fn(),
+    },
+  },
+}));
+
+describe('TextEditor', () => {
+  const props = {
+    onClose: jest.fn().mockName('props.onClose'),
+    // redux
+    blockValue: { data: { data: 'eDiTablE Text' } },
+    blockFailed: false,
+    initializeEditor: jest.fn().mockName('args.intializeEditor'),
+    showRawEditor: false,
+    blockFinished: true,
+    learningContextId: 'course+org+run',
+    images: {},
+    // inject
+    intl: { formatMessage },
+  };
+  describe('snapshots', () => {
+    test('renders as expected with default behavior', () => {
+      expect(shallow(<TextEditor {...props} />).snapshot).toMatchSnapshot();
+    });
+    test('renders static images with relative paths', () => {
+      const updatedProps = {
+        ...props,
+        blockValue: { data: { data: 'eDiTablE Text with <img src="/static/img.jpg" />' } },
+      };
+      expect(shallow(<TextEditor {...updatedProps} />).snapshot).toMatchSnapshot();
+    });
+    test('not yet loaded, Spinner appears', () => {
+      expect(shallow(<TextEditor {...props} blockFinished={false} />).snapshot).toMatchSnapshot();
+    });
+    test('loaded, raw editor', () => {
+      expect(shallow(<TextEditor {...props} showRawEditor />).snapshot).toMatchSnapshot();
+    });
+    test('block failed to load, Toast is shown', () => {
+      expect(shallow(<TextEditor {...props} blockFailed />).snapshot).toMatchSnapshot();
+    });
+  });
+
+  describe('mapStateToProps', () => {
+    const testState = { A: 'pple', B: 'anana', C: 'ucumber' };
+    test('blockValue from app.blockValue', () => {
+      expect(
+        mapStateToProps(testState).blockValue,
+      ).toEqual(selectors.app.blockValue(testState));
+    });
+    test('blockFailed from requests.isFailed', () => {
+      expect(
+        mapStateToProps(testState).blockFailed,
+      ).toEqual(selectors.requests.isFailed(testState, { requestKey: RequestKeys.fetchBlock }));
+    });
+    test('blockFinished from requests.isFinished', () => {
+      expect(
+        mapStateToProps(testState).blockFinished,
+      ).toEqual(selectors.requests.isFinished(testState, { requestKey: RequestKeys.fetchBlock }));
+    });
+    test('learningContextId from app.learningContextId', () => {
+      expect(
+        mapStateToProps(testState).learningContextId,
+      ).toEqual(selectors.app.learningContextId(testState));
+    });
+    test('images from app.images', () => {
+      expect(
+        mapStateToProps(testState).images,
+      ).toEqual(selectors.app.images(testState));
+    });
+  });
+
+  describe('mapDispatchToProps', () => {
+    test('initializeEditor from actions.app.initializeEditor', () => {
+      expect(mapDispatchToProps.initializeEditor).toEqual(actions.app.initializeEditor);
+    });
+  });
+});
diff --git a/src/editors/containers/TextEditor/messages.js b/src/editors/containers/TextEditor/messages.js
new file mode 100644
index 0000000000..e6f870a4b6
--- /dev/null
+++ b/src/editors/containers/TextEditor/messages.js
@@ -0,0 +1,17 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+
+  couldNotLoadTextContext: {
+    id: 'authoring.texteditor.load.error',
+    defaultMessage: 'Error: Could Not Load Text Content',
+    description: 'Error Message Dispayed When HTML content fails to Load',
+  },
+  spinnerScreenReaderText: {
+    id: 'authoring.texteditor.spinnerScreenReaderText',
+    defaultMessage: 'loading',
+    description: 'Loading message for spinner screenreader text.',
+  },
+});
+
+export default messages;
diff --git a/src/editors/containers/VideoEditor/__snapshots__/index.test.tsx.snap b/src/editors/containers/VideoEditor/__snapshots__/index.test.tsx.snap
new file mode 100644
index 0000000000..4f5e00fd45
--- /dev/null
+++ b/src/editors/containers/VideoEditor/__snapshots__/index.test.tsx.snap
@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`VideoEditor snapshots renders as expected with default behavior 1`] = `
+<ErrorContext.Provider
+  value="hooks.errorsHook.error"
+>
+  <EditorContainer
+    isDirty={[Function]}
+    onClose={[MockFunction props.onClose]}
+    validateEntry={[MockFunction validateEntry]}
+  >
+    <div
+      className="video-editor"
+    >
+      <VideoEditorModal
+        isLibrary={
+          {
+            "useSelector": [MockFunction],
+          }
+        }
+      />
+    </div>
+  </EditorContainer>
+</ErrorContext.Provider>
+`;
diff --git a/src/editors/containers/VideoEditor/components/SelectVideoModal.jsx b/src/editors/containers/VideoEditor/components/SelectVideoModal.jsx
new file mode 100644
index 0000000000..07167d65ca
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/SelectVideoModal.jsx
@@ -0,0 +1,70 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+
+import { Button } from '@openedx/paragon';
+
+import { thunkActions } from '../../../data/redux';
+import BaseModal from '../../../sharedComponents/BaseModal';
+// This 'module' self-import hack enables mocking during tests.
+// See src/editors/decisions/0005-internal-editor-testability-decisions.md. The whole approach to how hooks are tested
+// should be re-thought and cleaned up to avoid this pattern.
+// eslint-disable-next-line import/no-self-import
+import * as module from './SelectVideoModal';
+
+export const hooks = {
+  videoList: ({ fetchVideos }) => {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [videos, setVideos] = React.useState(null);
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    React.useEffect(() => {
+      fetchVideos({ onSuccess: setVideos });
+    }, []);
+    return videos;
+  },
+  onSelectClick: ({ setSelection, videos }) => () => setSelection(videos[0]),
+};
+
+export const SelectVideoModal = ({
+  fetchVideos,
+  isOpen,
+  close,
+  setSelection,
+}) => {
+  const videos = module.hooks.videoList({ fetchVideos });
+  const onSelectClick = module.hooks.onSelectClick({
+    setSelection,
+    videos,
+  });
+
+  return (
+    <BaseModal
+      isOpen={isOpen}
+      close={close}
+      title="Add a video"
+      confirmAction={<Button variant="primary" onClick={onSelectClick}>Next</Button>}
+    >
+      {/* Content selection */}
+      {videos && (videos.map(
+        img => (
+          <div key={img.externalUrl} />
+        ),
+      ))}
+    </BaseModal>
+  );
+};
+
+SelectVideoModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  close: PropTypes.func.isRequired,
+  setSelection: PropTypes.func.isRequired,
+  // redux
+  fetchVideos: PropTypes.func.isRequired,
+};
+
+export const mapStateToProps = () => ({});
+export const mapDispatchToProps = {
+  fetchVideos: thunkActions.app.fetchVideos,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(SelectVideoModal);
diff --git a/src/editors/containers/VideoEditor/components/VideoEditorModal.tsx b/src/editors/containers/VideoEditor/components/VideoEditorModal.tsx
new file mode 100644
index 0000000000..14801f56ec
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoEditorModal.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import * as appHooks from '../../../hooks';
+import { thunkActions, selectors } from '../../../data/redux';
+import VideoSettingsModal from './VideoSettingsModal';
+
+interface Props {
+  isLibrary: boolean;
+}
+
+export const {
+  navigateTo,
+} = appHooks;
+
+export const hooks = {
+  initialize: (dispatch, selectedVideoId, selectedVideoUrl) => {
+    dispatch(thunkActions.video.loadVideoData(selectedVideoId, selectedVideoUrl));
+  },
+  useReturnToGallery: () => {
+    const learningContextId = useSelector(selectors.app.learningContextId);
+    const blockId = useSelector(selectors.app.blockId);
+    return () => (navigateTo(`/course/${learningContextId}/editor/course-videos/${blockId}`));
+  },
+};
+
+const VideoEditorModal: React.FC<Props> = ({
+  isLibrary,
+}) => {
+  const dispatch = useDispatch();
+  const searchParams = new URLSearchParams(document.location.search);
+  const selectedVideoId = searchParams.get('selectedVideoId');
+  const selectedVideoUrl = searchParams.get('selectedVideoUrl');
+  const onReturn = hooks.useReturnToGallery();
+  hooks.initialize(dispatch, selectedVideoId, selectedVideoUrl);
+  return (
+    <VideoSettingsModal {...{
+      onReturn,
+      isLibrary,
+    }}
+    />
+  );
+  // TODO: add logic to show SelectVideoModal if no selection
+};
+
+export default VideoEditorModal;
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/ErrorSummary.test.tsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/ErrorSummary.test.tsx
new file mode 100644
index 0000000000..28fd0cd5ef
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/ErrorSummary.test.tsx
@@ -0,0 +1,48 @@
+import 'CourseAuthoring/editors/setupEditorTest';
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+
+import * as mod from './ErrorSummary';
+
+const { ErrorSummary } = mod;
+
+describe('ErrorSummary', () => {
+  const errors = {
+    widgetWithError: [{ err1: 'mSg', err2: 'msG2' }, jest.fn()],
+    widgetWithNoError: [{}, jest.fn()],
+  };
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+  describe('render', () => {
+    beforeEach(() => {
+      jest.spyOn(React, 'useContext').mockReturnValueOnce({});
+    });
+    test('snapshots: renders as expected when there are no errors', () => {
+      jest.spyOn(mod, 'showAlert').mockReturnValue(false);
+      expect(shallow(<ErrorSummary />).snapshot).toMatchSnapshot();
+    });
+    test('snapshots: renders as expected when there are errors', () => {
+      jest.spyOn(mod, 'showAlert').mockReturnValue(true);
+      expect(shallow(<ErrorSummary />).snapshot).toMatchSnapshot();
+    });
+  });
+  describe('hasNoError', () => {
+    it('returns true', () => {
+      expect(mod.hasNoError(errors.widgetWithError)).toEqual(false);
+    });
+    it('returns false', () => {
+      expect(mod.hasNoError(errors.widgetWithNoError)).toEqual(true);
+    });
+  });
+  describe('showAlert', () => {
+    it('returns true', () => {
+      jest.spyOn(mod, 'hasNoError').mockReturnValue(false);
+      expect(mod.showAlert(errors)).toEqual(true);
+    });
+    it('returns false', () => {
+      jest.spyOn(mod, 'hasNoError').mockReturnValue(true);
+      expect(mod.showAlert(errors)).toEqual(false);
+    });
+  });
+});
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/ErrorSummary.tsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/ErrorSummary.tsx
new file mode 100644
index 0000000000..6a29d5e7c6
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/ErrorSummary.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+
+import { Alert } from '@openedx/paragon';
+import { InfoOutline } from '@openedx/paragon/icons';
+
+import messages from './components/messages';
+import { ErrorContext } from '../../hooks';
+
+export const hasNoError = (error) => Object.keys(error[0]).length === 0;
+
+export const showAlert = (errors) => !Object.values(errors).every(hasNoError);
+
+export const ErrorSummary = () => {
+  const errors = React.useContext(ErrorContext);
+  return (
+    <Alert
+      icon={InfoOutline}
+      show={showAlert(errors)}
+      variant="danger"
+    >
+      <Alert.Heading>
+        <FormattedMessage {...messages.validateErrorTitle} />
+      </Alert.Heading>
+      <p>
+        <FormattedMessage {...messages.validateErrorBody} />
+      </p>
+    </Alert>
+  );
+};
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/__snapshots__/ErrorSummary.test.tsx.snap b/src/editors/containers/VideoEditor/components/VideoSettingsModal/__snapshots__/ErrorSummary.test.tsx.snap
new file mode 100644
index 0000000000..88baf91bd1
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/__snapshots__/ErrorSummary.test.tsx.snap
@@ -0,0 +1,45 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ErrorSummary render snapshots: renders as expected when there are errors 1`] = `
+<Alert
+  show={true}
+  variant="danger"
+>
+  <Alert.Heading>
+    <FormattedMessage
+      defaultMessage="We couldn't add your video."
+      description="Title of validation error."
+      id="authoring.videoeditor.validate.error.title"
+    />
+  </Alert.Heading>
+  <p>
+    <FormattedMessage
+      defaultMessage="Please check your entries and try again."
+      description="Body of validation error."
+      id="authoring.videoeditor.validate.error.body"
+    />
+  </p>
+</Alert>
+`;
+
+exports[`ErrorSummary render snapshots: renders as expected when there are no errors 1`] = `
+<Alert
+  show={false}
+  variant="danger"
+>
+  <Alert.Heading>
+    <FormattedMessage
+      defaultMessage="We couldn't add your video."
+      description="Title of validation error."
+      id="authoring.videoeditor.validate.error.title"
+    />
+  </Alert.Heading>
+  <p>
+    <FormattedMessage
+      defaultMessage="Please check your entries and try again."
+      description="Body of validation error."
+      id="authoring.videoeditor.validate.error.body"
+    />
+  </p>
+</Alert>
+`;
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/CollapsibleFormWidget.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/CollapsibleFormWidget.jsx
new file mode 100644
index 0000000000..9545195421
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/CollapsibleFormWidget.jsx
@@ -0,0 +1,74 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { Collapsible, Icon, IconButton } from '@openedx/paragon';
+import { ExpandLess, ExpandMore, InfoOutline } from '@openedx/paragon/icons';
+
+import messages from './messages';
+
+/**
+ * Simple Wrapper for a Form Widget component in the Video Settings modal
+ * Takes a title element and children, and produces a collapsible widget container
+ * <CollapsibleFormWidget title={<h1>My Title</h1>}>
+ *   <div>My Widget</div>
+ * </CollapsibleFormWidget>
+ */
+const CollapsibleFormWidget = ({
+  children,
+  isError,
+  subtitle,
+  title,
+  fontSize,
+  // injected
+  intl,
+}) => (
+  <Collapsible.Advanced
+    className="collapsible-card rounded mx-4 my-3 px-4 text-primary-500"
+    defaultOpen
+    open={isError || undefined}
+  >
+    <Collapsible.Trigger
+      className="collapsible-trigger d-flex border-0 align-items-center pt-4 p-0"
+      style={{ justifyContent: 'unset' }}
+    >
+      <Collapsible.Visible whenClosed className="p-0 pb-3">
+        <div className="d-flex flex-column flex-grow-1">
+          <div className="d-flex flex-grow-1 w-75 x-small">{title}</div>
+          {subtitle ? <div className={`${fontSize} mb-4 mt-3`}>{subtitle}</div> : <div className="mb-4" />}
+        </div>
+        <div className="d-flex flex-row align-self-start">
+          {isError && <Icon className="alert-icon" src={InfoOutline} />}
+          <IconButton alt={intl.formatMessage(messages.expandAltText)} src={ExpandMore} iconAs={Icon} variant="dark" />
+        </div>
+      </Collapsible.Visible>
+      <Collapsible.Visible whenOpen>
+        <div className="d-flex flex-grow-1 w-75 x-small">{title}</div>
+        <div className="align-self-start">
+          <IconButton alt={intl.formatMessage(messages.collapseAltText)} src={ExpandLess} iconAs={Icon} variant="dark" />
+        </div>
+      </Collapsible.Visible>
+    </Collapsible.Trigger>
+    <Collapsible.Body className={`collapsible-body rounded px-0 ${fontSize} pb-4`}>
+      {children}
+    </Collapsible.Body>
+  </Collapsible.Advanced>
+);
+
+CollapsibleFormWidget.defaultProps = {
+  subtitle: null,
+  fontSize: '',
+};
+
+CollapsibleFormWidget.propTypes = {
+  children: PropTypes.node.isRequired,
+  isError: PropTypes.bool.isRequired,
+  subtitle: PropTypes.node,
+  title: PropTypes.node.isRequired,
+  fontSize: PropTypes.string,
+  // injected
+  intl: intlShape.isRequired,
+};
+
+export const CollapsibleFormWidgetInternal = CollapsibleFormWidget; // For testing only
+export default injectIntl(CollapsibleFormWidget);
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/CollapsibleFormWidget.test.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/CollapsibleFormWidget.test.jsx
new file mode 100644
index 0000000000..6cbd4d5b41
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/CollapsibleFormWidget.test.jsx
@@ -0,0 +1,29 @@
+import 'CourseAuthoring/editors/setupEditorTest';
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+
+import { formatMessage } from '../../../../../testUtils';
+import { CollapsibleFormWidgetInternal as CollapsibleFormWidget } from './CollapsibleFormWidget';
+
+describe('CollapsibleFormWidget', () => {
+  const props = {
+    isError: false,
+    subtitle: 'SuBTItle',
+    title: 'tiTLE',
+    // inject
+    intl: { formatMessage },
+  };
+  describe('render', () => {
+    const testContent = (<p>Some test string</p>);
+    test('snapshots: renders as expected with default props', () => {
+      expect(
+        shallow(<CollapsibleFormWidget {...props}>{testContent}</CollapsibleFormWidget>).snapshot,
+      ).toMatchSnapshot();
+    });
+    test('snapshots: renders with open={true} when there is error', () => {
+      expect(
+        shallow(<CollapsibleFormWidget {...props} isError>{testContent}</CollapsibleFormWidget>).snapshot,
+      ).toMatchSnapshot();
+    });
+  });
+});
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/DurationWidget/__snapshots__/index.test.jsx.snap b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/DurationWidget/__snapshots__/index.test.jsx.snap
new file mode 100644
index 0000000000..1455c89bdc
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/DurationWidget/__snapshots__/index.test.jsx.snap
@@ -0,0 +1,64 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DurationWidget render snapshots: renders as expected with default props 1`] = `
+<injectIntl(ShimmedIntlComponent)
+  fontSize="x-small"
+  subtitle="Custom: 00:00:00"
+  title="Duration"
+>
+  <FormattedMessage
+    defaultMessage="Set a specific section of the video to play."
+    description="Description of Duration widget"
+    id="authoring.videoeditor.duration.description"
+  />
+  <Form.Row
+    className="mt-4.5"
+  >
+    <Form.Group
+      as="Col"
+    >
+      <Form.Control
+        floatingLabel="Start time"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onKeyDown={[Function]}
+        value="00:00:00"
+      />
+      <Form.Control.Feedback>
+        <FormattedMessage
+          defaultMessage="Enter time as HH:MM:SS"
+          description="Hint text for start and stop time input fields"
+          id="authoring.videoeditor.duration.hint"
+        />
+      </Form.Control.Feedback>
+    </Form.Group>
+    <Form.Group
+      as="Col"
+    >
+      <Form.Control
+        floatingLabel="Stop time"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onKeyDown={[Function]}
+        value="00:00:00"
+      />
+      <Form.Control.Feedback>
+        <FormattedMessage
+          defaultMessage="Enter time as HH:MM:SS"
+          description="Hint text for start and stop time input fields"
+          id="authoring.videoeditor.duration.hint"
+        />
+      </Form.Control.Feedback>
+    </Form.Group>
+  </Form.Row>
+  <div
+    className="mt-4 mx-2 text-right"
+  >
+    <span
+      className="p-2 total-label rounded"
+    >
+      Total: 00:00:00
+    </span>
+  </div>
+</injectIntl(ShimmedIntlComponent)>
+`;
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/DurationWidget/hooks.js b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/DurationWidget/hooks.js
new file mode 100644
index 0000000000..ba84d31dfa
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/DurationWidget/hooks.js
@@ -0,0 +1,234 @@
+import { useEffect, useState } from 'react';
+
+import messages from '../messages';
+
+// This 'module' self-import hack enables mocking during tests.
+// See src/editors/decisions/0005-internal-editor-testability-decisions.md. The whole approach to how hooks are tested
+// should be re-thought and cleaned up to avoid this pattern.
+// eslint-disable-next-line import/no-self-import
+import * as module from './hooks';
+
+const durationMatcher = /^(\d{0,2}):?(\d{0,2})?:?(\d{0,2})?$/i;
+
+export const durationWidget = ({ duration, updateField }) => {
+  const setDuration = (val) => updateField({ duration: val });
+  const initialState = module.durationString(duration);
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const [unsavedDuration, setUnsavedDuration] = useState(initialState);
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useEffect(() => {
+    setUnsavedDuration(module.durationString(duration));
+  }, [duration]);
+
+  return {
+    unsavedDuration,
+    onBlur: (index) => (
+      (e) => module.updateDuration({
+        duration,
+        setDuration,
+        unsavedDuration,
+        setUnsavedDuration,
+        index,
+        inputString: e.target.value,
+      })
+    ),
+    onChange: (index) => (
+      (e) => setUnsavedDuration(module.onDurationChange(unsavedDuration, index, e.target.value))
+    ),
+    onKeyDown: (index) => (
+      (e) => setUnsavedDuration(module.onDurationKeyDown(unsavedDuration, index, e))
+    ),
+    getTotalLabel: ({ durationString, subtitle, intl }) => {
+      if (!durationString.stopTime) {
+        if (!durationString.startTime) {
+          return intl.formatMessage(messages.fullVideoLength);
+        }
+        if (subtitle) {
+          return intl.formatMessage(
+            messages.startsAt,
+            { startTime: module.durationStringFromValue(durationString.startTime) },
+          );
+        }
+        return null;
+      }
+      const total = durationString.stopTime - (durationString.startTime || 0);
+      return intl.formatMessage(
+        subtitle ? messages.custom : messages.total,
+        { total: module.durationStringFromValue(total) },
+      );
+    },
+  };
+};
+
+/**
+ * durationString(duration)
+ * Returns the display value for embedded start and stop times
+ * @param {object} duration - object containing startTime and stopTime millisecond values
+ * @return {object} - start and stop time from incoming object mapped to duration strings.
+ */
+export const durationString = (duration) => ({
+  startTime: module.durationStringFromValue(duration.startTime),
+  stopTime: module.durationStringFromValue(duration.stopTime),
+});
+
+/**
+ * durationStringFromValue(value)
+ * Returns a duration string in 'hh:mm:ss' format from the given ms value
+ * @param {number} value - duration (in milliseconds)
+ * @return {string} - duration in 'hh:mm:ss' format
+ */
+export const durationStringFromValue = (value) => {
+  // return 'why';
+  if (!value || typeof value !== 'number' || value <= 0) {
+    return '00:00:00';
+  }
+  const seconds = Math.floor((value / 1000) % 60);
+  const minutes = Math.floor((value / 60000) % 60);
+  const hours = Math.floor((value / 3600000) % 60);
+  const zeroPad = (num) => String(num).padStart(2, '0');
+  return [hours, minutes, seconds].map(zeroPad).join(':');
+};
+
+/**
+ * updateDuration({ duration, unsavedDuration, setUnsavedDuration, setDuration })
+ * Returns a memoized callback based on inputs that updates unsavedDuration value and form value
+ * if the new string is valid (duration stores a number, unsavedDuration stores a string).
+ * If the duration string is invalid, resets the unsavedDuration value to the latest good value.
+ * @param {object} duration - redux-stored durations in milliseconds
+ * @param {object} unsavedDuration - hook-stored duration in 'hh:mm:ss' format
+ * @param {func} setDuration - set form value
+ * @param {func} setUnsavedDuration - set unsavedDuration object
+ * @param {string} index - startTime or stopTime
+ * @param {string} inputString - string value of user input for either the start or stop time fields
+ * @return {func} - callback to update duration unsavedDurationly and in redux
+ *   updateDuration(args)(index, durationString)
+ */
+export const updateDuration = ({
+  duration,
+  unsavedDuration,
+  setDuration,
+  setUnsavedDuration,
+  index,
+  inputString,
+}) => {
+  let newDurationString = inputString;
+  let newValue = module.valueFromDuration(newDurationString);
+  // maxTime is 23:59:59 or 86399 seconds
+  if (newValue > 86399000) {
+    newValue = 86399000;
+  }
+
+  // stopTime must not be equal to 24:00:00, so when the user types 23:59:59 in the startTime field and stopTime field -
+  // set the startTime field to 23:59:58.
+  if (index === 'stopTime' && duration.startTime === 86399000) {
+    const startTime = 86399000 - 1000;
+
+    setUnsavedDuration({
+      startTime: module.durationStringFromValue(startTime),
+      stopTime: module.durationStringFromValue(newValue),
+    });
+    setDuration({
+      ...duration,
+      startTime,
+      stopTime: newValue,
+    });
+
+    return;
+  }
+
+  // stopTime must be at least 1 second, if not zero
+  if (index === 'stopTime' && newValue > 0 && newValue < 1000) {
+    newValue = 1000;
+  }
+  // stopTime must be at least 1 second after startTime, except 0 means no custom stopTime
+  if (index === 'stopTime' && newValue > 0 && newValue < (duration.startTime + 1000)) {
+    newValue = duration.startTime + 1000;
+  }
+  // startTime must be at least 1 second before stopTime, except when stopTime is less than a second
+  // (stopTime should only be less than a second if it's zero, but we're being paranoid)
+  if (index === 'startTime' && duration.stopTime >= 1000 && newValue > (duration.stopTime - 1000)) {
+    newValue = duration.stopTime - 1000;
+  }
+  newDurationString = module.durationStringFromValue(newValue);
+  setUnsavedDuration({ ...unsavedDuration, [index]: newDurationString });
+  setDuration({ ...duration, [index]: newValue });
+};
+
+/**
+ * onDurationChange(duration)
+ * Returns a new duration value based on onChange event
+ * @param {object} duration - object containing startTime and stopTime millisecond values
+ * @param {string} index - 'startTime or 'stopTime'
+ * @param {string} val - duration in 'hh:mm:ss' format
+ * @return {object} duration - object containing startTime and stopTime millisecond values
+ */
+export const onDurationChange = (duration, index, val) => {
+  const match = val.trim().match(durationMatcher);
+  if (!match) {
+    return duration;
+  }
+
+  const caretPos = document.activeElement.selectionStart;
+  let newDuration = val;
+  if (caretPos === newDuration.length && (newDuration.length === 2 || newDuration.length === 5)) {
+    newDuration += ':';
+  }
+
+  return {
+    ...duration,
+    [index]: newDuration,
+  };
+};
+
+/**
+ * onDurationKeyDown(duration)
+ * Returns a new duration value based on onKeyDown event
+ * @param {object} duration - object containing startTime and stopTime millisecond values
+ * @param {string} index - 'startTime or 'stopTime'
+ * @param {Event} event - event from onKeyDown
+ * @return {object} duration - object containing startTime and stopTime millisecond values
+ */
+export const onDurationKeyDown = (duration, index, event) => {
+  const caretPos = document.activeElement.selectionStart;
+  let newDuration = duration[index];
+
+  switch (event.key) {
+    case 'Enter':
+      document.activeElement.blur();
+      break;
+    case 'Backspace':
+      if (caretPos === newDuration.length && newDuration.slice(-1) === ':') {
+        newDuration = newDuration.slice(0, -1);
+      }
+      break;
+    default:
+      break;
+  }
+
+  return {
+    ...duration,
+    [index]: newDuration,
+  };
+};
+
+/**
+ * valueFromDuration(duration)
+ * Returns a millisecond duration value from the given 'hh:mm:ss' format string
+ * @param {string} duration - duration in 'hh:mm:ss' format
+ * @return {number} - duration in milliseconds. Returns null if duration is invalid.
+ */
+export const valueFromDuration = (duration) => {
+  let matches = duration.trim().match(durationMatcher);
+  if (!matches) {
+    return 0;
+  }
+  matches = matches.slice(1).filter(v => v !== undefined);
+  if (matches.length < 3) {
+    for (let i = 0; i <= 3 - matches.length; i++) {
+      matches.unshift(0);
+    }
+  }
+  const [hours, minutes, seconds] = matches.map(x => parseInt(x, 10) || 0);
+  return ((hours * 60 + minutes) * 60 + seconds) * 1000;
+};
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/DurationWidget/hooks.test.js b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/DurationWidget/hooks.test.js
new file mode 100644
index 0000000000..f05de3fbbd
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/DurationWidget/hooks.test.js
@@ -0,0 +1,348 @@
+import React from 'react';
+
+import * as hooks from './hooks';
+import messages from '../messages';
+
+jest.mock('react', () => {
+  const updateState = jest.fn();
+  return {
+    ...jest.requireActual('react'),
+    updateState,
+    useState: jest.fn(val => ([{ state: val }, (newVal) => updateState({ val, newVal })])),
+    useCallback: (cb, prereqs) => ({ useCallback: { cb, prereqs } }),
+    useEffect: jest.fn(),
+  };
+});
+
+let testMethod;
+const intl = {
+  formatMessage: jest.fn(val => val),
+};
+
+const [h, m, s] = [3600000, 60000, 1000];
+const durationPairs = [
+  [0, '00:00:00'],
+  [5000, '00:00:05'],
+  [60000, '00:01:00'],
+  [3600000, '01:00:00'],
+  [3665000, '01:01:05'],
+];
+const trickyDurations = [
+  ['10:00', 600000],
+  ['23', 23000],
+  ['99:99:99', 99 * (m + s + h)],
+  ['23:42:81', 23 * h + 42 * m + 81 * s],
+];
+let props;
+const e = {
+  target: {
+    value: 'vAlUE',
+  },
+};
+
+describe('Video Settings DurationWidget hooks', () => {
+  describe('durationWidget', () => {
+    const duration = {
+      startTime: '00:00:00',
+      stopTime: '00:00:10',
+    };
+    const updateField = jest.fn();
+    beforeEach(() => {
+      testMethod = hooks.durationWidget({ duration, updateField });
+    });
+    afterEach(() => {
+      jest.restoreAllMocks();
+    });
+    describe('behavior', () => {
+      describe('initialization', () => {
+        test('useEffect memoized on duration', () => {
+          hooks.durationWidget({ duration, updateField });
+          expect(React.useEffect).toHaveBeenCalled();
+          expect(React.useEffect.mock.calls[0][1]).toEqual([duration]);
+        });
+        test('calls setUnsavedDuration with durationString(duration)', () => {
+          hooks.durationWidget({ duration, updateField });
+          React.useEffect.mock.calls[0][0]();
+          expect(React.updateState).toHaveBeenCalled();
+        });
+      });
+    });
+    describe('returns', () => {
+      beforeEach(() => {
+        testMethod = hooks.durationWidget({ duration, updateField });
+      });
+      afterEach(() => {
+        jest.restoreAllMocks();
+      });
+      describe('unsavedDuration, defaulted to duration', () => {
+        it('should default unsavedDuration to duration', () => {
+          expect(testMethod.unsavedDuration).toEqual({ state: hooks.durationString(duration) });
+        });
+      });
+      describe('onBlur', () => {
+        it('calls updateDuration on blur', () => {
+          jest.spyOn(hooks, 'updateDuration').mockImplementation(jest.fn());
+          testMethod.onBlur('IndEX')(e);
+          expect(hooks.updateDuration).toHaveBeenCalled();
+        });
+      });
+      describe('onChange', () => {
+        it('calls updateState on change', () => {
+          testMethod.onChange('IndEX')(e);
+          expect(React.updateState).toHaveBeenCalled();
+        });
+      });
+      describe('onKeyDown', () => {
+        it('calls updateState on key down', () => {
+          testMethod.onKeyDown('iNDex')(e);
+          expect(React.updateState).toHaveBeenCalled();
+        });
+      });
+      describe('getTotalLabel', () => {
+        it('returns fullVideoLength message when no startTime and no stop Time are set', () => {
+          expect(testMethod.getTotalLabel({
+            durationString: {},
+            subtitle: true,
+            intl,
+          })).toEqual(messages.fullVideoLength);
+        });
+        it('returns startAt message for subtitle when only startTime is set', () => {
+          expect(testMethod.getTotalLabel({
+            durationString: {
+              startTime: '00:00:00',
+            },
+            subtitle: true,
+            intl,
+          })).toEqual(messages.startsAt);
+        });
+        it('returns null for widget (not subtitle) when there only startTime is set', () => {
+          expect(testMethod.getTotalLabel({
+            durationString: {
+              startTime: '00:00:00',
+            },
+            subtitle: false,
+            intl,
+          })).toEqual(null);
+        });
+        it('returns total message when at least stopTime is set', () => {
+          expect(testMethod.getTotalLabel({
+            durationString: {
+              startTime: '00:00:00',
+              stopTime: '00:00:10',
+            },
+            subtitle: false,
+            intl,
+          })).toEqual(messages.total);
+        });
+        it('returns custom message when at least stopTime is set and subtitle is true', () => {
+          expect(testMethod.getTotalLabel({
+            durationString: {
+              startTime: '00:00:00',
+              stopTime: '00:00:10',
+            },
+            subtitle: true,
+            intl,
+          })).toEqual(messages.custom);
+        });
+      });
+    });
+  });
+  describe('durationString', () => {
+    beforeEach(() => {
+      testMethod = hooks.durationString;
+    });
+    it('returns an object that maps durationStringFromValue to the passed duration keys', () => {
+      const testDuration = { startTime: 1000, stopTime: 2000, other: 'values' };
+      expect(testMethod(testDuration)).toEqual({
+        startTime: '00:00:01',
+        stopTime: '00:00:02',
+      });
+    });
+  });
+  describe('durationStringFromValue', () => {
+    beforeEach(() => {
+      testMethod = hooks.durationStringFromValue;
+    });
+    it('returns 00:00:00 if given a bad value', () => {
+      const badChecks = ['a', '', null, -1];
+      badChecks.forEach(val => expect(testMethod(val)).toEqual('00:00:00'));
+    });
+    it('translates milliseconds into hh:mm:ss format', () => {
+      durationPairs.forEach(
+        ([val, dur]) => expect(testMethod(val)).toEqual(dur),
+      );
+    });
+  });
+  describe('updateDuration', () => {
+    const testValidIndex = 'startTime';
+    const testStopIndex = 'stopTime';
+    const testValidDuration = '00:00:00';
+    const testValidValue = 0;
+    const testInvalidDuration = 'abc';
+    beforeEach(() => {
+      testMethod = hooks.updateDuration;
+      props = {
+        duration: { startTime: 23000, stopTime: 600000 },
+        unsavedDuration: { startTime: '00:00:23', stopTime: '00:10:00' },
+        setDuration: jest.fn(),
+        setUnsavedDuration: jest.fn(),
+        index: 'startTime',
+        inputString: '01:23:45',
+      };
+    });
+    describe('if the passed durationString is valid', () => {
+      it('sets the unsavedDuration to updated strings and duration to new timestamp value', () => {
+        testMethod({
+          ...props,
+          index: testValidIndex,
+          inputString: testValidDuration,
+        });
+        expect(props.setUnsavedDuration).toHaveBeenCalledWith({
+          ...props.unsavedDuration,
+          [testValidIndex]: testValidDuration,
+        });
+        expect(props.setDuration).toHaveBeenCalledWith({
+          ...props.duration,
+          [testValidIndex]: testValidValue,
+        });
+      });
+    });
+    describe('if the passed durationString is not valid', () => {
+      it('updates unsavedDuration values to 0 (the default)', () => {
+        testMethod({
+          ...props,
+          index: testValidIndex,
+          inputString: testInvalidDuration,
+        });
+        expect(props.setUnsavedDuration).toHaveBeenCalledWith({
+          ...props.unsavedDuration,
+          [testValidIndex]: testValidDuration,
+        });
+        expect(props.setDuration).toHaveBeenCalledWith({
+          ...props.duration,
+          [testValidIndex]: testValidValue,
+        });
+      });
+    });
+    describe('if the passed startTime is after (or equal to) the stored non-zero stopTime', () => {
+      it('updates unsavedDuration startTime values to 1 second before stopTime', () => {
+        testMethod({
+          ...props,
+          index: testValidIndex,
+          inputString: '00:10:00',
+        });
+        expect(props.setUnsavedDuration).toHaveBeenCalledWith({
+          ...props.unsavedDuration,
+          [testValidIndex]: '00:09:59',
+        });
+        expect(props.setDuration).toHaveBeenCalledWith({
+          ...props.duration,
+          [testValidIndex]: 599000,
+        });
+      });
+    });
+    describe('if the passed stopTime is before (or equal to) the stored startTime', () => {
+      it('updates unsavedDuration stopTime values to 1 second after startTime', () => {
+        testMethod({
+          ...props,
+          index: testStopIndex,
+          inputString: '00:00:22',
+        });
+        expect(props.setUnsavedDuration).toHaveBeenCalledWith({
+          ...props.unsavedDuration,
+          [testStopIndex]: '00:00:24',
+        });
+        expect(props.setDuration).toHaveBeenCalledWith({
+          ...props.duration,
+          [testStopIndex]: 24000,
+        });
+      });
+    });
+    describe('if the passed stopTime = startTime', () => {
+      it('sets the startTime value less than stopTime value', () => {
+        testMethod({
+          ...props,
+          duration: { startTime: 86399000, stopTime: 86399000 },
+          unsavedDuration: { startTime: '23:59:59', stopTime: '23:59:59' },
+          index: testStopIndex,
+          inputString: '23:59:59',
+        });
+        expect(props.setUnsavedDuration).toHaveBeenCalledWith({
+          startTime: '23:59:58',
+          stopTime: '23:59:59',
+        });
+        expect(props.setDuration).toHaveBeenCalledWith({
+          ...props.duration,
+          startTime: 86399000 - 1000,
+          stopTime: 86399000,
+        });
+      });
+    });
+  });
+  describe('onDurationChange', () => {
+    beforeEach(() => {
+      props = {
+        duration: { startTime: '00:00:00' },
+        index: 'startTime',
+        val: 'vAl',
+      };
+      testMethod = hooks.onDurationChange;
+    });
+    it('returns duration with no change if duration[index] does not match HH:MM:SS format', () => {
+      const badChecks = [
+        'ab:cd:ef', // non-digit characters
+        '12:34:567', // characters past max length
+      ];
+      badChecks.forEach(val => expect(testMethod(props.duration, props.index, val)).toEqual(props.duration));
+    });
+    it('returns duration with an added \':\' after 2 characters when caret is at end', () => {
+      props.duration = { startTime: '0' };
+      props.val = '00';
+      document.activeElement.selectionStart = props.duration[props.index].length + 1;
+      expect(testMethod(props.duration, props.index, props.val)).toEqual({ startTime: '00:' });
+    });
+    it('returns duration with an added \':\' after 5 characters when caret is at end', () => {
+      props.duration = { startTime: '00:0' };
+      props.val = '00:00';
+      document.activeElement.selectionStart = props.duration[props.index].length + 1;
+      expect(testMethod(props.duration, props.index, props.val)).toEqual({ startTime: '00:00:' });
+    });
+  });
+  describe('onDurationKeyDown', () => {
+    beforeEach(() => {
+      props = {
+        duration: { startTime: '00:00:00' },
+        index: 'startTime',
+        event: 'eVeNt',
+      };
+      testMethod = hooks.onDurationKeyDown;
+    });
+    it('enter event: calls blur()', () => {
+      props.event = { key: 'Enter' };
+      const blurSpy = jest.spyOn(document.activeElement, 'blur');
+      testMethod(props.duration, props.index, props.event);
+      expect(blurSpy).toHaveBeenCalled();
+    });
+    it('backspace event: returns duration with deleted end character when that character is \':\' and caret is at end', () => {
+      props.duration = { startTime: '00:' };
+      props.event = { key: 'Backspace' };
+      document.activeElement.selectionStart = props.duration[props.index].length;
+      expect(testMethod(props.duration, props.index, props.event)).toEqual({ startTime: '00' });
+    });
+  });
+  describe('valueFromDuration', () => {
+    beforeEach(() => {
+      testMethod = hooks.valueFromDuration;
+    });
+    it('returns 0 if given a bad duration string', () => {
+      const badChecks = ['a', '00:00:1f', '0adg:00:04'];
+      badChecks.forEach(dur => expect(testMethod(dur)).toEqual(0));
+    });
+    it('returns simple durations', () => {
+      durationPairs.forEach(([val, dur]) => expect(testMethod(dur)).toEqual(val));
+    });
+    it('returns tricky durations, prepending zeros and expanding out sections', () => {
+      trickyDurations.forEach(([dur, val]) => expect(testMethod(dur)).toEqual(val));
+    });
+  });
+});
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/DurationWidget/index.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/DurationWidget/index.jsx
new file mode 100644
index 0000000000..5975edf7ae
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/DurationWidget/index.jsx
@@ -0,0 +1,104 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+
+import { Col, Form } from '@openedx/paragon';
+import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';
+
+import { actions, selectors } from '../../../../../../data/redux';
+import { keyStore } from '../../../../../../utils';
+import CollapsibleFormWidget from '../CollapsibleFormWidget';
+import * as hooks from './hooks';
+import messages from '../messages';
+
+import './index.scss';
+
+/**
+ * Collapsible Form widget controlling video start and end times
+ * Also displays the total run time of the video.
+ */
+const DurationWidget = ({
+  // redux
+  duration,
+  updateField,
+  // injected
+  intl,
+}) => {
+  const {
+    unsavedDuration,
+    onBlur,
+    onChange,
+    onKeyDown,
+    getTotalLabel,
+  } = hooks.durationWidget({ duration, updateField });
+
+  const timeKeys = keyStore(duration);
+
+  return (
+    <CollapsibleFormWidget
+      fontSize="x-small"
+      title={intl.formatMessage(messages.durationTitle)}
+      subtitle={getTotalLabel({
+        durationString: duration,
+        subtitle: true,
+        intl,
+      })}
+    >
+      <FormattedMessage {...messages.durationDescription} />
+      <Form.Row className="mt-4.5">
+        <Form.Group as={Col}>
+          <Form.Control
+            floatingLabel={intl.formatMessage(messages.startTimeLabel)}
+            onBlur={onBlur(timeKeys.startTime)}
+            onChange={onChange(timeKeys.startTime)}
+            onKeyDown={onKeyDown(timeKeys.startTime)}
+            value={unsavedDuration.startTime}
+          />
+          <Form.Control.Feedback>
+            <FormattedMessage {...messages.durationHint} />
+          </Form.Control.Feedback>
+        </Form.Group>
+        <Form.Group as={Col}>
+          <Form.Control
+            floatingLabel={intl.formatMessage(messages.stopTimeLabel)}
+            onBlur={onBlur(timeKeys.stopTime)}
+            onChange={onChange(timeKeys.stopTime)}
+            onKeyDown={onKeyDown(timeKeys.stopTime)}
+            value={unsavedDuration.stopTime}
+          />
+          <Form.Control.Feedback>
+            <FormattedMessage {...messages.durationHint} />
+          </Form.Control.Feedback>
+        </Form.Group>
+      </Form.Row>
+      <div className="mt-4 mx-2 text-right">
+        <span className="p-2 total-label rounded">
+          {getTotalLabel({
+            durationString: duration,
+            subtitle: false,
+            intl,
+          })}
+        </span>
+      </div>
+    </CollapsibleFormWidget>
+  );
+};
+
+DurationWidget.propTypes = {
+  // redux
+  duration: PropTypes.objectOf(PropTypes.number).isRequired,
+  updateField: PropTypes.func.isRequired,
+  // injected
+  intl: intlShape.isRequired,
+};
+
+export const mapStateToProps = (state) => ({
+  duration: selectors.video.duration(state),
+});
+
+export const mapDispatchToProps = {
+  updateField: actions.video.updateField,
+};
+
+export const DurationWidgetInternal = DurationWidget; // For testing only
+export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(DurationWidget));
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/DurationWidget/index.scss b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/DurationWidget/index.scss
new file mode 100644
index 0000000000..ed9a26ebfc
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/DurationWidget/index.scss
@@ -0,0 +1,3 @@
+.total-label {
+    border: 1px solid #707070;
+}
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/DurationWidget/index.test.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/DurationWidget/index.test.jsx
new file mode 100644
index 0000000000..4053431075
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/DurationWidget/index.test.jsx
@@ -0,0 +1,52 @@
+import 'CourseAuthoring/editors/setupEditorTest';
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+
+import { actions, selectors } from '../../../../../../data/redux';
+import { formatMessage } from '../../../../../../testUtils';
+import { DurationWidgetInternal as DurationWidget, mapStateToProps, mapDispatchToProps } from '.';
+
+jest.mock('../../../../../../data/redux', () => ({
+  actions: {
+    video: {
+      updateField: jest.fn().mockName('actions.video.updateField'),
+    },
+  },
+  selectors: {
+    video: {
+      duration: jest.fn(state => ({ duration: state })),
+    },
+  },
+}));
+
+describe('DurationWidget', () => {
+  const props = {
+    duration: {
+      startTime: '00:00:00',
+      stopTime: '00:00:10',
+    },
+    updateField: jest.fn().mockName('updateField'),
+    // inject
+    intl: { formatMessage },
+  };
+  describe('render', () => {
+    test('snapshots: renders as expected with default props', () => {
+      expect(
+        shallow(<DurationWidget {...props} />).snapshot,
+      ).toMatchSnapshot();
+    });
+  });
+  describe('mapStateToProps', () => {
+    const testState = { A: 'pple', B: 'anana', C: 'ucumber' };
+    test('duration from video.duration', () => {
+      expect(
+        mapStateToProps(testState).duration,
+      ).toEqual(selectors.video.duration(testState));
+    });
+  });
+  describe('mapDispatchToProps', () => {
+    test('updateField from actions.video.updateField', () => {
+      expect(mapDispatchToProps.updateField).toEqual(actions.video.updateField);
+    });
+  });
+});
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/HandoutWidget/__snapshots__/index.test.jsx.snap b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/HandoutWidget/__snapshots__/index.test.jsx.snap
new file mode 100644
index 0000000000..056123b55f
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/HandoutWidget/__snapshots__/index.test.jsx.snap
@@ -0,0 +1,165 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`HandoutWidget snapshots snapshots: renders as expected with default props 1`] = `
+<injectIntl(ShimmedIntlComponent)
+  fontSize="x-small"
+  isError={true}
+  subtitle="None"
+  title="Handout"
+>
+  <ErrorAlert
+    dismissError={[Function]}
+    hideHeading={true}
+    isError={false}
+  >
+    <FormattedMessage
+      defaultMessage="Handout files must be 20 MB or less. Please resize the file and try again."
+      description="Message presented to user when handout file size is larger than 20 MB"
+      id="authoring.videoeditor.handout.error.fileSizeError"
+    />
+  </ErrorAlert>
+  <UploadErrorAlert
+    message={
+      {
+        "defaultMessage": "Failed to upload handout. Please try again.",
+        "description": "Message presented to user when handout fails to upload",
+        "id": "authoring.videoeditor.handout.error.uploadHandoutError",
+      }
+    }
+  />
+  <FileInput
+    fileInput={
+      {
+        "addFile": [Function],
+        "click": [Function],
+        "ref": {
+          "current": undefined,
+        },
+      }
+    }
+  />
+  <Stack
+    gap={3}
+  >
+    <FormattedMessage
+      defaultMessage="Add a handout to accompany this video. Learners can download
+    this file by clicking "Download Handout" below the video."
+      description="Message displayed when uploading a handout"
+      id="authoring.videoeditor.handout.upload.addHandoutMessage"
+    />
+    <Button
+      className="text-primary-500 font-weight-bold justify-content-start pl-0"
+      onClick={[Function]}
+      size="sm"
+      variant="link"
+    >
+      <FormattedMessage
+        defaultMessage="Upload Handout"
+        description="Label for upload button"
+        id="authoring.videoeditor.handout.upload.label"
+      />
+    </Button>
+  </Stack>
+</injectIntl(ShimmedIntlComponent)>
+`;
+
+exports[`HandoutWidget snapshots snapshots: renders as expected with handout 1`] = `
+<injectIntl(ShimmedIntlComponent)
+  fontSize="x-small"
+  isError={true}
+  subtitle="sOMeUrl "
+  title="Handout"
+>
+  <ErrorAlert
+    dismissError={[Function]}
+    hideHeading={true}
+    isError={false}
+  >
+    <FormattedMessage
+      defaultMessage="Handout files must be 20 MB or less. Please resize the file and try again."
+      description="Message presented to user when handout file size is larger than 20 MB"
+      id="authoring.videoeditor.handout.error.fileSizeError"
+    />
+  </ErrorAlert>
+  <UploadErrorAlert
+    message={
+      {
+        "defaultMessage": "Failed to upload handout. Please try again.",
+        "description": "Message presented to user when handout fails to upload",
+        "id": "authoring.videoeditor.handout.error.uploadHandoutError",
+      }
+    }
+  />
+  <FileInput
+    fileInput={
+      {
+        "addFile": [Function],
+        "click": [Function],
+        "ref": {
+          "current": undefined,
+        },
+      }
+    }
+  />
+  <Stack
+    gap={3}
+  >
+    <ActionRow
+      className="border border-gray-300 rounded px-3 py-2"
+    >
+      sOMeUrl 
+      <ActionRow.Spacer />
+      <Dropdown>
+        <Dropdown.Toggle
+          alt="Actions dropdown"
+          as="IconButton"
+          iconAs="Icon"
+          id="dropdown-toggle-with-iconbutton-video-transcript-widget"
+          variant="primary"
+        />
+        <Dropdown.Menu
+          className="video_handout Action Menu"
+        >
+          <Dropdown.Item
+            key="handout-actions-replace"
+            onClick={[Function]}
+          >
+            <FormattedMessage
+              defaultMessage="Replace"
+              description="Message Presented To user for action to replace handout"
+              id="authoring.videoeditor.handout.replaceHandout"
+            />
+          </Dropdown.Item>
+          <Dropdown.Item
+            key="handout-actions-download"
+            target="_blank"
+          >
+            <FormattedMessage
+              defaultMessage="Download"
+              description="Message Presented To user for action to download handout"
+              id="authoring.videoeditor.handout.downloadHandout"
+            />
+          </Dropdown.Item>
+          <Dropdown.Item
+            key="handout-actions-delete"
+            onClick={[Function]}
+          >
+            <FormattedMessage
+              defaultMessage="Delete"
+              description="Message Presented To user for action to delete handout"
+              id="authoring.videoeditor.handout.deleteHandout"
+            />
+          </Dropdown.Item>
+        </Dropdown.Menu>
+      </Dropdown>
+    </ActionRow>
+    <FormattedMessage
+      defaultMessage="Learners can download this file by clicking "Download Handout" below the video."
+      description="Message presented to user when a handout is present"
+      id="authoring.videoeditor.handout.handoutHelpMessage"
+    />
+  </Stack>
+</injectIntl(ShimmedIntlComponent)>
+`;
+
+exports[`HandoutWidget snapshots snapshots: renders as expected with isLibrary true 1`] = `null`;
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/HandoutWidget/hooks.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/HandoutWidget/hooks.jsx
new file mode 100644
index 0000000000..5861715c49
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/HandoutWidget/hooks.jsx
@@ -0,0 +1,72 @@
+import React from 'react';
+import { useDispatch } from 'react-redux';
+import { thunkActions } from '../../../../../../data/redux';
+// This 'module' self-import hack enables mocking during tests.
+// See src/editors/decisions/0005-internal-editor-testability-decisions.md. The whole approach to how hooks are tested
+// should be re-thought and cleaned up to avoid this pattern.
+// eslint-disable-next-line import/no-self-import
+import * as module from './hooks';
+
+export const state = {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  showSizeError: (args) => React.useState(args),
+};
+
+export const parseHandoutName = ({ handout }) => {
+  if (handout) {
+    const handoutName = handout.slice(handout.lastIndexOf('@') + 1);
+    return handoutName;
+  }
+  return 'None';
+};
+
+export const checkValidFileSize = ({
+  file,
+  onSizeFail,
+}) => {
+  // Check if the file size is greater than 20 MB, upload size limit
+  if (file.size > 20000000) {
+    onSizeFail();
+    return false;
+  }
+  return true;
+};
+
+export const fileInput = ({ fileSizeError }) => {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const dispatch = useDispatch();
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const ref = React.useRef();
+  const click = () => ref.current.click();
+  const addFile = (e) => {
+    const file = e.target.files[0];
+    if (file && module.checkValidFileSize({
+      file,
+      onSizeFail: () => {
+        fileSizeError.set();
+      },
+    })) {
+      dispatch(thunkActions.video.uploadHandout({
+        file,
+      }));
+    }
+  };
+  return {
+    click,
+    addFile,
+    ref,
+  };
+};
+
+export const fileSizeError = () => {
+  const [showSizeError, setShowSizeError] = module.state.showSizeError(false);
+  return {
+    fileSizeError: {
+      show: showSizeError,
+      set: () => setShowSizeError(true),
+      dismiss: () => setShowSizeError(false),
+    },
+  };
+};
+
+export default { fileInput, fileSizeError, parseHandoutName };
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/HandoutWidget/hooks.test.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/HandoutWidget/hooks.test.jsx
new file mode 100644
index 0000000000..aead6fb96f
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/HandoutWidget/hooks.test.jsx
@@ -0,0 +1,106 @@
+import React from 'react';
+import { dispatch } from 'react-redux';
+import { thunkActions } from '../../../../../../data/redux';
+import { MockUseState } from '../../../../../../testUtils';
+import { keyStore } from '../../../../../../utils';
+import * as hooks from './hooks';
+
+jest.mock('react', () => ({
+  ...jest.requireActual('react'),
+  useRef: jest.fn(val => ({ current: val })),
+  useEffect: jest.fn(),
+  useCallback: (cb, prereqs) => ({ cb, prereqs }),
+}));
+
+jest.mock('react-redux', () => {
+  const dispatchFn = jest.fn();
+  return {
+    ...jest.requireActual('react-redux'),
+    dispatch: dispatchFn,
+    useDispatch: jest.fn(() => dispatchFn),
+  };
+});
+
+jest.mock('../../../../../../data/redux', () => ({
+  thunkActions: {
+    video: {
+      uploadHandout: jest.fn(),
+    },
+  },
+}));
+
+const state = new MockUseState(hooks);
+const hookKeys = keyStore(hooks);
+let hook;
+const testValue = '@testVALUEVALIDhANdoUT';
+const selectedFileSuccess = { name: testValue, size: 20000 };
+describe('VideoEditorHandout hooks', () => {
+  describe('state hooks', () => {
+    state.testGetter(state.keys.showSizeError);
+  });
+
+  describe('parseHandoutName', () => {
+    test('it returns none when given null', () => {
+      expect(hooks.parseHandoutName({ handout: null })).toEqual('None');
+    });
+    test('it creates a list based on transcript object', () => {
+      expect(hooks.parseHandoutName({ handout: testValue })).toEqual('testVALUEVALIDhANdoUT');
+    });
+  });
+
+  describe('checkValidSize', () => {
+    const onSizeFail = jest.fn();
+    it('returns false for file size', () => {
+      hook = hooks.checkValidFileSize({ file: { name: testValue, size: 20000001 }, onSizeFail });
+      expect(onSizeFail).toHaveBeenCalled();
+      expect(hook).toEqual(false);
+    });
+    it('returns true for valid file size', () => {
+      hook = hooks.checkValidFileSize({ file: selectedFileSuccess, onSizeFail });
+      expect(hook).toEqual(true);
+    });
+  });
+  describe('fileInput', () => {
+    const spies = {};
+    const fileSizeError = { set: jest.fn() };
+    beforeEach(() => {
+      jest.clearAllMocks();
+      hook = hooks.fileInput({ fileSizeError });
+    });
+    it('returns a ref for the file input', () => {
+      expect(hook.ref).toEqual({ current: undefined });
+    });
+    test('click calls current.click on the ref', () => {
+      const click = jest.fn();
+      React.useRef.mockReturnValueOnce({ current: { click } });
+      hook = hooks.fileInput({ fileSizeError });
+      hook.click();
+      expect(click).toHaveBeenCalled();
+    });
+    describe('addFile', () => {
+      const eventSuccess = { target: { files: [{ selectedFileSuccess }] } };
+      const eventFailure = { target: { files: [{ name: testValue, size: 20000001 }] } };
+      it('image fails to upload if file size is greater than 2000000', () => {
+        const checkValidFileSize = false;
+        spies.checkValidFileSize = jest.spyOn(hooks, hookKeys.checkValidFileSize)
+          .mockReturnValueOnce(checkValidFileSize);
+        hook.addFile(eventFailure);
+        expect(spies.checkValidFileSize.mock.calls.length).toEqual(1);
+        expect(spies.checkValidFileSize).toHaveReturnedWith(false);
+      });
+      it('dispatches updateField action with the first target file', () => {
+        const checkValidFileSize = true;
+        spies.checkValidFileSize = jest.spyOn(hooks, hookKeys.checkValidFileSize)
+          .mockReturnValueOnce(checkValidFileSize);
+        hook.addFile(eventSuccess);
+        expect(spies.checkValidFileSize.mock.calls.length).toEqual(1);
+        expect(spies.checkValidFileSize).toHaveReturnedWith(true);
+        expect(dispatch).toHaveBeenCalledWith(
+          thunkActions.video.uploadHandout({
+            thumbnail: eventSuccess.target.files[0],
+          }),
+        );
+      });
+    });
+  });
+});
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/HandoutWidget/index.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/HandoutWidget/index.jsx
new file mode 100644
index 0000000000..799c06a0c1
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/HandoutWidget/index.jsx
@@ -0,0 +1,138 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+
+import {
+  Button,
+  Stack,
+  Icon,
+  IconButton,
+  Dropdown,
+  ActionRow,
+} from '@openedx/paragon';
+import { FileUpload, MoreHoriz } from '@openedx/paragon/icons';
+import {
+  FormattedMessage,
+  injectIntl,
+  intlShape,
+} from '@edx/frontend-platform/i18n';
+
+import { actions, selectors } from '../../../../../../data/redux';
+import * as hooks from './hooks';
+import messages from './messages';
+
+import { FileInput } from '../../../../../../sharedComponents/FileInput';
+import ErrorAlert from '../../../../../../sharedComponents/ErrorAlerts/ErrorAlert';
+import UploadErrorAlert from '../../../../../../sharedComponents/ErrorAlerts/UploadErrorAlert';
+import CollapsibleFormWidget from '../CollapsibleFormWidget';
+import { ErrorContext } from '../../../../hooks';
+import { RequestKeys } from '../../../../../../data/constants/requests';
+
+/**
+ * Collapsible Form widget controlling video handouts
+ */
+const HandoutWidget = ({
+  // injected
+  intl,
+  // redux
+  isLibrary,
+  handout,
+  getHandoutDownloadUrl,
+  updateField,
+  isUploadError,
+}) => {
+  const [error] = React.useContext(ErrorContext).handout;
+  const { fileSizeError } = hooks.fileSizeError();
+  const fileInput = hooks.fileInput({ fileSizeError });
+  const handoutName = hooks.parseHandoutName({ handout });
+  const downloadLink = getHandoutDownloadUrl({ handout });
+
+  return (!isLibrary ? (
+    <CollapsibleFormWidget
+      fontSize="x-small"
+      isError={Object.keys(error).length !== 0}
+      title={intl.formatMessage(messages.titleLabel)}
+      subtitle={handoutName}
+    >
+      <ErrorAlert
+        dismissError={fileSizeError.dismiss}
+        hideHeading
+        isError={fileSizeError.show}
+      >
+        <FormattedMessage {...messages.fileSizeError} />
+      </ErrorAlert>
+      <UploadErrorAlert isUploadError={isUploadError} message={messages.uploadHandoutError} />
+      <FileInput fileInput={fileInput} />
+      {handout ? (
+        <Stack gap={3}>
+          <ActionRow className="border border-gray-300 rounded px-3 py-2">
+            {handoutName}
+            <ActionRow.Spacer />
+            <Dropdown>
+              <Dropdown.Toggle
+                id="dropdown-toggle-with-iconbutton-video-transcript-widget"
+                as={IconButton}
+                src={MoreHoriz}
+                iconAs={Icon}
+                variant="primary"
+                alt="Actions dropdown"
+              />
+              <Dropdown.Menu className="video_handout Action Menu">
+                <Dropdown.Item
+                  key="handout-actions-replace"
+                  onClick={fileInput.click}
+                >
+                  <FormattedMessage {...messages.replaceHandout} />
+                </Dropdown.Item>
+                <Dropdown.Item key="handout-actions-download" target="_blank" href={downloadLink}>
+                  <FormattedMessage {...messages.downloadHandout} />
+                </Dropdown.Item>
+                <Dropdown.Item key="handout-actions-delete" onClick={() => updateField({ handout: null })}>
+                  <FormattedMessage {...messages.deleteHandout} />
+                </Dropdown.Item>
+              </Dropdown.Menu>
+            </Dropdown>
+          </ActionRow>
+          <FormattedMessage {...messages.handoutHelpMessage} />
+        </Stack>
+      ) : (
+        <Stack gap={3}>
+          <FormattedMessage {...messages.addHandoutMessage} />
+          <Button
+            className="text-primary-500 font-weight-bold justify-content-start pl-0"
+            size="sm"
+            iconBefore={FileUpload}
+            onClick={fileInput.click}
+            variant="link"
+          >
+            <FormattedMessage {...messages.uploadButtonLabel} />
+          </Button>
+        </Stack>
+      )}
+    </CollapsibleFormWidget>
+  ) : null);
+};
+
+HandoutWidget.propTypes = {
+  // injected
+  intl: intlShape.isRequired,
+  // redux
+  isLibrary: PropTypes.bool.isRequired,
+  handout: PropTypes.shape({}).isRequired,
+  updateField: PropTypes.func.isRequired,
+  isUploadError: PropTypes.bool.isRequired,
+  getHandoutDownloadUrl: PropTypes.func.isRequired,
+};
+export const mapStateToProps = (state) => ({
+  isLibrary: selectors.app.isLibrary(state),
+  handout: selectors.video.handout(state),
+  getHandoutDownloadUrl: selectors.video.getHandoutDownloadUrl(state),
+  isUploadError: selectors.requests.isFailed(state, { requestKey: RequestKeys.uploadAsset }),
+});
+
+export const mapDispatchToProps = (dispatch) => ({
+  updateField: (payload) => dispatch(actions.video.updateField(payload)),
+});
+
+export const HandoutWidgetInternal = HandoutWidget; // For testing only
+export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(HandoutWidget));
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/HandoutWidget/index.test.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/HandoutWidget/index.test.jsx
new file mode 100644
index 0000000000..8ecb7e613f
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/HandoutWidget/index.test.jsx
@@ -0,0 +1,81 @@
+import 'CourseAuthoring/editors/setupEditorTest';
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+
+import { formatMessage } from '../../../../../../testUtils';
+import { actions, selectors } from '../../../../../../data/redux';
+import { HandoutWidgetInternal as HandoutWidget, mapStateToProps, mapDispatchToProps } from '.';
+
+jest.mock('react', () => ({
+  ...jest.requireActual('react'),
+  useContext: jest.fn(() => ({ handout: ['error.handout', jest.fn().mockName('error.setHandout')] })),
+}));
+
+jest.mock('../../../../../../data/redux', () => ({
+  actions: {
+    video: {
+      updateField: jest.fn().mockName('actions.video.updateField'),
+    },
+  },
+  selectors: {
+    video: {
+      getHandoutDownloadUrl: jest.fn(args => ({ getHandoutDownloadUrl: args })).mockName('selectors.video.getHandoutDownloadUrl'),
+      handout: jest.fn(state => ({ handout: state })),
+    },
+    app: {
+      isLibrary: jest.fn(args => ({ isLibrary: args })),
+    },
+    requests: {
+      isFailed: jest.fn(args => ({ isFailed: args })),
+    },
+  },
+}));
+
+describe('HandoutWidget', () => {
+  const props = {
+    subtitle: 'SuBTItle',
+    title: 'tiTLE',
+    intl: { formatMessage },
+    isLibrary: false,
+    handout: '',
+    getHandoutDownloadUrl: jest.fn().mockName('args.getHandoutDownloadUrl'),
+    updateField: jest.fn().mockName('args.updateField'),
+  };
+
+  describe('snapshots', () => {
+    test('snapshots: renders as expected with default props', () => {
+      expect(
+        shallow(<HandoutWidget {...props} />).snapshot,
+      ).toMatchSnapshot();
+    });
+    test('snapshots: renders as expected with isLibrary true', () => {
+      expect(
+        shallow(<HandoutWidget {...props} isLibrary />).snapshot,
+      ).toMatchSnapshot();
+    });
+    test('snapshots: renders as expected with handout', () => {
+      expect(
+        shallow(<HandoutWidget {...props} handout="sOMeUrl " />).snapshot,
+      ).toMatchSnapshot();
+    });
+  });
+  describe('mapStateToProps', () => {
+    const testState = { A: 'pple', B: 'anana', C: 'ucumber' };
+    test('isLibrary from app.isLibrary', () => {
+      expect(
+        mapStateToProps(testState).isLibrary,
+      ).toEqual(selectors.app.isLibrary(testState));
+    });
+    test('getHandoutDownloadUrl from video.getHandoutDownloadUrl', () => {
+      expect(
+        mapStateToProps(testState).getHandoutDownloadUrl,
+      ).toEqual(selectors.video.getHandoutDownloadUrl(testState));
+    });
+  });
+  describe('mapDispatchToProps', () => {
+    const dispatch = jest.fn();
+    test('updateField from actions.video.updateField', () => {
+      expect(mapDispatchToProps.updateField).toEqual(dispatch(actions.video.updateField));
+    });
+  });
+});
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/HandoutWidget/messages.js b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/HandoutWidget/messages.js
new file mode 100644
index 0000000000..4e7114ef70
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/HandoutWidget/messages.js
@@ -0,0 +1,53 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+
+  titleLabel: {
+    id: 'authoring.videoeditor.handout.title.label',
+    defaultMessage: 'Handout',
+    description: 'Title for the handout widget',
+  },
+  uploadButtonLabel: {
+    id: 'authoring.videoeditor.handout.upload.label',
+    defaultMessage: 'Upload Handout',
+    description: 'Label for upload button',
+  },
+  addHandoutMessage: {
+    id: 'authoring.videoeditor.handout.upload.addHandoutMessage',
+    defaultMessage: `Add a handout to accompany this video. Learners can download
+    this file by clicking "Download Handout" below the video.`,
+    description: 'Message displayed when uploading a handout',
+  },
+  uploadHandoutError: {
+    id: 'authoring.videoeditor.handout.error.uploadHandoutError',
+    defaultMessage: 'Failed to upload handout. Please try again.',
+    description: 'Message presented to user when handout fails to upload',
+  },
+  fileSizeError: {
+    id: 'authoring.videoeditor.handout.error.fileSizeError',
+    defaultMessage: 'Handout files must be 20 MB or less. Please resize the file and try again.',
+    description: 'Message presented to user when handout file size is larger than 20 MB',
+  },
+  handoutHelpMessage: {
+    id: 'authoring.videoeditor.handout.handoutHelpMessage',
+    defaultMessage: 'Learners can download this file by clicking "Download Handout" below the video.',
+    description: 'Message presented to user when a handout is present',
+  },
+  deleteHandout: {
+    id: 'authoring.videoeditor.handout.deleteHandout',
+    defaultMessage: 'Delete',
+    description: 'Message Presented To user for action to delete handout',
+  },
+  replaceHandout: {
+    id: 'authoring.videoeditor.handout.replaceHandout',
+    defaultMessage: 'Replace',
+    description: 'Message Presented To user for action to replace handout',
+  },
+  downloadHandout: {
+    id: 'authoring.videoeditor.handout.downloadHandout',
+    defaultMessage: 'Download',
+    description: 'Message Presented To user for action to download handout',
+  },
+});
+
+export default messages;
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseBlurb.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseBlurb.jsx
new file mode 100644
index 0000000000..236d496311
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseBlurb.jsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  FormattedMessage,
+  injectIntl,
+} from '@edx/frontend-platform/i18n';
+import { Icon } from '@openedx/paragon';
+import {
+  Attribution,
+  Copyright,
+  Cc,
+  Nd,
+  Nc,
+  Sa,
+} from '@openedx/paragon/icons';
+
+import messages from './messages';
+import { LicenseTypes } from '../../../../../../data/constants/licenses';
+
+const LicenseBlurb = ({
+  license,
+  details,
+}) => (
+  <div className="d-flex flex-row align-items-center mt-2">
+    {/* not sure how to handle the edge cases when some of the icons are not displayed */}
+    {license === LicenseTypes.allRightsReserved ? <Icon src={Copyright} className="mr-1" style={{ height: '18px', width: '18px' }} /> : null}
+    {license === LicenseTypes.creativeCommons ? <Icon src={Cc} className="mr-1" style={{ height: '18px', width: '18px' }} /> : null}
+    {details.attribution ? <Icon src={Attribution} className="mr-1 text-primary-300" style={{ height: '18px', width: '18px' }} /> : null}
+    {details.noncommercial ? <Icon src={Nc} className="mr-1" style={{ height: '18px', width: '18px' }} /> : null}
+    {details.noDerivatives ? <Icon src={Nd} className="mr-1" style={{ height: '18px', width: '18px' }} /> : null}
+    {details.shareAlike ? <Icon src={Sa} className="mr-1" style={{ height: '18px', width: '18px' }} /> : null}
+    {license === LicenseTypes.allRightsReserved
+      ? <div className="small mx-1.5"><FormattedMessage {...messages.allRightsReservedIconsLabel} /></div>
+      : null}
+    {license === LicenseTypes.creativeCommons
+      ? <div className="small mx-1.5"><FormattedMessage {...messages.creativeCommonsIconsLabel} /></div>
+      : null}
+  </div>
+);
+
+LicenseBlurb.propTypes = {
+  license: PropTypes.string.isRequired,
+  details: PropTypes.shape({
+    attribution: PropTypes.bool.isRequired,
+    noncommercial: PropTypes.bool.isRequired,
+    noDerivatives: PropTypes.bool.isRequired,
+    shareAlike: PropTypes.bool.isRequired,
+  }).isRequired,
+};
+
+export const LicenseBlurbInternal = LicenseBlurb; // For testing only
+export default injectIntl(LicenseBlurb);
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseBlurb.test.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseBlurb.test.jsx
new file mode 100644
index 0000000000..f55458d859
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseBlurb.test.jsx
@@ -0,0 +1,45 @@
+import 'CourseAuthoring/editors/setupEditorTest';
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+
+import { LicenseBlurbInternal as LicenseBlurb } from './LicenseBlurb';
+
+describe('LicenseBlurb', () => {
+  const props = {
+    license: 'all-rights-reserved',
+    details: {},
+  };
+
+  describe('snapshots', () => {
+    test('snapshots: renders as expected with default props', () => {
+      expect(
+        shallow(<LicenseBlurb {...props} />).snapshot,
+      ).toMatchSnapshot();
+    });
+    test('snapshots: renders as expected with license equal to Creative Commons', () => {
+      expect(
+        shallow(<LicenseBlurb {...props} license="creative-commons" />).snapshot,
+      ).toMatchSnapshot();
+    });
+    test('snapshots: renders as expected when details.attribution equal true', () => {
+      expect(
+        shallow(<LicenseBlurb {...props} license="creative-commons" details={{ attribution: true }} />).snapshot,
+      ).toMatchSnapshot();
+    });
+    test('snapshots: renders as expected when details.attribution and details.noncommercial equal true', () => {
+      expect(
+        shallow(<LicenseBlurb {...props} license="creative-commons" details={{ attribution: true, noncommercial: true }} />).snapshot,
+      ).toMatchSnapshot();
+    });
+    test('snapshots: renders as expected when details.attribution and details.noDerivatives equal true', () => {
+      expect(
+        shallow(<LicenseBlurb {...props} license="creative-commons" details={{ attribution: true, noDerivatives: true }} />).snapshot,
+      ).toMatchSnapshot();
+    });
+    test('snapshots: renders as expected when details.attribution and details.shareAlike equal true', () => {
+      expect(
+        shallow(<LicenseBlurb {...props} license="creative-commons" details={{ attribution: true, shareAlike: true }} />).snapshot,
+      ).toMatchSnapshot();
+    });
+  });
+});
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseDetails.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseDetails.jsx
new file mode 100644
index 0000000000..375c287b02
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseDetails.jsx
@@ -0,0 +1,170 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import {
+  FormattedMessage,
+  injectIntl,
+} from '@edx/frontend-platform/i18n';
+import {
+  ActionRow,
+  CheckboxControl,
+  Form,
+  Icon,
+  Stack,
+} from '@openedx/paragon';
+import {
+  Attribution,
+  Nd,
+  Sa,
+  Nc,
+} from '@openedx/paragon/icons';
+
+import { actions } from '../../../../../../data/redux';
+import { LicenseLevel, LicenseTypes } from '../../../../../../data/constants/licenses';
+import messages from './messages';
+
+const LicenseDetails = ({
+  license,
+  details,
+  level,
+  // redux
+  updateField,
+}) => (
+  level !== LicenseLevel.course && details && license !== 'select' ? (
+    <div className="x-small border-primary-100 border-bottom m-0 pr-1">
+      <Form.Group className="pb-2">
+        <div className="mb-3">
+          <FormattedMessage {...messages.detailsSubsectionTitle} />
+        </div>
+        {license === LicenseTypes.allRightsReserved ? (
+          <div className="mt-2">
+            <FormattedMessage {...messages.allRightsReservedSectionMessage} />
+          </div>
+        ) : null}
+        {license === LicenseTypes.creativeCommons
+          ? (
+            <Stack gap={4}>
+              <div className="border-primary-100 border-bottom pb-4">
+                <Form.Group>
+                  <ActionRow>
+                    <Icon className="text-primary-500" src={Attribution} />
+                    <Form.Label className="my-0 text-primary-500">
+                      <FormattedMessage {...messages.attributionCheckboxLabel} />
+                    </Form.Label>
+                    <ActionRow.Spacer />
+                    <CheckboxControl
+                      disabled
+                      checked
+                      aria-label="Checkbox"
+                    />
+                  </ActionRow>
+                </Form.Group>
+                <div>
+                  <FormattedMessage {...messages.attributionSectionDescription} />
+                </div>
+              </div>
+              <div className="border-primary-100 border-bottom pb-4">
+                <Form.Group>
+                  <ActionRow>
+                    <Icon src={Nc} />
+                    <Form.Label className="my-0 text-primary-500">
+                      <FormattedMessage {...messages.noncommercialCheckboxLabel} />
+                    </Form.Label>
+                    <ActionRow.Spacer />
+                    <CheckboxControl
+                      checked={details.noncommercial}
+                      disabled={level === LicenseLevel.course}
+                      onChange={(e) => updateField({
+                        licenseDetails: {
+                          ...details,
+                          noncommercial: e.target.checked,
+                        },
+                      })}
+                      aria-label="Checkbox"
+                    />
+                  </ActionRow>
+                </Form.Group>
+                <div>
+                  <FormattedMessage {...messages.noncommercialSectionDescription} />
+                </div>
+              </div>
+              <div className="border-primary-100 border-bottom pb-4">
+                <Form.Group>
+                  <ActionRow>
+                    <Icon src={Nd} />
+                    <Form.Label className="my-0 text-primary-500">
+                      <FormattedMessage {...messages.noDerivativesCheckboxLabel} />
+                    </Form.Label>
+                    <ActionRow.Spacer />
+                    <CheckboxControl
+                      checked={details.noDerivatives}
+                      disabled={level === LicenseLevel.course}
+                      onChange={(e) => updateField({
+                        licenseDetails: {
+                          ...details,
+                          noDerivatives: e.target.checked,
+                          shareAlike: e.target.checked ? false : details.shareAlike,
+                        },
+                      })}
+                      aria-label="Checkbox"
+                    />
+                  </ActionRow>
+                </Form.Group>
+                <div>
+                  <FormattedMessage {...messages.noDerivativesSectionDescription} />
+                </div>
+              </div>
+              <div>
+                <Form.Group>
+                  <ActionRow>
+                    <Icon src={Sa} />
+                    <Form.Label className="my-0 text-primary-500">
+                      <FormattedMessage {...messages.shareAlikeCheckboxLabel} />
+                    </Form.Label>
+                    <ActionRow.Spacer />
+                    <CheckboxControl
+                      checked={details.shareAlike}
+                      disabled={level === LicenseLevel.course}
+                      onChange={(e) => updateField({
+                        licenseDetails: {
+                          ...details,
+                          shareAlike: e.target.checked,
+                          noDerivatives: e.target.checked ? false : details.noDerivatives,
+                        },
+                      })}
+                      aria-label="Checkbox"
+                    />
+                  </ActionRow>
+                </Form.Group>
+                <div>
+                  <FormattedMessage {...messages.shareAlikeSectionDescription} />
+                </div>
+              </div>
+            </Stack>
+          ) : null}
+      </Form.Group>
+    </div>
+  ) : null
+);
+
+LicenseDetails.propTypes = {
+  license: PropTypes.string.isRequired,
+  details: PropTypes.shape({
+    attribution: PropTypes.bool.isRequired,
+    noncommercial: PropTypes.bool.isRequired,
+    noDerivatives: PropTypes.bool.isRequired,
+    shareAlike: PropTypes.bool.isRequired,
+  }).isRequired,
+  level: PropTypes.string.isRequired,
+  // redux
+  updateField: PropTypes.func.isRequired,
+};
+
+export const mapStateToProps = () => ({});
+
+export const mapDispatchToProps = (dispatch) => ({
+  updateField: (stateUpdate) => dispatch(actions.video.updateField(stateUpdate)),
+});
+
+export const LicenseDetailsInternal = LicenseDetails; // For testing only
+export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(LicenseDetails));
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseDetails.test.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseDetails.test.jsx
new file mode 100644
index 0000000000..48e4abdc38
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseDetails.test.jsx
@@ -0,0 +1,72 @@
+import 'CourseAuthoring/editors/setupEditorTest';
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+
+import { actions } from '../../../../../../data/redux';
+import { LicenseDetailsInternal as LicenseDetails, mapStateToProps, mapDispatchToProps } from './LicenseDetails';
+
+jest.mock('react', () => {
+  const updateState = jest.fn();
+  return {
+    ...jest.requireActual('react'),
+    updateState,
+    useContext: jest.fn(() => ({ license: ['error.license', jest.fn().mockName('error.setLicense')] })),
+  };
+});
+
+jest.mock('../../../../../../data/redux', () => ({
+  actions: {
+    video: {
+      updateField: jest.fn().mockName('actions.video.updateField'),
+    },
+  },
+}));
+
+describe('LicenseDetails', () => {
+  const props = {
+    license: null,
+    details: {},
+    level: 'course',
+    updateField: jest.fn().mockName('args.updateField'),
+  };
+
+  describe('snapshots', () => {
+    test('snapshots: renders as expected with default props', () => {
+      expect(
+        shallow(<LicenseDetails {...props} />).snapshot,
+      ).toMatchSnapshot();
+    });
+    test('snapshots: renders as expected with level set to library', () => {
+      expect(
+        shallow(<LicenseDetails {...props} level="library" />).snapshot,
+      ).toMatchSnapshot();
+    });
+    test('snapshots: renders as expected with level set to block and license set to select', () => {
+      expect(
+        shallow(<LicenseDetails {...props} level="block" license="select" />).snapshot,
+      ).toMatchSnapshot();
+    });
+    test('snapshots: renders as expected with level set to block and license set to all rights reserved', () => {
+      expect(
+        shallow(<LicenseDetails {...props} level="block" license="all-rights-reserved" />).snapshot,
+      ).toMatchSnapshot();
+    });
+    test('snapshots: renders as expected with level set to block and license set to Creative Commons', () => {
+      expect(
+        shallow(<LicenseDetails {...props} level="block" license="creative-commons" />).snapshot,
+      ).toMatchSnapshot();
+    });
+  });
+  describe('mapStateToProps', () => {
+    const testState = { A: 'pple', B: 'anana', C: 'ucumber' };
+    test('mapStateToProps equals an empty object', () => {
+      expect(mapStateToProps(testState)).toEqual({});
+    });
+  });
+  describe('mapDispatchToProps', () => {
+    const dispatch = jest.fn();
+    test('updateField from actions.video.updateField', () => {
+      expect(mapDispatchToProps.updateField).toEqual(dispatch(actions.video.updateField));
+    });
+  });
+});
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseDisplay.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseDisplay.jsx
new file mode 100644
index 0000000000..a67d406079
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseDisplay.jsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import {
+  FormattedMessage,
+  injectIntl,
+} from '@edx/frontend-platform/i18n';
+import {
+  Stack,
+  Hyperlink,
+} from '@openedx/paragon';
+
+import { LicenseTypes } from '../../../../../../data/constants/licenses';
+
+import LicenseBlurb from './LicenseBlurb';
+import messages from './messages';
+
+const LicenseDisplay = ({
+  license,
+  details,
+  licenseDescription,
+}) => {
+  if (license !== LicenseTypes.select) {
+    return (
+      <Stack gap={3}>
+        <div className="x-small"><FormattedMessage {...messages.displaySubsectionTitle} /></div>
+        <div className="small border border-gray-300 rounded p-4">
+          <LicenseBlurb license={license} details={details} />
+          <div className="x-small mt-3">{licenseDescription}</div>
+        </div>
+        {license === LicenseTypes.creativeCommons && (
+          <Hyperlink
+            className="text-primary-500 x-small"
+            destination="https://creativecommons.org/about"
+            target="_blank"
+          >
+            <FormattedMessage {...messages.viewLicenseDetailsLabel} />
+          </Hyperlink>
+        )}
+      </Stack>
+    );
+  }
+  return null;
+};
+
+LicenseDisplay.propTypes = {
+  license: PropTypes.string.isRequired,
+  details: PropTypes.shape({
+    attribution: PropTypes.bool.isRequired,
+    noncommercial: PropTypes.bool.isRequired,
+    noDerivatives: PropTypes.bool.isRequired,
+    shareAlike: PropTypes.bool.isRequired,
+  }).isRequired,
+  level: PropTypes.string.isRequired,
+  licenseDescription: PropTypes.string.isRequired,
+};
+
+export const LicenseDisplayInternal = LicenseDisplay; // For testing only
+export default injectIntl(LicenseDisplay);
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseDisplay.test.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseDisplay.test.jsx
new file mode 100644
index 0000000000..1111694998
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseDisplay.test.jsx
@@ -0,0 +1,47 @@
+import 'CourseAuthoring/editors/setupEditorTest';
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+
+import { LicenseDisplayInternal as LicenseDisplay } from './LicenseDisplay';
+
+jest.mock('react', () => ({
+  ...jest.requireActual('react'),
+  useContext: jest.fn(() => ({ license: ['error.license', jest.fn().mockName('error.setLicense')] })),
+}));
+
+describe('LicenseDisplay', () => {
+  const props = {
+    license: 'all-rights-reserved',
+    details: {},
+    licenseDescription: 'FormattedMessage component with license description',
+    level: 'course',
+  };
+
+  describe('snapshots', () => {
+    test('snapshots: renders as expected with default props', () => {
+      expect(
+        shallow(<LicenseDisplay {...props} />).snapshot,
+      ).toMatchSnapshot();
+    });
+    test('snapshots: renders as expected with level set to library', () => {
+      expect(
+        shallow(<LicenseDisplay {...props} level="library" />).snapshot,
+      ).toMatchSnapshot();
+    });
+    test('snapshots: renders as expected with level set to block', () => {
+      expect(
+        shallow(<LicenseDisplay {...props} level="block" />).snapshot,
+      ).toMatchSnapshot();
+    });
+    test('snapshots: renders as expected with level set to block and license set to select', () => {
+      expect(
+        shallow(<LicenseDisplay {...props} level="block" license="select" />).snapshot,
+      ).toMatchSnapshot();
+    });
+    test('snapshots: renders as expected with level set to block and license set to Creative Commons', () => {
+      expect(
+        shallow(<LicenseDisplay {...props} level="block" license="creative-commons" />).snapshot,
+      ).toMatchSnapshot();
+    });
+  });
+});
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseSelector.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseSelector.jsx
new file mode 100644
index 0000000000..7e468982b9
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseSelector.jsx
@@ -0,0 +1,93 @@
+import React from 'react';
+import { connect, useDispatch } from 'react-redux';
+import PropTypes from 'prop-types';
+import {
+  FormattedMessage,
+  injectIntl,
+  intlShape,
+} from '@edx/frontend-platform/i18n';
+import {
+  ActionRow,
+  Form,
+  Icon,
+  IconButtonWithTooltip,
+} from '@openedx/paragon';
+import { DeleteOutline } from '@openedx/paragon/icons';
+
+import { actions, selectors } from '../../../../../../data/redux';
+import * as hooks from './hooks';
+import messages from './messages';
+import { LicenseLevel, LicenseNames, LicenseTypes } from '../../../../../../data/constants/licenses';
+
+const LicenseSelector = ({
+  license,
+  level,
+  // injected
+  intl,
+  // redux
+  courseLicenseType,
+  updateField,
+}) => {
+  const { levelDescription } = hooks.determineText({ level });
+  const onLicenseChange = hooks.onSelectLicense({ dispatch: useDispatch() });
+  const ref = React.useRef();
+  return (
+    <>
+      <ActionRow>
+        <Form.Control
+          as="select"
+          className="w-100 m-0 p-0"
+          ref={ref}
+          defaultValue={license}
+          disabled={level === LicenseLevel.course}
+          floatingLabel={intl.formatMessage(messages.licenseTypeLabel)}
+          onChange={(e) => onLicenseChange(e.target.value)}
+        >
+          {Object.entries(LicenseNames).map(([key, text]) => {
+            if (license === key) { return (<option value={LicenseTypes[key]} selected>{text}</option>); }
+            if (key === LicenseTypes.select) { return (<option hidden>{text}</option>); }
+            return (<option value={LicenseTypes[key]}>{text}</option>);
+          })}
+        </Form.Control>
+        {level !== LicenseLevel.course ? (
+          <>
+            <ActionRow.Spacer />
+            <IconButtonWithTooltip
+              iconAs={Icon}
+              src={DeleteOutline}
+              onClick={() => {
+                ref.current.value = courseLicenseType;
+                updateField({ licenseType: '', licenseDetails: {} });
+              }}
+              tooltipPlacement="top"
+              tooltipContent={<FormattedMessage {...messages.deleteLicenseSelection} />}
+            />
+          </>
+        ) : null }
+      </ActionRow>
+      <div className="x-small mt-3">{levelDescription}</div>
+      {license === LicenseTypes.select ? null : <div className="border-primary-100 mt-3 border-bottom" />}
+    </>
+  );
+};
+
+LicenseSelector.propTypes = {
+  license: PropTypes.string.isRequired,
+  level: PropTypes.string.isRequired,
+  // injected
+  intl: intlShape.isRequired,
+  // redux
+  courseLicenseType: PropTypes.string.isRequired,
+  updateField: PropTypes.func.isRequired,
+};
+
+export const mapStateToProps = (state) => ({
+  courseLicenseType: selectors.video.courseLicenseType(state),
+});
+
+export const mapDispatchToProps = (dispatch) => ({
+  updateField: (stateUpdate) => dispatch(actions.video.updateField(stateUpdate)),
+});
+
+export const LicenseSelectorInternal = LicenseSelector; // For testing only
+export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(LicenseSelector));
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseSelector.test.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseSelector.test.jsx
new file mode 100644
index 0000000000..2b6ee9a0ed
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseSelector.test.jsx
@@ -0,0 +1,84 @@
+import 'CourseAuthoring/editors/setupEditorTest';
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+
+import { formatMessage } from '../../../../../../testUtils';
+import { actions, selectors } from '../../../../../../data/redux';
+import { LicenseSelectorInternal as LicenseSelector, mapStateToProps, mapDispatchToProps } from './LicenseSelector';
+
+jest.mock('react', () => {
+  const updateState = jest.fn();
+  return {
+    ...jest.requireActual('react'),
+    updateState,
+    useContext: jest.fn(() => ({ license: ['error.license', jest.fn().mockName('error.setLicense')] })),
+  };
+});
+
+jest.mock('react-redux', () => {
+  const dispatchFn = jest.fn();
+  return {
+    ...jest.requireActual('react-redux'),
+    dispatch: dispatchFn,
+    useDispatch: jest.fn(() => dispatchFn),
+  };
+});
+
+jest.mock('../../../../../../data/redux', () => ({
+  actions: {
+    video: {
+      updateField: jest.fn().mockName('actions.video.updateField'),
+    },
+  },
+  selectors: {
+    video: {
+      courseLicenseType: jest.fn(state => ({ courseLicenseType: state })),
+    },
+  },
+}));
+
+describe('LicenseSelector', () => {
+  const props = {
+    intl: { formatMessage },
+    license: 'all-rights-reserved',
+    level: 'course',
+    courseLicenseType: 'all-rights-reserved',
+    updateField: jest.fn().mockName('args.updateField'),
+  };
+  describe('snapshots', () => {
+    test('snapshots: renders as expected with default props', () => {
+      expect(
+        shallow(<LicenseSelector {...props} />).snapshot,
+      ).toMatchSnapshot();
+    });
+    test('snapshots: renders as expected with library level', () => {
+      expect(
+        shallow(<LicenseSelector {...props} level="library" />).snapshot,
+      ).toMatchSnapshot();
+    });
+    test('snapshots: renders as expected with block level', () => {
+      expect(
+        shallow(<LicenseSelector {...props} level="block" />).snapshot,
+      ).toMatchSnapshot();
+    });
+    test('snapshots: renders as expected with no license', () => {
+      expect(
+        shallow(<LicenseSelector {...props} license="" />).snapshot,
+      ).toMatchSnapshot();
+    });
+  });
+  describe('mapStateToProps', () => {
+    const testState = { A: 'pple', B: 'anana', C: 'ucumber' };
+    test('courseLicenseType from video.courseLicenseType', () => {
+      expect(
+        mapStateToProps(testState).courseLicenseType,
+      ).toEqual(selectors.video.courseLicenseType(testState));
+    });
+  });
+  describe('mapDispatchToProps', () => {
+    const dispatch = jest.fn();
+    test('updateField from actions.video.updateField', () => {
+      expect(mapDispatchToProps.updateField).toEqual(dispatch(actions.video.updateField));
+    });
+  });
+});
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/__snapshots__/LicenseBlurb.test.jsx.snap b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/__snapshots__/LicenseBlurb.test.jsx.snap
new file mode 100644
index 0000000000..03a8277aff
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/__snapshots__/LicenseBlurb.test.jsx.snap
@@ -0,0 +1,214 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`LicenseBlurb snapshots snapshots: renders as expected when details.attribution and details.noDerivatives equal true 1`] = `
+<div
+  className="d-flex flex-row align-items-center mt-2"
+>
+  <Icon
+    className="mr-1"
+    style={
+      {
+        "height": "18px",
+        "width": "18px",
+      }
+    }
+  />
+  <Icon
+    className="mr-1 text-primary-300"
+    style={
+      {
+        "height": "18px",
+        "width": "18px",
+      }
+    }
+  />
+  <Icon
+    className="mr-1"
+    style={
+      {
+        "height": "18px",
+        "width": "18px",
+      }
+    }
+  />
+  <div
+    className="small mx-1.5"
+  >
+    <FormattedMessage
+      defaultMessage="Some Rights Reserved"
+      description="Label for row of creative common icons"
+      id="authoring.videoeditor.license.creativeCommonsIcons.label"
+    />
+  </div>
+</div>
+`;
+
+exports[`LicenseBlurb snapshots snapshots: renders as expected when details.attribution and details.noncommercial equal true 1`] = `
+<div
+  className="d-flex flex-row align-items-center mt-2"
+>
+  <Icon
+    className="mr-1"
+    style={
+      {
+        "height": "18px",
+        "width": "18px",
+      }
+    }
+  />
+  <Icon
+    className="mr-1 text-primary-300"
+    style={
+      {
+        "height": "18px",
+        "width": "18px",
+      }
+    }
+  />
+  <Icon
+    className="mr-1"
+    style={
+      {
+        "height": "18px",
+        "width": "18px",
+      }
+    }
+  />
+  <div
+    className="small mx-1.5"
+  >
+    <FormattedMessage
+      defaultMessage="Some Rights Reserved"
+      description="Label for row of creative common icons"
+      id="authoring.videoeditor.license.creativeCommonsIcons.label"
+    />
+  </div>
+</div>
+`;
+
+exports[`LicenseBlurb snapshots snapshots: renders as expected when details.attribution and details.shareAlike equal true 1`] = `
+<div
+  className="d-flex flex-row align-items-center mt-2"
+>
+  <Icon
+    className="mr-1"
+    style={
+      {
+        "height": "18px",
+        "width": "18px",
+      }
+    }
+  />
+  <Icon
+    className="mr-1 text-primary-300"
+    style={
+      {
+        "height": "18px",
+        "width": "18px",
+      }
+    }
+  />
+  <Icon
+    className="mr-1"
+    style={
+      {
+        "height": "18px",
+        "width": "18px",
+      }
+    }
+  />
+  <div
+    className="small mx-1.5"
+  >
+    <FormattedMessage
+      defaultMessage="Some Rights Reserved"
+      description="Label for row of creative common icons"
+      id="authoring.videoeditor.license.creativeCommonsIcons.label"
+    />
+  </div>
+</div>
+`;
+
+exports[`LicenseBlurb snapshots snapshots: renders as expected when details.attribution equal true 1`] = `
+<div
+  className="d-flex flex-row align-items-center mt-2"
+>
+  <Icon
+    className="mr-1"
+    style={
+      {
+        "height": "18px",
+        "width": "18px",
+      }
+    }
+  />
+  <Icon
+    className="mr-1 text-primary-300"
+    style={
+      {
+        "height": "18px",
+        "width": "18px",
+      }
+    }
+  />
+  <div
+    className="small mx-1.5"
+  >
+    <FormattedMessage
+      defaultMessage="Some Rights Reserved"
+      description="Label for row of creative common icons"
+      id="authoring.videoeditor.license.creativeCommonsIcons.label"
+    />
+  </div>
+</div>
+`;
+
+exports[`LicenseBlurb snapshots snapshots: renders as expected with default props 1`] = `
+<div
+  className="d-flex flex-row align-items-center mt-2"
+>
+  <Icon
+    className="mr-1"
+    style={
+      {
+        "height": "18px",
+        "width": "18px",
+      }
+    }
+  />
+  <div
+    className="small mx-1.5"
+  >
+    <FormattedMessage
+      defaultMessage="All Rights Reserved"
+      description="Label for row of all rights reserved icons"
+      id="authoring.videoeditor.license.allRightsReservedIcons.label"
+    />
+  </div>
+</div>
+`;
+
+exports[`LicenseBlurb snapshots snapshots: renders as expected with license equal to Creative Commons 1`] = `
+<div
+  className="d-flex flex-row align-items-center mt-2"
+>
+  <Icon
+    className="mr-1"
+    style={
+      {
+        "height": "18px",
+        "width": "18px",
+      }
+    }
+  />
+  <div
+    className="small mx-1.5"
+  >
+    <FormattedMessage
+      defaultMessage="Some Rights Reserved"
+      description="Label for row of creative common icons"
+      id="authoring.videoeditor.license.creativeCommonsIcons.label"
+    />
+  </div>
+</div>
+`;
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/__snapshots__/LicenseDetails.test.jsx.snap b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/__snapshots__/LicenseDetails.test.jsx.snap
new file mode 100644
index 0000000000..046cc017d3
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/__snapshots__/LicenseDetails.test.jsx.snap
@@ -0,0 +1,202 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`LicenseDetails snapshots snapshots: renders as expected with default props 1`] = `null`;
+
+exports[`LicenseDetails snapshots snapshots: renders as expected with level set to block and license set to Creative Commons 1`] = `
+<div
+  className="x-small border-primary-100 border-bottom m-0 pr-1"
+>
+  <Form.Group
+    className="pb-2"
+  >
+    <div
+      className="mb-3"
+    >
+      <FormattedMessage
+        defaultMessage="License Details"
+        description="Title for license detatils subsection"
+        id="authoring.videoeditor.license.detailsSubsection.title"
+      />
+    </div>
+    <Stack
+      gap={4}
+    >
+      <div
+        className="border-primary-100 border-bottom pb-4"
+      >
+        <Form.Group>
+          <ActionRow>
+            <Icon
+              className="text-primary-500"
+            />
+            <Form.Label
+              className="my-0 text-primary-500"
+            >
+              <FormattedMessage
+                defaultMessage="Attribution"
+                description="Label for attribution checkbox"
+                id="authoring.videoeditor.license.attributionCheckboxLabel"
+              />
+            </Form.Label>
+            <ActionRow.Spacer />
+            <CheckboxControl
+              aria-label="Checkbox"
+              checked={true}
+              disabled={true}
+            />
+          </ActionRow>
+        </Form.Group>
+        <div>
+          <FormattedMessage
+            defaultMessage="Allow others to copy, distribute, display and perform your copyrighted work but only if they give credit the way you request. Currently, this option is required."
+            description="Attribution card section defining attribution license"
+            id="authoring.videoeditor.license.attributionSectionDescription"
+          />
+        </div>
+      </div>
+      <div
+        className="border-primary-100 border-bottom pb-4"
+      >
+        <Form.Group>
+          <ActionRow>
+            <Icon />
+            <Form.Label
+              className="my-0 text-primary-500"
+            >
+              <FormattedMessage
+                defaultMessage="Noncommercial"
+                description="Label for noncommercial checkbox"
+                id="authoring.videoeditor.license.noncommercialCheckboxLabel"
+              />
+            </Form.Label>
+            <ActionRow.Spacer />
+            <CheckboxControl
+              aria-label="Checkbox"
+              disabled={false}
+              onChange={[Function]}
+            />
+          </ActionRow>
+        </Form.Group>
+        <div>
+          <FormattedMessage
+            defaultMessage="Allow others to copy, distribute, display and perform your work - and derivative works based upon it - but for noncommercial purposes only."
+            description="Noncommercial card section defining noncommercial license"
+            id="authoring.videoeditor.license.noncommercialSectionDescription"
+          />
+        </div>
+      </div>
+      <div
+        className="border-primary-100 border-bottom pb-4"
+      >
+        <Form.Group>
+          <ActionRow>
+            <Icon />
+            <Form.Label
+              className="my-0 text-primary-500"
+            >
+              <FormattedMessage
+                defaultMessage="No Derivatives"
+                description="Label for No Derivatives checkbox"
+                id="authoring.videoeditor.license.noDerivativesCheckboxLabel"
+              />
+            </Form.Label>
+            <ActionRow.Spacer />
+            <CheckboxControl
+              aria-label="Checkbox"
+              disabled={false}
+              onChange={[Function]}
+            />
+          </ActionRow>
+        </Form.Group>
+        <div>
+          <FormattedMessage
+            defaultMessage="Allow others to copy, distribute, display and perform only verbatim copies of your work, not derivative works based upon it. This option is incompatible with "Share Alike"."
+            description="No Derivatives card section defining no derivatives license"
+            id="authoring.videoeditor.license.noDerivativesSectionDescription"
+          />
+        </div>
+      </div>
+      <div>
+        <Form.Group>
+          <ActionRow>
+            <Icon />
+            <Form.Label
+              className="my-0 text-primary-500"
+            >
+              <FormattedMessage
+                defaultMessage="Share Alike"
+                description="Label for Share Alike checkbox"
+                id="authoring.videoeditor.license.shareAlikeCheckboxLabel"
+              />
+            </Form.Label>
+            <ActionRow.Spacer />
+            <CheckboxControl
+              aria-label="Checkbox"
+              disabled={false}
+              onChange={[Function]}
+            />
+          </ActionRow>
+        </Form.Group>
+        <div>
+          <FormattedMessage
+            defaultMessage="Allow others to distribute derivative works only under a license identical to the license that governs your work. This option is incompatible with "No Derivatives"."
+            description="Share Alike card section defining no derivatives license"
+            id="authoring.videoeditor.license.shareAlikeSectionDescription"
+          />
+        </div>
+      </div>
+    </Stack>
+  </Form.Group>
+</div>
+`;
+
+exports[`LicenseDetails snapshots snapshots: renders as expected with level set to block and license set to all rights reserved 1`] = `
+<div
+  className="x-small border-primary-100 border-bottom m-0 pr-1"
+>
+  <Form.Group
+    className="pb-2"
+  >
+    <div
+      className="mb-3"
+    >
+      <FormattedMessage
+        defaultMessage="License Details"
+        description="Title for license detatils subsection"
+        id="authoring.videoeditor.license.detailsSubsection.title"
+      />
+    </div>
+    <div
+      className="mt-2"
+    >
+      <FormattedMessage
+        defaultMessage="You reserve all rights for your work."
+        description="All Rights Reserved section message"
+        id="authoring.videoeditor.license.allRightsReservedSectionMessage"
+      />
+    </div>
+  </Form.Group>
+</div>
+`;
+
+exports[`LicenseDetails snapshots snapshots: renders as expected with level set to block and license set to select 1`] = `null`;
+
+exports[`LicenseDetails snapshots snapshots: renders as expected with level set to library 1`] = `
+<div
+  className="x-small border-primary-100 border-bottom m-0 pr-1"
+>
+  <Form.Group
+    className="pb-2"
+  >
+    <div
+      className="mb-3"
+    >
+      <FormattedMessage
+        defaultMessage="License Details"
+        description="Title for license detatils subsection"
+        id="authoring.videoeditor.license.detailsSubsection.title"
+      />
+    </div>
+  </Form.Group>
+</div>
+`;
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/__snapshots__/LicenseDisplay.test.jsx.snap b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/__snapshots__/LicenseDisplay.test.jsx.snap
new file mode 100644
index 0000000000..655802d54c
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/__snapshots__/LicenseDisplay.test.jsx.snap
@@ -0,0 +1,130 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`LicenseDisplay snapshots snapshots: renders as expected with default props 1`] = `
+<Stack
+  gap={3}
+>
+  <div
+    className="x-small"
+  >
+    <FormattedMessage
+      defaultMessage="License Display"
+      description="Title for license display subsection"
+      id="authoring.videoeditor.license.displaySubsection.title"
+    />
+  </div>
+  <div
+    className="small border border-gray-300 rounded p-4"
+  >
+    <injectIntl(ShimmedIntlComponent)
+      details={{}}
+      license="all-rights-reserved"
+    />
+    <div
+      className="x-small mt-3"
+    >
+      FormattedMessage component with license description
+    </div>
+  </div>
+</Stack>
+`;
+
+exports[`LicenseDisplay snapshots snapshots: renders as expected with level set to block 1`] = `
+<Stack
+  gap={3}
+>
+  <div
+    className="x-small"
+  >
+    <FormattedMessage
+      defaultMessage="License Display"
+      description="Title for license display subsection"
+      id="authoring.videoeditor.license.displaySubsection.title"
+    />
+  </div>
+  <div
+    className="small border border-gray-300 rounded p-4"
+  >
+    <injectIntl(ShimmedIntlComponent)
+      details={{}}
+      license="all-rights-reserved"
+    />
+    <div
+      className="x-small mt-3"
+    >
+      FormattedMessage component with license description
+    </div>
+  </div>
+</Stack>
+`;
+
+exports[`LicenseDisplay snapshots snapshots: renders as expected with level set to block and license set to Creative Commons 1`] = `
+<Stack
+  gap={3}
+>
+  <div
+    className="x-small"
+  >
+    <FormattedMessage
+      defaultMessage="License Display"
+      description="Title for license display subsection"
+      id="authoring.videoeditor.license.displaySubsection.title"
+    />
+  </div>
+  <div
+    className="small border border-gray-300 rounded p-4"
+  >
+    <injectIntl(ShimmedIntlComponent)
+      details={{}}
+      license="creative-commons"
+    />
+    <div
+      className="x-small mt-3"
+    >
+      FormattedMessage component with license description
+    </div>
+  </div>
+  <Hyperlink
+    className="text-primary-500 x-small"
+    destination="https://creativecommons.org/about"
+    target="_blank"
+  >
+    <FormattedMessage
+      defaultMessage="View license details"
+      description="Label for view license details button"
+      id="authoring.videoeditor.license.viewLicenseDetailsLabel.label"
+    />
+  </Hyperlink>
+</Stack>
+`;
+
+exports[`LicenseDisplay snapshots snapshots: renders as expected with level set to block and license set to select 1`] = `null`;
+
+exports[`LicenseDisplay snapshots snapshots: renders as expected with level set to library 1`] = `
+<Stack
+  gap={3}
+>
+  <div
+    className="x-small"
+  >
+    <FormattedMessage
+      defaultMessage="License Display"
+      description="Title for license display subsection"
+      id="authoring.videoeditor.license.displaySubsection.title"
+    />
+  </div>
+  <div
+    className="small border border-gray-300 rounded p-4"
+  >
+    <injectIntl(ShimmedIntlComponent)
+      details={{}}
+      license="all-rights-reserved"
+    />
+    <div
+      className="x-small mt-3"
+    >
+      FormattedMessage component with license description
+    </div>
+  </div>
+</Stack>
+`;
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/__snapshots__/LicenseSelector.test.jsx.snap b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/__snapshots__/LicenseSelector.test.jsx.snap
new file mode 100644
index 0000000000..558ffc81da
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/__snapshots__/LicenseSelector.test.jsx.snap
@@ -0,0 +1,203 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`LicenseSelector snapshots snapshots: renders as expected with block level 1`] = `
+<Fragment>
+  <ActionRow>
+    <Form.Control
+      as="select"
+      className="w-100 m-0 p-0"
+      defaultValue="all-rights-reserved"
+      disabled={false}
+      floatingLabel="License Type"
+      onChange={[Function]}
+    >
+      <option
+        hidden={true}
+      >
+        Select
+      </option>
+      <option
+        value="all-rights-reserved"
+      >
+        All Rights Reserved
+      </option>
+      <option
+        value="creative-commons"
+      >
+        Creative Commons
+      </option>
+    </Form.Control>
+    <Fragment>
+      <ActionRow.Spacer />
+      <IconButtonWithTooltip
+        iconAs="Icon"
+        onClick={[Function]}
+        tooltipContent={
+          <FormattedMessage
+            defaultMessage="Clear and apply the course-level license"
+            description="Message presented to user for action to delete license selection"
+            id="authoring.videoeditor.license.deleteLicenseSelection"
+          />
+        }
+        tooltipPlacement="top"
+      />
+    </Fragment>
+  </ActionRow>
+  <div
+    className="x-small mt-3"
+  >
+    <FormattedMessage
+      defaultMessage="This license is set specifically for this video"
+      description="Helper text for license type when choosing for a spcific video"
+      id="authoring.videoeditor.license.defaultLevelDescription.helperText"
+    />
+  </div>
+  <div
+    className="border-primary-100 mt-3 border-bottom"
+  />
+</Fragment>
+`;
+
+exports[`LicenseSelector snapshots snapshots: renders as expected with default props 1`] = `
+<Fragment>
+  <ActionRow>
+    <Form.Control
+      as="select"
+      className="w-100 m-0 p-0"
+      defaultValue="all-rights-reserved"
+      disabled={true}
+      floatingLabel="License Type"
+      onChange={[Function]}
+    >
+      <option
+        hidden={true}
+      >
+        Select
+      </option>
+      <option
+        value="all-rights-reserved"
+      >
+        All Rights Reserved
+      </option>
+      <option
+        value="creative-commons"
+      >
+        Creative Commons
+      </option>
+    </Form.Control>
+  </ActionRow>
+  <div
+    className="x-small mt-3"
+  >
+    <FormattedMessage
+      defaultMessage="This license currently set at the course level"
+      description="Helper text for license type when using course license"
+      id="authoring.videoeditor.license.courseLevelDescription.helperText"
+    />
+  </div>
+  <div
+    className="border-primary-100 mt-3 border-bottom"
+  />
+</Fragment>
+`;
+
+exports[`LicenseSelector snapshots snapshots: renders as expected with library level 1`] = `
+<Fragment>
+  <ActionRow>
+    <Form.Control
+      as="select"
+      className="w-100 m-0 p-0"
+      defaultValue="all-rights-reserved"
+      disabled={false}
+      floatingLabel="License Type"
+      onChange={[Function]}
+    >
+      <option
+        hidden={true}
+      >
+        Select
+      </option>
+      <option
+        value="all-rights-reserved"
+      >
+        All Rights Reserved
+      </option>
+      <option
+        value="creative-commons"
+      >
+        Creative Commons
+      </option>
+    </Form.Control>
+    <Fragment>
+      <ActionRow.Spacer />
+      <IconButtonWithTooltip
+        iconAs="Icon"
+        onClick={[Function]}
+        tooltipContent={
+          <FormattedMessage
+            defaultMessage="Clear and apply the course-level license"
+            description="Message presented to user for action to delete license selection"
+            id="authoring.videoeditor.license.deleteLicenseSelection"
+          />
+        }
+        tooltipPlacement="top"
+      />
+    </Fragment>
+  </ActionRow>
+  <div
+    className="x-small mt-3"
+  >
+    <FormattedMessage
+      defaultMessage="This license currently set at the library level"
+      description="Helper text for license type when using library license"
+      id="authoring.videoeditor.license.libraryLevelDescription.helperText"
+    />
+  </div>
+  <div
+    className="border-primary-100 mt-3 border-bottom"
+  />
+</Fragment>
+`;
+
+exports[`LicenseSelector snapshots snapshots: renders as expected with no license 1`] = `
+<Fragment>
+  <ActionRow>
+    <Form.Control
+      as="select"
+      className="w-100 m-0 p-0"
+      defaultValue=""
+      disabled={true}
+      floatingLabel="License Type"
+      onChange={[Function]}
+    >
+      <option
+        hidden={true}
+      >
+        Select
+      </option>
+      <option
+        value="all-rights-reserved"
+      >
+        All Rights Reserved
+      </option>
+      <option
+        value="creative-commons"
+      >
+        Creative Commons
+      </option>
+    </Form.Control>
+  </ActionRow>
+  <div
+    className="x-small mt-3"
+  >
+    <FormattedMessage
+      defaultMessage="This license currently set at the course level"
+      description="Helper text for license type when using course license"
+      id="authoring.videoeditor.license.courseLevelDescription.helperText"
+    />
+  </div>
+  <div
+    className="border-primary-100 mt-3 border-bottom"
+  />
+</Fragment>
+`;
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/__snapshots__/index.test.jsx.snap b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/__snapshots__/index.test.jsx.snap
new file mode 100644
index 0000000000..cfc25e06ae
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/__snapshots__/index.test.jsx.snap
@@ -0,0 +1,168 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`LicenseWidget snapshots snapshots: renders as expected with default props 1`] = `
+<injectIntl(ShimmedIntlComponent)
+  subtitle={
+    <div>
+      <injectIntl(ShimmedIntlComponent)
+        details={{}}
+        license="all-rights-reserved"
+      />
+      <div
+        className="x-small mt-2"
+      >
+        <FormattedMessage
+          defaultMessage="This license currently set at the course level"
+          description="Helper text for license type when using course license"
+          id="authoring.videoeditor.license.courseLevelDescription.helperText"
+        />
+      </div>
+    </div>
+  }
+  title="License"
+>
+  <Stack
+    gap={4}
+  >
+    <Fragment>
+      <injectIntl(ShimmedIntlComponent)
+        level="course"
+        license="all-rights-reserved"
+      />
+      <injectIntl(ShimmedIntlComponent)
+        details={{}}
+        level="course"
+        license="all-rights-reserved"
+      />
+      <injectIntl(ShimmedIntlComponent)
+        details={{}}
+        license="all-rights-reserved"
+        licenseDescription={
+          <FormattedMessage
+            defaultMessage="Licenses set at the course level appear at the bottom of courseware pages within your course."
+            description="Message explaining where course level licenses are set"
+            id="authoring.videoeditor.license.courseLicenseDescription.message"
+          />
+        }
+      />
+    </Fragment>
+    <Fragment>
+      <div
+        className="border-primary-100 border-bottom my-2"
+      />
+      <Button
+        className="text-primary-500 font-weight-bold justify-content-start pl-0"
+        onClick={[Function]}
+        size="sm"
+        variant="link"
+      >
+        <FormattedMessage
+          defaultMessage="Add a license for this video"
+          description="Label for add license button"
+          id="authoring.videoeditor.license.add.label"
+        />
+      </Button>
+    </Fragment>
+  </Stack>
+</injectIntl(ShimmedIntlComponent)>
+`;
+
+exports[`LicenseWidget snapshots snapshots: renders as expected with isLibrary true 1`] = `
+<injectIntl(ShimmedIntlComponent)
+  subtitle={
+    <div>
+      <injectIntl(ShimmedIntlComponent)
+        details={{}}
+        license="all-rights-reserved"
+      />
+      <div
+        className="x-small mt-2"
+      >
+        <FormattedMessage
+          defaultMessage="This license currently set at the library level"
+          description="Helper text for license type when using library license"
+          id="authoring.videoeditor.license.libraryLevelDescription.helperText"
+        />
+      </div>
+    </div>
+  }
+  title="License"
+>
+  <Stack
+    gap={4}
+  >
+    <Fragment>
+      <injectIntl(ShimmedIntlComponent)
+        level="library"
+        license="all-rights-reserved"
+      />
+      <injectIntl(ShimmedIntlComponent)
+        details={{}}
+        level="library"
+        license="all-rights-reserved"
+      />
+      <injectIntl(ShimmedIntlComponent)
+        details={{}}
+        license="all-rights-reserved"
+        licenseDescription={
+          <FormattedMessage
+            defaultMessage="Licenses set at the library level appear at the specific library video."
+            description="Message explaining where library level licenses are set"
+            id="authoring.videoeditor.license.libraryLicenseDescription.message"
+          />
+        }
+      />
+    </Fragment>
+  </Stack>
+</injectIntl(ShimmedIntlComponent)>
+`;
+
+exports[`LicenseWidget snapshots snapshots: renders as expected with licenseType defined 1`] = `
+<injectIntl(ShimmedIntlComponent)
+  subtitle={
+    <div>
+      <injectIntl(ShimmedIntlComponent)
+        details={{}}
+        license="all-rights-reserved"
+      />
+      <div
+        className="x-small mt-2"
+      >
+        <FormattedMessage
+          defaultMessage="This license is set specifically for this video"
+          description="Helper text for license type when choosing for a spcific video"
+          id="authoring.videoeditor.license.defaultLevelDescription.helperText"
+        />
+      </div>
+    </div>
+  }
+  title="License"
+>
+  <Stack
+    gap={4}
+  >
+    <Fragment>
+      <injectIntl(ShimmedIntlComponent)
+        level="block"
+        license="all-rights-reserved"
+      />
+      <injectIntl(ShimmedIntlComponent)
+        details={{}}
+        level="block"
+        license="all-rights-reserved"
+      />
+      <injectIntl(ShimmedIntlComponent)
+        details={{}}
+        license="all-rights-reserved"
+        licenseDescription={
+          <FormattedMessage
+            defaultMessage="When a video has a different license than the course as a whole, learners see the license at the bottom right of the video player."
+            description="Message explaining where video specific licenses are seen by users"
+            id="authoring.videoeditor.license.defaultLicenseDescription.message"
+          />
+        }
+      />
+    </Fragment>
+  </Stack>
+</injectIntl(ShimmedIntlComponent)>
+`;
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/hooks.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/hooks.jsx
new file mode 100644
index 0000000000..87f64fd543
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/hooks.jsx
@@ -0,0 +1,84 @@
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import messages from './messages';
+import { actions } from '../../../../../../data/redux';
+import { LicenseLevel, LicenseTypes } from '../../../../../../data/constants/licenses';
+
+export const determineLicense = ({
+  isLibrary,
+  licenseType,
+  licenseDetails,
+  courseLicenseType,
+  courseLicenseDetails,
+}) => {
+  let level = LicenseLevel.course;
+  if (licenseType) {
+    if (isLibrary) {
+      level = LicenseLevel.library;
+    } else {
+      level = LicenseLevel.block;
+    }
+  }
+
+  return {
+    license: licenseType || courseLicenseType,
+    details: licenseType ? licenseDetails : courseLicenseDetails,
+    level,
+  };
+};
+
+export const determineText = ({ level }) => {
+  let levelDescription = '';
+  let licenseDescription = '';
+  switch (level) {
+    case LicenseLevel.course:
+      levelDescription = <FormattedMessage {...messages.courseLevelDescription} />;
+      licenseDescription = <FormattedMessage {...messages.courseLicenseDescription} />;
+      break;
+    case LicenseLevel.library:
+      levelDescription = <FormattedMessage {...messages.libraryLevelDescription} />;
+      licenseDescription = <FormattedMessage {...messages.libraryLicenseDescription} />;
+      break;
+    default: // default to block
+      levelDescription = <FormattedMessage {...messages.defaultLevelDescription} />;
+      licenseDescription = <FormattedMessage {...messages.defaultLicenseDescription} />;
+      break;
+  }
+
+  return {
+    levelDescription,
+    licenseDescription,
+  };
+};
+
+export const onSelectLicense = ({
+  dispatch,
+}) => (license) => {
+  switch (license) {
+    case LicenseTypes.allRightsReserved:
+      dispatch(actions.video.updateField({
+        licenseType: LicenseTypes.allRightsReserved,
+        licenseDetails: {},
+      }));
+      break;
+    case LicenseTypes.creativeCommons:
+      dispatch(actions.video.updateField({
+        licenseType: LicenseTypes.creativeCommons,
+        licenseDetails: {
+          attribution: true,
+          noncommercial: true,
+          noDerivatives: true,
+          shareAlike: false,
+        },
+      }));
+      break;
+    default:
+      dispatch(actions.video.updateField({ licenseType: LicenseTypes.select }));
+      break;
+  }
+};
+
+export default {
+  determineLicense,
+  determineText,
+  onSelectLicense,
+};
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/hooks.test.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/hooks.test.jsx
new file mode 100644
index 0000000000..6da244c8f4
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/hooks.test.jsx
@@ -0,0 +1,135 @@
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import { actions } from '../../../../../../data/redux';
+import { LicenseTypes } from '../../../../../../data/constants/licenses';
+// This 'module' self-import hack enables mocking during tests.
+// See src/editors/decisions/0005-internal-editor-testability-decisions.md. The whole approach to how hooks are tested
+// should be re-thought and cleaned up to avoid this pattern.
+// eslint-disable-next-line import/no-self-import
+import * as module from './hooks';
+import messages from './messages';
+
+jest.mock('../../../../../../data/redux', () => ({
+  actions: {
+    video: {
+      updateField: jest.fn(args => ({ updateField: args })).mockName('actions.video.updateField'),
+    },
+  },
+}));
+
+describe('VideoEditorTranscript hooks', () => {
+  describe('determineLicense', () => {
+    const courseLicenseProps = {
+      isLibrary: false,
+      licenseType: '',
+      licenseDetails: {},
+      courseLicenseType: 'sOMEliCENse',
+      courseLicenseDetails: {},
+    };
+    const libraryLicenseProps = {
+      isLibrary: true,
+      licenseType: 'sOMEliCENse',
+      licenseDetails: {},
+      courseLicenseType: '',
+      courseLicenseDetails: {},
+    };
+    const blockLicenseProps = {
+      isLibrary: false,
+      licenseType: 'sOMEliCENse',
+      licenseDetails: {},
+      courseLicenseType: '',
+      courseLicenseDetails: {},
+    };
+    it('returns expected license, details and level for course set license', () => {
+      expect(module.determineLicense(courseLicenseProps)).toEqual({
+        license: 'sOMEliCENse',
+        details: {},
+        level: 'course',
+      });
+    });
+    it('returns expected license, details and level for library set license', () => {
+      expect(module.determineLicense(libraryLicenseProps)).toEqual({
+        license: 'sOMEliCENse',
+        details: {},
+        level: 'library',
+      });
+    });
+    it('returns expected license, details and level for block set license', () => {
+      expect(module.determineLicense(blockLicenseProps)).toEqual({
+        license: 'sOMEliCENse',
+        details: {},
+        level: 'block',
+      });
+    });
+  });
+  describe('determineText', () => {
+    it('returns expected level and license description for course level', () => {
+      expect(module.determineText({ level: 'course' })).toEqual({
+        levelDescription: <FormattedMessage {...messages.courseLevelDescription} />,
+        licenseDescription: <FormattedMessage {...messages.courseLicenseDescription} />,
+      });
+    });
+    it('returns expected level and license description for library level', () => {
+      expect(module.determineText({ level: 'library' })).toEqual({
+        levelDescription: <FormattedMessage {...messages.libraryLevelDescription} />,
+        licenseDescription: <FormattedMessage {...messages.libraryLicenseDescription} />,
+      });
+    });
+    it('returns expected level and license description for library level', () => {
+      expect(module.determineText({ level: 'default' })).toEqual({
+        levelDescription: <FormattedMessage {...messages.defaultLevelDescription} />,
+        licenseDescription: <FormattedMessage {...messages.defaultLicenseDescription} />,
+      });
+    });
+  });
+  describe('onSelectLicense', () => {
+    // const mockEvent = { target: { value: mockLangValue } };
+    const mockDispatch = jest.fn();
+    test('it dispatches the correct thunk for all rights reserved', () => {
+      const mockLicenseValue = 'all-rights-reserved';
+      const callBack = module.onSelectLicense({ dispatch: mockDispatch });
+      callBack(mockLicenseValue);
+      expect(actions.video.updateField).toHaveBeenCalledWith({
+        licenseType: LicenseTypes.allRightsReserved,
+        licenseDetails: {},
+      });
+      expect(mockDispatch).toHaveBeenCalledWith({
+        updateField: {
+          licenseType: LicenseTypes.allRightsReserved,
+          licenseDetails: {},
+        },
+      });
+    });
+    test('it dispatches the correct thunk for creative commons', () => {
+      const mockLicenseValue = 'creative-commons';
+      const callBack = module.onSelectLicense({ dispatch: mockDispatch });
+      callBack(mockLicenseValue);
+      expect(actions.video.updateField).toHaveBeenCalledWith({
+        licenseType: LicenseTypes.creativeCommons,
+        licenseDetails: {
+          attribution: true,
+          noncommercial: true,
+          noDerivatives: true,
+          shareAlike: false,
+        },
+      });
+      expect(mockDispatch).toHaveBeenCalledWith({
+        updateField: {
+          licenseType: LicenseTypes.creativeCommons,
+          licenseDetails: {
+            attribution: true,
+            noncommercial: true,
+            noDerivatives: true,
+            shareAlike: false,
+          },
+        },
+      });
+    });
+    test('it dispatches the correct thunk for no license type', () => {
+      const mockLicenseValue = 'sOMEliCENse';
+      const callBack = module.onSelectLicense({ dispatch: mockDispatch });
+      callBack(mockLicenseValue);
+      expect(actions.video.updateField).toHaveBeenCalledWith({ licenseType: LicenseTypes.select });
+      expect(mockDispatch).toHaveBeenCalledWith({ updateField: { licenseType: LicenseTypes.select } });
+    });
+  });
+});
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/index.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/index.jsx
new file mode 100644
index 0000000000..5591abbdf4
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/index.jsx
@@ -0,0 +1,112 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import {
+  FormattedMessage,
+  injectIntl,
+  intlShape,
+} from '@edx/frontend-platform/i18n';
+import {
+  Button,
+  Stack,
+} from '@openedx/paragon';
+import { Add } from '@openedx/paragon/icons';
+
+import { actions, selectors } from '../../../../../../data/redux';
+import * as hooks from './hooks';
+import messages from './messages';
+import CollapsibleFormWidget from '../CollapsibleFormWidget';
+import LicenseBlurb from './LicenseBlurb';
+import LicenseSelector from './LicenseSelector';
+import LicenseDetails from './LicenseDetails';
+import LicenseDisplay from './LicenseDisplay';
+
+/**
+ * Collapsible Form widget controlling video license type and details
+ */
+const LicenseWidget = ({
+  // injected
+  intl,
+  // redux
+  isLibrary,
+  licenseType,
+  licenseDetails,
+  courseLicenseType,
+  courseLicenseDetails,
+  updateField,
+}) => {
+  const { license, details, level } = hooks.determineLicense({
+    isLibrary,
+    licenseType,
+    licenseDetails,
+    courseLicenseType,
+    courseLicenseDetails,
+  });
+  const { licenseDescription, levelDescription } = hooks.determineText({ level });
+  return (
+    <CollapsibleFormWidget
+      subtitle={(
+        <div>
+          <LicenseBlurb license={license} details={details} />
+          <div className="x-small mt-2">{levelDescription}</div>
+        </div>
+      )}
+      title={intl.formatMessage(messages.title)}
+    >
+      <Stack gap={4}>
+        {license ? (
+          <>
+            <LicenseSelector license={license} level={level} />
+            <LicenseDetails license={license} details={details} level={level} />
+            <LicenseDisplay
+              license={license}
+              details={details}
+              licenseDescription={licenseDescription}
+            />
+          </>
+        ) : null }
+        {!licenseType ? (
+          <>
+            <div className="border-primary-100 border-bottom my-2" />
+            <Button
+              className="text-primary-500 font-weight-bold justify-content-start pl-0"
+              size="sm"
+              iconBefore={Add}
+              variant="link"
+              onClick={() => updateField({ licenseType: 'select', licenseDetails: {} })}
+            >
+              <FormattedMessage {...messages.addLicenseButtonLabel} />
+            </Button>
+          </>
+        ) : null }
+      </Stack>
+    </CollapsibleFormWidget>
+  );
+};
+
+LicenseWidget.propTypes = {
+  // injected
+  intl: intlShape.isRequired,
+  // redux
+  isLibrary: PropTypes.bool.isRequired,
+  licenseType: PropTypes.string.isRequired,
+  licenseDetails: PropTypes.shape({}).isRequired,
+  courseLicenseType: PropTypes.string.isRequired,
+  courseLicenseDetails: PropTypes.shape({}).isRequired,
+  updateField: PropTypes.func.isRequired,
+};
+
+export const mapStateToProps = (state) => ({
+  isLibrary: selectors.app.isLibrary(state),
+  licenseType: selectors.video.licenseType(state),
+  licenseDetails: selectors.video.licenseDetails(state),
+  courseLicenseType: selectors.video.courseLicenseType(state),
+  courseLicenseDetails: selectors.video.courseLicenseDetails(state),
+});
+
+export const mapDispatchToProps = (dispatch) => ({
+  updateField: (stateUpdate) => dispatch(actions.video.updateField(stateUpdate)),
+});
+
+export const LicenseWidgetInternal = LicenseWidget; // For testing only
+export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(LicenseWidget));
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/index.test.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/index.test.jsx
new file mode 100644
index 0000000000..e7f1836fcc
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/index.test.jsx
@@ -0,0 +1,112 @@
+import 'CourseAuthoring/editors/setupEditorTest';
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+
+import { formatMessage } from '../../../../../../testUtils';
+import { actions, selectors } from '../../../../../../data/redux';
+import { LicenseWidgetInternal as LicenseWidget, mapStateToProps, mapDispatchToProps } from '.';
+
+jest.mock('react', () => {
+  const updateState = jest.fn();
+  return {
+    ...jest.requireActual('react'),
+    updateState,
+    useContext: jest.fn(() => ({ license: ['error.license', jest.fn().mockName('error.setLicense')] })),
+  };
+});
+
+jest.mock('../../../../../../data/redux', () => ({
+  actions: {
+    video: {
+      updateField: jest.fn().mockName('actions.video.updateField'),
+    },
+  },
+  selectors: {
+    app: {
+      isLibrary: jest.fn(state => ({ isLibrary: state })),
+    },
+    video: {
+      licenseType: jest.fn(state => ({ licenseType: state })),
+      licenseDetails: jest.fn(state => ({ licenseDetails: state })),
+      courseLicenseType: jest.fn(state => ({ courseLicenseType: state })),
+      courseLicenseDetails: jest.fn(state => ({ courseLicenseDetails: state })),
+    },
+  },
+}));
+
+describe('LicenseWidget', () => {
+  const props = {
+    error: {},
+    subtitle: 'SuBTItle',
+    title: 'tiTLE',
+    intl: { formatMessage },
+    isLibrary: false,
+    licenseType: null,
+    licenseDetails: {},
+    courseLicenseType: 'all-rights-reserved',
+    courseLicenseDetails: {},
+    updateField: jest.fn().mockName('args.updateField'),
+  };
+
+  describe('snapshots', () => {
+    // determineLicense.mockReturnValue({
+    //   license: false,
+    //   details: jest.fn().mockName('modal.openModal'),
+    //   level: 'course',
+    // });
+    // determineText.mockReturnValue({
+    //   isSourceCodeOpen: false,
+    //   openSourceCodeModal: jest.fn().mockName('modal.openModal'),
+    //   closeSourceCodeModal: jest.fn().mockName('modal.closeModal'),
+    // });
+    test('snapshots: renders as expected with default props', () => {
+      expect(
+        shallow(<LicenseWidget {...props} />).snapshot,
+      ).toMatchSnapshot();
+    });
+    test('snapshots: renders as expected with isLibrary true', () => {
+      expect(
+        shallow(<LicenseWidget {...props} isLibrary licenseType="all-rights-reserved" />).snapshot,
+      ).toMatchSnapshot();
+    });
+    test('snapshots: renders as expected with licenseType defined', () => {
+      expect(
+        shallow(<LicenseWidget {...props} licenseType="all-rights-reserved" />).snapshot,
+      ).toMatchSnapshot();
+    });
+  });
+  describe('mapStateToProps', () => {
+    const testState = { A: 'pple', B: 'anana', C: 'ucumber' };
+    test('isLibrary from app.isLibrary', () => {
+      expect(
+        mapStateToProps(testState).isLibrary,
+      ).toEqual(selectors.app.isLibrary(testState));
+    });
+    test('licenseType from video.licenseType', () => {
+      expect(
+        mapStateToProps(testState).licenseType,
+      ).toEqual(selectors.video.licenseType(testState));
+    });
+    test('licenseDetails from video.licenseDetails', () => {
+      expect(
+        mapStateToProps(testState).licenseDetails,
+      ).toEqual(selectors.video.licenseDetails(testState));
+    });
+    test('courseLicenseType from video.courseLicenseType', () => {
+      expect(
+        mapStateToProps(testState).courseLicenseType,
+      ).toEqual(selectors.video.courseLicenseType(testState));
+    });
+    test('courseLicenseDetails from video.courseLicenseDetails', () => {
+      expect(
+        mapStateToProps(testState).courseLicenseDetails,
+      ).toEqual(selectors.video.courseLicenseDetails(testState));
+    });
+  });
+  describe('mapDispatchToProps', () => {
+    const dispatch = jest.fn();
+    test('updateField from actions.video.updateField', () => {
+      expect(mapDispatchToProps.updateField).toEqual(dispatch(actions.video.updateField));
+    });
+  });
+});
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/messages.js b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/messages.js
new file mode 100644
index 0000000000..9c388caa27
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/messages.js
@@ -0,0 +1,127 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+
+  title: {
+    id: 'authoring.videoeditor.license.title',
+    defaultMessage: 'License',
+    description: 'Title for license widget',
+  },
+  licenseTypeLabel: {
+    id: 'authoring.videoeditor.license.licenseType.label',
+    defaultMessage: 'License Type',
+    description: 'Label for license type selection field',
+  },
+  detailsSubsectionTitle: {
+    id: 'authoring.videoeditor.license.detailsSubsection.title',
+    defaultMessage: 'License Details',
+    description: 'Title for license detatils subsection',
+  },
+  displaySubsectionTitle: {
+    id: 'authoring.videoeditor.license.displaySubsection.title',
+    defaultMessage: 'License Display',
+    description: 'Title for license display subsection',
+  },
+  addLicenseButtonLabel: {
+    id: 'authoring.videoeditor.license.add.label',
+    defaultMessage: 'Add a license for this video',
+    description: 'Label for add license button',
+  },
+  deleteLicenseSelection: {
+    id: 'authoring.videoeditor.license.deleteLicenseSelection',
+    defaultMessage: 'Clear and apply the course-level license',
+    description: 'Message presented to user for action to delete license selection',
+  },
+  allRightsReservedIconsLabel: {
+    id: 'authoring.videoeditor.license.allRightsReservedIcons.label',
+    defaultMessage: 'All Rights Reserved',
+    description: 'Label for row of all rights reserved icons',
+  },
+  creativeCommonsIconsLabel: {
+    id: 'authoring.videoeditor.license.creativeCommonsIcons.label',
+    defaultMessage: 'Some Rights Reserved',
+    description: 'Label for row of creative common icons',
+  },
+  viewLicenseDetailsLabel: {
+    id: 'authoring.videoeditor.license.viewLicenseDetailsLabel.label',
+    defaultMessage: 'View license details',
+    description: 'Label for view license details button',
+  },
+  courseLevelDescription: {
+    id: 'authoring.videoeditor.license.courseLevelDescription.helperText',
+    defaultMessage: 'This license currently set at the course level',
+    description: 'Helper text for license type when using course license',
+  },
+  courseLicenseDescription: {
+    id: 'authoring.videoeditor.license.courseLicenseDescription.message',
+    defaultMessage: 'Licenses set at the course level appear at the bottom of courseware pages within your course.',
+    description: 'Message explaining where course level licenses are set',
+  },
+  libraryLevelDescription: {
+    id: 'authoring.videoeditor.license.libraryLevelDescription.helperText',
+    defaultMessage: 'This license currently set at the library level',
+    description: 'Helper text for license type when using library license',
+  },
+  libraryLicenseDescription: {
+    id: 'authoring.videoeditor.license.libraryLicenseDescription.message',
+    defaultMessage: 'Licenses set at the library level appear at the specific library video.',
+    description: 'Message explaining where library level licenses are set',
+  },
+  defaultLevelDescription: {
+    id: 'authoring.videoeditor.license.defaultLevelDescription.helperText',
+    defaultMessage: 'This license is set specifically for this video',
+    description: 'Helper text for license type when choosing for a spcific video',
+  },
+  defaultLicenseDescription: {
+    id: 'authoring.videoeditor.license.defaultLicenseDescription.message',
+    defaultMessage: 'When a video has a different license than the course as a whole, learners see the license at the bottom right of the video player.',
+    description: 'Message explaining where video specific licenses are seen by users',
+  },
+  attributionCheckboxLabel: {
+    id: 'authoring.videoeditor.license.attributionCheckboxLabel',
+    defaultMessage: 'Attribution',
+    description: 'Label for attribution checkbox',
+  },
+  attributionSectionDescription: {
+    id: 'authoring.videoeditor.license.attributionSectionDescription',
+    defaultMessage: 'Allow others to copy, distribute, display and perform your copyrighted work but only if they give credit the way you request. Currently, this option is required.',
+    description: 'Attribution card section defining attribution license',
+  },
+  noncommercialCheckboxLabel: {
+    id: 'authoring.videoeditor.license.noncommercialCheckboxLabel',
+    defaultMessage: 'Noncommercial',
+    description: 'Label for noncommercial checkbox',
+  },
+  noncommercialSectionDescription: {
+    id: 'authoring.videoeditor.license.noncommercialSectionDescription',
+    defaultMessage: 'Allow others to copy, distribute, display and perform your work - and derivative works based upon it - but for noncommercial purposes only.',
+    description: 'Noncommercial card section defining noncommercial license',
+  },
+  noDerivativesCheckboxLabel: {
+    id: 'authoring.videoeditor.license.noDerivativesCheckboxLabel',
+    defaultMessage: 'No Derivatives',
+    description: 'Label for No Derivatives checkbox',
+  },
+  noDerivativesSectionDescription: {
+    id: 'authoring.videoeditor.license.noDerivativesSectionDescription',
+    defaultMessage: 'Allow others to copy, distribute, display and perform only verbatim copies of your work, not derivative works based upon it. This option is incompatible with "Share Alike".',
+    description: 'No Derivatives card section defining no derivatives license',
+  },
+  shareAlikeCheckboxLabel: {
+    id: 'authoring.videoeditor.license.shareAlikeCheckboxLabel',
+    defaultMessage: 'Share Alike',
+    description: 'Label for Share Alike checkbox',
+  },
+  shareAlikeSectionDescription: {
+    id: 'authoring.videoeditor.license.shareAlikeSectionDescription',
+    defaultMessage: 'Allow others to distribute derivative works only under a license identical to the license that governs your work. This option is incompatible with "No Derivatives".',
+    description: 'Share Alike card section defining no derivatives license',
+  },
+  allRightsReservedSectionMessage: {
+    id: 'authoring.videoeditor.license.allRightsReservedSectionMessage',
+    defaultMessage: 'You reserve all rights for your work.',
+    description: 'All Rights Reserved section message',
+  },
+});
+
+export default messages;
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/SocialShareWidget/__snapshots__/index.test.jsx.snap b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/SocialShareWidget/__snapshots__/index.test.jsx.snap
new file mode 100644
index 0000000000..b654d77b07
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/SocialShareWidget/__snapshots__/index.test.jsx.snap
@@ -0,0 +1,85 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SocialShareWidget rendered with videoSharingEnabled false with default props should return null 1`] = `null`;
+
+exports[`SocialShareWidget rendered with videoSharingEnabled false with videoSharingEnabledForAll false and isLibrary true should return null 1`] = `null`;
+
+exports[`SocialShareWidget rendered with videoSharingEnabled false with videoSharingEnabledForCourse and isLibrary false and videoSharingEnabledForAll true should return null 1`] = `null`;
+
+exports[`SocialShareWidget rendered with videoSharingEnabled true and allowVideoSharing value equals false should have subtitle with text that reads Enabled 1`] = `
+<injectIntl(ShimmedIntlComponent)
+  fontSize="x-small"
+  subtitle="Disabled"
+  title="Social Sharing"
+>
+  <div>
+    <FormattedMessage
+      defaultMessage="Allow this video to be shareable to social media"
+      description="Description for sociail sharing setting"
+      id="authoring.videoeditor.socialShare.description"
+    />
+  </div>
+  <Form.Checkbox
+    checked={false}
+    className="mt-3"
+    disabled={false}
+    onChange={[Function]}
+  >
+    <div
+      className="small text-gray-700"
+    >
+      This video is shareable to social media
+    </div>
+  </Form.Checkbox>
+  <div
+    className="mt-3"
+  >
+    <Hyperlink
+      className="text-primary-500"
+      destination="sOMeURl.cOM"
+      target="_blank"
+    >
+      Learn more about social sharing
+    </Hyperlink>
+  </div>
+</injectIntl(ShimmedIntlComponent)>
+`;
+
+exports[`SocialShareWidget rendered with videoSharingEnabled true and allowVideoSharing value equals true should have subtitle with text that reads Enabled 1`] = `
+<injectIntl(ShimmedIntlComponent)
+  fontSize="x-small"
+  subtitle="Enabled"
+  title="Social Sharing"
+>
+  <div>
+    <FormattedMessage
+      defaultMessage="Allow this video to be shareable to social media"
+      description="Description for sociail sharing setting"
+      id="authoring.videoeditor.socialShare.description"
+    />
+  </div>
+  <Form.Checkbox
+    checked={true}
+    className="mt-3"
+    disabled={false}
+    onChange={[Function]}
+  >
+    <div
+      className="small text-gray-700"
+    >
+      This video is shareable to social media
+    </div>
+  </Form.Checkbox>
+  <div
+    className="mt-3"
+  >
+    <Hyperlink
+      className="text-primary-500"
+      destination="sOMeURl.cOM"
+      target="_blank"
+    >
+      Learn more about social sharing
+    </Hyperlink>
+  </div>
+</injectIntl(ShimmedIntlComponent)>
+`;
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/SocialShareWidget/constants.ts b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/SocialShareWidget/constants.ts
new file mode 100644
index 0000000000..ecefaa9ffb
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/SocialShareWidget/constants.ts
@@ -0,0 +1,3 @@
+export const analyticsEvents = {
+  socialSharingSettingChanged: 'edx.social.video_sharing_setting.changed',
+};
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/SocialShareWidget/hooks.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/SocialShareWidget/hooks.jsx
new file mode 100644
index 0000000000..4b357af3b5
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/SocialShareWidget/hooks.jsx
@@ -0,0 +1,26 @@
+import { useSelector } from 'react-redux';
+import { sendTrackEvent } from '@edx/frontend-platform/analytics';
+import { selectors } from '../../../../../../data/redux';
+import { analyticsEvents } from './constants';
+
+export const useTrackSocialSharingChange = ({ updateField }) => {
+  const analytics = useSelector(selectors.app.analytics);
+  const allowVideoSharing = useSelector(selectors.video.allowVideoSharing);
+  return (event) => {
+    sendTrackEvent(
+      analyticsEvents.socialSharingSettingChanged,
+      {
+        ...analytics,
+        value: event.target.checked,
+      },
+    );
+    updateField({
+      allowVideoSharing: {
+        ...allowVideoSharing,
+        value: event.target.checked,
+      },
+    });
+  };
+};
+
+export default useTrackSocialSharingChange;
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/SocialShareWidget/hooks.test.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/SocialShareWidget/hooks.test.jsx
new file mode 100644
index 0000000000..a70d8ea838
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/SocialShareWidget/hooks.test.jsx
@@ -0,0 +1,44 @@
+import 'CourseAuthoring/editors/setupEditorTest';
+import { sendTrackEvent } from '@edx/frontend-platform/analytics';
+import { analyticsEvents } from './constants';
+import * as hooks from './hooks';
+
+jest.mock('../../../../../../data/redux', () => ({
+  selectors: {
+    app: {
+      analytics: jest.fn((state) => ({ analytics: state })),
+    },
+    video: {
+      allowVideoSharing: jest.fn((state) => ({ allowVideoSharing: state })),
+    },
+  },
+}));
+
+jest.mock('@edx/frontend-platform/analytics', () => ({
+  sendTrackEvent: jest.fn(),
+}));
+
+describe('SocialShareWidget hooks', () => {
+  describe('useTrackSocialSharingChange when', () => {
+    let onClick;
+    let updateField;
+    describe.each([true, false])('box is toggled', (checked) => {
+      beforeAll(() => {
+        jest.resetAllMocks();
+        updateField = jest.fn();
+        onClick = hooks.useTrackSocialSharingChange({ updateField });
+        expect(typeof onClick).toBe('function');
+        onClick({ target: { checked } });
+      });
+      it('field is updated', () => {
+        expect(updateField).toBeCalledWith({ allowVideoSharing: { value: checked } });
+      });
+      it('event tracking is called', () => {
+        expect(sendTrackEvent).toBeCalledWith(
+          analyticsEvents.socialSharingSettingChanged,
+          { value: checked },
+        );
+      });
+    });
+  });
+});
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/SocialShareWidget/index.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/SocialShareWidget/index.jsx
new file mode 100644
index 0000000000..57b6e25ac2
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/SocialShareWidget/index.jsx
@@ -0,0 +1,120 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import {
+  FormattedMessage,
+  injectIntl,
+  intlShape,
+} from '@edx/frontend-platform/i18n';
+import {
+  Hyperlink,
+  Form,
+} from '@openedx/paragon';
+
+import { selectors, actions } from '../../../../../../data/redux';
+import CollapsibleFormWidget from '../CollapsibleFormWidget';
+import messages from './messages';
+import * as hooks from './hooks';
+
+/**
+ * Collapsible Form widget controlling video thumbnail
+ */
+const SocialShareWidget = ({
+  // injected
+  intl,
+  // redux
+  allowVideoSharing,
+  isLibrary,
+  videoSharingEnabledForAll,
+  videoSharingEnabledForCourse,
+  videoSharingLearnMoreLink,
+  updateField,
+}) => {
+  const isSetByCourse = allowVideoSharing.level === 'course';
+  const videoSharingEnabled = isLibrary ? videoSharingEnabledForAll : videoSharingEnabledForCourse;
+  const learnMoreLink = videoSharingLearnMoreLink || 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/developing_course/social_sharing.html';
+  const onSocialSharingCheckboxChange = hooks.useTrackSocialSharingChange({ updateField });
+
+  const getSubtitle = () => {
+    if (allowVideoSharing.value) {
+      return intl.formatMessage(messages.enabledSubtitle);
+    }
+    return intl.formatMessage(messages.disabledSubtitle);
+  };
+
+  return (videoSharingEnabled ? (
+    <CollapsibleFormWidget
+      fontSize="x-small"
+      title={intl.formatMessage(messages.title)}
+      subtitle={getSubtitle()}
+    >
+      <div>
+        <FormattedMessage {...messages.socialSharingDescription} />
+      </div>
+      <Form.Checkbox
+        className="mt-3"
+        checked={allowVideoSharing.value}
+        disabled={isSetByCourse}
+        onChange={onSocialSharingCheckboxChange}
+      >
+        <div className="small text-gray-700">
+          {intl.formatMessage(messages.socialSharingCheckboxLabel)}
+        </div>
+      </Form.Checkbox>
+      {isSetByCourse && (
+        <>
+          <div className="mt-2">
+            <FormattedMessage {...messages.overrideSocialSharingNote} />
+          </div>
+          <div>
+            <FormattedMessage {...messages.disclaimerSettingLocation} />
+          </div>
+        </>
+      )}
+      <div className="mt-3">
+        <Hyperlink className="text-primary-500" destination={learnMoreLink} target="_blank">
+          {intl.formatMessage(messages.learnMoreLinkLabel)}
+        </Hyperlink>
+      </div>
+    </CollapsibleFormWidget>
+  ) : null);
+};
+
+SocialShareWidget.defaultProps = {
+  allowVideoSharing: {
+    level: 'block',
+    value: false,
+  },
+  videoSharingEnabledForCourse: false,
+  videoSharingEnabledForAll: false,
+};
+
+SocialShareWidget.propTypes = {
+  // injected
+  intl: intlShape.isRequired,
+  // redux
+  allowVideoSharing: PropTypes.shape({
+    level: PropTypes.string.isRequired,
+    value: PropTypes.bool.isRequired,
+  }),
+  isLibrary: PropTypes.bool.isRequired,
+  videoSharingEnabledForAll: PropTypes.bool,
+  videoSharingEnabledForCourse: PropTypes.bool,
+  videoSharingLearnMoreLink: PropTypes.string.isRequired,
+  updateField: PropTypes.func.isRequired,
+};
+
+export const mapStateToProps = (state) => ({
+  allowVideoSharing: selectors.video.allowVideoSharing(state),
+  isLibrary: selectors.app.isLibrary(state),
+  videoSharingLearnMoreLink: selectors.video.videoSharingLearnMoreLink(state),
+  videoSharingEnabledForAll: selectors.video.videoSharingEnabledForAll(state),
+  videoSharingEnabledForCourse: selectors.video.videoSharingEnabledForCourse(state),
+});
+
+export const mapDispatchToProps = (dispatch) => ({
+  updateField: (stateUpdate) => dispatch(actions.video.updateField(stateUpdate)),
+});
+
+export const SocialShareWidgetInternal = SocialShareWidget; // For testing only
+export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(SocialShareWidget));
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/SocialShareWidget/index.test.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/SocialShareWidget/index.test.jsx
new file mode 100644
index 0000000000..2d7fccd76c
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/SocialShareWidget/index.test.jsx
@@ -0,0 +1,274 @@
+import 'CourseAuthoring/editors/setupEditorTest';
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+
+import { formatMessage } from '../../../../../../testUtils';
+import { actions, selectors } from '../../../../../../data/redux';
+import { SocialShareWidgetInternal as SocialShareWidget, mapStateToProps, mapDispatchToProps } from '.';
+import messages from './messages';
+
+jest.mock('react', () => {
+  const updateState = jest.fn();
+  return {
+    ...jest.requireActual('react'),
+    updateState,
+    useContext: jest.fn(() => ({ license: ['error.license', jest.fn().mockName('error.setLicense')] })),
+  };
+});
+
+jest.mock('../../../../../../data/redux', () => ({
+  actions: {
+    video: {
+      updateField: jest.fn().mockName('actions.video.updateField'),
+    },
+  },
+  selectors: {
+    app: {
+      isLibrary: jest.fn(state => ({ isLibrary: state })),
+    },
+    video: {
+      allowVideoSharing: jest.fn(state => ({ allowVideoSharing: state })),
+      videoSharingEnabledForAll: jest.fn(state => ({ videoSharingEnabledForAll: state })),
+      videoSharingEnabledForCourse: jest.fn(state => ({ videoSharingEnabledForCourse: state })),
+      videoSharingLearnMoreLink: jest.fn(state => ({ videoSharingLearnMoreLink: state })),
+    },
+  },
+}));
+
+describe('SocialShareWidget', () => {
+  const props = {
+    title: 'tiTLE',
+    intl: { formatMessage },
+    videoSharingEnabledForCourse: false,
+    videoSharingEnabledForAll: false,
+    isLibrary: false,
+    allowVideoSharing: {
+      level: 'block',
+      value: false,
+    },
+    videoSharingLearnMoreLink: 'sOMeURl.cOM',
+    updateField: jest.fn().mockName('args.updateField'),
+  };
+
+  describe('rendered with videoSharingEnabled false', () => {
+    describe('with default props', () => {
+      it('should return null', () => {
+        const wrapper = shallow(<SocialShareWidget {...props} />);
+        expect(wrapper.snapshot).toMatchSnapshot();
+      });
+    });
+    describe('with videoSharingEnabledForAll false and isLibrary true', () => {
+      it('should return null', () => {
+        const wrapper = shallow(<SocialShareWidget {...props} isLibrary />);
+        expect(wrapper.snapshot).toMatchSnapshot();
+      });
+    });
+    describe('with videoSharingEnabledForCourse and isLibrary false and videoSharingEnabledForAll true', () => {
+      it('should return null', () => {
+        const wrapper = shallow(<SocialShareWidget {...props} videoSharingEnabledForAll />);
+        expect(wrapper.snapshot).toMatchSnapshot();
+      });
+    });
+  });
+
+  describe('rendered with videoSharingEnabled true', () => {
+    describe('and allowVideoSharing value equals true', () => {
+      describe(' with level equal to course', () => {
+        const wrapper = shallow(<SocialShareWidget
+          {...props}
+          videoSharingEnabledForCourse
+          allowVideoSharing={{
+            level: 'course',
+            value: true,
+          }}
+        />);
+        it('should have setting location message', () => {
+          const settingLocationDisclaimer = wrapper.instance.findByType('FormattedMessage')[2].props.defaultMessage;
+          expect(settingLocationDisclaimer).toEqual(messages.disclaimerSettingLocation.defaultMessage);
+        });
+        it('should have checkbox disabled prop equal true', () => {
+          const disabledCheckbox = wrapper.shallowWrapper.props.children[1].props.disabled;
+          expect(disabledCheckbox).toEqual(true);
+        });
+      });
+      describe(' with level equal to block', () => {
+        const wrapper = shallow(<SocialShareWidget
+          {...props}
+          videoSharingEnabledForCourse
+          allowVideoSharing={{
+            level: 'block',
+            value: true,
+          }}
+        />);
+        it('should not have setting location message', () => {
+          const formattedMessages = wrapper.instance.findByType('FormattedMessage');
+          expect(formattedMessages.length).toEqual(1);
+          expect(formattedMessages[0]).not.toEqual(messages.disclaimerSettingLocation.defaultMessage);
+        });
+        it('should not have override note', () => {
+          const formattedMessages = wrapper.instance.findByType('FormattedMessage');
+          expect(formattedMessages.length).toEqual(1);
+          expect(formattedMessages[0]).not.toEqual(messages.overrideSocialSharingNote.defaultMessage);
+        });
+        it('should have checkbox disabled prop equal false', () => {
+          const disabledCheckbox = wrapper.shallowWrapper.props.children[1].props.disabled;
+          expect(disabledCheckbox).toEqual(false);
+        });
+      });
+      describe('isLibrary equals true', () => {
+        const wrapper = shallow(<SocialShareWidget
+          {...props}
+          videoSharingEnabledForAll
+          isLibrary
+          allowVideoSharing={{
+            level: 'block',
+            value: true,
+          }}
+        />);
+        it('should not have setting location message', () => {
+          const formattedMessages = wrapper.instance.findByType('FormattedMessage');
+          expect(formattedMessages.length).toEqual(1);
+          expect(formattedMessages[0]).not.toEqual(messages.disclaimerSettingLocation.defaultMessage);
+        });
+        it('should not have override note', () => {
+          const formattedMessages = wrapper.instance.findByType('FormattedMessage');
+          expect(formattedMessages.length).toEqual(1);
+          expect(formattedMessages[0]).not.toEqual(messages.overrideSocialSharingNote.defaultMessage);
+        });
+        it('should have checkbox disabled prop equal false', () => {
+          const disabledCheckbox = wrapper.shallowWrapper.props.children[1].props.disabled;
+          expect(disabledCheckbox).toEqual(false);
+        });
+      });
+      it('should have subtitle with text that reads Enabled', () => {
+        const wrapper = shallow(<SocialShareWidget
+          {...props}
+          videoSharingEnabledForCourse
+          allowVideoSharing={{
+            level: 'block',
+            value: true,
+          }}
+        />);
+        const { subtitle } = wrapper.shallowWrapper.props;
+        expect(wrapper.snapshot).toMatchSnapshot();
+        expect(subtitle).toEqual('Enabled');
+      });
+    });
+    describe('and allowVideoSharing value equals false', () => {
+      describe(' with level equal to course', () => {
+        const wrapper = shallow(<SocialShareWidget
+          {...props}
+          videoSharingEnabledForCourse
+          allowVideoSharing={{
+            level: 'course',
+            value: false,
+          }}
+        />);
+        it('should have setting location message', () => {
+          const settingLocationDisclaimer = wrapper.instance.findByType('FormattedMessage')[2].props.defaultMessage;
+          expect(settingLocationDisclaimer).toEqual(messages.disclaimerSettingLocation.defaultMessage);
+        });
+        it('should have checkbox disabled prop equal true', () => {
+          const disabledCheckbox = wrapper.shallowWrapper.props.children[1].props.disabled;
+          expect(disabledCheckbox).toEqual(true);
+        });
+      });
+      describe(' with level equal to block', () => {
+        const wrapper = shallow(<SocialShareWidget
+          {...props}
+          videoSharingEnabledForCourse
+          allowVideoSharing={{
+            level: 'block',
+            value: false,
+          }}
+        />);
+        it('should not have setting location message', () => {
+          const formattedMessages = wrapper.instance.findByType('FormattedMessage');
+          expect(formattedMessages.length).toEqual(1);
+          expect(formattedMessages.at(0)).not.toEqual(messages.disclaimerSettingLocation.defaultMessage);
+        });
+        it('should not have override note', () => {
+          const formattedMessages = wrapper.instance.findByType('FormattedMessage');
+          expect(formattedMessages.length).toEqual(1);
+          expect(formattedMessages.at(0)).not.toEqual(messages.overrideSocialSharingNote.defaultMessage);
+        });
+        it('should have checkbox disabled prop equal false', () => {
+          const disabledCheckbox = wrapper.shallowWrapper.props.children[1].props.disabled;
+          expect(disabledCheckbox).toEqual(false);
+        });
+      });
+      describe('isLibrary equals true', () => {
+        const wrapper = shallow(<SocialShareWidget
+          {...props}
+          videoSharingEnabledForAll
+          isLibrary
+          allowVideoSharing={{
+            level: 'block',
+            value: false,
+          }}
+        />);
+        it('should not have setting location message', () => {
+          const formattedMessages = wrapper.instance.findByType('FormattedMessage');
+          expect(formattedMessages.length).toEqual(1);
+          expect(formattedMessages.at(0)).not.toEqual(messages.disclaimerSettingLocation.defaultMessage);
+        });
+        it('should not have override note', () => {
+          const formattedMessages = wrapper.instance.findByType('FormattedMessage');
+          expect(formattedMessages.length).toEqual(1);
+          expect(formattedMessages.at(0)).not.toEqual(messages.overrideSocialSharingNote.defaultMessage);
+        });
+        it('should have checkbox disabled prop equal false', () => {
+          const disabledCheckbox = wrapper.shallowWrapper.props.children[1].props.disabled;
+          expect(disabledCheckbox).toEqual(false);
+        });
+      });
+      it('should have subtitle with text that reads Enabled', () => {
+        const wrapper = shallow(<SocialShareWidget
+          {...props}
+          videoSharingEnabledForCourse
+          allowVideoSharing={{
+            level: 'block',
+            value: false,
+          }}
+        />);
+        const { subtitle } = wrapper.shallowWrapper.props;
+        expect(wrapper.snapshot).toMatchSnapshot();
+        expect(subtitle).toEqual('Disabled');
+      });
+    });
+  });
+  describe('mapStateToProps', () => {
+    const testState = { A: 'pple', B: 'anana', C: 'ucumber' };
+    test('isLibrary from app.isLibrary', () => {
+      expect(
+        mapStateToProps(testState).isLibrary,
+      ).toEqual(selectors.app.isLibrary(testState));
+    });
+    test('allowVideoSharing from video.allowVideoSharing', () => {
+      expect(
+        mapStateToProps(testState).allowVideoSharing,
+      ).toEqual(selectors.video.allowVideoSharing(testState));
+    });
+    test('videoSharingEnabledForCourse from video.videoSharingEnabledForCourse', () => {
+      expect(
+        mapStateToProps(testState).videoSharingEnabledForCourse,
+      ).toEqual(selectors.video.videoSharingEnabledForCourse(testState));
+    });
+    test('videoSharingEnabledForAll from video.videoSharingEnabledForAll', () => {
+      expect(
+        mapStateToProps(testState).videoSharingEnabledForAll,
+      ).toEqual(selectors.video.videoSharingEnabledForAll(testState));
+    });
+    test('videoSharingLearnMoreLink from video.videoSharingLearnMoreLink', () => {
+      expect(
+        mapStateToProps(testState).videoSharingLearnMoreLink,
+      ).toEqual(selectors.video.videoSharingLearnMoreLink(testState));
+    });
+  });
+  describe('mapDispatchToProps', () => {
+    const dispatch = jest.fn();
+    test('updateField from actions.video.updateField', () => {
+      expect(mapDispatchToProps.updateField).toEqual(dispatch(actions.video.updateField));
+    });
+  });
+});
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/SocialShareWidget/messages.js b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/SocialShareWidget/messages.js
new file mode 100644
index 0000000000..7b47f43124
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/SocialShareWidget/messages.js
@@ -0,0 +1,46 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  title: {
+    id: 'authoring.videoeditor.socialShare.title',
+    defaultMessage: 'Social Sharing',
+    description: 'Title for socialShare widget',
+  },
+  disabledSubtitle: {
+    id: 'authoring.videoeditor.socialShare.disabled.subtitle',
+    defaultMessage: 'Disabled',
+    description: 'Subtitle for unavailable socialShare widget',
+  },
+  enabledSubtitle: {
+    id: 'authoring.videoeditor.socialShare.enabled.subtitle',
+    defaultMessage: 'Enabled',
+    description: 'Subtitle for when thumbnail has been uploaded to the widget',
+  },
+  learnMoreLinkLabel: {
+    id: 'authoring.videoeditor.socialShare.learnMore.link',
+    defaultMessage: 'Learn more about social sharing',
+    description: 'Text for link to learn more about social sharing',
+  },
+  socialSharingDescription: {
+    id: 'authoring.videoeditor.socialShare.description',
+    defaultMessage: 'Allow this video to be shareable to social media',
+    description: 'Description for sociail sharing setting',
+  },
+  socialSharingCheckboxLabel: {
+    id: 'authoring.videoeditor.socialShare.checkbox.label',
+    defaultMessage: 'This video is shareable to social media',
+    description: 'Label for checkbox for allowing video to be share',
+  },
+  overrideSocialSharingNote: {
+    id: 'authoring.videoeditor.socialShare.overrideNote',
+    defaultMessage: 'Note: This setting is overridden by the course outline page.',
+    description: 'Message that the setting can be overriden in the course outline',
+  },
+  disclaimerSettingLocation: {
+    id: 'authoring.videoeditor.socialShare.settingsDisclaimer',
+    defaultMessage: 'Change this setting on the course outline page.',
+    description: 'Message for disabled checkbox that notifies user that setting can be modified in course outline',
+  },
+});
+
+export default messages;
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/ThumbnailWidget/__snapshots__/index.test.jsx.snap b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/ThumbnailWidget/__snapshots__/index.test.jsx.snap
new file mode 100644
index 0000000000..fd175bb110
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/ThumbnailWidget/__snapshots__/index.test.jsx.snap
@@ -0,0 +1,156 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ThumbnailWidget snapshots snapshots: renders as expected where thumbnail uploads are allowed 1`] = `null`;
+
+exports[`ThumbnailWidget snapshots snapshots: renders as expected where videoId is valid 1`] = `
+<injectIntl(ShimmedIntlComponent)
+  fontSize="x-small"
+  isError={true}
+  subtitle="Yes"
+  title="Thumbnail"
+>
+  <ErrorAlert
+    dismissError={[Function]}
+    hideHeading={true}
+    isError={false}
+  >
+    <FormattedMessage
+      defaultMessage="The file size for thumbnails must be larger than 2 KB or less than 2 MB. Please resize your image and try again."
+      description=" Message presented to user when file size of image is less than 2 KB or larger than 2 MB"
+      id="authoring.videoeditor.thumbnail.error.fileSizeError"
+    />
+  </ErrorAlert>
+  <Stack
+    direction="horizontal"
+    gap={3}
+  >
+    <Image
+      alt="Image used as thumbnail for video"
+      className="w-75"
+      fluid={true}
+      src="sOMeUrl"
+      thumbnail={true}
+    />
+    <IconButtonWithTooltip
+      iconAs="Icon"
+      onClick={[Function]}
+      tooltipContent="Delete"
+      tooltipPlacement="top"
+    />
+  </Stack>
+</injectIntl(ShimmedIntlComponent)>
+`;
+
+exports[`ThumbnailWidget snapshots snapshots: renders as expected where videoId is valid and no thumbnail 1`] = `
+<injectIntl(ShimmedIntlComponent)
+  fontSize="x-small"
+  isError={true}
+  subtitle="None"
+  title="Thumbnail"
+>
+  <ErrorAlert
+    dismissError={[Function]}
+    hideHeading={true}
+    isError={false}
+  >
+    <FormattedMessage
+      defaultMessage="The file size for thumbnails must be larger than 2 KB or less than 2 MB. Please resize your image and try again."
+      description=" Message presented to user when file size of image is less than 2 KB or larger than 2 MB"
+      id="authoring.videoeditor.thumbnail.error.fileSizeError"
+    />
+  </ErrorAlert>
+  <Stack
+    gap={4}
+  >
+    <div
+      className="text-center"
+    >
+      <FormattedMessage
+        defaultMessage="Upload an image for learners to see before playing the video."
+        description="Message for adding thumbnail"
+        id="authoring.videoeditor.thumbnail.upload.message"
+      />
+      <div
+        className="text-primary-300"
+      >
+        <FormattedMessage
+          defaultMessage="Images must have an aspect ratio of 16:9 (1280x720 px recommended)"
+          description="Message for thumbnail aspectRequirements"
+          id="authoring.videoeditor.thumbnail.upload.aspectRequirements"
+        />
+      </div>
+    </div>
+    <FileInput
+      acceptedFiles=".gif,.jpg,.jpeg,.png,.bmp,.bmp2"
+      fileInput={
+        {
+          "addFile": [Function],
+          "click": [Function],
+          "ref": {
+            "current": undefined,
+          },
+        }
+      }
+    />
+    <Button
+      className="text-primary-500 font-weight-bold justify-content-start pl-0"
+      disabled={false}
+      onClick={[Function]}
+      size="sm"
+      variant="link"
+    >
+      <FormattedMessage
+        defaultMessage="Upload thumbnail"
+        description="Label for upload button"
+        id="authoring.videoeditor.thumbnail.upload.label"
+      />
+    </Button>
+  </Stack>
+</injectIntl(ShimmedIntlComponent)>
+`;
+
+exports[`ThumbnailWidget snapshots snapshots: renders as expected with a thumbnail provided 1`] = `
+<injectIntl(ShimmedIntlComponent)
+  fontSize="x-small"
+  isError={true}
+  subtitle="Yes"
+  title="Thumbnail"
+>
+  <ErrorAlert
+    dismissError={[Function]}
+    hideHeading={true}
+    isError={false}
+  >
+    <FormattedMessage
+      defaultMessage="The file size for thumbnails must be larger than 2 KB or less than 2 MB. Please resize your image and try again."
+      description=" Message presented to user when file size of image is less than 2 KB or larger than 2 MB"
+      id="authoring.videoeditor.thumbnail.error.fileSizeError"
+    />
+  </ErrorAlert>
+  <Alert
+    variant="light"
+  >
+    <FormattedMessage
+      defaultMessage="Select a video from your library to enable this feature (applies only to courses that run on the edx.org site)."
+      description="Message for unavailable thumbnail widget"
+      id="authoring.videoeditor.thumbnail.unavailable.message"
+    />
+  </Alert>
+  <Stack
+    direction="horizontal"
+    gap={3}
+  >
+    <Image
+      alt="Image used as thumbnail for video"
+      className="w-75"
+      fluid={true}
+      src="sOMeUrl"
+      thumbnail={true}
+    />
+  </Stack>
+</injectIntl(ShimmedIntlComponent)>
+`;
+
+exports[`ThumbnailWidget snapshots snapshots: renders as expected with default props 1`] = `null`;
+
+exports[`ThumbnailWidget snapshots snapshots: renders as expected with isLibrary true 1`] = `null`;
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/ThumbnailWidget/constants.js b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/ThumbnailWidget/constants.js
new file mode 100644
index 0000000000..17ee797924
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/ThumbnailWidget/constants.js
@@ -0,0 +1,30 @@
+import { StrictDict } from '../../../../../../utils';
+
+export const acceptedImgKeys = StrictDict({
+  gif: '.gif',
+  jpg: '.jpg',
+  jpeg: '.jpeg',
+  png: '.png',
+  bmp: '.bmp',
+  bmp2: '.bmp2',
+});
+export const MAX_FILE_SIZE_MB = 2000000;
+export const MIN_FILE_SIZE_KB = 2000;
+export const MAX_WIDTH = 1280;
+export const MAX_HEIGHT = 720;
+export const MIN_WIDTH = 640;
+export const MIN_HEIGHT = 360;
+// eslint-disable-next-line no-loss-of-precision, @typescript-eslint/no-loss-of-precision
+export const ASPECT_RATIO = 1.7777777777777777777;
+export const ASPECT_RATIO_ERROR_MARGIN = 0.1;
+export default {
+  acceptedImgKeys,
+  MAX_FILE_SIZE_MB,
+  MIN_FILE_SIZE_KB,
+  MAX_WIDTH,
+  MAX_HEIGHT,
+  MIN_WIDTH,
+  MIN_HEIGHT,
+  ASPECT_RATIO,
+  ASPECT_RATIO_ERROR_MARGIN,
+};
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/ThumbnailWidget/hooks.js b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/ThumbnailWidget/hooks.js
new file mode 100644
index 0000000000..6277ac4bd5
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/ThumbnailWidget/hooks.js
@@ -0,0 +1,160 @@
+import React from 'react';
+import { useDispatch } from 'react-redux';
+import { actions, thunkActions } from '../../../../../../data/redux';
+import * as constants from './constants';
+// This 'module' self-import hack enables mocking during tests.
+// See src/editors/decisions/0005-internal-editor-testability-decisions.md. The whole approach to how hooks are tested
+// should be re-thought and cleaned up to avoid this pattern.
+// eslint-disable-next-line import/no-self-import
+import * as module from './hooks';
+
+export const state = {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  showSizeError: (args) => React.useState(args),
+};
+
+/** resampledFile({ canvasUrl, filename, mimeType })
+ * resampledFile takes a canvasUrl, filename, and a valid mimeType. The
+ * canvasUrl is parsed and written to an 8-bit array of unsigned integers. The
+ * new array is saved to  a new file with the same filename as the original image.
+ * @param {string} canvasUrl - string of base64 URL for new image canvas
+ * @param {string} filename - string of the original image's filename
+ * @param {string} mimeType - string of mimeType for the canvas
+ * @return {File} new File object
+ */
+export const createResampledFile = ({ canvasUrl, filename, mimeType }) => {
+  const arr = canvasUrl.split(',');
+  const bstr = atob(arr[1]);
+  let n = bstr.length;
+  const u8arr = new Uint8Array(n);
+  while (n--) {
+    u8arr[n] = bstr.charCodeAt(n);
+  }
+  return new File([u8arr], filename, { type: mimeType });
+};
+
+/** resampleImage({ image, filename })
+ * resampledImage takes a canvasUrl, filename, and a valid mimeType. The
+ * canvasUrl is parsed and written to an 8-bit array of unsigned integers. The
+ * new array is saved to  a new file with the same filename as the original image.
+ * @param {File} canvasUrl - string of base64 URL for new image canvas
+ * @param {string} filename - string of the image's filename
+ * @return {array} array containing the base64 URL for the resampled image and the file containing the resampled image
+ */
+export const resampleImage = ({ image, filename }) => {
+  const canvas = document.createElement('canvas');
+  const ctx = canvas.getContext('2d');
+
+  // Determine new dimensions for image
+  if (image.naturalWidth > constants.MAX_WIDTH) {
+    // Set dimensions to the maximum size
+    canvas.width = constants.MAX_WIDTH;
+    canvas.height = constants.MAX_HEIGHT;
+  } else if (image.naturalWidth < constants.MIN_WIDTH) {
+    // Set dimensions to the minimum size
+    canvas.width = constants.MIN_WIDTH;
+    canvas.height = constants.MIN_HEIGHT;
+  } else {
+    // Set dimensions to the closest 16:9 ratio
+    const heightRatio = 9 / 16;
+    canvas.width = image.naturalWidth;
+    canvas.height = image.naturalWidth * heightRatio;
+  }
+  const cropLeft = (image.naturalWidth - canvas.width) / 2;
+  const cropTop = (image.naturalHeight - canvas.height) / 2;
+
+  ctx.drawImage(image, cropLeft, cropTop, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height);
+
+  const resampledFile = module.createResampledFile({ canvasUrl: canvas.toDataURL(), filename, mimeType: 'image/png' });
+  return [canvas.toDataURL(), resampledFile];
+};
+
+export const checkValidDimensions = ({ width, height }) => {
+  if (width < constants.MIN_WIDTH || height < height.MIN_WIDTH) {
+    return false;
+  }
+  const imageAspectRatio = Math.abs((width / height) - constants.ASPECT_RATIO);
+  if (imageAspectRatio >= constants.ASPECT_RATIO_ERROR_MARGIN) {
+    return false;
+  }
+  return true;
+};
+export const checkValidSize = ({ file, onSizeFail }) => {
+  // Check if the file size is greater than 2 MB, upload size maximum, or
+  // if the file size is greater than 2 KB, upload size minimum
+  if (file.size > constants.MAX_FILE_SIZE_MB || file.size < constants.MIN_FILE_SIZE_KB) {
+    onSizeFail();
+    return false;
+  }
+  return true;
+};
+
+export const fileInput = ({ setThumbnailSrc, imgRef, fileSizeError }) => {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const dispatch = useDispatch();
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const ref = React.useRef();
+  const click = () => ref.current.click();
+  const addFile = (e) => {
+    const file = e.target.files[0];
+    const reader = new FileReader();
+    if (file && module.checkValidSize({
+      file,
+      onSizeFail: () => {
+        fileSizeError.set();
+      },
+    })) {
+      reader.onload = () => {
+        setThumbnailSrc(reader.result);
+        const image = imgRef.current;
+        image.onload = () => {
+          if (!module.checkValidDimensions({ width: image.naturalWidth, height: image.naturalHeight })) {
+            const [resampledUrl, resampledFile] = module.resampleImage({ image, filename: file.name });
+            setThumbnailSrc(resampledUrl);
+            dispatch(thunkActions.video.uploadThumbnail({ thumbnail: resampledFile }));
+            dispatch(actions.video.updateField({ thumbnail: resampledUrl }));
+            return;
+          }
+          dispatch(thunkActions.video.uploadThumbnail({ thumbnail: file }));
+          dispatch(actions.video.updateField({ thumbnail: reader.result }));
+        };
+      };
+      dispatch(actions.video.updateField({ thumbnail: ' ' }));
+      reader.readAsDataURL(file);
+    }
+  };
+  return {
+    click,
+    addFile,
+    ref,
+  };
+};
+
+export const fileSizeError = () => {
+  const [showSizeError, setShowSizeError] = module.state.showSizeError(false);
+  return {
+    fileSizeError: {
+      show: showSizeError,
+      set: () => setShowSizeError(true),
+      dismiss: () => setShowSizeError(false),
+    },
+  };
+};
+
+export const deleteThumbnail = ({ dispatch }) => () => {
+  dispatch(actions.video.updateField({ thumbnail: null }));
+  const emptyCanvas = document.createElement('canvas');
+  const ctx = emptyCanvas.getContext('2d');
+  emptyCanvas.width = constants.MAX_WIDTH;
+  emptyCanvas.height = constants.MAX_HEIGHT;
+  ctx.fillStyle = 'black';
+  ctx.fillRect(0, 0, emptyCanvas.width, emptyCanvas.height);
+  const file = createResampledFile({ canvasUrl: emptyCanvas.toDataURL(), filename: 'blankThumbnail.png', mimeType: 'image/png' });
+  dispatch(thunkActions.video.uploadThumbnail({ thumbnail: file, emptyCanvas }));
+};
+
+export default {
+  fileInput,
+  fileSizeError,
+  deleteThumbnail,
+};
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/ThumbnailWidget/hooks.test.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/ThumbnailWidget/hooks.test.jsx
new file mode 100644
index 0000000000..d59b541fad
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/ThumbnailWidget/hooks.test.jsx
@@ -0,0 +1,147 @@
+import 'CourseAuthoring/editors/setupEditorTest';
+import React from 'react';
+import { useDispatch } from 'react-redux';
+import { actions, thunkActions } from '../../../../../../data/redux';
+import { MockUseState } from '../../../../../../testUtils';
+import { keyStore } from '../../../../../../utils';
+import * as hooks from './hooks';
+
+jest.mock('react', () => ({
+  ...jest.requireActual('react'),
+  useRef: jest.fn(val => ({ current: val })),
+  useEffect: jest.fn(),
+  useCallback: (cb, prereqs) => ({ cb, prereqs }),
+}));
+
+jest.mock('../../../../../../data/redux', () => ({
+  actions: {
+    video: {
+      updateField: jest.fn(),
+    },
+  },
+  thunkActions: {
+    video: {
+      uploadThumbnail: jest.fn(),
+    },
+  },
+}));
+
+const state = new MockUseState(hooks);
+const hookKeys = keyStore(hooks);
+let hook;
+const setThumbnailSrc = jest.fn();
+const testValue = 'testVALUEVALIDIMAGE';
+const selectedFileSuccess = { name: testValue, size: 20000 };
+const maxFileFail = { name: testValue, size: 20000000 };
+const minFileFail = { name: testValue, size: 200 };
+const resampledFile = new File([selectedFileSuccess], testValue);
+const imgRef = React.useRef.mockReturnValueOnce({ current: undefined });
+
+describe('state hooks', () => {
+  state.testGetter(state.keys.showSizeError);
+});
+
+describe('createResampledFile', () => {
+  it('should return resampled file object', () => {
+    hook = hooks.createResampledFile({ canvasUrl: 'data:MimETYpe,sOMEUrl', filename: testValue, mimeType: 'sOmEuiMAge' });
+    expect(hook).toEqual(resampledFile);
+  });
+});
+describe('resampleImage', () => {
+  it('should return filename and file', () => {
+    const spy = jest.spyOn(hooks, hookKeys.createResampledFile)
+      .mockReturnValueOnce(resampledFile);
+    const image = document.createElement('img');
+    image.height = '800';
+    image.width = '800';
+    hook = hooks.resampleImage({ image, filename: testValue });
+    expect(spy).toHaveBeenCalledWith({ canvasUrl: 'data:image/png;base64,00', filename: testValue, mimeType: 'image/png' });
+    expect(spy.mock.calls.length).toEqual(1);
+    expect(spy).toHaveReturnedWith(resampledFile);
+    expect(hook).toEqual(['data:image/png;base64,00', resampledFile]);
+  });
+});
+describe('checkValidDimensions', () => {
+  it('returns false for images less than min width and min height', () => {
+    hook = hooks.checkValidDimensions({ width: 500, height: 281 });
+    expect(hook).toEqual(false);
+  });
+  it('returns false for images that do not have a 16:9 aspect ratio', () => {
+    hook = hooks.checkValidDimensions({ width: 800, height: 800 });
+    expect(hook).toEqual(false);
+  });
+  it('returns true for images that have a 16:9 aspect ratio and larger than min width/height', () => {
+    hook = hooks.checkValidDimensions({ width: 1280, height: 720 });
+    expect(hook).toEqual(true);
+  });
+});
+describe('checkValidSize', () => {
+  const onSizeFail = jest.fn();
+  it('returns false for valid max file size', () => {
+    hook = hooks.checkValidSize({ file: maxFileFail, onSizeFail });
+    expect(onSizeFail).toHaveBeenCalled();
+    expect(hook).toEqual(false);
+  });
+  it('returns false for valid max file size', () => {
+    hook = hooks.checkValidSize({ file: minFileFail, onSizeFail });
+    expect(onSizeFail).toHaveBeenCalled();
+    expect(hook).toEqual(false);
+  });
+  it('returns true for valid file size', () => {
+    hook = hooks.checkValidSize({ file: selectedFileSuccess, onSizeFail });
+    expect(hook).toEqual(true);
+  });
+});
+describe('fileInput', () => {
+  const spies = {};
+  const fileSizeError = { set: jest.fn() };
+  beforeEach(() => {
+    hook = hooks.fileInput({ setThumbnailSrc, imgRef, fileSizeError });
+  });
+  it('returns a ref for the file input', () => {
+    expect(hook.ref).toEqual({ current: undefined });
+  });
+  test('click calls current.click on the ref', () => {
+    const click = jest.fn();
+    React.useRef.mockReturnValueOnce({ current: { click } });
+    hook = hooks.fileInput({ setThumbnailSrc, imgRef, fileSizeError });
+    hook.click();
+    expect(click).toHaveBeenCalled();
+  });
+  describe('addFile', () => {
+    const eventSuccess = { target: { files: [new File([selectedFileSuccess], 'sOMEUrl.jpg')] } };
+    const eventFailure = { target: { files: [maxFileFail] } };
+    it('image fails to upload if file size is greater than 1000000', () => {
+      const checkValidSize = false;
+      spies.checkValidSize = jest.spyOn(hooks, hookKeys.checkValidSize)
+        .mockReturnValueOnce(checkValidSize);
+      hook.addFile(eventFailure);
+      expect(spies.checkValidSize.mock.calls.length).toEqual(1);
+      expect(spies.checkValidSize).toHaveReturnedWith(false);
+    });
+    it('dispatches updateField action with the first target file', () => {
+      const dispatch = useDispatch(); // Access the mock 'dispatch()' set up in setupEditorTest
+      const checkValidSize = true;
+      spies.checkValidSize = jest.spyOn(hooks, hookKeys.checkValidSize)
+        .mockReturnValueOnce(checkValidSize);
+      hook.addFile(eventSuccess);
+      expect(spies.checkValidSize).toHaveReturnedWith(true);
+      expect(dispatch).toHaveBeenCalledWith(actions.video.updateField({ thumbnail: ' ' }));
+      expect(dispatch).toHaveBeenCalledWith(
+        thunkActions.video.uploadThumbnail({
+          thumbnail: eventSuccess.target.files[0],
+        }),
+      );
+    });
+  });
+  describe('deleteThumbnail', () => {
+    const dispatch = useDispatch(); // Access the mock 'dispatch()' set up in setupEditorTest
+    const testFile = new File([selectedFileSuccess], 'sOMEUrl.jpg');
+    hooks.deleteThumbnail({ dispatch })();
+    expect(dispatch).toHaveBeenNthCalledWith(1, actions.video.updateField({ thumbnail: null }));
+    expect(dispatch).toHaveBeenNthCalledWith(2, thunkActions.video.uploadThumbnail({
+      thumbnail: testFile,
+      emptyCanvas: true,
+    }));
+  });
+});
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/ThumbnailWidget/index.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/ThumbnailWidget/index.jsx
new file mode 100644
index 0000000000..47e66306c4
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/ThumbnailWidget/index.jsx
@@ -0,0 +1,147 @@
+import React from 'react';
+import { connect, useDispatch } from 'react-redux';
+import PropTypes from 'prop-types';
+import {
+  FormattedMessage,
+  injectIntl,
+  intlShape,
+} from '@edx/frontend-platform/i18n';
+import {
+  Image,
+  Stack,
+  Button,
+  Icon,
+  IconButtonWithTooltip,
+  Alert,
+} from '@openedx/paragon';
+import { DeleteOutline, FileUpload } from '@openedx/paragon/icons';
+
+import { selectors } from '../../../../../../data/redux';
+import { isEdxVideo } from '../../../../../../data/services/cms/api';
+
+import { acceptedImgKeys } from './constants';
+import * as hooks from './hooks';
+import messages from './messages';
+
+import CollapsibleFormWidget from '../CollapsibleFormWidget';
+import { FileInput } from '../../../../../../sharedComponents/FileInput';
+import ErrorAlert from '../../../../../../sharedComponents/ErrorAlerts/ErrorAlert';
+import { ErrorContext } from '../../../../hooks';
+
+/**
+ * Collapsible Form widget controlling video thumbnail
+ */
+const ThumbnailWidget = ({
+  // injected
+  intl,
+  // redux
+  isLibrary,
+  allowThumbnailUpload,
+  thumbnail,
+  videoId,
+}) => {
+  const dispatch = useDispatch();
+  const [error] = React.useContext(ErrorContext).thumbnail;
+  const imgRef = React.useRef();
+  const [thumbnailSrc, setThumbnailSrc] = React.useState(thumbnail);
+  const { fileSizeError } = hooks.fileSizeError();
+  const fileInput = hooks.fileInput({
+    setThumbnailSrc,
+    imgRef,
+    fileSizeError,
+  });
+  const edxVideo = isEdxVideo(videoId);
+  const deleteThumbnail = hooks.deleteThumbnail({ dispatch });
+  const getSubtitle = () => {
+    if (edxVideo) {
+      if (thumbnail) {
+        return intl.formatMessage(messages.yesSubtitle);
+      }
+      return intl.formatMessage(messages.noneSubtitle);
+    }
+    return intl.formatMessage(messages.unavailableSubtitle);
+  };
+  return (!isLibrary && edxVideo ? (
+    <CollapsibleFormWidget
+      fontSize="x-small"
+      isError={Object.keys(error).length !== 0}
+      title={intl.formatMessage(messages.title)}
+      subtitle={getSubtitle()}
+    >
+      <ErrorAlert
+        dismissError={fileSizeError.dismiss}
+        hideHeading
+        isError={fileSizeError.show}
+      >
+        <FormattedMessage {...messages.fileSizeError} />
+      </ErrorAlert>
+      {!allowThumbnailUpload && (
+        <Alert variant="light">
+          <FormattedMessage {...messages.unavailableMessage} />
+        </Alert>
+      )}
+      {thumbnail ? (
+        <Stack direction="horizontal" gap={3}>
+          <Image
+            thumbnail
+            fluid
+            className="w-75"
+            ref={imgRef}
+            src={thumbnailSrc || thumbnail}
+            alt={intl.formatMessage(messages.thumbnailAltText)}
+          />
+          {allowThumbnailUpload && (
+            <IconButtonWithTooltip
+              tooltipPlacement="top"
+              tooltipContent={intl.formatMessage(messages.deleteThumbnail)}
+              iconAs={Icon}
+              src={DeleteOutline}
+              onClick={deleteThumbnail}
+            />
+          )}
+        </Stack>
+      ) : (
+        <Stack gap={4}>
+          <div className="text-center">
+            <FormattedMessage {...messages.addThumbnail} />
+            <div className="text-primary-300">
+              <FormattedMessage {...messages.aspectRequirements} />
+            </div>
+          </div>
+          <FileInput fileInput={fileInput} acceptedFiles={Object.values(acceptedImgKeys).join()} />
+          <Button
+            className="text-primary-500 font-weight-bold justify-content-start pl-0"
+            size="sm"
+            iconBefore={FileUpload}
+            onClick={fileInput.click}
+            variant="link"
+            disabled={!allowThumbnailUpload}
+          >
+            <FormattedMessage {...messages.uploadButtonLabel} />
+          </Button>
+        </Stack>
+      )}
+    </CollapsibleFormWidget>
+  ) : null);
+};
+
+ThumbnailWidget.propTypes = {
+  // injected
+  intl: intlShape.isRequired,
+  // redux
+  isLibrary: PropTypes.bool.isRequired,
+  allowThumbnailUpload: PropTypes.bool.isRequired,
+  thumbnail: PropTypes.string.isRequired,
+  videoId: PropTypes.string.isRequired,
+};
+export const mapStateToProps = (state) => ({
+  isLibrary: selectors.app.isLibrary(state),
+  allowThumbnailUpload: selectors.video.allowThumbnailUpload(state),
+  thumbnail: selectors.video.thumbnail(state),
+  videoId: selectors.video.videoId(state),
+});
+
+export const mapDispatchToProps = {};
+
+export const ThumbnailWidgetInternal = ThumbnailWidget; // For testing only
+export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(ThumbnailWidget));
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/ThumbnailWidget/index.test.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/ThumbnailWidget/index.test.jsx
new file mode 100644
index 0000000000..0b761701c6
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/ThumbnailWidget/index.test.jsx
@@ -0,0 +1,106 @@
+import 'CourseAuthoring/editors/setupEditorTest';
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+
+import { formatMessage } from '../../../../../../testUtils';
+import { selectors } from '../../../../../../data/redux';
+import { ThumbnailWidgetInternal as ThumbnailWidget, mapStateToProps, mapDispatchToProps } from '.';
+
+jest.mock('react', () => ({
+  ...jest.requireActual('react'),
+  useContext: jest.fn(() => ({ thumbnail: ['error.thumbnail', jest.fn().mockName('error.setThumbnail')] })),
+}));
+jest.mock('../../../../../../data/redux', () => ({
+  actions: {
+    video: {
+      updateField: jest.fn().mockName('actions.video.updateField'),
+    },
+  },
+  selectors: {
+    video: {
+      allowThumbnailUpload: jest.fn(state => ({ allowThumbnailUpload: state })),
+      thumbnail: jest.fn(state => ({ thumbnail: state })),
+      videoId: jest.fn(state => ({ videoId: state })),
+    },
+    app: {
+      isLibrary: jest.fn(state => ({ isLibrary: state })),
+    },
+  },
+}));
+
+jest.mock('../../../../../../data/services/cms/api', () => ({
+  isEdxVideo: (args) => (args),
+}));
+
+describe('ThumbnailWidget', () => {
+  const props = {
+    error: {},
+    title: 'tiTLE',
+    intl: { formatMessage },
+    isLibrary: false,
+    allowThumbnailUpload: false,
+    thumbnail: null,
+    videoId: '',
+    updateField: jest.fn().mockName('args.updateField'),
+  };
+  describe('snapshots', () => {
+    test('snapshots: renders as expected with default props', () => {
+      expect(
+        shallow(<ThumbnailWidget {...props} />).snapshot,
+      ).toMatchSnapshot();
+    });
+    test('snapshots: renders as expected with isLibrary true', () => {
+      expect(
+        shallow(<ThumbnailWidget {...props} isLibrary />).snapshot,
+      ).toMatchSnapshot();
+    });
+    test('snapshots: renders as expected with a thumbnail provided', () => {
+      expect(
+        shallow(<ThumbnailWidget {...props} thumbnail="sOMeUrl" videoId="sOMeViDEoID" />).snapshot,
+      ).toMatchSnapshot();
+    });
+    test('snapshots: renders as expected where thumbnail uploads are allowed', () => {
+      expect(
+        shallow(<ThumbnailWidget {...props} thumbnail="sOMeUrl" allowThumbnailUpload />).snapshot,
+      ).toMatchSnapshot();
+    });
+    test('snapshots: renders as expected where videoId is valid', () => {
+      expect(
+        shallow(<ThumbnailWidget {...props} thumbnail="sOMeUrl" allowThumbnailUpload videoId="sOMeViDEoID" />).snapshot,
+      ).toMatchSnapshot();
+    });
+    test('snapshots: renders as expected where videoId is valid and no thumbnail', () => {
+      expect(
+        shallow(<ThumbnailWidget {...props} allowThumbnailUpload videoId="sOMeViDEoID" />).snapshot,
+      ).toMatchSnapshot();
+    });
+  });
+  describe('mapStateToProps', () => {
+    const testState = { A: 'pple', B: 'anana', C: 'ucumber' };
+    test('isLibrary from app.isLibrary', () => {
+      expect(
+        mapStateToProps(testState).isLibrary,
+      ).toEqual(selectors.app.isLibrary(testState));
+    });
+    test('allowThumbnailUpload from video.allowThumbnailUpload', () => {
+      expect(
+        mapStateToProps(testState).allowThumbnailUpload,
+      ).toEqual(selectors.video.allowThumbnailUpload(testState));
+    });
+    test('thumbnail from video.thumbnail', () => {
+      expect(
+        mapStateToProps(testState).thumbnail,
+      ).toEqual(selectors.video.thumbnail(testState));
+    });
+    test('videoId from video.videoId', () => {
+      expect(
+        mapStateToProps(testState).videoId,
+      ).toEqual(selectors.video.videoId(testState));
+    });
+  });
+  describe('mapDispatchToProps', () => {
+    test('mapDispatchToProps to equal an empty object', () => {
+      expect(mapDispatchToProps).toEqual({});
+    });
+  });
+});
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/ThumbnailWidget/messages.js b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/ThumbnailWidget/messages.js
new file mode 100644
index 0000000000..e930448cbe
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/ThumbnailWidget/messages.js
@@ -0,0 +1,65 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+
+  title: {
+    id: 'authoring.videoeditor.thumbnail.title',
+    defaultMessage: 'Thumbnail',
+    description: 'Title for thumbnail widget',
+  },
+  unavailableSubtitle: {
+    id: 'authoring.videoeditor.thumbnail.unavailable.subtitle',
+    defaultMessage: 'Unavailable',
+    description: 'Subtitle for unavailable thumbnail widget',
+  },
+  noneSubtitle: {
+    id: 'authoring.videoeditor.thumbnail.none.subtitle',
+    defaultMessage: 'None',
+    description: 'Subtitle for when no thumbnail has been uploaded to the widget',
+  },
+  yesSubtitle: {
+    id: 'authoring.videoeditor.thumbnail.yes.subtitle',
+    defaultMessage: 'Yes',
+    description: 'Subtitle for when thumbnail has been uploaded to the widget',
+  },
+  unavailableMessage: {
+    id: 'authoring.videoeditor.thumbnail.unavailable.message',
+    defaultMessage:
+      'Select a video from your library to enable this feature (applies only to courses that run on the edx.org site).',
+    description: 'Message for unavailable thumbnail widget',
+  },
+  uploadButtonLabel: {
+    id: 'authoring.videoeditor.thumbnail.upload.label',
+    defaultMessage: 'Upload thumbnail',
+    description: 'Label for upload button',
+  },
+  addThumbnail: {
+    id: 'authoring.videoeditor.thumbnail.upload.message',
+    defaultMessage: 'Upload an image for learners to see before playing the video.',
+    description: 'Message for adding thumbnail',
+  },
+  aspectRequirements: {
+    id: 'authoring.videoeditor.thumbnail.upload.aspectRequirements',
+    defaultMessage: 'Images must have an aspect ratio of 16:9 (1280x720 px recommended)',
+    description: 'Message for thumbnail aspectRequirements',
+  },
+  thumbnailAltText: {
+    id: 'authoring.videoeditor.thumbnail.altText',
+    defaultMessage: 'Image used as thumbnail for video',
+    description: 'Alternative test for thumbnail',
+  },
+  deleteThumbnail: {
+    id: 'authoring.videoeditor.thumbnail.deleteThumbnail',
+    defaultMessage: 'Delete',
+    description: 'Message presented to user for action to delete thumbnail',
+  },
+  fileSizeError: {
+    id: 'authoring.videoeditor.thumbnail.error.fileSizeError',
+    defaultMessage:
+      'The file size for thumbnails must be larger than 2 KB or less than 2 MB. Please resize your image and try again.',
+    description:
+      ' Message presented to user when file size of image is less than 2 KB or larger than 2 MB',
+  },
+});
+
+export default messages;
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/ThumbnailWidget/utils.js b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/ThumbnailWidget/utils.js
new file mode 100644
index 0000000000..1acb5b31c2
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/ThumbnailWidget/utils.js
@@ -0,0 +1,11 @@
+import { StrictDict } from '../../../../../../utils';
+
+export const acceptedImgKeys = StrictDict({
+  gif: '.gif',
+  jpg: '.jpg',
+  jpeg: '.jpeg',
+  png: '.png',
+  bmp: '.bmp',
+});
+
+export default { acceptedImgKeys };
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/ImportTranscriptCard.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/ImportTranscriptCard.jsx
new file mode 100644
index 0000000000..21983b45f3
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/ImportTranscriptCard.jsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+
+import { FormattedMessage, injectIntl } from '@edx/frontend-platform/i18n';
+import {
+  ActionRow,
+  Button,
+  Icon,
+  IconButton,
+  Stack,
+} from '@openedx/paragon';
+import { Close } from '@openedx/paragon/icons';
+
+import messages from './messages';
+import { thunkActions } from '../../../../../../data/redux';
+
+const ImportTranscriptCard = ({
+  setOpen,
+  // redux
+  importTranscript,
+}) => (
+  <Stack gap={3} className="border rounded border-primary-200 p-4">
+    <ActionRow className="h5">
+      <FormattedMessage {...messages.importHeader} />
+      <ActionRow.Spacer />
+      <IconButton
+        src={Close}
+        iconAs={Icon}
+        onClick={() => setOpen(false)}
+      />
+    </ActionRow>
+    <FormattedMessage {...messages.importMessage} />
+    <Button
+      variant="outline-primary"
+      size="sm"
+      onClick={importTranscript}
+    >
+      <FormattedMessage {...messages.importButtonLabel} />
+    </Button>
+  </Stack>
+);
+
+ImportTranscriptCard.defaultProps = {
+  setOpen: true,
+};
+
+ImportTranscriptCard.propTypes = {
+  setOpen: PropTypes.func,
+  // redux
+  importTranscript: PropTypes.func.isRequired,
+};
+
+export const mapStateToProps = () => ({});
+
+export const mapDispatchToProps = {
+  importTranscript: thunkActions.video.importTranscript,
+};
+
+export const ImportTranscriptCardInternal = ImportTranscriptCard; // For testing only
+export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(ImportTranscriptCard));
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/ImportTranscriptCard.test.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/ImportTranscriptCard.test.jsx
new file mode 100644
index 0000000000..1a55bc98ca
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/ImportTranscriptCard.test.jsx
@@ -0,0 +1,58 @@
+import 'CourseAuthoring/editors/setupEditorTest';
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+import { Button, IconButton } from '@openedx/paragon';
+
+import { thunkActions } from '../../../../../../data/redux';
+import { ImportTranscriptCardInternal as ImportTranscriptCard, mapDispatchToProps, mapStateToProps } from './ImportTranscriptCard';
+
+jest.mock('react', () => ({
+  ...jest.requireActual('react'),
+  useContext: jest.fn(() => ({ transcripts: ['error.transcripts', jest.fn().mockName('error.setTranscripts')] })),
+}));
+
+jest.mock('../../../../../../data/redux', () => ({
+  thunkActions: {
+    video: {
+      importTranscript: jest.fn().mockName('thunkActions.video.importTranscript'),
+    },
+  },
+}));
+
+describe('ImportTranscriptCard', () => {
+  const props = {
+    setOpen: jest.fn().mockName('setOpen'),
+    importTranscript: jest.fn().mockName('args.importTranscript'),
+  };
+  let el;
+  describe('snapshots', () => {
+    test('snapshots: renders as expected with default props', () => {
+      expect(
+        shallow(<ImportTranscriptCard {...props} />).snapshot,
+      ).toMatchSnapshot();
+    });
+  });
+  describe('behavior inspection', () => {
+    beforeEach(() => {
+      el = shallow(<ImportTranscriptCard {...props} />);
+    });
+    test('close behavior is linked to IconButton', () => {
+      expect(el.instance.findByType(IconButton)[0]
+        .props.onClick).toBeDefined();
+    });
+    test('import behavior is linked to Button onClick', () => {
+      expect(el.instance.findByType(Button)[0]
+        .props.onClick).toEqual(props.importTranscript);
+    });
+  });
+  describe('mapStateToProps', () => {
+    it('returns an empty object', () => {
+      expect(mapStateToProps()).toEqual({});
+    });
+  });
+  describe('mapDispatchToProps', () => {
+    test('updateField from thunkActions.video.importTranscript', () => {
+      expect(mapDispatchToProps.importTranscript).toEqual(thunkActions.video.importTranscript);
+    });
+  });
+});
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/LanguageSelector.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/LanguageSelector.jsx
new file mode 100644
index 0000000000..90d3ec235b
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/LanguageSelector.jsx
@@ -0,0 +1,137 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import {
+  ActionRow,
+  Dropdown,
+  Button,
+  Icon,
+} from '@openedx/paragon';
+
+import { Check } from '@openedx/paragon/icons';
+import { connect, useDispatch } from 'react-redux';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { thunkActions, selectors } from '../../../../../../data/redux';
+import { videoTranscriptLanguages } from '../../../../../../data/constants/video';
+import { FileInput, fileInput } from '../../../../../../sharedComponents/FileInput';
+import messages from './messages';
+// This 'module' self-import hack enables mocking during tests.
+// See src/editors/decisions/0005-internal-editor-testability-decisions.md. The whole approach to how hooks are tested
+// should be re-thought and cleaned up to avoid this pattern.
+// eslint-disable-next-line import/no-self-import
+import * as module from './LanguageSelector';
+
+export const hooks = {
+  onSelectLanguage: ({
+    dispatch, languageBeforeChange, triggerupload, setLocalLang,
+  }) => ({ newLang }) => {
+    // IF Language is unset, set language and begin upload prompt.
+    setLocalLang(newLang);
+    if (languageBeforeChange === '') {
+      triggerupload();
+      return;
+    }
+    // Else: update language
+    dispatch(
+      thunkActions.video.updateTranscriptLanguage({
+        newLanguageCode: newLang, languageBeforeChange,
+      }),
+    );
+  },
+
+  addFileCallback: ({ dispatch, localLang }) => (file) => {
+    dispatch(thunkActions.video.uploadTranscript({
+      file,
+      filename: file.name,
+      language: localLang,
+    }));
+  },
+
+};
+
+const LanguageSelector = ({
+  index, // For a unique id for the form control
+  language,
+  // Redux
+  openLanguages, // Only allow those languages not already associated with a transcript to be selected
+  // intl
+  intl,
+
+}) => {
+  const [localLang, setLocalLang] = React.useState(language);
+  const input = fileInput({ onAddFile: hooks.addFileCallback({ dispatch: useDispatch(), localLang }) });
+  const onLanguageChange = module.hooks.onSelectLanguage({
+    dispatch: useDispatch(), languageBeforeChange: localLang, setLocalLang, triggerupload: input.click,
+  });
+
+  const getTitle = () => {
+    if (Object.prototype.hasOwnProperty.call(videoTranscriptLanguages, language)) {
+      return (
+        <ActionRow>
+          {videoTranscriptLanguages[language]}
+          <ActionRow.Spacer />
+          <Icon className="text-primary-500" src={Check} />
+        </ActionRow>
+
+      );
+    }
+    return (
+      <ActionRow>
+        {intl.formatMessage(messages.languageSelectPlaceholder)}
+        <ActionRow.Spacer />
+      </ActionRow>
+    );
+  };
+
+  return (
+    <>
+
+      <Dropdown
+        className="w-100 mb-2"
+      >
+        <Dropdown.Toggle
+          iconAs={Button}
+          aria-label={intl.formatMessage(messages.languageSelectLabel)}
+          block
+          id={`selectLanguage-form-${index}`}
+          className="w-100"
+          variant="outline-primary"
+        >
+          {getTitle()}
+        </Dropdown.Toggle>
+        <Dropdown.Menu>
+          {Object.entries(videoTranscriptLanguages).map(([lang, text]) => {
+            if (language === lang) {
+              return (<Dropdown.Item>{text}<Icon className="text-primary-500" src={Check} /></Dropdown.Item>);
+            }
+            if (openLanguages.some(row => row.includes(lang))) {
+              return (<Dropdown.Item onClick={() => onLanguageChange({ newLang: lang })}>{text}</Dropdown.Item>);
+            }
+            return (<Dropdown.Item className="disabled">{text}</Dropdown.Item>);
+          })}
+        </Dropdown.Menu>
+      </Dropdown>
+      <FileInput fileInput={input} acceptedFiles=".srt" />
+    </>
+  );
+};
+
+LanguageSelector.defaultProps = {
+  openLanguages: [],
+};
+
+LanguageSelector.propTypes = {
+  openLanguages: PropTypes.arrayOf(PropTypes.string),
+  index: PropTypes.number.isRequired,
+  language: PropTypes.string.isRequired,
+  intl: intlShape.isRequired,
+};
+
+export const mapStateToProps = (state) => ({
+  openLanguages: selectors.video.openLanguages(state),
+});
+
+export const mapDispatchToProps = {};
+
+export const LanguageSelectorInternal = LanguageSelector; // For testing only
+export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(LanguageSelector));
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/LanguageSelector.test.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/LanguageSelector.test.jsx
new file mode 100644
index 0000000000..0eae896c6f
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/LanguageSelector.test.jsx
@@ -0,0 +1,45 @@
+import 'CourseAuthoring/editors/setupEditorTest';
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+import { LanguageSelectorInternal as LanguageSelector } from './LanguageSelector';
+import { formatMessage } from '../../../../../../testUtils';
+
+const lang1 = 'kLinGon';
+const lang1Code = 'kl';
+const lang2 = 'eLvIsh';
+const lang2Code = 'el';
+const lang3 = 'sImLisH';
+const lang3Code = 'sl';
+
+jest.mock('../../../../../../data/constants/video', () => ({
+  videoTranscriptLanguages: {
+    [lang1Code]: lang1,
+    [lang2Code]: lang2,
+    [lang3Code]: lang3,
+  },
+}));
+
+describe('LanguageSelector', () => {
+  const props = {
+    intl: { formatMessage },
+    onSelect: jest.fn().mockName('props.OnSelect'),
+    title: 'tITle',
+    language: lang1Code,
+    openLanguages: [[lang2Code, lang2], [lang3Code, lang3]],
+
+  };
+  describe('snapshot', () => {
+    test('transcript option', () => {
+      expect(
+        shallow(<LanguageSelector {...props} />).snapshot,
+      ).toMatchSnapshot();
+    });
+  });
+  describe('snapshots -- no', () => {
+    test('transcripts no Open Languages, all should be disabled', () => {
+      expect(
+        shallow(<LanguageSelector {...props} openLanguages={[]} />).snapshot,
+      ).toMatchSnapshot();
+    });
+  });
+});
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/Transcript.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/Transcript.jsx
new file mode 100644
index 0000000000..6300fee194
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/Transcript.jsx
@@ -0,0 +1,128 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { connect } from 'react-redux';
+
+import {
+  Card,
+  Button,
+  IconButton,
+  Icon,
+  ActionRow,
+} from '@openedx/paragon';
+import { DeleteOutline } from '@openedx/paragon/icons';
+
+import {
+  FormattedMessage,
+  injectIntl,
+} from '@edx/frontend-platform/i18n';
+import { thunkActions } from '../../../../../../data/redux';
+
+import TranscriptActionMenu from './TranscriptActionMenu';
+import LanguageSelector from './LanguageSelector';
+// This 'module' self-import hack enables mocking during tests.
+// See src/editors/decisions/0005-internal-editor-testability-decisions.md. The whole approach to how hooks are tested
+// should be re-thought and cleaned up to avoid this pattern.
+// eslint-disable-next-line import/no-self-import
+import * as module from './Transcript';
+import messages from './messages';
+
+export const hooks = {
+  state: {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+    inDeleteConfirmation: (args) => React.useState(args),
+  },
+  setUpDeleteConfirmation: () => {
+    const [inDeleteConfirmation, setInDeleteConfirmation] = module.hooks.state.inDeleteConfirmation(false);
+    return {
+      inDeleteConfirmation,
+      launchDeleteConfirmation: () => setInDeleteConfirmation(true),
+      cancelDelete: () => setInDeleteConfirmation(false),
+    };
+  },
+};
+
+const Transcript = ({
+  index,
+  language,
+  transcriptUrl,
+  // redux
+  deleteTranscript,
+}) => {
+  const { inDeleteConfirmation, launchDeleteConfirmation, cancelDelete } = module.hooks.setUpDeleteConfirmation();
+  return (
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    <>
+      {inDeleteConfirmation
+        ? (
+          <Card className="mb-2">
+            <Card.Header title={(<FormattedMessage {...messages.deleteConfirmationHeader} />)} />
+            <Card.Body>
+              <Card.Section>
+                <FormattedMessage {...messages.deleteConfirmationMessage} />
+              </Card.Section>
+              <Card.Footer>
+                <Button variant="tertiary" className="mb-2 mb-sm-0" onClick={cancelDelete}>
+                  <FormattedMessage {...messages.cancelDeleteLabel} />
+                </Button>
+                <Button
+                  variant="danger"
+                  className="mb-2 mb-sm-0"
+                  onClick={() => {
+                    deleteTranscript({ language });
+                    // stop showing the card
+                    cancelDelete();
+                  }}
+                >
+                  <FormattedMessage {...messages.confirmDeleteLabel} />
+                </Button>
+              </Card.Footer>
+            </Card.Body>
+          </Card>
+        )
+        : (
+          <ActionRow>
+            <LanguageSelector
+              title={index}
+              language={language}
+            />
+            <ActionRow.Spacer />
+            { language === '' ? (
+              <IconButton
+                iconAs={Icon}
+                src={DeleteOutline}
+                onClick={() => launchDeleteConfirmation()}
+              />
+            ) : (
+              <TranscriptActionMenu
+                index={index}
+                language={language}
+                transcriptUrl={transcriptUrl}
+                launchDeleteConfirmation={launchDeleteConfirmation}
+              />
+            )}
+          </ActionRow>
+        )}
+    </>
+  );
+};
+
+Transcript.defaultProps = {
+  transcriptUrl: undefined,
+};
+
+Transcript.propTypes = {
+  index: PropTypes.number.isRequired,
+  language: PropTypes.string.isRequired,
+  transcriptUrl: PropTypes.string,
+  deleteTranscript: PropTypes.func.isRequired,
+};
+
+export const mapStateToProps = () => ({
+});
+export const mapDispatchToProps = {
+  deleteTranscript: thunkActions.video.deleteTranscript,
+};
+
+export const TranscriptInternal = Transcript; // For testing only
+export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(Transcript));
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/Transcript.test.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/Transcript.test.jsx
new file mode 100644
index 0000000000..ed16d2f530
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/Transcript.test.jsx
@@ -0,0 +1,98 @@
+import 'CourseAuthoring/editors/setupEditorTest';
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+
+import * as module from './Transcript';
+
+import { MockUseState } from '../../../../../../testUtils';
+
+const Transcript = module.TranscriptInternal;
+
+jest.mock('./LanguageSelector', () => 'LanguageSelector');
+jest.mock('./TranscriptActionMenu', () => 'TranscriptActionMenu');
+
+describe('Transcript Component', () => {
+  describe('state hooks', () => {
+    const state = new MockUseState(module.hooks);
+
+    beforeEach(() => {
+      jest.clearAllMocks();
+    });
+    describe('state hooks', () => {
+      state.testGetter(state.keys.inDeleteConfirmation);
+    });
+
+    describe('setUpDeleteConfirmation hook', () => {
+      beforeEach(() => {
+        state.mock();
+      });
+      afterEach(() => {
+        state.restore();
+      });
+      test('inDeleteConfirmation: state values', () => {
+        expect(module.hooks.setUpDeleteConfirmation().inDeleteConfirmation).toEqual(false);
+      });
+      test('inDeleteConfirmation setters: launch', () => {
+        module.hooks.setUpDeleteConfirmation().launchDeleteConfirmation();
+        expect(state.setState[state.keys.inDeleteConfirmation]).toHaveBeenCalledWith(true);
+      });
+      test('inDeleteConfirmation setters: cancel', () => {
+        module.hooks.setUpDeleteConfirmation().cancelDelete();
+        expect(state.setState[state.keys.inDeleteConfirmation]).toHaveBeenCalledWith(false);
+      });
+    });
+  });
+
+  describe('component', () => {
+    describe('component', () => {
+      const props = {
+        index: 'sOmenUmBer',
+        language: 'lAnG',
+        deleteTranscript: jest.fn().mockName('thunkActions.video.deleteTranscript'),
+      };
+      afterAll(() => {
+        jest.clearAllMocks();
+      });
+      test('snapshots: renders as expected with default props: dont show confirm delete', () => {
+        jest.spyOn(module.hooks, 'setUpDeleteConfirmation').mockImplementationOnce(() => ({
+          inDeleteConfirmation: false,
+          launchDeleteConfirmation: jest.fn().mockName('launchDeleteConfirmation'),
+          cancelDelete: jest.fn().mockName('cancelDelete'),
+        }));
+        expect(
+          shallow(<Transcript {...props} />).snapshot,
+        ).toMatchSnapshot();
+      });
+      test('snapshots: renders as expected with default props: dont show confirm delete, language is blank so delete is shown instead of action menu', () => {
+        jest.spyOn(module.hooks, 'setUpDeleteConfirmation').mockImplementationOnce(() => ({
+          inDeleteConfirmation: false,
+          launchDeleteConfirmation: jest.fn().mockName('launchDeleteConfirmation'),
+          cancelDelete: jest.fn().mockName('cancelDelete'),
+        }));
+        expect(
+          shallow(<Transcript {...props} language="" />).snapshot,
+        ).toMatchSnapshot();
+      });
+      test('snapshots: renders as expected with default props: show confirm delete', () => {
+        jest.spyOn(module.hooks, 'setUpDeleteConfirmation').mockImplementationOnce(() => ({
+          inDeleteConfirmation: true,
+          launchDeleteConfirmation: jest.fn().mockName('launchDeleteConfirmation'),
+          cancelDelete: jest.fn().mockName('cancelDelete'),
+        }));
+        expect(
+          shallow(<Transcript {...props} />).snapshot,
+        ).toMatchSnapshot();
+      });
+      test('snapshots: renders as expected with transcriptUrl', () => {
+        jest.spyOn(module.hooks, 'setUpDeleteConfirmation').mockImplementationOnce(() => ({
+          inDeleteConfirmation: false,
+          launchDeleteConfirmation: jest.fn().mockName('launchDeleteConfirmation'),
+          cancelDelete: jest.fn().mockName('cancelDelete'),
+        }));
+        expect(
+          shallow(<Transcript {...props} transcriptUrl="url" />).snapshot,
+        ).toMatchSnapshot();
+      });
+    });
+  });
+});
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/TranscriptActionMenu.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/TranscriptActionMenu.jsx
new file mode 100644
index 0000000000..46f51180bc
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/TranscriptActionMenu.jsx
@@ -0,0 +1,93 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect, useDispatch } from 'react-redux';
+
+import { FormattedMessage, injectIntl } from '@edx/frontend-platform/i18n';
+import { Dropdown, Icon, IconButton } from '@openedx/paragon';
+import { MoreHoriz } from '@openedx/paragon/icons';
+
+import { thunkActions, selectors } from '../../../../../../data/redux';
+
+import { FileInput, fileInput } from '../../../../../../sharedComponents/FileInput';
+// This 'module' self-import hack enables mocking during tests.
+// See src/editors/decisions/0005-internal-editor-testability-decisions.md. The whole approach to how hooks are tested
+// should be re-thought and cleaned up to avoid this pattern.
+// eslint-disable-next-line import/no-self-import
+import * as module from './TranscriptActionMenu';
+import messages from './messages';
+
+export const hooks = {
+  replaceFileCallback: ({ language, dispatch }) => (file) => {
+    dispatch(thunkActions.video.replaceTranscript({
+      newFile: file,
+      newFilename: file.name,
+      language,
+    }));
+  },
+};
+
+const TranscriptActionMenu = ({
+  index,
+  language,
+  transcriptUrl,
+  launchDeleteConfirmation,
+  // redux
+  getTranscriptDownloadUrl,
+  buildTranscriptUrl,
+}) => {
+  const input = fileInput({ onAddFile: module.hooks.replaceFileCallback({ language, dispatch: useDispatch() }) });
+  const downloadLink = transcriptUrl ? buildTranscriptUrl({ transcriptUrl }) : getTranscriptDownloadUrl({ language });
+  return (
+    <Dropdown>
+      <Dropdown.Toggle
+        id="dropdown-toggle-with-iconbutton-video-transcript-widget"
+        as={IconButton}
+        src={MoreHoriz}
+        iconAs={Icon}
+        variant="primary"
+        alt="Actions dropdown"
+      />
+      <Dropdown.Menu className="video_transcript Action Menu">
+        <Dropdown.Item
+          key={`transcript-actions-${index}-replace`}
+          onClick={input.click}
+        >
+          <FormattedMessage {...messages.replaceTranscript} />
+        </Dropdown.Item>
+        <Dropdown.Item key={`transcript-actions-${index}-download`} href={downloadLink}>
+          <FormattedMessage {...messages.downloadTranscript} />
+        </Dropdown.Item>
+        <Dropdown.Item key={`transcript-actions-${index}-delete`} onClick={launchDeleteConfirmation}>
+          <FormattedMessage {...messages.deleteTranscript} />
+        </Dropdown.Item>
+      </Dropdown.Menu>
+      <FileInput fileInput={input} acceptedFiles=".srt" />
+    </Dropdown>
+  );
+};
+
+TranscriptActionMenu.defaultProps = {
+  transcriptUrl: undefined,
+};
+
+TranscriptActionMenu.propTypes = {
+  index: PropTypes.number.isRequired,
+  language: PropTypes.string.isRequired,
+  transcriptUrl: PropTypes.string,
+  launchDeleteConfirmation: PropTypes.func.isRequired,
+  // redux
+  getTranscriptDownloadUrl: PropTypes.func.isRequired,
+  buildTranscriptUrl: PropTypes.func.isRequired,
+};
+
+export const mapStateToProps = (state) => ({
+  getTranscriptDownloadUrl: selectors.video.getTranscriptDownloadUrl(state),
+  buildTranscriptUrl: selectors.video.buildTranscriptUrl(state),
+});
+
+export const mapDispatchToProps = {
+  downloadTranscript: thunkActions.video.downloadTranscript,
+};
+
+export const TranscriptActionMenuInternal = TranscriptActionMenu; // For testing only
+export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(TranscriptActionMenu));
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/TranscriptActionMenu.test.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/TranscriptActionMenu.test.jsx
new file mode 100644
index 0000000000..b23f5040e8
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/TranscriptActionMenu.test.jsx
@@ -0,0 +1,100 @@
+import 'CourseAuthoring/editors/setupEditorTest';
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+
+import { thunkActions, selectors } from '../../../../../../data/redux';
+
+import * as module from './TranscriptActionMenu';
+
+const TranscriptActionMenu = module.TranscriptActionMenuInternal;
+
+jest.mock('react-redux', () => {
+  const dispatchFn = jest.fn().mockName('mockUseDispatch');
+  return {
+    ...jest.requireActual('react-redux'),
+    dispatch: dispatchFn,
+    useDispatch: jest.fn(() => dispatchFn),
+  };
+});
+
+jest.mock('../../../../../../data/redux', () => ({
+  thunkActions: {
+    video: {
+      deleteTranscript: jest.fn().mockName('thunkActions.video.deleteTranscript'),
+      replaceTranscript: jest.fn((args) => ({ replaceTranscript: args })).mockName('thunkActions.video.replaceTranscript'),
+      downloadTranscript: jest.fn().mockName('thunkActions.video.downloadTranscript'),
+    },
+  },
+  selectors: {
+    video: {
+      getTranscriptDownloadUrl: jest.fn(args => ({ getTranscriptDownloadUrl: args })).mockName('selectors.video.getTranscriptDownloadUrl'),
+      buildTranscriptUrl: jest.fn(args => ({ buildTranscriptUrl: args })).mockName('selectors.video.buildTranscriptUrl'),
+    },
+  },
+}));
+
+jest.mock('../../../../../../sharedComponents/FileInput', () => ({
+  FileInput: 'FileInput',
+  fileInput: jest.fn((args) => ({ click: jest.fn().mockName('click input'), onAddFile: args.onAddFile })),
+}));
+
+describe('TranscriptActionMenu', () => {
+  describe('hooks', () => {
+    describe('replaceFileCallback', () => {
+      const lang1Code = 'coDe';
+      const mockFile = 'sOmeEbytes';
+      const mockFileName = 'one.srt';
+      const mockEvent = { mockFile, name: mockFileName };
+      const mockDispatch = jest.fn();
+      const result = { newFile: { mockFile, name: mockFileName }, newFilename: mockFileName, language: lang1Code };
+
+      test('it dispatches the correct thunk', () => {
+        const cb = module.hooks.replaceFileCallback({
+          dispatch: mockDispatch, language: lang1Code,
+        });
+        cb(mockEvent);
+        expect(thunkActions.video.replaceTranscript).toHaveBeenCalledWith(result);
+        expect(mockDispatch).toHaveBeenCalledWith({ replaceTranscript: result });
+      });
+    });
+  });
+
+  describe('Snapshots', () => {
+    const props = {
+      index: 'sOmenUmBer',
+      language: 'lAnG',
+      launchDeleteConfirmation: jest.fn().mockName('launchDeleteConfirmation'),
+      // redux
+      getTranscriptDownloadUrl: jest.fn().mockName('selectors.video.getTranscriptDownloadUrl'),
+      buildTranscriptUrl: jest.fn().mockName('selectors.video.buildTranscriptUrl'),
+    };
+    afterAll(() => {
+      jest.clearAllMocks();
+    });
+    test('snapshots: renders as expected with default props: dont show confirm delete', () => {
+      jest.spyOn(module.hooks, 'replaceFileCallback').mockImplementationOnce(() => jest.fn().mockName('module.hooks.replaceFileCallback'));
+      expect(
+        shallow(<TranscriptActionMenu {...props} />).snapshot,
+      ).toMatchSnapshot();
+    });
+    test('snapshots: renders as expected with transcriptUrl props: dont show confirm delete', () => {
+      jest.spyOn(module.hooks, 'replaceFileCallback').mockImplementationOnce(() => jest.fn().mockName('module.hooks.replaceFileCallback'));
+      expect(
+        shallow(<TranscriptActionMenu {...props} transcriptUrl="url" />).snapshot,
+      ).toMatchSnapshot();
+    });
+  });
+  describe('mapStateToProps', () => {
+    const testState = { A: 'pple', B: 'anana', C: 'ucumber' };
+    test('getTranscriptDownloadUrl from video.getTranscriptDownloadUrl', () => {
+      expect(
+        module.mapStateToProps(testState).getTranscriptDownloadUrl,
+      ).toEqual(selectors.video.getTranscriptDownloadUrl(testState));
+    });
+  });
+  describe('mapDispatchToProps', () => {
+    test('deleteTranscript from thunkActions.video.deleteTranscript', () => {
+      expect(module.mapDispatchToProps.downloadTranscript).toEqual(thunkActions.video.downloadTranscript);
+    });
+  });
+});
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/__snapshots__/ImportTranscriptCard.test.jsx.snap b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/__snapshots__/ImportTranscriptCard.test.jsx.snap
new file mode 100644
index 0000000000..e71ea14cbf
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/__snapshots__/ImportTranscriptCard.test.jsx.snap
@@ -0,0 +1,40 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ImportTranscriptCard snapshots snapshots: renders as expected with default props 1`] = `
+<Stack
+  className="border rounded border-primary-200 p-4"
+  gap={3}
+>
+  <ActionRow
+    className="h5"
+  >
+    <FormattedMessage
+      defaultMessage="Import transcript from YouTube?"
+      description="Header for import transcript card"
+      id="authoring.videoEditor.transcripts.importCard.header"
+    />
+    <ActionRow.Spacer />
+    <IconButton
+      iconAs="Icon"
+      onClick={[Function]}
+      src={[MockFunction icons.Close]}
+    />
+  </ActionRow>
+  <FormattedMessage
+    defaultMessage="We found transcript for this video on YouTube. Would you like to import it now?"
+    description="Message for import transcript card asking user if they want to import transcript"
+    id="authoring.videoEditor.transcrtipts.importCard.message"
+  />
+  <Button
+    onClick={[MockFunction args.importTranscript]}
+    size="sm"
+    variant="outline-primary"
+  >
+    <FormattedMessage
+      defaultMessage="Import Transcript"
+      description="Label for youTube import transcript button"
+      id="authoring.videoEditor.transcripts.importButton.label"
+    />
+  </Button>
+</Stack>
+`;
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/__snapshots__/LanguageSelector.test.jsx.snap b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/__snapshots__/LanguageSelector.test.jsx.snap
new file mode 100644
index 0000000000..281e711849
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/__snapshots__/LanguageSelector.test.jsx.snap
@@ -0,0 +1,111 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`LanguageSelector snapshot transcript option 1`] = `
+<Fragment>
+  <Dropdown
+    className="w-100 mb-2"
+  >
+    <Dropdown.Toggle
+      aria-label="Languages"
+      block={true}
+      className="w-100"
+      iconAs="Button"
+      id="selectLanguage-form-undefined"
+      variant="outline-primary"
+    >
+      <ActionRow>
+        kLinGon
+        <ActionRow.Spacer />
+        <Icon
+          className="text-primary-500"
+        />
+      </ActionRow>
+    </Dropdown.Toggle>
+    <Dropdown.Menu>
+      <Dropdown.Item>
+        kLinGon
+        <Icon
+          className="text-primary-500"
+        />
+      </Dropdown.Item>
+      <Dropdown.Item
+        onClick={[Function]}
+      >
+        eLvIsh
+      </Dropdown.Item>
+      <Dropdown.Item
+        onClick={[Function]}
+      >
+        sImLisH
+      </Dropdown.Item>
+    </Dropdown.Menu>
+  </Dropdown>
+  <FileInput
+    acceptedFiles=".srt"
+    fileInput={
+      {
+        "addFile": [Function],
+        "click": [Function],
+        "ref": {
+          "current": undefined,
+        },
+      }
+    }
+  />
+</Fragment>
+`;
+
+exports[`LanguageSelector snapshots -- no transcripts no Open Languages, all should be disabled 1`] = `
+<Fragment>
+  <Dropdown
+    className="w-100 mb-2"
+  >
+    <Dropdown.Toggle
+      aria-label="Languages"
+      block={true}
+      className="w-100"
+      iconAs="Button"
+      id="selectLanguage-form-undefined"
+      variant="outline-primary"
+    >
+      <ActionRow>
+        kLinGon
+        <ActionRow.Spacer />
+        <Icon
+          className="text-primary-500"
+        />
+      </ActionRow>
+    </Dropdown.Toggle>
+    <Dropdown.Menu>
+      <Dropdown.Item>
+        kLinGon
+        <Icon
+          className="text-primary-500"
+        />
+      </Dropdown.Item>
+      <Dropdown.Item
+        className="disabled"
+      >
+        eLvIsh
+      </Dropdown.Item>
+      <Dropdown.Item
+        className="disabled"
+      >
+        sImLisH
+      </Dropdown.Item>
+    </Dropdown.Menu>
+  </Dropdown>
+  <FileInput
+    acceptedFiles=".srt"
+    fileInput={
+      {
+        "addFile": [Function],
+        "click": [Function],
+        "ref": {
+          "current": undefined,
+        },
+      }
+    }
+  />
+</Fragment>
+`;
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/__snapshots__/Transcript.test.jsx.snap b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/__snapshots__/Transcript.test.jsx.snap
new file mode 100644
index 0000000000..f7bf72c1a2
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/__snapshots__/Transcript.test.jsx.snap
@@ -0,0 +1,103 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Transcript Component component component snapshots: renders as expected with default props: dont show confirm delete 1`] = `
+<Fragment>
+  <ActionRow>
+    <LanguageSelector
+      language="lAnG"
+      title="sOmenUmBer"
+    />
+    <ActionRow.Spacer />
+    <TranscriptActionMenu
+      index="sOmenUmBer"
+      language="lAnG"
+      launchDeleteConfirmation={[MockFunction launchDeleteConfirmation]}
+    />
+  </ActionRow>
+</Fragment>
+`;
+
+exports[`Transcript Component component component snapshots: renders as expected with default props: dont show confirm delete, language is blank so delete is shown instead of action menu 1`] = `
+<Fragment>
+  <ActionRow>
+    <LanguageSelector
+      language=""
+      title="sOmenUmBer"
+    />
+    <ActionRow.Spacer />
+    <IconButton
+      iconAs="Icon"
+      onClick={[Function]}
+    />
+  </ActionRow>
+</Fragment>
+`;
+
+exports[`Transcript Component component component snapshots: renders as expected with default props: show confirm delete 1`] = `
+<Fragment>
+  <Card
+    className="mb-2"
+  >
+    <Card.Header
+      title={
+        <FormattedMessage
+          defaultMessage="Delete this transcript?"
+          description="Title for Warning which allows users to select next step in the process of deleting a transcript"
+          id="authoring.videoeditor.transcripts.deleteConfirmationTitle"
+        />
+      }
+    />
+    <Card.Body>
+      <Card.Section>
+        <FormattedMessage
+          defaultMessage="Are you sure you want to delete this transcript?"
+          description="Warning which allows users to select next step in the process of deleting a transcript"
+          id="authoring.videoeditor.transcripts.deleteConfirmationMessage"
+        />
+      </Card.Section>
+      <Card.Footer>
+        <Button
+          className="mb-2 mb-sm-0"
+          onClick={[MockFunction cancelDelete]}
+          variant="tertiary"
+        >
+          <FormattedMessage
+            defaultMessage="Cancel"
+            description="Label For Button, which allows users to stop the process of deleting a transcript"
+            id="authoring.videoeditor.transcripts.cancelDeleteLabel"
+          />
+        </Button>
+        <Button
+          className="mb-2 mb-sm-0"
+          onClick={[Function]}
+          variant="danger"
+        >
+          <FormattedMessage
+            defaultMessage="Delete"
+            description="Label For Button, which allows users to confirm the process of deleting a transcript"
+            id="authoring.videoeditor.transcripts.confirmDeleteLabel"
+          />
+        </Button>
+      </Card.Footer>
+    </Card.Body>
+  </Card>
+</Fragment>
+`;
+
+exports[`Transcript Component component component snapshots: renders as expected with transcriptUrl 1`] = `
+<Fragment>
+  <ActionRow>
+    <LanguageSelector
+      language="lAnG"
+      title="sOmenUmBer"
+    />
+    <ActionRow.Spacer />
+    <TranscriptActionMenu
+      index="sOmenUmBer"
+      language="lAnG"
+      launchDeleteConfirmation={[MockFunction launchDeleteConfirmation]}
+      transcriptUrl="url"
+    />
+  </ActionRow>
+</Fragment>
+`;
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/__snapshots__/TranscriptActionMenu.test.jsx.snap b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/__snapshots__/TranscriptActionMenu.test.jsx.snap
new file mode 100644
index 0000000000..f9c0bc5336
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/__snapshots__/TranscriptActionMenu.test.jsx.snap
@@ -0,0 +1,109 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TranscriptActionMenu Snapshots snapshots: renders as expected with default props: dont show confirm delete 1`] = `
+<Dropdown>
+  <Dropdown.Toggle
+    alt="Actions dropdown"
+    as="IconButton"
+    iconAs="Icon"
+    id="dropdown-toggle-with-iconbutton-video-transcript-widget"
+    variant="primary"
+  />
+  <Dropdown.Menu
+    className="video_transcript Action Menu"
+  >
+    <Dropdown.Item
+      key="transcript-actions-sOmenUmBer-replace"
+      onClick={[MockFunction click input]}
+    >
+      <FormattedMessage
+        defaultMessage="Replace"
+        description="Message Presented To user for action to replace transcript"
+        id="authoring.videoeditor.transcript.replaceTranscript"
+      />
+    </Dropdown.Item>
+    <Dropdown.Item
+      key="transcript-actions-sOmenUmBer-download"
+    >
+      <FormattedMessage
+        defaultMessage="Download"
+        description="Message Presented To user for action to download transcript"
+        id="authoring.videoeditor.transcript.downloadTranscript"
+      />
+    </Dropdown.Item>
+    <Dropdown.Item
+      key="transcript-actions-sOmenUmBer-delete"
+      onClick={[MockFunction launchDeleteConfirmation]}
+    >
+      <FormattedMessage
+        defaultMessage="Delete"
+        description="Message Presented To user for action to delete transcript"
+        id="authoring.videoeditor.transcript.deleteTranscript"
+      />
+    </Dropdown.Item>
+  </Dropdown.Menu>
+  <FileInput
+    acceptedFiles=".srt"
+    fileInput={
+      {
+        "click": [MockFunction click input],
+        "onAddFile": [MockFunction module.hooks.replaceFileCallback],
+      }
+    }
+  />
+</Dropdown>
+`;
+
+exports[`TranscriptActionMenu Snapshots snapshots: renders as expected with transcriptUrl props: dont show confirm delete 1`] = `
+<Dropdown>
+  <Dropdown.Toggle
+    alt="Actions dropdown"
+    as="IconButton"
+    iconAs="Icon"
+    id="dropdown-toggle-with-iconbutton-video-transcript-widget"
+    variant="primary"
+  />
+  <Dropdown.Menu
+    className="video_transcript Action Menu"
+  >
+    <Dropdown.Item
+      key="transcript-actions-sOmenUmBer-replace"
+      onClick={[MockFunction click input]}
+    >
+      <FormattedMessage
+        defaultMessage="Replace"
+        description="Message Presented To user for action to replace transcript"
+        id="authoring.videoeditor.transcript.replaceTranscript"
+      />
+    </Dropdown.Item>
+    <Dropdown.Item
+      key="transcript-actions-sOmenUmBer-download"
+    >
+      <FormattedMessage
+        defaultMessage="Download"
+        description="Message Presented To user for action to download transcript"
+        id="authoring.videoeditor.transcript.downloadTranscript"
+      />
+    </Dropdown.Item>
+    <Dropdown.Item
+      key="transcript-actions-sOmenUmBer-delete"
+      onClick={[MockFunction launchDeleteConfirmation]}
+    >
+      <FormattedMessage
+        defaultMessage="Delete"
+        description="Message Presented To user for action to delete transcript"
+        id="authoring.videoeditor.transcript.deleteTranscript"
+      />
+    </Dropdown.Item>
+  </Dropdown.Menu>
+  <FileInput
+    acceptedFiles=".srt"
+    fileInput={
+      {
+        "click": [MockFunction click input],
+        "onAddFile": [MockFunction module.hooks.replaceFileCallback],
+      }
+    }
+  />
+</Dropdown>
+`;
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/__snapshots__/index.test.jsx.snap b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/__snapshots__/index.test.jsx.snap
new file mode 100644
index 0000000000..904d6433b2
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/__snapshots__/index.test.jsx.snap
@@ -0,0 +1,899 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TranscriptWidget component snapshots snapshot: renders ErrorAlert with delete error message 1`] = `
+<CollapsibleFormWidget
+  fontSize="x-small"
+  isError={true}
+  subtitle="English"
+  title="Transcripts"
+>
+  <ErrorAlert
+    dismissError={null}
+    hideHeading={true}
+    isError={false}
+  >
+    <FormattedMessage
+      defaultMessage="Failed to upload transcript. Please try again."
+      description="Message presented to user when transcript fails to upload"
+      id="authoring.videoeditor.transcript.error.uploadTranscriptError"
+    />
+  </ErrorAlert>
+  <ErrorAlert
+    dismissError={null}
+    hideHeading={true}
+    isError={true}
+  >
+    <FormattedMessage
+      defaultMessage="Failed to delete transcript. Please try again."
+      description="Message presented to user when transcript fails to delete"
+      id="authoring.videoeditor.transcript.error.deleteTranscriptError"
+    />
+  </ErrorAlert>
+  <Stack
+    gap={3}
+  >
+    <Form.Group
+      className="border-primary-100 border-bottom"
+    >
+      <Transcript
+        index={0}
+        language="en"
+      />
+      <ActionRow
+        className="mt-3.5"
+      >
+        <Form.Checkbox
+          checked={false}
+          className="decorative-control-label"
+          onChange={[Function]}
+        >
+          <div
+            className="small text-gray-700"
+          >
+            <FormattedMessage
+              defaultMessage="Allow transcript downloads"
+              description="Label for allow transcript downloads checkbox"
+              id="authoring.videoeditor.transcripts.allowDownloadCheckboxLabel"
+            />
+          </div>
+        </Form.Checkbox>
+        <OverlayTrigger
+          key="top"
+          overlay={
+            <Tooltip
+              id="tooltip-top"
+            >
+              <FormattedMessage
+                defaultMessage="Learners will see a link to download the transcript below the video."
+                description="Message for show by default checkbox"
+                id="authoring.videoeditor.transcripts.upload.allowDownloadTooltipMessage"
+              />
+            </Tooltip>
+          }
+          placement="top"
+        >
+          <Icon
+            style={
+              {
+                "height": "16px",
+                "width": "16px",
+              }
+            }
+          />
+        </OverlayTrigger>
+        <ActionRow.Spacer />
+      </ActionRow>
+      <Form.Checkbox
+        checked={false}
+        className="mt-3 decorative-control-label"
+        onChange={[Function]}
+      >
+        <div
+          className="small text-gray-700"
+        >
+          <FormattedMessage
+            defaultMessage="Show transcript in the video player by default"
+            description="Label for show by default checkbox"
+            id="authoring.videoeditor.transcripts.upload.showByDefaultCheckboxLabel"
+          />
+        </div>
+      </Form.Checkbox>
+    </Form.Group>
+    <div
+      className="mt-2"
+    >
+      <Button
+        className="text-primary-500 font-weight-bold justify-content-start pl-0"
+        onClick={[Function]}
+        size="sm"
+        variant="link"
+      >
+        <FormattedMessage
+          defaultMessage="Add a transcript"
+          description="Label for upload button"
+          id="authoring.videoeditor.transcripts.upload.label"
+        />
+      </Button>
+    </div>
+  </Stack>
+</CollapsibleFormWidget>
+`;
+
+exports[`TranscriptWidget component snapshots snapshot: renders ErrorAlert with upload error message 1`] = `
+<CollapsibleFormWidget
+  fontSize="x-small"
+  isError={true}
+  subtitle="English, French"
+  title="Transcripts"
+>
+  <ErrorAlert
+    dismissError={null}
+    hideHeading={true}
+    isError={true}
+  >
+    <FormattedMessage
+      defaultMessage="Failed to upload transcript. Please try again."
+      description="Message presented to user when transcript fails to upload"
+      id="authoring.videoeditor.transcript.error.uploadTranscriptError"
+    />
+  </ErrorAlert>
+  <ErrorAlert
+    dismissError={null}
+    hideHeading={true}
+    isError={false}
+  >
+    <FormattedMessage
+      defaultMessage="Failed to delete transcript. Please try again."
+      description="Message presented to user when transcript fails to delete"
+      id="authoring.videoeditor.transcript.error.deleteTranscriptError"
+    />
+  </ErrorAlert>
+  <Stack
+    gap={3}
+  >
+    <Form.Group
+      className="border-primary-100 border-bottom"
+    >
+      <Transcript
+        index={0}
+        language="en"
+      />
+      <Transcript
+        index={1}
+        language="fr"
+      />
+      <ActionRow
+        className="mt-3.5"
+      >
+        <Form.Checkbox
+          checked={false}
+          className="decorative-control-label"
+          onChange={[Function]}
+        >
+          <div
+            className="small text-gray-700"
+          >
+            <FormattedMessage
+              defaultMessage="Allow transcript downloads"
+              description="Label for allow transcript downloads checkbox"
+              id="authoring.videoeditor.transcripts.allowDownloadCheckboxLabel"
+            />
+          </div>
+        </Form.Checkbox>
+        <OverlayTrigger
+          key="top"
+          overlay={
+            <Tooltip
+              id="tooltip-top"
+            >
+              <FormattedMessage
+                defaultMessage="Learners will see a link to download the transcript below the video."
+                description="Message for show by default checkbox"
+                id="authoring.videoeditor.transcripts.upload.allowDownloadTooltipMessage"
+              />
+            </Tooltip>
+          }
+          placement="top"
+        >
+          <Icon
+            style={
+              {
+                "height": "16px",
+                "width": "16px",
+              }
+            }
+          />
+        </OverlayTrigger>
+        <ActionRow.Spacer />
+      </ActionRow>
+      <Form.Checkbox
+        checked={false}
+        className="mt-3 decorative-control-label"
+        onChange={[Function]}
+      >
+        <div
+          className="small text-gray-700"
+        >
+          <FormattedMessage
+            defaultMessage="Show transcript in the video player by default"
+            description="Label for show by default checkbox"
+            id="authoring.videoeditor.transcripts.upload.showByDefaultCheckboxLabel"
+          />
+        </div>
+      </Form.Checkbox>
+    </Form.Group>
+    <div
+      className="mt-2"
+    >
+      <Button
+        className="text-primary-500 font-weight-bold justify-content-start pl-0"
+        onClick={[Function]}
+        size="sm"
+        variant="link"
+      >
+        <FormattedMessage
+          defaultMessage="Add a transcript"
+          description="Label for upload button"
+          id="authoring.videoeditor.transcripts.upload.label"
+        />
+      </Button>
+    </div>
+  </Stack>
+</CollapsibleFormWidget>
+`;
+
+exports[`TranscriptWidget component snapshots snapshots: renders as expected with allowTranscriptDownloads true 1`] = `
+<CollapsibleFormWidget
+  fontSize="x-small"
+  isError={true}
+  subtitle="English"
+  title="Transcripts"
+>
+  <ErrorAlert
+    dismissError={null}
+    hideHeading={true}
+    isError={false}
+  >
+    <FormattedMessage
+      defaultMessage="Failed to upload transcript. Please try again."
+      description="Message presented to user when transcript fails to upload"
+      id="authoring.videoeditor.transcript.error.uploadTranscriptError"
+    />
+  </ErrorAlert>
+  <ErrorAlert
+    dismissError={null}
+    hideHeading={true}
+    isError={false}
+  >
+    <FormattedMessage
+      defaultMessage="Failed to delete transcript. Please try again."
+      description="Message presented to user when transcript fails to delete"
+      id="authoring.videoeditor.transcript.error.deleteTranscriptError"
+    />
+  </ErrorAlert>
+  <Stack
+    gap={3}
+  >
+    <Form.Group
+      className="border-primary-100 border-bottom"
+    >
+      <Transcript
+        index={0}
+        language="en"
+      />
+      <ActionRow
+        className="mt-3.5"
+      >
+        <Form.Checkbox
+          checked={true}
+          className="decorative-control-label"
+          onChange={[Function]}
+        >
+          <div
+            className="small text-gray-700"
+          >
+            <FormattedMessage
+              defaultMessage="Allow transcript downloads"
+              description="Label for allow transcript downloads checkbox"
+              id="authoring.videoeditor.transcripts.allowDownloadCheckboxLabel"
+            />
+          </div>
+        </Form.Checkbox>
+        <OverlayTrigger
+          key="top"
+          overlay={
+            <Tooltip
+              id="tooltip-top"
+            >
+              <FormattedMessage
+                defaultMessage="Learners will see a link to download the transcript below the video."
+                description="Message for show by default checkbox"
+                id="authoring.videoeditor.transcripts.upload.allowDownloadTooltipMessage"
+              />
+            </Tooltip>
+          }
+          placement="top"
+        >
+          <Icon
+            style={
+              {
+                "height": "16px",
+                "width": "16px",
+              }
+            }
+          />
+        </OverlayTrigger>
+        <ActionRow.Spacer />
+      </ActionRow>
+      <Form.Checkbox
+        checked={false}
+        className="mt-3 decorative-control-label"
+        onChange={[Function]}
+      >
+        <div
+          className="small text-gray-700"
+        >
+          <FormattedMessage
+            defaultMessage="Show transcript in the video player by default"
+            description="Label for show by default checkbox"
+            id="authoring.videoeditor.transcripts.upload.showByDefaultCheckboxLabel"
+          />
+        </div>
+      </Form.Checkbox>
+    </Form.Group>
+    <div
+      className="mt-2"
+    >
+      <Button
+        className="text-primary-500 font-weight-bold justify-content-start pl-0"
+        onClick={[Function]}
+        size="sm"
+        variant="link"
+      >
+        <FormattedMessage
+          defaultMessage="Add a transcript"
+          description="Label for upload button"
+          id="authoring.videoeditor.transcripts.upload.label"
+        />
+      </Button>
+    </div>
+  </Stack>
+</CollapsibleFormWidget>
+`;
+
+exports[`TranscriptWidget component snapshots snapshots: renders as expected with allowTranscriptImport true 1`] = `
+<CollapsibleFormWidget
+  fontSize="x-small"
+  isError={true}
+  subtitle="None"
+  title="Transcripts"
+>
+  <ErrorAlert
+    dismissError={null}
+    hideHeading={true}
+    isError={false}
+  >
+    <FormattedMessage
+      defaultMessage="Failed to upload transcript. Please try again."
+      description="Message presented to user when transcript fails to upload"
+      id="authoring.videoeditor.transcript.error.uploadTranscriptError"
+    />
+  </ErrorAlert>
+  <ErrorAlert
+    dismissError={null}
+    hideHeading={true}
+    isError={false}
+  >
+    <FormattedMessage
+      defaultMessage="Failed to delete transcript. Please try again."
+      description="Message presented to user when transcript fails to delete"
+      id="authoring.videoeditor.transcript.error.deleteTranscriptError"
+    />
+  </ErrorAlert>
+  <Stack
+    gap={3}
+  >
+    <Fragment>
+      <FormattedMessage
+        defaultMessage="Add video transcripts (.srt files only) for improved accessibility."
+        description="Message for adding first transcript"
+        id="authoring.videoeditor.transcripts.upload.firstTranscriptMessage"
+      />
+      <injectIntl(ShimmedIntlComponent)
+        setOpen={[Function]}
+      />
+    </Fragment>
+    <div
+      className="mt-2"
+    >
+      <Button
+        className="text-primary-500 font-weight-bold justify-content-start pl-0"
+        onClick={[Function]}
+        size="sm"
+        variant="link"
+      >
+        <FormattedMessage
+          defaultMessage="Add a transcript"
+          description="Label for upload button"
+          id="authoring.videoeditor.transcripts.upload.label"
+        />
+      </Button>
+    </div>
+  </Stack>
+</CollapsibleFormWidget>
+`;
+
+exports[`TranscriptWidget component snapshots snapshots: renders as expected with default props 1`] = `
+<CollapsibleFormWidget
+  fontSize="x-small"
+  isError={true}
+  subtitle="None"
+  title="Transcripts"
+>
+  <ErrorAlert
+    dismissError={null}
+    hideHeading={true}
+    isError={false}
+  >
+    <FormattedMessage
+      defaultMessage="Failed to upload transcript. Please try again."
+      description="Message presented to user when transcript fails to upload"
+      id="authoring.videoeditor.transcript.error.uploadTranscriptError"
+    />
+  </ErrorAlert>
+  <ErrorAlert
+    dismissError={null}
+    hideHeading={true}
+    isError={false}
+  >
+    <FormattedMessage
+      defaultMessage="Failed to delete transcript. Please try again."
+      description="Message presented to user when transcript fails to delete"
+      id="authoring.videoeditor.transcript.error.deleteTranscriptError"
+    />
+  </ErrorAlert>
+  <Stack
+    gap={3}
+  >
+    <Fragment>
+      <FormattedMessage
+        defaultMessage="Add video transcripts (.srt files only) for improved accessibility."
+        description="Message for adding first transcript"
+        id="authoring.videoeditor.transcripts.upload.firstTranscriptMessage"
+      />
+    </Fragment>
+    <div
+      className="mt-2"
+    >
+      <Button
+        className="text-primary-500 font-weight-bold justify-content-start pl-0"
+        onClick={[Function]}
+        size="sm"
+        variant="link"
+      >
+        <FormattedMessage
+          defaultMessage="Add a transcript"
+          description="Label for upload button"
+          id="authoring.videoeditor.transcripts.upload.label"
+        />
+      </Button>
+    </div>
+  </Stack>
+</CollapsibleFormWidget>
+`;
+
+exports[`TranscriptWidget component snapshots snapshots: renders as expected with showTranscriptByDefault true 1`] = `
+<CollapsibleFormWidget
+  fontSize="x-small"
+  isError={true}
+  subtitle="English"
+  title="Transcripts"
+>
+  <ErrorAlert
+    dismissError={null}
+    hideHeading={true}
+    isError={false}
+  >
+    <FormattedMessage
+      defaultMessage="Failed to upload transcript. Please try again."
+      description="Message presented to user when transcript fails to upload"
+      id="authoring.videoeditor.transcript.error.uploadTranscriptError"
+    />
+  </ErrorAlert>
+  <ErrorAlert
+    dismissError={null}
+    hideHeading={true}
+    isError={false}
+  >
+    <FormattedMessage
+      defaultMessage="Failed to delete transcript. Please try again."
+      description="Message presented to user when transcript fails to delete"
+      id="authoring.videoeditor.transcript.error.deleteTranscriptError"
+    />
+  </ErrorAlert>
+  <Stack
+    gap={3}
+  >
+    <Form.Group
+      className="border-primary-100 border-bottom"
+    >
+      <Transcript
+        index={0}
+        language="en"
+      />
+      <ActionRow
+        className="mt-3.5"
+      >
+        <Form.Checkbox
+          checked={false}
+          className="decorative-control-label"
+          onChange={[Function]}
+        >
+          <div
+            className="small text-gray-700"
+          >
+            <FormattedMessage
+              defaultMessage="Allow transcript downloads"
+              description="Label for allow transcript downloads checkbox"
+              id="authoring.videoeditor.transcripts.allowDownloadCheckboxLabel"
+            />
+          </div>
+        </Form.Checkbox>
+        <OverlayTrigger
+          key="top"
+          overlay={
+            <Tooltip
+              id="tooltip-top"
+            >
+              <FormattedMessage
+                defaultMessage="Learners will see a link to download the transcript below the video."
+                description="Message for show by default checkbox"
+                id="authoring.videoeditor.transcripts.upload.allowDownloadTooltipMessage"
+              />
+            </Tooltip>
+          }
+          placement="top"
+        >
+          <Icon
+            style={
+              {
+                "height": "16px",
+                "width": "16px",
+              }
+            }
+          />
+        </OverlayTrigger>
+        <ActionRow.Spacer />
+      </ActionRow>
+      <Form.Checkbox
+        checked={true}
+        className="mt-3 decorative-control-label"
+        onChange={[Function]}
+      >
+        <div
+          className="small text-gray-700"
+        >
+          <FormattedMessage
+            defaultMessage="Show transcript in the video player by default"
+            description="Label for show by default checkbox"
+            id="authoring.videoeditor.transcripts.upload.showByDefaultCheckboxLabel"
+          />
+        </div>
+      </Form.Checkbox>
+    </Form.Group>
+    <div
+      className="mt-2"
+    >
+      <Button
+        className="text-primary-500 font-weight-bold justify-content-start pl-0"
+        onClick={[Function]}
+        size="sm"
+        variant="link"
+      >
+        <FormattedMessage
+          defaultMessage="Add a transcript"
+          description="Label for upload button"
+          id="authoring.videoeditor.transcripts.upload.label"
+        />
+      </Button>
+    </div>
+  </Stack>
+</CollapsibleFormWidget>
+`;
+
+exports[`TranscriptWidget component snapshots snapshots: renders as expected with transcript urls 1`] = `
+<CollapsibleFormWidget
+  fontSize="x-small"
+  isError={true}
+  subtitle="None"
+  title="Transcripts"
+>
+  <ErrorAlert
+    dismissError={null}
+    hideHeading={true}
+    isError={false}
+  >
+    <FormattedMessage
+      defaultMessage="Failed to upload transcript. Please try again."
+      description="Message presented to user when transcript fails to upload"
+      id="authoring.videoeditor.transcript.error.uploadTranscriptError"
+    />
+  </ErrorAlert>
+  <ErrorAlert
+    dismissError={null}
+    hideHeading={true}
+    isError={false}
+  >
+    <FormattedMessage
+      defaultMessage="Failed to delete transcript. Please try again."
+      description="Message presented to user when transcript fails to delete"
+      id="authoring.videoeditor.transcript.error.deleteTranscriptError"
+    />
+  </ErrorAlert>
+  <Stack
+    gap={3}
+  >
+    <Fragment>
+      <FormattedMessage
+        defaultMessage="Add video transcripts (.srt files only) for improved accessibility."
+        description="Message for adding first transcript"
+        id="authoring.videoeditor.transcripts.upload.firstTranscriptMessage"
+      />
+    </Fragment>
+    <div
+      className="mt-2"
+    >
+      <Button
+        className="text-primary-500 font-weight-bold justify-content-start pl-0"
+        onClick={[Function]}
+        size="sm"
+        variant="link"
+      >
+        <FormattedMessage
+          defaultMessage="Add a transcript"
+          description="Label for upload button"
+          id="authoring.videoeditor.transcripts.upload.label"
+        />
+      </Button>
+    </div>
+  </Stack>
+</CollapsibleFormWidget>
+`;
+
+exports[`TranscriptWidget component snapshots snapshots: renders as expected with transcripts 1`] = `
+<CollapsibleFormWidget
+  fontSize="x-small"
+  isError={true}
+  subtitle="English"
+  title="Transcripts"
+>
+  <ErrorAlert
+    dismissError={null}
+    hideHeading={true}
+    isError={false}
+  >
+    <FormattedMessage
+      defaultMessage="Failed to upload transcript. Please try again."
+      description="Message presented to user when transcript fails to upload"
+      id="authoring.videoeditor.transcript.error.uploadTranscriptError"
+    />
+  </ErrorAlert>
+  <ErrorAlert
+    dismissError={null}
+    hideHeading={true}
+    isError={false}
+  >
+    <FormattedMessage
+      defaultMessage="Failed to delete transcript. Please try again."
+      description="Message presented to user when transcript fails to delete"
+      id="authoring.videoeditor.transcript.error.deleteTranscriptError"
+    />
+  </ErrorAlert>
+  <Stack
+    gap={3}
+  >
+    <Form.Group
+      className="border-primary-100 border-bottom"
+    >
+      <Transcript
+        index={0}
+        language="en"
+      />
+      <ActionRow
+        className="mt-3.5"
+      >
+        <Form.Checkbox
+          checked={false}
+          className="decorative-control-label"
+          onChange={[Function]}
+        >
+          <div
+            className="small text-gray-700"
+          >
+            <FormattedMessage
+              defaultMessage="Allow transcript downloads"
+              description="Label for allow transcript downloads checkbox"
+              id="authoring.videoeditor.transcripts.allowDownloadCheckboxLabel"
+            />
+          </div>
+        </Form.Checkbox>
+        <OverlayTrigger
+          key="top"
+          overlay={
+            <Tooltip
+              id="tooltip-top"
+            >
+              <FormattedMessage
+                defaultMessage="Learners will see a link to download the transcript below the video."
+                description="Message for show by default checkbox"
+                id="authoring.videoeditor.transcripts.upload.allowDownloadTooltipMessage"
+              />
+            </Tooltip>
+          }
+          placement="top"
+        >
+          <Icon
+            style={
+              {
+                "height": "16px",
+                "width": "16px",
+              }
+            }
+          />
+        </OverlayTrigger>
+        <ActionRow.Spacer />
+      </ActionRow>
+      <Form.Checkbox
+        checked={false}
+        className="mt-3 decorative-control-label"
+        onChange={[Function]}
+      >
+        <div
+          className="small text-gray-700"
+        >
+          <FormattedMessage
+            defaultMessage="Show transcript in the video player by default"
+            description="Label for show by default checkbox"
+            id="authoring.videoeditor.transcripts.upload.showByDefaultCheckboxLabel"
+          />
+        </div>
+      </Form.Checkbox>
+    </Form.Group>
+    <div
+      className="mt-2"
+    >
+      <Button
+        className="text-primary-500 font-weight-bold justify-content-start pl-0"
+        onClick={[Function]}
+        size="sm"
+        variant="link"
+      >
+        <FormattedMessage
+          defaultMessage="Add a transcript"
+          description="Label for upload button"
+          id="authoring.videoeditor.transcripts.upload.label"
+        />
+      </Button>
+    </div>
+  </Stack>
+</CollapsibleFormWidget>
+`;
+
+exports[`TranscriptWidget component snapshots snapshots: renders as expected with transcripts and urls 1`] = `
+<CollapsibleFormWidget
+  fontSize="x-small"
+  isError={true}
+  subtitle="Spanish"
+  title="Transcripts"
+>
+  <ErrorAlert
+    dismissError={null}
+    hideHeading={true}
+    isError={false}
+  >
+    <FormattedMessage
+      defaultMessage="Failed to upload transcript. Please try again."
+      description="Message presented to user when transcript fails to upload"
+      id="authoring.videoeditor.transcript.error.uploadTranscriptError"
+    />
+  </ErrorAlert>
+  <ErrorAlert
+    dismissError={null}
+    hideHeading={true}
+    isError={false}
+  >
+    <FormattedMessage
+      defaultMessage="Failed to delete transcript. Please try again."
+      description="Message presented to user when transcript fails to delete"
+      id="authoring.videoeditor.transcript.error.deleteTranscriptError"
+    />
+  </ErrorAlert>
+  <Stack
+    gap={3}
+  >
+    <Form.Group
+      className="border-primary-100 border-bottom"
+    >
+      <Transcript
+        index={0}
+        language="es"
+      />
+      <ActionRow
+        className="mt-3.5"
+      >
+        <Form.Checkbox
+          checked={false}
+          className="decorative-control-label"
+          onChange={[Function]}
+        >
+          <div
+            className="small text-gray-700"
+          >
+            <FormattedMessage
+              defaultMessage="Allow transcript downloads"
+              description="Label for allow transcript downloads checkbox"
+              id="authoring.videoeditor.transcripts.allowDownloadCheckboxLabel"
+            />
+          </div>
+        </Form.Checkbox>
+        <OverlayTrigger
+          key="top"
+          overlay={
+            <Tooltip
+              id="tooltip-top"
+            >
+              <FormattedMessage
+                defaultMessage="Learners will see a link to download the transcript below the video."
+                description="Message for show by default checkbox"
+                id="authoring.videoeditor.transcripts.upload.allowDownloadTooltipMessage"
+              />
+            </Tooltip>
+          }
+          placement="top"
+        >
+          <Icon
+            style={
+              {
+                "height": "16px",
+                "width": "16px",
+              }
+            }
+          />
+        </OverlayTrigger>
+        <ActionRow.Spacer />
+      </ActionRow>
+      <Form.Checkbox
+        checked={false}
+        className="mt-3 decorative-control-label"
+        onChange={[Function]}
+      >
+        <div
+          className="small text-gray-700"
+        >
+          <FormattedMessage
+            defaultMessage="Show transcript in the video player by default"
+            description="Label for show by default checkbox"
+            id="authoring.videoeditor.transcripts.upload.showByDefaultCheckboxLabel"
+          />
+        </div>
+      </Form.Checkbox>
+    </Form.Group>
+    <div
+      className="mt-2"
+    >
+      <Button
+        className="text-primary-500 font-weight-bold justify-content-start pl-0"
+        onClick={[Function]}
+        size="sm"
+        variant="link"
+      >
+        <FormattedMessage
+          defaultMessage="Add a transcript"
+          description="Label for upload button"
+          id="authoring.videoeditor.transcripts.upload.label"
+        />
+      </Button>
+    </div>
+  </Stack>
+</CollapsibleFormWidget>
+`;
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/index.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/index.jsx
new file mode 100644
index 0000000000..b734b31ff4
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/index.jsx
@@ -0,0 +1,217 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import {
+  FormattedMessage,
+  injectIntl,
+  intlShape,
+} from '@edx/frontend-platform/i18n';
+import {
+  Form,
+  Button,
+  Stack,
+  Icon,
+  OverlayTrigger,
+  Tooltip,
+  ActionRow,
+} from '@openedx/paragon';
+import { Add, InfoOutline } from '@openedx/paragon/icons';
+
+import { actions, selectors } from '../../../../../../data/redux';
+import messages from './messages';
+
+import { RequestKeys } from '../../../../../../data/constants/requests';
+import { in8lTranscriptLanguages } from '../../../../../../data/constants/video';
+
+import ErrorAlert from '../../../../../../sharedComponents/ErrorAlerts/ErrorAlert';
+import CollapsibleFormWidget from '../CollapsibleFormWidget';
+
+import ImportTranscriptCard from './ImportTranscriptCard';
+import Transcript from './Transcript';
+import { ErrorContext } from '../../../../hooks';
+// This 'module' self-import hack enables mocking during tests.
+// See src/editors/decisions/0005-internal-editor-testability-decisions.md. The whole approach to how hooks are tested
+// should be re-thought and cleaned up to avoid this pattern.
+// eslint-disable-next-line import/no-self-import
+import * as module from './index';
+
+export const hooks = {
+  updateErrors: ({ isUploadError, isDeleteError }) => {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [error, setError] = React.useContext(ErrorContext).transcripts;
+    if (isUploadError) {
+      setError({ ...error, uploadError: messages.uploadTranscriptError.defaultMessage });
+    }
+    if (isDeleteError) {
+      setError({ ...error, deleteError: messages.deleteTranscriptError.defaultMessage });
+    }
+  },
+  transcriptLanguages: (transcripts, intl) => {
+    const languages = [];
+    if (transcripts && transcripts.length > 0) {
+      const fullTextTranslatedStrings = in8lTranscriptLanguages(intl);
+      transcripts.forEach(transcript => {
+        if (!(transcript === '')) {
+          languages.push(fullTextTranslatedStrings[transcript]);
+        }
+      });
+
+      return languages.join(', ');
+    }
+    return 'None';
+  },
+  hasTranscripts: (transcripts) => {
+    if (transcripts && transcripts.length > 0) {
+      return true;
+    }
+    return false;
+  },
+  onAddNewTranscript: ({ transcripts, updateField }) => {
+    // keep blank lang code for now, will be updated once lang is selected.
+    if (!transcripts) {
+      updateField({ transcripts: [''] });
+      return;
+    }
+    const newTranscripts = [...transcripts, ''];
+    updateField({ transcripts: newTranscripts });
+  },
+};
+
+/**
+ * Collapsible Form widget controlling video transcripts
+ */
+const TranscriptWidget = ({
+  // redux
+  transcripts,
+  selectedVideoTranscriptUrls,
+  allowTranscriptDownloads,
+  showTranscriptByDefault,
+  allowTranscriptImport,
+  updateField,
+  isUploadError,
+  isDeleteError,
+  // injected
+  intl,
+}) => {
+  const [error] = React.useContext(ErrorContext).transcripts;
+  const [showImportCard, setShowImportCard] = React.useState(true);
+  const fullTextLanguages = module.hooks.transcriptLanguages(transcripts, intl);
+  const hasTranscripts = module.hooks.hasTranscripts(transcripts);
+
+  return (
+    <CollapsibleFormWidget
+      fontSize="x-small"
+      isError={Object.keys(error).length !== 0}
+      subtitle={fullTextLanguages}
+      title={intl.formatMessage(messages.title)}
+    >
+      <ErrorAlert
+        hideHeading
+        isError={isUploadError}
+      >
+        <FormattedMessage {...messages.uploadTranscriptError} />
+      </ErrorAlert>
+      <ErrorAlert
+        hideHeading
+        isError={isDeleteError}
+      >
+        <FormattedMessage {...messages.deleteTranscriptError} />
+      </ErrorAlert>
+      <Stack gap={3}>
+        {hasTranscripts ? (
+          <Form.Group className="border-primary-100 border-bottom">
+            {transcripts.map((language, index) => (
+              <Transcript
+                language={language}
+                transcriptUrl={selectedVideoTranscriptUrls[language]}
+                index={index}
+              />
+            ))}
+            <ActionRow className="mt-3.5">
+              <Form.Checkbox
+                checked={allowTranscriptDownloads}
+                className="decorative-control-label"
+                onChange={(e) => updateField({ allowTranscriptDownloads: e.target.checked })}
+              >
+                <div className="small text-gray-700">
+                  <FormattedMessage {...messages.allowDownloadCheckboxLabel} />
+                </div>
+              </Form.Checkbox>
+              <OverlayTrigger
+                key="top"
+                placement="top"
+                overlay={(
+                  <Tooltip id="tooltip-top">
+                    <FormattedMessage {...messages.tooltipMessage} />
+                  </Tooltip>
+                )}
+              >
+                <Icon src={InfoOutline} style={{ height: '16px', width: '16px' }} />
+              </OverlayTrigger>
+              <ActionRow.Spacer />
+            </ActionRow>
+            <Form.Checkbox
+              checked={showTranscriptByDefault}
+              className="mt-3 decorative-control-label"
+              onChange={(e) => updateField({ showTranscriptByDefault: e.target.checked })}
+            >
+              <div className="small text-gray-700">
+                <FormattedMessage {...messages.showByDefaultCheckboxLabel} />
+              </div>
+            </Form.Checkbox>
+          </Form.Group>
+        ) : (
+          <>
+            <FormattedMessage {...messages.addFirstTranscript} />
+            {showImportCard && allowTranscriptImport
+              ? <ImportTranscriptCard setOpen={setShowImportCard} />
+              : null}
+          </>
+        )}
+        <div className="mt-2">
+          <Button
+            className="text-primary-500 font-weight-bold justify-content-start pl-0"
+            size="sm"
+            iconBefore={Add}
+            variant="link"
+            onClick={() => module.hooks.onAddNewTranscript({ transcripts, updateField })}
+          >
+            <FormattedMessage {...messages.uploadButtonLabel} />
+          </Button>
+        </div>
+      </Stack>
+    </CollapsibleFormWidget>
+  );
+};
+
+TranscriptWidget.defaultProps = {
+  selectedVideoTranscriptUrls: {},
+};
+TranscriptWidget.propTypes = {
+  // redux
+  transcripts: PropTypes.arrayOf(PropTypes.string).isRequired,
+  selectedVideoTranscriptUrls: PropTypes.shape(),
+  allowTranscriptDownloads: PropTypes.bool.isRequired,
+  showTranscriptByDefault: PropTypes.bool.isRequired,
+  allowTranscriptImport: PropTypes.bool.isRequired,
+  updateField: PropTypes.func.isRequired,
+  isUploadError: PropTypes.bool.isRequired,
+  isDeleteError: PropTypes.bool.isRequired,
+  intl: PropTypes.shape(intlShape).isRequired,
+};
+export const mapStateToProps = (state) => ({
+  transcripts: selectors.video.transcripts(state),
+  selectedVideoTranscriptUrls: selectors.video.selectedVideoTranscriptUrls(state),
+  allowTranscriptDownloads: selectors.video.allowTranscriptDownloads(state),
+  showTranscriptByDefault: selectors.video.showTranscriptByDefault(state),
+  allowTranscriptImport: selectors.video.allowTranscriptImport(state),
+  isUploadError: selectors.requests.isFailed(state, { requestKey: RequestKeys.uploadTranscript }),
+  isDeleteError: selectors.requests.isFailed(state, { requestKey: RequestKeys.deleteTranscript }),
+});
+
+export const mapDispatchToProps = (dispatch) => ({
+  updateField: (stateUpdate) => dispatch(actions.video.updateField(stateUpdate)),
+});
+
+export const TranscriptWidgetInternal = TranscriptWidget; // For testing only
+export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(TranscriptWidget));
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/index.test.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/index.test.jsx
new file mode 100644
index 0000000000..7e0c54effd
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/index.test.jsx
@@ -0,0 +1,195 @@
+import 'CourseAuthoring/editors/setupEditorTest';
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+
+import { RequestKeys } from '../../../../../../data/constants/requests';
+
+import { formatMessage } from '../../../../../../testUtils';
+import { actions, selectors } from '../../../../../../data/redux';
+// This 'module' self-import hack enables mocking during tests.
+// See src/editors/decisions/0005-internal-editor-testability-decisions.md. The whole approach to how hooks are tested
+// should be re-thought and cleaned up to avoid this pattern.
+// eslint-disable-next-line import/no-self-import
+import * as module from './index';
+
+const TranscriptWidget = module.TranscriptWidgetInternal;
+
+jest.mock('react', () => ({
+  ...jest.requireActual('react'),
+  useContext: jest.fn(() => ({ transcripts: ['error.transcripts', jest.fn().mockName('error.setTranscripts')] })),
+}));
+
+jest.mock('../../../../../../data/redux', () => ({
+  actions: {
+    video: {
+      updateField: jest.fn().mockName('actions.video.updateField'),
+    },
+  },
+  thunkActions: {
+    video: {
+      deleteTranscript: jest.fn().mockName('thunkActions.video.deleteTranscript'),
+    },
+  },
+
+  selectors: {
+    video: {
+      transcripts: jest.fn(state => ({ transcripts: state })),
+      selectedVideoTranscriptUrls: jest.fn(state => ({ selectedVideoTranscriptUrls: state })),
+      allowTranscriptDownloads: jest.fn(state => ({ allowTranscriptDownloads: state })),
+      showTranscriptByDefault: jest.fn(state => ({ showTranscriptByDefault: state })),
+      allowTranscriptImport: jest.fn(state => ({ allowTranscriptImport: state })),
+    },
+    requests: {
+      isFailed: jest.fn(state => ({ isFailed: state })),
+    },
+  },
+}));
+jest.mock('../CollapsibleFormWidget', () => 'CollapsibleFormWidget');
+jest.mock('./Transcript', () => 'Transcript');
+
+describe('TranscriptWidget', () => {
+  describe('hooks', () => {
+    describe('transcriptLanguages', () => {
+      test('empty list of transcripts returns ', () => {
+        expect(module.hooks.transcriptLanguages([])).toEqual('None');
+      });
+      test('unset gives none', () => {
+        expect(module.hooks.transcriptLanguages(['', ''])).toEqual('');
+      });
+      test('en gives English', () => {
+        expect(module.hooks.transcriptLanguages(['en'])).toEqual('English');
+      });
+      test('en, FR gives English, French', () => {
+        expect(module.hooks.transcriptLanguages(['en', 'fr'])).toEqual('English, French');
+      });
+    });
+    describe('hasTranscripts', () => {
+      test('null returns false ', () => {
+        expect(module.hooks.hasTranscripts(null)).toEqual(false);
+      });
+      test('empty list returns false', () => {
+        expect(module.hooks.hasTranscripts([])).toEqual(false);
+      });
+      test('content returns true', () => {
+        expect(module.hooks.hasTranscripts(['en'])).toEqual(true);
+      });
+    });
+    describe('onAddNewTranscript', () => {
+      const mockUpdateField = jest.fn();
+      test('null returns [empty string] ', () => {
+        module.hooks.onAddNewTranscript({ transcripts: null, updateField: mockUpdateField });
+        expect(mockUpdateField).toHaveBeenCalledWith({ transcripts: [''] });
+      });
+      test(' transcripts return list with blank added', () => {
+        const mocklist = ['en', 'fr', 3];
+        module.hooks.onAddNewTranscript({ transcripts: mocklist, updateField: mockUpdateField });
+
+        expect(mockUpdateField).toHaveBeenCalledWith({ transcripts: ['en', 'fr', 3, ''] });
+      });
+    });
+  });
+
+  describe('component', () => {
+    const props = {
+      error: {},
+      subtitle: 'SuBTItle',
+      title: 'tiTLE',
+      intl: { formatMessage },
+      transcripts: [],
+      selectedVideoTranscriptUrls: {},
+      allowTranscriptDownloads: false,
+      showTranscriptByDefault: false,
+      allowTranscriptImport: false,
+      updateField: jest.fn().mockName('args.updateField'),
+      isUploadError: false,
+      isDeleteError: false,
+    };
+
+    describe('snapshots', () => {
+      test('snapshots: renders as expected with default props', () => {
+        expect(
+          shallow(<TranscriptWidget {...props} />).snapshot,
+        ).toMatchSnapshot();
+      });
+      test('snapshots: renders as expected with allowTranscriptImport true', () => {
+        expect(
+          shallow(<TranscriptWidget {...props} allowTranscriptImport />).snapshot,
+        ).toMatchSnapshot();
+      });
+      test('snapshots: renders as expected with transcripts', () => {
+        expect(
+          shallow(<TranscriptWidget {...props} transcripts={['en']} />).snapshot,
+        ).toMatchSnapshot();
+      });
+      test('snapshots: renders as expected with transcript urls', () => {
+        expect(
+          shallow(<TranscriptWidget {...props} selectedVideoTranscriptUrls={{ en: 'url' }} />).snapshot,
+        ).toMatchSnapshot();
+      });
+      test('snapshots: renders as expected with transcripts and urls', () => {
+        expect(
+          shallow(<TranscriptWidget {...props} transcripts={['es']} selectedVideoTranscriptUrls={{ en: 'url' }} />).snapshot,
+        ).toMatchSnapshot();
+      });
+      test('snapshots: renders as expected with allowTranscriptDownloads true', () => {
+        expect(
+          shallow(<TranscriptWidget {...props} allowTranscriptDownloads transcripts={['en']} />).snapshot,
+        ).toMatchSnapshot();
+      });
+      test('snapshots: renders as expected with showTranscriptByDefault true', () => {
+        expect(
+          shallow(<TranscriptWidget {...props} showTranscriptByDefault transcripts={['en']} />).snapshot,
+        ).toMatchSnapshot();
+      });
+      test('snapshot: renders ErrorAlert with upload error message', () => {
+        expect(
+          shallow(<TranscriptWidget {...props} isUploadError transcripts={['en', 'fr']} />).snapshot,
+        ).toMatchSnapshot();
+      });
+      test('snapshot: renders ErrorAlert with delete error message', () => {
+        expect(
+          shallow(<TranscriptWidget {...props} isDeleteError transcripts={['en']} />).snapshot,
+        ).toMatchSnapshot();
+      });
+    });
+    describe('mapStateToProps', () => {
+      const testState = { A: 'pple', B: 'anana', C: 'ucumber' };
+      test('transcripts from video.transcript', () => {
+        expect(
+          module.mapStateToProps(testState).transcripts,
+        ).toEqual(selectors.video.transcripts(testState));
+      });
+      test('allowTranscriptDownloads from video.allowTranscriptDownloads', () => {
+        expect(
+          module.mapStateToProps(testState).allowTranscriptDownloads,
+        ).toEqual(selectors.video.allowTranscriptDownloads(testState));
+      });
+      test('showTranscriptByDefault from video.showTranscriptByDefault', () => {
+        expect(
+          module.mapStateToProps(testState).showTranscriptByDefault,
+        ).toEqual(selectors.video.showTranscriptByDefault(testState));
+      });
+      test('allowTranscriptImport from video.allowTranscriptImport', () => {
+        expect(
+          module.mapStateToProps(testState).allowTranscriptImport,
+        ).toEqual(selectors.video.allowTranscriptImport(testState));
+      });
+      test('isUploadError from requests.isFinished', () => {
+        expect(
+          module.mapStateToProps(testState).isUploadError,
+        ).toEqual(selectors.requests.isFailed(testState, { requestKey: RequestKeys.uploadTranscript }));
+      });
+      test('isDeleteError from requests.isFinished', () => {
+        expect(
+          module.mapStateToProps(testState).isDeleteError,
+        ).toEqual(selectors.requests.isFailed(testState, { requestKey: RequestKeys.deleteTranscript }));
+      });
+    });
+    describe('mapDispatchToProps', () => {
+      const dispatch = jest.fn();
+      test('updateField from actions.video.updateField', () => {
+        expect(module.mapDispatchToProps.updateField).toEqual(dispatch(actions.video.updateField));
+      });
+    });
+  });
+});
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/messages.js b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/messages.js
new file mode 100644
index 0000000000..57cfeeec90
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/messages.js
@@ -0,0 +1,122 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+
+  title: {
+    id: 'authoring.videoeditor.transcripts.title',
+    defaultMessage: 'Transcripts',
+    description: 'Title for transcripts widget',
+  },
+  uploadButtonLabel: {
+    id: 'authoring.videoeditor.transcripts.upload.label',
+    defaultMessage: 'Add a transcript',
+    description: 'Label for upload button',
+  },
+  addFirstTranscript: {
+    id: 'authoring.videoeditor.transcripts.upload.firstTranscriptMessage',
+    defaultMessage: 'Add video transcripts (.srt files only) for improved accessibility.',
+    description: 'Message for adding first transcript',
+  },
+  allowDownloadCheckboxLabel: {
+    id: 'authoring.videoeditor.transcripts.allowDownloadCheckboxLabel',
+    defaultMessage: 'Allow transcript downloads',
+    description: 'Label for allow transcript downloads checkbox',
+  },
+  showByDefaultCheckboxLabel: {
+    id: 'authoring.videoeditor.transcripts.upload.showByDefaultCheckboxLabel',
+    defaultMessage: 'Show transcript in the video player by default',
+    description: 'Label for show by default checkbox',
+  },
+  tooltipMessage: {
+    id: 'authoring.videoeditor.transcripts.upload.allowDownloadTooltipMessage',
+    defaultMessage: 'Learners will see a link to download the transcript below the video.',
+    description: 'Message for show by default checkbox',
+  },
+  transcriptTypeError: {
+    id: 'authoring.videoeditor.transcript.error.transcriptTypeError',
+    defaultMessage: 'Only SRT file can be uploaded',
+    description: 'Message presented to user when image fails to upload',
+  },
+  uploadTranscriptError: {
+    id: 'authoring.videoeditor.transcript.error.uploadTranscriptError',
+    defaultMessage: 'Failed to upload transcript. Please try again.',
+    description: 'Message presented to user when transcript fails to upload',
+  },
+  fileSizeError: {
+    id: 'authoring.videoeditor.transcript.error.fileSizeError',
+    defaultMessage: 'Transcript file size exeeds the maximum. Please try again.',
+    description: 'Message presented to user when transcript file size is too large',
+  },
+  deleteTranscript: {
+    id: 'authoring.videoeditor.transcript.deleteTranscript',
+    defaultMessage: 'Delete',
+    description: 'Message Presented To user for action to delete transcript',
+  },
+  deleteTranscriptError: {
+    id: 'authoring.videoeditor.transcript.error.deleteTranscriptError',
+    defaultMessage: 'Failed to delete transcript. Please try again.',
+    description: 'Message presented to user when transcript fails to delete',
+  },
+  replaceTranscript: {
+    id: 'authoring.videoeditor.transcript.replaceTranscript',
+    defaultMessage: 'Replace',
+    description: 'Message Presented To user for action to replace transcript',
+  },
+  downloadTranscript: {
+    id: 'authoring.videoeditor.transcript.downloadTranscript',
+    defaultMessage: 'Download',
+    description: 'Message Presented To user for action to download transcript',
+  },
+  languageSelectLabel: {
+    id: 'authoring.videoeditor.transcripts.languageSelectLabel',
+    defaultMessage: 'Languages',
+    description: 'Label For Dropdown, which allows users to set the language associtated with a transcript',
+  },
+  languageSelectPlaceholder: {
+    id: 'authoring.videoeditor.transcripts.languageSelectPlaceholder',
+    defaultMessage: 'Select Language',
+    description: 'Placeholder For Dropdown, which allows users to set the language associtated with a transcript',
+  },
+  cancelDeleteLabel: {
+    id: 'authoring.videoeditor.transcripts.cancelDeleteLabel',
+    defaultMessage: 'Cancel',
+    description: 'Label For Button, which allows users to stop the process of deleting a transcript',
+  },
+  confirmDeleteLabel: {
+    id: 'authoring.videoeditor.transcripts.confirmDeleteLabel',
+    defaultMessage: 'Delete',
+    description: 'Label For Button, which allows users to confirm the process of deleting a transcript',
+  },
+  deleteConfirmationMessage: {
+    id: 'authoring.videoeditor.transcripts.deleteConfirmationMessage',
+    defaultMessage: 'Are you sure you want to delete this transcript?',
+    description: 'Warning which allows users to select next step in the process of deleting a transcript',
+  },
+  deleteConfirmationHeader: {
+    id: 'authoring.videoeditor.transcripts.deleteConfirmationTitle',
+    defaultMessage: 'Delete this transcript?',
+    description: 'Title for Warning which allows users to select next step in the process of deleting a transcript',
+  },
+  fileTypeWarning: {
+    id: 'authoring.videoeditor.transcripts.fileTypeWarning',
+    defaultMessage: 'Only SRT files can be uploaded. Please select a file ending in .srt to upload.',
+    description: 'Message warning users to only upload .srt files',
+  },
+  importButtonLabel: {
+    id: 'authoring.videoEditor.transcripts.importButton.label',
+    defaultMessage: 'Import Transcript',
+    description: 'Label for youTube import transcript button',
+  },
+  importHeader: {
+    id: 'authoring.videoEditor.transcripts.importCard.header',
+    defaultMessage: 'Import transcript from YouTube?',
+    description: 'Header for import transcript card',
+  },
+  importMessage: {
+    id: 'authoring.videoEditor.transcrtipts.importCard.message',
+    defaultMessage: 'We found transcript for this video on YouTube. Would you like to import it now?',
+    description: 'Message for import transcript card asking user if they want to import transcript',
+  },
+});
+
+export default messages;
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoPreviewWidget/LanguageNamesWidget.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoPreviewWidget/LanguageNamesWidget.jsx
new file mode 100644
index 0000000000..2647d07c87
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoPreviewWidget/LanguageNamesWidget.jsx
@@ -0,0 +1,32 @@
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { Icon } from '@openedx/paragon';
+import { ClosedCaptionOff, ClosedCaption } from '@openedx/paragon/icons';
+import PropTypes from 'prop-types';
+import React from 'react';
+import messages from '../messages';
+import { hooks as transcriptHooks } from '../TranscriptWidget';
+
+const LanguageNamesWidget = ({ transcripts, intl }) => {
+  let icon = ClosedCaptionOff;
+  const hasTranscripts = transcriptHooks.hasTranscripts(transcripts);
+  let message = intl.formatMessage(messages.noTranscriptsAdded);
+
+  if (hasTranscripts) {
+    message = transcriptHooks.transcriptLanguages(transcripts, intl);
+    icon = ClosedCaption;
+  }
+
+  return (
+    <div className="d-flex flex-row align-items-center x-small">
+      <Icon className="mr-1 text-primary-500" src={icon} />
+      <span className="text-gray-700">{message}</span>
+    </div>
+  );
+};
+
+LanguageNamesWidget.propTypes = {
+  intl: intlShape.isRequired,
+  transcripts: PropTypes.arrayOf(PropTypes.string).isRequired,
+};
+
+export default injectIntl(LanguageNamesWidget);
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoPreviewWidget/hooks.js b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoPreviewWidget/hooks.js
new file mode 100644
index 0000000000..1365df5360
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoPreviewWidget/hooks.js
@@ -0,0 +1,13 @@
+import messages from '../messages';
+import { parseYoutubeId } from '../../../../../../data/services/cms/api';
+
+function getVideoType(videoSource) {
+  if (parseYoutubeId(videoSource) !== null) {
+    return messages.videoTypeYoutube;
+  }
+  return messages.videoTypeOther;
+}
+
+export default {
+  getVideoType,
+};
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoPreviewWidget/index.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoPreviewWidget/index.jsx
new file mode 100644
index 0000000000..3377e31f45
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoPreviewWidget/index.jsx
@@ -0,0 +1,88 @@
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import {
+  Collapsible, Image, Stack, Hyperlink,
+} from '@openedx/paragon';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { connect } from 'react-redux';
+import { selectors } from '../../../../../../data/redux';
+import thumbnailMessages from '../ThumbnailWidget/messages';
+import hooks from './hooks';
+import LanguageNamesWidget from './LanguageNamesWidget';
+import videoThumbnail from '../../../../../../data/images/videoThumbnail.svg';
+
+// Exporting to test this component separately
+export const VideoPreviewWidget = ({
+  thumbnail,
+  videoSource,
+  transcripts,
+  blockTitle,
+  isLibrary,
+  intl,
+}) => {
+  const imgRef = React.useRef();
+  const videoType = intl.formatMessage(hooks.getVideoType(videoSource));
+  const thumbnailImage = thumbnail || videoThumbnail;
+
+  return (
+    <Collapsible.Advanced
+      className="collapsible-card rounded mx-4 my-3 px-4"
+      defaultOpen
+      open
+    >
+      <Collapsible.Body className="collapsible-body rounded px-0 py-4">
+        <div className="d-flex flex-row">
+          <Image
+            thumbnail
+            className="mr-3 px-6 py-4.5"
+            ref={imgRef}
+            src={thumbnailImage}
+            alt={intl.formatMessage(thumbnailMessages.thumbnailAltText)}
+            style={{
+              maxWidth: '200px',
+              minWidth: '200px',
+              minHeight: '112px',
+              maxHeight: '112px',
+            }}
+          />
+          <Stack gap={1} className="justify-content-center">
+            <h4 className="text-primary mb-0">{blockTitle}</h4>
+            {!isLibrary && (
+              // Since content libraries v2 don't support static assets yet, we can't include transcripts.
+              <LanguageNamesWidget transcripts={transcripts} />
+            )}
+            {videoType && (
+              <Hyperlink
+                className="text-primary x-small"
+                destination={videoSource}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                {videoType}
+              </Hyperlink>
+            )}
+          </Stack>
+        </div>
+      </Collapsible.Body>
+    </Collapsible.Advanced>
+  );
+};
+
+VideoPreviewWidget.propTypes = {
+  intl: intlShape.isRequired,
+  videoSource: PropTypes.string.isRequired,
+  thumbnail: PropTypes.string.isRequired,
+  transcripts: PropTypes.arrayOf(PropTypes.string).isRequired,
+  blockTitle: PropTypes.string.isRequired,
+  isLibrary: PropTypes.bool.isRequired,
+};
+
+export const mapStateToProps = (state) => ({
+  transcripts: selectors.video.transcripts(state),
+  videoSource: selectors.video.videoSource(state),
+  thumbnail: selectors.video.thumbnail(state),
+  blockTitle: selectors.app.blockTitle(state),
+  isLibrary: selectors.app.isLibrary(state),
+});
+
+export default injectIntl(connect(mapStateToProps)(VideoPreviewWidget));
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoPreviewWidget/index.test.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoPreviewWidget/index.test.jsx
new file mode 100644
index 0000000000..fc7f89a5cd
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoPreviewWidget/index.test.jsx
@@ -0,0 +1,47 @@
+import {
+  initializeMocks,
+  render,
+  screen,
+} from '../../../../../../../testUtils';
+
+import { VideoPreviewWidget } from '.';
+
+describe('VideoPreviewWidget', () => {
+  const mockIntl = {
+    formatMessage: (message) => message.defaultMessage,
+  };
+
+  beforeEach(() => {
+    initializeMocks();
+  });
+
+  describe('render', () => {
+    test('renders transcripts section in preview for courses', () => {
+      render(
+        <VideoPreviewWidget
+          videoSource="some-source"
+          isLibrary={false}
+          intl={mockIntl}
+          transcripts={[]}
+          blockTitle="some title"
+          thumbnail=""
+        />,
+      );
+      expect(screen.queryByText('No transcripts added')).toBeInTheDocument();
+    });
+
+    test('hides transcripts section in preview for libraries', () => {
+      render(
+        <VideoPreviewWidget
+          videoSource="some-source"
+          isLibrary
+          intl={mockIntl}
+          transcripts={[]}
+          blockTitle="some title"
+          thumbnail=""
+        />,
+      );
+      expect(screen.queryByText('No transcripts added')).not.toBeInTheDocument();
+    });
+  });
+});
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/__snapshots__/index.test.jsx.snap b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/__snapshots__/index.test.jsx.snap
new file mode 100644
index 0000000000..c4fe624870
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/__snapshots__/index.test.jsx.snap
@@ -0,0 +1,319 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`VideoSourceWidget snapshots snapshots: renders as expected with default props 1`] = `
+<injectIntl(ShimmedIntlComponent)
+  fontSize="x-small"
+  title="Video source"
+>
+  <ErrorAlert
+    dismissError={[Function]}
+    hideHeading={true}
+    isError={false}
+  >
+    <FormattedMessage
+      defaultMessage="The Video ID field has changed, please check the Video URL and fallback URL values and update them if necessary."
+      description="Body message for the alert that appears when the video id has been changed."
+      id="authoring.videoeditor.videoIdChangeAlert.message"
+    />
+  </ErrorAlert>
+  <div
+    className="border-primary-100 border-bottom pb-4"
+  >
+    <Form.Group>
+      <Form.Control
+        floatingLabel="Video ID"
+        onBlur={[Function]}
+        onChange={[MockFunction]}
+        value=""
+      />
+      <Form.Control.Feedback
+        className="text-primary-300 mb-4"
+      >
+        <FormattedMessage
+          defaultMessage="If you were assigned a video ID by edX, enter the ID here."
+          description="Feedback for video ID field"
+          id="authoring.videoeditor.videoSource.videoId.feedback"
+        />
+      </Form.Control.Feedback>
+    </Form.Group>
+    <Form.Group>
+      <Form.Control
+        floatingLabel="Video URL"
+        onBlur={[Function]}
+        onChange={[MockFunction]}
+        value=""
+      />
+      <Form.Control.Feedback
+        className="text-primary-300"
+      >
+        <FormattedMessage
+          defaultMessage="The URL for your video. This can be a YouTube URL, or a link
+    to an .mp4, .ogg, or .webm video file hosted elsewhere on the internet."
+          description="Feedback for video URL field"
+          id="authoring.videoeditor.videoSource.videoUrl.feedback"
+        />
+      </Form.Control.Feedback>
+    </Form.Group>
+  </div>
+  <div
+    className="mt-4"
+  >
+    <FormattedMessage
+      defaultMessage="Fallback videos"
+      description="Title for the fallback videos section"
+      id="authoring.videoeditor.videoSource.fallbackVideo.title"
+    />
+  </div>
+  <div
+    className="mt-3"
+  >
+    <FormattedMessage
+      defaultMessage="To be sure all learners can access the video, edX
+    recommends providing additional videos in both .mp4 and
+    .webm formats.  The first listed video compatible with the
+    learner's device will play."
+      description="Test explaining reason for fallback videos"
+      id="authoring.videoeditor.videoSource.fallbackVideo.message"
+    />
+  </div>
+  <Form.Row
+    className="mt-3.5 mx-0 flex-nowrap"
+  >
+    <Form.Group>
+      <Form.Control
+        floatingLabel="Video URL"
+      />
+      <IconButtonWithTooltip
+        alt="Delete"
+        iconAs="Icon"
+        key="top-delete-somEUrL"
+        onClick={[Function]}
+        tooltipContent="Delete"
+        tooltipPlacement="top"
+      />
+    </Form.Group>
+  </Form.Row>
+  <ActionRow
+    className="mt-4.5"
+  >
+    <Form.Group>
+      <Form.Checkbox
+        checked={false}
+        className="decorative-control-label"
+        onChange={[MockFunction]}
+      >
+        <div
+          className="small text-gray-700"
+        >
+          <FormattedMessage
+            defaultMessage="Allow video downloads"
+            description="Label for allow video downloads checkbox"
+            id="authoring.videoeditor.videoSource.allowDownloadCheckboxLabel"
+          />
+        </div>
+      </Form.Checkbox>
+      <OverlayTrigger
+        key="top"
+        overlay={
+          <Tooltip
+            id="tooltip-top"
+          >
+            <FormattedMessage
+              defaultMessage="Allow learners to download versions of this video in
+    different formats if they cannot use the edX video player or do not have
+    access to YouTube."
+              description="Message for allow video downloads checkbox"
+              id="authoring.videoeditor.videoSource.allowDownloadTooltipMessage"
+            />
+          </Tooltip>
+        }
+        placement="top"
+      >
+        <Icon
+          style={
+            {
+              "height": "16px",
+              "width": "16px",
+            }
+          }
+        />
+      </OverlayTrigger>
+    </Form.Group>
+    <ActionRow.Spacer />
+  </ActionRow>
+  <div
+    className="my-4 border-primary-100 border-bottom"
+  />
+  <Button
+    className="text-primary-500 font-weight-bold pl-0"
+    onClick={[Function]}
+    size="sm"
+    variant="link"
+  >
+    <FormattedMessage
+      defaultMessage="Add a video URL"
+      description="Label for add a video URL button"
+      id="authoring.videoeditor.videoSource.fallbackVideo.addButtonLabel"
+    />
+  </Button>
+</injectIntl(ShimmedIntlComponent)>
+`;
+
+exports[`VideoSourceWidget snapshots snapshots: renders as expected with videoSharingEnabledForCourse=true 1`] = `
+<injectIntl(ShimmedIntlComponent)
+  fontSize="x-small"
+  title="Video source"
+>
+  <ErrorAlert
+    dismissError={[Function]}
+    hideHeading={true}
+    isError={false}
+  >
+    <FormattedMessage
+      defaultMessage="The Video ID field has changed, please check the Video URL and fallback URL values and update them if necessary."
+      description="Body message for the alert that appears when the video id has been changed."
+      id="authoring.videoeditor.videoIdChangeAlert.message"
+    />
+  </ErrorAlert>
+  <div
+    className="border-primary-100 border-bottom pb-4"
+  >
+    <Form.Group>
+      <Form.Control
+        floatingLabel="Video ID"
+        onBlur={[Function]}
+        onChange={[MockFunction]}
+        value=""
+      />
+      <Form.Control.Feedback
+        className="text-primary-300 mb-4"
+      >
+        <FormattedMessage
+          defaultMessage="If you were assigned a video ID by edX, enter the ID here."
+          description="Feedback for video ID field"
+          id="authoring.videoeditor.videoSource.videoId.feedback"
+        />
+      </Form.Control.Feedback>
+    </Form.Group>
+    <Form.Group>
+      <Form.Control
+        floatingLabel="Video URL"
+        onBlur={[Function]}
+        onChange={[MockFunction]}
+        value=""
+      />
+      <Form.Control.Feedback
+        className="text-primary-300"
+      >
+        <FormattedMessage
+          defaultMessage="The URL for your video. This can be a YouTube URL, or a link
+    to an .mp4, .ogg, or .webm video file hosted elsewhere on the internet."
+          description="Feedback for video URL field"
+          id="authoring.videoeditor.videoSource.videoUrl.feedback"
+        />
+      </Form.Control.Feedback>
+    </Form.Group>
+  </div>
+  <div
+    className="mt-4"
+  >
+    <FormattedMessage
+      defaultMessage="Fallback videos"
+      description="Title for the fallback videos section"
+      id="authoring.videoeditor.videoSource.fallbackVideo.title"
+    />
+  </div>
+  <div
+    className="mt-3"
+  >
+    <FormattedMessage
+      defaultMessage="To be sure all learners can access the video, edX
+    recommends providing additional videos in both .mp4 and
+    .webm formats.  The first listed video compatible with the
+    learner's device will play."
+      description="Test explaining reason for fallback videos"
+      id="authoring.videoeditor.videoSource.fallbackVideo.message"
+    />
+  </div>
+  <Form.Row
+    className="mt-3.5 mx-0 flex-nowrap"
+  >
+    <Form.Group>
+      <Form.Control
+        floatingLabel="Video URL"
+      />
+      <IconButtonWithTooltip
+        alt="Delete"
+        iconAs="Icon"
+        key="top-delete-somEUrL"
+        onClick={[Function]}
+        tooltipContent="Delete"
+        tooltipPlacement="top"
+      />
+    </Form.Group>
+  </Form.Row>
+  <ActionRow
+    className="mt-4.5"
+  >
+    <Form.Group>
+      <Form.Checkbox
+        checked={false}
+        className="decorative-control-label"
+        onChange={[MockFunction]}
+      >
+        <div
+          className="small text-gray-700"
+        >
+          <FormattedMessage
+            defaultMessage="Allow video downloads"
+            description="Label for allow video downloads checkbox"
+            id="authoring.videoeditor.videoSource.allowDownloadCheckboxLabel"
+          />
+        </div>
+      </Form.Checkbox>
+      <OverlayTrigger
+        key="top"
+        overlay={
+          <Tooltip
+            id="tooltip-top"
+          >
+            <FormattedMessage
+              defaultMessage="Allow learners to download versions of this video in
+    different formats if they cannot use the edX video player or do not have
+    access to YouTube."
+              description="Message for allow video downloads checkbox"
+              id="authoring.videoeditor.videoSource.allowDownloadTooltipMessage"
+            />
+          </Tooltip>
+        }
+        placement="top"
+      >
+        <Icon
+          style={
+            {
+              "height": "16px",
+              "width": "16px",
+            }
+          }
+        />
+      </OverlayTrigger>
+    </Form.Group>
+    <ActionRow.Spacer />
+  </ActionRow>
+  <div
+    className="my-4 border-primary-100 border-bottom"
+  />
+  <Button
+    className="text-primary-500 font-weight-bold pl-0"
+    onClick={[Function]}
+    size="sm"
+    variant="link"
+  >
+    <FormattedMessage
+      defaultMessage="Add a video URL"
+      description="Label for add a video URL button"
+      id="authoring.videoeditor.videoSource.fallbackVideo.addButtonLabel"
+    />
+  </Button>
+</injectIntl(ShimmedIntlComponent)>
+`;
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/hooks.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/hooks.jsx
new file mode 100644
index 0000000000..a527e3404d
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/hooks.jsx
@@ -0,0 +1,71 @@
+import React from 'react';
+import { actions } from '../../../../../../data/redux';
+import { parseYoutubeId } from '../../../../../../data/services/cms/api';
+import * as requests from '../../../../../../data/redux/thunkActions/requests';
+
+export const state = {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  showVideoIdChangeAlert: (args) => React.useState(args),
+};
+
+export const sourceHooks = ({ dispatch, previousVideoId, setAlert }) => ({
+  updateVideoURL: (e, videoId) => {
+    const videoUrl = e.target.value;
+    dispatch(actions.video.updateField({ videoSource: videoUrl }));
+
+    const youTubeId = parseYoutubeId(videoUrl);
+    if (youTubeId) {
+      dispatch(requests.checkTranscriptsForImport({
+        videoId,
+        youTubeId,
+        onSuccess: (response) => {
+          if (response.data.command === 'import') {
+            dispatch(actions.video.updateField({
+              allowTranscriptImport: true,
+            }));
+          }
+        },
+      }));
+    }
+  },
+  updateVideoId: (e) => {
+    const updatedVideoId = e.target.value;
+    if (previousVideoId !== updatedVideoId && updatedVideoId) {
+      setAlert();
+    }
+    dispatch(actions.video.updateField({ videoId: updatedVideoId }));
+  },
+});
+
+export const fallbackHooks = ({ fallbackVideos, dispatch }) => ({
+  addFallbackVideo: () => dispatch(actions.video.updateField({ fallbackVideos: [...fallbackVideos, ''] })),
+  /**
+   * Deletes the first occurrence of the given videoUrl from the fallbackVideos list
+   * @param {string} videoUrl - the video URL to delete
+   */
+  deleteFallbackVideo: (videoUrl) => {
+    const index = fallbackVideos.findIndex(video => video === videoUrl);
+    const updatedFallbackVideos = [
+      ...fallbackVideos.slice(0, index),
+      ...fallbackVideos.slice(index + 1),
+    ];
+    dispatch(actions.video.updateField({ fallbackVideos: updatedFallbackVideos }));
+  },
+});
+
+export const videoIdChangeAlert = () => {
+  const [showVideoIdChangeAlert, setShowVideoIdChangeAlert] = state.showVideoIdChangeAlert(false);
+  return {
+    videoIdChangeAlert: {
+      show: showVideoIdChangeAlert,
+      set: () => setShowVideoIdChangeAlert(true),
+      dismiss: () => setShowVideoIdChangeAlert(false),
+    },
+  };
+};
+
+export default {
+  videoIdChangeAlert,
+  sourceHooks,
+  fallbackHooks,
+};
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/hooks.test.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/hooks.test.jsx
new file mode 100644
index 0000000000..096f98010b
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/hooks.test.jsx
@@ -0,0 +1,174 @@
+import { dispatch } from 'react-redux';
+import { actions } from '../../../../../../data/redux';
+import { MockUseState } from '../../../../../../testUtils';
+import * as requests from '../../../../../../data/redux/thunkActions/requests';
+import * as hooks from './hooks';
+
+jest.mock('react', () => ({
+  ...jest.requireActual('react'),
+  useRef: jest.fn(val => ({ current: val })),
+  useEffect: jest.fn(),
+  useCallback: (cb, prereqs) => ({ cb, prereqs }),
+}));
+
+jest.mock('react-redux', () => {
+  const dispatchFn = jest.fn();
+  return {
+    ...jest.requireActual('react-redux'),
+    useSelector: jest.fn(),
+    dispatch: dispatchFn,
+    useDispatch: jest.fn(() => dispatchFn),
+  };
+});
+
+jest.mock('../../../../../../data/redux', () => ({
+  actions: {
+    video: {
+      updateField: jest.fn(),
+    },
+  },
+}));
+
+jest.mock('../../../../../../data/redux/thunkActions/requests', () => ({
+  checkTranscriptsForImport: jest.fn(),
+}));
+
+const state = new MockUseState(hooks);
+
+const youtubeId = 'yOuTuBEiD';
+const youtubeUrl = `https://youtu.be/${youtubeId}`;
+
+describe('VideoEditorHandout hooks', () => {
+  let hook;
+  describe('state hooks', () => {
+    state.testGetter(state.keys.showVideoIdChangeAlert);
+  });
+  describe('sourceHooks', () => {
+    const e = { target: { value: 'soMEvALuE' } };
+    beforeEach(() => {
+      hook = hooks.sourceHooks({
+        dispatch,
+        previousVideoId: 'soMEvALuE',
+        setAlert: jest.fn(),
+      });
+    });
+    afterEach(() => {
+      jest.clearAllMocks();
+    });
+    describe('updateVideoURL', () => {
+      it('dispatches updateField action with new videoSource', () => {
+        hook.updateVideoURL(e);
+        expect(dispatch).toHaveBeenCalledWith(
+          actions.video.updateField({
+            videoSource: e.target.value,
+          }),
+        );
+      });
+      it('dispatches checkTranscriptsForImport request with new YouTube videoSource', () => {
+        e.target.value = youtubeUrl;
+        hook.updateVideoURL(e, 'video-id');
+        expect(requests.checkTranscriptsForImport).toHaveBeenCalledWith({
+          videoId: 'video-id',
+          youTubeId: youtubeId,
+          onSuccess: expect.anything(),
+        });
+      });
+      it('dispatches updateField video action when checkTranscriptsForImport onSuccess command is import', () => {
+        e.target.value = youtubeUrl;
+        hook.updateVideoURL(e, 'video-id');
+
+        const { onSuccess } = requests.checkTranscriptsForImport.mock.calls[0][0];
+        onSuccess({ data: { command: 'import' } });
+
+        expect(actions.video.updateField).toHaveBeenCalledWith({
+          allowTranscriptImport: true,
+        });
+      });
+      it('does not dispatch updateField video action when checkTranscriptsForImport onSuccess command is not import', () => {
+        e.target.value = youtubeUrl;
+        hook.updateVideoURL(e, 'video-id');
+
+        const { onSuccess } = requests.checkTranscriptsForImport.mock.calls[0][0];
+        onSuccess({ data: { command: 'anything else' } });
+
+        expect(actions.video.updateField).not.toHaveBeenCalledWith({
+          allowTranscriptImport: true,
+        });
+      });
+    });
+    describe('updateVideoId', () => {
+      it('dispatches updateField action with new videoId', () => {
+        hook.updateVideoId({ target: { value: 'newVideoId' } });
+        expect(dispatch).toHaveBeenCalledWith(
+          actions.video.updateField({
+            videoId: e.target.value,
+          }),
+        );
+      });
+      it('dispatches updateField action with empty string', () => {
+        hook.updateVideoId({ target: { value: '' } });
+        expect(dispatch).toHaveBeenCalledWith(
+          actions.video.updateField({
+            videoId: e.target.value,
+          }),
+        );
+      });
+      it('dispatches updateField action with previousVideoId', () => {
+        hook.updateVideoId({ target: { value: 'soMEvALuE' } });
+        expect(dispatch).toHaveBeenCalledWith(
+          actions.video.updateField({
+            videoId: e.target.value,
+          }),
+        );
+      });
+    });
+  });
+
+  describe('fallbackHooks', () => {
+    const videoUrl = 'sOmERAndoMuRl1';
+    const fallbackVideos = ['sOmERAndoMuRl1', 'sOmERAndoMuRl2', 'sOmERAndoMuRl1', ''];
+    beforeEach(() => {
+      hook = hooks.fallbackHooks({ fallbackVideos, dispatch });
+    });
+    describe('addFallbackVideo', () => {
+      it('dispatches updateField action with updated array appended by a new empty element', () => {
+        hook.addFallbackVideo();
+        expect(dispatch).toHaveBeenCalledWith(
+          actions.video.updateField({
+            fallbackVideos: [...fallbackVideos, ''],
+          }),
+        );
+      });
+    });
+    describe('deleteFallbackVideo', () => {
+      it('dispatches updateField action with updated array with videoUrl removed', () => {
+        const updatedFallbackVideos = ['sOmERAndoMuRl2', 'sOmERAndoMuRl1', ''];
+        hook.deleteFallbackVideo(videoUrl);
+        expect(dispatch).toHaveBeenCalledWith(
+          actions.video.updateField({
+            fallbackVideos: updatedFallbackVideos,
+          }),
+        );
+      });
+    });
+  });
+  describe('videoIdChangeAlert', () => {
+    beforeEach(() => {
+      state.mock();
+    });
+    afterEach(() => {
+      state.restore();
+    });
+    test('showVideoIdChangeAlert: state values', () => {
+      expect(hooks.videoIdChangeAlert().videoIdChangeAlert.show).toEqual(false);
+    });
+    test('showVideoIdChangeAlert setters: set', () => {
+      hooks.videoIdChangeAlert().videoIdChangeAlert.set();
+      expect(state.setState[state.keys.showVideoIdChangeAlert]).toHaveBeenCalledWith(true);
+    });
+    test('showVideoIdChangeAlert setters: dismiss', () => {
+      hooks.videoIdChangeAlert().videoIdChangeAlert.dismiss();
+      expect(state.setState[state.keys.showVideoIdChangeAlert]).toHaveBeenCalledWith(false);
+    });
+  });
+});
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/index.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/index.jsx
new file mode 100644
index 0000000000..bac6c347cb
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/index.jsx
@@ -0,0 +1,169 @@
+import React from 'react';
+import { useDispatch } from 'react-redux';
+
+import {
+  Form,
+  IconButtonWithTooltip,
+  ActionRow,
+  Icon,
+  Button,
+  Tooltip,
+  OverlayTrigger,
+} from '@openedx/paragon';
+import { DeleteOutline, InfoOutline, Add } from '@openedx/paragon/icons';
+import {
+  FormattedMessage,
+  injectIntl,
+  intlShape,
+} from '@edx/frontend-platform/i18n';
+
+import * as widgetHooks from '../hooks';
+import * as hooks from './hooks';
+import messages from './messages';
+
+import ErrorAlert from '../../../../../../sharedComponents/ErrorAlerts/ErrorAlert';
+import CollapsibleFormWidget from '../CollapsibleFormWidget';
+
+/**
+ * Collapsible Form widget controlling video source as well as fallback sources
+ */
+const VideoSourceWidget = ({
+  // injected
+  intl,
+}) => {
+  const dispatch = useDispatch();
+  const {
+    videoId,
+    videoSource: source,
+    fallbackVideos,
+    allowVideoDownloads: allowDownload,
+  } = widgetHooks.widgetValues({
+    dispatch,
+    fields: {
+      [widgetHooks.selectorKeys.videoSource]: widgetHooks.genericWidget,
+      [widgetHooks.selectorKeys.videoId]: widgetHooks.genericWidget,
+      [widgetHooks.selectorKeys.fallbackVideos]: widgetHooks.arrayWidget,
+      [widgetHooks.selectorKeys.allowVideoDownloads]: widgetHooks.genericWidget,
+    },
+  });
+  const { videoIdChangeAlert } = hooks.videoIdChangeAlert();
+  const { updateVideoId, updateVideoURL } = hooks.sourceHooks({
+    dispatch,
+    previousVideoId: videoId.formValue,
+    setAlert: videoIdChangeAlert.set,
+  });
+  const {
+    addFallbackVideo,
+    deleteFallbackVideo,
+  } = hooks.fallbackHooks({ fallbackVideos: fallbackVideos.formValue, dispatch });
+
+  return (
+    <CollapsibleFormWidget
+      fontSize="x-small"
+      title={intl.formatMessage(messages.titleLabel)}
+    >
+      <ErrorAlert
+        dismissError={videoIdChangeAlert.dismiss}
+        hideHeading
+        isError={videoIdChangeAlert.show}
+      >
+        <FormattedMessage {...messages.videoIdChangeAlert} />
+      </ErrorAlert>
+
+      <div className="border-primary-100 border-bottom pb-4">
+        <Form.Group>
+          <Form.Control
+            floatingLabel={intl.formatMessage(messages.videoIdLabel)}
+            onChange={videoId.onChange}
+            onBlur={updateVideoId}
+            value={videoId.local}
+          />
+          <Form.Control.Feedback className="text-primary-300 mb-4">
+            <FormattedMessage {...messages.videoIdFeedback} />
+          </Form.Control.Feedback>
+        </Form.Group>
+        <Form.Group>
+          <Form.Control
+            floatingLabel={intl.formatMessage(messages.videoUrlLabel)}
+            onChange={source.onChange}
+            onBlur={(e) => updateVideoURL(e, videoId.local)}
+            value={source.local}
+          />
+          <Form.Control.Feedback className="text-primary-300">
+            <FormattedMessage {...messages.videoUrlFeedback} />
+          </Form.Control.Feedback>
+        </Form.Group>
+      </div>
+      <div className="mt-4">
+        <FormattedMessage {...messages.fallbackVideoTitle} />
+      </div>
+      <div className="mt-3">
+        <FormattedMessage {...messages.fallbackVideoMessage} />
+      </div>
+      {fallbackVideos.formValue.length > 0 ? fallbackVideos.formValue.map((videoUrl, index) => (
+        <Form.Row className="mt-3.5 mx-0 flex-nowrap">
+          <Form.Group>
+            <Form.Control
+              floatingLabel={intl.formatMessage(messages.fallbackVideoLabel)}
+              onChange={fallbackVideos.onChange(index)}
+              value={fallbackVideos.local[index]}
+              onBlur={fallbackVideos.onBlur(index)}
+            />
+            <IconButtonWithTooltip
+              key={`top-delete-${videoUrl}`}
+              tooltipPlacement="top"
+              tooltipContent={intl.formatMessage(messages.deleteFallbackVideo)}
+              src={DeleteOutline}
+              iconAs={Icon}
+              alt={intl.formatMessage(messages.deleteFallbackVideo)}
+              onClick={() => deleteFallbackVideo(videoUrl)}
+            />
+          </Form.Group>
+        </Form.Row>
+      )) : null}
+      <ActionRow className="mt-4.5">
+        <Form.Group>
+          <Form.Checkbox
+            checked={allowDownload.local}
+            className="decorative-control-label"
+            onChange={allowDownload.onCheckedChange}
+          >
+            <div className="small text-gray-700">
+              <FormattedMessage {...messages.allowDownloadCheckboxLabel} />
+            </div>
+          </Form.Checkbox>
+          <OverlayTrigger
+            key="top"
+            placement="top"
+            overlay={(
+              <Tooltip id="tooltip-top">
+                <FormattedMessage {...messages.allowDownloadTooltipMessage} />
+              </Tooltip>
+            )}
+          >
+            <Icon src={InfoOutline} style={{ height: '16px', width: '16px' }} />
+          </OverlayTrigger>
+        </Form.Group>
+        <ActionRow.Spacer />
+      </ActionRow>
+
+      <div className="my-4 border-primary-100 border-bottom" />
+      <Button
+        className="text-primary-500 font-weight-bold pl-0"
+        size="sm"
+        iconBefore={Add}
+        variant="link"
+        onClick={() => addFallbackVideo()}
+      >
+        <FormattedMessage {...messages.addButtonLabel} />
+      </Button>
+    </CollapsibleFormWidget>
+  );
+};
+VideoSourceWidget.propTypes = {
+  // injected
+  intl: intlShape.isRequired,
+};
+
+export const VideoSourceWidgetInternal = VideoSourceWidget; // For testing only
+export default injectIntl(VideoSourceWidget);
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/index.test.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/index.test.jsx
new file mode 100644
index 0000000000..187e127412
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/index.test.jsx
@@ -0,0 +1,109 @@
+import 'CourseAuthoring/editors/setupEditorTest';
+import React from 'react';
+import { dispatch } from 'react-redux';
+import { shallow } from '@edx/react-unit-test-utils';
+
+import { formatMessage } from '../../../../../../testUtils';
+import { VideoSourceWidgetInternal as VideoSourceWidget } from '.';
+import * as hooks from './hooks';
+
+jest.mock('react-redux', () => {
+  const dispatchFn = jest.fn();
+  return {
+    ...jest.requireActual('react-redux'),
+    dispatch: dispatchFn,
+    useDispatch: jest.fn(() => dispatchFn),
+  };
+});
+
+jest.mock('../hooks', () => ({
+  selectorKeys: ['soMEkEy'],
+  widgetValues: jest.fn().mockReturnValue({
+    videoId: { onChange: jest.fn(), onBlur: jest.fn(), local: '' },
+    videoSource: { onChange: jest.fn(), onBlur: jest.fn(), local: '' },
+    fallbackVideos: {
+      formValue: ['somEUrL'],
+      onChange: jest.fn(),
+      onBlur: jest.fn(),
+      local: '',
+    },
+    allowVideoDownloads: { local: false, onCheckedChange: jest.fn() },
+    allowVideoSharing: { local: false, onCheckedChange: jest.fn() },
+  }),
+}));
+
+jest.mock('./hooks', () => ({
+  videoIdChangeAlert: jest.fn().mockReturnValue({
+    videoIdChangeAlert: {
+      set: (args) => ({ set: args }),
+      show: false,
+      dismiss: (args) => ({ dismiss: args }),
+    },
+  }),
+  sourceHooks: jest.fn().mockReturnValue({
+    updateVideoId: (args) => ({ updateVideoId: args }),
+    updateVideoURL: jest.fn().mockName('updateVideoURL'),
+  }),
+  fallbackHooks: jest.fn().mockReturnValue({
+    addFallbackVideo: jest.fn().mockName('addFallbackVideo'),
+    deleteFallbackVideo: jest.fn().mockName('deleteFallbackVideo'),
+  }),
+}));
+
+jest.mock('../../../../../../data/redux', () => ({
+  selectors: {
+    video: {
+      allow: jest.fn(state => ({ allowTranscriptImport: state })),
+    },
+    requests: {
+      isFailed: jest.fn(state => ({ isFailed: state })),
+    },
+  },
+}));
+
+describe('VideoSourceWidget', () => {
+  const props = {
+    // inject
+    intl: { formatMessage },
+    // redux
+    videoSharingEnabledForCourse: false,
+  };
+
+  describe('snapshots', () => {
+    describe('snapshots: renders as expected with', () => {
+      it('default props', () => {
+        expect(
+          shallow(<VideoSourceWidget {...props} />).snapshot,
+        ).toMatchSnapshot();
+      });
+      it('videoSharingEnabledForCourse=true', () => {
+        const newProps = { ...props, videoSharingEnabledForCourse: true };
+        expect(
+          shallow(<VideoSourceWidget {...newProps} />).snapshot,
+        ).toMatchSnapshot();
+      });
+    });
+  });
+
+  describe('behavior inspection', () => {
+    let el;
+    let hook;
+    beforeEach(() => {
+      hook = hooks.sourceHooks({ dispatch, previousVideoId: 'someVideoId', setAlert: jest.fn() });
+      el = shallow(<VideoSourceWidget {...props} />);
+    });
+    test('updateVideoId is tied to id field onBlur', () => {
+      const expected = hook.updateVideoId;
+      expect(el
+        // eslint-disable-next-line
+        .shallowWrapper.props.children[1].props.children[0].props.children[0]
+        .props.onBlur).toEqual(expected);
+    });
+    test('updateVideoURL is tied to url field onBlur', () => {
+      const control = el.shallowWrapper.props.children[1].props.children[1].props.children[0];
+      expect(control.props.floatingLabel).toEqual('Video URL');
+      control.props.onBlur('onBlur event');
+      expect(hook.updateVideoURL).toHaveBeenCalledWith('onBlur event', '');
+    });
+  });
+});
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/messages.js b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/messages.js
new file mode 100644
index 0000000000..61e1d9c5d5
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/messages.js
@@ -0,0 +1,91 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+
+  titleLabel: {
+    id: 'authoring.videoeditor.videoSource.title.label',
+    defaultMessage: 'Video source',
+    description: 'Title for the video source widget',
+  },
+  videoIdLabel: {
+    id: 'authoring.videoeditor.videoSource.videoId.label',
+    defaultMessage: 'Video ID',
+    description: 'Label for video ID field',
+  },
+  videoIdFeedback: {
+    id: 'authoring.videoeditor.videoSource.videoId.feedback',
+    defaultMessage: 'If you were assigned a video ID by edX, enter the ID here.',
+    description: 'Feedback for video ID field',
+  },
+  videoUrlLabel: {
+    id: 'authoring.videoeditor.videoSource.videoUrl.label',
+    defaultMessage: 'Video URL',
+    description: 'Label for video URL field',
+  },
+  videoUrlFeedback: {
+    id: 'authoring.videoeditor.videoSource.videoUrl.feedback',
+    defaultMessage: `The URL for your video. This can be a YouTube URL, or a link
+    to an .mp4, .ogg, or .webm video file hosted elsewhere on the internet.`,
+    description: 'Feedback for video URL field',
+  },
+  videoIdChangeAlert: {
+    id: 'authoring.videoeditor.videoIdChangeAlert.message',
+    defaultMessage: 'The Video ID field has changed, please check the Video URL and fallback URL values and update them if necessary.',
+    description: 'Body message for the alert that appears when the video id has been changed.',
+  },
+  fallbackVideoTitle: {
+    id: 'authoring.videoeditor.videoSource.fallbackVideo.title',
+    defaultMessage: 'Fallback videos',
+    description: 'Title for the fallback videos section',
+  },
+  fallbackVideoMessage: {
+    id: 'authoring.videoeditor.videoSource.fallbackVideo.message',
+    defaultMessage: `To be sure all learners can access the video, edX
+    recommends providing additional videos in both .mp4 and
+    .webm formats.  The first listed video compatible with the
+    learner's device will play.`,
+    description: 'Test explaining reason for fallback videos',
+  },
+  fallbackVideoLabel: {
+    id: 'authoring.videoeditor.videoSource.fallbackVideo.label',
+    defaultMessage: 'Video URL',
+    description: 'Label for fallback video url field',
+  },
+  deleteFallbackVideo: {
+    id: 'authoring.videoeditor.videoSource.deleteFallbackVideo',
+    defaultMessage: 'Delete',
+    description: 'Message Presented To user for action to delete fallback video',
+  },
+  allowDownloadCheckboxLabel: {
+    id: 'authoring.videoeditor.videoSource.allowDownloadCheckboxLabel',
+    defaultMessage: 'Allow video downloads',
+    description: 'Label for allow video downloads checkbox',
+  },
+  allowDownloadTooltipMessage: {
+    id: 'authoring.videoeditor.videoSource.allowDownloadTooltipMessage',
+    defaultMessage: `Allow learners to download versions of this video in
+    different formats if they cannot use the edX video player or do not have
+    access to YouTube.`,
+    description: 'Message for allow video downloads checkbox',
+  },
+  allowVideoSharingCheckboxLabel: {
+    id: 'authoring.videoeditor.videoSource.allowVideoSharingCheckboxLabel',
+    defaultMessage: 'Allow this video to be shared on social media.',
+    description: 'Label for allow shareable video checkbox',
+  },
+  allowVideoSharingTooltipMessage: {
+    id: 'authoring.videoeditor.videoSource.allowVideoSharingTooltipMessage',
+    defaultMessage: `Allow learners to share this video publicly on social media.
+    The video will be viewable by anyone, they will not need to enroll in the course
+    or even have an edX account. Links to the course about page and to enroll in the 
+    course will appear alongside the video.`,
+    description: 'Message for allow shareable video checkbox',
+  },
+  addButtonLabel: {
+    id: 'authoring.videoeditor.videoSource.fallbackVideo.addButtonLabel',
+    defaultMessage: 'Add a video URL',
+    description: 'Label for add a video URL button',
+  },
+});
+
+export default messages;
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/__snapshots__/CollapsibleFormWidget.test.jsx.snap b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/__snapshots__/CollapsibleFormWidget.test.jsx.snap
new file mode 100644
index 0000000000..8da3c5f03c
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/__snapshots__/CollapsibleFormWidget.test.jsx.snap
@@ -0,0 +1,145 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CollapsibleFormWidget render snapshots: renders as expected with default props 1`] = `
+<Advanced
+  className="collapsible-card rounded mx-4 my-3 px-4 text-primary-500"
+  defaultOpen={true}
+>
+  <Trigger
+    className="collapsible-trigger d-flex border-0 align-items-center pt-4 p-0"
+    style={
+      {
+        "justifyContent": "unset",
+      }
+    }
+  >
+    <Visible
+      className="p-0 pb-3"
+      whenClosed={true}
+    >
+      <div
+        className="d-flex flex-column flex-grow-1"
+      >
+        <div
+          className="d-flex flex-grow-1 w-75 x-small"
+        >
+          tiTLE
+        </div>
+        <div
+          className=" mb-4 mt-3"
+        >
+          SuBTItle
+        </div>
+      </div>
+      <div
+        className="d-flex flex-row align-self-start"
+      >
+        <IconButton
+          alt="Expand"
+          iconAs="Icon"
+          variant="dark"
+        />
+      </div>
+    </Visible>
+    <Visible
+      whenOpen={true}
+    >
+      <div
+        className="d-flex flex-grow-1 w-75 x-small"
+      >
+        tiTLE
+      </div>
+      <div
+        className="align-self-start"
+      >
+        <IconButton
+          alt="Collapse"
+          iconAs="Icon"
+          variant="dark"
+        />
+      </div>
+    </Visible>
+  </Trigger>
+  <Body
+    className="collapsible-body rounded px-0  pb-4"
+  >
+    <p>
+      Some test string
+    </p>
+  </Body>
+</Advanced>
+`;
+
+exports[`CollapsibleFormWidget render snapshots: renders with open={true} when there is error 1`] = `
+<Advanced
+  className="collapsible-card rounded mx-4 my-3 px-4 text-primary-500"
+  defaultOpen={true}
+  open={true}
+>
+  <Trigger
+    className="collapsible-trigger d-flex border-0 align-items-center pt-4 p-0"
+    style={
+      {
+        "justifyContent": "unset",
+      }
+    }
+  >
+    <Visible
+      className="p-0 pb-3"
+      whenClosed={true}
+    >
+      <div
+        className="d-flex flex-column flex-grow-1"
+      >
+        <div
+          className="d-flex flex-grow-1 w-75 x-small"
+        >
+          tiTLE
+        </div>
+        <div
+          className=" mb-4 mt-3"
+        >
+          SuBTItle
+        </div>
+      </div>
+      <div
+        className="d-flex flex-row align-self-start"
+      >
+        <Icon
+          className="alert-icon"
+        />
+        <IconButton
+          alt="Expand"
+          iconAs="Icon"
+          variant="dark"
+        />
+      </div>
+    </Visible>
+    <Visible
+      whenOpen={true}
+    >
+      <div
+        className="d-flex flex-grow-1 w-75 x-small"
+      >
+        tiTLE
+      </div>
+      <div
+        className="align-self-start"
+      >
+        <IconButton
+          alt="Collapse"
+          iconAs="Icon"
+          variant="dark"
+        />
+      </div>
+    </Visible>
+  </Trigger>
+  <Body
+    className="collapsible-body rounded px-0  pb-4"
+  >
+    <p>
+      Some test string
+    </p>
+  </Body>
+</Advanced>
+`;
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/handlers.js b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/handlers.js
new file mode 100644
index 0000000000..1c8bb1ff5a
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/handlers.js
@@ -0,0 +1,57 @@
+/**
+ * handleIndexEvent({ handler, transform })
+ * return a method that takes an index and returns an event handler of the given type
+ * that calls a transform with the given index and the incoming value.
+ * @param {func} handler - event handler (onValue, onChecked, etc)
+ * @param {func} transform - transform method taking an index and a new value
+ * @return {func} - event handler creator for index-tied values
+ */
+export const handleIndexEvent = ({ handler, transform }) => (index) => (
+  handler(val => transform(index, val))
+);
+
+/**
+ * handleIndexTransformEvent({ handler, setter, local, transform })
+ * return a method that takes an index and returns an event handler of the given type
+ * that calls a transform with the given index and the incoming value.
+ * @param {func} handler - event handler (onValue, onChecked, etc)
+ * @param {string|number|object} local - local hook values
+ * @param {func} setter - method that updates models based on event
+ * @param {func} transform - transform method taking an index and a new value
+ * @return {func} - event handler creator for index-tied values with separate setter and transforms
+ */
+export const handleIndexTransformEvent = ({
+  handler,
+  local,
+  setter,
+  transform,
+}) => (index) => (
+  handler(val => setter(transform(local, index, val)))
+);
+
+/**
+ * onValue(handler)
+ * returns an event handler that calls the given method with the event target value
+ * Intended for most basic input types.
+ * @param {func} handler - callback to receive the event value
+ * @return - event handler that calls passed handler with event.target.value
+ */
+export const onValue = (handler) => (e) => handler(e.target.value);
+
+/**
+ * onValue(handler)
+ * returns an event handler that calls the given method with the event target value
+ * Intended for checkbox input types.
+ * @param {func} handler - callback to receive the event value
+ * @return - event handler that calls passed handler with event.target.checked
+ */
+export const onChecked = (handler) => (e) => handler(e.target.checked);
+
+/**
+ * onEvent(handler)
+ * returns an event handler that calls the given method with the event
+ * Intended for most basic input types.
+ * @param {func} handler - callback to receive the event value
+ * @return - event handler that calls passed handler with event
+ */
+export const onEvent = (handler) => (e) => handler(e);
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/handlers.test.js b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/handlers.test.js
new file mode 100644
index 0000000000..895d152363
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/handlers.test.js
@@ -0,0 +1,57 @@
+import * as handlers from './handlers';
+
+const handler = jest.fn(cb => ({ handler: cb }));
+const transform = jest.fn((...args) => ({ transform: args }));
+const setter = jest.fn(val => ({ setter: val }));
+const index = 'test-index';
+const val = 'TEST value';
+const local = 'local-test-value';
+describe('Video Settings Modal event handler methods', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+  describe('handleIndexEvent', () => {
+    describe('returned method', () => {
+      it('takes index and calls handler with transform handler based on index', () => {
+        expect(
+          handlers.handleIndexEvent({ handler, transform })(index).handler(val),
+        ).toEqual(transform(index, val));
+      });
+    });
+  });
+  describe('handleIndexTransformEvent', () => {
+    describe('returned method', () => {
+      it('takes index and calls handler with setter(transform(local, index, val))', () => {
+        expect(
+          handlers.handleIndexTransformEvent({
+            handler,
+            setter,
+            local,
+            transform,
+          })(index).handler(val),
+        ).toEqual(setter(transform(local, index, val)));
+      });
+    });
+  });
+  describe('onValue', () => {
+    describe('returned method', () => {
+      it('calls handler with event.target.value', () => {
+        expect(handlers.onValue(handler)({ target: { value: val } })).toEqual(handler(val));
+      });
+    });
+  });
+  describe('onChecked', () => {
+    describe('returned method', () => {
+      it('calls handler with event.target.checked', () => {
+        expect(handlers.onChecked(handler)({ target: { checked: val } })).toEqual(handler(val));
+      });
+    });
+  });
+  describe('onEvent', () => {
+    describe('returned method', () => {
+      it('calls handler with event', () => {
+        expect(handlers.onEvent(handler)(val)).toEqual(handler(val));
+      });
+    });
+  });
+});
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/hooks.js b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/hooks.js
new file mode 100644
index 0000000000..d0b8503e2b
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/hooks.js
@@ -0,0 +1,260 @@
+import {
+  useCallback,
+  useState,
+  useEffect,
+} from 'react';
+import { useSelector } from 'react-redux';
+
+import { StrictDict, keyStore } from '../../../../../utils';
+import { actions, selectors } from '../../../../../data/redux';
+
+import {
+  handleIndexTransformEvent,
+  onValue,
+  onChecked,
+} from './handlers';
+// This 'module' self-import hack enables mocking during tests.
+// See src/editors/decisions/0005-internal-editor-testability-decisions.md. The whole approach to how hooks are tested
+// should be re-thought and cleaned up to avoid this pattern.
+// eslint-disable-next-line import/no-self-import
+import * as module from './hooks';
+
+export const selectorKeys = keyStore(selectors.video);
+
+export const state = StrictDict(
+  [
+    selectorKeys.videoSource,
+    selectorKeys.videoId,
+    selectorKeys.fallbackVideos,
+    selectorKeys.allowVideoDownloads,
+    selectorKeys.allowVideoSharing,
+
+    selectorKeys.thumbnail,
+
+    selectorKeys.transcripts,
+    selectorKeys.allowTranscriptDownloads,
+    selectorKeys.showTranscriptByDefault,
+
+    selectorKeys.duration,
+
+    selectorKeys.handout,
+
+    selectorKeys.licenseType,
+    selectorKeys.licenseDetails,
+  ].reduce(
+    (obj, key) => ({ ...obj, [key]: (val) => useState(val) }),
+    {},
+  ),
+);
+
+/**
+ * updateArray(array, index, val)
+ * Returns a new array with the element at <index> replaced with <val>
+ * @param {any[]} array - array of values
+ * @param {number} index - array index to replace
+ * @param {any} val - new value
+ * @return {any[]} - new array with element at index replaced with val
+ */
+export const updatedArray = (array, index, val) => {
+  const newArray = [...array];
+  newArray.splice(index, 1, val);
+  return newArray;
+};
+
+/**
+ * updateObject(object, index, val)
+ * Returns a new object with the element at <index> replaced with <val>
+ * @param {object} object - object of values
+ * @param {string} index - object index to replace
+ * @param {any} val - new value
+ * @return {any[]} - new object with element at index replaced with val
+ */
+export const updatedObject = (obj, index, val) => ({ ...obj, [index]: val });
+
+/**
+ * updateFormField({ dispatch, key })(val)
+ * Creates a callback to update a given form field based on an incoming value.
+ * @param {func} dispatch - redux dispatch method
+ * @param {string} key - form key
+ * @return {func} - callback taking a value and updating the video redux field
+ */
+// eslint-disable-next-line react-hooks/rules-of-hooks
+export const updateFormField = ({ dispatch, key }) => useCallback(
+  (val) => dispatch(actions.video.updateField({ [key]: val })),
+  [],
+);
+
+/**
+ * valueHooks({ dispatch, key })
+ * returns local and redux state associated with the given data key, as well as methods
+ * to update either or both of those.
+ * @param {string} key - redux video state key
+ * @param {func} dispatch - redux dispatch method
+ * @return {object} - hooks based on the local and redux value associated with the given key
+ *   formValue - value state in redux
+ *   setFormValue - sets form field in redux
+ *   local - value state in hook
+ *   setLocal - sets form field in hook
+ *   setAll - sets form field in hook AND redux
+ */
+export const valueHooks = ({ dispatch, key }) => {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const formValue = useSelector(selectors.video[key]);
+  const [local, setLocal] = module.state[key](formValue);
+  const setFormValue = module.updateFormField({ dispatch, key });
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useEffect(() => {
+    setLocal(formValue);
+  }, [formValue]);
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const setAll = useCallback(
+    (val) => {
+      setLocal(val);
+      setFormValue(val);
+    },
+    [setLocal, setFormValue],
+  );
+  return {
+    formValue,
+    local,
+    setLocal,
+    setFormValue,
+    setAll,
+  };
+};
+
+/**
+ * genericWidget({ dispatch, key })
+ * Returns the value-tied hooks for inputs associated with a flat value in redux
+ * Tied to redux video shape based on data key
+ * includes onChange, onBlur, and onCheckedChange methods.  blur and checked change
+ * instantly affect both redux and local, while change (while typing) only affects
+ * the local component.
+ * @param {func} dispatch - redux dispatch method
+ * @param {string} key - redux video shape key
+ * @return {object} - state hooks
+ *   formValue - value state in redux
+ *   setFormValue - sets form field in redux
+ *   local - value state in hook
+ *   setLocal - sets form field in hook
+ *   setAll - sets form field in hook AND redux
+ *   onChange - handle input change by updating local state
+ *   onCheckedChange - handle checked change by updating local and redux state
+ *   onBlur - handle input blur by updating local and redux states
+ */
+export const genericWidget = ({ dispatch, key }) => {
+  const {
+    formValue,
+    local,
+    setLocal,
+    setFormValue,
+    setAll,
+  } = module.valueHooks({ dispatch, key });
+  return {
+    formValue,
+    local,
+    setLocal,
+    setAll,
+    setFormValue,
+    onChange: onValue(setLocal),
+    onCheckedChange: onChecked(setAll),
+    onBlur: onValue(setAll),
+  };
+};
+
+/**
+ * arrayWidget({ dispatch, key })
+ * Returns the value-tied hooks for inputs associated with a value in an array in the
+ * video redux shape.
+ * Tied to redux video shape based on data key
+ * includes onChange, onBlur, and onClear methods.  blur changes local and redux state,
+ * on change affects only local state, and onClear sets both to an empty string.
+ * The creators from this widget will require an index to provide the final event-handler.
+ * @param {func} dispatch - redux dispatch method
+ * @param {string} key - redux video shape key
+ * @return {object} - state hooks
+ *   formValue - value state in redux
+ *   setFormValue - sets form field in redux
+ *   local - value state in hook
+ *   setLocal - sets form field in hook
+ *   setAll - sets form field in hook AND redux
+ *   onChange(index) - handle input change by updating local state
+ *   onBlur(index) - handle input blur by updating local and redux states
+ *   onClear(index) - handle clear event by setting value to empty string
+ */
+export const arrayWidget = ({ dispatch, key }) => {
+  const widget = module.valueHooks({ dispatch, key });
+  return {
+    ...widget,
+    onBlur: handleIndexTransformEvent({
+      handler: onValue,
+      setter: widget.setAll,
+      transform: module.updatedArray,
+      local: widget.local,
+    }),
+    onChange: handleIndexTransformEvent({
+      handler: onValue,
+      setter: widget.setLocal,
+      transform: module.updatedArray,
+      local: widget.local,
+    }),
+    onClear: (index) => () => widget.setAll(module.updatedArray(widget.local, index, '')),
+  };
+};
+
+/**
+ * objectWidget({ dispatch, key })
+ * Returns the value-tied hooks for inputs associated with a value in an object in the
+ * video redux shape.
+ * Tied to redux video shape based on data key
+ * includes onChange and onBlur methods.  blur changes local and redux state,
+ * on change affects only local state.
+ * The creators from this widget will require an index to provide the final event-handler.
+ * @param {func} dispatch - redux dispatch method
+ * @param {string} key - redux video shape key
+ * @return {object} - state hooks
+ *   formValue - value state in redux
+ *   setFormValue - sets form field in redux
+ *   local - value state in hook
+ *   setLocal - sets form field in hook
+ *   setAll - sets form field in hook AND redux
+ *   onChange(index) - handle input change by updating local state
+ *   onBlur(index) - handle input blur by updating local and redux states
+ *   onClear(index) - handle clear event by setting value to empty string
+ */
+export const objectWidget = ({ dispatch, key }) => {
+  const widget = module.valueHooks({ dispatch, key });
+  return {
+    ...widget,
+    onChange: handleIndexTransformEvent({
+      handler: onValue,
+      setter: widget.setLocal,
+      transform: module.updatedObject,
+      local: widget.local,
+    }),
+    onBlur: handleIndexTransformEvent({
+      handler: onValue,
+      setter: widget.setAll,
+      transform: module.updatedObject,
+      local: widget.local,
+    }),
+  };
+};
+
+/**
+ * widgetValues({ fields, dispatch })
+ * widget value populator, that takes a fields mapping (dataKey: widgetFn) and dispatch
+ * method, and returns object of widget values.
+ * @param {object} fields - object with video data keys for keys and widget methods for values
+ * @param {func} dispatch - redux dispatch method
+ * @return {object} - { <key>: <widgetFn({ key, dispatch })> }
+ */
+export const widgetValues = ({ fields, dispatch }) => Object.keys(fields).reduce(
+  (obj, key) => ({
+    ...obj,
+    [key]: fields[key]({ key, dispatch }),
+  }),
+  {},
+);
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/hooks.test.js b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/hooks.test.js
new file mode 100644
index 0000000000..ebfa493729
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/hooks.test.js
@@ -0,0 +1,312 @@
+import 'CourseAuthoring/editors/setupEditorTest';
+
+import { useEffect } from 'react';
+import { useSelector } from 'react-redux';
+
+import { keyStore } from '../../../../../utils';
+import { actions, selectors } from '../../../../../data/redux';
+import { MockUseState } from '../../../../../testUtils';
+
+import * as handlers from './handlers';
+import * as hooks from './hooks';
+
+jest.mock('react', () => ({
+  ...jest.requireActual('react'),
+  useState: (val) => ({ useState: val }),
+  useEffect: jest.fn(),
+  useCallback: jest.fn((cb, prereqs) => ({ useCallback: { cb, prereqs } })),
+  useMemo: jest.fn((cb, prereqs) => ({ useMemo: { cb, prereqs } })),
+}));
+
+jest.mock('./handlers', () => ({
+  handleIndexEvent: jest.fn(args => ({ handleIndexEvent: args })),
+  handleIndexTransformEvent: jest.fn(args => ({ handleIndexTransformEvent: args })),
+  onValue: jest.fn(cb => ({ onValue: cb })),
+  onChecked: jest.fn(cb => ({ onChecked: cb })),
+  onEvent: jest.fn(cb => ({ onEvent: cb })),
+}));
+
+jest.mock('../../../../../data/redux', () => ({
+  actions: {
+    video: {
+      updateField: (val) => ({ updateField: val }),
+    },
+  },
+  selectors: {
+    video: {
+      videoSource: (state) => ({ videoSource: state }),
+      fallbackVideos: (state) => ({ fallbackVideos: state }),
+      allowVideoDownloads: (state) => ({ allowVideoDownloads: state }),
+      allowVideoSharing: (state) => ({ allowVideoSharing: state }),
+      thumbnail: (state) => ({ thumbnail: state }),
+      transcripts: (state) => ({ transcripts: state }),
+      allowTranscriptDownloads: (state) => ({ allowTranscriptDownloads: state }),
+      showTranscriptByDefault: (state) => ({ showTranscriptByDefault: state }),
+      duration: (state) => ({ duration: state }),
+      handout: (state) => ({ handout: state }),
+      licenseType: (state) => ({ licenseType: state }),
+      licenseDetails: (state) => ({ licenseDetails: state }),
+    },
+  },
+}));
+
+const keys = {
+  hooks: keyStore(hooks),
+  selectors: hooks.selectorKeys,
+};
+
+const state = new MockUseState(hooks);
+const testValue = 'my-test-value';
+const testValue2 = 'my-test-value-2';
+const testKey = keys.selectors.handout;
+const dispatch = jest.fn(val => ({ dispatch: val }));
+
+let out;
+
+describe('Video Settings modal hooks', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+  describe('state hooks', () => {
+    state.testGetter(state.keys.videoSource);
+    state.testGetter(state.keys.fallbackVideos);
+    state.testGetter(state.keys.allowVideoDownloads);
+    state.testGetter(state.keys.allowVideoSharing);
+
+    state.testGetter(state.keys.thumbnail);
+
+    state.testGetter(state.keys.transcripts);
+    state.testGetter(state.keys.allowTranscriptDownloads);
+    state.testGetter(state.keys.showTranscriptByDefault);
+
+    state.testGetter(state.keys.duration);
+
+    state.testGetter(state.keys.handout);
+
+    state.testGetter(state.keys.licenseType);
+    state.testGetter(state.keys.licenseDetails);
+  });
+  describe('non-state hooks', () => {
+    beforeEach(() => state.mock());
+    afterEach(() => state.restore());
+    describe('updatedArray', () => {
+      it('returns a new array with the given index replaced', () => {
+        const testArray = ['0', '1', '2', '3', '4'];
+        const oldArray = [...testArray];
+        expect(hooks.updatedArray(testArray, 3, testValue)).toEqual(
+          ['0', '1', '2', testValue, '4'],
+        );
+        expect(testArray).toEqual(oldArray);
+      });
+    });
+    describe('updatedObject', () => {
+      it('returns a new object with the given index replaced', () => {
+        const testObj = { some: 'data', [testKey]: testValue };
+        const oldObj = { ...testObj };
+        expect(hooks.updatedObject(testObj, testKey, testValue2)).toEqual(
+          { ...testObj, [testKey]: testValue2 },
+        );
+        expect(testObj).toEqual(oldObj);
+      });
+    });
+    describe('updateFormField', () => {
+      it('returns a memoized callback that is only created once', () => {
+        expect(hooks.updateFormField({ dispatch, key: testKey }).useCallback.prereqs).toEqual([]);
+      });
+      it('returns memoized callback that dispaches updateField with val on the given key', () => {
+        hooks.updateFormField({ dispatch, key: testKey }).useCallback.cb(testValue);
+        expect(dispatch).toHaveBeenCalledWith(actions.video.updateField({
+          [testKey]: testValue,
+        }));
+      });
+    });
+    describe('valueHooks', () => {
+      let formValue;
+      beforeEach(() => {
+        formValue = useSelector(selectors.video[testKey]);
+      });
+      describe('behavior', () => {
+        describe('initialization', () => {
+          test('useEffect memoized on formValue', () => {
+            hooks.valueHooks({ dispatch, key: testKey });
+            expect(useEffect).toHaveBeenCalled();
+            expect(useEffect.mock.calls[0][1]).toEqual([formValue]);
+          });
+          test('calls setLocal with formValue by default', () => {
+            hooks.valueHooks({ dispatch, key: testKey });
+            useEffect.mock.calls[0][0]();
+            expect(state.setState[testKey]).toHaveBeenCalledWith(formValue);
+          });
+        });
+      });
+      describe('returned object', () => {
+        const mockUpdateFormField = (args) => jest.fn(
+          (val) => ({ updateFormField: { args, val } }),
+        );
+        beforeEach(() => {
+          jest.spyOn(hooks, keys.hooks.updateFormField)
+            .mockImplementationOnce(mockUpdateFormField);
+          out = hooks.valueHooks({ dispatch, key: testKey });
+        });
+        test('formValue from selectors.video[key]', () => {
+          expect(out.formValue).toEqual(useSelector(selectors.video[testKey]));
+        });
+        describe('local and setLocal', () => {
+          test('keyed to state, initialized with formValue', () => {
+            const { local, setLocal } = out;
+            expect(local).toEqual(formValue);
+            setLocal(testValue);
+            expect(state.setState[testKey]).toHaveBeenCalledWith(testValue);
+          });
+        });
+        test('setFormValue forwarded from module', () => {
+          expect(out.setFormValue(testValue)).toEqual(
+            mockUpdateFormField({ dispatch, key: testKey })(testValue),
+          );
+        });
+        describe('setAll', () => {
+          it('returns a memoized callback based on setLocal and setFormValue', () => {
+            expect(out.setAll.useCallback.prereqs).toEqual([out.setLocal, out.setFormValue]);
+          });
+          it('calls setLocal and setFormValue with the passed value', () => {
+            out.setAll.useCallback.cb(testValue);
+            expect(out.setLocal).toHaveBeenCalledWith(testValue);
+            expect(out.setFormValue).toHaveBeenCalledWith(testValue);
+          });
+        });
+      });
+    });
+    describe('genericWidget', () => {
+      const valueProps = {
+        formValue: '123',
+        local: 23,
+        setLocal: jest.fn(),
+        setFormValue: jest.fn(),
+        setAll: jest.fn(),
+      };
+      beforeEach(() => {
+        jest.spyOn(hooks, keys.hooks.valueHooks).mockReturnValueOnce(valueProps);
+        out = hooks.genericWidget({ dispatch, key: testKey });
+      });
+      describe('returned object', () => {
+        it('forwards formValue and local from valueHooks', () => {
+          expect(hooks.valueHooks).toHaveBeenCalledWith({ dispatch, key: testKey });
+          expect(out.formValue).toEqual(valueProps.formValue);
+          expect(out.local).toEqual(valueProps.local);
+        });
+        test('setFormValue mapped to valueHooks.setFormValue', () => {
+          expect(out.setFormValue).toEqual(valueProps.setFormValue);
+        });
+        test('onChange mapped to handlers.onValue(valueHooks.setLocal)', () => {
+          expect(out.onChange).toEqual(handlers.onValue(valueProps.setLocal));
+        });
+        test('onCheckedChange mapped to handlers.onChecked(valueHooks.setAll)', () => {
+          expect(out.onCheckedChange).toEqual(handlers.onChecked(valueProps.setAll));
+        });
+        test('onBlur mapped to handlers.onValue(valueHooks.setAll)', () => {
+          expect(out.onBlur).toEqual(handlers.onValue(valueProps.setAll));
+        });
+      });
+    });
+    describe('non-generic widgets', () => {
+      const widgetValues = {
+        formValue: '123',
+        local: 23,
+        setLocal: jest.fn(),
+        setFormValue: jest.fn(),
+        setAll: jest.fn(),
+      };
+      let valueHooksSpy;
+      beforeEach(() => {
+        valueHooksSpy = jest.spyOn(hooks, keys.hooks.valueHooks).mockReturnValue(widgetValues);
+      });
+      afterEach(() => {
+        valueHooksSpy.mockRestore();
+      });
+      describe('arrayWidget', () => {
+        const mockUpdatedArray = (...args) => ({ updatedArray: args });
+        let arraySpy;
+        beforeEach(() => {
+          arraySpy = jest.spyOn(hooks, keys.hooks.updatedArray)
+            .mockImplementation(mockUpdatedArray);
+          out = hooks.arrayWidget({ dispatch, key: testKey });
+        });
+        afterEach(() => {
+          arraySpy.mockRestore();
+        });
+        it('forwards widget values', () => {
+          expect(out.formValue).toEqual(widgetValues.formValue);
+          expect(out.local).toEqual(widgetValues.local);
+        });
+        it('overrides onChange with handleIndexTransformEvent', () => {
+          expect(out.onChange).toEqual(handlers.handleIndexTransformEvent({
+            handler: handlers.onValue,
+            setter: widgetValues.setLocal,
+            transform: arraySpy,
+            local: widgetValues.local,
+          }));
+        });
+        it('overrides onBlur with handleIndexTransformEvent', () => {
+          expect(out.onBlur).toEqual(handlers.handleIndexTransformEvent({
+            handler: handlers.onValue,
+            setter: widgetValues.setAll,
+            transform: arraySpy,
+            local: widgetValues.local,
+          }));
+        });
+        it('adds onClear event that calls setAll with empty string', () => {
+          out.onClear(testKey)();
+          expect(widgetValues.setAll).toHaveBeenCalledWith(
+            arraySpy(widgetValues.local, testKey, ''),
+          );
+        });
+      });
+      describe('objectWidget', () => {
+        beforeEach(() => {
+          out = hooks.objectWidget({ dispatch, key: testKey });
+        });
+        it('forwards widget values', () => {
+          expect(out.formValue).toEqual(widgetValues.formValue);
+          expect(out.local).toEqual(widgetValues.local);
+        });
+        it('overrides onChange with handleIndexTransformEvent', () => {
+          expect(out.onChange).toEqual(handlers.handleIndexTransformEvent({
+            handler: handlers.onValue,
+            setter: widgetValues.setLocal,
+            transform: hooks.updatedObject,
+            local: widgetValues.local,
+          }));
+        });
+        it('overrides onBlur with handleIndexTransformEvent', () => {
+          expect(out.onBlur).toEqual(handlers.handleIndexTransformEvent({
+            handler: handlers.onValue,
+            setter: widgetValues.setAll,
+            transform: hooks.updatedObject,
+            local: widgetValues.local,
+          }));
+        });
+      });
+    });
+    describe('widgetValues', () => {
+      describe('returned object', () => {
+        test('shaped to the fields object, where each value is called with key and dispatch', () => {
+          const testKeys = ['1', '24', '23gsa'];
+          const fieldMethods = [
+            jest.fn(v => ({ v1: v })),
+            jest.fn(v => ({ v2: v })),
+            jest.fn(v => ({ v3: v })),
+          ];
+          const fields = testKeys.reduce((obj, key, index) => ({
+            ...obj,
+            [key]: fieldMethods[index],
+          }), {});
+          const expected = testKeys.reduce((obj, key, index) => ({
+            ...obj,
+            [key]: fieldMethods[index]({ key, dispatch }),
+          }), {});
+          expect(hooks.widgetValues({ fields, dispatch })).toMatchObject(expected);
+        });
+      });
+    });
+  });
+});
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/messages.js b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/messages.js
new file mode 100644
index 0000000000..57e097fb76
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/messages.js
@@ -0,0 +1,85 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+
+  expandAltText: {
+    id: 'authoring.videoeditor.expand',
+    defaultMessage: 'Expand',
+  },
+  collapseAltText: {
+    id: 'authoring.videoeditor.collapse',
+    defaultMessage: 'Collapse',
+  },
+  validateErrorTitle: {
+    id: 'authoring.videoeditor.validate.error.title',
+    defaultMessage: 'We couldn\'t add your video.',
+    description: 'Title of validation error.',
+  },
+  validateErrorBody: {
+    id: 'authoring.videoeditor.validate.error.body',
+    defaultMessage: 'Please check your entries and try again.',
+    description: 'Body of validation error.',
+  },
+  durationTitle: {
+    id: 'authoring.videoeditor.duration.title',
+    defaultMessage: 'Duration',
+    description: 'Title of Duration widget',
+  },
+  durationDescription: {
+    id: 'authoring.videoeditor.duration.description',
+    defaultMessage: 'Set a specific section of the video to play.',
+    description: 'Description of Duration widget',
+  },
+  startTimeLabel: {
+    id: 'authoring.videoeditor.duration.startTime.label',
+    defaultMessage: 'Start time',
+    description: 'Label of start time input field',
+  },
+  stopTimeLabel: {
+    id: 'authoring.videoeditor.duration.stopTime.label',
+    defaultMessage: 'Stop time',
+    description: 'Label of stop time input field',
+  },
+  durationHint: {
+    id: 'authoring.videoeditor.duration.hint',
+    defaultMessage: 'Enter time as HH:MM:SS',
+    description: 'Hint text for start and stop time input fields',
+  },
+  fullVideoLength: {
+    id: 'authoring.videoeditor.duration.fullVideoLength',
+    defaultMessage: 'Full video length',
+    description: 'Text describing a video with neither custom start time nor custom stop time',
+  },
+  startsAt: {
+    id: 'authoring.videoeditor.duration.startsAt',
+    defaultMessage: 'Starts at {startTime}',
+    description: 'Text describing a video with custom start time and default stop time',
+  },
+  total: {
+    id: 'authoring.videoeditor.duration.total',
+    defaultMessage: 'Total: {total}',
+    description: 'Text describing a video with custom start time and custom stop time, or just a custom stop time',
+  },
+  custom: {
+    id: 'authoring.videoeditor.duration.custom',
+    defaultMessage: 'Custom: {total}',
+    description: 'Text describing a video with custom start time and custom stop time, or just a custom stop time for a collapsed widget',
+  },
+  noTranscriptsAdded: {
+    id: 'authoring.videoeditor.transcripts.empty',
+    defaultMessage: 'No transcripts added',
+    description: 'Message shown when the user has not selected any transcripts for the video.',
+  },
+  videoTypeYoutube: {
+    id: 'authoring.videoeditor.videotype.youtube',
+    defaultMessage: 'YouTube video',
+    description: 'Shown on the preview card if the video is from youtube.com.',
+  },
+  videoTypeOther: {
+    id: 'authoring.videoeditor.videotype.other',
+    defaultMessage: 'Other video',
+    description: 'Shown on the preview card if the video source could not be identified.',
+  },
+});
+
+export default messages;
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/index.scss b/src/editors/containers/VideoEditor/components/VideoSettingsModal/index.scss
new file mode 100644
index 0000000000..119b04dfba
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/index.scss
@@ -0,0 +1,6 @@
+// .video-settings-modal {
+//   .video-preview {
+//   }
+//   .video-controls {
+//   }
+// }
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/index.tsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/index.tsx
new file mode 100644
index 0000000000..4761e39320
--- /dev/null
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/index.tsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import { Button, Icon } from '@openedx/paragon';
+import { ArrowBackIos } from '@openedx/paragon/icons';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+
+// import VideoPreview from './components/VideoPreview';
+import { ErrorSummary } from './ErrorSummary';
+import DurationWidget from './components/DurationWidget';
+import HandoutWidget from './components/HandoutWidget';
+import LicenseWidget from './components/LicenseWidget';
+import ThumbnailWidget from './components/ThumbnailWidget';
+import TranscriptWidget from './components/TranscriptWidget';
+import VideoSourceWidget from './components/VideoSourceWidget';
+// Using default import to get selectors connected VideoSourceWidget
+import ConnectedVideoPreviewWidget from './components/VideoPreviewWidget';
+import './index.scss';
+import SocialShareWidget from './components/SocialShareWidget';
+import messages from '../../messages';
+
+interface Props {
+  onReturn: () => void;
+  isLibrary: boolean;
+}
+
+const VideoSettingsModal: React.FC<Props> = ({
+  onReturn,
+  isLibrary,
+}) => (
+  <>
+    {!isLibrary && (
+      <Button
+        variant="link"
+        className="text-primary-500"
+        size="sm"
+        onClick={onReturn}
+        style={{
+          textDecoration: 'none',
+          marginLeft: '3px',
+        }}
+      >
+        <Icon src={ArrowBackIos} style={{ height: '13px' }} />
+        <FormattedMessage {...messages.replaceVideoButtonLabel} />
+      </Button>
+    )}
+    <ErrorSummary />
+    <ConnectedVideoPreviewWidget />
+    <VideoSourceWidget />
+    {!isLibrary && (
+      <SocialShareWidget />
+    )}
+    <ThumbnailWidget />
+    {!isLibrary && ( // Since content libraries v2 don't support static assets yet, we can't include transcripts.
+      <TranscriptWidget />
+    )}
+    <DurationWidget />
+    <HandoutWidget />
+    <LicenseWidget />
+  </>
+);
+
+export default VideoSettingsModal;
diff --git a/src/editors/containers/VideoEditor/hooks.test.ts b/src/editors/containers/VideoEditor/hooks.test.ts
new file mode 100644
index 0000000000..2a24fbc428
--- /dev/null
+++ b/src/editors/containers/VideoEditor/hooks.test.ts
@@ -0,0 +1,101 @@
+import { thunkActions } from '../../data/redux';
+import { MockUseState } from '../../testUtils';
+
+import * as hooks from './hooks';
+
+jest.mock('react', () => ({
+  ...jest.requireActual('react'),
+  useRef: jest.fn(val => ({ current: val })),
+  useEffect: jest.fn(),
+  useCallback: (cb, prereqs) => ({ cb, prereqs }),
+}));
+
+const mockDispatchFn = jest.fn();
+jest.mock('react-redux', () => ({
+  ...jest.requireActual('react-redux'),
+  dispatch: mockDispatchFn,
+  useDispatch: jest.fn(() => mockDispatchFn),
+}));
+
+jest.mock('../../data/redux', () => ({
+  thunkActions: {
+    video: {
+      saveVideoData: jest.fn(),
+    },
+  },
+}));
+
+const state = new MockUseState(hooks);
+
+let hook;
+
+describe('VideoEditorHooks', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+  describe('state hooks', () => {
+    state.testGetter(state.keys.durationErrors);
+    state.testGetter(state.keys.handoutErrors);
+    state.testGetter(state.keys.licenseErrors);
+    state.testGetter(state.keys.thumbnailErrors);
+    state.testGetter(state.keys.transcriptsErrors);
+    state.testGetter(state.keys.videoSourceErrors);
+  });
+
+  describe('errors hook', () => {
+    beforeEach(() => {
+      state.mock();
+    });
+    afterEach(() => {
+      state.restore();
+    });
+
+    const fakeDurationError = {
+      field1: 'field1msg',
+      field2: 'field2msg',
+    };
+    test('error: state values', () => {
+      expect(hooks.errorsHook().error.duration).toEqual([
+        state.stateVals[state.keys.durationErrors],
+        state.setState[state.keys.durationErrors],
+      ]);
+      expect(hooks.errorsHook().error.handout).toEqual([
+        state.stateVals[state.keys.handoutErrors],
+        state.setState[state.keys.handoutErrors],
+      ]);
+      expect(hooks.errorsHook().error.license).toEqual([
+        state.stateVals[state.keys.licenseErrors],
+        state.setState[state.keys.licenseErrors],
+      ]);
+      expect(hooks.errorsHook().error.thumbnail).toEqual([
+        state.stateVals[state.keys.thumbnailErrors],
+        state.setState[state.keys.thumbnailErrors],
+      ]);
+      expect(hooks.errorsHook().error.transcripts).toEqual([
+        state.stateVals[state.keys.transcriptsErrors],
+        state.setState[state.keys.transcriptsErrors],
+      ]);
+      expect(hooks.errorsHook().error.videoSource).toEqual([
+        state.stateVals[state.keys.videoSourceErrors],
+        state.setState[state.keys.videoSourceErrors],
+      ]);
+    });
+    describe('validateEntry', () => {
+      test('validateEntry: returns true if all validation calls are true', () => {
+        hook = hooks.errorsHook();
+        expect(hook.validateEntry()).toEqual(true);
+      });
+      test('validateEntry: returns false if any validation calls are false', () => {
+        state.mockVal(state.keys.durationErrors, fakeDurationError);
+        hook = hooks.errorsHook();
+        expect(hook.validateEntry()).toEqual(false);
+      });
+    });
+  });
+  describe('fetchVideoContent', () => {
+    it('equals dispatch(thunkActions.video.saveVideoData())', () => {
+      hook = hooks.fetchVideoContent()({ dispatch: mockDispatchFn });
+      expect(hook).toEqual(mockDispatchFn(thunkActions.video.saveVideoData()));
+    });
+  });
+});
diff --git a/src/editors/containers/VideoEditor/hooks.ts b/src/editors/containers/VideoEditor/hooks.ts
new file mode 100644
index 0000000000..511342e0c4
--- /dev/null
+++ b/src/editors/containers/VideoEditor/hooks.ts
@@ -0,0 +1,69 @@
+import { useState, createContext } from 'react';
+import { thunkActions } from '../../data/redux';
+
+import { StrictDict } from '../../utils';
+
+type ErrRecord = Record<string, string>;
+type ErrCategory = [errors: ErrRecord, setter: (newErrors: ErrRecord) => void];
+interface ErrorContextData {
+  duration: ErrCategory;
+  handout: ErrCategory;
+  license: ErrCategory;
+  thumbnail: ErrCategory;
+  transcripts: ErrCategory;
+  videoSource: ErrCategory;
+}
+
+/* istanbul ignore next */
+export const ErrorContext = createContext<ErrorContextData>({
+  duration: [{}, () => {}],
+  handout: [{}, () => {}],
+  license: [{}, () => {}],
+  thumbnail: [{}, () => {}],
+  transcripts: [{}, () => {}],
+  videoSource: [{}, () => {}],
+});
+
+export const state = StrictDict({
+  /* eslint-disable react-hooks/rules-of-hooks */
+  durationErrors: (val) => useState(val),
+  handoutErrors: (val) => useState(val),
+  licenseErrors: (val) => useState(val),
+  thumbnailErrors: (val) => useState(val),
+  transcriptsErrors: (val) => useState(val),
+  videoSourceErrors: (val) => useState(val),
+  /* eslint-enable react-hooks/rules-of-hooks */
+});
+
+export const errorsHook = (): { error: ErrorContextData, validateEntry: () => boolean } => {
+  const [durationErrors, setDurationErrors] = state.durationErrors({});
+  const [handoutErrors, setHandoutErrors] = state.handoutErrors({});
+  const [licenseErrors, setLicenseErrors] = state.licenseErrors({});
+  const [thumbnailErrors, setThumbnailErrors] = state.thumbnailErrors({});
+  const [transcriptsErrors, setTranscriptsErrors] = state.transcriptsErrors({});
+  const [videoSourceErrors, setVideoSourceErrors] = state.videoSourceErrors({});
+
+  return {
+    error: {
+      duration: [durationErrors, setDurationErrors],
+      handout: [handoutErrors, setHandoutErrors],
+      license: [licenseErrors, setLicenseErrors],
+      thumbnail: [thumbnailErrors, setThumbnailErrors],
+      transcripts: [transcriptsErrors, setTranscriptsErrors],
+      videoSource: [videoSourceErrors, setVideoSourceErrors],
+    },
+    validateEntry: () => {
+      if (Object.keys(durationErrors).length > 0) { return false; }
+      if (Object.keys(handoutErrors).length > 0) { return false; }
+      if (Object.keys(licenseErrors).length > 0) { return false; }
+      if (Object.keys(thumbnailErrors).length > 0) { return false; }
+      if (Object.keys(transcriptsErrors).length > 0) { return false; }
+      if (Object.keys(videoSourceErrors).length > 0) { return false; }
+      return true;
+    },
+  };
+};
+
+export const fetchVideoContent = () => ({ dispatch }) => (
+  dispatch(thunkActions.video.saveVideoData())
+);
diff --git a/src/editors/containers/VideoEditor/index.test.tsx b/src/editors/containers/VideoEditor/index.test.tsx
new file mode 100644
index 0000000000..eed2a5fd27
--- /dev/null
+++ b/src/editors/containers/VideoEditor/index.test.tsx
@@ -0,0 +1,49 @@
+import 'CourseAuthoring/editors/setupEditorTest';
+import { shallow } from '@edx/react-unit-test-utils';
+
+import { formatMessage } from '../../testUtils';
+import VideoEditor from '.';
+
+jest.mock('../EditorContainer', () => 'EditorContainer');
+jest.mock('./components/VideoEditorModal', () => 'VideoEditorModal');
+
+jest.mock('./hooks', () => ({
+  ErrorContext: {
+    Provider: 'ErrorContext.Provider',
+  },
+  errorsHook: jest.fn(() => ({
+    error: 'hooks.errorsHook.error',
+    validateEntry: jest.fn().mockName('validateEntry'),
+  })),
+  fetchVideoContent: jest.fn().mockName('fetchVideoContent'),
+}));
+
+jest.mock('../../data/redux', () => ({
+  selectors: {
+    requests: {
+      isFinished: jest.fn((state, params) => ({ isFailed: { state, params } })),
+    },
+    app: {
+      isLibrary: jest.fn(state => ({ isLibrary: state })),
+    },
+  },
+}));
+
+jest.mock('@openedx/paragon', () => ({
+  ...jest.requireActual('@openedx/paragon'),
+  Spinner: 'Spinner',
+}));
+
+describe('VideoEditor', () => {
+  const props = {
+    onClose: jest.fn().mockName('props.onClose'),
+    intl: { formatMessage },
+    studioViewFinished: false,
+    isLibrary: false,
+  };
+  describe('snapshots', () => {
+    test('renders as expected with default behavior', () => {
+      expect(shallow(<VideoEditor {...props} />).snapshot).toMatchSnapshot();
+    });
+  });
+});
diff --git a/src/editors/containers/VideoEditor/index.tsx b/src/editors/containers/VideoEditor/index.tsx
new file mode 100644
index 0000000000..f2ad7c670f
--- /dev/null
+++ b/src/editors/containers/VideoEditor/index.tsx
@@ -0,0 +1,63 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import {
+  Spinner,
+} from '@openedx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import { selectors } from '../../data/redux';
+import { RequestKeys } from '../../data/constants/requests';
+
+import { EditorComponent } from '../../EditorComponent';
+import EditorContainer from '../EditorContainer';
+import VideoEditorModal from './components/VideoEditorModal';
+import { ErrorContext, errorsHook, fetchVideoContent } from './hooks';
+import messages from './messages';
+
+const VideoEditor: React.FC<EditorComponent> = ({
+  onClose,
+  returnFunction,
+}) => {
+  const intl = useIntl();
+  const studioViewFinished = useSelector(
+    (state) => selectors.requests.isFinished(state, { requestKey: RequestKeys.fetchStudioView }),
+  );
+  const isLibrary = useSelector(selectors.app.isLibrary) as boolean;
+  const {
+    error,
+    validateEntry,
+  } = errorsHook();
+  return (
+    <ErrorContext.Provider value={error}>
+      <EditorContainer
+        getContent={fetchVideoContent()}
+        isDirty={/* istanbul ignore next */ () => true}
+        onClose={onClose}
+        returnFunction={returnFunction}
+        validateEntry={validateEntry}
+      >
+        {studioViewFinished ? (
+          <div className="video-editor">
+            <VideoEditorModal {...{ isLibrary }} />
+          </div>
+        ) : (
+          <div style={{
+            position: 'absolute',
+            left: '50%',
+            top: '50%',
+            transform: 'translate(-50%, -50%)',
+          }}
+          >
+            <Spinner
+              animation="border"
+              className="m-3"
+              screenreadertext={intl.formatMessage(messages.spinnerScreenReaderText)}
+            />
+          </div>
+        )}
+      </EditorContainer>
+    </ErrorContext.Provider>
+  );
+};
+
+export default VideoEditor;
diff --git a/src/editors/containers/VideoEditor/messages.ts b/src/editors/containers/VideoEditor/messages.ts
new file mode 100644
index 0000000000..c041f69e35
--- /dev/null
+++ b/src/editors/containers/VideoEditor/messages.ts
@@ -0,0 +1,16 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  spinnerScreenReaderText: {
+    id: 'authoring.videoEditor.spinnerScreenReaderText',
+    defaultMessage: 'loading',
+    description: 'Loading message for spinner screenreader text.',
+  },
+  replaceVideoButtonLabel: {
+    id: 'authoring.videoEditor.replaceVideoButtonLabel',
+    defaultMessage: 'Replace video',
+    description: 'Text of the replace video button to return to the video gallery',
+  },
+});
+
+export default messages;
diff --git a/src/editors/containers/VideoGallery/hooks.js b/src/editors/containers/VideoGallery/hooks.js
new file mode 100644
index 0000000000..648db7a641
--- /dev/null
+++ b/src/editors/containers/VideoGallery/hooks.js
@@ -0,0 +1,216 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+// This 'module' self-import hack enables mocking during tests.
+// See src/editors/decisions/0005-internal-editor-testability-decisions.md. The whole approach to how hooks are tested
+// should be re-thought and cleaned up to avoid this pattern.
+// eslint-disable-next-line import/no-self-import
+import * as module from './hooks';
+import messages from './messages';
+import * as appHooks from '../../hooks';
+import { selectors } from '../../data/redux';
+import analyticsEvt from '../../data/constants/analyticsEvt';
+import {
+  filterKeys, filterMessages, sortFunctions, sortKeys, sortMessages,
+} from './utils';
+
+export const {
+  navigateCallback,
+  navigateTo,
+} = appHooks;
+
+export const useSearchAndSortProps = () => {
+  const [searchString, setSearchString] = React.useState('');
+  const [sortBy, setSortBy] = React.useState(sortKeys.dateNewest);
+  const [filterBy, setFilterBy] = React.useState(filterKeys.anyStatus);
+  const [hideSelectedVideos, setHideSelectedVideos] = React.useState(false);
+
+  return {
+    searchString,
+    onSearchChange: (e) => setSearchString(e.target.value),
+    clearSearchString: () => setSearchString(''),
+    sortBy,
+    onSortClick: (key) => () => setSortBy(key),
+    sortKeys,
+    sortMessages,
+    filterBy,
+    onFilterClick: (key) => () => setFilterBy(key),
+    filterKeys,
+    filterMessages,
+    showSwitch: false,
+    hideSelectedVideos,
+    switchMessage: messages.hideSelectedCourseVideosSwitchLabel,
+    onSwitchClick: () => setHideSelectedVideos(!hideSelectedVideos),
+  };
+};
+
+export const filterListBySearch = ({
+  searchString,
+  videoList,
+}) => (
+  videoList.filter(({ displayName }) => displayName.toLowerCase()
+    .includes(searchString.toLowerCase()))
+);
+
+export const filterListByStatus = ({ statusFilter, videoList }) => {
+  if (statusFilter === filterKeys.anyStatus) {
+    return videoList;
+  }
+  return videoList.filter(({ status }) => filterKeys[statusFilter] === status);
+};
+
+export const filterListByHideSelectedCourse = ({ videoList }) => (
+  // TODO Missing to implement this
+  videoList
+);
+
+export const filterList = ({
+  sortBy,
+  filterBy,
+  searchString,
+  videos,
+}) => {
+  let filteredList = module.filterListBySearch({
+    searchString,
+    videoList: videos,
+  });
+  filteredList = module.filterListByStatus({
+    statusFilter: filterBy,
+    videoList: filteredList,
+  });
+  filteredList = module.filterListByHideSelectedCourse({
+    videoList: filteredList,
+  });
+  return filteredList.sort(sortFunctions[sortBy in sortKeys ? sortKeys[sortBy] : sortKeys.dateNewest]);
+};
+
+export const useVideoListProps = ({
+  searchSortProps,
+  videos,
+}) => {
+  const [highlighted, setHighlighted] = React.useState(null);
+  const [
+    showSelectVideoError,
+    setShowSelectVideoError,
+  ] = React.useState(false);
+  const [
+    showSizeError,
+    setShowSizeError,
+  ] = React.useState(false);
+  const filteredList = module.filterList({
+    ...searchSortProps,
+    videos,
+  });
+  const learningContextId = useSelector(selectors.app.learningContextId);
+  const blockId = useSelector(selectors.app.blockId);
+  return {
+    galleryError: {
+      show: showSelectVideoError,
+      set: () => setShowSelectVideoError(true),
+      dismiss: () => setShowSelectVideoError(false),
+      message: messages.selectVideoError,
+    },
+    // TODO We need to update this message when implementing the video upload screen
+    inputError: {
+      show: showSizeError,
+      set: () => setShowSizeError(true),
+      dismiss: () => setShowSelectVideoError(false),
+      message: messages.fileSizeError,
+    },
+    galleryProps: {
+      galleryIsEmpty: Object.keys(filteredList).length === 0,
+      searchIsEmpty: filteredList.length === 0,
+      displayList: filteredList,
+      highlighted,
+      onHighlightChange: (e) => setHighlighted(e.target.value),
+      emptyGalleryLabel: messages.emptyGalleryLabel,
+      showIdsOnCards: true,
+      height: '100%',
+    },
+    selectBtnProps: {
+      onClick: () => {
+        if (highlighted) {
+          navigateTo(`/course/${learningContextId}/editor/video/${blockId}?selectedVideoId=${highlighted}`);
+        } else {
+          setShowSelectVideoError(true);
+        }
+      },
+    },
+  };
+};
+
+export const useVideoUploadHandler = ({ replace }) => {
+  const learningContextId = useSelector(selectors.app.learningContextId);
+  const blockId = useSelector(selectors.app.blockId);
+  const path = `/course/${learningContextId}/editor/video_upload/${blockId}`;
+  if (replace) {
+    return () => window.location.replace(path);
+  }
+  return () => navigateTo(path);
+};
+
+export const useCancelHandler = () => (
+  navigateCallback({
+    destination: useSelector(selectors.app.returnUrl),
+    analytics: useSelector(selectors.app.analytics),
+    analyticsEvent: analyticsEvt.videoGalleryCancelClick,
+  })
+);
+
+export const buildVideos = ({ rawVideos }) => {
+  let videos = [];
+  const rawVideoList = Object.values(rawVideos);
+  if (rawVideoList.length > 0) {
+    videos = rawVideoList.map(video => ({
+      id: video.edx_video_id,
+      displayName: video.client_video_id,
+      externalUrl: video.course_video_image_url,
+      dateAdded: new Date(video.created),
+      locked: false,
+      thumbnail: video.course_video_image_url,
+      status: video.status_nontranslated,
+      statusBadgeVariant: module.getstatusBadgeVariant({ status: video.status_nontranslated }),
+      statusMessage: module.getStatusMessage({ status: video.status_nontranslated }),
+      duration: video.duration,
+      transcripts: video.transcripts,
+    }));
+  }
+  return videos;
+};
+
+export const getstatusBadgeVariant = ({ status }) => {
+  switch (status) {
+    case filterKeys.failed:
+      return 'danger';
+    case filterKeys.uploading:
+    case filterKeys.processing:
+      return 'light';
+    default:
+      return null;
+  }
+};
+
+export const getStatusMessage = ({ status }) => Object.values(filterMessages).find((m) => m.defaultMessage === status);
+
+export const useVideoProps = ({ videos }) => {
+  const searchSortProps = useSearchAndSortProps();
+  const videoList = useVideoListProps({
+    searchSortProps,
+    videos,
+  });
+  const {
+    galleryError,
+    galleryProps,
+    inputError,
+    selectBtnProps,
+  } = videoList;
+  const fileInput = { click: useVideoUploadHandler({ replace: false }) };
+
+  return {
+    galleryError,
+    inputError,
+    fileInput,
+    galleryProps,
+    searchSortProps,
+    selectBtnProps,
+  };
+};
diff --git a/src/editors/containers/VideoGallery/index.jsx b/src/editors/containers/VideoGallery/index.jsx
new file mode 100644
index 0000000000..5f5a8a8ca8
--- /dev/null
+++ b/src/editors/containers/VideoGallery/index.jsx
@@ -0,0 +1,88 @@
+import React, { useEffect } from 'react';
+import { Image } from '@openedx/paragon';
+import { useSelector } from 'react-redux';
+import { selectors } from '../../data/redux';
+import * as hooks from './hooks';
+import SelectionModal from '../../sharedComponents/SelectionModal';
+import { acceptedImgKeys } from './utils';
+import messages from './messages';
+import { RequestKeys } from '../../data/constants/requests';
+import videoThumbnail from '../../data/images/videoThumbnail.svg';
+
+const VideoGallery = () => {
+  const rawVideos = useSelector(selectors.app.videos);
+  const isLoaded = useSelector(
+    (state) => selectors.requests.isFinished(state, { requestKey: RequestKeys.fetchVideos }),
+  );
+  const isFetchError = useSelector(
+    (state) => selectors.requests.isFailed(state, { requestKey: RequestKeys.fetchVideos }),
+  );
+  const isUploadError = useSelector(
+    (state) => selectors.requests.isFailed(state, { requestKey: RequestKeys.uploadVideo }),
+  );
+  const videos = hooks.buildVideos({ rawVideos });
+  const handleVideoUpload = hooks.useVideoUploadHandler({ replace: true });
+
+  useEffect(() => {
+    // If no videos exists redirects to the video upload screen
+    if (isLoaded && videos.length === 0) {
+      handleVideoUpload();
+    }
+  }, [isLoaded]);
+  const {
+    galleryError,
+    inputError,
+    fileInput,
+    galleryProps,
+    searchSortProps,
+    selectBtnProps,
+  } = hooks.useVideoProps({ videos });
+  const handleCancel = hooks.useCancelHandler();
+
+  const modalMessages = {
+    confirmMsg: messages.selectVideoButtonlabel,
+    titleMsg: messages.titleLabel,
+    uploadButtonMsg: messages.uploadButtonLabel,
+    fetchError: messages.fetchVideosError,
+    uploadError: messages.uploadVideoError,
+  };
+
+  const thumbnailFallback = (
+    <Image
+      thumbnail
+      className="px-6 py-4.5 h-100"
+      src={videoThumbnail}
+    />
+  );
+
+  return (
+    <div style={isLoaded ? { backgroundColor: '#E9E6E4' } : {}}>
+      <SelectionModal
+        {...{
+          isOpen: true,
+          close: handleCancel,
+          size: 'fullscreen',
+          isFullscreenScroll: false,
+          galleryError,
+          inputError,
+          fileInput,
+          galleryProps: {
+            ...galleryProps,
+            thumbnailFallback,
+          },
+          searchSortProps,
+          selectBtnProps,
+          acceptedFiles: acceptedImgKeys,
+          modalMessages,
+          isLoaded,
+          isUploadError,
+          isFetchError,
+        }}
+      />
+    </div>
+  );
+};
+
+VideoGallery.propTypes = {};
+
+export default VideoGallery;
diff --git a/src/editors/containers/VideoGallery/index.test.jsx b/src/editors/containers/VideoGallery/index.test.jsx
new file mode 100644
index 0000000000..79771c90d8
--- /dev/null
+++ b/src/editors/containers/VideoGallery/index.test.jsx
@@ -0,0 +1,195 @@
+import { initializeMockApp } from '@edx/frontend-platform';
+import { AppProvider } from '@edx/frontend-platform/react';
+import { configureStore } from '@reduxjs/toolkit';
+import '@testing-library/jest-dom/extend-expect';
+import React from 'react';
+import {
+  act, fireEvent, render, screen,
+} from '@testing-library/react';
+
+import VideoGallery from './index';
+
+jest.unmock('react-redux');
+jest.unmock('@edx/frontend-platform/i18n');
+jest.unmock('@openedx/paragon');
+jest.unmock('@openedx/paragon/icons');
+
+let store;
+const initialVideos = [
+  {
+    edx_video_id: 'id_1',
+    client_video_id: 'client_id_1',
+    course_video_image_url: 'course_video_image_url_1',
+    created: '2022-09-07T04:56:58.726Z',
+    status: 'Uploading',
+    status_nontranslated: 'Uploading',
+    duration: 3,
+    transcripts: [],
+  },
+  {
+    edx_video_id: 'id_2',
+    client_video_id: 'client_id_2',
+    course_video_image_url: 'course_video_image_url_2',
+    created: '2022-11-07T04:56:58.726Z',
+    status: 'In Progress',
+    status_nontranslated: 'In Progress',
+    duration: 2,
+    transcripts: [],
+  }, {
+    edx_video_id: 'id_3',
+    client_video_id: 'client_id_3',
+    course_video_image_url: 'course_video_image_url_3',
+    created: '2022-01-07T04:56:58.726Z',
+    status: 'Ready',
+    status_nontranslated: 'Ready',
+    duration: 4,
+    transcripts: [],
+  },
+];
+
+// We are not using any style-based assertions and this function is very slow with jest-dom
+window.getComputedStyle = () => ({
+  getPropertyValue: () => undefined,
+});
+
+describe('VideoGallery', () => {
+  describe('component', () => {
+    let oldLocation;
+    beforeEach(async () => {
+      store = configureStore({
+        reducer: (state, action) => ((action && action.newState) ? action.newState : state),
+        preloadedState: {
+          app: {
+            videos: initialVideos,
+            learningContextId: 'course-v1:test+test+test',
+            blockId: 'some-block-id',
+          },
+          requests: {
+            fetchVideos: { status: 'completed' },
+            uploadVideo: { status: 'inactive' },
+          },
+        },
+      });
+
+      initializeMockApp({
+        authenticatedUser: {
+          userId: 3,
+          username: 'test-user',
+          administrator: true,
+          roles: [],
+        },
+      });
+    });
+    beforeAll(() => {
+      oldLocation = window.location;
+      delete window.location;
+      window.location = { replace: jest.fn() };
+    });
+    afterAll(() => {
+      window.location = oldLocation;
+    });
+
+    function updateState({ videos = initialVideos, fetchVideos = 'completed', uploadVideos = 'inactive' }) {
+      store.dispatch({
+        type: '',
+        newState: {
+          app: {
+            videos,
+            learningContextId: 'course-v1:test+test+test',
+            blockId: 'some-block-id',
+          },
+          requests: {
+            fetchVideos: { status: fetchVideos },
+            uploadVideo: { status: uploadVideos },
+          },
+        },
+      });
+    }
+
+    async function renderComponent() {
+      return render(
+        <AppProvider store={store}>
+          <VideoGallery />
+        </AppProvider>,
+      );
+    }
+
+    it('displays a list of videos', async () => {
+      await renderComponent();
+      initialVideos.forEach(video => (
+        expect(screen.getByText(video.client_video_id)).toBeInTheDocument()
+      ));
+    });
+    it('navigates to video upload page when there are no videos', async () => {
+      expect(window.location.replace).not.toHaveBeenCalled();
+      updateState({ videos: [] });
+      await renderComponent();
+      expect(window.location.replace).toHaveBeenCalled();
+    });
+    it.each([
+      [/newest/i, [2, 1, 3]],
+      [/oldest/i, [3, 1, 2]],
+      [/name A-Z/i, [1, 2, 3]],
+      [/name Z-A/i, [3, 2, 1]],
+      [/longest/i, [3, 1, 2]],
+      [/shortest/i, [2, 1, 3]],
+    ])('videos can be sorted %s', async (sortBy, order) => {
+      await renderComponent();
+
+      fireEvent.click(screen.getByRole('button', {
+        name: /By newest/i,
+      }));
+      fireEvent.click(screen.getByRole('link', {
+        name: sortBy,
+      }));
+      const videoElements = screen.getAllByRole('button', { name: /client_id/ });
+      order.forEach((clientIdSuffix, idx) => {
+        expect(videoElements[idx]).toHaveTextContent(`client_id_${clientIdSuffix}`);
+      });
+    });
+    it.each([
+      ['Uploading', 1, [1]],
+      ['In Progress', 1, [2]],
+      ['Ready', 1, [3]],
+      ['Failed', 1, [4]],
+    ])('videos can be filtered by status %s', async (filterBy, length, items) => {
+      await renderComponent();
+      updateState({
+        videos: [...initialVideos, {
+          edx_video_id: 'id_4',
+          client_video_id: 'client_id_4',
+          course_video_image_url: 'course_video_image_url_4',
+          created: '2022-01-07T04:56:58.726Z',
+          status: 'Failed',
+          status_nontranslated: 'Failed',
+          duration: 4,
+          transcripts: [],
+        }],
+      });
+
+      act(() => {
+        fireEvent.click(screen.getByTestId('dropdown-filter'));
+      });
+
+      act(() => {
+        fireEvent.click(screen.getByRole('button', {
+          name: filterBy,
+        }));
+      });
+
+      const videoElements = await screen.findAllByRole('button', { name: /client_id/ });
+      expect(videoElements).toHaveLength(length);
+      items.forEach(clientIdx => (
+        expect(screen.getByText(`client_id_${clientIdx}`)).toBeInTheDocument()
+      ));
+    });
+
+    it('filters videos by search string', async () => {
+      await renderComponent();
+      fireEvent.change(screen.getByRole('textbox'), { target: { value: 'CLIENT_ID_2' } });
+      expect(screen.queryByText('client_id_2')).toBeInTheDocument();
+      expect(screen.queryByText('client_id_1')).not.toBeInTheDocument();
+      expect(screen.queryByText('client_id_3')).not.toBeInTheDocument();
+    });
+  });
+});
diff --git a/src/editors/containers/VideoGallery/messages.js b/src/editors/containers/VideoGallery/messages.js
new file mode 100644
index 0000000000..e26dd63db3
--- /dev/null
+++ b/src/editors/containers/VideoGallery/messages.js
@@ -0,0 +1,117 @@
+const messages = {
+  // Gallery
+  emptyGalleryLabel: {
+    id: 'authoring.selectvideomodal.emptyGalleryLabel',
+    defaultMessage:
+      'No results found.',
+    description: 'Label for when video gallery is empty.',
+  },
+  selectVideoButtonlabel: {
+    id: 'authoring.selectvideomodal.selectvideo.label',
+    defaultMessage: 'Select video',
+    description: 'Label for Select video button',
+  },
+  titleLabel: {
+    id: 'authoring.selectvideomodal.title.label',
+    defaultMessage: 'Add video to your course',
+    description: 'Title for the select video modal',
+  },
+  uploadButtonLabel: {
+    id: 'authoring.selectvideomodal.upload.label',
+    defaultMessage: 'Upload or embed a new video',
+    description: 'Label for upload button',
+  },
+
+  // Sort Dropdown
+  sortByDateNewest: {
+    id: 'authoring.selectvideomodal.sort.datenewest.label',
+    defaultMessage: 'newest',
+    description: 'Dropdown label for sorting by date (newest)',
+  },
+  sortByDateOldest: {
+    id: 'authoring.selectvideomodal.sort.dateoldest.label',
+    defaultMessage: 'oldest',
+    description: 'Dropdown label for sorting by date (oldest)',
+  },
+  sortByNameAscending: {
+    id: 'authoring.selectvideomodal.sort.nameascending.label',
+    defaultMessage: 'name A-Z',
+    description: 'Dropdown label for sorting by name (ascending)',
+  },
+  sortByNameDescending: {
+    id: 'authoring.selectvideomodal.sort.namedescending.label',
+    defaultMessage: 'name Z-A',
+    description: 'Dropdown label for sorting by name (descending)',
+  },
+  sortByDurationShortest: {
+    id: 'authoring.selectvideomodal.sort.durationshortest.label',
+    defaultMessage: 'shortest',
+    description: 'Dropdown label for sorting by duration (shortest)',
+  },
+  sortByDurationLongest: {
+    id: 'authoring.selectvideomodal.sort.durationlongest.label',
+    defaultMessage: 'longest',
+    description: 'Dropdown label for sorting by duration (longest)',
+  },
+
+  // Video status labels
+  videoStatusAny: {
+    id: 'authoring.selectvideomodal.videostatusnone.label',
+    defaultMessage: 'Any status',
+    description: 'Label for video status (any status)',
+  },
+  videoStatusUploading: {
+    id: 'authoring.selectvideomodal.videostatusuploading.label',
+    defaultMessage: 'Uploading',
+    description: 'Label for video status (uploading)',
+  },
+  videoStatusProcessing: {
+    id: 'authoring.selectvideomodal.videostatusprocessing.label',
+    defaultMessage: 'In Progress',
+    description: 'Label for video status (processing)',
+  },
+  videoStatusReady: {
+    id: 'authoring.selectvideomodal.videostatusready.label',
+    defaultMessage: 'Ready',
+    description: 'Label for video status (ready)',
+  },
+  videoStatusFailed: {
+    id: 'authoring.selectvideomodal.videostatusfailed.label',
+    defaultMessage: 'Failed',
+    description: 'Label for video status (failed)',
+  },
+
+  // Hide switch
+  hideSelectedCourseVideosSwitchLabel: {
+    id: 'authoring.selectvideomodal.switch.hideselectedcoursevideos.label',
+    defaultMessage: 'Hide selected course videos',
+    description: 'Switch label for hide selected course videos',
+  },
+
+  // Errors
+  selectVideoError: {
+    id: 'authoring.selectvideomodal.error.selectVideoError',
+    defaultMessage: 'Select a video to continue.',
+    description:
+      'Message presented to user when clicking Next without selecting a video',
+  },
+  fileSizeError: {
+    id: 'authoring.selectvideomodal.error.fileSizeError',
+    defaultMessage:
+      'Video must be 10 MB or less. Please resize image and try again.',
+    description:
+      'Message presented to user when file size of video is larger than 10 MB',
+  },
+  uploadVideoError: {
+    id: 'authoring.selectvideomodal.error.uploadVideoError',
+    defaultMessage: 'Failed to upload video. Please try again.',
+    description: 'Message presented to user when video fails to upload',
+  },
+  fetchVideosError: {
+    id: 'authoring.selectvideomodal.error.fetchVideosError',
+    defaultMessage: 'Failed to obtain course videos. Please try again.',
+    description: 'Message presented to user when videos are not found',
+  },
+};
+
+export default messages;
diff --git a/src/editors/containers/VideoGallery/utils.js b/src/editors/containers/VideoGallery/utils.js
new file mode 100644
index 0000000000..1b4767b417
--- /dev/null
+++ b/src/editors/containers/VideoGallery/utils.js
@@ -0,0 +1,63 @@
+import { StrictDict, keyStore } from '../../utils';
+import messages from './messages';
+
+const messageKeys = keyStore(messages);
+
+export const sortKeys = StrictDict({
+  dateNewest: 'dateNewest',
+  dateOldest: 'dateOldest',
+  nameAscending: 'nameAscending',
+  nameDescending: 'nameDescending',
+  durationShortest: 'durationShortest',
+  durationLongest: 'durationLongest',
+});
+
+export const sortMessages = StrictDict({
+  dateNewest: messages[messageKeys.sortByDateNewest],
+  dateOldest: messages[messageKeys.sortByDateOldest],
+  nameAscending: messages[messageKeys.sortByNameAscending],
+  nameDescending: messages[messageKeys.sortByNameDescending],
+  durationShortest: messages[messageKeys.sortByDurationShortest],
+  durationLongest: messages[messageKeys.sortByDurationLongest],
+});
+
+export const filterKeys = StrictDict({
+  anyStatus: 'anyStatus',
+  uploading: 'Uploading',
+  processing: 'In Progress',
+  ready: 'Ready',
+  failed: 'Failed',
+});
+
+export const filterMessages = StrictDict({
+  anyStatus: messages[messageKeys.videoStatusAny],
+  uploading: messages[messageKeys.videoStatusUploading],
+  processing: messages[messageKeys.videoStatusProcessing],
+  ready: messages[messageKeys.videoStatusReady],
+  failed: messages[messageKeys.videoStatusFailed],
+});
+
+export const sortFunctions = StrictDict({
+  dateNewest: (a, b) => b.dateAdded - a.dateAdded,
+  dateOldest: (a, b) => a.dateAdded - b.dateAdded,
+  nameAscending: (a, b) => {
+    const nameA = a.displayName.toLowerCase();
+    const nameB = b.displayName.toLowerCase();
+    if (nameA < nameB) { return -1; }
+    if (nameB < nameA) { return 1; }
+    return b.dateAdded - a.dateAdded;
+  },
+  nameDescending: (a, b) => {
+    const nameA = a.displayName.toLowerCase();
+    const nameB = b.displayName.toLowerCase();
+    if (nameA < nameB) { return 1; }
+    if (nameB < nameA) { return -1; }
+    return b.dateAdded - a.dateAdded;
+  },
+  durationShortest: (a, b) => a.duration - b.duration,
+  durationLongest: (a, b) => b.duration - a.duration,
+});
+
+export const acceptedImgKeys = StrictDict({
+  mp4: '.mp4',
+});
diff --git a/src/editors/containers/VideoGallery/utils.test.js b/src/editors/containers/VideoGallery/utils.test.js
new file mode 100644
index 0000000000..ef9818833f
--- /dev/null
+++ b/src/editors/containers/VideoGallery/utils.test.js
@@ -0,0 +1,62 @@
+import { sortFunctions } from './utils';
+
+describe('VideGallery utils', () => {
+  describe('sortFunctions', () => {
+    const dateA = {
+      dateAdded: new Date('2023-03-30'),
+    };
+    const dateB = {
+      dateAdded: new Date('2023-03-31'),
+    };
+    const nameA = {
+      displayName: 'This is the Name A',
+      dateAdded: new Date('2023-03-30'),
+    };
+    const nameB = {
+      displayName: 'Hello World',
+      dateAdded: new Date('2023-03-30'),
+    };
+    const nameC = {
+      displayName: 'Hello World',
+      dateAdded: new Date('2023-03-31'),
+    };
+    const durationA = {
+      duration: 10,
+    };
+    const durationB = {
+      duration: 100,
+    };
+    test('correct functionality of dateNewest', () => {
+      expect(sortFunctions.dateNewest(dateA, dateB)).toBeGreaterThan(0);
+      expect(sortFunctions.dateNewest(dateB, dateA)).toBeLessThan(0);
+      expect(sortFunctions.dateNewest(dateA, dateA)).toEqual(0);
+    });
+    test('correct functionality of dateOldest', () => {
+      expect(sortFunctions.dateOldest(dateA, dateB)).toBeLessThan(0);
+      expect(sortFunctions.dateOldest(dateB, dateA)).toBeGreaterThan(0);
+      expect(sortFunctions.dateOldest(dateA, dateA)).toEqual(0);
+    });
+    test('correct functionality of nameAscending', () => {
+      expect(sortFunctions.nameAscending(nameA, nameB)).toEqual(1);
+      expect(sortFunctions.nameAscending(nameB, nameA)).toEqual(-1);
+      expect(sortFunctions.nameAscending(nameA, nameA)).toEqual(0);
+      expect(sortFunctions.nameAscending(nameB, nameC)).toBeGreaterThan(0);
+    });
+    test('correct functionality of nameDescending', () => {
+      expect(sortFunctions.nameDescending(nameA, nameB)).toEqual(-1);
+      expect(sortFunctions.nameDescending(nameB, nameA)).toEqual(1);
+      expect(sortFunctions.nameDescending(nameA, nameA)).toEqual(0);
+      expect(sortFunctions.nameDescending(nameB, nameC)).toBeGreaterThan(0);
+    });
+    test('correct functionality of durationShortest', () => {
+      expect(sortFunctions.durationShortest(durationA, durationB)).toBeLessThan(0);
+      expect(sortFunctions.durationShortest(durationB, durationA)).toBeGreaterThan(0);
+      expect(sortFunctions.durationShortest(durationA, durationA)).toEqual(0);
+    });
+    test('correct functionality of durationLongest', () => {
+      expect(sortFunctions.durationLongest(durationA, durationB)).toBeGreaterThan(0);
+      expect(sortFunctions.durationLongest(durationB, durationA)).toBeLessThan(0);
+      expect(sortFunctions.durationLongest(durationA, durationA)).toEqual(0);
+    });
+  });
+});
diff --git a/src/editors/containers/VideoUploadEditor/VideoUploader.jsx b/src/editors/containers/VideoUploadEditor/VideoUploader.jsx
new file mode 100644
index 0000000000..028d1c085a
--- /dev/null
+++ b/src/editors/containers/VideoUploadEditor/VideoUploader.jsx
@@ -0,0 +1,98 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import {
+  Icon, IconButton, Dropzone, InputGroup, FormControl,
+} from '@openedx/paragon';
+import { ArrowForward, FileUpload, Close } from '@openedx/paragon/icons';
+import { useDispatch } from 'react-redux';
+import { thunkActions } from '../../data/redux';
+import * as hooks from './hooks';
+import messages from './messages';
+
+const URLUploader = () => {
+  const [textInputValue, setTextInputValue] = React.useState('');
+  const onURLUpload = hooks.onVideoUpload('selectedVideoUrl');
+  const intl = useIntl();
+  return (
+    <div className="d-flex flex-column">
+      <div className="justify-content-center align-self-center rounded-circle bg-light-300 p-2.5">
+        <Icon src={FileUpload} className="text-muted" style={{ height: '2rem', width: '2rem' }} />
+      </div>
+      <div className="d-flex align-self-center justify-content-center flex-wrap flex-column pt-3">
+        <span>{intl.formatMessage(messages.dropVideoFileHere)}</span>
+        <span className="x-small align-self-center pt-2">{intl.formatMessage(messages.info)}</span>
+      </div>
+      <div className="small align-self-center justify-content-center mx-2 text-dark font-weight-normal pt-3">
+        OR
+      </div>
+      <div className="zindex-9 video-id-prompt py-3">
+        <InputGroup>
+          <FormControl
+            className="m-0"
+            placeholder={intl.formatMessage(messages.pasteURL)}
+            aria-label={intl.formatMessage(messages.pasteURL)}
+            aria-describedby="basic-addon2"
+            borderless
+            onClick={(event) => { event.stopPropagation(); }}
+            onChange={(event) => { setTextInputValue(event.target.value); }}
+            trailingElement={(
+              <IconButton
+                className="url-submit-button"
+                alt={intl.formatMessage(messages.submitButtonAltText)}
+                src={ArrowForward}
+                iconAs={Icon}
+                size="inline"
+                onClick={(event) => {
+                  event.stopPropagation();
+                  if (textInputValue.trim() !== '') {
+                    onURLUpload(textInputValue);
+                  }
+                }}
+              />
+            )}
+          />
+        </InputGroup>
+      </div>
+    </div>
+  );
+};
+
+export const VideoUploader = ({ setLoading }) => {
+  const dispatch = useDispatch();
+  const intl = useIntl();
+  const goBack = hooks.useHistoryGoBack();
+
+  const handleProcessUpload = ({ fileData }) => {
+    dispatch(thunkActions.video.uploadVideo({
+      supportedFiles: [fileData],
+      setLoadSpinner: setLoading,
+      postUploadRedirect: hooks.onVideoUpload('selectedVideoId'),
+    }));
+  };
+
+  return (
+    <div className="d-flex flex-column">
+      <div className="d-flex justify-content-end flex-row">
+        <IconButton
+          className="position-absolute mr-2 mt-2"
+          alt={intl.formatMessage(messages.closeButtonAltText)}
+          src={Close}
+          iconAs={Icon}
+          onClick={goBack}
+        />
+      </div>
+      <Dropzone
+        accept={{ 'video/*': ['.mp4', '.mov'] }}
+        onProcessUpload={handleProcessUpload}
+        inputComponent={<URLUploader />}
+      />
+    </div>
+  );
+};
+
+VideoUploader.propTypes = {
+  setLoading: PropTypes.func.isRequired,
+};
+
+export default VideoUploader;
diff --git a/src/editors/containers/VideoUploadEditor/VideoUploader.test.jsx b/src/editors/containers/VideoUploadEditor/VideoUploader.test.jsx
new file mode 100644
index 0000000000..90838d507b
--- /dev/null
+++ b/src/editors/containers/VideoUploadEditor/VideoUploader.test.jsx
@@ -0,0 +1,94 @@
+import React from 'react';
+import { render, fireEvent, act } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { initializeMockApp } from '@edx/frontend-platform';
+import { configureStore } from '@reduxjs/toolkit';
+import { AppProvider } from '@edx/frontend-platform/react';
+import '@testing-library/jest-dom';
+import * as redux from 'react-redux';
+import * as hooks from './hooks';
+import { VideoUploader } from './VideoUploader';
+
+jest.unmock('react-redux');
+jest.unmock('@edx/frontend-platform/i18n');
+jest.unmock('@openedx/paragon');
+jest.unmock('@openedx/paragon/icons');
+
+describe('VideoUploader', () => {
+  const setLoadingMock = jest.fn();
+  const onURLUploadMock = jest.fn();
+  let store;
+
+  beforeEach(async () => {
+    store = configureStore({
+      reducer: (state, action) => ((action && action.newState) ? action.newState : state),
+      preloadedState: {
+        app: {
+          learningContextId: 'course-v1:test+test+test',
+          blockId: 'some-block-id',
+        },
+      },
+    });
+
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'test-user',
+        administrator: true,
+        roles: [],
+      },
+    });
+  });
+
+  const renderComponent = async (storeParam, setLoadingMockParam) => render(
+    <AppProvider store={storeParam}>
+      <IntlProvider locale="en">
+        <VideoUploader setLoading={setLoadingMockParam} />
+      </IntlProvider>,
+    </AppProvider>,
+  );
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders as expected with default behavior', async () => {
+    expect(await renderComponent(store, setLoadingMock)).toMatchSnapshot();
+  });
+
+  it('calls onURLUpload when URL submit button is clicked', async () => {
+    const onVideoUploadSpy = jest.spyOn(hooks, 'onVideoUpload').mockImplementation(() => onURLUploadMock);
+
+    const { getByPlaceholderText, getAllByRole } = await renderComponent(store, setLoadingMock);
+
+    const urlInput = getByPlaceholderText('Paste your video ID or URL');
+    const urlSubmitButton = getAllByRole('button', { name: /submit/i });
+    expect(urlSubmitButton).toHaveLength(1);
+
+    fireEvent.change(urlInput, { target: { value: 'https://example.com/video.mp4' } });
+    urlSubmitButton.forEach((button) => fireEvent.click(button));
+    expect(onURLUploadMock).toHaveBeenCalledWith('https://example.com/video.mp4');
+
+    onVideoUploadSpy.mockRestore();
+  });
+
+  it('calls handleProcessUpload when file is selected', async () => {
+    const useDispatchSpy = jest.spyOn(redux, 'useDispatch');
+    const mockDispatchFn = jest.fn();
+    useDispatchSpy.mockReturnValue(mockDispatchFn);
+
+    const { getByTestId } = await renderComponent(store, setLoadingMock);
+
+    const fileInput = getByTestId('dropzone-container');
+    const file = new File(['file'], 'video.mp4', {
+      type: 'video/mp4',
+    });
+    Object.defineProperty(fileInput, 'files', {
+      value: [file],
+    });
+    await act(async () => fireEvent.drop(fileInput));
+    // Test dispacting thunkAction
+    expect(mockDispatchFn).toHaveBeenCalledWith(expect.any(Function));
+    useDispatchSpy.mockRestore();
+  });
+});
diff --git a/src/editors/containers/VideoUploadEditor/__snapshots__/VideoUploader.test.jsx.snap b/src/editors/containers/VideoUploadEditor/__snapshots__/VideoUploader.test.jsx.snap
new file mode 100644
index 0000000000..265aed2971
--- /dev/null
+++ b/src/editors/containers/VideoUploadEditor/__snapshots__/VideoUploader.test.jsx.snap
@@ -0,0 +1,384 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`VideoUploader renders as expected with default behavior 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        data-testid="redux-provider"
+      >
+        <div
+          data-testid="browser-router"
+        >
+          <div
+            class="d-flex flex-column"
+          >
+            <div
+              class="d-flex justify-content-end flex-row"
+            >
+              <button
+                aria-label="Close"
+                class="btn-icon btn-icon-primary btn-icon-md position-absolute mr-2 mt-2"
+                type="button"
+              >
+                <span
+                  class="btn-icon__icon-container"
+                >
+                  <span
+                    class="pgn__icon btn-icon__icon"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      fill="none"
+                      focusable="false"
+                      height="24"
+                      role="img"
+                      viewBox="0 0 24 24"
+                      width="24"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41Z"
+                        fill="currentColor"
+                      />
+                    </svg>
+                  </span>
+                </span>
+              </button>
+            </div>
+            <div
+              class="pgn__dropzone"
+              data-testid="dropzone-container"
+              role="presentation"
+              tabindex="0"
+            >
+              <input
+                accept="video/*,.mp4,.mov"
+                style="display: none;"
+                tabindex="-1"
+                type="file"
+              />
+              <div
+                class="d-flex flex-column justify-content-around align-items-center w-100"
+              >
+                <div
+                  class="d-flex flex-column"
+                >
+                  <div
+                    class="justify-content-center align-self-center rounded-circle bg-light-300 p-2.5"
+                  >
+                    <span
+                      class="pgn__icon text-muted"
+                      style="height: 2rem; width: 2rem;"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        fill="none"
+                        focusable="false"
+                        height="24"
+                        role="img"
+                        viewBox="0 0 24 24"
+                        width="24"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M5 10h4v6h6v-6h4l-7-7-7 7zm0 8v2h14v-2H5z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                    </span>
+                  </div>
+                  <div
+                    class="d-flex align-self-center justify-content-center flex-wrap flex-column pt-3"
+                  >
+                    <span>
+                      Drag and drop video here or click to upload
+                    </span>
+                    <span
+                      class="x-small align-self-center pt-2"
+                    >
+                      Upload MP4 or MOV files (5 GB max)
+                    </span>
+                  </div>
+                  <div
+                    class="small align-self-center justify-content-center mx-2 text-dark font-weight-normal pt-3"
+                  >
+                    OR
+                  </div>
+                  <div
+                    class="zindex-9 video-id-prompt py-3"
+                  >
+                    <div
+                      class="input-group"
+                    >
+                      <div
+                        class="pgn__form-control-decorator-group has-appended-node has-trailing-element m-0"
+                      >
+                        <input
+                          aria-describedby="basic-addon2"
+                          aria-label="Paste your video ID or URL"
+                          class="form-control"
+                          placeholder="Paste your video ID or URL"
+                          value=""
+                        />
+                        <div
+                          class="pgn__form-control-decorator pgn__form-control-decorator-trailing"
+                        >
+                          <button
+                            aria-label="Submit"
+                            class="btn-icon btn-icon-primary btn-icon-inline url-submit-button"
+                            type="button"
+                          >
+                            <span
+                              class="btn-icon__icon-container"
+                            >
+                              <span
+                                class="pgn__icon btn-icon__icon"
+                              >
+                                <svg
+                                  aria-hidden="true"
+                                  fill="none"
+                                  focusable="false"
+                                  height="24"
+                                  role="img"
+                                  viewBox="0 0 24 24"
+                                  width="24"
+                                  xmlns="http://www.w3.org/2000/svg"
+                                >
+                                  <path
+                                    d="m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8Z"
+                                    fill="currentColor"
+                                  />
+                                </svg>
+                              </span>
+                            </span>
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          ,
+        </div>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      data-testid="redux-provider"
+    >
+      <div
+        data-testid="browser-router"
+      >
+        <div
+          class="d-flex flex-column"
+        >
+          <div
+            class="d-flex justify-content-end flex-row"
+          >
+            <button
+              aria-label="Close"
+              class="btn-icon btn-icon-primary btn-icon-md position-absolute mr-2 mt-2"
+              type="button"
+            >
+              <span
+                class="btn-icon__icon-container"
+              >
+                <span
+                  class="pgn__icon btn-icon__icon"
+                >
+                  <svg
+                    aria-hidden="true"
+                    fill="none"
+                    focusable="false"
+                    height="24"
+                    role="img"
+                    viewBox="0 0 24 24"
+                    width="24"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41Z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
+              </span>
+            </button>
+          </div>
+          <div
+            class="pgn__dropzone"
+            data-testid="dropzone-container"
+            role="presentation"
+            tabindex="0"
+          >
+            <input
+              accept="video/*,.mp4,.mov"
+              style="display: none;"
+              tabindex="-1"
+              type="file"
+            />
+            <div
+              class="d-flex flex-column justify-content-around align-items-center w-100"
+            >
+              <div
+                class="d-flex flex-column"
+              >
+                <div
+                  class="justify-content-center align-self-center rounded-circle bg-light-300 p-2.5"
+                >
+                  <span
+                    class="pgn__icon text-muted"
+                    style="height: 2rem; width: 2rem;"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      fill="none"
+                      focusable="false"
+                      height="24"
+                      role="img"
+                      viewBox="0 0 24 24"
+                      width="24"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M5 10h4v6h6v-6h4l-7-7-7 7zm0 8v2h14v-2H5z"
+                        fill="currentColor"
+                      />
+                    </svg>
+                  </span>
+                </div>
+                <div
+                  class="d-flex align-self-center justify-content-center flex-wrap flex-column pt-3"
+                >
+                  <span>
+                    Drag and drop video here or click to upload
+                  </span>
+                  <span
+                    class="x-small align-self-center pt-2"
+                  >
+                    Upload MP4 or MOV files (5 GB max)
+                  </span>
+                </div>
+                <div
+                  class="small align-self-center justify-content-center mx-2 text-dark font-weight-normal pt-3"
+                >
+                  OR
+                </div>
+                <div
+                  class="zindex-9 video-id-prompt py-3"
+                >
+                  <div
+                    class="input-group"
+                  >
+                    <div
+                      class="pgn__form-control-decorator-group has-appended-node has-trailing-element m-0"
+                    >
+                      <input
+                        aria-describedby="basic-addon2"
+                        aria-label="Paste your video ID or URL"
+                        class="form-control"
+                        placeholder="Paste your video ID or URL"
+                        value=""
+                      />
+                      <div
+                        class="pgn__form-control-decorator pgn__form-control-decorator-trailing"
+                      >
+                        <button
+                          aria-label="Submit"
+                          class="btn-icon btn-icon-primary btn-icon-inline url-submit-button"
+                          type="button"
+                        >
+                          <span
+                            class="btn-icon__icon-container"
+                          >
+                            <span
+                              class="pgn__icon btn-icon__icon"
+                            >
+                              <svg
+                                aria-hidden="true"
+                                fill="none"
+                                focusable="false"
+                                height="24"
+                                role="img"
+                                viewBox="0 0 24 24"
+                                width="24"
+                                xmlns="http://www.w3.org/2000/svg"
+                              >
+                                <path
+                                  d="m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8Z"
+                                  fill="currentColor"
+                                />
+                              </svg>
+                            </span>
+                          </span>
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        ,
+      </div>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
diff --git a/src/editors/containers/VideoUploadEditor/__snapshots__/index.test.jsx.snap b/src/editors/containers/VideoUploadEditor/__snapshots__/index.test.jsx.snap
new file mode 100644
index 0000000000..0868961991
--- /dev/null
+++ b/src/editors/containers/VideoUploadEditor/__snapshots__/index.test.jsx.snap
@@ -0,0 +1,392 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`VideoUploadEditor renders as expected with default behavior 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        data-testid="redux-provider"
+      >
+        <div
+          data-testid="browser-router"
+        >
+          <div
+            class="d-flex marked-area flex-column p-3"
+          >
+            <div
+              class="d-flex flex-column"
+            >
+              <div
+                class="d-flex justify-content-end flex-row"
+              >
+                <button
+                  aria-label="Close"
+                  class="btn-icon btn-icon-primary btn-icon-md position-absolute mr-2 mt-2"
+                  type="button"
+                >
+                  <span
+                    class="btn-icon__icon-container"
+                  >
+                    <span
+                      class="pgn__icon btn-icon__icon"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        fill="none"
+                        focusable="false"
+                        height="24"
+                        role="img"
+                        viewBox="0 0 24 24"
+                        width="24"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41Z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                    </span>
+                  </span>
+                </button>
+              </div>
+              <div
+                class="pgn__dropzone"
+                data-testid="dropzone-container"
+                role="presentation"
+                tabindex="0"
+              >
+                <input
+                  accept="video/*,.mp4,.mov"
+                  style="display: none;"
+                  tabindex="-1"
+                  type="file"
+                />
+                <div
+                  class="d-flex flex-column justify-content-around align-items-center w-100"
+                >
+                  <div
+                    class="d-flex flex-column"
+                  >
+                    <div
+                      class="justify-content-center align-self-center rounded-circle bg-light-300 p-2.5"
+                    >
+                      <span
+                        class="pgn__icon text-muted"
+                        style="height: 2rem; width: 2rem;"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          fill="none"
+                          focusable="false"
+                          height="24"
+                          role="img"
+                          viewBox="0 0 24 24"
+                          width="24"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M5 10h4v6h6v-6h4l-7-7-7 7zm0 8v2h14v-2H5z"
+                            fill="currentColor"
+                          />
+                        </svg>
+                      </span>
+                    </div>
+                    <div
+                      class="d-flex align-self-center justify-content-center flex-wrap flex-column pt-3"
+                    >
+                      <span>
+                        Drag and drop video here or click to upload
+                      </span>
+                      <span
+                        class="x-small align-self-center pt-2"
+                      >
+                        Upload MP4 or MOV files (5 GB max)
+                      </span>
+                    </div>
+                    <div
+                      class="small align-self-center justify-content-center mx-2 text-dark font-weight-normal pt-3"
+                    >
+                      OR
+                    </div>
+                    <div
+                      class="zindex-9 video-id-prompt py-3"
+                    >
+                      <div
+                        class="input-group"
+                      >
+                        <div
+                          class="pgn__form-control-decorator-group has-appended-node has-trailing-element m-0"
+                        >
+                          <input
+                            aria-describedby="basic-addon2"
+                            aria-label="Paste your video ID or URL"
+                            class="form-control"
+                            placeholder="Paste your video ID or URL"
+                            value=""
+                          />
+                          <div
+                            class="pgn__form-control-decorator pgn__form-control-decorator-trailing"
+                          >
+                            <button
+                              aria-label="Submit"
+                              class="btn-icon btn-icon-primary btn-icon-inline url-submit-button"
+                              type="button"
+                            >
+                              <span
+                                class="btn-icon__icon-container"
+                              >
+                                <span
+                                  class="pgn__icon btn-icon__icon"
+                                >
+                                  <svg
+                                    aria-hidden="true"
+                                    fill="none"
+                                    focusable="false"
+                                    height="24"
+                                    role="img"
+                                    viewBox="0 0 24 24"
+                                    width="24"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      d="m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8Z"
+                                      fill="currentColor"
+                                    />
+                                  </svg>
+                                </span>
+                              </span>
+                            </button>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          ,
+        </div>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      data-testid="redux-provider"
+    >
+      <div
+        data-testid="browser-router"
+      >
+        <div
+          class="d-flex marked-area flex-column p-3"
+        >
+          <div
+            class="d-flex flex-column"
+          >
+            <div
+              class="d-flex justify-content-end flex-row"
+            >
+              <button
+                aria-label="Close"
+                class="btn-icon btn-icon-primary btn-icon-md position-absolute mr-2 mt-2"
+                type="button"
+              >
+                <span
+                  class="btn-icon__icon-container"
+                >
+                  <span
+                    class="pgn__icon btn-icon__icon"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      fill="none"
+                      focusable="false"
+                      height="24"
+                      role="img"
+                      viewBox="0 0 24 24"
+                      width="24"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41Z"
+                        fill="currentColor"
+                      />
+                    </svg>
+                  </span>
+                </span>
+              </button>
+            </div>
+            <div
+              class="pgn__dropzone"
+              data-testid="dropzone-container"
+              role="presentation"
+              tabindex="0"
+            >
+              <input
+                accept="video/*,.mp4,.mov"
+                style="display: none;"
+                tabindex="-1"
+                type="file"
+              />
+              <div
+                class="d-flex flex-column justify-content-around align-items-center w-100"
+              >
+                <div
+                  class="d-flex flex-column"
+                >
+                  <div
+                    class="justify-content-center align-self-center rounded-circle bg-light-300 p-2.5"
+                  >
+                    <span
+                      class="pgn__icon text-muted"
+                      style="height: 2rem; width: 2rem;"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        fill="none"
+                        focusable="false"
+                        height="24"
+                        role="img"
+                        viewBox="0 0 24 24"
+                        width="24"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M5 10h4v6h6v-6h4l-7-7-7 7zm0 8v2h14v-2H5z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                    </span>
+                  </div>
+                  <div
+                    class="d-flex align-self-center justify-content-center flex-wrap flex-column pt-3"
+                  >
+                    <span>
+                      Drag and drop video here or click to upload
+                    </span>
+                    <span
+                      class="x-small align-self-center pt-2"
+                    >
+                      Upload MP4 or MOV files (5 GB max)
+                    </span>
+                  </div>
+                  <div
+                    class="small align-self-center justify-content-center mx-2 text-dark font-weight-normal pt-3"
+                  >
+                    OR
+                  </div>
+                  <div
+                    class="zindex-9 video-id-prompt py-3"
+                  >
+                    <div
+                      class="input-group"
+                    >
+                      <div
+                        class="pgn__form-control-decorator-group has-appended-node has-trailing-element m-0"
+                      >
+                        <input
+                          aria-describedby="basic-addon2"
+                          aria-label="Paste your video ID or URL"
+                          class="form-control"
+                          placeholder="Paste your video ID or URL"
+                          value=""
+                        />
+                        <div
+                          class="pgn__form-control-decorator pgn__form-control-decorator-trailing"
+                        >
+                          <button
+                            aria-label="Submit"
+                            class="btn-icon btn-icon-primary btn-icon-inline url-submit-button"
+                            type="button"
+                          >
+                            <span
+                              class="btn-icon__icon-container"
+                            >
+                              <span
+                                class="pgn__icon btn-icon__icon"
+                              >
+                                <svg
+                                  aria-hidden="true"
+                                  fill="none"
+                                  focusable="false"
+                                  height="24"
+                                  role="img"
+                                  viewBox="0 0 24 24"
+                                  width="24"
+                                  xmlns="http://www.w3.org/2000/svg"
+                                >
+                                  <path
+                                    d="m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8Z"
+                                    fill="currentColor"
+                                  />
+                                </svg>
+                              </span>
+                            </span>
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        ,
+      </div>
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
diff --git a/src/editors/containers/VideoUploadEditor/hooks.js b/src/editors/containers/VideoUploadEditor/hooks.js
new file mode 100644
index 0000000000..a2774d9c60
--- /dev/null
+++ b/src/editors/containers/VideoUploadEditor/hooks.js
@@ -0,0 +1,45 @@
+// This 'module' self-import hack enables mocking during tests.
+// See src/editors/decisions/0005-internal-editor-testability-decisions.md. The whole approach to how hooks are tested
+// should be re-thought and cleaned up to avoid this pattern.
+// eslint-disable-next-line import/no-self-import
+import * as module from './hooks';
+import { selectors, thunkActions } from '../../data/redux';
+import store from '../../data/store';
+import * as appHooks from '../../hooks';
+
+export const {
+  navigateTo,
+} = appHooks;
+
+export const postUploadRedirect = (storeState, uploadType = 'selectedVideoUrl') => {
+  const learningContextId = selectors.app.learningContextId(storeState);
+  const blockId = selectors.app.blockId(storeState);
+  return (videoUrl) => navigateTo(`/course/${learningContextId}/editor/video/${blockId}?${uploadType}=${videoUrl}`);
+};
+
+export const onVideoUpload = (uploadType) => {
+  const storeState = store.getState();
+  return module.postUploadRedirect(storeState, uploadType);
+};
+
+export const useUploadVideo = async ({
+  dispatch,
+  supportedFiles,
+  setLoadSpinner,
+  postUploadRedirectFunction,
+}) => {
+  dispatch(thunkActions.video.uploadVideo({
+    supportedFiles,
+    setLoadSpinner,
+    postUploadRedirectFunction,
+  }));
+};
+
+export const useHistoryGoBack = () => (() => window.history.back());
+
+export default {
+  postUploadRedirect,
+  onVideoUpload,
+  useUploadVideo,
+  useHistoryGoBack,
+};
diff --git a/src/editors/containers/VideoUploadEditor/index.jsx b/src/editors/containers/VideoUploadEditor/index.jsx
new file mode 100644
index 0000000000..ae2be7b5fb
--- /dev/null
+++ b/src/editors/containers/VideoUploadEditor/index.jsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Spinner } from '@openedx/paragon';
+import './index.scss';
+import messages from './messages';
+import { VideoUploader } from './VideoUploader';
+
+const VideoUploadEditor = () => {
+  const [loading, setLoading] = React.useState(false);
+  const intl = useIntl();
+
+  return (!loading) ? (
+    <div className="d-flex marked-area flex-column p-3">
+      <VideoUploader setLoading={setLoading} />
+    </div>
+  ) : (
+    <div style={{
+      position: 'absolute',
+      left: '50%',
+      top: '50%',
+      transform: 'translate(-50%, -50%)',
+    }}
+    >
+      <Spinner
+        animation="border"
+        className="m-3"
+        screenreadertext={intl.formatMessage(messages.spinnerScreenReaderText)}
+      />
+    </div>
+  );
+};
+
+export default VideoUploadEditor;
diff --git a/src/editors/containers/VideoUploadEditor/index.scss b/src/editors/containers/VideoUploadEditor/index.scss
new file mode 100644
index 0000000000..4e27f44d12
--- /dev/null
+++ b/src/editors/containers/VideoUploadEditor/index.scss
@@ -0,0 +1,38 @@
+.dropzone-middle {
+  border: 2px dashed #CCCCCC;
+
+  &.active {
+    border: 2px solid #262626; /* change color when active */
+  }
+}
+
+.pgn__dropzone {
+  height: 96vh;
+  width: 100%;
+}
+
+.video-id-prompt {
+  input::placeholder {
+    color: #454545;
+    // color: #5E35B1;
+    font-weight: '500';
+    word-wrap: 'break-word';
+  }
+
+  button {
+    border: none !important;
+    background-color: #FFFFFF;
+  }
+
+  .btn-icon.url-submit-button {
+    &, &:active, &:hover {
+      background-color: transparent !important;
+      border: none !important;
+      color: #707070 !important;
+    }
+  }
+
+  .prompt-button {
+    background: rgba(239 234 247 / .70);
+  }
+}
diff --git a/src/editors/containers/VideoUploadEditor/index.test.jsx b/src/editors/containers/VideoUploadEditor/index.test.jsx
new file mode 100644
index 0000000000..92b291c499
--- /dev/null
+++ b/src/editors/containers/VideoUploadEditor/index.test.jsx
@@ -0,0 +1,63 @@
+import React from 'react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { initializeMockApp } from '@edx/frontend-platform';
+import { AppProvider } from '@edx/frontend-platform/react';
+import { configureStore } from '@reduxjs/toolkit';
+import { render, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import VideoUploadEditor from '.';
+
+jest.unmock('react-redux');
+jest.unmock('@edx/frontend-platform/i18n');
+jest.unmock('@openedx/paragon');
+jest.unmock('@openedx/paragon/icons');
+
+describe('VideoUploadEditor', () => {
+  let store;
+
+  const renderComponent = async (storeParam) => render(
+    <AppProvider store={storeParam}>
+      <IntlProvider locale="en">
+        <VideoUploadEditor />
+      </IntlProvider>,
+    </AppProvider>,
+  );
+
+  beforeEach(async () => {
+    store = configureStore({
+      reducer: (state, action) => ((action && action.newState) ? action.newState : state),
+      preloadedState: {},
+    });
+
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'test-user',
+        administrator: true,
+        roles: [],
+      },
+    });
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders as expected with default behavior', async () => {
+    expect(await renderComponent(store)).toMatchSnapshot();
+  });
+
+  it('calls window.history.back when close button is clicked', async () => {
+    const container = await renderComponent(store);
+    const closeButton = container.getAllByRole('button', { name: /close/i });
+    const oldHistoryBack = window.history.back;
+    window.history.back = jest.fn();
+
+    expect(closeButton).toHaveLength(1);
+    expect(window.history.back).not.toHaveBeenCalled();
+    closeButton.forEach((button) => fireEvent.click(button));
+    expect(window.history.back).toHaveBeenCalled();
+
+    window.history.back = oldHistoryBack;
+  });
+});
diff --git a/src/editors/containers/VideoUploadEditor/messages.js b/src/editors/containers/VideoUploadEditor/messages.js
new file mode 100644
index 0000000000..0a071e53c8
--- /dev/null
+++ b/src/editors/containers/VideoUploadEditor/messages.js
@@ -0,0 +1,36 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  spinnerScreenReaderText: {
+    id: 'authoring.videoUpload.spinnerScreenReaderText',
+    defaultMessage: 'loading',
+    description: 'Loading message for spinner screenreader text.',
+  },
+  dropVideoFileHere: {
+    defaultMessage: 'Drag and drop video here or click to upload',
+    id: 'VideoUploadEditor.dropVideoFileHere',
+    description: 'Display message for Drag and Drop zone',
+  },
+  info: {
+    id: 'VideoUploadEditor.uploadInfo',
+    defaultMessage: 'Upload MP4 or MOV files (5 GB max)',
+    description: 'Info message for supported formats',
+  },
+  pasteURL: {
+    id: 'VideoUploadEditor.pasteURL',
+    defaultMessage: 'Paste your video ID or URL',
+    description: 'Paste URL message for video upload',
+  },
+  closeButtonAltText: {
+    id: 'VideoUploadEditor.closeButtonAltText',
+    defaultMessage: 'Close',
+    description: 'Close button alt text',
+  },
+  submitButtonAltText: {
+    id: 'VideoUploadEditor.submitButtonAltText',
+    defaultMessage: 'Submit',
+    description: 'Submit button alt text',
+  },
+});
+
+export default messages;
diff --git a/src/editors/data/constants/advancedOlxTemplates/circuitschematic.js b/src/editors/data/constants/advancedOlxTemplates/circuitschematic.js
new file mode 100644
index 0000000000..e3d5eb6ada
--- /dev/null
+++ b/src/editors/data/constants/advancedOlxTemplates/circuitschematic.js
@@ -0,0 +1,95 @@
+/* eslint-disable */
+// ---
+// metadata:
+//     display_name: Circuit Schematic Builder
+//     markdown: !!null
+// data: |
+const circuitSchematic = `<problem>
+    <p>
+        Circuit schematic problems allow students to create virtual circuits by
+        arranging elements such as voltage sources, capacitors, resistors, and
+        MOSFETs on an interactive grid. The system evaluates a DC, AC, or
+        transient analysis of the circuit.
+    </p>
+    <p>
+        For more information, see
+        <a href="https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/exercises_tools/circuit_schematic_builder.html" target="_blank">
+        Circuit Schematic Builder Problem</a> in <i>Building and Running an edX Course</i>.
+    </p>
+    <p>
+        When you add the problem, be sure to select <strong>Settings</strong>
+        to specify a <strong>Display Name</strong> and other values that apply.
+    </p>
+    <p>You can use the following example problems as models.</p>
+
+    <schematicresponse>
+        <p>Make a voltage divider that splits the provided voltage evenly.</p>
+        <center>
+            <schematic height="500" width="600" parts="g,r" analyses="dc"
+            initial_value='[["v",[168,144,0],{"value":"dc(1)","_json_":0},["1","0"]],["r",[296,120,0],{"r":"1","_json_":1},["1","output"]],["L",[296,168,3],{"label":"output","_json_":2},["output"]],["w",[296,216,168,216]],["w",[168,216,168,192]],["w",[168,144,168,120]],["w",[168,120,296,120]],["g",[168,216,0],{"_json_":7},["0"]],["view",-67.49999999999994,-78.49999999999994,1.6000000000000003,"50","10","1G",null,"100","1","1000"]]'/>
+        </center>
+        <answer type="loncapa/python">
+
+dc_value = "dc analysis not found"
+for response in submission[0]:
+    if response[0] == 'dc':
+        for node in response[1:]:
+            dc_value = node['output']
+
+if dc_value == .5:
+    correct = ['correct']
+else:
+    correct = ['incorrect']
+
+        </answer>
+        <solution>
+            <div class="detailed-solution">
+                <p>Explanation</p>
+                <p>
+                    You can form a voltage divider that evenly divides the input
+                    voltage with two identically valued resistors, with the sampled
+                    voltage taken in between the two.
+                </p>
+                <p><img src="/static/images/voltage_divider.png" alt=""/></p>
+            </div>
+        </solution>
+    </schematicresponse>
+
+    <schematicresponse>
+        <p>Make a high-pass filter.</p>
+        <center>
+            <schematic height="500" width="600" parts="g,r,s,c" analyses="ac"
+            submit_analyses='{"ac":[["NodeA",1,9]]}'
+            initial_value='[["v",[160,152,0],{"name":"v1","value":"sin(0,1,1,0,0)","_json_":0},["1","0"]],["w",[160,200,240,200]],["g",[160,200,0],{"_json_":2},["0"]],["L",[240,152,3],{"label":"NodeA","_json_":3},["NodeA"]],["s",[240,152,0],{"color":"cyan","offset":"0","_json_":4},["NodeA"]],["view",64.55878906250004,54.114697265625054,2.5000000000000004,"50","10","1G",null,"100","1","1000"]]'/>        </center>
+        <answer type="loncapa/python">
+
+ac_values = None
+for response in submission[0]:
+    if response[0] == 'ac':
+        for node in response[1:]:
+            ac_values = node['NodeA']
+print "the ac analysis value:", ac_values
+if ac_values == None:
+    correct = ['incorrect']
+elif ac_values[0][1] &lt; ac_values[1][1]:
+    correct = ['correct']
+else:
+    correct = ['incorrect']
+
+        </answer>
+        <solution>
+            <div class="detailed-solution">
+                <p>Explanation</p>
+                <p>
+                    You can form a simple high-pass filter without any further
+                    constraints by simply putting a resistor in series with a
+                    capacitor. The actual values of the components do not really
+                    matter in this problem.
+                </p>
+                <p><img src="/static/images/high_pass_filter.png" alt=""/></p>
+            </div>
+        </solution>
+    </schematicresponse>
+</problem>`;
+
+export default circuitSchematic;
diff --git a/src/editors/data/constants/advancedOlxTemplates/customgrader.js b/src/editors/data/constants/advancedOlxTemplates/customgrader.js
new file mode 100644
index 0000000000..f24c59263b
--- /dev/null
+++ b/src/editors/data/constants/advancedOlxTemplates/customgrader.js
@@ -0,0 +1,83 @@
+/* eslint-disable */
+// ---
+// metadata:
+//     display_name: Custom Python-Evaluated Input
+//     markdown: !!null
+// data: |
+const customGrader = `<problem>
+    <p>
+        In custom Python-evaluated input (also called "write-your-own-grader"
+        problems), the grader uses a Python script that you create and embed in
+        the problem to evaluate a learner's response or provide hints. These
+        problems can be any type. Numerical input and text input problems are
+        the most common write-your-own-grader problems.
+    </p>
+    <p>
+        You can use script tag format or answer tag format to create these problems.
+    </p>
+    <p>
+        You can create custom Python-evaluated input problems that provide
+        partial credit or that randomize variables in the Python code. You can
+        also add images to the solution by using an HTML "img" tag. Note that
+        the "img" tag must be between the "div" tags that are inside the
+        "solution" tags, and that learners do not see these images until they
+        click the "Show Answer" button.
+    </p>
+    <p>
+        For more information, see <a href="https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/exercises_tools/custom_python.html" target="_blank">
+        Write-Your-Own-Grader Problem</a> in <i>Building and Running an edX Course</i>.
+    </p>
+    <p>
+        When you add the problem, be sure to select <strong>Settings</strong>
+        to specify a <strong>Display Name</strong> and other values that apply.
+    </p>
+    <p>You can use the following example problem as a model.</p>
+    <hr/>
+
+    <customresponse cfn="test_add_to_ten">
+        <script type="loncapa/python">
+
+def test_add_to_ten(expect, ans):
+    return test_add(10, ans)
+
+        </script>
+        <label>Enter two integers that sum to 10.</label>
+        <textline size="40" correct_answer="3" label="Enter first number" /><br/>
+        <textline size="40" correct_answer="7" label="Enter second number" />
+        <solution>
+            <div class="detailed-solution">
+                <p>Explanation</p>
+                <p>Any set of integers on the line \(y = 10 - x\) satisfy these constraints.</p>
+            </div>
+        </solution>
+    </customresponse>
+    <customresponse cfn="test_add" expect="20">
+        <script type="loncapa/python">
+
+def test_add(expect, ans):
+    try:
+        a1=int(ans[0])
+        a2=int(ans[1])
+        return (a1+a2) == int(expect)
+    except ValueError:
+        return False
+
+        </script>
+        <label>Enter two integers that sum to 20.</label>
+        <textline size="40" correct_answer="11" label="Enter first number" /><br/>
+        <textline size="40" correct_answer="9" label="Enter second number" />
+        <solution>
+            <div class="detailed-solution">
+                <p>Explanation</p>
+                <p>Any set of integers on the line \(y = 20 - x\) satisfy these constraints.</p>
+                <p>To add an image to the solution, use an HTML "img" tag. Make sure to include alt text.</p>
+                <img src="/static/images/placeholder-image.png" width="400"
+                alt="Description of image, with a primary goal of explaining its
+                relevance to the problem or concept being illustrated for someone
+                who is unable to see the image."/>
+            </div>
+        </solution>
+    </customresponse>
+</problem>`;
+
+export default customGrader;
diff --git a/src/editors/data/constants/advancedOlxTemplates/formularesponse.js b/src/editors/data/constants/advancedOlxTemplates/formularesponse.js
new file mode 100644
index 0000000000..72aaa62c65
--- /dev/null
+++ b/src/editors/data/constants/advancedOlxTemplates/formularesponse.js
@@ -0,0 +1,16 @@
+/* eslint-disable */
+// ---
+// metadata:
+//     display_name: Math Expression Input
+//     markdown: !!null
+// data: |
+const formulaResponse = `<problem>
+    <formularesponse type="ci" samples="R_1,R_2,R_3@1,2,3:3,4,5#10" answer="R_1*R_2/R_3">
+        <p>You can use this template as a guide to the OLX markup to use for math expression problems. Edit this component to replace the example with your own assessment.</p>
+        <label>Add the question text, or prompt, here. This text is required. Example: Write an expression for the product of R_1, R_2, and the inverse of R_3.</label>
+        <description>You can add an optional tip or note related to the prompt like this. Example: To test this example, the correct answer is R_1*R_2/R_3</description>
+        <responseparam type="tolerance" default="0.00001"/>
+        <formulaequationinput size="40"/>
+    </formularesponse>
+</problem>`;
+export default formulaResponse;
diff --git a/src/editors/data/constants/advancedOlxTemplates/imageresponse.js b/src/editors/data/constants/advancedOlxTemplates/imageresponse.js
new file mode 100644
index 0000000000..1980d40ead
--- /dev/null
+++ b/src/editors/data/constants/advancedOlxTemplates/imageresponse.js
@@ -0,0 +1,33 @@
+/* eslint-disable */
+// ---
+// metadata:
+//     display_name: Image Mapped Input
+//     markdown: !!null
+// data:   |
+const imageResponse = `<problem>
+        <p>
+            In an image mapped input problem, also known as a "pointing on a picture" problem, students click inside a defined region in an image. You define this region by including coordinates in the body of the problem. You can define one rectangular region,
+            multiple rectangular regions, or one non-rectangular region. For more information, see
+            <a href="https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/exercises_tools/image_mapped_input.html" target="_blank">Image Mapped Input Problem</a>
+            in
+            <i>Building and Running an edx Course</i>.
+        </p>
+        <p>When you add the problem, be sure to select
+            <strong>Settings</strong>
+            to specify a
+            <strong>Display Name</strong>
+            and other values that apply.</p>
+        <p>You can use the following example problem as a model.</p>
+        <imageresponse>
+            <p>What country is home to the Great Pyramid of Giza as well as the cities of Cairo and Memphis? Click the country on the map below.</p>
+            <imageinput src="https://studio.edx.org/c4x/edX/DemoX/asset/Africa.png" width="600" height="638" rectangle="(338,98)-(412,168)" alt="Map of Africa"/>
+            <solution>
+                <div class="detailed-solution">
+                    <p>Explanation</p>
+                    <p>Egypt is home to not only the Pyramids, Cairo, and Memphis, but also the Sphinx and the ancient Royal Library of Alexandria.</p>
+                </div>
+            </solution>
+        </imageresponse>
+    </problem>`;
+
+export default imageResponse;
diff --git a/src/editors/data/constants/advancedOlxTemplates/index.js b/src/editors/data/constants/advancedOlxTemplates/index.js
new file mode 100644
index 0000000000..16602efdb2
--- /dev/null
+++ b/src/editors/data/constants/advancedOlxTemplates/index.js
@@ -0,0 +1,11 @@
+import { StrictDict } from '../../../utils';
+import circuitSchematic from './circuitschematic';
+import customGrader from './customgrader';
+import formulaResponse from './formularesponse';
+import imageResponse from './imageresponse';
+import jsInputResponse from './jsinput_response';
+import problemWithHint from './problem_with_hint';
+
+export default StrictDict({
+  circuitSchematic, customGrader, formulaResponse, imageResponse, jsInputResponse, problemWithHint,
+});
diff --git a/src/editors/data/constants/advancedOlxTemplates/jsinput_response.js b/src/editors/data/constants/advancedOlxTemplates/jsinput_response.js
new file mode 100644
index 0000000000..34e6f6e55c
--- /dev/null
+++ b/src/editors/data/constants/advancedOlxTemplates/jsinput_response.js
@@ -0,0 +1,83 @@
+/* eslint-disable */
+// ---
+// metadata:
+//     display_name: Custom JavaScript Display and Grading
+//     markdown: !!null
+//     showanswer: never
+// data: |
+const jsInputResponse = `<problem>
+    <p>
+        In these problems (also called custom JavaScript problems or JS Input
+        problems), you add a problem or tool that uses JavaScript in Studio.
+        Studio embeds the problem in an IFrame so that your learners can
+        interact with it in the LMS. You can grade your learners' work using
+        JavaScript and some basic Python, and the grading is integrated into the
+        edX grading system.
+    </p>
+    <p>
+        The JS Input problem that you create must use HTML, JavaScript, and
+        cascading style sheets (CSS). You can use any application creation tool,
+        such as the Google Web Toolkit (GWT), to create your JS Input problem.
+    </p>
+    <p>
+        For more information, see
+        <a href="https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/exercises_tools/custom_javascript.html" target="_blank">
+        Custom JavaScript Problem</a> in <i>Building and Running an edX Course</i>.
+    </p>
+    <p>
+        JavaScript developers can also see
+        <a href="https://edx.readthedocs.io/projects/edx-developer-guide/en/latest/extending_platform/javascript.html" target="_blank">
+        Custom JavaScript Applications</a> in the <i>EdX Developer's Guide</i>.
+    </p>
+    <p>
+        When you add the problem, be sure to select <strong>Settings</strong>
+        to specify a <strong>Display Name</strong> and other values that apply.
+        Also, be sure to specify a <strong>title</strong> attribute on the <strong>jsinput</strong> tag;
+        this title is used for the title attribute on the generated IFrame. Generally,
+        the title attribute on the IFrame should match the title tag of the HTML hosted
+        within the IFrame, which is specified by the <strong>html_file</strong> attribute.
+    </p>
+    <p>You can use the following example problem as a model.</p>
+
+    <customresponse cfn="check_function">
+        <script type="loncapa/python">
+
+<![CDATA[
+import json
+def check_function(e, ans):
+    """
+    "response" is a dictionary that contains two keys, "answer" and "state".
+    The value of "answer" is the JSON string that "getGrade" returns.
+    The value of "state" is the JSON string that "getState" returns.
+    Clicking either "Submit" or "Save" registers the current state.
+    """
+    response = json.loads(ans)
+
+    # You can use the value of the answer key to grade:
+    answer = json.loads(response["answer"])
+    return answer == "correct"
+
+    # Or you can use the value of the state key to grade:
+    """
+    state = json.loads(response["state"])
+    return state["selectedChoice"] == "correct"
+    """
+]]>
+
+        </script>
+        <p>This is paragraph text displayed before the IFrame.</p>
+        <jsinput
+            gradefn="JSInputDemo.getGrade"
+            get_statefn="JSInputDemo.getState"
+            set_statefn="JSInputDemo.setState"
+            initial_state='{"selectedChoice": "incorrect1", "availableChoices": ["incorrect1", "correct", "incorrect2"]}'
+            width="600"
+            height="100"
+            html_file="https://files.edx.org/custom-js-example/jsinput_example.html"
+            title="Dropdown with Dynamic Text"
+            sop="false"
+        />
+    </customresponse>
+</problem>`;
+
+export default jsInputResponse;
diff --git a/src/editors/data/constants/advancedOlxTemplates/problem_with_hint.js b/src/editors/data/constants/advancedOlxTemplates/problem_with_hint.js
new file mode 100644
index 0000000000..442b0cc3d7
--- /dev/null
+++ b/src/editors/data/constants/advancedOlxTemplates/problem_with_hint.js
@@ -0,0 +1,48 @@
+/* eslint-disable */
+// ---
+// metadata:
+//     display_name: Problem with Adaptive Hint
+//     markdown: !!null
+// data: |
+const problemWithHint = `<problem>
+    <text>
+        <p><h4>Problem With Adaptive Hint</h4></p>
+        <p>This problem demonstrates a question with hints, based on using the <tt class="tt">hintfn</tt> method. </p>
+
+        <customresponse cfn="test_str" expect="python">
+            <script type="text/python" system_path="python_lib">
+
+def test_str(expect, ans):
+    print(expect, ans)
+    ans = ans.strip("'")
+    ans = ans.strip('"')
+    return expect == ans.lower()
+
+def hint_fn(answer_ids, student_answers, new_cmap, old_cmap):
+    aid = answer_ids[0]
+    ans = str(student_answers[aid]).lower()
+    print('hint_fn called, ans=', ans)
+    hint = ''
+    if 'java' in ans:
+        hint = 'that is only good for drinking'
+    elif 'perl' in ans:
+        hint = 'not that rich'
+    elif 'pascal' in ans:
+        hint = 'that is a beatnick language'
+    elif 'fortran' in ans:
+        hint = 'those were the good days'
+    elif 'clu' in ans:
+        hint = 'you must be invariant'
+    if hint:
+        hint = "&lt;font color='blue'&gt;Hint: {0}&lt;/font&gt;".format(hint)
+        new_cmap.set_hint_and_mode(aid,hint,'always')
+
+            </script>
+            <label>What is the best programming language that exists today? You may enter your answer in upper or lower case, with or without quotes.</label>
+            <textline correct_answer="python"/>
+            <hintgroup hintfn="hint_fn"/>
+        </customresponse>
+    </text>
+</problem>`;
+
+export default problemWithHint;
diff --git a/src/editors/data/constants/analyticsEvt.js b/src/editors/data/constants/analyticsEvt.js
new file mode 100644
index 0000000000..1fef2fa7d1
--- /dev/null
+++ b/src/editors/data/constants/analyticsEvt.js
@@ -0,0 +1,7 @@
+const analyticsEvt = {
+  editorSaveClick: 'edx.ui.authoring.editor.save',
+  editorCancelClick: 'edx.ui.authoring.editor.cancel',
+  videoGalleryCancelClick: 'edx.ui.authoring.videogallery.cancel',
+};
+
+export default analyticsEvt;
diff --git a/src/editors/data/constants/app.ts b/src/editors/data/constants/app.ts
new file mode 100644
index 0000000000..ac331dae17
--- /dev/null
+++ b/src/editors/data/constants/app.ts
@@ -0,0 +1,10 @@
+import { StrictDict } from '../../utils';
+
+export const blockTypes = StrictDict({
+  html: 'html',
+  video: 'video',
+  problem: 'problem',
+  // ADDED_EDITORS GO BELOW
+  video_upload: 'video_upload',
+  game: 'game',
+});
diff --git a/src/editors/data/constants/basicOlxTemplates/dropdown.js b/src/editors/data/constants/basicOlxTemplates/dropdown.js
new file mode 100644
index 0000000000..e66e0d1f0d
--- /dev/null
+++ b/src/editors/data/constants/basicOlxTemplates/dropdown.js
@@ -0,0 +1,12 @@
+/* eslint-disable */
+const dropdown = `<problem>
+  <optionresponse>
+    <optioninput>
+      <option correct="True"></option>
+      <option correct="False"></option>
+      <option correct="False"></option>
+    </optioninput>
+  </optionresponse>
+</problem>`
+
+export default dropdown;
diff --git a/src/editors/data/constants/basicOlxTemplates/index.js b/src/editors/data/constants/basicOlxTemplates/index.js
new file mode 100644
index 0000000000..977d3b7a54
--- /dev/null
+++ b/src/editors/data/constants/basicOlxTemplates/index.js
@@ -0,0 +1,10 @@
+import { StrictDict } from '../../../utils';
+import dropdown from './dropdown';
+import multiSelect from './multiSelect';
+import numeric from './numeric';
+import singleSelect from './singleSelect';
+import textInput from './textInput';
+
+export default StrictDict({
+  dropdown, multiSelect, numeric, singleSelect, textInput,
+});
diff --git a/src/editors/data/constants/basicOlxTemplates/multiSelect.js b/src/editors/data/constants/basicOlxTemplates/multiSelect.js
new file mode 100644
index 0000000000..a743ae6845
--- /dev/null
+++ b/src/editors/data/constants/basicOlxTemplates/multiSelect.js
@@ -0,0 +1,12 @@
+/* eslint-disable */
+ const multiSelect= `<problem>
+  <choiceresponse>
+    <checkboxgroup>
+      <choice correct="true"></choice>
+      <choice correct="false"></choice>
+      <choice correct="false"></choice>
+    </checkboxgroup>
+  </choiceresponse>
+</problem>`
+
+export default multiSelect;
\ No newline at end of file
diff --git a/src/editors/data/constants/basicOlxTemplates/numeric.js b/src/editors/data/constants/basicOlxTemplates/numeric.js
new file mode 100644
index 0000000000..5b7a915c9c
--- /dev/null
+++ b/src/editors/data/constants/basicOlxTemplates/numeric.js
@@ -0,0 +1,9 @@
+/* eslint-disable */
+const numeric = `<problem>
+  <numericalresponse>
+    <responseparam type="tolerance" default="5"/>
+    <formulaequationinput/>
+  </numericalresponse>
+</problem>`
+
+export default numeric;
\ No newline at end of file
diff --git a/src/editors/data/constants/basicOlxTemplates/singleSelect.js b/src/editors/data/constants/basicOlxTemplates/singleSelect.js
new file mode 100644
index 0000000000..ea0e370366
--- /dev/null
+++ b/src/editors/data/constants/basicOlxTemplates/singleSelect.js
@@ -0,0 +1,12 @@
+/* eslint-disable */
+const singleSelect = `<problem>
+  <multiplechoiceresponse>
+    <choicegroup>
+      <choice correct="true"></choice>
+      <choice correct="false"></choice>
+      <choice correct="false"></choice>
+    </choicegroup>
+  </multiplechoiceresponse>
+</problem>`
+
+export default singleSelect;
\ No newline at end of file
diff --git a/src/editors/data/constants/basicOlxTemplates/textInput.js b/src/editors/data/constants/basicOlxTemplates/textInput.js
new file mode 100644
index 0000000000..a1ece7a16e
--- /dev/null
+++ b/src/editors/data/constants/basicOlxTemplates/textInput.js
@@ -0,0 +1,9 @@
+/* eslint-disable */
+const textInput =`<problem>
+  <stringresponse type="ci">
+    <additional_answer />
+    <textline size="20"/>
+  </stringresponse>
+</problem>`
+
+export default textInput;
\ No newline at end of file
diff --git a/src/editors/data/constants/licenses.js b/src/editors/data/constants/licenses.js
new file mode 100644
index 0000000000..9b021aca18
--- /dev/null
+++ b/src/editors/data/constants/licenses.js
@@ -0,0 +1,26 @@
+import { StrictDict } from '../../utils';
+
+export const LicenseNames = StrictDict({
+  select: 'Select',
+  allRightsReserved: 'All Rights Reserved',
+  creativeCommons: 'Creative Commons',
+});
+
+export const LicenseTypes = StrictDict({
+  allRightsReserved: 'all-rights-reserved',
+  creativeCommons: 'creative-commons',
+  select: 'select',
+  // publicDomainDedication: 'public-domain-dedication', // future?
+});
+
+export const LicenseLevel = StrictDict({
+  block: 'block',
+  course: 'course',
+  library: 'library',
+});
+
+export default {
+  LicenseLevel,
+  LicenseNames,
+  LicenseTypes,
+};
diff --git a/src/editors/data/constants/mockData.js b/src/editors/data/constants/mockData.js
new file mode 100644
index 0000000000..d8d4b9f26a
--- /dev/null
+++ b/src/editors/data/constants/mockData.js
@@ -0,0 +1,96 @@
+/* istanbul ignore file */
+export const mockImageData = [
+  {
+    displayName: 'shahrukh.jpg',
+    contentType: 'image/jpeg',
+    dateAdded: 'Jan 05, 2022 at 17:38 UTC',
+    url: '/asset-v1:edX+test101+2021_T1+type@asset+block@shahrukh.jpg',
+    externalUrl: 'https://courses.edx.org/asset-v1:edX+test101+2021_T1+type@asset+block@shahrukh.jpg',
+    portableUrl: '/static/shahrukh.jpg',
+    thumbnail: '/asset-v1:edX+test101+2021_T1+type@thumbnail+block@shahrukh.jpg',
+    locked: false,
+    id: 'asset-v1:edX+test101+2021_T1+type@asset+block@shahrukh.jpg',
+  },
+  {
+    displayName: 'IMG_5899.jpg',
+    contentType: 'image/jpeg',
+    dateAdded: 'Nov 16, 2021 at 18:55 UTC',
+    url: '/asset-v1:edX+test101+2021_T1+type@asset+block@IMG_5899.jpg',
+    externalUrl: 'https://courses.edx.org/asset-v1:edX+test101+2021_T1+type@asset+block@IMG_5899.jpg',
+    portableUrl: '/static/IMG_5899.jpg',
+    thumbnail: '/asset-v1:edX+test101+2021_T1+type@thumbnail+block@IMG_5899.jpg',
+    locked: false,
+    id: 'asset-v1:edX+test101+2021_T1+type@asset+block@IMG_5899.jpg',
+  },
+  {
+    displayName: 'ccexample.srt',
+    contentType: 'application/octet-stream',
+    dateAdded: 'Nov 01, 2021 at 15:42 UTC',
+    url: '/asset-v1:edX+test101+2021_T1+type@asset+block@ccexample.srt',
+    externalUrl: 'https://courses.edx.org/asset-v1:edX+test101+2021_T1+type@asset+block@ccexample.srt',
+    portableUrl: '/static/ccexample.srt',
+    thumbnail: null,
+    locked: false,
+    id: 'asset-v1:edX+test101+2021_T1+type@asset+block@ccexample.srt',
+  },
+  {
+    displayName: 'Tennis Ball.jpeg',
+    contentType: 'image/jpeg',
+    dateAdded: 'Aug 04, 2021 at 16:52 UTC',
+    url: '/asset-v1:edX+test101+2021_T1+type@asset+block@Tennis_Ball.jpeg',
+    externalUrl: 'https://courses.edx.org/asset-v1:edX+test101+2021_T1+type@asset+block@Tennis_Ball.jpeg',
+    portableUrl: '/static/Tennis_Ball.jpeg',
+    thumbnail: '/asset-v1:edX+test101+2021_T1+type@thumbnail+block@Tennis_Ball-jpeg.jpg',
+    locked: false,
+    id: 'asset-v1:edX+test101+2021_T1+type@asset+block@Tennis_Ball.jpeg',
+  },
+];
+
+export const mockVideoData = [
+  {
+    displayName: 'shahrukh.jpg',
+    contentType: 'image/jpeg',
+    dateAdded: 'Jan 05, 2022 at 17:38 UTC',
+    url: '/asset-v1:edX+test101+2021_T1+type@asset+block@shahrukh.jpg',
+    externalUrl: 'https://courses.edx.org/asset-v1:edX+test101+2021_T1+type@asset+block@shahrukh.jpg',
+    portableUrl: '/static/shahrukh.jpg',
+    thumbnail: '/asset-v1:edX+test101+2021_T1+type@thumbnail+block@shahrukh.jpg',
+    locked: false,
+    id: 'asset-v1:edX+test101+2021_T1+type@asset+block@shahrukh.jpg',
+  },
+  {
+    displayName: 'IMG_5899.jpg',
+    contentType: 'image/jpeg',
+    dateAdded: 'Nov 16, 2021 at 18:55 UTC',
+    url: '/asset-v1:edX+test101+2021_T1+type@asset+block@IMG_5899.jpg',
+    externalUrl: 'https://courses.edx.org/asset-v1:edX+test101+2021_T1+type@asset+block@IMG_5899.jpg',
+    portableUrl: '/static/IMG_5899.jpg',
+    thumbnail: '/asset-v1:edX+test101+2021_T1+type@thumbnail+block@IMG_5899.jpg',
+    locked: false,
+    id: 'asset-v1:edX+test101+2021_T1+type@asset+block@IMG_5899.jpg',
+  },
+  {
+    displayName: 'ccexample.srt',
+    contentType: 'application/octet-stream',
+    dateAdded: 'Nov 01, 2021 at 15:42 UTC',
+    url: '/asset-v1:edX+test101+2021_T1+type@asset+block@ccexample.srt',
+    externalUrl: 'https://courses.edx.org/asset-v1:edX+test101+2021_T1+type@asset+block@ccexample.srt',
+    portableUrl: '/static/ccexample.srt',
+    thumbnail: null,
+    locked: false,
+    id: 'asset-v1:edX+test101+2021_T1+type@asset+block@ccexample.srt',
+  },
+  {
+    displayName: 'Tennis Ball.jpeg',
+    contentType: 'image/jpeg',
+    dateAdded: 'Aug 04, 2021 at 16:52 UTC',
+    url: '/asset-v1:edX+test101+2021_T1+type@asset+block@Tennis_Ball.jpeg',
+    externalUrl: 'https://courses.edx.org/asset-v1:edX+test101+2021_T1+type@asset+block@Tennis_Ball.jpeg',
+    portableUrl: '/static/Tennis_Ball.jpeg',
+    thumbnail: '/asset-v1:edX+test101+2021_T1+type@thumbnail+block@Tennis_Ball-jpeg.jpg',
+    locked: false,
+    id: 'asset-v1:edX+test101+2021_T1+type@asset+block@Tennis_Ball.jpeg',
+  },
+];
+
+export const mockBlockIdByType = (type) => `${type}-block-id`;
diff --git a/src/editors/data/constants/problem.ts b/src/editors/data/constants/problem.ts
new file mode 100644
index 0000000000..0c26a45f04
--- /dev/null
+++ b/src/editors/data/constants/problem.ts
@@ -0,0 +1,241 @@
+import { StrictDict } from '../../utils';
+import singleSelect from '../images/singleSelect.png';
+import multiSelect from '../images/multiSelect.png';
+import dropdown from '../images/dropdown.png';
+import numericalInput from '../images/numericalInput.png';
+import textInput from '../images/textInput.png';
+import advancedOlxTemplates from './advancedOlxTemplates';
+import basicOlxTemplates from './basicOlxTemplates';
+
+export const ProblemTypeKeys = StrictDict({
+  SINGLESELECT: 'multiplechoiceresponse',
+  MULTISELECT: 'choiceresponse',
+  DROPDOWN: 'optionresponse',
+  NUMERIC: 'numericalresponse',
+  TEXTINPUT: 'stringresponse',
+  ADVANCED: 'advanced',
+} as const);
+export type ProblemType = typeof ProblemTypeKeys[keyof typeof ProblemTypeKeys];
+
+export const ProblemTypes = StrictDict({
+  [ProblemTypeKeys.SINGLESELECT]: {
+    title: 'Single select',
+    preview: singleSelect,
+    previewDescription: 'Learners must select the correct answer from a list of possible options.',
+    description: 'Enter your single select answers below and select which choices are correct. Learners must choose one correct answer.',
+    helpLink: 'https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/exercises_tools/multiple_choice.html',
+    prev: ProblemTypeKeys.TEXTINPUT,
+    next: ProblemTypeKeys.MULTISELECT,
+    template: basicOlxTemplates.singleSelect,
+
+  },
+  [ProblemTypeKeys.MULTISELECT]: {
+    title: 'Multi-select',
+    preview: multiSelect,
+    previewDescription: 'Learners must select all correct answers from a list of possible options.',
+    description: 'Enter your multi select answers below and select which choices are correct. Learners must choose all correct answers.',
+    helpLink: 'https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/exercises_tools/checkbox.html',
+    next: ProblemTypeKeys.DROPDOWN,
+    prev: ProblemTypeKeys.SINGLESELECT,
+    template: basicOlxTemplates.multiSelect,
+  },
+  [ProblemTypeKeys.DROPDOWN]: {
+    title: 'Dropdown',
+    preview: dropdown,
+    previewDescription: 'Learners must select the correct answer from a list of possible options',
+    description: 'Enter your dropdown answers below and select which choice is correct. Learners must select one correct answer.',
+    helpLink: 'https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/exercises_tools/dropdown.html',
+    next: ProblemTypeKeys.NUMERIC,
+    prev: ProblemTypeKeys.MULTISELECT,
+    template: basicOlxTemplates.dropdown,
+  },
+  [ProblemTypeKeys.NUMERIC]: {
+    title: 'Numerical input',
+    preview: numericalInput,
+    previewDescription: 'Specify one or more correct numeric answers, submitted in a response field.',
+    description: 'Enter correct numerical input answers below. Learners must enter one correct answer.',
+    helpLink: 'https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/exercises_tools/numerical_input.html',
+    next: ProblemTypeKeys.TEXTINPUT,
+    prev: ProblemTypeKeys.DROPDOWN,
+    template: basicOlxTemplates.numeric,
+  },
+  [ProblemTypeKeys.TEXTINPUT]: {
+    title: 'Text input',
+    preview: textInput,
+    previewDescription: 'Specify one or more correct text answers, including numbers and special characters, submitted in a response field.',
+    description: 'Enter your text input answers below and select which choices are correct. Learners must enter one correct answer.',
+    helpLink: 'https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/exercises_tools/text_input.html',
+    prev: ProblemTypeKeys.NUMERIC,
+    next: ProblemTypeKeys.SINGLESELECT,
+    template: basicOlxTemplates.textInput,
+  },
+  [ProblemTypeKeys.ADVANCED]: {
+    title: 'Advanced Problem',
+    preview: ('<div />'),
+    description: 'An Advanced Problem Type',
+    helpLink: 'something.com',
+  },
+});
+
+export const AdvanceProblemKeys = StrictDict({
+  BLANK: 'blankadvanced',
+  CIRCUITSCHEMATIC: 'circuitschematic',
+  JSINPUT: 'jsinputresponse',
+  CUSTOMGRADER: 'customgrader',
+  IMAGE: 'imageresponse',
+  FORMULA: 'formularesponse',
+  PROBLEMWITHHINT: 'problemwithhint',
+} as const);
+export type AdvancedProblemType = typeof AdvanceProblemKeys[keyof typeof AdvanceProblemKeys];
+
+export function isAdvancedProblemType(pt: ProblemType | AdvancedProblemType): pt is AdvancedProblemType {
+  return Object.values(AdvanceProblemKeys).includes(pt as any);
+}
+
+export const AdvanceProblems = StrictDict({
+  [AdvanceProblemKeys.BLANK]: {
+    title: 'Blank problem',
+    status: '',
+    template: '<problem></problem>',
+  },
+  [AdvanceProblemKeys.CIRCUITSCHEMATIC]: {
+    title: 'Circuit schematic builder',
+    status: 'Not supported',
+    template: advancedOlxTemplates.circuitSchematic,
+  },
+  [AdvanceProblemKeys.JSINPUT]: {
+    title: 'Custom JavaScript display and grading',
+    status: '',
+    template: advancedOlxTemplates.jsInputResponse,
+  },
+  [AdvanceProblemKeys.CUSTOMGRADER]: {
+    title: 'Custom Python-evaluated input',
+    status: 'Provisional',
+    template: advancedOlxTemplates.customGrader,
+  },
+  [AdvanceProblemKeys.IMAGE]: {
+    title: 'Image mapped input',
+    status: 'Not supported',
+    template: advancedOlxTemplates.imageResponse,
+  },
+  [AdvanceProblemKeys.FORMULA]: {
+    title: 'Math expression input',
+    status: '',
+    template: advancedOlxTemplates.formulaResponse,
+  },
+  [AdvanceProblemKeys.PROBLEMWITHHINT]: {
+    title: 'Problem with adaptive hint',
+    status: 'Not supported',
+    template: advancedOlxTemplates.problemWithHint,
+  },
+} as const);
+
+export const ShowAnswerTypesKeys = StrictDict({
+  ALWAYS: 'always',
+  ANSWERED: 'answered',
+  ATTEMPTED: 'attempted',
+  CLOSED: 'closed',
+  FINISHED: 'finished',
+  CORRECT_OR_PAST_DUE: 'correct_or_past_due',
+  PAST_DUE: 'past_due',
+  NEVER: 'never',
+  AFTER_SOME_NUMBER_OF_ATTEMPTS: 'after_attempts',
+  AFTER_ALL_ATTEMPTS: 'after_all_attempts',
+  AFTER_ALL_ATTEMPTS_OR_CORRECT: 'after_all_attempts_or_correct',
+  ATTEMPTED_NO_PAST_DUE: 'attempted_no_past_due',
+} as const);
+
+export const ShowAnswerTypes = StrictDict({
+  [ShowAnswerTypesKeys.ALWAYS]: {
+    id: 'authoring.problemeditor.settings.showanswertype.always',
+    defaultMessage: 'Always',
+  },
+  [ShowAnswerTypesKeys.ANSWERED]: {
+    id: 'authoring.problemeditor.settings.showanswertype.answered',
+    defaultMessage: 'Answered',
+  },
+  [ShowAnswerTypesKeys.ATTEMPTED]: {
+    id: 'authoring.problemeditor.settings.showanswertype.attempted',
+    defaultMessage: 'Attempted or Past Due',
+  },
+  [ShowAnswerTypesKeys.CLOSED]: {
+    id: 'authoring.problemeditor.settings.showanswertype.closed',
+    defaultMessage: 'Closed',
+  },
+  [ShowAnswerTypesKeys.FINISHED]: {
+    id: 'authoring.problemeditor.settings.showanswertype.finished',
+    defaultMessage: 'Finished',
+  },
+  [ShowAnswerTypesKeys.CORRECT_OR_PAST_DUE]: {
+    id: 'authoring.problemeditor.settings.showanswertype.correct_or_past_due',
+    defaultMessage: 'Correct or Past Due',
+  },
+  [ShowAnswerTypesKeys.PAST_DUE]: {
+    id: 'authoring.problemeditor.settings.showanswertype.past_due',
+    defaultMessage: 'Past Due',
+  },
+  [ShowAnswerTypesKeys.NEVER]: {
+    id: 'authoring.problemeditor.settings.showanswertype.never',
+    defaultMessage: 'Never',
+  },
+  [ShowAnswerTypesKeys.AFTER_SOME_NUMBER_OF_ATTEMPTS]: {
+    id: 'authoring.problemeditor.settings.showanswertype.after_attempts',
+    defaultMessage: 'After Some Number of Attempts',
+  },
+  [ShowAnswerTypesKeys.AFTER_ALL_ATTEMPTS]: {
+    id: 'authoring.problemeditor.settings.showanswertype.after_all_attempts',
+    defaultMessage: 'After All Attempts',
+  },
+  [ShowAnswerTypesKeys.AFTER_ALL_ATTEMPTS_OR_CORRECT]: {
+    id: 'authoring.problemeditor.settings.showanswertype.after_all_attempts_or_correct',
+    defaultMessage: 'After All Attempts or Correct',
+  },
+  [ShowAnswerTypesKeys.ATTEMPTED_NO_PAST_DUE]: {
+    id: 'authoring.problemeditor.settings.showanswertype.attempted_no_past_due',
+    defaultMessage: 'Attempted',
+  },
+} as const);
+
+export const RandomizationTypesKeys = StrictDict({
+  NEVER: 'never',
+  ALWAYS: 'always',
+  ONRESET: 'onreset',
+  PERSTUDENT: 'per_student',
+} as const);
+
+export const RandomizationTypes = StrictDict({
+  [RandomizationTypesKeys.ALWAYS]: {
+    id: 'authoring.problemeditor.settings.RandomizationTypes.always',
+    defaultMessage: 'Always',
+  },
+  [RandomizationTypesKeys.NEVER]: {
+    id: 'authoring.problemeditor.settings.RandomizationTypes.never',
+    defaultMessage: 'Never',
+  },
+  [RandomizationTypesKeys.ONRESET]: {
+    id: 'authoring.problemeditor.settings.RandomizationTypes.onreset',
+    defaultMessage: 'On Reset',
+  },
+  [RandomizationTypesKeys.PERSTUDENT]: {
+    id: 'authoring.problemeditor.settings.RandomizationTypes.perstudent',
+    defaultMessage: 'Per Student',
+  },
+} as const);
+
+export const RichTextProblems = [ProblemTypeKeys.SINGLESELECT, ProblemTypeKeys.MULTISELECT] as const;
+
+export const settingsOlxAttributes = [
+  '@_display_name',
+  '@_weight',
+  '@_max_attempts',
+  '@_showanswer',
+  '@_show_reset_button',
+  '@_submission_wait_seconds',
+  '@_attempts_before_showanswer_button',
+] as const;
+
+export const ignoredOlxAttributes = [
+  // '@_markdown',  // Not sure if this is safe to ignore; some tests seem to indicate it's not.
+  '@_url_name',
+  '@_x-is-pointer-node',
+] as const;
diff --git a/src/editors/data/constants/requests.ts b/src/editors/data/constants/requests.ts
new file mode 100644
index 0000000000..e12905d588
--- /dev/null
+++ b/src/editors/data/constants/requests.ts
@@ -0,0 +1,30 @@
+import { StrictDict } from '../../utils';
+
+export const RequestStates = StrictDict({
+  inactive: 'inactive',
+  pending: 'pending',
+  completed: 'completed',
+  failed: 'failed',
+} as const);
+
+export const RequestKeys = StrictDict({
+  fetchVideos: 'fetchVideos',
+  fetchBlock: 'fetchBlock',
+  fetchImages: 'fetchImages',
+  fetchUnit: 'fetchUnit',
+  fetchStudioView: 'fetchStudioView',
+  saveBlock: 'saveBlock',
+  uploadVideo: 'uploadVideo',
+  allowThumbnailUpload: 'allowThumbnailUpload',
+  uploadThumbnail: 'uploadThumbnail',
+  uploadTranscript: 'uploadTranscript',
+  deleteTranscript: 'deleteTranscript',
+  fetchCourseDetails: 'fetchCourseDetails',
+  updateTranscriptLanguage: 'updateTranscriptLanguage',
+  getTranscriptFile: 'getTranscriptFile',
+  checkTranscriptsForImport: 'checkTranscriptsForImport',
+  importTranscript: 'importTranscript',
+  uploadAsset: 'uploadAsset',
+  fetchAdvancedSettings: 'fetchAdvancedSettings',
+  fetchVideoFeatures: 'fetchVideoFeatures',
+} as const);
diff --git a/src/editors/data/constants/tinyMCE.js b/src/editors/data/constants/tinyMCE.js
new file mode 100644
index 0000000000..a6e40203a5
--- /dev/null
+++ b/src/editors/data/constants/tinyMCE.js
@@ -0,0 +1,76 @@
+import { StrictDict } from '../../utils';
+
+const listKeyStore = (list) => StrictDict(
+  list.reduce((obj, val) => ({ ...obj, [val]: val }), {}),
+);
+
+export const commands = StrictDict({
+  insertContent: 'mceInsertContent',
+});
+
+export const buttons = StrictDict({
+  addImageButton: 'addimagebutton',
+  blockQuote: 'blockquote',
+  codeBlock: 'codeBlock',
+  align: StrictDict({
+    center: 'aligncenter',
+    justify: 'alignjustify',
+    left: 'alignleft',
+    right: 'alignright',
+  }),
+  foreColor: 'forecolor',
+  backColor: 'backcolor',
+  bold: 'bold',
+  bullist: 'bullist',
+  charmap: 'charmap',
+  code: 'code-modified', // use a custom button name, consistently, for our text-only button
+  codesample: 'codesample',
+  customLabelButton: 'customLabelButton',
+  editImageSettings: 'editimagesettings',
+  emoticons: 'emoticons',
+  flip: StrictDict({
+    vert: 'flipv',
+    horiz: 'fliph',
+  }),
+  formatSelect: 'formatSelect',
+  hr: 'hr',
+  imageUploadButton: 'imageuploadbutton',
+  indent: 'indent',
+  italic: 'italic',
+  link: 'link',
+  unlink: 'unlink',
+  numlist: 'numlist',
+  outdent: 'outdent',
+  redo: 'redo',
+  removeFormat: 'removeformat',
+  rotate: StrictDict({
+    left: 'rotateleft',
+    right: 'rotateright',
+  }),
+  quickLink: 'quicklink',
+  table: 'table',
+  undo: 'undo',
+  underline: 'underline',
+  a11ycheck: 'a11ycheck',
+  embediframe: 'embediframe',
+});
+
+export const plugins = listKeyStore([
+  'link',
+  'lists',
+  'codesample',
+  'emoticons',
+  'table',
+  'hr',
+  'charmap',
+  'code',
+  'autoresize',
+  'image',
+  'imagetools',
+  'quickbars',
+  'a11ychecker',
+  'powerpaste',
+  'embediframe',
+]);
+
+export const textToSpeechIcon = '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.5 22C3.08333 22 2.72917 21.8542 2.4375 21.5625C2.14583 21.2708 2 20.9167 2 20.5V3.5C2 3.08333 2.14583 2.72917 2.4375 2.4375C2.72917 2.14583 3.08333 2 3.5 2H13L11.5 3.5H3.5V20.5H15.5V17H17V20.5C17 20.9167 16.8542 21.2708 16.5625 21.5625C16.2708 21.8542 15.9167 22 15.5 22H3.5ZM6 17.75V16.25H13V17.75H6ZM6 14.75V13.25H11V14.75H6ZM15.5 15L11.5 11H8V6H11.5L15.5 2V15ZM17 12.7V4.05C17.9333 4.4 18.6667 5.01667 19.2 5.9C19.7333 6.78333 20 7.65 20 8.5C20 9.35 19.7083 10.1917 19.125 11.025C18.5417 11.8583 17.8333 12.4167 17 12.7ZM17 16.25V14.7C18.1667 14.2833 19.2083 13.5333 20.125 12.45C21.0417 11.3667 21.5 10.05 21.5 8.5C21.5 6.95 21.0417 5.63333 20.125 4.55C19.2083 3.46667 18.1667 2.71667 17 2.3V0.75C18.7 1.2 20.125 2.1375 21.275 3.5625C22.425 4.9875 23 6.63333 23 8.5C23 10.3667 22.425 12.0125 21.275 13.4375C20.125 14.8625 18.7 15.8 17 16.25Z" fill="black"/></svg>';
diff --git a/src/editors/data/constants/tinyMCEStyles.js b/src/editors/data/constants/tinyMCEStyles.js
new file mode 100644
index 0000000000..52cb0208e1
--- /dev/null
+++ b/src/editors/data/constants/tinyMCEStyles.js
@@ -0,0 +1,235 @@
+const getStyles = () => (
+  `@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600;1,700&display=swap");
+
+  .mce-content-body *[contentEditable=false] {
+    cursor: default;
+  }
+  .mce-content-body *[contentEditable=true] {
+    cursor: text;
+  }
+  .mce-content-body div.mce-resizehandle {
+    background-color: #4099ff;
+    border-color: #4099ff;
+    border-style: solid;
+    border-width: 1px;
+    box-sizing: border-box;
+    height: 10px;
+    position: absolute;
+    width: 10px;
+    z-index: 1298;
+  }
+  .mce-content-body div.mce-resizehandle:hover {
+    background-color: #4099ff;
+  }
+  .mce-content-body div.mce-resizehandle:nth-of-type(1) {
+    cursor: nwse-resize;
+  }
+  .mce-content-body div.mce-resizehandle:nth-of-type(2) {
+    cursor: nesw-resize;
+  }
+  .mce-content-body div.mce-resizehandle:nth-of-type(3) {
+    cursor: nwse-resize;
+  }
+  .mce-content-body div.mce-resizehandle:nth-of-type(4) {
+    cursor: nesw-resize;
+  }
+  .mce-content-body .mce-resize-backdrop {
+    z-index: 10000;
+  }
+  .mce-content-body .mce-clonedresizable {
+    cursor: default;
+    opacity: 0.5;
+    outline: 1px dashed black;
+    position: absolute;
+    z-index: 10001;
+  }
+  .mce-content-body .mce-clonedresizable.mce-resizetable-columns th,
+  .mce-content-body .mce-clonedresizable.mce-resizetable-columns td {
+    border: 0;
+  }
+  .mce-content-body .mce-resize-helper {
+    background: #555;
+    background: rgba(0, 0, 0, 0.75);
+    border: 1px;
+    border-radius: 3px;
+    color: white;
+    display: none;
+    font-family: sans-serif;
+    font-size: 12px;
+    line-height: 14px;
+    margin: 5px 10px;
+    padding: 5px;
+    position: absolute;
+    white-space: nowrap;
+    z-index: 10002;
+  }
+  .mce-content-body img[data-mce-selected],
+  .mce-content-body video[data-mce-selected],
+  .mce-content-body audio[data-mce-selected],
+  .mce-content-body object[data-mce-selected],
+  .mce-content-body embed[data-mce-selected],
+  .mce-content-body table[data-mce-selected] {
+    outline: 3px solid #b4d7ff;
+  }
+  .mce-content-body *[contentEditable=false] *[contentEditable=true]:focus {
+    outline: 3px solid #b4d7ff;
+  }
+  .mce-content-body *[contentEditable=false] *[contentEditable=true]:hover {
+    outline: 3px solid #b4d7ff;
+  }
+  .mce-content-body *[contentEditable=false][data-mce-selected] {
+    cursor: not-allowed;
+    outline: 3px solid #b4d7ff;
+  }
+  .mce-content-body.mce-content-readonly *[contentEditable=true]:focus,
+  .mce-content-body.mce-content-readonly *[contentEditable=true]:hover {
+    outline: none;
+  }
+  .mce-content-body *[data-mce-selected="inline-boundary"] {
+    background-color: #b4d7ff;
+  }
+  .mce-content-body .mce-edit-focus {
+    outline: 3px solid #b4d7ff;
+  }
+  .mce-content-body img::-moz-selection {
+    background: none;
+  }
+  .mce-content-body img::selection {
+    background: none;
+  }
+  .mce-content-body {
+      padding: 0;
+      background-color: #fff;
+      font-family: 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
+      font-size: 16px;
+      line-height: 1.6;
+      color: #3c3c3c;
+      scrollbar-3dlight-color: #F0F0EE;
+      scrollbar-arrow-color: #676662;
+      scrollbar-base-color: #F0F0EE;
+      scrollbar-darkshadow-color: #DDDDDD;
+      scrollbar-face-color: #E0E0DD;
+      scrollbar-highlight-color: #F0F0EE;
+      scrollbar-shadow-color: #F0F0EE;
+      scrollbar-track-color: #F5F5F5;
+  }
+  .mce-content-body h1,
+  .mce-content-body .hd-1 {
+      color: #3c3c3c;
+      font-weight: normal;
+      font-size: 2em;
+      line-height: 1.4em;
+      margin: 0 0 1.41575em 0;
+      text-transform: initial;
+  }
+  .mce-content-body h2,
+  .mce-content-body .hd-2 {
+      letter-spacing: 1px;
+      margin-bottom: 15px;
+      color: #646464;
+      font-weight: 300;
+      font-size: 1.2em;
+      line-height: 1.2em;
+      text-transform: initial;
+  }
+  .mce-content-body h3,
+  .mce-content-body .hd-3 {
+    margin: 0 0 10px 0;
+    font-size: 1.1125em;
+    font-weight: 400;
+    text-transform: initial;
+  }
+  .mce-content-body .hd-3,
+  .mce-content-body h4,
+  .mce-content-body .hd-4,
+  .mce-content-body h5,
+  .mce-content-body .hd-5,
+  .mce-content-body h6,
+  .mce-content-body .hd-6 {
+      margin: 0 0 10px 0;
+      font-weight: 600;
+  }
+  .mce-content-body h4,
+  .mce-content-body .hd-4 {
+    font-size: 1em;
+  }
+  .mce-content-body h5,
+  .mce-content-body .hd-5 {
+      font-size: 0.83em;
+  }
+  .mce-content-body h6,
+  .mce-content-body .hd-6 {
+      font-size: 0.75em;
+  }
+  .mce-content-body p {
+      margin-bottom: 1.416em;
+      margin-top: 0;
+      font-size: 1em;
+      line-height: 1.6em !important;
+      color: #3c3c3c;
+  }
+  .mce-content-body em, .mce-content-body i {
+      font-style: italic;
+  }
+  .mce-content-body strong, .mce-content-body b {
+      font-weight: bold;
+  }
+  .mce-content-body p + p, .mce-content-body ul + p, .mce-content-body ol + p {
+      margin-top: 20px;
+  }
+  .mce-content-body ol, .mce-content-body ul {
+      margin: 1em 0;
+      padding: 0 0 0 1em;
+      color: #3c3c3c;
+  }
+  .mce-content-body ol li, .mce-content-body ul li {
+      margin-bottom: 0.708em;
+  }
+  .mce-content-body ol {
+      list-style: decimal outside none;
+      margin: 0;
+  }
+  .mce-content-body ul {
+      list-style: disc outside none;
+      margin: 0;
+  }
+  .mce-content-body a, .mce-content-body a:link, .mce-content-body a:visited, .mce-content-body a:hover, .mce-content-body a:active {
+      color: #0075b4;
+      text-decoration: none;
+  }
+  .mce-content-body img {
+      max-width: 100%;
+  }
+  .mce-content-body pre {
+    margin: 1em 0;
+    color: #3c3c3c;
+    font-family: monospace, serif;
+    font-size: 1em;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+  }
+  .mce-content-body code {
+      font-family: monospace, serif;
+      background: none;
+      color: #3c3c3c;
+      padding: 0;
+  }
+  .mce-content-body[data-mce-placeholder] {
+    position: relative;
+  }
+  .mce-content-body[data-mce-placeholder]:not(.mce-visualblocks)::before {
+    color: rgba(34, 47, 62, 0.7);
+    content: attr(data-mce-placeholder);
+    position: absolute;
+  }
+  .mce-content-body:not([dir=rtl])[data-mce-placeholder]:not(.mce-visualblocks)::before {
+    margin: 0;
+  }
+  .mce-content-body[dir=rtl][data-mce-placeholder]:not(.mce-visualblocks)::before {
+    margin: 0;
+  }`
+);
+
+export { getStyles };
+
+export default getStyles({});
diff --git a/src/editors/data/constants/video.js b/src/editors/data/constants/video.js
new file mode 100644
index 0000000000..198afc7076
--- /dev/null
+++ b/src/editors/data/constants/video.js
@@ -0,0 +1,217 @@
+import { StrictDict } from '../../utils';
+
+export const videoTranscriptLanguages = StrictDict({
+  placeholder: '',
+  aa: 'Afar',
+  ab: 'Abkhazian',
+  af: 'Afrikaans',
+  ak: 'Akan',
+  sq: 'Albanian',
+  am: 'Amharic',
+  ar: 'Arabic',
+  an: 'Aragonese',
+  hy: 'Armenian',
+  as: 'Assamese',
+  av: 'Avaric',
+  ae: 'Avestan',
+  ay: 'Aymara',
+  az: 'Azerbaijani',
+  ba: 'Bashkir',
+  bm: 'Bambara',
+  eu: 'Basque',
+  be: 'Belarusian',
+  bn: 'Bengali',
+  bh: 'Bihari languages',
+  bi: 'Bislama',
+  bs: 'Bosnian',
+  br: 'Breton',
+  bg: 'Bulgarian',
+  my: 'Burmese',
+  ca: 'Catalan',
+  ch: 'Chamorro',
+  ce: 'Chechen',
+  zh: 'Chinese',
+  zh_HANS: 'Simplified Chinese',
+  zh_HANT: 'Traditional Chinese',
+  cu: 'Church Slavic',
+  cv: 'Chuvash',
+  kw: 'Cornish',
+  co: 'Corsican',
+  cr: 'Cree',
+  cs: 'Czech',
+  da: 'Danish',
+  dv: 'Divehi',
+  nl: 'Dutch',
+  dz: 'Dzongkha',
+  en: 'English',
+  eo: 'Esperanto',
+  et: 'Estonian',
+  ee: 'Ewe',
+  fo: 'Faroese',
+  fj: 'Fijian',
+  fi: 'Finnish',
+  fr: 'French',
+  fy: 'Western Frisian',
+  ff: 'Fulah',
+  ka: 'Georgian',
+  de: 'German',
+  gd: 'Gaelic',
+  ga: 'Irish',
+  gl: 'Galician',
+  gv: 'Manx',
+  el: 'Greek',
+  gn: 'Guarani',
+  gu: 'Gujarati',
+  ht: 'Haitian',
+  ha: 'Hausa',
+  he: 'Hebrew',
+  hz: 'Herero',
+  hi: 'Hindi',
+  ho: 'Hiri Motu',
+  hr: 'Croatian',
+  hu: 'Hungarian',
+  ig: 'Igbo',
+  is: 'Icelandic',
+  io: 'Ido',
+  ii: 'Sichuan Yi',
+  iu: 'Inuktitut',
+  ie: 'Interlingue',
+  ia: 'Interlingua',
+  id: 'Indonesian',
+  ik: 'Inupiaq',
+  it: 'Italian',
+  jv: 'Javanese',
+  ja: 'Japanese',
+  kl: 'Kalaallisut',
+  kn: 'Kannada',
+  ks: 'Kashmiri',
+  kr: 'Kanuri',
+  kk: 'Kazakh',
+  km: 'Central Khmer',
+  ki: 'Kikuyu',
+  rw: 'Kinyarwanda',
+  ky: 'Kirghiz',
+  kv: 'Komi',
+  kg: 'Kongo',
+  ko: 'Korean',
+  kj: 'Kuanyama',
+  ku: 'Kurdish',
+  lo: 'Lao',
+  la: 'Latin',
+  lv: 'Latvian',
+  li: 'Limburgan',
+  ln: 'Lingala',
+  lt: 'Lithuanian',
+  lb: 'Luxembourgish',
+  lu: 'Luba-Katanga',
+  lg: 'Ganda',
+  mk: 'Macedonian',
+  mh: 'Marshallese',
+  ml: 'Malayalam',
+  mi: 'Maori',
+  mr: 'Marathi',
+  ms: 'Malay',
+  mg: 'Malagasy',
+  mt: 'Maltese',
+  mn: 'Mongolian',
+  na: 'Nauru',
+  nv: 'Navajo',
+  nr: 'Ndebele: South',
+  nd: 'Ndebele: North',
+  ng: 'Ndonga',
+  ne: 'Nepali',
+  nn: 'Norwegian Nynorsk',
+  nb: 'Bokmål: Norwegian',
+  no: 'Norwegian',
+  ny: 'Chichewa',
+  oc: 'Occitan',
+  oj: 'Ojibwa',
+  or: 'Oriya',
+  om: 'Oromo',
+  os: 'Ossetian',
+  pa: 'Panjabi',
+  fa: 'Persian',
+  pi: 'Pali',
+  pl: 'Polish',
+  pt: 'Portuguese',
+  ps: 'Pushto',
+  qu: 'Quechua',
+  rm: 'Romansh',
+  ro: 'Romanian',
+  rn: 'Rundi',
+  ru: 'Russian',
+  sg: 'Sango',
+  sa: 'Sanskrit',
+  si: 'Sinhala',
+  sk: 'Slovak',
+  sl: 'Slovenian',
+  se: 'Northern Sami',
+  sm: 'Samoan',
+  sn: 'Shona',
+  sd: 'Sindhi',
+  so: 'Somali',
+  st: 'Sotho: Southern',
+  es: 'Spanish',
+  sc: 'Sardinian',
+  sr: 'Serbian',
+  ss: 'Swati',
+  su: 'Sundanese',
+  sw: 'Swahili',
+  sv: 'Swedish',
+  ty: 'Tahitian',
+  ta: 'Tamil',
+  tt: 'Tatar',
+  te: 'Telugu',
+  tg: 'Tajik',
+  tl: 'Tagalog',
+  th: 'Thai',
+  bo: 'Tibetan',
+  ti: 'Tigrinya',
+  to: 'Tonga (Tonga Islands)',
+  tn: 'Tswana',
+  ts: 'Tsonga',
+  tk: 'Turkmen',
+  tr: 'Turkish',
+  tw: 'Twi',
+  ug: 'Uighur',
+  uk: 'Ukrainian',
+  ur: 'Urdu',
+  uz: 'Uzbek',
+  ve: 'Venda',
+  vi: 'Vietnamese',
+  vo: 'Volapük',
+  cy: 'Welsh',
+  wa: 'Walloon',
+  wo: 'Wolof',
+  xh: 'Xhosa',
+  yi: 'Yiddish',
+  yo: 'Yoruba',
+  za: 'Zhuang',
+  zu: 'Zulu',
+});
+
+export const in8lTranscriptLanguages = (intl) => {
+  const messageLookup = {};
+  // for tests and non-internationlized setups, return en
+  if (!intl?.formatMessage) {
+    return videoTranscriptLanguages;
+  }
+  Object.keys(videoTranscriptLanguages).forEach((code) => {
+    messageLookup[code] = intl.formatMessage({
+      id: `authoring.videoeditor.transcripts.language.${code}`,
+      defaultMessage: videoTranscriptLanguages[code],
+      description: `Name of Language called in English ${videoTranscriptLanguages[code]}`,
+    });
+  });
+  return messageLookup;
+};
+
+export const timeKeys = StrictDict({
+  startTime: 'startTime',
+  stopTime: 'stopTime',
+});
+
+export default {
+  timeKeys,
+  videoTranscriptLanguages,
+};
diff --git a/src/editors/data/images/dropdown.png b/src/editors/data/images/dropdown.png
new file mode 100644
index 0000000000..9fcf029495
Binary files /dev/null and b/src/editors/data/images/dropdown.png differ
diff --git a/src/editors/data/images/multiSelect.png b/src/editors/data/images/multiSelect.png
new file mode 100644
index 0000000000..065716214a
Binary files /dev/null and b/src/editors/data/images/multiSelect.png differ
diff --git a/src/editors/data/images/numericalInput.png b/src/editors/data/images/numericalInput.png
new file mode 100644
index 0000000000..535631d3b6
Binary files /dev/null and b/src/editors/data/images/numericalInput.png differ
diff --git a/src/editors/data/images/singleSelect.png b/src/editors/data/images/singleSelect.png
new file mode 100644
index 0000000000..33fe718310
Binary files /dev/null and b/src/editors/data/images/singleSelect.png differ
diff --git a/src/editors/data/images/textInput.png b/src/editors/data/images/textInput.png
new file mode 100644
index 0000000000..39c3d92252
Binary files /dev/null and b/src/editors/data/images/textInput.png differ
diff --git a/src/editors/data/images/videoThumbnail.svg b/src/editors/data/images/videoThumbnail.svg
new file mode 100644
index 0000000000..82790d0061
--- /dev/null
+++ b/src/editors/data/images/videoThumbnail.svg
@@ -0,0 +1,3 @@
+<svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.4111 10.6847V21.3514H7.0778V10.6847H20.4111ZM21.7445 8.01807H5.74447C5.01113 8.01807 4.41113 8.61807 4.41113 9.3514V22.6847C4.41113 23.4181 5.01113 24.0181 5.74447 24.0181H21.7445C22.4778 24.0181 23.0778 23.4181 23.0778 22.6847V18.0181L28.4111 23.3514V8.68473L23.0778 14.0181V9.3514C23.0778 8.61807 22.4778 8.01807 21.7445 8.01807Z" fill="#707070"/>
+</svg>
diff --git a/src/editors/data/redux/app/index.ts b/src/editors/data/redux/app/index.ts
new file mode 100644
index 0000000000..8abd5f91d9
--- /dev/null
+++ b/src/editors/data/redux/app/index.ts
@@ -0,0 +1,2 @@
+export { actions, reducer } from './reducer';
+export { default as selectors } from './selectors';
diff --git a/src/editors/data/redux/app/reducer.test.js b/src/editors/data/redux/app/reducer.test.js
new file mode 100644
index 0000000000..67f613ab76
--- /dev/null
+++ b/src/editors/data/redux/app/reducer.test.js
@@ -0,0 +1,92 @@
+import { initialState, actions, reducer } from './reducer';
+
+const testingState = {
+  ...initialState,
+  arbitraryField: 'arbitrary',
+};
+
+describe('app reducer', () => {
+  it('has initial state', () => {
+    expect(reducer(undefined, {})).toEqual(initialState);
+  });
+
+  const testValue = 'roll for initiative';
+
+  describe('handling actions', () => {
+    describe('initialize', () => {
+      it('loads initial input fields into the store', () => {
+        const data = {
+          studioEndpointUrl: 'testURL',
+          lmsEndpointUrl: 'sOmEOtherTestuRl',
+          blockId: 'anID',
+          learningContextId: 'OTHERid',
+          blockType: 'someTYPE',
+        };
+        expect(reducer(
+          testingState,
+          actions.initialize({ ...data, other: 'field' }),
+        )).toEqual({
+          ...testingState,
+          ...data,
+        });
+      });
+    });
+    const setterTest = (action, target) => {
+      describe(action, () => {
+        it(`load ${target} from payload`, () => {
+          expect(reducer(testingState, actions[action](testValue))).toEqual({
+            ...testingState,
+            [target]: testValue,
+          });
+        });
+      });
+    };
+    [
+      ['setUnitUrl', 'unitUrl'],
+      ['setStudioView', 'studioView'],
+      ['setBlockContent', 'blockContent'],
+      ['setBlockId', 'blockId'],
+      ['setBlockTitle', 'blockTitle'],
+      ['setSaveResponse', 'saveResponse'],
+      ['setVideos', 'videos'],
+      ['setCourseDetails', 'courseDetails'],
+    ].map(args => setterTest(...args));
+    describe('setShowRawEditor', () => {
+      it('sets showRawEditor', () => {
+        const blockValue = { data: { metadata: { editor: 'raw' } } };
+        expect(reducer(testingState, actions.setShowRawEditor(blockValue))).toEqual({
+          ...testingState,
+          showRawEditor: true,
+        });
+      });
+    });
+    describe('setBlockValue', () => {
+      it('sets blockValue, as well as setting the blockTitle from data.display_name', () => {
+        const blockValue = { data: { display_name: 'my test name' }, other: 'data' };
+        expect(reducer(testingState, actions.setBlockValue(blockValue))).toEqual({
+          ...testingState,
+          blockValue,
+          blockTitle: blockValue.data.display_name,
+        });
+      });
+    });
+    describe('setImages', () => {
+      it('sets images, as well as setting imageCount', () => {
+        const imageData = { images: { id1: { id: 'id1' } }, imageCount: 1 };
+        expect(reducer(testingState, actions.setImages(imageData))).toEqual({
+          ...testingState,
+          images: imageData.images,
+          imageCount: imageData.imageCount,
+        });
+      });
+    });
+    describe('initializeEditor', () => {
+      it('sets editorInitialized to true', () => {
+        expect(reducer(testingState, actions.initializeEditor())).toEqual({
+          ...testingState,
+          editorInitialized: true,
+        });
+      });
+    });
+  });
+});
diff --git a/src/editors/data/redux/app/reducer.ts b/src/editors/data/redux/app/reducer.ts
new file mode 100644
index 0000000000..d53579250c
--- /dev/null
+++ b/src/editors/data/redux/app/reducer.ts
@@ -0,0 +1,75 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+import type { EditorState } from '..';
+import { StrictDict } from '../../../utils';
+
+const initialState: EditorState['app'] = {
+  blockValue: null,
+  unitUrl: null,
+  blockContent: null,
+  studioView: null,
+  saveResponse: null,
+  blockId: null,
+  blockTitle: null,
+  blockType: null,
+  learningContextId: null,
+  editorInitialized: false,
+  studioEndpointUrl: null,
+  lmsEndpointUrl: null,
+  images: {},
+  imageCount: 0,
+  videos: {},
+  courseDetails: {},
+  showRawEditor: false,
+};
+
+// eslint-disable-next-line no-unused-vars
+const app = createSlice({
+  name: 'app',
+  initialState,
+  reducers: {
+    initialize: (state, { payload }) => ({
+      ...state,
+      studioEndpointUrl: payload.studioEndpointUrl,
+      lmsEndpointUrl: payload.lmsEndpointUrl,
+      blockId: payload.blockId,
+      learningContextId: payload.learningContextId,
+      blockType: payload.blockType,
+      blockValue: null,
+    }),
+    setUnitUrl: (state, { payload }) => ({ ...state, unitUrl: payload }),
+    setBlockValue: (state, { payload }) => ({
+      ...state,
+      blockValue: payload,
+      blockTitle: payload.data.display_name,
+    }),
+    setBlockId: (state, { payload }) => ({ ...state, blockId: payload }),
+    setStudioView: (state, { payload }) => ({ ...state, studioView: payload }),
+    setBlockContent: (state, { payload }) => ({ ...state, blockContent: payload }),
+    setBlockTitle: (state, { payload }) => ({ ...state, blockTitle: payload }),
+    setSaveResponse: (state, { payload }) => ({ ...state, saveResponse: payload }),
+    initializeEditor: (state) => ({ ...state, editorInitialized: true }),
+    setImages: (state, { payload }) => ({
+      ...state,
+      images: { ...state.images, ...payload.images },
+      imageCount: payload.imageCount,
+    }),
+    resetImages: (state) => ({ ...state, images: {}, imageCount: 0 }),
+    setVideos: (state, { payload }) => ({ ...state, videos: payload }),
+    setCourseDetails: (state, { payload }) => ({ ...state, courseDetails: payload }),
+    setShowRawEditor: (state, { payload }) => ({
+      ...state,
+      showRawEditor: payload.data?.metadata?.editor === 'raw',
+    }),
+  },
+});
+
+const actions = StrictDict(app.actions);
+
+const { reducer } = app;
+
+export {
+  actions,
+  initialState,
+  reducer,
+};
diff --git a/src/editors/data/redux/app/selectors.test.ts b/src/editors/data/redux/app/selectors.test.ts
new file mode 100644
index 0000000000..b380deca4f
--- /dev/null
+++ b/src/editors/data/redux/app/selectors.test.ts
@@ -0,0 +1,187 @@
+import type { EditorState } from '..';
+import { keyStore } from '../../../utils';
+// import * in order to mock in-file references
+import * as urls from '../../services/cms/urls';
+import * as selectors from './selectors';
+
+jest.mock('../../services/cms/urls', () => ({
+  returnUrl: (args) => ({ returnUrl: args }),
+}));
+
+const testState = { some: 'arbitraryValue' };
+const testValue = 'my VALUE';
+
+describe('app selectors unit tests', () => {
+  const {
+    appSelector,
+    simpleSelectors,
+  } = selectors;
+  describe('appSelector', () => {
+    it('returns the app data', () => {
+      expect(appSelector({ ...testState, app: testValue } as any as EditorState)).toEqual(testValue);
+    });
+  });
+  describe('simpleSelectors', () => {
+    const testSimpleSelector = (key) => {
+      test(`${key} simpleSelector returns its value from the app store`, () => {
+        const { dependencies, resultFunc: cb } = simpleSelectors[key];
+        expect(dependencies).toEqual([appSelector]);
+        expect(cb({ ...testState, [key]: testValue })).toEqual(testValue);
+      });
+    };
+    const simpleKeys = keyStore(simpleSelectors);
+    describe('simple selectors link their values from app store', () => {
+      [
+        simpleKeys.blockContent,
+        simpleKeys.blockId,
+        simpleKeys.blockTitle,
+        simpleKeys.blockType,
+        simpleKeys.blockValue,
+        simpleKeys.learningContextId,
+        simpleKeys.editorInitialized,
+        simpleKeys.saveResponse,
+        simpleKeys.lmsEndpointUrl,
+        simpleKeys.studioEndpointUrl,
+        simpleKeys.unitUrl,
+        simpleKeys.blockTitle,
+        simpleKeys.studioView,
+        simpleKeys.images,
+        simpleKeys.videos,
+        simpleKeys.showRawEditor,
+      ].map(testSimpleSelector);
+    });
+  });
+  describe('returnUrl', () => {
+    it('is memoized based on unitUrl and studioEndpointUrl', () => {
+      expect(selectors.returnUrl.dependencies).toEqual([
+        simpleSelectors.unitUrl,
+        simpleSelectors.studioEndpointUrl,
+        simpleSelectors.learningContextId,
+        simpleSelectors.blockId,
+      ]);
+    });
+    it('returns urls.returnUrl with the returnUrl', () => {
+      const { resultFunc: cb } = selectors.returnUrl;
+      const studioEndpointUrl = 'baseURL';
+      const unitUrl = {
+        data: {
+          ancestors: [
+            {
+              id: 'unit id', display_name: 'Unit', category: 'vertical' as const, has_children: true,
+            }],
+        },
+      };
+      const learningContextId = 'some learning context';
+      const blockId = 'block-v1 some v1 block id';
+      expect(
+        cb(unitUrl, studioEndpointUrl, learningContextId, blockId),
+      ).toEqual(
+        urls.returnUrl({
+          unitUrl, studioEndpointUrl, learningContextId, blockId,
+        }),
+      );
+    });
+  });
+  describe('isInitialized selector', () => {
+    it('is memoized based on editorInitialized, unitUrl, isLibrary and blockValue', () => {
+      expect(selectors.isInitialized.dependencies).toEqual([
+        simpleSelectors.unitUrl,
+        simpleSelectors.blockValue,
+        selectors.isLibrary,
+      ]);
+    });
+    describe('for library blocks', () => {
+      it('returns true if blockValue, and editorInitialized are truthy', () => {
+        const { resultFunc: cb } = selectors.isInitialized;
+        const truthy = {
+          blockValue: { block: 'value' },
+        };
+
+        [
+          [[null, truthy.blockValue, true] as [any, any, any], true] as const,
+          [[null, null, true] as [any, any, any], false] as const,
+        ].map(([args, expected]) => expect(cb(...args)).toEqual(expected));
+      });
+    });
+    describe('for course blocks', () => {
+      it('returns true if blockValue, unitUrl, and editorInitialized are truthy', () => {
+        const { resultFunc: cb } = selectors.isInitialized;
+        const truthy = {
+          blockValue: { block: 'value' },
+          unitUrl: { url: 'data' },
+        };
+
+        [
+          [[null, truthy.blockValue, false] as [any, any, any], false] as const,
+          [[truthy.unitUrl, null, false] as [any, any, any], false] as const,
+          [[truthy.unitUrl, truthy.blockValue, false] as [any, any, any], true] as const,
+        ].map(([args, expected]) => expect(cb(...args)).toEqual(expected));
+      });
+    });
+  });
+  describe('displayTitle', () => {
+    const title = 'tItLe';
+    it('is memoized based on blockType and blockTitle', () => {
+      expect(selectors.displayTitle.dependencies).toEqual([
+        simpleSelectors.blockType,
+        simpleSelectors.blockTitle,
+      ]);
+    });
+    it('returns null if blockType is null', () => {
+      expect(selectors.displayTitle.resultFunc(null, title)).toEqual(null);
+    });
+    it('returns blockTitle if blockTitle is not null', () => {
+      expect(selectors.displayTitle.resultFunc('html', title)).toEqual(title);
+    });
+    it('returns Text if the blockType is html', () => {
+      expect(selectors.displayTitle.resultFunc('html', null)).toEqual('Text');
+    });
+    it('returns the blockType capitalized if not html', () => {
+      expect(selectors.displayTitle.resultFunc('video', null)).toEqual('Video');
+      expect(selectors.displayTitle.resultFunc('random', null)).toEqual('Random');
+    });
+  });
+
+  describe('isLibrary', () => {
+    const learningContextIdLibrary = 'library-v1:name';
+    const learningContextIdCourse = 'course-v1:name';
+    it('is memoized based on isLibrary', () => {
+      expect(selectors.isLibrary.dependencies).toEqual([
+        simpleSelectors.learningContextId,
+        simpleSelectors.blockId,
+      ]);
+    });
+    describe('blockId is null', () => {
+      it('should return false when learningContextId null', () => {
+        expect(selectors.isLibrary.resultFunc(null, null)).toEqual(false);
+      });
+      it('should return false when learningContextId defined', () => {
+        expect(selectors.isLibrary.resultFunc(learningContextIdCourse, null)).toEqual(false);
+      });
+    });
+    describe('blockId is a course block', () => {
+      it('should return false when learningContextId null', () => {
+        expect(selectors.isLibrary.resultFunc(null, 'block-v1:')).toEqual(false);
+      });
+      it('should return false when learningContextId defined', () => {
+        expect(selectors.isLibrary.resultFunc(learningContextIdCourse, 'block-v1:')).toEqual(false);
+      });
+    });
+    describe('blockId is a v2 library block', () => {
+      it('should return true when learningContextId null', () => {
+        expect(selectors.isLibrary.resultFunc(null, 'lb:')).toEqual(true);
+      });
+      it('should return false when learningContextId is a v1 library', () => {
+        expect(selectors.isLibrary.resultFunc(learningContextIdLibrary, 'lb:')).toEqual(true);
+      });
+    });
+    describe('blockId is a v1 library block', () => {
+      it('should return false when learningContextId null', () => {
+        expect(selectors.isLibrary.resultFunc(null, 'library-v1')).toEqual(false);
+      });
+      it('should return true when learningContextId a v1 library', () => {
+        expect(selectors.isLibrary.resultFunc(learningContextIdLibrary, 'library-v1')).toEqual(true);
+      });
+    });
+  });
+});
diff --git a/src/editors/data/redux/app/selectors.ts b/src/editors/data/redux/app/selectors.ts
new file mode 100644
index 0000000000..3b7d151023
--- /dev/null
+++ b/src/editors/data/redux/app/selectors.ts
@@ -0,0 +1,108 @@
+import { createSelector } from 'reselect';
+import type { EditorState } from '..';
+import { blockTypes } from '../../constants/app';
+import { isLibraryV1Key } from '../../../../generic/key-utils';
+import * as urls from '../../services/cms/urls';
+
+export const appSelector = (state: EditorState) => state.app;
+
+const mkSimpleSelector = <T>(cb: (appState: EditorState['app']) => T) => createSelector([appSelector], cb);
+
+// top-level app data selectors
+export const simpleSelectors = {
+  blockContent: mkSimpleSelector(app => app.blockContent),
+  blockId: mkSimpleSelector(app => app.blockId),
+  blockType: mkSimpleSelector(app => app.blockType),
+  blockValue: mkSimpleSelector(app => app.blockValue),
+  studioView: mkSimpleSelector(app => app.studioView),
+  /** @deprecated Get as `const { learningContextid } = useEditorContext()` instead */
+  learningContextId: mkSimpleSelector(app => app.learningContextId),
+  editorInitialized: mkSimpleSelector(app => app.editorInitialized),
+  saveResponse: mkSimpleSelector(app => app.saveResponse),
+  lmsEndpointUrl: mkSimpleSelector(app => app.lmsEndpointUrl),
+  studioEndpointUrl: mkSimpleSelector(app => app.studioEndpointUrl),
+  unitUrl: mkSimpleSelector(app => app.unitUrl),
+  blockTitle: mkSimpleSelector(app => app.blockTitle),
+  images: mkSimpleSelector(app => app.images),
+  videos: mkSimpleSelector(app => app.videos),
+  showRawEditor: mkSimpleSelector(app => app.showRawEditor),
+};
+
+export const returnUrl = createSelector(
+  [simpleSelectors.unitUrl, simpleSelectors.studioEndpointUrl, simpleSelectors.learningContextId,
+    simpleSelectors.blockId],
+  (unitUrl, studioEndpointUrl, learningContextId, blockId) => (
+    urls.returnUrl({
+      studioEndpointUrl, unitUrl, learningContextId, blockId,
+    })
+  ),
+);
+
+export const isLibrary = createSelector(
+  [
+    simpleSelectors.learningContextId,
+    simpleSelectors.blockId,
+  ],
+  (learningContextId, blockId) => {
+    if (isLibraryV1Key(learningContextId)) {
+      return true;
+    }
+    if (blockId && blockId.startsWith('lb:')) {
+      return true;
+    }
+    return false;
+  },
+);
+
+export const isInitialized = createSelector(
+  [
+    simpleSelectors.unitUrl,
+    simpleSelectors.blockValue,
+    isLibrary,
+  ],
+  (unitUrl, blockValue, isLibraryBlock) => {
+    if (isLibraryBlock) {
+      return !!blockValue;
+    }
+
+    return !!blockValue && !!unitUrl;
+  },
+);
+
+export const displayTitle = createSelector(
+  [
+    simpleSelectors.blockType,
+    simpleSelectors.blockTitle,
+  ],
+  (blockType, blockTitle) => {
+    if (blockType === null) {
+      return null;
+    }
+    if (blockTitle !== null) {
+      return blockTitle;
+    }
+    return (blockType === blockTypes.html)
+      ? 'Text'
+      : blockType[0].toUpperCase() + blockType.substring(1);
+  },
+);
+
+export const analytics = createSelector(
+  [
+    simpleSelectors.blockId,
+    simpleSelectors.blockType,
+    simpleSelectors.learningContextId,
+  ],
+  (blockId, blockType, learningContextId) => (
+    { blockId, blockType, learningContextId }
+  ),
+);
+
+export default {
+  ...simpleSelectors,
+  isInitialized,
+  returnUrl,
+  displayTitle,
+  analytics,
+  isLibrary,
+};
diff --git a/src/editors/data/redux/game/index.js b/src/editors/data/redux/game/index.js
new file mode 100644
index 0000000000..78455d1169
--- /dev/null
+++ b/src/editors/data/redux/game/index.js
@@ -0,0 +1,2 @@
+export { actions, reducer } from './reducers';
+export { default as selectors } from './selectors';
diff --git a/src/editors/data/redux/game/reducers.js b/src/editors/data/redux/game/reducers.js
new file mode 100644
index 0000000000..93d0f02ffe
--- /dev/null
+++ b/src/editors/data/redux/game/reducers.js
@@ -0,0 +1,31 @@
+import { createSlice } from '@reduxjs/toolkit';
+import { StrictDict } from '../../../utils';
+
+const initialState = {
+  settings: {},
+  // TODO fill in with mock state
+  exampleValue: 'this is an example value from the redux state',
+};
+
+// eslint-disable-next-line no-unused-vars
+const game = createSlice({
+  name: 'game',
+  initialState,
+  reducers: {
+    updateField: (state, { payload }) => ({
+      ...state,
+      ...payload,
+    }),
+    // TODO fill in reducers
+  },
+});
+
+const actions = StrictDict(game.actions);
+
+const { reducer } = game;
+
+export {
+  actions,
+  initialState,
+  reducer,
+};
diff --git a/src/editors/data/redux/game/selectors.js b/src/editors/data/redux/game/selectors.js
new file mode 100644
index 0000000000..736d49f93b
--- /dev/null
+++ b/src/editors/data/redux/game/selectors.js
@@ -0,0 +1,19 @@
+import { createSelector } from 'reselect';
+// This 'module' self-import hack enables mocking during tests.
+// See src/editors/decisions/0005-internal-editor-testability-decisions.md. The whole approach to how hooks are tested
+// should be re-thought and cleaned up to avoid this pattern.
+// eslint-disable-next-line import/no-self-import
+import * as module from './selectors';
+
+export const gameState = (state) => state.game;
+const mkSimpleSelector = (cb) => createSelector([module.gameState], cb);
+export const simpleSelectors = {
+  exampleValue: mkSimpleSelector(gameData => gameData.exampleValue),
+  settings: mkSimpleSelector(gameData => gameData.settings),
+  completeState: mkSimpleSelector(gameData => gameData),
+  // TODO fill in with selectors as needed
+};
+
+export default {
+  ...simpleSelectors,
+};
diff --git a/src/editors/data/redux/index.ts b/src/editors/data/redux/index.ts
new file mode 100644
index 0000000000..7758662965
--- /dev/null
+++ b/src/editors/data/redux/index.ts
@@ -0,0 +1,185 @@
+import type { AxiosResponse } from 'axios';
+import { combineReducers } from 'redux';
+import { StrictDict } from '../../utils';
+
+import * as app from './app';
+import * as requests from './requests';
+import * as video from './video';
+import * as problem from './problem';
+import * as game from './game';
+import type { RequestKeys, RequestStates } from '../constants/requests';
+import { AdvancedProblemType, ProblemType } from '../constants/problem';
+
+export { default as thunkActions } from './thunkActions';
+
+const rootReducer = combineReducers({
+  app: app.reducer,
+  requests: requests.reducer,
+  video: video.reducer,
+  problem: problem.reducer,
+  game: game.reducer,
+});
+
+const actions = StrictDict({
+  app: app.actions,
+  requests: requests.actions,
+  video: video.actions,
+  problem: problem.actions,
+  game: game.actions,
+});
+
+const selectors = StrictDict({
+  app: app.selectors,
+  requests: requests.selectors,
+  video: video.selectors,
+  problem: problem.selectors,
+  game: game.selectors,
+});
+
+export interface EditorState {
+  // TODO: move all the 'app' state into EditorContext, not redux.
+  // TODO: replace 'requests' state with React Query hooks
+  // TODO: instead of one big store, give each editor its own store just for that editor type (e.g. VideoStore)
+  app: {
+    blockId: string | null; // e.g. "block-v1:Org+TS100+24+type@html+block@12345"
+    blockTitle: string | null; // e.g. "A Text Component";
+    blockType: string | null;
+    blockValue: null | {
+      data: {
+        id: string; // e.g. "block-v1:Org+TS100+24+type@html+block@12345"
+        display_name: string; // e.g. "A Text Component"
+        category?: string; // e.g. "html". Only for blocks from courses
+        data: string | Record<string, any>;
+        metadata: Record<string, any>;
+        [otherKey: string]: any;
+      },
+      // There are other fields; this is an AxiosResponse object. But we don't want to rely on those details.
+    },
+    unitUrl: null | {
+      data: {
+        ancestors: {
+          id: string;
+          display_name: string;
+          category: 'vertical' | 'sequential' | 'chapter' | 'course';
+          has_children: boolean;
+          unit_level_discussions?: boolean;
+        }[];
+      },
+      // There are other fields; this is an AxiosResponse object. But we don't want to rely on those details.
+    },
+    blockContent: null;
+    studioView: null;
+    saveResponse: null;
+    /** @deprecated Get as `const { learningContextid } = useEditorContext()` instead */
+    learningContextId: string | null; // e.g. "course-v1:Org+TS100+24";
+    editorInitialized: boolean;
+    /** e.g. "http://studio.local.openedx.io:8001" TODO: move to EditorContext */
+    studioEndpointUrl: string | null;
+    /** e.g. "http://local.openedx.io:8000" TODO: move to EditorContext */
+    lmsEndpointUrl: string | null;
+    images: Record<string, {
+      id: string;
+      displayName: string; // e.g. "nHLVaDX6mro-unsplash.jpg"
+      contentType: string; // e.g. "image/jpeg"
+      dateAdded: number; // e.g. 1694629800000,
+      /** e.g. "/asset-v1:Org+TS100+24+type@asset+block@jaromir-kavan-nHLVaDX6mro-unsplash.jpg" */
+      url: string;
+      /** e.g. "http://local.openedx.io:8000/asset-v1:Org+TS100+24+type@asset+block@blah.jpg" */
+      externalUrl: string;
+      /** e.g. "/static/jaromir-kavan-nHLVaDX6mro-unsplash.jpg" */
+      portableUrl: string;
+      /** e.g. e.g. "/asset-v1:Org+TS100+24+type@thumbnail+block@jaromir-kavan-nHLVaDX6mro-unsplash.jpg" */
+      thumbnail: string;
+      locked: boolean;
+      staticFullUrl: string;
+      fileSize: number;
+      usageLocations: { displayLocation: string; url: string; }[];
+    }>;
+    imageCount: number;
+    videos: Record<string, any>;
+    courseDetails: Record<string, any>;
+    showRawEditor: boolean;
+  },
+  requests: Record<keyof typeof RequestKeys, {
+    status: keyof typeof RequestStates;
+    response: AxiosResponse;
+  }>
+  video: {
+    videoSource: string; // default: ""
+    videoId: string; // default: ""
+    fallbackVideos: string[];
+    allowVideoDownloads: boolean;
+    allowVideoSharing: { level: string; value: boolean };
+    videoSharingEnabledForAll: boolean;
+    videoSharingEnabledForCourse: boolean;
+    videoSharingLearnMoreLink: string;
+    thumbnail: null | any;
+    transcripts: any[];
+    selectedVideoTranscriptUrls: Record<string, any>;
+    allowTranscriptDownloads: boolean;
+    duration: {
+      /** e.g. "00:00:00" */
+      startTime: string;
+      stopTime: string;
+      total: string;
+    },
+    showTranscriptByDefault: boolean;
+    handout: null,
+    licenseType: null,
+    licenseDetails: {
+      attribution: boolean;
+      noncommercial: boolean;
+      noDerivatives: boolean;
+      shareAlike: boolean;
+    },
+    courseLicenseType: string | null;
+    courseLicenseDetails: {
+      attribution: boolean;
+      noncommercial: boolean;
+      noDerivatives: boolean;
+      shareAlike: boolean;
+    },
+    allowThumbnailUpload: boolean | null; // TODO: why is this null?
+    allowTranscriptImport: boolean;
+  },
+  problem: {
+    /** Has the user made changes to this problem since opening the editor? */
+    isDirty: boolean;
+    rawOLX: string;
+    problemType: null | ProblemType | AdvancedProblemType;
+    question: string;
+    answers: any[];
+    correctAnswerCount: number;
+    groupFeedbackList: any[];
+    generalFeedback: string;
+    additionalAttributes: Record<string, any>;
+    defaultSettings: Record<string, any>;
+    settings: {
+      randomization: null | any; // Not sure what type this field has
+      scoring: {
+        weight: number;
+        attempts: { unlimited: boolean; number: number | null; }
+      },
+      hints: any[];
+      timeBetween: number;
+      showAnswer: {
+        on: string;
+        afterAttempts: number;
+      },
+      showResetButton: boolean | null;
+      solutionExplanation: string;
+      tolerance: {
+        value: number | null;
+        type: 'Percent' | 'Number' | 'None';
+      }
+    }
+  },
+  game: {
+    settings: Record<string, any>;
+    exampleValue: 'this is an example value from the redux state';
+  }
+}
+
+export { actions, selectors };
+
+export default rootReducer;
diff --git a/src/editors/data/redux/problem/index.ts b/src/editors/data/redux/problem/index.ts
new file mode 100644
index 0000000000..78455d1169
--- /dev/null
+++ b/src/editors/data/redux/problem/index.ts
@@ -0,0 +1,2 @@
+export { actions, reducer } from './reducers';
+export { default as selectors } from './selectors';
diff --git a/src/editors/data/redux/problem/reducers.test.ts b/src/editors/data/redux/problem/reducers.test.ts
new file mode 100644
index 0000000000..7f2acb2c84
--- /dev/null
+++ b/src/editors/data/redux/problem/reducers.test.ts
@@ -0,0 +1,457 @@
+import { initialState, actions, reducer } from './reducers';
+import { ProblemTypeKeys } from '../../constants/problem';
+
+const testingState = {
+  ...initialState,
+  arbitraryField: 'arbitrary',
+};
+
+describe('problem reducer', () => {
+  it('has initial state', () => {
+    expect(reducer(undefined, {} as any)).toEqual(initialState);
+  });
+
+  const testValue = 'roll for initiative';
+
+  describe('handling actions', () => {
+    const setterTest = (action, target) => {
+      describe(action, () => {
+        it(`load ${target} from payload`, () => {
+          expect(reducer(testingState, actions[action](testValue))).toEqual({
+            ...testingState,
+            isDirty: true,
+            [target]: testValue,
+          });
+        });
+      });
+    };
+    [
+      ['updateQuestion', 'question'] as const,
+    ].map(args => setterTest(...args));
+    describe('setEnableTypeSelection', () => {
+      it('sets given problemType to null', () => {
+        const payload = {
+          maxAttempts: 1,
+          showanswer: 'finished',
+          showResetButton: false,
+        };
+        expect(reducer(testingState, actions.setEnableTypeSelection(payload))).toEqual({
+          ...testingState,
+          settings: {
+            ...testingState.settings,
+            scoring: {
+              ...testingState.settings.scoring,
+              attempts: { number: 1, unlimited: false },
+            },
+            showAnswer: { ...testingState.settings.showAnswer, on: payload.showanswer },
+            showResetButton: payload.showResetButton,
+          },
+          problemType: null,
+        });
+      });
+    });
+    describe('load', () => {
+      it('sets answers', () => {
+        const blankAnswer = {
+          id: 'A',
+          correct: false,
+          selectedFeedback: '',
+          title: '',
+          isAnswerRange: false,
+          unselectedFeedback: '',
+        };
+        expect(reducer(testingState, actions.addAnswer())).toEqual({
+          ...testingState,
+          answers: [blankAnswer],
+          isDirty: true,
+        });
+      });
+    });
+    describe('updateField', () => {
+      it('sets given parameter', () => {
+        const payload = { problemType: 'soMePRoblEMtYPe' };
+        expect(reducer(testingState, actions.updateField(payload))).toEqual({
+          ...testingState,
+          ...payload,
+        });
+      });
+    });
+    describe('updateSettings', () => {
+      it('sets given settings parameter', () => {
+        const payload = { hints: ['soMehInt'] };
+        expect(reducer(testingState, actions.updateSettings(payload))).toEqual({
+          ...testingState,
+          isDirty: true,
+          settings: {
+            ...testingState.settings,
+            ...payload,
+          },
+        });
+      });
+    });
+    describe('addAnswer', () => {
+      const answer = {
+        id: 'A',
+        correct: false,
+        selectedFeedback: '',
+        title: '',
+        isAnswerRange: false,
+        unselectedFeedback: '',
+      };
+      it('sets answers', () => {
+        expect(reducer({ ...testingState, problemType: 'choiceresponse' }, actions.addAnswer())).toEqual({
+          ...testingState,
+          problemType: 'choiceresponse',
+          isDirty: true,
+          answers: [answer],
+        });
+      });
+      it('sets answers for numeric input', () => {
+        const numericTestState = {
+          ...testingState,
+          problemType: ProblemTypeKeys.NUMERIC,
+          correctAnswerCount: 0,
+        };
+        expect(reducer(numericTestState, actions.addAnswer())).toEqual({
+          ...numericTestState,
+          correctAnswerCount: 1,
+          isDirty: true,
+          answers: [{
+            ...answer,
+            correct: true,
+          }],
+        });
+      });
+    });
+    describe('addAnswerRange', () => {
+      const answerRange = {
+        id: 'A',
+        correct: true,
+        selectedFeedback: '',
+        title: '',
+        isAnswerRange: true,
+        unselectedFeedback: '',
+      };
+      it('sets answerRange', () => {
+        expect(reducer({ ...testingState, problemType: ProblemTypeKeys.NUMERIC }, actions.addAnswerRange())).toEqual({
+          ...testingState,
+          correctAnswerCount: 1,
+          isDirty: true,
+          problemType: ProblemTypeKeys.NUMERIC,
+          answers: [answerRange],
+        });
+      });
+    });
+    describe('updateAnswer', () => {
+      it('sets answers, as well as setting the correctAnswerCount ', () => {
+        const answer = { id: 'A', correct: true };
+        expect(reducer(
+          {
+            ...testingState,
+            answers: [{
+              id: 'A',
+              correct: false,
+            }],
+          },
+          actions.updateAnswer(answer),
+        )).toEqual({
+          ...testingState,
+          correctAnswerCount: 1,
+          isDirty: true,
+          answers: [{ id: 'A', correct: true }],
+        });
+      });
+    });
+    describe('deleteAnswer', () => {
+      let windowSpy;
+      beforeEach(() => {
+        windowSpy = jest.spyOn(window, 'window', 'get');
+      });
+      afterEach(() => {
+        windowSpy.mockRestore();
+      });
+      it('sets a default when deleting the last answer', () => {
+        windowSpy.mockImplementation(() => ({
+          tinymce: {
+            editors: 'mock-editors',
+          },
+        }));
+        const payload = {
+          id: 'A',
+          correct: false,
+          editorState: 'empty',
+        };
+        expect(reducer(
+          {
+            ...testingState,
+            correctAnswerCount: 0,
+            answers: [{ id: 'A', correct: false }],
+          },
+          actions.deleteAnswer(payload),
+        )).toEqual({
+          ...testingState,
+          isDirty: true,
+          correctAnswerCount: 0,
+          answers: [{
+            id: 'A',
+            title: '',
+            selectedFeedback: '',
+            unselectedFeedback: '',
+            correct: false,
+            isAnswerRange: false,
+          }],
+        });
+      });
+      it('sets answers and correctAnswerCount', () => {
+        windowSpy.mockImplementation(() => ({
+          tinymce: {
+            editors: 'mock-editors',
+          },
+        }));
+        const payload = {
+          id: 'A',
+          correct: false,
+          editorState: {
+            answers: { A: 'mockA' },
+          },
+        };
+        expect(reducer(
+          {
+            ...testingState,
+            correctAnswerCount: 1,
+            answers: [
+              { id: 'A', correct: false },
+              { id: 'B', correct: true },
+            ],
+          },
+          actions.deleteAnswer(payload),
+        )).toEqual({
+          ...testingState,
+          correctAnswerCount: 1,
+          isDirty: true,
+          answers: [{
+            id: 'A',
+            correct: true,
+            selectedFeedback: '',
+            unselectedFeedback: '',
+          }],
+        });
+      });
+      it('sets answers and correctAnswerCount with editorState for RichTextProblems', () => {
+        const setContent = jest.fn();
+        windowSpy.mockImplementation(() => ({
+          tinymce: {
+            editors: {
+              'answer-A': { setContent },
+              'answer-B': { setContent },
+            },
+          },
+        }));
+        const payload = {
+          id: 'A',
+          correct: false,
+          editorState: {
+            answers: { A: 'editorAnsA', B: 'editorAnsB' },
+          },
+        };
+        expect(reducer(
+          {
+            ...testingState,
+            problemType: ProblemTypeKeys.SINGLESELECT,
+            correctAnswerCount: 1,
+            answers: [
+              { id: 'A', correct: false },
+              { id: 'B', correct: true },
+            ],
+          },
+          actions.deleteAnswer(payload),
+        )).toEqual({
+          ...testingState,
+          problemType: ProblemTypeKeys.SINGLESELECT,
+          isDirty: true,
+          correctAnswerCount: 1,
+          answers: [{
+            id: 'A',
+            correct: true,
+            title: 'editorAnsB',
+            selectedFeedback: '',
+            unselectedFeedback: '',
+          }],
+        });
+      });
+      it('sets selectedFeedback and unselectedFeedback with editorState', () => {
+        windowSpy.mockImplementation(() => ({
+          tinymce: {
+            editors: {
+              'answer-A': 'mockEditor',
+              'answer-B': 'mockEditor',
+            },
+          },
+        }));
+        const payload = {
+          id: 'A',
+          correct: false,
+          editorState: {
+            answers: { A: 'editorAnsA', B: 'editorAnsB' },
+            selectedFeedback: { A: 'editSelFA', B: 'editSelFB' },
+            unselectedFeedback: { A: 'editUnselFA', B: 'editUnselFB' },
+          },
+        };
+        expect(reducer(
+          {
+            ...testingState,
+            correctAnswerCount: 1,
+            answers: [
+              { id: 'A', correct: false },
+              { id: 'B', correct: true },
+            ],
+          },
+          actions.deleteAnswer(payload),
+        )).toEqual({
+          ...testingState,
+          correctAnswerCount: 1,
+          isDirty: true,
+          answers: [{
+            id: 'A',
+            correct: true,
+            selectedFeedback: 'editSelFB',
+            unselectedFeedback: 'editUnselFB',
+          }],
+        });
+      });
+      it('calls editor setContent to set answer and feedback fields', () => {
+        const setContent = jest.fn();
+        windowSpy.mockImplementation(() => ({
+          tinymce: {
+            editors: {
+              'answer-A': { setContent },
+              'answer-B': { setContent },
+              'selectedFeedback-A': { setContent },
+              'selectedFeedback-B': { setContent },
+              'unselectedFeedback-A': { setContent },
+              'unselectedFeedback-B': { setContent },
+            },
+          },
+        }));
+        const payload = {
+          id: 'A',
+          correct: false,
+          editorState: {
+            answers: { A: 'editorAnsA', B: 'editorAnsB' },
+            selectedFeedback: { A: 'editSelFA', B: 'editSelFB' },
+            unselectedFeedback: { A: 'editUnselFA', B: 'editUnselFB' },
+          },
+        };
+        reducer(
+          {
+            ...testingState,
+            problemType: ProblemTypeKeys.SINGLESELECT,
+            correctAnswerCount: 1,
+            answers: [
+              { id: 'A', correct: false },
+              { id: 'B', correct: true },
+            ],
+          },
+          actions.deleteAnswer(payload),
+        );
+        expect((window as any).tinymce.editors['answer-A'].setContent).toHaveBeenCalled();
+        expect((window as any).tinymce.editors['answer-A'].setContent).toHaveBeenCalledWith('editorAnsB');
+        expect((window as any).tinymce.editors['selectedFeedback-A'].setContent).toHaveBeenCalledWith('editSelFB');
+        expect((window as any).tinymce.editors['unselectedFeedback-A'].setContent).toHaveBeenCalledWith('editUnselFB');
+      });
+      it('sets groupFeedbackList by removing the checked item in the groupFeedback', () => {
+        windowSpy.mockImplementation(() => ({
+          tinymce: {
+            editors: 'mock-editors',
+          },
+        }));
+        const payload = {
+          id: 'A',
+          correct: false,
+          editorState: {
+            answer: { A: 'aNSwERA', B: 'anSWeRB' },
+          },
+        };
+        expect(reducer(
+          {
+            ...testingState,
+            correctAnswerCount: 1,
+            answers: [
+              { id: 'A', correct: false },
+              { id: 'B', correct: true },
+              { id: 'C', correct: false },
+            ],
+            groupFeedbackList: [{
+              id: 0,
+              answers: ['A', 'C'],
+              feedback: 'fake feedback',
+            }],
+          },
+          actions.deleteAnswer(payload),
+        )).toEqual({
+          ...testingState,
+          correctAnswerCount: 1,
+          isDirty: true,
+          answers: [{
+            id: 'A',
+            correct: true,
+            selectedFeedback: '',
+            unselectedFeedback: '',
+          },
+          {
+            id: 'B',
+            correct: false,
+            selectedFeedback: '',
+            unselectedFeedback: '',
+          }],
+          groupFeedbackList: [{
+            id: 0,
+            answers: ['B'],
+            feedback: 'fake feedback',
+          }],
+        });
+      });
+      it('if you delete an answer range, it will be replaced with a blank answer', () => {
+        windowSpy.mockImplementation(() => ({
+          tinymce: {
+            editors: 'mock-editors',
+          },
+        }));
+        const payload = {
+          id: 'A',
+          correct: true,
+          editorState: 'mockEditoRStAte',
+        };
+        expect(reducer(
+          {
+            ...testingState,
+            problemType: ProblemTypeKeys.NUMERIC,
+            correctAnswerCount: 1,
+            answers: [{
+              id: 'A',
+              correct: false,
+              selectedFeedback: '',
+              title: '',
+              isAnswerRange: true,
+              unselectedFeedback: '',
+            }],
+          },
+          actions.deleteAnswer(payload),
+        )).toEqual({
+          ...testingState,
+          problemType: ProblemTypeKeys.NUMERIC,
+          correctAnswerCount: 1,
+          isDirty: true,
+          answers: [{
+            id: 'A',
+            title: '',
+            selectedFeedback: '',
+            unselectedFeedback: '',
+            correct: true,
+            isAnswerRange: false,
+          }],
+        });
+      });
+    });
+  });
+});
diff --git a/src/editors/data/redux/problem/reducers.ts b/src/editors/data/redux/problem/reducers.ts
new file mode 100644
index 0000000000..32cd7ea8f9
--- /dev/null
+++ b/src/editors/data/redux/problem/reducers.ts
@@ -0,0 +1,242 @@
+import _ from 'lodash';
+import { createSlice } from '@reduxjs/toolkit';
+import { indexToLetterMap } from '../../../containers/ProblemEditor/data/OLXParser';
+import { StrictDict } from '../../../utils';
+import { ProblemTypeKeys, RichTextProblems } from '../../constants/problem';
+import { ToleranceTypes } from '../../../containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/Tolerance/constants';
+import type { EditorState } from '..';
+
+const nextAlphaId = (lastId: string) => String.fromCharCode(lastId.charCodeAt(0) + 1);
+
+const initialState: EditorState['problem'] = {
+  rawOLX: '',
+  problemType: null,
+  question: '',
+  answers: [],
+  correctAnswerCount: 0,
+  groupFeedbackList: [],
+  generalFeedback: '',
+  additionalAttributes: {},
+  defaultSettings: {},
+  isDirty: false,
+  settings: {
+    randomization: null,
+    scoring: {
+      weight: 1,
+      attempts: {
+        unlimited: true,
+        number: null,
+      },
+    },
+    hints: [],
+    timeBetween: 0,
+    showAnswer: {
+      on: '',
+      afterAttempts: 0,
+    },
+    showResetButton: null,
+    solutionExplanation: '',
+    tolerance: {
+      value: null,
+      type: ToleranceTypes.none.type,
+    },
+  },
+};
+
+const problem = createSlice({
+  name: 'problem',
+  initialState,
+  reducers: {
+    updateField: (state, { payload }) => ({
+      ...state,
+      ...payload,
+    }),
+    updateQuestion: (state, { payload }) => ({
+      ...state,
+      question: payload,
+      isDirty: true,
+    }),
+    updateAnswer: (state, { payload }) => {
+      const { id, hasSingleAnswer, ...answer } = payload;
+      let { correctAnswerCount } = state;
+      const answers = state.answers.map(obj => {
+        if (obj.id === id) {
+          if (_.has(answer, 'correct') && payload.correct) {
+            correctAnswerCount += 1;
+          }
+          if (_.has(answer, 'correct') && payload.correct === false && correctAnswerCount > 0) {
+            correctAnswerCount -= 1;
+          }
+          return { ...obj, ...answer };
+        }
+        // set other answers as incorrect if problem only has one answer correct
+        // and changes object include correct key change
+        if (hasSingleAnswer && _.has(answer, 'correct') && obj.correct) {
+          return { ...obj, correct: false };
+        }
+        return obj;
+      });
+      return {
+        ...state,
+        correctAnswerCount,
+        answers,
+        isDirty: true,
+      };
+    },
+    deleteAnswer: (state, { payload }) => {
+      const { id, correct, editorState } = payload;
+      const EditorsArray = (window as any).tinymce.editors;
+      if (state.answers.length === 1) {
+        return {
+          ...state,
+          correctAnswerCount: state.problemType === ProblemTypeKeys.NUMERIC ? 1 : 0,
+          isDirty: true,
+          answers: [{
+            id: 'A',
+            title: '',
+            selectedFeedback: '',
+            unselectedFeedback: '',
+            correct: state.problemType === ProblemTypeKeys.NUMERIC,
+            isAnswerRange: false,
+          }],
+        };
+      }
+      const answers = state.answers.filter(obj => obj.id !== id).map((answer, index) => {
+        const newId = indexToLetterMap[index];
+        if (answer.id === newId) {
+          return answer;
+        }
+        let newAnswer = {
+          ...answer,
+          id: newId,
+          selectedFeedback: editorState.selectedFeedback ? editorState.selectedFeedback[answer.id] : '',
+          unselectedFeedback: editorState.unselectedFeedback ? editorState.unselectedFeedback[answer.id] : '',
+        };
+        if (RichTextProblems.includes(state.problemType as any)) {
+          newAnswer = {
+            ...newAnswer,
+            title: editorState.answers[answer.id],
+          };
+          if (EditorsArray[`answer-${newId}`]) {
+            EditorsArray[`answer-${newId}`].setContent(newAnswer.title ?? '');
+          }
+        }
+        // Note: The following assumes selectedFeedback and unselectedFeedback is using ExpandedTextArea
+        //   Content only needs to be set here when the 'next' feedback fields are shown.
+        if (EditorsArray[`selectedFeedback-${newId}`]) {
+          EditorsArray[`selectedFeedback-${newId}`].setContent(newAnswer.selectedFeedback ?? '');
+        }
+        if (EditorsArray[`unselectedFeedback-${newId}`]) {
+          EditorsArray[`unselectedFeedback-${newId}`].setContent(newAnswer.unselectedFeedback ?? '');
+        }
+        return newAnswer;
+      });
+      const groupFeedbackList = state.groupFeedbackList.map(feedback => {
+        const newAnswers = feedback.answers.filter(obj => obj !== id).map(letter => {
+          if (letter.charCodeAt(0) > id.charCodeAt(0)) {
+            return String.fromCharCode(letter.charCodeAt(0) - 1);
+          }
+          return letter;
+        });
+        return { ...feedback, answers: newAnswers };
+      });
+      return {
+        ...state,
+        answers,
+        correctAnswerCount: correct ? state.correctAnswerCount - 1 : state.correctAnswerCount,
+        groupFeedbackList,
+        isDirty: true,
+      };
+    },
+    addAnswer: (state) => {
+      const currAnswers = state.answers;
+      if (currAnswers.length >= indexToLetterMap.length) {
+        return state;
+      }
+      const newOption = {
+        id: currAnswers.length ? nextAlphaId(currAnswers[currAnswers.length - 1].id) : 'A',
+        title: '',
+        selectedFeedback: '',
+        unselectedFeedback: '',
+        correct: state.problemType === ProblemTypeKeys.NUMERIC,
+        isAnswerRange: false,
+      };
+      let { correctAnswerCount } = state;
+      if (state.problemType === ProblemTypeKeys.NUMERIC) {
+        correctAnswerCount += 1;
+      }
+
+      const answers = [
+        ...currAnswers,
+        newOption,
+      ];
+      return {
+        ...state,
+        correctAnswerCount,
+        isDirty: true,
+        answers,
+      };
+    },
+    addAnswerRange: (state) => {
+      // As you may only have one answer range at a time, overwrite the answer object.
+      const newOption = {
+        id: 'A',
+        title: '',
+        selectedFeedback: '',
+        unselectedFeedback: '',
+        correct: state.problemType === ProblemTypeKeys.NUMERIC,
+        isAnswerRange: true,
+      };
+      const correctAnswerCount = 1;
+      return {
+        ...state,
+        correctAnswerCount,
+        answers: [newOption],
+        isDirty: true,
+      };
+    },
+
+    updateSettings: (state, { payload }) => ({
+      ...state,
+      settings: {
+        ...state.settings,
+        ...payload,
+      },
+      isDirty: true,
+    }),
+    load: (state, { payload: { settings: { scoring, showAnswer, ...settings }, ...payload } }) => ({
+      ...state,
+      settings: {
+        ...state.settings,
+        scoring: { ...state.settings.scoring, ...scoring },
+        showAnswer: { ...state.settings.showAnswer, ...showAnswer },
+        ...settings,
+      },
+      ...payload,
+    }),
+    setEnableTypeSelection: (state, { payload }) => {
+      const { maxAttempts, showanswer, showResetButton } = payload;
+      const attempts = { number: maxAttempts, unlimited: false };
+      return {
+        ...state,
+        settings: {
+          ...state.settings,
+          scoring: { ...state.settings.scoring, attempts },
+          showAnswer: { ...state.settings.showAnswer, on: showanswer },
+          showResetButton,
+        },
+        problemType: null,
+      };
+    },
+  },
+});
+
+const actions = StrictDict(problem.actions);
+
+const { reducer } = problem;
+
+export {
+  actions,
+  initialState,
+  reducer,
+};
diff --git a/src/editors/data/redux/problem/selectors.test.ts b/src/editors/data/redux/problem/selectors.test.ts
new file mode 100644
index 0000000000..974bd67bc6
--- /dev/null
+++ b/src/editors/data/redux/problem/selectors.test.ts
@@ -0,0 +1,49 @@
+// import * in order to mock in-file references
+import { keyStore } from '../../../utils';
+import * as selectors from './selectors';
+
+const testState = { some: 'arbitraryValue' };
+const testValue = 'my VALUE';
+
+describe('problem selectors unit tests', () => {
+  const {
+    problemState,
+    simpleSelectors,
+  } = selectors;
+  describe('problemState', () => {
+    it('returns the problem data', () => {
+      expect(problemState({ ...testState, problem: testValue } as any)).toEqual(testValue);
+    });
+  });
+  describe('simpleSelectors', () => {
+    const testSimpleSelector = (key) => {
+      test(`${key} simpleSelector returns its value from the problem store`, () => {
+        const { dependencies, resultFunc: cb } = simpleSelectors[key];
+        expect(dependencies).toEqual([problemState]);
+        expect(cb({ ...testState, [key]: testValue })).toEqual(testValue);
+      });
+    };
+    const simpleKeys = keyStore(simpleSelectors);
+    describe('simple selectors link their values from problem store', () => {
+      [
+        simpleKeys.problemType,
+        simpleKeys.answers,
+        simpleKeys.correctAnswerCount,
+        simpleKeys.settings,
+        simpleKeys.question,
+        simpleKeys.defaultSettings,
+      ].map(testSimpleSelector);
+    });
+    test('simple selector completeState equals the entire state', () => {
+      const { dependencies, resultFunc: cb } = simpleSelectors[simpleKeys.completeState];
+      expect(dependencies).toEqual([problemState]);
+      expect(cb({
+        ...testState,
+        [simpleKeys.completeState]: testValue,
+      } as any)).toEqual({
+        ...testState,
+        [simpleKeys.completeState]: testValue,
+      });
+    });
+  });
+});
diff --git a/src/editors/data/redux/problem/selectors.ts b/src/editors/data/redux/problem/selectors.ts
new file mode 100644
index 0000000000..b6cb5ef60f
--- /dev/null
+++ b/src/editors/data/redux/problem/selectors.ts
@@ -0,0 +1,21 @@
+import { createSelector } from 'reselect';
+import type { EditorState } from '..';
+
+export const problemState = (state: EditorState) => state.problem;
+
+const mkSimpleSelector = <T>(cb: (problemState: EditorState['problem']) => T) => createSelector([problemState], cb);
+
+export const simpleSelectors = {
+  problemType: mkSimpleSelector(problemData => problemData.problemType),
+  generalFeedback: mkSimpleSelector(problemData => problemData.generalFeedback),
+  groupFeedbackList: mkSimpleSelector(problemData => problemData.groupFeedbackList),
+  answers: mkSimpleSelector(problemData => problemData.answers),
+  correctAnswerCount: mkSimpleSelector(problemData => problemData.correctAnswerCount),
+  settings: mkSimpleSelector(problemData => problemData.settings),
+  question: mkSimpleSelector(problemData => problemData.question),
+  defaultSettings: mkSimpleSelector(problemData => problemData.defaultSettings),
+  completeState: mkSimpleSelector(problemData => problemData),
+  isDirty: mkSimpleSelector(problemData => problemData.isDirty),
+};
+
+export default simpleSelectors;
diff --git a/src/editors/data/redux/requests/index.js b/src/editors/data/redux/requests/index.js
new file mode 100644
index 0000000000..8abd5f91d9
--- /dev/null
+++ b/src/editors/data/redux/requests/index.js
@@ -0,0 +1,2 @@
+export { actions, reducer } from './reducer';
+export { default as selectors } from './selectors';
diff --git a/src/editors/data/redux/requests/reducer.js b/src/editors/data/redux/requests/reducer.js
new file mode 100644
index 0000000000..583c390648
--- /dev/null
+++ b/src/editors/data/redux/requests/reducer.js
@@ -0,0 +1,66 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+import { StrictDict } from '../../../utils';
+
+import { RequestStates, RequestKeys } from '../../constants/requests';
+
+const initialState = {
+  [RequestKeys.fetchUnit]: { status: RequestStates.inactive },
+  [RequestKeys.fetchBlock]: { status: RequestStates.inactive },
+  [RequestKeys.fetchStudioView]: { status: RequestStates.inactive },
+  [RequestKeys.saveBlock]: { status: RequestStates.inactive },
+  [RequestKeys.uploadAsset]: { status: RequestStates.inactive },
+  [RequestKeys.allowThumbnailUpload]: { status: RequestStates.inactive },
+  [RequestKeys.uploadThumbnail]: { status: RequestStates.inactive },
+  [RequestKeys.uploadTranscript]: { status: RequestStates.inactive },
+  [RequestKeys.deleteTranscript]: { status: RequestStates.inactive },
+  [RequestKeys.fetchCourseDetails]: { status: RequestStates.inactive },
+  [RequestKeys.fetchImages]: { status: RequestStates.inactive },
+  [RequestKeys.fetchVideos]: { status: RequestStates.inactive },
+  [RequestKeys.uploadVideo]: { status: RequestStates.inactive },
+  [RequestKeys.checkTranscriptsForImport]: { status: RequestStates.inactive },
+  [RequestKeys.importTranscript]: { status: RequestStates.inactive },
+  [RequestKeys.fetchVideoFeatures]: { status: RequestStates.inactive },
+  [RequestKeys.fetchAdvancedSettings]: { status: RequestStates.inactive },
+};
+
+// eslint-disable-next-line no-unused-vars
+const requests = createSlice({
+  name: 'requests',
+  initialState,
+  reducers: {
+    startRequest: (state, { payload }) => ({
+      ...state,
+      [payload]: {
+        status: RequestStates.pending,
+      },
+    }),
+    completeRequest: (state, { payload }) => ({
+      ...state,
+      [payload.requestKey]: {
+        status: RequestStates.completed,
+        response: payload.response,
+      },
+    }),
+    failRequest: (state, { payload }) => ({
+      ...state,
+      [payload.requestKey]: {
+        status: RequestStates.failed,
+        error: payload.error,
+      },
+    }),
+    clearRequest: (state, { payload }) => ({
+      ...state,
+      [payload.requestKey]: {},
+    }),
+  },
+});
+
+const actions = StrictDict(requests.actions);
+const { reducer } = requests;
+
+export {
+  actions,
+  reducer,
+  initialState,
+};
diff --git a/src/editors/data/redux/requests/reducer.test.js b/src/editors/data/redux/requests/reducer.test.js
new file mode 100644
index 0000000000..62872a47db
--- /dev/null
+++ b/src/editors/data/redux/requests/reducer.test.js
@@ -0,0 +1,49 @@
+import { initialState, actions, reducer } from './reducer';
+import { RequestStates, RequestKeys } from '../../constants/requests';
+
+describe('requests reducer', () => {
+  test('intial state generated on create', () => {
+    expect(reducer(undefined, {})).toEqual(initialState);
+  });
+
+  describe('handling actions', () => {
+    const arbitraryKey = 'ArbItrAryKey';
+    const requestsList = [RequestKeys.fetchUnit, RequestKeys.fetchBlock, RequestKeys.saveBlock, arbitraryKey];
+
+    requestsList.forEach(requestKey => {
+      describe(`${requestKey} lifecycle`, () => {
+        const testAction = (action, args, expected) => {
+          const testingState = {
+            ...initialState,
+            arbitraryField: 'arbitrary',
+            [requestKey]: { arbitrary: 'state' },
+          };
+          expect(reducer(testingState, actions[action](args))).toEqual({
+            ...testingState,
+            [requestKey]: expected,
+          });
+        };
+        test('startRequest sets pending status', () => {
+          testAction('startRequest', requestKey, { status: RequestStates.pending });
+        });
+        test('completeRequest sets completed status and loads response', () => {
+          testAction(
+            'completeRequest',
+            { requestKey },
+            { status: RequestStates.completed },
+          );
+        });
+        test('failRequest sets failed state and loads error', () => {
+          testAction(
+            'failRequest',
+            { requestKey },
+            { status: RequestStates.failed },
+          );
+        });
+        test('clearRequest clears request state', () => {
+          testAction('clearRequest', { requestKey }, {});
+        });
+      });
+    });
+  });
+});
diff --git a/src/editors/data/redux/requests/selectors.js b/src/editors/data/redux/requests/selectors.js
new file mode 100644
index 0000000000..c9b318bcbe
--- /dev/null
+++ b/src/editors/data/redux/requests/selectors.js
@@ -0,0 +1,41 @@
+import { StrictDict } from '../../../utils';
+import { RequestStates } from '../../constants/requests';
+// This 'module' self-import hack enables mocking during tests.
+// See src/editors/decisions/0005-internal-editor-testability-decisions.md. The whole approach to how hooks are tested
+// should be re-thought and cleaned up to avoid this pattern.
+// eslint-disable-next-line import/no-self-import
+import * as module from './selectors';
+
+export const requestStatus = (state, { requestKey }) => state.requests[requestKey];
+
+export const statusSelector = (fn) => (state, { requestKey }) => fn(state.requests[requestKey]);
+
+export const isInactive = ({ status }) => status === RequestStates.inactive;
+export const isPending = ({ status }) => status === RequestStates.pending;
+export const isCompleted = ({ status }) => status === RequestStates.completed;
+export const isFailed = ({ status }) => status === RequestStates.failed;
+export const isFinished = ({ status }) => (
+  [RequestStates.failed, RequestStates.completed].includes(status)
+);
+export const error = (request) => request.error;
+export const errorStatus = (request) => request.error?.response?.status;
+export const errorCode = (request) => request.error?.response?.data;
+
+export const data = (request) => request.data;
+
+export const connectedStatusSelectors = () => ({
+  isInactive: module.statusSelector(isInactive),
+  isPending: module.statusSelector(isPending),
+  isCompleted: module.statusSelector(isCompleted),
+  isFailed: module.statusSelector(isFailed),
+  isFinished: module.statusSelector(isFinished),
+  error: module.statusSelector(error),
+  errorCode: module.statusSelector(errorCode),
+  errorStatus: module.statusSelector(errorStatus),
+  data: module.statusSelector(data),
+});
+
+export default StrictDict({
+  requestStatus,
+  ...module.connectedStatusSelectors(),
+});
diff --git a/src/editors/data/redux/requests/selectors.test.js b/src/editors/data/redux/requests/selectors.test.js
new file mode 100644
index 0000000000..d987a72e75
--- /dev/null
+++ b/src/editors/data/redux/requests/selectors.test.js
@@ -0,0 +1,123 @@
+/* eslint-disable no-import-assign */
+import { RequestStates } from '../../constants/requests';
+
+// import * in order to mock in-file references
+import * as selectors from './selectors';
+
+jest.mock('reselect', () => ({
+  createSelector: jest.fn((preSelectors, cb) => ({ preSelectors, cb })),
+}));
+
+const testValue = 'my test VALUE';
+const testKey = 'MY test key';
+
+describe('request selectors', () => {
+  describe('basic selectors', () => {
+    describe('requestStatus', () => {
+      it('returns the state associated with the given requestKey', () => {
+        expect(
+          selectors.requestStatus(
+            { requests: { [testKey]: testValue } },
+            { requestKey: testKey },
+          ),
+        ).toEqual(testValue);
+      });
+    });
+    describe('statusSelector', () => {
+      it('returns a state selector that applies a fn against request state by requestKey', () => {
+        const myMethod = ({ data }) => ({ myData: data });
+        expect(selectors.statusSelector(myMethod)(
+          { requests: { [testKey]: { data: testValue } } },
+          { requestKey: testKey },
+        )).toEqual({ myData: testValue });
+      });
+    });
+    describe('state selectors', () => {
+      const testStateSelector = (selector, expected) => {
+        describe(selector, () => {
+          it(`returns true iff the request status equals ${expected}`, () => {
+            expect(selectors[selector]({ status: expected })).toEqual(true);
+            expect(selectors[selector]({ status: 'other' })).toEqual(false);
+          });
+        });
+      };
+      testStateSelector('isInactive', RequestStates.inactive);
+      testStateSelector('isPending', RequestStates.pending);
+      testStateSelector('isCompleted', RequestStates.completed);
+      testStateSelector('isFailed', RequestStates.failed);
+      describe('isFinished', () => {
+        it('returns true iff the request is completed or failed', () => {
+          expect(selectors.isFinished({ status: RequestStates.completed })).toEqual(true);
+          expect(selectors.isFinished({ status: RequestStates.failed })).toEqual(true);
+          expect(selectors.isFinished({ status: 'other' })).toEqual(false);
+        });
+      });
+    });
+    describe('error selectors', () => {
+      describe('error', () => {
+        it('returns the error for the request', () => {
+          expect(selectors.error({ error: testValue })).toEqual(testValue);
+        });
+      });
+      describe('errorStatus', () => {
+        it('returns the status the error response iff one exists', () => {
+          expect(selectors.errorStatus({})).toEqual(undefined);
+          expect(selectors.errorStatus({ error: {} })).toEqual(undefined);
+          expect(selectors.errorStatus({ error: { response: {} } })).toEqual(undefined);
+          expect(selectors.errorStatus(
+            { error: { response: { status: testValue } } },
+          )).toEqual(testValue);
+        });
+      });
+      describe('errorCode', () => {
+        it('returns the status the error code iff one exists', () => {
+          expect(selectors.errorCode({})).toEqual(undefined);
+          expect(selectors.errorCode({ error: {} })).toEqual(undefined);
+          expect(selectors.errorCode({ error: { response: {} } })).toEqual(undefined);
+          expect(selectors.errorCode(
+            { error: { response: { data: testValue } } },
+          )).toEqual(testValue);
+        });
+      });
+    });
+    describe('data', () => {
+      it('returns the data from the request', () => {
+        expect(selectors.data({ data: testValue })).toEqual(testValue);
+      });
+    });
+  });
+  describe('exported selectors', () => {
+    test('requestStatus forwards basic selector', () => {
+      expect(selectors.default.requestStatus).toEqual(selectors.requestStatus);
+    });
+    describe('statusSelector selectors', () => {
+      let statusSelector;
+      let connectedSelectors;
+      beforeEach(() => {
+        statusSelector = selectors.statusSelector;
+        selectors.statusSelector = jest.fn(key => ({ statusSelector: key }));
+        connectedSelectors = selectors.connectedStatusSelectors();
+      });
+      afterEach(() => {
+        selectors.statusSelector = statusSelector;
+      });
+      const testStatusSelector = (name) => {
+        describe(name, () => {
+          it(`returns a status selector keyed to the ${name} selector`, () => {
+            expect(connectedSelectors[name].statusSelector).toEqual(selectors[name]);
+          });
+        });
+      };
+      [
+        'isInactive',
+        'isPending',
+        'isCompleted',
+        'isFailed',
+        'error',
+        'errorCode',
+        'errorStatus',
+        'data',
+      ].map(testStatusSelector);
+    });
+  });
+});
diff --git a/src/editors/data/redux/thunkActions/app.js b/src/editors/data/redux/thunkActions/app.js
new file mode 100644
index 0000000000..09ab9eb61b
--- /dev/null
+++ b/src/editors/data/redux/thunkActions/app.js
@@ -0,0 +1,145 @@
+import { StrictDict, camelizeKeys } from '../../../utils';
+import { isLibraryKey } from '../../../../generic/key-utils';
+import * as requests from './requests';
+// This 'module' self-import hack enables mocking during tests.
+// See src/editors/decisions/0005-internal-editor-testability-decisions.md. The whole approach to how hooks are tested
+// should be re-thought and cleaned up to avoid this pattern.
+// eslint-disable-next-line import/no-self-import
+import * as module from './app';
+import { actions as appActions } from '../app';
+import { actions as requestsActions } from '../requests';
+import { RequestKeys } from '../../constants/requests';
+
+// Similar to `import { actions } from '..';` but avoid circular imports:
+const actions = {
+  app: appActions,
+  requests: requestsActions,
+};
+
+export const fetchBlock = () => (dispatch) => {
+  dispatch(requests.fetchBlock({
+    onSuccess: (response) => {
+      dispatch(actions.app.setBlockValue(response));
+      dispatch(actions.app.setShowRawEditor(response));
+    },
+    onFailure: (error) => dispatch(actions.requests.failRequest({
+      requestKey: RequestKeys.fetchBlock,
+      error,
+    })),
+  }));
+};
+
+export const fetchStudioView = () => (dispatch) => {
+  dispatch(requests.fetchStudioView({
+    onSuccess: (response) => dispatch(actions.app.setStudioView(response)),
+    onFailure: (error) => dispatch(actions.requests.failRequest({
+      requestKey: RequestKeys.fetchStudioView,
+      error,
+    })),
+  }));
+};
+
+export const fetchUnit = () => (dispatch) => {
+  dispatch(requests.fetchUnit({
+    onSuccess: (response) => dispatch(actions.app.setUnitUrl(response)),
+    onFailure: (error) => dispatch(actions.requests.failRequest({
+      requestKey: RequestKeys.fetchUnit,
+      error,
+    })),
+  }));
+};
+
+export const fetchImages = ({ pageNumber }) => (dispatch) => {
+  dispatch(requests.fetchImages({
+    pageNumber,
+    onSuccess: ({ images, imageCount }) => dispatch(actions.app.setImages({ images, imageCount })),
+    onFailure: (error) => dispatch(actions.requests.failRequest({
+      requestKey: RequestKeys.fetchImages,
+      error,
+    })),
+  }));
+};
+
+export const fetchVideos = () => (dispatch) => {
+  dispatch(requests.fetchVideos({
+    onSuccess: (response) => dispatch(actions.app.setVideos(response.data.videos)),
+    onFailure: (error) => dispatch(actions.requests.failRequest({
+      requestKey: RequestKeys.fetchVideos,
+      error,
+    })),
+  }));
+};
+
+export const fetchCourseDetails = () => (dispatch) => {
+  dispatch(requests.fetchCourseDetails({
+    onSuccess: (response) => dispatch(actions.app.setCourseDetails(response)),
+    onFailure: (error) => dispatch(actions.requests.failRequest({
+      requestKey: RequestKeys.fetchCourseDetails,
+      error,
+    })),
+  }));
+};
+
+/**
+ * @param {string} studioEndpointUrl
+ * @param {string} blockId
+ * @param {string} learningContextId
+ * @param {string} blockType
+ */
+export const initialize = (data) => (dispatch) => {
+  const editorType = data.blockType;
+  dispatch(actions.app.initialize(data));
+  dispatch(module.fetchBlock());
+  if (data.blockId?.startsWith('block-v1:')) {
+    dispatch(module.fetchUnit());
+  }
+  switch (editorType) {
+    case 'problem':
+      dispatch(module.fetchImages({ pageNumber: 0 }));
+      break;
+    case 'video':
+      dispatch(module.fetchVideos());
+      dispatch(module.fetchStudioView());
+      dispatch(module.fetchCourseDetails());
+      break;
+    case 'html':
+      if (isLibraryKey(data.learningContextId)) { dispatch(actions.app.resetImages()); }
+      dispatch(module.fetchImages({ pageNumber: 0 }));
+      break;
+    default:
+      break;
+  }
+};
+
+/**
+ * @param {func} onSuccess
+ */
+export const saveBlock = (content, returnToUnit) => (dispatch) => {
+  dispatch(actions.app.setBlockContent(content));
+  dispatch(requests.saveBlock({
+    content,
+    onSuccess: (response) => {
+      dispatch(actions.app.setSaveResponse(response));
+      returnToUnit(response.data);
+    },
+  }));
+};
+
+export const uploadAsset = ({ file, setSelection }) => (dispatch) => {
+  dispatch(requests.uploadAsset({
+    asset: file,
+    onSuccess: (response) => setSelection(camelizeKeys(response.data.asset)),
+  }));
+};
+
+export default StrictDict({
+  fetchBlock,
+  fetchCourseDetails,
+  fetchStudioView,
+  fetchUnit,
+  fetchVideos,
+  initialize,
+  saveBlock,
+  fetchImages,
+  uploadAsset,
+});
diff --git a/src/editors/data/redux/thunkActions/app.test.js b/src/editors/data/redux/thunkActions/app.test.js
new file mode 100644
index 0000000000..5cf52f7941
--- /dev/null
+++ b/src/editors/data/redux/thunkActions/app.test.js
@@ -0,0 +1,353 @@
+/* eslint-disable no-import-assign */
+import { actions } from '..';
+import { camelizeKeys } from '../../../utils';
+import { RequestKeys } from '../../constants/requests';
+import * as thunkActions from './app';
+
+jest.mock('./requests', () => ({
+  fetchBlock: (args) => ({ fetchBlock: args }),
+  fetchUnit: (args) => ({ fetchUnit: args }),
+  saveBlock: (args) => ({ saveBlock: args }),
+  uploadAsset: (args) => ({ uploadAsset: args }),
+  fetchStudioView: (args) => ({ fetchStudioView: args }),
+  fetchImages: (args) => ({ fetchImages: args }),
+  fetchVideos: (args) => ({ fetchVideos: args }),
+  fetchCourseDetails: (args) => ({ fetchCourseDetails: args }),
+}));
+
+jest.mock('../../../utils', () => ({
+  camelizeKeys: (args) => ([{ camelizeKeys: args }]),
+  ...jest.requireActual('../../../utils'),
+}));
+
+const testValue = {
+  data: {
+    assets: 'test VALUE',
+    videos: 'vIDeO vALUe',
+  },
+};
+
+describe('app thunkActions', () => {
+  let dispatch;
+  let dispatchedAction;
+  beforeEach(() => {
+    dispatch = jest.fn((action) => ({ dispatch: action }));
+  });
+  describe('fetchBlock', () => {
+    beforeEach(() => {
+      thunkActions.fetchBlock()(dispatch);
+      [[dispatchedAction]] = dispatch.mock.calls;
+    });
+    it('dispatches fetchBlock action', () => {
+      expect(dispatchedAction.fetchBlock).not.toEqual(undefined);
+    });
+    it('dispatches actions.app.setBlockValue on success', () => {
+      dispatch.mockClear();
+      dispatchedAction.fetchBlock.onSuccess(testValue);
+      expect(dispatch).toHaveBeenCalledWith(actions.app.setBlockValue(testValue));
+    });
+    it('dispatches failRequest with fetchBlock requestKey on failure', () => {
+      dispatch.mockClear();
+      dispatchedAction.fetchBlock.onFailure(testValue);
+      expect(dispatch).toHaveBeenCalledWith(actions.requests.failRequest({
+        requestKey: RequestKeys.fetchBlock,
+        error: testValue,
+      }));
+    });
+  });
+
+  describe('fetchStudioView', () => {
+    beforeEach(() => {
+      thunkActions.fetchStudioView()(dispatch);
+      [[dispatchedAction]] = dispatch.mock.calls;
+    });
+    it('dispatches fetchStudioView action', () => {
+      expect(dispatchedAction.fetchStudioView).not.toEqual(undefined);
+    });
+    it('dispatches actions.app.setStudioViewe on success', () => {
+      dispatch.mockClear();
+      dispatchedAction.fetchStudioView.onSuccess(testValue);
+      expect(dispatch).toHaveBeenCalledWith(actions.app.setStudioView(testValue));
+    });
+    it('dispatches failRequest with fetchStudioView requestKey on failure', () => {
+      dispatch.mockClear();
+      dispatchedAction.fetchStudioView.onFailure(testValue);
+      expect(dispatch).toHaveBeenCalledWith(actions.requests.failRequest({
+        requestKey: RequestKeys.fetchStudioView,
+        error: testValue,
+      }));
+    });
+  });
+
+  describe('fetchUnit', () => {
+    beforeEach(() => {
+      thunkActions.fetchUnit()(dispatch);
+      [[dispatchedAction]] = dispatch.mock.calls;
+    });
+    it('dispatches fetchUnit action', () => {
+      expect(dispatchedAction.fetchUnit).not.toEqual(undefined);
+    });
+    it('dispatches actions.app.setUnitUrl on success', () => {
+      dispatch.mockClear();
+      dispatchedAction.fetchUnit.onSuccess(testValue);
+      expect(dispatch).toHaveBeenCalledWith(actions.app.setUnitUrl(testValue));
+    });
+    it('dispatches failRequest with fetchUnit requestKey on failure', () => {
+      dispatch.mockClear();
+      dispatchedAction.fetchUnit.onFailure(testValue);
+      expect(dispatch).toHaveBeenCalledWith(actions.requests.failRequest({
+        requestKey: RequestKeys.fetchUnit,
+        error: testValue,
+      }));
+    });
+  });
+  describe('fetchImages', () => {
+    beforeEach(() => {
+      thunkActions.fetchImages({ pageNumber: 0 })(dispatch);
+      [[dispatchedAction]] = dispatch.mock.calls;
+    });
+    it('dispatches fetchImages action', () => {
+      expect(dispatchedAction.fetchImages).not.toEqual(undefined);
+    });
+    it('dispatches actions.app.setImages on success', () => {
+      dispatch.mockClear();
+      dispatchedAction.fetchImages.onSuccess({ images: {}, imageCount: 0 });
+      expect(dispatch).toHaveBeenCalledWith(actions.app.setImages({ images: {}, imageCount: 0 }));
+    });
+    it('dispatches failRequest with fetchImages requestKey on failure', () => {
+      dispatch.mockClear();
+      dispatchedAction.fetchImages.onFailure(testValue);
+      expect(dispatch).toHaveBeenCalledWith(actions.requests.failRequest({
+        requestKey: RequestKeys.fetchImages,
+        error: testValue,
+      }));
+    });
+  });
+  describe('fetchVideos', () => {
+    beforeEach(() => {
+      thunkActions.fetchVideos()(dispatch);
+      [[dispatchedAction]] = dispatch.mock.calls;
+    });
+    it('dispatches fetchImages action', () => {
+      expect(dispatchedAction.fetchVideos).not.toEqual(undefined);
+    });
+    it('dispatches actions.app.setVideos on success', () => {
+      dispatch.mockClear();
+      dispatchedAction.fetchVideos.onSuccess(testValue);
+      expect(dispatch).toHaveBeenCalledWith(actions.app.setVideos(testValue.data.videos));
+    });
+    it('dispatches failRequest with fetchVideos requestKey on failure', () => {
+      dispatch.mockClear();
+      dispatchedAction.fetchVideos.onFailure(testValue);
+      expect(dispatch).toHaveBeenCalledWith(actions.requests.failRequest({
+        requestKey: RequestKeys.fetchVideos,
+        error: testValue,
+      }));
+    });
+  });
+  describe('fetchCourseDetails', () => {
+    beforeEach(() => {
+      thunkActions.fetchCourseDetails()(dispatch);
+      [[dispatchedAction]] = dispatch.mock.calls;
+    });
+    it('dispatches fetchUnit action', () => {
+      expect(dispatchedAction.fetchCourseDetails).not.toEqual(undefined);
+    });
+    it('dispatches actions.app.setUnitUrl on success', () => {
+      dispatch.mockClear();
+      dispatchedAction.fetchCourseDetails.onSuccess(testValue);
+      expect(dispatch).toHaveBeenCalledWith(actions.app.setCourseDetails(testValue));
+    });
+    it('dispatches failRequest with fetchCourseDetails requestKey on failure', () => {
+      dispatch.mockClear();
+      dispatchedAction.fetchCourseDetails.onFailure(testValue);
+      expect(dispatch).toHaveBeenCalledWith(actions.requests.failRequest({
+        requestKey: RequestKeys.fetchCourseDetails,
+        error: testValue,
+      }));
+    });
+  });
+  describe('initialize without block type defined', () => {
+    it('dispatches actions.app.initialize, and then fetches both block and unit', () => {
+      const {
+        fetchBlock,
+        fetchUnit,
+        fetchStudioView,
+        fetchImages,
+        fetchVideos,
+        fetchCourseDetails,
+      } = thunkActions;
+      thunkActions.fetchBlock = () => 'fetchBlock';
+      thunkActions.fetchUnit = () => 'fetchUnit';
+      thunkActions.fetchStudioView = () => 'fetchStudioView';
+      thunkActions.fetchImages = () => 'fetchImages';
+      thunkActions.fetchVideos = () => 'fetchVideos';
+      thunkActions.fetchCourseDetails = () => 'fetchCourseDetails';
+      thunkActions.initialize(testValue)(dispatch);
+      expect(dispatch.mock.calls).toEqual([
+        [actions.app.initialize(testValue)],
+        [thunkActions.fetchBlock()],
+      ]);
+      thunkActions.fetchBlock = fetchBlock;
+      thunkActions.fetchUnit = fetchUnit;
+      thunkActions.fetchStudioView = fetchStudioView;
+      thunkActions.fetchImages = fetchImages;
+      thunkActions.fetchVideos = fetchVideos;
+      thunkActions.fetchCourseDetails = fetchCourseDetails;
+    });
+  });
+  describe('initialize with block type html', () => {
+    it('dispatches actions.app.initialize, and then fetches both block and unit', () => {
+      const {
+        fetchBlock,
+        fetchUnit,
+        fetchStudioView,
+        fetchImages,
+        fetchVideos,
+        fetchCourseDetails,
+      } = thunkActions;
+      thunkActions.fetchBlock = () => 'fetchBlock';
+      thunkActions.fetchUnit = () => 'fetchUnit';
+      thunkActions.fetchStudioView = () => 'fetchStudioView';
+      thunkActions.fetchImages = () => 'fetchImages';
+      thunkActions.fetchVideos = () => 'fetchVideos';
+      thunkActions.fetchCourseDetails = () => 'fetchCourseDetails';
+      const data = {
+        ...testValue,
+        blockType: 'html',
+        blockId: 'block-v1:UniversityX+PHYS+1+type@problem+block@123',
+        learningContextId: 'course-v1:UniversityX+PHYS+1',
+      };
+      thunkActions.initialize(data)(dispatch);
+      expect(dispatch.mock.calls).toEqual([
+        [actions.app.initialize(data)],
+        [thunkActions.fetchBlock()],
+        [thunkActions.fetchUnit()],
+        [thunkActions.fetchImages()],
+      ]);
+      thunkActions.fetchBlock = fetchBlock;
+      thunkActions.fetchUnit = fetchUnit;
+      thunkActions.fetchStudioView = fetchStudioView;
+      thunkActions.fetchImages = fetchImages;
+      thunkActions.fetchVideos = fetchVideos;
+      thunkActions.fetchCourseDetails = fetchCourseDetails;
+    });
+  });
+  describe('initialize with block type problem', () => {
+    it('dispatches actions.app.initialize, and then fetches both block and unit', () => {
+      const {
+        fetchBlock,
+        fetchUnit,
+        fetchStudioView,
+        fetchImages,
+        fetchVideos,
+        fetchCourseDetails,
+      } = thunkActions;
+      thunkActions.fetchBlock = () => 'fetchBlock';
+      thunkActions.fetchUnit = () => 'fetchUnit';
+      thunkActions.fetchStudioView = () => 'fetchStudioView';
+      thunkActions.fetchImages = () => 'fetchImages';
+      thunkActions.fetchVideos = () => 'fetchVideos';
+      thunkActions.fetchCourseDetails = () => 'fetchCourseDetails';
+      const data = {
+        ...testValue,
+        blockType: 'problem',
+        blockId: 'block-v1:UniversityX+PHYS+1+type@problem+block@123',
+        learningContextId: 'course-v1:UniversityX+PHYS+1',
+      };
+      thunkActions.initialize(data)(dispatch);
+      expect(dispatch.mock.calls).toEqual([
+        [actions.app.initialize(data)],
+        [thunkActions.fetchBlock()],
+        [thunkActions.fetchUnit()],
+        [thunkActions.fetchImages()],
+      ]);
+      thunkActions.fetchBlock = fetchBlock;
+      thunkActions.fetchUnit = fetchUnit;
+      thunkActions.fetchStudioView = fetchStudioView;
+      thunkActions.fetchImages = fetchImages;
+      thunkActions.fetchVideos = fetchVideos;
+      thunkActions.fetchCourseDetails = fetchCourseDetails;
+    });
+  });
+  describe('initialize with block type video', () => {
+    it('dispatches actions.app.initialize, and then fetches both block and unit', () => {
+      const {
+        fetchBlock,
+        fetchUnit,
+        fetchStudioView,
+        fetchImages,
+        fetchVideos,
+        fetchCourseDetails,
+      } = thunkActions;
+      thunkActions.fetchBlock = () => 'fetchBlock';
+      thunkActions.fetchUnit = () => 'fetchUnit';
+      thunkActions.fetchStudioView = () => 'fetchStudioView';
+      thunkActions.fetchImages = () => 'fetchImages';
+      thunkActions.fetchVideos = () => 'fetchVideos';
+      thunkActions.fetchCourseDetails = () => 'fetchCourseDetails';
+      const data = {
+        ...testValue,
+        blockType: 'video',
+        blockId: 'block-v1:UniversityX+PHYS+1+type@problem+block@123',
+        learningContextId: 'course-v1:UniversityX+PHYS+1',
+      };
+      thunkActions.initialize(data)(dispatch);
+      expect(dispatch.mock.calls).toEqual([
+        [actions.app.initialize(data)],
+        [thunkActions.fetchBlock()],
+        [thunkActions.fetchUnit()],
+        [thunkActions.fetchVideos()],
+        [thunkActions.fetchStudioView()],
+        [thunkActions.fetchCourseDetails()],
+      ]);
+      thunkActions.fetchBlock = fetchBlock;
+      thunkActions.fetchUnit = fetchUnit;
+      thunkActions.fetchStudioView = fetchStudioView;
+      thunkActions.fetchImages = fetchImages;
+      thunkActions.fetchVideos = fetchVideos;
+      thunkActions.fetchCourseDetails = fetchCourseDetails;
+    });
+  });
+  describe('saveBlock', () => {
+    let returnToUnit;
+    let calls;
+    beforeEach(() => {
+      returnToUnit = jest.fn();
+      thunkActions.saveBlock(testValue, returnToUnit)(dispatch);
+      calls = dispatch.mock.calls;
+    });
+    it('dispatches actions.app.setBlockContent with content, before dispatching saveBlock', () => {
+      expect(calls[0]).toEqual([actions.app.setBlockContent(testValue)]);
+      const saveCall = calls[1][0];
+      expect(saveCall.saveBlock).not.toEqual(undefined);
+    });
+    it('dispatches saveBlock with passed content', () => {
+      expect(calls[1][0].saveBlock.content).toEqual(testValue);
+    });
+    it('dispatches actions.app.setSaveResponse with response and then calls returnToUnit', () => {
+      dispatch.mockClear();
+      const response = 'testRESPONSE';
+      calls[1][0].saveBlock.onSuccess(response);
+      expect(dispatch).toHaveBeenCalledWith(actions.app.setSaveResponse(response));
+      expect(returnToUnit).toHaveBeenCalled();
+    });
+  });
+  describe('uploadAsset', () => {
+    const setSelection = jest.fn();
+    beforeEach(() => {
+      thunkActions.uploadAsset({ file: testValue, setSelection })(dispatch);
+      [[dispatchedAction]] = dispatch.mock.calls;
+    });
+    it('dispatches uploadAsset action', () => {
+      expect(dispatchedAction.uploadAsset).not.toBe(undefined);
+    });
+    test('passes file as image prop', () => {
+      expect(dispatchedAction.uploadAsset.asset).toEqual(testValue);
+    });
+    test('onSuccess: calls setSelection with camelized response.data.asset', () => {
+      dispatchedAction.uploadAsset.onSuccess({ data: { asset: testValue } });
+      expect(setSelection).toHaveBeenCalledWith(camelizeKeys(testValue));
+    });
+  });
+});
diff --git a/src/editors/data/redux/thunkActions/index.js b/src/editors/data/redux/thunkActions/index.js
new file mode 100644
index 0000000000..b787e23cff
--- /dev/null
+++ b/src/editors/data/redux/thunkActions/index.js
@@ -0,0 +1,11 @@
+import { StrictDict } from '../../../utils';
+
+import app from './app';
+import video from './video';
+import problem from './problem';
+
+export default StrictDict({
+  app,
+  video,
+  problem,
+});
diff --git a/src/editors/data/redux/thunkActions/problem.test.ts b/src/editors/data/redux/thunkActions/problem.test.ts
new file mode 100644
index 0000000000..6ccc95b295
--- /dev/null
+++ b/src/editors/data/redux/thunkActions/problem.test.ts
@@ -0,0 +1,100 @@
+import 'CourseAuthoring/editors/setupEditorTest';
+import { actions } from '..';
+import {
+  initializeProblem,
+  switchToAdvancedEditor,
+  fetchAdvancedSettings,
+  loadProblem,
+} from './problem';
+import { checkboxesOLXWithFeedbackAndHintsOLX, advancedProblemOlX, blankProblemOLX } from '../../../containers/ProblemEditor/data/mockData/olxTestData';
+import { ProblemTypeKeys } from '../../constants/problem';
+
+const mockOlx = 'SOmEVALue';
+const mockBuildOlx = jest.fn(() => mockOlx);
+jest.mock('../../../containers/ProblemEditor/data/ReactStateOLXParser', () => jest.fn().mockImplementation(() => ({ buildOLX: mockBuildOlx })));
+
+jest.mock('../problem', () => ({
+  actions: {
+    load: () => {},
+    setEnableTypeSelection: () => {},
+    updateField: (args) => args,
+  },
+}));
+
+jest.mock('./requests', () => ({
+  fetchAdvancedSettings: (args) => ({ fetchAdvanceSettings: args }),
+}));
+
+const blockValue = {
+  data: {
+    data: checkboxesOLXWithFeedbackAndHintsOLX.rawOLX,
+    metadata: {},
+  },
+};
+
+let rawOLX = blockValue.data.data;
+const rawSettings = {};
+const defaultSettings = { max_attempts: 1 };
+
+describe('problem thunkActions', () => {
+  let dispatch;
+  let getState;
+  let dispatchedAction;
+  beforeEach(() => {
+    dispatch = jest.fn((action) => ({ dispatch: action }));
+    getState = jest.fn(() => ({
+      problem: {
+      },
+      app: {
+        learningContextId: 'course-v1:org+course+run',
+      },
+    }));
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+  test('initializeProblem visual Problem :', () => {
+    initializeProblem(blockValue)(dispatch, getState);
+    expect(dispatch).toHaveBeenCalled();
+  });
+  test('switchToAdvancedEditor visual Problem', () => {
+    switchToAdvancedEditor()(dispatch, getState);
+    expect(dispatch).toHaveBeenCalledWith(
+      actions.problem.updateField({ problemType: ProblemTypeKeys.ADVANCED, rawOLX: mockOlx }),
+    );
+  });
+  describe('fetchAdvanceSettings', () => {
+    it('dispatches fetchAdvanceSettings action', () => {
+      fetchAdvancedSettings({ rawOLX, rawSettings })(dispatch);
+      [[dispatchedAction]] = dispatch.mock.calls;
+      expect(dispatchedAction.fetchAdvanceSettings).not.toEqual(undefined);
+    });
+    it('dispatches actions.problem.updateField and loadProblem on success', () => {
+      dispatch.mockClear();
+      fetchAdvancedSettings({ rawOLX, rawSettings })(dispatch);
+      [[dispatchedAction]] = dispatch.mock.calls;
+      dispatchedAction.fetchAdvanceSettings.onSuccess({ data: { key: 'test', max_attempts: 1 } });
+      expect(dispatch).toHaveBeenCalledWith(actions.problem.load(undefined));
+    });
+    it('calls loadProblem on failure', () => {
+      dispatch.mockClear();
+      fetchAdvancedSettings({ rawOLX, rawSettings })(dispatch);
+      [[dispatchedAction]] = dispatch.mock.calls;
+      dispatchedAction.fetchAdvanceSettings.onFailure();
+      expect(dispatch).toHaveBeenCalledWith(actions.problem.load(undefined));
+    });
+  });
+  describe('loadProblem', () => {
+    test('initializeProblem advanced Problem', () => {
+      rawOLX = advancedProblemOlX.rawOLX;
+      loadProblem({ rawOLX, rawSettings, defaultSettings })(dispatch);
+      expect(dispatch).toHaveBeenCalledWith(actions.problem.load(undefined));
+    });
+    test('initializeProblem blank Problem', () => {
+      rawOLX = blankProblemOLX.rawOLX;
+      loadProblem({ rawOLX, rawSettings, defaultSettings })(dispatch);
+      expect(dispatch).toHaveBeenCalledWith(actions.problem.setEnableTypeSelection(undefined));
+    });
+  });
+});
diff --git a/src/editors/data/redux/thunkActions/problem.ts b/src/editors/data/redux/thunkActions/problem.ts
new file mode 100644
index 0000000000..79916195e4
--- /dev/null
+++ b/src/editors/data/redux/thunkActions/problem.ts
@@ -0,0 +1,102 @@
+import _ from 'lodash';
+import { actions as problemActions } from '../problem';
+import { actions as requestActions } from '../requests';
+import { selectors as appSelectors } from '../app';
+import * as requests from './requests';
+import { isLibraryKey } from '../../../../generic/key-utils';
+import { OLXParser } from '../../../containers/ProblemEditor/data/OLXParser';
+import { parseSettings } from '../../../containers/ProblemEditor/data/SettingsParser';
+import { ProblemTypeKeys } from '../../constants/problem';
+import ReactStateOLXParser from '../../../containers/ProblemEditor/data/ReactStateOLXParser';
+import { camelizeKeys } from '../../../utils';
+import { fetchEditorContent } from '../../../containers/ProblemEditor/components/EditProblemView/hooks';
+import { RequestKeys } from '../../constants/requests';
+
+// Similar to `import { actions, selectors } from '..';` but avoid circular imports:
+const actions = { problem: problemActions, requests: requestActions };
+const selectors = { app: appSelectors };
+
+export const switchToAdvancedEditor = () => (dispatch, getState) => {
+  const state = getState();
+  const editorObject = fetchEditorContent({ format: '' });
+  const reactOLXParser = new ReactStateOLXParser({ problem: state.problem, editorObject });
+  const rawOLX = reactOLXParser.buildOLX();
+  dispatch(actions.problem.updateField({ problemType: ProblemTypeKeys.ADVANCED, rawOLX }));
+};
+
+export const isBlankProblem = ({ rawOLX }) => {
+  if (['<problem></problem>', '<problem/>'].includes(rawOLX.replace(/\s/g, ''))) {
+    return true;
+  }
+  return false;
+};
+
+export const getDataFromOlx = ({ rawOLX, rawSettings, defaultSettings }) => {
+  let olxParser;
+  let parsedProblem;
+  const { default_to_advanced: defaultToAdvanced } = rawSettings;
+  try {
+    olxParser = new OLXParser(rawOLX);
+    if (defaultToAdvanced) {
+      parsedProblem = olxParser.getBetaParsedOLXData();
+    } else {
+      parsedProblem = olxParser.getParsedOLXData();
+    }
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error('The Problem Could Not Be Parsed from OLX. redirecting to Advanced editor.', error);
+    return { problemType: ProblemTypeKeys.ADVANCED, rawOLX, settings: parseSettings(rawSettings, defaultSettings) };
+  }
+  if (parsedProblem?.problemType === ProblemTypeKeys.ADVANCED) {
+    return { problemType: ProblemTypeKeys.ADVANCED, rawOLX, settings: parseSettings(rawSettings, defaultSettings) };
+  }
+  const { settings, ...data } = parsedProblem;
+  const parsedSettings = { ...settings, ...parseSettings(rawSettings, defaultSettings) };
+  if (!_.isEmpty(rawOLX) && !_.isEmpty(data)) {
+    return { ...data, rawOLX, settings: parsedSettings };
+  }
+  return { settings: parsedSettings };
+};
+
+export const loadProblem = ({ rawOLX, rawSettings, defaultSettings }) => (dispatch) => {
+  if (isBlankProblem({ rawOLX })) {
+    dispatch(actions.problem.setEnableTypeSelection(camelizeKeys(defaultSettings)));
+  } else {
+    dispatch(actions.problem.load(getDataFromOlx({ rawOLX, rawSettings, defaultSettings })));
+  }
+};
+
+export const fetchAdvancedSettings = ({ rawOLX, rawSettings }) => (dispatch) => {
+  const advancedProblemSettingKeys = ['max_attempts', 'showanswer', 'show_reset_button', 'rerandomize'];
+  dispatch(requests.fetchAdvancedSettings({
+    onSuccess: (response) => {
+      const defaultSettings = {};
+      Object.entries(response.data as Record<string, any>).forEach(([key, value]) => {
+        if (advancedProblemSettingKeys.includes(key)) {
+          defaultSettings[key] = value.value;
+        }
+      });
+      dispatch(actions.problem.updateField({ defaultSettings: camelizeKeys(defaultSettings) }));
+      loadProblem({ rawOLX, rawSettings, defaultSettings })(dispatch);
+    },
+    onFailure: () => { loadProblem({ rawOLX, rawSettings, defaultSettings: {} })(dispatch); },
+  }));
+};
+
+export const initializeProblem = (blockValue) => (dispatch, getState) => {
+  const rawOLX = _.get(blockValue, 'data.data', {});
+  const rawSettings = _.get(blockValue, 'data.metadata', {});
+  const learningContextId = selectors.app.learningContextId(getState());
+  if (isLibraryKey(learningContextId)) {
+    // Content libraries don't yet support defaults for fields like max_attempts, showanswer, etc.
+    // So proceed with loading the problem.
+    // Though first we need to fake the request or else the problem type selection UI won't display:
+    dispatch(actions.requests.completeRequest({ requestKey: RequestKeys.fetchAdvancedSettings, response: {} }));
+    dispatch(loadProblem({ rawOLX, rawSettings, defaultSettings: {} }));
+  } else {
+    // Load the defaults (for max_attempts, etc.) from the course's advanced settings, then proceed:
+    dispatch(fetchAdvancedSettings({ rawOLX, rawSettings }));
+  }
+};
+
+export default { initializeProblem, switchToAdvancedEditor, fetchAdvancedSettings };
diff --git a/src/editors/data/redux/thunkActions/requests.js b/src/editors/data/redux/thunkActions/requests.js
new file mode 100644
index 0000000000..edff3bf875
--- /dev/null
+++ b/src/editors/data/redux/thunkActions/requests.js
@@ -0,0 +1,371 @@
+import { StrictDict, parseLibraryImageData, getLibraryImageAssets } from '../../../utils';
+
+import { RequestKeys } from '../../constants/requests';
+import api, { loadImages } from '../../services/cms/api';
+import { actions as requestsActions } from '../requests';
+import { selectors as appSelectors } from '../app';
+
+// This 'module' self-import hack enables mocking during tests.
+// See src/editors/decisions/0005-internal-editor-testability-decisions.md. The whole approach to how hooks are tested
+// should be re-thought and cleaned up to avoid this pattern.
+// eslint-disable-next-line import/no-self-import
+import * as module from './requests';
+import { isLibraryKey } from '../../../../generic/key-utils';
+import { acceptedImgKeys } from '../../../sharedComponents/ImageUploadModal/SelectImageModal/utils';
+
+// Similar to `import { actions, selectors } from '..';` but avoid circular imports:
+const actions = { requests: requestsActions };
+const selectors = { app: appSelectors };
+
+/**
+ * Wrapper around a network request promise, that sends actions to the redux store to
+ * track the state of that promise.
+ * Tracks the promise by requestKey, and sends an action when it is started, succeeds, or
+ * fails.  It also accepts onSuccess and onFailure methods to be called with the output
+ * of failure or success of the promise.
+ * @param {string} requestKey - request tracking identifier
+ * @param {Promise} promise - api event promise
+ * @param {[func]} onSuccess - onSuccess method ((response) => { ... })
+ * @param {[func]} onFailure - onFailure method ((error) => { ... })
+ */
+export const networkRequest = ({
+  requestKey,
+  promise,
+  onSuccess,
+  onFailure,
+}) => (dispatch) => {
+  dispatch(actions.requests.startRequest(requestKey));
+  return promise
+    .then((response) => {
+      if (onSuccess) {
+        onSuccess(response);
+      }
+      dispatch(actions.requests.completeRequest({ requestKey, response }));
+    })
+    .catch((error) => {
+      if (onFailure) {
+        onFailure(error);
+      }
+      dispatch(actions.requests.failRequest({ requestKey, error }));
+    });
+};
+
+/**
+ * Tracked fetchByBlockId api method.
+ * Tracked to the `fetchBlock` request key.
+ * @param {[func]} onSuccess - onSuccess method ((response) => { ... })
+ * @param {[func]} onFailure - onFailure method ((error) => { ... })
+ */
+export const fetchBlock = ({ ...rest }) => (dispatch, getState) => {
+  dispatch(module.networkRequest({
+    requestKey: RequestKeys.fetchBlock,
+    promise: api.fetchBlockById({
+      studioEndpointUrl: selectors.app.studioEndpointUrl(getState()),
+      blockId: selectors.app.blockId(getState()),
+    }),
+    ...rest,
+  }));
+};
+
+/**
+
+ * Tracked fetchStudioView api method.
+ * Tracked to the `fetchBlock` request key.
+ * @param {[func]} onSuccess - onSuccess method ((response) => { ... })
+ * @param {[func]} onFailure - onFailure method ((error) => { ... })
+ */
+export const fetchStudioView = ({ ...rest }) => (dispatch, getState) => {
+  dispatch(module.networkRequest({
+    requestKey: RequestKeys.fetchStudioView,
+    promise: api.fetchStudioView({
+      studioEndpointUrl: selectors.app.studioEndpointUrl(getState()),
+      blockId: selectors.app.blockId(getState()),
+    }),
+    ...rest,
+  }));
+};
+
+/**
+ * Tracked fetchByUnitId api method.
+ * Tracked to the `fetchUnit` request key.
+ * @param {[func]} onSuccess - onSuccess method ((response) => { ... })
+ * @param {[func]} onFailure - onFailure method ((error) => { ... })
+ */
+export const fetchUnit = ({ ...rest }) => (dispatch, getState) => {
+  dispatch(module.networkRequest({
+    requestKey: RequestKeys.fetchUnit,
+    promise: api.fetchByUnitId({
+      studioEndpointUrl: selectors.app.studioEndpointUrl(getState()),
+      blockId: selectors.app.blockId(getState()),
+    }),
+    ...rest,
+  }));
+};
+
+/**
+ * Tracked saveBlock api method.  Tracked to the `saveBlock` request key.
+ * @param {string} content
+ * @param {[func]} onSuccess - onSuccess method ((response) => { ... })
+ * @param {[func]} onFailure - onFailure method ((error) => { ... })
+ */
+export const saveBlock = ({ content, ...rest }) => (dispatch, getState) => {
+  dispatch(module.networkRequest({
+    requestKey: RequestKeys.saveBlock,
+    promise: api.saveBlock({
+      blockId: selectors.app.blockId(getState()),
+      blockType: selectors.app.blockType(getState()),
+      learningContextId: selectors.app.learningContextId(getState()),
+      content,
+      studioEndpointUrl: selectors.app.studioEndpointUrl(getState()),
+      title: selectors.app.blockTitle(getState()),
+    }),
+    ...rest,
+  }));
+};
+export const uploadAsset = ({ asset, ...rest }) => (dispatch, getState) => {
+  const learningContextId = selectors.app.learningContextId(getState());
+  dispatch(module.networkRequest({
+    requestKey: RequestKeys.uploadAsset,
+    promise: api.uploadAsset({
+      learningContextId,
+      asset,
+      studioEndpointUrl: selectors.app.studioEndpointUrl(getState()),
+      blockId: selectors.app.blockId(getState()),
+    }).then((resp) => {
+      if (isLibraryKey(learningContextId)) {
+        return ({
+          ...resp,
+          data: { asset: parseLibraryImageData(resp.data) },
+        });
+      }
+      return resp;
+    }),
+    ...rest,
+  }));
+};
+
+export const fetchImages = ({ pageNumber, ...rest }) => (dispatch, getState) => {
+  const learningContextId = selectors.app.learningContextId(getState());
+  if (isLibraryKey(learningContextId)) {
+    dispatch(module.networkRequest({
+      requestKey: RequestKeys.fetchImages,
+      promise: api
+        .fetchLibraryImages({
+          pageNumber,
+          blockId: selectors.app.blockId(getState()),
+          studioEndpointUrl: selectors.app.studioEndpointUrl(getState()),
+          learningContextId,
+        })
+        .then(({ data }) => {
+          const images = getLibraryImageAssets(data.files, Object.keys(acceptedImgKeys));
+          return { images, imageCount: Object.keys(images).length };
+        }),
+      ...rest,
+    }));
+    return;
+  }
+  dispatch(module.networkRequest({
+    requestKey: RequestKeys.fetchImages,
+    promise: api
+      .fetchCourseImages({
+        pageNumber,
+        blockId: selectors.app.blockId(getState()),
+        studioEndpointUrl: selectors.app.studioEndpointUrl(getState()),
+        learningContextId,
+      })
+      .then(({ data }) => ({ images: loadImages(data.assets), imageCount: data.totalCount })),
+    ...rest,
+  }));
+};
+
+export const fetchVideos = ({ ...rest }) => (dispatch, getState) => {
+  dispatch(module.networkRequest({
+    requestKey: RequestKeys.fetchVideos,
+    promise: api
+      .fetchVideos({
+        studioEndpointUrl: selectors.app.studioEndpointUrl(getState()),
+        learningContextId: selectors.app.learningContextId(getState()),
+      }),
+    ...rest,
+  }));
+};
+
+export const allowThumbnailUpload = ({ ...rest }) => (dispatch, getState) => {
+  dispatch(module.networkRequest({
+    requestKey: RequestKeys.allowThumbnailUpload,
+    promise: api.allowThumbnailUpload({
+      studioEndpointUrl: selectors.app.studioEndpointUrl(getState()),
+    }),
+    ...rest,
+  }));
+};
+
+export const uploadThumbnail = ({ thumbnail, videoId, ...rest }) => (dispatch, getState) => {
+  dispatch(module.networkRequest({
+    requestKey: RequestKeys.uploadThumbnail,
+    promise: api.uploadThumbnail({
+      studioEndpointUrl: selectors.app.studioEndpointUrl(getState()),
+      learningContextId: selectors.app.learningContextId(getState()),
+      thumbnail,
+      videoId,
+    }),
+    ...rest,
+  }));
+};
+
+export const checkTranscriptsForImport = ({ videoId, youTubeId, ...rest }) => (dispatch, getState) => {
+  dispatch(module.networkRequest({
+    requestKey: RequestKeys.checkTranscriptsForImport,
+    promise: api.checkTranscriptsForImport({
+      blockId: selectors.app.blockId(getState()),
+      videoId,
+      youTubeId,
+      studioEndpointUrl: selectors.app.studioEndpointUrl(getState()),
+    }),
+    ...rest,
+  }));
+};
+
+export const importTranscript = ({ youTubeId, ...rest }) => (dispatch, getState) => {
+  dispatch(module.networkRequest({
+    requestKey: RequestKeys.importTranscript,
+    promise: api.importTranscript({
+      blockId: selectors.app.blockId(getState()),
+      studioEndpointUrl: selectors.app.studioEndpointUrl(getState()),
+      youTubeId,
+    }),
+    ...rest,
+  }));
+};
+
+export const deleteTranscript = ({ language, videoId, ...rest }) => (dispatch, getState) => {
+  dispatch(module.networkRequest({
+    requestKey: RequestKeys.deleteTranscript,
+    promise: api.deleteTranscript({
+      blockId: selectors.app.blockId(getState()),
+      language,
+      videoId,
+      studioEndpointUrl: selectors.app.studioEndpointUrl(getState()),
+    }),
+    ...rest,
+  }));
+};
+
+export const uploadTranscript = ({
+  transcript,
+  videoId,
+  language,
+  ...rest
+}) => (dispatch, getState) => {
+  dispatch(module.networkRequest({
+    requestKey: RequestKeys.uploadTranscript,
+    promise: api.uploadTranscript({
+      blockId: selectors.app.blockId(getState()),
+      transcript,
+      videoId,
+      language,
+      studioEndpointUrl: selectors.app.studioEndpointUrl(getState()),
+    }),
+    ...rest,
+  }));
+};
+
+export const updateTranscriptLanguage = ({
+  file,
+  languageBeforeChange,
+  newLanguageCode,
+  videoId,
+  ...rest
+}) => (dispatch, getState) => {
+  dispatch(module.networkRequest({
+    requestKey: RequestKeys.updateTranscriptLanguage,
+    promise: api.uploadTranscript({
+      blockId: selectors.app.blockId(getState()),
+      transcript: file,
+      videoId,
+      language: languageBeforeChange,
+      newLanguage: newLanguageCode,
+      studioEndpointUrl: selectors.app.studioEndpointUrl(getState()),
+    }),
+    ...rest,
+  }));
+};
+
+export const getTranscriptFile = ({ language, videoId, ...rest }) => (dispatch, getState) => {
+  dispatch(module.networkRequest({
+    requestKey: RequestKeys.getTranscriptFile,
+    promise: api.getTranscript({
+      studioEndpointUrl: selectors.app.studioEndpointUrl(getState()),
+      blockId: selectors.app.blockId(getState()),
+      videoId,
+      language,
+    }),
+    ...rest,
+  }));
+};
+
+export const fetchCourseDetails = ({ ...rest }) => (dispatch, getState) => {
+  dispatch(module.networkRequest({
+    requestKey: RequestKeys.fetchCourseDetails,
+    promise: api.fetchCourseDetails({
+      studioEndpointUrl: selectors.app.studioEndpointUrl(getState()),
+      learningContextId: selectors.app.learningContextId(getState()),
+    }),
+    ...rest,
+  }));
+};
+
+export const fetchAdvancedSettings = ({ ...rest }) => (dispatch, getState) => {
+  dispatch(module.networkRequest({
+    requestKey: RequestKeys.fetchAdvancedSettings,
+    promise: api.fetchAdvancedSettings({
+      studioEndpointUrl: selectors.app.studioEndpointUrl(getState()),
+      learningContextId: selectors.app.learningContextId(getState()),
+    }),
+    ...rest,
+  }));
+};
+
+export const fetchVideoFeatures = ({ ...rest }) => (dispatch, getState) => {
+  dispatch(module.networkRequest({
+    requestKey: RequestKeys.fetchVideoFeatures,
+    promise: api.fetchVideoFeatures({
+      studioEndpointUrl: selectors.app.studioEndpointUrl(getState()),
+    }),
+    ...rest,
+  }));
+};
+
+export const uploadVideo = ({ data, ...rest }) => (dispatch, getState) => {
+  dispatch(module.networkRequest({
+    requestKey: RequestKeys.uploadVideo,
+    promise: api.uploadVideo({
+      data,
+      studioEndpointUrl: selectors.app.studioEndpointUrl(getState()),
+      learningContextId: selectors.app.learningContextId(getState()),
+    }),
+    ...rest,
+  }));
+};
+
+export default StrictDict({
+  fetchBlock,
+  fetchStudioView,
+  fetchUnit,
+  saveBlock,
+  fetchImages,
+  fetchVideos,
+  uploadAsset,
+  allowThumbnailUpload,
+  uploadThumbnail,
+  deleteTranscript,
+  uploadTranscript,
+  updateTranscriptLanguage,
+  fetchCourseDetails,
+  getTranscriptFile,
+  checkTranscriptsForImport,
+  importTranscript,
+  fetchAdvancedSettings,
+  fetchVideoFeatures,
+  uploadVideo,
+});
diff --git a/src/editors/data/redux/thunkActions/requests.test.js b/src/editors/data/redux/thunkActions/requests.test.js
new file mode 100644
index 0000000000..ece5411780
--- /dev/null
+++ b/src/editors/data/redux/thunkActions/requests.test.js
@@ -0,0 +1,588 @@
+import { keyStore, parseLibraryImageData, getLibraryImageAssets } from '../../../utils';
+import { RequestKeys } from '../../constants/requests';
+import api from '../../services/cms/api';
+import * as requests from './requests';
+import { actions, selectors } from '../index';
+
+const testState = {
+  some: 'data',
+};
+
+jest.mock('../app/selectors', () => ({
+  simpleSelectors: {
+    studioEndpointUrl: (state) => ({ studioEndpointUrl: state }),
+    blockId: (state) => ({ blockId: state }),
+  },
+  studioEndpointUrl: (state) => ({ studioEndpointUrl: state }),
+  blockId: (state) => ({ blockId: state }),
+  blockType: (state) => ({ blockType: state }),
+  learningContextId: (state) => ({ learningContextId: state }),
+  blockTitle: (state) => ({ title: state }),
+}));
+
+jest.mock('../../services/cms/api', () => ({
+  fetchBlockById: ({ id, url }) => ({ id, url }),
+  fetchStudioView: ({ id, url }) => ({ id, url }),
+  fetchByUnitId: ({ id, url }) => ({ id, url }),
+  fetchCourseDetails: (args) => args,
+  saveBlock: (args) => args,
+  fetchCourseImages: ({ id, url }) => ({ id, url }),
+  fetchLibraryImages: ({ id, url }) => ({ id, url }),
+  fetchVideos: ({ id, url }) => ({ id, url }),
+  uploadAsset: (args) => args,
+  loadImages: jest.fn(),
+  uploadThumbnail: (args) => args,
+  uploadTranscript: (args) => args,
+  deleteTranscript: (args) => args,
+  getTranscript: (args) => args,
+  checkTranscriptsForImport: (args) => args,
+  importTranscript: (args) => args,
+  fetchVideoFeatures: (args) => args,
+  uploadVideo: (args) => args,
+}));
+
+jest.mock('../../../utils', () => ({
+  ...jest.requireActual('../../../utils'),
+  parseLibraryImageData: jest.fn(),
+  getLibraryImageAssets: jest.fn(() => ({})),
+}));
+
+const apiKeys = keyStore(api);
+
+let dispatch;
+let onSuccess;
+let onFailure;
+
+const fetchParams = { fetchParam1: 'param1', fetchParam2: 'param2' };
+
+describe('requests thunkActions module', () => {
+  beforeEach(() => {
+    dispatch = jest.fn();
+    onSuccess = jest.fn();
+    onFailure = jest.fn();
+  });
+
+  describe('networkRequest', () => {
+    const requestKey = 'test-request';
+    const testData = ({ some: 'test data' });
+    let resolveFn;
+    let rejectFn;
+    describe('without success and failure handlers', () => {
+      beforeEach(() => {
+        requests.networkRequest({
+          requestKey,
+          promise: new Promise((resolve, reject) => {
+            resolveFn = resolve;
+            rejectFn = reject;
+          }),
+        })(dispatch);
+      });
+      test('calls startRequest action with requestKey', async () => {
+        expect(dispatch.mock.calls).toEqual([[actions.requests.startRequest(requestKey)]]);
+      });
+      describe('on success', () => {
+        beforeEach(async () => {
+          await resolveFn(testData);
+        });
+        it('dispatches completeRequest', async () => {
+          expect(dispatch.mock.calls).toEqual([
+            [actions.requests.startRequest(requestKey)],
+            [actions.requests.completeRequest({ requestKey, response: testData })],
+          ]);
+        });
+      });
+      describe('on failure', () => {
+        beforeEach(async () => {
+          await rejectFn(testData);
+        });
+        test('dispatches completeRequest', async () => {
+          expect(dispatch.mock.calls).toEqual([
+            [actions.requests.startRequest(requestKey)],
+            [actions.requests.failRequest({ requestKey, error: testData })],
+          ]);
+        });
+      });
+    });
+    describe('with handlers', () => {
+      beforeEach(() => {
+        onSuccess = jest.fn();
+        onFailure = jest.fn();
+        requests.networkRequest({
+          requestKey,
+          promise: new Promise((resolve, reject) => {
+            resolveFn = resolve;
+            rejectFn = reject;
+          }),
+          onSuccess,
+          onFailure,
+        })(dispatch);
+      });
+      test('calls startRequest action with requestKey', async () => {
+        expect(dispatch.mock.calls).toEqual([[actions.requests.startRequest(requestKey)]]);
+      });
+      describe('on success', () => {
+        beforeEach(async () => {
+          await resolveFn(testData);
+        });
+        it('dispatches completeRequest', async () => {
+          expect(dispatch.mock.calls).toEqual([
+            [actions.requests.startRequest(requestKey)],
+            [actions.requests.completeRequest({ requestKey, response: testData })],
+          ]);
+        });
+        it('calls onSuccess with response', async () => {
+          expect(onSuccess).toHaveBeenCalledWith(testData);
+          expect(onFailure).not.toHaveBeenCalled();
+        });
+      });
+      describe('on failure', () => {
+        beforeEach(async () => {
+          await rejectFn(testData);
+        });
+        test('dispatches completeRequest', async () => {
+          expect(dispatch.mock.calls).toEqual([
+            [actions.requests.startRequest(requestKey)],
+            [actions.requests.failRequest({ requestKey, error: testData })],
+          ]);
+        });
+        test('calls onFailure with response', async () => {
+          expect(onFailure).toHaveBeenCalledWith(testData);
+          expect(onSuccess).not.toHaveBeenCalled();
+        });
+      });
+    });
+  });
+
+  const testNetworkRequestAction = ({
+    action,
+    args,
+    expectedData,
+    expectedString,
+  }) => {
+    let dispatchedAction;
+    beforeEach(() => {
+      action({ ...args, onSuccess, onFailure })(dispatch, () => testState);
+      [[dispatchedAction]] = dispatch.mock.calls;
+    });
+    it('dispatches networkRequest', () => {
+      expect(dispatchedAction.networkRequest).not.toEqual(undefined);
+    });
+    test('forwards onSuccess and onFailure', () => {
+      expect(dispatchedAction.networkRequest.onSuccess).toEqual(onSuccess);
+      expect(dispatchedAction.networkRequest.onFailure).toEqual(onFailure);
+    });
+    test(expectedString, () => {
+      expect(dispatchedAction.networkRequest).toEqual({
+        ...expectedData,
+        onSuccess,
+        onFailure,
+      });
+    });
+  };
+  describe('network request actions', () => {
+    beforeEach(() => {
+      // eslint-disable-next-line no-import-assign
+      requests.networkRequest = jest.fn(args => ({ networkRequest: args }));
+    });
+    describe('fetchBlock', () => {
+      testNetworkRequestAction({
+        action: requests.fetchBlock,
+        args: fetchParams,
+        expectedString: 'with fetchBlock promise',
+        expectedData: {
+          ...fetchParams,
+          requestKey: RequestKeys.fetchBlock,
+          promise: api.fetchBlockById({
+            studioEndpointUrl: selectors.app.studioEndpointUrl(testState),
+            blockId: selectors.app.blockId(testState),
+          }),
+        },
+      });
+    });
+    describe('fetchUnit', () => {
+      testNetworkRequestAction({
+        action: requests.fetchUnit,
+        args: fetchParams,
+        expectedString: 'with fetchUnit promise',
+        expectedData: {
+          ...fetchParams,
+          requestKey: RequestKeys.fetchUnit,
+          promise: api.fetchByUnitId({
+            studioEndpointUrl: selectors.app.studioEndpointUrl(testState),
+            blockId: selectors.app.blockId(testState),
+          }),
+        },
+      });
+    });
+    describe('fetchStudioView', () => {
+      testNetworkRequestAction({
+        action: requests.fetchStudioView,
+        args: fetchParams,
+        expectedString: 'with fetchStudioView promise',
+        expectedData: {
+          ...fetchParams,
+          requestKey: RequestKeys.fetchStudioView,
+          promise: api.fetchStudioView({
+            studioEndpointUrl: selectors.app.studioEndpointUrl(testState),
+            blockId: selectors.app.blockId(testState),
+          }),
+        },
+      });
+    });
+    describe('fetchCourseDetails', () => {
+      testNetworkRequestAction({
+        action: requests.fetchCourseDetails,
+        args: fetchParams,
+        expectedString: 'with fetchCourseDetails promise',
+        expectedData: {
+          ...fetchParams,
+          requestKey: RequestKeys.fetchCourseDetails,
+          promise: api.fetchCourseDetails({
+            studioEndpointUrl: selectors.app.studioEndpointUrl(testState),
+            learningContextId: selectors.app.learningContextId(testState),
+          }),
+        },
+      });
+    });
+    describe('fetchImages', () => {
+      let fetchImages;
+      let loadImages;
+      let dispatchedAction;
+      describe('courses', () => {
+        beforeEach(() => {
+          fetchImages = jest.fn((args) => new Promise((resolve) => {
+            resolve({ data: { assets: { fetchImages: args } } });
+          }));
+          jest.spyOn(api, apiKeys.fetchCourseImages).mockImplementationOnce(fetchImages);
+          loadImages = jest.spyOn(api, apiKeys.loadImages).mockImplementationOnce(() => ({}));
+          requests.fetchImages({ ...fetchParams, onSuccess, onFailure })(dispatch, () => testState);
+          [[dispatchedAction]] = dispatch.mock.calls;
+        });
+        const expectedArgs = {
+          blockId: selectors.app.blockId(testState),
+          studioEndpointUrl: selectors.app.studioEndpointUrl(testState),
+          learningContextId: selectors.app.learningContextId(testState),
+        };
+        it('dispatches networkRequest', () => {
+          expect(dispatchedAction.networkRequest).not.toEqual(undefined);
+        });
+        test('forwards onSuccess and onFailure', () => {
+          expect(dispatchedAction.networkRequest.onSuccess).toEqual(onSuccess);
+          expect(dispatchedAction.networkRequest.onFailure).toEqual(onFailure);
+        });
+        test('api.fetchImages promise called with studioEndpointUrl and learningContextId', () => {
+          expect(fetchImages).toHaveBeenCalledWith(expectedArgs);
+        });
+        test('promise is chained with api.loadImages', () => {
+          expect(loadImages).toHaveBeenCalledWith({ fetchImages: expectedArgs });
+        });
+        test('promise is chained with api.loadImages', () => {
+          expect(loadImages).toHaveBeenCalledWith({ fetchImages: expectedArgs });
+        });
+      });
+      describe('libraries', () => {
+        const expectedArgs = {
+          learningContextId: 'lib:demo',
+          studioEndpointUrl: selectors.app.studioEndpointUrl(testState),
+          blockId: selectors.app.blockId(testState),
+        };
+        beforeEach(() => {
+          jest.spyOn(selectors.app, 'learningContextId').mockImplementationOnce(() => ('lib:demo'));
+          fetchImages = jest.fn((args) => new Promise((resolve) => {
+            resolve({ data: { files: { fetchImages: args } } });
+          }));
+          jest.spyOn(api, apiKeys.fetchLibraryImages).mockImplementationOnce(fetchImages);
+          requests.fetchImages({
+            ...fetchParams, onSuccess, onFailure,
+          })(dispatch, () => testState);
+          [[dispatchedAction]] = dispatch.mock.calls;
+        });
+        test('api.fetchImages promise called with studioEndpointUrl and blockId', () => {
+          expect(fetchImages).toHaveBeenCalledWith(expectedArgs);
+          expect(getLibraryImageAssets).toHaveBeenCalled();
+        });
+      });
+    });
+    describe('fetchVideos', () => {
+      const expectedArgs = {
+        studioEndpointUrl: selectors.app.studioEndpointUrl(testState),
+        learningContextId: selectors.app.learningContextId(testState),
+      };
+      let fetchVideos;
+      let dispatchedAction;
+      beforeEach(() => {
+        fetchVideos = jest.fn((args) => new Promise((resolve) => {
+          resolve({ data: { videos: { fetchVideos: args } } });
+        }));
+        jest.spyOn(api, apiKeys.fetchVideos).mockImplementationOnce(fetchVideos);
+        requests.fetchVideos({ ...fetchParams, onSuccess, onFailure })(dispatch, () => testState);
+        [[dispatchedAction]] = dispatch.mock.calls;
+      });
+      it('dispatches networkRequest', () => {
+        expect(dispatchedAction.networkRequest).not.toEqual(undefined);
+      });
+      test('forwards onSuccess and onFailure', () => {
+        expect(dispatchedAction.networkRequest.onSuccess).toEqual(onSuccess);
+        expect(dispatchedAction.networkRequest.onFailure).toEqual(onFailure);
+      });
+      test('api.fetchVideos promise called with studioEndpointUrl and learningContextId', () => {
+        expect(fetchVideos).toHaveBeenCalledWith(expectedArgs);
+      });
+    });
+    describe('saveBlock', () => {
+      const content = 'SoME HtMl CoNtent As String';
+      testNetworkRequestAction({
+        action: requests.saveBlock,
+        args: { content, ...fetchParams },
+        expectedString: 'with saveBlock promise',
+        expectedData: {
+          ...fetchParams,
+          requestKey: RequestKeys.saveBlock,
+          promise: api.saveBlock({
+            blockId: selectors.app.blockId(testState),
+            blockType: selectors.app.blockType(testState),
+            learningContextId: selectors.app.learningContextId(testState),
+            content,
+            studioEndpointUrl: selectors.app.studioEndpointUrl(testState),
+            title: selectors.app.blockTitle(testState),
+          }),
+        },
+      });
+    });
+    describe('uploadAsset', () => {
+      const asset = 'SoME iMage CoNtent As String';
+      let uploadAsset;
+      let dispatchedAction;
+
+      describe('courses', () => {
+        const expectedArgs = {
+          learningContextId: selectors.app.learningContextId(testState),
+          studioEndpointUrl: selectors.app.studioEndpointUrl(testState),
+          blockId: selectors.app.blockId(testState),
+          asset,
+        };
+        beforeEach(() => {
+          uploadAsset = jest.fn((args) => new Promise((resolve) => {
+            resolve({ data: { asset: args } });
+          }));
+          jest.spyOn(api, apiKeys.uploadAsset).mockImplementationOnce(uploadAsset);
+          requests.uploadAsset({
+            asset, ...fetchParams, onSuccess, onFailure,
+          })(dispatch, () => testState);
+          [[dispatchedAction]] = dispatch.mock.calls;
+        });
+        it('dispatches networkRequest', () => {
+          expect(dispatchedAction.networkRequest).not.toEqual(undefined);
+        });
+        test('forwards onSuccess and onFailure', () => {
+          expect(dispatchedAction.networkRequest.onSuccess).toEqual(onSuccess);
+          expect(dispatchedAction.networkRequest.onFailure).toEqual(onFailure);
+        });
+        test('api.uploadAsset promise called with studioEndpointUrl, blockId and learningContextId', () => {
+          expect(uploadAsset).toHaveBeenCalledWith(expectedArgs);
+        });
+      });
+      describe('libraries', () => {
+        const expectedArgs = {
+          learningContextId: 'lib:demo',
+          studioEndpointUrl: selectors.app.studioEndpointUrl(testState),
+          blockId: selectors.app.blockId(testState),
+          asset,
+        };
+        beforeEach(() => {
+          jest.spyOn(selectors.app, 'learningContextId').mockImplementationOnce(() => ('lib:demo'));
+          uploadAsset = jest.fn((args) => new Promise((resolve) => {
+            resolve({ data: { asset: args } });
+          }));
+          jest.spyOn(api, apiKeys.uploadAsset).mockImplementationOnce(uploadAsset);
+          requests.uploadAsset({
+            asset, ...fetchParams, onSuccess, onFailure,
+          })(dispatch, () => testState);
+          [[dispatchedAction]] = dispatch.mock.calls;
+        });
+        test('api.uploadAsset promise called with studioEndpointUrl and blockId', () => {
+          expect(uploadAsset).toHaveBeenCalledWith(expectedArgs);
+          expect(parseLibraryImageData).toHaveBeenCalled();
+        });
+      });
+    });
+
+    describe('uploadThumbnail', () => {
+      const thumbnail = 'SoME tHumbNAil CoNtent As String';
+      const videoId = 'SoME VidEOid CoNtent As String';
+      testNetworkRequestAction({
+        action: requests.uploadThumbnail,
+        args: { thumbnail, videoId, ...fetchParams },
+        expectedString: 'with uploadThumbnail promise',
+        expectedData: {
+          ...fetchParams,
+          requestKey: RequestKeys.uploadThumbnail,
+          promise: api.uploadThumbnail({
+            learningContextId: selectors.app.learningContextId(testState),
+            thumbnail,
+            videoId,
+            studioEndpointUrl: selectors.app.studioEndpointUrl(testState),
+          }),
+        },
+      });
+    });
+    describe('deleteTranscript', () => {
+      const language = 'SoME laNGUage CoNtent As String';
+      const videoId = 'SoME VidEOid CoNtent As String';
+      testNetworkRequestAction({
+        action: requests.deleteTranscript,
+        args: { language, videoId, ...fetchParams },
+        expectedString: 'with deleteTranscript promise',
+        expectedData: {
+          ...fetchParams,
+          requestKey: RequestKeys.deleteTranscript,
+          promise: api.deleteTranscript({
+            blockId: selectors.app.blockId(testState),
+            language,
+            videoId,
+            studioEndpointUrl: selectors.app.studioEndpointUrl(testState),
+          }),
+        },
+      });
+    });
+    describe('checkTranscriptsForImport', () => {
+      const youTubeId = 'SoME yOUtUbEiD As String';
+      const videoId = 'SoME VidEOid As String';
+      testNetworkRequestAction({
+        action: requests.checkTranscriptsForImport,
+        args: { youTubeId, videoId, ...fetchParams },
+        expectedString: 'with checkTranscriptsForImport promise',
+        expectedData: {
+          ...fetchParams,
+          requestKey: RequestKeys.checkTranscriptsForImport,
+          promise: api.checkTranscriptsForImport({
+            blockId: selectors.app.blockId(testState),
+            youTubeId,
+            videoId,
+            studioEndpointUrl: selectors.app.studioEndpointUrl(testState),
+          }),
+        },
+      });
+    });
+    describe('importTranscript', () => {
+      const youTubeId = 'SoME yOUtUbEiD As String';
+      testNetworkRequestAction({
+        action: requests.importTranscript,
+        args: { youTubeId, ...fetchParams },
+        expectedString: 'with importTranscript promise',
+        expectedData: {
+          ...fetchParams,
+          requestKey: RequestKeys.importTranscript,
+          promise: api.importTranscript({
+            blockId: selectors.app.blockId(testState),
+            youTubeId,
+            studioEndpointUrl: selectors.app.studioEndpointUrl(testState),
+          }),
+        },
+      });
+    });
+    describe('getTranscriptFile', () => {
+      const language = 'SoME laNGUage CoNtent As String';
+      const videoId = 'SoME VidEOid CoNtent As String';
+      testNetworkRequestAction({
+        action: requests.getTranscriptFile,
+        args: { language, videoId, ...fetchParams },
+        expectedString: 'with getTranscriptFile promise',
+        expectedData: {
+          ...fetchParams,
+          requestKey: RequestKeys.getTranscriptFile,
+          promise: api.getTranscript({
+            blockId: selectors.app.blockId(testState),
+            language,
+            videoId,
+            studioEndpointUrl: selectors.app.studioEndpointUrl(testState),
+          }),
+        },
+      });
+    });
+    describe('updateTranscriptLanguage', () => {
+      const languageBeforeChange = 'SoME laNGUage CoNtent As String';
+      const newLanguageCode = 'SoME NEW laNGUage CoNtent As String';
+      const videoId = 'SoME VidEOid CoNtent As String';
+      testNetworkRequestAction({
+        action: requests.updateTranscriptLanguage,
+        args: {
+          languageBeforeChange,
+          newLanguageCode,
+          videoId,
+          ...fetchParams,
+        },
+        expectedString: 'with uploadTranscript promise',
+        expectedData: {
+          ...fetchParams,
+          requestKey: RequestKeys.updateTranscriptLanguage,
+          promise: api.uploadTranscript({
+            blockId: selectors.app.blockId(testState),
+            videoId,
+            language: languageBeforeChange,
+            newLanguage: newLanguageCode,
+            studioEndpointUrl: selectors.app.studioEndpointUrl(testState),
+          }),
+        },
+      });
+    });
+
+    describe('uploadTranscript', () => {
+      const language = 'SoME laNGUage CoNtent As String';
+      const videoId = 'SoME VidEOid CoNtent As String';
+      const transcript = 'SoME tRANscRIPt CoNtent As String';
+      testNetworkRequestAction({
+        action: requests.uploadTranscript,
+        args: {
+          transcript,
+          language,
+          videoId,
+          ...fetchParams,
+        },
+        expectedString: 'with uploadTranscript promise',
+        expectedData: {
+          ...fetchParams,
+          requestKey: RequestKeys.uploadTranscript,
+          promise: api.uploadTranscript({
+            blockId: selectors.app.blockId(testState),
+            transcript,
+            videoId,
+            language,
+            studioEndpointUrl: selectors.app.studioEndpointUrl(testState),
+          }),
+        },
+      });
+    });
+    describe('fetchVideoFeatures', () => {
+      testNetworkRequestAction({
+        action: requests.fetchVideoFeatures,
+        args: { ...fetchParams },
+        expectedString: 'with fetchVideoFeatures promise',
+        expectedData: {
+          ...fetchParams,
+          requestKey: RequestKeys.fetchVideoFeatures,
+          promise: api.fetchVideoFeatures({
+            studioEndpointUrl: selectors.app.studioEndpointUrl(testState),
+          }),
+        },
+      });
+    });
+    describe('uploadVideo', () => {
+      const data = { files: [{ file_name: 'video.mp4', content_type: 'mp4' }] };
+      testNetworkRequestAction({
+        action: requests.uploadVideo,
+        args: { ...fetchParams, data },
+        expectedString: 'with uploadVideo promise',
+        expectedData: {
+          ...fetchParams,
+          requestKey: RequestKeys.uploadVideo,
+          promise: api.uploadVideo({
+            studioEndpointUrl: selectors.app.studioEndpointUrl(testState),
+            learningContextId: selectors.app.learningContextId(testState),
+            data,
+          }),
+        },
+      });
+    });
+  });
+});
diff --git a/src/editors/data/redux/thunkActions/testUtils.js b/src/editors/data/redux/thunkActions/testUtils.js
new file mode 100644
index 0000000000..aaaa71a985
--- /dev/null
+++ b/src/editors/data/redux/thunkActions/testUtils.js
@@ -0,0 +1,54 @@
+/* eslint-disable import/no-extraneous-dependencies */
+/* istanbul ignore file */
+import configureMockStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+
+const mockStore = configureMockStore([thunk]);
+
+/** createTestFetcher(mockedMethod, thunkAction, args, onDispatch)
+ * Creates a testFetch method, which will test a given thunkAction of the form:
+ *   ```
+ *   const <thunkAction> = (<args>) => (dispatch, getState) => {
+ *   ...
+ *   return <mockedMethod>.then().catch();
+ *   ```
+ * The returned function will take a promise handler function, a list of expected actions
+ * to have been dispatched (objects only), and an optional verifyFn method to be called after
+ * the fetch has been completed.
+ *
+ * @param {fn} mockedMethod - already-mocked api method being exercised by the thunkAction.
+ * @param {fn} thunkAction - thunkAction to call/test
+ * @param {array} args - array of args to dispatch the thunkAction with
+ * @param {[fn]} onDispatch - optional function to be called after dispatch
+ *
+ * @return {fn} testFetch method
+ *   @param {fn} resolveFn - promise handler of the form (resolve, reject) => {}.
+ *     should return a call to resolve or reject with response data.
+ *   @param {object[]} expectedActions - array of action objects expected to have been dispatched
+ *     will be verified after the thunkAction resolves
+ *   @param {[fn]} verifyFn - optional function to be called after dispatch
+ */
+export const createTestFetcher = (
+  mockedMethod,
+  thunkAction,
+  args,
+  onDispatch,
+) => (
+  resolveFn,
+  expectedActions,
+) => {
+  const store = mockStore({});
+  mockedMethod.mockReturnValue(new Promise(resolve => {
+    resolve(new Promise(resolveFn));
+  }));
+  return store.dispatch(thunkAction(...args)).then(() => {
+    onDispatch();
+    if (expectedActions !== undefined) {
+      expect(store.getActions()).toEqual(expectedActions);
+    }
+  });
+};
+
+export default {
+  createTestFetcher,
+};
diff --git a/src/editors/data/redux/thunkActions/video.js b/src/editors/data/redux/thunkActions/video.js
new file mode 100644
index 0000000000..352d989737
--- /dev/null
+++ b/src/editors/data/redux/thunkActions/video.js
@@ -0,0 +1,459 @@
+import _, { isEmpty } from 'lodash';
+import { removeItemOnce } from '../../../utils';
+import * as requests from './requests';
+// This 'module' self-import hack enables mocking during tests.
+// See src/editors/decisions/0005-internal-editor-testability-decisions.md. The whole approach to how hooks are tested
+// should be re-thought and cleaned up to avoid this pattern.
+// eslint-disable-next-line import/no-self-import
+import * as module from './video';
+import { valueFromDuration } from '../../../containers/VideoEditor/components/VideoSettingsModal/components/DurationWidget/hooks';
+import { parseYoutubeId } from '../../services/cms/api';
+import { selectors as appSelectors } from '../app';
+import { actions as videoActions, selectors as videoSelectors } from '../video';
+
+// Similar to `import { actions, selectors } from '..';` but avoid circular imports:
+const actions = { video: videoActions };
+const selectors = { app: appSelectors, video: videoSelectors };
+
+export const loadVideoData = (selectedVideoId, selectedVideoUrl) => (dispatch, getState) => {
+  const state = getState();
+  const blockValueData = state.app.blockValue.data;
+  let rawVideoData = blockValueData.metadata ? blockValueData.metadata : {};
+  const rawVideos = Object.values(selectors.app.videos(state));
+  if (selectedVideoId !== undefined && selectedVideoId !== null) {
+    const selectedVideo = _.find(rawVideos, video => {
+      if (_.has(video, 'edx_video_id')) {
+        return video.edx_video_id === selectedVideoId;
+      }
+      return false;
+    });
+
+    if (selectedVideo !== undefined && selectedVideo !== null) {
+      rawVideoData = {
+        edx_video_id: selectedVideo.edx_video_id,
+        thumbnail: selectedVideo.course_video_image_url,
+        duration: selectedVideo.duration,
+        transcriptsFromSelected: selectedVideo.transcripts,
+        selectedVideoTranscriptUrls: selectedVideo.transcript_urls,
+      };
+    }
+  }
+
+  const courseData = state.app.courseDetails.data ? state.app.courseDetails.data : {};
+  let studioView = state.app.studioView?.data?.html;
+  if (state.app.blockId.startsWith('lb:')) {
+    studioView = state.app.studioView?.data?.content;
+  }
+
+  const {
+    videoId,
+    videoUrl,
+    fallbackVideos,
+  } = module.determineVideoSources({
+    edxVideoId: rawVideoData.edx_video_id,
+    youtubeId: rawVideoData.youtube_id_1_0,
+    html5Sources: rawVideoData.html5_sources,
+  });
+
+  // Use the selected video url first
+  const videoSourceUrl = selectedVideoUrl != null ? selectedVideoUrl : videoUrl;
+  const [licenseType, licenseOptions] = module.parseLicense({ licenseData: studioView, level: 'block' });
+  // eslint-disable-next-line no-console
+  console.log(licenseType);
+  const transcripts = rawVideoData.transcriptsFromSelected ? rawVideoData.transcriptsFromSelected
+    : module.parseTranscripts({ transcriptsData: studioView });
+
+  const [courseLicenseType, courseLicenseDetails] = module.parseLicense({
+    licenseData: courseData.license,
+    level: 'course',
+  });
+  const allowVideoSharing = module.parseVideoSharingSetting({
+    courseSetting: blockValueData?.video_sharing_options,
+    blockSetting: rawVideoData.public_access,
+  });
+  dispatch(actions.video.load({
+    videoSource: videoSourceUrl || '',
+    videoId,
+    fallbackVideos,
+    allowVideoDownloads: rawVideoData.download_video,
+    allowVideoSharing,
+    videoSharingLearnMoreLink: blockValueData?.video_sharing_doc_url,
+    videoSharingEnabledForCourse: blockValueData?.video_sharing_enabled,
+    transcripts,
+    selectedVideoTranscriptUrls: rawVideoData.selectedVideoTranscriptUrls,
+    allowTranscriptDownloads: rawVideoData.download_track,
+    showTranscriptByDefault: rawVideoData.show_captions,
+    duration: { // TODO duration is not always sent so they should be calculated.
+      startTime: valueFromDuration(rawVideoData.start_time || '00:00:00'),
+      stopTime: valueFromDuration(rawVideoData.end_time || '00:00:00'),
+      total: rawVideoData.duration || 0, // TODO can we get total duration? if not, probably dropping from widget
+    },
+    handout: rawVideoData.handout,
+    licenseType,
+    licenseDetails: {
+      attribution: licenseOptions.by,
+      noncommercial: licenseOptions.nc,
+      noDerivatives: licenseOptions.nd,
+      shareAlike: licenseOptions.sa,
+    },
+    courseLicenseType,
+    courseLicenseDetails: {
+      attribution: courseLicenseDetails.by,
+      noncommercial: courseLicenseDetails.nc,
+      noDerivatives: courseLicenseDetails.nd,
+      shareAlike: courseLicenseDetails.sa,
+    },
+    thumbnail: rawVideoData.thumbnail,
+  }));
+  dispatch(requests.fetchVideoFeatures({
+    onSuccess: (response) => dispatch(actions.video.updateField({
+      allowThumbnailUpload: response.data.allowThumbnailUpload,
+      videoSharingEnabledForAll: response.data.videoSharingEnabled,
+    })),
+  }));
+  const youTubeId = parseYoutubeId(videoSourceUrl);
+  if (youTubeId) {
+    dispatch(requests.checkTranscriptsForImport({
+      videoId,
+      youTubeId,
+      onSuccess: (response) => {
+        if (response.data.command === 'import') {
+          dispatch(actions.video.updateField({
+            allowTranscriptImport: true,
+          }));
+        }
+      },
+    }));
+  }
+};
+
+export const determineVideoSources = ({
+  edxVideoId,
+  youtubeId,
+  html5Sources,
+}) => {
+  const youtubeUrl = `https://youtu.be/${youtubeId}`;
+  let videoUrl;
+  let fallbackVideos;
+  if (youtubeId) {
+    [videoUrl, fallbackVideos] = [youtubeUrl, html5Sources];
+  } else if (Array.isArray(html5Sources) && html5Sources[0]) {
+    [videoUrl, fallbackVideos] = [html5Sources[0], html5Sources.slice(1)];
+  }
+  return {
+    videoId: edxVideoId || '',
+    videoUrl: videoUrl || '',
+    fallbackVideos: fallbackVideos || [],
+  };
+};
+
+export const parseVideoSharingSetting = ({ courseSetting, blockSetting }) => {
+  switch (courseSetting) {
+    case 'all-on':
+      return { level: 'course', value: true };
+    case 'all-off':
+      return { level: 'course', value: false };
+    case 'per-video':
+      return { level: 'block', value: blockSetting };
+    default:
+      return { level: 'block', value: blockSetting };
+  }
+};
+
+export const parseTranscripts = ({ transcriptsData }) => {
+  if (!transcriptsData) {
+    return [];
+  }
+  const cleanedStr = transcriptsData.replace(/&#34;/g, '"');
+  const startString = '"transcripts": ';
+  const endString = ', "youtube_id_0_75": ';
+  const transcriptsJson = cleanedStr.substring(
+    cleanedStr.indexOf(startString) + startString.length,
+    cleanedStr.indexOf(endString),
+  );
+  // const transcriptsObj = JSON.parse(transcriptsJson);
+  try {
+    const transcriptsObj = JSON.parse(transcriptsJson);
+    return Object.keys(transcriptsObj.value);
+  } catch (error) {
+    if (error instanceof SyntaxError) {
+      // eslint-disable-next-line no-console
+      console.error('Invalid JSON:', error.message);
+    } else {
+      throw error;
+    }
+    return [];
+  }
+};
+
+// partially copied from frontend-app-learning/src/courseware/course/course-license/CourseLicense.jsx
+export const parseLicense = ({ licenseData, level }) => {
+  if (!licenseData) {
+    return [null, {}];
+  }
+  let license = licenseData;
+  if (level === 'block') {
+    const metadataArr = licenseData.split('data-metadata');
+    metadataArr.forEach(arr => {
+      const parsedStr = arr.replace(/&#34;/g, '"');
+      if (parsedStr.includes('license')) {
+        license = parsedStr.substring(parsedStr.indexOf('"value"'), parsedStr.indexOf(', "type"')).replace(/"value": |"/g, '');
+      }
+    });
+  }
+  if (!license || license.includes('null')) {
+    return [null, {}];
+  }
+  if (license === 'all-rights-reserved') {
+    // no options, so the entire thing is the license type
+    return [license, {}];
+  }
+  // Search for a colon character denoting the end
+  // of the license type and start of the options
+  const colonIndex = license.lastIndexOf(':');
+  // Split the license on the colon
+  const licenseType = license.slice(0, colonIndex).trim();
+  const optionStr = license.slice(colonIndex + 1).trim();
+  const options = {};
+  let version = '';
+
+  // Set the defaultVersion to 4.0
+  const defaultVersion = '4.0';
+  optionStr.split(' ').forEach(option => {
+    // Split the option into key and value
+    // Default the value to `true` if no value
+    let key = '';
+    let value = '';
+    if (option.indexOf('=') !== -1) {
+      [key, value] = option.split('=');
+    } else {
+      key = option;
+      value = true;
+    }
+
+    // Check for version
+    if (key === 'ver') {
+      version = value;
+    } else {
+      // Set the option key to lowercase to make
+      // it easier to query
+      options[key.toLowerCase()] = value;
+    }
+  });
+
+  // Set the version to whatever was included,
+  // using `defaultVersion` as a fallback if unset
+  version = version || defaultVersion;
+
+  return [licenseType, options, version];
+};
+
+export const saveVideoData = () => (dispatch, getState) => {
+  const state = getState();
+  return selectors.video.videoSettings(state);
+};
+
+export const uploadThumbnail = ({ thumbnail, emptyCanvas }) => (dispatch, getState) => {
+  const state = getState();
+  const { videoId } = state.video;
+  const { studioEndpointUrl } = state.app;
+  dispatch(requests.uploadThumbnail({
+    thumbnail,
+    videoId,
+    onSuccess: (response) => {
+      let thumbnailUrl;
+      if (response.data.image_url.startsWith('/')) {
+        // in local environments, image_url is a relative path
+        thumbnailUrl = studioEndpointUrl + response.data.image_url;
+      } else {
+        // in stage and production, image_url is an absolute path to the image
+        thumbnailUrl = response.data.image_url;
+      }
+      if (!emptyCanvas) {
+        dispatch(actions.video.updateField({
+          thumbnail: thumbnailUrl,
+        }));
+      }
+    },
+    // eslint-disable-next-line no-console
+    onFailure: (e) => console.log({ UploadFailure: e }, 'Resampling thumbnail upload'),
+  }));
+};
+
+// Handout Thunks:
+
+export const uploadHandout = ({ file }) => (dispatch) => {
+  dispatch(requests.uploadAsset({
+    asset: file,
+    onSuccess: (response) => {
+      const handout = response.data.asset.url;
+      dispatch(actions.video.updateField({ handout }));
+    },
+  }));
+};
+
+// Transcript Thunks:
+
+export const importTranscript = () => (dispatch, getState) => {
+  const state = getState();
+  const { transcripts, videoSource } = state.video;
+  // Remove the placeholder '' from the unset language from the list of transcripts.
+  const transcriptsPlaceholderRemoved = isEmpty(transcripts) ? transcripts : removeItemOnce(transcripts, '');
+
+  dispatch(requests.importTranscript({
+    youTubeId: parseYoutubeId(videoSource),
+    onSuccess: (response) => {
+      dispatch(actions.video.updateField({
+        transcripts: [
+          ...transcriptsPlaceholderRemoved,
+          'en'],
+      }));
+
+      if (selectors.video.videoId(state) === '') {
+        dispatch(actions.video.updateField({
+          videoId: response.data.edx_video_id,
+        }));
+      }
+    },
+  }));
+};
+
+export const uploadTranscript = ({ language, file }) => (dispatch, getState) => {
+  const state = getState();
+  const { transcripts, videoId } = state.video;
+  // Remove the placeholder '' from the unset language from the list of transcripts.
+  const transcriptsPlaceholderRemoved = isEmpty(transcripts) ? transcripts : removeItemOnce(transcripts, '');
+  dispatch(requests.uploadTranscript({
+    language,
+    videoId,
+    transcript: file,
+    onSuccess: (response) => {
+      // if we aren't replacing, add the language to the redux store.
+      if (!transcriptsPlaceholderRemoved.includes(language)) {
+        dispatch(actions.video.updateField({
+          transcripts: [
+            ...transcriptsPlaceholderRemoved,
+            language],
+        }));
+      }
+
+      if (selectors.video.videoId(state) === '') {
+        dispatch(actions.video.updateField({
+          videoId: response.data.edx_video_id,
+        }));
+      }
+    },
+  }));
+};
+
+export const deleteTranscript = ({ language }) => (dispatch, getState) => {
+  const state = getState();
+  const { transcripts, videoId } = state.video;
+  dispatch(requests.deleteTranscript({
+    language,
+    videoId,
+    onSuccess: () => {
+      const updatedTranscripts = transcripts.filter((langCode) => langCode !== language);
+      dispatch(actions.video.updateField({ transcripts: updatedTranscripts }));
+    },
+  }));
+};
+
+export const updateTranscriptLanguage = ({ newLanguageCode, languageBeforeChange }) => (dispatch, getState) => {
+  const state = getState();
+  const { video: { transcripts, videoId } } = state;
+  selectors.video.getTranscriptDownloadUrl(state);
+  dispatch(requests.getTranscriptFile({
+    videoId,
+    language: languageBeforeChange,
+    onSuccess: (response) => {
+      dispatch(requests.updateTranscriptLanguage({
+        languageBeforeChange,
+        file: new File([new Blob([response.data], { type: 'text/plain' })], `${videoId}_${newLanguageCode}.srt`, { type: 'text/plain' }),
+        newLanguageCode,
+        videoId,
+        onSuccess: () => {
+          const newTranscripts = transcripts
+            .filter(transcript => transcript !== languageBeforeChange);
+          newTranscripts.push(newLanguageCode);
+          dispatch(actions.video.updateField({ transcripts: newTranscripts }));
+        },
+      }));
+    },
+  }));
+};
+
+export const replaceTranscript = ({ newFile, newFilename, language }) => (dispatch, getState) => {
+  const state = getState();
+  const { videoId } = state.video;
+  dispatch(requests.deleteTranscript({
+    language,
+    videoId,
+    onSuccess: () => {
+      dispatch(uploadTranscript({ language, file: newFile, filename: newFilename }));
+    },
+  }));
+};
+
+export const uploadVideo = ({ supportedFiles, setLoadSpinner, postUploadRedirect }) => (dispatch) => {
+  const data = { files: [] };
+  setLoadSpinner(true);
+  supportedFiles.forEach((file) => {
+    const fileData = file.get('file');
+    data.files.push({
+      file_name: fileData.name,
+      content_type: fileData.type,
+    });
+  });
+  dispatch(requests.uploadVideo({
+    data,
+    onSuccess: async (response) => {
+      const { files } = response.data;
+      await Promise.all(Object.values(files).map(async (fileObj) => {
+        const fileName = fileObj.file_name;
+        const edxVideoId = fileObj.edx_video_id;
+        const uploadUrl = fileObj.upload_url;
+        const uploadFile = supportedFiles.find((file) => file.get('file').name === fileName);
+        if (!uploadFile) {
+          // eslint-disable-next-line no-console
+          console.error(`Could not find file object with name "${fileName}" in supportedFiles array.`);
+          return;
+        }
+        const file = uploadFile.get('file');
+        await fetch(uploadUrl, {
+          method: 'PUT',
+          headers: {
+            'Content-Disposition': `attachment; filename="${file.name}"`,
+            'Content-Type': file.type,
+          },
+          multipart: false,
+          body: file,
+        })
+          .then((resp) => {
+            if (!resp.ok) {
+              throw new Error('Failed to connect with server');
+            }
+            postUploadRedirect(edxVideoId);
+          })
+          // eslint-disable-next-line no-console
+          .catch((error) => console.error('Error uploading file:', error));
+      }));
+      setLoadSpinner(false);
+    },
+  }));
+};
+
+export default {
+  loadVideoData,
+  determineVideoSources,
+  parseLicense,
+  saveVideoData,
+  uploadThumbnail,
+  importTranscript,
+  uploadTranscript,
+  deleteTranscript,
+  updateTranscriptLanguage,
+  replaceTranscript,
+  uploadHandout,
+  uploadVideo,
+};
diff --git a/src/editors/data/redux/thunkActions/video.test.js b/src/editors/data/redux/thunkActions/video.test.js
new file mode 100644
index 0000000000..75a668d0bc
--- /dev/null
+++ b/src/editors/data/redux/thunkActions/video.test.js
@@ -0,0 +1,802 @@
+import { actions } from '..';
+import keyStore from '../../../utils/keyStore';
+import * as thunkActions from './video';
+
+jest.mock('../video', () => ({
+  ...jest.requireActual('../video'),
+  actions: {
+    load: (args) => ({ load: args }),
+    updateField: (args) => ({ updateField: args }),
+  },
+  selectors: {
+    videoId: (state) => ({ videoId: state }),
+    videoSettings: (state) => ({ videoSettings: state }),
+    getTranscriptDownloadUrl: (state) => ({ getTranscriptDownloadUrl: state }),
+  },
+}));
+jest.mock('../app', () => ({
+  ...jest.requireActual('../app'),
+  selectors: {
+    courseDetails: (state) => ({ courseDetails: state }),
+    videos: (state) => ({ videos: state.app.videos }),
+  },
+}));
+jest.mock('./requests', () => ({
+  uploadAsset: (args) => ({ uploadAsset: args }),
+  allowThumbnailUpload: (args) => ({ allowThumbnailUpload: args }),
+  uploadThumbnail: (args) => ({ uploadThumbnail: args }),
+  deleteTranscript: (args) => ({ deleteTranscript: args }),
+  uploadTranscript: (args) => ({ uploadTranscript: args }),
+  getTranscriptFile: (args) => ({ getTranscriptFile: args }),
+  updateTranscriptLanguage: (args) => ({ updateTranscriptLanguage: args }),
+  checkTranscriptsForImport: (args) => ({ checkTranscriptsForImport: args }),
+  importTranscript: (args) => ({ importTranscript: args }),
+  fetchVideoFeatures: (args) => ({ fetchVideoFeatures: args }),
+  uploadVideo: (args) => ({ uploadVideo: args }),
+}));
+
+jest.mock('../../../utils', () => ({
+  ...jest.requireActual('../../../utils'),
+  removeItemOnce: (args) => (args),
+}));
+
+jest.mock('../../services/cms/api', () => ({
+  parseYoutubeId: (args) => (args),
+}));
+
+const thunkActionsKeys = keyStore(thunkActions);
+
+const mockLanguage = 'en';
+const mockFile = 'soMEtRANscRipT';
+const mockFilename = 'soMEtRANscRipT.srt';
+const mockThumbnail = 'sOMefILE';
+const mockThumbnailResponse = { data: { image_url: 'soMEimAGEUrL' } };
+const thumbnailUrl = 'soMEimAGEUrL';
+const mockAllowTranscriptImport = { data: { command: 'import' } };
+const mockVideoFeatures = {
+  data: {
+    allowThumbnailUpload: 'soMEbOolEAn',
+    videoSharingEnabled: 'soMEbOolEAn',
+  },
+};
+const mockSelectedVideoId = 'ThisIsAVideoId';
+const mockSelectedVideoUrl = 'ThisIsAYoutubeUrl';
+
+const testMetadata = {
+  download_track: 'dOWNlOAdTraCK',
+  download_video: 'downLoaDViDEo',
+  edx_video_id: 'soMEvIDEo',
+  end_time: 0,
+  handout: 'hANdoUT',
+  html5_sources: [],
+  license: 'liCENse',
+  show_captions: 'shOWcapTIONS',
+  start_time: 0,
+  transcripts: ['do', 're', 'mi'],
+  thumbnail: 'thuMBNaIl',
+};
+const videoSharingData = {
+  video_sharing_doc_url: 'SomEUrL.Com',
+  video_sharing_options: 'OpTIOns',
+};
+const testState = {
+  transcripts: ['la'],
+  thumbnail: 'sOMefILE',
+  originalThumbnail: null,
+  videoId: 'soMEvIDEo',
+};
+const testVideosState = {
+  edx_video_id: mockSelectedVideoId,
+  thumbnail: 'thumbnail',
+  course_video_image_url: 'course_video_image_url',
+  duration: 60,
+  transcripts: ['es'],
+  transcript_urls: { es: 'url' },
+};
+const testUpload = { transcripts: ['la', 'en'] };
+const testReplaceUpload = {
+  file: mockFile,
+  language: mockLanguage,
+  filename: mockFilename,
+};
+
+describe('video thunkActions', () => {
+  let dispatch;
+  let getState;
+  let dispatchedAction;
+  beforeEach(() => {
+    dispatch = jest.fn((action) => ({ dispatch: action }));
+    getState = jest.fn(() => ({
+      app: {
+        blockId: 'soMEBloCk',
+        blockValue: { data: { metadata: { ...testMetadata }, ...videoSharingData } },
+        studioEndpointUrl: 'soMEeNDPoiNT',
+        courseDetails: { data: { license: null } },
+        studioView: { data: { html: 'sOMeHTml' } },
+      },
+      video: testState,
+    }));
+  });
+  describe('loadVideoData', () => {
+    let dispatchedLoad;
+    let dispatchedAction1;
+    let dispatchedAction2;
+    beforeEach(() => {
+      jest.spyOn(thunkActions, thunkActionsKeys.determineVideoSources).mockReturnValue({
+        videoUrl: 'videOsOurce',
+        videoId: 'videOiD',
+        fallbackVideos: 'fALLbACKvIDeos',
+      });
+      jest.spyOn(thunkActions, thunkActionsKeys.parseVideoSharingSetting).mockReturnValue({
+        level: 'course',
+        value: true,
+      });
+      jest.spyOn(thunkActions, thunkActionsKeys.parseLicense).mockReturnValue([
+        'liCENSEtyPe',
+        {
+          by: true,
+          nc: true,
+          nd: true,
+          sa: false,
+        },
+      ]);
+      jest.spyOn(thunkActions, thunkActionsKeys.parseTranscripts).mockReturnValue(
+        testMetadata.transcripts,
+      );
+    });
+    afterEach(() => {
+      jest.restoreAllMocks();
+    });
+    it('dispatches fetchVideoFeatures action', () => {
+      thunkActions.loadVideoData()(dispatch, getState);
+      [
+        [dispatchedLoad],
+        [dispatchedAction1],
+        [dispatchedAction2],
+      ] = dispatch.mock.calls;
+      expect(dispatchedLoad).not.toEqual(undefined);
+      expect(dispatchedAction1.fetchVideoFeatures).not.toEqual(undefined);
+    });
+    it('dispatches checkTranscriptsForImport action', () => {
+      thunkActions.loadVideoData()(dispatch, getState);
+      [
+        [dispatchedLoad],
+        [dispatchedAction1],
+        [dispatchedAction2],
+      ] = dispatch.mock.calls;
+      expect(dispatchedLoad).not.toEqual(undefined);
+      expect(dispatchedAction2.checkTranscriptsForImport).not.toEqual(undefined);
+    });
+    it('dispatches actions.video.load', () => {
+      thunkActions.loadVideoData()(dispatch, getState);
+      [
+        [dispatchedLoad],
+        [dispatchedAction1],
+        [dispatchedAction2],
+      ] = dispatch.mock.calls;
+      expect(dispatchedLoad.load).toEqual({
+        videoSource: 'videOsOurce',
+        videoId: 'videOiD',
+        fallbackVideos: 'fALLbACKvIDeos',
+        allowVideoDownloads: testMetadata.download_video,
+        allowVideoSharing: {
+          level: 'course',
+          value: true,
+        },
+        videoSharingLearnMoreLink: videoSharingData.video_sharing_doc_url,
+        videoSharingEnableForCourse: videoSharingData.video_sharing_enabled,
+        transcripts: testMetadata.transcripts,
+        allowTranscriptDownloads: testMetadata.download_track,
+        showTranscriptByDefault: testMetadata.show_captions,
+        duration: {
+          startTime: testMetadata.start_time,
+          stopTime: testMetadata.end_time,
+          total: 0,
+        },
+        handout: testMetadata.handout,
+        licenseType: 'liCENSEtyPe',
+        licenseDetails: {
+          attribution: true,
+          noncommercial: true,
+          noDerivatives: true,
+          shareAlike: false,
+        },
+        courseLicenseType: 'liCENSEtyPe',
+        courseLicenseDetails: {
+          attribution: true,
+          noncommercial: true,
+          noDerivatives: true,
+          shareAlike: false,
+        },
+        thumbnail: testMetadata.thumbnail,
+      });
+    });
+    it('dispatches actions.video.load with selectedVideoId', () => {
+      getState = jest.fn(() => ({
+        app: {
+          blockId: 'soMEBloCk',
+          studioEndpointUrl: 'soMEeNDPoiNT',
+          blockValue: { data: { metadata: {} } },
+          courseDetails: { data: { license: null } },
+          studioView: { data: { html: 'sOMeHTml' } },
+          videos: testVideosState,
+        },
+      }));
+      thunkActions.loadVideoData(mockSelectedVideoId, null)(dispatch, getState);
+      [
+        [dispatchedLoad],
+        [dispatchedAction1],
+        [dispatchedAction2],
+      ] = dispatch.mock.calls;
+      expect(dispatchedLoad.load).toEqual({
+        videoSource: 'videOsOurce',
+        videoId: 'videOiD',
+        fallbackVideos: 'fALLbACKvIDeos',
+        allowVideoDownloads: undefined,
+        transcripts: testVideosState.transcripts,
+        selectedVideoTranscriptUrls: testVideosState.transcript_urls,
+        allowTranscriptDownloads: undefined,
+        allowVideoSharing: {
+          level: 'course',
+          value: true,
+        },
+        showTranscriptByDefault: undefined,
+        duration: {
+          startTime: testMetadata.start_time,
+          stopTime: 0,
+          total: testVideosState.duration,
+        },
+        handout: undefined,
+        licenseType: 'liCENSEtyPe',
+        licenseDetails: {
+          attribution: true,
+          noncommercial: true,
+          noDerivatives: true,
+          shareAlike: false,
+        },
+        videoSharingEnabledForCourse: undefined,
+        videoSharingLearnMoreLink: undefined,
+        courseLicenseType: 'liCENSEtyPe',
+        courseLicenseDetails: {
+          attribution: true,
+          noncommercial: true,
+          noDerivatives: true,
+          shareAlike: false,
+        },
+        thumbnail: testVideosState.course_video_image_url,
+      });
+    });
+    it('dispatches actions.video.load with different selectedVideoId', () => {
+      getState = jest.fn(() => ({
+        app: {
+          blockId: 'lb:soMEBloCk',
+          studioEndpointUrl: 'soMEeNDPoiNT',
+          blockValue: { data: { metadata: {} } },
+          courseDetails: { data: { license: null } },
+          studioView: { data: { content: 'sOMeHTml' } },
+          videos: testVideosState,
+        },
+      }));
+      thunkActions.loadVideoData('ThisIsAVideoId2', null)(dispatch, getState);
+      [
+        [dispatchedLoad],
+        [dispatchedAction1],
+        [dispatchedAction2],
+      ] = dispatch.mock.calls;
+      expect(dispatchedLoad.load).toEqual({
+        videoSource: 'videOsOurce',
+        videoId: 'videOiD',
+        fallbackVideos: 'fALLbACKvIDeos',
+        allowVideoDownloads: undefined,
+        transcripts: testMetadata.transcripts,
+        selectedVideoTranscriptUrls: testMetadata.transcript_urls,
+        allowTranscriptDownloads: undefined,
+        allowVideoSharing: {
+          level: 'course',
+          value: true,
+        },
+        showTranscriptByDefault: undefined,
+        duration: {
+          startTime: testMetadata.start_time,
+          stopTime: 0,
+          total: 0,
+        },
+        handout: undefined,
+        licenseType: 'liCENSEtyPe',
+        licenseDetails: {
+          attribution: true,
+          noncommercial: true,
+          noDerivatives: true,
+          shareAlike: false,
+        },
+        videoSharingEnabledForCourse: undefined,
+        videoSharingLearnMoreLink: undefined,
+        courseLicenseType: 'liCENSEtyPe',
+        courseLicenseDetails: {
+          attribution: true,
+          noncommercial: true,
+          noDerivatives: true,
+          shareAlike: false,
+        },
+        thumbnail: undefined,
+      });
+    });
+    it('dispatches actions.video.load with selectedVideoUrl', () => {
+      thunkActions.loadVideoData(null, mockSelectedVideoUrl)(dispatch, getState);
+      [
+        [dispatchedLoad],
+        [dispatchedAction1],
+        [dispatchedAction2],
+      ] = dispatch.mock.calls;
+      expect(dispatchedLoad.load).toEqual({
+        videoSource: mockSelectedVideoUrl,
+        videoId: 'videOiD',
+        fallbackVideos: 'fALLbACKvIDeos',
+        allowVideoDownloads: testMetadata.download_video,
+        transcripts: testMetadata.transcripts,
+        allowTranscriptDownloads: testMetadata.download_track,
+        showTranscriptByDefault: testMetadata.show_captions,
+        duration: {
+          startTime: testMetadata.start_time,
+          stopTime: testMetadata.end_time,
+          total: 0,
+        },
+        allowVideoSharing: {
+          level: 'course',
+          value: true,
+        },
+        handout: testMetadata.handout,
+        licenseType: 'liCENSEtyPe',
+        licenseDetails: {
+          attribution: true,
+          noncommercial: true,
+          noDerivatives: true,
+          shareAlike: false,
+        },
+        selectedVideoTranscriptUrls: undefined,
+        videoSharingEnabledForCourse: undefined,
+        videoSharingLearnMoreLink: 'SomEUrL.Com',
+        courseLicenseType: 'liCENSEtyPe',
+        courseLicenseDetails: {
+          attribution: true,
+          noncommercial: true,
+          noDerivatives: true,
+          shareAlike: false,
+        },
+        thumbnail: testMetadata.thumbnail,
+      });
+    });
+    it('dispatches actions.video.updateField on success', () => {
+      thunkActions.loadVideoData()(dispatch, getState);
+      [
+        [dispatchedLoad],
+        [dispatchedAction1],
+        [dispatchedAction2],
+      ] = dispatch.mock.calls;
+      dispatch.mockClear();
+      dispatchedAction1.fetchVideoFeatures.onSuccess(mockVideoFeatures);
+      expect(dispatch).toHaveBeenCalledWith(actions.video.updateField({
+        allowThumbnailUpload: mockVideoFeatures.data.allowThumbnailUpload,
+        videoSharingEnabledForAll: mockVideoFeatures.data.videoSharingEnabled,
+      }));
+      dispatch.mockClear();
+      dispatchedAction2.checkTranscriptsForImport.onSuccess(mockAllowTranscriptImport);
+      expect(dispatch).toHaveBeenCalledWith(actions.video.updateField({
+        allowTranscriptImport: true,
+      }));
+    });
+  });
+  describe('determineVideoSources', () => {
+    const edxVideoId = 'EDxviDEoiD';
+    const youtubeId = 'yOuTuBEiD';
+    const youtubeUrl = `https://youtu.be/${youtubeId}`;
+    const html5Sources = ['htmLOne', 'hTMlTwo', 'htMLthrEE'];
+    describe('when edx id, youtube id and source values are null', () => {
+      it('returns empty strings for ids and an empty array for sources', () => {
+        expect(thunkActions.determineVideoSources({
+          edxVideoId: null,
+          youtubeId: null,
+          html5Sources: null,
+        })).toEqual({
+          videoUrl: '',
+          videoId: '',
+          fallbackVideos: [],
+        });
+      });
+    });
+    describe('when there is an edx video id, youtube id and html5 sources', () => {
+      it('returns all three with the youtube id wrapped in url', () => {
+        expect(thunkActions.determineVideoSources({
+          edxVideoId,
+          youtubeId,
+          html5Sources,
+        })).toEqual({
+          videoUrl: youtubeUrl,
+          videoId: edxVideoId,
+          fallbackVideos: html5Sources,
+        });
+      });
+    });
+    describe('when there is only an edx video id', () => {
+      it('returns the edx video id for video source', () => {
+        expect(thunkActions.determineVideoSources({
+          edxVideoId,
+          youtubeId: '',
+          html5Sources: '',
+        })).toEqual({
+          videoUrl: '',
+          videoId: edxVideoId,
+          fallbackVideos: [],
+        });
+      });
+    });
+    describe('when there is no edx video id', () => {
+      it('returns the youtube url for video source and html5 sources for fallback videos', () => {
+        expect(thunkActions.determineVideoSources({
+          edxVideoId: '',
+          youtubeId,
+          html5Sources,
+        })).toEqual({
+          videoUrl: youtubeUrl,
+          videoId: '',
+          fallbackVideos: html5Sources,
+        });
+      });
+    });
+    describe('when there is no edx video id and no youtube id', () => {
+      it('returns the first html5 source for video url and the rest for fallback videos', () => {
+        expect(thunkActions.determineVideoSources({
+          edxVideoId: '',
+          youtubeId: '',
+          html5Sources,
+        })).toEqual({
+          videoUrl: 'htmLOne',
+          videoId: '',
+          fallbackVideos: ['hTMlTwo', 'htMLthrEE'],
+        });
+      });
+      it('returns the html5 source for video source and an array with 2 empty values for fallback videos', () => {
+        expect(thunkActions.determineVideoSources({
+          edxVideoId: '',
+          youtubeId: '',
+          html5Sources: ['htmlOne'],
+        })).toEqual({
+          videoUrl: 'htmlOne',
+          videoId: '',
+          fallbackVideos: [],
+        });
+      });
+    });
+    describe('when there is no edx video id, no youtube id and no html5 sources', () => {
+      it('returns an empty string for video source and an array with 2 empty values for fallback videos', () => {
+        expect(thunkActions.determineVideoSources({
+          edxVideoId: '',
+          youtubeId: '',
+          html5Sources: [],
+        })).toEqual({
+          videoUrl: '',
+          videoId: '',
+          fallbackVideos: [],
+        });
+      });
+    });
+  });
+  describe('parseTranscripts', () => {
+    const testStudioViewDataWithTranscripts = 'de descarga debajo del video.&#34;, &#34;value&#34;: &#34;&#34;, &#34;type&#34;: &#34;Generic&#34;, &#34;options&#34;: []}, &#34;transcripts&#34;: {&#34;explicitly_set&#34;: false, &#34;default_value&#34;: {}, &#34;field_name&#34;: &#34;transcripts&#34;, &#34;display_name&#34;: &#34;Idiomas de transcripci\\u00f3n&#34;, &#34;help&#34;: &#34;A\\u00f1ada transcripciones en diferentes idiomas. Haga clic a continuaci\\u00f3n para especificar un idioma y subir un archivo .srt de transcripci\\u00f3n para dicho idioma.&#34;, &#34;value&#34;: {&#34;aa&#34;: &#34;non_existent_dummy_file_name&#34;, &#34;ab&#34;: &#34;non_existent_dummy_file_name&#34;, &#34;ba&#34;: &#34;non_existent_dummy_file_name&#34;, &#34;en&#34;: &#34;external video-en.txt&#34;}, &#34;type&#34;: &#34;VideoTranslations&#34;, &#34;options&#34;: [], &#34;custom&#34;: true, &#34;languages&#34;: [{&#34;label&#34;: &#34;Abkhazian&#34;, &#34;code&#34;: &#34;ab&#34;}], &#34;urlRoot&#34;: &#34;/xblock/block-v1:GalileoX+XS_Mate001+3T2022+type@video+block@20bc09f5522d430f8e43c2bc377b348c/handler/studio_transcript/translation&#34;}, &#34;youtube_id_0_75&#34;: {';
+    const testStudioViewData = 'de descarga debajo del video.&#34;, &#34;value&#34;: &#34;&#34;, &#34;type&#34;: &#34;Generic&#34;, &#34;options&#34;: []}, &#34;transcripts&#34;: {&#34;explicitly_set&#34;: false, &#34;default_value&#34;: {}, &#34;field_name&#34;: &#34;transcripts&#34;, &#34;display_name&#34;: &#34;Idiomas de transcripci\\u00f3n&#34;, &#34;help&#34;: &#34;A\\u00f1ada transcripciones en diferentes idiomas. Haga clic a continuaci\\u00f3n para especificar un idioma y subir un archivo .srt de transcripci\\u00f3n para dicho idioma.&#34;, &#34;value&#34;: {}, &#34;type&#34;: &#34;VideoTranslations&#34;, &#34;options&#34;: [], &#34;custom&#34;: true, &#34;languages&#34;: [{&#34;label&#34;: &#34;Abkhazian&#34;, &#34;code&#34;: &#34;ab&#34;}], &#34;urlRoot&#34;: &#34;/xblock/block-v1:GalileoX+XS_Mate001+3T2022+type@video+block@20bc09f5522d430f8e43c2bc377b348c/handler/studio_transcript/translation&#34;}, &#34;youtube_id_0_75&#34;: {';
+    const testBadStudioViewData = 'tHiSiSaBAdDaTa';
+    it('returns an array of languages given a JSON string', () => {
+      expect(thunkActions.parseTranscripts({
+        transcriptsData: testStudioViewDataWithTranscripts,
+      })).toEqual(['aa', 'ab', 'ba', 'en']);
+    });
+    it('returns an empty array when there are no transcripts', () => {
+      expect(thunkActions.parseTranscripts({
+        transcriptsData: testStudioViewData,
+      })).toEqual([]);
+    });
+    it('returns an empty array given an unparsable JSON string', () => {
+      expect(thunkActions.parseTranscripts({
+        transcriptsData: testBadStudioViewData,
+      })).toEqual([]);
+    });
+  });
+  describe('parseLicense', () => {
+    const emptyLicenseData = null;
+    const noLicense = 'sOMeHTml data-metadata &#34;license&#34; &#34;value&#34;= null, &#34;type&#34;';
+    it('returns expected values for a license with no course license', () => {
+      expect(thunkActions.parseLicense({
+        licenseData: emptyLicenseData,
+        level: 'sOMElevEL',
+      })).toEqual([
+        null,
+        {},
+      ]);
+    });
+    it('returns expected values for a license with no block license', () => {
+      expect(thunkActions.parseLicense({
+        licenseData: noLicense,
+        level: 'block',
+      })).toEqual([
+        null,
+        {},
+      ]);
+    });
+    it('returns expected values for a license with all rights reserved', () => {
+      const license = 'sOMeHTml data-metadata &#34;license&#34; &#34;value&#34;: &#34;all-rights-reserved&#34;, &#34;type&#34;';
+      expect(thunkActions.parseLicense({
+        licenseData: license,
+        level: 'block',
+      })).toEqual([
+        'all-rights-reserved',
+        {},
+      ]);
+    });
+    it('returns expected type and options for creative commons', () => {
+      const license = 'sOMeHTml data-metadata &#34;license&#34; &#34;value&#34;: &#34;creative-commons: ver=4.0 BY NC ND&#34;, &#34;type&#34;';
+      expect(thunkActions.parseLicense({
+        licenseData: license,
+        level: 'block',
+      })).toEqual([
+        'creative-commons',
+        {
+          by: true,
+          nc: true,
+          nd: true,
+        },
+        '4.0',
+      ]);
+    });
+  });
+  describe('parseVideoShareSetting', () => {
+    describe('has no course setting or block setting for video sharing', () => {
+      it('should return an object with level equal to block and value equal to null', () => {
+        const videoSharingSetting = thunkActions.parseVideoSharingSetting({
+          courseSetting: null,
+          blockSetting: null,
+        });
+        expect(videoSharingSetting).toEqual({ level: 'block', value: null });
+      });
+    });
+    describe('has no course setting and block setting defined for video sharing', () => {
+      it('should return an object with level equal to block and value equal to true', () => {
+        const videoSharingSetting = thunkActions.parseVideoSharingSetting({
+          courseSetting: null,
+          blockSetting: true,
+        });
+        expect(videoSharingSetting).toEqual({ level: 'block', value: true });
+      });
+    });
+    describe('has course setting defined for video sharing', () => {
+      describe('course setting equals all-on', () => {
+        it('should return an object with level equal to course and value equal to true', () => {
+          const videoSharingSetting = thunkActions.parseVideoSharingSetting({
+            courseSetting: 'all-on',
+            blockSetting: true,
+          });
+          expect(videoSharingSetting).toEqual({ level: 'course', value: true });
+        });
+      });
+      describe('course setting equals all-off', () => {
+        it('should return an object with level equal to course and value equal to false', () => {
+          const videoSharingSetting = thunkActions.parseVideoSharingSetting({
+            courseSetting: 'all-off',
+            blockSetting: true,
+          });
+          expect(videoSharingSetting).toEqual({ level: 'course', value: false });
+        });
+      });
+      describe('course setting equals per-video', () => {
+        it('should return an object with level equal to block and value equal to block setting', () => {
+          const videoSharingSetting = thunkActions.parseVideoSharingSetting({
+            courseSetting: 'per-video',
+            blockSetting: false,
+          });
+          expect(videoSharingSetting).toEqual({ level: 'block', value: false });
+        });
+      });
+    });
+  });
+  describe('uploadHandout', () => {
+    beforeEach(() => {
+      thunkActions.uploadHandout({ file: mockFilename })(dispatch);
+      [[dispatchedAction]] = dispatch.mock.calls;
+    });
+    it('dispatches uploadAsset action', () => {
+      expect(dispatchedAction.uploadAsset).not.toBe(undefined);
+    });
+    test('passes file as image prop', () => {
+      expect(dispatchedAction.uploadAsset.asset).toEqual(mockFilename);
+    });
+    test('onSuccess: calls setSelection with camelized response.data.asset', () => {
+      const handout = mockFilename;
+      dispatchedAction.uploadAsset.onSuccess({ data: { asset: { url: mockFilename } } });
+      expect(dispatch).toHaveBeenCalledWith(actions.video.updateField({ handout }));
+    });
+  });
+  describe('uploadThumbnail', () => {
+    beforeEach(() => {
+      thunkActions.uploadThumbnail({ thumbnail: mockThumbnail })(dispatch, getState);
+      [[dispatchedAction]] = dispatch.mock.calls;
+    });
+    it('dispatches uploadThumbnail action', () => {
+      expect(dispatchedAction.uploadThumbnail).not.toEqual(undefined);
+    });
+    it('dispatches actions.video.updateField on success', () => {
+      dispatch.mockClear();
+      dispatchedAction.uploadThumbnail.onSuccess(mockThumbnailResponse);
+      expect(dispatch).toHaveBeenCalledWith(
+        actions.video.updateField({
+          thumbnail: thumbnailUrl,
+        }),
+      );
+    });
+  });
+  describe('uploadThumbnail - emptyCanvas', () => {
+    beforeEach(() => {
+      thunkActions.uploadThumbnail({ thumbnail: mockThumbnail, emptyCanvas: true })(dispatch, getState);
+      [[dispatchedAction]] = dispatch.mock.calls;
+    });
+    it('dispatches uploadThumbnail action', () => {
+      expect(dispatchedAction.uploadThumbnail).not.toEqual(undefined);
+    });
+  });
+  describe('importTranscript', () => {
+    beforeEach(() => {
+      thunkActions.importTranscript()(dispatch, getState);
+      [[dispatchedAction]] = dispatch.mock.calls;
+    });
+    it('dispatches uploadTranscript action', () => {
+      expect(dispatchedAction.importTranscript).not.toEqual(undefined);
+    });
+    it('dispatches actions.video.updateField on success', () => {
+      dispatch.mockClear();
+      dispatchedAction.importTranscript.onSuccess();
+      expect(dispatch).toHaveBeenCalledWith(actions.video.updateField(testUpload));
+    });
+  });
+  describe('deleteTranscript', () => {
+    beforeEach(() => {
+      thunkActions.deleteTranscript({ language: 'la' })(dispatch, getState);
+      [[dispatchedAction]] = dispatch.mock.calls;
+    });
+    it('dispatches deleteTranscript action', () => {
+      expect(dispatchedAction.deleteTranscript).not.toEqual(undefined);
+    });
+    it('dispatches actions.video.updateField on success', () => {
+      dispatch.mockClear();
+      dispatchedAction.deleteTranscript.onSuccess();
+      expect(dispatch).toHaveBeenCalledWith(actions.video.updateField({ transcripts: [] }));
+    });
+  });
+  describe('uploadTranscript', () => {
+    beforeEach(() => {
+      thunkActions.uploadTranscript({
+        language: mockLanguage,
+        filename: mockFilename,
+        file: mockFile,
+      })(dispatch, getState);
+      [[dispatchedAction]] = dispatch.mock.calls;
+    });
+    it('dispatches uploadTranscript action', () => {
+      expect(dispatchedAction.uploadTranscript).not.toEqual(undefined);
+    });
+    it('dispatches actions.video.updateField on success', () => {
+      dispatch.mockClear();
+      dispatchedAction.uploadTranscript.onSuccess();
+      expect(dispatch).toHaveBeenCalledWith(actions.video.updateField(testUpload));
+    });
+  });
+  describe('updateTranscriptLanguage', () => {
+    beforeEach(() => {
+      thunkActions.updateTranscriptLanguage({
+        newLanguageCode: mockLanguage,
+        languageBeforeChange: `${mockLanguage}i`,
+      })(dispatch, getState);
+      [[dispatchedAction]] = dispatch.mock.calls;
+    });
+    it('dispatches uploadTranscript action', () => {
+      expect(dispatchedAction.getTranscriptFile).not.toEqual(undefined);
+    });
+    it('dispatches actions.video.updateField on success', () => {
+      dispatch.mockClear();
+      dispatchedAction.getTranscriptFile.onSuccess({ data: 'sOme StRinG Data' });
+      expect(dispatch).toHaveBeenCalled();
+    });
+  });
+  describe('replaceTranscript', () => {
+    const spies = {};
+    beforeEach(() => {
+      spies.uploadTranscript = jest.spyOn(thunkActions, 'uploadTranscript')
+        .mockReturnValue(testReplaceUpload).mockName('uploadTranscript');
+      thunkActions.replaceTranscript({
+        newFile: mockFile,
+        newFilename: mockFilename,
+        language: mockLanguage,
+      })(dispatch, getState, spies.uploadTranscript);
+      [[dispatchedAction]] = dispatch.mock.calls;
+    });
+    it('dispatches deleteTranscript action', () => {
+      expect(dispatchedAction.deleteTranscript).not.toEqual(undefined);
+    });
+    it('dispatches actions.video.updateField and replaceTranscript success', () => {
+      dispatch.mockClear();
+      dispatchedAction.deleteTranscript.onSuccess();
+      expect(dispatch).toHaveBeenCalled();
+    });
+  });
+});
+
+describe('uploadVideo', () => {
+  let dispatch;
+  let setLoadSpinner;
+  let postUploadRedirect;
+  let dispatchedAction;
+  const fileData = new FormData();
+  fileData.append('file', new File(['content1'], 'file1.mp4', { type: 'video/mp4' }));
+  const supportedFiles = [fileData];
+
+  beforeEach(() => {
+    dispatch = jest.fn((action) => ({ dispatch: action }));
+    setLoadSpinner = jest.fn();
+    postUploadRedirect = jest.fn();
+    jest.resetAllMocks();
+    jest.restoreAllMocks();
+  });
+
+  it('dispatch uploadVideo action with right data', async () => {
+    const data = {
+      files: [
+        { file_name: 'file1.mp4', content_type: 'video/mp4' },
+      ],
+    };
+
+    thunkActions.uploadVideo({ supportedFiles, setLoadSpinner, postUploadRedirect })(dispatch);
+    [[dispatchedAction]] = dispatch.mock.calls;
+    expect(dispatchedAction.uploadVideo).not.toEqual(undefined);
+    expect(setLoadSpinner).toHaveBeenCalled();
+    expect(dispatchedAction.uploadVideo.data).toEqual(data);
+  });
+
+  it('should call fetch with correct arguments for each file', async () => {
+    const mockResponseData = { success: true };
+    const mockFetchResponse = Promise.resolve({ data: mockResponseData, ok: true });
+    global.fetch = jest.fn().mockImplementation(() => mockFetchResponse);
+    const response = {
+      files: [
+        { file_name: 'file1.mp4', upload_url: 'http://example.com/put_video1' },
+      ],
+    };
+    const mockRequestResponse = { data: response };
+    thunkActions.uploadVideo({ supportedFiles, setLoadSpinner, postUploadRedirect })(dispatch);
+    [[dispatchedAction]] = dispatch.mock.calls;
+
+    dispatchedAction.uploadVideo.onSuccess(mockRequestResponse);
+
+    expect(fetch).toHaveBeenCalledTimes(1);
+    response.files.forEach(({ upload_url: uploadUrl }, index) => {
+      expect(fetch.mock.calls[index][0]).toEqual(uploadUrl);
+    });
+    supportedFiles.forEach((file, index) => {
+      const fileDataTest = file.get('file');
+      expect(fetch.mock.calls[index][1].body).toBe(fileDataTest);
+    });
+  });
+
+  it('should log an error if file object is not found in supportedFiles array', () => {
+    const mockResponseData = { success: true };
+    const mockFetchResponse = Promise.resolve({ data: mockResponseData });
+    global.fetch = jest.fn().mockImplementation(() => mockFetchResponse);
+    const response = {
+      files: [
+        { file_name: 'file2.gif', upload_url: 'http://example.com/put_video2' },
+      ],
+    };
+    const mockRequestResponse = { data: response };
+    const spyConsoleError = jest.spyOn(console, 'error');
+
+    thunkActions.uploadVideo({ supportedFiles, setLoadSpinner, postUploadRedirect })(dispatch);
+    dispatchedAction.uploadVideo.onSuccess(mockRequestResponse);
+    expect(spyConsoleError).toHaveBeenCalledWith('Could not find file object with name "file2.gif" in supportedFiles array.');
+  });
+});
diff --git a/src/editors/data/redux/video/index.js b/src/editors/data/redux/video/index.js
new file mode 100644
index 0000000000..8abd5f91d9
--- /dev/null
+++ b/src/editors/data/redux/video/index.js
@@ -0,0 +1,2 @@
+export { actions, reducer } from './reducer';
+export { default as selectors } from './selectors';
diff --git a/src/editors/data/redux/video/reducer.js b/src/editors/data/redux/video/reducer.js
new file mode 100644
index 0000000000..04bfbcd99c
--- /dev/null
+++ b/src/editors/data/redux/video/reducer.js
@@ -0,0 +1,72 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+import { StrictDict } from '../../../utils';
+
+const initialState = {
+  videoSource: '',
+  videoId: '',
+  fallbackVideos: [
+    '',
+    '',
+  ],
+  allowVideoDownloads: false,
+  allowVideoSharing: {
+    level: 'block',
+    value: false,
+  },
+  videoSharingEnabledForAll: false,
+  videoSharingEnabledForCourse: false,
+  videoSharingLearnMoreLink: '',
+  thumbnail: null,
+  transcripts: [],
+  selectedVideoTranscriptUrls: {},
+  allowTranscriptDownloads: false,
+  duration: {
+    startTime: '00:00:00',
+    stopTime: '00:00:00',
+    total: '00:00:00',
+  },
+  showTranscriptByDefault: false,
+  handout: null,
+  licenseType: null,
+  licenseDetails: {
+    attribution: true,
+    noncommercial: false,
+    noDerivatives: false,
+    shareAlike: false,
+  },
+  courseLicenseType: null,
+  courseLicenseDetails: {
+    attribution: true,
+    noncommercial: false,
+    noDerivatives: false,
+    shareAlike: false,
+  },
+  allowThumbnailUpload: null,
+  allowTranscriptImport: false,
+};
+
+// eslint-disable-next-line no-unused-vars
+const video = createSlice({
+  name: 'video',
+  initialState,
+  reducers: {
+    updateField: (state, { payload }) => ({
+      ...state,
+      ...payload,
+    }),
+    load: (state, { payload }) => ({
+      ...payload,
+    }),
+  },
+});
+
+const actions = StrictDict(video.actions);
+
+const { reducer } = video;
+
+export {
+  actions,
+  initialState,
+  reducer,
+};
diff --git a/src/editors/data/redux/video/selectors.js b/src/editors/data/redux/video/selectors.js
new file mode 100644
index 0000000000..f71c014cf7
--- /dev/null
+++ b/src/editors/data/redux/video/selectors.js
@@ -0,0 +1,140 @@
+import { createSelector } from 'reselect';
+
+import { keyStore } from '../../../utils';
+import { videoTranscriptLanguages } from '../../constants/video';
+
+import { initialState } from './reducer';
+// This 'module' self-import hack enables mocking during tests.
+// See src/editors/decisions/0005-internal-editor-testability-decisions.md. The whole approach to how hooks are tested
+// should be re-thought and cleaned up to avoid this pattern.
+// eslint-disable-next-line import/no-self-import
+import * as module from './selectors';
+import * as AppSelectors from '../app/selectors';
+import { downloadVideoTranscriptURL, downloadVideoHandoutUrl, mediaTranscriptURL } from '../../services/cms/urls';
+
+const stateKeys = keyStore(initialState);
+
+export const video = (state) => state.video;
+
+export const simpleSelectors = [
+  stateKeys.videoSource,
+  stateKeys.videoId,
+  stateKeys.fallbackVideos,
+  stateKeys.allowVideoDownloads,
+  stateKeys.videoSharingEnabledForCourse,
+  stateKeys.videoSharingLearnMoreLink,
+  stateKeys.videoSharingEnabledForAll,
+  stateKeys.allowVideoSharing,
+  stateKeys.thumbnail,
+  stateKeys.transcripts,
+  stateKeys.selectedVideoTranscriptUrls,
+  stateKeys.allowTranscriptDownloads,
+  stateKeys.duration,
+  stateKeys.showTranscriptByDefault,
+  stateKeys.handout,
+  stateKeys.licenseType,
+  stateKeys.licenseDetails,
+  stateKeys.courseLicenseType,
+  stateKeys.courseLicenseDetails,
+  stateKeys.allowThumbnailUpload,
+  stateKeys.allowTranscriptImport,
+].reduce((obj, key) => ({ ...obj, [key]: state => state.video[key] }), {});
+
+export const openLanguages = createSelector(
+  [module.simpleSelectors.transcripts],
+  (transcripts) => {
+    if (!transcripts) {
+      return videoTranscriptLanguages;
+    }
+    const open = Object.keys(videoTranscriptLanguages).filter(
+      (lang) => !transcripts.includes(lang),
+    );
+    return open;
+  },
+);
+
+export const getTranscriptDownloadUrl = createSelector(
+  [AppSelectors.simpleSelectors.studioEndpointUrl, AppSelectors.simpleSelectors.blockId],
+  (studioEndpointUrl, blockId) => ({ language }) => downloadVideoTranscriptURL({
+    studioEndpointUrl,
+    blockId,
+    language,
+  }),
+);
+
+export const buildTranscriptUrl = createSelector(
+  [AppSelectors.simpleSelectors.studioEndpointUrl],
+  (studioEndpointUrl) => ({ transcriptUrl }) => mediaTranscriptURL({
+    studioEndpointUrl,
+    transcriptUrl,
+  }),
+);
+
+export const getHandoutDownloadUrl = createSelector(
+  [AppSelectors.simpleSelectors.studioEndpointUrl],
+  (studioEndpointUrl) => ({ handout }) => downloadVideoHandoutUrl({
+    studioEndpointUrl,
+    handout,
+  }),
+);
+
+export const videoSettings = createSelector(
+  [
+    module.simpleSelectors.videoSource,
+    module.simpleSelectors.videoId,
+    module.simpleSelectors.fallbackVideos,
+    module.simpleSelectors.allowVideoDownloads,
+    module.simpleSelectors.allowVideoSharing,
+    module.simpleSelectors.thumbnail,
+    module.simpleSelectors.transcripts,
+    module.simpleSelectors.selectedVideoTranscriptUrls,
+    module.simpleSelectors.allowTranscriptDownloads,
+    module.simpleSelectors.duration,
+    module.simpleSelectors.showTranscriptByDefault,
+    module.simpleSelectors.handout,
+    module.simpleSelectors.licenseType,
+    module.simpleSelectors.licenseDetails,
+  ],
+  (
+    videoSource,
+    videoId,
+    fallbackVideos,
+    allowVideoDownloads,
+    allowVideoSharing,
+    thumbnail,
+    transcripts,
+    selectedVideoTranscriptUrls,
+    allowTranscriptDownloads,
+    duration,
+    showTranscriptByDefault,
+    handout,
+    licenseType,
+    licenseDetails,
+  ) => (
+    {
+      videoSource,
+      videoId,
+      fallbackVideos,
+      allowVideoDownloads,
+      allowVideoSharing,
+      thumbnail,
+      transcripts,
+      selectedVideoTranscriptUrls,
+      allowTranscriptDownloads,
+      duration,
+      showTranscriptByDefault,
+      handout,
+      licenseType,
+      licenseDetails,
+    }
+  ),
+);
+
+export default {
+  ...simpleSelectors,
+  openLanguages,
+  getTranscriptDownloadUrl,
+  buildTranscriptUrl,
+  getHandoutDownloadUrl,
+  videoSettings,
+};
diff --git a/src/editors/data/services/cms/api.test.ts b/src/editors/data/services/cms/api.test.ts
new file mode 100644
index 0000000000..c3df32ccbf
--- /dev/null
+++ b/src/editors/data/services/cms/api.test.ts
@@ -0,0 +1,624 @@
+import * as api from './api';
+import * as urls from './urls';
+import {
+  get, post, put, deleteObject,
+} from './utils';
+
+jest.mock('./urls', () => ({
+  block: jest.fn().mockReturnValue('urls.block'),
+  blockAncestor: jest.fn().mockReturnValue('urls.blockAncestor'),
+  blockStudioView: jest.fn().mockReturnValue('urls.StudioView'),
+  courseAssets: jest.fn().mockReturnValue('urls.courseAssets'),
+  libraryAssets: jest.fn().mockReturnValue('urls.libraryAssets'),
+  videoTranscripts: jest.fn().mockReturnValue('urls.videoTranscripts'),
+  allowThumbnailUpload: jest.fn().mockReturnValue('urls.allowThumbnailUpload'),
+  thumbnailUpload: jest.fn().mockReturnValue('urls.thumbnailUpload'),
+  checkTranscriptsForImport: jest.fn().mockReturnValue('urls.checkTranscriptsForImport'),
+  courseDetailsUrl: jest.fn().mockReturnValue('urls.courseDetailsUrl'),
+  courseAdvanceSettings: jest.fn().mockReturnValue('urls.courseAdvanceSettings'),
+  replaceTranscript: jest.fn().mockReturnValue('urls.replaceTranscript'),
+  videoFeatures: jest.fn().mockReturnValue('urls.videoFeatures'),
+  courseVideos: jest.fn()
+    .mockName('urls.courseVideos')
+    .mockImplementation(
+      ({ studioEndpointUrl, learningContextId }) => `${studioEndpointUrl}/some_video_upload_url/${learningContextId}`,
+    ),
+}));
+
+jest.mock('./utils', () => ({
+  get: jest.fn().mockName('get'),
+  post: jest.fn().mockName('post'),
+  put: jest.fn().mockName('put'),
+  deleteObject: jest.fn().mockName('deleteObject'),
+}));
+
+const { apiMethods } = api;
+
+const blockId = 'block-v1-coursev1:2uX@4345432';
+let learningContextId;
+const studioEndpointUrl = 'hortus.coa';
+const title = 'remember this needs to go into metadata to save';
+
+describe('cms api', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    learningContextId = 'demo2uX';
+  });
+  describe('apiMethods', () => {
+    describe('fetchBlockId', () => {
+      it('should call get with url.blocks', () => {
+        apiMethods.fetchBlockById({ blockId, studioEndpointUrl });
+        expect(get).toHaveBeenCalledWith(urls.block({ blockId, studioEndpointUrl }));
+      });
+    });
+
+    describe('fetchByUnitId', () => {
+      it('should call get with url.blockAncestor', () => {
+        apiMethods.fetchByUnitId({ blockId, studioEndpointUrl });
+        expect(get).toHaveBeenCalledWith(urls.blockAncestor({ studioEndpointUrl, blockId }), {});
+      });
+
+      describe('when called in different contexts', () => {
+        // To mock env variables, you need to use dynamic imports for the tested methods
+        // and then reset the env variables afterwards.
+        const OLD_ENV = process.env;
+
+        beforeEach(() => {
+          jest.resetModules();
+          process.env = { ...OLD_ENV };
+        });
+
+        afterEach(() => {
+          process.env = OLD_ENV;
+        });
+
+        it('should call get with normal accept header for prod', async () => {
+          process.env.NODE_ENV = 'production';
+          process.env.MFE_NAME = 'frontend-app-course-authoring';
+          // eslint-disable-next-line no-shadow, @typescript-eslint/no-shadow
+          const { apiMethods } = await import('./api');
+          // eslint-disable-next-line no-shadow, @typescript-eslint/no-shadow
+          const utils = await import('./utils');
+          const getSpy = jest.spyOn(utils, 'get');
+          apiMethods.fetchByUnitId({ blockId, studioEndpointUrl });
+          expect(getSpy).toHaveBeenCalledWith(urls.blockAncestor({ studioEndpointUrl, blockId }), {});
+        });
+
+        it('should call get with normal accept header for course-authoring', async () => {
+          process.env.NODE_ENV = 'development';
+          process.env.MFE_NAME = 'frontend-app-course-authoring';
+          // eslint-disable-next-line no-shadow, @typescript-eslint/no-shadow
+          const { apiMethods } = await import('./api');
+          // eslint-disable-next-line no-shadow, @typescript-eslint/no-shadow
+          const utils = await import('./utils');
+          const getSpy = jest.spyOn(utils, 'get');
+          apiMethods.fetchByUnitId({ blockId, studioEndpointUrl });
+          expect(getSpy).toHaveBeenCalledWith(urls.blockAncestor({ studioEndpointUrl, blockId }), {});
+        });
+      });
+    });
+
+    describe('fetchStudioView', () => {
+      it('should call get with url.blockStudioView', () => {
+        apiMethods.fetchStudioView({ blockId, studioEndpointUrl });
+        expect(get).toHaveBeenCalledWith(urls.blockStudioView({ studioEndpointUrl, blockId }));
+      });
+    });
+
+    describe('fetchCourseImages', () => {
+      it('should call get with url.courseAssets', () => {
+        apiMethods.fetchCourseImages({
+          learningContextId, studioEndpointUrl, pageNumber: 0,
+        });
+        const params = {
+          asset_type: 'Images',
+          page: 0,
+        };
+        expect(get).toHaveBeenCalledWith(
+          urls.courseAssets({ studioEndpointUrl, learningContextId }),
+          { params },
+        );
+      });
+    });
+    describe('fetchLibraryImages', () => {
+      it('should call get with urls.libraryAssets for library V2', () => {
+        apiMethods.fetchLibraryImages({
+          blockId,
+        });
+        expect(get).toHaveBeenCalledWith(
+          urls.libraryAssets({ blockId }),
+        );
+      });
+    });
+
+    describe('fetchCourseDetails', () => {
+      it('should call get with url.courseDetailsUrl', () => {
+        apiMethods.fetchCourseDetails({ learningContextId, studioEndpointUrl });
+        expect(get).toHaveBeenCalledWith(urls.courseDetailsUrl({ studioEndpointUrl, learningContextId }));
+      });
+    });
+
+    describe('fetchVideos', () => {
+      it('should call get with url.courseVideos', () => {
+        apiMethods.fetchVideos({ learningContextId, studioEndpointUrl });
+        expect(get).toHaveBeenCalledWith(urls.courseVideos({ studioEndpointUrl, learningContextId }));
+      });
+    });
+
+    describe('fetchAdvancedSettings', () => {
+      it('should call get with url.courseAdvanceSettings', () => {
+        apiMethods.fetchAdvancedSettings({ learningContextId, studioEndpointUrl });
+        expect(get).toHaveBeenCalledWith(urls.courseAdvanceSettings({ studioEndpointUrl, learningContextId }));
+      });
+    });
+
+    describe('normalizeContent', () => {
+      test('return value for blockType: html', () => {
+        const content = 'Im baby palo santo ugh celiac fashion axe. La croix lo-fi venmo whatever. Beard man braid migas single-origin coffee forage ramps.';
+        expect(apiMethods.normalizeContent({
+          blockId,
+          blockType: 'html',
+          content,
+          learningContextId,
+          title,
+        })).toEqual({
+          category: 'html',
+          courseKey: learningContextId,
+          data: content,
+          has_changes: true,
+          id: blockId,
+          metadata: { display_name: title },
+        });
+      });
+      test('return value for blockType: video', () => {
+        const content = {
+          videoSource: 'viDeOSouRCE',
+          fallbackVideos: 'FalLBacKVidEOs',
+          allowVideoDownloads: 'alLOwViDeodownLOads',
+          allowVideoSharing: {
+            level: 'sOMeStRInG',
+            value: 'alloWviDeOshArinG',
+          },
+          thumbnail: 'THUmbNaIL',
+          transcripts: 'traNScRiPts',
+          allowTranscriptDownloads: 'aLloWTRaNScriPtdoWnlOADS',
+          duration: {
+            startTime: '00:00:00',
+            stopTime: '00:00:00',
+          },
+          showTranscriptByDefault: 'ShOWtrANscriPTBYDeFAulT',
+          handout: 'HAnDOuT',
+          licenseType: 'LiCeNsETYpe',
+          licenseDetails: 'liCENSeDetAIls',
+        };
+        const html5Sources = ['hTML5souRCES'];
+        const edxVideoId = 'eDXviDEOid';
+        const youtubeId = 'yOUtUBeid';
+        const license = 'LiCEnsE';
+        jest.spyOn(api, 'processVideoIds').mockReturnValue({
+          html5Sources,
+          edxVideoId,
+          youtubeId,
+        });
+        jest.spyOn(api, 'processLicense').mockReturnValue(license);
+        expect(apiMethods.normalizeContent({
+          blockId,
+          blockType: 'video',
+          content,
+          learningContextId,
+          title,
+        })).toEqual({
+          category: 'video',
+          courseKey: learningContextId,
+          display_name: title,
+          id: blockId,
+          metadata: {
+            display_name: title,
+            download_video: content.allowVideoDownloads,
+            public_access: content.allowVideoSharing.value,
+            edx_video_id: edxVideoId,
+            html5_sources: html5Sources,
+            youtube_id_1_0: youtubeId,
+            thumbnail: content.thumbnail,
+            download_track: content.allowTranscriptDownloads,
+            track: '',
+            show_captions: content.showTranscriptByDefault,
+            handout: content.handout,
+            start_time: content.duration.startTime,
+            end_time: content.duration.stopTime,
+            license,
+          },
+        });
+        jest.restoreAllMocks();
+      });
+      test('throw error for invalid blockType', () => {
+        // @ts-expect-error because we're not passing 'blockId' or other parameters
+        expect(() => { apiMethods.normalizeContent({ blockType: 'somethingINVALID' }); })
+          .toThrow(TypeError);
+      });
+    });
+
+    describe('saveBlock', () => {
+      const content = 'Im baby palo santo ugh celiac fashion axe. La croix lo-fi venmo whatever. Beard man braid migas single-origin coffee forage ramps.';
+      it('should call post with urls.block and normalizeContent', () => {
+        apiMethods.saveBlock({
+          blockId,
+          blockType: 'html',
+          content,
+          learningContextId,
+          studioEndpointUrl,
+          title,
+        });
+        expect(post).toHaveBeenCalledWith(
+          urls.block({ studioEndpointUrl }),
+          apiMethods.normalizeContent({
+            blockType: 'html',
+            content,
+            blockId,
+            learningContextId,
+            title,
+          }),
+        );
+      });
+    });
+
+    describe('uploadAsset', () => {
+      const img = new Blob(['data'], { type: 'image/jpeg' });
+      const filename = 'image.jpg';
+      const asset = new File([img], filename, { type: 'image/jpeg' });
+      const mockFormdata = new FormData();
+      mockFormdata.append('file', asset);
+      it('should call post with urls.courseAssets and imgdata', () => {
+        apiMethods.uploadAsset({
+          blockId,
+          learningContextId,
+          studioEndpointUrl,
+          asset,
+        });
+        expect(post).toHaveBeenCalledWith(
+          urls.courseAssets({ studioEndpointUrl, learningContextId }),
+          mockFormdata,
+        );
+      });
+      it('should call post with urls.libraryAssets and imgdata', () => {
+        learningContextId = 'lib:demo2uX';
+        mockFormdata.append('content', asset);
+        apiMethods.uploadAsset({
+          blockId,
+          learningContextId,
+          studioEndpointUrl,
+          asset,
+        });
+        expect(put).toHaveBeenCalledWith(
+          `${urls.libraryAssets({ blockId, assetName: asset.name })}`,
+          mockFormdata,
+        );
+      });
+    });
+
+    describe('uploadVideo', () => {
+      it('should call post with urls.courseVideos and data', () => {
+        const data = { files: [{ file_name: 'video.mp4', content_type: 'mp4' }] };
+
+        apiMethods.uploadVideo({ data, studioEndpointUrl, learningContextId });
+
+        expect(urls.courseVideos).toHaveBeenCalledWith({ studioEndpointUrl, learningContextId });
+        expect(post).toHaveBeenCalledWith(
+          urls.courseVideos({ studioEndpointUrl, learningContextId }),
+          data,
+        );
+      });
+    });
+  });
+  describe('loadImage', () => {
+    it('loads incoming image data, replacing the dateAdded with a date field', () => {
+      const [date, time] = ['Jan 20, 2022', '9:30 PM'];
+      const imageData = { some: 'image data', dateAdded: `${date} at ${time}` };
+      expect(api.loadImage(imageData)).toEqual({
+        ...imageData,
+        dateAdded: new Date(`${date} ${time}`).getTime(),
+      });
+    });
+  });
+  describe('loadImages', () => {
+    it('loads a list of images into an object by id, using loadImage to translate', () => {
+      const ids = ['id0', 'Id1', 'ID2', 'iD3'];
+      const testData = [
+        { id: ids[0], some: 'data' },
+        { id: ids[1], other: 'data' },
+        { id: ids[2], some: 'DATA' },
+        { id: ids[3], other_data: 'DATA' },
+      ];
+      const spy = jest.spyOn(api, 'loadImage').mockImplementation((imageData) => ({ loadImage: imageData }));
+      const out = api.loadImages(testData);
+      expect(out).toEqual({
+        [ids[0]]: api.loadImage(testData[0]),
+        [ids[1]]: api.loadImage(testData[1]),
+        [ids[2]]: api.loadImage(testData[2]),
+        [ids[3]]: api.loadImage({ id: ids[3], otherData: 'DATA' }), // Verify its 'other_data' key was camelized
+      });
+      spy.mockClear();
+    });
+  });
+  describe('uploadThumbnail', () => {
+    describe('uploadThumbnail', () => {
+      const thumbnail = 'dAta';
+      const videoId = 'sOmeVIDeoiD';
+      it('should call post with urls.thumbnailUpload and thumbnail data', () => {
+        const mockFormdata = new FormData();
+        mockFormdata.append('file', thumbnail);
+        apiMethods.uploadThumbnail({
+          studioEndpointUrl,
+          learningContextId,
+          videoId,
+          thumbnail,
+        });
+        expect(post).toHaveBeenCalledWith(
+          urls.thumbnailUpload({ studioEndpointUrl, learningContextId, videoId }),
+          mockFormdata,
+        );
+      });
+    });
+  });
+  describe('videoTranscripts', () => {
+    const language = 'la';
+    const videoId = 'sOmeVIDeoiD';
+    const youTubeId = 'SOMeyoutUBeid';
+    describe('checkTranscriptsForImport', () => {
+      const getJSON = `{"locator":"${blockId}","videos":[{"mode":"youtube","video":"${youTubeId}","type":"youtube"},{"mode":"edx_video_id","type":"edx_video_id","video":"${videoId}"}]}`;
+      it('should call get with url.checkTranscriptsForImport', () => {
+        apiMethods.checkTranscriptsForImport({
+          studioEndpointUrl,
+          blockId,
+          videoId,
+          youTubeId,
+        });
+        expect(get).toHaveBeenCalledWith(urls.checkTranscriptsForImport({
+          studioEndpointUrl,
+          parameters: encodeURIComponent(getJSON),
+        }));
+      });
+    });
+    describe('importTranscript', () => {
+      const getJSON = `{"locator":"${blockId}","videos":[{"mode":"youtube","video":"${youTubeId}","type":"youtube"}]}`;
+      it('should call get with url.replaceTranscript', () => {
+        apiMethods.importTranscript({ studioEndpointUrl, blockId, youTubeId });
+        expect(get).toHaveBeenCalledWith(urls.replaceTranscript({
+          studioEndpointUrl,
+          parameters: encodeURIComponent(getJSON),
+        }));
+      });
+    });
+    describe('uploadTranscript', () => {
+      const transcript = new Blob(['dAta']);
+      it('should call post with urls.videoTranscripts and transcript data', () => {
+        const mockFormdata = new FormData();
+        mockFormdata.append('file', transcript);
+        mockFormdata.append('edx_video_id', videoId);
+        mockFormdata.append('language_code', language);
+        mockFormdata.append('new_language_code', language);
+        apiMethods.uploadTranscript({
+          blockId,
+          studioEndpointUrl,
+          transcript,
+          videoId,
+          language,
+        });
+        expect(post).toHaveBeenCalledWith(
+          urls.videoTranscripts({ studioEndpointUrl, blockId }),
+          mockFormdata,
+        );
+      });
+    });
+    describe('transcript delete', () => {
+      it('should call deleteObject with urls.videoTranscripts and transcript data', () => {
+        const mockDeleteJSON = { data: { lang: language, edx_video_id: videoId } };
+        apiMethods.deleteTranscript({
+          blockId,
+          studioEndpointUrl,
+          videoId,
+          language,
+        });
+        expect(deleteObject).toHaveBeenCalledWith(
+          urls.videoTranscripts({ studioEndpointUrl, blockId }),
+          mockDeleteJSON,
+        );
+      });
+    });
+    describe('transcript get', () => {
+      it('should call get with urls.videoTranscripts and transcript data', () => {
+        const mockJSON = { data: { lang: language, edx_video_id: videoId } };
+        apiMethods.getTranscript({
+          blockId,
+          studioEndpointUrl,
+          videoId,
+          language,
+        });
+        expect(get).toHaveBeenCalledWith(
+          `${urls.videoTranscripts({ studioEndpointUrl, blockId })}?language_code=${language}`,
+          mockJSON,
+        );
+      });
+    });
+  });
+  describe('processVideoIds', () => {
+    const edxVideoId = 'eDXviDEoid';
+    const youtubeId = 'yOuTuBeUrL';
+    const youtubeUrl = `https://youtu.be/${youtubeId}`;
+    const html5Sources = [
+      'sOuRce1',
+      'sourCE2',
+    ];
+    afterEach(() => {
+      jest.restoreAllMocks();
+    });
+    describe('if there is a video id', () => {
+      beforeEach(() => {
+        jest.spyOn(api, 'isEdxVideo').mockReturnValue(true);
+        jest.spyOn(api, 'parseYoutubeId').mockReturnValue(youtubeId);
+      });
+      it('returns edxVideoId when there are no fallbackVideos', () => {
+        expect(api.processVideoIds({
+          videoUrl: '',
+          fallbackVideos: [],
+          videoId: edxVideoId,
+        })).toEqual({
+          edxVideoId,
+          html5Sources: [],
+          youtubeId: '',
+        });
+      });
+      it('returns edxVideoId and html5Sources when there are fallbackVideos', () => {
+        expect(api.processVideoIds({
+          videoUrl: youtubeUrl,
+          fallbackVideos: html5Sources,
+          videoId: edxVideoId,
+        })).toEqual({
+          edxVideoId,
+          html5Sources,
+          youtubeId,
+        });
+      });
+    });
+    describe('if there is a youtube url', () => {
+      beforeEach(() => {
+        jest.spyOn(api, 'isEdxVideo').mockReturnValue(false);
+        jest.spyOn(api, 'parseYoutubeId').mockReturnValue(youtubeId);
+      });
+      it('returns youtubeId when there are no fallbackVideos', () => {
+        expect(api.processVideoIds({
+          videoUrl: youtubeUrl,
+          fallbackVideos: [],
+          videoId: '',
+        })).toEqual({
+          edxVideoId: '',
+          html5Sources: [],
+          youtubeId,
+        });
+      });
+      it('returns youtubeId and html5Sources when there are fallbackVideos', () => {
+        expect(api.processVideoIds({
+          videoUrl: youtubeUrl,
+          fallbackVideos: html5Sources,
+          videoId: '',
+        })).toEqual({
+          edxVideoId: '',
+          html5Sources,
+          youtubeId,
+        });
+      });
+    });
+    describe('if the videoSource is an html5 source', () => {
+      beforeEach(() => {
+        jest.spyOn(api, 'isEdxVideo').mockReturnValue(false);
+        jest.spyOn(api, 'parseYoutubeId').mockReturnValue(null);
+      });
+      it('returns html5Sources when there are no fallbackVideos', () => {
+        expect(api.processVideoIds({
+          videoUrl: html5Sources[0],
+          fallbackVideos: [],
+          videoId: '',
+        })).toEqual({
+          edxVideoId: '',
+          html5Sources: [html5Sources[0]],
+          youtubeId: '',
+        });
+      });
+      it('returns html5Sources when there are fallbackVideos', () => {
+        expect(api.processVideoIds({
+          videoUrl: html5Sources[0],
+          fallbackVideos: [html5Sources[1]],
+          videoId: '',
+        })).toEqual({
+          edxVideoId: '',
+          html5Sources,
+          youtubeId: '',
+        });
+      });
+    });
+  });
+  describe('isEdxVideo', () => {
+    it('returns true if id is in uuid4 format', () => {
+      const id = 'c2afd8c8-3329-4dfc-95be-4ee6d986c3e5';
+      expect(api.isEdxVideo(id)).toEqual(true);
+    });
+    it('returns false if id is not in uuid4 format', () => {
+      const id = 'someB-ad-Id';
+      expect(api.isEdxVideo(id)).toEqual(false);
+    });
+  });
+  describe('parseYoutubeId', () => {
+    it('returns the youtube id in an url', () => {
+      const id = '3_yD_cEKoCk';
+      const testURLs = [
+        'https://www.youtube.com/watch?v=3_yD_cEKoCk&feature=featured',
+        'https://www.youtube.com/watch?v=3_yD_cEKoCk',
+        'http://www.youtube.com/watch?v=3_yD_cEKoCk',
+        '//www.youtube.com/watch?v=3_yD_cEKoCk',
+        'www.youtube.com/watch?v=3_yD_cEKoCk',
+        'https://youtube.com/watch?v=3_yD_cEKoCk',
+        'http://youtube.com/watch?v=3_yD_cEKoCk',
+        '//youtube.com/watch?v=3_yD_cEKoCk',
+        'youtube.com/watch?v=3_yD_cEKoCk',
+        'https://m.youtube.com/watch?v=3_yD_cEKoCk',
+        'http://m.youtube.com/watch?v=3_yD_cEKoCk',
+        '//m.youtube.com/watch?v=3_yD_cEKoCk',
+        'm.youtube.com/watch?v=3_yD_cEKoCk',
+        'https://www.youtube.com/v/3_yD_cEKoCk?fs=1&hl=en_US',
+        'http://www.youtube.com/v/3_yD_cEKoCk?fs=1&hl=en_US',
+        '//www.youtube.com/v/3_yD_cEKoCk?fs=1&hl=en_US',
+        'www.youtube.com/v/3_yD_cEKoCk?fs=1&hl=en_US',
+        'youtube.com/v/3_yD_cEKoCk?fs=1&hl=en_US',
+        'https://www.youtube.com/embed/3_yD_cEKoCk?autoplay=1',
+        'https://www.youtube.com/embed/3_yD_cEKoCk',
+        'http://www.youtube.com/embed/3_yD_cEKoCk',
+        '//www.youtube.com/embed/3_yD_cEKoCk',
+        'www.youtube.com/embed/3_yD_cEKoCk',
+        'https://youtube.com/embed/3_yD_cEKoCk',
+        'http://youtube.com/embed/3_yD_cEKoCk',
+        '//youtube.com/embed/3_yD_cEKoCk',
+        'youtube.com/embed/3_yD_cEKoCk',
+        'https://youtu.be/3_yD_cEKoCk?t=120',
+        'https://youtu.be/3_yD_cEKoCk',
+        'http://youtu.be/3_yD_cEKoCk',
+        '//youtu.be/3_yD_cEKoCk',
+        'youtu.be/3_yD_cEKoCk',
+      ];
+      testURLs.forEach((url) => {
+        expect(api.parseYoutubeId(url)).toEqual(id);
+      });
+    });
+    it('returns null if the url is not a youtube url', () => {
+      const badURL = 'https://someothersite.com/3_yD_cEKoCk';
+      expect(api.parseYoutubeId(badURL)).toEqual(null);
+    });
+  });
+  describe('processLicense', () => {
+    it('returns empty string when licenseType is empty or not a valid licnese type', () => {
+      expect(api.processLicense('', {})).toEqual('');
+      expect(api.processLicense('LiCeNsETYpe', {})).toEqual('');
+    });
+    it('returns empty string when licenseType equals creative commons', () => {
+      const licenseType = 'creative-commons';
+      const licenseDetails = {
+        attribution: true,
+        noncommercial: false,
+        noDerivatives: true,
+        shareAlike: false,
+      };
+      expect(api.processLicense(licenseType, licenseDetails)).toEqual('creative-commons: ver=4.0 BY ND');
+    });
+    it('returns empty string when licenseType equals creative commons', () => {
+      const licenseType = 'all-rights-reserved';
+      const licenseDetails = {};
+      expect(api.processLicense(licenseType, licenseDetails)).toEqual('all-rights-reserved');
+    });
+  });
+  describe('fetchVideoFeatures', () => {
+    it('should call get with url.videoFeatures', () => {
+      const args = { studioEndpointUrl };
+      apiMethods.fetchVideoFeatures({ ...args });
+      expect(get).toHaveBeenCalledWith(urls.videoFeatures({ ...args }));
+    });
+  });
+});
diff --git a/src/editors/data/services/cms/api.ts b/src/editors/data/services/cms/api.ts
new file mode 100644
index 0000000000..e979eb4455
--- /dev/null
+++ b/src/editors/data/services/cms/api.ts
@@ -0,0 +1,350 @@
+import type { AxiosRequestConfig } from 'axios';
+import { camelizeKeys } from '../../../utils';
+import { isLibraryKey } from '../../../../generic/key-utils';
+import * as urls from './urls';
+import {
+  get, post, put, deleteObject,
+} from './utils';
+import { durationStringFromValue } from '../../../containers/VideoEditor/components/VideoSettingsModal/components/DurationWidget/hooks';
+
+const fetchByUnitIdOptions: AxiosRequestConfig = {};
+
+interface Pagination {
+  start: number;
+  end: number;
+  page: number;
+  pageSize: number;
+  totalCount: number;
+}
+
+interface AssetResponse {
+  assets: Record<string, string>[]; // In the raw response here, these are NOT camel-cased yet.
+}
+
+type FieldsResponse = {
+  display_name: string; // In the raw response here, these are NOT camel-cased yet.
+  data: any;
+  metadata: Record<string, any>;
+} & Record<string, any>; // In courses (but not in libraries), there are many other fields returned here.
+
+interface AncestorsResponse {
+  ancestors: {
+    id: string;
+    display_name: string; // In the raw response here, these are NOT camel-cased yet.
+    category: string;
+    has_children: boolean;
+  }[];
+}
+
+export const loadImage = (imageData) => ({
+  ...imageData,
+  dateAdded: new Date(imageData.dateAdded.replace(' at', '')).getTime(),
+});
+
+export const loadImages = (rawImages) => camelizeKeys(rawImages).reduce(
+  (obj, image) => ({ ...obj, [image.id]: loadImage(image) }),
+  {},
+);
+
+export const parseYoutubeId = (src: string): string | null => {
+  const youtubeRegex = /^((?:https?:)?\/\/)?((?:www|m)\.)?((?:youtube\.com|youtu.be))(\/(?:[\w-]+\?v=|embed\/|v\/)?)([\w-]+)(\S+)?$/;
+  const match = src.match(youtubeRegex);
+  if (!match) {
+    return null;
+  }
+  return match[5];
+};
+
+export const processVideoIds = ({
+  videoId,
+  videoUrl,
+  fallbackVideos,
+}: { videoId: string, videoUrl: string, fallbackVideos: string[] }) => {
+  let youtubeId: string | null = '';
+  const html5Sources: string[] = [];
+
+  if (videoUrl) {
+    if (parseYoutubeId(videoUrl)) {
+      youtubeId = parseYoutubeId(videoUrl);
+    } else {
+      html5Sources.push(videoUrl);
+    }
+  }
+
+  if (fallbackVideos) {
+    fallbackVideos.forEach((src) => (src ? html5Sources.push(src) : null));
+  }
+
+  return {
+    edxVideoId: videoId,
+    html5Sources,
+    youtubeId,
+  };
+};
+
+export const isEdxVideo = (src: string): boolean => {
+  const uuid4Regex = /^[0-9a-fA-F]{8}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{12}$/;
+  if (src && src.match(uuid4Regex)) {
+    return true;
+  }
+  return false;
+};
+
+export const processLicense = (licenseType, licenseDetails) => {
+  if (licenseType === 'creative-commons') {
+    return 'creative-commons: ver=4.0'.concat(
+      (licenseDetails.attribution ? ' BY' : ''),
+      (licenseDetails.noncommercial ? ' NC' : ''),
+      (licenseDetails.noDerivatives ? ' ND' : ''),
+      (licenseDetails.shareAlike ? ' SA' : ''),
+    );
+  }
+  if (licenseType === 'all-rights-reserved') {
+    return 'all-rights-reserved';
+  }
+  return '';
+};
+
+export const apiMethods = {
+  fetchBlockById: ({ blockId, studioEndpointUrl }): Promise<{ data: FieldsResponse }> => get(
+    urls.block({ blockId, studioEndpointUrl }),
+  ),
+  /** A better name for this would be 'get ancestors of block' */
+  fetchByUnitId: ({ blockId, studioEndpointUrl }): Promise<{ data: AncestorsResponse }> => get(
+    urls.blockAncestor({ studioEndpointUrl, blockId }),
+    fetchByUnitIdOptions,
+  ),
+  fetchStudioView: ({ blockId, studioEndpointUrl }) => get(
+    urls.blockStudioView({ studioEndpointUrl, blockId }),
+  ),
+  fetchCourseImages: ({
+    learningContextId,
+    studioEndpointUrl,
+    pageNumber,
+  }): Promise<{ data: AssetResponse & Pagination }> => {
+    const params = {
+      asset_type: 'Images',
+      page: pageNumber,
+    };
+    return get(
+      `${urls.courseAssets({ studioEndpointUrl, learningContextId })}`,
+      { params },
+    );
+  },
+  fetchLibraryImages: ({ blockId }) => get(
+    `${urls.libraryAssets({ blockId })}`,
+  ),
+  fetchVideos: ({ studioEndpointUrl, learningContextId }) => get(
+    urls.courseVideos({ studioEndpointUrl, learningContextId }),
+  ),
+  fetchCourseDetails: ({ studioEndpointUrl, learningContextId }) => get(
+    urls.courseDetailsUrl({ studioEndpointUrl, learningContextId }),
+  ),
+  fetchAdvancedSettings: ({ studioEndpointUrl, learningContextId }) => get(
+    urls.courseAdvanceSettings({ studioEndpointUrl, learningContextId }),
+  ),
+  uploadAsset: ({
+    blockId,
+    learningContextId,
+    studioEndpointUrl,
+    asset,
+  }) => {
+    const data = new FormData();
+    data.append('file', asset);
+    if (isLibraryKey(learningContextId)) {
+      data.set('content', asset);
+      return put(
+        `${urls.libraryAssets({ blockId, assetName: asset.name })}`,
+        data,
+      );
+    }
+    return post(
+      urls.courseAssets({ studioEndpointUrl, learningContextId }),
+      data,
+    );
+  },
+  uploadThumbnail: ({
+    studioEndpointUrl,
+    learningContextId,
+    videoId,
+    thumbnail,
+  }) => {
+    const data = new FormData();
+    data.append('file', thumbnail);
+    return post(
+      urls.thumbnailUpload({ studioEndpointUrl, learningContextId, videoId }),
+      data,
+    );
+  },
+  checkTranscriptsForImport: ({
+    studioEndpointUrl,
+    blockId,
+    youTubeId,
+    videoId,
+  }) => {
+    const getJSON = `{"locator":"${blockId}","videos":[{"mode":"youtube","video":"${youTubeId}","type":"youtube"},{"mode":"edx_video_id","type":"edx_video_id","video":"${videoId}"}]}`;
+    return get(
+      urls.checkTranscriptsForImport({
+        studioEndpointUrl,
+        parameters: encodeURIComponent(getJSON),
+      }),
+    );
+  },
+  importTranscript: ({
+    studioEndpointUrl,
+    blockId,
+    youTubeId,
+  }) => {
+    const getJSON = `{"locator":"${blockId}","videos":[{"mode":"youtube","video":"${youTubeId}","type":"youtube"}]}`;
+    return get(
+      urls.replaceTranscript({
+        studioEndpointUrl,
+        parameters: encodeURIComponent(getJSON),
+      }),
+    );
+  },
+  getTranscript: ({
+    studioEndpointUrl,
+    language,
+    blockId,
+    videoId,
+  }) => {
+    const getJSON = { data: { lang: language, edx_video_id: videoId } };
+    return get(
+      `${urls.videoTranscripts({ studioEndpointUrl, blockId })}?language_code=${language}`,
+      getJSON,
+    );
+  },
+
+  deleteTranscript: ({
+    studioEndpointUrl,
+    language,
+    blockId,
+    videoId,
+  }) => {
+    const deleteJSON = { data: { lang: language, edx_video_id: videoId } };
+    return deleteObject(
+      urls.videoTranscripts({ studioEndpointUrl, blockId }),
+      deleteJSON,
+    );
+  },
+  uploadTranscript: ({
+    blockId,
+    studioEndpointUrl,
+    transcript,
+    videoId,
+    language,
+    newLanguage = null,
+  }) => {
+    const data = new FormData();
+    data.append('file', transcript);
+    data.append('edx_video_id', videoId);
+    data.append('language_code', language);
+    data.append('new_language_code', newLanguage || language);
+    return post(
+      urls.videoTranscripts({ studioEndpointUrl, blockId }),
+      data,
+    );
+  },
+  normalizeContent: ({
+    blockId,
+    blockType,
+    content,
+    learningContextId,
+    title,
+  }: {
+    blockId: string,
+    blockType: string,
+    content: any, // string for 'html' blocks, otherwise Record<string, any>
+    learningContextId: string,
+    title: string,
+  }) => {
+    let response = {};
+    if (blockType === 'html') {
+      response = {
+        category: blockType,
+        courseKey: learningContextId,
+        data: content,
+        has_changes: true,
+        id: blockId,
+        metadata: { display_name: title },
+      };
+    } else if (blockType === 'problem') {
+      response = {
+        data: content.olx,
+        category: blockType,
+        courseKey: learningContextId,
+        has_changes: true,
+        id: blockId,
+        metadata: { display_name: title, ...content.settings },
+      };
+    } else if (blockType === 'video') {
+      const {
+        html5Sources,
+        edxVideoId,
+        youtubeId,
+      } = processVideoIds({
+        videoId: content.videoId,
+        videoUrl: content.videoSource,
+        fallbackVideos: content.fallbackVideos,
+      });
+      response = {
+        category: blockType,
+        courseKey: learningContextId,
+        display_name: title,
+        id: blockId,
+        metadata: {
+          display_name: title,
+          download_video: content.allowVideoDownloads,
+          public_access: content.allowVideoSharing.value,
+          edx_video_id: edxVideoId,
+          html5_sources: html5Sources,
+          youtube_id_1_0: youtubeId,
+          thumbnail: content.thumbnail,
+          download_track: content.allowTranscriptDownloads,
+          track: '', // TODO Downloadable Transcript URL. Backend expects a file name, for example: "something.srt"
+          show_captions: content.showTranscriptByDefault,
+          handout: content.handout,
+          start_time: durationStringFromValue(content.duration.startTime),
+          end_time: durationStringFromValue(content.duration.stopTime),
+          license: processLicense(content.licenseType, content.licenseDetails),
+        },
+      };
+    } else {
+      throw new TypeError(`No Block in V2 Editors named /"${blockType}/", Cannot Save Content.`);
+    }
+    return { ...response };
+  },
+  saveBlock: ({
+    blockId,
+    blockType,
+    content,
+    learningContextId,
+    studioEndpointUrl,
+    title,
+  }) => post(
+    urls.block({ studioEndpointUrl, blockId }),
+    apiMethods.normalizeContent({
+      blockType,
+      content,
+      blockId,
+      learningContextId,
+      title,
+    }),
+  ),
+  fetchVideoFeatures: ({
+    studioEndpointUrl,
+  }) => get(
+    urls.videoFeatures({ studioEndpointUrl }),
+  ),
+  uploadVideo: ({
+    data,
+    studioEndpointUrl,
+    learningContextId,
+  }) => post(
+    urls.courseVideos({ studioEndpointUrl, learningContextId }),
+    data,
+  ),
+};
+
+export default apiMethods;
diff --git a/src/editors/data/services/cms/mockVideoData.js b/src/editors/data/services/cms/mockVideoData.js
new file mode 100644
index 0000000000..a5a03da960
--- /dev/null
+++ b/src/editors/data/services/cms/mockVideoData.js
@@ -0,0 +1,57 @@
+import PropTypes from 'prop-types';
+import { LicenseTypes } from '../../constants/licenses';
+
+export const videoDataProps = {
+  videoSource: PropTypes.string,
+  videoId: PropTypes.string,
+  fallbackVideos: PropTypes.arrayOf(PropTypes.string),
+  allowVideoDownloads: PropTypes.bool,
+  allowVideoSharing: PropTypes.bool,
+  thumbnail: PropTypes.string,
+  transcripts: PropTypes.objectOf(PropTypes.string),
+  allowTranscriptDownloads: PropTypes.bool,
+  duration: PropTypes.shape({
+    startTime: PropTypes.number,
+    stopTime: PropTypes.number,
+    total: PropTypes.number,
+  }),
+  showTranscriptByDefult: PropTypes.bool,
+  handout: PropTypes.string,
+  licenseType: PropTypes.string,
+  licenseDetails: PropTypes.shape({
+    attribution: PropTypes.bool,
+    noncommercial: PropTypes.bool,
+    noDerivatives: PropTypes.bool,
+    shareAlike: PropTypes.bool,
+  }),
+};
+
+export const singleVideoData = {
+  videoSource: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
+  videoId: '7c12381b-6503-4d52-82bd-6ad01b902220',
+  fallbackVideos: [
+    'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
+    'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
+  ],
+  allowVideoDownloads: true,
+  allowVideoSharing: true,
+  thumbnail: 'someString', // filename
+  transcripts: {
+    en: { filename: 'my-transcript-url' },
+  },
+  allowTranscriptDownloads: false,
+  duration: {
+    startTime: 0,
+    stopTime: 0,
+    total: 0,
+  },
+  showTranscriptByDefault: false,
+  handout: 'my-handout-url',
+  licenseType: LicenseTypes.creativeCommons,
+  licenseDetails: {
+    attribution: true,
+    noncommercial: false,
+    noDerivatives: false,
+    shareAlike: false,
+  },
+};
diff --git a/src/editors/data/services/cms/types.ts b/src/editors/data/services/cms/types.ts
new file mode 100644
index 0000000000..f093b12359
--- /dev/null
+++ b/src/editors/data/services/cms/types.ts
@@ -0,0 +1,77 @@
+import PropTypes from 'prop-types';
+
+/*
+export const videoDataProps = {
+  videoSource: PropTypes.string,
+  videoId: PropTypes.string,
+  fallbackVideos: PropTypes.arrayOf(PropTypes.string),
+  allowVideoDownloads: PropTypes.bool,
+  allowVideoSharing: PropTypes.bool,
+  thumbnail: PropTypes.string,
+  transcripts: PropTypes.objectOf(PropTypes.string),
+  allowTranscriptDownloads: PropTypes.bool,
+  duration: PropTypes.shape({
+    startTime: PropTypes.number,
+    stopTime: PropTypes.number,
+    total: PropTypes.number,
+  }),
+  showTranscriptByDefult: PropTypes.bool,
+  handout: PropTypes.string,
+  licenseType: PropTypes.string,
+  licenseDetails: PropTypes.shape({
+    attribution: PropTypes.bool,
+    noncommercial: PropTypes.bool,
+    noDerivatives: PropTypes.bool,
+    shareAlike: PropTypes.bool,
+  }),
+};
+*/
+
+export const answerOptionProps = PropTypes.shape({
+  id: PropTypes.string,
+  title: PropTypes.string,
+  correct: PropTypes.bool,
+  feedback: PropTypes.string,
+  selectedFeedback: PropTypes.string,
+  unselectedFeedback: PropTypes.string,
+});
+
+/*
+export const problemDataProps = {
+  rawOLX: PropTypes.string,
+  problemType: PropTypes.instanceOf(ProblemTypes),
+  question: PropTypes.string,
+  answers: PropTypes.arrayOf(
+    answerOptionProps,
+  ),
+  settings: PropTypes.shape({
+    scoring: PropTypes.shape({
+      advanced: PropTypes.bool,
+      scoring: PropTypes.shape({
+        weight: PropTypes.number,
+        attempts: PropTypes.shape({
+          unlimited: PropTypes.bool,
+          number: PropTypes.number,
+        }),
+      }),
+    }),
+    hints: PropTypes.arrayOf(PropTypes.string),
+    timeBetween: PropTypes.number,
+    showAnswer: PropTypes.shape({
+      on: PropTypes.instanceOf(ShowAnswerTypes),
+      afterAtempts: PropTypes.number,
+    }),
+    showResetButton: PropTypes.bool,
+    defaultSettings: PropTypes.shape({
+      max_attempts: PropTypes.number,
+      showanswer: PropTypes.string,
+      show_reset_button: PropTypes.bool,
+      rerandomize: PropTypes.string,
+    }),
+  }),
+};
+*/
+
+export default {
+  answerOptionProps,
+};
diff --git a/src/editors/data/services/cms/urls.test.ts b/src/editors/data/services/cms/urls.test.ts
new file mode 100644
index 0000000000..95a3968959
--- /dev/null
+++ b/src/editors/data/services/cms/urls.test.ts
@@ -0,0 +1,192 @@
+import {
+  returnUrl,
+  unit,
+  libraryV1,
+  block,
+  blockAncestor,
+  blockStudioView,
+  courseAssets,
+  thumbnailUpload,
+  downloadVideoTranscriptURL,
+  videoTranscripts,
+  downloadVideoHandoutUrl,
+  courseDetailsUrl,
+  checkTranscriptsForImport,
+  replaceTranscript,
+  courseAdvanceSettings,
+  mediaTranscriptURL,
+  videoFeatures,
+  courseVideos,
+} from './urls';
+
+describe('cms url methods', () => {
+  const studioEndpointUrl = 'urLgoeStOstudiO';
+  const blockId = 'block-v1-blOckIDTeST123';
+  const v2BlockId = 'lb:blOckIDTeST123';
+  const learningContextId = 'lEarnIngCOntextId123';
+  const libraryLearningContextId = 'library-v1:libaryId123';
+  const courseId = 'course-v1:courseId123';
+  const libraryV1Id = 'lib-block-v1:libaryId123';
+  const libraryV2Id = 'lib:libaryId123';
+  const language = 'la';
+  const handout = '/aSSet@hANdoUt';
+  const videoId = '123-SOmeVidEOid-213';
+  const parameters = 'SomEParAMEterS';
+
+  describe('return to learning context urls', () => {
+    const unitUrl = {
+      data: {
+        ancestors: [
+          {
+            id: 'unItUrlTEST',
+          },
+        ],
+      },
+    };
+    it('returns the library page when given the v1 library', () => {
+      expect(returnUrl({
+        studioEndpointUrl, unitUrl, learningContextId: libraryLearningContextId, blockId: libraryV1Id,
+      }))
+        .toEqual(`${studioEndpointUrl}/library/${libraryLearningContextId}`);
+    });
+    // it('throws error when given the v2 library', () => {
+    //   expect(() => { returnUrl({ studioEndpointUrl, unitUrl, learningContextId: libraryV2Id }); })
+    //     .toThrow('Return url not available (or needed) for V2 libraries');
+    // });
+    it('returns empty url when given the v2 library', () => {
+      expect(returnUrl({
+        studioEndpointUrl, unitUrl, learningContextId: libraryV2Id, blockId: libraryV2Id,
+      })).toEqual('');
+    });
+    it('returnUrl function should return url with studioEndpointUrl, unitUrl, and blockId', () => {
+      expect(returnUrl({
+        studioEndpointUrl, unitUrl, learningContextId: courseId, blockId,
+      }))
+        .toEqual(`${studioEndpointUrl}/container/${unitUrl.data.ancestors[0].id}#${blockId}`);
+    });
+    it('returns blank url for v2 block', () => {
+      expect(returnUrl({
+        studioEndpointUrl, unitUrl, learningContextId: courseId, blockId: v2BlockId,
+      }))
+        .toEqual('');
+    });
+    it('throws error if no unit url', () => {
+      expect(returnUrl({
+        studioEndpointUrl, unitUrl: null, learningContextId: courseId, blockId,
+      }))
+        .toEqual('');
+    });
+    it('returns the library page when given the library', () => {
+      expect(libraryV1({ studioEndpointUrl, learningContextId: libraryV1Id }))
+        .toEqual(`${studioEndpointUrl}/library/${libraryV1Id}`);
+    });
+    it('unit function should return url with studioEndpointUrl, unitUrl, and blockId', () => {
+      expect(unit({ studioEndpointUrl, unitUrl, blockId }))
+        .toEqual(`${studioEndpointUrl}/container/${unitUrl.data.ancestors[0].id}#${blockId}`);
+    });
+  });
+  describe('block', () => {
+    it('returns v1 url with studioEndpointUrl and blockId', () => {
+      expect(block({ studioEndpointUrl, blockId }))
+        .toEqual(`${studioEndpointUrl}/xblock/${blockId}`);
+    });
+    it('returns v2 url with studioEndpointUrl and v2BlockId', () => {
+      expect(block({ studioEndpointUrl, blockId: v2BlockId }))
+        .toEqual(`${studioEndpointUrl}/api/xblock/v2/xblocks/${v2BlockId}/fields/`);
+    });
+  });
+  describe('blockAncestor', () => {
+    it('returns url with studioEndpointUrl, blockId and ancestor query', () => {
+      expect(blockAncestor({ studioEndpointUrl, blockId }))
+        .toEqual(`${block({ studioEndpointUrl, blockId })}?fields=ancestorInfo`);
+    });
+    it('throws error with studioEndpointUrl, v2 blockId and ancestor query', () => {
+      expect(() => { blockAncestor({ studioEndpointUrl, blockId: v2BlockId }); })
+        .toThrow('Block ancestor not available (and not needed) for V2 blocks');
+    });
+  });
+  describe('blockStudioView', () => {
+    it('returns v1 url with studioEndpointUrl, blockId and studio_view query', () => {
+      expect(blockStudioView({ studioEndpointUrl, blockId }))
+        .toEqual(`${block({ studioEndpointUrl, blockId })}/studio_view`);
+    });
+    it('returns v2 url with studioEndpointUrl, v2 blockId and studio_view query', () => {
+      expect(blockStudioView({ studioEndpointUrl, blockId: v2BlockId }))
+        .toEqual(`${studioEndpointUrl}/api/xblock/v2/xblocks/${v2BlockId}/view/studio_view/`);
+    });
+  });
+
+  describe('courseAssets', () => {
+    it('returns url with studioEndpointUrl and learningContextId', () => {
+      expect(courseAssets({ studioEndpointUrl, learningContextId }))
+        .toEqual(`${studioEndpointUrl}/assets/${learningContextId}/`);
+    });
+  });
+  describe('thumbnailUpload', () => {
+    it('returns url with studioEndpointUrl, learningContextId, and videoId', () => {
+      expect(thumbnailUpload({ studioEndpointUrl, learningContextId, videoId }))
+        .toEqual(`${studioEndpointUrl}/video_images/${learningContextId}/${videoId}`);
+    });
+  });
+  describe('videoTranscripts', () => {
+    it('returns url with studioEndpointUrl and blockId', () => {
+      expect(videoTranscripts({ studioEndpointUrl, blockId }))
+        .toEqual(`${block({ studioEndpointUrl, blockId })}/handler/studio_transcript/translation`);
+    });
+  });
+  describe('downloadVideoTranscriptURL', () => {
+    it('returns url with studioEndpointUrl, blockId and language query', () => {
+      expect(downloadVideoTranscriptURL({ studioEndpointUrl, blockId, language }))
+        .toEqual(`${videoTranscripts({ studioEndpointUrl, blockId })}?language_code=${language}`);
+    });
+  });
+  describe('downloadVideoHandoutUrl', () => {
+    it('returns url with studioEndpointUrl and handout', () => {
+      expect(downloadVideoHandoutUrl({ studioEndpointUrl, handout }))
+        .toEqual(`${studioEndpointUrl}${handout}`);
+    });
+  });
+  describe('courseDetailsUrl', () => {
+    it('returns url with studioEndpointUrl and courseKey', () => {
+      expect(courseDetailsUrl({ studioEndpointUrl, learningContextId }))
+        .toEqual(`${studioEndpointUrl}/settings/details/${learningContextId}`);
+    });
+  });
+  describe('checkTranscriptsForImport', () => {
+    it('returns url with studioEndpointUrl and parameters', () => {
+      expect(checkTranscriptsForImport({ studioEndpointUrl, parameters }))
+        .toEqual(`${studioEndpointUrl}/transcripts/check?data=${parameters}`);
+    });
+  });
+  describe('replaceTranscript', () => {
+    it('returns url with studioEndpointUrl and parameters', () => {
+      expect(replaceTranscript({ studioEndpointUrl, parameters }))
+        .toEqual(`${studioEndpointUrl}/transcripts/replace?data=${parameters}`);
+    });
+  });
+  describe('courseAdvanceSettings', () => {
+    it('returns url with studioEndpointUrl and learningContextId', () => {
+      expect(courseAdvanceSettings({ studioEndpointUrl, learningContextId }))
+        .toEqual(`${studioEndpointUrl}/api/contentstore/v0/advanced_settings/${learningContextId}`);
+    });
+  });
+  describe('videoFeatures', () => {
+    it('returns url with studioEndpointUrl and learningContextId', () => {
+      expect(videoFeatures({ studioEndpointUrl }))
+        .toEqual(`${studioEndpointUrl}/video_features/`);
+    });
+  });
+  describe('courseVideos', () => {
+    it('returns url with studioEndpointUrl and learningContextId', () => {
+      expect(courseVideos({ studioEndpointUrl, learningContextId }))
+        .toEqual(`${studioEndpointUrl}/videos/${learningContextId}`);
+    });
+  });
+  describe('mediaTranscriptURL', () => {
+    it('returns url with studioEndpointUrl', () => {
+      const transcriptUrl = 'this-is-a-transcript';
+      expect(mediaTranscriptURL({ studioEndpointUrl, transcriptUrl }))
+        .toEqual(`${studioEndpointUrl}${transcriptUrl}`);
+    });
+  });
+});
diff --git a/src/editors/data/services/cms/urls.ts b/src/editors/data/services/cms/urls.ts
new file mode 100644
index 0000000000..a137ffb9f8
--- /dev/null
+++ b/src/editors/data/services/cms/urls.ts
@@ -0,0 +1,113 @@
+import { isLibraryKey, isLibraryV1Key } from '../../../../generic/key-utils';
+import { getXBlockAssetsApiUrl } from '../../../../library-authoring/data/api';
+
+/**
+ * A little helper so we can write the types of these functions more compactly
+ * The main purpose of this is to indicate the params are all strings.
+ */
+type UrlFunction = (args: Record<string, string>) => string;
+
+export const libraryV1 = ({ studioEndpointUrl, learningContextId }) => (
+  `${studioEndpointUrl}/library/${learningContextId}`
+);
+
+export const unit = ({ studioEndpointUrl, unitUrl, blockId }) => (
+  `${studioEndpointUrl}/container/${unitUrl.data.ancestors[0]?.id}#${blockId}`
+);
+
+export const returnUrl = ({
+  studioEndpointUrl, unitUrl, learningContextId, blockId,
+}): string => {
+  // Is this a v1 library?
+  if (isLibraryV1Key(learningContextId)) {
+    // when the learning context is a v1 library, return to the library page
+    return libraryV1({ studioEndpointUrl, learningContextId });
+  }
+  // Is this a v2 library?
+  if (isLibraryKey(learningContextId)) {
+    // when it's a v2 library, there will be no return url (instead a closed popup)
+    // (temporary) don't throw error, just return empty url. it will fail it's network connection but otherwise
+    // the app will run
+    // throw new Error('Return url not available (or needed) for V2 libraries');
+    return '';
+  }
+  // when the learning context is a course, return to the unit page
+  // only do this for v1 blocks
+  if (unitUrl && blockId.includes('block-v1')) {
+    return unit({ studioEndpointUrl, unitUrl, blockId });
+  }
+  return '';
+};
+
+export const block = (({ studioEndpointUrl, blockId }) => (
+  blockId.startsWith('lb:')
+    ? `${studioEndpointUrl}/api/xblock/v2/xblocks/${blockId}/fields/`
+    : `${studioEndpointUrl}/xblock/${blockId}`
+)) satisfies UrlFunction;
+
+export const blockAncestor = (({ studioEndpointUrl, blockId }) => {
+  if (blockId.includes('block-v1')) {
+    return `${block({ studioEndpointUrl, blockId })}?fields=ancestorInfo`;
+  }
+  throw new Error('Block ancestor not available (and not needed) for V2 blocks');
+}) satisfies UrlFunction;
+
+export const blockStudioView = (({ studioEndpointUrl, blockId }) => (
+  blockId.includes('block-v1')
+    ? `${block({ studioEndpointUrl, blockId })}/studio_view`
+    : `${studioEndpointUrl}/api/xblock/v2/xblocks/${blockId}/view/studio_view/`
+)) satisfies UrlFunction;
+
+export const courseAssets = (({ studioEndpointUrl, learningContextId }) => (
+  `${studioEndpointUrl}/assets/${learningContextId}/`
+)) satisfies UrlFunction;
+
+export const libraryAssets = (({ blockId, assetName }) => (
+  assetName
+    ? `${getXBlockAssetsApiUrl(blockId)}static/${encodeURI(assetName)}`
+    : `${getXBlockAssetsApiUrl(blockId)}`
+)) satisfies UrlFunction;
+
+export const thumbnailUpload = (({ studioEndpointUrl, learningContextId, videoId }) => (
+  `${studioEndpointUrl}/video_images/${learningContextId}/${videoId}`
+)) satisfies UrlFunction;
+
+export const videoTranscripts = (({ studioEndpointUrl, blockId }) => (
+  `${block({ studioEndpointUrl, blockId })}/handler/studio_transcript/translation`
+)) satisfies UrlFunction;
+
+export const downloadVideoTranscriptURL = (({ studioEndpointUrl, blockId, language }) => (
+  `${videoTranscripts({ studioEndpointUrl, blockId })}?language_code=${language}`
+)) satisfies UrlFunction;
+
+export const mediaTranscriptURL = (({ studioEndpointUrl, transcriptUrl }) => (
+  `${studioEndpointUrl}${transcriptUrl}`
+)) satisfies UrlFunction;
+
+export const downloadVideoHandoutUrl = (({ studioEndpointUrl, handout }) => (
+  `${studioEndpointUrl}${handout}`
+)) satisfies UrlFunction;
+
+export const courseDetailsUrl = (({ studioEndpointUrl, learningContextId }) => (
+  `${studioEndpointUrl}/settings/details/${learningContextId}`
+)) satisfies UrlFunction;
+
+export const checkTranscriptsForImport = (({ studioEndpointUrl, parameters }) => (
+  `${studioEndpointUrl}/transcripts/check?data=${parameters}`
+)) satisfies UrlFunction;
+
+export const replaceTranscript = (({ studioEndpointUrl, parameters }) => (
+  `${studioEndpointUrl}/transcripts/replace?data=${parameters}`
+)) satisfies UrlFunction;
+
+export const courseAdvanceSettings = (({ studioEndpointUrl, learningContextId }) => (
+  `${studioEndpointUrl}/api/contentstore/v0/advanced_settings/${learningContextId}`
+)) satisfies UrlFunction;
+
+export const videoFeatures = (({ studioEndpointUrl }) => (
+  `${studioEndpointUrl}/video_features/`
+)) satisfies UrlFunction;
+
+export const courseVideos = (({ studioEndpointUrl, learningContextId }) => (
+  `${studioEndpointUrl}/videos/${learningContextId}`
+)) satisfies UrlFunction;
diff --git a/src/editors/data/services/cms/utils.test.ts b/src/editors/data/services/cms/utils.test.ts
new file mode 100644
index 0000000000..868c8a63b6
--- /dev/null
+++ b/src/editors/data/services/cms/utils.test.ts
@@ -0,0 +1,33 @@
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import * as utils from './utils';
+
+jest.mock('@edx/frontend-platform/auth', () => ({
+  getAuthenticatedHttpClient: jest.fn(),
+}));
+
+describe('cms service utils', () => {
+  describe('get', () => {
+    it('forwards arguments to authenticatedHttpClient().get', () => {
+      const get = jest.fn((...args) => ({ get: args }));
+      getAuthenticatedHttpClient.mockReturnValue({ get });
+      const args = ['url 1', { headers: {} }] as const;
+      expect(utils.get(...args)).toEqual(get(...args));
+    });
+  });
+  describe('post', () => {
+    it('forwards arguments to authenticatedHttpClient().post', () => {
+      const post = jest.fn((...args) => ({ post: args }));
+      getAuthenticatedHttpClient.mockReturnValue({ post });
+      const args = ['url 2', { headers: {} }] as const;
+      expect(utils.post(...args)).toEqual(post(...args));
+    });
+  });
+  // describe('deleteObject', () => {
+  //   it('forwards arguments to authenticatedHttpClient().delete', () => {
+  //     const deleteObject = jest.fn((...args) => ({ delete: args }));
+  //     getAuthenticatedHttpClient.mockReturnValue({ deleteObject });
+  //     const args = ['some', 'args', 'for', 'the', 'test'];
+  //     expect(utils.deleteObject(...args)).toEqual(deleteObject(...args));
+  //   });
+  // });
+});
diff --git a/src/editors/data/services/cms/utils.ts b/src/editors/data/services/cms/utils.ts
new file mode 100644
index 0000000000..2e77435cd5
--- /dev/null
+++ b/src/editors/data/services/cms/utils.ts
@@ -0,0 +1,32 @@
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import type { Axios } from 'axios';
+
+export const client: () => Axios = getAuthenticatedHttpClient;
+
+/**
+ * get(url)
+ * simple wrapper providing an authenticated Http client get action
+ * @param {string} url - target url
+ */
+export const get: Axios['get'] = (...args) => client().get(...args);
+/**
+ * post(url, data)
+ * simple wrapper providing an authenticated Http client post action
+ * @param {string} url - target url
+ * @param {object|string} data - post payload
+ */
+export const post: Axios['post'] = (...args) => client().post(...args);
+
+/**
+ * put(url, data)
+ * simple wrapper providing an authenticated Http client put action
+ */
+export const put: Axios['put'] = (...args) => client().put(...args);
+
+/**
+ * delete(url, data)
+ * simple wrapper providing an authenticated Http client delete action
+ * @param {string} url - target url
+ * @param {object|string} data - delete payload
+ */
+export const deleteObject: Axios['delete'] = (...args) => client().delete(...args);
diff --git a/src/editors/data/store.test.js b/src/editors/data/store.test.js
new file mode 100644
index 0000000000..6b8c851d94
--- /dev/null
+++ b/src/editors/data/store.test.js
@@ -0,0 +1,66 @@
+import { applyMiddleware } from 'redux';
+import thunkMiddleware from 'redux-thunk';
+import { composeWithDevToolsLogOnlyInProduction } from '@redux-devtools/extension';
+import { createLogger } from 'redux-logger';
+
+import rootReducer, { actions, selectors } from './redux';
+
+import exportedStore, { createStore } from './store';
+
+jest.mock('./redux', () => ({
+  __esModule: true,
+  default: 'REDUCER',
+  actions: 'ACTIONS',
+  selectors: 'SELECTORS',
+}));
+
+jest.mock('redux-logger', () => ({
+  createLogger: () => 'logger',
+}));
+jest.mock('redux-thunk', () => 'thunkMiddleware');
+jest.mock('redux', () => ({
+  applyMiddleware: (...middleware) => ({ applied: middleware }),
+  createStore: (reducer, middleware) => ({ reducer, middleware }),
+}));
+jest.mock('@redux-devtools/extension', () => ({
+  composeWithDevToolsLogOnlyInProduction: (middleware) => ({ withDevTools: middleware }),
+}));
+
+describe('store aggregator module', () => {
+  describe('exported store', () => {
+    it('is generated by createStore', () => {
+      expect(exportedStore).toEqual(createStore());
+    });
+    it('creates store with connected reducers', () => {
+      expect(createStore().reducer).toEqual(rootReducer);
+    });
+    describe('middleware', () => {
+      it('exports thunk and logger middleware, composed and applied with dev tools', () => {
+        expect(createStore().middleware).toEqual(
+          composeWithDevToolsLogOnlyInProduction(applyMiddleware(thunkMiddleware, createLogger())),
+        );
+      });
+    });
+  });
+  describe('dev exposed tools', () => {
+    beforeEach(() => {
+      window.store = undefined;
+      window.actions = undefined;
+      window.selectors = undefined;
+    });
+    it('exposes redux tools if in development env', () => {
+      process.env.NODE_ENV = 'development';
+      const store = createStore();
+      expect(window.store).toEqual(store);
+      expect(window.actions).toEqual(actions);
+      expect(window.selectors).toEqual(selectors);
+    });
+    it('does not expose redux tools if in production env', () => {
+      process.env.NODE_ENV = 'production';
+      createStore();
+      expect(window.store).toEqual(undefined);
+      expect(window.actions).toEqual(undefined);
+      expect(window.selectors).toEqual(undefined);
+    });
+  });
+});
diff --git a/src/editors/data/store.ts b/src/editors/data/store.ts
new file mode 100755
index 0000000000..deee26bf46
--- /dev/null
+++ b/src/editors/data/store.ts
@@ -0,0 +1,32 @@
+import * as redux from 'redux';
+import thunkMiddleware from 'redux-thunk';
+import { composeWithDevToolsLogOnlyInProduction } from '@redux-devtools/extension';
+import { createLogger } from 'redux-logger';
+
+import reducer, { actions, selectors, type EditorState } from './redux';
+
+export const createStore = () => {
+  const loggerMiddleware = createLogger();
+
+  const middleware = [thunkMiddleware, loggerMiddleware];
+
+  const store = redux.createStore<EditorState, any, any, any>(
+    reducer as any,
+    composeWithDevToolsLogOnlyInProduction(redux.applyMiddleware(...middleware)),
+  );
+
+  /**
+   * Dev tools for redux work
+   */
+  if (process.env.NODE_ENV === 'development') {
+    (window as any).store = store;
+    (window as any).actions = actions;
+    (window as any).selectors = selectors;
+  }
+
+  return store;
+};
+
+const store = createStore();
+
+export default store;
diff --git a/src/editors/decisions/0001-library-adr.rst b/src/editors/decisions/0001-library-adr.rst
new file mode 100644
index 0000000000..911bda1056
--- /dev/null
+++ b/src/editors/decisions/0001-library-adr.rst
@@ -0,0 +1,10 @@
+This library is meant for high-level components related to "content" types, which sometimes correspond to xblocks --- so videos, html, problems, etc.
+  - This is a higher-level layer on top of paragon.
+
+The components may be shared across multiple frontends.
+  - For example, components may be used by both the learning MFE, the course authoring MFE, and the shared content MFE.
+  - Video-playing components may be used for previewing in editing contexts, etc.
+
+The components cover many types of content, not just a single one.
+  - For example, HTML editing frontend might share code and style with video editing or problem editing.
+  - This will also help keep style and accessibility consistent across different content types.
diff --git a/src/editors/decisions/0002-text-editor-adr.md b/src/editors/decisions/0002-text-editor-adr.md
new file mode 100644
index 0000000000..34b3cc1d59
--- /dev/null
+++ b/src/editors/decisions/0002-text-editor-adr.md
@@ -0,0 +1,69 @@
+# Status
+
+Accepted
+
+# Context
+
+We seek to hoist the legacy text (HTML) text XBlock editor out of the monolith into a decoupled React application
+without reducing editor capabilities in the process.
+
+The legacy editor delegates the bulk of its operations to the [TinyMCE](https://www.tiny.cloud/docs/tinymce/6/) editor.
+Per the link, TinyMCE is "a rich-text editor that allows users to create formatted content within
+a user-friendly interface".
+
+# Decision set (each decision small)
+
+1. Rely on cross-editor XBlock network access support, per "Network Request Layer" ADR in this repo
+2. Continue using the tinyMCE editor
+3. Wrap the tinyMCE editor so as to be able to handle it as a vanilla React component
+4. Use a mix of configuration and tinyMCE API calls to customize the editor as needed 
+    * (e.g., offer image upload and image gallery selection)
+    
+# Consequences
+
+## Rely on editors-wide XBlock API (network access) decision
+No complexity associated with CRUD operations on XBlock content, irrespective of where the XBlocks are stored.
+
+## Continue using the tinyMCE editor
+
+Future customizations might not be possible if look-and-feel configurations offered by tinyMCE prove inadequate, or if the tinyMCE API falls short. For current requirements this was not a showstopper.
+
+# Wrap the tinyMCE editor for React use
+
+Wrapping of the tinyMCE editor to behave like a react component is done by the simple expedient of having `TextEditor.jsx` import the [tinymce/tinymce-react](https://github.com/tinymce/tinymce-react) repo and then interacting with the Editor component defined there.
+
+Interaction with the tinyMCE editor is via a reference, saved at editor initialization.
+
+When wrapping the tinyMCE component we assign a `ref` to the created component so that we can access its state and apis to update the content and draw it back out.
+ 
+* initialize with html content from xblock
+
+# Editor customization
+
+Because the tinyMCE instance is the core of the TextEditor experience (pretty much the whole thing), and it is not a custom-configuratble UI,
+the configuration hook provides much of our control of the UI.
+However, because TinyMCE provides extensible controls, we have a few internal-written widgets we have embedded into the workflow,
+specifically including the image upload/settings modal.
+
+Much of the editor configuration is actually defined in `TextEditor/pluginConfig.js`, and the editorHook mostly draws from this configuration to populate the editor."
+
+## Image upload/gallery selection
+The tinyMCE editor is extended to offer an image upload/select button. When the end-user pushes this button, the editor's window is occluded by a modal dialog capable of uploading an image. The end-user can also interact with this modal window to toggle between uploading a new image, or selecting from among previously uploaded images (aka, the image gallery), to save, or to cancel out.
+
+On its initialization, the tinyMCE editor is provided with an icon and a callback to associate with the image upload button.
+
+* Tiny MCE needs a "configured" button to open the modal dialog to select/upload an image.
+    * This verbiage is somewhat important distinction, because this is a configuration, not a coding feature
+
+Later, on invocation of the modal dialog, this window is initialized with a reference to the tinyMCE editor.
+If the modal window is driven to a save operation on an uploaded or a selected image, the window uses this reference to provide an image tag and image metadata to the tinyMCE editor, for inclusion at the current cursor location.
+
+The wrapping modal around upload/settings has a hook that calls the editor execCommand to insert the image tag on a button click.
+The hook runs before everything renders and produces a button callback that will save a passed image to the (_sic_ tinyMCE) editor context
+
+* [on image upload or gallery selection] insert image tag at cursor location with source, dimensions, and alt text
+* [on image update] Update and replace a given image tag selection with a new one, updating source, dimensions, and/or alt-text
+    * Update and replace are utilizing exposed tinyMCE editor api accessed from the ref associated with the created component.
+* Modal must have a "Save" option that inserts appropriately formatted tags into the tinyMCE editor context. 
+    * Does not always update on relinquishing control, and communicates nothing on cancel
+
diff --git a/src/editors/decisions/0003-V2-Content-Editors.rst b/src/editors/decisions/0003-V2-Content-Editors.rst
new file mode 100644
index 0000000000..40318ba01f
--- /dev/null
+++ b/src/editors/decisions/0003-V2-Content-Editors.rst
@@ -0,0 +1,68 @@
+V2 Content Editors
+
+Synopsis
+--------
+
+We have created a framework for creating improved editor experiences for existing xblocks. We call these new editors V2 Content Editors.
+V2 Content Editors replace existing xblock editing experiences using redirection.
+The V2 Editor framework allows for the easy creation and configuration of new editors through automated boilerplate generation, simple networking and state abstractions, and premade components for basic editing views.
+
+Decisions
+------
+
+I. All V2 content editors shall live in this repository. This choice was made as the existing xblock framework is not amenable to running modern React applications for studio views, and cannot be upgraded to do so without herculanean effort.
+
+II. These editors will be served to the user as if an overlay on the existing editing experience for a particular xblock. This shall occur by this library's editor comoponent being served from a learning context MFE (Library or Course Authoring).
+
+III. The Editor component is loaded into a learning context authoring tool (eg. Course or Library Authoring) from this JS library. This component then serves the correct editor type based on the xblock id it is provided.
+
+IV. Editors for a specific xblock are then provided with the relevant data and metadata of that xblock instance, and their code is run to provide the experience.
+
+V. The following process was implemented to inject this flow into Studio.
+
+     For entering an editor page: Users click on the "edit xblock" button, are redirected to the course authoring MFE, where they are presented with the relevant editor.
+
+    .. image:: https://user-images.githubusercontent.com/49422820/166940630-51dfc25e-c760-4118-b4dd-ae1fa7fa73b9.png
+
+     For saving content: Once inside the editor, clicking save saves the content to the xblock api and returns the user to the course authoring context.
+
+    .. image:: https://user-images.githubusercontent.com/49422820/166940624-068e8446-0c86-4c24-a2dd-3eb474984f08.png
+
+    For exiting without saving: The user is simply transported back to the course authoring context.
+
+    .. image:: https://user-images.githubusercontent.com/49422820/166940617-80455ade-0a5e-4e61-94b0-b9e2d7a0531e.png
+
+VI. The library provides prebuilt components and features to accomplish common editor tasks.
+    - The EditorContainer component makes for easy saving, canceling changes, and xblock title editing.
+    - An app-level abstraction for network requests and handling thier states. This is the /Requests layer in the redux store. More information will be contained in ADR 0004 Network Request Layer
+VII. There are several patterns and principles along which the V2 editors are built. Additional editors are not required to follow these, but it is strongly encouraged. Theses are:
+    - Following the Testing and Implementation ADR.
+    - Generalize components for reuse when possible.
+    - Use Redux for global state management.
+
+VIII. How to create, configure, and enable a new editor experience will exist in other documentation, but should rely on automated configuration.
+
+Status
+------
+
+Adopted
+
+Context
+-------
+
+We need self-contained xblock editing and configuration experiences. Changing requirements require that that experience be modernized to use Paragon, work across authoring for different learning contexts (course authoring and library authoring), and be flexible, extensible and repeatable.
+
+Carving experiences out of Studio is an architectural imperative. Editing, as xblocks are discrete pieces of content, can exist in a context independent of the learning context, so having a learning-context agnostic environment for editing makes sense.
+
+Consequences
+------------
+
+This design has several consequences. These consequences are the result of the favoring of incremental changes, which can be iterated upon as other improvements in the openedx ecosystem occur.
+
+The majority of the impactful consequences have to do with the architectural choice to NOT simply upgrade the capabilities of xblock rendering, and instead serve the new experiences from a separate library. The fallout of these design choices leads to architectural complexity, but also the ability to deliver value in new ways.
+
+For example, locating the V2 editor in frontend-lib-content-components outside of the xblock code leaves no clear solution for easy open-source extension of V2 editors. This choice, however, also allows us to easily serve library and course contexts and leads to the easier creation of common content react components.
+
+In addition, this also allows developers to add value to editors, without having to rewrite the course-authoring experience to leverage React. Indeed, even when course authoring moves into an MFE, it will be trivial to place the editor inside the editor.
+
+This choice, however, is not intended to be final. Instead, this library can become merely a set of tools and common components, and once xblock editor views are Reactified, we can very easily restore the abstraction that all xblock code lives with the xblock. It is in this spirit of providing incremental value that we provided this choice.
diff --git a/src/editors/decisions/0004-Network-Request-Layer.rst b/src/editors/decisions/0004-Network-Request-Layer.rst
new file mode 100644
index 0000000000..2c384827b6
--- /dev/null
+++ b/src/editors/decisions/0004-Network-Request-Layer.rst
@@ -0,0 +1,51 @@
+Network and Requests Layer
+
+Synopsis
+--------
+
+For V2 Content Editors, we have defined a general abstraction for basic editor actions and content retrieval. This abstraction is twofold: a defined set of general “app” actions for basic editor actions, and a Requests Layer to track the status of ALL network requests.
+
+This will be a powerful tool to speed up the creation of new editors.
+
+
+
+Decision
+------
+
+The common actions required for any V2 content editor are as follows:
+Retrieve an xblock
+Save an xblock to the xblock api in the CMS.
+Return to your learning context (Studio, Course Authoring, Library Authoring)
+Obtain content (video, files, images) from the contentstore associated with a learning context.
+
+We have implemented actions to perform those tasks in src/editors/data/redux/thunkActions/app.js. These actions are decoupled from the code of a specific editor, and are easily portable across editors.
+
+We have also defined an atomic method to track the lifecycle of a network action. This abstraction applies to these common actions, as well as any actions defined in the data layer of a particular V2 editor. 
+
+The lifecycle of the acquisition of data from network and the updating of the global state with that data is termed to be a "request." The "states" of the lifecycle associated with a request are [inactive, pending, completed, failed]. This lifecycle provides information to the Redux consumer as to the status of their data.
+
+Each unique request instance is given a key in `src/editors/data/constants/requests`. This key can be queried to ascertain the status of the request using a Redux selector by a consumer of the redux state. This allows for easy conditional rendering. By following this pattern, additional  async actions will be easy to write. 
+
+The individual api methods are all defined in `data/services/cms/api`. The goal of the `requests` thunkActions is to first route the appropriate store data to the api request based on how they are being called.
+
+The actual chain the an example request to save an xblock code is:
+
+`thunkActions/app:saveBlock` -> `thunkActions/requests:saveBlock` `services/cms/api:saveBlock`
+
+* The "app" thunk action updates the local block content, and then dispatches the request thunkAction
+* The "request" thunkAction then loads relevant redux data for the save event and calls the api.saveBlock method, wrapped such that the UI can track the request state
+* The "api" method provides the specifics for the actual network request, including prop format and url."
+
+Status
+------
+Adopted
+
+Context
+-------
+
+In building React Redux applications, asynchronous actions require a set of "Thunk" actions dispatched at relevant points. A common standard around the lifecycle helps prevent the boilerplate for these actions to spiral. In addition, it allows for the faster development of new V2 editors, as developers have easily usable Redux actions to dispatch, as well as Redux selectors to track the status of their requests. 
+
+Consequences
+------------
+
+Network-based CRUD actions have a common language of lifecycle, as well as a common pattern to implement, allowing developers to use ready-made requests without issue for common actions, like xblock saving, content store retrieval, and even outside api access. This improves ease of use, as well as readability and uniformity.
diff --git a/src/editors/decisions/0005-internal-editor-testability-decisions.md b/src/editors/decisions/0005-internal-editor-testability-decisions.md
new file mode 100644
index 0000000000..dc6e9e76bd
--- /dev/null
+++ b/src/editors/decisions/0005-internal-editor-testability-decisions.md
@@ -0,0 +1,136 @@
+# Internal editor testability decision
+
+# Increased complexity for the sake of testability
+The internally-managed editors in this repo (as of now planned to include text, video, and problem types) follow a number of patterns that increase the complexity of parts of the code slightly, in favor of providing increased testability around their behavior.
+
+## Note - Strict Dictionaries
+Javacript is generally fairly lackadaisical with regards to dictionary access of missing/invalid keys.  This is fine and expected in many cases, but also prevents us from using dictionary access on something like a key store to ensure we are calling something that actually exists.
+
+For this purpose, there are a pair of utilities in this repo called `StrictDict` and `keyStore`.
+
+`StrictDict` takes an object and returns a version that will complain (throw an error) if called with an invalid key.
+
+`keyStore` takes an object and returns a StrictDict of just the keys of that object.  (this is useful particularly for mocking and spying on specific methods and fields)
+
+## Note - Self imports
+Javascript webpack imports can be problematic around the specific issue of attempting to mock a single method being used in another method in the same file.  
+
+Problem: File A includes methodA and methodB (which calls methodA).  We want to be able to test methodA and then test methodB *without* having to re-test methodA as part of that test.  We want to be able to mock methodA *only* while we are testing methodB.
+
+Solution: Self-imports.  By importing the module into itself (which webpack handles nicely, don't worry), we provide tests the ability to spy on and mock individual methods from that module separately on a per-test basis.
+
+Ex:
+```javascript
+// myFile.js
+import * as module from './myFile';
+
+export const methodA = (val) => // do something complex with val and return a number
+export const methodB = (val) => module.methodA(val) * 2;
+
+// myFile.test.js
+import * as module from './myFile';
+import { keyStore } from './utils';
+
+cosnt moduleKeys = keyStore(module);
+
+describe('myFile', () => {
+  describe('methodA', () => ...);
+  describe('methodB', () => {
+    const mockMethodA = (val) => val + 3
+    const testValue = 23;
+    beforeEach(() => {
+      jest.spyOn(module, moduleKeys).mockImplementationValueOnce(mockMethodA);
+    });
+    it('returns double the output of methodA with the given value', () => {
+      expect(module.methodB(testValue)).toEqual(mockMethodA(testValue) + 3);
+    });
+  });
+});
+```
+
+## Hooks and Snapshots - Separation from components for increased viability of snapshots
+As part of the testing of these internal editors, we are relying on snapshot testing to ensure stability of the display of the components themselves.  This can be a fragile solution in certain situations where components are too large or complex to adequately snapshot and verify.
+
+For this purpose, we have opted for a general pattern of separating all of the behavior of components withing these editors into separate `hooks` files.
+
+These hook files contain methods that utilize both `react` and `react-redux` hooks, along with arguments passed directly into the component, in order to generate the resulting desired behaviors.
+
+From there, components are tested by mocking out the behavior of these hooks to return verifyable data in the snapshots.
+
+As part of this separation, there are a number of additional patterns that are followed 
+
+### Snapshot considerations
+#### Callbacks
+Any callback that is included in render in a component should be separated such that is is either passed in as a prop or derived from a hook, and should be mocked with a `mockName` using jest, to ensure that they are uniquely identifyable in the snapshots.
+
+Ex: 
+```javascript
+const props = {
+  onClick: jest.fn().mockName('props.onClick');
+}
+expect(shallow(<MyElement {...props} />)).toMatchSnapshot();
+```
+
+#### Imported components
+Imported compoents are mocked to return simple string components based on their existing name.  This results in shallow renders that display the components by name, with passed props, but do not attempt to render *any* logic from those components.
+
+This is a bit more complex for components with sub-components, but we have provided a test utility in `src/testUtils` called `mockNestedComponent` that will allow you to easily mock these for your snapshots as well.
+
+Ex:
+```javascript
+jest.mock('componentModule', () => {
+  const { mockNestedComponent } = jest.requireActual('./testUtils');
+  return {
+    SimpleComponents: () => 'SimpleComponent',
+    NestedComponent: mockNestedComponent('NestedComponent', {
+      NestedChild1: 'NestedComponent.NestedChild1',
+      NestedChild2: 'NestedComponent.NestedChild2',
+    }),
+});
+```
+#### Top-level mocked imports
+We have mocked out all paragon components and icons being used in the repo, as well as a number of other common methods, hooks, and components in our module's `setupTests` file, which will ensure that those components show up reasonably in snapshots.
+
+### Hook Considerations
+#### useState and mockUseState
+React's useState hook is a very powerful alternative to class components, but is also somewhat problematic to test, as it returns different values based on where it is called in a hook, as well as based on previous runs of that hook.
+
+To resolve this, we are using a custom test utility to mock a hook modules state values for easy testing.
+
+This requires a particular structure to hook modules that use the useState, for the sake of enabling the mock process (which is documented with the utility).
+
+Ex:
+```javascript
+import * as module from './hooks';
+const state = {
+  myStateValue: (val) => useState(val),
+};
+const myHook = () => {
+  const [myStateValue, setMyStateValue] = module.state.myStateValue('initialValue');
+};
+```
+Examples on how to use this for testing are included with the mock class in `src/testUtils`
+
+#### useCallback, useEffect
+These hooks provide behavior that calls a method based on given prerequisite behaviors.
+For this reason, we use general-purpose mocks for these hooks that return an object containing the passed callback and prerequisites for easy test access.
+
+#### Additional Considrations
+*useIntl not available*
+
+We are using react-intl under the hood for our i18n support, but do not have access to some of the more recent features in that library due to the pinned version in frontend-platform.  Specifically, this includes a `useIntl` hook available in later versions that is still unavailable to us, requiring us to use the older `injectIntl` pattern.
+
+*useDispatch*
+
+React-redux's `useDispatch` hook does not play nicely with being called in a method called by a component, and really wants to be called *in* the component.  For this reason, the dispatch method is generated in components and passed through to hook components.
+
+## Notes for integration testing
+Because of the top-level mocks in setupTest, any integration tests will need to be sure to unmock most of these.
+
+Ex:
+```javascript
+jest.unmock('@edx/frontend-platform/i18n');
+jest.unmock('@openedx/paragon');
+jest.unmock('@openedx/paragon/icons');
+jest.unmock('react-redux');
+```
diff --git a/src/editors/decisions/0006-test-names.rst b/src/editors/decisions/0006-test-names.rst
new file mode 100644
index 0000000000..e079bcab96
--- /dev/null
+++ b/src/editors/decisions/0006-test-names.rst
@@ -0,0 +1,57 @@
+Test Names
+
+Synopsis
+--------
+
+Tests with descriptive names are a great way to document what a function does and what can go wrong.
+On the other hand, unclear test names can pose a risk, because if a test is faulty, you cannot see from the test name
+what the test intends, so it is difficult to identify faulty tests.
+
+We are setting up some conventions for naming of tests.
+
+Decisions
+---------
+
+1. The name of your test should consist of three parts:
+
+   - The name of the unit and/or method being tested.
+   - The scenario / context under which it's being tested.
+   - The expected behavior when the scenario is invoked.
+
+2. Use nested `describe` blocks to describe, unit, method, and scenario under test.
+3. Use a `test` statement for the expected behavior.
+4. A good test statement tests a single behavior in a single scenario for a single method.
+5. Avoid the word "test" in your test name.
+6. A test name describes an expectation. Use either an expectational statement using the "should" keyword or a factual statement. Do not use patterns like imperatives.
+
+   - Good: "function add() should calculate the sum of two numbers". 
+   - Good: "function add() calculcates the sum of two numbers".
+   - Bad: "test function add() for two numbers". (Imperative voice)
+
+7. Aim to write test names as full meaningful sentences. A test name consists of a few pieces: some describe statements and a test statements.
+When running tests, they will be concatenated to the test name. An example: ::
+
+    // name of the unit under test
+    describe('calculator', () => {
+      ...
+      // name of the method under test
+      describe('add() function', () => {
+        ...
+        // The scenario / context under which it's being tested
+        describe('with invalid settings', () => {
+          ...
+          // The expected behavior when the scenario is invoked
+          it('should throw a descriptive error', () => {
+            ...
+          }
+        }
+      }
+    }
+
+
+This results in the full meaningful sentence: "calculator add() function with invalid settings should throw a descriptive error".
+
+Further reading:
+----------------
+
+https://learn.microsoft.com/en-us/dotnet/core/testing/unit-testing-best-practices
\ No newline at end of file
diff --git a/src/editors/decisions/0007-feature-based-application-organization.rst b/src/editors/decisions/0007-feature-based-application-organization.rst
new file mode 100644
index 0000000000..559becda8b
--- /dev/null
+++ b/src/editors/decisions/0007-feature-based-application-organization.rst
@@ -0,0 +1,212 @@
+7. Feature-based Application Organization
+-----------------------------------------
+
+Status
+------
+
+Accepted
+
+Context
+-------
+
+The common, naive approach to organizing React/Redux applications says that code should be grouped into folders by type, putting like-types of code together. This means having directories like:
+
+- components
+- actions
+- reducers
+- constants
+- selectors
+- sagas
+- services
+
+This is often referred to as a "Ruby on Rails" approach, which organizes applications similarly.
+
+As applications grow, it's acknowledged by the community that this organization starts to fall down and become difficult to maintain. It does nothing to help engineers keep their code modular and decoupled, as it groups code by how it looks and not how it's used. Code that functions as part of a unit is spread out over 7+ directories.
+
+This ADR documents an approach and rules of thumb for organizing code modularly by feature, informed by articles and prior art.
+
+Note on terminology: "feature" and "module" are used interchangeably in this ADR. In general, the feature refers to the semantically significant thing, whereas the module refers to the directory of code pertaining to that feature.
+
+Decision
+--------
+
+**Following the spirit of these principles is more important than following them to the letter.**
+
+These rules are guidelines. It won't always be reasonable or necessary to follow them to the letter. They provide a set of tools for dealing with complexity. It follows, then, that if you don't have complexity, then you may not need the tools.
+
+Primary guiding principles
+==========================
+
+**1. Code is organized into feature directories.**
+
+A feature is a logical or semantically significant grouping of code; what comprises a feature is subjective. It also may not be obvious at first - if code tends to be related or change together, then it's probably part of the same feature.
+
+It's unlikely to be worth agonizing over your feature breakdown; time will tell what's correct moreso than overthinking it. That said, a sufficiently complex set of features will need a similarly robust taxonomy and organizational hierarchy. (This document endeavors to help inform that hierarchy.)  A nice rule of thumb is that a feature should conceptually be able to be extracted into its own npm package with minimal effort.
+
+**2. Create strict module boundaries**
+
+A module should have a public interface exposed via an index.js file in the module directory. Consumers of a feature should limit themselves to importing only from the public exports.
+
+::
+
+  import { MyComponent, reducer as myComponentReducer } from './submodule'; // Good
+  import MyComponent from './submodule/MyComponent'; // Bad
+  import reducer from './submodule/data/reducers'; // Bad
+
+Modules are configured by their parent. Generally a module will expose a few things which need to be configured make use of them in the consuming code. The reason for doing this is so that the module doesn't make assumptions about it's context (effectively dependency injection).
+
+Examples:
+
+* For React components, this involves including them in JSX and giving them props.
+* For services, this is calling their "configure" method and providing them apiClient/configuration, etc.
+* For reducers, this is mounting the reducer at an agreed-upon place in the redux store's state tree.
+
+**3. Avoid circular dependencies**
+
+Circular dependencies are unresolvable in webpack, and will result in something being imported as 'undefined'. They're also incredibly difficult and frustrating to track down. Properly factoring your features and supporting modules should help avoid these sorts of issues. In general, a feature should never need to import from its parent or grandparents, and a more "general purpose" module should never be importing from a more specific one. If you find yourself importing from a domain-specific feature in your general utility module, then something is probably ill-factored.
+
+File and directory naming
+=========================
+
+This section details a specific taxonomy and hierarchy to help make code modular, approachable and maintainable.
+
+**A. Separate data management from components.**
+
+In order to isolate our view layer (React) from the management of our data, global state, APIs, and side effects, we want to adopt the "ducks" organization (see references). This involves isolating data management into a
+sub directory of a feature. We'll use the directory name "data" rather than the traditional "ducks".
+
+**C. React components will be named semantically.**
+
+The convention for React components is for the file to be named for what the component does, so we will preserve this. A given feature may break up its view layer into multiple sub-components without a sub-feature being present.
+
+**B. Files in a module's data directory are named by function.**
+
+In the data sub-directory, the file names describe what each piece of code does. Unlike React components, all of the data handlers (actions, reducers, sagas, selectors, services, etc.) are generally short functions, and so we put them all in the same file together with others of their kind.
+
+::
+
+  /profile
+    /index.js // public interface
+    /ProfilePage.jsx // view
+    /ProfilePhotoUploader.jsx // supporting view
+    /data // Note: most files here are named with a plural, as they contain many of the things in question.
+      /actions.js
+      /constants.js
+      /reducers.js
+      /sagas.js
+      /selectors.js
+      /service.js // Note: singular - there's one 'service' here that provides many methods.
+
+If you find yourself desiring to have multiple files of a particular type in the data directory, this is a strong sign that you actually need a sub-feature instead.
+
+**C. Sub-features follow the same naming scheme.**
+
+Sub-features should follow the same rules as any other module.
+
+A module with a sub-module:
+
+::
+
+  /profile
+    /index.js // public interface
+    /ProfilePage.jsx
+    /Avatar.jsx // additional components for a feature reside here at the top level, not in a "components" subdirectory.
+    /data
+      /actions.js
+      /reducers.js
+      /sagas.js
+      /service.js
+    /profile-photo
+      /index.js // public interface
+      /ProfilePhoto.jsx
+      /data
+        /actions.js
+        /reducers.js
+        /selectors.js
+    /education // Sparse sub-module
+      /index.js // public interface
+      /Education.jsx
+    /site-language // No view layer sub-module
+      /index.js // public interface
+      /data
+        /actions.js
+        /reducers.js
+
+Note that a given feature need not contain files of all types, nor is having files of all types a prerequisite for having a feature. A feature may not contain a view (Component) layer, or in contrast to that, may not need a data directory at all!
+
+Importing rules of thumb
+========================
+
+It can be difficult to figure out where it's okay to import from. Following these rules of thumb will help maintain a healthy code organization and should prevent the possibility of circular dependencies.
+
+**I. A feature may not import from its parentage.**
+
+As described above in "Avoid circular dependencies", features should not import from their parent, grandparent, etc. A feature should be agnostic to the context in which it is used. If a module is importing from its parent or grandparent, that implies something is ill-factored.
+
+**II. A feature may import from its children, but not its grandchildren.**
+
+The feature may only import from the exports of its child, which may include exports of the grandchildren. Importing directly from grandchildren (or great grandchildren, etc.) would violate the strict module boundary of the child.
+
+**II. Features may import from their siblings.**
+
+It's acceptable to import from a module's siblings, or the siblings of their parents, grandparents, etc. This is necessary to support code re-use. As an example, assume we have a sub-module with common code to support our web forms.
+
+::
+
+  /feature1
+    /sub-form-1
+    /sub-form-2
+    /forms-common-code
+
+The sub-form modules can import from forms-common-code. The latter has its own strict module boundary and could conceptually be extracted into its own repository/completely independent module as far as they're concerned. They're unaware, conceptually, that it's a child of feature1, and they don't care.
+
+**III. Features may import from the siblings of their parentage.**
+
+This is less intuitive, but is not really any different than the above.
+
+If another feature (feature2) also needs forms-common-code, it should be brought up a level so it's available to feature2, as feature2 cannot "reach into" feature1:
+
+::
+
+  /feature1
+    /sub-form-1
+    /sub-form-2
+  /forms-common-code
+  /feature2 // can now use forms-common-code
+
+In a complex app, you could imagine that forms-common-code needs to be brought up several levels, in which case our imports might look like:
+
+::
+
+  import { formStuff } from '../../../forms-common-code';
+
+This is okay. Conceptually it's no different than importing from a third party npm package, we just happen to know the code we want is up a few directories nearby, rather than using the syntactic sugar of a pathless import from node_modules.
+
+At some point, if forms-common-code is general purpose enough, we may want to extract it from this repository/set of features all together.
+
+Consequences
+------------
+
+This organization has been implemented in several of our micro-frontends so far (frontend-app-account and frontend-app-payment most significantly) and we feel it has improved the organization and approachability of the apps. When converting frontend-app-account to use this organization, it took 2-3 days to refactor the code.
+
+It's worth noting that to get this right, it may actually involve changing the way the modules interact with each other. It isn't as simple as just moving files around and copy/pasting code. For instance, in frontend-app-account, it became obvious very quickly that to create strict module boundaries, we had to change the way that our service layers (server requests) were configured to keep them from importing their own configuration from their parent/grandparent. Similarly, our redux store tree of reducers became more complex and deeply nested.
+
+References
+----------
+
+Articles on react/redux application organization:
+
+* Primary reference:
+
+  - https://jaysoo.ca/2016/02/28/organizing-redux-application/
+
+* Ducks references:
+
+  - https://github.com/erikras/ducks-modular-redux
+  - https://medium.freecodecamp.org/scaling-your-redux-app-with-ducks-6115955638be
+
+* Other reading:
+
+  - https://hackernoon.com/fractal-a-react-app-structure-for-infinite-scale-4dab943092af
+  - https://marmelab.com/blog/2015/12/17/react-directory-structure.html
+  - https://redux.js.org/faq/code-structure
diff --git a/src/editors/example.jsx b/src/editors/example.jsx
new file mode 100644
index 0000000000..98d238f688
--- /dev/null
+++ b/src/editors/example.jsx
@@ -0,0 +1,100 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable import/extensions */
+/* eslint-disable import/no-unresolved */
+/**
+ * This is an example component for an xblock Editor
+ * It uses pre-existing components to handle the saving of a the result of a function into the xblock's data.
+ * To use run npm run-script addXblock <your>
+ */
+
+/* eslint-disable no-unused-vars */
+
+import React from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+
+import { Spinner } from '@openedx/paragon';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+
+import EditorContainer from '../EditorContainer';
+// This 'module' self-import hack enables mocking during tests.
+// See src/editors/decisions/0005-internal-editor-testability-decisions.md. The whole approach to how hooks are tested
+// should be re-thought and cleaned up to avoid this pattern.
+// eslint-disable-next-line import/no-self-import
+import * as module from '..';
+import { actions, selectors } from '../../data/redux';
+import { RequestKeys } from '../../data/constants/requests';
+
+export const hooks = {
+  getContent: () => ({
+    some: 'content',
+  }),
+};
+
+export const thumbEditor = ({
+  onClose,
+  // redux
+  blockValue,
+  lmsEndpointUrl,
+  blockFailed,
+  blockFinished,
+  initializeEditor,
+  // inject
+  intl,
+}) => (
+  <EditorContainer
+    getContent={module.hooks.getContent}
+    onClose={onClose}
+  >
+    <div className="editor-body h-75 overflow-auto">
+      {!blockFinished
+        ? (
+          <div className="text-center p-6">
+            <Spinner
+              animation="border"
+              className="m-3"
+              // Use a messages.js file for intl messages.
+              screenreadertext={intl.formatMessage('Loading Spinner')}
+            />
+          </div>
+        )
+        : (
+          <p>
+            Your Editor Goes here.
+            You can get at the xblock data with the blockValue field.
+            here is what is in your xblock:  {JSON.stringify(blockValue)}
+          </p>
+        )}
+    </div>
+  </EditorContainer>
+);
+thumbEditor.defaultProps = {
+  blockValue: null,
+  lmsEndpointUrl: null,
+};
+thumbEditor.propTypes = {
+  onClose: PropTypes.func.isRequired,
+  // redux
+  blockValue: PropTypes.shape({
+    data: PropTypes.shape({ data: PropTypes.string }),
+  }),
+  lmsEndpointUrl: PropTypes.string,
+  blockFailed: PropTypes.bool.isRequired,
+  blockFinished: PropTypes.bool.isRequired,
+  initializeEditor: PropTypes.func.isRequired,
+  // inject
+  intl: intlShape.isRequired,
+};
+
+export const mapStateToProps = (state) => ({
+  blockValue: selectors.app.blockValue(state),
+  lmsEndpointUrl: selectors.app.lmsEndpointUrl(state),
+  blockFailed: selectors.requests.isFailed(state, { requestKey: RequestKeys.fetchBlock }),
+  blockFinished: selectors.requests.isFinished(state, { requestKey: RequestKeys.fetchBlock }),
+});
+
+export const mapDispatchToProps = {
+  initializeEditor: actions.app.initializeEditor,
+};
+
+export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(thumbEditor));
diff --git a/src/editors/hooks.test.jsx b/src/editors/hooks.test.jsx
new file mode 100644
index 0000000000..103577a98a
--- /dev/null
+++ b/src/editors/hooks.test.jsx
@@ -0,0 +1,177 @@
+import { useEffect } from 'react';
+
+import { sendTrackEvent } from '@edx/frontend-platform/analytics';
+
+import analyticsEvt from './data/constants/analyticsEvt';
+import { RequestKeys } from './data/constants/requests';
+import { actions, thunkActions } from './data/redux';
+import { keyStore } from './utils';
+import * as hooks from './hooks';
+
+jest.mock('react', () => ({
+  ...jest.requireActual('react'),
+  useRef: jest.fn(val => ({ current: val })),
+  useEffect: jest.fn(),
+  useCallback: (cb, prereqs) => ({ cb, prereqs }),
+}));
+
+jest.mock('./data/redux', () => ({
+  actions: {
+    requests: {
+      clearRequest: (args) => ({ clearRequest: args }),
+    },
+  },
+  thunkActions: {
+    app: {
+      initialize: (args) => ({ initializeApp: args }),
+      saveBlock: (args) => ({ saveBlock: args }),
+    },
+  },
+}));
+
+jest.mock('@edx/frontend-platform/analytics', () => ({
+  sendTrackEvent: jest.fn(),
+}));
+
+const hookKeys = keyStore(hooks);
+
+describe('hooks', () => {
+  const locationTemp = window.location;
+  beforeAll(() => {
+    delete window.location;
+    window.location = {
+      assign: jest.fn(),
+    };
+  });
+  afterAll(() => {
+    window.location = locationTemp;
+  });
+
+  describe('initializeApp', () => {
+    test('calls provided function with provided data as args when useEffect is called', () => {
+      const dispatch = jest.fn();
+      const fakeData = {
+        blockId: 'blockId',
+        studioEndpointUrl: 'studioEndpointUrl',
+        learningContextId: 'learningContextId',
+      };
+      hooks.initializeApp({ dispatch, data: fakeData });
+      expect(dispatch).not.toHaveBeenCalledWith(fakeData);
+      const [cb, prereqs] = useEffect.mock.calls[0];
+      expect(prereqs).toStrictEqual([
+        fakeData.blockId,
+        fakeData.studioEndpointUrl,
+        fakeData.learningContextId,
+      ]);
+      cb();
+      expect(dispatch).toHaveBeenCalledWith(thunkActions.app.initialize(fakeData));
+    });
+  });
+
+  describe('navigateTo', () => {
+    const destination = 'HoME';
+    beforeEach(() => {
+      hooks.navigateTo(destination);
+    });
+    test('it calls window assign', () => {
+      expect(window.location.assign).toHaveBeenCalled();
+    });
+  });
+
+  describe('navigateCallback', () => {
+    let output;
+    const SAVED_ENV = process.env;
+    const destination = 'hOmE';
+    beforeEach(() => {
+      jest.resetModules();
+      process.env = { ...SAVED_ENV };
+      output = hooks.navigateCallback({ destination });
+    });
+    afterAll(() => {
+      process.env = SAVED_ENV;
+    });
+    test('it calls sendTrackEvent if given analyticsEvent and analytics', () => {
+      process.env.NODE_ENV = 'prod';
+      const analyticsEvent = 'iThapPeneDEVent';
+      const analytics = 'dATAonEveNT';
+      output = hooks.navigateCallback({
+        destination,
+        analyticsEvent,
+        analytics,
+      });
+      output();
+      expect(sendTrackEvent).toHaveBeenCalledTimes(1);
+      expect(sendTrackEvent).toHaveBeenCalledWith(analyticsEvent, analytics);
+    });
+    test('it calls navigateTo with output destination', () => {
+      const spy = jest.spyOn(hooks, hookKeys.navigateTo);
+      output();
+      expect(spy).toHaveBeenCalledWith(destination);
+    });
+    it('should call returnFunction and return null', () => {
+      const returnFunction = jest.fn(() => (response) => response);
+      output = hooks.navigateCallback({
+        destination,
+        returnFunction,
+      });
+      const returnedOutput = output();
+      expect(returnFunction).toHaveBeenCalled();
+      expect(returnedOutput).toEqual(undefined);
+    });
+  });
+
+  describe('nullMethod', () => {
+    it('returns an empty object', () => {
+      expect(hooks.nullMethod()).toEqual({});
+    });
+  });
+
+  describe('saveBlock', () => {
+    const navigateCallback = (args) => ({ navigateCallback: args });
+    const dispatch = jest.fn();
+    const destination = 'uRLwhENsAved';
+    const analytics = 'dATAonEveNT';
+
+    beforeEach(() => {
+      jest.clearAllMocks();
+      jest.spyOn(hooks, hookKeys.navigateCallback).mockImplementationOnce(navigateCallback);
+    });
+    it('returns null when content is null', () => {
+      const content = null;
+      const expected = hooks.saveBlock({
+        content,
+        destination,
+        analytics,
+        dispatch,
+      });
+      expect(expected).toEqual(undefined);
+    });
+    it('dispatches thunkActions.app.saveBlock with navigateCallback, and passed content', () => {
+      const content = 'myContent';
+      hooks.saveBlock({
+        content,
+        destination,
+        analytics,
+        dispatch,
+      });
+      expect(dispatch).toHaveBeenCalledWith(thunkActions.app.saveBlock(
+        content,
+        navigateCallback({
+          destination,
+          analyticsEvent: analyticsEvt.editorSaveClick,
+          analytics,
+        }),
+      ));
+    });
+  });
+
+  describe('clearSaveError', () => {
+    it('dispatches actions.requests.clearRequest with saveBlock requestKey', () => {
+      const dispatch = jest.fn();
+      hooks.clearSaveError({ dispatch })();
+      expect(dispatch).toHaveBeenCalledWith(actions.requests.clearRequest({
+        requestKey: RequestKeys.saveBlock,
+      }));
+    });
+  });
+});
diff --git a/src/editors/hooks.ts b/src/editors/hooks.ts
new file mode 100644
index 0000000000..c32d608008
--- /dev/null
+++ b/src/editors/hooks.ts
@@ -0,0 +1,71 @@
+import { useEffect } from 'react';
+
+import { sendTrackEvent } from '@edx/frontend-platform/analytics';
+import analyticsEvt from './data/constants/analyticsEvt';
+
+import { actions, thunkActions } from './data/redux';
+import { RequestKeys } from './data/constants/requests';
+
+// eslint-disable-next-line react-hooks/rules-of-hooks
+export const initializeApp = ({ dispatch, data }) => useEffect(
+  () => dispatch(thunkActions.app.initialize(data)),
+  [data?.blockId, data?.studioEndpointUrl, data?.learningContextId],
+);
+
+export const navigateTo = (destination: string | URL) => {
+  window.location.assign(destination);
+};
+
+export const navigateCallback = ({
+  returnFunction,
+  destination,
+  analyticsEvent,
+  analytics,
+}) => (response) => {
+  if (process.env.NODE_ENV !== 'development' && analyticsEvent && analytics) {
+    sendTrackEvent(analyticsEvent, analytics);
+  }
+  if (returnFunction) {
+    returnFunction()(response);
+    return;
+  }
+  navigateTo(destination);
+};
+
+export const nullMethod = () => ({});
+
+export const saveBlock = ({
+  analytics,
+  content,
+  destination,
+  dispatch,
+  returnFunction,
+  validateEntry,
+}) => {
+  if (!content) {
+    return;
+  }
+  let attemptSave = false;
+  if (validateEntry) {
+    if (validateEntry()) {
+      attemptSave = true;
+    }
+  } else {
+    attemptSave = true;
+  }
+  if (attemptSave) {
+    dispatch(thunkActions.app.saveBlock(
+      content,
+      navigateCallback({
+        destination,
+        analyticsEvent: analyticsEvt.editorSaveClick,
+        analytics,
+        returnFunction,
+      }),
+    ));
+  }
+};
+
+export const clearSaveError = ({
+  dispatch,
+}) => () => dispatch(actions.requests.clearRequest({ requestKey: RequestKeys.saveBlock }));
diff --git a/src/editors/messages.ts b/src/editors/messages.ts
new file mode 100644
index 0000000000..4b1134a270
--- /dev/null
+++ b/src/editors/messages.ts
@@ -0,0 +1,42 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+
+  couldNotFindEditor: {
+    id: 'authoring.editorpage.selecteditor.error',
+    defaultMessage: 'Error: Could Not find Editor',
+    description: 'Error Message Dispayed When An unsopported Editor is desired in V2',
+  },
+  dropVideoFileHere: {
+    defaultMessage: 'Drag and drop video here or click to upload',
+    id: 'VideoUploadEditor.dropVideoFileHere',
+    description: 'Display message for Drag and Drop zone',
+  },
+  browse: {
+    defaultMessage: 'Browse files',
+    id: 'VideoUploadEditor.browse',
+    description: 'Display message for browse files button',
+  },
+  info: {
+    id: 'VideoUploadEditor.uploadInfo',
+    defaultMessage: 'Upload MP4 or MOV files (5 GB max)',
+    description: 'Info message for supported formats',
+  },
+  libraryBlockEditWarningTitle: {
+    id: 'authoring.editorpage.libraryBlockEditWarningTitle',
+    defaultMessage: 'Editing Content from a Library',
+    description: 'Title text for Warning users editing library content in a course.',
+  },
+  libraryBlockEditWarningDescription: {
+    id: 'authoring.editorpage.libraryBlockEditWarningDescription',
+    defaultMessage: 'Edits made here will only be reflected in this course. These edits may be overridden later if updates are accepted.',
+    description: 'Description text for Warning users editing library content in a course.',
+  },
+  libraryBlockEditWarningLink: {
+    id: 'authoring.editorpage.libraryBlockEditWarningLink',
+    defaultMessage: 'View in Library',
+    description: 'Link text for opening library block in another tab.',
+  },
+});
+
+export default messages;
diff --git a/src/editors/setupEditorTest.js b/src/editors/setupEditorTest.js
new file mode 100644
index 0000000000..88129bd9a9
--- /dev/null
+++ b/src/editors/setupEditorTest.js
@@ -0,0 +1,133 @@
+// These additional mocks and setup are required for some tests in src/editors/
+// and are imported on an as-needed basis.
+
+// /////////////////////////////////////////////////////////////////////////////
+// TODO: tests using this 'setupEditorTest', shallow rendering, and snapshots
+// should be replaced with modern tests that use src/testUtils.ts and
+// @testing-library/react. See
+//   src/editors/containers/ProblemEditor/components/SelectTypeModal/index.test.tsx
+// for an example of an editor test in the new format.
+// /////////////////////////////////////////////////////////////////////////////
+
+import { formatMessage as mockFormatMessage } from './testUtils';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import 'jest-canvas-mock';
+
+jest.mock('@edx/frontend-platform/i18n', () => {
+  const i18n = jest.requireActual('@edx/frontend-platform/i18n');
+  const PropTypes = jest.requireActual('prop-types');
+  return {
+    ...i18n,
+    useIntl: () => ({ formatMessage: mockFormatMessage }),
+    intlShape: PropTypes.shape({
+      formatMessage: PropTypes.func,
+    }),
+    defineMessages: m => m,
+    getLocale: () => 'getLocale',
+    FormattedDate: () => 'FormattedDate',
+    FormattedMessage: () => 'FormattedMessage',
+    FormattedTime: () => 'FormattedTime',
+  };
+});
+
+jest.mock('@openedx/paragon', () => jest.requireActual('./testUtils').mockNestedComponents({
+  Alert: {
+    Heading: 'Alert.Heading',
+  },
+  AlertModal: 'AlertModal',
+  ActionRow: {
+    Spacer: 'ActionRow.Spacer',
+  },
+  Badge: 'Badge',
+  Button: 'Button',
+  ButtonGroup: 'ButtonGroup',
+  Collapsible: {
+    Advanced: 'Advanced',
+    Body: 'Body',
+    Trigger: 'Trigger',
+    Visible: 'Visible',
+  },
+  Card: {
+    Header: 'Card.Header',
+    Section: 'Card.Section',
+    Footer: 'Card.Footer',
+    Body: 'Card.Body',
+  },
+  CheckboxControl: 'CheckboxControl',
+  Col: 'Col',
+  Container: 'Container',
+  Dropdown: {
+    Item: 'Dropdown.Item',
+    Menu: 'Dropdown.Menu',
+    Toggle: 'Dropdown.Toggle',
+  },
+  ErrorContext: {
+    Provider: 'ErrorContext.Provider',
+  },
+  Hyperlink: 'Hyperlink',
+  Icon: 'Icon',
+  IconButton: 'IconButton',
+  IconButtonWithTooltip: 'IconButtonWithTooltip',
+  Image: 'Image',
+  MailtoLink: 'MailtoLink',
+  ModalDialog: {
+    Footer: 'ModalDialog.Footer',
+    Header: 'ModalDialog.Header',
+    Title: 'ModalDialog.Title',
+    Body: 'ModalDialog.Body',
+    CloseButton: 'ModalDialog.CloseButton',
+  },
+  Form: {
+    Checkbox: 'Form.Checkbox',
+    Control: {
+      Feedback: 'Form.Control.Feedback',
+    },
+    Group: 'Form.Group',
+    Label: 'Form.Label',
+    Text: 'Form.Text',
+    Row: 'Form.Row',
+    Radio: 'Radio',
+    RadioSet: 'RadioSet',
+  },
+  OverlayTrigger: 'OverlayTrigger',
+  Tooltip: 'Tooltip',
+  FullscreenModal: 'FullscreenModal',
+  Row: 'Row',
+  Scrollable: 'Scrollable',
+  SelectableBox: {
+    Set: 'SelectableBox.Set',
+  },
+
+  Spinner: 'Spinner',
+  Stack: 'Stack',
+  Toast: 'Toast',
+  Truncate: 'Truncate',
+  useWindowSize: { height: '500px' },
+}));
+
+jest.mock('@openedx/paragon/icons', () => ({
+  Close: jest.fn().mockName('icons.Close'),
+  Edit: jest.fn().mockName('icons.Edit'),
+  Locked: jest.fn().mockName('icons.Locked'),
+  Unlocked: jest.fn().mockName('icons.Unlocked'),
+}));
+
+// Mock react-redux hooks
+// unmock for integration tests
+jest.mock('react-redux', () => {
+  const dispatch = jest.fn((...args) => ({ dispatch: args })).mockName('react-redux.dispatch');
+  return {
+    connect: (mapStateToProps, mapDispatchToProps) => (component) => ({
+      mapStateToProps,
+      mapDispatchToProps,
+      component,
+    }),
+    useDispatch: jest.fn(() => dispatch),
+    useSelector: jest.fn((selector) => ({ useSelector: selector })),
+  };
+});
+
+// Mock the plugins repo so jest will stop complaining about ES6 syntax
+jest.mock('frontend-components-tinymce-advanced-plugins', () => ({
+  a11ycheckerCss: '',
+}));
diff --git a/src/editors/sharedComponents/BaseModal/__snapshots__/index.test.jsx.snap b/src/editors/sharedComponents/BaseModal/__snapshots__/index.test.jsx.snap
new file mode 100644
index 0000000000..aee7fdf3ed
--- /dev/null
+++ b/src/editors/sharedComponents/BaseModal/__snapshots__/index.test.jsx.snap
@@ -0,0 +1,51 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BaseModal ImageUploadModal template component snapshot 1`] = `
+<ModalDialog
+  hasCloseButton={true}
+  isFullscreenOnMobile={true}
+  isFullscreenScroll={true}
+  isOpen={true}
+  onClose={[MockFunction props.close]}
+  size="lg"
+  title="props.title node"
+  variant="default"
+>
+  <ModalDialog.Header
+    style={
+      {
+        "boxShadow": "2px 2px 5px rgba(0, 0, 0, 0.3)",
+        "zIndex": 1,
+      }
+    }
+  >
+    <ModalDialog.Title>
+      props.title node
+    </ModalDialog.Title>
+  </ModalDialog.Header>
+  <Scrollable
+    style={null}
+  >
+    <ModalDialog.Body>
+      props.children node
+    </ModalDialog.Body>
+  </Scrollable>
+  <ModalDialog.Footer>
+    <ActionRow>
+      props.footerAction node
+      <ActionRow.Spacer />
+      <ModalDialog.CloseButton
+        onClick={[MockFunction props.close]}
+        variant="tertiary"
+      >
+        <FormattedMessage
+          defaultMessage="Cancel"
+          description="Label for cancel button."
+          id="authoring.baseModal.cancelButtonLabel"
+        />
+      </ModalDialog.CloseButton>
+      props.confirmAction node
+    </ActionRow>
+  </ModalDialog.Footer>
+</ModalDialog>
+`;
diff --git a/src/editors/sharedComponents/BaseModal/index.jsx b/src/editors/sharedComponents/BaseModal/index.jsx
new file mode 100644
index 0000000000..74639dd54d
--- /dev/null
+++ b/src/editors/sharedComponents/BaseModal/index.jsx
@@ -0,0 +1,84 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import {
+  ActionRow,
+  ModalDialog,
+  Scrollable,
+} from '@openedx/paragon';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+
+import messages from './messages';
+
+const BaseModal = ({
+  isOpen,
+  close,
+  title,
+  children,
+  headerComponent,
+  confirmAction,
+  footerAction,
+  size,
+  isFullscreenScroll,
+  bodyStyle,
+  className,
+}) => (
+  <ModalDialog
+    isOpen={isOpen}
+    onClose={close}
+    size={size}
+    variant="default"
+    hasCloseButton
+    isFullscreenOnMobile
+    isFullscreenScroll={isFullscreenScroll}
+    title={title}
+    className={className}
+  >
+    <ModalDialog.Header style={{ zIndex: 1, boxShadow: '2px 2px 5px rgba(0, 0, 0, 0.3)' }}>
+      <ModalDialog.Title>
+        {title}
+      </ModalDialog.Title>
+      {headerComponent}
+    </ModalDialog.Header>
+    <Scrollable style={bodyStyle}>
+      <ModalDialog.Body>
+        {children}
+      </ModalDialog.Body>
+    </Scrollable>
+    <ModalDialog.Footer>
+      <ActionRow>
+        {footerAction}
+        <ActionRow.Spacer />
+        <ModalDialog.CloseButton variant="tertiary" onClick={close}>
+          <FormattedMessage {...messages.cancelButtonLabel} />
+        </ModalDialog.CloseButton>
+        {confirmAction}
+      </ActionRow>
+    </ModalDialog.Footer>
+  </ModalDialog>
+);
+
+BaseModal.defaultProps = {
+  footerAction: null,
+  headerComponent: null,
+  size: 'lg',
+  isFullscreenScroll: true,
+  bodyStyle: null,
+  className: undefined,
+};
+
+BaseModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  close: PropTypes.func.isRequired,
+  title: PropTypes.node.isRequired,
+  children: PropTypes.node.isRequired,
+  confirmAction: PropTypes.node.isRequired,
+  footerAction: PropTypes.node,
+  headerComponent: PropTypes.node,
+  size: PropTypes.string,
+  isFullscreenScroll: PropTypes.bool,
+  bodyStyle: PropTypes.shape({}),
+  className: PropTypes.string,
+};
+
+export default BaseModal;
diff --git a/src/editors/sharedComponents/BaseModal/index.test.jsx b/src/editors/sharedComponents/BaseModal/index.test.jsx
new file mode 100644
index 0000000000..cca9a4b57d
--- /dev/null
+++ b/src/editors/sharedComponents/BaseModal/index.test.jsx
@@ -0,0 +1,19 @@
+import 'CourseAuthoring/editors/setupEditorTest';
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+
+import BaseModal from '.';
+
+describe('BaseModal ImageUploadModal template component', () => {
+  test('snapshot', () => {
+    const props = {
+      isOpen: true,
+      close: jest.fn().mockName('props.close'),
+      title: 'props.title node',
+      children: 'props.children node',
+      confirmAction: 'props.confirmAction node',
+      footerAction: 'props.footerAction node',
+    };
+    expect(shallow(<BaseModal {...props} />).snapshot).toMatchSnapshot();
+  });
+});
diff --git a/src/editors/sharedComponents/BaseModal/messages.js b/src/editors/sharedComponents/BaseModal/messages.js
new file mode 100644
index 0000000000..8a5823b459
--- /dev/null
+++ b/src/editors/sharedComponents/BaseModal/messages.js
@@ -0,0 +1,12 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+
+  cancelButtonLabel: {
+    id: 'authoring.baseModal.cancelButtonLabel',
+    defaultMessage: 'Cancel',
+    description: 'Label for cancel button.',
+  },
+});
+
+export default messages;
diff --git a/src/editors/sharedComponents/Button/hooks.js b/src/editors/sharedComponents/Button/hooks.js
new file mode 100644
index 0000000000..e2a9d4d862
--- /dev/null
+++ b/src/editors/sharedComponents/Button/hooks.js
@@ -0,0 +1,22 @@
+export const isVariantAdd = (variant) => variant === 'add';
+
+export const getButtonProps = ({ variant, className, Add }) => {
+  const variantClasses = {
+    default: 'shared-button',
+    add: 'shared-button pl-0 text-primary-500 button-variant-add',
+  };
+  const variantMap = {
+    add: 'tertiary',
+  };
+  const classes = [variantClasses[variant]];
+  if (className) { classes.push(className); }
+
+  const iconProps = {};
+  if (isVariantAdd(variant)) { iconProps.iconBefore = Add; }
+
+  return {
+    className: classes.join(' '),
+    variant: variantMap[variant] || variant,
+    ...iconProps,
+  };
+};
diff --git a/src/editors/sharedComponents/Button/index.jsx b/src/editors/sharedComponents/Button/index.jsx
new file mode 100644
index 0000000000..29e28294bd
--- /dev/null
+++ b/src/editors/sharedComponents/Button/index.jsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { string, node, arrayOf } from 'prop-types';
+import { Button as ParagonButton } from '@openedx/paragon';
+import { Add } from '@openedx/paragon/icons';
+
+import { getButtonProps } from './hooks';
+import './index.scss';
+
+const Button = ({
+  variant, className, text, children, ...props
+}) => (
+  <ParagonButton
+    {...getButtonProps({ variant, className, Add })}
+    {...props}
+  >
+    {children || text}
+  </ParagonButton>
+);
+Button.propTypes = {
+  variant: string,
+  className: string,
+  text: string,
+  children: node || arrayOf(node),
+};
+Button.defaultProps = {
+  variant: 'default',
+  className: null,
+  text: null,
+  children: null,
+};
+
+export default Button;
diff --git a/src/editors/sharedComponents/Button/index.scss b/src/editors/sharedComponents/Button/index.scss
new file mode 100644
index 0000000000..3f5eedf197
--- /dev/null
+++ b/src/editors/sharedComponents/Button/index.scss
@@ -0,0 +1,9 @@
+.button-variant-add {
+  &:not(:disabled) {
+    &:not(.disabled) {
+      &:hover, &:active, &:focus {
+        background-color: transparent;
+      }
+    }
+  }
+}
diff --git a/src/editors/sharedComponents/CodeEditor/__snapshots__/index.test.jsx.snap b/src/editors/sharedComponents/CodeEditor/__snapshots__/index.test.jsx.snap
new file mode 100644
index 0000000000..877112366d
--- /dev/null
+++ b/src/editors/sharedComponents/CodeEditor/__snapshots__/index.test.jsx.snap
@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CodeEditor Component Snapshots Renders and calls Hooks  1`] = `
+<div>
+  <div
+    id="CodeMirror"
+  />
+  <Button
+    aria-label="Unescape HTML Literals"
+    onClick={[Function]}
+    variant="tertiary"
+  >
+    <FormattedMessage
+      defaultMessage="Unescape HTML Literals"
+      description="Label For escape special html charectars button"
+      id="authoring.texteditor.codeEditor.escapeHTMLButton"
+    />
+  </Button>
+</div>
+`;
diff --git a/src/editors/sharedComponents/CodeEditor/constants.js b/src/editors/sharedComponents/CodeEditor/constants.js
new file mode 100644
index 0000000000..bb390430c0
--- /dev/null
+++ b/src/editors/sharedComponents/CodeEditor/constants.js
@@ -0,0 +1,36 @@
+// HTML symbols to unescape in a Alphanumeric value : Literal mapping.
+const alphanumericMap = {
+  cent: '¢',
+  pound: '£',
+  sect: '§',
+  copy: '©',
+  laquo: '«',
+  raquo: '»',
+  reg: '®',
+  deg: '°',
+  plusmn: '±',
+  para: '¶',
+  middot: '·',
+  frac12: '½',
+  mdash: '—',
+  ndash: '–',
+  lsquo: '‘',
+  rsquo: '’',
+  sbquo: '‚',
+  rdquo: '”',
+  ldquo: '“',
+  dagger: '†',
+  Dagger: '‡',
+  bull: '•',
+  hellip: '…',
+  prime: '′',
+  Prime: '″',
+  euro: '€',
+  trade: '™',
+  asymp: '≈',
+  ne: '≠',
+  le: '≤',
+  ge: '≥',
+  quot: '"',
+};
+export default alphanumericMap;
diff --git a/src/editors/sharedComponents/CodeEditor/hooks.js b/src/editors/sharedComponents/CodeEditor/hooks.js
new file mode 100644
index 0000000000..cddf281dcb
--- /dev/null
+++ b/src/editors/sharedComponents/CodeEditor/hooks.js
@@ -0,0 +1,108 @@
+import React, { useEffect } from 'react';
+import xmlChecker from 'xmlchecker';
+
+import { basicSetup } from 'codemirror';
+import { EditorState } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
+import { html } from '@codemirror/lang-html';
+import { xml } from '@codemirror/lang-xml';
+import { linter } from '@codemirror/lint';
+import alphanumericMap from './constants';
+import './index.scss';
+
+const CODEMIRROR_LANGUAGES = { HTML: 'html', XML: 'xml' };
+
+export const state = {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  showBtnEscapeHTML: (val) => React.useState(val),
+};
+
+export const prepareShowBtnEscapeHTML = () => {
+  const [visibility, setVisibility] = state.showBtnEscapeHTML(true);
+  const hide = () => setVisibility(false);
+  return { showBtnEscapeHTML: visibility, hideBtn: hide };
+};
+
+export const cleanHTML = ({ initialText }) => {
+  const translateRegex = new RegExp(`&(${Object.keys(alphanumericMap).join('|')});`, 'g');
+  const translator = ($0, $1) => alphanumericMap[$1];
+  return initialText.replace(translateRegex, translator);
+};
+
+export const syntaxChecker = ({ textArr, lang }) => {
+  const diagnostics = [];
+  if (lang === 'xml' && textArr) {
+    const docString = textArr.join('\n');
+    const xmlDoc = `<?xml version="1.0" encoding="UTF-8"?> ${docString}`;
+
+    try {
+      xmlChecker.check(xmlDoc);
+    } catch (error) {
+      let errorStart = 0;
+      for (let i = 0; i < error.line - 1; i++) {
+        errorStart += textArr[i].length;
+      }
+      const errorLine = error.line;
+      const errorEnd = errorStart + textArr[errorLine - 1].length;
+      diagnostics.push({
+        from: errorStart,
+        to: errorEnd,
+        severity: 'error',
+        message: `${error.name}: ${error.message}`,
+      });
+    }
+  }
+  return diagnostics;
+};
+
+export const createCodeMirrorDomNode = ({
+  ref,
+  initialText,
+  upstreamRef,
+  lang,
+}) => {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useEffect(() => {
+    const languageExtension = lang === CODEMIRROR_LANGUAGES.HTML ? html() : xml();
+    const cleanText = cleanHTML({ initialText });
+    const newState = EditorState.create({
+      doc: cleanText,
+      extensions: [
+        basicSetup,
+        languageExtension,
+        EditorView.lineWrapping,
+        linter((view) => {
+          const textArr = view.state.doc.text;
+          return syntaxChecker({ textArr, lang });
+        }),
+      ],
+    });
+    const view = new EditorView({ state: newState, parent: ref.current });
+    // eslint-disable-next-line no-param-reassign
+    upstreamRef.current = view;
+    view.focus();
+
+    return () => {
+      // called on cleanup
+      view.destroy();
+    };
+  }, []);
+};
+
+export const escapeHTMLSpecialChars = ({ ref, hideBtn }) => {
+  const text = ref.current.state.doc.toString();
+  let pos = 0;
+  const changes = [];
+  Object.keys(alphanumericMap).forEach(
+    (escapedKeyword) => {
+      // eslint-disable-next-line no-cond-assign
+      for (let next; (next = text.indexOf(alphanumericMap[escapedKeyword], pos)) > -1;) {
+        changes.push({ from: next, to: next + 1, insert: `&${escapedKeyword};` });
+        pos = next + 1;
+      }
+    },
+  );
+
+  ref.current.dispatch({ changes });
+  hideBtn();
+};
diff --git a/src/editors/sharedComponents/CodeEditor/index.jsx b/src/editors/sharedComponents/CodeEditor/index.jsx
new file mode 100644
index 0000000000..29a4ed2daf
--- /dev/null
+++ b/src/editors/sharedComponents/CodeEditor/index.jsx
@@ -0,0 +1,57 @@
+import React, { useRef } from 'react';
+import PropTypes from 'prop-types';
+
+import {
+  Button,
+} from '@openedx/paragon';
+
+import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import messages from './messages';
+import './index.scss';
+
+import * as hooks from './hooks';
+
+const CodeEditor = ({
+  innerRef,
+  value,
+  lang,
+  // injected
+  intl,
+}) => {
+  const DOMref = useRef();
+  const btnRef = useRef();
+  hooks.createCodeMirrorDomNode({
+    ref: DOMref, initialText: value, upstreamRef: innerRef, lang,
+  });
+  const { showBtnEscapeHTML, hideBtn } = hooks.prepareShowBtnEscapeHTML();
+
+  return (
+    <div>
+      <div id="CodeMirror" ref={DOMref} />
+      {showBtnEscapeHTML && (
+        <Button
+          variant="tertiary"
+          aria-label={intl.formatMessage(messages.escapeHTMLButtonLabel)}
+          ref={btnRef}
+          onClick={() => hooks.escapeHTMLSpecialChars({ ref: innerRef, hideBtn })}
+        >
+          <FormattedMessage {...messages.escapeHTMLButtonLabel} />
+        </Button>
+      )}
+    </div>
+  );
+};
+
+CodeEditor.propTypes = {
+  innerRef: PropTypes.oneOfType([
+    PropTypes.func,
+    // eslint-disable-next-line react/forbid-prop-types
+    PropTypes.shape({ current: PropTypes.any }),
+  ]).isRequired,
+  value: PropTypes.string.isRequired,
+  intl: intlShape.isRequired,
+  lang: PropTypes.string.isRequired,
+};
+
+export const CodeEditorInternal = CodeEditor; // For testing only
+export default injectIntl(CodeEditor);
diff --git a/src/editors/sharedComponents/CodeEditor/index.scss b/src/editors/sharedComponents/CodeEditor/index.scss
new file mode 100644
index 0000000000..e24ef75397
--- /dev/null
+++ b/src/editors/sharedComponents/CodeEditor/index.scss
@@ -0,0 +1,2 @@
+.cm-editor { height: 100% }
+.cm-scroller { overflow: auto }
\ No newline at end of file
diff --git a/src/editors/sharedComponents/CodeEditor/index.test.jsx b/src/editors/sharedComponents/CodeEditor/index.test.jsx
new file mode 100644
index 0000000000..0760f8e0d1
--- /dev/null
+++ b/src/editors/sharedComponents/CodeEditor/index.test.jsx
@@ -0,0 +1,182 @@
+import 'CourseAuthoring/editors/setupEditorTest';
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+
+import { EditorState } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
+import { html } from '@codemirror/lang-html';
+import { formatMessage, MockUseState } from '../../testUtils';
+import alphanumericMap from './constants';
+import * as module from './index';
+import * as hooks from './hooks';
+
+const CodeEditor = module.CodeEditorInternal;
+
+jest.mock('@codemirror/view');
+
+jest.mock('react', () => ({
+  ...jest.requireActual('react'),
+  useRef: jest.fn(val => ({ current: val })),
+  useEffect: jest.fn(),
+  useCallback: (cb, prereqs) => ({ cb, prereqs }),
+}));
+
+jest.mock('@codemirror/state', () => ({
+  ...jest.requireActual('@codemirror/state'),
+  EditorState: {
+    create: jest.fn(),
+  },
+}));
+
+jest.mock('@codemirror/lang-html', () => ({
+  html: jest.fn(),
+}));
+
+jest.mock('@codemirror/lang-xml', () => ({
+  xml: jest.fn(),
+}));
+
+jest.mock('codemirror', () => ({
+  basicSetup: 'bAsiCSetUp',
+}));
+
+const state = new MockUseState(hooks);
+
+describe('CodeEditor', () => {
+  describe('Hooks', () => {
+    beforeEach(() => {
+      jest.clearAllMocks();
+    });
+    state.testGetter(state.keys.showBtnEscapeHTML);
+    describe('stateHooks', () => {
+      beforeEach(() => {
+        state.mock();
+      });
+      it('prepareShowBtnEscapeHTML', () => {
+        const hook = hooks.prepareShowBtnEscapeHTML();
+        expect(state.stateVals.showBtnEscapeHTML).toEqual(hook.showBtnEscapeHTML);
+        hook.hideBtn();
+        expect(state.setState.showBtnEscapeHTML).toHaveBeenCalledWith(false);
+      });
+      afterEach(() => { state.restore(); });
+    });
+
+    describe('cleanHTML', () => {
+      const dirtyText = `&${Object.keys(alphanumericMap).join('; , &')};`;
+      const cleanText = `${Object.values(alphanumericMap).join(' , ')}`;
+
+      it('escapes alphanumerics and sets them to be literals', () => {
+        expect(hooks.cleanHTML({ initialText: dirtyText })).toEqual(cleanText);
+      });
+    });
+
+    describe('escapeHTMLSpecialChars', () => {
+      const cleanText = `${Object.values(alphanumericMap).join(' , ')}`;
+
+      const mockDispatch = jest.fn((args) => ({ mockDispatch: args }));
+
+      const ref = {
+        current: {
+          dispatch: mockDispatch,
+          state: {
+            doc: {
+              toString: () => cleanText,
+            },
+          },
+        },
+      };
+      const mockHideBtn = jest.fn();
+      it('unescapes literals and sets them to be alphanumerics', () => {
+        hooks.escapeHTMLSpecialChars({ ref, hideBtn: mockHideBtn });
+        expect(mockDispatch).toHaveBeenCalled();
+        expect(mockHideBtn).toHaveBeenCalled();
+      });
+    });
+
+    describe('createCodeMirrorDomNode', () => {
+      const props = {
+        ref: {
+          current: 'sOmEvAlUe',
+        },
+        lang: 'html',
+        initialText: 'sOmEhTmL',
+        upstreamRef: {
+          current: 'sOmEotHERvAlUe',
+        },
+      };
+      beforeEach(() => {
+        hooks.createCodeMirrorDomNode(props);
+      });
+      it('calls useEffect and sets up codemirror objects', () => {
+        const [cb, prereqs] = React.useEffect.mock.calls[0];
+        expect(prereqs).toStrictEqual([]);
+        cb();
+        expect(EditorState.create).toHaveBeenCalled();
+        expect(EditorView).toHaveBeenCalled();
+        expect(html).toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe('xmlSyntaxChecker', () => {
+    describe('lang equals html', () => {
+      it('returns empty array', () => {
+        const textArr = ['<problem>', '<p>', 'this is some text', '</p>', '</problem>'];
+        const diagnostics = hooks.syntaxChecker({ textArr, lang: 'html' });
+        expect(diagnostics).toEqual([]);
+      });
+    });
+    describe('textArr is undefined', () => {
+      it('returns empty array', () => {
+        let textArr;
+        const diagnostics = hooks.syntaxChecker({ textArr, lang: 'html' });
+        expect(diagnostics).toEqual([]);
+      });
+    });
+    describe('lang equals xml', () => {
+      it('returns empty array', () => {
+        const textArr = ['<problem>', '<p>', 'this is some text', '</p>', '</problem>'];
+        const diagnostics = hooks.syntaxChecker({ textArr, lang: 'xml' });
+        expect(diagnostics).toEqual([]);
+      });
+      it('returns an array with error object', () => {
+        const textArr = ['<problem>', '<p>', '<p>', 'this is some text', '</p>', '</problem>'];
+        const expectedDiagnostics = hooks.syntaxChecker({ textArr, lang: 'xml' });
+        const diagnostics = [{
+          from: 9,
+          to: 12,
+          severity: 'error',
+          message: 'SyntaxError: Expected that start and end tag must be identical but "<" found.',
+        }];
+        expect(expectedDiagnostics).toEqual(diagnostics);
+      });
+    });
+  });
+
+  describe('Component', () => {
+    describe('Snapshots', () => {
+      const mockHideBtn = jest.fn().mockName('mockHidebtn');
+      let props;
+      beforeAll(() => {
+        props = {
+          intl: { formatMessage },
+          innerRef: {
+            current: 'sOmEvALUE',
+          },
+          lang: 'html',
+          value: 'mOcKhTmL',
+        };
+        jest.spyOn(hooks, 'createCodeMirrorDomNode').mockImplementation(() => ({}));
+      });
+      afterAll(() => {
+        jest.clearAllMocks();
+      });
+      test('Renders and calls Hooks ', () => {
+        jest.spyOn(hooks, 'prepareShowBtnEscapeHTML').mockImplementation(() => ({ showBtnEscapeHTML: true, hideBtn: mockHideBtn }));
+        // Note: ref won't show up as it is not acutaly a DOM attribute.
+        expect(shallow(<CodeEditor {...props} />).snapshot).toMatchSnapshot();
+        expect(hooks.createCodeMirrorDomNode).toHaveBeenCalled();
+      });
+    });
+  });
+});
diff --git a/src/editors/sharedComponents/CodeEditor/messages.js b/src/editors/sharedComponents/CodeEditor/messages.js
new file mode 100644
index 0000000000..84c5554653
--- /dev/null
+++ b/src/editors/sharedComponents/CodeEditor/messages.js
@@ -0,0 +1,12 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+
+  escapeHTMLButtonLabel: {
+    id: 'authoring.texteditor.codeEditor.escapeHTMLButton',
+    defaultMessage: 'Unescape HTML Literals',
+    description: 'Label For escape special html charectars button',
+  },
+});
+
+export default messages;
diff --git a/src/editors/sharedComponents/DraggableList/DraggableList.jsx b/src/editors/sharedComponents/DraggableList/DraggableList.jsx
new file mode 100644
index 0000000000..5279fa1ba8
--- /dev/null
+++ b/src/editors/sharedComponents/DraggableList/DraggableList.jsx
@@ -0,0 +1,73 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core';
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+
+const DraggableList = ({
+  itemList,
+  setState,
+  updateOrder,
+  children,
+}) => {
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    }),
+  );
+
+  const handleDragEnd = (event) => {
+    const { active, over } = event;
+    if (active.id !== over.id) {
+      let updatedArray;
+      setState(() => {
+        const [activeElement] = itemList.filter(item => item.id === active.id);
+        const [overElement] = itemList.filter(item => item.id === over.id);
+        const oldIndex = itemList.indexOf(activeElement);
+        const newIndex = itemList.indexOf(overElement);
+        updatedArray = arrayMove(itemList, oldIndex, newIndex);
+        return updatedArray;
+      });
+      updateOrder()(updatedArray);
+    }
+  };
+
+  return (
+    <DndContext
+      sensors={sensors}
+      collisionDetection={closestCenter}
+      onDragEnd={handleDragEnd}
+    >
+      <SortableContext
+        items={itemList}
+        strategy={verticalListSortingStrategy}
+      >
+        {children}
+      </SortableContext>
+    </DndContext>
+  );
+};
+
+DraggableList.propTypes = {
+  itemList: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string.isRequired,
+  })).isRequired,
+  setState: PropTypes.func.isRequired,
+  updateOrder: PropTypes.func.isRequired,
+  children: PropTypes.node.isRequired,
+};
+
+export default DraggableList;
diff --git a/src/editors/sharedComponents/DraggableList/SortableItem.jsx b/src/editors/sharedComponents/DraggableList/SortableItem.jsx
new file mode 100644
index 0000000000..938c2546f8
--- /dev/null
+++ b/src/editors/sharedComponents/DraggableList/SortableItem.jsx
@@ -0,0 +1,63 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { intlShape, injectIntl } from '@edx/frontend-platform/i18n';
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { Icon, IconButtonWithTooltip, Row } from '@openedx/paragon';
+import { DragIndicator } from '@openedx/paragon/icons';
+import messages from './messages';
+
+const SortableItem = ({
+  id,
+  componentStyle,
+  children,
+  // injected
+  intl,
+}) => {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+  } = useSortable({ id });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    ...componentStyle,
+  };
+
+  return (
+    <Row
+      ref={setNodeRef}
+      style={style}
+      className="mx-0"
+    >
+      {children}
+      <IconButtonWithTooltip
+        key="drag-to-reorder-icon"
+        tooltipPlacement="top"
+        tooltipContent={intl.formatMessage(messages.tooltipContent)}
+        src={DragIndicator}
+        iconAs={Icon}
+        variant="secondary"
+        alt={intl.formatMessage(messages.tooltipContent)}
+        {...attributes}
+        {...listeners}
+      />
+    </Row>
+  );
+};
+SortableItem.defaultProps = {
+  componentStyle: null,
+};
+SortableItem.propTypes = {
+  id: PropTypes.string.isRequired,
+  children: PropTypes.node.isRequired,
+  componentStyle: PropTypes.shape({}),
+  // injected
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(SortableItem);
diff --git a/src/editors/sharedComponents/DraggableList/index.jsx b/src/editors/sharedComponents/DraggableList/index.jsx
new file mode 100644
index 0000000000..3055c1fa1c
--- /dev/null
+++ b/src/editors/sharedComponents/DraggableList/index.jsx
@@ -0,0 +1,5 @@
+import DraggableList from './DraggableList';
+import SortableItem from './SortableItem';
+
+export { SortableItem };
+export default DraggableList;
diff --git a/src/editors/sharedComponents/DraggableList/messages.js b/src/editors/sharedComponents/DraggableList/messages.js
new file mode 100644
index 0000000000..3a7263280b
--- /dev/null
+++ b/src/editors/sharedComponents/DraggableList/messages.js
@@ -0,0 +1,11 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  tooltipContent: {
+    id: 'authoring.draggableList.tooltip.content',
+    defaultMessage: 'Drag to reorder',
+    description: 'Tooltip content for drag indicator icon',
+  },
+});
+
+export default messages;
diff --git a/src/editors/sharedComponents/ErrorAlerts/ErrorAlert.jsx b/src/editors/sharedComponents/ErrorAlerts/ErrorAlert.jsx
new file mode 100644
index 0000000000..3e3ef935aa
--- /dev/null
+++ b/src/editors/sharedComponents/ErrorAlerts/ErrorAlert.jsx
@@ -0,0 +1,79 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Alert } from '@openedx/paragon';
+import { Error } from '@openedx/paragon/icons';
+
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import messages from './messages';
+
+export const hooks = {
+  state: {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+    isDismissed: (val) => React.useState(val),
+  },
+  dismissalHooks: ({ dismissError, isError }) => {
+    const [isDismissed, setIsDismissed] = hooks.state.isDismissed(false);
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    React.useEffect(
+      () => {
+        setIsDismissed(isDismissed && !isError);
+      },
+      [isError],
+    );
+    return {
+      isDismissed,
+      dismissAlert: () => {
+        setIsDismissed(true);
+        if (dismissError) {
+          dismissError();
+        }
+      },
+    };
+  },
+};
+
+const ErrorAlert = ({
+  dismissError,
+  hideHeading,
+  isError,
+  children,
+}) => {
+  const { isDismissed, dismissAlert } = hooks.dismissalHooks({ dismissError, isError });
+  if (!isError || isDismissed) {
+    return null;
+  }
+  return (
+    <Alert
+      variant="danger"
+      icon={Error}
+      dismissible
+      onClose={dismissAlert}
+    >
+      {!hideHeading
+        && (
+          <Alert.Heading>
+            <FormattedMessage {...messages.errorTitle} />
+          </Alert.Heading>
+        )}
+      {children}
+    </Alert>
+  );
+};
+
+ErrorAlert.defaultProps = {
+  dismissError: null,
+  hideHeading: false,
+};
+
+ErrorAlert.propTypes = {
+  dismissError: PropTypes.func,
+  hideHeading: PropTypes.bool,
+  isError: PropTypes.bool.isRequired,
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node,
+  ]).isRequired,
+};
+
+export default ErrorAlert;
diff --git a/src/editors/sharedComponents/ErrorAlerts/ErrorAlert.test.jsx b/src/editors/sharedComponents/ErrorAlerts/ErrorAlert.test.jsx
new file mode 100644
index 0000000000..a8b1f0504b
--- /dev/null
+++ b/src/editors/sharedComponents/ErrorAlerts/ErrorAlert.test.jsx
@@ -0,0 +1,84 @@
+import 'CourseAuthoring/editors/setupEditorTest';
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+import ErrorAlert, { hooks } from './ErrorAlert';
+import { MockUseState } from '../../testUtils';
+
+jest.mock('react', () => ({
+  ...jest.requireActual('react'),
+  useRef: jest.fn(val => ({ current: val })),
+  useEffect: jest.fn(),
+  useCallback: (cb, prereqs) => ({ cb, prereqs }),
+}));
+
+const state = new MockUseState(hooks);
+let hook;
+const testValue = 'testVALUE';
+
+describe('ErrorAlert component', () => {
+  describe('Hooks', () => {
+    beforeEach(() => {
+      jest.clearAllMocks();
+    });
+    describe('state hooks', () => {
+      state.testGetter(state.keys.isDismissed);
+    });
+    describe('using state', () => {
+      beforeEach(() => { state.mock(); });
+      afterEach(() => { state.restore(); });
+      describe('dismissalHooks', () => {
+        const props = {
+          dismissError: jest.fn(),
+          isError: testValue,
+        };
+        beforeEach(() => {
+          hook = hooks.dismissalHooks(props);
+        });
+        it('returns isDismissed value, initialized to false', () => {
+          expect(state.stateVals.isDismissed).toEqual(hook.isDismissed);
+        });
+        test('dismissAlert sets isDismissed to true and calls dismissError', () => {
+          hook.dismissAlert();
+          expect(state.setState.isDismissed).toHaveBeenCalledWith(true);
+          expect(props.dismissError).toHaveBeenCalled();
+        });
+        test('On Render, calls setIsDismissed', () => {
+          expect(React.useEffect.mock.calls.length).toEqual(1);
+          const [cb, prereqs] = React.useEffect.mock.calls[0];
+          expect(prereqs[0]).toEqual(testValue);
+          cb();
+          expect(state.setState.isDismissed).toHaveBeenCalledWith(state.stateVals.isDismissed && !testValue);
+        });
+      });
+    });
+  });
+  describe('Component', () => {
+    describe('Snapshots', () => {
+      let props;
+      const msg = <p> An Error Message </p>;
+      beforeAll(() => {
+        props = {
+          dismissError: jest.fn(),
+        };
+        jest.spyOn(hooks, 'dismissalHooks').mockImplementation(() => ({
+          isDismissed: false,
+          dismissAlert: jest.fn().mockName('dismissAlert'),
+        }));
+      });
+      afterAll(() => {
+        jest.clearAllMocks();
+      });
+      test('snapshot: is Null when no error (ErrorAlert)', () => {
+        expect(shallow(<ErrorAlert {...props}> <p> An Error Message </p> </ErrorAlert>).snapshot).toMatchSnapshot();
+      });
+      test('snapshot: Loads children and component when error (ErrorAlert)', () => {
+        expect(
+          shallow(<ErrorAlert {...props} isError hideHeading={false}>{msg}</ErrorAlert>).snapshot,
+        ).toMatchSnapshot();
+      });
+      test('snapshot: Does not load heading when hideHeading is true', () => {
+        expect(shallow(<ErrorAlert {...props} isError hideHeading>{msg}</ErrorAlert>).snapshot).toMatchSnapshot();
+      });
+    });
+  });
+});
diff --git a/src/editors/sharedComponents/ErrorAlerts/FetchErrorAlert.jsx b/src/editors/sharedComponents/ErrorAlerts/FetchErrorAlert.jsx
new file mode 100644
index 0000000000..e8a8167174
--- /dev/null
+++ b/src/editors/sharedComponents/ErrorAlerts/FetchErrorAlert.jsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+
+import ErrorAlert from './ErrorAlert';
+
+const FetchErrorAlert = ({
+  message,
+  isFetchError,
+}) => (
+  <ErrorAlert
+    isError={isFetchError}
+  >
+    <FormattedMessage
+      {...message}
+    />
+  </ErrorAlert>
+);
+
+FetchErrorAlert.propTypes = {
+  message: PropTypes.shape({
+    id: PropTypes.string,
+    defaultMessage: PropTypes.string,
+    description: PropTypes.string,
+  }).isRequired,
+  isFetchError: PropTypes.bool.isRequired,
+
+};
+
+export default FetchErrorAlert;
diff --git a/src/editors/sharedComponents/ErrorAlerts/FetchErrorAlert.test.jsx b/src/editors/sharedComponents/ErrorAlerts/FetchErrorAlert.test.jsx
new file mode 100644
index 0000000000..2a849ba417
--- /dev/null
+++ b/src/editors/sharedComponents/ErrorAlerts/FetchErrorAlert.test.jsx
@@ -0,0 +1,20 @@
+import 'CourseAuthoring/editors/setupEditorTest';
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+import FetchErrorAlert from './FetchErrorAlert';
+
+jest.mock('../../data/redux', () => ({
+  selectors: {
+    requests: {
+      isFailed: jest.fn((state, params) => ({ isFailed: { state, params } })),
+    },
+  },
+}));
+
+describe('FetchErrorAlert', () => {
+  describe('Snapshots', () => {
+    test('snapshot:  is ErrorAlert with Message error (ErrorAlert)', () => {
+      expect(shallow(<FetchErrorAlert isFetchError />).snapshot).toMatchSnapshot();
+    });
+  });
+});
diff --git a/src/editors/sharedComponents/ErrorAlerts/UploadErrorAlert.jsx b/src/editors/sharedComponents/ErrorAlerts/UploadErrorAlert.jsx
new file mode 100644
index 0000000000..3348515635
--- /dev/null
+++ b/src/editors/sharedComponents/ErrorAlerts/UploadErrorAlert.jsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+
+import ErrorAlert from './ErrorAlert';
+
+const UploadErrorAlert = ({
+  message,
+  isUploadError,
+}) => (
+  <ErrorAlert
+    isError={isUploadError}
+  >
+    <FormattedMessage
+      {...message}
+    />
+  </ErrorAlert>
+);
+
+UploadErrorAlert.propTypes = {
+  message: PropTypes.shape({
+    id: PropTypes.string,
+    defaultMessage: PropTypes.string,
+    description: PropTypes.string,
+  }).isRequired,
+  isUploadError: PropTypes.bool.isRequired,
+};
+
+export default UploadErrorAlert;
diff --git a/src/editors/sharedComponents/ErrorAlerts/UploadErrorAlert.test.jsx b/src/editors/sharedComponents/ErrorAlerts/UploadErrorAlert.test.jsx
new file mode 100644
index 0000000000..09c8a7df57
--- /dev/null
+++ b/src/editors/sharedComponents/ErrorAlerts/UploadErrorAlert.test.jsx
@@ -0,0 +1,20 @@
+import 'CourseAuthoring/editors/setupEditorTest';
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+import UploadErrorAlert from './UploadErrorAlert';
+
+jest.mock('../../data/redux', () => ({
+  selectors: {
+    requests: {
+      isFailed: jest.fn((state, params) => ({ isFailed: { state, params } })),
+    },
+  },
+}));
+
+describe('UploadErrorAlert', () => {
+  describe('Snapshots', () => {
+    test('snapshot:  is ErrorAlert with Message error (ErrorAlert)', () => {
+      expect(shallow(<UploadErrorAlert isUploadError />).snapshot).toMatchSnapshot();
+    });
+  });
+});
diff --git a/src/editors/sharedComponents/ErrorAlerts/__snapshots__/ErrorAlert.test.jsx.snap b/src/editors/sharedComponents/ErrorAlerts/__snapshots__/ErrorAlert.test.jsx.snap
new file mode 100644
index 0000000000..2b2953062a
--- /dev/null
+++ b/src/editors/sharedComponents/ErrorAlerts/__snapshots__/ErrorAlert.test.jsx.snap
@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ErrorAlert component Component Snapshots snapshot: Does not load heading when hideHeading is true 1`] = `
+<Alert
+  dismissible={true}
+  onClose={[MockFunction dismissAlert]}
+  variant="danger"
+>
+  <p>
+     An Error Message 
+  </p>
+</Alert>
+`;
+
+exports[`ErrorAlert component Component Snapshots snapshot: Loads children and component when error (ErrorAlert) 1`] = `
+<Alert
+  dismissible={true}
+  onClose={[MockFunction dismissAlert]}
+  variant="danger"
+>
+  <Alert.Heading>
+    <FormattedMessage
+      defaultMessage="Error"
+      description="Title of message presented to user when something goes wrong"
+      id="authoring.texteditor.selectimagemodal.error.errorTitle"
+    />
+  </Alert.Heading>
+  <p>
+     An Error Message 
+  </p>
+</Alert>
+`;
+
+exports[`ErrorAlert component Component Snapshots snapshot: is Null when no error (ErrorAlert) 1`] = `null`;
diff --git a/src/editors/sharedComponents/ErrorAlerts/__snapshots__/FetchErrorAlert.test.jsx.snap b/src/editors/sharedComponents/ErrorAlerts/__snapshots__/FetchErrorAlert.test.jsx.snap
new file mode 100644
index 0000000000..bc4615752b
--- /dev/null
+++ b/src/editors/sharedComponents/ErrorAlerts/__snapshots__/FetchErrorAlert.test.jsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FetchErrorAlert Snapshots snapshot:  is ErrorAlert with Message error (ErrorAlert) 1`] = `
+<ErrorAlert
+  dismissError={null}
+  hideHeading={false}
+  isError={true}
+>
+  <FormattedMessage />
+</ErrorAlert>
+`;
diff --git a/src/editors/sharedComponents/ErrorAlerts/__snapshots__/UploadErrorAlert.test.jsx.snap b/src/editors/sharedComponents/ErrorAlerts/__snapshots__/UploadErrorAlert.test.jsx.snap
new file mode 100644
index 0000000000..68f5d8b3d2
--- /dev/null
+++ b/src/editors/sharedComponents/ErrorAlerts/__snapshots__/UploadErrorAlert.test.jsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`UploadErrorAlert Snapshots snapshot:  is ErrorAlert with Message error (ErrorAlert) 1`] = `
+<ErrorAlert
+  dismissError={null}
+  hideHeading={false}
+  isError={true}
+>
+  <FormattedMessage />
+</ErrorAlert>
+`;
diff --git a/src/editors/sharedComponents/ErrorAlerts/messages.js b/src/editors/sharedComponents/ErrorAlerts/messages.js
new file mode 100644
index 0000000000..7857cc991d
--- /dev/null
+++ b/src/editors/sharedComponents/ErrorAlerts/messages.js
@@ -0,0 +1,12 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+
+  errorTitle: {
+    id: 'authoring.texteditor.selectimagemodal.error.errorTitle',
+    defaultMessage: 'Error',
+    description: 'Title of message presented to user when something goes wrong',
+  },
+});
+
+export default messages;
diff --git a/src/editors/sharedComponents/ErrorBoundary/ErrorPage.jsx b/src/editors/sharedComponents/ErrorBoundary/ErrorPage.jsx
new file mode 100644
index 0000000000..f4c32c13d1
--- /dev/null
+++ b/src/editors/sharedComponents/ErrorBoundary/ErrorPage.jsx
@@ -0,0 +1,90 @@
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import {
+  Button, Container, Row, Col,
+} from '@openedx/paragon';
+
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import messages from './messages';
+import { isLibraryV1Key } from '../../../generic/key-utils';
+import { navigateTo } from '../../hooks';
+import { selectors } from '../../data/redux';
+
+/**
+ * An error page that displays a generic message for unexpected errors.  Also contains a "Try
+ * Again" button to refresh the page.
+ */
+const ErrorPage = ({
+  message,
+  studioEndpointUrl,
+  learningContextId,
+  // redux
+  unitData,
+  // injected
+  intl,
+}) => {
+  const outlineType = isLibraryV1Key(learningContextId) ? 'library' : 'course';
+  const outlineUrl = `${studioEndpointUrl}/${outlineType}/${learningContextId}`;
+  const unitUrl = unitData?.data ? `${studioEndpointUrl}/container/${unitData?.data.ancestors[0].id}` : null;
+
+  return (
+    <Container fluid className="py-5 justify-content-center align-items-start text-center">
+      <Row>
+        <Col>
+          <p className="text-muted">
+            {intl.formatMessage(messages.unexpectedError)}
+          </p>
+          {message && (
+            <div role="alert" className="my-4">
+              <p>{message}</p>
+            </div>
+          )}
+          <Row className="justify-content-center">
+            {learningContextId && (unitUrl && outlineType !== 'library' ? (
+              <Button className="mr-2" variant="outline-primary" onClick={() => navigateTo(unitUrl)}>
+                {intl.formatMessage(messages.returnToUnitPageLabel)}
+              </Button>
+            ) : (
+              <Button className="mr-2" variant="outline-primary" onClick={() => navigateTo(outlineUrl)}>
+                {intl.formatMessage(messages.returnToOutlineLabel, { outlineType })}
+              </Button>
+            ))}
+            <Button className="ml-2" onClick={() => global.location.reload()}>
+              {intl.formatMessage(messages.unexpectedErrorButtonLabel)}
+            </Button>
+          </Row>
+        </Col>
+      </Row>
+    </Container>
+  );
+};
+
+ErrorPage.propTypes = {
+  message: PropTypes.string,
+  learningContextId: PropTypes.string.isRequired,
+  studioEndpointUrl: PropTypes.string.isRequired,
+  // redux
+  unitData: PropTypes.shape({
+    data: PropTypes.shape({
+      ancestors: PropTypes.arrayOf(
+        PropTypes.shape({
+          id: PropTypes.string,
+        }),
+      ),
+    }),
+  }),
+  // injected
+  intl: intlShape.isRequired,
+};
+
+ErrorPage.defaultProps = {
+  message: null,
+  unitData: null,
+};
+
+export const mapStateToProps = (state) => ({
+  unitData: selectors.app.unitUrl(state),
+});
+
+export const ErrorPageInternal = ErrorPage; // For testing only
+export default injectIntl(connect(mapStateToProps)(ErrorPage));
diff --git a/src/editors/sharedComponents/ErrorBoundary/ErrorPage.test.jsx b/src/editors/sharedComponents/ErrorBoundary/ErrorPage.test.jsx
new file mode 100644
index 0000000000..139f6c98e1
--- /dev/null
+++ b/src/editors/sharedComponents/ErrorBoundary/ErrorPage.test.jsx
@@ -0,0 +1,77 @@
+import 'CourseAuthoring/editors/setupEditorTest';
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+import { selectors } from '../../data/redux';
+import { formatMessage } from '../../testUtils';
+import { ErrorPageInternal as ErrorPage, mapStateToProps } from './ErrorPage';
+
+jest.mock('../../data/redux', () => ({
+  selectors: {
+    app: {
+      unitUrl: jest.fn(state => ({ unitUrl: state })),
+    },
+  },
+}));
+
+describe('Editor Page', () => {
+  const emptyProps = {
+    learningContextId: null,
+    studioEndpointUrl: null,
+    intl: { formatMessage },
+  };
+  const passedProps = {
+    learningContextId: 'course-v1:edX+DemoX+Demo_Course',
+    studioEndpointUrl: 'fakeurl.com',
+    message: 'cUStomMEssagE',
+    intl: { formatMessage },
+  };
+  const unitData = {
+    data: {
+      ancestors: [{ id: 'SomeID' }],
+    },
+  };
+
+  describe('rendered with empty props', () => {
+    it('should only have one button (try again)', () => {
+      const wrapper = shallow(<ErrorPage {...emptyProps} />);
+      const buttonText = wrapper.instance.findByType('Button')[0].children[0].el;
+      expect(wrapper.snapshot).toMatchSnapshot();
+      expect(buttonText).toEqual('Try again');
+    });
+  });
+
+  describe('rendered with pass through props defined', () => {
+    const wrapper = shallow(<ErrorPage {...passedProps} />);
+    describe('shows two buttons', () => {
+      it('the first button should correspond to returning to the course outline', () => {
+        const firstButtonText = wrapper.instance.findByType('Button')[0].children[0].el;
+        const secondButtonText = wrapper.instance.findByType('Button')[1].children[0].el;
+        expect(wrapper.snapshot).toMatchSnapshot();
+        expect(firstButtonText).toEqual('Return to course outline');
+        expect(secondButtonText).toEqual('Try again');
+      });
+      it('the first button should correspond to returning to the unit page', () => {
+        const returnToUnitPageWrapper = shallow(<ErrorPage {...passedProps} unitData={unitData} />);
+        expect(returnToUnitPageWrapper.snapshot).toMatchSnapshot();
+        const firstButtonText = returnToUnitPageWrapper.instance.findByType('Button')[0].children[0].el;
+        const secondButtonText = returnToUnitPageWrapper.instance.findByType('Button')[1].children[0].el;
+        expect(returnToUnitPageWrapper.snapshot).toMatchSnapshot();
+        expect(firstButtonText).toEqual('Return to unit page');
+        expect(secondButtonText).toEqual('Try again');
+      });
+    });
+    it('should have custom message', () => {
+      const customMessageText = wrapper.instance.findByType('div')[0].children[0].children[0].el;
+      expect(wrapper.snapshot).toMatchSnapshot();
+      expect(customMessageText).toEqual('cUStomMEssagE');
+    });
+  });
+  describe('mapStateToProps() function', () => {
+    const testState = { A: 'pple', B: 'anana', C: 'ucumber' };
+    test('unitData should equal unitUrl from app.unitUrl', () => {
+      expect(
+        mapStateToProps(testState).unitData,
+      ).toEqual(selectors.app.unitUrl(testState));
+    });
+  });
+});
diff --git a/src/editors/sharedComponents/ErrorBoundary/__snapshots__/ErrorPage.test.jsx.snap b/src/editors/sharedComponents/ErrorBoundary/__snapshots__/ErrorPage.test.jsx.snap
new file mode 100644
index 0000000000..8b93543e60
--- /dev/null
+++ b/src/editors/sharedComponents/ErrorBoundary/__snapshots__/ErrorPage.test.jsx.snap
@@ -0,0 +1,196 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Editor Page rendered with empty props should only have one button (try again) 1`] = `
+<Container
+  className="py-5 justify-content-center align-items-start text-center"
+  fluid={true}
+>
+  <Row>
+    <Col>
+      <p
+        className="text-muted"
+      >
+        An unexpected error occurred. Please click the button below to refresh the page.
+      </p>
+      <Row
+        className="justify-content-center"
+      >
+        <Button
+          className="ml-2"
+          onClick={[Function]}
+        >
+          Try again
+        </Button>
+      </Row>
+    </Col>
+  </Row>
+</Container>
+`;
+
+exports[`Editor Page rendered with pass through props defined should have custom message 1`] = `
+<Container
+  className="py-5 justify-content-center align-items-start text-center"
+  fluid={true}
+>
+  <Row>
+    <Col>
+      <p
+        className="text-muted"
+      >
+        An unexpected error occurred. Please click the button below to refresh the page.
+      </p>
+      <div
+        className="my-4"
+        role="alert"
+      >
+        <p>
+          cUStomMEssagE
+        </p>
+      </div>
+      <Row
+        className="justify-content-center"
+      >
+        <Button
+          className="mr-2"
+          onClick={[Function]}
+          variant="outline-primary"
+        >
+          Return to course outline
+        </Button>
+        <Button
+          className="ml-2"
+          onClick={[Function]}
+        >
+          Try again
+        </Button>
+      </Row>
+    </Col>
+  </Row>
+</Container>
+`;
+
+exports[`Editor Page rendered with pass through props defined shows two buttons the first button should correspond to returning to the course outline 1`] = `
+<Container
+  className="py-5 justify-content-center align-items-start text-center"
+  fluid={true}
+>
+  <Row>
+    <Col>
+      <p
+        className="text-muted"
+      >
+        An unexpected error occurred. Please click the button below to refresh the page.
+      </p>
+      <div
+        className="my-4"
+        role="alert"
+      >
+        <p>
+          cUStomMEssagE
+        </p>
+      </div>
+      <Row
+        className="justify-content-center"
+      >
+        <Button
+          className="mr-2"
+          onClick={[Function]}
+          variant="outline-primary"
+        >
+          Return to course outline
+        </Button>
+        <Button
+          className="ml-2"
+          onClick={[Function]}
+        >
+          Try again
+        </Button>
+      </Row>
+    </Col>
+  </Row>
+</Container>
+`;
+
+exports[`Editor Page rendered with pass through props defined shows two buttons the first button should correspond to returning to the unit page 1`] = `
+<Container
+  className="py-5 justify-content-center align-items-start text-center"
+  fluid={true}
+>
+  <Row>
+    <Col>
+      <p
+        className="text-muted"
+      >
+        An unexpected error occurred. Please click the button below to refresh the page.
+      </p>
+      <div
+        className="my-4"
+        role="alert"
+      >
+        <p>
+          cUStomMEssagE
+        </p>
+      </div>
+      <Row
+        className="justify-content-center"
+      >
+        <Button
+          className="mr-2"
+          onClick={[Function]}
+          variant="outline-primary"
+        >
+          Return to unit page
+        </Button>
+        <Button
+          className="ml-2"
+          onClick={[Function]}
+        >
+          Try again
+        </Button>
+      </Row>
+    </Col>
+  </Row>
+</Container>
+`;
+
+exports[`Editor Page rendered with pass through props defined shows two buttons the first button should correspond to returning to the unit page 2`] = `
+<Container
+  className="py-5 justify-content-center align-items-start text-center"
+  fluid={true}
+>
+  <Row>
+    <Col>
+      <p
+        className="text-muted"
+      >
+        An unexpected error occurred. Please click the button below to refresh the page.
+      </p>
+      <div
+        className="my-4"
+        role="alert"
+      >
+        <p>
+          cUStomMEssagE
+        </p>
+      </div>
+      <Row
+        className="justify-content-center"
+      >
+        <Button
+          className="mr-2"
+          onClick={[Function]}
+          variant="outline-primary"
+        >
+          Return to unit page
+        </Button>
+        <Button
+          className="ml-2"
+          onClick={[Function]}
+        >
+          Try again
+        </Button>
+      </Row>
+    </Col>
+  </Row>
+</Container>
+`;
diff --git a/src/editors/sharedComponents/ErrorBoundary/index.jsx b/src/editors/sharedComponents/ErrorBoundary/index.jsx
new file mode 100644
index 0000000000..2298825b85
--- /dev/null
+++ b/src/editors/sharedComponents/ErrorBoundary/index.jsx
@@ -0,0 +1,57 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+import {
+  logError,
+} from '@edx/frontend-platform/logging';
+
+import ErrorPage from './ErrorPage';
+
+/**
+ * Error boundary component used to log caught errors and display the error page.
+ *
+ * @memberof module:React
+ * @extends {Component}
+ */
+export default class ErrorBoundary extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      hasError: false,
+    };
+  }
+
+  static getDerivedStateFromError() {
+    // Update state so the next render will show the fallback UI.
+    return { hasError: true };
+  }
+
+  componentDidCatch(error, info) {
+    logError(error, { stack: info.componentStack });
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <ErrorPage
+          learningContextId={this.props.learningContextId}
+          studioEndpointUrl={this.props.studioEndpointUrl}
+        />
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+ErrorBoundary.propTypes = {
+  children: PropTypes.node,
+  learningContextId: PropTypes.string,
+  studioEndpointUrl: PropTypes.string,
+};
+
+ErrorBoundary.defaultProps = {
+  children: null,
+  learningContextId: null,
+  studioEndpointUrl: null,
+};
diff --git a/src/editors/sharedComponents/ErrorBoundary/index.test.jsx b/src/editors/sharedComponents/ErrorBoundary/index.test.jsx
new file mode 100644
index 0000000000..7f6ef81297
--- /dev/null
+++ b/src/editors/sharedComponents/ErrorBoundary/index.test.jsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import {
+  logError,
+} from '@edx/frontend-platform/logging';
+import ErrorBoundary from './index';
+
+jest.mock('@edx/frontend-platform/logging', () => ({
+  logError: jest.fn(),
+}));
+
+// stubbing this to avoid needing to inject a stubbed intl into an internal component
+jest.mock('./ErrorPage', () => function mockErrorPage() {
+  return <p>Error Page</p>;
+});
+
+describe('ErrorBoundary', () => {
+  it('should render children if no error', () => {
+    const component = (
+      <ErrorBoundary>
+        <div>Yay</div>
+      </ErrorBoundary>
+    );
+    const { container } = render(component);
+    const element = container.querySelector('div');
+
+    expect(logError).toHaveBeenCalledTimes(0);
+    expect(element.textContent).toEqual('Yay');
+  });
+
+  it('should render ErrorPage if it has an error', () => {
+    const ExplodingComponent = () => {
+      throw new Error('booyah');
+    };
+    const component = (
+      <ErrorBoundary>
+        <ExplodingComponent />
+      </ErrorBoundary>
+    );
+    const { container } = render(component);
+    const element = container.querySelector('p');
+    expect(logError).toHaveBeenCalledTimes(1);
+    expect(logError).toHaveBeenCalledWith(
+      new Error('booyah'),
+      expect.objectContaining({
+        stack: expect.stringContaining('ExplodingComponent'),
+      }),
+    );
+    expect(element.textContent).toEqual('Error Page');
+  });
+});
diff --git a/src/editors/sharedComponents/ErrorBoundary/messages.js b/src/editors/sharedComponents/ErrorBoundary/messages.js
new file mode 100644
index 0000000000..8aa3e42161
--- /dev/null
+++ b/src/editors/sharedComponents/ErrorBoundary/messages.js
@@ -0,0 +1,26 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  unexpectedError: {
+    id: 'unexpected.error.message.text',
+    defaultMessage: 'An unexpected error occurred. Please click the button below to refresh the page.',
+    description: 'error message when an unexpected error occurs',
+  },
+  unexpectedErrorButtonLabel: {
+    id: 'unexpected.error.button.text',
+    defaultMessage: 'Try again',
+    description: 'text for button that tries to reload the app by refreshing the page',
+  },
+  returnToUnitPageLabel: {
+    id: 'unexpected.error.returnToUnitPage.button.text',
+    defaultMessage: 'Return to unit page',
+    description: 'Text for button that navigates back to the unit page',
+  },
+  returnToOutlineLabel: {
+    id: 'unexpected.error.returnToCourseOutline.button.text',
+    defaultMessage: 'Return to {outlineType} outline',
+    description: 'Text for button that navigates back to the course outline',
+  },
+});
+
+export default messages;
diff --git a/src/editors/sharedComponents/ExpandableTextArea/__snapshots__/index.test.jsx.snap b/src/editors/sharedComponents/ExpandableTextArea/__snapshots__/index.test.jsx.snap
new file mode 100644
index 0000000000..2bd7017c3f
--- /dev/null
+++ b/src/editors/sharedComponents/ExpandableTextArea/__snapshots__/index.test.jsx.snap
@@ -0,0 +1,46 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ExpandableTextArea snapshots renders as expected with default behavior 1`] = `
+<Fragment>
+  <div
+    className="expandable-mce error"
+  >
+    <TinyMceWidget
+      editorContentHtml="text"
+      editorRef={
+        {
+          "current": null,
+        }
+      }
+      editorType="expandable"
+      placeholder={null}
+      setEditorRef={[Function]}
+      updateContent={[MockFunction]}
+    />
+  </div>
+</Fragment>
+`;
+
+exports[`ExpandableTextArea snapshots renders error message 1`] = `
+<Fragment>
+  <div
+    className="expandable-mce error"
+  >
+    <TinyMceWidget
+      editorContentHtml="text"
+      editorRef={
+        {
+          "current": null,
+        }
+      }
+      editorType="expandable"
+      placeholder={null}
+      setEditorRef={[Function]}
+      updateContent={[MockFunction]}
+    />
+  </div>
+  <div
+    className="text-danger-500 x-small"
+  />
+</Fragment>
+`;
diff --git a/src/editors/sharedComponents/ExpandableTextArea/index.jsx b/src/editors/sharedComponents/ExpandableTextArea/index.jsx
new file mode 100644
index 0000000000..a2f30d66d8
--- /dev/null
+++ b/src/editors/sharedComponents/ExpandableTextArea/index.jsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import TinyMceWidget from '../TinyMceWidget';
+import { prepareEditorRef } from '../TinyMceWidget/hooks';
+import './index.scss';
+
+const ExpandableTextArea = ({
+  value,
+  setContent,
+  error,
+  errorMessage,
+  ...props
+}) => {
+  const { editorRef, setEditorRef } = prepareEditorRef();
+
+  return (
+    <>
+      <div className="expandable-mce error">
+        <TinyMceWidget
+          editorContentHtml={value}
+          editorRef={editorRef}
+          editorType="expandable"
+          setEditorRef={setEditorRef}
+          updateContent={setContent}
+          {...props}
+        />
+      </div>
+      {error && (
+        <div className="text-danger-500 x-small">
+          {props.errorMessage}
+        </div>
+      )}
+    </>
+  );
+};
+
+ExpandableTextArea.defaultProps = {
+  value: null,
+  placeholder: null,
+  error: false,
+  errorMessage: null,
+};
+
+ExpandableTextArea.propTypes = {
+  value: PropTypes.string,
+  setContent: PropTypes.func.isRequired,
+  placeholder: PropTypes.string,
+  error: PropTypes.bool,
+  errorMessage: PropTypes.string,
+};
+
+export default ExpandableTextArea;
diff --git a/src/editors/sharedComponents/ExpandableTextArea/index.scss b/src/editors/sharedComponents/ExpandableTextArea/index.scss
new file mode 100644
index 0000000000..39659be1f5
--- /dev/null
+++ b/src/editors/sharedComponents/ExpandableTextArea/index.scss
@@ -0,0 +1,29 @@
+.expandable-mce {
+  .error {
+    outline: 2px solid #CA3A2F;
+  }
+
+  .mce-content-body {
+    padding: 10px;
+
+    p {
+      margin: 0;
+    }
+
+    blockquote {
+      margin: 16px 40px;
+    }
+  }
+  
+  *[contentEditable="false"] {
+    outline: 1px solid #D7D3D1;
+  }
+
+  *[contentEditable="true"] {
+    outline: 1px solid #707070;
+
+    &:focus, &:active {
+      outline: 2px solid #000000;
+    }
+  }
+}
diff --git a/src/editors/sharedComponents/ExpandableTextArea/index.test.jsx b/src/editors/sharedComponents/ExpandableTextArea/index.test.jsx
new file mode 100644
index 0000000000..9995360e90
--- /dev/null
+++ b/src/editors/sharedComponents/ExpandableTextArea/index.test.jsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+import ExpandableTextArea from '.';
+
+// Per https://github.com/tinymce/tinymce-react/issues/91 React unit testing in JSDOM is not supported by tinymce.
+// Consequently, mock the Editor out.
+jest.mock('@tinymce/tinymce-react', () => {
+  const originalModule = jest.requireActual('@tinymce/tinymce-react');
+  return {
+    __esModule: true,
+    ...originalModule,
+    Editor: () => 'TiNYmCE EDitOR',
+  };
+});
+
+jest.mock('../TinyMceWidget', () => 'TinyMceWidget');
+
+describe('ExpandableTextArea', () => {
+  const props = {
+    value: 'text',
+    setContent: jest.fn(),
+    error: false,
+    errorMessage: null,
+  };
+  describe('snapshots', () => {
+    test('renders as expected with default behavior', () => {
+      expect(shallow(<ExpandableTextArea {...props} />).snapshot).toMatchSnapshot();
+    });
+    test('renders error message', () => {
+      const wrapper = shallow(<ExpandableTextArea {...props} error errorMessage="eRRormeSsaGE" />);
+      expect(wrapper.snapshot).toMatchSnapshot();
+    });
+  });
+});
diff --git a/src/editors/sharedComponents/FileInput/__snapshots__/index.test.jsx.snap b/src/editors/sharedComponents/FileInput/__snapshots__/index.test.jsx.snap
new file mode 100644
index 0000000000..454989b01c
--- /dev/null
+++ b/src/editors/sharedComponents/FileInput/__snapshots__/index.test.jsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FileInput component snapshot 1`] = `
+<div>
+  <input
+    accept=".srt"
+    class="upload d-none"
+    type="file"
+  />
+</div>
+`;
diff --git a/src/editors/sharedComponents/FileInput/index.jsx b/src/editors/sharedComponents/FileInput/index.jsx
new file mode 100644
index 0000000000..f265db4d44
--- /dev/null
+++ b/src/editors/sharedComponents/FileInput/index.jsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export const fileInput = ({ onAddFile }) => {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const ref = React.useRef();
+  const click = () => ref.current.click();
+  const addFile = (e) => {
+    const file = e.target.files[0];
+    if (file) {
+      onAddFile(file);
+    }
+  };
+  return {
+    click,
+    addFile,
+    ref,
+  };
+};
+
+export const FileInput = ({ fileInput: hook, acceptedFiles }) => (
+  <input
+    accept={acceptedFiles}
+    className="upload d-none"
+    onChange={hook.addFile}
+    ref={hook.ref}
+    type="file"
+  />
+);
+
+FileInput.propTypes = {
+  acceptedFiles: PropTypes.string.isRequired,
+  fileInput: PropTypes.shape({
+    addFile: PropTypes.func,
+    ref: PropTypes.oneOfType([
+      // Either a function
+      PropTypes.func,
+      // Or the instance of a DOM native element (see the note about SSR)
+      PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
+    ]),
+  }).isRequired,
+};
diff --git a/src/editors/sharedComponents/FileInput/index.test.jsx b/src/editors/sharedComponents/FileInput/index.test.jsx
new file mode 100644
index 0000000000..fd2f354366
--- /dev/null
+++ b/src/editors/sharedComponents/FileInput/index.test.jsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react';
+
+import { FileInput } from '.';
+
+const mockOnChange = jest.fn();
+
+describe('FileInput component', () => {
+  let el;
+  let container;
+  let props;
+  beforeEach(() => {
+    container = {};
+    props = {
+      acceptedFiles: '.srt',
+      fileInput: {
+        addFile: () => mockOnChange(),
+        ref: (input) => { container.ref = input; },
+      },
+    };
+    el = render(<FileInput {...props} />);
+  });
+  test('snapshot', () => {
+    expect(el.container).toMatchSnapshot();
+  });
+  test('only accepts allowed file types', () => {
+    expect(el.container.querySelector('input').accept).toEqual('.srt');
+  });
+  test('calls fileInput.addFile onChange', () => {
+    fireEvent.change(el.container.querySelector('input'));
+    expect(mockOnChange).toHaveBeenCalled();
+  });
+  test('loads ref from fileInput.ref', () => {
+    expect(container.ref).toEqual(el.container.querySelector('input'));
+  });
+});
diff --git a/src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/AltTextControls.jsx b/src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/AltTextControls.jsx
new file mode 100644
index 0000000000..5b06c6f8f2
--- /dev/null
+++ b/src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/AltTextControls.jsx
@@ -0,0 +1,74 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Form } from '@openedx/paragon';
+import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+
+import * as hooks from './hooks';
+import messages from './messages';
+
+/**
+ * Wrapper for alt-text input and isDecorative checkbox control
+ * @param {obj} errorProps - props for error handling
+ *   {bool} isValid - are alt-text fields valid for saving?
+ * @param {bool} isDecorative - is the image decorative?
+ * @param {func} setIsDecorative - handle isDecorative change event
+ * @param {func} setValue - update alt-text value
+ * @param {string} value - current alt-text value
+ */
+const AltTextControls = ({
+  isDecorative,
+  setIsDecorative,
+  setValue,
+  validation,
+  value,
+  // inject
+  intl,
+}) => (
+  <Form.Group className="mt-4.5">
+    <Form.Label as="h4">
+      <FormattedMessage {...messages.accessibilityLabel} />
+    </Form.Label>
+    <Form.Control
+      className="mt-4.5"
+      disabled={isDecorative}
+      floatingLabel={intl.formatMessage(messages.altTextFloatingLabel)}
+      isInvalid={validation.show}
+      onChange={hooks.onInputChange(setValue)}
+      type="input"
+      value={value}
+    />
+    {validation.show
+      && (
+        <Form.Control.Feedback type="invalid">
+          <FormattedMessage {...messages.altTextLocalFeedback} />
+        </Form.Control.Feedback>
+      )}
+    <Form.Checkbox
+      checked={isDecorative}
+      className="mt-4.5 decorative-control-label"
+      onChange={hooks.onCheckboxChange(setIsDecorative)}
+    >
+      <Form.Label>
+        <FormattedMessage {...messages.decorativeAltTextCheckboxLabel} />
+      </Form.Label>
+    </Form.Checkbox>
+  </Form.Group>
+);
+AltTextControls.propTypes = {
+  error: PropTypes.shape({
+    show: PropTypes.bool,
+  }).isRequired,
+  isDecorative: PropTypes.bool.isRequired,
+  setValue: PropTypes.func.isRequired,
+  setIsDecorative: PropTypes.func.isRequired,
+  validation: PropTypes.shape({
+    show: PropTypes.bool,
+  }).isRequired,
+  value: PropTypes.string.isRequired,
+  // inject
+  intl: intlShape.isRequired,
+};
+
+export const AltTextControlsInternal = AltTextControls; // For testing only
+export default injectIntl(AltTextControls);
diff --git a/src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/AltTextControls.test.jsx b/src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/AltTextControls.test.jsx
new file mode 100644
index 0000000000..36780669d5
--- /dev/null
+++ b/src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/AltTextControls.test.jsx
@@ -0,0 +1,34 @@
+import 'CourseAuthoring/editors/setupEditorTest';
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+
+import { formatMessage } from '../../../testUtils';
+import { AltTextControlsInternal as AltTextControls } from './AltTextControls';
+
+jest.mock('./hooks', () => ({
+  onInputChange: (handler) => ({ 'hooks.onInputChange': handler }),
+  onCheckboxChange: (handler) => ({ 'hooks.onCheckboxChange': handler }),
+}));
+
+describe('AltTextControls', () => {
+  const props = {
+    isDecorative: true,
+    value: 'props.value',
+    // inject
+    intl: { formatMessage },
+  };
+  beforeEach(() => {
+    props.setValue = jest.fn().mockName('props.setValue');
+    props.setIsDecorative = jest.fn().mockName('props.setIsDecorative');
+    props.validation = { show: true };
+  });
+  describe('render', () => {
+    test('snapshot: isDecorative=true errorProps.showAltTextSubmissionError=true', () => {
+      expect(shallow(<AltTextControls {...props} />).snapshot).toMatchSnapshot();
+    });
+    test('snapshot: isDecorative=true errorProps.showAltTextSubmissionError=false', () => {
+      props.validation.show = false;
+      expect(shallow(<AltTextControls {...props} />).snapshot).toMatchSnapshot();
+    });
+  });
+});
diff --git a/src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/DimensionControls.jsx b/src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/DimensionControls.jsx
new file mode 100644
index 0000000000..c05ec4faeb
--- /dev/null
+++ b/src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/DimensionControls.jsx
@@ -0,0 +1,93 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  Form,
+  Icon,
+  IconButton,
+} from '@openedx/paragon';
+import {
+  Locked,
+  Unlocked,
+} from '@openedx/paragon/icons';
+import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+
+import * as hooks from './hooks';
+import messages from './messages';
+
+/**
+ * Wrapper for image dimension inputs and the lock checkbox.
+ * @param {bool} isLocked - are dimensions locked
+ * @param {func} lock - lock dimensions
+ * @param {func} setHeight - updates dimensions based on new height
+ * @param {func} setWidth - updates dimensions based on new width
+ * @param {func} unlock - unlock dimensions
+ * @param {func} updateDimensions - update dimensions callback
+ * @param {obj} value - local dimension values { height, width }
+ */
+const DimensionControls = ({
+  isLocked,
+  lock,
+  setHeight,
+  setWidth,
+  unlock,
+  updateDimensions,
+  value,
+  // inject
+  intl,
+}) => ((value !== null) && (
+  <Form.Group>
+    <Form.Label as="h4">
+      <FormattedMessage {...messages.imageDimensionsLabel} />
+    </Form.Label>
+    <div className="mt-4.5">
+      <Form.Control
+        className="dimension-input"
+        value={value.width}
+        onChange={hooks.onInputChange(setWidth)}
+        onBlur={updateDimensions}
+        floatingLabel={intl.formatMessage(messages.widthFloatingLabel)}
+      />
+      <Form.Control
+        className="dimension-input"
+        value={value.height}
+        onChange={hooks.onInputChange(setHeight)}
+        onBlur={updateDimensions}
+        floatingLabel={intl.formatMessage(messages.heightFloatingLabel)}
+      />
+      <IconButton
+        className="d-inline-block"
+        alt={
+          isLocked
+            ? intl.formatMessage(messages.unlockDimensionsLabel)
+            : intl.formatMessage(messages.lockDimensionsLabel)
+        }
+        iconAs={Icon}
+        src={isLocked ? Locked : Unlocked}
+        onClick={isLocked ? unlock : lock}
+      />
+    </div>
+  </Form.Group>
+));
+DimensionControls.defaultProps = {
+  value: {
+    height: '100',
+    width: '100',
+  },
+};
+DimensionControls.propTypes = ({
+  value: PropTypes.shape({
+    height: PropTypes.string,
+    width: PropTypes.string,
+  }),
+  setHeight: PropTypes.func.isRequired,
+  setWidth: PropTypes.func.isRequired,
+  isLocked: PropTypes.bool.isRequired,
+  lock: PropTypes.func.isRequired,
+  unlock: PropTypes.func.isRequired,
+  updateDimensions: PropTypes.func.isRequired,
+  // inject
+  intl: intlShape.isRequired,
+});
+
+export const DimensionControlsInternal = DimensionControls; // For testing only
+export default injectIntl(DimensionControls);
diff --git a/src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/DimensionControls.test.jsx b/src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/DimensionControls.test.jsx
new file mode 100644
index 0000000000..0cf9a6d279
--- /dev/null
+++ b/src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/DimensionControls.test.jsx
@@ -0,0 +1,141 @@
+import 'CourseAuthoring/editors/setupEditorTest';
+import React, { useEffect } from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+import * as paragon from '@openedx/paragon';
+import * as icons from '@openedx/paragon/icons';
+
+import {
+  fireEvent, render, screen, waitFor,
+} from '@testing-library/react';
+import { formatMessage } from '../../../testUtils';
+import { DimensionControlsInternal as DimensionControls } from './DimensionControls';
+import * as hooks from './hooks';
+
+const WrappedDimensionControls = () => {
+  const dimensions = hooks.dimensionHooks('altText');
+
+  useEffect(() => {
+    dimensions.onImgLoad({ })({ target: { naturalWidth: 1517, naturalHeight: 803 } });
+  }, []);
+
+  return <DimensionControls {...dimensions} intl={{ formatMessage }} />;
+};
+
+const UnlockedDimensionControls = () => {
+  const dimensions = hooks.dimensionHooks('altText');
+
+  useEffect(() => {
+    dimensions.onImgLoad({ })({ target: { naturalWidth: 1517, naturalHeight: 803 } });
+    dimensions.unlock();
+  }, []);
+
+  return <DimensionControls {...dimensions} intl={{ formatMessage }} />;
+};
+
+describe('DimensionControls', () => {
+  describe('render', () => {
+    const props = {
+      lockAspectRatio: { width: 4, height: 5 },
+      locked: { 'props.locked': 'lockedValue' },
+      isLocked: true,
+      value: { width: 20, height: 40 },
+      // inject
+      intl: { formatMessage },
+    };
+    beforeEach(() => {
+      jest.spyOn(hooks, 'onInputChange').mockImplementation((handler) => ({ 'hooks.onInputChange': handler }));
+      props.setWidth = jest.fn().mockName('props.setWidth');
+      props.setHeight = jest.fn().mockName('props.setHeight');
+      props.lock = jest.fn().mockName('props.lock');
+      props.unlock = jest.fn().mockName('props.unlock');
+      props.updateDimensions = jest.fn().mockName('props.updateDimensions');
+    });
+    afterEach(() => {
+      jest.spyOn(hooks, 'onInputChange').mockRestore();
+    });
+    test('snapshot', () => {
+      expect(shallow(<DimensionControls {...props} />).snapshot).toMatchSnapshot();
+    });
+    test('null value: empty snapshot', () => {
+      const el = shallow(<DimensionControls {...props} value={null} />);
+      expect(el.snapshot).toMatchSnapshot();
+      expect(el.isEmptyRender()).toEqual(true);
+    });
+    test('unlocked dimensions', () => {
+      const el = shallow(<DimensionControls {...props} isLocked={false} />);
+      expect(el.snapshot).toMatchSnapshot();
+    });
+  });
+  describe('component tests for dimensions', () => {
+    beforeEach(() => {
+      paragon.Form.Group = jest.fn().mockImplementation(({ children }) => (
+        <div>{children}</div>
+      ));
+      paragon.Form.Label = jest.fn().mockImplementation(({ children }) => (
+        <div>{children}</div>
+      ));
+      // eslint-disable-next-line no-import-assign
+      paragon.Icon = jest.fn().mockImplementation(({ children }) => (
+        <div>{children}</div>
+      ));
+      // eslint-disable-next-line no-import-assign
+      paragon.IconButton = jest.fn().mockImplementation(({ children }) => (
+        <div>{children}</div>
+      ));
+      paragon.Form.Control = jest.fn().mockImplementation(({ value, onChange, onBlur }) => (
+        <input className="formControl" onChange={onChange} onBlur={onBlur} value={value} />
+      ));
+      // eslint-disable-next-line no-import-assign
+      icons.Locked = jest.fn().mockImplementation(() => {});
+      // eslint-disable-next-line no-import-assign
+      icons.Unlocked = jest.fn().mockImplementation(() => {});
+    });
+    afterEach(() => {
+      paragon.Form.Group.mockRestore();
+      paragon.Form.Label.mockRestore();
+      paragon.Form.Control.mockRestore();
+      paragon.Icon.mockRestore();
+      paragon.IconButton.mockRestore();
+      icons.Locked.mockRestore();
+      icons.Unlocked.mockRestore();
+    });
+
+    it('renders with initial dimensions', () => {
+      const { container } = render(<WrappedDimensionControls />);
+      const widthInput = container.querySelector('.formControl');
+      expect(widthInput.value).toBe('1517');
+    });
+
+    it('resizes dimensions proportionally', async () => {
+      const { container } = render(<WrappedDimensionControls />);
+      const widthInput = container.querySelector('.formControl');
+      expect(widthInput.value).toBe('1517');
+      fireEvent.change(widthInput, { target: { value: 758 } });
+      await waitFor(() => {
+        expect(container.querySelectorAll('.formControl')[0].value).toBe('758');
+      });
+      fireEvent.blur(widthInput);
+      await waitFor(() => {
+        expect(container.querySelectorAll('.formControl')[0].value).toBe('758');
+        expect(container.querySelectorAll('.formControl')[1].value).toBe('401');
+      });
+      screen.debug();
+    });
+
+    it('resizes only changed dimension when unlocked', async () => {
+      const { container } = render(<UnlockedDimensionControls />);
+      const widthInput = container.querySelector('.formControl');
+      expect(widthInput.value).toBe('1517');
+      fireEvent.change(widthInput, { target: { value: 758 } });
+      await waitFor(() => {
+        expect(container.querySelectorAll('.formControl')[0].value).toBe('758');
+      });
+      fireEvent.blur(widthInput);
+      await waitFor(() => {
+        expect(container.querySelectorAll('.formControl')[0].value).toBe('758');
+        expect(container.querySelectorAll('.formControl')[1].value).toBe('803');
+      });
+      screen.debug();
+    });
+  });
+});
diff --git a/src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/__snapshots__/AltTextControls.test.jsx.snap b/src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/__snapshots__/AltTextControls.test.jsx.snap
new file mode 100644
index 0000000000..7e0b029a86
--- /dev/null
+++ b/src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/__snapshots__/AltTextControls.test.jsx.snap
@@ -0,0 +1,102 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AltTextControls render snapshot: isDecorative=true errorProps.showAltTextSubmissionError=false 1`] = `
+<Form.Group
+  className="mt-4.5"
+>
+  <Form.Label
+    as="h4"
+  >
+    <FormattedMessage
+      defaultMessage="Accessibility"
+      description="Label title for accessibility section."
+      id="authoring.texteditor.imagesettingsmodal.accessibilityLabel"
+    />
+  </Form.Label>
+  <Form.Control
+    className="mt-4.5"
+    disabled={true}
+    floatingLabel="Alt Text"
+    isInvalid={false}
+    onChange={
+      {
+        "hooks.onInputChange": [MockFunction props.setValue],
+      }
+    }
+    type="input"
+    value="props.value"
+  />
+  <Form.Checkbox
+    checked={true}
+    className="mt-4.5 decorative-control-label"
+    onChange={
+      {
+        "hooks.onCheckboxChange": [MockFunction props.setIsDecorative],
+      }
+    }
+  >
+    <Form.Label>
+      <FormattedMessage
+        defaultMessage="This image is decorative (no alt text required)."
+        description="Checkbox label for whether or not an image is decorative."
+        id="authoring.texteditor.imagesettingsmodal.decorativeAltTextCheckboxLabel"
+      />
+    </Form.Label>
+  </Form.Checkbox>
+</Form.Group>
+`;
+
+exports[`AltTextControls render snapshot: isDecorative=true errorProps.showAltTextSubmissionError=true 1`] = `
+<Form.Group
+  className="mt-4.5"
+>
+  <Form.Label
+    as="h4"
+  >
+    <FormattedMessage
+      defaultMessage="Accessibility"
+      description="Label title for accessibility section."
+      id="authoring.texteditor.imagesettingsmodal.accessibilityLabel"
+    />
+  </Form.Label>
+  <Form.Control
+    className="mt-4.5"
+    disabled={true}
+    floatingLabel="Alt Text"
+    isInvalid={true}
+    onChange={
+      {
+        "hooks.onInputChange": [MockFunction props.setValue],
+      }
+    }
+    type="input"
+    value="props.value"
+  />
+  <Form.Control.Feedback
+    type="invalid"
+  >
+    <FormattedMessage
+      defaultMessage="Enter alt text"
+      description="Message feedback for user below the alt text field."
+      id="authoring.texteditor.imagesettingsmodal.error.altTextLocalFeedback"
+    />
+  </Form.Control.Feedback>
+  <Form.Checkbox
+    checked={true}
+    className="mt-4.5 decorative-control-label"
+    onChange={
+      {
+        "hooks.onCheckboxChange": [MockFunction props.setIsDecorative],
+      }
+    }
+  >
+    <Form.Label>
+      <FormattedMessage
+        defaultMessage="This image is decorative (no alt text required)."
+        description="Checkbox label for whether or not an image is decorative."
+        id="authoring.texteditor.imagesettingsmodal.decorativeAltTextCheckboxLabel"
+      />
+    </Form.Label>
+  </Form.Checkbox>
+</Form.Group>
+`;
diff --git a/src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/__snapshots__/DimensionControls.test.jsx.snap b/src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/__snapshots__/DimensionControls.test.jsx.snap
new file mode 100644
index 0000000000..6f1bf0cdc7
--- /dev/null
+++ b/src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/__snapshots__/DimensionControls.test.jsx.snap
@@ -0,0 +1,97 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DimensionControls render null value: empty snapshot 1`] = `false`;
+
+exports[`DimensionControls render snapshot 1`] = `
+<Form.Group>
+  <Form.Label
+    as="h4"
+  >
+    <FormattedMessage
+      defaultMessage="Image Dimensions"
+      description="Label title for the image dimensions section."
+      id="authoring.texteditor.imagesettingsmodal.imageDimensionsLabel"
+    />
+  </Form.Label>
+  <div
+    className="mt-4.5"
+  >
+    <Form.Control
+      className="dimension-input"
+      floatingLabel="Width"
+      onBlur={[MockFunction props.updateDimensions]}
+      onChange={
+        {
+          "hooks.onInputChange": [MockFunction props.setWidth],
+        }
+      }
+      value={20}
+    />
+    <Form.Control
+      className="dimension-input"
+      floatingLabel="Height"
+      onBlur={[MockFunction props.updateDimensions]}
+      onChange={
+        {
+          "hooks.onInputChange": [MockFunction props.setHeight],
+        }
+      }
+      value={40}
+    />
+    <IconButton
+      alt="unlock dimensions"
+      className="d-inline-block"
+      iconAs="Icon"
+      onClick={[MockFunction props.unlock]}
+      src={[MockFunction icons.Locked]}
+    />
+  </div>
+</Form.Group>
+`;
+
+exports[`DimensionControls render unlocked dimensions 1`] = `
+<Form.Group>
+  <Form.Label
+    as="h4"
+  >
+    <FormattedMessage
+      defaultMessage="Image Dimensions"
+      description="Label title for the image dimensions section."
+      id="authoring.texteditor.imagesettingsmodal.imageDimensionsLabel"
+    />
+  </Form.Label>
+  <div
+    className="mt-4.5"
+  >
+    <Form.Control
+      className="dimension-input"
+      floatingLabel="Width"
+      onBlur={[MockFunction props.updateDimensions]}
+      onChange={
+        {
+          "hooks.onInputChange": [MockFunction props.setWidth],
+        }
+      }
+      value={20}
+    />
+    <Form.Control
+      className="dimension-input"
+      floatingLabel="Height"
+      onBlur={[MockFunction props.updateDimensions]}
+      onChange={
+        {
+          "hooks.onInputChange": [MockFunction props.setHeight],
+        }
+      }
+      value={40}
+    />
+    <IconButton
+      alt="lock dimensions"
+      className="d-inline-block"
+      iconAs="Icon"
+      onClick={[MockFunction props.lock]}
+      src={[MockFunction icons.Unlocked]}
+    />
+  </div>
+</Form.Group>
+`;
diff --git a/src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/__snapshots__/index.test.jsx.snap b/src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/__snapshots__/index.test.jsx.snap
new file mode 100644
index 0000000000..d590d01b40
--- /dev/null
+++ b/src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/__snapshots__/index.test.jsx.snap
@@ -0,0 +1,174 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ImageSettingsModal render snapshot 1`] = `
+<BaseModal
+  bodyStyle={null}
+  close={[MockFunction props.close]}
+  confirmAction={
+    <Button
+      onClick={
+        {
+          "hooks.onSaveClick": {
+            "altText": {
+              "error": {
+                "dismiss": [MockFunction],
+                "show": true,
+              },
+              "isDecorative": false,
+              "value": "alternative Taxes",
+            },
+            "dimensions": {
+              "height": 13,
+              "width": 12,
+            },
+            "isDecorative": false,
+            "saveToEditor": [MockFunction props.saveToEditor],
+          },
+        }
+      }
+      variant="primary"
+    >
+      <FormattedMessage
+        defaultMessage="Save"
+        description="Label for save button."
+        id="authoring.texteditor.imagesettingsmodal.saveButtonLabel"
+      />
+    </Button>
+  }
+  footerAction={null}
+  headerComponent={null}
+  isFullscreenScroll={true}
+  isOpen={false}
+  size="lg"
+  title="Image Settings"
+>
+  <ErrorAlert
+    dismissError={[MockFunction]}
+    hideHeading={true}
+    isError={true}
+  >
+    <FormattedMessage
+      defaultMessage="Enter alt text or specify that the image is decorative only."
+      description="Message presented to user when user attempts to save unaccepted altText configuration."
+      id="authoring.texteditor.imagesettingsmodal.error.altTextError"
+    />
+  </ErrorAlert>
+  <Button
+    onClick={[MockFunction props.returnToSelector]}
+    size="inline"
+    variant="link"
+  >
+    <FormattedMessage
+      defaultMessage="Replace image"
+      description="Label for replace image button."
+      id="authoring.texteditor.imagesettingsmodal.replaceImageButtonLabel"
+    />
+  </Button>
+  <br />
+  <div
+    className="d-flex flex-row m-2 img-settings-form-container"
+  >
+    <div
+      className="img-settings-thumbnail-container"
+    >
+      <Image
+        className="img-settings-thumbnail"
+        onError={
+          {
+            "hooks.dimensions.onImgLoad.callback": {
+              "selection": {
+                "altText": "AlTTExt",
+                "externalUrl": "ExtERNALurL",
+                "url": "UrL",
+              },
+            },
+          }
+        }
+        onLoad={
+          {
+            "hooks.dimensions.onImgLoad.callback": {
+              "selection": {
+                "altText": "AlTTExt",
+                "externalUrl": "ExtERNALurL",
+                "url": "UrL",
+              },
+            },
+          }
+        }
+        src="ExtERNALurL"
+      />
+    </div>
+    <hr
+      className="h-100 bg-primary-200 m-0"
+    />
+    <div
+      className="img-settings-form-controls"
+    >
+      <DimensionControls
+        onImgLoad={
+          [MockFunction hooks.dimensions.onImgLoad] {
+            "calls": [
+              [
+                {
+                  "altText": "AlTTExt",
+                  "externalUrl": "ExtERNALurL",
+                  "url": "UrL",
+                },
+              ],
+              [
+                {
+                  "altText": "AlTTExt",
+                  "externalUrl": "ExtERNALurL",
+                  "url": "UrL",
+                },
+              ],
+            ],
+            "results": [
+              {
+                "type": "return",
+                "value": {
+                  "hooks.dimensions.onImgLoad.callback": {
+                    "selection": {
+                      "altText": "AlTTExt",
+                      "externalUrl": "ExtERNALurL",
+                      "url": "UrL",
+                    },
+                  },
+                },
+              },
+              {
+                "type": "return",
+                "value": {
+                  "hooks.dimensions.onImgLoad.callback": {
+                    "selection": {
+                      "altText": "AlTTExt",
+                      "externalUrl": "ExtERNALurL",
+                      "url": "UrL",
+                    },
+                  },
+                },
+              },
+            ],
+          }
+        }
+        value={
+          {
+            "height": 13,
+            "width": 12,
+          }
+        }
+      />
+      <AltTextControls
+        error={
+          {
+            "dismiss": [MockFunction],
+            "show": true,
+          }
+        }
+        isDecorative={false}
+        value="alternative Taxes"
+      />
+    </div>
+  </div>
+</BaseModal>
+`;
diff --git a/src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/hooks.js b/src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/hooks.js
new file mode 100644
index 0000000000..c67d63f404
--- /dev/null
+++ b/src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/hooks.js
@@ -0,0 +1,340 @@
+import React from 'react';
+
+import { StrictDict } from '../../../utils';
+// This 'module' self-import hack enables mocking during tests.
+// See src/editors/decisions/0005-internal-editor-testability-decisions.md. The whole approach to how hooks are tested
+// should be re-thought and cleaned up to avoid this pattern.
+// eslint-disable-next-line import/no-self-import
+import * as module from './hooks';
+
+// Simple wrappers for useState to allow easy mocking for tests.
+export const state = {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  altText: (val) => React.useState(val),
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  dimensions: (val) => React.useState(val),
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  showAltTextDismissibleError: (val) => React.useState(val),
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  showAltTextSubmissionError: (val) => React.useState(val),
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  isDecorative: (val) => React.useState(val),
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  isLocked: (val) => React.useState(val),
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  local: (val) => React.useState(val),
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  lockAspectRatio: (val) => React.useState(val),
+};
+
+export const dimKeys = StrictDict({
+  height: 'height',
+  width: 'width',
+});
+
+/**
+ * findGcd(numerator, denominator)
+ * Find the greatest common denominator of a ratio or fraction, which may be 1.
+ * @param {number} numerator - ratio numerator
+ * @param {number} denominator - ratio denominator
+ * @return {number} - ratio greatest common denominator
+ */
+export const findGcd = (a, b) => {
+  const gcd = b ? findGcd(b, a % b) : a;
+
+  if (gcd === 1 || [a, b].some(v => !Number.isInteger(v / gcd))) {
+    return 1;
+  }
+
+  return gcd;
+};
+
+const checkEqual = (d1, d2) => (d1.height === d2.height && d1.width === d2.width);
+
+/**
+ * getValidDimensions({ dimensions, local, locked })
+ * Find valid ending dimensions based on start state, request, and lock state
+ * @param {obj} dimensions - current stored dimensions
+ * @param {obj} local - local (active) dimensions in the inputs
+ * @param {obj} locked - locked dimensions
+ * @return {obj} - output dimensions after move ({ height, width })
+ */
+export const getValidDimensions = ({
+  dimensions,
+  local,
+  isLocked,
+  lockAspectRatio,
+}) => {
+  // if lock is not active, just return new dimensions.
+  // If lock is active, but dimensions have not changed, also just return new dimensions.
+  if (!isLocked || checkEqual(local, dimensions)) {
+    return local;
+  }
+
+  const out = {};
+
+  // changed key is value of local height if that has changed, otherwise width.
+  const keys = (local.height !== dimensions.height)
+    ? { changed: dimKeys.height, other: dimKeys.width }
+    : { changed: dimKeys.width, other: dimKeys.height };
+
+  out[keys.changed] = local[keys.changed];
+  out[keys.other] = Math.round((local[keys.changed] * lockAspectRatio[keys.other]) / lockAspectRatio[keys.changed]);
+
+  return out;
+};
+
+/**
+ * reduceDimensions(width, height)
+ * reduces both values by dividing by their greates common denominator (which can simply be 1).
+ * @return {Array} [width, height]
+ */
+export const reduceDimensions = (width, height) => {
+  const gcd = module.findGcd(width, height);
+
+  return [width / gcd, height / gcd];
+};
+
+/**
+ * dimensionLockHooks({ dimensions })
+ * Returns a set of hooks pertaining to the dimension locks.
+ * Locks the dimensions initially, on lock initialization.
+ * @param {obj} dimensions - current stored dimensions
+ * @return {obj} - dimension lock hooks
+ *   {func} initializeLock - enable the lock mechanism
+ *   {bool} isLocked - are dimensions locked?
+ *   {obj} lockAspectRatio - image dimensions ({ height, width })
+ *   {func} lock - lock the dimensions
+ *   {func} unlock - unlock the dimensions
+ */
+export const dimensionLockHooks = () => {
+  const [lockAspectRatio, setLockAspectRatio] = module.state.lockAspectRatio(null);
+  const [isLocked, setIsLocked] = module.state.isLocked(true);
+
+  const initializeLock = ({ width, height }) => {
+    // width and height are treated as a fraction and reduced.
+    const [w, h] = reduceDimensions(width, height);
+
+    setLockAspectRatio({ width: w, height: h });
+  };
+
+  return {
+    initializeLock,
+    isLocked,
+    lock: () => setIsLocked(true),
+    lockAspectRatio,
+    unlock: () => setIsLocked(false),
+  };
+};
+
+/**
+ * dimensionHooks()
+ * Returns an object of dimension-focused react hooks.
+ * @return {obj} - dimension hooks
+ *   {func} onImgLoad - initializes image dimension fields
+ *     @param {object} selection - selected image object with possible override dimensions.
+ *     @return {callback} - image load event callback that loads dimensions.
+ *   {object} locked - current locked state
+ *   {func} lock - lock current dimensions
+ *   {func} unlock - unlock dimensions
+ *   {object} value - current dimension values
+ *   {func} setHeight - set height
+ *     @param {string} - new height string
+ *   {func} setWidth - set width
+ *     @param {string} - new width string
+ *   {func} updateDimensions - set dimensions based on state
+ *   {obj} errorProps - props for user feedback error
+ *     {bool} isError - true if dimensions are blank
+ *     {func} setError - sets isError to true
+ *     {func} dismissError - sets isError to false
+ *     {bool} isHeightValid - true if height field is ready to save
+ *     {func} setHeightValid - sets isHeightValid to true
+ *     {func} setHeightNotValid - sets isHeightValid to false
+ *     {bool} isWidthValid - true if width field is ready to save
+ *     {func} setWidthValid - sets isWidthValid to true
+ *     {func} setWidthNotValid - sets isWidthValid to false
+ */
+export const dimensionHooks = (altTextHook) => {
+  const [dimensions, setDimensions] = module.state.dimensions(null);
+  const [local, setLocal] = module.state.local(null);
+
+  const setAll = ({ height, width, altText }) => {
+    if (altText === '' || altText) {
+      if (altText === '') {
+        altTextHook.setIsDecorative(true);
+      }
+      altTextHook.setValue(altText);
+    }
+    setDimensions({ height, width });
+    setLocal({ height, width });
+  };
+
+  const setHeight = (height) => {
+    if (height.match(/[0-9]+[%]{1}/)) {
+      const heightPercent = height.match(/[0-9]+[%]{1}/)[0];
+      setLocal({ ...local, height: heightPercent });
+    } else if (height.match(/[0-9]/)) {
+      setLocal({ ...local, height: parseInt(height, 10) });
+    }
+  };
+
+  const setWidth = (width) => {
+    if (width.match(/[0-9]+[%]{1}/)) {
+      const widthPercent = width.match(/[0-9]+[%]{1}/)[0];
+      setLocal({ ...local, width: widthPercent });
+    } else if (width.match(/[0-9]/)) {
+      setLocal({ ...local, width: parseInt(width, 10) });
+    }
+  };
+
+  const {
+    initializeLock,
+    isLocked,
+    lock,
+    lockAspectRatio,
+    unlock,
+  } = module.dimensionLockHooks({ dimensions });
+
+  return {
+    onImgLoad: (selection) => ({ target: img }) => {
+      const imageDims = { height: img.naturalHeight, width: img.naturalWidth };
+      setAll(selection.height ? selection : imageDims);
+      initializeLock(selection.height ? selection : imageDims);
+    },
+    isLocked,
+    lock,
+    unlock,
+    value: local,
+    setHeight,
+    setWidth,
+    updateDimensions: () => setAll(module.getValidDimensions({
+      dimensions,
+      local,
+      isLocked,
+      lockAspectRatio,
+    })),
+  };
+};
+
+/**
+ * altTextHooks(savedText)
+ * Returns a set of react hooks focused around alt text
+ * @return {obj} - alt text hooks
+ *   {string} value - alt text value
+ *   {func} setValue - set alt test value
+ *     @param {string} - new alt text
+ *   {bool} isDecorative - is the image decorative?
+ *   {func} setIsDecorative - set isDecorative field
+ *   {obj} error - error at top of page
+ *     {bool} show - is error being displayed?
+ *     {func} set - set show to true
+ *     {func} dismiss - set show to false
+ *   {obj} validation - local alt text error
+ *     {bool} show - is validation error being displayed?
+ *     {func} set - set validation to true
+ *     {func} dismiss - set validation to false
+ */
+export const altTextHooks = (savedText) => {
+  const [value, setValue] = module.state.altText(savedText || '');
+  const [isDecorative, setIsDecorative] = module.state.isDecorative(false);
+  const [showAltTextDismissibleError, setShowAltTextDismissibleError] = module.state.showAltTextDismissibleError(false);
+  const [showAltTextSubmissionError, setShowAltTextSubmissionError] = module.state.showAltTextSubmissionError(false);
+
+  const validateAltText = (newVal, newDecorative) => {
+    if (showAltTextSubmissionError) {
+      if (newVal || newDecorative) {
+        setShowAltTextSubmissionError(false);
+      }
+    }
+  };
+
+  return {
+    value,
+    setValue: (val) => {
+      setValue(val);
+      validateAltText(val, null);
+    },
+    isDecorative,
+    setIsDecorative: (decorative) => {
+      setIsDecorative(decorative);
+      validateAltText(null, decorative);
+    },
+    error: {
+      show: showAltTextDismissibleError,
+      set: () => setShowAltTextDismissibleError(true),
+      dismiss: () => setShowAltTextDismissibleError(false),
+    },
+    validation: {
+      show: showAltTextSubmissionError,
+      set: () => setShowAltTextSubmissionError(true),
+      dismiss: () => setShowAltTextSubmissionError(false),
+    },
+  };
+};
+
+/**
+ * onInputChange(handleValue)
+ * Simple event handler forwarding the event target value to a given callback
+ * @param {func} handleValue - event value handler
+ * @return {func} - evt callback that will call handleValue with the event target value.
+ */
+export const onInputChange = (handleValue) => (e) => handleValue(e.target.value);
+
+/**
+ * onCheckboxChange(handleValue)
+ * Simple event handler forwarding the event target checked prop to a given callback
+ * @param {func} handleValue - event value handler
+ * @return {func} - evt callback that will call handleValue with the event target checked prop.
+ */
+export const onCheckboxChange = (handleValue) => (e) => handleValue(e.target.checked);
+
+/**
+ * checkFormValidation({ altText, isDecorative, onAltTextFail })
+ * Handle saving the image context to the text editor
+ * @param {string} altText - image alt text
+ * @param {bool} isDecorative - is the image decorative?
+ * @param {func} onAltTextFail - called if alt text validation fails
+ */
+export const checkFormValidation = ({
+  altText,
+  isDecorative,
+  onAltTextFail,
+}) => {
+  if (!isDecorative && altText === '') {
+    onAltTextFail();
+    return false;
+  }
+  return true;
+};
+
+/**
+ * onSave({ altText, dimensions, isDecorative, saveToEditor })
+ * Handle saving the image context to the text editor
+ * @param {string} altText - image alt text
+ * @param {object} dimensions - image dimensions ({ width, height })
+ * @param {bool} isDecorative - is the image decorative?
+ * @param {func} saveToEditor - save method for submitting image settings.
+ */
+export const onSaveClick = ({
+  altText,
+  dimensions,
+  isDecorative,
+  saveToEditor,
+}) => () => {
+  if (module.checkFormValidation({
+    altText: altText.value,
+    isDecorative,
+    onAltTextFail: () => {
+      altText.error.set();
+      altText.validation.set();
+    },
+  })) {
+    altText.error.dismiss();
+    altText.validation.dismiss();
+    saveToEditor({
+      altText: altText.value,
+      dimensions,
+      isDecorative,
+    });
+  }
+};
diff --git a/src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/hooks.test.js b/src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/hooks.test.js
new file mode 100644
index 0000000000..bcac2ef658
--- /dev/null
+++ b/src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/hooks.test.js
@@ -0,0 +1,387 @@
+import React from 'react';
+import { StrictDict } from '../../../utils';
+import { MockUseState } from '../../../testUtils';
+import * as hooks from './hooks';
+
+jest.mock('react', () => ({
+  ...jest.requireActual('react'),
+  useEffect: jest.fn(),
+  useState: (val) => ({ useState: val }),
+}));
+
+const simpleDims = { width: 3, height: 4 };
+const reducedDims = { width: 7, height: 13 };
+const gcd = 7;
+const multiDims = {
+  width: reducedDims.width * gcd,
+  height: reducedDims.height * gcd,
+};
+
+const state = new MockUseState(hooks);
+
+const hookKeys = StrictDict(Object.keys(hooks).reduce(
+  (obj, key) => ({ ...obj, [key]: key }),
+  {},
+));
+
+let hook;
+
+const testVal = 'MY test VALUE';
+
+describe('state values', () => {
+  const testStateMethod = (key) => {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+    expect(hooks.state[key](testVal)).toEqual(React.useState(testVal));
+  };
+  test('provides altText state value', () => testStateMethod(state.keys.altText));
+  test('provides dimensions state value', () => testStateMethod(state.keys.dimensions));
+  test('provides showAltTextDismissibleError state value', () => testStateMethod(state.keys.showAltTextDismissibleError));
+  test('provides showAltTextSubmissionError state value', () => testStateMethod(state.keys.showAltTextSubmissionError));
+  test('provides isDecorative state value', () => testStateMethod(state.keys.isDecorative));
+  test('provides isLocked state value', () => testStateMethod(state.keys.isLocked));
+  test('provides local state value', () => testStateMethod(state.keys.local));
+  test('provides lockAspectRatio state value', () => testStateMethod(state.keys.lockAspectRatio));
+});
+
+describe('ImageSettingsModal hooks', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+  describe('dimensions-related hooks', () => {
+    describe('getValidDimensions', () => {
+      it('returns local dimensions if not locked', () => {
+        expect(hooks.getValidDimensions({
+          dimensions: simpleDims,
+          local: reducedDims,
+          isLocked: false,
+          lockAspectRatio: simpleDims,
+        })).toEqual(reducedDims);
+      });
+      it('returns local dimensions if the same as stored', () => {
+        expect(hooks.getValidDimensions({
+          dimensions: simpleDims,
+          local: simpleDims,
+          isLocked: true,
+          lockAspectRatio: reducedDims,
+        })).toEqual(simpleDims);
+      });
+      describe('valid change when aspect ratio is locked', () => {
+        describe(
+          'keeps changed dimension and keeps the other dimension proportional but rounded',
+          () => {
+            const [w, h] = [7, 13];
+
+            const testDimensions = (newDimensions, expected) => {
+              const dimensions = { width: w, height: h };
+              expect(hooks.getValidDimensions({
+                dimensions,
+                local: { width: newDimensions[0], height: newDimensions[1] },
+                lockAspectRatio: { ...dimensions },
+                isLocked: true,
+              })).toEqual({ width: expected[0], height: expected[1] });
+            };
+
+            it('if width is increased, increases and rounds height to stay proportional', () => {
+              testDimensions([8, h], [8, 15]);
+            });
+            it('if height is increased, increases and rounds width to stay proportional', () => {
+              testDimensions([w, 25], [13, 25]);
+            });
+            it('if width is decreased, decreases and rounds height to stay proportional', () => {
+              testDimensions([6, h], [6, 11]);
+            });
+            it('if height is decreased, decreases and rounds width to stay proportional', () => {
+              testDimensions([7, 10], [5, 10]);
+            });
+          },
+        );
+      });
+      it('calculates new dimensions proportionally and correctly when lock is active', () => {
+        expect(hooks.getValidDimensions({
+          dimensions: { width: 1517, height: 803 },
+          local: { width: 758, height: 803 },
+          isLocked: true,
+          lockAspectRatio: { width: 1517, height: 803 },
+        })).toEqual({ width: 758, height: 401 });
+      });
+    });
+    describe('dimensionLockHooks', () => {
+      beforeEach(() => {
+        state.mock();
+        hook = hooks.dimensionLockHooks({ dimensions: simpleDims });
+      });
+      afterEach(() => {
+        state.restore();
+      });
+      test('lockAspectRatio defaults to null', () => {
+        expect(hook.lockAspectRatio).toEqual(null);
+      });
+      test('isLocked defaults to true', () => {
+        expect(hook.isLocked).toEqual(true);
+      });
+      describe('initializeLock', () => {
+        it('calls setLockAspectRatio with the passed dimensions divided by their gcd', () => {
+          hook.initializeLock(multiDims);
+          expect(state.setState.lockAspectRatio).toHaveBeenCalledWith(reducedDims);
+        });
+        it('returns the values themselves if they have no gcd', () => {
+          jest.spyOn(hooks, hookKeys.findGcd).mockReturnValueOnce(1);
+          hook.initializeLock(simpleDims);
+          expect(state.setState.lockAspectRatio).toHaveBeenCalledWith(simpleDims);
+        });
+      });
+      test('lock sets isLocked to true', () => {
+        hook = hooks.dimensionLockHooks({ dimensions: simpleDims });
+        hook.lock();
+        expect(state.setState.isLocked).toHaveBeenCalledWith(true);
+      });
+      test('unlock sets locked to null', () => {
+        hook = hooks.dimensionLockHooks({ dimensions: simpleDims });
+        hook.unlock();
+        expect(state.setState.isLocked).toHaveBeenCalledWith(false);
+      });
+    });
+    describe('dimensionHooks', () => {
+      let lockHooks;
+      beforeEach(() => {
+        state.mock();
+        lockHooks = {
+          initializeLock: jest.fn(),
+          lock: jest.fn(),
+          unlock: jest.fn(),
+          locked: { ...reducedDims },
+        };
+        jest.spyOn(hooks, hookKeys.dimensionLockHooks).mockReturnValueOnce(lockHooks);
+        hook = hooks.dimensionHooks();
+      });
+      afterEach(() => {
+        state.restore();
+      });
+      it('initializes dimension lock hooks with incoming dimension value', () => {
+        state.mockVal(state.keys.dimensions, reducedDims);
+        hook = hooks.dimensionHooks();
+        expect(hooks.dimensionLockHooks).toHaveBeenCalledWith({ dimensions: reducedDims });
+      });
+      test('value is tied to local state', () => {
+        state.mockVal(state.keys.local, simpleDims);
+        hook = hooks.dimensionHooks();
+        expect(hook.value).toEqual(simpleDims);
+      });
+      describe('onImgLoad', () => {
+        const img = { naturalHeight: 200, naturalWidth: 345 };
+        const evt = { target: img };
+        it('calls initializeDimensions with selection dimensions if passed', () => {
+          hook.onImgLoad(simpleDims)(evt);
+          expect(state.setState.dimensions).toHaveBeenCalledWith(simpleDims);
+          expect(state.setState.local).toHaveBeenCalledWith(simpleDims);
+        });
+        it('calls initializeDimensions with target image dimensions if no selection', () => {
+          hook.onImgLoad({})(evt);
+          const expected = { width: img.naturalWidth, height: img.naturalHeight };
+          expect(state.setState.dimensions).toHaveBeenCalledWith(expected);
+          expect(state.setState.local).toHaveBeenCalledWith(expected);
+        });
+        it('calls initializeLock', () => {
+          const initializeDimensions = jest.fn();
+          hook.onImgLoad(initializeDimensions, simpleDims)(evt);
+          expect(lockHooks.initializeLock).toHaveBeenCalled();
+        });
+      });
+      describe('setHeight', () => {
+        it('sets local height to int value of argument', () => {
+          state.mockVal(state.keys.local, simpleDims);
+          hooks.dimensionHooks().setHeight('23.4');
+          expect(state.setState.local).toHaveBeenCalledWith({ ...simpleDims, height: 23 });
+        });
+      });
+      describe('setWidth', () => {
+        it('sets local width to int value of argument', () => {
+          state.mockVal(state.keys.local, simpleDims);
+          hooks.dimensionHooks().setWidth('34.5');
+          expect(state.setState.local).toHaveBeenCalledWith({ ...simpleDims, width: 34 });
+        });
+      });
+      describe('updateDimensions', () => {
+        it('sets local and stored dimensions to newDimensions output', () => {
+          // store values we care about under height or width, and add junk data to be stripped out.
+          const testDims = (args) => ({ ...simpleDims, height: args });
+          const getValidDimensions = (args) => ({ ...testDims(args), junk: 'data' });
+          state.mockVal(state.keys.isLocked, true);
+          state.mockVal(state.keys.dimensions, simpleDims);
+          state.mockVal(state.keys.lockAspectRatio, reducedDims);
+          state.mockVal(state.keys.local, multiDims);
+          jest.spyOn(hooks, hookKeys.getValidDimensions).mockImplementationOnce(getValidDimensions);
+          hook = hooks.dimensionHooks();
+          hook.updateDimensions();
+          const expected = testDims({
+            dimensions: simpleDims,
+            lockAspectRatio: reducedDims,
+            local: multiDims,
+            isLocked: true,
+          });
+          expect(state.setState.local).toHaveBeenCalledWith(expected);
+          expect(state.setState.dimensions).toHaveBeenCalledWith(expected);
+        });
+      });
+    });
+  });
+  describe('altTextHooks', () => {
+    const value = 'myVAL';
+    const isDecorative = true;
+    const showAltTextDismissibleError = true;
+    const showAltTextSubmissionError = true;
+    beforeEach(() => {
+      state.mock();
+      hook = hooks.altTextHooks();
+    });
+    afterEach(() => {
+      state.restore();
+    });
+    it('returns value and isDecorative', () => {
+      state.mockVal(state.keys.altText, value);
+      state.mockVal(state.keys.isDecorative, isDecorative);
+      hook = hooks.altTextHooks();
+      expect(hook.value).toEqual(value);
+      expect(hook.isDecorative).toEqual(isDecorative);
+    });
+    test('setValue sets value', () => {
+      state.mockVal(state.keys.altText, value);
+      hook = hooks.altTextHooks();
+      hook.setValue(value);
+      expect(state.setState.altText).toHaveBeenCalledWith(value);
+    });
+    test('setIsDecorative sets isDecorative', () => {
+      state.mockVal(state.keys.altText, value);
+      hook = hooks.altTextHooks();
+      hook.setIsDecorative(value);
+      expect(state.setState.isDecorative).toHaveBeenCalledWith(value);
+    });
+    describe('error', () => {
+      test('show is initialized to false and returns properly', () => {
+        expect(hook.error.show).toEqual(false);
+        state.mockVal(state.keys.showAltTextDismissibleError, showAltTextDismissibleError);
+        hook = hooks.altTextHooks();
+        expect(hook.error.show).toEqual(showAltTextDismissibleError);
+      });
+      test('set sets showAltTextDismissibleError to true', () => {
+        hook.error.set();
+        expect(state.setState.showAltTextDismissibleError).toHaveBeenCalledWith(true);
+      });
+      test('dismiss sets showAltTextDismissibleError to false', () => {
+        hook.error.dismiss();
+        expect(state.setState.showAltTextDismissibleError).toHaveBeenCalledWith(false);
+      });
+    });
+    describe('validation', () => {
+      test('show is initialized to false and returns properly', () => {
+        expect(hook.validation.show).toEqual(false);
+        state.mockVal(state.keys.showAltTextSubmissionError, showAltTextSubmissionError);
+        hook = hooks.altTextHooks();
+        expect(hook.validation.show).toEqual(showAltTextSubmissionError);
+      });
+      test('set sets showAltTextSubmissionError to true', () => {
+        hook.validation.set();
+        expect(state.setState.showAltTextSubmissionError).toHaveBeenCalledWith(true);
+      });
+      test('dismiss sets showAltTextSubmissionError to false', () => {
+        hook.validation.dismiss();
+        expect(state.setState.showAltTextSubmissionError).toHaveBeenCalledWith(false);
+      });
+    });
+  });
+  describe('onInputChange', () => {
+    it('calls handleValue with event value prop', () => {
+      const value = 'TEST value';
+      const onChange = jest.fn();
+      hooks.onInputChange(onChange)({ target: { value } });
+      expect(onChange).toHaveBeenCalledWith(value);
+    });
+  });
+  describe('onCheckboxChange', () => {
+    it('calls handleValue with event checked prop', () => {
+      const checked = 'TEST value';
+      const onChange = jest.fn();
+      hooks.onCheckboxChange(onChange)({ target: { checked } });
+      expect(onChange).toHaveBeenCalledWith(checked);
+    });
+  });
+  describe('checkFormValidation', () => {
+    const props = {
+      onAltTextFail: jest.fn().mockName('onAltTextFail'),
+    };
+    beforeEach(() => {
+      props.altText = '';
+      props.isDecorative = false;
+    });
+    it('calls onAltTextFail when isDecorative is false and altText is an empty string', () => {
+      hooks.checkFormValidation({ ...props });
+      expect(props.onAltTextFail).toHaveBeenCalled();
+    });
+    it('returns false when isDeocrative is false and altText is an empty string', () => {
+      expect(hooks.checkFormValidation({ ...props })).toEqual(false);
+    });
+    it('returns true when isDecorative is true', () => {
+      props.isDecorative = true;
+      expect(hooks.checkFormValidation({ ...props })).toEqual(true);
+    });
+  });
+  describe('onSaveClick', () => {
+    const props = {
+      altText: {
+        error: {
+          show: true,
+          set: jest.fn(),
+          dismiss: jest.fn(),
+        },
+        validation: {
+          show: true,
+          set: jest.fn(),
+          dismiss: jest.fn(),
+        },
+      },
+      dimensions: simpleDims,
+      saveToEditor: jest.fn().mockName('saveToEditor'),
+    };
+    beforeEach(() => {
+      props.altText.value = 'What is this?';
+      props.isDecorative = false;
+    });
+    it('calls checkFormValidation', () => {
+      jest.spyOn(hooks, hookKeys.checkFormValidation);
+      hooks.onSaveClick({ ...props })();
+      expect(hooks.checkFormValidation).toHaveBeenCalled();
+    });
+    it('calls saveToEditor with dimensions, altText and isDecorative when checkFormValidation is true', () => {
+      jest.spyOn(hooks, hookKeys.checkFormValidation).mockReturnValueOnce(true);
+      hooks.onSaveClick({ ...props })();
+      expect(props.saveToEditor).toHaveBeenCalledWith({
+        altText: props.altText.value,
+        dimensions: props.dimensions,
+        isDecorative: props.isDecorative,
+      });
+    });
+    it('calls dismissError and sets showAltTextSubmissionError to false when checkFormValidation is true', () => {
+      jest.spyOn(hooks, hookKeys.checkFormValidation).mockReturnValueOnce(true);
+      hooks.onSaveClick({ ...props })();
+      expect(props.altText.error.dismiss).toHaveBeenCalled();
+      expect(props.altText.validation.dismiss).toHaveBeenCalled();
+    });
+    it('does not call saveEditor when checkFormValidation is false', () => {
+      jest.spyOn(hooks, hookKeys.checkFormValidation).mockReturnValueOnce(false);
+      hooks.onSaveClick({ ...props })();
+      expect(props.saveToEditor).not.toHaveBeenCalled();
+    });
+  });
+  describe('findGcd', () => {
+    it('should return correct gcd', () => {
+      expect(hooks.findGcd(9, 12)).toBe(3);
+      expect(hooks.findGcd(3, 4)).toBe(1);
+    });
+  });
+  describe('reduceDimensions', () => {
+    it('should return correct gcd', () => {
+      expect(hooks.reduceDimensions(9, 12)).toEqual([3, 4]);
+      expect(hooks.reduceDimensions(7, 8)).toEqual([7, 8]);
+    });
+  });
+});
diff --git a/src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/index.jsx b/src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/index.jsx
new file mode 100644
index 0000000000..da0073f514
--- /dev/null
+++ b/src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/index.jsx
@@ -0,0 +1,106 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Button, Image } from '@openedx/paragon';
+import { ArrowBackIos } from '@openedx/paragon/icons';
+import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+
+import './index.scss';
+import * as hooks from './hooks';
+import messages from './messages';
+import BaseModal from '../../BaseModal';
+import AltTextControls from './AltTextControls';
+import DimensionControls from './DimensionControls';
+import ErrorAlert from '../../ErrorAlerts/ErrorAlert';
+
+/**
+ * Modal display wrapping the dimension and alt-text controls for image tags
+ * inserted into the TextEditor TinyMCE context.
+ * Provides a thumbnail and populates dimension and alt-text controls.
+ * @param {bool} isOpen - is the modal open?
+ * @param {func} close - close the modal
+ * @param {obj} selection - current image selection object
+ * @param {func} saveToEditor - save the current settings to the editor
+ * @param {func} returnToSelection - return to image selection
+ */
+const ImageSettingsModal = ({
+  close,
+  isOpen,
+  returnToSelection,
+  saveToEditor,
+  selection,
+  // inject
+  intl,
+}) => {
+  const altText = hooks.altTextHooks(selection.altText);
+  const dimensions = hooks.dimensionHooks(altText);
+  const onSaveClick = hooks.onSaveClick({
+    altText,
+    dimensions: dimensions.value,
+    isDecorative: altText.isDecorative,
+    saveToEditor,
+  });
+  return (
+    <BaseModal
+      close={close}
+      confirmAction={(
+        <Button
+          variant="primary"
+          onClick={onSaveClick}
+        >
+          <FormattedMessage {...messages.saveButtonLabel} />
+        </Button>
+      )}
+      isOpen={isOpen}
+      title={intl.formatMessage(messages.titleLabel)}
+    >
+      <ErrorAlert
+        dismissError={altText.error.dismiss}
+        hideHeading
+        isError={altText.error.show}
+      >
+        <FormattedMessage {...messages.altTextError} />
+      </ErrorAlert>
+      <Button
+        iconBefore={ArrowBackIos}
+        onClick={returnToSelection}
+        size="inline"
+        variant="link"
+      >
+        <FormattedMessage {...messages.replaceImageButtonLabel} />
+      </Button>
+      <br />
+      <div className="d-flex flex-row m-2 img-settings-form-container">
+        <div className="img-settings-thumbnail-container">
+          <Image
+            className="img-settings-thumbnail"
+            onError={dimensions.onImgLoad(selection)}
+            onLoad={dimensions.onImgLoad(selection)}
+            src={selection.externalUrl}
+          />
+        </div>
+        <hr className="h-100 bg-primary-200 m-0" />
+        <div className="img-settings-form-controls">
+          <DimensionControls {...dimensions} />
+          <AltTextControls {...altText} />
+        </div>
+      </div>
+    </BaseModal>
+  );
+};
+
+ImageSettingsModal.propTypes = {
+  close: PropTypes.func.isRequired,
+  isOpen: PropTypes.bool.isRequired,
+  returnToSelection: PropTypes.func.isRequired,
+  saveToEditor: PropTypes.func.isRequired,
+  selection: PropTypes.shape({
+    altText: PropTypes.string,
+    externalUrl: PropTypes.string,
+    url: PropTypes.string,
+  }).isRequired,
+  // inject
+  intl: intlShape.isRequired,
+};
+export const ImageSettingsModalInternal = ImageSettingsModal; // For testing only
+export default injectIntl(ImageSettingsModal);
diff --git a/src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/index.scss b/src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/index.scss
new file mode 100644
index 0000000000..d50b5e81d1
--- /dev/null
+++ b/src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/index.scss
@@ -0,0 +1,34 @@
+.img-settings-form-container {
+  .img-settings-thumbnail-container {
+    width: 282px;
+
+    .img-settings-thumbnail {
+      margin-left: 32px;
+      max-height: 250px;
+      max-width: 250px;
+    }
+  }
+
+  hr {
+    width: 1px;
+  }
+
+  .img-settings-form-controls {
+    width: 375px;
+    margin: 0 24px;
+
+    .dimension-input {
+      width: 145px;
+      margin-right: 15px;
+      display: inline-block;
+    }
+
+    .img-settings-control-label {
+      font-size: 1rem;
+    }
+
+    .decorative-control-label label {
+      font-size: .75rem;
+    }
+  }
+}
diff --git a/src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/index.test.jsx b/src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/index.test.jsx
new file mode 100644
index 0000000000..f6d378ccfa
--- /dev/null
+++ b/src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/index.test.jsx
@@ -0,0 +1,50 @@
+import 'CourseAuthoring/editors/setupEditorTest';
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+
+import { formatMessage } from '../../../testUtils';
+import { ImageSettingsModalInternal as ImageSettingsModal } from '.';
+
+jest.mock('./AltTextControls', () => 'AltTextControls');
+jest.mock('./DimensionControls', () => 'DimensionControls');
+
+jest.mock('./hooks', () => ({
+  altTextHooks: () => ({
+    error: {
+      show: true,
+      dismiss: jest.fn(),
+    },
+    isDecorative: false,
+    value: 'alternative Taxes',
+  }),
+  dimensionHooks: () => ({
+    onImgLoad: jest.fn(
+      (selection) => ({ 'hooks.dimensions.onImgLoad.callback': { selection } }),
+    ).mockName('hooks.dimensions.onImgLoad'),
+    value: { width: 12, height: 13 },
+  }),
+  onSaveClick: (args) => ({ 'hooks.onSaveClick': args }),
+}));
+
+describe('ImageSettingsModal', () => {
+  const props = {
+    isOpen: false,
+    selection: {
+      altText: 'AlTTExt',
+      externalUrl: 'ExtERNALurL',
+      url: 'UrL',
+    },
+    // inject
+    intl: { formatMessage },
+  };
+  beforeEach(() => {
+    props.close = jest.fn().mockName('props.close');
+    props.saveToEditor = jest.fn().mockName('props.saveToEditor');
+    props.returnToSelection = jest.fn().mockName('props.returnToSelector');
+  });
+  describe('render', () => {
+    test('snapshot', () => {
+      expect(shallow(<ImageSettingsModal {...props} />).snapshot).toMatchSnapshot();
+    });
+  });
+});
diff --git a/src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/messages.js b/src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/messages.js
new file mode 100644
index 0000000000..a20a492a01
--- /dev/null
+++ b/src/editors/sharedComponents/ImageUploadModal/ImageSettingsModal/messages.js
@@ -0,0 +1,94 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+
+  // index
+  titleLabel: {
+    id: 'authoring.texteditor.imagesettingsmodal.titleLabel',
+    defaultMessage: 'Image Settings',
+    description: 'Label title for image settings modal.',
+  },
+  saveButtonLabel: {
+    id: 'authoring.texteditor.imagesettingsmodal.saveButtonLabel',
+    defaultMessage: 'Save',
+    description: 'Label for save button.',
+  },
+  replaceImageButtonLabel: {
+    id: 'authoring.texteditor.imagesettingsmodal.replaceImageButtonLabel',
+    defaultMessage: 'Replace image',
+    description: 'Label for replace image button.',
+  },
+
+  // DimensionControls
+  imageDimensionsLabel: {
+    id: 'authoring.texteditor.imagesettingsmodal.imageDimensionsLabel',
+    defaultMessage: 'Image Dimensions',
+    description: 'Label title for the image dimensions section.',
+  },
+  widthFloatingLabel: {
+    id: 'authoring.texteditor.imagesettingsmodal.widthFloatingLabel',
+    defaultMessage: 'Width',
+    description: 'Floating label for width input.',
+  },
+  heightFloatingLabel: {
+    id: 'authoring.texteditor.imagesettingsmodal.heightFloatingLabel',
+    defaultMessage: 'Height',
+    description: 'Floating label for height input.',
+  },
+  unlockDimensionsLabel: {
+    id: 'authoring.texteditor.imagesettingsmodal.unlockDimensionsLabel',
+    defaultMessage: 'unlock dimensions',
+    description: 'Label for button when unlocking dimensions.',
+  },
+  lockDimensionsLabel: {
+    id: 'authoring.texteditor.imagesettingsmodal.lockDimensionsLabel',
+    defaultMessage: 'lock dimensions',
+    description: 'Label for button when locking dimensions.',
+  },
+  decorativeDimensionCheckboxLabel: {
+    id: 'authoring.texteditor.imagesettingsmodal.decorativeDimensionCheckboxLabel',
+    defaultMessage: "Use percentages for the image's width and height",
+    description: 'Checkbox label for whether or not an image uses percentages for width and height.',
+  },
+
+  // AltTextControls
+  accessibilityLabel: {
+    id: 'authoring.texteditor.imagesettingsmodal.accessibilityLabel',
+    defaultMessage: 'Accessibility',
+    description: 'Label title for accessibility section.',
+  },
+  altTextFloatingLabel: {
+    id: 'authoring.texteditor.imagesettingsmodal.altTextFloatingLabel',
+    defaultMessage: 'Alt Text',
+    description: 'Floating label title for alt text input.',
+  },
+  decorativeAltTextCheckboxLabel: {
+    id: 'authoring.texteditor.imagesettingsmodal.decorativeAltTextCheckboxLabel',
+    defaultMessage: 'This image is decorative (no alt text required).',
+    description: 'Checkbox label for whether or not an image is decorative.',
+  },
+
+  // User Feedback Errors
+  altTextError: {
+    id: 'authoring.texteditor.imagesettingsmodal.error.altTextError',
+    defaultMessage: 'Enter alt text or specify that the image is decorative only.',
+    description: 'Message presented to user when user attempts to save unaccepted altText configuration.',
+  },
+  altTextLocalFeedback: {
+    id: 'authoring.texteditor.imagesettingsmodal.error.altTextLocalFeedback',
+    defaultMessage: 'Enter alt text',
+    description: 'Message feedback for user below the alt text field.',
+  },
+  dimensionError: {
+    id: 'authoring.texteditor.imagesettingsmodal.error.dimensionError',
+    defaultMessage: 'Dimension values must be less than or equal to 100.',
+    description: 'Message presented to user when user attempts to save unaccepted dimension configuration.',
+  },
+  dimensionLocalFeedback: {
+    id: 'authoring.texteditor.imagesettingsmodal.error.dimensionFeedback',
+    defaultMessage: 'Enter a value less than or equal to 100.',
+    description: 'Message feedback for user below the dimension fields.',
+  },
+});
+
+export default messages;
diff --git a/src/editors/sharedComponents/ImageUploadModal/SelectImageModal/__snapshots__/index.test.jsx.snap b/src/editors/sharedComponents/ImageUploadModal/SelectImageModal/__snapshots__/index.test.jsx.snap
new file mode 100644
index 0000000000..f94b18b185
--- /dev/null
+++ b/src/editors/sharedComponents/ImageUploadModal/SelectImageModal/__snapshots__/index.test.jsx.snap
@@ -0,0 +1,96 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SelectImageModal component snapshot 1`] = `
+<SelectionModal
+  acceptedFiles={
+    {
+      "gif": ".gif",
+      "ico": ".ico",
+      "jpeg": ".jpeg",
+      "jpg": ".jpg",
+      "png": ".png",
+      "svg": ".svg",
+      "tif": ".tif",
+      "tiff": ".tiff",
+      "webp": ".webp",
+    }
+  }
+  close={[MockFunction props.close]}
+  fileInput={
+    {
+      "addFile": "imgHooks.fileInput.addFile",
+      "click": "imgHooks.fileInput.click",
+      "ref": "imgHooks.fileInput.ref",
+    }
+  }
+  galleryError={
+    {
+      "dismiss": [MockFunction],
+      "message": {
+        "defaultMessage": "Gallery error",
+        "description": "Gallery error",
+        "id": "Gallery error id",
+      },
+      "set": [MockFunction],
+      "show": "ShoWERror gAlLery",
+    }
+  }
+  galleryProps={
+    {
+      "gallery": "props",
+    }
+  }
+  inputError={
+    {
+      "dismiss": [MockFunction],
+      "message": {
+        "defaultMessage": "Input error",
+        "description": "Input error",
+        "id": "Input error id",
+      },
+      "set": [MockFunction],
+      "show": "ShoWERror inPUT",
+    }
+  }
+  isOpen={true}
+  modalMessages={
+    {
+      "confirmMsg": {
+        "defaultMessage": "Next",
+        "description": "Label for Next button",
+        "id": "authoring.texteditor.selectimagemodal.next.label",
+      },
+      "fetchError": {
+        "defaultMessage": "Failed to obtain images. Please try again.",
+        "description": "Message presented to user when images are not found",
+        "id": "authoring.texteditor.selectimagemodal.error.fetchImagesError",
+      },
+      "titleMsg": {
+        "defaultMessage": "Add an image",
+        "description": "Title for the select image modal",
+        "id": "authoring.texteditor.selectimagemodal.title.label",
+      },
+      "uploadButtonMsg": {
+        "defaultMessage": "Upload a new image (10 MB max)",
+        "description": "Label for upload button",
+        "id": "authoring.texteditor.selectimagemodal.upload.label",
+      },
+      "uploadError": {
+        "defaultMessage": "Failed to upload image. Please try again.",
+        "description": "Message presented to user when image fails to upload",
+        "id": "authoring.texteditor.selectimagemodal.error.uploadImageError",
+      },
+    }
+  }
+  searchSortProps={
+    {
+      "search": "sortProps",
+    }
+  }
+  selectBtnProps={
+    {
+      "select": "btnProps",
+    }
+  }
+/>
+`;
diff --git a/src/editors/sharedComponents/ImageUploadModal/SelectImageModal/hooks.js b/src/editors/sharedComponents/ImageUploadModal/SelectImageModal/hooks.js
new file mode 100644
index 0000000000..92a1f513ef
--- /dev/null
+++ b/src/editors/sharedComponents/ImageUploadModal/SelectImageModal/hooks.js
@@ -0,0 +1,183 @@
+import React from 'react';
+import { useDispatch } from 'react-redux';
+
+import { thunkActions } from '../../../data/redux';
+// This 'module' self-import hack enables mocking during tests.
+// See src/editors/decisions/0005-internal-editor-testability-decisions.md. The whole approach to how hooks are tested
+// should be re-thought and cleaned up to avoid this pattern.
+// eslint-disable-next-line import/no-self-import
+import * as module from './hooks';
+import { sortFunctions, sortKeys, sortMessages } from './utils';
+import messages from './messages';
+
+export const state = {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  highlighted: (val) => React.useState(val),
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  showSelectImageError: (val) => React.useState(val),
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  searchString: (val) => React.useState(val),
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  sortBy: (val) => React.useState(val),
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  showSizeError: (val) => React.useState(val),
+};
+
+export const searchAndSortHooks = () => {
+  const [searchString, setSearchString] = module.state.searchString('');
+  const [sortBy, setSortBy] = module.state.sortBy(sortKeys.dateNewest);
+  return {
+    searchString,
+    onSearchChange: (e) => setSearchString(e.target.value),
+    clearSearchString: () => setSearchString(''),
+    sortBy,
+    onSortClick: (key) => () => setSortBy(key),
+    sortKeys,
+    sortMessages,
+  };
+};
+
+export const filteredList = ({ searchString, imageList }) => (
+  imageList.filter(({ displayName }) => displayName?.toLowerCase().includes(searchString?.toLowerCase()))
+);
+
+export const displayList = ({ sortBy, searchString, images }) => (
+  module.filteredList({
+    searchString,
+    imageList: images,
+  }).sort(sortFunctions[sortBy in sortKeys ? sortKeys[sortBy] : sortKeys.dateNewest]));
+
+export const imgListHooks = ({
+  searchSortProps,
+  setSelection,
+  images,
+  imageCount,
+}) => {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const dispatch = useDispatch();
+  const [highlighted, setHighlighted] = module.state.highlighted(null);
+  const [
+    showSelectImageError,
+    setShowSelectImageError,
+  ] = module.state.showSelectImageError(false);
+  const [showSizeError, setShowSizeError] = module.state.showSizeError(false);
+  const list = module.displayList({ ...searchSortProps, images });
+
+  return {
+    galleryError: {
+      show: showSelectImageError,
+      set: () => setShowSelectImageError(true),
+      dismiss: () => setShowSelectImageError(false),
+      message: messages.selectImageError,
+    },
+    inputError: {
+      show: showSizeError,
+      set: () => setShowSizeError(true),
+      dismiss: () => setShowSizeError(false),
+      message: messages.fileSizeError,
+    },
+    images,
+    galleryProps: {
+      galleryIsEmpty: Object.keys(images).length === 0,
+      searchIsEmpty: list.length === 0,
+      displayList: list,
+      highlighted,
+      onHighlightChange: (e) => setHighlighted(e.target.value),
+      emptyGalleryLabel: messages.emptyGalleryLabel,
+      allowLazyLoad: true,
+      fetchNextPage: ({ pageNumber }) => dispatch(thunkActions.app.fetchImages({ pageNumber })),
+      assetCount: imageCount,
+    },
+    // highlight by id
+    selectBtnProps: {
+      onClick: () => {
+        if (highlighted) {
+          const highlightedImage = images.find(image => image.id === highlighted);
+          setSelection(highlightedImage);
+        } else {
+          setShowSelectImageError(true);
+        }
+      },
+    },
+  };
+};
+
+export const checkValidFileSize = ({
+  selectedFile,
+  clearSelection,
+  onSizeFail,
+}) => {
+  // Check if the file size is greater than 10 MB, upload size limit
+  if (selectedFile.size > 10000000) {
+    clearSelection();
+    onSizeFail();
+    return false;
+  }
+  return true;
+};
+
+export const fileInputHooks = ({ setSelection, clearSelection, imgList }) => {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const dispatch = useDispatch();
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const ref = React.useRef();
+  const click = () => ref.current.click();
+  const addFile = (e) => {
+    const selectedFile = e.target.files[0];
+    if (selectedFile && module.checkValidFileSize({
+      selectedFile,
+      clearSelection,
+      onSizeFail: () => {
+        imgList.inputError.set();
+      },
+    })) {
+      dispatch(
+        thunkActions.app.uploadAsset({
+          file: selectedFile,
+          setSelection,
+        }),
+      );
+    }
+  };
+
+  return {
+    click,
+    addFile,
+    ref,
+  };
+};
+
+export const imgHooks = ({
+  setSelection,
+  clearSelection,
+  images,
+  imageCount,
+}) => {
+  const searchSortProps = module.searchAndSortHooks();
+  const imgList = module.imgListHooks({
+    setSelection,
+    searchSortProps,
+    images,
+    imageCount,
+  });
+  const fileInput = module.fileInputHooks({
+    setSelection,
+    clearSelection,
+    imgList,
+  });
+  const {
+    galleryError,
+    galleryProps,
+    inputError,
+    selectBtnProps,
+  } = imgList;
+
+  return {
+    galleryError,
+    inputError,
+    fileInput,
+    galleryProps,
+    searchSortProps,
+    selectBtnProps,
+  };
+};
diff --git a/src/editors/sharedComponents/ImageUploadModal/SelectImageModal/hooks.test.js b/src/editors/sharedComponents/ImageUploadModal/SelectImageModal/hooks.test.js
new file mode 100644
index 0000000000..4029bd9f0d
--- /dev/null
+++ b/src/editors/sharedComponents/ImageUploadModal/SelectImageModal/hooks.test.js
@@ -0,0 +1,328 @@
+import React from 'react';
+import { dispatch } from 'react-redux';
+
+import { MockUseState } from '../../../testUtils';
+import { keyStore } from '../../../utils';
+import { thunkActions } from '../../../data/redux';
+
+import * as hooks from './hooks';
+import { sortFunctions, sortKeys } from './utils';
+
+jest.mock('react', () => ({
+  ...jest.requireActual('react'),
+  useRef: jest.fn(val => ({ current: val })),
+  useEffect: jest.fn(),
+  useCallback: (cb, prereqs) => ({ cb, prereqs }),
+}));
+
+jest.mock('react-redux', () => {
+  const dispatchFn = jest.fn();
+  return {
+    ...jest.requireActual('react-redux'),
+    dispatch: dispatchFn,
+    useDispatch: jest.fn(() => dispatchFn),
+  };
+});
+
+jest.mock('../../../data/redux', () => ({
+  thunkActions: {
+    app: {
+      uploadAsset: jest.fn(),
+    },
+  },
+}));
+
+const state = new MockUseState(hooks);
+const hookKeys = keyStore(hooks);
+let hook;
+const testValue = 'testVALUEVALIDIMAGE';
+const testValueInvalidImage = { value: 'testVALUEVALIDIMAGE', size: 90000000 };
+
+describe('SelectImageModal hooks', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+  describe('state hooks', () => {
+    state.testGetter(state.keys.highlighted);
+    state.testGetter(state.keys.showSelectImageError);
+    state.testGetter(state.keys.searchString);
+    state.testGetter(state.keys.sortBy);
+    state.testGetter(state.keys.showSizeError);
+  });
+
+  describe('using state', () => {
+    beforeEach(() => { state.mock(); });
+    afterEach(() => { state.restore(); });
+
+    describe('searchAndSortHooks', () => {
+      beforeEach(() => {
+        hook = hooks.searchAndSortHooks();
+      });
+      it('returns searchString value, initialized to an empty string', () => {
+        expect(state.stateVals.searchString).toEqual(hook.searchString);
+        expect(state.stateVals.searchString).toEqual('');
+      });
+      it('returns highlighted value, initialized to dateNewest', () => {
+        expect(state.stateVals.sortBy).toEqual(hook.sortBy);
+        expect(state.stateVals.sortBy).toEqual(sortKeys.dateNewest);
+      });
+      test('onSearchChange sets searchString with event target value', () => {
+        hook.onSearchChange({ target: { value: testValue } });
+        expect(state.setState.searchString).toHaveBeenCalledWith(testValue);
+      });
+      test('clearSearchString sets search string to empty string', () => {
+        hook.clearSearchString();
+        expect(state.setState.searchString).toHaveBeenCalledWith('');
+      });
+      test('onSortClick takes a key and returns callback to set sortBY to that key', () => {
+        hook.onSortClick(testValue);
+        expect(state.setState.sortBy).not.toHaveBeenCalled();
+        hook.onSortClick(testValue)();
+        expect(state.setState.sortBy).toHaveBeenCalledWith(testValue);
+      });
+    });
+    describe('filteredList', () => {
+      const matching = [
+        'test',
+        'TEst',
+        'eeees',
+        'essSSSS',
+      ];
+      const notMatching = ['bad', 'other', 'bad stuff'];
+      const searchString = 'eS';
+      test('returns list filtered lowercase by displayName', () => {
+        const filter = jest.fn(cb => ({ filter: cb }));
+        hook = hooks.filteredList({ searchString, imageList: { filter } });
+        expect(filter).toHaveBeenCalled();
+        const [[filterCb]] = filter.mock.calls;
+        matching.forEach(val => expect(filterCb({ displayName: val })).toEqual(true));
+        notMatching.forEach(val => expect(filterCb({ displayName: val })).toEqual(false));
+      });
+    });
+    describe('displayList', () => {
+      const props = {
+        images: ['data1', 'data2', 'other distinct data'],
+        sortBy: sortKeys.dateNewest,
+        searchString: 'test search string',
+
+      };
+      const load = (loadProps = {}) => {
+        jest.spyOn(hooks, hookKeys.filteredList).mockImplementationOnce(
+          ({ searchString, imageList }) => ({
+            sort: (cb) => ({ filteredList: { searchString, imageList }, sort: { cb } }),
+          }),
+        );
+        hook = hooks.displayList({ ...props, ...loadProps });
+      };
+      it('returns a sorted filtered list, based on the searchString and imageList values', () => {
+        load();
+        expect(hook.filteredList.searchString).toEqual(props.searchString);
+        expect(hook.filteredList.imageList).toEqual(Object.values(props.images));
+      });
+      describe('sort behavior', () => {
+        Object.keys(sortKeys).forEach(key => {
+          test(`it sorts by ${key} when selected`, () => {
+            load({ sortBy: sortKeys[key] });
+            expect(hook.sort).toEqual({ cb: sortFunctions[key] });
+          });
+        });
+        test('defaults to sorting by dateNewest', () => {
+          load();
+          expect(hook.sort).toEqual({ cb: sortFunctions.dateNewest });
+        });
+      });
+    });
+    describe('imgListHooks outputs', () => {
+      const props = {
+        setSelection: jest.fn(),
+        searchSortProps: { searchString: 'Es', sortBy: sortKeys.dateNewest },
+        images: [
+          {
+            displayName: 'sOmEuiMAge',
+            staTICUrl: '/assets/sOmEuiMAge',
+            id: 'sOmEuiMAgeURl',
+          },
+        ],
+      };
+      const displayList = (args) => ({ displayList: args });
+      const load = () => {
+        jest.spyOn(hooks, hookKeys.displayList).mockImplementationOnce(displayList);
+        hook = hooks.imgListHooks(props);
+      };
+      beforeEach(() => {
+        load();
+      });
+      describe('selectBtnProps', () => {
+        test('on click, if sets selection to the image with the same id', () => {
+          const highlighted = 'sOmEuiMAgeURl';
+          const highlightedValue = { displayName: 'sOmEuiMAge', staTICUrl: '/assets/sOmEuiMAge', id: 'sOmEuiMAgeURl' };
+          state.mockVal(state.keys.highlighted, highlighted);
+          load();
+          expect(props.setSelection).not.toHaveBeenCalled();
+          hook.selectBtnProps.onClick();
+          expect(props.setSelection).toHaveBeenCalledWith(highlightedValue);
+        });
+        test('on click, sets showSelectImageError to true if nothing is highlighted', () => {
+          state.mockVal(state.keys.highlighted, null);
+          load();
+          hook.selectBtnProps.onClick();
+          expect(props.setSelection).not.toHaveBeenCalled();
+          expect(state.setState.showSelectImageError).toHaveBeenCalledWith(true);
+        });
+      });
+      describe('galleryProps', () => {
+        it('returns highlighted value, initialized to null', () => {
+          expect(hook.galleryProps.highlighted).toEqual(state.stateVals.highlighted);
+          expect(state.stateVals.highlighted).toEqual(null);
+        });
+        test('onHighlightChange sets highlighted with event target value', () => {
+          hook.galleryProps.onHighlightChange({ target: { value: testValue } });
+          expect(state.setState.highlighted).toHaveBeenCalledWith(testValue);
+        });
+        test('displayList returns displayListhook called with searchSortProps and images', () => {
+          expect(hook.galleryProps.displayList).toEqual(displayList({
+            ...props.searchSortProps,
+            images: props.images,
+          }));
+        });
+      });
+      describe('galleryError', () => {
+        test('show is initialized to false and returns properly', () => {
+          const show = 'sHOWSelectiMaGEeRROr';
+          expect(hook.galleryError.show).toEqual(false);
+          state.mockVal(state.keys.showSelectImageError, show);
+          hook = hooks.imgListHooks(props);
+          expect(hook.galleryError.show).toEqual(show);
+        });
+        test('set sets showSelectImageError to true', () => {
+          hook.galleryError.set();
+          expect(state.setState.showSelectImageError).toHaveBeenCalledWith(true);
+        });
+        test('dismiss sets showSelectImageError to false', () => {
+          hook.galleryError.dismiss();
+          expect(state.setState.showSelectImageError).toHaveBeenCalledWith(false);
+        });
+        // TODO
+        // it('returns selectImageError value, initialized to false', () => {
+        //   expect(hook.selectImageErrorProps.isError).toEqual(state.stateVals.isSelectImageError);
+        //   expect(state.stateVals.isSelectImageError).toEqual(false);
+        // });
+        // test('dismissError sets selectImageError to false', () => {
+        //   hook.selectImageErrorProps.dismissError();
+        //   expect(state.setState.isSelectImageError).toHaveBeenCalledWith(false);
+        // });
+      });
+    });
+  });
+  describe('checkValidFileSize', () => {
+    const selectedFileFail = testValueInvalidImage;
+    const selectedFileSuccess = { value: testValue, size: 2000 };
+    const clearSelection = jest.fn();
+    const onSizeFail = jest.fn();
+    it('returns false for valid file size ', () => {
+      hook = hooks.checkValidFileSize({ selectedFile: selectedFileFail, clearSelection, onSizeFail });
+      expect(clearSelection).toHaveBeenCalled();
+      expect(onSizeFail).toHaveBeenCalled();
+      expect(hook).toEqual(false);
+    });
+    it('returns true for valid file size', () => {
+      hook = hooks.checkValidFileSize({ selectedFile: selectedFileSuccess, clearSelection, onSizeFail });
+      expect(hook).toEqual(true);
+    });
+  });
+  describe('fileInputHooks', () => {
+    const setSelection = jest.fn();
+    const clearSelection = jest.fn();
+    const imgList = { inputError: { show: true, dismiss: jest.fn(), set: jest.fn() } };
+    const spies = {};
+    beforeEach(() => {
+      hook = hooks.fileInputHooks({ setSelection, clearSelection, imgList });
+    });
+    it('returns a ref for the file input', () => {
+      expect(hook.ref).toEqual({ current: undefined });
+    });
+    test('click calls current.click on the ref', () => {
+      const click = jest.fn();
+      React.useRef.mockReturnValueOnce({ current: { click } });
+      hook = hooks.fileInputHooks({ setSelection });
+      hook.click();
+      expect(click).toHaveBeenCalled();
+    });
+    describe('addFile (uploadAsset args)', () => {
+      const eventSuccess = { target: { files: [{ value: testValue, size: 2000 }] } };
+      const eventFailure = { target: { files: [testValueInvalidImage] } };
+      it('image fails to upload if file size is greater than 1000000', () => {
+        const checkValidFileSize = false;
+        spies.checkValidFileSize = jest.spyOn(hooks, hookKeys.checkValidFileSize)
+          .mockReturnValueOnce(checkValidFileSize);
+        hook.addFile(eventFailure);
+        expect(spies.checkValidFileSize.mock.calls.length).toEqual(1);
+        expect(spies.checkValidFileSize).toHaveReturnedWith(false);
+      });
+      it('dispatches uploadAsset thunkAction with the first target file and setSelection', () => {
+        const checkValidFileSize = true;
+        spies.checkValidFileSize = jest.spyOn(hooks, hookKeys.checkValidFileSize)
+          .mockReturnValueOnce(checkValidFileSize);
+        hook.addFile(eventSuccess);
+        expect(spies.checkValidFileSize.mock.calls.length).toEqual(1);
+        expect(spies.checkValidFileSize).toHaveReturnedWith(true);
+        expect(dispatch).toHaveBeenCalledWith(thunkActions.app.uploadAsset({
+          file: testValue,
+          setSelection,
+        }));
+      });
+    });
+  });
+  describe('imgHooks wrapper', () => {
+    const imgListHooks = {
+      galleryProps: 'some gallery props',
+      selectBtnProps: 'some select btn props',
+    };
+    const searchAndSortHooks = { search: 'props' };
+    const fileInputHooks = { file: 'input hooks' };
+    const images = { sOmEuiMAge: { staTICUrl: '/assets/sOmEuiMAge' } };
+    const imageCount = 1;
+
+    const setSelection = jest.fn();
+    const clearSelection = jest.fn();
+    const spies = {};
+    beforeEach(() => {
+      spies.imgList = jest.spyOn(hooks, hookKeys.imgListHooks)
+        .mockReturnValueOnce(imgListHooks);
+      spies.search = jest.spyOn(hooks, hookKeys.searchAndSortHooks)
+        .mockReturnValueOnce(searchAndSortHooks);
+      spies.file = jest.spyOn(hooks, hookKeys.fileInputHooks)
+        .mockReturnValueOnce(fileInputHooks);
+      hook = hooks.imgHooks({
+        setSelection, clearSelection, images, imageCount,
+      });
+    });
+    it('forwards fileInputHooks as fileInput, called with uploadAsset prop', () => {
+      expect(hook.fileInput).toEqual(fileInputHooks);
+      expect(spies.file.mock.calls.length).toEqual(1);
+      expect(spies.file).toHaveBeenCalledWith({
+        setSelection, clearSelection, imgList: imgListHooks,
+      });
+    });
+    it('initializes imgListHooks with setSelection,searchAndSortHooks, and images', () => {
+      expect(spies.imgList.mock.calls.length).toEqual(1);
+      expect(spies.imgList).toHaveBeenCalledWith({
+        setSelection,
+        searchSortProps: searchAndSortHooks,
+        images,
+        imageCount,
+      });
+    });
+    it('forwards searchAndSortHooks as searchSortProps', () => {
+      expect(hook.searchSortProps).toEqual(searchAndSortHooks);
+      expect(spies.file.mock.calls.length).toEqual(1);
+      expect(spies.file).toHaveBeenCalledWith({
+        setSelection, clearSelection, imgList: imgListHooks,
+      });
+    });
+    it('forwards galleryProps and selectBtnProps from the image list hooks', () => {
+      expect(hook.galleryProps).toEqual(imgListHooks.galleryProps);
+      expect(hook.selectBtnProps).toEqual(imgListHooks.selectBtnProps);
+    });
+  });
+});
diff --git a/src/editors/sharedComponents/ImageUploadModal/SelectImageModal/index.jsx b/src/editors/sharedComponents/ImageUploadModal/SelectImageModal/index.jsx
new file mode 100644
index 0000000000..0e0439a58b
--- /dev/null
+++ b/src/editors/sharedComponents/ImageUploadModal/SelectImageModal/index.jsx
@@ -0,0 +1,92 @@
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import * as hooks from './hooks';
+import { acceptedImgKeys } from './utils';
+import SelectionModal from '../../SelectionModal';
+import messages from './messages';
+import { RequestKeys } from '../../../data/constants/requests';
+import { selectors } from '../../../data/redux';
+
+const SelectImageModal = ({
+  isOpen,
+  close,
+  setSelection,
+  clearSelection,
+  images,
+  // redux
+  isLoaded,
+  isFetchError,
+  isUploadError,
+  isLibrary,
+  imageCount,
+}) => {
+  const {
+    galleryError,
+    inputError,
+    fileInput,
+    galleryProps,
+    searchSortProps,
+    selectBtnProps,
+  } = hooks.imgHooks({
+    setSelection,
+    clearSelection,
+    images: images.current,
+    imageCount,
+  });
+
+  const modalMessages = {
+    confirmMsg: messages.nextButtonLabel,
+    titleMsg: messages.titleLabel,
+    uploadButtonMsg: messages.uploadButtonLabel,
+    fetchError: messages.fetchImagesError,
+    uploadError: messages.uploadImageError,
+  };
+
+  return (
+    <SelectionModal
+      {...{
+        isOpen,
+        close,
+        galleryError,
+        inputError,
+        fileInput,
+        galleryProps,
+        searchSortProps,
+        selectBtnProps,
+        acceptedFiles: acceptedImgKeys,
+        modalMessages,
+        isLoaded,
+        isFetchError,
+        isUploadError,
+        isLibrary,
+      }}
+    />
+  );
+};
+
+SelectImageModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  close: PropTypes.func.isRequired,
+  setSelection: PropTypes.func.isRequired,
+  clearSelection: PropTypes.func.isRequired,
+  images: PropTypes.arrayOf(PropTypes.string).isRequired,
+  // redux
+  isLoaded: PropTypes.bool.isRequired,
+  isFetchError: PropTypes.bool.isRequired,
+  isUploadError: PropTypes.bool.isRequired,
+  imageCount: PropTypes.number.isRequired,
+  isLibrary: PropTypes.bool,
+};
+
+export const mapStateToProps = (state) => ({
+  isLoaded: selectors.requests.isFinished(state, { requestKey: RequestKeys.fetchImages }),
+  isFetchError: selectors.requests.isFailed(state, { requestKey: RequestKeys.fetchImages }),
+  isUploadError: selectors.requests.isFailed(state, { requestKey: RequestKeys.uploadAsset }),
+  isLibrary: selectors.app.isLibrary(state),
+  imageCount: state.app.imageCount,
+});
+
+export const mapDispatchToProps = {};
+
+export const SelectImageModalInternal = SelectImageModal; // For testing only
+export default connect(mapStateToProps, mapDispatchToProps)(SelectImageModal);
diff --git a/src/editors/sharedComponents/ImageUploadModal/SelectImageModal/index.test.jsx b/src/editors/sharedComponents/ImageUploadModal/SelectImageModal/index.test.jsx
new file mode 100644
index 0000000000..0bd810d280
--- /dev/null
+++ b/src/editors/sharedComponents/ImageUploadModal/SelectImageModal/index.test.jsx
@@ -0,0 +1,114 @@
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+
+import { formatMessage } from '../../../testUtils';
+import SelectionModal from '../../SelectionModal';
+import * as hooks from './hooks';
+import { SelectImageModalInternal as SelectImageModal } from '.';
+
+const mockImage = {
+  displayName: 'DALL·E 2023-03-10.png',
+  contentType: 'image/png',
+  dateAdded: 1682009100000,
+  url: '/asset-v1:TestX+Test01+Test0101+type@asset+block@DALL_E_2023-03-10.png',
+  externalUrl: 'http://localhost:18000/asset-v1:TestX+Test01+Test0101+type@asset+block@DALL_E_2023-03-10.png',
+  portableUrl: '/static/DALL_E_2023-03-10.png',
+  thumbnail: '/asset-v1:TestX+Test01+Test0101+type@thumbnail+block@DALL_E_2023-03-10.jpg',
+  locked: false,
+  staticFullUrl: '/assets/courseware/v1/af2bf9ac70804e54c534107160a8e51e/asset-v1:TestX+Test01+Test0101+type@asset+block@DALL_E_2023-03-10.png',
+  id: 'asset-v1:TestX+Test01+Test0101+type@asset+block@DALL_E_2023-03-10.png',
+  width: 100,
+  height: 150,
+};
+
+const mockImagesRef = { current: [mockImage] };
+
+jest.mock('../../BaseModal', () => 'BaseModal');
+jest.mock('../../FileInput', () => 'FileInput');
+jest.mock('../../SelectionModal/Gallery', () => 'Gallery');
+jest.mock('../../SelectionModal/SearchSort', () => 'SearchSort');
+jest.mock('../../ErrorAlerts/FetchErrorAlert', () => 'FetchErrorAlert');
+jest.mock('../../ErrorAlerts/UploadErrorAlert', () => 'UploadErrorAlert');
+jest.mock('../..//ErrorAlerts/ErrorAlert', () => 'ErrorAlert');
+jest.mock('../../SelectionModal', () => 'SelectionModal');
+
+jest.mock('./hooks', () => ({
+  imgHooks: jest.fn(() => ({
+    galleryError: {
+      show: 'ShoWERror gAlLery',
+      set: jest.fn(),
+      dismiss: jest.fn(),
+      message: {
+        id: 'Gallery error id',
+        defaultMessage: 'Gallery error',
+        description: 'Gallery error',
+      },
+    },
+    inputError: {
+      show: 'ShoWERror inPUT',
+      set: jest.fn(),
+      dismiss: jest.fn(),
+      message: {
+        id: 'Input error id',
+        defaultMessage: 'Input error',
+        description: 'Input error',
+      },
+    },
+    fileInput: {
+      addFile: 'imgHooks.fileInput.addFile',
+      click: 'imgHooks.fileInput.click',
+      ref: 'imgHooks.fileInput.ref',
+    },
+    galleryProps: { gallery: 'props' },
+    searchSortProps: { search: 'sortProps' },
+    selectBtnProps: { select: 'btnProps' },
+  })),
+}));
+
+jest.mock('../../../data/redux', () => ({
+  selectors: {
+    requests: {
+      isPending: (state, { requestKey }) => ({ isPending: { state, requestKey } }),
+    },
+  },
+}));
+
+describe('SelectImageModal', () => {
+  describe('component', () => {
+    const props = {
+      isOpen: true,
+      close: jest.fn().mockName('props.close'),
+      setSelection: jest.fn().mockName('props.setSelection'),
+      clearSelection: jest.fn().mockName('props.clearSelection'),
+      images: mockImagesRef,
+      intl: { formatMessage },
+    };
+    let el;
+    const imgHooks = hooks.imgHooks();
+    beforeEach(() => {
+      el = shallow(<SelectImageModal {...props} />);
+    });
+    test('snapshot', () => {
+      expect(el.snapshot).toMatchSnapshot();
+    });
+    it('provides confirm action, forwarding selectBtnProps from imgHooks', () => {
+      expect(el.instance.findByType(SelectionModal)[0].props.selectBtnProps).toEqual(
+        expect.objectContaining({ ...hooks.imgHooks().selectBtnProps }),
+      );
+    });
+    it('provides file upload button linked to fileInput.click', () => {
+      expect(el.instance.findByType(SelectionModal)[0].props.fileInput.click).toEqual(
+        imgHooks.fileInput.click,
+      );
+    });
+    it('provides a SearchSort component with searchSortProps from imgHooks', () => {
+      expect(el.instance.findByType(SelectionModal)[0].props.searchSortProps).toEqual(imgHooks.searchSortProps);
+    });
+    it('provides a Gallery component with galleryProps from imgHooks', () => {
+      expect(el.instance.findByType(SelectionModal)[0].props.galleryProps).toEqual(imgHooks.galleryProps);
+    });
+    it('provides a FileInput component with fileInput props from imgHooks', () => {
+      expect(el.instance.findByType(SelectionModal)[0].props.fileInput).toMatchObject(imgHooks.fileInput);
+    });
+  });
+});
diff --git a/src/editors/sharedComponents/ImageUploadModal/SelectImageModal/messages.js b/src/editors/sharedComponents/ImageUploadModal/SelectImageModal/messages.js
new file mode 100644
index 0000000000..14794b641f
--- /dev/null
+++ b/src/editors/sharedComponents/ImageUploadModal/SelectImageModal/messages.js
@@ -0,0 +1,77 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+
+  nextButtonLabel: {
+    id: 'authoring.texteditor.selectimagemodal.next.label',
+    defaultMessage: 'Next',
+    description: 'Label for Next button',
+  },
+  uploadButtonLabel: {
+    id: 'authoring.texteditor.selectimagemodal.upload.label',
+    defaultMessage: 'Upload a new image (10 MB max)',
+    description: 'Label for upload button',
+  },
+  titleLabel: {
+    id: 'authoring.texteditor.selectimagemodal.title.label',
+    defaultMessage: 'Add an image',
+    description: 'Title for the select image modal',
+  },
+
+  // Sort Dropdown
+  sortByDateNewest: {
+    id: 'authoring.texteditor.selectimagemodal.sort.datenewest.label',
+    defaultMessage: 'By date added (newest)',
+    description: 'Dropdown label for sorting by date (newest)',
+  },
+  sortByDateOldest: {
+    id: 'authoring.texteditor.selectimagemodal.sort.dateoldest.label',
+    defaultMessage: 'By date added (oldest)',
+    description: 'Dropdown label for sorting by date (oldest)',
+  },
+  sortByNameAscending: {
+    id: 'authoring.texteditor.selectimagemodal.sort.nameascending.label',
+    defaultMessage: 'By name (ascending)',
+    description: 'Dropdown label for sorting by name (ascending)',
+  },
+  sortByNameDescending: {
+    id: 'authoring.texteditor.selectimagemodal.sort.namedescending.label',
+    defaultMessage: 'By name (descending)',
+    description: 'Dropdown label for sorting by name (descending)',
+  },
+
+  // Gallery
+  emptyGalleryLabel: {
+    id: 'authoring.texteditor.selectimagemodal.emptyGalleryLabel',
+    defaultMessage:
+      'No images found in your gallery. Please upload an image using the button below.',
+    description: 'Label for when image gallery is empty.',
+  },
+
+  // Errors
+  uploadImageError: {
+    id: 'authoring.texteditor.selectimagemodal.error.uploadImageError',
+    defaultMessage: 'Failed to upload image. Please try again.',
+    description: 'Message presented to user when image fails to upload',
+  },
+  fetchImagesError: {
+    id: 'authoring.texteditor.selectimagemodal.error.fetchImagesError',
+    defaultMessage: 'Failed to obtain images. Please try again.',
+    description: 'Message presented to user when images are not found',
+  },
+  fileSizeError: {
+    id: 'authoring.texteditor.selectimagemodal.error.fileSizeError',
+    defaultMessage:
+      'Images must be 10 MB or less. Please resize image and try again.',
+    description:
+      ' Message presented to user when file size of image is larger than 10 MB',
+  },
+  selectImageError: {
+    id: 'authoring.texteditor.selectimagemodal.error.selectImageError',
+    defaultMessage: 'Select an image to continue.',
+    description:
+      'Message presented to user when clicking Next without selecting an image',
+  },
+});
+
+export default messages;
diff --git a/src/editors/sharedComponents/ImageUploadModal/SelectImageModal/utils.js b/src/editors/sharedComponents/ImageUploadModal/SelectImageModal/utils.js
new file mode 100644
index 0000000000..a1af9fa61b
--- /dev/null
+++ b/src/editors/sharedComponents/ImageUploadModal/SelectImageModal/utils.js
@@ -0,0 +1,49 @@
+import { StrictDict, keyStore } from '../../../utils';
+import messages from './messages';
+
+export const sortKeys = StrictDict({
+  dateNewest: 'dateNewest',
+  dateOldest: 'dateOldest',
+  nameAscending: 'nameAscending',
+  nameDescending: 'nameDescending',
+});
+
+const messageKeys = keyStore(messages);
+
+export const sortMessages = StrictDict({
+  dateNewest: messages[messageKeys.sortByDateNewest],
+  dateOldest: messages[messageKeys.sortByDateOldest],
+  nameAscending: messages[messageKeys.sortByNameAscending],
+  nameDescending: messages[messageKeys.sortByNameDescending],
+});
+
+export const sortFunctions = StrictDict({
+  dateNewest: (a, b) => b.dateAdded - a.dateAdded,
+  dateOldest: (a, b) => a.dateAdded - b.dateAdded,
+  nameAscending: (a, b) => {
+    const nameA = a.displayName.toLowerCase();
+    const nameB = b.displayName.toLowerCase();
+    if (nameA < nameB) { return -1; }
+    if (nameB < nameA) { return 1; }
+    return b.dateAdded - a.dateAdded;
+  },
+  nameDescending: (a, b) => {
+    const nameA = a.displayName.toLowerCase();
+    const nameB = b.displayName.toLowerCase();
+    if (nameA < nameB) { return 1; }
+    if (nameB < nameA) { return -1; }
+    return b.dateAdded - a.dateAdded;
+  },
+});
+
+export const acceptedImgKeys = StrictDict({
+  gif: '.gif',
+  jpg: '.jpg',
+  jpeg: '.jpeg',
+  png: '.png',
+  tif: '.tif',
+  tiff: '.tiff',
+  ico: '.ico',
+  svg: '.svg',
+  webp: '.webp',
+});
diff --git a/src/editors/sharedComponents/ImageUploadModal/__snapshots__/index.test.jsx.snap b/src/editors/sharedComponents/ImageUploadModal/__snapshots__/index.test.jsx.snap
new file mode 100644
index 0000000000..ac23319881
--- /dev/null
+++ b/src/editors/sharedComponents/ImageUploadModal/__snapshots__/index.test.jsx.snap
@@ -0,0 +1,92 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ImageUploadModal component snapshot: no selection (Select Image Modal) 1`] = `
+<SelectImageModal
+  clearSelection={[MockFunction props.clearSelection]}
+  close={[MockFunction props.close]}
+  images={
+    {
+      "current": [
+        {
+          "contentType": "image/png",
+          "dateAdded": 1682009100000,
+          "displayName": "DALL·E 2023-03-10.png",
+          "externalUrl": "http://localhost:18000/asset-v1:TestX+Test01+Test0101+type@asset+block@DALL_E_2023-03-10.png",
+          "height": 150,
+          "id": "asset-v1:TestX+Test01+Test0101+type@asset+block@DALL_E_2023-03-10.png",
+          "locked": false,
+          "portableUrl": "/static/DALL_E_2023-03-10.png",
+          "staticFullUrl": "/assets/courseware/v1/af2bf9ac70804e54c534107160a8e51e/asset-v1:TestX+Test01+Test0101+type@asset+block@DALL_E_2023-03-10.png",
+          "thumbnail": "/asset-v1:TestX+Test01+Test0101+type@thumbnail+block@DALL_E_2023-03-10.jpg",
+          "url": "/asset-v1:TestX+Test01+Test0101+type@asset+block@DALL_E_2023-03-10.png",
+          "width": 100,
+        },
+      ],
+    }
+  }
+  isOpen={false}
+  setSelection={[MockFunction props.setSelection]}
+/>
+`;
+
+exports[`ImageUploadModal component snapshot: selection has no externalUrl (Select Image Modal) 1`] = `
+<SelectImageModal
+  clearSelection={[MockFunction props.clearSelection]}
+  close={[MockFunction props.close]}
+  images={
+    {
+      "current": [
+        {
+          "contentType": "image/png",
+          "dateAdded": 1682009100000,
+          "displayName": "DALL·E 2023-03-10.png",
+          "externalUrl": "http://localhost:18000/asset-v1:TestX+Test01+Test0101+type@asset+block@DALL_E_2023-03-10.png",
+          "height": 150,
+          "id": "asset-v1:TestX+Test01+Test0101+type@asset+block@DALL_E_2023-03-10.png",
+          "locked": false,
+          "portableUrl": "/static/DALL_E_2023-03-10.png",
+          "staticFullUrl": "/assets/courseware/v1/af2bf9ac70804e54c534107160a8e51e/asset-v1:TestX+Test01+Test0101+type@asset+block@DALL_E_2023-03-10.png",
+          "thumbnail": "/asset-v1:TestX+Test01+Test0101+type@thumbnail+block@DALL_E_2023-03-10.jpg",
+          "url": "/asset-v1:TestX+Test01+Test0101+type@asset+block@DALL_E_2023-03-10.png",
+          "width": 100,
+        },
+      ],
+    }
+  }
+  isOpen={false}
+  setSelection={[MockFunction props.setSelection]}
+/>
+`;
+
+exports[`ImageUploadModal component snapshot: with selection content (ImageSettingsUpload) 1`] = `
+<ImageSettingsModal
+  images={
+    {
+      "current": [
+        {
+          "contentType": "image/png",
+          "dateAdded": 1682009100000,
+          "displayName": "DALL·E 2023-03-10.png",
+          "externalUrl": "http://localhost:18000/asset-v1:TestX+Test01+Test0101+type@asset+block@DALL_E_2023-03-10.png",
+          "height": 150,
+          "id": "asset-v1:TestX+Test01+Test0101+type@asset+block@DALL_E_2023-03-10.png",
+          "locked": false,
+          "portableUrl": "/static/DALL_E_2023-03-10.png",
+          "staticFullUrl": "/assets/courseware/v1/af2bf9ac70804e54c534107160a8e51e/asset-v1:TestX+Test01+Test0101+type@asset+block@DALL_E_2023-03-10.png",
+          "thumbnail": "/asset-v1:TestX+Test01+Test0101+type@thumbnail+block@DALL_E_2023-03-10.jpg",
+          "url": "/asset-v1:TestX+Test01+Test0101+type@asset+block@DALL_E_2023-03-10.png",
+          "width": 100,
+        },
+      ],
+    }
+  }
+  isOpen={false}
+  returnToSelection={[MockFunction props.clearSelection]}
+  selection={
+    {
+      "externalUrl": "sOmEuRl.cOm",
+      "some": "images",
+    }
+  }
+/>
+`;
diff --git a/src/editors/sharedComponents/ImageUploadModal/index.jsx b/src/editors/sharedComponents/ImageUploadModal/index.jsx
new file mode 100644
index 0000000000..fea13225c8
--- /dev/null
+++ b/src/editors/sharedComponents/ImageUploadModal/index.jsx
@@ -0,0 +1,207 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { injectIntl } from '@edx/frontend-platform/i18n';
+import * as tinyMCEKeys from '../../data/constants/tinyMCE';
+import ImageSettingsModal from './ImageSettingsModal';
+import SelectImageModal from './SelectImageModal';
+// This 'module' self-import hack enables mocking during tests.
+// See src/editors/decisions/0005-internal-editor-testability-decisions.md. The whole approach to how hooks are tested
+// should be re-thought and cleaned up to avoid this pattern.
+// eslint-disable-next-line import/no-self-import
+import * as module from '.';
+import { updateImageDimensions } from '../TinyMceWidget/hooks';
+
+export const propsString = (props) => (
+  Object.keys(props).map((key) => `${key}="${props[key]}"`).join(' ')
+);
+
+export const imgProps = ({
+  settings,
+  selection,
+  lmsEndpointUrl,
+  editorType,
+  isLibrary,
+}) => {
+  let url = selection?.externalUrl;
+  if (url?.startsWith(lmsEndpointUrl) && editorType !== 'expandable') {
+    const sourceEndIndex = lmsEndpointUrl.length;
+    url = url.substring(sourceEndIndex);
+  }
+  if (isLibrary) {
+    const index = url.indexOf('static/');
+    url = url.substring(index);
+  }
+  return {
+    src: url,
+    alt: settings.isDecorative ? '' : settings.altText,
+    width: settings.dimensions.width,
+    height: settings.dimensions.height,
+  };
+};
+
+export const saveToEditor = ({
+  settings, selection, lmsEndpointUrl, editorType, editorRef, isLibrary,
+}) => {
+  const newImgTag = module.hooks.imgTag({
+    settings,
+    selection,
+    lmsEndpointUrl,
+    editorType,
+    isLibrary,
+  });
+
+  editorRef.current.execCommand(
+    tinyMCEKeys.commands.insertContent,
+    false,
+    newImgTag,
+  );
+};
+
+export const updateImagesRef = ({
+  images, selection, height, width, newImage,
+}) => {
+  const { result: mappedImages, foundMatch: imageAlreadyExists } = updateImageDimensions({
+    images: images.current, url: selection.externalUrl, height, width,
+  });
+
+  // eslint-disable-next-line no-param-reassign
+  images.current = imageAlreadyExists ? mappedImages : [...images.current, newImage];
+};
+
+export const updateReactState = ({
+  settings, selection, setSelection, images,
+}) => {
+  const { height, width } = settings.dimensions;
+  const newImage = {
+    externalUrl: selection.externalUrl,
+    altText: settings.altText,
+    width,
+    height,
+  };
+
+  updateImagesRef({
+    images, selection, height, width, newImage,
+  });
+
+  setSelection(newImage);
+};
+
+export const hooks = {
+  createSaveCallback: ({
+    close,
+    ...args
+  }) => (
+    settings,
+  ) => {
+    saveToEditor({ settings, ...args });
+    updateReactState({ settings, ...args });
+
+    close();
+    args.setSelection(null);
+  },
+  onClose: ({ clearSelection, close }) => () => {
+    clearSelection();
+    close();
+  },
+  imgTag: ({
+    settings,
+    selection,
+    lmsEndpointUrl,
+    editorType,
+    isLibrary,
+  }) => {
+    const props = module.imgProps({
+      settings,
+      selection,
+      lmsEndpointUrl,
+      editorType,
+      isLibrary,
+    });
+    return `<img ${propsString(props)} />`;
+  },
+  updateReactState,
+  updateImagesRef,
+  saveToEditor,
+  imgProps,
+  propsString,
+};
+
+const ImageUploadModal = ({
+  // eslint-disable-next-line
+  editorRef,
+  isOpen,
+  close,
+  clearSelection,
+  selection,
+  setSelection,
+  images,
+  editorType,
+  lmsEndpointUrl,
+  isLibrary,
+}) => {
+  if (selection && selection.externalUrl) {
+    return (
+      <ImageSettingsModal
+        {...{
+          isOpen,
+          close: module.hooks.onClose({ clearSelection, close }),
+          selection,
+          images,
+          saveToEditor: module.hooks.createSaveCallback({
+            close,
+            images,
+            editorRef,
+            editorType,
+            selection,
+            setSelection,
+            lmsEndpointUrl,
+            clearSelection,
+            isLibrary,
+          }),
+          returnToSelection: clearSelection,
+        }}
+      />
+    );
+  }
+  return (
+    <SelectImageModal
+      {...{
+        isOpen,
+        close,
+        setSelection,
+        clearSelection,
+        images,
+      }}
+    />
+  );
+};
+
+ImageUploadModal.defaultProps = {
+  editorRef: null,
+  editorType: null,
+  selection: null,
+};
+ImageUploadModal.propTypes = {
+  clearSelection: PropTypes.func.isRequired,
+  close: PropTypes.func.isRequired,
+  editorRef: PropTypes.oneOfType([
+    PropTypes.func,
+    // eslint-disable-next-line react/forbid-prop-types
+    PropTypes.shape({ current: PropTypes.any }),
+  ]),
+  isOpen: PropTypes.bool.isRequired,
+  selection: PropTypes.shape({
+    url: PropTypes.string,
+    externalUrl: PropTypes.string,
+    altText: PropTypes.bool,
+  }),
+  setSelection: PropTypes.func.isRequired,
+  images: PropTypes.shape({}).isRequired,
+  lmsEndpointUrl: PropTypes.string.isRequired,
+  editorType: PropTypes.string,
+  isLibrary: PropTypes.string,
+};
+
+export const ImageUploadModalInternal = ImageUploadModal; // For testing only
+export default injectIntl(ImageUploadModal);
diff --git a/src/editors/sharedComponents/ImageUploadModal/index.test.jsx b/src/editors/sharedComponents/ImageUploadModal/index.test.jsx
new file mode 100644
index 0000000000..b9b8fbc2bd
--- /dev/null
+++ b/src/editors/sharedComponents/ImageUploadModal/index.test.jsx
@@ -0,0 +1,184 @@
+/* eslint-disable no-import-assign */
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+
+import { keyStore } from '../../utils';
+import * as tinyMCEKeys from '../../data/constants/tinyMCE';
+// This 'module' self-import hack enables mocking during tests.
+// See src/editors/decisions/0005-internal-editor-testability-decisions.md. The whole approach to how hooks are tested
+// should be re-thought and cleaned up to avoid this pattern.
+// eslint-disable-next-line import/no-self-import
+import * as module from '.';
+import * as tinyMceHooks from '../TinyMceWidget/hooks';
+
+jest.mock('./ImageSettingsModal', () => 'ImageSettingsModal');
+jest.mock('./SelectImageModal', () => 'SelectImageModal');
+
+const { ImageUploadModalInternal: ImageUploadModal } = module;
+const hookKeys = keyStore(module.hooks);
+
+const settings = {
+  altText: 'aLt tExt',
+  isDecorative: false,
+  dimensions: {
+    width: 2022,
+    height: 1619,
+  },
+};
+
+const mockImage = {
+  displayName: 'DALL·E 2023-03-10.png',
+  contentType: 'image/png',
+  dateAdded: 1682009100000,
+  url: '/asset-v1:TestX+Test01+Test0101+type@asset+block@DALL_E_2023-03-10.png',
+  externalUrl: 'http://localhost:18000/asset-v1:TestX+Test01+Test0101+type@asset+block@DALL_E_2023-03-10.png',
+  portableUrl: '/static/DALL_E_2023-03-10.png',
+  thumbnail: '/asset-v1:TestX+Test01+Test0101+type@thumbnail+block@DALL_E_2023-03-10.jpg',
+  locked: false,
+  staticFullUrl: '/assets/courseware/v1/af2bf9ac70804e54c534107160a8e51e/asset-v1:TestX+Test01+Test0101+type@asset+block@DALL_E_2023-03-10.png',
+  id: 'asset-v1:TestX+Test01+Test0101+type@asset+block@DALL_E_2023-03-10.png',
+  width: 100,
+  height: 150,
+};
+
+let mockImagesRef = { current: [mockImage] };
+
+describe('ImageUploadModal', () => {
+  beforeEach(() => {
+    mockImagesRef = { current: [mockImage] };
+  });
+
+  describe('hooks', () => {
+    describe('imgTag', () => {
+      const selection = { externalUrl: 'sOmEuRl.cOm' };
+      const url = 'uRl.cOm';
+      const expected = {
+        src: url,
+        alt: settings.altText,
+        width: settings.dimensions.width,
+        height: settings.dimensions.height,
+      };
+      const testImgTag = (args) => {
+        const output = module.hooks.imgTag({
+          settings: args.settings,
+          selection,
+          lmsEndpointUrl: 'sOmE',
+        });
+        expect(output).toEqual(`<img ${module.propsString(args.expected)} />`);
+      };
+      test('It returns a html string which matches an image tag', () => {
+        testImgTag({ settings, expected });
+      });
+      test('If isDecorative is true, alt text is an empty string', () => {
+        testImgTag({
+          settings: { ...settings, isDecorative: true },
+          expected: { ...expected, alt: '' },
+        });
+      });
+    });
+    describe('createSaveCallback', () => {
+      const updateImageDimensionsSpy = jest.spyOn(tinyMceHooks, 'updateImageDimensions');
+      const close = jest.fn();
+      const execCommandMock = jest.fn();
+      const editorRef = { current: { some: 'dATa', execCommand: execCommandMock } };
+      const setSelection = jest.fn();
+      const selection = { externalUrl: 'sOmEuRl.cOm' };
+      const lmsEndpointUrl = 'sOmE';
+      const images = mockImagesRef;
+      let output;
+      const newImage = {
+        altText: settings.altText,
+        externalUrl: selection.externalUrl,
+        width: settings.dimensions.width,
+        height: settings.dimensions.height,
+      };
+
+      beforeEach(() => {
+        output = module.hooks.createSaveCallback({
+          close, settings, images, editorRef, setSelection, selection, lmsEndpointUrl,
+        });
+      });
+      afterEach(() => {
+        jest.clearAllMocks();
+      });
+      test(
+        `It creates a callback, that when called, inserts to the editor, sets the selection to the current element,
+        adds new image to the images ref, and calls close`,
+        () => {
+          jest.spyOn(module.hooks, hookKeys.imgTag)
+            .mockImplementationOnce((props) => ({ selection, settings: props.settings, lmsEndpointUrl }));
+
+          expect(execCommandMock).not.toBeCalled();
+          expect(setSelection).not.toBeCalled();
+          expect(close).not.toBeCalled();
+          expect(images.current).toEqual([mockImage]);
+
+          output(settings);
+
+          expect(execCommandMock).toBeCalledWith(
+            tinyMCEKeys.commands.insertContent,
+            false,
+            { selection, settings, lmsEndpointUrl },
+          );
+          expect(setSelection).toBeCalledWith(newImage);
+          expect(updateImageDimensionsSpy.mock.calls.length).toBe(1);
+          expect(updateImageDimensionsSpy).toBeCalledWith({
+            images: [mockImage],
+            url: selection.externalUrl,
+            width: settings.dimensions.width,
+            height: settings.dimensions.height,
+          });
+          expect(updateImageDimensionsSpy.mock.results[0].value.foundMatch).toBe(false);
+          expect(images.current).toEqual([mockImage, newImage]);
+          expect(close).toBeCalled();
+          expect(setSelection).toBeCalledWith(null);
+        },
+      );
+    });
+    describe('onClose', () => {
+      it('takes and calls clearSelection and close callbacks', () => {
+        const clearSelection = jest.fn();
+        const close = jest.fn();
+        module.hooks.onClose({ clearSelection, close })();
+        expect(clearSelection).toHaveBeenCalled();
+        expect(close).toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe('component', () => {
+    let props;
+    let hooks;
+    beforeAll(() => {
+      hooks = module.hooks;
+      props = {
+        editorRef: { current: null },
+        isOpen: false,
+        close: jest.fn().mockName('props.close'),
+        clearSelection: jest.fn().mockName('props.clearSelection'),
+        selection: { some: 'images', externalUrl: 'sOmEuRl.cOm' },
+        setSelection: jest.fn().mockName('props.setSelection'),
+        lmsEndpointUrl: 'sOmE',
+        images: {
+          current: [mockImage],
+        },
+      };
+      module.hooks = {
+        createSaveCallback: jest.fn().mockName('hooks.createSaveCallback'),
+        onClose: jest.fn().mockName('hooks.onClose'),
+      };
+    });
+    afterAll(() => {
+      module.hooks = hooks;
+    });
+    test('snapshot: with selection content (ImageSettingsUpload)', () => {
+      expect(shallow(<ImageUploadModal {...props} />).snapshot).toMatchSnapshot();
+    });
+    test('snapshot: selection has no externalUrl (Select Image Modal)', () => {
+      expect(shallow(<ImageUploadModal {...props} selection={null} />).snapshot).toMatchSnapshot();
+    });
+    test('snapshot: no selection (Select Image Modal)', () => {
+      expect(shallow(<ImageUploadModal {...props} selection={null} />).snapshot).toMatchSnapshot();
+    });
+  });
+});
diff --git a/src/editors/sharedComponents/RawEditor/index.jsx b/src/editors/sharedComponents/RawEditor/index.jsx
new file mode 100644
index 0000000000..d6cccca65c
--- /dev/null
+++ b/src/editors/sharedComponents/RawEditor/index.jsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Alert } from '@openedx/paragon';
+
+import CodeEditor from '../CodeEditor';
+import { setAssetToStaticUrl } from '../TinyMceWidget/hooks';
+
+function getValue(content) {
+  if (!content) { return null; }
+  if (typeof content === 'string') { return content; }
+  return content.data?.data;
+}
+
+const RawEditor = ({
+  editorRef,
+  content,
+  lang,
+}) => {
+  const value = getValue(content) || '';
+  const staticUpdate = setAssetToStaticUrl({ editorValue: value });
+
+  return (
+    <div>
+      {lang === 'xml' ? null : (
+        <Alert variant="danger">
+          You are using the raw {lang} editor.
+        </Alert>
+      )}
+      { value ? (
+        <CodeEditor
+          innerRef={editorRef}
+          value={staticUpdate}
+          lang={lang}
+          data-testid="code-editor"
+        />
+      ) : null}
+
+    </div>
+  );
+};
+RawEditor.defaultProps = {
+  editorRef: null,
+  content: null,
+  lang: 'html',
+};
+RawEditor.propTypes = {
+  editorRef: PropTypes.oneOfType([
+    PropTypes.func,
+    // eslint-disable-next-line react/forbid-prop-types
+    PropTypes.shape({ current: PropTypes.any }),
+  ]),
+  content: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.shape({
+      data: PropTypes.shape({ data: PropTypes.string }),
+    }),
+  ]),
+  lang: PropTypes.string,
+};
+
+export default RawEditor;
diff --git a/src/editors/sharedComponents/RawEditor/index.test.jsx b/src/editors/sharedComponents/RawEditor/index.test.jsx
new file mode 100644
index 0000000000..8b68afaf30
--- /dev/null
+++ b/src/editors/sharedComponents/RawEditor/index.test.jsx
@@ -0,0 +1,80 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import '@testing-library/jest-dom/extend-expect';
+
+import RawEditor from '.';
+
+jest.unmock('@openedx/paragon');
+
+const renderComponent = (props) => render(
+  <IntlProvider locale="en">
+    <RawEditor {...props} />
+  </IntlProvider>,
+);
+describe('RawEditor', () => {
+  const defaultProps = {
+    editorRef: {
+      current: {
+        value: 'Ref Value',
+      },
+    },
+    content: { data: { data: 'eDiTablE Text HtmL' } },
+    lang: 'html',
+  };
+  const xmlProps = {
+    editorRef: {
+      current: {
+        value: 'Ref Value',
+      },
+    },
+    content: { data: { data: 'eDiTablE Text XMl' } },
+    lang: 'xml',
+  };
+  const noContentProps = {
+    editorRef: {
+      current: {
+        value: 'Ref Value',
+      },
+    },
+    content: null,
+    lang: 'html',
+    width: { width: '80%' },
+  };
+
+  it('renders as expected with default behavior', () => {
+    renderComponent(defaultProps);
+    expect(screen.getByRole('alert')).toBeVisible();
+
+    expect(screen.getByText('eDiTablE Text HtmL')).toBeVisible();
+  });
+
+  it('updates the assets to static srcs', () => {
+    const updatedProps = {
+      ...defaultProps,
+      content: 'pick <img src="/asset-v1:org+run+term+type@asset+block@img.jpeg" /> or <img src="/assets/courseware/v1/hash/asset-v1:org+run+term+type@asset+block/img2.jpeg" />',
+    };
+    renderComponent(updatedProps);
+    expect(screen.getByText('"/static/img.jpeg"')).toBeVisible();
+
+    expect(screen.getByText('"/static/img2.jpeg"')).toBeVisible();
+
+    expect(screen.queryByText('"/asset-v1:org+run+term+type@asset+block@img.jpeg"')).toBeNull();
+
+    expect(screen.queryByText('"/assets/courseware/v1/hash/asset-v1:org+run+term+type@asset+block/img2.jpeg"')).toBeNull();
+  });
+
+  it('renders as expected with lang equal to xml', () => {
+    renderComponent(xmlProps);
+    expect(screen.queryByRole('alert')).toBeNull();
+
+    expect(screen.getByText('eDiTablE Text XMl')).toBeVisible();
+  });
+
+  it('renders as expected with content equal to null', () => {
+    renderComponent(noContentProps);
+    expect(screen.getByRole('alert')).toBeVisible();
+
+    expect(screen.queryByTestId('code-editor')).toBeNull();
+  });
+});
diff --git a/src/editors/sharedComponents/SelectableBox/FormCheckbox.jsx b/src/editors/sharedComponents/SelectableBox/FormCheckbox.jsx
new file mode 100644
index 0000000000..d2e1951ba5
--- /dev/null
+++ b/src/editors/sharedComponents/SelectableBox/FormCheckbox.jsx
@@ -0,0 +1,145 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { useCheckboxSetContext } from './FormCheckboxSetContext';
+import { FormGroupContextProvider, useFormGroupContext } from './FormGroupContext';
+import FormLabel from './FormLabel';
+import FormControlFeedback from './FormControlFeedback';
+
+const CheckboxControl = React.forwardRef(
+  ({ isIndeterminate, ...props }, ref) => {
+    const { getCheckboxControlProps, hasCheckboxSetProvider } = useCheckboxSetContext();
+    const defaultRef = React.useRef();
+    const resolvedRef = ref || defaultRef;
+    const { getControlProps } = useFormGroupContext();
+    let checkboxProps = getControlProps({
+      ...props,
+      className: classNames('pgn__form-checkbox-input', props.className),
+    });
+
+    if (hasCheckboxSetProvider) {
+      checkboxProps = getCheckboxControlProps(checkboxProps);
+    }
+
+    React.useEffect(() => {
+      // this if(resolvedRef.current) prevents console errors in testing
+      if (resolvedRef.current) {
+        resolvedRef.current.indeterminate = isIndeterminate;
+      }
+    }, [resolvedRef, isIndeterminate]);
+
+    return (
+      <input
+        type="checkbox"
+        {...checkboxProps}
+        ref={resolvedRef}
+      />
+    );
+  },
+);
+
+CheckboxControl.propTypes = {
+  /** Specifies whether the checkbox should be rendered in indeterminate state. */
+  isIndeterminate: PropTypes.bool,
+  /** Specifies class name to append to the base element. */
+  className: PropTypes.string,
+};
+
+CheckboxControl.defaultProps = {
+  isIndeterminate: false,
+  className: undefined,
+};
+
+const FormCheckbox = React.forwardRef(({
+  children,
+  className,
+  controlClassName,
+  labelClassName,
+  description,
+  isInvalid,
+  isValid,
+  controlAs,
+  floatLabelLeft,
+  ...props
+}, ref) => {
+  const { hasCheckboxSetProvider } = useCheckboxSetContext();
+  const { hasFormGroupProvider, useSetIsControlGroupEffect, getControlProps } = useFormGroupContext();
+  useSetIsControlGroupEffect(true);
+  const shouldActAsGroup = hasFormGroupProvider && !hasCheckboxSetProvider;
+  const groupProps = shouldActAsGroup ? {
+    ...getControlProps({}),
+    role: 'group',
+  } : {};
+
+  const control = React.createElement(controlAs, { ...props, className: controlClassName, ref });
+  return (
+    <FormGroupContextProvider
+      controlId={props.id}
+      isInvalid={isInvalid}
+      isValid={isValid}
+    >
+      <div
+        className={classNames('pgn__form-checkbox', className, {
+          'pgn__form-control-valid': isValid,
+          'pgn__form-control-invalid': isInvalid,
+          'pgn__form-control-disabled': props.disabled,
+          'pgn__form-control-label-left': !!floatLabelLeft,
+        })}
+        {...groupProps}
+      >
+        {control}
+        <div>
+          <FormLabel className={labelClassName}>
+            {children}
+          </FormLabel>
+          {description && (
+            <FormControlFeedback hasIcon={false}>
+              {description}
+            </FormControlFeedback>
+          )}
+        </div>
+      </div>
+    </FormGroupContextProvider>
+  );
+});
+
+FormCheckbox.propTypes = {
+  /** Specifies id of the FormCheckbox component. */
+  id: PropTypes.string,
+  /** Specifies contents of the component. */
+  children: PropTypes.node.isRequired,
+  /** Specifies class name to append to the base element. */
+  className: PropTypes.string,
+  /** Specifies class name for control component. */
+  controlClassName: PropTypes.string,
+  /** Specifies class name for label component. */
+  labelClassName: PropTypes.string,
+  /** Specifies description to show under the checkbox. */
+  description: PropTypes.node,
+  /** Specifies whether to display checkbox in invalid state, this affects styling. */
+  isInvalid: PropTypes.bool,
+  /** Specifies whether to display checkbox in valid state, this affects styling. */
+  isValid: PropTypes.bool,
+  /** Specifies control element. */
+  controlAs: PropTypes.elementType,
+  /** Specifies whether the floating label should be aligned to the left. */
+  floatLabelLeft: PropTypes.bool,
+  /** Specifies whether the `FormCheckbox` is disabled. */
+  disabled: PropTypes.bool,
+};
+
+FormCheckbox.defaultProps = {
+  id: undefined,
+  className: undefined,
+  controlClassName: undefined,
+  labelClassName: undefined,
+  description: undefined,
+  isInvalid: false,
+  isValid: false,
+  controlAs: CheckboxControl,
+  floatLabelLeft: false,
+  disabled: false,
+};
+
+export { CheckboxControl };
+export default FormCheckbox;
diff --git a/src/editors/sharedComponents/SelectableBox/FormCheckboxSet.jsx b/src/editors/sharedComponents/SelectableBox/FormCheckboxSet.jsx
new file mode 100644
index 0000000000..2d90cada08
--- /dev/null
+++ b/src/editors/sharedComponents/SelectableBox/FormCheckboxSet.jsx
@@ -0,0 +1,68 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useFormGroupContext } from './FormGroupContext';
+import { FormCheckboxSetContextProvider } from './FormCheckboxSetContext';
+import FormControlSet from './FormControlSet';
+
+const FormCheckboxSet = ({
+  children,
+  name,
+  value,
+  defaultValue,
+  isInline,
+  onChange,
+  onFocus,
+  onBlur,
+  ...props
+}) => {
+  const { getControlProps, useSetIsControlGroupEffect } = useFormGroupContext();
+  useSetIsControlGroupEffect(true);
+  const controlProps = getControlProps(props);
+  return (
+    <FormCheckboxSetContextProvider
+      name={name}
+      value={value}
+      defaultValue={defaultValue}
+      onFocus={onFocus}
+      onBlur={onBlur}
+      onChange={onChange}
+    >
+      <FormControlSet role="group" isInline={isInline} {...controlProps}>
+        {children}
+      </FormControlSet>
+    </FormCheckboxSetContextProvider>
+  );
+};
+
+FormCheckboxSet.propTypes = {
+  /** Specifies contents of the component. */
+  children: PropTypes.node.isRequired,
+  /** Specifies class name to append to the base element. */
+  className: PropTypes.string,
+  /** Specifies name for the component. */
+  name: PropTypes.string.isRequired,
+  /** Specifies values for the checkboxes. */
+  value: PropTypes.arrayOf(PropTypes.string),
+  /** Specifies default values for the checkboxes. */
+  defaultValue: PropTypes.arrayOf(PropTypes.string),
+  /** Specifies whether to display components with inline styling. */
+  isInline: PropTypes.bool,
+  /** Specifies onChange event handler. */
+  onChange: PropTypes.func,
+  /** Specifies onFocus event handler. */
+  onFocus: PropTypes.func,
+  /** Specifies onBlur event handler. */
+  onBlur: PropTypes.func,
+};
+
+FormCheckboxSet.defaultProps = {
+  className: undefined,
+  value: undefined,
+  defaultValue: undefined,
+  isInline: false,
+  onChange: undefined,
+  onFocus: undefined,
+  onBlur: undefined,
+};
+
+export default FormCheckboxSet;
diff --git a/src/editors/sharedComponents/SelectableBox/FormCheckboxSetContext.jsx b/src/editors/sharedComponents/SelectableBox/FormCheckboxSetContext.jsx
new file mode 100644
index 0000000000..1dd45b5240
--- /dev/null
+++ b/src/editors/sharedComponents/SelectableBox/FormCheckboxSetContext.jsx
@@ -0,0 +1,77 @@
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import { callAllHandlers } from './fieldUtils';
+
+const identityFn = props => props;
+
+const FormCheckboxSetContext = React.createContext({
+  getCheckboxControlProps: identityFn,
+  hasCheckboxSetProvider: false,
+});
+
+const useCheckboxSetContext = () => useContext(FormCheckboxSetContext);
+
+const FormCheckboxSetContextProvider = ({
+  children,
+  name,
+  onBlur,
+  onFocus,
+  onChange,
+  value,
+  defaultValue,
+}) => {
+  const isControlled = !defaultValue && Array.isArray(value);
+  const getCheckboxControlProps = (checkboxProps) => ({
+    ...checkboxProps,
+    name,
+    /* istanbul ignore next */
+    onBlur: checkboxProps.onBlur ? callAllHandlers(onBlur, checkboxProps.onBlur) : onBlur,
+    /* istanbul ignore next */
+    onFocus: checkboxProps.onFocus ? callAllHandlers(onFocus, checkboxProps.onFocus) : onFocus,
+    /* istanbul ignore next */
+    onChange: checkboxProps.onChange ? callAllHandlers(onChange, checkboxProps.onChange) : onChange,
+    checked: isControlled ? value.includes(checkboxProps.value) : undefined,
+    defaultChecked: isControlled ? undefined : (defaultValue && defaultValue.includes(checkboxProps.value)),
+  });
+  // eslint-disable-next-line react/jsx-no-constructed-context-values
+  const contextValue = {
+    name,
+    value,
+    defaultValue,
+    getCheckboxControlProps,
+    onBlur,
+    onFocus,
+    onChange,
+    hasCheckboxSetProvider: true,
+  };
+  return (
+    <FormCheckboxSetContext.Provider value={contextValue}>
+      {children}
+    </FormCheckboxSetContext.Provider>
+  );
+};
+
+FormCheckboxSetContextProvider.propTypes = {
+  children: PropTypes.node.isRequired,
+  name: PropTypes.string,
+  onBlur: PropTypes.func,
+  onFocus: PropTypes.func,
+  onChange: PropTypes.func,
+  value: PropTypes.arrayOf(PropTypes.string),
+  defaultValue: PropTypes.arrayOf(PropTypes.string),
+};
+
+FormCheckboxSetContextProvider.defaultProps = {
+  onBlur: undefined,
+  name: undefined,
+  onFocus: undefined,
+  onChange: undefined,
+  value: undefined,
+  defaultValue: undefined,
+};
+
+export default FormCheckboxSetContext;
+export {
+  useCheckboxSetContext,
+  FormCheckboxSetContextProvider,
+};
diff --git a/src/editors/sharedComponents/SelectableBox/FormControlFeedback.jsx b/src/editors/sharedComponents/SelectableBox/FormControlFeedback.jsx
new file mode 100644
index 0000000000..b4e211218a
--- /dev/null
+++ b/src/editors/sharedComponents/SelectableBox/FormControlFeedback.jsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { useFormGroupContext } from './FormGroupContext';
+import FormText, { resolveTextType } from './FormText';
+
+const FormControlFeedback = ({ children, ...props }) => {
+  const { getDescriptorProps, isInvalid, isValid } = useFormGroupContext();
+  const descriptorProps = getDescriptorProps(props);
+  const className = classNames('pgn__form-control-description', props.className);
+  const textType = props.type || resolveTextType({ isInvalid, isValid });
+  return (
+    <FormText
+      {...descriptorProps}
+      className={className}
+      type={textType}
+    >
+      {children}
+    </FormText>
+  );
+};
+
+const FEEDBACK_TYPES = [
+  'default',
+  'valid',
+  'invalid',
+  'warning',
+  'criteria-empty',
+  'criteria-valid',
+  'criteria-invalid',
+];
+
+FormControlFeedback.propTypes = {
+  /** Specifies contents of the component. */
+  children: PropTypes.node.isRequired,
+  /** Specifies class name to append to the base element. */
+  className: PropTypes.string,
+  /** Specifies whether to show an icon next to the text. */
+  hasIcon: PropTypes.bool,
+  /** Specifies feedback type, this affects styling. */
+  type: PropTypes.oneOf(FEEDBACK_TYPES),
+  /** Specifies icon to show, will only be shown if `hasIcon` prop is set to `true`. */
+  icon: PropTypes.node,
+  /** Specifies whether to show feedback with muted styling. */
+  muted: PropTypes.bool,
+};
+
+FormControlFeedback.defaultProps = {
+  hasIcon: true,
+  type: undefined,
+  icon: undefined,
+  className: undefined,
+  muted: false,
+};
+
+export default FormControlFeedback;
diff --git a/src/editors/sharedComponents/SelectableBox/FormControlSet.jsx b/src/editors/sharedComponents/SelectableBox/FormControlSet.jsx
new file mode 100644
index 0000000000..69052e7675
--- /dev/null
+++ b/src/editors/sharedComponents/SelectableBox/FormControlSet.jsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+const FormControlSet = ({
+  as,
+  className,
+  isInline,
+  children,
+  ...props
+}) => React.createElement(as, {
+  className: classNames(
+    className,
+    {
+      'pgn__form-control-set': !isInline,
+      'pgn__form-control-set-inline': isInline,
+    },
+  ),
+  ...props,
+}, children);
+
+FormControlSet.propTypes = {
+  /** Specifies the base element */
+  as: PropTypes.elementType,
+  /** A class name to append to the base element. */
+  className: PropTypes.string,
+  /** Specifies whether the component should be displayed with inline styling. */
+  isInline: PropTypes.bool,
+  /** Specifies contents of the component. */
+  children: PropTypes.node,
+};
+
+FormControlSet.defaultProps = {
+  as: 'div',
+  className: undefined,
+  isInline: false,
+  children: null,
+};
+
+export default FormControlSet;
diff --git a/src/editors/sharedComponents/SelectableBox/FormGroupContext.jsx b/src/editors/sharedComponents/SelectableBox/FormGroupContext.jsx
new file mode 100644
index 0000000000..af38a4f8ab
--- /dev/null
+++ b/src/editors/sharedComponents/SelectableBox/FormGroupContext.jsx
@@ -0,0 +1,121 @@
+import React, {
+  useState, useEffect, useMemo, useCallback,
+} from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import newId from './newId';
+import { useIdList, omitUndefinedProperties } from './fieldUtils';
+import { FORM_CONTROL_SIZES } from './constants';
+
+const identityFn = props => props;
+const noop = () => {};
+
+const FormGroupContext = React.createContext({
+  getControlProps: identityFn,
+  useSetIsControlGroupEffect: noop,
+  getLabelProps: identityFn,
+  getDescriptorProps: identityFn,
+  hasFormGroupProvider: false,
+});
+
+const useFormGroupContext = () => React.useContext(FormGroupContext);
+
+const useStateEffect = (initialState) => {
+  const [state, setState] = useState(initialState);
+  const useSetStateEffect = (newState) => {
+    useEffect(() => setState(newState), [newState]);
+  };
+  return [state, useSetStateEffect];
+};
+
+const FormGroupContextProvider = ({
+  children,
+  controlId: explicitControlId,
+  isInvalid,
+  isValid,
+  size,
+}) => {
+  const controlId = useMemo(() => explicitControlId || newId('form-field'), [explicitControlId]);
+  const [describedByIds, registerDescriptorId] = useIdList(controlId);
+  const [labelledByIds, registerLabelerId] = useIdList(controlId);
+  const [isControlGroup, useSetIsControlGroupEffect] = useStateEffect(false);
+
+  const getControlProps = useCallback((controlProps) => {
+    // labelledByIds from the list above should only be added to a control
+    // if it the control is a group. We prefer adding a condition here because:
+    //    - Hooks cannot be called inside conditionals
+    //    - The getLabelProps function below is forced to generate an id
+    //      whether it is needed or not.
+    //    - This is what allows consumers of Paragon to use <Form.Label>
+    //      interchangeably between ControlGroup type controls and regular Controls
+    const labelledByIdsForControl = isControlGroup ? labelledByIds : undefined;
+    return omitUndefinedProperties({
+      ...controlProps,
+      'aria-describedby': classNames(controlProps['aria-describedby'], describedByIds) || undefined,
+      'aria-labelledby': classNames(controlProps['aria-labelledby'], labelledByIdsForControl) || undefined,
+      id: controlId,
+    });
+  }, [
+    isControlGroup,
+    describedByIds,
+    labelledByIds,
+    controlId,
+  ]);
+
+  const getLabelProps = (labelProps) => {
+    const id = registerLabelerId(labelProps?.id);
+    if (isControlGroup) {
+      return { ...labelProps, id };
+    }
+    return { ...labelProps, htmlFor: controlId };
+  };
+
+  const getDescriptorProps = (descriptorProps) => {
+    const id = registerDescriptorId(descriptorProps?.id);
+    return { ...descriptorProps, id };
+  };
+
+  // eslint-disable-next-line react/jsx-no-constructed-context-values
+  const contextValue = {
+    getControlProps,
+    getLabelProps,
+    getDescriptorProps,
+    useSetIsControlGroupEffect,
+    isControlGroup,
+    controlId,
+    isInvalid,
+    isValid,
+    size,
+    hasFormGroupProvider: true,
+  };
+
+  return (
+    <FormGroupContext.Provider value={contextValue}>
+      {children}
+    </FormGroupContext.Provider>
+  );
+};
+
+FormGroupContextProvider.propTypes = {
+  children: PropTypes.node.isRequired,
+  controlId: PropTypes.string,
+  isInvalid: PropTypes.bool,
+  isValid: PropTypes.bool,
+  size: PropTypes.oneOf([
+    FORM_CONTROL_SIZES.SMALL,
+    FORM_CONTROL_SIZES.LARGE,
+  ]),
+};
+
+FormGroupContextProvider.defaultProps = {
+  controlId: undefined,
+  isInvalid: undefined,
+  isValid: undefined,
+  size: undefined,
+};
+
+export {
+  FormGroupContext,
+  FormGroupContextProvider,
+  useFormGroupContext,
+};
diff --git a/src/editors/sharedComponents/SelectableBox/FormLabel.jsx b/src/editors/sharedComponents/SelectableBox/FormLabel.jsx
new file mode 100644
index 0000000000..7f45bb9bc8
--- /dev/null
+++ b/src/editors/sharedComponents/SelectableBox/FormLabel.jsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { useFormGroupContext } from './FormGroupContext';
+import { FORM_CONTROL_SIZES } from './constants';
+
+const FormLabel = ({ children, isInline, ...props }) => {
+  const { size, isControlGroup, getLabelProps } = useFormGroupContext();
+  const className = classNames(
+    'pgn__form-label',
+    {
+      'pgn__form-label-inline': isInline,
+      'pgn__form-label-lg': size === FORM_CONTROL_SIZES.LARGE,
+      'pgn__form-label-sm': size === FORM_CONTROL_SIZES.SMALL,
+    },
+    props.className,
+  );
+  const labelProps = getLabelProps({ ...props, className });
+  const componentType = isControlGroup ? 'p' : 'label';
+  return React.createElement(componentType, labelProps, children);
+};
+
+const SIZE_CHOICES = ['sm', 'lg'];
+
+FormLabel.propTypes = {
+  /** Specifies class name to append to the base element. */
+  className: PropTypes.string,
+  /** Specifies contents of the component. */
+  children: PropTypes.node.isRequired,
+  /** Specifies whether the component should be displayed with inline styling. */
+  isInline: PropTypes.bool,
+  /** Specifies size of the component. */
+  size: PropTypes.oneOf(SIZE_CHOICES),
+};
+
+FormLabel.defaultProps = {
+  isInline: false,
+  size: undefined,
+  className: undefined,
+};
+
+export default FormLabel;
diff --git a/src/editors/sharedComponents/SelectableBox/FormRadio.jsx b/src/editors/sharedComponents/SelectableBox/FormRadio.jsx
new file mode 100644
index 0000000000..43e4133d66
--- /dev/null
+++ b/src/editors/sharedComponents/SelectableBox/FormRadio.jsx
@@ -0,0 +1,110 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { useRadioSetContext } from './FormRadioSetContext';
+import { FormGroupContextProvider, useFormGroupContext } from './FormGroupContext';
+import FormLabel from './FormLabel';
+import FormControlFeedback from './FormControlFeedback';
+
+const RadioControl = React.forwardRef((props, ref) => {
+  const { getControlProps } = useFormGroupContext();
+  const { getRadioControlProps, hasRadioSetProvider } = useRadioSetContext();
+  let radioProps = getControlProps({
+    ...props,
+    className: classNames('pgn__form-radio-input', props.className),
+  });
+
+  if (hasRadioSetProvider) {
+    radioProps = getRadioControlProps(radioProps);
+  }
+
+  const onChange = (...args) => {
+    if (radioProps.onChange) {
+      radioProps.onChange(...args);
+    }
+  };
+
+  return (
+    <input {...{ ...radioProps, onChange }} type="radio" ref={ref} />
+  );
+});
+
+RadioControl.propTypes = {
+  className: PropTypes.string,
+};
+
+RadioControl.defaultProps = {
+  className: undefined,
+};
+
+const FormRadio = React.forwardRef(({
+  children,
+  className,
+  controlClassName,
+  labelClassName,
+  description,
+  isInvalid,
+  isValid,
+  ...props
+}, ref) => (
+  <FormGroupContextProvider
+    controlId={props.id}
+    isInvalid={isInvalid}
+    isValid={isValid}
+  >
+    <div
+      className={classNames('pgn__form-radio', className, {
+        'pgn__form-control-valid': isValid,
+        'pgn__form-control-invalid': isInvalid,
+        'pgn__form-control-disabled': props.disabled,
+      })}
+    >
+      <RadioControl ref={ref} className={controlClassName} {...props} />
+      <div>
+        <FormLabel className={labelClassName}>
+          {children}
+        </FormLabel>
+        {description && (
+          <FormControlFeedback hasIcon={false}>
+            {description}
+          </FormControlFeedback>
+        )}
+      </div>
+    </div>
+  </FormGroupContextProvider>
+));
+
+FormRadio.propTypes = {
+  /** Specifies id of the FormRadio component. */
+  id: PropTypes.string,
+  /** Specifies contents of the component. */
+  children: PropTypes.node.isRequired,
+  /** Specifies class name to append to the base element. */
+  className: PropTypes.string,
+  /** Specifies class name for control component. */
+  controlClassName: PropTypes.string,
+  /** Specifies class name for label component. */
+  labelClassName: PropTypes.string,
+  /** Specifies description to show under the radio's value. */
+  description: PropTypes.node,
+  /** Specifies whether to display component in invalid state, this affects styling. */
+  isInvalid: PropTypes.bool,
+  /** Specifies whether to display component in valid state, this affects styling. */
+  isValid: PropTypes.bool,
+  /** Specifies whether the `FormRadio` is disabled. */
+  disabled: PropTypes.bool,
+};
+
+FormRadio.defaultProps = {
+  id: undefined,
+  className: undefined,
+  controlClassName: undefined,
+  labelClassName: undefined,
+  description: undefined,
+  isInvalid: false,
+  isValid: false,
+  disabled: false,
+};
+
+export { RadioControl };
+export default FormRadio;
diff --git a/src/editors/sharedComponents/SelectableBox/FormRadioSet.jsx b/src/editors/sharedComponents/SelectableBox/FormRadioSet.jsx
new file mode 100644
index 0000000000..05524ba20d
--- /dev/null
+++ b/src/editors/sharedComponents/SelectableBox/FormRadioSet.jsx
@@ -0,0 +1,68 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useFormGroupContext } from './FormGroupContext';
+import { FormRadioSetContextProvider } from './FormRadioSetContext';
+import FormControlSet from './FormControlSet';
+
+const FormRadioSet = ({
+  children,
+  name,
+  value,
+  defaultValue,
+  isInline,
+  onChange,
+  onFocus,
+  onBlur,
+  ...props
+}) => {
+  const { getControlProps, useSetIsControlGroupEffect } = useFormGroupContext();
+  useSetIsControlGroupEffect(true);
+  const controlProps = getControlProps(props);
+  return (
+    <FormRadioSetContextProvider
+      name={name}
+      value={value}
+      defaultValue={defaultValue}
+      onFocus={onFocus}
+      onBlur={onBlur}
+      onChange={onChange}
+    >
+      <FormControlSet role="radiogroup" isInline={isInline} {...controlProps}>
+        {children}
+      </FormControlSet>
+    </FormRadioSetContextProvider>
+  );
+};
+
+FormRadioSet.propTypes = {
+  /** Specifies contents of the component. */
+  children: PropTypes.node.isRequired,
+  /** A class name to append to the base element. */
+  className: PropTypes.string,
+  /** Specifies name for the component. */
+  name: PropTypes.string.isRequired,
+  /** Specifies values for the FormRadioSet. */
+  value: PropTypes.string,
+  /** Specifies default values. */
+  defaultValue: PropTypes.string,
+  /** Specifies whether the component should be displayed with inline styling. */
+  isInline: PropTypes.bool,
+  /** Specifies onChange event handler. */
+  onChange: PropTypes.func,
+  /** Specifies onFocus event handler. */
+  onFocus: PropTypes.func,
+  /** Specifies onBlur event handler. */
+  onBlur: PropTypes.func,
+};
+
+FormRadioSet.defaultProps = {
+  className: undefined,
+  value: undefined,
+  defaultValue: undefined,
+  isInline: false,
+  onChange: undefined,
+  onFocus: undefined,
+  onBlur: undefined,
+};
+
+export default FormRadioSet;
diff --git a/src/editors/sharedComponents/SelectableBox/FormRadioSetContext.jsx b/src/editors/sharedComponents/SelectableBox/FormRadioSetContext.jsx
new file mode 100644
index 0000000000..41716cadd1
--- /dev/null
+++ b/src/editors/sharedComponents/SelectableBox/FormRadioSetContext.jsx
@@ -0,0 +1,79 @@
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import { callAllHandlers } from './fieldUtils';
+
+const identityFn = props => props;
+
+const FormRadioSetContext = React.createContext({
+  getRadioControlProps: identityFn,
+  hasRadioSetProvider: false,
+});
+
+const useRadioSetContext = () => useContext(FormRadioSetContext);
+
+const FormRadioSetContextProvider = ({
+  children,
+  name,
+  onBlur,
+  onFocus,
+  onChange,
+  value,
+  defaultValue,
+}) => {
+  const handleChange = (...args) => {
+    onChange(...args);
+  };
+  const isControlled = !defaultValue && value !== undefined;
+  const getRadioControlProps = (radioProps) => ({
+    ...radioProps,
+    name,
+    /* istanbul ignore next */
+    onBlur: radioProps.onBlur ? callAllHandlers(onBlur, radioProps.onBlur) : onBlur,
+    /* istanbul ignore next */
+    onFocus: radioProps.onFocus ? callAllHandlers(onFocus, radioProps.onFocus) : onFocus,
+    /* istanbul ignore next */
+    onChange: radioProps.onChange ? callAllHandlers(handleChange, radioProps.onChange) : onChange,
+    checked: isControlled ? value === radioProps.value : undefined,
+    defaultChecked: isControlled ? undefined : defaultValue === radioProps.value,
+  });
+  // eslint-disable-next-line react/jsx-no-constructed-context-values
+  const contextValue = {
+    name,
+    value,
+    defaultValue,
+    getRadioControlProps,
+    onBlur,
+    onFocus,
+    onChange,
+    hasRadioSetProvider: true,
+  };
+  return (
+    <FormRadioSetContext.Provider value={contextValue}>
+      {children}
+    </FormRadioSetContext.Provider>
+  );
+};
+
+FormRadioSetContextProvider.propTypes = {
+  children: PropTypes.node.isRequired,
+  name: PropTypes.string.isRequired,
+  onBlur: PropTypes.func,
+  onFocus: PropTypes.func,
+  onChange: PropTypes.func,
+  value: PropTypes.string,
+  defaultValue: PropTypes.string,
+};
+
+FormRadioSetContextProvider.defaultProps = {
+  onBlur: undefined,
+  onFocus: undefined,
+  onChange: undefined,
+  value: undefined,
+  defaultValue: undefined,
+};
+
+export default FormRadioSetContext;
+export {
+  useRadioSetContext,
+  FormRadioSetContextProvider,
+};
diff --git a/src/editors/sharedComponents/SelectableBox/FormText.jsx b/src/editors/sharedComponents/SelectableBox/FormText.jsx
new file mode 100644
index 0000000000..f6469a1512
--- /dev/null
+++ b/src/editors/sharedComponents/SelectableBox/FormText.jsx
@@ -0,0 +1,115 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+// import Icon from '../Icon';
+// import {
+//   Check, Close, Cancel, CheckCircle, RadioButtonUnchecked, WarningFilled,
+// } from '../../icons';
+
+import { FORM_TEXT_TYPES } from './constants';
+
+// const FORM_TEXT_ICONS = {
+//   [FORM_TEXT_TYPES.DEFAULT]: null,
+//   [FORM_TEXT_TYPES.VALID]: Check,
+//   [FORM_TEXT_TYPES.INVALID]: Close,
+//   [FORM_TEXT_TYPES.WARNING]: WarningFilled,
+//   [FORM_TEXT_TYPES.CRITERIA_EMPTY]: RadioButtonUnchecked,
+//   [FORM_TEXT_TYPES.CRITERIA_VALID]: CheckCircle,
+//   [FORM_TEXT_TYPES.CRITERIA_INVALID]: Cancel,
+// };
+
+const resolveTextType = ({ isInvalid, isValid }) => {
+  if (isValid) {
+    return FORM_TEXT_TYPES.VALID;
+  }
+  if (isInvalid) {
+    return FORM_TEXT_TYPES.INVALID;
+  }
+  return FORM_TEXT_TYPES.DEFAULT;
+};
+
+// const FormTextIcon = ({ type, customIcon }) => {
+//   if (customIcon) {
+//     return customIcon;
+//   }
+
+//   const typeIcon = FORM_TEXT_ICONS[type];
+//   if (typeIcon) {
+//     return <Icon src={typeIcon} />;
+//   }
+
+//   return null;
+// };
+
+// FormTextIcon.propTypes = {
+//   type: PropTypes.oneOf(Object.values(FORM_TEXT_TYPES)),
+//   customIcon: PropTypes.node,
+// };
+
+// FormTextIcon.defaultProps = {
+//   type: undefined,
+//   customIcon: undefined,
+// };
+
+const FormText = ({
+  children, type, icon, muted, hasIcon, ...props
+}) => {
+  const className = classNames(
+    props.className,
+    'pgn__form-text',
+    `pgn__form-text-${type}`,
+    {
+      'text-muted': muted,
+    },
+  );
+
+  return (
+    <div {...props} className={className}>
+      {/* {hasIcon && <FormTextIcon customIcon={icon} type={type} />} */}
+      <div>
+        {children}
+      </div>
+    </div>
+  );
+};
+
+const FORM_TEXT_TYPE_CHOICES = [
+  'default',
+  'valid',
+  'invalid',
+  'warning',
+  'criteria-empty',
+  'criteria-valid',
+  'criteria-invalid',
+];
+
+FormText.propTypes = {
+  /** Specifies contents of the component. */
+  children: PropTypes.node.isRequired,
+  /** Specifies class name to append to the base element. */
+  className: PropTypes.string,
+  /** Specifies whether to show an icon next to the text. */
+  hasIcon: PropTypes.bool,
+  /** Specifies text type, this affects styling. */
+  type: PropTypes.oneOf(FORM_TEXT_TYPE_CHOICES),
+  /** Specifies icon to show, will only be shown if `hasIcon` prop is set to `true`. */
+  icon: PropTypes.node,
+  /** Specifies whether to show text with muted styling. */
+  muted: PropTypes.bool,
+};
+
+FormText.defaultProps = {
+  hasIcon: true,
+  type: 'default',
+  icon: undefined,
+  className: undefined,
+  muted: false,
+};
+
+export default FormText;
+export {
+  FORM_TEXT_TYPES,
+  // FORM_TEXT_ICONS,
+  // FormTextIcon,
+  resolveTextType,
+};
diff --git a/src/editors/sharedComponents/SelectableBox/README.md b/src/editors/sharedComponents/SelectableBox/README.md
new file mode 100644
index 0000000000..4ab1f417da
--- /dev/null
+++ b/src/editors/sharedComponents/SelectableBox/README.md
@@ -0,0 +1,215 @@
+---
+title: 'SelectableBox'
+type: 'component'
+components:
+- SelectableBox
+- SelectableBoxSet
+categories:
+- Forms
+- Content
+status: 'New'
+designStatus: 'Done'
+devStatus: 'In progress'
+notes: |
+---
+
+A box that has selection states. It can be used as an alternative to a radio button or checkbox set.
+
+The ``SelectableBox`` can contain any kind of content as long as it is not clickable. In other words, there should be no clickable targets distinct from selection.
+
+## Basic Usage
+
+As ``Checkbox``
+
+```jsx live
+() => {
+  const type = 'checkbox';
+  const allCheeseOptions = ['swiss', 'cheddar', 'pepperjack'];
+  const [checkedCheeses, { add, remove, set, clear }] = useCheckboxSetValues(['swiss']);
+
+  const handleChange = e => {
+    e.target.checked ? add(e.target.value) : remove(e.target.value);
+  };
+  
+  const isInvalid = () => checkedCheeses.includes('swiss');
+  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });
+  
+  return (
+    <div className="bg-light-200 p-3">
+      <SelectableBox.Set
+        value={checkedCheeses}
+        type={type}
+        onChange={handleChange}
+        name="cheeses"
+        columns={isExtraSmall ? 1 : 2}
+        ariaLabel="cheese selection"
+      >
+        <SelectableBox value="swiss" type={type} aria-label="swiss checkbox">
+          <div>
+            <h3>It is my first SelectableBox</h3>
+            <p>Swiss</p>
+          </div>
+        </SelectableBox>
+        <SelectableBox value="cheddar" inputHidden={false} type={type} aria-label="cheddar checkbox">
+          Cheddar
+        </SelectableBox>
+        <SelectableBox
+          value="pepperjack"
+          inputHidden={false}
+          type={type}
+          isInvalid={isInvalid()}
+          aria-label="pepperjack checkbox"
+        >
+          <h3>Pepperjack</h3>
+        </SelectableBox>
+      </SelectableBox.Set>
+    </div>
+  );
+}
+```
+
+## As Radio
+
+```jsx live
+() => {
+  const type = 'radio';
+  const [value, setValue] = useState('green');
+  const handleChange = e => setValue(e.target.value);
+  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });
+
+  return (
+    <SelectableBox.Set
+      type={type}
+      value={value}
+      onChange={handleChange}
+      name="colors"
+      columns={isExtraSmall ? 1 : 3}
+      ariaLabel="color selection"
+    >
+      <SelectableBox value="red" type={type} aria-label="red checkbox">
+        <div>
+          <h3>It is Red color</h3>
+          <p>Select me</p>
+        </div>
+      </SelectableBox>
+      <SelectableBox value="green" inputHidden={false} type={type} aria-label="green-checkbox">
+        <h3>Green</h3>
+        <p>Leaves and grass</p>
+      </SelectableBox>
+      <SelectableBox value="blue" inputHidden={false} type={type} aria-label="blue checkbox">
+        <h3>Blue</h3>
+        <p>The sky</p>
+      </SelectableBox>
+    </SelectableBox.Set>
+  );
+}
+```
+## As Checkbox
+As ``Checkbox`` with ``isIndeterminate``
+
+```jsx live
+() => {
+  const type = 'checkbox';
+  const allCheeseOptions = ['swiss', 'cheddar', 'pepperjack'];
+  const [checkedCheeses, { add, remove, set, clear }] = useCheckboxSetValues(['swiss']);
+
+  const allChecked = allCheeseOptions.every(value => checkedCheeses.includes(value));
+  const someChecked = allCheeseOptions.some(value => checkedCheeses.includes(value));
+  const isIndeterminate = someChecked && !allChecked;
+  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.small.maxWidth });
+
+  const handleChange = e => {
+    e.target.checked ? add(e.target.value) : remove(e.target.value);
+  };
+
+  const handleCheckAllChange = ({ checked }) => {
+    checked ? set(allCheeseOptions) : clear();
+  };
+
+  return (
+    <>
+      <div className="mb-3">
+        <SelectableBox
+          checked={allChecked}
+          isIndeterminate={isIndeterminate}
+          onClick={handleCheckAllChange}
+          inputHidden={false}
+          type={type}
+          aria-label="all options checkbox"
+        >
+          All the cheese
+        </SelectableBox>
+      </div>
+      <SelectableBox.Set
+        value={checkedCheeses}
+        type={type}
+        onChange={handleChange}
+        name="cheeses"
+        columns={isExtraSmall ? 1 : 3}
+        ariaLabel="cheese selection"
+      >
+        <SelectableBox value="swiss" type={type} aria-label="swiss checkbox">
+          <div>
+            <h3>It is my first SelectableBox</h3>
+            <p>Swiss</p>
+          </div>
+        </SelectableBox>
+        <SelectableBox value="cheddar" inputHidden={false} type={type} aria-label="cheddar checkbox">
+          Cheddar
+        </SelectableBox>
+        <SelectableBox value="pepperjack" inputHidden={false} type={type} aria-label="pepperjack checkbox">
+          <h3>Pepperjack</h3>
+        </SelectableBox>
+      </SelectableBox.Set>
+    </>
+  );
+}
+```
+
+As ``Checkbox`` with ``ariaLabelledby``
+
+```jsx live
+() => {
+  const type = 'checkbox';
+  const allCheeseOptions = ['swiss', 'cheddar', 'pepperjack'];
+  const [checkedCheeses, { add, remove, set, clear }] = useCheckboxSetValues(['swiss']);
+
+  const handleChange = e => {
+    e.target.checked ? add(e.target.value) : remove(e.target.value);
+  };
+  
+  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });
+  
+  return (
+    <div className="bg-light-200 p-3">
+      <h3 id="cheese selection" className="mb-4">
+        Select your favorite cheese
+      </h3>
+      <SelectableBox.Set
+        value={checkedCheeses}
+        type={type}
+        onChange={handleChange}
+        name="cheeses"
+        columns={isExtraSmall ? 1 : 3}
+        ariaLabelledby="cheese selection"
+      >
+        <SelectableBox value="swiss" inputHidden={false} type={type} aria-label="swiss checkbox">
+          <h3>
+            Swiss
+          </h3>
+        </SelectableBox>
+        <SelectableBox value="cheddar" inputHidden={false} type={type} aria-label="cheddar checkbox">
+          <h3>
+            Cheddar
+          </h3>
+        </SelectableBox>
+        <SelectableBox value="pepperjack" inputHidden={false} type={type} aria-label="pepperjack checkbox">
+          <h3>
+            Pepperjack
+          </h3>
+        </SelectableBox>
+      </SelectableBox.Set>
+    </div>
+  );
+}
+```
diff --git a/src/editors/sharedComponents/SelectableBox/SelectableBoxSet.jsx b/src/editors/sharedComponents/SelectableBox/SelectableBoxSet.jsx
new file mode 100644
index 0000000000..a96cccab53
--- /dev/null
+++ b/src/editors/sharedComponents/SelectableBox/SelectableBoxSet.jsx
@@ -0,0 +1,98 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { getInputType } from './utils';
+// import { requiredWhenNot } from '../utils/propTypes';
+
+const INPUT_TYPES = [
+  'radio',
+  'checkbox',
+];
+
+const DEFAULT_COLUMNS_NUMBER = 2;
+
+const SelectableBoxSet = React.forwardRef(({
+  children,
+  name,
+  value,
+  defaultValue,
+  onChange,
+  type,
+  columns,
+  className,
+  ariaLabel,
+  ariaLabelledby,
+  ...props
+}, ref) => {
+  const inputType = getInputType('SelectableBoxSet', type);
+
+  return React.createElement(
+    inputType,
+    {
+      name,
+      value,
+      defaultValue,
+      onChange,
+      ref,
+      className: classNames(
+        'pgn__selectable_box-set',
+        `pgn__selectable_box-set--${columns || DEFAULT_COLUMNS_NUMBER}`,
+        className,
+      ),
+      'aria-label': ariaLabel,
+      'aria-labelledby': ariaLabelledby,
+      ...props,
+    },
+    children,
+  );
+});
+
+SelectableBoxSet.propTypes = {
+  /** Specifies a name for the group of `SelectableBox`'es. */
+  name: PropTypes.string.isRequired,
+  /** Content of the `SelectableBoxSet`. */
+  children: PropTypes.node,
+  /** A function that receives event of the clicked `SelectableBox` and can be used to handle the value change. */
+  onChange: PropTypes.func,
+  /** Indicates selected `SelectableBox`'es. */
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
+  /** Specifies default values for the `SelectableBox`'es. */
+  defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  /** Indicates the input type: checkbox or radio. */
+  type: PropTypes.oneOf(INPUT_TYPES),
+  /**
+   * Specifies number of `SelectableBox`'es in a row.
+   *
+   * Class that is responsible for the columns number: `pgn__selectable_box-set--{columns}`.
+   * Max number of columns: `12`.
+   */
+  columns: PropTypes.number,
+  /** A class that is be appended to the base element. */
+  className: PropTypes.string,
+  /**
+   * The ID of the label for the `SelectableBoxSet`.
+   *
+   * An accessible label must be provided to the `SelectableBoxSet`.
+   */
+  ariaLabelledby: PropTypes.string,
+  /**
+   * A label for the `SelectableBoxSet`.
+   *
+   * If not using `ariaLabelledby`, then `ariaLabel` must be provided */
+  // eslint-disable-next-line react/forbid-prop-types
+  ariaLabel: PropTypes.any, // requiredWhenNot(PropTypes.string, 'ariaLabelledby'),
+};
+
+SelectableBoxSet.defaultProps = {
+  children: undefined,
+  onChange: () => {},
+  value: undefined,
+  defaultValue: undefined,
+  type: 'radio',
+  columns: DEFAULT_COLUMNS_NUMBER,
+  className: undefined,
+  ariaLabelledby: undefined,
+  ariaLabel: undefined,
+};
+
+export default SelectableBoxSet;
diff --git a/src/editors/sharedComponents/SelectableBox/_variables.scss b/src/editors/sharedComponents/SelectableBox/_variables.scss
new file mode 100644
index 0000000000..b7d4e114db
--- /dev/null
+++ b/src/editors/sharedComponents/SelectableBox/_variables.scss
@@ -0,0 +1,5 @@
+$selectable-box-padding:                   1rem !default;
+$selectable-box-border-radius:             .25rem !default;
+$selectable-box-space:                     .75rem !default;
+$min-cols-number:                          1 !default;
+$max-cols-number:                          12 !default;
diff --git a/src/editors/sharedComponents/SelectableBox/constants.ts b/src/editors/sharedComponents/SelectableBox/constants.ts
new file mode 100644
index 0000000000..73b1fd835b
--- /dev/null
+++ b/src/editors/sharedComponents/SelectableBox/constants.ts
@@ -0,0 +1,16 @@
+const FORM_CONTROL_SIZES = {
+  SMALL: 'sm',
+  LARGE: 'lg',
+};
+
+const FORM_TEXT_TYPES = {
+  DEFAULT: 'default',
+  VALID: 'valid',
+  INVALID: 'invalid',
+  WARNING: 'warning',
+  CRITERIA_EMPTY: 'criteria-empty',
+  CRITERIA_VALID: 'criteria-valid',
+  CRITERIA_INVALID: 'criteria-invalid',
+};
+
+export { FORM_CONTROL_SIZES, FORM_TEXT_TYPES };
diff --git a/src/editors/sharedComponents/SelectableBox/fieldUtils.js b/src/editors/sharedComponents/SelectableBox/fieldUtils.js
new file mode 100644
index 0000000000..5c0d980a17
--- /dev/null
+++ b/src/editors/sharedComponents/SelectableBox/fieldUtils.js
@@ -0,0 +1,70 @@
+import classNames from 'classnames';
+import { useState, useEffect } from 'react';
+import newId from './newId';
+
+const omitUndefinedProperties = (obj = {}) => Object.entries(obj)
+  .reduce((acc, [key, value]) => {
+    if (value !== undefined) {
+      acc[key] = value;
+    }
+    return acc;
+  }, {});
+
+const callAllHandlers = (...handlers) => {
+  const unifiedEventHandler = (event) => {
+    handlers
+      .filter(handler => typeof handler === 'function')
+      .forEach(handler => handler(event));
+  };
+  return unifiedEventHandler;
+};
+
+const useHasValue = ({ defaultValue, value }) => {
+  const [hasUncontrolledValue, setHasUncontrolledValue] = useState(!!defaultValue || defaultValue === 0);
+  const hasValue = !!value || value === 0 || hasUncontrolledValue;
+  const handleInputEvent = (e) => setHasUncontrolledValue(e.target.value);
+  return [hasValue, handleInputEvent];
+};
+
+const useIdList = (uniqueIdPrefix, initialList) => {
+  const [idList, setIdList] = useState(initialList || []);
+  const addId = (idToAdd) => {
+    setIdList(oldIdList => [...oldIdList, idToAdd]);
+    return idToAdd;
+  };
+  const getNewId = () => {
+    const idToAdd = newId(`${uniqueIdPrefix}-`);
+    return addId(idToAdd);
+  };
+  const removeId = (idToRemove) => {
+    setIdList(oldIdList => oldIdList.filter(id => id !== idToRemove));
+  };
+
+  const useRegisteredId = (explicitlyRegisteredId) => {
+    const [registeredId, setRegisteredId] = useState(explicitlyRegisteredId);
+    useEffect(() => {
+      if (explicitlyRegisteredId) {
+        addId(explicitlyRegisteredId);
+      } else if (!registeredId) {
+        setRegisteredId(getNewId(uniqueIdPrefix));
+      }
+      return () => removeId(registeredId);
+    }, [registeredId, explicitlyRegisteredId]);
+    return registeredId;
+  };
+
+  return [idList, useRegisteredId];
+};
+
+const mergeAttributeValues = (...values) => {
+  const mergedValues = classNames(values);
+  return mergedValues || undefined;
+};
+
+export {
+  callAllHandlers,
+  useHasValue,
+  mergeAttributeValues,
+  useIdList,
+  omitUndefinedProperties,
+};
diff --git a/src/editors/sharedComponents/SelectableBox/index.jsx b/src/editors/sharedComponents/SelectableBox/index.jsx
new file mode 100644
index 0000000000..372bb27c55
--- /dev/null
+++ b/src/editors/sharedComponents/SelectableBox/index.jsx
@@ -0,0 +1,118 @@
+import React, { useRef, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import SelectableBoxSet from './SelectableBoxSet';
+import { useCheckboxSetContext } from './FormCheckboxSetContext';
+import { useRadioSetContext } from './FormRadioSetContext';
+import { getInputType } from './utils';
+
+const INPUT_TYPES = [
+  'radio',
+  'checkbox',
+];
+
+// The 'type: any' below is to avoid some errors while this file lacks proper
+// types. But we can probably soon just delete this file and use the upstream
+// Paragon.
+const SelectableBox = /** @type {any} */ (React.forwardRef(({
+  type,
+  value,
+  checked,
+  children,
+  isIndeterminate,
+  isInvalid,
+  onClick,
+  onFocus,
+  inputHidden,
+  className,
+  ...props
+}, ref) => {
+  const inputType = getInputType('SelectableBox', type);
+  const { value: radioValue } = useRadioSetContext();
+  const { value: checkboxValues = [] } = useCheckboxSetContext();
+
+  const isChecked = () => {
+    switch (type) {
+      case 'radio':
+        return radioValue === value;
+      case 'checkbox':
+        return checkboxValues.includes(value);
+      default:
+        return radioValue === value;
+    }
+  };
+
+  const inputRef = useRef(null);
+  const input = React.createElement(inputType, {
+    value,
+    checked,
+    hidden: inputHidden,
+    ref: inputRef,
+    tabIndex: -1,
+    onChange: () => {},
+    ...(type === 'checkbox' ? { ...props, isIndeterminate } : { ...props }),
+  }, null);
+
+  useEffect(() => {
+    if (onClick && inputRef.current) {
+      inputRef.current.onclick = () => onClick(inputRef.current);
+    }
+  }, [onClick]);
+
+  return (
+    <div
+      role="button"
+      onKeyPress={() => inputRef.current.click()}
+      onClick={() => inputRef.current.click()}
+      onFocus={onFocus}
+      className={classNames('pgn__selectable_box', className, {
+        'pgn__selectable_box-active': isChecked() || checked,
+        'pgn__selectable_box-invalid': isInvalid,
+      })}
+      tabIndex={0}
+      ref={ref}
+      {...props}
+    >
+      {input}
+      {children}
+    </div>
+  );
+}));
+
+SelectableBox.propTypes = {
+  /** Content of the `SelectableBox`. */
+  children: PropTypes.node.isRequired,
+  /** A value that is passed to the input tag. */
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  /** Controls whether `SelectableBox` is checked. */
+  checked: PropTypes.bool,
+  /** Indicates the input type: checkbox or radio. */
+  type: PropTypes.oneOf(INPUT_TYPES),
+  /** Function that is called when the `SelectableBox` is clicked. */
+  onClick: PropTypes.func,
+  /** Function that is called when the `SelectableBox` is focused. */
+  onFocus: PropTypes.func,
+  /** Controls display of the input (checkbox or radio button) on the `SelectableBox`. */
+  inputHidden: PropTypes.bool,
+  /** Indicates a state for the 'checkbox' `type` when `SelectableBox` is neither checked nor unchecked. */
+  isIndeterminate: PropTypes.bool,
+  /** Adds errors styles to the `SelectableBox`. */
+  isInvalid: PropTypes.bool,
+  /** A class that is appended to the base element. */
+  className: PropTypes.string,
+};
+
+SelectableBox.defaultProps = {
+  value: undefined,
+  checked: false,
+  type: 'radio',
+  onClick: () => {},
+  onFocus: () => {},
+  inputHidden: true,
+  isIndeterminate: false,
+  isInvalid: false,
+  className: undefined,
+};
+
+SelectableBox.Set = SelectableBoxSet;
+export default SelectableBox;
diff --git a/src/editors/sharedComponents/SelectableBox/index.scss b/src/editors/sharedComponents/SelectableBox/index.scss
new file mode 100644
index 0000000000..1038286af2
--- /dev/null
+++ b/src/editors/sharedComponents/SelectableBox/index.scss
@@ -0,0 +1,54 @@
+@import "variables";
+
+.pgn__selectable_box-set {
+  display: grid;
+  grid-auto-rows: 1fr;
+  grid-gap: $selectable-box-space;
+
+  @for $i from $min-cols-number through $max-cols-number {
+    &.pgn__selectable_box-set--#{$i} {
+      grid-template-columns: repeat(#{$i}, 1fr);
+    }
+  }
+
+  & > * + * {
+    margin: 0;
+  }
+}
+
+.pgn__selectable_box {
+  position: relative;
+  height: 100%;
+  padding: $selectable-box-padding;
+  box-shadow: $level-1-box-shadow;
+  border-radius: $selectable-box-border-radius;
+  text-align: start;
+  background: $white;
+
+  &:focus-visible {
+    outline: 1px solid $primary-700;
+  }
+
+  .pgn__form-radio,
+  .pgn__form-checkbox {
+    position: absolute;
+    top: $selectable-box-padding;
+    inset-inline-end: $selectable-box-padding;
+
+    input {
+      margin-inline-end: 0;
+    }
+  }
+
+  * {
+    pointer-events: none;
+  }
+}
+
+.pgn__selectable_box-active {
+  outline: 2px solid $primary-500;
+}
+
+.pgn__selectable_box-invalid {
+  outline: 2px solid $danger-300;
+}
diff --git a/src/editors/sharedComponents/SelectableBox/newId.js b/src/editors/sharedComponents/SelectableBox/newId.js
new file mode 100644
index 0000000000..9055c9e31a
--- /dev/null
+++ b/src/editors/sharedComponents/SelectableBox/newId.js
@@ -0,0 +1,8 @@
+let lastId = 0;
+
+const newId = (prefix = 'id') => {
+  lastId += 1;
+  return `${prefix}${lastId}`;
+};
+
+export default newId;
diff --git a/src/editors/sharedComponents/SelectableBox/tests/SelectableBox.test.jsx b/src/editors/sharedComponents/SelectableBox/tests/SelectableBox.test.jsx
new file mode 100644
index 0000000000..226c5a9f8b
--- /dev/null
+++ b/src/editors/sharedComponents/SelectableBox/tests/SelectableBox.test.jsx
@@ -0,0 +1,124 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import renderer from 'react-test-renderer';
+
+import SelectableBox from '..';
+
+const checkboxType = 'checkbox';
+const checkboxText = 'SelectableCheckbox';
+
+const radioType = 'radio';
+const radioText = 'SelectableRadio';
+
+const SelectableCheckbox = (props) => <SelectableBox type={checkboxType} {...props}>{checkboxText}</SelectableBox>;
+
+const SelectableRadio = (props) => <SelectableBox type={radioType} {...props}>{radioText}</SelectableBox>;
+
+describe('<SelectableBox />', () => {
+  describe('correct rendering', () => {
+    it('renders without props', () => {
+      const tree = renderer.create((
+        <SelectableBox>SelectableBox</SelectableBox>
+      )).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+    it('correct render when type prop is changed', () => {
+      const { rerender } = render(<SelectableRadio type="checkbox" />);
+      const checkboxControl = screen.getByText(radioText);
+      expect(checkboxControl).toBeTruthy();
+      rerender(<SelectableRadio type="radio" />);
+      const radioControl = screen.getByText(radioText);
+      expect(radioControl).toBeTruthy();
+    });
+    it('renders with radio input type if neither checkbox nor radio is passed', () => {
+      // Mock the `console.error` is intentional because an invalid `type` prop
+      // with `wrongType` specified for `ForwardRef` expects one of the ['radio','flag'] parameters.
+      // eslint-disable-next-line no-console
+      const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+      render(<SelectableRadio type="wrongType" />);
+      const selectableBox = screen.getByRole('button');
+      expect(selectableBox).toBeTruthy();
+      consoleErrorSpy.mockRestore();
+    });
+    it('renders with checkbox input type', () => {
+      render(<SelectableCheckbox />);
+      const selectableBox = screen.getByRole('button');
+      expect(selectableBox).toBeTruthy();
+    });
+    it('renders with radio input type', () => {
+      render(<SelectableCheckbox />);
+      const selectableBox = screen.getByRole('button');
+      expect(selectableBox).toBeTruthy();
+    });
+    it('renders with correct children', () => {
+      render(<SelectableRadio />);
+      const selectableBox = screen.getByText(radioText);
+      expect(selectableBox).toBeTruthy();
+    });
+    it('renders with correct class', () => {
+      const className = 'myClass';
+      render(<SelectableRadio className={className} />);
+      const selectableBox = screen.getByRole('button');
+      expect(selectableBox.classList.contains(className)).toEqual(true);
+    });
+    it('renders as active when checked is passed', () => {
+      render(<SelectableRadio checked />);
+      const selectableBox = screen.getByRole('button');
+      const inputElement = screen.getByRole('radio', { hidden: true });
+      expect(selectableBox.classList.contains('pgn__selectable_box-active')).toEqual(true);
+      expect(inputElement.checked).toEqual(true);
+    });
+    it('renders as invalid when isInvalid is passed', () => {
+      render(<SelectableRadio isInvalid />);
+      const selectableBox = screen.getByRole('button');
+      expect(selectableBox.classList.contains('pgn__selectable_box-invalid')).toEqual(true);
+    });
+    it('renders with on click event when onClick is passed', async () => {
+      const onClickSpy = jest.fn();
+      render(<SelectableCheckbox onClick={onClickSpy} />);
+      const selectableBox = screen.getByRole('button');
+      await userEvent.click(selectableBox);
+      expect(onClickSpy).toHaveBeenCalledTimes(1);
+    });
+    it('renders with on key press event when onClick is passed', async () => {
+      const onClickSpy = jest.fn();
+      render(<SelectableCheckbox onClick={onClickSpy} />);
+      const selectableBox = screen.getByRole('button');
+      selectableBox.focus();
+      await userEvent.keyboard('{enter}');
+      expect(onClickSpy).toHaveBeenCalledTimes(1);
+    });
+    it('renders with hidden input when inputHidden is passed', () => {
+      const { rerender } = render(<SelectableCheckbox inputHidden />);
+      const inputElement = screen.getByRole('checkbox', { hidden: true });
+      expect(inputElement.getAttribute('hidden')).toEqual('');
+      rerender(<SelectableCheckbox inputHidden={false} />);
+      expect(inputElement.getAttribute('hidden')).toBeNull();
+    });
+  });
+  describe('correct interactions', () => {
+    it('correct checkbox state change when checked is changed', () => {
+      const { rerender } = render(<SelectableCheckbox checked={false} />);
+      const checkbox = screen.getByRole('button');
+      expect(checkbox.className).not.toContain('pgn__selectable_box-active');
+      rerender(<SelectableCheckbox checked />);
+      expect(checkbox.className).toContain('pgn__selectable_box-active');
+    });
+    it('correct radio state change when checked is changed', () => {
+      const { rerender } = render(<SelectableRadio checked={false} />);
+      const radio = screen.getByRole('button');
+      expect(radio.className).toContain('pgn__selectable_box-active');
+      rerender(<SelectableRadio checked />);
+      expect(radio.className).toContain('pgn__selectable_box-active');
+    });
+    it('ref is passed to onClick function', () => {
+      let inputRef;
+      const onClick = (ref) => { inputRef = ref; };
+      render(<SelectableRadio onClick={onClick} />);
+      const radio = screen.getByRole('button');
+      userEvent.click(radio);
+      expect(inputRef).not.toBeFalsy();
+    });
+  });
+});
diff --git a/src/editors/sharedComponents/SelectableBox/tests/SelectableBoxSet.test.jsx b/src/editors/sharedComponents/SelectableBox/tests/SelectableBoxSet.test.jsx
new file mode 100644
index 0000000000..cf3db6f3c9
--- /dev/null
+++ b/src/editors/sharedComponents/SelectableBox/tests/SelectableBoxSet.test.jsx
@@ -0,0 +1,107 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import userEvent from '@testing-library/user-event';
+import SelectableBox from '..';
+
+const boxText = (text) => `SelectableBox${text}`;
+
+const checkboxType = 'checkbox';
+const checkboxText = (text) => `SelectableCheckbox${text}`;
+
+const radioType = 'radio';
+const radioText = (text) => `SelectableRadio${text}`;
+
+const ariaLabel = 'test-default-label';
+
+const SelectableBoxSet = (props) => (
+  <SelectableBox.Set name="box" ariaLabel={ariaLabel} {...props}>
+    <SelectableBox value={1}>{boxText(1)}</SelectableBox>
+    <SelectableBox value={2}>{boxText(2)}</SelectableBox>
+    <SelectableBox value={3}>{boxText(3)}</SelectableBox>
+  </SelectableBox.Set>
+);
+
+const SelectableCheckboxSet = (props) => (
+  <SelectableBox.Set name={radioType} type={checkboxType} ariaLabel={ariaLabel} {...props}>
+    <SelectableBox value={1} type={checkboxType}>{checkboxText(1)}</SelectableBox>
+    <SelectableBox value={2} type={checkboxType}>{checkboxText(2)}</SelectableBox>
+    <SelectableBox value={3} type={checkboxType}>{checkboxText(3)}</SelectableBox>
+  </SelectableBox.Set>
+);
+
+const SelectableRadioSet = (props) => (
+  <SelectableBox.Set name={radioType} type={radioType} ariaLabel={ariaLabel} {...props}>
+    <SelectableBox value={1} type={radioType}>{radioText(1)}</SelectableBox>
+    <SelectableBox value={2} type={radioType}>{radioText(2)}</SelectableBox>
+    <SelectableBox value={3} type={radioType}>{radioText(3)}</SelectableBox>
+  </SelectableBox.Set>
+);
+
+describe('<SelectableBox.Set />', () => {
+  describe('correct rendering', () => {
+    it('renders without props', () => {
+      const { container } = render(<SelectableRadioSet name="testName" />);
+      expect(container).toMatchSnapshot();
+    });
+    it('forwards props', () => {
+      render((<SelectableRadioSet name="testName" data-testid="test-radio-set-name" />));
+      expect(screen.getByTestId('test-radio-set-name')).toBeInTheDocument();
+    });
+    it('correct render when type prop is changed', () => {
+      const { rerender } = render(<SelectableRadioSet name="set" data-testid="radio-set" />);
+      expect(screen.getByTestId('radio-set')).toBeInTheDocument();
+      rerender(<SelectableRadioSet name="set" type="radio" data-testid="radio-set" />);
+      expect(screen.getByTestId('radio-set')).toBeInTheDocument();
+      rerender(<SelectableRadioSet name="set" type="checkbox" data-testid="checkbox-set" />);
+      expect(screen.getByTestId('checkbox-set')).toBeInTheDocument();
+    });
+    it('renders with children', () => {
+      render(
+        <SelectableCheckboxSet name="testName">{checkboxText(1)}</SelectableCheckboxSet>,
+      );
+      expect(screen.getByText(checkboxText(1))).toBeInTheDocument();
+    });
+    it('renders with on change event', async () => {
+      const onChangeSpy = jest.fn();
+      render(<SelectableCheckboxSet onChange={onChangeSpy} />);
+      const checkbox = screen.getByRole('button', { name: checkboxText(1) });
+      await userEvent.click(checkbox);
+      expect(onChangeSpy).toHaveBeenCalledTimes(1);
+    });
+    it('renders with checkbox type', () => {
+      render(<SelectableCheckboxSet data-testid="checkbox-set" />);
+      expect(screen.getByTestId('checkbox-set')).toBeInTheDocument();
+    });
+    it('renders with radio type if neither checkbox nor radio is passed', () => {
+      render(<SelectableBoxSet data-testid="radio-set" />);
+      expect(screen.getByTestId('radio-set')).toBeInTheDocument();
+    });
+    it('renders with radio type', () => {
+      render(<SelectableRadioSet type={radioType} data-testid="radio-set" />);
+      expect(screen.getByTestId('radio-set')).toBeInTheDocument();
+    });
+    it('renders with correct number of columns', () => {
+      const columns = 10;
+      render(<SelectableRadioSet columns={columns} data-testid="selectable-box-set" />);
+      const selectableBoxSet = screen.getByTestId('selectable-box-set');
+      expect(selectableBoxSet).toHaveClass(`pgn__selectable_box-set--${columns}`);
+    });
+    it('renders with an aria-label attribute', () => {
+      render((<SelectableRadioSet name="testName" ariaLabel="test-radio-set-label" />));
+      expect(screen.getByLabelText('test-radio-set-label')).toBeInTheDocument();
+    });
+    it('renders with an aria-labelledby attribute', () => {
+      render((
+        <>
+          <h2 id="test-radio-set-label">Radio Set Label text</h2>
+          <SelectableRadioSet
+            name="testName"
+            ariaLabelledby="test-radio-set-label"
+          />
+        </>
+      ));
+      expect(screen.getByLabelText('Radio Set Label text')).toBeInTheDocument();
+    });
+  });
+});
diff --git a/src/editors/sharedComponents/SelectableBox/tests/__snapshots__/SelectableBox.test.jsx.snap b/src/editors/sharedComponents/SelectableBox/tests/__snapshots__/SelectableBox.test.jsx.snap
new file mode 100644
index 0000000000..96676cabf5
--- /dev/null
+++ b/src/editors/sharedComponents/SelectableBox/tests/__snapshots__/SelectableBox.test.jsx.snap
@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<SelectableBox /> correct rendering renders without props 1`] = `
+<div
+  className="pgn__selectable_box pgn__selectable_box-active"
+  onClick={[Function]}
+  onFocus={[Function]}
+  onKeyPress={[Function]}
+  role="button"
+  tabIndex={0}
+>
+  <input
+    checked={false}
+    className="pgn__form-radio-input"
+    hidden={true}
+    onChange={[Function]}
+    tabIndex={-1}
+    type="radio"
+  />
+  SelectableBox
+</div>
+`;
diff --git a/src/editors/sharedComponents/SelectableBox/tests/__snapshots__/SelectableBoxSet.test.jsx.snap b/src/editors/sharedComponents/SelectableBox/tests/__snapshots__/SelectableBoxSet.test.jsx.snap
new file mode 100644
index 0000000000..4c9a0ab8f4
--- /dev/null
+++ b/src/editors/sharedComponents/SelectableBox/tests/__snapshots__/SelectableBoxSet.test.jsx.snap
@@ -0,0 +1,57 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<SelectableBox.Set /> correct rendering renders without props 1`] = `
+<div>
+  <div
+    aria-label="test-default-label"
+    class="pgn__selectable_box-set pgn__selectable_box-set--2 pgn__form-control-set"
+    role="radiogroup"
+  >
+    <div
+      class="pgn__selectable_box"
+      role="button"
+      tabindex="0"
+    >
+      <input
+        class="pgn__form-radio-input"
+        hidden=""
+        name="testName"
+        tabindex="-1"
+        type="radio"
+        value="1"
+      />
+      SelectableRadio1
+    </div>
+    <div
+      class="pgn__selectable_box"
+      role="button"
+      tabindex="0"
+    >
+      <input
+        class="pgn__form-radio-input"
+        hidden=""
+        name="testName"
+        tabindex="-1"
+        type="radio"
+        value="2"
+      />
+      SelectableRadio2
+    </div>
+    <div
+      class="pgn__selectable_box"
+      role="button"
+      tabindex="0"
+    >
+      <input
+        class="pgn__form-radio-input"
+        hidden=""
+        name="testName"
+        tabindex="-1"
+        type="radio"
+        value="3"
+      />
+      SelectableRadio3
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/editors/sharedComponents/SelectableBox/utils.js b/src/editors/sharedComponents/SelectableBox/utils.js
new file mode 100644
index 0000000000..f7199c5500
--- /dev/null
+++ b/src/editors/sharedComponents/SelectableBox/utils.js
@@ -0,0 +1,27 @@
+import { CheckboxControl } from './FormCheckbox';
+import { RadioControl } from './FormRadio';
+import FormRadioSet from './FormRadioSet';
+import FormCheckboxSet from './FormCheckboxSet';
+
+// eslint-disable-next-line consistent-return
+export const getInputType = (component, type) => {
+  if (component === 'SelectableBox') {
+    switch (type) {
+      case 'radio':
+        return RadioControl;
+      case 'checkbox':
+        return CheckboxControl;
+      default:
+        return RadioControl;
+    }
+  } else if (component === 'SelectableBoxSet') {
+    switch (type) {
+      case 'radio':
+        return FormRadioSet;
+      case 'checkbox':
+        return FormCheckboxSet;
+      default:
+        return FormRadioSet;
+    }
+  }
+};
diff --git a/src/editors/sharedComponents/SelectionModal/Gallery.jsx b/src/editors/sharedComponents/SelectionModal/Gallery.jsx
new file mode 100644
index 0000000000..fc71e81cb3
--- /dev/null
+++ b/src/editors/sharedComponents/SelectionModal/Gallery.jsx
@@ -0,0 +1,125 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Spinner } from '@openedx/paragon';
+import {
+  FormattedMessage,
+  useIntl,
+} from '@edx/frontend-platform/i18n';
+
+// SelectableBox in paragon has a bug where you can't change selection. So we override it
+import SelectableBox from '../SelectableBox';
+import messages from './messages';
+import GalleryCard from './GalleryCard';
+import GalleryLoadMoreButton from './GalleryLoadMoreButton';
+
+const Gallery = ({
+  galleryIsEmpty,
+  searchIsEmpty,
+  displayList,
+  highlighted,
+  onHighlightChange,
+  emptyGalleryLabel,
+  showIdsOnCards,
+  height,
+  isLoaded,
+  isLibrary,
+  thumbnailFallback,
+  allowLazyLoad,
+  fetchNextPage,
+  assetCount,
+}) => {
+  const intl = useIntl();
+
+  if (!isLoaded && !allowLazyLoad) {
+    return (
+      <div style={{
+        position: 'absolute',
+        left: '50%',
+        top: '50%',
+        transform: 'translate(-50%, -50%)',
+      }}
+      >
+        <Spinner
+          animation="border"
+          className="mie-3"
+          screenReaderText={intl.formatMessage(messages.loading)}
+        />
+      </div>
+    );
+  }
+  if (galleryIsEmpty) {
+    return (
+      <div className="gallery p-4 bg-light-400" style={{ height, margin: '0 -1.5rem' }}>
+        <FormattedMessage {...emptyGalleryLabel} />
+      </div>
+    );
+  }
+  if (searchIsEmpty) {
+    return (
+      <div className="gallery p-4 bg-light-400" style={{ height, margin: '0 -1.5rem' }}>
+        <FormattedMessage {...messages.emptySearchLabel} />
+      </div>
+    );
+  }
+  return (
+    <div className="p-4 gallery bg-light-400" style={{ height, margin: '0 -1.5rem' }}>
+      <SelectableBox.Set
+        columns={1}
+        name="images"
+        onChange={onHighlightChange}
+        type="radio"
+        value={highlighted}
+      >
+        {displayList.map(asset => (
+          <GalleryCard
+            key={asset.id}
+            asset={asset}
+            showId={showIdsOnCards}
+            thumbnailFallback={thumbnailFallback}
+          />
+        )) }
+      </SelectableBox.Set>
+      {(allowLazyLoad && !isLibrary) && (
+        <GalleryLoadMoreButton
+          {...{
+            fetchNextPage,
+            assetCount,
+            displayListLength: displayList.length,
+            isLoaded,
+          }}
+        />
+      )}
+    </div>
+  );
+};
+
+Gallery.defaultProps = {
+  highlighted: '',
+  showIdsOnCards: false,
+  height: '375px',
+  show: true,
+  thumbnailFallback: undefined,
+  allowLazyLoad: false,
+  fetchNextPage: null,
+  assetCount: 0,
+};
+Gallery.propTypes = {
+  show: PropTypes.bool,
+  isLoaded: PropTypes.bool.isRequired,
+  galleryIsEmpty: PropTypes.bool.isRequired,
+  searchIsEmpty: PropTypes.bool.isRequired,
+  displayList: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
+  highlighted: PropTypes.string,
+  onHighlightChange: PropTypes.func.isRequired,
+  emptyGalleryLabel: PropTypes.shape({}).isRequired,
+  isLibrary: PropTypes.bool,
+  showIdsOnCards: PropTypes.bool,
+  height: PropTypes.string,
+  thumbnailFallback: PropTypes.element,
+  allowLazyLoad: PropTypes.bool,
+  fetchNextPage: PropTypes.func,
+  assetCount: PropTypes.number,
+};
+
+export default Gallery;
diff --git a/src/editors/sharedComponents/SelectionModal/Gallery.test.jsx b/src/editors/sharedComponents/SelectionModal/Gallery.test.jsx
new file mode 100644
index 0000000000..e4ba05be25
--- /dev/null
+++ b/src/editors/sharedComponents/SelectionModal/Gallery.test.jsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import Gallery from './Gallery';
+
+jest.mock('../../data/redux', () => ({
+  selectors: {
+    requests: {
+      isFinished: (state, { requestKey }) => ({ isFinished: { state, requestKey } }),
+    },
+  },
+}));
+
+jest.mock('./GalleryCard', () => 'GalleryCard');
+
+describe('TextEditor Image Gallery component', () => {
+  describe('component', () => {
+    const props = {
+      galleryIsEmpty: false,
+      emptyGalleryLabel: {
+        id: 'emptyGalleryMsg',
+        defaultMessage: 'Empty Gallery',
+      },
+      searchIsEmpty: false,
+      displayList: [{ id: 1 }, { id: 2 }, { id: 3 }],
+      highlighted: 'props.highlighted',
+      onHighlightChange: jest.fn().mockName('props.onHighlightChange'),
+      isLoaded: true,
+      fetchNextPage: null,
+      assetCount: 0,
+      allowLazyLoad: false,
+    };
+    const shallowWithIntl = (component) => shallow(<IntlProvider locale="en">{component}</IntlProvider>);
+    test('snapshot: not loaded, show spinner', () => {
+      expect(shallowWithIntl(<Gallery {...props} isLoaded={false} />).snapshot).toMatchSnapshot();
+    });
+    test('snapshot: loaded but no images, show empty gallery', () => {
+      expect(shallowWithIntl(<Gallery {...props} galleryIsEmpty />).snapshot).toMatchSnapshot();
+    });
+    test('snapshot: loaded but search returns no images, show 0 search result gallery', () => {
+      expect(shallowWithIntl(<Gallery {...props} searchIsEmpty />).snapshot).toMatchSnapshot();
+    });
+    test('snapshot: loaded, show gallery', () => {
+      expect(shallowWithIntl(<Gallery {...props} />).snapshot).toMatchSnapshot();
+    });
+  });
+});
diff --git a/src/editors/sharedComponents/SelectionModal/GalleryCard.jsx b/src/editors/sharedComponents/SelectionModal/GalleryCard.jsx
new file mode 100644
index 0000000000..4ffcb63af2
--- /dev/null
+++ b/src/editors/sharedComponents/SelectionModal/GalleryCard.jsx
@@ -0,0 +1,118 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import {
+  Badge,
+  Image,
+  Truncate,
+} from '@openedx/paragon';
+import { FormattedMessage, FormattedDate, FormattedTime } from '@edx/frontend-platform/i18n';
+
+// SelectableBox in paragon has a bug where you can't change selection. So we override it
+import SelectableBox from '../SelectableBox';
+import messages from './messages';
+import { formatDuration } from '../../utils';
+import LanguageNamesWidget from '../../containers/VideoEditor/components/VideoSettingsModal/components/VideoPreviewWidget/LanguageNamesWidget';
+
+const GalleryCard = ({
+  asset,
+  thumbnailFallback,
+}) => {
+  const [thumbnailError, setThumbnailError] = React.useState(false);
+  return (
+    <SelectableBox
+      className="card bg-white shadow-none border-0 py-0"
+      key={asset.externalUrl}
+      type="radio"
+      value={asset.id}
+    >
+      <div className="card-div d-flex flex-row flex-nowrap align-items-center">
+        <div
+          className="position-relative"
+          style={{
+            width: '200px',
+            height: '100px',
+          }}
+        >
+          {(thumbnailError && thumbnailFallback) ? (
+            <div style={{ width: '200px', height: '100px' }}>
+              { thumbnailFallback }
+            </div>
+          ) : (
+            <Image
+              style={{ border: 'none', width: '200px', height: '100px' }}
+              src={asset.externalUrl}
+              onError={thumbnailFallback && (() => setThumbnailError(true))}
+            />
+          )}
+          { asset.statusMessage && asset.statusBadgeVariant && (
+            <Badge variant={asset.statusBadgeVariant} style={{ position: 'absolute', left: '6px', top: '6px' }}>
+              <FormattedMessage {...asset.statusMessage} />
+            </Badge>
+          )}
+          { asset.duration >= 0 && (
+            <Badge
+              variant="dark"
+              style={{
+                position: 'absolute',
+                right: '6px',
+                bottom: '6px',
+                backgroundColor: 'black',
+              }}
+            >
+              {formatDuration(asset.duration)}
+            </Badge>
+          )}
+        </div>
+        <div className="card-text px-3 py-2" style={{ marginTop: '10px' }}>
+          <h3 className="text-primary-500">
+            <Truncate>{asset.displayName}</Truncate>
+          </h3>
+          { asset.transcripts && (
+            <div style={{ margin: '0 0 5px 0' }}>
+              <LanguageNamesWidget
+                transcripts={asset.transcripts}
+              />
+            </div>
+          )}
+          {asset.dateAdded && (
+          <p className="text-gray-500" style={{ fontSize: '11px' }}>
+            <FormattedMessage
+              {...messages.addedDate}
+              values={{
+                date: <FormattedDate value={asset.dateAdded} />,
+                time: <FormattedTime value={asset.dateAdded} />,
+              }}
+            />
+          </p>
+          )}
+        </div>
+      </div>
+    </SelectableBox>
+  );
+};
+
+GalleryCard.defaultProps = {
+  thumbnailFallback: undefined,
+};
+GalleryCard.propTypes = {
+  asset: PropTypes.shape({
+    contentType: PropTypes.string,
+    displayName: PropTypes.string,
+    externalUrl: PropTypes.string,
+    id: PropTypes.string,
+    dateAdded: PropTypes.oneOfType([PropTypes.number, PropTypes.instanceOf(Date)]),
+    locked: PropTypes.bool,
+    portableUrl: PropTypes.string,
+    thumbnail: PropTypes.string,
+    url: PropTypes.string,
+    duration: PropTypes.number,
+    status: PropTypes.string,
+    statusMessage: PropTypes.objectOf(PropTypes.string),
+    statusBadgeVariant: PropTypes.string,
+    transcripts: PropTypes.arrayOf(PropTypes.string),
+  }).isRequired,
+  thumbnailFallback: PropTypes.element,
+};
+
+export default GalleryCard;
diff --git a/src/editors/sharedComponents/SelectionModal/GalleryCard.test.jsx b/src/editors/sharedComponents/SelectionModal/GalleryCard.test.jsx
new file mode 100644
index 0000000000..6cd930edf3
--- /dev/null
+++ b/src/editors/sharedComponents/SelectionModal/GalleryCard.test.jsx
@@ -0,0 +1,46 @@
+import 'CourseAuthoring/editors/setupEditorTest';
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+
+import { Image } from '@openedx/paragon';
+import GalleryCard from './GalleryCard';
+
+describe('GalleryCard component', () => {
+  const asset = {
+    externalUrl: 'props.img.externalUrl',
+    displayName: 'props.img.displayName',
+    dateAdded: 12345,
+  };
+  const thumbnailFallback = (<span>Image failed to load</span>);
+  let el;
+  beforeEach(() => {
+    el = shallow(<GalleryCard asset={asset} />);
+  });
+  test(`snapshot: dateAdded=${asset.dateAdded}`, () => {
+    expect(el.snapshot).toMatchSnapshot();
+  });
+  it('loads Image with src from image external url', () => {
+    expect(el.instance.findByType(Image)[0].props.src).toEqual(asset.externalUrl);
+  });
+  it('snapshot with thumbnail fallback and load error', () => {
+    el = shallow(<GalleryCard asset={asset} thumbnailFallback={thumbnailFallback} />);
+    el.instance.findByType(Image)[0].props.onError();
+    expect(el.snapshot).toMatchSnapshot();
+  });
+  it('snapshot with thumbnail fallback and no error', () => {
+    el = shallow(<GalleryCard asset={asset} thumbnailFallback={thumbnailFallback} />);
+    expect(el.snapshot).toMatchSnapshot();
+  });
+  it('snapshot with status badge', () => {
+    el = shallow(<GalleryCard asset={{ ...asset, status: 'failed', statusBadgeVariant: 'danger' }} />);
+    expect(el.snapshot).toMatchSnapshot();
+  });
+  it('snapshot with duration badge', () => {
+    el = shallow(<GalleryCard asset={{ ...asset, duration: 60 }} />);
+    expect(el.snapshot).toMatchSnapshot();
+  });
+  it('snapshot with duration transcripts', () => {
+    el = shallow(<GalleryCard asset={{ ...asset, transcripts: ['es'] }} />);
+    expect(el.snapshot).toMatchSnapshot();
+  });
+});
diff --git a/src/editors/sharedComponents/SelectionModal/GalleryLoadMoreButton.jsx b/src/editors/sharedComponents/SelectionModal/GalleryLoadMoreButton.jsx
new file mode 100644
index 0000000000..bdd53b119a
--- /dev/null
+++ b/src/editors/sharedComponents/SelectionModal/GalleryLoadMoreButton.jsx
@@ -0,0 +1,54 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Icon, StatefulButton } from '@openedx/paragon';
+import { ExpandMore, SpinnerSimple } from '@openedx/paragon/icons';
+
+const GalleryLoadMoreButton = ({
+  assetCount,
+  displayListLength,
+  fetchNextPage,
+  isLoaded,
+}) => {
+  const [currentPage, setCurrentPage] = useState(1);
+
+  const handlePageChange = () => {
+    fetchNextPage({ pageNumber: currentPage });
+    setCurrentPage(currentPage + 1);
+  };
+  const buttonState = isLoaded ? 'default' : 'pending';
+  const buttonProps = {
+    labels: {
+      default: 'Load more',
+      pending: 'Loading',
+    },
+    icons: {
+      default: <Icon src={ExpandMore} />,
+      pending: <Icon src={SpinnerSimple} className="icon-spin" />,
+    },
+    disabledStates: ['pending'],
+    variant: 'primary',
+  };
+
+  return (
+    <div className="row justify-content-center py-3">
+      {displayListLength !== assetCount && (
+        <StatefulButton
+          {...buttonProps}
+          onClick={handlePageChange}
+          state={buttonState}
+        />
+      )}
+    </div>
+  );
+};
+
+GalleryLoadMoreButton.propTypes = {
+  assetCount: PropTypes.number.isRequired,
+  displayListLength: PropTypes.number.isRequired,
+  fetchNextPage: PropTypes.func.isRequired,
+  currentPage: PropTypes.number.isRequired,
+  setCurrentPage: PropTypes.func.isRequired,
+  isLoaded: PropTypes.bool.isRequired,
+};
+
+export default GalleryLoadMoreButton;
diff --git a/src/editors/sharedComponents/SelectionModal/SearchSort.jsx b/src/editors/sharedComponents/SelectionModal/SearchSort.jsx
new file mode 100644
index 0000000000..a2470edc57
--- /dev/null
+++ b/src/editors/sharedComponents/SelectionModal/SearchSort.jsx
@@ -0,0 +1,140 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import {
+  ActionRow, Dropdown, Form, Icon, IconButton, SelectMenu, MenuItem,
+} from '@openedx/paragon';
+import { Check, Close, Search } from '@openedx/paragon/icons';
+import {
+  FormattedMessage,
+  useIntl,
+} from '@edx/frontend-platform/i18n';
+
+import messages from './messages';
+import './index.scss';
+import { sortKeys, sortMessages } from '../../containers/VideoGallery/utils';
+
+const SearchSort = ({
+  searchString,
+  onSearchChange,
+  clearSearchString,
+  sortBy,
+  onSortClick,
+  filterBy,
+  onFilterClick,
+  filterKeys,
+  filterMessages,
+  showSwitch,
+  switchMessage,
+  onSwitchClick,
+}) => {
+  const intl = useIntl();
+
+  return (
+    <ActionRow>
+      <Form.Group style={{ margin: 0 }}>
+        <Form.Control
+          autoFocus
+          onChange={onSearchChange}
+          placeholder={intl.formatMessage(messages.searchPlaceholder)}
+          trailingElement={
+            searchString
+              ? (
+                <IconButton
+                  alt={intl.formatMessage(messages.clearSearch)}
+                  iconAs={Icon}
+                  invertColors
+                  isActive
+                  onClick={clearSearchString}
+                  size="sm"
+                  src={Close}
+                />
+              )
+              : <Icon src={Search} />
+          }
+          value={searchString}
+        />
+      </Form.Group>
+
+      { !showSwitch && <ActionRow.Spacer /> }
+      <SelectMenu variant="link" className="search-sort-menu">
+        {Object.keys(sortKeys).map(key => (
+          <MenuItem
+            key={key}
+            onClick={onSortClick(key)}
+            defaultSelected={key === sortBy}
+            iconAfter={(key === sortBy) ? Check : null}
+          >
+            <span className="search-sort-menu-by">
+              <FormattedMessage {...messages.sortBy} />
+              <span style={{ whiteSpace: 'pre-wrap' }}> </span>
+            </span>
+            <FormattedMessage {...sortMessages[key]} />
+          </MenuItem>
+        ))}
+      </SelectMenu>
+
+      { onFilterClick && (
+      <Dropdown>
+        <Dropdown.Toggle
+          data-testid="dropdown-filter"
+          className="text-gray-700"
+          id="gallery-filter-button"
+          variant="tertiary"
+        >
+          <FormattedMessage {...filterMessages[filterBy]} />
+        </Dropdown.Toggle>
+        <Dropdown.Menu>
+          {Object.keys(filterKeys).map(key => (
+            <Dropdown.Item data-testid={`dropdown-filter-${key}`} key={key} onClick={onFilterClick(key)}>
+              <FormattedMessage {...filterMessages[key]} />
+            </Dropdown.Item>
+          ))}
+        </Dropdown.Menu>
+      </Dropdown>
+      )}
+
+      { showSwitch && (
+        <>
+          <ActionRow.Spacer />
+          <Form.SwitchSet
+            name="switch"
+            onChange={onSwitchClick}
+            isInline
+          >
+            <Form.Switch className="text-gray-700" value="switch-value" floatLabelLeft>
+              <FormattedMessage {...switchMessage} />
+            </Form.Switch>
+          </Form.SwitchSet>
+        </>
+      )}
+
+    </ActionRow>
+  );
+};
+
+SearchSort.defaultProps = {
+  filterBy: '',
+  onFilterClick: null,
+  filterKeys: null,
+  filterMessages: null,
+  showSwitch: false,
+  onSwitchClick: null,
+};
+
+SearchSort.propTypes = {
+  searchString: PropTypes.string.isRequired,
+  onSearchChange: PropTypes.func.isRequired,
+  clearSearchString: PropTypes.func.isRequired,
+  sortBy: PropTypes.string.isRequired,
+  onSortClick: PropTypes.func.isRequired,
+  filterBy: PropTypes.string,
+  onFilterClick: PropTypes.func,
+  filterKeys: PropTypes.shape({}),
+  filterMessages: PropTypes.shape({}),
+  showSwitch: PropTypes.bool,
+  switchMessage: PropTypes.shape({}).isRequired,
+  onSwitchClick: PropTypes.func,
+};
+
+export default SearchSort;
diff --git a/src/editors/sharedComponents/SelectionModal/SearchSort.test.jsx b/src/editors/sharedComponents/SelectionModal/SearchSort.test.jsx
new file mode 100644
index 0000000000..8757d74e02
--- /dev/null
+++ b/src/editors/sharedComponents/SelectionModal/SearchSort.test.jsx
@@ -0,0 +1,92 @@
+import React from 'react';
+
+import '@testing-library/jest-dom';
+import {
+  act, fireEvent, render, screen,
+} from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import {
+  filterKeys, filterMessages, sortKeys, sortMessages,
+} from '../../containers/VideoGallery/utils';
+import SearchSort from './SearchSort';
+import messages from './messages';
+
+jest.unmock('react-redux');
+jest.unmock('@edx/frontend-platform/i18n');
+jest.unmock('@openedx/paragon');
+jest.unmock('@openedx/paragon/icons');
+
+describe('SearchSort component', () => {
+  const props = {
+    searchString: '',
+    onSearchChange: jest.fn()
+      .mockName('props.onSearchChange'),
+    clearSearchString: jest.fn()
+      .mockName('props.clearSearchString'),
+    sortBy: sortKeys.dateOldest,
+    sortKeys,
+    sortMessages,
+    onSortClick: jest.fn()
+      .mockName('props.onSortClick'),
+    switchMessage: {
+      id: 'test.id',
+      defaultMessage: 'test message',
+    },
+    filterBy: filterKeys.anyStatus,
+    onFilterClick: jest.fn(),
+    filterKeys,
+    filterMessages,
+    showSwitch: true,
+  };
+
+  function getComponent(overrideProps = {}) {
+    return render(
+      <IntlProvider locale="en">
+        <SearchSort {...props} {...overrideProps} />
+      </IntlProvider>,
+    );
+  }
+
+  test('adds a sort option for each sortKey', async () => {
+    const { getByRole } = getComponent();
+    await act(() => {
+      fireEvent.click(screen.getByRole('button', {
+        name: /By oldest/i,
+      }));
+    });
+    Object.values(sortMessages)
+      .forEach(({ defaultMessage }) => {
+        expect(getByRole('link', { name: `By ${defaultMessage}` }))
+          .toBeInTheDocument();
+      });
+  });
+  test('adds a sort option for each sortKey', async () => {
+    const { getByRole } = getComponent();
+    await act(() => {
+      fireEvent.click(screen.getByRole('button', { name: /oldest/i }));
+    });
+    Object.values(sortMessages)
+      .forEach(({ defaultMessage }) => {
+        expect(getByRole('link', { name: `By ${defaultMessage}` }))
+          .toBeInTheDocument();
+      });
+  });
+  test('adds a filter option for each filter key', async () => {
+    const { getByTestId } = getComponent();
+    act(() => {
+      fireEvent.click(getByTestId('dropdown-filter'));
+    });
+
+    Object.keys(filterMessages)
+      .forEach((key) => {
+        expect(getByTestId(`dropdown-filter-${key}`))
+          .toBeInTheDocument();
+      });
+  });
+  test('searchbox should show clear message button when not empty', async () => {
+    const { queryByRole } = getComponent({ searchString: 'some string' });
+    expect(queryByRole('button', { name: messages.clearSearch.defaultMessage }))
+      .toBeInTheDocument();
+  });
+});
diff --git a/src/editors/sharedComponents/SelectionModal/__snapshots__/Gallery.test.jsx.snap b/src/editors/sharedComponents/SelectionModal/__snapshots__/Gallery.test.jsx.snap
new file mode 100644
index 0000000000..a0651d470b
--- /dev/null
+++ b/src/editors/sharedComponents/SelectionModal/__snapshots__/Gallery.test.jsx.snap
@@ -0,0 +1,309 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TextEditor Image Gallery component component snapshot: loaded but no images, show empty gallery 1`] = `
+<[object Object]
+  value={
+    {
+      "$t": [Function],
+      "defaultFormats": {},
+      "defaultLocale": "en",
+      "defaultRichTextElements": undefined,
+      "fallbackOnEmptyString": true,
+      "formatDate": [Function],
+      "formatDateTimeRange": [Function],
+      "formatDateToParts": [Function],
+      "formatDisplayName": [Function],
+      "formatList": [Function],
+      "formatListToParts": [Function],
+      "formatMessage": [Function],
+      "formatNumber": [Function],
+      "formatNumberToParts": [Function],
+      "formatPlural": [Function],
+      "formatRelativeTime": [Function],
+      "formatTime": [Function],
+      "formatTimeToParts": [Function],
+      "formats": {},
+      "formatters": {
+        "getDateTimeFormat": [Function],
+        "getDisplayNames": [Function],
+        "getListFormat": [Function],
+        "getMessageFormat": [Function],
+        "getNumberFormat": [Function],
+        "getPluralRules": [Function],
+        "getRelativeTimeFormat": [Function],
+      },
+      "locale": "en",
+      "messages": {},
+      "onError": [Function],
+      "onWarn": [Function],
+      "textComponent": Symbol(react.fragment),
+      "timeZone": undefined,
+      "wrapRichTextChunksInFragment": undefined,
+    }
+  }
+>
+  <Gallery
+    allowLazyLoad={false}
+    assetCount={0}
+    displayList={
+      [
+        {
+          "id": 1,
+        },
+        {
+          "id": 2,
+        },
+        {
+          "id": 3,
+        },
+      ]
+    }
+    emptyGalleryLabel={
+      {
+        "defaultMessage": "Empty Gallery",
+        "id": "emptyGalleryMsg",
+      }
+    }
+    fetchNextPage={null}
+    galleryIsEmpty={true}
+    height="375px"
+    highlighted="props.highlighted"
+    isLoaded={true}
+    onHighlightChange={[MockFunction props.onHighlightChange]}
+    searchIsEmpty={false}
+    show={true}
+    showIdsOnCards={false}
+  />
+</[object Object]>
+`;
+
+exports[`TextEditor Image Gallery component component snapshot: loaded but search returns no images, show 0 search result gallery 1`] = `
+<[object Object]
+  value={
+    {
+      "$t": [Function],
+      "defaultFormats": {},
+      "defaultLocale": "en",
+      "defaultRichTextElements": undefined,
+      "fallbackOnEmptyString": true,
+      "formatDate": [Function],
+      "formatDateTimeRange": [Function],
+      "formatDateToParts": [Function],
+      "formatDisplayName": [Function],
+      "formatList": [Function],
+      "formatListToParts": [Function],
+      "formatMessage": [Function],
+      "formatNumber": [Function],
+      "formatNumberToParts": [Function],
+      "formatPlural": [Function],
+      "formatRelativeTime": [Function],
+      "formatTime": [Function],
+      "formatTimeToParts": [Function],
+      "formats": {},
+      "formatters": {
+        "getDateTimeFormat": [Function],
+        "getDisplayNames": [Function],
+        "getListFormat": [Function],
+        "getMessageFormat": [Function],
+        "getNumberFormat": [Function],
+        "getPluralRules": [Function],
+        "getRelativeTimeFormat": [Function],
+      },
+      "locale": "en",
+      "messages": {},
+      "onError": [Function],
+      "onWarn": [Function],
+      "textComponent": Symbol(react.fragment),
+      "timeZone": undefined,
+      "wrapRichTextChunksInFragment": undefined,
+    }
+  }
+>
+  <Gallery
+    allowLazyLoad={false}
+    assetCount={0}
+    displayList={
+      [
+        {
+          "id": 1,
+        },
+        {
+          "id": 2,
+        },
+        {
+          "id": 3,
+        },
+      ]
+    }
+    emptyGalleryLabel={
+      {
+        "defaultMessage": "Empty Gallery",
+        "id": "emptyGalleryMsg",
+      }
+    }
+    fetchNextPage={null}
+    galleryIsEmpty={false}
+    height="375px"
+    highlighted="props.highlighted"
+    isLoaded={true}
+    onHighlightChange={[MockFunction props.onHighlightChange]}
+    searchIsEmpty={true}
+    show={true}
+    showIdsOnCards={false}
+  />
+</[object Object]>
+`;
+
+exports[`TextEditor Image Gallery component component snapshot: loaded, show gallery 1`] = `
+<[object Object]
+  value={
+    {
+      "$t": [Function],
+      "defaultFormats": {},
+      "defaultLocale": "en",
+      "defaultRichTextElements": undefined,
+      "fallbackOnEmptyString": true,
+      "formatDate": [Function],
+      "formatDateTimeRange": [Function],
+      "formatDateToParts": [Function],
+      "formatDisplayName": [Function],
+      "formatList": [Function],
+      "formatListToParts": [Function],
+      "formatMessage": [Function],
+      "formatNumber": [Function],
+      "formatNumberToParts": [Function],
+      "formatPlural": [Function],
+      "formatRelativeTime": [Function],
+      "formatTime": [Function],
+      "formatTimeToParts": [Function],
+      "formats": {},
+      "formatters": {
+        "getDateTimeFormat": [Function],
+        "getDisplayNames": [Function],
+        "getListFormat": [Function],
+        "getMessageFormat": [Function],
+        "getNumberFormat": [Function],
+        "getPluralRules": [Function],
+        "getRelativeTimeFormat": [Function],
+      },
+      "locale": "en",
+      "messages": {},
+      "onError": [Function],
+      "onWarn": [Function],
+      "textComponent": Symbol(react.fragment),
+      "timeZone": undefined,
+      "wrapRichTextChunksInFragment": undefined,
+    }
+  }
+>
+  <Gallery
+    allowLazyLoad={false}
+    assetCount={0}
+    displayList={
+      [
+        {
+          "id": 1,
+        },
+        {
+          "id": 2,
+        },
+        {
+          "id": 3,
+        },
+      ]
+    }
+    emptyGalleryLabel={
+      {
+        "defaultMessage": "Empty Gallery",
+        "id": "emptyGalleryMsg",
+      }
+    }
+    fetchNextPage={null}
+    galleryIsEmpty={false}
+    height="375px"
+    highlighted="props.highlighted"
+    isLoaded={true}
+    onHighlightChange={[MockFunction props.onHighlightChange]}
+    searchIsEmpty={false}
+    show={true}
+    showIdsOnCards={false}
+  />
+</[object Object]>
+`;
+
+exports[`TextEditor Image Gallery component component snapshot: not loaded, show spinner 1`] = `
+<[object Object]
+  value={
+    {
+      "$t": [Function],
+      "defaultFormats": {},
+      "defaultLocale": "en",
+      "defaultRichTextElements": undefined,
+      "fallbackOnEmptyString": true,
+      "formatDate": [Function],
+      "formatDateTimeRange": [Function],
+      "formatDateToParts": [Function],
+      "formatDisplayName": [Function],
+      "formatList": [Function],
+      "formatListToParts": [Function],
+      "formatMessage": [Function],
+      "formatNumber": [Function],
+      "formatNumberToParts": [Function],
+      "formatPlural": [Function],
+      "formatRelativeTime": [Function],
+      "formatTime": [Function],
+      "formatTimeToParts": [Function],
+      "formats": {},
+      "formatters": {
+        "getDateTimeFormat": [Function],
+        "getDisplayNames": [Function],
+        "getListFormat": [Function],
+        "getMessageFormat": [Function],
+        "getNumberFormat": [Function],
+        "getPluralRules": [Function],
+        "getRelativeTimeFormat": [Function],
+      },
+      "locale": "en",
+      "messages": {},
+      "onError": [Function],
+      "onWarn": [Function],
+      "textComponent": Symbol(react.fragment),
+      "timeZone": undefined,
+      "wrapRichTextChunksInFragment": undefined,
+    }
+  }
+>
+  <Gallery
+    allowLazyLoad={false}
+    assetCount={0}
+    displayList={
+      [
+        {
+          "id": 1,
+        },
+        {
+          "id": 2,
+        },
+        {
+          "id": 3,
+        },
+      ]
+    }
+    emptyGalleryLabel={
+      {
+        "defaultMessage": "Empty Gallery",
+        "id": "emptyGalleryMsg",
+      }
+    }
+    fetchNextPage={null}
+    galleryIsEmpty={false}
+    height="375px"
+    highlighted="props.highlighted"
+    isLoaded={false}
+    onHighlightChange={[MockFunction props.onHighlightChange]}
+    searchIsEmpty={false}
+    show={true}
+    showIdsOnCards={false}
+  />
+</[object Object]>
+`;
diff --git a/src/editors/sharedComponents/SelectionModal/__snapshots__/GalleryCard.test.jsx.snap b/src/editors/sharedComponents/SelectionModal/__snapshots__/GalleryCard.test.jsx.snap
new file mode 100644
index 0000000000..f14a235f3e
--- /dev/null
+++ b/src/editors/sharedComponents/SelectionModal/__snapshots__/GalleryCard.test.jsx.snap
@@ -0,0 +1,505 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`GalleryCard component snapshot with duration badge 1`] = `
+<ForwardRef
+  checked={false}
+  className="card bg-white shadow-none border-0 py-0"
+  inputHidden={true}
+  isIndeterminate={false}
+  isInvalid={false}
+  key="props.img.externalUrl"
+  onClick={[Function]}
+  onFocus={[Function]}
+  type="radio"
+>
+  <div
+    className="card-div d-flex flex-row flex-nowrap align-items-center"
+  >
+    <div
+      className="position-relative"
+      style={
+        {
+          "height": "100px",
+          "width": "200px",
+        }
+      }
+    >
+      <Image
+        src="props.img.externalUrl"
+        style={
+          {
+            "border": "none",
+            "height": "100px",
+            "width": "200px",
+          }
+        }
+      />
+      <Badge
+        style={
+          {
+            "backgroundColor": "black",
+            "bottom": "6px",
+            "position": "absolute",
+            "right": "6px",
+          }
+        }
+        variant="dark"
+      >
+        01:00
+      </Badge>
+    </div>
+    <div
+      className="card-text px-3 py-2"
+      style={
+        {
+          "marginTop": "10px",
+        }
+      }
+    >
+      <h3
+        className="text-primary-500"
+      >
+        <Truncate>
+          props.img.displayName
+        </Truncate>
+      </h3>
+      <p
+        className="text-gray-500"
+        style={
+          {
+            "fontSize": "11px",
+          }
+        }
+      >
+        <FormattedMessage
+          defaultMessage="Added {date} at {time}"
+          description="File date-added string"
+          id="authoring.selectionmodal.addedDate.label"
+          values={
+            {
+              "date": <FormattedDate
+                value={12345}
+              />,
+              "time": <FormattedTime
+                value={12345}
+              />,
+            }
+          }
+        />
+      </p>
+    </div>
+  </div>
+</ForwardRef>
+`;
+
+exports[`GalleryCard component snapshot with duration transcripts 1`] = `
+<ForwardRef
+  checked={false}
+  className="card bg-white shadow-none border-0 py-0"
+  inputHidden={true}
+  isIndeterminate={false}
+  isInvalid={false}
+  key="props.img.externalUrl"
+  onClick={[Function]}
+  onFocus={[Function]}
+  type="radio"
+>
+  <div
+    className="card-div d-flex flex-row flex-nowrap align-items-center"
+  >
+    <div
+      className="position-relative"
+      style={
+        {
+          "height": "100px",
+          "width": "200px",
+        }
+      }
+    >
+      <Image
+        src="props.img.externalUrl"
+        style={
+          {
+            "border": "none",
+            "height": "100px",
+            "width": "200px",
+          }
+        }
+      />
+    </div>
+    <div
+      className="card-text px-3 py-2"
+      style={
+        {
+          "marginTop": "10px",
+        }
+      }
+    >
+      <h3
+        className="text-primary-500"
+      >
+        <Truncate>
+          props.img.displayName
+        </Truncate>
+      </h3>
+      <div
+        style={
+          {
+            "margin": "0 0 5px 0",
+          }
+        }
+      >
+        <injectIntl(ShimmedIntlComponent)
+          transcripts={
+            [
+              "es",
+            ]
+          }
+        />
+      </div>
+      <p
+        className="text-gray-500"
+        style={
+          {
+            "fontSize": "11px",
+          }
+        }
+      >
+        <FormattedMessage
+          defaultMessage="Added {date} at {time}"
+          description="File date-added string"
+          id="authoring.selectionmodal.addedDate.label"
+          values={
+            {
+              "date": <FormattedDate
+                value={12345}
+              />,
+              "time": <FormattedTime
+                value={12345}
+              />,
+            }
+          }
+        />
+      </p>
+    </div>
+  </div>
+</ForwardRef>
+`;
+
+exports[`GalleryCard component snapshot with status badge 1`] = `
+<ForwardRef
+  checked={false}
+  className="card bg-white shadow-none border-0 py-0"
+  inputHidden={true}
+  isIndeterminate={false}
+  isInvalid={false}
+  key="props.img.externalUrl"
+  onClick={[Function]}
+  onFocus={[Function]}
+  type="radio"
+>
+  <div
+    className="card-div d-flex flex-row flex-nowrap align-items-center"
+  >
+    <div
+      className="position-relative"
+      style={
+        {
+          "height": "100px",
+          "width": "200px",
+        }
+      }
+    >
+      <Image
+        src="props.img.externalUrl"
+        style={
+          {
+            "border": "none",
+            "height": "100px",
+            "width": "200px",
+          }
+        }
+      />
+    </div>
+    <div
+      className="card-text px-3 py-2"
+      style={
+        {
+          "marginTop": "10px",
+        }
+      }
+    >
+      <h3
+        className="text-primary-500"
+      >
+        <Truncate>
+          props.img.displayName
+        </Truncate>
+      </h3>
+      <p
+        className="text-gray-500"
+        style={
+          {
+            "fontSize": "11px",
+          }
+        }
+      >
+        <FormattedMessage
+          defaultMessage="Added {date} at {time}"
+          description="File date-added string"
+          id="authoring.selectionmodal.addedDate.label"
+          values={
+            {
+              "date": <FormattedDate
+                value={12345}
+              />,
+              "time": <FormattedTime
+                value={12345}
+              />,
+            }
+          }
+        />
+      </p>
+    </div>
+  </div>
+</ForwardRef>
+`;
+
+exports[`GalleryCard component snapshot with thumbnail fallback and load error 1`] = `
+<ForwardRef
+  checked={false}
+  className="card bg-white shadow-none border-0 py-0"
+  inputHidden={true}
+  isIndeterminate={false}
+  isInvalid={false}
+  key="props.img.externalUrl"
+  onClick={[Function]}
+  onFocus={[Function]}
+  type="radio"
+>
+  <div
+    className="card-div d-flex flex-row flex-nowrap align-items-center"
+  >
+    <div
+      className="position-relative"
+      style={
+        {
+          "height": "100px",
+          "width": "200px",
+        }
+      }
+    >
+      <Image
+        onError={[Function]}
+        src="props.img.externalUrl"
+        style={
+          {
+            "border": "none",
+            "height": "100px",
+            "width": "200px",
+          }
+        }
+      />
+    </div>
+    <div
+      className="card-text px-3 py-2"
+      style={
+        {
+          "marginTop": "10px",
+        }
+      }
+    >
+      <h3
+        className="text-primary-500"
+      >
+        <Truncate>
+          props.img.displayName
+        </Truncate>
+      </h3>
+      <p
+        className="text-gray-500"
+        style={
+          {
+            "fontSize": "11px",
+          }
+        }
+      >
+        <FormattedMessage
+          defaultMessage="Added {date} at {time}"
+          description="File date-added string"
+          id="authoring.selectionmodal.addedDate.label"
+          values={
+            {
+              "date": <FormattedDate
+                value={12345}
+              />,
+              "time": <FormattedTime
+                value={12345}
+              />,
+            }
+          }
+        />
+      </p>
+    </div>
+  </div>
+</ForwardRef>
+`;
+
+exports[`GalleryCard component snapshot with thumbnail fallback and no error 1`] = `
+<ForwardRef
+  checked={false}
+  className="card bg-white shadow-none border-0 py-0"
+  inputHidden={true}
+  isIndeterminate={false}
+  isInvalid={false}
+  key="props.img.externalUrl"
+  onClick={[Function]}
+  onFocus={[Function]}
+  type="radio"
+>
+  <div
+    className="card-div d-flex flex-row flex-nowrap align-items-center"
+  >
+    <div
+      className="position-relative"
+      style={
+        {
+          "height": "100px",
+          "width": "200px",
+        }
+      }
+    >
+      <Image
+        onError={[Function]}
+        src="props.img.externalUrl"
+        style={
+          {
+            "border": "none",
+            "height": "100px",
+            "width": "200px",
+          }
+        }
+      />
+    </div>
+    <div
+      className="card-text px-3 py-2"
+      style={
+        {
+          "marginTop": "10px",
+        }
+      }
+    >
+      <h3
+        className="text-primary-500"
+      >
+        <Truncate>
+          props.img.displayName
+        </Truncate>
+      </h3>
+      <p
+        className="text-gray-500"
+        style={
+          {
+            "fontSize": "11px",
+          }
+        }
+      >
+        <FormattedMessage
+          defaultMessage="Added {date} at {time}"
+          description="File date-added string"
+          id="authoring.selectionmodal.addedDate.label"
+          values={
+            {
+              "date": <FormattedDate
+                value={12345}
+              />,
+              "time": <FormattedTime
+                value={12345}
+              />,
+            }
+          }
+        />
+      </p>
+    </div>
+  </div>
+</ForwardRef>
+`;
+
+exports[`GalleryCard component snapshot: dateAdded=12345 1`] = `
+<ForwardRef
+  checked={false}
+  className="card bg-white shadow-none border-0 py-0"
+  inputHidden={true}
+  isIndeterminate={false}
+  isInvalid={false}
+  key="props.img.externalUrl"
+  onClick={[Function]}
+  onFocus={[Function]}
+  type="radio"
+>
+  <div
+    className="card-div d-flex flex-row flex-nowrap align-items-center"
+  >
+    <div
+      className="position-relative"
+      style={
+        {
+          "height": "100px",
+          "width": "200px",
+        }
+      }
+    >
+      <Image
+        src="props.img.externalUrl"
+        style={
+          {
+            "border": "none",
+            "height": "100px",
+            "width": "200px",
+          }
+        }
+      />
+    </div>
+    <div
+      className="card-text px-3 py-2"
+      style={
+        {
+          "marginTop": "10px",
+        }
+      }
+    >
+      <h3
+        className="text-primary-500"
+      >
+        <Truncate>
+          props.img.displayName
+        </Truncate>
+      </h3>
+      <p
+        className="text-gray-500"
+        style={
+          {
+            "fontSize": "11px",
+          }
+        }
+      >
+        <FormattedMessage
+          defaultMessage="Added {date} at {time}"
+          description="File date-added string"
+          id="authoring.selectionmodal.addedDate.label"
+          values={
+            {
+              "date": <FormattedDate
+                value={12345}
+              />,
+              "time": <FormattedTime
+                value={12345}
+              />,
+            }
+          }
+        />
+      </p>
+    </div>
+  </div>
+</ForwardRef>
+`;
diff --git a/src/editors/sharedComponents/SelectionModal/index.jsx b/src/editors/sharedComponents/SelectionModal/index.jsx
new file mode 100644
index 0000000000..c345f8232d
--- /dev/null
+++ b/src/editors/sharedComponents/SelectionModal/index.jsx
@@ -0,0 +1,168 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Button, Stack } from '@openedx/paragon';
+import { Add } from '@openedx/paragon/icons';
+import {
+  FormattedMessage,
+  useIntl,
+} from '@edx/frontend-platform/i18n';
+
+import BaseModal from '../BaseModal';
+import SearchSort from './SearchSort';
+import Gallery from './Gallery';
+import { FileInput } from '../FileInput';
+import ErrorAlert from '../ErrorAlerts/ErrorAlert';
+import FetchErrorAlert from '../ErrorAlerts/FetchErrorAlert';
+import UploadErrorAlert from '../ErrorAlerts/UploadErrorAlert';
+
+import './index.scss';
+
+const SelectionModal = ({
+  isOpen,
+  close,
+  size,
+  isFullscreenScroll,
+  galleryError,
+  inputError,
+  fileInput,
+  galleryProps,
+  searchSortProps,
+  selectBtnProps,
+  acceptedFiles,
+  modalMessages,
+  isLoaded,
+  isFetchError,
+  isUploadError,
+  isLibrary,
+}) => {
+  const intl = useIntl();
+  const {
+    confirmMsg,
+    uploadButtonMsg,
+    titleMsg,
+    fetchError,
+    uploadError,
+  } = modalMessages;
+
+  let background = '#FFFFFF';
+  let showGallery = true;
+  if (isLoaded && !isFetchError && !isUploadError && !inputError.show) {
+    background = '#E9E6E4';
+  } else if (isLoaded) {
+    showGallery = false;
+  }
+
+  const galleryPropsValues = {
+    isLoaded,
+    isLibrary,
+    ...galleryProps,
+  };
+
+  return (
+    <BaseModal
+      close={close}
+      confirmAction={(
+        <Button {...selectBtnProps} variant="primary">
+          <FormattedMessage {...confirmMsg} />
+        </Button>
+      )}
+      isOpen={isOpen}
+      size={size}
+      isFullscreenScroll={isFullscreenScroll}
+      footerAction={(
+        <Button
+          className="text-primary-500"
+          iconBefore={Add}
+          onClick={fileInput.click}
+          variant="link"
+          style={{
+            textDecoration: 'none',
+          }}
+        >
+          <FormattedMessage {...uploadButtonMsg} />
+        </Button>
+      )}
+      title={intl.formatMessage(titleMsg)}
+      bodyStyle={{ background }}
+      headerComponent={!isLibrary && (
+        <div style={{ margin: '18px 0' }}>
+          <SearchSort {...searchSortProps} />
+        </div>
+      )}
+      className="selection-modal"
+    >
+      {/*
+        If the modal dialog content is zero height, it shows a bottom shadow
+        as if there was content to scroll to, so make the min-height 1px.
+      */}
+      <Stack gap={2} style={{ minHeight: '1px' }}>
+        {/* Error Alerts */}
+        <FetchErrorAlert isFetchError={isFetchError} message={fetchError} />
+        <UploadErrorAlert isUploadError={isUploadError} message={uploadError} />
+        <ErrorAlert
+          dismissError={inputError.dismiss}
+          hideHeading
+          isError={inputError.show}
+        >
+          <FormattedMessage {...inputError.message} />
+        </ErrorAlert>
+
+        {/* User Feedback Alerts */}
+        <ErrorAlert
+          dismissError={galleryError.dismiss}
+          hideHeading
+          isError={galleryError.show}
+        >
+          <FormattedMessage {...galleryError.message} />
+        </ErrorAlert>
+        {showGallery && <Gallery {...galleryPropsValues} />}
+        <FileInput fileInput={fileInput} acceptedFiles={Object.values(acceptedFiles).join()} />
+      </Stack>
+    </BaseModal>
+  );
+};
+
+SelectionModal.defaultProps = {
+  size: 'lg',
+  isFullscreenScroll: true,
+};
+
+SelectionModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  close: PropTypes.func.isRequired,
+  size: PropTypes.string,
+  isFullscreenScroll: PropTypes.bool,
+  galleryError: PropTypes.shape({
+    dismiss: PropTypes.func.isRequired,
+    show: PropTypes.bool.isRequired,
+    set: PropTypes.func.isRequired,
+    message: PropTypes.shape({}).isRequired,
+  }).isRequired,
+  inputError: PropTypes.shape({
+    dismiss: PropTypes.func.isRequired,
+    show: PropTypes.bool.isRequired,
+    set: PropTypes.func.isRequired,
+    message: PropTypes.shape({}).isRequired,
+  }).isRequired,
+  fileInput: PropTypes.shape({
+    click: PropTypes.func.isRequired,
+  }).isRequired,
+  galleryProps: PropTypes.shape({}).isRequired,
+  searchSortProps: PropTypes.shape({}).isRequired,
+  selectBtnProps: PropTypes.shape({}).isRequired,
+  acceptedFiles: PropTypes.shape({}).isRequired,
+  modalMessages: PropTypes.shape({
+    confirmMsg: PropTypes.shape({}).isRequired,
+    uploadButtonMsg: PropTypes.shape({}).isRequired,
+    titleMsg: PropTypes.shape({}).isRequired,
+    fetchError: PropTypes.shape({}).isRequired,
+    uploadError: PropTypes.shape({}).isRequired,
+  }).isRequired,
+  isLoaded: PropTypes.bool.isRequired,
+  isFetchError: PropTypes.bool.isRequired,
+  isUploadError: PropTypes.bool.isRequired,
+  isLibrary: PropTypes.bool,
+};
+
+export default SelectionModal;
diff --git a/src/editors/sharedComponents/SelectionModal/index.scss b/src/editors/sharedComponents/SelectionModal/index.scss
new file mode 100644
index 0000000000..89e5978168
--- /dev/null
+++ b/src/editors/sharedComponents/SelectionModal/index.scss
@@ -0,0 +1,32 @@
+.search-sort-menu .pgn__menu-item-text {
+    text-transform: capitalize;
+}
+
+.search-sort-menu .pgn__menu .search-sort-menu-by {
+    display: none;
+}
+
+/* Sort options come in pairs of ascending and descending. */
+.search-sort-menu .pgn__menu > div:nth-child(even) {
+    border-bottom: 1px solid #F4F3F6;
+}
+
+.search-sort-menu .pgn__menu > div:last-child {
+    border-bottom: none;
+}
+
+.selection-modal .pgn__vstack > .alert {
+    margin-bottom: 0;
+    margin-top: 1.5rem;
+}
+
+/* Set top padding to 0 when there is an alert above. */
+.selection-modal .pgn__scrollable-body-content > .pgn__vstack > .alert + .gallery > .p-4 {
+    padding-top: 0 !important;
+}
+
+.selection-modal .pgn__vstack > .alert > .alert-icon {
+    /* Vertical margin equal to the vertical padding of the "Dismiss" button. */
+    margin-bottom: .4375rem;
+    margin-top: .4375rem;
+}
diff --git a/src/editors/sharedComponents/SelectionModal/index.test.jsx b/src/editors/sharedComponents/SelectionModal/index.test.jsx
new file mode 100644
index 0000000000..91186e8d69
--- /dev/null
+++ b/src/editors/sharedComponents/SelectionModal/index.test.jsx
@@ -0,0 +1,186 @@
+import React from 'react';
+
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { render, screen } from '@testing-library/react';
+
+import SelectionModal from '.';
+import '@testing-library/jest-dom';
+
+const props = {
+  isOpen: true,
+  close: jest.fn(),
+  size: 'fullscreen',
+  isFullscreenScroll: false,
+  galleryError: {
+    show: false,
+    set: jest.fn(),
+    dismiss: jest.fn(),
+    message: {
+      id: 'Gallery error id',
+      defaultMessage: 'Gallery error',
+      description: 'Gallery error',
+    },
+  },
+  inputError: {
+    show: false,
+    set: jest.fn(),
+    dismiss: jest.fn(),
+    message: {
+      id: 'Input error id',
+      defaultMessage: 'Input error',
+      description: 'Input error',
+    },
+  },
+  fileInput: {
+    addFile: 'imgHooks.fileInput.addFile',
+    click: 'imgHooks.fileInput.click',
+    ref: 'imgHooks.fileInput.ref',
+  },
+  galleryProps: {
+    gallery: 'props',
+    emptyGalleryLabel: {
+      id: 'emptyGalleryMsg',
+      defaultMessage: 'Empty Gallery',
+    },
+  },
+  searchSortProps: { search: 'sortProps' },
+  selectBtnProps: { select: 'btnProps' },
+  acceptedFiles: { png: '.png' },
+  modalMessages: {
+    confirmMsg: {
+      id: 'confirmMsg',
+      defaultMessage: 'confirmMsg',
+      description: 'confirmMsg',
+    },
+    uploadButtonMsg: {
+      id: 'uploadButtonMsg',
+      defaultMessage: 'uploadButtonMsg',
+      description: 'uploadButtonMsg',
+    },
+    titleMsg: {
+      id: 'titleMsg',
+      defaultMessage: 'titleMsg',
+      description: 'titleMsg',
+    },
+    fetchError: {
+      id: 'fetchError',
+      defaultMessage: 'fetchError',
+      description: 'fetchError',
+    },
+    uploadError: {
+      id: 'uploadError',
+      defaultMessage: 'uploadError',
+      description: 'uploadError',
+    },
+  },
+  isLoaded: true,
+  isFetchError: false,
+  isUploadError: false,
+};
+
+const mockGalleryFn = jest.fn();
+const mockFileInputFn = jest.fn();
+const mockFetchErrorAlertFn = jest.fn();
+const mockUploadErrorAlertFn = jest.fn();
+
+jest.mock('../BaseModal', () => 'BaseModal');
+jest.mock('./SearchSort', () => 'SearchSort');
+jest.mock('./Gallery', () => function mockGallery(componentProps) {
+  mockGalleryFn(componentProps);
+  return (<div>Gallery</div>);
+});
+jest.mock('../FileInput', () => ({
+  FileInput: function mockFileInput(componentProps) {
+    mockFileInputFn(componentProps);
+    return (<div>FileInput</div>);
+  },
+}));
+jest.mock('../ErrorAlerts/ErrorAlert', () => function mockErrorAlert() {
+  return <div>ErrorAlert</div>;
+});
+jest.mock('../ErrorAlerts/FetchErrorAlert', () => function mockFetchErrorAlert(componentProps) {
+  mockFetchErrorAlertFn(componentProps);
+  return (<div>FetchErrorAlert</div>);
+});
+jest.mock('../ErrorAlerts/UploadErrorAlert', () => function mockUploadErrorAlert(componentProps) {
+  mockUploadErrorAlertFn(componentProps);
+  return (<div>UploadErrorAlert</div>);
+});
+
+describe('Selection Modal', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+  test('rendering correctly with expected Input', async () => {
+    render(
+      <IntlProvider locale="en">
+        <SelectionModal {...props} />
+      </IntlProvider>,
+    );
+    expect(screen.getByText('Gallery')).toBeInTheDocument();
+    expect(screen.getByText('FileInput')).toBeInTheDocument();
+    expect(screen.getByText('FetchErrorAlert')).toBeInTheDocument();
+    expect(screen.getByText('UploadErrorAlert')).toBeInTheDocument();
+
+    expect(mockGalleryFn).toHaveBeenCalledWith(
+      expect.objectContaining({
+        ...props.galleryProps,
+        isLoaded: props.isLoaded,
+      }),
+    );
+    expect(mockFetchErrorAlertFn).toHaveBeenCalledWith(
+      expect.objectContaining({
+        isFetchError: props.isFetchError,
+        message: props.modalMessages.fetchError,
+      }),
+    );
+    expect(mockUploadErrorAlertFn).toHaveBeenCalledWith(
+      expect.objectContaining({
+        isUploadError: props.isUploadError,
+        message: props.modalMessages.uploadError,
+      }),
+    );
+    expect(mockFileInputFn).toHaveBeenCalledWith(
+      expect.objectContaining({
+        acceptedFiles: '.png',
+        fileInput: props.fileInput,
+      }),
+    );
+  });
+  test('rendering correctly with errors', () => {
+    render(
+      <IntlProvider locale="en">
+        <SelectionModal {...props} isFetchError />
+      </IntlProvider>,
+    );
+    expect(screen.queryByText('Gallery')).not.toBeInTheDocument();
+    expect(screen.getByText('FileInput')).toBeInTheDocument();
+    expect(screen.getByText('FetchErrorAlert')).toBeInTheDocument();
+    expect(screen.getByText('UploadErrorAlert')).toBeInTheDocument();
+
+    expect(mockFetchErrorAlertFn).toHaveBeenCalledWith(
+      expect.objectContaining({
+        isFetchError: true,
+        message: props.modalMessages.fetchError,
+      }),
+    );
+  });
+  test('rendering correctly with loading', () => {
+    render(
+      <IntlProvider locale="en">
+        <SelectionModal {...props} isLoaded={false} />
+      </IntlProvider>,
+    );
+    expect(screen.getByText('Gallery')).toBeInTheDocument();
+    expect(screen.getByText('FileInput')).toBeInTheDocument();
+    expect(screen.getByText('FetchErrorAlert')).toBeInTheDocument();
+    expect(screen.getByText('UploadErrorAlert')).toBeInTheDocument();
+
+    expect(mockGalleryFn).toHaveBeenCalledWith(
+      expect.objectContaining({
+        ...props.galleryProps,
+        isLoaded: false,
+      }),
+    );
+  });
+});
diff --git a/src/editors/sharedComponents/SelectionModal/messages.js b/src/editors/sharedComponents/SelectionModal/messages.js
new file mode 100644
index 0000000000..0fcf9b4214
--- /dev/null
+++ b/src/editors/sharedComponents/SelectionModal/messages.js
@@ -0,0 +1,34 @@
+const messages = {
+  searchPlaceholder: {
+    id: 'authoring.selectionmodal.search.placeholder',
+    defaultMessage: 'Search',
+    description: 'Placeholder text for search bar',
+  },
+  clearSearch: {
+    id: 'authoring.selectionmodal.search.clearSearchButton',
+    defaultMessage: 'Clear search query',
+    description: 'Button to clear search query',
+  },
+  emptySearchLabel: {
+    id: 'authoring.selectionmodal.emptySearchLabel',
+    defaultMessage: 'No search results.',
+    description: 'Label for when search returns nothing.',
+  },
+  loading: {
+    id: 'authoring.selectionmodal.spinner.readertext',
+    defaultMessage: 'loading...',
+    description: 'Gallery loading spinner screen-reader text',
+  },
+  addedDate: {
+    id: 'authoring.selectionmodal.addedDate.label',
+    defaultMessage: 'Added {date} at {time}',
+    description: 'File date-added string',
+  },
+  sortBy: {
+    id: 'authoring.selectionmodal.sortBy',
+    defaultMessage: 'By',
+    description: '"By" before sort option',
+  },
+};
+
+export default messages;
diff --git a/src/editors/sharedComponents/SourceCodeModal/__snapshots__/index.test.jsx.snap b/src/editors/sharedComponents/SourceCodeModal/__snapshots__/index.test.jsx.snap
new file mode 100644
index 0000000000..e0b26f6fec
--- /dev/null
+++ b/src/editors/sharedComponents/SourceCodeModal/__snapshots__/index.test.jsx.snap
@@ -0,0 +1,47 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SourceCodeModal renders as expected with default behavior 1`] = `
+<BaseModal
+  bodyStyle={
+    {
+      "maxHeight": NaN,
+    }
+  }
+  close={[MockFunction]}
+  confirmAction={
+    <Button
+      0="S"
+      1="o"
+      2="M"
+      3="e"
+      4="v"
+      5="A"
+      6="l"
+      7="u"
+      8="e"
+      variant="primary"
+    >
+      <FormattedMessage
+        defaultMessage="Save"
+        description="Label for Save button for the source code editor"
+        id="authoring.texteditor.sourcecodemodal.next.label"
+      />
+    </Button>
+  }
+  footerAction={null}
+  headerComponent={null}
+  isFullscreenScroll={true}
+  isOpen={false}
+  size="xl"
+  title="Edit Source Code"
+>
+  <div
+    className="px-4.5 pt-2.5"
+  >
+    <injectIntl(ShimmedIntlComponent)
+      innerRef="moCKrEf"
+      value="mOckHtMl"
+    />
+  </div>
+</BaseModal>
+`;
diff --git a/src/editors/sharedComponents/SourceCodeModal/hooks.js b/src/editors/sharedComponents/SourceCodeModal/hooks.js
new file mode 100644
index 0000000000..0c35f1b4c3
--- /dev/null
+++ b/src/editors/sharedComponents/SourceCodeModal/hooks.js
@@ -0,0 +1,28 @@
+import { useRef } from 'react';
+// This 'module' self-import hack enables mocking during tests.
+// See src/editors/decisions/0005-internal-editor-testability-decisions.md. The whole approach to how hooks are tested
+// should be re-thought and cleaned up to avoid this pattern.
+// eslint-disable-next-line import/no-self-import
+import * as module from './hooks';
+
+export const getSaveBtnProps = ({ editorRef, ref, close }) => ({
+  onClick: () => {
+    if (editorRef && editorRef.current && ref && ref.current) {
+      const content = ref.current.state.doc.toString();
+      editorRef.current.setContent(content);
+      close();
+    }
+  },
+});
+
+export const prepareSourceCodeModal = ({ editorRef, close }) => {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const ref = useRef();
+  const saveBtnProps = module.getSaveBtnProps({ editorRef, ref, close });
+
+  if (editorRef && editorRef.current && typeof editorRef.current.getContent === 'function') {
+    const value = editorRef?.current?.getContent();
+    return { saveBtnProps, value, ref };
+  }
+  return { saveBtnProps, value: null, ref };
+};
diff --git a/src/editors/sharedComponents/SourceCodeModal/hooks.test.js b/src/editors/sharedComponents/SourceCodeModal/hooks.test.js
new file mode 100644
index 0000000000..08df5a2f73
--- /dev/null
+++ b/src/editors/sharedComponents/SourceCodeModal/hooks.test.js
@@ -0,0 +1,60 @@
+import React from 'react';
+
+import * as module from './hooks';
+
+jest.mock('react', () => ({
+  ...jest.requireActual('react'),
+  useRef: jest.fn(val => ({ current: val })),
+  useEffect: jest.fn(),
+  useCallback: (cb, prereqs) => ({ cb, prereqs }),
+}));
+
+describe('SourceCodeModal hooks', () => {
+  const mockContent = 'sOmEMockHtML';
+  const mockSetContent = jest.fn();
+  const mockEditorRef = {
+    current:
+          {
+            setContent: mockSetContent,
+            getContent: jest.fn(() => mockContent),
+          },
+  };
+  const mockClose = jest.fn();
+  test('getSaveBtnProps', () => {
+    const mockRef = {
+      current: {
+        state: {
+          doc: mockContent,
+        },
+      },
+    };
+    const input = {
+      ref: mockRef,
+      editorRef: mockEditorRef,
+      close: mockClose,
+    };
+    const resultProps = module.getSaveBtnProps(input);
+    resultProps.onClick();
+    expect(mockSetContent).toHaveBeenCalledWith(mockContent);
+    expect(mockClose).toHaveBeenCalled();
+  });
+
+  test('prepareSourceCodeModal', () => {
+    const props = {
+      close: mockClose,
+      editorRef: mockEditorRef,
+    };
+    const mockRef = { current: 'rEf' };
+    const spyRef = jest.spyOn(React, 'useRef').mockReturnValueOnce(mockRef);
+    const mockButton = 'mOcKBuTton';
+
+    const spyButtons = jest.spyOn(module, 'getSaveBtnProps').mockImplementation(
+      () => mockButton,
+    );
+
+    const result = module.prepareSourceCodeModal(props);
+    expect(spyRef).toHaveBeenCalled();
+    expect(spyButtons).toHaveBeenCalled();
+    expect(result).toStrictEqual({ saveBtnProps: mockButton, value: mockEditorRef.current.getContent(), ref: mockRef });
+  });
+});
diff --git a/src/editors/sharedComponents/SourceCodeModal/index.jsx b/src/editors/sharedComponents/SourceCodeModal/index.jsx
new file mode 100644
index 0000000000..88f7ff9f8e
--- /dev/null
+++ b/src/editors/sharedComponents/SourceCodeModal/index.jsx
@@ -0,0 +1,63 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import {
+  FormattedMessage,
+  injectIntl,
+  intlShape,
+} from '@edx/frontend-platform/i18n';
+
+import { Button, useWindowSize } from '@openedx/paragon';
+import messages from './messages';
+import * as hooks from './hooks';
+import BaseModal from '../BaseModal';
+
+import CodeEditor from '../CodeEditor';
+
+const SourceCodeModal = ({
+  isOpen,
+  close,
+  editorRef,
+  // injected
+  intl,
+}) => {
+  const { saveBtnProps, value, ref } = hooks.prepareSourceCodeModal({ editorRef, close });
+  const { height } = useWindowSize();
+
+  return (
+    <BaseModal
+      close={close}
+      size="xl"
+      confirmAction={(
+        <Button {...saveBtnProps} variant="primary">
+          <FormattedMessage {...messages.saveButtonLabel} />
+        </Button>
+            )}
+      isOpen={isOpen}
+      title={intl.formatMessage(messages.titleLabel)}
+      bodyStyle={{ maxHeight: (height - 180) }}
+    >
+      <div className="px-4.5 pt-2.5">
+        <CodeEditor
+          innerRef={ref}
+          value={value}
+        />
+      </div>
+    </BaseModal>
+  );
+};
+
+SourceCodeModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  close: PropTypes.func.isRequired,
+  editorRef: PropTypes.oneOfType([
+    PropTypes.func,
+    // eslint-disable-next-line react/forbid-prop-types
+    PropTypes.shape({ current: PropTypes.any }),
+  ]).isRequired,
+  // injected
+  intl: intlShape.isRequired,
+};
+
+export const SourceCodeModalInternal = SourceCodeModal; // For testing only
+export default injectIntl(SourceCodeModal);
diff --git a/src/editors/sharedComponents/SourceCodeModal/index.test.jsx b/src/editors/sharedComponents/SourceCodeModal/index.test.jsx
new file mode 100644
index 0000000000..a95b40e98a
--- /dev/null
+++ b/src/editors/sharedComponents/SourceCodeModal/index.test.jsx
@@ -0,0 +1,37 @@
+import 'CourseAuthoring/editors/setupEditorTest';
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+import * as hooks from './hooks';
+import { formatMessage } from '../../testUtils';
+
+import { SourceCodeModalInternal as SourceCodeModal } from '.';
+
+jest.mock('./hooks', () => ({
+  prepareSourceCodeModal: jest.fn(() => {
+
+  }),
+}));
+
+describe('SourceCodeModal', () => {
+  const mockClose = jest.fn();
+
+  const props = {
+    isOpen: false,
+    close: mockClose,
+    editorRef: {
+      current: jest.fn(),
+    },
+    intl: { formatMessage },
+  };
+  test('renders as expected with default behavior', () => {
+    const mocksaveBtnProps = 'SoMevAlue';
+    const mockvalue = 'mOckHtMl';
+    const mockref = 'moCKrEf';
+    hooks.prepareSourceCodeModal.mockReturnValueOnce({
+      saveBtnProps: mocksaveBtnProps,
+      value: mockvalue,
+      ref: mockref,
+    });
+    expect(shallow(<SourceCodeModal {...props} />).snapshot).toMatchSnapshot();
+  });
+});
diff --git a/src/editors/sharedComponents/SourceCodeModal/messages.js b/src/editors/sharedComponents/SourceCodeModal/messages.js
new file mode 100644
index 0000000000..2f1bfe200e
--- /dev/null
+++ b/src/editors/sharedComponents/SourceCodeModal/messages.js
@@ -0,0 +1,17 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+
+  saveButtonLabel: {
+    id: 'authoring.texteditor.sourcecodemodal.next.label',
+    defaultMessage: 'Save',
+    description: 'Label for Save button for the source code editor',
+  },
+  titleLabel: {
+    id: 'authoring.texteditor.sourcecodemodal.title.label',
+    defaultMessage: 'Edit Source Code',
+    description: 'Title for the source code editor',
+  },
+});
+
+export default messages;
diff --git a/src/editors/sharedComponents/TinyMceWidget/__snapshots__/index.test.jsx.snap b/src/editors/sharedComponents/TinyMceWidget/__snapshots__/index.test.jsx.snap
new file mode 100644
index 0000000000..ea6fc97b31
--- /dev/null
+++ b/src/editors/sharedComponents/TinyMceWidget/__snapshots__/index.test.jsx.snap
@@ -0,0 +1,207 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TinyMceWidget snapshots ImageUploadModal is not rendered 1`] = `
+<Fragment>
+  <SourceCodeModal
+    close={[MockFunction modal.closeModal]}
+    editorRef={
+      {
+        "current": {
+          "value": "something",
+        },
+      }
+    }
+    isOpen={false}
+  />
+  <Editor
+    disabled={false}
+    editorConfig={
+      {
+        "clearSelection": [MockFunction hooks.selectedImage.clearSelection],
+        "content": undefined,
+        "editorContentHtml": undefined,
+        "editorRef": {
+          "current": {
+            "value": "something",
+          },
+        },
+        "editorType": "text",
+        "enableImageUpload": false,
+        "images": {
+          "current": [
+            {
+              "externalUrl": "/assets/sOmEaSsET",
+            },
+          ],
+        },
+        "initializeEditor": undefined,
+        "learningContextId": "course+org+run",
+        "lmsEndpointUrl": "sOmEvaLue.cOm",
+        "minHeight": undefined,
+        "openImgModal": [MockFunction modal.openModal],
+        "openSourceCodeModal": [MockFunction modal.openModal],
+        "placeholder": undefined,
+        "selection": "hooks.selectedImage.selection",
+        "setEditorRef": undefined,
+        "setSelection": [MockFunction hooks.selectedImage.setSelection],
+        "staticRootUrl": undefined,
+        "studioEndpointUrl": "sOmEoThERvaLue.cOm",
+        "updateContent": [Function],
+      }
+    }
+    id="sOMeiD"
+    onEditorChange={[Function]}
+  />
+</Fragment>
+`;
+
+exports[`TinyMceWidget snapshots SourcecodeModal is not rendered 1`] = `
+<Fragment>
+  <ImageUploadModal
+    clearSelection={[MockFunction hooks.selectedImage.clearSelection]}
+    close={[MockFunction modal.closeModal]}
+    editorRef={
+      {
+        "current": {
+          "value": "something",
+        },
+      }
+    }
+    editorType="problem"
+    images={
+      {
+        "current": [
+          {
+            "externalUrl": "/assets/sOmEaSsET",
+          },
+        ],
+      }
+    }
+    isLibrary={true}
+    isOpen={false}
+    lmsEndpointUrl="http://localhost:18000"
+    selection="hooks.selectedImage.selection"
+    setSelection={[MockFunction hooks.selectedImage.setSelection]}
+  />
+  <Editor
+    disabled={false}
+    editorConfig={
+      {
+        "clearSelection": [MockFunction hooks.selectedImage.clearSelection],
+        "content": undefined,
+        "editorContentHtml": undefined,
+        "editorRef": {
+          "current": {
+            "value": "something",
+          },
+        },
+        "editorType": "problem",
+        "enableImageUpload": true,
+        "images": {
+          "current": [
+            {
+              "externalUrl": "/assets/sOmEaSsET",
+            },
+          ],
+        },
+        "initializeEditor": undefined,
+        "learningContextId": "course+org+run",
+        "lmsEndpointUrl": "sOmEvaLue.cOm",
+        "minHeight": undefined,
+        "openImgModal": [MockFunction modal.openModal],
+        "openSourceCodeModal": [MockFunction modal.openModal],
+        "placeholder": undefined,
+        "selection": "hooks.selectedImage.selection",
+        "setEditorRef": undefined,
+        "setSelection": [MockFunction hooks.selectedImage.setSelection],
+        "staticRootUrl": undefined,
+        "studioEndpointUrl": "sOmEoThERvaLue.cOm",
+        "updateContent": [Function],
+      }
+    }
+    id="sOMeiD"
+    onEditorChange={[Function]}
+  />
+</Fragment>
+`;
+
+exports[`TinyMceWidget snapshots renders as expected with default behavior 1`] = `
+<Fragment>
+  <ImageUploadModal
+    clearSelection={[MockFunction hooks.selectedImage.clearSelection]}
+    close={[MockFunction modal.closeModal]}
+    editorRef={
+      {
+        "current": {
+          "value": "something",
+        },
+      }
+    }
+    editorType="text"
+    images={
+      {
+        "current": [
+          {
+            "externalUrl": "/assets/sOmEaSsET",
+          },
+        ],
+      }
+    }
+    isLibrary={true}
+    isOpen={false}
+    lmsEndpointUrl="http://localhost:18000"
+    selection="hooks.selectedImage.selection"
+    setSelection={[MockFunction hooks.selectedImage.setSelection]}
+  />
+  <SourceCodeModal
+    close={[MockFunction modal.closeModal]}
+    editorRef={
+      {
+        "current": {
+          "value": "something",
+        },
+      }
+    }
+    isOpen={false}
+  />
+  <Editor
+    disabled={false}
+    editorConfig={
+      {
+        "clearSelection": [MockFunction hooks.selectedImage.clearSelection],
+        "content": undefined,
+        "editorContentHtml": undefined,
+        "editorRef": {
+          "current": {
+            "value": "something",
+          },
+        },
+        "editorType": "text",
+        "enableImageUpload": true,
+        "images": {
+          "current": [
+            {
+              "externalUrl": "/assets/sOmEaSsET",
+            },
+          ],
+        },
+        "initializeEditor": undefined,
+        "learningContextId": "course+org+run",
+        "lmsEndpointUrl": "sOmEvaLue.cOm",
+        "minHeight": undefined,
+        "openImgModal": [MockFunction modal.openModal],
+        "openSourceCodeModal": [MockFunction modal.openModal],
+        "placeholder": undefined,
+        "selection": "hooks.selectedImage.selection",
+        "setEditorRef": undefined,
+        "setSelection": [MockFunction hooks.selectedImage.setSelection],
+        "staticRootUrl": undefined,
+        "studioEndpointUrl": "sOmEoThERvaLue.cOm",
+        "updateContent": [Function],
+      }
+    }
+    id="sOMeiD"
+    onEditorChange={[Function]}
+  />
+</Fragment>
+`;
diff --git a/src/editors/sharedComponents/TinyMceWidget/customTinyMcePlugins/embedIframePlugin.js b/src/editors/sharedComponents/TinyMceWidget/customTinyMcePlugins/embedIframePlugin.js
new file mode 100644
index 0000000000..04057ca3a1
--- /dev/null
+++ b/src/editors/sharedComponents/TinyMceWidget/customTinyMcePlugins/embedIframePlugin.js
@@ -0,0 +1,205 @@
+function tinyMCEEmbedIframePlugin(editor) {
+  function openInsertIframeModal() {
+    const defaultConfig = {
+      title: 'Insert iframe',
+      body: {
+        type: 'tabpanel',
+        tabs: [
+          {
+            title: 'General',
+            items: [
+              {
+                type: 'input',
+                name: 'source',
+                label: 'Source URL',
+                multiline: false,
+                autofocus: true,
+                required: true,
+              },
+              {
+                type: 'selectbox',
+                name: 'sizeType',
+                label: 'Size',
+                items: [
+                  { text: 'Inline Value', value: 'inline' },
+                  { text: 'Big embed', value: 'big' },
+                  { text: 'Small embed', value: 'small' },
+                ],
+              },
+
+              {
+                type: 'sizeinput',
+                name: 'size',
+                label: 'Dimensions',
+              },
+            ],
+          },
+          {
+            title: 'Advanced',
+            items: [
+              {
+                type: 'input',
+                name: 'name',
+                label: 'Name',
+                value: '',
+              },
+              {
+                type: 'input',
+                name: 'title',
+                label: 'Title',
+                value: '',
+              },
+              {
+                type: 'input',
+                name: 'longDescriptionURL',
+                label: 'Long description URL',
+                value: '',
+              },
+              {
+                type: 'checkbox',
+                name: 'border',
+                label: 'Show iframe border',
+                text: 'Border',
+                checked: false,
+              },
+              {
+                type: 'checkbox',
+                name: 'scrollbar',
+                label: 'Enable scrollbar',
+                text: 'Scrollbar',
+                checked: false,
+              },
+            ],
+          },
+        ],
+      },
+      buttons: [
+        {
+          type: 'cancel',
+          name: 'cancel',
+          text: 'Cancel',
+        },
+        {
+          type: 'submit',
+          name: 'save',
+          text: 'Save',
+          primary: true,
+        },
+      ],
+      onChange(api, field) {
+        const { name } = field;
+        const data = api.getData();
+        const { sizeType, ...fields } = data;
+        const isSizeTypeFiled = name === 'sizeType';
+        const hasCustomSize = sizeType === 'inline';
+
+        if (!hasCustomSize && isSizeTypeFiled) {
+          const {
+            body: {
+              tabs: [generalTab],
+            },
+          } = defaultConfig;
+
+          generalTab.items = generalTab.items.filter(
+            (item) => item.type !== 'sizeinput',
+          );
+
+          defaultConfig.initialData = { ...fields, sizeType };
+          api.redial(defaultConfig);
+        }
+
+        if (hasCustomSize && isSizeTypeFiled) {
+          const {
+            body: {
+              tabs: [generalTab],
+            },
+          } = defaultConfig;
+
+          const hasSizeInput = generalTab.items.some((item) => item.name === 'size');
+
+          if (!hasSizeInput) {
+            generalTab.items = [
+              ...generalTab.items,
+              {
+                type: 'sizeinput',
+                name: 'size',
+                label: 'Dimensions',
+              },
+            ];
+          }
+
+          defaultConfig.initialData = { ...fields, sizeType };
+          api.redial(defaultConfig);
+        }
+      },
+      onSubmit(api) {
+        const data = api.getData();
+        const sizeTypes = {
+          small: {
+            height: '100px',
+            width: '100px',
+          },
+          big: {
+            height: '800px',
+            width: '800px',
+          },
+        };
+        if (data.source) {
+          const {
+            size, sizeType, name, title, longDescriptionURL, border, scrollbar,
+          } = data;
+          const { width, height } = sizeTypes[sizeType] || { width: size.width, height: size.height };
+
+          const pxRegex = /^\d+px$/;
+          const widthFormat = pxRegex.test(width) ? width : '300px';
+          const heightFormat = pxRegex.test(height) ? height : '300px';
+          const hasScroll = scrollbar ? 'yes' : 'no';
+
+          let iframeCode = `<iframe src="${data.source}" width="${widthFormat}" height="${heightFormat}" scrolling="${hasScroll}"`;
+
+          if (name) {
+            iframeCode += ` name="${name}"`;
+          }
+
+          if (title) {
+            iframeCode += ` title="${title}"`;
+          }
+
+          if (longDescriptionURL) {
+            iframeCode += ` longdesc="${longDescriptionURL}"`;
+          }
+
+          if (!border) {
+            iframeCode += 'frameborder="0"';
+          }
+
+          iframeCode += '></iframe>';
+
+          iframeCode = `<div class="tiny-pageembed" style="width: ${widthFormat}; height: ${heightFormat}">`
+            + `${iframeCode}`
+            + '</div>';
+
+          editor.insertContent(iframeCode);
+        }
+
+        api.close();
+      },
+    };
+
+    editor.windowManager.open(defaultConfig);
+  }
+
+  // Register the button
+  editor.ui.registry.addButton('embediframe', {
+    text: 'Embed iframe',
+    onAction: openInsertIframeModal,
+  });
+}
+
+((tinymce) => {
+  if (tinymce) {
+    tinymce.PluginManager.add('embediframe', tinyMCEEmbedIframePlugin);
+  }
+})(window.tinymce);
+
+export default tinyMCEEmbedIframePlugin;
diff --git a/src/editors/sharedComponents/TinyMceWidget/customTinyMcePlugins/embedIframePlugin.test.js b/src/editors/sharedComponents/TinyMceWidget/customTinyMcePlugins/embedIframePlugin.test.js
new file mode 100644
index 0000000000..521df48199
--- /dev/null
+++ b/src/editors/sharedComponents/TinyMceWidget/customTinyMcePlugins/embedIframePlugin.test.js
@@ -0,0 +1,408 @@
+import tinyMCEEmbedIframePlugin from './embedIframePlugin';
+
+const editorMock = {
+  windowManager: {
+    open: jest.fn(),
+  },
+  insertContent: jest.fn(),
+  ui: {
+    registry: {
+      addButton: jest.fn(),
+    },
+  },
+};
+
+describe('TinyMCE Embed IFrame Plugin', () => {
+  const pluginConfig = {
+    title: 'Insert iframe',
+    body: {
+      type: 'tabpanel',
+      tabs: [
+        {
+          title: 'General',
+          items: [
+            {
+              type: 'input',
+              name: 'source',
+              label: 'Source URL',
+              multiline: false,
+              autofocus: true,
+              required: true,
+            },
+            {
+              type: 'selectbox',
+              name: 'sizeType',
+              label: 'Size',
+              items: [
+                { text: 'Inline Value', value: 'inline' },
+                { text: 'Big embed', value: 'big' },
+                { text: 'Small embed', value: 'small' },
+              ],
+            },
+            {
+              type: 'sizeinput',
+              name: 'size',
+              label: 'Dimensions',
+            },
+          ],
+        },
+        {
+          title: 'Advanced',
+          items: [
+            {
+              type: 'input',
+              name: 'name',
+              label: 'Name',
+              value: '',
+            },
+            {
+              type: 'input',
+              name: 'title',
+              label: 'Title',
+              value: '',
+            },
+            {
+              type: 'input',
+              name: 'longDescriptionURL',
+              label: 'Long description URL',
+              value: '',
+            },
+            {
+              type: 'checkbox',
+              name: 'border',
+              label: 'Show iframe border',
+              text: 'Border',
+              checked: false,
+            },
+            {
+              type: 'checkbox',
+              name: 'scrollbar',
+              label: 'Enable scrollbar',
+              text: 'Scrollbar',
+              checked: false,
+            },
+          ],
+        },
+      ],
+    },
+    buttons: [
+      {
+        type: 'cancel',
+        name: 'cancel',
+        text: 'Cancel',
+      },
+      {
+        type: 'submit',
+        name: 'save',
+        text: 'Save',
+        primary: true,
+      },
+    ],
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test('opens insert iframe modal on button action', () => {
+    // Invoke the plugin
+    tinyMCEEmbedIframePlugin(editorMock);
+
+    editorMock.ui.registry.addButton.mock.calls[0][1].onAction();
+    expect(editorMock.windowManager.open).toHaveBeenCalled();
+  });
+
+  test('opens insert iframe modal on button action validate onSubmit and OnChange function', () => {
+    tinyMCEEmbedIframePlugin(editorMock);
+
+    editorMock.ui.registry.addButton.mock.calls[0][1].onAction();
+    expect(editorMock.windowManager.open).toHaveBeenCalledWith(
+      expect.objectContaining({
+        onSubmit: expect.any(Function),
+        onChange: expect.any(Function),
+      }),
+    );
+  });
+
+  test('opens insert iframe modal on button action validate title', () => {
+    tinyMCEEmbedIframePlugin(editorMock);
+
+    editorMock.ui.registry.addButton.mock.calls[0][1].onAction();
+    expect(editorMock.windowManager.open).toHaveBeenCalled();
+    expect(editorMock.windowManager.open).toHaveBeenCalledWith(
+      expect.objectContaining({
+        title: pluginConfig.title,
+      }),
+    );
+  });
+
+  test('opens insert iframe modal on button action validate buttons', () => {
+    tinyMCEEmbedIframePlugin(editorMock);
+
+    editorMock.ui.registry.addButton.mock.calls[0][1].onAction();
+    expect(editorMock.windowManager.open).toHaveBeenCalled();
+    expect(editorMock.windowManager.open).toHaveBeenCalledWith(
+      expect.objectContaining({
+        buttons: pluginConfig.buttons,
+      }),
+    );
+  });
+
+  test('opens insert iframe modal on button action validate tabs', () => {
+    tinyMCEEmbedIframePlugin(editorMock);
+
+    editorMock.ui.registry.addButton.mock.calls[0][1].onAction();
+    const [generalTab, advancedTab] = pluginConfig.body.tabs;
+
+    expect(editorMock.windowManager.open).toHaveBeenCalled();
+    expect(editorMock.windowManager.open).toHaveBeenCalledWith(
+      expect.objectContaining({
+        body: { type: 'tabpanel', tabs: [generalTab, advancedTab] },
+      }),
+    );
+  });
+  test('tests onChange function in plugin', () => {
+    tinyMCEEmbedIframePlugin(editorMock);
+    editorMock.ui.registry.addButton.mock.calls[0][1].onAction();
+
+    // Access the onChange function from the opened configuration
+    const onChangeFunction = editorMock.windowManager.open.mock.calls[0][0].onChange;
+
+    // Mock API and field for onChange
+    const apiMock = {
+      getData: jest.fn(() => ({ sizeType: 'big' })),
+      redial: jest.fn(),
+    };
+    const field = {
+      name: 'sizeType',
+    };
+
+    // Simulate calling the onChange function
+    onChangeFunction(apiMock, field);
+
+    expect(apiMock.getData).toHaveBeenCalled();
+    expect(apiMock.redial).toHaveBeenCalled();
+  });
+
+  test('modifies generalTab items when sizeType is not inline', () => {
+    tinyMCEEmbedIframePlugin(editorMock);
+    editorMock.ui.registry.addButton.mock.calls[0][1].onAction();
+
+    const onChangeFunction = editorMock.windowManager.open.mock.calls[0][0].onChange;
+
+    const apiMock = {
+      getData: jest.fn(() => ({ sizeType: 'big' })),
+      redial: jest.fn(),
+    };
+    const field = {
+      name: 'sizeType',
+    };
+
+    onChangeFunction(apiMock, field);
+
+    const [generalTab, advancedTab] = pluginConfig.body.tabs;
+    const generalTabExpected = generalTab.items.filter(
+      (item) => item.type !== 'sizeinput',
+    );
+
+    const expectedTabs = [
+      { title: generalTab.title, items: generalTabExpected, type: generalTab.type },
+      advancedTab,
+    ];
+
+    const expectedBody = {
+      type: pluginConfig.body.type,
+      tabs: expectedTabs,
+    };
+
+    expect(apiMock.redial).toHaveBeenCalledWith(expect.objectContaining({
+      body: expectedBody,
+    }));
+  });
+
+  test('adds sizeinput to generalTab items when sizeType is inline', () => {
+    tinyMCEEmbedIframePlugin(editorMock);
+    editorMock.ui.registry.addButton.mock.calls[0][1].onAction();
+
+    const onChangeFunction = editorMock.windowManager.open.mock.calls[0][0].onChange;
+
+    const apiMock = {
+      getData: jest.fn(() => ({ sizeType: 'inline' })),
+      redial: jest.fn(),
+    };
+    const field = {
+      name: 'sizeType',
+    };
+
+    onChangeFunction(apiMock, field);
+
+    const [generalTab, advancedTab] = pluginConfig.body.tabs;
+
+    expect(apiMock.redial).toHaveBeenCalledWith(
+      expect.objectContaining({
+        body: { type: 'tabpanel', tabs: [generalTab, advancedTab] },
+      }),
+    );
+  });
+
+  test('tests onSubmit function in plugin', () => {
+    const dataMock = {
+      source: 'https://www.example.com',
+      sizeType: 'big',
+    };
+    const apiMock = {
+      getData: jest.fn(() => dataMock),
+      close: jest.fn(),
+    };
+
+    tinyMCEEmbedIframePlugin(editorMock);
+    editorMock.ui.registry.addButton.mock.calls[0][1].onAction();
+
+    const onSubmitFunction = editorMock.windowManager.open.mock.calls[0][0].onSubmit;
+    onSubmitFunction(apiMock);
+
+    expect(apiMock.getData).toHaveBeenCalled();
+    expect(editorMock.insertContent).toHaveBeenCalled();
+    expect(apiMock.close).toHaveBeenCalled();
+  });
+
+  test('tests onSubmit function in plugin advanced properties', () => {
+    const dataMock = {
+      source: 'https://www.example.com',
+      sizeType: 'big',
+      name: 'iframeName',
+      title: 'iframeTitle',
+      longDescriptionURL: 'https://example.com/description',
+      border: true,
+      scrollbar: true,
+    };
+    const apiMock = {
+      getData: jest.fn(() => dataMock),
+      close: jest.fn(),
+    };
+
+    tinyMCEEmbedIframePlugin(editorMock);
+    editorMock.ui.registry.addButton.mock.calls[0][1].onAction();
+
+    const onSubmitFunction = editorMock.windowManager.open.mock.calls[0][0].onSubmit;
+    onSubmitFunction(apiMock);
+
+    expect(apiMock.getData).toHaveBeenCalled();
+
+    expect(editorMock.insertContent).toHaveBeenCalledWith(expect.stringContaining('width="800px"'));
+    expect(editorMock.insertContent).toHaveBeenCalledWith(expect.stringContaining('height="800px"'));
+    expect(editorMock.insertContent).toHaveBeenCalledWith(expect.stringContaining(`name="${dataMock.name}"`));
+    expect(editorMock.insertContent).toHaveBeenCalledWith(expect.stringContaining(`title="${dataMock.title}"`));
+    expect(editorMock.insertContent).toHaveBeenCalledWith(expect.stringContaining(`longdesc="${dataMock.longDescriptionURL}"`));
+    expect(editorMock.insertContent).toHaveBeenCalledWith(expect.stringContaining('scrolling="yes"'));
+
+    expect(apiMock.close).toHaveBeenCalled();
+  });
+
+  describe('tests onSubmit function in plugin sizeType', () => {
+    test('tests onSubmit function in plugin with sizeType big', () => {
+      const dataMock = {
+        source: 'https://www.example.com',
+        sizeType: 'big',
+      };
+
+      const apiMock = {
+        getData: jest.fn(() => dataMock),
+        close: jest.fn(),
+      };
+
+      tinyMCEEmbedIframePlugin(editorMock);
+      editorMock.ui.registry.addButton.mock.calls[0][1].onAction();
+
+      const onSubmitFunction = editorMock.windowManager.open.mock.calls[0][0].onSubmit;
+      onSubmitFunction(apiMock);
+
+      expect(apiMock.getData).toHaveBeenCalled();
+
+      expect(editorMock.insertContent).toHaveBeenCalledWith(expect.stringContaining('width="800px"'));
+      expect(editorMock.insertContent).toHaveBeenCalledWith(expect.stringContaining('height="800px"'));
+
+      expect(apiMock.close).toHaveBeenCalled();
+    });
+
+    test('tests onSubmit function in plugin with sizeType small', () => {
+      const dataMock = {
+        source: 'https://www.example.com',
+        sizeType: 'small',
+      };
+
+      const apiMock = {
+        getData: jest.fn(() => dataMock),
+        close: jest.fn(),
+      };
+
+      tinyMCEEmbedIframePlugin(editorMock);
+      editorMock.ui.registry.addButton.mock.calls[0][1].onAction();
+
+      const onSubmitFunction = editorMock.windowManager.open.mock.calls[0][0].onSubmit;
+      onSubmitFunction(apiMock);
+
+      expect(apiMock.getData).toHaveBeenCalled();
+
+      expect(editorMock.insertContent).toHaveBeenCalledWith(expect.stringContaining('width="100px"'));
+      expect(editorMock.insertContent).toHaveBeenCalledWith(expect.stringContaining('height="100px"'));
+      expect(apiMock.close).toHaveBeenCalled();
+    });
+
+    test('tests onSubmit function in plugin with custom sizeType', () => {
+      const dataMock = {
+        source: 'https://www.example.com',
+        sizeType: 'inline',
+        size: {
+          width: '500px',
+          height: '700px',
+        },
+      };
+
+      const apiMock = {
+        getData: jest.fn(() => dataMock),
+        close: jest.fn(),
+      };
+
+      tinyMCEEmbedIframePlugin(editorMock);
+      editorMock.ui.registry.addButton.mock.calls[0][1].onAction();
+
+      const onSubmitFunction = editorMock.windowManager.open.mock.calls[0][0].onSubmit;
+      onSubmitFunction(apiMock);
+
+      expect(apiMock.getData).toHaveBeenCalled();
+
+      expect(editorMock.insertContent).toHaveBeenCalledWith(expect.stringContaining('width="500px"'));
+      expect(editorMock.insertContent).toHaveBeenCalledWith(expect.stringContaining('height="700px"'));
+      expect(apiMock.close).toHaveBeenCalled();
+    });
+
+    test('tests onSubmit function in plugin with custom sizeType invalid values', () => {
+      const dataMock = {
+        source: 'https://www.example.com',
+        sizeType: 'inline',
+        size: {
+          width: 'test',
+          height: 'test',
+        },
+      };
+
+      const apiMock = {
+        getData: jest.fn(() => dataMock),
+        close: jest.fn(),
+      };
+
+      tinyMCEEmbedIframePlugin(editorMock);
+      editorMock.ui.registry.addButton.mock.calls[0][1].onAction();
+
+      const onSubmitFunction = editorMock.windowManager.open.mock.calls[0][0].onSubmit;
+      onSubmitFunction(apiMock);
+
+      expect(apiMock.getData).toHaveBeenCalled();
+
+      expect(editorMock.insertContent).toHaveBeenCalledWith(expect.stringContaining('width="300px"'));
+      expect(editorMock.insertContent).toHaveBeenCalledWith(expect.stringContaining('height="300px"'));
+      expect(apiMock.close).toHaveBeenCalled();
+    });
+  });
+});
diff --git a/src/editors/sharedComponents/TinyMceWidget/hooks.js b/src/editors/sharedComponents/TinyMceWidget/hooks.js
new file mode 100644
index 0000000000..d9c5016ced
--- /dev/null
+++ b/src/editors/sharedComponents/TinyMceWidget/hooks.js
@@ -0,0 +1,512 @@
+import {
+  useState,
+  useRef,
+  useCallback,
+  useEffect,
+} from 'react';
+import { getConfig } from '@edx/frontend-platform';
+import { getLocale, isRtl } from '@edx/frontend-platform/i18n';
+import { a11ycheckerCss } from 'frontend-components-tinymce-advanced-plugins';
+import { isEmpty } from 'lodash';
+import tinyMCEStyles from '../../data/constants/tinyMCEStyles';
+import { StrictDict } from '../../utils';
+import pluginConfig from './pluginConfig';
+// This 'module' self-import hack enables mocking during tests.
+// See src/editors/decisions/0005-internal-editor-testability-decisions.md. The whole approach to how hooks are tested
+// should be re-thought and cleaned up to avoid this pattern.
+// eslint-disable-next-line import/no-self-import
+import * as module from './hooks';
+import * as tinyMCE from '../../data/constants/tinyMCE';
+import { getRelativeUrl, getStaticUrl, parseAssetName } from './utils';
+import { isLibraryKey } from '../../../generic/key-utils';
+
+export const state = StrictDict({
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  isImageModalOpen: (val) => useState(val),
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  isSourceCodeModalOpen: (val) => useState(val),
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  imageSelection: (val) => useState(val),
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  refReady: (val) => useState(val),
+});
+
+export const addImagesAndDimensionsToRef = ({ imagesRef, images, editorContentHtml }) => {
+  const imagesWithDimensions = Object.values(images).map((image) => {
+    const imageFragment = module.getImageFromHtmlString(editorContentHtml, image.url);
+    return { ...image, width: imageFragment?.width, height: imageFragment?.height };
+  });
+  // eslint-disable-next-line no-param-reassign
+  imagesRef.current = imagesWithDimensions;
+};
+
+export const useImages = ({ images, editorContentHtml }) => {
+  const imagesRef = useRef([]);
+
+  useEffect(() => {
+    module.addImagesAndDimensionsToRef({ imagesRef, images, editorContentHtml });
+  }, [images]);
+
+  return { imagesRef };
+};
+
+export const parseContentForLabels = ({ editor, updateContent }) => {
+  let content = editor.getContent();
+  if (content && content?.length > 0) {
+    const parsedLabels = content.split(/<label>|<\/label>/gm);
+    let updatedContent;
+    parsedLabels.forEach((label, i) => {
+      if (!label.startsWith('<') && !label.endsWith('>')) {
+        let previousLabel = parsedLabels[i - 1];
+        let nextLabel = parsedLabels[i + 1];
+        if (!previousLabel.endsWith('<p>')) {
+          previousLabel = `${previousLabel}</p><p>`;
+          updatedContent = content.replace(parsedLabels[i - 1], previousLabel);
+          content = updatedContent;
+          updateContent(content);
+        }
+        if (!nextLabel.startsWith('</p>')) {
+          nextLabel = `</p><p>${nextLabel}`;
+          updatedContent = content.replace(parsedLabels[i + 1], nextLabel);
+          content = updatedContent;
+          updateContent(content);
+        }
+      }
+    });
+  } else {
+    updateContent(content);
+  }
+};
+
+export const replaceStaticWithAsset = ({
+  initialContent,
+  learningContextId,
+  editorType,
+  lmsEndpointUrl,
+}) => {
+  let content = initialContent;
+  let hasChanges = false;
+  const srcs = content.split(/(src="|src=&quot;|href="|href=&quot)/g).filter(
+    src => src.startsWith('/static') || src.startsWith('/asset'),
+  );
+  if (!isEmpty(srcs)) {
+    srcs.forEach(src => {
+      const currentContent = content;
+      let staticFullUrl;
+      const isStatic = src.startsWith('/static/');
+      const assetSrc = src.substring(0, src.indexOf('"'));
+      const staticName = assetSrc.substring(8);
+      const assetName = parseAssetName(src);
+      const displayName = isStatic ? staticName : assetName;
+      const isCorrectAssetFormat = assetSrc.startsWith('/asset') && assetSrc.match(/\/asset-v1:\S+[+]\S+[@]\S+[+]\S+[@]/g)?.length >= 1;
+
+      // assets in expandable text areas do not support relative urls so all assets must have the lms
+      // endpoint prepended to the relative url
+      if (isLibraryKey(learningContextId)) {
+        // We are removing the initial "/" in a "/static/foo.png" link, and then
+        // set the base URL to an endpoint serving the draft version of an asset by
+        // its path.
+        /* istanbul ignore next */
+        if (isStatic) {
+          staticFullUrl = assetSrc.substring(1);
+        }
+      } else if (editorType === 'expandable') {
+        if (isCorrectAssetFormat) {
+          staticFullUrl = `${lmsEndpointUrl}${assetSrc}`;
+        } else {
+          staticFullUrl = `${lmsEndpointUrl}${getRelativeUrl({ courseId: learningContextId, displayName })}`;
+        }
+      } else if (!isCorrectAssetFormat) {
+        staticFullUrl = getRelativeUrl({ courseId: learningContextId, displayName });
+      }
+      if (staticFullUrl) {
+        const currentSrc = src.substring(0, src.indexOf('"'));
+        content = currentContent.replace(currentSrc, staticFullUrl);
+        hasChanges = true;
+      }
+    });
+    if (hasChanges) { return content; }
+  }
+  return false;
+};
+
+export const getImageResizeHandler = ({ editor, imagesRef, setImage }) => () => {
+  const {
+    src, alt, width, height,
+  } = editor.selection.getNode();
+
+  // eslint-disable-next-line no-param-reassign
+  imagesRef.current = module.updateImageDimensions({
+    images: imagesRef.current, url: src, width, height,
+  }).result;
+
+  setImage({
+    externalUrl: src,
+    altText: alt,
+    width,
+    height,
+  });
+};
+
+export const setupCustomBehavior = ({
+  updateContent,
+  openImgModal,
+  openSourceCodeModal,
+  editorType,
+  images,
+  setImage,
+  lmsEndpointUrl,
+  learningContextId,
+}) => (editor) => {
+  // image upload button
+  editor.ui.registry.addButton(tinyMCE.buttons.imageUploadButton, {
+    icon: 'image',
+    tooltip: 'Add Image',
+    onAction: openImgModal,
+  });
+  // editing an existing image
+  editor.ui.registry.addButton(tinyMCE.buttons.editImageSettings, {
+    icon: 'image',
+    tooltip: 'Edit Image Settings',
+    onAction: module.openModalWithSelectedImage({
+      editor, images, setImage, openImgModal,
+    }),
+  });
+  // overriding the code plugin's icon with 'HTML' text
+  editor.ui.registry.addButton(tinyMCE.buttons.code, {
+    text: 'HTML',
+    tooltip: 'Source code',
+    onAction: openSourceCodeModal,
+  });
+  // add a custom simple inline code block formatter.
+  const setupCodeFormatting = (api) => {
+    editor.formatter.formatChanged(
+      'code',
+      (active) => api.setActive(active),
+    );
+  };
+  const toggleCodeFormatting = () => {
+    editor.formatter.toggle('code');
+    editor.undoManager.add();
+    editor.focus();
+  };
+  editor.ui.registry.addToggleButton(tinyMCE.buttons.codeBlock, {
+    icon: 'sourcecode',
+    tooltip: 'Code Block',
+    onAction: toggleCodeFormatting,
+    onSetup: setupCodeFormatting,
+  });
+  // add a custom simple inline label formatter.
+  const toggleLabelFormatting = () => {
+    editor.execCommand('mceToggleFormat', false, 'label');
+  };
+  editor.ui.registry.addIcon('textToSpeech', tinyMCE.textToSpeechIcon);
+  editor.ui.registry.addButton('customLabelButton', {
+    icon: 'textToSpeech',
+    text: 'Label',
+    tooltip: 'Apply a "Question" label to specific text, recognized by screen readers. Recommended to improve accessibility.',
+    onAction: toggleLabelFormatting,
+  });
+  if (editorType === 'expandable') {
+    editor.on('init', () => {
+      const initialContent = editor.getContent();
+      const newContent = module.replaceStaticWithAsset({
+        initialContent,
+        editorType,
+        lmsEndpointUrl,
+        learningContextId,
+      });
+      if (newContent) { updateContent(newContent); }
+    });
+  }
+
+  editor.on('init', /* istanbul ignore next */ () => {
+    // Moving TinyMce aux modal inside the Editor modal
+    // if the editor is on modal mode.
+    // This is to avoid issues using the aux modal:
+    // * Avoid close aux modal when clicking the content inside.
+    // * When the user opens the `Edit Source Code` modal, this adds `data-focus-on-hidden`
+    //   to the TinyMce aux modal, making it unusable.
+    const modalLayer = document.querySelector('.pgn__modal-layer');
+    const tinymceAux = document.querySelector('.tox.tox-tinymce-aux');
+
+    if (modalLayer && tinymceAux) {
+      modalLayer.appendChild(tinymceAux);
+    }
+  });
+
+  editor.on('ExecCommand', /* istanbul ignore next */ (e) => {
+    // Remove `data-focus-on-hidden` and `aria-hidden` on TinyMce aux modal used on emoticons, formulas, etc.
+    // When using the Editor in modal mode, it may happen that the editor modal is rendered
+    // before the TinyMce aux modal, which adds these attributes, making the TinyMce aux modal unusable.
+    const modalElement = document.querySelector('.tox.tox-silver-sink.tox-tinymce-aux');
+    if (modalElement) {
+      modalElement.removeAttribute('data-focus-on-hidden');
+      modalElement.removeAttribute('aria-hidden');
+    }
+
+    if (editorType === 'text' && e.command === 'mceFocus') {
+      const initialContent = editor.getContent();
+      const newContent = module.replaceStaticWithAsset({
+        initialContent,
+        learningContextId,
+      });
+      if (newContent) { editor.setContent(newContent); }
+    }
+    if (e.command === 'RemoveFormat') {
+      editor.formatter.remove('blockquote');
+      editor.formatter.remove('label');
+    }
+  });
+  // after resizing an image in the editor, synchronize React state and ref
+  editor.on('ObjectResized', getImageResizeHandler({ editor, imagesRef: images, setImage }));
+};
+
+// imagetools_cors_hosts needs a protocol-sanatized url
+export const removeProtocolFromUrl = (url) => url.replace(/^https?:\/\//, '');
+
+export const editorConfig = ({
+  editorType,
+  setEditorRef,
+  editorContentHtml,
+  images,
+  placeholder,
+  initializeEditor,
+  openImgModal,
+  openSourceCodeModal,
+  setSelection,
+  updateContent,
+  content,
+  minHeight,
+  learningContextId,
+  staticRootUrl,
+  enableImageUpload,
+}) => {
+  const lmsEndpointUrl = getConfig().LMS_BASE_URL;
+  const studioEndpointUrl = getConfig().STUDIO_BASE_URL;
+
+  const baseURL = staticRootUrl || lmsEndpointUrl;
+  const {
+    toolbar,
+    config,
+    plugins,
+    imageToolbar,
+    quickbarsInsertToolbar,
+    quickbarsSelectionToolbar,
+  } = pluginConfig({ placeholder, editorType, enableImageUpload });
+  const isLocaleRtl = isRtl(getLocale());
+  return {
+    onInit: (evt, editor) => {
+      setEditorRef(editor);
+      if (editorType === 'text') {
+        initializeEditor();
+      }
+    },
+    initialValue: editorContentHtml || '',
+    init: {
+      ...config,
+      skin: false,
+      content_css: false,
+      content_style: tinyMCEStyles + a11ycheckerCss,
+      min_height: minHeight,
+      contextmenu: 'link table',
+      directionality: isLocaleRtl ? 'rtl' : 'ltr',
+      document_base_url: baseURL,
+      imagetools_cors_hosts: [removeProtocolFromUrl(lmsEndpointUrl), removeProtocolFromUrl(studioEndpointUrl)],
+      imagetools_toolbar: imageToolbar,
+      formats: { label: { inline: 'label' } },
+      setup: module.setupCustomBehavior({
+        editorType,
+        updateContent,
+        openImgModal,
+        openSourceCodeModal,
+        lmsEndpointUrl,
+        setImage: setSelection,
+        content,
+        images,
+        learningContextId,
+      }),
+      quickbars_insert_toolbar: quickbarsInsertToolbar,
+      quickbars_selection_toolbar: quickbarsSelectionToolbar,
+      quickbars_image_toolbar: false,
+      toolbar,
+      plugins,
+      valid_children: '+body[style]',
+      valid_elements: '*[*]',
+      entity_encoding: 'utf-8',
+    },
+  };
+};
+
+export const prepareEditorRef = () => {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const editorRef = useRef(null);
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const setEditorRef = useCallback((ref) => {
+    editorRef.current = ref;
+  }, []);
+  const [refReady, setRefReady] = module.state.refReady(false);
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useEffect(() => setRefReady(true), []);
+  return { editorRef, refReady, setEditorRef };
+};
+
+export const imgModalToggle = () => {
+  const [isImgOpen, setIsOpen] = module.state.isImageModalOpen(false);
+  return {
+    isImgOpen,
+    openImgModal: () => setIsOpen(true),
+    closeImgModal: () => setIsOpen(false),
+  };
+};
+
+export const sourceCodeModalToggle = (editorRef) => {
+  const [isSourceCodeOpen, setIsOpen] = module.state.isSourceCodeModalOpen(false);
+  return {
+    isSourceCodeOpen,
+    openSourceCodeModal: () => setIsOpen(true),
+    closeSourceCodeModal: () => {
+      setIsOpen(false);
+      editorRef.current.focus();
+    },
+  };
+};
+
+/**
+ * const imageMatchRegex
+ *
+ * Image urls and ids used in the TinyMceEditor vary wildly, with different base urls,
+ * different lengths and constituent parts, and replacement of some "/" with "@".
+ * Common are the keys "asset-v1", "type", and "block", each holding a value after some separator.
+ * This regex captures only the values for these keys using capture groups, which can be used for matching.
+ */
+export const imageMatchRegex = /asset-v1.(.*).type.(.*).block.(.*)/;
+
+/**
+ * function matchImageStringsByIdentifiers
+ *
+ * matches two strings by comparing their regex capture groups using the `imageMatchRegex`
+ */
+export const matchImageStringsByIdentifiers = (a, b) => {
+  if (!a || !b || !(typeof a === 'string') || !(typeof b === 'string')) { return null; }
+  const matchA = JSON.stringify(a.match(imageMatchRegex)?.slice?.(1));
+  const matchB = JSON.stringify(b.match(imageMatchRegex)?.slice?.(1));
+  return matchA && matchA === matchB;
+};
+
+export const stringToFragment = (htmlString) => document.createRange().createContextualFragment(htmlString);
+
+export const getImageFromHtmlString = (htmlString, imageSrc) => {
+  const images = stringToFragment(htmlString)?.querySelectorAll('img') || [];
+
+  return Array.from(images).find((img) => matchImageStringsByIdentifiers(img.src || '', imageSrc));
+};
+
+export const detectImageMatchingError = ({ matchingImages, tinyMceHTML }) => {
+  if (!matchingImages.length) { return true; }
+  if (matchingImages.length > 1) { return true; }
+
+  if (!matchImageStringsByIdentifiers(matchingImages[0].id, tinyMceHTML.src)) { return true; }
+  if (!matchingImages[0].width || !matchingImages[0].height) { return true; }
+  if (matchingImages[0].width !== tinyMceHTML.width) { return true; }
+  if (matchingImages[0].height !== tinyMceHTML.height) { return true; }
+
+  return false;
+};
+
+export const openModalWithSelectedImage = ({
+  editor, images, setImage, openImgModal,
+}) => () => {
+  const tinyMceHTML = editor.selection.getNode();
+  const { src: mceSrc } = tinyMceHTML;
+
+  const matchingImages = images.current.filter(image => matchImageStringsByIdentifiers(image.id, mceSrc));
+
+  const imageMatchingErrorDetected = detectImageMatchingError({ tinyMceHTML, matchingImages });
+
+  const width = imageMatchingErrorDetected ? null : matchingImages[0]?.width;
+  const height = imageMatchingErrorDetected ? null : matchingImages[0]?.height;
+
+  setImage({
+    externalUrl: tinyMceHTML.src,
+    altText: tinyMceHTML.alt,
+    width,
+    height,
+  });
+
+  openImgModal();
+};
+
+export const setAssetToStaticUrl = ({ editorValue, lmsEndpointUrl }) => {
+  /* For assets to remain usable across course instances, we convert their url to be course-agnostic.
+   * For example, /assets/course/<asset hash>/filename gets converted to /static/filename. This is
+   * important for rerunning courses and importing/exporting course as the /static/ part of the url
+   * allows the asset to be mapped to the new course run.
+  */
+
+  // TODO: should probably move this to when the assets are being looped through in the off chance that
+  // some of the text in the editor contains the lmsEndpointUrl
+  const regExLmsEndpointUrl = RegExp(lmsEndpointUrl, 'g');
+  let content = editorValue.replace(regExLmsEndpointUrl, '');
+
+  const assetSrcs = typeof content === 'string' ? content.split(/(src="|src=&quot;|href="|href=&quot)/g) : [];
+  assetSrcs.filter(src => src.startsWith('/asset')).forEach(src => {
+    const nameFromEditorSrc = parseAssetName(src);
+    const portableUrl = getStaticUrl({ displayName: nameFromEditorSrc });
+    const currentSrc = src.substring(0, src.search(/("|&quot;)/));
+    const updatedContent = content.replace(currentSrc, portableUrl);
+    content = updatedContent;
+  });
+
+  /* istanbul ignore next */
+  assetSrcs.filter(src => src.startsWith('static/')).forEach(src => {
+    // Before storing assets we make sure that library static assets points again to
+    // `/static/dummy.jpg` instead of using the relative url `static/dummy.jpg`
+    const nameFromEditorSrc = parseAssetName(src);
+    const portableUrl = `/${ nameFromEditorSrc}`;
+    const currentSrc = src.substring(0, src.search(/("|&quot;)/));
+    const updatedContent = content.replace(currentSrc, portableUrl);
+    content = updatedContent;
+  });
+  return content;
+};
+
+export const selectedImage = (val) => {
+  const [selection, setSelection] = module.state.imageSelection(val);
+  return {
+    clearSelection: () => setSelection(null),
+    selection,
+    setSelection,
+  };
+};
+
+/**
+ * function updateImageDimensions
+ *
+ * Updates one images' dimensions in an array by identifying one image via a url string match
+ * that includes asset-v1, type, and block. Returns a new array.
+ *
+ * @param {Object[]} images - [{ id, ...other }]
+ * @param {string} url
+ * @param {number} width
+ * @param {number} height
+ *
+ * @returns {Object} { result, foundMatch }
+ */
+export const updateImageDimensions = ({
+  images, url, width, height,
+}) => {
+  let foundMatch = false;
+
+  const result = images.map((image) => {
+    const imageIdentifier = image.id || image.url || image.src || image.externalUrl;
+    const isMatch = matchImageStringsByIdentifiers(imageIdentifier, url);
+    if (isMatch) {
+      foundMatch = true;
+      return { ...image, width, height };
+    }
+    return image;
+  });
+
+  return { result, foundMatch };
+};
diff --git a/src/editors/sharedComponents/TinyMceWidget/hooks.test.js b/src/editors/sharedComponents/TinyMceWidget/hooks.test.js
new file mode 100644
index 0000000000..bc7cb3f904
--- /dev/null
+++ b/src/editors/sharedComponents/TinyMceWidget/hooks.test.js
@@ -0,0 +1,578 @@
+import 'CourseAuthoring/editors/setupEditorTest';
+import { getConfig } from '@edx/frontend-platform';
+import { MockUseState } from '../../testUtils';
+
+import * as tinyMCE from '../../data/constants/tinyMCE';
+import { keyStore } from '../../utils';
+import pluginConfig from './pluginConfig';
+// This 'module' self-import hack enables mocking during tests.
+// See src/editors/decisions/0005-internal-editor-testability-decisions.md. The whole approach to how hooks are tested
+// should be re-thought and cleaned up to avoid this pattern.
+// eslint-disable-next-line import/no-self-import
+import * as module from './hooks';
+
+jest.mock('react', () => ({
+  ...jest.requireActual('react'),
+  createRef: jest.fn(val => ({ ref: val })),
+  useRef: jest.fn(val => ({ current: val })),
+  useEffect: jest.fn(),
+  useCallback: (cb, prereqs) => ({ cb, prereqs }),
+}));
+
+const state = new MockUseState(module);
+const moduleKeys = keyStore(module);
+
+let hook;
+let output;
+
+const editorImageWidth = 2022;
+const editorImageHeight = 1619;
+
+const mockNode = {
+  src: 'http://localhost:18000/asset-v1:TestX+Test01+Test0101+type@asset+block/DALL_E_2023-03-10.png',
+  alt: 'aLt tExt',
+  width: editorImageWidth,
+  height: editorImageHeight,
+};
+
+const initialContentHeight = 150;
+const initialContentWidth = 100;
+const mockNodeWithInitialContentDimensions = { ...mockNode, width: initialContentWidth, height: initialContentHeight };
+const mockEditorWithSelection = { selection: { getNode: () => mockNode } };
+
+const mockImage = {
+  displayName: 'DALL·E 2023-03-10.png',
+  contentType: 'image/png',
+  dateAdded: 1682009100000,
+  url: '/asset-v1:TestX+Test01+Test0101+type@asset+block@DALL_E_2023-03-10.png',
+  externalUrl: 'http://localhost:18000/asset-v1:TestX+Test01+Test0101+type@asset+block@DALL_E_2023-03-10.png',
+  portableUrl: '/static/DALL_E_2023-03-10.png',
+  thumbnail: '/asset-v1:TestX+Test01+Test0101+type@thumbnail+block@DALL_E_2023-03-10.jpg',
+  locked: false,
+  staticFullUrl: '/assets/courseware/v1/af2bf9ac70804e54c534107160a8e51e/asset-v1:TestX+Test01+Test0101+type@asset+block@DALL_E_2023-03-10.png',
+  id: 'asset-v1:TestX+Test01+Test0101+type@asset+block@DALL_E_2023-03-10.png',
+  width: initialContentWidth,
+  height: initialContentHeight,
+};
+
+const mockImages = {
+  [mockImage.id]: mockImage,
+};
+
+const mockEditorContentHtml = `
+  <p>
+    <img
+      src="/assets/courseware/v1/7b41573468a356ca8dc975158e388386/asset-v1:TestX+Test01+Test0101+type@asset+block/DALL_E_2023-03-10.png"
+      alt=""
+      width="${initialContentWidth}"
+      height="${initialContentHeight}">
+    </img>
+  </p>
+`;
+const baseAssetUrl = 'asset-v1:org+test+run+type@asset+block';
+
+const mockImagesRef = { current: [mockImage] };
+
+describe('TinyMceEditor hooks', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockImagesRef.current = [mockImage];
+  });
+  describe('state hooks', () => {
+    state.testGetter(state.keys.isImageModalOpen);
+    state.testGetter(state.keys.isSourceCodeModalOpen);
+    state.testGetter(state.keys.imageSelection);
+  });
+
+  describe('non-state hooks', () => {
+    beforeEach(() => { state.mock(); });
+    afterEach(() => { state.restore(); });
+
+    describe('detectImageMatchingError', () => {
+      it('should detect an error if the matchingImages array is empty', () => {
+        const matchingImages = [];
+        const tinyMceHTML = mockNode;
+        expect(module.detectImageMatchingError({ matchingImages, tinyMceHTML })).toBe(true);
+      });
+      it('should detect an error if the matchingImages array has more than one element', () => {
+        const matchingImages = [mockImage, mockImage];
+        const tinyMceHTML = mockNode;
+        expect(module.detectImageMatchingError({ matchingImages, tinyMceHTML })).toBe(true);
+      });
+      it('should detect an error if the image id does not match the tinyMceHTML src', () => {
+        const matchingImages = [{ ...mockImage, id: 'some-other-id' }];
+        const tinyMceHTML = mockNode;
+        expect(module.detectImageMatchingError({ matchingImages, tinyMceHTML })).toBe(true);
+      });
+      it('should detect an error if the image id matches the tinyMceHTML src, but width and height do not match', () => {
+        const matchingImages = [{ ...mockImage, width: 100, height: 100 }];
+        const tinyMceHTML = mockNode;
+        expect(module.detectImageMatchingError({ matchingImages, tinyMceHTML })).toBe(true);
+      });
+      it('should not detect any errors if id matches src, and width and height match', () => {
+        const matchingImages = [{ ...mockImage, width: mockNode.width, height: mockNode.height }];
+        const tinyMceHTML = mockNode;
+        expect(module.detectImageMatchingError({ matchingImages, tinyMceHTML })).toBe(false);
+      });
+    });
+
+    describe('setupCustomBehavior', () => {
+      test('It calls addButton and addToggleButton in the editor, but openModal is not called', () => {
+        const addButton = jest.fn();
+        const addIcon = jest.fn();
+        const addToggleButton = jest.fn();
+        const openImgModal = jest.fn();
+        const openSourceCodeModal = jest.fn();
+        const setImage = jest.fn();
+        const updateContent = jest.fn();
+        const editorType = 'expandable';
+        const lmsEndpointUrl = getConfig().LMS_BASE_URL;
+        const editor = {
+          ui: { registry: { addButton, addToggleButton, addIcon } },
+          on: jest.fn(),
+        };
+        const mockOpenModalWithImage = args => ({ openModalWithSelectedImage: args });
+        const expectedSettingsAction = mockOpenModalWithImage({ editor, setImage, openImgModal });
+        const toggleCodeFormatting = expect.any(Function);
+        const toggleLabelFormatting = expect.any(Function);
+        const setupCodeFormatting = expect.any(Function);
+        jest.spyOn(module, moduleKeys.openModalWithSelectedImage)
+          .mockImplementationOnce(mockOpenModalWithImage);
+
+        output = module.setupCustomBehavior({
+          editorType,
+          updateContent,
+          openImgModal,
+          openSourceCodeModal,
+          setImage,
+          lmsEndpointUrl,
+        })(editor);
+        expect(addIcon.mock.calls).toEqual([['textToSpeech', tinyMCE.textToSpeechIcon]]);
+        expect(addButton.mock.calls).toEqual([
+          [tinyMCE.buttons.imageUploadButton, { icon: 'image', tooltip: 'Add Image', onAction: openImgModal }],
+          [tinyMCE.buttons.editImageSettings, { icon: 'image', tooltip: 'Edit Image Settings', onAction: expectedSettingsAction }],
+          [tinyMCE.buttons.code, { text: 'HTML', tooltip: 'Source code', onAction: openSourceCodeModal }],
+          ['customLabelButton', {
+            icon: 'textToSpeech',
+            text: 'Label',
+            tooltip: 'Apply a "Question" label to specific text, recognized by screen readers. Recommended to improve accessibility.',
+            onAction: toggleLabelFormatting,
+          }],
+        ]);
+        expect(addToggleButton.mock.calls).toEqual([
+          [tinyMCE.buttons.codeBlock, {
+            icon: 'sourcecode', tooltip: 'Code Block', onAction: toggleCodeFormatting, onSetup: setupCodeFormatting,
+          }],
+        ]);
+        expect(openImgModal).not.toHaveBeenCalled();
+        expect(editor.on).toHaveBeenCalled();
+      });
+    });
+
+    describe('parseContentForLabels', () => {
+      test('it calls getContent and updateQuestion for some content', () => {
+        const editor = { getContent: jest.fn(() => '<p><label>Some question label</label></p><p>some content <label>around a label</label> followed by more text</p><img src="/static/soMEImagEURl1.jpeg"/>') };
+        const updateContent = jest.fn();
+        const content = '<p><label>Some question label</label></p><p>some content </p><p><label>around a label</label></p><p> followed by more text</p><img src="/static/soMEImagEURl1.jpeg"/>';
+        module.parseContentForLabels({ editor, updateContent });
+        expect(editor.getContent).toHaveBeenCalled();
+        expect(updateContent).toHaveBeenCalledWith(content);
+      });
+      test('it calls getContent and updateQuestion for empty content', () => {
+        const editor = { getContent: jest.fn(() => '') };
+        const updateContent = jest.fn();
+        const content = '';
+        module.parseContentForLabels({ editor, updateContent });
+        expect(editor.getContent).toHaveBeenCalled();
+        expect(updateContent).toHaveBeenCalledWith(content);
+      });
+    });
+
+    describe('replaceStaticWithAsset', () => {
+      const initialContent = `<img src="/static/soMEImagEURl1.jpeg"/><a href="/assets/v1/${baseAssetUrl}/test.pdf">test</a><img src="/${baseAssetUrl}@correct.png" /><img src="/${baseAssetUrl}/correct.png" />`;
+      const learningContextId = 'course-v1:org+test+run';
+      const lmsEndpointUrl = getConfig().LMS_BASE_URL;
+      it('returns updated src for text editor to update content', () => {
+        const expected = `<img src="/${baseAssetUrl}@soMEImagEURl1.jpeg"/><a href="/${baseAssetUrl}@test.pdf">test</a><img src="/${baseAssetUrl}@correct.png" /><img src="/${baseAssetUrl}@correct.png" />`;
+        const actual = module.replaceStaticWithAsset({ initialContent, learningContextId });
+        expect(actual).toEqual(expected);
+      });
+      it('returns updated src with absolute url for expandable editor to update content', () => {
+        const editorType = 'expandable';
+        const expected = `<img src="${lmsEndpointUrl}/${baseAssetUrl}@soMEImagEURl1.jpeg"/><a href="${lmsEndpointUrl}/${baseAssetUrl}@test.pdf">test</a><img src="${lmsEndpointUrl}/${baseAssetUrl}@correct.png" /><img src="${lmsEndpointUrl}/${baseAssetUrl}@correct.png" />`;
+        const actual = module.replaceStaticWithAsset({
+          initialContent,
+          editorType,
+          lmsEndpointUrl,
+          learningContextId,
+        });
+        expect(actual).toEqual(expected);
+      });
+      it('returns false when there are no srcs to update', () => {
+        const content = '<div>Hello world!</div>';
+        const actual = module.replaceStaticWithAsset({ initialContent: content, learningContextId });
+        expect(actual).toBeFalsy();
+      });
+    });
+    describe('setAssetToStaticUrl', () => {
+      it('returns content with updated img links', () => {
+        const editorValue = `<img src="/${baseAssetUrl}/soME_ImagE_URl1"/> <a href="/${baseAssetUrl}@soMEImagEURl">testing link</a>`;
+        const lmsEndpointUrl = getConfig().LMS_BASE_URL;
+        const content = module.setAssetToStaticUrl({ editorValue, lmsEndpointUrl });
+        expect(content).toEqual('<img src="/static/soME_ImagE_URl1"/> <a href="/static/soMEImagEURl">testing link</a>');
+      });
+    });
+
+    describe('editorConfig', () => {
+      const props = {
+        editorContentHtml: null,
+        editorType: 'text',
+        lmsEndpointUrl: getConfig().LMS_BASE_URL,
+        studioEndpointUrl: getConfig().STUDIO_BASE_URL,
+        images: mockImagesRef,
+        isLibrary: false,
+        learningContextId: 'course+org+run',
+      };
+      const evt = 'fakeEvent';
+      const editor = 'myEditor';
+      const setupCustomBehavior = args => ({ setupCustomBehavior: args });
+
+      beforeEach(() => {
+        props.setEditorRef = jest.fn();
+        props.openImgModal = jest.fn();
+        props.openSourceCodeModal = jest.fn();
+        props.initializeEditor = jest.fn();
+        props.updateContent = jest.fn();
+        jest.spyOn(module, moduleKeys.setupCustomBehavior)
+          .mockImplementationOnce(setupCustomBehavior);
+        output = module.editorConfig(props);
+      });
+
+      describe('text editor plugins and toolbar', () => {
+        test('It configures plugins and toolbars correctly', () => {
+          const pluginProps = {
+            isLibrary: props.isLibrary,
+            editorType: props.editorType,
+          };
+          expect(output.init.plugins).toEqual(pluginConfig(pluginProps).plugins);
+          expect(output.init.imagetools_toolbar).toEqual(pluginConfig(pluginProps).imageToolbar);
+          expect(output.init.toolbar).toEqual(pluginConfig(pluginProps).toolbar);
+          Object.keys(pluginConfig(pluginProps).config).forEach(key => {
+            expect(output.init[key]).toEqual(pluginConfig(pluginProps).config[key]);
+          });
+          // Commented out as we investigate whether this is only needed for image proxy
+          // expect(output.init.imagetools_cors_hosts).toMatchObject([props.lmsEndpointUrl]);
+        });
+      });
+      describe('text editor plugins and toolbar for content library', () => {
+        test('It configures plugins and toolbars correctly', () => {
+          const pluginProps = {
+            isLibrary: true,
+            editorType: props.editorType,
+          };
+          output = module.editorConfig({ ...props, isLibrary: true });
+          expect(output.init.plugins).toEqual(pluginConfig(pluginProps).plugins);
+          expect(output.init.imagetools_toolbar).toEqual(pluginConfig(pluginProps).imageToolbar);
+          expect(output.init.toolbar).toEqual(pluginConfig(pluginProps).toolbar);
+          expect(output.init.quickbars_insert_toolbar).toEqual(pluginConfig(pluginProps).quickbarsInsertToolbar);
+          expect(output.init.quickbars_selection_toolbar).toEqual(pluginConfig(pluginProps).quickbarsSelectionToolbar);
+          Object.keys(pluginConfig(pluginProps).config).forEach(key => {
+            expect(output.init[key]).toEqual(pluginConfig(pluginProps).config[key]);
+          });
+        });
+      });
+      describe('problem editor question plugins and toolbar', () => {
+        test('It configures plugins and toolbars correctly', () => {
+          const pluginProps = {
+            isLibrary: props.isLibrary,
+            editorType: 'question',
+            placeholder: 'soMEtExT',
+          };
+          output = module.editorConfig({
+            ...props,
+            editorType: 'question',
+            placeholder: 'soMEtExT',
+          });
+          expect(output.init.plugins).toEqual(pluginConfig(pluginProps).plugins);
+          expect(output.init.imagetools_toolbar).toEqual(pluginConfig(pluginProps).imageToolbar);
+          expect(output.init.toolbar).toEqual(pluginConfig(pluginProps).toolbar);
+          expect(output.init.quickbars_insert_toolbar).toEqual(pluginConfig(pluginProps).quickbarsInsertToolbar);
+          expect(output.init.quickbars_selection_toolbar).toEqual(pluginConfig(pluginProps).quickbarsSelectionToolbar);
+          Object.keys(pluginConfig(pluginProps).config).forEach(key => {
+            expect(output.init[key]).toEqual(pluginConfig(pluginProps).config[key]);
+          });
+        });
+      });
+
+      describe('expandable text area plugins and toolbar', () => {
+        test('It configures plugins, toolbars, and quick toolbars correctly', () => {
+          const pluginProps = {
+            isLibrary: props.isLibrary,
+            editorType: 'expandable',
+            placeholder: 'soMEtExT',
+          };
+          output = module.editorConfig({
+            ...props,
+            editorType: 'expandable',
+            placeholder: 'soMEtExT',
+          });
+          expect(output.init.plugins).toEqual(pluginConfig(pluginProps).plugins);
+          expect(output.init.imagetools_toolbar).toEqual(pluginConfig(pluginProps).imageToolbar);
+          expect(output.init.toolbar).toEqual(pluginConfig(pluginProps).toolbar);
+          expect(output.init.quickbars_insert_toolbar).toEqual(pluginConfig(pluginProps).quickbarsInsertToolbar);
+          expect(output.init.quickbars_selection_toolbar).toEqual(pluginConfig(pluginProps).quickbarsSelectionToolbar);
+          Object.keys(pluginConfig(pluginProps).config).forEach(key => {
+            expect(output.init[key]).toEqual(pluginConfig(pluginProps).config[key]);
+          });
+        });
+      });
+      test('It creates an onInit which calls initializeEditor and setEditorRef', () => {
+        output.onInit(evt, editor);
+        expect(props.setEditorRef).toHaveBeenCalledWith(editor);
+        expect(props.initializeEditor).toHaveBeenCalled();
+      });
+      test('It sets the blockvalue to be empty string by default', () => {
+        expect(output.initialValue).toBe('');
+      });
+      test('It sets the blockvalue to be the blockvalue if nonempty', () => {
+        const editorContentHtml = 'SomE hTML content';
+        output = module.editorConfig({ ...props, editorContentHtml });
+        expect(output.initialValue).toBe(editorContentHtml);
+      });
+
+      it('calls setupCustomBehavior on setup', () => {
+        expect(output.init.setup).toEqual(
+          setupCustomBehavior({
+            editorType: props.editorType,
+            updateContent: props.updateContent,
+            openImgModal: props.openImgModal,
+            openSourceCodeModal: props.openSourceCodeModal,
+            setImage: props.setSelection,
+            images: mockImagesRef,
+            lmsEndpointUrl: props.lmsEndpointUrl,
+            learningContextId: props.learningContextId,
+          }),
+        );
+      });
+    });
+
+    describe('imgModalToggle', () => {
+      const hookKey = state.keys.isImageModalOpen;
+      beforeEach(() => {
+        hook = module.imgModalToggle();
+      });
+      test('isOpen: state value', () => {
+        expect(hook.isImgOpen).toEqual(state.stateVals[hookKey]);
+      });
+      test('openModal: calls setter with true', () => {
+        hook.openImgModal();
+        expect(state.setState[hookKey]).toHaveBeenCalledWith(true);
+      });
+      test('closeModal: calls setter with false', () => {
+        hook.closeImgModal();
+        expect(state.setState[hookKey]).toHaveBeenCalledWith(false);
+      });
+    });
+
+    describe('sourceCodeModalToggle', () => {
+      const editorRef = { current: { focus: jest.fn() } };
+      const hookKey = state.keys.isSourceCodeModalOpen;
+      beforeEach(() => {
+        hook = module.sourceCodeModalToggle(editorRef);
+      });
+      test('isOpen: state value', () => {
+        expect(hook.isSourceCodeOpen).toEqual(state.stateVals[hookKey]);
+      });
+      test('openModal: calls setter with true', () => {
+        hook.openSourceCodeModal();
+        expect(state.setState[hookKey]).toHaveBeenCalledWith(true);
+      });
+      test('closeModal: calls setter with false', () => {
+        hook.closeSourceCodeModal();
+        expect(state.setState[hookKey]).toHaveBeenCalledWith(false);
+      });
+    });
+
+    describe('openModalWithSelectedImage', () => {
+      const setImage = jest.fn();
+      const openImgModal = jest.fn();
+      let editor;
+
+      beforeEach(() => {
+        editor = { selection: { getNode: () => mockNodeWithInitialContentDimensions } };
+        module.openModalWithSelectedImage({
+          editor, images: mockImagesRef, openImgModal, setImage,
+        })();
+      });
+
+      afterEach(() => {
+        jest.clearAllMocks();
+      });
+
+      test('updates React state for selected image to be value stored in editor, adding dimensions from images ref', () => {
+        expect(setImage).toHaveBeenCalledWith({
+          externalUrl: mockNode.src,
+          altText: mockNode.alt,
+          width: mockImage.width,
+          height: mockImage.height,
+        });
+      });
+
+      test('opens image setting modal', () => {
+        expect(openImgModal).toHaveBeenCalled();
+      });
+
+      describe('when images cannot be successfully matched', () => {
+        beforeEach(() => {
+          editor = { selection: { getNode: () => mockNode } };
+          module.openModalWithSelectedImage({
+            editor, images: mockImagesRef, openImgModal, setImage,
+          })();
+        });
+
+        afterEach(() => {
+          jest.clearAllMocks();
+        });
+
+        test('updates React state for selected image to be value stored in editor, setting dimensions to null', () => {
+          expect(setImage).toHaveBeenCalledWith({
+            externalUrl: mockNode.src,
+            altText: mockNode.alt,
+            width: null,
+            height: null,
+          });
+        });
+      });
+    });
+
+    describe('selectedImage hooks', () => {
+      const val = { a: 'VaLUe' };
+      beforeEach(() => {
+        hook = module.selectedImage(val);
+      });
+      test('selection: state value', () => {
+        expect(hook.selection).toEqual(state.stateVals[state.keys.imageSelection]);
+      });
+      test('setSelection: setter for value', () => {
+        expect(hook.setSelection).toEqual(state.setState[state.keys.imageSelection]);
+      });
+      test('clearSelection: calls setter with null', () => {
+        expect(hook.setSelection).not.toHaveBeenCalled();
+        hook.clearSelection();
+        expect(hook.setSelection).toHaveBeenCalledWith(null);
+      });
+    });
+    describe('imageMatchRegex', () => {
+      it('should match a valid image url using "@" separators', () => {
+        expect(
+          'http://localhost:18000/asset-v1:TestX+Test01+Test0101+type@asset+block@image-name.png',
+        ).toMatch(module.imageMatchRegex);
+      });
+      it('should match a url including the keywords "asset-v1", "type", "block" in that order', () => {
+        expect(
+          'https://some.completely/made.up///url-with.?!keywords/asset-v1:Some-asset-key?type=some.type.key!block@image-name.png',
+        ).toMatch(module.imageMatchRegex);
+      });
+      it('should not match a url excluding the keyword "asset-v1"', () => {
+        expect(
+          'https://some.completely/made.up///url-with.?!keywords/Some-asset-key?type=some.type.key!block@image-name.png',
+        ).not.toMatch(module.imageMatchRegex);
+      });
+      it('should match an identifier including the keywords "asset-v1", "type", "block" using "/" separators', () => {
+        expect(
+          'asset-v1:TestX+Test01+Test0101+type/asset+block/image-name.png',
+        ).toMatch(module.imageMatchRegex);
+      });
+      it('should capture values for the keys "asset-v1", "type", "block"', () => {
+        const match = 'asset-v1:TestX+Test01+Test0101+type/asset+block/image-name.png'.match(module.imageMatchRegex);
+        expect(match[1]).toBe('TestX+Test01+Test0101');
+        expect(match[2]).toBe('asset');
+        expect(match[3]).toBe('image-name.png');
+      });
+    });
+
+    describe('matchImageStringsByIdentifiers', () => {
+      it('should be true for an image url and identifier that have the same values for asset-v1, type, and block', () => {
+        const url = 'http://localhost:18000/asset-v1:TestX+Test01+Test0101+type@asset+block@image-name.png';
+        const id = 'asset-v1:TestX+Test01+Test0101+type/asset+block/image-name.png';
+        expect(module.matchImageStringsByIdentifiers(url, id)).toBe(true);
+      });
+      it('should be false for an image url and identifier that have different values for block', () => {
+        const url = 'http://localhost:18000/asset-v1:TestX+Test01+Test0101+type@asset+block@image-name.png';
+        const id = 'asset-v1:TestX+Test01+Test0101+type/asset+block/different-image-name.png';
+        expect(module.matchImageStringsByIdentifiers(url, id)).toBe(false);
+      });
+      it('should return null if it doesnt receive two strings as input', () => {
+        expect(module.matchImageStringsByIdentifiers(['a'], { b: 'c ' })).toBe(null);
+      });
+      it('should return undefined if the strings dont match the regex at all', () => {
+        expect(module.matchImageStringsByIdentifiers('wrong-url', 'blub')).toBe(undefined);
+      });
+    });
+
+    describe('addImagesAndDimensionsToRef', () => {
+      it('should add images to ref', () => {
+        const imagesRef = { current: null };
+        module.addImagesAndDimensionsToRef(
+          {
+            imagesRef,
+            images: mockImages,
+            editorContentHtml: mockEditorContentHtml,
+          },
+        );
+        expect(imagesRef.current).toEqual([mockImage]);
+        expect(imagesRef.current[0].width).toBe(initialContentWidth);
+        expect(imagesRef.current[0].height).toBe(initialContentHeight);
+      });
+    });
+
+    describe('getImageResizeHandler', () => {
+      const setImage = jest.fn();
+
+      it('sets image ref and state to new width', () => {
+        expect(mockImagesRef.current[0].width).toBe(initialContentWidth);
+        module.getImageResizeHandler({ editor: mockEditorWithSelection, imagesRef: mockImagesRef, setImage })();
+
+        expect(setImage).toHaveBeenCalledTimes(1);
+        expect(setImage).toHaveBeenCalledWith(expect.objectContaining({ width: editorImageWidth }));
+        expect(mockImagesRef.current[0].width).not.toBe(initialContentWidth);
+        expect(mockImagesRef.current[0].width).toBe(editorImageWidth);
+      });
+    });
+
+    describe('updateImageDimensions', () => {
+      const unchangedImg = {
+        id: 'asset-v1:TestX+Test01+Test0101+type@asset+block@unchanged-image.png',
+        width: 3,
+        height: 5,
+      };
+      const images = [
+        mockImage,
+        unchangedImg,
+      ];
+
+      it('updates dimensions of correct image in images array', () => {
+        const { result, foundMatch } = module.updateImageDimensions({
+          images, url: mockNode.src, width: 123, height: 321,
+        });
+        const imageToHaveBeenUpdated = result.find(img => img.id === mockImage.id);
+        const imageToHaveBeenUnchanged = result.find(img => img.id === unchangedImg.id);
+
+        expect(imageToHaveBeenUpdated.width).toBe(123);
+        expect(imageToHaveBeenUpdated.height).toBe(321);
+        expect(imageToHaveBeenUnchanged.width).toBe(3);
+        expect(imageToHaveBeenUnchanged.height).toBe(5);
+
+        expect(foundMatch).toBe(true);
+      });
+
+      it('does not update images if id is not found', () => {
+        const { result, foundMatch } = module.updateImageDimensions({
+          images, url: 'not_found', width: 123, height: 321,
+        });
+        expect(result.find(img => img.width === 123 || img.height === 321)).toBeFalsy();
+        expect(foundMatch).toBe(false);
+      });
+    });
+  });
+});
diff --git a/src/editors/sharedComponents/TinyMceWidget/index.jsx b/src/editors/sharedComponents/TinyMceWidget/index.jsx
new file mode 100644
index 0000000000..e82000a4be
--- /dev/null
+++ b/src/editors/sharedComponents/TinyMceWidget/index.jsx
@@ -0,0 +1,134 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Editor } from '@tinymce/tinymce-react';
+import { getConfig } from '@edx/frontend-platform';
+
+import 'tinymce';
+import 'tinymce/themes/silver';
+import 'tinymce/skins/ui/oxide/skin.css';
+import 'tinymce/icons/default';
+import 'frontend-components-tinymce-advanced-plugins';
+
+import ImageUploadModal from '../ImageUploadModal';
+import SourceCodeModal from '../SourceCodeModal';
+import * as hooks from './hooks';
+import './customTinyMcePlugins/embedIframePlugin';
+import { isLibraryV1Key } from '../../../generic/key-utils';
+
+export { prepareEditorRef } from './hooks';
+
+const editorConfigDefaultProps = {
+  setEditorRef: undefined,
+  placeholder: undefined,
+  initializeEditor: undefined,
+  updateContent: undefined,
+  content: undefined,
+  minHeight: undefined,
+};
+
+const editorConfigPropTypes = {
+  setEditorRef: PropTypes.func,
+  placeholder: PropTypes.any,
+  initializeEditor: PropTypes.func,
+  updateContent: PropTypes.func,
+  content: PropTypes.any,
+  minHeight: PropTypes.any,
+};
+
+const TinyMceWidget = ({
+  editorType,
+  editorRef,
+  disabled,
+  id,
+  editorContentHtml, // editorContent in html form
+  learningContextId,
+  images,
+  enableImageUpload,
+  isLibrary,
+  onChange,
+  staticRootUrl,
+  ...editorConfig
+}) => {
+  const { isImgOpen, openImgModal, closeImgModal } = hooks.imgModalToggle();
+  const { isSourceCodeOpen, openSourceCodeModal, closeSourceCodeModal } = hooks.sourceCodeModalToggle(editorRef);
+  const { imagesRef } = hooks.useImages({ images, editorContentHtml });
+  const imageSelection = hooks.selectedImage(null);
+
+  return (
+    <>
+      {enableImageUpload && (
+        <ImageUploadModal
+          isOpen={isImgOpen}
+          close={closeImgModal}
+          editorRef={editorRef}
+          images={imagesRef}
+          editorType={editorType}
+          lmsEndpointUrl={getConfig().LMS_BASE_URL}
+          isLibrary
+          {...imageSelection}
+        />
+      )}
+      {editorType === 'text' && (
+        <SourceCodeModal
+          isOpen={isSourceCodeOpen}
+          close={closeSourceCodeModal}
+          editorRef={editorRef}
+        />
+      )}
+      <Editor
+        id={id}
+        disabled={disabled}
+        onEditorChange={onChange}
+        {
+          ...hooks.editorConfig({
+            openImgModal,
+            openSourceCodeModal,
+            editorType,
+            editorRef,
+            enableImageUpload: isLibraryV1Key(learningContextId) ? false : enableImageUpload,
+            learningContextId,
+            images: imagesRef,
+            editorContentHtml,
+            staticRootUrl,
+            ...imageSelection,
+            ...editorConfig,
+          })
+        }
+      />
+    </>
+  );
+};
+TinyMceWidget.defaultProps = {
+  isLibrary: null,
+  editorType: null,
+  editorRef: null,
+  lmsEndpointUrl: '',
+  studioEndpointUrl: '',
+  images: null,
+  id: null,
+  disabled: false,
+  editorContentHtml: undefined,
+  updateContent: undefined,
+  enableImageUpload: true,
+  onChange: () => ({}),
+  ...editorConfigDefaultProps,
+};
+TinyMceWidget.propTypes = {
+  learningContextId: PropTypes.string.isRequired,
+  editorType: PropTypes.string,
+  isLibrary: PropTypes.bool,
+  images: PropTypes.shape({}),
+  editorRef: PropTypes.shape({}),
+  lmsEndpointUrl: PropTypes.string,
+  studioEndpointUrl: PropTypes.string,
+  id: PropTypes.string,
+  disabled: PropTypes.bool,
+  editorContentHtml: PropTypes.string,
+  updateContent: PropTypes.func,
+  enableImageUpload: PropTypes.bool,
+  onChange: PropTypes.func,
+  ...editorConfigPropTypes,
+};
+
+export const TinyMceWidgetInternal = TinyMceWidget; // For testing only
+export default TinyMceWidget;
diff --git a/src/editors/sharedComponents/TinyMceWidget/index.test.jsx b/src/editors/sharedComponents/TinyMceWidget/index.test.jsx
new file mode 100644
index 0000000000..35e32a727e
--- /dev/null
+++ b/src/editors/sharedComponents/TinyMceWidget/index.test.jsx
@@ -0,0 +1,82 @@
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+import SourceCodeModal from '../SourceCodeModal';
+import ImageUploadModal from '../ImageUploadModal';
+import { imgModalToggle, sourceCodeModalToggle } from './hooks';
+import { TinyMceWidgetInternal as TinyMceWidget } from '.';
+
+const staticUrl = '/assets/sOmEaSsET';
+
+// Per https://github.com/tinymce/tinymce-react/issues/91 React unit testing in JSDOM is not supported by tinymce.
+// Consequently, mock the Editor out.
+jest.mock('@tinymce/tinymce-react', () => {
+  const originalModule = jest.requireActual('@tinymce/tinymce-react');
+  return {
+    __esModule: true,
+    ...originalModule,
+    Editor: () => 'TiNYmCE EDitOR',
+  };
+});
+
+jest.mock('../ImageUploadModal', () => 'ImageUploadModal');
+jest.mock('../SourceCodeModal', () => 'SourceCodeModal');
+
+jest.mock('./hooks', () => ({
+  editorConfig: jest.fn(args => ({ editorConfig: args })),
+  imgModalToggle: jest.fn(() => ({
+    isImgOpen: true,
+    openImgModal: jest.fn().mockName('openModal'),
+    closeImgModal: jest.fn().mockName('closeModal'),
+  })),
+  sourceCodeModalToggle: jest.fn(() => ({
+    isSourceCodeOpen: true,
+    openSourceCodeModal: jest.fn().mockName('openModal'),
+    closeSourceCodeModal: jest.fn().mockName('closeModal'),
+  })),
+  selectedImage: jest.fn(() => ({
+    selection: 'hooks.selectedImage.selection',
+    setSelection: jest.fn().mockName('hooks.selectedImage.setSelection'),
+    clearSelection: jest.fn().mockName('hooks.selectedImage.clearSelection'),
+  })),
+  useImages: jest.fn(() => ({ imagesRef: { current: [{ externalUrl: staticUrl }] } })),
+}));
+
+describe('TinyMceWidget', () => {
+  const props = {
+    editorType: 'text',
+    editorRef: { current: { value: 'something' } },
+    isLibrary: false,
+    images: { sOmEaSsET: { staTICUrl: staticUrl } },
+    lmsEndpointUrl: 'sOmEvaLue.cOm',
+    studioEndpointUrl: 'sOmEoThERvaLue.cOm',
+    disabled: false,
+    id: 'sOMeiD',
+    updateContent: () => ({}),
+    learningContextId: 'course+org+run',
+  };
+  describe('snapshots', () => {
+    imgModalToggle.mockReturnValue({
+      isImgOpen: false,
+      openImgModal: jest.fn().mockName('modal.openModal'),
+      closeImgModal: jest.fn().mockName('modal.closeModal'),
+    });
+    sourceCodeModalToggle.mockReturnValue({
+      isSourceCodeOpen: false,
+      openSourceCodeModal: jest.fn().mockName('modal.openModal'),
+      closeSourceCodeModal: jest.fn().mockName('modal.closeModal'),
+    });
+    test('renders as expected with default behavior', () => {
+      expect(shallow(<TinyMceWidget {...props} />).snapshot).toMatchSnapshot();
+    });
+    test('SourcecodeModal is not rendered', () => {
+      const wrapper = shallow(<TinyMceWidget {...props} editorType="problem" />);
+      expect(wrapper.snapshot).toMatchSnapshot();
+      expect(wrapper.instance.findByType(SourceCodeModal).length).toBe(0);
+    });
+    test('ImageUploadModal is not rendered', () => {
+      const wrapper = shallow(<TinyMceWidget {...props} enableImageUpload={false} />);
+      expect(wrapper.snapshot).toMatchSnapshot();
+      expect(wrapper.instance.findByType(ImageUploadModal).length).toBe(0);
+    });
+  });
+});
diff --git a/src/editors/sharedComponents/TinyMceWidget/pluginConfig.js b/src/editors/sharedComponents/TinyMceWidget/pluginConfig.js
new file mode 100644
index 0000000000..ed64c3e883
--- /dev/null
+++ b/src/editors/sharedComponents/TinyMceWidget/pluginConfig.js
@@ -0,0 +1,112 @@
+import { StrictDict } from '../../utils';
+import { buttons, plugins } from '../../data/constants/tinyMCE';
+
+const mapToolbars = toolbars => toolbars.map(toolbar => toolbar.join(' ')).join(' | ');
+
+const pluginConfig = ({ placeholder, editorType, enableImageUpload }) => {
+  const image = enableImageUpload ? plugins.image : '';
+  const imageTools = enableImageUpload ? plugins.imagetools : '';
+  const imageUploadButton = enableImageUpload ? buttons.imageUploadButton : '';
+  const editImageSettings = enableImageUpload ? buttons.editImageSettings : '';
+  const codePlugin = editorType === 'text' ? plugins.code : '';
+  const codeButton = editorType === 'text' ? buttons.code : '';
+  const labelButton = editorType === 'question' ? buttons.customLabelButton : '';
+  const quickToolbar = editorType === 'expandable' ? plugins.quickbars : '';
+  const inline = editorType === 'expandable';
+  const toolbar = editorType !== 'expandable';
+  const defaultFormat = (editorType === 'question' || editorType === 'expandable') ? 'div' : 'p';
+  const hasStudioHeader = document.querySelector('.studio-header');
+
+  return (
+    StrictDict({
+      plugins: [
+        plugins.link,
+        plugins.lists,
+        plugins.codesample,
+        plugins.emoticons,
+        plugins.table,
+        plugins.hr,
+        plugins.charmap,
+        codePlugin,
+        plugins.autoresize,
+        image,
+        imageTools,
+        quickToolbar,
+        plugins.a11ychecker,
+        plugins.powerpaste,
+        plugins.embediframe,
+      ].join(' '),
+      menubar: false,
+      toolbar: toolbar ? mapToolbars([
+        [buttons.undo, buttons.redo],
+        [buttons.formatSelect],
+        [labelButton],
+        [buttons.bold, buttons.italic, buttons.underline, buttons.foreColor, buttons.backColor],
+        [
+          buttons.align.left,
+          buttons.align.center,
+          buttons.align.right,
+          buttons.align.justify,
+        ],
+        [
+          buttons.bullist,
+          buttons.numlist,
+          buttons.outdent,
+          buttons.indent,
+        ],
+        [imageUploadButton, buttons.link, buttons.unlink, buttons.blockQuote, buttons.codeBlock],
+        [buttons.table, buttons.emoticons, buttons.charmap, buttons.hr],
+        [buttons.removeFormat, codeButton, buttons.a11ycheck, buttons.embediframe],
+      ]) : false,
+      imageToolbar: mapToolbars([
+        // [buttons.rotate.left, buttons.rotate.right],
+        // [buttons.flip.horiz, buttons.flip.vert],
+        [editImageSettings],
+      ]),
+      quickbarsInsertToolbar: toolbar ? false : mapToolbars([
+        [buttons.undo, buttons.redo],
+        [buttons.formatSelect],
+        [buttons.bold, buttons.italic, buttons.underline, buttons.foreColor],
+        [
+          buttons.align.justify,
+          buttons.bullist,
+          buttons.numlist,
+        ],
+        [imageUploadButton, buttons.blockQuote, buttons.codeBlock],
+        [buttons.table, buttons.emoticons, buttons.charmap, buttons.removeFormat, buttons.a11ycheck],
+      ]),
+      quickbarsSelectionToolbar: toolbar ? false : mapToolbars([
+        [buttons.undo, buttons.redo],
+        [buttons.formatSelect],
+        [buttons.bold, buttons.italic, buttons.underline, buttons.foreColor],
+        [
+          buttons.align.justify,
+          buttons.bullist,
+          buttons.numlist,
+        ],
+        [imageUploadButton, buttons.blockQuote, buttons.codeBlock],
+        [buttons.table, buttons.emoticons, buttons.charmap, buttons.removeFormat, buttons.a11ycheck],
+      ]),
+      config: {
+        branding: false,
+        height: '100%',
+        menubar: false,
+        toolbar_mode: 'sliding',
+        toolbar_sticky: true,
+        toolbar_sticky_offset: hasStudioHeader ? 0 : 76,
+        relative_urls: true,
+        convert_urls: false,
+        placeholder,
+        inline,
+        block_formats: 'Header 1=h1;Header 2=h2;Header 3=h3;Header 4=h4;Header 5=h5;Header 6=h6;Div=div;Paragraph=p;Preformatted=pre',
+        forced_root_block: defaultFormat,
+        powerpaste_allow_local_images: true,
+        powerpaste_word_import: 'prompt',
+        powerpaste_html_import: 'prompt',
+        powerpaste_googledoc_import: 'prompt',
+      },
+    })
+  );
+};
+
+export default pluginConfig;
diff --git a/src/editors/sharedComponents/TinyMceWidget/utils.js b/src/editors/sharedComponents/TinyMceWidget/utils.js
new file mode 100644
index 0000000000..a7b1fc0017
--- /dev/null
+++ b/src/editors/sharedComponents/TinyMceWidget/utils.js
@@ -0,0 +1,28 @@
+const getLocatorSafeName = ({ displayName }) => {
+  const locatorSafeName = displayName.replace(/[^\w.%-]/gm, '');
+  return locatorSafeName;
+};
+
+export const getStaticUrl = ({ displayName }) => (`/static/${getLocatorSafeName({ displayName })}`);
+
+export const getRelativeUrl = ({ courseId, displayName }) => {
+  if (displayName) {
+    const assetCourseId = courseId.replace('course', 'asset');
+    const assetPathShell = `/${assetCourseId}+type@asset+block@`;
+    return `${assetPathShell}${displayName}`;
+  }
+  return '';
+};
+
+export const parseAssetName = (relativeUrl) => {
+  let assetName = '';
+  if (relativeUrl.match(/\/asset-v1:\S+[+]\S+[@]\S+[+]\S+\/\w/)?.length >= 1) {
+    const assetBlockName = relativeUrl.substring(0, relativeUrl.search(/("|&quot;)/));
+    const dividedSrc = assetBlockName.split(/\/asset-v1:\S+[+]\S+[@]\S+[+]\S+\//);
+    [, assetName] = dividedSrc;
+  } else {
+    const assetBlockName = relativeUrl.substring(relativeUrl.indexOf('@') + 1, relativeUrl.search(/("|&quot;)/));
+    assetName = assetBlockName.substring(assetBlockName.indexOf('@') + 1);
+  }
+  return assetName;
+};
diff --git a/src/editors/sharedComponents/TypeaheadDropdown/FormGroup.jsx b/src/editors/sharedComponents/TypeaheadDropdown/FormGroup.jsx
new file mode 100644
index 0000000000..f0739e1e4b
--- /dev/null
+++ b/src/editors/sharedComponents/TypeaheadDropdown/FormGroup.jsx
@@ -0,0 +1,99 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import _ from 'lodash';
+import { Form } from '@openedx/paragon';
+
+const FormGroup = (props) => {
+  const handleFocus = (e) => {
+    if (props.handleFocus) { props.handleFocus(e); }
+  };
+  const handleClick = (e) => {
+    if (props.handleClick) { props.handleClick(e); }
+  };
+  const handleOnBlur = (e) => {
+    if (!e.currentTarget.contains(e.relatedTarget)) {
+      if (props.handleBlur) { props.handleBlur(e); }
+    }
+  };
+  return (
+    <Form.Group
+      isInvalid={!!props.errorMessage}
+      onBlur={handleOnBlur}
+      className={props.className}
+    >
+      <Form.Control
+        data-testid="formControl"
+        aria-invalid={props.errorMessage}
+        autoComplete={props.autoComplete ? 'on' : 'off'}
+        onChange={props.handleChange}
+        onFocus={handleFocus}
+        onClick={handleClick}
+        {...props}
+      >
+        {props.options ? props.options() : null}
+      </Form.Control>
+
+      {props.children}
+
+      {props.helpText && _.isEmpty(props.errorMessage) && (
+        <Form.Control.Feedback type="default" key="help-text">
+          {props.helpText}
+        </Form.Control.Feedback>
+      )}
+
+      {!_.isEmpty(props.errorMessage) && (
+        <Form.Control.Feedback
+          type="invalid"
+          key="error"
+          feedback-for={props.name}
+          data-testid="errorMessage"
+        >
+          {props.errorMessage}
+        </Form.Control.Feedback>
+      )}
+    </Form.Group>
+  );
+};
+
+FormGroup.defaultProps = {
+  as: 'input',
+  errorMessage: '',
+  autoComplete: null,
+  readOnly: false,
+  handleBlur: null,
+  handleChange: () => {},
+  handleFocus: null,
+  handleClick: null,
+  helpText: '',
+  placeholder: '',
+  options: null,
+  trailingElement: null,
+  type: 'text',
+  children: null,
+  className: '',
+  controlClassName: '',
+};
+
+FormGroup.propTypes = {
+  as: PropTypes.string,
+  errorMessage: PropTypes.string,
+  autoComplete: PropTypes.string,
+  readOnly: PropTypes.bool,
+  floatingLabel: PropTypes.string.isRequired,
+  handleBlur: PropTypes.func,
+  handleChange: PropTypes.func,
+  handleFocus: PropTypes.func,
+  handleClick: PropTypes.func,
+  helpText: PropTypes.string,
+  placeholder: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  options: PropTypes.func,
+  trailingElement: PropTypes.element,
+  type: PropTypes.string,
+  value: PropTypes.string.isRequired,
+  children: PropTypes.element,
+  className: PropTypes.string,
+  controlClassName: PropTypes.string,
+};
+
+export default FormGroup;
diff --git a/src/editors/sharedComponents/TypeaheadDropdown/FormGroup.test.jsx b/src/editors/sharedComponents/TypeaheadDropdown/FormGroup.test.jsx
new file mode 100644
index 0000000000..7c24ad03e5
--- /dev/null
+++ b/src/editors/sharedComponents/TypeaheadDropdown/FormGroup.test.jsx
@@ -0,0 +1,83 @@
+import {
+  fireEvent,
+  render,
+  screen,
+} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom/extend-expect';
+import FormGroup from './FormGroup';
+
+jest.unmock('@openedx/paragon');
+jest.unmock('@openedx/paragon/icons');
+
+const mockHandleChange = jest.fn();
+const mockHandleFocus = jest.fn();
+const mockHandleClick = jest.fn();
+const mockHandleBlur = jest.fn();
+const defaultProps = {
+  as: 'input',
+  errorMessage: '',
+  borderClass: '',
+  autoComplete: null,
+  readOnly: false,
+  handleBlur: mockHandleBlur,
+  handleChange: mockHandleChange,
+  handleFocus: mockHandleFocus,
+  handleClick: mockHandleClick,
+  helpText: 'helpText text',
+  options: null,
+  trailingElement: null,
+  type: 'text',
+  children: null,
+  className: '',
+  floatingLabel: 'floatingLabel text',
+  name: 'title',
+  value: '',
+};
+
+const renderComponent = (props) => render(<FormGroup {...props} />);
+
+describe('FormGroup', () => {
+  it('renders component without error', () => {
+    renderComponent(defaultProps);
+    expect(screen.getByText(defaultProps.floatingLabel)).toBeVisible();
+    expect(screen.getByText(defaultProps.helpText)).toBeVisible();
+    expect(screen.queryByTestId('errorMessage')).toBeNull();
+  });
+  it('renders component with error', () => {
+    const newProps = {
+      ...defaultProps,
+      errorMessage: 'error message',
+    };
+    renderComponent(newProps);
+    expect(screen.getByText(defaultProps.floatingLabel)).toBeVisible();
+    expect(screen.getByText(newProps.errorMessage)).toBeVisible();
+    expect(screen.queryByText(defaultProps.helpText)).toBeNull();
+  });
+  it('handles element focus', async () => {
+    renderComponent(defaultProps);
+    const formInput = screen.getByTestId('formControl');
+    fireEvent.focus(formInput);
+    expect(mockHandleFocus).toHaveBeenCalled();
+  });
+  it('handles element blur', () => {
+    renderComponent(defaultProps);
+    const formInput = screen.getByTestId('formControl');
+    fireEvent.focus(formInput);
+    fireEvent.focusOut(formInput);
+    expect(mockHandleBlur).toHaveBeenCalled();
+  });
+  it('handles element click', () => {
+    renderComponent(defaultProps);
+    const formInput = screen.getByTestId('formControl');
+    fireEvent.click(formInput);
+    expect(mockHandleClick).toHaveBeenCalled();
+  });
+  it('handles element change', () => {
+    renderComponent(defaultProps);
+    const formInput = screen.getByTestId('formControl');
+    fireEvent.focus(formInput);
+    userEvent.type(formInput, 'opt1');
+    expect(mockHandleChange).toHaveBeenCalled();
+  });
+});
diff --git a/src/editors/sharedComponents/TypeaheadDropdown/index.jsx b/src/editors/sharedComponents/TypeaheadDropdown/index.jsx
new file mode 100644
index 0000000000..c23e1d8a82
--- /dev/null
+++ b/src/editors/sharedComponents/TypeaheadDropdown/index.jsx
@@ -0,0 +1,271 @@
+import React from 'react';
+import {
+  Icon,
+  IconButton,
+  Button,
+  ActionRow,
+} from '@openedx/paragon';
+import { Add, ExpandLess, ExpandMore } from '@openedx/paragon/icons';
+import PropTypes from 'prop-types';
+import { sortBy } from 'lodash';
+// eslint-disable-next-line import/no-unresolved
+import onClickOutside from 'react-onclickoutside';
+import FormGroup from './FormGroup';
+
+class TypeaheadDropdown extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isFocused: false,
+      displayValue: '',
+      icon: this.expandMoreButton(),
+      dropDownItems: [],
+    };
+
+    this.handleFocus = this.handleFocus.bind(this);
+    this.handleOnBlur = this.handleOnBlur.bind(this);
+  }
+
+  shouldComponentUpdate(nextProps) {
+    if (this.props.value !== nextProps.value && nextProps.value !== '') {
+      const opt = this.props.options.find((o) => o === nextProps.value);
+      if (opt && opt !== this.state.displayValue) {
+        this.setState({ displayValue: opt });
+      }
+      return false;
+    }
+
+    return true;
+  }
+
+  // eslint-disable-next-line react/sort-comp
+  getItems(strToFind = '') {
+    let { options } = this.props;
+
+    if (strToFind.length > 0) {
+      options = options.filter((option) => (option.toLowerCase().includes(strToFind.toLowerCase())));
+    }
+
+    const sortedOptions = sortBy(options, (option) => option.toLowerCase());
+
+    return sortedOptions.map((opt) => {
+      let value = opt;
+      if (value.length > 30) {
+        value = value.substring(0, 30).concat('...');
+      }
+
+      return (
+        <button
+          type="button"
+          className="dropdown-item data-hj-suppress"
+          value={value}
+          key={value}
+          onClick={(e) => { this.handleItemClick(e); }}
+        >
+          {value}
+        </button>
+      );
+    });
+  }
+
+  setValue(value) {
+    if (this.props.value === value) {
+      return;
+    }
+
+    if (this.props.handleChange) {
+      this.props.handleChange(value);
+    }
+
+    const opt = this.props.options.find((o) => o === value);
+    if (opt && opt !== this.state.displayValue) {
+      this.setState({ displayValue: opt });
+    }
+  }
+
+  setDisplayValue(value) {
+    const normalized = value.toLowerCase();
+    const opt = this.props.options.find((o) => o.toLowerCase() === normalized);
+    if (opt) {
+      this.setValue(opt);
+      this.setState({ displayValue: opt });
+    } else {
+      this.setValue(value);
+      this.setState({ displayValue: value });
+    }
+  }
+
+  handleClick = (e) => {
+    const dropDownItems = this.getItems(e.target.value);
+    if (dropDownItems.length > 1) {
+      this.setState({ dropDownItems, icon: this.expandLessButton() });
+    }
+
+    if (this.state.dropDownItems.length > 0) {
+      this.setState({ dropDownItems: '', icon: this.expandMoreButton() });
+    }
+  };
+
+  handleOnChange = (e) => {
+    const findstr = e.target.value;
+
+    if (findstr.length) {
+      const filteredItems = this.getItems(findstr);
+      this.setState({ dropDownItems: filteredItems, icon: this.expandLessButton() });
+    } else {
+      this.setState({ dropDownItems: '', icon: this.expandMoreButton() });
+    }
+
+    this.setDisplayValue(e.target.value);
+  };
+
+  // eslint-disable-next-line react/no-unused-class-component-methods
+  handleClickOutside = () => {
+    if (this.state.dropDownItems.length > 0) {
+      this.setState(() => ({
+        icon: this.expandMoreButton(),
+        dropDownItems: '',
+      }));
+    }
+  };
+
+  handleExpandLess() {
+    this.setState({ dropDownItems: '', icon: this.expandMoreButton() });
+  }
+
+  handleExpandMore(e) {
+    const dropDownItems = this.getItems(e.target.value);
+    this.setState({ dropDownItems, icon: this.expandLessButton() });
+  }
+
+  handleFocus(e) {
+    this.setState({ isFocused: true });
+    if (this.props.handleFocus) { this.props.handleFocus(e); }
+  }
+
+  handleOnBlur(e) {
+    this.setState({ isFocused: false });
+    if (this.props.handleBlur) { this.props.handleBlur(e); }
+  }
+
+  handleItemClick(e) {
+    this.setValue(e.target.value);
+    this.setState({ dropDownItems: '', icon: this.expandMoreButton() });
+  }
+
+  expandMoreButton() {
+    return (
+      <IconButton
+        className="expand-more"
+        data-testid="expand-more-button"
+        src={ExpandMore}
+        iconAs={Icon}
+        size="sm"
+        variant="secondary"
+        alt="expand-more"
+        onClick={(e) => { this.handleExpandMore(e); }}
+      />
+    );
+  }
+
+  expandLessButton() {
+    return (
+      <IconButton
+        className="expand-less"
+        data-testid="expand-less-button"
+        src={ExpandLess}
+        iconAs={Icon}
+        size="sm"
+        variant="secondary"
+        alt="expand-less"
+        onClick={(e) => { this.handleExpandLess(e); }}
+      />
+    );
+  }
+
+  render() {
+    const noOptionsMessage = (
+      <ActionRow className="p-2 pl-3">
+        <div className="muted">{this.props.noOptionsMessage}</div>
+        <ActionRow.Spacer />
+        {this.props.allowNewOption && (
+          <Button
+            data-testid="add-option-button"
+            iconBefore={Add}
+            onClick={this.props.addNewOption}
+          >
+            {this.props.newOptionButtonLabel}
+          </Button>
+        )}
+      </ActionRow>
+    );
+    const dropDownEmptyList = this.state.dropDownItems && this.state.isFocused ? noOptionsMessage : null;
+    return (
+      <div className="dropdown-group-wrapper">
+        <FormGroup
+          name={this.props.name}
+          type="text"
+          value={this.state.displayValue}
+          readOnly={this.props.readOnly}
+          controlClassName={this.props.controlClassName}
+          errorMessage={this.props.errorMessage}
+          trailingElement={this.state.icon}
+          floatingLabel={this.props.floatingLabel}
+          placeholder={this.props.placeholder}
+          helpText={this.props.helpMessage}
+          handleChange={this.handleOnChange}
+          handleClick={this.handleClick}
+          handleBlur={this.handleOnBlur}
+          handleFocus={this.handleFocus}
+          isFocused={this.state.isFocused}
+        >
+          <div
+            data-testid="dropdown-container"
+            className="dropdown-container mt-2 rounded bg-light-100 box-shadow-centered-1 mr-2"
+            style={{ maxHeight: '300px', overflowY: 'scroll' }}
+          >
+            { this.state.dropDownItems.length > 0 ? this.state.dropDownItems : dropDownEmptyList }
+          </div>
+        </FormGroup>
+      </div>
+    );
+  }
+}
+
+TypeaheadDropdown.defaultProps = {
+  options: null,
+  floatingLabel: null,
+  handleFocus: null,
+  handleChange: null,
+  handleBlur: null,
+  helpMessage: '',
+  placeholder: '',
+  value: null,
+  errorMessage: null,
+  readOnly: false,
+  controlClassName: '',
+  allowNewOption: false,
+  newOptionButtonLabel: '',
+  addNewOption: null,
+};
+
+TypeaheadDropdown.propTypes = {
+  noOptionsMessage: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  options: PropTypes.arrayOf(PropTypes.string),
+  floatingLabel: PropTypes.string,
+  handleFocus: PropTypes.func,
+  handleChange: PropTypes.func,
+  handleBlur: PropTypes.func,
+  helpMessage: PropTypes.string,
+  placeholder: PropTypes.string,
+  value: PropTypes.string,
+  errorMessage: PropTypes.string,
+  readOnly: PropTypes.bool,
+  controlClassName: PropTypes.string,
+  allowNewOption: PropTypes.bool,
+  newOptionButtonLabel: PropTypes.string,
+  addNewOption: PropTypes.func,
+};
+
+export default onClickOutside(TypeaheadDropdown);
diff --git a/src/editors/sharedComponents/TypeaheadDropdown/index.test.jsx b/src/editors/sharedComponents/TypeaheadDropdown/index.test.jsx
new file mode 100644
index 0000000000..8c133c8685
--- /dev/null
+++ b/src/editors/sharedComponents/TypeaheadDropdown/index.test.jsx
@@ -0,0 +1,137 @@
+import {
+  act,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+  within,
+} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom/extend-expect';
+import TypeaheadDropdown from '.';
+
+jest.unmock('@openedx/paragon');
+jest.unmock('@openedx/paragon/icons');
+
+const defaultProps = {
+  as: 'input',
+  name: 'OrganizationDropdown',
+  floatingLabel: 'floatingLabel text',
+  options: null,
+  handleFocus: null,
+  handleChange: null,
+  handleBlur: null,
+  value: null,
+  errorMessage: null,
+  errorCode: null,
+  readOnly: false,
+  noOptionsMessage: 'No options',
+};
+const renderComponent = (props) => render(<TypeaheadDropdown {...props} />);
+
+describe('common/OrganizationDropdown.jsx', () => {
+  it('renders component without error', () => {
+    renderComponent(defaultProps);
+    expect(screen.getByText(defaultProps.floatingLabel)).toBeVisible();
+  });
+  it('handles element focus', () => {
+    const mockHandleFocus = jest.fn();
+    const newProps = { ...defaultProps, handleFocus: mockHandleFocus };
+    renderComponent(newProps);
+    const formInput = screen.getByTestId('formControl');
+    fireEvent.focus(formInput);
+    expect(mockHandleFocus).toHaveBeenCalled();
+  });
+  it('handles element blur', () => {
+    const mockHandleBlur = jest.fn();
+    const newProps = { ...defaultProps, handleBlur: mockHandleBlur };
+    renderComponent(newProps);
+    const formInput = screen.getByTestId('formControl');
+    fireEvent.focus(formInput);
+    fireEvent.focusOut(formInput);
+    expect(mockHandleBlur).toHaveBeenCalled();
+  });
+  it('renders component with options', async () => {
+    const newProps = { ...defaultProps, options: ['opt2', 'opt1'] };
+    renderComponent(newProps);
+    const formInput = screen.getByTestId('formControl');
+    await waitFor(() => fireEvent.click(formInput));
+    const optionsList = within(screen.getByTestId('dropdown-container')).getAllByRole('button');
+    expect(optionsList.length).toEqual(newProps.options.length);
+  });
+  it('selects option', () => {
+    const newProps = { ...defaultProps, options: ['opt1', 'opt2'] };
+    renderComponent(newProps);
+    const formInput = screen.getByTestId('formControl');
+    fireEvent.click(formInput);
+    const optionsList = within(screen.getByTestId('dropdown-container')).getAllByRole('button');
+    fireEvent.click(optionsList.at([0]));
+    expect(formInput.value).toEqual(newProps.options[0]);
+  });
+  it('toggles options list', async () => {
+    const newProps = { ...defaultProps, options: ['opt1', 'opt2'] };
+    renderComponent(newProps);
+    const optionsList = within(screen.getByTestId('dropdown-container')).queryAllByRole('button');
+    expect(optionsList.length).toEqual(0);
+    await act(async () => {
+      fireEvent.click(screen.getByTestId('expand-more-button'));
+    });
+    expect(within(screen.getByTestId('dropdown-container'))
+      .queryAllByRole('button').length).toEqual(newProps.options.length);
+    await act(async () => {
+      fireEvent.click(screen.getByTestId('expand-less-button'));
+    });
+    expect(within(screen.getByTestId('dropdown-container'))
+      .queryAllByRole('button').length).toEqual(0);
+  });
+  it('shows options list depends on field value', () => {
+    const newProps = { ...defaultProps, options: ['opt1', 'opt2'] };
+    renderComponent(newProps);
+    const formInput = screen.getByTestId('formControl');
+    fireEvent.focus(formInput);
+    userEvent.type(formInput, 'opt1');
+    expect(within(screen.getByTestId('dropdown-container'))
+      .queryAllByRole('button').length).toEqual(1);
+  });
+  it('closes options list on click outside', async () => {
+    const newProps = { ...defaultProps, options: ['opt1', 'opt2'] };
+    renderComponent(newProps);
+    const formInput = screen.getByTestId('formControl');
+    fireEvent.click(formInput);
+    expect(within(screen.getByTestId('dropdown-container'))
+      .queryAllByRole('button').length).toEqual(2);
+    userEvent.click(document.body);
+    expect(within(screen.getByTestId('dropdown-container'))
+      .queryAllByRole('button').length).toEqual(0);
+  });
+  describe('empty options list', () => {
+    it('shows empty options list depends on field value', () => {
+      const newProps = { ...defaultProps, options: ['opt1', 'opt2'] };
+      renderComponent(newProps);
+      const formInput = screen.getByTestId('formControl');
+      fireEvent.focus(formInput);
+      userEvent.type(formInput, '3');
+      const noOptionsList = within(screen.getByTestId('dropdown-container')).getByText('No options');
+      const addButton = within(screen.getByTestId('dropdown-container')).queryByTestId('add-option-button');
+      expect(noOptionsList).toBeVisible();
+      expect(addButton).toBeNull();
+    });
+    it('shows empty options list with add option button', () => {
+      const newProps = {
+        ...defaultProps,
+        options: ['opt1', 'opt2'],
+        allowNewOption: true,
+        newOptionButtonLabel: 'Add new option',
+        addNewOption: jest.fn(),
+      };
+      renderComponent(newProps);
+      const formInput = screen.getByTestId('formControl');
+      fireEvent.focus(formInput);
+      userEvent.type(formInput, '3');
+      const noOptionsList = within(screen.getByTestId('dropdown-container')).getByText('No options');
+      expect(noOptionsList).toBeVisible();
+      const addButton = within(screen.getByTestId('dropdown-container')).getByTestId('add-option-button');
+      expect(addButton).toHaveTextContent(newProps.newOptionButtonLabel);
+    });
+  });
+});
diff --git a/src/editors/supportedEditors.ts b/src/editors/supportedEditors.ts
new file mode 100644
index 0000000000..71d0bad737
--- /dev/null
+++ b/src/editors/supportedEditors.ts
@@ -0,0 +1,20 @@
+import TextEditor from './containers/TextEditor';
+import VideoEditor from './containers/VideoEditor';
+import ProblemEditor from './containers/ProblemEditor';
+import VideoUploadEditor from './containers/VideoUploadEditor';
+import GameEditor from './containers/GameEditor';
+
+// ADDED_EDITOR_IMPORTS GO HERE
+
+import { blockTypes } from './data/constants/app';
+
+const supportedEditors = {
+  [blockTypes.html]: TextEditor,
+  [blockTypes.video]: VideoEditor,
+  [blockTypes.problem]: ProblemEditor,
+  [blockTypes.video_upload]: VideoUploadEditor,
+  // ADDED_EDITORS GO BELOW
+  [blockTypes.game]: GameEditor,
+} as const;
+
+export default supportedEditors;
diff --git a/src/editors/testUtils.js b/src/editors/testUtils.js
new file mode 100644
index 0000000000..c7bfe5417f
--- /dev/null
+++ b/src/editors/testUtils.js
@@ -0,0 +1,186 @@
+/* istanbul ignore file */
+import react from 'react';
+import { StrictDict } from './utils';
+/**
+ * Mocked formatMessage provided by react-intl
+ */
+export const formatMessage = (msg, values) => {
+  let message = msg.defaultMessage;
+  if (values === undefined) {
+    return message;
+  }
+  Object.keys(values).forEach((key) => {
+    // eslint-disable-next-line
+    message = message.replace(`{${key}}`, values[key]);
+  });
+  return message;
+};
+
+/**
+ * Mock a single component, or a nested component so that its children render nicely
+ * in snapshots.
+ * @param {string} name - parent component name
+ * @param {obj} contents - object of child components with intended component
+ *   render name.
+ * @return {func} - mock component with nested children.
+ *
+ * usage:
+ *   mockNestedComponent('Card', { Body: 'Card.Body', Form: { Control: { Feedback: 'Form.Control.Feedback' }}... });
+ *   mockNestedComponent('IconButton', 'IconButton');
+ */
+export const mockNestedComponent = (name, contents) => {
+  if (typeof contents !== 'object') {
+    return contents;
+  }
+  const fn = () => name;
+  Object.defineProperty(fn, 'name', { value: name });
+  Object.keys(contents).forEach((nestedName) => {
+    const value = contents[nestedName];
+    fn[nestedName] = typeof value !== 'object'
+      ? value
+      : mockNestedComponent(`${name}.${nestedName}`, value);
+  });
+  return fn;
+};
+
+/**
+ * Mock a module of components.  nested components will be rendered nicely in snapshots.
+ * @param {obj} mapping - component module mock config.
+ * @return {obj} - module of flat and nested components that will render nicely in snapshots.
+ * usage:
+ *   mockNestedComponents({
+ *     Card: { Body: 'Card.Body' },
+ *     IconButton: 'IconButton',
+ *   })
+ */
+export const mockNestedComponents = (mapping) => Object.entries(mapping).reduce(
+  (obj, [name, value]) => ({
+    ...obj,
+    [name]: mockNestedComponent(name, value),
+  }),
+  {},
+);
+
+/**
+ * Mock utility for working with useState in a hooks module.
+ * Expects/requires an object containing the state object in order to ensure
+ * the mock behavior works appropriately.
+ *
+ * Expected format:
+ *   hooks = { state: { <key>: (val) => React.createRef(val), ... } }
+ *
+ * Returns a utility for mocking useState and providing access to specific state values
+ * and setState methods, as well as allowing per-test configuration of useState value returns.
+ *
+ * Example usage:
+ *   // hooks.js
+ *   import * as module from './hooks';
+ *   const state = {
+ *     isOpen: (val) => React.useState(val),
+ *     hasDoors: (val) => React.useState(val),
+ *     selected: (val) => React.useState(val),
+ *   };
+ *   ...
+ *   export const exampleHook = () => {
+ *     const [isOpen, setIsOpen] = module.state.isOpen(false);
+ *     if (!isOpen) { return null; }
+ *     return { isOpen, setIsOpen };
+ *   }
+ *   ...
+ *
+ *   // hooks.test.js
+ *   import * as hooks from './hooks';
+ *   const state = new MockUseState(hooks)
+ *   ...
+ *   describe('state hooks', () => {
+ *     state.testGetter(state.keys.isOpen);
+ *     state.testGetter(state.keys.hasDoors);
+ *     state.testGetter(state.keys.selected);
+ *   });
+ *   describe('exampleHook', () => {
+ *     beforeEach(() => { state.mock(); });
+ *     it('returns null if isOpen is default value', () => {
+ *       expect(hooks.exampleHook()).toEqual(null);
+ *     });
+ *     it('returns isOpen and setIsOpen if isOpen is not null', () => {
+ *       state.mockVal(state.keys.isOpen, true);
+ *       expect(hooks.exampleHook()).toEqual({
+ *         isOpen: true,
+ *         setIsOpen: state.setState[state.keys.isOpen],
+ *       });
+ *     });
+ *     afterEach(() => { state.restore(); });
+ *   });
+ *
+ * @param {obj} hooks - hooks module containing a 'state' object
+ */
+export class MockUseState {
+  constructor(hooks) {
+    this.hooks = hooks;
+    this.oldState = null;
+    this.setState = {};
+    this.stateVals = {};
+
+    this.mock = this.mock.bind(this);
+    this.restore = this.restore.bind(this);
+    this.mockVal = this.mockVal.bind(this);
+    this.testGetter = this.testGetter.bind(this);
+  }
+
+  /**
+   * @return {object} - StrictDict of state object keys
+   */
+  get keys() {
+    return StrictDict(Object.keys(this.hooks.state).reduce(
+      (obj, key) => ({ ...obj, [key]: key }),
+      {},
+    ));
+  }
+
+  /**
+   * Replace the hook module's state object with a mocked version, initialized to default values.
+   */
+  mock() {
+    this.oldState = this.hooks.state;
+    Object.keys(this.keys).forEach(key => {
+      this.hooks.state[key] = jest.fn(val => {
+        this.stateVals[key] = val;
+        return [val, this.setState[key]];
+      });
+    });
+    this.setState = Object.keys(this.keys).reduce(
+      (obj, key) => ({
+        ...obj,
+        [key]: jest.fn(val => {
+          this.hooks.state[key] = val;
+        }),
+      }),
+      {},
+    );
+  }
+
+  /**
+   * Restore the hook module's state object to the actual code.
+   */
+  restore() {
+    this.hooks.state = this.oldState;
+  }
+
+  /**
+   * Mock the state getter associated with a single key to return a specific value one time.
+   * @param {string} key - state key (from this.keys)
+   * @param {any} val - new value to be returned by the useState call.
+   */
+  mockVal(key, val) {
+    this.hooks.state[key].mockReturnValueOnce([val, this.setState[key]]);
+  }
+
+  testGetter(key) {
+    test(`${key} state getter should return useState passthrough`, () => {
+      const testValue = 'some value';
+      const useState = (val) => ({ useState: val });
+      jest.spyOn(react, 'useState').mockImplementationOnce(useState);
+      expect(this.hooks.state[key](testValue)).toEqual(useState(testValue));
+    });
+  }
+}
diff --git a/src/editors/utils/StrictDict.test.js b/src/editors/utils/StrictDict.test.js
new file mode 100644
index 0000000000..276f50d2c1
--- /dev/null
+++ b/src/editors/utils/StrictDict.test.js
@@ -0,0 +1,62 @@
+import StrictDict from './StrictDict';
+
+const value1 = 'valUE1';
+const value2 = 'vALue2';
+const key1 = 'Key1';
+const key2 = 'keY2';
+
+jest.spyOn(window, 'Error').mockImplementation(error => ({ stack: error }));
+
+describe('StrictDict', () => {
+  let consoleError;
+  let consoleLog;
+  let windowError;
+  beforeEach(() => {
+    consoleError = window.console.error;
+    consoleLog = window.console.lot;
+    windowError = window.Error;
+    window.console.error = jest.fn();
+    window.console.log = jest.fn();
+    window.Error = jest.fn(error => ({ stack: error }));
+  });
+  afterAll(() => {
+    window.console.error = consoleError;
+    window.console.log = consoleLog;
+    window.Error = windowError;
+  });
+  const rawDict = {
+    [key1]: value1,
+    [key2]: value2,
+  };
+  const dict = StrictDict(rawDict);
+  it('provides key access like a normal dict object', () => {
+    expect(dict[key1]).toEqual(value1);
+  });
+  it('allows key listing', () => {
+    expect(Object.keys(dict)).toEqual([key1, key2]);
+  });
+  it('allows item listing', () => {
+    expect(Object.values(dict)).toEqual([value1, value2]);
+  });
+  it('allows stringification', () => {
+    expect(dict.toString()).toEqual(rawDict.toString());
+    expect({ ...dict }).toEqual({ ...rawDict });
+  });
+  it('allows entry listing', () => {
+    expect(Object.entries(dict)).toEqual(Object.entries(rawDict));
+  });
+  describe('missing key', () => {
+    it('logs error with target, name, and error stack', () => {
+      // eslint-ignore-next-line no-unused-vars
+      const callBadKey = () => dict.fakeKey;
+      callBadKey();
+      expect(window.console.error.mock.calls).toEqual([
+        [{ target: dict, name: 'fakeKey' }],
+        [Error('invalid property "fakeKey"').stack],
+      ]);
+    });
+    it('returns undefined', () => {
+      expect(dict.fakeKey).toEqual(undefined);
+    });
+  });
+});
diff --git a/src/editors/utils/StrictDict.ts b/src/editors/utils/StrictDict.ts
new file mode 100644
index 0000000000..c7b69c161a
--- /dev/null
+++ b/src/editors/utils/StrictDict.ts
@@ -0,0 +1,24 @@
+/* eslint-disable no-console */
+const strictGet = (target, name) => {
+  if (name === Symbol.toStringTag) {
+    return target;
+  }
+
+  if (name in target || name === '_reactFragment') {
+    return target[name];
+  }
+
+  if (name === '$$typeof') {
+    return typeof target;
+  }
+
+  console.log(name.toString());
+  console.error({ target, name });
+  const e = Error(`invalid property "${name.toString()}"`);
+  console.error(e.stack);
+  return undefined;
+};
+
+const StrictDict = <T extends Record<string, any>>(dict: T) => new Proxy(dict, { get: strictGet }) as T;
+
+export default StrictDict;
diff --git a/src/editors/utils/camelizeKeys.js b/src/editors/utils/camelizeKeys.js
new file mode 100644
index 0000000000..9a69870baa
--- /dev/null
+++ b/src/editors/utils/camelizeKeys.js
@@ -0,0 +1,15 @@
+import { camelCase } from 'lodash';
+
+const camelizeKeys = (obj) => {
+  if (Array.isArray(obj)) {
+    return obj.map(v => camelizeKeys(v));
+  }
+  if (obj != null && obj.constructor === Object) {
+    return Object.keys(obj).reduce(
+      (result, key) => ({ ...result, [camelCase(key)]: camelizeKeys(obj[key]) }),
+      {},
+    );
+  }
+  return obj;
+};
+export default camelizeKeys;
diff --git a/src/editors/utils/camelizeKeys.test.js b/src/editors/utils/camelizeKeys.test.js
new file mode 100644
index 0000000000..3bdd209c59
--- /dev/null
+++ b/src/editors/utils/camelizeKeys.test.js
@@ -0,0 +1,32 @@
+import { camelizeKeys } from './index';
+
+const snakeCaseObject = {
+  some_attribute:
+    {
+      another_attribute: [
+        { a_list: 'a lIsT' },
+        { of_attributes: 'iN diFferent' },
+        { different_cases: 'to Test' },
+      ],
+    },
+  a_final_attribute: null,
+  a_last_one: undefined,
+};
+const camelCaseObject = {
+  someAttribute:
+    {
+      anotherAttribute: [
+        { aList: 'a lIsT' },
+        { ofAttributes: 'iN diFferent' },
+        { differentCases: 'to Test' },
+      ],
+    },
+  aFinalAttribute: null,
+  aLastOne: undefined,
+};
+
+describe('camelizeKeys', () => {
+  it('converts keys of objects to be camelCase', () => {
+    expect(camelizeKeys(snakeCaseObject)).toEqual(camelCaseObject);
+  });
+});
diff --git a/src/editors/utils/formatDuration.js b/src/editors/utils/formatDuration.js
new file mode 100644
index 0000000000..8458f51fc2
--- /dev/null
+++ b/src/editors/utils/formatDuration.js
@@ -0,0 +1,18 @@
+import * as moment from 'moment-shortformat';
+
+const formatDuration = (duration) => {
+  const d = moment.duration(duration, 'seconds');
+  if (d.hours() > 0) {
+    return (
+      `${d.hours().toString().padStart(2, '0')}:`
+      + `${d.minutes().toString().padStart(2, '0')}:`
+      + `${d.seconds().toString().padStart(2, '0')}`
+    );
+  }
+  return (
+    `${d.minutes().toString().padStart(2, '0')}:`
+    + `${d.seconds().toString().padStart(2, '0')}`
+  );
+};
+
+export default formatDuration;
diff --git a/src/editors/utils/formatDuration.test.js b/src/editors/utils/formatDuration.test.js
new file mode 100644
index 0000000000..6720130d7c
--- /dev/null
+++ b/src/editors/utils/formatDuration.test.js
@@ -0,0 +1,12 @@
+import formatDuration from './formatDuration';
+
+describe('formatDuration', () => {
+  test.each([
+    [60, '01:00'],
+    [35, '00:35'],
+    [60 * 10 + 15, '10:15'],
+    [60 * 60 + 60 * 15 + 13, '01:15:13'],
+  ])('correct functionality of formatDuration with duration as %p', (duration, expected) => {
+    expect(formatDuration(duration)).toEqual(expected);
+  });
+});
diff --git a/src/editors/utils/formatLibraryImgRequest.ts b/src/editors/utils/formatLibraryImgRequest.ts
new file mode 100644
index 0000000000..e5f1780da0
--- /dev/null
+++ b/src/editors/utils/formatLibraryImgRequest.ts
@@ -0,0 +1,110 @@
+import { LibraryAssetResponse } from '../../library-authoring/data/api';
+
+type GalleryImageData = {
+  displayName: string,
+  url: string,
+  externalUrl: string,
+  portableUrl: string,
+  thumbnail: string,
+  id: string,
+  locked: boolean,
+};
+
+/**
+ * Extracts the file name from a file path.
+ * This function strips the directory structure and returns the base file name.
+ *
+ * @param data - The asset data containing the file path.
+ * @returns The file name extracted from the path.
+ *
+ * @example
+ * const data = { path: '/static/example.jpg', size: 12345, url: 'http://example.com/static/example.jpg' };
+ * const fileName = getFileName(data); // "example.jpg"
+ */
+
+export const getFileName = (data: LibraryAssetResponse): string => data.path.replace(/^.*[\\/]/, '');
+
+/**
+ * Checks if the provided asset data corresponds to an accepted image file type based on its extension.
+ *
+ * @param data - The asset data containing the file path.
+ * @param acceptedImgExt - The array of accepted image extensions.
+ * @returns `true` if the file has an accepted image extension, otherwise `false`.
+ *
+ * @example
+ * const data = { path: '/static/example.jpg', size: 12345, url: 'http://example.com/static/example.jpg' };
+ * const isImg = isImage(data); // Returns true
+ */
+
+export const isImage = (data: LibraryAssetResponse, acceptedImgExt:string[]): boolean => {
+  const ext = data.path.split('.').pop()?.toLowerCase() ?? ''; // Extract and lowercase the file extension
+  return ext !== '' && acceptedImgExt.includes(ext);
+};
+/**
+ * Parses a `LibraryAssetResponse` into a `GalleryImageData` object.
+ * This includes extracting the file name and constructing other image-related metadata.
+ *
+ * @param data - The asset data to parse.
+ * @returns The parsed image data with properties like `displayName`, `externalUrl`, etc.
+ *
+ * @example
+ * const data = { path: '/static/example.jpg', size: 12345, url: 'http://example.com/static/example.jpg' };
+ * const imageData = parseLibraryImageData(data);
+ * // {
+ * //   displayName: 'example.jpg',
+ * //   url: 'http://example.com/static/example.jpg',
+ * //   externalUrl: 'http://example.com/static/example.jpg',
+ * //   portableUrl: '/static/example.jpg',
+ * //   thumbnail: 'http://example.com/static/example.jpg',
+ * //   id: '/static/example.jpg',
+ * //   locked: false
+ * // }
+ */
+
+export const parseLibraryImageData = (data: LibraryAssetResponse): GalleryImageData => ({
+  displayName: getFileName(data),
+  url: data.url,
+  externalUrl: data.url,
+  portableUrl: data.path,
+  thumbnail: data.url,
+  id: data.path,
+  locked: false,
+});
+
+/**
+ * Filters and transforms an array of `LibrariesAssetResponse` objects into a dictionary of `GalleryImageData`.
+ * Only assets with recognized extension (i.e., valid image files) are included in the result.
+ *
+ * @param librariesAssets - The array of asset data to process.
+ * @param acceptedImgExt - The array of accepted image extensions.
+ * @returns A dictionary where each key is the file name and the value is the corresponding `GalleryImageData`.
+ *
+ * @example
+ * const assets = [
+ *   { path: '/static/example.jpg', size: 12345, url: 'http://example.com/static/example.jpg' },
+ *   { path: '/assets/files/unsupported.xyz', size: 67890, url: 'http://example.com/assets/files/unsupported.xyz' }
+ * ];
+ * const imageAssets = getLibraryImageAssets(assets);
+ * // {
+ * //   'example.jpg': {
+ * //     displayName: 'example.jpg',
+ * //     url: 'http://example.com/static/example.jpg',
+ * //     externalUrl: 'http://example.com/static/example.jpg',
+ * //     portableUrl: '/static/example.jpg',
+ * //     thumbnail: 'http://example.com/static/example.jpg',
+ * //     id: '/static/example.jpg',
+ * //     locked: false
+ * //   }
+ * // }
+ */
+
+export const getLibraryImageAssets = (
+  librariesAssets: Array<LibraryAssetResponse>,
+  acceptedImgExt:string[],
+): Record<string, GalleryImageData> => librariesAssets.reduce((obj, file) => {
+  if (isImage(file, acceptedImgExt)) {
+    const imageData = parseLibraryImageData(file);
+    return { ...obj, [imageData.displayName]: imageData };
+  }
+  return obj;
+}, {} as Record<string, GalleryImageData>);
diff --git a/src/editors/utils/formatLibreryImgRequest.test.ts b/src/editors/utils/formatLibreryImgRequest.test.ts
new file mode 100644
index 0000000000..3e4a05d55c
--- /dev/null
+++ b/src/editors/utils/formatLibreryImgRequest.test.ts
@@ -0,0 +1,96 @@
+import {
+  parseLibraryImageData, getLibraryImageAssets, isImage, getFileName,
+} from './formatLibraryImgRequest';
+import { LibraryAssetResponse } from '../../library-authoring/data/api';
+
+const acceptedImgExt = ['jpg'];
+
+describe('parseLibraryImageData', () => {
+  describe('getFileName', () => {
+    it('should return the file name from the path', () => {
+      const data: LibraryAssetResponse = {
+        path: 'static/example.jpg',
+        size: 12345,
+        url: 'http://example.com/static/example.jpg',
+      };
+
+      const result = getFileName(data);
+      expect(result).toBe('example.jpg');
+    });
+  });
+
+  describe('isImage', () => {
+    it('should return true for supported file extensions', () => {
+      const data: LibraryAssetResponse = {
+        path: 'static/example.jpg',
+        size: 12345,
+        url: 'http://example.com/static/example.jpg',
+      };
+      const result = isImage(data, acceptedImgExt);
+      expect(result).toBe(true);
+    });
+
+    it('should return false for unsupported file extensions', () => {
+      const data: LibraryAssetResponse = {
+        path: '/assets/files/unknown.xyz',
+        size: 12345,
+        url: 'http://example.com/assets/files/unknown.xyz',
+      };
+
+      const result = isImage(data, acceptedImgExt);
+      expect(result).toBe(false);
+    });
+  });
+
+  describe('parseLibraryImageData', () => {
+    it('should correctly parse a valid LibraryAssetResponse into TinyMCEImageData', () => {
+      const data: LibraryAssetResponse = {
+        path: 'static/example.jpg',
+        size: 12345,
+        url: 'http://example.com/static/example.jpg',
+      };
+
+      const result = parseLibraryImageData(data);
+      expect(result).toEqual({
+        displayName: 'example.jpg',
+        url: 'http://example.com/static/example.jpg',
+        externalUrl: 'http://example.com/static/example.jpg',
+        portableUrl: 'static/example.jpg',
+        thumbnail: 'http://example.com/static/example.jpg',
+        id: 'static/example.jpg',
+        locked: false,
+      });
+    });
+  });
+
+  describe('getLibraryImageAssets', () => {
+    it('should filter out assets and return a dictionary of valid images', () => {
+      const assets: LibraryAssetResponse[] = [
+        { path: 'static/example.jpg', size: 12345, url: 'http://example.com/static/example.jpg' },
+        { path: '/assets/files/unsupported.xyz', size: 67890, url: 'http://example.com/assets/files/unsupported.xyz' },
+      ];
+
+      const result = getLibraryImageAssets(assets, acceptedImgExt);
+      expect(result).toEqual({
+        'example.jpg': {
+          displayName: 'example.jpg',
+          url: 'http://example.com/static/example.jpg',
+          externalUrl: 'http://example.com/static/example.jpg',
+          portableUrl: 'static/example.jpg',
+          thumbnail: 'http://example.com/static/example.jpg',
+          id: 'static/example.jpg',
+          locked: false,
+        },
+      });
+    });
+
+    it('should return an empty object if no valid images are found', () => {
+      const assets: LibraryAssetResponse[] = [
+        { path: '/assets/files/unsupported.xyz', size: 67890, url: 'http://example.com/assets/files/unsupported.xyz' },
+      ];
+
+      const result = getLibraryImageAssets(assets, acceptedImgExt);
+      expect(result).toEqual({});
+    });
+  });
+});
diff --git a/src/editors/utils/index.ts b/src/editors/utils/index.ts
new file mode 100644
index 0000000000..0a65a2fd70
--- /dev/null
+++ b/src/editors/utils/index.ts
@@ -0,0 +1,7 @@
+export { default as StrictDict } from './StrictDict';
+export { default as keyStore } from './keyStore';
+export { default as camelizeKeys } from './camelizeKeys';
+export { default as removeItemOnce } from './removeOnce';
+export { default as formatDuration } from './formatDuration';
+export { default as snakeCaseKeys } from './snakeCaseKeys';
+export * from './formatLibraryImgRequest';
diff --git a/src/editors/utils/keyStore.ts b/src/editors/utils/keyStore.ts
new file mode 100644
index 0000000000..560a6f7800
--- /dev/null
+++ b/src/editors/utils/keyStore.ts
@@ -0,0 +1,10 @@
+import StrictDict from './StrictDict';
+
+const keyStore = <Obj extends Record<string, any>>(collection: Obj): { [K in keyof Obj]: K } => StrictDict(
+  Object.keys(collection).reduce(
+    (obj, key) => ({ ...obj, [key]: key }),
+    {},
+  ),
+) as any;
+
+export default keyStore;
diff --git a/src/editors/utils/removeOnce.js b/src/editors/utils/removeOnce.js
new file mode 100644
index 0000000000..739f7dcb1a
--- /dev/null
+++ b/src/editors/utils/removeOnce.js
@@ -0,0 +1,13 @@
+const removeItemOnce = (arr, value) => {
+  // create a deep copy as array.splice doesn't work if the array has been dereferenced.
+  // structuredClone works in node >11, and we are on node 16.
+  // eslint-disable-next-line
+  const deepCopy = structuredClone(arr);
+  const index = deepCopy.indexOf(value);
+  if (index > -1) {
+    deepCopy.splice(index, 1);
+  }
+  return deepCopy;
+};
+
+export default removeItemOnce;
diff --git a/src/editors/utils/snakeCaseKeys.js b/src/editors/utils/snakeCaseKeys.js
new file mode 100644
index 0000000000..f522ce44bd
--- /dev/null
+++ b/src/editors/utils/snakeCaseKeys.js
@@ -0,0 +1,15 @@
+import { snakeCase } from 'lodash';
+
+const snakeCaseKeys = (obj) => {
+  if (Array.isArray(obj)) {
+    return obj.map(v => snakeCaseKeys(v));
+  }
+  if (obj != null && obj.constructor === Object) {
+    return Object.keys(obj).reduce(
+      (result, key) => ({ ...result, [snakeCase(key)]: snakeCaseKeys(obj[key]) }),
+      {},
+    );
+  }
+  return obj;
+};
+export default snakeCaseKeys;
diff --git a/src/editors/utils/snakeCaseKeys.test.js b/src/editors/utils/snakeCaseKeys.test.js
new file mode 100644
index 0000000000..3bdd209c59
--- /dev/null
+++ b/src/editors/utils/snakeCaseKeys.test.js
@@ -0,0 +1,32 @@
+import { camelizeKeys } from './index';
+
+const snakeCaseObject = {
+  some_attribute:
+    {
+      another_attribute: [
+        { a_list: 'a lIsT' },
+        { of_attributes: 'iN diFferent' },
+        { different_cases: 'to Test' },
+      ],
+    },
+  a_final_attribute: null,
+  a_last_one: undefined,
+};
+const camelCaseObject = {
+  someAttribute:
+    {
+      anotherAttribute: [
+        { aList: 'a lIsT' },
+        { ofAttributes: 'iN diFferent' },
+        { differentCases: 'to Test' },
+      ],
+    },
+  aFinalAttribute: null,
+  aLastOne: undefined,
+};
+
+describe('camelizeKeys', () => {
+  it('converts keys of objects to be camelCase', () => {
+    expect(camelizeKeys(snakeCaseObject)).toEqual(camelCaseObject);
+  });
+});
diff --git a/src/export-page/CourseExportPage.jsx b/src/export-page/CourseExportPage.jsx
new file mode 100644
index 0000000000..36f96f2513
--- /dev/null
+++ b/src/export-page/CourseExportPage.jsx
@@ -0,0 +1,137 @@
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { useDispatch, useSelector } from 'react-redux';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import {
+  Container, Layout, Button, Card,
+} from '@openedx/paragon';
+import { ArrowCircleDown as ArrowCircleDownIcon } from '@openedx/paragon/icons';
+import Cookies from 'universal-cookie';
+import { getConfig } from '@edx/frontend-platform';
+import { Helmet } from 'react-helmet';
+
+import InternetConnectionAlert from '../generic/internet-connection-alert';
+import ConnectionErrorAlert from '../generic/ConnectionErrorAlert';
+import SubHeader from '../generic/sub-header/SubHeader';
+import { RequestStatus } from '../data/constants';
+import { useModel } from '../generic/model-store';
+import messages from './messages';
+import ExportSidebar from './export-sidebar/ExportSidebar';
+import {
+  getCurrentStage, getError, getExportTriggered, getLoadingStatus, getSavingStatus,
+} from './data/selectors';
+import { startExportingCourse } from './data/thunks';
+import { EXPORT_STAGES, LAST_EXPORT_COOKIE_NAME } from './data/constants';
+import { updateExportTriggered, updateSavingStatus, updateSuccessDate } from './data/slice';
+import ExportModalError from './export-modal-error/ExportModalError';
+import ExportFooter from './export-footer/ExportFooter';
+import ExportStepper from './export-stepper/ExportStepper';
+
+const CourseExportPage = ({ intl, courseId }) => {
+  const dispatch = useDispatch();
+  const exportTriggered = useSelector(getExportTriggered);
+  const courseDetails = useModel('courseDetails', courseId);
+  const currentStage = useSelector(getCurrentStage);
+  const { msg: errorMessage } = useSelector(getError);
+  const loadingStatus = useSelector(getLoadingStatus);
+  const savingStatus = useSelector(getSavingStatus);
+  const cookies = new Cookies();
+  const isShowExportButton = !exportTriggered || errorMessage || currentStage === EXPORT_STAGES.SUCCESS;
+  const anyRequestFailed = savingStatus === RequestStatus.FAILED || loadingStatus === RequestStatus.FAILED;
+  const isLoadingDenied = loadingStatus === RequestStatus.DENIED;
+  const anyRequestInProgress = savingStatus === RequestStatus.PENDING || loadingStatus === RequestStatus.IN_PROGRESS;
+
+  useEffect(() => {
+    const cookieData = cookies.get(LAST_EXPORT_COOKIE_NAME);
+    if (cookieData) {
+      dispatch(updateSavingStatus({ status: RequestStatus.SUCCESSFUL }));
+      dispatch(updateExportTriggered(true));
+      dispatch(updateSuccessDate(cookieData.date));
+    }
+  }, []);
+
+  if (isLoadingDenied) {
+    return (
+      <Container size="xl" className="course-unit px-4 mt-4">
+        <ConnectionErrorAlert />
+      </Container>
+    );
+  }
+
+  return (
+    <>
+      <Helmet>
+        <title>
+          {intl.formatMessage(messages.pageTitle, {
+            headingTitle: intl.formatMessage(messages.headingTitle),
+            courseName: courseDetails?.name,
+            siteName: process.env.SITE_NAME,
+          })}
+        </title>
+      </Helmet>
+      <Container size="xl" className="mt-4 px-4 export">
+        <section className="setting-items mb-4">
+          <Layout
+            lg={[{ span: 9 }, { span: 3 }]}
+            md={[{ span: 9 }, { span: 3 }]}
+            sm={[{ span: 9 }, { span: 3 }]}
+            xs={[{ span: 9 }, { span: 3 }]}
+            xl={[{ span: 9 }, { span: 3 }]}
+          >
+            <Layout.Element>
+              <article>
+                <SubHeader
+                  title={intl.formatMessage(messages.headingTitle)}
+                  subtitle={intl.formatMessage(messages.headingSubtitle)}
+                />
+                <p className="small">{intl.formatMessage(messages.description1, { studioShortName: getConfig().STUDIO_SHORT_NAME })}</p>
+                <p className="small">{intl.formatMessage(messages.description2)}</p>
+                <Card>
+                  <Card.Header
+                    className="h3 px-3 text-black mb-4"
+                    title={intl.formatMessage(messages.titleUnderButton)}
+                  />
+                  {isShowExportButton && (
+                    <Card.Section className="px-3 py-1">
+                      <Button
+                        size="lg"
+                        block
+                        className="mb-4"
+                        onClick={() => dispatch(startExportingCourse(courseId))}
+                        iconBefore={ArrowCircleDownIcon}
+                      >
+                        {intl.formatMessage(messages.buttonTitle)}
+                      </Button>
+                    </Card.Section>
+                  )}
+                </Card>
+                {exportTriggered && <ExportStepper courseId={courseId} />}
+                <ExportFooter />
+              </article>
+            </Layout.Element>
+            <Layout.Element>
+              <ExportSidebar courseId={courseId} />
+            </Layout.Element>
+          </Layout>
+        </section>
+        <ExportModalError courseId={courseId} />
+      </Container>
+      <div className="alert-toast">
+        <InternetConnectionAlert
+          isFailed={anyRequestFailed}
+          isQueryPending={anyRequestInProgress}
+          onInternetConnectionFailed={() => null}
+        />
+      </div>
+    </>
+  );
+};
+
+CourseExportPage.propTypes = {
+  intl: intlShape.isRequired,
+  courseId: PropTypes.string.isRequired,
+};
+
+CourseExportPage.defaultProps = {};
+
+export default injectIntl(CourseExportPage);
diff --git a/src/export-page/CourseExportPage.scss b/src/export-page/CourseExportPage.scss
new file mode 100644
index 0000000000..80eced90ec
--- /dev/null
+++ b/src/export-page/CourseExportPage.scss
@@ -0,0 +1,11 @@
+@import "./export-footer/ExportFooter";
+
+.export {
+  .help-sidebar {
+    margin-top: 7.188rem;
+  }
+
+  .pgn__stepper-header-step-list {
+    flex-direction: column;
+  }
+}
diff --git a/src/export-page/CourseExportPage.test.jsx b/src/export-page/CourseExportPage.test.jsx
new file mode 100644
index 0000000000..4c0a01d5e6
--- /dev/null
+++ b/src/export-page/CourseExportPage.test.jsx
@@ -0,0 +1,166 @@
+import { getConfig, initializeMockApp } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { IntlProvider, injectIntl } from '@edx/frontend-platform/i18n';
+import { AppProvider } from '@edx/frontend-platform/react';
+import { fireEvent, render, waitFor } from '@testing-library/react';
+import MockAdapter from 'axios-mock-adapter';
+import { Helmet } from 'react-helmet';
+import Cookies from 'universal-cookie';
+
+import initializeStore from '../store';
+import { RequestStatus } from '../data/constants';
+import stepperMessages from './export-stepper/messages';
+import modalErrorMessages from './export-modal-error/messages';
+import { getExportStatusApiUrl, postExportCourseApiUrl } from './data/api';
+import { EXPORT_STAGES } from './data/constants';
+import { exportPageMock } from './__mocks__';
+import messages from './messages';
+import CourseExportPage from './CourseExportPage';
+
+let store;
+let axiosMock;
+let cookies;
+const courseId = '123';
+const courseName = 'About Node JS';
+
+jest.mock('../generic/model-store', () => ({
+  useModel: jest.fn().mockReturnValue({
+    name: courseName,
+  }),
+}));
+
+jest.mock('universal-cookie', () => {
+  const mCookie = {
+    get: jest.fn(),
+    set: jest.fn(),
+  };
+  return jest.fn(() => mCookie);
+});
+
+const RootWrapper = () => (
+  <AppProvider store={store}>
+    <IntlProvider locale="en" messages={{}}>
+      <CourseExportPage intl={injectIntl} courseId={courseId} />
+    </IntlProvider>
+  </AppProvider>
+);
+
+describe('<CourseExportPage />', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+    store = initializeStore();
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+    axiosMock
+      .onGet(postExportCourseApiUrl(courseId))
+      .reply(200, exportPageMock);
+    cookies = new Cookies();
+    cookies.get.mockReturnValue(null);
+  });
+  it('should render page title correctly', async () => {
+    render(<RootWrapper />);
+    await waitFor(() => {
+      const helmet = Helmet.peek();
+      expect(helmet.title).toEqual(
+        `${messages.headingTitle.defaultMessage} | ${courseName} | ${process.env.SITE_NAME}`,
+      );
+    });
+  });
+  it('should render without errors', async () => {
+    const { getByText } = render(<RootWrapper />);
+    await waitFor(() => {
+      expect(getByText(messages.headingSubtitle.defaultMessage)).toBeInTheDocument();
+      const exportPageElement = getByText(messages.headingTitle.defaultMessage, {
+        selector: 'h2.sub-header-title',
+      });
+      expect(exportPageElement).toBeInTheDocument();
+      expect(getByText(messages.titleUnderButton.defaultMessage)).toBeInTheDocument();
+      expect(getByText(messages.description2.defaultMessage)).toBeInTheDocument();
+      expect(getByText(messages.buttonTitle.defaultMessage)).toBeInTheDocument();
+    });
+  });
+  it('should start exporting on click', async () => {
+    const { getByText, container } = render(<RootWrapper />);
+    const button = container.querySelector('.btn-primary');
+    fireEvent.click(button);
+    expect(getByText(stepperMessages.stepperPreparingDescription.defaultMessage)).toBeInTheDocument();
+  });
+  it('should show modal error', async () => {
+    axiosMock
+      .onGet(getExportStatusApiUrl(courseId))
+      .reply(200, { exportStatus: EXPORT_STAGES.EXPORTING, exportError: { rawErrorMsg: 'test error', editUnitUrl: 'http://test-url.test' } });
+    const { getByText, queryByText, container } = render(<RootWrapper />);
+    const startExportButton = container.querySelector('.btn-primary');
+    fireEvent.click(startExportButton);
+    // eslint-disable-next-line no-promise-executor-return
+    await new Promise((r) => setTimeout(r, 3500));
+    expect(getByText(/There has been a failure to export to XML at least one component. It is recommended that you go to the edit page and repair the error before attempting another export. Please check that all components on the page are valid and do not display any error messages. The raw error message is: test error/i));
+    const closeModalWindowButton = getByText('Return to export');
+    fireEvent.click(closeModalWindowButton);
+    expect(queryByText(modalErrorMessages.errorCancelButtonUnit.defaultMessage)).not.toBeInTheDocument();
+    fireEvent.click(closeModalWindowButton);
+  });
+  it('should fetch status without clicking when cookies has', async () => {
+    cookies.get.mockReturnValue({ date: 1679787000 });
+    const { getByText } = render(<RootWrapper />);
+    expect(getByText(stepperMessages.stepperPreparingDescription.defaultMessage)).toBeInTheDocument();
+  });
+  it('should show download path for relative path', async () => {
+    axiosMock
+      .onGet(getExportStatusApiUrl(courseId))
+      .reply(200, { exportStatus: EXPORT_STAGES.SUCCESS, exportOutput: '/test-download-path.test' });
+    const { getByText, container } = render(<RootWrapper />);
+    const startExportButton = container.querySelector('.btn-primary');
+    fireEvent.click(startExportButton);
+    // eslint-disable-next-line no-promise-executor-return
+    await new Promise((r) => setTimeout(r, 3500));
+    const downloadButton = getByText(stepperMessages.downloadCourseButtonTitle.defaultMessage);
+    expect(downloadButton).toBeInTheDocument();
+    expect(downloadButton.getAttribute('href')).toEqual(`${getConfig().STUDIO_BASE_URL}/test-download-path.test`);
+  });
+  it('should show download path for absolute path', async () => {
+    axiosMock
+      .onGet(getExportStatusApiUrl(courseId))
+      .reply(200, { exportStatus: EXPORT_STAGES.SUCCESS, exportOutput: 'http://test-download-path.test' });
+    const { getByText, container } = render(<RootWrapper />);
+    const startExportButton = container.querySelector('.btn-primary');
+    fireEvent.click(startExportButton);
+    // eslint-disable-next-line no-promise-executor-return
+    await new Promise((r) => setTimeout(r, 3500));
+    const downloadButton = getByText(stepperMessages.downloadCourseButtonTitle.defaultMessage);
+    expect(downloadButton).toBeInTheDocument();
+    expect(downloadButton.getAttribute('href')).toEqual('http://test-download-path.test');
+  });
+  it('displays an alert and sets status to DENIED when API responds with 403', async () => {
+    axiosMock
+      .onGet(getExportStatusApiUrl(courseId))
+      .reply(403);
+    const { getByRole, container } = render(<RootWrapper />);
+    const startExportButton = container.querySelector('.btn-primary');
+    fireEvent.click(startExportButton);
+    // eslint-disable-next-line no-promise-executor-return
+    await new Promise((r) => setTimeout(r, 3500));
+    expect(getByRole('alert')).toBeInTheDocument();
+    const { loadingStatus } = store.getState().courseExport;
+    expect(loadingStatus).toEqual(RequestStatus.DENIED);
+  });
+
+  it('sets loading status to FAILED upon receiving a 404 response from the API', async () => {
+    axiosMock
+      .onGet(getExportStatusApiUrl(courseId))
+      .reply(404);
+    const { container } = render(<RootWrapper />);
+    const startExportButton = container.querySelector('.btn-primary');
+    fireEvent.click(startExportButton);
+    // eslint-disable-next-line no-promise-executor-return
+    await new Promise((r) => setTimeout(r, 3500));
+    const { loadingStatus } = store.getState().courseExport;
+    expect(loadingStatus).toEqual(RequestStatus.FAILED);
+  });
+});
diff --git a/src/export-page/__mocks__/exportPage.js b/src/export-page/__mocks__/exportPage.js
new file mode 100644
index 0000000000..5380633d9c
--- /dev/null
+++ b/src/export-page/__mocks__/exportPage.js
@@ -0,0 +1,3 @@
+module.exports = {
+  exportStatus: 1,
+};
diff --git a/src/export-page/__mocks__/index.js b/src/export-page/__mocks__/index.js
new file mode 100644
index 0000000000..1f0258df26
--- /dev/null
+++ b/src/export-page/__mocks__/index.js
@@ -0,0 +1 @@
+export { default as exportPageMock } from './exportPage';
diff --git a/src/export-page/data/api.js b/src/export-page/data/api.js
new file mode 100644
index 0000000000..c85a060843
--- /dev/null
+++ b/src/export-page/data/api.js
@@ -0,0 +1,18 @@
+import { camelCaseObject, getConfig } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+
+const getApiBaseUrl = () => getConfig().STUDIO_BASE_URL;
+export const postExportCourseApiUrl = (courseId) => new URL(`export/${courseId}`, getApiBaseUrl()).href;
+export const getExportStatusApiUrl = (courseId) => new URL(`export_status/${courseId}`, getApiBaseUrl()).href;
+
+export async function startCourseExporting(courseId) {
+  const { data } = await getAuthenticatedHttpClient()
+    .post(postExportCourseApiUrl(courseId));
+  return camelCaseObject(data);
+}
+
+export async function getExportStatus(courseId) {
+  const { data } = await getAuthenticatedHttpClient()
+    .get(getExportStatusApiUrl(courseId));
+  return camelCaseObject(data);
+}
diff --git a/src/export-page/data/api.test.js b/src/export-page/data/api.test.js
new file mode 100644
index 0000000000..70acc8b243
--- /dev/null
+++ b/src/export-page/data/api.test.js
@@ -0,0 +1,47 @@
+import MockAdapter from 'axios-mock-adapter';
+import { initializeMockApp, getConfig } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+
+import { getExportStatus, postExportCourseApiUrl, startCourseExporting } from './api';
+
+let axiosMock;
+const courseId = 'course-123';
+
+describe('API Functions', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should fetch status on start exporting', async () => {
+    const data = { exportStatus: 1 };
+    axiosMock.onPost(postExportCourseApiUrl(courseId)).reply(200, data);
+
+    const result = await startCourseExporting(courseId);
+
+    expect(axiosMock.history.post[0].url).toEqual(postExportCourseApiUrl(courseId));
+    expect(result).toEqual(data);
+  });
+
+  it('should fetch on get export status', async () => {
+    const data = { exportStatus: 2 };
+    const queryUrl = new URL(`export_status/${courseId}`, getConfig().STUDIO_BASE_URL).href;
+    axiosMock.onGet(queryUrl).reply(200, data);
+
+    const result = await getExportStatus(courseId);
+
+    expect(axiosMock.history.get[0].url).toEqual(queryUrl);
+    expect(result).toEqual(data);
+  });
+});
diff --git a/src/export-page/data/constants.js b/src/export-page/data/constants.js
new file mode 100644
index 0000000000..5824c61c7d
--- /dev/null
+++ b/src/export-page/data/constants.js
@@ -0,0 +1,8 @@
+export const LAST_EXPORT_COOKIE_NAME = 'lastexport';
+export const EXPORT_STAGES = {
+  PREPARING: 0,
+  EXPORTING: 1,
+  COMPRESSING: 2,
+  SUCCESS: 3,
+};
+export const SUCCESS_DATE_FORMAT = 'MM/DD/yyyy';
diff --git a/src/export-page/data/selectors.js b/src/export-page/data/selectors.js
new file mode 100644
index 0000000000..2c6d0d737f
--- /dev/null
+++ b/src/export-page/data/selectors.js
@@ -0,0 +1,8 @@
+export const getExportTriggered = (state) => state.courseExport.exportTriggered;
+export const getCurrentStage = (state) => state.courseExport.currentStage;
+export const getDownloadPath = (state) => state.courseExport.downloadPath;
+export const getSuccessDate = (state) => state.courseExport.successDate;
+export const getError = (state) => state.courseExport.error;
+export const getIsErrorModalOpen = (state) => state.courseExport.isErrorModalOpen;
+export const getLoadingStatus = (state) => state.courseExport.loadingStatus;
+export const getSavingStatus = (state) => state.courseExport.savingStatus;
diff --git a/src/export-page/data/slice.js b/src/export-page/data/slice.js
new file mode 100644
index 0000000000..f431a69369
--- /dev/null
+++ b/src/export-page/data/slice.js
@@ -0,0 +1,63 @@
+/* eslint-disable no-param-reassign */
+import { createSlice } from '@reduxjs/toolkit';
+
+const initialState = {
+  exportTriggered: false,
+  currentStage: 0,
+  error: { msg: null, unitUrl: null },
+  downloadPath: null,
+  successDate: null,
+  isErrorModalOpen: false,
+  loadingStatus: '',
+  savingStatus: '',
+};
+
+const slice = createSlice({
+  name: 'exportPage',
+  initialState,
+  reducers: {
+    updateExportTriggered: (state, { payload }) => {
+      state.exportTriggered = payload;
+    },
+    updateCurrentStage: (state, { payload }) => {
+      if (payload >= state.currentStage) {
+        state.currentStage = payload;
+      }
+    },
+    updateDownloadPath: (state, { payload }) => {
+      state.downloadPath = payload;
+    },
+    updateSuccessDate: (state, { payload }) => {
+      state.successDate = payload;
+    },
+    updateError: (state, { payload }) => {
+      state.error = payload;
+    },
+    updateIsErrorModalOpen: (state, { payload }) => {
+      state.isErrorModalOpen = payload;
+    },
+    reset: () => initialState,
+    updateLoadingStatus: (state, { payload }) => {
+      state.loadingStatus = payload.status;
+    },
+    updateSavingStatus: (state, { payload }) => {
+      state.savingStatus = payload.status;
+    },
+  },
+});
+
+export const {
+  updateExportTriggered,
+  updateCurrentStage,
+  updateDownloadPath,
+  updateSuccessDate,
+  updateError,
+  updateIsErrorModalOpen,
+  reset,
+  updateLoadingStatus,
+  updateSavingStatus,
+} = slice.actions;
+
+export const {
+  reducer,
+} = slice;
diff --git a/src/export-page/data/thunks.js b/src/export-page/data/thunks.js
new file mode 100644
index 0000000000..dd86ba84ef
--- /dev/null
+++ b/src/export-page/data/thunks.js
@@ -0,0 +1,100 @@
+import Cookies from 'universal-cookie';
+import moment from 'moment';
+import { getConfig } from '@edx/frontend-platform';
+
+import { RequestStatus } from '../../data/constants';
+import { setExportCookie } from '../utils';
+import { EXPORT_STAGES, LAST_EXPORT_COOKIE_NAME } from './constants';
+
+import {
+  startCourseExporting,
+  getExportStatus,
+} from './api';
+import {
+  updateExportTriggered,
+  updateCurrentStage,
+  updateDownloadPath,
+  updateSuccessDate,
+  updateError,
+  updateIsErrorModalOpen,
+  reset,
+  updateLoadingStatus,
+  updateSavingStatus,
+} from './slice';
+
+function setExportDate({
+  date, exportStatus, exportOutput, dispatch,
+}) {
+  // If there is no cookie for the last export date, set it now.
+  const cookies = new Cookies();
+  const cookieData = cookies.get(LAST_EXPORT_COOKIE_NAME);
+  if (!cookieData?.completed) {
+    setExportCookie(date, exportStatus === EXPORT_STAGES.SUCCESS);
+  }
+  // If we don't have export date set yet via cookie, set success date to current date.
+  if (exportOutput && !cookieData?.completed) {
+    dispatch(updateSuccessDate(date));
+  }
+}
+
+export function startExportingCourse(courseId) {
+  return async (dispatch) => {
+    dispatch(updateSavingStatus({ status: RequestStatus.PENDING }));
+    try {
+      dispatch(reset());
+      dispatch(updateExportTriggered(true));
+      const exportData = await startCourseExporting(courseId);
+      dispatch(updateCurrentStage(exportData.exportStatus));
+      setExportCookie(moment().valueOf(), exportData.exportStatus === EXPORT_STAGES.SUCCESS);
+
+      dispatch(updateSavingStatus({ status: RequestStatus.SUCCESSFUL }));
+      return true;
+    } catch (error) {
+      dispatch(updateSavingStatus({ status: RequestStatus.FAILED }));
+      return false;
+    }
+  };
+}
+
+export function fetchExportStatus(courseId) {
+  return async (dispatch) => {
+    dispatch(updateLoadingStatus({ status: RequestStatus.IN_PROGRESS }));
+    try {
+      const {
+        exportStatus, exportOutput, exportError,
+      } = await getExportStatus(courseId);
+      dispatch(updateCurrentStage(Math.abs(exportStatus)));
+
+      const date = moment().valueOf();
+
+      setExportDate({
+        date, exportStatus, exportOutput, dispatch,
+      });
+
+      if (exportError) {
+        const errorMessage = exportError.rawErrorMsg || exportError;
+        const errorUnitUrl = exportError.editUnitUrl || null;
+        dispatch(updateError({ msg: errorMessage, unitUrl: errorUnitUrl }));
+        dispatch(updateIsErrorModalOpen(true));
+      }
+
+      if (exportOutput) {
+        if (exportOutput.startsWith('/')) {
+          dispatch(updateDownloadPath(`${getConfig().STUDIO_BASE_URL}${exportOutput}`));
+        } else {
+          dispatch(updateDownloadPath(exportOutput));
+        }
+      }
+
+      dispatch(updateLoadingStatus({ status: RequestStatus.SUCCESSFUL }));
+      return true;
+    } catch (error) {
+      if (error.response && error.response.status === 403) {
+        dispatch(updateLoadingStatus({ status: RequestStatus.DENIED }));
+      } else {
+        dispatch(updateLoadingStatus({ courseId, status: RequestStatus.FAILED }));
+      }
+      return false;
+    }
+  };
+}
diff --git a/src/export-page/data/thunks.test.js b/src/export-page/data/thunks.test.js
new file mode 100644
index 0000000000..e8dd9762f3
--- /dev/null
+++ b/src/export-page/data/thunks.test.js
@@ -0,0 +1,146 @@
+import Cookies from 'universal-cookie';
+import { fetchExportStatus } from './thunks';
+import * as api from './api';
+import { EXPORT_STAGES } from './constants';
+
+jest.mock('universal-cookie', () => jest.fn().mockImplementation(() => ({
+  get: jest.fn().mockImplementation(() => ({ completed: false })),
+})));
+
+jest.mock('../utils', () => ({
+  setExportCookie: jest.fn(),
+}));
+
+describe('fetchExportStatus thunk', () => {
+  const dispatch = jest.fn();
+  const getState = jest.fn();
+  const courseId = 'course-123';
+  const exportStatus = EXPORT_STAGES.COMPRESSING;
+  const exportOutput = 'export output';
+  const exportError = 'export error';
+  let mockGetExportStatus;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    mockGetExportStatus = jest.spyOn(api, 'getExportStatus').mockResolvedValue({
+      exportStatus,
+      exportOutput,
+      exportError,
+    });
+  });
+
+  it('should dispatch updateCurrentStage with export status', async () => {
+    mockGetExportStatus.mockResolvedValue({
+      exportStatus,
+      exportOutput,
+      exportError,
+    });
+
+    await fetchExportStatus(courseId)(dispatch, getState);
+
+    expect(dispatch).toHaveBeenCalledWith({
+      payload: exportStatus,
+      type: 'exportPage/updateCurrentStage',
+    });
+  });
+
+  it('should dispatch updateError on export error', async () => {
+    mockGetExportStatus.mockResolvedValue({
+      exportStatus,
+      exportOutput,
+      exportError,
+    });
+
+    await fetchExportStatus(courseId)(dispatch, getState);
+
+    expect(dispatch).toHaveBeenCalledWith({
+      payload: {
+        msg: exportError,
+        unitUrl: null,
+      },
+      type: 'exportPage/updateError',
+    });
+  });
+
+  it('should dispatch updateIsErrorModalOpen with true if export error', async () => {
+    mockGetExportStatus.mockResolvedValue({
+      exportStatus,
+      exportOutput,
+      exportError,
+    });
+
+    await fetchExportStatus(courseId)(dispatch, getState);
+
+    expect(dispatch).toHaveBeenCalledWith({
+      payload: true,
+      type: 'exportPage/updateIsErrorModalOpen',
+    });
+  });
+
+  it('should not dispatch updateIsErrorModalOpen if no export error', async () => {
+    mockGetExportStatus.mockResolvedValue({
+      exportStatus,
+      exportOutput,
+      exportError: null,
+    });
+
+    await fetchExportStatus(courseId)(dispatch, getState);
+
+    expect(dispatch).not.toHaveBeenCalledWith({
+      payload: false,
+      type: 'exportPage/updateIsErrorModalOpen',
+    });
+  });
+
+  it("should dispatch updateDownloadPath if there's export output", async () => {
+    mockGetExportStatus.mockResolvedValue({
+      exportStatus,
+      exportOutput,
+      exportError,
+    });
+
+    await fetchExportStatus(courseId)(dispatch, getState);
+
+    expect(dispatch).toHaveBeenCalledWith({
+      payload: exportOutput,
+      type: 'exportPage/updateDownloadPath',
+    });
+  });
+
+  it('should dispatch updateSuccessDate with current date if export status is success', async () => {
+    mockGetExportStatus.mockResolvedValue({
+      exportStatus:
+        EXPORT_STAGES.SUCCESS,
+      exportOutput,
+      exportError,
+    });
+
+    await fetchExportStatus(courseId)(dispatch, getState);
+
+    expect(dispatch).toHaveBeenCalledWith({
+      payload: expect.any(Number),
+      type: 'exportPage/updateSuccessDate',
+    });
+  });
+
+  it('should not dispatch updateSuccessDate with current date if last-export cookie is already set', async () => {
+    mockGetExportStatus.mockResolvedValue({
+      exportStatus:
+        EXPORT_STAGES.SUCCESS,
+      exportOutput,
+      exportError,
+    });
+
+    Cookies.mockImplementation(() => ({
+      get: jest.fn().mockReturnValueOnce({ completed: true }),
+    }));
+
+    await fetchExportStatus(courseId)(dispatch, getState);
+
+    expect(dispatch).not.toHaveBeenCalledWith({
+      payload: expect.any,
+      type: 'exportPage/updateSuccessDate',
+    });
+  });
+});
diff --git a/src/export-page/export-footer/ExportFooter.jsx b/src/export-page/export-footer/ExportFooter.jsx
new file mode 100644
index 0000000000..358bf474b0
--- /dev/null
+++ b/src/export-page/export-footer/ExportFooter.jsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import {
+  injectIntl,
+  intlShape,
+} from '@edx/frontend-platform/i18n';
+import { Layout } from '@openedx/paragon';
+
+import messages from './messages';
+
+const ExportFooter = ({ intl }) => (
+  <footer className="mt-4 small">
+    <Layout
+      lg={[{ span: 5 }, { span: 2 }, { span: 5 }]}
+      md={[{ span: 5 }, { span: 2 }, { span: 5 }]}
+      sm={[{ span: 5 }, { span: 2 }, { span: 5 }]}
+      xs={[{ span: 5 }, { span: 2 }, { span: 5 }]}
+      xl={[{ span: 5 }, { span: 2 }, { span: 5 }]}
+    >
+      <Layout.Element>
+        <h4>{intl.formatMessage(messages.exportedDataTitle)}</h4>
+        <ul className="export-footer-list">
+          <li>{intl.formatMessage(messages.exportedDataItem1)}</li>
+          <li>{intl.formatMessage(messages.exportedDataItem2)}</li>
+          <li>{intl.formatMessage(messages.exportedDataItem3)}</li>
+          <li>{intl.formatMessage(messages.exportedDataItem4)}</li>
+          <li>{intl.formatMessage(messages.exportedDataItem5)}</li>
+          <li>{intl.formatMessage(messages.exportedDataItem6)}</li>
+          <li>{intl.formatMessage(messages.exportedDataItem7)}</li>
+        </ul>
+      </Layout.Element>
+      <Layout.Element />
+      <Layout.Element>
+        <h4>{intl.formatMessage(messages.notExportedDataTitle)}</h4>
+        <ul className="export-footer-list">
+          <li>{intl.formatMessage(messages.notExportedDataItem1)}</li>
+          <li>{intl.formatMessage(messages.notExportedDataItem2)}</li>
+          <li>{intl.formatMessage(messages.notExportedDataItem3)}</li>
+          <li>{intl.formatMessage(messages.notExportedDataItem4)}</li>
+        </ul>
+      </Layout.Element>
+    </Layout>
+  </footer>
+);
+
+ExportFooter.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(ExportFooter);
diff --git a/src/export-page/export-footer/ExportFooter.scss b/src/export-page/export-footer/ExportFooter.scss
new file mode 100644
index 0000000000..33c04ac650
--- /dev/null
+++ b/src/export-page/export-footer/ExportFooter.scss
@@ -0,0 +1,14 @@
+.export-footer-list {
+  list-style: none;
+  padding-left: 0;
+
+  li {
+    padding-bottom: .3125rem;
+    border-bottom: 1px solid #E5E5E5;
+    margin-bottom: .3125rem;
+  }
+
+  li:last-child {
+    border-bottom: none;
+  }
+}
diff --git a/src/export-page/export-footer/messages.js b/src/export-page/export-footer/messages.js
new file mode 100644
index 0000000000..a11d5b7ade
--- /dev/null
+++ b/src/export-page/export-footer/messages.js
@@ -0,0 +1,58 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  exportedDataTitle: {
+    id: 'course-authoring.export.footer.exportedData.title',
+    defaultMessage: 'Data exported with your course:',
+  },
+  exportedDataItem1: {
+    id: 'course-authoring.export.footer.exportedData.item.1',
+    defaultMessage: 'Values from Advanced settings, including MATLAB API keys and LTI passports',
+  },
+  exportedDataItem2: {
+    id: 'course-authoring.export.footer.exportedData.item.2',
+    defaultMessage: 'Course content (all sections, sub-sections, and units)',
+  },
+  exportedDataItem3: {
+    id: 'course-authoring.export.footer.exportedData.item.3',
+    defaultMessage: 'Course structure',
+  },
+  exportedDataItem4: {
+    id: 'course-authoring.export.footer.exportedData.item.4',
+    defaultMessage: 'Individual problems',
+  },
+  exportedDataItem5: {
+    id: 'course-authoring.export.footer.exportedData.item.5',
+    defaultMessage: 'Pages',
+  },
+  exportedDataItem6: {
+    id: 'course-authoring.export.footer.exportedData.item.6',
+    defaultMessage: 'Course assets',
+  },
+  exportedDataItem7: {
+    id: 'course-authoring.export.footer.exportedData.item.7',
+    defaultMessage: 'Course settings',
+  },
+  notExportedDataTitle: {
+    id: 'course-authoring.export.footer.notExportedData.title',
+    defaultMessage: 'Data not exported with your course:',
+  },
+  notExportedDataItem1: {
+    id: 'course-authoring.export.footer.notExportedData.item.1',
+    defaultMessage: 'User data',
+  },
+  notExportedDataItem2: {
+    id: 'course-authoring.export.footer.notExportedData.item.2',
+    defaultMessage: 'Course team data',
+  },
+  notExportedDataItem3: {
+    id: 'course-authoring.export.footer.notExportedData.item.3',
+    defaultMessage: 'Forum/discussion data',
+  },
+  notExportedDataItem4: {
+    id: 'course-authoring.export.footer.notExportedData.item.4',
+    defaultMessage: 'Certificates',
+  },
+});
+
+export default messages;
diff --git a/src/export-page/export-modal-error/ExportModalError.jsx b/src/export-page/export-modal-error/ExportModalError.jsx
new file mode 100644
index 0000000000..64d67f2f16
--- /dev/null
+++ b/src/export-page/export-modal-error/ExportModalError.jsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useDispatch, useSelector } from 'react-redux';
+import { getConfig } from '@edx/frontend-platform';
+import PropTypes from 'prop-types';
+import { Error as ErrorIcon } from '@openedx/paragon/icons';
+
+import ModalNotification from '../../generic/modal-notification';
+import { getError, getIsErrorModalOpen } from '../data/selectors';
+import { updateIsErrorModalOpen } from '../data/slice';
+import messages from './messages';
+
+const ExportModalError = ({
+  intl,
+  courseId,
+}) => {
+  const dispatch = useDispatch();
+  const isErrorModalOpen = useSelector(getIsErrorModalOpen);
+  const { msg: errorMessage, unitUrl: unitErrorUrl } = useSelector(getError);
+
+  const handleUnitRedirect = () => { window.location.assign(unitErrorUrl); };
+  const handleRedirectCourseHome = () => { window.location.assign(`${getConfig().STUDIO_BASE_URL}/course/${courseId}`); };
+  return (
+    <ModalNotification
+      isOpen={isErrorModalOpen}
+      title={intl.formatMessage(messages.errorTitle)}
+      message={
+        intl.formatMessage(
+          unitErrorUrl
+            ? messages.errorDescriptionUnit
+            : messages.errorDescriptionNotUnit,
+          { errorMessage },
+        )
+      }
+      cancelButtonText={
+        intl.formatMessage(unitErrorUrl ? messages.errorCancelButtonUnit : messages.errorCancelButtonNotUnit)
+      }
+      actionButtonText={
+        intl.formatMessage(unitErrorUrl ? messages.errorActionButtonUnit : messages.errorActionButtonNotUnit)
+      }
+      handleCancel={() => dispatch(updateIsErrorModalOpen(false))}
+      handleAction={unitErrorUrl ? handleUnitRedirect : handleRedirectCourseHome}
+      variant="danger"
+      icon={ErrorIcon}
+    />
+  );
+};
+
+ExportModalError.propTypes = {
+  intl: intlShape.isRequired,
+  courseId: PropTypes.string.isRequired,
+};
+
+ExportModalError.defaultProps = {};
+
+export default injectIntl(ExportModalError);
diff --git a/src/export-page/export-modal-error/messages.js b/src/export-page/export-modal-error/messages.js
new file mode 100644
index 0000000000..b691db3ebc
--- /dev/null
+++ b/src/export-page/export-modal-error/messages.js
@@ -0,0 +1,34 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  errorTitle: {
+    id: 'course-authoring.export.modal.error.title',
+    defaultMessage: 'There has been an error while exporting.',
+  },
+  errorDescriptionNotUnit: {
+    id: 'course-authoring.export.modal.error.description.not.unit',
+    defaultMessage: 'Your course could not be exported to XML. There is not enough information to identify the failed component. Inspect your course to identify any problematic components and try again. The raw error message is: {errorMessage}',
+  },
+  errorDescriptionUnit: {
+    id: 'course-authoring.export.modal.error.description.unit',
+    defaultMessage: 'There has been a failure to export to XML at least one component. It is recommended that you go to the edit page and repair the error before attempting another export. Please check that all components on the page are valid and do not display any error messages. The raw error message is: {errorMessage}',
+  },
+  errorCancelButtonUnit: {
+    id: 'course-authoring.export.modal.error.button.cancel.unit',
+    defaultMessage: 'Return to export',
+  },
+  errorCancelButtonNotUnit: {
+    id: 'course-authoring.export.modal.error.button.cancel.not.unit',
+    defaultMessage: 'Cancel',
+  },
+  errorActionButtonNotUnit: {
+    id: 'course-authoring.export.modal.error.button.action.not.unit',
+    defaultMessage: 'Take me to the main course page',
+  },
+  errorActionButtonUnit: {
+    id: 'course-authoring.export.modal.error.button.action.unit',
+    defaultMessage: 'Correct failed component',
+  },
+});
+
+export default messages;
diff --git a/src/export-page/export-sidebar/ExportSidebar.jsx b/src/export-page/export-sidebar/ExportSidebar.jsx
new file mode 100644
index 0000000000..c8684a577a
--- /dev/null
+++ b/src/export-page/export-sidebar/ExportSidebar.jsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import {
+  injectIntl,
+  intlShape,
+} from '@edx/frontend-platform/i18n';
+import PropTypes from 'prop-types';
+import { Hyperlink } from '@openedx/paragon';
+import { getConfig } from '@edx/frontend-platform';
+
+import { HelpSidebar } from '../../generic/help-sidebar';
+import { useHelpUrls } from '../../help-urls/hooks';
+import messages from './messages';
+
+const ExportSidebar = ({ intl, courseId }) => {
+  const { exportCourse: exportLearnMoreUrl } = useHelpUrls(['exportCourse']);
+  return (
+    <HelpSidebar courseId={courseId}>
+      <h4 className="help-sidebar-about-title">{intl.formatMessage(messages.title1)}</h4>
+      <p className="help-sidebar-about-descriptions">{intl.formatMessage(messages.description1, { studioShortName: getConfig().STUDIO_SHORT_NAME })}</p>
+      <hr />
+      <h4 className="help-sidebar-about-title">{intl.formatMessage(messages.exportedContent)}</h4>
+      <p className="help-sidebar-about-descriptions">{intl.formatMessage(messages.exportedContentHeading)}</p>
+      <ul className="px-3">
+        <li className="help-sidebar-about-descriptions">{intl.formatMessage(messages.content1)}</li>
+        <li className="help-sidebar-about-descriptions">{intl.formatMessage(messages.content2)}</li>
+        <li className="help-sidebar-about-descriptions">{intl.formatMessage(messages.content3)}</li>
+        <li className="help-sidebar-about-descriptions">{intl.formatMessage(messages.content4)}</li>
+        <li className="help-sidebar-about-descriptions">{intl.formatMessage(messages.content5)}</li>
+      </ul>
+      <p className="help-sidebar-about-descriptions">{intl.formatMessage(messages.notExportedContent)}</p>
+      <ul className="px-3">
+        <li className="help-sidebar-about-descriptions">{intl.formatMessage(messages.content6)}</li>
+        <li className="help-sidebar-about-descriptions">{intl.formatMessage(messages.content7)}</li>
+      </ul>
+      <hr />
+      <h4 className="help-sidebar-about-title">{intl.formatMessage(messages.openDownloadFile)}</h4>
+      <p className="help-sidebar-about-descriptions">{intl.formatMessage(messages.openDownloadFileDescription)}</p>
+      <hr />
+      <Hyperlink className="small" href={exportLearnMoreUrl} target="_blank" variant="outline-primary">{intl.formatMessage(messages.learnMoreButtonTitle)}</Hyperlink>
+    </HelpSidebar>
+  );
+};
+
+ExportSidebar.propTypes = {
+  intl: intlShape.isRequired,
+  courseId: PropTypes.string.isRequired,
+};
+
+export default injectIntl(ExportSidebar);
diff --git a/src/export-page/export-sidebar/ExportSidebar.test.jsx b/src/export-page/export-sidebar/ExportSidebar.test.jsx
new file mode 100644
index 0000000000..d770f4b156
--- /dev/null
+++ b/src/export-page/export-sidebar/ExportSidebar.test.jsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { initializeMockApp } from '@edx/frontend-platform';
+import { AppProvider } from '@edx/frontend-platform/react';
+
+import initializeStore from '../../store';
+import messages from './messages';
+import ExportSidebar from './ExportSidebar';
+
+const courseId = 'course-123';
+let store;
+
+const RootWrapper = () => (
+  <AppProvider store={store}>
+    <IntlProvider locale="en" messages={{}}>
+      <ExportSidebar intl={{ formatMessage: jest.fn() }} courseId={courseId} />
+    </IntlProvider>
+  </AppProvider>
+);
+
+describe('<ExportSidebar />', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+    store = initializeStore();
+  });
+  it('render sidebar correctly', () => {
+    const { getByText } = render(<RootWrapper />);
+    expect(getByText(messages.title1.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.exportedContentHeading.defaultMessage)).toBeInTheDocument();
+  });
+});
diff --git a/src/export-page/export-sidebar/messages.js b/src/export-page/export-sidebar/messages.js
new file mode 100644
index 0000000000..0917cd866e
--- /dev/null
+++ b/src/export-page/export-sidebar/messages.js
@@ -0,0 +1,66 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  title1: {
+    id: 'course-authoring.export.sidebar.title1',
+    defaultMessage: 'Why export a course?',
+  },
+  description1: {
+    id: 'course-authoring.export.sidebar.description1',
+    defaultMessage: 'You may want to edit the XML in your course directly, outside of {studioShortName}. You may want to create a backup copy of your course. Or, you may want to create a copy of your course that you can later import into another course instance and customize.',
+  },
+  exportedContent: {
+    id: 'course-authoring.export.sidebar.exportedContent',
+    defaultMessage: 'What content is exported?',
+  },
+  exportedContentHeading: {
+    id: 'course-authoring.export.sidebar.exportedContentHeading',
+    defaultMessage: 'The following content is exported.',
+  },
+  content1: {
+    id: 'course-authoring.export.sidebar.content1',
+    defaultMessage: 'Course content and structure',
+  },
+  content2: {
+    id: 'course-authoring.export.sidebar.content2',
+    defaultMessage: 'Course dates',
+  },
+  content3: {
+    id: 'course-authoring.export.sidebar.content3',
+    defaultMessage: 'Grading policy',
+  },
+  content4: {
+    id: 'course-authoring.export.sidebar.content4',
+    defaultMessage: 'Any group configurations',
+  },
+  content5: {
+    id: 'course-authoring.export.sidebar.content5',
+    defaultMessage: 'Settings on the Advanced settings page, including MATLAB API keys and LTI passports',
+  },
+  notExportedContent: {
+    id: 'course-authoring.export.sidebar.notExportedContent',
+    defaultMessage: 'The following content is not exported.',
+  },
+  content6: {
+    id: 'course-authoring.export.sidebar.content6',
+    defaultMessage: 'Learner-specific content, such as learner grades and discussion forum data',
+  },
+  content7: {
+    id: 'course-authoring.export.sidebar.content7',
+    defaultMessage: 'The course team',
+  },
+  openDownloadFile: {
+    id: 'course-authoring.export.sidebar.openDownloadFile',
+    defaultMessage: 'Opening the downloaded file',
+  },
+  openDownloadFileDescription: {
+    id: 'course-authoring.export.sidebar.openDownloadFileDescription',
+    defaultMessage: 'Use an archive program to extract the data from the .tar.gz file. Extracted data includes the course.xml file, as well as subfolders that contain course content.',
+  },
+  learnMoreButtonTitle: {
+    id: 'course-authoring.export.sidebar.learnMoreButtonTitle',
+    defaultMessage: 'Learn more about exporting a course',
+  },
+});
+
+export default messages;
diff --git a/src/export-page/export-stepper/ExportStepper.jsx b/src/export-page/export-stepper/ExportStepper.jsx
new file mode 100644
index 0000000000..457a1e5600
--- /dev/null
+++ b/src/export-page/export-stepper/ExportStepper.jsx
@@ -0,0 +1,103 @@
+import React, { useEffect } from 'react';
+import {
+  FormattedDate,
+  injectIntl,
+  intlShape,
+} from '@edx/frontend-platform/i18n';
+import PropTypes from 'prop-types';
+import { useDispatch, useSelector } from 'react-redux';
+import { Button } from '@openedx/paragon';
+
+import CourseStepper from '../../generic/course-stepper';
+import {
+  getCurrentStage, getDownloadPath, getError, getLoadingStatus, getSuccessDate,
+} from '../data/selectors';
+import { fetchExportStatus } from '../data/thunks';
+import { EXPORT_STAGES } from '../data/constants';
+import { RequestStatus } from '../../data/constants';
+import messages from './messages';
+
+const ExportStepper = ({ intl, courseId }) => {
+  const currentStage = useSelector(getCurrentStage);
+  const downloadPath = useSelector(getDownloadPath);
+  const successDate = useSelector(getSuccessDate);
+  const loadingStatus = useSelector(getLoadingStatus);
+  const { msg: errorMessage } = useSelector(getError);
+  const dispatch = useDispatch();
+  const isStopFetching = currentStage === EXPORT_STAGES.SUCCESS
+    || loadingStatus === RequestStatus.FAILED
+    || errorMessage;
+
+  useEffect(() => {
+    const id = setInterval(() => {
+      if (isStopFetching) {
+        clearInterval(id);
+      } else {
+        dispatch(fetchExportStatus(courseId));
+      }
+    }, 3000);
+    return () => clearInterval(id);
+  });
+
+  let successTitle = intl.formatMessage(messages.stepperSuccessTitle);
+  const localizedSuccessDate = successDate ? (
+    <FormattedDate
+      value={successDate}
+      year="2-digit"
+      month="2-digit"
+      day="2-digit"
+      hour="numeric"
+      minute="numeric"
+    />
+  ) : null;
+
+  if (localizedSuccessDate && currentStage === EXPORT_STAGES.SUCCESS) {
+    const successWithDate = (
+      <>
+        {successTitle} ({localizedSuccessDate})
+      </>
+    );
+    successTitle = successWithDate;
+  }
+
+  const steps = [
+    {
+      title: intl.formatMessage(messages.stepperPreparingTitle),
+      description: intl.formatMessage(messages.stepperPreparingDescription),
+      key: EXPORT_STAGES.PREPARING,
+    }, {
+      title: intl.formatMessage(messages.stepperExportingTitle),
+      description: intl.formatMessage(messages.stepperExportingDescription),
+      key: EXPORT_STAGES.EXPORTING,
+    }, {
+      title: intl.formatMessage(messages.stepperCompressingTitle),
+      description: intl.formatMessage(messages.stepperCompressingDescription),
+      key: EXPORT_STAGES.COMPRESSING,
+    }, {
+      title: successTitle,
+      description: intl.formatMessage(messages.stepperSuccessDescription),
+      key: EXPORT_STAGES.SUCCESS,
+    },
+  ];
+
+  return (
+    <div>
+      <h3 className="mt-4">{intl.formatMessage(messages.stepperHeaderTitle)}</h3>
+      <CourseStepper
+        courseId={courseId}
+        steps={steps}
+        activeKey={currentStage}
+        errorMessage={errorMessage}
+        hasError={!!errorMessage}
+      />
+      {downloadPath && currentStage === EXPORT_STAGES.SUCCESS && <Button className="ml-5.5 mt-n2.5" href={downloadPath} download>{intl.formatMessage(messages.downloadCourseButtonTitle)}</Button>}
+    </div>
+  );
+};
+
+ExportStepper.propTypes = {
+  intl: intlShape.isRequired,
+  courseId: PropTypes.string.isRequired,
+};
+
+export default injectIntl(ExportStepper);
diff --git a/src/export-page/export-stepper/ExportStepper.test.jsx b/src/export-page/export-stepper/ExportStepper.test.jsx
new file mode 100644
index 0000000000..c8ca1e4855
--- /dev/null
+++ b/src/export-page/export-stepper/ExportStepper.test.jsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { initializeMockApp } from '@edx/frontend-platform';
+import { AppProvider } from '@edx/frontend-platform/react';
+
+import initializeStore from '../../store';
+import messages from './messages';
+import ExportStepper from './ExportStepper';
+
+const courseId = 'course-123';
+let store;
+
+const RootWrapper = () => (
+  <AppProvider store={store}>
+    <IntlProvider locale="en" messages={{}}>
+      <ExportStepper intl={{ formatMessage: jest.fn() }} courseId={courseId} />
+    </IntlProvider>
+  </AppProvider>
+);
+
+describe('<ExportStepper />', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+    store = initializeStore();
+  });
+  it('render stepper correctly', () => {
+    const { getByText } = render(<RootWrapper />);
+    expect(getByText(messages.stepperHeaderTitle.defaultMessage)).toBeInTheDocument();
+  });
+});
diff --git a/src/export-page/export-stepper/messages.js b/src/export-page/export-stepper/messages.js
new file mode 100644
index 0000000000..e0f4adfa1b
--- /dev/null
+++ b/src/export-page/export-stepper/messages.js
@@ -0,0 +1,46 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  stepperPreparingTitle: {
+    id: 'course-authoring.export.stepper.title.preparing',
+    defaultMessage: 'Preparing',
+  },
+  stepperExportingTitle: {
+    id: 'course-authoring.export.stepper.title.exporting',
+    defaultMessage: 'Exporting',
+  },
+  stepperCompressingTitle: {
+    id: 'course-authoring.export.stepper.title.compressing',
+    defaultMessage: 'Compressing',
+  },
+  stepperSuccessTitle: {
+    id: 'course-authoring.export.stepper.title.success',
+    defaultMessage: 'Success',
+  },
+  stepperPreparingDescription: {
+    id: 'course-authoring.export.stepper.description.preparing',
+    defaultMessage: 'Preparing to start the export',
+  },
+  stepperExportingDescription: {
+    id: 'course-authoring.export.stepper.description.exporting',
+    defaultMessage: 'Creating the export data files (You can now leave this page safely, but avoid making drastic changes to content until this export is complete)',
+  },
+  stepperCompressingDescription: {
+    id: 'course-authoring.export.stepper.description.compressing',
+    defaultMessage: 'Compressing the exported data and preparing it for download',
+  },
+  stepperSuccessDescription: {
+    id: 'course-authoring.export.stepper.description.success',
+    defaultMessage: 'Your exported course can now be downloaded',
+  },
+  downloadCourseButtonTitle: {
+    id: 'course-authoring.export.stepper.download.button.title',
+    defaultMessage: 'Download exported course',
+  },
+  stepperHeaderTitle: {
+    id: 'course-authoring.export.stepper.header.title',
+    defaultMessage: 'Course export status',
+  },
+});
+
+export default messages;
diff --git a/src/export-page/messages.js b/src/export-page/messages.js
new file mode 100644
index 0000000000..2c8a44a8b2
--- /dev/null
+++ b/src/export-page/messages.js
@@ -0,0 +1,34 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  pageTitle: {
+    id: 'course-authoring.export.page.title',
+    defaultMessage: '{headingTitle} | {courseName} | {siteName}',
+  },
+  headingTitle: {
+    id: 'course-authoring.export.heading.title',
+    defaultMessage: 'Course export',
+  },
+  headingSubtitle: {
+    id: 'course-authoring.export.heading.subtitle',
+    defaultMessage: 'Tools',
+  },
+  description1: {
+    id: 'course-authoring.export.description1',
+    defaultMessage: 'You can export courses and edit them outside of {studioShortName}. The exported file is a .tar.gz file (that is, a .tar file compressed with GNU Zip) that contains the course structure and content. You can also re-import courses that you\'ve exported.',
+  },
+  description2: {
+    id: 'course-authoring.export.description2',
+    defaultMessage: 'Caution: When you export a course, information such as MATLAB API keys, LTI passports, annotation secret token strings, and annotation storage URLs are included in the exported data. If you share your exported files, you may also be sharing sensitive or license-specific information.',
+  },
+  titleUnderButton: {
+    id: 'course-authoring.export.title-under-button',
+    defaultMessage: 'Export my course content',
+  },
+  buttonTitle: {
+    id: 'course-authoring.export.button.title',
+    defaultMessage: 'Export course content',
+  },
+});
+
+export default messages;
diff --git a/src/export-page/utils.js b/src/export-page/utils.js
new file mode 100644
index 0000000000..9f24b743b7
--- /dev/null
+++ b/src/export-page/utils.js
@@ -0,0 +1,29 @@
+import Cookies from 'universal-cookie';
+import moment from 'moment';
+
+import { TIME_FORMAT } from '../constants';
+import { LAST_EXPORT_COOKIE_NAME, SUCCESS_DATE_FORMAT } from './data/constants';
+
+/**
+ * Sets an export-related cookie with the provided information.
+ *
+ * @param {Date} date - Date of export.
+ * @param {boolean} completed - Indicates if export was completed successfully.
+ * @returns {void}
+ */
+export const setExportCookie = (date, completed) => {
+  const cookies = new Cookies();
+  cookies.set(LAST_EXPORT_COOKIE_NAME, { date, completed }, { path: window.location.pathname });
+};
+
+/**
+ * Formats a Unix timestamp as a formatted success date string.
+ *
+ * @param {number} unixDate - Unix timestamp to be formatted.
+ * @returns {string|null} Formatted success date string, including date and time in UTC, or null if the input is falsy.
+ */
+export const getFormattedSuccessDate = (unixDate) => {
+  const formattedDate = moment(unixDate).utc().format(SUCCESS_DATE_FORMAT);
+  const formattedTime = moment(unixDate).utc().format(TIME_FORMAT);
+  return unixDate ? ` (${formattedDate} at ${formattedTime} UTC)` : null;
+};
diff --git a/src/export-page/utils.test.js b/src/export-page/utils.test.js
new file mode 100644
index 0000000000..276f76ce47
--- /dev/null
+++ b/src/export-page/utils.test.js
@@ -0,0 +1,51 @@
+import Cookies from 'universal-cookie';
+import moment from 'moment';
+
+import { LAST_EXPORT_COOKIE_NAME } from './data/constants';
+import { setExportCookie, getFormattedSuccessDate } from './utils';
+
+global.window = Object.create(window);
+Object.defineProperty(window, 'location', {
+  value: {
+    pathname: '/some-path',
+  },
+});
+
+describe('setExportCookie', () => {
+  it('should set the export cookie with the provided date and completed status', () => {
+    const cookiesSetMock = jest.spyOn(Cookies.prototype, 'set');
+    const date = '2023-07-24';
+    const completed = true;
+    setExportCookie(date, completed);
+
+    expect(cookiesSetMock).toHaveBeenCalledWith(
+      LAST_EXPORT_COOKIE_NAME,
+      { date, completed },
+      { path: '/some-path' },
+    );
+
+    cookiesSetMock.mockRestore();
+  });
+});
+
+describe('getFormattedSuccessDate', () => {
+  it('should return formatted success date with valid input', () => {
+    const mockCurrentUtcDate = moment.utc('2023-07-24T12:34:56');
+    const momentMock = jest.spyOn(moment, 'utc').mockReturnValue(mockCurrentUtcDate);
+
+    const unixDate = 1679787000;
+
+    const expectedFormattedDate = ' (01/20/1970 at 10:36 UTC)';
+
+    const result = getFormattedSuccessDate(unixDate);
+    expect(result).toBe(expectedFormattedDate);
+
+    momentMock.mockRestore();
+  });
+
+  it('should return null with null input', () => {
+    const unixDate = null;
+    const result = getFormattedSuccessDate(unixDate);
+    expect(result).toBeNull();
+  });
+});
diff --git a/src/files-and-videos/files-page/FileInfoModalSidebar.jsx b/src/files-and-videos/files-page/FileInfoModalSidebar.jsx
new file mode 100644
index 0000000000..ce2db6c628
--- /dev/null
+++ b/src/files-and-videos/files-page/FileInfoModalSidebar.jsx
@@ -0,0 +1,130 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+
+import {
+  injectIntl,
+  FormattedMessage,
+  FormattedDate,
+  intlShape,
+} from '@edx/frontend-platform/i18n';
+import {
+  Stack,
+  IconButton,
+  ActionRow,
+  Icon,
+  Truncate,
+  IconButtonWithTooltip,
+  CheckboxControl,
+} from '@openedx/paragon';
+import { ContentCopy, InfoOutline } from '@openedx/paragon/icons';
+
+import { getFileSizeToClosestByte } from '../../utils';
+import messages from './messages';
+
+const FileInfoModalSidebar = ({
+  asset,
+  handleLockedAsset,
+  // injected
+  intl,
+}) => {
+  const [lockedState, setLockedState] = useState(asset?.locked);
+  const handleLock = (e) => {
+    const locked = e.target.checked;
+    setLockedState(locked);
+    handleLockedAsset(asset?.id, locked);
+  };
+  const fileSize = getFileSizeToClosestByte(asset?.fileSize);
+
+  return (
+    <Stack>
+      <div className="font-weight-bold">
+        <FormattedMessage {...messages.dateAddedTitle} />
+      </div>
+      <FormattedDate
+        value={asset?.dateAdded}
+        year="numeric"
+        month="short"
+        day="2-digit"
+        hour="numeric"
+        minute="numeric"
+      />
+      <div className="font-weight-bold mt-3">
+        <FormattedMessage {...messages.fileSizeTitle} />
+      </div>
+      {fileSize}
+      <div className="font-weight-bold border-top mt-3 pt-3">
+        <FormattedMessage {...messages.studioUrlTitle} />
+      </div>
+      <ActionRow>
+        <div style={{ wordBreak: 'break-word' }}>
+          <Truncate lines={1}>
+            {asset?.portableUrl}
+          </Truncate>
+        </div>
+        <ActionRow.Spacer />
+        <IconButton
+          src={ContentCopy}
+          iconAs={Icon}
+          alt={messages.copyStudioUrlTitle.defaultMessage}
+          onClick={() => navigator.clipboard.writeText(asset?.portableUrl)}
+        />
+      </ActionRow>
+      <div className="font-weight-bold mt-3">
+        <FormattedMessage {...messages.webUrlTitle} />
+      </div>
+      <ActionRow>
+        <div style={{ wordBreak: 'break-word' }}>
+          <Truncate lines={1}>
+            {asset?.externalUrl}
+          </Truncate>
+        </div>
+        <ActionRow.Spacer />
+        <IconButton
+          src={ContentCopy}
+          iconAs={Icon}
+          alt={messages.copyWebUrlTitle.defaultMessage}
+          onClick={() => navigator.clipboard.writeText(asset?.externalUrl)}
+        />
+      </ActionRow>
+      <ActionRow className=" border-top mt-3 pt-3">
+        <div className="font-weight-bold">
+          <FormattedMessage {...messages.lockFileTitle} />
+        </div>
+        <IconButtonWithTooltip
+          key="lock-file-info"
+          tooltipPlacement="top"
+          tooltipContent={intl.formatMessage(messages.lockFileTooltipContent)}
+          src={InfoOutline}
+          iconAs={Icon}
+          alt="Info"
+          size="inline"
+        />
+        <ActionRow.Spacer />
+        <CheckboxControl
+          checked={lockedState}
+          onChange={handleLock}
+          aria-label="Checkbox"
+        />
+      </ActionRow>
+    </Stack>
+  );
+};
+FileInfoModalSidebar.propTypes = {
+  asset: PropTypes.shape({
+    displayName: PropTypes.string.isRequired,
+    wrapperType: PropTypes.string.isRequired,
+    locked: PropTypes.bool.isRequired,
+    externalUrl: PropTypes.string.isRequired,
+    thumbnail: PropTypes.string,
+    id: PropTypes.string.isRequired,
+    portableUrl: PropTypes.string.isRequired,
+    dateAdded: PropTypes.string.isRequired,
+    fileSize: PropTypes.number.isRequired,
+    usageLocations: PropTypes.arrayOf(PropTypes.string),
+  }).isRequired,
+  handleLockedAsset: PropTypes.func.isRequired,
+  // injected
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(FileInfoModalSidebar);
diff --git a/src/files-and-videos/files-page/FileThumbnail.jsx b/src/files-and-videos/files-page/FileThumbnail.jsx
new file mode 100644
index 0000000000..ace3045307
--- /dev/null
+++ b/src/files-and-videos/files-page/FileThumbnail.jsx
@@ -0,0 +1,72 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import {
+  Icon,
+  Image,
+} from '@openedx/paragon';
+import { getSrc } from './data/utils';
+import messages from './messages';
+
+const FileThumbnail = ({
+  thumbnail,
+  wrapperType,
+  externalUrl,
+  displayName,
+  imageSize,
+  // injected
+  intl,
+}) => {
+  const src = getSrc({
+    thumbnail,
+    externalUrl,
+    wrapperType,
+  });
+  const { width, height } = imageSize;
+
+  return (
+    <div className="row justify-content-center align-itmes-center">
+      {thumbnail ? (
+        <Image
+          style={{
+            width,
+            height,
+            objectFit: 'contain',
+            maxWidth: '100%',
+            maxHeight: '100%',
+          }}
+          className="border rounded p-1"
+          src={src}
+          alt={intl.formatMessage(messages.thumbnailAltMessage, { displayName })}
+        />
+      ) : (
+        <div
+          className="row justify-content-center align-items-center m-0 border rounded"
+          style={imageSize}
+        >
+          <Icon src={src} style={{ height: '48px', width: '48px' }} />
+        </div>
+      )}
+    </div>
+  );
+};
+FileThumbnail.defaultProps = {
+  thumbnail: null,
+  wrapperType: null,
+  externalUrl: null,
+  displayName: null,
+};
+FileThumbnail.propTypes = {
+  thumbnail: PropTypes.string,
+  wrapperType: PropTypes.string,
+  externalUrl: PropTypes.string,
+  displayName: PropTypes.string,
+  imageSize: PropTypes.shape({
+    width: PropTypes.string,
+    height: PropTypes.string.isRequired,
+  }).isRequired,
+  // injected
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(FileThumbnail);
diff --git a/src/files-and-videos/files-page/FileValidationModal.jsx b/src/files-and-videos/files-page/FileValidationModal.jsx
new file mode 100644
index 0000000000..1e1a310b39
--- /dev/null
+++ b/src/files-and-videos/files-page/FileValidationModal.jsx
@@ -0,0 +1,68 @@
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { useSelector } from 'react-redux';
+import { injectIntl, FormattedMessage, intlShape } from '@edx/frontend-platform/i18n';
+import {
+  ActionRow,
+  Button,
+  ModalDialog,
+  useToggle,
+} from '@openedx/paragon';
+import { isEmpty } from 'lodash';
+
+import messages from './messages';
+
+const FileValidationModal = ({
+  handleFileOverwrite,
+  // injected
+  intl,
+}) => {
+  const [isOpen, open, close] = useToggle();
+
+  const { duplicateFiles } = useSelector(state => state.assets);
+
+  useEffect(() => {
+    if (!isEmpty(duplicateFiles)) {
+      open();
+    }
+  }, [duplicateFiles]);
+
+  return (
+    <ModalDialog
+      title={intl.formatMessage(messages.overwriteModalTitle)}
+      isOpen={isOpen}
+      onClose={close}
+      isOverflowVisible={false}
+    >
+      <ModalDialog.Header>
+        <ModalDialog.Title>
+          <FormattedMessage {...messages.overwriteModalTitle} />
+        </ModalDialog.Title>
+      </ModalDialog.Header>
+      <ModalDialog.Body>
+        <FormattedMessage {...messages.overwriteConfirmMessage} />
+        <ul className="mt-2">
+          {Object.keys(duplicateFiles).map(file => <li>{file}</li>)}
+        </ul>
+      </ModalDialog.Body>
+      <ModalDialog.Footer>
+        <ActionRow>
+          <ModalDialog.CloseButton variant="tertiary">
+            <FormattedMessage {...messages.cancelOverwriteButtonLabel} />
+          </ModalDialog.CloseButton>
+          <Button onClick={() => handleFileOverwrite(close, duplicateFiles)}>
+            <FormattedMessage {...messages.confirmOverwriteButtonLabel} />
+          </Button>
+        </ActionRow>
+      </ModalDialog.Footer>
+    </ModalDialog>
+  );
+};
+
+FileValidationModal.propTypes = {
+  handleFileOverwrite: PropTypes.func.isRequired,
+  // injected
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(FileValidationModal);
diff --git a/src/files-and-videos/files-page/FilesPage.jsx b/src/files-and-videos/files-page/FilesPage.jsx
new file mode 100644
index 0000000000..be100bd55b
--- /dev/null
+++ b/src/files-and-videos/files-page/FilesPage.jsx
@@ -0,0 +1,228 @@
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { useDispatch, useSelector } from 'react-redux';
+import { injectIntl, FormattedMessage, intlShape } from '@edx/frontend-platform/i18n';
+import { CheckboxFilter, Container } from '@openedx/paragon';
+import Placeholder from '../../editors/Placeholder';
+
+import { RequestStatus } from '../../data/constants';
+import { useModels, useModel } from '../../generic/model-store';
+import {
+  addAssetFile,
+  deleteAssetFile,
+  fetchAssets,
+  updateAssetLock,
+  fetchAssetDownload,
+  getUsagePaths,
+  resetErrors,
+  updateAssetOrder,
+  validateAssetFiles,
+} from './data/thunks';
+import messages from './messages';
+import FilesPageProvider from './FilesPageProvider';
+import getPageHeadTitle from '../../generic/utils';
+import {
+  AccessColumn,
+  ActiveColumn,
+  EditFileErrors,
+  FileTable,
+  ThumbnailColumn,
+} from '../generic';
+import { getFileSizeToClosestByte } from '../../utils';
+import FileThumbnail from './FileThumbnail';
+import FileInfoModalSidebar from './FileInfoModalSidebar';
+import FileValidationModal from './FileValidationModal';
+
+const FilesPage = ({
+  courseId,
+  // injected
+  intl,
+}) => {
+  const dispatch = useDispatch();
+  const courseDetails = useModel('courseDetails', courseId);
+  document.title = getPageHeadTitle(courseDetails?.name, intl.formatMessage(messages.heading));
+
+  useEffect(() => {
+    dispatch(fetchAssets(courseId));
+  }, [courseId]);
+
+  const {
+    assetIds,
+    loadingStatus,
+    addingStatus: addAssetStatus,
+    deletingStatus: deleteAssetStatus,
+    updatingStatus: updateAssetStatus,
+    usageStatus: usagePathStatus,
+    errors: errorMessages,
+  } = useSelector(state => state.assets);
+
+  const handleErrorReset = (error) => dispatch(resetErrors(error));
+  const handleDeleteFile = (id) => dispatch(deleteAssetFile(courseId, id));
+  const handleDownloadFile = (selectedRows) => dispatch(fetchAssetDownload({ selectedRows, courseId }));
+  const handleAddFile = (files) => {
+    handleErrorReset({ errorType: 'add' });
+    dispatch(validateAssetFiles(courseId, files));
+  };
+  const handleFileOverwrite = (close, files) => {
+    Object.values(files).forEach(file => dispatch(addAssetFile(courseId, file, true)));
+    close();
+  };
+  const handleLockFile = (fileId, locked) => {
+    handleErrorReset({ errorType: 'lock' });
+    dispatch(updateAssetLock({ courseId, assetId: fileId, locked }));
+  };
+  const handleUsagePaths = (asset) => dispatch(getUsagePaths({ asset, courseId }));
+  const handleFileOrder = ({ newFileIdOrder, sortType }) => {
+    dispatch(updateAssetOrder(courseId, newFileIdOrder, sortType));
+  };
+
+  const thumbnailPreview = (props) => FileThumbnail(props);
+  const infoModalSidebar = (asset) => FileInfoModalSidebar({
+    asset,
+    handleLockedAsset: handleLockFile,
+  });
+
+  const assets = useModels('assets', assetIds);
+  const data = {
+    fileIds: assetIds,
+    loadingStatus,
+    usagePathStatus,
+    usageErrorMessages: errorMessages.usageMetrics,
+    fileType: 'file',
+  };
+  const maxFileSize = 20 * 1048576;
+
+  const activeColumn = {
+    id: 'activeStatus',
+    Header: 'Active',
+    accessor: 'activeStatus',
+    Cell: ({ row }) => ActiveColumn({ row, pageLoadStatus: loadingStatus }),
+    Filter: CheckboxFilter,
+    filter: 'exactTextCase',
+    filterChoices: [
+      { name: intl.formatMessage(messages.activeCheckboxLabel), value: 'active' },
+      { name: intl.formatMessage(messages.inactiveCheckboxLabel), value: 'inactive' },
+    ],
+  };
+  const accessColumn = {
+    id: 'lockStatus',
+    Header: 'Access',
+    accessor: 'lockStatus',
+    Cell: ({ row }) => AccessColumn({ row }),
+    Filter: CheckboxFilter,
+    filterChoices: [
+      { name: intl.formatMessage(messages.lockedCheckboxLabel), value: 'locked' },
+      { name: intl.formatMessage(messages.publicCheckboxLabel), value: 'public' },
+    ],
+  };
+  const thumbnailColumn = {
+    id: 'thumbnail',
+    Header: '',
+    Cell: ({ row }) => ThumbnailColumn({ row, thumbnailPreview }),
+  };
+  const fileSizeColumn = {
+    id: 'fileSize',
+    Header: 'File size',
+    accessor: 'fileSize',
+    Cell: ({ row }) => {
+      const { fileSize } = row.original;
+      return getFileSizeToClosestByte(fileSize);
+    },
+  };
+
+  const tableColumns = [
+    { ...thumbnailColumn },
+    {
+      Header: 'File name',
+      accessor: 'displayName',
+    },
+    { ...fileSizeColumn },
+    {
+      Header: 'Type',
+      accessor: 'wrapperType',
+      Filter: CheckboxFilter,
+      filter: 'includesValue',
+      filterChoices: [
+        {
+          name: intl.formatMessage(messages.codeCheckboxLabel),
+          value: 'code',
+        },
+        {
+          name: intl.formatMessage(messages.imageCheckboxLabel),
+          value: 'image',
+        },
+        {
+          name: intl.formatMessage(messages.documentCheckboxLabel),
+          value: 'document',
+        },
+        {
+          name: intl.formatMessage(messages.audioCheckboxLabel),
+          value: 'audio',
+        },
+        {
+          name: intl.formatMessage(messages.otherCheckboxLabel),
+          value: 'other',
+        },
+      ],
+    },
+    { ...activeColumn },
+    { ...accessColumn },
+  ];
+
+  if (loadingStatus === RequestStatus.DENIED) {
+    return (
+      <div data-testid="under-construction-placeholder" className="row justify-contnt-center m-6">
+        <Placeholder />
+      </div>
+    );
+  }
+
+  return (
+    <FilesPageProvider courseId={courseId}>
+      <Container size="xl" className="p-4 pt-4.5">
+        <EditFileErrors
+          resetErrors={handleErrorReset}
+          errorMessages={errorMessages}
+          addFileStatus={addAssetStatus}
+          deleteFileStatus={deleteAssetStatus}
+          updateFileStatus={updateAssetStatus}
+          loadingStatus={loadingStatus}
+        />
+        <div className="h2">
+          <FormattedMessage {...messages.heading} />
+        </div>
+        {loadingStatus !== RequestStatus.FAILED && (
+          <>
+            <FileTable
+              {...{
+                courseId,
+                data,
+                handleAddFile,
+                handleDeleteFile,
+                handleDownloadFile,
+                handleLockFile,
+                handleUsagePaths,
+                handleErrorReset,
+                handleFileOrder,
+                tableColumns,
+                maxFileSize,
+                thumbnailPreview,
+                infoModalSidebar,
+                files: assets,
+              }}
+            />
+            <FileValidationModal {...{ handleFileOverwrite }} />
+          </>
+        )}
+      </Container>
+    </FilesPageProvider>
+  );
+};
+
+FilesPage.propTypes = {
+  courseId: PropTypes.string.isRequired,
+  // injected
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(FilesPage);
diff --git a/src/files-and-videos/files-page/FilesPage.test.jsx b/src/files-and-videos/files-page/FilesPage.test.jsx
new file mode 100644
index 0000000000..44f003f1e9
--- /dev/null
+++ b/src/files-and-videos/files-page/FilesPage.test.jsx
@@ -0,0 +1,687 @@
+import {
+  render,
+  fireEvent,
+  screen,
+  waitFor,
+  within,
+} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import ReactDOM from 'react-dom';
+import { saveAs } from 'file-saver';
+
+import { camelCaseObject, initializeMockApp } from '@edx/frontend-platform';
+import MockAdapter from 'axios-mock-adapter';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { AppProvider } from '@edx/frontend-platform/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import initializeStore from '../../store';
+import { executeThunk } from '../../utils';
+import { RequestStatus } from '../../data/constants';
+import FilesPage from './FilesPage';
+import {
+  generateFetchAssetApiResponse,
+  generateEmptyApiResponse,
+  generateNewAssetApiResponse,
+  getStatusValue,
+  courseId,
+  initialState,
+  generateNextPageResponse,
+} from './factories/mockApiResponses';
+
+import {
+  fetchAssets,
+  addAssetFile,
+  deleteAssetFile,
+  updateAssetLock,
+  getUsagePaths,
+  validateAssetFiles,
+} from './data/thunks';
+import { getAssetsUrl } from './data/api';
+import messages from '../generic/messages';
+import filesPageMessages from './messages';
+import { updateFileValues } from './data/utils';
+
+let axiosMock;
+let store;
+let file;
+ReactDOM.createPortal = jest.fn(node => node);
+jest.mock('file-saver');
+
+const renderComponent = () => {
+  render(
+    <IntlProvider locale="en">
+      <AppProvider store={store}>
+        <FilesPage courseId={courseId} />
+      </AppProvider>
+    </IntlProvider>,
+  );
+};
+
+const mockStore = async (
+  status,
+  skipNextPageFetch,
+) => {
+  const fetchAssetsUrl = `${getAssetsUrl(courseId)}?page=0`;
+  axiosMock.onGet(fetchAssetsUrl).reply(getStatusValue(status), generateFetchAssetApiResponse());
+  if (!skipNextPageFetch) {
+    const nextPageUrl = `${getAssetsUrl(courseId)}?page=1`;
+    axiosMock.onGet(nextPageUrl).reply(getStatusValue(status), generateNextPageResponse());
+  }
+  renderComponent();
+  await executeThunk(fetchAssets(courseId), store.dispatch);
+
+  // Finish loading the expected files into the data table before returning,
+  // because loading new files can disrupt things like accessing file menus.
+  if (status === RequestStatus.SUCCESSFUL) {
+    const numFiles = skipNextPageFetch ? 13 : 15;
+    await waitFor(() => {
+      expect(screen.getByText(`Showing ${numFiles} of ${numFiles}`)).toBeInTheDocument();
+    });
+  }
+};
+
+const emptyMockStore = async (status) => {
+  const fetchAssetsUrl = `${getAssetsUrl(courseId)}?page=0`;
+  axiosMock.onGet(fetchAssetsUrl).reply(getStatusValue(status), generateEmptyApiResponse());
+  renderComponent();
+  await executeThunk(fetchAssets(courseId), store.dispatch);
+};
+
+describe('FilesAndUploads', () => {
+  describe('empty state', () => {
+    beforeEach(async () => {
+      initializeMockApp({
+        authenticatedUser: {
+          userId: 3,
+          username: 'abc123',
+          administrator: false,
+          roles: [],
+        },
+      });
+      store = initializeStore({
+        ...initialState,
+        assets: {
+          ...initialState.assets,
+          assetIds: [],
+        },
+        models: {},
+      });
+      axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+      file = new File(['(⌐□_□)'], 'download.png', { type: 'image/png' });
+    });
+
+    it('should return placeholder component', async () => {
+      await mockStore(RequestStatus.DENIED);
+
+      expect(screen.getByTestId('under-construction-placeholder')).toBeVisible();
+    });
+
+    it('should have Files title', async () => {
+      await emptyMockStore(RequestStatus.SUCCESSFUL);
+
+      expect(screen.getByText('Files')).toBeVisible();
+    });
+
+    it('should render dropzone', async () => {
+      await emptyMockStore(RequestStatus.SUCCESSFUL);
+
+      expect(screen.getByTestId('files-dropzone')).toBeVisible();
+
+      expect(screen.queryByTestId('files-data-table')).toBeNull();
+    });
+
+    it('should upload a single file', async () => {
+      await emptyMockStore(RequestStatus.SUCCESSFUL);
+      const dropzone = screen.getByTestId('files-dropzone');
+      axiosMock.onGet(`${getAssetsUrl(courseId)}?display_name=download.png&page_size=1`).reply(200, { assets: [] });
+      axiosMock.onPost(getAssetsUrl(courseId)).reply(204, generateNewAssetApiResponse());
+      Object.defineProperty(dropzone, 'files', {
+        value: [file],
+      });
+      fireEvent.drop(dropzone);
+      await executeThunk(validateAssetFiles(courseId, [file]), store.dispatch);
+      const addStatus = store.getState().assets.addingStatus;
+      expect(addStatus).toEqual(RequestStatus.SUCCESSFUL);
+
+      expect(screen.queryByTestId('files-dropzone')).toBeNull();
+
+      expect(screen.getByTestId('files-data-table')).toBeVisible();
+    });
+  });
+
+  describe('valid assets', () => {
+    beforeEach(async () => {
+      initializeMockApp({
+        authenticatedUser: {
+          userId: 3,
+          username: 'abc123',
+          administrator: false,
+          roles: [],
+        },
+      });
+      store = initializeStore(initialState);
+      axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+      file = new File(['(⌐□_□)'], 'download.png', { type: 'image/png' });
+    });
+
+    afterEach(() => {
+      saveAs.mockClear();
+    });
+
+    describe('table view', () => {
+      it('should render table with gallery card', async () => {
+        await mockStore(RequestStatus.SUCCESSFUL);
+
+        expect(screen.getByTestId('files-data-table')).toBeVisible();
+
+        await waitFor(() => {
+          expect(screen.getAllByTestId('grid-card-mOckID1')[0]).toBeVisible();
+        });
+      });
+
+      it('should switch table to list view', async () => {
+        await mockStore(RequestStatus.SUCCESSFUL);
+        expect(screen.getByTestId('files-data-table')).toBeVisible();
+
+        await waitFor(() => {
+          expect(screen.getAllByTestId('grid-card-mOckID1')[0]).toBeVisible();
+        });
+
+        expect(screen.queryByRole('table')).toBeNull();
+
+        const listButton = screen.getByLabelText('List');
+        fireEvent.click(listButton);
+        expect(screen.queryByTestId('grid-card-mOckID1')).toBeNull();
+
+        expect(screen.getByRole('table')).toBeVisible();
+      });
+    });
+
+    describe('table actions', () => {
+      describe('upload a single file', () => {
+        it('should upload without duplication modal', async () => {
+          await mockStore(RequestStatus.SUCCESSFUL);
+          axiosMock.onGet(`${getAssetsUrl(courseId)}?display_name=download.png&page_size=1`).reply(200, { assets: [] });
+          axiosMock.onPost(getAssetsUrl(courseId)).reply(200, generateNewAssetApiResponse());
+          const addFilesButton = screen.getByLabelText('file-input');
+          userEvent.upload(addFilesButton, file);
+          await executeThunk(validateAssetFiles(courseId, [file]), store.dispatch);
+          await waitFor(() => {
+            const addStatus = store.getState().assets.addingStatus;
+            expect(addStatus).toEqual(RequestStatus.SUCCESSFUL);
+          });
+        });
+
+        it('should show duplicate file modal', async () => {
+          file = new File(['(⌐□_□)'], 'mOckID6', { type: 'image/png' });
+
+          await mockStore(RequestStatus.SUCCESSFUL);
+          axiosMock.onGet(
+            `${getAssetsUrl(courseId)}?display_name=mOckID6&page_size=1`,
+          ).reply(200, { assets: [{ display_name: 'mOckID6' }] });
+          const addFilesButton = screen.getByLabelText('file-input');
+          userEvent.upload(addFilesButton, file);
+          await executeThunk(validateAssetFiles(courseId, [file]), store.dispatch);
+          expect(screen.getByText(filesPageMessages.overwriteConfirmMessage.defaultMessage)).toBeVisible();
+        });
+
+        it('should overwrite duplicate file', async () => {
+          file = new File(['(⌐□_□)'], 'mOckID6', { type: 'image/png' });
+
+          await mockStore(RequestStatus.SUCCESSFUL);
+          axiosMock.onGet(
+            `${getAssetsUrl(courseId)}?display_name=mOckID6&page_size=1`,
+          ).reply(200, { assets: [{ display_name: 'mOckID6' }] });
+          const { asset: newDefaultAssetResponse } = generateNewAssetApiResponse();
+          const responseData = {
+            asset: {
+              ...newDefaultAssetResponse, id: 'mOckID6',
+            },
+          };
+
+          axiosMock.onPost(getAssetsUrl(courseId)).reply(200, responseData);
+          const addFilesButton = screen.getByLabelText('file-input');
+          userEvent.upload(addFilesButton, file);
+          await executeThunk(validateAssetFiles(courseId, [file]), store.dispatch);
+
+          const overwriteButton = screen.getByText(filesPageMessages.confirmOverwriteButtonLabel.defaultMessage);
+          fireEvent.click(overwriteButton);
+
+          expect(screen.queryByText(filesPageMessages.overwriteConfirmMessage.defaultMessage)).toBeNull();
+          await waitFor(() => {
+            const assetData = store.getState().models.assets.mOckID6;
+            const { asset: responseAssetData } = responseData;
+            const [defaultData] = updateFileValues([camelCaseObject(responseAssetData)]);
+
+            expect(assetData).toEqual(defaultData);
+          });
+        });
+
+        it('should keep original file', async () => {
+          file = new File(['(⌐□_□)'], 'mOckID6', { type: 'image/png' });
+
+          await mockStore(RequestStatus.SUCCESSFUL);
+          axiosMock.onGet(
+            `${getAssetsUrl(courseId)}?display_name=mOckID6&page_size=1`,
+          ).reply(200, { assets: [{ display_name: 'mOckID6' }] });
+          const addFilesButton = screen.getByLabelText('file-input');
+          userEvent.upload(addFilesButton, file);
+          await executeThunk(validateAssetFiles(courseId, [file]), store.dispatch);
+
+          const cancelButton = screen.getByText(filesPageMessages.cancelOverwriteButtonLabel.defaultMessage);
+          fireEvent.click(cancelButton);
+
+          const assetData = store.getState().models.assets.mOckID6;
+          const defaultAssets = generateFetchAssetApiResponse().assets;
+          const [defaultData] = updateFileValues([defaultAssets[4]]);
+
+          expect(screen.queryByText(filesPageMessages.overwriteConfirmMessage.defaultMessage)).toBeNull();
+          expect(assetData).toEqual(defaultData);
+        });
+      });
+
+      it('should have disabled action buttons', async () => {
+        await mockStore(RequestStatus.SUCCESSFUL);
+
+        const actionsButton = await screen.getByText(messages.actionsButtonLabel.defaultMessage);
+        fireEvent.click(actionsButton);
+        expect(screen.getByText(messages.downloadTitle.defaultMessage).closest('a')).toHaveClass('disabled');
+
+        expect(screen.getByText(messages.deleteTitle.defaultMessage).closest('a')).toHaveClass('disabled');
+      });
+
+      it('delete button should be enabled and delete selected file', async () => {
+        await mockStore(RequestStatus.SUCCESSFUL);
+
+        const [selectCardButton] = await screen.findAllByTestId('datatable-select-column-checkbox-cell');
+        fireEvent.click(selectCardButton);
+
+        const actionsButton = screen.getByText(messages.actionsButtonLabel.defaultMessage);
+        expect(actionsButton).toBeVisible();
+        fireEvent.click(actionsButton);
+
+        const deleteButton = screen.getByText(messages.deleteTitle.defaultMessage).closest('a');
+        expect(deleteButton).not.toHaveClass('disabled');
+
+        axiosMock.onDelete(`${getAssetsUrl(courseId)}mOckID1`).reply(204);
+
+        fireEvent.click(deleteButton);
+        expect(screen.getByText('Delete mOckID1')).toBeVisible();
+        fireEvent.click(deleteButton);
+
+        // Wait for the delete confirmation button to appear
+        const confirmDeleteButton = await screen.findByRole('button', {
+          name: messages.deleteFileButtonLabel.defaultMessage,
+        });
+        fireEvent.click(confirmDeleteButton);
+
+        expect(screen.queryByText('Delete mOckID1')).toBeNull();
+
+        // Check if the asset is deleted in the store and UI
+        await waitFor(() => {
+          const deleteStatus = store.getState().assets.deletingStatus;
+          expect(deleteStatus).toEqual(RequestStatus.SUCCESSFUL);
+        });
+        expect(screen.queryByTestId('grid-card-mOckID1')).toBeNull();
+      });
+
+      it('download button should be enabled and download single selected file', async () => {
+        await mockStore(RequestStatus.SUCCESSFUL);
+        const selectCardButton = screen.getAllByTestId('datatable-select-column-checkbox-cell')[0];
+        fireEvent.click(selectCardButton);
+        const actionsButton = screen.getByText(messages.actionsButtonLabel.defaultMessage);
+        expect(actionsButton).toBeVisible();
+
+        fireEvent.click(actionsButton);
+        const downloadButton = screen.getByText(messages.downloadTitle.defaultMessage).closest('a');
+        expect(downloadButton).not.toHaveClass('disabled');
+
+        fireEvent.click(downloadButton);
+        expect(saveAs).toHaveBeenCalled();
+      });
+
+      it('download button should be enabled and download multiple selected files', async () => {
+        await mockStore(RequestStatus.SUCCESSFUL);
+        const selectCardButtons = screen.getAllByTestId('datatable-select-column-checkbox-cell');
+        fireEvent.click(selectCardButtons[0]);
+        fireEvent.click(selectCardButtons[1]);
+        const actionsButton = screen.getByText(messages.actionsButtonLabel.defaultMessage);
+        expect(actionsButton).toBeVisible();
+
+        fireEvent.click(actionsButton);
+        const mockResponseData = { ok: true, blob: () => 'Data' };
+        const mockFetchResponse = Promise.resolve(mockResponseData);
+        const downloadButton = screen.getByText(messages.downloadTitle.defaultMessage).closest('a');
+        expect(downloadButton).not.toHaveClass('disabled');
+
+        global.fetch = jest.fn().mockImplementation(() => mockFetchResponse);
+        fireEvent.click(downloadButton);
+        expect(fetch).toHaveBeenCalledTimes(2);
+      });
+
+      it('sort button should be enabled and sort files by name', async () => {
+        await mockStore(RequestStatus.SUCCESSFUL);
+        const sortsButton = screen.getByText(messages.sortButtonLabel.defaultMessage);
+        expect(sortsButton).toBeVisible();
+
+        fireEvent.click(sortsButton);
+        await waitFor(() => {
+          expect(screen.getByText(messages.sortModalTitleLabel.defaultMessage)).toBeVisible();
+        });
+
+        const sortNameAscendingButton = screen.getByText(messages.sortByNameAscending.defaultMessage);
+        fireEvent.click(sortNameAscendingButton);
+
+        fireEvent.click(screen.getByText(messages.applySortButton.defaultMessage));
+        await waitFor(() => {
+          expect(screen.queryByText(messages.sortModalTitleLabel.defaultMessage)).toBeNull();
+        });
+      });
+
+      it('sort button should be enabled and sort files by file size', async () => {
+        await mockStore(RequestStatus.SUCCESSFUL);
+        const sortsButton = screen.getByText(messages.sortButtonLabel.defaultMessage);
+        expect(sortsButton).toBeVisible();
+
+        fireEvent.click(sortsButton);
+        await waitFor(() => {
+          expect(screen.getByText(messages.sortModalTitleLabel.defaultMessage)).toBeVisible();
+        });
+
+        const sortBySizeDescendingButton = screen.getByText(messages.sortBySizeDescending.defaultMessage);
+        fireEvent.click(sortBySizeDescendingButton);
+
+        fireEvent.click(screen.getByText(messages.applySortButton.defaultMessage));
+        await waitFor(() => {
+          expect(screen.queryByText(messages.sortModalTitleLabel.defaultMessage)).toBeNull();
+        });
+      });
+    });
+
+    describe('card menu actions', () => {
+      it('should open asset info', async () => {
+        await mockStore(RequestStatus.SUCCESSFUL);
+
+        const [assetMenuButton] = await screen.getAllByTestId('file-menu-dropdown-mOckID1');
+
+        axiosMock.onGet(`${getAssetsUrl(courseId)}mOckID1/usage`)
+          .reply(201, {
+            usage_locations: {
+              mOckID1: [{
+                display_location: 'subsection - unit / block',
+                url: 'base/unit_id#block_id',
+              }],
+            },
+          });
+        fireEvent.click(within(assetMenuButton).getByLabelText('file-menu-toggle'));
+        fireEvent.click(screen.getByText('Info'));
+
+        await executeThunk(getUsagePaths({
+          courseId,
+          asset: { id: 'mOckID1', displayName: 'mOckID1' },
+          setSelectedRows: jest.fn(),
+        }), store.dispatch);
+        await waitFor(() => {
+          expect(screen.getAllByLabelText('mOckID1')[0]).toBeVisible();
+        });
+
+        const { usageStatus } = store.getState().assets;
+        expect(usageStatus).toEqual(RequestStatus.SUCCESSFUL);
+        expect(screen.getByText('subsection - unit / block')).toBeVisible();
+      });
+
+      it('should open asset info and handle lock checkbox', async () => {
+        await mockStore(RequestStatus.SUCCESSFUL);
+        const assetMenuButton = screen.getAllByTestId('file-menu-dropdown-mOckID1')[0];
+
+        axiosMock.onPut(`${getAssetsUrl(courseId)}mOckID1`).reply(201, { locked: false });
+        axiosMock.onGet(`${getAssetsUrl(courseId)}mOckID1/usage`).reply(201, { usage_locations: { mOckID1: [] } });
+        fireEvent.click(within(assetMenuButton).getByLabelText('file-menu-toggle'));
+        fireEvent.click(screen.getByText('Info'));
+        await executeThunk(getUsagePaths({
+          courseId,
+          asset: { id: 'mOckID1', displayName: 'mOckID1' },
+          setSelectedRows: jest.fn(),
+        }), store.dispatch);
+        await waitFor(() => {
+          expect(screen.getAllByLabelText('mOckID1')[0]).toBeVisible();
+        });
+
+        fireEvent.click(screen.getByLabelText('Checkbox'));
+        await executeThunk(updateAssetLock({
+          courseId,
+          assetId: 'mOckID1',
+          locked: false,
+        }), store.dispatch);
+        expect(screen.getByText(messages.usageNotInUseMessage.defaultMessage)).toBeVisible();
+
+        const updateStatus = store.getState().assets.updatingStatus;
+        expect(updateStatus).toEqual(RequestStatus.SUCCESSFUL);
+      });
+
+      it('should unlock asset', async () => {
+        await mockStore(RequestStatus.SUCCESSFUL);
+
+        const assetMenuButton = screen.getAllByTestId('file-menu-dropdown-mOckID1')[0];
+
+        axiosMock.onPut(`${getAssetsUrl(courseId)}mOckID1`).reply(201, { locked: false });
+        fireEvent.click(within(assetMenuButton).getByLabelText('file-menu-toggle'));
+        fireEvent.click(await screen.getByText('Unlock'));
+        await executeThunk(updateAssetLock({
+          courseId,
+          assetId: 'mOckID1',
+          locked: false,
+        }), store.dispatch);
+        await waitFor(() => {
+          const updateStatus = store.getState().assets.updatingStatus;
+          expect(updateStatus).toEqual(RequestStatus.SUCCESSFUL);
+        });
+      });
+
+      it('should lock asset', async () => {
+        await mockStore(RequestStatus.SUCCESSFUL);
+
+        const assetMenuButton = screen.getAllByTestId('file-menu-dropdown-mOckID3')[0];
+
+        axiosMock.onPut(`${getAssetsUrl(courseId)}mOckID3`).reply(201, { locked: true });
+        fireEvent.click(within(assetMenuButton).getByLabelText('file-menu-toggle'));
+        fireEvent.click(await screen.getByText('Lock'));
+        await executeThunk(updateAssetLock({
+          courseId,
+          assetId: 'mOckID3',
+          locked: true,
+        }), store.dispatch);
+        await waitFor(() => {
+          const updateStatus = store.getState().assets.updatingStatus;
+          expect(updateStatus).toEqual(RequestStatus.SUCCESSFUL);
+        });
+      });
+
+      it('download button should download file', async () => {
+        await mockStore(RequestStatus.SUCCESSFUL);
+
+        const assetMenuButton = screen.getAllByTestId('file-menu-dropdown-mOckID1')[0];
+
+        fireEvent.click(within(assetMenuButton).getByLabelText('file-menu-toggle'));
+        fireEvent.click(screen.getByText('Download'));
+        expect(saveAs).toHaveBeenCalled();
+      });
+
+      it('delete button should delete file', async () => {
+        await mockStore(RequestStatus.SUCCESSFUL);
+
+        const assetMenuButton = screen.getAllByTestId('file-menu-dropdown-mOckID1')[0];
+
+        axiosMock.onDelete(`${getAssetsUrl(courseId)}mOckID1`).reply(204);
+        fireEvent.click(within(assetMenuButton).getByLabelText('file-menu-toggle'));
+        const confirmDelete = await screen.getByTestId('open-delete-confirmation-button');
+        fireEvent.click(confirmDelete);
+        await waitFor(() => {
+          expect(screen.getByText('Delete mOckID1')).toBeVisible();
+        });
+
+        fireEvent.click(screen.getByText(messages.deleteFileButtonLabel.defaultMessage));
+        await waitFor(() => {
+          expect(screen.queryByText('Delete mOckID1')).toBeNull();
+        });
+        await executeThunk(deleteAssetFile(courseId, 'mOckID1', 5), store.dispatch);
+        const deleteStatus = store.getState().assets.deletingStatus;
+        expect(deleteStatus).toEqual(RequestStatus.SUCCESSFUL);
+
+        expect(screen.queryByTestId('grid-card-mOckID1')).toBeNull();
+      });
+    });
+
+    describe('api errors', () => {
+      it('404 intitial fetch should show error', async () => {
+        await mockStore(RequestStatus.FAILED);
+        const { loadingStatus } = store.getState().assets;
+        expect(screen.getByText('Error')).toBeVisible();
+
+        expect(loadingStatus).toEqual(RequestStatus.FAILED);
+        expect(screen.getByText('Failed to load all files.')).toBeVisible();
+      });
+
+      it('404 intitial fetch should show error', async () => {
+        await mockStore(RequestStatus.SUCCESSFUL, true);
+        const { loadingStatus } = store.getState().assets;
+        expect(screen.getByText('Error')).toBeVisible();
+
+        expect(loadingStatus).toEqual(RequestStatus.PARTIAL_FAILURE);
+        expect(screen.getByText('Failed to load remaining files.')).toBeVisible();
+      });
+
+      it('invalid file size should show error', async () => {
+        const errorMessage = 'File download.png exceeds maximum size of 20 MB.';
+        await mockStore(RequestStatus.SUCCESSFUL);
+        axiosMock.onGet(`${getAssetsUrl(courseId)}?display_name=download.png&page_size=1`).reply(200, { assets: [] });
+        axiosMock.onPost(getAssetsUrl(courseId)).reply(413, { error: errorMessage });
+        const addFilesButton = screen.getByLabelText('file-input');
+        userEvent.upload(addFilesButton, file);
+        await waitFor(() => {
+          const addStatus = store.getState().assets.addingStatus;
+          expect(addStatus).toEqual(RequestStatus.FAILED);
+        });
+
+        expect(screen.getByText('Upload error')).toBeVisible();
+      });
+
+      it('404 validation should show error', async () => {
+        await mockStore(RequestStatus.SUCCESSFUL);
+        axiosMock.onGet(`${getAssetsUrl(courseId)}?display_name=download.png&page_size=1`).reply(404);
+        const addFilesButton = screen.getByLabelText('file-input');
+        userEvent.upload(addFilesButton, file);
+        await executeThunk(addAssetFile(courseId, file, 1), store.dispatch);
+        const addStatus = store.getState().assets.addingStatus;
+        expect(addStatus).toEqual(RequestStatus.FAILED);
+
+        expect(screen.getByText('Upload error')).toBeVisible();
+      });
+
+      it('404 upload should show error', async () => {
+        await mockStore(RequestStatus.SUCCESSFUL);
+        axiosMock.onGet(`${getAssetsUrl(courseId)}?display_name=download.png&page_size=1`).reply(200, { assets: [] });
+        axiosMock.onPost(getAssetsUrl(courseId)).reply(404);
+        const addFilesButton = screen.getByLabelText('file-input');
+        userEvent.upload(addFilesButton, file);
+        await executeThunk(addAssetFile(courseId, file, 1), store.dispatch);
+        const addStatus = store.getState().assets.addingStatus;
+        expect(addStatus).toEqual(RequestStatus.FAILED);
+
+        expect(screen.getByText('Upload error')).toBeVisible();
+      });
+
+      it('404 delete should show error', async () => {
+        await mockStore(RequestStatus.SUCCESSFUL);
+
+        const assetMenuButton = screen.getAllByTestId('file-menu-dropdown-mOckID3')[0];
+
+        axiosMock.onDelete(`${getAssetsUrl(courseId)}mOckID3`).reply(404);
+        fireEvent.click(within(assetMenuButton).getByLabelText('file-menu-toggle'));
+        const confirmDelete = await screen.getByTestId('open-delete-confirmation-button');
+        fireEvent.click(confirmDelete);
+        await waitFor(() => {
+          expect(screen.getByText('Delete mOckID3')).toBeVisible();
+        });
+
+        fireEvent.click(screen.getByText(messages.deleteFileButtonLabel.defaultMessage));
+        await waitFor(() => {
+          expect(screen.queryByText('Delete mOckID3')).toBeNull();
+        });
+        await executeThunk(deleteAssetFile(courseId, 'mOckID3', 5), store.dispatch);
+        const deleteStatus = store.getState().assets.deletingStatus;
+        expect(deleteStatus).toEqual(RequestStatus.FAILED);
+
+        expect(screen.getAllByTestId('grid-card-mOckID3')[0]).toBeVisible();
+
+        expect(screen.getByText('Error')).toBeVisible();
+      });
+
+      it('404 usage path fetch should show error', async () => {
+        await mockStore(RequestStatus.SUCCESSFUL);
+
+        const assetMenuButton = screen.getAllByTestId('file-menu-dropdown-mOckID3')[0];
+
+        axiosMock.onGet(`${getAssetsUrl(courseId)}mOckID3/usage`).reply(404);
+        fireEvent.click(within(assetMenuButton).getByLabelText('file-menu-toggle'));
+        fireEvent.click(screen.getByText('Info'));
+        await executeThunk(getUsagePaths({
+          courseId,
+          asset: { id: 'mOckID3', displayName: 'mOckID3' },
+          setSelectedRows: jest.fn(),
+        }), store.dispatch);
+        await waitFor(() => {
+          const { usageStatus } = store.getState().assets;
+          expect(usageStatus).toEqual(RequestStatus.FAILED);
+        });
+      });
+
+      it('404 lock update should show error', async () => {
+        await mockStore(RequestStatus.SUCCESSFUL);
+
+        const assetMenuButton = screen.getAllByTestId('file-menu-dropdown-mOckID3')[0];
+
+        axiosMock.onPut(`${getAssetsUrl(courseId)}mOckID3`).reply(404);
+        fireEvent.click(within(assetMenuButton).getByLabelText('file-menu-toggle'));
+        fireEvent.click(screen.getByText('Lock'));
+        await executeThunk(updateAssetLock({
+          courseId,
+          assetId: 'mOckID3',
+          locked: true,
+        }), store.dispatch);
+        await waitFor(() => {
+          const updateStatus = store.getState().assets.updatingStatus;
+          expect(updateStatus).toEqual(RequestStatus.FAILED);
+        });
+        expect(screen.getByText('Error')).toBeVisible();
+      });
+
+      it('multiple asset file fetch failure should show error', async () => {
+        await mockStore(RequestStatus.SUCCESSFUL);
+        const selectCardButtons = screen.getAllByTestId('datatable-select-column-checkbox-cell');
+        fireEvent.click(selectCardButtons[0]);
+        fireEvent.click(selectCardButtons[1]);
+        const actionsButton = screen.getByText(messages.actionsButtonLabel.defaultMessage);
+        expect(actionsButton).toBeVisible();
+
+        fireEvent.click(actionsButton);
+        const mockResponseData = { ok: false };
+        const mockFetchResponse = Promise.resolve(mockResponseData);
+        const downloadButton = screen.getByText(messages.downloadTitle.defaultMessage).closest('a');
+        expect(downloadButton).not.toHaveClass('disabled');
+
+        global.fetch = jest.fn().mockImplementation(() => mockFetchResponse);
+        fireEvent.click(downloadButton);
+        await waitFor(() => {
+          expect(fetch).toHaveBeenCalledTimes(2);
+        });
+
+        const updateStatus = store.getState().assets.updatingStatus;
+        expect(updateStatus).toEqual(RequestStatus.FAILED);
+
+        expect(screen.getByText('Error')).toBeVisible();
+      });
+    });
+  });
+});
diff --git a/src/files-and-videos/files-page/FilesPageProvider.jsx b/src/files-and-videos/files-page/FilesPageProvider.jsx
new file mode 100644
index 0000000000..6b10fbfa33
--- /dev/null
+++ b/src/files-and-videos/files-page/FilesPageProvider.jsx
@@ -0,0 +1,25 @@
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+
+export const FilesPageContext = React.createContext({});
+
+const FilesPageProvider = ({ courseId, children }) => {
+  const contextValue = useMemo(() => ({
+    courseId,
+    path: `/course/${courseId}/assets`,
+  }), []);
+  return (
+    <FilesPageContext.Provider
+      value={contextValue}
+    >
+      {children}
+    </FilesPageContext.Provider>
+  );
+};
+
+FilesPageProvider.propTypes = {
+  courseId: PropTypes.string.isRequired,
+  children: PropTypes.node.isRequired,
+};
+
+export default FilesPageProvider;
diff --git a/src/files-and-videos/files-page/data/api.js b/src/files-and-videos/files-page/data/api.js
new file mode 100644
index 0000000000..e41df6eada
--- /dev/null
+++ b/src/files-and-videos/files-page/data/api.js
@@ -0,0 +1,135 @@
+import { camelCaseObject, ensureConfig, getConfig } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+
+import JSZip from 'jszip';
+import saveAs from 'file-saver';
+
+ensureConfig([
+  'STUDIO_BASE_URL',
+], 'Course Apps API service');
+
+export const getApiBaseUrl = () => getConfig().STUDIO_BASE_URL;
+export const getAssetsUrl = (courseId) => `${getApiBaseUrl()}/assets/${courseId}/`;
+
+/**
+ * Fetches the course custom pages for provided course
+ * @param {string} courseId
+ * @returns {Promise<[{}]>}
+ */
+export async function getAssets(courseId, page) {
+  const nextPage = page || 0;
+  const { data } = await getAuthenticatedHttpClient()
+    .get(`${getAssetsUrl(courseId)}?page=${nextPage}`);
+  return camelCaseObject(data);
+}
+
+/**
+ * Fetches the course custom pages for provided course
+ * @param {string} courseId
+ * @returns {Promise<[{}]>}
+ */
+export async function getAssetDetails({ courseId, filenames, fileCount }) {
+  const params = new URLSearchParams(filenames.map(filename => ['display_name', filename]));
+  params.append('page_size', fileCount);
+  const { data } = await getAuthenticatedHttpClient()
+    .get(`${getAssetsUrl(courseId)}?${params}`);
+  return camelCaseObject(data);
+}
+
+/**
+ * Fetch asset file.
+ * @param {blockId} courseId Course ID for the course to operate on
+
+ */
+export async function getDownload(selectedRows, courseId) {
+  const downloadErrors = [];
+  if (selectedRows?.length > 1) {
+    const zip = new JSZip();
+    const date = new Date().toString();
+    const folder = zip.folder(`${courseId}-assets-${date}`);
+    const assetNames = [];
+    const assetFetcher = await Promise.allSettled(
+      selectedRows.map(async (row) => {
+        const asset = row?.original;
+        try {
+          assetNames.push(asset.displayName);
+          const res = await fetch(`${getApiBaseUrl()}/${asset.id}`);
+          if (!res.ok) {
+            throw new Error();
+          }
+          return await res.blob();
+        } catch (error) {
+          downloadErrors.push(`Failed to download ${asset?.displayName}.`);
+          return null;
+        }
+      }),
+    );
+    const definedAssets = assetFetcher.filter(asset => asset.value !== null);
+    if (definedAssets.length > 0) {
+      definedAssets.forEach((assetBlob, index) => {
+        folder.file(assetNames[index], assetBlob.value, { blob: true });
+      });
+      zip.generateAsync({ type: 'blob' }).then(content => {
+        saveAs(content, `${courseId}-assets-${date}.zip`);
+      });
+    }
+  } else if (selectedRows?.length === 1) {
+    const asset = selectedRows[0].original;
+    try {
+      saveAs(`${getApiBaseUrl()}/${asset.id}`, asset.displayName);
+    } catch (error) {
+      downloadErrors.push(`Failed to download ${asset?.displayName}.`);
+    }
+  } else {
+    downloadErrors.push('No files were selected to download');
+  }
+  return downloadErrors;
+}
+
+/**
+ * Fetch where asset is used in a course.
+ * @param {blockId} courseId Course ID for the course to operate on
+
+ */
+export async function getAssetUsagePaths({ courseId, assetId }) {
+  const { data } = await getAuthenticatedHttpClient()
+    .get(`${getAssetsUrl(courseId)}${assetId}/usage`);
+  const { usage_locations: usageLocations } = data;
+  return { usageLocations };
+}
+
+/**
+ * Delete asset to course.
+ * @param {blockId} courseId Course ID for the course to operate on
+
+ */
+export async function deleteAsset(courseId, assetId) {
+  await getAuthenticatedHttpClient()
+    .delete(`${getAssetsUrl(courseId)}${assetId}`);
+}
+
+/**
+ * Add asset to course.
+ * @param {blockId} courseId Course ID for the course to operate on
+
+ */
+export async function addAsset(courseId, file) {
+  const formData = new FormData();
+  formData.append('file', file);
+  const { data } = await getAuthenticatedHttpClient()
+    .post(getAssetsUrl(courseId), formData);
+  return camelCaseObject(data);
+}
+
+/**
+ * Update locked attribute for provided asset.
+ * @param {blockId} courseId Course ID for the course to operate on
+
+ */
+export async function updateLockStatus({ assetId, courseId, locked }) {
+  const { data } = await getAuthenticatedHttpClient()
+    .put(`${getAssetsUrl(courseId)}${assetId}`, {
+      locked,
+    });
+  return camelCaseObject(data);
+}
diff --git a/src/files-and-videos/files-page/data/api.test.js b/src/files-and-videos/files-page/data/api.test.js
new file mode 100644
index 0000000000..e852bc4ec6
--- /dev/null
+++ b/src/files-and-videos/files-page/data/api.test.js
@@ -0,0 +1,57 @@
+import { getDownload } from './api';
+import 'file-saver';
+
+jest.mock('file-saver');
+
+describe('api.js', () => {
+  describe('getDownload', () => {
+    describe('selectedRows length is undefined or less than zero', () => {
+      it('should return with no files selected error if selectedRows is empty', async () => {
+        const expected = ['No files were selected to download'];
+        const actual = await getDownload([], 'courseId');
+        expect(actual).toEqual(expected);
+      });
+      it('should return with no files selected error if selectedRows is null', async () => {
+        const expected = ['No files were selected to download'];
+        const actual = await getDownload(null, 'courseId');
+        expect(actual).toEqual(expected);
+      });
+    });
+    describe('selectedRows length is greater than one', () => {
+      it('should not throw error when blob returns null', async () => {
+        const mockResponseData = { ok: true, blob: () => null };
+        const mockFetchResponse = Promise.resolve(mockResponseData);
+        global.fetch = jest.fn().mockImplementation(() => mockFetchResponse);
+        const expected = [];
+        const actual = await getDownload([
+          { original: { displayName: 'test1' } },
+          { original: { displayName: 'test2', id: '2' } },
+        ]);
+        expect(actual).toEqual(expected);
+      });
+      it('should return error if row does not contain .original ancestor', async () => {
+        const mockResponseData = { ok: true, blob: () => 'data' };
+        const mockFetchResponse = Promise.resolve(mockResponseData);
+        global.fetch = jest.fn().mockImplementation(() => mockFetchResponse);
+        const expected = ['Failed to download undefined.'];
+        const actual = await getDownload([
+          { asset: { displayName: 'test1', id: '1' } },
+          { original: { displayName: 'test2', id: '2' } },
+        ]);
+        expect(actual).toEqual(expected);
+      });
+    });
+    describe('selectedRows length equals one', () => {
+      it('should return error if row does not contain .original ancestor', async () => {
+        const mockResponseData = { ok: true, blob: () => 'data' };
+        const mockFetchResponse = Promise.resolve(mockResponseData);
+        global.fetch = jest.fn().mockImplementation(() => mockFetchResponse);
+        const expected = ['Failed to download undefined.'];
+        const actual = await getDownload([
+          { asset: { displayName: 'test1', id: '1' } },
+        ]);
+        expect(actual).toEqual(expected);
+      });
+    });
+  });
+});
diff --git a/src/files-and-videos/files-page/data/slice.js b/src/files-and-videos/files-page/data/slice.js
new file mode 100644
index 0000000000..3a96779185
--- /dev/null
+++ b/src/files-and-videos/files-page/data/slice.js
@@ -0,0 +1,101 @@
+/* eslint-disable no-param-reassign */
+import { createSlice } from '@reduxjs/toolkit';
+import { isEmpty } from 'lodash';
+
+import { RequestStatus } from '../../../data/constants';
+
+const slice = createSlice({
+  name: 'assets',
+  initialState: {
+    assetIds: [],
+    loadingStatus: RequestStatus.IN_PROGRESS,
+    duplicateFiles: [],
+    updatingStatus: '',
+    addingStatus: '',
+    deletingStatus: '',
+    usageStatus: '',
+    errors: {
+      add: [],
+      delete: [],
+      lock: [],
+      download: [],
+      usageMetrics: [],
+      loading: '',
+    },
+  },
+  reducers: {
+    setAssetIds: (state, { payload }) => {
+      if (isEmpty(state.assetIds)) {
+        state.assetIds = payload.assetIds;
+      } else {
+        state.assetIds = [...state.assetIds, ...payload.assetIds];
+      }
+    },
+    setSortedAssetIds: (state, { payload }) => {
+      state.assetIds = payload.assetIds;
+    },
+    updateLoadingStatus: (state, { payload }) => {
+      state.loadingStatus = payload.status;
+    },
+    updateEditStatus: (state, { payload }) => {
+      const { editType, status } = payload;
+      switch (editType) {
+        case 'delete':
+          state.deletingStatus = status;
+          break;
+        case 'add':
+          state.addingStatus = status;
+          break;
+        case 'lock':
+          state.updatingStatus = status;
+          break;
+        case 'download':
+          state.updatingStatus = status;
+          break;
+        case 'usageMetrics':
+          state.usageStatus = status;
+          break;
+        default:
+          break;
+      }
+    },
+    deleteAssetSuccess: (state, { payload }) => {
+      state.assetIds = state.assetIds.filter(id => id !== payload.assetId);
+    },
+    addAssetSuccess: (state, { payload }) => {
+      state.assetIds = [payload.assetId, ...state.assetIds];
+    },
+    updateDuplicateFiles: (state, { payload }) => {
+      state.duplicateFiles = payload.files;
+    },
+    updateErrors: (state, { payload }) => {
+      const { error, message } = payload;
+      if (error === 'loading') {
+        state.errors.loading = message;
+      } else {
+        const currentErrorState = state.errors[error];
+        state.errors[error] = [...currentErrorState, message];
+      }
+    },
+    clearErrors: (state, { payload }) => {
+      const { error } = payload;
+      state.errors[error] = [];
+    },
+  },
+});
+
+export const {
+  setAssetIds,
+  setSortedAssetIds,
+  updateLoadingStatus,
+  deleteAssetSuccess,
+  addAssetSuccess,
+  updateErrors,
+  clearErrors,
+  updateEditStatus,
+  updateDuplicateFiles,
+} = slice.actions;
+
+export const {
+  reducer,
+} = slice;
diff --git a/src/files-and-videos/files-page/data/thunks.js b/src/files-and-videos/files-page/data/thunks.js
new file mode 100644
index 0000000000..282258d2b0
--- /dev/null
+++ b/src/files-and-videos/files-page/data/thunks.js
@@ -0,0 +1,226 @@
+import { isEmpty } from 'lodash';
+import { camelCaseObject } from '@edx/frontend-platform';
+
+import { RequestStatus } from '../../../data/constants';
+import {
+  addModel,
+  addModels,
+  removeModel,
+  updateModel,
+} from '../../../generic/model-store';
+import {
+  getAssets,
+  getAssetUsagePaths,
+  addAsset,
+  deleteAsset,
+  updateLockStatus,
+  getDownload,
+  getAssetDetails,
+} from './api';
+import {
+  setAssetIds,
+  setSortedAssetIds,
+  updateLoadingStatus,
+  deleteAssetSuccess,
+  addAssetSuccess,
+  updateErrors,
+  clearErrors,
+  updateEditStatus,
+  updateDuplicateFiles,
+} from './slice';
+
+import { getUploadConflicts, updateFileValues } from './utils';
+
+export function fetchAdditionalAssets(courseId, totalCount) {
+  return async (dispatch) => {
+    let remainingAssetCount = totalCount;
+    let page = 1;
+
+    /* eslint-disable no-await-in-loop */
+    while (remainingAssetCount > 0) {
+      try {
+        const { assets } = await getAssets(courseId, page);
+        const parsedAssets = updateFileValues(assets);
+        dispatch(addModels({ modelType: 'assets', models: parsedAssets }));
+        dispatch(setAssetIds({
+          assetIds: assets.map(asset => asset.id),
+        }));
+        remainingAssetCount -= 50;
+        page += 1;
+      } catch (error) {
+        remainingAssetCount = 0;
+        dispatch(updateErrors({ error: 'loading', message: 'Failed to load remaining files.' }));
+        dispatch(updateLoadingStatus({ status: RequestStatus.PARTIAL_FAILURE }));
+      }
+    }
+  };
+}
+
+export function fetchAssets(courseId) {
+  return async (dispatch) => {
+    dispatch(updateLoadingStatus({ courseId, status: RequestStatus.IN_PROGRESS }));
+
+    try {
+      const { assets, totalCount } = await getAssets(courseId);
+      const parsedAssets = updateFileValues(assets);
+      dispatch(addModels({ modelType: 'assets', models: parsedAssets }));
+      dispatch(setAssetIds({
+        assetIds: assets.map(asset => asset.id),
+      }));
+      if (totalCount > 50) {
+        dispatch(fetchAdditionalAssets(courseId, totalCount - 50));
+      }
+      dispatch(updateLoadingStatus({ courseId, status: RequestStatus.SUCCESSFUL }));
+    } catch (error) {
+      if (error.response && error.response.status === 403) {
+        dispatch(updateLoadingStatus({ status: RequestStatus.DENIED }));
+      } else {
+        dispatch(updateErrors({ error: 'loading', message: 'Failed to load all files.' }));
+        dispatch(updateLoadingStatus({ courseId, status: RequestStatus.FAILED }));
+      }
+    }
+  };
+}
+
+export function updateAssetOrder(courseId, assetIds) {
+  return async (dispatch) => {
+    dispatch(updateLoadingStatus({ courseId, status: RequestStatus.IN_PROGRESS }));
+    dispatch(setSortedAssetIds({ assetIds }));
+    dispatch(updateLoadingStatus({ courseId, status: RequestStatus.SUCCESSFUL }));
+  };
+}
+
+export function deleteAssetFile(courseId, id) {
+  return async (dispatch) => {
+    dispatch(updateEditStatus({ editType: 'delete', status: RequestStatus.IN_PROGRESS }));
+
+    try {
+      await deleteAsset(courseId, id);
+      dispatch(deleteAssetSuccess({ assetId: id }));
+      dispatch(removeModel({ modelType: 'assets', id }));
+      dispatch(updateEditStatus({ editType: 'delete', status: RequestStatus.SUCCESSFUL }));
+    } catch (error) {
+      dispatch(updateErrors({ error: 'delete', message: `Failed to delete file id ${id}.` }));
+      dispatch(updateEditStatus({ editType: 'delete', status: RequestStatus.FAILED }));
+    }
+  };
+}
+
+export function addAssetFile(courseId, file, isOverwrite) {
+  return async (dispatch) => {
+    dispatch(updateEditStatus({ editType: 'add', status: RequestStatus.IN_PROGRESS }));
+
+    try {
+      const { asset } = await addAsset(courseId, file);
+      const [parsedAssets] = updateFileValues([asset]);
+      dispatch(addModel({
+        modelType: 'assets',
+        model: { ...parsedAssets },
+      }));
+      if (!isOverwrite) {
+        dispatch(addAssetSuccess({
+          assetId: asset.id,
+        }));
+      }
+      dispatch(updateEditStatus({ editType: 'add', status: RequestStatus.SUCCESSFUL }));
+    } catch (error) {
+      if (error.response && error.response.status === 413) {
+        const message = error.response.data.error;
+        dispatch(updateErrors({ error: 'add', message }));
+      } else {
+        dispatch(updateErrors({ error: 'add', message: `Failed to add ${file.name}.` }));
+      }
+      dispatch(updateEditStatus({ editType: 'add', status: RequestStatus.FAILED }));
+    }
+  };
+}
+
+export function validateAssetFiles(courseId, files) {
+  return async (dispatch) => {
+    dispatch(updateEditStatus({ editType: 'add', status: RequestStatus.IN_PROGRESS }));
+    dispatch(updateDuplicateFiles({ files: {} }));
+
+    try {
+      const filenames = [];
+      files.forEach(file => filenames.push(file.name));
+      await getAssetDetails({ courseId, filenames, fileCount: filenames.length }).then(({ assets }) => {
+        const [conflicts, newFiles] = getUploadConflicts(files, assets);
+        if (!isEmpty(newFiles)) {
+          newFiles.forEach(file => dispatch(addAssetFile(courseId, file)));
+        }
+        if (!isEmpty(conflicts)) {
+          dispatch(updateDuplicateFiles({ files: conflicts }));
+        }
+      });
+    } catch (error) {
+      files.forEach(file => dispatch(updateErrors({ error: 'add', message: `Failed to validate ${file.name}.` })));
+      dispatch(updateEditStatus({ editType: 'add', status: RequestStatus.FAILED }));
+    }
+  };
+}
+
+export function updateAssetLock({ assetId, courseId, locked }) {
+  return async (dispatch) => {
+    dispatch(updateEditStatus({ editType: 'lock', status: RequestStatus.IN_PROGRESS }));
+
+    try {
+      await updateLockStatus({ assetId, courseId, locked });
+      const lockStatus = locked ? 'locked' : 'public';
+      dispatch(updateModel({
+        modelType: 'assets',
+        model: {
+          id: assetId,
+          locked,
+          lockStatus,
+        },
+      }));
+      dispatch(updateEditStatus({ editType: 'lock', status: RequestStatus.SUCCESSFUL }));
+    } catch (error) {
+      const lockStatus = locked ? 'lock' : 'unlock';
+      dispatch(updateErrors({ error: 'lock', message: `Failed to ${lockStatus} file id ${assetId}.` }));
+      dispatch(updateEditStatus({ editType: 'lock', status: RequestStatus.FAILED }));
+    }
+  };
+}
+
+export function resetErrors({ errorType }) {
+  return (dispatch) => { dispatch(clearErrors({ error: errorType })); };
+}
+
+export function getUsagePaths({ asset, courseId }) {
+  return async (dispatch) => {
+    dispatch(updateEditStatus({ editType: 'usageMetrics', status: RequestStatus.IN_PROGRESS }));
+    try {
+      const { usageLocations } = await getAssetUsagePaths({ assetId: asset.id, courseId });
+      const assetLocations = usageLocations[asset.id];
+      const activeStatus = assetLocations?.length > 0 ? 'active' : 'inactive';
+      dispatch(updateModel({
+        modelType: 'assets',
+        model: {
+          id: asset.id,
+          usageLocations: camelCaseObject(assetLocations),
+          activeStatus,
+        },
+      }));
+      dispatch(updateEditStatus({ editType: 'usageMetrics', status: RequestStatus.SUCCESSFUL }));
+    } catch (error) {
+      dispatch(updateErrors({ error: 'usageMetrics', message: `Failed to get usage metrics for ${asset.displayName}.` }));
+      dispatch(updateEditStatus({ editType: 'usageMetrics', status: RequestStatus.FAILED }));
+    }
+  };
+}
+
+export function fetchAssetDownload({ selectedRows, courseId }) {
+  return async (dispatch) => {
+    dispatch(updateEditStatus({ editType: 'download', status: RequestStatus.IN_PROGRESS }));
+    const errors = await getDownload(selectedRows, courseId);
+    if (isEmpty(errors)) {
+      dispatch(updateEditStatus({ editType: 'download', status: RequestStatus.SUCCESSFUL }));
+    } else {
+      errors.forEach(error => {
+        dispatch(updateErrors({ error: 'download', message: error }));
+      });
+      dispatch(updateEditStatus({ editType: 'download', status: RequestStatus.FAILED }));
+    }
+  };
+}
diff --git a/src/files-and-videos/files-page/data/utils.js b/src/files-and-videos/files-page/data/utils.js
new file mode 100644
index 0000000000..cdcb39ce1d
--- /dev/null
+++ b/src/files-and-videos/files-page/data/utils.js
@@ -0,0 +1,73 @@
+import {
+  InsertDriveFile,
+  Terminal,
+  AudioFile,
+} from '@openedx/paragon/icons';
+import { ensureConfig, getConfig } from '@edx/frontend-platform';
+import FILES_AND_UPLOAD_TYPE_FILTERS from '../../generic/constants';
+
+ensureConfig([
+  'STUDIO_BASE_URL',
+], 'Course Apps API service');
+
+export const updateFileValues = (files) => {
+  const updatedFiles = [];
+  files.forEach(file => {
+    let wrapperType = 'other';
+    if (FILES_AND_UPLOAD_TYPE_FILTERS.images.includes(file.contentType)) {
+      wrapperType = 'image';
+    } else if (FILES_AND_UPLOAD_TYPE_FILTERS.documents.includes(file.contentType)) {
+      wrapperType = 'document';
+    } else if (FILES_AND_UPLOAD_TYPE_FILTERS.code.includes(file.contentType)) {
+      wrapperType = 'code';
+    } else if (FILES_AND_UPLOAD_TYPE_FILTERS.audio.includes(file.contentType)) {
+      wrapperType = 'audio';
+    }
+
+    const { dateAdded, locked, usageLocations } = file;
+    const utcDateString = dateAdded.replace(/\bat\b/g, '');
+    const utcDateTime = new Date(utcDateString).toString();
+    const lockStatus = locked ? 'locked' : 'public';
+    const activeStatus = usageLocations?.length > 0 ? 'active' : 'inactive';
+
+    updatedFiles.push({
+      ...file,
+      wrapperType,
+      lockStatus,
+      activeStatus,
+      dateAdded: utcDateTime,
+    });
+  });
+
+  return updatedFiles;
+};
+
+export const getSrc = ({ thumbnail, wrapperType, externalUrl }) => {
+  if (thumbnail) {
+    return externalUrl || `${getConfig().STUDIO_BASE_URL}${thumbnail}`;
+  }
+  switch (wrapperType) {
+    case 'document':
+      return InsertDriveFile;
+    case 'code':
+      return Terminal;
+    case 'audio':
+      return AudioFile;
+    default:
+      return InsertDriveFile;
+  }
+};
+
+export const getUploadConflicts = (filesToUpload, assets) => {
+  const filesFound = assets.map(item => item.displayName);
+  const conflicts = {};
+  const newFiles = [];
+  filesToUpload.forEach(file => {
+    if (filesFound.includes(file.name)) {
+      conflicts[file.name] = file;
+    } else {
+      newFiles.push(file);
+    }
+  });
+  return [conflicts, newFiles];
+};
diff --git a/src/files-and-videos/files-page/factories/mockApiResponses.jsx b/src/files-and-videos/files-page/factories/mockApiResponses.jsx
new file mode 100644
index 0000000000..80249a02a9
--- /dev/null
+++ b/src/files-and-videos/files-page/factories/mockApiResponses.jsx
@@ -0,0 +1,158 @@
+import { RequestStatus } from '../../../data/constants';
+
+export const courseId = 'course-v1:edX+DemoX+Demo_Course';
+
+export const initialState = {
+  courseDetail: {
+    courseId,
+    status: 'sucessful',
+  },
+  assets: {
+    assetIds: ['mOckID1'],
+    loadingStatus: 'successful',
+    updatingStatus: '',
+    deletingStatus: '',
+    addingStatus: '',
+    usageStatus: '',
+    errors: {
+      add: [],
+      delete: [],
+      lock: [],
+      download: [],
+      usageMetrics: [],
+      loading: '',
+    },
+    duplicateFiles: {},
+  },
+  models: {
+    assets: {
+      mOckID1: {
+        id: 'mOckID0',
+        displayName: 'mOckID0',
+        locked: true,
+        externalUrl: 'static_tab_1',
+        portableUrl: '',
+        contentType: 'application/pdf',
+        wrapperType: 'document',
+        dateAdded: '',
+        thumbnail: null,
+        fileSize: 1234567,
+      },
+    },
+  },
+};
+
+export const generateFetchAssetApiResponse = () => ({
+  assets: [
+    {
+      id: 'mOckID1',
+      displayName: 'mOckID1',
+      locked: true,
+      externalUrl: 'static_tab_1',
+      portableUrl: '',
+      contentType: 'image/png',
+      dateAdded: '',
+      thumbnail: '/asset',
+      fileSize: 123,
+    },
+    {
+      id: 'mOckID5',
+      displayName: 'mOckID5',
+      locked: false,
+      externalUrl: 'static_tab_1',
+      portableUrl: '',
+      contentType: 'application/json',
+      dateAdded: 'Aug 13, 2023 at 22:08 UTC',
+      thumbnail: null,
+    },
+    {
+      id: 'mOckID3',
+      displayName: 'mOckID3',
+      locked: false,
+      externalUrl: 'static_tab_1',
+      portableUrl: '',
+      contentType: 'application/pdf',
+      dateAdded: 'Aug 17, 2023 at 22:08 UTC',
+      thumbnail: null,
+      fileSize: 1234,
+    },
+    {
+      id: 'mOckID4',
+      displayName: 'mOckID4',
+      locked: false,
+      externalUrl: 'static_tab_1',
+      portableUrl: '',
+      contentType: 'audio/mp3',
+      dateAdded: '',
+      thumbnail: null,
+    },
+    {
+      id: 'mOckID6',
+      displayName: 'mOckID6',
+      locked: false,
+      externalUrl: 'static_tab_1',
+      portableUrl: '',
+      contentType: 'application/octet-stream',
+      dateAdded: '',
+      thumbnail: null,
+      fileSize: 0,
+    },
+    {
+      id: 'mOckID6-2',
+      displayName: 'mOckID6',
+      locked: false,
+      externalUrl: 'static_tab_1',
+      portableUrl: '',
+      contentType: 'application/octet-stream',
+      dateAdded: 'May 17, 2023 at 22:08 UTC',
+      thumbnail: null,
+    },
+  ],
+  totalCount: 51,
+});
+
+export const generateNextPageResponse = () => ({
+  assets: [
+    {
+      id: 'mOckID6-3',
+      displayName: 'mOckID6-3',
+      locked: false,
+      externalUrl: 'static_tab_1',
+      portableUrl: 'May 17, 2023 at 22:08 UTC',
+      contentType: 'application/octet-stream',
+      dateAdded: '',
+      thumbnail: null,
+    },
+  ],
+});
+
+export const generateEmptyApiResponse = () => ({
+  assets: [],
+  totalCount: 0,
+});
+
+export const generateNewAssetApiResponse = () => ({
+  asset: {
+    display_name: 'download.png',
+    content_type: 'image/png',
+    date_added: 'Jul 26, 2023 at 14:07 UTC',
+    url: '/download.png',
+    external_url: 'http://download.png',
+    portable_url: '/static/download.png',
+    thumbnail: '/download.png',
+    locked: false,
+    id: 'mOckID2',
+    fileSize: 1234,
+  },
+});
+
+export const getStatusValue = (status) => {
+  switch (status) {
+    case RequestStatus.DENIED:
+      return 403;
+    case RequestStatus.FAILED:
+      return 404;
+    default:
+      return 200;
+  }
+};
diff --git a/src/files-and-videos/files-page/index.js b/src/files-and-videos/files-page/index.js
new file mode 100644
index 0000000000..05939abc4b
--- /dev/null
+++ b/src/files-and-videos/files-page/index.js
@@ -0,0 +1,5 @@
+import FilesPage from './FilesPage';
+import FileInfoModalSidebar from './FileInfoModalSidebar';
+
+export default FilesPage;
+export { FileInfoModalSidebar };
diff --git a/src/files-and-videos/files-page/messages.js b/src/files-and-videos/files-page/messages.js
new file mode 100644
index 0000000000..a6082edcb0
--- /dev/null
+++ b/src/files-and-videos/files-page/messages.js
@@ -0,0 +1,125 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  heading: {
+    id: 'course-authoring.files-and-uploads.heading',
+    defaultMessage: 'Files',
+    description: 'Title for the page',
+  },
+  thumbnailAltMessage: {
+    id: 'course-authoring.files-and-uploads.thumbnail.alt',
+    defaultMessage: '{displayName} file preview',
+    description: 'Alternative text for thumbnail',
+  },
+  copyStudioUrlTitle: {
+    id: 'course-authoring.files-and-uploads.file-info.copyStudioUrl.title',
+    defaultMessage: 'Copy Studio Url',
+    description: 'Label for Copy Studio URL button in info modal',
+  },
+  copyWebUrlTitle: {
+    id: 'course-authoring.files-and-uploads.file-info.copyWebUrl.title',
+    defaultMessage: 'Copy Web Url',
+    description: 'Label for Copy Web URL button in info modal',
+  },
+  dateAddedTitle: {
+    id: 'course-authoring.files-and-uploads.file-info.dateAdded.title',
+    defaultMessage: 'Date added',
+    description: 'Title for date added section in info modal',
+  },
+  fileSizeTitle: {
+    id: 'course-authoring.files-and-uploads.file-info.fileSize.title',
+    defaultMessage: 'File size',
+    description: 'Title for file size section in info modal',
+  },
+  studioUrlTitle: {
+    id: 'course-authoring.files-and-uploads.file-info.studioUrl.title',
+    defaultMessage: 'Studio URL',
+    description: 'Title for studio url section in info modal',
+  },
+  webUrlTitle: {
+    id: 'course-authoring.files-and-uploads.file-info.webUrl.title',
+    defaultMessage: 'Web URL',
+    description: 'Title for web url section in info modal',
+  },
+  lockFileTitle: {
+    id: 'course-authoring.files-and-uploads.file-info.lockFile.title',
+    defaultMessage: 'Lock file',
+    description: 'Label for lock file checkbox in info modal',
+  },
+  activeCheckboxLabel: {
+    id: 'course-authoring.files-and-videos.file-info.activeCheckbox.label',
+    defaultMessage: 'Active',
+    description: 'Label for active checkbox in filter section of sort and filter modal',
+  },
+  inactiveCheckboxLabel: {
+    id: 'course-authoring.files-and-videos.file-info.inactiveCheckbox.label',
+    defaultMessage: 'Inactive',
+    description: 'Label for inactive checkbox in filter section of sort and filter modal',
+  },
+  lockedCheckboxLabel: {
+    id: 'course-authoring.files-and-videos.sort-and-filter.modal.filter.lockedCheckbox.label',
+    defaultMessage: 'Locked',
+    description: 'Label for locked checkbox in filter section of sort and filter modal',
+  },
+  publicCheckboxLabel: {
+    id: 'course-authoring.files-and-videos.sort-and-filter.modal.filter.publicCheckbox.label',
+    defaultMessage: 'Public',
+    description: 'Label for public checkbox in filter section of sort and filter modal',
+  },
+  codeCheckboxLabel: {
+    id: 'course-authoring.files-and-videos.sort-and-filter.modal.filter.codeCheckbox.label',
+    defaultMessage: 'Code',
+    description: 'Label for code checkbox in filter section of sort and filter modal',
+  },
+  imageCheckboxLabel: {
+    id: 'course-authoring.files-and-videos.sort-and-filter.modal.filter.imageCheckbox.label',
+    defaultMessage: 'Images',
+    description: 'Label for images checkbox in filter section of sort and filter modal',
+  },
+  documentCheckboxLabel: {
+    id: 'course-authoring.files-and-videos.sort-and-filter.modal.filter.documentCheckbox.label',
+    defaultMessage: 'Documents',
+    description: 'Label for documents checkbox in filter section of sort and filter modal',
+  },
+  audioCheckboxLabel: {
+    id: 'course-authoring.files-and-videos.sort-and-filter.modal.filter.audioCheckbox.label',
+    defaultMessage: 'Audio',
+    description: 'Label for audio checkbox in filter section of sort and filter modal',
+  },
+  otherCheckboxLabel: {
+    id: 'course-authoring.files-and-videos.sort-and-filter.modal.filter.otherCheckbox.label',
+    defaultMessage: 'Other',
+    description: 'Label for other checkbox in filter section of sort and filter modal',
+  },
+  overwriteConfirmMessage: {
+    id: 'course-authoring.files-and-videos.overwrite.modal.confirmation-message',
+    defaultMessage: 'Some of the uploaded files already exist in this course. Do you want to overwrite the following files?',
+    description: 'The message displayed in the modal shown when uploading files with pre-existing names',
+  },
+  overwriteModalTitle: {
+    id: 'course-authoring.files-and-videos.overwrite.modal.title',
+    defaultMessage: 'Overwrite files',
+    description: 'The title of the modal to confirm overwriting the files',
+  },
+  confirmOverwriteButtonLabel: {
+    id: 'course-authoring.files-and-videos.overwrite.modal.overwrite-button.label',
+    defaultMessage: 'Overwrite',
+    description: 'The message displayed in the button to confirm overwriting the files',
+  },
+  cancelOverwriteButtonLabel: {
+    id: 'course-authoring.files-and-videos.overwrite.modal.cancel-button.label',
+    defaultMessage: 'Cancel',
+    description: 'The message displayed in the button to confirm cancelling the upload',
+  },
+  lockFileTooltipContent: {
+    id: 'course-authoring.files-and-uploads.file-info.lockFile.tooltip.content',
+    defaultMessage: `By default, anyone can access a file you upload if
+      they know the web URL, even if they are not enrolled in your course.
+      You can prevent outside access to a file by locking the file. When
+      you lock a file, the web URL only allows learners who are enrolled
+      in your course and signed in to access the file.`,
+    description: 'Tooltip message for the lock icon in the table view of files',
+  },
+});
+
+export default messages;
diff --git a/src/files-and-videos/generic/ApiStatusToast.jsx b/src/files-and-videos/generic/ApiStatusToast.jsx
new file mode 100644
index 0000000000..8d1f0f73ba
--- /dev/null
+++ b/src/files-and-videos/generic/ApiStatusToast.jsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { Toast } from '@openedx/paragon';
+import messages from './messages';
+
+const ApiStatusToast = ({
+  actionType,
+  selectedRowCount,
+  isOpen,
+  setClose,
+  setSelectedRows,
+  fileType,
+  // injected
+  intl,
+}) => {
+  const handleClose = () => {
+    setSelectedRows([]);
+    setClose();
+  };
+
+  return (
+    <Toast
+      show={isOpen}
+      onClose={handleClose}
+    >
+      {intl.formatMessage(messages.apiStatusToastMessage, { actionType, selectedRowCount, fileType })}
+    </Toast>
+  );
+};
+
+ApiStatusToast.propTypes = {
+  actionType: PropTypes.string.isRequired,
+  selectedRowCount: PropTypes.number.isRequired,
+  isOpen: PropTypes.bool.isRequired,
+  setClose: PropTypes.func.isRequired,
+  setSelectedRows: PropTypes.func.isRequired,
+  fileType: PropTypes.string.isRequired,
+  // injected
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(ApiStatusToast);
diff --git a/src/files-and-videos/generic/DeleteConfirmationModal.jsx b/src/files-and-videos/generic/DeleteConfirmationModal.jsx
new file mode 100644
index 0000000000..bbcb3ab7e1
--- /dev/null
+++ b/src/files-and-videos/generic/DeleteConfirmationModal.jsx
@@ -0,0 +1,132 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { getConfig } from '@edx/frontend-platform';
+import {
+  ActionRow,
+  AlertModal,
+  Button,
+  Collapsible,
+  Hyperlink,
+  Truncate,
+} from '@openedx/paragon';
+
+import messages from './messages';
+
+const DeleteConfirmationModal = ({
+  isDeleteConfirmationOpen,
+  closeDeleteConfirmation,
+  handleBulkDelete,
+  selectedRows,
+  fileType,
+  // injected
+  intl,
+}) => {
+  const firstSelectedRow = selectedRows[0]?.original;
+  let activeContentRows = [];
+  if (Array.isArray(selectedRows)) {
+    activeContentRows = selectedRows.filter(row => row.original?.activeStatus === 'active');
+  }
+  const isDeletingCourseContent = activeContentRows.length > 0;
+
+  const deletedCourseContent = activeContentRows.map(({ original }) => (
+    <li style={{ listStyle: 'None' }} key={original.id}>
+      <Collapsible
+        styling="basic"
+        title={(
+          <h3 className="h5 m-n2">
+            <Truncate lines={1}>
+              {original.displayName}
+            </Truncate>
+          </h3>
+        )}
+        data-testid={`collapsible-${original.id}`}
+      >
+        <ul className="px-2 py-0">
+          {original.usageLocations.map(location => (
+            <li key={`usage-location-${location.displayLocation}`} style={{ listStyle: 'square' }}>
+              <Hyperlink destination={`${getConfig().STUDIO_BASE_URL}${location.url}`} target="_blank">
+                {location.displayLocation}
+              </Hyperlink>
+            </li>
+          ))}
+        </ul>
+      </Collapsible>
+    </li>
+  ));
+
+  return (
+    <AlertModal
+      className="small"
+      title={intl.formatMessage(
+        messages.deleteConfirmationTitle,
+        {
+          fileName: firstSelectedRow?.displayName,
+          fileNumber: selectedRows.length,
+          fileType,
+        },
+      )}
+      isOpen={isDeleteConfirmationOpen}
+      onClose={closeDeleteConfirmation}
+      footerNode={(
+        <ActionRow>
+          <Button variant="tertiary" onClick={closeDeleteConfirmation}>
+            {intl.formatMessage(messages.cancelButtonLabel)}
+          </Button>
+          <Button onClick={handleBulkDelete}>
+            {intl.formatMessage(messages.deleteFileButtonLabel)}
+          </Button>
+        </ActionRow>
+      )}
+    >
+      {intl.formatMessage(
+        messages.deleteConfirmationMessage,
+        {
+          fileName: firstSelectedRow?.displayName,
+          fileNumber: selectedRows.length,
+          fileType,
+        },
+      )}
+      {isDeletingCourseContent && (
+        <div className="mt-3">
+          {intl.formatMessage(
+            messages.deleteConfirmationUsageMessage,
+            {
+              fileNumber: activeContentRows.length,
+              fileType,
+            },
+          )}
+          <ul className="p-0">
+            {deletedCourseContent}
+          </ul>
+        </div>
+      )}
+    </AlertModal>
+  );
+};
+
+DeleteConfirmationModal.defaultProps = {
+  selectedRows: [],
+};
+
+DeleteConfirmationModal.propTypes = {
+  selectedRows: PropTypes.arrayOf(PropTypes.shape({
+    original: PropTypes.shape({
+      id: PropTypes.string,
+      displayName: PropTypes.string,
+      activeStatus: PropTypes.string,
+      usageLocations: PropTypes.arrayOf(PropTypes.shape({
+        url: PropTypes.string,
+        displayLocation: PropTypes.string,
+      })),
+    }),
+  })),
+  isDeleteConfirmationOpen: PropTypes.bool.isRequired,
+  closeDeleteConfirmation: PropTypes.func.isRequired,
+  handleBulkDelete: PropTypes.func.isRequired,
+  fileType: PropTypes.string.isRequired,
+  // injected
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(DeleteConfirmationModal);
diff --git a/src/files-and-videos/generic/DeleteConfirmationModal.test.jsx b/src/files-and-videos/generic/DeleteConfirmationModal.test.jsx
new file mode 100644
index 0000000000..669e497b70
--- /dev/null
+++ b/src/files-and-videos/generic/DeleteConfirmationModal.test.jsx
@@ -0,0 +1,88 @@
+import {
+  render,
+  screen,
+  within,
+} from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import DeleteConfirmationModal from './DeleteConfirmationModal';
+
+const defaultProps = {
+  isDeleteConfirmationOpen: true,
+  closeDeleteConfirmation: jest.fn(),
+  handleBulkDelete: jest.fn(),
+  selectedRows: [{
+    original: {
+      displayName: 'test',
+      activeStatus: 'active',
+      id: 'file-test',
+      usageLocations: [{
+        displayLocation: 'unit', url: 'unit/url',
+      }],
+    },
+  }],
+  fileType: 'file',
+};
+
+const renderComponent = (props) => {
+  render(
+    <IntlProvider locale="en">
+      <DeleteConfirmationModal {...props} />
+    </IntlProvider>,
+  );
+};
+
+describe('DeleteConfirmationModal', () => {
+  it('should show file name in title', () => {
+    renderComponent(defaultProps);
+    const { displayName } = defaultProps.selectedRows[0].original;
+
+    expect(screen.getByText(`Delete ${displayName}`)).toBeInTheDocument();
+  });
+
+  it('should show number of files in title', () => {
+    const props = {
+      ...defaultProps,
+      selectedRows: [
+        ...defaultProps.selectedRows,
+        { original: { displayName: 'test 2', activeStatus: 'inactive' } },
+      ],
+    };
+
+    renderComponent(props);
+    const numberOfFiles = props.selectedRows.length;
+
+    expect(screen.getByText(`Delete ${numberOfFiles} ${defaultProps.fileType}s`)).toBeInTheDocument();
+  });
+
+  it('should not show delete confirmation usage list', () => {
+    const props = {
+      ...defaultProps,
+      selectedRows: [],
+    };
+    renderComponent(props);
+
+    expect(screen.queryByRole('list')).toBeNull();
+  });
+
+  it('should show test file in delete confirmation usage list', () => {
+    renderComponent(defaultProps);
+    const deleteUsageList = screen.getByRole('list');
+
+    expect(within(deleteUsageList).getByTestId('collapsible-file-test')).toBeVisible();
+  });
+
+  it('should not show test file in delete confirmation usage list', () => {
+    const props = {
+      ...defaultProps,
+      selectedRows: [
+        ...defaultProps.selectedRows,
+        { original: { displayName: 'test 2', activeStatus: 'inactive', id: 'file-test2' } },
+      ],
+    };
+    renderComponent(props);
+    const deleteUsageList = screen.getByRole('list');
+
+    expect(within(deleteUsageList).queryByTestId('collapsible-file-test2')).toBeNull();
+  });
+});
diff --git a/src/files-and-videos/generic/EditFileErrors.jsx b/src/files-and-videos/generic/EditFileErrors.jsx
new file mode 100644
index 0000000000..a964fbc9da
--- /dev/null
+++ b/src/files-and-videos/generic/EditFileErrors.jsx
@@ -0,0 +1,100 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { Alert } from '@openedx/paragon';
+import ErrorAlert from '../../editors/sharedComponents/ErrorAlerts/ErrorAlert';
+import { RequestStatus } from '../../data/constants';
+import messages from './messages';
+
+const EditFileErrors = ({
+  resetErrors,
+  errorMessages,
+  addFileStatus,
+  deleteFileStatus,
+  updateFileStatus,
+  loadingStatus,
+  // injected
+  intl,
+}) => (
+  <>
+    <ErrorAlert
+      hideHeading={false}
+      dismissError={() => resetErrors({ errorType: 'loading' })}
+      isError={loadingStatus === RequestStatus.FAILED || loadingStatus === RequestStatus.PARTIAL_FAILURE}
+    >
+      {intl.formatMessage(messages.errorAlertMessage, { message: errorMessages.loading })}
+    </ErrorAlert>
+    <ErrorAlert
+      hideHeading
+      dismissError={() => resetErrors({ errorType: 'add' })}
+      isError={addFileStatus === RequestStatus.FAILED}
+    >
+      <Alert.Heading>
+        {intl.formatMessage(messages.uploadErrorAlertTitle)}
+      </Alert.Heading>
+      <ul className="p-0">
+        {errorMessages.add.map(message => (
+          <li key={`add-error-${message}`} style={{ listStyle: 'none' }}>
+            {intl.formatMessage(messages.errorAlertMessage, { message })}
+          </li>
+        ))}
+      </ul>
+    </ErrorAlert>
+    <ErrorAlert
+      hideHeading={false}
+      dismissError={() => resetErrors({ errorType: 'delete' })}
+      isError={deleteFileStatus === RequestStatus.FAILED}
+    >
+      <ul className="p-0">
+        {errorMessages.delete.map(message => (
+          <li key={`delete-error-${message}`} style={{ listStyle: 'none' }}>
+            {intl.formatMessage(messages.errorAlertMessage, { message })}
+          </li>
+        ))}
+      </ul>
+    </ErrorAlert>
+    <ErrorAlert
+      hideHeading={false}
+      dismissError={() => resetErrors({ errorType: 'update' })}
+      isError={updateFileStatus === RequestStatus.FAILED}
+    >
+      <ul className="p-0">
+        {errorMessages.lock?.map(message => (
+          <li key={`lock-error-${message}`} style={{ listStyle: 'none' }}>
+            {intl.formatMessage(messages.errorAlertMessage, { message })}
+          </li>
+        ))}
+        {errorMessages.download.map(message => (
+          <li key={`download-error-${message}`} style={{ listStyle: 'none' }}>
+            {intl.formatMessage(messages.errorAlertMessage, { message })}
+          </li>
+        ))}
+        {errorMessages.thumbnail?.map(message => (
+          <li key={`add-thumbnail-error-${message}`} style={{ listStyle: 'none' }}>
+            {intl.formatMessage(messages.errorAlertMessage, { message })}
+          </li>
+        ))}
+      </ul>
+    </ErrorAlert>
+  </>
+);
+
+EditFileErrors.propTypes = {
+  resetErrors: PropTypes.func.isRequired,
+  errorMessages: PropTypes.shape({
+    add: PropTypes.arrayOf(PropTypes.string).isRequired,
+    delete: PropTypes.arrayOf(PropTypes.string).isRequired,
+    lock: PropTypes.arrayOf(PropTypes.string),
+    download: PropTypes.arrayOf(PropTypes.string).isRequired,
+    thumbnail: PropTypes.arrayOf(PropTypes.string),
+    loading: PropTypes.string.isRequired,
+  }).isRequired,
+  addFileStatus: PropTypes.string.isRequired,
+  deleteFileStatus: PropTypes.string.isRequired,
+  updateFileStatus: PropTypes.string.isRequired,
+  loadingStatus: PropTypes.string.isRequired,
+  // injected
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(EditFileErrors);
diff --git a/src/files-and-videos/generic/FileInput.jsx b/src/files-and-videos/generic/FileInput.jsx
new file mode 100644
index 0000000000..c953994d22
--- /dev/null
+++ b/src/files-and-videos/generic/FileInput.jsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { getSupportedFormats } from '../videos-page/data/utils';
+
+export const useFileInput = ({
+  onAddFile,
+  setSelectedRows,
+  setAddOpen,
+}) => {
+  const ref = React.useRef();
+  const click = () => ref.current.click();
+  const addFile = (e) => {
+    const { files } = e.target;
+    setSelectedRows([...files]);
+    onAddFile(Object.values(files));
+    setAddOpen();
+    e.target.value = '';
+  };
+  return {
+    click,
+    addFile,
+    ref,
+  };
+};
+
+const FileInput = ({ fileInput: hook, supportedFileFormats, allowMultiple }) => (
+  <input
+    accept={getSupportedFormats(supportedFileFormats)}
+    aria-label="file-input"
+    className="upload d-none"
+    onChange={hook.addFile}
+    ref={hook.ref}
+    type="file"
+    multiple={allowMultiple}
+  />
+);
+
+FileInput.propTypes = {
+  fileInput: PropTypes.shape({
+    addFile: PropTypes.func,
+    ref: PropTypes.oneOfType([
+      // Either a function
+      PropTypes.func,
+      // Or the instance of a DOM native element (see the note about SSR)
+      PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
+    ]),
+  }).isRequired,
+  supportedFileFormats: PropTypes.oneOfType([
+    PropTypes.shape({}),
+    PropTypes.arrayOf(PropTypes.string),
+  ]),
+  allowMultiple: PropTypes.bool,
+};
+
+FileInput.defaultProps = {
+  supportedFileFormats: null,
+  allowMultiple: true,
+};
+
+export default FileInput;
diff --git a/src/files-and-videos/generic/FileMenu.jsx b/src/files-and-videos/generic/FileMenu.jsx
new file mode 100644
index 0000000000..36ea4da174
--- /dev/null
+++ b/src/files-and-videos/generic/FileMenu.jsx
@@ -0,0 +1,96 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import {
+  Dropdown,
+  IconButton,
+  Icon,
+} from '@openedx/paragon';
+import { MoreHoriz } from '@openedx/paragon/icons';
+import messages from './messages';
+
+const FileMenu = ({
+  externalUrl,
+  handleLock,
+  locked,
+  onDownload,
+  openAssetInfo,
+  openDeleteConfirmation,
+  portableUrl,
+  id,
+  fileType,
+  // injected
+  intl,
+}) => (
+  <Dropdown data-testid={`file-menu-dropdown-${id}`}>
+    <Dropdown.Toggle
+      id={`file-menu-dropdown-${id}`}
+      as={IconButton}
+      src={MoreHoriz}
+      iconAs={Icon}
+      variant="primary"
+      alt="file-menu-toggle"
+    />
+    <Dropdown.Menu>
+      {fileType === 'video' ? (
+        <Dropdown.Item
+          onClick={() => navigator.clipboard.writeText(id)}
+        >
+          {intl.formatMessage(messages.copyVideoIdTitle)}
+        </Dropdown.Item>
+      ) : (
+        <>
+          <Dropdown.Item
+            onClick={() => navigator.clipboard.writeText(portableUrl)}
+          >
+            {intl.formatMessage(messages.copyStudioUrlTitle)}
+          </Dropdown.Item>
+          <Dropdown.Item
+            onClick={() => navigator.clipboard.writeText(externalUrl)}
+          >
+            {intl.formatMessage(messages.copyWebUrlTitle)}
+          </Dropdown.Item>
+          <Dropdown.Item onClick={handleLock}>
+            {locked ? intl.formatMessage(messages.unlockMenuTitle) : intl.formatMessage(messages.lockMenuTitle)}
+          </Dropdown.Item>
+        </>
+      )}
+      <Dropdown.Item onClick={onDownload}>
+        {intl.formatMessage(messages.downloadTitle)}
+      </Dropdown.Item>
+      <Dropdown.Item onClick={openAssetInfo}>
+        {intl.formatMessage(messages.infoTitle)}
+      </Dropdown.Item>
+      <Dropdown.Divider />
+      <Dropdown.Item
+        data-testid="open-delete-confirmation-button"
+        onClick={openDeleteConfirmation}
+      >
+        {intl.formatMessage(messages.deleteTitle)}
+      </Dropdown.Item>
+    </Dropdown.Menu>
+  </Dropdown>
+);
+
+FileMenu.propTypes = {
+  externalUrl: PropTypes.string,
+  handleLock: PropTypes.func,
+  locked: PropTypes.bool,
+  onDownload: PropTypes.func.isRequired,
+  openAssetInfo: PropTypes.func.isRequired,
+  openDeleteConfirmation: PropTypes.func.isRequired,
+  portableUrl: PropTypes.string,
+  id: PropTypes.string.isRequired,
+  fileType: PropTypes.string.isRequired,
+  // injected
+  intl: intlShape.isRequired,
+};
+
+FileMenu.defaultProps = {
+  externalUrl: null,
+  handleLock: null,
+  locked: null,
+  portableUrl: null,
+};
+
+export default injectIntl(FileMenu);
diff --git a/src/files-and-videos/generic/FileTable.jsx b/src/files-and-videos/generic/FileTable.jsx
new file mode 100644
index 0000000000..33a770ffb8
--- /dev/null
+++ b/src/files-and-videos/generic/FileTable.jsx
@@ -0,0 +1,326 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import isEmpty from 'lodash/isEmpty';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import {
+  CardView,
+  DataTable,
+  Dropzone,
+  TextFilter,
+  useToggle,
+} from '@openedx/paragon';
+
+import { RequestStatus } from '../../data/constants';
+import { sortFiles } from './utils';
+import messages from './messages';
+
+import InfoModal from './InfoModal';
+import FileInput, { useFileInput } from './FileInput';
+import {
+  GalleryCard,
+  TableActions,
+  RowStatus,
+  MoreInfoColumn,
+  FilterStatus,
+  Footer,
+} from './table-components';
+import ApiStatusToast from './ApiStatusToast';
+import DeleteConfirmationModal from './DeleteConfirmationModal';
+
+const FileTable = ({
+  files,
+  data,
+  handleAddFile,
+  handleLockFile,
+  handleDeleteFile,
+  handleDownloadFile,
+  handleUsagePaths,
+  handleErrorReset,
+  handleFileOrder,
+  tableColumns,
+  maxFileSize,
+  thumbnailPreview,
+  infoModalSidebar,
+  // injected
+  intl,
+}) => {
+  const defaultVal = 'card';
+  const pageCount = Math.ceil(files.length / 50);
+  const columnSizes = {
+    xs: 12,
+    sm: 6,
+    md: 4,
+    lg: 3,
+    xl: 2,
+  };
+  const [currentView, setCurrentView] = useState(defaultVal);
+  const [isDeleteOpen, setDeleteOpen, setDeleteClose] = useToggle(false);
+  const [isDownloadOpen, setDownloadOpen, setDownloadClose] = useToggle(false);
+  const [isAssetInfoOpen, openAssetInfo, closeAssetinfo] = useToggle(false);
+  const [isAddOpen, setAddOpen, setAddClose] = useToggle(false);
+  const [selectedRows, setSelectedRows] = useState([]);
+  const [isDeleteConfirmationOpen, openDeleteConfirmation, closeDeleteConfirmation] = useToggle(false);
+  const [initialState, setInitialState] = useState({
+    filters: [],
+    hiddenColumns: [],
+    pageIndex: 0,
+    pageSize: 50,
+    selectedRowIds: {},
+    sortBy: [],
+  });
+
+  const {
+    loadingStatus,
+    usagePathStatus,
+    usageErrorMessages,
+    encodingsDownloadUrl,
+    supportedFileFormats,
+    fileType,
+  } = data;
+
+  useEffect(() => {
+    if (!isEmpty(selectedRows) && Object.keys(selectedRows[0]).length > 0) {
+      const updatedRows = [];
+      selectedRows.forEach(row => {
+        const currentFile = row.original;
+        if (currentFile) {
+          const [updatedFile] = files.filter(file => file.id === currentFile?.id);
+          updatedRows.push({ original: updatedFile });
+        }
+      });
+      setSelectedRows(updatedRows);
+    }
+  }, [files]);
+
+  const fileInputControl = useFileInput({
+    onAddFile: (uploads) => handleAddFile(uploads),
+    setSelectedRows,
+    setAddOpen,
+  });
+  const handleDropzoneAsset = ({ fileData, handleError }) => {
+    try {
+      const file = fileData.get('file');
+      handleAddFile([file]);
+    } catch (error) {
+      handleError(error);
+    }
+  };
+
+  const handleSort = (sortType) => {
+    const newFileIdOrder = sortFiles(files, sortType);
+    handleFileOrder({ newFileIdOrder, sortType });
+  };
+
+  const handleBulkDelete = () => {
+    closeDeleteConfirmation();
+    setDeleteOpen();
+    handleErrorReset({ errorType: 'delete' });
+    const fileIdsToDelete = selectedRows.map(row => row.original.id);
+    fileIdsToDelete.forEach(id => handleDeleteFile(id));
+  };
+
+  const handleBulkDownload = useCallback(async (selectedFlatRows) => {
+    handleErrorReset({ errorType: 'download' });
+    setSelectedRows(selectedFlatRows);
+    setDownloadOpen();
+    handleDownloadFile(selectedFlatRows);
+  }, []);
+
+  const handleOpenDeleteConfirmation = (selectedFlatRows) => {
+    setSelectedRows(selectedFlatRows);
+    openDeleteConfirmation();
+  };
+
+  const handleOpenFileInfo = (original) => {
+    handleErrorReset({ errorType: 'usageMetrics' });
+    setSelectedRows([{ original }]);
+    handleUsagePaths(original);
+    openAssetInfo();
+  };
+
+  const headerActions = ({ selectedFlatRows }) => (
+    <TableActions
+      {...{
+        selectedFlatRows,
+        fileInputControl,
+        encodingsDownloadUrl,
+        handleSort,
+        handleBulkDownload,
+        handleOpenDeleteConfirmation,
+        supportedFileFormats,
+        fileType,
+        setInitialState,
+      }}
+    />
+  );
+
+  const fileCard = ({ className, original }) => (
+    <GalleryCard
+      {...{
+        handleLockFile,
+        handleBulkDownload,
+        handleOpenDeleteConfirmation,
+        handleOpenFileInfo,
+        thumbnailPreview,
+        className,
+        original,
+        fileType,
+      }}
+    />
+  );
+
+  const moreInfoColumn = {
+    id: 'moreInfo',
+    Header: '',
+    Cell: ({ row }) => MoreInfoColumn({
+      row,
+      handleLock: handleLockFile,
+      handleBulkDownload,
+      handleOpenFileInfo,
+      handleOpenDeleteConfirmation,
+      fileType,
+    }),
+  };
+
+  const hasMoreInfoColumn = tableColumns.filter(col => col.id === 'moreInfo').length === 1;
+  if (!hasMoreInfoColumn) {
+    tableColumns.push({ ...moreInfoColumn });
+  }
+
+  return (
+    <div className="files-table">
+      <DataTable
+        isFilterable
+        isLoading={loadingStatus === RequestStatus.IN_PROGRESS}
+        isSortable
+        isSelectable
+        isPaginated
+        defaultColumnValues={{ Filter: TextFilter }}
+        dataViewToggleOptions={{
+          isDataViewToggleEnabled: true,
+          onDataViewToggle: val => setCurrentView(val),
+          defaultActiveStateValue: defaultVal,
+          togglePlacement: 'left',
+        }}
+        initialState={initialState}
+        tableActions={headerActions}
+        bulkActions={headerActions}
+        columns={tableColumns}
+        itemCount={files.length}
+        pageCount={pageCount}
+        data={files}
+        FilterStatusComponent={FilterStatus}
+        RowStatusComponent={RowStatus}
+      >
+        {isEmpty(files) && loadingStatus !== RequestStatus.IN_PROGRESS ? (
+          <Dropzone
+            data-testid="files-dropzone"
+            accept={supportedFileFormats}
+            onProcessUpload={handleDropzoneAsset}
+            maxSize={maxFileSize}
+            errorMessages={{
+              invalidSize: intl.formatMessage(messages.fileSizeError),
+              multipleDragged: 'Dropzone can only upload a single file.',
+            }}
+          />
+        ) : (
+          <div data-testid="files-data-table" className="bg-light-200">
+            <DataTable.TableControlBar />
+            <hr className="mb-5 border-light-700" />
+            { currentView === 'card' && <CardView CardComponent={fileCard} columnSizes={columnSizes} selectionPlacement="left" skeletonCardCount={6} /> }
+            { currentView === 'list' && <DataTable.Table /> }
+            <DataTable.EmptyTable content={intl.formatMessage(messages.noResultsFoundMessage)} />
+            <Footer />
+          </div>
+        )}
+
+        <ApiStatusToast
+          actionType={intl.formatMessage(messages.apiStatusDeletingAction)}
+          selectedRowCount={selectedRows.length}
+          isOpen={isDeleteOpen}
+          setClose={setDeleteClose}
+          setSelectedRows={setSelectedRows}
+          fileType={fileType}
+        />
+
+        {fileType === 'files' && (
+          <ApiStatusToast
+            actionType={intl.formatMessage(messages.apiStatusAddingAction)}
+            selectedRowCount={selectedRows.length}
+            isOpen={isAddOpen}
+            setClose={setAddClose}
+            setSelectedRows={setSelectedRows}
+            fileType={fileType}
+          />
+        )}
+
+        <ApiStatusToast
+          actionType={intl.formatMessage(messages.apiStatusDownloadingAction)}
+          selectedRowCount={selectedRows.length}
+          isOpen={isDownloadOpen}
+          setClose={setDownloadClose}
+          setSelectedRows={setSelectedRows}
+          fileType={fileType}
+        />
+      </DataTable>
+      <FileInput key="generic-file-upload" fileInput={fileInputControl} supportedFileFormats={supportedFileFormats} />
+      {!isEmpty(selectedRows) && (
+        <InfoModal
+          file={selectedRows[0].original}
+          onClose={closeAssetinfo}
+          isOpen={isAssetInfoOpen}
+          thumbnailPreview={thumbnailPreview}
+          usagePathStatus={usagePathStatus}
+          error={usageErrorMessages}
+          sidebar={infoModalSidebar}
+        />
+      )}
+      <DeleteConfirmationModal
+        {...{
+          isDeleteConfirmationOpen,
+          closeDeleteConfirmation,
+          handleBulkDelete,
+          selectedRows,
+          fileType,
+        }}
+      />
+    </div>
+  );
+};
+
+FileTable.propTypes = {
+  courseId: PropTypes.string.isRequired,
+  files: PropTypes.arrayOf(PropTypes.shape({})),
+  data: PropTypes.shape({
+    fileIds: PropTypes.arrayOf(PropTypes.string).isRequired,
+    loadingStatus: PropTypes.string.isRequired,
+    usagePathStatus: PropTypes.string.isRequired,
+    usageErrorMessages: PropTypes.arrayOf(PropTypes.string).isRequired,
+    encodingsDownloadUrl: PropTypes.string,
+    supportedFileFormats: PropTypes.shape({}),
+    fileType: PropTypes.string.isRequired,
+  }).isRequired,
+  handleAddFile: PropTypes.func.isRequired,
+  handleDeleteFile: PropTypes.func.isRequired,
+  handleDownloadFile: PropTypes.func.isRequired,
+  handleUsagePaths: PropTypes.func.isRequired,
+  handleLockFile: PropTypes.func,
+  handleErrorReset: PropTypes.func.isRequired,
+  handleFileOrder: PropTypes.func.isRequired,
+  tableColumns: PropTypes.arrayOf(PropTypes.shape({
+    Header: PropTypes.string,
+    accessor: PropTypes.string,
+  })).isRequired,
+  maxFileSize: PropTypes.number.isRequired,
+  thumbnailPreview: PropTypes.func.isRequired,
+  infoModalSidebar: PropTypes.func.isRequired,
+  // injected
+  intl: intlShape.isRequired,
+};
+
+FileTable.defaultProps = {
+  files: null,
+  handleLockFile: () => {},
+};
+
+export default injectIntl(FileTable);
diff --git a/src/files-and-videos/generic/InfoModal.jsx b/src/files-and-videos/generic/InfoModal.jsx
new file mode 100644
index 0000000000..14276a4c2f
--- /dev/null
+++ b/src/files-and-videos/generic/InfoModal.jsx
@@ -0,0 +1,130 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+
+import {
+  injectIntl,
+  intlShape,
+  FormattedMessage,
+} from '@edx/frontend-platform/i18n';
+import {
+  Icon,
+  ModalDialog,
+  Stack,
+  Truncate,
+} from '@openedx/paragon';
+import { Error } from '@openedx/paragon/icons';
+
+import messages from './messages';
+import UsageMetricsMessages from './UsageMetricsMessage';
+import FileThumbnail from './ThumbnailPreview';
+import { TRANSCRIPT_FAILURE_STATUSES } from '../videos-page/data/constants';
+import AlertMessage from '../../generic/alert-message';
+
+const InfoModal = ({
+  file,
+  isOpen,
+  onClose,
+  thumbnailPreview,
+  usagePathStatus,
+  error,
+  sidebar,
+  // injected
+  intl,
+}) => {
+  const [activeTab, setActiveTab] = useState('fileInfo');
+  const showTranscriptionError = TRANSCRIPT_FAILURE_STATUSES.includes(file?.transcriptionStatus)
+    && activeTab !== 'fileInfo';
+
+  return (
+    <ModalDialog
+      title={file?.displayName}
+      isOpen={isOpen}
+      onClose={onClose}
+      size="lg"
+      hasCloseButton
+      data-testid="file-info-modal"
+      style={{ minHeight: '799px' }}
+    >
+      <ModalDialog.Header>
+        <ModalDialog.Title>
+          <div style={{ wordBreak: 'break-word' }}>
+            <Truncate lines={2} className="font-weight-bold small mt-3">
+              {file?.displayName}
+            </Truncate>
+          </div>
+        </ModalDialog.Title>
+      </ModalDialog.Header>
+      <ModalDialog.Body className="pt-0 x-small">
+        <hr />
+        {showTranscriptionError && (
+          <AlertMessage
+            description={(
+              <div className="row m-0 align-itmes-center">
+                <Icon src={Error} className="text-danger-500 mr-2" />
+                {intl.formatMessage(messages.transcriptionErrorMessage, { error: file.errorDescription })}
+              </div>
+            )}
+            variant="danger"
+          />
+        )}
+        <div className="row flex-nowrap m-0 mt-4">
+          <div className="col-7 mr-3">
+            <Stack gap={5}>
+              <FileThumbnail
+                thumbnail={file?.thumbnail}
+                externalUrl={file?.externalUrl}
+                displayName={file?.displayName}
+                wrapperType={file?.wrapperType}
+                id={file?.id}
+                status={file?.status}
+                thumbnailPreview={thumbnailPreview}
+                imageSize={{ width: '503px', height: '281px' }}
+              />
+              <div>
+                <div className="row m-0 font-weight-bold">
+                  <FormattedMessage {...messages.usageTitle} />
+                </div>
+                <UsageMetricsMessages {...{ usageLocations: file?.usageLocations, usagePathStatus, error }} />
+              </div>
+            </Stack>
+          </div>
+          <div className="col-5">
+            {sidebar(file, activeTab, setActiveTab)}
+          </div>
+        </div>
+      </ModalDialog.Body>
+    </ModalDialog>
+  );
+};
+
+InfoModal.propTypes = {
+  file: PropTypes.shape({
+    displayName: PropTypes.string.isRequired,
+    wrapperType: PropTypes.string.isRequired,
+    locked: PropTypes.bool,
+    externalUrl: PropTypes.string,
+    thumbnail: PropTypes.string,
+    id: PropTypes.string.isRequired,
+    portableUrl: PropTypes.string,
+    dateAdded: PropTypes.string.isRequired,
+    fileSize: PropTypes.number.isRequired,
+    usageLocations: PropTypes.arrayOf(PropTypes.string),
+    status: PropTypes.string,
+    transcriptionStatus: PropTypes.string,
+    errorDescription: PropTypes.string,
+  }),
+  onClose: PropTypes.func.isRequired,
+  isOpen: PropTypes.bool.isRequired,
+  usagePathStatus: PropTypes.string.isRequired,
+  error: PropTypes.arrayOf(PropTypes.string).isRequired,
+  thumbnailPreview: PropTypes.func.isRequired,
+  sidebar: PropTypes.func.isRequired,
+  // injected
+  intl: intlShape.isRequired,
+};
+
+InfoModal.defaultProps = {
+  file: null,
+};
+
+export default injectIntl(InfoModal);
diff --git a/src/files-and-videos/generic/ThumbnailPreview.jsx b/src/files-and-videos/generic/ThumbnailPreview.jsx
new file mode 100644
index 0000000000..57461a2784
--- /dev/null
+++ b/src/files-and-videos/generic/ThumbnailPreview.jsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const ThumbnailPreview = ({
+  thumbnail,
+  wrapperType,
+  externalUrl,
+  displayName,
+  imageSize,
+  id,
+  status,
+  thumbnailPreview,
+}) => (
+  <>
+    {thumbnailPreview({
+      thumbnail,
+      wrapperType,
+      externalUrl,
+      displayName,
+      imageSize,
+      id,
+      status,
+    })}
+  </>
+);
+ThumbnailPreview.defaultProps = {
+  thumbnail: null,
+  wrapperType: null,
+  externalUrl: null,
+  displayName: null,
+  id: null,
+  status: null,
+};
+ThumbnailPreview.propTypes = {
+  thumbnail: PropTypes.string,
+  wrapperType: PropTypes.string,
+  externalUrl: PropTypes.string,
+  displayName: PropTypes.string,
+  id: PropTypes.string,
+  status: PropTypes.string,
+  thumbnailPreview: PropTypes.func.isRequired,
+  imageSize: PropTypes.shape({
+    height: PropTypes.string.isRequired,
+    width: PropTypes.string.isRequired,
+  }).isRequired,
+};
+
+export default ThumbnailPreview;
diff --git a/src/files-and-videos/generic/UsageMetricsMessage.jsx b/src/files-and-videos/generic/UsageMetricsMessage.jsx
new file mode 100644
index 0000000000..54ae6cfe82
--- /dev/null
+++ b/src/files-and-videos/generic/UsageMetricsMessage.jsx
@@ -0,0 +1,72 @@
+import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';
+import { getConfig } from '@edx/frontend-platform';
+import PropTypes from 'prop-types';
+import {
+  Hyperlink,
+  Icon,
+  Row,
+  Spinner,
+} from '@openedx/paragon';
+import { ErrorOutline } from '@openedx/paragon/icons';
+import isEmpty from 'lodash/isEmpty';
+import { RequestStatus } from '../../data/constants';
+import messages from './messages';
+
+const UsageMetricsMessage = ({
+  usagePathStatus,
+  usageLocations,
+  error,
+  // injected
+  intl,
+}) => {
+  let usageMessage;
+  if (usagePathStatus === RequestStatus.SUCCESSFUL) {
+    usageMessage = isEmpty(usageLocations) ? (
+      <FormattedMessage {...messages.usageNotInUseMessage} />
+    ) : (
+      <ul className="p-0">
+        {usageLocations.map(location => (
+          <li key={`usage-location-${location.displayLocation}`} style={{ listStyle: 'none' }}>
+            <Hyperlink destination={`${getConfig().STUDIO_BASE_URL}${location.url}`} target="_blank">
+              {location.displayLocation}
+            </Hyperlink>
+          </li>
+        ))}
+      </ul>
+    );
+  } else if (usagePathStatus === RequestStatus.FAILED) {
+    usageMessage = (
+      <Row className="m-0 pt-1">
+        <Icon
+          className="mr-1 text-danger-500"
+          size="sm"
+          src={ErrorOutline}
+        />
+        {intl.formatMessage(messages.errorAlertMessage, { message: error })}
+      </Row>
+    );
+  } else {
+    usageMessage = (
+      <>
+        <Spinner
+          animation="border"
+          size="sm"
+          className="mie-3"
+          screenReaderText={intl.formatMessage(messages.usageLoadingMessage)}
+        />
+        <FormattedMessage {...messages.usageLoadingMessage} />
+      </>
+    );
+  }
+  return usageMessage;
+};
+
+UsageMetricsMessage.propTypes = {
+  usagePathStatus: PropTypes.string.isRequired,
+  usageLocations: PropTypes.arrayOf(PropTypes.string).isRequired,
+  error: PropTypes.arrayOf(PropTypes.string).isRequired,
+  // injected
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(UsageMetricsMessage);
diff --git a/src/files-and-videos/generic/constants.js b/src/files-and-videos/generic/constants.js
new file mode 100644
index 0000000000..95a95e8f1f
--- /dev/null
+++ b/src/files-and-videos/generic/constants.js
@@ -0,0 +1,39 @@
+const FILES_AND_UPLOAD_TYPE_FILTERS = {
+  images: ['image/png', 'image/jpeg', 'image/jpg', 'image/gif', 'image/tiff', 'image/tif', 'image/x-icon',
+    'image/svg+xml', 'image/bmp', 'image/x-ms-bmp', 'image/vnd.microsoft.icon'],
+  documents: [
+    'application/pdf',
+    'text/plain',
+    'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+    'application/vnd.openxmlformats-officedocument.wordprocessingml.template',
+    'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+    'application/vnd.openxmlformats-officedocument.presentationml.slideshow',
+    'application/vnd.openxmlformats-officedocument.presentationml.template',
+    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+    'application/vnd.openxmlformats-officedocument.spreadsheetml.template',
+    'application/msword',
+    'application/vnd.ms-excel',
+    'application/vnd.ms-powerpoint',
+    'application/csv',
+    'application/vnd.ms-excel.sheet.macroEnabled.12',
+    'text/x-tex',
+    'application/x-pdf',
+    'application/vnd.ms-excel.sheet.macroenabled.12',
+    'file/pdf',
+    'image/pdf',
+    'text/csv',
+    'text/pdf',
+    'text/x-sh',
+    'application/pdf',
+  ],
+  audio: ['audio/mpeg', 'audio/mp3', 'audio/x-wav', 'audio/ogg', 'audio/wav', 'audio/aac', 'audio/x-m4a',
+    'audio/mp4', 'audio/x-ms-wma'],
+  code: ['application/json', 'text/html', 'text/javascript', 'application/javascript', 'text/css', 'text/x-python',
+    'application/x-java-jnlp-file', 'application/xml', 'application/postscript', 'application/x-javascript',
+    'application/java-vm', 'text/x-c++src', 'text/xml', 'text/x-scss', 'application/x-python-code',
+    'application/java-archive', 'text/x-python-script', 'application/x-ruby', 'application/mathematica',
+    'text/coffeescript', 'text/x-matlab', 'application/sql', 'text/php'],
+  video: ['.mp4', '.mov'],
+};
+
+export default FILES_AND_UPLOAD_TYPE_FILTERS;
diff --git a/src/files-and-videos/generic/index.js b/src/files-and-videos/generic/index.js
new file mode 100644
index 0000000000..a9dc9d93ec
--- /dev/null
+++ b/src/files-and-videos/generic/index.js
@@ -0,0 +1,26 @@
+import {
+  TableActions,
+  GalleryCard,
+  AccessColumn,
+  ActiveColumn,
+  MoreInfoColumn,
+  StatusColumn,
+  ThumbnailColumn,
+  TranscriptColumn,
+} from './table-components';
+import FileInput, { useFileInput } from './FileInput';
+
+export {
+  TableActions,
+  GalleryCard,
+  AccessColumn,
+  ActiveColumn,
+  MoreInfoColumn,
+  StatusColumn,
+  ThumbnailColumn,
+  FileInput,
+  useFileInput,
+  TranscriptColumn,
+};
+export { default as FileTable } from './FileTable';
+export { default as EditFileErrors } from './EditFileErrors';
diff --git a/src/files-and-videos/generic/messages.js b/src/files-and-videos/generic/messages.js
new file mode 100644
index 0000000000..9930ca6b56
--- /dev/null
+++ b/src/files-and-videos/generic/messages.js
@@ -0,0 +1,214 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  rowStatusMessage: {
+    id: 'course-authoring.files-and-upload.rowStatus.message',
+    defaultMessage: 'Showing {fileCount} of {rowCount}',
+    description: 'This message is showed to notify user of the number of files being shown',
+  },
+  apiStatusToastMessage: {
+    id: 'course-authoring.files-and-upload.apiStatus.message',
+    defaultMessage: '{actionType} {selectedRowCount} {selectedRowCount, plural, one {{fileType}} other {{fileType}s}}',
+    description: 'This message is showed in the toast when action is applied to files',
+  },
+  apiStatusAddingAction: {
+    id: 'course-authoring.files-and-upload.apiStatus.addingAction.message',
+    defaultMessage: 'Adding',
+    description: 'This message is used in the toast when files are added',
+  },
+  apiStatusDeletingAction: {
+    id: 'course-authoring.files-and-upload.apiStatus.deletingAction.message',
+    defaultMessage: 'Deleting',
+    description: 'This message is used in the toast when files are deleted',
+  },
+  apiStatusDownloadingAction: {
+    id: 'course-authoring.files-and-upload.apiStatus.downloadingAction.message',
+    defaultMessage: 'Downloading',
+    description: 'This message is used in the toast when files are downloaded',
+  },
+  fileSizeError: {
+    id: 'course-authoring.files-and-upload.addFiles.error.fileSize',
+    defaultMessage: 'Uploaded file(s) must be 20 MB or less. Please resize file(s) and try again.',
+    description: 'This error message is shown when user tries to upload a file larger than 20 MB',
+  },
+  noResultsFoundMessage: {
+    id: 'course-authoring.files-and-upload.table.noResultsFound.message',
+    defaultMessage: 'No results found',
+    description: 'This message is shown when no files are found based on name search',
+  },
+  addFilesButtonLabel: {
+    id: 'course-authoring.files-and-upload.addFiles.button.label',
+    defaultMessage: 'Add {fileType}s',
+    description: 'Label for add files button, name changes based on page',
+  },
+  actionsButtonLabel: {
+    id: 'course-authoring.files-and-upload.action.button.label',
+    defaultMessage: 'Actions',
+    description: 'Label for actions dropdown button',
+  },
+  errorAlertMessage: {
+    id: 'course-authoring.files-and-upload.errorAlert.message',
+    defaultMessage: '{message}',
+    description: 'Message shell for error alert',
+  },
+  transcriptionErrorMessage: {
+    id: 'course-authoring.files-and-uploads.file-info.transcripts.error.alert',
+    defaultMessage: 'Transcript failed: "{error}"',
+    description: 'Message for transcript error in info modal',
+  },
+  usageTitle: {
+    id: 'course-authoring.files-and-uploads.file-info.usage.title',
+    defaultMessage: 'Usage',
+    description: 'Title for usage information section in info modal',
+  },
+  usageLoadingMessage: {
+    id: 'course-authoring.files-and-uploads.file-info.usage.loading.message',
+    defaultMessage: 'Loading',
+    description: 'Screen reader text for loading spinner in usage information section',
+  },
+  usageNotInUseMessage: {
+    id: 'course-authoring.files-and-uploads.file-info.usage.notInUse.message',
+    defaultMessage: 'Currently not in use',
+    description: 'Message for usage information section when file is not used in course',
+  },
+  copyVideoIdTitle: {
+    id: 'course-authoring.files-and-uploads.cardMenu.copyVideoIdTitle',
+    defaultMessage: 'Copy video ID',
+    description: 'Label for copy video id button in card menu dropdown',
+  },
+  copyStudioUrlTitle: {
+    id: 'course-authoring.files-and-uploads.cardMenu.copyStudioUrlTitle',
+    defaultMessage: 'Copy Studio Url',
+    description: 'Label for copy studio url button in card menu dropdown',
+  },
+  copyWebUrlTitle: {
+    id: 'course-authoring.files-and-uploads.cardMenu.copyWebUrlTitle',
+    defaultMessage: 'Copy Web Url',
+    description: 'Label for copy web url button in card menu dropdown',
+  },
+  downloadTitle: {
+    id: 'course-authoring.files-and-uploads.cardMenu.downloadTitle',
+    defaultMessage: 'Download',
+    description: 'Label for download button in card menu dropdown',
+  },
+  lockMenuTitle: {
+    id: 'course-authoring.files-and-uploads.cardMenu.lockTitle',
+    defaultMessage: 'Lock',
+    description: 'Label for lock button in card menu dropdown',
+  },
+  lockFileTooltipContent: {
+    id: 'course-authoring.files-and-uploads.file-info.lockFile.tooltip.content',
+    defaultMessage: `By default, anyone can access a file you upload if
+      they know the web URL, even if they are not enrolled in your course.
+      You can prevent outside access to a file by locking the file. When
+      you lock a file, the web URL only allows learners who are enrolled
+      in your course and signed in to access the file.`,
+    description: 'Tooltip message for the lock icon in the table view of files',
+  },
+  unlockMenuTitle: {
+    id: 'course-authoring.files-and-uploads.cardMenu.unlockTitle',
+    defaultMessage: 'Unlock',
+    description: 'Label for unlock button in card menu dropdown',
+  },
+  infoTitle: {
+    id: 'course-authoring.files-and-uploads.cardMenu.infoTitle',
+    defaultMessage: 'Info',
+    description: 'Label for info button in card menu dropdown',
+  },
+  downloadEncodingsTitle: {
+    id: 'course-authoring.files-and-uploads.cardMenu.downloadEncodingsTitle',
+    defaultMessage: 'Download video list (.csv)',
+    description: 'Label for download video list button in actions dropdown',
+  },
+  deleteTitle: {
+    id: 'course-authoring.files-and-uploads.cardMenu.deleteTitle',
+    defaultMessage: 'Delete',
+    description: 'Label for delete button in card menu dropdown',
+  },
+  deleteConfirmationTitle: {
+    id: 'course-authoring.files-and-uploads.deleteConfirmation.title',
+    defaultMessage: 'Delete {fileNumber, plural, one {{fileName}} other {{fileNumber} {fileType}s}}',
+    description: 'Title for delete confirmation modal',
+  },
+  deleteConfirmationMessage: {
+    id: 'course-authoring.files-and-uploads.deleteConfirmation.message',
+    defaultMessage: `
+      Are you sure you want to delete {fileNumber, plural, one {{fileName}} other {{fileNumber} {fileType}s}}?
+      This action cannot be undone and may break your course if the {fileNumber, plural, one {{fileType} is} other {{fileType}s are}}
+      used in the course content, advanced settings, updates, or schedule and details.
+    `,
+    description: 'Message presented to user listing the number of files they are attempting to delete in the delete confirmation modal',
+  },
+  deleteConfirmationUsageMessage: {
+    id: 'course-authoring.files-and-uploads.deleteConfirmation.usage-message',
+    defaultMessage: 'The following {fileNumber, plural, one {{fileType} is} other {{fileType}s are}} used in course content. Consider updating the content before deleting.',
+    description: 'Message listing where the files the user is attempting to delete are used in the course',
+  },
+  deleteFileButtonLabel: {
+    id: 'course-authoring.files-and-uploads.deleteConfirmation.deleteFile.label',
+    defaultMessage: 'Delete',
+    description: 'Label for delete button in delete confirmation modal modal',
+  },
+  cancelButtonLabel: {
+    id: 'course-authoring.files-and-uploads.cancelButton.label',
+    defaultMessage: 'Cancel',
+    description: 'Label for cancel button in modals',
+  },
+  sortButtonLabel: {
+    id: 'course-authoring.files-and-uploads.sortButton.label',
+    defaultMessage: 'Sort and filter',
+    description: 'Label for button that opens the sort and filter modal',
+  },
+  sortModalTitleLabel: {
+    id: 'course-authoring.files-and-uploads.sortModal.title',
+    defaultMessage: 'Sort by',
+    description: 'Title for Sort By secition in sort and filter modal',
+  },
+  sortByNameAscending: {
+    id: 'course-authoring.files-and-uploads.sortByNameAscendingButton.label',
+    defaultMessage: 'Name (A-Z)',
+    description: 'Label for ascending name radio button in sort and filter modal',
+  },
+  sortByNewest: {
+    id: 'course-authoring.files-and-uploads.sortByNewestButton.label',
+    defaultMessage: 'Newest',
+    description: 'Label for descending date added radio button in sort and filter modal',
+  },
+  sortBySizeDescending: {
+    id: 'course-authoring.files-and-uploads.sortBySizeDescendingButton.label',
+    defaultMessage: 'File size (High to low)',
+    description: 'Label for descending file size radio button in sort and filter modal',
+  },
+  sortByNameDescending: {
+    id: 'course-authoring.files-and-uploads.sortByNameDescendingButton.label',
+    defaultMessage: 'Name (Z-A)',
+    description: 'Label for descending name radio button in sort and filter modal',
+  },
+  sortByOldest: {
+    id: 'course-authoring.files-and-uploads.sortByOldestButton.label',
+    defaultMessage: 'Oldest',
+    description: 'Label for ascending date added radio button in sort and filter modal',
+  },
+  sortBySizeAscending: {
+    id: 'course-authoring.files-and-uploads.sortBySizeAscendingButton.label',
+    defaultMessage: 'File size(Low to high)',
+    description: 'Label for ascending file size radio button in sort and filter modal',
+  },
+  applySortButton: {
+    id: 'course-authoring.files-and-uploads.applyySortButton.label',
+    defaultMessage: 'Apply',
+    description: 'Label for apply sort button in sort and filter modal',
+  },
+  failedLabel: {
+    id: 'course-authoring.files-and-uploads.filter.failed.label',
+    defaultMessage: 'Failed',
+    description: 'Label for failed sort button in sort and filter modal',
+  },
+  uploadErrorAlertTitle: {
+    id: 'course-authoring.files-and-uploads.error.upload.title',
+    defaultMessage: 'Upload error',
+    description: 'Title for upload error alert',
+  },
+});
+
+export default messages;
diff --git a/src/files-and-videos/generic/table-components/FilterStatus.jsx b/src/files-and-videos/generic/table-components/FilterStatus.jsx
new file mode 100644
index 0000000000..e967e07944
--- /dev/null
+++ b/src/files-and-videos/generic/table-components/FilterStatus.jsx
@@ -0,0 +1,85 @@
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
+import {
+  DataTableContext, Button, Row, Chip,
+} from '@openedx/paragon';
+import { Close } from '@openedx/paragon/icons';
+import { getFilters, removeFilter } from './utils';
+
+const FilterStatus = ({
+  className, variant, size, clearFiltersText, buttonClassName,
+}) => {
+  const intl = useIntl();
+  const {
+    state, setAllFilters, setFilter, RowStatusComponent, columns,
+  } = useContext(DataTableContext);
+
+  if (!setAllFilters) {
+    return null;
+  }
+
+  const filters = getFilters(state, columns);
+
+  return (
+    <div className={className}>
+      <RowStatusComponent />
+      <Row className="m-0 align-items-center">
+        <span className="mr-2">Filters applied</span>
+        {filters.map(({ name, value }) => (
+          <Chip
+            key={value}
+            iconAfter={Close}
+            iconAfterAlt={intl.formatMessage({
+              id: 'pgn.DataTable.FilterStatus.removeFilter',
+              defaultMessage: 'Remove this filter',
+              description: 'Remove one of the applied filters.',
+            })}
+            onIconAfterClick={() => removeFilter(value, setFilter, setAllFilters, state)}
+          >
+            {name}
+          </Chip>
+        ))}
+        <Button
+          className={buttonClassName}
+          variant={variant}
+          size={size}
+          onClick={() => setAllFilters([])}
+        >
+          {clearFiltersText === undefined
+            ? (
+              <FormattedMessage
+                id="pgn.DataTable.FilterStatus.clearFiltersText"
+                defaultMessage="Clear filters"
+                description="A text that appears on the `Clear filters` button"
+              />
+            )
+            : clearFiltersText}
+        </Button>
+      </Row>
+    </div>
+  );
+};
+
+FilterStatus.defaultProps = {
+  /** Specifies class name to append to the base element. */
+  className: null,
+  /** Specifies class name to append to the button. */
+  buttonClassName: 'pgn__smart-status-button',
+  /** The visual style of the `FilterStatus`. */
+  variant: 'link',
+  /** The size of the `FilterStatus`. */
+  size: 'inline',
+  /** A text that appears on the `Clear filters` button, defaults to 'Clear filters'. */
+  clearFiltersText: undefined,
+};
+
+FilterStatus.propTypes = {
+  className: PropTypes.string,
+  buttonClassName: PropTypes.string,
+  variant: PropTypes.string,
+  size: PropTypes.string,
+  clearFiltersText: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
+};
+
+export default FilterStatus;
diff --git a/src/files-and-videos/generic/table-components/Footer.jsx b/src/files-and-videos/generic/table-components/Footer.jsx
new file mode 100644
index 0000000000..34b1932aa2
--- /dev/null
+++ b/src/files-and-videos/generic/table-components/Footer.jsx
@@ -0,0 +1,28 @@
+import React, { useContext } from 'react';
+import { DataTableContext, Pagination, TableFooter } from '@openedx/paragon';
+
+const Footer = () => {
+  const {
+    pageOptions, pageCount, gotoPage, state,
+  } = useContext(DataTableContext);
+
+  if (pageOptions.length < 2) {
+    return null;
+  }
+
+  const pageIndex = state?.pageIndex;
+
+  return (
+    <TableFooter>
+      <Pagination
+        size="small"
+        currentPage={pageIndex + 1}
+        pageCount={pageCount}
+        paginationLabel="table pagination"
+        onPageSelect={(pageNum) => gotoPage(pageNum - 1)}
+      />
+    </TableFooter>
+  );
+};
+
+export default Footer;
diff --git a/src/files-and-videos/generic/table-components/GalleryCard.jsx b/src/files-and-videos/generic/table-components/GalleryCard.jsx
new file mode 100644
index 0000000000..fa21a182cf
--- /dev/null
+++ b/src/files-and-videos/generic/table-components/GalleryCard.jsx
@@ -0,0 +1,110 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  ActionRow,
+  Icon,
+  Card,
+  Chip,
+  Truncate,
+} from '@openedx/paragon';
+import { ClosedCaption } from '@openedx/paragon/icons';
+import FileMenu from '../FileMenu';
+import FileThumbnail from '../ThumbnailPreview';
+
+const GalleryCard = ({
+  className,
+  original,
+  handleBulkDownload,
+  handleLockFile,
+  handleOpenDeleteConfirmation,
+  handleOpenFileInfo,
+  thumbnailPreview,
+  fileType,
+}) => {
+  const lockFile = () => {
+    const { locked, id } = original;
+    handleLockFile(id, !locked);
+  };
+
+  return (
+    <Card className={`${className} w-100 gallery-card`} data-testid={`grid-card-${original.id}`}>
+      <Card.Header
+        className="pr-0 pt-2 pb-2"
+        actions={(
+          <ActionRow>
+            <FileMenu
+              externalUrl={original.externalUrl}
+              handleLock={lockFile}
+              locked={original.locked}
+              openAssetInfo={() => handleOpenFileInfo(original)}
+              portableUrl={original.portableUrl}
+              id={original.id}
+              fileType={fileType}
+              onDownload={() => handleBulkDownload([{
+                original: {
+                  id: original.id,
+                  displayName:
+                  original.displayName,
+                  downloadLink: original?.downloadLink,
+                },
+              }])}
+              openDeleteConfirmation={() => handleOpenDeleteConfirmation([{ original }])}
+            />
+          </ActionRow>
+        )}
+      />
+      <Card.Section className="pr-3 pl-3 pt-0 pb-0">
+        <div className="row align-items-center justify-content-center m-0">
+          <FileThumbnail
+            thumbnail={original.thumbnail}
+            wrapperType={original.wrapperType}
+            externalUrl={original.externalUrl}
+            displayName={original.displayName}
+            id={original.id}
+            status={original.status}
+            imageSize={{ height: '76px', width: '135.71px' }}
+            thumbnailPreview={thumbnailPreview}
+          />
+        </div>
+        <div style={{ wordBreak: 'break-word' }}>
+          <Truncate lines={1} className="font-weight-bold mt-2 picture-title">
+            {original.displayName}
+          </Truncate>
+        </div>
+      </Card.Section>
+      <Card.Footer className="p-3 pt-4 row m-0 flex-row-reverse justify-content-between align-items-center">
+        <Chip>
+          {original.wrapperType}
+        </Chip>
+        {original.transcripts?.length > 0 && <Icon size="lg" src={ClosedCaption} className="m-0 text-primary-500" />}
+      </Card.Footer>
+    </Card>
+  );
+};
+
+GalleryCard.defaultProps = {
+  className: null,
+};
+GalleryCard.propTypes = {
+  className: PropTypes.string,
+  original: PropTypes.shape({
+    displayName: PropTypes.string.isRequired,
+    wrapperType: PropTypes.string.isRequired,
+    locked: PropTypes.bool,
+    externalUrl: PropTypes.string,
+    thumbnail: PropTypes.string,
+    id: PropTypes.string.isRequired,
+    portableUrl: PropTypes.string,
+    status: PropTypes.string,
+    transcripts: PropTypes.arrayOf(PropTypes.string),
+    downloadLink: PropTypes.string,
+  }).isRequired,
+  handleBulkDownload: PropTypes.func.isRequired,
+  handleLockFile: PropTypes.func.isRequired,
+  handleOpenDeleteConfirmation: PropTypes.func.isRequired,
+  handleOpenFileInfo: PropTypes.func.isRequired,
+  thumbnailPreview: PropTypes.func.isRequired,
+  fileType: PropTypes.string.isRequired,
+};
+
+export default GalleryCard;
diff --git a/src/files-and-videos/generic/table-components/GalleryCard.scss b/src/files-and-videos/generic/table-components/GalleryCard.scss
new file mode 100644
index 0000000000..318659b799
--- /dev/null
+++ b/src/files-and-videos/generic/table-components/GalleryCard.scss
@@ -0,0 +1,23 @@
+.gallery-card {
+  .thumbnail-container {
+    aspect-ratio: 16 / 9;
+
+    .thumbnail-image {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+  }
+
+  &.pgn__card {
+    .pgn__card-header {
+      .pgn__card-header-actions {
+        margin-top: 0;
+      }
+    }
+  }
+
+  .picture-title {
+    font-size: 12px;
+  }
+}
diff --git a/src/files-and-videos/generic/table-components/RowStatus.jsx b/src/files-and-videos/generic/table-components/RowStatus.jsx
new file mode 100644
index 0000000000..e22e496e0a
--- /dev/null
+++ b/src/files-and-videos/generic/table-components/RowStatus.jsx
@@ -0,0 +1,30 @@
+import React, { useContext } from 'react';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { DataTableContext } from '@openedx/paragon';
+import { getCurrentViewRange } from './utils';
+
+const RowStatus = ({
+  // injected
+  intl,
+}) => {
+  const { filteredRows, page, initialRows } = useContext(DataTableContext);
+
+  return (
+    <div>
+      <span>
+        {getCurrentViewRange({
+          filterRowCount: filteredRows.length,
+          initialRowCount: initialRows.length,
+          fileCount: page.length,
+          intl,
+        })}
+      </span>
+    </div>
+  );
+};
+
+RowStatus.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(RowStatus);
diff --git a/src/files-and-videos/generic/table-components/TableActions.jsx b/src/files-and-videos/generic/table-components/TableActions.jsx
new file mode 100644
index 0000000000..f73e34822c
--- /dev/null
+++ b/src/files-and-videos/generic/table-components/TableActions.jsx
@@ -0,0 +1,115 @@
+import React, { useContext, useEffect } from 'react';
+import _ from 'lodash';
+import { PropTypes } from 'prop-types';
+import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';
+import { getConfig } from '@edx/frontend-platform';
+import {
+  Button,
+  DataTableContext,
+  Dropdown,
+  useToggle,
+} from '@openedx/paragon';
+import { Add, Tune } from '@openedx/paragon/icons';
+import messages from '../messages';
+import SortAndFilterModal from './sort-and-filter-modal';
+
+const TableActions = ({
+  selectedFlatRows,
+  fileInputControl,
+  handleSort,
+  handleBulkDownload,
+  handleOpenDeleteConfirmation,
+  encodingsDownloadUrl,
+  fileType,
+  setInitialState,
+  // injected
+  intl,
+}) => {
+  const [isSortOpen, openSort, closeSort] = useToggle(false);
+  const { state } = useContext(DataTableContext);
+
+  // This useEffect saves DataTable state so it can persist after table re-renders due to data reload.
+  useEffect(() => {
+    setInitialState(state);
+  }, [state]);
+
+  return (
+    <>
+      <Button variant="outline-primary" onClick={openSort} iconBefore={Tune}>
+        <FormattedMessage {...messages.sortButtonLabel} />
+      </Button>
+      <Dropdown className="mx-2">
+        <Dropdown.Toggle
+          id="actions-menu-toggle"
+          alt="actions-menu-toggle"
+          variant="outline-primary"
+        >
+          <FormattedMessage {...messages.actionsButtonLabel} />
+        </Dropdown.Toggle>
+        <Dropdown.Menu>
+          {encodingsDownloadUrl ? (
+            <Dropdown.Item
+              download
+              href={`${getConfig().STUDIO_BASE_URL}${encodingsDownloadUrl}`}
+            >
+              <FormattedMessage {...messages.downloadEncodingsTitle} />
+            </Dropdown.Item>
+          ) : null}
+          <Dropdown.Item
+            onClick={() => handleBulkDownload(selectedFlatRows)}
+            disabled={_.isEmpty(selectedFlatRows)}
+          >
+            <FormattedMessage {...messages.downloadTitle} />
+          </Dropdown.Item>
+          <Dropdown.Divider />
+          <Dropdown.Item
+            data-testid="open-delete-confirmation-button"
+            onClick={() => handleOpenDeleteConfirmation(selectedFlatRows)}
+            disabled={_.isEmpty(selectedFlatRows)}
+          >
+            <FormattedMessage {...messages.deleteTitle} />
+          </Dropdown.Item>
+        </Dropdown.Menu>
+      </Dropdown>
+      <Button iconBefore={Add} onClick={fileInputControl.click}>
+        {intl.formatMessage(messages.addFilesButtonLabel, { fileType })}
+      </Button>
+      <SortAndFilterModal {...{ isSortOpen, closeSort, handleSort }} />
+    </>
+  );
+};
+
+TableActions.defaultProps = {
+  selectedFlatRows: null,
+};
+TableActions.propTypes = {
+  selectedFlatRows: PropTypes.arrayOf(
+    PropTypes.shape({
+      original: PropTypes.shape({
+        displayName: PropTypes.string.isRequired,
+        wrapperType: PropTypes.string.isRequired,
+        locked: PropTypes.bool,
+        externalUrl: PropTypes.string,
+        thumbnail: PropTypes.string,
+        id: PropTypes.string.isRequired,
+        portableUrl: PropTypes.string,
+      }).isRequired,
+    }),
+  ),
+  fileInputControl: PropTypes.shape({
+    click: PropTypes.func.isRequired,
+  }).isRequired,
+  handleOpenDeleteConfirmation: PropTypes.func.isRequired,
+  handleBulkDownload: PropTypes.func.isRequired,
+  encodingsDownloadUrl: PropTypes.string,
+  handleSort: PropTypes.func.isRequired,
+  fileType: PropTypes.string.isRequired,
+  setInitialState: PropTypes.func.isRequired,
+  intl: intlShape.isRequired,
+};
+
+TableActions.defaultProps = {
+  encodingsDownloadUrl: null,
+};
+
+export default injectIntl(TableActions);
diff --git a/src/files-and-videos/generic/table-components/index.js b/src/files-and-videos/generic/table-components/index.js
new file mode 100644
index 0000000000..d82173b263
--- /dev/null
+++ b/src/files-and-videos/generic/table-components/index.js
@@ -0,0 +1,27 @@
+import GalleryCard from './GalleryCard';
+import TableActions from './TableActions';
+import FilterStatus from './FilterStatus';
+import RowStatus from './RowStatus';
+import Footer from './Footer';
+import {
+  AccessColumn,
+  ActiveColumn,
+  MoreInfoColumn,
+  StatusColumn,
+  ThumbnailColumn,
+  TranscriptColumn,
+} from './table-custom-columns';
+
+export {
+  TableActions,
+  GalleryCard,
+  FilterStatus,
+  RowStatus,
+  Footer,
+  AccessColumn,
+  ActiveColumn,
+  MoreInfoColumn,
+  StatusColumn,
+  ThumbnailColumn,
+  TranscriptColumn,
+};
diff --git a/src/files-and-videos/generic/table-components/sort-and-filter-modal/SortAndFilterModal.jsx b/src/files-and-videos/generic/table-components/sort-and-filter-modal/SortAndFilterModal.jsx
new file mode 100644
index 0000000000..b45c29e80b
--- /dev/null
+++ b/src/files-and-videos/generic/table-components/sort-and-filter-modal/SortAndFilterModal.jsx
@@ -0,0 +1,185 @@
+import React, { useContext, useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';
+import {
+  ActionRow,
+  Button,
+  DataTableContext,
+  Form,
+  ModalDialog,
+  useCheckboxSetValues,
+} from '@openedx/paragon';
+import messages from './messages';
+// SelectableBox in paragon has a bug only visible on stage where you can't change selection. So we override it
+import SelectableBox from '../../../../editors/sharedComponents/SelectableBox';
+import { getCheckedFilters, getFilterOptions, processFilters } from './utils';
+
+const SortAndFilterModal = ({
+  isSortOpen,
+  closeSort,
+  handleSort,
+  // injected
+  intl,
+}) => {
+  const {
+    state, setAllFilters, columns, gotoPage,
+  } = useContext(DataTableContext);
+  const filterOptions = getFilterOptions(columns);
+  const currentFilters = getCheckedFilters(state);
+  const [sortBy, setSortBy] = useState('dateAdded,desc');
+  const [filterBy, {
+    add, remove, set, clear,
+  }] = useCheckboxSetValues(currentFilters);
+
+  useEffect(() => {
+    const updatedFilters = getCheckedFilters(state);
+    set(updatedFilters);
+  }, [state]);
+
+  const handleChange = (e) => {
+    // eslint-disable-next-line no-console
+    console.log('SortAndFilterModal | handleChange called | e: ', e);
+    setSortBy(e.target.value);
+  };
+
+  const handleFilterUpdate = (e) => {
+    if (e.target.checked) {
+      add(e.target.value);
+    } else {
+      remove(e.target.value);
+    }
+  };
+  const handleApply = async () => {
+    await handleSort(sortBy);
+    processFilters(filterBy, columns, setAllFilters);
+    gotoPage(0);
+    closeSort();
+  };
+
+  const handleClearAll = () => {
+    setSortBy('dateAdded,desc');
+    clear();
+  };
+
+  return (
+    <ModalDialog
+      title={intl.formatMessage(messages.modalTitle)}
+      isOpen={isSortOpen}
+      onClose={closeSort}
+      size="lg"
+      hasCloseButton
+    >
+      <ModalDialog.Header>
+        <ModalDialog.Title>
+          <FormattedMessage {...messages.modalTitle} />
+        </ModalDialog.Title>
+      </ModalDialog.Header>
+      <ModalDialog.Body>
+        <div className="h4 mb-4">
+          <FormattedMessage {...messages.sortByHeader} />
+        </div>
+        <SelectableBox.Set
+          type="radio"
+          value={sortBy}
+          onChange={handleChange}
+          name="sort options"
+          columns={3}
+          ariaLabel="sort by selection"
+          className="mb-4.5"
+        >
+          <SelectableBox
+            className="text-center"
+            value="displayName,asc"
+            type="radio"
+            aria-label="name descending radio"
+          >
+            <FormattedMessage {...messages.sortByNameAscending} />
+          </SelectableBox>
+          <SelectableBox
+            className="text-center"
+            value="dateAdded,desc"
+            type="radio"
+            aria-label="date added descending radio"
+          >
+            <FormattedMessage {...messages.sortByNewest} />
+          </SelectableBox>
+          <SelectableBox
+            className="text-center"
+            value="fileSize,desc"
+            type="radio"
+            aria-label="file size descending radio"
+          >
+            <FormattedMessage {...messages.sortBySizeDescending} />
+          </SelectableBox>
+          <SelectableBox
+            className="text-center"
+            value="displayName,desc"
+            type="radio"
+            aria-label="name ascending radio"
+          >
+            <FormattedMessage {...messages.sortByNameDescending} />
+          </SelectableBox>
+          <SelectableBox
+            className="text-center"
+            value="dateAdded,asc"
+            type="radio"
+            aria-label="date added ascending radio"
+          >
+            <FormattedMessage {...messages.sortByOldest} />
+          </SelectableBox>
+          <SelectableBox
+            className="text-center"
+            value="fileSize,asc"
+            type="radio"
+            aria-label="file size ascending radio"
+          >
+            <FormattedMessage {...messages.sortBySizeAscending} />
+          </SelectableBox>
+        </SelectableBox.Set>
+        <hr />
+        <div className="h4 my-4">
+          <FormattedMessage {...messages.filterByHeader} />
+        </div>
+        <Form.Group>
+          <Form.CheckboxSet
+            name="filters"
+            onChange={handleFilterUpdate}
+            value={filterBy}
+            isInline
+          >
+            {filterOptions.map(({ name, value }) => (
+              <Form.Checkbox {...{ value, key: value }}>{name}</Form.Checkbox>
+            ))}
+          </Form.CheckboxSet>
+        </Form.Group>
+        <Button className="pl-0" variant="link" onClick={handleClearAll}>
+          <FormattedMessage {...messages.clearAllButtonLabel} />
+        </Button>
+        <hr />
+      </ModalDialog.Body>
+      <ModalDialog.Footer>
+        <ActionRow>
+          <ModalDialog.CloseButton variant="tertiary">
+            <FormattedMessage {...messages.cancelButtonLabel} />
+          </ModalDialog.CloseButton>
+          <Button
+            variant="primary"
+            onClick={handleApply}
+          >
+            <FormattedMessage {...messages.applySortButton} />
+          </Button>
+        </ActionRow>
+      </ModalDialog.Footer>
+    </ModalDialog>
+  );
+};
+
+SortAndFilterModal.propTypes = {
+  handleSort: PropTypes.func.isRequired,
+  isSortOpen: PropTypes.bool.isRequired,
+  closeSort: PropTypes.func.isRequired,
+  // injected
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(SortAndFilterModal);
diff --git a/src/files-and-videos/generic/table-components/sort-and-filter-modal/index.js b/src/files-and-videos/generic/table-components/sort-and-filter-modal/index.js
new file mode 100644
index 0000000000..08166f3e06
--- /dev/null
+++ b/src/files-and-videos/generic/table-components/sort-and-filter-modal/index.js
@@ -0,0 +1,3 @@
+import SortAndFilterModal from './SortAndFilterModal';
+
+export default SortAndFilterModal;
diff --git a/src/files-and-videos/generic/table-components/sort-and-filter-modal/messages.js b/src/files-and-videos/generic/table-components/sort-and-filter-modal/messages.js
new file mode 100644
index 0000000000..13165bde50
--- /dev/null
+++ b/src/files-and-videos/generic/table-components/sort-and-filter-modal/messages.js
@@ -0,0 +1,54 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  modalTitle: {
+    id: 'course-authoring.files-and-videos.sort-and-filter.modal.title',
+    defaultMessage: 'Sort and Filter',
+  },
+  sortByHeader: {
+    id: 'course-authoring.files-and-videos.sort-and-filter.modal.sortBySection.header',
+    defaultMessage: 'Sort by',
+  },
+  filterByHeader: {
+    id: 'course-authoring.files-and-videos.sort-and-filter.modal.filterBySection.header',
+    defaultMessage: 'Filter by',
+  },
+  clearAllButtonLabel: {
+    id: 'course-authoring.files-and-videos.sort-and-filter.modal.clearAllButton.label',
+    defaultMessage: 'Clear all',
+  },
+  cancelButtonLabel: {
+    id: 'course-authoring.files-and-videos.sort-and-filter.modal.cancelButton.label',
+    defaultMessage: 'Cancel',
+  },
+  sortByNameAscending: {
+    id: 'course-authoring..files-and-videos.sort-and-filter.modal.sortByNameAscendingButton.label',
+    defaultMessage: 'Name (A-Z)',
+  },
+  sortByNewest: {
+    id: 'course-authoring..files-and-videos.sort-and-filter.modal.sortByNewestButton.label',
+    defaultMessage: 'Newest',
+  },
+  sortBySizeDescending: {
+    id: 'course-authoring..files-and-videos.sort-and-filter.modal.sortBySizeDescendingButton.label',
+    defaultMessage: 'File size (High to low)',
+  },
+  sortByNameDescending: {
+    id: 'course-authoring..files-and-videos.sort-and-filter.modal.sortByNameDescendingButton.label',
+    defaultMessage: 'Name (Z-A)',
+  },
+  sortByOldest: {
+    id: 'course-authoring..files-and-videos.sort-and-filter.modal.sortByOldestButton.label',
+    defaultMessage: 'Oldest',
+  },
+  sortBySizeAscending: {
+    id: 'course-authoring..files-and-videos.sort-and-filter.modal.sortBySizeAscendingButton.label',
+    defaultMessage: 'File size (Low to high)',
+  },
+  applySortButton: {
+    id: 'course-authoring..files-and-videos.sort-and-filter.modal.applyySortButton.label',
+    defaultMessage: 'Apply',
+  },
+});
+
+export default messages;
diff --git a/src/files-and-videos/generic/table-components/sort-and-filter-modal/utils.js b/src/files-and-videos/generic/table-components/sort-and-filter-modal/utils.js
new file mode 100644
index 0000000000..7c07deeeea
--- /dev/null
+++ b/src/files-and-videos/generic/table-components/sort-and-filter-modal/utils.js
@@ -0,0 +1,51 @@
+import { isArray, isEmpty } from 'lodash';
+
+export const getFilterOptions = (columns) => {
+  const allOptions = [];
+  const filterableColumns = columns.filter(column => column?.filterChoices);
+
+  filterableColumns.forEach(column => {
+    const { filterChoices } = column;
+    allOptions.push(...filterChoices);
+  });
+
+  return allOptions;
+};
+
+export const getCheckedFilters = (state) => {
+  const { filters } = state;
+  const allFilters = [];
+  filters.forEach(filter => {
+    const { id, value } = filter;
+
+    if (isArray(value)) {
+      allFilters.push(...value);
+    } else {
+      allFilters.push([id, value]);
+    }
+  });
+
+  return allFilters;
+};
+
+export const processFilters = (filters, columns, setAllFilters) => {
+  const filterableColumns = columns.filter(column => column?.filterChoices);
+  const allFilters = [];
+
+  const [displayNameFilter] = filters.filter(filter => isArray(filter));
+  if (displayNameFilter) {
+    const [id, filterValue] = displayNameFilter;
+    allFilters.push({ id, value: [filterValue] });
+  }
+
+  filterableColumns.forEach(({ id, filterChoices }) => {
+    const filterValues = filterChoices.map(choice => choice.value);
+    const matchingFilters = filterValues.filter(value => filters.includes(value));
+
+    if (!isEmpty(matchingFilters)) {
+      allFilters.push({ id, value: matchingFilters });
+    }
+  });
+
+  setAllFilters(allFilters);
+};
diff --git a/src/files-and-videos/generic/table-components/sort-and-filter-modal/utils.test.js b/src/files-and-videos/generic/table-components/sort-and-filter-modal/utils.test.js
new file mode 100644
index 0000000000..824f2b66d6
--- /dev/null
+++ b/src/files-and-videos/generic/table-components/sort-and-filter-modal/utils.test.js
@@ -0,0 +1,89 @@
+import { getCheckedFilters, getFilterOptions, processFilters } from './utils';
+
+describe('getCheckboxFilters', () => {
+  describe('switch case default', () => {
+    it('should equal array with string test', () => {
+      const state = {
+        filters: [
+          { id: 'testId', value: ['testValue'] },
+        ],
+      };
+      const expected = ['testValue'];
+      const actual = getCheckedFilters(state);
+
+      expect(actual).toEqual(expected);
+    });
+  });
+
+  describe('filter with serach bar', () => {
+    it('should equal array in array with displayName and value', () => {
+      const state = {
+        filters: [{ id: 'displayName', value: 'filter' }],
+      };
+      const expected = [['displayName', 'filter']];
+      const actual = getCheckedFilters(state);
+
+      expect(actual).toEqual(expected);
+    });
+  });
+});
+
+describe('getFilterOptions', () => {
+  describe('switch case default', () => {
+    it('value attribute should equal test', () => {
+      const columns = [
+        { id: 'other', filterChoices: [{ name: 'Test', value: 'test' }] },
+      ];
+      const expected = [
+        { name: 'Test', value: 'test' },
+      ];
+      const actual = getFilterOptions(columns);
+
+      expect(actual).toEqual(expected);
+    });
+  });
+});
+
+describe('processFilters', () => {
+  const setAllFilters = jest.fn();
+  beforeEach(() => {
+    jest.resetAllMocks();
+  });
+
+  it('should call setAllFilters with an empty array', () => {
+    const filters = [];
+    const columns = [
+      { id: 'locked', filterChoices: [{ name: 'Locked', value: true }] },
+    ];
+    const expectedParameter = [];
+    processFilters(filters, columns, setAllFilters);
+
+    expect(setAllFilters).toHaveBeenCalledWith(expectedParameter);
+  });
+
+  describe('switch case default', () => {
+    it('should call setAllFilters with test filter', () => {
+      const filters = ['filter'];
+      const columns = [
+        { id: 'test', filterChoices: [{ name: 'Filter', value: 'filter' }] },
+      ];
+      const expectedParameter = [{ id: 'test', value: ['filter'] }];
+      processFilters(filters, columns, setAllFilters);
+
+      expect(setAllFilters).toHaveBeenCalledWith(expectedParameter);
+    });
+  });
+
+  describe('filter with serach bar', () => {
+    it('should call setAllFitlers with displayName filter', () => {
+      const filters = [['displayName', 'search']];
+      const columns = [
+        { id: 'test', filterChoices: [{ name: 'Filter', value: 'filter' }] },
+      ];
+      const expectedParameter = [{ id: 'displayName', value: ['search'] }];
+      processFilters(filters, columns, setAllFilters);
+
+      expect(setAllFilters).toHaveBeenCalledWith(expectedParameter);
+    });
+  });
+});
diff --git a/src/files-and-videos/generic/table-components/table-custom-columns/AccessColumn.jsx b/src/files-and-videos/generic/table-components/table-custom-columns/AccessColumn.jsx
new file mode 100644
index 0000000000..03faad33c5
--- /dev/null
+++ b/src/files-and-videos/generic/table-components/table-custom-columns/AccessColumn.jsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { PropTypes } from 'prop-types';
+import { Icon, OverlayTrigger, Tooltip } from '@openedx/paragon';
+import { Locked, LockOpen } from '@openedx/paragon/icons';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import messages from '../../messages';
+
+const AccessColumn = ({
+  row,
+  // injected
+  intl,
+}) => {
+  const { locked } = row.original;
+  return (
+    <OverlayTrigger
+      placement="top"
+      overlay={(
+        <Tooltip id="access-tooltip-description">
+          {intl.formatMessage(messages.lockFileTooltipContent)}
+        </Tooltip>
+      )}
+    >
+      {locked ? (
+        <Icon src={Locked} size="sm" />
+      ) : (
+        <Icon src={LockOpen} size="sm" />
+      )}
+    </OverlayTrigger>
+  );
+};
+
+AccessColumn.propTypes = {
+  row: {
+    original: {
+      locked: PropTypes.bool.isRequired,
+    }.isRequired,
+  }.isRequired,
+  // injected
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(AccessColumn);
diff --git a/src/files-and-videos/generic/table-components/table-custom-columns/ActiveColumn.jsx b/src/files-and-videos/generic/table-components/table-custom-columns/ActiveColumn.jsx
new file mode 100644
index 0000000000..36b153c75c
--- /dev/null
+++ b/src/files-and-videos/generic/table-components/table-custom-columns/ActiveColumn.jsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { PropTypes } from 'prop-types';
+import { isNil } from 'lodash';
+import { injectIntl } from '@edx/frontend-platform/i18n';
+import { Icon } from '@openedx/paragon';
+import { Check } from '@openedx/paragon/icons';
+import { RequestStatus } from '../../../../data/constants';
+import { LoadingSpinner } from '../../../../generic/Loading';
+
+const ActiveColumn = ({ row, pageLoadStatus }) => {
+  const { usageLocations } = row.original;
+  if (isNil(usageLocations) || pageLoadStatus !== RequestStatus.SUCCESSFUL) {
+    return <LoadingSpinner size="sm" />;
+  }
+  const numOfUsageLocations = usageLocations.length;
+  return numOfUsageLocations > 0 ? <Icon src={Check} /> : null;
+};
+
+ActiveColumn.propTypes = {
+  row: {
+    original: {
+      usageLocations: PropTypes.arrayOf(PropTypes.string).isRequired,
+    }.isRequired,
+  }.isRequired,
+  pageLoadStatus: PropTypes.string.isRequired,
+};
+
+export default injectIntl(ActiveColumn);
diff --git a/src/files-and-videos/generic/table-components/table-custom-columns/MoreInfoColumn.jsx b/src/files-and-videos/generic/table-components/table-custom-columns/MoreInfoColumn.jsx
new file mode 100644
index 0000000000..8621237afc
--- /dev/null
+++ b/src/files-and-videos/generic/table-components/table-custom-columns/MoreInfoColumn.jsx
@@ -0,0 +1,155 @@
+import React, { useState } from 'react';
+import { PropTypes } from 'prop-types';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import {
+  Button,
+  Icon,
+  IconButton,
+  ModalPopup,
+  Menu,
+  MenuItem,
+  useToggle,
+} from '@openedx/paragon';
+import { MoreHoriz } from '@openedx/paragon/icons';
+
+import messages from '../../messages';
+
+const MoreInfoColumn = ({
+  row,
+  handleLock,
+  handleBulkDownload,
+  handleOpenFileInfo,
+  handleOpenDeleteConfirmation,
+  fileType,
+  // injected
+  intl,
+}) => {
+  const [isOpen, , close, toggle] = useToggle();
+  const [target, setTarget] = useState(null);
+
+  const {
+    externalUrl,
+    locked,
+    portableUrl,
+    id,
+    displayName,
+    downloadLink,
+  } = row.original;
+  return (
+    <>
+      <IconButton
+        src={MoreHoriz}
+        iconAs={Icon}
+        onClick={toggle}
+        ref={setTarget}
+        alt="More info icon button"
+      />
+      <ModalPopup
+        placement="bottom-end"
+        positionRef={target}
+        isOpen={isOpen}
+        onClose={close}
+        onEscapeKey={close}
+      >
+        <Menu
+          className="more-info-menu"
+        >
+          {fileType === 'video' ? (
+            <MenuItem
+              as={Button}
+              variant="tertiary"
+              onClick={() => {
+                navigator.clipboard.writeText(id);
+                close();
+              }}
+            >
+              {intl.formatMessage(messages.copyVideoIdTitle)}
+            </MenuItem>
+          ) : (
+            <>
+              <MenuItem
+                as={Button}
+                variant="tertiary"
+                onClick={() => {
+                  navigator.clipboard.writeText(portableUrl);
+                  close();
+                }}
+              >
+                {intl.formatMessage(messages.copyStudioUrlTitle)}
+              </MenuItem>
+              <MenuItem
+                as={Button}
+                variant="tertiary"
+                onClick={() => {
+                  navigator.clipboard.writeText(externalUrl);
+                  close();
+                }}
+              >
+                {intl.formatMessage(messages.copyWebUrlTitle)}
+              </MenuItem>
+              <MenuItem
+                as={Button}
+                variant="tertiary"
+                onClick={() => handleLock(id, !locked)}
+              >
+                {locked ? intl.formatMessage(messages.unlockMenuTitle) : intl.formatMessage(messages.lockMenuTitle)}
+              </MenuItem>
+            </>
+          )}
+          <MenuItem
+            as={Button}
+            variant="tertiary"
+            onClick={() => handleBulkDownload(
+              [{ original: { id, displayName, downloadLink } }],
+            )}
+          >
+            {intl.formatMessage(messages.downloadTitle)}
+          </MenuItem>
+          <MenuItem
+            as={Button}
+            variant="tertiary"
+            onClick={() => handleOpenFileInfo(row.original)}
+          >
+            {intl.formatMessage(messages.infoTitle)}
+          </MenuItem>
+          <hr className="my-2" />
+          <MenuItem
+            as={Button}
+            variant="tertiary"
+            data-testid="open-delete-confirmation-button"
+            onClick={() => {
+              handleOpenDeleteConfirmation([{ original: row.original }]);
+              close();
+            }}
+          >
+            {intl.formatMessage(messages.deleteTitle)}
+          </MenuItem>
+        </Menu>
+      </ModalPopup>
+    </>
+  );
+};
+
+MoreInfoColumn.propTypes = {
+  row: PropTypes.shape({
+    original: {
+      externalUrl: PropTypes.string,
+      locked: PropTypes.bool,
+      portableUrl: PropTypes.string,
+      id: PropTypes.string.isRequired,
+    }.isRequired,
+  }).isRequired,
+  handleLock: PropTypes.func,
+  handleBulkDownload: PropTypes.func.isRequired,
+  handleOpenFileInfo: PropTypes.func.isRequired,
+  handleOpenDeleteConfirmation: PropTypes.func.isRequired,
+  fileType: PropTypes.string.isRequired,
+  // injected
+  intl: intlShape.isRequired,
+};
+
+MoreInfoColumn.defaultProps = {
+  handleLock: null,
+};
+
+export default injectIntl(MoreInfoColumn);
diff --git a/src/files-and-videos/generic/table-components/table-custom-columns/StatusColumn.jsx b/src/files-and-videos/generic/table-components/table-custom-columns/StatusColumn.jsx
new file mode 100644
index 0000000000..4d7195301c
--- /dev/null
+++ b/src/files-and-videos/generic/table-components/table-custom-columns/StatusColumn.jsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import { PropTypes } from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Badge } from '@openedx/paragon';
+import { VIDEO_FAILURE_STATUSES } from '../../../videos-page/data/constants';
+import messages from '../../messages';
+
+const StatusColumn = ({ row }) => {
+  const { status } = row.original;
+  const isUploaded = status === 'Success';
+  const isFailed = VIDEO_FAILURE_STATUSES.includes(status);
+  const intl = useIntl();
+  const failedText = intl.formatMessage(messages.failedLabel);
+
+  if (isUploaded) {
+    return null;
+  }
+
+  return (
+    <Badge variant="light">
+      {isFailed ? failedText : status}
+    </Badge>
+  );
+};
+
+StatusColumn.propTypes = {
+  row: {
+    original: {
+      status: PropTypes.string.isRequired,
+    }.isRequired,
+  }.isRequired,
+};
+
+export default StatusColumn;
diff --git a/src/files-and-videos/generic/table-components/table-custom-columns/ThumbnailColumn.jsx b/src/files-and-videos/generic/table-components/table-custom-columns/ThumbnailColumn.jsx
new file mode 100644
index 0000000000..ea0248ba72
--- /dev/null
+++ b/src/files-and-videos/generic/table-components/table-custom-columns/ThumbnailColumn.jsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import { PropTypes } from 'prop-types';
+import ThumbnailPreview from '../../ThumbnailPreview';
+
+const ThumbnailColumn = ({ row, thumbnailPreview }) => {
+  const {
+    thumbnail,
+    wrapperType,
+    externalUrl,
+    displayName,
+    id,
+    status,
+  } = row.original;
+  return (
+    <ThumbnailPreview
+      {...{
+        thumbnail,
+        wrapperType,
+        externalUrl,
+        displayName,
+        id,
+        status,
+        thumbnailPreview,
+        imageSize: { width: '120px', height: '67.5px' },
+      }}
+    />
+  );
+};
+
+ThumbnailColumn.propTypes = {
+  row: {
+    original: {
+      thumbnail: PropTypes.string,
+      wrapperType: PropTypes.string.isRequired,
+    }.isRequired,
+  }.isRequired,
+  thumbnailPreview: PropTypes.func.isRequired,
+};
+
+export default ThumbnailColumn;
diff --git a/src/files-and-videos/generic/table-components/table-custom-columns/TranscriptColumn.jsx b/src/files-and-videos/generic/table-components/table-custom-columns/TranscriptColumn.jsx
new file mode 100644
index 0000000000..dcd8a900aa
--- /dev/null
+++ b/src/files-and-videos/generic/table-components/table-custom-columns/TranscriptColumn.jsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { injectIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
+import { Icon } from '@openedx/paragon';
+import { Info } from '@openedx/paragon/icons';
+import { TRANSCRIPT_FAILURE_STATUSES } from '../../../videos-page/data/constants';
+
+const TranscriptColumn = ({ row }) => {
+  const { transcripts, transcriptionStatus } = row.original;
+  const numOfTranscripts = transcripts?.length;
+  const transcriptMessage = numOfTranscripts > 0 ? `(${numOfTranscripts}) available` : null;
+
+  return (
+    <div className="row m-0 align-items-center">
+      {TRANSCRIPT_FAILURE_STATUSES.includes(transcriptionStatus) && (
+        <Icon src={Info} size="sm" className="mr-2 text-danger-500" />
+      )}
+      <FormattedMessage
+        id="course-authoring.videos-page.table.transcriptColumn.message"
+        description="Message with the number of transcripts available"
+        defaultMessage="{message}"
+        values={{ message: transcriptMessage }}
+      />
+    </div>
+  );
+};
+
+TranscriptColumn.propTypes = {
+  row: {
+    original: {
+      transcript: PropTypes.arrayOf([PropTypes.string]).isRequired,
+      transcriptionStatus: PropTypes.string.isRequired,
+    }.isRequired,
+  }.isRequired,
+};
+
+export default injectIntl(TranscriptColumn);
diff --git a/src/files-and-videos/generic/table-components/table-custom-columns/index.js b/src/files-and-videos/generic/table-components/table-custom-columns/index.js
new file mode 100644
index 0000000000..5c33cab8e6
--- /dev/null
+++ b/src/files-and-videos/generic/table-components/table-custom-columns/index.js
@@ -0,0 +1,15 @@
+import AccessColumn from './AccessColumn';
+import ActiveColumn from './ActiveColumn';
+import MoreInfoColumn from './MoreInfoColumn';
+import StatusColumn from './StatusColumn';
+import ThumbnailColumn from './ThumbnailColumn';
+import TranscriptColumn from './TranscriptColumn';
+
+export {
+  AccessColumn,
+  ActiveColumn,
+  MoreInfoColumn,
+  StatusColumn,
+  ThumbnailColumn,
+  TranscriptColumn,
+};
diff --git a/src/files-and-videos/generic/table-components/utils.js b/src/files-and-videos/generic/table-components/utils.js
new file mode 100644
index 0000000000..b99118074a
--- /dev/null
+++ b/src/files-and-videos/generic/table-components/utils.js
@@ -0,0 +1,71 @@
+import { isEmpty, isArray } from 'lodash';
+import messages from '../messages';
+
+const getFilterDisplayName = (column, values) => {
+  const displayNames = [];
+  const { filterChoices } = column;
+  values.forEach(value => {
+    const [displayName] = filterChoices.filter(choice => choice.value === value);
+    displayNames.push(displayName);
+  });
+  return displayNames;
+};
+
+export const getFilters = (state, columns) => {
+  const { filters } = state;
+  const filterableColumns = columns.filter(column => column?.filterChoices);
+  const allFilters = [];
+
+  filters.forEach(filter => {
+    const { id, value } = filter;
+    const [filterColumn] = filterableColumns.filter(column => column.id === id);
+    let currentFilters;
+
+    if (filterColumn) {
+      currentFilters = getFilterDisplayName(filterColumn, value);
+    } else {
+      const searchValue = Array.isArray(value) ? value[0] : value;
+      currentFilters = [{ name: searchValue, value: searchValue }];
+    }
+    allFilters.push(...currentFilters);
+  });
+
+  return allFilters;
+};
+
+export const removeFilter = (filter, setFilter, setAllFilters, state) => {
+  const { filters } = state;
+  const [editedFilter] = filters.filter(currentFilter => currentFilter.value.includes(filter));
+
+  let updatedFilterValue;
+  if (isArray(editedFilter?.value)) {
+    updatedFilterValue = editedFilter.value.filter(value => value !== filter);
+  } else {
+    updatedFilterValue = filter.includes(editedFilter?.value) ? [] : editedFilter.value;
+  }
+
+  if (isEmpty(updatedFilterValue)) {
+    const updatedFilters = filters.filter(currentFilter => currentFilter.id !== editedFilter.id);
+    setAllFilters(updatedFilters);
+  } else {
+    setFilter(editedFilter.id, updatedFilterValue);
+  }
+};
+
+export const getCurrentViewRange = ({
+  filterRowCount,
+  initialRowCount,
+  fileCount,
+  intl,
+}) => {
+  if (filterRowCount === initialRowCount) {
+    return intl.formatMessage(
+      messages.rowStatusMessage,
+      { fileCount, rowCount: initialRowCount },
+    );
+  }
+  return intl.formatMessage(
+    messages.rowStatusMessage,
+    { fileCount, rowCount: filterRowCount },
+  );
+};
diff --git a/src/files-and-videos/generic/table-components/utils.test.js b/src/files-and-videos/generic/table-components/utils.test.js
new file mode 100644
index 0000000000..126b2986cd
--- /dev/null
+++ b/src/files-and-videos/generic/table-components/utils.test.js
@@ -0,0 +1,124 @@
+import { getCurrentViewRange, getFilters, removeFilter } from './utils';
+
+describe('getCurrentViewRange', () => {
+  const intl = {
+    formatMessage: (name, { fileCount, rowCount }) => (
+      `Showing ${fileCount} of ${rowCount}`
+    ),
+  };
+
+  it('should return with intials row count', () => {
+    const data = {
+      filterRowCount: 25,
+      initialRowCount: 25,
+      fileCount: 12,
+      intl,
+    };
+    const expected = 'Showing 12 of 25';
+    const actual = getCurrentViewRange(data);
+
+    expect(actual).toEqual(expected);
+  });
+
+  it('should return with filter row count', () => {
+    const data = {
+      filterRowCount: 12,
+      initialRowCount: 25,
+      fileCount: 12,
+      intl,
+    };
+    const expected = 'Showing 12 of 12';
+    const actual = getCurrentViewRange(data);
+
+    expect(actual).toEqual(expected);
+  });
+});
+
+describe('getFilters', () => {
+  it('should return filter object for text search with no filters', () => {
+    const state = { filters: [{ id: 'test', value: 'unknown' }] };
+    const columns = [];
+    const expected = [{ name: 'unknown', value: 'unknown' }];
+    const actual = getFilters(state, columns);
+
+    expect(actual).toEqual(expected);
+  });
+
+  it('should return filter object for text search with filters', () => {
+    const state = { filters: [{ id: 'test', value: ['unknown'] }, { id: 'validColumn', value: ['filter1'] }] };
+    const columns = [{
+      id: 'validColumn',
+      filterChoices: [
+        { name: 'Filter 1', value: 'filter1' },
+        { name: 'Filter 2', value: 'filter2' },
+      ],
+    }];
+    const expected = [{ name: 'unknown', value: 'unknown' }, { name: 'Filter 1', value: 'filter1' }];
+    const actual = getFilters(state, columns);
+
+    expect(actual).toEqual(expected);
+  });
+
+  it('should return filter object for no text search with filters', () => {
+    const state = { filters: [{ id: 'validColumn', value: ['filter1'] }] };
+    const columns = [{
+      id: 'validColumn',
+      filterChoices: [
+        { name: 'Filter 1', value: 'filter1' },
+        { name: 'Filter 2', value: 'filter2' },
+      ],
+    }];
+    const expected = [{ name: 'Filter 1', value: 'filter1' }];
+    const acutal = getFilters(state, columns);
+
+    expect(acutal).toEqual(expected);
+  });
+});
+
+describe('removeFilter', () => {
+  const setAllFilters = jest.fn();
+  const setFilter = jest.fn();
+
+  beforeEach(() => {
+    jest.resetAllMocks();
+  });
+
+  describe('state filter.value is an array', () => {
+    it('should call setAllFilters', () => {
+      const state = {
+        filters: [
+          { id: 'test', value: ['filter1'] },
+        ],
+      };
+      const filter = 'filter1';
+      removeFilter(filter, setFilter, setAllFilters, state);
+
+      expect(setAllFilters).toHaveBeenCalled();
+    });
+
+    it('should call setFilter', () => {
+      const state = {
+        filters: [
+          { id: 'test', value: ['filter1', 'filter2'] },
+        ],
+      };
+      const filter = 'filter1';
+      removeFilter(filter, setFilter, setAllFilters, state);
+
+      expect(setFilter).toHaveBeenCalled();
+    });
+  });
+  describe('state filter.value is not an array', () => {
+    it('should call setAllFilters', () => {
+      const state = {
+        filters: [
+          { id: 'test', value: 'filter1' },
+        ],
+      };
+      const filter = 'filter1';
+      removeFilter(filter, setFilter, setAllFilters, state);
+
+      expect(setAllFilters).toHaveBeenCalled();
+    });
+  });
+});
diff --git a/src/files-and-videos/generic/utils.js b/src/files-and-videos/generic/utils.js
new file mode 100644
index 0000000000..608ca39f9d
--- /dev/null
+++ b/src/files-and-videos/generic/utils.js
@@ -0,0 +1,32 @@
+export const sortFiles = (files, sortType) => {
+  const [sort, direction] = sortType.split(',');
+  let sortedFiles;
+  if (sort === 'displayName') {
+    sortedFiles = files.sort((f1, f2) => {
+      const lowerCaseF1 = f1[sort].toLowerCase();
+      const lowerCaseF2 = f2[sort].toLowerCase();
+      if (lowerCaseF1 < lowerCaseF2) {
+        return 1;
+      }
+      if (lowerCaseF1 > lowerCaseF2) {
+        return -1;
+      }
+      return 0;
+    });
+  } else {
+    sortedFiles = files.sort((f1, f2) => {
+      if (f1[sort] < f2[sort]) {
+        return 1;
+      }
+      if (f1[sort] > f2[sort]) {
+        return -1;
+      }
+      return 0;
+    });
+  }
+  const sortedIds = sortedFiles.map(file => file.id);
+  if (direction === 'asc') {
+    return sortedIds.reverse();
+  }
+  return sortedIds;
+};
diff --git a/src/files-and-videos/index.scss b/src/files-and-videos/index.scss
new file mode 100644
index 0000000000..0af5102913
--- /dev/null
+++ b/src/files-and-videos/index.scss
@@ -0,0 +1,82 @@
+@import "files-and-videos/videos-page/transcript-settings/TranscriptSettings";
+@import "files-and-videos/videos-page/VideoThumbnail";
+@import "files-and-videos/videos-page/info-sidebar/transcript-item/LanguageSelect";
+@import "files-and-videos/videos-page/info-sidebar/transcript-item/TranscriptMenu";
+@import "files-and-videos/generic/table-components/GalleryCard";
+
+.files-table {
+  #table-filters-dropdown {
+    visibility: hidden;
+  }
+
+  .pgn__data-table-layout-wrapper {
+    overflow-x: visible;
+  }
+
+  .pgn__data-table-wrapper {
+    background-color: $light-200;
+    box-shadow: 0 0 0;
+
+    .pgn__data-table-status-bar {
+      padding: 12px 0;
+
+      .pgn__data-table-actions-left {
+        margin-top: 16px;
+      }
+    }
+
+    .pgn__data-table-card-view {
+      margin-left: 24px;
+
+      .pgn__card-grid__card-item {
+        padding: 0 24px 24px 0;
+        margin-bottom: 0;
+      }
+    }
+
+    .pgn__data-table-footer {
+      border-top: none;
+      justify-content: center;
+    }
+  }
+
+  .more-info-menu {
+    padding: 8px 0;
+    overflow-x: hidden;
+    max-height: 500px;
+    width: 321px;
+
+    @include pgn-box-shadow(2, "down");
+
+    .pgn__menu-item {
+      width: 100%;
+      justify-content: start;
+      font-weight: 400;
+
+      &:hover {
+        background-color: $light-300;
+      }
+    }
+  }
+}
+
+.pgn__form-control-set-inline {
+  .pgn__form-checkbox {
+    margin: 0;
+  }
+
+  width: 90%;
+  display: inline-grid;
+  grid-auto-flow: row;
+  gap: 24px 16px;
+  grid-template-columns: repeat(3, 33%);
+}
+
+.video-upload-spinner {
+  width: 1.3rem;
+  height: 1.3rem;
+}
+
+.video-upload-warning-text {
+  font-size: 18px;
+}
diff --git a/src/files-and-videos/index.ts b/src/files-and-videos/index.ts
new file mode 100644
index 0000000000..e7b2d97949
--- /dev/null
+++ b/src/files-and-videos/index.ts
@@ -0,0 +1,2 @@
+export { default as FilesPage } from './files-page';
+export { default as VideosPage } from './videos-page';
diff --git a/src/files-and-videos/videos-page/VideoThumbnail.jsx b/src/files-and-videos/videos-page/VideoThumbnail.jsx
new file mode 100644
index 0000000000..2929c6d32d
--- /dev/null
+++ b/src/files-and-videos/videos-page/VideoThumbnail.jsx
@@ -0,0 +1,130 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { VideoFile } from '@openedx/paragon/icons';
+import {
+  Badge,
+  Button,
+  Icon,
+  Image,
+} from '@openedx/paragon';
+import { FileInput, useFileInput } from '../generic';
+import messages from './messages';
+import { VIDEO_SUCCESS_STATUSES, VIDEO_FAILURE_STATUSES } from './data/constants';
+import { RequestStatus } from '../../data/constants';
+
+const VideoThumbnail = ({
+  thumbnail,
+  displayName,
+  id,
+  imageSize,
+  handleAddThumbnail,
+  videoImageSettings,
+  status,
+  pageLoadStatus,
+  // injected
+  intl,
+}) => {
+  const fileInputControl = useFileInput({
+    onAddFile: (files) => {
+      const [file] = files;
+      handleAddThumbnail(file, id);
+    },
+    setSelectedRows: () => {},
+    setAddOpen: () => false,
+  });
+  const [thumbnailError, setThumbnailError] = useState(false);
+  const allowThumbnailUpload = videoImageSettings?.videoImageUploadEnabled;
+
+  let addThumbnailMessage = 'Add thumbnail';
+  if (allowThumbnailUpload) {
+    if (thumbnail) {
+      addThumbnailMessage = 'Replace thumbnail';
+    }
+  }
+  const supportedFiles = videoImageSettings?.supportedFileFormats
+    ? Object.values(videoImageSettings.supportedFileFormats) : null;
+  const isUploaded = VIDEO_SUCCESS_STATUSES.includes(status);
+  const isFailed = VIDEO_FAILURE_STATUSES.includes(status);
+  const failedMessage = intl.formatMessage(messages.failedCheckboxLabel);
+
+  const showThumbnail = allowThumbnailUpload && thumbnail && isUploaded;
+
+  return (
+    <div className="video-thumbnail row justify-content-center align-itmes-center">
+      {allowThumbnailUpload && showThumbnail && <div className="thumbnail-overlay" />}
+      {showThumbnail && !thumbnailError && pageLoadStatus === RequestStatus.SUCCESSFUL ? (
+        <>
+          <div className="border rounded">
+            <Image
+              style={imageSize}
+              className="m-1 bg-light-300"
+              src={thumbnail}
+              alt={intl.formatMessage(messages.thumbnailAltMessage, { displayName })}
+              onError={() => setThumbnailError(true)}
+            />
+          </div>
+          <div className="add-thumbnail" data-testid={`video-thumbnail-${id}`}>
+            <Button
+              variant="primary"
+              size="sm"
+              onClick={fileInputControl.click}
+              tabIndex={0}
+            >
+              {addThumbnailMessage}
+            </Button>
+          </div>
+        </>
+      ) : (
+        <>
+          <div
+            className="row justify-content-center align-items-center m-0 border rounded"
+            style={imageSize}
+          >
+            <Icon src={VideoFile} style={{ height: '48px', width: '48px' }} />
+          </div>
+          <div className="status-badge">
+            {!isUploaded && (
+              <Badge variant="light">
+                {!isFailed ? status : failedMessage}
+              </Badge>
+            )}
+          </div>
+        </>
+      )}
+      {allowThumbnailUpload && (
+        <FileInput
+          key="video-thumbnail-upload"
+          fileInput={fileInputControl}
+          supportedFileFormats={supportedFiles}
+          allowMultiple={false}
+        />
+      )}
+    </div>
+  );
+};
+
+VideoThumbnail.propTypes = {
+  thumbnail: PropTypes.string,
+  displayName: PropTypes.string.isRequired,
+  id: PropTypes.string.isRequired,
+  imageSize: PropTypes.shape({
+    width: PropTypes.string,
+    height: PropTypes.string,
+  }).isRequired,
+  handleAddThumbnail: PropTypes.func.isRequired,
+  videoImageSettings: PropTypes.shape({
+    videoImageUploadEnabled: PropTypes.bool.isRequired,
+    supportedFileFormats: PropTypes.shape({}),
+  }).isRequired,
+  status: PropTypes.string.isRequired,
+  pageLoadStatus: PropTypes.string.isRequired,
+  // injected
+  intl: intlShape.isRequired,
+};
+
+VideoThumbnail.defaultProps = {
+  thumbnail: null,
+};
+
+export default injectIntl(VideoThumbnail);
diff --git a/src/files-and-videos/videos-page/VideoThumbnail.scss b/src/files-and-videos/videos-page/VideoThumbnail.scss
new file mode 100644
index 0000000000..34e8a32679
--- /dev/null
+++ b/src/files-and-videos/videos-page/VideoThumbnail.scss
@@ -0,0 +1,58 @@
+.video-thumbnail {
+  position: relative;
+  width: 90%;
+  max-width: 400px;
+  margin: auto;
+  overflow: hidden;
+}
+
+.video-thumbnail .thumbnail-overlay {
+  background: rgba(0 0 0 / .7);
+  position: absolute;
+  height: 99%;
+  width: 100%;
+  inset: 0;
+  opacity: 0;
+  -webkit-transition: all .4s ease-in-out 0s;
+  -moz-transition: all .4s ease-in-out 0s;
+  transition: all .4s ease-in-out 0s;
+}
+
+.status-badge {
+  position: absolute;
+  text-align: center;
+  padding-left: 1em;
+  padding-right: 1em;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+  -moz-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+}
+
+.video-thumbnail:hover .thumbnail-overlay {
+  opacity: 1;
+}
+
+.add-thumbnail {
+  position: absolute;
+  text-align: center;
+  padding-left: 1em;
+  padding-right: 1em;
+  width: 100%;
+  top: 50%;
+  left: 50%;
+  opacity: 0;
+  -webkit-transform: translate(-50%, -50%);
+  -moz-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+  -webkit-transition: all .3s ease-in-out 0s;
+  -moz-transition: all .3s ease-in-out 0s;
+  transition: all .3s ease-in-out 0s;
+}
+
+.video-thumbnail:hover .add-thumbnail {
+  top: 50%;
+  left: 50%;
+  opacity: 1;
+}
diff --git a/src/files-and-videos/videos-page/VideosPage.jsx b/src/files-and-videos/videos-page/VideosPage.jsx
new file mode 100644
index 0000000000..bf1f78528c
--- /dev/null
+++ b/src/files-and-videos/videos-page/VideosPage.jsx
@@ -0,0 +1,324 @@
+import React, { useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { Helmet } from 'react-helmet';
+import { useDispatch, useSelector } from 'react-redux';
+import {
+  injectIntl,
+  FormattedMessage,
+  intlShape,
+} from '@edx/frontend-platform/i18n';
+import {
+  ActionRow,
+  Button,
+  CheckboxFilter,
+  Container,
+  useToggle,
+} from '@openedx/paragon';
+
+import Placeholder from '../../editors/Placeholder';
+import { RequestStatus } from '../../data/constants';
+import { useModels, useModel } from '../../generic/model-store';
+import {
+  addVideoFile,
+  addVideoThumbnail,
+  deleteVideoFile,
+  fetchVideoDownload,
+  fetchVideos,
+  getUsagePaths,
+  markVideoUploadsInProgressAsFailed,
+  resetErrors,
+  updateVideoOrder,
+  cancelAllUploads,
+} from './data/thunks';
+import messages from './messages';
+import VideosPageProvider from './VideosPageProvider';
+import getPageHeadTitle from '../../generic/utils';
+import {
+  ActiveColumn,
+  EditFileErrors,
+  FileTable,
+  StatusColumn,
+  ThumbnailColumn,
+  TranscriptColumn,
+} from '../generic';
+import { getFormattedDuration, resampleFile } from './data/utils';
+import FILES_AND_UPLOAD_TYPE_FILTERS from '../generic/constants';
+import TranscriptSettings from './transcript-settings';
+import VideoInfoModalSidebar from './info-sidebar';
+import VideoThumbnail from './VideoThumbnail';
+import UploadModal from './upload-modal';
+
+const VideosPage = ({
+  courseId,
+  // injected
+  intl,
+}) => {
+  const dispatch = useDispatch();
+  const [
+    isTranscriptSettingsOpen,
+    openTranscriptSettings,
+    closeTranscriptSettings,
+  ] = useToggle(false);
+  const [
+    isUploadTrackerOpen,
+    openUploadTracker,
+    closeUploadTracker,
+  ] = useToggle(false);
+  const courseDetails = useModel('courseDetails', courseId);
+
+  useEffect(() => {
+    dispatch(fetchVideos(courseId));
+  }, [courseId]);
+
+  const {
+    videoIds,
+    loadingStatus,
+    transcriptStatus,
+    addingStatus: addVideoStatus,
+    deletingStatus: deleteVideoStatus,
+    updatingStatus: updateVideoStatus,
+    usageStatus: usagePathStatus,
+    errors: errorMessages,
+    pageSettings,
+  } = useSelector((state) => state.videos);
+
+  const uploadingIdsRef = useRef({ uploadData: {}, uploadCount: 0 });
+
+  useEffect(() => {
+    window.onbeforeunload = () => {
+      dispatch(markVideoUploadsInProgressAsFailed({ uploadingIdsRef, courseId }));
+      if (addVideoStatus === RequestStatus.IN_PROGRESS) {
+        return '';
+      }
+      return undefined;
+    };
+    switch (addVideoStatus) {
+      case RequestStatus.IN_PROGRESS:
+        openUploadTracker();
+        break;
+      case RequestStatus.SUCCESSFUL:
+        setTimeout(() => closeUploadTracker(), 500);
+        break;
+      case RequestStatus.FAILED:
+        setTimeout(() => closeUploadTracker(), 500);
+        break;
+      default:
+        closeUploadTracker();
+        break;
+    }
+  }, [addVideoStatus]);
+
+  const {
+    isVideoTranscriptEnabled,
+    encodingsDownloadUrl,
+    videoUploadMaxFileSize,
+    videoSupportedFileFormats,
+    videoImageSettings,
+  } = pageSettings;
+
+  const supportedFileFormats = {
+    'video/*': videoSupportedFileFormats || FILES_AND_UPLOAD_TYPE_FILTERS.video,
+  };
+  const handleUploadCancel = () => dispatch(cancelAllUploads(courseId, uploadingIdsRef.current.uploadData));
+  const handleErrorReset = (error) => dispatch(resetErrors(error));
+  const handleAddFile = (files) => {
+    handleErrorReset({ errorType: 'add' });
+    uploadingIdsRef.current.uploadCount = files.length;
+    dispatch(addVideoFile(courseId, files, videoIds, uploadingIdsRef));
+  };
+  const handleDeleteFile = (id) => dispatch(deleteVideoFile(courseId, id));
+  const handleDownloadFile = (selectedRows) => dispatch(fetchVideoDownload({ selectedRows, courseId }));
+  const handleUsagePaths = (video) => dispatch(getUsagePaths({ video, courseId }));
+  const handleFileOrder = ({ newFileIdOrder, sortType }) => {
+    dispatch(updateVideoOrder(courseId, newFileIdOrder, sortType));
+  };
+  const handleAddThumbnail = (file, videoId) => resampleFile({
+    file,
+    dispatch,
+    courseId,
+    videoId,
+    addVideoThumbnail,
+  });
+
+  const videos = useModels('videos', videoIds);
+
+  const data = {
+    supportedFileFormats,
+    encodingsDownloadUrl,
+    fileIds: videoIds,
+    loadingStatus,
+    usagePathStatus,
+    usageErrorMessages: errorMessages.usageMetrics,
+    fileType: 'video',
+  };
+  const thumbnailPreview = (props) => VideoThumbnail({
+    ...props,
+    pageLoadStatus: loadingStatus,
+    handleAddThumbnail,
+    videoImageSettings,
+  });
+  const infoModalSidebar = (video, activeTab, setActiveTab) => (
+    VideoInfoModalSidebar({ video, activeTab, setActiveTab })
+  );
+  const maxFileSize = videoUploadMaxFileSize * 1073741824;
+  const transcriptColumn = {
+    id: 'transcriptStatus',
+    Header: 'Transcript',
+    accessor: 'transcriptStatus',
+    Cell: ({ row }) => TranscriptColumn({ row }),
+    Filter: CheckboxFilter,
+    filter: 'exactTextCase',
+    filterChoices: [
+      {
+        name: intl.formatMessage(messages.transcribedCheckboxLabel),
+        value: 'transcribed',
+      },
+      {
+        name: intl.formatMessage(messages.notTranscribedCheckboxLabel),
+        value: 'notTranscribed',
+      },
+    ],
+  };
+  const activeColumn = {
+    id: 'activeStatus',
+    Header: 'Active',
+    accessor: 'activeStatus',
+    Cell: ({ row }) => ActiveColumn({ row, pageLoadStatus: loadingStatus }),
+    Filter: CheckboxFilter,
+    filter: 'exactTextCase',
+    filterChoices: [
+      { name: intl.formatMessage(messages.activeCheckboxLabel), value: 'active' },
+      { name: intl.formatMessage(messages.inactiveCheckboxLabel), value: 'inactive' },
+    ],
+  };
+  const durationColumn = {
+    id: 'duration',
+    Header: 'Video length',
+    accessor: 'duration',
+    Cell: ({ row }) => {
+      const { duration } = row.original;
+      return getFormattedDuration(duration);
+    },
+  };
+  const processingStatusColumn = {
+    id: 'status',
+    Header: 'Status',
+    accessor: 'status',
+    Cell: ({ row }) => StatusColumn({ row }),
+    Filter: CheckboxFilter,
+    filterChoices: [
+      { name: intl.formatMessage(messages.processingCheckboxLabel), value: 'Processing' },
+
+      { name: intl.formatMessage(messages.failedCheckboxLabel), value: 'Failed' },
+    ],
+  };
+  const videoThumbnailColumn = {
+    id: 'courseVideoImageUrl',
+    Header: '',
+    Cell: ({ row }) => ThumbnailColumn({ row, thumbnailPreview }),
+  };
+  const tableColumns = [
+    { ...videoThumbnailColumn },
+    {
+      Header: 'File name',
+      accessor: 'clientVideoId',
+    },
+    { ...durationColumn },
+    { ...transcriptColumn },
+    { ...activeColumn },
+    { ...processingStatusColumn },
+  ];
+
+  if (loadingStatus === RequestStatus.DENIED) {
+    return (
+      <div data-testid="under-construction-placeholder" className="row justify-contnt-center m-6">
+        <Placeholder />
+      </div>
+    );
+  }
+
+  return (
+    <VideosPageProvider courseId={courseId}>
+      <Helmet>
+        <title>{getPageHeadTitle(courseDetails?.name, intl.formatMessage(messages.heading))}</title>
+      </Helmet>
+      <Container size="xl" className="p-4 pt-4.5">
+        <EditFileErrors
+          resetErrors={handleErrorReset}
+          errorMessages={errorMessages}
+          addFileStatus={addVideoStatus}
+          deleteFileStatus={deleteVideoStatus}
+          updateFileStatus={updateVideoStatus}
+          loadingStatus={loadingStatus}
+        />
+        <ActionRow>
+          <div className="h2">
+            <FormattedMessage {...messages.heading} />
+          </div>
+          <ActionRow.Spacer />
+          {isVideoTranscriptEnabled ? (
+            <Button
+              variant="link"
+              size="sm"
+              onClick={() => {
+                openTranscriptSettings();
+                handleErrorReset({ errorType: 'transcript' });
+              }}
+            >
+              <FormattedMessage {...messages.transcriptSettingsButtonLabel} />
+            </Button>
+          ) : null}
+        </ActionRow>
+        {loadingStatus !== RequestStatus.FAILED && (
+          <>
+            {isVideoTranscriptEnabled && (
+              <TranscriptSettings
+                {...{
+                  isTranscriptSettingsOpen,
+                  closeTranscriptSettings,
+                  handleErrorReset,
+                  errorMessages,
+                  transcriptStatus,
+                  courseId,
+                }}
+              />
+            )}
+            <FileTable
+              {...{
+                courseId,
+                data,
+                handleAddFile,
+                handleDeleteFile,
+                handleDownloadFile,
+                handleUsagePaths,
+                handleErrorReset,
+                handleFileOrder,
+                tableColumns,
+                maxFileSize,
+                thumbnailPreview,
+                infoModalSidebar,
+                files: videos,
+              }}
+            />
+          </>
+        )}
+        <UploadModal
+          {...{
+            isUploadTrackerOpen,
+            currentUploadingIdsRef: uploadingIdsRef.current,
+            handleUploadCancel,
+            addVideoStatus,
+          }}
+        />
+      </Container>
+    </VideosPageProvider>
+  );
+};
+
+VideosPage.propTypes = {
+  courseId: PropTypes.string.isRequired,
+  // injected
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(VideosPage);
diff --git a/src/files-and-videos/videos-page/VideosPage.test.jsx b/src/files-and-videos/videos-page/VideosPage.test.jsx
new file mode 100644
index 0000000000..fa73cd2e30
--- /dev/null
+++ b/src/files-and-videos/videos-page/VideosPage.test.jsx
@@ -0,0 +1,740 @@
+import {
+  render,
+  act,
+  fireEvent,
+  screen,
+  waitFor,
+  within,
+} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { initializeMockApp } from '@edx/frontend-platform';
+import MockAdapter from 'axios-mock-adapter';
+import { getAuthenticatedHttpClient, getHttpClient } from '@edx/frontend-platform/auth';
+import { AppProvider } from '@edx/frontend-platform/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import initializeStore from '../../store';
+import { executeThunk } from '../../utils';
+import { RequestStatus } from '../../data/constants';
+import VideosPage from './VideosPage';
+import {
+  generateFetchVideosApiResponse,
+  generateEmptyApiResponse,
+  generateNewVideoApiResponse,
+  generateAddVideoApiResponse,
+  getStatusValue,
+  courseId,
+  initialState,
+} from './factories/mockApiResponses';
+
+import {
+  fetchVideos,
+  deleteVideoFile,
+  getUsagePaths,
+  addVideoThumbnail,
+  fetchVideoDownload,
+} from './data/thunks';
+import * as api from './data/api';
+import videoMessages from './messages';
+import messages from '../generic/messages';
+
+const { getVideosUrl, getCourseVideosApiUrl, getApiBaseUrl } = api;
+
+let axiosMock;
+let axiosUnauthenticateMock;
+let store;
+let file;
+jest.mock('file-saver');
+
+const renderComponent = () => {
+  render(
+    <IntlProvider locale="en">
+      <AppProvider store={store}>
+        <VideosPage courseId={courseId} />
+      </AppProvider>
+    </IntlProvider>,
+  );
+};
+
+const mockStore = async (
+  status,
+) => {
+  const fetchVideosUrl = getVideosUrl(courseId);
+  const videosData = generateFetchVideosApiResponse();
+  axiosMock.onGet(fetchVideosUrl).reply(getStatusValue(status), videosData);
+
+  videosData.previous_uploads.forEach((video) => {
+    axiosMock.onGet(`${getVideosUrl(courseId)}/${video.edx_video_id}/usage`).reply(200, { usageLocations: [] });
+  });
+
+  renderComponent();
+  await executeThunk(fetchVideos(courseId), store.dispatch);
+
+  // Finish loading the expected files into the data table before returning,
+  // because loading new files can disrupt things like accessing file menus.
+  if (status === RequestStatus.SUCCESSFUL) {
+    const numFiles = 3;
+    await waitFor(() => {
+      expect(screen.getByText(`Showing ${numFiles} of ${numFiles}`)).toBeInTheDocument();
+    });
+  }
+};
+
+const emptyMockStore = async (status) => {
+  const fetchVideosUrl = getVideosUrl(courseId);
+  axiosMock.onGet(fetchVideosUrl).reply(getStatusValue(status), generateEmptyApiResponse());
+  renderComponent();
+  await executeThunk(fetchVideos(courseId), store.dispatch);
+};
+
+describe('Videos page', () => {
+  describe('empty state', () => {
+    beforeEach(async () => {
+      initializeMockApp({
+        authenticatedUser: {
+          userId: 3,
+          username: 'abc123',
+          administrator: false,
+          roles: [],
+        },
+      });
+      store = initializeStore({
+        ...initialState,
+        videos: {
+          ...initialState.videos,
+          videoIds: [],
+        },
+        models: {},
+      });
+      axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+      axiosUnauthenticateMock = new MockAdapter(getHttpClient());
+      file = new File(['(⌐□_□)'], 'download.mp4', { type: 'video/mp4' });
+    });
+
+    it('should return placeholder component', async () => {
+      await mockStore(RequestStatus.DENIED);
+      expect(screen.getByTestId('under-construction-placeholder')).toBeVisible();
+    });
+
+    it('should not render transcript settings button', async () => {
+      await emptyMockStore(RequestStatus.SUCCESSFUL);
+      expect(screen.queryByText(videoMessages.transcriptSettingsButtonLabel.defaultMessage));
+    });
+
+    it('should have Video uploads title', async () => {
+      await emptyMockStore(RequestStatus.SUCCESSFUL);
+      expect(screen.getByText(videoMessages.heading.defaultMessage)).toBeVisible();
+    });
+
+    it('should render dropzone', async () => {
+      await emptyMockStore(RequestStatus.SUCCESSFUL);
+      expect(screen.getByTestId('files-dropzone')).toBeVisible();
+
+      expect(screen.queryByTestId('files-data-table')).toBeNull();
+    });
+
+    it('should upload a single file', async () => {
+      await emptyMockStore(RequestStatus.SUCCESSFUL);
+      const dropzone = screen.getByTestId('files-dropzone');
+      await act(async () => {
+        axiosMock.onPost(getCourseVideosApiUrl(courseId)).reply(204, generateNewVideoApiResponse());
+        axiosUnauthenticateMock.onPut('http://testing.org').reply(200);
+        axiosMock.onGet(getCourseVideosApiUrl(courseId)).reply(200, generateAddVideoApiResponse());
+        Object.defineProperty(dropzone, 'files', {
+          value: [file],
+        });
+        fireEvent.drop(dropzone);
+      });
+
+      expect(screen.queryByTestId('files-dropzone')).toBeNull();
+      expect(screen.getByTestId('files-data-table')).toBeVisible();
+    });
+  });
+
+  describe('valid videos', () => {
+    beforeEach(async () => {
+      initializeMockApp({
+        authenticatedUser: {
+          userId: 3,
+          username: 'abc123',
+          administrator: false,
+          roles: [],
+        },
+      });
+      store = initializeStore({ ...initialState });
+      axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+      axiosUnauthenticateMock = new MockAdapter(getHttpClient());
+      file = new File(['(⌐□_□)'], 'download.png', { type: 'image/png' });
+    });
+
+    describe('table view', () => {
+      it('should render transcript settings button', async () => {
+        await mockStore(RequestStatus.SUCCESSFUL);
+        const transcriptSettingsButton = screen.getByText(videoMessages.transcriptSettingsButtonLabel.defaultMessage);
+        expect(transcriptSettingsButton).toBeVisible();
+
+        fireEvent.click(transcriptSettingsButton);
+
+        expect(screen.getByLabelText('close settings')).toBeVisible();
+      });
+
+      it('should render table with gallery card', async () => {
+        await mockStore(RequestStatus.SUCCESSFUL);
+        expect(screen.getByTestId('files-data-table')).toBeVisible();
+
+        expect(screen.getByTestId('grid-card-mOckID1')).toBeVisible();
+      });
+
+      it('should switch table to list view', async () => {
+        await mockStore(RequestStatus.SUCCESSFUL);
+        axiosMock.onGet(`${getVideosUrl(courseId)}/mOckID1/usage`)
+          .reply(201, {
+            usageLocations: [{
+              display_location: 'subsection - unit / block',
+              url: 'base/unit_id#block_id',
+            }],
+          });
+        expect(screen.getByTestId('files-data-table')).toBeVisible();
+
+        expect(screen.getByTestId('grid-card-mOckID1')).toBeVisible();
+
+        expect(screen.queryByRole('table')).toBeNull();
+
+        const listButton = screen.getByLabelText('List');
+        fireEvent.click(listButton);
+        expect(screen.queryByTestId('grid-card-mOckID1')).toBeNull();
+
+        expect(screen.getByRole('table')).toBeVisible();
+      });
+
+      it('should update video thumbnail', async () => {
+        await mockStore(RequestStatus.SUCCESSFUL);
+        axiosMock.onPost(`${getApiBaseUrl()}/video_images/${courseId}/mOckID1`).reply(200, { image_url: 'url' });
+        const addThumbnailButton = screen.getByTestId('video-thumbnail-mOckID1');
+        const thumbnail = new File(['test'], 'sOMEUrl.jpg', { type: 'image/jpg' });
+        fireEvent.click(addThumbnailButton);
+        await executeThunk(addVideoThumbnail({ file: thumbnail, videoId: 'mOckID1', courseId }), store.dispatch);
+        const updateStatus = store.getState().videos.updatingStatus;
+        expect(updateStatus).toEqual(RequestStatus.SUCCESSFUL);
+      });
+      it('should no render thumbnail upload button', async () => {
+        await mockStore(RequestStatus.SUCCESSFUL);
+        const addThumbnailButton = screen.queryByTestId('video-thumbnail-mOckID5');
+
+        expect(addThumbnailButton).toBeNull();
+      });
+      describe('with videos with backend status in_progress', () => {
+        it('should render video with in progress status', async () => {
+          await mockStore(RequestStatus.IN_PROGRESS);
+          expect(screen.getByText('Failed')).toBeVisible();
+          expect(screen.queryByText('In Progress')).not.toBeInTheDocument();
+        });
+      });
+    });
+
+    describe('table actions', () => {
+      describe('file upload', () => {
+        it('should upload a single file', async () => {
+          await mockStore(RequestStatus.SUCCESSFUL);
+
+          axiosMock.onPost(getCourseVideosApiUrl(courseId)).reply(204, generateNewVideoApiResponse());
+          axiosUnauthenticateMock.onPut('http://testing.org').reply(200);
+          axiosMock.onGet(getCourseVideosApiUrl(courseId)).reply(200, generateAddVideoApiResponse());
+
+          const addFilesButton = screen.getAllByLabelText('file-input')[3];
+          await act(async () => {
+            userEvent.upload(addFilesButton, file);
+          });
+          const addStatus = store.getState().videos.addingStatus;
+          expect(addStatus).toEqual(RequestStatus.SUCCESSFUL);
+        });
+
+        it('when uploads are in progress, should show dialog and set them to failed on page leave', async () => {
+          await mockStore(RequestStatus.SUCCESSFUL);
+
+          axiosMock.onPost(getCourseVideosApiUrl(courseId)).reply(204, generateNewVideoApiResponse());
+          axiosUnauthenticateMock.onPut('http://testing.org').reply(200);
+          axiosMock.onGet(getCourseVideosApiUrl(courseId)).reply(200, generateAddVideoApiResponse());
+
+          const uploadSpy = jest.spyOn(api, 'uploadVideo');
+          const setFailedSpy = jest.spyOn(api, 'sendVideoUploadStatus').mockImplementation(() => {});
+          uploadSpy.mockResolvedValue(new Promise(() => {}));
+
+          const addFilesButton = screen.getAllByLabelText('file-input')[3];
+          await act(async () => {
+            userEvent.upload(addFilesButton, file);
+          });
+          await waitFor(() => {
+            const addStatus = store.getState().videos.addingStatus;
+            expect(addStatus).toEqual(RequestStatus.IN_PROGRESS);
+            expect(uploadSpy).toHaveBeenCalled();
+            expect(screen.getByText(videoMessages.videoUploadTrackerModalTitle.defaultMessage)).toBeVisible();
+          });
+          await act(async () => {
+            window.dispatchEvent(new Event('beforeunload'));
+          });
+          await waitFor(() => {
+            expect(setFailedSpy).toHaveBeenCalledWith(courseId, expect.any(String), expect.any(String), 'upload_failed');
+          });
+          uploadSpy.mockRestore();
+          setFailedSpy.mockRestore();
+        });
+
+        it('should cancel all in-progress and set them to failed', async () => {
+          await mockStore(RequestStatus.SUCCESSFUL);
+
+          axiosMock.onPost(getCourseVideosApiUrl(courseId)).reply(204, generateNewVideoApiResponse());
+          axiosUnauthenticateMock.onPut('http://testing.org').reply(200);
+          axiosMock.onGet(getCourseVideosApiUrl(courseId)).reply(200, generateAddVideoApiResponse());
+
+          const uploadSpy = jest.spyOn(api, 'uploadVideo');
+          const setFailedSpy = jest.spyOn(api, 'sendVideoUploadStatus').mockImplementation(() => {});
+          uploadSpy.mockResolvedValue(new Promise(() => {}));
+
+          const addFilesButton = screen.getAllByLabelText('file-input')[3];
+          await act(async () => {
+            userEvent.upload(addFilesButton, file);
+          });
+
+          await waitFor(() => {
+            const addStatus = store.getState().videos.addingStatus;
+            expect(addStatus).toEqual(RequestStatus.IN_PROGRESS);
+
+            expect(uploadSpy).toHaveBeenCalled();
+
+            expect(screen.getByText(videoMessages.videoUploadTrackerModalTitle.defaultMessage)).toBeVisible();
+          });
+
+          await act(async () => {
+            const cancelButton = screen.getByText(videoMessages.videoUploadTrackerAlertCancelLabel.defaultMessage);
+            fireEvent.click(cancelButton);
+          });
+          await waitFor(() => {
+            const addStatus = store.getState().videos.addingStatus;
+            expect(setFailedSpy).toHaveBeenCalledWith(courseId, expect.any(String), expect.any(String), 'upload_failed');
+
+            expect(addStatus).toEqual(RequestStatus.FAILED);
+
+            expect(screen.getByText('Upload error')).toBeVisible();
+          });
+          uploadSpy.mockRestore();
+          setFailedSpy.mockRestore();
+        });
+      });
+
+      it('should have disabled action buttons', async () => {
+        await mockStore(RequestStatus.SUCCESSFUL);
+        const actionsButton = screen.getByText(messages.actionsButtonLabel.defaultMessage);
+
+        fireEvent.click(actionsButton);
+        await waitFor(() => {
+          expect(screen.getByText(messages.downloadTitle.defaultMessage).closest('a')).toHaveClass('disabled');
+
+          expect(screen.getByText(messages.deleteTitle.defaultMessage).closest('a')).toHaveClass('disabled');
+        });
+      });
+
+      it('delete button should be enabled and delete selected file', async () => {
+        await mockStore(RequestStatus.SUCCESSFUL);
+
+        const [selectCardButton] = await screen.findAllByTestId('datatable-select-column-checkbox-cell');
+        fireEvent.click(selectCardButton);
+
+        const actionsButton = screen.getByText(messages.actionsButtonLabel.defaultMessage);
+        expect(actionsButton).toBeVisible();
+        fireEvent.click(actionsButton);
+
+        const deleteButton = screen.getByText(messages.deleteTitle.defaultMessage).closest('a');
+        expect(deleteButton).not.toHaveClass('disabled');
+
+        axiosMock.onDelete(`${getCourseVideosApiUrl(courseId)}/mOckID1`).reply(204);
+
+        fireEvent.click(deleteButton);
+        expect(screen.getByText('Delete mOckID1.mp4')).toBeVisible();
+        fireEvent.click(deleteButton);
+
+        // Wait for the delete confirmation button to appear
+        const confirmDeleteButton = await screen.findByRole('button', {
+          name: messages.deleteFileButtonLabel.defaultMessage,
+        });
+        fireEvent.click(confirmDeleteButton);
+
+        expect(screen.queryByText('Delete mOckID1.mp4')).toBeNull();
+
+        // Check if the video is deleted in the store and UI
+        await waitFor(() => {
+          const deleteStatus = store.getState().videos.deletingStatus;
+          expect(deleteStatus).toEqual(RequestStatus.SUCCESSFUL);
+        });
+        expect(screen.queryByTestId('grid-card-mOckID1')).toBeNull();
+      });
+
+      it('download button should be enabled and download multiple selected files', async () => {
+        await mockStore(RequestStatus.SUCCESSFUL);
+        const selectCardButtons = screen.getAllByTestId('datatable-select-column-checkbox-cell');
+        fireEvent.click(selectCardButtons[0]);
+        fireEvent.click(selectCardButtons[1]);
+        const actionsButton = screen.getByText(messages.actionsButtonLabel.defaultMessage);
+
+        fireEvent.click(actionsButton);
+        axiosMock.onPut(`${getVideosUrl(courseId)}/download`).reply(200, null);
+
+        const downloadButton = screen.getByText(messages.downloadTitle.defaultMessage).closest('a');
+        expect(downloadButton).not.toHaveClass('disabled');
+
+        await act(async () => {
+          fireEvent.click(downloadButton);
+        });
+      });
+
+      describe('Sort and filter button', () => {
+        beforeEach(async () => {
+          await mockStore(RequestStatus.SUCCESSFUL);
+          const sortAndFilterButton = screen.getByText(messages.sortButtonLabel.defaultMessage);
+
+          fireEvent.click(sortAndFilterButton);
+        });
+
+        describe('sort function', () => {
+          it('should be enabled and sort files by name', async () => {
+            const sortNameAscendingButton = screen.getByText(messages.sortByNameAscending.defaultMessage);
+            fireEvent.click(sortNameAscendingButton);
+
+            fireEvent.click(screen.getByText(messages.applySortButton.defaultMessage));
+
+            await waitFor(() => {
+              expect(screen.queryByText(messages.sortModalTitleLabel.defaultMessage)).toBeNull();
+            });
+          });
+
+          it('sort button should be enabled and sort files by file size', async () => {
+            const sortBySizeDescendingButton = screen.getByText(messages.sortBySizeDescending.defaultMessage);
+            fireEvent.click(sortBySizeDescendingButton);
+
+            fireEvent.click(screen.getByText(messages.applySortButton.defaultMessage));
+
+            await waitFor(() => {
+              expect(screen.queryByText(messages.sortModalTitleLabel.defaultMessage)).toBeNull();
+            });
+          });
+        });
+
+        describe('filter function', () => {
+          it('should filter videos with transcripts', async () => {
+            const notTranscribedCheckboxFilter = screen.getByText(
+              videoMessages.notTranscribedCheckboxLabel.defaultMessage,
+            );
+            const transcribedCheckboxFilter = screen.getByText(videoMessages.transcribedCheckboxLabel.defaultMessage);
+            fireEvent.click(transcribedCheckboxFilter);
+            fireEvent.click(notTranscribedCheckboxFilter);
+            fireEvent.click(transcribedCheckboxFilter);
+
+            fireEvent.click(screen.getByText(messages.applySortButton.defaultMessage));
+
+            await waitFor(() => {
+              const galleryCards = screen.getAllByTestId('grid-card', { exact: false });
+              expect(galleryCards).toHaveLength(1);
+            });
+          });
+
+          it('should clearAll selections', async () => {
+            const sortByNewest = screen.getByText(messages.sortByNewest.defaultMessage);
+            const sortBySizeDescendingButton = screen.getByText(messages.sortBySizeDescending.defaultMessage);
+            const transcribedCheckboxFilter = screen.getByLabelText(
+              videoMessages.transcribedCheckboxLabel.defaultMessage,
+            );
+
+            fireEvent.click(sortBySizeDescendingButton);
+            fireEvent.click(transcribedCheckboxFilter);
+
+            const clearAllButton = screen.getByText('Clear all');
+            fireEvent.click(clearAllButton);
+
+            expect(transcribedCheckboxFilter).toHaveProperty('checked', false);
+
+            expect(within(sortBySizeDescendingButton).getByLabelText('file size descending radio'))
+              .toHaveProperty('checked', false);
+
+            expect(within(sortByNewest).getByLabelText('date added descending radio'))
+              .toHaveProperty('checked', true);
+          });
+
+          it('should remove Transcribed filter chip', async () => {
+            const transcribedCheckboxFilter = screen.getByText(videoMessages.transcribedCheckboxLabel.defaultMessage);
+            fireEvent.click(transcribedCheckboxFilter);
+
+            fireEvent.click(screen.getByText(messages.applySortButton.defaultMessage));
+
+            const imageFilterChip = await screen.findByRole('button', { name: 'Remove this filter' });
+            fireEvent.click(imageFilterChip);
+
+            expect(screen.queryByText(videoMessages.transcribedCheckboxLabel.defaultMessage)).toBeNull();
+          });
+        });
+      });
+    });
+
+    describe('card menu actions', () => {
+      describe('Info', () => {
+        it('should open video info', async () => {
+          await mockStore(RequestStatus.SUCCESSFUL);
+
+          const videoMenuButton = screen.getByTestId('file-menu-dropdown-mOckID1');
+
+          axiosMock.onGet(`${getVideosUrl(courseId)}/mOckID1/usage`)
+            .reply(200, {
+              usageLocations: [{
+                display_location: 'subsection - unit / block',
+                url: 'base/unit_id#block_id',
+              }],
+            });
+
+          fireEvent.click(within(videoMenuButton).getByLabelText('file-menu-toggle'));
+          fireEvent.click(screen.getByText('Info'));
+
+          await waitFor(() => {
+            expect(screen.getByText(messages.infoTitle.defaultMessage)).toBeVisible();
+          });
+
+          const { usageStatus } = store.getState().videos;
+
+          expect(usageStatus).toEqual(RequestStatus.SUCCESSFUL);
+
+          expect(screen.getByText('subsection - unit / block')).toBeVisible();
+        });
+
+        it('should open video info modal and show info tab', async () => {
+          await mockStore(RequestStatus.SUCCESSFUL);
+          const videoMenuButton = screen.getByTestId('file-menu-dropdown-mOckID1');
+
+          axiosMock.onGet(`${getVideosUrl(courseId)}/mOckID1/usage`).reply(201, { usageLocations: [] });
+          fireEvent.click(within(videoMenuButton).getByLabelText('file-menu-toggle'));
+          fireEvent.click(screen.getByText('Info'));
+          await waitFor(() => {
+            expect(screen.getByText(messages.usageNotInUseMessage.defaultMessage)).toBeVisible();
+          });
+
+          const infoTab = screen.getAllByRole('tab')[0];
+          expect(infoTab).toBeVisible();
+
+          expect(infoTab).toHaveClass('active');
+        });
+
+        it('should open video info modal and show transcript tab', async () => {
+          await mockStore(RequestStatus.SUCCESSFUL);
+          const videoMenuButton = screen.getByTestId('file-menu-dropdown-mOckID1');
+
+          axiosMock.onGet(`${getVideosUrl(courseId)}/mOckID1/usage`).reply(201, { usageLocations: [] });
+          fireEvent.click(within(videoMenuButton).getByLabelText('file-menu-toggle'));
+          fireEvent.click(screen.getByText('Info'));
+          await waitFor(() => {
+            expect(screen.getByText(messages.usageNotInUseMessage.defaultMessage)).toBeVisible();
+          });
+
+          const transcriptTab = screen.getAllByRole('tab')[1];
+          fireEvent.click(transcriptTab);
+          expect(transcriptTab).toBeVisible();
+
+          expect(transcriptTab).toHaveClass('active');
+        });
+
+        it('should show transcript error', async () => {
+          await mockStore(RequestStatus.SUCCESSFUL);
+          const videoMenuButton = screen.getByTestId('file-menu-dropdown-mOckID3');
+
+          axiosMock.onGet(`${getVideosUrl(courseId)}/mOckID3/usage`).reply(201, { usageLocations: [] });
+          fireEvent.click(within(videoMenuButton).getByLabelText('file-menu-toggle'));
+          fireEvent.click(screen.getByText('Info'));
+
+          const transcriptTab = await screen.getAllByRole('tab')[1];
+          fireEvent.click(transcriptTab);
+
+          expect(screen.getByText('Transcript (1)')).toBeVisible();
+        });
+      });
+
+      it('download button should download file', async () => {
+        await mockStore(RequestStatus.SUCCESSFUL);
+
+        const videoMenuButton = screen.getByTestId('file-menu-dropdown-mOckID1');
+
+        fireEvent.click(within(videoMenuButton).getByLabelText('file-menu-toggle'));
+        fireEvent.click(screen.getByText('Download'));
+
+        await waitFor(() => {
+          const updateStatus = store.getState().videos.updatingStatus;
+          expect(updateStatus).toEqual(RequestStatus.SUCCESSFUL);
+        });
+      });
+
+      it('delete button should delete file', async () => {
+        await mockStore(RequestStatus.SUCCESSFUL);
+
+        const fileMenuButton = screen.getByTestId('file-menu-dropdown-mOckID1');
+
+        axiosMock.onDelete(`${getCourseVideosApiUrl(courseId)}/mOckID1`).reply(204);
+        fireEvent.click(within(fileMenuButton).getByLabelText('file-menu-toggle'));
+        fireEvent.click(screen.getByTestId('open-delete-confirmation-button'));
+        await waitFor(() => {
+          expect(screen.getByText('Delete mOckID1.mp4')).toBeVisible();
+        });
+
+        fireEvent.click(screen.getByText(messages.deleteFileButtonLabel.defaultMessage));
+        await waitFor(() => {
+          expect(screen.queryByText('Delete mOckID1.mp4')).toBeNull();
+        });
+        await executeThunk(deleteVideoFile(courseId, 'mOckID1', 5), store.dispatch);
+        const deleteStatus = store.getState().videos.deletingStatus;
+        expect(deleteStatus).toEqual(RequestStatus.SUCCESSFUL);
+
+        expect(screen.queryByTestId('grid-card-mOckID1')).toBeNull();
+      });
+    });
+
+    describe('api errors', () => {
+      it('404 intitial fetch should show error', async () => {
+        await mockStore(RequestStatus.FAILED);
+
+        const { loadingStatus } = store.getState().videos;
+        expect(loadingStatus).toEqual(RequestStatus.FAILED);
+
+        expect(screen.getByText('Error')).toBeVisible();
+      });
+
+      it('invalid file size should show error', async () => {
+        const errorMessage = 'File download.png exceeds maximum size of 5 GB.';
+        await mockStore(RequestStatus.SUCCESSFUL);
+        axiosMock.onPost(getCourseVideosApiUrl(courseId)).reply(413, { error: errorMessage });
+        axiosMock.onGet(getCourseVideosApiUrl(courseId)).reply(200, generateAddVideoApiResponse());
+
+        const addFilesButton = screen.getAllByLabelText('file-input')[3];
+        await act(async () => {
+          userEvent.upload(addFilesButton, file);
+        });
+        await waitFor(() => {
+          const addStatus = store.getState().videos.addingStatus;
+          expect(addStatus).toEqual(RequestStatus.FAILED);
+
+          expect(screen.getByText('Upload error')).toBeVisible();
+        });
+      });
+
+      it('404 add file should show error', async () => {
+        await mockStore(RequestStatus.SUCCESSFUL);
+        axiosMock.onPost(getCourseVideosApiUrl(courseId)).reply(404);
+        axiosMock.onGet(getCourseVideosApiUrl(courseId)).reply(200, generateAddVideoApiResponse());
+
+        const addFilesButton = screen.getAllByLabelText('file-input')[3];
+        await act(async () => {
+          userEvent.upload(addFilesButton, file);
+        });
+        await waitFor(() => {
+          const addStatus = store.getState().videos.addingStatus;
+          expect(addStatus).toEqual(RequestStatus.FAILED);
+
+          expect(screen.getByText('Upload error')).toBeVisible();
+        });
+      });
+
+      it('404 add thumbnail should show error', async () => {
+        await mockStore(RequestStatus.SUCCESSFUL);
+        axiosMock.onPost(`${getApiBaseUrl()}/video_images/${courseId}/mOckID1`).reply(404);
+
+        const addThumbnailButton = screen.getByTestId('video-thumbnail-mOckID1');
+        const thumbnail = new File(['test'], 'sOMEUrl.jpg', { type: 'image/jpg' });
+        fireEvent.click(addThumbnailButton);
+        await executeThunk(addVideoThumbnail({ file: thumbnail, videoId: 'mOckID1', courseId }), store.dispatch);
+        const updateStatus = store.getState().videos.updatingStatus;
+        expect(updateStatus).toEqual(RequestStatus.FAILED);
+
+        expect(screen.getByText('Error')).toBeVisible();
+      });
+
+      it('404 upload file to server should show error', async () => {
+        await mockStore(RequestStatus.SUCCESSFUL);
+        axiosMock.onPost(getCourseVideosApiUrl(courseId)).reply(204, generateNewVideoApiResponse());
+        axiosUnauthenticateMock.onPut('http://testing.org').reply(404);
+        axiosMock.onGet(getCourseVideosApiUrl(courseId)).reply(200, generateAddVideoApiResponse());
+        const addFilesButton = screen.getAllByLabelText('file-input')[3];
+        await act(async () => {
+          userEvent.upload(addFilesButton, file);
+        });
+        await waitFor(() => {
+          const addStatus = store.getState().videos.addingStatus;
+          expect(addStatus).toEqual(RequestStatus.FAILED);
+
+          expect(screen.getByText('Upload error')).toBeVisible();
+        });
+      });
+
+      it('404 delete should show error', async () => {
+        await mockStore(RequestStatus.SUCCESSFUL);
+
+        const videoMenuButton = screen.getByTestId('file-menu-dropdown-mOckID1');
+
+        axiosMock.onDelete(`${getCourseVideosApiUrl(courseId)}/mOckID1`).reply(404);
+        fireEvent.click(within(videoMenuButton).getByLabelText('file-menu-toggle'));
+        fireEvent.click(screen.getByTestId('open-delete-confirmation-button'));
+        await waitFor(async () => {
+          expect(screen.getByText('Delete mOckID1.mp4')).toBeVisible();
+        });
+
+        fireEvent.click(screen.getByText(messages.deleteFileButtonLabel.defaultMessage));
+        await waitFor(async () => {
+          expect(screen.queryByText('Delete mOckID1.mp4')).toBeNull();
+        });
+
+        await waitFor(() => {
+          const deleteStatus = store.getState().videos.deletingStatus;
+          expect(deleteStatus).toEqual(RequestStatus.FAILED);
+        });
+
+        expect(screen.getByTestId('grid-card-mOckID1')).toBeVisible();
+
+        expect(screen.getByText('Error')).toBeVisible();
+      });
+
+      it('404 usage path fetch should show error', async () => {
+        await mockStore(RequestStatus.SUCCESSFUL);
+
+        const videoMenuButton = screen.getByTestId('file-menu-dropdown-mOckID3');
+
+        axiosMock.onGet(`${getVideosUrl(courseId)}/mOckID3/usage`).reply(404);
+        fireEvent.click(within(videoMenuButton).getByLabelText('file-menu-toggle'));
+        fireEvent.click(screen.getByText('Info'));
+        await executeThunk(getUsagePaths({
+          courseId,
+          video: { id: 'mOckID3', displayName: 'mOckID3' },
+        }), store.dispatch);
+        await waitFor(() => {
+          const { usageStatus } = store.getState().videos;
+          expect(usageStatus).toEqual(RequestStatus.FAILED);
+        });
+      });
+
+      it('multiple video files fetch failure should show error', async () => {
+        await mockStore(RequestStatus.SUCCESSFUL);
+
+        const selectCardButtons = screen.getAllByTestId('datatable-select-column-checkbox-cell');
+        fireEvent.click(selectCardButtons[0]);
+        fireEvent.click(selectCardButtons[2]);
+        const actionsButton = screen.getByText(messages.actionsButtonLabel.defaultMessage);
+        expect(actionsButton).toBeVisible();
+
+        fireEvent.click(actionsButton);
+        const downloadButton = await screen.getByText(messages.downloadTitle.defaultMessage).closest('a');
+        expect(downloadButton).not.toHaveClass('disabled');
+
+        axiosMock.onPut(`${getVideosUrl(courseId)}/download`).reply(404);
+        fireEvent.click(downloadButton);
+        await executeThunk(fetchVideoDownload([{ original: { displayName: 'mOckID1', id: '2', downloadLink: 'test' } }]), store.dispatch);
+
+        const updateStatus = store.getState().videos.updatingStatus;
+        expect(updateStatus).toEqual(RequestStatus.FAILED);
+
+        expect(screen.getByText('Error')).toBeVisible();
+      });
+    });
+  });
+});
diff --git a/src/files-and-videos/videos-page/VideosPageProvider.jsx b/src/files-and-videos/videos-page/VideosPageProvider.jsx
new file mode 100644
index 0000000000..cbce832565
--- /dev/null
+++ b/src/files-and-videos/videos-page/VideosPageProvider.jsx
@@ -0,0 +1,25 @@
+import React, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+
+export const VideosPageContext = React.createContext({});
+
+const VideosPageProvider = ({ courseId, children }) => {
+  const contextValue = useMemo(() => ({
+    courseId,
+    path: `/course/${courseId}/videos`,
+  }), []);
+  return (
+    <VideosPageContext.Provider
+      value={contextValue}
+    >
+      {children}
+    </VideosPageContext.Provider>
+  );
+};
+
+VideosPageProvider.propTypes = {
+  courseId: PropTypes.string.isRequired,
+  children: PropTypes.node.isRequired,
+};
+
+export default VideosPageProvider;
diff --git a/src/files-and-videos/videos-page/data/api.js b/src/files-and-videos/videos-page/data/api.js
new file mode 100644
index 0000000000..1a5462ddaa
--- /dev/null
+++ b/src/files-and-videos/videos-page/data/api.js
@@ -0,0 +1,280 @@
+/* eslint-disable no-param-reassign */
+import saveAs from 'file-saver';
+import { camelCaseObject, ensureConfig, getConfig } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient, getHttpClient } from '@edx/frontend-platform/auth';
+import { isEmpty } from 'lodash';
+
+ensureConfig([
+  'STUDIO_BASE_URL',
+], 'Course Apps API service');
+
+export const getApiBaseUrl = () => getConfig().STUDIO_BASE_URL;
+export const getVideosUrl = (courseId) => `${getApiBaseUrl()}/api/contentstore/v1/videos/${courseId}`;
+export const getCourseVideosApiUrl = (courseId) => `${getApiBaseUrl()}/videos/${courseId}`;
+
+/**
+ * Fetches the course custom pages for provided course
+ * @param {string} courseId
+ * @returns {Promise<[{}]>}
+ */
+export async function getVideos(courseId) {
+  const { data } = await getAuthenticatedHttpClient()
+    .get(getVideosUrl(courseId));
+  const { video_transcript_settings: videoTranscriptSettings } = data;
+  const { transcription_plans: transcriptionPlans } = videoTranscriptSettings;
+  return {
+    ...camelCaseObject(data),
+    videoTranscriptSettings: {
+      ...camelCaseObject(videoTranscriptSettings),
+      transcriptionPlans,
+    },
+  };
+}
+
+export async function getAllUsagePaths({ courseId, videoIds }) {
+  const apiPromises = videoIds.map(id => getAuthenticatedHttpClient()
+    .get(`${getVideosUrl(courseId)}/${id}/usage`, { videoId: id }));
+  const updatedUsageLocations = [];
+  const results = await Promise.allSettled(apiPromises);
+
+  results.forEach(result => {
+    const value = camelCaseObject(result.value);
+    if (value) {
+      const { usageLocations } = value.data;
+      const activeStatus = usageLocations?.length > 0 ? 'active' : 'inactive';
+      const { videoId } = value.config;
+      updatedUsageLocations.push({ id: videoId, usageLocations, activeStatus });
+    }
+  });
+  return updatedUsageLocations;
+}
+
+/**
+ * Fetches the course custom pages for provided course
+ * @param {string} courseId
+ * @returns {Promise<[{}]>}
+ */
+export async function fetchVideoList(courseId) {
+  const { data } = await getAuthenticatedHttpClient()
+    .get(getCourseVideosApiUrl(courseId));
+  return camelCaseObject(data);
+}
+
+export async function deleteTranscript({ videoId, language, apiUrl }) {
+  await getAuthenticatedHttpClient()
+    .delete(`${getApiBaseUrl()}${apiUrl}/${videoId}/${language}`);
+}
+
+export async function downloadTranscript({
+  videoId,
+  language,
+  apiUrl,
+  filename,
+}) {
+  const { data } = await getAuthenticatedHttpClient()
+    .get(`${getApiBaseUrl()}${apiUrl}?edx_video_id=${videoId}&language_code=${language}`);
+  const file = new Blob([data], { type: 'text/plain;charset=utf-8' });
+  saveAs(file, filename);
+}
+
+export async function uploadTranscript({
+  videoId,
+  newLanguage,
+  apiUrl,
+  file,
+  language,
+}) {
+  const formData = new FormData();
+  formData.append('file', file);
+  formData.append('edx_video_id', videoId);
+  formData.append('language_code', language);
+  formData.append('new_language_code', newLanguage);
+  await getAuthenticatedHttpClient().post(`${getApiBaseUrl()}${apiUrl}`, formData);
+}
+
+export async function getDownload(selectedRows, courseId) {
+  const downloadErrors = [];
+  let file;
+  let filename;
+  if (selectedRows?.length > 1) {
+    const downloadLinks = selectedRows.map(row => {
+      const video = row.original;
+      try {
+        const url = video.downloadLink;
+        const name = video.displayName;
+        return { url, name };
+      } catch (error) {
+        downloadErrors.push(`Cannot find download file for ${video?.displayName || 'video'}.`);
+        return null;
+      }
+    });
+    if (!isEmpty(downloadLinks)) {
+      const json = { files: downloadLinks };
+      const { data } = await getAuthenticatedHttpClient()
+        .put(`${getVideosUrl(courseId)}/download`, json, { responseType: 'arraybuffer' });
+
+      const date = new Date().toString();
+      filename = `${courseId}-videos-${date}`;
+      file = new Blob([data], { type: 'application/zip' });
+      saveAs(file, filename);
+    }
+  } else if (selectedRows?.length === 1) {
+    try {
+      const video = selectedRows[0].original;
+      const { downloadLink } = video;
+      if (!isEmpty(downloadLink)) {
+        saveAs(downloadLink, video.displayName);
+      } else {
+        downloadErrors.push(`Cannot find download file for ${video?.displayName}.`);
+      }
+    } catch (error) {
+      downloadErrors.push('Failed to download video.');
+    }
+  } else {
+    downloadErrors.push('No files were selected to download.');
+  }
+
+  return downloadErrors;
+}
+
+/**
+ * Fetch where a video is used in a course.
+ * @param {blockId} courseId Course ID for the course to operate on
+
+ */
+export async function getVideoUsagePaths({ courseId, videoId }) {
+  const { data } = await getAuthenticatedHttpClient()
+    .get(`${getVideosUrl(courseId)}/${videoId}/usage`);
+  return camelCaseObject(data);
+}
+
+/**
+ * Delete video from course.
+ * @param {blockId} courseId Course ID for the course to operate on
+
+ */
+export async function deleteVideo(courseId, videoId) {
+  await getAuthenticatedHttpClient()
+    .delete(`${getCourseVideosApiUrl(courseId)}/${videoId}`);
+}
+
+/**
+ * Add thumbnail to video.
+ * @param {blockId} courseId Course ID for the course to operate on
+
+ */
+export async function addThumbnail({ courseId, videoId, file }) {
+  const formData = new FormData();
+  formData.append('file', file);
+  const { data } = await getAuthenticatedHttpClient()
+    .post(`${getApiBaseUrl()}/video_images/${courseId}/${videoId}`, formData);
+  return camelCaseObject(data);
+}
+
+/**
+ * Add video to course.
+ * @param {blockId} courseId Course ID for the course to operate on
+
+ */
+export async function addVideo(courseId, file, controller) {
+  const postJson = {
+    files: [{ file_name: file.name, content_type: file.type }],
+  };
+  return getAuthenticatedHttpClient().post(
+    getCourseVideosApiUrl(courseId),
+    postJson,
+    { signal: controller?.signal },
+  );
+}
+
+export async function sendVideoUploadStatus(
+  courseId,
+  edxVideoId,
+  message,
+  status,
+) {
+  return getAuthenticatedHttpClient()
+    .post(getCourseVideosApiUrl(courseId), [{
+      edxVideoId,
+      message,
+      status,
+    }]);
+}
+
+export async function uploadVideo(
+  uploadUrl,
+  uploadFile,
+  uploadingIdsRef,
+  videoId,
+  controller,
+) {
+  const currentUpload = uploadingIdsRef.current.uploadData[videoId];
+  return getHttpClient().put(uploadUrl, uploadFile, {
+    headers: {
+      'Content-Disposition': `attachment; filename="${uploadFile.name}"`,
+      'Content-Type': uploadFile.type,
+    },
+    multipart: false,
+    signal: controller?.signal,
+    onUploadProgress: ({ loaded, total }) => {
+      const progress = ((loaded / total) * 100).toFixed(2);
+      uploadingIdsRef.current.uploadData[videoId] = {
+        ...currentUpload,
+        progress,
+      };
+    },
+  });
+}
+
+export async function deleteTranscriptPreferences(courseId) {
+  await getAuthenticatedHttpClient().delete(`${getApiBaseUrl()}/transcript_preferences/${courseId}`);
+}
+
+export async function setTranscriptPreferences(courseId, preferences) {
+  const {
+    cielo24Fidelity,
+    cielo24Turnaround,
+    global,
+    preferredLanguages,
+    provider,
+    threePlayTurnaround,
+    videoSourceLanguage,
+  } = preferences;
+  const postJson = {
+    cielo24_fidelity: cielo24Fidelity?.toUpperCase(),
+    cielo24_turnaround: cielo24Turnaround,
+    global,
+    preferred_languages: preferredLanguages,
+    provider,
+    video_source_language: videoSourceLanguage,
+    three_play_turnaround: threePlayTurnaround,
+  };
+
+  const { data } = await getAuthenticatedHttpClient()
+    .post(`${getApiBaseUrl()}/transcript_preferences/${courseId}`, postJson);
+  return camelCaseObject(data);
+}
+
+export async function setTranscriptCredentials(courseId, formFields) {
+  const {
+    apiKey,
+    global,
+    provider,
+    ...otherFields
+  } = formFields;
+  const postJson = {
+    api_key: apiKey,
+    global,
+    provider,
+  };
+
+  if (provider === '3PlayMedia') {
+    const { apiSecretKey } = otherFields;
+    postJson.api_secret_key = apiSecretKey;
+  } else {
+    const { username } = otherFields;
+    postJson.username = username;
+  }
+  await getAuthenticatedHttpClient()
+    .post(`${getApiBaseUrl()}/transcript_credentials/${courseId}`, postJson);
+}
diff --git a/src/files-and-videos/videos-page/data/api.test.js b/src/files-and-videos/videos-page/data/api.test.js
new file mode 100644
index 0000000000..02cf14d2b2
--- /dev/null
+++ b/src/files-and-videos/videos-page/data/api.test.js
@@ -0,0 +1,162 @@
+import 'file-saver';
+import MockAdapter from 'axios-mock-adapter';
+import { initializeMockApp } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient, getHttpClient } from '@edx/frontend-platform/auth';
+
+import {
+  getDownload, getVideosUrl, getAllUsagePaths, getCourseVideosApiUrl, uploadVideo, sendVideoUploadStatus,
+} from './api';
+
+jest.mock('file-saver');
+
+let axiosMock;
+let axiosUnauthenticatedMock;
+
+describe('api.js', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+    axiosUnauthenticatedMock = new MockAdapter(getHttpClient());
+  });
+  describe('getDownload', () => {
+    describe('selectedRows length is undefined or less than zero', () => {
+      it('should return with no files selected error if selectedRows is empty', async () => {
+        const expected = ['No files were selected to download.'];
+        const actual = await getDownload([], 'courseId');
+        expect(actual).toEqual(expected);
+      });
+      it('should return with no files selected error if selectedRows is null', async () => {
+        const expected = ['No files were selected to download.'];
+        const actual = await getDownload(null, 'courseId');
+        expect(actual).toEqual(expected);
+      });
+    });
+    describe('selectedRows length is greater than one', () => {
+      beforeEach(() => {
+        axiosMock.onPut(`${getVideosUrl('SoMEiD')}/download`).reply(200, null);
+      });
+      it('should not throw error when blob returns null', async () => {
+        const expected = [];
+        const actual = await getDownload([
+          { original: { displayName: 'test1', downloadLink: 'test1.com' } },
+          { original: { displayName: 'test2', id: '2', downloadLink: 'test2.com' } },
+        ], 'SoMEiD');
+        expect(actual).toEqual(expected);
+      });
+      it('should return error if row does not contain .original attribute', async () => {
+        const expected = ['Cannot find download file for video.'];
+        const actual = await getDownload([
+          { asset: { displayName: 'test1', id: '1' } },
+          { original: { displayName: 'test2', id: '2', downloadLink: 'test1.com' } },
+        ], 'SoMEiD');
+        expect(actual).toEqual(expected);
+      });
+    });
+    describe('selectedRows length equals one', () => {
+      it('should return error if original does not contain .downloadLink attribute', async () => {
+        const expected = ['Cannot find download file for test2.'];
+        const actual = await getDownload([
+          { original: { displayName: 'test2', id: '2' } },
+        ], 'SoMEiD');
+        expect(actual).toEqual(expected);
+      });
+      it('should return error if row does not contain .original ancestor', async () => {
+        const expected = ['Failed to download video.'];
+        const actual = await getDownload([
+          { asset: { displayName: 'test1', id: '1', download_link: 'test1.com' } },
+        ], 'SoMEiD');
+        expect(actual).toEqual(expected);
+      });
+    });
+  });
+  describe('getAllUsagePaths', () => {
+    const courseId = 'random-course-id';
+    const videoIds = ['test1'];
+    it('returns empty array when no videos are given', async () => {
+      const expected = [];
+      const actual = await getAllUsagePaths({ courseId, videoIds: [] });
+      expect(actual).toEqual(expected);
+    });
+    it('pushes an empty usageLocations field when video api call fails', async () => {
+      axiosMock.onGet(`${getVideosUrl(courseId)}/${videoIds[0]}/usage`, { videoId: videoIds[0] }).reply(404);
+      const expected = [];
+      const actual = await getAllUsagePaths({ courseId, videoIds });
+      expect(actual).toEqual(expected);
+    });
+    it('sets activeStatus to active', async () => {
+      const usageLocations = [{ link: '/test', name: 'test' }];
+      axiosMock.onGet(`${getVideosUrl(courseId)}/${videoIds[0]}/usage`, { videoId: videoIds[0] })
+        .reply(200, { usageLocations });
+      const expected = [{ id: videoIds[0], usageLocations, activeStatus: 'active' }];
+      const actual = await getAllUsagePaths({ courseId, videoIds });
+      expect(actual).toEqual(expected);
+    });
+    it('sets activeStatus to inactive', async () => {
+      const usageLocations = [];
+      axiosMock.onGet(`${getVideosUrl(courseId)}/${videoIds[0]}/usage`, { videoId: videoIds[0] })
+        .reply(200, { usageLocations });
+      const expected = [{ id: videoIds[0], usageLocations, activeStatus: 'inactive' }];
+      const actual = await getAllUsagePaths({ courseId, videoIds });
+      expect(actual).toEqual(expected);
+    });
+  });
+
+  describe('uploadVideo', () => {
+    it('PUTs to the provided URL', async () => {
+      const mockUrl = 'mock.com';
+      const mockFile = { mock: 'file' };
+      const mockVideoId = 'id123';
+      const mockController = {};
+      const mockRef = {
+        current: {
+          uploadData: {
+            id123: {
+              progress: 0,
+              name: 'test',
+              status: 'failed',
+            },
+          },
+        },
+      };
+      const expectedResult = 'Something';
+      axiosUnauthenticatedMock.onPut(mockUrl).reply((config) => {
+        const total = 1024; // mocked file size
+        const progress = 0.4;
+        if (config.onUploadProgress) {
+          config.onUploadProgress({ loaded: total * progress, total });
+        }
+        return [200, expectedResult];
+      });
+      const { data: actual } = await uploadVideo(mockUrl, mockFile, mockRef, mockVideoId, mockController);
+      expect(actual).toEqual(expectedResult);
+
+      expect(mockRef.current.uploadData.id123.progress).toEqual('40.00');
+    });
+  });
+  describe('sendVideoUploadStatus', () => {
+    it('Posts to the correct url', async () => {
+      const mockCourseId = 'wiZard101';
+      const mockEdxVideoId = 'wIzOz.mp3';
+      const mockStatus = 'Im mElTinG';
+      const mockMessage = 'DinG DOng The WiCked WiTCH isDead';
+      const expectedResult = 'Something';
+      axiosMock.onPost(`${getCourseVideosApiUrl(mockCourseId)}`)
+        .reply(200, expectedResult);
+      const actual = await sendVideoUploadStatus(
+        mockCourseId,
+        mockEdxVideoId,
+        mockMessage,
+        mockStatus,
+      );
+      expect(actual.data).toEqual(expectedResult);
+      jest.clearAllMocks();
+    });
+  });
+});
diff --git a/src/files-and-videos/videos-page/data/constants.js b/src/files-and-videos/videos-page/data/constants.js
new file mode 100644
index 0000000000..5b2ff7e4ee
--- /dev/null
+++ b/src/files-and-videos/videos-page/data/constants.js
@@ -0,0 +1,12 @@
+export const MAX_FILE_SIZE_MB = 2000000;
+export const MIN_FILE_SIZE_KB = 2000;
+export const MAX_WIDTH = 1280;
+export const MAX_HEIGHT = 720;
+export const MIN_WIDTH = 640;
+export const MIN_HEIGHT = 360;
+export const ASPECT_RATIO = 16 / 9;
+export const ASPECT_RATIO_ERROR_MARGIN = 0.1;
+export const TRANSCRIPT_FAILURE_STATUSES = ['Transcript Failed', 'Partial Failure'];
+export const VIDEO_PROCESSING_STATUSES = ['In Progress', 'Uploaded']; // Don't add "Uploading" here. Otherwise interrupted uploads will be considered as processing.
+export const VIDEO_SUCCESS_STATUSES = ['Ready', 'Imported'];
+export const VIDEO_FAILURE_STATUSES = ['Failed', 'Partial Failure', 'Uploading']; // 'Uploading' is added here to handle interrupted uploads.
diff --git a/src/files-and-videos/videos-page/data/errors.js b/src/files-and-videos/videos-page/data/errors.js
new file mode 100644
index 0000000000..40e3434c35
--- /dev/null
+++ b/src/files-and-videos/videos-page/data/errors.js
@@ -0,0 +1,8 @@
+export class ServerError extends Error {
+  constructor(message, statusCode) {
+    super(message);
+    this.statusCode = statusCode;
+    this.name = this.constructor.name;
+  }
+}
+export default { ServerError };
diff --git a/src/files-and-videos/videos-page/data/slice.js b/src/files-and-videos/videos-page/data/slice.js
new file mode 100644
index 0000000000..fa6dc4aeb2
--- /dev/null
+++ b/src/files-and-videos/videos-page/data/slice.js
@@ -0,0 +1,116 @@
+/* eslint-disable no-param-reassign */
+import { createSlice } from '@reduxjs/toolkit';
+
+import { RequestStatus } from '../../../data/constants';
+
+const slice = createSlice({
+  name: 'videos',
+  initialState: {
+    videoIds: [],
+    pageSettings: {},
+    loadingStatus: RequestStatus.IN_PROGRESS,
+    updatingStatus: '',
+    addingStatus: '',
+    deletingStatus: '',
+    usageStatus: '',
+    transcriptStatus: '',
+    errors: {
+      add: [],
+      delete: [],
+      thumbnail: [],
+      download: [],
+      usageMetrics: [],
+      transcript: [],
+      loading: '',
+    },
+  },
+  reducers: {
+    setVideoIds: (state, { payload }) => {
+      state.videoIds = payload.videoIds;
+    },
+    setPageSettings: (state, { payload }) => {
+      state.pageSettings = payload;
+    },
+    updateLoadingStatus: (state, { payload }) => {
+      state.loadingStatus = payload.status;
+    },
+    updateEditStatus: (state, { payload }) => {
+      const { editType, status } = payload;
+      switch (editType) {
+        case 'delete':
+          state.deletingStatus = status;
+          break;
+        case 'add':
+          state.addingStatus = status;
+          break;
+        case 'thumbnail':
+          state.updatingStatus = status;
+          break;
+        case 'download':
+          state.updatingStatus = status;
+          break;
+        case 'usageMetrics':
+          state.usageStatus = status;
+          break;
+        case 'transcript':
+          state.transcriptStatus = status;
+          break;
+        default:
+          break;
+      }
+    },
+    deleteVideoSuccess: (state, { payload }) => {
+      state.videoIds = state.videoIds.filter(id => id !== payload.videoId);
+    },
+    addVideoById: (state, { payload }) => {
+      state.videoIds = [payload.videoId, ...state.videoIds];
+    },
+    updateTranscriptCredentialsSuccess: (state, { payload }) => {
+      const { provider } = payload;
+      state.pageSettings.transcriptCredentials = {
+        ...state.pageSettings.transcriptCredentials,
+        [provider]: true,
+      };
+    },
+    updateTranscriptPreferenceSuccess: (state, { payload }) => {
+      state.pageSettings.activeTranscriptPreferences = payload;
+    },
+    updateErrors: (state, { payload }) => {
+      const { error, message } = payload;
+      if (error === 'loading') {
+        state.errors.loading = message;
+      } else {
+        const currentErrorState = state.errors[error];
+        state.errors[error] = [...currentErrorState, message];
+      }
+    },
+    clearErrors: (state, { payload }) => {
+      const { error } = payload;
+      state.errors[error] = [];
+    },
+    failAddVideo: (state, { payload }) => {
+      const { fileName } = payload;
+      const currentErrorState = state.errors.add;
+      state.errors.add = [...currentErrorState, `Failed to add ${fileName}.`];
+    },
+  },
+});
+
+export const {
+  setVideoIds,
+  setPageSettings,
+  updateLoadingStatus,
+  deleteVideoSuccess,
+  addVideoSuccess,
+  updateErrors,
+  clearErrors,
+  updateEditStatus,
+  updateTranscriptCredentialsSuccess,
+  updateTranscriptPreferenceSuccess,
+  updateVideoUploadProgress,
+  failAddVideo,
+} = slice.actions;
+
+export const {
+  reducer,
+} = slice;
diff --git a/src/files-and-videos/videos-page/data/thunks.js b/src/files-and-videos/videos-page/data/thunks.js
new file mode 100644
index 0000000000..cefc04ebd0
--- /dev/null
+++ b/src/files-and-videos/videos-page/data/thunks.js
@@ -0,0 +1,814 @@
+/* eslint-disable no-param-reassign */
+import { camelCase, isEmpty } from 'lodash';
+import { getConfig, camelCaseObject } from '@edx/frontend-platform';
+import { RequestStatus } from '../../../data/constants';
+import {
+  addModels,
+  removeModel,
+  updateModel,
+  updateModels,
+} from '../../../generic/model-store';
+import {
+  addThumbnail,
+  addVideo,
+  deleteVideo,
+  fetchVideoList,
+  getVideos,
+  uploadVideo,
+  getDownload,
+  deleteTranscript,
+  downloadTranscript,
+  uploadTranscript,
+  getVideoUsagePaths,
+  deleteTranscriptPreferences,
+  sendVideoUploadStatus,
+  setTranscriptCredentials,
+  setTranscriptPreferences,
+  getAllUsagePaths,
+} from './api';
+import {
+  setVideoIds,
+  setPageSettings,
+  updateLoadingStatus,
+  deleteVideoSuccess,
+  updateErrors,
+  clearErrors,
+  updateEditStatus,
+  updateTranscriptCredentialsSuccess,
+  updateTranscriptPreferenceSuccess,
+  failAddVideo,
+} from './slice';
+import { ServerError } from './errors';
+import { updateFileValues } from './utils';
+
+let controllers = [];
+
+const updateVideoUploadStatus = async (courseId, edxVideoId, message, status) => {
+  await sendVideoUploadStatus(courseId, edxVideoId, message, status);
+};
+
+export function cancelAllUploads(courseId, uploadData) {
+  return async (dispatch) => {
+    if (controllers) {
+      controllers.forEach(control => {
+        control.abort();
+      });
+      Object.entries(uploadData).forEach(([key, value]) => {
+        if (value.status === RequestStatus.IN_PROGRESS) {
+          updateVideoUploadStatus(
+            courseId,
+            key,
+            'Upload failed',
+            'upload_failed',
+          );
+          dispatch(
+            updateErrors({
+              error: 'add',
+              message: `Cancelled upload for ${value.name}.`,
+            }),
+          );
+        }
+      });
+      dispatch(updateEditStatus({ editType: 'add', status: RequestStatus.FAILED }));
+    }
+    controllers = [];
+  };
+}
+
+export function fetchVideos(courseId) {
+  return async (dispatch) => {
+    dispatch(
+      updateLoadingStatus({ courseId, status: RequestStatus.IN_PROGRESS }),
+    );
+    try {
+      const { previousUploads, ...data } = await getVideos(courseId);
+      dispatch(setPageSettings({ ...data }));
+      // Previous uploads are the current videos associated with a course.
+      // If previous uploads are empty there is no need to add an empty model
+      // or loop through and empty list so automatically set loading to successful
+      if (isEmpty(previousUploads)) {
+        dispatch(
+          updateLoadingStatus({ courseId, status: RequestStatus.SUCCESSFUL }),
+        );
+      } else {
+        const parsedVideos = updateFileValues(previousUploads);
+        const videoIds = parsedVideos.map((video) => video.id);
+        dispatch(addModels({ modelType: 'videos', models: parsedVideos }));
+        dispatch(setVideoIds({ videoIds }));
+        dispatch(
+          updateLoadingStatus({ courseId, status: RequestStatus.PARTIAL }),
+        );
+        const allUsageLocations = await getAllUsagePaths({
+          courseId,
+          videoIds,
+        });
+        dispatch(
+          updateModels({ modelType: 'videos', models: allUsageLocations }),
+        );
+        dispatch(
+          updateLoadingStatus({ courseId, status: RequestStatus.SUCCESSFUL }),
+        );
+      }
+    } catch (error) {
+      if (error.response && error.response.status === 403) {
+        dispatch(updateLoadingStatus({ status: RequestStatus.DENIED }));
+      } else {
+        dispatch(
+          updateErrors({ error: 'loading', message: 'Failed to load videos' }),
+        );
+        dispatch(
+          updateLoadingStatus({ courseId, status: RequestStatus.FAILED }),
+        );
+      }
+    }
+  };
+}
+
+export function resetErrors({ errorType }) {
+  return (dispatch) => {
+    dispatch(clearErrors({ error: errorType }));
+  };
+}
+
+export function updateVideoOrder(courseId, videoIds) {
+  return async (dispatch) => {
+    dispatch(
+      updateLoadingStatus({ courseId, status: RequestStatus.IN_PROGRESS }),
+    );
+    dispatch(setVideoIds({ videoIds }));
+    dispatch(
+      updateLoadingStatus({ courseId, status: RequestStatus.SUCCESSFUL }),
+    );
+  };
+}
+
+export function deleteVideoFile(courseId, id) {
+  return async (dispatch) => {
+    dispatch(
+      updateEditStatus({
+        editType: 'delete',
+        status: RequestStatus.IN_PROGRESS,
+      }),
+    );
+    try {
+      await deleteVideo(courseId, id);
+      dispatch(deleteVideoSuccess({ videoId: id }));
+      dispatch(removeModel({ modelType: 'videos', id }));
+      dispatch(
+        updateEditStatus({
+          editType: 'delete',
+          status: RequestStatus.SUCCESSFUL,
+        }),
+      );
+    } catch (error) {
+      dispatch(
+        updateErrors({
+          error: 'delete',
+          message: `Failed to delete file id ${id}.`,
+        }),
+      );
+      dispatch(
+        updateEditStatus({ editType: 'delete', status: RequestStatus.FAILED }),
+      );
+    }
+  };
+}
+
+export function markVideoUploadsInProgressAsFailed({ uploadingIdsRef, courseId }) {
+  return (dispatch) => {
+    Object.keys(uploadingIdsRef.current.uploadData).forEach((edxVideoId) => {
+      try {
+        updateVideoUploadStatus(
+          courseId,
+          edxVideoId || '',
+          'Upload failed',
+          'upload_failed',
+        );
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.error(`Failed to send "Failed" upload status for ${edxVideoId} onbeforeunload`);
+      }
+      dispatch(updateEditStatus({ editType: 'add', status: '' }));
+    });
+  };
+}
+
+const addVideoToEdxVal = async (courseId, file, dispatch) => {
+  const currentController = new AbortController();
+  controllers.push(currentController);
+  try {
+    const createUrlResponse = await addVideo(courseId, file, currentController);
+    // eslint-disable-next-line
+    console.log(`Post Response: ${JSON.stringify(createUrlResponse)}`);
+    if (createUrlResponse.status < 200 || createUrlResponse.status >= 300) {
+      dispatch(failAddVideo({ fileName: file.name }));
+    }
+    const [{ uploadUrl, edxVideoId }] = camelCaseObject(
+      createUrlResponse.data,
+    ).files;
+    return { uploadUrl, edxVideoId };
+  } catch (error) {
+    dispatch(failAddVideo({ fileName: file.name }));
+    return {};
+  }
+};
+
+const uploadToBucket = async ({
+  courseId,
+  uploadUrl,
+  file,
+  uploadingIdsRef,
+  edxVideoId,
+  dispatch,
+}) => {
+  const currentController = new AbortController();
+  controllers.push(currentController);
+  const currentVideoData = uploadingIdsRef.current.uploadData[edxVideoId];
+
+  try {
+    const putToServerResponse = await uploadVideo(
+      uploadUrl,
+      file,
+      uploadingIdsRef,
+      edxVideoId,
+      currentController,
+    );
+    if (
+      putToServerResponse.status < 200
+      || putToServerResponse.status >= 300
+    ) {
+      throw new ServerError(
+        'Server responded with an error status',
+        putToServerResponse.status,
+      );
+    } else {
+      uploadingIdsRef.current.uploadData[edxVideoId] = {
+        ...currentVideoData,
+        status: RequestStatus.SUCCESSFUL,
+      };
+      updateVideoUploadStatus(
+        courseId,
+        edxVideoId,
+        'Upload completed',
+        'upload_completed',
+      );
+    }
+    return false;
+  } catch (error) {
+    if (error.response && error.response.status === 413) {
+      const message = error.response.data.error;
+      dispatch(updateErrors({ error: 'add', message }));
+    } else {
+      dispatch(
+        updateErrors({
+          error: 'add',
+          message: `Failed to upload ${file.name}.`,
+        }),
+      );
+      uploadingIdsRef.current.uploadData[edxVideoId] = {
+        ...currentVideoData,
+        status: RequestStatus.FAILED,
+      };
+    }
+    updateVideoUploadStatus(
+      courseId,
+      edxVideoId || '',
+      'Upload failed',
+      'upload_failed',
+    );
+    return true;
+  }
+};
+
+const newUploadData = ({
+  status,
+  edxVideoId,
+  currentData,
+  key,
+  originalValue,
+}) => {
+  const newData = currentData;
+  if (edxVideoId && edxVideoId !== key) {
+    newData[edxVideoId] = { ...originalValue, status };
+    delete newData[key];
+    return newData;
+  }
+
+  newData[key] = { ...originalValue, status };
+  return newData;
+};
+
+export function addVideoFile(
+  courseId,
+  files,
+  videoIds,
+  uploadingIdsRef,
+) {
+  return async (dispatch) => {
+    dispatch(
+      updateEditStatus({ editType: 'add', status: RequestStatus.IN_PROGRESS }),
+    );
+    let hasFailure = false;
+    await Promise.all(files.map(async (file, idx) => {
+      const name = file?.name || `Video ${idx + 1}`;
+      const progress = 0;
+
+      uploadingIdsRef.current.uploadData = newUploadData({
+        status: RequestStatus.PENDING,
+        currentData: uploadingIdsRef.current.uploadData,
+        originalValue: { name, progress },
+        key: `video_${idx}`,
+      });
+
+      const { edxVideoId, uploadUrl } = await addVideoToEdxVal(courseId, file, dispatch);
+
+      if (uploadUrl && edxVideoId) {
+        uploadingIdsRef.current.uploadData = newUploadData({
+          status: RequestStatus.IN_PROGRESS,
+          currentData: uploadingIdsRef.current.uploadData,
+          originalValue: { name, progress },
+          key: `video_${idx}`,
+          edxVideoId,
+        });
+        hasFailure = await uploadToBucket({
+          courseId, uploadUrl, file, uploadingIdsRef, edxVideoId, dispatch,
+        });
+      } else {
+        hasFailure = true;
+        uploadingIdsRef.current.uploadData[idx] = {
+          status: RequestStatus.FAILED,
+          name,
+          progress,
+        };
+      }
+    }));
+
+    try {
+      const { videos } = await fetchVideoList(courseId);
+      const newVideos = videos.filter(
+        (video) => !videoIds.includes(video.edxVideoId),
+      );
+      const newVideoIds = newVideos.map((video) => video.edxVideoId);
+      const parsedVideos = updateFileValues(newVideos, true);
+      dispatch(addModels({ modelType: 'videos', models: parsedVideos }));
+      dispatch(setVideoIds({ videoIds: newVideoIds.concat(videoIds) }));
+    } catch (error) {
+      dispatch(
+        updateEditStatus({ editType: 'add', status: RequestStatus.FAILED }),
+      );
+      // eslint-disable-next-line
+      console.error(`fetchVideoList failed with message: ${error.message}`);
+      hasFailure = true;
+      dispatch(
+        updateErrors({ error: 'add', message: 'Failed to load videos' }),
+      );
+    }
+
+    if (hasFailure) {
+      dispatch(updateEditStatus({ editType: 'add', status: RequestStatus.FAILED }));
+    } else {
+      dispatch(updateEditStatus({ editType: 'add', status: RequestStatus.SUCCESSFUL }));
+    }
+
+    uploadingIdsRef.current = {
+      uploadData: {},
+      uploadCount: 0,
+    };
+  };
+}
+
+export function addVideoThumbnail({ file, videoId, courseId }) {
+  return async (dispatch) => {
+    dispatch(
+      updateEditStatus({
+        editType: 'thumbnail',
+        status: RequestStatus.IN_PROGRESS,
+      }),
+    );
+    dispatch(resetErrors({ errorType: 'thumbnail' }));
+    try {
+      const { imageUrl } = await addThumbnail({ courseId, videoId, file });
+      let thumbnail = imageUrl;
+      if (thumbnail.startsWith('/')) {
+        thumbnail = `${getConfig().STUDIO_BASE_URL}${imageUrl}`;
+      }
+      dispatch(
+        updateModel({
+          modelType: 'videos',
+          model: {
+            id: videoId,
+            thumbnail,
+          },
+        }),
+      );
+      dispatch(
+        updateEditStatus({
+          editType: 'thumbnail',
+          status: RequestStatus.SUCCESSFUL,
+        }),
+      );
+    } catch (error) {
+      if (error.response?.data?.error) {
+        const message = error.response.data.error;
+        dispatch(updateErrors({ error: 'thumbnail', message }));
+      } else {
+        dispatch(
+          updateErrors({
+            error: 'thumbnail',
+            message: `Failed to add thumbnail for video id ${videoId}.`,
+          }),
+        );
+      }
+      dispatch(
+        updateEditStatus({
+          editType: 'thumbnail',
+          status: RequestStatus.FAILED,
+        }),
+      );
+    }
+  };
+}
+
+export function deleteVideoTranscript({
+  language,
+  videoId,
+  transcripts,
+  apiUrl,
+}) {
+  return async (dispatch) => {
+    dispatch(
+      updateEditStatus({
+        editType: 'transcript',
+        status: RequestStatus.IN_PROGRESS,
+      }),
+    );
+
+    try {
+      await deleteTranscript({
+        videoId,
+        language,
+        apiUrl,
+      });
+      const updatedTranscripts = transcripts.filter(
+        (transcript) => transcript !== language,
+      );
+      const transcriptStatus = updatedTranscripts?.length > 0 ? 'transcribed' : 'notTranscribed';
+
+      dispatch(
+        updateModel({
+          modelType: 'videos',
+          model: {
+            id: videoId,
+            transcripts: updatedTranscripts,
+            transcriptStatus,
+          },
+        }),
+      );
+
+      dispatch(
+        updateEditStatus({
+          editType: 'transcript',
+          status: RequestStatus.SUCCESSFUL,
+        }),
+      );
+    } catch (error) {
+      dispatch(
+        updateErrors({
+          error: 'transcript',
+          message: `Failed to delete ${language} transcript.`,
+        }),
+      );
+      dispatch(
+        updateEditStatus({
+          editType: 'transcript',
+          status: RequestStatus.FAILED,
+        }),
+      );
+    }
+  };
+}
+
+export function downloadVideoTranscript({
+  language,
+  videoId,
+  filename,
+  apiUrl,
+}) {
+  return async (dispatch) => {
+    dispatch(
+      updateEditStatus({
+        editType: 'transcript',
+        status: RequestStatus.IN_PROGRESS,
+      }),
+    );
+
+    try {
+      await downloadTranscript({
+        videoId,
+        language,
+        apiUrl,
+        filename,
+      });
+      dispatch(
+        updateEditStatus({
+          editType: 'transcript',
+          status: RequestStatus.SUCCESSFUL,
+        }),
+      );
+    } catch (error) {
+      dispatch(
+        updateErrors({
+          error: 'transcript',
+          message: `Failed to download ${filename}.`,
+        }),
+      );
+      dispatch(
+        updateEditStatus({
+          editType: 'transcript',
+          status: RequestStatus.FAILED,
+        }),
+      );
+    }
+  };
+}
+
+export function uploadVideoTranscript({
+  language,
+  newLanguage,
+  videoId,
+  file,
+  apiUrl,
+  transcripts,
+}) {
+  return async (dispatch) => {
+    dispatch(
+      updateEditStatus({
+        editType: 'transcript',
+        status: RequestStatus.IN_PROGRESS,
+      }),
+    );
+    const isReplacement = !isEmpty(language);
+
+    try {
+      await uploadTranscript({
+        videoId,
+        language,
+        apiUrl,
+        file,
+        newLanguage,
+      });
+      let updatedTranscripts = transcripts;
+      if (isReplacement) {
+        const removeTranscript = transcripts.filter(
+          (transcript) => transcript !== language,
+        );
+        updatedTranscripts = [...removeTranscript, newLanguage];
+      } else {
+        updatedTranscripts = [...transcripts, newLanguage];
+      }
+
+      const transcriptStatus = updatedTranscripts?.length > 0 ? 'transcribed' : 'notTranscribed';
+
+      dispatch(
+        updateModel({
+          modelType: 'videos',
+          model: {
+            id: videoId,
+            transcripts: updatedTranscripts,
+            transcriptStatus,
+          },
+        }),
+      );
+
+      dispatch(
+        updateEditStatus({
+          editType: 'transcript',
+          status: RequestStatus.SUCCESSFUL,
+        }),
+      );
+    } catch (error) {
+      if (error.response?.data?.error) {
+        const message = error.response.data.error;
+        dispatch(updateErrors({ error: 'transcript', message }));
+      } else {
+        const message = isReplacement
+          ? `Failed to replace ${language} with ${newLanguage}.`
+          : `Failed to add ${newLanguage}.`;
+        dispatch(updateErrors({ error: 'transcript', message }));
+      }
+      dispatch(
+        updateEditStatus({
+          editType: 'transcript',
+          status: RequestStatus.FAILED,
+        }),
+      );
+    }
+  };
+}
+
+export function getUsagePaths({ video, courseId }) {
+  return async (dispatch) => {
+    dispatch(
+      updateEditStatus({
+        editType: 'usageMetrics',
+        status: RequestStatus.IN_PROGRESS,
+      }),
+    );
+
+    try {
+      const { usageLocations } = await getVideoUsagePaths({
+        videoId: video.id,
+        courseId,
+      });
+      const activeStatus = usageLocations?.length > 0 ? 'active' : 'inactive';
+
+      dispatch(
+        updateModel({
+          modelType: 'videos',
+          model: {
+            id: video.id,
+            usageLocations,
+            activeStatus,
+          },
+        }),
+      );
+      dispatch(
+        updateEditStatus({
+          editType: 'usageMetrics',
+          status: RequestStatus.SUCCESSFUL,
+        }),
+      );
+    } catch (error) {
+      dispatch(
+        updateErrors({
+          error: 'usageMetrics',
+          message: `Failed to get usage metrics for ${video.displayName}.`,
+        }),
+      );
+      dispatch(
+        updateEditStatus({
+          editType: 'usageMetrics',
+          status: RequestStatus.FAILED,
+        }),
+      );
+    }
+  };
+}
+
+export function fetchVideoDownload({ selectedRows, courseId }) {
+  return async (dispatch) => {
+    dispatch(
+      updateEditStatus({
+        editType: 'download',
+        status: RequestStatus.IN_PROGRESS,
+      }),
+    );
+    try {
+      const errors = await getDownload(selectedRows, courseId);
+      dispatch(
+        updateEditStatus({
+          editType: 'download',
+          status: RequestStatus.SUCCESSFUL,
+        }),
+      );
+      if (!isEmpty(errors)) {
+        errors.forEach((error) => {
+          dispatch(updateErrors({ error: 'download', message: error }));
+        });
+        dispatch(
+          updateEditStatus({
+            editType: 'download',
+            status: RequestStatus.FAILED,
+          }),
+        );
+      }
+    } catch (error) {
+      dispatch(
+        updateErrors({
+          error: 'download',
+          message: 'Failed to download zip file of videos.',
+        }),
+      );
+      dispatch(
+        updateEditStatus({
+          editType: 'download',
+          status: RequestStatus.FAILED,
+        }),
+      );
+    }
+  };
+}
+
+export function clearAutomatedTranscript({ courseId }) {
+  return async (dispatch) => {
+    dispatch(
+      updateEditStatus({
+        editType: 'transcript',
+        status: RequestStatus.IN_PROGRESS,
+      }),
+    );
+
+    try {
+      await deleteTranscriptPreferences(courseId);
+      dispatch(updateTranscriptPreferenceSuccess({ modified: new Date() }));
+      dispatch(
+        updateEditStatus({
+          editType: 'transcript',
+          status: RequestStatus.SUCCESSFUL,
+        }),
+      );
+    } catch (error) {
+      dispatch(
+        updateErrors({
+          error: 'transcript',
+          message: 'Failed to update order transcripts settings.',
+        }),
+      );
+      dispatch(
+        updateEditStatus({
+          editType: 'transcript',
+          status: RequestStatus.FAILED,
+        }),
+      );
+    }
+  };
+}
+
+export function updateTranscriptCredentials({ courseId, data }) {
+  return async (dispatch) => {
+    dispatch(
+      updateEditStatus({
+        editType: 'transcript',
+        status: RequestStatus.IN_PROGRESS,
+      }),
+    );
+
+    try {
+      await setTranscriptCredentials(courseId, data);
+      dispatch(
+        updateTranscriptCredentialsSuccess({
+          provider: camelCase(data.provider),
+        }),
+      );
+      dispatch(
+        updateEditStatus({
+          editType: 'transcript',
+          status: RequestStatus.SUCCESSFUL,
+        }),
+      );
+    } catch (error) {
+      dispatch(
+        updateErrors({
+          error: 'transcript',
+          message: `Failed to update ${data.provider} credentials.`,
+        }),
+      );
+      dispatch(
+        updateEditStatus({
+          editType: 'transcript',
+          status: RequestStatus.FAILED,
+        }),
+      );
+    }
+  };
+}
+
+export function updateTranscriptPreference({ courseId, data }) {
+  return async (dispatch) => {
+    dispatch(
+      updateEditStatus({
+        editType: 'transcript',
+        status: RequestStatus.IN_PROGRESS,
+      }),
+    );
+
+    try {
+      const preferences = await setTranscriptPreferences(courseId, data);
+      dispatch(updateTranscriptPreferenceSuccess(preferences));
+      dispatch(
+        updateEditStatus({
+          editType: 'transcript',
+          status: RequestStatus.SUCCESSFUL,
+        }),
+      );
+    } catch (error) {
+      if (error.response?.data?.error) {
+        const message = error.response.data.error;
+        dispatch(updateErrors({ error: 'transcript', message }));
+      } else {
+        dispatch(
+          updateErrors({
+            error: 'transcript',
+            message: `Failed to update ${data.provider} transcripts settings.`,
+          }),
+        );
+      }
+      dispatch(
+        updateEditStatus({
+          editType: 'transcript',
+          status: RequestStatus.FAILED,
+        }),
+      );
+    }
+  };
+}
diff --git a/src/files-and-videos/videos-page/data/thunks.test.js b/src/files-and-videos/videos-page/data/thunks.test.js
new file mode 100644
index 0000000000..dae6508ecc
--- /dev/null
+++ b/src/files-and-videos/videos-page/data/thunks.test.js
@@ -0,0 +1,76 @@
+import { addVideoFile } from './thunks';
+import * as api from './api';
+
+describe('addVideoFile', () => {
+  const dispatch = jest.fn();
+  const getState = jest.fn();
+  const courseId = 'course-123';
+  const mockFile = {
+    name: 'mockName',
+  };
+  const uploadingIdsRef = { current: { uploadData: {} } };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+  it('Should dispatch failed if url cannot be created.', async () => {
+    jest.spyOn(api, 'addVideo').mockResolvedValue({
+      status: 404,
+    });
+
+    await addVideoFile(courseId, [mockFile], undefined, uploadingIdsRef)(dispatch, getState);
+
+    expect(dispatch).toHaveBeenCalledWith({
+      payload: {
+        fileName: mockFile.name,
+      },
+      type: 'videos/failAddVideo',
+    });
+  });
+  it('Failed video upload dispatches updateEditStatus with failed, and sends the failure to the api', async () => {
+    const videoStatusMock = jest.spyOn(api, 'sendVideoUploadStatus').mockResolvedValue({
+      status: 200,
+    });
+    const mockEdxVideoId = 'iD';
+    jest.spyOn(api, 'addVideo').mockResolvedValue({
+      status: 200,
+      data: {
+        files: [
+          { edxVideoId: mockEdxVideoId, uploadUrl: 'a Url' },
+        ],
+      },
+    });
+    jest.spyOn(api, 'uploadVideo').mockResolvedValue({
+      status: 404,
+    });
+    await addVideoFile(courseId, [mockFile], undefined, uploadingIdsRef)(dispatch, getState);
+    expect(videoStatusMock).toHaveBeenCalledWith(courseId, mockEdxVideoId, 'Upload failed', 'upload_failed');
+    expect(dispatch).toHaveBeenCalledWith({
+      payload: {
+        error: 'add',
+        message: `Failed to upload ${mockFile.name}.`,
+      },
+
+      type: 'videos/updateErrors',
+    });
+  });
+  it('Successful video upload sends the success to the api', async () => {
+    const videoStatusMock = jest.spyOn(api, 'sendVideoUploadStatus').mockResolvedValue({
+      status: 200,
+    });
+    const mockEdxVideoId = 'iD';
+    jest.spyOn(api, 'addVideo').mockResolvedValue({
+      status: 200,
+      data: {
+        files: [
+          { edxVideoId: mockEdxVideoId, uploadUrl: 'a Url' },
+        ],
+      },
+    });
+    jest.spyOn(api, 'uploadVideo').mockResolvedValue({
+      status: 200,
+    });
+    await addVideoFile(courseId, [mockFile], undefined, uploadingIdsRef)(dispatch, getState);
+    expect(videoStatusMock).toHaveBeenCalledWith(courseId, mockEdxVideoId, 'Upload completed', 'upload_completed');
+  });
+});
diff --git a/src/files-and-videos/videos-page/data/utils.js b/src/files-and-videos/videos-page/data/utils.js
new file mode 100644
index 0000000000..c0e1afce9e
--- /dev/null
+++ b/src/files-and-videos/videos-page/data/utils.js
@@ -0,0 +1,292 @@
+import { ensureConfig, getConfig } from '@edx/frontend-platform';
+import { isArray, isEmpty } from 'lodash';
+import {
+  ASPECT_RATIO,
+  ASPECT_RATIO_ERROR_MARGIN,
+  MAX_HEIGHT,
+  MAX_WIDTH,
+  MIN_HEIGHT,
+  MIN_WIDTH,
+} from './constants';
+
+ensureConfig([
+  'STUDIO_BASE_URL',
+], 'Course Apps API service');
+
+export const updateFileValues = (files, isNewFile) => {
+  const updatedFiles = [];
+  files.forEach(file => {
+    const {
+      edxVideoId,
+      clientVideoId,
+      created,
+      courseVideoImageUrl,
+      transcripts,
+    } = file;
+
+    let wrapperType;
+    if (clientVideoId.endsWith('.mov')) {
+      wrapperType = 'MOV';
+    } else if (clientVideoId.endsWith('.mp4')) {
+      wrapperType = 'MP4';
+    } else {
+      wrapperType = 'Unknown';
+    }
+
+    let thumbnail = courseVideoImageUrl;
+    if (thumbnail && thumbnail.startsWith('/')) {
+      thumbnail = `${getConfig().STUDIO_BASE_URL}${thumbnail}`;
+    }
+    const transcriptStatus = transcripts?.length > 0 ? 'transcribed' : 'notTranscribed';
+
+    updatedFiles.push({
+      ...file,
+      displayName: clientVideoId,
+      id: edxVideoId,
+      wrapperType,
+      dateAdded: created.toString(),
+      usageLocations: isNewFile ? [] : null,
+      thumbnail,
+      transcriptStatus,
+      activeStatus: 'inactive',
+    });
+  });
+
+  return updatedFiles;
+};
+
+export const getFormattedDuration = (value) => {
+  if (!value || typeof value !== 'number' || value <= 0) {
+    return '00:00:00';
+  }
+  const seconds = Math.floor(value % 60);
+  const minutes = Math.floor((value / 60) % 60);
+  const hours = Math.floor((value / 360) % 60);
+  const zeroPad = (num) => String(num).padStart(2, '0');
+  return [hours, minutes, seconds].map(zeroPad).join(':');
+};
+
+export const getLanguages = (availableLanguages) => {
+  const languages = {};
+  availableLanguages?.forEach(language => {
+    const { languageCode, languageText } = language;
+    languages[languageCode] = languageText;
+  });
+  return languages;
+};
+
+export const getSortedTranscripts = (languages, transcripts) => {
+  const transcriptDisplayNames = [];
+  transcripts.forEach(transcript => {
+    const displayName = languages[transcript];
+    transcriptDisplayNames.push(displayName);
+  });
+
+  const sortedTranscripts = transcriptDisplayNames.sort();
+  const sortedTranscriptCodes = [];
+  sortedTranscripts.forEach(transcript => {
+    Object.entries(languages).forEach(([key, value]) => {
+      if (value === transcript) {
+        sortedTranscriptCodes.push(key);
+      }
+    });
+  });
+
+  return sortedTranscriptCodes;
+};
+
+export const getSupportedFormats = (supportedFileFormats) => {
+  if (isEmpty(supportedFileFormats)) {
+    return null;
+  }
+  if (isArray(supportedFileFormats)) {
+    return supportedFileFormats;
+  }
+  const supportedFormats = [];
+  Object.entries(supportedFileFormats).forEach(([key, value]) => {
+    let format;
+    if (isArray(value)) {
+      value.forEach(val => {
+        if (val === '.mov') {
+          format = key.replace('*', 'quicktime');
+        } else {
+          format = key.replace('*', val.substring(1));
+        }
+        supportedFormats.push(format);
+      });
+    } else {
+      if (value === '.mov') {
+        format = key.replace('*', 'quicktime');
+      } else {
+        format = key.replace('*', value.substring(1));
+      }
+      supportedFormats.push(format);
+    }
+  });
+  return supportedFormats;
+};
+
+/** createResampledFile({ canvasUrl, filename, mimeType })
+ * createResampledFile takes a canvasUrl, filename, and a valid mimeType. The
+ * canvasUrl is parsed and written to an 8-bit array of unsigned integers. The
+ * new array is saved to  a new file with the same filename as the original image.
+ * @param {string} canvasUrl - string of base64 URL for new image canvas
+ * @param {string} filename - string of the original image's filename
+ * @param {string} mimeType - string of mimeType for the canvas
+ * @return {File} new File object
+ */
+export const createResampledFile = ({ canvasUrl, filename, mimeType }) => {
+  const arr = canvasUrl.split(',');
+  const bstr = atob(arr[1]);
+  let n = bstr.length;
+  const u8arr = new Uint8Array(n);
+  while (n--) {
+    u8arr[n] = bstr.charCodeAt(n);
+  }
+  return new File([u8arr], filename, { type: mimeType });
+};
+
+/** resampleImage({ image, filename })
+ * resampledImage takes a canvasUrl, filename, and a valid mimeType. The
+ * canvasUrl is parsed and written to an 8-bit array of unsigned integers. The
+ * new array is saved to  a new file with the same filename as the original image.
+ * @param {File} canvasUrl - string of base64 URL for new image canvas
+ * @param {string} filename - string of the image's filename
+ * @return {array} array containing the base64 URL for the resampled image and the file containing the resampled image
+ */
+export const resampleImage = ({ image, filename }) => {
+  const canvas = document.createElement('canvas');
+  const ctx = canvas.getContext('2d');
+
+  // Determine new dimensions for image
+  if (image.naturalWidth > MAX_WIDTH) {
+    // Set dimensions to the maximum size
+    canvas.width = MAX_WIDTH;
+    canvas.height = MAX_HEIGHT;
+  } else if (image.naturalWidth < MIN_WIDTH) {
+    // Set dimensions to the minimum size
+    canvas.width = MIN_WIDTH;
+    canvas.height = MIN_HEIGHT;
+  } else {
+    // Set dimensions to the closest 16:9 ratio
+    const heightRatio = 9 / 16;
+    canvas.width = image.naturalWidth;
+    canvas.height = image.naturalWidth * heightRatio;
+  }
+  const cropLeft = (image.naturalWidth - canvas.width) / 2;
+  const cropTop = (image.naturalHeight - canvas.height) / 2;
+
+  ctx.drawImage(image, cropLeft, cropTop, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height);
+  const resampledFile = createResampledFile({ canvasUrl: canvas.toDataURL(), filename, mimeType: 'image/png' });
+  return resampledFile;
+};
+
+export const hasValidDimensions = ({ width, height }) => {
+  const imageAspectRatio = Math.abs((width / height) - ASPECT_RATIO);
+
+  if (width < MIN_WIDTH || height < MIN_HEIGHT) {
+    return false;
+  }
+  if (imageAspectRatio >= ASPECT_RATIO_ERROR_MARGIN) {
+    return false;
+  }
+  return true;
+};
+
+export const resampleFile = ({
+  file,
+  dispatch,
+  videoId,
+  courseId,
+  addVideoThumbnail,
+}) => {
+  const reader = new FileReader();
+  const image = new Image();
+  reader.onload = () => {
+    image.src = reader.result;
+    image.onload = () => {
+      const width = image.naturalWidth;
+      const height = image.naturalHeight;
+      if (!hasValidDimensions({ width, height })) {
+        const resampledFile = resampleImage({ image, filename: file.name });
+        dispatch(addVideoThumbnail({ courseId, videoId, file: resampledFile }));
+      } else {
+        dispatch(addVideoThumbnail({ courseId, videoId, file }));
+      }
+    };
+  };
+  reader.readAsDataURL(file);
+};
+
+export const getLanguageOptions = (keys, languages) => {
+  const options = {};
+  if (keys) {
+    keys.forEach(key => {
+      options[key] = languages[key];
+    });
+  }
+  return options;
+};
+
+export const getFidelityOptions = (fidelities) => {
+  const options = {};
+  Object.entries(fidelities).forEach(([key, value]) => {
+    const { display_name: displayName } = value;
+    options[key] = displayName;
+  });
+  return options;
+};
+
+export const checkCredentials = (transcriptCredentials) => {
+  const cieloHasCredentials = transcriptCredentials.cielo24;
+  const threePlayHasCredentials = transcriptCredentials['3PlayMedia'];
+  return [cieloHasCredentials, threePlayHasCredentials];
+};
+
+export const checkTranscriptionPlans = (transcriptionPlans) => {
+  let cieloIsValid = !isEmpty(transcriptionPlans.Cielo24);
+  let threePlayIsValid = !isEmpty(transcriptionPlans['3PlayMedia']);
+
+  if (cieloIsValid) {
+    const { fidelity, turnaround } = transcriptionPlans.Cielo24;
+    cieloIsValid = !isEmpty(fidelity) && !isEmpty(turnaround);
+  }
+
+  if (threePlayIsValid) {
+    const { languages, turnaround, translations } = transcriptionPlans['3PlayMedia'];
+    threePlayIsValid = !isEmpty(turnaround) && !isEmpty(languages) && !isEmpty(translations);
+  }
+
+  return [cieloIsValid, threePlayIsValid];
+};
+
+export const validateForm = (cieloHasCredentials, threePlayHasCredentials, provider, data) => {
+  const {
+    apiKey,
+    apiSecretKey,
+    username,
+    cielo24Fidelity,
+    cielo24Turnaround,
+    preferredLanguages,
+    threePlayTurnaround,
+    videoSourceLanguage,
+  } = data;
+  switch (provider) {
+    case 'Cielo24':
+      if (cieloHasCredentials) {
+        return !isEmpty(cielo24Fidelity) && !isEmpty(cielo24Turnaround)
+        && !isEmpty(preferredLanguages) && !isEmpty(videoSourceLanguage);
+      }
+      return !isEmpty(apiKey) && !isEmpty(username);
+    case '3PlayMedia':
+      if (threePlayHasCredentials) {
+        return !isEmpty(threePlayTurnaround) && !isEmpty(preferredLanguages) && !isEmpty(videoSourceLanguage);
+      }
+      return !isEmpty(apiKey) && !isEmpty(apiSecretKey);
+    case 'order':
+      return true;
+    default:
+      break;
+  }
+  return false;
+};
diff --git a/src/files-and-videos/videos-page/data/utils.test.js b/src/files-and-videos/videos-page/data/utils.test.js
new file mode 100644
index 0000000000..54ca8dee0f
--- /dev/null
+++ b/src/files-and-videos/videos-page/data/utils.test.js
@@ -0,0 +1,264 @@
+import 'jest-canvas-mock';
+import {
+  hasValidDimensions,
+  getSupportedFormats,
+  resampleImage,
+  createResampledFile,
+  validateForm,
+  checkTranscriptionPlans,
+} from './utils';
+
+describe('getSupportedFormats', () => {
+  it('should return null', () => {
+    const supportedFileFormats = getSupportedFormats('');
+    expect(supportedFileFormats).toBeNull();
+  });
+  it('should return provided supportedFileFormats', () => {
+    const expected = ['image/png', 'video/mp4'];
+    const actual = getSupportedFormats(expected);
+    expect(expected).toEqual(actual);
+  });
+  it('should return array of valid file types', () => {
+    const expected = ['image/png'];
+    const actual = getSupportedFormats({ 'image/*': '.png' });
+    expect(expected).toEqual(actual);
+  });
+  it('should return video/quicktime for .mov', () => {
+    const expected = ['video/quicktime'];
+    const actual = getSupportedFormats({ 'video/*': '.mov' });
+    expect(expected).toEqual(actual);
+  });
+  it('should return array of valid file types', () => {
+    const expected = ['video/mp4', 'video/quicktime'];
+    const actual = getSupportedFormats({ 'video/*': ['.mp4', '.mov'] });
+    expect(expected).toEqual(actual);
+  });
+});
+
+describe('createResampledFile', () => {
+  it('should return resampled file object', () => {
+    const expected = new File([{ name: 'imageName', size: 20000 }], 'testVALUEVALIDIMAGE');
+    const actual = createResampledFile({
+      canvasUrl: 'data:MimETYpe,sOMEUrl',
+      filename: 'imageName',
+      mimeType: 'sOmEuiMAge',
+    });
+
+    expect(expected).toEqual(actual);
+  });
+});
+
+describe('resampleImage', () => {
+  it('should return filename and file', () => {
+    const resampledFile = new File([{ name: 'testVALUEVALIDIMAGE', size: 20000 }], 'testVALUEVALIDIMAGE');
+    const image = document.createElement('img');
+    image.height = '800';
+    image.width = '800';
+    const actualImage = resampleImage({ image, filename: 'testVALUEVALIDIMAGE' });
+
+    expect(actualImage).toEqual(resampledFile);
+  });
+});
+
+describe('checkValidDimensions', () => {
+  it('returns false for images less than min width and min height', () => {
+    const image = { width: 500, height: 281 };
+    const actual = hasValidDimensions(image);
+    expect(actual).toBeFalsy();
+  });
+  it('returns false for images that do not have a 16:9 aspect ratio', () => {
+    const image = { width: 800, height: 800 };
+    const actual = hasValidDimensions(image);
+    expect(actual).toBeFalsy();
+  });
+  it('returns true for images that have a 16:9 aspect ratio and larger than min width/height', () => {
+    const image = { width: 1280, height: 720 };
+    const actual = hasValidDimensions(image);
+    expect(actual).toBeTruthy();
+  });
+});
+
+describe('validateForm', () => {
+  describe('provider equals Cielo24', () => {
+    describe('with credentials', () => {
+      it('should return false', () => {
+        const isValid = validateForm(
+          true,
+          false,
+          'Cielo24',
+          {
+            cielo24Fidelity: 'test-fidelity',
+            cielo24Turnaround: 'test-turnaround',
+            preferredLanguages: [],
+            videoSourceLanguage: 'test-source',
+          },
+        );
+        expect(isValid).toBeFalsy();
+      });
+      it('should return true', () => {
+        const isValid = validateForm(
+          true,
+          false,
+          'Cielo24',
+          {
+            cielo24Fidelity: 'test-fidelity',
+            cielo24Turnaround: 'test-turnaround',
+            preferredLanguages: ['test-language'],
+            videoSourceLanguage: 'test-source',
+          },
+        );
+        expect(isValid).toBeTruthy();
+      });
+    });
+    describe('with no credentials', () => {
+      it('should return false', () => {
+        const isValid = validateForm(
+          false,
+          false,
+          'Cielo24',
+          {
+            apiKey: 'test-key',
+            username: '',
+          },
+        );
+        expect(isValid).toBeFalsy();
+      });
+      it('should return true', () => {
+        const isValid = validateForm(
+          false,
+          false,
+          'Cielo24',
+          {
+            apiKey: 'test-key',
+            username: 'test-username',
+          },
+        );
+        expect(isValid).toBeTruthy();
+      });
+    });
+  });
+  describe('provider equals 3PlayMedia', () => {
+    describe('with credentials', () => {
+      it('should return false', () => {
+        const isValid = validateForm(
+          false,
+          true,
+          '3PlayMedia',
+          {
+            threePlayTurnaround: 'test-turnaround',
+            preferredLanguages: ['test-language'],
+            videoSourceLanguage: '',
+          },
+        );
+        expect(isValid).toBeFalsy();
+      });
+      it('should return true', () => {
+        const isValid = validateForm(
+          true,
+          true,
+          '3PlayMedia',
+          {
+            threePlayTurnaround: 'test-turnaround',
+            preferredLanguages: ['test-language'],
+            videoSourceLanguage: 'test-source',
+          },
+        );
+        expect(isValid).toBeTruthy();
+      });
+    });
+    describe('with no credentials', () => {
+      it('should return false', () => {
+        const isValid = validateForm(
+          true,
+          false,
+          '3PlayMedia',
+          {
+            apiKey: 'test-key',
+            username: '',
+          },
+        );
+        expect(isValid).toBeFalsy();
+      });
+      it('should return true', () => {
+        const isValid = validateForm(
+          false,
+          false,
+          '3PlayMedia',
+          {
+            apiKey: 'test-key',
+            apiSecretKey: 'test-username',
+          },
+        );
+        expect(isValid).toBeTruthy();
+      });
+    });
+  });
+  describe('provider equals order', () => {
+    it('should return true', () => {
+      const isValid = validateForm(
+        false,
+        false,
+        'order',
+        {},
+      );
+      expect(isValid).toBeTruthy();
+    });
+  });
+  describe('provider equals null', () => {
+    it('should return false', () => {
+      const isValid = validateForm(
+        false,
+        false,
+        null,
+        {},
+      );
+      expect(isValid).toBeFalsy();
+    });
+  });
+});
+
+describe('checkTranscriptionPlans', () => {
+  describe('invalid Cielo24 plan', () => {
+    it('Cielo24 is empty should return [false, false]', () => {
+      const expected = [false, false];
+      const actual = checkTranscriptionPlans({ '3PlayMedia': {} });
+      expect(actual).toEqual(expected);
+    });
+    it('Cielo24 is missing required atrribute fidelity should return [false, true]', () => {
+      const expected = [false, true];
+      const actual = checkTranscriptionPlans({
+        '3PlayMedia': {
+          languages: ['en'],
+          turnaround: 'test',
+          translations: { en: 'English' },
+        },
+        Cielo24: {
+          turnaround: ['tomorrow'],
+        },
+      });
+      expect(actual).toEqual(expected);
+    });
+  });
+  describe('invalid 3PlayMedia plan', () => {
+    it('3PlayMedia is empty should return [false, false]', () => {
+      const expected = [false, false];
+      const actual = checkTranscriptionPlans({ Cielo24: {} });
+      expect(actual).toEqual(expected);
+    });
+    it('3PlayMedia atrribute languages is empty should return [true, false]', () => {
+      const expected = [true, false];
+      const actual = checkTranscriptionPlans({
+        Cielo24: {
+          turnaround: ['tomorrow'],
+          fidelity: 'test',
+        },
+        '3PlayMedia': {
+          languages: [],
+          turnaround: 'test',
+          translations: { en: 'English' },
+        },
+      });
+      expect(actual).toEqual(expected);
+    });
+  });
+});
diff --git a/src/files-and-videos/videos-page/factories/mockApiResponses.jsx b/src/files-and-videos/videos-page/factories/mockApiResponses.jsx
new file mode 100644
index 0000000000..2fda8438d7
--- /dev/null
+++ b/src/files-and-videos/videos-page/factories/mockApiResponses.jsx
@@ -0,0 +1,318 @@
+import { RequestStatus } from '../../../data/constants';
+
+export const courseId = 'course';
+
+export const initialState = {
+  courseDetail: {
+    courseId,
+    status: 'sucessful',
+  },
+  videos: {
+    videoIds: ['mOckID0'],
+    pageSettings: {
+      transcriptAvailableLanguages: [
+        { languageCode: 'ar', languageText: 'Arabic' },
+        { languageCode: 'en', languageText: 'English' },
+        { languageCode: 'fr', languageText: 'French' },
+      ],
+      videoImageSettings: {
+        videoImageUploadEnabled: false,
+        maxSize: 2097152,
+        minSize: 2048,
+        maxWidth: 1280,
+        maxHeight: 720,
+        supportedFileFormats: {
+          '.bmp': 'image/bmp',
+          '.bmp2': 'image/x-ms-bmp',
+          '.gif': 'image/gif',
+          '.jpg': 'image/jpeg',
+          '.jpeg': 'image/jpeg',
+          '.png': 'image/png',
+        },
+      },
+      isVideoTranscriptEnabled: false,
+      activeTranscriptPreferences: null,
+      videoTranscriptSettings: {
+        transcriptDownloadHandlerUrl: '/transcript_download/',
+        transcriptUploadHandlerUrl: '/transcript_upload/',
+        transcriptDeleteHandlerUrl: `/transcript_delete/${courseId}`,
+        transcriptionPlans: {
+          Cielo24: {
+            turnaround: { PRIORITY: 'Priority (24 hours)' },
+            fidelity: {
+              PREMIUM: { display_name: 'Premium (95% accuracy)', languages: { en: 'English' } },
+              PROFESSIONAL: {
+                display_name: 'Professional (99% accuracy)',
+                languages: {
+                  ar: 'Arabic',
+                  en: 'English',
+                  fr: 'French',
+                  es: 'Spanish',
+                },
+              },
+            },
+          },
+          '3PlayMedia': {
+            turnaround: { two_hour: '2 hours' },
+            translations: {
+              es: ['en'],
+              en: ['ar', 'en', 'es', 'fr'],
+            },
+            languages: {
+              ar: 'Arabic',
+              en: 'English',
+              fr: 'French',
+              es: 'Spanish',
+            },
+          },
+        },
+      },
+      transcriptCredentials: { cielo24: false, '3PlayMedia': false },
+    },
+    loadingStatus: RequestStatus.IN_PROGRESS,
+    updatingStatus: '',
+    addingStatus: '',
+    deletingStatus: '',
+    usageStatus: '',
+    transcriptStatus: '',
+    errors: {
+      add: [],
+      delete: [],
+      thumbnail: [],
+      download: [],
+      usageMetrics: [],
+      transcript: [],
+      loading: '',
+    },
+  },
+  models: {
+    videos: {
+      mOckID0: {
+        id: 'mOckID0',
+        displayName: 'mOckID0.mp4',
+        wrapperType: 'video',
+        dateAdded: '',
+        thumbnail: '/video',
+        fileSize: null,
+        edx_video_id: 'mOckID0',
+        clientVideoId: 'mOckID0.mp4',
+        created: '',
+        courseVideoImageUrl: '/video',
+        transcripts: [],
+        status: 'In Progress',
+        downloadLink: 'http://mOckID0.mp4',
+      },
+    },
+  },
+};
+
+export const generateFetchVideosApiResponse = () => ({
+  image_upload_url: '/video_images/course',
+  video_handler_url: '/videos/course',
+  encodings_download_url: '/video_encodings_download/course',
+  default_video_image_url: '/static/studio/images/video-images/default_video_image.png',
+  previous_uploads: [
+    {
+      edx_video_id: 'mOckID1',
+      clientVideoId: 'mOckID1.mp4',
+      created: '',
+      courseVideoImageUrl: '/video',
+      transcripts: [],
+      status: 'Imported',
+      duration: 12333,
+      downloadLink: 'http://mOckID1.mp4',
+      fileSize: 213456354,
+    },
+    {
+      edx_video_id: 'mOckID5',
+      clientVideoId: 'mOckID5',
+      created: '',
+      courseVideoImageUrl: 'http:/video',
+      transcripts: ['en'],
+      status: 'Failed',
+      duration: 12,
+      downloadLink: 'http://mOckID5.mp4',
+    },
+    {
+      edx_video_id: 'mOckID3',
+      clientVideoId: 'mOckID3.mp4',
+      created: '',
+      courseVideoImageUrl: null,
+      transcripts: ['en'],
+      status: 'Ready',
+      duration: null,
+      downloadLink: '',
+      transcription_status: 'Transcript Failed',
+      error_description: 'Unable to process transcript request',
+    },
+  ],
+  concurrent_upload_limit: 4,
+  video_supported_file_formats: ['.mp4', '.mov'],
+  video_upload_max_file_size: '5',
+  video_image_settings: {
+    video_image_upload_enabled: true,
+    max_size: 2097152,
+    min_size: 2048,
+    max_width: 1280,
+    max_height: 720,
+    supported_file_formats: {
+      '.bmp': 'image/bmp',
+      '.bmp2': 'image/x-ms-bmp',
+      '.gif': 'image/gif',
+      '.jpg': 'image/jpeg',
+      '.jpeg': 'image/jpeg',
+      '.png': 'image/png',
+    },
+  },
+  is_video_transcript_enabled: true,
+  active_transcript_preferences: null,
+  transcript_credentials: {},
+  transcript_available_languages: [{ language_code: 'ab', language_text: 'Abkhazian' }],
+  video_transcript_settings: {
+    transcript_download_handler_url: '/transcript_download/',
+    transcript_upload_handler_url: '/transcript_upload/',
+    transcript_delete_handler_url: '/transcript_delete/course',
+    trancript_download_file_format: 'srt',
+    transcript_preferences_handler_url: '/transcript_preferences/course',
+    transcript_credentials_handler_url: '/transcript_credentials/course',
+    transcription_plans: {
+      Cielo24: {
+        display_name: 'Cielo24',
+        turnaround: { PRIORITY: 'Priority (24 hours)', STANDARD: 'Standard (48 hours)' },
+        fidelity: {
+          MECHANICAL: {
+            display_name: 'Mechanical (75% accuracy)',
+            languages: { nl: 'Dutch', en: 'English', fr: 'French' },
+          },
+          PREMIUM: { display_name: 'Premium (95% accuracy)', languages: { en: 'English' } },
+          PROFESSIONAL: {
+            display_name: 'Professional (99% accuracy)',
+            languages: { ar: 'Arabic', 'zh-tw': 'Chinese - Mandarin (Traditional)' },
+          },
+        },
+      },
+      '3PlayMedia': {
+        display_name: '3Play Media',
+        turnaround: {
+          two_hour: '2 hours',
+          same_day: 'Same day',
+          rush: '24 hours (rush)',
+          expedited: '2 days (expedited)',
+          standard: '4 days (standard)',
+          extended: '10 days (extended)',
+        },
+        languages: { en: 'English', el: 'Greek', zh: 'Chinese' },
+        translations: {
+          es: ['en'],
+          en: ['el', 'en', 'zh'],
+        },
+      },
+    },
+  },
+  pagination_context: {},
+});
+
+export const generateAddVideoApiResponse = () => ({
+  ok: true,
+  videos: [
+    {
+      edx_video_id: 'mOckID4',
+      clientVideoId: 'mOckID4.mov',
+      created: '',
+      courseVideoImageUrl: null,
+      transcripts: ['en'],
+      status: 'Uploaded',
+      duration: 168.001,
+    },
+  ],
+});
+
+export const generateEmptyApiResponse = () => ({
+  previousUploads: [],
+  image_upload_url: '/video_images/course',
+  video_handler_url: '/videos/course',
+  encodings_download_url: '/video_encodings_download/course',
+  default_video_image_url: '/static/studio/images/video-images/default_video_image.png',
+  concurrent_upload_limit: 4,
+  video_supported_file_formats: ['.mp4', '.mov'],
+  video_upload_max_file_size: '5',
+  video_image_settings: {
+    video_image_upload_enabled: true,
+    max_size: 2097152,
+    min_size: 2048,
+    max_width: 1280,
+    max_height: 720,
+    supported_file_formats: {
+      '.bmp': 'image/bmp',
+      '.bmp2': 'image/x-ms-bmp',
+      '.gif': 'image/gif',
+      '.jpg': 'image/jpeg',
+      '.jpeg': 'image/jpeg',
+      '.png': 'image/png',
+    },
+  },
+  is_video_transcript_enabled: false,
+  active_transcript_preferences: null,
+  transcript_credentials: {},
+  transcript_available_languages: [{ language_code: 'ab', language_text: 'Abkhazian' }],
+  video_transcript_settings: {
+    transcript_download_handler_url: '/transcript_download/',
+    transcript_upload_handler_url: '/transcript_upload/',
+    transcript_delete_handler_url: '/transcript_delete/course',
+    trancript_download_file_format: 'srt',
+    transcript_preferences_handler_url: '/transcript_preferences/course',
+    transcript_credentials_handler_url: '/transcript_credentials/course',
+    transcription_plans: {
+      Cielo24: {
+        display_name: 'Cielo24',
+        turnaround: { PRIORITY: 'Priority (24 hours)', STANDARD: 'Standard (48 hours)' },
+        fidelity: {
+          MECHANICAL: {
+            display_name: 'Mechanical (75% accuracy)',
+            languages: { nl: 'Dutch', en: 'English', fr: 'French' },
+          },
+          PREMIUM: { display_name: 'Premium (95% accuracy)', languages: { en: 'English' } },
+          PROFESSIONAL: {
+            display_name: 'Professional (99% accuracy)',
+            languages: { ar: 'Arabic', 'zh-tw': 'Chinese - Mandarin (Traditional)' },
+          },
+        },
+      },
+      '3PlayMedia': {
+        display_name: '3Play Media',
+        turnaround: {
+          two_hour: '2 hours',
+          same_day: 'Same day',
+          rush: '24 hours (rush)',
+          expedited: '2 days (expedited)',
+          standard: '4 days (standard)',
+          extended: '10 days (extended)',
+        },
+        languages: { en: 'English', el: 'Greek', zh: 'Chinese' },
+        translations: {
+          es: ['en'],
+          en: ['el', 'en', 'zh'],
+        },
+      },
+    },
+  },
+  pagination_context: {},
+});
+
+export const generateNewVideoApiResponse = () => ({
+  files: [{
+    edx_video_id: 'mOckID4',
+    upload_url: 'http://testing.org',
+  }],
+});
+
+export const getStatusValue = (status) => {
+  switch (status) {
+    case RequestStatus.DENIED:
+      return 403;
+    case RequestStatus.FAILED:
+      return 404;
+    default:
+      return 200;
+  }
+};
diff --git a/src/files-and-videos/videos-page/index.js b/src/files-and-videos/videos-page/index.js
new file mode 100644
index 0000000000..bb97e14716
--- /dev/null
+++ b/src/files-and-videos/videos-page/index.js
@@ -0,0 +1,13 @@
+import TranscriptSettings from './transcript-settings';
+import UploadModal from './upload-modal';
+import VideosPage from './VideosPage';
+import VideoThumbnail from './VideoThumbnail';
+import VideoInfoModalSidebar from './info-sidebar';
+
+export default VideosPage;
+export {
+  TranscriptSettings,
+  UploadModal,
+  VideoThumbnail,
+  VideoInfoModalSidebar,
+};
diff --git a/src/files-and-videos/videos-page/info-sidebar/InfoTab.jsx b/src/files-and-videos/videos-page/info-sidebar/InfoTab.jsx
new file mode 100644
index 0000000000..102acf8596
--- /dev/null
+++ b/src/files-and-videos/videos-page/info-sidebar/InfoTab.jsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Stack } from '@openedx/paragon';
+import { injectIntl, FormattedDate, FormattedMessage } from '@edx/frontend-platform/i18n';
+import { getFileSizeToClosestByte } from '../../../utils';
+import { getFormattedDuration } from '../data/utils';
+import messages from './messages';
+
+const InfoTab = ({ video }) => {
+  const fileSize = getFileSizeToClosestByte(video?.fileSize);
+  const duration = getFormattedDuration(video?.duration);
+
+  return (
+    <Stack className="mt-3">
+      <div className="font-weight-bold">
+        <FormattedMessage {...messages.dateAddedTitle} />
+      </div>
+      <FormattedDate
+        value={video?.dateAdded}
+        year="numeric"
+        month="short"
+        day="2-digit"
+        hour="numeric"
+        minute="numeric"
+      />
+      <div className="font-weight-bold mt-3">
+        <FormattedMessage {...messages.fileSizeTitle} />
+      </div>
+      {fileSize}
+      <div className="font-weight-bold mt-3">
+        <FormattedMessage {...messages.videoLengthTitle} />
+      </div>
+      {duration}
+    </Stack>
+  );
+};
+
+InfoTab.propTypes = {
+  video: PropTypes.shape({
+    duration: PropTypes.number.isRequired,
+    dateAdded: PropTypes.string.isRequired,
+    fileSize: PropTypes.number.isRequired,
+  }),
+};
+
+InfoTab.defaultProps = {
+  video: {},
+};
+
+export default injectIntl(InfoTab);
diff --git a/src/files-and-videos/videos-page/info-sidebar/TranscriptTab.jsx b/src/files-and-videos/videos-page/info-sidebar/TranscriptTab.jsx
new file mode 100644
index 0000000000..6c08860b0d
--- /dev/null
+++ b/src/files-and-videos/videos-page/info-sidebar/TranscriptTab.jsx
@@ -0,0 +1,152 @@
+import React, { useEffect, useState, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { useDispatch, useSelector } from 'react-redux';
+import { isEmpty } from 'lodash';
+import { Button, Stack } from '@openedx/paragon';
+import { Add } from '@openedx/paragon/icons';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+
+import ErrorAlert from '../../../editors/sharedComponents/ErrorAlerts/ErrorAlert';
+import { getLanguages, getSortedTranscripts } from '../data/utils';
+import Transcript from './transcript-item';
+import {
+  deleteVideoTranscript,
+  downloadVideoTranscript,
+  resetErrors,
+  uploadVideoTranscript,
+} from '../data/thunks';
+import { RequestStatus } from '../../../data/constants';
+import messages from './messages';
+
+const TranscriptTab = ({
+  video,
+  // injected
+  intl,
+}) => {
+  const dispatch = useDispatch();
+  const divRef = useRef(null);
+  const { transcriptStatus, errors } = useSelector(state => state.videos);
+  const {
+    transcriptAvailableLanguages,
+    videoTranscriptSettings,
+  } = useSelector(state => state.videos.pageSettings);
+  const {
+    transcriptDeleteHandlerUrl,
+    transcriptUploadHandlerUrl,
+    transcriptDownloadHandlerUrl,
+  } = videoTranscriptSettings;
+  const { transcripts, id, displayName } = video;
+  const languages = getLanguages(transcriptAvailableLanguages);
+  let sortedTranscripts = getSortedTranscripts(languages, transcripts);
+  const [previousSelection, setPreviousSelection] = useState(sortedTranscripts);
+
+  useEffect(() => {
+    dispatch(resetErrors({ errorType: 'transcript' }));
+    sortedTranscripts = getSortedTranscripts(languages, transcripts);
+    setPreviousSelection(sortedTranscripts);
+  }, [transcripts]);
+
+  const handleAddEmptyTranscript = () => {
+    setPreviousSelection(['', ...previousSelection]);
+    if (divRef?.current?.scrollTo) {
+      divRef.current.scrollTo({ top: 0, behavior: 'smooth' });
+    }
+  };
+
+  const handleTranscript = (data, actionType) => {
+    const {
+      language,
+      newLanguage,
+      file,
+    } = data;
+    dispatch(resetErrors({ errorType: 'transcript' }));
+    switch (actionType) {
+      case 'delete':
+        if (isEmpty(language)) {
+          const updatedSelection = previousSelection;
+          updatedSelection.shift();
+          setPreviousSelection(updatedSelection);
+        } else {
+          dispatch(deleteVideoTranscript({
+            language,
+            videoId: id,
+            apiUrl: transcriptDeleteHandlerUrl,
+            transcripts,
+          }));
+        }
+        break;
+      case 'download':
+        dispatch(downloadVideoTranscript({
+          filename: `${displayName}-${language}.srt`,
+          language,
+          videoId: id,
+          apiUrl: transcriptDownloadHandlerUrl,
+        }));
+        break;
+      case 'upload':
+        dispatch(uploadVideoTranscript({
+          language,
+          videoId: id,
+          apiUrl: transcriptUploadHandlerUrl,
+          newLanguage,
+          file,
+          transcripts,
+        }));
+        break;
+      default:
+        break;
+    }
+  };
+
+  return (
+    <Stack gap={3}>
+      <div ref={divRef} style={{ overflowY: 'auto', maxHeight: '310px' }} className="px-1 py-2">
+        <ErrorAlert
+          hideHeading={false}
+          isError={transcriptStatus === RequestStatus.FAILED && !isEmpty(errors.transcript)}
+        >
+          <ul className="p-0">
+            {errors.transcript.map(message => (
+              <li key={`transcript-error-${message}`} style={{ listStyle: 'none' }}>
+                {intl.formatMessage(messages.errorAlertMessage, { message })}
+              </li>
+            ))}
+          </ul>
+        </ErrorAlert>
+        {previousSelection.map(transcript => (
+          <Transcript
+            {...{
+              languages,
+              transcript,
+              previousSelection,
+              handleTranscript,
+            }}
+          />
+        ))}
+      </div>
+      <div className="border-top border-light-400">
+        <Button
+          variant="link"
+          iconBefore={Add}
+          size="sm"
+          className="text-primary-500 justify-content-start pl-0 pt-3"
+          onClick={handleAddEmptyTranscript}
+        >
+          {intl.formatMessage(messages.uploadButtonLabel)}
+        </Button>
+      </div>
+    </Stack>
+  );
+};
+
+TranscriptTab.propTypes = {
+  video: PropTypes.shape({
+    transcripts: PropTypes.arrayOf(PropTypes.string).isRequired,
+    id: PropTypes.string.isRequired,
+    displayName: PropTypes.string.isRequired,
+  }).isRequired,
+  // injected
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(TranscriptTab);
diff --git a/src/files-and-videos/videos-page/info-sidebar/TranscriptTab.test.jsx b/src/files-and-videos/videos-page/info-sidebar/TranscriptTab.test.jsx
new file mode 100644
index 0000000000..d7a05d9ca5
--- /dev/null
+++ b/src/files-and-videos/videos-page/info-sidebar/TranscriptTab.test.jsx
@@ -0,0 +1,330 @@
+import {
+  render,
+  act,
+  fireEvent,
+  screen,
+  waitFor,
+} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import ReactDOM from 'react-dom';
+
+import {
+  initializeMockApp,
+} from '@edx/frontend-platform';
+import MockAdapter from 'axios-mock-adapter';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { AppProvider } from '@edx/frontend-platform/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import initializeStore from '../../../store';
+import { executeThunk } from '../../../utils';
+import { RequestStatus } from '../../../data/constants';
+import TranscriptTab from './TranscriptTab';
+import {
+  courseId,
+  initialState,
+} from '../factories/mockApiResponses';
+
+import { getApiBaseUrl } from '../data/api';
+import messages from './messages';
+import transcriptRowMessages from './transcript-item/messages';
+import VideosPageProvider from '../VideosPageProvider';
+import { deleteVideoTranscript } from '../data/thunks';
+
+ReactDOM.createPortal = jest.fn(node => node);
+
+const defaultProps = {
+  id: 'mOckID0',
+  displayName: 'mOckID0.mp4',
+  wrapperType: 'video',
+  dateAdded: '',
+  thumbnail: '/video',
+  fileSize: null,
+  edx_video_id: 'mOckID0',
+  clientVideoId: 'mOckID0.mp4',
+  created: '',
+  courseVideoImageUrl: '/video',
+  transcripts: [],
+  status: 'Imported',
+};
+
+let axiosMock;
+let store;
+jest.mock('file-saver');
+
+const renderComponent = (props) => {
+  render(
+    <IntlProvider locale="en">
+      <AppProvider store={store}>
+        <VideosPageProvider courseId={courseId}>
+          <TranscriptTab video={props} />
+        </VideosPageProvider>
+      </AppProvider>
+    </IntlProvider>,
+  );
+};
+
+describe('TranscriptTab', () => {
+  beforeEach(async () => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: false,
+        roles: [],
+      },
+    });
+    store = initializeStore(initialState);
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+  });
+
+  describe('with no transcripts preloaded', () => {
+    it('should have add transcript button', async () => {
+      renderComponent(defaultProps);
+      const addButton = screen.getByText(messages.uploadButtonLabel.defaultMessage);
+      const transcriptRow = screen.queryByTestId('transcript', { exact: false });
+      expect(addButton).toBeInTheDocument();
+      expect(transcriptRow).toBeNull();
+    });
+
+    it('should delete empty transcript row', async () => {
+      renderComponent(defaultProps);
+      const addButton = screen.getByText(messages.uploadButtonLabel.defaultMessage);
+      await act(async () => { fireEvent.click(addButton); });
+
+      const deleteButton = screen.getByLabelText('delete empty transcript');
+      await act(async () => { fireEvent.click(deleteButton); });
+
+      expect(screen.getByText(transcriptRowMessages.deleteConfirmationHeader.defaultMessage)).toBeVisible();
+
+      const confirmButton = screen.getByText(transcriptRowMessages.confirmDeleteLabel.defaultMessage);
+      await act(async () => { fireEvent.click(confirmButton); });
+
+      expect(screen.queryByTestId('transcript-')).toBeNull();
+    });
+
+    describe('uploadVideoTranscript as add function', () => {
+      let addButton;
+      const file = new File(['(⌐□_□)'], 'download.srt', { type: 'text/srt' });
+      beforeEach(async () => {
+        renderComponent(defaultProps);
+        addButton = screen.getByText(messages.uploadButtonLabel.defaultMessage);
+
+        await act(async () => { fireEvent.click(addButton); });
+      });
+
+      it('should upload new transcript', async () => {
+        axiosMock.onPost(`${getApiBaseUrl()}/transcript_upload/`).reply(204);
+        await act(async () => {
+          const addFileInput = screen.getByLabelText('file-input');
+          expect(addFileInput).toBeInTheDocument();
+
+          userEvent.upload(addFileInput, file);
+        });
+        const addStatus = store.getState().videos.transcriptStatus;
+
+        expect(addStatus).toEqual(RequestStatus.SUCCESSFUL);
+      });
+
+      it('should show default error message', async () => {
+        axiosMock.onPost(`${getApiBaseUrl()}/transcript_upload/`).reply(404);
+        await act(async () => {
+          const addFileInput = screen.getByLabelText('file-input');
+          userEvent.upload(addFileInput, file);
+        });
+        const addStatus = store.getState().videos.transcriptStatus;
+
+        expect(addStatus).toEqual(RequestStatus.FAILED);
+
+        expect(screen.getAllByText('Failed to add .')[0]).toBeVisible();
+      });
+
+      it('should show api provided error message', async () => {
+        axiosMock.onPost(`${getApiBaseUrl()}/transcript_upload/`).reply(404, { error: 'api error' });
+        await act(async () => {
+          const addFileInput = screen.getByLabelText('file-input');
+          userEvent.upload(addFileInput, file);
+        });
+        const addStatus = store.getState().videos.transcriptStatus;
+
+        expect(addStatus).toEqual(RequestStatus.FAILED);
+
+        expect(screen.getAllByText('api error')[0]).toBeVisible();
+      });
+    });
+  });
+
+  describe('with one transcripts preloaded', () => {
+    const updatedProps = { ...defaultProps, transcripts: ['ar'] };
+    beforeEach(() => {
+      renderComponent(updatedProps);
+    });
+
+    it('should contain transcript row', () => {
+      const addButton = screen.getByText(messages.uploadButtonLabel.defaultMessage);
+      const transcriptRow = screen.getByTestId('transcript-ar');
+      expect(addButton).toBeInTheDocument();
+      expect(transcriptRow).toBeInTheDocument();
+    });
+
+    describe('deleteVideoTranscript', () => {
+      beforeEach(async () => {
+        const menuButton = screen.getByTestId('ar-transcript-menu');
+        await waitFor(() => {
+          fireEvent.click(menuButton);
+        });
+
+        const deleteButton = screen.getByText(transcriptRowMessages.deleteTranscript.defaultMessage).closest('button');
+        fireEvent.click(deleteButton);
+      });
+
+      it('should open delete confirmation modal and cancel delete', async () => {
+        const cancelButton = screen.getByText(transcriptRowMessages.cancelDeleteLabel.defaultMessage);
+        await waitFor(() => {
+          fireEvent.click(cancelButton);
+        });
+
+        expect(screen.queryByText(transcriptRowMessages.deleteConfirmationHeader.defaultMessage)).toBeNull();
+      });
+
+      it('should open delete confirmation modal and handle delete', async () => {
+        const confirmButton = screen.getByText(transcriptRowMessages.confirmDeleteLabel.defaultMessage);
+        axiosMock.onDelete(`${getApiBaseUrl()}/transcript_delete/${courseId}/mOckID0/ar`).reply(204);
+        await act(async () => {
+          fireEvent.click(confirmButton);
+          executeThunk(deleteVideoTranscript({
+            language: 'ar',
+            videoId: updatedProps.id,
+            transcripts: updatedProps.transcripts,
+            apiUrl: `/transcript_delete/${courseId}`,
+          }), store.dispatch);
+        });
+        const deleteStatus = store.getState().videos.transcriptStatus;
+
+        expect(deleteStatus).toEqual(RequestStatus.SUCCESSFUL);
+
+        expect(screen.queryByText(transcriptRowMessages.deleteConfirmationHeader.defaultMessage)).toBeNull();
+      });
+
+      it('should show error message', async () => {
+        const confirmButton = screen.getByText(transcriptRowMessages.confirmDeleteLabel.defaultMessage);
+        axiosMock.onDelete(`${getApiBaseUrl()}/transcript_delete/${courseId}/mOckID0/ar`).reply(404);
+        await act(async () => {
+          fireEvent.click(confirmButton);
+          executeThunk(deleteVideoTranscript({
+            language: 'ar',
+            videoId: updatedProps.id,
+            transcripts: updatedProps.transcripts,
+            apiUrl: `/transcript_delete/${courseId}`,
+          }), store.dispatch);
+        });
+        const deleteStatus = store.getState().videos.transcriptStatus;
+
+        expect(deleteStatus).toEqual(RequestStatus.FAILED);
+
+        expect(screen.queryByText(transcriptRowMessages.deleteConfirmationHeader.defaultMessage)).toBeNull();
+
+        expect(screen.getAllByText('Failed to delete ar transcript.')[0]).toBeVisible();
+      });
+    });
+
+    describe('downloadVideoTranscript', () => {
+      let downloadButton;
+      beforeEach(async () => {
+        const menuButton = screen.getByTestId('ar-transcript-menu');
+        await waitFor(() => {
+          fireEvent.click(menuButton);
+        });
+        downloadButton = screen.getByText(
+          transcriptRowMessages.downloadTranscript.defaultMessage,
+        ).closest('button');
+      });
+
+      it('should download transcript', async () => {
+        axiosMock.onGet(
+          `${getApiBaseUrl()}/transcript_download/?edx_video_id=${updatedProps.id}&language_code=ar`,
+        ).reply(200, 'string of transcript');
+        await act(async () => {
+          fireEvent.click(downloadButton);
+        });
+        const downloadStatus = store.getState().videos.transcriptStatus;
+
+        expect(downloadStatus).toEqual(RequestStatus.SUCCESSFUL);
+      });
+
+      it('should show error message', async () => {
+        const filename = 'mOckID0.mp4-ar.srt';
+        axiosMock.onGet(
+          `${getApiBaseUrl()}/transcript_download/?edx_video_id=${updatedProps.id}&language_code=ar`,
+        ).reply(404);
+        await act(async () => {
+          fireEvent.click(downloadButton);
+        });
+        const downloadStatus = store.getState().videos.transcriptStatus;
+
+        expect(downloadStatus).toEqual(RequestStatus.FAILED);
+
+        expect(screen.getAllByText(`Failed to download ${filename}.`)[0]).toBeVisible();
+      });
+    });
+  });
+
+  describe('with multiple transcripts preloaded', () => {
+    describe('uploadVideoTranscript as replace function', () => {
+      const file = new File(['(⌐□_□)'], 'download.srt', { type: 'text/srt' });
+      beforeEach(async () => {
+        const updatedProps = { ...defaultProps, transcripts: ['fr', 'ar'] };
+        renderComponent(updatedProps);
+        const dropdownButton = screen.getAllByTestId('language-select-dropdown')[0];
+        await waitFor(() => {
+          fireEvent.click(dropdownButton);
+        });
+
+        const englishOption = screen.getByText('English');
+        await act(async () => {
+          fireEvent.click(englishOption);
+        });
+
+        const menuButton = screen.getByTestId('ar-transcript-menu');
+        await waitFor(() => {
+          fireEvent.click(menuButton);
+        });
+        const replaceButton = screen.getByText(
+          transcriptRowMessages.replaceTranscript.defaultMessage,
+        ).closest('button');
+        fireEvent.click(replaceButton);
+      });
+
+      it('should replace transcript', async () => {
+        axiosMock.onPost(`${getApiBaseUrl()}/transcript_upload/`).reply(204);
+
+        await act(async () => {
+          const addFileInput = screen.getAllByLabelText('file-input')[0];
+          userEvent.upload(addFileInput, file);
+        });
+        const addStatus = store.getState().videos.transcriptStatus;
+
+        expect(addStatus).toEqual(RequestStatus.SUCCESSFUL);
+
+        const updatedTranscripts = store.getState().models.videos[defaultProps.id].transcripts;
+
+        expect(updatedTranscripts).toEqual(['fr', 'en']);
+      });
+
+      it('should show error message', async () => {
+        axiosMock.onPost(`${getApiBaseUrl()}/transcript_upload/`).reply(404);
+
+        await act(async () => {
+          const addFileInput = screen.getAllByLabelText('file-input')[0];
+          userEvent.upload(addFileInput, file);
+        });
+
+        const addStatus = store.getState().videos.transcriptStatus;
+
+        expect(addStatus).toEqual(RequestStatus.FAILED);
+
+        expect(screen.getAllByText('Failed to replace ar with en.')[0]).toBeVisible();
+      });
+    });
+  });
+});
diff --git a/src/files-and-videos/videos-page/info-sidebar/VideoInfoModalSidebar.jsx b/src/files-and-videos/videos-page/info-sidebar/VideoInfoModalSidebar.jsx
new file mode 100644
index 0000000000..053587db0d
--- /dev/null
+++ b/src/files-and-videos/videos-page/info-sidebar/VideoInfoModalSidebar.jsx
@@ -0,0 +1,65 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import {
+  Tabs,
+  Tab,
+} from '@openedx/paragon';
+import InfoTab from './InfoTab';
+import TranscriptTab from './TranscriptTab';
+import messages from './messages';
+import { TRANSCRIPT_FAILURE_STATUSES } from '../data/constants';
+
+const VideoInfoModalSidebar = ({
+  video,
+  activeTab,
+  setActiveTab,
+  // injected
+  intl,
+}) => (
+  <Tabs
+    id="controlled-info-sidebar-tab"
+    activeKey={activeTab}
+    onSelect={(tab) => setActiveTab(tab)}
+  >
+    <Tab eventKey="fileInfo" title={intl.formatMessage(messages.infoTabTitle)}>
+      <InfoTab {...{ video }} />
+    </Tab>
+    <Tab
+      eventKey="fileTranscripts"
+      title={intl.formatMessage(
+        messages.transcriptTabTitle,
+        { transcriptCount: video.transcripts.length },
+      )}
+      notification={TRANSCRIPT_FAILURE_STATUSES.includes(video.transcriptionStatus) && (
+        <span>
+          <span className="sr-only">{intl.formatMessage(messages.notificationScreenReaderText)}</span>
+        </span>
+      )}
+    >
+      <TranscriptTab {...{ video }} />
+    </Tab>
+  </Tabs>
+);
+
+VideoInfoModalSidebar.propTypes = {
+  video: PropTypes.shape({
+    displayName: PropTypes.string.isRequired,
+    wrapperType: PropTypes.string.isRequired,
+    id: PropTypes.string.isRequired,
+    dateAdded: PropTypes.string.isRequired,
+    fileSize: PropTypes.number.isRequired,
+    transcripts: PropTypes.arrayOf(PropTypes.string),
+    transcriptionStatus: PropTypes.string.isRequired,
+  }),
+  activeTab: PropTypes.string.isRequired,
+  setActiveTab: PropTypes.func.isRequired,
+  // injected
+  intl: intlShape.isRequired,
+};
+
+VideoInfoModalSidebar.defaultProps = {
+  video: null,
+};
+
+export default injectIntl(VideoInfoModalSidebar);
diff --git a/src/files-and-videos/videos-page/info-sidebar/index.js b/src/files-and-videos/videos-page/info-sidebar/index.js
new file mode 100644
index 0000000000..78ef7160fe
--- /dev/null
+++ b/src/files-and-videos/videos-page/info-sidebar/index.js
@@ -0,0 +1,3 @@
+import VideoInfoModalSidebar from './VideoInfoModalSidebar';
+
+export default VideoInfoModalSidebar;
diff --git a/src/files-and-videos/videos-page/info-sidebar/messages.js b/src/files-and-videos/videos-page/info-sidebar/messages.js
new file mode 100644
index 0000000000..a1823e4667
--- /dev/null
+++ b/src/files-and-videos/videos-page/info-sidebar/messages.js
@@ -0,0 +1,45 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  infoTabTitle: {
+    id: 'course-authoring.video-uploads.file-info.infoTab.title',
+    defaultMessage: 'Info',
+    description: 'Title for info tab',
+  },
+  transcriptTabTitle: {
+    id: 'course-authoring.video-uploads.file-info.transcriptTab.title',
+    defaultMessage: 'Transcript ({transcriptCount})',
+    description: 'Title for info tab',
+  },
+  notificationScreenReaderText: {
+    id: 'course-authoring.video-uploads.file-info.transcriptTab.notification.screenReader.text',
+    defaultMessage: 'Transcription error',
+    description: 'Scrren reader text for transcript tab notification',
+  },
+  dateAddedTitle: {
+    id: 'course-authoring.video-uploads.file-info.infoTab.dateAdded.title',
+    defaultMessage: 'Date added',
+    description: 'Title for date added section',
+  },
+  fileSizeTitle: {
+    id: 'course-authoring.video-uploads.file-info.infoTab.fileSize.title',
+    defaultMessage: 'File size',
+    description: 'Title for file size section',
+  },
+  videoLengthTitle: {
+    id: 'course-authoring.video-uploads.file-info.infoTab.videoLength.title',
+    defaultMessage: 'Video length',
+    description: 'Title for video length section',
+  },
+  errorAlertMessage: {
+    id: 'course-authoring.files-and-upload.file-info.transcriptTab.errorAlert.message',
+    defaultMessage: '{message}',
+  },
+  uploadButtonLabel: {
+    id: 'course-authoriong.video-uploads.file-info.transcriptTab.upload.label',
+    defaultMessage: 'Add a transcript',
+    description: 'Label for upload button',
+  },
+});
+
+export default messages;
diff --git a/src/files-and-videos/videos-page/info-sidebar/transcript-item/LanguageSelect.jsx b/src/files-and-videos/videos-page/info-sidebar/transcript-item/LanguageSelect.jsx
new file mode 100644
index 0000000000..e0ab163c63
--- /dev/null
+++ b/src/files-and-videos/videos-page/info-sidebar/transcript-item/LanguageSelect.jsx
@@ -0,0 +1,115 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+
+import {
+  Button,
+  Icon,
+  ModalPopup,
+  Menu,
+  MenuItem,
+  useToggle,
+} from '@openedx/paragon';
+import { Check, ExpandMore, ExpandLess } from '@openedx/paragon/icons';
+import { isEmpty } from 'lodash';
+
+const LanguageSelect = ({
+  value,
+  previousSelection,
+  options,
+  handleSelect,
+  placeholderText,
+}) => {
+  const currentSelection = isEmpty(value) ? placeholderText : options[value];
+
+  const [isOpen, , close, toggle] = useToggle();
+  const [target, setTarget] = useState(null);
+
+  return (
+    <>
+      <div className="col-9 p-0">
+        <Button
+          variant="tertiary"
+          size="sm"
+          className="border border-gray-700 justify-content-between"
+          style={{ minWidth: '100%' }}
+          id={`language-select-dropdown-${currentSelection}`}
+          data-testid="language-select-dropdown"
+          iconAfter={isOpen ? ExpandLess : ExpandMore}
+          onClick={toggle}
+          ref={setTarget}
+        >
+          {currentSelection}
+        </Button>
+      </div>
+      <ModalPopup
+        placement="bottom-end"
+        positionRef={target}
+        isOpen={isOpen}
+        onClose={close}
+        onEscapeKey={close}
+      >
+        <Menu
+          className="language-select"
+        >
+          <div>
+            {Object.entries(options).map(([valueKey, text]) => {
+              if (valueKey === value) {
+                return (
+                  <MenuItem
+                    as={Button}
+                    variant="tertiary"
+                    size="sm"
+                    key={`${valueKey}-item`}
+                  >
+                    <Icon size="inline" src={Check} />
+                    <span className="pl-1">{text}</span>
+                  </MenuItem>
+                );
+              }
+              if (!previousSelection.includes(valueKey)) {
+                return (
+                  <MenuItem
+                    as={Button}
+                    variant="tertiary"
+                    size="sm"
+                    onClick={() => {
+                      handleSelect(valueKey);
+                      close();
+                    }}
+                    key={`${valueKey}-item`}
+                  >
+                    <span className="pl-3">{text}</span>
+                  </MenuItem>
+                );
+              }
+              return (
+                <MenuItem
+                  disabled
+                  variant="tertiary"
+                  as={Button}
+                  size="sm"
+                  key={`${valueKey}-item`}
+                >
+                  <span className="pl-3">{text}</span>
+                </MenuItem>
+              );
+            })}
+          </div>
+        </Menu>
+        <div className="row justify-content-center">
+          <Icon src={ExpandMore} size="xs" />
+        </div>
+      </ModalPopup>
+    </>
+  );
+};
+
+LanguageSelect.propTypes = {
+  value: PropTypes.string.isRequired,
+  options: PropTypes.shape({}).isRequired,
+  handleSelect: PropTypes.func.isRequired,
+  placeholderText: PropTypes.string.isRequired,
+  previousSelection: PropTypes.arrayOf(PropTypes.string).isRequired,
+};
+
+export default LanguageSelect;
diff --git a/src/files-and-videos/videos-page/info-sidebar/transcript-item/LanguageSelect.scss b/src/files-and-videos/videos-page/info-sidebar/transcript-item/LanguageSelect.scss
new file mode 100644
index 0000000000..e42eb28a11
--- /dev/null
+++ b/src/files-and-videos/videos-page/info-sidebar/transcript-item/LanguageSelect.scss
@@ -0,0 +1,24 @@
+.language-select {
+  padding: 8px 0;
+  margin: 0;
+  overflow-x: hidden;
+  max-height: 275px;
+  width: 300px;
+
+  @include pgn-box-shadow(2, "down");
+
+  .pgn__menu-item {
+    width: 100%;
+    justify-content: start;
+    font-weight: 400;
+
+    &:hover {
+      background-color: $light-300;
+    }
+
+    .pgn__menu-item-text {
+      display: flex;
+      align-items: center;
+    }
+  }
+}
diff --git a/src/files-and-videos/videos-page/info-sidebar/transcript-item/Transcript.jsx b/src/files-and-videos/videos-page/info-sidebar/transcript-item/Transcript.jsx
new file mode 100644
index 0000000000..88e435f98d
--- /dev/null
+++ b/src/files-and-videos/videos-page/info-sidebar/transcript-item/Transcript.jsx
@@ -0,0 +1,129 @@
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import {
+  Card,
+  Button,
+  Icon,
+  IconButton,
+  useToggle,
+} from '@openedx/paragon';
+import { DeleteOutline } from '@openedx/paragon/icons';
+import { injectIntl, FormattedMessage, intlShape } from '@edx/frontend-platform/i18n';
+import { isEmpty } from 'lodash';
+import LanguageSelect from './LanguageSelect';
+import TranscriptMenu from './TranscriptMenu';
+import messages from './messages';
+import { FileInput, useFileInput } from '../../../generic';
+
+const Transcript = ({
+  languages,
+  transcript,
+  previousSelection,
+  handleTranscript,
+  // injected
+  intl,
+}) => {
+  const [isConfirmationOpen, openConfirmation, closeConfirmation] = useToggle();
+  const [newLanguage, setNewLanguage] = useState(transcript);
+  const language = transcript;
+
+  useEffect(() => {
+    setNewLanguage(transcript);
+  }, [transcript]);
+
+  const input = useFileInput({
+    onAddFile: (files) => {
+      const [file] = files;
+      handleTranscript({
+        file,
+        language,
+        newLanguage,
+      }, 'upload');
+    },
+    setSelectedRows: () => {},
+    setAddOpen: () => {},
+  });
+
+  const updateLangauge = (selected) => {
+    setNewLanguage(selected);
+    if (isEmpty(language)) {
+      input.click();
+    }
+  };
+
+  return (
+    <>
+      {isConfirmationOpen ? (
+        <Card className="my-2">
+          <Card.Header className="h3" title={(<FormattedMessage {...messages.deleteConfirmationHeader} />)} />
+          <Card.Body>
+            <Card.Section>
+              <FormattedMessage {...messages.deleteConfirmationMessage} />
+            </Card.Section>
+            <Card.Footer>
+              <Button size="sm" variant="tertiary" className="mb-2 mb-sm-0" onClick={closeConfirmation}>
+                <FormattedMessage {...messages.cancelDeleteLabel} />
+              </Button>
+              <Button
+                variant="danger"
+                className="mb-2 mb-sm-0"
+                size="sm"
+                onClick={() => {
+                  handleTranscript({ language: transcript }, 'delete');
+                  closeConfirmation();
+                }}
+              >
+                <FormattedMessage {...messages.confirmDeleteLabel} />
+              </Button>
+            </Card.Footer>
+          </Card.Body>
+        </Card>
+      ) : (
+        <div
+          className="row m-0 align-items-center justify-content-between"
+          key={`transcript-${language}`}
+          data-testid={`transcript-${language}`}
+        >
+          <LanguageSelect
+            options={languages}
+            value={newLanguage}
+            placeholderText={intl.formatMessage(messages.languageSelectPlaceholder)}
+            previousSelection={previousSelection}
+            handleSelect={updateLangauge}
+          />
+          { transcript === '' ? (
+            <IconButton
+              iconAs={Icon}
+              src={DeleteOutline}
+              onClick={openConfirmation}
+              alt="delete empty transcript"
+            />
+          ) : (
+            <TranscriptMenu
+              {...{
+                language,
+                newLanguage,
+                setNewLanguage,
+                handleTranscript,
+                input,
+                launchDeleteConfirmation: openConfirmation,
+              }}
+            />
+          )}
+        </div>
+      )}
+      <FileInput key="transcript-input" fileInput={input} supportedFileFormats={['.srt']} />
+    </>
+  );
+};
+
+Transcript.propTypes = {
+  languages: PropTypes.shape({}).isRequired,
+  transcript: PropTypes.string.isRequired,
+  previousSelection: PropTypes.arrayOf(PropTypes.string).isRequired,
+  handleTranscript: PropTypes.func.isRequired,
+  // injected
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(Transcript);
diff --git a/src/files-and-videos/videos-page/info-sidebar/transcript-item/TranscriptMenu.jsx b/src/files-and-videos/videos-page/info-sidebar/transcript-item/TranscriptMenu.jsx
new file mode 100644
index 0000000000..aa3784bd6e
--- /dev/null
+++ b/src/files-and-videos/videos-page/info-sidebar/transcript-item/TranscriptMenu.jsx
@@ -0,0 +1,85 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage, injectIntl } from '@edx/frontend-platform/i18n';
+import {
+  Button,
+  Icon,
+  IconButton,
+  ModalPopup,
+  Menu,
+  MenuItem,
+  useToggle,
+} from '@openedx/paragon';
+import { MoreHoriz } from '@openedx/paragon/icons';
+
+import messages from './messages';
+
+export const TranscriptActionMenu = ({
+  language,
+  launchDeleteConfirmation,
+  handleTranscript,
+  input,
+}) => {
+  const [isOpen, , close, toggle] = useToggle();
+  const [target, setTarget] = useState(null);
+  return (
+    <>
+      <IconButton
+        src={MoreHoriz}
+        iconAs={Icon}
+        onClick={toggle}
+        ref={setTarget}
+        alt="Actions dropdown"
+        data-testid={`${language}-transcript-menu`}
+      />
+      <ModalPopup
+        placement="bottom-end"
+        positionRef={target}
+        isOpen={isOpen}
+        onClose={close}
+        onEscapeKey={close}
+      >
+        <Menu
+          className="transcript-menu"
+        >
+          <MenuItem
+            as={Button}
+            variant="tertiary"
+            key={`transcript-actions-${language}-replace`}
+            onClick={input.click}
+          >
+            <FormattedMessage {...messages.replaceTranscript} />
+          </MenuItem>
+          <MenuItem
+            as={Button}
+            variant="tertiary"
+            key={`transcript-actions-${language}-download`}
+            onClick={() => handleTranscript({ language }, 'download')}
+          >
+            <FormattedMessage {...messages.downloadTranscript} />
+          </MenuItem>
+          <hr className="my-2" />
+          <MenuItem
+            as={Button}
+            variant="tertiary"
+            key={`transcript-actions-${language}-delete`}
+            onClick={launchDeleteConfirmation}
+          >
+            <FormattedMessage {...messages.deleteTranscript} />
+          </MenuItem>
+        </Menu>
+      </ModalPopup>
+    </>
+  );
+};
+
+TranscriptActionMenu.propTypes = {
+  language: PropTypes.string.isRequired,
+  handleTranscript: PropTypes.func.isRequired,
+  launchDeleteConfirmation: PropTypes.func.isRequired,
+  input: PropTypes.shape({
+    click: PropTypes.func.isRequired,
+  }).isRequired,
+};
+
+export default injectIntl(TranscriptActionMenu);
diff --git a/src/files-and-videos/videos-page/info-sidebar/transcript-item/TranscriptMenu.scss b/src/files-and-videos/videos-page/info-sidebar/transcript-item/TranscriptMenu.scss
new file mode 100644
index 0000000000..5a21a8d129
--- /dev/null
+++ b/src/files-and-videos/videos-page/info-sidebar/transcript-item/TranscriptMenu.scss
@@ -0,0 +1,17 @@
+.transcript-menu {
+  padding: 8px 0;
+  margin: 0;
+  width: 250px;
+
+  @include pgn-box-shadow(2, "down");
+
+  .pgn__menu-item {
+    width: 100%;
+    justify-content: start;
+    font-weight: 400;
+
+    &:hover {
+      background-color: $light-300;
+    }
+  }
+}
diff --git a/src/files-and-videos/videos-page/info-sidebar/transcript-item/index.js b/src/files-and-videos/videos-page/info-sidebar/transcript-item/index.js
new file mode 100644
index 0000000000..9f14ebaa24
--- /dev/null
+++ b/src/files-and-videos/videos-page/info-sidebar/transcript-item/index.js
@@ -0,0 +1,3 @@
+import Transcript from './Transcript';
+
+export default Transcript;
diff --git a/src/files-and-videos/videos-page/info-sidebar/transcript-item/messages.js b/src/files-and-videos/videos-page/info-sidebar/transcript-item/messages.js
new file mode 100644
index 0000000000..b8b53f11ee
--- /dev/null
+++ b/src/files-and-videos/videos-page/info-sidebar/transcript-item/messages.js
@@ -0,0 +1,51 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  fileSizeError: {
+    id: 'course-authoriong.video-uploads.file-info.transcript.error.fileSizeError',
+    defaultMessage: 'Transcript file size exeeds the maximum. Please try again.',
+    description: 'Message presented to user when transcript file size is too large',
+  },
+  deleteTranscript: {
+    id: 'course-authoriong.video-uploads.file-info.transcript.deleteTranscript',
+    defaultMessage: 'Delete',
+    description: 'Message Presented To user for action to delete transcript',
+  },
+  replaceTranscript: {
+    id: 'course-authoriong.video-uploads.file-info.transcript.replaceTranscript',
+    defaultMessage: 'Replace',
+    description: 'Message Presented To user for action to replace transcript',
+  },
+  downloadTranscript: {
+    id: 'course-authoriong.video-uploads.file-info.transcript.downloadTranscript',
+    defaultMessage: 'Download',
+    description: 'Message Presented To user for action to download transcript',
+  },
+  languageSelectPlaceholder: {
+    id: 'course-authoriong.video-uploads.file-info.transcripts.languageSelectPlaceholder',
+    defaultMessage: 'Select language',
+    description: 'Placeholder For Dropdown, which allows users to set the language associtated with a transcript',
+  },
+  cancelDeleteLabel: {
+    id: 'course-authoriong.video-uploads.file-info.transcripts.cancelDeleteLabel',
+    defaultMessage: 'Cancel',
+    description: 'Label For Button, which allows users to stop the process of deleting a transcript',
+  },
+  confirmDeleteLabel: {
+    id: 'course-authoriong.video-uploads.file-info.transcripts.confirmDeleteLabel',
+    defaultMessage: 'Delete',
+    description: 'Label For Button, which allows users to confirm the process of deleting a transcript',
+  },
+  deleteConfirmationMessage: {
+    id: 'course-authoriong.video-uploads.file-info.transcripts.deleteConfirmationMessage',
+    defaultMessage: 'Are you sure you want to delete this transcript?',
+    description: 'Warning which allows users to select next step in the process of deleting a transcript',
+  },
+  deleteConfirmationHeader: {
+    id: 'course-authoriong.video-uploads.file-info.transcripts.deleteConfirmationTitle',
+    defaultMessage: 'Delete this transcript?',
+    description: 'Title for Warning which allows users to select next step in the process of deleting a transcript',
+  },
+});
+
+export default messages;
diff --git a/src/files-and-videos/videos-page/messages.js b/src/files-and-videos/videos-page/messages.js
new file mode 100644
index 0000000000..e6e25d8aa2
--- /dev/null
+++ b/src/files-and-videos/videos-page/messages.js
@@ -0,0 +1,91 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  heading: {
+    id: 'course-authoring.video-uploads.heading',
+    defaultMessage: 'Videos',
+    description: 'Title of the page',
+  },
+  transcriptSettingsButtonLabel: {
+    id: 'course-authoring.video-uploads.transcript-settings.button.toggle',
+    defaultMessage: 'Transcript settings',
+    description: 'Button text for transcript settings button',
+  },
+  thumbnailAltMessage: {
+    id: 'course-authoring.video-uploads.thumbnail.alt',
+    defaultMessage: '{displayName} video thumbnail',
+    description: 'Alternative text for video thumbnail image',
+  },
+  activeCheckboxLabel: {
+    id: 'course-authoring.files-and-videos.sort-and-filter.modal.filter.activeCheckbox.label',
+    defaultMessage: 'Active',
+    description: 'Checkbox label for Active checkbox in sort and filter modal',
+  },
+  inactiveCheckboxLabel: {
+    id: 'course-authoring.files-and-videos.sort-and-filter.modal.filter.inactiveCheckbox.label',
+    defaultMessage: 'Inactive',
+    description: 'Checkbox label for Inactive checkbox in sort and filter modal',
+  },
+  transcribedCheckboxLabel: {
+    id: 'course-authoring.files-and-videos.sort-and-filter.modal.filter.transcribedCheckbox.label',
+    defaultMessage: 'Transcribed',
+    description: 'Checkbox label for Transcribed checkbox in sort and filter modal',
+  },
+  notTranscribedCheckboxLabel: {
+    id: 'course-authoring.files-and-videos.sort-and-filter.modal.filter.notTranscribedCheckbox.label',
+    defaultMessage: 'Not transcribed',
+    description: 'Checkbox label for Not transcribed checkbox in sort and filter modal',
+  },
+  processingCheckboxLabel: {
+    id: 'course-authoring.files-and-videos.sort-and-filter.modal.filter.processingCheckbox.label',
+    defaultMessage: 'Processing',
+    description: 'Checkbox label for Processing checkbox in sort and filter modal',
+  },
+  failedCheckboxLabel: {
+    id: 'course-authoring.files-and-videos.sort-and-filter.modal.filter.failedCheckbox.label',
+    defaultMessage: 'Failed',
+    description: 'Checkbox label for Failed checkbox in sort and filter modal',
+  },
+  videoUploadAlertLabel: {
+    id: 'course-authoring.files-and-videos.video-upload-alert',
+    defaultMessage: 'Upload in progress. Please wait for the upload to complete before navigating away from this page.',
+    description: 'Message for video upload alert',
+  },
+  videoUploadTrackerModalTitle: {
+    id: 'course-authoring.files-and-videos.video-upload-tracker-modal.title',
+    defaultMessage: 'Upload in progress',
+    description: 'Title for the Upload Tracker Modal',
+  },
+  videoUploadTrackerAlertTitle: {
+    id: 'course-authoring.files-and-videos.video-upload-tracker-alert.title',
+    defaultMessage: 'Do not close or refresh this page or tab until uploads are complete',
+    description: 'Title for the Upload Tracker Alert',
+  },
+  videoUploadTrackerAlertBodyMessage: {
+    id: 'course-authoring.files-and-videos.video-upload-tracker-alert.body.message',
+    defaultMessage: 'Exiting now will delete all upload progress. This pop-up will close upon successful upload.',
+    description: 'Body text for the Upload Tracker Alert',
+  },
+  videoUploadTrackerAlertEditMessage: {
+    id: 'course-authoring.files-and-videos.video-upload-tracker-alert.edit.message',
+    defaultMessage: 'Want to continue editing in Studio during this upload?',
+    description: 'Continue editing message for the Upload Tracker Alert',
+  },
+  videoUploadTrackerAlertEditHyperlinkLabel: {
+    id: 'course-authoring.files-and-videos.video-upload-tracker-alert.edit-hyperlink.message',
+    defaultMessage: 'Open new Studio tab',
+    description: 'Label for hyperlink to open a new tab',
+  },
+  videoUploadTrackerModalBody: {
+    id: 'course-authoring.files-and-videos.video-upload-tracker-modal.body.message',
+    defaultMessage: 'The following ({uploadCount}) {uploadCount, plural, one {video is} other {videos are}} being uploaded:',
+    description: 'Message for upload tracker modal body',
+  },
+  videoUploadTrackerAlertCancelLabel: {
+    id: 'course-authoring.files-and-videos.video-upload-tracker-alert.cancel-button.label',
+    defaultMessage: 'Cancel uploads',
+    description: 'Label for cancel button',
+  },
+});
+
+export default messages;
diff --git a/src/files-and-videos/videos-page/transcript-settings/Cielo24Form.jsx b/src/files-and-videos/videos-page/transcript-settings/Cielo24Form.jsx
new file mode 100644
index 0000000000..4169d3fbf5
--- /dev/null
+++ b/src/files-and-videos/videos-page/transcript-settings/Cielo24Form.jsx
@@ -0,0 +1,125 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { isEmpty } from 'lodash';
+import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { Form, Stack, TransitionReplace } from '@openedx/paragon';
+import FormDropdown from './FormDropdown';
+import { getFidelityOptions } from '../data/utils';
+import messages from './messages';
+
+const Cielo24Form = ({
+  hasTranscriptCredentials,
+  data,
+  setData,
+  transcriptionPlan,
+  // injected
+  intl,
+}) => {
+  if (hasTranscriptCredentials) {
+    const { fidelity } = transcriptionPlan;
+    const selectedLanguage = data.preferredLanguages ? data.preferredLanguages : '';
+    const turnaroundOptions = transcriptionPlan.turnaround;
+    const fidelityOptions = getFidelityOptions(fidelity);
+    const sourceLanguageOptions = data.cielo24Fidelity ? fidelity[data.cielo24Fidelity]?.languages : {};
+    const languages = data.cielo24Fidelity === 'PROFESSIONAL' ? sourceLanguageOptions : {
+      [data.videoSourceLanguage]: sourceLanguageOptions[data.videoSourceLanguage],
+    };
+    return (
+      <Stack gap={1}>
+        <Form.Group size="sm">
+          <Form.Label className="h5">
+            <FormattedMessage {...messages.cieloTurnaroundLabel} />
+          </Form.Label>
+          <FormDropdown
+            value={data.cielo24Turnaround}
+            options={turnaroundOptions}
+            handleSelect={(value) => setData({ ...data, cielo24Turnaround: value })}
+            placeholderText={intl.formatMessage(messages.cieloTurnaroundPlaceholder)}
+          />
+        </Form.Group>
+        <Form.Group size="sm">
+          <Form.Label className="h5">
+            <FormattedMessage {...messages.cieloFidelityLabel} />
+          </Form.Label>
+          <FormDropdown
+            value={data.cielo24Fidelity}
+            options={fidelityOptions}
+            handleSelect={(value) => setData({ ...data, cielo24Fidelity: value, videoSourceLanguage: '' })}
+            placeholderText={intl.formatMessage(messages.cieloFidelityPlaceholder)}
+          />
+        </Form.Group>
+        <TransitionReplace>
+          {isEmpty(data.cielo24Fidelity) ? null : (
+            <Form.Group size="sm">
+              <Form.Label className="h5">
+                <FormattedMessage {...messages.cieloSourceLanguageLabel} />
+              </Form.Label>
+              <FormDropdown
+                value={data.videoSourceLanguage}
+                options={sourceLanguageOptions}
+                handleSelect={(value) => setData({ ...data, videoSourceLanguage: value, preferredLanguages: [] })}
+                placeholderText={intl.formatMessage(messages.cieloSourceLanguagePlaceholder)}
+              />
+            </Form.Group>
+          )}
+        </TransitionReplace>
+        <TransitionReplace>
+          {isEmpty(data.videoSourceLanguage) ? null : (
+            <Form.Group size="sm">
+              <Form.Label className="h5">
+                <FormattedMessage {...messages.cieloTranscriptLanguageLabel} />
+              </Form.Label>
+              <FormDropdown
+                value={selectedLanguage}
+                options={languages}
+                handleSelect={(value) => setData({ ...data, preferredLanguages: [value] })}
+                placeholderText={intl.formatMessage(messages.cieloTranscriptLanguagePlaceholder)}
+              />
+            </Form.Group>
+          )}
+        </TransitionReplace>
+      </Stack>
+    );
+  }
+
+  return (
+    <Stack gap={1}>
+      <div className="small" data-testid="cieloCredentialMessage">
+        <FormattedMessage {...messages.cieloCredentialMessage} />
+      </div>
+      <Form.Group size="sm">
+        <Form.Label className="h5">
+          <FormattedMessage {...messages.cieloApiKeyLabel} />
+        </Form.Label>
+        <Form.Control onBlur={(e) => setData({ ...data, apiKey: e.target.value })} />
+      </Form.Group>
+      <Form.Group size="sm">
+        <Form.Label className="h5">
+          <FormattedMessage {...messages.cieloUsernameLabel} />
+        </Form.Label>
+        <Form.Control onBlur={(e) => setData({ ...data, username: e.target.value })} />
+      </Form.Group>
+    </Stack>
+  );
+};
+
+Cielo24Form.propTypes = {
+  hasTranscriptCredentials: PropTypes.bool.isRequired,
+  data: PropTypes.shape({
+    apiKey: PropTypes.string,
+    apiSecretKey: PropTypes.string,
+    cielo24Turnaround: PropTypes.string,
+    cielo24Fidelity: PropTypes.string,
+    preferredLanguages: PropTypes.arrayOf(PropTypes.string),
+    videoSourceLanguage: PropTypes.string,
+  }).isRequired,
+  setData: PropTypes.func.isRequired,
+  transcriptionPlan: PropTypes.shape({
+    turnaround: PropTypes.shape({}),
+    fidelity: PropTypes.shape({}),
+  }).isRequired,
+  // injected
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(Cielo24Form);
diff --git a/src/files-and-videos/videos-page/transcript-settings/FormDropdown.jsx b/src/files-and-videos/videos-page/transcript-settings/FormDropdown.jsx
new file mode 100644
index 0000000000..c22f1598cc
--- /dev/null
+++ b/src/files-and-videos/videos-page/transcript-settings/FormDropdown.jsx
@@ -0,0 +1,73 @@
+import React from 'react';
+import { Dropdown, Form, Icon } from '@openedx/paragon';
+import PropTypes from 'prop-types';
+import { Check } from '@openedx/paragon/icons';
+import { isArray, isEmpty } from 'lodash';
+
+const FormDropdown = ({
+  value,
+  allowMultiple,
+  options,
+  handleSelect,
+  placeholderText,
+}) => {
+  let currentSelection;
+  if (isEmpty(value)) {
+    currentSelection = placeholderText;
+  } else {
+    currentSelection = isArray(value) && value.length > 1 ? 'Multiple' : options[value];
+  }
+
+  return (
+    <Dropdown
+      autoClose={allowMultiple ? 'outside' : true}
+    >
+      <Dropdown.Toggle
+        variant="teritary"
+        className="border border-gray-700 justify-content-between w-100"
+        id="transcript-form-dropdown"
+      >
+        <span className="mw-100" style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>
+          {currentSelection}
+        </span>
+      </Dropdown.Toggle>
+      <Dropdown.Menu className="m-0" style={{ maxHeight: '300px', overflowY: 'scroll' }}>
+        {Object.entries(options).map(([valueKey, text]) => {
+          if (allowMultiple) {
+            return (
+              <Dropdown.Item as={Form.Checkbox} checked={value.includes(valueKey)} onChange={(e) => handleSelect([valueKey, e.target.checked])} key={`${valueKey}-item`}>
+                {text}
+              </Dropdown.Item>
+            );
+          }
+          if (valueKey === value) {
+            return (
+              <Dropdown.Item key={`${valueKey}-item`}>
+                <Icon size="inline" src={Check} className="m-n2" /><span className="pl-3">{text}</span>
+              </Dropdown.Item>
+            );
+          }
+          return (
+            <Dropdown.Item onClick={() => handleSelect(valueKey)} key={`${valueKey}-item`}>
+              <span className="pl-3">{text}</span>
+            </Dropdown.Item>
+          );
+        })}
+      </Dropdown.Menu>
+    </Dropdown>
+  );
+};
+
+FormDropdown.propTypes = {
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]).isRequired,
+  allowMultiple: PropTypes.bool,
+  options: PropTypes.shape({}).isRequired,
+  handleSelect: PropTypes.func.isRequired,
+  placeholderText: PropTypes.string.isRequired,
+};
+
+FormDropdown.defaultProps = {
+  allowMultiple: false,
+};
+
+export default FormDropdown;
diff --git a/src/files-and-videos/videos-page/transcript-settings/OrderTranscriptForm.jsx b/src/files-and-videos/videos-page/transcript-settings/OrderTranscriptForm.jsx
new file mode 100644
index 0000000000..28e344e36c
--- /dev/null
+++ b/src/files-and-videos/videos-page/transcript-settings/OrderTranscriptForm.jsx
@@ -0,0 +1,211 @@
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import {
+  FormattedMessage,
+  FormattedDate,
+  injectIntl,
+  intlShape,
+} from '@edx/frontend-platform/i18n';
+import { Button, Stack } from '@openedx/paragon';
+import ErrorAlert from '../../../editors/sharedComponents/ErrorAlerts/ErrorAlert';
+import SelectableBox from '../../../editors/sharedComponents/SelectableBox';
+import Cielo24Form from './Cielo24Form';
+import ThreePlayMediaForm from './ThreePlayMediaForm';
+import { RequestStatus } from '../../../data/constants';
+import messages from './messages';
+import { checkCredentials, checkTranscriptionPlans, validateForm } from '../data/utils';
+
+const OrderTranscriptForm = ({
+  setTranscriptType,
+  activeTranscriptPreferences,
+  transcriptType,
+  transcriptCredentials,
+  closeTranscriptSettings,
+  handleOrderTranscripts,
+  transcriptionPlans,
+  errorMessages,
+  transcriptStatus,
+  // injected
+  intl,
+}) => {
+  const [data, setData] = useState(activeTranscriptPreferences || { videoSourceLanguage: '' });
+
+  const [validCieloTranscriptionPlan, validThreePlayTranscriptionPlan] = checkTranscriptionPlans(transcriptionPlans);
+  useEffect(() => {
+    setTranscriptType(activeTranscriptPreferences?.provider || 'order');
+  }, []);
+
+  let [cieloHasCredentials, threePlayHasCredentials] = checkCredentials(transcriptCredentials);
+  useEffect(() => {
+    [cieloHasCredentials, threePlayHasCredentials] = checkCredentials(transcriptCredentials);
+  }, [transcriptCredentials]);
+
+  let isFormValid = validateForm(cieloHasCredentials, threePlayHasCredentials, transcriptType, data);
+  useEffect(() => {
+    isFormValid = validateForm(cieloHasCredentials, threePlayHasCredentials, transcriptType, data);
+  }, [data]);
+
+  const handleDiscard = () => {
+    setTranscriptType(activeTranscriptPreferences?.provider);
+    closeTranscriptSettings();
+  };
+
+  const handleUpdate = () => handleOrderTranscripts(data, transcriptType);
+
+  let form;
+  switch (transcriptType) {
+    case 'Cielo24':
+      form = (
+        <Cielo24Form
+          {...{
+            hasTranscriptCredentials: cieloHasCredentials,
+            data,
+            setData,
+            transcriptionPlan: transcriptionPlans.Cielo24,
+          }}
+        />
+      );
+      break;
+    case '3PlayMedia':
+      form = (
+        <ThreePlayMediaForm
+          {...{
+            hasTranscriptCredentials: threePlayHasCredentials,
+            data,
+            setData,
+            transcriptionPlan: transcriptionPlans['3PlayMedia'],
+          }}
+        />
+      );
+      break;
+    default:
+      break;
+  }
+  return (
+    <>
+      <ErrorAlert
+        hideHeading={false}
+        isError={!validCieloTranscriptionPlan && cieloHasCredentials}
+      >
+        <FormattedMessage {...messages.invalidCielo24TranscriptionPlanMessage} />
+      </ErrorAlert>
+      <ErrorAlert
+        hideHeading={false}
+        isError={!validThreePlayTranscriptionPlan && threePlayHasCredentials}
+      >
+        <FormattedMessage {...messages.invalid3PlayMediaTranscriptionPlanMessage} />
+      </ErrorAlert>
+      <ErrorAlert
+        hideHeading={false}
+        isError={transcriptStatus === RequestStatus.FAILED}
+      >
+        <ul className="p-0">
+          {errorMessages.transcript.map(message => (
+            <li key={`order-transcript-error-${message}`} style={{ listStyle: 'none' }}>
+              {intl.formatMessage(messages.errorAlertMessage, { message })}
+            </li>
+          ))}
+        </ul>
+      </ErrorAlert>
+      <SelectableBox.Set
+        columns={1}
+        value={transcriptType}
+        name="transcriptProviders"
+        ariaLabel="provider selection"
+        className="my-3"
+        onChange={(e) => {
+          setTranscriptType(e.target.value);
+        }}
+      >
+        <SelectableBox
+          value="order"
+          aria-label="none radio"
+          className="text-center"
+        >
+          <FormattedMessage {...messages.noneLabel} />
+        </SelectableBox>
+        <SelectableBox
+          value="Cielo24"
+          aria-label="Cielo24 radio"
+          className="text-center"
+          disabled={!validCieloTranscriptionPlan && cieloHasCredentials}
+        >
+          <FormattedMessage {...messages.cieloLabel} />
+        </SelectableBox>
+        <SelectableBox
+          value="3PlayMedia"
+          aria-label="3PlayMedia radio"
+          className="text-center"
+          disabled={!validThreePlayTranscriptionPlan && threePlayHasCredentials}
+        >
+          <FormattedMessage {...messages.threePlayMediaLabel} />
+        </SelectableBox>
+      </SelectableBox.Set>
+      {form}
+      <Stack gap={3} className="mt-4">
+        <Button onClick={handleUpdate} disabled={!isFormValid}>
+          <FormattedMessage {...messages.updateSettingsLabel} />
+        </Button>
+        <Button variant="tertiary" onClick={handleDiscard}>
+          <FormattedMessage {...messages.discardSettingsLabel} />
+        </Button>
+        {activeTranscriptPreferences?.modified && (
+          <div className="row m-0 x-small">
+            <div className="mr-1">
+              <FormattedMessage {...messages.lastUpdatedMessage} />
+            </div>
+            <FormattedDate
+              value={data.modified}
+              year="numeric"
+              month="long"
+              day="2-digit"
+            />
+          </div>
+        )}
+      </Stack>
+    </>
+  );
+};
+
+OrderTranscriptForm.propTypes = {
+  setTranscriptType: PropTypes.func.isRequired,
+  activeTranscriptPreferences: PropTypes.shape({
+    provider: PropTypes.string.isRequired,
+    cielo24Turnaround: PropTypes.string,
+    cielo24Fidelity: PropTypes.string,
+    preferredLanguages: PropTypes.arrayOf(PropTypes.string),
+    turnaround: PropTypes.string,
+    videoSourceLanguage: PropTypes.string,
+    modified: PropTypes.instanceOf(Date),
+  }),
+  transcriptType: PropTypes.string.isRequired,
+  transcriptCredentials: PropTypes.shape({
+    cielo24: PropTypes.bool.isRequired,
+    '3PlayMedia': PropTypes.bool.isRequired,
+  }).isRequired,
+  closeTranscriptSettings: PropTypes.func.isRequired,
+  transcriptStatus: PropTypes.string.isRequired,
+  errorMessages: PropTypes.shape({
+    transcript: PropTypes.arrayOf(PropTypes.string).isRequired,
+  }).isRequired,
+  handleOrderTranscripts: PropTypes.func.isRequired,
+  transcriptionPlans: PropTypes.shape({
+    Cielo24: PropTypes.shape({
+      turnaround: PropTypes.shape({}),
+      fidelity: PropTypes.shape({}),
+    }).isRequired,
+    '3PlayMedia': PropTypes.shape({
+      turnaround: PropTypes.shape({}),
+      translations: PropTypes.shape({}),
+      languages: PropTypes.shape({}),
+    }).isRequired,
+  }).isRequired,
+  // injected
+  intl: intlShape.isRequired,
+};
+
+OrderTranscriptForm.defaultProps = {
+  activeTranscriptPreferences: null,
+};
+
+export default injectIntl(OrderTranscriptForm);
diff --git a/src/files-and-videos/videos-page/transcript-settings/ThreePlayMediaForm.jsx b/src/files-and-videos/videos-page/transcript-settings/ThreePlayMediaForm.jsx
new file mode 100644
index 0000000000..b9c3e7b712
--- /dev/null
+++ b/src/files-and-videos/videos-page/transcript-settings/ThreePlayMediaForm.jsx
@@ -0,0 +1,140 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { isEmpty } from 'lodash';
+import { injectIntl, FormattedMessage, intlShape } from '@edx/frontend-platform/i18n';
+import {
+  Form,
+  Icon,
+  Stack,
+  TransitionReplace,
+} from '@openedx/paragon';
+import { Check } from '@openedx/paragon/icons';
+import FormDropdown from './FormDropdown';
+import { getLanguageOptions } from '../data/utils';
+import messages from './messages';
+
+const ThreePlayMediaForm = ({
+  hasTranscriptCredentials,
+  data,
+  setData,
+  transcriptionPlan,
+  // injected
+  intl,
+}) => {
+  if (hasTranscriptCredentials) {
+    const selectedLanguages = data.preferredLanguages ? data.preferredLanguages : [];
+    const turnaroundOptions = transcriptionPlan.turnaround;
+    const sourceLangaugeOptions = getLanguageOptions(
+      Object.keys(transcriptionPlan.translations),
+      transcriptionPlan.languages,
+    );
+    const languages = getLanguageOptions(
+      transcriptionPlan.translations[data.videoSourceLanguage],
+      transcriptionPlan.languages,
+    );
+    const allowMultiple = Object.keys(languages).length > 1;
+    return (
+      <Stack gap={1}>
+        <Form.Group size="sm">
+          <Form.Label className="h5">
+            <FormattedMessage {...messages.threePlayMediaTurnaroundLabel} />
+          </Form.Label>
+          <FormDropdown
+            value={data.threePlayTurnaround}
+            options={turnaroundOptions}
+            handleSelect={(value) => setData({ ...data, threePlayTurnaround: value })}
+            placeholderText={intl.formatMessage(messages.threePlayMediaTurnaroundPlaceholder)}
+          />
+        </Form.Group>
+        <Form.Group size="sm">
+          <Form.Label className="h5">
+            <FormattedMessage {...messages.threePlayMediaSourceLanguageLabel} />
+          </Form.Label>
+          <FormDropdown
+            value={data.videoSourceLanguage}
+            options={sourceLangaugeOptions}
+            handleSelect={(value) => setData({ ...data, videoSourceLanguage: value, preferredLanguages: [] })}
+            placeholderText={intl.formatMessage(messages.threePlayMediaSourceLanguagePlaceholder)}
+          />
+        </Form.Group>
+        <TransitionReplace>
+          {!isEmpty(data.videoSourceLanguage) ? (
+            <Form.Group size="sm">
+              <Form.Label className="h5">
+                <FormattedMessage {...messages.threePlayMediaTranscriptLanguageLabel} />
+              </Form.Label>
+              <FormDropdown
+                value={selectedLanguages}
+                options={languages}
+                allowMultiple={allowMultiple}
+                handleSelect={(value) => {
+                  if (!allowMultiple) {
+                    setData({ ...data, preferredLanguages: [value] });
+                  } else {
+                    const [lang, checked] = value;
+                    if (checked) {
+                      setData({ ...data, preferredLanguages: [...selectedLanguages, lang] });
+                    } else {
+                      const updatedLangList = selectedLanguages.filter((selected) => selected !== lang);
+                      setData({ ...data, preferredLanguages: updatedLangList });
+                    }
+                  }
+                }}
+                placeholderText={intl.formatMessage(messages.threePlayMediaTranscriptLanguagePlaceholder)}
+              />
+              <Form.Control.Feedback>
+                <ul className="m-0 p-0">
+                  {selectedLanguages.map(language => (
+                    <li className="row align-items-center m-0 pt-2" key={language}>
+                      <Icon src={Check} size="xs" /> <span>{languages[language]}</span>
+                    </li>
+                  ))}
+                </ul>
+              </Form.Control.Feedback>
+            </Form.Group>
+          ) : null }
+        </TransitionReplace>
+      </Stack>
+    );
+  }
+  return (
+    <Stack gap={1}>
+      <div className="small" data-testid="threePlayMediaCredentialMessage">
+        <FormattedMessage {...messages.threePlayMediaCredentialMessage} />
+      </div>
+      <Form.Group size="sm">
+        <Form.Label className="h5">
+          <FormattedMessage {...messages.threePlayMediaApiKeyLabel} />
+        </Form.Label>
+        <Form.Control onBlur={(e) => setData({ ...data, apiKey: e.target.value })} />
+      </Form.Group>
+      <Form.Group size="sm">
+        <Form.Label className="h5">
+          <FormattedMessage {...messages.threePlayMediaApiSecretLabel} />
+        </Form.Label>
+        <Form.Control onBlur={(e) => setData({ ...data, apiSecretKey: e.target.value })} />
+      </Form.Group>
+    </Stack>
+  );
+};
+
+ThreePlayMediaForm.propTypes = {
+  hasTranscriptCredentials: PropTypes.bool.isRequired,
+  data: PropTypes.shape({
+    apiKey: PropTypes.string,
+    apiSecretKey: PropTypes.string,
+    threePlayTurnaround: PropTypes.string,
+    preferredLanguages: PropTypes.arrayOf(PropTypes.string),
+    videoSourceLanguage: PropTypes.string,
+  }).isRequired,
+  setData: PropTypes.func.isRequired,
+  transcriptionPlan: PropTypes.shape({
+    turnaround: PropTypes.shape({}),
+    translations: PropTypes.shape({}),
+    languages: PropTypes.shape({}),
+  }).isRequired,
+  // injected
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(ThreePlayMediaForm);
diff --git a/src/files-and-videos/videos-page/transcript-settings/TranscriptSettings.jsx b/src/files-and-videos/videos-page/transcript-settings/TranscriptSettings.jsx
new file mode 100644
index 0000000000..541ac24451
--- /dev/null
+++ b/src/files-and-videos/videos-page/transcript-settings/TranscriptSettings.jsx
@@ -0,0 +1,141 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { isEmpty } from 'lodash';
+import { useDispatch, useSelector } from 'react-redux';
+import { injectIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
+import {
+  ActionRow,
+  Collapsible,
+  Icon, IconButton,
+  Sheet,
+  TransitionReplace,
+} from '@openedx/paragon';
+import { ChevronLeft, ChevronRight, Close } from '@openedx/paragon/icons';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import OrderTranscriptForm from './OrderTranscriptForm';
+import messages from './messages';
+import {
+  clearAutomatedTranscript,
+  resetErrors,
+  updateTranscriptCredentials,
+  updateTranscriptPreference,
+} from '../data/thunks';
+
+const TranscriptSettings = ({
+  isTranscriptSettingsOpen,
+  closeTranscriptSettings,
+  courseId,
+}) => {
+  const dispatch = useDispatch();
+  const { errors: errorMessages, pageSettings, transcriptStatus } = useSelector(state => state.videos);
+  const {
+    activeTranscriptPreferences,
+    transcriptCredentials,
+    videoTranscriptSettings,
+    isAiTranslationsEnabled,
+  } = pageSettings;
+  const { transcriptionPlans } = videoTranscriptSettings || {};
+  const [transcriptType, setTranscriptType] = useState(null);
+  const [isAiTranslations, setIsAiTranslations] = useState(false);
+
+  const handleOrderTranscripts = (data, provider) => {
+    const noCredentials = isEmpty(transcriptCredentials) || data.apiKey;
+    dispatch(resetErrors({ errorType: 'transcript' }));
+    if (provider === 'order') {
+      dispatch(clearAutomatedTranscript({ courseId }));
+    } else if (noCredentials) {
+      dispatch(updateTranscriptCredentials({ courseId, data: { ...data, provider, global: false } }));
+    } else {
+      dispatch(updateTranscriptPreference({ courseId, data: { ...data, provider, global: false } }));
+    }
+  };
+
+  return (
+    <Sheet
+      position="right"
+      blocking
+      show={isTranscriptSettingsOpen}
+      onClose={closeTranscriptSettings}
+    >
+      <div>
+        {!isAiTranslations && (
+          <>
+            <ActionRow>
+              <TransitionReplace>
+                {transcriptType ? (
+                  <IconButton
+                    key="back-button"
+                    size="sm"
+                    iconAs={Icon}
+                    src={ChevronLeft}
+                    onClick={() => setTranscriptType(null)}
+                    alt="back button to main transcript settings view"
+                  />
+                ) : (
+                  <div key="title" className="h3">
+                    <FormattedMessage {...messages.transcriptSettingsTitle} />
+                  </div>
+                )}
+              </TransitionReplace>
+              <ActionRow.Spacer />
+              <IconButton size="sm" iconAs={Icon} src={Close} onClick={closeTranscriptSettings} alt="close settings" />
+            </ActionRow>
+            <TransitionReplace>
+              { transcriptType ? (
+                <div key="transcript-settings">
+                  <OrderTranscriptForm
+                    {...{
+                      setTranscriptType,
+                      transcriptType,
+                      activeTranscriptPreferences,
+                      transcriptCredentials,
+                      closeTranscriptSettings,
+                      handleOrderTranscripts,
+                      transcriptionPlans,
+                      errorMessages,
+                      transcriptStatus,
+                    }}
+                  />
+                </div>
+              ) : (
+                <div key="transcript-type-selection" className="mt-3">
+                  <Collapsible.Advanced
+                    onOpen={() => setTranscriptType('order')}
+                  >
+                    <Collapsible.Trigger
+                      className="row m-0 justify-content-between align-items-center"
+                    >
+                      <FormattedMessage {...messages.orderTranscriptsTitle} />
+                      <Icon src={ChevronRight} />
+                    </Collapsible.Trigger>
+                  </Collapsible.Advanced>
+                </div>
+              )}
+            </TransitionReplace>
+          </>
+        )}
+        <TransitionReplace>
+          <div data-testid="translations-component">
+            <PluginSlot
+              id="additonal_translations_component_slot"
+              pluginProps={{
+                setIsAiTranslations,
+                closeTranscriptSettings,
+                courseId,
+                additionalProps: { transcriptType, isAiTranslationsEnabled },
+              }}
+            />
+          </div>
+        </TransitionReplace>
+      </div>
+    </Sheet>
+  );
+};
+
+TranscriptSettings.propTypes = {
+  closeTranscriptSettings: PropTypes.func.isRequired,
+  isTranscriptSettingsOpen: PropTypes.bool.isRequired,
+  courseId: PropTypes.string.isRequired,
+};
+
+export default injectIntl(TranscriptSettings);
diff --git a/src/files-and-videos/videos-page/transcript-settings/TranscriptSettings.scss b/src/files-and-videos/videos-page/transcript-settings/TranscriptSettings.scss
new file mode 100644
index 0000000000..db33fc0adc
--- /dev/null
+++ b/src/files-and-videos/videos-page/transcript-settings/TranscriptSettings.scss
@@ -0,0 +1,8 @@
+.pgn__selectable_box:disabled,
+.pgn__selectable_box[disabled] {
+  opacity: .5;
+}
+
+.pgn__sheet-component.right {
+  min-width: 352px;
+}
diff --git a/src/files-and-videos/videos-page/transcript-settings/TranscriptSettings.test.jsx b/src/files-and-videos/videos-page/transcript-settings/TranscriptSettings.test.jsx
new file mode 100644
index 0000000000..b45d6e8aa3
--- /dev/null
+++ b/src/files-and-videos/videos-page/transcript-settings/TranscriptSettings.test.jsx
@@ -0,0 +1,649 @@
+import {
+  render,
+  fireEvent,
+  screen,
+  waitFor,
+  within,
+} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import {
+  initializeMockApp,
+} from '@edx/frontend-platform';
+import MockAdapter from 'axios-mock-adapter';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { AppProvider } from '@edx/frontend-platform/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import initializeStore from '../../../store';
+import { RequestStatus } from '../../../data/constants';
+import TranscriptSettings from './TranscriptSettings';
+import {
+  courseId,
+  initialState,
+} from '../factories/mockApiResponses';
+import { getApiBaseUrl } from '../data/api';
+import messages from './messages';
+import VideosProvider from '../VideosPageProvider';
+
+const defaultProps = {
+  isTranscriptSettingsOpen: true,
+  closeTranscriptSettings: jest.fn(),
+  courseId,
+};
+
+let axiosMock;
+let store;
+
+const renderComponent = () => {
+  render(
+    <IntlProvider locale="en">
+      <AppProvider store={store}>
+        <VideosProvider courseId={courseId}>
+          <TranscriptSettings {...defaultProps} />
+        </VideosProvider>
+      </AppProvider>
+    </IntlProvider>,
+  );
+};
+
+describe('TranscriptSettings', () => {
+  describe('default behaviors', () => {
+    beforeEach(async () => {
+      initializeMockApp({
+        authenticatedUser: {
+          userId: 3,
+          username: 'abc123',
+          administrator: false,
+          roles: [],
+        },
+      });
+      store = initializeStore(initialState);
+      axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+    });
+
+    it('should have Transcript settings title', async () => {
+      renderComponent();
+      const header = screen.getByText(messages.transcriptSettingsTitle.defaultMessage);
+
+      expect(header).toBeVisible();
+    });
+
+    it('should change view to order form', async () => {
+      renderComponent(defaultProps);
+      const orderButton = screen.getByText(messages.orderTranscriptsTitle.defaultMessage);
+      userEvent.click(orderButton);
+      const selectableButtons = screen.getAllByLabelText('none radio')[0];
+
+      expect(selectableButtons).toBeVisible();
+    });
+
+    it('should return to order transcript collapsible', async () => {
+      renderComponent(defaultProps);
+      const orderButton = screen.getByText(messages.orderTranscriptsTitle.defaultMessage);
+      userEvent.click(orderButton);
+      const selectableButtons = screen.getAllByLabelText('none radio')[0];
+
+      expect(selectableButtons).toBeVisible();
+
+      const backButton = screen.getByLabelText('back button to main transcript settings view');
+      userEvent.click(backButton);
+      await waitFor(() => {
+        expect(screen.queryByLabelText('back button to main transcript settings view')).toBeNull();
+      });
+    });
+
+    it('discard changes should call closeTranscriptSettings', async () => {
+      renderComponent(defaultProps);
+      const orderButton = screen.getByText(messages.orderTranscriptsTitle.defaultMessage);
+      userEvent.click(orderButton);
+      const discardButton = screen.getByText(messages.discardSettingsLabel.defaultMessage);
+      userEvent.click(discardButton);
+
+      expect(defaultProps.closeTranscriptSettings).toHaveBeenCalled();
+    });
+  });
+
+  describe('loading saved preference', () => {
+    beforeEach(async () => {
+      initializeMockApp({
+        authenticatedUser: {
+          userId: 3,
+          username: 'abc123',
+          administrator: false,
+          roles: [],
+        },
+      });
+      store = initializeStore({
+        ...initialState,
+        videos: {
+          ...initialState.videos,
+          pageSettings: {
+            ...initialState.videos.pageSettings,
+            activeTranscriptPreferences: {
+              provider: 'Cielo24',
+              cielo24Fidelity: '',
+              cielo24Turnaround: '',
+              preferredLanguages: [],
+              threePlayTurnaround: '',
+              videoSourceLanguage: '',
+            },
+          },
+        },
+      });
+      axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+
+      renderComponent(defaultProps);
+    });
+
+    it('should load page with Cielo24 selected', async () => {
+      const orderButton = screen.getByText(messages.orderTranscriptsTitle.defaultMessage);
+      userEvent.click(orderButton);
+      const cielo24Button = screen.getByText(messages.cieloLabel.defaultMessage);
+
+      expect(within(cielo24Button).getByLabelText('Cielo24 radio')).toHaveProperty('checked', true);
+    });
+  });
+
+  describe('delete transcript preferences', () => {
+    beforeEach(async () => {
+      initializeMockApp({
+        authenticatedUser: {
+          userId: 3,
+          username: 'abc123',
+          administrator: false,
+          roles: [],
+        },
+      });
+      store = initializeStore({
+        ...initialState,
+        videos: {
+          ...initialState.videos,
+          pageSettings: {
+            ...initialState.videos.pageSettings,
+            activeTranscriptPreferences: {
+              provider: 'Cielo24',
+              cielo24Fidelity: '',
+              cielo24Turnaround: '',
+              preferredLanguages: [],
+              threePlayTurnaround: '',
+              videoSourceLanguage: '',
+            },
+          },
+        },
+      });
+      axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+
+      renderComponent(defaultProps);
+      const orderButton = screen.getByText(messages.orderTranscriptsTitle.defaultMessage);
+      userEvent.click(orderButton);
+      const noneButton = screen.getAllByLabelText('none radio')[0];
+
+      userEvent.click(noneButton);
+    });
+
+    it('api should succeed', async () => {
+      const updateButton = screen.getByText(messages.updateSettingsLabel.defaultMessage);
+
+      axiosMock.onDelete(`${getApiBaseUrl()}/transcript_preferences/${courseId}`).reply(204);
+      fireEvent.click(updateButton);
+      await waitFor(() => {
+        const { transcriptStatus } = store.getState().videos;
+        expect(transcriptStatus).toEqual(RequestStatus.SUCCESSFUL);
+      });
+    });
+
+    it('should show error alert', async () => {
+      const updateButton = screen.getByText(messages.updateSettingsLabel.defaultMessage);
+
+      axiosMock.onDelete(`${getApiBaseUrl()}/transcript_preferences/${courseId}`).reply(404);
+      fireEvent.click(updateButton);
+      await waitFor(() => {
+        const { transcriptStatus } = store.getState().videos;
+        expect(transcriptStatus).toEqual(RequestStatus.FAILED);
+      });
+
+      expect(screen.getByText('Failed to update order transcripts settings.')).toBeVisible();
+    });
+  });
+
+  describe('with no credentials set', () => {
+    beforeEach(async () => {
+      initializeMockApp({
+        authenticatedUser: {
+          userId: 3,
+          username: 'abc123',
+          administrator: false,
+          roles: [],
+        },
+      });
+      store = initializeStore(initialState);
+      axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+
+      renderComponent(defaultProps);
+      const orderButton = screen.getByText(messages.orderTranscriptsTitle.defaultMessage);
+      userEvent.click(orderButton);
+    });
+
+    it('should ask for Cielo24 or 3Play Media credentials', async () => {
+      const cielo24Button = screen.getAllByLabelText('Cielo24 radio')[0];
+      userEvent.click(cielo24Button);
+      const cieloCredentialMessage = screen.getByTestId('cieloCredentialMessage');
+
+      expect(cieloCredentialMessage).toBeVisible();
+
+      const threePlayMediaButton = screen.getAllByLabelText('3PlayMedia radio')[0];
+      userEvent.click(threePlayMediaButton);
+      const threePlayMediaCredentialMessage = screen.getByTestId('threePlayMediaCredentialMessage');
+
+      expect(threePlayMediaCredentialMessage).toBeVisible();
+    });
+
+    describe('api succeeds', () => {
+      it('should update cielo24 credentials ', async () => {
+        const cielo24Button = screen.getAllByLabelText('Cielo24 radio')[0];
+        userEvent.click(cielo24Button);
+
+        const firstInput = screen.getByLabelText(messages.cieloApiKeyLabel.defaultMessage);
+        const secondInput = screen.getByLabelText(messages.cieloUsernameLabel.defaultMessage);
+        const updateButton = screen.getByText(messages.updateSettingsLabel.defaultMessage);
+
+        await waitFor(() => {
+          userEvent.type(firstInput, 'apiKey');
+          userEvent.type(secondInput, 'username');
+
+          expect(updateButton).not.toHaveAttribute('disabled');
+        });
+
+        axiosMock.onPost(`${getApiBaseUrl()}/transcript_credentials/${courseId}`).reply(200);
+        fireEvent.click(updateButton);
+        await waitFor(() => {
+          const { transcriptStatus } = store.getState().videos;
+          expect(transcriptStatus).toEqual(RequestStatus.SUCCESSFUL);
+        });
+
+        expect(screen.queryByTestId('cieloCredentialMessage')).toBeNull();
+
+        expect(screen.getByText(messages.cieloFidelityLabel.defaultMessage)).toBeVisible();
+      });
+
+      it('should update 3Play Media credentials', async () => {
+        const threePlayButton = screen.getAllByLabelText('3PlayMedia radio')[0];
+        userEvent.click(threePlayButton);
+
+        const updateButton = screen.getByText(messages.updateSettingsLabel.defaultMessage);
+        const firstInput = screen.getByLabelText(messages.threePlayMediaApiKeyLabel.defaultMessage);
+        const secondInput = screen.getByLabelText(messages.threePlayMediaApiSecretLabel.defaultMessage);
+
+        await waitFor(() => {
+          userEvent.type(firstInput, 'apiKey');
+          userEvent.type(secondInput, 'secretKey');
+
+          expect(updateButton).not.toHaveAttribute('disabled');
+        });
+
+        axiosMock.onPost(`${getApiBaseUrl()}/transcript_credentials/${courseId}`).reply(200);
+        fireEvent.click(updateButton);
+
+        await waitFor(() => {
+          const { transcriptStatus } = store.getState().videos;
+          expect(transcriptStatus).toEqual(RequestStatus.SUCCESSFUL);
+        });
+
+        expect(screen.queryByTestId('threePlayCredentialMessage')).toBeNull();
+
+        expect(screen.getByText(messages.threePlayMediaTurnaroundLabel.defaultMessage)).toBeVisible();
+      });
+    });
+
+    describe('api fails', () => {
+      it('should show error alert on Cielo24 credentials update', async () => {
+        const cielo24Button = screen.getAllByLabelText('Cielo24 radio')[0];
+        userEvent.click(cielo24Button);
+
+        const firstInput = screen.getByLabelText(messages.cieloApiKeyLabel.defaultMessage);
+        const secondInput = screen.getByLabelText(messages.cieloUsernameLabel.defaultMessage);
+        const updateButton = screen.getByText(messages.updateSettingsLabel.defaultMessage);
+
+        await waitFor(() => {
+          userEvent.type(firstInput, 'apiKey');
+          userEvent.type(secondInput, 'username');
+
+          expect(updateButton).not.toHaveAttribute('disabled');
+        });
+
+        axiosMock.onPost(`${getApiBaseUrl()}/transcript_preferences/${courseId}`).reply(503);
+        fireEvent.click(updateButton);
+
+        await waitFor(() => {
+          const { transcriptStatus } = store.getState().videos;
+          expect(transcriptStatus).toEqual(RequestStatus.FAILED);
+        });
+
+        expect(screen.getByText('Failed to update Cielo24 credentials.')).toBeVisible();
+      });
+
+      it('should show error alert on 3PlayMedia credentials update', async () => {
+        const threePlayButton = screen.getAllByLabelText('3PlayMedia radio')[0];
+        userEvent.click(threePlayButton);
+
+        const updateButton = screen.getByText(messages.updateSettingsLabel.defaultMessage);
+        const firstInput = screen.getByLabelText(messages.threePlayMediaApiKeyLabel.defaultMessage);
+        const secondInput = screen.getByLabelText(messages.threePlayMediaApiSecretLabel.defaultMessage);
+
+        await waitFor(() => {
+          userEvent.type(firstInput, 'apiKey');
+          userEvent.type(secondInput, 'secretKey');
+
+          expect(updateButton).not.toHaveAttribute('disabled');
+        });
+
+        axiosMock.onPost(`${getApiBaseUrl()}/transcript_preferences/${courseId}`).reply(404);
+        fireEvent.click(updateButton);
+
+        await waitFor(() => {
+          const { transcriptStatus } = store.getState().videos;
+          expect(transcriptStatus).toEqual(RequestStatus.FAILED);
+        });
+
+        expect(screen.getByText('Failed to update 3PlayMedia credentials.')).toBeVisible();
+      });
+    });
+  });
+
+  describe('with credentials set', () => {
+    beforeEach(async () => {
+      initializeMockApp({
+        authenticatedUser: {
+          userId: 3,
+          username: 'abc123',
+          administrator: false,
+          roles: [],
+        },
+      });
+      store = initializeStore({
+        ...initialState,
+        videos: {
+          ...initialState.videos,
+          pageSettings: {
+            ...initialState.videos.pageSettings,
+            transcriptCredentials: {
+              cielo24: true,
+              '3PlayMedia': true,
+            },
+          },
+        },
+      });
+      axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+      renderComponent(defaultProps);
+      const orderButton = screen.getByText(messages.orderTranscriptsTitle.defaultMessage);
+      userEvent.click(orderButton);
+    });
+
+    it('should not show credentials request for Cielo24 and 3Play Media', async () => {
+      const cielo24Button = screen.getAllByLabelText('Cielo24 radio')[0];
+      userEvent.click(cielo24Button);
+      const cieloCredentialMessage = screen.queryByTestId('cieloCredentialMessage');
+
+      expect(cieloCredentialMessage).toBeNull();
+
+      const threePlayMediaButton = screen.getAllByLabelText('3PlayMedia radio')[0];
+      userEvent.click(threePlayMediaButton);
+      const threePlayMediaCredentialMessage = screen.queryByTestId('threePlayMediaCredentialMessage');
+
+      expect(threePlayMediaCredentialMessage).toBeNull();
+    });
+
+    describe('api succeeds', () => {
+      it('should update cielo24 preferences', async () => {
+        const apiResponse = {
+          videoSourceLanguage: 'en',
+          cielo24Turnaround: 'PRIORITY',
+          cielo24FidelityTypee: 'PREMIUM',
+          preferredLanguages: ['en'],
+          provider: 'cielo24',
+          global: false,
+        };
+
+        const cielo24Button = screen.getAllByLabelText('Cielo24 radio')[0];
+        userEvent.click(cielo24Button);
+        const updateButton = screen.getByText(messages.updateSettingsLabel.defaultMessage);
+        const turnaround = screen.getByText(messages.cieloTurnaroundPlaceholder.defaultMessage);
+        const fidelity = screen.getByText(messages.cieloFidelityPlaceholder.defaultMessage);
+
+        await waitFor(() => {
+          userEvent.click(turnaround);
+          userEvent.click(screen.getByText('Priority (24 hours)'));
+
+          userEvent.click(fidelity);
+          userEvent.click(screen.getByText('Premium (95% accuracy)'));
+
+          const source = screen.getAllByText(messages.cieloSourceLanguagePlaceholder.defaultMessage)[0];
+          userEvent.click(source);
+          userEvent.click(screen.getByText('English'));
+
+          const language = screen.getByText(messages.cieloTranscriptLanguagePlaceholder.defaultMessage);
+          userEvent.click(language);
+          userEvent.click(screen.getAllByText('English')[2]);
+        });
+
+        expect(updateButton).not.toHaveAttribute('disabled');
+
+        axiosMock.onPost(`${getApiBaseUrl()}/transcript_preferences/${courseId}`).reply(200, apiResponse);
+        fireEvent.click(updateButton);
+
+        await waitFor(() => {
+          const { transcriptStatus } = store.getState().videos;
+
+          expect(transcriptStatus).toEqual(RequestStatus.SUCCESSFUL);
+        });
+
+        expect(screen.getByText(messages.cieloFidelityLabel.defaultMessage)).toBeVisible();
+      });
+
+      it('should update 3Play Media preferences with english as source language', async () => {
+        const apiResponse = {
+          videoSourceLanguage: 'en',
+          threePlayTurnaround: 'two_hour',
+          preferredLanguages: ['ar', 'fr'],
+          provider: '3PlayMedia',
+          global: false,
+        };
+        const threePlayButton = screen.getAllByLabelText('3PlayMedia radio')[0];
+        userEvent.click(threePlayButton);
+        const updateButton = screen.getByText(messages.updateSettingsLabel.defaultMessage);
+        const turnaround = screen.getByText(messages.threePlayMediaTurnaroundPlaceholder.defaultMessage);
+        const source = screen.getByText(messages.threePlayMediaSourceLanguagePlaceholder.defaultMessage);
+
+        await waitFor(() => {
+          userEvent.click(turnaround);
+          userEvent.click(screen.getByText('2 hours'));
+
+          userEvent.click(source);
+          userEvent.click(screen.getByText('English'));
+
+          const language = screen.getByText(messages.threePlayMediaTranscriptLanguagePlaceholder.defaultMessage);
+          userEvent.click(language);
+          userEvent.click(screen.getByText('Arabic'));
+          userEvent.click(screen.getByText('French'));
+          userEvent.click(screen.getAllByText('Arabic')[0]);
+
+          expect(updateButton).not.toHaveAttribute('disabled');
+        });
+
+        axiosMock.onPost(`${getApiBaseUrl()}/transcript_preferences/${courseId}`).reply(200, apiResponse);
+        fireEvent.click(updateButton);
+        await waitFor(() => {
+          const { transcriptStatus } = store.getState().videos;
+
+          expect(transcriptStatus).toEqual(RequestStatus.SUCCESSFUL);
+        });
+      });
+
+      it('should update 3Play Media preferences with spanish as source language', async () => {
+        const apiResponse = {
+          videoSourceLanguage: 'en',
+          threePlayTurnaround: 'two_hour',
+          preferredLanguages: ['ar', 'fr'],
+          provider: '3PlayMedia',
+          global: false,
+        };
+        const threePlayButton = screen.getAllByLabelText('3PlayMedia radio')[0];
+        userEvent.click(threePlayButton);
+        const updateButton = screen.getByText(messages.updateSettingsLabel.defaultMessage);
+        const turnaround = screen.getByText(messages.threePlayMediaTurnaroundPlaceholder.defaultMessage);
+        const source = screen.getByText(messages.threePlayMediaSourceLanguagePlaceholder.defaultMessage);
+
+        await waitFor(() => {
+          userEvent.click(turnaround);
+          userEvent.click(screen.getByText('2 hours'));
+
+          userEvent.click(source);
+          userEvent.click(screen.getByText('Spanish'));
+
+          const language = screen.getByText(messages.threePlayMediaTranscriptLanguagePlaceholder.defaultMessage);
+          userEvent.click(language);
+          userEvent.click(screen.getAllByText('English')[1]);
+        });
+        expect(updateButton).not.toHaveAttribute('disabled');
+
+        axiosMock.onPost(`${getApiBaseUrl()}/transcript_preferences/${courseId}`).reply(200, apiResponse);
+        fireEvent.click(updateButton);
+        await waitFor(() => {
+          const { transcriptStatus } = store.getState().videos;
+
+          expect(transcriptStatus).toEqual(RequestStatus.SUCCESSFUL);
+        });
+      });
+    });
+
+    describe('api fails', () => {
+      it('should show error alert on Cielo24 preferences update', async () => {
+        const cielo24Button = screen.getAllByLabelText('Cielo24 radio')[0];
+        userEvent.click(cielo24Button);
+        const updateButton = screen.getByText(messages.updateSettingsLabel.defaultMessage);
+        const turnaround = screen.getByText(messages.cieloTurnaroundPlaceholder.defaultMessage);
+        const fidelity = screen.getByText(messages.cieloFidelityPlaceholder.defaultMessage);
+
+        await waitFor(() => {
+          userEvent.click(turnaround);
+          userEvent.click(screen.getByText('Priority (24 hours)'));
+
+          userEvent.click(fidelity);
+          userEvent.click(screen.getByText('Premium (95% accuracy)'));
+
+          const source = screen.getAllByText(messages.cieloSourceLanguagePlaceholder.defaultMessage)[0];
+          userEvent.click(source);
+          userEvent.click(screen.getByText('English'));
+
+          const language = screen.getByText(messages.cieloTranscriptLanguagePlaceholder.defaultMessage);
+          userEvent.click(language);
+          userEvent.click(screen.getAllByText('English')[2]);
+        });
+
+        expect(updateButton).not.toHaveAttribute('disabled');
+
+        axiosMock.onPost(`${getApiBaseUrl()}/transcript_preferences/${courseId}`).reply(503);
+        fireEvent.click(updateButton);
+        await waitFor(() => {
+          const { transcriptStatus } = store.getState().videos;
+
+          expect(transcriptStatus).toEqual(RequestStatus.FAILED);
+        });
+
+        expect(screen.getByText('Failed to update Cielo24 transcripts settings.')).toBeVisible();
+      });
+
+      it('should show error alert with default message on 3PlayMedia preferences update', async () => {
+        const threePlayButton = screen.getAllByLabelText('3PlayMedia radio')[0];
+        userEvent.click(threePlayButton);
+        const updateButton = screen.getByText(messages.updateSettingsLabel.defaultMessage);
+        const turnaround = screen.getByText(messages.threePlayMediaTurnaroundPlaceholder.defaultMessage);
+        const source = screen.getByText(messages.threePlayMediaSourceLanguagePlaceholder.defaultMessage);
+
+        await waitFor(() => {
+          userEvent.click(turnaround);
+          userEvent.click(screen.getByText('2 hours'));
+
+          userEvent.click(source);
+          userEvent.click(screen.getByText('Spanish'));
+
+          const language = screen.getByText(messages.threePlayMediaTranscriptLanguagePlaceholder.defaultMessage);
+          userEvent.click(language);
+          userEvent.click(screen.getAllByText('English')[1]);
+        });
+        expect(updateButton).not.toHaveAttribute('disabled');
+
+        axiosMock.onPost(`${getApiBaseUrl()}/transcript_preferences/${courseId}`).reply(404);
+        fireEvent.click(updateButton);
+        await waitFor(() => {
+          const { transcriptStatus } = store.getState().videos;
+
+          expect(transcriptStatus).toEqual(RequestStatus.FAILED);
+        });
+
+        expect(screen.getByText('Failed to update 3PlayMedia transcripts settings.')).toBeVisible();
+      });
+
+      it('should show error alert with default message on 3PlayMedia preferences update', async () => {
+        const threePlayButton = screen.getAllByLabelText('3PlayMedia radio')[0];
+        userEvent.click(threePlayButton);
+        const updateButton = screen.getByText(messages.updateSettingsLabel.defaultMessage);
+        const turnaround = screen.getByText(messages.threePlayMediaTurnaroundPlaceholder.defaultMessage);
+        const source = screen.getByText(messages.threePlayMediaSourceLanguagePlaceholder.defaultMessage);
+
+        await waitFor(() => {
+          userEvent.click(turnaround);
+          userEvent.click(screen.getByText('2 hours'));
+
+          userEvent.click(source);
+          userEvent.click(screen.getByText('Spanish'));
+
+          const language = screen.getByText(messages.threePlayMediaTranscriptLanguagePlaceholder.defaultMessage);
+          userEvent.click(language);
+          userEvent.click(screen.getAllByText('English')[1]);
+        });
+        expect(updateButton).not.toHaveAttribute('disabled');
+
+        axiosMock.onPost(`${getApiBaseUrl()}/transcript_preferences/${courseId}`).reply(404, { error: 'Invalid turnaround.' });
+        fireEvent.click(updateButton);
+        await waitFor(() => {
+          const { transcriptStatus } = store.getState().videos;
+
+          expect(transcriptStatus).toEqual(RequestStatus.FAILED);
+        });
+
+        expect(screen.getByText('Invalid turnaround.')).toBeVisible();
+      });
+    });
+  });
+
+  describe('Translations component success', () => {
+    beforeEach(async () => {
+      initializeMockApp({
+        authenticatedUser: {
+          userId: 3,
+          username: 'abc123',
+          administrator: false,
+          roles: [],
+        },
+      });
+      store = initializeStore({
+        ...initialState,
+        videos: {
+          ...initialState.videos,
+          pageSettings: {
+            ...initialState.videos.pageSettings,
+            isAiTranslationsEnabled: true,
+          },
+        },
+      });
+      axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+
+      renderComponent(defaultProps);
+    });
+
+    it('displays AI translations component if enabled', () => {
+      const component = screen.getByTestId('translations-component');
+      expect(component).toBeInTheDocument();
+    });
+  });
+});
diff --git a/src/files-and-videos/videos-page/transcript-settings/index.js b/src/files-and-videos/videos-page/transcript-settings/index.js
new file mode 100644
index 0000000000..00661e5b6d
--- /dev/null
+++ b/src/files-and-videos/videos-page/transcript-settings/index.js
@@ -0,0 +1,3 @@
+import TranscriptSettings from './TranscriptSettings';
+
+export default TranscriptSettings;
diff --git a/src/files-and-videos/videos-page/transcript-settings/messages.js b/src/files-and-videos/videos-page/transcript-settings/messages.js
new file mode 100644
index 0000000000..6585cd8d7b
--- /dev/null
+++ b/src/files-and-videos/videos-page/transcript-settings/messages.js
@@ -0,0 +1,158 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  transcriptSettingsTitle: {
+    id: 'course-authoring.video-uploads.transcriptSettings.title',
+    defaultMessage: 'Transcript settings',
+    description: 'Title for transcript settings sheet',
+  },
+  invalidCielo24TranscriptionPlanMessage: {
+    id: 'course-authoring.video-uploads.transcriptSettings.cielo24.errorAlert.message',
+    defaultMessage: 'No transcription plans found for Cielo24.',
+  },
+  invalid3PlayMediaTranscriptionPlanMessage: {
+    id: 'course-authoring.video-uploads.transcriptSettings.3PlayMedia.errorAlert.message',
+    defaultMessage: 'No transcription plans found for 3PlayMedia.',
+  },
+  errorAlertMessage: {
+    id: 'course-authoring.video-uploads.transcriptSettings.errorAlert.message',
+    defaultMessage: '{message}',
+  },
+  orderTranscriptsTitle: {
+    id: 'course-authoring.video-uploads.transcriptSettings.orderTranscripts.title',
+    defaultMessage: 'Order transcripts',
+    description: 'Title for order transcript collapsible',
+  },
+  noneLabel: {
+    id: 'course-authoring.video-uploads.transcriptSettings.orderTranscripts.none.label',
+    defaultMessage: 'None',
+    description: 'Label for order transcript None option',
+  },
+  cieloLabel: {
+    id: 'course-authoring.video-uploads.transcriptSettings.orderTranscripts.cielo24.label',
+    defaultMessage: 'Cielo24',
+    description: 'Label for order transcript Cieol24 option',
+  },
+  threePlayMediaLabel: {
+    id: 'course-authoring.video-uploads.transcriptSettings.orderTranscripts.3PlayMedia.label',
+    defaultMessage: '3Play Media',
+    description: 'Label for order transcript 3Play Media option',
+  },
+  updateSettingsLabel: {
+    id: 'course-authoring.video-uploads.transcriptSettings.orderTranscripts.updateSettings.label',
+    defaultMessage: 'Update settings',
+    description: 'Label for  order transcript update settings button',
+  },
+  discardSettingsLabel: {
+    id: 'course-authoring.video-uploads.transcriptSettings.orderTranscripts.discardSettings.label',
+    defaultMessage: 'Discard changes',
+    description: 'Label for order transcript discard settings button',
+  },
+  lastUpdatedMessage: {
+    id: 'course-authoring.video-uploads.transcriptSettings.orderTranscripts.lastUpdated.message',
+    defaultMessage: 'Last updated',
+    description: 'Message that lets user know when the update was made to transcript settings',
+  },
+  threePlayMediaTurnaroundLabel: {
+    id: 'course-authoring.video-uploads.transcriptSettings.orderTranscripts.3PlayMedia.turnaround.label',
+    defaultMessage: 'Transcript turnaround',
+    description: 'Label for 3Play Media transcript turnaround dropdown',
+  },
+  threePlayMediaTurnaroundPlaceholder: {
+    id: 'course-authoring.video-uploads.transcriptSettings.orderTranscripts.3PlayMedia.turnaround.dropdown.placeholder',
+    defaultMessage: 'Select turnaround',
+    description: 'Label for 3Play Media transcript turnaround dropdown placeholder',
+  },
+  threePlayMediaSourceLanguageLabel: {
+    id: 'course-authoring.video-uploads.transcriptSettings.orderTranscripts.3PlayMedia.sourceLanguage.label',
+    defaultMessage: 'Video source language',
+    description: 'Label for 3Play Media video source language dropdown',
+  },
+  threePlayMediaSourceLanguagePlaceholder: {
+    id: 'course-authoring.video-uploads.transcriptSettings.orderTranscripts.3PlayMedia.sourceLanguage.dropdown.placeholder',
+    defaultMessage: 'Select language',
+    description: 'Label for 3Play Media video source language dropdown placeholder',
+  },
+  threePlayMediaTranscriptLanguageLabel: {
+    id: 'course-authoring.video-uploads.transcriptSettings.orderTranscripts.3PlayMedia.transcriptLanguage.label',
+    defaultMessage: 'Transcript language',
+    description: 'Label for 3Play Media video source language dropdown',
+  },
+  threePlayMediaTranscriptLanguagePlaceholder: {
+    id: 'course-authoring.video-uploads.transcriptSettings.orderTranscripts.3PlayMedia.transcriptLanguage.dropdown.placeholder',
+    defaultMessage: 'Select language(s)',
+    description: 'Label for 3Play Media transcript  language dropdown placeholder',
+  },
+  threePlayMediaCredentialMessage: {
+    id: 'course-authoring.video-uploads.transcriptSettings.orderTranscripts.3PlayMedia.credential.message',
+    defaultMessage: 'Enter the account information for your organization.',
+    description: 'Message for 3Play Media credential view',
+  },
+  threePlayMediaApiKeyLabel: {
+    id: 'course-authoring.video-uploads.transcriptSettings.orderTranscripts.3PlayMedia.apiKey.label',
+    defaultMessage: 'API key',
+    description: 'Label for 3Play Media API key input',
+  },
+  threePlayMediaApiSecretLabel: {
+    id: 'course-authoring.video-uploads.transcriptSettings.orderTranscripts.3PlayMedia.apiSecret.label',
+    defaultMessage: 'API secret',
+    description: 'Label for 3Play Media API secret input',
+  },
+  cieloTurnaroundLabel: {
+    id: 'course-authoring.video-uploads.transcriptSettings.orderTranscripts.cielo24.turnaround.label',
+    defaultMessage: 'Transcript turnaround',
+    description: 'Label for Cielo24 transcript turnaround dropdown',
+  },
+  cieloTurnaroundPlaceholder: {
+    id: 'course-authoring.video-uploads.transcriptSettings.orderTranscripts.cielo24.turnaround.dropdown.placeholder',
+    defaultMessage: 'Select turnaround',
+    description: 'Label for Cielo24 transcript turnaround dropdown placeholder',
+  },
+  cieloFidelityLabel: {
+    id: 'course-authoring.video-uploads.transcriptSettings.orderTranscripts.cielo24.fidelity.label',
+    defaultMessage: 'Transcript fidelity',
+    description: 'Label for Cielo24 transcript fidelity dropdown',
+  },
+  cieloFidelityPlaceholder: {
+    id: 'course-authoring.video-uploads.transcriptSettings.orderTranscripts.cielo24.fidelity.dropdown.placeholder',
+    defaultMessage: 'Select fidelity',
+    description: 'Label for Cielo24 transcript fidelity dropdown placeholder',
+  },
+  cieloSourceLanguageLabel: {
+    id: 'course-authoring.video-uploads.transcriptSettings.orderTranscripts.cielo24.sourceLanguage.label',
+    defaultMessage: 'Video source language',
+    description: 'Label for Cielo24 video source language dropdown',
+  },
+  cieloSourceLanguagePlaceholder: {
+    id: 'course-authoring.video-uploads.transcriptSettings.orderTranscripts.cielo24.sourceLanguage.dropdown.placeholder',
+    defaultMessage: 'Select language',
+    description: 'Label for Cielo24 video source language dropdown placeholder',
+  },
+  cieloTranscriptLanguageLabel: {
+    id: 'course-authoring.video-uploads.transcriptSettings.orderTranscripts.cielo24.transcriptLanguage.label',
+    defaultMessage: 'Transcript language',
+    description: 'Label for Cielo24 video source language dropdown',
+  },
+  cieloTranscriptLanguagePlaceholder: {
+    id: 'course-authoring.video-uploads.transcriptSettings.orderTranscripts.cielo24.transcriptLanguage.dropdown.placeholder',
+    defaultMessage: 'Select language',
+    description: 'Label for Cielo24 transcript  language dropdown placeholder',
+  },
+  cieloCredentialMessage: {
+    id: 'course-authoring.video-uploads.transcriptSettings.orderTranscripts.cielo24.credential.message',
+    defaultMessage: 'Enter the account information for your organization.',
+    description: 'Message for Cielo24 credential view',
+  },
+  cieloApiKeyLabel: {
+    id: 'course-authoring.video-uploads.transcriptSettings.orderTranscripts.cielo24.apiKey.label',
+    defaultMessage: 'API key',
+    description: 'Label for Cielo24 API key input',
+  },
+  cieloUsernameLabel: {
+    id: 'course-authoring.video-uploads.transcriptSettings.orderTranscripts.cielo24.username.label',
+    defaultMessage: 'Username',
+    description: 'Label for Cielo24 username input',
+  },
+});
+
+export default messages;
diff --git a/src/files-and-videos/videos-page/upload-modal/UploadModal.jsx b/src/files-and-videos/videos-page/upload-modal/UploadModal.jsx
new file mode 100644
index 0000000000..d2fa526edd
--- /dev/null
+++ b/src/files-and-videos/videos-page/upload-modal/UploadModal.jsx
@@ -0,0 +1,98 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import {
+  ActionRow,
+  Alert,
+  Button,
+  Hyperlink,
+  ModalDialog,
+  Scrollable,
+} from '@openedx/paragon';
+import { WarningFilled } from '@openedx/paragon/icons';
+import messages from '../messages';
+import UploadProgressList from './UploadProgressList';
+import { RequestStatus } from '../../../data/constants';
+
+const UploadModal = ({
+  isUploadTrackerOpen,
+  handleUploadCancel,
+  currentUploadingIdsRef,
+  addVideoStatus,
+}) => {
+  const intl = useIntl();
+  const videosPagePath = '';
+  const { uploadData, uploadCount } = currentUploadingIdsRef;
+  const cancelIsDisabled = addVideoStatus === RequestStatus.FAILED || addVideoStatus === RequestStatus.SUCCESSFUL;
+
+  return (
+    <ModalDialog
+      title={intl.formatMessage(messages.videoUploadTrackerModalTitle)}
+      isOpen={isUploadTrackerOpen}
+      onClose={handleUploadCancel}
+      isBlocking
+      hasCloseButton={false}
+      size="lg"
+    >
+      <ModalDialog.Header>
+        <ModalDialog.Title className="mb-3">
+          {intl.formatMessage(messages.videoUploadTrackerModalTitle)}
+        </ModalDialog.Title>
+        <Alert
+          variant="warning"
+          icon={WarningFilled}
+        >
+          <Alert.Heading>
+            {intl.formatMessage(messages.videoUploadTrackerAlertTitle)}
+          </Alert.Heading>
+          {intl.formatMessage(messages.videoUploadTrackerAlertBodyMessage)}
+          <div className="mt-3">
+            <span className="font-weight-bold">
+              {intl.formatMessage(messages.videoUploadTrackerAlertEditMessage)}
+            </span>
+            <Hyperlink
+              className="ml-2"
+              destination={videosPagePath}
+              target="_blank"
+              content={intl.formatMessage(messages.videoUploadTrackerAlertEditHyperlinkLabel)}
+            />
+          </div>
+        </Alert>
+        <div className="my-4 text-primary-500">
+          {intl.formatMessage(
+            messages.videoUploadTrackerModalBody,
+            { uploadCount },
+          )}
+        </div>
+      </ModalDialog.Header>
+      <Scrollable>
+        <ModalDialog.Body>
+          <UploadProgressList videosList={Object.entries(uploadData)} />
+        </ModalDialog.Body>
+      </Scrollable>
+      <ModalDialog.Footer>
+        <ActionRow>
+          <Button onClick={handleUploadCancel} disabled={cancelIsDisabled}>
+            {intl.formatMessage(messages.videoUploadTrackerAlertCancelLabel)}
+          </Button>
+        </ActionRow>
+      </ModalDialog.Footer>
+    </ModalDialog>
+  );
+};
+
+UploadModal.propTypes = {
+  isUploadTrackerOpen: PropTypes.bool.isRequired,
+  handleUploadCancel: PropTypes.func.isRequired,
+  currentUploadingIdsRef: PropTypes.shape({
+    uploadData: PropTypes.shape({
+      name: PropTypes.string,
+      status: PropTypes.string,
+      uploadPercentage: PropTypes.number,
+    }).isRequired,
+    uploadCount: PropTypes.number.isRequired,
+  }).isRequired,
+  addVideoStatus: PropTypes.string.isRequired,
+};
+
+export default UploadModal;
diff --git a/src/files-and-videos/videos-page/upload-modal/UploadProgressList.jsx b/src/files-and-videos/videos-page/upload-modal/UploadProgressList.jsx
new file mode 100644
index 0000000000..fdecdb35b1
--- /dev/null
+++ b/src/files-and-videos/videos-page/upload-modal/UploadProgressList.jsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Stack, Truncate } from '@openedx/paragon';
+import UploadStatusIcon from './UploadStatusIcon';
+import { RequestStatus } from '../../../data/constants';
+
+const getVideoStatus = (status) => {
+  switch (status) {
+    case RequestStatus.IN_PROGRESS:
+      return 'UPLOADING';
+    case RequestStatus.PENDING:
+      return 'QUEUED';
+    case RequestStatus.SUCCESSFUL:
+      return '';
+    default:
+      return status.toUpperCase();
+  }
+};
+
+const UploadProgressList = ({ videosList }) => (
+  <div role="list" className="text-primary-500">
+    {videosList.map(([id, video], index) => {
+      const bulletNumber = `${index + 1}. `;
+      return (
+        <Stack role="listitem" gap={2} direction="horizontal" className="mb-3 small" key={id}>
+          <span>{bulletNumber}</span>
+          <div className="col-5 pl-0">
+            <Truncate>
+              {video.name}
+            </Truncate>
+          </div>
+          <div className="col-6 p-0">
+            <span className="row m-0 justify-content-end font-weight-bold">
+              {getVideoStatus(video.status)}
+            </span>
+          </div>
+          <UploadStatusIcon status={video.status} />
+        </Stack>
+      );
+    })}
+  </div>
+);
+
+UploadProgressList.propTypes = {
+  videosList: PropTypes.arrayOf(PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    status: PropTypes.string.isRequired,
+    uploadPercentage: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number,
+    ]).isRequired,
+  })).isRequired,
+};
+
+export default UploadProgressList;
diff --git a/src/files-and-videos/videos-page/upload-modal/UploadStatusIcon.jsx b/src/files-and-videos/videos-page/upload-modal/UploadStatusIcon.jsx
new file mode 100644
index 0000000000..b620372dd0
--- /dev/null
+++ b/src/files-and-videos/videos-page/upload-modal/UploadStatusIcon.jsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Icon, Spinner } from '@openedx/paragon';
+import { Check, ErrorOutline } from '@openedx/paragon/icons';
+import { RequestStatus } from '../../../data/constants';
+
+const UploadStatusIcon = ({ status }) => {
+  switch (status) {
+    case RequestStatus.SUCCESSFUL:
+      return (<Icon src={Check} />);
+    case RequestStatus.FAILED:
+      return (<Icon src={ErrorOutline} />);
+    case RequestStatus.IN_PROGRESS:
+      return (
+        <Spinner
+          animation="border"
+          size="sm"
+          screenReaderText="Loading"
+        />
+      );
+    default:
+      return (<div style={{ width: '24px' }} />);
+  }
+};
+
+UploadStatusIcon.defaultProps = {
+  status: null,
+};
+UploadStatusIcon.propTypes = {
+  status: PropTypes.string,
+};
+
+export default UploadStatusIcon;
diff --git a/src/files-and-videos/videos-page/upload-modal/index.js b/src/files-and-videos/videos-page/upload-modal/index.js
new file mode 100644
index 0000000000..fbddf6209f
--- /dev/null
+++ b/src/files-and-videos/videos-page/upload-modal/index.js
@@ -0,0 +1,3 @@
+import UploadModal from './UploadModal';
+
+export default UploadModal;
diff --git a/src/frontend-platform.d.ts b/src/frontend-platform.d.ts
new file mode 100644
index 0000000000..d9b2f7f91b
--- /dev/null
+++ b/src/frontend-platform.d.ts
@@ -0,0 +1,41 @@
+// frontend-platform currently doesn't provide types... do it ourselves for i18n module at least.
+// We can remove this in the future when we migrate to frontend-shell, or when frontend-platform gets types
+// (whichever comes first).
+
+declare module '@edx/frontend-platform/i18n' {
+  // eslint-disable-next-line import/no-extraneous-dependencies
+  import { injectIntl as _injectIntl } from 'react-intl';
+  /** @deprecated Use useIntl() hook instead. */
+  export const injectIntl: typeof _injectIntl;
+  /** @deprecated Use useIntl() hook instead. */
+  export const intlShape: any;
+
+  // eslint-disable-next-line import/no-extraneous-dependencies
+  export {
+    createIntl,
+    FormattedDate,
+    FormattedTime,
+    FormattedRelativeTime,
+    FormattedNumber,
+    FormattedPlural,
+    FormattedMessage,
+    defineMessages,
+    IntlProvider,
+    useIntl,
+  } from 'react-intl';
+
+  // Other exports from the i18n module:
+  export const configure: any;
+  export const getPrimaryLanguageSubtag: (code: string) => string;
+  export const getLocale: (locale?: string) => string;
+  export const getMessages: any;
+  export const isRtl: (locale?: string) => boolean;
+  export const handleRtl: any;
+  export const mergeMessages: any;
+  export const LOCALE_CHANGED: any;
+  export const LOCALE_TOPIC: any;
+  export const getCountryList: any;
+  export const getCountryMessages: any;
+  export const getLanguageList: any;
+  export const getLanguageMessages: any;
+}
diff --git a/src/generic/AlertProctoringError.jsx b/src/generic/AlertProctoringError.jsx
new file mode 100644
index 0000000000..ed42ec95fe
--- /dev/null
+++ b/src/generic/AlertProctoringError.jsx
@@ -0,0 +1,40 @@
+import { Alert } from '@openedx/paragon';
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const AlertProctoringError = ({ proctoringErrorsData, children, ...props }) => (
+  <ul className="alert-proctoring-error p-0">
+    <Alert {...props}>
+      {children}
+      {proctoringErrorsData.map(({ key, model, message }) => (
+        <li key={key}>
+          <Alert.Heading>{model.displayName}</Alert.Heading>
+          <p>{message}</p>
+        </li>
+      ))}
+    </Alert>
+  </ul>
+);
+
+AlertProctoringError.propTypes = {
+  variant: PropTypes.string,
+  children: PropTypes.node,
+  proctoringErrorsData: PropTypes.arrayOf(PropTypes.shape({
+    key: PropTypes.string,
+    message: PropTypes.string,
+    model: PropTypes.shape({
+      deprecated: PropTypes.bool,
+      displayName: PropTypes.string,
+      help: PropTypes.string,
+      hideOnEnabledPublisher: PropTypes.bool,
+    }),
+    value: PropTypes.string,
+  })).isRequired,
+};
+
+AlertProctoringError.defaultProps = {
+  variant: 'danger',
+  children: null,
+};
+
+export default AlertProctoringError;
diff --git a/src/generic/ApplyWrapper.jsx b/src/generic/ApplyWrapper.jsx
new file mode 100644
index 0000000000..ffb7ca3881
--- /dev/null
+++ b/src/generic/ApplyWrapper.jsx
@@ -0,0 +1,3 @@
+const ApplyWrapper = ({ condition, wrapper, children }) => (condition ? wrapper(children) : children);
+
+export default ApplyWrapper;
diff --git a/src/generic/CodeEditor.tsx b/src/generic/CodeEditor.tsx
new file mode 100644
index 0000000000..fececa4213
--- /dev/null
+++ b/src/generic/CodeEditor.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import { basicSetup, EditorView } from 'codemirror';
+import { EditorState, Compartment } from '@codemirror/state';
+import { xml } from '@codemirror/lang-xml';
+
+export type EditorAccessor = EditorView;
+
+interface Props {
+  readOnly?: boolean;
+  children?: string;
+  editorRef?: React.MutableRefObject<EditorAccessor | undefined>;
+}
+
+export const CodeEditor: React.FC<Props> = ({
+  readOnly = false,
+  children = '',
+  editorRef,
+}) => {
+  const divRef = React.useRef<HTMLDivElement>(null);
+  const language = React.useMemo(() => new Compartment(), []);
+  const tabSize = React.useMemo(() => new Compartment(), []);
+
+  React.useEffect(() => {
+    if (!divRef.current) { return; }
+    const state = EditorState.create({
+      doc: children,
+      extensions: [
+        basicSetup,
+        language.of(xml()),
+        tabSize.of(EditorState.tabSize.of(2)),
+        EditorState.readOnly.of(readOnly),
+      ],
+    });
+
+    const view = new EditorView({
+      state,
+      parent: divRef.current,
+    });
+    if (editorRef) {
+      // eslint-disable-next-line no-param-reassign
+      editorRef.current = view;
+    }
+    // eslint-disable-next-line consistent-return
+    return () => {
+      if (editorRef) {
+        // eslint-disable-next-line no-param-reassign
+        editorRef.current = undefined;
+      }
+      view.destroy(); // Clean up
+    };
+  }, [divRef.current, readOnly, editorRef]);
+
+  return <div ref={divRef} />;
+};
diff --git a/src/generic/CollapsableEditor.jsx b/src/generic/CollapsableEditor.jsx
new file mode 100644
index 0000000000..3e4e7b0ec3
--- /dev/null
+++ b/src/generic/CollapsableEditor.jsx
@@ -0,0 +1,82 @@
+import { Collapsible, Icon, IconButton } from '@openedx/paragon';
+import { Delete, ExpandLess, ExpandMore } from '@openedx/paragon/icons';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const CollapsableEditor = ({
+  title,
+  open,
+  defaultOpen,
+  onToggle,
+  onClose,
+  onDelete,
+  children,
+  expandAlt,
+  deleteAlt,
+  collapseAlt,
+  ...props
+}) => (
+  <Collapsible.Advanced
+    className="collapsible-card rounded mb-3 px-3 py-2"
+    onToggle={onToggle}
+    onClose={onClose}
+    defaultOpen={defaultOpen}
+    open={open}
+    {...props}
+  >
+    <Collapsible.Trigger
+      className="collapsible-trigger d-flex border-0 align-items-center"
+      style={{ justifyContent: 'unset' }}
+    >
+      <div className="d-flex flex-grow-1 w-75">{title}</div>
+      <Collapsible.Visible whenClosed>
+        <div className="align-self-start">
+          <IconButton alt={expandAlt} src={ExpandMore} iconAs={Icon} variant="dark" />
+        </div>
+      </Collapsible.Visible>
+      <Collapsible.Visible whenOpen>
+        {onDelete && (
+          <div className="pr-4 border-right">
+            <IconButton
+              onClick={(event) => {
+                event.stopPropagation();
+                onDelete();
+              }}
+              alt={deleteAlt}
+              src={Delete}
+              iconAs={Icon}
+              variant="dark"
+            />
+          </div>
+        )}
+        <div className="pl-4 d-flex">
+          <IconButton alt={collapseAlt} src={ExpandLess} iconAs={Icon} variant="dark" />
+        </div>
+      </Collapsible.Visible>
+    </Collapsible.Trigger>
+    <Collapsible.Body className="collapsible-body rounded px-0">{children}</Collapsible.Body>
+  </Collapsible.Advanced>
+);
+
+CollapsableEditor.propTypes = {
+  open: PropTypes.bool,
+  defaultOpen: PropTypes.bool,
+  title: PropTypes.node.isRequired,
+  onToggle: PropTypes.func.isRequired,
+  onDelete: PropTypes.func,
+  children: PropTypes.node.isRequired,
+  expandAlt: PropTypes.string.isRequired,
+  deleteAlt: PropTypes.string.isRequired,
+  collapseAlt: PropTypes.string.isRequired,
+  onClose: PropTypes.func,
+};
+
+CollapsableEditor.defaultProps = {
+  onDelete: null,
+  defaultOpen: undefined,
+  open: undefined,
+  onClose: () => {
+  },
+};
+
+export default React.memo(CollapsableEditor);
diff --git a/src/generic/ConfirmationPopup.jsx b/src/generic/ConfirmationPopup.jsx
new file mode 100644
index 0000000000..23c7a6298a
--- /dev/null
+++ b/src/generic/ConfirmationPopup.jsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, Card } from '@openedx/paragon';
+
+const ConfirmationPopup = ({
+  label,
+  bodyText,
+  onConfirm,
+  confirmLabel,
+  onCancel,
+  cancelLabel,
+  confirmVariant,
+  confirmButtonClass,
+  cancelButtonClass,
+  sectionClasses,
+}) => (
+  <Card className="rounded px-1 mt-4">
+    <Card.Header
+      className="text-primary-500"
+      title={label}
+      size="sm"
+    />
+    <Card.Body>
+      <Card.Section className={`text-justify text-muted pt-2 pb-3 ${sectionClasses}`}>{bodyText}</Card.Section>
+      <Card.Footer>
+        <Button variant="tertiary" className={cancelButtonClass} onClick={onCancel}>
+          {cancelLabel}
+        </Button>
+        <Button variant={confirmVariant} className={`ml-2 ${confirmButtonClass}`} onClick={onConfirm}>
+          {confirmLabel}
+        </Button>
+      </Card.Footer>
+    </Card.Body>
+  </Card>
+);
+
+ConfirmationPopup.propTypes = {
+  label: PropTypes.string.isRequired,
+  bodyText: PropTypes.string.isRequired,
+  onConfirm: PropTypes.func.isRequired,
+  onCancel: PropTypes.func.isRequired,
+  confirmLabel: PropTypes.string.isRequired,
+  cancelLabel: PropTypes.string.isRequired,
+  confirmButtonClass: PropTypes.string,
+  cancelButtonClass: PropTypes.string,
+  confirmVariant: PropTypes.string,
+  sectionClasses: PropTypes.string,
+};
+ConfirmationPopup.defaultProps = {
+  confirmVariant: 'outline-brand',
+  confirmButtonClass: '',
+  cancelButtonClass: '',
+  sectionClasses: '',
+};
+
+export default React.memo(ConfirmationPopup);
diff --git a/src/generic/ConnectionErrorAlert.jsx b/src/generic/ConnectionErrorAlert.jsx
index ee2daf5fc6..44d088a66b 100644
--- a/src/generic/ConnectionErrorAlert.jsx
+++ b/src/generic/ConnectionErrorAlert.jsx
@@ -1,27 +1,24 @@
 import React from 'react';
 import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';
-import { Alert } from '@edx/paragon';
+import { Alert } from '@openedx/paragon';
 import { getConfig } from '@edx/frontend-platform';
 
 import messages from '../messages';
 
-function ConnectionErrorAlert({ intl }) {
-  return (
-    <Alert variant="danger" data-testid="connectionErrorAlert">
-      <FormattedMessage
-        id="authoring.alert.error.connection"
-        defaultMessage="We encountered a technical error when loading this page. This might be a temporary issue, so please try again in a few minutes. If the problem persists, please go to the {supportLink} for help."
-        values={{
-          supportLink: (
-            <Alert.Link href={getConfig().SUPPORT_URL}>
-              {intl.formatMessage(messages.supportText)}
-            </Alert.Link>
-          ),
-        }}
-      />
-    </Alert>
-  );
-}
+const ConnectionErrorAlert = ({ intl }) => (
+  <Alert variant="danger" data-testid="connectionErrorAlert">
+    <FormattedMessage
+      {...messages.connectionError}
+      values={{
+        supportLink: (
+          <Alert.Link href={getConfig().SUPPORT_URL}>
+            {intl.formatMessage(messages.supportText)}
+          </Alert.Link>
+        ),
+      }}
+    />
+  </Alert>
+);
 
 ConnectionErrorAlert.propTypes = {
   intl: intlShape.isRequired,
diff --git a/src/generic/DraftIcon.jsx b/src/generic/DraftIcon.jsx
new file mode 100644
index 0000000000..6b2b9d95f1
--- /dev/null
+++ b/src/generic/DraftIcon.jsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+const DraftIcon = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    viewBox="0 -960 960 960"
+    {...props}
+  >
+    <path
+      d="M240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h320l240 240v480q0 33-23.5 56.5T720-80H240Zm280-520v-200H240v640h480v-440H520ZM240-800v200-200 640-640Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export default DraftIcon;
diff --git a/src/generic/FieldFeedback.jsx b/src/generic/FieldFeedback.jsx
new file mode 100644
index 0000000000..5a47a42e44
--- /dev/null
+++ b/src/generic/FieldFeedback.jsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Form, TransitionReplace } from '@openedx/paragon';
+
+const FieldFeedback = ({
+  feedbackClasses,
+  transitionClasses,
+  errorCondition,
+  feedbackCondition,
+  feedbackMessage,
+  errorMessage,
+}) => (
+  <>
+    <TransitionReplace className={transitionClasses}>
+      {feedbackCondition ? (
+        <React.Fragment key="open1">
+          <Form.Control.Feedback type="default" hasIcon={false} key={`${feedbackMessage}-feedback`}>
+            <div className={`small ${feedbackClasses}`}>{feedbackMessage}</div>
+          </Form.Control.Feedback>
+        </React.Fragment>
+      ) : <React.Fragment key="close1" />}
+    </TransitionReplace>
+
+    <TransitionReplace>
+      {errorCondition ? (
+        <React.Fragment key="open">
+          <Form.Control.Feedback type="invalid" hasIcon={false} key={`${errorMessage}-feedback`}>
+            <div className={`small ${feedbackClasses}`}>{errorMessage}</div>
+          </Form.Control.Feedback>
+        </React.Fragment>
+      ) : <React.Fragment key="close" />}
+    </TransitionReplace>
+  </>
+);
+
+FieldFeedback.propTypes = {
+  errorCondition: PropTypes.bool.isRequired,
+  errorMessage: PropTypes.string,
+  feedbackMessage: PropTypes.string,
+  feedbackCondition: PropTypes.bool,
+  feedbackClasses: PropTypes.string,
+  transitionClasses: PropTypes.string,
+};
+
+FieldFeedback.defaultProps = {
+  feedbackClasses: '',
+  transitionClasses: '',
+  feedbackMessage: '',
+  feedbackCondition: false,
+  errorMessage: '',
+};
+
+export default React.memo(FieldFeedback);
diff --git a/src/generic/FormSwitchGroup.jsx b/src/generic/FormSwitchGroup.jsx
index 1713d66898..1c2cd00e72 100644
--- a/src/generic/FormSwitchGroup.jsx
+++ b/src/generic/FormSwitchGroup.jsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Form, SwitchControl } from '@edx/paragon';
+import { Form, SwitchControl } from '@openedx/paragon';
 
 import './FormSwitchGroup.scss';
 
-export default function FormSwitchGroup({
+const FormSwitchGroup = ({
   id,
   name,
   label,
@@ -13,7 +13,8 @@ export default function FormSwitchGroup({
   onChange,
   onBlur,
   checked,
-}) {
+  disabled,
+}) => {
   const helpTextId = `${id}HelpText`;
 
   // Note that we use controlId here _and_ set some IDs and aria-describedby attributes manually.
@@ -36,6 +37,7 @@ export default function FormSwitchGroup({
             onChange={onChange}
             onBlur={onBlur}
             checked={checked}
+            disabled={disabled}
           />
         </div>
         <Form.Text
@@ -47,7 +49,7 @@ export default function FormSwitchGroup({
       </div>
     </Form.Group>
   );
-}
+};
 FormSwitchGroup.propTypes = {
   id: PropTypes.string.isRequired,
   label: PropTypes.node.isRequired,
@@ -57,9 +59,13 @@ FormSwitchGroup.propTypes = {
   onChange: PropTypes.func.isRequired,
   onBlur: PropTypes.func,
   checked: PropTypes.bool.isRequired,
+  disabled: PropTypes.bool,
 };
 FormSwitchGroup.defaultProps = {
   className: null,
   onBlur: null,
   name: null,
+  disabled: false,
 };
+
+export default FormSwitchGroup;
diff --git a/src/generic/FormikControl.tsx b/src/generic/FormikControl.tsx
new file mode 100644
index 0000000000..e3d56af966
--- /dev/null
+++ b/src/generic/FormikControl.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import { Form } from '@openedx/paragon';
+import { getIn, useFormikContext } from 'formik';
+import FormikErrorFeedback from './FormikErrorFeedback';
+
+interface Props {
+  name: string;
+  label?: React.ReactElement;
+  help?: React.ReactElement;
+  className?: string;
+  controlClasses?: string;
+  value: string | number;
+}
+
+const FormikControl: React.FC<Props & React.ComponentProps<typeof Form.Control>> = ({
+  name,
+  // eslint-disable-next-line react/jsx-no-useless-fragment
+  label = <></>,
+  // eslint-disable-next-line react/jsx-no-useless-fragment
+  help = <></>,
+  className = '',
+  controlClasses = 'pb-2',
+  ...params
+}) => {
+  const {
+    touched, errors, handleChange, handleBlur, setFieldError,
+  } = useFormikContext();
+  const fieldTouched = getIn(touched, name);
+  const fieldError = getIn(errors, name);
+  const handleFocus = (e) => setFieldError(e.target.name, undefined);
+
+  return (
+    <Form.Group className={className}>
+      {label}
+      <Form.Control
+        {...params}
+        name={name}
+        className={controlClasses}
+        onChange={handleChange}
+        onBlur={handleBlur}
+        onFocus={handleFocus}
+        isInvalid={!!fieldTouched && !!fieldError}
+      />
+      <FormikErrorFeedback name={name}>
+        <Form.Text>{help}</Form.Text>
+      </FormikErrorFeedback>
+    </Form.Group>
+  );
+};
+
+export default FormikControl;
diff --git a/src/generic/FormikErrorFeedback.jsx b/src/generic/FormikErrorFeedback.jsx
new file mode 100644
index 0000000000..936940e068
--- /dev/null
+++ b/src/generic/FormikErrorFeedback.jsx
@@ -0,0 +1,36 @@
+import { Form, TransitionReplace } from '@openedx/paragon';
+import { getIn, useFormikContext } from 'formik';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const FormikErrorFeedback = ({ name, children }) => {
+  const { touched, errors } = useFormikContext();
+  const fieldTouched = getIn(touched, name);
+  const fieldError = getIn(errors, name);
+
+  return (
+    <TransitionReplace>
+      {fieldTouched && fieldError
+        ? (
+          <Form.Control.Feedback type="invalid" hasIcon={false} key={`${name}-error-feedback`}>
+            {fieldError}
+          </Form.Control.Feedback>
+        )
+        : (
+          <React.Fragment key={`${name}-no-error-feedback`}>
+            {children}
+          </React.Fragment>
+        )}
+    </TransitionReplace>
+  );
+};
+
+FormikErrorFeedback.propTypes = {
+  name: PropTypes.string.isRequired,
+  children: PropTypes.node,
+};
+FormikErrorFeedback.defaultProps = {
+  children: null,
+};
+
+export default FormikErrorFeedback;
diff --git a/src/generic/Loading.jsx b/src/generic/Loading.jsx
index 9450a00385..8262e89b33 100644
--- a/src/generic/Loading.jsx
+++ b/src/generic/Loading.jsx
@@ -1,24 +1,36 @@
 import React from 'react';
-import { Spinner } from '@edx/paragon';
+import PropTypes from 'prop-types';
+import { Spinner } from '@openedx/paragon';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 
-export default function Loading() {
-  return (
-    <div
-      className="d-flex justify-content-center align-items-center flex-column"
-      style={{
-        height: '50vh',
-      }}
-    >
-      <Spinner className animation="border" role="status" variant="primary">
-        <span className="sr-only">
-          <FormattedMessage
-            id="authoring.loading"
-            defaultMessage="Loading..."
-            description="Screen-reader message for when a page is loading."
-          />
-        </span>
-      </Spinner>
-    </div>
-  );
-}
+export const LoadingSpinner = ({ size }) => (
+  <Spinner
+    animation="border"
+    role="status"
+    variant="primary"
+    size={size}
+    screenReaderText={(
+      <FormattedMessage
+        id="authoring.loading"
+        defaultMessage="Loading..."
+        description="Screen-reader message for when a page is loading."
+      />
+    )}
+  />
+);
+
+LoadingSpinner.defaultProps = {
+  size: undefined,
+};
+
+LoadingSpinner.propTypes = {
+  size: PropTypes.string,
+};
+
+const Loading = () => (
+  <div className="d-flex justify-content-center align-items-center flex-column vh-100">
+    <LoadingSpinner />
+  </div>
+);
+
+export default Loading;
diff --git a/src/generic/NewsstandIcon.tsx b/src/generic/NewsstandIcon.tsx
new file mode 100644
index 0000000000..e68cd4b77f
--- /dev/null
+++ b/src/generic/NewsstandIcon.tsx
@@ -0,0 +1,17 @@
+// This file will be no longer needed one https://github.com/openedx/paragon/pull/3045 is merged.
+const NewsstandIcon = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    viewBox="0 -960 960 960"
+    {...props}
+  >
+    <path
+      d="M80-160v-80h800v80H80Zm80-160v-320h80v320h-80Zm160 0v-480h80v480h-80Zm160 0v-480h80v480h-80Zm280 0L600-600l70-40 160 280-70 40Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export default NewsstandIcon;
diff --git a/src/generic/NotFoundAlert.jsx b/src/generic/NotFoundAlert.jsx
new file mode 100644
index 0000000000..9f9bb1f19b
--- /dev/null
+++ b/src/generic/NotFoundAlert.jsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import { Alert } from '@openedx/paragon';
+
+const NotFoundAlert = () => (
+  <Alert variant="danger" data-testid="notFoundAlert">
+    <FormattedMessage
+      id="authoring.alert.error.notfound"
+      defaultMessage="Not found."
+    />
+  </Alert>
+);
+
+export default NotFoundAlert;
diff --git a/src/generic/PermissionDeniedAlert.jsx b/src/generic/PermissionDeniedAlert.jsx
index 3bef2d0682..00f62a106a 100644
--- a/src/generic/PermissionDeniedAlert.jsx
+++ b/src/generic/PermissionDeniedAlert.jsx
@@ -1,16 +1,14 @@
 import React from 'react';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
-import { Alert } from '@edx/paragon';
+import { Alert } from '@openedx/paragon';
 
-function PermissionDeniedAlert() {
-  return (
-    <Alert variant="danger" data-testid="permissionDeniedAlert">
-      <FormattedMessage
-        id="authoring.alert.error.permission"
-        defaultMessage="You are not authorized to view this page. If you feel you should have access, please reach out to your course team admin to be given access."
-      />
-    </Alert>
-  );
-}
+const PermissionDeniedAlert = () => (
+  <Alert variant="danger" data-testid="permissionDeniedAlert">
+    <FormattedMessage
+      id="authoring.alert.error.permission"
+      defaultMessage="You are not authorized to view this page. If you feel you should have access, please reach out to your course team admin to be given access."
+    />
+  </Alert>
+);
 
 export default PermissionDeniedAlert;
diff --git a/src/generic/SaveFormConnectionErrorAlert.jsx b/src/generic/SaveFormConnectionErrorAlert.jsx
index 67a0564d5c..fe40bcf21f 100644
--- a/src/generic/SaveFormConnectionErrorAlert.jsx
+++ b/src/generic/SaveFormConnectionErrorAlert.jsx
@@ -1,27 +1,25 @@
 import React from 'react';
 import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';
-import { Alert } from '@edx/paragon';
+import { Alert } from '@openedx/paragon';
 import { getConfig } from '@edx/frontend-platform';
 
 import messages from '../messages';
 
-function SaveFormConnectionErrorAlert({ intl }) {
-  return (
-    <Alert variant="danger" data-testid="connectionErrorAlert">
-      <FormattedMessage
-        id="authoring.alert.save.error.connection"
-        defaultMessage="We encountered a technical error when applying changes. This might be a temporary issue, so please try again in a few minutes. If the problem persists, please go to the {supportLink} for help."
-        values={{
-          supportLink: (
-            <Alert.Link href={getConfig().SUPPORT_URL}>
-              {intl.formatMessage(messages.supportText)}
-            </Alert.Link>
-          ),
-        }}
-      />
-    </Alert>
-  );
-}
+const SaveFormConnectionErrorAlert = ({ intl }) => (
+  <Alert variant="danger" data-testid="connectionErrorAlert">
+    <FormattedMessage
+      id="authoring.alert.save.error.connection"
+      defaultMessage="We encountered a technical error when applying changes. This might be a temporary issue, so please try again in a few minutes. If the problem persists, please go to the {supportLink} for help."
+      values={{
+        supportLink: (
+          <Alert.Link href={getConfig().SUPPORT_URL}>
+            {intl.formatMessage(messages.supportText)}
+          </Alert.Link>
+        ),
+      }}
+    />
+  </Alert>
+);
 
 SaveFormConnectionErrorAlert.propTypes = {
   intl: intlShape.isRequired,
diff --git a/src/generic/WysiwygEditor.jsx b/src/generic/WysiwygEditor.jsx
new file mode 100644
index 0000000000..7da6d09b09
--- /dev/null
+++ b/src/generic/WysiwygEditor.jsx
@@ -0,0 +1,79 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useSelector } from 'react-redux';
+import TinyMceWidget, { prepareEditorRef } from '../editors/sharedComponents/TinyMceWidget';
+
+import { DEFAULT_EMPTY_WYSIWYG_VALUE } from '../constants';
+
+export const SUPPORTED_TEXT_EDITORS = {
+  text: 'text',
+  expandable: 'expandable',
+};
+
+export const WysiwygEditor = ({
+  initialValue, editorType, onChange, minHeight,
+}) => {
+  const { editorRef, refReady, setEditorRef } = prepareEditorRef();
+  const { courseId } = useSelector((state) => state.courseDetail);
+  const isEquivalentCodeExtraSpaces = (first, second) => {
+    // Utils allows to compare code extra spaces
+    const removeWhitespace = (str) => str.replace(/\s/g, '');
+    return removeWhitespace(first) === removeWhitespace(second);
+  };
+
+  const isEquivalentCodeQuotes = (first, second) => {
+    // Utils allows to compare code with single quotes and double quotes
+    const normalizeQuotes = (section) => section.replace(/'/g, '"');
+    return normalizeQuotes(first) === normalizeQuotes(second);
+  };
+
+  // default initial string returned onEditorChange if empty input
+  const needToChange = (value) => !isEquivalentCodeQuotes(initialValue, value)
+    && !isEquivalentCodeExtraSpaces(initialValue, value)
+    && (initialValue !== DEFAULT_EMPTY_WYSIWYG_VALUE || value !== '');
+
+  const handleUpdate = (value, editor) => {
+    // With bookmarks keep the current cursor position at the end of the line
+    // and it inserts new content only at the end of the line.
+    const bm = editor.selection.getBookmark();
+    const existingContent = editor.getContent({ format: 'raw' });
+    if (needToChange(value)) { onChange(value); }
+    editor.setContent(existingContent);
+    editor.selection.moveToBookmark(bm);
+  };
+
+  if (!refReady) {
+    return null;
+  }
+
+  return (
+    <TinyMceWidget
+      textValue={initialValue}
+      editorRef={editorRef}
+      editorType={editorType}
+      initialValue={initialValue}
+      minHeight={minHeight}
+      editorContentHtml={initialValue}
+      setEditorRef={setEditorRef}
+      onChange={handleUpdate}
+      initializeEditor={() => ({})}
+      learningContextId={courseId}
+      images={{}}
+      enableImageUpload={false}
+      onEditorChange={() => ({})}
+    />
+  );
+};
+
+WysiwygEditor.defaultProps = {
+  initialValue: '',
+  editorType: SUPPORTED_TEXT_EDITORS.text,
+  minHeight: 200,
+};
+
+WysiwygEditor.propTypes = {
+  initialValue: PropTypes.string,
+  editorType: PropTypes.oneOf(Object.values(SUPPORTED_TEXT_EDITORS)),
+  onChange: PropTypes.func.isRequired,
+  minHeight: PropTypes.number,
+};
diff --git a/src/generic/WysiwygEditor.scss b/src/generic/WysiwygEditor.scss
new file mode 100644
index 0000000000..06a1226583
--- /dev/null
+++ b/src/generic/WysiwygEditor.scss
@@ -0,0 +1,5 @@
+.tox-dialog-wrap__backdrop {
+  background-color: $black !important;
+  opacity: .5;
+  z-index: $zindex-modal-backdrop;
+}
diff --git a/src/generic/__mocks__/contentTagsCount.js b/src/generic/__mocks__/contentTagsCount.js
new file mode 100644
index 0000000000..218e91e150
--- /dev/null
+++ b/src/generic/__mocks__/contentTagsCount.js
@@ -0,0 +1,8 @@
+export default {
+  'block-v1:SampleTaxonomyOrg1+STC1+2023_1+type@vertical+block@aaf8b8eb86b54281aeeab12499d2cb01': 10,
+  'block-v1:SampleTaxonomyOrg1+STC1+2023_1+type@vertical+block@aaf8b8eb86b54281aeeab12499d2cb02': 11,
+  'block-v1:SampleTaxonomyOrg1+STC1+2023_1+type@vertical+block@aaf8b8eb86b54281aeeab12499d2cb03': 12,
+  'block-v1:SampleTaxonomyOrg1+STC1+2023_1+type@vertical+block@aaf8b8eb86b54281aeeab12499d2cb04': 13,
+  'block-v1:SampleTaxonomyOrg1+STC1+2023_1+type@vertical+block@aaf8b8eb86b54281aeeab12499d2cb05': 14,
+  'block-v1:SampleTaxonomyOrg1+STC1+2023_1+type@vertical+block@aaf8b8eb86b54281aeeab12499d2cb06': 15,
+};
diff --git a/src/generic/__mocks__/index.js b/src/generic/__mocks__/index.js
new file mode 100644
index 0000000000..454507d3c5
--- /dev/null
+++ b/src/generic/__mocks__/index.js
@@ -0,0 +1 @@
+export { default as contentTagsCountMock } from './contentTagsCount';
diff --git a/src/generic/alert-error/AlertError.test.tsx b/src/generic/alert-error/AlertError.test.tsx
new file mode 100644
index 0000000000..6cfee70db0
--- /dev/null
+++ b/src/generic/alert-error/AlertError.test.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import AlertError from '.';
+
+const RootWrapper = ({ error }: { error: unknown }) => (
+  <IntlProvider locale="en">
+    <AlertError error={error} />
+  </IntlProvider>
+);
+
+describe('<AlertMessage />', () => {
+  test('render using a string', () => {
+    const error = 'This is a string error message';
+    const { getByText } = render(<RootWrapper error={error} />);
+    expect(getByText('This is a string error message')).toBeInTheDocument();
+  });
+
+  test('render using an error', () => {
+    const error = new Error('This is an error message');
+    const { getByText } = render(<RootWrapper error={error} />);
+    expect(getByText('This is an error message')).toBeInTheDocument();
+  });
+
+  test('render using an error with response', () => {
+    const error = {
+      message: 'This is an error message',
+      response: {
+        data: {
+          message: 'This is a response body',
+        },
+      },
+    };
+    const { getByText } = render(<RootWrapper error={error} />);
+    screen.logTestingPlaygroundURL();
+    expect(getByText(/this is an error message/i)).toBeInTheDocument();
+    expect(getByText(/\{"message":"this is a response body"\}/i)).toBeInTheDocument();
+  });
+});
diff --git a/src/generic/alert-error/index.tsx b/src/generic/alert-error/index.tsx
new file mode 100644
index 0000000000..a0612fc473
--- /dev/null
+++ b/src/generic/alert-error/index.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import {
+  Alert,
+} from '@openedx/paragon';
+
+const AlertError: React.FC<{ error: unknown }> = ({ error }) => (
+  <Alert variant="danger" className="mt-3">
+    {error instanceof Object && 'message' in error ? error.message : String(error)}
+    <br />
+    {error instanceof Object && (error as any).response?.data && JSON.stringify((error as any).response?.data)}
+  </Alert>
+);
+
+export default AlertError;
diff --git a/src/generic/alert-message/AlertMessage.test.tsx b/src/generic/alert-message/AlertMessage.test.tsx
new file mode 100644
index 0000000000..35196dede8
--- /dev/null
+++ b/src/generic/alert-message/AlertMessage.test.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import AlertMessage from '.';
+
+const alertTitle = 'Test Title';
+const alertDescription = 'Test Description';
+const alertClassName = 'custom-class';
+
+const RootWrapper = () => (
+  <IntlProvider locale="en">
+    <AlertMessage
+      title={alertTitle}
+      description={alertDescription}
+      className={alertClassName}
+    />
+  </IntlProvider>
+);
+
+describe('<AlertMessage />', () => {
+  it('renders the title and description correctly', () => {
+    const { getByText } = render(<RootWrapper />);
+    const titleElement = getByText(alertTitle);
+    const descriptionElement = getByText(alertDescription);
+    expect(titleElement).toBeInTheDocument();
+    expect(descriptionElement).toBeInTheDocument();
+  });
+  it('renders the alert with additional props', () => {
+    const { getByRole } = render(<RootWrapper />);
+    const alertElement = getByRole('alert');
+    const classNameExists = alertElement.classList.contains(alertClassName);
+    expect(alertElement).toBeInTheDocument();
+    expect(classNameExists).toBe(true);
+  });
+});
diff --git a/src/generic/alert-message/index.tsx b/src/generic/alert-message/index.tsx
new file mode 100644
index 0000000000..6b3c3214ce
--- /dev/null
+++ b/src/generic/alert-message/index.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { Alert } from '@openedx/paragon';
+
+interface Props extends React.ComponentPropsWithoutRef<typeof Alert> {
+  title?: string | React.ReactNode;
+  description?: string | React.ReactNode;
+}
+
+const AlertMessage: React.FC<Props> = ({ title, description, ...props }) => (
+  <Alert {...props}>
+    <Alert.Heading>{title}</Alert.Heading>
+    <span>{description}</span>
+  </Alert>
+);
+
+export default AlertMessage;
diff --git a/src/generic/block-type-utils/constants.ts b/src/generic/block-type-utils/constants.ts
new file mode 100644
index 0000000000..97f9ae0f70
--- /dev/null
+++ b/src/generic/block-type-utils/constants.ts
@@ -0,0 +1,77 @@
+import React from 'react';
+import {
+  BackHand as BackHandIcon,
+  BookOpen as BookOpenIcon,
+  Casino as ProblemBankIcon,
+  Edit as EditIcon,
+  EditNote as EditNoteIcon,
+  FormatListBulleted as FormatListBulletedIcon,
+  HelpOutline as HelpOutlineIcon,
+  LibraryAdd as LibraryIcon,
+  Lock as LockIcon,
+  QuestionAnswerOutline as QuestionAnswerOutlineIcon,
+  Science as ScienceIcon,
+  TextFields as TextFieldsIcon,
+  VideoCamera as VideoCameraIcon,
+  Folder,
+} from '@openedx/paragon/icons';
+import NewsstandIcon from '../NewsstandIcon';
+
+export const UNIT_ICON_TYPES = ['video', 'other', 'vertical', 'problem', 'lock'];
+
+export const COMPONENT_TYPES = {
+  advanced: 'advanced',
+  discussion: 'discussion',
+  library: 'library',
+  libraryV2: 'library_v2',
+  itembank: 'itembank',
+  html: 'html',
+  openassessment: 'openassessment',
+  problem: 'problem',
+  video: 'video',
+  dragAndDrop: 'drag-and-drop-v2',
+};
+
+export const UNIT_TYPE_ICONS_MAP: Record<string, React.ComponentType> = {
+  video: VideoCameraIcon,
+  other: BookOpenIcon,
+  vertical: FormatListBulletedIcon,
+  problem: EditIcon,
+  lock: LockIcon,
+};
+
+export const COMPONENT_TYPE_ICON_MAP: Record<string, React.ComponentType> = {
+  [COMPONENT_TYPES.advanced]: ScienceIcon,
+  [COMPONENT_TYPES.discussion]: QuestionAnswerOutlineIcon,
+  [COMPONENT_TYPES.library]: LibraryIcon,
+  [COMPONENT_TYPES.itembank]: ProblemBankIcon,
+  [COMPONENT_TYPES.libraryV2]: NewsstandIcon,
+  [COMPONENT_TYPES.html]: TextFieldsIcon,
+  [COMPONENT_TYPES.openassessment]: EditNoteIcon,
+  [COMPONENT_TYPES.problem]: HelpOutlineIcon,
+  [COMPONENT_TYPES.video]: VideoCameraIcon,
+  [COMPONENT_TYPES.dragAndDrop]: BackHandIcon,
+};
+
+export const STRUCTURAL_TYPE_ICONS: Record<string, React.ComponentType> = {
+  vertical: UNIT_TYPE_ICONS_MAP.vertical,
+  sequential: Folder,
+  chapter: Folder,
+  collection: Folder,
+};
+
+export const COMPONENT_TYPE_STYLE_COLOR_MAP = {
+  [COMPONENT_TYPES.advanced]: 'component-style-other',
+  [COMPONENT_TYPES.discussion]: 'component-style-default',
+  [COMPONENT_TYPES.library]: 'component-style-default',
+  [COMPONENT_TYPES.html]: 'component-style-html',
+  [COMPONENT_TYPES.openassessment]: 'component-style-default',
+  [COMPONENT_TYPES.problem]: 'component-style-default',
+  [COMPONENT_TYPES.video]: 'component-style-video',
+  [COMPONENT_TYPES.dragAndDrop]: 'component-style-default',
+  vertical: 'component-style-vertical',
+  sequential: 'component-style-default',
+  chapter: 'component-style-default',
+  collection: 'component-style-collection',
+  other: 'component-style-other',
+};
diff --git a/src/generic/block-type-utils/index.scss b/src/generic/block-type-utils/index.scss
new file mode 100644
index 0000000000..713509c0ba
--- /dev/null
+++ b/src/generic/block-type-utils/index.scss
@@ -0,0 +1,149 @@
+.component-style-default {
+  background-color: #005C9E;
+
+  .pgn__icon:not(.btn-icon-before) {
+    color: white;
+  }
+
+  .btn-icon {
+    &:hover, &:active, &:focus {
+      background-color: darken(#005C9E, 15%);
+    }
+  }
+
+  .btn {
+    background-color: lighten(#005C9E, 10%);
+    border: 0;
+
+    &:hover, &:active, &:focus {
+      background-color: lighten(#005C9E, 20%);
+      border: 1px solid $primary;
+      margin: -1px;
+    }
+  }
+}
+
+.component-style-html {
+  background-color: #9747FF;
+
+  .pgn__icon:not(.btn-icon-before) {
+    color: white;
+  }
+
+  .btn-icon {
+    &:hover, &:active, &:focus {
+      background-color: darken(#9747FF, 15%);
+    }
+  }
+
+  .btn {
+    background-color: lighten(#9747FF, 10%);
+    border: 0;
+
+    &:hover, &:active, &:focus {
+      background-color: lighten(#9747FF, 20%);
+      border: 1px solid $primary;
+      margin: -1px;
+    }
+  }
+}
+
+.component-style-collection {
+  background-color: #FFCD29;
+
+  .pgn__icon:not(.btn-icon-before) {
+    color: black;
+  }
+
+  .btn-icon {
+    &:hover, &:active, &:focus {
+      background-color: darken(#FFCD29, 15%);
+    }
+  }
+
+  .btn {
+    background-color: lighten(#FFCD29, 10%);
+    border: 0;
+
+    &:hover, &:active, &:focus {
+      background-color: lighten(#FFCD29, 20%);
+      border: 1px solid $primary;
+      margin: -1px;
+    }
+  }
+}
+
+.component-style-video {
+  background-color: #358F0A;
+
+  .pgn__icon:not(.btn-icon-before) {
+    color: white;
+  }
+
+  .btn-icon {
+    &:hover, &:active, &:focus {
+      background-color: darken(#358F0A, 15%);
+    }
+  }
+
+  .btn {
+    background-color: lighten(#358F0A, 10%);
+    border: 0;
+
+    &:hover, &:active, &:focus {
+      background-color: lighten(#358F0A, 20%);
+      border: 1px solid $primary;
+      margin: -1px;
+    }
+  }
+}
+
+.component-style-vertical {
+  background-color: #0B8E77;
+
+  .pgn__icon:not(.btn-icon-before) {
+    color: white;
+  }
+
+  .btn-icon {
+    &:hover, &:active, &:focus {
+      background-color: darken(#0B8E77, 15%);
+    }
+  }
+
+  .btn {
+    background-color: lighten(#0B8E77, 10%);
+    border: 0;
+
+    &:hover, &:active, &:focus {
+      background-color: lighten(#0B8E77, 20%);
+      border: 1px solid $primary;
+      margin: -1px;
+    }
+  }
+}
+
+.component-style-other {
+  background-color: #646464;
+
+  .pgn__icon:not(.btn-icon-before) {
+    color: white;
+  }
+
+  .btn-icon {
+    &:hover, &:active, &:focus {
+      background-color: darken(#646464, 15%);
+    }
+  }
+
+  .btn {
+    background-color: lighten(#646464, 10%);
+    border: 0;
+
+    &:hover, &:active, &:focus {
+      background-color: lighten(#646464, 20%);
+      border: 1px solid $primary;
+      margin: -1px;
+    }
+  }
+}
diff --git a/src/generic/block-type-utils/index.tsx b/src/generic/block-type-utils/index.tsx
new file mode 100644
index 0000000000..e88f69cb4d
--- /dev/null
+++ b/src/generic/block-type-utils/index.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { Article } from '@openedx/paragon/icons';
+import {
+  COMPONENT_TYPE_ICON_MAP,
+  STRUCTURAL_TYPE_ICONS,
+  COMPONENT_TYPE_STYLE_COLOR_MAP,
+} from './constants';
+
+export function getItemIcon(blockType: string): React.ComponentType {
+  return STRUCTURAL_TYPE_ICONS[blockType] ?? COMPONENT_TYPE_ICON_MAP[blockType] ?? Article;
+}
+
+export function getComponentStyleColor(blockType: string): string {
+  return COMPONENT_TYPE_STYLE_COLOR_MAP[blockType] ?? COMPONENT_TYPE_STYLE_COLOR_MAP.other;
+}
diff --git a/src/generic/clipboard/hooks/useCopyToClipboard.js b/src/generic/clipboard/hooks/useCopyToClipboard.js
new file mode 100644
index 0000000000..ce911c6b36
--- /dev/null
+++ b/src/generic/clipboard/hooks/useCopyToClipboard.js
@@ -0,0 +1,81 @@
+// @ts-check
+import { useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { getClipboard } from '../../data/api';
+import { updateClipboardData } from '../../data/slice';
+import { CLIPBOARD_STATUS, STRUCTURAL_XBLOCK_TYPES, STUDIO_CLIPBOARD_CHANNEL } from '../../../constants';
+import { getClipboardData } from '../../data/selectors';
+
+/**
+ * Custom React hook for managing clipboard functionality.
+ *
+ * @param {boolean} canEdit - Flag indicating whether the clipboard is editable.
+ * @returns {Object} - An object containing state variables and functions related to clipboard functionality.
+ * @property {boolean} showPasteUnit - Flag indicating whether the "Paste Unit" button should be visible.
+ * @property {boolean} showPasteXBlock - Flag indicating whether the "Paste XBlock" button should be visible.
+ * @property {Object} sharedClipboardData - The shared clipboard data object.
+ */
+const useCopyToClipboard = (canEdit = true) => {
+  const dispatch = useDispatch();
+  const [clipboardBroadcastChannel] = useState(() => new BroadcastChannel(STUDIO_CLIPBOARD_CHANNEL));
+  const [showPasteUnit, setShowPasteUnit] = useState(false);
+  const [showPasteXBlock, setShowPasteXBlock] = useState(false);
+  const [sharedClipboardData, setSharedClipboardData] = useState({});
+  const clipboardData = useSelector(getClipboardData);
+
+  // Function to refresh the paste button's visibility
+  const refreshPasteButton = (data) => {
+    const isPasteable = canEdit && data?.content && data.content.status !== CLIPBOARD_STATUS.expired;
+    const isPasteableXBlock = isPasteable && !STRUCTURAL_XBLOCK_TYPES.includes(data.content.blockType);
+    const isPasteableUnit = isPasteable && data.content.blockType === 'vertical';
+
+    setShowPasteXBlock(!!isPasteableXBlock);
+    setShowPasteUnit(!!isPasteableUnit);
+  };
+
+  // Called on initial render to fetch and populate the initial clipboard data in redux state.
+  // Without this, the initial clipboard data redux state is always null.
+  useEffect(() => {
+    const fetchInitialClipboardData = async () => {
+      try {
+        const userClipboard = await getClipboard();
+        dispatch(updateClipboardData(userClipboard));
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.error(`Failed to fetch initial clipboard data: ${error}`);
+      }
+    };
+
+    fetchInitialClipboardData();
+  }, [dispatch]);
+
+  useEffect(() => {
+    // Handle updates to clipboard data
+    if (canEdit) {
+      refreshPasteButton(clipboardData);
+      setSharedClipboardData(clipboardData);
+      clipboardBroadcastChannel.postMessage(clipboardData);
+    } else {
+      setShowPasteXBlock(false);
+      setShowPasteUnit(false);
+    }
+  }, [clipboardData, canEdit, clipboardBroadcastChannel]);
+
+  useEffect(() => {
+    // Handle messages from the broadcast channel
+    clipboardBroadcastChannel.onmessage = (event) => {
+      setSharedClipboardData(event.data);
+      refreshPasteButton(event.data);
+    };
+
+    // Cleanup function for the BroadcastChannel when the hook is unmounted
+    return () => {
+      clipboardBroadcastChannel.close();
+    };
+  }, [clipboardBroadcastChannel]);
+
+  return { showPasteUnit, showPasteXBlock, sharedClipboardData };
+};
+
+export default useCopyToClipboard;
diff --git a/src/generic/clipboard/hooks/useCopyToClipboard.test.jsx b/src/generic/clipboard/hooks/useCopyToClipboard.test.jsx
new file mode 100644
index 0000000000..2e57f409df
--- /dev/null
+++ b/src/generic/clipboard/hooks/useCopyToClipboard.test.jsx
@@ -0,0 +1,122 @@
+import { renderHook, act } from '@testing-library/react-hooks';
+import { Provider } from 'react-redux';
+import { initializeMockApp } from '@edx/frontend-platform';
+import MockAdapter from 'axios-mock-adapter';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import initializeStore from '../../../store';
+import { executeThunk } from '../../../utils';
+import { clipboardUnit, clipboardXBlock } from '../../../__mocks__';
+import { copyToClipboard } from '../../data/thunks';
+import { getClipboardUrl } from '../../data/api';
+import useCopyToClipboard from './useCopyToClipboard';
+
+let axiosMock;
+let store;
+const unitId = 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_0270f6de40fc';
+const xblockId = 'block-v1:edX+DemoX+Demo_Course+type@html+block@030e35c4756a4ddc8d40b95fbbfff4d4';
+const clipboardBroadcastChannelMock = {
+  postMessage: jest.fn(),
+  close: jest.fn(),
+};
+
+global.BroadcastChannel = jest.fn(() => clipboardBroadcastChannelMock);
+
+const wrapper = ({ children }) => (
+  <Provider store={store}>
+    <IntlProvider locale="en">
+      {children}
+    </IntlProvider>
+  </Provider>
+);
+
+describe('useCopyToClipboard', () => {
+  beforeEach(async () => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+
+    store = initializeStore();
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+  });
+
+  it('initializes correctly', () => {
+    const { result } = renderHook(() => useCopyToClipboard(true), { wrapper });
+
+    expect(result.current.showPasteUnit).toBe(false);
+    expect(result.current.showPasteXBlock).toBe(false);
+  });
+
+  describe('clipboard data update effect', () => {
+    it('returns falsy flags if canEdit = false', async () => {
+      const { result } = renderHook(() => useCopyToClipboard(false), { wrapper });
+
+      axiosMock
+        .onPost(getClipboardUrl())
+        .reply(200, clipboardUnit);
+      axiosMock
+        .onGet(getClipboardUrl())
+        .reply(200, clipboardUnit);
+
+      await act(async () => {
+        await executeThunk(copyToClipboard(unitId), store.dispatch);
+      });
+      expect(result.current.showPasteUnit).toBe(false);
+      expect(result.current.showPasteXBlock).toBe(false);
+    });
+
+    it('returns flag to display the Paste Unit button', async () => {
+      const { result } = renderHook(() => useCopyToClipboard(true), { wrapper });
+
+      axiosMock
+        .onPost(getClipboardUrl())
+        .reply(200, clipboardUnit);
+      axiosMock
+        .onGet(getClipboardUrl())
+        .reply(200, clipboardUnit);
+
+      await act(async () => {
+        await executeThunk(copyToClipboard(unitId), store.dispatch);
+      });
+      expect(result.current.showPasteUnit).toBe(true);
+      expect(result.current.showPasteXBlock).toBe(false);
+    });
+
+    it('returns flag to display the Paste XBlock button', async () => {
+      const { result } = renderHook(() => useCopyToClipboard(true), { wrapper });
+
+      axiosMock
+        .onPost(getClipboardUrl())
+        .reply(200, clipboardXBlock);
+      axiosMock
+        .onGet(getClipboardUrl())
+        .reply(200, clipboardXBlock);
+
+      await act(async () => {
+        await executeThunk(copyToClipboard(xblockId), store.dispatch);
+      });
+      expect(result.current.showPasteUnit).toBe(false);
+      expect(result.current.showPasteXBlock).toBe(true);
+    });
+  });
+
+  describe('broadcast channel message handling', () => {
+    it('updates states correctly on receiving a broadcast message', async () => {
+      const { result } = renderHook(() => useCopyToClipboard(true), { wrapper });
+      clipboardBroadcastChannelMock.onmessage({ data: clipboardUnit });
+
+      expect(result.current.showPasteUnit).toBe(true);
+      expect(result.current.showPasteXBlock).toBe(false);
+
+      clipboardBroadcastChannelMock.onmessage({ data: clipboardXBlock });
+      expect(result.current.showPasteUnit).toBe(false);
+      expect(result.current.showPasteXBlock).toBe(true);
+    });
+  });
+});
diff --git a/src/generic/clipboard/index.js b/src/generic/clipboard/index.js
new file mode 100644
index 0000000000..2716b10c49
--- /dev/null
+++ b/src/generic/clipboard/index.js
@@ -0,0 +1,2 @@
+export { default as useCopyToClipboard } from './hooks/useCopyToClipboard';
+export { default as PasteComponent } from './paste-component';
diff --git a/src/generic/clipboard/paste-component/PasteComponent.scss b/src/generic/clipboard/paste-component/PasteComponent.scss
new file mode 100644
index 0000000000..c68ed4e4c6
--- /dev/null
+++ b/src/generic/clipboard/paste-component/PasteComponent.scss
@@ -0,0 +1,46 @@
+.whats-in-clipboard {
+  cursor: help;
+  width: fit-content;
+  margin-left: auto;
+
+  .whats-in-clipboard-icon {
+    width: 1.125rem;
+    height: 1.125rem;
+    margin-bottom: 1px;
+  }
+
+  .whats-in-clipboard-text {
+    font-size: $font-size-sm;
+  }
+}
+
+
+.clipboard-popover {
+  min-width: 21.25rem;
+
+  .clipboard-popover-title {
+    &:hover {
+      text-decoration: none;
+      color: initial;
+    }
+
+    &.popover-header {
+      border: none;
+    }
+
+    .clipboard-popover-icon {
+      float: right;
+    }
+  }
+
+  .clipboard-popover-detail-block-type {
+    display: block;
+    font-size: $font-size-sm;
+    line-height: 1.313rem;
+    color: $gray-700;
+  }
+
+  .clipboard-popover-detail-course-name {
+    font-style: italic;
+  }
+}
diff --git a/src/generic/clipboard/paste-component/components/PasteButton.jsx b/src/generic/clipboard/paste-component/components/PasteButton.jsx
new file mode 100644
index 0000000000..a13dc28c6b
--- /dev/null
+++ b/src/generic/clipboard/paste-component/components/PasteButton.jsx
@@ -0,0 +1,36 @@
+import PropsTypes from 'prop-types';
+import { useParams } from 'react-router-dom';
+import { Button } from '@openedx/paragon';
+import { ContentCopy as ContentCopyIcon } from '@openedx/paragon/icons';
+
+const PasteButton = ({ onClick, text, className }) => {
+  const { blockId } = useParams();
+
+  const handlePasteXBlockComponent = () => {
+    onClick({ stagedContent: 'clipboard', parentLocator: blockId }, null, blockId);
+  };
+
+  return (
+    <Button
+      className={className}
+      iconBefore={ContentCopyIcon}
+      variant="outline-primary"
+      block
+      onClick={handlePasteXBlockComponent}
+    >
+      {text}
+    </Button>
+  );
+};
+
+PasteButton.propTypes = {
+  onClick: PropsTypes.func.isRequired,
+  text: PropsTypes.string.isRequired,
+  className: PropsTypes.string,
+};
+
+PasteButton.defaultProps = {
+  className: undefined,
+};
+
+export default PasteButton;
diff --git a/src/generic/clipboard/paste-component/components/PopoverContent.jsx b/src/generic/clipboard/paste-component/components/PopoverContent.jsx
new file mode 100644
index 0000000000..70193c3eae
--- /dev/null
+++ b/src/generic/clipboard/paste-component/components/PopoverContent.jsx
@@ -0,0 +1,47 @@
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Icon, Popover, Stack } from '@openedx/paragon';
+import { OpenInNew as OpenInNewIcon } from '@openedx/paragon/icons';
+
+import messages from '../messages';
+import { clipboardPropsTypes } from '../constants';
+
+const PopoverContent = ({ clipboardData }) => {
+  const intl = useIntl();
+  const { sourceEditUrl, content, sourceContextTitle } = clipboardData;
+
+  return (
+    <Popover.Title
+      className="clipboard-popover-title"
+      data-testid="popover-content"
+      as={sourceEditUrl ? Link : 'div'}
+      to={sourceEditUrl || null}
+      target="_blank"
+    >
+      <Stack>
+        <Stack className="justify-content-between" direction="horizontal">
+          <strong>{content.displayName}</strong>
+          {sourceEditUrl && (
+            <Icon className="clipboard-popover-icon m-0" src={OpenInNewIcon} />
+          )}
+        </Stack>
+        <div>
+          <small className="clipboard-popover-detail-block-type">
+            {content.blockTypeDisplay}
+          </small>
+          <span className="mr-1">{intl.formatMessage(messages.popoverContentText)}</span>
+          <span className="clipboard-popover-detail-course-name">
+            {sourceContextTitle}
+          </span>
+        </div>
+      </Stack>
+    </Popover.Title>
+  );
+};
+
+PopoverContent.propTypes = {
+  clipboardData: PropTypes.shape(clipboardPropsTypes).isRequired,
+};
+
+export default PopoverContent;
diff --git a/src/generic/clipboard/paste-component/components/WhatsInClipboard.jsx b/src/generic/clipboard/paste-component/components/WhatsInClipboard.jsx
new file mode 100644
index 0000000000..22d4d0ca4c
--- /dev/null
+++ b/src/generic/clipboard/paste-component/components/WhatsInClipboard.jsx
@@ -0,0 +1,58 @@
+import { useRef } from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Icon } from '@openedx/paragon';
+import { Question as QuestionIcon } from '@openedx/paragon/icons';
+
+import messages from '../messages';
+
+const WhatsInClipboard = ({
+  handlePopoverToggle, togglePopover, popoverElementRef,
+}) => {
+  const intl = useIntl();
+  const triggerElementRef = useRef(null);
+
+  const handleKeyDown = ({ key }) => {
+    if (key === 'Tab') {
+      popoverElementRef.current?.focus();
+      handlePopoverToggle(true);
+    }
+  };
+
+  return (
+    <div
+      className="whats-in-clipboard mt-2 d-flex align-items-center"
+      data-testid="whats-in-clipboard"
+      onMouseEnter={() => handlePopoverToggle(true)}
+      onMouseLeave={() => handlePopoverToggle(false)}
+      onFocus={() => togglePopover(true)}
+      onBlur={() => togglePopover(false)}
+    >
+      <Icon
+        className="whats-in-clipboard-icon mr-1"
+        src={QuestionIcon}
+      />
+      <p
+        /* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */
+        tabIndex={0}
+        role="presentation"
+        ref={triggerElementRef}
+        className="whats-in-clipboard-text m-0"
+        onKeyDown={handleKeyDown}
+      >
+        {intl.formatMessage(messages.pasteButtonWhatsInClipboardText)}
+      </p>
+    </div>
+  );
+};
+
+WhatsInClipboard.propTypes = {
+  handlePopoverToggle: PropTypes.func.isRequired,
+  togglePopover: PropTypes.func.isRequired,
+  popoverElementRef: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
+  ]).isRequired,
+};
+
+export default WhatsInClipboard;
diff --git a/src/generic/clipboard/paste-component/components/index.js b/src/generic/clipboard/paste-component/components/index.js
new file mode 100644
index 0000000000..1336513b37
--- /dev/null
+++ b/src/generic/clipboard/paste-component/components/index.js
@@ -0,0 +1,3 @@
+export { default as WhatsInClipboard } from './WhatsInClipboard';
+export { default as PasteButton } from './PasteButton';
+export { default as PopoverContent } from './PopoverContent';
diff --git a/src/generic/clipboard/paste-component/constants.js b/src/generic/clipboard/paste-component/constants.js
new file mode 100644
index 0000000000..da6797fdd0
--- /dev/null
+++ b/src/generic/clipboard/paste-component/constants.js
@@ -0,0 +1,10 @@
+import PropTypes from 'prop-types';
+
+export const clipboardPropsTypes = {
+  sourceEditUrl: PropTypes.string.isRequired,
+  content: PropTypes.shape({
+    displayName: PropTypes.string.isRequired,
+    blockTypeDisplay: PropTypes.string.isRequired,
+  }).isRequired,
+  sourceContextTitle: PropTypes.string.isRequired,
+};
diff --git a/src/generic/clipboard/paste-component/index.jsx b/src/generic/clipboard/paste-component/index.jsx
new file mode 100644
index 0000000000..4d74c771b6
--- /dev/null
+++ b/src/generic/clipboard/paste-component/index.jsx
@@ -0,0 +1,65 @@
+import { useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import { OverlayTrigger, Popover } from '@openedx/paragon';
+
+import { PopoverContent, PasteButton, WhatsInClipboard } from './components';
+import { clipboardPropsTypes } from './constants';
+
+const PasteComponent = ({
+  onClick, clipboardData, text, className,
+}) => {
+  const [showPopover, togglePopover] = useState(false);
+  const popoverElementRef = useRef(null);
+
+  const handlePopoverToggle = (isOpen) => togglePopover(isOpen);
+
+  const renderPopover = (props) => (
+    <div role="link" ref={popoverElementRef} tabIndex={0}>
+      <Popover
+        className="clipboard-popover"
+        id="popover-positioned"
+        onMouseEnter={() => handlePopoverToggle(true)}
+        onMouseLeave={() => handlePopoverToggle(false)}
+        onFocus={() => handlePopoverToggle(true)}
+        onBlur={() => handlePopoverToggle(false)}
+        {...props}
+      >
+        {clipboardData && (
+          <PopoverContent clipboardData={clipboardData} />
+        )}
+      </Popover>
+    </div>
+  );
+
+  return (
+    <>
+      <PasteButton className={className} onClick={onClick} text={text} />
+      <OverlayTrigger
+        show={showPopover}
+        overlay={renderPopover}
+      >
+        <WhatsInClipboard
+          handlePopoverToggle={handlePopoverToggle}
+          togglePopover={togglePopover}
+          popoverElementRef={popoverElementRef}
+        />
+      </OverlayTrigger>
+    </>
+  );
+};
+
+PasteComponent.propTypes = {
+  onClick: PropTypes.func.isRequired,
+  text: PropTypes.string.isRequired,
+  clipboardData: PropTypes.shape(clipboardPropsTypes),
+  blockType: PropTypes.string,
+  className: PropTypes.string,
+};
+
+PasteComponent.defaultProps = {
+  clipboardData: null,
+  blockType: null,
+  className: undefined,
+};
+
+export default PasteComponent;
diff --git a/src/generic/clipboard/paste-component/messages.js b/src/generic/clipboard/paste-component/messages.js
new file mode 100644
index 0000000000..77fbcba2b8
--- /dev/null
+++ b/src/generic/clipboard/paste-component/messages.js
@@ -0,0 +1,16 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  popoverContentText: {
+    id: 'course-authoring.generic.paste-component.popover.content.text',
+    defaultMessage: 'From:',
+    description: 'The popover content label before the source course name of the copied content.',
+  },
+  pasteButtonWhatsInClipboardText: {
+    id: 'course-authoring.generic.paste-component.paste-button.whats-in-clipboard.text',
+    defaultMessage: "What's in my clipboard?",
+    description: 'The popover trigger button text of the info about copied content.',
+  },
+});
+
+export default messages;
diff --git a/src/generic/configure-modal/AdvancedTab.jsx b/src/generic/configure-modal/AdvancedTab.jsx
new file mode 100644
index 0000000000..73b7a48014
--- /dev/null
+++ b/src/generic/configure-modal/AdvancedTab.jsx
@@ -0,0 +1,276 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import moment from 'moment';
+import { Alert, Form, Hyperlink } from '@openedx/paragon';
+import {
+  Warning as WarningIcon,
+} from '@openedx/paragon/icons';
+import { FormattedMessage, injectIntl } from '@edx/frontend-platform/i18n';
+import messages from './messages';
+
+import PrereqSettings from './PrereqSettings';
+
+const AdvancedTab = ({
+  values,
+  setFieldValue,
+  prereqs,
+  releasedToStudents,
+  wasExamEverLinkedWithExternal,
+  enableProctoredExams,
+  supportsOnboarding,
+  wasProctoredExam,
+  showReviewRules,
+  onlineProctoringRules,
+}) => {
+  const {
+    isTimeLimited,
+    isProctoredExam,
+    isOnboardingExam,
+    isPracticeExam,
+    defaultTimeLimitMinutes,
+    examReviewRules,
+  } = values;
+  let examTypeValue = 'none';
+
+  if (isTimeLimited && isProctoredExam) {
+    if (isOnboardingExam) {
+      examTypeValue = 'onboardingExam';
+    } else if (isPracticeExam) {
+      examTypeValue = 'practiceExam';
+    } else {
+      examTypeValue = 'proctoredExam';
+    }
+  } else if (isTimeLimited) {
+    examTypeValue = 'timed';
+  }
+
+  const formatHour = (hour) => {
+    const hh = Math.floor(hour / 60);
+    const mm = hour % 60;
+    let hhs = `${hh}`;
+    let mms = `${mm}`;
+    if (hh < 10) {
+      hhs = `0${hh}`;
+    }
+    if (mm < 10) {
+      mms = `0${mm}`;
+    }
+    if (Number.isNaN(hh)) {
+      hhs = '00';
+    }
+    if (Number.isNaN(mm)) {
+      mms = '00';
+    }
+    return `${hhs}:${mms}`;
+  };
+
+  const [timeLimit, setTimeLimit] = useState(formatHour(defaultTimeLimitMinutes));
+  const showReviewRulesDiv = showReviewRules && isProctoredExam && !isPracticeExam && !isOnboardingExam;
+
+  const handleChange = (e) => {
+    if (e.target.value === 'timed') {
+      setFieldValue('isTimeLimited', true);
+      setFieldValue('isOnboardingExam', false);
+      setFieldValue('isPracticeExam', false);
+      setFieldValue('isProctoredExam', false);
+    } else if (e.target.value === 'onboardingExam') {
+      setFieldValue('isOnboardingExam', true);
+      setFieldValue('isProctoredExam', true);
+      setFieldValue('isTimeLimited', true);
+      setFieldValue('isPracticeExam', false);
+    } else if (e.target.value === 'practiceExam') {
+      setFieldValue('isPracticeExam', true);
+      setFieldValue('isProctoredExam', true);
+      setFieldValue('isTimeLimited', true);
+      setFieldValue('isOnboardingExam', false);
+    } else if (e.target.value === 'proctoredExam') {
+      setFieldValue('isProctoredExam', true);
+      setFieldValue('isTimeLimited', true);
+      setFieldValue('isOnboardingExam', false);
+      setFieldValue('isPracticeExam', false);
+    } else {
+      setFieldValue('isTimeLimited', false);
+      setFieldValue('isOnboardingExam', false);
+      setFieldValue('isPracticeExam', false);
+      setFieldValue('isProctoredExam', false);
+    }
+  };
+
+  const setCurrentTimeLimit = (event) => {
+    const { validity: { valid } } = event.target;
+    let { value } = event.target;
+    value = value.trim();
+    if (value && valid) {
+      const minutes = moment.duration(value).asMinutes();
+      setFieldValue('defaultTimeLimitMinutes', minutes);
+    }
+    setTimeLimit(value);
+  };
+
+  const renderAlerts = () => {
+    const proctoredExamLockedIn = releasedToStudents && wasExamEverLinkedWithExternal;
+    return (
+      <>
+        {proctoredExamLockedIn && !wasProctoredExam && (
+          <Alert variant="warning" icon={WarningIcon}>
+            <FormattedMessage {...messages.proctoredExamLockedAndisNotProctoredExamAlert} />
+          </Alert>
+        )}
+        {proctoredExamLockedIn && wasProctoredExam && (
+          <Alert variant="warning" icon={WarningIcon}>
+            <FormattedMessage {...messages.proctoredExamLockedAndisProctoredExamAlert} />
+          </Alert>
+        )}
+      </>
+    );
+  };
+
+  return (
+    <>
+      <h5 className="mt-4 text-gray-700"><FormattedMessage {...messages.setSpecialExam} /></h5>
+      <hr />
+      <Form.RadioSet
+        name="specialExam"
+        onChange={handleChange}
+        value={examTypeValue}
+      >
+        {renderAlerts()}
+        <Form.Radio value="none">
+          <FormattedMessage {...messages.none} />
+        </Form.Radio>
+        <Form.Radio
+          value="timed"
+          description={<FormattedMessage {...messages.timedDescription} />}
+          controlClassName="mw-1-25rem"
+        >
+          <FormattedMessage {...messages.timed} />
+        </Form.Radio>
+        {enableProctoredExams && (
+          <>
+            <Form.Radio
+              value="proctoredExam"
+              description={<FormattedMessage {...messages.proctoredExamDescription} />}
+              controlClassName="mw-1-25rem"
+            >
+              <FormattedMessage {...messages.proctoredExam} />
+            </Form.Radio>
+            {supportsOnboarding ? (
+              <Form.Radio
+                description={<FormattedMessage {...messages.onboardingExamDescription} />}
+                value="onboardingExam"
+                controlClassName="mw-1-25rem"
+              >
+                <FormattedMessage {...messages.onboardingExam} />
+              </Form.Radio>
+            ) : (
+              <Form.Radio
+                value="practiceExam"
+                controlClassName="mw-1-25rem"
+                description={<FormattedMessage {...messages.practiceExamDescription} />}
+              >
+                <FormattedMessage {...messages.practiceExam} />
+              </Form.Radio>
+            )}
+          </>
+        )}
+      </Form.RadioSet>
+      { isTimeLimited && (
+        <div className="mt-3" data-testid="advanced-tab-hours-picker-wrapper">
+          <Form.Group>
+            <Form.Label>
+              <FormattedMessage {...messages.timeAllotted} />
+            </Form.Label>
+            <Form.Control
+              onChange={setCurrentTimeLimit}
+              value={timeLimit}
+              placeholder="HH:MM"
+              pattern="^[0-9][0-9]:[0-5][0-9]$"
+            />
+          </Form.Group>
+          <Form.Text><FormattedMessage {...messages.timeLimitDescription} /></Form.Text>
+        </div>
+      )}
+      { showReviewRulesDiv && (
+        <div className="mt-3">
+          <Form.Group>
+            <Form.Label>
+              <FormattedMessage {...messages.reviewRulesLabel} />
+            </Form.Label>
+            <Form.Control
+              onChange={(e) => setFieldValue('examReviewRules', e.target.value)}
+              value={examReviewRules}
+              as="textarea"
+              rows="3"
+            />
+          </Form.Group>
+          <Form.Text>
+            { onlineProctoringRules ? (
+              <FormattedMessage
+                {...messages.reviewRulesDescriptionWithLink}
+                values={{
+                  hyperlink: (
+                    <Hyperlink
+                      destination={onlineProctoringRules}
+                      target="_blank"
+                      showLaunchIcon={false}
+                    >
+                      <FormattedMessage
+                        {...messages.reviewRulesDescriptionLinkText}
+                      />
+                    </Hyperlink>
+                  ),
+                }}
+              />
+            ) : (
+              <FormattedMessage {...messages.reviewRulesDescription} />
+            )}
+          </Form.Text>
+        </div>
+      )}
+      <PrereqSettings
+        values={values}
+        setFieldValue={setFieldValue}
+        prereqs={prereqs}
+      />
+    </>
+  );
+};
+
+AdvancedTab.defaultProps = {
+  prereqs: [],
+  wasExamEverLinkedWithExternal: false,
+  enableProctoredExams: false,
+  supportsOnboarding: false,
+  wasProctoredExam: false,
+  showReviewRules: false,
+  onlineProctoringRules: '',
+};
+
+AdvancedTab.propTypes = {
+  values: PropTypes.shape({
+    isTimeLimited: PropTypes.bool.isRequired,
+    defaultTimeLimitMinutes: PropTypes.number,
+    isPrereq: PropTypes.bool,
+    prereqUsageKey: PropTypes.string,
+    prereqMinScore: PropTypes.number,
+    prereqMinCompletion: PropTypes.number,
+    isProctoredExam: PropTypes.bool,
+    isPracticeExam: PropTypes.bool,
+    isOnboardingExam: PropTypes.bool,
+    examReviewRules: PropTypes.string,
+  }).isRequired,
+  setFieldValue: PropTypes.func.isRequired,
+  prereqs: PropTypes.arrayOf(PropTypes.shape({
+    blockUsageKey: PropTypes.string.isRequired,
+    blockDisplayName: PropTypes.string.isRequired,
+  })),
+  releasedToStudents: PropTypes.bool.isRequired,
+  wasExamEverLinkedWithExternal: PropTypes.bool,
+  enableProctoredExams: PropTypes.bool,
+  supportsOnboarding: PropTypes.bool,
+  wasProctoredExam: PropTypes.bool,
+  showReviewRules: PropTypes.bool,
+  onlineProctoringRules: PropTypes.string,
+};
+
+export default injectIntl(AdvancedTab);
diff --git a/src/generic/configure-modal/BasicTab.jsx b/src/generic/configure-modal/BasicTab.jsx
new file mode 100644
index 0000000000..fc924a9821
--- /dev/null
+++ b/src/generic/configure-modal/BasicTab.jsx
@@ -0,0 +1,114 @@
+import PropTypes from 'prop-types';
+import { Stack, Form } from '@openedx/paragon';
+import { FormattedMessage, injectIntl, useIntl } from '@edx/frontend-platform/i18n';
+
+import { DatepickerControl, DATEPICKER_TYPES } from '../datepicker-control';
+import messages from './messages';
+
+const BasicTab = ({
+  values,
+  setFieldValue,
+  courseGraders,
+  isSubsection,
+  isSelfPaced,
+}) => {
+  const intl = useIntl();
+
+  const {
+    releaseDate,
+    graderType,
+    dueDate,
+  } = values;
+
+  const onChangeGraderType = (e) => setFieldValue('graderType', e.target.value);
+
+  const createOptions = () => courseGraders.map((option) => (
+    <option key={option} value={option}> {option} </option>
+  ));
+
+  return (
+    <>
+      {!isSelfPaced && (
+        <>
+          <h5 className="mt-4 text-gray-700"><FormattedMessage {...messages.releaseDateAndTime} /></h5>
+          <hr />
+          <div data-testid="release-date-stack">
+            <Stack className="mt-3" direction="horizontal" gap={5}>
+              <DatepickerControl
+                type={DATEPICKER_TYPES.date}
+                value={releaseDate}
+                label={intl.formatMessage(messages.releaseDate)}
+                controlName="state-date"
+                onChange={(val) => setFieldValue('releaseDate', val)}
+              />
+              <DatepickerControl
+                type={DATEPICKER_TYPES.time}
+                value={releaseDate}
+                label={intl.formatMessage(messages.releaseTimeUTC)}
+                controlName="start-time"
+                onChange={(val) => setFieldValue('releaseDate', val)}
+              />
+            </Stack>
+          </div>
+        </>
+      )}
+      {
+        isSubsection && (
+          <div>
+            <h5 className="mt-4 text-gray-700"><FormattedMessage {...messages.grading} /></h5>
+            <hr />
+            <Form.Group>
+              <Form.Label><FormattedMessage {...messages.gradeAs} /></Form.Label>
+              <Form.Control
+                as="select"
+                defaultValue={graderType}
+                onChange={onChangeGraderType}
+                data-testid="grader-type-select"
+              >
+                <option key="notgraded" value="notgraded">
+                  {intl.formatMessage(messages.notGradedTypeOption)}
+                </option>
+                {createOptions()}
+              </Form.Control>
+            </Form.Group>
+            {!isSelfPaced && (
+              <div data-testid="due-date-stack">
+                <Stack className="mt-3" direction="horizontal" gap={5}>
+                  <DatepickerControl
+                    type={DATEPICKER_TYPES.date}
+                    value={dueDate}
+                    label={intl.formatMessage(messages.dueDate)}
+                    controlName="state-date"
+                    onChange={(val) => setFieldValue('dueDate', val)}
+                    data-testid="due-date-picker"
+                  />
+                  <DatepickerControl
+                    type={DATEPICKER_TYPES.time}
+                    value={dueDate}
+                    label={intl.formatMessage(messages.dueTimeUTC)}
+                    controlName="start-time"
+                    onChange={(val) => setFieldValue('dueDate', val)}
+                  />
+                </Stack>
+              </div>
+            )}
+          </div>
+        )
+      }
+    </>
+  );
+};
+
+BasicTab.propTypes = {
+  isSubsection: PropTypes.bool.isRequired,
+  values: PropTypes.shape({
+    releaseDate: PropTypes.string.isRequired,
+    graderType: PropTypes.string.isRequired,
+    dueDate: PropTypes.string,
+  }).isRequired,
+  courseGraders: PropTypes.arrayOf(PropTypes.string).isRequired,
+  setFieldValue: PropTypes.func.isRequired,
+  isSelfPaced: PropTypes.bool.isRequired,
+};
+
+export default injectIntl(BasicTab);
diff --git a/src/generic/configure-modal/ConfigureModal.jsx b/src/generic/configure-modal/ConfigureModal.jsx
new file mode 100644
index 0000000000..04c82200df
--- /dev/null
+++ b/src/generic/configure-modal/ConfigureModal.jsx
@@ -0,0 +1,374 @@
+/* eslint-disable import/named */
+import React from 'react';
+import * as Yup from 'yup';
+import PropTypes from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import {
+  ModalDialog,
+  Button,
+  ActionRow,
+  Form,
+  Tab,
+  Tabs,
+} from '@openedx/paragon';
+import { Formik } from 'formik';
+
+import { VisibilityTypes } from '../../data/constants';
+import { COURSE_BLOCK_NAMES } from '../../constants';
+import messages from './messages';
+import BasicTab from './BasicTab';
+import VisibilityTab from './VisibilityTab';
+import AdvancedTab from './AdvancedTab';
+import UnitTab from './UnitTab';
+
+const ConfigureModal = ({
+  isOpen,
+  onClose,
+  onConfigureSubmit,
+  currentItemData,
+  enableProctoredExams,
+  isXBlockComponent,
+  isSelfPaced,
+}) => {
+  const intl = useIntl();
+  const {
+    displayName,
+    start: sectionStartDate,
+    visibilityState,
+    due,
+    isTimeLimited,
+    defaultTimeLimitMinutes,
+    hideAfterDue,
+    showCorrectness,
+    courseGraders,
+    category,
+    format,
+    userPartitionInfo,
+    ancestorHasStaffLock,
+    isPrereq,
+    prereqs,
+    prereq,
+    prereqMinScore,
+    prereqMinCompletion,
+    releasedToStudents,
+    wasExamEverLinkedWithExternal,
+    isProctoredExam,
+    isOnboardingExam,
+    isPracticeExam,
+    examReviewRules,
+    supportsOnboarding,
+    showReviewRules,
+    onlineProctoringRules,
+    discussionEnabled,
+  } = currentItemData;
+
+  const getSelectedGroups = () => {
+    if (userPartitionInfo?.selectedPartitionIndex >= 0) {
+      return userPartitionInfo?.selectablePartitions[userPartitionInfo?.selectedPartitionIndex]
+        ?.groups
+        .filter(({ selected }) => selected)
+        .map(({ id }) => `${id}`)
+        || [];
+    }
+    return [];
+  };
+
+  const defaultPrereqScore = (val) => {
+    if (val === null || val === undefined) {
+      return 100;
+    }
+    return parseFloat(val);
+  };
+
+  const initialValues = {
+    releaseDate: sectionStartDate,
+    isVisibleToStaffOnly: visibilityState === VisibilityTypes.STAFF_ONLY,
+    graderType: format == null ? 'notgraded' : format,
+    dueDate: due == null ? '' : due,
+    isTimeLimited,
+    isProctoredExam,
+    isOnboardingExam,
+    isPracticeExam,
+    examReviewRules,
+    defaultTimeLimitMinutes,
+    hideAfterDue: hideAfterDue === undefined ? false : hideAfterDue,
+    showCorrectness,
+    isPrereq,
+    prereqUsageKey: prereq,
+    prereqMinScore: defaultPrereqScore(prereqMinScore),
+    prereqMinCompletion: defaultPrereqScore(prereqMinCompletion),
+    // by default it is -1 i.e. accessible to all learners & staff
+    selectedPartitionIndex: userPartitionInfo?.selectedPartitionIndex,
+    selectedGroups: getSelectedGroups(),
+    discussionEnabled,
+  };
+
+  const validationSchema = Yup.object().shape({
+    isTimeLimited: Yup.boolean(),
+    isProctoredExam: Yup.boolean(),
+    isPracticeExam: Yup.boolean(),
+    isOnboardingExam: Yup.boolean(),
+    examReviewRules: Yup.string(),
+    defaultTimeLimitMinutes: Yup.number().nullable(true),
+    hideAfterDueState: Yup.boolean(),
+    showCorrectness: Yup.string().required(),
+    isPrereq: Yup.boolean(),
+    prereqUsageKey: Yup.string().nullable(true),
+    prereqMinScore: Yup.number().min(
+      0,
+      intl.formatMessage(messages.minScoreError),
+    ).max(
+      100,
+      intl.formatMessage(messages.minScoreError),
+    ).nullable(true),
+    prereqMinCompletion: Yup.number().min(
+      0,
+      intl.formatMessage(messages.minScoreError),
+    ).max(
+      100,
+      intl.formatMessage(messages.minScoreError),
+    ).nullable(true),
+    selectedPartitionIndex: Yup.number().integer(),
+    selectedGroups: Yup.array().of(Yup.string()),
+    discussionEnabled: Yup.boolean(),
+  });
+
+  const isSubsection = category === COURSE_BLOCK_NAMES.sequential.id;
+
+  const dialogTitle = isXBlockComponent
+    ? intl.formatMessage(messages.componentTitle, { title: displayName })
+    : intl.formatMessage(messages.title, { title: displayName });
+
+  const handleSave = (data) => {
+    const groupAccess = {};
+    switch (category) {
+      case COURSE_BLOCK_NAMES.chapter.id:
+        onConfigureSubmit(data.isVisibleToStaffOnly, data.releaseDate);
+        break;
+      case COURSE_BLOCK_NAMES.sequential.id:
+        onConfigureSubmit(
+          data.isVisibleToStaffOnly,
+          data.releaseDate,
+          data.graderType,
+          data.dueDate,
+          data.isTimeLimited,
+          data.isProctoredExam,
+          data.isOnboardingExam,
+          data.isPracticeExam,
+          data.examReviewRules,
+          data.isTimeLimited ? data.defaultTimeLimitMinutes : 0,
+          data.hideAfterDue,
+          data.showCorrectness,
+          data.isPrereq,
+          data.prereqUsageKey,
+          data.prereqMinScore,
+          data.prereqMinCompletion,
+        );
+        break;
+      case COURSE_BLOCK_NAMES.vertical.id:
+      case COURSE_BLOCK_NAMES.component.id:
+      // groupAccess should be {partitionId: [group1, group2]} or {} if selectedPartitionIndex === -1
+        if (data.selectedPartitionIndex >= 0) {
+          const partitionId = userPartitionInfo.selectablePartitions[data.selectedPartitionIndex].id;
+          groupAccess[partitionId] = data.selectedGroups.map(g => parseInt(g, 10));
+        }
+        onConfigureSubmit(data.isVisibleToStaffOnly, groupAccess, data.discussionEnabled);
+        break;
+      default:
+        break;
+    }
+  };
+
+  const renderModalBody = (values, setFieldValue) => {
+    switch (category) {
+      case COURSE_BLOCK_NAMES.chapter.id:
+        return (
+          <Tabs>
+            <Tab eventKey="basic" title={intl.formatMessage(messages.basicTabTitle)}>
+              <BasicTab
+                values={values}
+                setFieldValue={setFieldValue}
+                isSubsection={isSubsection}
+                courseGraders={courseGraders === 'undefined' ? [] : courseGraders}
+                isSelfPaced={isSelfPaced}
+              />
+            </Tab>
+            <Tab eventKey="visibility" title={intl.formatMessage(messages.visibilityTabTitle)}>
+              <VisibilityTab
+                values={values}
+                setFieldValue={setFieldValue}
+                category={category}
+                isSubsection={isSubsection}
+                showWarning={visibilityState === VisibilityTypes.STAFF_ONLY}
+              />
+            </Tab>
+          </Tabs>
+        );
+      case COURSE_BLOCK_NAMES.sequential.id:
+        return (
+          <Tabs>
+            <Tab eventKey="basic" title={intl.formatMessage(messages.basicTabTitle)}>
+              <BasicTab
+                values={values}
+                setFieldValue={setFieldValue}
+                isSubsection={isSubsection}
+                courseGraders={courseGraders === 'undefined' ? [] : courseGraders}
+                isSelfPaced={isSelfPaced}
+              />
+            </Tab>
+            <Tab eventKey="visibility" title={intl.formatMessage(messages.visibilityTabTitle)}>
+              <VisibilityTab
+                values={values}
+                setFieldValue={setFieldValue}
+                category={category}
+                isSubsection={isSubsection}
+                showWarning={visibilityState === VisibilityTypes.STAFF_ONLY}
+              />
+            </Tab>
+            <Tab eventKey="advanced" title={intl.formatMessage(messages.advancedTabTitle)}>
+              <AdvancedTab
+                values={values}
+                setFieldValue={setFieldValue}
+                prereqs={prereqs}
+                releasedToStudents={releasedToStudents}
+                wasExamEverLinkedWithExternal={wasExamEverLinkedWithExternal}
+                enableProctoredExams={enableProctoredExams}
+                supportsOnboarding={supportsOnboarding}
+                showReviewRules={showReviewRules}
+                wasProctoredExam={isProctoredExam}
+                onlineProctoringRules={onlineProctoringRules}
+              />
+            </Tab>
+          </Tabs>
+        );
+      case COURSE_BLOCK_NAMES.vertical.id:
+      case COURSE_BLOCK_NAMES.component.id:
+        return (
+          <UnitTab
+            isXBlockComponent={COURSE_BLOCK_NAMES.component.id === category}
+            values={values}
+            setFieldValue={setFieldValue}
+            showWarning={visibilityState === VisibilityTypes.STAFF_ONLY && !ancestorHasStaffLock}
+            userPartitionInfo={userPartitionInfo}
+          />
+        );
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <ModalDialog
+      className="configure-modal"
+      size="lg"
+      isOpen={isOpen}
+      onClose={onClose}
+      hasCloseButton
+      isFullscreenOnMobile
+      isOverflowVisible={false}
+    >
+      <div data-testid="configure-modal">
+        <ModalDialog.Header className="configure-modal__header">
+          <ModalDialog.Title>
+            {dialogTitle}
+          </ModalDialog.Title>
+        </ModalDialog.Header>
+        <Formik
+          initialValues={initialValues}
+          onSubmit={handleSave}
+          validationSchema={validationSchema}
+          validateOnBlur
+          validateOnChange
+        >
+          {({
+            values, handleSubmit, setFieldValue,
+          }) => (
+            <>
+              <ModalDialog.Body className="configure-modal__body">
+                <Form.Group size="sm" className="form-field">
+                  {renderModalBody(values, setFieldValue)}
+                </Form.Group>
+              </ModalDialog.Body>
+              <ModalDialog.Footer className="pt-1">
+                <ActionRow>
+                  <ModalDialog.CloseButton variant="tertiary">
+                    {intl.formatMessage(messages.cancelButton)}
+                  </ModalDialog.CloseButton>
+                  <Button
+                    data-testid="configure-save-button"
+                    onClick={handleSubmit}
+                  >
+                    {intl.formatMessage(messages.saveButton)}
+                  </Button>
+                </ActionRow>
+              </ModalDialog.Footer>
+            </>
+          )}
+        </Formik>
+      </div>
+    </ModalDialog>
+  );
+};
+
+ConfigureModal.defaultProps = {
+  isXBlockComponent: false,
+  enableProctoredExams: false,
+};
+
+ConfigureModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  onConfigureSubmit: PropTypes.func.isRequired,
+  enableProctoredExams: PropTypes.bool,
+  currentItemData: PropTypes.shape({
+    displayName: PropTypes.string,
+    start: PropTypes.string,
+    visibilityState: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+    due: PropTypes.string,
+    isTimeLimited: PropTypes.bool,
+    defaultTimeLimitMinutes: PropTypes.number,
+    hideAfterDue: PropTypes.bool,
+    showCorrectness: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+    courseGraders: PropTypes.arrayOf(PropTypes.string),
+    category: PropTypes.string,
+    format: PropTypes.string,
+    userPartitionInfo: PropTypes.shape({
+      selectablePartitions: PropTypes.arrayOf(PropTypes.shape({
+        groups: PropTypes.arrayOf(PropTypes.shape({
+          deleted: PropTypes.bool,
+          id: PropTypes.number,
+          name: PropTypes.string,
+          selected: PropTypes.bool,
+        })),
+        id: PropTypes.number,
+        name: PropTypes.string,
+        scheme: PropTypes.string,
+      })),
+      selectedPartitionIndex: PropTypes.number,
+      selectedGroupsLabel: PropTypes.string,
+    }),
+    ancestorHasStaffLock: PropTypes.bool,
+    isPrereq: PropTypes.bool,
+    prereqs: PropTypes.arrayOf({
+      blockDisplayName: PropTypes.string,
+      blockUsageKey: PropTypes.string,
+    }),
+    prereq: PropTypes.number,
+    prereqMinScore: PropTypes.number,
+    prereqMinCompletion: PropTypes.number,
+    releasedToStudents: PropTypes.bool,
+    wasExamEverLinkedWithExternal: PropTypes.bool,
+    isProctoredExam: PropTypes.bool,
+    isOnboardingExam: PropTypes.bool,
+    isPracticeExam: PropTypes.bool,
+    examReviewRules: PropTypes.string,
+    supportsOnboarding: PropTypes.bool,
+    showReviewRules: PropTypes.bool,
+    onlineProctoringRules: PropTypes.string,
+    discussionEnabled: PropTypes.bool.isRequired,
+  }).isRequired,
+  isXBlockComponent: PropTypes.bool,
+  isSelfPaced: PropTypes.bool.isRequired,
+};
+
+export default ConfigureModal;
diff --git a/src/generic/configure-modal/ConfigureModal.scss b/src/generic/configure-modal/ConfigureModal.scss
new file mode 100644
index 0000000000..9a0eb64744
--- /dev/null
+++ b/src/generic/configure-modal/ConfigureModal.scss
@@ -0,0 +1,14 @@
+.configure-modal {
+  .configure-modal__header {
+    padding-top: 1.5rem;
+    position: static;
+  }
+
+  .w-7rem {
+    width: 7.2rem;
+  }
+
+  .mw-1-25rem {
+    min-width: 1.25rem;
+  }
+}
diff --git a/src/generic/configure-modal/ConfigureModal.test.jsx b/src/generic/configure-modal/ConfigureModal.test.jsx
new file mode 100644
index 0000000000..2c06e7852a
--- /dev/null
+++ b/src/generic/configure-modal/ConfigureModal.test.jsx
@@ -0,0 +1,290 @@
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { initializeMockApp } from '@edx/frontend-platform';
+import { AppProvider } from '@edx/frontend-platform/react';
+
+import initializeStore from '../../store';
+import ConfigureModal from './ConfigureModal';
+import {
+  currentSectionMock,
+  currentSubsectionMock,
+  currentUnitMock,
+  currentXBlockMock,
+} from './__mocks__';
+import messages from './messages';
+
+let store;
+const mockPathname = '/foo-bar';
+
+jest.mock('react-redux', () => ({
+  ...jest.requireActual('react-redux'),
+  useSelector: jest.fn(),
+}));
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useLocation: () => ({
+    pathname: mockPathname,
+  }),
+}));
+
+const onCloseMock = jest.fn();
+const onConfigureSubmitMock = jest.fn();
+
+const renderComponent = () => render(
+  <AppProvider store={store}>
+    <IntlProvider locale="en">
+      <ConfigureModal
+        isOpen
+        onClose={onCloseMock}
+        onConfigureSubmit={onConfigureSubmitMock}
+        currentItemData={currentSectionMock}
+        isSelfPaced={false}
+      />
+    </IntlProvider>,
+  </AppProvider>,
+);
+
+describe('<ConfigureModal /> for Section', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+
+    store = initializeStore();
+  });
+
+  it('renders ConfigureModal component correctly', () => {
+    const { getByText, getByRole } = renderComponent();
+    expect(getByText(`${currentSectionMock.displayName} settings`)).toBeInTheDocument();
+    expect(getByText(messages.basicTabTitle.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.visibilityTabTitle.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.releaseDate.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.releaseTimeUTC.defaultMessage)).toBeInTheDocument();
+    expect(getByRole('button', { name: messages.cancelButton.defaultMessage })).toBeInTheDocument();
+    expect(getByRole('button', { name: messages.saveButton.defaultMessage })).toBeInTheDocument();
+  });
+
+  it('switches to the Visibility tab and renders correctly', () => {
+    const { getByRole, getByText } = renderComponent();
+
+    const visibilityTab = getByRole('tab', { name: messages.visibilityTabTitle.defaultMessage });
+    userEvent.click(visibilityTab);
+    expect(getByText('Section visibility')).toBeInTheDocument();
+    expect(getByText(messages.hideFromLearners.defaultMessage)).toBeInTheDocument();
+  });
+});
+
+const renderSubsectionComponent = (props) => render(
+  <AppProvider store={store}>
+    <IntlProvider locale="en">
+      <ConfigureModal
+        isOpen
+        onClose={onCloseMock}
+        onConfigureSubmit={onConfigureSubmitMock}
+        currentItemData={currentSubsectionMock}
+        isSelfPaced={false}
+        {...props}
+      />
+    </IntlProvider>,
+  </AppProvider>,
+);
+
+describe('<ConfigureModal /> for Subsection', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+
+    store = initializeStore();
+  });
+
+  it('renders subsection ConfigureModal component correctly', () => {
+    const { getByText, getByRole } = renderSubsectionComponent();
+    expect(getByText(`${currentSubsectionMock.displayName} settings`)).toBeInTheDocument();
+    expect(getByText(messages.basicTabTitle.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.visibilityTabTitle.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.advancedTabTitle.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.releaseDate.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.releaseTimeUTC.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.grading.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.gradeAs.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.dueDate.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.dueTimeUTC.defaultMessage)).toBeInTheDocument();
+    expect(getByRole('button', { name: messages.cancelButton.defaultMessage })).toBeInTheDocument();
+    expect(getByRole('button', { name: messages.saveButton.defaultMessage })).toBeInTheDocument();
+  });
+
+  it('hides release and due dates for self paced courses', () => {
+    const { queryByText } = renderSubsectionComponent({ isSelfPaced: true });
+    expect(queryByText(messages.releaseDate.defaultMessage)).not.toBeInTheDocument();
+    expect(queryByText(messages.releaseTimeUTC.defaultMessage)).not.toBeInTheDocument();
+    expect(queryByText(messages.dueDate.defaultMessage)).not.toBeInTheDocument();
+    expect(queryByText(messages.dueTimeUTC.defaultMessage)).not.toBeInTheDocument();
+  });
+
+  it('switches to the subsection Visibility tab and renders correctly', () => {
+    const { getByRole, getByText } = renderSubsectionComponent();
+
+    const visibilityTab = getByRole('tab', { name: messages.visibilityTabTitle.defaultMessage });
+    userEvent.click(visibilityTab);
+    expect(getByText('Subsection visibility')).toBeInTheDocument();
+    expect(getByText(messages.showEntireSubsection.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.showEntireSubsectionDescription.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.hideContentAfterDue.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.hideContentAfterDueDescription.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.hideEntireSubsection.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.hideEntireSubsectionDescription.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.assessmentResultsVisibility.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.alwaysShowAssessmentResults.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.alwaysShowAssessmentResultsDescription.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.neverShowAssessmentResults.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.neverShowAssessmentResultsDescription.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.showAssessmentResultsPastDue.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.showAssessmentResultsPastDueDescription.defaultMessage)).toBeInTheDocument();
+  });
+
+  it('switches to the subsection Advanced tab and renders correctly', () => {
+    const { getByRole, getByText } = renderSubsectionComponent();
+
+    const advancedTab = getByRole('tab', { name: messages.advancedTabTitle.defaultMessage });
+    userEvent.click(advancedTab);
+    expect(getByText(messages.setSpecialExam.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.none.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.timed.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.timedDescription.defaultMessage)).toBeInTheDocument();
+  });
+});
+
+const renderUnitComponent = (props) => render(
+  <AppProvider store={store}>
+    <IntlProvider locale="en">
+      <ConfigureModal
+        isOpen
+        onClose={onCloseMock}
+        onConfigureSubmit={onConfigureSubmitMock}
+        currentItemData={currentUnitMock}
+        {...props}
+      />
+    </IntlProvider>,
+  </AppProvider>,
+);
+
+describe('<ConfigureModal /> for Unit', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+
+    store = initializeStore();
+  });
+
+  it('renders unit ConfigureModal component correctly', () => {
+    const {
+      getByText, queryByText, getByRole, getByTestId,
+    } = renderUnitComponent();
+    expect(getByText(`${currentUnitMock.displayName} settings`)).toBeInTheDocument();
+    expect(getByText(messages.unitVisibility.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.hideFromLearners.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.discussionEnabledCheckbox.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.restrictAccessTo.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.unitSelectGroupType.defaultMessage)).toBeInTheDocument();
+
+    expect(queryByText(messages.unitSelectGroup.defaultMessage)).not.toBeInTheDocument();
+    const input = getByTestId('group-type-select');
+
+    ['0', '1'].forEach(groupeTypeIndex => {
+      userEvent.selectOptions(input, groupeTypeIndex);
+
+      expect(getByText(messages.unitSelectGroup.defaultMessage)).toBeInTheDocument();
+      currentUnitMock
+        .userPartitionInfo
+        .selectablePartitions[groupeTypeIndex].groups
+        .forEach(g => expect(getByText(g.name)).toBeInTheDocument());
+    });
+
+    expect(getByRole('button', { name: messages.cancelButton.defaultMessage })).toBeInTheDocument();
+    expect(getByRole('button', { name: messages.saveButton.defaultMessage })).toBeInTheDocument();
+
+    expect(queryByText(messages.discussionEnabledSectionTitle.defaultMessage)).toBeInTheDocument();
+    expect(queryByText(messages.discussionEnabledCheckbox.defaultMessage)).toBeInTheDocument();
+    expect(queryByText(messages.discussionEnabledDescription.defaultMessage)).toBeInTheDocument();
+  });
+});
+
+const renderXBlockComponent = (props) => render(
+  <AppProvider store={store}>
+    <IntlProvider locale="en">
+      <ConfigureModal
+        isOpen
+        isXBlockComponent
+        onClose={onCloseMock}
+        onConfigureSubmit={onConfigureSubmitMock}
+        currentItemData={currentXBlockMock}
+        {...props}
+      />
+    </IntlProvider>,
+  </AppProvider>,
+);
+
+describe('<ConfigureModal /> for XBlock', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+
+    store = initializeStore();
+  });
+
+  it('renders unit ConfigureModal component correctly', () => {
+    const {
+      getByText, queryByText, getByRole, getByTestId,
+    } = renderXBlockComponent();
+    expect(getByText(`Editing access for: ${currentUnitMock.displayName}`)).toBeInTheDocument();
+    expect(queryByText(messages.unitVisibility.defaultMessage)).not.toBeInTheDocument();
+    expect(queryByText(messages.hideFromLearners.defaultMessage)).not.toBeInTheDocument();
+    expect(getByText(messages.restrictAccessTo.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.unitSelectGroupType.defaultMessage)).toBeInTheDocument();
+
+    expect(queryByText(messages.unitSelectGroup.defaultMessage)).not.toBeInTheDocument();
+    const input = getByTestId('group-type-select');
+
+    ['0', '1'].forEach(groupeTypeIndex => {
+      userEvent.selectOptions(input, groupeTypeIndex);
+
+      expect(getByText(messages.unitSelectGroup.defaultMessage)).toBeInTheDocument();
+      currentUnitMock
+        .userPartitionInfo
+        .selectablePartitions[groupeTypeIndex].groups
+        .forEach(g => expect(getByText(g.name)).toBeInTheDocument());
+    });
+
+    expect(getByRole('button', { name: messages.cancelButton.defaultMessage })).toBeInTheDocument();
+    expect(getByRole('button', { name: messages.saveButton.defaultMessage })).toBeInTheDocument();
+
+    expect(queryByText(messages.discussionEnabledSectionTitle.defaultMessage)).not.toBeInTheDocument();
+    expect(queryByText(messages.discussionEnabledCheckbox.defaultMessage)).not.toBeInTheDocument();
+    expect(queryByText(messages.discussionEnabledDescription.defaultMessage)).not.toBeInTheDocument();
+  });
+});
diff --git a/src/generic/configure-modal/PrereqSettings.jsx b/src/generic/configure-modal/PrereqSettings.jsx
new file mode 100644
index 0000000000..74c5f7148e
--- /dev/null
+++ b/src/generic/configure-modal/PrereqSettings.jsx
@@ -0,0 +1,117 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Form } from '@openedx/paragon';
+import { FormattedMessage, injectIntl, useIntl } from '@edx/frontend-platform/i18n';
+import messages from './messages';
+
+import FormikControl from '../FormikControl';
+
+const PrereqSettings = ({
+  values,
+  setFieldValue,
+  prereqs,
+}) => {
+  const intl = useIntl();
+  const {
+    isPrereq,
+    prereqUsageKey,
+    prereqMinScore,
+    prereqMinCompletion,
+  } = values;
+
+  if (isPrereq === null || isPrereq === undefined) {
+    return null;
+  }
+
+  const handleSelectChange = (e) => {
+    setFieldValue('prereqUsageKey', e.target.value);
+  };
+
+  const prereqSelectionForm = () => (
+    <>
+      <h5 className="mt-4 text-gray-700"><FormattedMessage {...messages.limitAccessTitle} /></h5>
+      <hr />
+      <Form>
+        <Form.Text><FormattedMessage {...messages.limitAccessDescription} /></Form.Text>
+        <Form.Group controlId="prereqForm.select">
+          <Form.Label>
+            {intl.formatMessage(messages.prerequisiteSelectLabel)}
+          </Form.Label>
+          <Form.Control
+            as="select"
+            defaultValue={prereqUsageKey}
+            onChange={handleSelectChange}
+            role="combobox"
+          >
+            <option value="">
+              {intl.formatMessage(messages.noPrerequisiteOption)}
+            </option>
+            {prereqs.map((prereqOption) => (
+              <option
+                key={prereqOption.blockUsageKey}
+                value={prereqOption.blockUsageKey}
+              >
+                {prereqOption.blockDisplayName}
+              </option>
+            ))}
+          </Form.Control>
+        </Form.Group>
+        {prereqUsageKey && (
+          <>
+            <FormikControl
+              name="prereqMinScore"
+              value={prereqMinScore}
+              label={<Form.Label>{intl.formatMessage(messages.minScoreLabel)}</Form.Label>}
+              controlClassName="text-right"
+              controlClasses="w-7rem"
+              type="number"
+              trailingElement="%"
+            />
+            <FormikControl
+              name="prereqMinCompletion"
+              value={prereqMinCompletion}
+              label={<Form.Label>{intl.formatMessage(messages.minCompletionLabel)}</Form.Label>}
+              controlClassName="text-right"
+              controlClasses="w-7rem"
+              type="number"
+              trailingElement="%"
+            />
+          </>
+        )}
+      </Form>
+    </>
+  );
+
+  const handleCheckboxChange = e => setFieldValue('isPrereq', e.target.checked);
+
+  return (
+    <>
+      {prereqs.length > 0 && prereqSelectionForm()}
+      <h5 className="mt-4 text-gray-700"><FormattedMessage {...messages.prereqTitle} /></h5>
+      <hr />
+      <Form.Checkbox checked={isPrereq} onChange={handleCheckboxChange}>
+        <FormattedMessage {...messages.prereqCheckboxLabel} />
+      </Form.Checkbox>
+    </>
+  );
+};
+
+PrereqSettings.defaultProps = {
+  prereqs: [],
+};
+
+PrereqSettings.propTypes = {
+  values: PropTypes.shape({
+    isPrereq: PropTypes.bool,
+    prereqUsageKey: PropTypes.string,
+    prereqMinScore: PropTypes.number,
+    prereqMinCompletion: PropTypes.number,
+  }).isRequired,
+  prereqs: PropTypes.arrayOf(PropTypes.shape({
+    blockUsageKey: PropTypes.string.isRequired,
+    blockDisplayName: PropTypes.string.isRequired,
+  })),
+  setFieldValue: PropTypes.func.isRequired,
+};
+
+export default injectIntl(PrereqSettings);
diff --git a/src/generic/configure-modal/UnitTab.jsx b/src/generic/configure-modal/UnitTab.jsx
new file mode 100644
index 0000000000..01e18be075
--- /dev/null
+++ b/src/generic/configure-modal/UnitTab.jsx
@@ -0,0 +1,183 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Alert, Form } from '@openedx/paragon';
+import {
+  FormattedMessage, injectIntl, useIntl,
+} from '@edx/frontend-platform/i18n';
+import { Field } from 'formik';
+import classNames from 'classnames';
+
+import messages from './messages';
+
+const UnitTab = ({
+  isXBlockComponent,
+  values,
+  setFieldValue,
+  showWarning,
+  userPartitionInfo,
+}) => {
+  const intl = useIntl();
+  const {
+    isVisibleToStaffOnly,
+    selectedPartitionIndex,
+    selectedGroups,
+    discussionEnabled,
+  } = values;
+
+  const handleVisibilityChange = (e) => {
+    setFieldValue('isVisibleToStaffOnly', e.target.checked);
+  };
+
+  const handleDiscussionChange = (e) => {
+    setFieldValue('discussionEnabled', e.target.checked);
+  };
+
+  const handleSelect = (e) => {
+    setFieldValue('selectedPartitionIndex', parseInt(e.target.value, 10));
+    setFieldValue('selectedGroups', []);
+  };
+
+  const checkIsDeletedGroup = (group) => {
+    const isGroupSelected = selectedGroups.includes(group.id.toString());
+
+    return group.deleted && isGroupSelected;
+  };
+
+  return (
+    <>
+      {!isXBlockComponent && (
+        <>
+          <h4 className="mt-3"><FormattedMessage {...messages.unitVisibility} /></h4>
+          <hr />
+          <Form.Checkbox checked={isVisibleToStaffOnly} onChange={handleVisibilityChange} data-testid="unit-visibility-checkbox">
+            <FormattedMessage {...messages.hideFromLearners} />
+          </Form.Checkbox>
+          {showWarning && (
+            <Alert className="mt-2" variant="warning">
+              <FormattedMessage {...messages.unitVisibilityWarning} />
+            </Alert>
+          )}
+        </>
+      )}
+      {userPartitionInfo.selectablePartitions.length > 0 && (
+        <Form.Group controlId="groupSelect">
+          <h4 className="mt-3"><FormattedMessage {...messages.unitAccess} /></h4>
+          <hr />
+          <Form.Label as="legend" className="font-weight-bold">
+            <FormattedMessage {...messages.restrictAccessTo} />
+          </Form.Label>
+          <Form.Control
+            as="select"
+            name="groupSelect"
+            value={selectedPartitionIndex}
+            onChange={handleSelect}
+            data-testid="group-type-select"
+          >
+            <option value="-1" key="-1">
+              {userPartitionInfo.selectedPartitionIndex === -1
+                ? intl.formatMessage(messages.unitSelectGroupType)
+                : intl.formatMessage(messages.unitAllLearnersAndStaff)}
+            </option>
+            {userPartitionInfo.selectablePartitions.map((partition, index) => (
+              <option
+                key={partition.id}
+                value={index}
+              >
+                {partition.name}
+              </option>
+            ))}
+          </Form.Control>
+
+          {selectedPartitionIndex >= 0 && userPartitionInfo.selectablePartitions.length && (
+            <Form.Group controlId="select-groups-checkboxes">
+              <Form.Label><FormattedMessage {...messages.unitSelectGroup} /></Form.Label>
+              <div
+                role="group"
+                className="d-flex flex-column"
+                data-testid="group-checkboxes"
+                aria-labelledby="select-groups-checkboxes"
+              >
+                {userPartitionInfo.selectablePartitions[selectedPartitionIndex].groups.map((group) => (
+                  <Form.Group
+                    key={group.id}
+                    className="pgn__form-checkbox"
+                  >
+                    <Field
+                      as={Form.Control}
+                      className="flex-grow-0 mr-1"
+                      controlClassName="pgn__form-checkbox-input mr-1"
+                      type="checkbox"
+                      value={`${group.id}`}
+                      name="selectedGroups"
+                    />
+                    <div>
+                      <Form.Label
+                        className={classNames({ 'text-danger': checkIsDeletedGroup(group) })}
+                        isInline
+                      >
+                        {group.name}
+                      </Form.Label>
+                      {group.deleted && (
+                        <Form.Control.Feedback type="invalid" hasIcon={false}>
+                          {intl.formatMessage(messages.unitSelectDeletedGroupErrorMessage)}
+                        </Form.Control.Feedback>
+                      )}
+                    </div>
+                  </Form.Group>
+                ))}
+              </div>
+            </Form.Group>
+          )}
+        </Form.Group>
+      )}
+      {!isXBlockComponent && (
+        <>
+          <h4 className="mt-4"><FormattedMessage {...messages.discussionEnabledSectionTitle} /></h4>
+          <hr />
+          <Form.Checkbox checked={discussionEnabled} onChange={handleDiscussionChange}>
+            <FormattedMessage {...messages.discussionEnabledCheckbox} />
+          </Form.Checkbox>
+          <p className="x-small font-weight-bold"><FormattedMessage {...messages.discussionEnabledDescription} /></p>
+        </>
+      )}
+    </>
+  );
+};
+
+UnitTab.defaultProps = {
+  isXBlockComponent: false,
+};
+
+UnitTab.propTypes = {
+  isXBlockComponent: PropTypes.bool,
+  values: PropTypes.shape({
+    isVisibleToStaffOnly: PropTypes.bool.isRequired,
+    discussionEnabled: PropTypes.bool.isRequired,
+    selectedPartitionIndex: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number,
+    ]).isRequired,
+    selectedGroups: PropTypes.oneOfType([
+      PropTypes.string,
+    ]),
+  }).isRequired,
+  setFieldValue: PropTypes.func.isRequired,
+  showWarning: PropTypes.bool.isRequired,
+  userPartitionInfo: PropTypes.shape({
+    selectablePartitions: PropTypes.arrayOf(PropTypes.shape({
+      groups: PropTypes.arrayOf(PropTypes.shape({
+        deleted: PropTypes.bool.isRequired,
+        id: PropTypes.number.isRequired,
+        name: PropTypes.string.isRequired,
+        selected: PropTypes.bool.isRequired,
+      }).isRequired).isRequired,
+      id: PropTypes.number.isRequired,
+      name: PropTypes.string.isRequired,
+      scheme: PropTypes.string.isRequired,
+    }).isRequired).isRequired,
+    selectedGroupsLabel: PropTypes.string,
+    selectedPartitionIndex: PropTypes.number.isRequired,
+  }).isRequired,
+};
+
+export default injectIntl(UnitTab);
diff --git a/src/generic/configure-modal/VisibilityTab.jsx b/src/generic/configure-modal/VisibilityTab.jsx
new file mode 100644
index 0000000000..c6ce99da4d
--- /dev/null
+++ b/src/generic/configure-modal/VisibilityTab.jsx
@@ -0,0 +1,135 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Alert, Form } from '@openedx/paragon';
+import { FormattedMessage, injectIntl, useIntl } from '@edx/frontend-platform/i18n';
+import messages from './messages';
+import { COURSE_BLOCK_NAMES } from '../../constants';
+
+const VisibilityTab = ({
+  values,
+  setFieldValue,
+  category,
+  showWarning,
+  isSubsection,
+}) => {
+  const intl = useIntl();
+  const visibilityTitle = COURSE_BLOCK_NAMES[category]?.name;
+
+  const {
+    isVisibleToStaffOnly,
+    hideAfterDue,
+    showCorrectness,
+  } = values;
+
+  const handleChange = (e) => {
+    setFieldValue('isVisibleToStaffOnly', e.target.checked);
+  };
+
+  const getVisibilityValue = () => {
+    if (isVisibleToStaffOnly) {
+      return 'hide';
+    }
+    if (hideAfterDue) {
+      return 'hideDue';
+    }
+    return 'show';
+  };
+
+  const visibilityChanged = (e) => {
+    const selected = e.target.value;
+    if (selected === 'hide') {
+      setFieldValue('isVisibleToStaffOnly', true);
+      setFieldValue('hideAfterDue', false);
+    } else if (selected === 'hideDue') {
+      setFieldValue('isVisibleToStaffOnly', false);
+      setFieldValue('hideAfterDue', true);
+    } else {
+      setFieldValue('isVisibleToStaffOnly', false);
+      setFieldValue('hideAfterDue', false);
+    }
+  };
+
+  const correctnessChanged = (e) => {
+    setFieldValue('showCorrectness', e.target.value);
+  };
+
+  return (
+    <>
+      <h5 className="mt-4 text-gray-700">
+        {intl.formatMessage(messages.visibilitySectionTitle, { visibilityTitle })}
+      </h5>
+      <hr />
+      {
+        isSubsection ? (
+          <>
+            <Form.RadioSet
+              name="subsectionVisibility"
+              onChange={visibilityChanged}
+              value={getVisibilityValue()}
+            >
+              <Form.Radio value="show">
+                <FormattedMessage {...messages.showEntireSubsection} />
+              </Form.Radio>
+              <Form.Text><FormattedMessage {...messages.showEntireSubsectionDescription} /></Form.Text>
+              <Form.Radio value="hideDue">
+                <FormattedMessage {...messages.hideContentAfterDue} />
+              </Form.Radio>
+              <Form.Text><FormattedMessage {...messages.hideContentAfterDueDescription} /></Form.Text>
+              <Form.Radio value="hide">
+                <FormattedMessage {...messages.hideEntireSubsection} />
+              </Form.Radio>
+              <Form.Text><FormattedMessage {...messages.hideEntireSubsectionDescription} /></Form.Text>
+            </Form.RadioSet>
+            {showWarning && (
+              <Alert className="mt-2" variant="warning">
+                <FormattedMessage {...messages.subsectionVisibilityWarning} />
+              </Alert>
+            )}
+            <h5 className="mt-4 text-gray-700"><FormattedMessage {...messages.assessmentResultsVisibility} /></h5>
+            <Form.RadioSet
+              name="assessmentResultsVisibility"
+              onChange={correctnessChanged}
+              value={showCorrectness}
+            >
+              <Form.Radio value="always">
+                <FormattedMessage {...messages.alwaysShowAssessmentResults} />
+              </Form.Radio>
+              <Form.Text><FormattedMessage {...messages.alwaysShowAssessmentResultsDescription} /></Form.Text>
+              <Form.Radio value="never">
+                <FormattedMessage {...messages.neverShowAssessmentResults} />
+              </Form.Radio>
+              <Form.Text><FormattedMessage {...messages.neverShowAssessmentResultsDescription} /></Form.Text>
+              <Form.Radio value="past_due">
+                <FormattedMessage {...messages.showAssessmentResultsPastDue} />
+              </Form.Radio>
+              <Form.Text><FormattedMessage {...messages.showAssessmentResultsPastDueDescription} /></Form.Text>
+            </Form.RadioSet>
+          </>
+        ) : (
+          <Form.Checkbox checked={isVisibleToStaffOnly} onChange={handleChange} data-testid="visibility-checkbox">
+            <FormattedMessage {...messages.hideFromLearners} />
+          </Form.Checkbox>
+        )
+      }
+      {showWarning && !isSubsection && (
+        <Alert className="mt-2" variant="warning">
+          <FormattedMessage {...messages.sectionVisibilityWarning} />
+        </Alert>
+      )}
+    </>
+  );
+};
+
+VisibilityTab.propTypes = {
+  values: PropTypes.shape({
+    isVisibleToStaffOnly: PropTypes.bool.isRequired,
+    hideAfterDue: PropTypes.bool.isRequired,
+    showCorrectness: PropTypes.string.isRequired,
+  }).isRequired,
+  setFieldValue: PropTypes.func.isRequired,
+  category: PropTypes.string.isRequired,
+  showWarning: PropTypes.bool.isRequired,
+  isSubsection: PropTypes.bool.isRequired,
+};
+
+export default injectIntl(VisibilityTab);
diff --git a/src/generic/configure-modal/__mocks__/index.js b/src/generic/configure-modal/__mocks__/index.js
new file mode 100644
index 0000000000..8e69d242d9
--- /dev/null
+++ b/src/generic/configure-modal/__mocks__/index.js
@@ -0,0 +1,199 @@
+export const currentSectionMock = {
+  displayName: 'Section1',
+  category: 'chapter',
+  start: '2025-08-10T10:00:00Z',
+  visibilityState: true,
+  format: 'Not Graded',
+  childInfo: {
+    displayName: 'Subsection',
+    children: [
+      {
+        displayName: 'Subsection 1',
+        id: 1,
+        category: 'sequential',
+        due: '',
+        start: '2025-08-10T10:00:00Z',
+        visibilityState: true,
+        defaultTimeLimitMinutes: null,
+        hideAfterDue: false,
+        showCorrectness: false,
+        format: 'Homework',
+        courseGraders: ['Homework', 'Exam'],
+        childInfo: {
+          displayName: 'Unit',
+          children: [
+            {
+              id: 11,
+              displayName: 'Subsection_1 Unit 1',
+            },
+          ],
+        },
+      },
+      {
+        displayName: 'Subsection 2',
+        id: 2,
+        category: 'sequential',
+        due: '',
+        start: '2025-08-10T10:00:00Z',
+        visibilityState: true,
+        defaultTimeLimitMinutes: null,
+        hideAfterDue: false,
+        showCorrectness: false,
+        format: 'Homework',
+        courseGraders: ['Homework', 'Exam'],
+        childInfo: {
+          displayName: 'Unit',
+          children: [
+            {
+              id: 21,
+              displayName: 'Subsection_2 Unit 1',
+            },
+          ],
+        },
+      },
+      {
+        displayName: 'Subsection 3',
+        id: 3,
+        category: 'sequential',
+        due: '',
+        start: '2025-08-10T10:00:00Z',
+        visibilityState: true,
+        defaultTimeLimitMinutes: null,
+        hideAfterDue: false,
+        showCorrectness: false,
+        format: 'Homework',
+        courseGraders: ['Homework', 'Exam'],
+        childInfo: {
+          children: [],
+        },
+      },
+    ],
+  },
+};
+
+export const currentSubsectionMock = {
+  displayName: 'Subsection 1',
+  id: 1,
+  category: 'sequential',
+  due: '',
+  start: '2025-08-10T10:00:00Z',
+  visibilityState: true,
+  defaultTimeLimitMinutes: null,
+  hideAfterDue: false,
+  showCorrectness: false,
+  format: 'Homework',
+  courseGraders: ['Homework', 'Exam'],
+  childInfo: {
+    displayName: 'Unit',
+    children: [
+      {
+        id: 11,
+        displayName: 'Subsection_1 Unit 1',
+      },
+      {
+        id: 12,
+        displayName: 'Subsection_1 Unit 2',
+      },
+    ],
+  },
+};
+
+export const currentUnitMock = {
+  displayName: 'Unit 1',
+  id: 1,
+  category: 'vertical',
+  due: '',
+  start: '2025-08-10T10:00:00Z',
+  visibilityState: true,
+  defaultTimeLimitMinutes: null,
+  hideAfterDue: false,
+  showCorrectness: false,
+  userPartitionInfo: {
+    selectablePartitions: [
+      {
+        id: 50,
+        name: 'Enrollment Track Groups',
+        scheme: 'enrollment_track',
+        groups: [
+          {
+            id: 6,
+            name: 'Honor',
+            selected: false,
+            deleted: false,
+          },
+          {
+            id: 2,
+            name: 'Verified',
+            selected: false,
+            deleted: false,
+          },
+        ],
+      },
+      {
+        id: 1508065533,
+        name: 'Content Groups',
+        scheme: 'cohort',
+        groups: [
+          {
+            id: 1224170703,
+            name: 'Content Group 1',
+            selected: false,
+            deleted: false,
+          },
+        ],
+      },
+    ],
+    selectedPartitionIndex: -1,
+    selectedGroupsLabel: '',
+  },
+};
+
+export const currentXBlockMock = {
+  displayName: 'Unit 1',
+  id: 1,
+  category: 'component',
+  due: '',
+  start: '2025-08-10T10:00:00Z',
+  visibilityState: true,
+  defaultTimeLimitMinutes: null,
+  hideAfterDue: false,
+  showCorrectness: false,
+  userPartitionInfo: {
+    selectablePartitions: [
+      {
+        id: 50,
+        name: 'Enrollment Track Groups',
+        scheme: 'enrollment_track',
+        groups: [
+          {
+            id: 6,
+            name: 'Honor',
+            selected: false,
+            deleted: false,
+          },
+          {
+            id: 2,
+            name: 'Verified',
+            selected: false,
+            deleted: false,
+          },
+        ],
+      },
+      {
+        id: 1508065533,
+        name: 'Content Groups',
+        scheme: 'cohort',
+        groups: [
+          {
+            id: 1224170703,
+            name: 'Content Group 1',
+            selected: false,
+            deleted: false,
+          },
+        ],
+      },
+    ],
+    selectedPartitionIndex: -1,
+    selectedGroupsLabel: '',
+  },
+};
diff --git a/src/generic/configure-modal/messages.js b/src/generic/configure-modal/messages.js
new file mode 100644
index 0000000000..41ef703bd8
--- /dev/null
+++ b/src/generic/configure-modal/messages.js
@@ -0,0 +1,296 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  title: {
+    id: 'course-authoring.course-outline.configure-modal.title',
+    defaultMessage: '{title} settings',
+  },
+  componentTitle: {
+    id: 'course-authoring.course-outline.configure-modal.component.title',
+    defaultMessage: 'Editing access for: {title}',
+    description: 'The visibility modal title for unit',
+  },
+  basicTabTitle: {
+    id: 'course-authoring.course-outline.configure-modal.basic-tab.title',
+    defaultMessage: 'Basic',
+  },
+  notGradedTypeOption: {
+    id: 'course-authoring.course-outline.configure-modal.basic-tab.notGradedTypeOption',
+    defaultMessage: 'Not Graded',
+  },
+  releaseDateAndTime: {
+    id: 'course-authoring.course-outline.configure-modal.basic-tab.release-date-and-time',
+    defaultMessage: 'Release date and time',
+  },
+  releaseDate: {
+    id: 'course-authoring.course-outline.configure-modal.basic-tab.release-date',
+    defaultMessage: 'Release date:',
+  },
+  releaseTimeUTC: {
+    id: 'course-authoring.course-outline.configure-modal.basic-tab.release-time-UTC',
+    defaultMessage: 'Release time in UTC:',
+  },
+  visibilityTabTitle: {
+    id: 'course-authoring.course-outline.configure-modal.visibility-tab.title',
+    defaultMessage: 'Visibility',
+  },
+  visibilitySectionTitle: {
+    id: 'course-authoring.course-outline.configure-modal.visibility-tab.section-visibility',
+    defaultMessage: '{visibilityTitle} visibility',
+  },
+  unitVisibility: {
+    id: 'course-authoring.course-outline.configure-modal.visibility-tab.unit-visibility',
+    defaultMessage: 'Unit visibility',
+  },
+  unitAccess: {
+    id: 'course-authoring.course-outline.configure-modal.visibility-tab.unit-access',
+    defaultMessage: 'Unit access',
+  },
+  discussionEnabledSectionTitle: {
+    id: 'course-authoring.course-outline.configure-modal.discussion-enabled.section-title',
+    defaultMessage: 'Discussion',
+  },
+  discussionEnabledCheckbox: {
+    id: 'course-authoring.course-outline.configure-modal.discussion-enabled.checkbox',
+    defaultMessage: 'Enable discussion',
+  },
+  discussionEnabledDescription: {
+    id: 'course-authoring.course-outline.configure-modal.discussion-enabled.description',
+    defaultMessage: 'Topics for unpublished units will not be created',
+  },
+  hideFromLearners: {
+    id: 'course-authoring.course-outline.configure-modal.visibility.hide-from-learners',
+    defaultMessage: 'Hide from learners',
+  },
+  restrictAccessTo: {
+    id: 'course-authoring.course-outline.configure-modal.visibility.restrict-access-to',
+    defaultMessage: 'Restrict access to',
+  },
+  sectionVisibilityWarning: {
+    id: 'course-authoring.course-outline.configure-modal.visibility-tab.section-visibility-warning',
+    defaultMessage: 'If you make this section visible to learners, learners will be able to see its content after the release date has passed and you have published the section. Only units that are explicitly hidden from learners will remain hidden after you clear this option for the section.',
+  },
+  unitVisibilityWarning: {
+    id: 'course-authoring.course-outline.configure-modal.unit-tab.unit-visibility-warning',
+    defaultMessage: 'If the unit was previously published and released to learners, any changes you made to the unit when it was hidden will now be visible to learners.',
+  },
+  subsectionVisibilityWarning: {
+    id: 'course-authoring.course-outline.configure-modal.unit-tab.subsection-visibility-warning',
+    defaultMessage: 'If you select an option other than "Hide entire subsection", published units in this subsection will become available to learners unless they are explicitly hidden.',
+  },
+  unitSelectGroup: {
+    id: 'course-authoring.course-outline.configure-modal.unit-tab.unit-select-group',
+    defaultMessage: 'Select one or more groups:',
+  },
+  unitSelectGroupType: {
+    id: 'course-authoring.course-outline.configure-modal.unit-tab.unit-select-group-type',
+    defaultMessage: 'Select a group type',
+  },
+  unitSelectDeletedGroupErrorMessage: {
+    id: 'course-authoring.course-outline.configure-modal.unit-tab.unit-select-group-deleted-error-message',
+    defaultMessage: 'This group no longer exists. Choose another group or remove the access restriction.',
+    description: 'The alert text of no longer available group',
+  },
+  unitAllLearnersAndStaff: {
+    id: 'course-authoring.course-outline.configure-modal.unit-tab.unit-all-learners-staff',
+    defaultMessage: 'All Learners and Staff',
+  },
+  cancelButton: {
+    id: 'course-authoring.course-outline.configure-modal.button.cancel',
+    defaultMessage: 'Cancel',
+  },
+  saveButton: {
+    id: 'course-authoring.course-outline.configure-modal.button.label',
+    defaultMessage: 'Save',
+  },
+  grading: {
+    id: 'course-authoring.course-outline.configure-modal.basic-tab.grading',
+    defaultMessage: 'Grading',
+  },
+  gradeAs: {
+    id: 'course-authoring.course-outline.configure-modal.basic-tab.grade-as',
+    defaultMessage: 'Grade as:',
+  },
+  dueDate: {
+    id: 'course-authoring.course-outline.configure-modal.basic-tab.due-date',
+    defaultMessage: 'Due date:',
+  },
+  dueTimeUTC: {
+    id: 'course-authoring.course-outline.configure-modal.basic-tab.due-time-UTC',
+    defaultMessage: 'Due time in UTC:',
+  },
+  subsectionVisibility: {
+    id: 'course-authoring.course-outline.configure-modal.visibility-tab.subsection-visibility',
+    defaultMessage: 'Subsection visibility',
+  },
+  showEntireSubsection: {
+    id: 'course-authoring.course-outline.configure-modal.visibility-tab.show-entire-subsection',
+    defaultMessage: 'Show entire subsection',
+  },
+  showEntireSubsectionDescription: {
+    id: 'course-authoring.course-outline.configure-modal.visibility-tab.show-entire-subsection-description',
+    defaultMessage: 'Learners see the published subsection and can access its content',
+  },
+  hideContentAfterDue: {
+    id: 'course-authoring.course-outline.configure-modal.visibility-tab.hide-content-after-due',
+    defaultMessage: 'Hide content after due date',
+  },
+  hideContentAfterDueDescription: {
+    id: 'course-authoring.course-outline.configure-modal.visibility-tab.hide-content-after-due-description',
+    defaultMessage: 'After the subsection\'s due date has passed, learners can no longer access its content. The subsection is not included in grade calculations.',
+  },
+  hideEntireSubsection: {
+    id: 'course-authoring.course-outline.configure-modal.visibility-tab.hide-entire-subsection',
+    defaultMessage: 'Hide entire subsection',
+  },
+  hideEntireSubsectionDescription: {
+    id: 'course-authoring.course-outline.configure-modal.visibility-tab.hide-entire-subsection-description',
+    defaultMessage: 'Learners do not see the subsection in the course outline. The subsection is not included in grade calculations.',
+  },
+  assessmentResultsVisibility: {
+    id: 'course-authoring.course-outline.configure-modal.visibility-tab.assessment-results-visibility',
+    defaultMessage: 'Assessment Results Visibility',
+  },
+  alwaysShowAssessmentResults: {
+    id: 'course-authoring.course-outline.configure-modal.visibility-tab.always-show-assessment-results',
+    defaultMessage: 'Always show assessment results',
+  },
+  alwaysShowAssessmentResultsDescription: {
+    id: 'course-authoring.course-outline.configure-modal.visibility-tab.always-show-assessment-results-description',
+    defaultMessage: 'When learners submit an answer to an assessment, they immediately see whether the answer is correct or incorrect, and the score received.',
+  },
+  neverShowAssessmentResults: {
+    id: 'course-authoring.course-outline.configure-modal.visibility-tab.never-show-assessment-results',
+    defaultMessage: 'Never show assessment results',
+  },
+  neverShowAssessmentResultsDescription: {
+    id: 'course-authoring.course-outline.configure-modal.visibility-tab.never-show-assessment-results-description',
+    defaultMessage: 'Learners never see whether their answers to assessments are correct or incorrect, nor the score received.',
+  },
+  showAssessmentResultsPastDue: {
+    id: 'course-authoring.course-outline.configure-modal.visibility-tab.show-assessment-results-past-due',
+    defaultMessage: 'Show assessment results when subsection is past due',
+  },
+  showAssessmentResultsPastDueDescription: {
+    id: 'course-authoring.course-outline.configure-modal.visibility-tab.show-assessment-results-past-due-description',
+    defaultMessage: 'Learners do not see whether their answer to assessments were correct or incorrect, nor the score received, until after the due date for the subsection has passed. If the subsection does not have a due date, learners always see their scores when they submit answers to assessments.',
+  },
+  setSpecialExam: {
+    id: 'course-authoring.course-outline.configure-modal.advanced-tab.set-special-exam',
+    defaultMessage: 'Set as a special exam',
+  },
+  none: {
+    id: 'course-authoring.course-outline.configure-modal.advanced-tab.none',
+    defaultMessage: 'None',
+  },
+  timed: {
+    id: 'course-authoring.course-outline.configure-modal.advanced-tab.timed',
+    defaultMessage: 'Timed',
+  },
+  timedDescription: {
+    id: 'course-authoring.course-outline.configure-modal.advanced-tab.timed-description',
+    defaultMessage: 'Use a timed exam to limit the time learners can spend on problems in this subsection. Learners must submit answers before the time expires. You can allow additional time for individual learners through the instructor Dashboard.',
+  },
+  proctoredExam: {
+    id: 'course-authoring.course-outline.configure-modal.advanced-tab.proctoredExam',
+    defaultMessage: 'Proctored',
+  },
+  proctoredExamDescription: {
+    id: 'course-authoring.course-outline.configure-modal.advanced-tab.proctored-exam-description',
+    defaultMessage: 'Proctored exams are timed and they record video of each learner taking the exam. The videos are then reviewed to ensure that learners follow all examination rules. Please note that setting this exam as proctored will change the visibility settings to "Hide content after due date."',
+  },
+  onboardingExam: {
+    id: 'course-authoring.course-outline.configure-modal.advanced-tab.onboardingExam',
+    defaultMessage: 'Onboarding',
+  },
+  onboardingExamDescription: {
+    id: 'course-authoring.course-outline.configure-modal.advanced-tab.onboarding-exam-description',
+    defaultMessage: 'Use Onboarding to introduce learners to proctoring, verify their identity, and create an onboarding profile. Learners must complete the onboarding profile step prior to taking a proctored exam. Profile reviews take 2+ business days.',
+  },
+  practiceExam: {
+    id: 'course-authoring.course-outline.configure-modal.advanced-tab.practiceExam',
+    defaultMessage: 'Practice proctored',
+  },
+  practiceExamDescription: {
+    id: 'course-authoring.course-outline.configure-modal.advanced-tab.practice-exam-description',
+    defaultMessage: 'Use a practice proctored exam to introduce learners to the proctoring tools and processes. Results of a practice exam do not affect a learner\'s grade.',
+  },
+  advancedTabTitle: {
+    id: 'course-authoring.course-outline.configure-modal.advanced-tab.title',
+    defaultMessage: 'Advanced',
+  },
+  timeAllotted: {
+    id: 'course-authoring.course-outline.configure-modal.advanced-tab.time-allotted',
+    defaultMessage: 'Time allotted (HH:MM):',
+  },
+  timeLimitDescription: {
+    id: 'course-authoring.course-outline.configure-modal.advanced-tab.time-limit-description',
+    defaultMessage: 'Select a time allotment for the exam. If it is over 24 hours, type in the amount of time. You can grant individual learners extra time to complete the exam through the Instructor Dashboard.',
+  },
+  prereqTitle: {
+    id: 'course-authoring.course-outline.configure-modal.advanced-tab.prereqTitle',
+    defaultMessage: 'Use as a Prerequisite',
+  },
+  prereqCheckboxLabel: {
+    id: 'course-authoring.course-outline.configure-modal.advanced-tab.prereqCheckboxLabel',
+    defaultMessage: 'Make this subsection available as a prerequisite to other content',
+  },
+  limitAccessTitle: {
+    id: 'course-authoring.course-outline.configure-modal.advanced-tab.limitAccessTitle',
+    defaultMessage: 'Limit access',
+  },
+  limitAccessDescription: {
+    id: 'course-authoring.course-outline.configure-modal.advanced-tab.limitAccessDescription',
+    defaultMessage: 'Select a prerequisite subsection and enter a minimum score percentage and minimum completion percentage to limit access to this subsection. Allowed values are 0-100',
+  },
+  noPrerequisiteOption: {
+    id: 'course-authoring.course-outline.configure-modal.advanced-tab.noPrerequisiteOption',
+    defaultMessage: 'No prerequisite',
+  },
+  prerequisiteSelectLabel: {
+    id: 'course-authoring.course-outline.configure-modal.advanced-tab.prerequisiteSelectLabel',
+    defaultMessage: 'Prerequisite:',
+  },
+  minScoreLabel: {
+    id: 'course-authoring.course-outline.configure-modal.advanced-tab.minScoreLabel',
+    defaultMessage: 'Minimum score:',
+  },
+  minCompletionLabel: {
+    id: 'course-authoring.course-outline.configure-modal.advanced-tab.minCompletionLabel',
+    defaultMessage: 'Minimum completion:',
+  },
+  minScoreError: {
+    id: 'course-authoring.course-outline.configure-modal.advanced-tab.minScoreError',
+    defaultMessage: 'The minimum score percentage must be a whole number between 0 and 100.',
+  },
+  minCompletionError: {
+    id: 'course-authoring.course-outline.configure-modal.advanced-tab.minCompletionError',
+    defaultMessage: 'The minimum completion percentage must be a whole number between 0 and 100.',
+  },
+  proctoredExamLockedAndisNotProctoredExamAlert: {
+    id: 'course-authoring.course-outline.configure-modal.advanced-tab.proctoredExamLockedAndisNotProctoredExamAlert',
+    defaultMessage: 'This subsection was released to learners as a proctored exam, but was reverted back to a basic or timed exam. You may not configure it as a proctored exam now. Contact edX Support for assistance.',
+  },
+  proctoredExamLockedAndisProctoredExamAlert: {
+    id: 'course-authoring.course-outline.configure-modal.advanced-tab.proctoredExamLockedAndisProctoredExamAlert',
+    defaultMessage: 'This proctored exam has been released to learners. You may not convert it to another type of special exam. You may revert this subsection back to being a basic exam by selecting \'None\', or a timed exam, but you will NOT be able to configure it as a proctored exam in the future.',
+  },
+  reviewRulesLabel: {
+    id: 'course-authoring.course-outline.configure-modal.advanced-tab.reviewRulesLabel',
+    defaultMessage: 'Review rules',
+  },
+  reviewRulesDescription: {
+    id: 'course-authoring.course-outline.configure-modal.advanced-tab.reviewRulesDescription',
+    defaultMessage: 'Specify any rules or rule exceptions that the proctoring review team should enforce when reviewing the videos. For example, you could specify that calculators are allowed. These specified rules are visible to learners before the learners start the exam.',
+  },
+  reviewRulesDescriptionWithLink: {
+    id: 'course-authoring.course-outline.configure-modal.advanced-tab.reviewRulesDescriptionWithLink',
+    defaultMessage: 'Specify any rules or rule exceptions that the proctoring review team should enforce when reviewing the videos. For example, you could specify that calculators are allowed. These specified rules are visible to learners before the learners start the exam, along with the {hyperlink}.',
+  },
+  reviewRulesDescriptionLinkText: {
+    id: 'course-authoring.course-outline.configure-modal.advanced-tab.reviewRulesDescriptionLinkText',
+    defaultMessage: 'general proctored exam rules',
+  },
+});
+
+export default messages;
diff --git a/src/generic/course-stepper/CourseStepper.test.jsx b/src/generic/course-stepper/CourseStepper.test.jsx
new file mode 100644
index 0000000000..5a1c8dbe75
--- /dev/null
+++ b/src/generic/course-stepper/CourseStepper.test.jsx
@@ -0,0 +1,107 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import CourseStepper from '.';
+
+const stepsMock = [
+  {
+    title: 'Preparing',
+    description: 'Preparing to start the export',
+  },
+  {
+    title: 'Exporting',
+    description: 'Creating the export data files (You can now leave this page safely, but avoid making drastic changes to content until this export is complete',
+  },
+  {
+    title: 'Compressing',
+    description: 'Compressing the exported data and preparing it for download',
+  },
+  {
+    title: 'Success',
+    description: 'Your exported course can now be downloaded',
+  },
+];
+
+const renderComponent = (props) => render(
+  <IntlProvider locale="en">
+    <CourseStepper steps={stepsMock} {...props} />
+  </IntlProvider>,
+);
+
+describe('<CourseStepper />', () => {
+  it('renders CourseStepper correctly', () => {
+    const {
+      getByText, getByTestId, getAllByTestId, queryByTestId,
+    } = renderComponent({ activeKey: 0 });
+
+    const steps = getAllByTestId('course-stepper__step');
+    expect(steps.length).toBe(stepsMock.length);
+
+    stepsMock.forEach((step) => {
+      expect(getByText(step.title)).toBeInTheDocument();
+      expect(getByText(step.description)).toBeInTheDocument();
+      expect(getByTestId(`${step.title}-icon`)).toBeInTheDocument();
+    });
+
+    const percentElement = queryByTestId('course-stepper__step-percent');
+    expect(percentElement).toBeNull();
+  });
+
+  it('marks the active and done steps correctly', () => {
+    const activeKey = 1;
+    const { getAllByTestId } = renderComponent({ activeKey });
+
+    const steps = getAllByTestId('course-stepper__step');
+    stepsMock.forEach((_, index) => {
+      const stepElement = steps[index];
+      if (index === activeKey) {
+        expect(stepElement).toHaveClass('active');
+        expect(stepElement).not.toHaveClass('done');
+      }
+      if (index < activeKey) {
+        expect(stepElement).not.toHaveClass('active');
+        expect(stepElement).toHaveClass('done');
+      }
+      if (index > activeKey) {
+        expect(stepElement).not.toHaveClass('active');
+        expect(stepElement).not.toHaveClass('done');
+      }
+    });
+  });
+
+  it('mark the error step correctly', () => {
+    const { getAllByTestId } = renderComponent({ activeKey: 1, hasError: true });
+
+    const errorStep = getAllByTestId('course-stepper__step')[1];
+    expect(errorStep).toHaveClass('error');
+  });
+
+  it('shows error message for error step', () => {
+    const errorMessage = 'Some error text';
+    const { getAllByTestId } = renderComponent({ activeKey: 1, hasError: true, errorMessage });
+
+    const errorStep = getAllByTestId('course-stepper__step')[1];
+    expect(errorStep).toHaveClass('error');
+  });
+
+  it('shows percentage for active step', () => {
+    const percent = 50;
+    const { getByTestId } = renderComponent({ activeKey: 1, percent });
+
+    const percentElement = getByTestId('course-stepper__step-percent');
+    expect(percentElement).toBeInTheDocument();
+    expect(percentElement).toHaveTextContent(`${percent}%`);
+  });
+
+  it('shows null when steps length equal to zero', () => {
+    const { queryByTestId } = render(
+      <IntlProvider locale="en">
+        <CourseStepper steps={[]} activeKey={0} />
+      </IntlProvider>,
+    );
+
+    const steps = queryByTestId('[data-testid="course-stepper__step"]');
+    expect(steps).toBe(null);
+  });
+});
diff --git a/src/generic/course-stepper/CouseStepper.scss b/src/generic/course-stepper/CouseStepper.scss
new file mode 100644
index 0000000000..868f1c6f89
--- /dev/null
+++ b/src/generic/course-stepper/CouseStepper.scss
@@ -0,0 +1,68 @@
+.course-stepper {
+  .course-stepper__step {
+    display: flex;
+    gap: $spacer;
+    padding: 1.25rem 0;
+    opacity: .5;
+
+    &:not(:last-child) {
+      border-bottom: 1px solid $gray-200;
+    }
+
+    .course-stepper__step-icon {
+      position: relative;
+
+      & svg {
+        position: absolute;
+        top: .875rem;
+        left: 1.25rem;
+      }
+    }
+
+    .course-stepper__step-info {
+      margin-left: 1.875rem;
+    }
+
+    .course-stepper__step-title {
+      margin-bottom: .25rem;
+    }
+
+    .course-stepper__step-percent {
+      margin: 0;
+      font-size: 1rem;
+    }
+
+    .course-stepper__step-description {
+      margin: 0;
+      font-size: 1rem;
+      color: $gray-400;
+    }
+  }
+
+  .course-stepper__step.active {
+    opacity: 1;
+
+    & svg {
+      animation: rotate 2s infinite linear;
+    }
+  }
+
+  .course-stepper__step.done {
+    opacity: 1;
+
+    & svg,
+    .course-stepper__step-title {
+      color: $success-500;
+    }
+  }
+
+  .course-stepper__step.error {
+    opacity: 1;
+
+    .course-stepper__step-title,
+    .course-stepper__step-description,
+    & svg {
+      color: $danger-300;
+    }
+  }
+}
diff --git a/src/generic/course-stepper/index.jsx b/src/generic/course-stepper/index.jsx
new file mode 100644
index 0000000000..caf341f77d
--- /dev/null
+++ b/src/generic/course-stepper/index.jsx
@@ -0,0 +1,118 @@
+import React from 'react';
+import { injectIntl } from '@edx/frontend-platform/i18n';
+import {
+  Settings as SettingsIcon,
+  ManageHistory as SuccessIcon,
+  Warning as ErrorIcon,
+  CheckCircle,
+} from '@openedx/paragon/icons';
+import { Icon } from '@openedx/paragon';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+const CourseStepper = ({
+  steps,
+  activeKey,
+  percent,
+  hasError,
+  errorMessage,
+}) => {
+  const getStepperSettings = (index) => {
+    const lastStepIndex = steps.length - 1;
+    const isActiveStep = index === activeKey;
+    const isLastStep = index === lastStepIndex;
+    const isErrorStep = isActiveStep && hasError;
+    const isLastStepDone = isLastStep && isActiveStep;
+    const completedStep = index < activeKey && !hasError;
+
+    const getStepIcon = () => {
+      if (completedStep) {
+        return CheckCircle;
+      }
+      if (hasError && isActiveStep) {
+        return ErrorIcon;
+      }
+      if (isLastStep && !isActiveStep) {
+        return SuccessIcon;
+      }
+      if (isLastStepDone) {
+        return CheckCircle;
+      }
+
+      return SettingsIcon;
+    };
+
+    return {
+      stepIcon: getStepIcon(index),
+      isPercentShow: Boolean(percent) && percent !== 100 && isActiveStep && !hasError,
+      isErrorMessageShow: isErrorStep && errorMessage,
+      isActiveClass: isActiveStep && !isLastStep && !hasError,
+      isDoneClass: index < activeKey || isLastStepDone,
+      isErrorClass: isErrorStep,
+    };
+  };
+
+  return (
+    <div className="course-stepper">
+      {steps.length ? steps.map(({ title, description }, index) => {
+        const {
+          stepIcon,
+          isPercentShow,
+          isErrorMessageShow,
+          isActiveClass,
+          isDoneClass,
+          isErrorClass,
+        } = getStepperSettings(index);
+
+        return (
+          <div
+            className={classNames('course-stepper__step', {
+              active: isActiveClass,
+              done: isDoneClass,
+              error: isErrorClass,
+            })}
+            key={title}
+            data-testid="course-stepper__step"
+          >
+            <div className="course-stepper__step-icon">
+              <Icon src={stepIcon} alt={title} data-testid={`${title}-icon`} />
+            </div>
+            <div className="course-stepper__step-info">
+              <h3 className="h4 title course-stepper__step-title font-weight-600">{title}</h3>
+              {isPercentShow && (
+                <p
+                  className="course-stepper__step-percent font-weight-400"
+                  data-testid="course-stepper__step-percent"
+                >
+                  {percent}%
+                </p>
+              )}
+              <p className="course-stepper__step-description font-weight-400">
+                {isErrorMessageShow ? errorMessage : description}
+              </p>
+            </div>
+          </div>
+        );
+      }) : null}
+    </div>
+  );
+};
+
+CourseStepper.defaultProps = {
+  percent: false,
+  hasError: false,
+  errorMessage: '',
+};
+
+CourseStepper.propTypes = {
+  steps: PropTypes.arrayOf(PropTypes.shape({
+    title: PropTypes.string.isRequired,
+    description: PropTypes.string.isRequired,
+  })).isRequired,
+  activeKey: PropTypes.number.isRequired,
+  percent: PropTypes.oneOfType([PropTypes.number, PropTypes.bool]),
+  errorMessage: PropTypes.string,
+  hasError: PropTypes.bool,
+};
+
+export default injectIntl(CourseStepper);
diff --git a/src/generic/course-upload-image/CourseUploadImage.scss b/src/generic/course-upload-image/CourseUploadImage.scss
new file mode 100644
index 0000000000..966f592be7
--- /dev/null
+++ b/src/generic/course-upload-image/CourseUploadImage.scss
@@ -0,0 +1,26 @@
+.image-preview {
+  @include pgn-box-shadow(1, "down");
+
+  display: block;
+  width: 23.4375rem;
+  height: 12.5rem;
+  overflow: hidden;
+  margin: 0 auto;
+  border: .0625rem solid $gray-300;
+  padding: .625rem;
+  background: $white;
+
+  img {
+    display: block;
+    width: 100%;
+    min-height: 100%;
+  }
+}
+
+.image-body {
+  text-align: center;
+
+  .pgn__dropzone {
+    background: $white;
+  }
+}
diff --git a/src/generic/course-upload-image/CourseUploadImage.test.jsx b/src/generic/course-upload-image/CourseUploadImage.test.jsx
new file mode 100644
index 0000000000..0cbf225306
--- /dev/null
+++ b/src/generic/course-upload-image/CourseUploadImage.test.jsx
@@ -0,0 +1,83 @@
+import React from 'react';
+import { AppProvider } from '@edx/frontend-platform/react';
+import { fireEvent, render, act } from '@testing-library/react';
+import { initializeMockApp } from '@edx/frontend-platform';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import initializeStore from '../../store';
+import messages from './messages';
+import CourseUploadImage from '.';
+
+let store;
+
+const onChangeMock = jest.fn();
+const RootWrapper = (props) => (
+  <IntlProvider locale="en">
+    <AppProvider store={store}>
+      <CourseUploadImage {...props} />
+    </AppProvider>
+  </IntlProvider>
+);
+
+const props = {
+  label: 'foo-label-field',
+  customHelpText: 'custom-help-text',
+  assetImagePath: '/asset-v1:edX+M12+2T2023+type@asset+block@image_1.png',
+  imageNameField: 'cardImageName',
+  assetImageField: 'cardImageAssetPath',
+  identifierFieldText: 'some identified field',
+  showImageBodyText: true,
+  customInputPlaceholder: 'custom-input-placeholder',
+  onChange: onChangeMock,
+};
+
+describe('<CourseUploadImage />', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+
+    store = initializeStore();
+  });
+
+  it('renders successfully', () => {
+    const { getByText, getByPlaceholderText } = render(
+      <RootWrapper {...props} />,
+    );
+    expect(getByText(props.label)).toBeInTheDocument();
+    expect(getByText(props.customHelpText)).toBeInTheDocument();
+    expect(getByPlaceholderText(props.customInputPlaceholder)).toBeInTheDocument();
+  });
+
+  it('should call onChange if input value changed', async () => {
+    const { getByPlaceholderText } = render(<RootWrapper {...props} />);
+    const input = getByPlaceholderText(props.customInputPlaceholder);
+    await act(() => {
+      fireEvent.change(input, { target: { value: '/assets' } });
+    });
+    expect(onChangeMock).toHaveBeenCalledWith(
+      '/assets',
+      props.assetImageField,
+    );
+  });
+
+  it('should change body text if input cleared', () => {
+    const initialProps = { ...props, assetImagePath: '' };
+    const { getByText } = render(<RootWrapper {...initialProps} />);
+    expect(
+      getByText(messages.uploadImageEmpty.defaultMessage),
+    ).toBeInTheDocument();
+  });
+
+  it('should hide body text if showImageBodyText disabled', () => {
+    const initialProps = { ...props, showImageBodyText: false };
+    const { queryAllByText } = render(<RootWrapper {...initialProps} />);
+    expect(queryAllByText(messages.uploadImageEmpty.defaultMessage).length).toBe(0);
+    expect(queryAllByText(messages.uploadImageBodyFilled.defaultMessage).length).toBe(0);
+  });
+});
diff --git a/src/generic/course-upload-image/data/api.js b/src/generic/course-upload-image/data/api.js
new file mode 100644
index 0000000000..3d38c14467
--- /dev/null
+++ b/src/generic/course-upload-image/data/api.js
@@ -0,0 +1,21 @@
+import { camelCaseObject, getConfig } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+
+export const getUploadAssetsUrl = (courseId) => new URL(
+  `/assets/${courseId}/`,
+  getConfig().STUDIO_BASE_URL,
+);
+
+/**
+ * Upload assets.
+ * @param {string} courseId
+ * @param {binary} formData
+ * @returns {Promise<Object>}
+ */
+export async function uploadAssets(courseId, fileData) {
+  const { data } = await getAuthenticatedHttpClient().post(
+    `${getUploadAssetsUrl(courseId).href}`,
+    fileData,
+  );
+  return camelCaseObject(data);
+}
diff --git a/src/generic/course-upload-image/index.jsx b/src/generic/course-upload-image/index.jsx
new file mode 100644
index 0000000000..42a4bb5725
--- /dev/null
+++ b/src/generic/course-upload-image/index.jsx
@@ -0,0 +1,167 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import _ from 'lodash';
+import { useParams } from 'react-router-dom';
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
+import { FileUpload as FileUploadIcon } from '@openedx/paragon/icons';
+import { getConfig } from '@edx/frontend-platform';
+import {
+  Form,
+  Dropzone,
+  Image,
+  Hyperlink,
+  Card,
+  Icon,
+  IconButton,
+} from '@openedx/paragon';
+
+import { uploadAssets } from './data/api';
+import messages from './messages';
+
+const CourseUploadImage = ({
+  label,
+  customHelpText,
+  assetImagePath,
+  imageNameField,
+  assetImageField,
+  identifierFieldText,
+  showImageBodyText,
+  customInputPlaceholder,
+  onChange,
+}) => {
+  const { courseId } = useParams();
+  const intl = useIntl();
+  const imageAbsolutePath = () => new URL(assetImagePath, getConfig().LMS_BASE_URL);
+  const assetsUrl = () => new URL(`/assets/${courseId}`, getConfig().STUDIO_BASE_URL);
+
+  const handleChangeImageAsset = (path) => {
+    const assetPath = _.last(path.split('/'));
+    // If image path is entered directly, we need to strip the asset prefix
+    const imageName = _.last(assetPath.split('block@'));
+    onChange(path, assetImageField);
+    if (imageNameField) {
+      onChange(imageName, imageNameField);
+    }
+  };
+
+  const handleProcessUpload = async ({ fileData, handleError }) => {
+    try {
+      const response = await uploadAssets(courseId, fileData);
+      const url = response?.asset?.url;
+      if (url) {
+        handleChangeImageAsset(url);
+      }
+    } catch (error) {
+      handleError(error);
+    }
+  };
+
+  const inputComponent = assetImagePath ? (
+    <div className="image-preview">
+      <Image
+        src={imageAbsolutePath().href}
+        alt={intl.formatMessage(messages.uploadImageDropzoneAlt)}
+        fluid
+      />
+    </div>
+  ) : (
+    <>
+      <IconButton
+        isActive
+        src={FileUploadIcon}
+        iconAs={Icon}
+        variant="secondary"
+        alt={intl.formatMessage(messages.uploadImageDropzoneAlt)}
+      />
+      <p>
+        {intl.formatMessage(messages.uploadImageDropzoneText, {
+          identifierFieldText,
+        })}
+      </p>
+    </>
+  );
+
+  const cardImageTextBody = assetImagePath ? (
+    <span className="x-small text-gray-700">
+      <FormattedMessage
+        {...messages.uploadImageBodyFilled}
+        values={{
+          hyperlink: (
+            <Hyperlink
+              destination={assetsUrl().href}
+              target="_blank"
+              showLaunchIcon={false}
+            >
+              {intl.formatMessage(messages.uploadImageFilesAndUploads)}
+            </Hyperlink>
+          ),
+        }}
+      />
+    </span>
+  ) : (
+    <span className="x-small text-gray-700">
+      {intl.formatMessage(messages.uploadImageEmpty)}
+    </span>
+  );
+
+  return (
+    <Form.Group className="form-group-custom w-100">
+      <Form.Label>{label}</Form.Label>
+      <Card>
+        <Card.Body className="image-body">
+          <Dropzone
+            onProcessUpload={handleProcessUpload}
+            inputComponent={inputComponent}
+            accept={{
+              'image/*': ['.png', '.jpeg'],
+            }}
+          />
+          {showImageBodyText && cardImageTextBody}
+        </Card.Body>
+        <Card.Divider />
+        <Card.Footer className="p-2.5">
+          <Form.Control
+            value={assetImagePath}
+            onChange={(e) => handleChangeImageAsset(e.target.value)}
+            placeholder={
+              customInputPlaceholder
+              || intl.formatMessage(messages.uploadImageInputPlaceholder, {
+                identifierFieldText,
+              })
+            }
+          />
+        </Card.Footer>
+      </Card>
+      <Form.Control.Feedback>
+        {customHelpText
+          || intl.formatMessage(messages.uploadImageHelpText, {
+            identifierFieldText,
+          })}
+      </Form.Control.Feedback>
+    </Form.Group>
+  );
+};
+
+CourseUploadImage.defaultProps = {
+  assetImagePath: '',
+  customHelpText: '',
+  imageNameField: '',
+  assetImageField: '',
+  showImageBodyText: false,
+  identifierFieldText: '',
+  customInputPlaceholder: '',
+};
+
+CourseUploadImage.propTypes = {
+  label: PropTypes.string.isRequired,
+  assetImagePath: PropTypes.string,
+  customHelpText: PropTypes.string,
+  imageNameField: PropTypes.string,
+  assetImageField: PropTypes.string,
+  showImageBodyText: PropTypes.bool,
+  identifierFieldText: PropTypes.string,
+  customInputPlaceholder: PropTypes.string,
+  onChange: PropTypes.func.isRequired,
+};
+
+export default CourseUploadImage;
diff --git a/src/generic/course-upload-image/messages.js b/src/generic/course-upload-image/messages.js
new file mode 100644
index 0000000000..ec21112076
--- /dev/null
+++ b/src/generic/course-upload-image/messages.js
@@ -0,0 +1,38 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  uploadImageHelpText: {
+    id: 'course-authoring.schedule-section.introducing.upload-image.help-text',
+    defaultMessage: 'Please provide a valid path and name to your {identifierFieldText} (Note: only JPEG or PNG format supported)',
+  },
+  uploadImageFilesAndUploads: {
+    id: 'course-authoring.schedule-section.introducing.upload-image.file-and-uploads',
+    defaultMessage: 'files and uploads',
+  },
+  uploadImageDropzoneText: {
+    id: 'course-authoring.schedule-section.introducing.upload-image.dropzone-text',
+    defaultMessage: 'Drag and drop your {identifierFieldText} here or click to upload.',
+  },
+  uploadImageDropzoneAlt: {
+    id: 'course-authoring.schedule-section.introducing.upload-image.dropzone-alt',
+    defaultMessage: 'Uploaded image for course',
+  },
+  uploadImageEmpty: {
+    id: 'course-authoring.schedule-section.introducing.upload-image.empty',
+    defaultMessage: 'Your course currently does not have an image. Please upload one (JPEG or PNG format, and minimum suggested dimensions are 375px wide by 200px tall)',
+  },
+  uploadImageIconAlt: {
+    id: 'course-authoring.schedule-section.introducing.upload-image.icon-alt',
+    defaultMessage: 'File upload icon',
+  },
+  uploadImageBodyFilled: {
+    id: 'course-authoring.schedule-section.introducing.upload-image.manage',
+    defaultMessage: 'You can manage this image along with all of your other {hyperlink}',
+  },
+  uploadImageInputPlaceholder: {
+    id: 'course-authoring.schedule-section.introducing.upload-image.input.placeholder',
+    defaultMessage: 'Your {identifierFieldText} URL',
+  },
+});
+
+export default messages;
diff --git a/src/generic/create-or-rerun-course/CreateOrRerunCourseForm.jsx b/src/generic/create-or-rerun-course/CreateOrRerunCourseForm.jsx
new file mode 100644
index 0000000000..36bafc5974
--- /dev/null
+++ b/src/generic/create-or-rerun-course/CreateOrRerunCourseForm.jsx
@@ -0,0 +1,298 @@
+import React, { useRef, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { useParams } from 'react-router-dom';
+import classNames from 'classnames';
+import { useSelector } from 'react-redux';
+import {
+  Form,
+  Button,
+  Dropdown,
+  ActionRow,
+  StatefulButton,
+  TransitionReplace,
+} from '@openedx/paragon';
+import { Info as InfoIcon } from '@openedx/paragon/icons';
+import TypeaheadDropdown from '../../editors/sharedComponents/TypeaheadDropdown';
+
+import AlertMessage from '../alert-message';
+import { STATEFUL_BUTTON_STATES } from '../../constants';
+import { RequestStatus, TOTAL_LENGTH_KEY } from '../../data/constants';
+import { getSavingStatus } from '../data/selectors';
+import { getStudioHomeData } from '../../studio-home/data/selectors';
+import { updatePostErrors } from '../data/slice';
+import { updateCreateOrRerunCourseQuery } from '../data/thunks';
+import { useCreateOrRerunCourse } from './hooks';
+import messages from './messages';
+
+const CreateOrRerunCourseForm = ({
+  title,
+  isCreateNewCourse,
+  initialValues,
+  onClickCancel,
+}) => {
+  const { courseId } = useParams();
+  const savingStatus = useSelector(getSavingStatus);
+  const { allowToCreateNewOrg } = useSelector(getStudioHomeData);
+  const runFieldReference = useRef(null);
+  const displayNameFieldReference = useRef(null);
+
+  const {
+    intl,
+    errors,
+    values,
+    postErrors,
+    isFormFilled,
+    isFormInvalid,
+    organizations,
+    showErrorBanner,
+    dispatch,
+    handleBlur,
+    handleChange,
+    hasErrorField,
+    setFieldValue,
+  } = useCreateOrRerunCourse(initialValues);
+
+  const newCourseFields = [
+    {
+      label: intl.formatMessage(messages.courseDisplayNameLabel),
+      helpText: intl.formatMessage(
+        isCreateNewCourse
+          ? messages.courseDisplayNameCreateHelpText
+          : messages.courseDisplayNameRerunHelpText,
+      ),
+      name: 'displayName',
+      value: values.displayName,
+      placeholder: intl.formatMessage(messages.courseDisplayNamePlaceholder),
+      disabled: false,
+      ref: displayNameFieldReference,
+    },
+    {
+      label: intl.formatMessage(messages.courseOrgLabel),
+      helpText: isCreateNewCourse
+        ? intl.formatMessage(messages.courseOrgCreateHelpText, {
+          strong: <strong>{intl.formatMessage(messages.courseNoteOrgNameIsPartStrong)}</strong>,
+        })
+        : intl.formatMessage(messages.courseOrgRerunHelpText, {
+          strong: (
+            <>
+              <br />
+              <strong>
+                {intl.formatMessage(messages.courseNoteNoSpaceAllowedStrong)}
+              </strong>
+            </>
+          ),
+        }),
+      name: 'org',
+      value: values.org,
+      options: organizations,
+      placeholder: intl.formatMessage(messages.courseOrgPlaceholder),
+      disabled: false,
+    },
+    {
+      label: intl.formatMessage(messages.courseNumberLabel),
+      helpText: isCreateNewCourse
+        ? intl.formatMessage(messages.courseNumberCreateHelpText, {
+          strong: (
+            <strong>
+              {intl.formatMessage(messages.courseNotePartCourseURLRequireStrong)}
+            </strong>
+          ),
+        })
+        : intl.formatMessage(messages.courseNumberRerunHelpText),
+      name: 'number',
+      value: values.number,
+      placeholder: intl.formatMessage(messages.courseNumberPlaceholder),
+      disabled: !isCreateNewCourse,
+    },
+    {
+      label: intl.formatMessage(messages.courseRunLabel),
+      helpText: isCreateNewCourse
+        ? intl.formatMessage(messages.courseRunCreateHelpText, {
+          strong: (
+            <strong>
+              {intl.formatMessage(messages.courseNotePartCourseURLRequireStrong)}
+            </strong>
+          ),
+        })
+        : intl.formatMessage(messages.courseRunRerunHelpText, {
+          strong: (
+            <>
+              <br />
+              <strong>
+                {intl.formatMessage(messages.courseNoteNoSpaceAllowedStrong)}
+              </strong>
+            </>
+          ),
+        }),
+      name: 'run',
+      value: values.run,
+      placeholder: intl.formatMessage(messages.courseRunPlaceholder),
+      disabled: false,
+      ref: runFieldReference,
+    },
+  ];
+
+  const errorMessage = errors[TOTAL_LENGTH_KEY] || postErrors?.errMsg;
+
+  const createButtonState = {
+    labels: {
+      default: intl.formatMessage(isCreateNewCourse ? messages.createButton : messages.rerunCreateButton),
+      pending: intl.formatMessage(isCreateNewCourse ? messages.creatingButton : messages.rerunningCreateButton),
+    },
+    disabledStates: [STATEFUL_BUTTON_STATES.pending],
+  };
+
+  const handleOnClickCreate = () => {
+    const courseData = isCreateNewCourse ? values : { ...values, sourceCourseKey: courseId };
+    dispatch(updateCreateOrRerunCourseQuery(courseData));
+  };
+
+  const handleOnClickCancel = () => {
+    dispatch(updatePostErrors({}));
+    onClickCancel();
+  };
+
+  const handleCustomBlurForDropdown = (e) => {
+    // it needs to correct handleOnChange Form.Autosuggest
+    const { value, name } = e.target;
+    setFieldValue(name, value);
+    handleBlur(e);
+  };
+
+  const renderOrgField = (field) => (allowToCreateNewOrg ? (
+    <TypeaheadDropdown
+      readOnly={false}
+      name={field.name}
+      value={field.value}
+      controlClassName={classNames({ 'is-invalid': hasErrorField(field.name) })}
+      options={field.options}
+      placeholder={field.placeholder}
+      handleBlur={handleCustomBlurForDropdown}
+      handleChange={(value) => setFieldValue(field.name, value)}
+      noOptionsMessage={intl.formatMessage(messages.courseOrgNoOptions)}
+      helpMessage=""
+      errorMessage=""
+      floatingLabel=""
+    />
+  ) : (
+    <Dropdown className="mr-2">
+      <Dropdown.Toggle id={`${field.name}-dropdown`} variant="outline-primary">
+        {field.value || intl.formatMessage(messages.courseOrgNoOptions)}
+      </Dropdown.Toggle>
+      <Dropdown.Menu>
+        {field.options?.map((value) => (
+          <Dropdown.Item
+            key={value}
+            onClick={() => setFieldValue(field.name, value)}
+          >
+            {value}
+          </Dropdown.Item>
+        ))}
+      </Dropdown.Menu>
+    </Dropdown>
+  ));
+
+  useEffect(() => {
+    // it needs to display the initial focus for the field depending on the current page
+    if (!isCreateNewCourse) {
+      runFieldReference?.current?.focus();
+    } else {
+      displayNameFieldReference?.current?.focus();
+    }
+  }, []);
+
+  return (
+    <div className="create-or-rerun-course-form">
+      <TransitionReplace>
+        {(errors[TOTAL_LENGTH_KEY] || showErrorBanner) ? (
+          <AlertMessage
+            variant="danger"
+            icon={InfoIcon}
+            title={errorMessage}
+            aria-hidden="true"
+            aria-labelledby={intl.formatMessage(
+              messages.alertErrorExistsAriaLabelledBy,
+            )}
+            aria-describedby={intl.formatMessage(
+              messages.alertErrorExistsAriaDescribedBy,
+            )}
+          />
+        ) : null}
+      </TransitionReplace>
+      <h3 className="mb-3">{title}</h3>
+      <Form>
+        {newCourseFields.map((field) => (
+          <Form.Group
+            className={classNames('form-group-custom', {
+              'form-group-custom_isInvalid': hasErrorField(field.name),
+            })}
+            key={field.label}
+          >
+            <Form.Label>{field.label}</Form.Label>
+            {field.name !== 'org' ? (
+              <Form.Control
+                value={field.value}
+                placeholder={field.placeholder}
+                name={field.name}
+                onChange={handleChange}
+                onBlur={handleBlur}
+                isInvalid={hasErrorField(field.name)}
+                disabled={field.disabled}
+                ref={field?.ref}
+              />
+            ) : renderOrgField(field)}
+            <Form.Text>{field.helpText}</Form.Text>
+            {hasErrorField(field.name) && (
+              <Form.Control.Feedback
+                className="feedback-error"
+                type="invalid"
+                hasIcon={false}
+              >
+                {errors[field.name]}
+              </Form.Control.Feedback>
+            )}
+          </Form.Group>
+        ))}
+        <ActionRow className="justify-content-start">
+          <Button
+            variant="outline-primary"
+            onClick={handleOnClickCancel}
+          >
+            {intl.formatMessage(messages.cancelButton)}
+          </Button>
+          <StatefulButton
+            key="save-button"
+            className="ml-3"
+            onClick={handleOnClickCreate}
+            disabled={!isFormFilled || isFormInvalid}
+            state={
+              savingStatus === RequestStatus.PENDING
+                ? STATEFUL_BUTTON_STATES.pending
+                : STATEFUL_BUTTON_STATES.default
+            }
+            {...createButtonState}
+          />
+        </ActionRow>
+      </Form>
+    </div>
+  );
+};
+
+CreateOrRerunCourseForm.defaultProps = {
+  title: '',
+  isCreateNewCourse: false,
+};
+
+CreateOrRerunCourseForm.propTypes = {
+  title: PropTypes.string,
+  initialValues: PropTypes.shape({
+    displayName: PropTypes.string.isRequired,
+    org: PropTypes.string.isRequired,
+    number: PropTypes.string.isRequired,
+    run: PropTypes.string.isRequired,
+  }).isRequired,
+  isCreateNewCourse: PropTypes.bool,
+  onClickCancel: PropTypes.func.isRequired,
+};
+
+export default CreateOrRerunCourseForm;
diff --git a/src/generic/create-or-rerun-course/CreateOrRerunCourseForm.scss b/src/generic/create-or-rerun-course/CreateOrRerunCourseForm.scss
new file mode 100644
index 0000000000..5894c96ad2
--- /dev/null
+++ b/src/generic/create-or-rerun-course/CreateOrRerunCourseForm.scss
@@ -0,0 +1,18 @@
+.create-or-rerun-course-form {
+  .form-group-custom {
+    &:not(:last-child) {
+      margin-bottom: $spacer;
+    }
+
+    .pgn__form-label {
+      font: normal 1.125rem/1.75rem $font-family-base;
+      color: $gray-700;
+      margin-bottom: .25rem;
+    }
+
+    .pgn__form-control-description,
+    .pgn__form-text {
+      margin-top: .62rem;
+    }
+  }
+}
diff --git a/src/generic/create-or-rerun-course/CreateOrRerunCourseForm.test.jsx b/src/generic/create-or-rerun-course/CreateOrRerunCourseForm.test.jsx
new file mode 100644
index 0000000000..9b88f3e840
--- /dev/null
+++ b/src/generic/create-or-rerun-course/CreateOrRerunCourseForm.test.jsx
@@ -0,0 +1,284 @@
+import React from 'react';
+import {
+  fireEvent,
+  screen,
+  render,
+  waitFor,
+} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import ReactDOM from 'react-dom';
+
+import { initializeMockApp } from '@edx/frontend-platform';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { AppProvider } from '@edx/frontend-platform/react';
+import MockAdapter from 'axios-mock-adapter';
+
+import { studioHomeMock } from '../../studio-home/__mocks__';
+import { getStudioHomeApiUrl } from '../../studio-home/data/api';
+import { fetchStudioHomeData } from '../../studio-home/data/thunks';
+import { RequestStatus } from '../../data/constants';
+import initializeStore from '../../store';
+import { executeThunk } from '../../utils';
+import { updateCreateOrRerunCourseQuery } from '../data/thunks';
+import { getCreateOrRerunCourseUrl } from '../data/api';
+import messages from './messages';
+import { CreateOrRerunCourseForm } from '.';
+import { initialState } from './factories/mockApiResponses';
+
+const mockedUsedNavigate = jest.fn();
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useParams: () => ({
+    courseId: 'course-id-mock',
+  }),
+  useNavigate: () => mockedUsedNavigate,
+}));
+
+let axiosMock;
+let store;
+ReactDOM.createPortal = jest.fn(node => node);
+
+const onClickCancelMock = jest.fn();
+
+const RootWrapper = (props) => (
+  <IntlProvider locale="en">
+    <AppProvider store={store}>
+      <CreateOrRerunCourseForm {...props} />
+    </AppProvider>
+  </IntlProvider>
+);
+
+const props = {
+  title: 'Mocked title',
+  isCreateNewCourse: true,
+  initialValues: {
+    displayName: '',
+    org: '',
+    number: '',
+    run: '',
+  },
+  onClickCancel: onClickCancelMock,
+};
+
+const mockStore = async () => {
+  axiosMock.onGet(getStudioHomeApiUrl()).reply(200, studioHomeMock);
+
+  await executeThunk(fetchStudioHomeData, store.dispatch);
+};
+
+describe('<CreateOrRerunCourseForm />', () => {
+  afterEach(() => jest.clearAllMocks());
+  beforeEach(async () => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+
+    store = initializeStore(initialState);
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+  });
+
+  it('renders form successfully', async () => {
+    render(<RootWrapper {...props} />);
+    await mockStore();
+
+    expect(screen.getByText(props.title)).toBeInTheDocument();
+    expect(screen.getByText(messages.courseDisplayNameLabel.defaultMessage)).toBeInTheDocument();
+    expect(screen.getByPlaceholderText(messages.courseDisplayNamePlaceholder.defaultMessage)).toBeInTheDocument();
+
+    expect(screen.getByText(messages.courseOrgLabel.defaultMessage)).toBeInTheDocument();
+    expect(screen.getByText(messages.courseOrgNoOptions.defaultMessage)).toBeInTheDocument();
+
+    expect(screen.getByText(messages.courseNumberLabel.defaultMessage)).toBeInTheDocument();
+    expect(screen.getByPlaceholderText(messages.courseNumberPlaceholder.defaultMessage)).toBeInTheDocument();
+
+    expect(screen.getByText(messages.courseRunLabel.defaultMessage)).toBeInTheDocument();
+    expect(screen.getByPlaceholderText(messages.courseRunPlaceholder.defaultMessage)).toBeInTheDocument();
+  });
+
+  it('renders create course form with help text successfully', async () => {
+    render(<RootWrapper {...props} />);
+    await mockStore();
+    expect(screen.getByText(messages.courseDisplayNameCreateHelpText.defaultMessage)).toBeInTheDocument();
+    expect(screen.getByText('The name of the organization sponsoring the course.', { exact: false })).toBeInTheDocument();
+    expect(screen.getByText('The unique number that identifies your course within your organization.', { exact: false })).toBeInTheDocument();
+    expect(screen.getByText('The term in which your course will run.', { exact: false })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: messages.createButton.defaultMessage })).toBeInTheDocument();
+  });
+
+  it('renders rerun course form with help text successfully', async () => {
+    const initialProps = { ...props, isCreateNewCourse: false };
+    render(<RootWrapper {...initialProps} />);
+    await mockStore();
+
+    expect(screen.getByText(messages.courseDisplayNameRerunHelpText.defaultMessage)).toBeInTheDocument();
+    expect(screen.getByText('The name of the organization sponsoring the new course. (This name is often the same as the original organization name.)', { exact: false })).toBeInTheDocument();
+    expect(screen.getByText(messages.courseNumberRerunHelpText.defaultMessage)).toBeInTheDocument();
+    expect(screen.getByText('The term in which the new course will run. (This value is often different than the original course run value.)', { exact: false })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: messages.rerunCreateButton.defaultMessage })).toBeInTheDocument();
+  });
+
+  it('should call handleOnClickCancel if button cancel clicked', async () => {
+    render(<RootWrapper {...props} />);
+    await mockStore();
+    const cancelBtn = screen.getByRole('button', { name: messages.cancelButton.defaultMessage });
+    fireEvent.click(cancelBtn);
+
+    expect(onClickCancelMock).toHaveBeenCalled();
+  });
+
+  describe('handleOnClickCreate', () => {
+    it('should call window.location.assign with url', async () => {
+      render(<RootWrapper {...props} />);
+      await mockStore();
+      const url = '/course/courseId';
+      const displayNameInput = screen.getByPlaceholderText(messages.courseDisplayNamePlaceholder.defaultMessage);
+      const orgInput = screen.getByText(messages.courseOrgNoOptions.defaultMessage);
+      const numberInput = screen.getByPlaceholderText(messages.courseNumberPlaceholder.defaultMessage);
+      const runInput = screen.getByPlaceholderText(messages.courseRunPlaceholder.defaultMessage);
+      const createBtn = screen.getByRole('button', { name: messages.createButton.defaultMessage });
+
+      userEvent.type(displayNameInput, 'foo course name');
+      fireEvent.click(orgInput);
+      userEvent.type(numberInput, '777');
+      userEvent.type(runInput, '1');
+      userEvent.click(createBtn);
+      await axiosMock.onPost(getCreateOrRerunCourseUrl()).reply(200, { url });
+      await executeThunk(updateCreateOrRerunCourseQuery({ org: 'testX', run: 'some' }), store.dispatch);
+
+      expect(mockedUsedNavigate).toHaveBeenCalledWith(url);
+    });
+    it('should call window.location.assign with url and destinationCourseKey', async () => {
+      render(<RootWrapper {...props} />);
+      await mockStore();
+      const url = '/course/';
+      const destinationCourseKey = 'courseKey';
+      const displayNameInput = screen.getByPlaceholderText(messages.courseDisplayNamePlaceholder.defaultMessage);
+      const orgInput = screen.getByText(messages.courseOrgNoOptions.defaultMessage);
+      const numberInput = screen.getByPlaceholderText(messages.courseNumberPlaceholder.defaultMessage);
+      const runInput = screen.getByPlaceholderText(messages.courseRunPlaceholder.defaultMessage);
+      const createBtn = screen.getByRole('button', { name: messages.createButton.defaultMessage });
+      await axiosMock.onPost(getCreateOrRerunCourseUrl()).reply(200, { url, destinationCourseKey });
+
+      userEvent.type(displayNameInput, 'foo course name');
+      fireEvent.click(orgInput);
+      userEvent.type(numberInput, '777');
+      userEvent.type(runInput, '1');
+      userEvent.click(createBtn);
+      await executeThunk(updateCreateOrRerunCourseQuery({ org: 'testX', run: 'some' }), store.dispatch);
+
+      expect(mockedUsedNavigate).toHaveBeenCalledWith(`${url}${destinationCourseKey}`);
+    });
+  });
+
+  it('should be disabled create button if form not filled', async () => {
+    render(<RootWrapper {...props} />);
+    await mockStore();
+    const createBtn = screen.getByRole('button', { name: messages.createButton.defaultMessage });
+    expect(createBtn).toBeDisabled();
+  });
+
+  it('should be disabled rerun button if form not filled', async () => {
+    const initialProps = { ...props, isCreateNewCourse: false };
+    render(<RootWrapper {...initialProps} />);
+    await mockStore();
+    const rerunBtn = screen.getByRole('button', { name: messages.rerunCreateButton.defaultMessage });
+    expect(rerunBtn).toBeDisabled();
+  });
+
+  it('shows error message when total length exceeds 65 characters', async () => {
+    const updatedProps = {
+      ...props,
+      initialValues: {
+        displayName: 'Long Title Course',
+        org: 'long-org',
+        number: 'number',
+        run: '2024',
+      },
+    };
+
+    render(<RootWrapper {...updatedProps} />);
+    await mockStore();
+    const numberInput = screen.getByPlaceholderText(messages.courseNumberPlaceholder.defaultMessage);
+
+    fireEvent.change(numberInput, { target: { value: 'long-name-which-is-longer-than-65-characters-to-check-for-errors' } });
+
+    waitFor(() => {
+      expect(screen.getByText(messages.totalLengthError)).toBeInTheDocument();
+    });
+  });
+
+  it('should be disabled create button if form has error', async () => {
+    render(<RootWrapper {...props} />);
+    await mockStore();
+    const createBtn = screen.getByRole('button', { name: messages.createButton.defaultMessage });
+    const displayNameInput = screen.getByPlaceholderText(messages.courseDisplayNamePlaceholder.defaultMessage);
+    const orgInput = screen.getByText(messages.courseOrgNoOptions.defaultMessage);
+    const numberInput = screen.getByPlaceholderText(messages.courseNumberPlaceholder.defaultMessage);
+    const runInput = screen.getByPlaceholderText(messages.courseRunPlaceholder.defaultMessage);
+
+    fireEvent.change(displayNameInput, { target: { value: 'foo course name' } });
+    fireEvent.click(orgInput);
+    fireEvent.change(numberInput, { target: { value: 'number with invalid (+) symbol' } });
+    fireEvent.change(runInput, { target: { value: 'number with invalid (=) symbol' } });
+
+    waitFor(() => {
+      expect(createBtn).toBeDisabled();
+    });
+  });
+
+  it('shows typeahead dropdown with allowed to create org permissions', async () => {
+    const updatedStudioData = { ...studioHomeMock, allowToCreateNewOrg: true };
+    store = initializeStore({
+      ...initialState,
+      studioHome: {
+        ...initialState.studioHome,
+        studioHomeData: updatedStudioData,
+      },
+    });
+    render(<RootWrapper {...props} />);
+    await mockStore();
+
+    expect(screen.getByPlaceholderText(messages.courseOrgPlaceholder.defaultMessage));
+  });
+
+  it('shows button pending state', async () => {
+    store = initializeStore({
+      ...initialState,
+      generic: {
+        ...initialState.generic,
+        savingStatus: RequestStatus.PENDING,
+      },
+    });
+    render(<RootWrapper {...props} />);
+    await mockStore();
+    expect(screen.getByRole('button', { name: messages.creatingButton.defaultMessage })).toBeInTheDocument();
+  });
+
+  it('shows alert error if postErrors presents', async () => {
+    render(<RootWrapper {...props} />);
+    await mockStore();
+    await axiosMock.onPost(getCreateOrRerunCourseUrl()).reply(200, { errMsg: 'aaa' });
+    await executeThunk(updateCreateOrRerunCourseQuery({ org: 'testX', run: 'some' }), store.dispatch);
+
+    expect(screen.getByText('aaa')).toBeInTheDocument();
+  });
+
+  it('shows error on field', async () => {
+    render(<RootWrapper {...props} />);
+    await mockStore();
+    const numberInput = screen.getByPlaceholderText(messages.courseNumberPlaceholder.defaultMessage);
+
+    fireEvent.change(numberInput, { target: { value: 'number with invalid (+) symbol' } });
+
+    waitFor(() => {
+      expect(screen.getByText(messages.noSpaceError)).toBeInTheDocument();
+    });
+  });
+});
diff --git a/src/generic/create-or-rerun-course/factories/mockApiResponses.jsx b/src/generic/create-or-rerun-course/factories/mockApiResponses.jsx
new file mode 100644
index 0000000000..ca3e0b3476
--- /dev/null
+++ b/src/generic/create-or-rerun-course/factories/mockApiResponses.jsx
@@ -0,0 +1,31 @@
+import { RequestStatus } from '../../../data/constants';
+import { studioHomeMock } from '../../../studio-home/__mocks__';
+
+export const courseId = 'course-v1:edX+DemoX+Demo_Course';
+
+export const initialState = {
+  generic: {
+    createOrRerunCourse: {
+      courseData: {},
+      courseRerunData: {},
+      redirectUrlObj: {},
+      postErrors: {},
+    },
+    loadingStatuses: {
+      organizationLoadingStatus: 'successful', courseRerunLoadingStatus: 'successful',
+    },
+    organizations: ['krisEdx', 'krisEd', 'DeveloperInc', 'importMit', 'testX', 'edX', 'developerInb'],
+    savingStatus: '',
+  },
+  studioHome: {
+    loadingStatuses: {
+      studioHomeLoadingStatus: RequestStatus.SUCCESSFUL,
+      courseNotificationLoadingStatus: RequestStatus.IN_PROGRESS,
+    },
+    savingStatuses: {
+      courseCreatorSavingStatus: '',
+      deleteNotificationSavingStatus: '',
+    },
+    studioHomeData: studioHomeMock,
+  },
+};
diff --git a/src/generic/create-or-rerun-course/hooks.jsx b/src/generic/create-or-rerun-course/hooks.jsx
new file mode 100644
index 0000000000..d4860e7e0f
--- /dev/null
+++ b/src/generic/create-or-rerun-course/hooks.jsx
@@ -0,0 +1,139 @@
+import { useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { useFormik } from 'formik';
+import * as Yup from 'yup';
+import { useNavigate } from 'react-router-dom';
+
+import { REGEX_RULES } from '../../constants';
+import { RequestStatus, MAX_TOTAL_LENGTH, TOTAL_LENGTH_KEY } from '../../data/constants';
+import { getStudioHomeData } from '../../studio-home/data/selectors';
+import {
+  getRedirectUrlObj,
+  getOrganizations,
+  getPostErrors,
+  getSavingStatus,
+} from '../data/selectors';
+import { updateSavingStatus, updatePostErrors } from '../data/slice';
+import { fetchOrganizationsQuery } from '../data/thunks';
+import messages from './messages';
+
+const useCreateOrRerunCourse = (initialValues) => {
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
+  const redirectUrlObj = useSelector(getRedirectUrlObj);
+  const createOrRerunCourseSavingStatus = useSelector(getSavingStatus);
+  const allOrganizations = useSelector(getOrganizations);
+  const postErrors = useSelector(getPostErrors);
+  const {
+    allowToCreateNewOrg,
+    allowedOrganizations,
+  } = useSelector(getStudioHomeData);
+  const [isFormFilled, setFormFilled] = useState(false);
+  const [showErrorBanner, setShowErrorBanner] = useState(false);
+  const organizations = allowToCreateNewOrg ? allOrganizations : allowedOrganizations;
+
+  const { specialCharsRule, noSpaceRule } = REGEX_RULES;
+  const validationSchema = Yup.object().shape({
+    displayName: Yup.string().required(
+      intl.formatMessage(messages.requiredFieldError),
+    ),
+    org: Yup.string()
+      .required(intl.formatMessage(messages.requiredFieldError))
+      .matches(
+        specialCharsRule,
+        intl.formatMessage(messages.disallowedCharsError),
+      )
+      .matches(noSpaceRule, intl.formatMessage(messages.noSpaceError)),
+    number: Yup.string()
+      .required(intl.formatMessage(messages.requiredFieldError))
+      .matches(
+        specialCharsRule,
+        intl.formatMessage(messages.disallowedCharsError),
+      )
+      .matches(noSpaceRule, intl.formatMessage(messages.noSpaceError)),
+    run: Yup.string()
+      .required(intl.formatMessage(messages.requiredFieldError))
+      .matches(
+        specialCharsRule,
+        intl.formatMessage(messages.disallowedCharsError),
+      )
+      .matches(noSpaceRule, intl.formatMessage(messages.noSpaceError)),
+  }).test(TOTAL_LENGTH_KEY, intl.formatMessage(messages.totalLengthError), function validateTotalLength() {
+    const { org, number, run } = this?.options.originalValue || {};
+    if ((org?.length || 0) + (number?.length || 0) + (run?.length || 0) > MAX_TOTAL_LENGTH) {
+      return this.createError({ path: TOTAL_LENGTH_KEY, message: intl.formatMessage(messages.totalLengthError) });
+    }
+    return true;
+  });
+
+  const {
+    values, errors, touched, handleChange, handleBlur, setFieldValue,
+  } = useFormik({
+    initialValues,
+    enableReinitialize: true,
+    validateOnBlur: false,
+    validationSchema,
+  });
+
+  useEffect(() => {
+    if (allowToCreateNewOrg) {
+      dispatch(fetchOrganizationsQuery());
+    }
+  }, []);
+
+  useEffect(() => {
+    setFormFilled(
+      Object.entries(values)
+        ?.filter(([key]) => key !== 'undefined')
+        .every(([, value]) => value),
+    );
+    dispatch(updatePostErrors({}));
+  }, [values]);
+
+  useEffect(() => {
+    setShowErrorBanner(!!postErrors.errMsg);
+  }, [postErrors]);
+
+  useEffect(() => {
+    if (createOrRerunCourseSavingStatus === RequestStatus.SUCCESSFUL) {
+      dispatch(updateSavingStatus({ status: '' }));
+      const { url, destinationCourseKey } = redirectUrlObj;
+      // New courses' url to the outline page is provided in the url. However, for course
+      // re-runs the url is /course/. The actual destination for the rer-run's  outline
+      // is in the destionationCourseKey attribute from the api.
+      if (url) {
+        if (destinationCourseKey) {
+          navigate(`${url}${destinationCourseKey}`);
+        } else {
+          navigate(url);
+        }
+      }
+    } else if (createOrRerunCourseSavingStatus === RequestStatus.FAILED) {
+      dispatch(updateSavingStatus({ status: '' }));
+    }
+  }, [createOrRerunCourseSavingStatus]);
+
+  const hasErrorField = (fieldName) => !!errors[fieldName] && !!touched[fieldName];
+  const isFormInvalid = Object.keys(errors).length;
+
+  return {
+    intl,
+    errors,
+    values,
+    postErrors,
+    isFormFilled,
+    isFormInvalid,
+    organizations,
+    showErrorBanner,
+    dispatch,
+    handleBlur,
+    handleChange,
+    hasErrorField,
+    setFieldValue,
+    setShowErrorBanner,
+  };
+};
+
+export { useCreateOrRerunCourse };
diff --git a/src/generic/create-or-rerun-course/index.js b/src/generic/create-or-rerun-course/index.js
new file mode 100644
index 0000000000..83b3965919
--- /dev/null
+++ b/src/generic/create-or-rerun-course/index.js
@@ -0,0 +1,2 @@
+export { default as CreateOrRerunCourseForm } from './CreateOrRerunCourseForm';
+export { useCreateOrRerunCourse } from './hooks';
diff --git a/src/generic/create-or-rerun-course/messages.js b/src/generic/create-or-rerun-course/messages.js
new file mode 100644
index 0000000000..194271d544
--- /dev/null
+++ b/src/generic/create-or-rerun-course/messages.js
@@ -0,0 +1,135 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+import { MAX_TOTAL_LENGTH } from '../../data/constants';
+
+const messages = defineMessages({
+  courseDisplayNameLabel: {
+    id: 'course-authoring.create-or-rerun-course.display-name.label',
+    defaultMessage: 'Course name',
+  },
+  courseDisplayNamePlaceholder: {
+    id: 'course-authoring.create-or-rerun-course.display-name.placeholder',
+    defaultMessage: 'e.g. Introduction to Computer Science',
+  },
+  courseDisplayNameCreateHelpText: {
+    id: 'course-authoring.create-or-rerun-course.create.display-name.help-text',
+    defaultMessage: 'The public display name for your course. This cannot be changed, but you can set a different display name in advanced settings later.',
+  },
+  courseDisplayNameRerunHelpText: {
+    id: 'course-authoring.create-or-rerun-course.rerun.display-name.help-text',
+    defaultMessage: 'The public display name for the new course. (This name is often the same as the original course name.)',
+  },
+  courseOrgLabel: {
+    id: 'course-authoring.create-or-rerun-course.org.label',
+    defaultMessage: 'Organization',
+  },
+  courseOrgPlaceholder: {
+    id: 'course-authoring.create-or-rerun-course.org.placeholder',
+    defaultMessage: 'e.g. UniversityX or OrganizationX',
+  },
+  courseOrgNoOptions: {
+    id: 'course-authoring.create-or-rerun-course.org.no-options',
+    defaultMessage: 'No options',
+  },
+  courseOrgCreateHelpText: {
+    id: 'course-authoring.create-or-rerun-course.create.org.help-text',
+    defaultMessage: 'The name of the organization sponsoring the course. {strong} This cannot be changed, but you can set a different display name in advanced settings later.',
+  },
+  courseOrgRerunHelpText: {
+    id: 'course-authoring.create-or-rerun-course.rerun.org.help-text',
+    defaultMessage: 'The name of the organization sponsoring the new course. (This name is often the same as the original organization name.) {strong}',
+  },
+  courseNoteNoSpaceAllowedStrong: {
+    id: 'course-authoring.create-or-rerun-course.no-space-allowed.strong',
+    defaultMessage: 'Note: No spaces or special characters are allowed.',
+  },
+  courseNoteOrgNameIsPartStrong: {
+    id: 'course-authoring.create-or-rerun-course.org.help-text.strong',
+    defaultMessage: 'Note: The organization name is part of the course URL.',
+  },
+  courseNumberLabel: {
+    id: 'course-authoring.create-or-rerun-course.number.label',
+    defaultMessage: 'Course number',
+  },
+  courseNumberPlaceholder: {
+    id: 'course-authoring.create-or-rerun-course.number.placeholder',
+    defaultMessage: 'e.g. CS101',
+  },
+  courseNumberCreateHelpText: {
+    id: 'course-authoring.create-or-rerun-course.create.number.help-text',
+    defaultMessage: 'The unique number that identifies your course within your organization. {strong}',
+  },
+  courseNumberRerunHelpText: {
+    id: 'course-authoring.create-or-rerun-course.rerun.number.help-text',
+    defaultMessage: 'The unique number that identifies the new course within the organization. (This number will be the same as the original course number and cannot be changed.)',
+  },
+  courseNotePartCourseURLRequireStrong: {
+    id: 'course-authoring.create-or-rerun-course.number.help-text.strong',
+    defaultMessage: 'Note: This is part of your course URL, so no spaces or special characters are allowed and it cannot be changed.',
+  },
+  courseRunLabel: {
+    id: 'course-authoring.create-or-rerun-course.run.label',
+    defaultMessage: 'Course run',
+  },
+  courseRunPlaceholder: {
+    id: 'course-authoring.create-or-rerun-course.run.placeholder',
+    defaultMessage: 'e.g. 2014_T1',
+  },
+  courseRunCreateHelpText: {
+    id: 'course-authoring.create-or-rerun-course.create.run.help-text',
+    defaultMessage: 'The term in which your course will run. {strong}',
+  },
+  courseRunRerunHelpText: {
+    id: 'course-authoring.create-or-rerun-course.create.rerun.help-text',
+    defaultMessage: 'The term in which the new course will run. (This value is often different than the original course run value.){strong}',
+  },
+  defaultPlaceholder: {
+    id: 'course-authoring.create-or-rerun-course.default-placeholder',
+    defaultMessage: 'Label',
+  },
+  createButton: {
+    id: 'course-authoring.create-or-rerun-course.create.button.create',
+    defaultMessage: 'Create',
+  },
+  rerunCreateButton: {
+    id: 'course-authoring.create-or-rerun-course.rerun.button.create',
+    defaultMessage: 'Create re-run',
+  },
+  creatingButton: {
+    id: 'course-authoring.create-or-rerun-course.button.creating',
+    defaultMessage: 'Creating',
+  },
+  rerunningCreateButton: {
+    id: 'course-authoring.create-or-rerun-course.rerun.button.rerunning',
+    defaultMessage: 'Processing re-run request',
+  },
+  cancelButton: {
+    id: 'course-authoring.create-or-rerun-course.button.cancel',
+    defaultMessage: 'Cancel',
+  },
+  requiredFieldError: {
+    id: 'course-authoring.create-or-rerun-course.required.error',
+    defaultMessage: 'Required field.',
+  },
+  disallowedCharsError: {
+    id: 'course-authoring.create-or-rerun-course.disallowed-chars.error',
+    defaultMessage: 'Please do not use any spaces or special characters in this field.',
+  },
+  noSpaceError: {
+    id: 'course-authoring.create-or-rerun-course.no-space.error',
+    defaultMessage: 'Please do not use any spaces in this field.',
+  },
+  totalLengthError: {
+    id: 'course-authoring.create-or-rerun-course.total-length-error.error',
+    defaultMessage: `The combined length of the organization, course number and course run fields cannot be more than ${MAX_TOTAL_LENGTH} characters.`,
+  },
+  alertErrorExistsAriaLabelledBy: {
+    id: 'course-authoring.create-or-rerun-course.error.already-exists.labelledBy',
+    defaultMessage: 'alert-already-exists-title',
+  },
+  alertErrorExistsAriaDescribedBy: {
+    id: 'course-authoring.create-or-rerun-course.error.already-exists.aria.describedBy',
+    defaultMessage: 'alert-confirmation-description',
+  },
+});
+
+export default messages;
diff --git a/src/generic/data/api.mock.ts b/src/generic/data/api.mock.ts
new file mode 100644
index 0000000000..b4a1e43dc9
--- /dev/null
+++ b/src/generic/data/api.mock.ts
@@ -0,0 +1,49 @@
+/* istanbul ignore file */
+import * as api from './api';
+
+/**
+ * Mock for `getClipboard()` that simulates an empty clipboard
+ */
+export async function mockClipboardEmpty(): Promise<api.ClipboardStatus> {
+  return {
+    content: null,
+    sourceUsageKey: '',
+    sourceContextTitle: '',
+    sourceEditUrl: '',
+  };
+}
+mockClipboardEmpty.applyMock = () => jest.spyOn(api, 'getClipboard').mockImplementation(mockClipboardEmpty);
+mockClipboardEmpty.applyMockOnce = () => jest.spyOn(api, 'getClipboard').mockImplementationOnce(mockClipboardEmpty);
+
+/**
+ * Mock for `getClipboard()` that simulates a copied HTML component
+ */
+export async function mockClipboardHtml(blockType?: string): Promise<api.ClipboardStatus> {
+  return {
+    content: {
+      id: 69,
+      userId: 3,
+      created: '2024-01-16T13:33:21.314439Z',
+      purpose: 'clipboard',
+      status: 'ready',
+      blockType: blockType || 'html',
+      blockTypeDisplay: 'Text',
+      olxUrl: 'http://localhost:18010/api/content-staging/v1/staged-content/69/olx',
+      displayName: 'Blank HTML Page',
+    },
+    sourceUsageKey: 'block-v1:edX+DemoX+Demo_Course+type@html+block@html1',
+    sourceContextTitle: 'Demonstration Course',
+    sourceEditUrl: 'http://localhost:18010/container/block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical1',
+  };
+}
+mockClipboardHtml.applyMock = (blockType?: string) => jest.spyOn(api, 'getClipboard').mockImplementation(() => mockClipboardHtml(blockType));
+mockClipboardHtml.applyMockOnce = () => jest.spyOn(api, 'getClipboard').mockImplementationOnce(mockClipboardHtml);
+
+/** Mock the DOM `BroadcastChannel` API which the clipboard code uses */
+export function mockBroadcastChannel() {
+  const clipboardBroadcastChannelMock = {
+    postMessage: jest.fn(),
+    close: jest.fn(),
+  };
+  (global as any).BroadcastChannel = jest.fn(() => clipboardBroadcastChannelMock);
+}
diff --git a/src/generic/data/api.test.js b/src/generic/data/api.test.js
new file mode 100644
index 0000000000..eeac9c65cd
--- /dev/null
+++ b/src/generic/data/api.test.js
@@ -0,0 +1,94 @@
+import MockAdapter from 'axios-mock-adapter';
+import { initializeMockApp } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+
+import { contentTagsCountMock } from '../__mocks__';
+import {
+  createOrRerunCourse,
+  getApiBaseUrl,
+  getOrganizations,
+  getCreateOrRerunCourseUrl,
+  getCourseRerunUrl,
+  getCourseRerun,
+  getTagsCount,
+  getTagsCountApiUrl,
+} from './api';
+
+let axiosMock;
+
+describe('generic api calls', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should get organizations', async () => {
+    const organizationsData = ['edX', 'org'];
+    const queryUrl = new URL('organizations', getApiBaseUrl()).href;
+    axiosMock.onGet(queryUrl).reply(200, organizationsData);
+    const result = await getOrganizations();
+
+    expect(axiosMock.history.get[0].url).toEqual(queryUrl);
+    expect(result).toEqual(organizationsData);
+  });
+
+  it('should get course rerun', async () => {
+    const courseId = 'course-mock-id';
+    const courseRerunData = {
+      allowUnicodeCourseId: false,
+      courseCreatorStatus: 'granted',
+      displayName: 'Demonstration Course',
+      number: 'DemoX',
+      org: 'edX',
+      run: 'Demo_Course',
+    };
+    axiosMock.onGet(getCourseRerunUrl(courseId)).reply(200, courseRerunData);
+    const result = await getCourseRerun(courseId);
+
+    expect(axiosMock.history.get[0].url).toEqual(getCourseRerunUrl(courseId));
+    expect(result).toEqual(courseRerunData);
+  });
+
+  it('should post create or rerun course', async () => {
+    const courseRerunData = {
+      allowUnicodeCourseId: false,
+      courseCreatorStatus: 'granted',
+      displayName: 'Demonstration Course',
+      number: 'DemoX',
+      org: 'edX',
+      run: 'Demo_Course',
+    };
+    axiosMock.onPost(getCreateOrRerunCourseUrl()).reply(200, courseRerunData);
+    const result = await createOrRerunCourse(courseRerunData);
+
+    expect(axiosMock.history.post[0].url).toEqual(getCreateOrRerunCourseUrl());
+    expect(result).toEqual(courseRerunData);
+  });
+
+  it('should get tags count', async () => {
+    const pattern = 'this,is,a,pattern';
+    const contentId = 'block-v1:SampleTaxonomyOrg1+STC1+2023_1+type@vertical+block@aaf8b8eb86b54281aeeab12499d2cb06';
+    axiosMock.onGet().reply(200, contentTagsCountMock);
+    const result = await getTagsCount(pattern);
+    expect(axiosMock.history.get[0].url).toEqual(getTagsCountApiUrl(pattern));
+    expect(result).toEqual(contentTagsCountMock);
+    expect(contentTagsCountMock[contentId]).toEqual(15);
+  });
+
+  it('should throw an error if no pattern is provided', async () => {
+    const pattern = undefined;
+    expect(getTagsCount(pattern)).rejects.toThrow('contentPattern is required');
+    expect(axiosMock.history.get.length).toEqual(0);
+  });
+});
diff --git a/src/generic/data/api.ts b/src/generic/data/api.ts
new file mode 100644
index 0000000000..5fc5802eaa
--- /dev/null
+++ b/src/generic/data/api.ts
@@ -0,0 +1,99 @@
+import { camelCaseObject, getConfig } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+
+import { convertObjectToSnakeCase } from '../../utils';
+
+export const getApiBaseUrl = () => getConfig().STUDIO_BASE_URL;
+export const getCreateOrRerunCourseUrl = () => new URL('course/', getApiBaseUrl()).href;
+export const getCourseRerunUrl = (courseId: string) => new URL(
+  `/api/contentstore/v1/course_rerun/${courseId}`,
+  getApiBaseUrl(),
+).href;
+export const getOrganizationsUrl = () => new URL('organizations', getApiBaseUrl()).href;
+export const getClipboardUrl = () => `${getApiBaseUrl()}/api/content-staging/v1/clipboard/`;
+export const getTagsCountApiUrl = (contentPattern: string) => new URL(
+  `api/content_tagging/v1/object_tag_counts/${contentPattern}/?count_implicit`,
+  getApiBaseUrl(),
+).href;
+
+/**
+ * Get's organizations data. Returns list of organization names.
+ */
+export async function getOrganizations(): Promise<string[]> {
+  const { data } = await getAuthenticatedHttpClient().get(
+    getOrganizationsUrl(),
+  );
+  return camelCaseObject(data);
+}
+
+/**
+ * Get's course rerun data.
+ */
+export async function getCourseRerun(courseId: string): Promise<unknown> {
+  const { data } = await getAuthenticatedHttpClient().get(
+    getCourseRerunUrl(courseId),
+  );
+  return camelCaseObject(data);
+}
+
+/**
+ * Create or rerun course with data.
+ */
+export async function createOrRerunCourse(courseData: Object): Promise<unknown> {
+  const { data } = await getAuthenticatedHttpClient().post(
+    getCreateOrRerunCourseUrl(),
+    convertObjectToSnakeCase(courseData, true),
+  );
+  return camelCaseObject(data);
+}
+
+export interface ClipboardStatus {
+  content: {
+    id: number;
+    userId: number;
+    created: string; // e.g. '2024-08-28T19:02:08.272192Z'
+    purpose: 'clipboard';
+    status: 'ready' | 'loading' | 'expired' | 'error';
+    blockType: string;
+    blockTypeDisplay: string;
+    olxUrl: string;
+    displayName: string;
+  } | null;
+  sourceUsageKey: string; // May be an empty string
+  sourceContextTitle: string; // May be an empty string
+  sourceEditUrl: string; // May be an empty string
+}
+
+/**
+ * Retrieves user's clipboard.
+ */
+export async function getClipboard(): Promise<ClipboardStatus> {
+  const { data } = await getAuthenticatedHttpClient()
+    .get(getClipboardUrl());
+
+  return camelCaseObject(data);
+}
+
+/**
+ * Updates user's clipboard.
+ */
+export async function updateClipboard(usageKey: string): Promise<ClipboardStatus> {
+  const { data } = await getAuthenticatedHttpClient()
+    .post(getClipboardUrl(), { usage_key: usageKey });
+
+  return camelCaseObject(data);
+}
+
+/**
+ * Gets the tags count of multiple content by id separated by commas or a pattern using a '*' wildcard.
+*/
+export async function getTagsCount(contentPattern?: string): Promise<Record<string, number>> {
+  if (!contentPattern) {
+    throw new Error('contentPattern is required');
+  }
+
+  const { data } = await getAuthenticatedHttpClient()
+    .get(getTagsCountApiUrl(contentPattern));
+
+  return data;
+}
diff --git a/src/generic/data/apiHooks.test.tsx b/src/generic/data/apiHooks.test.tsx
new file mode 100644
index 0000000000..84168305a4
--- /dev/null
+++ b/src/generic/data/apiHooks.test.tsx
@@ -0,0 +1,99 @@
+import React from 'react';
+import { initializeMockApp } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { renderHook } from '@testing-library/react-hooks';
+import MockAdapter from 'axios-mock-adapter';
+
+import { getTagsCountApiUrl } from './api';
+import { useContentTagsCount } from './apiHooks';
+
+let axiosMock;
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+    },
+  },
+});
+
+const wrapper = ({ children }) => (
+  <QueryClientProvider client={queryClient}>
+    {children}
+  </QueryClientProvider>
+);
+
+describe('useContentTagsCount', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+    axiosMock.restore();
+  });
+
+  it('should return success response', async () => {
+    const courseId = 'course-v1:edX+TestX+Test_Course';
+    axiosMock.onGet(getTagsCountApiUrl(courseId)).reply(200, { [courseId]: 10 });
+
+    const hook = renderHook(() => useContentTagsCount(courseId), { wrapper });
+    await hook.waitForNextUpdate();
+    const { data, isSuccess } = hook.result.current;
+
+    expect(axiosMock.history.get[0].url).toEqual(getTagsCountApiUrl(courseId));
+    expect(isSuccess).toEqual(true);
+    expect(data).toEqual(10);
+  });
+
+  it('should return failure response', async () => {
+    const courseId = 'course-v1:edX+TestX+Test_Course';
+    axiosMock.onGet(getTagsCountApiUrl(courseId)).reply(500, 'error');
+
+    const hook = renderHook(() => useContentTagsCount(courseId), { wrapper });
+    await hook.waitForNextUpdate();
+
+    const { isSuccess } = hook.result.current;
+
+    expect(axiosMock.history.get[0].url).toEqual(getTagsCountApiUrl(courseId));
+    expect(isSuccess).toEqual(false);
+  });
+
+  it('should use an wildcard if a block is provided', async () => {
+    const blockId = 'block-v1:edX+TestX+Test_Course+type@chapter+block@123';
+    const pattern = 'block-v1:edX+TestX+Test_Course*';
+    axiosMock.onGet(getTagsCountApiUrl(pattern)).reply(200, {
+      [blockId]: 10,
+      'block-v1:edX+TestX+Test_Course+type@chapter+block@another_block': 5,
+    });
+
+    const hook = renderHook(() => useContentTagsCount(blockId), { wrapper });
+    await hook.waitForNextUpdate();
+
+    const { data, isSuccess } = hook.result.current;
+
+    expect(axiosMock.history.get[0].url).toEqual(getTagsCountApiUrl(pattern));
+    expect(isSuccess).toEqual(true);
+    expect(data).toEqual(10);
+  });
+
+  it('shouldnt call api if no pattern is provided', () => {
+    const hook = renderHook(() => useContentTagsCount(undefined), { wrapper });
+
+    hook.rerender();
+
+    const { isSuccess } = hook.result.current;
+
+    expect(axiosMock.history.get.length).toEqual(0);
+    expect(isSuccess).toEqual(false);
+  });
+});
diff --git a/src/generic/data/apiHooks.ts b/src/generic/data/apiHooks.ts
new file mode 100644
index 0000000000..38b1b16f83
--- /dev/null
+++ b/src/generic/data/apiHooks.ts
@@ -0,0 +1,33 @@
+import { useQuery } from '@tanstack/react-query';
+import { getOrganizations, getTagsCount } from './api';
+
+/**
+ * Builds the query to get a list of available organizations
+ */
+export const useOrganizationListData = () => (
+  useQuery({
+    queryKey: ['organizationList'],
+    queryFn: getOrganizations,
+  })
+);
+
+/**
+ * Builds the query to get tags count of the whole contentId course and
+ * returns the tags count of the specific contentId.
+ */
+export const useContentTagsCount = (contentId?: string) => {
+  let contentPattern: string | undefined;
+  if (!contentId || contentId.includes('course-v1')) {
+    // If the contentId is a course, we want to get the tags count only for the course
+    contentPattern = contentId;
+  } else {
+    // If the contentId is not a course, we want to get the tags count for all the content of the course
+    contentPattern = contentId.replace(/\+type@.*$/, '*');
+  }
+  return useQuery({
+    queryKey: ['contentTagsCount', contentPattern],
+    queryFn: () => getTagsCount(contentPattern),
+    select: (data) => (contentId ? (data[contentId] || 0) : 0), // Return the tags count of the specific contentId
+    enabled: !!contentId,
+  });
+};
diff --git a/src/generic/data/selectors.js b/src/generic/data/selectors.js
new file mode 100644
index 0000000000..e111961b15
--- /dev/null
+++ b/src/generic/data/selectors.js
@@ -0,0 +1,8 @@
+export const getLoadingStatuses = (state) => state.generic.loadingStatuses;
+export const getSavingStatus = (state) => state.generic.savingStatus;
+export const getOrganizations = (state) => state.generic.organizations;
+export const getCourseData = (state) => state.generic.createOrRerunCourse.courseData;
+export const getCourseRerunData = (state) => state.generic.createOrRerunCourse.courseRerunData;
+export const getRedirectUrlObj = (state) => state.generic.createOrRerunCourse.redirectUrlObj;
+export const getPostErrors = (state) => state.generic.createOrRerunCourse.postErrors;
+export const getClipboardData = (state) => state.generic.clipboardData;
diff --git a/src/generic/data/slice.js b/src/generic/data/slice.js
new file mode 100644
index 0000000000..f53ddc610e
--- /dev/null
+++ b/src/generic/data/slice.js
@@ -0,0 +1,64 @@
+/* eslint-disable no-param-reassign */
+import { createSlice } from '@reduxjs/toolkit';
+
+import { RequestStatus } from '../../data/constants';
+
+const slice = createSlice({
+  name: 'generic',
+  initialState: {
+    loadingStatuses: {
+      organizationLoadingStatus: RequestStatus.IN_PROGRESS,
+      courseRerunLoadingStatus: RequestStatus.IN_PROGRESS,
+    },
+    savingStatus: '',
+    organizations: [],
+    createOrRerunCourse: {
+      courseData: {},
+      courseRerunData: {},
+      redirectUrlObj: {},
+      postErrors: {},
+    },
+    clipboardData: null,
+  },
+  reducers: {
+    fetchOrganizations: (state, { payload }) => {
+      state.organizations = payload;
+    },
+    updateLoadingStatuses: (state, { payload }) => {
+      state.loadingStatuses = { ...state.loadingStatuses, ...payload };
+    },
+    updateSavingStatus: (state, { payload }) => {
+      state.savingStatus = payload.status;
+    },
+    updateCourseData: (state, { payload }) => {
+      state.createOrRerunCourse.courseData = payload;
+    },
+    updateCourseRerunData: (state, { payload }) => {
+      state.createOrRerunCourse.courseRerunData = payload;
+    },
+    updateRedirectUrlObj: (state, { payload }) => {
+      state.createOrRerunCourse.redirectUrlObj = payload;
+    },
+    updatePostErrors: (state, { payload }) => {
+      state.createOrRerunCourse.postErrors = payload;
+    },
+    updateClipboardData: (state, { payload }) => {
+      state.clipboardData = payload;
+    },
+  },
+});
+
+export const {
+  fetchOrganizations,
+  updatePostErrors,
+  updateCourseRerunData,
+  updateLoadingStatuses,
+  updateSavingStatus,
+  updateCourseData,
+  updateRedirectUrlObj,
+  updateClipboardData,
+} = slice.actions;
+
+export const {
+  reducer,
+} = slice;
diff --git a/src/generic/data/thunks.js b/src/generic/data/thunks.js
new file mode 100644
index 0000000000..f5cc8a9557
--- /dev/null
+++ b/src/generic/data/thunks.js
@@ -0,0 +1,95 @@
+import { logError } from '@edx/frontend-platform/logging';
+
+import { CLIPBOARD_STATUS, NOTIFICATION_MESSAGES } from '../../constants';
+import {
+  hideProcessingNotification,
+  showProcessingNotification,
+} from '../processing-notification/data/slice';
+import { RequestStatus } from '../../data/constants';
+import {
+  fetchOrganizations,
+  updatePostErrors,
+  updateLoadingStatuses,
+  updateRedirectUrlObj,
+  updateCourseRerunData,
+  updateSavingStatus,
+  updateClipboardData,
+} from './slice';
+import {
+  createOrRerunCourse,
+  getOrganizations,
+  getCourseRerun,
+  updateClipboard,
+  getClipboard,
+} from './api';
+
+export function fetchOrganizationsQuery() {
+  return async (dispatch) => {
+    try {
+      const organizations = await getOrganizations();
+      dispatch(fetchOrganizations(organizations));
+      dispatch(updateLoadingStatuses({ organizationLoadingStatus: RequestStatus.SUCCESSFUL }));
+    } catch (error) {
+      dispatch(updateLoadingStatuses({ organizationLoadingStatus: RequestStatus.FAILED }));
+    }
+  };
+}
+
+export function fetchCourseRerunQuery(courseId) {
+  return async (dispatch) => {
+    try {
+      const courseRerun = await getCourseRerun(courseId);
+      dispatch(updateCourseRerunData(courseRerun));
+      dispatch(updateLoadingStatuses({ courseRerunLoadingStatus: RequestStatus.SUCCESSFUL }));
+    } catch (error) {
+      dispatch(updateLoadingStatuses({ courseRerunLoadingStatus: RequestStatus.FAILED }));
+    }
+  };
+}
+
+export function updateCreateOrRerunCourseQuery(courseData) {
+  return async (dispatch) => {
+    dispatch(updateSavingStatus({ status: RequestStatus.PENDING }));
+
+    try {
+      const response = await createOrRerunCourse(courseData);
+      dispatch(updateRedirectUrlObj('url' in response ? response : {}));
+      dispatch(updatePostErrors('errMsg' in response ? response : {}));
+      dispatch(updateSavingStatus({ status: RequestStatus.SUCCESSFUL }));
+      return true;
+    } catch (error) {
+      dispatch(updateSavingStatus({ status: RequestStatus.FAILED }));
+      return false;
+    }
+  };
+}
+
+export function copyToClipboard(usageKey) {
+  const POLL_INTERVAL_MS = 1000; // Timeout duration for polling in milliseconds
+
+  return async (dispatch) => {
+    dispatch(showProcessingNotification(NOTIFICATION_MESSAGES.copying));
+    dispatch(updateSavingStatus({ status: RequestStatus.PENDING }));
+
+    try {
+      let clipboardData = await updateClipboard(usageKey);
+
+      while (clipboardData.content?.status === CLIPBOARD_STATUS.loading) {
+        // eslint-disable-next-line no-await-in-loop,no-promise-executor-return
+        await new Promise((resolve) => setTimeout(resolve, POLL_INTERVAL_MS));
+        clipboardData = await getClipboard(); // eslint-disable-line no-await-in-loop
+      }
+
+      if (clipboardData.content?.status === CLIPBOARD_STATUS.ready) {
+        dispatch(updateClipboardData(clipboardData));
+        dispatch(updateSavingStatus({ status: RequestStatus.SUCCESSFUL }));
+      } else {
+        throw new Error(`Unexpected clipboard status "${clipboardData.content?.status}" in successful API response.`);
+      }
+    } catch (error) {
+      logError('Error copying to clipboard:', error);
+    } finally {
+      dispatch(hideProcessingNotification());
+    }
+  };
+}
diff --git a/src/generic/datepicker-control/DatepickerControl.jsx b/src/generic/datepicker-control/DatepickerControl.jsx
new file mode 100644
index 0000000000..91306f2f11
--- /dev/null
+++ b/src/generic/datepicker-control/DatepickerControl.jsx
@@ -0,0 +1,102 @@
+import React from 'react';
+import DatePicker from 'react-datepicker/dist';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { Form, Icon } from '@openedx/paragon';
+import { Calendar } from '@openedx/paragon/icons';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import { convertToDateFromString, convertToStringFromDate, isValidDate } from '../../utils';
+import { DATE_FORMAT, TIME_FORMAT } from '../../constants';
+import messages from './messages';
+
+export const DATEPICKER_TYPES = {
+  date: 'date',
+  time: 'time',
+};
+
+const DatepickerControl = ({
+  type,
+  label,
+  value,
+  showUTC,
+  readonly,
+  helpText,
+  isInvalid,
+  controlName,
+  onChange,
+}) => {
+  const intl = useIntl();
+  const formattedDate = convertToDateFromString(value);
+  const inputFormat = {
+    [DATEPICKER_TYPES.date]: DATE_FORMAT,
+    [DATEPICKER_TYPES.time]: TIME_FORMAT,
+  };
+
+  return (
+    <Form.Group className="form-group-custom datepicker-custom">
+      <Form.Label className="d-flex justify-content-between">
+        {label}
+        {showUTC && (
+          <span className="h6 font-weight-normal text-gray-500 mb-0">
+            ({intl.formatMessage(messages.datepickerUTC)})
+          </span>
+        )}
+      </Form.Label>
+      <div className="position-relative">
+        {type === DATEPICKER_TYPES.date && !readonly && (
+          <Icon
+            src={Calendar}
+            className="datepicker-custom-control-icon"
+            alt={intl.formatMessage(messages.calendarAltText)}
+          />
+        )}
+        <DatePicker
+          name={controlName}
+          selected={formattedDate}
+          disabled={readonly}
+          dateFormat={inputFormat[type]}
+          timeFormat={inputFormat[type]}
+          className={classNames('datepicker-custom-control', {
+            'datepicker-custom-control_readonly': readonly,
+            'datepicker-custom-control_isInvalid': isInvalid,
+          })}
+          autoComplete="off"
+          selectsStart
+          showTimeSelect={type === DATEPICKER_TYPES.time}
+          showTimeSelectOnly={type === DATEPICKER_TYPES.time}
+          placeholderText={inputFormat[type].toLocaleUpperCase()}
+          showPopperArrow={false}
+          onChange={(date) => {
+            if (isValidDate(date)) {
+              onChange(convertToStringFromDate(date));
+            }
+          }}
+        />
+      </div>
+      {helpText && <Form.Control.Feedback>{helpText}</Form.Control.Feedback>}
+    </Form.Group>
+  );
+};
+
+DatepickerControl.defaultProps = {
+  helpText: '',
+  showUTC: false,
+  value: '',
+  readonly: false,
+  isInvalid: false,
+};
+
+DatepickerControl.propTypes = {
+  type: PropTypes.oneOf(Object.values(DATEPICKER_TYPES)).isRequired,
+  value: PropTypes.string,
+  label: PropTypes.string.isRequired,
+  showUTC: PropTypes.bool,
+  helpText: PropTypes.string,
+  readonly: PropTypes.bool,
+  isInvalid: PropTypes.bool,
+  controlName: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+};
+
+export default DatepickerControl;
diff --git a/src/generic/datepicker-control/DatepickerControl.test.jsx b/src/generic/datepicker-control/DatepickerControl.test.jsx
new file mode 100644
index 0000000000..509fc0cf8b
--- /dev/null
+++ b/src/generic/datepicker-control/DatepickerControl.test.jsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import { convertToStringFromDate } from '../../utils';
+import { DatepickerControl, DATEPICKER_TYPES } from '.';
+import messages from './messages';
+import { DATE_FORMAT } from '../../constants';
+
+describe('<DatepickerControl />', () => {
+  const onChangeMock = jest.fn();
+  const RootWrapper = (props) => (
+    <IntlProvider locale="en">
+      <DatepickerControl {...props} />
+    </IntlProvider>
+  );
+
+  const props = {
+    intl: {},
+    type: DATEPICKER_TYPES.date,
+    label: 'fooLabel',
+    value: '',
+    showUTC: false,
+    readonly: false,
+    helpText: 'barHelpText',
+    isInvalid: false,
+    controlName: 'fooControlName',
+    onChange: onChangeMock,
+  };
+
+  it('renders without crashing', () => {
+    const { getByText, queryAllByText, getByPlaceholderText } = render(
+      <RootWrapper {...props} />,
+    );
+    expect(getByText(props.label)).toBeInTheDocument();
+    expect(getByText(props.helpText)).toBeInTheDocument();
+    expect(queryAllByText(messages.datepickerUTC.defaultMessage).length).toBe(0);
+    expect(
+      getByPlaceholderText(DATE_FORMAT.toLocaleUpperCase()),
+    ).toBeInTheDocument();
+  });
+
+  it('calls onChange on datepicker input change', () => {
+    const { getByPlaceholderText } = render(<RootWrapper {...props} />);
+    const input = getByPlaceholderText(DATE_FORMAT.toLocaleUpperCase());
+    fireEvent.change(input, { target: { value: '06/16/2023' } });
+    expect(onChangeMock).toHaveBeenCalledWith(
+      convertToStringFromDate('06/16/2023'),
+    );
+  });
+});
diff --git a/src/generic/datepicker-control/index.js b/src/generic/datepicker-control/index.js
new file mode 100644
index 0000000000..4ebfef2cc6
--- /dev/null
+++ b/src/generic/datepicker-control/index.js
@@ -0,0 +1,2 @@
+export { default as DatepickerControl } from './DatepickerControl';
+export { DATEPICKER_TYPES } from './DatepickerControl';
diff --git a/src/generic/datepicker-control/messages.js b/src/generic/datepicker-control/messages.js
new file mode 100644
index 0000000000..b6139f7b57
--- /dev/null
+++ b/src/generic/datepicker-control/messages.js
@@ -0,0 +1,14 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  calendarAltText: {
+    id: 'course-authoring.schedule.schedule-section.alt-text',
+    defaultMessage: 'Calendar for datepicker input',
+  },
+  datepickerUTC: {
+    id: 'course-authoring.schedule.schedule-section.datepicker.utc',
+    defaultMessage: 'UTC',
+  },
+});
+
+export default messages;
diff --git a/src/generic/delete-modal/DeleteModal.jsx b/src/generic/delete-modal/DeleteModal.jsx
new file mode 100644
index 0000000000..3384c0f3bc
--- /dev/null
+++ b/src/generic/delete-modal/DeleteModal.jsx
@@ -0,0 +1,88 @@
+import PropTypes from 'prop-types';
+import {
+  ActionRow,
+  Button,
+  AlertModal,
+} from '@openedx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import messages from './messages';
+import LoadingButton from '../loading-button';
+
+const DeleteModal = ({
+  category,
+  isOpen,
+  close,
+  onDeleteSubmit,
+  title,
+  description,
+  variant,
+  btnLabel,
+  icon,
+}) => {
+  const intl = useIntl();
+
+  const modalTitle = title || intl.formatMessage(messages.title, { category });
+  const modalDescription = description || intl.formatMessage(messages.description, { category });
+  const defaultBtnLabel = btnLabel || intl.formatMessage(messages.deleteButton);
+
+  return (
+    <AlertModal
+      title={modalTitle}
+      isOpen={isOpen}
+      onClose={close}
+      variant={variant}
+      icon={icon}
+      footerNode={(
+        <ActionRow>
+          <Button
+            variant="tertiary"
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              close();
+            }}
+          >
+            {intl.formatMessage(messages.cancelButton)}
+          </Button>
+          <LoadingButton
+            onClick={async (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              await onDeleteSubmit();
+            }}
+            label={defaultBtnLabel}
+          />
+        </ActionRow>
+      )}
+    >
+      <p>{modalDescription}</p>
+    </AlertModal>
+  );
+};
+
+DeleteModal.defaultProps = {
+  category: '',
+  title: '',
+  description: '',
+  variant: 'default',
+  btnLabel: '',
+  icon: null,
+};
+
+DeleteModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  close: PropTypes.func.isRequired,
+  category: PropTypes.string,
+  onDeleteSubmit: PropTypes.func.isRequired,
+  title: PropTypes.string,
+  description: PropTypes.oneOfType([
+    PropTypes.element,
+    PropTypes.string,
+  ]),
+  variant: PropTypes.string,
+  btnLabel: PropTypes.string,
+  icon: PropTypes.elementType,
+};
+
+export default DeleteModal;
diff --git a/src/generic/delete-modal/DeleteModal.test.jsx b/src/generic/delete-modal/DeleteModal.test.jsx
new file mode 100644
index 0000000000..3c339a84ea
--- /dev/null
+++ b/src/generic/delete-modal/DeleteModal.test.jsx
@@ -0,0 +1,96 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { initializeMockApp } from '@edx/frontend-platform';
+import { AppProvider } from '@edx/frontend-platform/react';
+import userEvent from '@testing-library/user-event';
+
+import initializeStore from '../../store';
+import DeleteModal from './DeleteModal';
+import messages from './messages';
+
+let store;
+
+const onDeleteSubmitMock = jest.fn();
+const closeMock = jest.fn();
+
+jest.mock('react-redux', () => ({
+  ...jest.requireActual('react-redux'),
+  useSelector: jest.fn(),
+}));
+
+jest.mock('@edx/frontend-platform/i18n', () => ({
+  ...jest.requireActual('@edx/frontend-platform/i18n'),
+  useIntl: () => ({
+    formatMessage: (message) => message.defaultMessage,
+  }),
+}));
+
+const renderComponent = (props) => render(
+  <AppProvider store={store}>
+    <IntlProvider locale="en">
+      <DeleteModal
+        isOpen
+        close={closeMock}
+        category="Section"
+        onDeleteSubmit={onDeleteSubmitMock}
+        {...props}
+      />
+    </IntlProvider>,
+  </AppProvider>,
+);
+
+describe('<DeleteModal />', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+
+    store = initializeStore();
+  });
+
+  it('render DeleteModal component correctly', () => {
+    const { getByText, getByRole } = renderComponent();
+
+    expect(getByText(messages.title.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.description.defaultMessage)).toBeInTheDocument();
+    expect(getByRole('button', { name: messages.cancelButton.defaultMessage })).toBeInTheDocument();
+    expect(getByRole('button', { name: messages.deleteButton.defaultMessage })).toBeInTheDocument();
+  });
+
+  it('calls onDeleteSubmit function when the "Delete" button is clicked', () => {
+    const { getByRole } = renderComponent();
+
+    const okButton = getByRole('button', { name: messages.deleteButton.defaultMessage });
+    userEvent.click(okButton);
+    expect(onDeleteSubmitMock).toHaveBeenCalledTimes(1);
+  });
+
+  it('calls the close function when the "Cancel" button is clicked', () => {
+    const { getByRole } = renderComponent();
+
+    const cancelButton = getByRole('button', { name: messages.cancelButton.defaultMessage });
+    userEvent.click(cancelButton);
+    expect(closeMock).toHaveBeenCalledTimes(1);
+  });
+
+  it('render DeleteModal component with custom title and description correctly', () => {
+    const baseProps = {
+      title: 'Title',
+      description: 'Description',
+    };
+
+    const { getByText, queryByText, getByRole } = renderComponent(baseProps);
+    expect(queryByText(messages.title.defaultMessage)).not.toBeInTheDocument();
+    expect(queryByText(messages.description.defaultMessage)).not.toBeInTheDocument();
+    expect(getByText(baseProps.title)).toBeInTheDocument();
+    expect(getByText(baseProps.description)).toBeInTheDocument();
+    expect(getByRole('button', { name: messages.cancelButton.defaultMessage })).toBeInTheDocument();
+    expect(getByRole('button', { name: messages.deleteButton.defaultMessage })).toBeInTheDocument();
+  });
+});
diff --git a/src/generic/delete-modal/messages.js b/src/generic/delete-modal/messages.js
new file mode 100644
index 0000000000..c586a05991
--- /dev/null
+++ b/src/generic/delete-modal/messages.js
@@ -0,0 +1,26 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  title: {
+    id: 'course-authoring.course-outline.delete-modal.title',
+    defaultMessage: 'Delete this {category}?',
+  },
+  description: {
+    id: 'course-authoring.course-outline.delete-modal.description',
+    defaultMessage: 'Deleting this {category} is permanent and cannot be undone.',
+  },
+  deleteButton: {
+    id: 'course-authoring.course-outline.delete-modal.button.delete',
+    defaultMessage: 'Delete',
+  },
+  pendingDeleteButton: {
+    id: 'course-authoring.course-outline.delete-modal.button.pending-delete',
+    defaultMessage: 'Deleting',
+  },
+  cancelButton: {
+    id: 'course-authoring.course-outline.delete-modal.button.cancel',
+    defaultMessage: 'Cancel',
+  },
+});
+
+export default messages;
diff --git a/src/generic/divider/Divider.jsx b/src/generic/divider/Divider.jsx
new file mode 100644
index 0000000000..6b75eff3df
--- /dev/null
+++ b/src/generic/divider/Divider.jsx
@@ -0,0 +1,16 @@
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+const Divider = ({ className, ...props }) => (
+  <div className={classNames('divider', className)} {...props} />
+);
+
+Divider.propTypes = {
+  className: PropTypes.string,
+};
+
+Divider.defaultProps = {
+  className: undefined,
+};
+
+export default Divider;
diff --git a/src/generic/divider/Divider.scss b/src/generic/divider/Divider.scss
new file mode 100644
index 0000000000..b78206689d
--- /dev/null
+++ b/src/generic/divider/Divider.scss
@@ -0,0 +1,5 @@
+.divider {
+  border-top: $border-width solid $light-400;
+  height: 0;
+  margin: $spacer map-get($spacers, 0);
+}
diff --git a/src/generic/divider/index.jsx b/src/generic/divider/index.jsx
new file mode 100644
index 0000000000..d84c86b09d
--- /dev/null
+++ b/src/generic/divider/index.jsx
@@ -0,0 +1 @@
+export { default as Divider } from './Divider';
diff --git a/src/generic/drag-helper/DragContextProvider.jsx b/src/generic/drag-helper/DragContextProvider.jsx
new file mode 100644
index 0000000000..48a497d7ef
--- /dev/null
+++ b/src/generic/drag-helper/DragContextProvider.jsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export const DragContext = React.createContext({ activeId: '', overId: '', children: undefined });
+
+const DragContextProvider = ({ activeId, overId, children }) => {
+  const contextValue = React.useMemo(() => ({
+    activeId,
+    overId,
+  }), [activeId, overId]);
+  return (
+    <DragContext.Provider
+      value={contextValue}
+    >
+      {children}
+    </DragContext.Provider>
+  );
+};
+
+DragContextProvider.defaultProps = {
+  activeId: '',
+  overId: '',
+};
+
+DragContextProvider.propTypes = {
+  activeId: PropTypes.string,
+  overId: PropTypes.string,
+  children: PropTypes.node.isRequired,
+};
+
+export default DragContextProvider;
diff --git a/src/generic/drag-helper/DraggableList.jsx b/src/generic/drag-helper/DraggableList.jsx
new file mode 100644
index 0000000000..919f62cf9b
--- /dev/null
+++ b/src/generic/drag-helper/DraggableList.jsx
@@ -0,0 +1,362 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import {
+  DndContext,
+  closestCorners,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core';
+import {
+  arrayMove,
+  sortableKeyboardCoordinates,
+} from '@dnd-kit/sortable';
+import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
+
+import DragContextProvider from './DragContextProvider';
+import { COURSE_BLOCK_NAMES } from '../../constants';
+import {
+  moveSubsectionOver,
+  moveUnitOver,
+  moveSubsection,
+  moveUnit,
+  dragHelpers,
+} from './utils';
+
+const DraggableList = ({
+  items,
+  setSections,
+  restoreSectionList,
+  handleSectionDragAndDrop,
+  handleSubsectionDragAndDrop,
+  handleUnitDragAndDrop,
+  children,
+}) => {
+  const prevContainerInfo = React.useRef();
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    }),
+  );
+  const [activeId, setActiveId] = React.useState();
+  const [currentOverId, setCurrentOverId] = React.useState();
+
+  const findItemInfo = (id) => {
+    // search id in sections
+    const sectionIndex = items.findIndex((section) => section.id === id);
+    if (sectionIndex !== -1) {
+      return {
+        index: sectionIndex,
+        item: items[sectionIndex],
+        category: COURSE_BLOCK_NAMES.chapter.id,
+        parent: 'root',
+      };
+    }
+
+    // search id in subsections
+    for (let index = 0; index < items.length; index++) {
+      const section = items[index];
+      const subsectionIndex = section.childInfo.children.findIndex((subsection) => subsection.id === id);
+      if (subsectionIndex !== -1) {
+        return {
+          index: subsectionIndex,
+          item: section.childInfo.children[subsectionIndex],
+          category: COURSE_BLOCK_NAMES.sequential.id,
+          parentIndex: index,
+          parent: section,
+        };
+      }
+    }
+
+    // search id in units
+    for (let index = 0; index < items.length; index++) {
+      const section = items[index];
+      for (let subIndex = 0; subIndex < section.childInfo.children.length; subIndex++) {
+        const subsection = section.childInfo.children[subIndex];
+        const unitIndex = subsection.childInfo.children.findIndex((unit) => unit.id === id);
+        if (unitIndex !== -1) {
+          return {
+            index: unitIndex,
+            item: subsection.childInfo.children[unitIndex],
+            category: COURSE_BLOCK_NAMES.vertical.id,
+            parentIndex: subIndex,
+            parent: subsection,
+            grandParentIndex: index,
+            grandParent: section,
+          };
+        }
+      }
+    }
+    return null;
+  };
+
+  // For reasons unknown, onDragEnd is not being triggered by dnd-kit while
+  // testing drag over functions. The main functions responsible to move units
+  // & subsections across parents are already tested as part of move blocks by
+  // index in CourseOutline.test.jsx, just these functions which determine the
+  // new index and parent are ignored.
+  // See https://github.com/openedx/frontend-app-course-authoring/pull/859#discussion_r1519199622
+  // for more details.
+  /* istanbul ignore next */
+  const subsectionDragOver = (active, over, activeInfo, overInfo) => {
+    if (
+      activeInfo.parent.id === overInfo.parent.id
+      || activeInfo.parent.id === overInfo.item.id
+      || (activeInfo.category === overInfo.category && !overInfo.parent.actions.childAddable)
+      || (activeInfo.parent.category === overInfo.category && !overInfo.item.actions.childAddable)
+    ) {
+      return;
+    }
+    // Find the new index for the item
+    let overSectionIndex;
+    let newIndex;
+    if (overInfo.category === COURSE_BLOCK_NAMES.chapter.id) {
+      // We're at the root droppable of a container
+      newIndex = overInfo.item.childInfo.children.length + 1;
+      overSectionIndex = overInfo.index;
+      setCurrentOverId(overInfo.item.id);
+    } else {
+      const modifier = dragHelpers.isBelowOverItem(active, over) ? 1 : 0;
+      newIndex = overInfo.index >= 0 ? overInfo.index + modifier : overInfo.item.childInfo.children.length + 1;
+      overSectionIndex = overInfo.parentIndex;
+      setCurrentOverId(overInfo.parent.id);
+    }
+
+    setSections((prev) => {
+      const [prevCopy] = moveSubsectionOver(
+        [...prev],
+        activeInfo.parentIndex,
+        activeInfo.index,
+        overSectionIndex,
+        newIndex,
+      );
+      return prevCopy;
+    });
+    if (prevContainerInfo.current === null || prevContainerInfo.current === undefined) {
+      prevContainerInfo.current = activeInfo.parent.id;
+    }
+  };
+
+  /* istanbul ignore next */
+  const unitDragOver = (active, over, activeInfo, overInfo) => {
+    if (
+      activeInfo.parent.id === overInfo.parent.id
+      || activeInfo.parent.id === overInfo.item.id
+      || (activeInfo.category === overInfo.category && !overInfo.parent.actions.childAddable)
+      || (activeInfo.parent.category === overInfo.category && !overInfo.item.actions.childAddable)
+    ) {
+      return;
+    }
+    let overSubsectionIndex;
+    let overSectionIndex;
+    // Find the indexes for the items
+    let newIndex;
+    if (overInfo.category === COURSE_BLOCK_NAMES.sequential.id) {
+      // We're at the root droppable of a container
+      newIndex = overInfo.item.childInfo.children.length + 1;
+      overSubsectionIndex = overInfo.index;
+      overSectionIndex = overInfo.parentIndex;
+      setCurrentOverId(overInfo.item.id);
+    } else {
+      const modifier = dragHelpers.isBelowOverItem(active, over) ? 1 : 0;
+      newIndex = overInfo.index >= 0 ? overInfo.index + modifier : overInfo.item.childInfo.children.length + 1;
+      overSubsectionIndex = overInfo.parentIndex;
+      overSectionIndex = overInfo.grandParentIndex;
+      setCurrentOverId(overInfo.parent.id);
+    }
+
+    setSections((prev) => {
+      const [prevCopy] = moveUnitOver(
+        [...prev],
+        activeInfo.grandParentIndex,
+        activeInfo.parentIndex,
+        activeInfo.index,
+        overSectionIndex,
+        overSubsectionIndex,
+        newIndex,
+      );
+      return prevCopy;
+    });
+    if (prevContainerInfo.current === null || prevContainerInfo.current === undefined) {
+      prevContainerInfo.current = activeInfo.grandParent.id;
+    }
+  };
+
+  /* istanbul ignore next */
+  const handleDragOver = (event) => {
+    const { active, over } = event;
+    if (!active || !over) {
+      return;
+    }
+    const { id } = active;
+    const { id: overId } = over;
+
+    // Find the containers
+    const activeInfo = findItemInfo(id);
+    const overInfo = findItemInfo(overId);
+    if (!activeInfo || !overInfo) {
+      return;
+    }
+    switch (activeInfo.category) {
+      case COURSE_BLOCK_NAMES.sequential.id:
+        subsectionDragOver(active, over, activeInfo, overInfo);
+        break;
+      case COURSE_BLOCK_NAMES.vertical.id:
+        unitDragOver(active, over, activeInfo, overInfo);
+        break;
+      default:
+        break;
+    }
+  };
+
+  const handleDragEnd = (event) => {
+    const { active, over } = event;
+    if (!active || !over) {
+      return;
+    }
+    setActiveId(null);
+    setCurrentOverId(null);
+    const { id } = active;
+    const { id: overId } = over;
+
+    const activeInfo = findItemInfo(id);
+    const overInfo = findItemInfo(overId);
+    if (!activeInfo || !overInfo) {
+      return;
+    }
+
+    if (
+      activeInfo.category !== overInfo.category
+      || (activeInfo.parent !== 'root' && activeInfo.parentIndex !== overInfo.parentIndex)
+    ) {
+      return;
+    }
+
+    if (activeInfo.index !== overInfo.index || prevContainerInfo.current) {
+      switch (activeInfo.category) {
+        case COURSE_BLOCK_NAMES.chapter.id:
+          setSections((prev) => {
+            const result = arrayMove(prev, activeInfo.index, overInfo.index);
+            handleSectionDragAndDrop(result.map(section => section.id), restoreSectionList);
+            return result;
+          });
+          break;
+        case COURSE_BLOCK_NAMES.sequential.id:
+          setSections((prev) => {
+            const [prevCopy, result] = moveSubsection(
+              [...prev],
+              activeInfo.parentIndex,
+              activeInfo.index,
+              overInfo.index,
+            );
+            handleSubsectionDragAndDrop(
+              activeInfo.parent.id,
+              prevContainerInfo.current,
+              result.map(subsection => subsection.id),
+              restoreSectionList,
+            );
+            return prevCopy;
+          });
+          break;
+        case COURSE_BLOCK_NAMES.vertical.id:
+          setSections((prev) => {
+            const [prevCopy, result] = moveUnit(
+              [...prev],
+              activeInfo.grandParentIndex,
+              activeInfo.parentIndex,
+              activeInfo.index,
+              overInfo.index,
+            );
+            handleUnitDragAndDrop(
+              activeInfo.grandParent.id,
+              prevContainerInfo.current,
+              activeInfo.parent.id,
+              result.map(unit => unit.id),
+              restoreSectionList,
+            );
+            return prevCopy;
+          });
+          break;
+        default:
+          break;
+      }
+      prevContainerInfo.current = null;
+    }
+  };
+
+  const handleDragStart = (event) => {
+    const { active } = event;
+    const { id } = active;
+
+    setActiveId(id);
+  };
+
+  const customClosestCorners = ({
+    active, droppableContainers, droppableRects, ...args
+  }) => {
+    const activeCategory = active.data?.current?.category;
+    const filteredContainers = droppableContainers.filter(
+      (container) => {
+        switch (activeCategory) {
+          case COURSE_BLOCK_NAMES.chapter.id:
+            return container.data?.current?.category === activeCategory;
+          case COURSE_BLOCK_NAMES.sequential.id:
+            return [activeCategory, COURSE_BLOCK_NAMES.chapter.id].includes(container.data?.current?.category);
+          case COURSE_BLOCK_NAMES.vertical.id:
+            return [activeCategory, COURSE_BLOCK_NAMES.sequential.id].includes(container.data?.current?.category);
+          default:
+            return true;
+        }
+      },
+    );
+    return closestCorners({
+      active, droppableContainers: filteredContainers, droppableRects, ...args,
+    });
+  };
+
+  return (
+    <DndContext
+      modifiers={[restrictToVerticalAxis]}
+      sensors={sensors}
+      collisionDetection={customClosestCorners}
+      onDragOver={handleDragOver}
+      onDragStart={handleDragStart}
+      onDragEnd={handleDragEnd}
+    >
+      <DragContextProvider activeId={activeId} overId={currentOverId}>
+        {children}
+      </DragContextProvider>
+    </DndContext>
+  );
+};
+
+DraggableList.propTypes = {
+  items: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    childInfo: PropTypes.shape({
+      children: PropTypes.arrayOf(
+        PropTypes.shape({
+          id: PropTypes.string.isRequired,
+          childInfo: PropTypes.shape({
+            children: PropTypes.arrayOf(
+              PropTypes.shape({
+                id: PropTypes.string.isRequired,
+              }),
+            ).isRequired,
+          }).isRequired,
+        }),
+      ).isRequired,
+    }).isRequired,
+  })).isRequired,
+  setSections: PropTypes.func.isRequired,
+  restoreSectionList: PropTypes.func.isRequired,
+  handleSectionDragAndDrop: PropTypes.func.isRequired,
+  handleSubsectionDragAndDrop: PropTypes.func.isRequired,
+  handleUnitDragAndDrop: PropTypes.func.isRequired,
+  children: PropTypes.node.isRequired,
+};
+
+export default DraggableList;
diff --git a/src/generic/drag-helper/SortableItem.jsx b/src/generic/drag-helper/SortableItem.jsx
new file mode 100644
index 0000000000..ffea67a849
--- /dev/null
+++ b/src/generic/drag-helper/SortableItem.jsx
@@ -0,0 +1,101 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { intlShape, injectIntl } from '@edx/frontend-platform/i18n';
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import {
+  Col, Icon, Row,
+} from '@openedx/paragon';
+import { DragIndicator } from '@openedx/paragon/icons';
+
+import messages from './messages';
+
+const SortableItem = ({
+  id,
+  category,
+  isDraggable,
+  isDroppable,
+  componentStyle,
+  children,
+  // injected
+  intl,
+}) => {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+    setActivatorNodeRef,
+  } = useSortable({
+    id,
+    data: {
+      category,
+    },
+    disabled: {
+      draggable: !isDraggable,
+      droppable: !isDroppable,
+    },
+    animateLayoutChanges: () => false,
+  });
+
+  const style = {
+    position: 'relative',
+    zIndex: isDragging ? 200 : undefined,
+    transform: CSS.Translate.toString(transform),
+    transition,
+    background: 'white',
+    padding: '1rem 1.5rem',
+    marginBottom: '1.5rem',
+    borderRadius: '0.35rem',
+    boxShadow: '0 0 .125rem rgba(0, 0, 0, .15), 0 0 .25rem rgba(0, 0, 0, .15)',
+    ...componentStyle,
+  };
+
+  return (
+    <Row
+      ref={setNodeRef}
+      style={style}
+      className="mx-0"
+    >
+      <Col className="extend-margin px-0">
+        {children}
+      </Col>
+      {isDraggable && (
+        <button
+          ref={setActivatorNodeRef}
+          key="drag-to-reorder-icon"
+          aria-label={intl.formatMessage(messages.tooltipContent)}
+          className="btn-icon btn-icon-secondary btn-icon-md"
+          type="button"
+          {...attributes}
+          {...listeners}
+        >
+          <span className="btn-icon__icon-container">
+            <Icon src={DragIndicator} />
+          </span>
+        </button>
+      )}
+    </Row>
+  );
+};
+
+SortableItem.defaultProps = {
+  componentStyle: null,
+  isDroppable: true,
+  isDraggable: true,
+};
+
+SortableItem.propTypes = {
+  id: PropTypes.string.isRequired,
+  category: PropTypes.string.isRequired,
+  isDroppable: PropTypes.bool,
+  isDraggable: PropTypes.bool,
+  children: PropTypes.node.isRequired,
+  componentStyle: PropTypes.shape({}),
+  // injected
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(SortableItem);
diff --git a/src/generic/drag-helper/SortableItem.scss b/src/generic/drag-helper/SortableItem.scss
new file mode 100644
index 0000000000..00393c48f1
--- /dev/null
+++ b/src/generic/drag-helper/SortableItem.scss
@@ -0,0 +1,5 @@
+.extend-margin {
+  .item-children {
+    margin-right: -2.75rem;
+  }
+}
diff --git a/src/generic/drag-helper/messages.js b/src/generic/drag-helper/messages.js
new file mode 100644
index 0000000000..3a7263280b
--- /dev/null
+++ b/src/generic/drag-helper/messages.js
@@ -0,0 +1,11 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  tooltipContent: {
+    id: 'authoring.draggableList.tooltip.content',
+    defaultMessage: 'Drag to reorder',
+    description: 'Tooltip content for drag indicator icon',
+  },
+});
+
+export default messages;
diff --git a/src/generic/drag-helper/utils.js b/src/generic/drag-helper/utils.js
new file mode 100644
index 0000000000..efe1d7d956
--- /dev/null
+++ b/src/generic/drag-helper/utils.js
@@ -0,0 +1,331 @@
+import { arrayMove } from '@dnd-kit/sortable';
+
+export const dragHelpers = {
+  copyBlockChildren: (block) => {
+    // eslint-disable-next-line no-param-reassign
+    block.childInfo = { ...block.childInfo };
+    // eslint-disable-next-line no-param-reassign
+    block.childInfo.children = [...block.childInfo.children];
+    return block;
+  },
+  setBlockChildren: (block, children) => {
+    // eslint-disable-next-line no-param-reassign
+    block.childInfo.children = children;
+    return block;
+  },
+  setBlockChild: (block, child, id) => {
+    // eslint-disable-next-line no-param-reassign
+    block.childInfo.children[id] = child;
+    return block;
+  },
+  insertChild: (block, child, index) => {
+    // eslint-disable-next-line no-param-reassign
+    block.childInfo.children = [
+      ...block.childInfo.children.slice(0, index),
+      child,
+      ...block.childInfo.children.slice(index, block.childInfo.children.length),
+    ];
+    return block;
+  },
+  isBelowOverItem: (active, over) => over
+      && active.rect.current.translated
+      && active.rect.current.translated.top
+        > over.rect.top + over.rect.height,
+};
+
+export const moveSubsectionOver = (
+  prevCopy,
+  activeSectionIdx,
+  activeSubsectionIdx,
+  overSectionIdx,
+  newIndex,
+) => {
+  let activeSection = dragHelpers.copyBlockChildren({ ...prevCopy[activeSectionIdx] });
+  let overSection = dragHelpers.copyBlockChildren({ ...prevCopy[overSectionIdx] });
+  const subsection = activeSection.childInfo.children[activeSubsectionIdx];
+
+  overSection = dragHelpers.insertChild(overSection, subsection, newIndex);
+
+  activeSection = dragHelpers.setBlockChildren(
+    activeSection,
+    activeSection.childInfo.children.filter((item) => item.id !== subsection.id),
+  );
+
+  // eslint-disable-next-line no-param-reassign
+  prevCopy[activeSectionIdx] = activeSection;
+  // eslint-disable-next-line no-param-reassign
+  prevCopy[overSectionIdx] = overSection;
+  return [prevCopy, overSection.childInfo.children];
+};
+
+export const moveUnitOver = (
+  prevCopy,
+  activeSectionIdx,
+  activeSubsectionIdx,
+  activeUnitIdx,
+  overSectionIdx,
+  overSubsectionIdx,
+  newIndex,
+) => {
+  const activeSection = dragHelpers.copyBlockChildren({ ...prevCopy[activeSectionIdx] });
+  let activeSubsection = dragHelpers.copyBlockChildren(
+    { ...activeSection.childInfo.children[activeSubsectionIdx] },
+  );
+
+  let overSection = { ...prevCopy[overSectionIdx] };
+  if (overSection.id === activeSection.id) {
+    overSection = activeSection;
+  }
+
+  overSection = dragHelpers.copyBlockChildren(overSection);
+  let overSubsection = dragHelpers.copyBlockChildren(
+    { ...overSection.childInfo.children[overSubsectionIdx] },
+  );
+
+  const unit = activeSubsection.childInfo.children[activeUnitIdx];
+  overSubsection = dragHelpers.insertChild(overSubsection, unit, newIndex);
+  overSection = dragHelpers.setBlockChild(overSection, overSubsection, overSubsectionIdx);
+
+  activeSubsection = dragHelpers.setBlockChildren(
+    activeSubsection,
+    activeSubsection.childInfo.children.filter((item) => item.id !== unit.id),
+  );
+
+  // eslint-disable-next-line no-param-reassign
+  prevCopy[activeSectionIdx] = dragHelpers.setBlockChild(activeSection, activeSubsection, activeSubsectionIdx);
+  // eslint-disable-next-line no-param-reassign
+  prevCopy[overSectionIdx] = overSection;
+  return [prevCopy, overSubsection.childInfo.children];
+};
+
+export const moveSubsection = (
+  prevCopy,
+  sectionIdx,
+  currentIdx,
+  newIdx,
+) => {
+  let section = dragHelpers.copyBlockChildren({ ...prevCopy[sectionIdx] });
+
+  const result = arrayMove(section.childInfo.children, currentIdx, newIdx);
+  section = dragHelpers.setBlockChildren(section, result);
+
+  // eslint-disable-next-line no-param-reassign
+  prevCopy[sectionIdx] = section;
+  return [prevCopy, result];
+};
+
+export const moveUnit = (
+  prevCopy,
+  sectionIdx,
+  subsectionIdx,
+  currentIdx,
+  newIdx,
+) => {
+  let section = dragHelpers.copyBlockChildren({ ...prevCopy[sectionIdx] });
+  let subsection = dragHelpers.copyBlockChildren({ ...section.childInfo.children[subsectionIdx] });
+
+  const result = arrayMove(subsection.childInfo.children, currentIdx, newIdx);
+  subsection = dragHelpers.setBlockChildren(subsection, result);
+  section = dragHelpers.setBlockChild(section, subsection, subsectionIdx);
+
+  // eslint-disable-next-line no-param-reassign
+  prevCopy[sectionIdx] = section;
+  return [prevCopy, result];
+};
+
+/**
+ * Check if section can be moved by given step.
+ * Inner function returns false if the new index after moving by given step
+ * is out of bounds of item length.
+ * If it is within bounds, returns draggable flag of the item in the new index.
+ * This helps us avoid moving the item to a position of unmovable item.
+ * @param {Array} items
+ * @returns {(id, step) => bool}
+ */
+export const canMoveSection = (sections) => (id, step) => {
+  const newId = id + step;
+  const indexCheck = newId >= 0 && newId < sections.length;
+  if (!indexCheck) {
+    return false;
+  }
+  const newItem = sections[newId];
+  return newItem.actions.draggable;
+};
+
+export const possibleSubsectionMoves = (sections, sectionIndex, section, subsections) => (index, step) => {
+  if (!subsections[index]?.actions?.draggable) {
+    return {};
+  }
+  if ((step === -1 && index >= 1) || (step === 1 && subsections.length - index >= 2)) {
+    // move subsection inside its own parent section
+    return {
+      fn: moveSubsection,
+      args: [
+        sections,
+        sectionIndex,
+        index,
+        index + step,
+      ],
+      sectionId: section.id,
+    };
+  } if (step === -1 && index === 0 && sectionIndex > 0) {
+    // move subsection to last position of previous section
+    if (!sections[sectionIndex + step]?.actions?.childAddable) {
+      // return if previous section doesn't allow adding subsections
+      return {};
+    }
+    return {
+      fn: moveSubsectionOver,
+      args: [
+        sections,
+        sectionIndex,
+        index,
+        sectionIndex + step,
+        sections[sectionIndex + step].childInfo.children.length + 1,
+      ],
+      sectionId: sections[sectionIndex + step].id,
+    };
+  } if (step === 1 && index === subsections.length - 1 && sectionIndex < sections.length - 1) {
+    // move subsection to first position of next section
+    if (!sections[sectionIndex + step]?.actions?.childAddable) {
+      // return if next section doesn't allow adding subsections
+      return {};
+    }
+    return {
+      fn: moveSubsectionOver,
+      args: [
+        sections,
+        sectionIndex,
+        index,
+        sectionIndex + step,
+        0,
+      ],
+      sectionId: sections[sectionIndex + step].id,
+    };
+  }
+  return {};
+};
+
+export const possibleUnitMoves = (
+  sections,
+  sectionIndex,
+  subsectionIndex,
+  section,
+  subsection,
+  units,
+) => (index, step) => {
+  if (!units[index].actions.draggable) {
+    return {};
+  }
+  if ((step === -1 && index >= 1) || (step === 1 && units.length - index >= 2)) {
+    return {
+      fn: moveUnit,
+      args: [
+        sections,
+        sectionIndex,
+        subsectionIndex,
+        index,
+        index + step,
+      ],
+      sectionId: section.id,
+      subsectionId: subsection.id,
+    };
+  } if (step === -1 && index === 0) {
+    if (subsectionIndex > 0) {
+      // move unit to last position of previous subsection inside same section.
+      if (!sections[sectionIndex].childInfo.children[subsectionIndex + step]?.actions?.childAddable) {
+        // return if previous subsection doesn't allow adding subsections
+        return {};
+      }
+      return {
+        fn: moveUnitOver,
+        args: [
+          sections,
+          sectionIndex,
+          subsectionIndex,
+          index,
+          sectionIndex,
+          subsectionIndex + step,
+          sections[sectionIndex].childInfo.children[subsectionIndex + step].childInfo.children.length + 1,
+        ],
+        sectionId: section.id,
+        subsectionId: sections[sectionIndex].childInfo.children[subsectionIndex + step].id,
+      };
+    } if (sectionIndex > 0) {
+      // move unit to last position of previous subsection inside previous section.
+      const newSectionIndex = sectionIndex + step;
+      if (sections[newSectionIndex].childInfo.children.length === 0) {
+        // return if previous section has no subsections.
+        return {};
+      }
+      const newSubsectionIndex = sections[newSectionIndex].childInfo.children.length - 1;
+      if (!sections[newSectionIndex].childInfo.children[newSubsectionIndex]?.actions?.childAddable) {
+        // return if previous subsection doesn't allow adding subsections
+        return {};
+      }
+      return {
+        fn: moveUnitOver,
+        args: [
+          sections,
+          sectionIndex,
+          subsectionIndex,
+          index,
+          newSectionIndex,
+          newSubsectionIndex,
+          sections[newSectionIndex].childInfo.children[newSubsectionIndex].childInfo.children.length + 1,
+        ],
+        sectionId: sections[newSectionIndex].id,
+        subsectionId: sections[newSectionIndex].childInfo.children[newSubsectionIndex].id,
+      };
+    }
+  } else if (step === 1 && index === units.length - 1) {
+    if (subsectionIndex < sections[sectionIndex].childInfo.children.length - 1) {
+      // move unit to first position of next subsection inside same section.
+      if (!sections[sectionIndex].childInfo.children[subsectionIndex + step]?.actions?.childAddable) {
+        // return if next subsection doesn't allow adding subsections
+        return {};
+      }
+      return {
+        fn: moveUnitOver,
+        args: [
+          sections,
+          sectionIndex,
+          subsectionIndex,
+          index,
+          sectionIndex,
+          subsectionIndex + step,
+          0,
+        ],
+        sectionId: section.id,
+        subsectionId: sections[sectionIndex].childInfo.children[subsectionIndex + step].id,
+      };
+    } if (sectionIndex < sections.length - 1) {
+      // move unit to first position of next subsection inside next section.
+      const newSectionIndex = sectionIndex + step;
+      if (sections[newSectionIndex].childInfo.children.length === 0) {
+        // return if next section has no subsections.
+        return {};
+      }
+      const newSubsectionIndex = 0;
+      if (!sections[newSectionIndex].childInfo.children[newSubsectionIndex]?.actions?.childAddable) {
+        // return if next subsection doesn't allow adding subsections
+        return {};
+      }
+      return {
+        fn: moveUnitOver,
+        args: [
+          sections,
+          sectionIndex,
+          subsectionIndex,
+          index,
+          newSectionIndex,
+          newSubsectionIndex,
+          0,
+        ],
+        sectionId: sections[newSectionIndex].id,
+        subsectionId: sections[newSectionIndex].childInfo.children[newSubsectionIndex].id,
+      };
+    }
+  }
+  return {};
+};
diff --git a/src/generic/help-sidebar/HelpSidebar.jsx b/src/generic/help-sidebar/HelpSidebar.jsx
new file mode 100644
index 0000000000..caa58e0006
--- /dev/null
+++ b/src/generic/help-sidebar/HelpSidebar.jsx
@@ -0,0 +1,135 @@
+import PropTypes from 'prop-types';
+import { useSelector } from 'react-redux';
+import { useLocation } from 'react-router-dom';
+import classNames from 'classnames';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { getConfig } from '@edx/frontend-platform';
+
+import { getWaffleFlags } from '../../data/selectors';
+import { otherLinkURLParams } from './constants';
+import messages from './messages';
+import HelpSidebarLink from './HelpSidebarLink';
+
+const HelpSidebar = ({
+  intl,
+  courseId,
+  showOtherSettings,
+  proctoredExamSettingsUrl,
+  children,
+  className,
+}) => {
+  const { pathname } = useLocation();
+  const {
+    grading,
+    courseTeam,
+    advancedSettings,
+    scheduleAndDetails,
+    groupConfigurations,
+  } = otherLinkURLParams;
+  const waffleFlags = useSelector(getWaffleFlags);
+
+  const showOtherLink = (params) => !pathname.includes(params);
+  const generateLegacyURL = (urlParameter) => {
+    const referObj = new URL(`${urlParameter}/${courseId}`, getConfig().STUDIO_BASE_URL);
+    return referObj.href;
+  };
+
+  const scheduleAndDetailsDestination = generateLegacyURL(scheduleAndDetails);
+  const gradingDestination = generateLegacyURL(grading);
+  const courseTeamDestination = generateLegacyURL(courseTeam);
+  const advancedSettingsDestination = generateLegacyURL(advancedSettings);
+  const groupConfigurationsDestination = generateLegacyURL(groupConfigurations);
+
+  return (
+    <aside className={classNames('help-sidebar', className)}>
+      <div className="help-sidebar-about">{children}</div>
+      {showOtherSettings && (
+        <>
+          <hr />
+          <div className="help-sidebar-other">
+            <h4 className="help-sidebar-other-title">
+              {intl.formatMessage(messages.sidebarTitleOther)}
+            </h4>
+            <nav
+              className="help-sidebar-other-links"
+              aria-label={intl.formatMessage(messages.sidebarTitleOther)}
+            >
+              <ul className="p-0 mb-0">
+                {showOtherLink(scheduleAndDetails) && (
+                  <HelpSidebarLink
+                    pathToPage={waffleFlags.useNewScheduleDetailsPage
+                      ? `/course/${courseId}/${scheduleAndDetails}` : scheduleAndDetailsDestination}
+                    title={intl.formatMessage(
+                      messages.sidebarLinkToScheduleAndDetails,
+                    )}
+                    isNewPage={waffleFlags.useNewScheduleDetailsPage}
+                  />
+                )}
+                {showOtherLink(grading) && (
+                  <HelpSidebarLink
+                    pathToPage={waffleFlags.useNewGradingPage
+                      ? `/course/${courseId}/${grading}` : gradingDestination}
+                    title={intl.formatMessage(messages.sidebarLinkToGrading)}
+                    isNewPage={waffleFlags.useNewGradingPage}
+                  />
+                )}
+                {showOtherLink(courseTeam) && (
+                  <HelpSidebarLink
+                    pathToPage={waffleFlags.useNewCourseTeamPage
+                      ? `/course/${courseId}/${courseTeam}` : courseTeamDestination}
+                    title={intl.formatMessage(messages.sidebarLinkToCourseTeam)}
+                    isNewPage={waffleFlags.useNewCourseTeamPage}
+                  />
+                )}
+                {showOtherLink(groupConfigurations) && (
+                  <HelpSidebarLink
+                    pathToPage={waffleFlags.useNewGroupConfigurationsPage
+                      ? `/course/${courseId}/${groupConfigurations}` : groupConfigurationsDestination}
+                    title={intl.formatMessage(
+                      messages.sidebarLinkToGroupConfigurations,
+                    )}
+                    isNewPage={waffleFlags.useNewGroupConfigurationsPage}
+                  />
+                )}
+                {showOtherLink(advancedSettings) && (
+                  <HelpSidebarLink
+                    pathToPage={waffleFlags.useNewAdvancedSettingsPage
+                      ? `/course/${courseId}/${advancedSettings}` : advancedSettingsDestination}
+                    title={intl.formatMessage(messages.sidebarLinkToAdvancedSettings)}
+                    isNewPage={waffleFlags.useNewAdvancedSettingsPage}
+                  />
+                )}
+                {proctoredExamSettingsUrl && (
+                  <HelpSidebarLink
+                    pathToPage={proctoredExamSettingsUrl}
+                    title={intl.formatMessage(
+                      messages.sidebarLinkToProctoredExamSettings,
+                    )}
+                  />
+                )}
+              </ul>
+            </nav>
+          </div>
+        </>
+      )}
+    </aside>
+  );
+};
+
+HelpSidebar.defaultProps = {
+  proctoredExamSettingsUrl: '',
+  className: undefined,
+  courseId: undefined,
+  showOtherSettings: false,
+};
+
+HelpSidebar.propTypes = {
+  intl: intlShape.isRequired,
+  courseId: PropTypes.string,
+  showOtherSettings: PropTypes.bool,
+  proctoredExamSettingsUrl: PropTypes.string,
+  children: PropTypes.node.isRequired,
+  className: PropTypes.string,
+};
+
+export default injectIntl(HelpSidebar);
diff --git a/src/generic/help-sidebar/HelpSidebar.scss b/src/generic/help-sidebar/HelpSidebar.scss
new file mode 100644
index 0000000000..26f08f2e9a
--- /dev/null
+++ b/src/generic/help-sidebar/HelpSidebar.scss
@@ -0,0 +1,34 @@
+.help-sidebar {
+  .help-sidebar-about {
+    .help-sidebar-about-title {
+      color: $black;
+      margin-bottom: 1.25rem;
+    }
+
+    .help-sidebar-about-descriptions {
+      font: normal $font-weight-normal .875rem/1.5rem $font-family-base;
+      color: $text-color-base;
+    }
+
+    .help-sidebar-about-link {
+      font: normal $font-weight-normal .875rem/1.5rem $font-family-base;
+    }
+  }
+
+  .help-sidebar-other-links ul {
+    list-style: none;
+  }
+
+  .help-sidebar-other-title {
+    font: normal $font-weight-bold 1.125rem/1.5rem $font-family-base;
+    color: $black;
+    margin-bottom: 1.25rem;
+  }
+
+  .sidebar-link {
+    font: normal $font-weight-normal .875rem/1.5rem $font-family-base;
+    line-height: 1.5rem;
+    color: $info-500;
+    margin-bottom: .5rem;
+  }
+}
diff --git a/src/generic/help-sidebar/HelpSidebar.test.jsx b/src/generic/help-sidebar/HelpSidebar.test.jsx
new file mode 100644
index 0000000000..fe8b03db26
--- /dev/null
+++ b/src/generic/help-sidebar/HelpSidebar.test.jsx
@@ -0,0 +1,84 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { AppProvider } from '@edx/frontend-platform/react';
+import { initializeMockApp } from '@edx/frontend-platform';
+import initializeStore from '../../store';
+import messages from './messages';
+import { HelpSidebar } from '.';
+
+const mockPathname = '/foo-bar';
+
+let store;
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useLocation: () => ({
+    pathname: mockPathname,
+  }),
+}));
+
+const RootWrapper = (props) => (
+  <AppProvider store={store} messages={{}}>
+    <IntlProvider locale="en">
+      <HelpSidebar
+        {...props}
+      >
+        <p>Test children</p>
+      </HelpSidebar>
+    </IntlProvider>
+  </AppProvider>
+);
+
+const props = {
+  courseId: 'course123',
+  showOtherSettings: true,
+  proctoredExamSettingsUrl: '',
+};
+
+describe('HelpSidebar', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+
+    store = initializeStore();
+  });
+
+  it('renders children correctly', () => {
+    const { getByText } = render(<RootWrapper {...props} />);
+    expect(getByText('Test children')).toBeTruthy();
+  });
+
+  it('should render all sidebar links with correct text', () => {
+    const { getByText, queryByText } = render(<RootWrapper {...props} />);
+    expect(getByText(messages.sidebarTitleOther.defaultMessage)).toBeTruthy();
+    expect(getByText(messages.sidebarLinkToScheduleAndDetails.defaultMessage)).toBeTruthy();
+    expect(getByText(messages.sidebarLinkToGrading.defaultMessage)).toBeTruthy();
+    expect(getByText(messages.sidebarLinkToCourseTeam.defaultMessage)).toBeTruthy();
+    expect(getByText(messages.sidebarLinkToGroupConfigurations.defaultMessage)).toBeTruthy();
+    expect(getByText(messages.sidebarLinkToAdvancedSettings.defaultMessage)).toBeTruthy();
+    expect(queryByText(messages.sidebarLinkToProctoredExamSettings.defaultMessage)).toBeFalsy();
+  });
+
+  it('should hide other settings url if showOtherSettings disabled', () => {
+    const initialProps = { ...props, showOtherSettings: false };
+    const { queryByText } = render(<RootWrapper {...initialProps} />);
+    expect(queryByText(messages.sidebarTitleOther.defaultMessage)).toBeFalsy();
+    expect(queryByText(messages.sidebarLinkToScheduleAndDetails.defaultMessage)).toBeFalsy();
+    expect(queryByText(messages.sidebarLinkToGrading.defaultMessage)).toBeFalsy();
+    expect(queryByText(messages.sidebarLinkToCourseTeam.defaultMessage)).toBeFalsy();
+    expect(queryByText(messages.sidebarLinkToGroupConfigurations.defaultMessage)).toBeFalsy();
+    expect(queryByText(messages.sidebarLinkToAdvancedSettings.defaultMessage)).toBeFalsy();
+  });
+
+  it('should render proctored mfe url only if passed not empty value', () => {
+    const initialProps = { ...props, showOtherSettings: true, proctoredExamSettingsUrl: 'http:/link-to' };
+    const { getByText } = render(<RootWrapper {...initialProps} />);
+    expect(getByText(messages.sidebarLinkToProctoredExamSettings.defaultMessage)).toBeTruthy();
+  });
+});
diff --git a/src/generic/help-sidebar/HelpSidebarLink.jsx b/src/generic/help-sidebar/HelpSidebarLink.jsx
new file mode 100644
index 0000000000..4a4ee91ac8
--- /dev/null
+++ b/src/generic/help-sidebar/HelpSidebarLink.jsx
@@ -0,0 +1,44 @@
+import { Link } from 'react-router-dom';
+import PropTypes from 'prop-types';
+import { Hyperlink } from '@openedx/paragon';
+
+const HelpSidebarLink = ({
+  as, pathToPage, title, isNewPage,
+}) => {
+  const TagElement = as;
+  if (isNewPage) {
+    return (
+      <TagElement className="sidebar-link">
+        <Link to={pathToPage}>
+          {title}
+        </Link>
+      </TagElement>
+    );
+  }
+
+  return (
+    <TagElement className="sidebar-link">
+      <Hyperlink
+        destination={pathToPage}
+        target="_blank"
+        showLaunchIcon={false}
+      >
+        {title}
+      </Hyperlink>
+    </TagElement>
+  );
+};
+
+HelpSidebarLink.propTypes = {
+  isNewPage: PropTypes.bool,
+  pathToPage: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  as: PropTypes.string,
+};
+
+HelpSidebarLink.defaultProps = {
+  as: 'li',
+  isNewPage: true,
+};
+
+export default HelpSidebarLink;
diff --git a/src/generic/help-sidebar/HelpSidebarLink.test.jsx b/src/generic/help-sidebar/HelpSidebarLink.test.jsx
new file mode 100644
index 0000000000..94d2030605
--- /dev/null
+++ b/src/generic/help-sidebar/HelpSidebarLink.test.jsx
@@ -0,0 +1,46 @@
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { BrowserRouter as Router } from 'react-router-dom';
+
+import HelpSidebarLink from './HelpSidebarLink';
+
+describe('HelpSidebarLink Component', () => {
+  const defaultProps = {
+    isNewPage: true,
+    pathToPage: '/test-page',
+    title: 'Test Title',
+    as: 'li',
+  };
+
+  it('renders a React Router Link when isNewPage is true', () => {
+    const { getByText } = render(
+      <Router>
+        <HelpSidebarLink {...defaultProps} />
+      </Router>,
+    );
+
+    const linkElement = getByText('Test Title');
+    expect(linkElement.closest('a')).toHaveAttribute('href', '/test-page');
+  });
+
+  it('renders a Hyperlink when isNewPage is false', () => {
+    const props = { ...defaultProps, isNewPage: false, pathToPage: 'https://example.com' };
+    const { getByText } = render(<HelpSidebarLink {...props} />);
+
+    const hyperlinkElement = getByText('Test Title');
+    expect(hyperlinkElement.closest('a')).toHaveAttribute('href', 'https://example.com');
+    expect(hyperlinkElement.closest('a')).toHaveAttribute('target', '_blank');
+  });
+
+  it('renders the correct tag element specified by "as" prop', () => {
+    const props = { ...defaultProps, as: 'div' };
+    const { container } = render(
+      <Router>
+        <HelpSidebarLink {...props} />
+      </Router>,
+    );
+
+    const tagElement = container.querySelector('div.sidebar-link');
+    expect(tagElement).toBeInTheDocument();
+  });
+});
diff --git a/src/generic/help-sidebar/constants.ts b/src/generic/help-sidebar/constants.ts
new file mode 100644
index 0000000000..31e8038e8c
--- /dev/null
+++ b/src/generic/help-sidebar/constants.ts
@@ -0,0 +1,9 @@
+export const otherLinkURLParams = {
+  scheduleAndDetails: 'settings/details',
+  grading: 'settings/grading',
+  courseTeam: 'course_team',
+  advancedSettings: 'settings/advanced',
+  groupConfigurations: 'group_configurations',
+  proctoredExamSettings: 'proctored-exam-settings',
+  studioHome: 'home',
+};
diff --git a/src/generic/help-sidebar/index.js b/src/generic/help-sidebar/index.js
new file mode 100644
index 0000000000..7f0fc8374a
--- /dev/null
+++ b/src/generic/help-sidebar/index.js
@@ -0,0 +1,2 @@
+export { default as HelpSidebar } from './HelpSidebar';
+export { default as HelpSidebarLink } from './HelpSidebarLink';
diff --git a/src/generic/help-sidebar/messages.js b/src/generic/help-sidebar/messages.js
new file mode 100644
index 0000000000..a8c8db3efd
--- /dev/null
+++ b/src/generic/help-sidebar/messages.js
@@ -0,0 +1,40 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  sidebarTitleOther: {
+    id: 'course-authoring.help-sidebar.other.title',
+    defaultMessage: 'Other course settings',
+  },
+  sidebarLinkToScheduleAndDetails: {
+    id: 'course-authoring.help-sidebar.links.schedule-and-details',
+    defaultMessage: 'Schedule & details',
+    description: 'Link to Studio Schedule & Details page',
+  },
+  sidebarLinkToGrading: {
+    id: 'course-authoring.help-sidebar.links.grading',
+    defaultMessage: 'Grading',
+    description: 'Link to Studio Grading page',
+  },
+  sidebarLinkToCourseTeam: {
+    id: 'course-authoring.help-sidebar.links.course-team',
+    defaultMessage: 'Course team',
+    description: 'Link to Studio Course Team page',
+  },
+  sidebarLinkToGroupConfigurations: {
+    id: 'course-authoring.help-sidebar.links.group-configurations',
+    defaultMessage: 'Group configurations',
+    description: 'Link to Studio Group Configurations page',
+  },
+  sidebarLinkToProctoredExamSettings: {
+    id: 'course-authoring.help-sidebar.links.proctored-exam-settings',
+    defaultMessage: 'Proctored exam settings',
+    description: 'Link to Proctored exam settings page',
+  },
+  sidebarLinkToAdvancedSettings: {
+    id: 'course-authoring.help-sidebar.links.advanced-settings',
+    defaultMessage: 'Advanced settings',
+    description: 'Link to Advanced Settings',
+  },
+});
+
+export default messages;
diff --git a/src/generic/hooks/index.tsx b/src/generic/hooks/index.tsx
new file mode 100644
index 0000000000..16d232723c
--- /dev/null
+++ b/src/generic/hooks/index.tsx
@@ -0,0 +1 @@
+export { useEventListener } from './useEventListener';
diff --git a/src/generic/hooks/tests/useEventListener.test.tsx b/src/generic/hooks/tests/useEventListener.test.tsx
new file mode 100644
index 0000000000..2f13699c50
--- /dev/null
+++ b/src/generic/hooks/tests/useEventListener.test.tsx
@@ -0,0 +1,62 @@
+import { renderHook } from '@testing-library/react-hooks';
+
+import { useEventListener } from '../useEventListener';
+
+describe('useEventListener', () => {
+  let addEventListenerSpy: jest.SpyInstance;
+  let removeEventListenerSpy: jest.SpyInstance;
+
+  beforeEach(() => {
+    addEventListenerSpy = jest.spyOn(global, 'addEventListener');
+    removeEventListenerSpy = jest.spyOn(global, 'removeEventListener');
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should add event listener on mount', () => {
+    const handler = jest.fn();
+    renderHook(() => useEventListener('click', handler));
+
+    expect(addEventListenerSpy).toHaveBeenCalledWith('click', handler);
+  });
+
+  it('should remove event listener on unmount', () => {
+    const handler = jest.fn();
+    const { unmount } = renderHook(() => useEventListener('click', handler));
+
+    unmount();
+
+    expect(removeEventListenerSpy).toHaveBeenCalledWith('click', handler);
+  });
+
+  it('should update event listener when handler changes', () => {
+    const handler1 = jest.fn();
+    const handler2 = jest.fn();
+    const { rerender } = renderHook(({ handler }: {
+      handler: (event: Event) => void
+    }) => useEventListener('click', handler), {
+      initialProps: { handler: handler1 },
+    });
+
+    rerender({ handler: handler2 });
+
+    expect(removeEventListenerSpy).toHaveBeenCalledWith('click', handler1);
+    expect(addEventListenerSpy).toHaveBeenCalledWith('click', handler2);
+  });
+
+  it('should update event listener when type changes', () => {
+    const handler = jest.fn();
+    const { rerender } = renderHook(({ type }: {
+      type: keyof WindowEventMap
+    }) => useEventListener(type, handler), {
+      initialProps: { type: 'click' },
+    });
+
+    rerender({ type: 'scroll' });
+
+    expect(removeEventListenerSpy).toHaveBeenCalledWith('click', handler);
+    expect(addEventListenerSpy).toHaveBeenCalledWith('scroll', handler);
+  });
+});
diff --git a/src/generic/hooks/useEventListener.tsx b/src/generic/hooks/useEventListener.tsx
new file mode 100644
index 0000000000..4345505acf
--- /dev/null
+++ b/src/generic/hooks/useEventListener.tsx
@@ -0,0 +1,26 @@
+import { useEffect, useRef, MutableRefObject } from 'react';
+
+export function useEventListener<K extends keyof WindowEventMap>(
+  type: K,
+  handler: (event: WindowEventMap[K]) => void,
+) {
+  // We use this ref so that we can hold a reference to the currently active event listener.
+  const eventListenerRef = useRef<(event: WindowEventMap[K]) => void | null>(null);
+
+  useEffect(() => {
+    // If we currently have an event listener, remove it.
+    if (eventListenerRef.current !== null) {
+      global.removeEventListener(type, eventListenerRef.current);
+    }
+    // Now add our new handler as the event listener.
+    global.addEventListener(type, handler);
+    // And then save it to our ref for next time.
+    (eventListenerRef as MutableRefObject<(event: WindowEventMap[K]) => void>).current = handler;
+    // When the component finally unmounts, use the ref to remove the correct handler.
+    return () => {
+      if (eventListenerRef.current !== null) {
+        global.removeEventListener(type, eventListenerRef.current);
+      }
+    };
+  }, [type, handler]);
+}
diff --git a/src/generic/internet-connection-alert/index.jsx b/src/generic/internet-connection-alert/index.jsx
new file mode 100644
index 0000000000..a4a8e271cd
--- /dev/null
+++ b/src/generic/internet-connection-alert/index.jsx
@@ -0,0 +1,80 @@
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { Warning as WarningIcon } from '@openedx/paragon/icons';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import AlertMessage from '../alert-message';
+import messages from './messages';
+
+const InternetConnectionAlert = ({
+  isFailed, isQueryPending, onQueryProcessing, onInternetConnectionFailed,
+}) => {
+  const intl = useIntl();
+  const [showAlert, setShowAlert] = useState(false);
+  const [isOnline, setIsOnline] = useState(window.navigator.onLine);
+
+  useEffect(() => {
+    const handleOnlineStatus = () => setIsOnline(window.navigator.onLine);
+    const events = ['online', 'offline'];
+
+    events.forEach(event => {
+      window.addEventListener(event, handleOnlineStatus);
+    });
+
+    return () => {
+      events.forEach(event => {
+        window.removeEventListener(event, handleOnlineStatus);
+      });
+    };
+  }, [isOnline]);
+
+  useEffect(() => {
+    if (isQueryPending) {
+      if (onQueryProcessing) {
+        onQueryProcessing();
+      }
+
+      setShowAlert(!isOnline);
+
+      if (!isOnline) {
+        onInternetConnectionFailed();
+      }
+    } else if (isFailed) {
+      setShowAlert(!isOnline);
+    } else if (isOnline) {
+      setShowAlert(false);
+    }
+  }, [isOnline, isQueryPending, isFailed]);
+
+  return (
+    <AlertMessage
+      show={showAlert}
+      variant="danger"
+      icon={WarningIcon}
+      title={intl.formatMessage(messages.offlineWarningTitle)}
+      description={intl.formatMessage(messages.offlineWarningDescription)}
+      aria-hidden="true"
+      aria-labelledby={intl.formatMessage(
+        messages.offlineWarningTitleAriaLabelledBy,
+      )}
+      aria-describedby={intl.formatMessage(
+        messages.offlineWarningDescriptionAriaDescribedBy,
+      )}
+    />
+  );
+};
+
+InternetConnectionAlert.defaultProps = {
+  isQueryPending: false,
+  onQueryProcessing: () => ({}),
+  onInternetConnectionFailed: () => ({}),
+};
+
+InternetConnectionAlert.propTypes = {
+  isFailed: PropTypes.bool.isRequired,
+  isQueryPending: PropTypes.bool,
+  onQueryProcessing: PropTypes.func,
+  onInternetConnectionFailed: PropTypes.func,
+};
+
+export default InternetConnectionAlert;
diff --git a/src/generic/internet-connection-alert/messages.js b/src/generic/internet-connection-alert/messages.js
new file mode 100644
index 0000000000..52ab63691a
--- /dev/null
+++ b/src/generic/internet-connection-alert/messages.js
@@ -0,0 +1,22 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  offlineWarningTitle: {
+    id: 'course-authoring.generic.alert.warning.offline.title',
+    defaultMessage: 'Studio\'s having trouble saving your work',
+  },
+  offlineWarningDescription: {
+    id: 'course-authoring.generic.alert.warning.offline.description',
+    defaultMessage: 'This may be happening because of an error with our server or your internet connection. Try refreshing the page or making sure you are online.',
+  },
+  offlineWarningTitleAriaLabelledBy: {
+    id: 'course-authoring.generic.alert.warning.offline.title.aria.labelled-by',
+    defaultMessage: 'alert-internet-error-title',
+  },
+  offlineWarningDescriptionAriaDescribedBy: {
+    id: 'course-authoring.generic.alert.warning.offline.subtitle.aria.described-by',
+    defaultMessage: 'alert-internet-error-description',
+  },
+});
+
+export default messages;
diff --git a/src/generic/key-utils.test.ts b/src/generic/key-utils.test.ts
new file mode 100644
index 0000000000..224f4a9632
--- /dev/null
+++ b/src/generic/key-utils.test.ts
@@ -0,0 +1,98 @@
+import {
+  buildCollectionUsageKey,
+  getBlockType,
+  getLibraryId,
+  isLibraryKey,
+  isLibraryV1Key,
+} from './key-utils';
+
+describe('component utils', () => {
+  describe('getBlockType', () => {
+    for (const [input, expected] of [
+      ['lb:org:lib:html:id', 'html'],
+      ['lb:OpenCraftX:ALPHA:html:571fe018-f3ce-45c9-8f53-5dafcb422fdd', 'html'],
+      ['lb:Axim:beta:problem:571fe018-f3ce-45c9-8f53-5dafcb422fdd', 'problem'],
+    ]) {
+      it(`returns '${expected}' for usage key '${input}'`, () => {
+        expect(getBlockType(input)).toStrictEqual(expected);
+      });
+    }
+
+    for (const input of ['', undefined, null, 'not a key', 'lb:foo']) {
+      it(`throws an exception for usage key '${input}'`, () => {
+        expect(() => getBlockType(input as any)).toThrow(`Invalid usageKey: ${input}`);
+      });
+    }
+  });
+
+  describe('getLibraryId', () => {
+    for (const [input, expected] of [
+      ['lb:org:lib:html:id', 'lib:org:lib'],
+      ['lb:OpenCraftX:ALPHA:html:571fe018-f3ce-45c9-8f53-5dafcb422fdd', 'lib:OpenCraftX:ALPHA'],
+      ['lb:Axim:beta:problem:571fe018-f3ce-45c9-8f53-5dafcb422fdd', 'lib:Axim:beta'],
+      ['lib-collection:org:lib:coll', 'lib:org:lib'],
+      ['lib-collection:OpenCraftX:ALPHA:coll', 'lib:OpenCraftX:ALPHA'],
+    ]) {
+      it(`returns '${expected}' for usage key '${input}'`, () => {
+        expect(getLibraryId(input)).toStrictEqual(expected);
+      });
+    }
+
+    for (const input of ['', undefined, null, 'not a key', 'lb:foo']) {
+      it(`throws an exception for usage key '${input}'`, () => {
+        expect(() => getLibraryId(input as any)).toThrow(`Invalid usageKey: ${input}`);
+      });
+    }
+  });
+
+  describe('isLibraryKey', () => {
+    for (const [input, expected] of [
+      ['lib:org:lib', true],
+      ['lib:OpenCraftX:ALPHA', true],
+      ['lb:org:lib:html:id', false],
+      ['lb:OpenCraftX:ALPHA:html:571fe018-f3ce-45c9-8f53-5dafcb422fdd', false],
+      ['library-v1:AximX+L1', false],
+      ['course-v1:AximX+TS100+23', false],
+      ['', false],
+      [undefined, false],
+    ] as const) {
+      it(`returns '${expected}' for learning context key '${input}'`, () => {
+        expect(isLibraryKey(input)).toStrictEqual(expected);
+      });
+    }
+  });
+
+  describe('isLibraryV1Key', () => {
+    for (const [input, expected] of [
+      ['library-v1:AximX+L1', true],
+      ['lib:org:lib', false],
+      ['lib:OpenCraftX:ALPHA', false],
+      ['lb:org:lib:html:id', false],
+      ['lb:OpenCraftX:ALPHA:html:571fe018-f3ce-45c9-8f53-5dafcb422fdd', false],
+      ['course-v1:AximX+TS100+23', false],
+      ['', false],
+      [undefined, false],
+    ] as const) {
+      it(`returns '${expected}' for learning context key '${input}'`, () => {
+        expect(isLibraryV1Key(input)).toStrictEqual(expected);
+      });
+    }
+  });
+
+  describe('buildCollectionUsageKey', () => {
+    for (const [libraryKey, collectionId, expected] of [
+      ['lib:org:lib', 'coll', 'lib-collection:org:lib:coll'],
+      ['lib:OpenCraftX:ALPHA', 'coll', 'lib-collection:OpenCraftX:ALPHA:coll'],
+      ['lb:org:lib:html:id', 'coll', ''],
+      ['lb:OpenCraftX:ALPHA:html:571fe018-f3ce-45c9-8f53-5dafcb422fdd', 'coll', ''],
+      ['library-v1:AximX+L1', 'coll', ''],
+      ['course-v1:AximX+TS100+23', 'coll', ''],
+      ['', 'coll', ''],
+      ['', 'coll', ''],
+    ] as const) {
+      it(`returns '${expected}' for learning context key '${libraryKey}' and collection Id '${collectionId}'`, () => {
+        expect(buildCollectionUsageKey(libraryKey, collectionId)).toStrictEqual(expected);
+      });
+    }
+  });
+});
diff --git a/src/generic/key-utils.ts b/src/generic/key-utils.ts
new file mode 100644
index 0000000000..6334171197
--- /dev/null
+++ b/src/generic/key-utils.ts
@@ -0,0 +1,53 @@
+/**
+ * Given a usage key like `lb:org:lib:html:id`, get the type (e.g. `html`)
+ * @param usageKey e.g. `lb:org:lib:html:id`
+ * @returns The block type as a string
+ */
+export function getBlockType(usageKey: string): string {
+  if (usageKey && usageKey.startsWith('lb:')) {
+    const blockType = usageKey.split(':')[3];
+    if (blockType) {
+      return blockType;
+    }
+  }
+  throw new Error(`Invalid usageKey: ${usageKey}`);
+}
+
+/**
+ * Given a usage key like `lb:org:lib:html:id`, get the library key
+ * @param usageKey e.g. `lb:org:lib:html:id`
+ * @returns The library key, e.g. `lib:org:lib`
+ */
+export function getLibraryId(usageKey: string): string {
+  if (usageKey && (usageKey.startsWith('lb:') || usageKey.startsWith('lib-collection:'))) {
+    const org = usageKey.split(':')[1];
+    const lib = usageKey.split(':')[2];
+    if (org && lib) {
+      return `lib:${org}:${lib}`;
+    }
+  }
+  throw new Error(`Invalid usageKey: ${usageKey}`);
+}
+
+/** Check if this is a V2 library key. */
+export function isLibraryKey(learningContextKey: string | undefined | null): learningContextKey is string {
+  return typeof learningContextKey === 'string' && learningContextKey.startsWith('lib:');
+}
+
+/** Check if this is a V1 library key. */
+export function isLibraryV1Key(learningContextKey: string | undefined | null): learningContextKey is string {
+  return typeof learningContextKey === 'string' && learningContextKey.startsWith('library-v1:');
+}
+
+/**
+ * Build a collection usage key from library V2 context key and collection Id.
+ * This Collection Usage Key is only used on tagging.
+*/
+export const buildCollectionUsageKey = (learningContextKey: string, collectionId: string) => {
+  if (!isLibraryKey(learningContextKey)) {
+    return '';
+  }
+
+  const orgLib = learningContextKey.replace('lib:', '');
+  return `lib-collection:${orgLib}:${collectionId}`;
+};
diff --git a/src/generic/loading-button/LoadingButton.test.jsx b/src/generic/loading-button/LoadingButton.test.jsx
new file mode 100644
index 0000000000..f52d43c3c8
--- /dev/null
+++ b/src/generic/loading-button/LoadingButton.test.jsx
@@ -0,0 +1,76 @@
+import React from 'react';
+import {
+  act,
+  fireEvent,
+  render,
+} from '@testing-library/react';
+
+import LoadingButton from '.';
+
+const buttonTitle = 'Button Title';
+
+const RootWrapper = (onClick) => (
+  <LoadingButton label={buttonTitle} onClick={onClick} />
+);
+
+describe('<LoadingButton />', () => {
+  it('renders the title and doesnt handle the spinner initially', () => {
+    const { container, getByText } = render(RootWrapper(() => { }));
+    expect(getByText(buttonTitle)).toBeInTheDocument();
+
+    expect(container.getElementsByClassName('icon-spin').length).toBe(0);
+  });
+
+  it('doesnt render the spinner without onClick function', () => {
+    const { container, getByRole, getByText } = render(RootWrapper());
+    const titleElement = getByText(buttonTitle);
+    expect(titleElement).toBeInTheDocument();
+    expect(container.getElementsByClassName('icon-spin').length).toBe(0);
+    fireEvent.click(getByRole('button'));
+    expect(container.getElementsByClassName('icon-spin').length).toBe(0);
+  });
+
+  it('renders the spinner correctly', async () => {
+    let resolver;
+    const longFunction = () => new Promise((resolve) => {
+      resolver = resolve;
+    });
+    const { container, getByRole, getByText } = render(RootWrapper(longFunction));
+    const buttonElement = getByRole('button');
+    fireEvent.click(buttonElement);
+    expect(container.getElementsByClassName('icon-spin').length).toBe(1);
+    expect(getByText(buttonTitle)).toBeInTheDocument();
+    // StatefulButton only sets aria-disabled (not disabled) when the state is pending
+    // expect(buttonElement).toBeDisabled();
+    expect(buttonElement).toHaveAttribute('aria-disabled', 'true');
+
+    await act(async () => { resolver(); });
+
+    expect(buttonElement).not.toHaveAttribute('aria-disabled', 'true');
+    expect(container.getElementsByClassName('icon-spin').length).toBe(0);
+  });
+
+  it('renders the spinner correctly even with error', async () => {
+    let rejecter;
+    const longFunction = () => new Promise((_resolve, reject) => {
+      rejecter = reject;
+    });
+    const { container, getByRole, getByText } = render(RootWrapper(longFunction));
+    const buttonElement = getByRole('button');
+
+    fireEvent.click(buttonElement);
+
+    expect(container.getElementsByClassName('icon-spin').length).toBe(1);
+    expect(getByText(buttonTitle)).toBeInTheDocument();
+    // StatefulButton only sets aria-disabled (not disabled) when the state is pending
+    // expect(buttonElement).toBeDisabled();
+    expect(buttonElement).toHaveAttribute('aria-disabled', 'true');
+
+    await act(async () => { rejecter(new Error('error')); });
+
+    // StatefulButton only sets aria-disabled (not disabled) when the state is pending
+    // expect(buttonElement).toBeEnabled();
+    expect(buttonElement).not.toHaveAttribute('aria-disabled', 'true');
+    expect(container.getElementsByClassName('icon-spin').length).toBe(0);
+  });
+});
diff --git a/src/generic/loading-button/index.jsx b/src/generic/loading-button/index.jsx
new file mode 100644
index 0000000000..bda47739b0
--- /dev/null
+++ b/src/generic/loading-button/index.jsx
@@ -0,0 +1,72 @@
+// @ts-check
+import React, {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import {
+  StatefulButton,
+} from '@openedx/paragon';
+import PropTypes from 'prop-types';
+
+/**
+  * A button that shows a loading spinner when clicked.
+  * @param {object} props
+  * @param {string} props.label
+  * @param {function=} props.onClick
+  * @param {boolean=} props.disabled
+  * @returns {JSX.Element}
+  */
+const LoadingButton = ({
+  label,
+  onClick,
+  disabled,
+}) => {
+  const [state, setState] = useState('');
+  // This is used to prevent setting the isLoading state after the component has been unmounted.
+  const componentMounted = useRef(true);
+
+  useEffect(() => () => {
+    componentMounted.current = false;
+  }, []);
+
+  const loadingOnClick = useCallback(async (e) => {
+    if (!onClick) {
+      return;
+    }
+
+    setState('pending');
+    try {
+      await onClick(e);
+    } catch (err) {
+      // Do nothing
+    } finally {
+      if (componentMounted.current) {
+        setState('');
+      }
+    }
+  }, [componentMounted, onClick]);
+
+  return (
+    <StatefulButton
+      disabledStates={disabled ? [state] : ['pending'] /* StatefulButton doesn't support disabled prop */}
+      onClick={loadingOnClick}
+      labels={{ default: label }}
+      state={state}
+    />
+  );
+};
+
+LoadingButton.propTypes = {
+  label: PropTypes.string.isRequired,
+  onClick: PropTypes.func,
+  disabled: PropTypes.bool,
+};
+
+LoadingButton.defaultProps = {
+  onClick: undefined,
+  disabled: undefined,
+};
+
+export default LoadingButton;
diff --git a/src/generic/modal-dropzone/ModalDropzone.jsx b/src/generic/modal-dropzone/ModalDropzone.jsx
new file mode 100644
index 0000000000..8133910785
--- /dev/null
+++ b/src/generic/modal-dropzone/ModalDropzone.jsx
@@ -0,0 +1,153 @@
+import PropTypes from 'prop-types';
+import {
+  Form,
+  ModalDialog,
+  Dropzone,
+  ActionRow,
+  Image,
+  Card,
+  Icon,
+  Button,
+  IconButton,
+  Spinner,
+} from '@openedx/paragon';
+import { FileUpload as FileUploadIcon } from '@openedx/paragon/icons';
+
+import useModalDropzone from './useModalDropzone';
+import messages from './messages';
+import { UPLOAD_FILE_MAX_SIZE } from '../../constants';
+
+const ModalDropzone = ({
+  fileTypes,
+  modalTitle,
+  imageHelpText,
+  previewComponent,
+  imageDropzoneText,
+  invalidFileSizeMore,
+  isOpen,
+  onClose,
+  onCancel,
+  onChange,
+  onSavingStatus,
+  onSelectFile,
+  maxSize = UPLOAD_FILE_MAX_SIZE,
+}) => {
+  const {
+    intl,
+    accept,
+    previewUrl,
+    uploadProgress,
+    disabledUploadBtn,
+    imageValidator,
+    handleUpload,
+    handleCancel,
+    handleSelectFile,
+  } = useModalDropzone({
+    onChange, onCancel, onClose, fileTypes, onSavingStatus, onSelectFile,
+  });
+
+  const invalidSizeMore = invalidFileSizeMore || intl.formatMessage(
+    messages.uploadImageDropzoneInvalidSizeMore,
+    { maxSize: maxSize / (1000 * 1000) },
+  );
+
+  const inputComponent = previewUrl ? (
+    <div>
+      {previewComponent || (
+        <Image
+          src={previewUrl}
+          alt={intl.formatMessage(messages.uploadImageDropzoneAlt)}
+          fluid
+        />
+      )}
+    </div>
+  ) : (
+    <>
+      <IconButton
+        isActive
+        src={FileUploadIcon}
+        iconAs={Icon}
+        variant="secondary"
+        alt={intl.formatMessage(messages.uploadImageDropzoneAlt)}
+        className="mb-3"
+      />
+      <p>{imageDropzoneText || intl.formatMessage(messages.uploadImageDropzoneText)}</p>
+      <p className="x-small text-center mt-1.5">{imageHelpText}</p>
+    </>
+  );
+
+  return (
+    <ModalDialog
+      title={modalTitle}
+      size="lg"
+      isOpen={isOpen}
+      onClose={handleCancel}
+      hasCloseButton
+      isFullscreenOnMobile
+      className="modal-dropzone"
+    >
+      <ModalDialog.Header>
+        <ModalDialog.Title>
+          {modalTitle}
+        </ModalDialog.Title>
+      </ModalDialog.Header>
+      <ModalDialog.Body>
+        <Form.Group className="form-group-custom w-100">
+          <Card>
+            <Card.Body className="image-body">
+              {uploadProgress > 0 ? (
+                <Spinner animation="border" variant="primary" className="mr-3" screenReaderText={uploadProgress} />
+              ) : (
+                <Dropzone
+                  onProcessUpload={handleSelectFile}
+                  inputComponent={inputComponent}
+                  accept={accept}
+                  errorMessages={{ invalidSizeMore }}
+                  validator={imageValidator}
+                  maxSize={maxSize}
+                />
+              )}
+            </Card.Body>
+          </Card>
+        </Form.Group>
+      </ModalDialog.Body>
+      <ModalDialog.Footer>
+        <ActionRow>
+          <ModalDialog.CloseButton variant="tertiary" onClick={handleCancel}>
+            {intl.formatMessage(messages.cancelModal)}
+          </ModalDialog.CloseButton>
+          <Button onClick={handleUpload} disabled={disabledUploadBtn}>
+            {intl.formatMessage(messages.uploadModal)}
+          </Button>
+        </ActionRow>
+      </ModalDialog.Footer>
+    </ModalDialog>
+  );
+};
+
+ModalDropzone.defaultProps = {
+  imageHelpText: '',
+  previewComponent: null,
+  imageDropzoneText: '',
+  maxSize: UPLOAD_FILE_MAX_SIZE,
+  invalidFileSizeMore: '',
+  onSelectFile: null,
+};
+
+ModalDropzone.propTypes = {
+  imageHelpText: PropTypes.string,
+  previewComponent: PropTypes.element,
+  imageDropzoneText: PropTypes.string,
+  modalTitle: PropTypes.string.isRequired,
+  fileTypes: PropTypes.arrayOf(PropTypes.string).isRequired,
+  isOpen: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  onCancel: PropTypes.func.isRequired,
+  onChange: PropTypes.func.isRequired,
+  onSavingStatus: PropTypes.func.isRequired,
+  maxSize: PropTypes.number,
+  invalidFileSizeMore: PropTypes.string,
+  onSelectFile: PropTypes.func,
+};
+
+export default ModalDropzone;
diff --git a/src/generic/modal-dropzone/ModalDropzone.scss b/src/generic/modal-dropzone/ModalDropzone.scss
new file mode 100644
index 0000000000..e5283f38c8
--- /dev/null
+++ b/src/generic/modal-dropzone/ModalDropzone.scss
@@ -0,0 +1,14 @@
+.modal-dropzone .image-body {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  min-height: 300px;
+
+  .pgn__dropzone {
+    background: $white;
+    height: 100%;
+    min-height: 18.75rem;
+  }
+}
diff --git a/src/generic/modal-dropzone/ModalDropzone.test.jsx b/src/generic/modal-dropzone/ModalDropzone.test.jsx
new file mode 100644
index 0000000000..71d1013cf7
--- /dev/null
+++ b/src/generic/modal-dropzone/ModalDropzone.test.jsx
@@ -0,0 +1,159 @@
+import { AppProvider } from '@edx/frontend-platform/react';
+import { render, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { initializeMockApp } from '@edx/frontend-platform';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import MockAdapter from 'axios-mock-adapter';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+
+import { uploadAssets, getUploadAssetsUrl } from './data/api';
+import initializeStore from '../../store';
+import ModalDropzone from './ModalDropzone';
+import messages from './messages';
+
+let store;
+let axiosMock;
+const courseId = 'course-123';
+const file = new File(['test'], 'test.png', { type: 'image/png' });
+const fileData = new FormData();
+fileData.append('file', file);
+const baseUrl = process.env.STUDIO_BASE_URL || 'http://localhost:18010';
+
+const mockOnClose = jest.fn();
+const mockOnCancel = jest.fn();
+const mockOnChange = jest.fn();
+const mockOnSavingStatus = jest.fn();
+
+const RootWrapper = (props) => (
+  <IntlProvider locale="en">
+    <AppProvider store={store}>
+      <ModalDropzone {...props} />
+    </AppProvider>
+  </IntlProvider>
+);
+
+const props = {
+  isOpen: true,
+  fileTypes: ['png'],
+  onClose: mockOnClose,
+  onCancel: mockOnCancel,
+  onChange: mockOnChange,
+  onSavingStatus: mockOnSavingStatus,
+};
+
+describe('<ModalDropzone />', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+
+    store = initializeStore();
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+    jest.clearAllMocks();
+  });
+
+  afterEach(() => {
+    axiosMock.reset();
+  });
+
+  it('renders successfully when open', () => {
+    const { getByText } = render(<RootWrapper {...props} />);
+
+    expect(getByText(messages.uploadImageDropzoneText.defaultMessage)).toBeInTheDocument();
+  });
+
+  it('calls onClose when close button is clicked', async () => {
+    const { getByText } = render(<RootWrapper {...props} />);
+    userEvent.click(getByText(messages.cancelModal.defaultMessage));
+
+    expect(mockOnClose).toHaveBeenCalled();
+  });
+
+  it('calls onCancel when cancel button is clicked', () => {
+    const { getByText } = render(<RootWrapper {...props} />);
+    userEvent.click(getByText(messages.cancelModal.defaultMessage));
+
+    expect(mockOnCancel).toHaveBeenCalled();
+  });
+
+  it('disables the upload button initially', () => {
+    const { getByText } = render(<RootWrapper {...props} />);
+    const uploadButton = getByText(messages.uploadModal.defaultMessage);
+
+    expect(uploadButton).toBeDisabled();
+  });
+
+  it('enables the upload button after a file is selected', async () => {
+    const { getByRole } = render(<RootWrapper {...props} />);
+    const dropzoneInput = getByRole('presentation', { hidden: true }).firstChild;
+
+    const uploadButton = getByRole('button', { name: messages.uploadModal.defaultMessage });
+    expect(uploadButton).toBeDisabled();
+    userEvent.upload(dropzoneInput, file);
+
+    await waitFor(() => {
+      expect(dropzoneInput.files[0]).toStrictEqual(file);
+      expect(dropzoneInput.files).toHaveLength(1);
+      expect(uploadButton).not.toBeDisabled();
+    });
+  });
+
+  it('should successfully upload an asset and return the URL', async () => {
+    const mockUrl = `${baseUrl}/assets/course-123/test-file.png`;
+    axiosMock.onPost(getUploadAssetsUrl(courseId).href).reply(200, {
+      asset: { url: mockUrl },
+    });
+    const response = await uploadAssets(courseId, fileData, () => {});
+
+    expect(response.asset.url).toBe(mockUrl);
+
+    const { getByRole, getByAltText } = render(<RootWrapper {...props} />);
+    const dropzoneInput = getByRole('presentation', { hidden: true }).firstChild;
+    const uploadButton = getByRole('button', { name: messages.uploadModal.defaultMessage });
+
+    userEvent.upload(dropzoneInput, file);
+
+    await waitFor(() => {
+      expect(uploadButton).not.toBeDisabled();
+    });
+
+    userEvent.click(uploadButton);
+
+    await waitFor(() => {
+      expect(getByAltText(messages.uploadImageDropzoneAlt.defaultMessage)).toBeInTheDocument();
+    });
+  });
+
+  it('should handle an upload error', async () => {
+    axiosMock.onPost(getUploadAssetsUrl(courseId).href).networkError();
+
+    await expect(uploadAssets(courseId, fileData, () => {})).rejects.toThrow('Network Error');
+  });
+
+  it('displays a custom error message when the file size exceeds the limit', async () => {
+    const maxSizeInBytes = 20 * 1000 * 1000;
+    const expectedErrorMessage = 'Custom error message';
+
+    const { getByText, getByRole } = render(
+      <RootWrapper {...props} maxSize={maxSizeInBytes} invalidFileSizeMore={expectedErrorMessage} />,
+    );
+    const dropzoneInput = getByRole('presentation', { hidden: true });
+
+    const fileToUpload = new File(
+      [new ArrayBuffer(maxSizeInBytes + 1)],
+      'test-file.png',
+      { type: 'image/png' },
+    );
+
+    userEvent.upload(dropzoneInput.firstChild, fileToUpload);
+
+    await waitFor(() => {
+      expect(getByText(expectedErrorMessage)).toBeInTheDocument();
+    });
+  });
+});
diff --git a/src/generic/modal-dropzone/data/api.js b/src/generic/modal-dropzone/data/api.js
new file mode 100644
index 0000000000..abcfaa760c
--- /dev/null
+++ b/src/generic/modal-dropzone/data/api.js
@@ -0,0 +1,29 @@
+import { camelCaseObject, getConfig } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+
+export const getUploadAssetsUrl = (courseId) => new URL(
+  `/assets/${courseId}/`,
+  getConfig().STUDIO_BASE_URL,
+);
+
+/**
+ * Upload assets.
+ * @param {string} courseId
+ * @param {FormData} fileData
+ * @param {function} onUploadProgress
+ * @returns {Promise<Object>}
+ */
+export async function uploadAssets(courseId, fileData, onUploadProgress) {
+  const config = {
+    onUploadProgress,
+  };
+
+  const { data } = await getAuthenticatedHttpClient()
+    .post(
+      getUploadAssetsUrl(courseId).href,
+      fileData,
+      config,
+    );
+
+  return camelCaseObject(data);
+}
diff --git a/src/generic/modal-dropzone/messages.js b/src/generic/modal-dropzone/messages.js
new file mode 100644
index 0000000000..8c0f2efe60
--- /dev/null
+++ b/src/generic/modal-dropzone/messages.js
@@ -0,0 +1,36 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  uploadImageDropzoneText: {
+    id: 'course-authoring.certificates.modal-dropzone.text',
+    defaultMessage: 'Drag and drop your image here or click to upload',
+    description: 'Description to drag and drop block',
+  },
+  uploadImageDropzoneAlt: {
+    id: 'course-authoring.certificates.modal-dropzone.dropzone-alt',
+    defaultMessage: 'Uploaded image for course certificate',
+    description: 'Description for the uploaded image',
+  },
+  uploadImageValidationText: {
+    id: 'course-authoring.certificates.modal-dropzone.validation.text',
+    defaultMessage: 'Only {types} files can be uploaded. Please select a file ending in {extensions} to upload.',
+    description: 'Error message for when an invalid file type is selected',
+  },
+  cancelModal: {
+    id: 'course-authoring.certificates.modal-dropzone.cancel.modal',
+    defaultMessage: 'Cancel',
+    description: 'Text for the cancel button in the modal',
+  },
+  uploadModal: {
+    id: 'course-authoring.certificates.modal-dropzone.upload.modal',
+    defaultMessage: 'Upload',
+    description: 'Text for the upload button in the modal',
+  },
+  uploadImageDropzoneInvalidSizeMore: {
+    id: 'course-authoring.certificates.modal-dropzone.validation.invalid-size-more',
+    defaultMessage: 'Image size must be less than {maxSize}MB.',
+    description: 'Error message for when the uploaded image size exceeds the limit',
+  },
+});
+
+export default messages;
diff --git a/src/generic/modal-dropzone/useModalDropzone.jsx b/src/generic/modal-dropzone/useModalDropzone.jsx
new file mode 100644
index 0000000000..81657d3923
--- /dev/null
+++ b/src/generic/modal-dropzone/useModalDropzone.jsx
@@ -0,0 +1,131 @@
+import { useState, useMemo } from 'react';
+import { useParams } from 'react-router-dom';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import { RequestStatus } from '../../data/constants';
+import { uploadAssets } from './data/api';
+import messages from './messages';
+
+const useModalDropzone = ({
+  onChange, onCancel, onClose, fileTypes, onSavingStatus, onSelectFile,
+}) => {
+  const { courseId } = useParams();
+  const intl = useIntl();
+  const [selectedFile, setSelectedFile] = useState(null);
+  const [previewUrl, setPreviewUrl] = useState(null);
+  const [uploadProgress, setUploadProgress] = useState(0);
+  const [disabledUploadBtn, setDisabledUploadBtn] = useState(true);
+
+  const VALID_IMAGE_TYPES = ['png', 'jpeg'];
+
+  const imageValidator = (file) => {
+    const fileType = file.name.split('.').pop().toLowerCase();
+
+    const extensionsList = fileTypes.map(type => `.${type.toLowerCase()}`).join(', ');
+    const typesList = fileTypes.map(type => type.toUpperCase()).join(', ');
+
+    if (!fileTypes.map(type => type.toLowerCase()).includes(fileType)) {
+      return intl.formatMessage(messages.uploadImageValidationText, {
+        types: typesList,
+        extensions: extensionsList,
+      });
+    }
+    return null;
+  };
+
+  /**
+   * Constructs an accept object for Dropzone based on provided file types.
+   *
+   * @param {string[]} types - Array of file extensions.
+   * @returns {Object} Accept object for Dropzone.
+   *
+   * Example:
+   * input: ['png', 'jpg', 'pdf', 'docx']
+   * output:
+   *  {
+   *    "image/*": [".png", ".jpg"],
+   *    "* /*": [".pdf", ".docx"]
+   *  }
+   */
+  const constructAcceptObject = (types) => types
+    .reduce((acc, type) => {
+      // eslint-disable-next-line no-nested-ternary
+      const mimeType = type === 'pdf' ? 'application/pdf' : VALID_IMAGE_TYPES.includes(type) ? 'image/*' : '*/*';
+      if (!acc[mimeType]) {
+        acc[mimeType] = [];
+      }
+      acc[mimeType].push(`.${type}`);
+      return acc;
+    }, {});
+
+  const accept = useMemo(() => constructAcceptObject(fileTypes), [fileTypes]);
+
+  const handleSelectFile = ({ fileData }) => {
+    const file = fileData.get('file');
+
+    if (file) {
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        setPreviewUrl(reader.result);
+        setDisabledUploadBtn(false);
+      };
+      reader.readAsDataURL(file);
+      setSelectedFile(fileData);
+
+      if (onSelectFile) {
+        onSelectFile(file.path);
+      }
+    }
+  };
+
+  const handleCancel = () => {
+    setPreviewUrl(null);
+    setDisabledUploadBtn(true);
+    onSavingStatus({ status: RequestStatus.CLEAR });
+    setUploadProgress(0);
+    onCancel();
+    onClose();
+  };
+
+  const handleUpload = async () => {
+    if (!selectedFile) { return; }
+
+    onSavingStatus(RequestStatus.PENDING);
+
+    const onUploadProgress = (progressEvent) => {
+      const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
+      setUploadProgress(percentCompleted);
+    };
+
+    try {
+      const response = await uploadAssets(courseId, selectedFile, onUploadProgress);
+      const { url } = response.asset;
+
+      if (url) {
+        onChange(url);
+        onSavingStatus({ status: RequestStatus.SUCCESSFUL });
+        onClose();
+      }
+    } catch (error) {
+      onSavingStatus({ status: RequestStatus.FAILED });
+    } finally {
+      setDisabledUploadBtn(true);
+      setUploadProgress(0);
+      setPreviewUrl(null);
+    }
+  };
+
+  return {
+    intl,
+    accept,
+    uploadProgress,
+    previewUrl,
+    disabledUploadBtn,
+    handleSelectFile,
+    imageValidator,
+    handleCancel,
+    handleUpload,
+  };
+};
+
+export default useModalDropzone;
diff --git a/src/generic/modal-notification/index.jsx b/src/generic/modal-notification/index.jsx
new file mode 100644
index 0000000000..ae1dc2ba87
--- /dev/null
+++ b/src/generic/modal-notification/index.jsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ActionRow, AlertModal, Button } from '@openedx/paragon';
+
+const ModalNotification = ({
+  isOpen, title, message, handleCancel, handleAction, cancelButtonText, actionButtonText, variant, icon,
+}) => (
+  <AlertModal
+    title={title}
+    isOpen={isOpen}
+    variant={variant}
+    icon={icon}
+    footerNode={(
+      <ActionRow>
+        <Button variant="tertiary" onClick={handleCancel}>{cancelButtonText}</Button>
+        <Button onClick={handleAction}>{actionButtonText}</Button>
+      </ActionRow>
+    )}
+  >
+    <p>{message}</p>
+  </AlertModal>
+);
+
+ModalNotification.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  title: PropTypes.string.isRequired,
+  message: PropTypes.string.isRequired,
+  handleCancel: PropTypes.func.isRequired,
+  handleAction: PropTypes.func.isRequired,
+  cancelButtonText: PropTypes.string.isRequired,
+  actionButtonText: PropTypes.string.isRequired,
+  variant: PropTypes.string,
+  icon: PropTypes.elementType,
+};
+
+ModalNotification.defaultProps = {
+  variant: 'default',
+  icon: undefined,
+};
+
+export default ModalNotification;
diff --git a/src/generic/processing-notification/ProccessingNotification.scss b/src/generic/processing-notification/ProccessingNotification.scss
new file mode 100644
index 0000000000..455c16a407
--- /dev/null
+++ b/src/generic/processing-notification/ProccessingNotification.scss
@@ -0,0 +1,15 @@
+.processing-notification-icon {
+  animation: rotate 1s linear infinite;
+}
+
+.processing-notification-hide-close-button {
+  .btn-icon {
+    display: none;
+  }
+}
+
+.toast-container {
+  right: 1.25rem;
+  left: unset;
+  z-index: $zindex-popover;
+}
diff --git a/src/generic/processing-notification/ProcessingNotification.test.jsx b/src/generic/processing-notification/ProcessingNotification.test.jsx
new file mode 100644
index 0000000000..d2bbdbeaca
--- /dev/null
+++ b/src/generic/processing-notification/ProcessingNotification.test.jsx
@@ -0,0 +1,35 @@
+import userEvent from '@testing-library/user-event';
+import { initializeMocks, render, screen } from '../../testUtils';
+import ProcessingNotification from '.';
+
+const mockUndo = jest.fn();
+
+const props = {
+  title: 'ThIs IS a Test. OK?',
+  isShow: true,
+  action: {
+    label: 'Undo',
+    onClick: mockUndo,
+  },
+};
+
+describe('<ProcessingNotification />', () => {
+  beforeEach(() => {
+    initializeMocks();
+  });
+
+  it('renders successfully', () => {
+    render(<ProcessingNotification {...props} close={() => {}} />);
+    expect(screen.getByText(props.title)).toBeInTheDocument();
+    expect(screen.getByText('Undo')).toBeInTheDocument();
+    expect(screen.getByRole('alert').querySelector('.processing-notification-hide-close-button')).not.toBeInTheDocument();
+    userEvent.click(screen.getByText('Undo'));
+    expect(mockUndo).toHaveBeenCalled();
+  });
+
+  it('add hide-close-button class if no close action is passed', () => {
+    render(<ProcessingNotification {...props} />);
+    expect(screen.getByText(props.title)).toBeInTheDocument();
+    expect(screen.getByRole('alert').querySelector('.processing-notification-hide-close-button')).toBeInTheDocument();
+  });
+});
diff --git a/src/generic/processing-notification/data/selectors.js b/src/generic/processing-notification/data/selectors.js
new file mode 100644
index 0000000000..7d7ca18963
--- /dev/null
+++ b/src/generic/processing-notification/data/selectors.js
@@ -0,0 +1,4 @@
+export const getProcessingNotification = (state) => ({
+  isShow: state.processingNotification.isShow,
+  title: state.processingNotification.title,
+});
diff --git a/src/generic/processing-notification/data/slice.js b/src/generic/processing-notification/data/slice.js
new file mode 100644
index 0000000000..03e4e243f8
--- /dev/null
+++ b/src/generic/processing-notification/data/slice.js
@@ -0,0 +1,30 @@
+/* eslint-disable no-param-reassign */
+import { createSlice } from '@reduxjs/toolkit';
+
+import { NOTIFICATION_MESSAGES } from '../../../constants';
+
+const initialState = {
+  isShow: false,
+  title: NOTIFICATION_MESSAGES.empty,
+};
+
+const slice = createSlice({
+  name: 'processingNotification',
+  initialState,
+  reducers: {
+    showProcessingNotification: (state, { payload }) => {
+      state.isShow = true;
+      state.title = payload;
+    },
+    hideProcessingNotification: () => initialState,
+  },
+});
+
+export const {
+  showProcessingNotification,
+  hideProcessingNotification,
+} = slice.actions;
+
+export const {
+  reducer,
+} = slice;
diff --git a/src/generic/processing-notification/index.jsx b/src/generic/processing-notification/index.jsx
new file mode 100644
index 0000000000..42dc95711f
--- /dev/null
+++ b/src/generic/processing-notification/index.jsx
@@ -0,0 +1,39 @@
+import PropTypes from 'prop-types';
+import {
+  Icon, Toast,
+} from '@openedx/paragon';
+import { Settings as IconSettings } from '@openedx/paragon/icons';
+import classNames from 'classnames';
+
+const ProcessingNotification = ({
+  isShow, title, action, close,
+}) => (
+  <Toast
+    className={classNames({ 'processing-notification-hide-close-button': !close })}
+    show={isShow}
+    aria-hidden={isShow}
+    action={action && { ...action }}
+    onClose={close || (() => {})}
+  >
+    <span className="d-flex align-items-center">
+      <Icon className="processing-notification-icon mb-0 mr-2" src={IconSettings} />
+      <span className="font-weight-bold h4 mb-0 text-white">{title}</span>
+    </span>
+  </Toast>
+);
+
+ProcessingNotification.defaultProps = {
+  close: null,
+};
+
+ProcessingNotification.propTypes = {
+  isShow: PropTypes.bool.isRequired,
+  title: PropTypes.string.isRequired,
+  action: PropTypes.shape({
+    label: PropTypes.string.isRequired,
+    onClick: PropTypes.func,
+  }),
+  close: PropTypes.func,
+};
+
+export default ProcessingNotification;
diff --git a/src/generic/prompt-if-dirty/PromptIfDirty.jsx b/src/generic/prompt-if-dirty/PromptIfDirty.jsx
new file mode 100644
index 0000000000..a686ea2e87
--- /dev/null
+++ b/src/generic/prompt-if-dirty/PromptIfDirty.jsx
@@ -0,0 +1,24 @@
+import { useEffect } from 'react';
+import PropTypes from 'prop-types';
+
+const PromptIfDirty = ({ dirty }) => {
+  useEffect(() => {
+    // eslint-disable-next-line consistent-return
+    const handleBeforeUnload = (event) => {
+      if (dirty) {
+        event.preventDefault();
+      }
+    };
+    window.addEventListener('beforeunload', handleBeforeUnload);
+
+    return () => {
+      window.removeEventListener('beforeunload', handleBeforeUnload);
+    };
+  }, [dirty]);
+
+  return null;
+};
+PromptIfDirty.propTypes = {
+  dirty: PropTypes.bool.isRequired,
+};
+export default PromptIfDirty;
diff --git a/src/generic/prompt-if-dirty/PromptIfDirty.test.jsx b/src/generic/prompt-if-dirty/PromptIfDirty.test.jsx
new file mode 100644
index 0000000000..b429a7e137
--- /dev/null
+++ b/src/generic/prompt-if-dirty/PromptIfDirty.test.jsx
@@ -0,0 +1,72 @@
+import React from 'react';
+import { render, unmountComponentAtNode } from 'react-dom';
+import { act } from 'react-dom/test-utils';
+import PromptIfDirty from './PromptIfDirty';
+
+describe('PromptIfDirty', () => {
+  let container = null;
+  let mockEvent = null;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    mockEvent = new Event('beforeunload');
+    jest.spyOn(window, 'addEventListener');
+    jest.spyOn(window, 'removeEventListener');
+    jest.spyOn(mockEvent, 'preventDefault');
+    Object.defineProperty(mockEvent, 'returnValue', { writable: true });
+    mockEvent.returnValue = '';
+  });
+
+  afterEach(() => {
+    window.addEventListener.mockRestore();
+    window.removeEventListener.mockRestore();
+    mockEvent.preventDefault.mockRestore();
+    mockEvent = null;
+    unmountComponentAtNode(container);
+    container.remove();
+    container = null;
+  });
+
+  it('should add event listener on mount', () => {
+    act(() => {
+      render(<PromptIfDirty dirty />, container);
+    });
+
+    expect(window.addEventListener).toHaveBeenCalledWith('beforeunload', expect.any(Function));
+  });
+
+  it('should remove event listener on unmount', () => {
+    act(() => {
+      render(<PromptIfDirty dirty />, container);
+    });
+    act(() => {
+      unmountComponentAtNode(container);
+    });
+
+    expect(window.removeEventListener).toHaveBeenCalledWith('beforeunload', expect.any(Function));
+  });
+
+  it('should call preventDefault and set returnValue when dirty is true', () => {
+    act(() => {
+      render(<PromptIfDirty dirty />, container);
+    });
+    act(() => {
+      window.dispatchEvent(mockEvent);
+    });
+
+    expect(mockEvent.preventDefault).toHaveBeenCalled();
+    expect(mockEvent.returnValue).toBe('');
+  });
+
+  it('should not call preventDefault when dirty is false', () => {
+    act(() => {
+      render(<PromptIfDirty dirty={false} />, container);
+    });
+    act(() => {
+      window.dispatchEvent(mockEvent);
+    });
+
+    expect(mockEvent.preventDefault).not.toHaveBeenCalled();
+  });
+});
diff --git a/src/generic/promptIfDirty/usePromptIfDirty.test.jsx b/src/generic/promptIfDirty/usePromptIfDirty.test.jsx
new file mode 100644
index 0000000000..a82597ad43
--- /dev/null
+++ b/src/generic/promptIfDirty/usePromptIfDirty.test.jsx
@@ -0,0 +1,49 @@
+import { renderHook } from '@testing-library/react-hooks';
+import usePromptIfDirty from './usePromptIfDirty';
+
+describe('usePromptIfDirty', () => {
+  let mockEvent = null;
+
+  beforeEach(() => {
+    mockEvent = new Event('beforeunload');
+    jest.spyOn(window, 'addEventListener');
+    jest.spyOn(window, 'removeEventListener');
+    jest.spyOn(mockEvent, 'preventDefault');
+    Object.defineProperty(mockEvent, 'returnValue', { writable: true });
+  });
+
+  afterEach(() => {
+    window.addEventListener.mockRestore();
+    window.removeEventListener.mockRestore();
+    mockEvent.preventDefault.mockRestore();
+    mockEvent = null;
+  });
+
+  it('should add event listener on mount', () => {
+    renderHook(() => usePromptIfDirty(() => true));
+
+    expect(window.addEventListener).toHaveBeenCalledWith('beforeunload', expect.any(Function));
+  });
+
+  it('should remove event listener on unmount', () => {
+    const { unmount } = renderHook(() => usePromptIfDirty(() => true));
+    unmount();
+
+    expect(window.removeEventListener).toHaveBeenCalledWith('beforeunload', expect.any(Function));
+  });
+
+  it('should call preventDefault and set returnValue when dirty is true', () => {
+    renderHook(() => usePromptIfDirty(() => true));
+    window.dispatchEvent(mockEvent);
+
+    expect(mockEvent.preventDefault).toHaveBeenCalled();
+    expect(mockEvent.returnValue).toBe(true);
+  });
+
+  it('should not call preventDefault when dirty is false', () => {
+    renderHook(() => usePromptIfDirty(() => false));
+    window.dispatchEvent(mockEvent);
+
+    expect(mockEvent.preventDefault).not.toHaveBeenCalled();
+  });
+});
diff --git a/src/generic/promptIfDirty/usePromptIfDirty.ts b/src/generic/promptIfDirty/usePromptIfDirty.ts
new file mode 100644
index 0000000000..c14be27632
--- /dev/null
+++ b/src/generic/promptIfDirty/usePromptIfDirty.ts
@@ -0,0 +1,23 @@
+import { useEffect } from 'react';
+
+const usePromptIfDirty = (checkIfDirty : () => boolean) => {
+  useEffect(() => {
+    // eslint-disable-next-line consistent-return
+    const handleBeforeUnload = (event) => {
+      if (checkIfDirty()) {
+        event.preventDefault();
+        // Included for legacy support, e.g. Chrome/Edge < 119
+        event.returnValue = true; // eslint-disable-line no-param-reassign
+      }
+    };
+    window.addEventListener('beforeunload', handleBeforeUnload);
+
+    return () => {
+      window.removeEventListener('beforeunload', handleBeforeUnload);
+    };
+  }, [checkIfDirty]);
+
+  return null;
+};
+
+export default usePromptIfDirty;
diff --git a/src/generic/saving-error-alert/SavingErrorAlert.jsx b/src/generic/saving-error-alert/SavingErrorAlert.jsx
new file mode 100644
index 0000000000..db3431a0a9
--- /dev/null
+++ b/src/generic/saving-error-alert/SavingErrorAlert.jsx
@@ -0,0 +1,67 @@
+import { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { Warning as WarningIcon } from '@openedx/paragon/icons';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import { RequestStatus } from '../../data/constants';
+import AlertMessage from '../alert-message';
+import messages from './messages';
+
+const SavingErrorAlert = ({
+  savingStatus,
+  errorMessage,
+}) => {
+  const intl = useIntl();
+  const [showAlert, setShowAlert] = useState(false);
+  const [isOnline, setIsOnline] = useState(window.navigator.onLine);
+  const isQueryFailed = savingStatus === RequestStatus.FAILED;
+
+  useEffect(() => {
+    const handleOnlineStatus = () => setIsOnline(window.navigator.onLine);
+    const events = ['online', 'offline'];
+
+    events.forEach((event) => {
+      window.addEventListener(event, handleOnlineStatus);
+    });
+
+    return () => {
+      events.forEach((event) => {
+        window.removeEventListener(event, handleOnlineStatus);
+      });
+    };
+  }, [isOnline]);
+
+  useEffect(() => {
+    setShowAlert((!isOnline && isQueryFailed) || isQueryFailed);
+  }, [isQueryFailed, isOnline]);
+
+  return (
+    <AlertMessage
+      show={showAlert}
+      variant="danger"
+      icon={WarningIcon}
+      title={intl.formatMessage(messages.warningTitle)}
+      description={
+        errorMessage || intl.formatMessage(messages.warningDescription)
+      }
+      aria-hidden="true"
+      aria-labelledby={intl.formatMessage(
+        messages.warningTitleAriaLabelledBy,
+      )}
+      aria-describedby={intl.formatMessage(
+        messages.warningDescriptionAriaDescribedBy,
+      )}
+    />
+  );
+};
+
+SavingErrorAlert.defaultProps = {
+  errorMessage: undefined,
+};
+
+SavingErrorAlert.propTypes = {
+  savingStatus: PropTypes.string.isRequired,
+  errorMessage: PropTypes.string,
+};
+
+export default SavingErrorAlert;
diff --git a/src/generic/saving-error-alert/index.js b/src/generic/saving-error-alert/index.js
new file mode 100644
index 0000000000..4dd5d3e38f
--- /dev/null
+++ b/src/generic/saving-error-alert/index.js
@@ -0,0 +1,2 @@
+export { default as SavingErrorAlert } from './SavingErrorAlert';
+export { handleResponseErrors } from './utils';
diff --git a/src/generic/saving-error-alert/messages.js b/src/generic/saving-error-alert/messages.js
new file mode 100644
index 0000000000..d45bb3bd47
--- /dev/null
+++ b/src/generic/saving-error-alert/messages.js
@@ -0,0 +1,26 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  warningTitle: {
+    id: 'course-authoring.generic.saving-error-alert.title',
+    defaultMessage: 'Studio\'s having trouble saving your work',
+    description: 'Title for an alert indicating saving error in the studio environment',
+  },
+  warningDescription: {
+    id: 'course-authoring.generic.saving-error-alert.description',
+    defaultMessage: 'This may be happening because of an error with our server or your internet connection. Try refreshing the page or making sure you are online.',
+    description: 'Description providing possible reasons and solutions for saving error in the studio environment',
+  },
+  warningTitleAriaLabelledBy: {
+    id: 'course-authoring.generic.saving-error-alert.title.aria.labelled-by',
+    defaultMessage: 'saving-error-alert-title',
+    description: 'ARIA label ID for the title of the saving error alert',
+  },
+  warningDescriptionAriaDescribedBy: {
+    id: 'course-authoring.generic.saving-error-alert.aria.described-by',
+    defaultMessage: 'saving-error-alert-description',
+    description: 'ARIA description ID for the saving error alert',
+  },
+});
+
+export default messages;
diff --git a/src/generic/saving-error-alert/utils.js b/src/generic/saving-error-alert/utils.js
new file mode 100644
index 0000000000..c1d5637665
--- /dev/null
+++ b/src/generic/saving-error-alert/utils.js
@@ -0,0 +1,25 @@
+import { RequestStatus } from '../../data/constants';
+
+const handleResponseErrors = (error, dispatch, savingStatusFunction) => {
+  let errorMessage = '';
+
+  try {
+    const {
+      customAttributes: { httpErrorResponseData },
+    } = error;
+    const parsedData = JSON.parse(httpErrorResponseData);
+    errorMessage = parsedData?.error || errorMessage;
+  } catch (err) {
+    errorMessage = '';
+  }
+
+  dispatch(
+    savingStatusFunction({
+      status: RequestStatus.FAILED,
+      errorMessage,
+    }),
+  );
+  return false;
+};
+
+export { handleResponseErrors };
diff --git a/src/generic/section-sub-header/SectionSubHeader.scss b/src/generic/section-sub-header/SectionSubHeader.scss
new file mode 100644
index 0000000000..fc341029e3
--- /dev/null
+++ b/src/generic/section-sub-header/SectionSubHeader.scss
@@ -0,0 +1,12 @@
+.section-sub-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: .75rem;
+  border-bottom: $border-width solid $light-400;
+
+  h2 {
+    color: $black;
+    margin-bottom: .75rem;
+  }
+}
diff --git a/src/generic/section-sub-header/SectionSubHeader.test.jsx b/src/generic/section-sub-header/SectionSubHeader.test.jsx
new file mode 100644
index 0000000000..e639968451
--- /dev/null
+++ b/src/generic/section-sub-header/SectionSubHeader.test.jsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import SectionSubHeader from '.';
+
+const props = {
+  title: 'foo-title',
+  description: 'bar-description',
+};
+
+describe('<SectionSubHeader />', () => {
+  it('renders successfully', () => {
+    const { getByText } = render(<SectionSubHeader {...props} />);
+    expect(getByText(props.title)).toBeInTheDocument();
+    expect(getByText(props.description)).toBeInTheDocument();
+  });
+});
diff --git a/src/generic/section-sub-header/index.jsx b/src/generic/section-sub-header/index.jsx
new file mode 100644
index 0000000000..facf8db8b1
--- /dev/null
+++ b/src/generic/section-sub-header/index.jsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const SectionSubHeader = ({ title, description }) => (
+  <header className="section-sub-header">
+    <h2 className="lead">{title}</h2>
+    <span className="small text-gray-700">{description}</span>
+  </header>
+);
+
+SectionSubHeader.defaultProps = {
+  description: '',
+};
+
+SectionSubHeader.propTypes = {
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+};
+
+export default SectionSubHeader;
diff --git a/src/generic/styles.scss b/src/generic/styles.scss
new file mode 100644
index 0000000000..be2da4fc84
--- /dev/null
+++ b/src/generic/styles.scss
@@ -0,0 +1,15 @@
+@import "./help-sidebar/HelpSidebar";
+@import "./course-upload-image/CourseUploadImage";
+@import "./sub-header/SubHeader";
+@import "./section-sub-header/SectionSubHeader";
+@import "./processing-notification/ProccessingNotification";
+@import "./create-or-rerun-course/CreateOrRerunCourseForm";
+@import "./WysiwygEditor";
+@import "./course-stepper/CouseStepper";
+@import "./divider/Divider";
+@import "./clipboard/paste-component/PasteComponent";
+@import "./tag-count/TagCount";
+@import "./modal-dropzone/ModalDropzone";
+@import "./configure-modal/ConfigureModal";
+@import "./drag-helper/SortableItem";
+@import "./block-type-utils";
diff --git a/src/generic/sub-header/SubHeader.jsx b/src/generic/sub-header/SubHeader.jsx
new file mode 100644
index 0000000000..ffe3606b6c
--- /dev/null
+++ b/src/generic/sub-header/SubHeader.jsx
@@ -0,0 +1,82 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ActionRow } from '@openedx/paragon';
+
+const SubHeader = ({
+  title,
+  subtitle,
+  breadcrumbs,
+  contentTitle,
+  description,
+  instruction,
+  headerActions,
+  titleActions,
+  hideBorder,
+  withSubHeaderContent,
+}) => (
+  <div className={`${!hideBorder && 'border-bottom border-light-400'} mb-3`}>
+    <header className="sub-header">
+      <h2 className="sub-header-title">
+        <small className="sub-header-title-subtitle">{subtitle}</small>
+        {breadcrumbs && (
+          <div className="sub-header-breadcrumbs">{breadcrumbs}</div>
+        )}
+        {title}
+        {titleActions && (
+          <ActionRow className="ml-auto mt-2 justify-content-start">
+            {titleActions}
+          </ActionRow>
+        )}
+      </h2>
+      {headerActions && (
+        <ActionRow className="ml-auto flex-shrink-0 sub-header-actions">
+          {headerActions}
+        </ActionRow>
+      )}
+    </header>
+    {contentTitle && withSubHeaderContent && (
+      <header className="sub-header-content">
+        <h2 className="sub-header-content-title">{contentTitle}</h2>
+        <span className="small text-gray-700">{description}</span>
+      </header>
+    )}
+    {instruction && (
+      <p className="sub-header-instructions mb-4">{instruction}</p>
+    )}
+  </div>
+);
+
+SubHeader.defaultProps = {
+  instruction: '',
+  description: '',
+  subtitle: '',
+  breadcrumbs: '',
+  contentTitle: '',
+  headerActions: null,
+  titleActions: null,
+  hideBorder: false,
+  withSubHeaderContent: true,
+};
+
+SubHeader.propTypes = {
+  title: PropTypes.oneOfType([
+    PropTypes.node,
+    PropTypes.string,
+  ]).isRequired,
+  subtitle: PropTypes.string,
+  breadcrumbs: PropTypes.oneOfType([
+    PropTypes.node,
+    PropTypes.string,
+  ]),
+  contentTitle: PropTypes.string,
+  description: PropTypes.string,
+  instruction: PropTypes.oneOfType([
+    PropTypes.element,
+    PropTypes.string,
+  ]),
+  headerActions: PropTypes.node,
+  titleActions: PropTypes.node,
+  hideBorder: PropTypes.bool,
+  withSubHeaderContent: PropTypes.bool,
+};
+export default SubHeader;
diff --git a/src/generic/sub-header/SubHeader.scss b/src/generic/sub-header/SubHeader.scss
new file mode 100644
index 0000000000..dc76222220
--- /dev/null
+++ b/src/generic/sub-header/SubHeader.scss
@@ -0,0 +1,40 @@
+.sub-header {
+  display: flex;
+  gap: map-get($spacers, 4\.5);
+
+  .sub-header-actions {
+    margin-bottom: 1.75rem;
+    align-self: flex-end;
+  }
+}
+
+.sub-header-title {
+  font: normal $font-weight-bold 2rem/2.25rem $font-family-base;
+  color: $black;
+
+  .sub-header-title-subtitle,
+  .sub-header-breadcrumbs {
+    font: normal $font-weight-normal .875rem/1.5rem $font-family-base;
+    display: block;
+    color: $text-color-base;
+  }
+}
+
+.sub-header-content-title {
+  font: normal $font-weight-normal 1.375rem/1.5 $font-family-base;
+  margin-bottom: 0;
+  color: $black;
+}
+
+.sub-header-instructions {
+  font: normal $font-weight-normal .875rem/1.5rem $font-family-base;
+  color: $text-color-base;
+}
+
+.sub-header-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 1.5rem;
+  margin-bottom: 12px;
+}
diff --git a/src/generic/tag-count/TagCount.scss b/src/generic/tag-count/TagCount.scss
new file mode 100644
index 0000000000..2002e2e8e5
--- /dev/null
+++ b/src/generic/tag-count/TagCount.scss
@@ -0,0 +1,3 @@
+.generic-tag-count.zero-count {
+  opacity: .4;
+}
diff --git a/src/generic/tag-count/TagCount.test.jsx b/src/generic/tag-count/TagCount.test.jsx
new file mode 100644
index 0000000000..bb88d44a52
--- /dev/null
+++ b/src/generic/tag-count/TagCount.test.jsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import TagCount from '.';
+
+describe('<TagCount>', () => {
+  it('should render the component', () => {
+    render(<TagCount count={17} />);
+    expect(screen.getByText('17')).toBeInTheDocument();
+  });
+
+  it('should render the component with zero', () => {
+    render(<TagCount count={0} />);
+    expect(screen.getByText('0')).toBeInTheDocument();
+  });
+
+  it('should render a button with onClick', () => {
+    render(<TagCount count={17} onClick={() => {}} />);
+    expect(screen.getByRole('button', {
+      name: /17/i,
+    }));
+  });
+});
diff --git a/src/generic/tag-count/index.jsx b/src/generic/tag-count/index.jsx
new file mode 100644
index 0000000000..bb6dada9d7
--- /dev/null
+++ b/src/generic/tag-count/index.jsx
@@ -0,0 +1,38 @@
+import PropTypes from 'prop-types';
+import { Icon, Button } from '@openedx/paragon';
+import { Tag } from '@openedx/paragon/icons';
+import classNames from 'classnames';
+
+const TagCount = ({ count, onClick }) => {
+  const renderContent = () => (
+    <>
+      <Icon className="mr-1 pt-1" src={Tag} />
+      {count}
+    </>
+  );
+
+  return (
+    <div className={
+      classNames('generic-tag-count d-flex', { 'zero-count': count === 0 })
+    }
+    >
+      { onClick ? (
+        <Button variant="tertiary" onClick={onClick}>
+          {renderContent()}
+        </Button>
+      )
+        : renderContent()}
+    </div>
+  );
+};
+
+TagCount.defaultProps = {
+  onClick: undefined,
+};
+
+TagCount.propTypes = {
+  count: PropTypes.number.isRequired,
+  onClick: PropTypes.func,
+};
+
+export default TagCount;
diff --git a/src/generic/toast-context/index.test.tsx b/src/generic/toast-context/index.test.tsx
new file mode 100644
index 0000000000..11294b0699
--- /dev/null
+++ b/src/generic/toast-context/index.test.tsx
@@ -0,0 +1,77 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { initializeMockApp } from '@edx/frontend-platform';
+import { AppProvider } from '@edx/frontend-platform/react';
+import { ToastContext, ToastProvider } from '.';
+import initializeStore from '../../store';
+
+export interface WraperProps {
+  children: React.ReactNode;
+}
+
+const TestComponentToShow = () => {
+  const { showToast } = React.useContext(ToastContext);
+
+  React.useEffect(() => {
+    showToast('This is the Toast!');
+  }, [showToast]);
+
+  return <div>Content</div>;
+};
+
+const TestComponentToClose = () => {
+  const { showToast, closeToast } = React.useContext(ToastContext);
+
+  React.useEffect(() => {
+    showToast('This is the Toast!');
+    closeToast();
+  }, [showToast]);
+
+  return <div>Content</div>;
+};
+
+let store;
+const RootWrapper = ({ children }: WraperProps) => (
+  <AppProvider store={store}>
+    <ToastProvider>
+      {children}
+    </ToastProvider>
+  </AppProvider>
+);
+
+describe('<ToastProvider />', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+    store = initializeStore();
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should show toast', async () => {
+    render(<RootWrapper><TestComponentToShow /></RootWrapper>);
+    expect(await screen.findByText('This is the Toast!')).toBeInTheDocument();
+  });
+
+  it('should close toast after 5000ms', async () => {
+    render(<RootWrapper><TestComponentToShow /></RootWrapper>);
+    expect(await screen.findByText('This is the Toast!')).toBeInTheDocument();
+    jest.advanceTimersByTime(6000);
+    expect(screen.queryByText('This is the Toast!')).not.toBeInTheDocument();
+  });
+
+  it('should close toast', async () => {
+    render(<RootWrapper><TestComponentToClose /></RootWrapper>);
+    expect(await screen.findByText('Content')).toBeInTheDocument();
+    expect(screen.queryByText('This is the Toast!')).not.toBeInTheDocument();
+  });
+});
diff --git a/src/generic/toast-context/index.tsx b/src/generic/toast-context/index.tsx
new file mode 100644
index 0000000000..ea47dce8d2
--- /dev/null
+++ b/src/generic/toast-context/index.tsx
@@ -0,0 +1,78 @@
+import React from 'react';
+
+import ProcessingNotification from '../processing-notification';
+
+export interface ToastActionData {
+  label: string;
+  onClick: () => void;
+}
+
+export interface ToastContextData {
+  toastMessage: string | null;
+  toastAction?: ToastActionData;
+  showToast: (message: string, action?: ToastActionData) => void;
+  closeToast: () => void;
+}
+
+export interface ToastProviderProps {
+  children: React.ReactNode;
+}
+
+/**
+ * Global context to keep track of popup message(s) that appears to user after
+ * they take an action like creating or deleting something.
+ */
+export const ToastContext = React.createContext<ToastContextData>({
+  toastMessage: null,
+  toastAction: undefined,
+  showToast: () => {},
+  closeToast: () => {},
+});
+
+/**
+ * React component to provide `ToastContext` to the app
+ */
+export const ToastProvider = (props: ToastProviderProps) => {
+  // TODO, We can convert this to a queue of messages,
+  // see: https://github.com/open-craft/frontend-app-course-authoring/pull/38#discussion_r1638990647
+
+  const [toastMessage, setToastMessage] = React.useState<string | null>(null);
+  const [toastAction, setToastAction] = React.useState<ToastActionData | undefined>(undefined);
+
+  const resetState = React.useCallback(() => {
+    setToastMessage(null);
+    setToastAction(undefined);
+  }, []);
+
+  React.useEffect(() => () => {
+    // Cleanup function to avoid updating state on unmounted component
+    resetState();
+  }, []);
+
+  const showToast = React.useCallback((message, action?: ToastActionData) => {
+    setToastMessage(message);
+    setToastAction(action);
+  }, [setToastMessage, setToastAction]);
+  const closeToast = React.useCallback(() => resetState(), [setToastMessage, setToastAction]);
+
+  const context = React.useMemo(() => ({
+    toastMessage,
+    toastAction,
+    showToast,
+    closeToast,
+  }), [toastMessage, toastAction, showToast, closeToast]);
+
+  return (
+    <ToastContext.Provider value={context}>
+      {props.children}
+      { toastMessage && (
+        <ProcessingNotification
+          isShow={toastMessage !== null}
+          title={toastMessage}
+          action={toastAction}
+          close={closeToast}
+        />
+      )}
+    </ToastContext.Provider>
+  );
+};
diff --git a/src/generic/utils.js b/src/generic/utils.js
new file mode 100644
index 0000000000..c24e5a1646
--- /dev/null
+++ b/src/generic/utils.js
@@ -0,0 +1,16 @@
+import { isEmpty } from 'lodash';
+
+/**
+ * Generate the string for the page <title>
+ * @param {string} courseOrSectionName The name of the course, or the section of the MFE that the user is in currently
+ * @param {string} pageName The name of the current page
+ * @returns {string} The combined title
+ */
+const getPageHeadTitle = (courseOrSectionName, pageName) => {
+  if (isEmpty(courseOrSectionName)) {
+    return `${pageName} | ${process.env.SITE_NAME}`;
+  }
+  return `${pageName} | ${courseOrSectionName} | ${process.env.SITE_NAME}`;
+};
+
+export default getPageHeadTitle;
diff --git a/src/generic/utils.test.js b/src/generic/utils.test.js
new file mode 100644
index 0000000000..587164d9d6
--- /dev/null
+++ b/src/generic/utils.test.js
@@ -0,0 +1,16 @@
+import getPageHeadTitle from './utils';
+
+describe('utils', () => {
+  describe('getPageHeader', () => {
+    it('should return with page name and site name', () => {
+      const expected = 'pageName | edX';
+      const actual = getPageHeadTitle(null, 'pageName');
+      expect(expected).toEqual(actual);
+    });
+    it('should return with page name, course name, and site name', () => {
+      const expected = 'pageName | courseName | edX';
+      const actual = getPageHeadTitle('courseName', 'pageName');
+      expect(expected).toEqual(actual);
+    });
+  });
+});
diff --git a/src/grading-settings/GradingSettings.jsx b/src/grading-settings/GradingSettings.jsx
new file mode 100644
index 0000000000..bcb3a8f089
--- /dev/null
+++ b/src/grading-settings/GradingSettings.jsx
@@ -0,0 +1,286 @@
+import { useIntl } from '@edx/frontend-platform/i18n';
+import {
+  Button, Container, Layout, StatefulButton,
+} from '@openedx/paragon';
+import { Add as IconAdd, CheckCircle, Warning } from '@openedx/paragon/icons';
+import {
+  useCourseSettings,
+  useGradingSettings,
+  useGradingSettingUpdater,
+} from 'CourseAuthoring/grading-settings/data/apiHooks';
+import PropTypes from 'prop-types';
+import React, { useEffect, useState } from 'react';
+import { Helmet } from 'react-helmet';
+import { STATEFUL_BUTTON_STATES } from '../constants';
+import AlertMessage from '../generic/alert-message';
+import InternetConnectionAlert from '../generic/internet-connection-alert';
+
+import { useModel } from '../generic/model-store';
+import ConnectionErrorAlert from '../generic/ConnectionErrorAlert';
+import SectionSubHeader from '../generic/section-sub-header';
+import SubHeader from '../generic/sub-header/SubHeader';
+import getPageHeadTitle from '../generic/utils';
+import AssignmentSection from './assignment-section';
+import CreditSection from './credit-section';
+import DeadlineSection from './deadline-section';
+import GradingScale from './grading-scale/GradingScale';
+import GradingSidebar from './grading-sidebar';
+import { useConvertGradeCutoffs, useUpdateGradingData } from './hooks';
+import messages from './messages';
+
+const GradingSettings = ({ courseId }) => {
+  const intl = useIntl();
+  const {
+    data: gradingSettings,
+    isLoading: isGradingSettingsLoading,
+    isError: isGradingSettingsError,
+  } = useGradingSettings(courseId);
+  const {
+    data: courseSettingsData,
+    isLoading: isCourseSettingsLoading,
+    isError: isCourseSettingsError,
+  } = useCourseSettings(courseId);
+  const {
+    mutate: updateGradingSettings,
+    isLoading: savePending,
+    isSuccess: savingStatus,
+    isError: savingFailed,
+  } = useGradingSettingUpdater(courseId);
+
+  const courseAssignmentLists = gradingSettings?.courseAssignmentLists;
+  const courseGradingDetails = gradingSettings?.courseDetails;
+  const isLoadingDenied = isGradingSettingsError || isCourseSettingsError;
+  const [showSuccessAlert, setShowSuccessAlert] = useState(false);
+  const isLoading = isCourseSettingsLoading || isGradingSettingsLoading;
+  const [isQueryPending, setIsQueryPending] = useState(false);
+  const [showOverrideInternetConnectionAlert, setOverrideInternetConnectionAlert] = useState(false);
+  const [eligibleGrade, setEligibleGrade] = useState(null);
+
+  const courseName = useModel('courseDetails', courseId)?.name;
+
+  const {
+    graders,
+    resetDataRef,
+    setGradingData,
+    gradingData,
+    gradeCutoffs,
+    gracePeriod,
+    minimumGradeCredit,
+    showSavePrompt,
+    setShowSavePrompt,
+    handleResetPageData,
+    handleAddAssignment,
+    handleRemoveAssignment,
+  } = useUpdateGradingData(courseGradingDetails, setOverrideInternetConnectionAlert, setShowSuccessAlert);
+
+  const {
+    gradeLetters,
+    gradeValues,
+    sortedGrades,
+  } = useConvertGradeCutoffs(gradeCutoffs);
+
+  useEffect(() => {
+    if (savingStatus) {
+      setShowSuccessAlert(!showSuccessAlert);
+      setShowSavePrompt(!showSavePrompt);
+      setTimeout(() => setShowSuccessAlert(false), 15000);
+      setIsQueryPending(!isQueryPending);
+      window.scrollTo({ top: 0, behavior: 'smooth' });
+    }
+  }, [savePending]);
+
+  if (isLoadingDenied) {
+    return (
+      <Container size="xl" className="course-unit px-4 mt-4">
+        <ConnectionErrorAlert />
+      </Container>
+    );
+  }
+
+  if (isLoading) {
+    return null;
+  }
+
+  const handleQueryProcessing = () => {
+    setShowSuccessAlert(false);
+    updateGradingSettings(gradingData);
+  };
+
+  const handleSendGradingSettingsData = () => {
+    setIsQueryPending(true);
+    setOverrideInternetConnectionAlert(true);
+  };
+
+  const handleInternetConnectionFailed = () => {
+    setShowSavePrompt(false);
+    setShowSuccessAlert(false);
+    setIsQueryPending(false);
+    setOverrideInternetConnectionAlert(true);
+  };
+
+  const updateValuesButtonState = {
+    labels: {
+      default: intl.formatMessage(messages.buttonSaveText),
+      pending: intl.formatMessage(messages.buttonSavingText),
+    },
+    disabledStates: [STATEFUL_BUTTON_STATES.pending],
+  };
+
+  return (
+    <>
+      <Helmet>
+        <title>{getPageHeadTitle(courseName, intl.formatMessage(messages.headingTitle))}</title>
+      </Helmet>
+      <Container size="xl" className="grading px-4">
+        <div className="mt-5">
+          <AlertMessage
+            show={showSuccessAlert}
+            variant="success"
+            icon={CheckCircle}
+            title={intl.formatMessage(messages.alertSuccess)}
+            aria-hidden="true"
+            aria-labelledby={intl.formatMessage(messages.alertSuccessAriaLabelledby)}
+            aria-describedby={intl.formatMessage(messages.alertSuccessAriaDescribedby)}
+          />
+        </div>
+        <div>
+          <section className="setting-items mb-4">
+            <Layout
+              lg={[{ span: 9 }, { span: 3 }]}
+              md={[{ span: 9 }, { span: 3 }]}
+              sm={[{ span: 9 }, { span: 3 }]}
+              xs={[{ span: 9 }, { span: 3 }]}
+              xl={[{ span: 9 }, { span: 3 }]}
+            >
+              <Layout.Element>
+                <article>
+                  <SubHeader
+                    title={intl.formatMessage(messages.headingTitle)}
+                    subtitle={intl.formatMessage(messages.headingSubtitle)}
+                    contentTitle={intl.formatMessage(messages.policy)}
+                    description={intl.formatMessage(messages.policiesDescription)}
+                  />
+                  <section>
+                    <GradingScale
+                      gradeCutoffs={gradeCutoffs}
+                      showSavePrompt={setShowSavePrompt}
+                      gradeLetters={gradeLetters}
+                      gradeValues={gradeValues}
+                      sortedGrades={sortedGrades}
+                      setShowSuccessAlert={setShowSuccessAlert}
+                      setGradingData={setGradingData}
+                      resetDataRef={resetDataRef}
+                      setOverrideInternetConnectionAlert={setOverrideInternetConnectionAlert}
+                      setEligibleGrade={setEligibleGrade}
+                      defaultGradeDesignations={gradingSettings?.defaultGradeDesignations}
+                    />
+                  </section>
+                  {courseSettingsData.creditEligibilityEnabled && courseSettingsData.isCreditCourse && (
+                    <section>
+                      <SectionSubHeader
+                        title={intl.formatMessage(messages.creditEligibilitySectionTitle)}
+                        description={intl.formatMessage(messages.creditEligibilitySectionDescription)}
+                      />
+                      <CreditSection
+                        eligibleGrade={eligibleGrade}
+                        setShowSavePrompt={setShowSavePrompt}
+                        minimumGradeCredit={minimumGradeCredit}
+                        setGradingData={setGradingData}
+                        setShowSuccessAlert={setShowSuccessAlert}
+                      />
+                    </section>
+                  )}
+                  <section>
+                    <SectionSubHeader
+                      title={intl.formatMessage(messages.gradingRulesPoliciesSectionTitle)}
+                      description={intl.formatMessage(messages.gradingRulesPoliciesSectionDescription)}
+                    />
+                    <DeadlineSection
+                      setShowSavePrompt={setShowSavePrompt}
+                      gracePeriod={gracePeriod}
+                      setGradingData={setGradingData}
+                      setShowSuccessAlert={setShowSuccessAlert}
+                    />
+                  </section>
+                  <section>
+                    <header className="row justify-content-between align-items-center mt-4 mx-0 mb-2">
+                      <h2 className="lead">
+                        {intl.formatMessage(messages.assignmentTypeSectionTitle)}
+                      </h2>
+                      <span className="small text-gray-700">
+                        {intl.formatMessage(messages.assignmentTypeSectionDescription)}
+                      </span>
+                    </header>
+                    <AssignmentSection
+                      handleRemoveAssignment={handleRemoveAssignment}
+                      setShowSavePrompt={setShowSavePrompt}
+                      graders={graders}
+                      setGradingData={setGradingData}
+                      courseAssignmentLists={courseAssignmentLists}
+                      setShowSuccessAlert={setShowSuccessAlert}
+                    />
+                    <Button
+                      variant="primary"
+                      iconBefore={IconAdd}
+                      onClick={handleAddAssignment}
+                    >
+                      {intl.formatMessage(messages.addNewAssignmentTypeBtn)}
+                    </Button>
+                  </section>
+                </article>
+              </Layout.Element>
+              <Layout.Element>
+                <GradingSidebar
+                  courseId={courseId}
+                  intl={intl}
+                  proctoredExamSettingsUrl={courseSettingsData.mfeProctoredExamSettingsUrl}
+                />
+              </Layout.Element>
+            </Layout>
+          </section>
+        </div>
+      </Container>
+      <div className="alert-toast">
+        {showOverrideInternetConnectionAlert && (
+          <InternetConnectionAlert
+            isFailed={savingFailed}
+            isQueryPending={isQueryPending}
+            onQueryProcessing={handleQueryProcessing}
+            onInternetConnectionFailed={handleInternetConnectionFailed}
+          />
+        )}
+        <AlertMessage
+          show={showSavePrompt}
+          aria-hidden={!showSavePrompt}
+          aria-labelledby={intl.formatMessage(messages.alertWarningAriaLabelledby)}
+          aria-describedby={intl.formatMessage(messages.alertWarningAriaDescribedby)}
+          data-testid="grading-settings-save-alert"
+          role="dialog"
+          actions={[
+            !isQueryPending && (
+              <Button variant="tertiary" onClick={handleResetPageData}>
+                {intl.formatMessage(messages.buttonCancelText)}
+              </Button>
+            ),
+            <StatefulButton
+              key="statefulBtn"
+              onClick={handleSendGradingSettingsData}
+              state={isQueryPending ? STATEFUL_BUTTON_STATES.pending : STATEFUL_BUTTON_STATES.default}
+              {...updateValuesButtonState}
+            />,
+          ].filter(Boolean)}
+          variant="warning"
+          icon={Warning}
+          title={intl.formatMessage(messages.alertWarning)}
+          description={intl.formatMessage(messages.alertWarningDescriptions)}
+        />
+      </div>
+    </>
+  );
+};
+
+GradingSettings.propTypes = {
+  courseId: PropTypes.string.isRequired,
+};
+
+export default GradingSettings;
diff --git a/src/grading-settings/GradingSettings.test.jsx b/src/grading-settings/GradingSettings.test.jsx
new file mode 100644
index 0000000000..686cf9acd1
--- /dev/null
+++ b/src/grading-settings/GradingSettings.test.jsx
@@ -0,0 +1,121 @@
+import { initializeMockApp } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { injectIntl, IntlProvider } from '@edx/frontend-platform/i18n';
+import { AppProvider } from '@edx/frontend-platform/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import {
+  act, fireEvent, render, screen,
+} from '@testing-library/react';
+import MockAdapter from 'axios-mock-adapter';
+
+import initializeStore from '../store';
+import gradingSettings from './__mocks__/gradingSettings';
+import { getCourseSettingsApiUrl, getGradingSettingsApiUrl } from './data/api';
+import * as apiHooks from './data/apiHooks';
+import GradingSettings from './GradingSettings';
+import messages from './messages';
+
+const courseId = '123';
+let axiosMock;
+let store;
+
+const queryClient = new QueryClient();
+
+const RootWrapper = () => (
+  <AppProvider store={store}>
+    <IntlProvider locale="en" messages={{}}>
+      <QueryClientProvider client={queryClient}>
+        <GradingSettings intl={injectIntl} courseId={courseId} />
+      </QueryClientProvider>
+    </IntlProvider>
+  </AppProvider>
+);
+
+describe('<GradingSettings />', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3, username: 'abc123', administrator: true, roles: [],
+      },
+    });
+
+    store = initializeStore();
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+    axiosMock
+      .onGet(getGradingSettingsApiUrl(courseId))
+      .reply(200, gradingSettings);
+    axiosMock
+      .onPost(getGradingSettingsApiUrl(courseId))
+      .reply(200, {});
+    axiosMock.onGet(getCourseSettingsApiUrl(courseId))
+      .reply(200, {});
+    render(<RootWrapper />);
+  });
+
+  function testSaving() {
+    const saveBtn = screen.getByText(messages.buttonSaveText.defaultMessage);
+    expect(saveBtn).toBeInTheDocument();
+    fireEvent.click(saveBtn);
+    expect(screen.getByText(messages.buttonSavingText.defaultMessage)).toBeInTheDocument();
+  }
+
+  function setOnlineStatus(isOnline) {
+    jest.spyOn(navigator, 'onLine', 'get').mockReturnValue(isOnline);
+    act(() => {
+      window.dispatchEvent(new window.Event(isOnline ? 'online' : 'offline'));
+    });
+  }
+
+  it('should render without errors', async () => {
+    const gradingElements = await screen.findAllByText(messages.headingTitle.defaultMessage);
+    const gradingTitle = gradingElements[0];
+    expect(screen.getByText(messages.headingSubtitle.defaultMessage)).toBeInTheDocument();
+    expect(gradingTitle).toBeInTheDocument();
+    expect(screen.getByText(messages.policy.defaultMessage)).toBeInTheDocument();
+    expect(screen.getByText(messages.policiesDescription.defaultMessage)).toBeInTheDocument();
+  });
+
+  it('should update segment input value and show save alert', async () => {
+    const segmentInputs = await screen.findAllByTestId('grading-scale-segment-input');
+    expect(segmentInputs).toHaveLength(5);
+    const segmentInput = segmentInputs[1];
+    fireEvent.change(segmentInput, { target: { value: 'Test' } });
+    expect(segmentInput).toHaveValue('Test');
+    expect(screen.getByTestId('grading-settings-save-alert')).toBeVisible();
+  });
+
+  it('should update grading scale segment input value on change and cancel the action', async () => {
+    const segmentInputs = await screen.findAllByTestId('grading-scale-segment-input');
+    const segmentInput = segmentInputs[1];
+    fireEvent.change(segmentInput, { target: { value: 'Test' } });
+    fireEvent.click(screen.getByText(messages.buttonCancelText.defaultMessage));
+    expect(segmentInput).toHaveValue('a');
+  });
+
+  it('should save segment input changes and display saving message', async () => {
+    const segmentInputs = await screen.findAllByTestId('grading-scale-segment-input');
+    const segmentInput = segmentInputs[1];
+    fireEvent.change(segmentInput, { target: { value: 'Test' } });
+    testSaving();
+  });
+
+  it('should handle being offline gracefully', async () => {
+    setOnlineStatus(false);
+    const segmentInputs = await screen.findAllByTestId('grading-scale-segment-input');
+    const segmentInput = segmentInputs[1];
+    fireEvent.change(segmentInput, { target: { value: 'Test' } });
+    const saveBtn = screen.getByText(messages.buttonSaveText.defaultMessage);
+    expect(saveBtn).toBeInTheDocument();
+    fireEvent.click(saveBtn);
+    expect(screen.getByText(/studio's having trouble saving your work/i)).toBeInTheDocument();
+    expect(screen.queryByText(messages.buttonSavingText.defaultMessage)).not.toBeInTheDocument();
+    setOnlineStatus(true);
+    testSaving();
+  });
+
+  it('should display connection error alert when loading is denied', async () => {
+    jest.spyOn(apiHooks, 'useGradingSettings').mockReturnValue({ isError: true });
+    render(<RootWrapper />);
+    expect(screen.getByTestId('connectionErrorAlert')).toBeInTheDocument();
+  });
+});
diff --git a/src/grading-settings/__mocks__/gradingSettings.js b/src/grading-settings/__mocks__/gradingSettings.js
new file mode 100644
index 0000000000..96060fa078
--- /dev/null
+++ b/src/grading-settings/__mocks__/gradingSettings.js
@@ -0,0 +1,49 @@
+module.exports = {
+  mfeProctoredExamSettingsUrl: '',
+  courseAssignmentLists: {},
+  courseDetails: {
+    graders: [
+      {
+        type: 'Homework',
+        minCount: 0,
+        dropCount: 0,
+        shortLabel: null,
+        weight: 15,
+        id: 0,
+      },
+      {
+        type: 'Lab',
+        minCount: 0,
+        dropCount: 0,
+        shortLabel: null,
+        weight: 15,
+        id: 1,
+      },
+      {
+        type: 'Midterm Exam',
+        minCount: 0,
+        dropCount: 0,
+        shortLabel: null,
+        weight: 30,
+        id: 2,
+      },
+      {
+        type: 'Final Exam',
+        minCount: 0,
+        dropCount: 0,
+        shortLabel: null,
+        weight: 40,
+        id: 3,
+      },
+    ],
+    gradeCutoffs: {
+      a: 0.72,
+      d: 0.71,
+      c: 0.31,
+    },
+    gracePeriod: { hours: 7, minutes: 6 },
+    minimumGradeCredit: 0.8,
+  },
+  showCreditEligibility: false,
+  isCreditCourse: false,
+};
diff --git a/src/grading-settings/assignment-section/AssignmentSection.scss b/src/grading-settings/assignment-section/AssignmentSection.scss
new file mode 100644
index 0000000000..69d17c3aee
--- /dev/null
+++ b/src/grading-settings/assignment-section/AssignmentSection.scss
@@ -0,0 +1,58 @@
+.course-grading-assignment-wrapper {
+  background-color: $white;
+  padding: map-get($spacers, 4);
+  text-align: right;
+  border: 1px solid $light-700;
+
+  .course-grading-assignment-items {
+    list-style: none;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: .625rem;
+
+    .course-grading-assignment-total-grade {
+      grid-area: 2 / 1 / 3 / 2;
+    }
+
+    .course-grading-assignment-total-number {
+      grid-area: 2 / 2 / 3 / 3;
+    }
+
+    .course-grading-assignment-number-droppable {
+      grid-area: 2 / 3 / 3 / 4;
+    }
+
+    .course-grading-assignment-type-name {
+      grid-area: 1 / 1 / 2 / 3;
+    }
+
+    .course-grading-assignment-abbreviation {
+      grid-area: 1 / 3 / 2 / 4;
+    }
+  }
+
+  .course-grading-assignment-item-alert-warning {
+    .alert-heading {
+      font-size: $alert-font-size;
+      line-height: $alert-line-height;
+    }
+
+    .course-grading-assignment-item-alert-warning-list-label {
+      font-size: .75rem;
+      line-height: .938rem;
+    }
+
+    .course-grading-assignment-item-alert-warning-list {
+      font-size: .75rem;
+      line-height: .938rem;
+      padding-left: 1.875rem;
+      margin-bottom: 0;
+    }
+  }
+
+  .course-grading-assignment-item-alert-success .alert-heading {
+    font-size: $alert-font-size;
+    line-height: $alert-line-height;
+    margin-bottom: 0;
+  }
+}
diff --git a/src/grading-settings/assignment-section/AssignmentSection.test.jsx b/src/grading-settings/assignment-section/AssignmentSection.test.jsx
new file mode 100644
index 0000000000..1761470a67
--- /dev/null
+++ b/src/grading-settings/assignment-section/AssignmentSection.test.jsx
@@ -0,0 +1,120 @@
+import React from 'react';
+import { render, waitFor, fireEvent } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import AssignmentSection from '.';
+import messages from './messages';
+
+const testObj = {};
+
+const defaultAssignments = {
+  type: 'Test type',
+  minCount: 1,
+  dropCount: 1,
+  shortLabel: 'TT',
+  weight: 100,
+  id: 0,
+};
+
+const setGradingData = (fn) => {
+  testObj.graders = fn({}).graders;
+};
+
+const RootWrapper = (props = {}) => (
+  <IntlProvider locale="en">
+    <AssignmentSection
+      handleRemoveAssignment={jest.fn()}
+      setShowSavePrompt={jest.fn()}
+      graders={[defaultAssignments]}
+      setGradingData={jest.fn()}
+      courseAssignmentLists={defaultAssignments}
+      setShowSuccessAlert={jest.fn()}
+      {...props}
+    />
+  </IntlProvider>
+);
+
+describe('<AssignmentSection />', () => {
+  it('checking the correct display of titles, labels, descriptions', async () => {
+    const { getByText } = render(<RootWrapper />);
+    await waitFor(() => {
+      expect(getByText(messages.assignmentTypeNameTitle.defaultMessage)).toBeInTheDocument();
+      expect(getByText(messages.assignmentTypeNameDescription.defaultMessage)).toBeInTheDocument();
+      expect(getByText(messages.abbreviationTitle.defaultMessage)).toBeInTheDocument();
+      expect(getByText(messages.abbreviationDescription.defaultMessage)).toBeInTheDocument();
+      expect(getByText(messages.weightOfTotalGradeTitle.defaultMessage)).toBeInTheDocument();
+      expect(getByText(messages.weightOfTotalGradeDescription.defaultMessage)).toBeInTheDocument();
+      expect(getByText(messages.totalNumberTitle.defaultMessage)).toBeInTheDocument();
+      expect(getByText(messages.totalNumberDescription.defaultMessage)).toBeInTheDocument();
+      expect(getByText(messages.numberOfDroppableTitle.defaultMessage)).toBeInTheDocument();
+      expect(getByText(messages.numberOfDroppableDescription.defaultMessage)).toBeInTheDocument();
+      expect(getByText(messages.assignmentAlertWarningDescription.defaultMessage)).toBeInTheDocument();
+      expect(getByText(messages.assignmentDeleteButton.defaultMessage)).toBeInTheDocument();
+    });
+  });
+  it('checking correct assignment abbreviation value', () => {
+    const { getByTestId } = render(<RootWrapper setGradingData={setGradingData} />);
+    const assignmentShortLabelInput = getByTestId('assignment-shortLabel-input');
+    expect(assignmentShortLabelInput.value).toBe('TT');
+    fireEvent.change(assignmentShortLabelInput, { target: { value: '123' } });
+    expect(testObj.graders[0].shortLabel).toBe('123');
+  });
+  it('checking correct assignment weight of total grade value', async () => {
+    const { getByTestId } = render(<RootWrapper setGradingData={setGradingData} />);
+    await waitFor(() => {
+      const assignmentWeightInput = getByTestId('assignment-weight-input');
+      expect(assignmentWeightInput.value).toBe('100');
+      fireEvent.change(assignmentWeightInput, { target: { value: '123' } });
+      expect(testObj.graders[0].weight).toBe(123);
+    });
+  });
+  it('checking correct assignment total number value', async () => {
+    const { getByTestId } = render(<RootWrapper setGradingData={setGradingData} />);
+    await waitFor(() => {
+      const assignmentTotalNumberInput = getByTestId('assignment-minCount-input');
+      expect(assignmentTotalNumberInput.value).toBe('1');
+      fireEvent.change(assignmentTotalNumberInput, { target: { value: '123' } });
+      expect(testObj.graders[0].minCount).toBe(123);
+    });
+  });
+  it('checking correct assignment number of droppable value', async () => {
+    const { getByTestId } = render(<RootWrapper setGradingData={setGradingData} />);
+    await waitFor(() => {
+      const assignmentNumberOfDroppableInput = getByTestId('assignment-dropCount-input');
+      expect(assignmentNumberOfDroppableInput.value).toBe('1');
+      fireEvent.change(assignmentNumberOfDroppableInput, { target: { value: '2' } });
+      expect(testObj.graders[0].dropCount).toBe(2);
+    });
+  });
+  it('checking correct error msg if dropCount have negative number or empty string', async () => {
+    const { getByText, getByTestId } = render(<RootWrapper />);
+    await waitFor(() => {
+      const assignmentNumberOfDroppableInput = getByTestId('assignment-dropCount-input');
+      expect(assignmentNumberOfDroppableInput.value).toBe('1');
+      fireEvent.change(assignmentNumberOfDroppableInput, { target: { value: '-2' } });
+      expect(getByText(messages.numberOfDroppableErrorMessage.defaultMessage)).toBeInTheDocument();
+      fireEvent.change(assignmentNumberOfDroppableInput, { target: { value: '' } });
+      expect(getByText(messages.numberOfDroppableErrorMessage.defaultMessage)).toBeInTheDocument();
+    });
+  });
+  it('checking correct error msg if minCount have negative number or empty string', async () => {
+    const { getByText, getByTestId } = render(<RootWrapper />);
+    await waitFor(() => {
+      const assignmentMinCountInput = getByTestId('assignment-minCount-input');
+      expect(assignmentMinCountInput.value).toBe('1');
+      fireEvent.change(assignmentMinCountInput, { target: { value: '-2' } });
+      expect(getByText(messages.totalNumberErrorMessage.defaultMessage)).toBeInTheDocument();
+      fireEvent.change(assignmentMinCountInput, { target: { value: '' } });
+      expect(getByText(messages.totalNumberErrorMessage.defaultMessage)).toBeInTheDocument();
+    });
+  });
+  it('checking correct error msg if total weight have negative number', async () => {
+    const { getByText, getByTestId } = render(<RootWrapper />);
+    await waitFor(() => {
+      const assignmentWeightInput = getByTestId('assignment-weight-input');
+      expect(assignmentWeightInput.value).toBe('100');
+      fireEvent.change(assignmentWeightInput, { target: { value: '-100' } });
+      expect(getByText(messages.weightOfTotalGradeErrorMessage.defaultMessage)).toBeInTheDocument();
+    });
+  });
+});
diff --git a/src/grading-settings/assignment-section/assignments/AssignmentItem.jsx b/src/grading-settings/assignment-section/assignments/AssignmentItem.jsx
new file mode 100644
index 0000000000..68438c3adf
--- /dev/null
+++ b/src/grading-settings/assignment-section/assignments/AssignmentItem.jsx
@@ -0,0 +1,86 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { Form } from '@openedx/paragon';
+
+import { defaultAssignmentsPropTypes } from '../utils/enum';
+
+const AssignmentItem = ({
+  title,
+  descriptions,
+  type,
+  min,
+  max,
+  errorMsg,
+  className,
+  name,
+  onChange,
+  value,
+  errorEffort,
+  secondErrorMsg,
+  gradeField,
+  trailingElement,
+}) => (
+  <li className={className}>
+    <Form.Group className={classNames('form-group-custom', {
+      'form-group-custom_isInvalid': errorEffort,
+    })}
+    >
+      <Form.Label className="grading-label">{title}</Form.Label>
+      <Form.Control
+        data-testid={`assignment-${name}-input`}
+        type={type}
+        min={min}
+        max={max}
+        name={name}
+        onChange={onChange}
+        value={value}
+        isInvalid={errorEffort}
+        trailingElement={trailingElement}
+      />
+      <Form.Control.Feedback className="grading-description">
+        {descriptions}
+      </Form.Control.Feedback>
+      {errorEffort && (
+        <Form.Control.Feedback className="feedback-error" type="invalid">
+          {errorMsg}
+        </Form.Control.Feedback>
+      )}
+      {gradeField?.dropCount !== 0 && gradeField?.dropCount > gradeField?.minCount && (
+        <Form.Control.Feedback className="feedback-error" type="invalid">
+          {secondErrorMsg}
+        </Form.Control.Feedback>
+      )}
+    </Form.Group>
+  </li>
+);
+
+AssignmentItem.defaultProps = {
+  max: undefined,
+  errorMsg: undefined,
+  min: undefined,
+  value: '',
+  secondErrorMsg: undefined,
+  errorEffort: false,
+  gradeField: undefined,
+  trailingElement: undefined,
+};
+
+AssignmentItem.propTypes = {
+  title: PropTypes.string.isRequired,
+  descriptions: PropTypes.string.isRequired,
+  type: PropTypes.string.isRequired,
+  min: PropTypes.number,
+  max: PropTypes.number,
+  errorMsg: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  className: PropTypes.string.isRequired,
+  secondErrorMsg: PropTypes.string,
+  onChange: PropTypes.func.isRequired,
+  errorEffort: PropTypes.bool,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  gradeField: PropTypes.shape(defaultAssignmentsPropTypes),
+  trailingElement: PropTypes.string,
+};
+
+export default AssignmentItem;
diff --git a/src/grading-settings/assignment-section/assignments/AssignmentTypeName.jsx b/src/grading-settings/assignment-section/assignments/AssignmentTypeName.jsx
new file mode 100644
index 0000000000..820d89474f
--- /dev/null
+++ b/src/grading-settings/assignment-section/assignments/AssignmentTypeName.jsx
@@ -0,0 +1,69 @@
+import React, { useRef } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { Form } from '@openedx/paragon';
+
+import { ASSIGNMENT_TYPES, DUPLICATE_ASSIGNMENT_NAME } from '../utils/enum';
+import messages from '../messages';
+
+const AssignmentTypeName = ({
+  intl, value, errorEffort, onChange,
+}) => {
+  const initialAssignmentName = useRef(value);
+
+  return (
+    <li className="course-grading-assignment-type-name">
+      <Form.Group className={classNames('form-group-custom', {
+        'form-group-custom_isInvalid': errorEffort,
+      })}
+      >
+        <Form.Label className="grading-label">
+          {intl.formatMessage(messages.assignmentTypeNameTitle)}
+        </Form.Label>
+        <Form.Control
+          data-testid="assignment-type-name-input"
+          type="text"
+          name={ASSIGNMENT_TYPES.type}
+          onChange={onChange}
+          value={value}
+          isInvalid={Boolean(errorEffort)}
+        />
+        <Form.Control.Feedback className="grading-description">
+          {intl.formatMessage(messages.assignmentTypeNameDescription)}
+        </Form.Control.Feedback>
+        {errorEffort && errorEffort !== DUPLICATE_ASSIGNMENT_NAME && (
+          <Form.Control.Feedback className="feedback-error" type="invalid">
+            {intl.formatMessage(messages.assignmentTypeNameErrorMessage1)}
+          </Form.Control.Feedback>
+        )}
+        {value !== initialAssignmentName.current && initialAssignmentName.current !== '' && (
+          <Form.Control.Feedback className="feedback-error" type="invalid">
+            {intl.formatMessage(messages.assignmentTypeNameErrorMessage2, {
+              initialAssignmentName: initialAssignmentName.current,
+              value,
+            })}
+          </Form.Control.Feedback>
+        )}
+        {errorEffort === DUPLICATE_ASSIGNMENT_NAME && (
+          <Form.Control.Feedback className="feedback-error" type="invalid">
+            {intl.formatMessage(messages.assignmentTypeNameErrorMessage3)}
+          </Form.Control.Feedback>
+        )}
+      </Form.Group>
+    </li>
+  );
+};
+
+AssignmentTypeName.defaultProps = {
+  errorEffort: false,
+};
+
+AssignmentTypeName.propTypes = {
+  intl: intlShape.isRequired,
+  onChange: PropTypes.func.isRequired,
+  errorEffort: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]).isRequired,
+};
+
+export default injectIntl(AssignmentTypeName);
diff --git a/src/grading-settings/assignment-section/index.jsx b/src/grading-settings/assignment-section/index.jsx
new file mode 100644
index 0000000000..22adff6498
--- /dev/null
+++ b/src/grading-settings/assignment-section/index.jsx
@@ -0,0 +1,215 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { Button } from '@openedx/paragon';
+import { CheckCircle, Warning } from '@openedx/paragon/icons';
+
+import AlertMessage from '../../generic/alert-message';
+import { validationAssignmentFields } from './utils/validation';
+import AssignmentItem from './assignments/AssignmentItem';
+import AssignmentTypeName from './assignments/AssignmentTypeName';
+import { defaultAssignmentsPropTypes, ASSIGNMENT_TYPES } from './utils/enum';
+import messages from './messages';
+
+const MIN_NUMBER_VALUE = 0;
+const MAX_NUMBER_VALUE = 100;
+
+const AssignmentSection = ({
+  intl,
+  handleRemoveAssignment,
+  setShowSavePrompt,
+  graders,
+  setGradingData,
+  courseAssignmentLists,
+  setShowSuccessAlert,
+}) => {
+  const [errorList, setErrorList] = useState({});
+  const {
+    type, weight, minCount, dropCount,
+  } = ASSIGNMENT_TYPES;
+  const isFieldsWithoutErrors = Object.values(errorList).every(field => field !== true);
+
+  if (!isFieldsWithoutErrors) {
+    setShowSavePrompt(false);
+  }
+
+  const handleAssignmentChange = (e, assignmentId) => {
+    const { name, value, type: inputType } = e.target;
+
+    let inputValue = value;
+    if (inputType === 'number') {
+      inputValue = parseInt(value, 10);
+    }
+
+    setShowSavePrompt(true);
+
+    setGradingData(prevState => ({
+      ...prevState,
+      graders: graders.map(grader => {
+        if (grader.id === assignmentId) {
+          return { ...grader, [name]: inputValue };
+        }
+        return grader;
+      }),
+    }));
+
+    validationAssignmentFields(
+      assignmentId,
+      name,
+      type,
+      value,
+      setErrorList,
+      setShowSavePrompt,
+      graders,
+      weight,
+      minCount,
+      dropCount,
+    );
+    setShowSuccessAlert(false);
+  };
+
+  return (
+    <div className="assignment-items">
+      {graders?.map((gradeField) => {
+        const courseAssignmentUsage = courseAssignmentLists[gradeField.type];
+        const showDefinedCaseAlert = gradeField.minCount !== courseAssignmentUsage?.length
+            && Boolean(courseAssignmentUsage?.length);
+        const showNotDefinedCaseAlert = !courseAssignmentUsage?.length && Boolean(gradeField.type);
+
+        return (
+          <div key={gradeField.id} className="course-grading-assignment-wrapper mb-4">
+            <ol className="course-grading-assignment-items p-0 mb-4">
+              <AssignmentTypeName
+                value={gradeField.type}
+                errorEffort={errorList[`${type}-${gradeField.id}`]}
+                onChange={(e) => handleAssignmentChange(e, gradeField.id)}
+              />
+              <AssignmentItem
+                className="course-grading-assignment-abbreviation"
+                title={intl.formatMessage(messages.abbreviationTitle)}
+                descriptions={intl.formatMessage(messages.abbreviationDescription)}
+                type="text"
+                name="shortLabel"
+                value={gradeField.shortLabel}
+                onChange={(e) => handleAssignmentChange(e, gradeField.id)}
+              />
+              <AssignmentItem
+                className="course-grading-assignment-total-grade"
+                title={intl.formatMessage(messages.weightOfTotalGradeTitle)}
+                descriptions={intl.formatMessage(messages.weightOfTotalGradeDescription)}
+                type="number"
+                min={MIN_NUMBER_VALUE}
+                max={MAX_NUMBER_VALUE}
+                errorMsg={intl.formatMessage(messages.weightOfTotalGradeErrorMessage)}
+                name={weight}
+                value={gradeField.weight}
+                onChange={(e) => handleAssignmentChange(e, gradeField.id)}
+                errorEffort={errorList[`${weight}-${gradeField.id}`]}
+                trailingElement="%"
+              />
+              <AssignmentItem
+                className="course-grading-assignment-total-number"
+                title={intl.formatMessage(messages.totalNumberTitle)}
+                descriptions={intl.formatMessage(messages.totalNumberDescription)}
+                type="number"
+                min={1}
+                errorMsg={intl.formatMessage(messages.totalNumberErrorMessage)}
+                name={minCount}
+                value={gradeField.minCount}
+                onChange={(e) => handleAssignmentChange(e, gradeField.id)}
+                errorEffort={errorList[`${minCount}-${gradeField.id}`]}
+              />
+              <AssignmentItem
+                className="course-grading-assignment-number-droppable"
+                title={intl.formatMessage(messages.numberOfDroppableTitle)}
+                descriptions={intl.formatMessage(messages.numberOfDroppableDescription)}
+                type="number"
+                min={MIN_NUMBER_VALUE}
+                errorMsg={intl.formatMessage(messages.numberOfDroppableErrorMessage)}
+                name={dropCount}
+                gradeField={gradeField}
+                value={gradeField.dropCount}
+                onChange={(e) => handleAssignmentChange(e, gradeField.id)}
+                secondErrorMsg={intl.formatMessage(messages.numberOfDroppableSecondErrorMessage, {
+                  type: gradeField.type,
+                })}
+                errorEffort={errorList[`${dropCount}-${gradeField.id}`]}
+              />
+            </ol>
+            {showDefinedCaseAlert && (
+              <AlertMessage
+                className="course-grading-assignment-item-alert-warning"
+                variant="warning"
+                icon={Warning}
+                title={intl.formatMessage(messages.assignmentAlertWarningUsageTitle, { type: gradeField.type })}
+                description={(
+                  <>
+                    <span className="course-grading-assignment-item-alert-warning-list-label">
+                      {courseAssignmentUsage.length} Final assignment(s) found:
+                    </span>
+                    <ol className="course-grading-assignment-item-alert-warning-list">
+                      {courseAssignmentUsage.map(assignmentItem => (
+                        <li key={assignmentItem}>{assignmentItem}</li>
+                      ))}
+                    </ol>
+                  </>
+                )}
+                aria-hidden="true"
+              />
+            )}
+            {showNotDefinedCaseAlert && (
+              <AlertMessage
+                className="course-grading-assignment-item-alert-warning"
+                variant="warning"
+                icon={Warning}
+                title={intl.formatMessage(messages.assignmentAlertWarningTitle, { type: gradeField.type })}
+                description={(
+                  <span className="course-grading-assignment-item-alert-warning-list-label">
+                    {intl.formatMessage(messages.assignmentAlertWarningDescription)}
+                  </span>
+                )}
+                aria-hidden="true"
+              />
+            )}
+            {gradeField.minCount === courseAssignmentUsage?.length && (
+              <AlertMessage
+                className="course-grading-assignment-item-alert-success"
+                variant="success"
+                icon={CheckCircle}
+                title={intl.formatMessage(messages.assignmentAlertWarningSuccess, { type: gradeField.type })}
+                aria-hidden="true"
+              />
+            )}
+            <Button
+              className="course-grading-assignment-delete-btn"
+              variant="outline-primary"
+              size="sm"
+              onClick={() => handleRemoveAssignment(gradeField.id)}
+            >
+              {intl.formatMessage(messages.assignmentDeleteButton)}
+            </Button>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+AssignmentSection.defaultProps = {
+  courseAssignmentLists: undefined,
+  graders: undefined,
+};
+
+AssignmentSection.propTypes = {
+  intl: intlShape.isRequired,
+  handleRemoveAssignment: PropTypes.func.isRequired,
+  setGradingData: PropTypes.func.isRequired,
+  setShowSavePrompt: PropTypes.func.isRequired,
+  setShowSuccessAlert: PropTypes.func.isRequired,
+  courseAssignmentLists: PropTypes.shape(defaultAssignmentsPropTypes),
+  graders: PropTypes.arrayOf(
+    PropTypes.shape(defaultAssignmentsPropTypes),
+  ),
+};
+
+export default injectIntl(AssignmentSection);
diff --git a/src/grading-settings/assignment-section/messages.js b/src/grading-settings/assignment-section/messages.js
new file mode 100644
index 0000000000..29d75447d7
--- /dev/null
+++ b/src/grading-settings/assignment-section/messages.js
@@ -0,0 +1,94 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  assignmentTypeNameTitle: {
+    id: 'course-authoring.grading-settings.assignment.type-name.title',
+    defaultMessage: 'Assignment type name',
+  },
+  assignmentTypeNameDescription: {
+    id: 'course-authoring.grading-settings.assignment.type-name.description',
+    defaultMessage: 'The general category for this type of assignment, for example, Homework or Midterm Exam. This name is visible to learners.',
+  },
+  assignmentTypeNameErrorMessage1: {
+    id: 'course-authoring.grading-settings.assignment.type-name.error.message-1',
+    defaultMessage: 'The assignment type must have a name.',
+  },
+  assignmentTypeNameErrorMessage2: {
+    id: 'course-authoring.grading-settings.assignment.type-name.error.message-2',
+    defaultMessage: 'For grading to work, you must change all {initialAssignmentName} subsections to {value}.',
+  },
+  assignmentTypeNameErrorMessage3: {
+    id: 'course-authoring.grading-settings.assignment.type-name.error.message-3',
+    defaultMessage: "There's already another assignment type with this name.",
+  },
+  abbreviationTitle: {
+    id: 'course-authoring.grading-settings.assignment.abbreviation.title',
+    defaultMessage: 'Abbreviation',
+  },
+  abbreviationDescription: {
+    id: 'course-authoring.grading-settings.assignment.abbreviation.description',
+    defaultMessage: "This short name for the assignment type (for example, HW or Midterm) appears next to assignments on a learner's Progress page.",
+  },
+  weightOfTotalGradeTitle: {
+    id: 'course-authoring.grading-settings.assignment.weight-of-total-grade.title',
+    defaultMessage: 'Weight of total grade',
+  },
+  weightOfTotalGradeDescription: {
+    id: 'course-authoring.grading-settings.assignment.weight-of-total-grade.description',
+    defaultMessage: 'The weight of all assignments of this type as a percentage of the total grade, for example, 40. Do not include the percent symbol.',
+  },
+  weightOfTotalGradeErrorMessage: {
+    id: 'course-authoring.grading-settings.assignment.weight-of-total-grade.error.message',
+    defaultMessage: 'Please enter an integer between 0 and 100.',
+  },
+  totalNumberTitle: {
+    id: 'course-authoring.grading-settings.assignment.total-number.title',
+    defaultMessage: 'Total number',
+  },
+  totalNumberDescription: {
+    id: 'course-authoring.grading-settings.assignment.total-number.description',
+    defaultMessage: 'The number of subsections in the course that contain problems of this assignment type.',
+  },
+  totalNumberErrorMessage: {
+    id: 'course-authoring.grading-settings.assignment.total-number.error.message',
+    defaultMessage: 'Please enter an integer greater than 0.',
+  },
+  numberOfDroppableTitle: {
+    id: 'course-authoring.grading-settings.assignment.number-of-droppable.title',
+    defaultMessage: 'Number of droppable',
+  },
+  numberOfDroppableDescription: {
+    id: 'course-authoring.grading-settings.assignment.number-of-droppable.description',
+    defaultMessage: 'The number of assignments of this type that will be dropped. The lowest scoring assignments are dropped first.',
+  },
+  numberOfDroppableErrorMessage: {
+    id: 'course-authoring.grading-settings.assignment.number-of-droppable.error.message',
+    defaultMessage: 'Please enter non-negative integer.',
+  },
+  numberOfDroppableSecondErrorMessage: {
+    id: 'course-authoring.grading-settings.assignment.number-of-droppable.second.error.message',
+    defaultMessage: 'Cannot drop more {type} assignments than are assigned.',
+  },
+  assignmentAlertWarningTitle: {
+    id: 'course-authoring.grading-settings.assignment.alert.warning.title',
+    defaultMessage: 'Warning: The number of {type} assignments defined here does not match the current number of {type} assignments in the course:',
+  },
+  assignmentAlertWarningDescription: {
+    id: 'course-authoring.grading-settings.assignment.alert.warning.description',
+    defaultMessage: 'There are no assignments of this type in the course.',
+  },
+  assignmentAlertWarningUsageTitle: {
+    id: 'course-authoring.grading-settings.assignment.alert.warning.usage.title',
+    defaultMessage: 'Warning: The number of {type} assignments defined here does not match the current number of {type} assignments in the course:',
+  },
+  assignmentAlertWarningSuccess: {
+    id: 'course-authoring.grading-settings.assignment.alert.success.title',
+    defaultMessage: 'The number of {type} assignments in the course matches the number defined here.',
+  },
+  assignmentDeleteButton: {
+    id: 'course-authoring.grading-settings.assignment.delete.button',
+    defaultMessage: 'Delete',
+  },
+});
+
+export default messages;
diff --git a/src/grading-settings/assignment-section/utils/enum.js b/src/grading-settings/assignment-section/utils/enum.js
new file mode 100644
index 0000000000..694fd543ad
--- /dev/null
+++ b/src/grading-settings/assignment-section/utils/enum.js
@@ -0,0 +1,19 @@
+import PropTypes from 'prop-types';
+
+export const DUPLICATE_ASSIGNMENT_NAME = 'duplicateAssignmentName';
+
+export const ASSIGNMENT_TYPES = {
+  type: 'type',
+  weight: 'weight',
+  minCount: 'minCount',
+  dropCount: 'dropCount',
+};
+
+export const defaultAssignmentsPropTypes = {
+  type: PropTypes.string,
+  minCount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  dropCount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  shortLabel: PropTypes.string,
+  weight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
diff --git a/src/grading-settings/assignment-section/utils/validation.js b/src/grading-settings/assignment-section/utils/validation.js
new file mode 100644
index 0000000000..f2a9c39979
--- /dev/null
+++ b/src/grading-settings/assignment-section/utils/validation.js
@@ -0,0 +1,142 @@
+import { DUPLICATE_ASSIGNMENT_NAME } from './enum';
+
+/**
+ * Updates the error list for the job and sets the save warning display flag.
+ *
+ * @param {string} assignmentName - The name of the field being validated.
+ * @param {number} assignmentId - Assignment id.
+ * @param {string, boolean} assignmentValue - The value of the field being validated.
+ * @param {function} setErrorList - Function to update the error list state.
+ * @param {function} setShowSavePrompt - Function to update the visibility of the save prompt.
+ * @returns {void}
+ */
+export const updateAssignmentErrorList = (
+  assignmentName,
+  assignmentId,
+  setErrorList,
+  setShowSavePrompt,
+  assignmentValue = true,
+) => {
+  setErrorList(prevState => ({ ...prevState, [`${assignmentName}-${assignmentId}`]: assignmentValue }));
+  if (assignmentValue) {
+    setShowSavePrompt(false);
+  }
+};
+
+/**
+ * Validates assignment fields.
+ *
+ * @param {number} assignmentId - Assignment id.
+ * @param {string} assignmentName - The name of the field being validated.
+ * @param {string} assignmentType - The type of the assignment.
+ * @param {string} assignmentValue - The value of the field being validated.
+ * @param {function} setErrorList - Function to update the error list state.
+ * @param {function} setShowSavePrompt - Function to update the visibility of the save prompt.
+ * @param {array} courseGraders - An array of existing grading data.
+ * @param {number} weightOfTotalGrade - The weight of the assignment.
+ * @param {number} assignmentMinCount - The minimum count of the assignment.
+ * @param {number} assignmentDropCount - The drop count of the assignment.
+ * @returns {void}
+ */
+export const validationAssignmentFields = (
+  assignmentId,
+  assignmentName,
+  assignmentType,
+  assignmentValue,
+  setErrorList,
+  setShowSavePrompt,
+  courseGraders,
+  weightOfTotalGrade,
+  assignmentMinCount,
+  assignmentDropCount,
+) => {
+  const courseGradingTypes = courseGraders?.map(grade => grade.type);
+
+  switch (assignmentName) {
+    case assignmentType:
+      if (assignmentValue === '') {
+        updateAssignmentErrorList(assignmentName, assignmentId, setErrorList, setShowSavePrompt);
+        return;
+      }
+      if (courseGradingTypes.includes(assignmentValue)) {
+        updateAssignmentErrorList(
+          assignmentName,
+          assignmentId,
+          setErrorList,
+          setShowSavePrompt,
+          DUPLICATE_ASSIGNMENT_NAME,
+        );
+        return;
+      }
+      updateAssignmentErrorList(
+        assignmentName,
+        assignmentId,
+        setErrorList,
+        setShowSavePrompt,
+        false,
+      );
+      break;
+    case weightOfTotalGrade:
+      if (assignmentValue < 0 || assignmentValue > 100 || assignmentValue === '-0') {
+        updateAssignmentErrorList(
+          assignmentName,
+          assignmentId,
+          setErrorList,
+          setShowSavePrompt,
+        );
+        return;
+      }
+      updateAssignmentErrorList(
+        assignmentName,
+        assignmentId,
+        setErrorList,
+        setShowSavePrompt,
+        false,
+      );
+      break;
+    case assignmentMinCount:
+      if (assignmentValue <= 0 || assignmentValue === '' || assignmentValue === '-0') {
+        updateAssignmentErrorList(
+          assignmentName,
+          assignmentId,
+          setErrorList,
+          setShowSavePrompt,
+        );
+        return;
+      }
+      updateAssignmentErrorList(
+        assignmentName,
+        assignmentId,
+        setErrorList,
+        setShowSavePrompt,
+        false,
+      );
+      break;
+    case assignmentDropCount:
+      if (assignmentValue < 0 || assignmentValue === '' || assignmentValue === '-0') {
+        updateAssignmentErrorList(
+          assignmentName,
+          assignmentId,
+          setErrorList,
+          setShowSavePrompt,
+        );
+        return;
+      }
+      updateAssignmentErrorList(
+        assignmentName,
+        assignmentId,
+        setErrorList,
+        setShowSavePrompt,
+        false,
+      );
+      break;
+    default:
+      updateAssignmentErrorList(
+        assignmentName,
+        assignmentId,
+        setErrorList,
+        setShowSavePrompt,
+        false,
+      );
+  }
+};
diff --git a/src/grading-settings/credit-section/CreditSection.test.jsx b/src/grading-settings/credit-section/CreditSection.test.jsx
new file mode 100644
index 0000000000..548e5a6ff3
--- /dev/null
+++ b/src/grading-settings/credit-section/CreditSection.test.jsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { fireEvent, render, waitFor } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import CreditSection from '.';
+import messages from './messages';
+
+const testObj = {};
+const setGradingData = (fn) => {
+  testObj.minimumGradeCredit = fn({}).minimumGradeCredit;
+};
+
+const RootWrapper = (props = {}) => (
+  <IntlProvider locale="en">
+    <CreditSection
+      eligibleGrade={0.1}
+      setShowSavePrompt={jest.fn()}
+      minimumGradeCredit={0.1}
+      setGradingData={jest.fn()}
+      setShowSuccessAlert={jest.fn()}
+      {...props}
+    />
+  </IntlProvider>
+);
+
+describe('<CreditSection />', () => {
+  it('checking credit eligibility label and description text', async () => {
+    const { getByText } = render(<RootWrapper />);
+    await waitFor(() => {
+      expect(getByText(messages.creditEligibilityLabel.defaultMessage)).toBeInTheDocument();
+      expect(getByText(messages.creditEligibilityDescription.defaultMessage)).toBeInTheDocument();
+    });
+  });
+  it('checking credit eligibility value', async () => {
+    const { getByTestId } = render(<RootWrapper setGradingData={setGradingData} />);
+    await waitFor(() => {
+      const inputElement = getByTestId('minimum-grade-credit-input');
+      expect(inputElement.value).toBe('10');
+      fireEvent.change(inputElement, { target: { value: '2' } });
+      expect(testObj.minimumGradeCredit).toBe(0.02);
+    });
+  });
+});
diff --git a/src/grading-settings/credit-section/index.jsx b/src/grading-settings/credit-section/index.jsx
new file mode 100644
index 0000000000..0c55e3a849
--- /dev/null
+++ b/src/grading-settings/credit-section/index.jsx
@@ -0,0 +1,71 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { Form } from '@openedx/paragon';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+
+import messages from './messages';
+
+const CreditSection = ({
+  intl, eligibleGrade, setShowSavePrompt, minimumGradeCredit, setGradingData, setShowSuccessAlert,
+}) => {
+  const [errorEffort, setErrorEffort] = useState(false);
+
+  const handleCreditChange = (e) => {
+    const { value } = e.target;
+
+    setGradingData(prevData => ({
+      ...prevData,
+      minimumGradeCredit: value / 100,
+    }));
+
+    if (value <= eligibleGrade) {
+      setErrorEffort(true);
+      setShowSavePrompt(false);
+      return;
+    }
+
+    setShowSavePrompt(true);
+    setErrorEffort(false);
+    setShowSuccessAlert(false);
+  };
+
+  return (
+    <Form.Group
+      className={classNames('form-group-custom w-50', {
+        'form-group-custom_isInvalid': errorEffort,
+      })}
+    >
+      <Form.Label className="grading-label">
+        {intl.formatMessage(messages.creditEligibilityLabel)}
+      </Form.Label>
+      <Form.Control
+        data-testid="minimum-grade-credit-input"
+        type="number"
+        min={0}
+        value={Math.round(parseFloat(minimumGradeCredit) * 100) || ''}
+        name="minimum_grade_credit"
+        onChange={handleCreditChange}
+      />
+      <Form.Control.Feedback className="grading-description">
+        {intl.formatMessage(messages.creditEligibilityDescription)}
+      </Form.Control.Feedback>
+      {errorEffort && (
+        <Form.Control.Feedback className="feedback-error" type="invalid">
+          {intl.formatMessage(messages.creditEligibilityErrorMsg)} {eligibleGrade}.
+        </Form.Control.Feedback>
+      )}
+    </Form.Group>
+  );
+};
+
+CreditSection.propTypes = {
+  intl: intlShape.isRequired,
+  eligibleGrade: PropTypes.number.isRequired,
+  setShowSavePrompt: PropTypes.func.isRequired,
+  setGradingData: PropTypes.func.isRequired,
+  setShowSuccessAlert: PropTypes.func.isRequired,
+  minimumGradeCredit: PropTypes.number.isRequired,
+};
+
+export default injectIntl(CreditSection);
diff --git a/src/grading-settings/credit-section/messages.js b/src/grading-settings/credit-section/messages.js
new file mode 100644
index 0000000000..cc99802762
--- /dev/null
+++ b/src/grading-settings/credit-section/messages.js
@@ -0,0 +1,18 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  creditEligibilityLabel: {
+    id: 'course-authoring.grading-settings.credit.eligibility.label',
+    defaultMessage: 'Minimum credit-eligible grade:',
+  },
+  creditEligibilityDescription: {
+    id: 'course-authoring.grading-settings.credit.eligibility.description',
+    defaultMessage: '% Must be greater than or equal to the course passing grade',
+  },
+  creditEligibilityErrorMsg: {
+    id: 'course-authoring.grading-settings.credit.eligibility.error.msg',
+    defaultMessage: 'Not able to set passing grade to less than:',
+  },
+});
+
+export default messages;
diff --git a/src/grading-settings/data/api.js b/src/grading-settings/data/api.js
new file mode 100644
index 0000000000..8e73c720bb
--- /dev/null
+++ b/src/grading-settings/data/api.js
@@ -0,0 +1,42 @@
+import { camelCaseObject, getConfig } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+
+import { deepConvertingKeysToCamelCase, deepConvertingKeysToSnakeCase } from '../../utils';
+
+const getApiBaseUrl = () => getConfig().STUDIO_BASE_URL;
+export const getGradingSettingsApiUrl = (courseId) => `${getApiBaseUrl()}/api/contentstore/v1/course_grading/${courseId}`;
+export const getCourseSettingsApiUrl = (courseId) => `${getApiBaseUrl()}/api/contentstore/v1/course_settings/${courseId}`;
+
+/**
+ * Get's grading setting for a course.
+ * @param {string} courseId
+ * @returns {Promise<Object>}
+ */
+export async function getGradingSettings(courseId) {
+  const { data } = await getAuthenticatedHttpClient()
+    .get(getGradingSettingsApiUrl(courseId));
+  return deepConvertingKeysToCamelCase(data);
+}
+
+/**
+ * Send`s grading setting for a course.
+ * @param {string} courseId
+ * @param {object} settings
+ * @returns {Promise<Object>}
+ */
+export async function sendGradingSettings(courseId, settings) {
+  const { data } = await getAuthenticatedHttpClient()
+    .post(getGradingSettingsApiUrl(courseId), deepConvertingKeysToSnakeCase(settings));
+  return camelCaseObject(data);
+}
+
+/**
+ * Get course settings.
+ * @param {string} courseId
+ * @returns {Promise<Object>}
+ */
+export async function getCourseSettings(courseId) {
+  const { data } = await getAuthenticatedHttpClient()
+    .get(getCourseSettingsApiUrl(courseId));
+  return camelCaseObject(data);
+}
diff --git a/src/grading-settings/data/apiHooks.ts b/src/grading-settings/data/apiHooks.ts
new file mode 100644
index 0000000000..c963575b8a
--- /dev/null
+++ b/src/grading-settings/data/apiHooks.ts
@@ -0,0 +1,26 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { getCourseSettings, getGradingSettings, sendGradingSettings } from './api';
+
+export const useGradingSettings = (courseId: string) => (
+  useQuery({
+    queryKey: ['gradingSettings', courseId],
+    queryFn: () => getGradingSettings(courseId),
+  })
+);
+
+export const useCourseSettings = (courseId: string) => (
+  useQuery({
+    queryKey: ['courseSettings', courseId],
+    queryFn: () => getCourseSettings(courseId),
+  })
+);
+
+export const useGradingSettingUpdater = (courseId: string) => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (settings) => sendGradingSettings(courseId, settings),
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: ['gradingSettings', courseId] });
+    },
+  });
+};
diff --git a/src/grading-settings/deadline-section/DeadlineSection.test.jsx b/src/grading-settings/deadline-section/DeadlineSection.test.jsx
new file mode 100644
index 0000000000..cb1986a8a4
--- /dev/null
+++ b/src/grading-settings/deadline-section/DeadlineSection.test.jsx
@@ -0,0 +1,101 @@
+import React from 'react';
+import { fireEvent, render, waitFor } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import { DEFAULT_TIME_STAMP, TIME_FORMAT } from '../../constants';
+import messages from './messages';
+import DeadlineSection from '.';
+
+const testObj = {};
+
+const setGradingData = (fn) => {
+  testObj.gracePeriod = fn({}).gracePeriod;
+};
+
+const gracePeriodDefaultTime = {
+  hours: 12, minutes: 12,
+};
+
+const RootWrapper = (props = {}) => (
+  <IntlProvider locale="en">
+    <DeadlineSection
+      setShowSavePrompt={jest.fn()}
+      setGradingData={jest.fn()}
+      setShowSuccessAlert={jest.fn()}
+      {...props}
+    />
+  </IntlProvider>
+);
+
+describe('<DeadlineSection />', () => {
+  it('checking deadline label and description text', async () => {
+    const { getByText } = render(<RootWrapper gracePeriod={gracePeriodDefaultTime} />);
+    await waitFor(() => {
+      expect(getByText(messages.gracePeriodOnDeadlineLabel.defaultMessage)).toBeInTheDocument();
+      expect(getByText(messages.gracePeriodOnDeadlineDescription.defaultMessage)).toBeInTheDocument();
+    });
+  });
+  it('checking deadline input value', async () => {
+    const { getByTestId } = render(<RootWrapper
+      gracePeriod={gracePeriodDefaultTime}
+      setGradingData={setGradingData}
+    />);
+    await waitFor(() => {
+      const inputElement = getByTestId('deadline-period-input');
+      expect(inputElement.value).toBe('12:12');
+      fireEvent.change(inputElement, { target: { value: '13:13' } });
+      expect(testObj.gracePeriod.hours).toBe(13);
+      expect(testObj.gracePeriod.minutes).toBe(13);
+    });
+  });
+  it('checking deadline input value if grace Period has no hours', async () => {
+    const { getByTestId } = render(<RootWrapper
+      gracePeriod={{ hours: 0, minutes: 13 }}
+      setGradingData={setGradingData}
+    />);
+    await waitFor(() => {
+      const inputElement = getByTestId('deadline-period-input');
+      expect(inputElement.value).toBe('00:13');
+    });
+  });
+  it('checking deadline input value if grace Period has no minutes', async () => {
+    const { getByTestId } = render(<RootWrapper
+      gracePeriod={{ hours: 13, minutes: 0 }}
+      setGradingData={setGradingData}
+    />);
+    await waitFor(() => {
+      const inputElement = getByTestId('deadline-period-input');
+      expect(inputElement.value).toBe('13:00');
+    });
+  });
+  it('checking deadline input value if grace Period equal null', async () => {
+    const { getByTestId } = render(<RootWrapper gracePeriod={null} setGradingData={setGradingData} />);
+    await waitFor(() => {
+      const inputElement = getByTestId('deadline-period-input');
+      expect(inputElement.value).toBe(DEFAULT_TIME_STAMP);
+    });
+  });
+  it('checking deadline input validation error', async () => {
+    const { getByPlaceholderText, getByText } = render(<RootWrapper
+      gracePeriod={gracePeriodDefaultTime}
+      setGradingData={setGradingData}
+    />);
+    await waitFor(() => {
+      const inputElement = getByPlaceholderText(TIME_FORMAT.toUpperCase());
+      fireEvent.change(inputElement, { target: { value: 'wrong:input format' } });
+      expect(getByText(`Grace period must be specified in ${TIME_FORMAT.toUpperCase()} format.`)).toBeInTheDocument();
+    });
+  });
+  it('checking deadline input time format validation error', async () => {
+    const { getByPlaceholderText, getByText } = render(<RootWrapper
+      gracePeriod={gracePeriodDefaultTime}
+      setGradingData={setGradingData}
+    />);
+
+    await waitFor(() => {
+      const inputElement = getByPlaceholderText(TIME_FORMAT.toUpperCase());
+      fireEvent.change(inputElement, { target: { value: '32:70' } });
+      expect(getByText(`Grace period must be specified in ${TIME_FORMAT.toUpperCase()} format.`)).toBeInTheDocument();
+    });
+  });
+});
diff --git a/src/grading-settings/deadline-section/index.jsx b/src/grading-settings/deadline-section/index.jsx
new file mode 100644
index 0000000000..7af88ba32d
--- /dev/null
+++ b/src/grading-settings/deadline-section/index.jsx
@@ -0,0 +1,83 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { Form } from '@openedx/paragon';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import classNames from 'classnames';
+
+import { DEFAULT_TIME_STAMP, TIME_FORMAT } from '../../constants';
+import { formatTime, timerValidation } from './utils';
+import messages from './messages';
+
+const DeadlineSection = ({
+  intl, setShowSavePrompt, gracePeriod, setGradingData, setShowSuccessAlert,
+}) => {
+  const timeStampValue = gracePeriod
+    ? `${formatTime(gracePeriod.hours)}:${formatTime(gracePeriod.minutes)}`
+    : DEFAULT_TIME_STAMP;
+  const [newDeadlineValue, setNewDeadlineValue] = useState(timeStampValue);
+  const [isError, setIsError] = useState(false);
+
+  useEffect(() => {
+    setNewDeadlineValue(timeStampValue);
+  }, [gracePeriod]);
+
+  const handleDeadlineChange = (e) => {
+    const { value } = e.target;
+    const [hours, minutes] = value.split(':');
+
+    setNewDeadlineValue(value);
+
+    if (timerValidation(value, setShowSavePrompt, setIsError)) {
+      setGradingData(prevData => ({
+        ...prevData,
+        gracePeriod: {
+          hours: +hours,
+          minutes: +minutes,
+        },
+      }));
+      setShowSuccessAlert(false);
+    }
+  };
+
+  return (
+    <Form.Group className={classNames('w-50 form-group-custom', {
+      'form-group-custom_isInvalid': isError,
+    })}
+    >
+      <Form.Label className="grading-label">
+        {intl.formatMessage(messages.gracePeriodOnDeadlineLabel)}
+      </Form.Label>
+      <Form.Control
+        data-testid="deadline-period-input"
+        value={newDeadlineValue}
+        onChange={handleDeadlineChange}
+        placeholder={TIME_FORMAT.toUpperCase()}
+      />
+      <Form.Control.Feedback className="grading-description">
+        {intl.formatMessage(messages.gracePeriodOnDeadlineDescription)}
+      </Form.Control.Feedback>
+      {isError && (
+        <Form.Control.Feedback className="feedback-error" type="invalid">
+          {intl.formatMessage(messages.gracePeriodOnDeadlineErrorMsg, { timeFormat: TIME_FORMAT.toUpperCase() })}
+        </Form.Control.Feedback>
+      )}
+    </Form.Group>
+  );
+};
+
+DeadlineSection.defaultProps = {
+  gracePeriod: null,
+};
+
+DeadlineSection.propTypes = {
+  intl: intlShape.isRequired,
+  setShowSavePrompt: PropTypes.func.isRequired,
+  setGradingData: PropTypes.func.isRequired,
+  setShowSuccessAlert: PropTypes.func.isRequired,
+  gracePeriod: PropTypes.shape({
+    hours: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    minutes: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  }),
+};
+
+export default injectIntl(DeadlineSection);
diff --git a/src/grading-settings/deadline-section/messages.js b/src/grading-settings/deadline-section/messages.js
new file mode 100644
index 0000000000..07230420ec
--- /dev/null
+++ b/src/grading-settings/deadline-section/messages.js
@@ -0,0 +1,18 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  gracePeriodOnDeadlineLabel: {
+    id: 'course-authoring.grading-settings.deadline.label',
+    defaultMessage: 'Grace period on deadline:',
+  },
+  gracePeriodOnDeadlineDescription: {
+    id: 'course-authoring.grading-settings.deadline.description',
+    defaultMessage: 'Leeway on due dates',
+  },
+  gracePeriodOnDeadlineErrorMsg: {
+    id: 'course-authoring.grading-settings.deadline.error.message',
+    defaultMessage: 'Grace period must be specified in {timeFormat} format.',
+  },
+});
+
+export default messages;
diff --git a/src/grading-settings/deadline-section/utils.js b/src/grading-settings/deadline-section/utils.js
new file mode 100644
index 0000000000..4b3e6249c2
--- /dev/null
+++ b/src/grading-settings/deadline-section/utils.js
@@ -0,0 +1,27 @@
+/**
+ * Time format conversions for values (hours or minutes) that are less than 10.
+ *
+ * @param {number} time - incoming time data.
+ * @returns {string} - formatted time string.
+ */
+export function formatTime(time) {
+  return (time >= 10 ? time.toString() : `0${time}`);
+}
+
+/**
+ * Validates inputStr as a time in HH:MM format.
+ *
+ * @param {string} inputStr - the input string to validate.
+ * @param {function} setShowSavePrompt - a function to control save prompt display.
+ * @param {function} setIsError - a function to set error state.
+ * @returns {boolean} - returns `true` if `inputStr` is a valid time, else `false`.
+ */
+export function timerValidation(inputStr, setShowSavePrompt, setIsError) {
+  const timePattern = /^(?:[01]\d|2[0-3]):[0-5]\d$/;
+
+  const isValid = timePattern.test(inputStr);
+  setShowSavePrompt(isValid);
+  setIsError(!isValid);
+
+  return isValid;
+}
diff --git a/src/grading-settings/deadline-section/utils.test.js b/src/grading-settings/deadline-section/utils.test.js
new file mode 100644
index 0000000000..74268de64c
--- /dev/null
+++ b/src/grading-settings/deadline-section/utils.test.js
@@ -0,0 +1,42 @@
+import { formatTime, timerValidation } from './utils';
+
+const setShowSavePrompt = jest.fn();
+const setIsError = jest.fn();
+
+describe('formatTime', () => {
+  it('formats single-digit time values correctly', () => {
+    expect(formatTime(5)).toBe('05');
+    expect(formatTime(9)).toBe('09');
+  });
+
+  it('does not modify double-digit time values', () => {
+    expect(formatTime(10)).toBe('10');
+    expect(formatTime(45)).toBe('45');
+  });
+});
+
+describe('timerValidation', () => {
+  it('handles empty input', () => {
+    const result = timerValidation('', setShowSavePrompt, setIsError);
+
+    expect(result).toBe(false);
+    expect(setShowSavePrompt).toHaveBeenCalledWith(false);
+    expect(setIsError).toHaveBeenCalledWith(true);
+  });
+
+  it('validates correct HH:MM input', () => {
+    const result = timerValidation('12:34', setShowSavePrompt, setIsError);
+
+    expect(result).toBe(true);
+    expect(setShowSavePrompt).toHaveBeenCalledWith(true);
+    expect(setIsError).toHaveBeenCalledWith(false);
+  });
+
+  it('handles invalid input', () => {
+    const result = timerValidation('abc', setShowSavePrompt, setIsError);
+
+    expect(result).toBe(false);
+    expect(setShowSavePrompt).toHaveBeenCalledWith(false);
+    expect(setIsError).toHaveBeenCalledWith(true);
+  });
+});
diff --git a/src/grading-settings/grading-scale/GradingScale.jsx b/src/grading-settings/grading-scale/GradingScale.jsx
new file mode 100644
index 0000000000..d4d7d21dfb
--- /dev/null
+++ b/src/grading-settings/grading-scale/GradingScale.jsx
@@ -0,0 +1,268 @@
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Icon, IconButtonWithTooltip } from '@openedx/paragon';
+import { Add as IconAdd } from '@openedx/paragon/icons';
+import PropTypes from 'prop-types';
+import React, { useEffect, useState } from 'react';
+import { GradingScaleHandle, GradingScaleSegment, GradingScaleTicks } from './components';
+import messages from './messages';
+
+import { useRanger } from './react-ranger';
+import { convertGradeData, MAXIMUM_SCALE_LENGTH } from './utils';
+
+const DEFAULT_GRADE_LETTERS = ['A', 'B', 'C', 'D'];
+const getDefaultPassText = intl => intl.formatMessage(messages.defaultPassText);
+
+const GradingScale = ({
+  showSavePrompt,
+  gradeCutoffs,
+  setShowSuccessAlert,
+  setGradingData,
+  resetDataRef,
+  gradeLetters,
+  sortedGrades,
+  setOverrideInternetConnectionAlert,
+  setEligibleGrade,
+  defaultGradeDesignations,
+}) => {
+  const intl = useIntl();
+  const [gradingSegments, setGradingSegments] = useState(sortedGrades);
+  const [letters, setLetters] = useState(gradeLetters);
+  const [convertedResult, setConvertedResult] = useState({});
+  const gradingSegmentsValues = Object.values(gradingSegments);
+  const eligibleValue = gradingSegmentsValues[gradingSegmentsValues.length - 1];
+
+  useEffect(() => {
+    if (resetDataRef.current) {
+      setGradingSegments(sortedGrades);
+      setLetters(gradeLetters);
+      // eslint-disable-next-line no-param-reassign
+      resetDataRef.current = false;
+    }
+  }, [gradeCutoffs]);
+
+  useEffect(() => {
+    setGradingSegments(sortedGrades);
+    setLetters(gradeLetters);
+  }, [sortedGrades.length]);
+
+  useEffect(() => {
+    setGradingData(prevData => ({ ...prevData, gradeCutoffs: convertedResult }));
+    setEligibleGrade(eligibleValue?.current);
+  }, [JSON.stringify(convertedResult)]);
+
+  useEffect(() => {
+    convertGradeData(letters, gradingSegments, setConvertedResult);
+  }, [gradingSegments, letters]);
+
+  const addNewGradingSegment = () => {
+    setGradingSegments((prevSegments) => {
+      let updatedGradingSegment = [];
+      if (prevSegments.length >= 5) {
+        const segSize = MAXIMUM_SCALE_LENGTH / (prevSegments.length + 1);
+        updatedGradingSegment = Array.from({
+          length: prevSegments.length + 1,
+        }).map((_, i) => ({
+          current: 100 - i * segSize,
+          previous: 100 - (i + 1) * segSize,
+        }));
+      } else {
+        const firstSegment = prevSegments[prevSegments.length - 1];
+        const secondSegment = prevSegments[prevSegments.length - 2];
+        const newCurrentValue = Math.ceil(
+          (secondSegment.current - secondSegment.previous) / 2,
+        );
+
+        const newSegment = {
+          current: firstSegment.current + newCurrentValue,
+          previous: firstSegment.current,
+        };
+
+        const updatedSecondSegment = {
+          ...secondSegment,
+          previous: firstSegment.current + newCurrentValue,
+        };
+        updatedGradingSegment = [
+          ...prevSegments.slice(0, prevSegments.length - 2),
+          updatedSecondSegment,
+          newSegment,
+          firstSegment,
+        ];
+      }
+
+      showSavePrompt(true);
+      setShowSuccessAlert(false);
+      setOverrideInternetConnectionAlert(false);
+      return updatedGradingSegment;
+    });
+
+    const nextIndex = (letters.length % defaultGradeDesignations.length);
+
+    if (gradingSegments.length === 2) {
+      setLetters([defaultGradeDesignations[0], defaultGradeDesignations[nextIndex]]);
+    } else {
+      setLetters(prevLetters => [...prevLetters, defaultGradeDesignations[nextIndex]]);
+    }
+  };
+
+  const updateGradingSegments = (newGradingSegmentData, activeHandleIndex) => {
+    const gapToSegment = 1;
+    const sortedSegments = newGradingSegmentData.sort((currentValue, previousValue) => currentValue - previousValue);
+    const newSegmentValue = sortedSegments[sortedSegments.length - 1 - activeHandleIndex];
+    const prevSegmentBoundary = (gradingSegments[activeHandleIndex + 1]
+        && gradingSegments[activeHandleIndex + 1].current) || 0;
+    const nextSegmentBoundary = gradingSegments[activeHandleIndex - 1].current;
+
+    showSavePrompt(true);
+
+    setGradingSegments(gradingSegments.map((gradingSegment, idx) => {
+      const upperBoundaryValue = (newSegmentValue < nextSegmentBoundary - gapToSegment)
+        ? newSegmentValue : (nextSegmentBoundary - gapToSegment);
+      const lowerBoundaryValue = (upperBoundaryValue > prevSegmentBoundary + gapToSegment)
+        ? upperBoundaryValue : (prevSegmentBoundary + gapToSegment);
+
+      if (idx === activeHandleIndex - 1) {
+        return {
+          previous: lowerBoundaryValue,
+          current: gradingSegment.current,
+        };
+      }
+
+      if (idx === activeHandleIndex) {
+        return {
+          current: lowerBoundaryValue,
+          previous: gradingSegment.previous,
+        };
+      }
+
+      return gradingSegment;
+    }));
+  };
+
+  const removeGradingSegment = (gradingSegmentIndex) => {
+    setGradingSegments(prevSegments => {
+      const updatedSegments = [...prevSegments];
+      const removedSegment = updatedSegments.splice(gradingSegmentIndex - 1, 1)[0];
+      const previousSegment = updatedSegments[gradingSegmentIndex - 2];
+
+      if (previousSegment) {
+        previousSegment.previous = removedSegment.previous;
+      }
+
+      return updatedSegments;
+    });
+
+    showSavePrompt(true);
+    setShowSuccessAlert(false);
+    setOverrideInternetConnectionAlert(false);
+
+    setLetters(prevLetters => {
+      const updatedLetters = [...prevLetters];
+      updatedLetters.splice(updatedLetters.length - 1, 1);
+
+      return updatedLetters.length === 1 ? [getDefaultPassText(intl)] : updatedLetters;
+    });
+  };
+
+  const handleLetterChange = (e, idx) => {
+    const { value } = e.target;
+
+    showSavePrompt(true);
+    setShowSuccessAlert(false);
+    setOverrideInternetConnectionAlert(false);
+
+    setLetters(prevLetters => {
+      const updatedLetters = [...prevLetters];
+      const emptyString = '\u200B';
+      updatedLetters[idx - 1] = value || emptyString;
+
+      return updatedLetters;
+    });
+  };
+
+  const handleSegmentChange = () => {
+    setShowSuccessAlert(false);
+    setOverrideInternetConnectionAlert(false);
+    setGradingData(prevData => ({ ...prevData, gradeCutoffs: convertedResult }));
+  };
+
+  const {
+    getTrackProps,
+    ticks,
+    segments,
+    handles,
+    activeHandleIndex,
+  } = useRanger({
+    min: 0,
+    max: MAXIMUM_SCALE_LENGTH,
+    stepSize: 1,
+    values: gradingSegments?.map(segment => segment.current),
+    onDrag: (segmentDataArray) => updateGradingSegments(segmentDataArray, activeHandleIndex),
+    onChange: handleSegmentChange,
+  });
+
+  return (
+    <div className="grading-scale">
+      <IconButtonWithTooltip
+        tooltipPlacement="top"
+        tooltipContent={intl.formatMessage(messages.addNewSegmentButtonAltText)}
+        disabled={gradingSegments.length >= (defaultGradeDesignations.length + 1)}
+        data-testid="grading-scale-btn-add-segment"
+        className="mr-3"
+        src={IconAdd}
+        iconAs={Icon}
+        alt={intl.formatMessage(messages.addNewSegmentButtonAltText)}
+        onClick={addNewGradingSegment}
+      />
+      <div className="grading-scale-segments-and-ticks" {...getTrackProps()}>
+        {ticks.map(({ value, getTickProps }) => (
+          <GradingScaleTicks key={value} value={value} getTickProps={getTickProps} />
+        ))}
+        {segments.reverse().map(({ value, getSegmentProps }, idx = 1) => (
+          <GradingScaleSegment
+            key={idx}
+            getSegmentProps={getSegmentProps}
+            removeGradingSegment={removeGradingSegment}
+            gradingSegments={gradingSegments}
+            value={value}
+            idx={idx}
+            handleLetterChange={handleLetterChange}
+            letters={letters}
+          />
+        ))}
+        {handles.map(({ value, getHandleProps }, idx) => (
+          <GradingScaleHandle
+            key={value}
+            getHandleProps={getHandleProps}
+            gradingSegments={gradingSegments}
+            value={value}
+            idx={idx}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+GradingScale.propTypes = {
+  showSavePrompt: PropTypes.func.isRequired,
+  gradeCutoffs: PropTypes.objectOf(PropTypes.number).isRequired,
+  gradeLetters: PropTypes.arrayOf(PropTypes.string).isRequired,
+  setShowSuccessAlert: PropTypes.func.isRequired,
+  setGradingData: PropTypes.func.isRequired,
+  setOverrideInternetConnectionAlert: PropTypes.func.isRequired,
+  resetDataRef: PropTypes.objectOf(PropTypes.bool).isRequired,
+  sortedGrades: PropTypes.arrayOf(
+    PropTypes.shape({
+      current: PropTypes.number.isRequired,
+      previous: PropTypes.number.isRequired,
+    }),
+  ).isRequired,
+  setEligibleGrade: PropTypes.func.isRequired,
+  defaultGradeDesignations: PropTypes.arrayOf(PropTypes.string),
+};
+
+GradingScale.defaultProps = {
+  defaultGradeDesignations: DEFAULT_GRADE_LETTERS,
+};
+
+export default GradingScale;
diff --git a/src/grading-settings/grading-scale/GradingScale.scss b/src/grading-settings/grading-scale/GradingScale.scss
new file mode 100644
index 0000000000..8ca6ac9ec3
--- /dev/null
+++ b/src/grading-settings/grading-scale/GradingScale.scss
@@ -0,0 +1,116 @@
+.grading-scale {
+  display: flex;
+  margin-top: 1.5rem;
+  align-items: center;
+  margin-bottom: map-get($spacers, 6);
+
+  .grading-scale-segments-and-ticks {
+    display: inline-block;
+    height: 3.125rem;
+    width: 100%;
+    border: 1px solid $black;
+    overflow: hidden;
+
+    .grading-scale-tick {
+      .grading-scale-tick-number {
+        position: absolute;
+        font-size: .6rem;
+        color: $black;
+        top: 100%;
+        transform: translate(-50%, 1.2rem);
+        white-space: nowrap;
+      }
+
+      &::before {
+        content: "";
+        position: absolute;
+        left: 0;
+        background-color: $gray-400;
+        height: .3125rem;
+        width: .125rem;
+        transform: translate(-50%, .7rem);
+      }
+    }
+
+    .grading-scale-segment-btn-resize {
+      border: none;
+      outline: none;
+      background-color: transparent;
+      appearance: none;
+      height: 100%;
+      padding: 0 .4375rem;
+      width: .625rem;
+      z-index: $zindex-dropdown !important;
+
+      &:disabled {
+        color: $black;
+      }
+    }
+
+    .grading-scale-segment {
+      height: 100%;
+
+      &:last-child {
+        border-right: none;
+      }
+
+      .segment--1 {
+        display: none;
+      }
+
+      @each $key, $color in $grading-scale-segment-colors {
+        &.segment-#{$key} {
+          background-color: $color;
+          z-index: #{$key};
+        }
+      }
+
+      &:hover .grading-scale-segment-btn-remove {
+        display: block;
+      }
+
+      .grading-scale-segment-btn-remove {
+        font: normal $font-weight-normal .6875rem/1 $font-family-base;
+        display: none;
+        position: absolute;
+        top: -1.5625rem;
+        right: -.375rem;
+        padding: .375rem;
+        text-decoration: none;
+      }
+
+      .grading-scale-segment-content {
+        display: flex;
+        flex-direction: column;
+        margin-top: .375rem;
+        font-size: .7rem;
+        white-space: nowrap;
+        text-align: right;
+        align-items: flex-end;
+      }
+
+      .grading-scale-segment-content-title {
+        font: normal $font-weight-semi-bold 1rem/1 $font-family-base;
+        border: none;
+        outline: none;
+        background-color: transparent;
+        appearance: none;
+        cursor: text;
+        text-align: end;
+
+        &:disabled {
+          color: $black;
+        }
+      }
+
+      .grading-scale-segment-content-number {
+        font: normal $font-weight-normal .75rem/1 $font-family-base;
+        color: $black;
+
+        &:disabled {
+          color: $black;
+        }
+      }
+    }
+  }
+}
diff --git a/src/grading-settings/grading-scale/GradingScale.test.jsx b/src/grading-settings/grading-scale/GradingScale.test.jsx
new file mode 100644
index 0000000000..276ad07ec2
--- /dev/null
+++ b/src/grading-settings/grading-scale/GradingScale.test.jsx
@@ -0,0 +1,155 @@
+import React from 'react';
+import { IntlProvider, injectIntl } from '@edx/frontend-platform/i18n';
+import { initializeMockApp } from '@edx/frontend-platform';
+import { render, waitFor, fireEvent } from '@testing-library/react';
+
+import GradingScale from './GradingScale';
+
+const gradeCutoffs = { A: 0.9, B: 0.8, C: 0.7 };
+
+const gradeLetters = ['A', 'B', 'C', 'D'];
+
+const sortedGrades = [
+  { current: 100, previous: 49 },
+  { current: 49, previous: 41 },
+  { current: 32, previous: 20 },
+  { current: 20, previous: 0 },
+];
+
+const RootWrapper = () => (
+  <IntlProvider locale="en" messages={{}}>
+    <GradingScale
+      intl={injectIntl}
+      gradeCutoffs={gradeCutoffs}
+      gradeLetters={gradeLetters}
+      sortedGrades={sortedGrades}
+      resetDataRef={{ current: false }}
+      showSavePrompt={jest.fn()}
+      setShowSuccessAlert={jest.fn()}
+      setGradingData={jest.fn()}
+      setOverrideInternetConnectionAlert={jest.fn()}
+      setEligibleGrade={jest.fn()}
+    />
+  </IntlProvider>
+);
+
+describe('<GradingScale />', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+  });
+
+  it('renders grading scale ticks', async () => {
+    const { getAllByTestId } = render(<RootWrapper />);
+    await waitFor(() => {
+      const ticks = getAllByTestId('grading-scale-tick');
+      expect(ticks).toHaveLength(11); // 0 to 100, inclusive, with step 10
+    });
+  });
+
+  it('renders grading scale segments', async () => {
+    const { getAllByTestId } = render(<RootWrapper />);
+    await waitFor(() => {
+      const segments = getAllByTestId('grading-scale-segment');
+      expect(segments).toHaveLength(5);
+    });
+  });
+
+  it('should add a new grading segment when "Add new grading segment" button is clicked', async () => {
+    const { debug, getAllByTestId } = render(<RootWrapper />);
+    await waitFor(() => {
+      const addNewSegmentBtn = getAllByTestId('grading-scale-btn-add-segment');
+      expect(addNewSegmentBtn[0]).toBeInTheDocument();
+      fireEvent.click(addNewSegmentBtn[0]);
+      const segments = getAllByTestId('grading-scale-segment');
+      expect(segments).toHaveLength(6);
+      debug(addNewSegmentBtn);
+    });
+  });
+
+  it('should remove grading segment when "Remove" button is clicked', async () => {
+    const { getAllByTestId } = render(<RootWrapper />);
+    await waitFor(() => {
+      const segments = getAllByTestId('grading-scale-segment');
+      const removeSegmentBtn = getAllByTestId('grading-scale-btn-remove');
+      fireEvent.click(removeSegmentBtn[1]);
+      expect(segments).toHaveLength(5);
+    });
+  });
+
+  it('should update segment input value', async () => {
+    const { getAllByTestId } = render(<RootWrapper />);
+    await waitFor(() => {
+      const segmentInputs = getAllByTestId('grading-scale-segment-input');
+      expect(segmentInputs).toHaveLength(5);
+      const segmentInput = segmentInputs[1];
+      fireEvent.change(segmentInput, { target: { value: 'Test' } });
+      expect(segmentInput).toHaveValue('Test');
+    });
+  });
+
+  it('should render GradingScale component with short grade cutoffs and sorted grades', async () => {
+    const shortGradeCutoffs = { Pass: 0.9 };
+    const shortSortedGrades = [
+      { current: 100, previous: 49 },
+      { current: 20, previous: 0 },
+    ];
+    const { getAllByTestId } = render(
+      <IntlProvider locale="en" messages={{}}>
+        <GradingScale
+          intl={injectIntl}
+          gradeCutoffs={shortGradeCutoffs}
+          gradeLetters={['A']}
+          sortedGrades={shortSortedGrades}
+          resetDataRef={{ current: false }}
+          showSavePrompt={jest.fn()}
+          setShowSuccessAlert={jest.fn()}
+          setGradingData={jest.fn()}
+          setOverrideInternetConnectionAlert={jest.fn()}
+          setEligibleGrade={jest.fn()}
+        />
+      </IntlProvider>,
+    );
+    await waitFor(() => {
+      const segmentInputs = getAllByTestId('grading-scale-segment-input');
+      expect(segmentInputs[0]).toHaveValue('Fail');
+      fireEvent.change(segmentInputs[1], { target: { value: 'Test' } });
+      expect(segmentInputs[1]).toHaveValue('Test');
+    });
+  });
+
+  it('should render GradingScale component with more than 5 grades', async () => {
+    const { getAllByTestId } = render(
+      <IntlProvider locale="en" messages={{}}>
+        <GradingScale
+          intl={injectIntl}
+          gradeCutoffs={gradeCutoffs}
+          gradeLetters={gradeLetters}
+          sortedGrades={sortedGrades}
+          resetDataRef={{ current: false }}
+          showSavePrompt={jest.fn()}
+          setShowSuccessAlert={jest.fn()}
+          setGradingData={jest.fn()}
+          setOverrideInternetConnectionAlert={jest.fn()}
+          setEligibleGrade={jest.fn()}
+          defaultGradeDesignations={['A', 'B', 'C', 'D', 'E']}
+        />
+      </IntlProvider>,
+    );
+    await waitFor(() => {
+      const addNewSegmentBtn = getAllByTestId('grading-scale-btn-add-segment');
+      expect(addNewSegmentBtn[0]).toBeInTheDocument();
+      fireEvent.click(addNewSegmentBtn[0]);
+      const segments = getAllByTestId('grading-scale-segment-number');
+      // Calculation is based on 100/6 i.e A, B, C, D, E, F which comes to 16.666666666666657
+      expect(segments[0].textContent).toEqual('83.33333333333333 - 100');
+      expect(segments[6].textContent).toEqual('0 - 15.666666666666657');
+    });
+  });
+});
diff --git a/src/grading-settings/grading-scale/components/GradingScaleHandle.jsx b/src/grading-settings/grading-scale/components/GradingScaleHandle.jsx
new file mode 100644
index 0000000000..d6ca20dfc7
--- /dev/null
+++ b/src/grading-settings/grading-scale/components/GradingScaleHandle.jsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { MAXIMUM_SCALE_LENGTH } from '../utils';
+
+const GradingScaleHandle = ({
+  idx, value, gradingSegments, getHandleProps,
+}) => (
+  <button
+    key={value}
+    className="grading-scale-segment-btn-resize"
+    type="button"
+    disabled={gradingSegments[idx].current === MAXIMUM_SCALE_LENGTH}
+    {...getHandleProps({
+      style: gradingSegments[idx].current === MAXIMUM_SCALE_LENGTH ? {
+        cursor: 'default', display: 'none',
+      } : { cursor: 'e-resize' },
+    })}
+  />
+);
+
+GradingScaleHandle.propTypes = {
+  idx: PropTypes.number.isRequired,
+  value: PropTypes.number.isRequired,
+  getHandleProps: PropTypes.func.isRequired,
+  gradingSegments: PropTypes.arrayOf(
+    PropTypes.shape({
+      current: PropTypes.number.isRequired,
+      previous: PropTypes.number.isRequired,
+    }),
+  ).isRequired,
+};
+
+export default GradingScaleHandle;
diff --git a/src/grading-settings/grading-scale/components/GradingScaleSegment.tsx b/src/grading-settings/grading-scale/components/GradingScaleSegment.tsx
new file mode 100644
index 0000000000..9cc3e059d1
--- /dev/null
+++ b/src/grading-settings/grading-scale/components/GradingScaleSegment.tsx
@@ -0,0 +1,86 @@
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Button } from '@openedx/paragon';
+import React, { ChangeEvent } from 'react';
+import messages from '../messages';
+
+import { getLettersOnLongScale, getLettersOnShortScale } from '../utils';
+
+interface RangeSegment {
+  previous: number,
+  current: number,
+}
+
+interface GradingScaleSegmentProps {
+  idx: number,
+  value: number,
+  getSegmentProps: () => { [key: string]: string },
+  handleLetterChange: (event: ChangeEvent, idx: number) => void,
+  letters: [string],
+  gradingSegments: RangeSegment[],
+  removeGradingSegment: (idx: number) => void,
+}
+
+const GradingScaleSegment = ({
+  idx,
+  value,
+  getSegmentProps,
+  handleLetterChange,
+  letters,
+  gradingSegments,
+  removeGradingSegment,
+}: GradingScaleSegmentProps) => {
+  const intl = useIntl();
+  const prevValue = gradingSegments[idx === 0 ? 0 : idx - 1]?.previous ?? 0;
+  const segmentRightMargin = (value - prevValue) < 6 ? '0.125rem' : '1.25rem';
+  return (
+    <div
+      key={value}
+      className={`grading-scale-segment segment-${idx - 1}`}
+      data-testid="grading-scale-segment"
+      {...getSegmentProps()}
+    >
+      <div
+        className="grading-scale-segment-content"
+        style={{
+          marginRight: segmentRightMargin,
+        }}
+      >
+        {gradingSegments.length === 2 && (
+        <input
+          className="grading-scale-segment-content-title m-0"
+          data-testid="grading-scale-segment-input"
+          value={getLettersOnShortScale(idx, letters, intl)}
+          onChange={e => handleLetterChange(e, idx)}
+          disabled={idx === gradingSegments.length}
+        />
+        )}
+        {gradingSegments.length > 2 && (
+        <input
+          className="grading-scale-segment-content-title m-0"
+          data-testid="grading-scale-segment-input"
+          value={getLettersOnLongScale(idx, letters, gradingSegments)}
+          onChange={e => handleLetterChange(e, idx)}
+          disabled={idx === gradingSegments.length}
+        />
+        )}
+        <span data-testid="grading-scale-segment-number" className="grading-scale-segment-content-number m-0">
+          {gradingSegments[idx === 0 ? 0 : idx - 1]?.previous} - {value === 100 ? value : value - 1}
+        </span>
+      </div>
+      {idx !== gradingSegments.length && idx - 1 !== 0 && (
+        <Button
+          variant="link"
+          size="inline"
+          className="grading-scale-segment-btn-remove"
+          data-testid="grading-scale-btn-remove"
+          type="button"
+          onClick={() => removeGradingSegment(idx)}
+        >
+          {intl.formatMessage(messages.removeSegmentButtonText)}
+        </Button>
+      )}
+    </div>
+  );
+};
+
+export default GradingScaleSegment;
diff --git a/src/grading-settings/grading-scale/components/GradingScaleTick.jsx b/src/grading-settings/grading-scale/components/GradingScaleTick.jsx
new file mode 100644
index 0000000000..b1928c9015
--- /dev/null
+++ b/src/grading-settings/grading-scale/components/GradingScaleTick.jsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const GradingScaleTick = ({ getTickProps, value }) => (
+  <div className="mt-5 grading-scale-tick" data-testid="grading-scale-tick" {...getTickProps()}>
+    <div className="grading-scale-tick-number">{value}</div>
+  </div>
+);
+
+GradingScaleTick.propTypes = {
+  value: PropTypes.number.isRequired,
+  getTickProps: PropTypes.func.isRequired,
+};
+
+export default GradingScaleTick;
diff --git a/src/grading-settings/grading-scale/components/index.jsx b/src/grading-settings/grading-scale/components/index.jsx
new file mode 100644
index 0000000000..6770055cf4
--- /dev/null
+++ b/src/grading-settings/grading-scale/components/index.jsx
@@ -0,0 +1,3 @@
+export { default as GradingScaleHandle } from './GradingScaleHandle';
+export { default as GradingScaleTicks } from './GradingScaleTick';
+export { default as GradingScaleSegment } from './GradingScaleSegment';
diff --git a/src/grading-settings/grading-scale/messages.js b/src/grading-settings/grading-scale/messages.js
new file mode 100644
index 0000000000..e567d293fb
--- /dev/null
+++ b/src/grading-settings/grading-scale/messages.js
@@ -0,0 +1,22 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  addNewSegmentButtonAltText: {
+    id: 'course-authoring.grading-settings.add-new-segment.btn.text',
+    defaultMessage: 'Add new grading segment',
+  },
+  removeSegmentButtonText: {
+    id: 'course-authoring.grading-settings.remove-segment.btn.text',
+    defaultMessage: 'Remove',
+  },
+  segmentFailGradingText: {
+    id: 'course-authoring.grading-settings.fail-segment.text',
+    defaultMessage: 'Fail',
+  },
+  defaultPassText: {
+    id: 'course-authoring.grading-settings.default.pass.text',
+    defaultMessage: 'Pass',
+  },
+});
+
+export default messages;
diff --git a/src/grading-settings/grading-scale/react-ranger.js b/src/grading-settings/grading-scale/react-ranger.js
new file mode 100644
index 0000000000..55895b34f0
--- /dev/null
+++ b/src/grading-settings/grading-scale/react-ranger.js
@@ -0,0 +1,358 @@
+/* eslint-disable */
+import React from 'react';
+
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) { return {}; }
+  const target = {};
+  const sourceKeys = Object.keys(source);
+  let key; let
+    i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) { continue; }
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+const getBoundingClientRect = function getBoundingClientRect(element) {
+  const rect = element.getBoundingClientRect();
+  return {
+    left: Math.ceil(rect.left),
+    width: Math.ceil(rect.width),
+  };
+};
+
+const sortNumList = function sortNumList(arr) {
+  return [].concat(arr).sort((a, b) => Number(a) - Number(b));
+};
+
+const useGetLatest = function useGetLatest(val) {
+  const ref = React.useRef(val);
+  ref.current = val;
+  return React.useCallback(() => ref.current, []);
+};
+
+const linearInterpolator = {
+  getPercentageForValue: function getPercentageForValue(val, min, max) {
+    return Math.max(0, Math.min(100, (val - min) / (max - min) * 100));
+  },
+  getValueForClientX: function getValueForClientX(clientX, trackDims, min, max) {
+    const { left } = trackDims;
+    const { width } = trackDims;
+    const percentageValue = (clientX - left) / width;
+    const value = (max - min) * percentageValue;
+    return value + min;
+  },
+};
+function useRanger(_ref) {
+  const _ref$interpolator = _ref.interpolator;
+  const interpolator = _ref$interpolator === void 0 ? linearInterpolator : _ref$interpolator;
+  const _ref$tickSize = _ref.tickSize;
+  const tickSize = _ref$tickSize === void 0 ? 10 : _ref$tickSize;
+  const { values } = _ref;
+  const { min } = _ref;
+  const { max } = _ref;
+  const controlledTicks = _ref.ticks;
+  const { steps } = _ref;
+  const { onChange } = _ref;
+  const { onDrag } = _ref;
+  const { stepSize } = _ref;
+
+  const _React$useState = React.useState(null);
+  const activeHandleIndex = _React$useState[0];
+  const setActiveHandleIndex = _React$useState[1];
+
+  const _React$useState2 = React.useState();
+  const tempValues = _React$useState2[0];
+  const setTempValues = _React$useState2[1];
+
+  const getLatest = useGetLatest({
+    activeHandleIndex,
+    onChange,
+    onDrag,
+    values,
+    tempValues,
+  });
+  const trackElRef = React.useRef();
+  const getValueForClientX = React.useCallback((clientX) => {
+    const trackDims = getBoundingClientRect(trackElRef.current);
+    return interpolator.getValueForClientX(clientX, trackDims, min, max);
+  }, [interpolator, max, min]);
+  const getNextStep = React.useCallback((val, direction) => {
+    if (steps) {
+      const currIndex = steps.indexOf(val);
+      const nextIndex = currIndex + direction;
+
+      if (nextIndex >= 0 && nextIndex < steps.length) {
+        return steps[nextIndex];
+      }
+      return val;
+    }
+    if (process.env.NODE_ENV !== 'production') {
+      if (typeof stepSize === 'undefined') {
+        throw new Error('Warning: The option `stepSize` is expected in `useRanger`, but its value is `undefined`');
+      }
+    }
+
+    const nextVal = val + stepSize * direction;
+
+    if (nextVal >= min && nextVal <= max) {
+      return nextVal;
+    }
+    return val;
+  }, [max, min, stepSize, steps]);
+  const roundToStep = React.useCallback((val) => {
+    let left = min;
+    let right = max;
+
+    if (steps) {
+      steps.forEach((step) => {
+        if (step <= val && step > left) {
+          left = step;
+        }
+
+        if (step >= val && step < right) {
+          right = step;
+        }
+      });
+    } else {
+      if (process.env.NODE_ENV !== 'production') {
+        if (typeof stepSize === 'undefined') {
+          throw new Error('Warning: The option `stepSize` is expected in `useRanger`, but its value is `undefined`');
+        }
+      }
+
+      while (left < val && left + stepSize < val) {
+        left += stepSize;
+      }
+
+      right = Math.min(left + stepSize, max);
+    }
+
+    if (val - left < right - val) {
+      return left;
+    }
+
+    return right;
+  }, [max, min, stepSize, steps]);
+  const handleDrag = React.useCallback((e) => {
+    const _getLatest = getLatest();
+    const { activeHandleIndex } = _getLatest;
+    const { onDrag } = _getLatest;
+
+    const clientX = e.type === 'touchmove' ? e.changedTouches[0].clientX : e.clientX;
+    const newValue = getValueForClientX(clientX);
+    const newRoundedValue = roundToStep(newValue);
+    const newValues = []
+      .concat(values.slice(0, activeHandleIndex), [newRoundedValue], values.slice(activeHandleIndex + 1));
+
+    if (onDrag) {
+      onDrag(newValues);
+    } else {
+      setTempValues(newValues);
+    }
+  }, [getLatest, getValueForClientX, roundToStep, values]);
+  const handleKeyDown = React.useCallback((e, i) => {
+    const _getLatest2 = getLatest();
+    const { values } = _getLatest2;
+    const _getLatest2$onChange = _getLatest2.onChange;
+    const onChange = _getLatest2$onChange === void 0
+      ? function () {} : _getLatest2$onChange; // Left Arrow || Right Arrow
+
+    if (e.keyCode === 37 || e.keyCode === 39) {
+      setActiveHandleIndex(i);
+      const direction = e.keyCode === 37 ? -1 : 1;
+      const newValue = getNextStep(values[i], direction);
+      const newValues = [].concat(values.slice(0, i), [newValue], values.slice(i + 1));
+      const sortedValues = sortNumList(newValues);
+      onChange(sortedValues);
+    }
+  }, [getLatest, getNextStep]);
+  const handlePress = React.useCallback((e, i) => {
+    setActiveHandleIndex(i);
+
+    const handleRelease = function handleRelease(e) {
+      const _getLatest3 = getLatest();
+      const { tempValues } = _getLatest3;
+      const { values } = _getLatest3;
+      const _getLatest3$onChange = _getLatest3.onChange;
+      const onChange = _getLatest3$onChange === void 0 ? function () {} : _getLatest3$onChange;
+      const _getLatest3$onDrag = _getLatest3.onDrag;
+      const onDrag = _getLatest3$onDrag === void 0 ? function () {} : _getLatest3$onDrag;
+
+      document.removeEventListener('mousemove', handleDrag);
+      document.removeEventListener('touchmove', handleDrag);
+      document.removeEventListener('mouseup', handleRelease);
+      document.removeEventListener('touchend', handleRelease);
+      const sortedValues = sortNumList(tempValues || values);
+      onChange(sortedValues);
+      onDrag(sortedValues);
+      setActiveHandleIndex(null);
+      setTempValues();
+    };
+
+    document.addEventListener('mousemove', handleDrag);
+    document.addEventListener('touchmove', handleDrag);
+    document.addEventListener('mouseup', handleRelease);
+    document.addEventListener('touchend', handleRelease);
+  }, [getLatest, handleDrag]);
+  const getPercentageForValue = React.useCallback((val) =>
+    interpolator.getPercentageForValue(val, min, max), [interpolator, max, min]); // Build the ticks
+
+  const ticks = React.useMemo(() => {
+    let ticks = controlledTicks || steps;
+
+    if (!ticks) {
+      ticks = [min];
+
+      while (ticks[ticks.length - 1] < max - tickSize) {
+        ticks.push(ticks[ticks.length - 1] + tickSize);
+      }
+
+      ticks.push(max);
+    }
+
+    return ticks.map((value, i) => ({
+      value,
+      getTickProps: function getTickProps(_temp) {
+        const _ref2 = _temp === void 0 ? {} : _temp;
+        const _ref2$key = _ref2.key;
+        const key = _ref2$key === void 0 ? i : _ref2$key;
+        const _ref2$style = _ref2.style;
+        const style = _ref2$style === void 0 ? {} : _ref2$style;
+        const rest = _objectWithoutPropertiesLoose(_ref2, ['key', 'style']);
+
+        return {
+          key,
+          style: {
+            position: 'absolute',
+            width: 0,
+            left: `${getPercentageForValue(value) }%`,
+            transform: 'translateX(-50%)',
+            ...style,
+          },
+          ...rest,
+        };
+      },
+    }));
+  }, [controlledTicks, getPercentageForValue, max, min, steps, tickSize]);
+  const segments = React.useMemo(() => {
+    const sortedValues = sortNumList(tempValues || values);
+    return [].concat(sortedValues, [max]).map((value, i) => ({
+      value,
+      getSegmentProps: function getSegmentProps(_temp2) {
+        const _ref3 = _temp2 === void 0 ? {} : _temp2;
+        const _ref3$key = _ref3.key;
+        const key = _ref3$key === void 0 ? i : _ref3$key;
+        const _ref3$style = _ref3.style;
+        const style = _ref3$style === void 0 ? {} : _ref3$style;
+        const rest = _objectWithoutPropertiesLoose(_ref3, ['key', 'style']);
+
+        const left = getPercentageForValue(sortedValues[i - 1] ? sortedValues[i - 1] : min);
+        const width = getPercentageForValue(value) - left;
+        return {
+          key,
+          style: {
+            position: 'absolute',
+            left: `${left }%`,
+            width: `${width }%`,
+            ...style,
+          },
+          ...rest,
+        };
+      },
+    }));
+  }, [getPercentageForValue, max, min, tempValues, values]);
+  const handles = React.useMemo(() => (tempValues || values).map((value, i) => ({
+    value,
+    active: i === activeHandleIndex,
+    getHandleProps: function getHandleProps(_temp3) {
+      const _ref4 = _temp3 === void 0 ? {} : _temp3;
+      const _ref4$key = _ref4.key;
+      const key = _ref4$key === void 0 ? i : _ref4$key;
+      const { ref } = _ref4;
+      const _ref4$innerRef = _ref4.innerRef;
+      const _onKeyDown = _ref4.onKeyDown;
+      const _onMouseDown = _ref4.onMouseDown;
+      const _onTouchStart = _ref4.onTouchStart;
+      const _ref4$style = _ref4.style;
+      const style = _ref4$style === void 0 ? {} : _ref4$style;
+      const rest = _objectWithoutPropertiesLoose(_ref4, [
+        'key', 'ref', 'innerRef', 'onKeyDown', 'onMouseDown', 'onTouchStart', 'style',
+      ]);
+
+      return {
+        key,
+        onKeyDown: function onKeyDown(e) {
+          e.persist();
+          handleKeyDown(e, i);
+          if (_onKeyDown) { _onKeyDown(e); }
+        },
+        onMouseDown: function onMouseDown(e) {
+          e.persist();
+          handlePress(e, i);
+          if (_onMouseDown) { _onMouseDown(e); }
+        },
+        onTouchStart: function onTouchStart(e) {
+          e.persist();
+          handlePress(e, i);
+          if (_onTouchStart) { _onTouchStart(e); }
+        },
+        role: 'slider',
+        'aria-valuemin': min,
+        'aria-valuemax': max,
+        'aria-valuenow': value,
+        style: {
+          position: 'absolute',
+          top: '50%',
+          left: `${getPercentageForValue(value) }%`,
+          zIndex: i === activeHandleIndex ? '1' : '0',
+          transform: 'translate(-50%, -50%)',
+          ...style,
+        },
+        ...rest,
+      };
+    },
+  })), [activeHandleIndex, getPercentageForValue, handleKeyDown, handlePress, min, max, tempValues, values]);
+
+  const getTrackProps = function getTrackProps(_temp4) {
+    const _ref5 = _temp4 === void 0 ? {} : _temp4;
+    const _ref5$style = _ref5.style;
+    const style = _ref5$style === void 0 ? {} : _ref5$style;
+    const _ref6 = _ref5.ref;
+    const rest = _objectWithoutPropertiesLoose(_ref5, ['style', 'ref']);
+
+    return {
+      ref: function ref(el) {
+        trackElRef.current = el;
+
+        if (_ref6) {
+          if (typeof _ref6 === 'function') {
+            _ref6(el);
+          } else {
+            _ref6.current = el;
+          }
+        }
+      },
+      style: {
+        position: 'relative',
+        userSelect: 'none',
+        ...style,
+      },
+      ...rest,
+    };
+  };
+
+  return {
+    activeHandleIndex,
+    getTrackProps,
+    ticks,
+    segments,
+    handles,
+  };
+}
+
+export { useRanger };
diff --git a/src/grading-settings/grading-scale/react-ranger.test.js b/src/grading-settings/grading-scale/react-ranger.test.js
new file mode 100644
index 0000000000..76692970df
--- /dev/null
+++ b/src/grading-settings/grading-scale/react-ranger.test.js
@@ -0,0 +1,55 @@
+import { renderHook, act } from '@testing-library/react-hooks';
+
+import { useRanger } from './react-ranger';
+
+describe('useRanger Hook', () => {
+  const mockOnChange = jest.fn();
+  const mockOnDrag = jest.fn();
+
+  const defaultProps = {
+    values: [20, 80],
+    min: 0,
+    max: 100,
+    stepSize: 10,
+    onChange: mockOnChange,
+    onDrag: mockOnDrag,
+  };
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('initializes with correct default properties', () => {
+    const { result } = renderHook(() => useRanger(defaultProps));
+
+    expect(result.current.ticks).toBeDefined();
+    expect(result.current.segments).toBeDefined();
+    expect(result.current.handles).toHaveLength(2); // Two handles for two values
+    expect(result.current.activeHandleIndex).toBeNull();
+  });
+
+  it('calculates ticks based on min, max, and stepSize', () => {
+    const { result } = renderHook(() => useRanger(defaultProps));
+
+    const tickValues = result.current.ticks.map((tick) => tick.value);
+    expect(tickValues).toEqual([0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100]);
+  });
+
+  it('resets active handle index after interaction', () => {
+    const { result } = renderHook(() => useRanger(defaultProps));
+
+    act(() => {
+      result.current.handles[0].getHandleProps().onMouseDown({ persist: jest.fn() }, 0);
+      document.dispatchEvent(new MouseEvent('mouseup'));
+    });
+
+    expect(result.current.activeHandleIndex).toBeNull();
+  });
+
+  it('computes segments based on values', () => {
+    const { result } = renderHook(() => useRanger(defaultProps));
+
+    const segmentValues = result.current.segments.map((segment) => segment.value);
+    expect(segmentValues).toEqual([20, 80, 100]);
+  });
+});
diff --git a/src/grading-settings/grading-scale/utils.js b/src/grading-settings/grading-scale/utils.js
new file mode 100644
index 0000000000..c395db3c8f
--- /dev/null
+++ b/src/grading-settings/grading-scale/utils.js
@@ -0,0 +1,90 @@
+import messages from './messages';
+
+export const MAXIMUM_SCALE_LENGTH = 100;
+
+/**
+ * Converting fractional numbers to integers.
+ *
+ * @param {object} cutoffs - The object containing the settings to grading cutoffs.
+ * @returns {array} - Converted grading cutoffs.
+ */
+export const getGradingValues = (cutoffs) => Object.values(cutoffs)
+  .map(number => Math.round(number * MAXIMUM_SCALE_LENGTH));
+
+/**
+ * Initially, the data comes in the format { a: 0.8 },
+ * this function converts the data structure to the required { current: 100, previous: 80 } format.
+ *
+ * @param {object} gradeValues - The object containing the settings to grading cutoffs.
+ * @returns {object} - New grading cutoffs.
+ */
+export const getSortedGrades = (gradeValues) => gradeValues.reduce((sortedArray, current, idx) => {
+  if (idx === (gradeValues.length - 1)) {
+    sortedArray.push({ current: gradeValues[idx - 1] || MAXIMUM_SCALE_LENGTH, previous: gradeValues[idx] });
+    sortedArray.push({ current: gradeValues[idx], previous: 0 });
+  } else if (idx === 0) {
+    sortedArray.push({ current: MAXIMUM_SCALE_LENGTH, previous: current });
+  } else {
+    const previous = gradeValues[idx - 1];
+    sortedArray.push({ current: previous, previous: current });
+  }
+
+  return sortedArray;
+}, []);
+
+/**
+ * Changes the start and end values of the segments when there are two segments.
+ *
+ * @param {number} idx - Segment index.
+ * @param {array} letters - Names of grading segments.
+ * @param {array} gradingSegments - Grading cutoffs.
+ * @returns {string} - Segment display name.
+ */
+export const getLettersOnLongScale = (idx, letters, gradingSegments) => {
+  const END_OF_SCALE_NAME = 'F';
+
+  if (idx === 0) {
+    return letters[0];
+  }
+
+  if ((idx - 1) === (gradingSegments.length - 1)) {
+    return END_OF_SCALE_NAME;
+  }
+
+  return letters[idx - 1];
+};
+
+/**
+ * Changes the positions of segment names if there are more than two segments.
+ *
+ * @param {number} idx - Segment index.
+ * @param {array} letters - Names of grading segments.
+ * @returns {string} - Segment display name.
+ */
+export const getLettersOnShortScale = (idx, letters, intl) => {
+  const END_OF_SCALE_NAME = intl.formatMessage(messages.segmentFailGradingText);
+
+  return (idx === 1 ? letters[idx - 1] : END_OF_SCALE_NAME);
+};
+
+/**
+ * Converts the data to the original format with fractional numbers { a: 0.8 }.
+ *
+ * @param {array} letters - Names of grading segments.
+ * @param {array} gradingSegments - Grading cutoffs.
+ * @param {func} setConvertedResult - Changing the state of the converted result.
+ * @returns {void}
+ */
+export const convertGradeData = (letters, gradingSegments, setConvertedResult) => {
+  const convertedData = {};
+
+  if (!gradingSegments.length) {
+    return;
+  }
+
+  letters.forEach((letter, idx) => {
+    convertedData[letter] = gradingSegments[idx].previous / MAXIMUM_SCALE_LENGTH;
+  });
+
+  setConvertedResult(convertedData);
+};
diff --git a/src/grading-settings/grading-sidebar/GradingSidebar.test.jsx b/src/grading-settings/grading-sidebar/GradingSidebar.test.jsx
new file mode 100644
index 0000000000..d086ae901f
--- /dev/null
+++ b/src/grading-settings/grading-sidebar/GradingSidebar.test.jsx
@@ -0,0 +1,20 @@
+import { injectIntl } from '@edx/frontend-platform/i18n';
+import {
+  initializeMocks, render, screen,
+} from '../../testUtils';
+import messages from './messages';
+import GradingSidebar from '.';
+
+describe('<GradingSidebar />', () => {
+  beforeEach(async () => {
+    initializeMocks();
+  });
+
+  it('renders sidebar text content correctly', async () => {
+    render(<GradingSidebar intl={injectIntl} courseId="123" />);
+    expect(await screen.findByText(messages.gradingSidebarTitle.defaultMessage)).toBeInTheDocument();
+    expect(screen.getByText(messages.gradingSidebarAbout1.defaultMessage)).toBeInTheDocument();
+    expect(screen.getByText(messages.gradingSidebarAbout2.defaultMessage)).toBeInTheDocument();
+    expect(screen.getByText(messages.gradingSidebarAbout3.defaultMessage)).toBeInTheDocument();
+  });
+});
diff --git a/src/grading-settings/grading-sidebar/index.jsx b/src/grading-settings/grading-sidebar/index.jsx
new file mode 100644
index 0000000000..eff5a602a4
--- /dev/null
+++ b/src/grading-settings/grading-sidebar/index.jsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import PropTypes from 'prop-types';
+
+import { HelpSidebar } from '../../generic/help-sidebar';
+import messages from './messages';
+
+const GradingSidebar = ({ intl, courseId, proctoredExamSettingsUrl }) => (
+  <HelpSidebar
+    courseId={courseId}
+    showOtherSettings
+    proctoredExamSettingsUrl={proctoredExamSettingsUrl}
+  >
+    <h4 className="help-sidebar-about-title">
+      {intl.formatMessage(messages.gradingSidebarTitle)}
+    </h4>
+    <p className="help-sidebar-about-descriptions">
+      {intl.formatMessage(messages.gradingSidebarAbout1)}
+    </p>
+    <p className="help-sidebar-about-descriptions">
+      {intl.formatMessage(messages.gradingSidebarAbout2)}
+    </p>
+    <p className="help-sidebar-about-descriptions">
+      {intl.formatMessage(messages.gradingSidebarAbout3)}
+    </p>
+  </HelpSidebar>
+);
+
+GradingSidebar.defaultProps = {
+  proctoredExamSettingsUrl: '',
+};
+
+GradingSidebar.propTypes = {
+  intl: intlShape.isRequired,
+  courseId: PropTypes.string.isRequired,
+  proctoredExamSettingsUrl: PropTypes.string,
+};
+
+export default injectIntl(GradingSidebar);
diff --git a/src/grading-settings/grading-sidebar/messages.js b/src/grading-settings/grading-sidebar/messages.js
new file mode 100644
index 0000000000..5200b724ae
--- /dev/null
+++ b/src/grading-settings/grading-sidebar/messages.js
@@ -0,0 +1,22 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  gradingSidebarTitle: {
+    id: 'course-authoring.grading-settings.sidebar.about.title',
+    defaultMessage: 'What can I do on this page?',
+  },
+  gradingSidebarAbout1: {
+    id: 'course-authoring.grading-settings.sidebar.about.text-1',
+    defaultMessage: 'You can use the slider under Overall Grade Range to specify whether your course is pass/fail or graded by letter, and to establish the thresholds for each grade.',
+  },
+  gradingSidebarAbout2: {
+    id: 'course-authoring.grading-settings.sidebar.about.text-2',
+    defaultMessage: 'You can specify whether your course offers students a grace period for late assignments.',
+  },
+  gradingSidebarAbout3: {
+    id: 'course-authoring.grading-settings.sidebar.about.text-3',
+    defaultMessage: 'You can also create assignment types, such as homework, labs, quizzes, and exams, and specify how much of a student\'s grade each assignment type is worth.',
+  },
+});
+
+export default messages;
diff --git a/src/grading-settings/hooks.js b/src/grading-settings/hooks.js
new file mode 100644
index 0000000000..ae01d63060
--- /dev/null
+++ b/src/grading-settings/hooks.js
@@ -0,0 +1,86 @@
+import { useEffect, useRef, useState } from 'react';
+import { v4 as uuidv4 } from 'uuid';
+
+import { getGradingValues, getSortedGrades } from './grading-scale/utils';
+
+const useConvertGradeCutoffs = (
+  gradeCutoffs,
+) => {
+  const gradeLetters = gradeCutoffs && Object.keys(gradeCutoffs);
+  const gradeValues = gradeCutoffs && getGradingValues(gradeCutoffs);
+  const sortedGrades = gradeCutoffs && getSortedGrades(gradeValues);
+
+  return {
+    gradeLetters,
+    gradeValues,
+    sortedGrades,
+  };
+};
+
+const useUpdateGradingData = (gradingSettingsData, setOverrideInternetConnectionAlert, setShowSuccessAlert) => {
+  const uniqueId = uuidv4();
+  const [gradingData, setGradingData] = useState({});
+  const [showSavePrompt, setShowSavePrompt] = useState(false);
+  const resetDataRef = useRef(false);
+  const {
+    gradeCutoffs = {},
+    gracePeriod = { hours: '', minutes: '' },
+    minimumGradeCredit,
+    graders,
+  } = gradingData;
+
+  useEffect(() => {
+    if (gradingSettingsData !== undefined) {
+      setGradingData(gradingSettingsData);
+    }
+  }, [gradingSettingsData]);
+
+  const handleResetPageData = () => {
+    setShowSavePrompt(!showSavePrompt);
+    setShowSuccessAlert(false);
+    setGradingData(gradingSettingsData);
+    resetDataRef.current = true;
+    setOverrideInternetConnectionAlert(false);
+  };
+
+  const handleAddAssignment = () => {
+    setGradingData(prevState => ({
+      ...prevState,
+      graders: [...prevState.graders, {
+        id: uniqueId,
+        dropCount: 0,
+        minCount: 1,
+        shortLabel: '',
+        type: '',
+        weight: 0,
+      }],
+    }));
+    setShowSuccessAlert(false);
+  };
+
+  const handleRemoveAssignment = (assignmentId) => {
+    setGradingData((prevState) => ({
+      ...prevState,
+      graders: prevState.graders.filter((grade) => grade.id !== assignmentId),
+    }));
+    setShowSuccessAlert(false);
+    setShowSavePrompt(true);
+  };
+
+  return {
+    graders,
+    resetDataRef,
+    setGradingData,
+    gradingData,
+    gradeCutoffs,
+    gracePeriod,
+    minimumGradeCredit,
+    showSavePrompt,
+    setShowSavePrompt,
+    handleResetPageData,
+    handleAddAssignment,
+    handleRemoveAssignment,
+  };
+};
+
+export { useConvertGradeCutoffs, useUpdateGradingData };
diff --git a/src/grading-settings/index.js b/src/grading-settings/index.js
new file mode 100644
index 0000000000..ae40913c7e
--- /dev/null
+++ b/src/grading-settings/index.js
@@ -0,0 +1 @@
+export { default as GradingSettings } from './GradingSettings';
diff --git a/src/grading-settings/messages.js b/src/grading-settings/messages.js
new file mode 100644
index 0000000000..80a55e952a
--- /dev/null
+++ b/src/grading-settings/messages.js
@@ -0,0 +1,90 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  headingTitle: {
+    id: 'course-authoring.grading-settings.heading.title',
+    defaultMessage: 'Grading',
+  },
+  headingSubtitle: {
+    id: 'course-authoring.grading-settings.heading.subtitle',
+    defaultMessage: 'Settings',
+  },
+  policy: {
+    id: 'course-authoring.grading-settings.policies.title',
+    defaultMessage: 'Overall grade range',
+  },
+  policiesDescription: {
+    id: 'course-authoring.grading-settings.policies.description',
+    defaultMessage: 'Your overall grading scale for student final grades',
+  },
+  alertWarning: {
+    id: 'course-authoring.grading-settings.alert.warning',
+    defaultMessage: "You've made some changes",
+  },
+  alertWarningDescriptions: {
+    id: 'course-authoring.grading-settings.alert.warning.descriptions',
+    defaultMessage: 'Your changes will not take effect until you save your progress. Take care with key and value formatting, as validation is not implemented.',
+  },
+  alertSuccess: {
+    id: 'course-authoring.grading-settings.alert.success',
+    defaultMessage: 'Your changes have been saved.',
+  },
+  buttonSaveText: {
+    id: 'course-authoring.grading-settings.alert.button.save',
+    defaultMessage: 'Save changes',
+  },
+  buttonSavingText: {
+    id: 'course-authoring.grading-settings.alert.button.saving',
+    defaultMessage: 'Saving',
+  },
+  buttonCancelText: {
+    id: 'course-authoring.grading-settings.alert.button.cancel',
+    defaultMessage: 'Cancel',
+  },
+  alertWarningAriaLabelledby: {
+    id: 'course-authoring.grading-settings.alert.warning.aria.labelledby',
+    defaultMessage: 'notification-warning-title',
+  },
+  alertWarningAriaDescribedby: {
+    id: 'course-authoring.grading-settings.alert.warning.aria.describedby',
+    defaultMessage: 'notification-warning-description',
+  },
+  alertSuccessAriaLabelledby: {
+    id: 'course-authoring.grading-settings.alert.success.aria.labelledby',
+    defaultMessage: 'alert-confirmation-title',
+  },
+  alertSuccessAriaDescribedby: {
+    id: 'course-authoring.grading-settings.alert.success.aria.describedby',
+    defaultMessage: 'alert-confirmation-description',
+  },
+  creditEligibilitySectionTitle: {
+    id: 'course-authoring.grading-settings.credit-eligibility.title',
+    defaultMessage: 'Credit eligibility',
+  },
+  creditEligibilitySectionDescription: {
+    id: 'course-authoring.grading-settings.credit-eligibility.description',
+    defaultMessage: 'Settings for course credit eligibility',
+  },
+  gradingRulesPoliciesSectionTitle: {
+    id: 'course-authoring.grading-settings.grading-rules-policies.title',
+    defaultMessage: 'Grading rules & policies',
+  },
+  gradingRulesPoliciesSectionDescription: {
+    id: 'course-authoring.grading-settings.grading-rules-policies.description',
+    defaultMessage: 'Deadlines, requirements, and logistics around grading student work',
+  },
+  assignmentTypeSectionTitle: {
+    id: 'course-authoring.grading-settings.assignment-type.title',
+    defaultMessage: 'Assignment types',
+  },
+  assignmentTypeSectionDescription: {
+    id: 'course-authoring.grading-settings.assignment-type.description',
+    defaultMessage: 'Categories and labels for any exercises that are gradable',
+  },
+  addNewAssignmentTypeBtn: {
+    id: 'course-authoring.grading-settings.add-new-assignment-type.btn',
+    defaultMessage: 'New assignment type',
+  },
+});
+
+export default messages;
diff --git a/src/grading-settings/scss/GradingSettings.scss b/src/grading-settings/scss/GradingSettings.scss
new file mode 100644
index 0000000000..0de7790900
--- /dev/null
+++ b/src/grading-settings/scss/GradingSettings.scss
@@ -0,0 +1,19 @@
+@import "variables";
+@import "../assignment-section/AssignmentSection.scss";
+@import "../grading-scale/GradingScale.scss";
+
+.grading {
+  .help-sidebar {
+    margin-top: 8.75rem;
+  }
+
+  .grading-label {
+    font: normal $font-weight-bold .75rem/1.25rem $font-family-base;
+    color: $gray-500;
+  }
+
+  .grading-description {
+    font: normal .75rem/1.5rem $font-family-base;
+    color: $gray-700;
+  }
+}
diff --git a/src/grading-settings/scss/_variables.scss b/src/grading-settings/scss/_variables.scss
new file mode 100644
index 0000000000..31133bee5b
--- /dev/null
+++ b/src/grading-settings/scss/_variables.scss
@@ -0,0 +1,7 @@
+$grading-scale-segment-colors: (
+  0: #87D771,
+  1: #FDE370,
+  2: #F6BF58,
+  3: #FF7E6A,
+  4: #E94949,
+);
diff --git a/src/group-configurations/GroupConfigurations.scss b/src/group-configurations/GroupConfigurations.scss
new file mode 100644
index 0000000000..6faa08f315
--- /dev/null
+++ b/src/group-configurations/GroupConfigurations.scss
@@ -0,0 +1,129 @@
+@import "./empty-placeholder/EmptyPlaceholder";
+
+.configuration-section-name {
+  text-transform: lowercase;
+
+  &::first-letter {
+    text-transform: capitalize;
+  }
+
+  .group-percentage-container {
+    width: 1rem;
+  }
+}
+
+.configuration-card {
+  @include pgn-box-shadow(1, "down");
+
+  background: $white;
+  border-radius: .375rem;
+  padding: map-get($spacers, 4);
+  margin-bottom: map-get($spacers, 4);
+
+  .configuration-card-header {
+    display: flex;
+    align-items: center;
+    place-content: center space-between;
+
+    .configuration-card-header__button {
+      display: flex;
+      align-items: flex-start;
+      padding: 0;
+      height: auto;
+      color: $black;
+
+      &:focus::before {
+        display: none;
+      }
+
+      .pgn__icon {
+        display: inline-block;
+        margin-right: map-get($spacers, 1);
+        margin-bottom: map-get($spacers, 2\.5);
+      }
+
+      .pgn__hstack {
+        align-items: baseline;
+      }
+
+      &:hover {
+        background: transparent;
+      }
+    }
+
+    .configuration-card-header__title {
+      text-align: left;
+
+      h3 {
+        margin-bottom: map-get($spacers, 2);
+      }
+    }
+
+    .configuration-card-header__badge {
+      display: flex;
+      padding: .125rem map-get($spacers, 2);
+      justify-content: center;
+      align-items: center;
+      border-radius: $border-radius;
+      border: .063rem solid $light-300;
+      background: $white;
+
+      &:first-child {
+        margin-left: map-get($spacers, 2\.5);
+      }
+
+      & span:last-child {
+        color: $primary-700;
+      }
+    }
+
+    .configuration-card-header__delete-tooltip {
+      pointer-events: all;
+    }
+  }
+
+  .configuration-card-content {
+    margin: 0 map-get($spacers, 2) 0 map-get($spacers, 4);
+
+    .configuration-card-content__experiment-stack {
+      display: flex;
+      justify-content: space-between;
+      padding: map-get($spacers, 2\.5) 0;
+      margin: 0;
+      color: $primary-500;
+      gap: $spacer;
+
+      &:not(:last-child) {
+        border-bottom: .063rem solid $light-400;
+      }
+    }
+  }
+
+  .pgn__form-control-decorator-group {
+    margin-inline-end: 0;
+  }
+
+  .configuration-form-group {
+    .pgn__form-label {
+      font: normal $font-weight-bold .875rem/1.25rem $font-family-base;
+      color: $gray-700;
+      margin-bottom: .875rem;
+    }
+
+    .pgn__form-control-description,
+    .pgn__form-text {
+      font: normal $font-weight-normal .75rem/1.25rem $font-family-base;
+      color: $gray-500;
+      margin-top: .625rem;
+    }
+
+    .pgn__form-text-invalid {
+      color: $form-feedback-invalid-color;
+    }
+  }
+
+  .experiment-configuration-form-percentage {
+    width: 5rem;
+    text-align: center;
+  }
+}
diff --git a/src/group-configurations/GroupConfigurations.test.jsx b/src/group-configurations/GroupConfigurations.test.jsx
new file mode 100644
index 0000000000..303b557f2c
--- /dev/null
+++ b/src/group-configurations/GroupConfigurations.test.jsx
@@ -0,0 +1,123 @@
+import MockAdapter from 'axios-mock-adapter';
+import { render, waitFor, within } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { AppProvider } from '@edx/frontend-platform/react';
+import { initializeMockApp } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+
+import { RequestStatus } from '../data/constants';
+import initializeStore from '../store';
+import { executeThunk } from '../utils';
+import { getContentStoreApiUrl } from './data/api';
+import { fetchGroupConfigurationsQuery } from './data/thunk';
+import { groupConfigurationResponseMock } from './__mocks__';
+import messages from './messages';
+import experimentMessages from './experiment-configurations-section/messages';
+import contentGroupsMessages from './content-groups-section/messages';
+import GroupConfigurations from '.';
+
+let axiosMock;
+let store;
+const courseId = 'course-v1:org+101+101';
+const enrollmentTrackGroups = groupConfigurationResponseMock.allGroupConfigurations[0];
+const contentGroups = groupConfigurationResponseMock.allGroupConfigurations[1];
+
+const renderComponent = () => render(
+  <AppProvider store={store}>
+    <IntlProvider locale="en">
+      <GroupConfigurations courseId={courseId} />
+    </IntlProvider>
+  </AppProvider>,
+);
+
+describe('<GroupConfigurations />', () => {
+  beforeEach(async () => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+
+    store = initializeStore();
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+    axiosMock
+      .onGet(getContentStoreApiUrl(courseId))
+      .reply(200, groupConfigurationResponseMock);
+    await executeThunk(fetchGroupConfigurationsQuery(courseId), store.dispatch);
+  });
+
+  it('renders component correctly', async () => {
+    const { getByText, getAllByText, getByTestId } = renderComponent();
+
+    await waitFor(() => {
+      const mainContent = getByTestId('group-configurations-main-content-wrapper');
+      const groupConfigurationsElements = getAllByText(messages.headingTitle.defaultMessage);
+      const groupConfigurationsTitle = groupConfigurationsElements[0];
+
+      expect(groupConfigurationsTitle).toBeInTheDocument();
+      expect(
+        getByText(messages.headingSubtitle.defaultMessage),
+      ).toBeInTheDocument();
+      expect(
+        within(mainContent).getByText(contentGroupsMessages.addNewGroup.defaultMessage),
+      ).toBeInTheDocument();
+      expect(
+        within(mainContent).getByText(experimentMessages.addNewGroup.defaultMessage),
+      ).toBeInTheDocument();
+      expect(
+        within(mainContent).getByText(experimentMessages.title.defaultMessage),
+      ).toBeInTheDocument();
+      expect(getByText(contentGroups.name)).toBeInTheDocument();
+      expect(getByText(enrollmentTrackGroups.name)).toBeInTheDocument();
+    });
+  });
+
+  it('does not render an empty section for enrollment track groups if it is empty', () => {
+    const shouldNotShowEnrollmentTrackResponse = {
+      ...groupConfigurationResponseMock,
+      shouldShowEnrollmentTrack: false,
+    };
+    axiosMock
+      .onGet(getContentStoreApiUrl(courseId))
+      .reply(200, shouldNotShowEnrollmentTrackResponse);
+
+    const { queryByTestId } = renderComponent();
+    expect(
+      queryByTestId('group-configurations-empty-placeholder'),
+    ).not.toBeInTheDocument();
+  });
+
+  it('updates loading status if request fails', async () => {
+    axiosMock
+      .onGet(getContentStoreApiUrl(courseId))
+      .reply(404, groupConfigurationResponseMock);
+
+    renderComponent();
+
+    await executeThunk(fetchGroupConfigurationsQuery(courseId), store.dispatch);
+
+    expect(store.getState().groupConfigurations.loadingStatus).toBe(
+      RequestStatus.FAILED,
+    );
+  });
+
+  it('displays an alert and sets status to DENIED when API responds with 403', async () => {
+    axiosMock
+      .onGet(getContentStoreApiUrl(courseId))
+      .reply(403);
+
+    await executeThunk(fetchGroupConfigurationsQuery(courseId), store.dispatch);
+
+    const { getByTestId } = renderComponent();
+
+    await waitFor(() => {
+      expect(getByTestId('connectionErrorAlert')).toBeInTheDocument();
+      expect(store.getState().groupConfigurations.loadingStatus).toBe(
+        RequestStatus.DENIED,
+      );
+    });
+  });
+});
diff --git a/src/group-configurations/__mocks__/contentGroupsMock.js b/src/group-configurations/__mocks__/contentGroupsMock.js
new file mode 100644
index 0000000000..3f2ea7be21
--- /dev/null
+++ b/src/group-configurations/__mocks__/contentGroupsMock.js
@@ -0,0 +1,44 @@
+module.exports = {
+  active: true,
+  description: 'The groups in this configuration can be mapped to cohorts in the Instructor Dashboard.',
+  groups: [
+    {
+      id: 593758473,
+      name: 'My Content Group 1',
+      usage: [],
+      version: 1,
+    },
+    {
+      id: 256741177,
+      name: 'My Content Group 2',
+      usage: [
+        {
+          label: 'Unit / Blank Problem',
+          url: '/container/block-v1:org+101+101+type@vertical+block@3d6d82348e2743b6ac36ac4af354de0e',
+        },
+        {
+          label: 'Unit / Drag and Drop',
+          url: '/container/block-v1:org+101+101+type@vertical+block@3d6d82348w2743b6ac36ac4af354de0e',
+        },
+      ],
+      version: 1,
+    },
+    {
+      id: 646686987,
+      name: 'My Content Group 3',
+      usage: [
+        {
+          label: 'Unit / Drag and Drop',
+          url: '/container/block-v1:org+101+101+type@vertical+block@3d6d82348e2743b6ac36ac4af354de0e',
+        },
+      ],
+      version: 1,
+    },
+  ],
+  id: 1791848226,
+  name: 'Content Groups',
+  parameters: {},
+  readOnly: false,
+  scheme: 'cohort',
+  version: 3,
+};
diff --git a/src/group-configurations/__mocks__/enrollmentTrackGroupsMock.js b/src/group-configurations/__mocks__/enrollmentTrackGroupsMock.js
new file mode 100644
index 0000000000..654ff900f2
--- /dev/null
+++ b/src/group-configurations/__mocks__/enrollmentTrackGroupsMock.js
@@ -0,0 +1,32 @@
+module.exports = {
+  active: true,
+  description: 'Partition for segmenting users by enrollment track',
+  groups: [
+    {
+      id: 6,
+      name: '1111',
+      usage: [],
+      version: 1,
+    },
+    {
+      id: 2,
+      name: 'Enrollment track group',
+      usage: [
+        {
+          label: 'Subsection / Unit',
+          url: '/container/block-v1:org+101+101+type@vertical+block@08772238547242848cef928ba6446a55',
+        },
+      ],
+      version: 1,
+    },
+  ],
+  id: 50,
+  usage: null,
+  name: 'Enrollment Track Groups',
+  parameters: {
+    course_id: 'course-v1:org+101+101',
+  },
+  read_only: true,
+  scheme: 'enrollment_track',
+  version: 3,
+};
diff --git a/src/group-configurations/__mocks__/experimentGroupConfigurationsMock.js b/src/group-configurations/__mocks__/experimentGroupConfigurationsMock.js
new file mode 100644
index 0000000000..ab2356e744
--- /dev/null
+++ b/src/group-configurations/__mocks__/experimentGroupConfigurationsMock.js
@@ -0,0 +1,79 @@
+module.exports = [
+  {
+    active: true,
+    description: 'description',
+    groups: [
+      {
+        id: 276408623,
+        name: 'Group A',
+        usage: null,
+        version: 1,
+      },
+      {
+        id: 805061364,
+        name: 'Group B',
+        usage: null,
+        version: 1,
+      },
+      {
+        id: 1919501026,
+        name: 'Group C1',
+        usage: null,
+        version: 1,
+      },
+    ],
+    id: 875961582,
+    name: 'Experiment Group Configurations 1',
+    parameters: {},
+    scheme: 'random',
+    version: 3,
+    usage: [
+      {
+        label: 'Unit1name / Content Experiment',
+        url: '/container/block-v1:2u+1+1+type@split_test+block@ccfae830ec9b406c835f8ce4520ae395',
+      },
+    ],
+  },
+  {
+    active: true,
+    description: 'description',
+    groups: [
+      {
+        id: 1712898629,
+        name: 'Group M',
+        usage: null,
+        version: 1,
+      },
+      {
+        id: 374655043,
+        name: 'Group N',
+        usage: null,
+        version: 1,
+      },
+      {
+        id: 997016182,
+        name: 'Group O',
+        usage: null,
+        version: 1,
+      },
+      {
+        id: 361314468,
+        name: 'Group P',
+        usage: null,
+        version: 1,
+      },
+      {
+        id: 505101805,
+        name: 'Group Q',
+        usage: null,
+        version: 1,
+      },
+    ],
+    id: 996450752,
+    name: 'Experiment Group Configurations 2',
+    parameters: {},
+    scheme: 'random',
+    version: 3,
+    usage: [],
+  },
+];
diff --git a/src/group-configurations/__mocks__/groupConfigurationResponseMock.js b/src/group-configurations/__mocks__/groupConfigurationResponseMock.js
new file mode 100644
index 0000000000..b7f5540697
--- /dev/null
+++ b/src/group-configurations/__mocks__/groupConfigurationResponseMock.js
@@ -0,0 +1,149 @@
+module.exports = {
+  allGroupConfigurations: [
+    {
+      active: true,
+      description: 'Partition for segmenting users by enrollment track',
+      groups: [
+        {
+          id: 6,
+          name: '1111',
+          usage: [],
+          version: 1,
+        },
+        {
+          id: 2,
+          name: 'Enrollment track group',
+          usage: [
+            {
+              label: 'Subsection / Unit',
+              url: '/container/block-v1:org+101+101+type@vertical+block@08772238547242848cef928ba6446a55',
+            },
+          ],
+          version: 1,
+        },
+      ],
+      id: 50,
+      usage: null,
+      name: 'Enrollment Track Groups',
+      parameters: {
+        course_id: 'course-v1:org+101+101',
+      },
+      read_only: true,
+      scheme: 'enrollment_track',
+      version: 3,
+    },
+    {
+      active: true,
+      description:
+        'The groups in this configuration can be mapped to cohorts in the Instructor Dashboard.',
+      groups: [
+        {
+          id: 593758473,
+          name: 'My Content Group 1',
+          usage: [],
+          version: 1,
+        },
+        {
+          id: 256741177,
+          name: 'My Content Group 2',
+          usage: [],
+          version: 1,
+        },
+        {
+          id: 646686987,
+          name: 'My Content Group 3',
+          usage: [
+            {
+              label: 'Unit / Drag and Drop',
+              url: '/container/block-v1:org+101+101+type@vertical+block@3d6d82348e2743b6ac36ac4af354de0e',
+            },
+          ],
+          version: 1,
+        },
+      ],
+      id: 1791848226,
+      name: 'Content Groups',
+      parameters: {},
+      readOnly: false,
+      scheme: 'cohort',
+      version: 3,
+    },
+  ],
+  experimentGroupConfigurations: [
+    {
+      active: true,
+      description: 'description',
+      groups: [
+        {
+          id: 276408623,
+          name: 'Group A',
+          usage: null,
+          version: 1,
+        },
+        {
+          id: 805061364,
+          name: 'Group B',
+          usage: null,
+          version: 1,
+        },
+        {
+          id: 1919501026,
+          name: 'Group C1',
+          usage: null,
+          version: 1,
+        },
+      ],
+      id: 875961582,
+      name: 'Experiment Group Configurations 5',
+      parameters: {},
+      scheme: 'random',
+      version: 3,
+      usage: [],
+    },
+    {
+      active: true,
+      description: 'description',
+      groups: [
+        {
+          id: 1712898629,
+          name: 'Group M',
+          usage: null,
+          version: 1,
+        },
+        {
+          id: 374655043,
+          name: 'Group N',
+          usage: null,
+          version: 1,
+        },
+        {
+          id: 997016182,
+          name: 'Group O',
+          usage: null,
+          version: 1,
+        },
+        {
+          id: 361314468,
+          name: 'Group P',
+          usage: null,
+          version: 1,
+        },
+        {
+          id: 505101805,
+          name: 'Group Q',
+          usage: null,
+          version: 1,
+        },
+      ],
+      id: 996450752,
+      name: 'Experiment Group Configurations 4',
+      parameters: {},
+      scheme: 'random',
+      version: 3,
+      usage: [],
+    },
+  ],
+  mfeProctoredExamSettingsUrl: '',
+  shouldShowEnrollmentTrack: true,
+  shouldShowExperimentGroups: true,
+};
diff --git a/src/group-configurations/__mocks__/index.js b/src/group-configurations/__mocks__/index.js
new file mode 100644
index 0000000000..bb3f889849
--- /dev/null
+++ b/src/group-configurations/__mocks__/index.js
@@ -0,0 +1,4 @@
+export { default as contentGroupsMock } from './contentGroupsMock';
+export { default as enrollmentTrackGroupsMock } from './enrollmentTrackGroupsMock';
+export { default as experimentGroupConfigurationsMock } from './experimentGroupConfigurationsMock';
+export { default as groupConfigurationResponseMock } from './groupConfigurationResponseMock';
diff --git a/src/group-configurations/common/TitleButton.jsx b/src/group-configurations/common/TitleButton.jsx
new file mode 100644
index 0000000000..87d5d50016
--- /dev/null
+++ b/src/group-configurations/common/TitleButton.jsx
@@ -0,0 +1,100 @@
+import PropTypes from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import {
+  Button, Stack, Badge, Truncate,
+} from '@openedx/paragon';
+import {
+  ArrowDropDown as ArrowDownIcon,
+  ArrowRight as ArrowRightIcon,
+} from '@openedx/paragon/icons';
+
+import { getCombinedBadgeList } from '../utils';
+import messages from './messages';
+
+const TitleButton = ({
+  group, isExpanded, isExperiment, onTitleClick,
+}) => {
+  const { formatMessage } = useIntl();
+  const { id, name, usage } = group;
+
+  return (
+    <Button
+      iconBefore={isExpanded ? ArrowDownIcon : ArrowRightIcon}
+      variant="tertiary"
+      className="configuration-card-header__button"
+      data-testid="configuration-card-header-button"
+      onClick={onTitleClick}
+    >
+      <div className="configuration-card-header__title">
+        <h3>
+          <Truncate lines={1}>{name}</Truncate>
+        </h3>
+        <span className="x-small text-gray-500">
+          {formatMessage(messages.titleId, { id })}
+        </span>
+      </div>
+      {!isExpanded && (
+        <Stack
+          gap={2.5}
+          direction="horizontal"
+          data-testid="configuration-card-header-button-usage"
+        >
+          {getCombinedBadgeList(usage, group, isExperiment, formatMessage).map(
+            (badge) => (
+              <Badge
+                key={badge}
+                className="configuration-card-header__badge"
+                data-testid="configuration-card-header__badge"
+              >
+                <span className="small">{badge}</span>
+              </Badge>
+            ),
+          )}
+        </Stack>
+      )}
+    </Button>
+  );
+};
+
+TitleButton.defaultProps = {
+  isExperiment: false,
+};
+
+TitleButton.propTypes = {
+  group: PropTypes.shape({
+    id: PropTypes.number.isRequired,
+    name: PropTypes.string.isRequired,
+    usage: PropTypes.arrayOf(
+      PropTypes.shape({
+        label: PropTypes.string,
+        url: PropTypes.string,
+      }),
+    ),
+    version: PropTypes.number.isRequired,
+    active: PropTypes.bool,
+    description: PropTypes.string,
+    groups: PropTypes.arrayOf(
+      PropTypes.shape({
+        id: PropTypes.number,
+        name: PropTypes.string,
+        usage: PropTypes.arrayOf(
+          PropTypes.shape({
+            label: PropTypes.string,
+            url: PropTypes.string,
+          }),
+        ),
+        version: PropTypes.number,
+      }),
+    ),
+    parameters: PropTypes.shape({
+      courseId: PropTypes.string,
+    }),
+    readOnly: PropTypes.bool,
+    scheme: PropTypes.string,
+  }).isRequired,
+  isExpanded: PropTypes.bool.isRequired,
+  isExperiment: PropTypes.bool,
+  onTitleClick: PropTypes.func.isRequired,
+};
+
+export default TitleButton;
diff --git a/src/group-configurations/common/UsageList.jsx b/src/group-configurations/common/UsageList.jsx
new file mode 100644
index 0000000000..5c6287a9d6
--- /dev/null
+++ b/src/group-configurations/common/UsageList.jsx
@@ -0,0 +1,73 @@
+import PropTypes from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Hyperlink, Stack, Icon } from '@openedx/paragon';
+import {
+  Warning as WarningIcon,
+  Error as ErrorIcon,
+} from '@openedx/paragon/icons';
+
+import { MESSAGE_VALIDATION_TYPES } from '../constants';
+import { formatUrlToUnitPage } from '../utils';
+import messages from './messages';
+
+const UsageList = ({ className, itemList, isExperiment }) => {
+  const { formatMessage } = useIntl();
+  const usageDescription = isExperiment
+    ? messages.experimentAccessTo
+    : messages.accessTo;
+
+  const renderValidationMessage = ({ text, type }) => (
+    <span className="d-inline-flex align-items-center">
+      <Icon
+        src={MESSAGE_VALIDATION_TYPES.error === type ? ErrorIcon : WarningIcon}
+        size="sm"
+        className="mr-2"
+      />
+      <span className="small text-gray-700">{text}</span>
+    </span>
+  );
+
+  return (
+    <div className={className}>
+      <p className="small text-gray-700 pt-2 pb-1.5 m-0">
+        {formatMessage(usageDescription)}
+      </p>
+      <Stack gap={2}>
+        {itemList.map(({ url, label, validation }) => (
+          <>
+            <Hyperlink
+              className="small text-info-500"
+              destination={formatUrlToUnitPage(url)}
+              key={`${label} - ${url}`}
+            >
+              {label}
+            </Hyperlink>
+            {validation && renderValidationMessage(validation)}
+          </>
+        ))}
+      </Stack>
+    </div>
+  );
+};
+
+UsageList.defaultProps = {
+  className: undefined,
+  isExperiment: false,
+};
+
+UsageList.propTypes = {
+  className: PropTypes.string,
+  itemList: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.string,
+      url: PropTypes.string,
+      validation: PropTypes.shape({
+        text: PropTypes.string,
+        type: PropTypes.string,
+      }),
+    }).isRequired,
+  ).isRequired,
+  isExperiment: PropTypes.bool,
+};
+
+export default UsageList;
diff --git a/src/group-configurations/common/UsageList.test.jsx b/src/group-configurations/common/UsageList.test.jsx
new file mode 100644
index 0000000000..e4d4681279
--- /dev/null
+++ b/src/group-configurations/common/UsageList.test.jsx
@@ -0,0 +1,34 @@
+import { render } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import { contentGroupsMock } from '../__mocks__';
+import { formatUrlToUnitPage } from '../utils';
+import UsageList from './UsageList';
+import messages from './messages';
+
+const usages = contentGroupsMock.groups[1]?.usage;
+
+const renderComponent = (props = {}) => render(
+  <IntlProvider locale="en">
+    <UsageList itemList={usages} {...props} />
+  </IntlProvider>,
+);
+
+describe('<UsageList />', () => {
+  it('renders component correctly', () => {
+    const { getByText, getAllByRole } = renderComponent();
+    expect(getByText(messages.accessTo.defaultMessage)).toBeInTheDocument();
+    expect(getAllByRole('link')).toHaveLength(2);
+    getAllByRole('link').forEach((el, idx) => {
+      expect(el.href).toMatch(formatUrlToUnitPage(usages[idx].url));
+      expect(getByText(usages[idx].label)).toBeVisible();
+    });
+  });
+
+  it('renders experiment component correctly', () => {
+    const { getByText } = renderComponent({ isExperiment: true });
+    expect(
+      getByText(messages.experimentAccessTo.defaultMessage),
+    ).toBeInTheDocument();
+  });
+});
diff --git a/src/group-configurations/common/index.js b/src/group-configurations/common/index.js
new file mode 100644
index 0000000000..0089b3865f
--- /dev/null
+++ b/src/group-configurations/common/index.js
@@ -0,0 +1,2 @@
+export { default as TitleButton } from './TitleButton';
+export { default as UsageList } from './UsageList';
diff --git a/src/group-configurations/common/messages.js b/src/group-configurations/common/messages.js
new file mode 100644
index 0000000000..708b376b08
--- /dev/null
+++ b/src/group-configurations/common/messages.js
@@ -0,0 +1,21 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  titleId: {
+    id: 'course-authoring.group-configurations.container.title-id',
+    defaultMessage: 'ID: {id}',
+    description: 'Message for the title of a container within group configurations section',
+  },
+  accessTo: {
+    id: 'course-authoring.group-configurations.container.access-to',
+    defaultMessage: 'This group controls access to:',
+    description: 'Indicates that the units are contained in content group',
+  },
+  experimentAccessTo: {
+    id: 'course-authoring.group-configurations.experiment-card.experiment-access-to',
+    defaultMessage: 'This group configuration is used in:',
+    description: 'Indicates that the units are contained in experiment configurations',
+  },
+});
+
+export default messages;
diff --git a/src/group-configurations/constants.js b/src/group-configurations/constants.js
new file mode 100644
index 0000000000..7e87fc8628
--- /dev/null
+++ b/src/group-configurations/constants.js
@@ -0,0 +1,34 @@
+import PropTypes from 'prop-types';
+
+const availableGroupPropTypes = {
+  active: PropTypes.bool,
+  description: PropTypes.string,
+  groups: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.number,
+      name: PropTypes.string,
+      usage: PropTypes.arrayOf(
+        PropTypes.shape({
+          label: PropTypes.string,
+          url: PropTypes.string,
+        }),
+      ),
+      version: PropTypes.number,
+    }),
+  ),
+  id: PropTypes.number,
+  name: PropTypes.string,
+  parameters: PropTypes.shape({
+    courseId: PropTypes.string,
+  }),
+  readOnly: PropTypes.bool,
+  scheme: PropTypes.string,
+  version: PropTypes.number,
+};
+
+const MESSAGE_VALIDATION_TYPES = {
+  error: 'error',
+  warning: 'warning',
+};
+
+export { MESSAGE_VALIDATION_TYPES, availableGroupPropTypes };
diff --git a/src/group-configurations/content-groups-section/ContentGroupCard.jsx b/src/group-configurations/content-groups-section/ContentGroupCard.jsx
new file mode 100644
index 0000000000..e56d4d4c4c
--- /dev/null
+++ b/src/group-configurations/content-groups-section/ContentGroupCard.jsx
@@ -0,0 +1,200 @@
+import { useState } from 'react';
+import PropTypes from 'prop-types';
+import { useParams } from 'react-router-dom';
+import { getConfig } from '@edx/frontend-platform';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import {
+  ActionRow,
+  Hyperlink,
+  Icon,
+  IconButtonWithTooltip,
+  useToggle,
+} from '@openedx/paragon';
+import {
+  DeleteOutline as DeleteOutlineIcon,
+  EditOutline as EditOutlineIcon,
+} from '@openedx/paragon/icons';
+
+import DeleteModal from '../../generic/delete-modal/DeleteModal';
+import TitleButton from '../common/TitleButton';
+import UsageList from '../common/UsageList';
+import ContentGroupForm from './ContentGroupForm';
+import messages from './messages';
+
+const ContentGroupCard = ({
+  group,
+  groupNames,
+  parentGroupId,
+  readOnly,
+  contentGroupActions,
+  handleEditGroup,
+}) => {
+  const { formatMessage } = useIntl();
+  const { courseId } = useParams();
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [isEditMode, switchOnEditMode, switchOffEditMode] = useToggle(false);
+  const [isOpenDeleteModal, openDeleteModal, closeDeleteModal] = useToggle(false);
+  const { id, name, usage } = group;
+  const isUsedInLocation = !!usage.length;
+
+  const { href: outlineUrl } = new URL(
+    `/course/${courseId}`,
+    getConfig().STUDIO_BASE_URL,
+  );
+
+  const outlineComponentLink = (
+    <Hyperlink destination={outlineUrl}>
+      {formatMessage(messages.courseOutline)}
+    </Hyperlink>
+  );
+
+  const guideHowToAdd = (
+    <span
+      className="small text-gray-700"
+      data-testid="configuration-card-usage-empty"
+    >
+      {formatMessage(messages.emptyContentGroups, { outlineComponentLink })}
+    </span>
+  );
+
+  const handleExpandContent = () => {
+    setIsExpanded((prevState) => !prevState);
+  };
+
+  const handleDeleteGroup = () => {
+    contentGroupActions.handleDelete(parentGroupId, id);
+    closeDeleteModal();
+  };
+
+  return (
+    <>
+      {isEditMode ? (
+        <ContentGroupForm
+          isEditMode={isEditMode}
+          groupNames={groupNames}
+          isUsedInLocation={isUsedInLocation}
+          overrideValue={name}
+          onCancelClick={switchOffEditMode}
+          onEditClick={(values) => handleEditGroup(id, values, switchOffEditMode)}
+        />
+      ) : (
+        <div className="configuration-card" data-testid="content-group-card">
+          <div className="configuration-card-header">
+            <TitleButton
+              group={group}
+              isExpanded={isExpanded}
+              onTitleClick={handleExpandContent}
+            />
+            {!readOnly && (
+              <ActionRow className="ml-auto d-flex">
+                <IconButtonWithTooltip
+                  tooltipContent={formatMessage(messages.actionEdit)}
+                  alt={formatMessage(messages.actionEdit)}
+                  src={EditOutlineIcon}
+                  iconAs={Icon}
+                  onClick={switchOnEditMode}
+                  data-testid="content-group-card-header-edit"
+                />
+                <IconButtonWithTooltip
+                  className="configuration-card-header__delete-tooltip"
+                  tooltipContent={formatMessage(
+                    isUsedInLocation
+                      ? messages.deleteRestriction
+                      : messages.actionDelete,
+                  )}
+                  alt={formatMessage(messages.actionDelete)}
+                  src={DeleteOutlineIcon}
+                  iconAs={Icon}
+                  onClick={openDeleteModal}
+                  data-testid="content-group-card-header-delete"
+                  disabled={isUsedInLocation}
+                />
+              </ActionRow>
+            )}
+          </div>
+          {isExpanded && (
+            <div
+              className="configuration-card-content"
+              data-testid="content-group-card-content"
+            >
+              {usage?.length ? (
+                <UsageList
+                  className="mt-2.5"
+                  itemList={usage}
+                  key={usage.label}
+                />
+              ) : (
+                guideHowToAdd
+              )}
+            </div>
+          )}
+        </div>
+      )}
+      <DeleteModal
+        category={formatMessage(messages.subtitleModalDelete)}
+        isOpen={isOpenDeleteModal}
+        close={closeDeleteModal}
+        onDeleteSubmit={handleDeleteGroup}
+      />
+    </>
+  );
+};
+
+ContentGroupCard.defaultProps = {
+  group: {
+    id: undefined,
+    name: '',
+    usage: [],
+    version: undefined,
+  },
+  readOnly: false,
+  groupNames: [],
+  parentGroupId: null,
+  handleEditGroup: null,
+  contentGroupActions: {},
+};
+
+ContentGroupCard.propTypes = {
+  group: PropTypes.shape({
+    id: PropTypes.number.isRequired,
+    name: PropTypes.string.isRequired,
+    usage: PropTypes.arrayOf(
+      PropTypes.shape({
+        label: PropTypes.string,
+        url: PropTypes.string,
+      }),
+    ),
+    version: PropTypes.number.isRequired,
+    active: PropTypes.bool,
+    description: PropTypes.string,
+    groups: PropTypes.arrayOf(
+      PropTypes.shape({
+        id: PropTypes.number,
+        name: PropTypes.string,
+        usage: PropTypes.arrayOf(
+          PropTypes.shape({
+            label: PropTypes.string,
+            url: PropTypes.string,
+          }),
+        ),
+        version: PropTypes.number,
+      }),
+    ),
+    parameters: PropTypes.shape({
+      courseId: PropTypes.string,
+    }),
+    readOnly: PropTypes.bool,
+    scheme: PropTypes.string,
+  }),
+  groupNames: PropTypes.arrayOf(PropTypes.string),
+  parentGroupId: PropTypes.number,
+  readOnly: PropTypes.bool,
+  handleEditGroup: PropTypes.func,
+  contentGroupActions: PropTypes.shape({
+    handleCreate: PropTypes.func,
+    handleDelete: PropTypes.func,
+    handleEdit: PropTypes.func,
+  }),
+};
+
+export default ContentGroupCard;
diff --git a/src/group-configurations/content-groups-section/ContentGroupCard.test.jsx b/src/group-configurations/content-groups-section/ContentGroupCard.test.jsx
new file mode 100644
index 0000000000..10d259f0e3
--- /dev/null
+++ b/src/group-configurations/content-groups-section/ContentGroupCard.test.jsx
@@ -0,0 +1,93 @@
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import { contentGroupsMock } from '../__mocks__';
+import commonMessages from '../common/messages';
+import rootMessages from '../messages';
+import ContentGroupCard from './ContentGroupCard';
+
+const handleCreateMock = jest.fn();
+const handleDeleteMock = jest.fn();
+const handleEditMock = jest.fn();
+const contentGroupActions = {
+  handleCreate: handleCreateMock,
+  handleDelete: handleDeleteMock,
+  handleEdit: handleEditMock,
+};
+
+const handleEditGroupMock = jest.fn();
+const contentGroup = contentGroupsMock.groups[0];
+const contentGroupWithUsages = contentGroupsMock.groups[1];
+const contentGroupWithOnlyOneUsage = contentGroupsMock.groups[2];
+
+const renderComponent = (props = {}) => render(
+  <IntlProvider locale="en">
+    <ContentGroupCard
+      group={contentGroup}
+      groupNames={contentGroupsMock.groups?.map((group) => group.name)}
+      parentGroupId={contentGroupsMock.id}
+      contentGroupActions={contentGroupActions}
+      handleEditGroup={handleEditGroupMock}
+      {...props}
+    />
+  </IntlProvider>,
+);
+
+describe('<ContentGroupCard />', () => {
+  it('renders component correctly', () => {
+    const { getByText, getByTestId } = renderComponent();
+    expect(getByText(contentGroup.name)).toBeInTheDocument();
+    expect(
+      getByText(
+        commonMessages.titleId.defaultMessage.replace('{id}', contentGroup.id),
+      ),
+    ).toBeInTheDocument();
+    expect(getByText(rootMessages.notInUse.defaultMessage)).toBeInTheDocument();
+    expect(getByTestId('content-group-card-header-edit')).toBeInTheDocument();
+    expect(getByTestId('content-group-card-header-delete')).toBeInTheDocument();
+  });
+
+  it('expands/collapses the container group content on title click', () => {
+    const {
+      getByText, queryByTestId, getByTestId, queryByText,
+    } = renderComponent();
+    const cardTitle = getByTestId('configuration-card-header-button');
+    userEvent.click(cardTitle);
+    expect(queryByTestId('content-group-card-content')).toBeInTheDocument();
+    expect(
+      queryByText(rootMessages.notInUse.defaultMessage),
+    ).not.toBeInTheDocument();
+
+    userEvent.click(cardTitle);
+    expect(queryByTestId('content-group-card-content')).not.toBeInTheDocument();
+    expect(getByText(rootMessages.notInUse.defaultMessage)).toBeInTheDocument();
+  });
+
+  it('renders content group badge with used only one location', () => {
+    const { queryByTestId } = renderComponent({
+      group: contentGroupWithOnlyOneUsage,
+    });
+    const usageBlock = queryByTestId('configuration-card-header-button-usage');
+    expect(usageBlock).toBeInTheDocument();
+  });
+
+  it('renders content group badge with used locations', () => {
+    const { queryByTestId } = renderComponent({
+      group: contentGroupWithUsages,
+    });
+    const usageBlock = queryByTestId('configuration-card-header-button-usage');
+    expect(usageBlock).toBeInTheDocument();
+  });
+
+  it('renders group controls without access to units', () => {
+    const { queryByText, getByTestId } = renderComponent();
+    expect(
+      queryByText(commonMessages.accessTo.defaultMessage),
+    ).not.toBeInTheDocument();
+
+    const cardTitle = getByTestId('configuration-card-header-button');
+    userEvent.click(cardTitle);
+    expect(getByTestId('configuration-card-usage-empty')).toBeInTheDocument();
+  });
+});
diff --git a/src/group-configurations/content-groups-section/ContentGroupForm.jsx b/src/group-configurations/content-groups-section/ContentGroupForm.jsx
new file mode 100644
index 0000000000..b4f7a76ba2
--- /dev/null
+++ b/src/group-configurations/content-groups-section/ContentGroupForm.jsx
@@ -0,0 +1,123 @@
+import PropTypes from 'prop-types';
+import { Formik } from 'formik';
+import * as Yup from 'yup';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import {
+  Alert,
+  ActionRow,
+  Button,
+  Form,
+} from '@openedx/paragon';
+
+import { WarningFilled as WarningFilledIcon } from '@openedx/paragon/icons';
+
+import PromptIfDirty from '../../generic/prompt-if-dirty/PromptIfDirty';
+import { isAlreadyExistsGroup } from './utils';
+import messages from './messages';
+
+const ContentGroupForm = ({
+  isEditMode,
+  groupNames,
+  isUsedInLocation,
+  overrideValue,
+  onCreateClick,
+  onCancelClick,
+  onEditClick,
+}) => {
+  const { formatMessage } = useIntl();
+  const initialValues = { newGroupName: overrideValue };
+  const validationSchema = Yup.object().shape({
+    newGroupName: Yup.string()
+      .required(formatMessage(messages.requiredError))
+      .trim()
+      .test(
+        'unique-name-restriction',
+        formatMessage(messages.invalidMessage),
+        (value) => overrideValue === value || !isAlreadyExistsGroup(groupNames, value),
+      ),
+  });
+  const onSubmitForm = isEditMode ? onEditClick : onCreateClick;
+
+  return (
+    <div className="configuration-card" data-testid="content-group-form">
+      <div className="configuration-card-header">
+        <h3>{formatMessage(messages.newGroupHeader)}</h3>
+      </div>
+      <Formik
+        initialValues={initialValues}
+        validationSchema={validationSchema}
+        validateOnChange={false}
+        validateOnBlur={false}
+        onSubmit={onSubmitForm}
+      >
+        {({
+          values, errors, dirty, handleChange, handleSubmit,
+        }) => {
+          const isInvalid = !!errors.newGroupName;
+
+          return (
+            <>
+              <Form.Group
+                className="mt-3 mb-4 configuration-form-group"
+                isInvalid={isInvalid}
+              >
+                <Form.Control
+                  value={values.newGroupName}
+                  name="newGroupName"
+                  onChange={handleChange}
+                  placeholder={formatMessage(messages.newGroupInputPlaceholder)}
+                />
+                {isInvalid && (
+                  <Form.Control.Feedback type="invalid" hasIcon={false}>
+                    {errors.newGroupName}
+                  </Form.Control.Feedback>
+                )}
+              </Form.Group>
+              {isUsedInLocation && (
+                <Alert
+                  variant="warning"
+                  icon={WarningFilledIcon}
+                  className="my-3"
+                >
+                  <p>{formatMessage(messages.alertGroupInUsage)}</p>
+                </Alert>
+              )}
+              <ActionRow>
+                <Button onClick={onCancelClick} variant="tertiary">
+                  {formatMessage(messages.cancelButton)}
+                </Button>
+                <Button onClick={handleSubmit}>
+                  {formatMessage(
+                    isEditMode ? messages.saveButton : messages.createButton,
+                  )}
+                </Button>
+              </ActionRow>
+              <PromptIfDirty dirty={dirty} />
+            </>
+          );
+        }}
+      </Formik>
+    </div>
+  );
+};
+
+ContentGroupForm.defaultProps = {
+  groupNames: [],
+  overrideValue: '',
+  isEditMode: false,
+  isUsedInLocation: false,
+  onCreateClick: null,
+  onEditClick: null,
+};
+
+ContentGroupForm.propTypes = {
+  groupNames: PropTypes.arrayOf(PropTypes.string),
+  isEditMode: PropTypes.bool,
+  isUsedInLocation: PropTypes.bool,
+  overrideValue: PropTypes.string,
+  onCreateClick: PropTypes.func,
+  onCancelClick: PropTypes.func.isRequired,
+  onEditClick: PropTypes.func,
+};
+
+export default ContentGroupForm;
diff --git a/src/group-configurations/content-groups-section/ContentGroupForm.test.jsx b/src/group-configurations/content-groups-section/ContentGroupForm.test.jsx
new file mode 100644
index 0000000000..22826daf63
--- /dev/null
+++ b/src/group-configurations/content-groups-section/ContentGroupForm.test.jsx
@@ -0,0 +1,176 @@
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import userEvent from '@testing-library/user-event';
+import { render, waitFor } from '@testing-library/react';
+
+import { contentGroupsMock } from '../__mocks__';
+import messages from './messages';
+import ContentGroupForm from './ContentGroupForm';
+
+const onCreateClickMock = jest.fn();
+const onCancelClickMock = jest.fn();
+const onEditClickMock = jest.fn();
+
+const renderComponent = (props = {}) => render(
+  <IntlProvider locale="en">
+    <ContentGroupForm
+      groupNames={contentGroupsMock.groups?.map((group) => group.name)}
+      onCreateClick={onCreateClickMock}
+      onCancelClick={onCancelClickMock}
+      onEditClick={onEditClickMock}
+      {...props}
+    />
+  </IntlProvider>,
+);
+
+describe('<ContentGroupForm />', () => {
+  it('renders component correctly', () => {
+    const { getByText, getByRole, getByTestId } = renderComponent();
+
+    expect(getByTestId('content-group-form')).toBeInTheDocument();
+    expect(
+      getByText(messages.newGroupHeader.defaultMessage),
+    ).toBeInTheDocument();
+    expect(
+      getByRole('button', { name: messages.cancelButton.defaultMessage }),
+    ).toBeInTheDocument();
+    expect(
+      getByRole('button', { name: messages.createButton.defaultMessage }),
+    ).toBeInTheDocument();
+  });
+
+  it('renders component in edit mode', () => {
+    const {
+      getByText, queryByText, getByRole, getByPlaceholderText,
+    } = renderComponent({
+      isEditMode: true,
+      overrideValue: 'overrideValue',
+    });
+    const newGroupInput = getByPlaceholderText(
+      messages.newGroupInputPlaceholder.defaultMessage,
+    );
+
+    expect(newGroupInput).toBeInTheDocument();
+    expect(
+      getByText(messages.newGroupHeader.defaultMessage),
+    ).toBeInTheDocument();
+    expect(
+      getByRole('button', { name: messages.saveButton.defaultMessage }),
+    ).toBeInTheDocument();
+    expect(
+      queryByText(messages.alertGroupInUsage.defaultMessage),
+    ).not.toBeInTheDocument();
+  });
+
+  it('shows alert if group is used in location with edit mode', () => {
+    const { getByText } = renderComponent({
+      isEditMode: true,
+      overrideValue: 'overrideValue',
+      isUsedInLocation: true,
+    });
+    expect(
+      getByText(messages.alertGroupInUsage.defaultMessage),
+    ).toBeInTheDocument();
+  });
+
+  it('calls onCreate when the "Create" button is clicked with a valid form', async () => {
+    const {
+      getByRole, getByPlaceholderText, queryByText,
+    } = renderComponent();
+    const newGroupNameText = 'New group name';
+    const newGroupInput = getByPlaceholderText(
+      messages.newGroupInputPlaceholder.defaultMessage,
+    );
+    userEvent.type(newGroupInput, newGroupNameText);
+    const createButton = getByRole('button', {
+      name: messages.createButton.defaultMessage,
+    });
+    expect(createButton).toBeInTheDocument();
+    userEvent.click(createButton);
+
+    await waitFor(() => {
+      expect(onCreateClickMock).toHaveBeenCalledTimes(1);
+    });
+    expect(
+      queryByText(messages.requiredError.defaultMessage),
+    ).not.toBeInTheDocument();
+  });
+
+  it('shows error when the "Create" button is clicked with an invalid form', async () => {
+    const { getByRole, getByPlaceholderText, getByText } = renderComponent();
+    const newGroupNameText = '';
+    const newGroupInput = getByPlaceholderText(
+      messages.newGroupInputPlaceholder.defaultMessage,
+    );
+    userEvent.type(newGroupInput, newGroupNameText);
+    const createButton = getByRole('button', {
+      name: messages.createButton.defaultMessage,
+    });
+    expect(createButton).toBeInTheDocument();
+    userEvent.click(createButton);
+
+    await waitFor(() => {
+      expect(
+        getByText(messages.requiredError.defaultMessage),
+      ).toBeInTheDocument();
+    });
+  });
+
+  it('calls onEdit when the "Save" button is clicked with a valid form', async () => {
+    const { getByRole, getByPlaceholderText, queryByText } = renderComponent({
+      isEditMode: true,
+      overrideValue: 'overrideValue',
+    });
+    const newGroupNameText = 'Updated group name';
+    const newGroupInput = getByPlaceholderText(
+      messages.newGroupInputPlaceholder.defaultMessage,
+    );
+    userEvent.type(newGroupInput, newGroupNameText);
+    const saveButton = getByRole('button', {
+      name: messages.saveButton.defaultMessage,
+    });
+    expect(saveButton).toBeInTheDocument();
+    userEvent.click(saveButton);
+
+    await waitFor(() => {
+      expect(
+        queryByText(messages.requiredError.defaultMessage),
+      ).not.toBeInTheDocument();
+    });
+    expect(onEditClickMock).toHaveBeenCalledTimes(1);
+  });
+
+  it('shows error when the "Save" button is clicked with an invalid duplicate form', async () => {
+    const { getByRole, getByPlaceholderText, getByText } = renderComponent({
+      isEditMode: true,
+      overrideValue: contentGroupsMock.groups[0].name,
+    });
+    const newGroupNameText = contentGroupsMock.groups[2].name;
+    const newGroupInput = getByPlaceholderText(
+      messages.newGroupInputPlaceholder.defaultMessage,
+    );
+    userEvent.clear(newGroupInput);
+    userEvent.type(newGroupInput, newGroupNameText);
+    const saveButton = getByRole('button', {
+      name: messages.saveButton.defaultMessage,
+    });
+    expect(saveButton).toBeInTheDocument();
+    userEvent.click(saveButton);
+
+    await waitFor(() => {
+      expect(
+        getByText(messages.invalidMessage.defaultMessage),
+      ).toBeInTheDocument();
+    });
+  });
+
+  it('calls onCancel when the "Cancel" button is clicked', async () => {
+    const { getByRole } = renderComponent();
+    const cancelButton = getByRole('button', {
+      name: messages.cancelButton.defaultMessage,
+    });
+    expect(cancelButton).toBeInTheDocument();
+    userEvent.click(cancelButton);
+
+    expect(onCancelClickMock).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/src/group-configurations/content-groups-section/ContentGroupsSection.test.jsx b/src/group-configurations/content-groups-section/ContentGroupsSection.test.jsx
new file mode 100644
index 0000000000..bbd9ca280f
--- /dev/null
+++ b/src/group-configurations/content-groups-section/ContentGroupsSection.test.jsx
@@ -0,0 +1,64 @@
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import userEvent from '@testing-library/user-event';
+import { render } from '@testing-library/react';
+
+import { contentGroupsMock } from '../__mocks__';
+import placeholderMessages from '../empty-placeholder/messages';
+import messages from './messages';
+import ContentGroupsSection from '.';
+
+const handleCreateMock = jest.fn();
+const handleDeleteMock = jest.fn();
+const handleEditMock = jest.fn();
+const contentGroupActions = {
+  handleCreate: handleCreateMock,
+  handleDelete: handleDeleteMock,
+  handleEdit: handleEditMock,
+};
+
+const renderComponent = (props = {}) => render(
+  <IntlProvider locale="en">
+    <ContentGroupsSection
+      availableGroup={contentGroupsMock}
+      contentGroupActions={contentGroupActions}
+      {...props}
+    />
+  </IntlProvider>,
+);
+
+describe('<ContentGroupsSection />', () => {
+  it('renders component correctly', () => {
+    const { getByText, getByRole, getAllByTestId } = renderComponent();
+    expect(getByText(contentGroupsMock.name)).toBeInTheDocument();
+    expect(
+      getByRole('button', { name: messages.addNewGroup.defaultMessage }),
+    ).toBeInTheDocument();
+
+    expect(getAllByTestId('content-group-card')).toHaveLength(
+      contentGroupsMock.groups.length,
+    );
+  });
+
+  it('renders empty section', () => {
+    const { getByTestId } = renderComponent({ availableGroup: {} });
+    expect(
+      getByTestId('group-configurations-empty-placeholder'),
+    ).toBeInTheDocument();
+  });
+
+  it('renders container with new group on create click if section is empty', async () => {
+    const { getByRole, getByTestId } = renderComponent({ availableGroup: {} });
+    userEvent.click(
+      getByRole('button', { name: placeholderMessages.button.defaultMessage }),
+    );
+    expect(getByTestId('content-group-form')).toBeInTheDocument();
+  });
+
+  it('renders container with new group on create click if section has groups', async () => {
+    const { getByRole, getByTestId } = renderComponent();
+    userEvent.click(
+      getByRole('button', { name: messages.addNewGroup.defaultMessage }),
+    );
+    expect(getByTestId('content-group-form')).toBeInTheDocument();
+  });
+});
diff --git a/src/group-configurations/content-groups-section/index.jsx b/src/group-configurations/content-groups-section/index.jsx
new file mode 100644
index 0000000000..de21e323f1
--- /dev/null
+++ b/src/group-configurations/content-groups-section/index.jsx
@@ -0,0 +1,95 @@
+import PropTypes from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Button, useToggle } from '@openedx/paragon';
+import { Add as AddIcon } from '@openedx/paragon/icons';
+
+import { availableGroupPropTypes } from '../constants';
+import EmptyPlaceholder from '../empty-placeholder';
+import ContentGroupCard from './ContentGroupCard';
+import ContentGroupForm from './ContentGroupForm';
+import { initialContentGroupObject } from './utils';
+import messages from './messages';
+
+const ContentGroupsSection = ({
+  availableGroup,
+  contentGroupActions,
+}) => {
+  const { formatMessage } = useIntl();
+  const [isNewGroupVisible, openNewGroup, hideNewGroup] = useToggle(false);
+  const { id: parentGroupId, groups, name } = availableGroup;
+  const groupNames = groups?.map((group) => group.name);
+
+  const handleCreateNewGroup = (values) => {
+    const updatedContentGroups = {
+      ...availableGroup,
+      groups: [
+        ...availableGroup.groups,
+        initialContentGroupObject(values.newGroupName),
+      ],
+    };
+    contentGroupActions.handleCreate(updatedContentGroups, hideNewGroup);
+  };
+
+  const handleEditContentGroup = (id, { newGroupName }, callbackToClose) => {
+    const updatedContentGroups = {
+      ...availableGroup,
+      groups: availableGroup.groups.map((group) => (group.id === id ? { ...group, name: newGroupName } : group)),
+    };
+    contentGroupActions.handleEdit(updatedContentGroups, callbackToClose);
+  };
+
+  return (
+    <div className="mt-2.5">
+      <h2 className="lead text-black mb-3 configuration-section-name">
+        {name}
+      </h2>
+      {groups?.length ? (
+        <>
+          {groups.map((group) => (
+            <ContentGroupCard
+              group={group}
+              groupNames={groupNames}
+              parentGroupId={parentGroupId}
+              key={group.id}
+              contentGroupActions={contentGroupActions}
+              handleEditGroup={handleEditContentGroup}
+            />
+          ))}
+          {!isNewGroupVisible && (
+            <Button
+              className="mt-4"
+              variant="outline-primary"
+              onClick={openNewGroup}
+              iconBefore={AddIcon}
+              block
+            >
+              {formatMessage(messages.addNewGroup)}
+            </Button>
+          )}
+        </>
+      ) : (
+        !isNewGroupVisible && (
+          <EmptyPlaceholder onCreateNewGroup={openNewGroup} />
+        )
+      )}
+      {isNewGroupVisible && (
+        <ContentGroupForm
+          groupNames={groupNames}
+          onCreateClick={handleCreateNewGroup}
+          onCancelClick={hideNewGroup}
+        />
+      )}
+    </div>
+  );
+};
+
+ContentGroupsSection.propTypes = {
+  availableGroup: PropTypes.shape(availableGroupPropTypes).isRequired,
+  contentGroupActions: PropTypes.shape({
+    handleCreate: PropTypes.func,
+    handleDelete: PropTypes.func,
+    handleEdit: PropTypes.func,
+  }).isRequired,
+};
+
+export default ContentGroupsSection;
diff --git a/src/group-configurations/content-groups-section/messages.js b/src/group-configurations/content-groups-section/messages.js
new file mode 100644
index 0000000000..834b847900
--- /dev/null
+++ b/src/group-configurations/content-groups-section/messages.js
@@ -0,0 +1,86 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  addNewGroup: {
+    id: 'course-authoring.group-configurations.content-groups.add-new-group',
+    defaultMessage: 'New content group',
+    description: 'Label for adding a new content group.',
+  },
+  newGroupHeader: {
+    id: 'course-authoring.group-configurations.content-groups.new-group.header',
+    defaultMessage: 'Content group name *',
+    description: 'Header text for the input field to enter the name of a new content group.',
+  },
+  newGroupInputPlaceholder: {
+    id: 'course-authoring.group-configurations.content-groups.new-group.input.placeholder',
+    defaultMessage: 'This is the name of the group',
+    description: 'Placeholder text for the input field where the name of a new content group is entered.',
+  },
+  invalidMessage: {
+    id: 'course-authoring.group-configurations.content-groups.new-group.invalid-message',
+    defaultMessage: 'All groups must have a unique name.',
+    description: 'Error message displayed when the name of the new content group is not unique.',
+  },
+  cancelButton: {
+    id: 'course-authoring.group-configurations.content-groups.new-group.cancel',
+    defaultMessage: 'Cancel',
+    description: 'Label for the cancel button when creating a new content group.',
+  },
+  deleteButton: {
+    id: 'course-authoring.group-configurations.content-groups.edit-group.delete',
+    defaultMessage: 'Delete',
+    description: 'Label for the delete button when editing a content group.',
+  },
+  createButton: {
+    id: 'course-authoring.group-configurations.content-groups.new-group.create',
+    defaultMessage: 'Create',
+    description: 'Label for the create button when creating a new content group.',
+  },
+  saveButton: {
+    id: 'course-authoring.group-configurations.content-groups.edit-group.save',
+    defaultMessage: 'Save',
+    description: 'Label for the save button when editing a content group.',
+  },
+  requiredError: {
+    id: 'course-authoring.group-configurations.content-groups.new-group.required-error',
+    defaultMessage: 'Group name is required',
+    description: 'Error message displayed when the name of the content group is required but not provided.',
+  },
+  alertGroupInUsage: {
+    id: 'course-authoring.group-configurations.content-groups.edit-group.alert-group-in-usage',
+    defaultMessage: 'This content group is used in one or more units.',
+    description: 'Alert message displayed when attempting to delete a content group that is currently in use by one or more units.',
+  },
+  deleteRestriction: {
+    id: 'course-authoring.group-configurations.content-groups.delete-restriction',
+    defaultMessage: 'Cannot delete when in use by a unit',
+    description: 'Message indicating that a content group cannot be deleted because it is currently in use by a unit.',
+  },
+  emptyContentGroups: {
+    id: 'course-authoring.group-configurations.container.empty-content-groups',
+    defaultMessage: 'In the {outlineComponentLink}, use this group to control access to a component.',
+    description: 'Message displayed when there are no content groups available, suggesting how to use them within the course outline.',
+  },
+  courseOutline: {
+    id: 'course-authoring.group-configurations.container.course-outline',
+    defaultMessage: 'Course outline',
+    description: 'Label for the course outline link.',
+  },
+  actionEdit: {
+    id: 'course-authoring.group-configurations.container.action.edit',
+    defaultMessage: 'Edit',
+    description: 'Label for the edit action in the container.',
+  },
+  actionDelete: {
+    id: 'course-authoring.group-configurations.container.action.delete',
+    defaultMessage: 'Delete',
+    description: 'Label for the delete action in the container.',
+  },
+  subtitleModalDelete: {
+    id: 'course-authoring.group-configurations.container.delete-modal.subtitle',
+    defaultMessage: 'content group',
+    description: 'Substr for the delete modal indicating the type of entity being deleted.',
+  },
+});
+
+export default messages;
diff --git a/src/group-configurations/content-groups-section/utils.js b/src/group-configurations/content-groups-section/utils.js
new file mode 100644
index 0000000000..eeecd16067
--- /dev/null
+++ b/src/group-configurations/content-groups-section/utils.js
@@ -0,0 +1,9 @@
+const isAlreadyExistsGroup = (groupNames, group) => groupNames.some((name) => name === group);
+
+const initialContentGroupObject = (groupName) => ({
+  name: groupName,
+  version: 1,
+  usage: [],
+});
+
+export { isAlreadyExistsGroup, initialContentGroupObject };
diff --git a/src/group-configurations/data/api.js b/src/group-configurations/data/api.js
new file mode 100644
index 0000000000..2c5aceb600
--- /dev/null
+++ b/src/group-configurations/data/api.js
@@ -0,0 +1,115 @@
+import { camelCaseObject, getConfig } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+
+const API_PATH_PATTERN = 'group_configurations';
+const getStudioBaseUrl = () => getConfig().STUDIO_BASE_URL;
+
+export const getContentStoreApiUrl = (courseId) => `${getStudioBaseUrl()}/api/contentstore/v1/${API_PATH_PATTERN}/${courseId}`;
+export const getLegacyApiUrl = (courseId, parentGroupId, groupId) => {
+  const parentUrlPath = `${getStudioBaseUrl()}/${API_PATH_PATTERN}/${courseId}`;
+  const parentGroupPath = `${parentGroupId ? `/${parentGroupId}` : ''}`;
+  const groupPath = `${groupId ? `/${groupId}` : ''}`;
+  return `${parentUrlPath}${parentGroupPath}${groupPath}`;
+};
+
+/**
+ * Get content groups and experimental group configurations for course.
+ * @param {string} courseId
+ * @returns {Promise<Object>}
+ */
+export async function getGroupConfigurations(courseId) {
+  const { data } = await getAuthenticatedHttpClient().get(
+    getContentStoreApiUrl(courseId),
+  );
+
+  return camelCaseObject(data);
+}
+
+/**
+ * Create new content group for course.
+ * @param {string} courseId
+ * @param {object} group
+ * @returns {Promise<Object>}
+ */
+export async function createContentGroup(courseId, group) {
+  const { data } = await getAuthenticatedHttpClient().post(
+    getLegacyApiUrl(courseId, group.id),
+    group,
+  );
+
+  return camelCaseObject(data);
+}
+
+/**
+ * Edit exists content group in course.
+ * @param {string} courseId
+ * @param {object} group
+ * @returns {Promise<Object>}
+ */
+export async function editContentGroup(courseId, group) {
+  const { data } = await getAuthenticatedHttpClient().post(
+    getLegacyApiUrl(courseId, group.id),
+    group,
+  );
+
+  return camelCaseObject(data);
+}
+
+/**
+ * Delete exists content group from the course.
+ * @param {string} courseId
+ * @param {number} parentGroupId
+ * @param {number} groupId
+ * @returns {Promise<Object>}
+ */
+export async function deleteContentGroup(courseId, parentGroupId, groupId) {
+  const { data } = await getAuthenticatedHttpClient().delete(
+    getLegacyApiUrl(courseId, parentGroupId, groupId),
+  );
+
+  return camelCaseObject(data);
+}
+
+/**
+ * Create a new experiment configuration for the course.
+ * @param {string} courseId
+ * @param {object} configuration
+ * @returns {Promise<Object>}
+ */
+export async function createExperimentConfiguration(courseId, configuration) {
+  const { data } = await getAuthenticatedHttpClient().post(
+    getLegacyApiUrl(courseId),
+    configuration,
+  );
+
+  return camelCaseObject(data);
+}
+
+/**
+ * Edit the experiment configuration for the course.
+ * @param {string} courseId
+ * @param {object} configuration
+ * @returns {Promise<Object>}
+ */
+export async function editExperimentConfiguration(courseId, configuration) {
+  const { data } = await getAuthenticatedHttpClient().post(
+    getLegacyApiUrl(courseId, configuration.id),
+    configuration,
+  );
+
+  return camelCaseObject(data);
+}
+
+/**
+ * Delete existing experimental configuration from the course.
+ * @param {string} courseId
+ * @param {number} configurationId
+ * @returns {Promise<Object>}
+ */
+export async function deleteExperimentConfiguration(courseId, configurationId) {
+  const { data } = await getAuthenticatedHttpClient().delete(
+    getLegacyApiUrl(courseId, configurationId),
+  );
+
+  return camelCaseObject(data);
+}
diff --git a/src/group-configurations/data/api.test.js b/src/group-configurations/data/api.test.js
new file mode 100644
index 0000000000..fe5ef9fae4
--- /dev/null
+++ b/src/group-configurations/data/api.test.js
@@ -0,0 +1,149 @@
+import MockAdapter from 'axios-mock-adapter';
+import { camelCaseObject, initializeMockApp } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+
+import { groupConfigurationResponseMock } from '../__mocks__';
+import { initialContentGroupObject } from '../content-groups-section/utils';
+import { initialExperimentConfiguration } from '../experiment-configurations-section/constants';
+import {
+  createContentGroup,
+  createExperimentConfiguration,
+  deleteContentGroup,
+  editContentGroup,
+  getContentStoreApiUrl,
+  getGroupConfigurations,
+  getLegacyApiUrl,
+} from './api';
+
+let axiosMock;
+const courseId = 'course-v1:org+101+101';
+const contentGroups = groupConfigurationResponseMock.allGroupConfigurations[1];
+const experimentConfigurations = groupConfigurationResponseMock.experimentGroupConfigurations;
+
+describe('group configurations API calls', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should fetch group configurations', async () => {
+    const response = { ...groupConfigurationResponseMock };
+    axiosMock.onGet(getContentStoreApiUrl(courseId)).reply(200, response);
+
+    const result = await getGroupConfigurations(courseId);
+    const expected = camelCaseObject(response);
+
+    expect(axiosMock.history.get[0].url).toEqual(
+      getContentStoreApiUrl(courseId),
+    );
+    expect(result).toEqual(expected);
+  });
+
+  it('should create content group', async () => {
+    const response = { ...groupConfigurationResponseMock };
+    const newContentGroupName = 'content-group-test';
+    const updatedContentGroups = {
+      ...contentGroups,
+      groups: [
+        ...contentGroups.groups,
+        initialContentGroupObject(newContentGroupName),
+      ],
+    };
+
+    response.allGroupConfigurations[1] = updatedContentGroups;
+    axiosMock
+      .onPost(getLegacyApiUrl(courseId, contentGroups.id), updatedContentGroups)
+      .reply(200, response);
+
+    const result = await createContentGroup(courseId, updatedContentGroups);
+    const expected = camelCaseObject(response);
+
+    expect(axiosMock.history.post[0].url).toEqual(
+      getLegacyApiUrl(courseId, updatedContentGroups.id),
+    );
+    expect(result).toEqual(expected);
+  });
+
+  it('should edit content group', async () => {
+    const editedName = 'content-group-edited';
+    const groupId = contentGroups.groups[0].id;
+    const response = { ...groupConfigurationResponseMock };
+    const editedContentGroups = {
+      ...contentGroups,
+      groups: contentGroups.groups.map((group) => (group.id === groupId ? { ...group, name: editedName } : group)),
+    };
+
+    response.allGroupConfigurations[1] = editedContentGroups;
+    axiosMock
+      .onPost(getLegacyApiUrl(courseId, contentGroups.id), editedContentGroups)
+      .reply(200, response);
+
+    const result = await editContentGroup(courseId, editedContentGroups);
+    const expected = camelCaseObject(response);
+
+    expect(axiosMock.history.post[0].url).toEqual(
+      getLegacyApiUrl(courseId, editedContentGroups.id),
+    );
+    expect(result).toEqual(expected);
+  });
+
+  it('should delete content group', async () => {
+    const parentGroupId = contentGroups.id;
+    const groupId = contentGroups.groups[0].id;
+    const response = { ...groupConfigurationResponseMock };
+    const updatedContentGroups = {
+      ...contentGroups,
+      groups: contentGroups.groups.filter((group) => group.id !== groupId),
+    };
+
+    response.allGroupConfigurations[1] = updatedContentGroups;
+    axiosMock
+      .onDelete(
+        getLegacyApiUrl(courseId, parentGroupId, groupId),
+        updatedContentGroups,
+      )
+      .reply(200, response);
+
+    const result = await deleteContentGroup(courseId, parentGroupId, groupId);
+    const expected = camelCaseObject(response);
+
+    expect(axiosMock.history.delete[0].url).toEqual(
+      getLegacyApiUrl(courseId, updatedContentGroups.id, groupId),
+    );
+    expect(result).toEqual(expected);
+  });
+
+  it('should create experiment configurations', async () => {
+    const newConfigurationName = 'experiment-configuration-test';
+    const response = { ...groupConfigurationResponseMock };
+    const updatedConfigurations = [
+      ...experimentConfigurations,
+      { ...initialExperimentConfiguration, name: newConfigurationName },
+    ];
+
+    response.experimentGroupConfigurations = updatedConfigurations;
+    axiosMock
+      .onPost(getLegacyApiUrl(courseId), updatedConfigurations)
+      .reply(200, response);
+
+    const result = await createExperimentConfiguration(
+      courseId,
+      updatedConfigurations,
+    );
+    const expected = camelCaseObject(response);
+
+    expect(axiosMock.history.post[0].url).toEqual(getLegacyApiUrl(courseId));
+    expect(result).toEqual(expected);
+  });
+});
diff --git a/src/group-configurations/data/selectors.js b/src/group-configurations/data/selectors.js
new file mode 100644
index 0000000000..465d800d53
--- /dev/null
+++ b/src/group-configurations/data/selectors.js
@@ -0,0 +1,4 @@
+export const getGroupConfigurationsData = (state) => state.groupConfigurations.groupConfigurations;
+export const getLoadingStatus = (state) => state.groupConfigurations.loadingStatus;
+export const getSavingStatus = (state) => state.groupConfigurations.savingStatus;
+export const getErrorMessage = (state) => state.groupConfigurations.errorMessage;
diff --git a/src/group-configurations/data/slice.js b/src/group-configurations/data/slice.js
new file mode 100644
index 0000000000..27e7ec8aa4
--- /dev/null
+++ b/src/group-configurations/data/slice.js
@@ -0,0 +1,81 @@
+/* eslint-disable no-param-reassign */
+import { createSlice } from '@reduxjs/toolkit';
+
+import { RequestStatus } from '../../data/constants';
+
+const slice = createSlice({
+  name: 'groupConfigurations',
+  initialState: {
+    savingStatus: '',
+    errorMessage: '',
+    loadingStatus: RequestStatus.IN_PROGRESS,
+    groupConfigurations: {},
+  },
+  reducers: {
+    fetchGroupConfigurations: (state, { payload }) => {
+      state.groupConfigurations = payload.groupConfigurations;
+    },
+    updateGroupConfigurationsSuccess: (state, { payload }) => {
+      const groupIndex = state.groupConfigurations.allGroupConfigurations.findIndex(
+        group => payload.data.id === group.id,
+      );
+
+      if (groupIndex !== -1) {
+        state.groupConfigurations.allGroupConfigurations[groupIndex] = payload.data;
+      }
+    },
+    deleteGroupConfigurationsSuccess: (state, { payload }) => {
+      const { parentGroupId, groupId } = payload;
+      const parentGroupIndex = state.groupConfigurations.allGroupConfigurations.findIndex(
+        group => parentGroupId === group.id,
+      );
+      if (parentGroupIndex !== -1) {
+        state.groupConfigurations.allGroupConfigurations[parentGroupIndex].groups = state
+          .groupConfigurations.allGroupConfigurations[parentGroupIndex].groups.filter(group => group.id !== groupId);
+      }
+    },
+    updateLoadingStatus: (state, { payload }) => {
+      state.loadingStatus = payload.status;
+    },
+    updateSavingStatuses: (state, { payload }) => {
+      const { status, errorMessage } = payload;
+      state.savingStatus = status;
+      state.errorMessage = errorMessage;
+    },
+    updateExperimentConfigurationSuccess: (state, { payload }) => {
+      const { configuration } = payload;
+      const experimentConfigurationState = state.groupConfigurations.experimentGroupConfigurations;
+      const configurationIdx = experimentConfigurationState.findIndex(
+        (conf) => configuration.id === conf.id,
+      );
+
+      if (configurationIdx !== -1) {
+        experimentConfigurationState[configurationIdx] = configuration;
+      } else {
+        state.groupConfigurations.experimentGroupConfigurations = [
+          ...experimentConfigurationState,
+          configuration,
+        ];
+      }
+    },
+    deleteExperimentConfigurationSuccess: (state, { payload }) => {
+      const { configurationId } = payload;
+      const filteredGroups = state.groupConfigurations.experimentGroupConfigurations.filter(
+        (configuration) => configuration.id !== configurationId,
+      );
+      state.groupConfigurations.experimentGroupConfigurations = filteredGroups;
+    },
+  },
+});
+
+export const {
+  fetchGroupConfigurations,
+  updateLoadingStatus,
+  updateSavingStatuses,
+  updateGroupConfigurationsSuccess,
+  deleteGroupConfigurationsSuccess,
+  updateExperimentConfigurationSuccess,
+  deleteExperimentConfigurationSuccess,
+} = slice.actions;
+
+export const { reducer } = slice;
diff --git a/src/group-configurations/data/slice.test.js b/src/group-configurations/data/slice.test.js
new file mode 100644
index 0000000000..ebc6ef8780
--- /dev/null
+++ b/src/group-configurations/data/slice.test.js
@@ -0,0 +1,78 @@
+import {
+  reducer,
+  fetchGroupConfigurations,
+  updateGroupConfigurationsSuccess,
+  deleteGroupConfigurationsSuccess,
+  updateExperimentConfigurationSuccess,
+  deleteExperimentConfigurationSuccess,
+} from './slice';
+import { RequestStatus } from '../../data/constants';
+
+describe('groupConfigurations slice', () => {
+  let initialState;
+
+  beforeEach(() => {
+    initialState = {
+      savingStatus: '',
+      loadingStatus: RequestStatus.IN_PROGRESS,
+      groupConfigurations: {
+        allGroupConfigurations: [{ id: 1, name: 'Group 1', groups: [{ id: 1, name: 'inner group' }] }],
+        experimentGroupConfigurations: [],
+      },
+    };
+  });
+
+  it('should update group configurations with fetchGroupConfigurations', () => {
+    const payload = {
+      groupConfigurations: {
+        allGroupConfigurations: [{ id: 2, name: 'Group 2' }],
+        experimentGroupConfigurations: [],
+      },
+    };
+
+    const newState = reducer(initialState, fetchGroupConfigurations(payload));
+
+    expect(newState.groupConfigurations).toEqual(payload.groupConfigurations);
+  });
+
+  it('should update an existing group configuration with updateGroupConfigurationsSuccess', () => {
+    const payload = { data: { id: 1, name: 'Updated Group' } };
+
+    const newState = reducer(initialState, updateGroupConfigurationsSuccess(payload));
+
+    expect(newState.groupConfigurations.allGroupConfigurations[0]).toEqual(payload.data);
+  });
+
+  it('should delete a group configuration with deleteGroupConfigurationsSuccess', () => {
+    const payload = { parentGroupId: 1, groupId: 1 };
+
+    const newState = reducer(initialState, deleteGroupConfigurationsSuccess(payload));
+
+    expect(newState.groupConfigurations.allGroupConfigurations[0].groups.length).toEqual(0);
+  });
+
+  it('should update experiment configuration with updateExperimentConfigurationSuccess', () => {
+    const payload = { configuration: { id: 1, name: 'Experiment Config' } };
+
+    const newState = reducer(initialState, updateExperimentConfigurationSuccess(payload));
+
+    expect(newState.groupConfigurations.experimentGroupConfigurations.length).toEqual(1);
+    expect(newState.groupConfigurations.experimentGroupConfigurations[0]).toEqual(payload.configuration);
+  });
+
+  it('should delete an experiment configuration with deleteExperimentConfigurationSuccess', () => {
+    const initialStateWithExperiment = {
+      savingStatus: '',
+      loadingStatus: RequestStatus.IN_PROGRESS,
+      groupConfigurations: {
+        allGroupConfigurations: [],
+        experimentGroupConfigurations: [{ id: 1, name: 'Experiment Config' }],
+      },
+    };
+    const payload = { configurationId: 1 };
+
+    const newState = reducer(initialStateWithExperiment, deleteExperimentConfigurationSuccess(payload));
+
+    expect(newState.groupConfigurations.experimentGroupConfigurations.length).toEqual(0);
+  });
+});
diff --git a/src/group-configurations/data/thunk.js b/src/group-configurations/data/thunk.js
new file mode 100644
index 0000000000..30ae354730
--- /dev/null
+++ b/src/group-configurations/data/thunk.js
@@ -0,0 +1,158 @@
+import { RequestStatus } from '../../data/constants';
+import { NOTIFICATION_MESSAGES } from '../../constants';
+import {
+  hideProcessingNotification,
+  showProcessingNotification,
+} from '../../generic/processing-notification/data/slice';
+import { handleResponseErrors } from '../../generic/saving-error-alert';
+import {
+  getGroupConfigurations,
+  createContentGroup,
+  editContentGroup,
+  deleteContentGroup,
+  createExperimentConfiguration,
+  editExperimentConfiguration,
+  deleteExperimentConfiguration,
+} from './api';
+import {
+  fetchGroupConfigurations,
+  updateLoadingStatus,
+  updateSavingStatuses,
+  updateGroupConfigurationsSuccess,
+  deleteGroupConfigurationsSuccess,
+  updateExperimentConfigurationSuccess,
+  deleteExperimentConfigurationSuccess,
+} from './slice';
+
+export function fetchGroupConfigurationsQuery(courseId) {
+  return async (dispatch) => {
+    dispatch(updateLoadingStatus({ status: RequestStatus.IN_PROGRESS }));
+
+    try {
+      const groupConfigurations = await getGroupConfigurations(courseId);
+      dispatch(fetchGroupConfigurations({ groupConfigurations }));
+      dispatch(updateLoadingStatus({ status: RequestStatus.SUCCESSFUL }));
+    } catch (error) {
+      if (error.response && error.response.status === 403) {
+        dispatch(updateLoadingStatus({ status: RequestStatus.DENIED }));
+      } else {
+        dispatch(updateLoadingStatus({ courseId, status: RequestStatus.FAILED }));
+      }
+    }
+  };
+}
+
+export function createContentGroupQuery(courseId, group) {
+  return async (dispatch) => {
+    dispatch(updateSavingStatuses({ status: RequestStatus.PENDING }));
+    dispatch(showProcessingNotification(NOTIFICATION_MESSAGES.saving));
+
+    try {
+      const data = await createContentGroup(courseId, group);
+      dispatch(updateGroupConfigurationsSuccess({ data }));
+      dispatch(updateSavingStatuses({ status: RequestStatus.SUCCESSFUL }));
+      return true;
+    } catch (error) {
+      return handleResponseErrors(error, dispatch, updateSavingStatuses);
+    } finally {
+      dispatch(hideProcessingNotification());
+    }
+  };
+}
+
+export function editContentGroupQuery(courseId, group) {
+  return async (dispatch) => {
+    dispatch(updateSavingStatuses({ status: RequestStatus.PENDING }));
+    dispatch(showProcessingNotification(NOTIFICATION_MESSAGES.saving));
+
+    try {
+      const data = await editContentGroup(courseId, group);
+      dispatch(updateGroupConfigurationsSuccess({ data }));
+      dispatch(updateSavingStatuses({ status: RequestStatus.SUCCESSFUL }));
+      return true;
+    } catch (error) {
+      return handleResponseErrors(error, dispatch, updateSavingStatuses);
+    } finally {
+      dispatch(hideProcessingNotification());
+    }
+  };
+}
+
+export function deleteContentGroupQuery(courseId, parentGroupId, groupId) {
+  return async (dispatch) => {
+    dispatch(updateSavingStatuses({ status: RequestStatus.PENDING }));
+    dispatch(showProcessingNotification(NOTIFICATION_MESSAGES.deleting));
+
+    try {
+      await deleteContentGroup(courseId, parentGroupId, groupId);
+      dispatch(deleteGroupConfigurationsSuccess({ parentGroupId, groupId }));
+      dispatch(updateSavingStatuses({ status: RequestStatus.SUCCESSFUL }));
+    } catch (error) {
+      handleResponseErrors(error, dispatch, updateSavingStatuses);
+    } finally {
+      dispatch(hideProcessingNotification());
+    }
+  };
+}
+
+export function createExperimentConfigurationQuery(courseId, newConfiguration) {
+  return async (dispatch) => {
+    dispatch(updateSavingStatuses({ status: RequestStatus.PENDING }));
+    dispatch(showProcessingNotification(NOTIFICATION_MESSAGES.saving));
+
+    try {
+      const configuration = await createExperimentConfiguration(
+        courseId,
+        newConfiguration,
+      );
+      dispatch(updateExperimentConfigurationSuccess({ configuration }));
+      dispatch(updateSavingStatuses({ status: RequestStatus.SUCCESSFUL }));
+      return true;
+    } catch (error) {
+      return handleResponseErrors(error, dispatch, updateSavingStatuses);
+    } finally {
+      dispatch(hideProcessingNotification());
+    }
+  };
+}
+
+export function editExperimentConfigurationQuery(
+  courseId,
+  editedConfiguration,
+) {
+  return async (dispatch) => {
+    dispatch(updateSavingStatuses({ status: RequestStatus.PENDING }));
+    dispatch(showProcessingNotification(NOTIFICATION_MESSAGES.saving));
+
+    try {
+      const configuration = await editExperimentConfiguration(
+        courseId,
+        editedConfiguration,
+      );
+      dispatch(updateExperimentConfigurationSuccess({ configuration }));
+      dispatch(updateSavingStatuses({ status: RequestStatus.SUCCESSFUL }));
+      return true;
+    } catch (error) {
+      return handleResponseErrors(error, dispatch, updateSavingStatuses);
+    } finally {
+      dispatch(hideProcessingNotification());
+    }
+  };
+}
+
+export function deleteExperimentConfigurationQuery(courseId, configurationId) {
+  return async (dispatch) => {
+    dispatch(updateSavingStatuses({ status: RequestStatus.PENDING }));
+    dispatch(showProcessingNotification(NOTIFICATION_MESSAGES.deleting));
+
+    try {
+      await deleteExperimentConfiguration(courseId, configurationId);
+      dispatch(deleteExperimentConfigurationSuccess({ configurationId }));
+      dispatch(updateSavingStatuses({ status: RequestStatus.SUCCESSFUL }));
+    } catch (error) {
+      handleResponseErrors(error, dispatch, updateSavingStatuses);
+    } finally {
+      dispatch(hideProcessingNotification());
+    }
+  };
+}
diff --git a/src/group-configurations/data/thunk.test.js b/src/group-configurations/data/thunk.test.js
new file mode 100644
index 0000000000..131acec3d1
--- /dev/null
+++ b/src/group-configurations/data/thunk.test.js
@@ -0,0 +1,95 @@
+import MockAdapter from 'axios-mock-adapter';
+import { initializeMockApp } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+
+import { groupConfigurationResponseMock } from '../__mocks__';
+import { getContentStoreApiUrl, getLegacyApiUrl } from './api';
+import * as thunkActions from './thunk';
+import initializeStore from '../../store';
+import { executeThunk } from '../../utils';
+
+let axiosMock;
+let store;
+const courseId = 'course-v1:org+101+101';
+
+describe('group configurations thunk', () => {
+  beforeEach(async () => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+    store = initializeStore();
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+    const response = { ...groupConfigurationResponseMock };
+    axiosMock.onGet(getContentStoreApiUrl(courseId)).reply(200, response);
+    await executeThunk(thunkActions.fetchGroupConfigurationsQuery(courseId), store.dispatch);
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('dispatches correct actions on createContentGroupQuery', async () => {
+    const mockResponse = { id: 50, name: 'new' };
+    axiosMock.onPost(getLegacyApiUrl(courseId)).reply(200, mockResponse);
+
+    await executeThunk(thunkActions.createContentGroupQuery(courseId, {}), store.dispatch);
+    const updatedGroup = store.getState()
+      .groupConfigurations.groupConfigurations.allGroupConfigurations
+      .find(group => group.id === mockResponse.id);
+    expect(updatedGroup.name).toEqual(mockResponse.name);
+  });
+  it('dispatches correct actions on editContentGroupQuery', async () => {
+    const mockResponse = { id: 50, name: 'new' };
+    axiosMock.onPost(getLegacyApiUrl(courseId)).reply(200, mockResponse);
+
+    await executeThunk(thunkActions.editContentGroupQuery(courseId, {}), store.dispatch);
+    const updatedGroup = store.getState()
+      .groupConfigurations.groupConfigurations.allGroupConfigurations
+      .find(group => group.id === mockResponse.id);
+    expect(updatedGroup.name).toEqual(mockResponse.name);
+  });
+  it('dispatches correct actions on createExperimentConfigurationQuery', async () => {
+    const mockResponse = { id: 50, name: 'new' };
+    axiosMock.onPost(getLegacyApiUrl(courseId)).reply(200, mockResponse);
+
+    await executeThunk(thunkActions.createExperimentConfigurationQuery(courseId, {}), store.dispatch);
+    const updatedGroup = store.getState()
+      .groupConfigurations.groupConfigurations.experimentGroupConfigurations
+      .find(group => group.id === mockResponse.id);
+    expect(updatedGroup.name).toEqual(mockResponse.name);
+  });
+  it('dispatches correct actions on editExperimentConfigurationQuery', async () => {
+    const mockResponse = { id: 50, name: 'new' };
+    axiosMock.onPost(getLegacyApiUrl(courseId)).reply(200, mockResponse);
+
+    await executeThunk(thunkActions.editExperimentConfigurationQuery(courseId, {}), store.dispatch);
+    const updatedGroup = store.getState()
+      .groupConfigurations.groupConfigurations.experimentGroupConfigurations
+      .find(group => group.id === mockResponse.id);
+    expect(updatedGroup.name).toEqual(mockResponse.name);
+  });
+  it('dispatches correct actions on deleteContentGroupQuery', async () => {
+    const groupToDelete = { id: 6, name: 'deleted' };
+    axiosMock.onDelete(getLegacyApiUrl(courseId)).reply(200, {});
+
+    await executeThunk(thunkActions.deleteContentGroupQuery(courseId, groupToDelete.id), store.dispatch);
+    const updatedGroup = store.getState()
+      .groupConfigurations.groupConfigurations.allGroupConfigurations
+      .find(group => group.id === groupToDelete.id);
+    expect(updatedGroup).toBeFalsy();
+  });
+  it('dispatches correct actions on deleteExperimentConfigurationQuery', async () => {
+    const groupToDelete = { id: 276408623, name: 'deleted' };
+    axiosMock.onDelete(getLegacyApiUrl(courseId)).reply(200, {});
+    await executeThunk(thunkActions.deleteExperimentConfigurationQuery(courseId, groupToDelete.id), store.dispatch);
+    const updatedGroup = store.getState()
+      .groupConfigurations.groupConfigurations.experimentGroupConfigurations
+      .find(group => group.id === groupToDelete.id);
+    expect(updatedGroup).toBeFalsy();
+  });
+});
diff --git a/src/group-configurations/empty-placeholder/EmptyPlaceholder.scss b/src/group-configurations/empty-placeholder/EmptyPlaceholder.scss
new file mode 100644
index 0000000000..1768ecac81
--- /dev/null
+++ b/src/group-configurations/empty-placeholder/EmptyPlaceholder.scss
@@ -0,0 +1,10 @@
+.group-configurations-empty-placeholder {
+  @include pgn-box-shadow(1, "down");
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1.5rem;
+  border-radius: .375rem;
+  padding: 1.5rem;
+}
diff --git a/src/group-configurations/empty-placeholder/EmptyPlaceholder.test.jsx b/src/group-configurations/empty-placeholder/EmptyPlaceholder.test.jsx
new file mode 100644
index 0000000000..5d4ed0b5cb
--- /dev/null
+++ b/src/group-configurations/empty-placeholder/EmptyPlaceholder.test.jsx
@@ -0,0 +1,22 @@
+import { render } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import messages from './messages';
+import EmptyPlaceholder from '.';
+
+const onCreateNewGroup = jest.fn();
+
+const renderComponent = () => render(
+  <IntlProvider locale="en">
+    <EmptyPlaceholder onCreateNewGroup={onCreateNewGroup} />
+  </IntlProvider>,
+);
+
+describe('<EmptyPlaceholder />', () => {
+  it('renders EmptyPlaceholder component correctly', () => {
+    const { getByText, getByRole } = renderComponent();
+
+    expect(getByText(messages.title.defaultMessage)).toBeInTheDocument();
+    expect(getByRole('button', { name: messages.button.defaultMessage })).toBeInTheDocument();
+  });
+});
diff --git a/src/group-configurations/empty-placeholder/index.jsx b/src/group-configurations/empty-placeholder/index.jsx
new file mode 100644
index 0000000000..80b780d1d5
--- /dev/null
+++ b/src/group-configurations/empty-placeholder/index.jsx
@@ -0,0 +1,42 @@
+import PropTypes from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Add as IconAdd } from '@openedx/paragon/icons';
+import { Button } from '@openedx/paragon';
+
+import messages from './messages';
+
+const EmptyPlaceholder = ({ onCreateNewGroup, isExperiment }) => {
+  const { formatMessage } = useIntl();
+  const titleMessage = isExperiment
+    ? messages.experimentalTitle
+    : messages.title;
+  const buttonMessage = isExperiment
+    ? messages.experimentalButton
+    : messages.button;
+
+  return (
+    <div
+      className="group-configurations-empty-placeholder bg-white"
+      data-testid="group-configurations-empty-placeholder"
+    >
+      <p className="mb-0 small text-gray-700">{formatMessage(titleMessage)}</p>
+      <Button
+        iconBefore={IconAdd}
+        onClick={onCreateNewGroup}
+      >
+        {formatMessage(buttonMessage)}
+      </Button>
+    </div>
+  );
+};
+
+EmptyPlaceholder.defaultProps = {
+  isExperiment: false,
+};
+
+EmptyPlaceholder.propTypes = {
+  onCreateNewGroup: PropTypes.func.isRequired,
+  isExperiment: PropTypes.bool,
+};
+
+export default EmptyPlaceholder;
diff --git a/src/group-configurations/empty-placeholder/messages.js b/src/group-configurations/empty-placeholder/messages.js
new file mode 100644
index 0000000000..29fcf3b2cb
--- /dev/null
+++ b/src/group-configurations/empty-placeholder/messages.js
@@ -0,0 +1,26 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  title: {
+    id: 'course-authoring.group-configurations.empty-placeholder.title',
+    defaultMessage: 'You have not created any content groups yet.',
+    description: 'Title displayed when there are no content groups created yet.',
+  },
+  experimentalTitle: {
+    id: 'course-authoring.group-configurations.experimental-empty-placeholder.title',
+    defaultMessage: 'You have not created any group configurations yet.',
+    description: 'Title displayed when there are no experimental group configurations created yet.',
+  },
+  button: {
+    id: 'course-authoring.group-configurations.empty-placeholder.button',
+    defaultMessage: 'Add your first content group',
+    description: 'Label for the button to add the first content group when none exist.',
+  },
+  experimentalButton: {
+    id: 'course-authoring.group-configurations.experimental-empty-placeholder.button',
+    defaultMessage: 'Add your first group configuration',
+    description: 'Label for the button to add the first experimental group configuration when none exist.',
+  },
+});
+
+export default messages;
diff --git a/src/group-configurations/enrollment-track-groups-section/EnrollmentTrackGroupsSection.test.jsx b/src/group-configurations/enrollment-track-groups-section/EnrollmentTrackGroupsSection.test.jsx
new file mode 100644
index 0000000000..84283ab689
--- /dev/null
+++ b/src/group-configurations/enrollment-track-groups-section/EnrollmentTrackGroupsSection.test.jsx
@@ -0,0 +1,24 @@
+import { render } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import { enrollmentTrackGroupsMock } from '../__mocks__';
+import EnrollmentTrackGroupsSection from '.';
+
+const renderComponent = (props = {}) => render(
+  <IntlProvider locale="en">
+    <EnrollmentTrackGroupsSection
+      availableGroup={enrollmentTrackGroupsMock}
+      {...props}
+    />
+  </IntlProvider>,
+);
+
+describe('<EnrollmentTrackGroupsSection />', () => {
+  it('renders component correctly', () => {
+    const { getByText, getAllByTestId } = renderComponent();
+    expect(getByText(enrollmentTrackGroupsMock.name)).toBeInTheDocument();
+    expect(getAllByTestId('content-group-card')).toHaveLength(
+      enrollmentTrackGroupsMock.groups.length,
+    );
+  });
+});
diff --git a/src/group-configurations/enrollment-track-groups-section/index.jsx b/src/group-configurations/enrollment-track-groups-section/index.jsx
new file mode 100644
index 0000000000..3456a926c6
--- /dev/null
+++ b/src/group-configurations/enrollment-track-groups-section/index.jsx
@@ -0,0 +1,23 @@
+import PropTypes from 'prop-types';
+
+import { availableGroupPropTypes } from '../constants';
+import ContentGroupCard from '../content-groups-section/ContentGroupCard';
+
+const EnrollmentTrackGroupsSection = ({ availableGroup: { groups, name } }) => (
+  <div className="mt-2.5">
+    <h2 className="lead text-black mb-3 configuration-section-name">{name}</h2>
+    {groups.map((group) => (
+      <ContentGroupCard
+        group={group}
+        key={group.id}
+        readOnly
+      />
+    ))}
+  </div>
+);
+
+EnrollmentTrackGroupsSection.propTypes = {
+  availableGroup: PropTypes.shape(availableGroupPropTypes).isRequired,
+};
+
+export default EnrollmentTrackGroupsSection;
diff --git a/src/group-configurations/experiment-configurations-section/ExperimentCard.jsx b/src/group-configurations/experiment-configurations-section/ExperimentCard.jsx
new file mode 100644
index 0000000000..60a6d177d2
--- /dev/null
+++ b/src/group-configurations/experiment-configurations-section/ExperimentCard.jsx
@@ -0,0 +1,221 @@
+import { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { useParams } from 'react-router-dom';
+import { getConfig } from '@edx/frontend-platform';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import {
+  ActionRow,
+  Hyperlink,
+  Icon,
+  IconButtonWithTooltip,
+  useToggle,
+} from '@openedx/paragon';
+import {
+  DeleteOutline as DeleteOutlineIcon,
+  EditOutline as EditOutlineIcon,
+} from '@openedx/paragon/icons';
+
+import DeleteModal from '../../generic/delete-modal/DeleteModal';
+import TitleButton from '../common/TitleButton';
+import UsageList from '../common/UsageList';
+import ExperimentCardGroup from './ExperimentCardGroup';
+import ExperimentForm from './ExperimentForm';
+import messages from './messages';
+import { initialExperimentConfiguration } from './constants';
+
+const ExperimentCard = ({
+  configuration,
+  experimentConfigurationActions,
+  isExpandedByDefault,
+  onCreate,
+}) => {
+  const { formatMessage } = useIntl();
+  const { courseId } = useParams();
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [isEditMode, switchOnEditMode, switchOffEditMode] = useToggle(false);
+  const [isOpenDeleteModal, openDeleteModal, closeDeleteModal] = useToggle(false);
+
+  useEffect(() => {
+    setIsExpanded(isExpandedByDefault);
+  }, [isExpandedByDefault]);
+
+  const {
+    id, groups: groupsControl, description, usage,
+  } = configuration;
+  const isUsedInLocation = !!usage?.length;
+
+  const { href: outlineUrl } = new URL(
+    `/course/${courseId}`,
+    getConfig().STUDIO_BASE_URL,
+  );
+
+  const outlineComponentLink = (
+    <Hyperlink destination={outlineUrl}>
+      {formatMessage(messages.courseOutline)}
+    </Hyperlink>
+  );
+
+  const guideHowToAdd = (
+    <span
+      className="small text-gray-700"
+      data-testid="experiment-configuration-card-usage-empty"
+    >
+      {formatMessage(messages.emptyExperimentGroup, { outlineComponentLink })}
+    </span>
+  );
+
+  // We need to store actual idx as an additional field for getNextGroupName utility.
+  const configurationGroupsWithIndexField = {
+    ...configuration,
+    groups: configuration.groups.map((group, idx) => ({ ...group, idx })),
+  };
+
+  const formValues = isEditMode
+    ? configurationGroupsWithIndexField
+    : initialExperimentConfiguration;
+
+  const handleDeleteConfiguration = () => {
+    experimentConfigurationActions.handleDelete(id);
+    closeDeleteModal();
+  };
+
+  const handleEditConfiguration = (values) => {
+    experimentConfigurationActions.handleEdit(values, switchOffEditMode);
+  };
+
+  return (
+    <>
+      {isEditMode ? (
+        <ExperimentForm
+          isEditMode={isEditMode}
+          initialValues={formValues}
+          isUsedInLocation={isUsedInLocation}
+          onCreateClick={onCreate}
+          onCancelClick={switchOffEditMode}
+          onEditClick={handleEditConfiguration}
+        />
+      ) : (
+        <div
+          className="configuration-card"
+          data-testid="configuration-card"
+          id={id}
+        >
+          <div className="configuration-card-header">
+            <TitleButton
+              group={configuration}
+              isExpanded={isExpanded}
+              onTitleClick={() => setIsExpanded((prevState) => !prevState)}
+              isExperiment
+            />
+            <ActionRow className="ml-auto d-flex">
+              <IconButtonWithTooltip
+                tooltipContent={formatMessage(messages.actionEdit)}
+                alt={formatMessage(messages.actionEdit)}
+                src={EditOutlineIcon}
+                iconAs={Icon}
+                onClick={switchOnEditMode}
+                data-testid="configuration-card-header-edit"
+              />
+              <IconButtonWithTooltip
+                className="configuration-card-header__delete-tooltip"
+                tooltipContent={formatMessage(
+                  isUsedInLocation
+                    ? messages.experimentConfigurationDeleteRestriction
+                    : messages.actionDelete,
+                )}
+                alt={formatMessage(messages.actionDelete)}
+                src={DeleteOutlineIcon}
+                iconAs={Icon}
+                onClick={openDeleteModal}
+                data-testid="configuration-card-header-delete"
+                disabled={isUsedInLocation}
+              />
+            </ActionRow>
+          </div>
+          {isExpanded && (
+            <div
+              className="configuration-card-content"
+              data-testid="configuration-card-content"
+            >
+              <span className="x-small text-gray-500">{description}</span>
+              <ExperimentCardGroup groups={groupsControl} />
+              {usage?.length ? (
+                <UsageList
+                  className="mt-2.5"
+                  itemList={usage}
+                  isExperiment
+                />
+              ) : (
+                guideHowToAdd
+              )}
+            </div>
+          )}
+        </div>
+      )}
+      <DeleteModal
+        category={formatMessage(messages.subtitleModalDelete)}
+        isOpen={isOpenDeleteModal}
+        close={closeDeleteModal}
+        onDeleteSubmit={handleDeleteConfiguration}
+      />
+    </>
+  );
+};
+
+ExperimentCard.defaultProps = {
+  configuration: {
+    id: undefined,
+    name: '',
+    usage: [],
+    version: undefined,
+  },
+  isExpandedByDefault: false,
+  onCreate: null,
+  experimentConfigurationActions: {},
+};
+
+ExperimentCard.propTypes = {
+  configuration: PropTypes.shape({
+    id: PropTypes.number.isRequired,
+    name: PropTypes.string.isRequired,
+    usage: PropTypes.arrayOf(
+      PropTypes.shape({
+        label: PropTypes.string,
+        url: PropTypes.string,
+        validation: PropTypes.shape({
+          type: PropTypes.string,
+          text: PropTypes.string,
+        }),
+      }),
+    ),
+    version: PropTypes.number.isRequired,
+    active: PropTypes.bool,
+    description: PropTypes.string,
+    groups: PropTypes.arrayOf(
+      PropTypes.shape({
+        id: PropTypes.number,
+        name: PropTypes.string,
+        usage: PropTypes.arrayOf(
+          PropTypes.shape({
+            label: PropTypes.string,
+            url: PropTypes.string,
+          }),
+        ),
+        version: PropTypes.number,
+      }),
+    ),
+    parameters: PropTypes.shape({
+      courseId: PropTypes.string,
+    }),
+    scheme: PropTypes.string,
+  }),
+  isExpandedByDefault: PropTypes.bool,
+  onCreate: PropTypes.func,
+  experimentConfigurationActions: PropTypes.shape({
+    handleCreate: PropTypes.func,
+    handleEdit: PropTypes.func,
+    handleDelete: PropTypes.func,
+  }),
+};
+
+export default ExperimentCard;
diff --git a/src/group-configurations/experiment-configurations-section/ExperimentCard.test.jsx b/src/group-configurations/experiment-configurations-section/ExperimentCard.test.jsx
new file mode 100644
index 0000000000..60c47fc390
--- /dev/null
+++ b/src/group-configurations/experiment-configurations-section/ExperimentCard.test.jsx
@@ -0,0 +1,123 @@
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import { experimentGroupConfigurationsMock } from '../__mocks__';
+import commonMessages from '../common/messages';
+import ExperimentCard from './ExperimentCard';
+
+const handleCreateMock = jest.fn();
+const handleDeleteMock = jest.fn();
+const handleEditMock = jest.fn();
+const experimentConfigurationActions = {
+  handleCreate: handleCreateMock,
+  handleDelete: handleDeleteMock,
+  handleEdit: handleEditMock,
+};
+
+const onCreateMock = jest.fn();
+const experimentConfiguration = experimentGroupConfigurationsMock[0];
+
+const renderComponent = (props = {}) => render(
+  <IntlProvider locale="en">
+    <ExperimentCard
+      configuration={experimentConfiguration}
+      experimentConfigurationActions={experimentConfigurationActions}
+      onCreate={onCreateMock}
+      {...props}
+    />
+  </IntlProvider>,
+);
+
+describe('<ExperimentCard />', () => {
+  it('renders component correctly', () => {
+    const { getByText, getByTestId } = renderComponent();
+    expect(getByText(experimentConfiguration.name)).toBeInTheDocument();
+    expect(
+      getByText(
+        commonMessages.titleId.defaultMessage.replace(
+          '{id}',
+          experimentConfiguration.id,
+        ),
+      ),
+    ).toBeInTheDocument();
+    expect(getByTestId('configuration-card-header-edit')).toBeInTheDocument();
+    expect(getByTestId('configuration-card-header-delete')).toBeInTheDocument();
+  });
+
+  it('expands/collapses the container experiment configuration on title click', () => {
+    const { queryByTestId, getByTestId } = renderComponent();
+    const cardTitle = getByTestId('configuration-card-header-button');
+    userEvent.click(cardTitle);
+    expect(queryByTestId('configuration-card-content')).toBeInTheDocument();
+
+    userEvent.click(cardTitle);
+    expect(queryByTestId('configuration-card-content')).not.toBeInTheDocument();
+  });
+
+  it('renders experiment configuration without access to units', () => {
+    const experimentConfigurationUpdated = {
+      ...experimentConfiguration,
+      usage: [],
+    };
+    const { queryByText, getByTestId } = renderComponent({
+      configuration: experimentConfigurationUpdated,
+    });
+    expect(
+      queryByText(commonMessages.accessTo.defaultMessage),
+    ).not.toBeInTheDocument();
+
+    const cardTitle = getByTestId('configuration-card-header-button');
+    userEvent.click(cardTitle);
+    expect(
+      getByTestId('experiment-configuration-card-usage-empty'),
+    ).toBeInTheDocument();
+  });
+
+  it('renders usage with validation error message', () => {
+    const experimentConfigurationUpdated = {
+      ...experimentConfiguration,
+      usage: [{
+        label: 'Unit1name / Content Experiment',
+        url: '/container/block-v1:2u+1+1+type@split_test+block@ccfae830ec9b406c835f8ce4520ae395',
+        validation: {
+          type: 'warning',
+          text: 'This content experiment has issues that affect content visibility.',
+        },
+      }],
+    };
+    const { getByText, getByTestId } = renderComponent({
+      configuration: experimentConfigurationUpdated,
+    });
+
+    const cardTitle = getByTestId('configuration-card-header-button');
+    userEvent.click(cardTitle);
+
+    expect(
+      getByText(experimentConfigurationUpdated.usage[0].validation.text),
+    ).toBeInTheDocument();
+  });
+
+  it('renders experiment configuration badge that contains groups', () => {
+    const { queryByTestId } = renderComponent();
+
+    const usageBlock = queryByTestId('configuration-card-header-button-usage');
+    expect(usageBlock).toBeInTheDocument();
+  });
+
+  it("user can't delete experiment configuration that is used in location", () => {
+    const usageLocation = {
+      label: 'UnitName 2 / Content Experiment',
+      url: '/container/block-v1:2u+1+1+type@split_test+block@ccfae830ec9b406c835f8ce4520ae396',
+    };
+    const experimentConfigurationUpdated = {
+      ...experimentConfiguration,
+      usage: [usageLocation],
+    };
+    const { getByTestId } = renderComponent({
+      configuration: experimentConfigurationUpdated,
+    });
+    const deleteButton = getByTestId('configuration-card-header-delete');
+    expect(deleteButton).toBeDisabled();
+  });
+});
diff --git a/src/group-configurations/experiment-configurations-section/ExperimentCardGroup.jsx b/src/group-configurations/experiment-configurations-section/ExperimentCardGroup.jsx
new file mode 100644
index 0000000000..36cfc1a8e8
--- /dev/null
+++ b/src/group-configurations/experiment-configurations-section/ExperimentCardGroup.jsx
@@ -0,0 +1,41 @@
+import PropTypes from 'prop-types';
+import { Stack, Truncate } from '@openedx/paragon';
+
+import { getGroupPercentage } from './utils';
+
+const ExperimentCardGroup = ({ groups }) => {
+  const percentage = getGroupPercentage(groups.length);
+
+  return (
+    <Stack className="mb-3">
+      {groups.map((item) => (
+        <div
+          className="configuration-card-content__experiment-stack"
+          data-testid="configuration-card-content-experiment-stack"
+          key={item.id}
+        >
+          <Truncate lines={1}>{item.name}</Truncate>
+          <span>{percentage}</span>
+        </div>
+      ))}
+    </Stack>
+  );
+};
+
+ExperimentCardGroup.propTypes = {
+  groups: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.number,
+      name: PropTypes.string,
+      usage: PropTypes.arrayOf(
+        PropTypes.shape({
+          label: PropTypes.string,
+          url: PropTypes.string,
+        }),
+      ),
+      version: PropTypes.number,
+    }),
+  ).isRequired,
+};
+
+export default ExperimentCardGroup;
diff --git a/src/group-configurations/experiment-configurations-section/ExperimentConfigurationsSection.test.jsx b/src/group-configurations/experiment-configurations-section/ExperimentConfigurationsSection.test.jsx
new file mode 100644
index 0000000000..6fcd756567
--- /dev/null
+++ b/src/group-configurations/experiment-configurations-section/ExperimentConfigurationsSection.test.jsx
@@ -0,0 +1,53 @@
+import { render } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import { experimentGroupConfigurationsMock } from '../__mocks__';
+import messages from './messages';
+import ExperimentConfigurationsSection from '.';
+
+const handleCreateMock = jest.fn();
+const handleDeleteMock = jest.fn();
+const handleEditMock = jest.fn();
+const mockPathname = '/foo-bar';
+const experimentConfigurationActions = {
+  handleCreate: handleCreateMock,
+  handleDelete: handleDeleteMock,
+  handleEdit: handleEditMock,
+};
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useLocation: () => ({
+    pathname: mockPathname,
+  }),
+}));
+
+const renderComponent = (props) => render(
+  <IntlProvider locale="en">
+    <ExperimentConfigurationsSection
+      availableGroups={experimentGroupConfigurationsMock}
+      experimentConfigurationActions={experimentConfigurationActions}
+      {...props}
+    />
+  </IntlProvider>,
+);
+
+describe('<ExperimentConfigurationsSection />', () => {
+  it('renders component correctly', () => {
+    const { getByText, getByRole, getAllByTestId } = renderComponent();
+    expect(getByText(messages.title.defaultMessage)).toBeInTheDocument();
+    expect(
+      getByRole('button', { name: messages.addNewGroup.defaultMessage }),
+    ).toBeInTheDocument();
+    expect(getAllByTestId('configuration-card')).toHaveLength(
+      experimentGroupConfigurationsMock.length,
+    );
+  });
+
+  it('renders empty section', () => {
+    const { getByTestId } = renderComponent({ availableGroups: [] });
+    expect(
+      getByTestId('group-configurations-empty-placeholder'),
+    ).toBeInTheDocument();
+  });
+});
diff --git a/src/group-configurations/experiment-configurations-section/ExperimentForm.jsx b/src/group-configurations/experiment-configurations-section/ExperimentForm.jsx
new file mode 100644
index 0000000000..83bd238323
--- /dev/null
+++ b/src/group-configurations/experiment-configurations-section/ExperimentForm.jsx
@@ -0,0 +1,164 @@
+import PropTypes from 'prop-types';
+import { FieldArray, Formik } from 'formik';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import {
+  Alert,
+  ActionRow,
+  Button,
+  Form,
+} from '@openedx/paragon';
+import { WarningFilled as WarningFilledIcon } from '@openedx/paragon/icons';
+
+import PromptIfDirty from '../../generic/prompt-if-dirty/PromptIfDirty';
+import ExperimentFormGroups from './ExperimentFormGroups';
+import messages from './messages';
+import { experimentFormValidationSchema } from './validation';
+
+const ExperimentForm = ({
+  isEditMode,
+  initialValues,
+  isUsedInLocation,
+  onCreateClick,
+  onCancelClick,
+  onEditClick,
+}) => {
+  const { formatMessage } = useIntl();
+  const onSubmitForm = isEditMode ? onEditClick : onCreateClick;
+
+  return (
+    <div
+      className="configuration-card"
+      data-testid="experiment-configuration-form"
+    >
+      <div className="configuration-card-header">
+        <h3>{formatMessage(messages.experimentConfigurationName)}*</h3>
+        {isEditMode && (
+          <span className="text-gray-500">
+            {formatMessage(messages.experimentConfigurationId, {
+              id: initialValues.id,
+            })}
+          </span>
+        )}
+      </div>
+      <Formik
+        initialValues={initialValues}
+        validationSchema={experimentFormValidationSchema(formatMessage)}
+        validateOnChange={false}
+        validateOnBlur={false}
+        onSubmit={onSubmitForm}
+      >
+        {({
+          values, errors, dirty, handleChange, handleSubmit,
+        }) => (
+          <>
+            <Form.Group
+              className="mt-3 configuration-form-group"
+              isInvalid={!!errors.name}
+            >
+              <Form.Control
+                value={values.name}
+                name="name"
+                onChange={handleChange}
+                placeholder={formatMessage(
+                  messages.experimentConfigurationNamePlaceholder,
+                )}
+              />
+              <Form.Control.Feedback hasIcon={false} type="default">
+                {formatMessage(messages.experimentConfigurationNameFeedback)}
+              </Form.Control.Feedback>
+              {errors.name && (
+                <Form.Control.Feedback hasIcon={false} type="invalid">
+                  {errors.name}
+                </Form.Control.Feedback>
+              )}
+            </Form.Group>
+
+            <Form.Group className="configuration-form-group">
+              <Form.Label>
+                {formatMessage(messages.experimentConfigurationDescription)}
+              </Form.Label>
+              <Form.Control
+                value={values.description}
+                name="description"
+                onChange={handleChange}
+                placeholder={formatMessage(
+                  messages.experimentConfigurationDescriptionPlaceholder,
+                )}
+                as="textarea"
+              />
+              <Form.Control.Feedback hasIcon={false} type="default">
+                {formatMessage(
+                  messages.experimentConfigurationDescriptionFeedback,
+                )}
+              </Form.Control.Feedback>
+            </Form.Group>
+
+            <FieldArray
+              name="groups"
+              render={(arrayHelpers) => (
+                <ExperimentFormGroups
+                  groups={values.groups}
+                  errors={errors.groups}
+                  onChange={handleChange}
+                  onDeleteGroup={(idx) => arrayHelpers.remove(idx)}
+                  onCreateGroup={(newGroup) => arrayHelpers.push(newGroup)}
+                />
+              )}
+            />
+
+            {isUsedInLocation && (
+              <Alert
+                variant="warning"
+                icon={WarningFilledIcon}
+                className="my-3"
+              >
+                <p>{formatMessage(messages.experimentConfigurationAlert)}</p>
+              </Alert>
+            )}
+            <ActionRow data-testid="experiment-configuration-actions">
+              <Button onClick={onCancelClick} variant="tertiary">
+                {formatMessage(messages.experimentConfigurationCancel)}
+              </Button>
+              <Button onClick={handleSubmit}>
+                {formatMessage(
+                  isEditMode
+                    ? messages.experimentConfigurationSave
+                    : messages.experimentConfigurationCreate,
+                )}
+              </Button>
+            </ActionRow>
+            <PromptIfDirty dirty={dirty} />
+          </>
+        )}
+      </Formik>
+    </div>
+  );
+};
+
+ExperimentForm.defaultProps = {
+  isEditMode: false,
+  isUsedInLocation: false,
+  onCreateClick: null,
+  onEditClick: null,
+};
+
+ExperimentForm.propTypes = {
+  isEditMode: PropTypes.bool,
+  initialValues: PropTypes.shape({
+    id: PropTypes.number,
+    name: PropTypes.string,
+    description: PropTypes.string,
+    groups: PropTypes.arrayOf(
+      PropTypes.shape({
+        id: PropTypes.number,
+        groupName: PropTypes.string,
+      }),
+    ),
+  }).isRequired,
+  isUsedInLocation: PropTypes.bool,
+  onCreateClick: PropTypes.func,
+  onCancelClick: PropTypes.func.isRequired,
+  onEditClick: PropTypes.func,
+};
+
+export default ExperimentForm;
diff --git a/src/group-configurations/experiment-configurations-section/ExperimentForm.test.jsx b/src/group-configurations/experiment-configurations-section/ExperimentForm.test.jsx
new file mode 100644
index 0000000000..58ec1e8047
--- /dev/null
+++ b/src/group-configurations/experiment-configurations-section/ExperimentForm.test.jsx
@@ -0,0 +1,236 @@
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import userEvent from '@testing-library/user-event';
+import { render, waitFor } from '@testing-library/react';
+
+import { experimentGroupConfigurationsMock } from '../__mocks__';
+import messages from './messages';
+import { initialExperimentConfiguration } from './constants';
+import ExperimentForm from './ExperimentForm';
+
+const onCreateClickMock = jest.fn();
+const onCancelClickMock = jest.fn();
+const onEditClickMock = jest.fn();
+
+const experimentConfiguration = experimentGroupConfigurationsMock[0];
+
+const renderComponent = (props = {}) => render(
+  <IntlProvider locale="en">
+    <ExperimentForm
+      initialValues={initialExperimentConfiguration}
+      onCreateClick={onCreateClickMock}
+      onCancelClick={onCancelClickMock}
+      onEditClick={onEditClickMock}
+      {...props}
+    />
+  </IntlProvider>,
+);
+
+describe('<ExperimentForm />', () => {
+  it('renders component correctly', () => {
+    const { getByText, getByRole, getByTestId } = renderComponent();
+
+    expect(getByTestId('experiment-configuration-form')).toBeInTheDocument();
+    expect(
+      getByText(`${messages.experimentConfigurationName.defaultMessage}*`),
+    ).toBeInTheDocument();
+    expect(
+      getByRole('button', {
+        name: messages.experimentConfigurationCancel.defaultMessage,
+      }),
+    ).toBeInTheDocument();
+    expect(
+      getByRole('button', {
+        name: messages.experimentConfigurationCreate.defaultMessage,
+      }),
+    ).toBeInTheDocument();
+  });
+
+  it('renders component in edit mode', () => {
+    const { getByText, getByRole } = renderComponent({
+      isEditMode: true,
+      initialValues: experimentConfiguration,
+    });
+
+    expect(
+      getByText(
+        messages.experimentConfigurationId.defaultMessage.replace(
+          '{id}',
+          experimentConfiguration.id,
+        ),
+      ),
+    ).toBeInTheDocument();
+    expect(
+      getByRole('button', {
+        name: messages.experimentConfigurationSave.defaultMessage,
+      }),
+    ).toBeInTheDocument();
+  });
+
+  it('shows alert if group is used in location with edit mode', () => {
+    const { getByText } = renderComponent({
+      isEditMode: true,
+      initialValues: experimentConfiguration,
+      isUsedInLocation: true,
+    });
+    expect(
+      getByText(messages.experimentConfigurationAlert.defaultMessage),
+    ).toBeInTheDocument();
+  });
+
+  it('calls onCreateClick when the "Create" button is clicked with a valid form', async () => {
+    const { getByRole, getByPlaceholderText } = renderComponent();
+    const nameInput = getByPlaceholderText(
+      messages.experimentConfigurationNamePlaceholder.defaultMessage,
+    );
+    const descriptionInput = getByPlaceholderText(
+      messages.experimentConfigurationNamePlaceholder.defaultMessage,
+    );
+    userEvent.type(nameInput, 'New name of the group configuration');
+    userEvent.type(
+      descriptionInput,
+      'New description of the group configuration',
+    );
+    const createButton = getByRole('button', {
+      name: messages.experimentConfigurationCreate.defaultMessage,
+    });
+    expect(createButton).toBeInTheDocument();
+    userEvent.click(createButton);
+
+    await waitFor(() => {
+      expect(onCreateClickMock).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  it('shows error when the "Create" button is clicked with empty name', async () => {
+    const { getByRole, getByPlaceholderText, getByText } = renderComponent();
+    const nameInput = getByPlaceholderText(
+      messages.experimentConfigurationNamePlaceholder.defaultMessage,
+    );
+    userEvent.type(nameInput, '');
+
+    const createButton = getByRole('button', {
+      name: messages.experimentConfigurationCreate.defaultMessage,
+    });
+    expect(createButton).toBeInTheDocument();
+    userEvent.click(createButton);
+
+    await waitFor(() => {
+      expect(
+        getByText(messages.experimentConfigurationNameRequired.defaultMessage),
+      ).toBeInTheDocument();
+    });
+  });
+
+  it('shows error when the "Create" button is clicked without groups', async () => {
+    const experimentConfigurationUpdated = {
+      ...experimentConfiguration,
+      name: 'My group configuration name',
+      groups: [],
+    };
+    const { getByRole, getByText } = renderComponent({
+      initialValues: experimentConfigurationUpdated,
+    });
+    const createButton = getByRole('button', {
+      name: messages.experimentConfigurationCreate.defaultMessage,
+    });
+    expect(createButton).toBeInTheDocument();
+    userEvent.click(createButton);
+
+    await waitFor(() => {
+      expect(
+        getByText(messages.experimentConfigurationGroupsRequired.defaultMessage),
+      ).toBeInTheDocument();
+    });
+  });
+
+  it('shows error when the "Create" button is clicked with duplicate groups', async () => {
+    const experimentConfigurationUpdated = {
+      ...experimentConfiguration,
+      name: 'My group configuration name',
+      groups: [
+        {
+          name: 'Group A',
+        },
+        {
+          name: 'Group A',
+        },
+      ],
+    };
+    const { getByRole, getByText } = renderComponent({
+      initialValues: experimentConfigurationUpdated,
+    });
+    const createButton = getByRole('button', {
+      name: messages.experimentConfigurationCreate.defaultMessage,
+    });
+    expect(createButton).toBeInTheDocument();
+    userEvent.click(createButton);
+
+    await waitFor(() => {
+      expect(
+        getByText(
+          messages.experimentConfigurationGroupsNameUnique.defaultMessage,
+        ),
+      ).toBeInTheDocument();
+    });
+  });
+
+  it('shows error when the "Create" button is clicked with empty name of group', async () => {
+    const experimentConfigurationUpdated = {
+      ...experimentConfiguration,
+      name: 'My group configuration name',
+      groups: [
+        {
+          name: '',
+        },
+      ],
+    };
+    const { getByRole, getByText } = renderComponent({
+      initialValues: experimentConfigurationUpdated,
+    });
+    const createButton = getByRole('button', {
+      name: messages.experimentConfigurationCreate.defaultMessage,
+    });
+    expect(createButton).toBeInTheDocument();
+    userEvent.click(createButton);
+
+    await waitFor(() => {
+      expect(
+        getByText(
+          messages.experimentConfigurationGroupsNameRequired.defaultMessage,
+        ),
+      ).toBeInTheDocument();
+    });
+  });
+
+  it('calls onEditClick when the "Save" button is clicked with a valid form', async () => {
+    const { getByRole, getByPlaceholderText } = renderComponent({
+      isEditMode: true,
+      initialValues: experimentConfiguration,
+    });
+    const newConfigurationNameText = 'Updated experiment configuration name';
+    const nameInput = getByPlaceholderText(
+      messages.experimentConfigurationNamePlaceholder.defaultMessage,
+    );
+    userEvent.type(nameInput, newConfigurationNameText);
+    const saveButton = getByRole('button', {
+      name: messages.experimentConfigurationSave.defaultMessage,
+    });
+    expect(saveButton).toBeInTheDocument();
+    userEvent.click(saveButton);
+
+    await waitFor(() => {
+      expect(onEditClickMock).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  it('calls onCancelClick when the "Cancel" button is clicked', async () => {
+    const { getByRole } = renderComponent();
+    const cancelButton = getByRole('button', {
+      name: messages.experimentConfigurationCancel.defaultMessage,
+    });
+    expect(cancelButton).toBeInTheDocument();
+    userEvent.click(cancelButton);
+
+    expect(onCancelClickMock).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/src/group-configurations/experiment-configurations-section/ExperimentFormGroups.jsx b/src/group-configurations/experiment-configurations-section/ExperimentFormGroups.jsx
new file mode 100644
index 0000000000..c20bfe93f1
--- /dev/null
+++ b/src/group-configurations/experiment-configurations-section/ExperimentFormGroups.jsx
@@ -0,0 +1,124 @@
+/* eslint-disable react/no-array-index-key */
+import PropTypes from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Close as CloseIcon, Add as AddIcon } from '@openedx/paragon/icons';
+import {
+  Form, Icon, IconButtonWithTooltip, Stack, Button,
+} from '@openedx/paragon';
+
+import {
+  getNextGroupName,
+  getGroupPercentage,
+  getFormGroupErrors,
+} from './utils';
+import messages from './messages';
+
+const ExperimentFormGroups = ({
+  groups,
+  errors,
+  onChange,
+  onDeleteGroup,
+  onCreateGroup,
+}) => {
+  const { formatMessage } = useIntl();
+  const percentage = getGroupPercentage(groups.length);
+  const { arrayErrors, stringError } = getFormGroupErrors(errors);
+
+  return (
+    <Form.Group className="configuration-form-group">
+      <Form.Label className="font-weight-bold">
+        {formatMessage(messages.experimentConfigurationGroups)}*
+      </Form.Label>
+      <Form.Control.Feedback className="mt-0">
+        {formatMessage(messages.experimentConfigurationGroupsFeedback)}
+      </Form.Control.Feedback>
+      {stringError && (
+        <Form.Control.Feedback type="invalid" hasIcon={false}>
+          {stringError}
+        </Form.Control.Feedback>
+      )}
+      <Stack className="mt-3">
+        {groups.map((group, idx) => {
+          const fieldError = arrayErrors?.[idx]?.name;
+          const isInvalid = !!fieldError;
+
+          return (
+            <Form.Group
+              key={idx}
+              isInvalid={isInvalid}
+              className="configuration-form-group"
+            >
+              <Stack className="align-content-between" direction="horizontal">
+                <Form.Control
+                  name={`groups[${idx}].name`}
+                  value={group.name}
+                  onChange={onChange}
+                />
+                <div className="experiment-configuration-form-percentage">
+                  {percentage}
+                </div>
+                <IconButtonWithTooltip
+                  size="sm"
+                  tooltipContent={formatMessage(
+                    messages.experimentConfigurationGroupsTooltip,
+                  )}
+                  src={CloseIcon}
+                  iconAs={Icon}
+                  alt={formatMessage(
+                    messages.experimentConfigurationGroupsTooltip,
+                  )}
+                  onClick={() => onDeleteGroup(idx)}
+                />
+              </Stack>
+              {isInvalid && (
+                <Form.Control.Feedback type="invalid" hasIcon={false}>
+                  {fieldError}
+                </Form.Control.Feedback>
+              )}
+            </Form.Group>
+          );
+        })}
+      </Stack>
+      <Button
+        variant="outline-primary"
+        onClick={() => onCreateGroup(getNextGroupName(groups))}
+        iconBefore={AddIcon}
+        block
+      >
+        {formatMessage(messages.experimentConfigurationGroupsAdd)}
+      </Button>
+    </Form.Group>
+  );
+};
+
+ExperimentFormGroups.defaultProps = {
+  errors: [],
+};
+
+ExperimentFormGroups.propTypes = {
+  groups: PropTypes.arrayOf(
+    PropTypes.shape({
+      name: PropTypes.string,
+      version: PropTypes.number,
+      usage: PropTypes.arrayOf(
+        PropTypes.shape({
+          label: PropTypes.string,
+          url: PropTypes.string,
+          validation: PropTypes.shape({
+            type: PropTypes.string,
+            text: PropTypes.string,
+          }),
+        }),
+      ),
+    }),
+  ).isRequired,
+  onChange: PropTypes.func.isRequired,
+  onDeleteGroup: PropTypes.func.isRequired,
+  onCreateGroup: PropTypes.func.isRequired,
+  errors: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.shape({ name: PropTypes.string })),
+    PropTypes.string,
+  ]),
+};
+
+export default ExperimentFormGroups;
diff --git a/src/group-configurations/experiment-configurations-section/constants.js b/src/group-configurations/experiment-configurations-section/constants.js
new file mode 100644
index 0000000000..70ed39bc88
--- /dev/null
+++ b/src/group-configurations/experiment-configurations-section/constants.js
@@ -0,0 +1,18 @@
+export const ALPHABET_LETTERS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+export const initialExperimentConfiguration = {
+  name: '',
+  description: '',
+  groups: [
+    {
+      name: 'Group A', version: 1, usage: [], idx: 0,
+    },
+    {
+      name: 'Group B', version: 1, usage: [], idx: 1,
+    },
+  ],
+  scheme: 'random',
+  parameters: {},
+  usage: [],
+  active: true,
+  version: 1,
+};
diff --git a/src/group-configurations/experiment-configurations-section/index.jsx b/src/group-configurations/experiment-configurations-section/index.jsx
new file mode 100644
index 0000000000..1439d8f3fa
--- /dev/null
+++ b/src/group-configurations/experiment-configurations-section/index.jsx
@@ -0,0 +1,117 @@
+import PropTypes from 'prop-types';
+import { Button, useToggle } from '@openedx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Add as AddIcon } from '@openedx/paragon/icons';
+
+import { useScrollToHashElement } from '../../hooks';
+import EmptyPlaceholder from '../empty-placeholder';
+import ExperimentForm from './ExperimentForm';
+import ExperimentCard from './ExperimentCard';
+import { initialExperimentConfiguration } from './constants';
+import messages from './messages';
+
+const ExperimentConfigurationsSection = ({
+  courseId,
+  availableGroups,
+  experimentConfigurationActions,
+}) => {
+  const { formatMessage } = useIntl();
+  const [
+    isNewConfigurationVisible,
+    openNewConfiguration,
+    hideNewConfiguration,
+  ] = useToggle(false);
+
+  const handleCreateConfiguration = (configuration) => {
+    experimentConfigurationActions.handleCreate(configuration, hideNewConfiguration);
+  };
+
+  const { elementWithHash } = useScrollToHashElement({ courseId, isLoading: true });
+
+  return (
+    <div className="mt-2.5">
+      <h2 className="lead text-black mb-3 configuration-section-name">
+        {formatMessage(messages.title)}
+      </h2>
+      {availableGroups.length ? (
+        <>
+          {availableGroups.map((configuration) => (
+            <ExperimentCard
+              key={configuration.id}
+              configuration={configuration}
+              experimentConfigurationActions={experimentConfigurationActions}
+              isExpandedByDefault={configuration.id === +elementWithHash}
+              onCreate={handleCreateConfiguration}
+            />
+          ))}
+          {!isNewConfigurationVisible && (
+            <Button
+              className="mt-4"
+              variant="outline-primary"
+              onClick={openNewConfiguration}
+              iconBefore={AddIcon}
+              block
+            >
+              {formatMessage(messages.addNewGroup)}
+            </Button>
+          )}
+        </>
+      ) : (
+        !isNewConfigurationVisible && (
+          <EmptyPlaceholder
+            onCreateNewGroup={openNewConfiguration}
+            isExperiment
+          />
+        )
+      )}
+      {isNewConfigurationVisible && (
+        <ExperimentForm
+          initialValues={initialExperimentConfiguration}
+          onCreateClick={handleCreateConfiguration}
+          onCancelClick={hideNewConfiguration}
+        />
+      )}
+    </div>
+  );
+};
+
+ExperimentConfigurationsSection.defaultProps = {
+  availableGroups: [],
+};
+
+ExperimentConfigurationsSection.propTypes = {
+  availableGroups: PropTypes.arrayOf(
+    PropTypes.shape({
+      active: PropTypes.bool,
+      description: PropTypes.string,
+      groups: PropTypes.arrayOf(
+        PropTypes.shape({
+          id: PropTypes.number,
+          name: PropTypes.string,
+          usage: PropTypes.arrayOf(
+            PropTypes.shape({
+              label: PropTypes.string,
+              url: PropTypes.string,
+            }),
+          ),
+          version: PropTypes.number,
+        }).isRequired,
+      ),
+      id: PropTypes.number,
+      name: PropTypes.string,
+      parameters: PropTypes.shape({
+        courseId: PropTypes.string,
+      }),
+      readOnly: PropTypes.bool,
+      scheme: PropTypes.string,
+      version: PropTypes.number,
+    }).isRequired,
+  ),
+  experimentConfigurationActions: PropTypes.shape({
+    handleCreate: PropTypes.func,
+    handleDelete: PropTypes.func,
+  }).isRequired,
+  courseId: PropTypes.string.isRequired,
+};
+
+export default ExperimentConfigurationsSection;
diff --git a/src/group-configurations/experiment-configurations-section/messages.js b/src/group-configurations/experiment-configurations-section/messages.js
new file mode 100644
index 0000000000..d2370226c7
--- /dev/null
+++ b/src/group-configurations/experiment-configurations-section/messages.js
@@ -0,0 +1,146 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  title: {
+    id: 'course-authoring.group-configurations.experiment-configuration.title',
+    defaultMessage: 'Experiment group configurations',
+    description: 'Title for the page displaying experiment group configurations.',
+  },
+  addNewGroup: {
+    id: 'course-authoring.group-configurations.experiment-group.add-new-group',
+    defaultMessage: 'New group configuration',
+    description: 'Label for adding a new experiment group configuration.',
+  },
+  experimentConfigurationName: {
+    id: 'course-authoring.group-configurations.experiment-configuration.container.name',
+    defaultMessage: 'Group configuration name',
+    description: 'Label for the input field to enter the name of an experiment group configuration.',
+  },
+  experimentConfigurationId: {
+    id: 'course-authoring.group-configurations.experiment-configuration.container.id',
+    defaultMessage: 'Group configuration ID {id}',
+    description: 'Label displaying the ID of an experiment group configuration.',
+  },
+  experimentConfigurationNameFeedback: {
+    id: 'course-authoring.group-configurations.experiment-configuration.container.name.feedback',
+    defaultMessage: 'Name or short description of the configuration.',
+    description: 'Feedback message for the name/description input field of an experiment group configuration.',
+  },
+  experimentConfigurationNamePlaceholder: {
+    id: 'course-authoring.group-configurations.experiment-configuration.container.name.placeholder',
+    defaultMessage: 'This is the name of the group configuration',
+    description: 'Placeholder text for the name input field of an experiment group configuration.',
+  },
+  experimentConfigurationNameRequired: {
+    id: 'course-authoring.group-configurations.experiment-configuration.container.name.required',
+    defaultMessage: 'Group configuration name is required.',
+    description: 'Error message displayed when the name of the experiment group configuration is required but not provided.',
+  },
+  experimentConfigurationDescription: {
+    id: 'course-authoring.group-configurations.experiment-configuration.container.description',
+    defaultMessage: 'Description',
+    description: 'Label for the description input field of an experiment group configuration.',
+  },
+  experimentConfigurationDescriptionFeedback: {
+    id: 'course-authoring.group-configurations.experiment-configuration.container.description.feedback',
+    defaultMessage: 'Optional long description.',
+    description: 'Feedback message for the description input field of an experiment group configuration.',
+  },
+  experimentConfigurationDescriptionPlaceholder: {
+    id: 'course-authoring.group-configurations.experiment-configuration.container.description.placeholder',
+    defaultMessage: 'This is the description of the group configuration',
+    description: 'Placeholder text for the description input field of an experiment group configuration.',
+  },
+  experimentConfigurationGroups: {
+    id: 'course-authoring.group-configurations.experiment-configuration.container.groups',
+    defaultMessage: 'Groups',
+    description: 'Label for the section displaying groups within an experiment group configuration.',
+  },
+  experimentConfigurationGroupsFeedback: {
+    id: 'course-authoring.group-configurations.experiment-configuration.container.groups.feedback',
+    defaultMessage: 'Name of the groups that students will be assigned to, for example, Control, Video, Problems. You must have two or more groups.',
+    description: 'Feedback message for the groups section of an experiment group configuration.',
+  },
+  experimentConfigurationGroupsNameRequired: {
+    id: 'course-authoring.group-configurations.experiment-configuration.container.groups.name.required',
+    defaultMessage: 'All groups must have a name.',
+    description: 'Error message displayed when the name of a group within an experiment group configuration is required but not provided.',
+  },
+  experimentConfigurationGroupsNameUnique: {
+    id: 'course-authoring.group-configurations.experiment-configuration.container.groups.name.unique',
+    defaultMessage: 'All groups must have a unique name.',
+    description: 'Error message displayed when the names of groups within an experiment group configuration are not unique.',
+  },
+  experimentConfigurationGroupsRequired: {
+    id: 'course-authoring.group-configurations.experiment-configuration.container.groups.required',
+    defaultMessage: 'There must be at least one group.',
+    description: 'Error message displayed when at least one group is required within an experiment group configuration.',
+  },
+  experimentConfigurationGroupsTooltip: {
+    id: 'course-authoring.group-configurations.experiment-configuration.container.groups.tooltip',
+    defaultMessage: 'Delete',
+    description: 'Tooltip message for the delete action within the groups section of an experiment group configuration.',
+  },
+  experimentConfigurationGroupsAdd: {
+    id: 'course-authoring.group-configurations.experiment-configuration.container.groups.add',
+    defaultMessage: 'Add another group',
+    description: 'Label for the button to add another group within the groups section of an experiment group configuration.',
+  },
+  experimentConfigurationDeleteRestriction: {
+    id: 'course-authoring.group-configurations.experiment-configuration.container.delete.restriction',
+    defaultMessage: 'Cannot delete when in use by an experiment',
+    description: 'Error message indicating that an experiment group configuration cannot be deleted because it is currently in use by an experiment.',
+  },
+  experimentConfigurationCancel: {
+    id: 'course-authoring.group-configurations.experiment-configuration.container.cancel',
+    defaultMessage: 'Cancel',
+    description: 'Label for the cancel button within an experiment group configuration.',
+  },
+  experimentConfigurationSave: {
+    id: 'course-authoring.group-configurations.experiment-configuration.container.save',
+    defaultMessage: 'Save',
+    description: 'Label for the save button within an experiment group configuration.',
+  },
+  experimentConfigurationCreate: {
+    id: 'course-authoring.group-configurations.experiment-configuration.container.create',
+    defaultMessage: 'Create',
+    description: 'Label for the create button within an experiment group configuration.',
+  },
+  experimentConfigurationAlert: {
+    id: 'course-authoring.group-configurations.experiment-configuration.container.alert',
+    defaultMessage: 'This configuration is currently used in content experiments. If you make changes to the groups, you may need to edit those experiments.',
+    description: 'Alert message indicating that an experiment group configuration is currently used in content experiments and that changes may require editing those experiments.',
+  },
+  emptyExperimentGroup: {
+    id: 'course-authoring.group-configurations.experiment-card.empty-experiment-group',
+    defaultMessage: 'This group configuration is not in use. Start by adding a content experiment to any Unit via the {outlineComponentLink}.',
+    description: 'Message displayed when an experiment group configuration is not in use and suggests adding a content experiment.',
+  },
+  courseOutline: {
+    id: 'course-authoring.group-configurations.experiment-card.course-outline',
+    defaultMessage: 'Course outline',
+    description: 'Label for the course outline section within an experiment card.',
+  },
+  actionEdit: {
+    id: 'course-authoring.group-configurations.experiment-card.action.edit',
+    defaultMessage: 'Edit',
+    description: 'Label for the edit action within an experiment card.',
+  },
+  actionDelete: {
+    id: 'course-authoring.group-configurations.experiment-card.action.delete',
+    defaultMessage: 'Delete',
+    description: 'Label for the delete action within an experiment card.',
+  },
+  subtitleModalDelete: {
+    id: 'course-authoring.group-configurations.experiment-card.delete-modal.subtitle',
+    defaultMessage: 'group configurations',
+    description: 'Subtitle for the delete modal indicating the type of entity being deleted.',
+  },
+  deleteRestriction: {
+    id: 'course-authoring.group-configurations.experiment-card.delete-restriction',
+    defaultMessage: 'Cannot delete when in use by a unit',
+    description: 'Error message indicating that an experiment card cannot be deleted because it is currently in use by a unit.',
+  },
+});
+
+export default messages;
diff --git a/src/group-configurations/experiment-configurations-section/utils.js b/src/group-configurations/experiment-configurations-section/utils.js
new file mode 100644
index 0000000000..18d070ecf6
--- /dev/null
+++ b/src/group-configurations/experiment-configurations-section/utils.js
@@ -0,0 +1,73 @@
+import { isArray } from 'lodash';
+
+import { ALPHABET_LETTERS } from './constants';
+
+/**
+ * Generates the next unique group name based on existing group names.
+ * @param {Array} groups - An array of group objects.
+ * @param {string} groupFieldName - Optional. The name of the field containing the group name. Default is 'name'.
+ * @returns {Object} An object containing the next unique group name, along with additional information.
+ */
+const getNextGroupName = (groups, groupFieldName = 'name') => {
+  const existingGroupNames = groups.map((group) => group.name);
+  const lettersCount = ALPHABET_LETTERS.length;
+
+  // Calculate the maximum index of existing groups
+  const maxIdx = groups.reduce((max, group) => Math.max(max, group.idx), -1);
+
+  // Calculate the next index for the new group
+  const nextIndex = maxIdx + 1;
+
+  let groupName = '';
+  let counter = 0;
+
+  do {
+    let tempIndex = nextIndex + counter;
+    groupName = '';
+    while (tempIndex >= 0) {
+      groupName = ALPHABET_LETTERS[tempIndex % lettersCount] + groupName;
+      tempIndex = Math.floor(tempIndex / lettersCount) - 1;
+    }
+    counter++;
+  } while (existingGroupNames.includes(`Group ${groupName}`));
+
+  return {
+    [groupFieldName]: `Group ${groupName}`, version: 1, usage: [], idx: nextIndex,
+  };
+};
+
+/**
+ * Calculates the percentage of groups values of total groups.
+ * @param {number} totalGroups - Total number of groups.
+ * @returns {string} The percentage of groups, each group has the same value.
+ */
+const getGroupPercentage = (totalGroups) => (totalGroups === 0 ? '0%' : `${Math.floor(100 / totalGroups)}%`);
+
+/**
+ * Checks if all group names in the array are unique.
+ * @param {Array} groups - An array of group objects.
+ * @returns {boolean} True if all group names are unique, otherwise false.
+ */
+const allGroupNamesAreUnique = (groups) => {
+  const names = groups.map((group) => group.name);
+  return new Set(names).size === names.length;
+};
+
+/**
+ * Formats form group errors into an object. Because we need to handle both type errors.
+ * @param {Array|string} errors - The form group errors.
+ * @returns {Object} An object containing arrayErrors and stringError properties.
+ */
+const getFormGroupErrors = (errors) => {
+  const arrayErrors = isArray(errors) ? errors : [];
+  const stringError = isArray(errors) ? '' : errors || '';
+
+  return { arrayErrors, stringError };
+};
+
+export {
+  allGroupNamesAreUnique,
+  getNextGroupName,
+  getGroupPercentage,
+  getFormGroupErrors,
+};
diff --git a/src/group-configurations/experiment-configurations-section/utils.test.js b/src/group-configurations/experiment-configurations-section/utils.test.js
new file mode 100644
index 0000000000..4e0e5f9272
--- /dev/null
+++ b/src/group-configurations/experiment-configurations-section/utils.test.js
@@ -0,0 +1,174 @@
+import {
+  allGroupNamesAreUnique,
+  getNextGroupName,
+  getGroupPercentage,
+} from './utils';
+
+describe('utils module', () => {
+  describe('getNextGroupName', () => {
+    it('return correct next group name test-case-1', () => {
+      const groups = [
+        {
+          name: 'Group A', idx: 0,
+        },
+        {
+          name: 'Group B', idx: 1,
+        },
+      ];
+      const nextGroup = getNextGroupName(groups);
+      expect(nextGroup.name).toBe('Group C');
+      expect(nextGroup.idx).toBe(2);
+    });
+
+    it('return correct next group name test-case-2', () => {
+      const groups = [];
+      const nextGroup = getNextGroupName(groups);
+      expect(nextGroup.name).toBe('Group A');
+      expect(nextGroup.idx).toBe(0);
+    });
+
+    it('return correct next group name test-case-3', () => {
+      const groups = [
+        {
+          name: 'Some group', idx: 0,
+        },
+        {
+          name: 'Group B', idx: 1,
+        },
+      ];
+      const nextGroup = getNextGroupName(groups);
+      expect(nextGroup.name).toBe('Group C');
+      expect(nextGroup.idx).toBe(2);
+    });
+
+    it('return correct next group name test-case-4', () => {
+      const groups = [
+        {
+          name: 'Group A', idx: 0,
+        },
+        {
+          name: 'Group A', idx: 1,
+        },
+      ];
+      const nextGroup = getNextGroupName(groups);
+      expect(nextGroup.name).toBe('Group C');
+      expect(nextGroup.idx).toBe(2);
+    });
+
+    it('return correct next group name test-case-5', () => {
+      const groups = [
+        {
+          name: 'Group A', idx: 0,
+        },
+        {
+          name: 'Group C', idx: 1,
+        },
+        {
+          name: 'Group B', idx: 2,
+        },
+      ];
+      const nextGroup = getNextGroupName(groups);
+      expect(nextGroup.name).toBe('Group D');
+      expect(nextGroup.idx).toBe(3);
+    });
+
+    it('return correct next group name test-case-6', () => {
+      const groups = [
+        {
+          name: '', idx: 0,
+        },
+        {
+          name: '', idx: 1,
+        },
+      ];
+      const nextGroup = getNextGroupName(groups);
+      expect(nextGroup.name).toBe('Group C');
+      expect(nextGroup.idx).toBe(2);
+    });
+
+    it('return correct next group name test-case-7', () => {
+      const groups = [
+        {
+          name: 'Group A', idx: 0,
+        },
+        {
+          name: 'Group C', idx: 1,
+        },
+      ];
+      const nextGroup = getNextGroupName(groups);
+      expect(nextGroup.name).toBe('Group D');
+      expect(nextGroup.idx).toBe(2);
+    });
+
+    it('return correct next group name test-case-8', () => {
+      const groups = [
+        {
+          name: 'Group D', idx: 0,
+        },
+      ];
+      const nextGroup = getNextGroupName(groups);
+      expect(nextGroup.name).toBe('Group B');
+      expect(nextGroup.idx).toBe(1);
+    });
+
+    it('return correct next group name test-case-9', () => {
+      const groups = [
+        {
+          name: 'Group E', idx: 4,
+        },
+      ];
+      const nextGroup = getNextGroupName(groups);
+      expect(nextGroup.name).toBe('Group F');
+    });
+
+    it('return correct next group name test-case-10', () => {
+      const groups = [
+        {
+          name: 'Group E', idx: 0,
+        },
+      ];
+      const nextGroup = getNextGroupName(groups);
+      expect(nextGroup.name).toBe('Group B');
+    });
+
+    it('return correct next group name test-case-11', () => {
+      const simulatedGroupWithAlphabetLength = Array.from(
+        { length: 26 },
+        (_, idx) => ({ name: 'Test name', idx }),
+      );
+      const nextGroup = getNextGroupName(simulatedGroupWithAlphabetLength);
+      expect(nextGroup.name).toBe('Group AA');
+    });
+
+    it('return correct next group name test-case-12', () => {
+      const simulatedGroupWithAlphabetLength = Array.from(
+        { length: 702 },
+        (_, idx) => ({ name: 'Test name', idx }),
+      );
+      const nextGroup = getNextGroupName(simulatedGroupWithAlphabetLength);
+      expect(nextGroup.name).toBe('Group AAA');
+    });
+  });
+
+  describe('getGroupPercentage', () => {
+    it('calculates group percentage correctly', () => {
+      expect(getGroupPercentage(1)).toBe('100%');
+      expect(getGroupPercentage(7)).toBe('14%');
+      expect(getGroupPercentage(10)).toBe('10%');
+      expect(getGroupPercentage(26)).toBe('3%');
+      expect(getGroupPercentage(100)).toBe('1%');
+    });
+  });
+
+  describe('allGroupNamesAreUnique', () => {
+    it('returns true if all group names are unique', () => {
+      const groups = [{ name: 'A' }, { name: 'B' }, { name: 'C' }];
+      expect(allGroupNamesAreUnique(groups)).toBe(true);
+    });
+
+    it('returns false if any group names are not unique', () => {
+      const groups = [{ name: 'A' }, { name: 'B' }, { name: 'A' }];
+      expect(allGroupNamesAreUnique(groups)).toBe(false);
+    });
+  });
+});
diff --git a/src/group-configurations/experiment-configurations-section/validation.js b/src/group-configurations/experiment-configurations-section/validation.js
new file mode 100644
index 0000000000..64ca594dc1
--- /dev/null
+++ b/src/group-configurations/experiment-configurations-section/validation.js
@@ -0,0 +1,44 @@
+import * as Yup from 'yup';
+
+import messages from './messages';
+import { allGroupNamesAreUnique } from './utils';
+
+export const experimentFormValidationSchema = (formatMessage) => Yup.object().shape({
+  id: Yup.number(),
+  name: Yup.string()
+    .trim()
+    .required(formatMessage(messages.experimentConfigurationNameRequired)),
+  description: Yup.string(),
+  groups: Yup.array()
+    .of(
+      Yup.object().shape({
+        id: Yup.number(),
+        name: Yup.string()
+          .trim()
+          .required(
+            formatMessage(messages.experimentConfigurationGroupsNameRequired),
+          ),
+        version: Yup.number(),
+        usage: Yup.array().nullable(true),
+      }),
+    )
+    .required()
+    .min(1, formatMessage(messages.experimentConfigurationGroupsRequired))
+    .test(
+      'unique-group-name-restriction',
+      formatMessage(messages.experimentConfigurationGroupsNameUnique),
+      (values) => allGroupNamesAreUnique(values),
+    ),
+  scheme: Yup.string(),
+  version: Yup.number(),
+  parameters: Yup.object(),
+  usage: Yup.array()
+    .of(
+      Yup.object().shape({
+        label: Yup.string(),
+        url: Yup.string(),
+      }),
+    )
+    .nullable(true),
+  active: Yup.bool(),
+});
diff --git a/src/group-configurations/group-configuration-sidebar/GroupConfigurationSidebar.test.jsx b/src/group-configurations/group-configuration-sidebar/GroupConfigurationSidebar.test.jsx
new file mode 100644
index 0000000000..eb5cb99886
--- /dev/null
+++ b/src/group-configurations/group-configuration-sidebar/GroupConfigurationSidebar.test.jsx
@@ -0,0 +1,104 @@
+import { render } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { initializeMockApp } from '@edx/frontend-platform';
+import { AppProvider } from '@edx/frontend-platform/react';
+
+import initializeStore from '../../store';
+import GroupConfigurationSidebar from '.';
+import messages from './messages';
+
+let store;
+const courseId = 'course-123';
+const enrollmentTrackTitle = messages.about_3_title.defaultMessage;
+const contentGroupTitle = messages.aboutTitle.defaultMessage;
+const experimentGroupTitle = messages.about_2_title.defaultMessage;
+
+jest.mock('@edx/frontend-platform/i18n', () => ({
+  ...jest.requireActual('@edx/frontend-platform/i18n'),
+  useIntl: () => ({
+    formatMessage: (message) => message.defaultMessage,
+  }),
+}));
+
+const renderComponent = (props) => render(
+  <AppProvider store={store} messages={{}}>
+    <IntlProvider locale="en">
+      <GroupConfigurationSidebar courseId={courseId} {...props} />
+    </IntlProvider>,
+  </AppProvider>,
+);
+
+describe('GroupConfigurationSidebar', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+    store = initializeStore();
+  });
+
+  it('renders all groups when all props are true', async () => {
+    const { findAllByRole } = renderComponent({
+      shouldShowExperimentGroups: true,
+      shouldShowContentGroup: true,
+      shouldShowEnrollmentTrackGroup: true,
+    });
+    const titles = await findAllByRole('heading', { level: 4 });
+
+    expect(titles[0]).toHaveTextContent(enrollmentTrackTitle);
+    expect(titles[1]).toHaveTextContent(contentGroupTitle);
+    expect(titles[2]).toHaveTextContent(experimentGroupTitle);
+  });
+
+  it('renders no groups when all props are false', async () => {
+    const { queryByText } = renderComponent({
+      shouldShowExperimentGroups: false,
+      shouldShowContentGroup: false,
+      shouldShowEnrollmentTrackGroup: false,
+    });
+
+    expect(queryByText(enrollmentTrackTitle)).not.toBeInTheDocument();
+    expect(queryByText(contentGroupTitle)).not.toBeInTheDocument();
+    expect(queryByText(experimentGroupTitle)).not.toBeInTheDocument();
+  });
+
+  it('renders only content group when shouldShowContentGroup is true', async () => {
+    const { queryByText, getByText } = renderComponent({
+      shouldShowExperimentGroups: false,
+      shouldShowContentGroup: true,
+      shouldShowEnrollmentTrackGroup: false,
+    });
+
+    expect(queryByText(enrollmentTrackTitle)).not.toBeInTheDocument();
+    expect(getByText(contentGroupTitle)).toBeInTheDocument();
+    expect(queryByText(experimentGroupTitle)).not.toBeInTheDocument();
+  });
+
+  it('renders only experiment group when shouldShowExperimentGroups is true', async () => {
+    const { queryByText, getByText } = renderComponent({
+      shouldShowExperimentGroups: true,
+      shouldShowContentGroup: false,
+      shouldShowEnrollmentTrackGroup: false,
+    });
+
+    expect(queryByText(enrollmentTrackTitle)).not.toBeInTheDocument();
+    expect(queryByText(contentGroupTitle)).not.toBeInTheDocument();
+    expect(getByText(experimentGroupTitle)).toBeInTheDocument();
+  });
+
+  it('renders only enrollment track group when shouldShowEnrollmentTrackGroup is true', async () => {
+    const { queryByText, getByText } = renderComponent({
+      shouldShowExperimentGroups: false,
+      shouldShowContentGroup: false,
+      shouldShowEnrollmentTrackGroup: true,
+    });
+
+    expect(getByText(enrollmentTrackTitle)).toBeInTheDocument();
+    expect(queryByText(contentGroupTitle)).not.toBeInTheDocument();
+    expect(queryByText(experimentGroupTitle)).not.toBeInTheDocument();
+  });
+});
diff --git a/src/group-configurations/group-configuration-sidebar/index.jsx b/src/group-configurations/group-configuration-sidebar/index.jsx
new file mode 100644
index 0000000000..99dbf6bc4b
--- /dev/null
+++ b/src/group-configurations/group-configuration-sidebar/index.jsx
@@ -0,0 +1,59 @@
+import { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Hyperlink } from '@openedx/paragon';
+
+import { HelpSidebar } from '../../generic/help-sidebar';
+import { useHelpUrls } from '../../help-urls/hooks';
+import { getSidebarData } from './utils';
+import messages from './messages';
+
+const GroupConfigurationSidebar = ({
+  courseId, shouldShowExperimentGroups, shouldShowContentGroup, shouldShowEnrollmentTrackGroup,
+}) => {
+  const intl = useIntl();
+  const urls = useHelpUrls(['groupConfigurations', 'enrollmentTracks', 'contentGroups']);
+  const sidebarData = getSidebarData({
+    messages, intl, shouldShowExperimentGroups, shouldShowContentGroup, shouldShowEnrollmentTrackGroup,
+  });
+
+  return (
+    <HelpSidebar
+      courseId={courseId}
+      showOtherSettings
+      className="mt-4"
+    >
+      {sidebarData
+        .map(({ title, paragraphs, urlKey }, idx) => (
+          <Fragment key={title}>
+            <h4 className="help-sidebar-about-title">
+              {title}
+            </h4>
+            {paragraphs.map((text) => (
+              <p key={text} className="help-sidebar-about-descriptions">
+                {text}
+              </p>
+            ))}
+            <Hyperlink
+              target="_blank"
+              showLaunchIcon={false}
+              href={urls[urlKey]}
+              className="mt-2 mb-3.5 sidebar-link"
+            >
+              {intl.formatMessage(messages.learnMoreBtn)}
+            </Hyperlink>
+            {idx !== sidebarData.length - 1 && <hr />}
+          </Fragment>
+        ))}
+    </HelpSidebar>
+  );
+};
+
+GroupConfigurationSidebar.propTypes = {
+  courseId: PropTypes.string.isRequired,
+  shouldShowContentGroup: PropTypes.bool.isRequired,
+  shouldShowExperimentGroups: PropTypes.bool.isRequired,
+  shouldShowEnrollmentTrackGroup: PropTypes.bool.isRequired,
+};
+
+export default GroupConfigurationSidebar;
diff --git a/src/group-configurations/group-configuration-sidebar/messages.js b/src/group-configurations/group-configuration-sidebar/messages.js
new file mode 100644
index 0000000000..3404e8c9cb
--- /dev/null
+++ b/src/group-configurations/group-configuration-sidebar/messages.js
@@ -0,0 +1,81 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  aboutTitle: {
+    id: 'course-authoring.group-configurations.sidebar.about.title',
+    defaultMessage: 'Content groups',
+    description: 'Title for the content groups section in the sidebar.',
+  },
+  aboutDescription_1: {
+    id: 'course-authoring.group-configurations.sidebar.about.description-1',
+    defaultMessage: 'If you have cohorts enabled in your course, you can use content groups to create cohort-specific courseware. In other words, you can customize the content that particular cohorts see in your course.',
+    description: 'First description for the content groups section in the sidebar.',
+  },
+  aboutDescription_2: {
+    id: 'course-authoring.group-configurations.sidebar.about.description-2',
+    defaultMessage: 'Each content group that you create can be associated with one or more cohorts. In addition to making course content available to all learners, you can restrict access to some content to learners in specific content groups. Only learners in the cohorts that are associated with the specified content groups see the additional content.',
+    description: 'Second description for the content groups section in the sidebar.',
+  },
+  aboutDescription_3: {
+    id: 'course-authoring.group-configurations.sidebar.about.description-3',
+    defaultMessage: 'Click {strongText} to add a new content group. To edit the name of a content group, hover over its box and click {strongText2}. You can delete a content group only if it is not in use by a unit. To delete a content group, hover over its box and click the delete icon.',
+    description: 'Third description for the content groups section in the sidebar. Mentions how to add, edit, and delete content groups.',
+  },
+  aboutDescription_3_strong: {
+    id: 'course-authoring.group-configurations.sidebar.about.description-3.strong',
+    defaultMessage: 'New content group',
+    description: 'Strong text (button label) used in the third description for adding a new content group.',
+  },
+  about_2_title: {
+    id: 'course-authoring.group-configurations.sidebar.about-2.title',
+    defaultMessage: 'Experiment group configurations',
+    description: 'Title for the experiment group configurations section in the sidebar.',
+  },
+  about_2_description_1: {
+    id: 'course-authoring.group-configurations.sidebar.about-2.description-1',
+    defaultMessage: 'Use experiment group configurations if you are conducting content experiments, also known as A/B testing, in your course. Experiment group configurations define how many groups of learners are in a content experiment. When you create a content experiment for a course, you select the group configuration to use.',
+    description: 'First description for the experiment group configurations section in the sidebar.',
+  },
+  about_2_description_2: {
+    id: 'course-authoring.group-configurations.sidebar.about-2.description-2',
+    defaultMessage: 'Click {strongText} to add a new configuration. To edit a configuration, hover over its box and click {strongText2}. You can delete a group configuration only if it is not in use in an experiment. To delete a configuration, hover over its box and click the delete icon.',
+    description: 'Second description for the experiment group configurations section in the sidebar. Mentions how to add, edit, and delete group configurations.',
+  },
+  about_2_description_2_strong: {
+    id: 'course-authoring.group-configurations.sidebar.about-2.description-2.strong',
+    defaultMessage: 'New group configuration',
+    description: 'Strong text (button label) used in the second description for adding a new group configuration.',
+  },
+  about_3_title: {
+    id: 'course-authoring.group-configurations.sidebar.about-3.title',
+    defaultMessage: 'Enrollment track groups',
+    description: 'Title for the enrollment track groups section in the sidebar.',
+  },
+  about_3_description_1: {
+    id: 'course-authoring.group-configurations.sidebar.about-3.description-1',
+    defaultMessage: 'Enrollment track groups allow you to offer different course content to learners in each enrollment track. Learners enrolled in each enrollment track in your course are automatically included in the corresponding enrollment track group.',
+    description: 'First description for the enrollment track groups section in the sidebar.',
+  },
+  about_3_description_2: {
+    id: 'course-authoring.group-configurations.sidebar.about-3.description-2',
+    defaultMessage: 'On unit pages in the course outline, you can restrict access to components to learners based on their enrollment track.',
+    description: 'Second description for the enrollment track groups section in the sidebar.',
+  },
+  about_3_description_3: {
+    id: 'course-authoring.group-configurations.sidebar.about-3.description-3',
+    defaultMessage: 'You cannot edit enrollment track groups, but you can expand each group to view details of the course content that is designated for learners in the group.',
+    description: 'Third description for the enrollment track groups section in the sidebar. Mentions the limitations and options for managing enrollment track groups.',
+  },
+  aboutDescription_strong_edit: {
+    id: 'course-authoring.group-configurations.sidebar.about.description.strong-edit',
+    defaultMessage: 'edit',
+    description: 'Strong text used to indicate the edit action.',
+  },
+  learnMoreBtn: {
+    id: 'course-authoring.group-configurations.sidebar.learnmore.button',
+    defaultMessage: 'Learn more',
+    description: 'Label for the "Learn more" button in the sidebar.',
+  },
+});
+
+export default messages;
diff --git a/src/group-configurations/group-configuration-sidebar/utils.jsx b/src/group-configurations/group-configuration-sidebar/utils.jsx
new file mode 100644
index 0000000000..5719771a32
--- /dev/null
+++ b/src/group-configurations/group-configuration-sidebar/utils.jsx
@@ -0,0 +1,57 @@
+/**
+ * Compiles the sidebar data for the course authoring sidebar.
+ *
+ * @param {Object} messages - The localized messages.
+ * @param {Object} intl - The intl object for formatting messages.
+ * @param {boolean} shouldShowExperimentGroups - Flag to include experiment group configuration data.
+ * @param {boolean} shouldShowContentGroup - Flag to include content group data.
+ * @param {boolean} shouldShowEnrollmentTrackGroup - Flag to include enrollment track group data.
+ * @returns {Object[]} The array of sidebar data groups.
+ */
+const getSidebarData = ({
+  messages, intl, shouldShowExperimentGroups, shouldShowContentGroup, shouldShowEnrollmentTrackGroup,
+}) => {
+  const groups = [];
+
+  if (shouldShowEnrollmentTrackGroup) {
+    groups.push({
+      urlKey: 'enrollmentTracks',
+      title: intl.formatMessage(messages.about_3_title),
+      paragraphs: [
+        intl.formatMessage(messages.about_3_description_1),
+        intl.formatMessage(messages.about_3_description_2),
+        intl.formatMessage(messages.about_3_description_3),
+      ],
+    });
+  }
+  if (shouldShowContentGroup) {
+    groups.push({
+      urlKey: 'contentGroups',
+      title: intl.formatMessage(messages.aboutTitle),
+      paragraphs: [
+        intl.formatMessage(messages.aboutDescription_1),
+        intl.formatMessage(messages.aboutDescription_2),
+        intl.formatMessage(messages.aboutDescription_3, {
+          strongText: <strong>{intl.formatMessage(messages.aboutDescription_3_strong)}</strong>,
+          strongText2: <strong>{intl.formatMessage(messages.aboutDescription_strong_edit)}</strong>,
+        }),
+      ],
+    });
+  }
+  if (shouldShowExperimentGroups) {
+    groups.push({
+      urlKey: 'groupConfigurations',
+      title: intl.formatMessage(messages.about_2_title),
+      paragraphs: [
+        intl.formatMessage(messages.about_2_description_1),
+        intl.formatMessage(messages.about_2_description_2, {
+          strongText: <strong>{intl.formatMessage(messages.about_2_description_2_strong)}</strong>,
+          strongText2: <strong>{intl.formatMessage(messages.aboutDescription_strong_edit)}</strong>,
+        }),
+      ],
+    });
+  }
+  return groups;
+};
+
+export { getSidebarData };
diff --git a/src/group-configurations/hooks.jsx b/src/group-configurations/hooks.jsx
new file mode 100644
index 0000000000..e3616dc3d8
--- /dev/null
+++ b/src/group-configurations/hooks.jsx
@@ -0,0 +1,100 @@
+import { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { RequestStatus } from '../data/constants';
+import { getProcessingNotification } from '../generic/processing-notification/data/selectors';
+import {
+  getGroupConfigurationsData,
+  getLoadingStatus,
+  getSavingStatus,
+  getErrorMessage,
+} from './data/selectors';
+import { updateSavingStatuses } from './data/slice';
+import {
+  createContentGroupQuery,
+  createExperimentConfigurationQuery,
+  deleteContentGroupQuery,
+  deleteExperimentConfigurationQuery,
+  editContentGroupQuery,
+  editExperimentConfigurationQuery,
+  fetchGroupConfigurationsQuery,
+} from './data/thunk';
+
+const useGroupConfigurations = (courseId) => {
+  const dispatch = useDispatch();
+  const groupConfigurations = useSelector(getGroupConfigurationsData);
+  const loadingStatus = useSelector(getLoadingStatus);
+  const savingStatus = useSelector(getSavingStatus);
+  const errorMessage = useSelector(getErrorMessage);
+  const {
+    isShow: isShowProcessingNotification,
+    title: processingNotificationTitle,
+  } = useSelector(getProcessingNotification);
+
+  const handleInternetConnectionFailed = () => {
+    dispatch(updateSavingStatuses({ status: RequestStatus.FAILED }));
+  };
+
+  const contentGroupActions = {
+    handleCreate: (group, callbackToClose) => {
+      dispatch(createContentGroupQuery(courseId, group)).then((result) => {
+        if (result) {
+          callbackToClose();
+        }
+      });
+    },
+    handleEdit: (group, callbackToClose) => {
+      dispatch(editContentGroupQuery(courseId, group)).then((result) => {
+        if (result) {
+          callbackToClose();
+        }
+      });
+    },
+    handleDelete: (parentGroupId, groupId) => {
+      dispatch(deleteContentGroupQuery(courseId, parentGroupId, groupId));
+    },
+  };
+
+  const experimentConfigurationActions = {
+    handleCreate: (configuration, callbackToClose) => {
+      dispatch(
+        createExperimentConfigurationQuery(courseId, configuration),
+      ).then((result) => {
+        if (result) {
+          callbackToClose();
+        }
+      });
+    },
+    handleEdit: (configuration, callbackToClose) => {
+      dispatch(editExperimentConfigurationQuery(courseId, configuration)).then(
+        (result) => {
+          if (result) {
+            callbackToClose();
+          }
+        },
+      );
+    },
+    handleDelete: (configurationId) => {
+      dispatch(deleteExperimentConfigurationQuery(courseId, configurationId));
+    },
+  };
+
+  useEffect(() => {
+    dispatch(fetchGroupConfigurationsQuery(courseId));
+  }, [courseId]);
+
+  return {
+    isLoading: loadingStatus === RequestStatus.IN_PROGRESS,
+    isLoadingDenied: loadingStatus === RequestStatus.DENIED,
+    savingStatus,
+    contentGroupActions,
+    experimentConfigurationActions,
+    errorMessage,
+    groupConfigurations,
+    isShowProcessingNotification,
+    processingNotificationTitle,
+    handleInternetConnectionFailed,
+  };
+};
+
+export { useGroupConfigurations };
diff --git a/src/group-configurations/hooks.test.jsx b/src/group-configurations/hooks.test.jsx
new file mode 100644
index 0000000000..87ed09f6c8
--- /dev/null
+++ b/src/group-configurations/hooks.test.jsx
@@ -0,0 +1,109 @@
+import MockAdapter from 'axios-mock-adapter';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { initializeMockApp } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { renderHook } from '@testing-library/react-hooks';
+import { Provider, useDispatch } from 'react-redux';
+
+import { RequestStatus } from '../data/constants';
+import initializeStore from '../store';
+import { getContentStoreApiUrl } from './data/api';
+import {
+  createContentGroupQuery,
+  createExperimentConfigurationQuery,
+  deleteContentGroupQuery,
+  deleteExperimentConfigurationQuery,
+  editContentGroupQuery,
+  editExperimentConfigurationQuery,
+} from './data/thunk';
+import { groupConfigurationResponseMock } from './__mocks__';
+import { useGroupConfigurations } from './hooks';
+import { updateSavingStatuses } from './data/slice';
+
+jest.mock('react-redux', () => ({
+  ...jest.requireActual('react-redux'),
+  useDispatch: jest.fn(),
+}));
+
+jest.mock('./data/thunk', () => ({
+  ...jest.requireActual('./data/thunk'),
+  createContentGroupQuery: jest.fn().mockResolvedValue(true),
+  createExperimentConfigurationQuery: jest.fn().mockResolvedValue(true),
+  deleteContentGroupQuery: jest.fn().mockResolvedValue(true),
+  deleteExperimentConfigurationQuery: jest.fn().mockResolvedValue(true),
+  editContentGroupQuery: jest.fn().mockResolvedValue(true),
+  editExperimentConfigurationQuery: jest.fn().mockResolvedValue(true),
+  getContentStoreApiUrlQuery: jest.fn().mockResolvedValue(true),
+}));
+
+let axiosMock;
+let store;
+const courseId = 'course-v1:org+101+101';
+const mockObject = {};
+const mockFunc = jest.fn();
+let dispatch;
+
+const wrapper = ({ children }) => (
+  <Provider store={store}>
+    <IntlProvider locale="en">
+      {children}
+    </IntlProvider>
+  </Provider>
+);
+
+describe('useGroupConfigurations', () => {
+  beforeEach(async () => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+
+    store = initializeStore();
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+    axiosMock
+      .onGet(getContentStoreApiUrl(courseId))
+      .reply(200, groupConfigurationResponseMock);
+    dispatch = jest.fn().mockImplementation(() => Promise.resolve(true));
+    useDispatch.mockReturnValue(dispatch);
+  });
+
+  it('successfully dispatches handleInternetConnectionFailed', async () => {
+    const { result } = renderHook(() => useGroupConfigurations(courseId), { wrapper });
+    result.current.handleInternetConnectionFailed();
+    expect(dispatch).toHaveBeenCalledWith(updateSavingStatuses({ status: RequestStatus.FAILED }));
+  });
+  it('successfully dispatches handleCreate for group configuration', async () => {
+    const { result } = renderHook(() => useGroupConfigurations(courseId), { wrapper });
+    result.current.contentGroupActions.handleCreate(mockObject, mockFunc);
+    expect(dispatch).toHaveBeenCalledWith(createContentGroupQuery(courseId, mockObject));
+  });
+  it('successfully dispatches handleEdit for group configuration', async () => {
+    const { result } = renderHook(() => useGroupConfigurations(courseId), { wrapper });
+    result.current.contentGroupActions.handleEdit(mockObject, mockFunc);
+    expect(dispatch).toHaveBeenCalledWith(editContentGroupQuery(courseId, mockObject));
+  });
+  it('successfully dispatches handleDelete for group configuration', async () => {
+    const { result } = renderHook(() => useGroupConfigurations(courseId), { wrapper });
+    result.current.contentGroupActions.handleDelete(1, 1);
+    expect(dispatch).toHaveBeenCalledWith(deleteContentGroupQuery(courseId, 1, 1));
+  });
+  it('successfully dispatches handleCreate for experiment group', async () => {
+    const { result } = renderHook(() => useGroupConfigurations(courseId), { wrapper });
+    result.current.experimentConfigurationActions.handleCreate(mockObject, mockFunc);
+    expect(dispatch).toHaveBeenCalledWith(createExperimentConfigurationQuery(courseId, mockObject));
+  });
+  it('successfully dispatches handleEdit for experiment group', async () => {
+    const { result } = renderHook(() => useGroupConfigurations(courseId), { wrapper });
+    result.current.experimentConfigurationActions.handleEdit(mockObject, mockFunc);
+    expect(dispatch).toHaveBeenCalledWith(editExperimentConfigurationQuery(courseId, mockObject));
+  });
+  it('successfully dispatches handleDelete for experiment group', async () => {
+    const { result } = renderHook(() => useGroupConfigurations(courseId), { wrapper });
+    result.current.experimentConfigurationActions.handleDelete(mockObject, 1);
+    expect(dispatch).toHaveBeenCalledWith(deleteExperimentConfigurationQuery(courseId, 1));
+  });
+});
diff --git a/src/group-configurations/index.jsx b/src/group-configurations/index.jsx
new file mode 100644
index 0000000000..1f150c8288
--- /dev/null
+++ b/src/group-configurations/index.jsx
@@ -0,0 +1,135 @@
+import PropTypes from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import {
+  Container, Layout, Stack, Row,
+} from '@openedx/paragon';
+
+import { LoadingSpinner } from '../generic/Loading';
+import { useModel } from '../generic/model-store';
+import SubHeader from '../generic/sub-header/SubHeader';
+import getPageHeadTitle from '../generic/utils';
+import ProcessingNotification from '../generic/processing-notification';
+import { SavingErrorAlert } from '../generic/saving-error-alert';
+import messages from './messages';
+import ContentGroupsSection from './content-groups-section';
+import ExperimentConfigurationsSection from './experiment-configurations-section';
+import EnrollmentTrackGroupsSection from './enrollment-track-groups-section';
+import GroupConfigurationSidebar from './group-configuration-sidebar';
+import { useGroupConfigurations } from './hooks';
+import ConnectionErrorAlert from '../generic/ConnectionErrorAlert';
+
+const GroupConfigurations = ({ courseId }) => {
+  const { formatMessage } = useIntl();
+  const courseDetails = useModel('courseDetails', courseId);
+  const {
+    isLoading,
+    savingStatus,
+    errorMessage,
+    contentGroupActions,
+    experimentConfigurationActions,
+    processingNotificationTitle,
+    isShowProcessingNotification,
+    groupConfigurations: {
+      allGroupConfigurations,
+      shouldShowEnrollmentTrack,
+      shouldShowExperimentGroups,
+      experimentGroupConfigurations,
+    },
+    isLoadingDenied,
+  } = useGroupConfigurations(courseId);
+
+  document.title = getPageHeadTitle(
+    courseDetails?.name,
+    formatMessage(messages.headingTitle),
+  );
+
+  if (isLoadingDenied) {
+    return (
+      <Container size="xl" className="course-unit px-4 mt-4">
+        <ConnectionErrorAlert />
+      </Container>
+    );
+  }
+
+  if (isLoading) {
+    return (
+      <Row className="m-0 mt-4 justify-content-center">
+        <LoadingSpinner />
+      </Row>
+    );
+  }
+
+  const enrollmentTrackGroup = shouldShowEnrollmentTrack
+    ? allGroupConfigurations[0]
+    : null;
+  const contentGroup = allGroupConfigurations?.[shouldShowEnrollmentTrack ? 1 : 0];
+
+  return (
+    <>
+      <Container size="xl" className="group-configurations px-4">
+        <div className="mt-5" />
+        <SubHeader
+          title={formatMessage(messages.headingTitle)}
+          subtitle={formatMessage(messages.headingSubtitle)}
+        />
+        <Layout
+          lg={[{ span: 9 }, { span: 3 }]}
+          md={[{ span: 9 }, { span: 3 }]}
+          sm={[{ span: 9 }, { span: 3 }]}
+          xs={[{ span: 9 }, { span: 3 }]}
+          xl={[{ span: 9 }, { span: 3 }]}
+        >
+          <Layout.Element>
+            <Stack
+              gap={3}
+              data-testid="group-configurations-main-content-wrapper"
+            >
+              {!!enrollmentTrackGroup && (
+                <EnrollmentTrackGroupsSection
+                  availableGroup={enrollmentTrackGroup}
+                />
+              )}
+              {!!contentGroup && (
+                <ContentGroupsSection
+                  availableGroup={contentGroup}
+                  contentGroupActions={contentGroupActions}
+                />
+              )}
+              {shouldShowExperimentGroups && (
+                <ExperimentConfigurationsSection
+                  courseId={courseId}
+                  availableGroups={experimentGroupConfigurations}
+                  experimentConfigurationActions={experimentConfigurationActions}
+                />
+              )}
+            </Stack>
+          </Layout.Element>
+          <Layout.Element>
+            <GroupConfigurationSidebar
+              courseId={courseId}
+              shouldShowExperimentGroups={shouldShowExperimentGroups}
+              shouldShowContentGroup={!!contentGroup}
+              shouldShowEnrollmentTrackGroup={!!enrollmentTrackGroup}
+            />
+          </Layout.Element>
+        </Layout>
+      </Container>
+      <div className="alert-toast">
+        <SavingErrorAlert
+          savingStatus={savingStatus}
+          errorMessage={errorMessage}
+        />
+        <ProcessingNotification
+          isShow={isShowProcessingNotification}
+          title={processingNotificationTitle}
+        />
+      </div>
+    </>
+  );
+};
+
+GroupConfigurations.propTypes = {
+  courseId: PropTypes.string.isRequired,
+};
+
+export default GroupConfigurations;
diff --git a/src/group-configurations/messages.js b/src/group-configurations/messages.js
new file mode 100644
index 0000000000..c6f5236a3b
--- /dev/null
+++ b/src/group-configurations/messages.js
@@ -0,0 +1,31 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  headingTitle: {
+    id: 'course-authoring.group-configurations.heading-title',
+    defaultMessage: 'Group configurations',
+    description: 'Title for the heading of the group configurations section.',
+  },
+  headingSubtitle: {
+    id: 'course-authoring.group-configurations.heading-sub-title',
+    defaultMessage: 'Settings',
+    description: 'Subtitle for the heading of the group configurations section.',
+  },
+  containsGroups: {
+    id: 'course-authoring.group-configurations.container.contains-groups',
+    defaultMessage: 'Contains {len, plural, one {1 group} other {{len} groups}}',
+    description: 'Message indicating the number of groups contained within a container.',
+  },
+  notInUse: {
+    id: 'course-authoring.group-configurations.container.not-in-use',
+    defaultMessage: 'Not in use',
+    description: 'Message indicating that the group configurations are not currently in use.',
+  },
+  usedInLocations: {
+    id: 'course-authoring.group-configurations.container.used-in-locations',
+    defaultMessage: 'Used in {len, plural, one {1 location} other {{len} locations}}',
+    description: 'Message indicating the number of locations where the group configurations are used.',
+  },
+});
+
+export default messages;
diff --git a/src/group-configurations/utils.js b/src/group-configurations/utils.js
new file mode 100644
index 0000000000..d701081fcc
--- /dev/null
+++ b/src/group-configurations/utils.js
@@ -0,0 +1,53 @@
+import { getConfig } from '@edx/frontend-platform';
+
+import messages from './messages';
+
+/**
+ * Formats the given URL to a unit page URL.
+ * @param {string} url - The original part of URL.
+ * @returns {string} - The formatted unit page URL.
+ */
+const formatUrlToUnitPage = (url) => new URL(url, getConfig().STUDIO_BASE_URL).href;
+
+/**
+ * Retrieves a list of group count based on the number of items.
+ * @param {Array} items - The array of items to count.
+ * @param {function} formatMessage - The function for formatting localized messages.
+ * @returns {Array} - List of group count.
+ */
+const getGroupsCountMessage = (items, formatMessage) => {
+  if (!items?.length) {
+    return [];
+  }
+
+  return [formatMessage(messages.containsGroups, { len: items.length })];
+};
+
+/**
+ * Retrieves a list of usage count based on the number of items.
+ * @param {Array} items - The array of items to count.
+ * @param {function} formatMessage - The function for formatting localized messages.
+ * @returns {Array} - List of usage count.
+ */
+const getUsageCountMessage = (items, formatMessage) => {
+  if (!items?.length) {
+    return [formatMessage(messages.notInUse)];
+  }
+
+  return [formatMessage(messages.usedInLocations, { len: items.length })];
+};
+
+/**
+ * Retrieves a combined list of badge messages based on usage and group information.
+ * @param {Array} usage - The array of items indicating usage.
+ * @param {Object} group - The group information.
+ * @param {boolean} isExperiment - Flag indicating whether it is an experiment group configurations.
+ * @param {function} formatMessage - The function for formatting localized messages.
+ * @returns {Array} - Combined list of badges.
+ */
+const getCombinedBadgeList = (usage, group, isExperiment, formatMessage) => [
+  ...(isExperiment ? getGroupsCountMessage(group.groups, formatMessage) : []),
+  ...getUsageCountMessage(usage, formatMessage),
+];
+
+export { formatUrlToUnitPage, getCombinedBadgeList };
diff --git a/src/head/Head.jsx b/src/head/Head.jsx
new file mode 100644
index 0000000000..f093b87514
--- /dev/null
+++ b/src/head/Head.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { getConfig } from '@edx/frontend-platform';
+
+import messages from './messages';
+
+const Head = ({ intl }) => (
+  <Helmet>
+    <title>
+      {intl.formatMessage(messages['course-authoring.page.title'], { siteName: getConfig().SITE_NAME })}
+    </title>
+    <link rel="shortcut icon" href={getConfig().FAVICON_URL} type="image/x-icon" />
+  </Helmet>
+);
+
+Head.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(Head);
diff --git a/src/head/Head.test.jsx b/src/head/Head.test.jsx
new file mode 100644
index 0000000000..ac1a9cce8a
--- /dev/null
+++ b/src/head/Head.test.jsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { Helmet } from 'react-helmet';
+import { render } from '@testing-library/react';
+import { getConfig } from '@edx/frontend-platform';
+import Head from './Head';
+
+describe('Head', () => {
+  const props = {};
+  it('should match render title tag and favicon with the site configuration values', () => {
+    render(<IntlProvider locale="en"><Head {...props} /></IntlProvider>);
+    const helmet = Helmet.peek();
+    expect(helmet.title).toEqual(`Course Authoring | ${getConfig().SITE_NAME}`);
+    expect(helmet.linkTags[0].rel).toEqual('shortcut icon');
+    expect(helmet.linkTags[0].href).toEqual(getConfig().FAVICON_URL);
+  });
+});
diff --git a/src/head/messages.js b/src/head/messages.js
new file mode 100644
index 0000000000..4fca090383
--- /dev/null
+++ b/src/head/messages.js
@@ -0,0 +1,11 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  'course-authoring.page.title': {
+    id: 'course-authoring.page.title',
+    defaultMessage: 'Course Authoring | {siteName}',
+    description: 'Title tag',
+  },
+});
+
+export default messages;
diff --git a/src/header/Header.tsx b/src/header/Header.tsx
new file mode 100644
index 0000000000..ebd3199893
--- /dev/null
+++ b/src/header/Header.tsx
@@ -0,0 +1,95 @@
+import { useSelector } from 'react-redux';
+import { getConfig } from '@edx/frontend-platform';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { StudioHeader } from '@edx/frontend-component-header';
+import { type Container, useToggle } from '@openedx/paragon';
+import { generatePath, useHref } from 'react-router-dom';
+
+import { getWaffleFlags } from '../data/selectors';
+import { SearchModal } from '../search-modal';
+import { useContentMenuItems, useSettingMenuItems, useToolsMenuItems } from './hooks';
+import messages from './messages';
+
+type ContainerPropsType = React.ComponentProps<typeof Container>;
+
+interface HeaderProps {
+  contextId?: string,
+  number?: string,
+  org?: string,
+  title?: string,
+  isHiddenMainMenu?: boolean,
+  isLibrary?: boolean,
+  containerProps?: ContainerPropsType,
+}
+
+const Header = ({
+  contextId = '',
+  org = '',
+  number = '',
+  title = '',
+  isHiddenMainMenu = false,
+  isLibrary = false,
+  containerProps = {},
+}: HeaderProps) => {
+  const intl = useIntl();
+  const libraryHref = useHref('/library/:libraryId');
+  const waffleFlags = useSelector(getWaffleFlags);
+
+  const [isShowSearchModalOpen, openSearchModal, closeSearchModal] = useToggle(false);
+
+  const studioBaseUrl = getConfig().STUDIO_BASE_URL;
+  const meiliSearchEnabled = [true, 'true'].includes(getConfig().MEILISEARCH_ENABLED);
+
+  const contentMenuItems = useContentMenuItems(contextId);
+  const settingMenuItems = useSettingMenuItems(contextId);
+  const toolsMenuItems = useToolsMenuItems(contextId);
+  const mainMenuDropdowns = !isLibrary ? [
+    {
+      id: `${intl.formatMessage(messages['header.links.content'])}-dropdown-menu`,
+      buttonTitle: intl.formatMessage(messages['header.links.content']),
+      items: contentMenuItems,
+    },
+    {
+      id: `${intl.formatMessage(messages['header.links.settings'])}-dropdown-menu`,
+      buttonTitle: intl.formatMessage(messages['header.links.settings']),
+      items: settingMenuItems,
+    },
+    {
+      id: `${intl.formatMessage(messages['header.links.tools'])}-dropdown-menu`,
+      buttonTitle: intl.formatMessage(messages['header.links.tools']),
+      items: toolsMenuItems,
+    },
+  ] : [];
+
+  const getOutlineLink = () => {
+    if (isLibrary) {
+      return generatePath(libraryHref, { libraryId: contextId });
+    }
+    return waffleFlags.useNewCourseOutlinePage ? `/course/${contextId}` : `${studioBaseUrl}/course/${contextId}`;
+  };
+
+  return (
+    <>
+      <StudioHeader
+        org={org}
+        number={number}
+        title={title}
+        isHiddenMainMenu={isHiddenMainMenu}
+        mainMenuDropdowns={mainMenuDropdowns}
+        outlineLink={getOutlineLink()}
+        searchButtonAction={meiliSearchEnabled ? openSearchModal : undefined}
+        containerProps={containerProps}
+        isNewHomePage={waffleFlags.useNewHomePage}
+      />
+      {meiliSearchEnabled && (
+        <SearchModal
+          isOpen={isShowSearchModalOpen}
+          courseId={isLibrary ? undefined : contextId}
+          onClose={closeSearchModal}
+        />
+      )}
+    </>
+  );
+};
+
+export default Header;
diff --git a/src/header/hooks.js b/src/header/hooks.js
new file mode 100644
index 0000000000..6758fbc27b
--- /dev/null
+++ b/src/header/hooks.js
@@ -0,0 +1,108 @@
+import { getConfig } from '@edx/frontend-platform';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { useSelector } from 'react-redux';
+
+import { getPagePath } from '../utils';
+import { getWaffleFlags } from '../data/selectors';
+import { getStudioHomeData } from '../studio-home/data/selectors';
+import messages from './messages';
+
+export const useContentMenuItems = courseId => {
+  const intl = useIntl();
+  const studioBaseUrl = getConfig().STUDIO_BASE_URL;
+  const waffleFlags = useSelector(getWaffleFlags);
+
+  const items = [
+    {
+      href: waffleFlags.useNewCourseOutlinePage ? `/course/${courseId}` : `${studioBaseUrl}/course/${courseId}`,
+      title: intl.formatMessage(messages['header.links.outline']),
+    },
+    {
+      href: waffleFlags.useNewUpdatesPage ? `/course/${courseId}/course_info` : `${studioBaseUrl}/course_info/${courseId}`,
+      title: intl.formatMessage(messages['header.links.updates']),
+    },
+    {
+      href: getPagePath(courseId, 'true', 'tabs'),
+      title: intl.formatMessage(messages['header.links.pages']),
+    },
+    {
+      href: waffleFlags.useNewFilesUploadsPage ? `/course/${courseId}/assets` : `${studioBaseUrl}/assets/${courseId}`,
+      title: intl.formatMessage(messages['header.links.filesAndUploads']),
+    },
+  ];
+  if (getConfig().ENABLE_VIDEO_UPLOAD_PAGE_LINK_IN_CONTENT_DROPDOWN === 'true' || waffleFlags.useNewVideoUploadsPage) {
+    items.push({
+      href: `/course/${courseId}/videos`,
+      title: intl.formatMessage(messages['header.links.videoUploads']),
+    });
+  }
+
+  return items;
+};
+
+export const useSettingMenuItems = courseId => {
+  const intl = useIntl();
+  const studioBaseUrl = getConfig().STUDIO_BASE_URL;
+  const { canAccessAdvancedSettings } = useSelector(getStudioHomeData);
+  const waffleFlags = useSelector(getWaffleFlags);
+
+  const items = [
+    {
+      href: waffleFlags.useNewScheduleDetailsPage ? `/course/${courseId}/settings/details` : `${studioBaseUrl}/settings/details/${courseId}`,
+      title: intl.formatMessage(messages['header.links.scheduleAndDetails']),
+    },
+    {
+      href: waffleFlags.useNewGradingPage ? `/course/${courseId}/settings/grading` : `${studioBaseUrl}/settings/grading/${courseId}`,
+      title: intl.formatMessage(messages['header.links.grading']),
+    },
+    {
+      href: waffleFlags.useNewCourseTeamPage ? `/course/${courseId}/course_team` : `${studioBaseUrl}/course_team/${courseId}`,
+      title: intl.formatMessage(messages['header.links.courseTeam']),
+    },
+    {
+      href: waffleFlags.useNewGroupConfigurationsPage ? `/course/${courseId}/group_configurations` : `${studioBaseUrl}/group_configurations/${courseId}`,
+      title: intl.formatMessage(messages['header.links.groupConfigurations']),
+    },
+    ...(canAccessAdvancedSettings === true
+      ? [{
+        href: waffleFlags.useNewAdvancedSettingsPage ? `/course/${courseId}/settings/advanced` : `${studioBaseUrl}/settings/advanced/${courseId}`,
+        title: intl.formatMessage(messages['header.links.advancedSettings']),
+      }] : []
+    ),
+  ];
+  if (getConfig().ENABLE_CERTIFICATE_PAGE === 'true' || waffleFlags.useNewCertificatesPage) {
+    items.push({
+      href: `/course/${courseId}/certificates`,
+      title: intl.formatMessage(messages['header.links.certificates']),
+    });
+  }
+  return items;
+};
+
+export const useToolsMenuItems = courseId => {
+  const intl = useIntl();
+  const studioBaseUrl = getConfig().STUDIO_BASE_URL;
+  const waffleFlags = useSelector(getWaffleFlags);
+
+  const items = [
+    {
+      href: waffleFlags.useNewImportPage ? `/course/${courseId}/import` : `${studioBaseUrl}/import/${courseId}`,
+      title: intl.formatMessage(messages['header.links.import']),
+    },
+    {
+      href: waffleFlags.useNewExportPage ? `/course/${courseId}/export` : `${studioBaseUrl}/export/${courseId}`,
+      title: intl.formatMessage(messages['header.links.exportCourse']),
+    },
+    ...(getConfig().ENABLE_TAGGING_TAXONOMY_PAGES === 'true'
+      ? [{
+        href: `${studioBaseUrl}/course/${courseId}#export-tags`,
+        title: intl.formatMessage(messages['header.links.exportTags']),
+      }] : []
+    ),
+    {
+      href: `/course/${courseId}/checklists`,
+      title: intl.formatMessage(messages['header.links.checklists']),
+    },
+  ];
+  return items;
+};
diff --git a/src/header/hooks.test.js b/src/header/hooks.test.js
new file mode 100644
index 0000000000..9b9f1cbae2
--- /dev/null
+++ b/src/header/hooks.test.js
@@ -0,0 +1,95 @@
+import { useSelector } from 'react-redux';
+import { getConfig, setConfig } from '@edx/frontend-platform';
+import { renderHook } from '@testing-library/react-hooks';
+import { useContentMenuItems, useToolsMenuItems, useSettingMenuItems } from './hooks';
+
+jest.mock('@edx/frontend-platform/i18n', () => ({
+  ...jest.requireActual('@edx/frontend-platform/i18n'),
+  useIntl: () => ({
+    formatMessage: jest.fn(message => message.defaultMessage),
+  }),
+}));
+
+jest.mock('react-redux', () => ({
+  ...jest.requireActual('react-redux'),
+  useSelector: jest.fn(),
+}));
+
+describe('header utils', () => {
+  describe('getContentMenuItems', () => {
+    it('should include Video Uploads option', () => {
+      setConfig({
+        ...getConfig(),
+        ENABLE_VIDEO_UPLOAD_PAGE_LINK_IN_CONTENT_DROPDOWN: 'true',
+      });
+      const actualItems = renderHook(() => useContentMenuItems('course-123')).result.current;
+      expect(actualItems).toHaveLength(5);
+    });
+    it('should not include Video Uploads option', () => {
+      setConfig({
+        ...getConfig(),
+        ENABLE_VIDEO_UPLOAD_PAGE_LINK_IN_CONTENT_DROPDOWN: 'false',
+      });
+      const actualItems = renderHook(() => useContentMenuItems('course-123')).result.current;
+      expect(actualItems).toHaveLength(4);
+    });
+  });
+
+  describe('getSettingsMenuitems', () => {
+    useSelector.mockReturnValue({ canAccessAdvancedSettings: true });
+
+    it('should include certificates option', () => {
+      setConfig({
+        ...getConfig(),
+        ENABLE_CERTIFICATE_PAGE: 'true',
+      });
+      const actualItems = renderHook(() => useSettingMenuItems('course-123')).result.current;
+      expect(actualItems).toHaveLength(6);
+    });
+    it('should not include certificates option', () => {
+      setConfig({
+        ...getConfig(),
+        ENABLE_CERTIFICATE_PAGE: 'false',
+      });
+      const actualItems = renderHook(() => useSettingMenuItems('course-123')).result.current;
+      expect(actualItems).toHaveLength(5);
+    });
+    it('should include advanced settings option', () => {
+      const actualItemsTitle = renderHook(() => useSettingMenuItems('course-123')).result.current.map((item) => item.title);
+      expect(actualItemsTitle).toContain('Advanced Settings');
+    });
+    it('should not include advanced settings option', () => {
+      useSelector.mockReturnValue({ canAccessAdvancedSettings: false });
+      const actualItemsTitle = renderHook(() => useSettingMenuItems('course-123')).result.current.map((item) => item.title);
+      expect(actualItemsTitle).not.toContain('Advanced Settings');
+    });
+  });
+
+  describe('getToolsMenuItems', () => {
+    it('should include export tags option', () => {
+      setConfig({
+        ...getConfig(),
+        ENABLE_TAGGING_TAXONOMY_PAGES: 'true',
+      });
+      const actualItemsTitle = renderHook(() => useToolsMenuItems('course-123')).result.current.map((item) => item.title);
+      expect(actualItemsTitle).toEqual([
+        'Import',
+        'Export Course',
+        'Export Tags',
+        'Checklists',
+      ]);
+    });
+    it('should not include export tags option', () => {
+      setConfig({
+        ...getConfig(),
+        ENABLE_TAGGING_TAXONOMY_PAGES: 'false',
+      });
+      const actualItemsTitle = renderHook(() => useToolsMenuItems('course-123')).result.current.map((item) => item.title);
+      expect(actualItemsTitle).toEqual([
+        'Import',
+        'Export Course',
+        'Checklists',
+      ]);
+    });
+  });
+});
diff --git a/src/header/index.js b/src/header/index.js
new file mode 100644
index 0000000000..579f1ac23f
--- /dev/null
+++ b/src/header/index.js
@@ -0,0 +1 @@
+export { default } from './Header';
diff --git a/src/studio-header/Header.messages.jsx b/src/header/messages.js
similarity index 90%
rename from src/studio-header/Header.messages.jsx
rename to src/header/messages.js
index 25d961829d..31d5f32fa6 100644
--- a/src/studio-header/Header.messages.jsx
+++ b/src/header/messages.js
@@ -28,13 +28,13 @@ const messages = defineMessages({
   },
   'header.links.pages': {
     id: 'header.links.pages',
-    defaultMessage: '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',
+    defaultMessage: 'Files',
+    description: 'Link to Studio Files page',
   },
   'header.links.textbooks': {
     id: 'header.links.textbooks',
@@ -43,7 +43,7 @@ const messages = defineMessages({
   },
   'header.links.videoUploads': {
     id: 'header.links.videoUploads',
-    defaultMessage: 'Video Uploads',
+    defaultMessage: 'Videos',
     description: 'Link to Studio Video Uploads page',
   },
   'header.links.scheduleAndDetails': {
@@ -91,11 +91,16 @@ const messages = defineMessages({
     defaultMessage: 'Import',
     description: 'Link to Studio Import page',
   },
-  'header.links.export': {
-    id: 'header.links.export',
-    defaultMessage: 'Export',
+  'header.links.exportCourse': {
+    id: 'header.links.exportCourse',
+    defaultMessage: 'Export Course',
     description: 'Link to Studio Export page',
   },
+  'header.links.exportTags': {
+    id: 'header.links.exportTags',
+    defaultMessage: 'Export Tags',
+    description: 'Download course content tags as CSV',
+  },
   'header.links.checklists': {
     id: 'header.links.checklists',
     defaultMessage: 'Checklists',
@@ -106,11 +111,6 @@ const messages = defineMessages({
     defaultMessage: 'Studio Home',
     description: 'Link to Studio Home',
   },
-  'header.user.menu.maintenance': {
-    id: 'header.user.menu.maintenance',
-    defaultMessage: 'Maintenance',
-    description: 'Link to the Studio maintenance page',
-  },
   'header.user.menu.logout': {
     id: 'header.user.menu.logout',
     defaultMessage: 'Logout',
@@ -144,7 +144,7 @@ const messages = defineMessages({
   'header.label.secondary.nav': {
     id: 'header.label.secondary.nav',
     defaultMessage: 'Secondary',
-    description: 'The aria label for the seconary nav',
+    description: 'The aria label for the secondary nav',
   },
   'header.label.courseOutline': {
     id: 'header.label.courseOutline',
diff --git a/src/help-urls/__mocks__/helpUrls.js b/src/help-urls/__mocks__/helpUrls.js
new file mode 100644
index 0000000000..500c558176
--- /dev/null
+++ b/src/help-urls/__mocks__/helpUrls.js
@@ -0,0 +1,35 @@
+module.exports = {
+  default: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/index.html',
+  home: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/getting_started/CA_get_started_Studio.html',
+  develop_course: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/developing_course/index.html',
+  outline: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/developing_course/course_outline.html',
+  unit: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/developing_course/course_units.html',
+  visibility: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/developing_course/controlling_content_visibility.html',
+  updates: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/course_assets/handouts_updates.html',
+  pages: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/course_assets/pages.html',
+  files: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/course_assets/course_files.html',
+  textbooks: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/course_assets/textbooks.html',
+  schedule: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/set_up_course/studio_add_course_information/index.html',
+  grading: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/grading/index.html',
+  team_course: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/set_up_course/studio_add_course_information/studio_course_staffing.html',
+  team_library: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/course_components/libraries.html#give-other-users-access-to-your-library',
+  advanced: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/index.html',
+  checklist: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/set_up_course/index.html',
+  import_library: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/course_components/libraries.html#import-a-library',
+  import_course: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/releasing_course/export_import_course.html#import-a-course',
+  export_library: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/course_components/libraries.html#export-a-library',
+  export_course: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/releasing_course/export_import_course.html#export-a-course',
+  welcome: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/getting_started/index.html',
+  login: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/getting_started/index.html',
+  register: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/getting_started/index.html',
+  content_libraries: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/course_components/libraries.html',
+  content_groups: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/course_features/cohorts/cohorted_courseware.html',
+  enrollment_tracks: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/course_features/diff_content/enroll_track_courseware.html',
+  group_configurations: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/course_features/content_experiments/content_experiments_configure.html#set-up-group-configurations-in-edx-studio',
+  container: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/developing_course/course_components.html#components-that-contain-other-components',
+  video: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/video/index.html',
+  certificates: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/set_up_course/studio_add_course_information/studio_creating_certificates.html',
+  content_highlights: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/developing_course/course_sections.html#set-section-highlights-for-weekly-course-highlight-messages',
+  image_accessibility: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/accessibility/best_practices_course_content_dev.html#use-best-practices-for-describing-images',
+  social_sharing: 'http://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/developing_course/social_sharing.html',
+};
diff --git a/src/help-urls/__mocks__/index.js b/src/help-urls/__mocks__/index.js
new file mode 100644
index 0000000000..51c2bc04f2
--- /dev/null
+++ b/src/help-urls/__mocks__/index.js
@@ -0,0 +1 @@
+export { default as helpUrls } from './helpUrls';
diff --git a/src/help-urls/data/api.js b/src/help-urls/data/api.js
new file mode 100644
index 0000000000..2dc9a855ff
--- /dev/null
+++ b/src/help-urls/data/api.js
@@ -0,0 +1,10 @@
+import { camelCaseObject, getConfig } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+
+export const getHelpUrlsApiUrl = () => `${getConfig().STUDIO_BASE_URL}/api/contentstore/v1/help_urls`;
+
+export async function getHelpUrls() {
+  const { data } = await getAuthenticatedHttpClient()
+    .get(getHelpUrlsApiUrl());
+  return camelCaseObject(data);
+}
diff --git a/src/help-urls/data/selectors.js b/src/help-urls/data/selectors.js
new file mode 100644
index 0000000000..cd88d4e72c
--- /dev/null
+++ b/src/help-urls/data/selectors.js
@@ -0,0 +1,13 @@
+export const selectHelpUrlsByNames = (names) => (state) => {
+  const urlsDictionary = {};
+
+  names.forEach(name => {
+    urlsDictionary[name] = state.helpUrls.pages[name] || null;
+  });
+
+  return urlsDictionary;
+};
+
+export const getPages = (state) => state.helpUrls.pages;
+
+export const getLoadingHelpUrlsStatus = (state) => state.helpUrls.loadingHelpUrlsStatus;
diff --git a/src/help-urls/data/slice.js b/src/help-urls/data/slice.js
new file mode 100644
index 0000000000..01c8821e55
--- /dev/null
+++ b/src/help-urls/data/slice.js
@@ -0,0 +1,27 @@
+/* eslint-disable no-param-reassign */
+import { createSlice } from '@reduxjs/toolkit';
+
+const initialState = {
+  loadingHelpUrlsStatus: '',
+  pages: {},
+};
+
+const slice = createSlice({
+  name: 'helpUrls',
+  initialState,
+  reducers: {
+    updatePages: (state, { payload }) => {
+      state.pages = payload;
+    },
+    updateLoadingHelpUrlsStatus: (state, { payload }) => {
+      state.loadingHelpUrlsStatus = payload.status;
+    },
+  },
+});
+
+export const {
+  updatePages,
+  updateLoadingHelpUrlsStatus,
+} = slice.actions;
+
+export const { reducer } = slice;
diff --git a/src/help-urls/data/thunks.js b/src/help-urls/data/thunks.js
new file mode 100644
index 0000000000..93b4f8d128
--- /dev/null
+++ b/src/help-urls/data/thunks.js
@@ -0,0 +1,23 @@
+import { RequestStatus } from '../../data/constants';
+
+import { getHelpUrls } from './api';
+import { updateLoadingHelpUrlsStatus, updatePages } from './slice';
+
+export function fetchHelpUrls() {
+  return async (dispatch) => {
+    dispatch(updateLoadingHelpUrlsStatus({ status: RequestStatus.IN_PROGRESS }));
+
+    try {
+      const urls = await getHelpUrls();
+
+      dispatch(updatePages(urls));
+
+      dispatch(updateLoadingHelpUrlsStatus({ status: RequestStatus.SUCCESSFUL }));
+      return true;
+    } catch (error) {
+      dispatch(updateLoadingHelpUrlsStatus({ status: RequestStatus.FAILED }));
+
+      return false;
+    }
+  };
+}
diff --git a/src/help-urls/hooks.jsx b/src/help-urls/hooks.jsx
new file mode 100644
index 0000000000..d8d23f9638
--- /dev/null
+++ b/src/help-urls/hooks.jsx
@@ -0,0 +1,22 @@
+import { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { isEmpty } from 'lodash';
+
+import { fetchHelpUrls } from './data/thunks';
+import { getPages, selectHelpUrlsByNames } from './data/selectors';
+
+const useHelpUrls = (tokenNames) => {
+  const dispatch = useDispatch();
+  const helpTokens = useSelector(selectHelpUrlsByNames(tokenNames));
+  const pages = useSelector(getPages);
+
+  useEffect(() => {
+    if (isEmpty(pages)) {
+      dispatch(fetchHelpUrls());
+    }
+  }, []);
+
+  return helpTokens;
+};
+
+export { useHelpUrls };
diff --git a/src/hooks.test.ts b/src/hooks.test.ts
new file mode 100644
index 0000000000..fbec7eda88
--- /dev/null
+++ b/src/hooks.test.ts
@@ -0,0 +1,121 @@
+import { renderHook } from '@testing-library/react-hooks';
+import { fireEvent } from '@testing-library/react';
+import { useLocation } from 'react-router-dom';
+import { history } from '@edx/frontend-platform';
+
+import { useScrollToHashElement, useEscapeClick, useLoadOnScroll } from './hooks';
+
+jest.mock('react-router-dom', () => ({
+  useLocation: jest.fn(),
+}));
+
+jest.mock('@edx/frontend-platform', () => ({
+  history: {
+    replace: jest.fn(),
+  },
+}));
+
+describe('Custom Hooks', () => {
+  describe('useScrollToHashElement', () => {
+    beforeEach(() => {
+      window.location.hash = '#test';
+      document.body.innerHTML = '<div id="test">Test Element</div>';
+
+      Element.prototype.scrollIntoView = jest.fn();
+
+      jest.mocked(useLocation).mockReturnValue({
+        pathname: '/test',
+        state: null,
+        search: '',
+        hash: '',
+        key: 'default',
+      });
+    });
+
+    afterEach(() => {
+      jest.clearAllMocks();
+      window.location.hash = '';
+    });
+
+    it('scrolls to element with the hash and replaces the URL hash', () => {
+      renderHook(() => useScrollToHashElement({ isLoading: false }));
+      const element = document.getElementById('test');
+
+      expect(element).toBeInTheDocument();
+      expect(element?.scrollIntoView).toHaveBeenCalledWith({ behavior: 'smooth' });
+      expect(history.replace).toHaveBeenCalledWith({ pathname: '/test', hash: '' });
+    });
+  });
+
+  describe('useEscapeClick', () => {
+    it('calls onEscape when Escape key is pressed', () => {
+      const onEscape = jest.fn();
+
+      renderHook(() => useEscapeClick({ onEscape, dependency: [] }));
+
+      fireEvent.keyDown(window, { key: 'Escape' });
+
+      expect(onEscape).toHaveBeenCalledTimes(1);
+    });
+
+    it('does not call onEscape for other keys', () => {
+      const onEscape = jest.fn();
+
+      renderHook(() => useEscapeClick({ onEscape, dependency: [] }));
+
+      fireEvent.keyDown(window, { key: 'Enter' });
+
+      expect(onEscape).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('useLoadOnScroll', () => {
+    const fetchNextPage = jest.fn();
+
+    afterEach(() => {
+      jest.clearAllMocks();
+    });
+
+    it('calls fetchNextPage when scrolled near the bottom', () => {
+      renderHook(() => useLoadOnScroll(true, false, fetchNextPage, true));
+
+      Object.defineProperty(window, 'innerHeight', { writable: true, configurable: true, value: 1000 });
+      Object.defineProperty(document.body, 'scrollHeight', { writable: true, configurable: true, value: 1500 });
+      window.scrollY = 1200;
+
+      fireEvent.scroll(window);
+
+      // Called on scroll once and then due to content being less than screen height
+      // and hasNextPage being true.
+      expect(fetchNextPage).toHaveBeenCalledTimes(2);
+    });
+
+    it('does not call fetchNextPage if not near the bottom', () => {
+      renderHook(() => useLoadOnScroll(true, false, fetchNextPage, true));
+
+      Object.defineProperty(window, 'innerHeight', { writable: true, configurable: true, value: 1000 });
+      Object.defineProperty(document.body, 'scrollHeight', { writable: true, configurable: true, value: 2000 });
+      window.scrollY = 500;
+
+      fireEvent.scroll(window);
+
+      expect(fetchNextPage).not.toHaveBeenCalled();
+    });
+
+    it('does not call fetchNextPage if fetching is in progress', () => {
+      renderHook(() => useLoadOnScroll(true, true, fetchNextPage, true));
+
+      fireEvent.scroll(window);
+
+      expect(fetchNextPage).not.toHaveBeenCalled();
+    });
+
+    it('does not call fetchNextPage if hasNextPage is false', () => {
+      renderHook(() => useLoadOnScroll(false, false, fetchNextPage, true));
+
+      fireEvent.scroll(window);
+
+      expect(fetchNextPage).not.toHaveBeenCalled();
+    });
+  });
+});
diff --git a/src/hooks.ts b/src/hooks.ts
new file mode 100644
index 0000000000..1984625cba
--- /dev/null
+++ b/src/hooks.ts
@@ -0,0 +1,79 @@
+import { useEffect, useState } from 'react';
+import { history } from '@edx/frontend-platform';
+import { useLocation } from 'react-router-dom';
+
+export const useScrollToHashElement = ({ isLoading }: { isLoading: boolean }) => {
+  const [elementWithHash, setElementWithHash] = useState<string | null>(null);
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    const currentHash = window.location.hash.substring(1);
+
+    if (currentHash) {
+      const element = document.getElementById(currentHash);
+      if (element) {
+        element.scrollIntoView({ behavior: 'smooth' });
+        history.replace({ pathname, hash: '' });
+      }
+      setElementWithHash(currentHash);
+    }
+  }, [isLoading]);
+
+  return { elementWithHash };
+};
+
+export const useEscapeClick = ({ onEscape, dependency }: { onEscape: () => void, dependency: any }) => {
+  useEffect(() => {
+    const handleEscapeClick = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        onEscape();
+      }
+    };
+
+    window.addEventListener('keydown', handleEscapeClick);
+
+    return () => {
+      window.removeEventListener('keydown', handleEscapeClick);
+    };
+  }, [dependency]);
+};
+
+/**
+ * Hook which loads next page of items on scroll
+ */
+export const useLoadOnScroll = (
+  hasNextPage: boolean | undefined,
+  isFetchingNextPage: boolean,
+  fetchNextPage: () => void,
+  enabled: boolean,
+) => {
+  useEffect(() => {
+    if (enabled) {
+      const canFetchNextPage = hasNextPage && !isFetchingNextPage;
+
+      const onscroll = () => {
+        // Verify the position of the scroll to implement an infinite scroll.
+        // Used `loadLimit` to fetch next page before reach the end of the screen.
+        const loadLimit = 300;
+        const scrolledTo = window.scrollY + window.innerHeight;
+        const scrollDiff = document.body.scrollHeight - scrolledTo;
+        const isNearToBottom = scrollDiff <= loadLimit;
+        if (isNearToBottom && canFetchNextPage) {
+          fetchNextPage();
+        }
+      };
+      window.addEventListener('scroll', onscroll);
+
+      // If the content is less than the screen height, fetch the next page.
+      const hasNoScroll = document.body.scrollHeight <= window.innerHeight;
+      if (hasNoScroll && canFetchNextPage) {
+        fetchNextPage();
+      }
+
+      return () => {
+        window.removeEventListener('scroll', onscroll);
+      };
+    }
+    return () => { };
+  }, [hasNextPage, isFetchingNextPage, fetchNextPage]);
+};
diff --git a/src/i18n/index.js b/src/i18n/index.js
new file mode 100644
index 0000000000..d6d1738de6
--- /dev/null
+++ b/src/i18n/index.js
@@ -0,0 +1 @@
+export default [];
diff --git a/src/i18n/index.jsx b/src/i18n/index.jsx
deleted file mode 100644
index 8a014289b2..0000000000
--- a/src/i18n/index.jsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import arMessages from './messages/ar.json';
-import caMessages from './messages/ca.json';
-// no need to import en messages-- they are in the defaultMessage field
-import es419Messages from './messages/es_419.json';
-import frMessages from './messages/fr.json';
-import zhcnMessages from './messages/zh_CN.json';
-import heMessages from './messages/he.json';
-import idMessages from './messages/id.json';
-import kokrMessages from './messages/ko_kr.json';
-import plMessages from './messages/pl.json';
-import ptbrMessages from './messages/pt_br.json';
-import ruMessages from './messages/ru.json';
-import thMessages from './messages/th.json';
-import ukMessages from './messages/uk.json';
-
-const messages = {
-  ar: arMessages,
-  'es-419': es419Messages,
-  fr: frMessages,
-  'zh-cn': zhcnMessages,
-  ca: caMessages,
-  he: heMessages,
-  id: idMessages,
-  'ko-kr': kokrMessages,
-  pl: plMessages,
-  'pt-br': ptbrMessages,
-  ru: ruMessages,
-  th: thMessages,
-  uk: ukMessages,
-};
-
-export default messages;
diff --git a/src/i18n/messages/ar.json b/src/i18n/messages/ar.json
deleted file mode 100644
index b0a685e284..0000000000
--- a/src/i18n/messages/ar.json
+++ /dev/null
@@ -1,199 +0,0 @@
-{
-  "authoring.alert.error.connection": "We encountered a technical error when loading this page. This might be a temporary issue, so please try again in a few minutes. If the problem persists, please go to the {supportLink} for help.",
-  "authoring.loading": "Loading...",
-  "authoring.alert.error.permission": "You are not authorized to view this page. If you feel you should have access, please reach out to your course team admin to be given access.",
-  "authoring.alert.save.error.connection": "We encountered a technical error when applying changes. This might be a temporary issue, so please try again in a few minutes. If the problem persists, please go to the {supportLink} for help.",
-  "authoring.alert.support.text": "Support Page",
-  "course-authoring.pages-resources.app-settings-modal.button.cancel": "Cancel",
-  "course-authoring.pages-resources.app-settings-modal.button.save": "Save",
-  "course-authoring.pages-resources.app-settings-modal.button.saving": "Saving",
-  "course-authoring.pages-resources.app-settings-modal.button.saved": "Saved",
-  "course-authoring.pages-resources.app-settings-modal.button.retry": "Retry",
-  "course-authoring.pages-resources.app-settings-modal.badge.enabled": "Enabled",
-  "course-authoring.pages-resources.app-settings-modal.badge.disabled": "Disabled",
-  "course-authoring.pages-resources.calculator.heading": "Configure calculator",
-  "course-authoring.pages-resources.calculator.enable-calculator.label": "Calculator",
-  "course-authoring.pages-resources.calculator.enable-calculator.help": "The calculator supports numbers, operators, constants,\n      functions, and other mathematical concepts. When enabled, an icon to\n      access the calculator appears on all pages in the body of your course.",
-  "course-authoring.pages-resources.calculator.enable-calculator.link": "Learn more about the calculator",
-  "authoring.discussions.documentationPage": "Visit the {name} documentation page",
-  "authoring.discussions.formInstructions": "Complete the fields below to set up your discussion tool.",
-  "authoring.discussions.consumerKey": "Consumer Key",
-  "authoring.discussions.consumerKey.required": "Consumer key is a required field",
-  "authoring.discussions.consumerSecret": "Consumer Secret",
-  "authoring.discussions.consumerSecret.required": "Consumer secret is a required field",
-  "authoring.discussions.launchUrl": "Launch URL",
-  "authoring.discussions.launchUrl.required": "Launch URL is a required field",
-  "authoring.discussions.adminOnlyConfig": "{providerName} can only be configured by {platformName} administrators. Please contact {supportEmail} to enable this feature.",
-  "authoring.discussions.piiSharing": "Optionally share a user's username and/or email with the LTI provider:",
-  "authoring.discussions.piiShareUsername": "Share username",
-  "authoring.discussions.piiShareEmail": "Share email",
-  "authoring.discussions.appDocInstructions.contact": "Contact: {link}",
-  "authoring.discussions.appDocInstructions.documentationLink": "General documentation",
-  "authoring.discussions.appDocInstructions.accessibilityDocumentationLink": "Accessibility documentation",
-  "authoring.discussions.appDocInstructions.configurationLink": "Configuration documentation",
-  "authoring.discussions.appDocInstructions.learnMoreLink": "Learn more about {providerName}",
-  "authoring.discussions.appDocInstructions.linkTextHeading": "External help and documentation",
-  "authoring.discussions.appDocInstructions.linkText": "{link}",
-  "authoring.discussions.builtIn.divisionByGroup": "Cohorts",
-  "authoring.discussions.builtIn.divideByCohorts.label": "Divide discussions by cohorts",
-  "authoring.discussions.builtIn.divideByCohorts.help": "Learners will only be able to view and respond to discussions posted by members of their cohort.",
-  "authoring.discussions.builtIn.divideCourseTopicsByCohorts.label": "Divide course-wide discussion topics",
-  "authoring.discussions.builtIn.divideCourseTopicsByCohorts.help": "Choose which of your general course-wide discussion topics you would like to divide.",
-  "authoring.discussions.builtIn.divideGeneralTopic.label": "General",
-  "authoring.discussions.builtIn.divideQuestionsForTAsTopic.label": "Questions for the TAs",
-  "authoring.discussions.builtIn.visibilityInContext": "Visibility of in-context discussions",
-  "authoring.discussions.builtIn.inContextDiscussion.label": "In-context discussion",
-  "authoring.discussions.builtIn.inContextDiscussion.help": "Learners will be able to view or hide a discussion side panel to engage with discussion on the course unit page.",
-  "authoring.discussions.builtIn.gradedUnitPages.label": "Graded unit pages",
-  "authoring.discussions.builtIn.gradedUnitPages.help": "Allow learners to engage with discussion on all graded unit pages except timed exams.",
-  "authoring.discussions.builtIn.groupInContextSubsection.label": "Group in context discussion at the subsection level",
-  "authoring.discussions.builtIn.groupInContextSubsection.help": "Learners will be able to view any post in the sub-section no matter which unit page they are viewing. While this is not recommended, if your course has short learning sequences or low enrollment grouping may increase engagement.",
-  "authoring.discussions.builtIn.allowUnitLevelVisibility.label": "Allow visibility configuration for each course unit",
-  "authoring.discussions.builtIn.allowUnitLevelVisibility.help": "With this advanced setting enabled you will be able to override the global visibility setting and turn discussions on or off for each unit from the course outline view..",
-  "authoring.discussions.builtIn.anonymousPosting": "Anonymous posting",
-  "authoring.discussions.builtIn.allowAnonymous.label": "Allow anonymous discussion posts",
-  "authoring.discussions.builtIn.allowAnonymous.help": "If enabled, learners can create posts that are anonymous to all users.",
-  "authoring.discussions.builtIn.allowAnonymousPeers.label": "Allow anonymous discussion posts to peers",
-  "authoring.discussions.builtIn.allowAnonymousPeers.help": "Learners will be able to post anonymously to other peers but all posts will be visible to course staff.",
-  "authoring.discussions.discussionTopics": "Discussion topics",
-  "authoring.discussions.discussionTopics.label": "General discussion topics",
-  "authoring.discussions.discussionTopics.help": "Discussions can include general topics not contained to the course structure. All courses have a general topic by default.",
-  "authoring.discussions.discussionTopic.required": "Topic name is a required field",
-  "authoring.discussions.discussionTopic.alreadyExistError": "It looks like this name is already in use",
-  "authoring.discussions.addTopicButton": "Add topic",
-  "authoring.discussions.deleteButton": "Delete",
-  "authoring.discussions.cancelButton": "Cancel",
-  "authoring.discussions.discussionTopicDeletion.help": "edX recommends that you do not delete discussion topics once your course is running.",
-  "authoring.discussions.discussionTopicDeletion.label": "Delete this topic?",
-  "authoring.discussions.builtIn.renameGeneralTopic.label": "Rename general topic",
-  "authoring.discussions.generalTopicHelp.help": "This is the default discussion topic for your course.",
-  "authoring.discussions.builtIn.configureAdditionalTopic.label": "Configure topic",
-  "authoring.discussions.addTopicHelpText": "Choose a unique name for your topic",
-  "authoring.discussions.blackoutDates": "Discussion blackout dates",
-  "authoring.discussions.builtIn.blackoutDates.label": "Blackout dates",
-  "authoring.discussions.builtIn.blackoutDates.help": "Enter pairs of dates between which students cannot post to discussion forums. Inside the provided\n      brackets, enter an additional set of square brackets surrounding each pair of dates you add.\n      Format each pair of dates as [\"YYYY-MM-DD\", \"YYYY-MM-DD\"]. To specify times as well as dates,\n      format each pair as [\"YYYY-MM-DDTHH:MM\", \"YYYY-MM-DDTHH:MM\"]. Be sure to include the \"T\" between\n      the date and time. For example, an entry defining two blackout periods looks like this, including\n      the outer pair of square brackets: [[\"2015-09-15\", \"2015-09-21\"], [\"2015-10-01\", \"2015-10-08\"]]",
-  "authoring.discussions.builtIn.blackoutDates.formattingError": "There's a formatting error in your blackout dates.",
-  "authoring.topics.delete": "Delete Topic",
-  "authoring.topics.expand": "Expand",
-  "authoring.topics.collapse": "Collapse",
-  "authoring.discussions.configure.app": "Configure {name}",
-  "authoring.discussions.configure": "Configure discussions",
-  "authoring.discussions.backButton": "Back",
-  "authoring.discussions.saveButton": "Save",
-  "authoring.discussions.savingButton": "Saving",
-  "authoring.discussions.savedButton": "Saved",
-  "authoring.discussions.appConfigForm.appName-piazza": "Piazza",
-  "authoring.discussions.appConfigForm.appName-yellowdig": "Yellowdig",
-  "authoring.discussions.appConfigForm.appName-inscribe": "InScribe",
-  "authoring.discussions.appConfigForm.appName-discourse": "Discourse",
-  "authoring.discussions.appConfigForm.appName-ed-discuss": "Ed Discuss",
-  "authoring.discussions.appConfigForm.appName-legacy": "edX",
-  "authoring.discussions.heading": "Select a discussion tool for this course",
-  "authoring.discussions.supportedFeatures": "Supported features",
-  "authoring.discussions.supportedFeatureList-mobile-show": "Show supported features",
-  "authoring.discussions.supportedFeatureList-mobile-hide": "Hide supported features",
-  "authoring.discussions.noApps": "There are no discussions providers available for your course.",
-  "authoring.discussions.nextButton": "Next",
-  "authoring.discussions.appFullSupport": "Full support",
-  "authoring.discussions.appBasicSupport": "Basic support",
-  "authoring.discussions.selectApp": "Select {appName}",
-  "authoring.discussions.appList.appName-legacy": "edX",
-  "authoring.discussions.appList.appDescription-legacy": "Start conversations with other learners, ask questions, and interact with other learners in the course.",
-  "authoring.discussions.appList.appName-piazza": "Piazza",
-  "authoring.discussions.appList.appDescription-piazza": "Piazza is designed to connect students, TAs, and professors so every student can get the help they need when they need it.",
-  "authoring.discussions.appList.appName-yellowdig": "Yellowdig",
-  "authoring.discussions.appList.appDescription-yellowdig": "Yellowdig offers educators a gameful learning digital solution to improve student engagement by building learning communities for any course modality.",
-  "authoring.discussions.appList.appName-inscribe": "InScribe",
-  "authoring.discussions.appList.appDescription-inscribe": "InScribe leverages the power of community + artificial intelligence to connect individuals to the answers, resources, and people they need to succeed.",
-  "authoring.discussions.appList.appName-discourse": "Discourse",
-  "authoring.discussions.appList.appDescription-discourse": "Discourse is modern forum software for your community. Use it as a mailing list, discussion forum, long-form chat room, and more!",
-  "authoring.discussions.appList.appName-ed-discuss": "Ed Discuss",
-  "authoring.discussions.appList.appDescription-ed-discus": "Ed Discussion helps scale class communication in a beautiful and intuitive interface. Questions reach and benefit the whole class. Less emails, more time saved.",
-  "authoring.discussions.featureName-discussion-page": "Discussion page",
-  "authoring.discussions.featureName-embedded-course-sections": "Embedded course sections",
-  "authoring.discussions.featureName-advanced-in-context-discussion": "Advanced in context discussion",
-  "authoring.discussions.featureName-anonymous-posting": "Anonymous posting",
-  "authoring.discussions.featureName-automatic-learner-enrollment": "Automatic learner enrollment",
-  "authoring.discussions.featureName-blackout-discussion-dates": "Blackout discussion dates",
-  "authoring.discussions.featureName-community-ta-support": "Community TA support",
-  "authoring.discussions.featureName-course-cohort-support": "Course cohort support",
-  "authoring.discussions.featureName-direct-messages-from-instructors": "Direct messages from instructors",
-  "authoring.discussions.featureName-discussion-content-prompts": "Discussion content prompts",
-  "authoring.discussions.featureName-email-notifications": "Email notifications",
-  "authoring.discussions.featureName-graded-discussions": "Graded discussions",
-  "authoring.discussions.featureName-in-platform-notifications": "In-platform notifications",
-  "authoring.discussions.featureName-internationalization-support": "Internationalization support",
-  "authoring.discussions.featureName-lti-advanced-sharing-mode": "LTI advanced sharing mode",
-  "authoring.discussions.featureName-lti-basic-configuration": "LTI basic configuration",
-  "authoring.discussions.featureName-primary-discussion-app-experience": "Primary discussion app experience",
-  "authoring.discussions.featureName-question-&-discussion-support": "Question & discussion support",
-  "authoring.discussions.featureName-report/flag-content-to-moderators": "Report/flag content to moderators",
-  "authoring.discussions.featureName-research-data-events": "Research data events",
-  "authoring.discussions.featureName-simplified-in-context-discussion": "Simplified in-context discussion",
-  "authoring.discussions.featureName-user-mentions": "User mentions",
-  "authoring.discussions.featureName-wcag-2.1": "WCAG 2.1 support",
-  "authoring.discussions.wcag-2.0-support": "WCAG 2.0 support",
-  "authoring.discussions.settings": "Settings",
-  "authoring.discussions.applyButton": "Apply",
-  "authoring.discussions.applyingButton": "Applying",
-  "authoring.discussions.appliedButton": "Applied",
-  "authoring.discussions.providerSelection": "Provider selection",
-  "authoring.discussions.Incomplete": "Incomplete",
-  "course-authoring.pages-resources.heading": "الصفحات والموارد",
-  "course-authoring.pages-resources.resources.settings.button": "settings",
-  "course-authoring.pages-resources.viewLive.button": "View live",
-  "course-authoring.badge.enabled": "Enabled",
-  "authoring.examsettings.enableproctoredexams.help": "إذا تم تحديده ، يتم تفعيل الامتحانات المراقبة في مساقك.",
-  "authoring.examsettings.allowoptout.label": "السماح بالخروج من الامتحانات المُراقبة",
-  "authoring.examsettings.allowoptout.help": "\n                    If this value is \"Yes\", learners can choose to take proctored exams without proctoring.\n                    If this value is \"No\", all learners must take the exam with proctoring.\n                  ",
-  "authoring.examsettings.provider.label": "موفر المراقبة",
-  "authoring.examsettings.escalationemail.label": "البريد الإلكتروني لتصعيد مسار المراقبة",
-  "authoring.examsettings.escalationemail.help": "\n                  Required if \"proctortrack\" is selected as your proctoring provider. Enter an email address to be\n                  contacted by the support team whenever there are escalations (e.g. appeals, delayed reviews, etc.).\n                ",
-  "authoring.examsettings.createzendesk.label": "أنشئ تذاكر Zendesk لمحاولات الاختبار المشبوهة",
-  "authoring.examsettings.createzendesk.help": "إذا كانت هذه القيمة \"نعم\"، فسيتم إنشاء تذكرة Zendesk لمحاولات الاختبار المراقبة المشتبه فيها.",
-  "authoring.examsettings.submit": "إرسال",
-  "authoring.examsettings.alert.success": "\nتم حفظ إعدادات الاختبار Proctored بنجاح.\nيمكنك العودة إلى مقرّرك التعليمي في الاستوديو {studioCourseRunURL}",
-  "authoring.examsettings.alert.error": "\n            We encountered a technical error while trying to save proctored exam settings.\n            This might be a temporary issue, so please try again in a few minutes.\n            If the problem persists,\n            please go to the {support_link} for help.\n          ",
-  "authoring.examsettings.allowoptout.no": "لا",
-  "authoring.examsettings.allowoptout.yes": "نعم",
-  "authoring.examsettings.createzendesk.no": "لا",
-  "authoring.examsettings.createzendesk.yes": "نعم",
-  "authoring.examsettings.support.text": "Support Page",
-  "authoring.examsettings.escalationemail.enableproctoredexams.label": "تفعيل الامتحانات المراقَبة",
-  "authoring.examsettings.escalationemail.error.blank": "لا يمكن أن يكون حقل البريد الإلكتروني الخاص بتصعيد ProctorTrack فارغًا إذا كانمسار المراقبة هو المزود المحدد.",
-  "authoring.examsettings.escalationemail.error.invalid": "إن حقل البريد الإلكتروني للتصعيد في مسار المراقبة بتنسيق غير صحيح وغير صالح.",
-  "authoring.examsettings.error.single": "يوجد خطأ واحد في هذا النموذج.",
-  "authoring.examsettings.escalationemail.error.multiple": "يوجد {numOfErrors} خطأ في هذا النموذج.",
-  "authoring.examsettings.provider.help": "حدد مزود المراقبة الذي تريد استخدامه لتشغيل هذا المساق.",
-  "authoring.examsettings.provider.help.aftercoursestart": "لا يمكن تعديل مزود المعالجة بعد تاريخ بدء المساق.",
-  "header.links.content": "المحتوى",
-  "header.links.settings": "إعدادات الحساب",
-  "header.links.content.tools": "الأدوات",
-  "header.links.outline": "المخطّط الكلّي",
-  "header.links.updates": "التحديثات",
-  "header.links.pages": "الصفحات",
-  "header.links.filesAndUploads": "الملفات والتحميل ",
-  "header.links.textbooks": "الكتب",
-  "header.links.videoUploads": "تحميلات الفيديو",
-  "header.links.scheduleAndDetails": "وضع جدول لوحدة",
-  "header.links.grading": "التقييم",
-  "header.links.courseTeam": "فريق المساق",
-  "header.links.groupConfigurations": "إعدادات المجموعة",
-  "header.links.proctoredExamSettings": "إعدادات الامتحان المراقب",
-  "header.links.advancedSettings": "الإعدادات المتقدمة",
-  "header.links.certificates": "الشهادات",
-  "header.links.publisher": "ناشر",
-  "header.links.import": "استيراد",
-  "header.links.export": "تصدير",
-  "header.links.checklists": "قوائم المراجعة",
-  "header.user.menu.studio": "صفحة استوديو الرئيسية",
-  "header.user.menu.maintenance": "صيانة",
-  "header.user.menu.logout": "خروج",
-  "header.label.account.menu": "قائمة الحساب",
-  "header.label.account.menu.for": "قائمة الحساب للمستخدم {username}",
-  "header.label.main.nav": "الرئيسية",
-  "header.label.main.menu": "القائمة الرئيسية",
-  "header.label.main.header": "الرئيسية",
-  "header.label.secondary.nav": "ثانوي",
-  "header.label.courseOutline": "العودة إلى مخطط المساق في استوديو"
-}
\ No newline at end of file
diff --git a/src/i18n/messages/ca.json b/src/i18n/messages/ca.json
deleted file mode 100644
index 9e26dfeeb6..0000000000
--- a/src/i18n/messages/ca.json
+++ /dev/null
@@ -1 +0,0 @@
-{}
\ No newline at end of file
diff --git a/src/i18n/messages/es_419.json b/src/i18n/messages/es_419.json
deleted file mode 100644
index 8dc736327a..0000000000
--- a/src/i18n/messages/es_419.json
+++ /dev/null
@@ -1,199 +0,0 @@
-{
-  "authoring.alert.error.connection": "We encountered a technical error when loading this page. This might be a temporary issue, so please try again in a few minutes. If the problem persists, please go to the {supportLink} for help.",
-  "authoring.loading": "Cargando...",
-  "authoring.alert.error.permission": "You are not authorized to view this page. If you feel you should have access, please reach out to your course team admin to be given access.",
-  "authoring.alert.save.error.connection": "We encountered a technical error when applying changes. This might be a temporary issue, so please try again in a few minutes. If the problem persists, please go to the {supportLink} for help.",
-  "authoring.alert.support.text": "Support Page",
-  "course-authoring.pages-resources.app-settings-modal.button.cancel": "Cancelar",
-  "course-authoring.pages-resources.app-settings-modal.button.save": "Save",
-  "course-authoring.pages-resources.app-settings-modal.button.saving": "Saving",
-  "course-authoring.pages-resources.app-settings-modal.button.saved": "Saved",
-  "course-authoring.pages-resources.app-settings-modal.button.retry": "Retry",
-  "course-authoring.pages-resources.app-settings-modal.badge.enabled": "Habilitado",
-  "course-authoring.pages-resources.app-settings-modal.badge.disabled": "Deshabilitado",
-  "course-authoring.pages-resources.calculator.heading": "Configure calculator",
-  "course-authoring.pages-resources.calculator.enable-calculator.label": "Calculadora",
-  "course-authoring.pages-resources.calculator.enable-calculator.help": "The calculator supports numbers, operators, constants,\n      functions, and other mathematical concepts. When enabled, an icon to\n      access the calculator appears on all pages in the body of your course.",
-  "course-authoring.pages-resources.calculator.enable-calculator.link": "Learn more about the calculator",
-  "authoring.discussions.documentationPage": "Visit the {name} documentation page",
-  "authoring.discussions.formInstructions": "Complete the fields below to set up your discussion tool.",
-  "authoring.discussions.consumerKey": "Consumer Key",
-  "authoring.discussions.consumerKey.required": "Consumer key is a required field",
-  "authoring.discussions.consumerSecret": "Consumer Secret",
-  "authoring.discussions.consumerSecret.required": "Consumer secret is a required field",
-  "authoring.discussions.launchUrl": "Launch URL",
-  "authoring.discussions.launchUrl.required": "Launch URL is a required field",
-  "authoring.discussions.adminOnlyConfig": "{providerName} can only be configured by {platformName} administrators. Please contact {supportEmail} to enable this feature.",
-  "authoring.discussions.piiSharing": "Optionally share a user's username and/or email with the LTI provider:",
-  "authoring.discussions.piiShareUsername": "Share username",
-  "authoring.discussions.piiShareEmail": "Share email",
-  "authoring.discussions.appDocInstructions.contact": "Contact: {link}",
-  "authoring.discussions.appDocInstructions.documentationLink": "General documentation",
-  "authoring.discussions.appDocInstructions.accessibilityDocumentationLink": "Accessibility documentation",
-  "authoring.discussions.appDocInstructions.configurationLink": "Configuration documentation",
-  "authoring.discussions.appDocInstructions.learnMoreLink": "Learn more about {providerName}",
-  "authoring.discussions.appDocInstructions.linkTextHeading": "External help and documentation",
-  "authoring.discussions.appDocInstructions.linkText": "{link}",
-  "authoring.discussions.builtIn.divisionByGroup": "Cohortes",
-  "authoring.discussions.builtIn.divideByCohorts.label": "Divide discussions by cohorts",
-  "authoring.discussions.builtIn.divideByCohorts.help": "Learners will only be able to view and respond to discussions posted by members of their cohort.",
-  "authoring.discussions.builtIn.divideCourseTopicsByCohorts.label": "Divide course-wide discussion topics",
-  "authoring.discussions.builtIn.divideCourseTopicsByCohorts.help": "Choose which of your general course-wide discussion topics you would like to divide.",
-  "authoring.discussions.builtIn.divideGeneralTopic.label": "General",
-  "authoring.discussions.builtIn.divideQuestionsForTAsTopic.label": "Questions for the TAs",
-  "authoring.discussions.builtIn.visibilityInContext": "Visibility of in-context discussions",
-  "authoring.discussions.builtIn.inContextDiscussion.label": "In-context discussion",
-  "authoring.discussions.builtIn.inContextDiscussion.help": "Learners will be able to view or hide a discussion side panel to engage with discussion on the course unit page.",
-  "authoring.discussions.builtIn.gradedUnitPages.label": "Graded unit pages",
-  "authoring.discussions.builtIn.gradedUnitPages.help": "Allow learners to engage with discussion on all graded unit pages except timed exams.",
-  "authoring.discussions.builtIn.groupInContextSubsection.label": "Group in context discussion at the subsection level",
-  "authoring.discussions.builtIn.groupInContextSubsection.help": "Learners will be able to view any post in the sub-section no matter which unit page they are viewing. While this is not recommended, if your course has short learning sequences or low enrollment grouping may increase engagement.",
-  "authoring.discussions.builtIn.allowUnitLevelVisibility.label": "Allow visibility configuration for each course unit",
-  "authoring.discussions.builtIn.allowUnitLevelVisibility.help": "With this advanced setting enabled you will be able to override the global visibility setting and turn discussions on or off for each unit from the course outline view..",
-  "authoring.discussions.builtIn.anonymousPosting": "Anonymous posting",
-  "authoring.discussions.builtIn.allowAnonymous.label": "Allow anonymous discussion posts",
-  "authoring.discussions.builtIn.allowAnonymous.help": "If enabled, learners can create posts that are anonymous to all users.",
-  "authoring.discussions.builtIn.allowAnonymousPeers.label": "Allow anonymous discussion posts to peers",
-  "authoring.discussions.builtIn.allowAnonymousPeers.help": "Learners will be able to post anonymously to other peers but all posts will be visible to course staff.",
-  "authoring.discussions.discussionTopics": "Discussion topics",
-  "authoring.discussions.discussionTopics.label": "General discussion topics",
-  "authoring.discussions.discussionTopics.help": "Discussions can include general topics not contained to the course structure. All courses have a general topic by default.",
-  "authoring.discussions.discussionTopic.required": "Topic name is a required field",
-  "authoring.discussions.discussionTopic.alreadyExistError": "It looks like this name is already in use",
-  "authoring.discussions.addTopicButton": "Add topic",
-  "authoring.discussions.deleteButton": "Borrar",
-  "authoring.discussions.cancelButton": "Cancelar",
-  "authoring.discussions.discussionTopicDeletion.help": "edX recommends that you do not delete discussion topics once your course is running.",
-  "authoring.discussions.discussionTopicDeletion.label": "Delete this topic?",
-  "authoring.discussions.builtIn.renameGeneralTopic.label": "Rename general topic",
-  "authoring.discussions.generalTopicHelp.help": "This is the default discussion topic for your course.",
-  "authoring.discussions.builtIn.configureAdditionalTopic.label": "Configure topic",
-  "authoring.discussions.addTopicHelpText": "Choose a unique name for your topic",
-  "authoring.discussions.blackoutDates": "Discussion blackout dates",
-  "authoring.discussions.builtIn.blackoutDates.label": "Blackout dates",
-  "authoring.discussions.builtIn.blackoutDates.help": "Enter pairs of dates between which students cannot post to discussion forums. Inside the provided\n      brackets, enter an additional set of square brackets surrounding each pair of dates you add.\n      Format each pair of dates as [\"YYYY-MM-DD\", \"YYYY-MM-DD\"]. To specify times as well as dates,\n      format each pair as [\"YYYY-MM-DDTHH:MM\", \"YYYY-MM-DDTHH:MM\"]. Be sure to include the \"T\" between\n      the date and time. For example, an entry defining two blackout periods looks like this, including\n      the outer pair of square brackets: [[\"2015-09-15\", \"2015-09-21\"], [\"2015-10-01\", \"2015-10-08\"]]",
-  "authoring.discussions.builtIn.blackoutDates.formattingError": "There's a formatting error in your blackout dates.",
-  "authoring.topics.delete": "Delete Topic",
-  "authoring.topics.expand": "Expand",
-  "authoring.topics.collapse": "Collapse",
-  "authoring.discussions.configure.app": "Configure {name}",
-  "authoring.discussions.configure": "Configure discussions",
-  "authoring.discussions.backButton": "Volver atrás",
-  "authoring.discussions.saveButton": "Guardar",
-  "authoring.discussions.savingButton": "Guardando",
-  "authoring.discussions.savedButton": "Guardado",
-  "authoring.discussions.appConfigForm.appName-piazza": "Piazza",
-  "authoring.discussions.appConfigForm.appName-yellowdig": "Yellowdig",
-  "authoring.discussions.appConfigForm.appName-inscribe": "InScribe",
-  "authoring.discussions.appConfigForm.appName-discourse": "Discourse",
-  "authoring.discussions.appConfigForm.appName-ed-discuss": "Ed Discuss",
-  "authoring.discussions.appConfigForm.appName-legacy": "edX",
-  "authoring.discussions.heading": "Select a discussion tool for this course",
-  "authoring.discussions.supportedFeatures": "Supported features",
-  "authoring.discussions.supportedFeatureList-mobile-show": "Show supported features",
-  "authoring.discussions.supportedFeatureList-mobile-hide": "Hide supported features",
-  "authoring.discussions.noApps": "There are no discussions providers available for your course.",
-  "authoring.discussions.nextButton": "Siguiente",
-  "authoring.discussions.appFullSupport": "Full support",
-  "authoring.discussions.appBasicSupport": "Basic support",
-  "authoring.discussions.selectApp": "Select {appName}",
-  "authoring.discussions.appList.appName-legacy": "edX",
-  "authoring.discussions.appList.appDescription-legacy": "Start conversations with other learners, ask questions, and interact with other learners in the course.",
-  "authoring.discussions.appList.appName-piazza": "Piazza",
-  "authoring.discussions.appList.appDescription-piazza": "Piazza is designed to connect students, TAs, and professors so every student can get the help they need when they need it.",
-  "authoring.discussions.appList.appName-yellowdig": "Yellowdig",
-  "authoring.discussions.appList.appDescription-yellowdig": "Yellowdig offers educators a gameful learning digital solution to improve student engagement by building learning communities for any course modality.",
-  "authoring.discussions.appList.appName-inscribe": "InScribe",
-  "authoring.discussions.appList.appDescription-inscribe": "InScribe leverages the power of community + artificial intelligence to connect individuals to the answers, resources, and people they need to succeed.",
-  "authoring.discussions.appList.appName-discourse": "Discourse",
-  "authoring.discussions.appList.appDescription-discourse": "Discourse is modern forum software for your community. Use it as a mailing list, discussion forum, long-form chat room, and more!",
-  "authoring.discussions.appList.appName-ed-discuss": "Ed Discuss",
-  "authoring.discussions.appList.appDescription-ed-discus": "Ed Discussion helps scale class communication in a beautiful and intuitive interface. Questions reach and benefit the whole class. Less emails, more time saved.",
-  "authoring.discussions.featureName-discussion-page": "Discussion page",
-  "authoring.discussions.featureName-embedded-course-sections": "Embedded course sections",
-  "authoring.discussions.featureName-advanced-in-context-discussion": "Advanced in context discussion",
-  "authoring.discussions.featureName-anonymous-posting": "Anonymous posting",
-  "authoring.discussions.featureName-automatic-learner-enrollment": "Automatic learner enrollment",
-  "authoring.discussions.featureName-blackout-discussion-dates": "Blackout discussion dates",
-  "authoring.discussions.featureName-community-ta-support": "Community TA support",
-  "authoring.discussions.featureName-course-cohort-support": "Course cohort support",
-  "authoring.discussions.featureName-direct-messages-from-instructors": "Direct messages from instructors",
-  "authoring.discussions.featureName-discussion-content-prompts": "Discussion content prompts",
-  "authoring.discussions.featureName-email-notifications": "Notificaciones por Email",
-  "authoring.discussions.featureName-graded-discussions": "Graded discussions",
-  "authoring.discussions.featureName-in-platform-notifications": "In-platform notifications",
-  "authoring.discussions.featureName-internationalization-support": "Internationalization support",
-  "authoring.discussions.featureName-lti-advanced-sharing-mode": "LTI advanced sharing mode",
-  "authoring.discussions.featureName-lti-basic-configuration": "LTI basic configuration",
-  "authoring.discussions.featureName-primary-discussion-app-experience": "Primary discussion app experience",
-  "authoring.discussions.featureName-question-&-discussion-support": "Question & discussion support",
-  "authoring.discussions.featureName-report/flag-content-to-moderators": "Report/flag content to moderators",
-  "authoring.discussions.featureName-research-data-events": "Research data events",
-  "authoring.discussions.featureName-simplified-in-context-discussion": "Simplified in-context discussion",
-  "authoring.discussions.featureName-user-mentions": "User mentions",
-  "authoring.discussions.featureName-wcag-2.1": "WCAG 2.1 support",
-  "authoring.discussions.wcag-2.0-support": "WCAG 2.0 support",
-  "authoring.discussions.settings": "Configuración",
-  "authoring.discussions.applyButton": "Aplicar",
-  "authoring.discussions.applyingButton": "Applying",
-  "authoring.discussions.appliedButton": "Applied",
-  "authoring.discussions.providerSelection": "Provider selection",
-  "authoring.discussions.Incomplete": "Incompleto",
-  "course-authoring.pages-resources.heading": "Pages & Resources",
-  "course-authoring.pages-resources.resources.settings.button": "settings",
-  "course-authoring.pages-resources.viewLive.button": "View live",
-  "course-authoring.badge.enabled": "Habilitado",
-  "authoring.examsettings.enableproctoredexams.help": "If checked, proctored exams are enabled in your course.",
-  "authoring.examsettings.allowoptout.label": "Habilitar Opción de No Tomar Exámenes Supervisados",
-  "authoring.examsettings.allowoptout.help": "\n                    If this value is \"Yes\", learners can choose to take proctored exams without proctoring.\n                    If this value is \"No\", all learners must take the exam with proctoring.\n                  ",
-  "authoring.examsettings.provider.label": "Proveedor de Supervisión",
-  "authoring.examsettings.escalationemail.label": "Proctortrack Escalation Email",
-  "authoring.examsettings.escalationemail.help": "\n                  Required if \"proctortrack\" is selected as your proctoring provider. Enter an email address to be\n                  contacted by the support team whenever there are escalations (e.g. appeals, delayed reviews, etc.).\n                ",
-  "authoring.examsettings.createzendesk.label": "Create Zendesk Tickets for Suspicious Proctored Exam Attempts",
-  "authoring.examsettings.createzendesk.help": "If this value is \"Yes\", a Zendesk ticket will be created for suspicious proctored exam attempts.",
-  "authoring.examsettings.submit": "Enviar",
-  "authoring.examsettings.alert.success": "\n            Proctored exam settings saved successfully.\n            You can go back to your course in Studio {studioCourseRunURL}.\n          ",
-  "authoring.examsettings.alert.error": "\n            We encountered a technical error while trying to save proctored exam settings.\n            This might be a temporary issue, so please try again in a few minutes.\n            If the problem persists,\n            please go to the {support_link} for help.\n          ",
-  "authoring.examsettings.allowoptout.no": "No",
-  "authoring.examsettings.allowoptout.yes": "Si",
-  "authoring.examsettings.createzendesk.no": "No",
-  "authoring.examsettings.createzendesk.yes": "Si",
-  "authoring.examsettings.support.text": "Support Page",
-  "authoring.examsettings.escalationemail.enableproctoredexams.label": "Habilitar examenes supervisados",
-  "authoring.examsettings.escalationemail.error.blank": "The Proctortrack Escalation Email field cannot be empty if proctortrack is the selected provider.",
-  "authoring.examsettings.escalationemail.error.invalid": "The Proctortrack Escalation Email field is in the wrong format and is not valid.",
-  "authoring.examsettings.error.single": "There is 1 error in this form.",
-  "authoring.examsettings.escalationemail.error.multiple": "There are {numOfErrors} errors in this form.",
-  "authoring.examsettings.provider.help": "Select the proctoring provider you want to use for this course run.",
-  "authoring.examsettings.provider.help.aftercoursestart": "Proctoring provider cannot be modified after course start date.",
-  "header.links.content": "Contenido",
-  "header.links.settings": "Configuración",
-  "header.links.content.tools": "Herramientas",
-  "header.links.outline": "Outline",
-  "header.links.updates": "Actualizaciones",
-  "header.links.pages": "Páginas",
-  "header.links.filesAndUploads": "Administración de archivos",
-  "header.links.textbooks": "Libros de texto",
-  "header.links.videoUploads": "Video Uploads",
-  "header.links.scheduleAndDetails": "Calendario y detalles",
-  "header.links.grading": "Calificaciones",
-  "header.links.courseTeam": "Equipo del curso",
-  "header.links.groupConfigurations": "Configuraciones de Grupo",
-  "header.links.proctoredExamSettings": "Proctored Exam Settings",
-  "header.links.advancedSettings": "Configuración avanzada",
-  "header.links.certificates": "Certificados",
-  "header.links.publisher": "Publisher",
-  "header.links.import": "Importar",
-  "header.links.export": "Exportar",
-  "header.links.checklists": "Listas de chequeo",
-  "header.user.menu.studio": "Studio Home",
-  "header.user.menu.maintenance": "Mantenimiento",
-  "header.user.menu.logout": "Cerrar sesión",
-  "header.label.account.menu": "Menú de la cuenta",
-  "header.label.account.menu.for": "Account menu for {username}",
-  "header.label.main.nav": "Principal",
-  "header.label.main.menu": "Menú Principal",
-  "header.label.main.header": "Principal",
-  "header.label.secondary.nav": "Secondary",
-  "header.label.courseOutline": "Back to course outline in Studio"
-}
\ No newline at end of file
diff --git a/src/i18n/messages/fr.json b/src/i18n/messages/fr.json
deleted file mode 100644
index ba4fcc3ef6..0000000000
--- a/src/i18n/messages/fr.json
+++ /dev/null
@@ -1,199 +0,0 @@
-{
-  "authoring.alert.error.connection": "We encountered a technical error when loading this page. This might be a temporary issue, so please try again in a few minutes. If the problem persists, please go to the {supportLink} for help.",
-  "authoring.loading": "Loading...",
-  "authoring.alert.error.permission": "You are not authorized to view this page. If you feel you should have access, please reach out to your course team admin to be given access.",
-  "authoring.alert.save.error.connection": "We encountered a technical error when applying changes. This might be a temporary issue, so please try again in a few minutes. If the problem persists, please go to the {supportLink} for help.",
-  "authoring.alert.support.text": "Support Page",
-  "course-authoring.pages-resources.app-settings-modal.button.cancel": "Cancel",
-  "course-authoring.pages-resources.app-settings-modal.button.save": "Save",
-  "course-authoring.pages-resources.app-settings-modal.button.saving": "Saving",
-  "course-authoring.pages-resources.app-settings-modal.button.saved": "Saved",
-  "course-authoring.pages-resources.app-settings-modal.button.retry": "Retry",
-  "course-authoring.pages-resources.app-settings-modal.badge.enabled": "Enabled",
-  "course-authoring.pages-resources.app-settings-modal.badge.disabled": "Disabled",
-  "course-authoring.pages-resources.calculator.heading": "Configure calculator",
-  "course-authoring.pages-resources.calculator.enable-calculator.label": "Calculator",
-  "course-authoring.pages-resources.calculator.enable-calculator.help": "The calculator supports numbers, operators, constants,\n      functions, and other mathematical concepts. When enabled, an icon to\n      access the calculator appears on all pages in the body of your course.",
-  "course-authoring.pages-resources.calculator.enable-calculator.link": "Learn more about the calculator",
-  "authoring.discussions.documentationPage": "Visit the {name} documentation page",
-  "authoring.discussions.formInstructions": "Complete the fields below to set up your discussion tool.",
-  "authoring.discussions.consumerKey": "Consumer Key",
-  "authoring.discussions.consumerKey.required": "Consumer key is a required field",
-  "authoring.discussions.consumerSecret": "Consumer Secret",
-  "authoring.discussions.consumerSecret.required": "Consumer secret is a required field",
-  "authoring.discussions.launchUrl": "Launch URL",
-  "authoring.discussions.launchUrl.required": "Launch URL is a required field",
-  "authoring.discussions.adminOnlyConfig": "{providerName} can only be configured by {platformName} administrators. Please contact {supportEmail} to enable this feature.",
-  "authoring.discussions.piiSharing": "Optionally share a user's username and/or email with the LTI provider:",
-  "authoring.discussions.piiShareUsername": "Share username",
-  "authoring.discussions.piiShareEmail": "Share email",
-  "authoring.discussions.appDocInstructions.contact": "Contact: {link}",
-  "authoring.discussions.appDocInstructions.documentationLink": "General documentation",
-  "authoring.discussions.appDocInstructions.accessibilityDocumentationLink": "Accessibility documentation",
-  "authoring.discussions.appDocInstructions.configurationLink": "Configuration documentation",
-  "authoring.discussions.appDocInstructions.learnMoreLink": "Learn more about {providerName}",
-  "authoring.discussions.appDocInstructions.linkTextHeading": "External help and documentation",
-  "authoring.discussions.appDocInstructions.linkText": "{link}",
-  "authoring.discussions.builtIn.divisionByGroup": "Cohorts",
-  "authoring.discussions.builtIn.divideByCohorts.label": "Divide discussions by cohorts",
-  "authoring.discussions.builtIn.divideByCohorts.help": "Learners will only be able to view and respond to discussions posted by members of their cohort.",
-  "authoring.discussions.builtIn.divideCourseTopicsByCohorts.label": "Divide course-wide discussion topics",
-  "authoring.discussions.builtIn.divideCourseTopicsByCohorts.help": "Choose which of your general course-wide discussion topics you would like to divide.",
-  "authoring.discussions.builtIn.divideGeneralTopic.label": "General",
-  "authoring.discussions.builtIn.divideQuestionsForTAsTopic.label": "Questions for the TAs",
-  "authoring.discussions.builtIn.visibilityInContext": "Visibility of in-context discussions",
-  "authoring.discussions.builtIn.inContextDiscussion.label": "In-context discussion",
-  "authoring.discussions.builtIn.inContextDiscussion.help": "Learners will be able to view or hide a discussion side panel to engage with discussion on the course unit page.",
-  "authoring.discussions.builtIn.gradedUnitPages.label": "Graded unit pages",
-  "authoring.discussions.builtIn.gradedUnitPages.help": "Allow learners to engage with discussion on all graded unit pages except timed exams.",
-  "authoring.discussions.builtIn.groupInContextSubsection.label": "Group in context discussion at the subsection level",
-  "authoring.discussions.builtIn.groupInContextSubsection.help": "Learners will be able to view any post in the sub-section no matter which unit page they are viewing. While this is not recommended, if your course has short learning sequences or low enrollment grouping may increase engagement.",
-  "authoring.discussions.builtIn.allowUnitLevelVisibility.label": "Allow visibility configuration for each course unit",
-  "authoring.discussions.builtIn.allowUnitLevelVisibility.help": "With this advanced setting enabled you will be able to override the global visibility setting and turn discussions on or off for each unit from the course outline view..",
-  "authoring.discussions.builtIn.anonymousPosting": "Anonymous posting",
-  "authoring.discussions.builtIn.allowAnonymous.label": "Allow anonymous discussion posts",
-  "authoring.discussions.builtIn.allowAnonymous.help": "If enabled, learners can create posts that are anonymous to all users.",
-  "authoring.discussions.builtIn.allowAnonymousPeers.label": "Allow anonymous discussion posts to peers",
-  "authoring.discussions.builtIn.allowAnonymousPeers.help": "Learners will be able to post anonymously to other peers but all posts will be visible to course staff.",
-  "authoring.discussions.discussionTopics": "Discussion topics",
-  "authoring.discussions.discussionTopics.label": "General discussion topics",
-  "authoring.discussions.discussionTopics.help": "Discussions can include general topics not contained to the course structure. All courses have a general topic by default.",
-  "authoring.discussions.discussionTopic.required": "Topic name is a required field",
-  "authoring.discussions.discussionTopic.alreadyExistError": "It looks like this name is already in use",
-  "authoring.discussions.addTopicButton": "Add topic",
-  "authoring.discussions.deleteButton": "Delete",
-  "authoring.discussions.cancelButton": "Cancel",
-  "authoring.discussions.discussionTopicDeletion.help": "edX recommends that you do not delete discussion topics once your course is running.",
-  "authoring.discussions.discussionTopicDeletion.label": "Delete this topic?",
-  "authoring.discussions.builtIn.renameGeneralTopic.label": "Rename general topic",
-  "authoring.discussions.generalTopicHelp.help": "This is the default discussion topic for your course.",
-  "authoring.discussions.builtIn.configureAdditionalTopic.label": "Configure topic",
-  "authoring.discussions.addTopicHelpText": "Choose a unique name for your topic",
-  "authoring.discussions.blackoutDates": "Discussion blackout dates",
-  "authoring.discussions.builtIn.blackoutDates.label": "Blackout dates",
-  "authoring.discussions.builtIn.blackoutDates.help": "Enter pairs of dates between which students cannot post to discussion forums. Inside the provided\n      brackets, enter an additional set of square brackets surrounding each pair of dates you add.\n      Format each pair of dates as [\"YYYY-MM-DD\", \"YYYY-MM-DD\"]. To specify times as well as dates,\n      format each pair as [\"YYYY-MM-DDTHH:MM\", \"YYYY-MM-DDTHH:MM\"]. Be sure to include the \"T\" between\n      the date and time. For example, an entry defining two blackout periods looks like this, including\n      the outer pair of square brackets: [[\"2015-09-15\", \"2015-09-21\"], [\"2015-10-01\", \"2015-10-08\"]]",
-  "authoring.discussions.builtIn.blackoutDates.formattingError": "There's a formatting error in your blackout dates.",
-  "authoring.topics.delete": "Delete Topic",
-  "authoring.topics.expand": "Expand",
-  "authoring.topics.collapse": "Collapse",
-  "authoring.discussions.configure.app": "Configure {name}",
-  "authoring.discussions.configure": "Configure discussions",
-  "authoring.discussions.backButton": "Back",
-  "authoring.discussions.saveButton": "Save",
-  "authoring.discussions.savingButton": "Saving",
-  "authoring.discussions.savedButton": "Saved",
-  "authoring.discussions.appConfigForm.appName-piazza": "Piazza",
-  "authoring.discussions.appConfigForm.appName-yellowdig": "Yellowdig",
-  "authoring.discussions.appConfigForm.appName-inscribe": "InScribe",
-  "authoring.discussions.appConfigForm.appName-discourse": "Discourse",
-  "authoring.discussions.appConfigForm.appName-ed-discuss": "Ed Discuss",
-  "authoring.discussions.appConfigForm.appName-legacy": "edX",
-  "authoring.discussions.heading": "Select a discussion tool for this course",
-  "authoring.discussions.supportedFeatures": "Supported features",
-  "authoring.discussions.supportedFeatureList-mobile-show": "Show supported features",
-  "authoring.discussions.supportedFeatureList-mobile-hide": "Hide supported features",
-  "authoring.discussions.noApps": "There are no discussions providers available for your course.",
-  "authoring.discussions.nextButton": "Next",
-  "authoring.discussions.appFullSupport": "Full support",
-  "authoring.discussions.appBasicSupport": "Basic support",
-  "authoring.discussions.selectApp": "Select {appName}",
-  "authoring.discussions.appList.appName-legacy": "edX",
-  "authoring.discussions.appList.appDescription-legacy": "Start conversations with other learners, ask questions, and interact with other learners in the course.",
-  "authoring.discussions.appList.appName-piazza": "Piazza",
-  "authoring.discussions.appList.appDescription-piazza": "Piazza is designed to connect students, TAs, and professors so every student can get the help they need when they need it.",
-  "authoring.discussions.appList.appName-yellowdig": "Yellowdig",
-  "authoring.discussions.appList.appDescription-yellowdig": "Yellowdig offers educators a gameful learning digital solution to improve student engagement by building learning communities for any course modality.",
-  "authoring.discussions.appList.appName-inscribe": "InScribe",
-  "authoring.discussions.appList.appDescription-inscribe": "InScribe leverages the power of community + artificial intelligence to connect individuals to the answers, resources, and people they need to succeed.",
-  "authoring.discussions.appList.appName-discourse": "Discourse",
-  "authoring.discussions.appList.appDescription-discourse": "Discourse is modern forum software for your community. Use it as a mailing list, discussion forum, long-form chat room, and more!",
-  "authoring.discussions.appList.appName-ed-discuss": "Ed Discuss",
-  "authoring.discussions.appList.appDescription-ed-discus": "Ed Discussion helps scale class communication in a beautiful and intuitive interface. Questions reach and benefit the whole class. Less emails, more time saved.",
-  "authoring.discussions.featureName-discussion-page": "Discussion page",
-  "authoring.discussions.featureName-embedded-course-sections": "Embedded course sections",
-  "authoring.discussions.featureName-advanced-in-context-discussion": "Advanced in context discussion",
-  "authoring.discussions.featureName-anonymous-posting": "Anonymous posting",
-  "authoring.discussions.featureName-automatic-learner-enrollment": "Automatic learner enrollment",
-  "authoring.discussions.featureName-blackout-discussion-dates": "Blackout discussion dates",
-  "authoring.discussions.featureName-community-ta-support": "Community TA support",
-  "authoring.discussions.featureName-course-cohort-support": "Course cohort support",
-  "authoring.discussions.featureName-direct-messages-from-instructors": "Direct messages from instructors",
-  "authoring.discussions.featureName-discussion-content-prompts": "Discussion content prompts",
-  "authoring.discussions.featureName-email-notifications": "Email notifications",
-  "authoring.discussions.featureName-graded-discussions": "Graded discussions",
-  "authoring.discussions.featureName-in-platform-notifications": "In-platform notifications",
-  "authoring.discussions.featureName-internationalization-support": "Internationalization support",
-  "authoring.discussions.featureName-lti-advanced-sharing-mode": "LTI advanced sharing mode",
-  "authoring.discussions.featureName-lti-basic-configuration": "LTI basic configuration",
-  "authoring.discussions.featureName-primary-discussion-app-experience": "Primary discussion app experience",
-  "authoring.discussions.featureName-question-&-discussion-support": "Question & discussion support",
-  "authoring.discussions.featureName-report/flag-content-to-moderators": "Report/flag content to moderators",
-  "authoring.discussions.featureName-research-data-events": "Research data events",
-  "authoring.discussions.featureName-simplified-in-context-discussion": "Simplified in-context discussion",
-  "authoring.discussions.featureName-user-mentions": "User mentions",
-  "authoring.discussions.featureName-wcag-2.1": "WCAG 2.1 support",
-  "authoring.discussions.wcag-2.0-support": "WCAG 2.0 support",
-  "authoring.discussions.settings": "Settings",
-  "authoring.discussions.applyButton": "Apply",
-  "authoring.discussions.applyingButton": "Applying",
-  "authoring.discussions.appliedButton": "Applied",
-  "authoring.discussions.providerSelection": "Provider selection",
-  "authoring.discussions.Incomplete": "Incomplete",
-  "course-authoring.pages-resources.heading": "Pages & Resources",
-  "course-authoring.pages-resources.resources.settings.button": "settings",
-  "course-authoring.pages-resources.viewLive.button": "View live",
-  "course-authoring.badge.enabled": "Enabled",
-  "authoring.examsettings.enableproctoredexams.help": "If checked, proctored exams are enabled in your course.",
-  "authoring.examsettings.allowoptout.label": "Allow Opting Out of Proctored Exams",
-  "authoring.examsettings.allowoptout.help": "\n                    If this value is \"Yes\", learners can choose to take proctored exams without proctoring.\n                    If this value is \"No\", all learners must take the exam with proctoring.\n                  ",
-  "authoring.examsettings.provider.label": "Proctoring Provider",
-  "authoring.examsettings.escalationemail.label": "Proctortrack Escalation Email",
-  "authoring.examsettings.escalationemail.help": "\n                  Required if \"proctortrack\" is selected as your proctoring provider. Enter an email address to be\n                  contacted by the support team whenever there are escalations (e.g. appeals, delayed reviews, etc.).\n                ",
-  "authoring.examsettings.createzendesk.label": "Create Zendesk Tickets for Suspicious Proctored Exam Attempts",
-  "authoring.examsettings.createzendesk.help": "If this value is \"Yes\", a Zendesk ticket will be created for suspicious proctored exam attempts.",
-  "authoring.examsettings.submit": "Submit",
-  "authoring.examsettings.alert.success": "\n            Proctored exam settings saved successfully.\n            You can go back to your course in Studio {studioCourseRunURL}.\n          ",
-  "authoring.examsettings.alert.error": "\n            We encountered a technical error while trying to save proctored exam settings.\n            This might be a temporary issue, so please try again in a few minutes.\n            If the problem persists,\n            please go to the {support_link} for help.\n          ",
-  "authoring.examsettings.allowoptout.no": "No",
-  "authoring.examsettings.allowoptout.yes": "Yes",
-  "authoring.examsettings.createzendesk.no": "No",
-  "authoring.examsettings.createzendesk.yes": "Yes",
-  "authoring.examsettings.support.text": "Support Page",
-  "authoring.examsettings.escalationemail.enableproctoredexams.label": "Enable Proctored Exams",
-  "authoring.examsettings.escalationemail.error.blank": "The Proctortrack Escalation Email field cannot be empty if proctortrack is the selected provider.",
-  "authoring.examsettings.escalationemail.error.invalid": "The Proctortrack Escalation Email field is in the wrong format and is not valid.",
-  "authoring.examsettings.error.single": "There is 1 error in this form.",
-  "authoring.examsettings.escalationemail.error.multiple": "There are {numOfErrors} errors in this form.",
-  "authoring.examsettings.provider.help": "Select the proctoring provider you want to use for this course run.",
-  "authoring.examsettings.provider.help.aftercoursestart": "Proctoring provider cannot be modified after course start date.",
-  "header.links.content": "Content",
-  "header.links.settings": "Settings",
-  "header.links.content.tools": "Tools",
-  "header.links.outline": "Outline",
-  "header.links.updates": "Updates",
-  "header.links.pages": "Pages",
-  "header.links.filesAndUploads": "Files & Uploads",
-  "header.links.textbooks": "Textbooks",
-  "header.links.videoUploads": "Video Uploads",
-  "header.links.scheduleAndDetails": "Schedule & Details",
-  "header.links.grading": "Grading",
-  "header.links.courseTeam": "Course Team",
-  "header.links.groupConfigurations": "Group Configurations",
-  "header.links.proctoredExamSettings": "Proctored Exam Settings",
-  "header.links.advancedSettings": "Advanced Settings",
-  "header.links.certificates": "Certificates",
-  "header.links.publisher": "Publisher",
-  "header.links.import": "Import",
-  "header.links.export": "Export",
-  "header.links.checklists": "Checklists",
-  "header.user.menu.studio": "Studio Home",
-  "header.user.menu.maintenance": "Maintenance",
-  "header.user.menu.logout": "Logout",
-  "header.label.account.menu": "Account Menu",
-  "header.label.account.menu.for": "Account menu for {username}",
-  "header.label.main.nav": "Main",
-  "header.label.main.menu": "Main Menu",
-  "header.label.main.header": "Main",
-  "header.label.secondary.nav": "Secondary",
-  "header.label.courseOutline": "Back to course outline in Studio"
-}
\ No newline at end of file
diff --git a/src/i18n/messages/he.json b/src/i18n/messages/he.json
deleted file mode 100644
index 9e26dfeeb6..0000000000
--- a/src/i18n/messages/he.json
+++ /dev/null
@@ -1 +0,0 @@
-{}
\ No newline at end of file
diff --git a/src/i18n/messages/id.json b/src/i18n/messages/id.json
deleted file mode 100644
index 9e26dfeeb6..0000000000
--- a/src/i18n/messages/id.json
+++ /dev/null
@@ -1 +0,0 @@
-{}
\ No newline at end of file
diff --git a/src/i18n/messages/ko_kr.json b/src/i18n/messages/ko_kr.json
deleted file mode 100644
index 9e26dfeeb6..0000000000
--- a/src/i18n/messages/ko_kr.json
+++ /dev/null
@@ -1 +0,0 @@
-{}
\ No newline at end of file
diff --git a/src/i18n/messages/pl.json b/src/i18n/messages/pl.json
deleted file mode 100644
index 9e26dfeeb6..0000000000
--- a/src/i18n/messages/pl.json
+++ /dev/null
@@ -1 +0,0 @@
-{}
\ No newline at end of file
diff --git a/src/i18n/messages/pt_br.json b/src/i18n/messages/pt_br.json
deleted file mode 100644
index 9e26dfeeb6..0000000000
--- a/src/i18n/messages/pt_br.json
+++ /dev/null
@@ -1 +0,0 @@
-{}
\ No newline at end of file
diff --git a/src/i18n/messages/ru.json b/src/i18n/messages/ru.json
deleted file mode 100644
index 9e26dfeeb6..0000000000
--- a/src/i18n/messages/ru.json
+++ /dev/null
@@ -1 +0,0 @@
-{}
\ No newline at end of file
diff --git a/src/i18n/messages/th.json b/src/i18n/messages/th.json
deleted file mode 100644
index 9e26dfeeb6..0000000000
--- a/src/i18n/messages/th.json
+++ /dev/null
@@ -1 +0,0 @@
-{}
\ No newline at end of file
diff --git a/src/i18n/messages/uk.json b/src/i18n/messages/uk.json
deleted file mode 100644
index 9e26dfeeb6..0000000000
--- a/src/i18n/messages/uk.json
+++ /dev/null
@@ -1 +0,0 @@
-{}
\ No newline at end of file
diff --git a/src/i18n/messages/zh_CN.json b/src/i18n/messages/zh_CN.json
deleted file mode 100644
index ba4fcc3ef6..0000000000
--- a/src/i18n/messages/zh_CN.json
+++ /dev/null
@@ -1,199 +0,0 @@
-{
-  "authoring.alert.error.connection": "We encountered a technical error when loading this page. This might be a temporary issue, so please try again in a few minutes. If the problem persists, please go to the {supportLink} for help.",
-  "authoring.loading": "Loading...",
-  "authoring.alert.error.permission": "You are not authorized to view this page. If you feel you should have access, please reach out to your course team admin to be given access.",
-  "authoring.alert.save.error.connection": "We encountered a technical error when applying changes. This might be a temporary issue, so please try again in a few minutes. If the problem persists, please go to the {supportLink} for help.",
-  "authoring.alert.support.text": "Support Page",
-  "course-authoring.pages-resources.app-settings-modal.button.cancel": "Cancel",
-  "course-authoring.pages-resources.app-settings-modal.button.save": "Save",
-  "course-authoring.pages-resources.app-settings-modal.button.saving": "Saving",
-  "course-authoring.pages-resources.app-settings-modal.button.saved": "Saved",
-  "course-authoring.pages-resources.app-settings-modal.button.retry": "Retry",
-  "course-authoring.pages-resources.app-settings-modal.badge.enabled": "Enabled",
-  "course-authoring.pages-resources.app-settings-modal.badge.disabled": "Disabled",
-  "course-authoring.pages-resources.calculator.heading": "Configure calculator",
-  "course-authoring.pages-resources.calculator.enable-calculator.label": "Calculator",
-  "course-authoring.pages-resources.calculator.enable-calculator.help": "The calculator supports numbers, operators, constants,\n      functions, and other mathematical concepts. When enabled, an icon to\n      access the calculator appears on all pages in the body of your course.",
-  "course-authoring.pages-resources.calculator.enable-calculator.link": "Learn more about the calculator",
-  "authoring.discussions.documentationPage": "Visit the {name} documentation page",
-  "authoring.discussions.formInstructions": "Complete the fields below to set up your discussion tool.",
-  "authoring.discussions.consumerKey": "Consumer Key",
-  "authoring.discussions.consumerKey.required": "Consumer key is a required field",
-  "authoring.discussions.consumerSecret": "Consumer Secret",
-  "authoring.discussions.consumerSecret.required": "Consumer secret is a required field",
-  "authoring.discussions.launchUrl": "Launch URL",
-  "authoring.discussions.launchUrl.required": "Launch URL is a required field",
-  "authoring.discussions.adminOnlyConfig": "{providerName} can only be configured by {platformName} administrators. Please contact {supportEmail} to enable this feature.",
-  "authoring.discussions.piiSharing": "Optionally share a user's username and/or email with the LTI provider:",
-  "authoring.discussions.piiShareUsername": "Share username",
-  "authoring.discussions.piiShareEmail": "Share email",
-  "authoring.discussions.appDocInstructions.contact": "Contact: {link}",
-  "authoring.discussions.appDocInstructions.documentationLink": "General documentation",
-  "authoring.discussions.appDocInstructions.accessibilityDocumentationLink": "Accessibility documentation",
-  "authoring.discussions.appDocInstructions.configurationLink": "Configuration documentation",
-  "authoring.discussions.appDocInstructions.learnMoreLink": "Learn more about {providerName}",
-  "authoring.discussions.appDocInstructions.linkTextHeading": "External help and documentation",
-  "authoring.discussions.appDocInstructions.linkText": "{link}",
-  "authoring.discussions.builtIn.divisionByGroup": "Cohorts",
-  "authoring.discussions.builtIn.divideByCohorts.label": "Divide discussions by cohorts",
-  "authoring.discussions.builtIn.divideByCohorts.help": "Learners will only be able to view and respond to discussions posted by members of their cohort.",
-  "authoring.discussions.builtIn.divideCourseTopicsByCohorts.label": "Divide course-wide discussion topics",
-  "authoring.discussions.builtIn.divideCourseTopicsByCohorts.help": "Choose which of your general course-wide discussion topics you would like to divide.",
-  "authoring.discussions.builtIn.divideGeneralTopic.label": "General",
-  "authoring.discussions.builtIn.divideQuestionsForTAsTopic.label": "Questions for the TAs",
-  "authoring.discussions.builtIn.visibilityInContext": "Visibility of in-context discussions",
-  "authoring.discussions.builtIn.inContextDiscussion.label": "In-context discussion",
-  "authoring.discussions.builtIn.inContextDiscussion.help": "Learners will be able to view or hide a discussion side panel to engage with discussion on the course unit page.",
-  "authoring.discussions.builtIn.gradedUnitPages.label": "Graded unit pages",
-  "authoring.discussions.builtIn.gradedUnitPages.help": "Allow learners to engage with discussion on all graded unit pages except timed exams.",
-  "authoring.discussions.builtIn.groupInContextSubsection.label": "Group in context discussion at the subsection level",
-  "authoring.discussions.builtIn.groupInContextSubsection.help": "Learners will be able to view any post in the sub-section no matter which unit page they are viewing. While this is not recommended, if your course has short learning sequences or low enrollment grouping may increase engagement.",
-  "authoring.discussions.builtIn.allowUnitLevelVisibility.label": "Allow visibility configuration for each course unit",
-  "authoring.discussions.builtIn.allowUnitLevelVisibility.help": "With this advanced setting enabled you will be able to override the global visibility setting and turn discussions on or off for each unit from the course outline view..",
-  "authoring.discussions.builtIn.anonymousPosting": "Anonymous posting",
-  "authoring.discussions.builtIn.allowAnonymous.label": "Allow anonymous discussion posts",
-  "authoring.discussions.builtIn.allowAnonymous.help": "If enabled, learners can create posts that are anonymous to all users.",
-  "authoring.discussions.builtIn.allowAnonymousPeers.label": "Allow anonymous discussion posts to peers",
-  "authoring.discussions.builtIn.allowAnonymousPeers.help": "Learners will be able to post anonymously to other peers but all posts will be visible to course staff.",
-  "authoring.discussions.discussionTopics": "Discussion topics",
-  "authoring.discussions.discussionTopics.label": "General discussion topics",
-  "authoring.discussions.discussionTopics.help": "Discussions can include general topics not contained to the course structure. All courses have a general topic by default.",
-  "authoring.discussions.discussionTopic.required": "Topic name is a required field",
-  "authoring.discussions.discussionTopic.alreadyExistError": "It looks like this name is already in use",
-  "authoring.discussions.addTopicButton": "Add topic",
-  "authoring.discussions.deleteButton": "Delete",
-  "authoring.discussions.cancelButton": "Cancel",
-  "authoring.discussions.discussionTopicDeletion.help": "edX recommends that you do not delete discussion topics once your course is running.",
-  "authoring.discussions.discussionTopicDeletion.label": "Delete this topic?",
-  "authoring.discussions.builtIn.renameGeneralTopic.label": "Rename general topic",
-  "authoring.discussions.generalTopicHelp.help": "This is the default discussion topic for your course.",
-  "authoring.discussions.builtIn.configureAdditionalTopic.label": "Configure topic",
-  "authoring.discussions.addTopicHelpText": "Choose a unique name for your topic",
-  "authoring.discussions.blackoutDates": "Discussion blackout dates",
-  "authoring.discussions.builtIn.blackoutDates.label": "Blackout dates",
-  "authoring.discussions.builtIn.blackoutDates.help": "Enter pairs of dates between which students cannot post to discussion forums. Inside the provided\n      brackets, enter an additional set of square brackets surrounding each pair of dates you add.\n      Format each pair of dates as [\"YYYY-MM-DD\", \"YYYY-MM-DD\"]. To specify times as well as dates,\n      format each pair as [\"YYYY-MM-DDTHH:MM\", \"YYYY-MM-DDTHH:MM\"]. Be sure to include the \"T\" between\n      the date and time. For example, an entry defining two blackout periods looks like this, including\n      the outer pair of square brackets: [[\"2015-09-15\", \"2015-09-21\"], [\"2015-10-01\", \"2015-10-08\"]]",
-  "authoring.discussions.builtIn.blackoutDates.formattingError": "There's a formatting error in your blackout dates.",
-  "authoring.topics.delete": "Delete Topic",
-  "authoring.topics.expand": "Expand",
-  "authoring.topics.collapse": "Collapse",
-  "authoring.discussions.configure.app": "Configure {name}",
-  "authoring.discussions.configure": "Configure discussions",
-  "authoring.discussions.backButton": "Back",
-  "authoring.discussions.saveButton": "Save",
-  "authoring.discussions.savingButton": "Saving",
-  "authoring.discussions.savedButton": "Saved",
-  "authoring.discussions.appConfigForm.appName-piazza": "Piazza",
-  "authoring.discussions.appConfigForm.appName-yellowdig": "Yellowdig",
-  "authoring.discussions.appConfigForm.appName-inscribe": "InScribe",
-  "authoring.discussions.appConfigForm.appName-discourse": "Discourse",
-  "authoring.discussions.appConfigForm.appName-ed-discuss": "Ed Discuss",
-  "authoring.discussions.appConfigForm.appName-legacy": "edX",
-  "authoring.discussions.heading": "Select a discussion tool for this course",
-  "authoring.discussions.supportedFeatures": "Supported features",
-  "authoring.discussions.supportedFeatureList-mobile-show": "Show supported features",
-  "authoring.discussions.supportedFeatureList-mobile-hide": "Hide supported features",
-  "authoring.discussions.noApps": "There are no discussions providers available for your course.",
-  "authoring.discussions.nextButton": "Next",
-  "authoring.discussions.appFullSupport": "Full support",
-  "authoring.discussions.appBasicSupport": "Basic support",
-  "authoring.discussions.selectApp": "Select {appName}",
-  "authoring.discussions.appList.appName-legacy": "edX",
-  "authoring.discussions.appList.appDescription-legacy": "Start conversations with other learners, ask questions, and interact with other learners in the course.",
-  "authoring.discussions.appList.appName-piazza": "Piazza",
-  "authoring.discussions.appList.appDescription-piazza": "Piazza is designed to connect students, TAs, and professors so every student can get the help they need when they need it.",
-  "authoring.discussions.appList.appName-yellowdig": "Yellowdig",
-  "authoring.discussions.appList.appDescription-yellowdig": "Yellowdig offers educators a gameful learning digital solution to improve student engagement by building learning communities for any course modality.",
-  "authoring.discussions.appList.appName-inscribe": "InScribe",
-  "authoring.discussions.appList.appDescription-inscribe": "InScribe leverages the power of community + artificial intelligence to connect individuals to the answers, resources, and people they need to succeed.",
-  "authoring.discussions.appList.appName-discourse": "Discourse",
-  "authoring.discussions.appList.appDescription-discourse": "Discourse is modern forum software for your community. Use it as a mailing list, discussion forum, long-form chat room, and more!",
-  "authoring.discussions.appList.appName-ed-discuss": "Ed Discuss",
-  "authoring.discussions.appList.appDescription-ed-discus": "Ed Discussion helps scale class communication in a beautiful and intuitive interface. Questions reach and benefit the whole class. Less emails, more time saved.",
-  "authoring.discussions.featureName-discussion-page": "Discussion page",
-  "authoring.discussions.featureName-embedded-course-sections": "Embedded course sections",
-  "authoring.discussions.featureName-advanced-in-context-discussion": "Advanced in context discussion",
-  "authoring.discussions.featureName-anonymous-posting": "Anonymous posting",
-  "authoring.discussions.featureName-automatic-learner-enrollment": "Automatic learner enrollment",
-  "authoring.discussions.featureName-blackout-discussion-dates": "Blackout discussion dates",
-  "authoring.discussions.featureName-community-ta-support": "Community TA support",
-  "authoring.discussions.featureName-course-cohort-support": "Course cohort support",
-  "authoring.discussions.featureName-direct-messages-from-instructors": "Direct messages from instructors",
-  "authoring.discussions.featureName-discussion-content-prompts": "Discussion content prompts",
-  "authoring.discussions.featureName-email-notifications": "Email notifications",
-  "authoring.discussions.featureName-graded-discussions": "Graded discussions",
-  "authoring.discussions.featureName-in-platform-notifications": "In-platform notifications",
-  "authoring.discussions.featureName-internationalization-support": "Internationalization support",
-  "authoring.discussions.featureName-lti-advanced-sharing-mode": "LTI advanced sharing mode",
-  "authoring.discussions.featureName-lti-basic-configuration": "LTI basic configuration",
-  "authoring.discussions.featureName-primary-discussion-app-experience": "Primary discussion app experience",
-  "authoring.discussions.featureName-question-&-discussion-support": "Question & discussion support",
-  "authoring.discussions.featureName-report/flag-content-to-moderators": "Report/flag content to moderators",
-  "authoring.discussions.featureName-research-data-events": "Research data events",
-  "authoring.discussions.featureName-simplified-in-context-discussion": "Simplified in-context discussion",
-  "authoring.discussions.featureName-user-mentions": "User mentions",
-  "authoring.discussions.featureName-wcag-2.1": "WCAG 2.1 support",
-  "authoring.discussions.wcag-2.0-support": "WCAG 2.0 support",
-  "authoring.discussions.settings": "Settings",
-  "authoring.discussions.applyButton": "Apply",
-  "authoring.discussions.applyingButton": "Applying",
-  "authoring.discussions.appliedButton": "Applied",
-  "authoring.discussions.providerSelection": "Provider selection",
-  "authoring.discussions.Incomplete": "Incomplete",
-  "course-authoring.pages-resources.heading": "Pages & Resources",
-  "course-authoring.pages-resources.resources.settings.button": "settings",
-  "course-authoring.pages-resources.viewLive.button": "View live",
-  "course-authoring.badge.enabled": "Enabled",
-  "authoring.examsettings.enableproctoredexams.help": "If checked, proctored exams are enabled in your course.",
-  "authoring.examsettings.allowoptout.label": "Allow Opting Out of Proctored Exams",
-  "authoring.examsettings.allowoptout.help": "\n                    If this value is \"Yes\", learners can choose to take proctored exams without proctoring.\n                    If this value is \"No\", all learners must take the exam with proctoring.\n                  ",
-  "authoring.examsettings.provider.label": "Proctoring Provider",
-  "authoring.examsettings.escalationemail.label": "Proctortrack Escalation Email",
-  "authoring.examsettings.escalationemail.help": "\n                  Required if \"proctortrack\" is selected as your proctoring provider. Enter an email address to be\n                  contacted by the support team whenever there are escalations (e.g. appeals, delayed reviews, etc.).\n                ",
-  "authoring.examsettings.createzendesk.label": "Create Zendesk Tickets for Suspicious Proctored Exam Attempts",
-  "authoring.examsettings.createzendesk.help": "If this value is \"Yes\", a Zendesk ticket will be created for suspicious proctored exam attempts.",
-  "authoring.examsettings.submit": "Submit",
-  "authoring.examsettings.alert.success": "\n            Proctored exam settings saved successfully.\n            You can go back to your course in Studio {studioCourseRunURL}.\n          ",
-  "authoring.examsettings.alert.error": "\n            We encountered a technical error while trying to save proctored exam settings.\n            This might be a temporary issue, so please try again in a few minutes.\n            If the problem persists,\n            please go to the {support_link} for help.\n          ",
-  "authoring.examsettings.allowoptout.no": "No",
-  "authoring.examsettings.allowoptout.yes": "Yes",
-  "authoring.examsettings.createzendesk.no": "No",
-  "authoring.examsettings.createzendesk.yes": "Yes",
-  "authoring.examsettings.support.text": "Support Page",
-  "authoring.examsettings.escalationemail.enableproctoredexams.label": "Enable Proctored Exams",
-  "authoring.examsettings.escalationemail.error.blank": "The Proctortrack Escalation Email field cannot be empty if proctortrack is the selected provider.",
-  "authoring.examsettings.escalationemail.error.invalid": "The Proctortrack Escalation Email field is in the wrong format and is not valid.",
-  "authoring.examsettings.error.single": "There is 1 error in this form.",
-  "authoring.examsettings.escalationemail.error.multiple": "There are {numOfErrors} errors in this form.",
-  "authoring.examsettings.provider.help": "Select the proctoring provider you want to use for this course run.",
-  "authoring.examsettings.provider.help.aftercoursestart": "Proctoring provider cannot be modified after course start date.",
-  "header.links.content": "Content",
-  "header.links.settings": "Settings",
-  "header.links.content.tools": "Tools",
-  "header.links.outline": "Outline",
-  "header.links.updates": "Updates",
-  "header.links.pages": "Pages",
-  "header.links.filesAndUploads": "Files & Uploads",
-  "header.links.textbooks": "Textbooks",
-  "header.links.videoUploads": "Video Uploads",
-  "header.links.scheduleAndDetails": "Schedule & Details",
-  "header.links.grading": "Grading",
-  "header.links.courseTeam": "Course Team",
-  "header.links.groupConfigurations": "Group Configurations",
-  "header.links.proctoredExamSettings": "Proctored Exam Settings",
-  "header.links.advancedSettings": "Advanced Settings",
-  "header.links.certificates": "Certificates",
-  "header.links.publisher": "Publisher",
-  "header.links.import": "Import",
-  "header.links.export": "Export",
-  "header.links.checklists": "Checklists",
-  "header.user.menu.studio": "Studio Home",
-  "header.user.menu.maintenance": "Maintenance",
-  "header.user.menu.logout": "Logout",
-  "header.label.account.menu": "Account Menu",
-  "header.label.account.menu.for": "Account menu for {username}",
-  "header.label.main.nav": "Main",
-  "header.label.main.menu": "Main Menu",
-  "header.label.main.header": "Main",
-  "header.label.secondary.nav": "Secondary",
-  "header.label.courseOutline": "Back to course outline in Studio"
-}
\ No newline at end of file
diff --git a/src/import-page/CourseImportPage.jsx b/src/import-page/CourseImportPage.jsx
new file mode 100644
index 0000000000..2daea3fdb2
--- /dev/null
+++ b/src/import-page/CourseImportPage.jsx
@@ -0,0 +1,113 @@
+/* eslint-disable max-len */
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { useDispatch, useSelector } from 'react-redux';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import {
+  Container, Layout,
+} from '@openedx/paragon';
+import Cookies from 'universal-cookie';
+import { Helmet } from 'react-helmet';
+
+import SubHeader from '../generic/sub-header/SubHeader';
+import InternetConnectionAlert from '../generic/internet-connection-alert';
+import { RequestStatus } from '../data/constants';
+import { useModel } from '../generic/model-store';
+import ConnectionErrorAlert from '../generic/ConnectionErrorAlert';
+import {
+  updateFileName, updateImportTriggered, updateSavingStatus, updateSuccessDate,
+} from './data/slice';
+import ImportStepper from './import-stepper/ImportStepper';
+import { getImportTriggered, getLoadingStatus, getSavingStatus } from './data/selectors';
+import { LAST_IMPORT_COOKIE_NAME } from './data/constants';
+import ImportSidebar from './import-sidebar/ImportSidebar';
+import FileSection from './file-section/FileSection';
+import messages from './messages';
+
+const CourseImportPage = ({ intl, courseId }) => {
+  const dispatch = useDispatch();
+  const cookies = new Cookies();
+  const courseDetails = useModel('courseDetails', courseId);
+  const importTriggered = useSelector(getImportTriggered);
+  const savingStatus = useSelector(getSavingStatus);
+  const loadingStatus = useSelector(getLoadingStatus);
+  const anyRequestFailed = savingStatus === RequestStatus.FAILED || loadingStatus === RequestStatus.FAILED;
+  const isLoadingDenied = loadingStatus === RequestStatus.DENIED;
+  const anyRequestInProgress = savingStatus === RequestStatus.PENDING || loadingStatus === RequestStatus.IN_PROGRESS;
+
+  useEffect(() => {
+    const cookieData = cookies.get(LAST_IMPORT_COOKIE_NAME);
+    if (cookieData) {
+      dispatch(updateSavingStatus(RequestStatus.SUCCESSFUL));
+      dispatch(updateImportTriggered(true));
+      dispatch(updateFileName(cookieData.fileName));
+      dispatch(updateSuccessDate(cookieData.date));
+    }
+  }, []);
+
+  if (isLoadingDenied) {
+    return (
+      <Container size="xl" className="course-unit px-4 mt-4">
+        <ConnectionErrorAlert />
+      </Container>
+    );
+  }
+
+  return (
+    <>
+      <Helmet>
+        <title>
+          {intl.formatMessage(messages.pageTitle, {
+            headingTitle: intl.formatMessage(messages.headingTitle),
+            courseName: courseDetails?.name,
+            siteName: process.env.SITE_NAME,
+          })}
+        </title>
+      </Helmet>
+      <Container size="xl" className="mt-4 px-4 import">
+        <section className="setting-items mb-4">
+          <Layout
+            lg={[{ span: 9 }, { span: 3 }]}
+            md={[{ span: 9 }, { span: 3 }]}
+            sm={[{ span: 9 }, { span: 3 }]}
+            xs={[{ span: 9 }, { span: 3 }]}
+            xl={[{ span: 9 }, { span: 3 }]}
+          >
+            <Layout.Element>
+              <article>
+                <SubHeader
+                  title={intl.formatMessage(messages.headingTitle)}
+                  subtitle={intl.formatMessage(messages.headingSubtitle)}
+                />
+                <p className="small">{intl.formatMessage(messages.description1)}</p>
+                <p className="small">{intl.formatMessage(messages.description2)}</p>
+                <p className="small">{intl.formatMessage(messages.description3)}</p>
+                <FileSection courseId={courseId} />
+                {importTriggered && <ImportStepper courseId={courseId} />}
+              </article>
+            </Layout.Element>
+            <Layout.Element>
+              <ImportSidebar courseId={courseId} />
+            </Layout.Element>
+          </Layout>
+        </section>
+      </Container>
+      <div className="alert-toast">
+        <InternetConnectionAlert
+          isFailed={anyRequestFailed}
+          isQueryPending={anyRequestInProgress}
+          onInternetConnectionFailed={() => null}
+        />
+      </div>
+    </>
+  );
+};
+
+CourseImportPage.propTypes = {
+  intl: intlShape.isRequired,
+  courseId: PropTypes.string.isRequired,
+};
+
+CourseImportPage.defaultProps = {};
+
+export default injectIntl(CourseImportPage);
diff --git a/src/import-page/CourseImportPage.scss b/src/import-page/CourseImportPage.scss
new file mode 100644
index 0000000000..daf16e86ae
--- /dev/null
+++ b/src/import-page/CourseImportPage.scss
@@ -0,0 +1,5 @@
+.import {
+  .help-sidebar {
+    margin-top: 7.188rem;
+  }
+}
diff --git a/src/import-page/CourseImportPage.test.jsx b/src/import-page/CourseImportPage.test.jsx
new file mode 100644
index 0000000000..646eadbe6e
--- /dev/null
+++ b/src/import-page/CourseImportPage.test.jsx
@@ -0,0 +1,136 @@
+import { initializeMockApp } from '@edx/frontend-platform';
+import { IntlProvider, injectIntl } from '@edx/frontend-platform/i18n';
+import { AppProvider } from '@edx/frontend-platform/react';
+import { render, waitFor } from '@testing-library/react';
+import { Helmet } from 'react-helmet';
+import MockAdapter from 'axios-mock-adapter';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+
+import Cookies from 'universal-cookie';
+import initializeStore from '../store';
+import { RequestStatus } from '../data/constants';
+import messages from './messages';
+import CourseImportPage from './CourseImportPage';
+import { getImportStatusApiUrl } from './data/api';
+import { IMPORT_STAGES } from './data/constants';
+import stepperMessages from './import-stepper/messages';
+
+let store;
+let axiosMock;
+let cookies;
+const courseId = '123';
+const courseName = 'About Node JS';
+
+jest.mock('../generic/model-store', () => ({
+  useModel: jest.fn().mockReturnValue({
+    name: courseName,
+  }),
+}));
+
+jest.mock('universal-cookie', () => {
+  const Cookie = {
+    get: jest.fn(),
+    set: jest.fn(),
+  };
+  return jest.fn(() => Cookie);
+});
+
+const RootWrapper = () => (
+  <AppProvider store={store}>
+    <IntlProvider locale="en" messages={{}}>
+      <CourseImportPage intl={injectIntl} courseId={courseId} />
+    </IntlProvider>
+  </AppProvider>
+);
+
+describe('<CourseImportPage />', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+    store = initializeStore();
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+    axiosMock
+      .onGet(getImportStatusApiUrl(courseId, 'testFileName.test'))
+      .reply(200, { importStatus: 1, message: '' });
+    cookies = new Cookies();
+    cookies.get.mockReturnValue(null);
+  });
+  it('should render page title correctly', async () => {
+    render(<RootWrapper />);
+    await waitFor(() => {
+      const helmet = Helmet.peek();
+      expect(helmet.title).toEqual(
+        `${messages.headingTitle.defaultMessage} | ${courseName} | ${process.env.SITE_NAME}`,
+      );
+    });
+  });
+  it('should render without errors', async () => {
+    const { getByText } = render(<RootWrapper />);
+    await waitFor(() => {
+      expect(getByText(messages.headingSubtitle.defaultMessage)).toBeInTheDocument();
+      const importPageElement = getByText(messages.headingTitle.defaultMessage, {
+        selector: 'h2.sub-header-title',
+      });
+      expect(importPageElement).toBeInTheDocument();
+      expect(getByText(messages.description1.defaultMessage)).toBeInTheDocument();
+      expect(getByText(messages.description2.defaultMessage)).toBeInTheDocument();
+      expect(getByText(messages.description3.defaultMessage)).toBeInTheDocument();
+    });
+  });
+  it('should fetch status without clicking when cookies has', async () => {
+    cookies.get.mockReturnValue({ date: 1679787000, completed: false, fileName: 'testFileName.test' });
+    const { getByText } = render(<RootWrapper />);
+    expect(getByText(stepperMessages.stepperUnpackingDescription.defaultMessage)).toBeInTheDocument();
+  });
+  it('should show error', async () => {
+    axiosMock
+      .onGet(getImportStatusApiUrl(courseId, 'testFileName.tar.gz'))
+      .reply(200, { importStatus: -IMPORT_STAGES.UPDATING, message: '' });
+    cookies.get.mockReturnValue({ date: 1679787000, completed: false, fileName: 'testFileName.tar.gz' });
+    const { getByText } = render(<RootWrapper />);
+    // eslint-disable-next-line no-promise-executor-return
+    await new Promise((r) => setTimeout(r, 3500));
+    expect(getByText(stepperMessages.defaultErrorMessage.defaultMessage)).toBeInTheDocument();
+  });
+  it('should show success button', async () => {
+    axiosMock
+      .onGet(getImportStatusApiUrl(courseId, 'testFileName.tar.gz'))
+      .reply(200, { importStatus: IMPORT_STAGES.SUCCESS, message: '' });
+    cookies.get.mockReturnValue({ date: 1679787000, completed: false, fileName: 'testFileName.tar.gz' });
+    const { getByText } = render(<RootWrapper />);
+    // eslint-disable-next-line no-promise-executor-return
+    await new Promise((r) => setTimeout(r, 3500));
+    expect(getByText(stepperMessages.viewOutlineButton.defaultMessage)).toBeInTheDocument();
+  });
+
+  it('displays an alert and sets status to DENIED when API responds with 403', async () => {
+    axiosMock
+      .onGet(getImportStatusApiUrl(courseId, 'testFileName.tar.gz'))
+      .reply(403);
+    cookies.get.mockReturnValue({ date: 1679787000, completed: false, fileName: 'testFileName.tar.gz' });
+    const { getByRole } = render(<RootWrapper />);
+    // eslint-disable-next-line no-promise-executor-return
+    await new Promise((r) => setTimeout(r, 3500));
+    expect(getByRole('alert')).toBeInTheDocument();
+    const { loadingStatus } = store.getState().courseImport;
+    expect(loadingStatus).toEqual(RequestStatus.DENIED);
+  });
+
+  it('sets loading status to FAILED upon receiving a 404 response from the API', async () => {
+    axiosMock
+      .onGet(getImportStatusApiUrl(courseId, 'testFileName.tar.gz'))
+      .reply(404);
+    cookies.get.mockReturnValue({ date: 1679787000, completed: false, fileName: 'testFileName.tar.gz' });
+    render(<RootWrapper />);
+    // eslint-disable-next-line no-promise-executor-return
+    await new Promise((r) => setTimeout(r, 3500));
+    const { loadingStatus } = store.getState().courseImport;
+    expect(loadingStatus).toEqual(RequestStatus.FAILED);
+  });
+});
diff --git a/src/import-page/data/api.js b/src/import-page/data/api.js
new file mode 100644
index 0000000000..1955dc98d4
--- /dev/null
+++ b/src/import-page/data/api.js
@@ -0,0 +1,65 @@
+import { camelCaseObject, getConfig } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+
+const getApiBaseUrl = () => getConfig().STUDIO_BASE_URL;
+export const postImportCourseApiUrl = (courseId) => `${getApiBaseUrl()}/import/${courseId}`;
+export const getImportStatusApiUrl = (courseId, fileName) => `${getApiBaseUrl()}/import_status/${courseId}/${fileName}`;
+
+/**
+ * Start import course.
+ * @param {string} courseId
+ * @param {Object} fileData
+ * @param {Object} requestConfig
+ * @returns {Promise<Object>}
+ */
+export async function startCourseImporting(courseId, fileData, requestConfig, updateProgress) {
+  const chunkSize = 20 * 1000000; // 20 MB
+  const fileSize = fileData.size || 0;
+  const chunkLength = Math.ceil(fileSize / chunkSize);
+  let resp;
+  const upload = async (blob, start, stop, index) => {
+    const contentRange = `bytes ${start}-${stop}/${fileSize}`;
+    const contentDisposition = `attachment; filename="${fileData.name}"`;
+    const headers = {
+      'Content-Range': contentRange,
+      'Content-Disposition': contentDisposition,
+    };
+    const formData = new FormData();
+    formData.append('course-data', blob, fileData.name);
+    const { data } = await getAuthenticatedHttpClient()
+      .post(
+        postImportCourseApiUrl(courseId),
+        formData,
+        { headers, ...requestConfig },
+      );
+    const percent = Math.trunc(((1 / chunkLength) * (index + 1)) * 100);
+    updateProgress(percent);
+    resp = camelCaseObject(data);
+  };
+
+  const chunkUpload = async (file, index) => {
+    const start = index * chunkSize;
+    const stop = start + chunkSize < fileSize ? start + chunkSize : fileSize;
+    const blob = file.slice(start, stop, file.type);
+    await upload(blob, start, stop - 1, index);
+  };
+
+  /* eslint-disable no-await-in-loop */
+  for (let i = 0; i < chunkLength; i++) {
+    await chunkUpload(fileData, i);
+  }
+
+  return resp;
+}
+
+/**
+ * Get import status.
+ * @param {string} courseId
+ * @param {string} fileName
+ * @returns {Promise<Object>}
+ */
+export async function getImportStatus(courseId, fileName) {
+  const { data } = await getAuthenticatedHttpClient()
+    .get(getImportStatusApiUrl(courseId, fileName));
+  return camelCaseObject(data);
+}
diff --git a/src/import-page/data/api.test.jsx b/src/import-page/data/api.test.jsx
new file mode 100644
index 0000000000..5f0e7b43b8
--- /dev/null
+++ b/src/import-page/data/api.test.jsx
@@ -0,0 +1,48 @@
+import MockAdapter from 'axios-mock-adapter';
+import { initializeMockApp, getConfig } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+
+import { getImportStatus, postImportCourseApiUrl, startCourseImporting } from './api';
+
+let axiosMock;
+const courseId = 'course-123';
+
+describe('API Functions', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should fetch status on start importing', async () => {
+    const file = new File(['(⌐□_□)'], 'download.tar.gz', { size: 20 });
+    const data = { importStatus: 1 };
+    axiosMock.onPost(postImportCourseApiUrl(courseId)).reply(200, data);
+
+    const result = await startCourseImporting(courseId, file, {}, jest.fn());
+    expect(axiosMock.history.post[0].url).toEqual(postImportCourseApiUrl(courseId));
+    expect(result).toEqual(data);
+  });
+
+  it('should fetch on get import status', async () => {
+    const data = { importStatus: 2 };
+    const fileName = 'testFileName.test';
+    const queryUrl = new URL(`import_status/${courseId}/${fileName}`, getConfig().STUDIO_BASE_URL).href;
+    axiosMock.onGet(queryUrl).reply(200, data);
+
+    const result = await getImportStatus(courseId, fileName);
+
+    expect(axiosMock.history.get[0].url).toEqual(queryUrl);
+    expect(result).toEqual(data);
+  });
+});
diff --git a/src/import-page/data/constants.js b/src/import-page/data/constants.js
new file mode 100644
index 0000000000..34a13ae78c
--- /dev/null
+++ b/src/import-page/data/constants.js
@@ -0,0 +1,8 @@
+export const LAST_IMPORT_COOKIE_NAME = 'lastimport';
+export const IMPORT_STAGES = {
+  UPLOADING: 0,
+  UNPACKING: 1,
+  VERIFYING: 2,
+  UPDATING: 3,
+  SUCCESS: 4,
+};
diff --git a/src/import-page/data/selectors.js b/src/import-page/data/selectors.js
new file mode 100644
index 0000000000..807566daa5
--- /dev/null
+++ b/src/import-page/data/selectors.js
@@ -0,0 +1,8 @@
+export const getProgress = (state) => state.courseImport.progress;
+export const getCurrentStage = (state) => state.courseImport.currentStage;
+export const getImportTriggered = (state) => state.courseImport.importTriggered;
+export const getFileName = (state) => state.courseImport.fileName;
+export const getError = (state) => state.courseImport.error;
+export const getLoadingStatus = (state) => state.courseImport.loadingStatus;
+export const getSavingStatus = (state) => state.courseImport.savingStatus;
+export const getSuccessDate = (state) => state.courseImport.successDate;
diff --git a/src/import-page/data/slice.js b/src/import-page/data/slice.js
new file mode 100644
index 0000000000..82550e705c
--- /dev/null
+++ b/src/import-page/data/slice.js
@@ -0,0 +1,63 @@
+/* eslint-disable no-param-reassign */
+import { createSlice } from '@reduxjs/toolkit';
+
+const initialState = {
+  currentStage: 0,
+  error: { hasError: false, message: '' },
+  progress: 0,
+  importTriggered: false,
+  fileName: null,
+  loadingStatus: '',
+  savingStatus: '',
+  successDate: null,
+};
+
+const slice = createSlice({
+  name: 'importPage',
+  initialState,
+  reducers: {
+    updateCurrentStage: (state, { payload }) => {
+      if (payload >= state.currentStage) {
+        state.currentStage = payload;
+      }
+    },
+    updateError: (state, { payload }) => {
+      state.error = { ...state.error, ...payload };
+    },
+    updateProgress: (state, { payload }) => {
+      state.progress = payload;
+    },
+    updateImportTriggered: (state, { payload }) => {
+      state.importTriggered = payload;
+    },
+    updateFileName: (state, { payload }) => {
+      state.fileName = payload;
+    },
+    reset: () => initialState,
+    updateLoadingStatus: (state, { payload }) => {
+      state.loadingStatus = payload;
+    },
+    updateSavingStatus: (state, { payload }) => {
+      state.savingStatus = payload;
+    },
+    updateSuccessDate: (state, { payload }) => {
+      state.successDate = payload;
+    },
+  },
+});
+
+export const {
+  updateCurrentStage,
+  updateError,
+  updateProgress,
+  updateImportTriggered,
+  updateFileName,
+  reset,
+  updateLoadingStatus,
+  updateSavingStatus,
+  updateSuccessDate,
+} = slice.actions;
+
+export const {
+  reducer,
+} = slice;
diff --git a/src/import-page/data/thunks.js b/src/import-page/data/thunks.js
new file mode 100644
index 0000000000..028fea2da2
--- /dev/null
+++ b/src/import-page/data/thunks.js
@@ -0,0 +1,68 @@
+import Cookies from 'universal-cookie';
+import moment from 'moment';
+
+import { RequestStatus } from '../../data/constants';
+import { setImportCookie } from '../utils';
+import { getImportStatus, startCourseImporting } from './api';
+import {
+  reset, updateCurrentStage, updateError, updateFileName, updateProgress,
+  updateImportTriggered, updateLoadingStatus, updateSavingStatus, updateSuccessDate,
+} from './slice';
+import { IMPORT_STAGES, LAST_IMPORT_COOKIE_NAME } from './constants';
+
+export function fetchImportStatus(courseId, fileName) {
+  return async (dispatch) => {
+    try {
+      dispatch(updateLoadingStatus(RequestStatus.IN_PROGRESS));
+      const { importStatus, message } = await getImportStatus(courseId, fileName);
+      dispatch(updateCurrentStage(Math.abs(importStatus)));
+      const cookies = new Cookies();
+      const cookieData = cookies.get(LAST_IMPORT_COOKIE_NAME);
+
+      if (importStatus < 0) {
+        dispatch(updateError({ hasError: true, message }));
+      } else if (importStatus === IMPORT_STAGES.SUCCESS && !cookieData?.completed) {
+        dispatch(updateSuccessDate(moment().valueOf()));
+      }
+
+      if (!cookieData?.completed) {
+        setImportCookie(moment().valueOf(), importStatus === IMPORT_STAGES.SUCCESS, fileName);
+      }
+      dispatch(updateLoadingStatus(RequestStatus.SUCCESSFUL));
+      return true;
+    } catch (error) {
+      if (error.response && error.response.status === 403) {
+        dispatch(updateLoadingStatus(RequestStatus.DENIED));
+      } else {
+        dispatch(updateLoadingStatus(RequestStatus.FAILED));
+      }
+      return false;
+    }
+  };
+}
+
+export function handleProcessUpload(courseId, fileData, requestConfig, handleError) {
+  return async (dispatch) => {
+    try {
+      const file = fileData.get('file');
+      dispatch(reset());
+      dispatch(updateSavingStatus(RequestStatus.PENDING));
+      dispatch(updateFileName(file.name));
+      dispatch(updateImportTriggered(true));
+      const { importStatus } = await startCourseImporting(
+        courseId,
+        file,
+        requestConfig,
+        (percent) => dispatch(updateProgress(percent)),
+      );
+      dispatch(updateCurrentStage(importStatus));
+      setImportCookie(moment().valueOf(), importStatus === IMPORT_STAGES.SUCCESS, file.name);
+      dispatch(updateSavingStatus(RequestStatus.SUCCESSFUL));
+      return true;
+    } catch (error) {
+      handleError(error);
+      dispatch(updateSavingStatus(RequestStatus.FAILED));
+      return false;
+    }
+  };
+}
diff --git a/src/import-page/file-section/FileSection.jsx b/src/import-page/file-section/FileSection.jsx
new file mode 100644
index 0000000000..4fe805f56f
--- /dev/null
+++ b/src/import-page/file-section/FileSection.jsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import {
+  injectIntl,
+  intlShape,
+} from '@edx/frontend-platform/i18n';
+import PropTypes from 'prop-types';
+import { useDispatch, useSelector } from 'react-redux';
+import { Card, Dropzone } from '@openedx/paragon';
+
+import { IMPORT_STAGES } from '../data/constants';
+import {
+  getCurrentStage, getError, getFileName, getImportTriggered,
+} from '../data/selectors';
+import messages from './messages';
+import { handleProcessUpload } from '../data/thunks';
+
+const FileSection = ({ intl, courseId }) => {
+  const dispatch = useDispatch();
+  const importTriggered = useSelector(getImportTriggered);
+  const currentStage = useSelector(getCurrentStage);
+  const fileName = useSelector(getFileName);
+  const { hasError } = useSelector(getError);
+  const isShowedDropzone = !importTriggered || currentStage === IMPORT_STAGES.SUCCESS || hasError;
+
+  return (
+    <Card>
+      <Card.Header
+        className="h3 px-3 text-black"
+        title={intl.formatMessage(messages.headingTitle)}
+        subtitle={fileName && intl.formatMessage(messages.fileChosen, { fileName })}
+      />
+      <Card.Section className="px-3 pt-2 pb-4">
+        {isShowedDropzone
+          && (
+            <Dropzone
+              onProcessUpload={
+                ({ fileData, requestConfig, handleError }) => dispatch(handleProcessUpload(
+                  courseId,
+                  fileData,
+                  requestConfig,
+                  handleError,
+                ))
+              }
+              accept={{ 'application/gzip': ['.tar.gz'] }}
+              data-testid="dropzone"
+            />
+          )}
+      </Card.Section>
+    </Card>
+  );
+};
+
+FileSection.propTypes = {
+  intl: intlShape.isRequired,
+  courseId: PropTypes.string.isRequired,
+};
+
+export default injectIntl(FileSection);
diff --git a/src/import-page/file-section/FileSection.test.jsx b/src/import-page/file-section/FileSection.test.jsx
new file mode 100644
index 0000000000..6d6bfb2d2c
--- /dev/null
+++ b/src/import-page/file-section/FileSection.test.jsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import { initializeMockApp } from '@edx/frontend-platform';
+import { IntlProvider, injectIntl } from '@edx/frontend-platform/i18n';
+import { AppProvider } from '@edx/frontend-platform/react';
+import { fireEvent, render, waitFor } from '@testing-library/react';
+
+import initializeStore from '../../store';
+import messages from './messages';
+import FileSection from './FileSection';
+
+let store;
+const courseId = '123';
+
+const RootWrapper = () => (
+  <AppProvider store={store}>
+    <IntlProvider locale="en" messages={{}}>
+      <FileSection intl={injectIntl} courseId={courseId} />
+    </IntlProvider>
+  </AppProvider>
+);
+
+describe('<FileSection />', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+    store = initializeStore();
+  });
+  it('should render without errors', async () => {
+    const { getByText } = render(<RootWrapper />);
+    await waitFor(() => {
+      expect(getByText(messages.headingTitle.defaultMessage)).toBeInTheDocument();
+    });
+  });
+  it('should displays Dropzone when import is not triggered or in success stage or has an error', async () => {
+    const { getByTestId } = render(<RootWrapper />);
+    await waitFor(() => {
+      expect(getByTestId('dropzone')).toBeInTheDocument();
+    });
+  });
+  it('should work Dropzone', async () => {
+    const {
+      getByText, getByTestId, queryByTestId, container,
+    } = render(<RootWrapper />);
+
+    const dropzoneElement = getByTestId('dropzone');
+
+    const file = new File(['file contents'], 'example.tar.gz', { type: 'application/gzip' });
+    fireEvent.drop(dropzoneElement, { dataTransfer: { files: [file], types: ['Files'] } });
+
+    await waitFor(() => {
+      expect(getByText('File chosen: example.tar.gz')).toBeInTheDocument();
+      expect(queryByTestId(container, 'dropzone')).not.toBeInTheDocument();
+    });
+  });
+});
diff --git a/src/import-page/file-section/messages.js b/src/import-page/file-section/messages.js
new file mode 100644
index 0000000000..6ad57b9a5e
--- /dev/null
+++ b/src/import-page/file-section/messages.js
@@ -0,0 +1,14 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  headingTitle: {
+    id: 'course-authoring.import.file-section.title',
+    defaultMessage: 'Select a .tar.gz file to replace your course content',
+  },
+  fileChosen: {
+    id: 'course-authoring.import.file-section.chosen-file',
+    defaultMessage: 'File chosen: {fileName}',
+  },
+});
+
+export default messages;
diff --git a/src/import-page/import-sidebar/ImportSidebar.jsx b/src/import-page/import-sidebar/ImportSidebar.jsx
new file mode 100644
index 0000000000..9a7cb9424b
--- /dev/null
+++ b/src/import-page/import-sidebar/ImportSidebar.jsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import {
+  injectIntl,
+  intlShape,
+} from '@edx/frontend-platform/i18n';
+import PropTypes from 'prop-types';
+import { Hyperlink } from '@openedx/paragon';
+import { getConfig } from '@edx/frontend-platform';
+
+import { HelpSidebar } from '../../generic/help-sidebar';
+import { useHelpUrls } from '../../help-urls/hooks';
+import messages from './messages';
+
+const ImportSidebar = ({ intl, courseId }) => {
+  const { importCourse: importLearnMoreUrl } = useHelpUrls(['importCourse']);
+  return (
+    <HelpSidebar courseId={courseId}>
+      <h4 className="help-sidebar-about-title">{intl.formatMessage(messages.title1)}</h4>
+      <p className="help-sidebar-about-descriptions">
+        {intl.formatMessage(messages.description1, { studioShortName: getConfig().STUDIO_SHORT_NAME })}
+      </p>
+      <hr />
+      <h4 className="help-sidebar-about-title">{intl.formatMessage(messages.importedContent)}</h4>
+      <p className="help-sidebar-about-descriptions">{intl.formatMessage(messages.importedContentHeading)}</p>
+      <ul className="px-3">
+        <li className="help-sidebar-about-descriptions">{intl.formatMessage(messages.content1)}</li>
+        <li className="help-sidebar-about-descriptions">{intl.formatMessage(messages.content2)}</li>
+        <li className="help-sidebar-about-descriptions">{intl.formatMessage(messages.content3)}</li>
+        <li className="help-sidebar-about-descriptions">{intl.formatMessage(messages.content4)}</li>
+        <li className="help-sidebar-about-descriptions">{intl.formatMessage(messages.content5)}</li>
+      </ul>
+      <p className="help-sidebar-about-descriptions">{intl.formatMessage(messages.notImportedContent)}</p>
+      <ul className="px-3">
+        <li className="help-sidebar-about-descriptions">{intl.formatMessage(messages.content6)}</li>
+        <li className="help-sidebar-about-descriptions">{intl.formatMessage(messages.content7)}</li>
+      </ul>
+      <hr />
+      <h4 className="help-sidebar-about-title">{intl.formatMessage(messages.warningTitle)}</h4>
+      <p className="help-sidebar-about-descriptions">{intl.formatMessage(messages.warningDescription)}</p>
+      <hr />
+      <Hyperlink
+        className="small"
+        href={importLearnMoreUrl}
+        target="_blank"
+      >
+        {intl.formatMessage(messages.learnMoreButtonTitle)}
+      </Hyperlink>
+    </HelpSidebar>
+  );
+};
+
+ImportSidebar.propTypes = {
+  intl: intlShape.isRequired,
+  courseId: PropTypes.string.isRequired,
+};
+
+export default injectIntl(ImportSidebar);
diff --git a/src/import-page/import-sidebar/ImportSidebar.test.jsx b/src/import-page/import-sidebar/ImportSidebar.test.jsx
new file mode 100644
index 0000000000..1fb3c2e28a
--- /dev/null
+++ b/src/import-page/import-sidebar/ImportSidebar.test.jsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { initializeMockApp } from '@edx/frontend-platform';
+import { AppProvider } from '@edx/frontend-platform/react';
+
+import initializeStore from '../../store';
+import messages from './messages';
+import ImportSidebar from './ImportSidebar';
+
+const courseId = 'course-123';
+let store;
+
+const RootWrapper = () => (
+  <AppProvider store={store}>
+    <IntlProvider locale="en" messages={{}}>
+      <ImportSidebar intl={{ formatMessage: jest.fn() }} courseId={courseId} />
+    </IntlProvider>
+  </AppProvider>
+);
+
+describe('<ImportSidebar />', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+    store = initializeStore();
+  });
+  it('render sidebar correctly', () => {
+    const { getByText } = render(<RootWrapper />);
+    expect(getByText(messages.title1.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.importedContentHeading.defaultMessage)).toBeInTheDocument();
+  });
+});
diff --git a/src/import-page/import-sidebar/messages.js b/src/import-page/import-sidebar/messages.js
new file mode 100644
index 0000000000..95e22cfd91
--- /dev/null
+++ b/src/import-page/import-sidebar/messages.js
@@ -0,0 +1,66 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  title1: {
+    id: 'course-authoring.import.sidebar.title1',
+    defaultMessage: 'Why import a course?',
+  },
+  description1: {
+    id: 'course-authoring.import.sidebar.description1',
+    defaultMessage: 'You may want to run a new version of an existing course, or replace an existing course altogether. Or, you may have developed a course outside {studioShortName}.',
+  },
+  importedContent: {
+    id: 'course-authoring.import.sidebar.importedContent',
+    defaultMessage: 'What content is imported?',
+  },
+  importedContentHeading: {
+    id: 'course-authoring.import.sidebar.importedContentHeading',
+    defaultMessage: 'The following content is imported.',
+  },
+  content1: {
+    id: 'course-authoring.import.sidebar.content1',
+    defaultMessage: 'Course content and structure',
+  },
+  content2: {
+    id: 'course-authoring.import.sidebar.content2',
+    defaultMessage: 'Course dates',
+  },
+  content3: {
+    id: 'course-authoring.import.sidebar.content3',
+    defaultMessage: 'Grading policy',
+  },
+  content4: {
+    id: 'course-authoring.import.sidebar.content4',
+    defaultMessage: 'Any group configurations',
+  },
+  content5: {
+    id: 'course-authoring.import.sidebar.content5',
+    defaultMessage: 'Settings on the advanced settings page, including MATLAB API keys and LTI passports',
+  },
+  notImportedContent: {
+    id: 'course-authoring.import.sidebar.notImportedContent',
+    defaultMessage: 'The following content is not exported.',
+  },
+  content6: {
+    id: 'course-authoring.import.sidebar.content6',
+    defaultMessage: 'Learner-specific content, such as learner grades and discussion forum data',
+  },
+  content7: {
+    id: 'course-authoring.import.sidebar.content7',
+    defaultMessage: 'The course team',
+  },
+  warningTitle: {
+    id: 'course-authoring.import.sidebar.warningTitle',
+    defaultMessage: 'Warning: importing while a course is running',
+  },
+  warningDescription: {
+    id: 'course-authoring.import.sidebar.warningDescription',
+    defaultMessage: 'If you perform an import while your course is running, and you change the URL names (or url_name nodes) of any problem components, the student data associated with those problem components may be lost. This data includes students\' problem scores.',
+  },
+  learnMoreButtonTitle: {
+    id: 'course-authoring.import.sidebar.learnMoreButtonTitle',
+    defaultMessage: 'Learn more about importing a course',
+  },
+});
+
+export default messages;
diff --git a/src/import-page/import-stepper/ImportStepper.jsx b/src/import-page/import-stepper/ImportStepper.jsx
new file mode 100644
index 0000000000..cac74f5ec0
--- /dev/null
+++ b/src/import-page/import-stepper/ImportStepper.jsx
@@ -0,0 +1,116 @@
+import React, { useEffect } from 'react';
+import {
+  FormattedDate,
+  injectIntl,
+  intlShape,
+} from '@edx/frontend-platform/i18n';
+import PropTypes from 'prop-types';
+import { useDispatch, useSelector } from 'react-redux';
+import { Button } from '@openedx/paragon';
+import { getConfig } from '@edx/frontend-platform';
+
+import { RequestStatus } from '../../data/constants';
+import CourseStepper from '../../generic/course-stepper';
+import { IMPORT_STAGES } from '../data/constants';
+import { fetchImportStatus } from '../data/thunks';
+import {
+  getCurrentStage, getError, getFileName, getLoadingStatus, getProgress, getSavingStatus, getSuccessDate,
+} from '../data/selectors';
+import messages from './messages';
+
+const ImportStepper = ({ intl, courseId }) => {
+  const currentStage = useSelector(getCurrentStage);
+  const fileName = useSelector(getFileName);
+  const { hasError, message: errorMessage } = useSelector(getError);
+  const progress = useSelector(getProgress);
+  const dispatch = useDispatch();
+  const loadingStatus = useSelector(getLoadingStatus);
+  const savingStatus = useSelector(getSavingStatus);
+  const successDate = useSelector(getSuccessDate);
+  const isStopFetching = currentStage === IMPORT_STAGES.SUCCESS
+    || loadingStatus === RequestStatus.FAILED
+    || savingStatus === RequestStatus.FAILED
+    || hasError;
+  const formattedErrorMessage = hasError ? errorMessage || intl.formatMessage(messages.defaultErrorMessage) : '';
+
+  useEffect(() => {
+    const id = setInterval(() => {
+      if (isStopFetching) {
+        clearInterval(id);
+      } else if (fileName) {
+        dispatch(fetchImportStatus(courseId, fileName));
+      }
+    }, 3000);
+    return () => clearInterval(id);
+  });
+
+  let successTitle = intl.formatMessage(messages.stepperSuccessTitle);
+  const localizedSuccessDate = successDate ? (
+    <FormattedDate
+      value={successDate}
+      year="2-digit"
+      month="2-digit"
+      day="2-digit"
+      hour="numeric"
+      minute="numeric"
+    />
+  ) : null;
+  if (localizedSuccessDate && currentStage === IMPORT_STAGES.SUCCESS) {
+    const successWithDate = (
+      <>
+        {successTitle} ({localizedSuccessDate})
+      </>
+    );
+    successTitle = successWithDate;
+  }
+
+  const handleRedirectCourseOutline = () => window.location.replace(`${getConfig().STUDIO_BASE_URL}/course/${courseId}`);
+
+  const steps = [
+    {
+      title: intl.formatMessage(messages.stepperUploadingTitle),
+      description: intl.formatMessage(messages.stepperUploadingDescription),
+      key: IMPORT_STAGES.UPLOADING,
+    }, {
+      title: intl.formatMessage(messages.stepperUnpackingTitle),
+      description: intl.formatMessage(messages.stepperUnpackingDescription),
+      key: IMPORT_STAGES.UNPACKING,
+    }, {
+      title: intl.formatMessage(messages.stepperVerifyingTitle),
+      description: intl.formatMessage(messages.stepperVerifyingDescription),
+      key: IMPORT_STAGES.VERIFYING,
+    }, {
+      title: intl.formatMessage(messages.stepperUpdatingTitle),
+      description: intl.formatMessage(messages.stepperUpdatingDescription),
+      key: IMPORT_STAGES.UPDATING,
+    }, {
+      title: successTitle,
+      description: intl.formatMessage(messages.stepperSuccessDescription),
+      key: IMPORT_STAGES.SUCCESS,
+    },
+  ];
+
+  return (
+    <section>
+      <h3 className="mt-4">{intl.formatMessage(messages.stepperHeaderTitle)}</h3>
+      <CourseStepper
+        courseId={courseId}
+        percent={currentStage === IMPORT_STAGES.UPLOADING ? progress : null}
+        steps={steps}
+        activeKey={currentStage}
+        hasError={hasError}
+        errorMessage={formattedErrorMessage}
+      />
+      {currentStage === IMPORT_STAGES.SUCCESS && (
+        <Button className="ml-5.5 mt-n2.5" onClick={handleRedirectCourseOutline}>{intl.formatMessage(messages.viewOutlineButton)}</Button>
+      )}
+    </section>
+  );
+};
+
+ImportStepper.propTypes = {
+  intl: intlShape.isRequired,
+  courseId: PropTypes.string.isRequired,
+};
+
+export default injectIntl(ImportStepper);
diff --git a/src/import-page/import-stepper/ImportStepper.test.jsx b/src/import-page/import-stepper/ImportStepper.test.jsx
new file mode 100644
index 0000000000..eaf466da43
--- /dev/null
+++ b/src/import-page/import-stepper/ImportStepper.test.jsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { initializeMockApp } from '@edx/frontend-platform';
+import { AppProvider } from '@edx/frontend-platform/react';
+
+import initializeStore from '../../store';
+import messages from './messages';
+import ImportStepper from './ImportStepper';
+
+const courseId = 'course-123';
+let store;
+
+const RootWrapper = () => (
+  <AppProvider store={store}>
+    <IntlProvider locale="en" messages={{}}>
+      <ImportStepper intl={{ formatMessage: jest.fn() }} courseId={courseId} />
+    </IntlProvider>
+  </AppProvider>
+);
+
+describe('<ImportStepper />', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+    store = initializeStore();
+  });
+  it('render stepper correctly', () => {
+    const { getByText } = render(<RootWrapper />);
+    expect(getByText(messages.stepperHeaderTitle.defaultMessage)).toBeInTheDocument();
+  });
+});
diff --git a/src/import-page/import-stepper/messages.js b/src/import-page/import-stepper/messages.js
new file mode 100644
index 0000000000..172b4a7338
--- /dev/null
+++ b/src/import-page/import-stepper/messages.js
@@ -0,0 +1,58 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  stepperUploadingTitle: {
+    id: 'course-authoring.import.stepper.title.uploading',
+    defaultMessage: 'Uploading',
+  },
+  stepperUnpackingTitle: {
+    id: 'course-authoring.import.stepper.title.unpacking',
+    defaultMessage: 'Unpacking',
+  },
+  stepperVerifyingTitle: {
+    id: 'course-authoring.import.stepper.title.verifying',
+    defaultMessage: 'Verifying',
+  },
+  stepperUpdatingTitle: {
+    id: 'course-authoring.import.stepper.title.updating',
+    defaultMessage: 'Updating сourse',
+  },
+  stepperSuccessTitle: {
+    id: 'course-authoring.import.stepper.title.success',
+    defaultMessage: 'Success',
+  },
+  stepperUploadingDescription: {
+    id: 'course-authoring.import.stepper.description.uploading',
+    defaultMessage: 'Transferring your file to our servers',
+  },
+  stepperUnpackingDescription: {
+    id: 'course-authoring.import.stepper.description.unpacking',
+    defaultMessage: 'Expanding and preparing folder/file structure (You can now leave this page safely, but avoid making drastic changes to content until this import is complete)',
+  },
+  stepperVerifyingDescription: {
+    id: 'course-authoring.import.stepper.description.verifying',
+    defaultMessage: 'Reviewing semantics, syntax, and required data',
+  },
+  stepperUpdatingDescription: {
+    id: 'course-authoring.import.stepper.description.updating',
+    defaultMessage: 'Integrating your imported content into this course. This process might take longer with larger courses.',
+  },
+  stepperSuccessDescription: {
+    id: 'course-authoring.import.stepper.description.success',
+    defaultMessage: 'Your imported content has now been integrated into this course',
+  },
+  viewOutlineButton: {
+    id: 'course-authoring.import.stepper.button.outline',
+    defaultMessage: 'View updated outline',
+  },
+  defaultErrorMessage: {
+    id: 'course-authoring.import.stepper.error.default',
+    defaultMessage: 'Error importing course',
+  },
+  stepperHeaderTitle: {
+    id: 'course-authoring.import.stepper.header.title',
+    defaultMessage: 'Course import status',
+  },
+});
+
+export default messages;
diff --git a/src/import-page/messages.js b/src/import-page/messages.js
new file mode 100644
index 0000000000..7b7c21371c
--- /dev/null
+++ b/src/import-page/messages.js
@@ -0,0 +1,30 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  pageTitle: {
+    id: 'course-authoring.import.page.title',
+    defaultMessage: '{headingTitle} | {courseName} | {siteName}',
+  },
+  headingTitle: {
+    id: 'course-authoring.import.heading.title',
+    defaultMessage: 'Course import',
+  },
+  headingSubtitle: {
+    id: 'course-authoring.import.heading.subtitle',
+    defaultMessage: 'Tools',
+  },
+  description1: {
+    id: 'course-authoring.import.description1',
+    defaultMessage: 'Be sure you want to import a course before continuing. The contents of the imported course will replace the contents of the existing course. You cannot undo a course import. Before you proceed, we recommend that you export the current course, so that you have a backup copy of it.',
+  },
+  description2: {
+    id: 'course-authoring.import.description2',
+    defaultMessage: 'The course that you import must be in a .tar.gz file (that is, a .tar file compressed with GNU Zip). This .tar.gz file must contain a course.xml file. It may also contain other files.',
+  },
+  description3: {
+    id: 'course-authoring.import.description3',
+    defaultMessage: 'The import process has five stages. During the first two stages, you must stay on this page. You can leave this page after the unpacking stage has completed. We recommend, however, that you don\'t make important changes to your course until the import operation has completed.',
+  },
+});
+
+export default messages;
diff --git a/src/import-page/utils.js b/src/import-page/utils.js
new file mode 100644
index 0000000000..a5ce107ff1
--- /dev/null
+++ b/src/import-page/utils.js
@@ -0,0 +1,16 @@
+import Cookies from 'universal-cookie';
+
+import { LAST_IMPORT_COOKIE_NAME } from './data/constants';
+
+/**
+ * Sets an import-related cookie with the provided information.
+ *
+ * @param {Date} date - Date of import.
+ * @param {boolean} completed - Indicates if import was completed successfully.
+ * @param {string} fileName - File name.
+ * @returns {void}
+ */
+export const setImportCookie = (date, completed, fileName) => {
+  const cookies = new Cookies();
+  cookies.set(LAST_IMPORT_COOKIE_NAME, { date, completed, fileName }, { path: window.location.pathname });
+};
diff --git a/src/import-page/utils.test.js b/src/import-page/utils.test.js
new file mode 100644
index 0000000000..5b3c55dbff
--- /dev/null
+++ b/src/import-page/utils.test.js
@@ -0,0 +1,29 @@
+import Cookies from 'universal-cookie';
+
+import { LAST_IMPORT_COOKIE_NAME } from './data/constants';
+import { setImportCookie } from './utils';
+
+global.window = Object.create(window);
+Object.defineProperty(window, 'location', {
+  value: {
+    pathname: '/some-path',
+  },
+});
+
+describe('setImportCookie', () => {
+  it('should set the import cookie with the provided data', () => {
+    const cookiesSetMock = jest.spyOn(Cookies.prototype, 'set');
+    const date = '2023-07-24';
+    const completed = true;
+    const fileName = 'testFileName.test';
+    setImportCookie(date, completed, fileName);
+
+    expect(cookiesSetMock).toHaveBeenCalledWith(
+      LAST_IMPORT_COOKIE_NAME,
+      { date, completed, fileName },
+      { path: '/some-path' },
+    );
+
+    cookiesSetMock.mockRestore();
+  });
+});
diff --git a/src/index.jsx b/src/index.jsx
index ef1a3e2970..34f27f1b9a 100755
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -1,37 +1,109 @@
-import 'core-js/stable';
-import 'regenerator-runtime/runtime';
-
 import {
-  APP_INIT_ERROR, APP_READY, subscribe, initialize, mergeConfig,
+  APP_INIT_ERROR, APP_READY, subscribe, initialize, mergeConfig, getConfig, getPath,
 } from '@edx/frontend-platform';
 import { AppProvider, ErrorPage } from '@edx/frontend-platform/react';
-import React from 'react';
+import React, { useEffect } from 'react';
 import ReactDOM from 'react-dom';
-import { Route, Switch } from 'react-router-dom';
-
-import { messages as footerMessages } from '@edx/frontend-component-footer';
+import {
+  Route, createRoutesFromElements, createBrowserRouter, RouterProvider,
+} from 'react-router-dom';
+import {
+  QueryClient,
+  QueryClientProvider,
+} from '@tanstack/react-query';
 
-import appMessages from './i18n';
+import { initializeHotjar } from '@edx/frontend-enterprise-hotjar';
+import { logError } from '@edx/frontend-platform/logging';
+import messages from './i18n';
 
+import {
+  ComponentPicker,
+  CreateLibrary,
+  LibraryLayout,
+  PreviewChangesEmbed,
+} from './library-authoring';
 import initializeStore from './store';
-import './index.scss';
 import CourseAuthoringRoutes from './CourseAuthoringRoutes';
+import Head from './head/Head';
+import { StudioHome } from './studio-home';
+import CourseRerun from './course-rerun';
+import { TaxonomyLayout, TaxonomyDetailPage, TaxonomyListPage } from './taxonomy';
+import { ContentTagsDrawer } from './content-tags-drawer';
+import AccessibilityPage from './accessibility-page';
+import { ToastProvider } from './generic/toast-context';
+
+import 'react-datepicker/dist/react-datepicker.css';
+import './index.scss';
+
+const queryClient = new QueryClient();
+
+const App = () => {
+  useEffect(() => {
+    if (process.env.HOTJAR_APP_ID) {
+      try {
+        initializeHotjar({
+          hotjarId: process.env.HOTJAR_APP_ID,
+          hotjarVersion: process.env.HOTJAR_VERSION,
+          hotjarDebug: !!process.env.HOTJAR_DEBUG,
+        });
+      } catch (error) {
+        logError(error);
+      }
+    }
+  }, []);
+
+  const router = createBrowserRouter(
+    createRoutesFromElements(
+      <Route>
+        <Route path="/home" element={<StudioHome />} />
+        <Route path="/libraries" element={<StudioHome />} />
+        <Route path="/libraries-v1" element={<StudioHome />} />
+        <Route path="/library/create" element={<CreateLibrary />} />
+        <Route path="/library/:libraryId/*" element={<LibraryLayout />} />
+        <Route path="/component-picker" element={<ComponentPicker />} />
+        <Route path="/component-picker/multiple" element={<ComponentPicker componentPickerMode="multiple" />} />
+        <Route path="/legacy/preview-changes/:usageKey" element={<PreviewChangesEmbed />} />
+        <Route path="/course/:courseId/*" element={<CourseAuthoringRoutes />} />
+        <Route path="/course_rerun/:courseId" element={<CourseRerun />} />
+        {getConfig().ENABLE_ACCESSIBILITY_PAGE === 'true' && (
+          <Route path="/accessibility" element={<AccessibilityPage />} />
+        )}
+        {getConfig().ENABLE_TAGGING_TAXONOMY_PAGES === 'true' && (
+          <>
+            <Route path="/taxonomies" element={<TaxonomyLayout />}>
+              <Route index element={<TaxonomyListPage />} />
+            </Route>
+            <Route path="/taxonomy" element={<TaxonomyLayout />}>
+              <Route path="/taxonomy/:taxonomyId" element={<TaxonomyDetailPage />} />
+            </Route>
+            <Route
+              path="/tagging/components/widget/:contentId"
+              element={<ContentTagsDrawer />}
+            />
+          </>
+        )}
+      </Route>,
+    ),
+    {
+      basename: getPath(getConfig().PUBLIC_PATH),
+    },
+  );
+
+  return (
+    <AppProvider store={initializeStore()} wrapWithRouter={false}>
+      <ToastProvider>
+        <QueryClientProvider client={queryClient}>
+          <Head />
+          <RouterProvider router={router} />
+        </QueryClientProvider>
+      </ToastProvider>
+    </AppProvider>
+  );
+};
 
 subscribe(APP_READY, () => {
   ReactDOM.render(
-    <AppProvider store={initializeStore()}>
-      <Switch>
-        <Route
-          path="/course/:courseId"
-          render={({ match }) => {
-            const { params: { courseId } } = match;
-            return (
-              <CourseAuthoringRoutes courseId={courseId} />
-            );
-          }}
-        />
-      </Switch>
-    </AppProvider>,
+    (<App />),
     document.getElementById('root'),
   );
 });
@@ -46,13 +118,32 @@ initialize({
       mergeConfig({
         SUPPORT_URL: process.env.SUPPORT_URL || null,
         SUPPORT_EMAIL: process.env.SUPPORT_EMAIL || null,
+        LEARNING_BASE_URL: process.env.LEARNING_BASE_URL,
+        LMS_BASE_URL: process.env.LMS_BASE_URL || null,
+        EXAMS_BASE_URL: process.env.EXAMS_BASE_URL || null,
         CALCULATOR_HELP_URL: process.env.CALCULATOR_HELP_URL || null,
+        ENABLE_PROGRESS_GRAPH_SETTINGS: process.env.ENABLE_PROGRESS_GRAPH_SETTINGS || 'false',
+        ENABLE_TEAM_TYPE_SETTING: process.env.ENABLE_TEAM_TYPE_SETTING === 'true',
+        ENABLE_OPEN_MANAGED_TEAM_TYPE: process.env.ENABLE_OPEN_MANAGED_TEAM_TYPE === 'true',
+        BBB_LEARN_MORE_URL: process.env.BBB_LEARN_MORE_URL || '',
+        STUDIO_BASE_URL: process.env.STUDIO_BASE_URL || null,
+        STUDIO_SHORT_NAME: process.env.STUDIO_SHORT_NAME || null,
+        TERMS_OF_SERVICE_URL: process.env.TERMS_OF_SERVICE_URL || null,
+        PRIVACY_POLICY_URL: process.env.PRIVACY_POLICY_URL || null,
+        ENABLE_ACCESSIBILITY_PAGE: process.env.ENABLE_ACCESSIBILITY_PAGE || 'false',
+        NOTIFICATION_FEEDBACK_URL: process.env.NOTIFICATION_FEEDBACK_URL || null,
+        ENABLE_UNIT_PAGE: process.env.ENABLE_UNIT_PAGE || 'false',
+        ENABLE_ASSETS_PAGE: process.env.ENABLE_ASSETS_PAGE || 'false',
+        ENABLE_VIDEO_UPLOAD_PAGE_LINK_IN_CONTENT_DROPDOWN: process.env.ENABLE_VIDEO_UPLOAD_PAGE_LINK_IN_CONTENT_DROPDOWN || 'false',
+        ENABLE_CERTIFICATE_PAGE: process.env.ENABLE_CERTIFICATE_PAGE || 'false',
+        ENABLE_TAGGING_TAXONOMY_PAGES: process.env.ENABLE_TAGGING_TAXONOMY_PAGES || 'false',
+        ENABLE_HOME_PAGE_COURSE_API_V2: process.env.ENABLE_HOME_PAGE_COURSE_API_V2 === 'true',
+        ENABLE_CHECKLIST_QUALITY: process.env.ENABLE_CHECKLIST_QUALITY || 'true',
+        ENABLE_GRADING_METHOD_IN_PROBLEMS: process.env.ENABLE_GRADING_METHOD_IN_PROBLEMS === 'true',
+        LIBRARY_SUPPORTED_BLOCKS: (process.env.LIBRARY_SUPPORTED_BLOCKS || 'problem,video,html').split(','),
       }, 'CourseAuthoringConfig');
     },
   },
-  messages: [
-    appMessages,
-    footerMessages,
-  ],
+  messages,
   requireAuthenticatedUser: true,
 });
diff --git a/src/index.scss b/src/index.scss
old mode 100755
new mode 100644
index f6bdd4fba3..69f9b8b34f
--- a/src/index.scss
+++ b/src/index.scss
@@ -1,10 +1,67 @@
 @import "~@edx/brand/paragon/fonts";
 @import "~@edx/brand/paragon/variables";
-@import "~@edx/paragon/scss/core/core";
+@import "~@openedx/paragon/scss/core/core";
 @import "~@edx/brand/paragon/overrides";
+@import "~@edx/frontend-component-header/dist/index";
+@import "assets/scss/variables";
+@import "assets/scss/form";
+@import "assets/scss/utilities";
+@import "assets/scss/animations";
+@import "pages-and-resources/discussions/app-list/AppList";
+@import "advanced-settings/scss/AdvancedSettings";
+@import "grading-settings/scss/GradingSettings";
+@import "studio-home/scss/StudioHome";
+@import "generic/styles";
+@import "schedule-and-details/ScheduleAndDetails";
+@import "course-team/CourseTeam";
+@import "course-updates/CourseUpdates";
+@import "export-page/CourseExportPage";
+@import "import-page/CourseImportPage";
+@import "taxonomy";
+@import "library-authoring";
+@import "files-and-videos";
+@import "content-tags-drawer";
+@import "course-outline/CourseOutline";
+@import "course-unit/CourseUnit";
+@import "course-checklist/CourseChecklist";
+@import "textbooks/Textbooks";
+@import "content-tags-drawer/ContentTagsDropDownSelector";
+@import "content-tags-drawer/ContentTagsCollapsible";
+@import "search-modal";
+@import "search-manager";
+@import "certificates/scss/Certificates";
+@import "group-configurations/GroupConfigurations";
 
-@import "studio-header/header";
-@import "~@edx/frontend-component-footer/dist/footer";
+// To apply the glow effect to the selected Section/Subsection, in the Course Outline
+div.row:has(> div > div.highlight) {
+  animation: 5s glow;
+  animation-timing-function: cubic-bezier(1, 0, .72, .04);
+}
 
-@import "proctored-exam-settings/proctoredExamSettings";
-@import "pages-and-resources/discussions/app-list/AppList";
+// To apply the glow effect to the selected xblock, in the Unit Outline
+div.xblock-highlight {
+  animation: 5s glow;
+  animation-timing-function: cubic-bezier(1, 0, .72, .04);
+}
+
+@keyframes glow {
+  0% {
+    box-shadow: 0 0 5px 5px $primary-500;
+  }
+
+  100% {
+    box-shadow: unset;
+  }
+}
+
+body {
+  background-color: $light-200;
+
+  .editor-page {
+    background-color: $light-100;
+  }
+}
+
+mark {
+  padding: 0;
+}
diff --git a/src/library-authoring/EmptyStates.tsx b/src/library-authoring/EmptyStates.tsx
new file mode 100644
index 0000000000..ac69e56d16
--- /dev/null
+++ b/src/library-authoring/EmptyStates.tsx
@@ -0,0 +1,43 @@
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import type { MessageDescriptor } from 'react-intl';
+import {
+  Button, Stack,
+} from '@openedx/paragon';
+import { Add } from '@openedx/paragon/icons';
+import { ClearFiltersButton } from '../search-manager';
+import messages from './messages';
+import { useLibraryContext } from './common/context/LibraryContext';
+
+export const NoComponents = ({
+  infoText = messages.noComponents,
+  addBtnText = messages.addComponent,
+  handleBtnClick,
+}: {
+  infoText?: MessageDescriptor;
+  addBtnText?: MessageDescriptor;
+  handleBtnClick: () => void;
+}) => {
+  const { readOnly } = useLibraryContext();
+
+  return (
+    <Stack direction="horizontal" gap={3} className="mt-6 justify-content-center">
+      <FormattedMessage {...infoText} />
+      {!readOnly && (
+        <Button iconBefore={Add} onClick={handleBtnClick}>
+          <FormattedMessage {...addBtnText} />
+        </Button>
+      )}
+    </Stack>
+  );
+};
+
+export const NoSearchResults = ({
+  infoText = messages.noSearchResults,
+}: {
+  infoText?: MessageDescriptor;
+}) => (
+  <Stack direction="horizontal" gap={3} className="my-6 justify-content-center">
+    <FormattedMessage {...infoText} />
+    <ClearFiltersButton variant="primary" size="md" />
+  </Stack>
+);
diff --git a/src/library-authoring/LibraryAuthoringPage.scss b/src/library-authoring/LibraryAuthoringPage.scss
new file mode 100644
index 0000000000..b4c08e02b3
--- /dev/null
+++ b/src/library-authoring/LibraryAuthoringPage.scss
@@ -0,0 +1,31 @@
+.library-authoring-page {
+  .header-actions {
+    .normal-border {
+      border: 1px solid;
+    }
+
+    .open-border {
+      border: 2px solid;
+      margin: -1px 0;
+    }
+  }
+}
+
+.library-authoring-sidebar {
+  z-index: 1000; // same as header
+  flex: 450px 0 0;
+  position: sticky;
+  top: 0;
+  right: 0;
+  height: 100vh;
+  overflow-y: auto;
+}
+
+.dropdown-menu {
+  z-index: 1001; // over the sidebar
+}
+
+// Reduce breadcrumb bottom margin
+ol.list-inline {
+  margin-bottom: 0;
+}
diff --git a/src/library-authoring/LibraryAuthoringPage.test.tsx b/src/library-authoring/LibraryAuthoringPage.test.tsx
new file mode 100644
index 0000000000..0c725fbf2d
--- /dev/null
+++ b/src/library-authoring/LibraryAuthoringPage.test.tsx
@@ -0,0 +1,721 @@
+import { getConfig } from '@edx/frontend-platform';
+import fetchMock from 'fetch-mock-jest';
+import { Helmet } from 'react-helmet';
+import {
+  fireEvent,
+  initializeMocks,
+  render,
+  screen,
+  waitFor,
+  within,
+} from '../testUtils';
+import mockResult from './__mocks__/library-search.json';
+import mockEmptyResult from '../search-modal/__mocks__/empty-search-result.json';
+import {
+  mockContentLibrary,
+  mockGetCollectionMetadata,
+  mockGetLibraryTeam,
+  mockXBlockFields,
+} from './data/api.mocks';
+import { mockContentSearchConfig } from '../search-manager/data/api.mock';
+import { studioHomeMock } from '../studio-home/__mocks__';
+import { getStudioHomeApiUrl } from '../studio-home/data/api';
+import { mockBroadcastChannel } from '../generic/data/api.mock';
+import { LibraryLayout } from '.';
+import { getLibraryCollectionsApiUrl } from './data/api';
+
+mockGetCollectionMetadata.applyMock();
+mockContentSearchConfig.applyMock();
+mockContentLibrary.applyMock();
+mockGetLibraryTeam.applyMock();
+mockXBlockFields.applyMock();
+mockBroadcastChannel();
+
+const searchEndpoint = 'http://mock.meilisearch.local/multi-search';
+
+/**
+ * Returns 0 components from the search query.
+*/
+const returnEmptyResult = (_url, req) => {
+  const requestData = JSON.parse(req.body?.toString() ?? '');
+  const query = requestData?.queries[0]?.q ?? '';
+  // We have to replace the query (search keywords) in the mock results with the actual query,
+  // because otherwise we may have an inconsistent state that causes more queries and unexpected results.
+  mockEmptyResult.results[0].query = query;
+  // And fake the required '_formatted' fields; it contains the highlighting <mark>...</mark> around matched words
+  // eslint-disable-next-line no-underscore-dangle, no-param-reassign
+  mockEmptyResult.results[0]?.hits.forEach((hit) => { hit._formatted = { ...hit }; });
+  return mockEmptyResult;
+};
+
+const path = '/library/:libraryId/*';
+const libraryTitle = mockContentLibrary.libraryData.title;
+
+describe('<LibraryAuthoringPage />', () => {
+  beforeEach(async () => {
+    const { axiosMock } = initializeMocks();
+    axiosMock.onGet(getStudioHomeApiUrl()).reply(200, studioHomeMock);
+
+    // The Meilisearch client-side API uses fetch, not Axios.
+    fetchMock.mockReset();
+    fetchMock.post(searchEndpoint, (_url, req) => {
+      const requestData = JSON.parse(req.body?.toString() ?? '');
+      const query = requestData?.queries[0]?.q ?? '';
+      // We have to replace the query (search keywords) in the mock results with the actual query,
+      // because otherwise Instantsearch will update the UI and change the query,
+      // leading to unexpected results in the test cases.
+      const newMockResult = { ...mockResult };
+      newMockResult.results[0].query = query;
+      // And fake the required '_formatted' fields; it contains the highlighting <mark>...</mark> around matched words
+      // eslint-disable-next-line no-underscore-dangle, no-param-reassign
+      newMockResult.results[0]?.hits.forEach((hit) => { hit._formatted = { ...hit }; });
+      return newMockResult;
+    });
+  });
+
+  const renderLibraryPage = async () => {
+    render(<LibraryLayout />, { path, params: { libraryId: mockContentLibrary.libraryId } });
+
+    // Ensure the search endpoint is called:
+    // Call 1: To fetch searchable/filterable/sortable library data
+    await waitFor(() => { expect(fetchMock).toHaveFetchedTimes(1, searchEndpoint, 'post'); });
+  };
+
+  it('shows the spinner before the query is complete', () => {
+    // This mock will never return data about the library (it loads forever):
+    const libraryId = mockContentLibrary.libraryIdThatNeverLoads;
+    render(<LibraryLayout />, { path, params: { libraryId } });
+    const spinner = screen.getByRole('status');
+    expect(spinner.textContent).toEqual('Loading...');
+  });
+
+  it('shows an error component if no library returned', async () => {
+    // This mock will simulate a 404 error:
+    const libraryId = mockContentLibrary.library404;
+    render(<LibraryLayout />, { path, params: { libraryId } });
+    expect(await screen.findByTestId('notFoundAlert')).toBeInTheDocument();
+  });
+
+  it('shows library data', async () => {
+    await renderLibraryPage();
+
+    expect(await screen.findByText('Content library')).toBeInTheDocument();
+    expect((await screen.findAllByText(libraryTitle))[0]).toBeInTheDocument();
+
+    const browserTabTitle = Helmet.peek().title.join('');
+    const siteName = getConfig().SITE_NAME;
+    expect(browserTabTitle).toEqual(`${libraryTitle} | ${siteName}`);
+
+    expect(screen.queryByText('You have not added any content to this library yet.')).not.toBeInTheDocument();
+
+    expect(screen.getAllByText('Recently Modified').length).toEqual(1);
+    expect((await screen.findAllByText('Introduction to Testing'))[0]).toBeInTheDocument();
+
+    // Navigate to the components tab
+    fireEvent.click(screen.getByRole('tab', { name: 'Components' }));
+    // "Recently Modified" default sort shown
+    expect(screen.getAllByText('Recently Modified').length).toEqual(1);
+
+    // Navigate to the collections tab
+    fireEvent.click(screen.getByRole('tab', { name: 'Collections' }));
+    // "Recently Modified" default sort shown
+    expect(screen.getAllByText('Recently Modified').length).toEqual(1);
+    expect(screen.queryByText('There are 10 components in this library')).not.toBeInTheDocument();
+    expect((await screen.findAllByText('Collection 1'))[0]).toBeInTheDocument();
+
+    // Go back to Home tab
+    // This step is necessary to avoid the url change leak to other tests
+    fireEvent.click(screen.getByRole('tab', { name: 'All Content' }));
+    expect(screen.getAllByText('Recently Modified').length).toEqual(1);
+  });
+
+  it('shows a library without components and collections', async () => {
+    fetchMock.post(searchEndpoint, returnEmptyResult, { overwriteRoutes: true });
+    await renderLibraryPage();
+
+    expect(await screen.findByText('Content library')).toBeInTheDocument();
+    expect((await screen.findAllByText(libraryTitle))[0]).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole('tab', { name: 'Collections' }));
+    expect(screen.getByText('You have not added any collections to this library yet.')).toBeInTheDocument();
+
+    // Open Create collection modal
+    const addCollectionButton = screen.getByRole('button', { name: /add collection/i });
+    fireEvent.click(addCollectionButton);
+    const collectionModalHeading = await screen.findByRole('heading', { name: /new collection/i });
+    expect(collectionModalHeading).toBeInTheDocument();
+
+    // Click on Cancel button
+    const cancelButton = screen.getByRole('button', { name: /cancel/i });
+    fireEvent.click(cancelButton);
+    expect(collectionModalHeading).not.toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole('tab', { name: 'All Content' }));
+    expect(screen.getByText('You have not added any content to this library yet.')).toBeInTheDocument();
+
+    const addComponentButton = screen.getByRole('button', { name: /add component/i });
+    fireEvent.click(addComponentButton);
+    expect(screen.getByText(/add content/i)).toBeInTheDocument();
+  });
+
+  it('shows the new content button', async () => {
+    await renderLibraryPage();
+
+    expect(await screen.findByRole('heading')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /new/i })).toBeInTheDocument();
+    expect(screen.queryByText('Read Only')).not.toBeInTheDocument();
+  });
+
+  it('shows an empty read-only library, without a "create component" button', async () => {
+    // Use a library mock that is read-only:
+    const libraryId = mockContentLibrary.libraryIdReadOnly;
+    // Update search mock so it returns no results:
+    fetchMock.post(searchEndpoint, returnEmptyResult, { overwriteRoutes: true });
+    render(<LibraryLayout />, { path, params: { libraryId } });
+    await waitFor(() => { expect(fetchMock).toHaveFetchedTimes(1, searchEndpoint, 'post'); });
+
+    expect(await screen.findByText('Content library')).toBeInTheDocument();
+    expect(screen.getByText('You have not added any content to this library yet.')).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: /add component/i })).not.toBeInTheDocument();
+    expect(screen.getByText('Read Only')).toBeInTheDocument();
+  });
+
+  it('show a library without search results', async () => {
+    // Update search mock so it returns no results:
+    fetchMock.post(searchEndpoint, returnEmptyResult, { overwriteRoutes: true });
+    await renderLibraryPage();
+
+    expect(await screen.findByText('Content library')).toBeInTheDocument();
+    expect((await screen.findAllByText(libraryTitle))[0]).toBeInTheDocument();
+
+    await waitFor(() => { expect(fetchMock).toHaveFetchedTimes(1, searchEndpoint, 'post'); });
+
+    fireEvent.change(screen.getByRole('searchbox'), { target: { value: 'noresults' } });
+
+    // Ensure the search endpoint is called again, only once more since the recently modified call
+    // should not be impacted by the search
+    await waitFor(() => { expect(fetchMock).toHaveFetchedTimes(2, searchEndpoint, 'post'); });
+
+    expect(screen.getByText('No matching components found in this library.')).toBeInTheDocument();
+
+    // Navigate to the components tab
+    fireEvent.click(screen.getByRole('tab', { name: 'Components' }));
+    expect(screen.getByText('No matching components found in this library.')).toBeInTheDocument();
+
+    // Navigate to the collections tab
+    fireEvent.click(screen.getByRole('tab', { name: 'Collections' }));
+    expect(screen.getByText('No matching collections found in this library.')).toBeInTheDocument();
+
+    // Go back to Home tab
+    // This step is necessary to avoid the url change leak to other tests
+    fireEvent.click(screen.getByRole('tab', { name: 'All Content' }));
+  });
+
+  it('should open and close new content sidebar', async () => {
+    await renderLibraryPage();
+
+    expect(await screen.findByRole('heading')).toBeInTheDocument();
+    expect(screen.queryByText(/add content/i)).not.toBeInTheDocument();
+
+    const newButton = screen.getByRole('button', { name: /new/i });
+    fireEvent.click(newButton);
+
+    expect(screen.getByText(/add content/i)).toBeInTheDocument();
+
+    const closeButton = screen.getByRole('button', { name: /close/i });
+    fireEvent.click(closeButton);
+
+    expect(screen.queryByText(/add content/i)).not.toBeInTheDocument();
+  });
+
+  it('should open Library Info by default', async () => {
+    await renderLibraryPage();
+
+    expect(await screen.findByText('Content library')).toBeInTheDocument();
+    expect((await screen.findAllByText(libraryTitle))[0]).toBeInTheDocument();
+    expect((await screen.findAllByText(libraryTitle))[1]).toBeInTheDocument();
+
+    expect(screen.getByText('Draft')).toBeInTheDocument();
+    expect(screen.getByText('(Never Published)')).toBeInTheDocument();
+    // Draft saved on date:
+    expect(screen.getByText('July 22, 2024')).toBeInTheDocument();
+
+    expect(screen.getByText(mockContentLibrary.libraryData.org)).toBeInTheDocument();
+    // Updated:
+    expect(screen.getByText('July 20, 2024')).toBeInTheDocument();
+    // Created:
+    expect(screen.getByText('June 26, 2024')).toBeInTheDocument();
+  });
+
+  it('should close and open Library Info', async () => {
+    await renderLibraryPage();
+
+    expect(await screen.findByText('Content library')).toBeInTheDocument();
+    expect((await screen.findAllByText(libraryTitle))[0]).toBeInTheDocument();
+    expect((await screen.findAllByText(libraryTitle))[1]).toBeInTheDocument();
+
+    // Open by default; close the library info sidebar
+    const closeButton = screen.getByRole('button', { name: /close/i });
+    fireEvent.click(closeButton);
+    expect(screen.queryByText('Draft')).not.toBeInTheDocument();
+    expect(screen.queryByText('(Never Published)')).not.toBeInTheDocument();
+
+    // Open library info sidebar with 'Library info' button
+    const libraryInfoButton = screen.getByRole('button', { name: /library info/i });
+    fireEvent.click(libraryInfoButton);
+    expect(screen.getByText('Draft')).toBeInTheDocument();
+    expect(screen.getByText('(Never Published)')).toBeInTheDocument();
+
+    // Close library info sidebar with 'Library info' button
+    fireEvent.click(libraryInfoButton);
+    expect(screen.queryByText('Draft')).not.toBeInTheDocument();
+    expect(screen.queryByText('(Never Published)')).not.toBeInTheDocument();
+  });
+
+  it('should show "Manage Access" button in Library Info that opens the Library Team modal', async () => {
+    await renderLibraryPage();
+    const manageAccess = screen.getByRole('button', { name: /manage access/i });
+
+    expect(manageAccess).not.toBeDisabled();
+    fireEvent.click(manageAccess);
+
+    expect(await screen.findByText('Library Team')).toBeInTheDocument();
+  });
+
+  it('should not show "Manage Access" button in Library Info to users who cannot edit the library', async () => {
+    const libraryId = mockContentLibrary.libraryIdReadOnly;
+    render(<LibraryLayout />, { path, params: { libraryId } });
+
+    const manageAccess = screen.queryByRole('button', { name: /manage access/i });
+    expect(manageAccess).not.toBeInTheDocument();
+  });
+
+  it('sorts library components', async () => {
+    await renderLibraryPage();
+
+    expect(await screen.findByTitle('Sort search results')).toBeInTheDocument();
+
+    const testSortOption = (async (optionText, sortBy, isDefault) => {
+      // Open the drop-down menu
+      fireEvent.click(screen.getByTitle('Sort search results'));
+
+      // Click the option with the given text
+      // Since the sort drop-down also shows the selected sort
+      // option in its toggle button, we need to make sure we're
+      // clicking on the last one found.
+      const options = screen.getAllByText(optionText);
+      expect(options.length).toBeGreaterThan(0);
+      fireEvent.click(options[options.length - 1]);
+
+      // Did the search happen with the expected sort option?
+      const bodyText = sortBy ? `"sort":["${sortBy}"]` : '"sort":[]';
+      await waitFor(() => {
+        expect(fetchMock).toHaveBeenLastCalledWith(searchEndpoint, {
+          body: expect.stringContaining(bodyText),
+          method: 'POST',
+          headers: expect.anything(),
+        });
+      });
+
+      // Is the sort option stored in the query string?
+      // Note: we can't easily check this at the moment with <MemoryRouter>
+      // const searchText = isDefault ? '' : `?sort=${encodeURIComponent(sortBy)}`;
+      // expect(window.location.href).toEqual(searchText);
+
+      // Is the selected sort option shown in the toggle button (if not default)
+      // as well as in the drop-down menu?
+      expect(screen.getAllByText(optionText).length).toEqual(isDefault ? 1 : 2);
+    });
+
+    await testSortOption('Title, A-Z', 'display_name:asc', false);
+    await testSortOption('Title, Z-A', 'display_name:desc', false);
+    await testSortOption('Newest', 'created:desc', false);
+    await testSortOption('Oldest', 'created:asc', false);
+
+    // Sorting by Recently Published also excludes unpublished components
+    await testSortOption('Recently Published', 'last_published:desc', false);
+    await waitFor(() => {
+      expect(fetchMock).toHaveBeenLastCalledWith(searchEndpoint, {
+        body: expect.stringContaining('last_published IS NOT NULL'),
+        method: 'POST',
+        headers: expect.anything(),
+      });
+    });
+
+    // Re-selecting the previous sort option resets sort to default "Recently Modified"
+    await testSortOption('Recently Published', 'modified:desc', true);
+    expect(screen.getAllByText('Recently Modified').length).toEqual(2);
+
+    // Enter a keyword into the search box
+    const searchBox = screen.getByRole('searchbox');
+    fireEvent.change(searchBox, { target: { value: 'words to find' } });
+
+    // Default sort option changes to "Most Relevant"
+    expect(screen.getAllByText('Most Relevant').length).toEqual(2);
+    await waitFor(() => {
+      expect(fetchMock).toHaveBeenLastCalledWith(searchEndpoint, {
+        body: expect.stringContaining('"sort":[]'),
+        method: 'POST',
+        headers: expect.anything(),
+      });
+    });
+  });
+
+  it('should open and close the component sidebar', async () => {
+    const mockResult0 = { ...mockResult }.results[0].hits[0];
+    const displayName = 'Introduction to Testing';
+    expect(mockResult0.display_name).toStrictEqual(displayName);
+    await renderLibraryPage();
+
+    fireEvent.click((await screen.findAllByText(displayName))[0]);
+
+    const sidebar = screen.getByTestId('library-sidebar');
+
+    const { getByRole, getByText } = within(sidebar);
+
+    await waitFor(() => expect(getByText(displayName)).toBeInTheDocument());
+
+    const closeButton = getByRole('button', { name: /close/i });
+    fireEvent.click(closeButton);
+
+    await waitFor(() => expect(screen.queryByTestId('library-sidebar')).not.toBeInTheDocument());
+  });
+
+  it('should open component sidebar, showing manage tab on clicking add to collection menu item', async () => {
+    const mockResult0 = { ...mockResult }.results[0].hits[0];
+    const displayName = 'Introduction to Testing';
+    expect(mockResult0.display_name).toStrictEqual(displayName);
+    await renderLibraryPage();
+
+    waitFor(() => expect(screen.getAllByTestId('component-card-menu-toggle').length).toBeGreaterThan(0));
+
+    // Open menu
+    fireEvent.click((await screen.findAllByTestId('component-card-menu-toggle'))[0]);
+    // Click add to collection
+    fireEvent.click(screen.getByRole('button', { name: 'Add to collection' }));
+
+    const sidebar = screen.getByTestId('library-sidebar');
+
+    const { getByRole, queryByText } = within(sidebar);
+
+    await waitFor(() => expect(queryByText(displayName)).toBeInTheDocument());
+    expect(getByRole('tab', { selected: true })).toHaveTextContent('Manage');
+    const closeButton = getByRole('button', { name: /close/i });
+    fireEvent.click(closeButton);
+
+    await waitFor(() => expect(screen.queryByTestId('library-sidebar')).not.toBeInTheDocument());
+  });
+
+  it('should open and close the collection sidebar', async () => {
+    await renderLibraryPage();
+
+    // Click on the first collection
+    fireEvent.click((await screen.findByText('Collection 1')));
+
+    const sidebar = screen.getByTestId('library-sidebar');
+
+    const { getByRole, getByText } = within(sidebar);
+
+    // The mock data for the sidebar has a title of "Test Collection"
+    await waitFor(() => expect(getByText('Test Collection')).toBeInTheDocument());
+
+    const closeButton = getByRole('button', { name: /close/i });
+    fireEvent.click(closeButton);
+
+    await waitFor(() => expect(screen.queryByTestId('library-sidebar')).not.toBeInTheDocument());
+  });
+
+  it('should preserve the tab while switching from a component to a collection', async () => {
+    await renderLibraryPage();
+
+    // Click on the first collection
+    fireEvent.click((await screen.findByText('Collection 1')));
+
+    const sidebar = screen.getByTestId('library-sidebar');
+
+    const { getByRole } = within(sidebar);
+
+    // Click on the Details tab
+    fireEvent.click(getByRole('tab', { name: 'Details' }));
+
+    // Change to a component
+    fireEvent.click((await screen.findAllByText('Introduction to Testing'))[0]);
+
+    // Check that the Details tab is still selected
+    expect(getByRole('tab', { name: 'Details' })).toHaveAttribute('aria-selected', 'true');
+
+    // Click on the Previews tab
+    fireEvent.click(getByRole('tab', { name: 'Preview' }));
+
+    // Switch back to the collection
+    fireEvent.click((await screen.findByText('Collection 1')));
+
+    // The Manage (default) tab should be selected because the collection does not have a Preview tab
+    expect(getByRole('tab', { name: 'Manage' })).toHaveAttribute('aria-selected', 'true');
+  });
+
+  it('can filter by capa problem type', async () => {
+    const problemTypes = {
+      'Multiple Choice': 'choiceresponse',
+      Checkboxes: 'multiplechoiceresponse',
+      'Numerical Input': 'numericalresponse',
+      Dropdown: 'optionresponse',
+      'Text Input': 'stringresponse',
+    };
+
+    await renderLibraryPage();
+
+    // Ensure the search endpoint is called
+    await waitFor(() => { expect(fetchMock).toHaveFetchedTimes(1, searchEndpoint, 'post'); });
+    const filterButton = screen.getByRole('button', { name: /type/i });
+    fireEvent.click(filterButton);
+
+    const problemFilterCheckbox = screen.getByRole('checkbox', { name: /problem/i });
+    const problemFilterMenuItem = problemFilterCheckbox.parentElement; // div.pgn__menu-item
+    const showProbTypesSubmenuBtn = problemFilterMenuItem!.querySelector('button[aria-label="Open problem types filters"]');
+    expect(showProbTypesSubmenuBtn).not.toBeNull();
+    fireEvent.click(showProbTypesSubmenuBtn!);
+
+    const validateSubmenu = async (submenuText: string) => {
+      const submenu = screen.getByText(submenuText);
+      expect(submenu).toBeInTheDocument();
+      fireEvent.click(submenu);
+
+      await waitFor(() => {
+        expect(fetchMock).toHaveBeenLastCalledWith(searchEndpoint, {
+          body: expect.stringContaining(`content.problem_types = ${problemTypes[submenuText]}`),
+          method: 'POST',
+          headers: expect.anything(),
+        });
+      });
+
+      fireEvent.click(submenu);
+      await waitFor(() => {
+        expect(fetchMock).toHaveBeenLastCalledWith(searchEndpoint, {
+          body: expect.not.stringContaining(`content.problem_types = ${problemTypes[submenuText]}`),
+          method: 'POST',
+          headers: expect.anything(),
+        });
+      });
+    };
+
+    // Validate per submenu
+    // eslint-disable-next-line no-restricted-syntax
+    for (const key of Object.keys(problemTypes)) {
+      // eslint-disable-next-line no-await-in-loop
+      await validateSubmenu(key);
+    }
+
+    // Validate click on Problem type
+    const problemMenu = screen.getAllByText('Problem')[0];
+    expect(problemMenu).toBeInTheDocument();
+    fireEvent.click(problemMenu);
+    await waitFor(() => {
+      expect(fetchMock).toHaveBeenLastCalledWith(searchEndpoint, {
+        body: expect.stringContaining('block_type = problem'),
+        method: 'POST',
+        headers: expect.anything(),
+      });
+    });
+
+    fireEvent.click(problemMenu);
+    await waitFor(() => {
+      expect(fetchMock).toHaveBeenLastCalledWith(searchEndpoint, {
+        body: expect.not.stringContaining('block_type = problem'),
+        method: 'POST',
+        headers: expect.anything(),
+      });
+    });
+
+    // Validate clear filters
+    const submenu = screen.getByText('Checkboxes');
+    expect(submenu).toBeInTheDocument();
+    fireEvent.click(submenu);
+
+    const clearFitlersButton = screen.getByRole('button', { name: /clear filters/i });
+    fireEvent.click(clearFitlersButton);
+    await waitFor(() => {
+      expect(fetchMock).toHaveBeenLastCalledWith(searchEndpoint, {
+        body: expect.not.stringContaining(`content.problem_types = ${problemTypes.Checkboxes}`),
+        method: 'POST',
+        headers: expect.anything(),
+      });
+    });
+  });
+
+  it('has an empty type filter when there are no results', async () => {
+    fetchMock.post(searchEndpoint, returnEmptyResult, { overwriteRoutes: true });
+    await renderLibraryPage();
+
+    const filterButton = screen.getByRole('button', { name: /type/i });
+    fireEvent.click(filterButton);
+
+    expect(screen.getByText(/no matching components/i)).toBeInTheDocument();
+  });
+
+  it('should create a collection', async () => {
+    await renderLibraryPage();
+    const title = 'This is a Test';
+    const description = 'This is the description of the Test';
+    const url = getLibraryCollectionsApiUrl(mockContentLibrary.libraryId);
+    const { axiosMock } = initializeMocks();
+    axiosMock.onPost(url).reply(200, {
+      id: '1',
+      slug: 'this-is-a-test',
+      title,
+      description,
+    });
+
+    expect(await screen.findByRole('heading')).toBeInTheDocument();
+    expect(screen.queryByText(/add content/i)).not.toBeInTheDocument();
+
+    // Open Add content sidebar
+    const newButton = screen.getByRole('button', { name: /new/i });
+    fireEvent.click(newButton);
+    expect(screen.getByText(/add content/i)).toBeInTheDocument();
+
+    // Open New collection Modal
+    const sidebar = screen.getByTestId('library-sidebar');
+    const newCollectionButton = within(sidebar).getAllByRole('button', { name: /collection/i })[0];
+    fireEvent.click(newCollectionButton);
+    const collectionModalHeading = await screen.findByRole('heading', { name: /new collection/i });
+    expect(collectionModalHeading).toBeInTheDocument();
+
+    // Click on Cancel button
+    const cancelButton = screen.getByRole('button', { name: /cancel/i });
+    fireEvent.click(cancelButton);
+    expect(collectionModalHeading).not.toBeInTheDocument();
+
+    // Open new collection modal again and create a collection
+    fireEvent.click(newCollectionButton);
+    const createButton = screen.getByRole('button', { name: /create/i });
+    const nameField = screen.getByRole('textbox', { name: /name your collection/i });
+    const descriptionField = screen.getByRole('textbox', { name: /add a description \(optional\)/i });
+
+    fireEvent.change(nameField, { target: { value: title } });
+    fireEvent.change(descriptionField, { target: { value: description } });
+    fireEvent.click(createButton);
+  });
+
+  it('should show validations in create collection', async () => {
+    await renderLibraryPage();
+
+    const title = 'This is a Test';
+    const description = 'This is the description of the Test';
+    const url = getLibraryCollectionsApiUrl(mockContentLibrary.libraryId);
+    const { axiosMock } = initializeMocks();
+    axiosMock.onPost(url).reply(200, {
+      id: '1',
+      slug: 'this-is-a-test',
+      title,
+      description,
+    });
+
+    expect(await screen.findByRole('heading')).toBeInTheDocument();
+    expect(screen.queryByText(/add content/i)).not.toBeInTheDocument();
+
+    // Open Add content sidebar
+    const newButton = screen.getByRole('button', { name: /new/i });
+    fireEvent.click(newButton);
+    expect(screen.getByText(/add content/i)).toBeInTheDocument();
+
+    // Open New collection Modal
+    const sidebar = screen.getByTestId('library-sidebar');
+    const newCollectionButton = within(sidebar).getAllByRole('button', { name: /collection/i })[0];
+    fireEvent.click(newCollectionButton);
+    const collectionModalHeading = await screen.findByRole('heading', { name: /new collection/i });
+    expect(collectionModalHeading).toBeInTheDocument();
+
+    const nameField = screen.getByRole('textbox', { name: /name your collection/i });
+    fireEvent.focus(nameField);
+    fireEvent.blur(nameField);
+
+    // Click on create with an empty name
+    const createButton = screen.getByRole('button', { name: /create/i });
+    fireEvent.click(createButton);
+
+    expect(await screen.findByText(/collection name is required/i)).toBeInTheDocument();
+  });
+
+  it('should show error on create collection', async () => {
+    await renderLibraryPage();
+    const title = 'This is a Test';
+    const description = 'This is the description of the Test';
+    const url = getLibraryCollectionsApiUrl(mockContentLibrary.libraryId);
+    const { axiosMock } = initializeMocks();
+    axiosMock.onPost(url).reply(500);
+
+    expect(await screen.findByRole('heading')).toBeInTheDocument();
+    expect(screen.queryByText(/add content/i)).not.toBeInTheDocument();
+
+    // Open Add content sidebar
+    const newButton = screen.getByRole('button', { name: /new/i });
+    fireEvent.click(newButton);
+    expect(screen.getByText(/add content/i)).toBeInTheDocument();
+
+    // Open New collection Modal
+    const sidebar = screen.getByTestId('library-sidebar');
+    const newCollectionButton = within(sidebar).getAllByRole('button', { name: /collection/i })[0];
+    fireEvent.click(newCollectionButton);
+    const collectionModalHeading = await screen.findByRole('heading', { name: /new collection/i });
+    expect(collectionModalHeading).toBeInTheDocument();
+
+    // Create a normal collection
+    const createButton = screen.getByRole('button', { name: /create/i });
+    const nameField = screen.getByRole('textbox', { name: /name your collection/i });
+    const descriptionField = screen.getByRole('textbox', { name: /add a description \(optional\)/i });
+
+    fireEvent.change(nameField, { target: { value: title } });
+    fireEvent.change(descriptionField, { target: { value: description } });
+    fireEvent.click(createButton);
+  });
+
+  it('shows a single block when usageKey query param is set', async () => {
+    render(<LibraryLayout />, {
+      path,
+      routerProps: {
+        initialEntries: [
+          `/library/${mockContentLibrary.libraryId}/components?usageKey=${mockXBlockFields.usageKeyHtml}`,
+        ],
+      },
+    });
+    await waitFor(() => {
+      expect(fetchMock).toHaveBeenLastCalledWith(searchEndpoint, {
+        body: expect.stringContaining(mockXBlockFields.usageKeyHtml),
+        headers: expect.anything(),
+        method: 'POST',
+      });
+    });
+    expect(screen.queryByPlaceholderText('Displaying single block, clear filters to search')).toBeInTheDocument();
+    const { displayName } = mockXBlockFields.dataHtml;
+    const sidebar = screen.getByTestId('library-sidebar');
+
+    const { getByText } = within(sidebar);
+
+    // should display the component with passed param: usageKey in the sidebar
+    expect(getByText(displayName)).toBeInTheDocument();
+    // clear usageKey filter
+    const clearFitlersButton = screen.getByRole('button', { name: /clear filters/i });
+    fireEvent.click(clearFitlersButton);
+    await waitFor(() => {
+      expect(fetchMock).toHaveBeenLastCalledWith(searchEndpoint, {
+        body: expect.not.stringContaining(mockXBlockFields.usageKeyHtml),
+        method: 'POST',
+        headers: expect.anything(),
+      });
+    });
+  });
+
+  it('Shows an error if libraries V2 is disabled', async () => {
+    const { axiosMock } = initializeMocks();
+    axiosMock.onGet(getStudioHomeApiUrl()).reply(200, {
+      ...studioHomeMock,
+      libraries_v2_enabled: false,
+    });
+
+    render(<LibraryLayout />, { path, params: { libraryId: mockContentLibrary.libraryId } });
+    expect(await screen.findByRole('alert')).toHaveTextContent(
+      'This page cannot be shown: Libraries v2 are disabled.',
+    );
+  });
+});
diff --git a/src/library-authoring/LibraryAuthoringPage.tsx b/src/library-authoring/LibraryAuthoringPage.tsx
new file mode 100644
index 0000000000..f80bd1dcd8
--- /dev/null
+++ b/src/library-authoring/LibraryAuthoringPage.tsx
@@ -0,0 +1,287 @@
+import { useEffect, useState } from 'react';
+import { Helmet } from 'react-helmet';
+import classNames from 'classnames';
+import { StudioFooter } from '@edx/frontend-component-footer';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import {
+  Alert,
+  Badge,
+  Breadcrumb,
+  Button,
+  Container,
+  Icon,
+  Stack,
+  Tab,
+  Tabs,
+} from '@openedx/paragon';
+import { Add, ArrowBack, InfoOutline } from '@openedx/paragon/icons';
+import { Link } from 'react-router-dom';
+
+import Loading from '../generic/Loading';
+import SubHeader from '../generic/sub-header/SubHeader';
+import Header from '../header';
+import NotFoundAlert from '../generic/NotFoundAlert';
+import { useStudioHome } from '../studio-home/hooks';
+import {
+  ClearFiltersButton,
+  FilterByBlockType,
+  FilterByTags,
+  SearchContextProvider,
+  SearchKeywordsField,
+  SearchSortWidget,
+} from '../search-manager';
+import LibraryContent from './LibraryContent';
+import { LibrarySidebar } from './library-sidebar';
+import { useComponentPickerContext } from './common/context/ComponentPickerContext';
+import { useLibraryContext } from './common/context/LibraryContext';
+import { SidebarBodyComponentId, useSidebarContext } from './common/context/SidebarContext';
+import { ContentType, useLibraryRoutes } from './routes';
+
+import messages from './messages';
+
+const HeaderActions = () => {
+  const intl = useIntl();
+
+  const { readOnly } = useLibraryContext();
+
+  const {
+    openAddContentSidebar,
+    openLibrarySidebar,
+    closeLibrarySidebar,
+    sidebarComponentInfo,
+  } = useSidebarContext();
+
+  const { componentPickerMode } = useComponentPickerContext();
+
+  const infoSidebarIsOpen = () => (
+    sidebarComponentInfo?.type === SidebarBodyComponentId.Info
+  );
+
+  const { navigateTo } = useLibraryRoutes();
+  const handleOnClickInfoSidebar = () => {
+    // Reset URL to library home
+    navigateTo();
+
+    if (infoSidebarIsOpen()) {
+      closeLibrarySidebar();
+    } else {
+      openLibrarySidebar();
+    }
+  };
+
+  return (
+    <div className="header-actions">
+      <Button
+        className={classNames('mr-1', {
+          'normal-border': !infoSidebarIsOpen(),
+          'open-border': infoSidebarIsOpen(),
+        })}
+        iconBefore={InfoOutline}
+        variant="outline-primary rounded-0"
+        onClick={handleOnClickInfoSidebar}
+      >
+        {intl.formatMessage(messages.libraryInfoButton)}
+      </Button>
+      {!componentPickerMode && (
+        <Button
+          className="ml-1"
+          iconBefore={Add}
+          variant="primary rounded-0"
+          onClick={openAddContentSidebar}
+          disabled={readOnly}
+        >
+          {intl.formatMessage(messages.newContentButton)}
+        </Button>
+      )}
+    </div>
+  );
+};
+
+const SubHeaderTitle = ({ title }: { title: string }) => {
+  const intl = useIntl();
+
+  const { readOnly } = useLibraryContext();
+  const { componentPickerMode } = useComponentPickerContext();
+
+  const showReadOnlyBadge = readOnly && !componentPickerMode;
+
+  return (
+    <Stack direction="vertical">
+      {title}
+      {showReadOnlyBadge && (
+        <div>
+          <Badge variant="primary" style={{ fontSize: '50%' }}>
+            {intl.formatMessage(messages.readOnlyBadge)}
+          </Badge>
+        </div>
+      )}
+    </Stack>
+  );
+};
+
+interface LibraryAuthoringPageProps {
+  returnToLibrarySelection?: () => void,
+}
+
+const LibraryAuthoringPage = ({ returnToLibrarySelection }: LibraryAuthoringPageProps) => {
+  const intl = useIntl();
+
+  const {
+    isLoadingPage: isLoadingStudioHome,
+    isFailedLoadingPage: isFailedLoadingStudioHome,
+    librariesV2Enabled,
+  } = useStudioHome();
+
+  const { componentPickerMode, restrictToLibrary } = useComponentPickerContext();
+  const {
+    libraryId,
+    libraryData,
+    isLoadingLibraryData,
+    showOnlyPublished,
+    componentId,
+    collectionId,
+  } = useLibraryContext();
+  const { openInfoSidebar, sidebarComponentInfo } = useSidebarContext();
+
+  const { insideCollections, insideComponents, navigateTo } = useLibraryRoutes();
+
+  // The activeKey determines the currently selected tab.
+  const [activeKey, setActiveKey] = useState<ContentType>(ContentType.home);
+  const getActiveKey = () => {
+    if (insideCollections) {
+      return ContentType.collections;
+    }
+    if (insideComponents) {
+      return ContentType.components;
+    }
+    return ContentType.home;
+  };
+
+  useEffect(() => {
+    const contentType = getActiveKey();
+
+    if (componentPickerMode) {
+      setActiveKey(ContentType.home);
+    } else {
+      setActiveKey(contentType);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!componentPickerMode) {
+      openInfoSidebar(componentId, collectionId);
+    }
+  }, []);
+
+  if (isLoadingLibraryData) {
+    return <Loading />;
+  }
+
+  if (!isLoadingStudioHome && (!librariesV2Enabled || isFailedLoadingStudioHome)) {
+    return (
+      <Alert variant="danger">
+        {intl.formatMessage(messages.librariesV2DisabledError)}
+      </Alert>
+    );
+  }
+
+  if (!libraryData) {
+    return <NotFoundAlert />;
+  }
+
+  const handleTabChange = (key: ContentType) => {
+    setActiveKey(key);
+    if (!componentPickerMode) {
+      navigateTo({ contentType: key });
+    }
+  };
+
+  const breadcumbs = componentPickerMode && !restrictToLibrary ? (
+    <Breadcrumb
+      links={[
+        {
+          label: '',
+          to: '',
+        },
+        {
+          label: intl.formatMessage(messages.returnToLibrarySelection),
+          onClick: returnToLibrarySelection,
+        },
+      ]}
+      spacer={<Icon src={ArrowBack} size="sm" />}
+      linkAs={Link}
+    />
+  ) : undefined;
+
+  const extraFilter = [`context_key = "${libraryId}"`];
+  if (showOnlyPublished) {
+    extraFilter.push('last_published IS NOT NULL');
+  }
+
+  const activeTypeFilters = {
+    components: 'NOT type = "collection"',
+    collections: 'type = "collection"',
+  };
+  if (activeKey !== ContentType.home) {
+    extraFilter.push(activeTypeFilters[activeKey]);
+  }
+
+  return (
+    <div className="d-flex">
+      <div className="flex-grow-1">
+        <Helmet><title>{libraryData.title} | {process.env.SITE_NAME}</title></Helmet>
+        {!componentPickerMode && (
+          <Header
+            number={libraryData.slug}
+            title={libraryData.title}
+            org={libraryData.org}
+            contextId={libraryId}
+            isLibrary
+            containerProps={{
+              size: undefined,
+            }}
+          />
+        )}
+        <Container className="px-4 mt-4 mb-5 library-authoring-page">
+          <SearchContextProvider
+            extraFilter={extraFilter}
+          >
+            <SubHeader
+              title={<SubHeaderTitle title={libraryData.title} />}
+              subtitle={!componentPickerMode ? intl.formatMessage(messages.headingSubtitle) : undefined}
+              breadcrumbs={breadcumbs}
+              headerActions={<HeaderActions />}
+            />
+            <SearchKeywordsField className="w-50" />
+            <div className="d-flex mt-3 align-items-center">
+              <FilterByTags />
+              <FilterByBlockType />
+              <ClearFiltersButton />
+              <div className="flex-grow-1" />
+              <SearchSortWidget />
+            </div>
+            <Tabs
+              variant="tabs"
+              activeKey={activeKey}
+              onSelect={handleTabChange}
+              className="my-3"
+            >
+              <Tab eventKey={ContentType.home} title={intl.formatMessage(messages.homeTab)} />
+              <Tab eventKey={ContentType.components} title={intl.formatMessage(messages.componentsTab)} />
+              <Tab eventKey={ContentType.collections} title={intl.formatMessage(messages.collectionsTab)} />
+            </Tabs>
+            <LibraryContent contentType={activeKey} />
+          </SearchContextProvider>
+        </Container>
+        {!componentPickerMode && <StudioFooter containerProps={{ size: undefined }} />}
+      </div>
+      {!!sidebarComponentInfo?.type && (
+        <div className="library-authoring-sidebar box-shadow-left-1 bg-white" data-testid="library-sidebar">
+          <LibrarySidebar />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default LibraryAuthoringPage;
diff --git a/src/library-authoring/LibraryBlock/LibraryBlock.tsx b/src/library-authoring/LibraryBlock/LibraryBlock.tsx
new file mode 100644
index 0000000000..4397090edd
--- /dev/null
+++ b/src/library-authoring/LibraryBlock/LibraryBlock.tsx
@@ -0,0 +1,100 @@
+import { useEffect, useRef, useState } from 'react';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { getConfig } from '@edx/frontend-platform';
+
+import messages from './messages';
+
+export type VersionSpec = 'published' | 'draft' | number;
+
+interface LibraryBlockProps {
+  onBlockNotification?: (event: { eventType: string; [key: string]: any }) => void;
+  usageKey: string;
+  version?: VersionSpec;
+}
+/**
+ * React component that displays an XBlock in a sandboxed IFrame.
+ *
+ * The IFrame is resized responsively so that it fits the content height.
+ *
+ * We use an IFrame so that the XBlock code, including user-authored HTML,
+ * cannot access things like the user's cookies, nor can it make GET/POST
+ * requests as the user. However, it is allowed to call any XBlock handlers.
+ */
+export const LibraryBlock = ({ onBlockNotification, usageKey, version }: LibraryBlockProps) => {
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  const [iFrameHeight, setIFrameHeight] = useState(50);
+  const studioBaseUrl = getConfig().STUDIO_BASE_URL;
+
+  const intl = useIntl();
+
+  /**
+   * Handle any messages we receive from the XBlock Runtime code in the IFrame.
+   * See wrap.ts to see the code that sends these messages.
+   */
+  /* istanbul ignore next */
+  const receivedWindowMessage = async (event) => {
+    if (!iframeRef.current || event.source !== iframeRef.current.contentWindow) {
+      return; // This is some other random message.
+    }
+
+    const { method, replyKey, ...args } = event.data;
+
+    if (method === 'update_frame_height') {
+      setIFrameHeight(args.height);
+    } else if (method?.indexOf('xblock:') === 0) {
+      // This is a notification from the XBlock's frontend via 'runtime.notify(event, args)'
+      if (onBlockNotification) {
+        onBlockNotification({
+          eventType: method.substr(7), // Remove the 'xblock:' prefix that we added in wrap.ts
+          ...args,
+        });
+      }
+    }
+  };
+
+  /**
+   * Prepare to receive messages from the IFrame.
+   */
+  useEffect(() => {
+    // Messages are the only way that the code in the IFrame can communicate
+    // with the surrounding UI.
+    window.addEventListener('message', receivedWindowMessage);
+    if (window.self !== window.top) {
+      // This component is loaded inside an iframe.
+      setIFrameHeight(86);
+    }
+
+    return () => {
+      window.removeEventListener('message', receivedWindowMessage);
+    };
+  }, []);
+
+  const queryStr = version ? `?version=${version}` : '';
+
+  return (
+    <div style={{
+      height: `${iFrameHeight}vh`,
+      boxSizing: 'content-box',
+      position: 'relative',
+      overflow: 'hidden',
+      minHeight: '200px',
+    }}
+    >
+      <iframe
+        ref={iframeRef}
+        title={intl.formatMessage(messages.iframeTitle)}
+        src={`${studioBaseUrl}/xblocks/v2/${usageKey}/embed/student_view/${queryStr}`}
+        data-testid="block-preview"
+        style={{
+          width: '100%',
+          height: '100%',
+          minHeight: '200px',
+          border: '0 none',
+        }}
+        // allowing 'autoplay' is required to allow the video XBlock to control the YouTube iframe it has.
+        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+
+      />
+    </div>
+  );
+};
diff --git a/src/library-authoring/LibraryBlock/index.ts b/src/library-authoring/LibraryBlock/index.ts
new file mode 100644
index 0000000000..74638b8bc1
--- /dev/null
+++ b/src/library-authoring/LibraryBlock/index.ts
@@ -0,0 +1 @@
+export { LibraryBlock, type VersionSpec } from './LibraryBlock';
diff --git a/src/library-authoring/LibraryBlock/messages.ts b/src/library-authoring/LibraryBlock/messages.ts
new file mode 100644
index 0000000000..f325b60d3f
--- /dev/null
+++ b/src/library-authoring/LibraryBlock/messages.ts
@@ -0,0 +1,11 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  iframeTitle: {
+    id: 'course-authoring.library-authoring.library-block.iframe-title',
+    defaultMessage: 'Preview',
+    description: 'The title for the LibraryBlock iframe',
+  },
+});
+
+export default messages;
diff --git a/src/library-authoring/LibraryContent.test.tsx b/src/library-authoring/LibraryContent.test.tsx
new file mode 100644
index 0000000000..f5dcb0dd28
--- /dev/null
+++ b/src/library-authoring/LibraryContent.test.tsx
@@ -0,0 +1,117 @@
+import fetchMock from 'fetch-mock-jest';
+
+import {
+  fireEvent,
+  render,
+  screen,
+  initializeMocks,
+} from '../testUtils';
+import { getContentSearchConfigUrl } from '../search-manager/data/api';
+import { mockContentLibrary } from './data/api.mocks';
+import mockEmptyResult from '../search-modal/__mocks__/empty-search-result.json';
+import { LibraryProvider } from './common/context/LibraryContext';
+import LibraryContent from './LibraryContent';
+import { libraryComponentsMock } from './__mocks__';
+
+const searchEndpoint = 'http://mock.meilisearch.local/multi-search';
+
+mockContentLibrary.applyMock();
+const mockFetchNextPage = jest.fn();
+const mockUseSearchContext = jest.fn();
+
+const data = {
+  totalContentAndCollectionHits: 0,
+  contentAndCollectionHits: [],
+  isFetchingNextPage: false,
+  hasNextPage: false,
+  fetchNextPage: mockFetchNextPage,
+  searchKeywords: '',
+  isFiltered: false,
+  isLoading: false,
+};
+
+const returnEmptyResult = (_url: string, req) => {
+  const requestData = JSON.parse(req.body?.toString() ?? '');
+  const query = requestData?.queries[0]?.q ?? '';
+  // We have to replace the query (search keywords) in the mock results with the actual query,
+  // because otherwise we may have an inconsistent state that causes more queries and unexpected results.
+  mockEmptyResult.results[0].query = query;
+  // And fake the required '_formatted' fields; it contains the highlighting <mark>...</mark> around matched words
+  // eslint-disable-next-line no-underscore-dangle, no-param-reassign
+  mockEmptyResult.results[0]?.hits.forEach((hit: any) => { hit._formatted = { ...hit }; });
+  return mockEmptyResult;
+};
+
+jest.mock('../search-manager', () => ({
+  ...jest.requireActual('../search-manager'),
+  useSearchContext: () => mockUseSearchContext(),
+}));
+
+const clipboardBroadcastChannelMock = {
+  postMessage: jest.fn(),
+  close: jest.fn(),
+};
+
+(global as any).BroadcastChannel = jest.fn(() => clipboardBroadcastChannelMock);
+
+const withLibraryId = (libraryId: string) => ({
+  extraWrapper: ({ children }: { children: React.ReactNode }) => (
+    <LibraryProvider libraryId={libraryId}>
+      {children}
+    </LibraryProvider>
+  ),
+});
+
+describe('<LibraryHome />', () => {
+  beforeEach(() => {
+    const { axiosMock } = initializeMocks();
+
+    fetchMock.post(searchEndpoint, returnEmptyResult, { overwriteRoutes: true });
+
+    // The API method to get the Meilisearch connection details uses Axios:
+    axiosMock.onGet(getContentSearchConfigUrl()).reply(200, {
+      url: 'http://mock.meilisearch.local',
+      index_name: 'studio',
+      api_key: 'test-key',
+    });
+  });
+
+  afterEach(() => {
+    fetchMock.reset();
+    mockFetchNextPage.mockReset();
+  });
+
+  it('should render a spinner while loading', async () => {
+    mockUseSearchContext.mockReturnValue({
+      ...data,
+      isLoading: true,
+    });
+
+    render(<LibraryContent />, withLibraryId(mockContentLibrary.libraryId));
+    expect(screen.getByText('Loading...')).toBeInTheDocument();
+  });
+
+  it('should render an empty state when there are no results', async () => {
+    mockUseSearchContext.mockReturnValue({
+      ...data,
+      totalHits: 0,
+    });
+    render(<LibraryContent />, withLibraryId(mockContentLibrary.libraryId));
+    expect(screen.getByText('You have not added any content to this library yet.')).toBeInTheDocument();
+  });
+
+  it('should load more results when the user scrolls to the bottom', async () => {
+    mockUseSearchContext.mockReturnValue({
+      ...data,
+      hits: libraryComponentsMock,
+      hasNextPage: true,
+    });
+    render(<LibraryContent />, withLibraryId(mockContentLibrary.libraryId));
+
+    Object.defineProperty(window, 'innerHeight', { value: 800 });
+    Object.defineProperty(document.body, 'scrollHeight', { value: 1600 });
+
+    fireEvent.scroll(window, { target: { scrollY: 1000 } });
+    expect(mockFetchNextPage).toHaveBeenCalled();
+  });
+});
diff --git a/src/library-authoring/LibraryContent.tsx b/src/library-authoring/LibraryContent.tsx
new file mode 100644
index 0000000000..1913994b28
--- /dev/null
+++ b/src/library-authoring/LibraryContent.tsx
@@ -0,0 +1,89 @@
+import { useEffect } from 'react';
+import { LoadingSpinner } from '../generic/Loading';
+import { useSearchContext } from '../search-manager';
+import { NoComponents, NoSearchResults } from './EmptyStates';
+import { useLibraryContext } from './common/context/LibraryContext';
+import { useSidebarContext } from './common/context/SidebarContext';
+import CollectionCard from './components/CollectionCard';
+import ComponentCard from './components/ComponentCard';
+import { ContentType } from './routes';
+import { useLoadOnScroll } from '../hooks';
+import messages from './collections/messages';
+
+/**
+ * Library Content to show content grid
+ *
+ * Use content to:
+ *   - 'collections': Suggest to create a collection on empty state.
+*   - Anything else to suggest to add content on empty state.
+ */
+
+type LibraryContentProps = {
+  contentType?: ContentType;
+};
+
+const LibraryContent = ({ contentType = ContentType.home }: LibraryContentProps) => {
+  const {
+    hits,
+    totalHits,
+    isFetchingNextPage,
+    hasNextPage,
+    fetchNextPage,
+    isLoading,
+    isFiltered,
+    usageKey,
+  } = useSearchContext();
+  const { openCreateCollectionModal } = useLibraryContext();
+  const { openAddContentSidebar, openComponentInfoSidebar } = useSidebarContext();
+
+  useEffect(() => {
+    if (usageKey) {
+      openComponentInfoSidebar(usageKey);
+    }
+  }, [usageKey]);
+
+  useLoadOnScroll(
+    hasNextPage,
+    isFetchingNextPage,
+    fetchNextPage,
+    true,
+  );
+
+  if (isLoading) {
+    return <LoadingSpinner />;
+  }
+  if (totalHits === 0) {
+    if (contentType === ContentType.collections) {
+      return isFiltered
+        ? <NoSearchResults infoText={messages.noSearchResultsCollections} />
+        : (
+          <NoComponents
+            infoText={messages.noCollections}
+            addBtnText={messages.addCollection}
+            handleBtnClick={openCreateCollectionModal}
+          />
+        );
+    }
+    return isFiltered ? <NoSearchResults /> : <NoComponents handleBtnClick={openAddContentSidebar} />;
+  }
+
+  return (
+    <div className="library-cards-grid">
+      {hits.map((contentHit) => (
+        contentHit.type === 'collection' ? (
+          <CollectionCard
+            key={contentHit.id}
+            collectionHit={contentHit}
+          />
+        ) : (
+          <ComponentCard
+            key={contentHit.id}
+            contentHit={contentHit}
+          />
+        )
+      ))}
+    </div>
+  );
+};
+
+export default LibraryContent;
diff --git a/src/library-authoring/LibraryLayout.tsx b/src/library-authoring/LibraryLayout.tsx
new file mode 100644
index 0000000000..c093af7ad3
--- /dev/null
+++ b/src/library-authoring/LibraryLayout.tsx
@@ -0,0 +1,75 @@
+import { useCallback } from 'react';
+import {
+  Route,
+  Routes,
+  useParams,
+  useLocation,
+} from 'react-router-dom';
+
+import { ROUTES } from './routes';
+import LibraryAuthoringPage from './LibraryAuthoringPage';
+import { LibraryProvider } from './common/context/LibraryContext';
+import { SidebarProvider } from './common/context/SidebarContext';
+import { CreateCollectionModal } from './create-collection';
+import LibraryCollectionPage from './collections/LibraryCollectionPage';
+import { ComponentPicker } from './component-picker';
+import { ComponentEditorModal } from './components/ComponentEditorModal';
+
+const LibraryLayout = () => {
+  const { libraryId } = useParams();
+
+  if (libraryId === undefined) {
+    // istanbul ignore next - This shouldn't be possible; it's just here to satisfy the type checker.
+    throw new Error('Error: route is missing libraryId.');
+  }
+
+  const location = useLocation();
+  const context = useCallback((childPage) => (
+    <LibraryProvider
+      /** We need to pass the pathname as key to the LibraryProvider to force a
+       * re-render when we navigate to a new path or page. */
+      key={location.pathname}
+      libraryId={libraryId}
+      /** The component picker modal to use. We need to pass it as a reference instead of
+       * directly importing it to avoid the import cycle:
+       * ComponentPicker > LibraryAuthoringPage/LibraryCollectionPage >
+       * Sidebar > AddContentContainer > ComponentPicker */
+      componentPicker={ComponentPicker}
+    >
+      <SidebarProvider>
+        <>
+          {childPage}
+          <CreateCollectionModal />
+          <ComponentEditorModal />
+        </>
+      </SidebarProvider>
+    </LibraryProvider>
+  ), [location.pathname]);
+
+  return (
+    <Routes>
+      <Route
+        path={ROUTES.COMPONENTS}
+        element={context(<LibraryAuthoringPage />)}
+      />
+      <Route
+        path={ROUTES.COLLECTIONS}
+        element={context(<LibraryAuthoringPage />)}
+      />
+      <Route
+        path={ROUTES.COMPONENT}
+        element={context(<LibraryAuthoringPage />)}
+      />
+      <Route
+        path={ROUTES.COLLECTION}
+        element={context(<LibraryCollectionPage />)}
+      />
+      <Route
+        path={ROUTES.HOME}
+        element={context(<LibraryAuthoringPage />)}
+      />
+    </Routes>
+  );
+};
+
+export default LibraryLayout;
diff --git a/src/library-authoring/__mocks__/collection-search.json b/src/library-authoring/__mocks__/collection-search.json
new file mode 100644
index 0000000000..81e8afcb58
--- /dev/null
+++ b/src/library-authoring/__mocks__/collection-search.json
@@ -0,0 +1,248 @@
+{
+  "comment": "This mock is captured from a real search result and roughly edited to match the mocks in src/library-authoring/data/api.mocks.ts",
+  "note": "The _formatted fields have been removed from this result and should be re-added programatically when mocking.",
+  "results": [
+    {
+      "indexUid": "studio_content",
+      "hits": [
+        {
+          "id": "lbaximtesthtml571fe018-f3ce-45c9-8f53-5dafcb422fdd-273ebd90",
+          "display_name": "Introduction to Testing",
+          "block_id": "571fe018-f3ce-45c9-8f53-5dafcb422fdd",
+          "content": {
+            "html_content": "This is a text component which uses HTML."
+          },
+          "tags": {},
+          "type": "library_block",
+          "breadcrumbs": [
+            {
+              "display_name": "Test Library"
+            }
+          ],
+          "created": 1721857069.042984,
+          "modified": 1725878053.420395,
+          "last_published": 1725035862.450613,
+          "usage_key": "lb:Axim:TEST:html:571fe018-f3ce-45c9-8f53-5dafcb422fdd",
+          "block_type": "html",
+          "context_key": "lib:Axim:TEST",
+          "org": "Axim",
+          "access_id": 15,
+          "collections": {
+            "display_name": [
+              "My first collection"
+            ],
+            "key": [
+              "my-first-collection"
+            ]
+          },
+          "published": {
+            "display_name": "Introduction to Testing",
+            "description": "Testing"
+          }
+        },
+        {
+          "id": "lbaximtesthtml73a22298-bcd9-4f4c-ae34-0bc2b0612480-46b4a7f2",
+          "display_name": "Second Text Component",
+          "block_id": "73a22298-bcd9-4f4c-ae34-0bc2b0612480",
+          "content": {
+            "html_content": "Preview of the second text component here"
+          },
+          "type": "library_block",
+          "breadcrumbs": [
+            {
+              "display_name": "Test Library"
+            }
+          ],
+          "created": 1724879593.066427,
+          "modified": 1725034981.663482,
+          "last_published": 1725035862.450613,
+          "usage_key": "lb:Axim:TEST:html:73a22298-bcd9-4f4c-ae34-0bc2b0612480",
+          "block_type": "html",
+          "context_key": "lib:Axim:TEST",
+          "org": "Axim",
+          "access_id": 15,
+          "collections": {
+            "display_name": [
+              "My first collection"
+            ],
+            "key": [
+              "my-first-collection"
+            ]
+          },
+          "published": {
+            "display_name": "Second Text Component",
+            "description": "Second Testing"
+          }
+        },
+        {
+          "id": "lbaximtesthtmlbe5b5db9-26ba-4fac-86af-654538c70b5e-73dbaa95",
+          "display_name": "Third Text component",
+          "block_id": "be5b5db9-26ba-4fac-86af-654538c70b5e",
+          "content": {
+            "html_content": "This is a text component that I've edited within the library. "
+          },
+          "tags": {},
+          "type": "library_block",
+          "breadcrumbs": [
+            {
+              "display_name": "Test Library"
+            }
+          ],
+          "created": 1721857034.455737,
+          "modified": 1722551300.377488,
+          "last_published": 1724879092.002222,
+          "usage_key": "lb:Axim:TEST:html:be5b5db9-26ba-4fac-86af-654538c70b5e",
+          "block_type": "html",
+          "context_key": "lib:Axim:TEST",
+          "org": "Axim",
+          "access_id": 15,
+          "collections": {
+            "display_name": [
+              "My first collection",
+              "My second collection"
+            ],
+            "key": [
+              "my-first-collection",
+              "my-second-collection"
+            ]
+          },
+          "published": {
+            "display_name": "Third Text component",
+            "description": "Third Testing"
+          }
+        },
+        {
+          "id": "lbaximtesthtmle59e8c73-4056-4894-bca4-062781fb3f68-46a404b2",
+          "display_name": "Text 4",
+          "block_id": "e59e8c73-4056-4894-bca4-062781fb3f68",
+          "content": {
+            "html_content": ""
+          },
+          "tags": {},
+          "type": "library_block",
+          "breadcrumbs": [
+            {
+              "display_name": "Test Library"
+            }
+          ],
+          "created": 1720774228.49832,
+          "modified": 1720774228.49832,
+          "last_published": 1724879092.002222,
+          "usage_key": "lb:Axim:TEST:html:e59e8c73-4056-4894-bca4-062781fb3f68",
+          "block_type": "html",
+          "context_key": "lib:Axim:TEST",
+          "org": "Axim",
+          "access_id": 15,
+          "collections": {
+            "display_name": [
+              "My first collection"
+            ],
+            "key": [
+              "my-first-collection"
+            ]
+          },
+          "published": {
+            "display_name": "Text 4",
+            "description": "Testing 4"
+          }
+        },
+        {
+          "id": "lbaximtestproblemf16116c9-516e-4bb9-b99e-103599f62417-f2798115",
+          "display_name": "Blank Problem",
+          "block_id": "f16116c9-516e-4bb9-b99e-103599f62417",
+          "content": {
+            "problem_types": [],
+            "capa_content": " "
+          },
+          "type": "library_block",
+          "breadcrumbs": [
+            {
+              "display_name": "Test Library"
+            }
+          ],
+          "created": 1724725821.973896,
+          "modified": 1724725821.973896,
+          "last_published": 1724879092.002222,
+          "usage_key": "lb:Axim:TEST:problem:f16116c9-516e-4bb9-b99e-103599f62417",
+          "block_type": "problem",
+          "context_key": "lib:Axim:TEST",
+          "org": "Axim",
+          "access_id": 15,
+          "collections": {
+            "display_name": [
+              "My first collection"
+            ],
+            "key": [
+              "my-first-collection"
+            ]
+          },
+          "published": {
+            "display_name": "Blank Problem",
+            "description": "Problem"
+          }
+        },
+        {
+          "display_name": "My first collection",
+          "block_id": "my-first-collection",
+          "description": "A collection for testing",
+          "id": 1,
+          "type": "collection",
+          "breadcrumbs": [
+            {
+              "display_name": "CS problems 2"
+            }
+          ],
+          "created": 1726740779.564664,
+          "modified": 1726840811.684142,
+          "usage_key": "lib-collection:OpenedX:CSPROB2:my-first-collection",
+          "context_key": "lib:OpenedX:CSPROB2",
+          "org": "OpenedX",
+          "access_id": 16,
+          "num_children": 5
+        },
+        {
+          "display_name": "My second collection",
+          "block_id": "my-second-collection",
+          "description": "A collection for testing",
+          "id": 2,
+          "type": "collection",
+          "breadcrumbs": [
+            {
+              "display_name": "CS problems 2"
+            }
+          ],
+          "created": 1726740779.564664,
+          "modified": 1726840811.684142,
+          "usage_key": "lib-collection:OpenedX:CSPROB2:my-second-collection",
+          "context_key": "lib:OpenedX:CSPROB2",
+          "org": "OpenedX",
+          "access_id": 16,
+          "num_children": 1
+        }
+      
+      ],
+      "query": "",
+      "processingTimeMs": 1,
+      "limit": 20,
+      "offset": 0,
+      "estimatedTotalHits": 5
+    },
+    {
+      "indexUid": "studio_content",
+      "hits": [],
+      "query": "",
+      "processingTimeMs": 0,
+      "limit": 0,
+      "offset": 0,
+      "estimatedTotalHits": 5,
+      "facetDistribution": {
+        "block_type": {
+          "html": 4,
+          "problem": 1
+        },
+        "content.problem_types": {}
+      },
+      "facetStats": {}
+    }
+  ]
+}
diff --git a/src/library-authoring/__mocks__/contentLibrariesListV2.js b/src/library-authoring/__mocks__/contentLibrariesListV2.js
new file mode 100644
index 0000000000..931a2f8150
--- /dev/null
+++ b/src/library-authoring/__mocks__/contentLibrariesListV2.js
@@ -0,0 +1,44 @@
+module.exports = {
+  next: null,
+  previous: null,
+  count: 2,
+  num_pages: 2,
+  current_page: 1,
+  start: 0,
+  results: [
+    {
+      id: 'lib:SampleTaxonomyOrg1:AL1',
+      type: 'complex',
+      org: 'SampleTaxonomyOrg1',
+      slug: 'AL1',
+      title: 'Another Library 2',
+      description: '',
+      num_blocks: 0,
+      version: 0,
+      last_published: null,
+      allow_lti: false,
+      allow_public_learning: false,
+      allow_public_read: false,
+      has_unpublished_changes: false,
+      has_unpublished_deletes: false,
+      license: '',
+    },
+    {
+      id: 'lib:SampleTaxonomyOrg1:TL1',
+      type: 'complex',
+      org: 'SampleTaxonomyOrg1',
+      slug: 'TL1',
+      title: 'Test Library 1',
+      description: '',
+      num_blocks: 0,
+      version: 0,
+      last_published: null,
+      allow_lti: false,
+      allow_public_learning: false,
+      allow_public_read: false,
+      has_unpublished_changes: false,
+      has_unpublished_deletes: false,
+      license: '',
+    },
+  ],
+};
diff --git a/src/library-authoring/__mocks__/index.ts b/src/library-authoring/__mocks__/index.ts
new file mode 100644
index 0000000000..85b9bf86b7
--- /dev/null
+++ b/src/library-authoring/__mocks__/index.ts
@@ -0,0 +1 @@
+export { default as libraryComponentsMock } from './libraryComponentsMock';
diff --git a/src/library-authoring/__mocks__/library-search.json b/src/library-authoring/__mocks__/library-search.json
new file mode 100644
index 0000000000..d4456c6558
--- /dev/null
+++ b/src/library-authoring/__mocks__/library-search.json
@@ -0,0 +1,516 @@
+{
+  "comment": "This mock is captured from a real search result and roughly edited to match the mocks in src/library-authoring/data/api.mocks.ts",
+  "note": "The _formatted fields have been removed from this result and should be re-added programatically when mocking.",
+  "results": [
+    {
+      "indexUid": "studio_content",
+      "hits": [
+        {
+          "id": "lbaximtesthtml571fe018-f3ce-45c9-8f53-5dafcb422fdd-273ebd90",
+          "display_name": "Introduction to Testing",
+          "block_id": "571fe018-f3ce-45c9-8f53-5dafcb422fdd",
+          "content": {
+            "html_content": "This is a text component which uses HTML."
+          },
+          "tags": {},
+          "type": "library_block",
+          "breadcrumbs": [
+            {
+              "display_name": "Test Library"
+            }
+          ],
+          "created": 1721857069.042984,
+          "modified": 1725878053.420395,
+          "last_published": 1725035862.450613,
+          "usage_key": "lb:Axim:TEST:html:571fe018-f3ce-45c9-8f53-5dafcb422fdd",
+          "block_type": "html",
+          "context_key": "lib:Axim:TEST",
+          "org": "Axim",
+          "access_id": 15,
+          "published": {
+            "display_name": "Introduction to Testing",
+            "description": "Testing"
+          }
+        },
+        {
+          "display_name": "Collection 1",
+          "block_id": "col1",
+          "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et mi ac nisi accumsan imperdiet vitae at odio. Vivamus tempor nec lorem eget lacinia. Vivamus efficitur lacus non dapibus porta. Nulla venenatis luctus nisi id posuere. Sed sollicitudin magna a sem ultrices accumsan. Praesent volutpat tortor vitae luctus rutrum. Integer.",
+          "id": 1,
+          "type": "collection",
+          "breadcrumbs": [
+            {
+              "display_name": "CS problems 2"
+            }
+          ],
+          "created": 1725534795.628254,
+          "modified": 1725878053.420395,
+          "context_key": "lib:OpenedX:CSPROB2",
+          "org": "OpenedX",
+          "access_id": 16,
+          "_formatted": {
+            "display_name": "Collection 1",
+            "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et mi ac nisi accumsan imperdiet…",
+            "id": "1",
+            "type": "collection",
+            "breadcrumbs": [
+              {
+                "display_name": "CS problems 2"
+              }
+            ],
+            "created": "1725534795.628254",
+            "modified": "1725534795.628266",
+            "context_key": "lib:OpenedX:CSPROB2",
+            "org": "OpenedX",
+            "access_id": "16"
+          }
+        },
+        {
+          "display_name": "Collection 2",
+          "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et mi ac nisi accumsan imperdiet vitae at odio. Vivamus tempor nec lorem eget lacinia. Vivamus efficitur lacus non dapibus porta. Nulla venenatis luctus nisi id posuere. Sed sollicitudin magna a sem ultrices accumsan. Praesent volutpat tortor vitae luctus rutrum. Integer. Descrition 58",
+          "id": 2,
+          "type": "collection",
+          "breadcrumbs": [
+            {
+              "display_name": "CS problems 2"
+            }
+          ],
+          "created": 1725534795.619101,
+          "modified": 1725534795.619113,
+          "context_key": "lib:OpenedX:CSPROB2",
+          "org": "OpenedX",
+          "access_id": 16,
+          "_formatted": {
+            "display_name": "Collection 2",
+            "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et mi ac nisi accumsan imperdiet…",
+            "id": "2",
+            "type": "collection",
+            "breadcrumbs": [
+              {
+                "display_name": "CS problems 2"
+              }
+            ],
+            "created": "1725534795.619101",
+            "modified": "1725534795.619113",
+            "context_key": "lib:OpenedX:CSPROB2",
+            "org": "OpenedX",
+            "access_id": "16"
+          }
+        },
+        {
+          "display_name": "Collection 3",
+          "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et mi ac nisi accumsan imperdiet vitae at odio. Vivamus tempor nec lorem eget lacinia. Vivamus efficitur lacus non dapibus porta. Nulla venenatis luctus nisi id posuere. Sed sollicitudin magna a sem ultrices accumsan. Praesent volutpat tortor vitae luctus rutrum. Integer. Descrition 57",
+          "id": 3,
+          "type": "collection",
+          "breadcrumbs": [
+            {
+              "display_name": "CS problems 2"
+            }
+          ],
+          "created": 1725534795.609781,
+          "modified": 1725534795.609794,
+          "context_key": "lib:OpenedX:CSPROB2",
+          "org": "OpenedX",
+          "access_id": 16,
+          "_formatted": {
+            "display_name": "Collection 3",
+            "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et mi ac nisi accumsan imperdiet…",
+            "id": "3",
+            "type": "collection",
+            "breadcrumbs": [
+              {
+                "display_name": "CS problems 2"
+              }
+            ],
+            "created": "1725534795.609781",
+            "modified": "1725534795.609794",
+            "context_key": "lib:OpenedX:CSPROB2",
+            "org": "OpenedX",
+            "access_id": "16"
+          }
+        },
+        {
+          "display_name": "Collection 4",
+          "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et mi ac nisi accumsan imperdiet vitae at odio. Vivamus tempor nec lorem eget lacinia. Vivamus efficitur lacus non dapibus porta. Nulla venenatis luctus nisi id posuere. Sed sollicitudin magna a sem ultrices accumsan. Praesent volutpat tortor vitae luctus rutrum. Integer. Descrition 56",
+          "id": 4,
+          "type": "collection",
+          "breadcrumbs": [
+            {
+              "display_name": "CS problems 2"
+            }
+          ],
+          "created": 1725534795.596287,
+          "modified": 1725534795.5963,
+          "context_key": "lib:OpenedX:CSPROB2",
+          "org": "OpenedX",
+          "access_id": 16,
+          "_formatted": {
+            "display_name": "Collection 4",
+            "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et mi ac nisi accumsan imperdiet…",
+            "id": "4",
+            "type": "collection",
+            "breadcrumbs": [
+              {
+                "display_name": "CS problems 2"
+              }
+            ],
+            "created": "1725534795.596287",
+            "modified": "1725534795.5963",
+            "context_key": "lib:OpenedX:CSPROB2",
+            "org": "OpenedX",
+            "access_id": "16"
+          }
+        },
+        {
+          "display_name": "Collection 5",
+          "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et mi ac nisi accumsan imperdiet vitae at odio. Vivamus tempor nec lorem eget lacinia. Vivamus efficitur lacus non dapibus porta. Nulla venenatis luctus nisi id posuere. Sed sollicitudin magna a sem ultrices accumsan. Praesent volutpat tortor vitae luctus rutrum. Integer. Descrition 55",
+          "id": 5,
+          "type": "collection",
+          "breadcrumbs": [
+            {
+              "display_name": "CS problems 2"
+            }
+          ],
+          "created": 1725534795.583068,
+          "modified": 1725534795.583082,
+          "context_key": "lib:OpenedX:CSPROB2",
+          "org": "OpenedX",
+          "access_id": 16,
+          "_formatted": {
+            "display_name": "Collection 5",
+            "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et mi ac nisi accumsan imperdiet…",
+            "id": "5",
+            "type": "collection",
+            "breadcrumbs": [
+              {
+                "display_name": "CS problems 2"
+              }
+            ],
+            "created": "1725534795.583068",
+            "modified": "1725534795.583082",
+            "context_key": "lib:OpenedX:CSPROB2",
+            "org": "OpenedX",
+            "access_id": "16"
+          }
+        },
+        {
+          "display_name": "Collection 6",
+          "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et mi ac nisi accumsan imperdiet vitae at odio. Vivamus tempor nec lorem eget lacinia. Vivamus efficitur lacus non dapibus porta. Nulla venenatis luctus nisi id posuere. Sed sollicitudin magna a sem ultrices accumsan. Praesent volutpat tortor vitae luctus rutrum. Integer. Descrition 54",
+          "id": 6,
+          "type": "collection",
+          "breadcrumbs": [
+            {
+              "display_name": "CS problems 2"
+            }
+          ],
+          "created": 1725534795.573794,
+          "modified": 1725534795.573808,
+          "context_key": "lib:OpenedX:CSPROB2",
+          "org": "OpenedX",
+          "access_id": 16,
+          "_formatted": {
+            "display_name": "Collection 6",
+            "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et mi ac nisi accumsan imperdiet…",
+            "id": "6",
+            "type": "collection",
+            "breadcrumbs": [
+              {
+                "display_name": "CS problems 2"
+              }
+            ],
+            "created": "1725534795.573794",
+            "modified": "1725534795.573808",
+            "context_key": "lib:OpenedX:CSPROB2",
+            "org": "OpenedX",
+            "access_id": "16"
+          }
+        },
+        {
+          "id": "lbaximtesthtml73a22298-bcd9-4f4c-ae34-0bc2b0612480-46b4a7f2",
+          "display_name": "Second Text Component",
+          "block_id": "73a22298-bcd9-4f4c-ae34-0bc2b0612480",
+          "content": {
+            "html_content": "Preview of the second text component here"
+          },
+          "type": "library_block",
+          "breadcrumbs": [
+            {
+              "display_name": "Test Library"
+            }
+          ],
+          "created": 1724879593.066427,
+          "modified": 1725034981.663482,
+          "last_published": 1725035862.450613,
+          "usage_key": "lb:Axim:TEST:html:73a22298-bcd9-4f4c-ae34-0bc2b0612480",
+          "block_type": "html",
+          "context_key": "lib:Axim:TEST",
+          "org": "Axim",
+          "access_id": 15,
+          "published": {
+            "display_name": "Second Text Component",
+            "description": "Second Testing"
+          }
+        },
+        {
+          "id": "lbaximtesthtmlbe5b5db9-26ba-4fac-86af-654538c70b5e-73dbaa95",
+          "display_name": "Third Text component",
+          "block_id": "be5b5db9-26ba-4fac-86af-654538c70b5e",
+          "content": {
+            "html_content": "This is a text component that I've edited within the library. "
+          },
+          "tags": {},
+          "type": "library_block",
+          "breadcrumbs": [
+            {
+              "display_name": "Test Library"
+            }
+          ],
+          "created": 1721857034.455737,
+          "modified": 1722551300.377488,
+          "last_published": 1724879092.002222,
+          "usage_key": "lb:Axim:TEST:html:be5b5db9-26ba-4fac-86af-654538c70b5e",
+          "block_type": "html",
+          "context_key": "lib:Axim:TEST",
+          "org": "Axim",
+          "access_id": 15,
+          "published": {
+            "display_name": "Third Text component",
+            "description": "Third Testing"
+          }
+        },
+        {
+          "id": "lbaximtesthtmle59e8c73-4056-4894-bca4-062781fb3f68-46a404b2",
+          "display_name": "Text 4",
+          "block_id": "e59e8c73-4056-4894-bca4-062781fb3f68",
+          "content": {
+            "html_content": ""
+          },
+          "tags": {},
+          "type": "library_block",
+          "breadcrumbs": [
+            {
+              "display_name": "Test Library"
+            }
+          ],
+          "created": 1720774228.49832,
+          "modified": 1720774228.49832,
+          "last_published": 1724879092.002222,
+          "usage_key": "lb:Axim:TEST:html:e59e8c73-4056-4894-bca4-062781fb3f68",
+          "block_type": "html",
+          "context_key": "lib:Axim:TEST",
+          "org": "Axim",
+          "access_id": 15,
+          "published": {
+            "display_name": "Text 4",
+            "description": "Testing 4"
+          }
+        },
+        {
+          "id": "lbaximtestproblemf16116c9-516e-4bb9-b99e-103599f62417-f2798115",
+          "display_name": "Blank Problem",
+          "block_id": "f16116c9-516e-4bb9-b99e-103599f62417",
+          "content": {
+            "problem_types": [],
+            "capa_content": " "
+          },
+          "type": "library_block",
+          "breadcrumbs": [
+            {
+              "display_name": "Test Library"
+            }
+          ],
+          "created": 1724725821.973896,
+          "modified": 1724725821.973896,
+          "last_published": 1724879092.002222,
+          "usage_key": "lb:Axim:TEST:problem:f16116c9-516e-4bb9-b99e-103599f62417",
+          "block_type": "problem",
+          "context_key": "lib:Axim:TEST",
+          "org": "Axim",
+          "access_id": 15,
+          "published": {
+            "display_name": "Blank Problem",
+            "description": "Problem"
+          }
+        },
+        {
+          "id": "lbaximtestproblem2ace6b9b-6620-413c-a66f-19c797527f34-3a7973b7",
+          "display_name": "Multiple Choice Problem",
+          "block_id": "2ace6b9b-6620-413c-a66f-19c797527f34",
+          "content": {
+            "problem_types": [
+              "multiplechoiceresponse"
+            ],
+            "capa_content": "What is the gradient of an inverted hyperspace manifold?cos (x) ey ln(z) i + sin(x)ey ln(z)j + sin(x) ey(1/z)k "
+          },
+          "tags": {},
+          "type": "library_block",
+          "breadcrumbs": [
+            {
+              "display_name": "Test Library"
+            }
+          ],
+          "created": 1720774232.76135,
+          "modified": 1720774232.76135,
+          "last_published": 1724879092.002222,
+          "usage_key": "lb:Axim:TEST:problem:2ace6b9b-6620-413c-a66f-19c797527f34",
+          "block_type": "problem",
+          "context_key": "lib:Axim:TEST",
+          "org": "Axim",
+          "access_id": 15,
+          "published": {
+            "display_name": "Multiple Choice Problem",
+            "description": "Problem"
+          }
+        },
+        {
+          "id": "lbaximtestproblem7d7e98ba-3ac9-4aa8-8946-159129b39a28-3a7973b7",
+          "display_name": "Single Choice Problem",
+          "block_id": "7d7e98ba-3ac9-4aa8-8946-159129b39a28",
+          "content": {
+            "problem_types": [
+              "choiceresponse"
+            ],
+            "capa_content": "Blah blah?"
+          },
+          "tags": {},
+          "type": "library_block",
+          "breadcrumbs": [
+            {
+              "display_name": "Test Library"
+            }
+          ],
+          "created": 1720774232.76135,
+          "modified": 1720774232.76135,
+          "last_published": 1724879092.002222,
+          "usage_key": "lb:Axim:TEST:problem:7d7e98ba-3ac9-4aa8-8946-159129b39a28",
+          "block_type": "problem",
+          "context_key": "lib:Axim:TEST",
+          "org": "Axim",
+          "access_id": 15,
+          "published": {
+            "display_name": "Single Choice Problem",
+            "description": "Problem"
+          }
+        },
+        {
+          "id": "lbaximtestproblem4e1a72f9-ac93-42aa-a61c-ab5f9698c398-3a7973b7",
+          "display_name": "Numerical Response Problem",
+          "block_id": "4e1a72f9-ac93-42aa-a61c-ab5f9698c398",
+          "content": {
+            "problem_types": [
+              "numericalresponse"
+            ],
+            "capa_content": "What is 1 + 1?"
+          },
+          "tags": {},
+          "type": "library_block",
+          "breadcrumbs": [
+            {
+              "display_name": "Test Library"
+            }
+          ],
+          "created": 1720774232.76135,
+          "modified": 1720774232.76135,
+          "last_published": 1724879092.002222,
+          "usage_key": "lb:Axim:TEST:problem:4e1a72f9-ac93-42aa-a61c-ab5f9698c398",
+          "block_type": "problem",
+          "context_key": "lib:Axim:TEST",
+          "org": "Axim",
+          "access_id": 15,
+          "published": {
+            "display_name": "Numerical Response Problem",
+            "description": "Problem"
+          }
+        },
+        {
+          "id": "lbaximtestproblemad483625-ade2-4712-88d8-c9743abbd291-3a7973b7",
+          "display_name": "Option Response Problem",
+          "block_id": "ad483625-ade2-4712-88d8-c9743abbd291",
+          "content": {
+            "problem_types": [
+              "optionresponse"
+            ],
+            "capa_content": "What is foobar?"
+          },
+          "tags": {},
+          "type": "library_block",
+          "breadcrumbs": [
+            {
+              "display_name": "Test Library"
+            }
+          ],
+          "created": 1720774232.76135,
+          "modified": 1720774232.76135,
+          "last_published": 1724879092.002222,
+          "usage_key": "lb:Axim:TEST:problem:ad483625-ade2-4712-88d8-c9743abbd291",
+          "block_type": "problem",
+          "context_key": "lib:Axim:TEST",
+          "org": "Axim",
+          "access_id": 15,
+          "published": {
+            "display_name": "Option Response Problem",
+            "description": "Problem"
+          }
+        },
+        {
+          "id": "lbaximtestproblemb4c859cb-de70-421a-917b-e6e01ce44bd8-3a7973b7",
+          "display_name": "String Response Problem",
+          "block_id": "b4c859cb-de70-421a-917b-e6e01ce44bd8",
+          "content": {
+            "problem_types": [
+              "stringresponse"
+            ],
+            "capa_content": "What is your name?"
+          },
+          "tags": {},
+          "type": "library_block",
+          "breadcrumbs": [
+            {
+              "display_name": "Test Library"
+            }
+          ],
+          "created": 1720774232.76135,
+          "modified": 1720774232.76135,
+          "last_published": 1724879092.002222,
+          "usage_key": "lb:Axim:TEST:problem:b4c859cb-de70-421a-917b-e6e01ce44bd8",
+          "block_type": "problem",
+          "context_key": "lib:Axim:TEST",
+          "org": "Axim",
+          "access_id": 15,
+          "published": {
+            "display_name": "String Response Problem",
+            "description": "Problem"
+          }
+        }
+      ],
+      "query": "",
+      "processingTimeMs": 1,
+      "limit": 20,
+      "offset": 0,
+      "estimatedTotalHits": 10
+    },
+    {
+      "indexUid": "studio_content",
+      "hits": [],
+      "query": "",
+      "processingTimeMs": 0,
+      "limit": 0,
+      "offset": 0,
+      "estimatedTotalHits": 10,
+      "facetDistribution": {
+        "block_type": {
+          "html": 4,
+          "problem": 6
+        },
+        "content.problem_types": {
+          "multiplechoiceresponse": 1,
+          "choiceresponse": 1,
+          "numericalresponse": 1,
+          "optionresponse": 1,
+          "stringresponse": 1
+        }
+      },
+      "facetStats": {}
+    }
+  ]
+}
diff --git a/src/library-authoring/__mocks__/libraryComponentsMock.ts b/src/library-authoring/__mocks__/libraryComponentsMock.ts
new file mode 100644
index 0000000000..2f6f66fc61
--- /dev/null
+++ b/src/library-authoring/__mocks__/libraryComponentsMock.ts
@@ -0,0 +1,91 @@
+export default [
+  {
+    id: '1',
+    usageKey: 'lb:org:lib:html:1',
+    displayName: 'Text Component 1',
+    description: 'This is a text: ID=1',
+    formatted: {
+      displayName: 'Text Component 1',
+      content: {
+        htmlContent: 'This is a text: ID=1',
+      },
+      description: 'This is a text: ID=1',
+    },
+    tags: {
+      level0: ['1', '2', '3'],
+    },
+    blockType: 'html',
+  },
+  {
+    id: '2',
+    usageKey: 'lb:org:lib:html:2',
+    displayName: 'Text Component 2',
+    description: 'This is a text: ID=2',
+    formatted: {
+      displayName: 'Text Component 2',
+      content: {
+        htmlContent: 'This is a text: ID=2',
+      },
+      description: 'This is a text: ID=2',
+    },
+    tags: {
+      level0: ['1', '2', '3'],
+    },
+    blockType: 'html',
+  },
+  {
+    id: '3',
+    usageKey: 'lb:org:lib:video:3',
+    displayName: 'Video Component 3',
+    formatted: {
+      displayName: 'Video Component 3',
+      content: {
+      },
+    },
+    tags: {
+      level0: ['1', '2'],
+    },
+    blockType: 'video',
+  },
+  {
+    id: '4',
+    usageKey: 'lb:org:lib:video:4',
+    displayName: 'Video Component 4',
+    formatted: {
+      displayName: 'Video Component 4',
+      content: {},
+    },
+    tags: {
+      level0: ['1', '2'],
+    },
+    blockType: 'video',
+  },
+  {
+    id: '5',
+    usageKey: 'lb:org:lib:problem:5',
+    displayName: 'Problem',
+    description: 'This is a problem: ID=5',
+    formatted: {
+      displayName: 'Problem',
+      content: {
+        capaContent: 'This is a problem: ID=5',
+      },
+      description: 'This is a problem: ID=5',
+    },
+    blockType: 'problem',
+  },
+  {
+    id: '6',
+    usageKey: 'lb:org:lib:problem:6',
+    displayName: 'Problem',
+    description: 'This is a problem: ID=6',
+    formatted: {
+      displayName: 'Problem',
+      content: {
+        capaContent: 'This is a problem: ID=6',
+      },
+      description: 'This is a problem: ID=6',
+    },
+    blockType: 'problem',
+  },
+];
diff --git a/src/library-authoring/add-content/AddContentContainer.test.tsx b/src/library-authoring/add-content/AddContentContainer.test.tsx
new file mode 100644
index 0000000000..229948c39e
--- /dev/null
+++ b/src/library-authoring/add-content/AddContentContainer.test.tsx
@@ -0,0 +1,294 @@
+import MockAdapter from 'axios-mock-adapter/types';
+import { snakeCaseObject } from '@edx/frontend-platform';
+import {
+  fireEvent,
+  render as baseRender,
+  screen,
+  waitFor,
+  initializeMocks,
+} from '../../testUtils';
+import { mockContentLibrary } from '../data/api.mocks';
+import {
+  getContentLibraryApiUrl, getCreateLibraryBlockUrl, getLibraryCollectionComponentApiUrl, getLibraryPasteClipboardUrl,
+} from '../data/api';
+import { mockBroadcastChannel, mockClipboardEmpty, mockClipboardHtml } from '../../generic/data/api.mock';
+import { LibraryProvider } from '../common/context/LibraryContext';
+import AddContentContainer from './AddContentContainer';
+import { ComponentEditorModal } from '../components/ComponentEditorModal';
+import editorCmsApi from '../../editors/data/services/cms/api';
+import { ToastActionData } from '../../generic/toast-context';
+
+mockBroadcastChannel();
+
+// Mocks for ComponentEditorModal to work in tests.
+jest.mock('frontend-components-tinymce-advanced-plugins', () => ({ a11ycheckerCss: '' }));
+
+const { libraryId } = mockContentLibrary;
+const render = (collectionId?: string) => {
+  const params: { libraryId: string, collectionId?: string } = { libraryId, collectionId };
+  return baseRender(<AddContentContainer />, {
+    path: '/library/:libraryId/:collectionId?',
+    params,
+    extraWrapper: ({ children }) => (
+      <LibraryProvider
+        libraryId={libraryId}
+      >
+        { children }
+        <ComponentEditorModal />
+      </LibraryProvider>
+    ),
+  });
+};
+let axiosMock: MockAdapter;
+let mockShowToast: (message: string, action?: ToastActionData | undefined) => void;
+
+describe('<AddContentContainer />', () => {
+  beforeEach(() => {
+    const mocks = initializeMocks();
+    axiosMock = mocks.axiosMock;
+    mockShowToast = mocks.mockShowToast;
+    axiosMock.onGet(getContentLibraryApiUrl(libraryId)).reply(200, {});
+  });
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+  it('should render content buttons', () => {
+    mockClipboardEmpty.applyMock();
+    render();
+    expect(screen.queryByRole('button', { name: /collection/i })).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: /text/i })).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: /problem/i })).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: /open reponse/i })).not.toBeInTheDocument(); // Excluded from MVP
+    expect(screen.queryByRole('button', { name: /drag drop/i })).not.toBeInTheDocument(); // Excluded from MVP
+    expect(screen.queryByRole('button', { name: /video/i })).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: /advanced \/ other/i })).not.toBeInTheDocument(); // Excluded from MVP
+    expect(screen.queryByRole('button', { name: /copy from clipboard/i })).not.toBeInTheDocument();
+  });
+
+  it('should create a content', async () => {
+    mockClipboardEmpty.applyMock();
+    const url = getCreateLibraryBlockUrl(libraryId);
+    axiosMock.onPost(url).reply(200);
+
+    render();
+
+    const textButton = screen.getByRole('button', { name: /text/i });
+    fireEvent.click(textButton);
+
+    await waitFor(() => expect(axiosMock.history.post[0].url).toEqual(url));
+    await waitFor(() => expect(axiosMock.history.patch.length).toEqual(0));
+  });
+
+  it('should create a content in a collection for non-editable blocks', async () => {
+    mockClipboardEmpty.applyMock();
+    const collectionId = 'some-collection-id';
+    const url = getCreateLibraryBlockUrl(libraryId);
+    const collectionComponentUrl = getLibraryCollectionComponentApiUrl(
+      libraryId,
+      collectionId,
+    );
+    // having id of block which is not video, html or problem will not trigger editor.
+    axiosMock.onPost(url).reply(200, { id: 'some-component-id' });
+    axiosMock.onPatch(collectionComponentUrl).reply(200);
+
+    render(collectionId);
+
+    const textButton = screen.getByRole('button', { name: /text/i });
+    fireEvent.click(textButton);
+
+    await waitFor(() => expect(axiosMock.history.post[0].url).toEqual(url));
+    await waitFor(() => expect(axiosMock.history.patch.length).toEqual(1));
+    await waitFor(() => expect(axiosMock.history.patch[0].url).toEqual(collectionComponentUrl));
+  });
+
+  it('should create a content in a collection for editable blocks', async () => {
+    mockClipboardEmpty.applyMock();
+    const collectionId = 'some-collection-id';
+    const url = getCreateLibraryBlockUrl(libraryId);
+    const collectionComponentUrl = getLibraryCollectionComponentApiUrl(
+      libraryId,
+      collectionId,
+    );
+    // Mocks for ComponentEditorModal to work in tests.
+    jest.spyOn(editorCmsApi, 'fetchCourseImages').mockImplementation(async () => ( // eslint-disable-next-line
+      { data: { assets: [], start: 0, end: 0, page: 0, pageSize: 50, totalCount: 0 } }
+    ));
+    jest.spyOn(editorCmsApi, 'fetchByUnitId').mockImplementation(async () => ({
+      status: 200,
+      data: {
+        ancestors: [{
+          id: 'block-v1:Org+TS100+24+type@vertical+block@parent',
+          display_name: 'You-Knit? The Test Unit',
+          category: 'vertical',
+          has_children: true,
+        }],
+      },
+    }));
+
+    axiosMock.onPost(url).reply(200, {
+      id: 'lb:OpenedX:CSPROB2:html:1a5efd56-4ee5-4df0-b466-44f08fbbf567',
+    });
+    const fieldsHtml = {
+      displayName: 'Introduction to Testing',
+      data: '<p>This is a text component which uses <strong>HTML</strong>.</p>',
+      metadata: { displayName: 'Introduction to Testing' },
+    };
+    jest.spyOn(editorCmsApi, 'fetchBlockById').mockImplementationOnce(async () => (
+      { status: 200, data: snakeCaseObject(fieldsHtml) }
+    ));
+    axiosMock.onPatch(collectionComponentUrl).reply(200);
+
+    render(collectionId);
+
+    const textButton = screen.getByRole('button', { name: /text/i });
+    fireEvent.click(textButton);
+
+    // Component should be linked to Collection on closing editor.
+    const closeButton = await screen.findByRole('button', { name: 'Exit the editor' });
+    fireEvent.click(closeButton);
+    await waitFor(() => expect(axiosMock.history.post[0].url).toEqual(url));
+    await waitFor(() => expect(axiosMock.history.patch.length).toEqual(1));
+    await waitFor(() => expect(axiosMock.history.patch[0].url).toEqual(collectionComponentUrl));
+  });
+
+  it('should render paste button if clipboard contains pastable xblock', async () => {
+    // Simulate having an HTML block in the clipboard:
+    const getClipboardSpy = mockClipboardHtml.applyMock();
+    render();
+    expect(getClipboardSpy).toHaveBeenCalled(); // Hmm, this is getting called three times! Refactor to use react-query.
+    await waitFor(() => expect(screen.queryByRole('button', { name: /paste from clipboard/i })).toBeInTheDocument());
+  });
+
+  it('should paste content', async () => {
+    // Simulate having an HTML block in the clipboard:
+    const getClipboardSpy = mockClipboardHtml.applyMock();
+
+    const pasteUrl = getLibraryPasteClipboardUrl(libraryId);
+    axiosMock.onPost(pasteUrl).reply(200);
+
+    render();
+
+    expect(getClipboardSpy).toHaveBeenCalled(); // Hmm, this is getting called four times! Refactor to use react-query.
+
+    const pasteButton = await screen.findByRole('button', { name: /paste from clipboard/i });
+    fireEvent.click(pasteButton);
+
+    await waitFor(() => expect(axiosMock.history.post[0].url).toEqual(pasteUrl));
+  });
+
+  it('should paste content inside a collection', async () => {
+    // Simulate having an HTML block in the clipboard:
+    const getClipboardSpy = mockClipboardHtml.applyMock();
+
+    const pasteUrl = getLibraryPasteClipboardUrl(libraryId);
+    const collectionId = 'some-collection-id';
+    const collectionComponentUrl = getLibraryCollectionComponentApiUrl(
+      libraryId,
+      collectionId,
+    );
+    axiosMock.onPatch(collectionComponentUrl).reply(200);
+    axiosMock.onPost(pasteUrl).reply(200, { id: 'some-component-id' });
+
+    render(collectionId);
+
+    expect(getClipboardSpy).toHaveBeenCalled(); // Hmm, this is getting called four times! Refactor to use react-query.
+
+    const pasteButton = await screen.findByRole('button', { name: /paste from clipboard/i });
+    fireEvent.click(pasteButton);
+
+    await waitFor(() => expect(axiosMock.history.post[0].url).toEqual(pasteUrl));
+    await waitFor(() => expect(axiosMock.history.patch.length).toEqual(1));
+    await waitFor(() => expect(axiosMock.history.patch[0].url).toEqual(collectionComponentUrl));
+  });
+
+  it('should show error toast on linking failure', async () => {
+    // Simulate having an HTML block in the clipboard:
+    const getClipboardSpy = mockClipboardHtml.applyMock();
+
+    const pasteUrl = getLibraryPasteClipboardUrl(libraryId);
+    const collectionId = 'some-collection-id';
+    const collectionComponentUrl = getLibraryCollectionComponentApiUrl(
+      libraryId,
+      collectionId,
+    );
+    axiosMock.onPatch(collectionComponentUrl).reply(500);
+    axiosMock.onPost(pasteUrl).reply(200, { id: 'some-component-id' });
+
+    render(collectionId);
+
+    expect(getClipboardSpy).toHaveBeenCalled(); // Hmm, this is getting called four times! Refactor to use react-query.
+
+    const pasteButton = await screen.findByRole('button', { name: /paste from clipboard/i });
+    fireEvent.click(pasteButton);
+
+    await waitFor(() => expect(axiosMock.history.post[0].url).toEqual(pasteUrl));
+    await waitFor(() => expect(axiosMock.history.patch.length).toEqual(1));
+    await waitFor(() => expect(axiosMock.history.patch[0].url).toEqual(collectionComponentUrl));
+    expect(mockShowToast).toHaveBeenCalledWith('There was an error linking the content to this collection.');
+  });
+
+  it('should stop user from pasting unsupported blocks and show toast', async () => {
+    // Simulate having an HTML block in the clipboard:
+    mockClipboardHtml.applyMock('openassessment');
+
+    const errMsg = 'Libraries do not support this type of content yet.';
+
+    render();
+
+    const pasteButton = await screen.findByRole('button', { name: /paste from clipboard/i });
+    fireEvent.click(pasteButton);
+
+    await waitFor(() => {
+      expect(axiosMock.history.post.length).toEqual(0);
+      expect(mockShowToast).toHaveBeenCalledWith(errMsg);
+    });
+  });
+
+  test.each([
+    {
+      label: 'should handle failure to paste content',
+      mockUrl: getLibraryPasteClipboardUrl(libraryId),
+      mockResponse: undefined,
+      expectedError: 'There was an error pasting the content.',
+      buttonName: /paste from clipboard/i,
+    },
+    {
+      label: 'should show detailed error in toast on paste failure',
+      mockUrl: getLibraryPasteClipboardUrl(libraryId),
+      mockResponse: ['library cannot have more than 100000 components'],
+      expectedError: 'There was an error pasting the content: library cannot have more than 100000 components',
+      buttonName: /paste from clipboard/i,
+    },
+    {
+      label: 'should handle failure to create content',
+      mockUrl: getCreateLibraryBlockUrl(libraryId),
+      mockResponse: undefined,
+      expectedError: 'There was an error creating the content.',
+      buttonName: /text/i,
+    },
+    {
+      label: 'should show detailed error in toast on create failure',
+      mockUrl: getCreateLibraryBlockUrl(libraryId),
+      mockResponse: 'library cannot have more than 100000 components',
+      expectedError: 'There was an error creating the content: library cannot have more than 100000 components',
+      buttonName: /text/i,
+    },
+  ])('$label', async ({
+    mockUrl, mockResponse, buttonName, expectedError,
+  }) => {
+    axiosMock.onPost(mockUrl).reply(400, mockResponse);
+
+    // Simulate having an HTML block in the clipboard:
+    mockClipboardHtml.applyMock();
+
+    render();
+    const button = await screen.findByRole('button', { name: buttonName });
+    fireEvent.click(button);
+
+    await waitFor(() => {
+      expect(axiosMock.history.post.length).toEqual(1);
+      expect(axiosMock.history.post[0].url).toEqual(mockUrl);
+      expect(mockShowToast).toHaveBeenCalledWith(expectedError);
+    });
+  });
+});
diff --git a/src/library-authoring/add-content/AddContentContainer.tsx b/src/library-authoring/add-content/AddContentContainer.tsx
new file mode 100644
index 0000000000..1a2e28b1a9
--- /dev/null
+++ b/src/library-authoring/add-content/AddContentContainer.tsx
@@ -0,0 +1,263 @@
+import React, { useContext } from 'react';
+import type { MessageDescriptor } from 'react-intl';
+import { useSelector } from 'react-redux';
+import {
+  Stack,
+  Button,
+  useToggle,
+} from '@openedx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { getConfig } from '@edx/frontend-platform';
+import {
+  Article,
+  AutoAwesome,
+  BookOpen,
+  Create,
+  Folder,
+  ThumbUpOutline,
+  Question,
+  VideoCamera,
+  ContentPaste,
+} from '@openedx/paragon/icons';
+import { v4 as uuid4 } from 'uuid';
+
+import { ToastContext } from '../../generic/toast-context';
+import { useCopyToClipboard } from '../../generic/clipboard';
+import { getCanEdit } from '../../course-unit/data/selectors';
+import { useCreateLibraryBlock, useLibraryPasteClipboard, useAddComponentsToCollection } from '../data/apiHooks';
+import { useLibraryContext } from '../common/context/LibraryContext';
+import { canEditComponent } from '../components/ComponentEditorModal';
+import { PickLibraryContentModal } from './PickLibraryContentModal';
+
+import messages from './messages';
+
+type ContentType = {
+  name: string,
+  disabled: boolean,
+  icon: React.ComponentType,
+  blockType: string,
+};
+
+type AddContentButtonProps = {
+  contentType: ContentType,
+  onCreateContent: (blockType: string) => void,
+};
+
+const AddContentButton = ({ contentType, onCreateContent } : AddContentButtonProps) => {
+  const {
+    name,
+    disabled,
+    icon,
+    blockType,
+  } = contentType;
+  return (
+    <Button
+      variant="outline-primary"
+      disabled={disabled}
+      className="m-2"
+      iconBefore={icon}
+      onClick={() => onCreateContent(blockType)}
+    >
+      {name}
+    </Button>
+  );
+};
+
+const AddContentContainer = () => {
+  const intl = useIntl();
+  const {
+    libraryId,
+    collectionId,
+    openCreateCollectionModal,
+    openComponentEditor,
+    componentPicker,
+  } = useLibraryContext();
+  const createBlockMutation = useCreateLibraryBlock();
+  const updateComponentsMutation = useAddComponentsToCollection(libraryId, collectionId);
+  const pasteClipboardMutation = useLibraryPasteClipboard();
+  const { showToast } = useContext(ToastContext);
+  const canEdit = useSelector(getCanEdit);
+  const { showPasteXBlock, sharedClipboardData } = useCopyToClipboard(canEdit);
+
+  const [isAddLibraryContentModalOpen, showAddLibraryContentModal, closeAddLibraryContentModal] = useToggle();
+
+  const parseErrorMsg = (
+    error: any,
+    detailedMessage: MessageDescriptor,
+    defaultMessage: MessageDescriptor,
+  ) => {
+    try {
+      const { response: { data } } = error;
+      const detail = data && (Array.isArray(data) ? data.join() : String(data));
+      if (detail) {
+        return intl.formatMessage(detailedMessage, { detail });
+      }
+    } catch (_err) {
+      // ignore
+    }
+    return intl.formatMessage(defaultMessage);
+  };
+
+  const isBlockTypeEnabled = (blockType: string) => getConfig().LIBRARY_SUPPORTED_BLOCKS.includes(blockType);
+
+  const collectionButtonData = {
+    name: intl.formatMessage(messages.collectionButton),
+    disabled: false,
+    icon: BookOpen,
+    blockType: 'collection',
+  };
+
+  const libraryContentButtonData = {
+    name: intl.formatMessage(messages.libraryContentButton),
+    disabled: false,
+    icon: Folder,
+    blockType: 'libraryContent',
+  };
+
+  const contentTypes = [
+    {
+      name: intl.formatMessage(messages.textTypeButton),
+      disabled: !isBlockTypeEnabled('html'),
+      icon: Article,
+      blockType: 'html',
+    },
+    {
+      name: intl.formatMessage(messages.problemTypeButton),
+      disabled: !isBlockTypeEnabled('problem'),
+      icon: Question,
+      blockType: 'problem',
+    },
+    {
+      name: intl.formatMessage(messages.openResponseTypeButton),
+      disabled: !isBlockTypeEnabled('openassessment'),
+      icon: Create,
+      blockType: 'openassessment',
+    },
+    {
+      name: intl.formatMessage(messages.dragDropTypeButton),
+      disabled: !isBlockTypeEnabled('drag-and-drop-v2'),
+      icon: ThumbUpOutline,
+      blockType: 'drag-and-drop-v2',
+    },
+    {
+      name: intl.formatMessage(messages.videoTypeButton),
+      disabled: !isBlockTypeEnabled('video'),
+      icon: VideoCamera,
+      blockType: 'video',
+    },
+    {
+      name: intl.formatMessage(messages.otherTypeButton),
+      disabled: !isBlockTypeEnabled('other'),
+      icon: AutoAwesome,
+      blockType: 'other', // This block doesn't exist yet.
+    },
+  ];
+
+  // Include the 'Paste from Clipboard' button if there is an Xblock in the clipboard
+  // that can be pasted
+  if (showPasteXBlock) {
+    const pasteButton = {
+      name: intl.formatMessage(messages.pasteButton),
+      disabled: false,
+      icon: ContentPaste,
+      blockType: 'paste',
+    };
+    contentTypes.push(pasteButton);
+  }
+
+  const linkComponent = (usageKey: string) => {
+    updateComponentsMutation.mutateAsync([usageKey]).catch(() => {
+      showToast(intl.formatMessage(messages.errorAssociateComponentMessage));
+    });
+  };
+
+  const onPaste = () => {
+    if (!isBlockTypeEnabled(sharedClipboardData.content?.blockType)) {
+      showToast(intl.formatMessage(messages.unsupportedBlockPasteClipboardMessage));
+      return;
+    }
+    pasteClipboardMutation.mutateAsync({
+      libraryId,
+      blockId: `${uuid4()}`,
+    }).then((data) => {
+      linkComponent(data.id);
+      showToast(intl.formatMessage(messages.successPasteClipboardMessage));
+    }).catch((error) => {
+      showToast(parseErrorMsg(
+        error,
+        messages.errorPasteClipboardMessageWithDetail,
+        messages.errorPasteClipboardMessage,
+      ));
+    });
+  };
+
+  const onCreateBlock = (blockType: string) => {
+    createBlockMutation.mutateAsync({
+      libraryId,
+      blockType,
+      definitionId: `${uuid4()}`,
+    }).then((data) => {
+      const hasEditor = canEditComponent(data.id);
+      if (hasEditor) {
+        // linkComponent on editor close.
+        openComponentEditor(data.id, () => linkComponent(data.id));
+      } else {
+        // We can't start editing this right away so just show a toast message:
+        showToast(intl.formatMessage(messages.successCreateMessage));
+        linkComponent(data.id);
+      }
+    }).catch((error) => {
+      showToast(parseErrorMsg(
+        error,
+        messages.errorCreateMessageWithDetail,
+        messages.errorCreateMessage,
+      ));
+    });
+  };
+
+  const onCreateContent = (blockType: string) => {
+    if (blockType === 'paste') {
+      onPaste();
+    } else if (blockType === 'collection') {
+      openCreateCollectionModal();
+    } else if (blockType === 'libraryContent') {
+      showAddLibraryContentModal();
+    } else {
+      onCreateBlock(blockType);
+    }
+  };
+
+  /* istanbul ignore next */
+  if (pasteClipboardMutation.isLoading) {
+    showToast(intl.formatMessage(messages.pastingClipboardMessage));
+  }
+
+  return (
+    <Stack direction="vertical">
+      {collectionId ? (
+        componentPicker && (
+          <>
+            <AddContentButton contentType={libraryContentButtonData} onCreateContent={onCreateContent} />
+            <PickLibraryContentModal
+              isOpen={isAddLibraryContentModalOpen}
+              onClose={closeAddLibraryContentModal}
+            />
+          </>
+        )
+      ) : (
+        <AddContentButton contentType={collectionButtonData} onCreateContent={onCreateContent} />
+      )}
+      <hr className="w-100 bg-gray-500" />
+      {/* Note: for MVP we are hiding the unuspported types, not just disabling them. */}
+      {contentTypes.filter(ct => !ct.disabled).map((contentType) => (
+        <AddContentButton
+          key={`add-content-${contentType.blockType}`}
+          contentType={contentType}
+          onCreateContent={onCreateContent}
+        />
+      ))}
+    </Stack>
+  );
+};
+
+export default AddContentContainer;
diff --git a/src/library-authoring/add-content/AddContentHeader.tsx b/src/library-authoring/add-content/AddContentHeader.tsx
new file mode 100644
index 0000000000..a73a41a039
--- /dev/null
+++ b/src/library-authoring/add-content/AddContentHeader.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import messages from './messages';
+
+const AddContentHeader = () => (
+  <span className="font-weight-bold m-1.5">
+    <FormattedMessage {...messages.addContentTitle} />
+  </span>
+);
+
+export default AddContentHeader;
diff --git a/src/library-authoring/add-content/AddContentWorkflow.test.tsx b/src/library-authoring/add-content/AddContentWorkflow.test.tsx
new file mode 100644
index 0000000000..b019700a56
--- /dev/null
+++ b/src/library-authoring/add-content/AddContentWorkflow.test.tsx
@@ -0,0 +1,154 @@
+/**
+ * Test the whole workflow of adding content, editing it, saving it
+ */
+import { snakeCaseObject } from '@edx/frontend-platform';
+import {
+  fireEvent,
+  render,
+  waitFor,
+  screen,
+  initializeMocks,
+} from '../../testUtils';
+import mockResult from '../__mocks__/library-search.json';
+import editorCmsApi from '../../editors/data/services/cms/api';
+import * as textEditorHooks from '../../editors/containers/TextEditor/hooks';
+import {
+  mockContentLibrary,
+  mockCreateLibraryBlock,
+  mockXBlockFields,
+} from '../data/api.mocks';
+import { mockBroadcastChannel, mockClipboardEmpty } from '../../generic/data/api.mock';
+import { mockContentSearchConfig, mockSearchResult } from '../../search-manager/data/api.mock';
+import { studioHomeMock } from '../../studio-home/__mocks__';
+import { getStudioHomeApiUrl } from '../../studio-home/data/api';
+import LibraryLayout from '../LibraryLayout';
+
+mockContentSearchConfig.applyMock();
+mockClipboardEmpty.applyMock();
+mockBroadcastChannel();
+mockContentLibrary.applyMock();
+mockCreateLibraryBlock.applyMock();
+mockSearchResult(mockResult);
+// Mocking the redux APIs in the src/editors/ folder is a bit more involved:
+jest.spyOn(editorCmsApi as any, 'fetchBlockById').mockImplementation(
+  async (args: { blockId: string }) => (
+    { status: 200, data: snakeCaseObject(await mockXBlockFields(args.blockId)) }
+  ),
+);
+jest.spyOn(textEditorHooks, 'getContent').mockImplementation(() => () => '<p>Edited HTML content</p>');
+jest.mock('frontend-components-tinymce-advanced-plugins', () => ({ a11ycheckerCss: '' }));
+const saveSpy = jest.spyOn(editorCmsApi as any, 'saveBlock');
+
+const { libraryId } = mockContentLibrary;
+const renderOpts = {
+  // Mount the <LibraryLayout /> on this route, to simulate how it's mounted in the real app:
+  path: '/library/:libraryId/*',
+  // And set the current URL to the following:
+  routerProps: { initialEntries: [`/library/${libraryId}/components`] },
+};
+
+describe('AddContentWorkflow test', () => {
+  beforeEach(async () => {
+    const { axiosMock } = initializeMocks();
+    axiosMock.onGet(getStudioHomeApiUrl()).reply(200, studioHomeMock);
+  });
+
+  it('can create an HTML component', async () => {
+    render(<LibraryLayout />, renderOpts);
+
+    // Click "New [Component]"
+    const newComponentButton = await screen.findByRole('button', { name: /New/ });
+    fireEvent.click(newComponentButton);
+
+    // Click "Text" to create a text component
+    fireEvent.click(await screen.findByRole('button', { name: /Text/ }));
+
+    // Then the editor should open
+    expect(await screen.findByRole('heading', { name: /New Text Component/ })).toBeInTheDocument();
+
+    // Edit the title
+    fireEvent.click(screen.getByRole('button', { name: /Edit Title/ }));
+    const titleInput = screen.getByPlaceholderText('Title');
+    fireEvent.change(titleInput, { target: { value: 'A customized title' } });
+    fireEvent.blur(titleInput);
+    await waitFor(() => expect(screen.queryByRole('heading', { name: /New Text Component/ })).not.toBeInTheDocument());
+    expect(screen.getByRole('heading', { name: /A customized title/ }));
+
+    // Note that TinyMCE doesn't really load properly in our test environment
+    // so we can't really edit the text, but we have getContent() mocked to simulate
+    // using TinyMCE to enter some new HTML.
+
+    // Mock the save() REST API method:
+    saveSpy.mockReset().mockImplementationOnce(async () => ({
+      status: 200, data: { id: mockXBlockFields.usageKeyNewHtml },
+    }));
+
+    // Click Save
+    const saveButton = screen.getByLabelText('Save changes and return to learning context');
+    fireEvent.click(saveButton);
+    expect(saveSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it('can create a Problem component', async () => {
+    render(<LibraryLayout />, renderOpts);
+
+    // Click "New [Component]"
+    const newComponentButton = await screen.findByRole('button', { name: /New/ });
+    fireEvent.click(newComponentButton);
+
+    // Click "Problem" to create a capa problem component
+    fireEvent.click(await screen.findByRole('button', { name: /Problem/ }));
+
+    // Then the editor should open
+    expect(await screen.findByRole('heading', { name: /Select problem type/ })).toBeInTheDocument();
+
+    // Select the type: Numerical Input
+    fireEvent.click(await screen.findByRole('button', { name: 'Numerical input' }));
+    fireEvent.click(screen.getByRole('button', { name: 'Select' }));
+
+    expect(await screen.findByRole('heading', { name: /Numerical input/ })).toBeInTheDocument();
+
+    // Enter an answer value:
+    const inputA = await screen.findByPlaceholderText('Enter an answer');
+    fireEvent.change(inputA, { target: { value: '123456' } });
+
+    // Mock the save() REST API method:
+    saveSpy.mockReset().mockImplementationOnce(async () => ({
+      status: 200, data: { id: mockXBlockFields.usageKeyNewProblem },
+    }));
+
+    // Click Save
+    const saveButton = screen.getByLabelText('Save changes and return to learning context');
+    fireEvent.click(saveButton);
+    expect(saveSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it('can create a Video component', async () => {
+    render(<LibraryLayout />, renderOpts);
+
+    // Click "New [Component]"
+    const newComponentButton = await screen.findByRole('button', { name: /New/ });
+    fireEvent.click(newComponentButton);
+
+    // Click "Video" to create a video component
+    fireEvent.click(await screen.findByRole('button', { name: /Video/ }));
+
+    // Then the editor should open - this is the default title of a blank video in our mock
+    expect(await screen.findByRole('heading', { name: /New Video/ })).toBeInTheDocument();
+
+    // Enter the video URL
+    const urlInput = await screen.findByRole('textbox', { name: 'Video URL' });
+    fireEvent.click(urlInput);
+    fireEvent.change(urlInput, { target: { value: 'https://www.youtube.com/watch?v=9KIIlWS4mkg' } });
+
+    // Mock the save() REST API method:
+    saveSpy.mockReset().mockImplementationOnce(async () => ({
+      status: 200, data: { id: mockXBlockFields.usageKeyNewVideo },
+    }));
+
+    // Click Save
+    const saveButton = screen.getByLabelText('Save changes and return to learning context');
+    fireEvent.click(saveButton);
+    expect(saveSpy).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/src/library-authoring/add-content/PickLibraryContentModal.test.tsx b/src/library-authoring/add-content/PickLibraryContentModal.test.tsx
new file mode 100644
index 0000000000..80efc8cb3c
--- /dev/null
+++ b/src/library-authoring/add-content/PickLibraryContentModal.test.tsx
@@ -0,0 +1,107 @@
+import { mockContentSearchConfig, mockSearchResult } from '../../search-manager/data/api.mock';
+import {
+  fireEvent,
+  render as baseRender,
+  waitFor,
+  screen,
+  initializeMocks,
+} from '../../testUtils';
+import { studioHomeMock } from '../../studio-home/__mocks__';
+import { getStudioHomeApiUrl } from '../../studio-home/data/api';
+import mockResult from '../__mocks__/library-search.json';
+import { LibraryProvider } from '../common/context/LibraryContext';
+import { ComponentPicker } from '../component-picker';
+import * as api from '../data/api';
+import {
+  mockContentLibrary,
+  mockGetCollectionMetadata,
+} from '../data/api.mocks';
+import { PickLibraryContentModal } from './PickLibraryContentModal';
+
+mockContentSearchConfig.applyMock();
+mockContentLibrary.applyMock();
+mockGetCollectionMetadata.applyMock();
+mockSearchResult(mockResult);
+
+const { libraryId } = mockContentLibrary;
+
+const onClose = jest.fn();
+let mockShowToast: (message: string) => void;
+
+const render = () => baseRender(<PickLibraryContentModal isOpen onClose={onClose} />, {
+  path: '/library/:libraryId/collection/:collectionId/*',
+  params: { libraryId, collectionId: 'collectionId' },
+  extraWrapper: ({ children }) => (
+    <LibraryProvider
+      libraryId={libraryId}
+      componentPicker={ComponentPicker}
+    >
+      {children}
+    </LibraryProvider>
+  ),
+});
+
+describe('<PickLibraryContentModal />', () => {
+  beforeEach(async () => {
+    const mocks = initializeMocks();
+    mockShowToast = mocks.mockShowToast;
+    mocks.axiosMock.onGet(getStudioHomeApiUrl()).reply(200, studioHomeMock);
+  });
+
+  it('can pick components from the modal', async () => {
+    const mockAddComponentsToCollection = jest.fn();
+    jest.spyOn(api, 'addComponentsToCollection').mockImplementation(mockAddComponentsToCollection);
+
+    render();
+
+    // Wait for the content library to load
+    await waitFor(() => {
+      expect(screen.getByText('Test Library')).toBeInTheDocument();
+      expect(screen.queryAllByText('Introduction to Testing')[0]).toBeInTheDocument();
+    });
+
+    // Select the first component
+    fireEvent.click(screen.queryAllByRole('button', { name: 'Select' })[0]);
+    expect(await screen.findByText('1 Selected Component')).toBeInTheDocument();
+
+    fireEvent.click(screen.queryAllByRole('button', { name: 'Add to Collection' })[0]);
+
+    await waitFor(() => {
+      expect(mockAddComponentsToCollection).toHaveBeenCalledWith(
+        libraryId,
+        'collectionId',
+        ['lb:Axim:TEST:html:571fe018-f3ce-45c9-8f53-5dafcb422fdd'],
+      );
+      expect(onClose).toHaveBeenCalled();
+      expect(mockShowToast).toHaveBeenCalledWith('Content linked successfully.');
+    });
+  });
+
+  it('show error when api call fails', async () => {
+    const mockAddComponentsToCollection = jest.fn().mockRejectedValue(new Error('Failed to add components'));
+    jest.spyOn(api, 'addComponentsToCollection').mockImplementation(mockAddComponentsToCollection);
+    render();
+
+    // Wait for the content library to load
+    await waitFor(() => {
+      expect(screen.getByText('Test Library')).toBeInTheDocument();
+      expect(screen.queryAllByText('Introduction to Testing')[0]).toBeInTheDocument();
+    });
+
+    // Select the first component
+    fireEvent.click(screen.queryAllByRole('button', { name: 'Select' })[0]);
+    expect(await screen.findByText('1 Selected Component')).toBeInTheDocument();
+
+    fireEvent.click(screen.queryAllByRole('button', { name: 'Add to Collection' })[0]);
+
+    await waitFor(() => {
+      expect(mockAddComponentsToCollection).toHaveBeenCalledWith(
+        libraryId,
+        'collectionId',
+        ['lb:Axim:TEST:html:571fe018-f3ce-45c9-8f53-5dafcb422fdd'],
+      );
+      expect(onClose).toHaveBeenCalled();
+      expect(mockShowToast).toHaveBeenCalledWith('There was an error linking the content to this collection.');
+    });
+  });
+});
diff --git a/src/library-authoring/add-content/PickLibraryContentModal.tsx b/src/library-authoring/add-content/PickLibraryContentModal.tsx
new file mode 100644
index 0000000000..e5977d2407
--- /dev/null
+++ b/src/library-authoring/add-content/PickLibraryContentModal.tsx
@@ -0,0 +1,88 @@
+import React, { useCallback, useContext, useState } from 'react';
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
+import { ActionRow, Button, StandardModal } from '@openedx/paragon';
+
+import { ToastContext } from '../../generic/toast-context';
+import { useLibraryContext } from '../common/context/LibraryContext';
+import type { SelectedComponent } from '../common/context/ComponentPickerContext';
+import { useAddComponentsToCollection } from '../data/apiHooks';
+import messages from './messages';
+
+interface PickLibraryContentModalFooterProps {
+  onSubmit: () => void;
+  selectedComponents: SelectedComponent[];
+}
+
+const PickLibraryContentModalFooter: React.FC<PickLibraryContentModalFooterProps> = ({
+  onSubmit,
+  selectedComponents,
+}) => (
+  <ActionRow>
+    <FormattedMessage {...messages.selectedComponents} values={{ count: selectedComponents.length }} />
+    <ActionRow.Spacer />
+    <Button variant="primary" onClick={onSubmit}>
+      <FormattedMessage {...messages.addToCollectionButton} />
+    </Button>
+  </ActionRow>
+);
+
+interface PickLibraryContentModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export const PickLibraryContentModal: React.FC<PickLibraryContentModalProps> = ({
+  isOpen,
+  onClose,
+}) => {
+  const intl = useIntl();
+
+  const {
+    libraryId,
+    collectionId,
+    /** We need to get it as a reference instead of directly importing it to avoid the import cycle:
+     * ComponentPicker > LibraryAuthoringPage/LibraryCollectionPage >
+     * Sidebar > AddContentContainer > ComponentPicker */
+    componentPicker: ComponentPicker,
+  } = useLibraryContext();
+
+  // istanbul ignore if: this should never happen
+  if (!collectionId || !ComponentPicker) {
+    throw new Error('libraryId and componentPicker are required');
+  }
+
+  const updateComponentsMutation = useAddComponentsToCollection(libraryId, collectionId);
+
+  const { showToast } = useContext(ToastContext);
+
+  const [selectedComponents, setSelectedComponents] = useState<SelectedComponent[]>([]);
+
+  const onSubmit = useCallback(() => {
+    const usageKeys = selectedComponents.map(({ usageKey }) => usageKey);
+    onClose();
+    updateComponentsMutation.mutateAsync(usageKeys)
+      .then(() => {
+        showToast(intl.formatMessage(messages.successAssociateComponentMessage));
+      })
+      .catch(() => {
+        showToast(intl.formatMessage(messages.errorAssociateComponentMessage));
+      });
+  }, [selectedComponents]);
+
+  return (
+    <StandardModal
+      title="Select components"
+      isOverflowVisible={false}
+      size="xl"
+      isOpen={isOpen}
+      onClose={onClose}
+      footerNode={<PickLibraryContentModalFooter onSubmit={onSubmit} selectedComponents={selectedComponents} />}
+    >
+      <ComponentPicker
+        libraryId={libraryId}
+        componentPickerMode="multiple"
+        onChangeComponentSelection={setSelectedComponents}
+      />
+    </StandardModal>
+  );
+};
diff --git a/src/library-authoring/add-content/index.ts b/src/library-authoring/add-content/index.ts
new file mode 100644
index 0000000000..ae4e4ac7b1
--- /dev/null
+++ b/src/library-authoring/add-content/index.ts
@@ -0,0 +1,2 @@
+export { default as AddContentContainer } from './AddContentContainer';
+export { default as AddContentHeader } from './AddContentHeader';
diff --git a/src/library-authoring/add-content/messages.ts b/src/library-authoring/add-content/messages.ts
new file mode 100644
index 0000000000..898073eb49
--- /dev/null
+++ b/src/library-authoring/add-content/messages.ts
@@ -0,0 +1,122 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  collectionButton: {
+    id: 'course-authoring.library-authoring.add-content.buttons.collection',
+    defaultMessage: 'Collection',
+    description: 'Content of button to create a Collection.',
+  },
+  libraryContentButton: {
+    id: 'course-authoring.library-authoring.add-content.buttons.library-content',
+    defaultMessage: 'Existing Library Content',
+    description: 'Content of button to add existing library content to a collection.',
+  },
+  addToCollectionButton: {
+    id: 'course-authoring.library-authoring.add-content.buttons.library-content.add-to-collection',
+    defaultMessage: 'Add to Collection',
+    description: 'Button to add library content to a collection.',
+  },
+  selectedComponents: {
+    id: 'course-authoring.library-authoring.add-content.selected-components',
+    defaultMessage: '{count, plural, one {# Selected Component} other {# Selected Components}}',
+    description: 'Title for selected components in library.',
+  },
+  textTypeButton: {
+    id: 'course-authoring.library-authoring.add-content.buttons.types.text',
+    defaultMessage: 'Text',
+    description: 'Content of button to create a Text component.',
+  },
+  problemTypeButton: {
+    id: 'course-authoring.library-authoring.add-content.buttons.types.problem',
+    defaultMessage: 'Problem',
+    description: 'Content of button to create a Problem component.',
+  },
+  openResponseTypeButton: {
+    id: 'course-authoring.library-authoring.add-content.buttons.types.open-response',
+    defaultMessage: 'Open Reponse',
+    description: 'Content of button to create a Open Response component.',
+  },
+  dragDropTypeButton: {
+    id: 'course-authoring.library-authoring.add-content.buttons.types.drag-drop',
+    defaultMessage: 'Drag Drop',
+    description: 'Content of button to create a Drag Drod component.',
+  },
+  videoTypeButton: {
+    id: 'course-authoring.library-authoring.add-content.buttons.types.video',
+    defaultMessage: 'Video',
+    description: 'Content of button to create a Video component.',
+  },
+  otherTypeButton: {
+    id: 'course-authoring.library-authoring.add-content.buttons.types.other',
+    defaultMessage: 'Advanced / Other',
+    description: 'Content of button to create a Advanced / Other component.',
+  },
+  pasteButton: {
+    id: 'course-authoring.library-authoring.add-content.buttons.paste',
+    defaultMessage: 'Paste From Clipboard',
+    description: 'Content of button to paste from clipboard.',
+  },
+  successCreateMessage: {
+    id: 'course-authoring.library-authoring.add-content.success.text',
+    defaultMessage: 'Content created successfully.',
+    description: 'Message when creation of content in library is success',
+  },
+  errorCreateMessage: {
+    id: 'course-authoring.library-authoring.add-content.error.text',
+    defaultMessage: 'There was an error creating the content.',
+    description: 'Message when creation of content in library is on error.',
+  },
+  errorCreateMessageWithDetail: {
+    id: 'course-authoring.library-authoring.add-content.error.text-detail',
+    defaultMessage: 'There was an error creating the content: {detail}',
+    description: (
+      'Message when creation of content in library is on error.'
+      + ' The {detail} text provides more information about the error.'
+    ),
+  },
+  successAssociateComponentMessage: {
+    id: 'course-authoring.library-authoring.associate-collection-content.success.text',
+    defaultMessage: 'Content linked successfully.',
+    description: 'Message when linking of content to a collection in library is success',
+  },
+  errorAssociateComponentMessage: {
+    id: 'course-authoring.library-authoring.associate-collection-content.error.text',
+    defaultMessage: 'There was an error linking the content to this collection.',
+    description: 'Message when linking of content to a collection in library fails',
+  },
+  addContentTitle: {
+    id: 'course-authoring.library-authoring.sidebar.title.add-content',
+    defaultMessage: 'Add Content',
+    description: 'Title of add content in library container.',
+  },
+  successPasteClipboardMessage: {
+    id: 'course-authoring.library-authoring.paste-clipboard.success.text',
+    defaultMessage: 'Content pasted successfully.',
+    description: 'Message when pasting clipboard in library is successful',
+  },
+  errorPasteClipboardMessage: {
+    id: 'course-authoring.library-authoring.paste-clipboard.error.text',
+    defaultMessage: 'There was an error pasting the content.',
+    description: 'Message when pasting clipboard in library errors',
+  },
+  errorPasteClipboardMessageWithDetail: {
+    id: 'course-authoring.library-authoring.paste-clipboard.error.text-detail',
+    defaultMessage: 'There was an error pasting the content: {detail}',
+    description: (
+      'Message when pasting clipboard in library errors.'
+      + ' The {detail} text provides more information about the error.'
+    ),
+  },
+  pastingClipboardMessage: {
+    id: 'course-authoring.library-authoring.paste-clipboard.loading.text',
+    defaultMessage: 'Pasting content from clipboard...',
+    description: 'Message when in process of pasting content in library',
+  },
+  unsupportedBlockPasteClipboardMessage: {
+    id: 'course-authoring.library-authoring.paste-clipboard.unsupportedblock-error.text',
+    defaultMessage: 'Libraries do not support this type of content yet.',
+    description: 'Message when unsupported block is pasted in library',
+  },
+});
+
+export default messages;
diff --git a/src/library-authoring/collections/CollectionDetails.test.tsx b/src/library-authoring/collections/CollectionDetails.test.tsx
new file mode 100644
index 0000000000..b38e4cb48f
--- /dev/null
+++ b/src/library-authoring/collections/CollectionDetails.test.tsx
@@ -0,0 +1,178 @@
+import type MockAdapter from 'axios-mock-adapter';
+import fetchMock from 'fetch-mock-jest';
+
+import { mockContentSearchConfig, mockGetBlockTypes } from '../../search-manager/data/api.mock';
+import {
+  initializeMocks,
+  fireEvent,
+  render as baseRender,
+  screen,
+  waitFor,
+  within,
+} from '../../testUtils';
+import { LibraryProvider } from '../common/context/LibraryContext';
+import { SidebarBodyComponentId, SidebarProvider } from '../common/context/SidebarContext';
+import * as api from '../data/api';
+import { mockContentLibrary, mockGetCollectionMetadata } from '../data/api.mocks';
+import CollectionDetails from './CollectionDetails';
+
+let axiosMock: MockAdapter;
+let mockShowToast: (message: string) => void;
+
+mockContentLibrary.applyMock();
+mockGetCollectionMetadata.applyMock();
+mockContentSearchConfig.applyMock();
+mockGetBlockTypes.applyMock();
+
+const { collectionId } = mockGetCollectionMetadata;
+const { description: originalDescription } = mockGetCollectionMetadata.collectionData;
+
+const library = mockContentLibrary.libraryData;
+
+const render = () => baseRender(<CollectionDetails />, {
+  extraWrapper: ({ children }) => (
+    <LibraryProvider libraryId={library.id}>
+      <SidebarProvider
+        initialSidebarComponentInfo={{
+          id: collectionId,
+          type: SidebarBodyComponentId.CollectionInfo,
+        }}
+      >
+        { children }
+      </SidebarProvider>
+    </LibraryProvider>
+  ),
+});
+
+describe('<CollectionDetails />', () => {
+  beforeEach(() => {
+    const mocks = initializeMocks();
+    axiosMock = mocks.axiosMock;
+    mockShowToast = mocks.mockShowToast;
+  });
+
+  afterEach(() => {
+    fetchMock.mockReset();
+  });
+
+  it('should render Collection Details', async () => {
+    render();
+
+    // Collection Description
+    expect(await screen.findByText('Description / Card Preview Text')).toBeInTheDocument();
+    expect(screen.getByText(originalDescription)).toBeInTheDocument();
+
+    // Collection History
+    expect(screen.getByText('Collection History')).toBeInTheDocument();
+    // Modified date
+    expect(screen.getByText('September 20, 2024')).toBeInTheDocument();
+    // Created date
+    expect(screen.getByText('September 19, 2024')).toBeInTheDocument();
+  });
+
+  it('should allow modifying the description', async () => {
+    render();
+    expect(await screen.findByText('Description / Card Preview Text')).toBeInTheDocument();
+
+    expect(screen.getByText(originalDescription)).toBeInTheDocument();
+
+    const url = api.getLibraryCollectionApiUrl(library.id, collectionId);
+    axiosMock.onPatch(url).reply(200);
+
+    const textArea = screen.getByRole('textbox');
+
+    // Change the description to the same value
+    fireEvent.focus(textArea);
+    fireEvent.change(textArea, { target: { value: originalDescription } });
+    fireEvent.blur(textArea);
+
+    await waitFor(() => {
+      expect(axiosMock.history.patch).toHaveLength(0);
+      expect(mockShowToast).not.toHaveBeenCalled();
+    });
+
+    // Change the description to a new value
+    fireEvent.focus(textArea);
+    fireEvent.change(textArea, { target: { value: 'New description' } });
+    fireEvent.blur(textArea);
+
+    await waitFor(() => {
+      expect(axiosMock.history.patch).toHaveLength(1);
+      expect(axiosMock.history.patch[0].url).toEqual(url);
+      expect(axiosMock.history.patch[0].data).toEqual(JSON.stringify({ description: 'New description' }));
+      expect(mockShowToast).toHaveBeenCalledWith('Collection updated successfully.');
+    });
+  });
+
+  it('should show error while modifing the description', async () => {
+    render();
+    expect(await screen.findByText('Description / Card Preview Text')).toBeInTheDocument();
+
+    expect(screen.getByText(originalDescription)).toBeInTheDocument();
+
+    const url = api.getLibraryCollectionApiUrl(library.id, collectionId);
+    axiosMock.onPatch(url).reply(500);
+
+    const textArea = screen.getByRole('textbox');
+
+    // Change the description to a new value
+    fireEvent.focus(textArea);
+    fireEvent.change(textArea, { target: { value: 'New description' } });
+    fireEvent.blur(textArea);
+
+    await waitFor(() => {
+      expect(axiosMock.history.patch).toHaveLength(1);
+      expect(axiosMock.history.patch[0].url).toEqual(url);
+      expect(axiosMock.history.patch[0].data).toEqual(JSON.stringify({ description: 'New description' }));
+      expect(mockShowToast).toHaveBeenCalledWith('Failed to update collection.');
+    });
+  });
+
+  it('should render Collection stats', async () => {
+    mockGetBlockTypes('someBlocks');
+    render();
+    expect(await screen.findByText('Description / Card Preview Text')).toBeInTheDocument();
+
+    expect(screen.getByText('Collection Stats')).toBeInTheDocument();
+    expect(await screen.findByText('Total')).toBeInTheDocument();
+
+    [
+      { blockType: 'Total', count: 3 },
+      { blockType: 'Text', count: 2 },
+      { blockType: 'Problem', count: 1 },
+      { blockType: 'Video', count: 0 },
+    ].forEach(({ blockType, count }) => {
+      const blockCount = screen.getByText(blockType).closest('div') as HTMLDivElement;
+      expect(within(blockCount).getByText(count.toString())).toBeInTheDocument();
+    });
+  });
+
+  it('should render Collection stats for empty collection', async () => {
+    mockGetBlockTypes('noBlocks');
+    render();
+    expect(await screen.findByText('Description / Card Preview Text')).toBeInTheDocument();
+
+    expect(screen.getByText('Collection Stats')).toBeInTheDocument();
+    expect(await screen.findByText('This collection is currently empty.')).toBeInTheDocument();
+  });
+
+  it('should render Collection stats for big collection', async () => {
+    mockGetBlockTypes('moreBlocks');
+    render();
+    expect(await screen.findByText('Description / Card Preview Text')).toBeInTheDocument();
+
+    expect(screen.getByText('Collection Stats')).toBeInTheDocument();
+    expect(await screen.findByText('36')).toBeInTheDocument();
+
+    [
+      { blockType: 'Total', count: 36 },
+      { blockType: 'Problem', count: 2 },
+      { blockType: 'Text', count: 3 },
+      { blockType: 'Video', count: 1 },
+      { blockType: 'Other', count: 30 },
+    ].forEach(({ blockType, count }) => {
+      const blockCount = screen.getByText(blockType).closest('div') as HTMLDivElement;
+      expect(within(blockCount).getByText(count.toString())).toBeInTheDocument();
+    });
+  });
+});
diff --git a/src/library-authoring/collections/CollectionDetails.tsx b/src/library-authoring/collections/CollectionDetails.tsx
new file mode 100644
index 0000000000..d6b4f168cf
--- /dev/null
+++ b/src/library-authoring/collections/CollectionDetails.tsx
@@ -0,0 +1,177 @@
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
+import { Icon, Stack } from '@openedx/paragon';
+import { useContext, useEffect, useState } from 'react';
+import classNames from 'classnames';
+
+import { getItemIcon } from '../../generic/block-type-utils';
+import { ToastContext } from '../../generic/toast-context';
+import { BlockTypeLabel, useGetBlockTypes } from '../../search-manager';
+import { useLibraryContext } from '../common/context/LibraryContext';
+import { useSidebarContext } from '../common/context/SidebarContext';
+import { useCollection, useUpdateCollection } from '../data/apiHooks';
+import HistoryWidget from '../generic/history-widget';
+import messages from './messages';
+
+interface BlockCountProps {
+  count: number,
+  blockType?: string,
+  label: React.ReactNode,
+  className?: string,
+}
+
+const BlockCount = ({
+  count,
+  blockType,
+  label,
+  className,
+}: BlockCountProps) => {
+  const icon = blockType && getItemIcon(blockType);
+  return (
+    <Stack className={classNames('text-center', className)}>
+      <span className="text-muted">{label}</span>
+      <Stack direction="horizontal" gap={1} className="justify-content-center">
+        {icon && <Icon src={icon} size="lg" />}
+        <span>{count}</span>
+      </Stack>
+    </Stack>
+  );
+};
+
+const CollectionStatsWidget = () => {
+  const { libraryId } = useLibraryContext();
+  const { sidebarComponentInfo } = useSidebarContext();
+  const collectionId = sidebarComponentInfo?.id;
+
+  const { data: blockTypes } = useGetBlockTypes([
+    `context_key = "${libraryId}"`,
+    `collections.key = "${collectionId}"`,
+  ]);
+
+  if (!blockTypes) {
+    return null;
+  }
+
+  const blockSlots = ['problem', 'html', 'video'];
+
+  const totalBlocksCount = Object.values(blockTypes).reduce((acc, count) => acc + count, 0);
+
+  if (totalBlocksCount === 0) {
+    return (
+      <div
+        className="text-center text-muted align-content-center"
+        style={{
+          height: '72px', // same height as the BlockCount component
+        }}
+      >
+        <FormattedMessage {...messages.detailsTabStatsNoComponents} />
+      </div>
+    );
+  }
+
+  const otherBlocksCount = Object.entries(blockTypes).filter(([blockType]) => !blockSlots.includes(blockType))
+    .reduce((acc, [, count]) => acc + count, 0);
+
+  return (
+    <Stack direction="horizontal" className="p-2 justify-content-between" gap={2}>
+      <BlockCount
+        label={<FormattedMessage {...messages.detailsTabStatsTotalComponents} />}
+        count={totalBlocksCount}
+        className="border-right"
+      />
+      {blockSlots.map((blockType) => (
+        <BlockCount
+          key={blockType}
+          label={<BlockTypeLabel blockType={blockType} />}
+          blockType={blockType}
+          count={blockTypes[blockType] || 0}
+        />
+      ))}
+      {!!otherBlocksCount && (
+        <BlockCount
+          label={<FormattedMessage {...messages.detailsTabStatsOtherComponents} />}
+          count={otherBlocksCount}
+        />
+      )}
+    </Stack>
+  );
+};
+
+const CollectionDetails = () => {
+  const intl = useIntl();
+  const { showToast } = useContext(ToastContext);
+  const { libraryId, readOnly } = useLibraryContext();
+  const { sidebarComponentInfo } = useSidebarContext();
+
+  const collectionId = sidebarComponentInfo?.id;
+  // istanbul ignore next: This should never happen
+  if (!collectionId) {
+    throw new Error('collectionId is required');
+  }
+
+  const updateMutation = useUpdateCollection(libraryId, collectionId);
+  const { data: collection } = useCollection(libraryId, collectionId);
+
+  const [description, setDescription] = useState(collection?.description || '');
+
+  useEffect(() => {
+    if (collection) {
+      setDescription(collection.description);
+    }
+  }, [collection]);
+
+  if (!collection) {
+    return null;
+  }
+
+  const onSubmit = (e: React.FocusEvent<HTMLTextAreaElement>) => {
+    const newDescription = e.target.value;
+    if (newDescription === collection.description) {
+      return;
+    }
+    updateMutation.mutateAsync({
+      description: newDescription,
+    }).then(() => {
+      showToast(intl.formatMessage(messages.updateCollectionSuccessMsg));
+    }).catch(() => {
+      showToast(intl.formatMessage(messages.updateCollectionErrorMsg));
+    });
+  };
+
+  return (
+    <Stack
+      gap={3}
+    >
+      <div>
+        <h3 className="h5">
+          {intl.formatMessage(messages.detailsTabDescriptionTitle)}
+        </h3>
+        {!readOnly ? (
+          <textarea
+            className="form-control"
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            onBlur={onSubmit}
+          />
+        ) : collection.description}
+      </div>
+      <div>
+        <h3 className="h5">
+          {intl.formatMessage(messages.detailsTabStatsTitle)}
+        </h3>
+        <CollectionStatsWidget />
+      </div>
+      <hr className="w-100" />
+      <div>
+        <h3 className="h5">
+          {intl.formatMessage(messages.detailsTabHistoryTitle)}
+        </h3>
+        <HistoryWidget
+          created={collection.created ? new Date(collection.created) : null}
+          modified={collection.modified ? new Date(collection.modified) : null}
+        />
+      </div>
+    </Stack>
+  );
+};
+
+export default CollectionDetails;
diff --git a/src/library-authoring/collections/CollectionInfo.tsx b/src/library-authoring/collections/CollectionInfo.tsx
new file mode 100644
index 0000000000..10b2541353
--- /dev/null
+++ b/src/library-authoring/collections/CollectionInfo.tsx
@@ -0,0 +1,89 @@
+import { useIntl } from '@edx/frontend-platform/i18n';
+import {
+  Button,
+  Stack,
+  Tab,
+  Tabs,
+} from '@openedx/paragon';
+import { useCallback } from 'react';
+
+import { useComponentPickerContext } from '../common/context/ComponentPickerContext';
+import { useLibraryContext } from '../common/context/LibraryContext';
+import {
+  type CollectionInfoTab,
+  COLLECTION_INFO_TABS,
+  COMPONENT_INFO_TABS,
+  isCollectionInfoTab,
+  useSidebarContext,
+} from '../common/context/SidebarContext';
+import { useLibraryRoutes } from '../routes';
+import { ContentTagsDrawer } from '../../content-tags-drawer';
+import { buildCollectionUsageKey } from '../../generic/key-utils';
+import CollectionDetails from './CollectionDetails';
+import messages from './messages';
+
+const CollectionInfo = () => {
+  const intl = useIntl();
+
+  const { componentPickerMode } = useComponentPickerContext();
+  const { libraryId, setCollectionId } = useLibraryContext();
+  const { sidebarComponentInfo, setSidebarCurrentTab } = useSidebarContext();
+
+  const tab: CollectionInfoTab = (
+    sidebarComponentInfo?.currentTab && isCollectionInfoTab(sidebarComponentInfo.currentTab)
+  ) ? sidebarComponentInfo?.currentTab : COLLECTION_INFO_TABS.Manage;
+
+  const collectionId = sidebarComponentInfo?.id;
+  // istanbul ignore if: this should never happen
+  if (!collectionId) {
+    throw new Error('collectionId is required');
+  }
+
+  const collectionUsageKey = buildCollectionUsageKey(libraryId, collectionId);
+
+  const { insideCollection, navigateTo } = useLibraryRoutes();
+  const showOpenCollectionButton = !insideCollection || componentPickerMode;
+
+  const handleOpenCollection = useCallback(() => {
+    if (componentPickerMode) {
+      setCollectionId(collectionId);
+    } else {
+      navigateTo({ collectionId });
+    }
+  }, [componentPickerMode, navigateTo]);
+
+  return (
+    <Stack>
+      {showOpenCollectionButton && (
+        <div className="d-flex flex-wrap">
+          <Button
+            onClick={handleOpenCollection}
+            variant="outline-primary"
+            className="m-1 text-nowrap flex-grow-1"
+          >
+            {intl.formatMessage(messages.openCollectionButton)}
+          </Button>
+        </div>
+      )}
+      <Tabs
+        variant="tabs"
+        className="my-3 d-flex justify-content-around"
+        defaultActiveKey={COMPONENT_INFO_TABS.Manage}
+        activeKey={tab}
+        onSelect={setSidebarCurrentTab}
+      >
+        <Tab eventKey={COMPONENT_INFO_TABS.Manage} title={intl.formatMessage(messages.manageTabTitle)}>
+          <ContentTagsDrawer
+            id={collectionUsageKey}
+            variant="component"
+          />
+        </Tab>
+        <Tab eventKey={COMPONENT_INFO_TABS.Details} title={intl.formatMessage(messages.detailsTabTitle)}>
+          <CollectionDetails />
+        </Tab>
+      </Tabs>
+    </Stack>
+  );
+};
+
+export default CollectionInfo;
diff --git a/src/library-authoring/collections/CollectionInfoHeader.test.tsx b/src/library-authoring/collections/CollectionInfoHeader.test.tsx
new file mode 100644
index 0000000000..ac68680c83
--- /dev/null
+++ b/src/library-authoring/collections/CollectionInfoHeader.test.tsx
@@ -0,0 +1,174 @@
+import type MockAdapter from 'axios-mock-adapter';
+import userEvent from '@testing-library/user-event';
+
+import {
+  initializeMocks,
+  fireEvent,
+  render as baseRender,
+  screen,
+  waitFor,
+} from '../../testUtils';
+import { LibraryProvider } from '../common/context/LibraryContext';
+import { SidebarBodyComponentId, SidebarProvider } from '../common/context/SidebarContext';
+import { mockContentLibrary, mockGetCollectionMetadata } from '../data/api.mocks';
+import * as api from '../data/api';
+import CollectionInfoHeader from './CollectionInfoHeader';
+
+let axiosMock: MockAdapter;
+let mockShowToast: (message: string) => void;
+
+mockGetCollectionMetadata.applyMock();
+mockContentLibrary.applyMock();
+
+const {
+  libraryId: mockLibraryId,
+  libraryIdReadOnly,
+} = mockContentLibrary;
+
+const { collectionId } = mockGetCollectionMetadata;
+
+const render = (libraryId: string = mockLibraryId) => baseRender(<CollectionInfoHeader />, {
+  extraWrapper: ({ children }) => (
+    <LibraryProvider libraryId={libraryId}>
+      <SidebarProvider
+        initialSidebarComponentInfo={{
+          id: collectionId,
+          type: SidebarBodyComponentId.CollectionInfo,
+        }}
+      >
+        { children }
+      </SidebarProvider>
+    </LibraryProvider>
+  ),
+});
+
+describe('<CollectionInfoHeader />', () => {
+  beforeEach(() => {
+    const mocks = initializeMocks();
+    axiosMock = mocks.axiosMock;
+    mockShowToast = mocks.mockShowToast;
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+    axiosMock.restore();
+  });
+
+  it('should render Collection info Header', async () => {
+    render();
+    expect(await screen.findByText('Test Collection')).toBeInTheDocument();
+
+    expect(screen.getByRole('button', { name: /edit collection title/i })).toBeInTheDocument();
+  });
+
+  it('should not render edit title button without permission', async () => {
+    render(libraryIdReadOnly);
+    expect(await screen.findByText('Test Collection')).toBeInTheDocument();
+
+    expect(screen.queryByRole('button', { name: /edit collection title/i })).not.toBeInTheDocument();
+  });
+
+  it('should update collection title', async () => {
+    render();
+
+    expect(await screen.findByText('Test Collection')).toBeInTheDocument();
+
+    const url = api.getLibraryCollectionApiUrl(mockLibraryId, collectionId);
+    axiosMock.onPatch(url).reply(200);
+
+    fireEvent.click(screen.getByRole('button', { name: /edit collection title/i }));
+
+    const textBox = screen.getByRole('textbox', { name: /title input/i });
+
+    userEvent.clear(textBox);
+    userEvent.type(textBox, 'New Collection Title{enter}');
+
+    await waitFor(() => {
+      expect(axiosMock.history.patch[0].url).toEqual(url);
+      expect(axiosMock.history.patch[0].data).toEqual(JSON.stringify({ title: 'New Collection Title' }));
+    });
+
+    expect(textBox).not.toBeInTheDocument();
+    expect(mockShowToast).toHaveBeenCalledWith('Collection updated successfully.');
+  });
+
+  it('should not update collection title if title is the same', async () => {
+    render();
+    expect(await screen.findByText('Test Collection')).toBeInTheDocument();
+
+    const url = api.getLibraryCollectionApiUrl(mockLibraryId, collectionId);
+    axiosMock.onPatch(url).reply(200);
+
+    fireEvent.click(screen.getByRole('button', { name: /edit collection title/i }));
+
+    const textBox = screen.getByRole('textbox', { name: /title input/i });
+
+    userEvent.clear(textBox);
+    userEvent.type(textBox, `${mockGetCollectionMetadata.collectionData.title}{enter}`);
+
+    await waitFor(() => expect(axiosMock.history.patch.length).toEqual(0));
+
+    expect(textBox).not.toBeInTheDocument();
+  });
+
+  it('should not update collection title if title is empty', async () => {
+    render();
+    expect(await screen.findByText('Test Collection')).toBeInTheDocument();
+
+    const url = api.getLibraryCollectionApiUrl(mockLibraryId, collectionId);
+    axiosMock.onPatch(url).reply(200);
+
+    fireEvent.click(screen.getByRole('button', { name: /edit collection title/i }));
+
+    const textBox = screen.getByRole('textbox', { name: /title input/i });
+
+    userEvent.clear(textBox);
+    userEvent.type(textBox, '{enter}');
+
+    await waitFor(() => expect(axiosMock.history.patch.length).toEqual(0));
+
+    expect(textBox).not.toBeInTheDocument();
+  });
+
+  it('should close edit collection title on press Escape', async () => {
+    render();
+    expect(await screen.findByText('Test Collection')).toBeInTheDocument();
+
+    const url = api.getLibraryCollectionApiUrl(mockLibraryId, collectionId);
+    axiosMock.onPatch(url).reply(200);
+
+    fireEvent.click(screen.getByRole('button', { name: /edit collection title/i }));
+
+    const textBox = screen.getByRole('textbox', { name: /title input/i });
+
+    userEvent.clear(textBox);
+    userEvent.type(textBox, 'New Collection Title{esc}');
+
+    await waitFor(() => expect(axiosMock.history.patch.length).toEqual(0));
+
+    expect(textBox).not.toBeInTheDocument();
+  });
+
+  it('should show error on edit collection title', async () => {
+    render();
+    expect(await screen.findByText('Test Collection')).toBeInTheDocument();
+
+    const url = api.getLibraryCollectionApiUrl(mockLibraryId, collectionId);
+    axiosMock.onPatch(url).reply(500);
+
+    fireEvent.click(screen.getByRole('button', { name: /edit collection title/i }));
+
+    const textBox = screen.getByRole('textbox', { name: /title input/i });
+
+    userEvent.clear(textBox);
+    userEvent.type(textBox, 'New Collection Title{enter}');
+
+    await waitFor(() => {
+      expect(axiosMock.history.patch[0].url).toEqual(url);
+      expect(axiosMock.history.patch[0].data).toEqual(JSON.stringify({ title: 'New Collection Title' }));
+    });
+
+    expect(textBox).not.toBeInTheDocument();
+    expect(mockShowToast).toHaveBeenCalledWith('Failed to update collection.');
+  });
+});
diff --git a/src/library-authoring/collections/CollectionInfoHeader.tsx b/src/library-authoring/collections/CollectionInfoHeader.tsx
new file mode 100644
index 0000000000..77fd7d74b7
--- /dev/null
+++ b/src/library-authoring/collections/CollectionInfoHeader.tsx
@@ -0,0 +1,106 @@
+import React, { useState, useContext, useCallback } from 'react';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import {
+  Icon,
+  IconButton,
+  Stack,
+  Form,
+} from '@openedx/paragon';
+import { Edit } from '@openedx/paragon/icons';
+
+import { ToastContext } from '../../generic/toast-context';
+import { useLibraryContext } from '../common/context/LibraryContext';
+import { useSidebarContext } from '../common/context/SidebarContext';
+import { useCollection, useUpdateCollection } from '../data/apiHooks';
+import messages from './messages';
+
+const CollectionInfoHeader = () => {
+  const intl = useIntl();
+  const [inputIsActive, setIsActive] = useState(false);
+
+  const { libraryId, readOnly } = useLibraryContext();
+  const { sidebarComponentInfo } = useSidebarContext();
+
+  const collectionId = sidebarComponentInfo?.id;
+  // istanbul ignore if: this should never happen
+  if (!collectionId) {
+    throw new Error('collectionId is required');
+  }
+
+  const { data: collection } = useCollection(libraryId, collectionId);
+
+  const updateMutation = useUpdateCollection(libraryId, collectionId);
+  const { showToast } = useContext(ToastContext);
+
+  const handleSaveDisplayName = useCallback(
+    (event) => {
+      const newTitle = event.target.value;
+      if (newTitle && newTitle !== collection?.title) {
+        updateMutation.mutateAsync({
+          title: newTitle,
+        }).then(() => {
+          showToast(intl.formatMessage(messages.updateCollectionSuccessMsg));
+        }).catch(() => {
+          showToast(intl.formatMessage(messages.updateCollectionErrorMsg));
+        }).finally(() => {
+          setIsActive(false);
+        });
+      } else {
+        setIsActive(false);
+      }
+    },
+    [collection, showToast, intl],
+  );
+
+  if (!collection) {
+    return null;
+  }
+
+  const handleClick = () => {
+    setIsActive(true);
+  };
+
+  const handleOnKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Enter') {
+      handleSaveDisplayName(event);
+    } else if (event.key === 'Escape') {
+      setIsActive(false);
+    }
+  };
+
+  return (
+    <Stack direction="horizontal">
+      {inputIsActive
+        ? (
+          <Form.Control
+            autoFocus
+            name="title"
+            id="title"
+            type="text"
+            aria-label="Title input"
+            defaultValue={collection.title}
+            onBlur={handleSaveDisplayName}
+            onKeyDown={handleOnKeyDown}
+          />
+        )
+        : (
+          <>
+            <span className="font-weight-bold m-1.5">
+              {collection.title}
+            </span>
+            {!readOnly && (
+              <IconButton
+                src={Edit}
+                iconAs={Icon}
+                alt={intl.formatMessage(messages.editTitleButtonAlt)}
+                onClick={handleClick}
+                size="inline"
+              />
+            )}
+          </>
+        )}
+    </Stack>
+  );
+};
+
+export default CollectionInfoHeader;
diff --git a/src/library-authoring/collections/LibraryCollectionComponents.tsx b/src/library-authoring/collections/LibraryCollectionComponents.tsx
new file mode 100644
index 0000000000..6fcd79aa5c
--- /dev/null
+++ b/src/library-authoring/collections/LibraryCollectionComponents.tsx
@@ -0,0 +1,33 @@
+import { Stack } from '@openedx/paragon';
+import { NoComponents, NoSearchResults } from '../EmptyStates';
+import { useSearchContext } from '../../search-manager';
+import messages from './messages';
+import { useSidebarContext } from '../common/context/SidebarContext';
+import LibraryContent from '../LibraryContent';
+import { ContentType } from '../routes';
+
+const LibraryCollectionComponents = () => {
+  const { totalHits: componentCount, isFiltered } = useSearchContext();
+  const { openAddContentSidebar } = useSidebarContext();
+
+  if (componentCount === 0) {
+    return isFiltered
+      ? <NoSearchResults infoText={messages.noSearchResultsInCollection} />
+      : (
+        <NoComponents
+          infoText={messages.noComponentsInCollection}
+          addBtnText={messages.addComponentsInCollection}
+          handleBtnClick={openAddContentSidebar}
+        />
+      );
+  }
+
+  return (
+    <Stack direction="vertical" gap={3}>
+      <h3 className="text-gray">Content ({componentCount})</h3>
+      <LibraryContent contentType={ContentType.collections} />
+    </Stack>
+  );
+};
+
+export default LibraryCollectionComponents;
diff --git a/src/library-authoring/collections/LibraryCollectionPage.test.tsx b/src/library-authoring/collections/LibraryCollectionPage.test.tsx
new file mode 100644
index 0000000000..1d15837a81
--- /dev/null
+++ b/src/library-authoring/collections/LibraryCollectionPage.test.tsx
@@ -0,0 +1,378 @@
+import fetchMock from 'fetch-mock-jest';
+import { cloneDeep } from 'lodash';
+import MockAdapter from 'axios-mock-adapter/types';
+
+import {
+  fireEvent,
+  initializeMocks,
+  render,
+  screen,
+  waitFor,
+  within,
+} from '../../testUtils';
+import mockResult from '../__mocks__/collection-search.json';
+import {
+  mockContentLibrary,
+  mockXBlockFields,
+  mockGetCollectionMetadata,
+} from '../data/api.mocks';
+import { mockContentSearchConfig, mockGetBlockTypes } from '../../search-manager/data/api.mock';
+import { mockBroadcastChannel, mockClipboardEmpty } from '../../generic/data/api.mock';
+import { LibraryLayout } from '..';
+import { ContentTagsDrawer } from '../../content-tags-drawer';
+import { getLibraryCollectionComponentApiUrl } from '../data/api';
+
+let axiosMock: MockAdapter;
+let mockShowToast;
+
+mockClipboardEmpty.applyMock();
+mockGetCollectionMetadata.applyMock();
+mockContentSearchConfig.applyMock();
+mockGetBlockTypes.applyMock();
+mockContentLibrary.applyMock();
+mockXBlockFields.applyMock();
+mockBroadcastChannel();
+
+const searchEndpoint = 'http://mock.meilisearch.local/multi-search';
+const path = '/library/:libraryId/*';
+const libraryTitle = mockContentLibrary.libraryData.title;
+const mockCollection = {
+  collectionId: mockResult.results[0].hits[5].block_id,
+  collectionNeverLoads: mockGetCollectionMetadata.collectionIdLoading,
+  collectionNoComponents: 'collection-no-components',
+  collectionEmpty: mockGetCollectionMetadata.collectionIdError,
+};
+
+const { title } = mockGetCollectionMetadata.collectionData;
+jest.mock('../../content-tags-drawer/ContentTagsDrawer', () => jest.fn(() => <div>Mocked ContentTagsDrawer</div>));
+
+describe('<LibraryCollectionPage />', () => {
+  beforeEach(() => {
+    const mocks = initializeMocks();
+    axiosMock = mocks.axiosMock;
+    mockShowToast = mocks.mockShowToast;
+    fetchMock.mockReset();
+
+    // The Meilisearch client-side API uses fetch, not Axios.
+    fetchMock.post(searchEndpoint, (_url, req) => {
+      const requestData = JSON.parse(req.body?.toString() ?? '');
+      const query = requestData?.queries[0]?.q ?? '';
+      const mockResultCopy = cloneDeep(mockResult);
+      // We have to replace the query (search keywords) in the mock results with the actual query,
+      // because otherwise Instantsearch will update the UI and change the query,
+      // leading to unexpected results in the test cases.
+      mockResultCopy.results[0].query = query;
+      // And fake the required '_formatted' fields; it contains the highlighting <mark>...</mark> around matched words
+      // eslint-disable-next-line no-underscore-dangle, no-param-reassign
+      mockResultCopy.results[0]?.hits.forEach((hit) => { hit._formatted = { ...hit }; });
+      const collectionQueryId = requestData?.queries[0]?.filter?.[2]?.split('collections.key = "')[1].split('"')[0];
+      switch (collectionQueryId) {
+        case mockCollection.collectionNeverLoads:
+          return new Promise<any>(() => {});
+        case mockCollection.collectionEmpty:
+          mockResultCopy.results[0].hits = [];
+          mockResultCopy.results[0].totalHits = 0;
+          break;
+        case mockCollection.collectionNoComponents:
+          mockResultCopy.results[0].hits = [];
+          mockResultCopy.results[0].totalHits = 0;
+          mockResultCopy.results[1].facetDistribution.block_type = {};
+          break;
+        default:
+          break;
+      }
+      return mockResultCopy;
+    });
+  });
+
+  const renderLibraryCollectionPage = async (collectionId?: string, libraryId?: string) => {
+    const libId = libraryId || mockContentLibrary.libraryId;
+    const colId = collectionId || mockCollection.collectionId;
+    render(<LibraryLayout />, {
+      path,
+      routerProps: {
+        initialEntries: [`/library/${libId}/collection/${colId}`],
+      },
+    });
+
+    if (![mockCollection.collectionNeverLoads, mockCollection.collectionEmpty].includes(colId)) {
+      await waitFor(() => { expect(fetchMock).toHaveFetchedTimes(1, searchEndpoint, 'post'); });
+    }
+  };
+
+  it('shows the spinner before the query is complete', async () => {
+    // This mock will never return data about the collection (it loads forever):
+    await renderLibraryCollectionPage(mockCollection.collectionNeverLoads);
+    const spinner = screen.getByRole('status');
+    expect(spinner.textContent).toEqual('Loading...');
+  });
+
+  it('shows an error component if no collection returned', async () => {
+    // This mock will simulate incorrect collection id
+    await renderLibraryCollectionPage(mockCollection.collectionEmpty);
+    expect(await screen.findByText(/Mocked request failed with status code 404./)).toBeInTheDocument();
+  });
+
+  it('shows collection data', async () => {
+    await renderLibraryCollectionPage();
+    expect(await screen.findByText('All Collections')).toBeInTheDocument();
+    expect((await screen.findAllByText(libraryTitle))[0]).toBeInTheDocument();
+    expect((await screen.findAllByText(title))[0]).toBeInTheDocument();
+
+    // "Recently Modified" sort shown
+    expect(screen.getAllByText('Recently Modified').length).toEqual(1);
+
+    expect((await screen.findAllByText('Introduction to Testing'))[0]).toBeInTheDocument();
+    // Content header with count
+    expect(await screen.findByText('Content (5)')).toBeInTheDocument();
+  });
+
+  it('shows a collection without associated components', async () => {
+    await renderLibraryCollectionPage(mockCollection.collectionNoComponents);
+
+    expect(await screen.findByText('All Collections')).toBeInTheDocument();
+    expect((await screen.findAllByText(libraryTitle))[0]).toBeInTheDocument();
+    expect((await screen.findAllByText(title))[0]).toBeInTheDocument();
+
+    expect(screen.getAllByText('This collection is currently empty.').length).toEqual(2);
+
+    const addComponentButton = screen.getAllByRole('button', { name: /new/i })[1];
+    fireEvent.click(addComponentButton);
+    expect(screen.getByText(/add content/i)).toBeInTheDocument();
+  });
+
+  it('shows the new content button', async () => {
+    await renderLibraryCollectionPage();
+
+    expect(await screen.findByText('All Collections')).toBeInTheDocument();
+    expect(await screen.findByText('Content (5)')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /new/i })).toBeInTheDocument();
+    expect(screen.queryByText('Read Only')).not.toBeInTheDocument();
+  });
+
+  it('shows an empty read-only library collection, without a new button', async () => {
+    // Use a library mock that is read-only:
+    const libraryId = mockContentLibrary.libraryIdReadOnly;
+    // Update search mock so it returns no results:
+    await renderLibraryCollectionPage(mockCollection.collectionNoComponents, libraryId);
+
+    expect(await screen.findByText('All Collections')).toBeInTheDocument();
+
+    // Show in the collection page and in the sidebar
+    expect(screen.getAllByText('This collection is currently empty.').length).toEqual(2);
+
+    expect(screen.queryByRole('button', { name: /new/i })).not.toBeInTheDocument();
+    expect(screen.getByText('Read Only')).toBeInTheDocument();
+  });
+
+  it('show a collection without search results', async () => {
+    // Update search mock so it returns no results:
+    await renderLibraryCollectionPage(mockCollection.collectionNoComponents);
+
+    expect(await screen.findByText('All Collections')).toBeInTheDocument();
+    expect((await screen.findAllByText(libraryTitle))[0]).toBeInTheDocument();
+    expect((await screen.findAllByText(title))[0]).toBeInTheDocument();
+
+    fireEvent.change(screen.getByRole('searchbox'), { target: { value: 'noresults' } });
+
+    // Ensure the search endpoint is called again, only once more since the recently modified call
+    // should not be impacted by the search
+    await waitFor(() => { expect(fetchMock).toHaveFetchedTimes(2, searchEndpoint, 'post'); });
+
+    expect(screen.queryByText('No matching components found in this collection.')).toBeInTheDocument();
+  });
+
+  it('should open and close new content sidebar', async () => {
+    await renderLibraryCollectionPage();
+
+    expect(await screen.findByText('All Collections')).toBeInTheDocument();
+    expect(screen.queryByText(/add content/i)).not.toBeInTheDocument();
+
+    const newButton = screen.getByRole('button', { name: /new/i });
+    fireEvent.click(newButton);
+
+    expect(screen.getByText(/add content/i)).toBeInTheDocument();
+
+    const closeButton = screen.getByRole('button', { name: /close/i });
+    fireEvent.click(closeButton);
+
+    expect(screen.queryByText(/add content/i)).not.toBeInTheDocument();
+  });
+
+  it('should open collection Info by default', async () => {
+    const expectedCollectionUsageKey = 'lib-collection:Axim:TEST:my-first-collection';
+
+    await renderLibraryCollectionPage();
+
+    expect(await screen.findByText('All Collections')).toBeInTheDocument();
+    expect((await screen.findAllByText(libraryTitle))[0]).toBeInTheDocument();
+    expect((await screen.findAllByText(title))[0]).toBeInTheDocument();
+    expect((await screen.findAllByText(title))[1]).toBeInTheDocument();
+
+    expect(screen.getByText('Manage')).toBeInTheDocument();
+    expect(screen.getByText('Details')).toBeInTheDocument();
+    expect(screen.getByText('Mocked ContentTagsDrawer')).toBeInTheDocument();
+    expect(ContentTagsDrawer).toHaveBeenCalledWith(
+      expect.objectContaining({
+        id: expectedCollectionUsageKey,
+      }),
+      {},
+    );
+  });
+
+  it('should close and open Collection Info', async () => {
+    const expectedCollectionUsageKey = 'lib-collection:Axim:TEST:my-first-collection';
+
+    await renderLibraryCollectionPage();
+
+    expect(await screen.findByText('All Collections')).toBeInTheDocument();
+    expect((await screen.findAllByText(libraryTitle))[0]).toBeInTheDocument();
+    expect((await screen.findAllByText(title))[0]).toBeInTheDocument();
+    expect((await screen.findAllByText(title))[1]).toBeInTheDocument();
+
+    // Open by default; close the library info sidebar
+    const closeButton = screen.getByRole('button', { name: /close/i });
+    fireEvent.click(closeButton);
+    expect(screen.queryByText('Draft')).not.toBeInTheDocument();
+    expect(screen.queryByText('(Never Published)')).not.toBeInTheDocument();
+
+    // Open library info sidebar with 'Library info' button
+    const collectionInfoBtn = screen.getByRole('button', { name: /collection info/i });
+    fireEvent.click(collectionInfoBtn);
+    expect(screen.getByText('Manage')).toBeInTheDocument();
+    expect(screen.getByText('Details')).toBeInTheDocument();
+    expect(screen.getByText('Mocked ContentTagsDrawer')).toBeInTheDocument();
+    expect(ContentTagsDrawer).toHaveBeenCalledWith(
+      expect.objectContaining({
+        id: expectedCollectionUsageKey,
+      }),
+      {},
+    );
+  });
+
+  it('sorts collection components', async () => {
+    await renderLibraryCollectionPage();
+
+    expect(await screen.findByTitle('Sort search results')).toBeInTheDocument();
+
+    const testSortOption = (async (optionText, sortBy, isDefault) => {
+      // Open the drop-down menu
+      fireEvent.click(screen.getByTitle('Sort search results'));
+
+      // Click the option with the given text
+      // Since the sort drop-down also shows the selected sort
+      // option in its toggle button, we need to make sure we're
+      // clicking on the last one found.
+      const options = screen.getAllByText(optionText);
+      expect(options.length).toBeGreaterThan(0);
+      fireEvent.click(options[options.length - 1]);
+
+      // Did the search happen with the expected sort option?
+      const bodyText = sortBy ? `"sort":["${sortBy}"]` : '"sort":[]';
+      await waitFor(() => {
+        expect(fetchMock).toHaveBeenLastCalledWith(searchEndpoint, {
+          body: expect.stringContaining(bodyText),
+          method: 'POST',
+          headers: expect.anything(),
+        });
+      });
+
+      // Is the sort option stored in the query string?
+      // Note: we can't easily check this at the moment with <MemoryRouter>
+      // const searchText = isDefault ? '' : `?sort=${encodeURIComponent(sortBy)}`;
+      // expect(window.location.href).toEqual(searchText);
+
+      // Is the selected sort option shown in the toggle button (if not default)
+      // as well as in the drop-down menu?
+      expect(screen.getAllByText(optionText).length).toEqual(isDefault ? 1 : 2);
+    });
+
+    await testSortOption('Title, A-Z', 'display_name:asc', false);
+    await testSortOption('Title, Z-A', 'display_name:desc', false);
+    await testSortOption('Newest', 'created:desc', false);
+    await testSortOption('Oldest', 'created:asc', false);
+
+    // Sorting by Recently Published also excludes unpublished components
+    await testSortOption('Recently Published', 'last_published:desc', false);
+    await waitFor(() => {
+      expect(fetchMock).toHaveBeenLastCalledWith(searchEndpoint, {
+        body: expect.stringContaining('last_published IS NOT NULL'),
+        method: 'POST',
+        headers: expect.anything(),
+      });
+    });
+
+    // Re-selecting the previous sort option resets sort to default "Recently Modified"
+    await testSortOption('Recently Published', 'modified:desc', true);
+    expect(screen.getAllByText('Recently Modified').length).toEqual(2);
+
+    // Enter a keyword into the search box
+    const searchBox = await screen.findByRole('searchbox');
+    fireEvent.change(searchBox, { target: { value: 'words to find' } });
+
+    // Default sort option changes to "Most Relevant"
+    expect(screen.getAllByText('Most Relevant').length).toEqual(2);
+    await waitFor(() => {
+      expect(fetchMock).toHaveBeenLastCalledWith(searchEndpoint, {
+        body: expect.stringContaining('"sort":[]'),
+        method: 'POST',
+        headers: expect.anything(),
+      });
+    });
+  });
+
+  it('should open and close the component sidebar', async () => {
+    const mockResult0 = mockResult.results[0].hits[0];
+    const displayName = 'Introduction to Testing';
+    expect(mockResult0.display_name).toStrictEqual(displayName);
+    await renderLibraryCollectionPage();
+
+    fireEvent.click((await screen.findAllByText(displayName))[0]);
+
+    const sidebar = screen.getByTestId('library-sidebar');
+
+    const { getByRole, getByText } = within(sidebar);
+
+    await waitFor(() => expect(getByText(displayName)).toBeInTheDocument());
+
+    const closeButton = getByRole('button', { name: /close/i });
+    fireEvent.click(closeButton);
+
+    await waitFor(() => expect(screen.queryByTestId('library-sidebar')).not.toBeInTheDocument());
+  });
+
+  it('has an empty type filter when there are no results', async () => {
+    await renderLibraryCollectionPage(mockCollection.collectionNoComponents);
+
+    const filterButton = screen.getByRole('button', { name: /type/i });
+    fireEvent.click(filterButton);
+
+    expect(screen.getByText(/no matching components/i)).toBeInTheDocument();
+  });
+
+  it('should remove component from collection and hides sidebar', async () => {
+    const url = getLibraryCollectionComponentApiUrl(
+      mockContentLibrary.libraryId,
+      mockCollection.collectionId,
+    );
+    axiosMock.onDelete(url).reply(204);
+    const displayName = 'Introduction to Testing';
+    await renderLibraryCollectionPage();
+
+    // open sidebar
+    fireEvent.click(await screen.findByText(displayName));
+    await waitFor(() => expect(screen.queryByTestId('library-sidebar')).toBeInTheDocument());
+
+    const menuBtns = await screen.findAllByRole('button', { name: 'Component actions menu' });
+    // open menu
+    fireEvent.click(menuBtns[0]);
+
+    fireEvent.click(await screen.findByText('Remove from collection'));
+    await waitFor(() => {
+      expect(axiosMock.history.delete.length).toEqual(1);
+      expect(mockShowToast).toHaveBeenCalledWith('Component successfully removed');
+    });
+    // Should close sidebar as component was removed
+    await waitFor(() => expect(screen.queryByTestId('library-sidebar')).not.toBeInTheDocument());
+  });
+});
diff --git a/src/library-authoring/collections/LibraryCollectionPage.tsx b/src/library-authoring/collections/LibraryCollectionPage.tsx
new file mode 100644
index 0000000000..ac5277e1ca
--- /dev/null
+++ b/src/library-authoring/collections/LibraryCollectionPage.tsx
@@ -0,0 +1,236 @@
+import { useCallback, useEffect } from 'react';
+import { StudioFooter } from '@edx/frontend-component-footer';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import {
+  Badge,
+  Button,
+  Breadcrumb,
+  Container,
+  Icon,
+  IconButton,
+  Stack,
+} from '@openedx/paragon';
+import { Add, ArrowBack, InfoOutline } from '@openedx/paragon/icons';
+import { Link } from 'react-router-dom';
+
+import { useLibraryRoutes } from '../routes';
+import Loading from '../../generic/Loading';
+import ErrorAlert from '../../generic/alert-error';
+import SubHeader from '../../generic/sub-header/SubHeader';
+import Header from '../../header';
+import NotFoundAlert from '../../generic/NotFoundAlert';
+import {
+  ClearFiltersButton,
+  FilterByBlockType,
+  FilterByTags,
+  SearchContextProvider,
+  SearchKeywordsField,
+  SearchSortWidget,
+} from '../../search-manager';
+import { useCollection, useContentLibrary } from '../data/apiHooks';
+import { useComponentPickerContext } from '../common/context/ComponentPickerContext';
+import { useLibraryContext } from '../common/context/LibraryContext';
+import { useSidebarContext } from '../common/context/SidebarContext';
+import messages from './messages';
+import { LibrarySidebar } from '../library-sidebar';
+import LibraryCollectionComponents from './LibraryCollectionComponents';
+
+const HeaderActions = () => {
+  const intl = useIntl();
+  const { readOnly } = useLibraryContext();
+  const { openAddContentSidebar } = useSidebarContext();
+
+  if (readOnly) {
+    return null;
+  }
+
+  return (
+    <div className="header-actions">
+      <Button
+        className="ml-1"
+        iconBefore={Add}
+        variant="primary rounded-0"
+        onClick={openAddContentSidebar}
+      >
+        {intl.formatMessage(messages.newContentButton)}
+      </Button>
+    </div>
+  );
+};
+
+const SubHeaderTitle = ({
+  title,
+  infoClickHandler,
+}: {
+  title: string;
+  infoClickHandler: () => void;
+}) => {
+  const intl = useIntl();
+
+  const { componentPickerMode } = useComponentPickerContext();
+  const { readOnly } = useLibraryContext();
+
+  const showReadOnlyBadge = readOnly && !componentPickerMode;
+
+  return (
+    <Stack direction="vertical">
+      <Stack direction="horizontal" gap={2}>
+        {title}
+        <IconButton
+          src={InfoOutline}
+          iconAs={Icon}
+          alt={intl.formatMessage(messages.collectionInfoButton)}
+          onClick={infoClickHandler}
+          variant="primary"
+        />
+      </Stack>
+      {showReadOnlyBadge && (
+        <div>
+          <Badge variant="primary" style={{ fontSize: '50%' }}>
+            {intl.formatMessage(messages.readOnlyBadge)}
+          </Badge>
+        </div>
+      )}
+    </Stack>
+  );
+};
+
+const LibraryCollectionPage = () => {
+  const intl = useIntl();
+
+  const { libraryId, collectionId } = useLibraryContext();
+
+  if (!collectionId || !libraryId) {
+    // istanbul ignore next - This shouldn't be possible; it's just here to satisfy the type checker.
+    throw new Error('Rendered without collectionId or libraryId URL parameter');
+  }
+
+  const { componentPickerMode } = useComponentPickerContext();
+  const { showOnlyPublished, setCollectionId, componentId } = useLibraryContext();
+  const { sidebarComponentInfo, openCollectionInfoSidebar, openInfoSidebar } = useSidebarContext();
+
+  const {
+    data: collectionData,
+    isLoading,
+    isError,
+    error,
+  } = useCollection(libraryId, collectionId);
+
+  const { navigateTo } = useLibraryRoutes();
+  const openCollection = useCallback(() => {
+    openCollectionInfoSidebar(collectionId);
+    navigateTo({ collectionId });
+  }, [navigateTo, openCollectionInfoSidebar]);
+
+  useEffect(() => {
+    openInfoSidebar(componentId, collectionId);
+  }, []);
+
+  const { data: libraryData, isLoading: isLibLoading } = useContentLibrary(libraryId);
+
+  // Only show loading if collection data is not fetched from index yet
+  // Loading info for search results will be handled by LibraryCollectionComponents component.
+  if (isLibLoading || isLoading) {
+    return <Loading />;
+  }
+
+  if (!libraryData) {
+    return <NotFoundAlert />;
+  }
+
+  if (isError) {
+    return <ErrorAlert error={error} />;
+  }
+
+  const breadcumbs = !componentPickerMode ? (
+    <Breadcrumb
+      ariaLabel={intl.formatMessage(messages.breadcrumbsAriaLabel)}
+      links={[
+        {
+          label: libraryData.title,
+          to: `/library/${libraryId}`,
+        },
+        {
+          label: intl.formatMessage(messages.allCollections),
+          to: `/library/${libraryId}/collections`,
+        },
+        // Adding empty breadcrumb to add the last `>` spacer.
+        {
+          label: '',
+          to: '',
+        },
+      ]}
+      linkAs={Link}
+    />
+  ) : (
+    <Breadcrumb
+      ariaLabel={intl.formatMessage(messages.breadcrumbsAriaLabel)}
+      links={[
+        {
+          label: '',
+          to: '',
+        },
+        {
+          label: intl.formatMessage(messages.returnToLibrary),
+          onClick: () => { setCollectionId(undefined); },
+        },
+      ]}
+      spacer={<Icon src={ArrowBack} size="sm" />}
+      linkAs={Link}
+    />
+  );
+
+  const extraFilter = [`context_key = "${libraryId}"`, `collections.key = "${collectionId}"`];
+  if (showOnlyPublished) {
+    extraFilter.push('last_published IS NOT NULL');
+  }
+
+  return (
+    <div className="d-flex">
+      <div className="flex-grow-1">
+        {!componentPickerMode && (
+          <Header
+            number={libraryData.slug}
+            title={libraryData.title}
+            org={libraryData.org}
+            contextId={libraryId}
+            isLibrary
+          />
+        )}
+        <Container size="xl" className="px-4 mt-4 mb-5 library-authoring-page">
+          <SearchContextProvider
+            extraFilter={extraFilter}
+          >
+            <SubHeader
+              title={(
+                <SubHeaderTitle
+                  title={collectionData.title}
+                  infoClickHandler={openCollection}
+                />
+              )}
+              breadcrumbs={breadcumbs}
+              headerActions={<HeaderActions />}
+            />
+            <SearchKeywordsField className="w-50" placeholder={intl.formatMessage(messages.searchPlaceholder)} />
+            <div className="d-flex mt-3 mb-4 align-items-center">
+              <FilterByTags />
+              <FilterByBlockType />
+              <ClearFiltersButton />
+              <div className="flex-grow-1" />
+              <SearchSortWidget />
+            </div>
+            <LibraryCollectionComponents />
+          </SearchContextProvider>
+        </Container>
+        <StudioFooter />
+      </div>
+      {!!sidebarComponentInfo?.type && (
+        <div className="library-authoring-sidebar box-shadow-left-1 bg-white" data-testid="library-sidebar">
+          <LibrarySidebar />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default LibraryCollectionPage;
diff --git a/src/library-authoring/collections/index.tsx b/src/library-authoring/collections/index.tsx
new file mode 100644
index 0000000000..dc3ec3a47d
--- /dev/null
+++ b/src/library-authoring/collections/index.tsx
@@ -0,0 +1,2 @@
+export { default as CollectionInfo } from './CollectionInfo';
+export { default as CollectionInfoHeader } from './CollectionInfoHeader';
diff --git a/src/library-authoring/collections/messages.ts b/src/library-authoring/collections/messages.ts
new file mode 100644
index 0000000000..1dfaecd4a1
--- /dev/null
+++ b/src/library-authoring/collections/messages.ts
@@ -0,0 +1,136 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  openCollectionButton: {
+    id: 'course-authoring.library-authoring.collections-sidebbar.open-button',
+    defaultMessage: 'Open',
+    description: 'Button text to open collection',
+  },
+  manageTabTitle: {
+    id: 'course-authoring.library-authoring.collections-sidebar.manage-tab.title',
+    defaultMessage: 'Manage',
+    description: 'Title for manage tab',
+  },
+  detailsTabTitle: {
+    id: 'course-authoring.library-authoring.collections-sidebar.details-tab.title',
+    defaultMessage: 'Details',
+    description: 'Title for details tab',
+  },
+  detailsTabDescriptionTitle: {
+    id: 'course-authoring.library-authoring.collections-sidebar.details-tab.description-title',
+    defaultMessage: 'Description / Card Preview Text',
+    description: 'Title for the Description container in the details tab',
+  },
+  detailsTabDescriptionPlaceholder: {
+    id: 'course-authoring.library-authoring.collections-sidebar.details-tab.description-placeholder',
+    defaultMessage: 'Add description',
+    description: 'Placeholder for the Description container in the details tab',
+  },
+  detailsTabStatsTitle: {
+    id: 'course-authoring.library-authoring.collections-sidebar.details-tab.stats-title',
+    defaultMessage: 'Collection Stats',
+    description: 'Title for the Collection Stats container in the details tab',
+  },
+  detailsTabStatsNoComponents: {
+    id: 'course-authoring.library-authoring.collections-sidebar.details-tab.stats-no-components',
+    defaultMessage: 'This collection is currently empty.',
+    description: 'Message displayed when no components are found in the Collection Stats container',
+  },
+  detailsTabStatsTotalComponents: {
+    id: 'course-authoring.library-authoring.collections-sidebar.details-tab.stats-total-components',
+    defaultMessage: 'Total ',
+    description: 'Label for total components in the Collection Stats container',
+  },
+  detailsTabStatsOtherComponents: {
+    id: 'course-authoring.library-authoring.collections-sidebar.details-tab.stats-other-components',
+    defaultMessage: 'Other',
+    description: 'Label for other components in the Collection Stats container',
+  },
+  detailsTabHistoryTitle: {
+    id: 'course-authoring.library-authoring.collections-sidebar.details-tab.history-title',
+    defaultMessage: 'Collection History',
+    description: 'Title for the Collection History container in the details tab',
+  },
+  noComponentsInCollection: {
+    id: 'course-authoring.library-authoring.collections-pag.no-components.text',
+    defaultMessage: 'This collection is currently empty.',
+    description: 'Text to display when collection has no associated components',
+  },
+  addComponentsInCollection: {
+    id: 'course-authoring.library-authoring.collections-pag.add-components.btn-text',
+    defaultMessage: 'New',
+    description: 'Text to display in new button if no components in collection is found',
+  },
+  noSearchResultsInCollection: {
+    id: 'course-authoring.library-authoring.collections-pag.no-search-results.text',
+    defaultMessage: 'No matching components found in this collection.',
+    description: 'Message displayed when no matching components are found in collection',
+  },
+  newContentButton: {
+    id: 'course-authoring.library-authoring.collections.buttons.new-content.text',
+    defaultMessage: 'New',
+    description: 'Text of button to open "Add content drawer" in collections page',
+  },
+  collectionInfoButton: {
+    id: 'course-authoring.library-authoring.buttons.collection-info.alt-text',
+    defaultMessage: 'Collection Info',
+    description: 'Alt text for collection info button besides the collection title',
+  },
+  readOnlyBadge: {
+    id: 'course-authoring.library-authoring.collections.badge.read-only',
+    defaultMessage: 'Read Only',
+    description: 'Text in badge when the user has read only access in collections page',
+  },
+  allCollections: {
+    id: 'course-authoring.library-authoring.all-collections.text',
+    defaultMessage: 'All Collections',
+    description: 'Breadcrumbs text to navigate back to all collections',
+  },
+  breadcrumbsAriaLabel: {
+    id: 'course-authoring.library-authoring.breadcrumbs.label.text',
+    defaultMessage: 'Navigation breadcrumbs',
+    description: 'Aria label for navigation breadcrumbs',
+  },
+  searchPlaceholder: {
+    id: 'course-authoring.library-authoring.search.placeholder.text',
+    defaultMessage: 'Search Collection',
+    description: 'Search placeholder text in collections page.',
+  },
+  noSearchResultsCollections: {
+    id: 'course-authoring.library-authoring.no-search-results-collections',
+    defaultMessage: 'No matching collections found in this library.',
+    description: 'Message displayed when no matching collections are found',
+  },
+  noCollections: {
+    id: 'course-authoring.library-authoring.no-collections',
+    defaultMessage: 'You have not added any collections to this library yet.',
+    description: 'Message displayed when the library has no collections',
+  },
+  addCollection: {
+    id: 'course-authoring.library-authoring.add-collection',
+    defaultMessage: 'Add collection',
+    description: 'Button text to add a new collection',
+  },
+  updateCollectionSuccessMsg: {
+    id: 'course-authoring.library-authoring.update-collection-success-msg',
+    defaultMessage: 'Collection updated successfully.',
+    description: 'Message displayed when collection is updated successfully',
+  },
+  updateCollectionErrorMsg: {
+    id: 'course-authoring.library-authoring.update-collection-error-msg',
+    defaultMessage: 'Failed to update collection.',
+    description: 'Message displayed when collection update fails',
+  },
+  editTitleButtonAlt: {
+    id: 'course-authoring.library-authoring.collection.sidebar.edit-name.alt',
+    defaultMessage: 'Edit collection title',
+    description: 'Alt text for edit collection title icon button',
+  },
+  returnToLibrary: {
+    id: 'course-authoring.library-authoring.collection.component-picker.return-to-library',
+    defaultMessage: 'Back to Library',
+    description: 'Breadcrumbs link to return to library',
+  },
+});
+
+export default messages;
diff --git a/src/library-authoring/common/context/ComponentPickerContext.tsx b/src/library-authoring/common/context/ComponentPickerContext.tsx
new file mode 100644
index 0000000000..83c258ec1d
--- /dev/null
+++ b/src/library-authoring/common/context/ComponentPickerContext.tsx
@@ -0,0 +1,164 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+} from 'react';
+
+export interface SelectedComponent {
+  usageKey: string;
+  blockType: string;
+}
+
+export type ComponentSelectedEvent = (selectedComponent: SelectedComponent) => void;
+export type ComponentSelectionChangedEvent = (selectedComponents: SelectedComponent[]) => void;
+
+type NoComponentPickerType = {
+  componentPickerMode: false;
+  /** We add the `never` type to ensure that the other properties are not used,
+   * but allow it to be desconstructed from the return value of `useComponentPickerContext()`
+   */
+  onComponentSelected?: never;
+  selectedComponents?: never;
+  addComponentToSelectedComponents?: never;
+  removeComponentFromSelectedComponents?: never;
+  restrictToLibrary?: never;
+};
+
+type ComponentPickerSingleType = {
+  componentPickerMode: 'single';
+  onComponentSelected: ComponentSelectedEvent;
+  selectedComponents?: never;
+  addComponentToSelectedComponents?: never;
+  removeComponentFromSelectedComponents?: never;
+  restrictToLibrary: boolean;
+};
+
+type ComponentPickerMultipleType = {
+  componentPickerMode: 'multiple';
+  onComponentSelected?: never;
+  selectedComponents: SelectedComponent[];
+  addComponentToSelectedComponents: ComponentSelectedEvent;
+  removeComponentFromSelectedComponents: ComponentSelectedEvent;
+  restrictToLibrary: boolean;
+};
+
+type ComponentPickerContextData = ComponentPickerSingleType | ComponentPickerMultipleType;
+
+/**
+ * Component Picker Context.
+ * This context is used to provide the component picker mode and the selected components.
+ *
+ * Get this using `useComponentPickerContext()`
+ */
+const ComponentPickerContext = createContext<ComponentPickerContextData | undefined>(undefined);
+
+export type ComponentPickerSingleProps = {
+  componentPickerMode: 'single';
+  onComponentSelected: ComponentSelectedEvent;
+  onChangeComponentSelection?: never;
+  restrictToLibrary?: boolean;
+};
+
+export type ComponentPickerMultipleProps = {
+  componentPickerMode: 'multiple';
+  onComponentSelected?: never;
+  onChangeComponentSelection?: ComponentSelectionChangedEvent;
+  restrictToLibrary?: boolean;
+};
+
+type ComponentPickerProps = ComponentPickerSingleProps | ComponentPickerMultipleProps;
+
+type ComponentPickerProviderProps = {
+  children?: React.ReactNode;
+} & ComponentPickerProps;
+
+/**
+ * React component to provide `ComponentPickerContext`
+ */
+export const ComponentPickerProvider = ({
+  children,
+  componentPickerMode,
+  restrictToLibrary = false,
+  onComponentSelected,
+  onChangeComponentSelection,
+}: ComponentPickerProviderProps) => {
+  const [selectedComponents, setSelectedComponents] = useState<SelectedComponent[]>([]);
+
+  const addComponentToSelectedComponents = useCallback<ComponentSelectedEvent>((
+    selectedComponent: SelectedComponent,
+  ) => {
+    setSelectedComponents((prevSelectedComponents) => {
+      // istanbul ignore if: this should never happen
+      if (prevSelectedComponents.some((component) => component.usageKey === selectedComponent.usageKey)) {
+        return prevSelectedComponents;
+      }
+      const newSelectedComponents = [...prevSelectedComponents, selectedComponent];
+      onChangeComponentSelection?.(newSelectedComponents);
+      return newSelectedComponents;
+    });
+  }, []);
+
+  const removeComponentFromSelectedComponents = useCallback<ComponentSelectedEvent>((
+    selectedComponent: SelectedComponent,
+  ) => {
+    setSelectedComponents((prevSelectedComponents) => {
+      // istanbul ignore if: this should never happen
+      if (!prevSelectedComponents.some((component) => component.usageKey === selectedComponent.usageKey)) {
+        return prevSelectedComponents;
+      }
+      const newSelectedComponents = prevSelectedComponents.filter(
+        (component) => component.usageKey !== selectedComponent.usageKey,
+      );
+      onChangeComponentSelection?.(newSelectedComponents);
+      return newSelectedComponents;
+    });
+  }, []);
+
+  const context = useMemo<ComponentPickerContextData>(() => {
+    switch (componentPickerMode) {
+      case 'single':
+        return {
+          componentPickerMode,
+          restrictToLibrary,
+          onComponentSelected,
+        };
+      case 'multiple':
+        return {
+          componentPickerMode,
+          restrictToLibrary,
+          selectedComponents,
+          addComponentToSelectedComponents,
+          removeComponentFromSelectedComponents,
+        };
+      default:
+        // istanbul ignore next: this should never happen
+        throw new Error('Invalid component picker mode');
+    }
+  }, [
+    componentPickerMode,
+    restrictToLibrary,
+    onComponentSelected,
+    addComponentToSelectedComponents,
+    removeComponentFromSelectedComponents,
+    selectedComponents,
+    onChangeComponentSelection,
+  ]);
+
+  return (
+    <ComponentPickerContext.Provider value={context}>
+      {children}
+    </ComponentPickerContext.Provider>
+  );
+};
+
+export function useComponentPickerContext(): ComponentPickerContextData | NoComponentPickerType {
+  const ctx = useContext(ComponentPickerContext);
+  if (ctx === undefined) {
+    return {
+      componentPickerMode: false,
+    };
+  }
+  return ctx;
+}
diff --git a/src/library-authoring/common/context/LibraryContext.tsx b/src/library-authoring/common/context/LibraryContext.tsx
new file mode 100644
index 0000000000..5fc23796d2
--- /dev/null
+++ b/src/library-authoring/common/context/LibraryContext.tsx
@@ -0,0 +1,163 @@
+import { useToggle } from '@openedx/paragon';
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+} from 'react';
+import { useParams } from 'react-router-dom';
+
+import type { ComponentPicker } from '../../component-picker';
+import type { ContentLibrary } from '../../data/api';
+import { useContentLibrary } from '../../data/apiHooks';
+import { useComponentPickerContext } from './ComponentPickerContext';
+
+export interface ComponentEditorInfo {
+  usageKey: string;
+  onClose?: () => void;
+}
+
+export type LibraryContextData = {
+  /** The ID of the current library */
+  libraryId: string;
+  libraryData?: ContentLibrary;
+  readOnly: boolean;
+  isLoadingLibraryData: boolean;
+  collectionId: string | undefined;
+  setCollectionId: (collectionId?: string) => void;
+  componentId: string | undefined;
+  setComponentId: (componentId?: string) => void;
+  // Only show published components
+  showOnlyPublished: boolean;
+  // "Create New Collection" modal
+  isCreateCollectionModalOpen: boolean;
+  openCreateCollectionModal: () => void;
+  closeCreateCollectionModal: () => void;
+  // Editor modal - for editing some component
+  /** If the editor is open and the user is editing some component, this is the component being edited. */
+  componentBeingEdited: ComponentEditorInfo | undefined;
+  /** If an onClose callback is provided, it will be called when the editor is closed. */
+  openComponentEditor: (usageKey: string, onClose?: () => void) => void;
+  closeComponentEditor: () => void;
+  componentPicker?: typeof ComponentPicker;
+};
+
+/**
+ * Library Context.
+ * Always available when we're in the context of a single library.
+ *
+ * Get this using `useLibraryContext()`
+ *
+ * Not used on the "library list" on Studio home.
+ */
+const LibraryContext = createContext<LibraryContextData | undefined>(undefined);
+
+type LibraryProviderProps = {
+  children?: React.ReactNode;
+  libraryId: string;
+  showOnlyPublished?: boolean;
+  // If set, will initialize the current collection and/or component from the current URL
+  initializeFromUrl?: boolean;
+
+  /** The component picker modal to use. We need to pass it as a reference instead of
+   * directly importing it to avoid the import cycle:
+   * ComponentPicker > LibraryAuthoringPage/LibraryCollectionPage >
+   * Sidebar > AddContentContainer > ComponentPicker */
+  componentPicker?: typeof ComponentPicker;
+};
+
+/**
+ * React component to provide `LibraryContext`
+ */
+export const LibraryProvider = ({
+  children,
+  libraryId,
+  showOnlyPublished = false,
+  initializeFromUrl = true,
+  componentPicker,
+}: LibraryProviderProps) => {
+  const [isCreateCollectionModalOpen, openCreateCollectionModal, closeCreateCollectionModal] = useToggle(false);
+  const [componentBeingEdited, setComponentBeingEdited] = useState<ComponentEditorInfo | undefined>();
+  const closeComponentEditor = useCallback(() => {
+    setComponentBeingEdited((prev) => {
+      prev?.onClose?.();
+      return undefined;
+    });
+  }, []);
+  const openComponentEditor = useCallback((usageKey: string, onClose?: () => void) => {
+    setComponentBeingEdited({ usageKey, onClose });
+  }, []);
+
+  const { data: libraryData, isLoading: isLoadingLibraryData } = useContentLibrary(libraryId);
+
+  const {
+    componentPickerMode,
+  } = useComponentPickerContext();
+
+  const readOnly = !!componentPickerMode || !libraryData?.canEditLibrary;
+
+  // Parse the initial collectionId and/or componentId from the current URL params
+  const params = useParams();
+  const [componentId, setComponentId] = useState(
+    initializeFromUrl ? params.componentId : undefined,
+  );
+  const [collectionId, setCollectionId] = useState(
+    initializeFromUrl ? params.collectionId : undefined,
+  );
+
+  const context = useMemo<LibraryContextData>(() => {
+    const contextValue = {
+      libraryId,
+      libraryData,
+      collectionId,
+      setCollectionId,
+      componentId,
+      setComponentId,
+      readOnly,
+      isLoadingLibraryData,
+      showOnlyPublished,
+      isCreateCollectionModalOpen,
+      openCreateCollectionModal,
+      closeCreateCollectionModal,
+      componentBeingEdited,
+      openComponentEditor,
+      closeComponentEditor,
+      componentPicker,
+    };
+
+    return contextValue;
+  }, [
+    libraryId,
+    libraryData,
+    collectionId,
+    setCollectionId,
+    componentId,
+    setComponentId,
+    readOnly,
+    isLoadingLibraryData,
+    showOnlyPublished,
+    isCreateCollectionModalOpen,
+    openCreateCollectionModal,
+    closeCreateCollectionModal,
+    componentBeingEdited,
+    openComponentEditor,
+    closeComponentEditor,
+    componentPicker,
+  ]);
+
+  return (
+    <LibraryContext.Provider value={context}>
+      {children}
+    </LibraryContext.Provider>
+  );
+};
+
+export function useLibraryContext(): LibraryContextData {
+  const ctx = useContext(LibraryContext);
+  if (ctx === undefined) {
+    /* istanbul ignore next */
+    throw new Error('useLibraryContext() was used in a component without a <LibraryProvider> ancestor.');
+  }
+  return ctx;
+}
diff --git a/src/library-authoring/common/context/SidebarContext.tsx b/src/library-authoring/common/context/SidebarContext.tsx
new file mode 100644
index 0000000000..3f5408830b
--- /dev/null
+++ b/src/library-authoring/common/context/SidebarContext.tsx
@@ -0,0 +1,187 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+} from 'react';
+
+export enum SidebarBodyComponentId {
+  AddContent = 'add-content',
+  Info = 'info',
+  ComponentInfo = 'component-info',
+  CollectionInfo = 'collection-info',
+}
+
+export const COLLECTION_INFO_TABS = {
+  Manage: 'manage',
+  Details: 'details',
+} as const;
+export type CollectionInfoTab = typeof COLLECTION_INFO_TABS[keyof typeof COLLECTION_INFO_TABS];
+export const isCollectionInfoTab = (tab: string): tab is CollectionInfoTab => (
+  Object.values<string>(COLLECTION_INFO_TABS).includes(tab)
+);
+
+export const COMPONENT_INFO_TABS = {
+  Preview: 'preview',
+  Manage: 'manage',
+  Details: 'details',
+} as const;
+export type ComponentInfoTab = typeof COMPONENT_INFO_TABS[keyof typeof COMPONENT_INFO_TABS];
+export const isComponentInfoTab = (tab: string): tab is ComponentInfoTab => (
+  Object.values<string>(COMPONENT_INFO_TABS).includes(tab)
+);
+
+export interface SidebarComponentInfo {
+  type: SidebarBodyComponentId;
+  id: string;
+  /** Additional action on Sidebar display */
+  additionalAction?: SidebarAdditionalActions;
+  /** Current tab in the sidebar */
+  currentTab?: CollectionInfoTab | ComponentInfoTab;
+}
+
+export enum SidebarAdditionalActions {
+  JumpToAddCollections = 'jump-to-add-collections',
+}
+
+export type SidebarContextData = {
+  closeLibrarySidebar: () => void;
+  openAddContentSidebar: () => void;
+  openInfoSidebar: (componentId?: string, collectionId?: string) => void;
+  openLibrarySidebar: () => void;
+  openCollectionInfoSidebar: (collectionId: string, additionalAction?: SidebarAdditionalActions) => void;
+  openComponentInfoSidebar: (usageKey: string, additionalAction?: SidebarAdditionalActions) => void;
+  sidebarComponentInfo?: SidebarComponentInfo;
+  resetSidebarAdditionalActions: () => void;
+  setSidebarCurrentTab: (tab: CollectionInfoTab | ComponentInfoTab) => void;
+};
+
+/**
+ * Sidebar Context.
+ *
+ * Get this using `useSidebarContext()`
+ *
+ */
+const SidebarContext = createContext<SidebarContextData | undefined>(undefined);
+
+type SidebarProviderProps = {
+  children?: React.ReactNode;
+  /** Only used for testing */
+  initialSidebarComponentInfo?: SidebarComponentInfo;
+};
+
+/**
+ * React component to provide `SidebarContext`
+ */
+export const SidebarProvider = ({
+  children,
+  initialSidebarComponentInfo,
+}: SidebarProviderProps) => {
+  const [sidebarComponentInfo, setSidebarComponentInfo] = useState<SidebarComponentInfo | undefined>(
+    initialSidebarComponentInfo,
+  );
+
+  /** Helper function to consume additional action once performed.
+    Required to redo the action.
+  */
+  const resetSidebarAdditionalActions = useCallback(() => {
+    setSidebarComponentInfo((prev) => (prev && { ...prev, additionalAction: undefined }));
+  }, []);
+
+  const closeLibrarySidebar = useCallback(() => {
+    setSidebarComponentInfo(undefined);
+  }, []);
+  const openAddContentSidebar = useCallback(() => {
+    setSidebarComponentInfo({ id: '', type: SidebarBodyComponentId.AddContent });
+  }, []);
+  const openLibrarySidebar = useCallback(() => {
+    setSidebarComponentInfo({ id: '', type: SidebarBodyComponentId.Info });
+  }, []);
+
+  const openComponentInfoSidebar = useCallback((usageKey: string, additionalAction?: SidebarAdditionalActions) => {
+    setSidebarComponentInfo((prev) => ({
+      ...prev,
+      id: usageKey,
+      type: SidebarBodyComponentId.ComponentInfo,
+      additionalAction,
+    }));
+  }, []);
+
+  const openCollectionInfoSidebar = useCallback((
+    newCollectionId: string,
+    additionalAction?: SidebarAdditionalActions,
+  ) => {
+    setSidebarComponentInfo((prev) => ({
+      ...prev,
+      id: newCollectionId,
+      type: SidebarBodyComponentId.CollectionInfo,
+      additionalAction,
+    }));
+  }, []);
+
+  const openInfoSidebar = useCallback((componentId?: string, collectionId?: string) => {
+    if (componentId) {
+      openComponentInfoSidebar(componentId);
+    } else if (collectionId) {
+      openCollectionInfoSidebar(collectionId);
+    } else {
+      openLibrarySidebar();
+    }
+  }, []);
+
+  const setSidebarCurrentTab = useCallback((tab: CollectionInfoTab | ComponentInfoTab) => {
+    setSidebarComponentInfo((prev) => (prev && { ...prev, currentTab: tab }));
+  }, []);
+
+  const context = useMemo<SidebarContextData>(() => {
+    const contextValue = {
+      closeLibrarySidebar,
+      openAddContentSidebar,
+      openInfoSidebar,
+      openLibrarySidebar,
+      openComponentInfoSidebar,
+      sidebarComponentInfo,
+      openCollectionInfoSidebar,
+      resetSidebarAdditionalActions,
+      setSidebarCurrentTab,
+    };
+
+    return contextValue;
+  }, [
+    closeLibrarySidebar,
+    openAddContentSidebar,
+    openInfoSidebar,
+    openLibrarySidebar,
+    openComponentInfoSidebar,
+    sidebarComponentInfo,
+    openCollectionInfoSidebar,
+    resetSidebarAdditionalActions,
+    setSidebarCurrentTab,
+  ]);
+
+  return (
+    <SidebarContext.Provider value={context}>
+      {children}
+    </SidebarContext.Provider>
+  );
+};
+
+export function useSidebarContext(): SidebarContextData {
+  const ctx = useContext(SidebarContext);
+  if (ctx === undefined) {
+    /* istanbul ignore next */
+    return {
+      closeLibrarySidebar: () => {},
+      openAddContentSidebar: () => {},
+      openInfoSidebar: () => {},
+      openLibrarySidebar: () => {},
+      openComponentInfoSidebar: () => {},
+      openCollectionInfoSidebar: () => {},
+      resetSidebarAdditionalActions: () => {},
+      setSidebarCurrentTab: () => {},
+      sidebarComponentInfo: undefined,
+    };
+  }
+  return ctx;
+}
diff --git a/src/library-authoring/component-comparison/CompareChangesWidget.test.tsx b/src/library-authoring/component-comparison/CompareChangesWidget.test.tsx
new file mode 100644
index 0000000000..ef508eacd9
--- /dev/null
+++ b/src/library-authoring/component-comparison/CompareChangesWidget.test.tsx
@@ -0,0 +1,77 @@
+import {
+  fireEvent,
+  render,
+  screen,
+  initializeMocks,
+  within,
+} from '../../testUtils';
+
+import CompareChangesWidget from './CompareChangesWidget';
+
+const usageKey = 'lb:org:lib:type:id';
+
+describe('<CompareChangesWidget />', () => {
+  beforeEach(() => {
+    initializeMocks();
+  });
+
+  it('can compare published (old) and draft (new) versions by default', async () => {
+    render(<CompareChangesWidget usageKey={usageKey} />);
+
+    // By default we see the new version:
+    const newTab = screen.getByRole('tab', { name: 'New version' });
+    expect(newTab).toBeInTheDocument();
+    expect(newTab).toHaveClass('active');
+
+    const newTabPanel = screen.getByRole('tabpanel', { name: 'New version' });
+    const newIframe = within(newTabPanel).getByTitle('Preview');
+    expect(newIframe).toBeVisible();
+    expect(newIframe).toHaveAttribute(
+      'src',
+      `http://localhost:18010/xblocks/v2/${usageKey}/embed/student_view/?version=draft`,
+    );
+
+    // Now switch to the "old version" tab:
+    const oldTab = screen.getByRole('tab', { name: 'Old version' });
+    fireEvent.click(oldTab);
+
+    const oldTabPanel = screen.getByRole('tabpanel', { name: 'Old version' });
+    expect(oldTabPanel).toBeVisible();
+    const oldIframe = within(oldTabPanel).getByTitle('Preview');
+    expect(oldIframe).toBeVisible();
+    expect(oldIframe).toHaveAttribute(
+      'src',
+      `http://localhost:18010/xblocks/v2/${usageKey}/embed/student_view/?version=published`,
+    );
+  });
+
+  it('can compare a specific old and published (new) version', async () => {
+    render(<CompareChangesWidget usageKey={usageKey} oldVersion={7} newVersion="published" />);
+
+    // By default we see the new version:
+    const newTab = screen.getByRole('tab', { name: 'New version' });
+    expect(newTab).toBeInTheDocument();
+    expect(newTab).toHaveClass('active');
+
+    const newTabPanel = screen.getByRole('tabpanel', { name: 'New version' });
+    const newIframe = within(newTabPanel).getByTitle('Preview');
+    expect(newIframe).toBeVisible();
+    expect(newIframe).toHaveAttribute(
+      'src',
+      `http://localhost:18010/xblocks/v2/${usageKey}/embed/student_view/?version=published`,
+    );
+
+    // Now switch to the "old version" tab:
+    const oldTab = screen.getByRole('tab', { name: 'Old version' });
+    fireEvent.click(oldTab);
+
+    const oldTabPanel = screen.getByRole('tabpanel', { name: 'Old version' });
+    expect(oldTabPanel).toBeVisible();
+    const oldIframe = within(oldTabPanel).getByTitle('Preview');
+    expect(oldIframe).toBeVisible();
+    expect(oldIframe).toHaveAttribute(
+      'src',
+      `http://localhost:18010/xblocks/v2/${usageKey}/embed/student_view/?version=7`,
+    );
+  });
+});
diff --git a/src/library-authoring/component-comparison/CompareChangesWidget.tsx b/src/library-authoring/component-comparison/CompareChangesWidget.tsx
new file mode 100644
index 0000000000..4a6e253033
--- /dev/null
+++ b/src/library-authoring/component-comparison/CompareChangesWidget.tsx
@@ -0,0 +1,43 @@
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Tab, Tabs } from '@openedx/paragon';
+
+import { LibraryBlock, type VersionSpec } from '../LibraryBlock';
+
+import messages from './messages';
+
+interface Props {
+  usageKey: string;
+  oldVersion?: VersionSpec;
+  newVersion?: VersionSpec;
+}
+
+/**
+ * A widget with tabs that can be used to show the old version and the new
+ * version of a component (XBlock), so users can switch back and forth to spot
+ * the differences.
+ *
+ * In the future, it would be better to have a way of highlighting the changes
+ * or showing a diff.
+ */
+const CompareChangesWidget = ({ usageKey, oldVersion = 'published', newVersion = 'draft' }: Props) => {
+  const intl = useIntl();
+
+  return (
+    <div>
+      <Tabs variant="tabs" defaultActiveKey="new" id="preview-version-toggle">
+        <Tab eventKey="old" title={intl.formatMessage(messages.oldVersionTitle)}>
+          <div className="p-2 bg-white">
+            <LibraryBlock usageKey={usageKey} version={oldVersion} />
+          </div>
+        </Tab>
+        <Tab eventKey="new" title={intl.formatMessage(messages.newVersionTitle)}>
+          <div className="p-2 bg-white">
+            <LibraryBlock usageKey={usageKey} version={newVersion} />
+          </div>
+        </Tab>
+      </Tabs>
+    </div>
+  );
+};
+
+export default CompareChangesWidget;
diff --git a/src/library-authoring/component-comparison/messages.ts b/src/library-authoring/component-comparison/messages.ts
new file mode 100644
index 0000000000..89275918ad
--- /dev/null
+++ b/src/library-authoring/component-comparison/messages.ts
@@ -0,0 +1,22 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  oldVersionTitle: {
+    id: 'course-authoring.library-authoring.component-comparison.oldVersion',
+    defaultMessage: 'Old version',
+    description: 'Title shown for old version when comparing changes',
+  },
+  newVersionTitle: {
+    id: 'course-authoring.library-authoring.component-comparison.newVersion',
+    defaultMessage: 'New version',
+    description: 'Title shown for new version when comparing changes',
+  },
+  iframeTitlePrefix: {
+    // This is only used in the "PreviewChangesEmbed" iframe for the legacy UI
+    id: 'course-authoring.library-authoring.component-comparison.iframeTitlePrefix',
+    defaultMessage: 'Compare Changes',
+    description: 'Title used for the compare changes dialog',
+  },
+});
+
+export default messages;
diff --git a/src/library-authoring/component-info/ComponentAdvancedAssets.tsx b/src/library-authoring/component-info/ComponentAdvancedAssets.tsx
new file mode 100644
index 0000000000..38bf5c3e6e
--- /dev/null
+++ b/src/library-authoring/component-info/ComponentAdvancedAssets.tsx
@@ -0,0 +1,100 @@
+/* eslint-disable no-nested-ternary */
+import React from 'react';
+import {
+  Button,
+  Dropzone,
+} from '@openedx/paragon';
+import { Delete } from '@openedx/paragon/icons';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { FormattedMessage, FormattedNumber, useIntl } from '@edx/frontend-platform/i18n';
+
+import { LoadingSpinner } from '../../generic/Loading';
+import DeleteModal from '../../generic/delete-modal/DeleteModal';
+import { useLibraryContext } from '../common/context/LibraryContext';
+import { useSidebarContext } from '../common/context/SidebarContext';
+import { getXBlockAssetsApiUrl } from '../data/api';
+import { useDeleteXBlockAsset, useInvalidateXBlockAssets, useXBlockAssets } from '../data/apiHooks';
+import messages from './messages';
+
+export const ComponentAdvancedAssets: React.FC<Record<never, never>> = () => {
+  const intl = useIntl();
+  const { readOnly } = useLibraryContext();
+  const { sidebarComponentInfo } = useSidebarContext();
+
+  const usageKey = sidebarComponentInfo?.id;
+  // istanbul ignore if: this should never happen in production
+  if (!usageKey) {
+    throw new Error('sidebarComponentUsageKey is required to render ComponentAdvancedAssets');
+  }
+
+  // For listing assets:
+  const { data: assets, isLoading: areAssetsLoading } = useXBlockAssets(usageKey);
+  const refreshAssets = useInvalidateXBlockAssets(usageKey);
+
+  // For uploading assets:
+  const handleProcessUpload = React.useCallback(async ({
+    fileData, requestConfig, handleError,
+  }: { fileData: FormData, requestConfig: any, handleError: any }) => {
+    const uploadData = new FormData();
+    const file = fileData.get('file') as File;
+    uploadData.set('content', file); // Paragon calls this 'file' but our API needs it called 'content'
+    // TODO: We may wish to warn the user (and prompt to confirm?) if they are
+    // about to overwite an existing file by uploading a file with the same
+    // name as an existing file. That is a workflow we want to support, but only
+    // if it's intentional.
+    // Note: we follow the convention that files meant to be seen/downloaded by
+    // learners should be prefixed with 'static/'
+    const uploadUrl = `${getXBlockAssetsApiUrl(usageKey)}static/${encodeURI(file.name)}`;
+    const client = getAuthenticatedHttpClient();
+    try {
+      await client.put(uploadUrl, uploadData, requestConfig);
+    } catch (error) {
+      handleError(error);
+      return;
+    }
+    refreshAssets();
+  }, [usageKey]);
+
+  // For deleting assets:
+  const deleter = useDeleteXBlockAsset(usageKey);
+  const [filePathToDelete, setConfirmDeleteAsset] = React.useState<string>('');
+  const deleteFile = React.useCallback(() => {
+    deleter.mutateAsync(filePathToDelete); // Don't wait for this before clearing the modal on the next line
+    setConfirmDeleteAsset('');
+  }, [filePathToDelete, usageKey]);
+
+  return (
+    <>
+      <ul>
+        { areAssetsLoading ? <li><LoadingSpinner /></li> : null }
+        { assets?.map(a => (
+          <li key={a.path}>
+            <a href={a.url}>{a.path}</a>{' '}
+            (<FormattedNumber value={a.size} notation="compact" unit="byte" unitDisplay="narrow" />)
+            <Button variant="link" size="sm" iconBefore={Delete} onClick={() => { setConfirmDeleteAsset(a.path); }} title={intl.formatMessage(messages.advancedDetailsAssetsDeleteButton)}>
+              <span className="sr-only"><FormattedMessage {...messages.advancedDetailsAssetsDeleteButton} /></span>
+            </Button>
+          </li>
+        )) }
+      </ul>
+      { assets !== undefined && !readOnly // Wait until assets have loaded before displaying add button:
+        ? (
+          <Dropzone
+            style={{ height: '200px' }}
+            onProcessUpload={handleProcessUpload}
+            onUploadProgress={() => {}}
+          />
+        )
+        : null }
+
+      <DeleteModal
+        isOpen={filePathToDelete !== ''}
+        close={() => { setConfirmDeleteAsset(''); }}
+        variant="warning"
+        title={intl.formatMessage(messages.advancedDetailsAssetsDeleteFileTitle)}
+        description={`Are you sure you want to delete ${filePathToDelete}?`}
+        onDeleteSubmit={deleteFile}
+      />
+    </>
+  );
+};
diff --git a/src/library-authoring/component-info/ComponentAdvancedInfo.test.tsx b/src/library-authoring/component-info/ComponentAdvancedInfo.test.tsx
new file mode 100644
index 0000000000..360f7d777c
--- /dev/null
+++ b/src/library-authoring/component-info/ComponentAdvancedInfo.test.tsx
@@ -0,0 +1,196 @@
+import {
+  fireEvent,
+  initializeMocks,
+  render as baseRender,
+  screen,
+  waitFor,
+} from '../../testUtils';
+import {
+  mockContentLibrary,
+  mockLibraryBlockMetadata,
+  mockSetXBlockOLX,
+  mockXBlockAssets,
+  mockXBlockOLX,
+} from '../data/api.mocks';
+import { LibraryProvider } from '../common/context/LibraryContext';
+import { SidebarBodyComponentId, SidebarProvider } from '../common/context/SidebarContext';
+import * as apiHooks from '../data/apiHooks';
+import { ComponentAdvancedInfo } from './ComponentAdvancedInfo';
+import { getXBlockAssetsApiUrl } from '../data/api';
+
+mockContentLibrary.applyMock();
+mockLibraryBlockMetadata.applyMock();
+mockXBlockAssets.applyMock();
+mockXBlockOLX.applyMock();
+const setOLXspy = mockSetXBlockOLX.applyMock();
+
+const render = (
+  usageKey: string = mockLibraryBlockMetadata.usageKeyPublished,
+  libraryId: string = mockContentLibrary.libraryId,
+  showOnlyPublished: boolean = false,
+) => baseRender(
+  <ComponentAdvancedInfo />,
+  {
+    extraWrapper: ({ children }: { children: React.ReactNode }) => (
+      <LibraryProvider libraryId={libraryId} showOnlyPublished={showOnlyPublished}>
+        <SidebarProvider
+          initialSidebarComponentInfo={{
+            id: usageKey,
+            type: SidebarBodyComponentId.ComponentInfo,
+          }}
+        >
+          {children}
+        </SidebarProvider>
+      </LibraryProvider>
+    ),
+  },
+);
+
+describe('<ComponentAdvancedInfo />', () => {
+  beforeEach(() => {
+    initializeMocks();
+  });
+
+  it('should display nothing when collapsed', async () => {
+    render();
+    const expandButton = await screen.findByRole('button', { name: /Advanced details/ });
+    expect(expandButton).toBeInTheDocument();
+    expect(screen.queryByText(mockLibraryBlockMetadata.usageKeyPublished)).not.toBeInTheDocument();
+  });
+
+  it('should display the usage key of the block (when expanded)', async () => {
+    render();
+    const expandButton = await screen.findByRole('button', { name: /Advanced details/ });
+    fireEvent.click(expandButton);
+    expect(await screen.findByText(mockLibraryBlockMetadata.usageKeyPublished)).toBeInTheDocument();
+  });
+
+  it('should display the static assets of the block (when expanded)', async () => {
+    render();
+    const expandButton = await screen.findByRole('button', { name: /Advanced details/ });
+    fireEvent.click(expandButton);
+    expect(await screen.findByText(/static\/image1\.png/)).toBeInTheDocument();
+    expect(await screen.findByText(/\(12M\)/)).toBeInTheDocument(); // size of the above file
+    expect(await screen.findByText(/static\/data\.csv/)).toBeInTheDocument();
+    expect(await screen.findByText(/\(8K\)/)).toBeInTheDocument(); // size of the above file
+    expect(await screen.findByText(/Drag and drop your file here or click to upload/)).toBeInTheDocument();
+  });
+
+  it('should delete static assets of the block', async () => {
+    const { axiosMock } = initializeMocks();
+
+    render();
+
+    const url = `${getXBlockAssetsApiUrl(mockLibraryBlockMetadata.usageKeyPublished)}${encodeURIComponent('static/image1.png')}`;
+    axiosMock.onDelete(url).reply(200);
+
+    const expandButton = await screen.findByRole('button', { name: /Advanced details/ });
+    fireEvent.click(expandButton);
+
+    expect(await screen.findByText(/static\/image1\.png/)).toBeInTheDocument();
+
+    // Click on delete button
+    const deleteButtons = await screen.findAllByTitle('Delete this file');
+    expect(deleteButtons.length).toEqual(2);
+    fireEvent.click(deleteButtons[0]);
+
+    // Show the pop up and click on delete
+    expect(await screen.findByText(/Are you sure you want to delete static\/image1\.png/)).toBeInTheDocument();
+    const deleteButton = await screen.findByRole('button', { name: /delete/i });
+    fireEvent.click(deleteButton);
+
+    await waitFor(() => expect(axiosMock.history.delete[0].url).toEqual(url));
+  });
+
+  it('should add asset in Dropzone', async () => {
+    const { axiosMock } = initializeMocks();
+    render();
+
+    const url = `${getXBlockAssetsApiUrl(mockLibraryBlockMetadata.usageKeyPublished)}static/image3.png`;
+    axiosMock.onPut(url).reply(200);
+
+    const expandButton = await screen.findByRole('button', { name: /Advanced details/ });
+    fireEvent.click(expandButton);
+
+    const dropzone = await screen.findByText(/Drag and drop your file here or click to upload/);
+    expect(dropzone).toBeInTheDocument();
+
+    const file = new File(['file'], 'image3.png', {
+      type: 'image/png',
+    });
+    Object.defineProperty(dropzone, 'files', {
+      value: [file],
+    });
+
+    fireEvent.drop(dropzone);
+
+    await waitFor(() => expect(axiosMock.history.put[0].url).toEqual(url));
+  });
+
+  it('should display the OLX source of the block (when expanded)', async () => {
+    const usageKey = mockXBlockOLX.usageKeyHtml;
+    const spy = jest.spyOn(apiHooks, 'useXBlockOLX');
+
+    render(mockXBlockOLX.usageKeyHtml);
+    const expandButton = await screen.findByRole('button', { name: /Advanced details/ });
+    fireEvent.click(expandButton);
+    // Because of syntax highlighting, the OLX will be broken up by many different tags so we need to search for
+    // just a substring:
+    const olxPart = /This is a text component which uses/;
+    await waitFor(() => expect(screen.getByText(olxPart)).toBeInTheDocument());
+    expect(spy).toHaveBeenCalledWith(usageKey, 'draft');
+  });
+
+  it('should display the published OLX source of the block (when expanded)', async () => {
+    const usageKey = mockXBlockOLX.usageKeyHtml;
+    const spy = jest.spyOn(apiHooks, 'useXBlockOLX');
+
+    render(usageKey, undefined, true);
+    const expandButton = await screen.findByRole('button', { name: /Advanced details/ });
+    fireEvent.click(expandButton);
+    // Because of syntax highlighting, the OLX will be broken up by many different tags so we need to search for
+    // just a substring:
+    const olxPart = /This is a text component which uses/;
+    await waitFor(() => expect(screen.getByText(olxPart)).toBeInTheDocument());
+    expect(spy).toHaveBeenCalledWith(usageKey, 'published');
+  });
+
+  it('does not display "Edit OLX" button and assets dropzone when the library is read-only', async () => {
+    render(mockXBlockOLX.usageKeyHtml, mockContentLibrary.libraryIdReadOnly);
+    const expandButton = await screen.findByRole('button', { name: /Advanced details/ });
+    fireEvent.click(expandButton);
+    expect(screen.queryByRole('button', { name: /Edit OLX/ })).not.toBeInTheDocument();
+    expect(screen.queryByText(/Drag and drop your file here or click to upload/)).not.toBeInTheDocument();
+  });
+
+  it('can edit the OLX', async () => {
+    render();
+    const expandButton = await screen.findByRole('button', { name: /Advanced details/ });
+    fireEvent.click(expandButton);
+    const editButton = await screen.findByRole('button', { name: /Edit OLX/ });
+    fireEvent.click(editButton);
+
+    expect(setOLXspy).not.toHaveBeenCalled();
+
+    const saveButton = await screen.findByRole('button', { name: /Save/ });
+    fireEvent.click(saveButton);
+
+    await waitFor(() => expect(setOLXspy).toHaveBeenCalled());
+  });
+
+  it('displays an error if editing the OLX failed', async () => {
+    setOLXspy.mockImplementation(async () => {
+      throw new Error('Example error - setting OLX failed');
+    });
+
+    render(mockLibraryBlockMetadata.usageKeyPublished);
+    const expandButton = await screen.findByRole('button', { name: /Advanced details/ });
+    fireEvent.click(expandButton);
+    const editButton = await screen.findByRole('button', { name: /Edit OLX/ });
+    fireEvent.click(editButton);
+    const saveButton = await screen.findByRole('button', { name: /Save/ });
+    fireEvent.click(saveButton);
+
+    expect(await screen.findByText(/An error occurred and the OLX could not be saved./)).toBeInTheDocument();
+  });
+});
diff --git a/src/library-authoring/component-info/ComponentAdvancedInfo.tsx b/src/library-authoring/component-info/ComponentAdvancedInfo.tsx
new file mode 100644
index 0000000000..89d756e4e9
--- /dev/null
+++ b/src/library-authoring/component-info/ComponentAdvancedInfo.tsx
@@ -0,0 +1,122 @@
+/* eslint-disable no-nested-ternary */
+import React from 'react';
+import {
+  Alert,
+  Button,
+  Collapsible,
+  OverlayTrigger,
+  Tooltip,
+} from '@openedx/paragon';
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
+
+import { LoadingSpinner } from '../../generic/Loading';
+import { CodeEditor, EditorAccessor } from '../../generic/CodeEditor';
+import { useLibraryContext } from '../common/context/LibraryContext';
+import { useSidebarContext } from '../common/context/SidebarContext';
+import {
+  useUpdateXBlockOLX,
+  useXBlockOLX,
+} from '../data/apiHooks';
+import messages from './messages';
+import { ComponentAdvancedAssets } from './ComponentAdvancedAssets';
+
+const ComponentAdvancedInfoInner: React.FC<Record<never, never>> = () => {
+  const intl = useIntl();
+  const { readOnly, showOnlyPublished } = useLibraryContext();
+  const { sidebarComponentInfo } = useSidebarContext();
+
+  const usageKey = sidebarComponentInfo?.id;
+  // istanbul ignore if: this should never happen in production
+  if (!usageKey) {
+    throw new Error('sidebarComponentUsageKey is required to render ComponentAdvancedInfo');
+  }
+
+  const { data: olx, isLoading: isOLXLoading } = useXBlockOLX(
+    usageKey,
+    showOnlyPublished ? 'published' : 'draft',
+  );
+  const editorRef = React.useRef<EditorAccessor | undefined>(undefined);
+  const [isEditingOLX, setEditingOLX] = React.useState(false);
+  const olxUpdater = useUpdateXBlockOLX(usageKey);
+  const updateOlx = React.useCallback(() => {
+    const newOLX = editorRef.current?.state.doc.toString();
+    if (!newOLX) {
+      /* istanbul ignore next */
+      throw new Error('Unable to get OLX string from codemirror.'); // Shouldn't happen.
+    }
+    olxUpdater.mutateAsync(newOLX).then(() => {
+      // Only if we succeeded:
+      setEditingOLX(false);
+    }).catch(() => {
+      // On error, an <Alert> is shown below. We catch here to avoid the error propagating up.
+    });
+  }, [editorRef, olxUpdater, intl]);
+
+  return (
+    <>
+      <h3 className="h5"><FormattedMessage {...messages.advancedDetailsUsageKey} /></h3>
+      <p className="text-monospace small">{usageKey}</p>
+      <h3 className="h5"><FormattedMessage {...messages.advancedDetailsOLX} /></h3>
+      {(() => {
+        if (isOLXLoading) { return <LoadingSpinner />; }
+        if (!olx) { return <FormattedMessage {...messages.advancedDetailsOLXError} />; }
+        return (
+          <div className="mb-4">
+            {olxUpdater.error && (
+              <Alert variant="danger">
+                <p><strong><FormattedMessage {...messages.advancedDetailsOLXEditFailed} /></strong></p>
+                {/*
+                  TODO: fix the API so it returns 400 errors in a JSON object, not HTML 500 errors. Then display
+                  a useful error message here like "parsing the XML failed on line 3".
+                  (olxUpdater.error as Record<string, any>)?.customAttributes?.httpErrorResponseData.errorMessage
+                */}
+              </Alert>
+            )}
+            <CodeEditor key={usageKey} readOnly={!isEditingOLX} editorRef={editorRef}>{olx}</CodeEditor>
+            {
+              isEditingOLX ? (
+                <>
+                  <Button variant="primary" onClick={updateOlx} disabled={olxUpdater.isLoading}>
+                    <FormattedMessage {...messages.advancedDetailsOLXSaveButton} />
+                  </Button>
+                  <Button variant="link" onClick={() => setEditingOLX(false)} disabled={olxUpdater.isLoading}>
+                    <FormattedMessage {...messages.advancedDetailsOLXCancelButton} />
+                  </Button>
+                </>
+              ) : !readOnly ? (
+                <OverlayTrigger
+                  placement="bottom-start"
+                  overlay={(
+                    <Tooltip id="olx-edit-button">
+                      <FormattedMessage {...messages.advancedDetailsOLXEditWarning} />
+                    </Tooltip>
+                  )}
+                >
+                  <Button variant="link" onClick={() => setEditingOLX(true)}>
+                    <FormattedMessage {...messages.advancedDetailsOLXEditButton} />
+                  </Button>
+                </OverlayTrigger>
+              ) : (
+                null
+              )
+            }
+          </div>
+        );
+      })()}
+      <h3 className="h5"><FormattedMessage {...messages.advancedDetailsAssets} /></h3>
+      <ComponentAdvancedAssets />
+    </>
+  );
+};
+
+export const ComponentAdvancedInfo: React.FC<Record<never, never>> = () => {
+  const intl = useIntl();
+  return (
+    <Collapsible
+      styling="basic"
+      title={intl.formatMessage(messages.advancedDetailsTitle)}
+    >
+      <ComponentAdvancedInfoInner />
+    </Collapsible>
+  );
+};
diff --git a/src/library-authoring/component-info/ComponentDetails.test.tsx b/src/library-authoring/component-info/ComponentDetails.test.tsx
new file mode 100644
index 0000000000..33fb4c211a
--- /dev/null
+++ b/src/library-authoring/component-info/ComponentDetails.test.tsx
@@ -0,0 +1,62 @@
+import {
+  initializeMocks,
+  render as baseRender,
+  screen,
+} from '../../testUtils';
+import {
+  mockContentLibrary,
+  mockLibraryBlockMetadata,
+  mockXBlockAssets,
+  mockXBlockOLX,
+} from '../data/api.mocks';
+import { SidebarBodyComponentId, SidebarProvider } from '../common/context/SidebarContext';
+import ComponentDetails from './ComponentDetails';
+
+mockContentLibrary.applyMock();
+mockLibraryBlockMetadata.applyMock();
+mockXBlockAssets.applyMock();
+mockXBlockOLX.applyMock();
+
+const render = (usageKey: string) => baseRender(<ComponentDetails />, {
+  extraWrapper: ({ children }) => (
+    <SidebarProvider
+      initialSidebarComponentInfo={{
+        id: usageKey,
+        type: SidebarBodyComponentId.ComponentInfo,
+      }}
+    >
+      {children}
+    </SidebarProvider>
+  ),
+});
+
+describe('<ComponentDetails />', () => {
+  beforeEach(() => {
+    initializeMocks();
+  });
+
+  it('should render the component details loading', async () => {
+    render(mockLibraryBlockMetadata.usageKeyThatNeverLoads);
+    expect(await screen.findByText('Loading...')).toBeInTheDocument();
+  });
+
+  it('should render the component details error', async () => {
+    render(mockLibraryBlockMetadata.usageKeyError404);
+    expect(await screen.findByText(/Mocked request failed with status code 404/)).toBeInTheDocument();
+  });
+
+  it('should render the component usage', async () => {
+    render(mockLibraryBlockMetadata.usageKeyNeverPublished);
+    expect(await screen.findByText('Component Usage')).toBeInTheDocument();
+    // TODO: replace with actual data when implement course list
+    expect(screen.queryByText(/This will show the courses that use this component./)).toBeInTheDocument();
+  });
+
+  it('should render the component history', async () => {
+    render(mockLibraryBlockMetadata.usageKeyNeverPublished);
+    // Show created date
+    expect(await screen.findByText('June 20, 2024')).toBeInTheDocument();
+    // Show modified date
+    expect(await screen.findByText('June 21, 2024')).toBeInTheDocument();
+  });
+});
diff --git a/src/library-authoring/component-info/ComponentDetails.tsx b/src/library-authoring/component-info/ComponentDetails.tsx
new file mode 100644
index 0000000000..e41f3ad50c
--- /dev/null
+++ b/src/library-authoring/component-info/ComponentDetails.tsx
@@ -0,0 +1,57 @@
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import { Stack } from '@openedx/paragon';
+
+import AlertError from '../../generic/alert-error';
+import Loading from '../../generic/Loading';
+import { useSidebarContext } from '../common/context/SidebarContext';
+import { useLibraryBlockMetadata } from '../data/apiHooks';
+import HistoryWidget from '../generic/history-widget';
+import { ComponentAdvancedInfo } from './ComponentAdvancedInfo';
+import messages from './messages';
+
+const ComponentDetails = () => {
+  const { sidebarComponentInfo } = useSidebarContext();
+
+  const usageKey = sidebarComponentInfo?.id;
+
+  // istanbul ignore if: this should never happen
+  if (!usageKey) {
+    throw new Error('usageKey is required');
+  }
+
+  const {
+    data: componentMetadata,
+    isError,
+    error,
+    isLoading,
+  } = useLibraryBlockMetadata(usageKey);
+
+  if (isError) {
+    return <AlertError error={error} />;
+  }
+
+  if (isLoading) {
+    return <Loading />;
+  }
+
+  return (
+    <Stack gap={3}>
+      <div>
+        <h3 className="h5">
+          <FormattedMessage {...messages.detailsTabUsageTitle} />
+        </h3>
+        <small><FormattedMessage {...messages.detailsTabUsagePlaceholder} /></small>
+      </div>
+      <hr className="w-100" />
+      <div>
+        <h3 className="h5">
+          <FormattedMessage {...messages.detailsTabHistoryTitle} />
+        </h3>
+        <HistoryWidget {...componentMetadata} />
+      </div>
+      <ComponentAdvancedInfo />
+    </Stack>
+  );
+};
+
+export default ComponentDetails;
diff --git a/src/library-authoring/component-info/ComponentInfo.test.tsx b/src/library-authoring/component-info/ComponentInfo.test.tsx
new file mode 100644
index 0000000000..6ccebc29fe
--- /dev/null
+++ b/src/library-authoring/component-info/ComponentInfo.test.tsx
@@ -0,0 +1,127 @@
+import {
+  initializeMocks,
+  render,
+  screen,
+  waitFor,
+} from '../../testUtils';
+import { mockContentLibrary, mockLibraryBlockMetadata } from '../data/api.mocks';
+import { mockBroadcastChannel } from '../../generic/data/api.mock';
+import { LibraryProvider } from '../common/context/LibraryContext';
+import { SidebarBodyComponentId, SidebarProvider } from '../common/context/SidebarContext';
+import ComponentInfo from './ComponentInfo';
+import { getXBlockPublishApiUrl } from '../data/api';
+
+mockBroadcastChannel();
+mockContentLibrary.applyMock();
+mockLibraryBlockMetadata.applyMock();
+jest.mock('./ComponentPreview', () => ({
+  __esModule: true, // Required when mocking 'default' export
+  default: () => <div>Mocked preview</div>,
+}));
+jest.mock('./ComponentManagement', () => ({
+  __esModule: true, // Required when mocking 'default' export
+  default: () => <div>Mocked management tab</div>,
+}));
+
+const withLibraryId = (libraryId: string, sidebarComponentUsageKey: string) => ({
+  extraWrapper: ({ children }: { children: React.ReactNode }) => (
+    <LibraryProvider libraryId={libraryId}>
+      <SidebarProvider
+        initialSidebarComponentInfo={{
+          id: sidebarComponentUsageKey,
+          type: SidebarBodyComponentId.ComponentInfo,
+        }}
+      >
+        {children}
+      </SidebarProvider>
+    </LibraryProvider>
+  ),
+});
+
+describe('<ComponentInfo> Sidebar', () => {
+  it('should show a disabled "Edit" button when the component type is not editable', async () => {
+    initializeMocks();
+    render(
+      <ComponentInfo />,
+      withLibraryId(mockContentLibrary.libraryId, mockLibraryBlockMetadata.usageKeyThirdPartyXBlock),
+    );
+
+    const editButton = await screen.findByRole('button', { name: /Edit component/ });
+    expect(editButton).toBeDisabled();
+  });
+
+  it('should not show a "Edit" button when the library is read-only', async () => {
+    initializeMocks();
+    render(
+      <ComponentInfo />,
+      withLibraryId(mockContentLibrary.libraryIdReadOnly, mockLibraryBlockMetadata.usageKeyPublished),
+    );
+
+    expect(screen.queryByRole('button', { name: /Edit component/ })).not.toBeInTheDocument();
+  });
+
+  it('should show a working "Edit" button for a normal component', async () => {
+    initializeMocks();
+    render(
+      <ComponentInfo />,
+      withLibraryId(mockContentLibrary.libraryId, mockLibraryBlockMetadata.usageKeyPublished),
+    );
+
+    const editButton = await screen.findByRole('button', { name: /Edit component/ });
+    await waitFor(() => expect(editButton).not.toBeDisabled());
+  });
+
+  it('should show a disabled "Publish" button when the component is already published', async () => {
+    initializeMocks();
+    render(
+      <ComponentInfo />,
+      withLibraryId(mockContentLibrary.libraryId, mockLibraryBlockMetadata.usageKeyPublishDisabled),
+    );
+    const publishButton = await screen.findByRole('button', { name: /Publish component/ });
+    expect(publishButton).toBeDisabled();
+  });
+
+  it('should show a working "Publish" button when the component is not published', async () => {
+    initializeMocks();
+    render(
+      <ComponentInfo />,
+      withLibraryId(mockContentLibrary.libraryId, mockLibraryBlockMetadata.usageKeyNeverPublished),
+    );
+    const publishButton = await screen.findByRole('button', { name: /Publish component/ });
+    await waitFor(() => expect(publishButton).not.toBeDisabled());
+  });
+
+  it('should show toast message when the component is published successfully', async () => {
+    const { axiosMock, mockShowToast } = initializeMocks();
+    const url = getXBlockPublishApiUrl(mockLibraryBlockMetadata.usageKeyNeverPublished);
+    axiosMock.onPost(url).reply(200);
+    render(
+      <ComponentInfo />,
+      withLibraryId(mockContentLibrary.libraryId, mockLibraryBlockMetadata.usageKeyNeverPublished),
+    );
+
+    const publishButton = await screen.findByRole('button', { name: /Publish component/i });
+    publishButton.click();
+
+    await waitFor(() => {
+      expect(mockShowToast).toHaveBeenCalledWith('Component published successfully.');
+    });
+  });
+
+  it('should show toast message when the component fails to be published', async () => {
+    const { axiosMock, mockShowToast } = initializeMocks();
+    const url = getXBlockPublishApiUrl(mockLibraryBlockMetadata.usageKeyNeverPublished);
+    axiosMock.onPost(url).reply(500);
+    render(
+      <ComponentInfo />,
+      withLibraryId(mockContentLibrary.libraryId, mockLibraryBlockMetadata.usageKeyNeverPublished),
+    );
+
+    const publishButton = await screen.findByRole('button', { name: /Publish component/i });
+    publishButton.click();
+
+    await waitFor(() => {
+      expect(mockShowToast).toHaveBeenCalledWith('There was an error publishing the component.');
+    });
+  });
+});
diff --git a/src/library-authoring/component-info/ComponentInfo.tsx b/src/library-authoring/component-info/ComponentInfo.tsx
new file mode 100644
index 0000000000..c9db685e92
--- /dev/null
+++ b/src/library-authoring/component-info/ComponentInfo.tsx
@@ -0,0 +1,188 @@
+import React, { useEffect } from 'react';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import {
+  Button,
+  Tab,
+  Tabs,
+  Stack,
+} from '@openedx/paragon';
+import {
+  CheckBoxIcon,
+  CheckBoxOutlineBlank,
+} from '@openedx/paragon/icons';
+
+import { useComponentPickerContext } from '../common/context/ComponentPickerContext';
+import { useLibraryContext } from '../common/context/LibraryContext';
+import {
+  type ComponentInfoTab,
+  COMPONENT_INFO_TABS,
+  SidebarAdditionalActions,
+  isComponentInfoTab,
+  useSidebarContext,
+} from '../common/context/SidebarContext';
+import ComponentMenu from '../components';
+import { canEditComponent } from '../components/ComponentEditorModal';
+import ComponentDetails from './ComponentDetails';
+import ComponentManagement from './ComponentManagement';
+import ComponentPreview from './ComponentPreview';
+import messages from './messages';
+import { getBlockType } from '../../generic/key-utils';
+import { useLibraryBlockMetadata, usePublishComponent } from '../data/apiHooks';
+import { ToastContext } from '../../generic/toast-context';
+
+const AddComponentWidget = () => {
+  const intl = useIntl();
+
+  const { sidebarComponentInfo } = useSidebarContext();
+
+  const {
+    componentPickerMode,
+    onComponentSelected,
+    addComponentToSelectedComponents,
+    removeComponentFromSelectedComponents,
+    selectedComponents,
+  } = useComponentPickerContext();
+
+  const usageKey = sidebarComponentInfo?.id;
+
+  // istanbul ignore if: this should never happen
+  if (!usageKey) {
+    throw new Error('usageKey is required');
+  }
+
+  if (!componentPickerMode) {
+    return null;
+  }
+
+  if (componentPickerMode === 'single') {
+    return (
+      <Button
+        variant="outline-primary"
+        className="m-1 text-nowrap flex-grow-1"
+        onClick={() => {
+          onComponentSelected({ usageKey, blockType: getBlockType(usageKey) });
+        }}
+      >
+        {intl.formatMessage(messages.componentPickerSingleSelect)}
+      </Button>
+    );
+  }
+
+  if (componentPickerMode === 'multiple') {
+    const isChecked = selectedComponents.some((component) => component.usageKey === usageKey);
+    const handleChange = () => {
+      const selectedComponent = {
+        usageKey,
+        blockType: getBlockType(usageKey),
+      };
+      if (!isChecked) {
+        addComponentToSelectedComponents(selectedComponent);
+      } else {
+        removeComponentFromSelectedComponents(selectedComponent);
+      }
+    };
+
+    return (
+      <Button
+        variant="outline-primary"
+        iconBefore={isChecked ? CheckBoxIcon : CheckBoxOutlineBlank}
+        onClick={handleChange}
+      >
+        {intl.formatMessage(messages.componentPickerMultipleSelect)}
+      </Button>
+    );
+  }
+
+  // istanbul ignore next: this should never happen
+  return null;
+};
+
+const ComponentInfo = () => {
+  const intl = useIntl();
+
+  const { readOnly, openComponentEditor } = useLibraryContext();
+  const { setSidebarCurrentTab, sidebarComponentInfo, resetSidebarAdditionalActions } = useSidebarContext();
+
+  const jumpToCollections = sidebarComponentInfo?.additionalAction === SidebarAdditionalActions.JumpToAddCollections;
+
+  const tab: ComponentInfoTab = (
+    sidebarComponentInfo?.currentTab && isComponentInfoTab(sidebarComponentInfo.currentTab)
+  ) ? sidebarComponentInfo?.currentTab : COMPONENT_INFO_TABS.Preview;
+
+  useEffect(() => {
+    // Show Manage tab if JumpToAddCollections action is set in sidebarComponentInfo
+    if (jumpToCollections) {
+      setSidebarCurrentTab(COMPONENT_INFO_TABS.Manage);
+    }
+  }, [jumpToCollections]);
+
+  useEffect(() => {
+    // This is required to redo actions.
+    if (tab !== COMPONENT_INFO_TABS.Manage) {
+      resetSidebarAdditionalActions();
+    }
+  }, [tab]);
+
+  const usageKey = sidebarComponentInfo?.id;
+  // istanbul ignore if: this should never happen
+  if (!usageKey) {
+    throw new Error('usageKey is required');
+  }
+
+  const canEdit = canEditComponent(usageKey);
+
+  const publishComponent = usePublishComponent(usageKey);
+  const { data: componentMetadata } = useLibraryBlockMetadata(usageKey);
+  // Only can be published when the component has been modified after the last published date.
+  const canPublish = (new Date(componentMetadata?.modified ?? 0)) > (new Date(componentMetadata?.lastPublished ?? 0));
+  const { showToast } = React.useContext(ToastContext);
+
+  const publish = React.useCallback(() => {
+    publishComponent.mutateAsync()
+      .then(() => {
+        showToast(intl.formatMessage(messages.publishSuccessMsg));
+      }).catch(() => {
+        showToast(intl.formatMessage(messages.publishErrorMsg));
+      });
+  }, [publishComponent, showToast, intl]);
+
+  return (
+    <Stack>
+      {!readOnly && (
+        <div className="d-flex flex-wrap">
+          <Button
+            {...(canEdit ? { onClick: () => openComponentEditor(usageKey) } : { disabled: true })}
+            variant="outline-primary"
+            className="m-1 text-nowrap flex-grow-1"
+          >
+            {intl.formatMessage(messages.editComponentButtonTitle)}
+          </Button>
+          <Button disabled={publishComponent.isLoading || !canPublish} onClick={publish} variant="outline-primary" className="m-1 text-nowrap flex-grow-1">
+            {intl.formatMessage(messages.publishComponentButtonTitle)}
+          </Button>
+          <ComponentMenu usageKey={usageKey} />
+        </div>
+      )}
+      <AddComponentWidget />
+      <Tabs
+        variant="tabs"
+        className="my-3 d-flex justify-content-around"
+        defaultActiveKey={COMPONENT_INFO_TABS.Preview}
+        activeKey={tab}
+        onSelect={setSidebarCurrentTab}
+      >
+        <Tab eventKey={COMPONENT_INFO_TABS.Preview} title={intl.formatMessage(messages.previewTabTitle)}>
+          <ComponentPreview />
+        </Tab>
+        <Tab eventKey={COMPONENT_INFO_TABS.Manage} title={intl.formatMessage(messages.manageTabTitle)}>
+          <ComponentManagement />
+        </Tab>
+        <Tab eventKey={COMPONENT_INFO_TABS.Details} title={intl.formatMessage(messages.detailsTabTitle)}>
+          <ComponentDetails />
+        </Tab>
+      </Tabs>
+    </Stack>
+  );
+};
+
+export default ComponentInfo;
diff --git a/src/library-authoring/component-info/ComponentInfoHeader.test.tsx b/src/library-authoring/component-info/ComponentInfoHeader.test.tsx
new file mode 100644
index 0000000000..c6b8622cd7
--- /dev/null
+++ b/src/library-authoring/component-info/ComponentInfoHeader.test.tsx
@@ -0,0 +1,144 @@
+import type MockAdapter from 'axios-mock-adapter';
+
+import {
+  fireEvent,
+  render as baseRender,
+  screen,
+  waitFor,
+  initializeMocks,
+} from '../../testUtils';
+import { mockContentLibrary } from '../data/api.mocks';
+import { getXBlockFieldsVersionApiUrl, getXBlockFieldsApiUrl } from '../data/api';
+import { LibraryProvider } from '../common/context/LibraryContext';
+import { SidebarBodyComponentId, SidebarProvider } from '../common/context/SidebarContext';
+import ComponentInfoHeader from './ComponentInfoHeader';
+
+const { libraryId: mockLibraryId, libraryIdReadOnly } = mockContentLibrary;
+
+const usageKey = 'lb:org1:library:html:a1fa8bdd-dc67-4976-9bf5-0ea75a9bca3d';
+const xBlockFields = {
+  display_name: 'Test HTML Block',
+  metadata: {
+    display_name: 'Test HTML Block',
+  },
+};
+
+const render = (libraryId: string = mockLibraryId) => baseRender(<ComponentInfoHeader />, {
+  extraWrapper: ({ children }) => (
+    <LibraryProvider libraryId={libraryId}>
+      <SidebarProvider
+        initialSidebarComponentInfo={{
+          id: usageKey,
+          type: SidebarBodyComponentId.ComponentInfo,
+        }}
+      >
+        {children}
+      </SidebarProvider>
+    </LibraryProvider>
+  ),
+});
+
+let axiosMock: MockAdapter;
+let mockShowToast: (message: string) => void;
+
+mockContentLibrary.applyMock();
+
+describe('<ComponentInfoHeader />', () => {
+  beforeEach(() => {
+    const mocks = initializeMocks();
+    axiosMock = mocks.axiosMock;
+    axiosMock.onGet(getXBlockFieldsVersionApiUrl(usageKey, 'draft')).reply(200, xBlockFields);
+    mockShowToast = mocks.mockShowToast;
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+    axiosMock.restore();
+  });
+
+  it('should render component info Header', async () => {
+    render();
+
+    expect(await screen.findByText('Test HTML Block')).toBeInTheDocument();
+
+    expect(screen.getByRole('button', { name: /edit component name/i })).toBeInTheDocument();
+  });
+
+  it('should not render edit title button without permission', async () => {
+    render(libraryIdReadOnly);
+
+    expect(await screen.findByText('Test HTML Block')).toBeInTheDocument();
+
+    expect(screen.queryByRole('button', { name: /edit component name/i })).not.toBeInTheDocument();
+  });
+
+  it('should edit component title', async () => {
+    const url = getXBlockFieldsApiUrl(usageKey);
+    axiosMock.onPost(url).reply(200);
+    render();
+
+    expect(await screen.findByText('Test HTML Block')).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole('button', { name: /edit component name/i }));
+
+    const textBox = screen.getByRole('textbox', { name: /display name input/i });
+
+    fireEvent.change(textBox, { target: { value: 'New component name' } });
+    fireEvent.keyDown(textBox, { key: 'Enter', code: 'Enter', charCode: 13 });
+
+    expect(textBox).not.toBeInTheDocument();
+
+    await waitFor(() => {
+      expect(axiosMock.history.post.length).toEqual(1);
+      expect(axiosMock.history.post[0].url).toEqual(url);
+      expect(axiosMock.history.post[0].data).toStrictEqual(JSON.stringify({
+        metadata: { display_name: 'New component name' },
+      }));
+      expect(mockShowToast).toHaveBeenCalledWith('Component updated successfully.');
+    });
+  });
+
+  it('should close edit library title on press Escape', async () => {
+    const url = getXBlockFieldsVersionApiUrl(usageKey, 'draft');
+    axiosMock.onPost(url).reply(200);
+    render();
+
+    expect(await screen.findByText('Test HTML Block')).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole('button', { name: /edit component name/i }));
+
+    const textBox = screen.getByRole('textbox', { name: /display name input/i });
+
+    fireEvent.change(textBox, { target: { value: 'New component name' } });
+    fireEvent.keyDown(textBox, { key: 'Escape', code: 'Escape', charCode: 27 });
+
+    expect(textBox).not.toBeInTheDocument();
+
+    await waitFor(() => expect(axiosMock.history.post.length).toEqual(0));
+  });
+
+  it('should show error on edit library tittle', async () => {
+    const url = getXBlockFieldsApiUrl(usageKey);
+    axiosMock.onPatch(url).reply(500);
+    render();
+
+    expect(await screen.findByText('Test HTML Block')).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole('button', { name: /edit component name/i }));
+
+    const textBox = screen.getByRole('textbox', { name: /display name input/i });
+
+    fireEvent.change(textBox, { target: { value: 'New component name' } });
+    fireEvent.keyDown(textBox, { key: 'Enter', code: 'Enter', charCode: 13 });
+
+    await waitFor(() => {
+      expect(axiosMock.history.post.length).toEqual(1);
+      expect(axiosMock.history.post[0].url).toEqual(url);
+      expect(axiosMock.history.post[0].data).toStrictEqual(JSON.stringify({
+        metadata: { display_name: 'New component name' },
+      }));
+
+      expect(mockShowToast).toHaveBeenCalledWith('There was an error updating the component.');
+    });
+  });
+});
diff --git a/src/library-authoring/component-info/ComponentInfoHeader.tsx b/src/library-authoring/component-info/ComponentInfoHeader.tsx
new file mode 100644
index 0000000000..ac6317d4a7
--- /dev/null
+++ b/src/library-authoring/component-info/ComponentInfoHeader.tsx
@@ -0,0 +1,102 @@
+import React, { useState, useContext, useCallback } from 'react';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import {
+  Icon,
+  IconButton,
+  Stack,
+  Form,
+} from '@openedx/paragon';
+import { Edit } from '@openedx/paragon/icons';
+
+import { ToastContext } from '../../generic/toast-context';
+import { useLibraryContext } from '../common/context/LibraryContext';
+import { useSidebarContext } from '../common/context/SidebarContext';
+import { useUpdateXBlockFields, useXBlockFields } from '../data/apiHooks';
+import messages from './messages';
+
+const ComponentInfoHeader = () => {
+  const intl = useIntl();
+  const [inputIsActive, setIsActive] = useState(false);
+
+  const { readOnly, showOnlyPublished } = useLibraryContext();
+  const { sidebarComponentInfo } = useSidebarContext();
+
+  const usageKey = sidebarComponentInfo?.id;
+  // istanbul ignore next
+  if (!usageKey) {
+    throw new Error('usageKey is required');
+  }
+  const {
+    data: xblockFields,
+  } = useXBlockFields(usageKey, showOnlyPublished ? 'published' : 'draft');
+
+  const updateMutation = useUpdateXBlockFields(usageKey);
+  const { showToast } = useContext(ToastContext);
+
+  const handleSaveDisplayName = useCallback(
+    (event) => {
+      const newDisplayName = event.target.value;
+      if (newDisplayName && newDisplayName !== xblockFields?.displayName) {
+        updateMutation.mutateAsync({
+          metadata: {
+            display_name: newDisplayName,
+          },
+        }).then(() => {
+          showToast(intl.formatMessage(messages.updateComponentSuccessMsg));
+        }).catch(() => {
+          showToast(intl.formatMessage(messages.updateComponentErrorMsg));
+        });
+      }
+      setIsActive(false);
+    },
+    [xblockFields, showToast, intl],
+  );
+
+  const handleClick = () => {
+    setIsActive(true);
+  };
+
+  const hanldeOnKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Enter') {
+      handleSaveDisplayName(event);
+    } else if (event.key === 'Escape') {
+      setIsActive(false);
+    }
+  };
+
+  return (
+    <Stack direction="horizontal">
+      {inputIsActive
+        ? (
+          <Form.Control
+            autoFocus
+            name="displayName"
+            id="displayName"
+            type="text"
+            aria-label="Display name input"
+            defaultValue={xblockFields?.displayName}
+            onBlur={handleSaveDisplayName}
+            onKeyDown={hanldeOnKeyDown}
+          />
+        )
+        : (
+          <>
+            <span className="font-weight-bold m-1.5">
+              {xblockFields?.displayName}
+            </span>
+            {!readOnly && (
+              <IconButton
+                src={Edit}
+                iconAs={Icon}
+                alt={intl.formatMessage(messages.editNameButtonAlt)}
+                onClick={handleClick}
+                size="inline"
+              />
+            )}
+          </>
+        )}
+    </Stack>
+  );
+};
+
+export default ComponentInfoHeader;
diff --git a/src/library-authoring/component-info/ComponentManagement.test.tsx b/src/library-authoring/component-info/ComponentManagement.test.tsx
new file mode 100644
index 0000000000..b9f9e0a7c9
--- /dev/null
+++ b/src/library-authoring/component-info/ComponentManagement.test.tsx
@@ -0,0 +1,121 @@
+import { setConfig, getConfig } from '@edx/frontend-platform';
+
+import { mockContentTaxonomyTagsData } from '../../content-tags-drawer/data/api.mocks';
+import {
+  initializeMocks,
+  render as baseRender,
+  screen,
+  waitFor,
+} from '../../testUtils';
+import { LibraryProvider } from '../common/context/LibraryContext';
+import { SidebarBodyComponentId, SidebarProvider } from '../common/context/SidebarContext';
+import { mockContentLibrary, mockLibraryBlockMetadata } from '../data/api.mocks';
+import ComponentManagement from './ComponentManagement';
+
+jest.mock('../../content-tags-drawer', () => ({
+  ContentTagsDrawer: ({ readOnly }: { readOnly: boolean }) => (
+    <div>Mocked {readOnly ? 'read-only' : 'editable'} ContentTagsDrawer</div>
+  ),
+}));
+
+mockContentLibrary.applyMock();
+mockLibraryBlockMetadata.applyMock();
+mockContentTaxonomyTagsData.applyMock();
+
+/*
+ * This function is used to get the inner text of an element.
+ * https://stackoverflow.com/questions/47902335/innertext-is-undefined-in-jest-test
+ */
+const getInnerText = (element: Element) => element?.textContent
+  ?.split('\n')
+  .filter((text) => text && !text.match(/^\s+$/))
+  .map((text) => text.trim())
+  .join(' ');
+
+const matchInnerText = (nodeName: string, textToMatch: string) => (_: string, element: Element) => (
+  element.nodeName === nodeName && getInnerText(element) === textToMatch
+);
+
+const render = (usageKey: string, libraryId?: string) => baseRender(<ComponentManagement />, {
+  extraWrapper: ({ children }) => (
+    <LibraryProvider libraryId={libraryId || mockContentLibrary.libraryId}>
+      <SidebarProvider
+        initialSidebarComponentInfo={{
+          id: usageKey,
+          type: SidebarBodyComponentId.ComponentInfo,
+        }}
+      >
+        {children}
+      </SidebarProvider>
+    </LibraryProvider>
+  ),
+});
+
+describe('<ComponentManagement />', () => {
+  beforeEach(() => {
+    initializeMocks();
+  });
+
+  it('should render draft status', async () => {
+    render(mockLibraryBlockMetadata.usageKeyNeverPublished);
+    expect(await screen.findByText('Draft')).toBeInTheDocument();
+    expect(await screen.findByText('(Never Published)')).toBeInTheDocument();
+    expect(screen.getByText(matchInnerText('SPAN', 'Draft saved on June 20, 2024 at 13:54.'))).toBeInTheDocument();
+  });
+
+  it('should render published status', async () => {
+    render(mockLibraryBlockMetadata.usageKeyPublished);
+    expect(await screen.findByText('Published')).toBeInTheDocument();
+    expect(screen.getByText('Published')).toBeInTheDocument();
+    expect(
+      screen.getByText(matchInnerText('SPAN', 'Last published on June 21, 2024 at 24:00 by Luke.')),
+    ).toBeInTheDocument();
+  });
+
+  test.each([
+    {
+      libraryId: mockContentLibrary.libraryId,
+      expected: 'editable',
+    },
+    {
+      libraryId: mockContentLibrary.libraryIdReadOnly,
+      expected: 'read-only',
+    },
+  ])(
+    'should render the tagging info as $expected',
+    async ({ libraryId, expected }) => {
+      setConfig({
+        ...getConfig(),
+        ENABLE_TAGGING_TAXONOMY_PAGES: 'true',
+      });
+      render(mockLibraryBlockMetadata.usageKeyForTags, libraryId);
+      await waitFor(() => {
+        expect(screen.getByText(`Mocked ${expected} ContentTagsDrawer`)).toBeInTheDocument();
+      });
+    },
+  );
+
+  it('should not render draft status', async () => {
+    setConfig({
+      ...getConfig(),
+      ENABLE_TAGGING_TAXONOMY_PAGES: 'false',
+    });
+    render(mockLibraryBlockMetadata.usageKeyNeverPublished);
+    expect(await screen.findByText('Draft')).toBeInTheDocument();
+    expect(screen.queryByText('Tags')).not.toBeInTheDocument();
+  });
+
+  it('should render tag count in tagging info', async () => {
+    setConfig({
+      ...getConfig(),
+      ENABLE_TAGGING_TAXONOMY_PAGES: 'true',
+    });
+    render(mockLibraryBlockMetadata.usageKeyForTags);
+    expect(await screen.findByText('Tags (6)')).toBeInTheDocument();
+  });
+
+  it('should render collection count in collection info section', async () => {
+    render(mockLibraryBlockMetadata.usageKeyWithCollections);
+    expect(await screen.findByText('Collections (1)')).toBeInTheDocument();
+  });
+});
diff --git a/src/library-authoring/component-info/ComponentManagement.tsx b/src/library-authoring/component-info/ComponentManagement.tsx
new file mode 100644
index 0000000000..bbdfc51efb
--- /dev/null
+++ b/src/library-authoring/component-info/ComponentManagement.tsx
@@ -0,0 +1,141 @@
+import React, { useEffect } from 'react';
+import { getConfig } from '@edx/frontend-platform';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Collapsible, Icon, Stack } from '@openedx/paragon';
+import {
+  BookOpen, ExpandLess, ExpandMore, Tag,
+} from '@openedx/paragon/icons';
+
+import { useLibraryContext } from '../common/context/LibraryContext';
+import { SidebarAdditionalActions, useSidebarContext } from '../common/context/SidebarContext';
+import { useLibraryBlockMetadata } from '../data/apiHooks';
+import StatusWidget from '../generic/status-widget';
+import messages from './messages';
+import { ContentTagsDrawer } from '../../content-tags-drawer';
+import { useContentTaxonomyTagsData } from '../../content-tags-drawer/data/apiHooks';
+import ManageCollections from './ManageCollections';
+
+const ComponentManagement = () => {
+  const intl = useIntl();
+  const { readOnly, isLoadingLibraryData } = useLibraryContext();
+  const { sidebarComponentInfo, resetSidebarAdditionalActions } = useSidebarContext();
+  const jumpToCollections = sidebarComponentInfo?.additionalAction === SidebarAdditionalActions.JumpToAddCollections;
+  const [tagsCollapseIsOpen, setTagsCollapseOpen] = React.useState(!jumpToCollections);
+  const [collectionsCollapseIsOpen, setCollectionsCollapseOpen] = React.useState(true);
+
+  useEffect(() => {
+    if (jumpToCollections) {
+      setTagsCollapseOpen(false);
+      setCollectionsCollapseOpen(true);
+    }
+  }, [jumpToCollections, tagsCollapseIsOpen, collectionsCollapseIsOpen]);
+
+  useEffect(() => {
+    // This is required to redo actions.
+    if (tagsCollapseIsOpen || !collectionsCollapseIsOpen) {
+      resetSidebarAdditionalActions();
+    }
+  }, [tagsCollapseIsOpen, collectionsCollapseIsOpen]);
+
+  const usageKey = sidebarComponentInfo?.id;
+  // istanbul ignore if: this should never happen
+  if (!usageKey) {
+    throw new Error('usageKey is required');
+  }
+
+  const { data: componentMetadata } = useLibraryBlockMetadata(usageKey);
+  const { data: componentTags } = useContentTaxonomyTagsData(usageKey);
+
+  const collectionsCount = React.useMemo(() => componentMetadata?.collections?.length || 0, [componentMetadata]);
+  const tagsCount = React.useMemo(() => {
+    if (!componentTags) {
+      return 0;
+    }
+    let result = 0;
+    componentTags.taxonomies.forEach((taxonomy) => {
+      const countedTags : string[] = [];
+      taxonomy.tags.forEach((tagData) => {
+        tagData.lineage.forEach((tag) => {
+          if (!countedTags.includes(tag)) {
+            result += 1;
+            countedTags.push(tag);
+          }
+        });
+      });
+    });
+    return result;
+  }, [componentTags]);
+
+  // istanbul ignore if: this should never happen
+  if (isLoadingLibraryData) {
+    return null;
+  }
+
+  // istanbul ignore if: this should never happen
+  if (!componentMetadata) {
+    return null;
+  }
+
+  return (
+    <Stack gap={3}>
+      <StatusWidget
+        {...componentMetadata}
+      />
+      {[true, 'true'].includes(getConfig().ENABLE_TAGGING_TAXONOMY_PAGES)
+        && (
+          <Collapsible.Advanced
+            open={tagsCollapseIsOpen}
+            className="collapsible-card border-0"
+          >
+            <Collapsible.Trigger
+              onClick={() => setTagsCollapseOpen((prev) => !prev)}
+              className="collapsible-trigger d-flex justify-content-between p-2"
+            >
+              <Stack gap={1} direction="horizontal">
+                <Icon src={Tag} />
+                {intl.formatMessage(messages.manageTabTagsTitle, { count: tagsCount })}
+              </Stack>
+              <Collapsible.Visible whenClosed>
+                <Icon src={ExpandMore} />
+              </Collapsible.Visible>
+              <Collapsible.Visible whenOpen>
+                <Icon src={ExpandLess} />
+              </Collapsible.Visible>
+            </Collapsible.Trigger>
+            <Collapsible.Body className="collapsible-body">
+              <ContentTagsDrawer
+                id={usageKey}
+                variant="component"
+                readOnly={readOnly}
+              />
+            </Collapsible.Body>
+          </Collapsible.Advanced>
+        )}
+      <Collapsible.Advanced
+        open={collectionsCollapseIsOpen}
+        className="collapsible-card border-0"
+      >
+        <Collapsible.Trigger
+          onClick={() => setCollectionsCollapseOpen((prev) => !prev)}
+          className="collapsible-trigger d-flex justify-content-between p-2"
+        >
+          <Stack gap={1} direction="horizontal">
+            <Icon src={BookOpen} />
+            {intl.formatMessage(messages.manageTabCollectionsTitle, { count: collectionsCount })}
+          </Stack>
+          <Collapsible.Visible whenClosed>
+            <Icon src={ExpandMore} />
+          </Collapsible.Visible>
+          <Collapsible.Visible whenOpen>
+            <Icon src={ExpandLess} />
+          </Collapsible.Visible>
+        </Collapsible.Trigger>
+        <Collapsible.Body className="collapsible-body">
+          <ManageCollections usageKey={usageKey} collections={componentMetadata.collections} />
+        </Collapsible.Body>
+      </Collapsible.Advanced>
+    </Stack>
+  );
+};
+
+export default ComponentManagement;
diff --git a/src/library-authoring/component-info/ComponentPreview.scss b/src/library-authoring/component-info/ComponentPreview.scss
new file mode 100644
index 0000000000..0baf5ebcb2
--- /dev/null
+++ b/src/library-authoring/component-info/ComponentPreview.scss
@@ -0,0 +1,3 @@
+.component-preview-modal {
+  min-width: map-get($grid-breakpoints, "md");
+}
diff --git a/src/library-authoring/component-info/ComponentPreview.test.tsx b/src/library-authoring/component-info/ComponentPreview.test.tsx
new file mode 100644
index 0000000000..1233ec6007
--- /dev/null
+++ b/src/library-authoring/component-info/ComponentPreview.test.tsx
@@ -0,0 +1,57 @@
+import {
+  fireEvent,
+  initializeMocks,
+  render as baseRender,
+  screen,
+} from '../../testUtils';
+import { LibraryProvider } from '../common/context/LibraryContext';
+import { SidebarBodyComponentId, SidebarProvider } from '../common/context/SidebarContext';
+import { mockContentLibrary, mockLibraryBlockMetadata } from '../data/api.mocks';
+import ComponentPreview from './ComponentPreview';
+
+mockLibraryBlockMetadata.applyMock();
+mockContentLibrary.applyMock();
+
+const {
+  libraryId,
+} = mockContentLibrary;
+
+const usageKey = mockLibraryBlockMetadata.usageKeyPublished;
+
+const render = () => baseRender(<ComponentPreview />, {
+  extraWrapper: ({ children }) => (
+    <LibraryProvider libraryId={libraryId}>
+      <SidebarProvider
+        initialSidebarComponentInfo={{
+          id: usageKey,
+          type: SidebarBodyComponentId.ComponentInfo,
+        }}
+      >
+        {children}
+      </SidebarProvider>
+    </LibraryProvider>
+  ),
+});
+
+describe('<ComponentPreview />', () => {
+  it('renders a preview of the component', async () => {
+    initializeMocks();
+    render();
+    const iframe = (await screen.findByTitle('Preview')) as HTMLIFrameElement;
+    expect(iframe.src).toEqual(`http://localhost:18010/xblocks/v2/${usageKey}/embed/student_view/`);
+  });
+
+  it('shows an expanded preview of the component', async () => {
+    initializeMocks();
+    render();
+    await screen.findByTitle('Preview'); // Wait for the preview to appear
+    const expandButton = screen.getByRole('button', { name: /Expand/ });
+    fireEvent.click(expandButton);
+
+    const dialog = await screen.findByRole('dialog', { name: /component preview/i });
+    const dialogIframe = dialog.querySelector('iframe')!;
+    expect(dialogIframe).not.toBeNull();
+    expect(dialogIframe).toHaveAttribute('title', 'Preview');
+    expect(dialogIframe.src).toEqual(`http://localhost:18010/xblocks/v2/${usageKey}/embed/student_view/`);
+  });
+});
diff --git a/src/library-authoring/component-info/ComponentPreview.tsx b/src/library-authoring/component-info/ComponentPreview.tsx
new file mode 100644
index 0000000000..0f7ff51448
--- /dev/null
+++ b/src/library-authoring/component-info/ComponentPreview.tsx
@@ -0,0 +1,82 @@
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Button, StandardModal, useToggle } from '@openedx/paragon';
+import { OpenInFull } from '@openedx/paragon/icons';
+
+import { useLibraryContext } from '../common/context/LibraryContext';
+import { useSidebarContext } from '../common/context/SidebarContext';
+import { LibraryBlock } from '../LibraryBlock';
+import messages from './messages';
+import { useLibraryBlockMetadata } from '../data/apiHooks';
+
+interface ModalComponentPreviewProps {
+  isOpen: boolean;
+  close: () => void;
+  usageKey: string;
+}
+
+const ModalComponentPreview = ({ isOpen, close, usageKey }: ModalComponentPreviewProps) => {
+  const intl = useIntl();
+  const { showOnlyPublished } = useLibraryContext();
+
+  return (
+    <StandardModal
+      title={intl.formatMessage(messages.previewModalTitle)}
+      isOpen={isOpen}
+      onClose={close}
+      isOverflowVisible={false}
+      className="component-preview-modal"
+    >
+      <LibraryBlock
+        usageKey={usageKey}
+        version={showOnlyPublished ? 'published' : undefined}
+      />
+    </StandardModal>
+  );
+};
+
+const ComponentPreview = () => {
+  const intl = useIntl();
+
+  const [isModalOpen, openModal, closeModal] = useToggle();
+  const { showOnlyPublished } = useLibraryContext();
+  const { sidebarComponentInfo } = useSidebarContext();
+
+  const usageKey = sidebarComponentInfo?.id;
+  // istanbul ignore if: this should never happen
+  if (!usageKey) {
+    throw new Error('usageKey is required');
+  }
+
+  const { data: componentMetadata } = useLibraryBlockMetadata(usageKey);
+
+  return (
+    <>
+      <div className="position-relative m-2">
+        <Button
+          size="sm"
+          variant="light"
+          iconBefore={OpenInFull}
+          onClick={openModal}
+          className="position-absolute right-0 zindex-1 m-1"
+        >
+          {intl.formatMessage(messages.previewExpandButtonTitle)}
+        </Button>
+        {
+          // key=modified below is used to auto-refresh the preview when changes are made, e.g. via OLX editor
+          componentMetadata
+            ? (
+              <LibraryBlock
+                usageKey={usageKey}
+                key={componentMetadata.modified}
+                version={showOnlyPublished ? 'published' : undefined}
+              />
+            )
+            : null
+        }
+      </div>
+      <ModalComponentPreview isOpen={isModalOpen} close={closeModal} usageKey={usageKey} />
+    </>
+  );
+};
+
+export default ComponentPreview;
diff --git a/src/library-authoring/component-info/ManageCollections.test.tsx b/src/library-authoring/component-info/ManageCollections.test.tsx
new file mode 100644
index 0000000000..9c3d696546
--- /dev/null
+++ b/src/library-authoring/component-info/ManageCollections.test.tsx
@@ -0,0 +1,128 @@
+import fetchMock from 'fetch-mock-jest';
+
+import userEvent from '@testing-library/user-event';
+import MockAdapter from 'axios-mock-adapter/types';
+import {
+  initializeMocks,
+  render as baseRender,
+  screen,
+  waitFor,
+} from '../../testUtils';
+import mockCollectionsResults from '../__mocks__/collection-search.json';
+import { mockContentSearchConfig } from '../../search-manager/data/api.mock';
+import { mockContentLibrary, mockLibraryBlockMetadata } from '../data/api.mocks';
+import ManageCollections from './ManageCollections';
+import { LibraryProvider } from '../common/context/LibraryContext';
+import { getLibraryBlockCollectionsUrl } from '../data/api';
+
+let axiosMock: MockAdapter;
+let mockShowToast;
+
+mockContentLibrary.applyMock();
+mockLibraryBlockMetadata.applyMock();
+mockContentSearchConfig.applyMock();
+
+const render = (ui: React.ReactElement) => baseRender(ui, {
+  extraWrapper: ({ children }) => (
+    <LibraryProvider libraryId={mockContentLibrary.libraryId}>
+      {children}
+    </LibraryProvider>
+  ),
+});
+
+const searchEndpoint = 'http://mock.meilisearch.local/multi-search';
+
+describe('<ManageCollections />', () => {
+  beforeEach(() => {
+    const mocks = initializeMocks();
+    axiosMock = mocks.axiosMock;
+    mockShowToast = mocks.mockShowToast;
+    // The Meilisearch client-side API uses fetch, not Axios.
+    fetchMock.mockReset();
+    fetchMock.post(searchEndpoint, (_url, req) => {
+      const requestData = JSON.parse(req.body?.toString() ?? '');
+      const query = requestData?.queries[0]?.q ?? '';
+      // We have to replace the query (search keywords) in the mock results with the actual query,
+      // because otherwise Instantsearch will update the UI and change the query,
+      // leading to unexpected results in the test cases.
+      mockCollectionsResults.results[0].query = query;
+      // And fake the required '_formatted' fields; it contains the highlighting <mark>...</mark> around matched words
+      // eslint-disable-next-line no-underscore-dangle, no-param-reassign
+      mockCollectionsResults.results[0]?.hits.forEach((hit) => { hit._formatted = { ...hit }; });
+      return mockCollectionsResults;
+    });
+  });
+
+  it('should show all collections in library and allow users to select for the current component ', async () => {
+    const url = getLibraryBlockCollectionsUrl(mockLibraryBlockMetadata.usageKeyWithCollections);
+    axiosMock.onPatch(url).reply(200);
+    render(<ManageCollections
+      usageKey={mockLibraryBlockMetadata.usageKeyWithCollections}
+      collections={[{ title: 'My first collection', key: 'my-first-collection' }]}
+    />);
+    const manageBtn = await screen.findByRole('button', { name: 'Manage Collections' });
+    userEvent.click(manageBtn);
+    await waitFor(() => { expect(fetchMock).toHaveFetchedTimes(1, searchEndpoint, 'post'); });
+    expect(screen.queryByRole('search')).toBeInTheDocument();
+    const secondCollection = await screen.findByRole('button', { name: 'My second collection' });
+    userEvent.click(secondCollection);
+    const confirmBtn = await screen.findByRole('button', { name: 'Confirm' });
+    userEvent.click(confirmBtn);
+    await waitFor(() => {
+      expect(axiosMock.history.patch.length).toEqual(1);
+      expect(mockShowToast).toHaveBeenCalledWith('Component collections updated');
+      expect(JSON.parse(axiosMock.history.patch[0].data)).toEqual({
+        collection_keys: ['my-first-collection', 'my-second-collection'],
+      });
+    });
+    expect(screen.queryByRole('search')).not.toBeInTheDocument();
+  });
+
+  it('should show toast and close manage collections selection on failure', async () => {
+    const url = getLibraryBlockCollectionsUrl(mockLibraryBlockMetadata.usageKeyWithCollections);
+    axiosMock.onPatch(url).reply(400);
+    render(<ManageCollections
+      usageKey={mockLibraryBlockMetadata.usageKeyWithCollections}
+      collections={[]}
+    />);
+    screen.logTestingPlaygroundURL();
+    const manageBtn = await screen.findByRole('button', { name: 'Add to Collection' });
+    userEvent.click(manageBtn);
+    await waitFor(() => { expect(fetchMock).toHaveFetchedTimes(1, searchEndpoint, 'post'); });
+    expect(screen.queryByRole('search')).toBeInTheDocument();
+    const secondCollection = await screen.findByRole('button', { name: 'My second collection' });
+    userEvent.click(secondCollection);
+    const confirmBtn = await screen.findByRole('button', { name: 'Confirm' });
+    userEvent.click(confirmBtn);
+    await waitFor(() => {
+      expect(axiosMock.history.patch.length).toEqual(1);
+      expect(JSON.parse(axiosMock.history.patch[0].data)).toEqual({
+        collection_keys: ['my-second-collection'],
+      });
+      expect(mockShowToast).toHaveBeenCalledWith('Failed to update Component collections');
+    });
+    expect(screen.queryByRole('search')).not.toBeInTheDocument();
+  });
+
+  it('should close manage collections selection on cancel', async () => {
+    const url = getLibraryBlockCollectionsUrl(mockLibraryBlockMetadata.usageKeyWithCollections);
+    axiosMock.onPatch(url).reply(400);
+    render(<ManageCollections
+      usageKey={mockLibraryBlockMetadata.usageKeyWithCollections}
+      collections={[]}
+    />);
+    const manageBtn = await screen.findByRole('button', { name: 'Add to Collection' });
+    userEvent.click(manageBtn);
+    await waitFor(() => { expect(fetchMock).toHaveFetchedTimes(1, searchEndpoint, 'post'); });
+    expect(screen.queryByRole('search')).toBeInTheDocument();
+    const secondCollection = await screen.findByRole('button', { name: 'My second collection' });
+    userEvent.click(secondCollection);
+    const cancelBtn = await screen.findByRole('button', { name: 'Cancel' });
+    userEvent.click(cancelBtn);
+    await waitFor(() => {
+      expect(axiosMock.history.patch.length).toEqual(0);
+      expect(mockShowToast).not.toHaveBeenCalled();
+    });
+    expect(screen.queryByRole('search')).not.toBeInTheDocument();
+  });
+});
diff --git a/src/library-authoring/component-info/ManageCollections.tsx b/src/library-authoring/component-info/ManageCollections.tsx
new file mode 100644
index 0000000000..b7cbc98323
--- /dev/null
+++ b/src/library-authoring/component-info/ManageCollections.tsx
@@ -0,0 +1,229 @@
+import { useContext, useEffect, useState } from 'react';
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
+import {
+  Button, Icon, Scrollable, SelectableBox, Stack, StatefulButton, useCheckboxSetValues,
+} from '@openedx/paragon';
+import { Folder } from '@openedx/paragon/icons';
+
+import {
+  SearchContextProvider,
+  SearchKeywordsField,
+  SearchSortWidget,
+  useSearchContext,
+} from '../../search-manager';
+import messages from './messages';
+import { useUpdateComponentCollections } from '../data/apiHooks';
+import { ToastContext } from '../../generic/toast-context';
+import { CollectionMetadata } from '../data/api';
+import { useLibraryContext } from '../common/context/LibraryContext';
+import { SidebarAdditionalActions, useSidebarContext } from '../common/context/SidebarContext';
+
+interface ManageCollectionsProps {
+  usageKey: string;
+  collections: CollectionMetadata[],
+}
+
+interface CollectionsDrawerProps extends ManageCollectionsProps {
+  onClose: () => void;
+}
+
+const CollectionsSelectableBox = ({ usageKey, collections, onClose }: CollectionsDrawerProps) => {
+  const type = 'checkbox';
+  const intl = useIntl();
+  const { hits } = useSearchContext();
+  const { showToast } = useContext(ToastContext);
+  const collectionKeys = collections.map((collection) => collection.key);
+  const [selectedCollections, {
+    add,
+    remove,
+  }] = useCheckboxSetValues(collectionKeys);
+  const [btnState, setBtnState] = useState('default');
+
+  const { libraryId } = useLibraryContext();
+
+  const updateCollectionsMutation = useUpdateComponentCollections(libraryId, usageKey);
+
+  const handleConfirmation = () => {
+    setBtnState('pending');
+    updateCollectionsMutation.mutateAsync(selectedCollections).then(() => {
+      showToast(intl.formatMessage(messages.manageCollectionsToComponentSuccess));
+    }).catch(() => {
+      showToast(intl.formatMessage(messages.manageCollectionsToComponentFailed));
+    }).finally(() => {
+      setBtnState('default');
+      onClose();
+    });
+  };
+
+  const handleChange = (e) => (e.target.checked ? add(e.target.value) : remove(e.target.value));
+
+  return (
+    <Stack gap={4}>
+      <Scrollable className="mt-3 p-1 border-bottom border-gray-100" style={{ height: '25vh' }}>
+        <SelectableBox.Set
+          value={selectedCollections}
+          type={type}
+          onChange={handleChange}
+          name="selectedCollections"
+          columns={1}
+          ariaLabelledby={intl.formatMessage(messages.manageCollectionsSelectionLabel)}
+        >
+          {hits.map((collectionHit) => (
+            <SelectableBox
+              className="d-inline-flex align-items-center shadow-none border border-gray-100"
+              value={collectionHit.blockId}
+              key={collectionHit.blockId}
+              inputHidden={false}
+              type={type}
+              aria-label={collectionHit.displayName}
+            >
+              <Stack className="ml-2" direction="horizontal" gap={2}>
+                <Icon src={Folder} />
+                <span>{collectionHit.displayName}</span>
+              </Stack>
+            </SelectableBox>
+          ))}
+        </SelectableBox.Set>
+      </Scrollable>
+      <Stack direction="horizontal" gap={2}>
+        <Button
+          onClick={onClose}
+          className="font-weight-bold"
+          variant="tertiary"
+        >
+          {intl.formatMessage(messages.manageCollectionsToComponentCancelBtn)}
+        </Button>
+        <StatefulButton
+          onClick={handleConfirmation}
+          className="flex-grow-1 rounded-0"
+          variant="primary"
+          state={btnState}
+          labels={{
+            default: intl.formatMessage(messages.manageCollectionsToComponentConfirmBtn),
+          }}
+        />
+      </Stack>
+    </Stack>
+  );
+};
+
+const AddToCollectionsDrawer = ({ usageKey, collections, onClose }: CollectionsDrawerProps) => {
+  const intl = useIntl();
+  const { libraryId } = useLibraryContext();
+
+  return (
+    <SearchContextProvider
+      extraFilter={[`context_key = "${libraryId}"`, 'type = "collection"']}
+      skipUrlUpdate
+      skipBlockTypeFetch
+    >
+      <Stack className="mt-2" gap={3}>
+        <FormattedMessage
+          {...messages.manageCollectionsText}
+        />
+        <Stack gap={1} direction="horizontal">
+          <SearchKeywordsField
+            className="flex-grow-1"
+            placeholder={intl.formatMessage(messages.manageCollectionsSearchPlaceholder)}
+          />
+          <SearchSortWidget iconOnly />
+        </Stack>
+        {/* Set key to update selection when component usageKey changes */}
+        <CollectionsSelectableBox
+          usageKey={usageKey}
+          collections={collections}
+          onClose={onClose}
+          key={usageKey}
+        />
+      </Stack>
+    </SearchContextProvider>
+  );
+};
+
+const ComponentCollections = ({ collections, onManageClick }: {
+  collections?: string[];
+  onManageClick: () => void;
+}) => {
+  const intl = useIntl();
+  const { readOnly } = useLibraryContext();
+
+  if (!collections?.length) {
+    return (
+      <Stack gap={3}>
+        <span className="border-bottom pb-3 border-gray-100">
+          <FormattedMessage {...messages.componentNotOrganizedIntoCollection} />
+        </span>
+        {!readOnly && (
+          <Button
+            onClick={onManageClick}
+            variant="primary"
+          >
+            {intl.formatMessage(messages.manageCollectionsAddBtnText)}
+          </Button>
+        )}
+      </Stack>
+    );
+  }
+
+  return (
+    <Stack gap={4} className="mt-2">
+      {collections.map((collection) => (
+        <Stack
+          className="border-bottom pb-4 border-gray-100"
+          gap={2}
+          direction="horizontal"
+          key={collection}
+        >
+          <Icon src={Folder} />
+          <span>{collection}</span>
+        </Stack>
+      ))}
+      {!readOnly && (
+        <Button
+          onClick={onManageClick}
+          variant="outline-primary"
+        >
+          {intl.formatMessage(messages.manageCollectionsText)}
+        </Button>
+      )}
+    </Stack>
+  );
+};
+
+const ManageCollections = ({ usageKey, collections }: ManageCollectionsProps) => {
+  const { sidebarComponentInfo, resetSidebarAdditionalActions } = useSidebarContext();
+  const jumpToCollections = sidebarComponentInfo?.additionalAction === SidebarAdditionalActions.JumpToAddCollections;
+  const [editing, setEditing] = useState(jumpToCollections);
+  const collectionNames = collections.map((collection) => collection.title);
+
+  useEffect(() => {
+    if (jumpToCollections) {
+      setEditing(true);
+    }
+  }, [sidebarComponentInfo]);
+
+  useEffect(() => {
+    // This is required to redo actions.
+    if (!editing) {
+      resetSidebarAdditionalActions();
+    }
+  }, [editing]);
+
+  if (editing) {
+    return (
+      <AddToCollectionsDrawer
+        usageKey={usageKey}
+        collections={collections}
+        onClose={() => setEditing(false)}
+      />
+    );
+  }
+  return (
+    <ComponentCollections
+      collections={collectionNames}
+      onManageClick={() => setEditing(true)}
+    />
+  );
+};
+
+export default ManageCollections;
diff --git a/src/library-authoring/component-info/index.tsx b/src/library-authoring/component-info/index.tsx
new file mode 100644
index 0000000000..27bb2275f3
--- /dev/null
+++ b/src/library-authoring/component-info/index.tsx
@@ -0,0 +1,2 @@
+export { default as ComponentInfo } from './ComponentInfo';
+export { default as ComponentInfoHeader } from './ComponentInfoHeader';
diff --git a/src/library-authoring/component-info/messages.ts b/src/library-authoring/component-info/messages.ts
new file mode 100644
index 0000000000..1c02d867f4
--- /dev/null
+++ b/src/library-authoring/component-info/messages.ts
@@ -0,0 +1,206 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  advancedDetailsTitle: {
+    id: 'course-authoring.library-authoring.component.advanced.title',
+    defaultMessage: 'Advanced details',
+    description: 'Heading for the advanced technical details of a component',
+  },
+  advancedDetailsAssets: {
+    id: 'course-authoring.library-authoring.component.advanced.assets',
+    defaultMessage: 'Assets (Files)',
+    description: 'Heading for files attached to the component',
+  },
+  advancedDetailsAssetsDeleteFileTitle: {
+    id: 'course-authoring.library-authoring.component.advanced.assets.delete-file-title',
+    defaultMessage: 'Delete File',
+    description: 'Title for confirmation dialog when deleting a file',
+  },
+  advancedDetailsAssetsDeleteButton: {
+    id: 'course-authoring.library-authoring.component.advanced.assets.delete-btn',
+    defaultMessage: 'Delete this file',
+    description: 'screen reader description of the delete button for each static asset file',
+  },
+  advancedDetailsOLX: {
+    id: 'course-authoring.library-authoring.component.advanced.olx',
+    defaultMessage: 'OLX Source',
+    description: 'Heading for the component\'s OLX source code',
+  },
+  advancedDetailsOLXEditButton: {
+    id: 'course-authoring.library-authoring.component.advanced.olx-edit',
+    defaultMessage: 'Edit OLX',
+    description: 'Label for button to enable editing the OLX',
+  },
+  advancedDetailsOLXSaveButton: {
+    id: 'course-authoring.library-authoring.component.advanced.olx-save',
+    defaultMessage: 'Save',
+    description: 'Button to save changes to the OLX',
+  },
+  advancedDetailsOLXCancelButton: {
+    id: 'course-authoring.library-authoring.component.advanced.olx-save',
+    defaultMessage: 'Cancel',
+    description: 'Button to cancel changes to the OLX',
+  },
+  advancedDetailsOLXEditWarning: {
+    id: 'course-authoring.library-authoring.component.advanced.olx-warning',
+    defaultMessage: 'Be careful! This is an advanced feature and errors may break the component.',
+    description: 'Warning for users about editing OLX directly.',
+  },
+  advancedDetailsOLXEditFailed: {
+    id: 'course-authoring.library-authoring.component.advanced.olx-failed',
+    defaultMessage: 'An error occurred and the OLX could not be saved.',
+    description: 'Error message shown when saving the OLX fails.',
+  },
+  advancedDetailsOLXError: {
+    id: 'course-authoring.library-authoring.component.advanced.olx-error',
+    defaultMessage: 'Unable to load OLX',
+    description: 'Error message if OLX is unavailable',
+  },
+  advancedDetailsUsageKey: {
+    id: 'course-authoring.library-authoring.component.advanced.usage-key',
+    defaultMessage: 'ID (Usage key)',
+    description: 'Heading for the component\'s ID',
+  },
+  editNameButtonAlt: {
+    id: 'course-authoring.library-authoring.component.edit-name.alt',
+    defaultMessage: 'Edit component name',
+    description: 'Alt text for edit component name icon button',
+  },
+  updateComponentSuccessMsg: {
+    id: 'course-authoring.library-authoring.component.update.success',
+    defaultMessage: 'Component updated successfully.',
+    description: 'Message when the component is updated successfully',
+  },
+  updateComponentErrorMsg: {
+    id: 'course-authoring.library-authoring.component.update.error',
+    defaultMessage: 'There was an error updating the component.',
+    description: 'Message when there is an error when updating the component',
+  },
+  editComponentButtonTitle: {
+    id: 'course-authoring.library-authoring.component.edit.title',
+    defaultMessage: 'Edit component',
+    description: 'Title for edit component button',
+  },
+  publishComponentButtonTitle: {
+    id: 'course-authoring.library-authoring.component.publish.title',
+    defaultMessage: 'Publish component',
+    description: 'Title for publish component button',
+  },
+  previewTabTitle: {
+    id: 'course-authoring.library-authoring.component.preview-tab.title',
+    defaultMessage: 'Preview',
+    description: 'Title for preview tab',
+  },
+  manageTabTitle: {
+    id: 'course-authoring.library-authoring.component.manage-tab.title',
+    defaultMessage: 'Manage',
+    description: 'Title for manage tab',
+  },
+  manageTabTagsTitle: {
+    id: 'course-authoring.library-authoring.component.manage-tab.tags-title',
+    defaultMessage: 'Tags ({count})',
+    description: 'Title for the Tags container in the management tab',
+  },
+  manageTabCollectionsTitle: {
+    id: 'course-authoring.library-authoring.component.manage-tab.collections-title',
+    defaultMessage: 'Collections ({count})',
+    description: 'Title for the Collections container in the management tab',
+  },
+  detailsTabTitle: {
+    id: 'course-authoring.library-authoring.component.details-tab.title',
+    defaultMessage: 'Details',
+    description: 'Title for details tab',
+  },
+  detailsTabUsageTitle: {
+    id: 'course-authoring.library-authoring.component.details-tab.usage-title',
+    defaultMessage: 'Component Usage',
+    description: 'Title for the Component Usage container in the details tab',
+  },
+  detailsTabUsagePlaceholder: {
+    id: 'course-authoring.library-authoring.component.details-tab.usage-placeholder',
+    defaultMessage: 'This will show the courses that use this component. Feature coming soon.',
+    description: 'Explanation/placeholder for the future "Component Usage" feature',
+  },
+  detailsTabHistoryTitle: {
+    id: 'course-authoring.library-authoring.component.details-tab.history-title',
+    defaultMessage: 'Component History',
+    description: 'Title for the Component History container in the details tab',
+  },
+  previewExpandButtonTitle: {
+    id: 'course-authoring.library-authoring.component.preview.expand.title',
+    defaultMessage: 'Expand',
+    description: 'Title for expand preview button',
+  },
+  previewModalTitle: {
+    id: 'course-authoring.library-authoring.component.preview.modal.title',
+    defaultMessage: 'Component Preview',
+    description: 'Title for preview modal',
+  },
+  manageCollectionsText: {
+    id: 'course-authoring.library-authoring.component.manage-tab.collections.text',
+    defaultMessage: 'Manage Collections',
+    description: 'Header and button text for collection section in manage tab',
+  },
+  manageCollectionsAddBtnText: {
+    id: 'course-authoring.library-authoring.component.manage-tab.collections.btn-text',
+    defaultMessage: 'Add to Collection',
+    description: 'Button text for collection section in manage tab',
+  },
+  manageCollectionsSearchPlaceholder: {
+    id: 'course-authoring.library-authoring.component.manage-tab.collections.search-placeholder',
+    defaultMessage: 'Search',
+    description: 'Placeholder text for collection search in manage tab',
+  },
+  manageCollectionsSelectionLabel: {
+    id: 'course-authoring.library-authoring.component.manage-tab.collections.selection-aria-label',
+    defaultMessage: 'Collection selection',
+    description: 'Aria label text for collection selection box',
+  },
+  manageCollectionsToComponentSuccess: {
+    id: 'course-authoring.library-authoring.component.manage-tab.collections.add-success',
+    defaultMessage: 'Component collections updated',
+    description: 'Message to display on updating component collections',
+  },
+  manageCollectionsToComponentFailed: {
+    id: 'course-authoring.library-authoring.component.manage-tab.collections.add-failed',
+    defaultMessage: 'Failed to update Component collections',
+    description: 'Message to display on failure of updating component collections',
+  },
+  manageCollectionsToComponentConfirmBtn: {
+    id: 'course-authoring.library-authoring.component.manage-tab.collections.add-confirm-btn',
+    defaultMessage: 'Confirm',
+    description: 'Button text to confirm collections for a component',
+  },
+  manageCollectionsToComponentCancelBtn: {
+    id: 'course-authoring.library-authoring.component.manage-tab.collections.add-cancel-btn',
+    defaultMessage: 'Cancel',
+    description: 'Button text to cancel collections selection for a component',
+  },
+  componentNotOrganizedIntoCollection: {
+    id: 'course-authoring.library-authoring.component.manage-tab.collections.no-collections',
+    defaultMessage: 'This component is not organized into any collection.',
+    description: 'Message to display in manage collections section when component is not part of any collection.',
+  },
+  componentPickerSingleSelect: {
+    id: 'course-authoring.library-authoring.component-picker.single-select',
+    defaultMessage: 'Add to Course', // TODO: Change this message to a generic one?
+    description: 'Button to add component to course',
+  },
+  componentPickerMultipleSelect: {
+    id: 'course-authoring.library-authoring.component-picker.multiple-select',
+    defaultMessage: 'Select',
+    description: 'Button to select component',
+  },
+  publishSuccessMsg: {
+    id: 'course-authoring.component-authoring.component.publish.success',
+    defaultMessage: 'Component published successfully.',
+    description: 'Message when the component is published successfully.',
+  },
+  publishErrorMsg: {
+    id: 'course-authoring.component-authoring.component.publish.error',
+    defaultMessage: 'There was an error publishing the component.',
+    description: 'Message when there is an error when publishing the component.',
+  },
+});
+
+export default messages;
diff --git a/src/library-authoring/component-picker/ComponentPicker.test.tsx b/src/library-authoring/component-picker/ComponentPicker.test.tsx
new file mode 100644
index 0000000000..f9f9fc132e
--- /dev/null
+++ b/src/library-authoring/component-picker/ComponentPicker.test.tsx
@@ -0,0 +1,279 @@
+import { mockContentSearchConfig, mockSearchResult } from '../../search-manager/data/api.mock';
+import {
+  initializeMocks,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+  within,
+} from '../../testUtils';
+import mockResult from '../__mocks__/library-search.json';
+import mockCollectionResult from '../__mocks__/collection-search.json';
+import {
+  mockContentLibrary,
+  mockGetCollectionMetadata,
+  mockGetContentLibraryV2List,
+  mockLibraryBlockMetadata,
+} from '../data/api.mocks';
+
+import { ComponentPicker } from './ComponentPicker';
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useLocation: () => ({
+    pathname: '/evilguy',
+    search: {
+      variant: 'published',
+    },
+  }),
+}));
+jest.mock('../../studio-home/hooks', () => ({
+  useStudioHome: () => ({
+    isLoadingPage: false,
+    isFailedLoadingPage: false,
+    librariesV2Enabled: true,
+  }),
+}));
+mockContentLibrary.applyMock();
+mockContentSearchConfig.applyMock();
+mockGetCollectionMetadata.applyMock();
+mockGetContentLibraryV2List.applyMock();
+mockLibraryBlockMetadata.applyMock();
+
+let postMessageSpy: jest.SpyInstance;
+
+describe('<ComponentPicker />', () => {
+  beforeEach(() => {
+    initializeMocks();
+    postMessageSpy = jest.spyOn(window.parent, 'postMessage');
+
+    mockSearchResult({ ...mockResult });
+  });
+
+  it('should pick component using the component card button', async () => {
+    render(<ComponentPicker />);
+
+    expect(await screen.findByText('Test Library 1')).toBeInTheDocument();
+    fireEvent.click(screen.getByDisplayValue(/lib:sampletaxonomyorg1:tl1/i));
+
+    // Wait for the content library to load
+    await screen.findByText(/Change Library/i);
+    await waitFor(() => {
+      expect(screen.getByText('Test Library 1')).toBeInTheDocument();
+      expect(screen.queryAllByText('Introduction to Testing')[0]).toBeInTheDocument();
+    });
+
+    // Click the add component from the component card
+    fireEvent.click(screen.queryAllByRole('button', { name: 'Add' })[0]);
+
+    expect(postMessageSpy).toHaveBeenCalledWith({
+      usageKey: 'lb:Axim:TEST:html:571fe018-f3ce-45c9-8f53-5dafcb422fdd',
+      type: 'pickerComponentSelected',
+      category: 'html',
+    }, '*');
+  });
+
+  it('should pick component using the component sidebar', async () => {
+    render(<ComponentPicker />);
+
+    expect(await screen.findByText('Test Library 1')).toBeInTheDocument();
+    fireEvent.click(screen.getByDisplayValue(/lib:sampletaxonomyorg1:tl1/i));
+
+    // Wait for the content library to load
+    await screen.findByText(/Change Library/i);
+    expect(await screen.findByText('Test Library 1')).toBeInTheDocument();
+
+    // Click on the component card to open the sidebar
+    fireEvent.click(screen.queryAllByText('Introduction to Testing')[0]);
+
+    const sidebar = await screen.findByTestId('library-sidebar');
+
+    // Click the add component from the component sidebar
+    fireEvent.click(within(sidebar).getByRole('button', { name: 'Add to Course' }));
+
+    expect(postMessageSpy).toHaveBeenCalledWith({
+      usageKey: 'lb:Axim:TEST:html:571fe018-f3ce-45c9-8f53-5dafcb422fdd',
+      type: 'pickerComponentSelected',
+      category: 'html',
+    }, '*');
+  });
+
+  it('should pick component inside a collection using the card', async () => {
+    render(<ComponentPicker />);
+
+    expect(await screen.findByText('Test Library 1')).toBeInTheDocument();
+    fireEvent.click(screen.getByDisplayValue(/lib:sampletaxonomyorg1:tl1/i));
+
+    // Wait for the content library to load
+    await screen.findByText(/Change Library/i);
+    expect(await screen.findByText('Test Library 1')).toBeInTheDocument();
+
+    // Click on the collection card to open the sidebar
+    fireEvent.click(screen.queryAllByText('Collection 1')[0]);
+
+    const sidebar = await screen.findByTestId('library-sidebar');
+
+    // Mock the collection search result
+    mockSearchResult(mockCollectionResult);
+
+    // Click the add component from the component card
+    fireEvent.click(within(sidebar).getByRole('button', { name: 'Open' }));
+
+    // Wait for the collection  to load
+    await screen.findByText(/Back to Library/i);
+    await screen.findByText('Introduction to Testing');
+
+    // Click the add component from the component card
+    fireEvent.click(screen.queryAllByRole('button', { name: 'Add' })[0]);
+
+    expect(postMessageSpy).toHaveBeenCalledWith({
+      usageKey: 'lb:Axim:TEST:html:571fe018-f3ce-45c9-8f53-5dafcb422fdd',
+      type: 'pickerComponentSelected',
+      category: 'html',
+    }, '*');
+  });
+
+  it('should pick component inside a collection using the sidebar', async () => {
+    render(<ComponentPicker />);
+
+    expect(await screen.findByText('Test Library 1')).toBeInTheDocument();
+    fireEvent.click(screen.getByDisplayValue(/lib:sampletaxonomyorg1:tl1/i));
+
+    // Wait for the content library to load
+    await screen.findByText(/Change Library/i);
+    expect(await screen.findByText('Test Library 1')).toBeInTheDocument();
+
+    // Click on the collection card to open the sidebar
+    fireEvent.click(screen.queryAllByText('Collection 1')[0]);
+
+    const sidebar = await screen.findByTestId('library-sidebar');
+
+    // Mock the collection search result
+    mockSearchResult(mockCollectionResult);
+
+    // Click the add component from the component card
+    fireEvent.click(within(sidebar).getByRole('button', { name: 'Open' }));
+
+    // Wait for the collection  to load
+    await screen.findByText(/Back to Library/i);
+    await screen.findByText('Introduction to Testing');
+
+    // Click on the collection card to open the sidebar
+    fireEvent.click(screen.getByText('Introduction to Testing'));
+
+    const collectionSidebar = await screen.findByTestId('library-sidebar');
+
+    // Click the add component from the collection sidebar
+    fireEvent.click(within(collectionSidebar).getByRole('button', { name: 'Add to Course' }));
+
+    expect(postMessageSpy).toHaveBeenCalledWith({
+      usageKey: 'lb:Axim:TEST:html:571fe018-f3ce-45c9-8f53-5dafcb422fdd',
+      type: 'pickerComponentSelected',
+      category: 'html',
+    }, '*');
+  });
+
+  it('should return to library selection', async () => {
+    render(<ComponentPicker />);
+
+    expect(await screen.findByText('Test Library 1')).toBeInTheDocument();
+    fireEvent.click(screen.getByDisplayValue(/lib:sampletaxonomyorg1:tl1/i));
+
+    // Wait for the content library to load
+    await screen.findByText(/Change Library/i);
+    fireEvent.click(screen.getByText(/Change Library/i));
+
+    await screen.findByText('Select which Library would you like to reference components from.');
+  });
+
+  it('should pick multiple components using the component card button', async () => {
+    const onChange = jest.fn();
+    render(<ComponentPicker componentPickerMode="multiple" onChangeComponentSelection={onChange} />);
+
+    expect(await screen.findByText('Test Library 1')).toBeInTheDocument();
+    fireEvent.click(screen.getByDisplayValue(/lib:sampletaxonomyorg1:tl1/i));
+
+    // Wait for the content library to load
+    await screen.findByText(/Change Library/i);
+    expect(await screen.findByText('Test Library 1')).toBeInTheDocument();
+
+    // Select the first component
+    fireEvent.click(screen.queryAllByRole('button', { name: 'Select' })[0]);
+    await waitFor(() => expect(onChange).toHaveBeenCalledWith([
+      {
+        usageKey: 'lb:Axim:TEST:html:571fe018-f3ce-45c9-8f53-5dafcb422fdd',
+        blockType: 'html',
+      },
+    ]));
+
+    onChange.mockClear();
+
+    // Select another component
+    fireEvent.click(screen.queryAllByRole('button', { name: 'Select' })[1]);
+    await waitFor(() => expect(onChange).toHaveBeenCalledWith([
+      {
+        usageKey: 'lb:Axim:TEST:html:571fe018-f3ce-45c9-8f53-5dafcb422fdd',
+        blockType: 'html',
+      },
+      {
+        blockType: 'html',
+        usageKey: 'lb:Axim:TEST:html:73a22298-bcd9-4f4c-ae34-0bc2b0612480',
+      },
+    ]));
+
+    onChange.mockClear();
+
+    // Deselect the first component
+    fireEvent.click(screen.queryAllByRole('button', { name: 'Select' })[0]);
+    await waitFor(() => expect(onChange).toHaveBeenCalledWith([
+      {
+        blockType: 'html',
+        usageKey: 'lb:Axim:TEST:html:73a22298-bcd9-4f4c-ae34-0bc2b0612480',
+      },
+    ]));
+  });
+
+  it('should pick multilpe components using the component sidebar', async () => {
+    const onChange = jest.fn();
+    render(<ComponentPicker componentPickerMode="multiple" onChangeComponentSelection={onChange} />);
+
+    expect(await screen.findByText('Test Library 1')).toBeInTheDocument();
+    fireEvent.click(screen.getByDisplayValue(/lib:sampletaxonomyorg1:tl1/i));
+
+    // Wait for the content library to load
+    await screen.findByText(/Change Library/i);
+    expect(await screen.findByText('Test Library 1')).toBeInTheDocument();
+
+    // Click on the component card to open the sidebar
+    fireEvent.click(screen.queryAllByText('Introduction to Testing')[0]);
+
+    const sidebar = await screen.findByTestId('library-sidebar');
+
+    // Click the select component from the component sidebar
+    fireEvent.click(within(sidebar).getByRole('button', { name: 'Select' }));
+
+    await waitFor(() => expect(onChange).toHaveBeenCalledWith([
+      {
+        usageKey: 'lb:Axim:TEST:html:571fe018-f3ce-45c9-8f53-5dafcb422fdd',
+        blockType: 'html',
+      },
+    ]));
+
+    onChange.mockClear();
+
+    // Click to deselect component from the component sidebar
+    fireEvent.click(within(sidebar).getByRole('button', { name: 'Select' }));
+
+    await waitFor(() => expect(onChange).toHaveBeenCalledWith([]));
+  });
+
+  it('should display an alert banner when showOnlyPublished is true', async () => {
+    render(<ComponentPicker />);
+
+    expect(await screen.findByText('Test Library 1')).toBeInTheDocument();
+    fireEvent.click(screen.getByDisplayValue(/lib:sampletaxonomyorg1:tl1/i));
+
+    // Wait for the content library to load
+    await screen.findByText(/Only published content is visible and available for reuse./i);
+  });
+});
diff --git a/src/library-authoring/component-picker/ComponentPicker.tsx b/src/library-authoring/component-picker/ComponentPicker.tsx
new file mode 100644
index 0000000000..67d47d78b7
--- /dev/null
+++ b/src/library-authoring/component-picker/ComponentPicker.tsx
@@ -0,0 +1,124 @@
+import React, { useState } from 'react';
+import { useLocation } from 'react-router-dom';
+import { Alert, Stepper } from '@openedx/paragon';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+
+import {
+  type ComponentSelectedEvent,
+  type ComponentSelectionChangedEvent,
+  ComponentPickerProvider,
+} from '../common/context/ComponentPickerContext';
+import { LibraryProvider, useLibraryContext } from '../common/context/LibraryContext';
+import { SidebarProvider } from '../common/context/SidebarContext';
+import LibraryAuthoringPage from '../LibraryAuthoringPage';
+import LibraryCollectionPage from '../collections/LibraryCollectionPage';
+import SelectLibrary from './SelectLibrary';
+import messages from './messages';
+
+interface LibraryComponentPickerProps {
+  returnToLibrarySelection: () => void;
+}
+
+const InnerComponentPicker: React.FC<LibraryComponentPickerProps> = ({ returnToLibrarySelection }) => {
+  const { collectionId } = useLibraryContext();
+
+  if (collectionId) {
+    return <LibraryCollectionPage />;
+  }
+  return <LibraryAuthoringPage returnToLibrarySelection={returnToLibrarySelection} />;
+};
+
+/** Default handler in single-select mode. Used by the legacy UI for adding a single selected component to a course. */
+const defaultComponentSelectedCallback: ComponentSelectedEvent = ({ usageKey, blockType }) => {
+  window.parent.postMessage({ usageKey, type: 'pickerComponentSelected', category: blockType }, '*');
+};
+
+/** Default handler in multi-select mode. Used by the legacy UI for adding components to a problem bank. */
+const defaultSelectionChangedCallback: ComponentSelectionChangedEvent = (selections) => {
+  window.parent.postMessage({ type: 'pickerSelectionChanged', selections }, '*');
+};
+
+type ComponentPickerProps = { libraryId?: string, showOnlyPublished?: boolean } & (
+  {
+    componentPickerMode?: 'single',
+    onComponentSelected?: ComponentSelectedEvent,
+    onChangeComponentSelection?: never,
+  } | {
+    componentPickerMode: 'multiple'
+    onComponentSelected?: never,
+    onChangeComponentSelection?: ComponentSelectionChangedEvent,
+  }
+);
+
+export const ComponentPicker: React.FC<ComponentPickerProps> = ({
+  /** Restrict the component picker to a specific library */
+  libraryId,
+  showOnlyPublished,
+  componentPickerMode = 'single',
+  /** This default callback is used to send the selected component back to the parent window,
+   * when the component picker is used in an iframe.
+   */
+  onComponentSelected = defaultComponentSelectedCallback,
+  onChangeComponentSelection = defaultSelectionChangedCallback,
+}) => {
+  const [currentStep, setCurrentStep] = useState(!libraryId ? 'select-library' : 'pick-components');
+  const [selectedLibrary, setSelectedLibrary] = useState(libraryId || '');
+
+  const location = useLocation();
+
+  const queryParams = new URLSearchParams(location.search);
+  const variant = queryParams.get('variant') || 'draft';
+  const calcShowOnlyPublished = variant === 'published' || showOnlyPublished;
+
+  const handleLibrarySelection = (library: string) => {
+    setCurrentStep('pick-components');
+    setSelectedLibrary(library);
+  };
+
+  const returnToLibrarySelection = () => {
+    setCurrentStep('select-library');
+    setSelectedLibrary('');
+  };
+
+  const restrictToLibrary = !!libraryId;
+
+  const componentPickerProviderProps = componentPickerMode === 'single' ? {
+    componentPickerMode,
+    onComponentSelected,
+    restrictToLibrary,
+  } : {
+    componentPickerMode,
+    onChangeComponentSelection,
+    restrictToLibrary,
+  };
+
+  return (
+    <Stepper
+      activeKey={currentStep}
+    >
+      <Stepper.Step eventKey="select-library" title="Select a library">
+        <SelectLibrary selectedLibrary={selectedLibrary} setSelectedLibrary={handleLibrarySelection} />
+      </Stepper.Step>
+
+      <Stepper.Step eventKey="pick-components" title="Pick some components">
+        <ComponentPickerProvider {...componentPickerProviderProps}>
+          <LibraryProvider
+            libraryId={selectedLibrary}
+            showOnlyPublished={calcShowOnlyPublished}
+            initializeFromUrl={false}
+          >
+            <SidebarProvider>
+              { calcShowOnlyPublished
+                && (
+                <Alert variant="info" className="m-2">
+                  <FormattedMessage {...messages.pickerInfoBanner} />
+                </Alert>
+                )}
+              <InnerComponentPicker returnToLibrarySelection={returnToLibrarySelection} />
+            </SidebarProvider>
+          </LibraryProvider>
+        </ComponentPickerProvider>
+      </Stepper.Step>
+    </Stepper>
+  );
+};
diff --git a/src/library-authoring/component-picker/SelectLibrary.test.tsx b/src/library-authoring/component-picker/SelectLibrary.test.tsx
new file mode 100644
index 0000000000..aea3aa4b79
--- /dev/null
+++ b/src/library-authoring/component-picker/SelectLibrary.test.tsx
@@ -0,0 +1,56 @@
+import {
+  initializeMocks,
+  fireEvent,
+  render,
+  screen,
+} from '../../testUtils';
+import {
+  mockGetContentLibraryV2List,
+} from '../data/api.mocks';
+import { ComponentPicker } from './ComponentPicker';
+
+describe('<ComponentPicker />', () => {
+  beforeEach(() => {
+    initializeMocks();
+  });
+
+  it('should render the library list', async () => {
+    mockGetContentLibraryV2List.applyMock();
+    render(<ComponentPicker />);
+
+    expect(await screen.findByText('Test Library 1')).toBeInTheDocument();
+    expect(await screen.findByText('Test Library 1')).toBeInTheDocument();
+  });
+
+  it('should render the loading status', async () => {
+    mockGetContentLibraryV2List.applyMockLoading();
+    render(<ComponentPicker />);
+
+    expect(await screen.findByText('Loading...')).toBeInTheDocument();
+  });
+
+  it('should render the no library status', async () => {
+    mockGetContentLibraryV2List.applyMockEmpty();
+    render(<ComponentPicker />);
+
+    expect(await screen.findByText(/you don't have any libraries created yet,/i)).toBeInTheDocument();
+  });
+
+  it('should render the no search result status', async () => {
+    mockGetContentLibraryV2List.applyMockEmpty();
+    render(<ComponentPicker />);
+
+    const searchField = await screen.findByPlaceholderText('Search for a library');
+    fireEvent.change(searchField, { target: { value: 'test' } });
+    fireEvent.submit(searchField);
+
+    expect(await screen.findByText(/there are no libraries with the current filters/i)).toBeInTheDocument();
+  });
+
+  it('should render the error status', async () => {
+    mockGetContentLibraryV2List.applyMockError();
+    render(<ComponentPicker />);
+
+    expect(await screen.findByText(/mocked request failed with status code 500/i)).toBeInTheDocument();
+  });
+});
diff --git a/src/library-authoring/component-picker/SelectLibrary.tsx b/src/library-authoring/component-picker/SelectLibrary.tsx
new file mode 100644
index 0000000000..2181d5c1f1
--- /dev/null
+++ b/src/library-authoring/component-picker/SelectLibrary.tsx
@@ -0,0 +1,129 @@
+import { useIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
+import {
+  Alert,
+  Card,
+  Form,
+  Pagination,
+  SearchField,
+  Stack,
+} from '@openedx/paragon';
+import { useCallback, useState } from 'react';
+
+import Loading from '../../generic/Loading';
+import AlertError from '../../generic/alert-error';
+import { useContentLibraryV2List } from '../data/apiHooks';
+import messages from './messages';
+
+interface EmptyStateProps {
+  hasSearchQuery: boolean;
+}
+
+const EmptyState = ({ hasSearchQuery }: EmptyStateProps) => (
+  <Alert className="mt-4 align-self-center">
+    <Alert.Heading>
+      {hasSearchQuery ? (
+        <FormattedMessage {...messages.selectLibraryNoSearchResultsTitle} />
+      ) : (
+        <FormattedMessage {...messages.selectLibraryNoLibrariesTitle} />
+      )}
+    </Alert.Heading>
+    <p>
+      {hasSearchQuery ? (
+        <FormattedMessage {...messages.selectLibraryNoSearchResultsMessage} />
+      ) : (
+        <FormattedMessage {...messages.selectLibraryNoLibrariesMessage} />
+      )}
+    </p>
+  </Alert>
+);
+
+interface SelectLibraryProps {
+  selectedLibrary: string;
+  setSelectedLibrary: (libraryKey: string) => void;
+}
+
+const SelectLibrary = ({ selectedLibrary, setSelectedLibrary }: SelectLibraryProps) => {
+  const intl = useIntl();
+
+  const [searchQuery, setSearchQuery] = useState('');
+  const [currentPage, setCurrentPage] = useState(1);
+
+  const handleSearch = useCallback((search: string) => {
+    setSearchQuery(search);
+    setCurrentPage(1);
+  }, []);
+
+  const {
+    data,
+    isLoading,
+    isError,
+    error,
+  } = useContentLibraryV2List({
+    page: currentPage,
+    pageSize: 5,
+    search: searchQuery,
+  });
+
+  if (isError) {
+    return <AlertError error={error} />;
+  }
+
+  if (isLoading) {
+    return <Loading />;
+  }
+
+  return (
+    <Stack gap={2} className="p-5">
+      <small className="text-primary-700">
+        {intl.formatMessage(messages.selectLibraryInfo)}
+      </small>
+      <SearchField
+        onSubmit={handleSearch}
+        onChange={handleSearch}
+        value={searchQuery}
+        placeholder={intl.formatMessage(messages.selectLibrarySearchPlaceholder)}
+      />
+      {data.results.length === 0 ? (<EmptyState hasSearchQuery={!!searchQuery} />) : (
+        <>
+          <Form.RadioSet
+            name="selected-library"
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSelectedLibrary(e.target.value)}
+            value={selectedLibrary}
+            className="mt-4"
+          >
+            {data.results.map((library) => (
+              <Card
+                key={library.id}
+                isClickable
+                onClick={() => setSelectedLibrary(library.id)}
+                className="card-item"
+              >
+                <Card.Header
+                  size="sm"
+                  title={<span className="card-item-title">{library.title}</span>}
+                  subtitle={`${library.org} / ${library.slug}`}
+                  actions={(
+                    <Form.Radio value={library.id} name={`select-library-${library.id}`}>{' '}</Form.Radio>
+                  )}
+                />
+                <Card.Body>
+                  <p>{library.description}</p>
+                </Card.Body>
+              </Card>
+            ))}
+          </Form.RadioSet>
+          <Pagination
+            paginationLabel={intl.formatMessage(messages.selectLibraryPaginationLabel)}
+            pageCount={data!.numPages}
+            currentPage={data!.currentPage}
+            onPageSelect={setCurrentPage}
+            variant="secondary"
+            className="align-self-center"
+          />
+        </>
+      )}
+    </Stack>
+  );
+};
+
+export default SelectLibrary;
diff --git a/src/library-authoring/component-picker/index.ts b/src/library-authoring/component-picker/index.ts
new file mode 100644
index 0000000000..5d2ce68f76
--- /dev/null
+++ b/src/library-authoring/component-picker/index.ts
@@ -0,0 +1 @@
+export { ComponentPicker } from './ComponentPicker';
diff --git a/src/library-authoring/component-picker/messages.ts b/src/library-authoring/component-picker/messages.ts
new file mode 100644
index 0000000000..963a761bdb
--- /dev/null
+++ b/src/library-authoring/component-picker/messages.ts
@@ -0,0 +1,52 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  selectLibraryInfo: {
+    id: 'course-authoring.library-authoring.pick-components.select-library.info',
+    defaultMessage: 'Select which Library would you like to reference components from.',
+    description: 'The info text for the select library component',
+  },
+  selectLibrarySearchPlaceholder: {
+    id: 'course-authoring.library-authoring.pick-components.select-library.search-placeholder',
+    defaultMessage: 'Search for a library',
+    description: 'The placeholder text for the search field in the select library component',
+  },
+  selectLibraryPaginationLabel: {
+    id: 'course-authoring.library-authoring.pick-components.select-library.pagination-label',
+    defaultMessage: 'Library pagination',
+    description: 'The pagination label for the select library component',
+  },
+  selectLibraryNoSearchResultsTitle: {
+    id: 'course-authoring.library-authoring.pick-components.select-library.no-search.results.title',
+    defaultMessage: 'We could not find any result',
+    description: 'The title for the no search results state in the select library component',
+  },
+  selectLibraryNoSearchResultsMessage: {
+    id: 'course-authoring.library-authoring.pick-components.select-library.no-search.message',
+    defaultMessage: 'There are no libraries with the current filters.',
+    description: 'The message for the no search results state in the select library component',
+  },
+  selectLibraryNoLibrariesTitle: {
+    id: 'course-authoring.library-authoring.pick-components.select-library.no-libraries.title',
+    defaultMessage: 'No libraries found',
+    description: 'The title for the no libraries state in the select library component',
+  },
+  selectLibraryNoLibrariesMessage: {
+    id: 'course-authoring.library-authoring.pick-components.select-library.no-libraries.message',
+    defaultMessage: 'You don\'t have any libraries created yet, or you don\'t have access to any libraries. To '
+      + 'create a new library, go to Studio Home or contact your system administrator.',
+    description: 'The message for the no libraries state in the select library component',
+  },
+  selectLibraryNextButton: {
+    id: 'course-authoring.library-authoring.pick-components.select-library.next-button',
+    defaultMessage: 'Next',
+    description: 'The text for the next button in the select library component',
+  },
+  pickerInfoBanner: {
+    id: 'course-authoring.library-authoring.pick-components.component-picker.information-alert',
+    defaultMessage: 'Only published content is visible and available for reuse.',
+    description: 'The alert text on top of component-picker if only published content is visible.',
+  },
+});
+
+export default messages;
diff --git a/src/library-authoring/components/BaseComponentCard.tsx b/src/library-authoring/components/BaseComponentCard.tsx
new file mode 100644
index 0000000000..00ccc00165
--- /dev/null
+++ b/src/library-authoring/components/BaseComponentCard.tsx
@@ -0,0 +1,86 @@
+import React, { useMemo } from 'react';
+import {
+  Card,
+  Container,
+  Icon,
+  Stack,
+} from '@openedx/paragon';
+
+import { getItemIcon, getComponentStyleColor } from '../../generic/block-type-utils';
+import TagCount from '../../generic/tag-count';
+import { BlockTypeLabel, type ContentHitTags, Highlight } from '../../search-manager';
+
+type BaseComponentCardProps = {
+  componentType: string,
+  displayName: string, description: string,
+  numChildren?: number,
+  tags: ContentHitTags,
+  actions: React.ReactNode,
+  onSelect: () => void
+};
+
+const BaseComponentCard = ({
+  componentType,
+  displayName,
+  description,
+  numChildren,
+  tags,
+  actions,
+  onSelect,
+} : BaseComponentCardProps) => {
+  const tagCount = useMemo(() => {
+    if (!tags) {
+      return 0;
+    }
+    return (tags.level0?.length || 0) + (tags.level1?.length || 0)
+            + (tags.level2?.length || 0) + (tags.level3?.length || 0);
+  }, [tags]);
+
+  const componentIcon = getItemIcon(componentType);
+
+  return (
+    <Container className="library-component-card">
+      <Card
+        isClickable
+        onClick={onSelect}
+        onKeyDown={(e: React.KeyboardEvent) => {
+          if (['Enter', ' '].includes(e.key)) {
+            onSelect();
+          }
+        }}
+      >
+        <Card.Header
+          className={`library-component-header ${getComponentStyleColor(componentType)}`}
+          title={
+            <Icon src={componentIcon} className="library-component-header-icon" />
+          }
+          actions={
+            // Wrap the actions in a div to prevent the card from being clicked when the actions are clicked
+            /* eslint-disable-next-line jsx-a11y/click-events-have-key-events,
+            jsx-a11y/no-static-element-interactions */
+            <div onClick={(e) => e.stopPropagation()}>{actions}</div>
+          }
+        />
+        <Card.Body>
+          <Card.Section>
+            <Stack direction="horizontal" className="d-flex justify-content-between">
+              <Stack direction="horizontal" gap={1}>
+                <Icon src={componentIcon} size="sm" />
+                <span className="small">
+                  <BlockTypeLabel blockType={componentType} count={numChildren} />
+                </span>
+              </Stack>
+              <TagCount count={tagCount} />
+            </Stack>
+            <div className="text-truncate h3 mt-2">
+              <Highlight text={displayName} />
+            </div>
+            <Highlight text={description} />
+          </Card.Section>
+        </Card.Body>
+      </Card>
+    </Container>
+  );
+};
+
+export default BaseComponentCard;
diff --git a/src/library-authoring/components/CollectionCard.test.tsx b/src/library-authoring/components/CollectionCard.test.tsx
new file mode 100644
index 0000000000..3f7dc7fc88
--- /dev/null
+++ b/src/library-authoring/components/CollectionCard.test.tsx
@@ -0,0 +1,158 @@
+import userEvent from '@testing-library/user-event';
+import type MockAdapter from 'axios-mock-adapter';
+
+import {
+  initializeMocks, render as baseRender, screen, waitFor, waitForElementToBeRemoved, within,
+} from '../../testUtils';
+import { LibraryProvider } from '../common/context/LibraryContext';
+import { type CollectionHit } from '../../search-manager';
+import CollectionCard from './CollectionCard';
+import messages from './messages';
+import { getLibraryCollectionApiUrl, getLibraryCollectionRestoreApiUrl } from '../data/api';
+
+const CollectionHitSample: CollectionHit = {
+  id: 'lib-collectionorg1democourse-collection-display-name',
+  type: 'collection',
+  contextKey: 'lb:org1:Demo_Course',
+  usageKey: 'lib-collection:org1:Demo_Course:collection-display-name',
+  org: 'org1',
+  blockId: 'collection-display-name',
+  breadcrumbs: [{ displayName: 'Demo Lib' }],
+  displayName: 'Collection Display Name',
+  description: 'Collection description',
+  formatted: {
+    displayName: 'Collection Display Formated Name',
+    description: 'Collection description',
+  },
+  created: 1722434322294,
+  modified: 1722434322294,
+  numChildren: 2,
+  published: {
+    numChildren: 1,
+  },
+  tags: {},
+};
+
+let axiosMock: MockAdapter;
+let mockShowToast;
+
+const render = (ui: React.ReactElement, showOnlyPublished: boolean = false) => baseRender(ui, {
+  extraWrapper: ({ children }) => (
+    <LibraryProvider
+      libraryId="lib:Axim:TEST"
+      showOnlyPublished={showOnlyPublished}
+    >
+      {children}
+    </LibraryProvider>
+  ),
+});
+
+describe('<CollectionCard />', () => {
+  beforeEach(() => {
+    const mocks = initializeMocks();
+    axiosMock = mocks.axiosMock;
+    mockShowToast = mocks.mockShowToast;
+  });
+
+  it('should render the card with title and description', () => {
+    render(<CollectionCard collectionHit={CollectionHitSample} />);
+
+    expect(screen.queryByText('Collection Display Formated Name')).toBeInTheDocument();
+    expect(screen.queryByText('Collection description')).toBeInTheDocument();
+    expect(screen.queryByText('Collection (2)')).toBeInTheDocument();
+  });
+
+  it('should render published content', () => {
+    render(<CollectionCard collectionHit={CollectionHitSample} />, true);
+
+    expect(screen.queryByText('Collection Display Formated Name')).toBeInTheDocument();
+    expect(screen.queryByText('Collection description')).toBeInTheDocument();
+    expect(screen.queryByText('Collection (1)')).toBeInTheDocument();
+  });
+
+  it('should navigate to the collection if the open menu clicked', async () => {
+    render(<CollectionCard collectionHit={CollectionHitSample} />);
+
+    // Open menu
+    expect(screen.getByTestId('collection-card-menu-toggle')).toBeInTheDocument();
+    userEvent.click(screen.getByTestId('collection-card-menu-toggle'));
+
+    // Open menu item
+    const openMenuItem = screen.getByRole('link', { name: 'Open' });
+    expect(openMenuItem).toBeInTheDocument();
+
+    expect(openMenuItem).toHaveAttribute('href', '/library/lb:org1:Demo_Course/collection/collection-display-name');
+  });
+
+  it('should show confirmation box, delete collection and show toast to undo deletion', async () => {
+    const url = getLibraryCollectionApiUrl(CollectionHitSample.contextKey, CollectionHitSample.blockId);
+    axiosMock.onDelete(url).reply(204);
+    render(<CollectionCard collectionHit={CollectionHitSample} />);
+
+    expect(screen.queryByText('Collection Display Formated Name')).toBeInTheDocument();
+    // Open menu
+    let menuBtn = await screen.findByRole('button', { name: messages.collectionCardMenuAlt.defaultMessage });
+    userEvent.click(menuBtn);
+    // find and click delete menu option.
+    expect(screen.queryByText('Delete')).toBeInTheDocument();
+    let deleteBtn = await screen.findByRole('button', { name: 'Delete' });
+    userEvent.click(deleteBtn);
+    // verify confirmation dialog and click on cancel button
+    let dialog = await screen.findByRole('dialog', { name: 'Delete this collection?' });
+    expect(dialog).toBeInTheDocument();
+    const cancelBtn = await screen.findByRole('button', { name: 'Cancel' });
+    userEvent.click(cancelBtn);
+    expect(axiosMock.history.delete.length).toEqual(0);
+    expect(cancelBtn).not.toBeInTheDocument();
+
+    // Open menu
+    menuBtn = await screen.findByRole('button', { name: messages.collectionCardMenuAlt.defaultMessage });
+    userEvent.click(menuBtn);
+    // click on confirm button to delete
+    deleteBtn = await screen.findByRole('button', { name: 'Delete' });
+    userEvent.click(deleteBtn);
+    dialog = await screen.findByRole('dialog', { name: 'Delete this collection?' });
+    const confirmBtn = await within(dialog).findByRole('button', { name: 'Delete' });
+    userEvent.click(confirmBtn);
+    await waitForElementToBeRemoved(() => screen.queryByRole('dialog', { name: 'Delete this collection?' }));
+
+    await waitFor(() => {
+      expect(axiosMock.history.delete.length).toEqual(1);
+      expect(mockShowToast).toHaveBeenCalled();
+    });
+    // Get restore / undo func from the toast
+    const restoreFn = mockShowToast.mock.calls[0][1].onClick;
+
+    const restoreUrl = getLibraryCollectionRestoreApiUrl(CollectionHitSample.contextKey, CollectionHitSample.blockId);
+    axiosMock.onPost(restoreUrl).reply(200);
+    // restore collection
+    restoreFn();
+    await waitFor(() => {
+      expect(axiosMock.history.post.length).toEqual(1);
+      expect(mockShowToast).toHaveBeenCalledWith('Undo successful');
+    });
+  });
+
+  it('should show failed toast on delete collection failure', async () => {
+    const url = getLibraryCollectionApiUrl(CollectionHitSample.contextKey, CollectionHitSample.blockId);
+    axiosMock.onDelete(url).reply(404);
+    render(<CollectionCard collectionHit={CollectionHitSample} />);
+
+    expect(screen.queryByText('Collection Display Formated Name')).toBeInTheDocument();
+    // Open menu
+    const menuBtn = await screen.findByRole('button', { name: messages.collectionCardMenuAlt.defaultMessage });
+    userEvent.click(menuBtn);
+    // find and click delete menu option.
+    const deleteBtn = await screen.findByRole('button', { name: 'Delete' });
+    userEvent.click(deleteBtn);
+    const dialog = await screen.findByRole('dialog', { name: 'Delete this collection?' });
+    const confirmBtn = await within(dialog).findByRole('button', { name: 'Delete' });
+    userEvent.click(confirmBtn);
+    await waitForElementToBeRemoved(() => screen.queryByRole('dialog', { name: 'Delete this collection?' }));
+
+    await waitFor(() => {
+      expect(axiosMock.history.delete.length).toEqual(1);
+      expect(mockShowToast).toHaveBeenCalledWith('Failed to delete collection');
+    });
+  });
+});
diff --git a/src/library-authoring/components/CollectionCard.tsx b/src/library-authoring/components/CollectionCard.tsx
new file mode 100644
index 0000000000..aa5f9d07e6
--- /dev/null
+++ b/src/library-authoring/components/CollectionCard.tsx
@@ -0,0 +1,154 @@
+import { useCallback, useContext } from 'react';
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
+import {
+  ActionRow,
+  Dropdown,
+  Icon,
+  IconButton,
+  useToggle,
+} from '@openedx/paragon';
+import { MoreVert } from '@openedx/paragon/icons';
+import { Link } from 'react-router-dom';
+
+import { type CollectionHit } from '../../search-manager';
+import { useComponentPickerContext } from '../common/context/ComponentPickerContext';
+import { useLibraryContext } from '../common/context/LibraryContext';
+import { useSidebarContext } from '../common/context/SidebarContext';
+import { useLibraryRoutes } from '../routes';
+import BaseComponentCard from './BaseComponentCard';
+import { ToastContext } from '../../generic/toast-context';
+import { useDeleteCollection, useRestoreCollection } from '../data/apiHooks';
+import DeleteModal from '../../generic/delete-modal/DeleteModal';
+import messages from './messages';
+
+type CollectionMenuProps = {
+  collectionHit: CollectionHit,
+};
+
+const CollectionMenu = ({ collectionHit } : CollectionMenuProps) => {
+  const intl = useIntl();
+  const { showToast } = useContext(ToastContext);
+  const [isDeleteModalOpen, openDeleteModal, closeDeleteModal] = useToggle(false);
+  const { closeLibrarySidebar, sidebarComponentInfo } = useSidebarContext();
+
+  const restoreCollectionMutation = useRestoreCollection(collectionHit.contextKey, collectionHit.blockId);
+  const restoreCollection = useCallback(() => {
+    restoreCollectionMutation.mutateAsync()
+      .then(() => {
+        showToast(intl.formatMessage(messages.undoDeleteCollectionToastMessage));
+      }).catch(() => {
+        showToast(intl.formatMessage(messages.undoDeleteCollectionToastFailed));
+      });
+  }, []);
+
+  const deleteCollectionMutation = useDeleteCollection(collectionHit.contextKey, collectionHit.blockId);
+  const deleteCollection = useCallback(async () => {
+    if (sidebarComponentInfo?.id === collectionHit.blockId) {
+      // Close sidebar if current collection is open to avoid displaying
+      // deleted collection in sidebar
+      closeLibrarySidebar();
+    }
+    try {
+      await deleteCollectionMutation.mutateAsync();
+      showToast(
+        intl.formatMessage(messages.deleteCollectionSuccess),
+        {
+          label: intl.formatMessage(messages.undoDeleteCollectionToastAction),
+          onClick: restoreCollection,
+        },
+      );
+    } catch (e) {
+      showToast(intl.formatMessage(messages.deleteCollectionFailed));
+    } finally {
+      closeDeleteModal();
+    }
+  }, [sidebarComponentInfo?.id]);
+
+  return (
+    <>
+      <Dropdown id="collection-card-dropdown">
+        <Dropdown.Toggle
+          id="collection-card-menu-toggle"
+          as={IconButton}
+          src={MoreVert}
+          iconAs={Icon}
+          variant="primary"
+          alt={intl.formatMessage(messages.collectionCardMenuAlt)}
+          data-testid="collection-card-menu-toggle"
+        />
+        <Dropdown.Menu>
+          <Dropdown.Item
+            as={Link}
+            to={`/library/${collectionHit.contextKey}/collection/${collectionHit.blockId}`}
+          >
+            <FormattedMessage {...messages.menuOpen} />
+          </Dropdown.Item>
+          <Dropdown.Item onClick={openDeleteModal}>
+            <FormattedMessage {...messages.deleteCollection} />
+          </Dropdown.Item>
+        </Dropdown.Menu>
+      </Dropdown>
+      <DeleteModal
+        isOpen={isDeleteModalOpen}
+        close={closeDeleteModal}
+        variant="warning"
+        category={collectionHit.type}
+        description={intl.formatMessage(messages.deleteCollectionConfirm, {
+          collectionTitle: collectionHit.displayName,
+        })}
+        onDeleteSubmit={deleteCollection}
+      />
+    </>
+  );
+};
+
+type CollectionCardProps = {
+  collectionHit: CollectionHit,
+};
+
+const CollectionCard = ({ collectionHit } : CollectionCardProps) => {
+  const { componentPickerMode } = useComponentPickerContext();
+  const { showOnlyPublished } = useLibraryContext();
+  const { openCollectionInfoSidebar } = useSidebarContext();
+
+  const {
+    type: componentType,
+    blockId: collectionId,
+    formatted,
+    tags,
+    numChildren,
+    published,
+  } = collectionHit;
+
+  const numChildrenCount = showOnlyPublished ? (
+    published?.numChildren || 0
+  ) : numChildren;
+
+  const { displayName = '', description = '' } = formatted;
+
+  const { navigateTo } = useLibraryRoutes();
+  const openCollection = useCallback(() => {
+    if (!componentPickerMode) {
+      navigateTo({ collectionId });
+    }
+    openCollectionInfoSidebar(collectionId);
+  }, [collectionId, navigateTo, openCollectionInfoSidebar]);
+
+  return (
+    <BaseComponentCard
+      componentType={componentType}
+      displayName={displayName}
+      description={description}
+      tags={tags}
+      numChildren={numChildrenCount}
+      actions={!componentPickerMode && (
+        <ActionRow>
+          <CollectionMenu collectionHit={collectionHit} />
+        </ActionRow>
+      )}
+      onSelect={openCollection}
+    />
+  );
+};
+
+export default CollectionCard;
diff --git a/src/library-authoring/components/ComponentCard.scss b/src/library-authoring/components/ComponentCard.scss
new file mode 100644
index 0000000000..cdf72300e6
--- /dev/null
+++ b/src/library-authoring/components/ComponentCard.scss
@@ -0,0 +1,24 @@
+.library-component-card {
+  .pgn__card {
+    height: 100%
+  }
+
+  .library-component-header {
+    border-top-left-radius: .375rem;
+    border-top-right-radius: .375rem;
+    padding: 0 .5rem 0 1.25rem;
+
+    .library-component-header-icon {
+      width: 2.3rem;
+      height: 2.3rem;
+    }
+
+    .pgn__card-header-content {
+      margin-top: .55rem;
+    }
+
+    .pgn__card-header-actions {
+      margin: .25rem 0 .25rem 1rem;
+    }
+  }
+}
diff --git a/src/library-authoring/components/ComponentCard.test.tsx b/src/library-authoring/components/ComponentCard.test.tsx
new file mode 100644
index 0000000000..9d0c53a304
--- /dev/null
+++ b/src/library-authoring/components/ComponentCard.test.tsx
@@ -0,0 +1,110 @@
+import {
+  fireEvent,
+  render as baseRender,
+  screen,
+  waitFor,
+  initializeMocks,
+} from '../../testUtils';
+import { LibraryProvider } from '../common/context/LibraryContext';
+import { getClipboardUrl } from '../../generic/data/api';
+import { ContentHit } from '../../search-manager';
+import ComponentCard from './ComponentCard';
+
+const contentHit: ContentHit = {
+  id: '1',
+  usageKey: 'lb:org1:demolib:html:a1fa8bdd-dc67-4976-9bf5-0ea75a9bca3d',
+  type: 'library_block',
+  blockId: 'a1fa8bdd-dc67-4976-9bf5-0ea75a9bca3d',
+  contextKey: 'lib:org1:Demo_Course',
+  org: 'org1',
+  breadcrumbs: [{ displayName: 'Demo Lib' }],
+  displayName: 'Text Display Name',
+  description: 'This is a text: ID=1',
+  formatted: {
+    displayName: 'Text Display Formated Name',
+    content: {
+      htmlContent: 'This is a text: ID=1',
+    },
+    description: 'This is a text: ID=1',
+  },
+  tags: {
+    level0: ['1', '2', '3'],
+  },
+  blockType: 'html',
+  created: 1722434322294,
+  modified: 1722434322294,
+  lastPublished: null,
+  collections: {},
+};
+
+const clipboardBroadcastChannelMock = {
+  postMessage: jest.fn(),
+  close: jest.fn(),
+};
+
+(global as any).BroadcastChannel = jest.fn(() => clipboardBroadcastChannelMock);
+
+const libraryId = 'lib:org1:Demo_Course';
+const render = () => baseRender(<ComponentCard contentHit={contentHit} />, {
+  extraWrapper: ({ children }) => (
+    <LibraryProvider libraryId={libraryId}>
+      { children }
+    </LibraryProvider>
+  ),
+});
+
+describe('<ComponentCard />', () => {
+  it('should render the card with title and description', () => {
+    initializeMocks();
+    render();
+
+    expect(screen.getByText('Text Display Formated Name')).toBeInTheDocument();
+    expect(screen.getByText('This is a text: ID=1')).toBeInTheDocument();
+  });
+
+  it('should call the updateClipboard function when the copy button is clicked', async () => {
+    const { axiosMock, mockShowToast } = initializeMocks();
+    axiosMock.onPost(getClipboardUrl()).reply(200, {});
+    render();
+
+    // Open menu
+    expect(screen.getByTestId('component-card-menu-toggle')).toBeInTheDocument();
+    fireEvent.click(screen.getByTestId('component-card-menu-toggle'));
+
+    // Click copy to clipboard
+    expect(screen.getByRole('button', { name: 'Copy to clipboard' })).toBeInTheDocument();
+    fireEvent.click(screen.getByRole('button', { name: 'Copy to clipboard' }));
+
+    expect(axiosMock.history.post.length).toBe(1);
+    expect(axiosMock.history.post[0].data).toBe(
+      JSON.stringify({ usage_key: contentHit.usageKey }),
+    );
+
+    await waitFor(() => {
+      expect(mockShowToast).toHaveBeenCalledWith('Component copied to clipboard');
+    });
+  });
+
+  it('should show error message if the api call fails', async () => {
+    const { axiosMock, mockShowToast } = initializeMocks();
+    axiosMock.onPost(getClipboardUrl()).reply(400);
+    render();
+
+    // Open menu
+    expect(screen.getByTestId('component-card-menu-toggle')).toBeInTheDocument();
+    fireEvent.click(screen.getByTestId('component-card-menu-toggle'));
+
+    // Click copy to clipboard
+    expect(screen.getByRole('button', { name: 'Copy to clipboard' })).toBeInTheDocument();
+    fireEvent.click(screen.getByRole('button', { name: 'Copy to clipboard' }));
+
+    expect(axiosMock.history.post.length).toBe(1);
+    expect(axiosMock.history.post[0].data).toBe(
+      JSON.stringify({ usage_key: contentHit.usageKey }),
+    );
+
+    await waitFor(() => {
+      expect(mockShowToast).toHaveBeenCalledWith('Failed to copy component to clipboard');
+    });
+  });
+});
diff --git a/src/library-authoring/components/ComponentCard.tsx b/src/library-authoring/components/ComponentCard.tsx
new file mode 100644
index 0000000000..9e8f594a2c
--- /dev/null
+++ b/src/library-authoring/components/ComponentCard.tsx
@@ -0,0 +1,233 @@
+import { useCallback, useContext, useState } from 'react';
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
+import {
+  ActionRow,
+  Button,
+  Dropdown,
+  Icon,
+  IconButton,
+  useToggle,
+} from '@openedx/paragon';
+import {
+  AddCircleOutline,
+  CheckBoxIcon,
+  CheckBoxOutlineBlank,
+  MoreVert,
+} from '@openedx/paragon/icons';
+
+import { STUDIO_CLIPBOARD_CHANNEL } from '../../constants';
+import { updateClipboard } from '../../generic/data/api';
+import { ToastContext } from '../../generic/toast-context';
+import { type ContentHit } from '../../search-manager';
+import { useComponentPickerContext } from '../common/context/ComponentPickerContext';
+import { useLibraryContext } from '../common/context/LibraryContext';
+import { SidebarAdditionalActions, useSidebarContext } from '../common/context/SidebarContext';
+import { useRemoveComponentsFromCollection } from '../data/apiHooks';
+import { useLibraryRoutes } from '../routes';
+
+import BaseComponentCard from './BaseComponentCard';
+import { canEditComponent } from './ComponentEditorModal';
+import messages from './messages';
+import ComponentDeleter from './ComponentDeleter';
+
+type ComponentCardProps = {
+  contentHit: ContentHit,
+};
+
+export const ComponentMenu = ({ usageKey }: { usageKey: string }) => {
+  const intl = useIntl();
+  const {
+    libraryId,
+    collectionId,
+    openComponentEditor,
+  } = useLibraryContext();
+
+  const {
+    sidebarComponentInfo,
+    openComponentInfoSidebar,
+    closeLibrarySidebar,
+  } = useSidebarContext();
+
+  const canEdit = usageKey && canEditComponent(usageKey);
+  const { showToast } = useContext(ToastContext);
+  const [clipboardBroadcastChannel] = useState(() => new BroadcastChannel(STUDIO_CLIPBOARD_CHANNEL));
+  const removeComponentsMutation = useRemoveComponentsFromCollection(libraryId, collectionId);
+  const [isConfirmingDelete, confirmDelete, cancelDelete] = useToggle(false);
+
+  const updateClipboardClick = () => {
+    updateClipboard(usageKey)
+      .then((clipboardData) => {
+        clipboardBroadcastChannel.postMessage(clipboardData);
+        showToast(intl.formatMessage(messages.copyToClipboardSuccess));
+      })
+      .catch(() => showToast(intl.formatMessage(messages.copyToClipboardError)));
+  };
+
+  const removeFromCollection = () => {
+    removeComponentsMutation.mutateAsync([usageKey]).then(() => {
+      if (sidebarComponentInfo?.id === usageKey) {
+        // Close sidebar if current component is open
+        closeLibrarySidebar();
+      }
+      showToast(intl.formatMessage(messages.removeComponentSucess));
+    }).catch(() => {
+      showToast(intl.formatMessage(messages.removeComponentFailure));
+    });
+  };
+
+  const showManageCollections = () => {
+    openComponentInfoSidebar(usageKey, SidebarAdditionalActions.JumpToAddCollections);
+  };
+
+  return (
+    <Dropdown id="component-card-dropdown">
+      <Dropdown.Toggle
+        id="component-card-menu-toggle"
+        as={IconButton}
+        src={MoreVert}
+        iconAs={Icon}
+        variant="primary"
+        alt={intl.formatMessage(messages.componentCardMenuAlt)}
+        data-testid="component-card-menu-toggle"
+      />
+      <Dropdown.Menu>
+        <Dropdown.Item {...(canEdit ? { onClick: () => openComponentEditor(usageKey) } : { disabled: true })}>
+          <FormattedMessage {...messages.menuEdit} />
+        </Dropdown.Item>
+        <Dropdown.Item onClick={updateClipboardClick}>
+          <FormattedMessage {...messages.menuCopyToClipboard} />
+        </Dropdown.Item>
+        <Dropdown.Item onClick={confirmDelete}>
+          <FormattedMessage {...messages.menuDelete} />
+        </Dropdown.Item>
+        {collectionId && (
+          <Dropdown.Item onClick={removeFromCollection}>
+            <FormattedMessage {...messages.menuRemoveFromCollection} />
+          </Dropdown.Item>
+        )}
+        <Dropdown.Item onClick={showManageCollections}>
+          <FormattedMessage {...messages.menuAddToCollection} />
+        </Dropdown.Item>
+      </Dropdown.Menu>
+      <ComponentDeleter usageKey={usageKey} isConfirmingDelete={isConfirmingDelete} cancelDelete={cancelDelete} />
+    </Dropdown>
+  );
+};
+
+interface AddComponentWidgetProps {
+  usageKey: string;
+  blockType: string;
+}
+
+const AddComponentWidget = ({ usageKey, blockType }: AddComponentWidgetProps) => {
+  const intl = useIntl();
+
+  const {
+    componentPickerMode,
+    onComponentSelected,
+    addComponentToSelectedComponents,
+    removeComponentFromSelectedComponents,
+    selectedComponents,
+  } = useComponentPickerContext();
+
+  // istanbul ignore if: this should never happen
+  if (!usageKey) {
+    throw new Error('usageKey is required');
+  }
+
+  // istanbul ignore if: this should never happen
+  if (!componentPickerMode) {
+    return null;
+  }
+
+  if (componentPickerMode === 'single') {
+    return (
+      <Button
+        variant="outline-primary"
+        iconBefore={AddCircleOutline}
+        onClick={() => {
+          onComponentSelected({ usageKey, blockType });
+        }}
+      >
+        <FormattedMessage {...messages.componentPickerSingleSelectTitle} />
+      </Button>
+    );
+  }
+
+  if (componentPickerMode === 'multiple') {
+    const isChecked = selectedComponents.some((component) => component.usageKey === usageKey);
+
+    const handleChange = () => {
+      const selectedComponent = {
+        usageKey,
+        blockType,
+      };
+      if (!isChecked) {
+        addComponentToSelectedComponents(selectedComponent);
+      } else {
+        removeComponentFromSelectedComponents(selectedComponent);
+      }
+    };
+
+    return (
+      <Button
+        variant="outline-primary"
+        iconBefore={isChecked ? CheckBoxIcon : CheckBoxOutlineBlank}
+        onClick={handleChange}
+      >
+        {intl.formatMessage(messages.componentPickerMultipleSelectTitle)}
+      </Button>
+    );
+  }
+
+  // istanbul ignore next: this should never happen
+  return null;
+};
+
+const ComponentCard = ({ contentHit }: ComponentCardProps) => {
+  const { showOnlyPublished } = useLibraryContext();
+  const { openComponentInfoSidebar } = useSidebarContext();
+  const { componentPickerMode } = useComponentPickerContext();
+
+  const {
+    blockType,
+    formatted,
+    tags,
+    usageKey,
+  } = contentHit;
+  const componentDescription: string = (
+    showOnlyPublished ? formatted.published?.description : formatted.description
+  ) ?? '';
+  const displayName: string = (
+    showOnlyPublished ? formatted.published?.displayName : formatted.displayName
+  ) ?? '';
+
+  const { navigateTo } = useLibraryRoutes();
+  const openComponent = useCallback(() => {
+    if (!componentPickerMode) {
+      navigateTo({ componentId: usageKey });
+    }
+    openComponentInfoSidebar(usageKey);
+  }, [usageKey, navigateTo, openComponentInfoSidebar]);
+
+  return (
+    <BaseComponentCard
+      componentType={blockType}
+      displayName={displayName}
+      description={componentDescription}
+      tags={tags}
+      actions={(
+        <ActionRow>
+          {componentPickerMode ? (
+            <AddComponentWidget usageKey={usageKey} blockType={blockType} />
+          ) : (
+            <ComponentMenu usageKey={usageKey} />
+          )}
+        </ActionRow>
+      )}
+      onSelect={openComponent}
+    />
+  );
+};
+
+export default ComponentCard;
diff --git a/src/library-authoring/components/ComponentDeleter.test.tsx b/src/library-authoring/components/ComponentDeleter.test.tsx
new file mode 100644
index 0000000000..315228616c
--- /dev/null
+++ b/src/library-authoring/components/ComponentDeleter.test.tsx
@@ -0,0 +1,80 @@
+import type { ToastActionData } from '../../generic/toast-context';
+import {
+  fireEvent,
+  render,
+  screen,
+  initializeMocks,
+  waitFor,
+} from '../../testUtils';
+import { SidebarProvider } from '../common/context/SidebarContext';
+import {
+  mockContentLibrary, mockDeleteLibraryBlock, mockLibraryBlockMetadata, mockRestoreLibraryBlock,
+} from '../data/api.mocks';
+import ComponentDeleter from './ComponentDeleter';
+
+mockContentLibrary.applyMock(); // Not required, but avoids 404 errors in the logs when <LibraryProvider> loads data
+mockLibraryBlockMetadata.applyMock();
+const mockDelete = mockDeleteLibraryBlock.applyMock();
+const mockRestore = mockRestoreLibraryBlock.applyMock();
+
+const usageKey = mockLibraryBlockMetadata.usageKeyPublished;
+
+const renderArgs = {
+  extraWrapper: SidebarProvider,
+};
+
+let mockShowToast: { (message: string, action?: ToastActionData | undefined): void; mock?: any; };
+
+describe('<ComponentDeleter />', () => {
+  beforeEach(() => {
+    const mocks = initializeMocks();
+    mockShowToast = mocks.mockShowToast;
+  });
+
+  it('is invisible when isConfirmingDelete is false', async () => {
+    const mockCancel = jest.fn();
+    render(<ComponentDeleter usageKey={usageKey} isConfirmingDelete={false} cancelDelete={mockCancel} />, renderArgs);
+
+    const modal = screen.queryByRole('dialog', { name: 'Delete Component' });
+    expect(modal).not.toBeInTheDocument();
+  });
+
+  it('should shows a confirmation prompt the card with title and description', async () => {
+    const mockCancel = jest.fn();
+    render(<ComponentDeleter usageKey={usageKey} isConfirmingDelete cancelDelete={mockCancel} />, renderArgs);
+
+    const modal = screen.getByRole('dialog', { name: 'Delete Component' });
+    expect(modal).toBeVisible();
+
+    // It should mention the component's name in the confirm dialog:
+    await screen.findByText('Introduction to Testing 2');
+
+    // Clicking cancel will cancel:
+    const cancelButton = screen.getByRole('button', { name: 'Cancel' });
+    fireEvent.click(cancelButton);
+    expect(mockCancel).toHaveBeenCalled();
+  });
+
+  it('deletes the block when confirmed, shows a toast with undo option and restores block on undo', async () => {
+    const mockCancel = jest.fn();
+    render(<ComponentDeleter usageKey={usageKey} isConfirmingDelete cancelDelete={mockCancel} />, renderArgs);
+
+    const modal = screen.getByRole('dialog', { name: 'Delete Component' });
+    expect(modal).toBeVisible();
+
+    const deleteButton = screen.getByRole('button', { name: 'Delete' });
+    fireEvent.click(deleteButton);
+    await waitFor(() => {
+      expect(mockDelete).toHaveBeenCalled();
+    });
+    expect(mockCancel).toHaveBeenCalled(); // In order to close the modal, this also gets called.
+    expect(mockShowToast).toHaveBeenCalled();
+    // Get restore / undo func from the toast
+    const restoreFn = mockShowToast.mock.calls[0][1].onClick;
+    restoreFn();
+    await waitFor(() => {
+      expect(mockRestore).toHaveBeenCalled();
+      expect(mockShowToast).toHaveBeenCalledWith('Undo successful');
+    });
+  });
+});
diff --git a/src/library-authoring/components/ComponentDeleter.tsx b/src/library-authoring/components/ComponentDeleter.tsx
new file mode 100644
index 0000000000..2ea3a99e8e
--- /dev/null
+++ b/src/library-authoring/components/ComponentDeleter.tsx
@@ -0,0 +1,91 @@
+import React, { useCallback, useContext } from 'react';
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
+import { Warning } from '@openedx/paragon/icons';
+
+import { useSidebarContext } from '../common/context/SidebarContext';
+import { useDeleteLibraryBlock, useLibraryBlockMetadata, useRestoreLibraryBlock } from '../data/apiHooks';
+import messages from './messages';
+import { ToastContext } from '../../generic/toast-context';
+import DeleteModal from '../../generic/delete-modal/DeleteModal';
+
+/**
+ * Helper component to load and display the name of the block.
+ *
+ * This needs to be a separate component so that we only query the metadata of
+ * the block when needed (when this is displayed), not on every card shown in
+ * the search results.
+ */
+const BlockName = (props: { usageKey: string }) => {
+  const { data: blockMetadata } = useLibraryBlockMetadata(props.usageKey);
+
+  // eslint-disable-next-line react/jsx-no-useless-fragment
+  return <>{blockMetadata?.displayName}</> ?? <FormattedMessage {...messages.deleteComponentNamePlaceholder} />;
+};
+
+interface Props {
+  usageKey: string;
+  /** If true, show a confirmation modal that asks the user if they want to delete this component. */
+  isConfirmingDelete: boolean;
+  cancelDelete: () => void;
+}
+
+const ComponentDeleter = ({ usageKey, ...props }: Props) => {
+  const intl = useIntl();
+  const { sidebarComponentInfo, closeLibrarySidebar } = useSidebarContext();
+  const { showToast } = useContext(ToastContext);
+  const sidebarComponentUsageKey = sidebarComponentInfo?.id;
+
+  const restoreComponentMutation = useRestoreLibraryBlock();
+  const restoreComponent = useCallback(async () => {
+    try {
+      await restoreComponentMutation.mutateAsync({ usageKey });
+      showToast(intl.formatMessage(messages.undoDeleteComponentToastSuccess));
+    } catch (e) {
+      showToast(intl.formatMessage(messages.undoDeleteComponentToastFailed));
+    }
+  }, []);
+
+  const deleteComponentMutation = useDeleteLibraryBlock();
+  const doDelete = React.useCallback(async () => {
+    await deleteComponentMutation.mutateAsync({ usageKey });
+    showToast(
+      intl.formatMessage(messages.deleteComponentSuccess),
+      {
+        label: intl.formatMessage(messages.undoDeleteCollectionToastAction),
+        onClick: restoreComponent,
+      },
+    );
+    props.cancelDelete();
+    // Close the sidebar if it's still open showing the deleted component:
+    if (usageKey === sidebarComponentUsageKey) {
+      closeLibrarySidebar();
+    }
+  }, [usageKey, sidebarComponentUsageKey, closeLibrarySidebar]);
+
+  if (!props.isConfirmingDelete) {
+    return null;
+  }
+
+  return (
+    <DeleteModal
+      isOpen
+      close={props.cancelDelete}
+      variant="warning"
+      title={intl.formatMessage(messages.deleteComponentWarningTitle)}
+      icon={Warning}
+      description={(
+        <FormattedMessage
+          {...messages.deleteComponentConfirm}
+          values={{
+            componentName: (
+              <strong><BlockName usageKey={usageKey} /></strong>
+            ),
+          }}
+        />
+)}
+      onDeleteSubmit={doDelete}
+    />
+  );
+};
+
+export default ComponentDeleter;
diff --git a/src/library-authoring/components/ComponentEditorModal.tsx b/src/library-authoring/components/ComponentEditorModal.tsx
new file mode 100644
index 0000000000..6ba78979bd
--- /dev/null
+++ b/src/library-authoring/components/ComponentEditorModal.tsx
@@ -0,0 +1,49 @@
+import { getConfig } from '@edx/frontend-platform';
+import React from 'react';
+
+import { useQueryClient } from '@tanstack/react-query';
+import EditorPage from '../../editors/EditorPage';
+import { getBlockType } from '../../generic/key-utils';
+import { useLibraryContext } from '../common/context/LibraryContext';
+import { invalidateComponentData } from '../data/apiHooks';
+
+export function canEditComponent(usageKey: string): boolean {
+  let blockType: string;
+  try {
+    blockType = getBlockType(usageKey);
+  } catch {
+    return false;
+  }
+
+  // Which XBlock/component types are supported by the 'editors' built in to this repo?
+  const mfeEditorTypes = ['html', 'problem', 'video'];
+  return mfeEditorTypes.includes(blockType);
+}
+
+export const ComponentEditorModal: React.FC<Record<never, never>> = () => {
+  const { componentBeingEdited, closeComponentEditor, libraryId } = useLibraryContext();
+  const queryClient = useQueryClient();
+
+  if (componentBeingEdited === undefined) {
+    return null;
+  }
+  const blockType = getBlockType(componentBeingEdited.usageKey);
+
+  const onClose = () => {
+    closeComponentEditor();
+    invalidateComponentData(queryClient, libraryId, componentBeingEdited.usageKey);
+  };
+
+  return (
+    <EditorPage
+      courseId={libraryId}
+      blockType={blockType}
+      blockId={componentBeingEdited.usageKey}
+      studioEndpointUrl={getConfig().STUDIO_BASE_URL}
+      lmsEndpointUrl={getConfig().LMS_BASE_URL}
+      onClose={onClose}
+      returnFunction={() => { onClose(); return () => {}; }}
+      fullScreen={false}
+    />
+  );
+};
diff --git a/src/library-authoring/components/index.ts b/src/library-authoring/components/index.ts
new file mode 100644
index 0000000000..119d3de913
--- /dev/null
+++ b/src/library-authoring/components/index.ts
@@ -0,0 +1 @@
+export { ComponentMenu as default } from './ComponentCard';
diff --git a/src/library-authoring/components/messages.ts b/src/library-authoring/components/messages.ts
new file mode 100644
index 0000000000..0e466736e6
--- /dev/null
+++ b/src/library-authoring/components/messages.ts
@@ -0,0 +1,156 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  componentCardMenuAlt: {
+    id: 'course-authoring.library-authoring.component.menu',
+    defaultMessage: 'Component actions menu',
+    description: 'Alt/title text for the component card menu button.',
+  },
+  collectionCardMenuAlt: {
+    id: 'course-authoring.library-authoring.collection.menu',
+    defaultMessage: 'Collection actions menu',
+    description: 'Alt/title text for the collection card menu button.',
+  },
+  menuOpen: {
+    id: 'course-authoring.library-authoring.collection.menu.open',
+    defaultMessage: 'Open',
+    description: 'Menu item for open a collection.',
+  },
+  menuEdit: {
+    id: 'course-authoring.library-authoring.component.menu.edit',
+    defaultMessage: 'Edit',
+    description: 'Menu item for edit a component.',
+  },
+  menuCopyToClipboard: {
+    id: 'course-authoring.library-authoring.component.menu.copy',
+    defaultMessage: 'Copy to clipboard',
+    description: 'Menu item for copy a component.',
+  },
+  menuDelete: {
+    id: 'course-authoring.library-authoring.component.menu.delete',
+    defaultMessage: 'Delete',
+    description: 'Menu item for deleting a component.',
+  },
+  menuAddToCollection: {
+    id: 'course-authoring.library-authoring.component.menu.add',
+    defaultMessage: 'Add to collection',
+    description: 'Menu item for add a component to collection.',
+  },
+  menuRemoveFromCollection: {
+    id: 'course-authoring.library-authoring.component.menu.remove',
+    defaultMessage: 'Remove from collection',
+    description: 'Menu item for remove a component from collection.',
+  },
+  removeComponentSucess: {
+    id: 'course-authoring.library-authoring.component.remove-from-collection-success',
+    defaultMessage: 'Component successfully removed',
+    description: 'Message for successful removal of component from collection.',
+  },
+  removeComponentFailure: {
+    id: 'course-authoring.library-authoring.component.remove-from-collection-failure',
+    defaultMessage: 'Failed to remove Component',
+    description: 'Message for failure of removal of component from collection.',
+  },
+  copyToClipboardSuccess: {
+    id: 'course-authoring.library-authoring.component.copyToClipboardSuccess',
+    defaultMessage: 'Component copied to clipboard',
+    description: 'Message for successful copy component to clipboard.',
+  },
+  copyToClipboardError: {
+    id: 'course-authoring.library-authoring.component.copyToClipboardError',
+    defaultMessage: 'Failed to copy component to clipboard',
+    description: 'Message for failed to copy component to clipboard.',
+  },
+  deleteComponentWarningTitle: {
+    id: 'course-authoring.library-authoring.component.delete-confirmation-title',
+    defaultMessage: 'Delete Component',
+    description: 'Title text for the warning displayed before deleting a component',
+  },
+  deleteComponentNamePlaceholder: {
+    id: 'course-authoring.library-authoring.component.delete-confirmation-placeholder',
+    defaultMessage: 'this component',
+    description: 'Text shown in place of the component\'s title while we\'re loading the title',
+  },
+  deleteComponentConfirm: {
+    id: 'course-authoring.library-authoring.component.delete-confirmation-text',
+    defaultMessage: 'Delete {componentName}? If this component has been used in a course, those copies won\'t be deleted, but they will no longer receive updates from the library.',
+    description: 'Confirmation text to display before deleting a component',
+  },
+  deleteComponentCancelButton: {
+    id: 'course-authoring.library-authoring.component.cancel-delete-button',
+    defaultMessage: 'Cancel',
+    description: 'Button to cancel deletion of a component',
+  },
+  deleteComponentButton: {
+    id: 'course-authoring.library-authoring.component.confirm-delete-button',
+    defaultMessage: 'Delete',
+    description: 'Button to confirm deletion of a component',
+  },
+  deleteComponentSuccess: {
+    id: 'course-authoring.library-authoring.component.delete-error-success',
+    defaultMessage: 'Component deleted',
+    description: 'Message to display on delete component success',
+  },
+  undoDeleteComponentToastAction: {
+    id: 'course-authoring.library-authoring.component.undo-delete-component-toast-button',
+    defaultMessage: 'Undo',
+    description: 'Toast message to undo deletion of component',
+  },
+  undoDeleteComponentToastSuccess: {
+    id: 'course-authoring.library-authoring.component.undo-delete-component-toast-text',
+    defaultMessage: 'Undo successful',
+    description: 'Message to display on undo delete component success',
+  },
+  undoDeleteComponentToastFailed: {
+    id: 'course-authoring.library-authoring.component.undo-delete-component-failed',
+    defaultMessage: 'Failed to undo delete component operation',
+    description: 'Message to display on failure to undo delete component',
+  },
+  deleteCollection: {
+    id: 'course-authoring.library-authoring.collection.delete-menu-text',
+    defaultMessage: 'Delete',
+    description: 'Menu item to delete a collection.',
+  },
+  deleteCollectionConfirm: {
+    id: 'course-authoring.library-authoring.collection.delete-confirmation-text',
+    defaultMessage: 'Are you sure you want to delete collection: {collectionTitle}?',
+    description: 'Confirmation text to display before deleting collection',
+  },
+  deleteCollectionFailed: {
+    id: 'course-authoring.library-authoring.collection.delete-failed-error',
+    defaultMessage: 'Failed to delete collection',
+    description: 'Message to display on failure to delete collection',
+  },
+  deleteCollectionSuccess: {
+    id: 'course-authoring.library-authoring.collection.delete-error-success',
+    defaultMessage: 'Collection deleted',
+    description: 'Message to display on delete collection success',
+  },
+  undoDeleteCollectionToastAction: {
+    id: 'course-authoring.library-authoring.collection.undo-delete-collection-toast-button',
+    defaultMessage: 'Undo',
+    description: 'Toast message to undo deletion of collection',
+  },
+  undoDeleteCollectionToastMessage: {
+    id: 'course-authoring.library-authoring.collection.undo-delete-collection-toast-text',
+    defaultMessage: 'Undo successful',
+    description: 'Message to display on undo delete collection success',
+  },
+  undoDeleteCollectionToastFailed: {
+    id: 'course-authoring.library-authoring.collection.undo-delete-collection-failed',
+    defaultMessage: 'Failed to undo delete collection operation',
+    description: 'Message to display on failure to undo delete collection',
+  },
+  componentPickerSingleSelectTitle: {
+    id: 'course-authoring.library-authoring.component-picker.single..title',
+    defaultMessage: 'Add',
+    description: 'Button title for picking a component',
+  },
+  componentPickerMultipleSelectTitle: {
+    id: 'course-authoring.library-authoring.component-picker.multiple.title',
+    defaultMessage: 'Select',
+    description: 'Button title for selecting multiple components',
+  },
+});
+
+export default messages;
diff --git a/src/library-authoring/create-collection/CreateCollectionModal.tsx b/src/library-authoring/create-collection/CreateCollectionModal.tsx
new file mode 100644
index 0000000000..de9e776cf9
--- /dev/null
+++ b/src/library-authoring/create-collection/CreateCollectionModal.tsx
@@ -0,0 +1,124 @@
+import React from 'react';
+import {
+  ActionRow,
+  Button,
+  Form,
+  ModalDialog,
+} from '@openedx/paragon';
+import { useNavigate } from 'react-router-dom';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Formik } from 'formik';
+import * as Yup from 'yup';
+import FormikControl from '../../generic/FormikControl';
+import { useLibraryContext } from '../common/context/LibraryContext';
+import messages from './messages';
+import { useCreateLibraryCollection } from '../data/apiHooks';
+import { ToastContext } from '../../generic/toast-context';
+
+const CreateCollectionModal = () => {
+  const intl = useIntl();
+  const navigate = useNavigate();
+  const {
+    libraryId,
+    isCreateCollectionModalOpen,
+    closeCreateCollectionModal,
+  } = useLibraryContext();
+  const create = useCreateLibraryCollection(libraryId);
+  const { showToast } = React.useContext(ToastContext);
+
+  const handleCreate = React.useCallback((values) => {
+    create.mutateAsync(values).then((data) => {
+      closeCreateCollectionModal();
+      navigate(`/library/${libraryId}/collection/${data.key}`);
+      showToast(intl.formatMessage(messages.createCollectionSuccess));
+    }).catch(() => {
+      showToast(intl.formatMessage(messages.createCollectionError));
+    });
+  }, []);
+
+  return (
+    <ModalDialog
+      title={intl.formatMessage(messages.createCollectionModalTitle)}
+      isOpen={isCreateCollectionModalOpen}
+      onClose={closeCreateCollectionModal}
+      size="xl"
+      hasCloseButton
+      isFullscreenOnMobile
+    >
+      <ModalDialog.Header>
+        <ModalDialog.Title>
+          {intl.formatMessage(messages.createCollectionModalTitle)}
+        </ModalDialog.Title>
+      </ModalDialog.Header>
+
+      <Formik
+        initialValues={{
+          title: '',
+          description: '',
+        }}
+        validationSchema={
+          Yup.object().shape({
+            title: Yup.string()
+              .required(intl.formatMessage(messages.createCollectionModalNameInvalid)),
+            description: Yup.string(),
+          })
+        }
+        onSubmit={handleCreate}
+      >
+        {(formikProps) => (
+          <>
+            <ModalDialog.Body className="mw-sm">
+              <Form onSubmit={formikProps.handleSubmit}>
+                <FormikControl
+                  name="title"
+                  label={(
+                    <Form.Label className="font-weight-bold h3">
+                      {intl.formatMessage(messages.createCollectionModalNameLabel)}
+                    </Form.Label>
+                  )}
+                  value={formikProps.values.title}
+                  placeholder={intl.formatMessage(messages.createCollectionModalNamePlaceholder)}
+                  controlClasses="pb-2"
+                />
+                <FormikControl
+                  name="description"
+                  as="textarea"
+                  label={(
+                    <Form.Label className="font-weight-bold h3">
+                      {intl.formatMessage(messages.createCollectionModalDescriptionLabel)}
+                    </Form.Label>
+                  )}
+                  value={formikProps.values.description}
+                  placeholder={intl.formatMessage(messages.createCollectionModalDescriptionPlaceholder)}
+                  help={(
+                    <Form.Text>
+                      {intl.formatMessage(messages.createCollectionModalDescriptionDetails)}
+                    </Form.Text>
+                  )}
+                  controlClasses="pb-2"
+                  rows="5"
+                />
+              </Form>
+            </ModalDialog.Body>
+            <ModalDialog.Footer>
+              <ActionRow>
+                <ModalDialog.CloseButton variant="tertiary">
+                  {intl.formatMessage(messages.createCollectionModalCancel)}
+                </ModalDialog.CloseButton>
+                <Button
+                  variant="primary"
+                  onClick={formikProps.submitForm}
+                  disabled={formikProps.isSubmitting || !formikProps.isValid || !formikProps.dirty}
+                >
+                  {intl.formatMessage(messages.createCollectionModalCreate)}
+                </Button>
+              </ActionRow>
+            </ModalDialog.Footer>
+          </>
+        )}
+      </Formik>
+    </ModalDialog>
+  );
+};
+
+export default CreateCollectionModal;
diff --git a/src/library-authoring/create-collection/index.tsx b/src/library-authoring/create-collection/index.tsx
new file mode 100644
index 0000000000..0fb87a41a6
--- /dev/null
+++ b/src/library-authoring/create-collection/index.tsx
@@ -0,0 +1 @@
+export { default as CreateCollectionModal } from './CreateCollectionModal';
diff --git a/src/library-authoring/create-collection/messages.ts b/src/library-authoring/create-collection/messages.ts
new file mode 100644
index 0000000000..36a11138e8
--- /dev/null
+++ b/src/library-authoring/create-collection/messages.ts
@@ -0,0 +1,65 @@
+import { defineMessages as _defineMessages } from '@edx/frontend-platform/i18n';
+import type { defineMessages as defineMessagesType } from 'react-intl';
+
+// frontend-platform currently doesn't provide types... do it ourselves.
+const defineMessages = _defineMessages as typeof defineMessagesType;
+
+const messages = defineMessages({
+  createCollectionModalTitle: {
+    id: 'course-authoring.library-authoring.modals.create-collection.title',
+    defaultMessage: 'New Collection',
+    description: 'Title of the Create Collection modal',
+  },
+  createCollectionModalCancel: {
+    id: 'course-authoring.library-authoring.modals.create-collection.cancel',
+    defaultMessage: 'Cancel',
+    description: 'Label of the Cancel button of the Create Collection modal',
+  },
+  createCollectionModalCreate: {
+    id: 'course-authoring.library-authoring.modals.create-collection.create',
+    defaultMessage: 'Create',
+    description: 'Label of the Create button of the Create Collection modal',
+  },
+  createCollectionModalNameLabel: {
+    id: 'course-authoring.library-authoring.modals.create-collection.form.name',
+    defaultMessage: 'Name your collection',
+    description: 'Label of the Name field of the Create Collection modal form',
+  },
+  createCollectionModalNamePlaceholder: {
+    id: 'course-authoring.library-authoring.modals.create-collection.form.name.placeholder',
+    defaultMessage: 'Give a descriptive title',
+    description: 'Placeholder of the Name field of the Create Collection modal form',
+  },
+  createCollectionModalNameInvalid: {
+    id: 'course-authoring.library-authoring.modals.create-collection.form.name.invalid',
+    defaultMessage: 'Collection name is required',
+    description: 'Message when the Name field of the Create Collection modal form is invalid',
+  },
+  createCollectionModalDescriptionLabel: {
+    id: 'course-authoring.library-authoring.modals.create-collection.form.description',
+    defaultMessage: 'Add a description (optional)',
+    description: 'Label of the Description field of the Create Collection modal form',
+  },
+  createCollectionModalDescriptionPlaceholder: {
+    id: 'course-authoring.library-authoring.modals.create-collection.form.description.placeholder',
+    defaultMessage: 'Add description',
+    description: 'Placeholder of the Description field of the Create Collection modal form',
+  },
+  createCollectionModalDescriptionDetails: {
+    id: 'course-authoring.library-authoring.modals.create-collection.form.description.details',
+    defaultMessage: 'Descriptions can help you and your team better organize and find what you are looking for',
+    description: 'Details of the Description field of the Create Collection modal form',
+  },
+  createCollectionSuccess: {
+    id: 'course-authoring.library-authoring.modals.create-collection.success',
+    defaultMessage: 'Collection created successfully',
+    description: 'Success message when creating a library collection',
+  },
+  createCollectionError: {
+    id: 'course-authoring.library-authoring.modals.create-collection.error',
+    defaultMessage: 'There is an error when creating the library collection',
+    description: 'Error message when creating a library collection',
+  },
+});
+
+export default messages;
diff --git a/src/library-authoring/create-library/CreateLibrary.test.tsx b/src/library-authoring/create-library/CreateLibrary.test.tsx
new file mode 100644
index 0000000000..cf323b1aca
--- /dev/null
+++ b/src/library-authoring/create-library/CreateLibrary.test.tsx
@@ -0,0 +1,140 @@
+import React from 'react';
+import MockAdapter from 'axios-mock-adapter';
+import { initializeMockApp } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { AppProvider } from '@edx/frontend-platform/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { fireEvent, render, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import initializeStore from '../../store';
+import { CreateLibrary } from '.';
+import { getContentLibraryV2CreateApiUrl } from './data/api';
+
+let store;
+const mockNavigate = jest.fn();
+let axiosMock: MockAdapter;
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useNavigate: () => mockNavigate,
+}));
+
+jest.mock('../../generic/data/apiHooks', () => ({
+  ...jest.requireActual('../../generic/data/apiHooks'),
+  useOrganizationListData: () => ({
+    data: ['org1', 'org2', 'org3', 'org4', 'org5'],
+    isLoading: false,
+  }),
+}));
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+    },
+  },
+});
+
+const RootWrapper = () => (
+  <AppProvider store={store}>
+    <IntlProvider locale="en" messages={{}}>
+      <QueryClientProvider client={queryClient}>
+        <CreateLibrary />
+      </QueryClientProvider>
+    </IntlProvider>
+  </AppProvider>
+);
+
+describe('<CreateLibrary />', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+    store = initializeStore();
+
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+    axiosMock.restore();
+    queryClient.clear();
+  });
+
+  test('call api data with correct data', async () => {
+    axiosMock.onPost(getContentLibraryV2CreateApiUrl()).reply(200, {
+      id: 'library-id',
+    });
+
+    const { getByRole } = render(<RootWrapper />);
+
+    const titleInput = getByRole('textbox', { name: /library name/i });
+    userEvent.click(titleInput);
+    userEvent.type(titleInput, 'Test Library Name');
+
+    const orgInput = getByRole('combobox', { name: /organization/i });
+    userEvent.click(orgInput);
+    userEvent.type(orgInput, 'org1');
+    userEvent.tab();
+
+    const slugInput = getByRole('textbox', { name: /library id/i });
+    userEvent.click(slugInput);
+    userEvent.type(slugInput, 'test_library_slug');
+
+    fireEvent.click(getByRole('button', { name: /create/i }));
+    await waitFor(() => {
+      expect(axiosMock.history.post.length).toBe(1);
+      expect(axiosMock.history.post[0].data).toBe(
+        '{"description":"","title":"Test Library Name","org":"org1","slug":"test_library_slug"}',
+      );
+      expect(mockNavigate).toHaveBeenCalledWith('/library/library-id');
+    });
+  });
+
+  test('show api error', async () => {
+    axiosMock.onPost(getContentLibraryV2CreateApiUrl()).reply(400, {
+      field: 'Error message',
+    });
+    const { getByRole, getByTestId } = render(<RootWrapper />);
+
+    const titleInput = getByRole('textbox', { name: /library name/i });
+    userEvent.click(titleInput);
+    userEvent.type(titleInput, 'Test Library Name');
+
+    const orgInput = getByTestId('autosuggest-textbox-input');
+    userEvent.click(orgInput);
+    userEvent.type(orgInput, 'org1');
+    userEvent.tab();
+
+    const slugInput = getByRole('textbox', { name: /library id/i });
+    userEvent.click(slugInput);
+    userEvent.type(slugInput, 'test_library_slug');
+
+    fireEvent.click(getByRole('button', { name: /create/i }));
+    await waitFor(() => {
+      expect(axiosMock.history.post.length).toBe(1);
+      expect(axiosMock.history.post[0].data).toBe(
+        '{"description":"","title":"Test Library Name","org":"org1","slug":"test_library_slug"}',
+      );
+      expect(mockNavigate).not.toHaveBeenCalled();
+      expect(getByRole('alert')).toHaveTextContent('Request failed with status code 400');
+      expect(getByRole('alert')).toHaveTextContent('{"field":"Error message"}');
+    });
+  });
+
+  test('cancel creating library navigates to libraries page', async () => {
+    const { getByRole } = render(<RootWrapper />);
+
+    fireEvent.click(getByRole('button', { name: /cancel/i }));
+    await waitFor(() => {
+      expect(mockNavigate).toHaveBeenCalledWith('/libraries');
+    });
+  });
+});
diff --git a/src/library-authoring/create-library/CreateLibrary.tsx b/src/library-authoring/create-library/CreateLibrary.tsx
new file mode 100644
index 0000000000..1731984ec5
--- /dev/null
+++ b/src/library-authoring/create-library/CreateLibrary.tsx
@@ -0,0 +1,152 @@
+import React from 'react';
+import { StudioFooter } from '@edx/frontend-component-footer';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import {
+  Container,
+  Form,
+  Button,
+  StatefulButton,
+  ActionRow,
+} from '@openedx/paragon';
+import { Formik } from 'formik';
+import { useNavigate } from 'react-router-dom';
+import * as Yup from 'yup';
+
+import { REGEX_RULES } from '../../constants';
+import Header from '../../header';
+import FormikControl from '../../generic/FormikControl';
+import FormikErrorFeedback from '../../generic/FormikErrorFeedback';
+import AlertError from '../../generic/alert-error';
+import { useOrganizationListData } from '../../generic/data/apiHooks';
+import SubHeader from '../../generic/sub-header/SubHeader';
+import { useCreateLibraryV2 } from './data/apiHooks';
+import messages from './messages';
+
+const CreateLibrary = () => {
+  const intl = useIntl();
+  const navigate = useNavigate();
+
+  const { noSpaceRule, specialCharsRule } = REGEX_RULES;
+  const validSlugIdRegex = /^[a-zA-Z\d]+(?:[\w-]*[a-zA-Z\d]+)*$/;
+
+  const {
+    mutate,
+    data,
+    isLoading,
+    isError,
+    error,
+  } = useCreateLibraryV2();
+
+  const {
+    data: organizationListData,
+    isLoading: isOrganizationListLoading,
+  } = useOrganizationListData();
+
+  const handleOnClickCancel = () => {
+    navigate('/libraries');
+  };
+
+  if (data) {
+    navigate(`/library/${data.id}`);
+  }
+
+  return (
+    <>
+      <Header isHiddenMainMenu />
+      <Container size="xl" className="p-4 mt-3">
+        <SubHeader
+          title={intl.formatMessage(messages.createLibrary)}
+        />
+        <Formik
+          initialValues={{
+            title: '',
+            org: '',
+            slug: '',
+          }}
+          validationSchema={
+            Yup.object().shape({
+              title: Yup.string()
+                .required(intl.formatMessage(messages.requiredFieldError)),
+              org: Yup.string()
+                .required(intl.formatMessage(messages.requiredFieldError))
+                .matches(
+                  specialCharsRule,
+                  intl.formatMessage(messages.disallowedCharsError),
+                )
+                .matches(noSpaceRule, intl.formatMessage(messages.noSpaceError)),
+              slug: Yup.string()
+                .required(intl.formatMessage(messages.requiredFieldError))
+                .matches(
+                  validSlugIdRegex,
+                  intl.formatMessage(messages.invalidSlugError),
+                ),
+            })
+          }
+          onSubmit={(values) => mutate(values)}
+        >
+          {(formikProps) => (
+            <Form onSubmit={formikProps.handleSubmit}>
+              <FormikControl
+                name="title"
+                label={<Form.Label>{intl.formatMessage(messages.titleLabel)}</Form.Label>}
+                value={formikProps.values.title}
+                placeholder={intl.formatMessage(messages.titlePlaceholder)}
+                help={intl.formatMessage(messages.titleHelp)}
+                className=""
+                controlClasses="pb-2"
+              />
+              <Form.Group>
+                <Form.Label>{intl.formatMessage(messages.orgLabel)}</Form.Label>
+                <Form.Autosuggest
+                  name="org"
+                  isLoading={isOrganizationListLoading}
+                  onChange={(event) => formikProps.setFieldValue('org', event.selectionId)}
+                  placeholder={intl.formatMessage(messages.orgPlaceholder)}
+                >
+                  {organizationListData ? organizationListData.map((org) => (
+                    <Form.AutosuggestOption key={org} id={org}>{org}</Form.AutosuggestOption>
+                  )) : []}
+                </Form.Autosuggest>
+                <FormikErrorFeedback name="org">
+                  <Form.Text>{intl.formatMessage(messages.orgHelp)}</Form.Text>
+                </FormikErrorFeedback>
+              </Form.Group>
+              <FormikControl
+                name="slug"
+                label={<Form.Label>{intl.formatMessage(messages.slugLabel)}</Form.Label>}
+                value={formikProps.values.slug}
+                placeholder={intl.formatMessage(messages.slugPlaceholder)}
+                help={intl.formatMessage(messages.slugHelp)}
+                className=""
+                controlClasses="pb-2"
+              />
+              <ActionRow className="justify-content-start">
+                <Button
+                  variant="outline-primary"
+                  onClick={handleOnClickCancel}
+                >
+                  {intl.formatMessage(messages.cancelCreateLibraryButton)}
+                </Button>
+                <StatefulButton
+                  type="submit"
+                  variant="primary"
+                  className="action btn-primary"
+                  state={isLoading ? 'disabled' : 'enabled'}
+                  disabledStates={['disabled']}
+                  labels={{
+                    enabled: intl.formatMessage(messages.createLibraryButton),
+                    disabled: intl.formatMessage(messages.createLibraryButtonPending),
+                  }}
+                />
+              </ActionRow>
+            </Form>
+          )}
+        </Formik>
+        {isError && (<AlertError error={error} />)}
+      </Container>
+      <StudioFooter />
+    </>
+  );
+};
+
+export default CreateLibrary;
diff --git a/src/library-authoring/create-library/data/api.ts b/src/library-authoring/create-library/data/api.ts
new file mode 100644
index 0000000000..b529de5e9d
--- /dev/null
+++ b/src/library-authoring/create-library/data/api.ts
@@ -0,0 +1,30 @@
+import { camelCaseObject, getConfig } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+
+import type { ContentLibrary } from '../../data/api';
+
+const getApiBaseUrl = () => getConfig().STUDIO_BASE_URL;
+
+/**
+ * Get the URL for creating a new library.
+ */
+export const getContentLibraryV2CreateApiUrl = () => `${getApiBaseUrl()}/api/libraries/v2/`;
+
+export interface CreateContentLibraryArgs {
+  title: string,
+  org: string,
+  slug: string,
+}
+
+/**
+ * Create a new library
+ */
+export async function createLibraryV2(data: CreateContentLibraryArgs): Promise<ContentLibrary> {
+  const client = getAuthenticatedHttpClient();
+  const url = getContentLibraryV2CreateApiUrl();
+
+  // Description field cannot be null, but we don't have a input in the form for it
+  const { data: newLibrary } = await client.post(url, { description: '', ...data });
+
+  return camelCaseObject(newLibrary);
+}
diff --git a/src/library-authoring/create-library/data/apiHooks.ts b/src/library-authoring/create-library/data/apiHooks.ts
new file mode 100644
index 0000000000..053a39bf6c
--- /dev/null
+++ b/src/library-authoring/create-library/data/apiHooks.ts
@@ -0,0 +1,21 @@
+import {
+  useMutation,
+  useQueryClient,
+} from '@tanstack/react-query';
+
+import { createLibraryV2 } from './api';
+import { libraryAuthoringQueryKeys } from '../../data/apiHooks';
+
+/**
+ * Hook that provides a "mutation" that can be used to create a new content library.
+ */
+export const useCreateLibraryV2 = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: createLibraryV2,
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: libraryAuthoringQueryKeys.contentLibraryList() });
+    },
+  });
+};
diff --git a/src/library-authoring/create-library/index.ts b/src/library-authoring/create-library/index.ts
new file mode 100644
index 0000000000..9b386f3c82
--- /dev/null
+++ b/src/library-authoring/create-library/index.ts
@@ -0,0 +1 @@
+export { default as CreateLibrary } from './CreateLibrary';
diff --git a/src/library-authoring/create-library/messages.ts b/src/library-authoring/create-library/messages.ts
new file mode 100644
index 0000000000..cf1cff19bc
--- /dev/null
+++ b/src/library-authoring/create-library/messages.ts
@@ -0,0 +1,93 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  createLibrary: {
+    id: 'course-authoring.library-authoring.create-library',
+    defaultMessage: 'Create new library',
+    description: 'Header for the create library form',
+  },
+  titleLabel: {
+    id: 'course-authoring.library-authoring.create-library.form.title.label',
+    defaultMessage: 'Library name',
+    description: 'Label for the title field.',
+  },
+  titlePlaceholder: {
+    id: 'course-authoring.library-authoring.create-library.form.title.placeholder',
+    defaultMessage: 'e.g. Computer Science Problems',
+    description: 'Placeholder text for the title field.',
+  },
+  titleHelp: {
+    id: 'course-authoring.library-authoring.create-library.form.title.help',
+    defaultMessage: 'The name for your library',
+    description: 'Help text for the title field.',
+  },
+  orgLabel: {
+    id: 'course-authoring.library-authoring.create-library.form.org.label',
+    defaultMessage: 'Organization',
+    description: 'Label for the organization field.',
+  },
+  orgPlaceholder: {
+    id: 'course-authoring.library-authoring.create-library.form.org.placeholder',
+    defaultMessage: 'e.g. UniversityX or OrganizationX',
+    description: 'Placeholder text for the organization field.',
+  },
+  orgHelp: {
+    id: 'course-authoring.library-authoring.create-library.form.org.help',
+    defaultMessage: 'The public organization name for your library. This cannot be changed.',
+    description: 'Help text for the organization field.',
+  },
+  slugLabel: {
+    id: 'course-authoring.library-authoring.create-library.form.slug.label',
+    defaultMessage: 'Library ID',
+    description: 'Label for the slug field.',
+  },
+  slugPlaceholder: {
+    id: 'course-authoring.library-authoring.create-library.form.slug.placeholder',
+    defaultMessage: 'e.g. CSPROB',
+    description: 'Placeholder text for the slug field.',
+  },
+  slugHelp: {
+    id: 'course-authoring.library-authoring.create-library.form.slug.help',
+    defaultMessage: `The unique code that identifies this library. Note: This is 
+    part of your library URL, so no spaces or special characters are allowed. 
+    This cannot be changed.`,
+    description: 'Help text for the slug field.',
+  },
+  invalidSlugError: {
+    id: 'course-authoring.library-authoring.create-library.form.invalid-slug.error',
+    defaultMessage: 'Enter a valid “slug” consisting of Unicode letters, numbers, underscores, or hyphens.',
+    description: 'Text to display when slug id has invalid symbols.',
+  },
+  requiredFieldError: {
+    id: 'course-authoring.library-authoring.create-library.form.required.error',
+    defaultMessage: 'Required field.',
+    description: 'Error message to display when a required field is missing.',
+  },
+  disallowedCharsError: {
+    id: 'course-authoring.library-authoring.create-library.form.disallowed-chars.error',
+    defaultMessage: 'Please do not use any spaces or special characters in this field.',
+    description: 'Error message to display when a field contains disallowed characters.',
+  },
+  noSpaceError: {
+    id: 'course-authoring.library-authoring.create-library.form.no-space.error',
+    defaultMessage: 'Please do not use any spaces in this field.',
+    description: 'Error message to display when a field contains spaces.',
+  },
+  createLibraryButton: {
+    id: 'course-authoring.library-authoring.create-library.form.create-library.button',
+    defaultMessage: 'Create',
+    description: 'Button text for creating a new library.',
+  },
+  createLibraryButtonPending: {
+    id: 'course-authoring.library-authoring.create-library.form.create-library.button.pending',
+    defaultMessage: 'Creating..',
+    description: 'Button text while the library is being created.',
+  },
+  cancelCreateLibraryButton: {
+    id: 'course-authoring.library-authoring.create-library.form.create-library.cancel.button',
+    defaultMessage: 'Cancel',
+    description: 'Button text to cancel creating a new library.',
+  },
+});
+
+export default messages;
diff --git a/src/library-authoring/data/api.mocks.ts b/src/library-authoring/data/api.mocks.ts
new file mode 100644
index 0000000000..0e064f8a0f
--- /dev/null
+++ b/src/library-authoring/data/api.mocks.ts
@@ -0,0 +1,528 @@
+/* istanbul ignore file */
+import { camelCaseObject } from '@edx/frontend-platform';
+import { mockContentTaxonomyTagsData } from '../../content-tags-drawer/data/api.mocks';
+import { getBlockType } from '../../generic/key-utils';
+import { createAxiosError } from '../../testUtils';
+import contentLibrariesListV2 from '../__mocks__/contentLibrariesListV2';
+import * as api from './api';
+
+/**
+ * Mock for `getContentLibraryV2List()`
+ */
+export const mockGetContentLibraryV2List = {
+  applyMock: () => jest.spyOn(api, 'getContentLibraryV2List').mockResolvedValue(
+    camelCaseObject(contentLibrariesListV2),
+  ),
+  applyMockError: () => jest.spyOn(api, 'getContentLibraryV2List').mockRejectedValue(
+    createAxiosError({ code: 500, message: 'Internal Error.', path: api.getContentLibraryV2ListApiUrl() }),
+  ),
+  applyMockLoading: () => jest.spyOn(api, 'getContentLibraryV2List').mockResolvedValue(
+    new Promise(() => {}),
+  ),
+  applyMockEmpty: () => jest.spyOn(api, 'getContentLibraryV2List').mockResolvedValue({
+    next: null,
+    previous: null,
+    count: 0,
+    numPages: 1,
+    currentPage: 1,
+    start: 0,
+    results: [],
+  }),
+};
+
+/**
+ * Mock for `getContentLibrary()`
+ *
+ * This mock returns different data/responses depending on the ID of the library
+ * that you request.
+ */
+export async function mockContentLibrary(libraryId: string): Promise<api.ContentLibrary> {
+  // This mock has many different behaviors, depending on the library ID:
+  switch (libraryId) {
+    case mockContentLibrary.libraryIdThatNeverLoads:
+      // Return a promise that never resolves, to simulate never loading:
+      return new Promise<any>(() => {});
+    case mockContentLibrary.library404:
+      throw createAxiosError({ code: 400, message: 'Not found.', path: api.getContentLibraryApiUrl(libraryId) });
+    case mockContentLibrary.library500:
+      throw createAxiosError({ code: 500, message: 'Internal Error.', path: api.getContentLibraryApiUrl(libraryId) });
+    case mockContentLibrary.libraryId:
+      return mockContentLibrary.libraryData;
+    case mockContentLibrary.libraryId2:
+      return { ...mockContentLibrary.libraryData, id: mockContentLibrary.libraryId2, slug: 'TEST2' };
+    case mockContentLibrary.libraryIdReadOnly:
+      return {
+        ...mockContentLibrary.libraryData,
+        id: mockContentLibrary.libraryIdReadOnly,
+        slug: 'readOnly',
+        allowPublicRead: true,
+        canEditLibrary: false,
+      };
+    case mockContentLibrary.libraryDraftWithoutUser:
+      return {
+        ...mockContentLibrary.libraryData,
+        id: mockContentLibrary.libraryDraftWithoutUser,
+        slug: 'draftNoUser',
+        lastDraftCreatedBy: null,
+      };
+    case mockContentLibrary.libraryNoDraftDate:
+      return {
+        ...mockContentLibrary.libraryData,
+        id: mockContentLibrary.libraryNoDraftDate,
+        slug: 'noDraftDate',
+        lastDraftCreated: null,
+      };
+    case mockContentLibrary.libraryNoDraftNoCrateDate:
+      return {
+        ...mockContentLibrary.libraryData,
+        id: mockContentLibrary.libraryNoDraftNoCrateDate,
+        slug: 'noDraftNoCreateDate',
+        lastDraftCreated: null,
+        created: null,
+      };
+    case mockContentLibrary.libraryUnpublishedChanges:
+      return {
+        ...mockContentLibrary.libraryData,
+        id: mockContentLibrary.libraryUnpublishedChanges,
+        slug: 'unpublishedChanges',
+        lastPublished: '2024-07-26T16:37:42Z',
+        hasUnpublishedChanges: true,
+      };
+    case mockContentLibrary.libraryPublished:
+      return {
+        ...mockContentLibrary.libraryData,
+        id: mockContentLibrary.libraryPublished,
+        slug: 'published',
+        lastPublished: '2024-07-26T16:37:42Z',
+        hasUnpublishedChanges: false,
+        publishedBy: 'staff',
+      };
+    case mockContentLibrary.libraryPublishedWithoutUser:
+      return {
+        ...mockContentLibrary.libraryData,
+        id: mockContentLibrary.libraryPublishedWithoutUser,
+        slug: 'publishedWithUser',
+        lastPublished: '2024-07-26T16:37:42Z',
+        hasUnpublishedChanges: false,
+        publishedBy: null,
+      };
+    case mockContentLibrary.libraryDraftWithoutChanges:
+      return {
+        ...mockContentLibrary.libraryData,
+        id: mockContentLibrary.libraryDraftWithoutChanges,
+        slug: 'draftNoChanges',
+        numBlocks: 0,
+      };
+    case mockContentLibrary.libraryFromList:
+      return {
+        ...mockContentLibrary.libraryData,
+        id: mockContentLibrary.libraryFromList,
+        slug: 'TL1',
+        org: 'SampleTaxonomyOrg1',
+        title: 'Test Library 1',
+      };
+    default:
+      throw new Error(`mockContentLibrary: unknown library ID "${libraryId}"`);
+  }
+}
+mockContentLibrary.libraryId = 'lib:Axim:TEST';
+mockContentLibrary.libraryData = {
+  // This is captured from a real API response:
+  id: mockContentLibrary.libraryId,
+  type: 'complex', // 'type' is a deprecated field; don't use it.
+  org: 'Axim',
+  slug: 'TEST',
+  title: 'Test Library',
+  description: 'A library for testing',
+  numBlocks: 10,
+  version: 18,
+  lastPublished: null, // or e.g. '2024-08-30T16:37:42Z',
+  publishedBy: null, // or e.g. 'test_author',
+  lastDraftCreated: '2024-07-22T21:37:49Z',
+  lastDraftCreatedBy: 'staff',
+  allowLti: false,
+  allowPublicLearning: false,
+  allowPublicRead: false,
+  hasUnpublishedChanges: true,
+  hasUnpublishedDeletes: false,
+  license: '',
+  canEditLibrary: true,
+  created: '2024-06-26T14:19:59Z',
+  updated: '2024-07-20T17:36:51Z',
+} satisfies api.ContentLibrary;
+mockContentLibrary.libraryId2 = 'lib:Axim:TEST2';
+mockContentLibrary.libraryIdReadOnly = 'lib:Axim:readOnly';
+mockContentLibrary.libraryIdThatNeverLoads = 'lib:Axim:infiniteLoading';
+mockContentLibrary.library404 = 'lib:Axim:error404';
+mockContentLibrary.library500 = 'lib:Axim:error500';
+mockContentLibrary.libraryDraftWithoutUser = 'lib:Axim:draftNoUser';
+mockContentLibrary.libraryNoDraftDate = 'lib:Axim:noDraftDate';
+mockContentLibrary.libraryNoDraftNoCrateDate = 'lib:Axim:noDraftNoCreateDate';
+mockContentLibrary.libraryUnpublishedChanges = 'lib:Axim:unpublishedChanges';
+mockContentLibrary.libraryPublished = 'lib:Axim:published';
+mockContentLibrary.libraryPublishedWithoutUser = 'lib:Axim:publishedWithoutUser';
+mockContentLibrary.libraryDraftWithoutChanges = 'lib:Axim:draftNoChanges';
+mockContentLibrary.libraryFromList = 'lib:SampleTaxonomyOrg1:TL1';
+mockContentLibrary.applyMock = () => jest.spyOn(api, 'getContentLibrary').mockImplementation(mockContentLibrary);
+
+/**
+ * Mock for `createLibraryBlock()`
+ */
+export async function mockCreateLibraryBlock(
+  args: api.CreateBlockDataRequest,
+): ReturnType<typeof api.createLibraryBlock> {
+  if (args.libraryId === mockContentLibrary.libraryId) {
+    switch (args.blockType) {
+      case 'html': return mockCreateLibraryBlock.newHtmlData;
+      case 'problem': return mockCreateLibraryBlock.newProblemData;
+      case 'video': return mockCreateLibraryBlock.newVideoData;
+      default:
+        // Continue to error handling below.
+    }
+  }
+  throw new Error(`mockCreateLibraryBlock doesn't know how to mock ${JSON.stringify(args)}`);
+}
+mockCreateLibraryBlock.newHtmlData = {
+  id: 'lb:Axim:TEST:html:123',
+  defKey: '123',
+  blockType: 'html',
+  displayName: 'New Text Component',
+  hasUnpublishedChanges: true,
+  lastPublished: null, // or e.g. '2024-08-30T16:37:42Z',
+  publishedBy: null, // or e.g. 'test_author',
+  lastDraftCreated: '2024-07-22T21:37:49Z',
+  lastDraftCreatedBy: null,
+  created: '2024-07-22T21:37:49Z',
+  modified: '2024-07-22T21:37:49Z',
+  tagsCount: 0,
+  collections: [],
+} satisfies api.LibraryBlockMetadata;
+mockCreateLibraryBlock.newProblemData = {
+  id: 'lb:Axim:TEST:problem:prob1',
+  defKey: 'prob1',
+  blockType: 'problem',
+  displayName: 'New Problem',
+  hasUnpublishedChanges: true,
+  lastPublished: null, // or e.g. '2024-08-30T16:37:42Z',
+  publishedBy: null, // or e.g. 'test_author',
+  lastDraftCreated: '2024-07-22T21:37:49Z',
+  lastDraftCreatedBy: null,
+  created: '2024-07-22T21:37:49Z',
+  modified: '2024-07-22T21:37:49Z',
+  tagsCount: 0,
+  collections: [],
+} satisfies api.LibraryBlockMetadata;
+mockCreateLibraryBlock.newVideoData = {
+  id: 'lb:Axim:TEST:video:vid1',
+  defKey: 'vid1',
+  blockType: 'video',
+  displayName: 'New Video',
+  hasUnpublishedChanges: true,
+  lastPublished: null, // or e.g. '2024-08-30T16:37:42Z',
+  publishedBy: null, // or e.g. 'test_author',
+  lastDraftCreated: '2024-07-22T21:37:49Z',
+  lastDraftCreatedBy: null,
+  created: '2024-07-22T21:37:49Z',
+  modified: '2024-07-22T21:37:49Z',
+  tagsCount: 0,
+  collections: [],
+} satisfies api.LibraryBlockMetadata;
+/** Apply this mock. Returns a spy object that can tell you if it's been called. */
+mockCreateLibraryBlock.applyMock = () => (
+  jest.spyOn(api, 'createLibraryBlock').mockImplementation(mockCreateLibraryBlock)
+);
+
+/**
+ * Mock for `deleteLibraryBlock()`
+ */
+export async function mockDeleteLibraryBlock(): ReturnType<typeof api.deleteLibraryBlock> {
+  // no-op
+}
+/** Apply this mock. Returns a spy object that can tell you if it's been called. */
+mockDeleteLibraryBlock.applyMock = () => (
+  jest.spyOn(api, 'deleteLibraryBlock').mockImplementation(mockDeleteLibraryBlock)
+);
+
+/**
+ * Mock for `restoreLibraryBlock()`
+ */
+export async function mockRestoreLibraryBlock(): ReturnType<typeof api.restoreLibraryBlock> {
+  // no-op
+}
+/** Apply this mock. Returns a spy object that can tell you if it's been called. */
+mockRestoreLibraryBlock.applyMock = () => (
+  jest.spyOn(api, 'restoreLibraryBlock').mockImplementation(mockRestoreLibraryBlock)
+);
+
+/**
+ * Mock for `getXBlockFields()`
+ *
+ * This mock returns different data/responses depending on the ID of the block
+ * that you request. Use `mockXBlockFields.applyMock()` to apply it to the whole
+ * test suite.
+ */
+export async function mockXBlockFields(usageKey: string): Promise<api.XBlockFields> {
+  const thisMock = mockXBlockFields;
+  switch (usageKey) {
+    case thisMock.usageKeyHtml: return thisMock.dataHtml;
+    case thisMock.usageKeyNewHtml: return thisMock.dataNewHtml;
+    case thisMock.usageKeyNewProblem: return thisMock.dataNewProblem;
+    case thisMock.usageKeyNewVideo: return thisMock.dataNewVideo;
+    case thisMock.usageKeyThirdParty: return thisMock.dataThirdParty;
+    default: throw new Error(`No mock has been set up for usageKey "${usageKey}"`);
+  }
+}
+// Mock of a "regular" HTML (Text) block:
+mockXBlockFields.usageKeyHtml = 'lb:Axim:TEST:html:571fe018-f3ce-45c9-8f53-5dafcb422fdd';
+mockXBlockFields.dataHtml = {
+  displayName: 'Introduction to Testing',
+  data: '<p>This is a text component which uses <strong>HTML</strong>.</p>',
+  metadata: { displayName: 'Introduction to Testing' },
+} satisfies api.XBlockFields;
+// Mock of a blank/new HTML (Text) block:
+mockXBlockFields.usageKeyNewHtml = 'lb:Axim:TEST:html:123';
+mockXBlockFields.dataNewHtml = {
+  displayName: 'New Text Component',
+  data: '',
+  metadata: { displayName: 'New Text Component' },
+} satisfies api.XBlockFields;
+// Mock of a blank/new problem (CAPA) block:
+mockXBlockFields.usageKeyNewProblem = 'lb:Axim:TEST:problem:prob1';
+mockXBlockFields.dataNewProblem = {
+  displayName: 'New Problem Component',
+  data: '',
+  metadata: { displayName: 'New Problem Component' },
+} satisfies api.XBlockFields;
+mockXBlockFields.usageKeyNewVideo = 'lb:Axim:TEST:video:vid1';
+mockXBlockFields.dataNewVideo = {
+  displayName: 'New Video',
+  data: '',
+  metadata: { displayName: 'New Video' },
+} satisfies api.XBlockFields;
+mockXBlockFields.usageKeyThirdParty = 'lb:Axim:TEST:third_party:12345';
+mockXBlockFields.dataThirdParty = {
+  displayName: 'Third party XBlock',
+  data: '',
+  metadata: { displayName: 'Third party XBlock' },
+} satisfies api.XBlockFields;
+/** Apply this mock. Returns a spy object that can tell you if it's been called. */
+mockXBlockFields.applyMock = () => jest.spyOn(api, 'getXBlockFields').mockImplementation(mockXBlockFields);
+
+/**
+ * Mock for `getLibraryBlockMetadata()`
+ *
+ * This mock returns different data/responses depending on the ID of the block
+ * that you request. Use `mockLibraryBlockMetadata.applyMock()` to apply it to the whole
+ * test suite.
+ */
+export async function mockLibraryBlockMetadata(usageKey: string): Promise<api.LibraryBlockMetadata> {
+  const thisMock = mockLibraryBlockMetadata;
+  switch (usageKey) {
+    case thisMock.usageKeyThatNeverLoads:
+      // Return a promise that never resolves, to simulate never loading:
+      return new Promise<any>(() => {});
+    case thisMock.usageKeyError404:
+      throw createAxiosError({ code: 404, message: 'Not found.', path: api.getLibraryBlockMetadataUrl(usageKey) });
+    case thisMock.usageKeyNeverPublished: return thisMock.dataNeverPublished;
+    case thisMock.usageKeyPublished: return thisMock.dataPublished;
+    case thisMock.usageKeyWithCollections: return thisMock.dataWithCollections;
+    case thisMock.usageKeyPublishDisabled: return thisMock.dataPublishDisabled;
+    case thisMock.usageKeyThirdPartyXBlock: return thisMock.dataThirdPartyXBlock;
+    case thisMock.usageKeyForTags: return thisMock.dataPublished;
+    default: throw new Error(`No mock has been set up for usageKey "${usageKey}"`);
+  }
+}
+mockLibraryBlockMetadata.usageKeyThatNeverLoads = 'lb:Axim:infiniteLoading:html:123';
+mockLibraryBlockMetadata.usageKeyError404 = 'lb:Axim:error404:html:123';
+mockLibraryBlockMetadata.usageKeyNeverPublished = 'lb:Axim:TEST1:html:571fe018-f3ce-45c9-8f53-5dafcb422fd1';
+mockLibraryBlockMetadata.dataNeverPublished = {
+  id: 'lb:Axim:TEST1:html:571fe018-f3ce-45c9-8f53-5dafcb422fd1',
+  defKey: null,
+  blockType: 'html',
+  displayName: 'Introduction to Testing 1',
+  lastPublished: null,
+  publishedBy: null,
+  lastDraftCreated: null,
+  lastDraftCreatedBy: null,
+  hasUnpublishedChanges: false,
+  created: '2024-06-20T13:54:21Z',
+  modified: '2024-06-21T13:54:21Z',
+  tagsCount: 0,
+  collections: [],
+} satisfies api.LibraryBlockMetadata;
+mockLibraryBlockMetadata.usageKeyPublished = 'lb:Axim:TEST2:html:571fe018-f3ce-45c9-8f53-5dafcb422fd2';
+mockLibraryBlockMetadata.dataPublished = {
+  id: 'lb:Axim:TEST2:html:571fe018-f3ce-45c9-8f53-5dafcb422fd2',
+  defKey: null,
+  blockType: 'html',
+  displayName: 'Introduction to Testing 2',
+  lastPublished: '2024-06-21T00:00:00',
+  publishedBy: 'Luke',
+  lastDraftCreated: null,
+  lastDraftCreatedBy: '2024-06-20T20:00:00Z',
+  hasUnpublishedChanges: false,
+  created: '2024-06-20T13:54:21Z',
+  modified: '2024-06-21T13:54:21Z',
+  tagsCount: 0,
+  collections: [],
+} satisfies api.LibraryBlockMetadata;
+mockLibraryBlockMetadata.usageKeyPublishDisabled = 'lb:Axim:TEST2-disabled:html:571fe018-f3ce-45c9-8f53-5dafcb422fd2';
+mockLibraryBlockMetadata.dataPublishDisabled = {
+  ...mockLibraryBlockMetadata.dataPublished,
+  id: mockLibraryBlockMetadata.usageKeyPublishDisabled,
+  modified: '2024-06-11T13:54:21Z',
+} satisfies api.LibraryBlockMetadata;
+mockLibraryBlockMetadata.usageKeyThirdPartyXBlock = mockXBlockFields.usageKeyThirdParty;
+mockLibraryBlockMetadata.dataThirdPartyXBlock = {
+  ...mockLibraryBlockMetadata.dataPublished,
+  id: mockLibraryBlockMetadata.usageKeyThirdPartyXBlock,
+  blockType: 'third_party',
+} satisfies api.LibraryBlockMetadata;
+mockLibraryBlockMetadata.usageKeyForTags = mockContentTaxonomyTagsData.largeTagsId;
+mockLibraryBlockMetadata.usageKeyWithCollections = 'lb:Axim:TEST:html:571fe018-f3ce-45c9-8f53-5dafcb422fdd';
+mockLibraryBlockMetadata.dataWithCollections = {
+  id: 'lb:Axim:TEST:html:571fe018-f3ce-45c9-8f53-5dafcb422fdd',
+  defKey: null,
+  blockType: 'html',
+  displayName: 'Introduction to Testing 2',
+  lastPublished: '2024-06-21T00:00:00',
+  publishedBy: 'Luke',
+  lastDraftCreated: null,
+  lastDraftCreatedBy: '2024-06-20T20:00:00Z',
+  hasUnpublishedChanges: false,
+  created: '2024-06-20T13:54:21Z',
+  modified: '2024-06-21T13:54:21Z',
+  tagsCount: 0,
+  collections: [{ title: 'My first collection', key: 'my-first-collection' }],
+} satisfies api.LibraryBlockMetadata;
+/** Apply this mock. Returns a spy object that can tell you if it's been called. */
+mockLibraryBlockMetadata.applyMock = () => jest.spyOn(api, 'getLibraryBlockMetadata').mockImplementation(mockLibraryBlockMetadata);
+
+/**
+ * Mock for `getCollectionMetadata()`
+ *
+ * This mock returns a fixed response for the collection ID *collection_1*.
+ */
+export async function mockGetCollectionMetadata(libraryId: string, collectionId: string): Promise<api.Collection> {
+  switch (collectionId) {
+    case mockGetCollectionMetadata.collectionIdError:
+      throw createAxiosError({
+        code: 404,
+        message: 'Not found.',
+        path: api.getLibraryCollectionApiUrl(libraryId, collectionId),
+      });
+    case mockGetCollectionMetadata.collectionIdLoading:
+      return new Promise(() => {});
+    default:
+      return Promise.resolve(mockGetCollectionMetadata.collectionData);
+  }
+}
+mockGetCollectionMetadata.collectionId = 'collection_1';
+mockGetCollectionMetadata.collectionIdError = 'collection_error';
+mockGetCollectionMetadata.collectionIdLoading = 'collection_loading';
+mockGetCollectionMetadata.collectionData = {
+  id: 1,
+  key: 'collection_1',
+  title: 'Test Collection',
+  description: 'A collection for testing',
+  created: '2024-09-19T10:00:00Z',
+  createdBy: 'test_author',
+  modified: '2024-09-20T11:00:00Z',
+  learningPackage: 11,
+  enabled: true,
+} satisfies api.Collection;
+/** Apply this mock. Returns a spy object that can tell you if it's been called. */
+mockGetCollectionMetadata.applyMock = () => {
+  jest.spyOn(api, 'getCollectionMetadata').mockImplementation(mockGetCollectionMetadata);
+};
+
+/**
+ * Mock for `getXBlockOLX()`
+ *
+ * This mock returns different data/responses depending on the ID of the block
+ * that you request. Use `mockXBlockOLX.applyMock()` to apply it to the whole
+ * test suite.
+ */
+export async function mockXBlockOLX(usageKey: string): Promise<string> {
+  const thisMock = mockXBlockOLX;
+  switch (usageKey) {
+    case thisMock.usageKeyHtml: return thisMock.olxHtml;
+    default: {
+      const blockType = getBlockType(usageKey);
+      return `<${blockType}>This is mock OLX for usageKey "${usageKey}"</${blockType}>`;
+    }
+  }
+}
+// Mock of a "regular" HTML (Text) block:
+mockXBlockOLX.usageKeyHtml = mockXBlockFields.usageKeyHtml;
+mockXBlockOLX.olxHtml = `
+  <html display_name="${mockXBlockFields.dataHtml.displayName}">
+    ${mockXBlockFields.dataHtml.data}
+  </html>
+`;
+/** Apply this mock. Returns a spy object that can tell you if it's been called. */
+mockXBlockOLX.applyMock = () => jest.spyOn(api, 'getXBlockOLX').mockImplementation(mockXBlockOLX);
+
+/**
+ * Mock for `setXBlockOLX()`
+ */
+export async function mockSetXBlockOLX(_usageKey: string, newOLX: string): Promise<string> {
+  return newOLX;
+}
+/** Apply this mock. Returns a spy object that can tell you if it's been called. */
+mockSetXBlockOLX.applyMock = () => jest.spyOn(api, 'setXBlockOLX').mockImplementation(mockSetXBlockOLX);
+
+/**
+ * Mock for `getXBlockAssets()`
+ *
+ * Use `getXBlockAssets.applyMock()` to apply it to the whole test suite.
+ */
+export async function mockXBlockAssets(): ReturnType<typeof api['getXBlockAssets']> {
+  return [
+    { path: 'static/image1.png', url: 'https://cdn.test.none/image1.png', size: 12_345_000 },
+    { path: 'static/data.csv', url: 'https://cdn.test.none/data.csv', size: 8_000 },
+  ];
+}
+/** Apply this mock. Returns a spy object that can tell you if it's been called. */
+mockXBlockAssets.applyMock = () => jest.spyOn(api, 'getXBlockAssets').mockImplementation(mockXBlockAssets);
+
+/**
+ * Mock for `getLibraryTeam()`
+ *
+ * Use `mockGetLibraryTeam.applyMock()` to apply it to the whole test suite.
+ */
+export async function mockGetLibraryTeam(libraryId: string): Promise<api.LibraryTeamMember[]> {
+  switch (libraryId) {
+    case mockContentLibrary.libraryIdThatNeverLoads:
+      // Return a promise that never resolves, to simulate never loading:
+      return new Promise<any>(() => {});
+    default:
+      return [
+        mockGetLibraryTeam.adminMember,
+        mockGetLibraryTeam.authorMember,
+        mockGetLibraryTeam.readerMember,
+      ];
+  }
+}
+mockGetLibraryTeam.adminMember = {
+  username: 'admin-user',
+  email: 'admin@domain.tld',
+  accessLevel: 'admin' as api.LibraryAccessLevel,
+};
+mockGetLibraryTeam.authorMember = {
+  username: 'author-user',
+  email: 'author@domain.tld',
+  accessLevel: 'author' as api.LibraryAccessLevel,
+};
+mockGetLibraryTeam.readerMember = {
+  username: 'reader-user',
+  email: 'reader@domain.tld',
+  accessLevel: 'read' as api.LibraryAccessLevel,
+};
+mockGetLibraryTeam.notMember = {
+  username: 'not-user',
+  email: 'not@domain.tld',
+};
+
+/** Apply this mock. Returns a spy object that can tell you if it's been called. */
+mockGetLibraryTeam.applyMock = () => jest.spyOn(api, 'getLibraryTeam').mockImplementation(mockGetLibraryTeam);
diff --git a/src/library-authoring/data/api.test.ts b/src/library-authoring/data/api.test.ts
new file mode 100644
index 0000000000..86a5249905
--- /dev/null
+++ b/src/library-authoring/data/api.test.ts
@@ -0,0 +1,83 @@
+import { initializeMocks } from '../../testUtils';
+import * as api from './api';
+
+describe('library data API', () => {
+  describe('createLibraryBlock', () => {
+    it('should create library block', async () => {
+      const { axiosMock } = initializeMocks();
+      const libraryId = 'lib:org:1';
+      const url = api.getCreateLibraryBlockUrl(libraryId);
+      axiosMock.onPost(url).reply(200);
+      await api.createLibraryBlock({
+        libraryId,
+        blockType: 'html',
+        definitionId: '1',
+      });
+
+      expect(axiosMock.history.post[0].url).toEqual(url);
+    });
+  });
+
+  describe('deleteLibraryBlock', () => {
+    it('should delete a library block', async () => {
+      const { axiosMock } = initializeMocks();
+      const usageKey = 'lib:org:1';
+      const url = api.getLibraryBlockMetadataUrl(usageKey);
+      axiosMock.onDelete(url).reply(200);
+      await api.deleteLibraryBlock({ usageKey });
+      expect(axiosMock.history.delete[0].url).toEqual(url);
+    });
+  });
+
+  describe('restoreLibraryBlock', () => {
+    it('should restore a soft-deleted library block', async () => {
+      const { axiosMock } = initializeMocks();
+      const usageKey = 'lib:org:1';
+      const url = api.getLibraryBlockRestoreUrl(usageKey);
+      axiosMock.onPost(url).reply(200);
+      await api.restoreLibraryBlock({ usageKey });
+      expect(axiosMock.history.post[0].url).toEqual(url);
+    });
+  });
+
+  describe('commitLibraryChanges', () => {
+    it('should commit library changes', async () => {
+      const { axiosMock } = initializeMocks();
+      const libraryId = 'lib:org:1';
+      const url = api.getCommitLibraryChangesUrl(libraryId);
+      axiosMock.onPost(url).reply(200);
+
+      await api.commitLibraryChanges(libraryId);
+
+      expect(axiosMock.history.post[0].url).toEqual(url);
+    });
+  });
+
+  describe('revertLibraryChanges', () => {
+    it('should revert library changes', async () => {
+      const { axiosMock } = initializeMocks();
+      const libraryId = 'lib:org:1';
+      const url = api.getCommitLibraryChangesUrl(libraryId);
+      axiosMock.onDelete(url).reply(200);
+
+      await api.revertLibraryChanges(libraryId);
+
+      expect(axiosMock.history.delete[0].url).toEqual(url);
+    });
+  });
+
+  it('should create collection', async () => {
+    const { axiosMock } = initializeMocks();
+    const libraryId = 'lib:org:1';
+    const url = api.getLibraryCollectionsApiUrl(libraryId);
+
+    axiosMock.onPost(url).reply(200);
+
+    await api.createCollection(libraryId, {
+      title: 'This is a test',
+      description: 'This is only a test',
+    });
+
+    expect(axiosMock.history.post[0].url).toEqual(url);
+  });
+});
diff --git a/src/library-authoring/data/api.ts b/src/library-authoring/data/api.ts
new file mode 100644
index 0000000000..6432aaafd3
--- /dev/null
+++ b/src/library-authoring/data/api.ts
@@ -0,0 +1,535 @@
+import { camelCaseObject, getConfig, snakeCaseObject } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { VersionSpec } from '../LibraryBlock';
+
+const getApiBaseUrl = () => getConfig().STUDIO_BASE_URL;
+
+/**
+ * Get the URL for the content library API.
+ */
+export const getContentLibraryApiUrl = (libraryId: string) => `${getApiBaseUrl()}/api/libraries/v2/${libraryId}/`;
+
+/**
+ * Get the URL for create content in library.
+ */
+export const getCreateLibraryBlockUrl = (libraryId: string) => `${getApiBaseUrl()}/api/libraries/v2/${libraryId}/blocks/`;
+
+/**
+ * Get the URL for the content library team API.
+ */
+export const getLibraryTeamApiUrl = (libraryId: string) => `${getApiBaseUrl()}/api/libraries/v2/${libraryId}/team/`;
+
+/**
+ * Get the URL for updating/deleting a content library team member.
+ */
+export const getLibraryTeamMemberApiUrl = (libraryId: string, username: string) => `${getApiBaseUrl()}/api/libraries/v2/${libraryId}/team/user/${username}/`;
+
+/**
+ * Get the URL for library block metadata.
+ */
+export const getLibraryBlockMetadataUrl = (usageKey: string) => `${getApiBaseUrl()}/api/libraries/v2/blocks/${usageKey}/`;
+
+/**
+ * Get the URL for restoring deleted library block.
+ */
+export const getLibraryBlockRestoreUrl = (usageKey: string) => `${getLibraryBlockMetadataUrl(usageKey)}restore/`;
+
+/**
+ * Get the URL for library block metadata.
+ */
+export const getLibraryBlockCollectionsUrl = (usageKey: string) => `${getLibraryBlockMetadataUrl(usageKey)}collections/`;
+
+/**
+ * Get the URL for content library list API.
+ */
+export const getContentLibraryV2ListApiUrl = () => `${getApiBaseUrl()}/api/libraries/v2/`;
+
+/**
+ * Get the URL for commit/revert changes in library.
+ */
+export const getCommitLibraryChangesUrl = (libraryId: string) => `${getApiBaseUrl()}/api/libraries/v2/${libraryId}/commit/`;
+
+/**
+ * Get the URL for paste clipboard content into library.
+ */
+export const getLibraryPasteClipboardUrl = (libraryId: string) => `${getApiBaseUrl()}/api/libraries/v2/${libraryId}/paste_clipboard/`;
+
+/**
+  * Get the URL for the xblock fields/metadata API.
+  */
+export const getXBlockFieldsApiUrl = (usageKey: string) => `${getApiBaseUrl()}/api/xblock/v2/xblocks/${usageKey}/fields/`;
+export const getXBlockFieldsVersionApiUrl = (usageKey: string, version: VersionSpec) => `${getApiBaseUrl()}/api/xblock/v2/xblocks/${usageKey}@${version}/fields/`;
+
+/**
+  * Get the URL for the xblock OLX API
+  */
+export const getXBlockOLXApiUrl = (usageKey: string) => `${getLibraryBlockMetadataUrl(usageKey)}olx/`;
+export const getXBlockOLXVersionApiUrl = (usageKey: string, version: VersionSpec) => `${getApiBaseUrl()}/api/xblock/v2/xblocks/${usageKey}@${version}/olx/`;
+
+/**
+ * Get the URL for the xblock Publish API
+ */
+export const getXBlockPublishApiUrl = (usageKey: string) => `${getApiBaseUrl()}/api/libraries/v2/blocks/${usageKey}/publish/`;
+/**
+  * Get the URL for the xblock Assets List API
+  */
+export const getXBlockAssetsApiUrl = (usageKey: string) => `${getApiBaseUrl()}/api/libraries/v2/blocks/${usageKey}/assets/`;
+/**
+ * Get the URL for the Library Collections API.
+ */
+export const getLibraryCollectionsApiUrl = (libraryId: string) => `${getApiBaseUrl()}/api/libraries/v2/${libraryId}/collections/`;
+/**
+ * Get the URL for the collection detail API.
+ */
+export const getLibraryCollectionApiUrl = (libraryId: string, collectionId: string) => `${getLibraryCollectionsApiUrl(libraryId)}${collectionId}/`;
+/**
+ * Get the URL for the collection components API.
+ */
+export const getLibraryCollectionComponentApiUrl = (libraryId: string, collectionId: string) => `${getLibraryCollectionApiUrl(libraryId, collectionId)}components/`;
+/**
+ * Get the API URL for restoring deleted collection.
+ */
+export const getLibraryCollectionRestoreApiUrl = (libraryId: string, collectionId: string) => `${getLibraryCollectionApiUrl(libraryId, collectionId)}restore/`;
+/**
+ * Get the URL for the xblock api.
+ */
+export const getXBlockBaseApiUrl = () => `${getApiBaseUrl()}/xblock/`;
+
+export interface ContentLibrary {
+  id: string;
+  type: string;
+  org: string;
+  slug: string;
+  title: string;
+  description: string;
+  numBlocks: number;
+  version: number;
+  lastPublished: string | null;
+  lastDraftCreated: string | null;
+  publishedBy: string | null;
+  lastDraftCreatedBy: string | null;
+  allowLti: boolean;
+  allowPublicLearning: boolean;
+  allowPublicRead: boolean;
+  hasUnpublishedChanges: boolean;
+  hasUnpublishedDeletes: boolean;
+  canEditLibrary: boolean;
+  license: string;
+  created: string | null;
+  updated: string | null;
+}
+
+export type LibraryAccessLevel = 'read' | 'author' | 'admin';
+
+export interface LibraryTeamMember {
+  username: string;
+  email: string;
+  accessLevel: LibraryAccessLevel,
+}
+
+export interface AddLibraryTeamMember {
+  libraryId: string,
+  email: string;
+  accessLevel: LibraryAccessLevel,
+}
+
+export interface DeleteLibraryTeamMember {
+  libraryId: string,
+  username: string;
+}
+
+export interface UpdateLibraryTeamMember extends DeleteLibraryTeamMember {
+  accessLevel: LibraryAccessLevel,
+}
+
+export interface Collection {
+  id: number;
+  key: string;
+  title: string;
+  description: string;
+  enabled: boolean;
+  createdBy: string | null;
+  created: string;
+  modified: string;
+  learningPackage: number;
+}
+
+export interface LibraryBlockType {
+  blockType: string;
+  displayName: string;
+}
+
+export interface LibrariesV2Response {
+  next: string | null,
+  previous: string | null,
+  count: number,
+  numPages: number,
+  currentPage: number,
+  start: number,
+  results: ContentLibrary[],
+}
+
+export interface XBlockFields {
+  displayName: string;
+  metadata: Record<string, unknown>;
+  data: string;
+}
+
+/* Additional custom parameters for the API request. */
+export interface GetLibrariesV2CustomParams {
+  /* (optional) Library type, default `complex` */
+  type?: string,
+  /* (optional) Page number of results */
+  page?: number,
+  /* (optional) The number of results on each page, default `50` */
+  pageSize?: number,
+  /* (optional) Whether pagination is supported, default `true` */
+  pagination?: boolean,
+  /* (optional) Library field to order results by. Prefix with '-' for descending */
+  order?: string,
+  /* (optional) Search query to filter v2 Libraries by */
+  search?: string,
+}
+
+export type LibraryAssetResponse = {
+  path: string,
+  size: number,
+  url: string,
+};
+
+export interface CreateBlockDataRequest {
+  libraryId: string;
+  blockType: string;
+  definitionId: string;
+}
+
+export interface DeleteBlockDataRequest {
+  usageKey: string;
+}
+
+export interface CollectionMetadata {
+  key: string;
+  title: string;
+}
+
+export interface LibraryBlockMetadata {
+  id: string;
+  blockType: string;
+  defKey: string | null;
+  displayName: string;
+  lastPublished: string | null;
+  publishedBy: string | null;
+  lastDraftCreated: string | null;
+  lastDraftCreatedBy: string | null,
+  hasUnpublishedChanges: boolean;
+  created: string | null;
+  modified: string | null;
+  tagsCount: number;
+  collections: CollectionMetadata[];
+}
+
+export interface UpdateLibraryDataRequest {
+  id: string;
+  title?: string;
+  description?: string;
+  allow_public_learning?: boolean;
+  allow_public_read?: boolean;
+  type?: string;
+  license?: string;
+}
+
+export interface LibraryPasteClipboardRequest {
+  libraryId: string;
+  blockId: string;
+}
+
+export interface UpdateXBlockFieldsRequest {
+  data?: unknown;
+  metadata?: {
+    display_name?: string;
+  };
+}
+
+export interface CreateLibraryCollectionDataRequest {
+  title: string;
+  description: string | null;
+}
+
+export type UpdateCollectionComponentsRequest = Partial<CreateLibraryCollectionDataRequest>;
+
+/**
+ * Fetch a content library by its ID.
+ */
+export async function getContentLibrary(libraryId: string): Promise<ContentLibrary> {
+  const { data } = await getAuthenticatedHttpClient().get(getContentLibraryApiUrl(libraryId));
+  return camelCaseObject(data);
+}
+
+export async function createLibraryBlock({
+  libraryId,
+  blockType,
+  definitionId,
+}: CreateBlockDataRequest): Promise<LibraryBlockMetadata> {
+  const client = getAuthenticatedHttpClient();
+  const { data } = await client.post(
+    getCreateLibraryBlockUrl(libraryId),
+    {
+      block_type: blockType,
+      definition_id: definitionId,
+    },
+  );
+  return camelCaseObject(data);
+}
+
+export async function deleteLibraryBlock({ usageKey }: DeleteBlockDataRequest): Promise<void> {
+  const client = getAuthenticatedHttpClient();
+  await client.delete(getLibraryBlockMetadataUrl(usageKey));
+}
+
+export async function restoreLibraryBlock({ usageKey }: DeleteBlockDataRequest): Promise<void> {
+  const client = getAuthenticatedHttpClient();
+  await client.post(getLibraryBlockRestoreUrl(usageKey));
+}
+
+/**
+ * Update library metadata.
+ */
+export async function updateLibraryMetadata(libraryData: UpdateLibraryDataRequest): Promise<ContentLibrary> {
+  const client = getAuthenticatedHttpClient();
+  const { id: libraryId, ...updateData } = libraryData;
+  const { data } = await client.patch(getContentLibraryApiUrl(libraryId), updateData);
+
+  return camelCaseObject(data);
+}
+
+/**
+ * Get a list of content libraries.
+ */
+export async function getContentLibraryV2List(customParams: GetLibrariesV2CustomParams): Promise<LibrariesV2Response> {
+  // Set default params if not passed in
+  const customParamsDefaults = {
+    type: customParams.type || 'complex',
+    page: customParams.page || 1,
+    pageSize: customParams.pageSize || 50,
+    pagination: customParams.pagination !== undefined ? customParams.pagination : true,
+    order: customParams.order || 'title',
+    textSearch: customParams.search,
+  };
+  const customParamsFormated = snakeCaseObject(customParamsDefaults);
+  const { data } = await getAuthenticatedHttpClient()
+    .get(getContentLibraryV2ListApiUrl(), { params: customParamsFormated });
+  return camelCaseObject(data);
+}
+
+/**
+ * Commit library changes.
+ */
+export async function commitLibraryChanges(libraryId: string) {
+  const client = getAuthenticatedHttpClient();
+  await client.post(getCommitLibraryChangesUrl(libraryId));
+}
+
+/**
+ * Revert library changes.
+ */
+export async function revertLibraryChanges(libraryId: string) {
+  const client = getAuthenticatedHttpClient();
+  await client.delete(getCommitLibraryChangesUrl(libraryId));
+}
+
+/**
+ * Fetch  content library's team by library ID.
+ */
+export async function getLibraryTeam(libraryId: string): Promise<LibraryTeamMember[]> {
+  const client = getAuthenticatedHttpClient();
+  const { data } = await client.get(getLibraryTeamApiUrl(libraryId));
+  return camelCaseObject(data);
+}
+
+/**
+ * Add a new member to the library's team by email.
+ */
+export async function addLibraryTeamMember(memberData: AddLibraryTeamMember): Promise<LibraryTeamMember> {
+  const client = getAuthenticatedHttpClient();
+  const url = getLibraryTeamApiUrl(memberData.libraryId);
+  const { data } = await client.post(url, snakeCaseObject(memberData));
+  return camelCaseObject(data);
+}
+
+/**
+ * Delete an existing member from the library's team by username.
+ */
+export async function deleteLibraryTeamMember(memberData: DeleteLibraryTeamMember): Promise<LibraryTeamMember> {
+  const client = getAuthenticatedHttpClient();
+  const url = getLibraryTeamMemberApiUrl(memberData.libraryId, memberData.username);
+  const { data } = await client.delete(url);
+  return camelCaseObject(data);
+}
+
+/**
+ * Update an existing member's access to the library's team by username.
+ */
+export async function updateLibraryTeamMember(memberData: UpdateLibraryTeamMember): Promise<LibraryTeamMember> {
+  const client = getAuthenticatedHttpClient();
+  const url = getLibraryTeamMemberApiUrl(memberData.libraryId, memberData.username);
+  const { data } = await client.put(url, snakeCaseObject(memberData));
+  return camelCaseObject(data);
+}
+
+/**
+ * Paste clipboard content into library.
+ */
+export async function libraryPasteClipboard({
+  libraryId,
+  blockId,
+}: LibraryPasteClipboardRequest): Promise<LibraryBlockMetadata> {
+  const client = getAuthenticatedHttpClient();
+  const { data } = await client.post(
+    getLibraryPasteClipboardUrl(libraryId),
+    {
+      block_id: blockId,
+    },
+  );
+  return data;
+}
+
+/**
+ * Fetch library block metadata.
+ */
+export async function getLibraryBlockMetadata(usageKey: string): Promise<LibraryBlockMetadata> {
+  const { data } = await getAuthenticatedHttpClient().get(getLibraryBlockMetadataUrl(usageKey));
+  return camelCaseObject(data);
+}
+
+/**
+ * Fetch xblock fields.
+ */
+export async function getXBlockFields(usageKey: string, version: VersionSpec = 'draft'): Promise<XBlockFields> {
+  const { data } = await getAuthenticatedHttpClient().get(getXBlockFieldsVersionApiUrl(usageKey, version));
+  return camelCaseObject(data);
+}
+
+/**
+ * Update xblock fields.
+ */
+export async function updateXBlockFields(usageKey: string, xblockData: UpdateXBlockFieldsRequest) {
+  const client = getAuthenticatedHttpClient();
+  await client.post(getXBlockFieldsApiUrl(usageKey), xblockData);
+}
+
+/**
+ * Create a library collection
+ */
+export async function createCollection(libraryId: string, collectionData: CreateLibraryCollectionDataRequest) {
+  const client = getAuthenticatedHttpClient();
+  const { data } = await client.post(getLibraryCollectionsApiUrl(libraryId), collectionData);
+
+  return camelCaseObject(data);
+}
+
+/**
+ * Fetch the OLX for the given XBlock.
+ */
+// istanbul ignore next
+export async function getXBlockOLX(usageKey: string, version: VersionSpec = 'draft'): Promise<string> {
+  const { data } = await getAuthenticatedHttpClient().get(getXBlockOLXVersionApiUrl(usageKey, version));
+  return data.olx;
+}
+
+/**
+ * Set the OLX for the given XBlock.
+ * Returns the OLX as it was actually saved.
+ */
+// istanbul ignore next
+export async function setXBlockOLX(usageKey: string, newOLX: string): Promise<string> {
+  const { data } = await getAuthenticatedHttpClient().post(getXBlockOLXApiUrl(usageKey), { olx: newOLX });
+  return data.olx;
+}
+
+/**
+ * Publish the given XBlock.
+ */
+export async function publishXBlock(usageKey: string) {
+  const client = getAuthenticatedHttpClient();
+  await client.post(getXBlockPublishApiUrl(usageKey));
+}
+
+/**
+ * Fetch the asset (static file) list for the given XBlock.
+ */
+// istanbul ignore next
+export async function getXBlockAssets(usageKey: string): Promise<LibraryAssetResponse[]> {
+  const { data } = await getAuthenticatedHttpClient().get(getXBlockAssetsApiUrl(usageKey));
+  return data.files;
+}
+
+/**
+ * Delete a single asset file
+ */
+// istanbul ignore next
+export async function deleteXBlockAsset(usageKey: string, path: string): Promise<void> {
+  await getAuthenticatedHttpClient().delete(getXBlockAssetsApiUrl(usageKey) + encodeURIComponent(path));
+}
+
+/**
+ * Get the collection metadata.
+ */
+export async function getCollectionMetadata(libraryId: string, collectionId: string): Promise<Collection> {
+  const { data } = await getAuthenticatedHttpClient().get(getLibraryCollectionApiUrl(libraryId, collectionId));
+  return camelCaseObject(data);
+}
+
+/**
+ * Update collection metadata.
+ */
+export async function updateCollectionMetadata(
+  libraryId: string,
+  collectionId: string,
+  collectionData: UpdateCollectionComponentsRequest,
+) {
+  const client = getAuthenticatedHttpClient();
+  await client.patch(getLibraryCollectionApiUrl(libraryId, collectionId), collectionData);
+}
+
+/**
+ * Add components to collection.
+ */
+export async function addComponentsToCollection(libraryId: string, collectionId: string, usageKeys: string[]) {
+  await getAuthenticatedHttpClient().patch(getLibraryCollectionComponentApiUrl(libraryId, collectionId), {
+    usage_keys: usageKeys,
+  });
+}
+
+/**
+ * Remove components from collection.
+ */
+export async function removeComponentsFromCollection(libraryId: string, collectionId: string, usageKeys: string[]) {
+  await getAuthenticatedHttpClient().delete(getLibraryCollectionComponentApiUrl(libraryId, collectionId), {
+    data: { usage_keys: usageKeys },
+  });
+}
+
+/**
+ * Soft-Delete collection.
+ */
+export async function deleteCollection(libraryId: string, collectionId: string) {
+  const client = getAuthenticatedHttpClient();
+  await client.delete(getLibraryCollectionApiUrl(libraryId, collectionId));
+}
+
+/**
+ * Restore soft-deleted collection
+ */
+export async function restoreCollection(libraryId: string, collectionId: string) {
+  const client = getAuthenticatedHttpClient();
+  await client.post(getLibraryCollectionRestoreApiUrl(libraryId, collectionId));
+}
+
+/**
+ * Update component collections.
+ */
+export async function updateComponentCollections(usageKey: string, collectionKeys: string[]) {
+  await getAuthenticatedHttpClient().patch(getLibraryBlockCollectionsUrl(usageKey), {
+    collection_keys: collectionKeys,
+  });
+}
diff --git a/src/library-authoring/data/apiHooks.test.tsx b/src/library-authoring/data/apiHooks.test.tsx
new file mode 100644
index 0000000000..62fadf31ec
--- /dev/null
+++ b/src/library-authoring/data/apiHooks.test.tsx
@@ -0,0 +1,126 @@
+import React from 'react';
+
+import { initializeMockApp } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { waitFor } from '@testing-library/react';
+import { renderHook } from '@testing-library/react-hooks';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import MockAdapter from 'axios-mock-adapter';
+import {
+  getCommitLibraryChangesUrl,
+  getCreateLibraryBlockUrl,
+  getLibraryCollectionComponentApiUrl,
+  getLibraryCollectionsApiUrl,
+  getLibraryCollectionApiUrl,
+} from './api';
+import {
+  useCommitLibraryChanges,
+  useCreateLibraryBlock,
+  useCreateLibraryCollection,
+  useRevertLibraryChanges,
+  useAddComponentsToCollection,
+  useCollection,
+} from './apiHooks';
+
+let axiosMock;
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+    },
+  },
+});
+
+const wrapper = ({ children }) => (
+  <QueryClientProvider client={queryClient}>
+    {children}
+  </QueryClientProvider>
+);
+
+describe('library api hooks', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+  });
+
+  it('should create library block', async () => {
+    const libraryId = 'lib:org:1';
+    const url = getCreateLibraryBlockUrl(libraryId);
+    axiosMock.onPost(url).reply(200);
+    const { result } = renderHook(() => useCreateLibraryBlock(), { wrapper });
+    await result.current.mutateAsync({
+      libraryId,
+      blockType: 'html',
+      definitionId: '1',
+    });
+
+    expect(axiosMock.history.post[0].url).toEqual(url);
+  });
+
+  it('should commit library changes', async () => {
+    const libraryId = 'lib:org:1';
+    const url = getCommitLibraryChangesUrl(libraryId);
+    axiosMock.onPost(url).reply(200);
+    const { result } = renderHook(() => useCommitLibraryChanges(), { wrapper });
+    await result.current.mutateAsync(libraryId);
+
+    expect(axiosMock.history.post[0].url).toEqual(url);
+  });
+
+  it('should revert library changes', async () => {
+    const libraryId = 'lib:org:1';
+    const url = getCommitLibraryChangesUrl(libraryId);
+    axiosMock.onDelete(url).reply(200);
+    const { result } = renderHook(() => useRevertLibraryChanges(), { wrapper });
+    await result.current.mutateAsync(libraryId);
+
+    expect(axiosMock.history.delete[0].url).toEqual(url);
+  });
+
+  it('should create collection', async () => {
+    const libraryId = 'lib:org:1';
+    const url = getLibraryCollectionsApiUrl(libraryId);
+    axiosMock.onPost(url).reply(200);
+
+    const { result } = renderHook(() => useCreateLibraryCollection(libraryId), { wrapper });
+    await result.current.mutateAsync({
+      title: 'This is a test',
+      description: 'This is only a test',
+    });
+
+    expect(axiosMock.history.post[0].url).toEqual(url);
+  });
+
+  it('should add components to collection', async () => {
+    const libraryId = 'lib:org:1';
+    const collectionId = 'my-first-collection';
+    const url = getLibraryCollectionComponentApiUrl(libraryId, collectionId);
+    axiosMock.onPatch(url).reply(200);
+    const { result } = renderHook(() => useAddComponentsToCollection(libraryId, collectionId), { wrapper });
+    await result.current.mutateAsync(['some-usage-key']);
+
+    expect(axiosMock.history.patch[0].url).toEqual(url);
+  });
+
+  it('should get collection metadata', async () => {
+    const libraryId = 'lib:org:1';
+    const collectionId = 'my-first-collection';
+    const url = getLibraryCollectionApiUrl(libraryId, collectionId);
+
+    axiosMock.onGet(url).reply(200, { 'test-data': 'test-value' });
+    const { result } = renderHook(() => useCollection(libraryId, collectionId), { wrapper });
+    await waitFor(() => {
+      expect(result.current.isLoading).toBeFalsy();
+    });
+    expect(result.current.data).toEqual({ testData: 'test-value' });
+    expect(axiosMock.history.get[0].url).toEqual(url);
+  });
+});
diff --git a/src/library-authoring/data/apiHooks.ts b/src/library-authoring/data/apiHooks.ts
new file mode 100644
index 0000000000..46cd148925
--- /dev/null
+++ b/src/library-authoring/data/apiHooks.ts
@@ -0,0 +1,544 @@
+import { camelCaseObject } from '@edx/frontend-platform';
+import {
+  useQuery,
+  useMutation,
+  useQueryClient,
+  type Query,
+  type QueryClient,
+} from '@tanstack/react-query';
+import { useCallback } from 'react';
+
+import { getLibraryId } from '../../generic/key-utils';
+import {
+  type GetLibrariesV2CustomParams,
+  type ContentLibrary,
+  type XBlockFields,
+  type UpdateXBlockFieldsRequest,
+  getContentLibrary,
+  createLibraryBlock,
+  deleteLibraryBlock,
+  getContentLibraryV2List,
+  commitLibraryChanges,
+  revertLibraryChanges,
+  updateLibraryMetadata,
+  getLibraryTeam,
+  addLibraryTeamMember,
+  deleteLibraryTeamMember,
+  updateLibraryTeamMember,
+  libraryPasteClipboard,
+  getLibraryBlockMetadata,
+  getXBlockFields,
+  updateXBlockFields,
+  createCollection,
+  getXBlockOLX,
+  updateCollectionMetadata,
+  type UpdateCollectionComponentsRequest,
+  addComponentsToCollection,
+  type CreateLibraryCollectionDataRequest,
+  getCollectionMetadata,
+  deleteCollection,
+  restoreCollection,
+  setXBlockOLX,
+  getXBlockAssets,
+  updateComponentCollections,
+  removeComponentsFromCollection,
+  publishXBlock,
+  deleteXBlockAsset,
+  restoreLibraryBlock,
+} from './api';
+import { VersionSpec } from '../LibraryBlock';
+
+export const libraryQueryPredicate = (query: Query, libraryId: string): boolean => {
+  // Invalidate all content queries related to this library.
+  // If we allow searching "all courses and libraries" in the future,
+  // then we'd have to invalidate all `["content_search", "results"]`
+  // queries, and not just the ones for this library, because items from
+  // this library could be included in an "all courses and libraries"
+  // search. For now we only allow searching individual libraries.
+  const extraFilter = query.queryKey[5]; // extraFilter contains library id
+  if (!(Array.isArray(extraFilter) || typeof extraFilter === 'string')) {
+    return false;
+  }
+
+  return query.queryKey[0] === 'content_search' && extraFilter?.includes(`context_key = "${libraryId}"`);
+};
+
+export const libraryAuthoringQueryKeys = {
+  all: ['contentLibrary'],
+  /**
+   * Base key for data specific to a contentLibrary
+   */
+  contentLibrary: (contentLibraryId?: string) => [...libraryAuthoringQueryKeys.all, contentLibraryId],
+  contentLibraryList: (customParams?: GetLibrariesV2CustomParams) => [
+    ...libraryAuthoringQueryKeys.all,
+    'list',
+    ...(customParams ? [customParams] : []),
+  ],
+  libraryTeam: (libraryId?: string) => [
+    ...libraryAuthoringQueryKeys.all,
+    'list',
+    libraryId,
+  ],
+  collection: (libraryId?: string, collectionId?: string) => [
+    ...libraryAuthoringQueryKeys.all,
+    libraryId,
+    collectionId,
+  ],
+};
+
+export const xblockQueryKeys = {
+  all: ['xblock'],
+  /**
+   * Base key for data specific to a xblock
+   */
+  xblock: (usageKey?: string) => [...xblockQueryKeys.all, usageKey],
+  /** Fields (i.e. the content, display name, etc.) of an XBlock */
+  xblockFields: (usageKey: string, version: VersionSpec = 'draft') => [...xblockQueryKeys.xblock(usageKey), 'fields', version],
+  /** OLX (XML representation of the fields/content) */
+  xblockOLX: (usageKey: string) => [...xblockQueryKeys.xblock(usageKey), 'OLX'],
+  /** assets (static files) */
+  xblockAssets: (usageKey: string) => [...xblockQueryKeys.xblock(usageKey), 'assets'],
+  componentMetadata: (usageKey: string) => [...xblockQueryKeys.xblock(usageKey), 'componentMetadata'],
+};
+
+/**
+ * Tell react-query to refresh its cache of any data related to the given
+ * component (XBlock).
+ *
+ * Note that technically it's possible to derive the library key from the
+ * usageKey, so we could refactor this to only require the usageKey.
+ *
+ * @param queryClient The query client - get it via useQueryClient()
+ * @param contentLibraryId The ID of library that holds the XBlock ("lib:...")
+ * @param usageKey The usage ID of the XBlock ("lb:...")
+ */
+export function invalidateComponentData(queryClient: QueryClient, contentLibraryId: string, usageKey: string) {
+  queryClient.invalidateQueries({ queryKey: xblockQueryKeys.xblockFields(usageKey) });
+  queryClient.invalidateQueries({ queryKey: xblockQueryKeys.componentMetadata(usageKey) });
+  // The description and display name etc. may have changed, so refresh everything in the library too:
+  // This might fail in case this helper is called after deleting the block.
+  queryClient.invalidateQueries({ queryKey: libraryAuthoringQueryKeys.contentLibrary(contentLibraryId) });
+  queryClient.invalidateQueries({ predicate: (query) => libraryQueryPredicate(query, contentLibraryId) });
+}
+
+/**
+ * Hook to fetch a content library by its ID.
+ */
+export const useContentLibrary = (libraryId: string | undefined) => (
+  useQuery({
+    queryKey: libraryAuthoringQueryKeys.contentLibrary(libraryId),
+    queryFn: () => getContentLibrary(libraryId!),
+    enabled: libraryId !== undefined,
+  })
+);
+
+/**
+ * Use this mutation to create a block in a library
+ */
+export const useCreateLibraryBlock = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: createLibraryBlock,
+    onSettled: (_data, _error, variables) => {
+      queryClient.invalidateQueries({ queryKey: libraryAuthoringQueryKeys.contentLibrary(variables.libraryId) });
+      queryClient.invalidateQueries({ predicate: (query) => libraryQueryPredicate(query, variables.libraryId) });
+    },
+  });
+};
+
+/**
+ * Use this mutation to delete a block in a library
+ */
+export const useDeleteLibraryBlock = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: deleteLibraryBlock,
+    onSettled: (_data, _error, variables) => {
+      const libraryId = getLibraryId(variables.usageKey);
+      invalidateComponentData(queryClient, libraryId, variables.usageKey);
+    },
+  });
+};
+
+/**
+ * Use this mutation to restore a deleted block in a library
+ */
+export const useRestoreLibraryBlock = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: restoreLibraryBlock,
+    onSettled: (_data, _error, variables) => {
+      const libraryId = getLibraryId(variables.usageKey);
+      invalidateComponentData(queryClient, libraryId, variables.usageKey);
+    },
+  });
+};
+
+export const useUpdateLibraryMetadata = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: updateLibraryMetadata,
+    onMutate: async (data) => {
+      const queryKey = libraryAuthoringQueryKeys.contentLibrary(data.id);
+      const previousLibraryData = queryClient.getQueriesData(queryKey)[0][1] as ContentLibrary;
+
+      const newLibraryData = {
+        ...previousLibraryData,
+        ...camelCaseObject(data),
+      };
+
+      queryClient.setQueryData(queryKey, newLibraryData);
+
+      return { previousLibraryData, newLibraryData };
+    },
+    onError: (_err, data, context) => {
+      queryClient.setQueryData(
+        libraryAuthoringQueryKeys.contentLibrary(data.id),
+        context?.previousLibraryData,
+      );
+    },
+    onSettled: (_data, _error, variables) => {
+      queryClient.invalidateQueries({ queryKey: libraryAuthoringQueryKeys.contentLibrary(variables.id) });
+    },
+  });
+};
+
+/**
+ * Builds the query to fetch list of V2 Libraries
+ */
+export const useContentLibraryV2List = (customParams: GetLibrariesV2CustomParams) => (
+  useQuery({
+    queryKey: libraryAuthoringQueryKeys.contentLibraryList(customParams),
+    queryFn: () => getContentLibraryV2List(customParams),
+    keepPreviousData: true,
+  })
+);
+
+export const useCommitLibraryChanges = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: commitLibraryChanges,
+    onSettled: (_data, _error, libraryId) => {
+      queryClient.invalidateQueries({ queryKey: libraryAuthoringQueryKeys.contentLibrary(libraryId) });
+    },
+  });
+};
+
+export const useRevertLibraryChanges = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: revertLibraryChanges,
+    onSettled: (_data, _error, libraryId) => {
+      queryClient.invalidateQueries({ queryKey: libraryAuthoringQueryKeys.contentLibrary(libraryId) });
+      queryClient.invalidateQueries({ predicate: (query) => libraryQueryPredicate(query, libraryId) });
+    },
+  });
+};
+
+/**
+ * Hook to fetch a content library's team members
+ */
+export const useLibraryTeam = (libraryId: string | undefined) => (
+  useQuery({
+    queryKey: libraryAuthoringQueryKeys.libraryTeam(libraryId),
+    queryFn: () => getLibraryTeam(libraryId!),
+    enabled: libraryId !== undefined,
+  })
+);
+
+/**
+ * Hook to add a new member to a content library's team
+ */
+export const useAddLibraryTeamMember = (libraryId: string | undefined) => {
+  const queryClient = useQueryClient();
+  const queryKey = libraryAuthoringQueryKeys.libraryTeam(libraryId);
+
+  return useMutation({
+    mutationFn: addLibraryTeamMember,
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey });
+    },
+  });
+};
+
+/**
+ * Hook to delete an existing member from a content library's team
+ */
+export const useDeleteLibraryTeamMember = (libraryId: string | undefined) => {
+  const queryClient = useQueryClient();
+  const queryKey = libraryAuthoringQueryKeys.libraryTeam(libraryId);
+
+  return useMutation({
+    mutationFn: deleteLibraryTeamMember,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey });
+    },
+  });
+};
+
+/**
+ * Hook to update an existing member's access in a content library's team
+ */
+export const useUpdateLibraryTeamMember = (libraryId: string | undefined) => {
+  const queryClient = useQueryClient();
+  const queryKey = libraryAuthoringQueryKeys.libraryTeam(libraryId);
+
+  return useMutation({
+    mutationFn: updateLibraryTeamMember,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey });
+    },
+  });
+};
+
+export const useLibraryPasteClipboard = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: libraryPasteClipboard,
+    onSettled: (_data, _error, variables) => {
+      queryClient.invalidateQueries({ queryKey: libraryAuthoringQueryKeys.contentLibrary(variables.libraryId) });
+      queryClient.invalidateQueries({ predicate: (query) => libraryQueryPredicate(query, variables.libraryId) });
+    },
+  });
+};
+
+export const useLibraryBlockMetadata = (usageId: string | undefined) => (
+  useQuery({
+    queryKey: xblockQueryKeys.componentMetadata(usageId!),
+    queryFn: () => getLibraryBlockMetadata(usageId!),
+    enabled: !!usageId,
+  })
+);
+
+export const useXBlockFields = (usageKey: string, version: VersionSpec = 'draft') => (
+  useQuery({
+    queryKey: xblockQueryKeys.xblockFields(usageKey, version),
+    queryFn: () => getXBlockFields(usageKey, version),
+    enabled: !!usageKey,
+  })
+);
+
+export const useUpdateXBlockFields = (usageKey: string) => {
+  const contentLibraryId = getLibraryId(usageKey);
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (data: UpdateXBlockFieldsRequest) => updateXBlockFields(usageKey, data),
+    onMutate: async (data) => {
+      const queryKey = xblockQueryKeys.xblockFields(usageKey);
+      const previousBlockData = queryClient.getQueriesData(queryKey)[0][1] as XBlockFields;
+      const formatedData = camelCaseObject(data);
+
+      const newBlockData = {
+        ...previousBlockData,
+        ...(formatedData.metadata?.displayName && { displayName: formatedData.metadata.displayName }),
+        metadata: {
+          ...previousBlockData.metadata,
+          ...formatedData.metadata,
+        },
+      };
+
+      queryClient.setQueryData(queryKey, newBlockData);
+
+      return { previousBlockData, newBlockData };
+    },
+    onError: (_err, _data, context) => {
+      queryClient.setQueryData(
+        xblockQueryKeys.xblockFields(usageKey),
+        context?.previousBlockData,
+      );
+    },
+    onSettled: () => {
+      invalidateComponentData(queryClient, contentLibraryId, usageKey);
+    },
+  });
+};
+
+/**
+ * Use this mutation to create a library collection
+ */
+export const useCreateLibraryCollection = (libraryId: string) => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (data: CreateLibraryCollectionDataRequest) => createCollection(libraryId, data),
+    onSettled: () => {
+      queryClient.invalidateQueries({ predicate: (query) => libraryQueryPredicate(query, libraryId) });
+    },
+  });
+};
+
+/** Get the OLX source of a library component */
+export const useXBlockOLX = (usageKey: string, version: VersionSpec) => (
+  useQuery({
+    queryKey: xblockQueryKeys.xblockOLX(usageKey),
+    queryFn: () => getXBlockOLX(usageKey, version),
+    enabled: !!usageKey,
+  })
+);
+
+/**
+ * Update the OLX of a library component (advanced feature)
+ */
+export const useUpdateXBlockOLX = (usageKey: string) => {
+  const contentLibraryId = getLibraryId(usageKey);
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (newOLX: string) => setXBlockOLX(usageKey, newOLX),
+    onSuccess: (olxFromServer) => {
+      queryClient.setQueryData(xblockQueryKeys.xblockOLX(usageKey), olxFromServer);
+      invalidateComponentData(queryClient, contentLibraryId, usageKey);
+    },
+  });
+};
+
+/**
+ * Publish changes to a library component
+ */
+export const usePublishComponent = (usageKey: string) => {
+  const queryClient = useQueryClient();
+  const contentLibraryId = getLibraryId(usageKey);
+  return useMutation({
+    mutationFn: () => publishXBlock(usageKey),
+    onSettled: () => {
+      invalidateComponentData(queryClient, contentLibraryId, usageKey);
+    },
+  });
+};
+
+/** Get the list of assets (static files) attached to a library component */
+export const useXBlockAssets = (usageKey: string) => (
+  useQuery({
+    queryKey: xblockQueryKeys.xblockAssets(usageKey),
+    queryFn: () => getXBlockAssets(usageKey),
+    enabled: !!usageKey,
+  })
+);
+
+/** Refresh the list of assets (static files) attached to a library component */
+export const useInvalidateXBlockAssets = (usageKey: string) => {
+  const client = useQueryClient();
+  return useCallback(() => {
+    client.invalidateQueries({ queryKey: xblockQueryKeys.xblockAssets(usageKey) });
+  }, [usageKey]);
+};
+
+/**
+ * Use this mutation to delete an asset file from a library
+ */
+export const useDeleteXBlockAsset = (usageKey: string) => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (path: string) => deleteXBlockAsset(usageKey, path),
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: xblockQueryKeys.xblockAssets(usageKey) });
+    },
+  });
+};
+
+/**
+ * Get the metadata for a collection in a library
+ */
+export const useCollection = (libraryId: string, collectionId: string) => (
+  useQuery({
+    enabled: !!libraryId && !!collectionId,
+    queryKey: libraryAuthoringQueryKeys.collection(libraryId, collectionId),
+    queryFn: () => getCollectionMetadata(libraryId!, collectionId!),
+  })
+);
+
+/**
+ * Use this mutation to update the fields of a collection in a library
+ */
+export const useUpdateCollection = (libraryId: string, collectionId: string) => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: (data: UpdateCollectionComponentsRequest) => updateCollectionMetadata(libraryId, collectionId, data),
+    onSettled: () => {
+      // NOTE: We invalidate the library query here because we need to update the library's
+      // collection list.
+      queryClient.invalidateQueries({ predicate: (query) => libraryQueryPredicate(query, libraryId) });
+      queryClient.invalidateQueries({ queryKey: libraryAuthoringQueryKeys.collection(libraryId, collectionId) });
+    },
+  });
+};
+
+/**
+ * Use this mutation to add components to a collection in a library
+ */
+export const useAddComponentsToCollection = (libraryId?: string, collectionId?: string) => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async (usageKeys: string[]) => {
+      if (libraryId !== undefined && collectionId !== undefined) {
+        return addComponentsToCollection(libraryId, collectionId, usageKeys);
+      }
+      return undefined;
+    },
+    onSettled: () => {
+      if (libraryId !== undefined && collectionId !== undefined) {
+        queryClient.invalidateQueries({ predicate: (query) => libraryQueryPredicate(query, libraryId) });
+      }
+    },
+  });
+};
+
+/**
+ * Use this mutation to remove components from a collection in a library
+ */
+export const useRemoveComponentsFromCollection = (libraryId?: string, collectionId?: string) => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async (usageKeys: string[]) => {
+      if (libraryId !== undefined && collectionId !== undefined) {
+        return removeComponentsFromCollection(libraryId, collectionId, usageKeys);
+      }
+      return undefined;
+    },
+    onSettled: () => {
+      if (libraryId !== undefined && collectionId !== undefined) {
+        queryClient.invalidateQueries({ predicate: (query) => libraryQueryPredicate(query, libraryId) });
+      }
+    },
+  });
+};
+
+/**
+ * Use this mutation to soft delete collections in a library
+ */
+export const useDeleteCollection = (libraryId: string, collectionId: string) => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async () => deleteCollection(libraryId, collectionId),
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: libraryAuthoringQueryKeys.contentLibrary(libraryId) });
+      queryClient.invalidateQueries({ predicate: (query) => libraryQueryPredicate(query, libraryId) });
+    },
+  });
+};
+
+/**
+ * Use this mutation to restore soft deleted collections in a library
+ */
+export const useRestoreCollection = (libraryId: string, collectionId: string) => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async () => restoreCollection(libraryId, collectionId),
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: libraryAuthoringQueryKeys.contentLibrary(libraryId) });
+      queryClient.invalidateQueries({ predicate: (query) => libraryQueryPredicate(query, libraryId) });
+    },
+  });
+};
+
+/**
+ * Use this mutation to update collections related a component in a library
+ */
+export const useUpdateComponentCollections = (libraryId: string, usageKey: string) => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async (collectionKeys: string[]) => updateComponentCollections(usageKey, collectionKeys),
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: xblockQueryKeys.componentMetadata(usageKey) });
+      queryClient.invalidateQueries({ predicate: (query) => libraryQueryPredicate(query, libraryId) });
+    },
+  });
+};
diff --git a/src/library-authoring/generic/history-widget/HistoryWidget.scss b/src/library-authoring/generic/history-widget/HistoryWidget.scss
new file mode 100644
index 0000000000..84e11cf60a
--- /dev/null
+++ b/src/library-authoring/generic/history-widget/HistoryWidget.scss
@@ -0,0 +1,6 @@
+.history-widget-bar {
+  border-left: 8px solid $info-300;
+  border-radius: 4px;
+  padding-left: 1rem;
+}
+
diff --git a/src/library-authoring/generic/history-widget/index.tsx b/src/library-authoring/generic/history-widget/index.tsx
new file mode 100644
index 0000000000..8b49d03d77
--- /dev/null
+++ b/src/library-authoring/generic/history-widget/index.tsx
@@ -0,0 +1,52 @@
+import { FormattedMessage, FormattedDate } from '@edx/frontend-platform/i18n';
+import { Stack } from '@openedx/paragon';
+
+import messages from './messages';
+
+const CustomFormattedDate = ({ date }: { date: string | Date }) => (
+  <FormattedDate
+    value={date}
+    year="numeric"
+    month="long"
+    day="2-digit"
+  />
+);
+
+type HistoryWidgedProps = {
+  modified: string | Date | null;
+  created: string | Date | null;
+};
+
+/**
+  * This component displays the history of an entity (Last Modified and Created dates)
+  *
+  * This component doesn't handle fetching the data or any other side effects. It only displays the dates.
+  *
+  * @example
+  * ```tsx
+  * const { data: componentMetadata } = useLibraryBlockMetadata(usageKey);
+  *
+  * return <HistoryWidget {...componentMetadata} />;
+  * ```
+  */
+const HistoryWidget = ({
+  modified,
+  created,
+}: HistoryWidgedProps) => (
+  <Stack className="history-widget-bar small" gap={3}>
+    {modified && (
+      <div>
+        <div className="text-muted"><FormattedMessage {...messages.lastModifiedTitle} /> </div>
+        <CustomFormattedDate date={modified} />
+      </div>
+    )}
+    {created && (
+      <div>
+        <div className="text-muted"><FormattedMessage {...messages.createdTitle} /> </div>
+        <CustomFormattedDate date={created} />
+      </div>
+    )}
+  </Stack>
+);
+
+export default HistoryWidget;
diff --git a/src/library-authoring/generic/history-widget/messages.ts b/src/library-authoring/generic/history-widget/messages.ts
new file mode 100644
index 0000000000..b0c84a85e7
--- /dev/null
+++ b/src/library-authoring/generic/history-widget/messages.ts
@@ -0,0 +1,16 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  lastModifiedTitle: {
+    id: 'course-authoring.library-authoring.generic.history-widget.last-modified',
+    defaultMessage: 'Last Modified',
+    description: 'Title of the last modified section in the library authoring sidebar.',
+  },
+  createdTitle: {
+    id: 'course-authoring.library-authoring.generic.history-widget.created',
+    defaultMessage: 'Created',
+    description: 'Title of the created section in the library authoring sidebar.',
+  },
+});
+
+export default messages;
diff --git a/src/library-authoring/generic/index.scss b/src/library-authoring/generic/index.scss
new file mode 100644
index 0000000000..aa5bf5cc50
--- /dev/null
+++ b/src/library-authoring/generic/index.scss
@@ -0,0 +1,2 @@
+@import "./history-widget/HistoryWidget";
+@import "./status-widget/StatusWidget";
diff --git a/src/library-authoring/generic/status-widget/StatusWidget.scss b/src/library-authoring/generic/status-widget/StatusWidget.scss
new file mode 100644
index 0000000000..cdb1c4cf61
--- /dev/null
+++ b/src/library-authoring/generic/status-widget/StatusWidget.scss
@@ -0,0 +1,12 @@
+.status-widget {
+  &.draft-status {
+    background-color: #FDF3E9;
+    border-top: 4px solid #F4B57B;
+  }
+
+  &.published-status {
+    background-color: $info-100;
+    border-top: 4px solid $info-400;
+  }
+}
+
diff --git a/src/library-authoring/generic/status-widget/index.tsx b/src/library-authoring/generic/status-widget/index.tsx
new file mode 100644
index 0000000000..19fdc71444
--- /dev/null
+++ b/src/library-authoring/generic/status-widget/index.tsx
@@ -0,0 +1,207 @@
+import {
+  FormattedDate,
+  FormattedMessage,
+  FormattedTime,
+  useIntl,
+} from '@edx/frontend-platform/i18n';
+import { Button, Container, Stack } from '@openedx/paragon';
+import classNames from 'classnames';
+
+import messages from './messages';
+
+const CustomFormattedDate = ({ date }: { date: string }) => (
+  <b>
+    <FormattedDate
+      value={date}
+      year="numeric"
+      month="long"
+      day="2-digit"
+    />
+  </b>
+);
+
+const CustomFormattedTime = ({ date }: { date: string }) => (
+  <b>
+    <FormattedTime
+      value={date}
+      hour12={false}
+    />
+  </b>
+);
+
+type DraftBodyMessageProps = {
+  lastDraftCreatedBy: string | null;
+  lastDraftCreated: string | null;
+  created: string | null;
+};
+const DraftBodyMessage = ({ lastDraftCreatedBy, lastDraftCreated, created }: DraftBodyMessageProps) => {
+  if (lastDraftCreatedBy && lastDraftCreated) {
+    return (
+      <FormattedMessage
+        {...messages.lastDraftMsg}
+        values={{
+          date: <CustomFormattedDate date={lastDraftCreated} />,
+          time: <CustomFormattedTime date={lastDraftCreated} />,
+          user: <b>{lastDraftCreatedBy}</b>,
+        }}
+      />
+    );
+  }
+
+  if (lastDraftCreated) {
+    return (
+      <FormattedMessage
+        {...messages.lastDraftMsgWithoutUser}
+        values={{
+          date: <CustomFormattedDate date={lastDraftCreated} />,
+          time: <CustomFormattedTime date={lastDraftCreated} />,
+        }}
+      />
+    );
+  }
+
+  if (created) {
+    return (
+      <FormattedMessage
+        {...messages.lastDraftMsgWithoutUser}
+        values={{
+          date: <CustomFormattedDate date={created} />,
+          time: <CustomFormattedTime date={created} />,
+        }}
+      />
+    );
+  }
+
+  return null;
+};
+
+type StatusWidgedProps = {
+  lastPublished: string | null;
+  hasUnpublishedChanges: boolean;
+  hasUnpublishedDeletes?: boolean;
+  lastDraftCreatedBy: string | null;
+  lastDraftCreated: string | null;
+  created: string | null;
+  publishedBy: string | null;
+  numBlocks?: number;
+  onCommit?: () => void;
+  onRevert?: () => void;
+};
+
+/**
+  * This component displays the status of an entity (published, draft, etc.) and allows the user to publish
+  * or discard changes.
+  *
+  * This component doesn't handle fetching the data or any other side effects. It only displays the status
+  * and provides the buttons to commit or revert changes.
+  *
+  * @example
+  * ```tsx
+  * const { data: libraryData } = useContentLibrary(libraryId);
+  * const onCommit = () => { commitChanges(libraryId); };
+  * const onRevert = () => { revertChanges(libraryId); };
+  *
+  * return <StatusWidget {...libraryData} onCommit={onCommit} onRevert={onRevert} />;
+  * ```
+  */
+const StatusWidget = ({
+  lastPublished,
+  hasUnpublishedChanges,
+  hasUnpublishedDeletes,
+  lastDraftCreatedBy,
+  lastDraftCreated,
+  created,
+  publishedBy,
+  numBlocks,
+  onCommit,
+  onRevert,
+}: StatusWidgedProps) => {
+  const intl = useIntl();
+
+  let isNew: boolean | undefined;
+  let isPublished: boolean;
+  let statusMessage: string;
+  let extraStatusMessage: string | undefined;
+  let bodyMessage: React.ReactNode | undefined;
+
+  if (!lastPublished) {
+    // Entity is never published (new)
+    isNew = numBlocks != null && numBlocks === 0; // allow discarding if components are added
+    isPublished = false;
+    statusMessage = intl.formatMessage(messages.draftStatusLabel);
+    extraStatusMessage = intl.formatMessage(messages.neverPublishedLabel);
+    bodyMessage = (<DraftBodyMessage {...{ lastDraftCreatedBy, lastDraftCreated, created }} />);
+  } else if (hasUnpublishedChanges || hasUnpublishedDeletes) {
+    // Entity is on Draft state
+    isPublished = false;
+    statusMessage = intl.formatMessage(messages.draftStatusLabel);
+    extraStatusMessage = intl.formatMessage(messages.unpublishedStatusLabel);
+    bodyMessage = (<DraftBodyMessage {...{ lastDraftCreatedBy, lastDraftCreated, created }} />);
+  } else {
+    // Entity is published
+    isPublished = true;
+    statusMessage = intl.formatMessage(messages.publishedStatusLabel);
+    if (publishedBy) {
+      bodyMessage = (
+        <FormattedMessage
+          {...messages.lastPublishedMsg}
+          values={{
+            date: <CustomFormattedDate date={lastPublished} />,
+            time: <CustomFormattedTime date={lastPublished} />,
+            user: <b>{publishedBy}</b>,
+          }}
+        />
+      );
+    } else {
+      bodyMessage = (
+        <FormattedMessage
+          {...messages.lastPublishedMsgWithoutUser}
+          values={{
+            date: <CustomFormattedDate date={lastPublished} />,
+            time: <CustomFormattedTime date={lastPublished} />,
+          }}
+        />
+      );
+    }
+  }
+
+  return (
+    <Stack>
+      <Container className={classNames('status-widget', {
+        'draft-status': !isPublished,
+        'published-status': isPublished,
+      })}
+      >
+        <span className="font-weight-bold">
+          {statusMessage}
+        </span>
+        { extraStatusMessage && (
+          <span className="ml-1">
+            {extraStatusMessage}
+          </span>
+        )}
+      </Container>
+      <Container className="mt-3">
+        <Stack gap={3}>
+          <span>
+            {bodyMessage}
+          </span>
+          {onCommit && (
+            <Button disabled={isPublished} onClick={onCommit}>
+              {intl.formatMessage(messages.publishButtonLabel)}
+            </Button>
+          )}
+          {onRevert && (
+            <div className="d-flex justify-content-end">
+              <Button disabled={isPublished || isNew} variant="link" onClick={onRevert}>
+                {intl.formatMessage(messages.discardChangesButtonLabel)}
+              </Button>
+            </div>
+          )}
+        </Stack>
+      </Container>
+    </Stack>
+  );
+};
+
+export default StatusWidget;
diff --git a/src/library-authoring/generic/status-widget/messages.ts b/src/library-authoring/generic/status-widget/messages.ts
new file mode 100644
index 0000000000..a9af927555
--- /dev/null
+++ b/src/library-authoring/generic/status-widget/messages.ts
@@ -0,0 +1,56 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  draftStatusLabel: {
+    id: 'course-authoring.library-authoring.generic.status-widget.draft',
+    defaultMessage: 'Draft',
+    description: 'Label in library authoring sidebar when the entity is on draft status',
+  },
+  neverPublishedLabel: {
+    id: 'course-authoring.library-authoring.generic.status-widget.never',
+    defaultMessage: '(Never Published)',
+    description: 'Label in library authoring sidebar when the entity is never published',
+  },
+  unpublishedStatusLabel: {
+    id: 'course-authoring.library-authoring.generic.status-widget.unpublished',
+    defaultMessage: '(Unpublished Changes)',
+    description: 'Label in library authoring sidebar when the entity has unpublished changes',
+  },
+  publishedStatusLabel: {
+    id: 'course-authoring.library-authoring.generic.status-widget.published',
+    defaultMessage: 'Published',
+    description: 'Label in library authoring sidebar when the entity is on published status',
+  },
+  lastPublishedMsg: {
+    id: 'course-authoring.library-authoring.generic.status-widget.last-published',
+    defaultMessage: 'Last published on {date} at {time} by {user}.',
+    description: 'Body message of the library authoring sidebar when the entity is published.',
+  },
+  lastPublishedMsgWithoutUser: {
+    id: 'course-authoring.library-authoring.generic.status-widget.last-published-no-user',
+    defaultMessage: 'Last published on {date} at {time}.',
+    description: 'Body message of the library authoring sidebar when the entity is published.',
+  },
+  lastDraftMsg: {
+    id: 'course-authoring.library-authoring.generic.status-widget.last-draft',
+    defaultMessage: 'Draft saved on {date} at {time} by {user}.',
+    description: 'Body message of the library authoring sidebar when the entity is on draft status.',
+  },
+  lastDraftMsgWithoutUser: {
+    id: 'course-authoring.library-authoring.generic.status-widget.last-draft-no-user',
+    defaultMessage: 'Draft saved on {date} at {time}.',
+    description: 'Body message of the library authoring sidebar when the entity is on draft status.',
+  },
+  publishButtonLabel: {
+    id: 'course-authoring.library-authoring.generic.status-widget.publish-button',
+    defaultMessage: 'Publish',
+    description: 'Label of publish button for an entity.',
+  },
+  discardChangesButtonLabel: {
+    id: 'course-authoring.library-authoring.generic.status-widget.discard-button',
+    defaultMessage: 'Discard Changes',
+    description: 'Label of discard changes button for an entity.',
+  },
+});
+
+export default messages;
diff --git a/src/library-authoring/index.scss b/src/library-authoring/index.scss
new file mode 100644
index 0000000000..62097ddbc3
--- /dev/null
+++ b/src/library-authoring/index.scss
@@ -0,0 +1,11 @@
+@import "./component-info/ComponentPreview";
+@import "./components/ComponentCard";
+@import "./generic";
+@import "./LibraryAuthoringPage";
+
+.library-cards-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  grid-gap: 2rem;
+  justify-items: center;
+}
diff --git a/src/library-authoring/index.tsx b/src/library-authoring/index.tsx
new file mode 100644
index 0000000000..91100f0906
--- /dev/null
+++ b/src/library-authoring/index.tsx
@@ -0,0 +1,5 @@
+export { default as LibraryLayout } from './LibraryLayout';
+export { ComponentPicker } from './component-picker';
+export { CreateLibrary } from './create-library';
+export { libraryAuthoringQueryKeys, useContentLibraryV2List } from './data/apiHooks';
+export { default as PreviewChangesEmbed } from './legacy-integration/PreviewChangesEmbed';
diff --git a/src/library-authoring/legacy-integration/PreviewChangesEmbed.test.tsx b/src/library-authoring/legacy-integration/PreviewChangesEmbed.test.tsx
new file mode 100644
index 0000000000..bd1e143f2b
--- /dev/null
+++ b/src/library-authoring/legacy-integration/PreviewChangesEmbed.test.tsx
@@ -0,0 +1,53 @@
+import { mockContentLibrary, mockLibraryBlockMetadata } from '../data/api.mocks';
+import {
+  fireEvent,
+  render,
+  screen,
+  initializeMocks,
+  within,
+} from '../../testUtils';
+
+import PreviewChangesEmbed from './PreviewChangesEmbed';
+
+mockContentLibrary.applyMock();
+mockLibraryBlockMetadata.applyMock();
+const usageKey = mockLibraryBlockMetadata.usageKeyWithCollections;
+
+describe('<CompareChangesWidget />', () => {
+  beforeEach(() => {
+    initializeMocks();
+  });
+
+  it('can compare published (old) and draft (new) versions by default', async () => {
+    render(<PreviewChangesEmbed />, {
+      path: '/legacy/preview-changes/:usageKey',
+      routerProps: { initialEntries: [`/legacy/preview-changes/${usageKey}/?old=13`] },
+    });
+
+    // By default we see the new version (the published version):
+    const newTab = screen.getByRole('tab', { name: 'New version' });
+    expect(newTab).toBeInTheDocument();
+    expect(newTab).toHaveClass('active');
+
+    const newTabPanel = screen.getByRole('tabpanel', { name: 'New version' });
+    const newIframe = within(newTabPanel).getByTitle('Preview');
+    expect(newIframe).toBeVisible();
+    expect(newIframe).toHaveAttribute(
+      'src',
+      `http://localhost:18010/xblocks/v2/${usageKey}/embed/student_view/?version=published`,
+    );
+
+    // Now switch to the "old version" tab:
+    const oldTab = screen.getByRole('tab', { name: 'Old version' });
+    fireEvent.click(oldTab);
+
+    const oldTabPanel = screen.getByRole('tabpanel', { name: 'Old version' });
+    expect(oldTabPanel).toBeVisible();
+    const oldIframe = within(oldTabPanel).getByTitle('Preview');
+    expect(oldIframe).toBeVisible();
+    expect(oldIframe).toHaveAttribute(
+      'src',
+      `http://localhost:18010/xblocks/v2/${usageKey}/embed/student_view/?version=13`,
+    );
+  });
+});
diff --git a/src/library-authoring/legacy-integration/PreviewChangesEmbed.tsx b/src/library-authoring/legacy-integration/PreviewChangesEmbed.tsx
new file mode 100644
index 0000000000..c1fa8c90c5
--- /dev/null
+++ b/src/library-authoring/legacy-integration/PreviewChangesEmbed.tsx
@@ -0,0 +1,41 @@
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { useParams, useSearchParams } from 'react-router-dom';
+import { Helmet } from 'react-helmet';
+
+import CompareChangesWidget from '../component-comparison/CompareChangesWidget';
+import { useLibraryBlockMetadata } from '../data/apiHooks';
+import messages from '../component-comparison/messages';
+
+/**
+ * This view is only used to support the legacy UI.
+ * On the legacy unit page, when a v2 library block has been used in a course
+ * AND an updated version of that block is available, this view is rendered in
+ * an iframe in a modal, and allows the author to preview the changes before
+ * accepting them (before syncing the course version with the latest library
+ * version).
+ *
+ * The inner <CompareChangesWidget> will be used by this MFE as well, on the
+ * new MFE unit page.
+ */
+const PreviewChangesEmbed = () => {
+  const intl = useIntl();
+  const { usageKey } = useParams();
+  if (usageKey === undefined) {
+    // istanbul ignore next - This shouldn't be possible; it's just here to satisfy the type checker.
+    throw new Error('Error: route is missing usageKey.');
+  }
+  const [queryString] = useSearchParams();
+  const oldVersion = parseInt(queryString.get('old') ?? '', 10) || 'published';
+  const { data: metadata } = useLibraryBlockMetadata(usageKey);
+
+  return (
+    <>
+      {/* It's not necessary since this will usually be in an <iframe>,
+          but it's good practice to set a title for any top level page */}
+      <Helmet><title>{intl.formatMessage(messages.iframeTitlePrefix)} | {metadata?.displayName ?? ''} | {process.env.SITE_NAME}</title></Helmet>
+      <CompareChangesWidget usageKey={usageKey} oldVersion={oldVersion} newVersion="published" />
+    </>
+  );
+};
+
+export default PreviewChangesEmbed;
diff --git a/src/library-authoring/library-info/LibraryInfo.test.tsx b/src/library-authoring/library-info/LibraryInfo.test.tsx
new file mode 100644
index 0000000000..69aa4c14f0
--- /dev/null
+++ b/src/library-authoring/library-info/LibraryInfo.test.tsx
@@ -0,0 +1,241 @@
+import type MockAdapter from 'axios-mock-adapter';
+
+import {
+  fireEvent,
+  render as baseRender,
+  screen,
+  waitFor,
+  initializeMocks,
+} from '../../testUtils';
+import { mockContentLibrary } from '../data/api.mocks';
+import { getCommitLibraryChangesUrl } from '../data/api';
+import { LibraryProvider } from '../common/context/LibraryContext';
+import LibraryInfo from './LibraryInfo';
+
+const {
+  libraryId: mockLibraryId,
+  libraryIdReadOnly,
+  libraryDraftWithoutUser,
+  libraryNoDraftDate,
+  libraryNoDraftNoCrateDate,
+  libraryUnpublishedChanges,
+  libraryPublished,
+  libraryPublishedWithoutUser,
+  libraryDraftWithoutChanges,
+  libraryData,
+} = mockContentLibrary;
+
+const render = (libraryId: string = mockLibraryId) => baseRender(<LibraryInfo />, {
+  extraWrapper: ({ children }) => <LibraryProvider libraryId={libraryId}>{ children }</LibraryProvider>,
+});
+
+let axiosMock: MockAdapter;
+let mockShowToast: (message: string) => void;
+
+mockContentLibrary.applyMock();
+
+describe('<LibraryInfo />', () => {
+  beforeEach(() => {
+    const mocks = initializeMocks();
+    axiosMock = mocks.axiosMock;
+    mockShowToast = mocks.mockShowToast;
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render Library info sidebar', async () => {
+    render();
+
+    expect(await screen.findByText(libraryData.org)).toBeInTheDocument();
+
+    expect(screen.getByText('Draft')).toBeInTheDocument();
+    expect(screen.getByText('(Never Published)')).toBeInTheDocument();
+    expect(screen.getByText('July 22, 2024')).toBeInTheDocument();
+    expect(screen.getByText('staff')).toBeInTheDocument();
+    expect(screen.getByText('July 20, 2024')).toBeInTheDocument();
+    expect(screen.getByText('June 26, 2024')).toBeInTheDocument();
+  });
+
+  it('should render Library info in draft state without user', async () => {
+    render(libraryDraftWithoutUser);
+
+    expect(await screen.findByText(libraryData.org)).toBeInTheDocument();
+
+    expect(screen.getByText('Draft')).toBeInTheDocument();
+    expect(screen.getByText('(Never Published)')).toBeInTheDocument();
+    expect(screen.getByText('July 22, 2024')).toBeInTheDocument();
+    expect(screen.queryByText('staff')).not.toBeInTheDocument();
+  });
+
+  it('should render Library creation date if last draft created date is null', async () => {
+    render(libraryNoDraftDate);
+
+    expect(await screen.findByText(libraryData.org)).toBeInTheDocument();
+
+    expect(screen.getByText('Draft')).toBeInTheDocument();
+    expect(screen.getByText('(Never Published)')).toBeInTheDocument();
+    expect(screen.getAllByText('June 26, 2024')[0]).toBeInTheDocument();
+    expect(screen.getAllByText('June 26, 2024')[1]).toBeInTheDocument();
+  });
+
+  it('should render library info in draft state without date', async () => {
+    render(libraryNoDraftNoCrateDate);
+
+    expect(await screen.findByText(libraryData.org)).toBeInTheDocument();
+
+    expect(screen.getByText('Draft')).toBeInTheDocument();
+    expect(screen.getByText('(Never Published)')).toBeInTheDocument();
+  });
+
+  it('should render library info with unpublished changes', async () => {
+    render(libraryUnpublishedChanges);
+
+    expect(await screen.findByText(libraryData.org)).toBeInTheDocument();
+
+    expect(screen.getByText('Draft')).toBeInTheDocument();
+    expect(screen.queryByText('(Never Published)')).not.toBeInTheDocument();
+    expect(screen.getByText('July 22, 2024')).toBeInTheDocument();
+    expect(screen.getByText('staff')).toBeInTheDocument();
+  });
+
+  it('should render published library info sidebar', async () => {
+    render(libraryPublished);
+
+    expect(await screen.findByText(libraryData.org)).toBeInTheDocument();
+
+    expect(screen.getByText('Published')).toBeInTheDocument();
+    expect(screen.getByText('July 26, 2024')).toBeInTheDocument();
+    expect(screen.getByText('staff')).toBeInTheDocument();
+  });
+
+  it('should render published library info without user', async () => {
+    render(libraryPublishedWithoutUser);
+
+    expect(await screen.findByText(libraryData.org)).toBeInTheDocument();
+
+    expect(screen.getByText('Published')).toBeInTheDocument();
+    expect(screen.getByText('July 26, 2024')).toBeInTheDocument();
+    expect(screen.queryByText('staff')).not.toBeInTheDocument();
+  });
+
+  it('should publish library', async () => {
+    const url = getCommitLibraryChangesUrl(libraryData.id);
+    axiosMock.onPost(url).reply(200);
+    render();
+
+    expect(await screen.findByText(libraryData.org)).toBeInTheDocument();
+
+    const publishButton = screen.getByRole('button', { name: /publish/i });
+    fireEvent.click(publishButton);
+
+    await waitFor(() => {
+      expect(axiosMock.history.post[0].url).toEqual(url);
+      expect(mockShowToast).toHaveBeenCalledWith('Library published successfully');
+    });
+  });
+
+  it('should show error on publish library', async () => {
+    const url = getCommitLibraryChangesUrl(libraryData.id);
+    axiosMock.onPost(url).reply(500);
+    render();
+
+    expect(await screen.findByText(libraryData.org)).toBeInTheDocument();
+
+    const publishButton = screen.getByRole('button', { name: /publish/i });
+    fireEvent.click(publishButton);
+
+    await waitFor(() => {
+      expect(axiosMock.history.post[0].url).toEqual(url);
+      expect(mockShowToast).toHaveBeenCalledWith('There was an error publishing the library.');
+    });
+  });
+
+  it('should discard changes', async () => {
+    const url = getCommitLibraryChangesUrl(libraryData.id);
+    axiosMock.onDelete(url).reply(200);
+    render();
+
+    expect(await screen.findByText(libraryData.org)).toBeInTheDocument();
+
+    const discardButton = screen.getByRole('button', { name: /discard changes/i });
+    fireEvent.click(discardButton);
+    const confirmBtn = screen.getByRole('button', { name: /discard/i });
+    fireEvent.click(confirmBtn);
+
+    await waitFor(() => {
+      expect(axiosMock.history.delete[0].url).toEqual(url);
+      expect(mockShowToast).toHaveBeenCalledWith('Library changes reverted successfully');
+    });
+  });
+
+  it('should show error on discard changes', async () => {
+    const url = getCommitLibraryChangesUrl(libraryData.id);
+    axiosMock.onDelete(url).reply(500);
+    render();
+
+    expect(await screen.findByText(libraryData.org)).toBeInTheDocument();
+
+    const discardButton = screen.getByRole('button', { name: /discard changes/i });
+    fireEvent.click(discardButton);
+    const confirmBtn = screen.getByRole('button', { name: /discard/i });
+    fireEvent.click(confirmBtn);
+
+    await waitFor(() => {
+      expect(axiosMock.history.delete[0].url).toEqual(url);
+      expect(mockShowToast).toHaveBeenCalledWith('There was an error reverting changes in the library.');
+    });
+  });
+
+  it('discard changes btn should be disabled for new libraries', async () => {
+    render(libraryDraftWithoutChanges);
+
+    expect(await screen.findByText(libraryData.org)).toBeInTheDocument();
+
+    const discardButton = screen.getByRole('button', { name: /discard changes/i });
+    expect(discardButton).toBeDisabled();
+  });
+
+  it('discard changes btn should be enabled for new libraries if components are added', async () => {
+    render();
+
+    expect(await screen.findByText(libraryData.org)).toBeInTheDocument();
+
+    const discardButton = screen.getByRole('button', { name: /discard changes/i });
+    expect(discardButton).not.toBeDisabled();
+  });
+
+  it('should render library info in read-only mode', async () => {
+    render(libraryIdReadOnly);
+
+    expect(await screen.findByText(libraryData.org)).toBeInTheDocument();
+
+    expect(screen.queryByRole('button', { name: /publish/i })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: /discard changes/i })).not.toBeInTheDocument();
+  });
+
+  it('publish and discard changes btns should be enabled for new libraries if components are added', async () => {
+    render(libraryUnpublishedChanges);
+
+    expect(await screen.findByText(libraryData.org)).toBeInTheDocument();
+
+    const publishButton = screen.getByRole('button', { name: /publish/i });
+    const discardButton = screen.getByRole('button', { name: /discard changes/i });
+
+    expect(publishButton).not.toBeDisabled();
+    expect(discardButton).not.toBeDisabled();
+  });
+
+  it('publish and discard changes btns should be absent for users who cannot edit the library', async () => {
+    render(libraryIdReadOnly);
+
+    expect(await screen.findByText(libraryData.org)).toBeInTheDocument();
+
+    const publishButton = screen.queryByRole('button', { name: /publish/i });
+    const discardButton = screen.queryByRole('button', { name: /discard changes/i });
+
+    expect(publishButton).not.toBeInTheDocument();
+    expect(discardButton).not.toBeInTheDocument();
+  });
+});
diff --git a/src/library-authoring/library-info/LibraryInfo.tsx b/src/library-authoring/library-info/LibraryInfo.tsx
new file mode 100644
index 0000000000..755e2ec765
--- /dev/null
+++ b/src/library-authoring/library-info/LibraryInfo.tsx
@@ -0,0 +1,66 @@
+import { Button, Stack, useToggle } from '@openedx/paragon';
+import { FormattedDate, useIntl } from '@edx/frontend-platform/i18n';
+
+import messages from './messages';
+import LibraryPublishStatus from './LibraryPublishStatus';
+import { LibraryTeamModal } from '../library-team';
+import { useLibraryContext } from '../common/context/LibraryContext';
+
+const LibraryInfo = () => {
+  const intl = useIntl();
+  const { libraryData, readOnly } = useLibraryContext();
+  const [isLibraryTeamModalOpen, openLibraryTeamModal, closeLibraryTeamModal] = useToggle();
+
+  return (
+    <Stack direction="vertical" gap={2.5}>
+      <LibraryPublishStatus />
+      <Stack gap={3} direction="vertical">
+        <span className="font-weight-bold">
+          {intl.formatMessage(messages.organizationSectionTitle)}
+        </span>
+        <span>
+          {libraryData?.org}
+        </span>
+        {!readOnly && (
+          <Button variant="outline-primary" onClick={openLibraryTeamModal}>
+            {intl.formatMessage(messages.libraryTeamButtonTitle)}
+          </Button>
+        )}
+      </Stack>
+      <Stack gap={3}>
+        <span className="font-weight-bold">
+          {intl.formatMessage(messages.libraryHistorySectionTitle)}
+        </span>
+        <Stack gap={1}>
+          <span className="small text-gray-500">
+            {intl.formatMessage(messages.lastModifiedLabel)}
+          </span>
+          <span className="small">
+            <FormattedDate
+              value={libraryData?.updated ?? undefined}
+              year="numeric"
+              month="long"
+              day="2-digit"
+            />
+          </span>
+        </Stack>
+        <Stack gap={1}>
+          <span className="small text-gray-500">
+            {intl.formatMessage(messages.createdLabel)}
+          </span>
+          <span className="small">
+            <FormattedDate
+              value={libraryData?.created ?? undefined}
+              year="numeric"
+              month="long"
+              day="2-digit"
+            />
+          </span>
+        </Stack>
+      </Stack>
+      {isLibraryTeamModalOpen && <LibraryTeamModal onClose={closeLibraryTeamModal} />}
+    </Stack>
+  );
+};
+
+export default LibraryInfo;
diff --git a/src/library-authoring/library-info/LibraryInfoHeader.test.tsx b/src/library-authoring/library-info/LibraryInfoHeader.test.tsx
new file mode 100644
index 0000000000..33630af5b6
--- /dev/null
+++ b/src/library-authoring/library-info/LibraryInfoHeader.test.tsx
@@ -0,0 +1,114 @@
+import type MockAdapter from 'axios-mock-adapter';
+
+import {
+  fireEvent,
+  render as baseRender,
+  screen,
+  waitFor,
+  initializeMocks,
+} from '../../testUtils';
+import { mockContentLibrary } from '../data/api.mocks';
+import { getContentLibraryApiUrl } from '../data/api';
+import { LibraryProvider } from '../common/context/LibraryContext';
+import LibraryInfoHeader from './LibraryInfoHeader';
+
+const { libraryId: mockLibraryId, libraryIdReadOnly, libraryData } = mockContentLibrary;
+
+const render = (libraryId: string = mockLibraryId) => baseRender(<LibraryInfoHeader />, {
+  extraWrapper: ({ children }) => <LibraryProvider libraryId={libraryId}>{ children }</LibraryProvider>,
+});
+
+let axiosMock: MockAdapter;
+let mockShowToast: (message: string) => void;
+
+mockContentLibrary.applyMock();
+
+describe('<LibraryInfoHeader />', () => {
+  beforeEach(() => {
+    const mocks = initializeMocks();
+    axiosMock = mocks.axiosMock;
+    mockShowToast = mocks.mockShowToast;
+  });
+
+  it('should render Library info Header', async () => {
+    render();
+
+    expect(await screen.findByText(libraryData.title)).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /edit library name/i })).toBeInTheDocument();
+  });
+
+  it('should not render edit title button without permission', async () => {
+    render(libraryIdReadOnly);
+
+    expect(await screen.findByText(libraryData.title)).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: /edit library name/i })).not.toBeInTheDocument();
+  });
+
+  it('should edit library title', async () => {
+    const url = getContentLibraryApiUrl(libraryData.id);
+    axiosMock.onPatch(url).reply(200);
+    render();
+
+    expect(await screen.findByText(libraryData.title)).toBeInTheDocument();
+
+    const editTitleButton = screen.getByRole('button', { name: /edit library name/i });
+    fireEvent.click(editTitleButton);
+
+    const textBox = screen.getByRole('textbox', { name: /title input/i });
+
+    fireEvent.change(textBox, { target: { value: 'New Library Title' } });
+    fireEvent.keyDown(textBox, { key: 'Enter', code: 'Enter', charCode: 13 });
+
+    expect(textBox).not.toBeInTheDocument();
+
+    await waitFor(() => {
+      expect(axiosMock.history.patch[0].url).toEqual(url);
+      expect(axiosMock.history.patch[0].data).toEqual(JSON.stringify({ title: 'New Library Title' }));
+      expect(mockShowToast).toHaveBeenCalledWith('Library updated successfully');
+    });
+  });
+
+  it('should close edit library title on press Escape', async () => {
+    const url = getContentLibraryApiUrl(libraryData.id);
+    axiosMock.onPatch(url).reply(200);
+    render();
+
+    expect(await screen.findByText(libraryData.title)).toBeInTheDocument();
+
+    const editTitleButton = screen.getByRole('button', { name: /edit library name/i });
+    fireEvent.click(editTitleButton);
+
+    const textBox = screen.getByRole('textbox', { name: /title input/i });
+    fireEvent.keyDown(textBox, { key: 'Escape', code: 'Escape', charCode: 27 });
+
+    expect(textBox).not.toBeInTheDocument();
+
+    await waitFor(() => {
+      expect(axiosMock.history.patch.length).toEqual(0);
+    });
+  });
+
+  it('should show error on edit library tittle', async () => {
+    const url = getContentLibraryApiUrl(libraryData.id);
+    axiosMock.onPatch(url).reply(500);
+    render();
+
+    expect(await screen.findByText(libraryData.title)).toBeInTheDocument();
+
+    const editTitleButton = screen.getByRole('button', { name: /edit library name/i });
+    fireEvent.click(editTitleButton);
+
+    const textBox = screen.getByRole('textbox', { name: /title input/i });
+
+    fireEvent.change(textBox, { target: { value: 'New Library Title' } });
+    fireEvent.keyDown(textBox, { key: 'Enter', code: 'Enter', charCode: 13 });
+
+    expect(textBox).not.toBeInTheDocument();
+
+    await waitFor(() => {
+      expect(axiosMock.history.patch[0].url).toEqual(url);
+      expect(axiosMock.history.patch[0].data).toEqual(JSON.stringify({ title: 'New Library Title' }));
+      expect(mockShowToast).toHaveBeenCalledWith('There was an error updating the library');
+    });
+  });
+});
diff --git a/src/library-authoring/library-info/LibraryInfoHeader.tsx b/src/library-authoring/library-info/LibraryInfoHeader.tsx
new file mode 100644
index 0000000000..cafeccf268
--- /dev/null
+++ b/src/library-authoring/library-info/LibraryInfoHeader.tsx
@@ -0,0 +1,90 @@
+import { useState, useContext } from 'react';
+import {
+  Icon,
+  IconButton,
+  Stack,
+  Form,
+} from '@openedx/paragon';
+import { Edit } from '@openedx/paragon/icons';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import { ToastContext } from '../../generic/toast-context';
+import { useLibraryContext } from '../common/context/LibraryContext';
+import { useUpdateLibraryMetadata } from '../data/apiHooks';
+import messages from './messages';
+
+const LibraryInfoHeader = () => {
+  const intl = useIntl();
+  const [inputIsActive, setIsActive] = useState(false);
+  const updateMutation = useUpdateLibraryMetadata();
+  const { showToast } = useContext(ToastContext);
+  const { libraryData: library, readOnly } = useLibraryContext();
+
+  if (!library) {
+    return null;
+  }
+
+  const handleSaveTitle = (event) => {
+    const newTitle = event.target.value;
+    if (newTitle && newTitle !== library.title) {
+      updateMutation.mutateAsync({
+        id: library.id,
+        title: newTitle,
+      }).then(() => {
+        showToast(intl.formatMessage(messages.updateLibrarySuccessMsg));
+      }).catch(() => {
+        showToast(intl.formatMessage(messages.updateLibraryErrorMsg));
+      });
+    }
+    setIsActive(false);
+  };
+
+  const handleClick = () => {
+    setIsActive(true);
+  };
+
+  const handleOnKeyDown = (event) => {
+    if (event.key === 'Enter') {
+      handleSaveTitle(event);
+    } else if (event.key === 'Escape') {
+      setIsActive(false);
+    }
+  };
+
+  return (
+    <Stack direction="horizontal">
+      { inputIsActive
+        ? (
+          <Form.Control
+            autoFocus
+            name="title"
+            id="title"
+            type="text"
+            aria-label="Title input"
+            defaultValue={library.title}
+            onBlur={handleSaveTitle}
+            onKeyDown={handleOnKeyDown}
+          />
+        )
+        : (
+          <>
+            <span className="font-weight-bold mt-1.5 ml-1.5">
+              {library.title}
+            </span>
+            {!readOnly && (
+              <IconButton
+                src={Edit}
+                iconAs={Icon}
+                alt={intl.formatMessage(messages.editNameButtonAlt)}
+                onClick={handleClick}
+                className="mt-1 ml-2"
+                size="inline"
+              />
+            )}
+          </>
+        )}
+    </Stack>
+  );
+};
+
+export default LibraryInfoHeader;
diff --git a/src/library-authoring/library-info/LibraryPublishStatus.tsx b/src/library-authoring/library-info/LibraryPublishStatus.tsx
new file mode 100644
index 0000000000..89ac4e8468
--- /dev/null
+++ b/src/library-authoring/library-info/LibraryPublishStatus.tsx
@@ -0,0 +1,69 @@
+import { useCallback, useContext } from 'react';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import { useToggle } from '@openedx/paragon';
+import { ToastContext } from '../../generic/toast-context';
+import { useLibraryContext } from '../common/context/LibraryContext';
+import { useCommitLibraryChanges, useRevertLibraryChanges } from '../data/apiHooks';
+import StatusWidget from '../generic/status-widget';
+import messages from './messages';
+import DeleteModal from '../../generic/delete-modal/DeleteModal';
+
+const LibraryPublishStatus = () => {
+  const intl = useIntl();
+  const { libraryData, readOnly } = useLibraryContext();
+  const [isConfirmModalOpen, openConfirmModal, closeConfirmModal] = useToggle(false);
+
+  const commitLibraryChanges = useCommitLibraryChanges();
+  const revertLibraryChanges = useRevertLibraryChanges();
+  const { showToast } = useContext(ToastContext);
+
+  const commit = useCallback(() => {
+    if (libraryData) {
+      commitLibraryChanges.mutateAsync(libraryData.id)
+        .then(() => {
+          showToast(intl.formatMessage(messages.publishSuccessMsg));
+        }).catch(() => {
+          showToast(intl.formatMessage(messages.publishErrorMsg));
+        });
+    }
+  }, [libraryData]);
+
+  const revert = useCallback(async () => {
+    if (libraryData) {
+      try {
+        await revertLibraryChanges.mutateAsync(libraryData.id);
+        showToast(intl.formatMessage(messages.revertSuccessMsg));
+      } catch (e) {
+        showToast(intl.formatMessage(messages.revertErrorMsg));
+      } finally {
+        closeConfirmModal();
+      }
+    }
+  }, [libraryData]);
+
+  if (!libraryData) {
+    return null;
+  }
+
+  return (
+    <>
+      <StatusWidget
+        {...libraryData}
+        onCommit={!readOnly ? commit : undefined}
+        onRevert={!readOnly ? openConfirmModal : undefined}
+      />
+      <DeleteModal
+        isOpen={isConfirmModalOpen}
+        close={closeConfirmModal}
+        variant="warning"
+        title={intl.formatMessage(messages.discardChangesTitle)}
+        description={intl.formatMessage(messages.discardChangesDescription)}
+        onDeleteSubmit={revert}
+        btnLabel={intl.formatMessage(messages.discardChangesDefaultBtnLabel)}
+      />
+    </>
+  );
+};
+
+export default LibraryPublishStatus;
diff --git a/src/library-authoring/library-info/index.ts b/src/library-authoring/library-info/index.ts
new file mode 100644
index 0000000000..5ed191c9de
--- /dev/null
+++ b/src/library-authoring/library-info/index.ts
@@ -0,0 +1,2 @@
+export { default as LibraryInfo } from './LibraryInfo';
+export { default as LibraryInfoHeader } from './LibraryInfoHeader';
diff --git a/src/library-authoring/library-info/messages.ts b/src/library-authoring/library-info/messages.ts
new file mode 100644
index 0000000000..05ec10a504
--- /dev/null
+++ b/src/library-authoring/library-info/messages.ts
@@ -0,0 +1,81 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  editNameButtonAlt: {
+    id: 'course-authoring.library-authoring.sidebar.info.edit-name.alt',
+    defaultMessage: 'Edit library name',
+    description: 'Alt text for edit library name icon button',
+  },
+  organizationSectionTitle: {
+    id: 'course-authoring.library-authoring.sidebar.info.organization.title',
+    defaultMessage: 'Organization',
+    description: 'Title for Organization section in Library info sidebar.',
+  },
+  libraryTeamButtonTitle: {
+    id: 'course-authoring.library-authoring.sidebar.info.library-team.button.title',
+    defaultMessage: 'Manage Access',
+    description: 'Title to use for the button that allows viewing/editing the Library Team user access.',
+  },
+  libraryHistorySectionTitle: {
+    id: 'course-authoring.library-authoring.sidebar.info.history.title',
+    defaultMessage: 'Library History',
+    description: 'Title for Library History section in Library info sidebar.',
+  },
+  lastModifiedLabel: {
+    id: 'course-authoring.library-authoring.sidebar.info.history.last-modified',
+    defaultMessage: 'Last Modified',
+    description: 'Last Modified label used in Library History section.',
+  },
+  createdLabel: {
+    id: 'course-authoring.library-authoring.sidebar.info.history.created',
+    defaultMessage: 'Created',
+    description: 'Created label used in Library History section.',
+  },
+  publishSuccessMsg: {
+    id: 'course-authoring.library-authoring.publish.success',
+    defaultMessage: 'Library published successfully',
+    description: 'Message when the library is published successfully.',
+  },
+  publishErrorMsg: {
+    id: 'course-authoring.library-authoring.publish.error',
+    defaultMessage: 'There was an error publishing the library.',
+    description: 'Message when there is an error when publishing the library.',
+  },
+  revertSuccessMsg: {
+    id: 'course-authoring.library-authoring.revert.success',
+    defaultMessage: 'Library changes reverted successfully',
+    description: 'Message when the library changes are reverted successfully.',
+  },
+  revertErrorMsg: {
+    id: 'course-authoring.library-authoring.publish.error',
+    defaultMessage: 'There was an error reverting changes in the library.',
+    description: 'Message when there is an error when reverting changes in the library.',
+  },
+  updateLibrarySuccessMsg: {
+    id: 'course-authoring.library-authoring.library.update.success',
+    defaultMessage: 'Library updated successfully',
+    description: 'Message when the library is updated successfully',
+  },
+  updateLibraryErrorMsg: {
+    id: 'course-authoring.library-authoring.library.update.error',
+    defaultMessage: 'There was an error updating the library',
+    description: 'Message when there is an error when updating the library',
+  },
+  discardChangesTitle: {
+    id: 'course-authoring.library-authoring.library.discardChangesTitle',
+    defaultMessage: 'Discard changes',
+    description: 'Title text for confirmation modal shown before discard library changes',
+  },
+  discardChangesDescription: {
+    id: 'course-authoring.library-authoring.library.discardChangesDescription',
+    defaultMessage: 'Are you sure you want to discard all unpublished changes in this library? This will include changes made by other users',
+    description: 'Description text for confirmation modal shown before discard library changes',
+  },
+  discardChangesDefaultBtnLabel: {
+    id: 'course-authoring.library-authoring.library.discardChangesDefaultBtnLabel',
+    defaultMessage: 'Discard',
+    description: 'Button text for confirmation modal shown before discard library changes',
+  },
+});
+
+export default messages;
diff --git a/src/library-authoring/library-sidebar/LibrarySidebar.tsx b/src/library-authoring/library-sidebar/LibrarySidebar.tsx
new file mode 100644
index 0000000000..c329a49b87
--- /dev/null
+++ b/src/library-authoring/library-sidebar/LibrarySidebar.tsx
@@ -0,0 +1,69 @@
+import React from 'react';
+import {
+  Stack,
+  Icon,
+  IconButton,
+} from '@openedx/paragon';
+import { Close } from '@openedx/paragon/icons';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import { AddContentContainer, AddContentHeader } from '../add-content';
+import { CollectionInfo, CollectionInfoHeader } from '../collections';
+import { SidebarBodyComponentId, useSidebarContext } from '../common/context/SidebarContext';
+import { ComponentInfo, ComponentInfoHeader } from '../component-info';
+import { LibraryInfo, LibraryInfoHeader } from '../library-info';
+import messages from '../messages';
+
+/**
+ * Sidebar container for library pages.
+ *
+ * It's designed to "squash" the page when open.
+ * Uses `sidebarComponentInfo.type` of the `context` to
+ * choose which component is rendered.
+ * You can add more components in `bodyComponentMap`.
+ * Use the returned actions to open and close this sidebar.
+ */
+const LibrarySidebar = () => {
+  const intl = useIntl();
+  const { sidebarComponentInfo, closeLibrarySidebar } = useSidebarContext();
+
+  const bodyComponentMap = {
+    [SidebarBodyComponentId.AddContent]: <AddContentContainer />,
+    [SidebarBodyComponentId.Info]: <LibraryInfo />,
+    [SidebarBodyComponentId.ComponentInfo]: <ComponentInfo />,
+    [SidebarBodyComponentId.CollectionInfo]: <CollectionInfo />,
+    unknown: null,
+  };
+
+  const headerComponentMap = {
+    [SidebarBodyComponentId.AddContent]: <AddContentHeader />,
+    [SidebarBodyComponentId.Info]: <LibraryInfoHeader />,
+    [SidebarBodyComponentId.ComponentInfo]: <ComponentInfoHeader />,
+    [SidebarBodyComponentId.CollectionInfo]: <CollectionInfoHeader />,
+    unknown: null,
+  };
+
+  const buildBody = () : React.ReactNode => bodyComponentMap[sidebarComponentInfo?.type || 'unknown'];
+  const buildHeader = (): React.ReactNode => headerComponentMap[sidebarComponentInfo?.type || 'unknown'];
+
+  return (
+    <Stack gap={4} className="p-3 text-primary-700">
+      <Stack direction="horizontal" className="d-flex justify-content-between">
+        {buildHeader()}
+        <IconButton
+          className="mt-1"
+          src={Close}
+          iconAs={Icon}
+          alt={intl.formatMessage(messages.closeButtonAlt)}
+          onClick={closeLibrarySidebar}
+          size="inline"
+        />
+      </Stack>
+      <div>
+        {buildBody()}
+      </div>
+    </Stack>
+  );
+};
+
+export default LibrarySidebar;
diff --git a/src/library-authoring/library-sidebar/index.ts b/src/library-authoring/library-sidebar/index.ts
new file mode 100644
index 0000000000..36d2d4a760
--- /dev/null
+++ b/src/library-authoring/library-sidebar/index.ts
@@ -0,0 +1 @@
+export { default as LibrarySidebar } from './LibrarySidebar';
diff --git a/src/library-authoring/library-team/AddLibraryTeamMember.tsx b/src/library-authoring/library-team/AddLibraryTeamMember.tsx
new file mode 100644
index 0000000000..baabcd32a8
--- /dev/null
+++ b/src/library-authoring/library-team/AddLibraryTeamMember.tsx
@@ -0,0 +1,65 @@
+import { useIntl } from '@edx/frontend-platform/i18n';
+import {
+  Button,
+  Form,
+  ActionRow,
+} from '@openedx/paragon';
+import { Formik } from 'formik';
+import * as Yup from 'yup';
+
+import messages from './messages';
+import FormikControl from '../../generic/FormikControl';
+import { EXAMPLE_USER_EMAIL } from './constants';
+
+const AddLibraryTeamMember = ({ onSubmit, onCancel }: {
+  onSubmit: ({ email } : { email: string }) => void,
+  onCancel: () => void,
+}) => {
+  const intl = useIntl();
+
+  return (
+    <div className="add-user-form" data-testid="add-user-form">
+      <Formik
+        initialValues={{ email: '' }}
+        onSubmit={onSubmit}
+        validationSchema={
+          Yup.object().shape({
+            email: Yup.string().required('Email required').email('Invalid email'),
+          })
+        }
+        validateOnBlur
+      >
+        {({ handleSubmit, values }) => (
+          <Form onSubmit={handleSubmit}>
+            <Form.Group size="sm" className="form-field">
+              <h3 className="form-title">{intl.formatMessage(messages.addMemberFormTitle)}</h3>
+              <FormikControl
+                name="email"
+                value={values.email}
+                label={<Form.Label>{intl.formatMessage(messages.addMemberFormEmailLabel)}</Form.Label>}
+                placeholder={intl.formatMessage(messages.addMemberFormEmailPlaceholder, { email: EXAMPLE_USER_EMAIL })}
+              />
+              <Form.Control.Feedback className="form-helper-text">
+                {intl.formatMessage(messages.addMemberFormEmailHelperText)}
+              </Form.Control.Feedback>
+            </Form.Group>
+            <ActionRow>
+              <Button variant="tertiary" size="sm" onClick={onCancel}>
+                {intl.formatMessage(messages.cancelButton)}
+              </Button>
+              <Button
+                size="sm"
+                type="submit"
+                disabled={!values.email.length}
+              >
+                {intl.formatMessage(messages.addMemberFormSubmitButton)}
+              </Button>
+            </ActionRow>
+          </Form>
+        )}
+      </Formik>
+    </div>
+  );
+};
+
+export default AddLibraryTeamMember;
diff --git a/src/library-authoring/library-team/LibraryTeam.test.tsx b/src/library-authoring/library-team/LibraryTeam.test.tsx
new file mode 100644
index 0000000000..8e43d0f42e
--- /dev/null
+++ b/src/library-authoring/library-team/LibraryTeam.test.tsx
@@ -0,0 +1,268 @@
+import { initializeMockApp } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import MockAdapter from 'axios-mock-adapter';
+import userEvent from '@testing-library/user-event';
+import {
+  initializeMocks,
+  render,
+  screen,
+  waitFor,
+} from '../../testUtils';
+import { mockContentLibrary, mockGetLibraryTeam } from '../data/api.mocks';
+import {
+  getContentLibraryApiUrl,
+  getLibraryTeamApiUrl,
+  getLibraryTeamMemberApiUrl,
+} from '../data/api';
+import { LibraryProvider } from '../common/context/LibraryContext';
+import { ToastProvider } from '../../generic/toast-context';
+import LibraryTeam from './LibraryTeam';
+
+mockContentLibrary.applyMock();
+mockGetLibraryTeam.applyMock();
+
+describe('<LibraryTeam />', () => {
+  beforeEach(() => {
+    initializeMocks();
+  });
+
+  const { libraryId } = mockContentLibrary;
+  const renderLibraryTeam = async () => {
+    render(
+      <ToastProvider>
+        <LibraryProvider libraryId={libraryId}>
+          <LibraryTeam />
+        </LibraryProvider>
+      </ToastProvider>,
+    );
+
+    await waitFor(() => {
+      expect(screen.queryByRole('switch', { name: /Allow public read/i })).toBeInTheDocument();
+    });
+
+    expect(screen.getByText(mockGetLibraryTeam.adminMember.username)).toBeInTheDocument();
+    expect(screen.getByText(mockGetLibraryTeam.adminMember.email)).toBeInTheDocument();
+    expect(screen.getByText('Admin')).toBeInTheDocument();
+
+    expect(screen.getByText(mockGetLibraryTeam.authorMember.username)).toBeInTheDocument();
+    expect(screen.getByText(mockGetLibraryTeam.authorMember.email)).toBeInTheDocument();
+    expect(screen.getByText('Author')).toBeInTheDocument();
+
+    expect(screen.getByText(mockGetLibraryTeam.readerMember.username)).toBeInTheDocument();
+    expect(screen.getByText(mockGetLibraryTeam.readerMember.email)).toBeInTheDocument();
+    expect(screen.getByText('Read Only')).toBeInTheDocument();
+  };
+
+  it('shows a spinner while loading the Library Team data', async () => {
+    render(
+      <LibraryProvider libraryId={mockContentLibrary.libraryIdThatNeverLoads}>
+        <LibraryTeam />
+      </LibraryProvider>,
+    );
+
+    const spinner = screen.getByRole('status');
+    expect(spinner.textContent).toEqual('Loading...');
+  });
+
+  it('shows the library team in read-only mode to non-Admin, non-Staff users', async () => {
+    // Authenticate as a non-Staff user who is not on the library team
+    initializeMockApp({
+      authenticatedUser: {
+        administrator: false,
+        roles: [],
+        ...mockGetLibraryTeam.notMember,
+      },
+    });
+    await renderLibraryTeam();
+
+    // Current user is not a global admin or a Library Team Admin, so all edit buttons should be absent
+    expect(screen.queryByText('You!')).not.toBeInTheDocument();
+    expect(screen.getByRole('switch', { name: /Allow public read/i })).toBeDisabled();
+    expect(screen.queryByRole('button', { name: 'Make Admin' })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Make Author' })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Make Reader' })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'New team member' })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Delete team member' })).not.toBeInTheDocument();
+  });
+
+  test.each([
+    {
+      label: 'Library Team Admin',
+      user: {
+        administrator: false,
+        roles: [],
+        ...mockGetLibraryTeam.adminMember,
+      },
+      expectYou: true,
+    },
+    {
+      label: 'Global Staff',
+      user: {
+        administrator: true,
+        roles: [],
+        ...mockGetLibraryTeam.notMember,
+      },
+      expectYou: false,
+    },
+  ])(
+    'allows $label users to edit library team members',
+    async ({ user: authenticatedUser, expectYou }) => {
+      initializeMockApp({ authenticatedUser });
+      await renderLibraryTeam();
+
+      const youLabel = screen.queryByText('You!');
+      if (expectYou) {
+        expect(youLabel).toBeInTheDocument();
+      } else {
+        expect(youLabel).not.toBeInTheDocument();
+      }
+
+      // Single Admin user cannot be demoted or deleted.
+      expect(screen.getByText('Promote another member to Admin to change this user\'s access rights.')).toBeInTheDocument();
+
+      // Author + Reader can be made Admin
+      expect(screen.getAllByRole('button', { name: 'Make Admin' }).length).toBe(2);
+      // Reader can be made Author
+      expect(screen.getByRole('button', { name: 'Make Author' })).toBeInTheDocument();
+      // Author can be made Reader
+      expect(screen.getByRole('button', { name: 'Make Reader' })).toBeInTheDocument();
+      // Author + Reader can be deleted
+      expect(screen.getAllByRole('button', { name: 'Delete team member' }).length).toBe(2);
+    },
+  );
+
+  it('allows library to be made "public read"', async () => {
+    const url = getContentLibraryApiUrl(libraryId);
+    const axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+    axiosMock.onPatch(url).reply(204);
+
+    await renderLibraryTeam();
+    const checkbox = screen.getByRole('switch', { name: /Allow public read/i });
+    userEvent.click(checkbox);
+
+    await waitFor(() => {
+      expect(axiosMock.history.patch.length).toEqual(1);
+      expect(axiosMock.history.patch[0].data).toBe(
+        '{"allow_public_read":true}',
+      );
+    });
+  });
+
+  it('allows new library team members to be added', async () => {
+    const url = getLibraryTeamApiUrl(libraryId);
+    const axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+    axiosMock.onPost(url).reply(204, {});
+
+    await renderLibraryTeam();
+
+    let addButton = screen.getByRole('button', { name: 'New team member' });
+    userEvent.click(addButton);
+
+    const cancelButton = screen.getByRole('button', { name: /cancel/i });
+    userEvent.click(cancelButton);
+    await waitFor(() => {
+      expect(axiosMock.history.post.length).toEqual(0);
+    });
+
+    addButton = screen.getByRole('button', { name: 'New team member' });
+    userEvent.click(addButton);
+    const emailInput = screen.getByRole('textbox', { name: 'User\'s email address' });
+    userEvent.click(emailInput);
+    userEvent.type(emailInput, 'another@user.tld');
+
+    const saveButton = screen.getByRole('button', { name: /add member/i });
+    userEvent.click(saveButton);
+
+    await waitFor(() => {
+      expect(axiosMock.history.post.length).toEqual(1);
+      expect(axiosMock.history.post[0].data).toBe(
+        `{"library_id":"${libraryId}","email":"another@user.tld","access_level":"read"}`,
+      );
+    });
+
+    expect(await screen.findByText('Team Member added')).toBeInTheDocument();
+  });
+
+  it('shows error when user do not exist', async () => {
+    const url = getLibraryTeamApiUrl(libraryId);
+    const axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+    axiosMock.onPost(url).reply(400, { email: 'Error' });
+
+    await renderLibraryTeam();
+
+    const addButton = screen.getByRole('button', { name: 'New team member' });
+    userEvent.click(addButton);
+    const emailInput = screen.getByRole('textbox', { name: 'User\'s email address' });
+    userEvent.click(emailInput);
+    userEvent.type(emailInput, 'another@user.tld');
+
+    const saveButton = screen.getByRole('button', { name: /add member/i });
+    userEvent.click(saveButton);
+
+    await waitFor(() => {
+      expect(axiosMock.history.post.length).toEqual(1);
+    });
+
+    expect(await screen.findByText(
+      'Error adding Team Member. Please verify that the email is correct and belongs to a registered user.',
+    )).toBeInTheDocument();
+  });
+
+  it('shows error', async () => {
+    const url = getLibraryTeamApiUrl(libraryId);
+    const axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+    axiosMock.onPost(url).reply(400, {});
+
+    await renderLibraryTeam();
+
+    const addButton = screen.getByRole('button', { name: 'New team member' });
+    userEvent.click(addButton);
+    const emailInput = screen.getByRole('textbox', { name: 'User\'s email address' });
+    userEvent.click(emailInput);
+    userEvent.type(emailInput, 'another@user.tld');
+
+    const saveButton = screen.getByRole('button', { name: /add member/i });
+    userEvent.click(saveButton);
+
+    await waitFor(() => {
+      expect(axiosMock.history.post.length).toEqual(1);
+    });
+
+    expect(await screen.findByText('Error adding Team Member')).toBeInTheDocument();
+  });
+
+  it('allows library team member roles to be changed', async () => {
+    const { username } = mockGetLibraryTeam.readerMember;
+    const url = getLibraryTeamMemberApiUrl(libraryId, username);
+    const axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+    axiosMock.onPut(url).reply(204, {});
+
+    await renderLibraryTeam();
+
+    const makeAuthor = screen.getByRole('button', { name: 'Make Author' });
+    userEvent.click(makeAuthor);
+
+    await waitFor(() => {
+      expect(axiosMock.history.put.length).toEqual(1);
+      expect(axiosMock.history.put[0].data).toBe(
+        `{"library_id":"${libraryId}","username":"${username}","access_level":"author"}`,
+      );
+    });
+  });
+
+  it('allows library team members to be deleted', async () => {
+    const { username } = mockGetLibraryTeam.authorMember;
+    const url = getLibraryTeamMemberApiUrl(libraryId, username);
+    const axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+    axiosMock.onDelete(url).reply(204, {});
+
+    await renderLibraryTeam();
+
+    const deleteMember = screen.getAllByRole('button', { name: 'Delete team member' })[0];
+    userEvent.click(deleteMember);
+
+    await waitFor(() => {
+      expect(axiosMock.history.delete.length).toEqual(1);
+    });
+  });
+});
diff --git a/src/library-authoring/library-team/LibraryTeam.tsx b/src/library-authoring/library-team/LibraryTeam.tsx
new file mode 100644
index 0000000000..881ce27821
--- /dev/null
+++ b/src/library-authoring/library-team/LibraryTeam.tsx
@@ -0,0 +1,220 @@
+import React, { useCallback, useContext } from 'react';
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
+import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
+import {
+  Button,
+  Container,
+  Form,
+  useToggle,
+} from '@openedx/paragon';
+import { Add as IconAdd } from '@openedx/paragon/icons';
+
+import AlertError from '../../generic/alert-error';
+import Loading from '../../generic/Loading';
+import { ToastContext } from '../../generic/toast-context';
+import { useLibraryContext } from '../common/context/LibraryContext';
+import { LibraryAccessLevel } from '../data/api';
+import {
+  useContentLibrary,
+  useLibraryTeam,
+  useAddLibraryTeamMember,
+  useDeleteLibraryTeamMember,
+  useUpdateLibraryTeamMember,
+  useUpdateLibraryMetadata,
+} from '../data/apiHooks';
+import LibraryTeamMember from './LibraryTeamMember';
+import AddLibraryTeamMember from './AddLibraryTeamMember';
+import { LibraryRole } from './constants';
+import messages from './messages';
+
+const LibraryTeam: React.FC<Record<never, never>> = () => {
+  const {
+    libraryId,
+  } = useLibraryContext();
+
+  const intl = useIntl();
+
+  const {
+    data: libraryData,
+    isLoading: isLibraryLoading,
+  } = useContentLibrary(libraryId);
+
+  const {
+    data: libraryTeamMembers,
+    isLoading: isTeamLoading,
+    isError,
+    error,
+  } = useLibraryTeam(libraryId);
+
+  const [
+    isAddLibraryTeamMemberOpen,
+    openAddLibraryTeamMember,
+    closeAddLibraryTeamMember,
+  ] = useToggle(false);
+
+  const { showToast } = useContext(ToastContext);
+
+  const addMember = useAddLibraryTeamMember(libraryId);
+  const onAddMember = useCallback(
+    (data: { email: string }) => {
+      const { email } = data;
+      addMember.mutateAsync({
+        libraryId,
+        email,
+        // New members are created as Readers
+        accessLevel: LibraryRole.Reader.toString() as LibraryAccessLevel,
+      }).then(() => {
+        showToast(intl.formatMessage(messages.addMemberSuccess));
+      }).catch((addMemberError) => {
+        const errorData = typeof addMemberError === 'object' ? addMemberError.response?.data : undefined;
+        if (errorData && 'email' in errorData) {
+          showToast(intl.formatMessage(messages.addMemberEmailError));
+        } else {
+          showToast(intl.formatMessage(messages.addMemberError));
+        }
+      });
+      closeAddLibraryTeamMember();
+    },
+    [libraryId, libraryTeamMembers],
+  );
+
+  const updateMember = useUpdateLibraryTeamMember(libraryId);
+  const onChangeRole = useCallback(
+    (username: string, role: LibraryRole) => {
+      updateMember.mutateAsync({
+        libraryId,
+        username,
+        accessLevel: role.toString() as LibraryAccessLevel,
+      }).then(() => {
+        showToast(intl.formatMessage(messages.updateMemberSuccess));
+      }).catch(() => {
+        showToast(intl.formatMessage(messages.updateMemberError));
+      });
+    },
+    [libraryId, libraryTeamMembers],
+  );
+
+  const deleteMember = useDeleteLibraryTeamMember(libraryId);
+  const onDeleteRole = useCallback(
+    (username: string) => {
+      deleteMember.mutateAsync({
+        libraryId,
+        username,
+      }).then(() => {
+        showToast(intl.formatMessage(messages.deleteMemberSuccess));
+      }).catch(() => {
+        showToast(intl.formatMessage(messages.deleteMemberError));
+      });
+    },
+    [libraryId, libraryTeamMembers],
+  );
+
+  const updateLibrary = useUpdateLibraryMetadata();
+  const onChangeAllowPublicRead = useCallback(
+    (event) => {
+      const allowPublicRead = event.target.checked;
+      if (libraryData && allowPublicRead !== libraryData.allowPublicRead) {
+        updateLibrary.mutateAsync({
+          id: libraryId,
+          allow_public_read: allowPublicRead,
+        }).then(() => {
+          showToast(intl.formatMessage(messages.updateLibrarySuccess));
+        }).catch(() => {
+          showToast(intl.formatMessage(messages.updateLibraryError));
+        });
+      }
+    },
+    [libraryData],
+  );
+
+  if (isLibraryLoading || isTeamLoading) {
+    return <Loading />;
+  }
+
+  const { email: currentUserEmail, administrator: isGlobalStaff } = getAuthenticatedUser();
+  const isLibraryAdmin = libraryTeamMembers ? (
+    libraryTeamMembers.filter(
+      ({ email, accessLevel }) => (
+        accessLevel === LibraryRole.Admin.toString() && email === currentUserEmail
+      ),
+    ).length === 1
+  ) : false;
+  const canChangeRoles = libraryData ? libraryData.canEditLibrary && (isLibraryAdmin || isGlobalStaff) : false;
+
+  // Is there only one Admin member in the Team? We'll prevent that user from being demoted/deleted.
+  const singleAdmin = libraryTeamMembers ? (
+    libraryTeamMembers.filter(
+      ({ accessLevel }) => accessLevel === LibraryRole.Admin.toString(),
+    ).length === 1
+  ) : false;
+
+  return (
+    <Container size="xl" className="library-team px-4">
+      {!isAddLibraryTeamMemberOpen && (
+        <div className="d-flex flex-column flex-md-row justify-content-between">
+          <Form.Group
+            size="sm"
+            controlId="form-allow-public-read"
+            className="form-field"
+          >
+            <Form.Switch
+              id="form-allow-public-read"
+              aria-describedby="form-allow-public-read-help"
+              aria-label={intl.formatMessage(messages.allowPublicReadLabel)}
+              checked={libraryData && libraryData.allowPublicRead}
+              onChange={onChangeAllowPublicRead}
+              disabled={!canChangeRoles}
+            >
+              <label htmlFor="form-allow-public-read">
+                <FormattedMessage {...messages.allowPublicReadLabel} />
+              </label>
+            </Form.Switch>
+            <Form.Text className="form-helper-text" id="form-allow-public-read-help">
+              <span className="small">{intl.formatMessage(messages.allowPublicReadHelperText)}</span>
+            </Form.Text>
+          </Form.Group>
+          {canChangeRoles && (
+            <div className="ml-2 mb-2">
+              <Button
+                size="sm"
+                variant="primary"
+                iconBefore={IconAdd}
+                onClick={openAddLibraryTeamMember}
+              >
+                <FormattedMessage {...messages.addTeamMemberButton} />
+              </Button>
+            </div>
+          )}
+        </div>
+      )}
+      {canChangeRoles && isAddLibraryTeamMemberOpen && (
+        <AddLibraryTeamMember
+          onSubmit={onAddMember}
+          onCancel={closeAddLibraryTeamMember}
+        />
+      )}
+      <section className="library-team-section mt-3">
+        <div className="members-container">
+          {libraryTeamMembers && libraryTeamMembers.length ? (
+            libraryTeamMembers.map(({ username, accessLevel, email }) => (
+              <LibraryTeamMember
+                key={email}
+                username={username}
+                email={email}
+                accessLevel={accessLevel}
+                isCurrentUser={email === currentUserEmail}
+                isSingleAdmin={singleAdmin && accessLevel === LibraryRole.Admin}
+                canChangeRoles={canChangeRoles}
+                onChangeRole={onChangeRole}
+                onDeleteRole={onDeleteRole}
+              />
+            ))
+          ) : <FormattedMessage {...messages.noMembersFound} />}
+        </div>
+      </section>
+      {isError && <AlertError error={error} />}
+    </Container>
+  );
+};
+
+export default LibraryTeam;
diff --git a/src/library-authoring/library-team/LibraryTeamMember.tsx b/src/library-authoring/library-team/LibraryTeamMember.tsx
new file mode 100644
index 0000000000..115d5f32b7
--- /dev/null
+++ b/src/library-authoring/library-team/LibraryTeamMember.tsx
@@ -0,0 +1,116 @@
+import React from 'react';
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
+import {
+  Badge,
+  Button,
+  Icon,
+  IconButtonWithTooltip,
+  MailtoLink,
+} from '@openedx/paragon';
+import { DeleteOutline } from '@openedx/paragon/icons';
+
+import messages from './messages';
+import {
+  LibraryRole,
+  ROLE_LABEL,
+  CHANGE_ROLE_LABEL,
+  ROLE_BADGE_VARIANT,
+  ROLE_BUTTON_VARIANT,
+} from './constants';
+
+const MemberBadge = ({
+  role,
+  isCurrentUser,
+}: {
+  role: LibraryRole,
+  isCurrentUser: boolean,
+}) => {
+  const roleMessage = ROLE_LABEL[role] ?? ROLE_LABEL[LibraryRole.Unknown];
+  const variant = ROLE_BADGE_VARIANT[role] ?? ROLE_BADGE_VARIANT[LibraryRole.Unknown];
+
+  return (
+    <Badge className="badge-current-user" variant={variant}>
+      {roleMessage && <FormattedMessage {...roleMessage} />}
+      {isCurrentUser && (
+        <span className="badge-current-user x-small text-light-500">
+          <FormattedMessage {...messages.roleYou} />
+        </span>
+      )}
+    </Badge>
+  );
+};
+
+const LibraryTeamMember = ({
+  username,
+  email,
+  accessLevel,
+  isCurrentUser,
+  isSingleAdmin,
+  canChangeRoles,
+  onChangeRole,
+  onDeleteRole,
+}: {
+  username: string,
+  email: string,
+  accessLevel: string,
+  canChangeRoles: boolean,
+  isCurrentUser: boolean,
+  isSingleAdmin: boolean,
+  onChangeRole: (username: string, role: LibraryRole) => void,
+  onDeleteRole: (username: string) => void,
+}) => {
+  const intl = useIntl();
+
+  const role: LibraryRole = Object.values(LibraryRole).find((value) => value === accessLevel) ?? LibraryRole.Unknown;
+  const availableRoles: LibraryRole[] = Object.values(LibraryRole).filter((value) => (
+    value !== accessLevel && value !== LibraryRole.Unknown
+  ));
+
+  // Don't allow the only Admin user to be demoted or deleted
+  const canChangeThisMember = canChangeRoles && !isSingleAdmin;
+
+  return (
+    // Share some styles from course-team for consistency
+    <div className="course-team-member d-flex flex-column flex-sm-row">
+      <div className="member-info w-100">
+        <MemberBadge role={role} isCurrentUser={isCurrentUser} />
+        <span className="member-info-name font-weight-bold">{username}</span>
+        <MailtoLink to={email}>{email}</MailtoLink>
+      </div>
+      {canChangeThisMember ? (
+        <div className="member-actions w-100 d-flex mt-2 justify-content-between">
+          {availableRoles && availableRoles.length && availableRoles.map((newRole) => (
+            <Button
+              size="sm"
+              key={newRole}
+              variant={ROLE_BUTTON_VARIANT[newRole]}
+              onClick={() => onChangeRole(username, newRole)}
+            >
+              {intl.formatMessage(CHANGE_ROLE_LABEL[newRole])}
+            </Button>
+          ))}
+
+          <IconButtonWithTooltip
+            src={DeleteOutline}
+            tooltipContent={intl.formatMessage(messages.deleteMember)}
+            onClick={() => onDeleteRole(username)}
+            iconAs={Icon}
+            alt={intl.formatMessage(messages.deleteMember)}
+            title={intl.formatMessage(messages.deleteMember)}
+          />
+        </div>
+      ) : (
+        // We prevent the user from removing the last remaining Admin
+        // user so that someone can still administrate this Library,
+        // so show a message explaining why.
+        canChangeRoles && (
+          <div className="member-hint text-right">
+            <FormattedMessage {...messages.cannotChangeRoleSingleAdmin} />
+          </div>
+        )
+      )}
+    </div>
+  );
+};
+
+export default LibraryTeamMember;
diff --git a/src/library-authoring/library-team/LibraryTeamModal.tsx b/src/library-authoring/library-team/LibraryTeamModal.tsx
new file mode 100644
index 0000000000..e7a9707969
--- /dev/null
+++ b/src/library-authoring/library-team/LibraryTeamModal.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+
+import { StandardModal } from '@openedx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import LibraryTeam from './LibraryTeam';
+import messages from './messages';
+
+interface LibraryTeamModalProps {
+  onClose: () => void;
+}
+
+export const LibraryTeamModal: React.FC<LibraryTeamModalProps> = ({
+  onClose,
+}) => {
+  const intl = useIntl();
+
+  // Show Library Team modal in full screen
+  return (
+    <StandardModal
+      isOpen
+      title={intl.formatMessage(messages.modalTitle)}
+      onClose={onClose}
+      size="lg"
+      isOverflowVisible={false}
+    >
+      <LibraryTeam />
+    </StandardModal>
+  );
+};
+
+export default LibraryTeamModal;
diff --git a/src/library-authoring/library-team/constants.ts b/src/library-authoring/library-team/constants.ts
new file mode 100644
index 0000000000..0a45fd54ce
--- /dev/null
+++ b/src/library-authoring/library-team/constants.ts
@@ -0,0 +1,42 @@
+import messages from './messages';
+
+// Enum values match the possible LibraryTeamMember accessLevel values
+export enum LibraryRole {
+  Admin = 'admin',
+  Author = 'author',
+  Reader = 'read',
+  Unknown = 'unknown',
+}
+
+export const ROLE_LABEL = {
+  [LibraryRole.Admin]: messages.roleAdmin,
+  [LibraryRole.Author]: messages.roleAuthor,
+  [LibraryRole.Reader]: messages.roleReader,
+  [LibraryRole.Unknown]: messages.roleUnknown,
+};
+
+export const CHANGE_ROLE_LABEL = {
+  [LibraryRole.Admin]: messages.makeMemberAdmin,
+  [LibraryRole.Author]: messages.makeMemberAuthor,
+  [LibraryRole.Reader]: messages.makeMemberReader,
+  [LibraryRole.Unknown]: { // Won't be used.
+    id: 'library-team-unknown-role',
+    defaultMessage: '',
+  },
+};
+
+export const ROLE_BADGE_VARIANT = {
+  [LibraryRole.Admin]: 'info',
+  [LibraryRole.Author]: 'dark',
+  [LibraryRole.Reader]: 'light',
+  [LibraryRole.Unknown]: 'danger',
+};
+
+export const ROLE_BUTTON_VARIANT = {
+  [LibraryRole.Admin]: 'primary',
+  [LibraryRole.Author]: 'secondary',
+  [LibraryRole.Reader]: 'tertiary',
+  [LibraryRole.Unknown]: 'danger',
+};
+
+export const EXAMPLE_USER_EMAIL = 'username@domain.com';
diff --git a/src/library-authoring/library-team/index.tsx b/src/library-authoring/library-team/index.tsx
new file mode 100644
index 0000000000..347c1cd57e
--- /dev/null
+++ b/src/library-authoring/library-team/index.tsx
@@ -0,0 +1 @@
+export { default as LibraryTeamModal } from './LibraryTeamModal';
diff --git a/src/library-authoring/library-team/messages.ts b/src/library-authoring/library-team/messages.ts
new file mode 100644
index 0000000000..d56d606153
--- /dev/null
+++ b/src/library-authoring/library-team/messages.ts
@@ -0,0 +1,164 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  modalTitle: {
+    id: 'course-authoring.library-authoring.library-team.title',
+    defaultMessage: 'Library Team',
+    description: 'Title of the Library Team modal',
+  },
+  modalClose: {
+    id: 'course-authoring.library-authoring.library-team.close',
+    defaultMessage: 'Close',
+    description: 'Title of the Library Team modal close button',
+  },
+  noMembersFound: {
+    id: 'course-authoring.library-authoring.library-team.no-members',
+    defaultMessage: 'This library\'s team has no members yet.',
+    description: 'Text to show in the Library Team modal if no team members are found for this library.',
+  },
+  addTeamMemberButton: {
+    id: 'course-authoring.library-authoring.library-team.add-member',
+    defaultMessage: 'New team member',
+    descriptior: 'Title of the Library Team modal "Add member" button',
+  },
+  allowPublicReadLabel: {
+    id: 'course-authoring.library-authoring.library-team.allow-public-read',
+    defaultMessage: 'Allow public read',
+    descriptior: 'Title of the Library Team modal "Allow public read" on/off switch',
+  },
+  allowPublicReadHelperText: {
+    id: 'course-authoring.library-authoring.library-team.allow-public-read-helper',
+    defaultMessage: 'Allows anyone with Studio access to view this library and use its content in their courses.',
+    descriptior: 'Helper text for the Library Team modal "Allow public read" on/off switch',
+  },
+  addMemberFormTitle: {
+    id: 'course-authoring.library-authoring.add-member-form.title',
+    defaultMessage: 'Add a user to your library\'s team',
+    description: 'Title of the Library Team modal "Add member" form',
+  },
+  addMemberFormEmailLabel: {
+    id: 'course-authoring.library-authoring.add-member-form.email-label',
+    defaultMessage: 'User\'s email address',
+    description: 'Label for the email field in the Library Team modal "Add member" form',
+  },
+  addMemberFormEmailPlaceholder: {
+    id: 'course-authoring.library-authoring.add-member-form.email-placeholder',
+    defaultMessage: 'example: {email}',
+    description: 'Placeholder text for the email field in the Library Team modal "Add member" form',
+  },
+  addMemberFormEmailHelperText: {
+    id: 'course-authoring.library-authoring.add-member-form.email-helper-text',
+    defaultMessage: 'Provide the email address of the user you want to add',
+    description: 'Helper text for the email field in the Library Team modal "Add member" form',
+  },
+  addMemberFormSubmitButton: {
+    id: 'course-authoring.library-authoring.library-team.save-member',
+    defaultMessage: 'Add Member',
+    description: 'Title of the Submit button on the Library Team modal "Add member" form',
+  },
+  cancelButton: {
+    id: 'course-authoring.library-authoring.library-team.cancel',
+    defaultMessage: 'Cancel',
+    description: 'Title of the Cancel button on the Library Team modal "Add member" form',
+  },
+  deleteMember: {
+    id: 'course-authoring.library-authoring.library-team.delete-member',
+    defaultMessage: 'Delete team member',
+    description: 'Title of the Library Team modal "Delete member" button',
+  },
+  cannotChangeRoleSingleAdmin: {
+    id: 'course-authoring.library-authoring.library-team.cannot-changerole-single-admin',
+    defaultMessage: 'Promote another member to Admin to change this user\'s access rights.',
+    description: (
+      'Shown to Library Admins if there\'s only one Admin in the Team,'
+      + ' explaining why this member cannot be changed yet.'
+    ),
+  },
+  makeMemberAdmin: {
+    id: 'course-authoring.library-authoring.library-team.make-member-admin',
+    defaultMessage: 'Make Admin',
+    description: 'Title of the Library Team modal button to give a member an Admin role',
+  },
+  makeMemberAuthor: {
+    id: 'course-authoring.library-authoring.library-team.make-member-author',
+    defaultMessage: 'Make Author',
+    description: 'Title of the Library Team modal button to give a member an Author role',
+  },
+  makeMemberReader: {
+    id: 'course-authoring.library-authoring.library-team.make-member-reader',
+    defaultMessage: 'Make Reader',
+    description: 'Title of the Library Team modal button to give a member an Read-Only role',
+  },
+  roleAdmin: {
+    id: 'course-authoring.library-authoring.library-team.admin-role',
+    defaultMessage: 'Admin',
+    description: 'Label to use for the "Administrator" Library role',
+  },
+  roleAuthor: {
+    id: 'course-authoring.library-authoring.library-team.author-role',
+    defaultMessage: 'Author',
+    description: 'Label to use for the "Author" Library role',
+  },
+  roleReader: {
+    id: 'course-authoring.library-authoring.library-team.read-only-role',
+    defaultMessage: 'Read Only',
+    description: 'Label to use for the "Read Only" Library role',
+  },
+  roleUnknown: {
+    id: 'course-authoring.library-authoring.library-team.unknown-role',
+    defaultMessage: 'Unknown',
+    description: 'Label to use for an unknown Library role',
+  },
+  roleYou: {
+    id: 'course-authoring.library-authoring.library-team.you-role',
+    defaultMessage: 'You!',
+    description: 'Label to use when labeling the current user\'s Library role',
+  },
+  addMemberSuccess: {
+    id: 'course-authoring.library-authoring.library-team.add-member-success',
+    defaultMessage: 'Team Member added',
+    description: 'Message shown when a Library Team member is successfully added',
+  },
+  addMemberError: {
+    id: 'course-authoring.library-authoring.library-team.add-member-error',
+    defaultMessage: 'Error adding Team Member',
+    description: 'Message shown when an error occurs while adding a Library Team member',
+  },
+  addMemberEmailError: {
+    id: 'course-authoring.library-authoring.library-team.add-member-email-error',
+    defaultMessage: 'Error adding Team Member. Please verify that the email is correct and belongs to a registered user.',
+    description: 'Message shown when an error occurs with email while adding a Library Team member.',
+  },
+  deleteMemberSuccess: {
+    id: 'course-authoring.library-authoring.library-team.delete-member-success',
+    defaultMessage: 'Team Member deleted',
+    description: 'Message shown when a Library Team member is successfully deleted',
+  },
+  deleteMemberError: {
+    id: 'course-authoring.library-authoring.library-team.delete-member-error',
+    defaultMessage: 'Error deleting Team Member',
+    description: 'Message shown when an error occurs while updating a Library Team member',
+  },
+  updateMemberSuccess: {
+    id: 'course-authoring.library-authoring.library-team.update-member-success',
+    defaultMessage: 'Team Member updated',
+    description: 'Message shown when a Library Team member is successfully updated',
+  },
+  updateMemberError: {
+    id: 'course-authoring.library-authoring.library-team.update-member-error',
+    defaultMessage: 'Error updating Team Member',
+    description: 'Message shown when an error occurs while updating a Library Team member',
+  },
+  updateLibrarySuccess: {
+    id: 'course-authoring.library-authoring.library-team.update-library-success',
+    defaultMessage: 'Library updated',
+    description: 'Message shown when a Library\'s metadata is successfully updated',
+  },
+  updateLibraryError: {
+    id: 'course-authoring.library-authoring.library-team.update-library-error',
+    defaultMessage: 'Error updating Library',
+    description: 'Message shown when an error occurs while updating a Library\'s metadata',
+  },
+});
+
+export default messages;
diff --git a/src/library-authoring/messages.ts b/src/library-authoring/messages.ts
new file mode 100644
index 0000000000..73ffe20666
--- /dev/null
+++ b/src/library-authoring/messages.ts
@@ -0,0 +1,121 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  headingSubtitle: {
+    id: 'course-authoring.library-authoring.heading-subtitle',
+    defaultMessage: 'Content library',
+    description: 'The page heading for the library page.',
+  },
+  headingInfoAlt: {
+    id: 'course-authoring.library-authoring.heading-info-alt',
+    defaultMessage: 'Info',
+    description: 'Alt text for the info icon next to the page heading.',
+  },
+  searchPlaceholder: {
+    id: 'course-authoring.library-authoring.search',
+    defaultMessage: 'Search...',
+    description: 'Placeholder for search field',
+  },
+  noSearchResults: {
+    id: 'course-authoring.library-authoring.no-search-results',
+    defaultMessage: 'No matching components found in this library.',
+    description: 'Message displayed when no search results are found',
+  },
+  noComponents: {
+    id: 'course-authoring.library-authoring.no-components',
+    defaultMessage: 'You have not added any content to this library yet.',
+    description: 'Message displayed when the library is empty',
+  },
+  addComponent: {
+    id: 'course-authoring.library-authoring.add-component',
+    defaultMessage: 'Add component',
+    description: 'Button text to add a new component',
+  },
+  homeTab: {
+    id: 'course-authoring.library-authoring.home-tab',
+    defaultMessage: 'All Content',
+    description: 'Tab label for the home tab',
+  },
+  componentsTab: {
+    id: 'course-authoring.library-authoring.components-tab',
+    defaultMessage: 'Components',
+    description: 'Tab label for the components tab',
+  },
+  collectionsTab: {
+    id: 'course-authoring.library-authoring.collections-tab',
+    defaultMessage: 'Collections',
+    description: 'Tab label for the collections tab',
+  },
+  componentsTempPlaceholder: {
+    id: 'course-authoring.library-authoring.components-temp-placeholder',
+    defaultMessage: 'There are {componentCount} components in this library',
+    description: 'Temp placeholder for the component container. This will be replaced with the actual component list.',
+  },
+  collectionsTempPlaceholder: {
+    id: 'course-authoring.library-authoring.collections-temp-placeholder',
+    defaultMessage: 'Coming soon!',
+    description: 'Temp placeholder for the collections container. This will be replaced with the actual collection list.',
+  },
+  createLibrary: {
+    id: 'course-authoring.library-authoring.create-library',
+    defaultMessage: 'Create library',
+    description: 'Header for the create library form',
+  },
+  createLibraryTempPlaceholder: {
+    id: 'course-authoring.library-authoring.create-library-temp-placeholder',
+    defaultMessage: 'This is a placeholder for the create library form. This will be replaced with the actual form.',
+    description: 'Temp placeholder for the create library container. This will be replaced with the new library form.',
+  },
+  recentlyModifiedTitle: {
+    id: 'course-authoring.library-authoring.recently-modified-title',
+    defaultMessage: 'Recently Modified',
+    description: 'Title for the recently modified components and collections container',
+  },
+  collectionsTitle: {
+    id: 'course-authoring.library-authoring.collections-title',
+    defaultMessage: 'Collections ({collectionCount})',
+    description: 'Title for the collections container',
+  },
+  componentsTitle: {
+    id: 'course-authoring.library-authoring.components-title',
+    defaultMessage: 'Components ({componentCount})',
+    description: 'Title for the components container',
+  },
+  addContentTitle: {
+    id: 'course-authoring.library-authoring.drawer.title.add-content',
+    defaultMessage: 'Add Content',
+    description: 'Title of add content in library container.',
+  },
+  newContentButton: {
+    id: 'course-authoring.library-authoring.buttons.new-content.text',
+    defaultMessage: 'New',
+    description: 'Text of button to open "Add content drawer"',
+  },
+  closeButtonAlt: {
+    id: 'course-authoring.library-authoring.buttons.close.alt',
+    defaultMessage: 'Close',
+    description: 'Alt text of close button',
+  },
+  libraryInfoButton: {
+    id: 'course-authoring.library-authoring.buttons.library-info.text',
+    defaultMessage: 'Library Info',
+    description: 'Text of button to open "Library Info sidebar"',
+  },
+  readOnlyBadge: {
+    id: 'course-authoring.library-authoring.badge.read-only',
+    defaultMessage: 'Read Only',
+    description: 'Text in badge when the user has read only access',
+  },
+  returnToLibrarySelection: {
+    id: 'course-authoring.library-authoring.pick-components.return-to-library-selection',
+    defaultMessage: 'Change Library',
+    description: 'Breadcrumbs link to return to library selection',
+  },
+  librariesV2DisabledError: {
+    id: 'authoring.alert.error.libraries.v2.disabled',
+    defaultMessage: 'This page cannot be shown: Libraries v2 are disabled.',
+    description: 'Error message shown to users when trying to load a libraries V2 page while libraries v2 are disabled.',
+  },
+});
+
+export default messages;
diff --git a/src/library-authoring/routes.ts b/src/library-authoring/routes.ts
new file mode 100644
index 0000000000..59d0811790
--- /dev/null
+++ b/src/library-authoring/routes.ts
@@ -0,0 +1,113 @@
+/**
+ * Constants and utility hook for the Library Authoring routes.
+ */
+import { useCallback } from 'react';
+import {
+  generatePath,
+  matchPath,
+  useParams,
+  useLocation,
+  useNavigate,
+  useSearchParams,
+  type PathMatch,
+} from 'react-router-dom';
+
+export const BASE_ROUTE = '/library/:libraryId';
+
+export const ROUTES = {
+  COMPONENTS: '/components/:componentId?',
+  COLLECTIONS: '/collections/:collectionId?',
+  COMPONENT: '/component/:componentId',
+  COLLECTION: '/collection/:collectionId/:componentId?',
+  HOME: '/:collectionId?',
+};
+
+export enum ContentType {
+  home = '',
+  components = 'components',
+  collections = 'collections',
+}
+
+export type NavigateToData = {
+  componentId?: string,
+  collectionId?: string,
+  contentType?: ContentType,
+};
+
+export type LibraryRoutesData = {
+  insideCollection: PathMatch<string> | null;
+  insideCollections: PathMatch<string> | null;
+  insideComponents: PathMatch<string> | null;
+
+  // Navigate using the best route from the current location for the given parameters.
+  navigateTo: (dict?: NavigateToData) => void;
+};
+
+export const useLibraryRoutes = (): LibraryRoutesData => {
+  const { pathname } = useLocation();
+  const params = useParams();
+  const [searchParams] = useSearchParams();
+  const navigate = useNavigate();
+
+  const insideCollection = matchPath(BASE_ROUTE + ROUTES.COLLECTION, pathname);
+  const insideCollections = matchPath(BASE_ROUTE + ROUTES.COLLECTIONS, pathname);
+  const insideComponents = matchPath(BASE_ROUTE + ROUTES.COMPONENTS, pathname);
+
+  const navigateTo = useCallback(({
+    componentId,
+    collectionId,
+    contentType,
+  }: NavigateToData = {}) => {
+    const routeParams = {
+      ...params,
+      componentId,
+      // Overwrite the current collectionId param only if one is specified
+      ...(collectionId && { collectionId }),
+    };
+    let route;
+
+    // contentType overrides the current route
+    if (contentType === ContentType.components) {
+      route = ROUTES.COMPONENTS;
+    } else if (contentType === ContentType.collections) {
+      route = ROUTES.COLLECTIONS;
+    } else if (contentType === ContentType.home) {
+      route = ROUTES.HOME;
+    } else if (insideCollections) {
+      route = (
+        (collectionId && collectionId === params.collectionId)
+          // Open the previously-selected collection
+          ? ROUTES.COLLECTION
+          // Otherwise just preview the collection, if specified
+          : ROUTES.COLLECTIONS
+      );
+    } else if (insideCollection) {
+      route = ROUTES.COLLECTION;
+    } else if (insideComponents) {
+      route = ROUTES.COMPONENTS;
+    } else if (componentId) {
+      route = ROUTES.COMPONENT;
+    } else {
+      route = (
+        (collectionId && collectionId === params.collectionId)
+          // Open the previously-selected collection
+          ? ROUTES.COLLECTION
+          // Otherwise just preview the collection, if specified
+          : ROUTES.HOME
+      );
+    }
+
+    const newPath = generatePath(BASE_ROUTE + route, routeParams);
+    navigate({
+      pathname: newPath,
+      search: searchParams.toString(),
+    });
+  }, [navigate, params, searchParams, pathname]);
+
+  return {
+    navigateTo,
+    insideCollection,
+    insideCollections,
+    insideComponents,
+  };
+};
diff --git a/src/pages-and-resources/PagesAndResources.jsx b/src/pages-and-resources/PagesAndResources.jsx
index acdc3d6eab..51aaa254dc 100644
--- a/src/pages-and-resources/PagesAndResources.jsx
+++ b/src/pages-and-resources/PagesAndResources.jsx
@@ -1,24 +1,29 @@
 import React, { useContext, useEffect, Suspense } from 'react';
 import PropTypes from 'prop-types';
+import { getConfig } from '@edx/frontend-platform';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { PageRoute, AppContext } from '@edx/frontend-platform/react';
+import { PageWrap, AppContext } from '@edx/frontend-platform/react';
 
-import { Switch, useRouteMatch } from 'react-router';
+import { Routes, Route } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
 
-import { Button, Hyperlink } from '@edx/paragon';
+import { Button, Hyperlink } from '@openedx/paragon';
 import messages from './messages';
 import DiscussionsSettings from './discussions';
 
 import PageGrid from './pages/PageGrid';
 import { fetchCourseApps } from './data/thunks';
-import { useModels } from '../generic/model-store';
-import { getLoadingStatus } from './data/selectors';
+import { useModels, useModel } from '../generic/model-store';
+import { getCourseAppsApiStatus, getLoadingStatus } from './data/selectors';
 import PagesAndResourcesProvider from './PagesAndResourcesProvider';
 import { RequestStatus } from '../data/constants';
+import SettingsComponent from './SettingsComponent';
+import PermissionDeniedAlert from '../generic/PermissionDeniedAlert';
+import getPageHeadTitle from '../generic/utils';
 
-function PagesAndResources({ courseId, intl }) {
-  const { path, url } = useRouteMatch();
+const PagesAndResources = ({ courseId, intl }) => {
+  const courseDetails = useModel('courseDetails', courseId);
+  document.title = getPageHeadTitle(courseDetails?.name, intl.formatMessage(messages.heading));
 
   const dispatch = useDispatch();
   useEffect(() => {
@@ -27,23 +32,48 @@ function PagesAndResources({ courseId, intl }) {
 
   const courseAppIds = useSelector(state => state.pagesAndResources.courseAppIds);
   const loadingStatus = useSelector(getLoadingStatus);
+  const courseAppsApiStatus = useSelector(getCourseAppsApiStatus);
 
   const { config } = useContext(AppContext);
-  const lmsCourseURL = `${config.LMS_BASE_URL}/courses/${courseId}`;
+  const learningCourseURL = `${config.LEARNING_BASE_URL}/course/${courseId}`;
+  const redirectUrl = `/course/${courseId}/pages-and-resources`;
 
-  // Each page here is driven by a course app
+  // The pages here are driven by course apps. The list of course app IDs comes from the LMS API.
+  // We display all enabled course apps regardless of whether or not the corresponding frontend plugin is available.
   const pages = useModels('courseApps', courseAppIds);
+
+  // We want the Xpert learning assistant and unit summaries to appear in the "Content Permissions" section instead,
+  // so we remove them from pages and add them to contentPermissionsPages.
+  const contentPermissionsPages = [];
+
+  ['xpert_unit_summary', 'learning_assistant'].forEach(separateAppId => {
+    const index = pages.findIndex(app => app.id === separateAppId);
+    if (index !== -1) {
+      const [page] = pages.splice(index, 1);
+      contentPermissionsPages.push(page);
+    }
+  });
+
   if (loadingStatus === RequestStatus.IN_PROGRESS) {
+    // eslint-disable-next-line react/jsx-no-useless-fragment
     return <></>;
   }
 
+  if (courseAppsApiStatus === RequestStatus.DENIED) {
+    return (
+      <PermissionDeniedAlert />
+    );
+  }
+
+  const hasAdditionalCoursePlugin = getConfig()?.pluginSlots?.additional_course_plugin != null;
+
   return (
     <PagesAndResourcesProvider courseId={courseId}>
       <main className="container container-mw-md px-3">
         <div className="d-flex justify-content-between my-4 my-md-5 align-items-center">
           <h3 className="m-0">{intl.formatMessage(messages.heading)}</h3>
           <Hyperlink
-            destination={lmsCourseURL}
+            destination={learningCourseURL}
             target="_blank"
             rel="noopener noreferrer"
             showLaunchIcon={false}
@@ -52,44 +82,29 @@ function PagesAndResources({ courseId, intl }) {
           </Hyperlink>
         </div>
 
-        <PageGrid pages={pages} />
-        <Switch>
-          <PageRoute
-            path={[
-              `${path}/discussion/configure/:appId`,
-              `${path}/discussion`,
-            ]}
-          >
-            <DiscussionsSettings courseId={courseId} />
-          </PageRoute>
-          <PageRoute path={`${path}/:appId/settings`}>
-            {
-              ({ match, history }) => {
-                const SettingsComponent = React.lazy(async () => {
-                  try {
-                    // There seems to be a bug in babel-eslint that causes the checker to crash with the following error
-                    // if we use a template string here:
-                    //     TypeError: Cannot read property 'range' of null with using template strings here.
-                    // Ref: https://github.com/babel/babel-eslint/issues/530
-                    return await import('./' + match.params.appId + '/Settings.jsx'); // eslint-disable-line
-                  } catch (error) {
-                    console.trace(error); // eslint-disable-line no-console
-                    return null;
-                  }
-                });
-                return (
-                  <Suspense fallback="...">
-                    <SettingsComponent onClose={() => history.push(url)} />
-                  </Suspense>
-                );
-              }
-            }
-          </PageRoute>
-        </Switch>
+        <Routes>
+          <Route path="discussion/configure/:appId" element={<PageWrap><DiscussionsSettings courseId={courseId} /></PageWrap>} />
+          <Route path="discussion" element={<PageWrap><DiscussionsSettings courseId={courseId} /></PageWrap>} />
+          <Route path="discussion/settings" element={<PageWrap><DiscussionsSettings courseId={courseId} /></PageWrap>} />
+          <Route path=":appId/settings" element={<PageWrap><Suspense fallback="..."><SettingsComponent url={redirectUrl} /></Suspense></PageWrap>} />
+        </Routes>
+
+        <PageGrid pages={pages} pluginSlotId="additional_course_plugin" courseId={courseId} />
+        {
+          (contentPermissionsPages.length > 0 || hasAdditionalCoursePlugin)
+            && (
+              <>
+                <div className="d-flex justify-content-between my-4 my-md-5 align-items-center">
+                  <h3 className="m-0">{intl.formatMessage(messages.contentPermissions)}</h3>
+                </div>
+                <PageGrid pages={contentPermissionsPages} pluginSlotId="additional_course_content_plugin" />
+              </>
+            )
+        }
       </main>
     </PagesAndResourcesProvider>
   );
-}
+};
 
 PagesAndResources.propTypes = {
   courseId: PropTypes.string.isRequired,
diff --git a/src/pages-and-resources/PagesAndResources.test.jsx b/src/pages-and-resources/PagesAndResources.test.jsx
index e68d14ebee..180c3f8674 100644
--- a/src/pages-and-resources/PagesAndResources.test.jsx
+++ b/src/pages-and-resources/PagesAndResources.test.jsx
@@ -1,5 +1,93 @@
+import { screen, waitFor } from '@testing-library/react';
+
+import { PagesAndResources } from '.';
+import { render } from './utils.test';
+
+const courseId = 'course-v1:edX+TestX+Test_Course';
+
 describe('PagesAndResources', () => {
-  it('will pass because it is an example', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('doesn\'t show content permissions section if relevant apps are not enabled', () => {
+    const initialState = {
+      models: {
+        courseApps: {},
+      },
+      pagesAndResources: {
+        courseAppIds: [],
+      },
+    };
+
+    render(
+      <PagesAndResources courseId={courseId} />,
+      { preloadedState: initialState },
+    );
+
+    expect(screen.queryByRole('heading', { name: 'Content permissions' })).not.toBeInTheDocument();
+  });
+  it('show content permissions section if Learning Assistant app is enabled', async () => {
+    const initialState = {
+      models: {
+        courseApps: {
+          learning_assistant: {
+            id: 'learning_assistant',
+            enabled: true,
+            name: 'Learning Assistant',
+            description: 'Learning Assistant description',
+            allowedOperations: {
+              configure: false,
+              enable: true,
+            },
+            documentationLinks: {},
+          },
+        },
+      },
+      pagesAndResources: {
+        courseAppIds: ['learning_assistant'],
+      },
+    };
+
+    render(
+      <PagesAndResources courseId={courseId} />,
+      { preloadedState: initialState },
+    );
+
+    await waitFor(() => expect(screen.getByRole('heading', { name: 'Content permissions' })).toBeInTheDocument());
+    await waitFor(() => expect(screen.getByText('Learning Assistant')).toBeInTheDocument());
+  });
+
+  it('show content permissions section if Xpert learning summaries app is enabled', async () => {
+    const initialState = {
+      models: {
+        courseApps: {
+          xpert_unit_summary: {
+            id: 'xpert_unit_summary',
+            enabled: false,
+            name: 'Xpert unit summaries',
+            description: 'Use generative AI to summarize course content and reinforce learning.',
+            allowedOperations: {
+              enable: true,
+              configure: true,
+            },
+            documentationLinks: {
+              learnMoreConfiguration: 'https://openai.com/',
+            },
+          },
+        },
+      },
+      pagesAndResources: {
+        courseAppIds: ['xpert_unit_summary'],
+      },
+    };
+
+    render(
+      <PagesAndResources courseId={courseId} />,
+      { preloadedState: initialState },
+    );
 
+    await waitFor(() => expect(screen.getByRole('heading', { name: 'Content permissions' })).toBeInTheDocument());
+    await waitFor(() => expect(screen.getByText('Xpert unit summaries')).toBeInTheDocument());
   });
 });
diff --git a/src/pages-and-resources/PagesAndResourcesProvider.jsx b/src/pages-and-resources/PagesAndResourcesProvider.jsx
index b969832911..9a066f8d00 100644
--- a/src/pages-and-resources/PagesAndResourcesProvider.jsx
+++ b/src/pages-and-resources/PagesAndResourcesProvider.jsx
@@ -1,22 +1,25 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 
 export const PagesAndResourcesContext = React.createContext({});
 
-export default function PagesAndResourcesProvider({ courseId, children }) {
+const PagesAndResourcesProvider = ({ courseId, children }) => {
+  const contextValue = useMemo(() => ({
+    courseId,
+    path: `/course/${courseId}/pages-and-resources`,
+  }), []);
   return (
     <PagesAndResourcesContext.Provider
-      value={{
-        courseId,
-        path: `/course/${courseId}/pages-and-resources`,
-      }}
+      value={contextValue}
     >
       {children}
     </PagesAndResourcesContext.Provider>
   );
-}
+};
 
 PagesAndResourcesProvider.propTypes = {
   courseId: PropTypes.string.isRequired,
   children: PropTypes.node.isRequired,
 };
+
+export default PagesAndResourcesProvider;
diff --git a/src/pages-and-resources/SettingsComponent.jsx b/src/pages-and-resources/SettingsComponent.jsx
new file mode 100644
index 0000000000..bf6d295300
--- /dev/null
+++ b/src/pages-and-resources/SettingsComponent.jsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useParams, useNavigate } from 'react-router-dom';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import ErrorAlert from '../editors/sharedComponents/ErrorAlerts/ErrorAlert';
+import messages from './messages';
+
+const PluginLoadFailedError = () => {
+  const intl = useIntl();
+  return <ErrorAlert isError>{intl.formatMessage(messages.errorShowingConfiguration)}</ErrorAlert>;
+};
+
+const SettingsComponent = ({ url }) => {
+  const { appId } = useParams();
+  const navigate = useNavigate();
+
+  const LazyLoadedComponent = React.useMemo(
+    () => React.lazy(() =>
+      import(`@openedx-plugins/course-app-${appId}/Settings.jsx`).catch((err) => { // eslint-disable-line
+        // If we couldn't load this plugin, log the details to the console.
+        console.trace(err); // eslint-disable-line no-console
+        return { default: PluginLoadFailedError };
+      })),
+    [appId],
+  );
+
+  return <LazyLoadedComponent onClose={() => navigate(url)} />;
+};
+
+SettingsComponent.propTypes = {
+  url: PropTypes.string.isRequired,
+};
+
+export default SettingsComponent;
diff --git a/src/pages-and-resources/SettingsComponent.test.jsx b/src/pages-and-resources/SettingsComponent.test.jsx
new file mode 100644
index 0000000000..21b3aa4244
--- /dev/null
+++ b/src/pages-and-resources/SettingsComponent.test.jsx
@@ -0,0 +1,83 @@
+import React, { Suspense } from 'react';
+import { useParams } from 'react-router-dom';
+import { render, screen, waitFor } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { AppProvider } from '@edx/frontend-platform/react';
+import { initializeMockApp } from '@edx/frontend-platform/testing';
+
+import PagesAndResourcesProvider from 'CourseAuthoring/pages-and-resources/PagesAndResourcesProvider';
+import initializeStore from 'CourseAuthoring/store';
+import { RequestStatus } from 'CourseAuthoring/data/constants';
+import SettingsComponent from './SettingsComponent';
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useParams: jest.fn(),
+}));
+
+jest.mock('CourseAuthoring/utils', () => ({
+  useAppSetting: () => [false, () => undefined],
+  useIsMobile: () => false,
+}));
+
+let store;
+
+// eslint-disable-next-line react/prop-types
+const RequiredProviders = ({ children }) => (
+  <IntlProvider locale="en" messages={{}}>
+    <AppProvider store={store}>
+      <PagesAndResourcesProvider courseId="course-v1:foo+bar+baz">
+        {children}
+      </PagesAndResourcesProvider>
+    </AppProvider>
+  </IntlProvider>
+);
+
+describe('SettingsComponent', () => {
+  beforeEach(async () => {
+    initializeMockApp();
+    store = initializeStore({
+      models: {
+        courseApps: {
+          wiki: {},
+        },
+      },
+      pagesAndResources: {
+        loadingStatus: RequestStatus.SUCCESSFUL,
+      },
+    });
+  });
+
+  test('renders LazyLoadedComponent when provided with props', async () => {
+    useParams.mockImplementation(() => ({ appId: 'wiki' }));
+
+    const rendered = render(
+      <Suspense fallback="...">
+        <SettingsComponent url="/some-url" />
+      </Suspense>,
+      { wrapper: RequiredProviders },
+    );
+
+    await waitFor(() => expect(rendered.getByText('Configure wiki')).toBeInTheDocument());
+
+    const modalComponent = screen.getByRole('dialog');
+    expect(modalComponent.querySelector('#enable-wiki-toggleHelpText')).toContainHTML('The course wiki can be set up');
+  });
+
+  test('renders error message when plugin is unavilable when provided with props', async () => {
+    // Silence noisy error about the plugin failing to load, when we do that deliberately.
+    jest.spyOn(console, 'trace').mockImplementation(() => {});
+    // Specify an invalid course app, with no matching plugin:
+    useParams.mockImplementation(() => ({ appId: 'invalid-plugin' }));
+
+    const rendered = render(
+      <Suspense fallback="...">
+        <SettingsComponent url="/some-url" />
+      </Suspense>,
+      { wrapper: RequiredProviders },
+    );
+
+    const errorMessage = 'An error occurred when loading the configuration UI';
+    await waitFor(() => expect(rendered.container).toHaveTextContent(errorMessage));
+  });
+});
diff --git a/src/pages-and-resources/app-settings-modal/AppSettingsModal.jsx b/src/pages-and-resources/app-settings-modal/AppSettingsModal.jsx
index 3d996e96fe..429a9677fa 100644
--- a/src/pages-and-resources/app-settings-modal/AppSettingsModal.jsx
+++ b/src/pages-and-resources/app-settings-modal/AppSettingsModal.jsx
@@ -1,56 +1,43 @@
-import React, { useContext, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import {
-  Form, Hyperlink, ModalDialog, Spinner, TransitionReplace,
-  StatefulButton, Badge, ActionRow,
-} from '@edx/paragon';
-import classNames from 'classnames';
+  Alert,
+  Badge,
+  Form,
+  Hyperlink,
+  StatefulButton,
+  TransitionReplace,
+} from '@openedx/paragon';
+import { Info } from '@openedx/paragon/icons';
+
 import { Formik } from 'formik';
+import PropTypes from 'prop-types';
+import React, {
+  useContext, useEffect, useRef, useState,
+} from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import * as Yup from 'yup';
+
 import { RequestStatus } from '../../data/constants';
+import ConnectionErrorAlert from '../../generic/ConnectionErrorAlert';
 import FormSwitchGroup from '../../generic/FormSwitchGroup';
+import Loading from '../../generic/Loading';
 import { useModel } from '../../generic/model-store';
+import PermissionDeniedAlert from '../../generic/PermissionDeniedAlert';
+import { useIsMobile } from '../../utils';
 import { getLoadingStatus, getSavingStatus } from '../data/selectors';
-import { updateAppStatus } from '../data/thunks';
 import { updateSavingStatus } from '../data/slice';
+import { updateAppStatus } from '../data/thunks';
 import AppConfigFormDivider from '../discussions/app-config-form/apps/shared/AppConfigFormDivider';
 import { PagesAndResourcesContext } from '../PagesAndResourcesProvider';
+import AppSettingsModalBase from './AppSettingsModalBase';
 import messages from './messages';
-import { useIsMobile } from '../../utils';
-
-function AppSettingsForm({ formikProps, children }) {
-  return children && (
-    <TransitionReplace>
-      {formikProps.values.enabled
-        ? (
-          <React.Fragment key="app-enabled">
-            {children(formikProps)}
-          </React.Fragment>
-        ) : (
-          <React.Fragment key="app-disabled" />
-        )}
-    </TransitionReplace>
-  );
-}
-
-AppSettingsForm.propTypes = {
-  formikProps: PropTypes.shape({
-    values: PropTypes.shape({ enabled: PropTypes.bool.isRequired }),
-  }).isRequired,
-  children: PropTypes.func,
-};
-
-AppSettingsForm.defaultProps = {
-  children: null,
-};
 
-function AppSettingsModal({
-  intl,
+const AppSettingsModal = ({
   appId,
   title,
   children,
+  bodyChildren,
+  configureBeforeEnable,
   initialValues,
   validationSchema,
   onClose,
@@ -58,10 +45,17 @@ function AppSettingsModal({
   enableAppLabel,
   enableAppHelp,
   learnMoreText,
-}) {
+  enableReinitialize,
+  hideAppToggle,
+}) => {
+  const { formatMessage } = useIntl();
   const { courseId } = useContext(PagesAndResourcesContext);
   const loadingStatus = useSelector(getLoadingStatus);
   const updateSettingsRequestStatus = useSelector(getSavingStatus);
+  const alertRef = useRef(null);
+  const [saveError, setSaveError] = useState(false);
+  // FIXME: open the "Live" settings, then refresh the page. The courseApps model is not loaded, and an error occurs
+  // when trying to access 'appInfo.documentationLinks'. This happens even before the refactor to use plugins.
   const appInfo = useModel('courseApps', appId);
   const dispatch = useDispatch();
   const submitButtonState = updateSettingsRequestStatus === RequestStatus.IN_PROGRESS ? 'pending' : 'default';
@@ -75,11 +69,25 @@ function AppSettingsModal({
     }
   }, [updateSettingsRequestStatus]);
 
-  const handleFormSubmit = (values) => {
-    dispatch(updateAppStatus(courseId, appInfo.id, values.enabled));
+  const handleFormSubmit = async (values) => {
+    let success = true;
+    if (appInfo.enabled !== values.enabled) {
+      success = await dispatch(updateAppStatus(courseId, appInfo.id, values.enabled));
+    }
     // Call the submit handler for the settings component to save its settings
     if (onSettingsSave) {
-      onSettingsSave();
+      success = success && await onSettingsSave(values);
+    }
+    await setSaveError(!success);
+    !success && alertRef?.current.scrollIntoView(); // eslint-disable-line @typescript-eslint/no-unused-expressions
+  };
+
+  const handleFormikSubmit = ({ handleSubmit, errors }) => async (event) => {
+    // If submitting the form with errors, show the alert and scroll to it.
+    await handleSubmit(event);
+    if (Object.keys(errors).length > 0) {
+      await setSaveError(true);
+      alertRef?.current.scrollIntoView?.(); // eslint-disable-line no-unused-expressions
     }
   };
 
@@ -94,128 +102,142 @@ function AppSettingsModal({
     </Hyperlink>
   );
 
-  return (
-    <>
-      {
-        loadingStatus === RequestStatus.SUCCESSFUL && (
-          <Formik
-            initialValues={{
-              enabled: !!appInfo?.enabled,
-              ...initialValues,
-            }}
-            validationSchema={
-              Yup.object()
-                .shape({
-                  enabled: Yup.boolean(),
-                  ...validationSchema,
-                })
-            }
-            onSubmit={handleFormSubmit}
-          >
-            {(formikProps) => (
-              <Form
-                onSubmit={formikProps.handleSubmit}
-              >
-                <ModalDialog
-                  title={title}
-                  isOpen
-                  onClose={onClose}
-                  size="md"
-                  variant={modalVariant}
-                  hasCloseButton={isMobile}
-                  isFullscreenOnMobile
-                >
-                  <ModalDialog.Header>
-                    <ModalDialog.Title>
-                      {title}
-                    </ModalDialog.Title>
-                  </ModalDialog.Header>
-                  <ModalDialog.Body>
-                    <FormSwitchGroup
-                      id={`enable-${appId}-toggle`}
-                      name="enabled"
-                      onChange={(event) => formikProps.handleChange(event)}
-                      onBlur={formikProps.handleBlur}
-                      checked={formikProps.values.enabled}
-                      label={(
-                        <div className="d-flex align-items-center">
-                          {enableAppLabel}
-                          {
-                          formikProps.values.enabled && (
-                            <Badge className="ml-2" variant="success">
-                              {intl.formatMessage(messages.enabled)}
-                            </Badge>
-                          )
-                        }
-                        </div>
-                    )}
-                      helpText={(
-                        <div>
-                          <p>{enableAppHelp}</p>
-                          <span className="py-3">{learnMoreLink}</span>
-                        </div>
+  if (loadingStatus === RequestStatus.SUCCESSFUL) {
+    return (
+      <Formik
+        initialValues={{
+          enabled: !!appInfo?.enabled,
+          ...initialValues,
+        }}
+        validationSchema={
+          Yup.object()
+            .shape({
+              enabled: Yup.boolean(),
+              ...validationSchema,
+            })
+        }
+        onSubmit={handleFormSubmit}
+        enableReinitialize={enableReinitialize}
+      >
+        {(formikProps) => (
+          <Form onSubmit={handleFormikSubmit(formikProps)}>
+            <AppSettingsModalBase
+              title={title}
+              isOpen
+              onClose={onClose}
+              variant={modalVariant}
+              isMobile={isMobile}
+              footer={(
+                <StatefulButton
+                  labels={{
+                    default: formatMessage(messages.save),
+                    pending: formatMessage(messages.saving),
+                    complete: formatMessage(messages.saved),
+                  }}
+                  state={submitButtonState}
+                  onClick={handleFormikSubmit(formikProps)}
+                />
+              )}
+            >
+              {saveError && (
+                <Alert variant="danger" icon={Info} ref={alertRef}>
+                  <Alert.Heading>
+                    {formikProps.errors.enabled?.title || formatMessage(messages.errorSavingTitle)}
+                  </Alert.Heading>
+                  {formikProps.errors.enabled?.message || formatMessage(messages.errorSavingMessage)}
+                </Alert>
+              )}
+              {!hideAppToggle && (
+                <FormSwitchGroup
+                  id={`enable-${appId}-toggle`}
+                  name="enabled"
+                  onChange={(event) => formikProps.handleChange(event)}
+                  onBlur={formikProps.handleBlur}
+                  checked={formikProps.values.enabled}
+                  label={(
+                    <div className="d-flex align-items-center">
+                      {enableAppLabel}
+                      {formikProps.values.enabled && (
+                        <Badge className="ml-2" variant="success" data-testid="enable-badge">
+                          {formatMessage(messages.enabled)}
+                        </Badge>
+                      )}
+                    </div>
+                  )}
+                  helpText={(
+                    <div>
+                      <p>{enableAppHelp}</p>
+                      <span className="py-3">{learnMoreLink}</span>
+                    </div>
+                  )}
+                />
+              )}
+              {bodyChildren}
+              {(formikProps.values.enabled || configureBeforeEnable) && children
+                && <AppConfigFormDivider marginAdj={{ default: 0, sm: 0 }} />}
+              {
+                children && (
+                  <TransitionReplace>
+                    {formikProps.values.enabled || configureBeforeEnable ? (
+                      <React.Fragment key="app-enabled">
+                        {children(formikProps)}
+                      </React.Fragment>
+                    ) : (
+                      <React.Fragment key="app-disabled" />
                     )}
-                    />
-                    <AppSettingsForm formikProps={formikProps}>
-                      {children}
-                    </AppSettingsForm>
-                  </ModalDialog.Body>
-
-                  {formikProps.values.enabled && children
-                  && <AppConfigFormDivider marginAdj={{ default: 3, sm: null }} />}
-
-                  <ModalDialog.Footer
-                    className={classNames(
-                      'p-4',
-                    )}
-                  >
-                    <ActionRow>
-                      <ModalDialog.CloseButton variant="tertiary">
-                        {intl.formatMessage(messages.cancel)}
-                      </ModalDialog.CloseButton>
-                      <StatefulButton
-                        labels={{
-                          default: intl.formatMessage(messages.save),
-                          pending: intl.formatMessage(messages.saving),
-                          complete: intl.formatMessage(messages.saved),
-                        }}
-                        state={submitButtonState}
-                        onClick={formikProps.handleSubmit}
-                      />
-                    </ActionRow>
-                  </ModalDialog.Footer>
-                </ModalDialog>
-              </Form>
-            )}
-          </Formik>
-        )
-      }
-      {loadingStatus === RequestStatus.IN_PROGRESS && (
-        <Spinner animation="border" variant="primary" className="align-self-center" />
-      )}
-    </>
+                  </TransitionReplace>
+                )
+              }
+            </AppSettingsModalBase>
+          </Form>
+        )}
+      </Formik>
+    );
+  }
+  return (
+    <AppSettingsModalBase
+      title={title}
+      isOpen
+      onClose={onClose}
+      size="sm"
+      variant={modalVariant}
+      isMobile={isMobile}
+      isFullscreenOnMobile
+    >
+      {loadingStatus === RequestStatus.IN_PROGRESS && <Loading />}
+      {loadingStatus === RequestStatus.FAILED && <ConnectionErrorAlert />}
+      {loadingStatus === RequestStatus.DENIED && <PermissionDeniedAlert />}
+    </AppSettingsModalBase>
   );
-}
+};
 
 AppSettingsModal.propTypes = {
-  intl: intlShape.isRequired,
   title: PropTypes.string.isRequired,
   appId: PropTypes.string.isRequired,
   children: PropTypes.func,
+  bodyChildren: PropTypes.node,
   onSettingsSave: PropTypes.func,
-  initialValues: PropTypes.objectOf(PropTypes.any),
-  validationSchema: PropTypes.objectOf(PropTypes.func),
+  initialValues: PropTypes.shape({}),
+  validationSchema: PropTypes.shape({}),
   onClose: PropTypes.func.isRequired,
   enableAppLabel: PropTypes.string.isRequired,
   enableAppHelp: PropTypes.string.isRequired,
-  learnMoreText: PropTypes.string.isRequired,
+  learnMoreText: PropTypes.string,
+  configureBeforeEnable: PropTypes.bool,
+  enableReinitialize: PropTypes.bool,
+  hideAppToggle: PropTypes.bool,
 };
 
 AppSettingsModal.defaultProps = {
   children: null,
+  bodyChildren: null,
   onSettingsSave: null,
   initialValues: {},
   validationSchema: {},
+  learnMoreText: null,
+  configureBeforeEnable: false,
+  enableReinitialize: false,
+  hideAppToggle: false,
 };
 
-export default injectIntl(AppSettingsModal);
+export default AppSettingsModal;
diff --git a/src/pages-and-resources/app-settings-modal/AppSettingsModalBase.jsx b/src/pages-and-resources/app-settings-modal/AppSettingsModalBase.jsx
new file mode 100644
index 0000000000..19224a2d0a
--- /dev/null
+++ b/src/pages-and-resources/app-settings-modal/AppSettingsModalBase.jsx
@@ -0,0 +1,68 @@
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { ActionRow, ModalDialog } from '@openedx/paragon';
+
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import messages from './messages';
+
+const AppSettingsModalBase = ({
+  title,
+  onClose,
+  variant,
+  isMobile,
+  children,
+  footer,
+  disclaimer,
+  isOpen,
+}) => {
+  const { formatMessage } = useIntl();
+  return (
+    <ModalDialog
+      title={title}
+      isOpen={isOpen}
+      onClose={onClose}
+      size="lg"
+      variant={variant}
+      hasCloseButton={isMobile}
+      isFullscreenOnMobile
+      isOverflowVisible={false}
+    >
+      <ModalDialog.Header>
+        <ModalDialog.Title data-testid="modal-title">{title}</ModalDialog.Title>
+      </ModalDialog.Header>
+      <ModalDialog.Body>{children}</ModalDialog.Body>
+      <ModalDialog.Footer className="p-4">
+        {disclaimer}
+        <ActionRow>
+          <ModalDialog.CloseButton variant="tertiary">
+            {formatMessage(messages.cancel)}
+          </ModalDialog.CloseButton>
+          {footer}
+        </ActionRow>
+      </ModalDialog.Footer>
+    </ModalDialog>
+  );
+};
+
+AppSettingsModalBase.defaultProps = {
+  isOpen: true,
+};
+
+AppSettingsModalBase.propTypes = {
+  title: PropTypes.string.isRequired,
+  onClose: PropTypes.func.isRequired,
+  variant: PropTypes.oneOf(['default', 'dark']).isRequired,
+  isMobile: PropTypes.bool.isRequired,
+  children: PropTypes.node.isRequired,
+  footer: PropTypes.node,
+  disclaimer: PropTypes.node,
+  isOpen: PropTypes.bool,
+};
+
+AppSettingsModalBase.defaultProps = {
+  footer: null,
+  disclaimer: null,
+};
+
+export default AppSettingsModalBase;
diff --git a/src/pages-and-resources/app-settings-modal/messages.js b/src/pages-and-resources/app-settings-modal/messages.js
index 65d4d175d7..b5586e993d 100644
--- a/src/pages-and-resources/app-settings-modal/messages.js
+++ b/src/pages-and-resources/app-settings-modal/messages.js
@@ -29,6 +29,14 @@ const messages = defineMessages({
     id: 'course-authoring.pages-resources.app-settings-modal.badge.disabled',
     defaultMessage: 'Disabled',
   },
+  errorSavingTitle: {
+    id: 'course-authoring.pages-resources.app-settings-modal.save-error.title',
+    defaultMessage: 'We couldn\'t apply your changes.',
+  },
+  errorSavingMessage: {
+    id: 'course-authoring.pages-resources.app-settings-modal.save-error.message',
+    defaultMessage: 'Please check your entries and try again.',
+  },
 });
 
 export default messages;
diff --git a/src/pages-and-resources/data/api.js b/src/pages-and-resources/data/api.js
index 5d67a064d0..92ddc751b2 100644
--- a/src/pages-and-resources/data/api.js
+++ b/src/pages-and-resources/data/api.js
@@ -1,4 +1,5 @@
-/* eslint-disable import/prefer-default-export */
+import { snakeCase } from 'lodash/string';
+
 import { camelCaseObject, ensureConfig, getConfig } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 
@@ -6,9 +7,9 @@ ensureConfig([
   'STUDIO_BASE_URL',
 ], 'Course Apps API service');
 
-const apiBaseUrl = getConfig().STUDIO_BASE_URL;
-
-const courseAppsApiUrl = `${apiBaseUrl}/api/course_apps/v1/apps`;
+const getApiBaseUrl = () => getConfig().STUDIO_BASE_URL;
+export const getCourseAppsApiUrl = () => `${getApiBaseUrl()}/api/course_apps/v1/apps`;
+export const getCourseAdvancedSettingsApiUrl = () => `${getApiBaseUrl()}/api/contentstore/v0/advanced_settings`;
 
 /**
  * Fetches the course apps installed for provided course
@@ -17,7 +18,7 @@ const courseAppsApiUrl = `${apiBaseUrl}/api/course_apps/v1/apps`;
  */
 export async function getCourseApps(courseId) {
   const { data } = await getAuthenticatedHttpClient()
-    .get(`${courseAppsApiUrl}/${courseId}`);
+    .get(`${getCourseAppsApiUrl()}/${courseId}`);
   return camelCaseObject(data);
 }
 
@@ -30,10 +31,35 @@ export async function getCourseApps(courseId) {
 export async function updateCourseApp(courseId, appId, state) {
   await getAuthenticatedHttpClient()
     .patch(
-      `${courseAppsApiUrl}/${courseId}`,
+      `${getCourseAppsApiUrl()}/${courseId}`,
       {
         id: appId,
         enabled: state,
       },
     );
 }
+
+/**
+ * Get's advanced setting for a course.
+ * @param {string} courseId
+ * @param {[string]} settings
+ * @returns {Promise<Object>}
+ */
+export async function getCourseAdvancedSettings(courseId, settings) {
+  const { data } = await getAuthenticatedHttpClient()
+    .get(`${getCourseAdvancedSettingsApiUrl()}/${courseId}`, { filter_fields: settings.map(snakeCase).join(',') });
+  return camelCaseObject(data);
+}
+
+/**
+ * Get's advanced setting for a course.
+ * @param {string} courseId
+ * @param {string} setting
+ * @param {*} value
+ * @returns {Promise<Object>}
+ */
+export async function updateCourseAdvancedSettings(courseId, setting, value) {
+  const { data } = await getAuthenticatedHttpClient()
+    .patch(`${getCourseAdvancedSettingsApiUrl()}/${courseId}`, { [snakeCase(setting)]: { value } });
+  return camelCaseObject(data);
+}
diff --git a/src/pages-and-resources/data/selectors.js b/src/pages-and-resources/data/selectors.js
index 311550b9a8..b630a698e8 100644
--- a/src/pages-and-resources/data/selectors.js
+++ b/src/pages-and-resources/data/selectors.js
@@ -1,5 +1,7 @@
-/* eslint-disable import/prefer-default-export */
-
-export const getLoadingStatus = (status) => status.pagesAndResources.loadingStatus;
-export const getSavingStatus = (status) => status.pagesAndResources.savingStatus;
-export const getCourseAppsApiStatus = (status) => status.pagesAndResources.courseAppsApiStatus;
+export const getLoadingStatus = (state) => state.pagesAndResources.loadingStatus;
+export const getSavingStatus = (state) => state.pagesAndResources.savingStatus;
+export const getCourseAppsApiStatus = (state) => state.pagesAndResources.courseAppsApiStatus;
+export const getCourseAppSettingValue = (setting) => (state) => (
+  state.pagesAndResources.courseAppSettings[setting]?.value
+);
+export const getResetStatus = (state) => state.pagesAndResources.resetStatus;
diff --git a/src/pages-and-resources/data/slice.js b/src/pages-and-resources/data/slice.js
index 21a5e69989..95379cd34a 100644
--- a/src/pages-and-resources/data/slice.js
+++ b/src/pages-and-resources/data/slice.js
@@ -1,5 +1,6 @@
 /* eslint-disable no-param-reassign */
 import { createSlice } from '@reduxjs/toolkit';
+
 import { RequestStatus } from '../../data/constants';
 
 const slice = createSlice({
@@ -8,7 +9,9 @@ const slice = createSlice({
     courseAppIds: [],
     loadingStatus: RequestStatus.IN_PROGRESS,
     savingStatus: '',
+    resetStatus: '',
     courseAppsApiStatus: {},
+    courseAppSettings: {},
   },
   reducers: {
     fetchCourseAppsSuccess: (state, { payload }) => {
@@ -20,9 +23,18 @@ const slice = createSlice({
     updateSavingStatus: (state, { payload }) => {
       state.savingStatus = payload.status;
     },
+    updateResetStatus: (state, { payload }) => {
+      state.resetStatus = payload.status;
+    },
     updateCourseAppsApiStatus: (state, { payload }) => {
       state.courseAppsApiStatus = payload.status;
     },
+    fetchCourseAppsSettingsSuccess: (state, { payload }) => {
+      Object.assign(state.courseAppSettings, payload);
+    },
+    updateCourseAppsSettingsSuccess: (state, { payload }) => {
+      Object.assign(state.courseAppSettings, payload);
+    },
   },
 });
 
@@ -30,7 +42,10 @@ export const {
   fetchCourseAppsSuccess,
   updateLoadingStatus,
   updateSavingStatus,
+  updateResetStatus,
   updateCourseAppsApiStatus,
+  fetchCourseAppsSettingsSuccess,
+  updateCourseAppsSettingsSuccess,
 } = slice.actions;
 
 export const {
diff --git a/src/pages-and-resources/data/thunks.js b/src/pages-and-resources/data/thunks.js
index 6d94f4ee15..977454f6e9 100644
--- a/src/pages-and-resources/data/thunks.js
+++ b/src/pages-and-resources/data/thunks.js
@@ -1,14 +1,16 @@
 import { RequestStatus } from '../../data/constants';
+import { addModels, updateModel } from '../../generic/model-store';
 import {
-  getCourseApps,
+  getCourseAdvancedSettings,
+  getCourseApps, updateCourseAdvancedSettings,
   updateCourseApp,
 } from './api';
-import { addModels, updateModel } from '../../generic/model-store';
 import {
+  fetchCourseAppsSettingsSuccess,
   fetchCourseAppsSuccess,
+  updateCourseAppsApiStatus, updateCourseAppsSettingsSuccess,
   updateLoadingStatus,
   updateSavingStatus,
-  updateCourseAppsApiStatus,
 } from './slice';
 
 const COURSE_APPS_ORDER = [
@@ -18,10 +20,13 @@ const COURSE_APPS_ORDER = [
   'edxnotes',
   'wiki',
   'calculator',
+  'proctoring',
+  'live',
   'textbooks',
+  'custom_pages',
+  'ora_settings',
 ];
 
-/* eslint-disable import/prefer-default-export */
 export function fetchCourseApps(courseId) {
   return async (dispatch) => {
     dispatch(updateLoadingStatus({ courseId, status: RequestStatus.IN_PROGRESS }));
@@ -55,8 +60,44 @@ export function updateAppStatus(courseId, appId, state) {
       await updateCourseApp(courseId, appId, state);
       dispatch(updateModel({ modelType: 'courseApps', model: { id: appId, enabled: state } }));
       dispatch(updateSavingStatus({ status: RequestStatus.SUCCESSFUL }));
+      return true;
+    } catch (error) {
+      dispatch(updateSavingStatus({ status: RequestStatus.FAILED }));
+      return false;
+    }
+  };
+}
+
+export function fetchCourseAppSettings(courseId, settings) {
+  return async (dispatch) => {
+    dispatch(updateLoadingStatus({ status: RequestStatus.IN_PROGRESS }));
+
+    try {
+      const settingValues = await getCourseAdvancedSettings(courseId, settings);
+      dispatch(fetchCourseAppsSettingsSuccess(settingValues));
+      dispatch(updateLoadingStatus({ status: RequestStatus.SUCCESSFUL }));
+    } catch (error) {
+      if (error.response && error.response.status === 403) {
+        dispatch(updateLoadingStatus({ status: RequestStatus.DENIED }));
+      } else {
+        dispatch(updateLoadingStatus({ status: RequestStatus.FAILED }));
+      }
+    }
+  };
+}
+
+export function updateCourseAppSetting(courseId, setting, value) {
+  return async (dispatch) => {
+    dispatch(updateSavingStatus({ status: RequestStatus.IN_PROGRESS }));
+
+    try {
+      const settingValues = await updateCourseAdvancedSettings(courseId, setting, value);
+      dispatch(updateCourseAppsSettingsSuccess(settingValues));
+      dispatch(updateSavingStatus({ status: RequestStatus.SUCCESSFUL }));
+      return true;
     } catch (error) {
       dispatch(updateSavingStatus({ status: RequestStatus.FAILED }));
+      return false;
     }
   };
 }
diff --git a/src/pages-and-resources/discussions/DiscussionsProvider.jsx b/src/pages-and-resources/discussions/DiscussionsProvider.jsx
index d89d833d5c..f3b87fd6cc 100644
--- a/src/pages-and-resources/discussions/DiscussionsProvider.jsx
+++ b/src/pages-and-resources/discussions/DiscussionsProvider.jsx
@@ -1,21 +1,22 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 
 export const DiscussionsContext = React.createContext({});
 
-export default function DiscussionsProvider({ children, path }) {
+const DiscussionsProvider = ({ children, path }) => {
+  const contextValue = useMemo(() => ({ path }), []);
   return (
     <DiscussionsContext.Provider
-      value={{
-        path,
-      }}
+      value={contextValue}
     >
       {children}
     </DiscussionsContext.Provider>
   );
-}
+};
 
 DiscussionsProvider.propTypes = {
   children: PropTypes.node.isRequired,
   path: PropTypes.string.isRequired,
 };
+
+export default DiscussionsProvider;
diff --git a/src/pages-and-resources/discussions/DiscussionsSettings.jsx b/src/pages-and-resources/discussions/DiscussionsSettings.jsx
index f7c035f7e7..18f9391779 100644
--- a/src/pages-and-resources/discussions/DiscussionsSettings.jsx
+++ b/src/pages-and-resources/discussions/DiscussionsSettings.jsx
@@ -2,21 +2,18 @@ import React, {
   useCallback, useContext, useEffect, useState,
 } from 'react';
 import PropTypes from 'prop-types';
-import {
-  useRouteMatch,
-} from 'react-router';
+import { useNavigate, useParams } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
-import { history } from '@edx/frontend-platform';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import {
   Alert, Button, FullscreenModal, Stepper,
-} from '@edx/paragon';
+} from '@openedx/paragon';
 
 import { PagesAndResourcesContext } from '../PagesAndResourcesProvider';
 
 import messages from './messages';
 import DiscussionsProvider from './DiscussionsProvider';
-import { fetchApps } from './data/thunks';
+import { fetchProviders } from './data/thunks';
 import AppList from './app-list';
 import AppConfigForm from './app-config-form';
 import { DENIED, FAILED } from './data/slice';
@@ -28,7 +25,8 @@ import Loading from '../../generic/Loading';
 const SELECTION_STEP = 'selection';
 const SETTINGS_STEP = 'settings';
 
-function DiscussionsSettings({ courseId, intl }) {
+const DiscussionsSettings = ({ courseId, intl }) => {
+  const navigate = useNavigate();
   const dispatch = useDispatch();
   const { path: pagesAndResourcesPath } = useContext(PagesAndResourcesContext);
   const { status, hasValidationError } = useSelector(state => state.discussions);
@@ -36,11 +34,11 @@ function DiscussionsSettings({ courseId, intl }) {
   const courseDetail = useModel('courseDetails', courseId);
 
   useEffect(() => {
-    dispatch(fetchApps(courseId));
+    dispatch(fetchProviders(courseId));
   }, [courseId]);
 
   const discussionsPath = `${pagesAndResourcesPath}/discussion`;
-  const { params: { appId } } = useRouteMatch();
+  const { appId } = useParams();
 
   const startStep = appId ? SETTINGS_STEP : SELECTION_STEP;
   const [currentStep, setCurrentStep] = useState(startStep);
@@ -50,11 +48,11 @@ function DiscussionsSettings({ courseId, intl }) {
   }, [appId]);
 
   const handleClose = useCallback(() => {
-    history.push(pagesAndResourcesPath);
+    navigate(pagesAndResourcesPath);
   }, [pagesAndResourcesPath]);
 
   const handleBack = useCallback(() => {
-    history.push(discussionsPath);
+    navigate(discussionsPath);
   }, [discussionsPath]);
 
   if (!courseDetail) {
@@ -98,6 +96,7 @@ function DiscussionsSettings({ courseId, intl }) {
             onClose={handleClose}
             isOpen
             beforeBodyNode={<Stepper.Header className="border-bottom border-light" />}
+            isOverflowVisible={false}
             footerNode={(
               <>
                 <Stepper.ActionRow eventKey={SELECTION_STEP}>
@@ -121,7 +120,6 @@ function DiscussionsSettings({ courseId, intl }) {
               eventKey={SELECTION_STEP}
               title={intl.formatMessage(messages.providerSelection)}
             >
-              <AppList />
               {
                 !canChangeProviders && (
                   <Alert variant="warning">
@@ -129,6 +127,7 @@ function DiscussionsSettings({ courseId, intl }) {
                   </Alert>
                 )
               }
+              <AppList />
             </Stepper.Step>
             <Stepper.Step
               eventKey={SETTINGS_STEP}
@@ -145,7 +144,7 @@ function DiscussionsSettings({ courseId, intl }) {
       </AppConfigForm.Provider>
     </DiscussionsProvider>
   );
-}
+};
 
 DiscussionsSettings.propTypes = {
   courseId: PropTypes.string.isRequired,
diff --git a/src/pages-and-resources/discussions/DiscussionsSettings.test.jsx b/src/pages-and-resources/discussions/DiscussionsSettings.test.jsx
index b5b0d83af6..60a257ee1f 100644
--- a/src/pages-and-resources/discussions/DiscussionsSettings.test.jsx
+++ b/src/pages-and-resources/discussions/DiscussionsSettings.test.jsx
@@ -1,59 +1,69 @@
+import ReactDOM from 'react-dom';
 import {
-  getConfig, history, initializeMockApp, setConfig,
+  getConfig, initializeMockApp, setConfig,
 } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
-import { AppProvider, PageRoute } from '@edx/frontend-platform/react';
+import { AppProvider, PageWrap } from '@edx/frontend-platform/react';
 import {
-  act,
-  getByRole,
-  queryByLabelText,
-  queryByRole,
-  queryByTestId,
-  queryByText,
-  render,
-  screen,
-  waitFor,
-  waitForElementToBeRemoved,
+  act, findByRole, fireEvent, getByRole, queryByLabelText, queryByRole, queryByTestId, queryByText,
+  render, screen, waitFor, waitForElementToBeRemoved,
 } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import MockAdapter from 'axios-mock-adapter';
 import React from 'react';
-import { Switch } from 'react-router';
+import {
+  Routes,
+  Route,
+  MemoryRouter,
+  useLocation,
+} from 'react-router-dom';
+import { fetchCourseDetail } from '../../data/thunks';
 import initializeStore from '../../store';
+import { executeThunk } from '../../utils';
 import PagesAndResourcesProvider from '../PagesAndResourcesProvider';
-import appMessages from './app-config-form/messages';
-import appListMessages from './app-list/messages';
 import ltiMessages from './app-config-form/apps/lti/messages';
-import { getAppsUrl } from './data/api';
+import appMessages from './app-config-form/messages';
+import messages from './app-list/messages';
+import { getDiscussionsProvidersUrl, getDiscussionsSettingsUrl } from './data/api';
 import DiscussionsSettings from './DiscussionsSettings';
 import {
+  courseDetailResponse,
   generatePiazzaApiResponse,
+  generateProvidersApiResponse,
   legacyApiResponse,
   piazzaApiResponse,
-  courseDetailResponse,
 } from './factories/mockApiResponses';
-import { executeThunk } from '../../utils';
-import { fetchCourseDetail } from '../../data/thunks';
 
 const courseId = 'course-v1:edX+TestX+Test_Course';
 let axiosMock;
 let store;
 let container;
 
-function renderComponent() {
+// Modal creates a portal. Overriding ReactDOM.createPortal allows portals to be tested in jest.
+ReactDOM.createPortal = jest.fn(node => node);
+
+const LocationDisplay = () => {
+  const location = useLocation();
+  return <div data-testid="location-display">{location.pathname}</div>;
+};
+
+function renderComponent(route) {
   const wrapper = render(
-    <AppProvider store={store}>
+    <AppProvider store={store} wrapWithRouter={false}>
       <PagesAndResourcesProvider courseId={courseId}>
-        <Switch>
-          <PageRoute
-            path={[
-              `/course/${courseId}/pages-and-resources/discussion/configure/:appId`,
-              `/course/${courseId}/pages-and-resources/discussion`,
-            ]}
-          >
-            <DiscussionsSettings courseId={courseId} />
-          </PageRoute>
-        </Switch>
+        <MemoryRouter initialEntries={[`${route}`]}>
+          <Routes>
+            <Route
+              path={`/course/${courseId}/pages-and-resources/discussion/configure/:appId`}
+              element={<PageWrap><DiscussionsSettings courseId={courseId} /></PageWrap>}
+            />
+            <Route
+              path={`/course/${courseId}/pages-and-resources/discussion`}
+              element={<PageWrap><DiscussionsSettings courseId={courseId} /></PageWrap>}
+            />
+          </Routes>
+          <LocationDisplay />
+        </MemoryRouter>
       </PagesAndResourcesProvider>
     </AppProvider>,
   );
@@ -81,48 +91,46 @@ describe('DiscussionsSettings', () => {
       },
     });
     axiosMock = new MockAdapter(getAuthenticatedHttpClient());
-
-    // Leave the DiscussionsSettings route after the test.
-    history.push(`/course/${courseId}/pages-and-resources`);
   });
 
   describe('with successful network connections', () => {
     beforeEach(() => {
-      axiosMock.onGet(getAppsUrl(courseId)).reply(200, piazzaApiResponse);
-      renderComponent();
+      axiosMock.onGet(getDiscussionsProvidersUrl(courseId))
+        .reply(200, generateProvidersApiResponse(false));
+      axiosMock.onGet(getDiscussionsSettingsUrl(courseId))
+        .reply(200, generatePiazzaApiResponse(true));
     });
 
     test('sets selection step from routes', async () => {
-      history.push(`/course/${courseId}/pages-and-resources/discussion`);
-
+      renderComponent(`/course/${courseId}/pages-and-resources/discussion`);
       // This is an important line that ensures the spinner has been removed - and thus our main
       // content has been loaded - prior to proceeding with our expectations.
-      await waitForElementToBeRemoved(screen.getByRole('status'));
+      await waitForElementToBeRemoved(screen.queryByRole('status'));
 
       expect(queryByTestId(container, 'appList')).toBeInTheDocument();
       expect(queryByTestId(container, 'appConfigForm')).not.toBeInTheDocument();
     });
 
     test('sets settings step from routes', async () => {
-      history.push(`/course/${courseId}/pages-and-resources/discussion/configure/piazza`);
-
+      renderComponent(`/course/${courseId}/pages-and-resources/discussion/configure/piazza`);
       // This is an important line that ensures the spinner has been removed - and thus our main
       // content has been loaded - prior to proceeding with our expectations.
-      await waitForElementToBeRemoved(screen.getByRole('status'));
+      await waitForElementToBeRemoved(screen.queryByRole('status'));
 
       expect(queryByTestId(container, 'appList')).not.toBeInTheDocument();
       expect(queryByTestId(container, 'appConfigForm')).toBeInTheDocument();
     });
 
     test('successfully advances to settings step for lti', async () => {
-      history.push(`/course/${courseId}/pages-and-resources/discussion`);
-
+      renderComponent(`/course/${courseId}/pages-and-resources/discussion`);
       // This is an important line that ensures the spinner has been removed - and thus our main
       // content has been loaded - prior to proceeding with our expectations.
-      await waitForElementToBeRemoved(screen.getByRole('status'));
+      await waitForElementToBeRemoved(screen.queryByRole('status'));
 
-      userEvent.click(queryByLabelText(container, 'Select Piazza'));
-      userEvent.click(queryByText(container, appListMessages.nextButton.defaultMessage));
+      await waitFor(() => {
+        userEvent.click(queryByLabelText(container, 'Select Piazza'));
+        userEvent.click(queryByText(container, messages.nextButton.defaultMessage));
+      });
 
       expect(queryByTestId(container, 'appList')).not.toBeInTheDocument();
       expect(queryByTestId(container, 'appConfigForm')).toBeInTheDocument();
@@ -131,16 +139,18 @@ describe('DiscussionsSettings', () => {
     });
 
     test('successfully advances to settings step for legacy', async () => {
-      axiosMock.onGet(getAppsUrl(courseId)).reply(200, legacyApiResponse);
-      renderComponent();
-      history.push(`/course/${courseId}/pages-and-resources/discussion`);
+      axiosMock.onGet(getDiscussionsProvidersUrl(courseId)).reply(200, generateProvidersApiResponse(false, 'legacy'));
+      axiosMock.onGet(getDiscussionsSettingsUrl(courseId)).reply(200, legacyApiResponse);
 
+      renderComponent(`/course/${courseId}/pages-and-resources/discussion`);
       // This is an important line that ensures the spinner has been removed - and thus our main
       // content has been loaded - prior to proceeding with our expectations.
-      await waitForElementToBeRemoved(screen.getByRole('status'));
+      await waitForElementToBeRemoved(screen.queryByRole('status'));
 
-      userEvent.click(queryByLabelText(container, 'Select edX'));
-      userEvent.click(queryByText(container, appListMessages.nextButton.defaultMessage));
+      await waitFor(() => {
+        userEvent.click(queryByLabelText(container, 'Select edX'));
+        userEvent.click(queryByText(container, messages.nextButton.defaultMessage));
+      });
 
       expect(queryByTestId(container, 'appList')).not.toBeInTheDocument();
       expect(queryByTestId(container, 'appConfigForm')).toBeInTheDocument();
@@ -149,26 +159,26 @@ describe('DiscussionsSettings', () => {
     });
 
     test('successfully goes back to first step', async () => {
-      history.push(`/course/${courseId}/pages-and-resources/discussion/configure/piazza`);
-
+      renderComponent(`/course/${courseId}/pages-and-resources/discussion/configure/piazza`);
       // This is an important line that ensures the spinner has been removed - and thus our main
       // content has been loaded - prior to proceeding with our expectations.
-      await waitForElementToBeRemoved(screen.getByRole('status'));
+      await waitForElementToBeRemoved(screen.queryByRole('status'));
 
       expect(queryByTestId(container, 'appConfigForm')).toBeInTheDocument();
 
-      userEvent.click(queryByText(container, appMessages.backButton.defaultMessage));
+      await waitFor(() => userEvent.click(queryByText(container, appMessages.backButton.defaultMessage)));
 
-      expect(queryByTestId(container, 'appList')).toBeInTheDocument();
-      expect(queryByTestId(container, 'appConfigForm')).not.toBeInTheDocument();
+      await waitFor(() => {
+        expect(queryByTestId(container, 'appList')).toBeInTheDocument();
+        expect(queryByTestId(container, 'appConfigForm')).not.toBeInTheDocument();
+      });
     });
 
     test('successfully closes the modal', async () => {
-      history.push(`/course/${courseId}/pages-and-resources/discussion`);
-
+      renderComponent(`/course/${courseId}/pages-and-resources/discussion`);
       // This is an important line that ensures the spinner has been removed - and thus our main
       // content has been loaded - prior to proceeding with our expectations.
-      await waitForElementToBeRemoved(screen.getByRole('status'));
+      await waitForElementToBeRemoved(screen.queryByRole('status'));
 
       expect(queryByTestId(container, 'appList')).toBeInTheDocument();
 
@@ -176,68 +186,76 @@ describe('DiscussionsSettings', () => {
 
       expect(queryByTestId(container, 'appList')).not.toBeInTheDocument();
       expect(queryByTestId(container, 'appConfigForm')).not.toBeInTheDocument();
-
-      expect(window.location.pathname).toEqual(`/course/${courseId}/pages-and-resources`);
     });
 
     test('successfully submit the modal', async () => {
-      history.push(`/course/${courseId}/pages-and-resources/discussion`);
-
-      axiosMock.onPost(getAppsUrl(courseId)).reply(200, piazzaApiResponse);
+      renderComponent(`/course/${courseId}/pages-and-resources/discussion`);
+      axiosMock.onPost(getDiscussionsSettingsUrl(courseId)).reply(200, generatePiazzaApiResponse(true));
 
       // This is an important line that ensures the spinner has been removed - and thus our main
       // content has been loaded - prior to proceeding with our expectations.
-      await waitForElementToBeRemoved(screen.getByRole('status'));
+      await waitForElementToBeRemoved(screen.queryByRole('status'));
 
-      userEvent.click(queryByLabelText(container, 'Select Piazza'));
+      userEvent.click(screen.getByLabelText('Select Piazza'));
 
-      userEvent.click(getByRole(container, 'button', { name: 'Next' }));
-
-      userEvent.click(getByRole(container, 'button', { name: 'Save' }));
+      // Have to use fireEvent.click with these Stepper buttons so that the
+      // onClick handler is triggered. (userEvent.click doesn't trigger onClick).
+      await act(async () => {
+        fireEvent.click(getByRole(container, 'button', { name: 'Next' }));
+      });
+      await act(async () => {
+        fireEvent.click(getByRole(container, 'button', { name: 'Save' }));
+      });
 
       // This is an important line that ensures the Close button has been removed, which implies that
       // the full screen modal has been closed following our click of Apply.  Once this has happened,
       // then it's safe to proceed with our expectations.
-      await waitForElementToBeRemoved(queryByRole(container, 'button', { name: 'Close' }));
+      await waitFor(() => expect(screen.queryByRole(container, 'button', { name: 'Close' })).toBeNull());
 
-      await waitFor(() => expect(window.location.pathname).toEqual(`/course/${courseId}/pages-and-resources`));
+      // Confirm route is correct
+      const locationDisplay = await screen.findByTestId('location-display');
+      await waitFor(() => expect(locationDisplay.textContent).toEqual(`/course/${courseId}/pages-and-resources`));
     });
 
     test('requires confirmation if changing provider', async () => {
-      axiosMock.onGet(`${getConfig().LMS_BASE_URL}/api/courses/v1/courses/${courseId}`).reply(200, courseDetailResponse);
+      axiosMock.onGet(`${getConfig().LMS_BASE_URL}/api/courses/v1/courses/${courseId}?username=abc123`).reply(200, courseDetailResponse);
       await executeThunk(fetchCourseDetail(courseId), store.dispatch);
-      history.push(`/course/${courseId}/pages-and-resources/discussion`);
 
+      renderComponent(`/course/${courseId}/pages-and-resources/discussion`);
       // This is an important line that ensures the spinner has been removed - and thus our main
       // content has been loaded - prior to proceeding with our expectations.
-      await waitForElementToBeRemoved(screen.getByRole('status'));
+      await waitForElementToBeRemoved(screen.queryByRole('status'));
 
       userEvent.click(getByRole(container, 'checkbox', { name: 'Select Discourse' }));
       userEvent.click(getByRole(container, 'button', { name: 'Next' }));
 
+      await findByRole(container, 'button', { name: 'Save' });
       userEvent.type(getByRole(container, 'textbox', { name: 'Consumer Key' }), 'key');
       userEvent.type(getByRole(container, 'textbox', { name: 'Consumer Secret' }), 'secret');
       userEvent.type(getByRole(container, 'textbox', { name: 'Launch URL' }), 'http://example.test');
       userEvent.click(getByRole(container, 'button', { name: 'Save' }));
 
-      await waitFor(() => expect(getByRole(container, 'dialog', { name: 'OK' })).toBeInTheDocument());
+      await waitFor(() => expect(queryByRole(container, 'dialog', { name: 'OK' })).toBeInTheDocument());
     });
 
     test('can cancel confirmation', async () => {
-      axiosMock.onGet(`${getConfig().LMS_BASE_URL}/api/courses/v1/courses/${courseId}`).reply(200, courseDetailResponse);
+      axiosMock.onGet(`${getConfig().LMS_BASE_URL}/api/courses/v1/courses/${courseId}?username=abc123`).reply(200, courseDetailResponse);
       await executeThunk(fetchCourseDetail(courseId), store.dispatch);
-      history.push(`/course/${courseId}/pages-and-resources/discussion`);
 
+      renderComponent(`/course/${courseId}/pages-and-resources/discussion`);
       // This is an important line that ensures the spinner has been removed - and thus our main
       // content has been loaded - prior to proceeding with our expectations.
-      await waitForElementToBeRemoved(screen.getByRole('status'));
+      await waitForElementToBeRemoved(screen.queryByRole('status'));
 
       const discourseBox = getByRole(container, 'checkbox', { name: 'Select Discourse' });
       expect(discourseBox).not.toBeDisabled();
       userEvent.click(discourseBox);
 
       userEvent.click(getByRole(container, 'button', { name: 'Next' }));
-      expect(getByRole(container, 'heading', { name: 'Discourse' })).toBeInTheDocument();
+
+      await waitFor(() => expect(screen.queryByRole('status')).toBeNull());
+
+      expect(await findByRole(container, 'heading', { name: 'Discourse' })).toBeInTheDocument();
 
       userEvent.type(getByRole(container, 'textbox', { name: 'Consumer Key' }), 'a');
       userEvent.type(getByRole(container, 'textbox', { name: 'Consumer Secret' }), 'secret');
@@ -252,7 +270,7 @@ describe('DiscussionsSettings', () => {
     });
   });
 
-  describe('with network error fetchApps API requests', () => {
+  describe('with network error fetchProviders API requests', () => {
     beforeEach(() => {
       // Expedient way of getting SUPPORT_URL into config.
       setConfig({
@@ -260,17 +278,15 @@ describe('DiscussionsSettings', () => {
         SUPPORT_URL: 'http://support.edx.org',
       });
 
-      axiosMock.onGet(getAppsUrl(courseId)).networkError();
-
-      renderComponent();
+      axiosMock.onGet(getDiscussionsProvidersUrl(courseId)).networkError();
+      axiosMock.onGet(getDiscussionsSettingsUrl(courseId)).networkError();
     });
 
     test('shows connection error alert', async () => {
-      history.push(`/course/${courseId}/pages-and-resources/discussion`);
-
+      renderComponent(`/course/${courseId}/pages-and-resources/discussion`);
       // This is an important line that ensures the spinner has been removed - and thus our main
       // content has been loaded - prior to proceeding with our expectations.
-      await waitForElementToBeRemoved(screen.getByRole('status'));
+      await waitForElementToBeRemoved(screen.queryByRole('status'));
 
       const alert = queryByRole(container, 'alert');
       expect(alert).toBeInTheDocument();
@@ -287,47 +303,42 @@ describe('DiscussionsSettings', () => {
         SUPPORT_URL: 'http://support.edx.org',
       });
 
-      axiosMock.onGet(getAppsUrl(courseId)).reply(200, piazzaApiResponse);
-      axiosMock.onPost(getAppsUrl(courseId)).networkError();
-      renderComponent();
+      axiosMock.onGet(getDiscussionsProvidersUrl(courseId))
+        .reply(200, generateProvidersApiResponse());
+      axiosMock.onGet(getDiscussionsSettingsUrl(courseId))
+        .reply(200, piazzaApiResponse);
+      axiosMock.onPost(getDiscussionsSettingsUrl(courseId)).networkError();
     });
 
     test('shows connection error alert at top of form', async () => {
-      history.push(`/course/${courseId}/pages-and-resources/discussion/configure/piazza`);
-
+      renderComponent(`/course/${courseId}/pages-and-resources/discussion/configure/piazza`);
       // This is an important line that ensures the spinner has been removed - and thus our main
       // content has been loaded - prior to proceeding with our expectations.
-      await waitForElementToBeRemoved(screen.getByRole('status'));
+      await waitForElementToBeRemoved(screen.queryByRole('status'));
 
       // Apply causes an async action to take place
-      act(() => {
-        userEvent.click(queryByText(container, appMessages.saveButton.defaultMessage));
-      });
-
+      userEvent.click(queryByText(container, appMessages.saveButton.defaultMessage));
       await waitFor(() => expect(axiosMock.history.post.length).toBe(1));
 
       expect(queryByTestId(container, 'appConfigForm')).toBeInTheDocument();
-
-      const alert = queryByRole(container, 'alert');
+      const alert = await findByRole(container, 'alert');
       expect(alert).toBeInTheDocument();
       expect(alert.textContent).toEqual(expect.stringContaining('We encountered a technical error when applying changes.'));
       expect(alert.innerHTML).toEqual(expect.stringContaining(getConfig().SUPPORT_URL));
     });
   });
 
-  describe('with permission denied error for fetchApps API requests', () => {
+  describe('with permission denied error for fetchProviders API requests', () => {
     beforeEach(() => {
-      axiosMock.onGet(getAppsUrl(courseId)).reply(403);
-
-      renderComponent();
+      axiosMock.onGet(getDiscussionsProvidersUrl(courseId)).reply(403);
+      axiosMock.onGet(getDiscussionsSettingsUrl(courseId)).reply(403);
     });
 
     test('shows permission denied alert', async () => {
-      history.push(`/course/${courseId}/pages-and-resources/discussion`);
-
+      renderComponent(`/course/${courseId}/pages-and-resources/discussion`);
       // This is an important line that ensures the spinner has been removed - and thus our main
       // content has been loaded - prior to proceeding with our expectations.
-      await waitForElementToBeRemoved(screen.getByRole('status'));
+      await waitForElementToBeRemoved(screen.queryByRole('status'));
 
       const alert = queryByRole(container, 'alert');
       expect(alert).toBeInTheDocument();
@@ -337,18 +348,17 @@ describe('DiscussionsSettings', () => {
 
   describe('with permission denied error for postAppConfig API requests', () => {
     beforeEach(() => {
-      axiosMock.onGet(getAppsUrl(courseId)).reply(200, piazzaApiResponse);
-      axiosMock.onPost(getAppsUrl(courseId)).reply(403);
-
-      renderComponent();
+      axiosMock.onGet(getDiscussionsProvidersUrl(courseId))
+        .reply(200, generateProvidersApiResponse());
+      axiosMock.onGet(getDiscussionsSettingsUrl(courseId)).reply(200, piazzaApiResponse);
+      axiosMock.onPost(getDiscussionsSettingsUrl(courseId)).reply(403);
     });
 
     test('shows permission denied alert at top of form', async () => {
-      history.push(`/course/${courseId}/pages-and-resources/discussion/configure/piazza`);
-
+      renderComponent(`/course/${courseId}/pages-and-resources/discussion/configure/piazza`);
       // This is an important line that ensures the spinner has been removed - and thus our main
       // content has been loaded - prior to proceeding with our expectations.
-      await waitForElementToBeRemoved(screen.getByRole('status'));
+      await waitForElementToBeRemoved(screen.queryByRole('status'));
 
       userEvent.click(getByRole(container, 'button', { name: 'Save' }));
 
@@ -357,10 +367,12 @@ describe('DiscussionsSettings', () => {
       expect(queryByTestId(container, 'appList')).not.toBeInTheDocument();
       expect(queryByTestId(container, 'appConfigForm')).not.toBeInTheDocument();
 
+      // Confirm route is correct
       // We don't technically leave the route in this case, though the modal is hidden.
-      expect(window.location.pathname).toEqual(`/course/${courseId}/pages-and-resources/discussion/configure/piazza`);
+      const locationDisplay = await screen.findByTestId('location-display');
+      await waitFor(() => expect(locationDisplay.textContent).toEqual(`/course/${courseId}/pages-and-resources/discussion/configure/piazza`));
 
-      const alert = queryByRole(container, 'alert');
+      const alert = await findByRole(container, 'alert');
       expect(alert).toBeInTheDocument();
       expect(alert.textContent).toEqual(expect.stringContaining('You are not authorized to view this page.'));
     });
@@ -392,29 +404,82 @@ describe.each([
     });
     axiosMock = new MockAdapter(getAuthenticatedHttpClient());
 
-    // Leave the DiscussionsSettings route after the test.
-    history.push(`/course/${courseId}/pages-and-resources`);
-    axiosMock.onGet(getAppsUrl(courseId)).reply(200, generatePiazzaApiResponse(isAdminOnlyConfig));
-    renderComponent();
+    axiosMock.onGet(getDiscussionsProvidersUrl(courseId))
+      .reply(200, generateProvidersApiResponse(isAdminOnlyConfig));
+    axiosMock.onGet(getDiscussionsSettingsUrl(courseId))
+      .reply(200, generatePiazzaApiResponse(true));
+  });
+
+  test(`successfully advances to settings step for lti when adminOnlyConfig=${isAdminOnlyConfig} and user ${isAdmin ? 'is' : 'is not'} admin `, async () => {
+    const showLTIConfig = isAdmin;
+
+    renderComponent(`/course/${courseId}/pages-and-resources/discussion`);
+    // This is an important line that ensures the spinner has been removed - and thus our main
+    // content has been loaded - prior to proceeding with our expectations.
+    await waitForElementToBeRemoved(screen.queryByRole('status'));
+
+    userEvent.click(screen.getByLabelText('Select Piazza'));
+    userEvent.click(queryByText(container, messages.nextButton.defaultMessage));
+    expect(screen.queryByRole('status')).not.toBeInTheDocument();
+
+    await waitFor(() => {
+      if (showLTIConfig) {
+        expect(queryByText(container, ltiMessages.formInstructions.defaultMessage)).toBeInTheDocument();
+        expect(queryByTestId(container, 'ltiConfigFields')).toBeInTheDocument();
+      } else {
+        expect(queryByText(container, ltiMessages.formInstructions.defaultMessage)).not.toBeInTheDocument();
+        expect(queryByTestId(container, 'ltiConfigFields')).not.toBeInTheDocument();
+      }
+    });
   });
+});
+
+describe.each([
+  { piiSharingAllowed: false },
+  { piiSharingAllowed: true },
+])('PII sharing fields test', ({ piiSharingAllowed }) => {
+  const enablePIISharing = false;
+
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+
+    store = initializeStore({
+      models: {
+        courseDetails: {
+          [courseId]: {},
+        },
+      },
+    });
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
 
-  test(`successfully advances to settings step for lti when adminOnlyConfig=${isAdminOnlyConfig} and user ${isAdmin ? 'is' : 'is not'} admin`, async () => {
-    const showLTIConfig = isAdmin || !isAdminOnlyConfig;
-    history.push(`/course/${courseId}/pages-and-resources/discussion`);
+    axiosMock.onGet(getDiscussionsProvidersUrl(courseId))
+      .reply(200, generateProvidersApiResponse(false));
+    axiosMock.onGet(getDiscussionsSettingsUrl(courseId))
+      .reply(200, generatePiazzaApiResponse(piiSharingAllowed));
+  });
 
+  test(`${piiSharingAllowed ? 'shows PII share username/email field when piiSharingAllowed is true'
+    : 'hides PII share username/email field when piiSharingAllowed is false'}`, async () => {
+    renderComponent(`/course/${courseId}/pages-and-resources/discussion`);
     // This is an important line that ensures the spinner has been removed - and thus our main
     // content has been loaded - prior to proceeding with our expectations.
-    await waitForElementToBeRemoved(screen.getByRole('status'));
+    await waitForElementToBeRemoved(screen.queryByRole('status'));
 
-    userEvent.click(queryByLabelText(container, 'Select Piazza'));
-    userEvent.click(queryByText(container, appListMessages.nextButton.defaultMessage));
+    userEvent.click(screen.getByLabelText('Select Piazza'));
+    userEvent.click(screen.getByText(messages.nextButton.defaultMessage));
 
-    if (showLTIConfig) {
-      expect(queryByText(container, ltiMessages.formInstructions.defaultMessage)).toBeInTheDocument();
-      expect(queryByTestId(container, 'ltiConfigFields')).toBeInTheDocument();
+    expect(screen.queryByRole('status')).not.toBeInTheDocument();
+    if (enablePIISharing) {
+      expect(queryByTestId(container, 'piiSharingFields')).toBeInTheDocument();
     } else {
-      expect(queryByText(container, ltiMessages.formInstructions.defaultMessage)).not.toBeInTheDocument();
-      expect(queryByTestId(container, 'ltiConfigFields')).not.toBeInTheDocument();
+      expect(queryByTestId(container, 'piiSharingFields')).not.toBeInTheDocument();
     }
   });
 });
diff --git a/src/pages-and-resources/discussions/app-config-form/AppConfigForm.jsx b/src/pages-and-resources/discussions/app-config-form/AppConfigForm.jsx
index 4d4b51d22b..190dedc1a9 100644
--- a/src/pages-and-resources/discussions/app-config-form/AppConfigForm.jsx
+++ b/src/pages-and-resources/discussions/app-config-form/AppConfigForm.jsx
@@ -2,52 +2,55 @@ import React, {
   useCallback, useContext, useEffect, useState,
 } from 'react';
 import PropTypes from 'prop-types';
+
 import { useDispatch, useSelector } from 'react-redux';
-import { useRouteMatch } from 'react-router';
+import { useNavigate, useParams } from 'react-router-dom';
+
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import {
   ActionRow,
   Container,
   ModalDialog,
-} from '@edx/paragon';
+} from '@openedx/paragon';
 
-import { useModel, useModels } from '../../../generic/model-store';
+import Loading from '../../../generic/Loading';
+import PermissionDeniedAlert from '../../../generic/PermissionDeniedAlert';
+import SaveFormConnectionErrorAlert from '../../../generic/SaveFormConnectionErrorAlert';
 import { PagesAndResourcesContext } from '../../PagesAndResourcesProvider';
 import {
   DENIED,
   FAILED, LOADED, LOADING, selectApp,
 } from '../data/slice';
-import { saveAppConfig } from '../data/thunks';
-
-import messages from './messages';
+import { fetchDiscussionSettings, saveProviderConfig } from '../data/thunks';
+import OpenedXConfigForm from './apps/openedx';
+import LtiConfigForm from './apps/lti';
 import AppConfigFormProvider, { AppConfigFormContext } from './AppConfigFormProvider';
 import AppConfigFormSaveButton from './AppConfigFormSaveButton';
-import LegacyConfigForm from './apps/legacy';
-import LtiConfigForm from './apps/lti';
-import Loading from '../../../generic/Loading';
-import SaveFormConnectionErrorAlert from '../../../generic/SaveFormConnectionErrorAlert';
-import PermissionDeniedAlert from '../../../generic/PermissionDeniedAlert';
+import messages from './messages';
 
-function AppConfigForm({
+const AppConfigForm = ({
   courseId, intl,
-}) {
+}) => {
   const dispatch = useDispatch();
+  const navigate = useNavigate();
+
   const { formRef } = useContext(AppConfigFormContext);
   const { path: pagesAndResourcesPath } = useContext(PagesAndResourcesContext);
-  const { params: { appId: routeAppId } } = useRouteMatch();
+  const { appId: routeAppId } = useParams();
+  const [isLoading, setLoading] = useState(true);
   const {
-    activeAppId, discussionTopicIds, divideDiscussionIds, selectedAppId, status, saveStatus,
+    activeAppId, selectedAppId, status, saveStatus,
   } = useSelector(state => state.discussions);
-  const app = useModel('apps', selectedAppId);
-  // appConfigs have no ID of their own, so we use the active app ID to reference them.
-  // This appConfig may come back as null if the selectedAppId is not the activeAppId, i.e.,
-  // if we're configuring a new app.
-  const appConfigObj = useModel('appConfigs', selectedAppId);
-  const discussionTopics = useModels('discussionTopics', discussionTopicIds);
-  const appConfig = { ...appConfigObj, discussionTopics, divideDiscussionIds };
 
   const [confirmationDialogVisible, setConfirmationDialogVisible] = useState(false);
 
+  useEffect(() => {
+    (async () => {
+      await dispatch(fetchDiscussionSettings(courseId, selectedAppId));
+      setLoading(false);
+    })();
+  }, [courseId, selectedAppId]);
+
   useEffect(() => {
     if (status === LOADED) {
       if (routeAppId !== selectedAppId) {
@@ -63,12 +66,12 @@ function AppConfigForm({
       setConfirmationDialogVisible(true);
     } else {
       setConfirmationDialogVisible(false);
-      // Note that when this action succeeds, we redirect to pagesAndResurcesPath in the thunk.
-      dispatch(saveAppConfig(courseId, selectedAppId, values, pagesAndResourcesPath));
+      // Note that when this action succeeds, we redirect to pagesAndResourcesPath in the thunk.
+      dispatch(saveProviderConfig(courseId, selectedAppId, values, pagesAndResourcesPath, navigate));
     }
   }, [activeAppId, confirmationDialogVisible, courseId, selectedAppId]);
 
-  if (!selectedAppId || status === LOADING) {
+  if (!selectedAppId || status === LOADING || isLoading) {
     return (
       <Loading />
     );
@@ -84,24 +87,28 @@ function AppConfigForm({
     alert = <PermissionDeniedAlert />;
   }
 
-  let form = null;
-  if (app.id === 'legacy') {
+  let form;
+  if (selectedAppId === 'legacy') {
     form = (
-      <LegacyConfigForm
+      <OpenedXConfigForm
         formRef={formRef}
-        appConfig={appConfig}
         onSubmit={handleSubmit}
-        title={intl.formatMessage(messages[`appName-${app.id}`])}
+        legacy
+      />
+    );
+  } else if (selectedAppId === 'openedx') {
+    form = (
+      <OpenedXConfigForm
+        formRef={formRef}
+        onSubmit={handleSubmit}
+        legacy={false}
       />
     );
   } else {
     form = (
       <LtiConfigForm
         formRef={formRef}
-        app={app}
-        appConfig={appConfig}
         onSubmit={handleSubmit}
-        providerName={intl.formatMessage(messages[`appName-${app.id}`])}
       />
     );
   }
@@ -124,7 +131,7 @@ function AppConfigForm({
         <ModalDialog.Body className="overflow-hidden text-primary-700">
           {intl.formatMessage(messages.configurationChangeConsequence)}
         </ModalDialog.Body>
-        <ModalDialog.Footer className="pb-4">
+        <ModalDialog.Footer>
           <ActionRow>
             <ModalDialog.CloseButton variant="tertiary">
               {intl.formatMessage(messages.cancel)}
@@ -135,7 +142,7 @@ function AppConfigForm({
       </ModalDialog>
     </Container>
   );
-}
+};
 
 AppConfigForm.propTypes = {
   courseId: PropTypes.string.isRequired,
diff --git a/src/pages-and-resources/discussions/app-config-form/AppConfigFormProvider.jsx b/src/pages-and-resources/discussions/app-config-form/AppConfigFormProvider.jsx
index d2355cc9ba..2d4355f194 100644
--- a/src/pages-and-resources/discussions/app-config-form/AppConfigFormProvider.jsx
+++ b/src/pages-and-resources/discussions/app-config-form/AppConfigFormProvider.jsx
@@ -1,22 +1,23 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 
 export const AppConfigFormContext = React.createContext({});
 
-export default function AppConfigFormProvider({ children }) {
+const AppConfigFormProvider = ({ children }) => {
   const formRef = React.createRef();
+  const contextValue = useMemo(() => ({ formRef }), []);
 
   return (
     <AppConfigFormContext.Provider
-      value={{
-        formRef,
-      }}
+      value={contextValue}
     >
       {children}
     </AppConfigFormContext.Provider>
   );
-}
+};
 
 AppConfigFormProvider.propTypes = {
   children: PropTypes.node.isRequired,
 };
+
+export default AppConfigFormProvider;
diff --git a/src/pages-and-resources/discussions/app-config-form/AppConfigFormSaveButton.jsx b/src/pages-and-resources/discussions/app-config-form/AppConfigFormSaveButton.jsx
index f3f9bf690c..a351d9e8f5 100644
--- a/src/pages-and-resources/discussions/app-config-form/AppConfigFormSaveButton.jsx
+++ b/src/pages-and-resources/discussions/app-config-form/AppConfigFormSaveButton.jsx
@@ -2,36 +2,50 @@ import React, { useCallback, useContext } from 'react';
 import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { StatefulButton } from '@edx/paragon';
+import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
+import { StatefulButton } from '@openedx/paragon';
 
 import messages from './messages';
 import { SAVING } from '../data/slice';
 import { AppConfigFormContext } from './AppConfigFormProvider';
+import { useModel } from '../../../generic/model-store';
 
-function AppConfigFormSaveButton({ intl, labelText }) {
+const AppConfigFormSaveButton = ({ intl, labelText }) => {
   const saveStatus = useSelector(state => state.discussions.saveStatus);
+  const { selectedAppId } = useSelector((state) => state.discussions);
+
+  const app = useModel('apps', selectedAppId);
+  const canSubmit = getAuthenticatedUser().administrator || !app?.adminOnlyConfig;
+
   const { formRef } = useContext(AppConfigFormContext);
 
   const submitButtonState = saveStatus === SAVING ? 'pending' : 'default';
 
   // This causes the form to be submitted from a button outside the form.
   const handleSave = useCallback(() => {
-    formRef.current.requestSubmit();
+    // https://developer.mozilla.org/en-US/docs/Web/API/Event/Event
+    // cancelable: (optional) a Boolean indicating whether the event can be canceled. The default is false.
+    // cancelable: true cancels the untrusted event and safari, chrome cancel the untrusted event by default
+    formRef.current.dispatchEvent(new Event('submit', {
+      cancelable: true, bubbles: true,
+    }));
   }, [formRef]);
 
   return (
-    <StatefulButton
-      labels={{
-        default: labelText || intl.formatMessage(messages.saveButton),
-        pending: intl.formatMessage(messages.savingButton),
-        complete: intl.formatMessage(messages.savedButton),
-      }}
-      state={submitButtonState}
-      onClick={handleSave}
-      style={{ minWidth: '88px' }}
-    />
+    canSubmit && (
+      <StatefulButton
+        labels={{
+          default: labelText || intl.formatMessage(messages.saveButton),
+          pending: intl.formatMessage(messages.savingButton),
+          complete: intl.formatMessage(messages.savedButton),
+        }}
+        state={submitButtonState}
+        onClick={handleSave}
+        style={{ minWidth: '88px' }}
+      />
+    )
   );
-}
+};
 
 AppConfigFormSaveButton.propTypes = {
   intl: intlShape.isRequired,
diff --git a/src/pages-and-resources/discussions/app-config-form/apps/legacy/LegacyConfigForm.jsx b/src/pages-and-resources/discussions/app-config-form/apps/legacy/LegacyConfigForm.jsx
deleted file mode 100644
index 62b47ba4d7..0000000000
--- a/src/pages-and-resources/discussions/app-config-form/apps/legacy/LegacyConfigForm.jsx
+++ /dev/null
@@ -1,141 +0,0 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-import { Card, Form } from '@edx/paragon';
-import { Formik } from 'formik';
-import * as Yup from 'yup';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-
-import DivisionByGroupFields from '../shared/DivisionByGroupFields';
-import AnonymousPostingFields from '../shared/AnonymousPostingFields';
-import DiscussionTopics from '../shared/discussion-topics/DiscussionTopics';
-import BlackoutDatesField, { blackoutDatesRegex } from '../shared/BlackoutDatesField';
-import LegacyConfigFormProvider from './LegacyConfigFormProvider';
-
-import messages from '../shared/messages';
-import AppConfigFormDivider from '../shared/AppConfigFormDivider';
-
-// eslint-disable-next-line func-names
-Yup.addMethod(Yup.object, 'uniqueProperty', function (propertyName, message) {
-  // eslint-disable-next-line func-names
-  return this.test('unique', message, function (discussionTopic) {
-    if (!discussionTopic || !discussionTopic[propertyName]) {
-      return true;
-    }
-    const isDuplicate = this.parent.filter(topic => topic !== discussionTopic)
-      .some(topic => topic[propertyName]?.toLowerCase() === discussionTopic[propertyName].toLowerCase());
-
-    if (isDuplicate) {
-      throw this.createError({
-        path: `${this.path}.${propertyName}`,
-        error: message,
-      });
-    }
-    return true;
-  });
-});
-
-function LegacyConfigForm({
-  appConfig, onSubmit, formRef, intl, title,
-}) {
-  const [validDiscussionTopics, setValidDiscussionTopics] = useState(appConfig.discussionTopics);
-  const legacyFormValidationSchema = Yup.object().shape({
-    blackoutDates: Yup.string().matches(
-      blackoutDatesRegex,
-      intl.formatMessage(messages.blackoutDatesFormattingError),
-    ),
-    discussionTopics: Yup.array(
-      Yup.object({
-        name: Yup.string().required(intl.formatMessage(messages.discussionTopicRequired)),
-      }).uniqueProperty('name', intl.formatMessage(messages.discussionTopicNameAlreadyExist)),
-    ),
-  });
-
-  return (
-    <Formik
-      initialValues={appConfig}
-      validateOnChange={false}
-      validationSchema={legacyFormValidationSchema}
-      onSubmit={(values) => onSubmit(values)}
-    >
-      {(
-        {
-          handleSubmit,
-          handleChange,
-          handleBlur,
-          values,
-          errors,
-          touched,
-        },
-      ) => {
-        const { discussionTopics } = values;
-        const discussionTopicErrors = discussionTopics.map((value, index) => Boolean(
-          touched.discussionTopics
-          && touched.discussionTopics[index]?.name
-          && errors.discussionTopics
-          && errors?.discussionTopics[index]?.name,
-        ));
-        const contextValue = {
-          validDiscussionTopics,
-          setValidDiscussionTopics,
-          discussionTopicErrors,
-          isFormInvalid: discussionTopicErrors.some((error) => error === true)
-          || Boolean(touched.blackoutDates && errors.blackoutDates),
-        };
-
-        return (
-          <LegacyConfigFormProvider value={contextValue}>
-            <Card className="mb-5 px-4 px-sm-5 pb-5" data-testid="legacyConfigForm">
-              <Form ref={formRef} onSubmit={handleSubmit}>
-                <h3 className="text-primary-500 my-3">{title}</h3>
-                <AppConfigFormDivider thick />
-                <AnonymousPostingFields
-                  onBlur={handleBlur}
-                  onChange={handleChange}
-                  values={values}
-                />
-                <AppConfigFormDivider thick />
-                <DiscussionTopics />
-                <AppConfigFormDivider thick />
-                <DivisionByGroupFields />
-                <AppConfigFormDivider thick />
-                <BlackoutDatesField />
-              </Form>
-            </Card>
-          </LegacyConfigFormProvider>
-        );
-      }}
-    </Formik>
-  );
-}
-
-LegacyConfigForm.propTypes = {
-  appConfig: PropTypes.shape({
-    divideByCohorts: PropTypes.bool.isRequired,
-    divideCourseTopicsByCohorts: PropTypes.bool.isRequired,
-    allowAnonymousPosts: PropTypes.bool.isRequired,
-    allowAnonymousPostsPeers: PropTypes.bool.isRequired,
-    blackoutDates: PropTypes.string.isRequired,
-    discussionTopics: PropTypes.arrayOf(PropTypes.shape({
-      name: PropTypes.string,
-      id: PropTypes.string,
-    })),
-  }),
-  onSubmit: PropTypes.func.isRequired,
-  // eslint-disable-next-line react/forbid-prop-types
-  formRef: PropTypes.object.isRequired,
-  intl: intlShape.isRequired,
-  title: PropTypes.string.isRequired,
-};
-
-LegacyConfigForm.defaultProps = {
-  appConfig: {
-    divideByCohorts: false,
-    allowDivisionByUnit: false,
-    divideCourseTopicsByCohorts: false,
-    allowAnonymousPosts: false,
-    allowAnonymousPostsPeers: false,
-    blackoutDates: '[]',
-  },
-};
-
-export default injectIntl(LegacyConfigForm);
diff --git a/src/pages-and-resources/discussions/app-config-form/apps/legacy/index.js b/src/pages-and-resources/discussions/app-config-form/apps/legacy/index.js
deleted file mode 100644
index f0b9341294..0000000000
--- a/src/pages-and-resources/discussions/app-config-form/apps/legacy/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './LegacyConfigForm';
diff --git a/src/pages-and-resources/discussions/app-config-form/apps/lti/LtiConfigForm.jsx b/src/pages-and-resources/discussions/app-config-form/apps/lti/LtiConfigForm.jsx
index 55e0d092ec..35d850d3bb 100644
--- a/src/pages-and-resources/discussions/app-config-form/apps/lti/LtiConfigForm.jsx
+++ b/src/pages-and-resources/discussions/app-config-form/apps/lti/LtiConfigForm.jsx
@@ -1,45 +1,41 @@
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 
-import { ensureConfig, getConfig } from '@edx/frontend-platform';
+import { ensureConfig } from '@edx/frontend-platform';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Card, Form, MailtoLink } from '@edx/paragon';
+import { Card, Form, MailtoLink } from '@openedx/paragon';
 
 import { useFormik } from 'formik';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import * as Yup from 'yup';
 
 import { updateValidationStatus } from '../../../data/slice';
 import AppExternalLinks from '../shared/AppExternalLinks';
 import messages from './messages';
+import appMessages from '../../messages';
+import { useModel } from '../../../../../generic/model-store';
 
-ensureConfig([
-  'SITE_NAME',
-  'SUPPORT_EMAIL',
-], 'LTI Config Form');
+ensureConfig(['SITE_NAME', 'SUPPORT_EMAIL'], 'LTI Config Form');
 
-function LtiConfigForm({
-  appConfig, app, onSubmit, intl, formRef, providerName,
-}) {
+const LtiConfigForm = ({ onSubmit, intl, formRef }) => {
+  const dispatch = useDispatch();
+
+  const { selectedAppId, piiConfig } = useSelector((state) => state.discussions);
+  const appConfig = useModel('appConfigs', selectedAppId);
+  const app = useModel('apps', selectedAppId);
+  const providerName = intl.formatMessage(appMessages[`appName-${app?.id}`]);
   const ltiAppConfig = {
-    consumerKey: appConfig.consumerKey || '',
-    consumerSecret: appConfig.consumerSecret || '',
-    launchUrl: appConfig.launchUrl || '',
-    piiShareUsername: appConfig.piiShareUsername,
-    piiShareEmail: appConfig.piiShareEmail,
+    consumerKey: appConfig?.consumerKey || '',
+    consumerSecret: appConfig?.consumerSecret || '',
+    launchUrl: appConfig?.launchUrl || '',
+    piiShareUsername: piiConfig.piiSharing ? piiConfig.piiShareUsername : undefined,
+    piiShareEmail: piiConfig.piiSharing ? piiConfig.piiShareEmail : undefined,
   };
-
   const user = getAuthenticatedUser();
-  const dispatch = useDispatch();
   const { externalLinks } = app;
   const {
-    handleSubmit,
-    handleChange,
-    handleBlur,
-    values,
-    touched,
-    errors,
+    handleSubmit, handleChange, handleBlur, values, touched, errors,
   } = useFormik({
     initialValues: ltiAppConfig,
     validationSchema: Yup.object().shape({
@@ -54,8 +50,14 @@ function LtiConfigForm({
   const isInvalidConsumerKey = Boolean(touched.consumerKey && errors.consumerKey);
   const isInvalidConsumerSecret = Boolean(touched.consumerSecret && errors.consumerSecret);
   const isInvalidLaunchUrl = Boolean(touched.launchUrl && errors.launchUrl);
-  const supportEmail = getConfig().SUPPORT_EMAIL;
-  const showLTIConfig = user.administrator || !app.adminOnlyConfig;
+  const showLTIConfig = user.administrator;
+  const enablePIISharing = false;
+  const supportEmails = {
+    Yellowdig: 'learnmore@yellowdig.com',
+    'Ed Discussion': 'team@edstem.org',
+    InScribe: 'hello@inscribeapp.com',
+    Piazza: 'team@piazza.com',
+  };
 
   useEffect(() => {
     dispatch(updateValidationStatus({ hasError: Object.keys(errors).length > 0 }));
@@ -65,27 +67,41 @@ function LtiConfigForm({
     <Card className="mb-5 p-5" data-testid="ltiConfigForm">
       <Form ref={formRef} onSubmit={handleSubmit}>
         <h3 className="mb-3">{providerName}</h3>
-        <p>{showLTIConfig
-          ? intl.formatMessage(messages.formInstructions)
-          : (
-            <FormattedMessage
-              {...messages.adminOnlyConfig}
-              values={{
-                providerName,
-                platformName: getConfig().SITE_NAME,
-                supportEmail: supportEmail
-                  ? <MailtoLink to={supportEmail}>{supportEmail}</MailtoLink>
-                  : 'support',
-              }}
-            />
-          )}
+        <p>
+          <FormattedMessage
+            {...messages.staffOnlyConfigInfo}
+            values={{
+              providerName,
+              supportEmail: supportEmails[providerName] ? (
+                <MailtoLink to={supportEmails[providerName]}>{supportEmails[providerName]}</MailtoLink>
+              ) : (
+                'support'
+              ),
+            }}
+          />
+        </p>
+        <p>
+          <FormattedMessage
+            {...messages.staffOnlyConfigGuide}
+            values={{
+              providerName,
+              supportEmail: supportEmails[providerName] ? (
+                <MailtoLink to={supportEmails[providerName]}>{supportEmails[providerName]}</MailtoLink>
+              ) : (
+                'support'
+              ),
+            }}
+          />
         </p>
-        {app.messages && app.messages.map(msg => (
-          <p key={msg}>{msg}</p>
-        ))}
-        {showLTIConfig && (
+        {(showLTIConfig && piiConfig.piiSharing) && (
           <>
-            <Form.Group controlId="consumerKey" isInvalid={isInvalidConsumerKey} className="mb-4" data-testid="ltiConfigFields">
+            <p>{intl.formatMessage(messages.formInstructions)}</p>
+            <Form.Group
+              controlId="consumerKey"
+              isInvalid={isInvalidConsumerKey}
+              className="mb-4"
+              data-testid="ltiConfigFields"
+            >
               <Form.Control
                 floatingLabel={intl.formatMessage(messages.consumerKey)}
                 onChange={handleChange}
@@ -98,7 +114,11 @@ function LtiConfigForm({
                 </Form.Control.Feedback>
               )}
             </Form.Group>
-            <Form.Group controlId="consumerSecret" isInvalid={isInvalidConsumerSecret} className="mb-4">
+            <Form.Group
+              controlId="consumerSecret"
+              isInvalid={isInvalidConsumerSecret}
+              className="mb-4"
+            >
               <Form.Control
                 floatingLabel={intl.formatMessage(messages.consumerSecret)}
                 onChange={handleChange}
@@ -126,11 +146,9 @@ function LtiConfigForm({
             </Form.Group>
           </>
         )}
-        {appConfig.piiSharing && (
-          <>
-            <Form.Text className="my-2">
-              {intl.formatMessage(messages.piiSharing)}
-            </Form.Text>
+        {(enablePIISharing) && (
+          <div data-testid="piiSharingFields">
+            <Form.Text className="my-2">{intl.formatMessage(messages.piiSharing)}</Form.Text>
             <Form.Group controlId="piiSharing">
               <Form.Check
                 type="checkbox"
@@ -149,48 +167,23 @@ function LtiConfigForm({
                 label={intl.formatMessage(messages.piiShareEmail)}
               />
             </Form.Group>
-          </>
+          </div>
         )}
       </Form>
-      <AppExternalLinks externalLinks={externalLinks} providerName={providerName} />
+      <AppExternalLinks
+        externalLinks={externalLinks}
+        providerName={providerName}
+        customClasses="small text-muted"
+      />
     </Card>
   );
-}
+};
 
 LtiConfigForm.propTypes = {
-  app: PropTypes.shape({
-    id: PropTypes.string.isRequired,
-    adminOnlyConfig: PropTypes.bool,
-    externalLinks: PropTypes.shape({
-      learnMore: PropTypes.string,
-      configuration: PropTypes.string,
-      general: PropTypes.string,
-      accessibility: PropTypes.string,
-      contactEmail: PropTypes.string,
-    }).isRequired,
-    messages: PropTypes.arrayOf(PropTypes.string),
-  }).isRequired,
-  appConfig: PropTypes.shape({
-    consumerKey: PropTypes.string,
-    consumerSecret: PropTypes.string,
-    launchUrl: PropTypes.string,
-    piiSharing: PropTypes.bool.isRequired,
-    piiShareUsername: PropTypes.bool.isRequired,
-    piiShareEmail: PropTypes.bool.isRequired,
-  }),
   intl: intlShape.isRequired,
   onSubmit: PropTypes.func.isRequired,
   // eslint-disable-next-line react/forbid-prop-types
   formRef: PropTypes.object.isRequired,
-  providerName: PropTypes.string.isRequired,
-};
-
-LtiConfigForm.defaultProps = {
-  appConfig: {
-    consumerKey: '',
-    consumerSecret: '',
-    launchUrl: '',
-  },
 };
 
 export default injectIntl(LtiConfigForm);
diff --git a/src/pages-and-resources/discussions/app-config-form/apps/lti/messages.js b/src/pages-and-resources/discussions/app-config-form/apps/lti/messages.js
index a977f287a7..462d3ed645 100644
--- a/src/pages-and-resources/discussions/app-config-form/apps/lti/messages.js
+++ b/src/pages-and-resources/discussions/app-config-form/apps/lti/messages.js
@@ -39,9 +39,13 @@ const messages = defineMessages({
     defaultMessage: 'Launch URL is a required field',
     description: 'Tells the user that the Launch URL field is required and must have a value.',
   },
-  adminOnlyConfig: {
-    id: 'authoring.discussions.adminOnlyConfig',
-    defaultMessage: '{providerName} can only be configured by {platformName} administrators. Please contact {supportEmail} to enable this feature.',
+  staffOnlyConfigInfo: {
+    id: 'authoring.discussions.stuffOnlyConfigInfo',
+    defaultMessage: 'To enable {providerName} for your course, please contact their support team at {supportEmail} to learn more about pricing and usage.',
+  },
+  staffOnlyConfigGuide: {
+    id: 'authoring.discussions.stuffOnlyConfigGuide',
+    defaultMessage: 'To fully configure {providerName} will also require sharing usernames and emails for learners and course team. Please contact your edX project coordinator to enable PII sharing for this course.',
   },
   piiSharing: {
     id: 'authoring.discussions.piiSharing',
diff --git a/src/pages-and-resources/discussions/app-config-form/apps/openedx/OpenedXConfigForm.jsx b/src/pages-and-resources/discussions/app-config-form/apps/openedx/OpenedXConfigForm.jsx
new file mode 100644
index 0000000000..f11f1b7e59
--- /dev/null
+++ b/src/pages-and-resources/discussions/app-config-form/apps/openedx/OpenedXConfigForm.jsx
@@ -0,0 +1,161 @@
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { Card, Form } from '@openedx/paragon';
+import { Formik } from 'formik';
+import PropTypes from 'prop-types';
+import React, { useState } from 'react';
+
+import { useSelector } from 'react-redux';
+import * as Yup from 'yup';
+import { useModel, useModels } from 'CourseAuthoring/generic/model-store';
+import { setupYupExtensions } from 'CourseAuthoring/utils';
+import messages from '../../messages';
+import { checkFieldErrors } from '../../utils';
+import AnonymousPostingFields from '../shared/AnonymousPostingFields';
+import AppConfigFormDivider from '../shared/AppConfigFormDivider';
+import DiscussionRestriction from '../shared/DiscussionRestriction';
+import DiscussionTopics from '../shared/discussion-topics/DiscussionTopics';
+import DivisionByGroupFields from '../shared/DivisionByGroupFields';
+import ReportedContentEmailNotifications from '../shared/ReportedContentEmailNotifications';
+import InContextDiscussionFields from '../shared/InContextDiscussionFields';
+import OpenedXConfigFormProvider from './OpenedXConfigFormProvider';
+
+setupYupExtensions();
+
+const OpenedXConfigForm = ({
+  onSubmit, formRef, intl, legacy,
+}) => {
+  const {
+    selectedAppId, enableGradedUnits, discussionTopicIds, divideDiscussionIds, postingRestrictions,
+  } = useSelector(state => state.discussions);
+  const appConfigObj = useModel('appConfigs', selectedAppId);
+  const discussionTopicsModel = useModels('discussionTopics', discussionTopicIds);
+  const legacyAppConfig = {
+    ...(appConfigObj || {}),
+    divideDiscussionIds,
+    enableInContext: true,
+    enableGradedUnits,
+    postingRestrictions,
+    unitLevelVisibility: true,
+    allowAnonymousPostsPeers: appConfigObj?.allowAnonymousPostsPeers || false,
+    reportedContentEmailNotifications: appConfigObj?.reportedContentEmailNotifications || false,
+    restrictedDates: appConfigObj?.restrictedDates || [],
+    discussionTopics: discussionTopicsModel || [],
+    divideByCohorts: appConfigObj?.divideByCohorts || false,
+    divideCourseTopicsByCohorts: appConfigObj?.divideCourseTopicsByCohorts || false,
+    groupAtSubsection: appConfigObj?.groupAtSubsection || false,
+  };
+
+  const [validDiscussionTopics, setValidDiscussionTopics] = useState(discussionTopicsModel);
+  // These fields are only used for the new provider and aren't supported for legacy.
+  const additionalFields = legacy ? {} : {
+    enabledGradedUnits: Yup.bool().default(false),
+    groupAtSubsection: Yup.bool().default(false),
+  };
+  const validationSchema = Yup.object().shape({
+    // eslint-disable-next-line react/forbid-prop-types
+    restrictedDates: Yup.array(
+      Yup.object().shape({
+        startDate: Yup.string()
+          .checkFormat(intl.formatMessage(messages.restrictedStartDateInValidFormat), 'date')
+          .required(intl.formatMessage(messages.restrictedStartDateRequired)),
+        endDate: Yup.string()
+          .checkFormat(intl.formatMessage(messages.restrictedEndDateInValidFormat), 'date')
+          .required(intl.formatMessage(messages.restrictedEndDateRequired))
+          .when('startDate', {
+            is: (startDate) => startDate,
+            then: Yup.string().compare(intl.formatMessage(messages.restrictedEndDateInPast), 'date'),
+          }),
+        startTime: Yup.string().checkFormat(
+          intl.formatMessage(messages.restrictedStartTimeInValidFormat),
+          'time',
+        ),
+        endTime: Yup.string()
+          .checkFormat(intl.formatMessage(messages.restrictedEndTimeInValidFormat), 'time')
+          .when('startTime', {
+            is: (startTime) => startTime,
+            then: Yup.string().compare(intl.formatMessage(messages.restrictedEndTimeInPast), 'time'),
+          }),
+      }),
+    ),
+    // eslint-disable-next-line react/forbid-prop-types
+    discussionTopics: Yup.array(
+      Yup.object({
+        name: Yup.string().required(intl.formatMessage(messages.discussionTopicRequired)),
+      }).uniqueObjectProperty('name', intl.formatMessage(messages.discussionTopicNameAlreadyExist)),
+    ),
+    ...additionalFields,
+  });
+
+  return (
+    <Formik
+      initialValues={legacyAppConfig}
+      validateOnChange={false}
+      validationSchema={validationSchema}
+      onSubmit={(values) => onSubmit(values)}
+    >
+      {({
+        handleSubmit, handleChange, handleBlur, values, errors, touched,
+      }) => {
+        const { discussionTopics, restrictedDates } = values;
+        const discussionTopicErrors = discussionTopics.map((value, index) => checkFieldErrors(touched, errors, `discussionTopics.${index}`, 'name'));
+        const restrictedDatesErrors = restrictedDates.map(
+          (value, index) => checkFieldErrors(touched, errors, `restrictedDates.${index}`, 'startDate')
+            || checkFieldErrors(touched, errors, `restrictedDates.${index}`, 'endDate')
+            || checkFieldErrors(touched, errors, `restrictedDates.${index}`, 'startTime')
+            || checkFieldErrors(touched, errors, `restrictedDates.${index}`, 'endTime'),
+        );
+
+        const contextValue = {
+          validDiscussionTopics,
+          setValidDiscussionTopics,
+          discussionTopicErrors,
+          postingRestrictions,
+          restrictedDatesErrors,
+          isFormInvalid:
+            discussionTopicErrors.some((error) => error)
+            || restrictedDatesErrors.some((error) => error),
+        };
+
+        return (
+          <OpenedXConfigFormProvider value={contextValue}>
+            <Card className="mb-5 px-4 px-sm-5 pb-4" data-testid="legacyConfigForm">
+              <Form ref={formRef} onSubmit={handleSubmit}>
+                <h3 className="text-primary-500 my-3">{intl.formatMessage(messages[`appName-${selectedAppId}`])}</h3>
+                <AppConfigFormDivider thick />
+                {!legacy
+                  && (
+                    <>
+                      <InContextDiscussionFields onBlur={handleBlur} onChange={handleChange} values={values} />
+                      <AppConfigFormDivider thick />
+                    </>
+                  )}
+                <AnonymousPostingFields
+                  onBlur={handleBlur}
+                  onChange={handleChange}
+                  values={values}
+                />
+                <AppConfigFormDivider thick />
+                <DiscussionTopics />
+                <AppConfigFormDivider thick />
+                <DivisionByGroupFields />
+                <AppConfigFormDivider thick />
+                <ReportedContentEmailNotifications />
+                <DiscussionRestriction />
+              </Form>
+            </Card>
+          </OpenedXConfigFormProvider>
+        );
+      }}
+    </Formik>
+  );
+};
+
+OpenedXConfigForm.propTypes = {
+  legacy: PropTypes.bool.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  // eslint-disable-next-line react/forbid-prop-types
+  formRef: PropTypes.object.isRequired,
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(OpenedXConfigForm);
diff --git a/src/pages-and-resources/discussions/app-config-form/apps/legacy/LegacyConfigForm.test.jsx b/src/pages-and-resources/discussions/app-config-form/apps/openedx/OpenedXConfigForm.test.jsx
similarity index 52%
rename from src/pages-and-resources/discussions/app-config-form/apps/legacy/LegacyConfigForm.test.jsx
rename to src/pages-and-resources/discussions/app-config-form/apps/openedx/OpenedXConfigForm.test.jsx
index d56d57b3e4..ddff4fee9b 100644
--- a/src/pages-and-resources/discussions/app-config-form/apps/legacy/LegacyConfigForm.test.jsx
+++ b/src/pages-and-resources/discussions/app-config-form/apps/openedx/OpenedXConfigForm.test.jsx
@@ -1,54 +1,63 @@
 import React, { createRef } from 'react';
+
 import {
   act,
-  render,
-  waitForElementToBeRemoved,
-  queryByText,
+  fireEvent,
+  queryAllByText,
   queryByLabelText,
+  queryByRole,
   queryByTestId,
-  fireEvent,
+  queryByText,
+  render,
+  waitForElementToBeRemoved,
 } from '@testing-library/react';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
+import userEvent from '@testing-library/user-event';
+import MockAdapter from 'axios-mock-adapter';
+
 import { initializeMockApp } from '@edx/frontend-platform';
-import { AppProvider } from '@edx/frontend-platform/react';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
-import MockAdapter from 'axios-mock-adapter';
-import userEvent from '@testing-library/user-event';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { AppProvider } from '@edx/frontend-platform/react';
 
-import { getAppsUrl } from '../../../data/api';
-import { fetchApps } from '../../../data/thunks';
 import initializeStore from '../../../../../store';
 import { executeThunk } from '../../../../../utils';
-import {
-  legacyApiResponse,
-} from '../../../factories/mockApiResponses';
-import LegacyConfigForm from './LegacyConfigForm';
-import messages from '../shared/messages';
+import { getDiscussionsProvidersUrl, getDiscussionsSettingsUrl } from '../../../data/api';
+import { fetchDiscussionSettings, fetchProviders } from '../../../data/thunks';
+import { generateProvidersApiResponse, legacyApiResponse } from '../../../factories/mockApiResponses';
+import messages from '../../messages';
+import OpenedXConfigForm from './OpenedXConfigForm';
+import { selectApp } from '../../../data/slice';
+import { DivisionSchemes } from '../../../../../data/constants';
 
 const courseId = 'course-v1:edX+TestX+Test_Course';
-const defaultAppConfig = {
+const defaultAppConfig = (divideDiscussionIds = []) => ({
   id: 'legacy',
   divideByCohorts: false,
   divideCourseTopicsByCohorts: false,
+  alwaysDivideInlineDiscussions: false,
   discussionTopics: [
-    { name: 'General', id: 'course' },
     { name: 'Edx', id: '13f106c6-6735-4e84-b097-0456cff55960' },
+    { name: 'General', id: 'course' },
   ],
-  divideDiscussionIds: [
-    'course',
-    '13f106c6-6735-4e84-b097-0456cff55960',
-  ],
+  divideDiscussionIds,
+  postingRestrictions: 'scheduled',
+  enableGradedUnits: undefined,
+  enableInContext: true,
+  groupAtSubsection: false,
+  unitLevelVisibility: true,
   allowAnonymousPosts: false,
   allowAnonymousPostsPeers: false,
+  reportedContentEmailNotifications: false,
   allowDivisionByUnit: false,
-  blackoutDates: '[]',
-};
-describe('LegacyConfigForm', () => {
+  restrictedDates: [],
+  cohortsEnabled: false,
+});
+describe('OpenedXConfigForm', () => {
   let axiosMock;
   let store;
   let container;
 
-  beforeEach(() => {
+  beforeEach(async () => {
     initializeMockApp({
       authenticatedUser: {
         userId: 3,
@@ -57,7 +66,6 @@ describe('LegacyConfigForm', () => {
         roles: [],
       },
     });
-
     axiosMock = new MockAdapter(getAuthenticatedHttpClient());
     store = initializeStore();
   });
@@ -66,15 +74,14 @@ describe('LegacyConfigForm', () => {
     axiosMock.reset();
   });
 
-  const createComponent = (appConfig, onSubmit = jest.fn(), formRef = createRef()) => {
+  const createComponent = (onSubmit = jest.fn(), formRef = createRef(), legacy = true) => {
     const wrapper = render(
       <AppProvider store={store}>
         <IntlProvider locale="en">
-          <LegacyConfigForm
-            title="Test Legacy edX Discussions"
-            appConfig={appConfig}
+          <OpenedXConfigForm
             onSubmit={onSubmit}
             formRef={formRef}
+            legacy={legacy}
           />
         </IntlProvider>
       </AppProvider>,
@@ -84,15 +91,25 @@ describe('LegacyConfigForm', () => {
   };
 
   const mockStore = async (mockResponse) => {
-    axiosMock.onGet(getAppsUrl(courseId)).reply(200, mockResponse);
-    await executeThunk(fetchApps(courseId), store.dispatch);
+    axiosMock.onGet(getDiscussionsProvidersUrl(courseId)).reply(200, generateProvidersApiResponse());
+    axiosMock.onGet(getDiscussionsSettingsUrl(courseId)).reply(200, mockResponse);
+    await executeThunk(fetchProviders(courseId), store.dispatch);
+    await executeThunk(fetchDiscussionSettings(courseId), store.dispatch);
+    store.dispatch(selectApp({ appId: 'legacy' }));
   };
 
   test('title rendering', async () => {
     await mockStore(legacyApiResponse);
-    createComponent(defaultAppConfig);
+    createComponent();
+    expect(container.querySelector('h3')).toHaveTextContent('edX');
+  });
 
-    expect(container.querySelector('h3')).toHaveTextContent('Test Legacy edX Discussions');
+  test('new Open edX provider config', async () => {
+    await mockStore({ ...legacyApiResponse, enable_in_context: true });
+    createComponent(jest.fn(), createRef(), false);
+    expect(queryByText(container, messages.visibilityInContext.defaultMessage)).toBeInTheDocument();
+    expect(queryByText(container, messages.gradedUnitPagesLabel.defaultMessage)).toBeInTheDocument();
+    expect(queryByText(container, messages.groupInContextSubsectionLabel.defaultMessage)).toBeInTheDocument();
   });
 
   test('calls onSubmit when the formRef is submitted', async () => {
@@ -100,10 +117,7 @@ describe('LegacyConfigForm', () => {
     const handleSubmit = jest.fn();
 
     await mockStore(legacyApiResponse);
-    createComponent({
-      ...defaultAppConfig,
-      divideByCohorts: true,
-    }, handleSubmit, formRef);
+    createComponent(handleSubmit, formRef);
 
     await act(async () => {
       formRef.current.submit();
@@ -114,97 +128,118 @@ describe('LegacyConfigForm', () => {
       // any of the form inputs, this exact object shape is returned back to us, so we're reusing
       // it here.  It's not supposed to be 'the same object', it just happens to be.
       {
-        ...defaultAppConfig,
-        divideByCohorts: true,
+        ...defaultAppConfig(),
+        divideByCohorts: false,
+        divisionScheme: DivisionSchemes.COHORT,
       },
     );
   });
 
   test('default field states are correct, including removal of folded sub-fields', async () => {
-    await mockStore(legacyApiResponse);
-    createComponent(defaultAppConfig);
+    await mockStore({
+      ...legacyApiResponse,
+      plugin_configuration: {
+        ...legacyApiResponse.plugin_configuration,
+        divided_course_wide_discussions: [],
+        available_division_schemes: [],
+      },
+    });
+    createComponent();
+    const { divideDiscussionIds } = defaultAppConfig(['13f106c6-6735-4e84-b097-0456cff55960', 'course']);
 
     // DivisionByGroupFields
+
+    expect(container.querySelector('#alert')).toBeInTheDocument();
     expect(container.querySelector('#divideByCohorts')).toBeInTheDocument();
-    expect(container.querySelector('#divideByCohorts')).not.toBeChecked();
-    expect(
-      container.querySelector('#divideCourseTopicsByCohorts'),
-    ).not.toBeInTheDocument();
+    expect(container.querySelector('#divideByCohorts')).toBeDisabled();
+    expect(container.querySelector('#divideCourseTopicsByCohorts')).not.toBeInTheDocument();
 
-    defaultAppConfig.divideDiscussionIds.forEach(id => expect(
+    divideDiscussionIds.forEach(id => expect(
       container.querySelector(`#checkbox-${id}`),
     ).not.toBeInTheDocument());
 
     // AnonymousPostingFields
-    expect(container.querySelector('#allowAnonymousPosts')).toBeInTheDocument();
-    expect(container.querySelector('#allowAnonymousPosts')).not.toBeChecked();
     expect(
       container.querySelector('#allowAnonymousPostsPeers'),
-    ).not.toBeInTheDocument();
+    ).toBeInTheDocument();
+    expect(container.querySelector('#allowAnonymousPostsPeers')).not.toBeChecked();
+
+    // ReportedContentEmailNotifications
+    expect(container.querySelector('#reportedContentEmailNotifications')).toBeInTheDocument();
+    expect(container.querySelector('#reportedContentEmailNotifications')).not.toBeChecked();
 
-    // BlackoutDatesField
-    expect(container.querySelector('#blackoutDates')).toBeInTheDocument();
-    expect(container.querySelector('#blackoutDates')).toHaveValue('[]');
+    // Discussion Restriction Field
+    expect(queryByText(container, messages.discussionRestrictionLabel.defaultMessage)).toBeInTheDocument();
   });
 
   test('folded sub-fields are in the DOM when parents are enabled', async () => {
-    await mockStore(legacyApiResponse);
-    createComponent({
-      ...defaultAppConfig,
-      divideByCohorts: true,
-      allowAnonymousPosts: true,
+    await mockStore({
+      ...legacyApiResponse,
+      plugin_configuration: {
+        ...legacyApiResponse.plugin_configuration,
+        allow_anonymous: true,
+        reported_content_email_notifications: true,
+        always_divide_inline_discussions: true,
+        divided_course_wide_discussions: [],
+        available_division_schemes: ['cohorts'],
+      },
     });
+    createComponent();
+    const { divideDiscussionIds } = defaultAppConfig(['13f106c6-6735-4e84-b097-0456cff55960', 'course']);
 
     // DivisionByGroupFields
     expect(container.querySelector('#divideByCohorts')).toBeInTheDocument();
-    expect(container.querySelector('#divideByCohorts')).toBeChecked();
-    expect(
-      container.querySelector('#divideCourseTopicsByCohorts'),
-    ).toBeInTheDocument();
+    expect(container.querySelector('#divideByCohorts')).not.toBeChecked();
     expect(
       container.querySelector('#divideCourseTopicsByCohorts'),
-    ).not.toBeChecked();
-
-    defaultAppConfig.divideDiscussionIds.forEach(id => expect(
+    ).not.toBeInTheDocument();
+    divideDiscussionIds.forEach(id => expect(
       container.querySelector(`#checkbox-${id}`),
     ).not.toBeInTheDocument());
 
     // AnonymousPostingFields
-    expect(container.querySelector('#allowAnonymousPosts')).toBeInTheDocument();
-    expect(container.querySelector('#allowAnonymousPosts')).toBeChecked();
     expect(
       container.querySelector('#allowAnonymousPostsPeers'),
     ).toBeInTheDocument();
     expect(
       container.querySelector('#allowAnonymousPostsPeers'),
     ).not.toBeChecked();
+
+    // ReportedContentEmailNotifications
+    expect(container.querySelector('#reportedContentEmailNotifications')).toBeInTheDocument();
+    expect(container.querySelector('#reportedContentEmailNotifications')).toBeChecked();
   });
 
-  test('folded discussion topics are in the DOM when divideByCohorts and divideCourseWideTopics are enabled',
+  test(
+    'folded discussion topics are in the DOM when divideByCohorts and divideCourseWideTopics are enabled',
     async () => {
-      await mockStore(legacyApiResponse);
-      createComponent({
-        ...defaultAppConfig,
-        divideByCohorts: true,
-        divideCourseTopicsByCohorts: true,
+      await mockStore({
+        ...legacyApiResponse,
+        plugin_configuration: {
+          ...legacyApiResponse.plugin_configuration,
+          allow_anonymous: true,
+          reported_content_email_notifications: true,
+          always_divide_inline_discussions: true,
+          divided_course_wide_discussions: ['13f106c6-6735-4e84-b097-0456cff55960', 'course'],
+        },
       });
+      createComponent();
+      const { divideDiscussionIds } = defaultAppConfig(['13f106c6-6735-4e84-b097-0456cff55960', 'course']);
 
       // DivisionByGroupFields
       expect(container.querySelector('#divideByCohorts')).toBeInTheDocument();
-      expect(container.querySelector('#divideByCohorts')).toBeChecked();
-      expect(container.querySelector('#divideCourseTopicsByCohorts')).toBeInTheDocument();
-      expect(container.querySelector('#divideCourseTopicsByCohorts')).toBeChecked();
-
-      defaultAppConfig.divideDiscussionIds.forEach(id => {
-        expect(container.querySelector(`#checkbox-${id}`)).toBeInTheDocument();
-        expect(container.querySelector(`#checkbox-${id}`)).toBeChecked();
+      expect(container.querySelector('#divideByCohorts')).not.toBeChecked();
+      expect(container.querySelector('#divideCourseTopicsByCohorts')).not.toBeInTheDocument();
+      divideDiscussionIds.forEach(id => {
+        expect(container.querySelector(`#checkbox-${id}`)).not.toBeInTheDocument();
       });
-    });
+    },
+  );
 
   const updateTopicName = async (topicId, topicName) => {
     const topicCard = queryByTestId(container, topicId);
 
-    userEvent.click(queryByLabelText(topicCard, 'Expand'));
+    await act(async () => { userEvent.click(queryByLabelText(topicCard, 'Expand')); });
     const topicInput = topicCard.querySelector('input');
     topicInput.focus();
     await act(async () => { fireEvent.change(topicInput, { target: { value: topicName } }); });
@@ -218,10 +253,7 @@ describe('LegacyConfigForm', () => {
     if (expectExists) { expect(error).toBeInTheDocument(); } else { expect(error).not.toBeInTheDocument(); }
   };
 
-  const assertDuplicateTopicNameValidation = async (topicCard, waitForBlur = true, expectExists = true) => {
-    if (waitForBlur) {
-      await waitForElementToBeRemoved(queryByText(topicCard, messages.addTopicHelpText.defaultMessage));
-    }
+  const assertDuplicateTopicNameValidation = async (topicCard, expectExists = true) => {
     const error = queryByText(topicCard, messages.discussionTopicNameAlreadyExist.defaultMessage);
     if (expectExists) { expect(error).toBeInTheDocument(); } else { expect(error).not.toBeInTheDocument(); }
   };
@@ -230,24 +262,26 @@ describe('LegacyConfigForm', () => {
     expect(store.getState().discussions.hasValidationError).toBe(expectExists);
   };
 
-  test('show required error on field when leaving empty topic name',
+  test(
+    'show required error on field when leaving empty topic name',
     async () => {
       await mockStore(legacyApiResponse);
-      createComponent(defaultAppConfig);
+      createComponent();
 
       const topicCard = await updateTopicName('13f106c6-6735-4e84-b097-0456cff55960', '');
       await waitForElementToBeRemoved(queryByText(topicCard, messages.addTopicHelpText.defaultMessage));
       assertTopicNameRequiredValidation(topicCard);
       assertHasErrorValidation();
-    });
+    },
+  );
 
   test('check field is not collapsible in case of error', async () => {
     await mockStore(legacyApiResponse);
-    createComponent(defaultAppConfig);
+    createComponent();
 
     const topicCard = await updateTopicName('13f106c6-6735-4e84-b097-0456cff55960', '');
-    const collapseButton = topicCard.querySelector('button[aria-label="Collapse"]');
-    userEvent.click(collapseButton);
+    const collapseButton = queryByLabelText(topicCard, 'Collapse');
+    await act(async () => userEvent.click(collapseButton));
 
     expect(collapseButton).toBeInTheDocument();
   });
@@ -258,7 +292,7 @@ describe('LegacyConfigForm', () => {
 
     beforeEach(async () => {
       await mockStore(legacyApiResponse);
-      createComponent(defaultAppConfig);
+      createComponent();
 
       topicCard = await updateTopicName('course', 'edx');
       duplicateTopicCard = await updateTopicName('13f106c6-6735-4e84-b097-0456cff55960', 'EDX');
@@ -272,30 +306,36 @@ describe('LegacyConfigForm', () => {
 
     test('check duplicate error is removed on fields when name is fixed', async () => {
       const duplicateTopicInput = duplicateTopicCard.querySelector('input');
-
       duplicateTopicInput.focus();
-      userEvent.type(duplicateTopicInput, 'valid');
+      await act(async () => { userEvent.type(duplicateTopicInput, 'valid'); });
       duplicateTopicInput.blur();
 
       await waitForElementToBeRemoved(
-        queryByText(duplicateTopicCard, messages.discussionTopicNameAlreadyExist.defaultMessage),
+        queryAllByText(topicCard, messages.discussionTopicNameAlreadyExist.defaultMessage),
       );
-      await assertDuplicateTopicNameValidation(duplicateTopicCard, false, false);
-      await assertDuplicateTopicNameValidation(topicCard, false, false);
+
+      await assertDuplicateTopicNameValidation(duplicateTopicCard, false);
+      await assertDuplicateTopicNameValidation(topicCard, false);
       assertHasErrorValidation(false);
     });
 
     test('check duplicate error is removed on deleting duplicate topic', async () => {
-      userEvent.click(
-        queryByLabelText(duplicateTopicCard, messages.deleteAltText.defaultMessage, { selector: 'button' }),
-      );
-      userEvent.click(
-        queryByText(container, messages.deleteButton.defaultMessage, { selector: 'button' }),
-      );
+      await act(async () => {
+        userEvent.click(
+          queryByLabelText(duplicateTopicCard, messages.deleteAltText.defaultMessage, { selector: 'button' }),
+        );
+      });
+
+      await act(async () => {
+        userEvent.click(
+          queryByRole(container, 'button', { name: messages.deleteButton.defaultMessage }),
+        );
+      });
+
       await waitForElementToBeRemoved(queryByText(topicCard, messages.discussionTopicNameAlreadyExist.defaultMessage));
 
       expect(duplicateTopicCard).not.toBeInTheDocument();
-      await assertDuplicateTopicNameValidation(topicCard, false, false);
+      await assertDuplicateTopicNameValidation(topicCard, false);
       assertHasErrorValidation(false);
     });
   });
diff --git a/src/pages-and-resources/discussions/app-config-form/apps/legacy/LegacyConfigFormProvider.jsx b/src/pages-and-resources/discussions/app-config-form/apps/openedx/OpenedXConfigFormProvider.jsx
similarity index 73%
rename from src/pages-and-resources/discussions/app-config-form/apps/legacy/LegacyConfigFormProvider.jsx
rename to src/pages-and-resources/discussions/app-config-form/apps/openedx/OpenedXConfigFormProvider.jsx
index 2d0fcd66e7..2d06271e8e 100644
--- a/src/pages-and-resources/discussions/app-config-form/apps/legacy/LegacyConfigFormProvider.jsx
+++ b/src/pages-and-resources/discussions/app-config-form/apps/openedx/OpenedXConfigFormProvider.jsx
@@ -3,9 +3,9 @@ import PropTypes from 'prop-types';
 import { useDispatch } from 'react-redux';
 import { updateValidationStatus } from '../../../data/slice';
 
-export const LegacyConfigFormContext = createContext({});
+export const OpenedXConfigFormContext = createContext({});
 
-export default function LegacyConfigFormProvider({ children, value }) {
+const OpenedXConfigFormProvider = ({ children, value }) => {
   const dispatch = useDispatch();
 
   useEffect(() => {
@@ -13,13 +13,13 @@ export default function LegacyConfigFormProvider({ children, value }) {
   }, [value.isFormInvalid]);
 
   return (
-    <LegacyConfigFormContext.Provider value={value}>
+    <OpenedXConfigFormContext.Provider value={value}>
       {children}
-    </LegacyConfigFormContext.Provider>
+    </OpenedXConfigFormContext.Provider>
   );
-}
+};
 
-LegacyConfigFormProvider.propTypes = {
+OpenedXConfigFormProvider.propTypes = {
   children: PropTypes.node.isRequired,
   value: PropTypes.shape({
     discussionTopicErrors: PropTypes.arrayOf(PropTypes.bool),
@@ -33,3 +33,5 @@ LegacyConfigFormProvider.propTypes = {
     isFormInvalid: PropTypes.bool,
   }).isRequired,
 };
+
+export default OpenedXConfigFormProvider;
diff --git a/src/pages-and-resources/discussions/app-config-form/apps/openedx/index.js b/src/pages-and-resources/discussions/app-config-form/apps/openedx/index.js
new file mode 100644
index 0000000000..d0140aae7a
--- /dev/null
+++ b/src/pages-and-resources/discussions/app-config-form/apps/openedx/index.js
@@ -0,0 +1 @@
+export { default } from './OpenedXConfigForm';
diff --git a/src/pages-and-resources/discussions/app-config-form/apps/shared/AnonymousPostingFields.jsx b/src/pages-and-resources/discussions/app-config-form/apps/shared/AnonymousPostingFields.jsx
index 95a006b46c..2518b14271 100644
--- a/src/pages-and-resources/discussions/app-config-form/apps/shared/AnonymousPostingFields.jsx
+++ b/src/pages-and-resources/discussions/app-config-form/apps/shared/AnonymousPostingFields.jsx
@@ -1,54 +1,35 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { TransitionReplace } from '@edx/paragon';
 import FormSwitchGroup from '../../../../../generic/FormSwitchGroup';
-import messages from './messages';
+import messages from '../../messages';
 import AppConfigFormDivider from './AppConfigFormDivider';
 
-function AnonymousPostingFields({
+const AnonymousPostingFields = ({
   onBlur,
   onChange,
   intl,
   values,
-}) {
-  return (
-    <>
-      <h5 className="mt-4 text-gray-500">{intl.formatMessage(messages.anonymousPosting)}</h5>
-      <FormSwitchGroup
-        onChange={onChange}
-        onBlur={onBlur}
-        id="allowAnonymousPosts"
-        checked={values.allowAnonymousPosts}
-        label={intl.formatMessage(messages.allowAnonymousPostsLabel)}
-        helpText={intl.formatMessage(messages.allowAnonymousPostsHelp)}
-      />
-      <TransitionReplace>
-        {values.allowAnonymousPosts ? (
-          <React.Fragment key="open">
-            <AppConfigFormDivider />
-            <FormSwitchGroup
-              onChange={onChange}
-              onBlur={onBlur}
-              className="ml-4"
-              id="allowAnonymousPostsPeers"
-              checked={values.allowAnonymousPostsPeers}
-              label={intl.formatMessage(messages.allowAnonymousPostsPeersLabel)}
-              helpText={intl.formatMessage(messages.allowAnonymousPostsPeersHelp)}
-            />
-          </React.Fragment>
-        ) : <React.Fragment key="closed" />}
-      </TransitionReplace>
-    </>
-  );
-}
+}) => (
+  <>
+    <h5 className="mt-4 text-gray-500">{intl.formatMessage(messages.anonymousPosting)}</h5>
+    <AppConfigFormDivider />
+    <FormSwitchGroup
+      onChange={onChange}
+      onBlur={onBlur}
+      id="allowAnonymousPostsPeers"
+      checked={values.allowAnonymousPostsPeers}
+      label={intl.formatMessage(messages.allowAnonymousPostsPeersLabel)}
+      helpText={intl.formatMessage(messages.allowAnonymousPostsPeersHelp)}
+    />
+  </>
+);
 
 AnonymousPostingFields.propTypes = {
   onBlur: PropTypes.func.isRequired,
   onChange: PropTypes.func.isRequired,
   intl: intlShape.isRequired,
   values: PropTypes.shape({
-    allowAnonymousPosts: PropTypes.bool,
     allowAnonymousPostsPeers: PropTypes.bool,
   }).isRequired,
 };
diff --git a/src/pages-and-resources/discussions/app-config-form/apps/shared/AppConfigFormDivider.jsx b/src/pages-and-resources/discussions/app-config-form/apps/shared/AppConfigFormDivider.jsx
index 76ae61a05d..fc92d8b286 100644
--- a/src/pages-and-resources/discussions/app-config-form/apps/shared/AppConfigFormDivider.jsx
+++ b/src/pages-and-resources/discussions/app-config-form/apps/shared/AppConfigFormDivider.jsx
@@ -2,22 +2,20 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 
-export default function AppConfigFormDivider({ thick, marginAdj }) {
-  return (
-    <hr
-      className={classNames(
-        'my-2 mx-n4 border-light-300',
-        {
-          [`mx-sm-n${marginAdj.sm}`]: marginAdj.sm !== null,
-          [`mx-n${marginAdj.default}`]: marginAdj.default !== null,
-        },
-      )}
-      style={{
-        borderTopWidth: thick ? '3px' : '1px',
-      }}
-    />
-  );
-}
+const AppConfigFormDivider = ({ thick, marginAdj }) => (
+  <hr
+    className={classNames(
+      'my-2 mx-n4 border-light-300',
+      {
+        [`mx-sm-n${marginAdj.sm}`]: marginAdj.sm !== null,
+        [`mx-n${marginAdj.default}`]: marginAdj.default !== null,
+      },
+    )}
+    style={{
+      borderTopWidth: thick ? '3px' : '1px',
+    }}
+  />
+);
 
 AppConfigFormDivider.propTypes = {
   thick: PropTypes.bool,
@@ -34,3 +32,5 @@ AppConfigFormDivider.defaultProps = {
     sm: 5,
   },
 };
+
+export default AppConfigFormDivider;
diff --git a/src/pages-and-resources/discussions/app-config-form/apps/shared/AppExternalLinks.jsx b/src/pages-and-resources/discussions/app-config-form/apps/shared/AppExternalLinks.jsx
index 2074a84207..4cf92fd1f9 100644
--- a/src/pages-and-resources/discussions/app-config-form/apps/shared/AppExternalLinks.jsx
+++ b/src/pages-and-resources/discussions/app-config-form/apps/shared/AppExternalLinks.jsx
@@ -3,17 +3,19 @@ import PropTypes from 'prop-types';
 import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import {
   Hyperlink, MailtoLink,
-} from '@edx/paragon';
+} from '@openedx/paragon';
 
 import AppConfigFormDivider from './AppConfigFormDivider';
 
 import messages from '../lti/messages';
 
-function AppExternalLinks({
+const AppExternalLinks = ({
   externalLinks,
   intl,
   providerName,
-}) {
+  showLaunchIcon,
+  customClasses,
+}) => {
   const { contactEmail, ...links } = externalLinks;
   const linkTypes = Object.keys(links).filter(key => links[key]);
   return (
@@ -24,12 +26,13 @@ function AppExternalLinks({
             <AppConfigFormDivider />
             <h4 className="pt-4">{intl.formatMessage(messages.linkTextHeading)}</h4>
             {linkTypes.map((type) => (
-              <div key={type} className="small text-muted">
+              <div key={type}>
                 <Hyperlink
                   destination={externalLinks[type]}
                   target="_blank"
                   rel="noopener noreferrer"
-                  showLaunchIcon={false}
+                  showLaunchIcon={showLaunchIcon}
+                  className={customClasses}
                 >
                   { intl.formatMessage(messages[type], { providerName }) }
                 </Hyperlink>
@@ -38,7 +41,7 @@ function AppExternalLinks({
           </>
         ) : null}
       {contactEmail && (
-        <div className="small text-muted">
+        <div className={customClasses}>
           <hr />
           <FormattedMessage
             {...messages.contact}
@@ -48,7 +51,7 @@ function AppExternalLinks({
                   to={contactEmail}
                   rel="noopener noreferrer"
                 >
-                  { contactEmail }
+                  <span className={customClasses}>{ contactEmail }</span>
                 </MailtoLink>
               ),
             }}
@@ -57,7 +60,7 @@ function AppExternalLinks({
       )}
     </div>
   );
-}
+};
 
 AppExternalLinks.propTypes = {
   externalLinks: PropTypes.shape({
@@ -69,6 +72,13 @@ AppExternalLinks.propTypes = {
   }).isRequired,
   providerName: PropTypes.string.isRequired,
   intl: intlShape.isRequired,
+  showLaunchIcon: PropTypes.bool,
+  customClasses: PropTypes.string,
+};
+
+AppExternalLinks.defaultProps = {
+  showLaunchIcon: false,
+  customClasses: '',
 };
 
 export default injectIntl(AppExternalLinks);
diff --git a/src/pages-and-resources/discussions/app-config-form/apps/shared/BlackoutDatesField.jsx b/src/pages-and-resources/discussions/app-config-form/apps/shared/BlackoutDatesField.jsx
deleted file mode 100644
index b18e161411..0000000000
--- a/src/pages-and-resources/discussions/app-config-form/apps/shared/BlackoutDatesField.jsx
+++ /dev/null
@@ -1,124 +0,0 @@
-import React, { useState } from 'react';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Form, TransitionReplace } from '@edx/paragon';
-import { useFormikContext } from 'formik';
-import messages from './messages';
-
-/**
- * Lets break this regex down.
- *
- * The goal is to accept arrays of dates like the following:
- *
- * [["2015-09-15", "2015-09-21"], ["2015-10-01T11:45", "2015-10-08"]]
- *
- * Any date can be YYYY-MM-DDTHH:MM or just YYYY-MM-DD like the above.
- * The hours and minutes are optional, as illustrated.
- *
- * The regex errs on the side of being too loose, so you'll see things that are not perfect.  It's
- * better to be too liberal than to accidentally reject something that should be fine.
- *
- * So let multi-line this regex and explain the parts:
- *
- * Beginning of the string:
- *     ^
- * The outer square brackets:
- *     \[
- * Start of a group for a pair of dates with their square brackets:
- *     (\[
- * A group for the first date (YYYY-MM-DDTHH:MM) with its opening double quote:
- *     ("
- * Any four digits for the YYYY year, and a dash:
- *     [0-9]{4}-
- * MM Months 00 - 12 with either a 0 followed by a digit, 1-9, OR a 1 followed by a digit 0-2
- * Then a dash:
- *     (0[1-9]|1[0-2])-
- * Finally, for days, accepts any digit 0-3 followed by any digit 0-9.  Not a very exact regex.
- *     [0-3][0-9]
- * A sub-group for the hours and minutes.  T is just part of it:
- *     (T
- * The hours HH are a 0 or 1 followed by 0-9, OR a 2 followed by 0-3.  Captures digits 00-23:
- *     ([0-1][0-9]|2[0-3])
- * Then a colon!
- *     :
- * The minutes MM are any digit 0-5 followed by any digit 0-9, capturing 00-59:
- *     ([0-5][0-9])
- * The THH:MM is optional, so end the group by allowing it to repeat 0 or 1 times
- *     ){0,1}
- * Now end the first date group with its closing double quote, the group parenthesis, and a comma.
- * The comma is a necessary separator between the first and second dates:
- *     "),
- * Now start the second date of the pair:
- *     ("
- * The second date is identical to the first, so here it is in all its glory:
- *     [0-9]{4}-(0[1-9]|1[0-2])-[0-3][0-9] // YYYY-MM-DD, identical to above
- *     (T([0-1][0-9]|2[0-3]):([0-5][0-9])){0,1}  // THH:MM, identical to above
- * Close out the second date with its closing double quotes:
- *     ")
- * Close out the pair of dates with its closing square bracket:
- *     \]
- * An optional comma after the pair of dates, in case there's another pair.  If there isn't another
- * date, there shouldn't be another comma, but this regex errors on the side of looseness.
- *     (,){0,1}
- * This entire group, ["YYYY-MM-DDTHH:MM", "YYYY-MM-DDTHH:MM"], can be repeated zero or more times.
- *     )*
- * Close out the last square bracket around all the groups:
- *    \]
- * End of string:
- *    $
- */
-export const blackoutDatesRegex = /^\[(\[("[0-9]{4}-(0[1-9]|1[0-2])-[0-3][0-9](T([0-1][0-9]|2[0-3]):([0-5][0-9])){0,1}"),("[0-9]{4}-(0[1-9]|1[0-2])-[0-3][0-9](T([0-1][0-9]|2[0-3]):([0-5][0-9])){0,1}")\](,){0,1})*\]$/;
-
-const BlackoutDatesField = ({ intl }) => {
-  const [inFocus, setInFocus] = useState(false);
-  const {
-    handleChange, handleBlur, errors,
-    touched, values: appConfig,
-  } = useFormikContext();
-
-  const hasError = Boolean(touched.blackoutDates && errors.blackoutDates);
-
-  const handleFocusOut = (event) => {
-    handleBlur(event);
-    setInFocus(false);
-  };
-
-  return (
-    <>
-      <h5 className="my-4 text-gray-500">{intl.formatMessage(messages.blackoutDates)}</h5>
-      <Form.Group
-        controlId="blackoutDates"
-        isInvalid={hasError && !inFocus}
-        className="m-2"
-      >
-        <Form.Control
-          value={appConfig.blackoutDates}
-          onChange={handleChange}
-          onBlur={(event) => handleFocusOut(event)}
-          className="mb-1"
-          floatingLabel={intl.formatMessage(messages.blackoutDatesLabel)}
-          onFocus={() => setInFocus(true)}
-        />
-        <TransitionReplace key="blackoutDates">
-          {hasError && !inFocus ? (
-            <React.Fragment key="open">
-              <Form.Control.Feedback type="invalid" hasIcon={false}>
-                <div className="small">{errors.blackoutDates}</div>
-              </Form.Control.Feedback>
-            </React.Fragment>
-          ) : (
-            <React.Fragment key="closed" />
-          )}
-        </TransitionReplace>
-        <Form.Text muted className="mt-3">
-          {intl.formatMessage(messages.blackoutDatesHelp)}
-        </Form.Text>
-      </Form.Group>
-    </>
-  );
-};
-
-BlackoutDatesField.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(BlackoutDatesField);
diff --git a/src/pages-and-resources/discussions/app-config-form/apps/shared/DiscussionRestriction.jsx b/src/pages-and-resources/discussions/app-config-form/apps/shared/DiscussionRestriction.jsx
new file mode 100644
index 0000000000..3fbee41c10
--- /dev/null
+++ b/src/pages-and-resources/discussions/app-config-form/apps/shared/DiscussionRestriction.jsx
@@ -0,0 +1,90 @@
+import React, { useCallback, useState, useMemo } from 'react';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Button, ButtonGroup } from '@openedx/paragon';
+import classNames from 'classnames';
+
+import { useFormikContext } from 'formik';
+import ConfirmationPopup from '../../../../../generic/ConfirmationPopup';
+
+import messages from '../../messages';
+import { discussionRestrictionOptions, discussionRestriction } from '../../../data/constants';
+import RestrictionSchedules from './discussion-restrictions/RestrictionSchedules';
+
+const DiscussionRestriction = () => {
+  const intl = useIntl();
+  const {
+    values: appConfig,
+    setFieldValue,
+  } = useFormikContext();
+
+  const { postingRestrictions } = appConfig;
+  const [selectedRestrictionOption, setSelectedRestrictionOption] = useState(postingRestrictions);
+
+  const handleClick = useCallback((value) => {
+    setSelectedRestrictionOption(value);
+
+    if (value !== discussionRestriction.ENABLED) {
+      setFieldValue('postingRestrictions', value);
+    }
+  }, []);
+
+  const handleConfirmation = useCallback(() => {
+    setSelectedRestrictionOption(discussionRestriction.ENABLED);
+    setFieldValue('postingRestrictions', discussionRestriction.ENABLED);
+  }, []);
+
+  const handleCancel = useCallback(() => {
+    setSelectedRestrictionOption(postingRestrictions);
+  }, [postingRestrictions]);
+
+  const discussionRestrictionButtons = useMemo(() => discussionRestrictionOptions.map((restriction) => (
+    <Button
+      key={`restriction-${restriction.value}`}
+      data-testid={restriction.value}
+      variant="plain"
+      className={classNames('w-100 font-size-14 font-weight-500 line-height-20 py-7px border-light-400 unselected-button', {
+        'text-white bg-primary-500 selected-button': selectedRestrictionOption === restriction.value,
+      })}
+      onClick={() => handleClick(restriction.value)}
+    >
+      {restriction.label}
+    </Button>
+  )), [selectedRestrictionOption]);
+
+  const selectedRestrictionMessage = useMemo(() => (
+    discussionRestrictionOptions.find(option => option.value === selectedRestrictionOption).message
+  ), [selectedRestrictionOption]);
+
+  return (
+    <div className="discussion-restriction">
+      <h5 className="text-gray-500 mt-4 mb-3 line-height-20">
+        {intl.formatMessage(messages.discussionRestrictionLabel)}
+      </h5>
+      <ButtonGroup className="mb-2 w-100" toggle size="sm">
+        {discussionRestrictionButtons}
+      </ButtonGroup>
+      <div className="small text-muted font-size-14 height-24">
+        {intl.formatMessage(selectedRestrictionMessage)}
+      </div>
+      {(postingRestrictions !== discussionRestriction.ENABLED
+        && selectedRestrictionOption === discussionRestriction.ENABLED
+      ) && (
+        <ConfirmationPopup
+          label={intl.formatMessage(messages.enableRestrictedDatesConfirmationLabel)}
+          bodyText={intl.formatMessage(messages.enableRestrictedDatesConfirmationHelp)}
+          onCancel={handleCancel}
+          onConfirm={handleConfirmation}
+          confirmLabel={intl.formatMessage(messages.ok)}
+          cancelLabel={intl.formatMessage(messages.cancelButton)}
+          confirmVariant="plain"
+          confirmButtonClass="bg-primary-500 text-white rounded-0 action-btn"
+          cancelButtonClass="rounded-0 action-btn w-92"
+          sectionClasses="card-body-section"
+        />
+      )}
+      {selectedRestrictionOption === discussionRestriction.SCHEDULED && <RestrictionSchedules />}
+    </div>
+  );
+};
+
+export default React.memo(DiscussionRestriction);
diff --git a/src/pages-and-resources/discussions/app-config-form/apps/shared/DiscussionRestriction.test.jsx b/src/pages-and-resources/discussions/app-config-form/apps/shared/DiscussionRestriction.test.jsx
new file mode 100644
index 0000000000..86a09f1e2d
--- /dev/null
+++ b/src/pages-and-resources/discussions/app-config-form/apps/shared/DiscussionRestriction.test.jsx
@@ -0,0 +1,195 @@
+import React, { createRef } from 'react';
+
+import {
+  act, fireEvent, render, screen, waitFor, within,
+} from '@testing-library/react';
+import MockAdapter from 'axios-mock-adapter';
+import { AppProvider } from '@edx/frontend-platform/react';
+
+import { initializeMockApp } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import initializeStore from '../../../../../store';
+import { executeThunk } from '../../../../../utils';
+import { getDiscussionsProvidersUrl, getDiscussionsSettingsUrl } from '../../../data/api';
+import { fetchDiscussionSettings, fetchProviders } from '../../../data/thunks';
+import { generateProvidersApiResponse, legacyApiResponse } from '../../../factories/mockApiResponses';
+import OpenedXConfigForm from '../openedx/OpenedXConfigForm';
+import { selectApp } from '../../../data/slice';
+
+const courseId = 'course-v1:edX+TestX+Test_Course';
+
+describe('Discussion Restriction', () => {
+  let axiosMock;
+  let store;
+  let container;
+
+  beforeEach(async () => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+    store = initializeStore();
+  });
+
+  afterEach(() => {
+    axiosMock.reset();
+  });
+
+  const renderComponent = (onSubmit = jest.fn(), formRef = createRef(), legacy = true) => {
+    const wrapper = render(
+      <AppProvider store={store}>
+        <IntlProvider locale="en">
+          <OpenedXConfigForm
+            onSubmit={onSubmit}
+            formRef={formRef}
+            legacy={legacy}
+          />
+        </IntlProvider>
+      </AppProvider>,
+    );
+    container = wrapper.container;
+    return container;
+  };
+
+  const mockStore = async (mockResponse) => {
+    axiosMock.onGet(getDiscussionsProvidersUrl(courseId)).reply(200, generateProvidersApiResponse());
+    axiosMock.onGet(getDiscussionsSettingsUrl(courseId)).reply(200, mockResponse);
+    await executeThunk(fetchProviders(courseId), store.dispatch);
+    await executeThunk(fetchDiscussionSettings(courseId), store.dispatch);
+    store.dispatch(selectApp({ appId: 'legacy' }));
+  };
+
+  it(
+    'Successfully displayed three types (OFF, ON and SCHEDULED) for discussion restriction and selected OFF bydefault',
+    async () => {
+      const mockData = legacyApiResponse;
+      mockData.posting_restrictions = 'disabled';
+
+      await mockStore(mockData);
+      renderComponent();
+
+      expect(screen.queryByTestId('disabled')).toBeInTheDocument();
+      expect(screen.queryByTestId('enabled')).toBeInTheDocument();
+      expect(screen.queryByTestId('scheduled')).toBeInTheDocument();
+      expect(container.querySelector('[data-testid="disabled"].selected-button')).toBeInTheDocument();
+    },
+  );
+
+  it.each([
+    { eventType: 'OK', description: 'ON option, when user clicks on ok button', selectedOption: 'enabled' },
+    { eventType: 'Cancel', description: 'OFF option, when user clicks on cancel button', selectedOption: 'disabled' },
+  ])('Successfully selected %s of the popup displays under ON option.', async ({ eventType, selectedOption }) => {
+    await mockStore(legacyApiResponse);
+    renderComponent();
+
+    const onButton = screen.queryByTestId('enabled');
+
+    await act(async () => { fireEvent.click(onButton); });
+
+    const eventButton = await screen.findByText(eventType);
+
+    await act(async () => { fireEvent.click(eventButton); });
+
+    await waitFor(() => {
+      expect(container.querySelector(`[data-testid= ${selectedOption}].selected-button`)).toBeInTheDocument();
+    });
+  });
+
+  it.each([
+    { eventType: 'Cancel', description: 'retained the added restricted dates by clicking on cancel button' },
+    { eventType: 'Delete', description: 'removed the added restricted dates by clicking on confirm button' },
+  ])('Successfully added new restricted dates and %s', async ({ eventType }) => {
+    await mockStore(legacyApiResponse);
+    renderComponent();
+
+    const scheduledButton = screen.queryByTestId('scheduled');
+
+    await act(async () => { fireEvent.click(scheduledButton); });
+
+    const addDatesButton = screen.queryByText('Add restricted dates');
+
+    await act(async () => { fireEvent.click(addDatesButton); });
+    await waitFor(async () => {
+      const startDate = screen.getByTestId('startDate');
+      const startTime = screen.getByTestId('startTime');
+      const endDate = screen.getByTestId('endDate');
+      const endTime = screen.getByTestId('endTime');
+
+      fireEvent.focus(startDate);
+      fireEvent.change(startDate, { target: { value: '2023-08-09' } });
+      fireEvent.blur(startDate);
+      fireEvent.change(startTime, { target: { value: '18:03' } });
+      fireEvent.change(endDate, { target: { value: '2024-08-09' } });
+      fireEvent.change(endTime, { target: { value: '18:03' } });
+
+      expect(startDate.value).toEqual('2023-08-09');
+      expect(startTime.value).toEqual('18:03');
+      expect(endDate.value).toEqual('2024-08-09');
+      expect(endTime.value).toEqual('18:03');
+
+      const deleteButton = screen.getByLabelText('Delete Topic');
+
+      await act(async () => { fireEvent.click(deleteButton); });
+
+      const eventButton = screen.getByText(eventType);
+
+      await act(async () => { fireEvent.click(eventButton); });
+      await waitFor(() => {
+        const configureLabel = screen.queryByText('Configure restricted date range');
+
+        if (eventType === 'Cancel') {
+          expect(configureLabel).toBeInTheDocument();
+        } else {
+          expect(configureLabel).not.toBeInTheDocument();
+        }
+      });
+    });
+  });
+
+  it('Successfully displayed existing discussion restriction dates.', async () => {
+    const mockData = legacyApiResponse;
+    mockData.plugin_configuration.discussion_blackouts = ['2023-08-09T18:03'];
+    mockData.posting_restrictions = 'scheduled';
+
+    await mockStore(mockData);
+    renderComponent();
+
+    const restrictionSchedules = screen.queryByTestId('restriction-schedules');
+    const scheduledBadge = restrictionSchedules.querySelector('.badge');
+
+    expect(scheduledBadge).toBeInTheDocument();
+  });
+
+  it('Successfully Expand/Collapse discussion restriction dates container.', async () => {
+    const mockData = legacyApiResponse;
+    mockData.plugin_configuration.discussion_blackouts = ['2023-08-09T18:03'];
+    mockData.posting_restrictions = 'scheduled';
+
+    await mockStore(mockData);
+    renderComponent();
+
+    const restrictionSchedules = screen.queryByTestId('restriction-schedules');
+    const expandBtn = within(restrictionSchedules).getByRole('button', { name: 'Expand' });
+
+    await act(async () => { fireEvent.click(expandBtn); });
+
+    let configureLabel = screen.queryByText('Configure restricted date range');
+
+    expect(configureLabel).toBeInTheDocument();
+
+    const collapseBtn = within(restrictionSchedules).getByRole('button', { name: 'Collapse' });
+
+    await act(async () => { fireEvent.click(collapseBtn); });
+
+    configureLabel = screen.queryByText('Configure restricted date range');
+
+    expect(configureLabel).not.toBeInTheDocument();
+  });
+});
diff --git a/src/pages-and-resources/discussions/app-config-form/apps/shared/DivisionByGroupFields.jsx b/src/pages-and-resources/discussions/app-config-form/apps/shared/DivisionByGroupFields.jsx
index 93567f1c96..ebc6663f90 100644
--- a/src/pages-and-resources/discussions/app-config-form/apps/shared/DivisionByGroupFields.jsx
+++ b/src/pages-and-resources/discussions/app-config-form/apps/shared/DivisionByGroupFields.jsx
@@ -1,15 +1,19 @@
 import React, { useEffect, useContext } from 'react';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Form, TransitionReplace } from '@edx/paragon';
+import {
+  Form, TransitionReplace, Hyperlink, Alert,
+} from '@openedx/paragon';
+import { AppContext } from '@edx/frontend-platform/react';
 import { FieldArray, useFormikContext } from 'formik';
 import _ from 'lodash';
+import { useParams } from 'react-router-dom';
 import FormSwitchGroup from '../../../../../generic/FormSwitchGroup';
-import messages from './messages';
+import messages from '../../messages';
 import AppConfigFormDivider from './AppConfigFormDivider';
-import { LegacyConfigFormContext } from '../legacy/LegacyConfigFormProvider';
+import { OpenedXConfigFormContext } from '../openedx/OpenedXConfigFormProvider';
 
 const DivisionByGroupFields = ({ intl }) => {
-  const { validDiscussionTopics } = useContext(LegacyConfigFormContext);
+  const { validDiscussionTopics } = useContext(OpenedXConfigFormContext);
   const {
     handleChange,
     handleBlur,
@@ -21,8 +25,13 @@ const DivisionByGroupFields = ({ intl }) => {
     discussionTopics,
     divideByCohorts,
     divideCourseTopicsByCohorts,
+    cohortsEnabled,
   } = appConfig;
 
+  const { courseId } = useParams();
+  const { config } = useContext(AppContext);
+  const learningCourseURL = `${config.LMS_BASE_URL}/courses/${courseId}/instructor`;
+
   useEffect(() => {
     if (divideByCohorts) {
       if (!divideCourseTopicsByCohorts && _.size(discussionTopics) !== _.size(divideDiscussionIds)) {
@@ -56,20 +65,30 @@ const DivisionByGroupFields = ({ intl }) => {
 
   return (
     <>
-      <h5 className="text-gray-500 mb-2 mt-4">
+      <h5 className="text-gray-500 mb-4 mt-4">
         {intl.formatMessage(messages.divisionByGroup)}
       </h5>
+      {!cohortsEnabled
+      && (
+        <Alert className="bg-light-200 font-weight-normal h5" id="alert">
+          {intl.formatMessage(messages.cohortsEnabled)}
+          <Hyperlink destination={learningCourseURL} target="_blank">
+            {intl.formatMessage(messages.instructorDashboard)}
+          </Hyperlink>
+        </Alert>
+      )}
       <FormSwitchGroup
         onChange={handleChange}
         className="mt-2"
         onBlur={handleBlur}
         id="divideByCohorts"
-        checked={divideByCohorts}
+        checked={cohortsEnabled === false ? cohortsEnabled : divideByCohorts}
         label={intl.formatMessage(messages.divideByCohortsLabel)}
         helpText={intl.formatMessage(messages.divideByCohortsHelp)}
+        disabled={!cohortsEnabled}
       />
       <TransitionReplace>
-        {divideByCohorts ? (
+        {(divideByCohorts && cohortsEnabled) ? (
           <React.Fragment key="open">
             <AppConfigFormDivider />
             <FormSwitchGroup
diff --git a/src/pages-and-resources/discussions/app-config-form/apps/shared/InContextDiscussionFields.jsx b/src/pages-and-resources/discussions/app-config-form/apps/shared/InContextDiscussionFields.jsx
index ac1cd38b12..8fc5e4bbb8 100644
--- a/src/pages-and-resources/discussions/app-config-form/apps/shared/InContextDiscussionFields.jsx
+++ b/src/pages-and-resources/discussions/app-config-form/apps/shared/InContextDiscussionFields.jsx
@@ -1,78 +1,76 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { TransitionReplace } from '@edx/paragon';
+import { useFormikContext } from 'formik';
 import FormSwitchGroup from '../../../../../generic/FormSwitchGroup';
-import messages from './messages';
+import messages from '../../messages';
 import AppConfigFormDivider from './AppConfigFormDivider';
+import ConfirmationPopup from '../../../../../generic/ConfirmationPopup';
 
-function InContextDiscussionFields({
+const InContextDiscussionFields = ({
   onBlur,
   onChange,
   intl,
   values,
-}) {
+}) => {
+  const {
+    setFieldValue,
+  } = useFormikContext();
+
+  const [showPopup, setShowPopup] = useState(false);
+  const handleConfirmation = () => {
+    setFieldValue('enableGradedUnits', !values.enableGradedUnits);
+    setShowPopup(false);
+  };
+
   return (
     <>
       <h5 className="text-gray-500 mt-4">{intl.formatMessage(messages.visibilityInContext)}</h5>
+      {showPopup
+        ? (
+          <ConfirmationPopup
+            label={values.enableGradedUnits
+              ? intl.formatMessage(messages.cancelEnableDiscussionsLabel)
+              : intl.formatMessage(messages.confirmEnableDiscussionsLabel)}
+            bodyText={values.enableGradedUnits
+              ? intl.formatMessage(messages.cancelEnableDiscussions)
+              : intl.formatMessage(messages.confirmEnableDiscussions)}
+            onConfirm={handleConfirmation}
+            confirmLabel={intl.formatMessage(messages.confirm)}
+            onCancel={() => setShowPopup(false)}
+            cancelLabel={intl.formatMessage(messages.cancelButton)}
+          />
+        )
+        : (
+          <FormSwitchGroup
+            onChange={() => setShowPopup(true)}
+            onBlur={onBlur}
+            id="enableGradedUnits"
+            checked={values.enableGradedUnits}
+            label={intl.formatMessage(messages.gradedUnitPagesLabel)}
+            helpText={intl.formatMessage(messages.gradedUnitPagesHelp)}
+          />
+        )}
+      <AppConfigFormDivider />
       <FormSwitchGroup
         onChange={onChange}
         onBlur={onBlur}
-        id="inContextDiscussion"
-        checked={values.inContextDiscussion}
-        label={intl.formatMessage(messages.inContextDiscussionLabel)}
-        helpText={intl.formatMessage(messages.inContextDiscussionHelp)}
+        id="groupAtSubsection"
+        checked={values.groupAtSubsection}
+        label={intl.formatMessage(messages.groupInContextSubsectionLabel)}
+        helpText={intl.formatMessage(messages.groupInContextSubsectionHelp)}
       />
-      <TransitionReplace>
-        {values.inContextDiscussion ? (
-          <React.Fragment key="open">
-            <AppConfigFormDivider />
-            <FormSwitchGroup
-              onChange={onChange}
-              onBlur={onBlur}
-              className="ml-4"
-              id="gradedUnitPages"
-              checked={values.gradedUnitPages}
-              label={intl.formatMessage(messages.gradedUnitPagesLabel)}
-              helpText={intl.formatMessage(messages.gradedUnitPagesHelp)}
-            />
-            <AppConfigFormDivider />
-            <FormSwitchGroup
-              onChange={onChange}
-              onBlur={onBlur}
-              className="ml-4"
-              id="groupInContextSubsection"
-              checked={values.groupInContextSubsection}
-              label={intl.formatMessage(messages.groupInContextSubsectionLabel)}
-              helpText={intl.formatMessage(messages.groupInContextSubsectionHelp)}
-            />
-            <AppConfigFormDivider />
-            <FormSwitchGroup
-              onChange={onChange}
-              onBlur={onBlur}
-              className="ml-4"
-              id="allowUnitLevelVisibility"
-              checked={values.allowUnitLevelVisibility}
-              label={intl.formatMessage(messages.allowUnitLevelVisibilityLabel)}
-              helpText={intl.formatMessage(messages.allowUnitLevelVisibilityHelp)}
-            />
-          </React.Fragment>
-        ) : <React.Fragment key="closed" />}
-
-      </TransitionReplace>
     </>
   );
-}
+};
 
 InContextDiscussionFields.propTypes = {
   onBlur: PropTypes.func.isRequired,
   onChange: PropTypes.func.isRequired,
   intl: intlShape.isRequired,
   values: PropTypes.shape({
-    inContextDiscussion: PropTypes.bool,
-    gradedUnitPages: PropTypes.bool,
-    groupInContextSubsection: PropTypes.bool,
-    allowUnitLevelVisibility: PropTypes.bool,
+    enableGradedUnits: PropTypes.bool,
+    groupAtSubsection: PropTypes.bool,
   }).isRequired,
 };
 
diff --git a/src/pages-and-resources/discussions/app-config-form/apps/shared/ReportedContentEmailNotifications.jsx b/src/pages-and-resources/discussions/app-config-form/apps/shared/ReportedContentEmailNotifications.jsx
new file mode 100644
index 0000000000..67fc81896a
--- /dev/null
+++ b/src/pages-and-resources/discussions/app-config-form/apps/shared/ReportedContentEmailNotifications.jsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import { useFormikContext } from 'formik';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import FormSwitchGroup from '../../../../../generic/FormSwitchGroup';
+import AppConfigFormDivider from './AppConfigFormDivider';
+import messages from '../../messages';
+
+const ReportedContentEmailNotifications = ({ intl }) => {
+  const {
+    handleChange,
+    handleBlur,
+    values,
+  } = useFormikContext();
+
+  return (
+    <div>
+      <h5 className="text-gray-500 mt-4 mb-2 ">{intl.formatMessage(messages.reportedContentEmailNotifications)}</h5>
+      <FormSwitchGroup
+        className="mb-4"
+        onChange={handleChange}
+        onBlur={handleBlur}
+        id="reportedContentEmailNotifications"
+        checked={values.reportedContentEmailNotifications}
+        label={intl.formatMessage(messages.reportedContentEmailNotificationsLabel)}
+        helpText={intl.formatMessage(messages.reportedContentEmailNotificationsHelp)}
+      />
+      <AppConfigFormDivider thick />
+    </div>
+  );
+};
+
+ReportedContentEmailNotifications.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(ReportedContentEmailNotifications);
diff --git a/src/pages-and-resources/discussions/app-config-form/apps/shared/discussion-restrictions/CollapseCardHeading.jsx b/src/pages-and-resources/discussions/app-config-form/apps/shared/discussion-restrictions/CollapseCardHeading.jsx
new file mode 100644
index 0000000000..260b77956a
--- /dev/null
+++ b/src/pages-and-resources/discussions/app-config-form/apps/shared/discussion-restrictions/CollapseCardHeading.jsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Badge } from '@openedx/paragon';
+
+const CollapseCardHeading = ({
+  isOpen,
+  expandHeadingText,
+  collapseHeadingText,
+  badgeVariant,
+  badgeStatus,
+}) => {
+  if (isOpen) {
+    return <span className="h4 py-2 mr-auto">{expandHeadingText}</span>;
+  }
+
+  return (
+    <div style={{ height: 72 }}>
+      {badgeStatus && <Badge variant={badgeVariant} style={{ padding: '2px 8px' }}>{badgeStatus}</Badge>}
+      <div className="mt-2 font-size-14" style={{ lineHeight: '24px' }}>{collapseHeadingText}</div>
+    </div>
+  );
+};
+
+CollapseCardHeading.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  collapseHeadingText: PropTypes.string.isRequired,
+  expandHeadingText: PropTypes.string.isRequired,
+  badgeVariant: PropTypes.string,
+  badgeStatus: PropTypes.string,
+};
+
+CollapseCardHeading.defaultProps = {
+  badgeVariant: 'primary',
+  badgeStatus: '',
+};
+
+export default React.memo(CollapseCardHeading);
diff --git a/src/pages-and-resources/discussions/app-config-form/apps/shared/discussion-restrictions/DiscussionRestrictionItem.jsx b/src/pages-and-resources/discussions/app-config-form/apps/shared/discussion-restrictions/DiscussionRestrictionItem.jsx
new file mode 100644
index 0000000000..8bf79dc97a
--- /dev/null
+++ b/src/pages-and-resources/discussions/app-config-form/apps/shared/discussion-restrictions/DiscussionRestrictionItem.jsx
@@ -0,0 +1,168 @@
+import React, { useState, useCallback } from 'react';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Form } from '@openedx/paragon';
+import { useFormikContext } from 'formik';
+import PropTypes from 'prop-types';
+import _ from 'lodash';
+
+import messages from '../../../messages';
+import RestrictDatesInput from './RestrictDatesInput';
+import { formatRestrictedDates } from '../../../utils';
+import {
+  restrictedDatesStatus as constants,
+  deleteRestrictedDatesHelperText,
+  badgeVariant,
+} from '../../../../data/constants';
+import CollapsableEditor from '../../../../../../generic/CollapsableEditor';
+import ConfirmationPopup from '../../../../../../generic/ConfirmationPopup';
+import CollapseCardHeading from './CollapseCardHeading';
+
+const DiscussionRestrictionItem = ({
+  restrictedDate,
+  onDelete,
+  hasError,
+  onClose,
+  fieldNameCommonBase,
+}) => {
+  const restrictedDateError = !restrictedDate.startDate || !restrictedDate.endDate || hasError;
+  const [showDeletePopup, setShowDeletePopup] = useState(false);
+  const [collapseIsOpen, setCollapseOpen] = useState(restrictedDateError);
+  const { setFieldTouched } = useFormikContext();
+  const intl = useIntl();
+
+  const handleToggle = useCallback((isOpen) => {
+    if (!isOpen && hasError) {
+      return setCollapseOpen(true);
+    }
+    return setCollapseOpen(isOpen);
+  }, [hasError]);
+
+  const handleOnClose = useCallback(() => {
+    ['startDate', 'startTime', 'endDate', 'endTime'].forEach(field => (
+      setFieldTouched(`${fieldNameCommonBase}.${field}`, true)
+    ));
+    if (!hasError) {
+      onClose();
+    }
+  }, [hasError, onClose]);
+
+  const getHeading = useCallback((isOpen) => (
+    <CollapseCardHeading
+      isOpen={isOpen}
+      expandHeadingText={intl.formatMessage(messages.configureRestrictedDates)}
+      collapseHeadingText={formatRestrictedDates(restrictedDate)}
+      badgeVariant={badgeVariant[restrictedDate.status]}
+      badgeStatus={intl.formatMessage(messages.restrictedDatesStatus, {
+        status: _.startCase(_.toLower(restrictedDate.status)),
+      })}
+    />
+  ), [restrictedDate]);
+
+  const handleShowDeletePopup = useCallback(() => {
+    setShowDeletePopup(true);
+  }, []);
+
+  const handleCancelDeletePopup = useCallback(() => {
+    setShowDeletePopup(false);
+  }, []);
+
+  if (showDeletePopup) {
+    return (
+      <ConfirmationPopup
+        label={restrictedDate.status === constants.ACTIVE
+          ? intl.formatMessage(messages.activeRestrictedDatesDeletionLabel)
+          : intl.formatMessage(messages.restrictedDatesDeletionLabel)}
+        bodyText={intl.formatMessage(deleteRestrictedDatesHelperText[restrictedDate.status])}
+        onConfirm={onDelete}
+        confirmLabel={intl.formatMessage(messages.deleteButton)}
+        onCancel={handleCancelDeletePopup}
+        cancelLabel={intl.formatMessage(messages.cancelButton)}
+        confirmVariant="plain"
+        confirmButtonClass="text-danger-500 border-gray-300 rounded-0"
+      />
+    );
+  }
+
+  return (
+    <CollapsableEditor
+      open={collapseIsOpen}
+      onToggle={handleToggle}
+      title={getHeading(collapseIsOpen)}
+      onDelete={handleShowDeletePopup}
+      expandAlt={intl.formatMessage(messages.expandAltText)}
+      collapseAlt={intl.formatMessage(messages.collapseAltText)}
+      deleteAlt={intl.formatMessage(messages.deleteAltText)}
+      data-testid={restrictedDate.id}
+      onClose={handleOnClose}
+    >
+      <Form.Row className="mx-2 pt-3">
+        <RestrictDatesInput
+          value={restrictedDate.startDate}
+          type="date"
+          label={intl.formatMessage(messages.startDateLabel)}
+          helpText={intl.formatMessage(messages.restrictedStartDateHelp)}
+          fieldName="startDate"
+          formGroupClasses="pl-md-0"
+          fieldClasses="pr-md-2"
+          dataTestId="startDate"
+          fieldNameCommonBase={fieldNameCommonBase}
+        />
+        <RestrictDatesInput
+          value={restrictedDate.startTime}
+          type="time"
+          label={intl.formatMessage(messages.startTimeLabel, { zone: 'UTC' })}
+          helpText={intl.formatMessage(messages.restrictedStartTimeHelp)}
+          fieldName="startTime"
+          formGroupClasses="pr-md-0"
+          fieldClasses="ml-md-2"
+          feedbackClasses="ml-md-2"
+          dataTestId="startTime"
+          fieldNameCommonBase={fieldNameCommonBase}
+        />
+      </Form.Row>
+      <hr className="mx-2 my-2 border-light-400" />
+      <Form.Row className="mx-2 pt-4">
+        <RestrictDatesInput
+          value={restrictedDate.endDate}
+          type="date"
+          label={intl.formatMessage(messages.endDateLabel)}
+          helpText={intl.formatMessage(messages.restrictedEndDateHelp)}
+          fieldName="endDate"
+          formGroupClasses="pl-md-0"
+          fieldClasses="pr-md-2"
+          dataTestId="endDate"
+          fieldNameCommonBase={fieldNameCommonBase}
+        />
+        <RestrictDatesInput
+          value={restrictedDate.endTime}
+          type="time"
+          label={intl.formatMessage(messages.endTimeLabel, { zone: 'UTC' })}
+          helpText={intl.formatMessage(messages.restrictedEndTimeHelp)}
+          fieldName="endTime"
+          formGroupClasses="pr-md-0"
+          fieldClasses="ml-md-2"
+          feedbackClasses="ml-md-2"
+          dataTestId="endTime"
+          fieldNameCommonBase={fieldNameCommonBase}
+        />
+      </Form.Row>
+    </CollapsableEditor>
+  );
+};
+
+DiscussionRestrictionItem.propTypes = {
+  onDelete: PropTypes.func.isRequired,
+  hasError: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  fieldNameCommonBase: PropTypes.string.isRequired,
+  restrictedDate: PropTypes.shape({
+    id: PropTypes.string,
+    startDate: PropTypes.string,
+    endDate: PropTypes.string,
+    startTime: PropTypes.string,
+    endTime: PropTypes.string,
+    status: PropTypes.string,
+  }).isRequired,
+};
+
+export default React.memo(DiscussionRestrictionItem);
diff --git a/src/pages-and-resources/discussions/app-config-form/apps/shared/discussion-restrictions/RestrictDatesInput.jsx b/src/pages-and-resources/discussions/app-config-form/apps/shared/discussion-restrictions/RestrictDatesInput.jsx
new file mode 100644
index 0000000000..26d35d454e
--- /dev/null
+++ b/src/pages-and-resources/discussions/app-config-form/apps/shared/discussion-restrictions/RestrictDatesInput.jsx
@@ -0,0 +1,88 @@
+import React, { useState, useCallback } from 'react';
+import { Form } from '@openedx/paragon';
+import { useFormikContext, getIn } from 'formik';
+import PropTypes from 'prop-types';
+
+import FieldFeedback from '../../../../../../generic/FieldFeedback';
+
+const RestrictDatesInput = ({
+  value,
+  type,
+  label,
+  fieldName,
+  helpText,
+  fieldClasses,
+  feedbackClasses,
+  formGroupClasses,
+  fieldNameCommonBase,
+  dataTestId,
+}) => {
+  const {
+    handleChange, handleBlur, errors, touched,
+  } = useFormikContext();
+
+  const [inFocus, setInFocus] = useState(false);
+  const fieldError = getIn(errors, `${fieldNameCommonBase}.${fieldName}`);
+  const fieldTouched = getIn(touched, `${fieldNameCommonBase}.${fieldName}`);
+  const isInvalidInput = Boolean(!inFocus && fieldError && fieldTouched);
+
+  const handleFocusOut = useCallback((event) => {
+    handleBlur(event);
+    setInFocus(false);
+  }, [handleBlur, setInFocus]);
+
+  const handleSetFocus = useCallback(() => {
+    setInFocus(true);
+  }, [setInFocus]);
+
+  return (
+    <Form.Group
+      controlId={`${fieldNameCommonBase}.${fieldName}`}
+      className={`col ${formGroupClasses}`}
+      isInvalid={isInvalidInput}
+    >
+      <Form.Control
+        name={`${fieldNameCommonBase}.${fieldName}`}
+        value={value}
+        type={type}
+        onChange={handleChange}
+        floatingLabel={label}
+        className={fieldClasses}
+        onBlur={handleFocusOut}
+        onFocus={handleSetFocus}
+        data-testid={dataTestId}
+      />
+      <FieldFeedback
+        feedbackCondition={inFocus}
+        errorCondition={isInvalidInput}
+        errorMessage={fieldError || ''}
+        feedbackMessage={helpText}
+        transitionClasses="mt-1"
+        feedbackClasses={feedbackClasses}
+      />
+    </Form.Group>
+  );
+};
+
+RestrictDatesInput.propTypes = {
+  value: PropTypes.string.isRequired,
+  fieldName: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+  type: PropTypes.string.isRequired,
+  helpText: PropTypes.string,
+  feedbackClasses: PropTypes.string,
+  fieldClasses: PropTypes.string,
+  formGroupClasses: PropTypes.string,
+  fieldNameCommonBase: PropTypes.string.isRequired,
+  dataTestId: PropTypes.string,
+};
+
+RestrictDatesInput.defaultProps = {
+  fieldClasses: '',
+  helpText: '',
+  feedbackClasses: '',
+  formGroupClasses: '',
+  dataTestId: null,
+};
+
+export default React.memo(RestrictDatesInput);
diff --git a/src/pages-and-resources/discussions/app-config-form/apps/shared/discussion-restrictions/RestrictionSchedules.jsx b/src/pages-and-resources/discussions/app-config-form/apps/shared/discussion-restrictions/RestrictionSchedules.jsx
new file mode 100644
index 0000000000..3a61dfa005
--- /dev/null
+++ b/src/pages-and-resources/discussions/app-config-form/apps/shared/discussion-restrictions/RestrictionSchedules.jsx
@@ -0,0 +1,84 @@
+import React, { useCallback } from 'react';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Button } from '@openedx/paragon';
+import { Add } from '@openedx/paragon/icons';
+
+import { FieldArray, useFormikContext } from 'formik';
+import { v4 as uuid } from 'uuid';
+
+import messages from '../../../messages';
+import DiscussionRestrictionItem from './DiscussionRestrictionItem';
+import { checkStatus } from '../../../utils';
+import { denormalizeRestrictedDate } from '../../../../data/api';
+import { restrictedDatesStatus as STATUS } from '../../../../data/constants';
+
+const RestrictionSchedules = () => {
+  const intl = useIntl();
+  const {
+    values: appConfig,
+    setFieldValue,
+    errors,
+    validateForm,
+  } = useFormikContext();
+
+  const { restrictedDates } = appConfig;
+
+  const handleOnClose = useCallback((index) => {
+    const updatedRestrictedDates = [...restrictedDates];
+    updatedRestrictedDates[index] = {
+      ...updatedRestrictedDates[index],
+      status: checkStatus(denormalizeRestrictedDate(updatedRestrictedDates[index])),
+    };
+    setFieldValue('restrictedDates', updatedRestrictedDates);
+  }, [restrictedDates]);
+
+  const newRestrictedDateItem = {
+    id: uuid(),
+    startDate: '',
+    startTime: '',
+    endDate: '',
+    endTime: '',
+    status: STATUS.UPCOMING,
+  };
+
+  const onAddNewItem = useCallback(async (push) => {
+    await push(newRestrictedDateItem);
+    validateForm();
+  }, []);
+
+  return (
+    <div data-testid="restriction-schedules">
+      <FieldArray
+        name="restrictedDates"
+        render={({ push, remove }) => (
+          <div className="mt-4">
+            {restrictedDates.map((restrictedDate, index) => (
+              <DiscussionRestrictionItem
+                fieldNameCommonBase={`restrictedDates.${index}`}
+                restrictedDate={restrictedDate}
+                key={`date-${restrictedDate.id}`}
+                id={restrictedDate.id}
+                onDelete={() => remove(index)}
+                onClose={() => handleOnClose(index)}
+                hasError={Boolean(errors?.restrictedDates?.[index])}
+              />
+            ))}
+            <div className="mb-4 mt-4 height-36">
+              <Button
+                onClick={() => onAddNewItem(push)}
+                variant="link"
+                iconBefore={Add}
+                className="text-primary-500 p-0"
+                style={{ height: 28 }}
+              >
+                {intl.formatMessage(messages.addRestrictedDatesButton)}
+              </Button>
+            </div>
+          </div>
+        )}
+      />
+    </div>
+  );
+};
+
+export default React.memo(RestrictionSchedules);
diff --git a/src/pages-and-resources/discussions/app-config-form/apps/shared/discussion-topics/DiscussionTopics.jsx b/src/pages-and-resources/discussions/app-config-form/apps/shared/discussion-topics/DiscussionTopics.jsx
index a17337f7b2..b0a4959f90 100644
--- a/src/pages-and-resources/discussions/app-config-form/apps/shared/discussion-topics/DiscussionTopics.jsx
+++ b/src/pages-and-resources/discussions/app-config-form/apps/shared/discussion-topics/DiscussionTopics.jsx
@@ -1,14 +1,14 @@
 import React, { useContext, useCallback } from 'react';
-import { Add } from '@edx/paragon/icons';
-import { Button } from '@edx/paragon';
+import { Add } from '@openedx/paragon/icons';
+import { Button } from '@openedx/paragon';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { FieldArray, useFormikContext } from 'formik';
 import { v4 as uuid } from 'uuid';
 import _ from 'lodash';
-import messages from '../messages';
+import messages from '../../../messages';
 import TopicItem from './TopicItem';
-import { LegacyConfigFormContext } from '../../legacy/LegacyConfigFormProvider';
-import filterItemFromObject from '../../../utils';
+import { OpenedXConfigFormContext } from '../../openedx/OpenedXConfigFormProvider';
+import { filterItemFromObject } from '../../../utils';
 
 const DiscussionTopics = ({ intl }) => {
   const {
@@ -21,7 +21,7 @@ const DiscussionTopics = ({ intl }) => {
     discussionTopicErrors,
     validDiscussionTopics,
     setValidDiscussionTopics,
-  } = useContext(LegacyConfigFormContext);
+  } = useContext(OpenedXConfigFormContext);
 
   const handleTopicDelete = async (topicIndex, topicId, remove) => {
     await remove(topicIndex);
@@ -53,7 +53,7 @@ const DiscussionTopics = ({ intl }) => {
       <h5 className="text-gray-500 mt-4 mb-2">
         {intl.formatMessage(messages.discussionTopics)}
       </h5>
-      <label className="text-primary-500 mb-2 h4">
+      <label className="text-primary-500 mb-1 h4">
         {intl.formatMessage(messages.discussionTopicsLabel)}
       </label>
       <div className="small mb-4 text-muted">
diff --git a/src/pages-and-resources/discussions/app-config-form/apps/shared/discussion-topics/DiscussionTopics.test.jsx b/src/pages-and-resources/discussions/app-config-form/apps/shared/discussion-topics/DiscussionTopics.test.jsx
index bae3fddec6..7ab9384b82 100644
--- a/src/pages-and-resources/discussions/app-config-form/apps/shared/discussion-topics/DiscussionTopics.test.jsx
+++ b/src/pages-and-resources/discussions/app-config-form/apps/shared/discussion-topics/DiscussionTopics.test.jsx
@@ -1,29 +1,25 @@
 import React from 'react';
+
 import {
-  queryByText,
-  render,
-  fireEvent,
-  queryAllByTestId,
-  queryByTestId,
-  queryByLabelText,
-  act,
+  act, fireEvent, queryAllByTestId, queryByTestId, queryByText, render, waitFor, queryByLabelText,
 } from '@testing-library/react';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
-import { initializeMockApp } from '@edx/frontend-platform';
-import { AppProvider } from '@edx/frontend-platform/react';
-import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import userEvent from '@testing-library/user-event';
 import MockAdapter from 'axios-mock-adapter';
 import { Formik } from 'formik';
-import userEvent from '@testing-library/user-event';
 
-import DiscussionTopics from './DiscussionTopics';
+import { initializeMockApp } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { AppProvider } from '@edx/frontend-platform/react';
+
 import initializeStore from '../../../../../../store';
-import { getAppsUrl } from '../../../../data/api';
-import { fetchApps } from '../../../../data/thunks';
 import { executeThunk } from '../../../../../../utils';
+import { getDiscussionsProvidersUrl } from '../../../../data/api';
+import { fetchProviders } from '../../../../data/thunks';
 import { legacyApiResponse } from '../../../../factories/mockApiResponses';
-import LegacyConfigFormProvider from '../../legacy/LegacyConfigFormProvider';
-import messages from '../messages';
+import OpenedXConfigFormProvider from '../../openedx/OpenedXConfigFormProvider';
+import messages from '../../../messages';
+import DiscussionTopics from './DiscussionTopics';
 
 const appConfig = {
   id: 'legacy',
@@ -36,8 +32,9 @@ const appConfig = {
   divideDiscussionIds: [],
   allowAnonymousPosts: false,
   allowAnonymousPostsPeers: false,
+  reportedContentEmailNotifications: false,
   allowDivisionByUnit: false,
-  blackoutDates: '[]',
+  restrictedDates: [],
 };
 
 const contextValue = {
@@ -77,11 +74,11 @@ describe('DiscussionTopics', () => {
     const wrapper = render(
       <AppProvider store={store}>
         <IntlProvider locale="en">
-          <LegacyConfigFormProvider value={contextValue}>
+          <OpenedXConfigFormProvider value={contextValue}>
             <Formik initialValues={data}>
               <DiscussionTopics />
             </Formik>
-          </LegacyConfigFormProvider>
+          </OpenedXConfigFormProvider>
         </IntlProvider>
       </AppProvider>,
     );
@@ -89,32 +86,36 @@ describe('DiscussionTopics', () => {
   };
 
   const mockStore = async (mockResponse) => {
-    axiosMock.onGet(getAppsUrl(courseId)).reply(200, mockResponse);
-    await executeThunk(fetchApps(courseId), store.dispatch);
+    axiosMock.onGet(getDiscussionsProvidersUrl(courseId)).reply(200, mockResponse);
+    await executeThunk(fetchProviders(courseId), store.dispatch);
   };
 
   test('renders each discussion topic correctly', async () => {
     await mockStore(legacyApiResponse);
     createComponent(appConfig);
-
-    expect(queryAllByTestId(container, 'course')).toHaveLength(1);
-    expect(queryAllByTestId(container, '13f106c6-6735-4e84-b097-0456cff55960')).toHaveLength(1);
+    await waitFor(() => {
+      expect(queryAllByTestId(container, 'course')).toHaveLength(1);
+      expect(queryAllByTestId(container, '13f106c6-6735-4e84-b097-0456cff55960')).toHaveLength(1);
+    });
   });
 
   test('renders discussion topic heading, label and helping text', async () => {
     await mockStore(legacyApiResponse);
     createComponent(appConfig);
-
-    expect(queryByText(container, messages.discussionTopics.defaultMessage)).toBeInTheDocument();
-    expect(queryByText(container, messages.discussionTopicsLabel.defaultMessage)).toBeInTheDocument();
-    expect(queryByText(container, messages.discussionTopicsHelp.defaultMessage)).toBeInTheDocument();
+    await waitFor(() => {
+      expect(queryByText(container, messages.discussionTopics.defaultMessage)).toBeInTheDocument();
+      expect(queryByText(container, messages.discussionTopicsLabel.defaultMessage)).toBeInTheDocument();
+      expect(queryByText(container, messages.discussionTopicsHelp.defaultMessage)).toBeInTheDocument();
+    });
   });
 
   test('add topic button is rendered correctly', async () => {
     await mockStore(legacyApiResponse);
     createComponent(appConfig);
-
-    expect(queryByText(container, messages.addTopicButton.defaultMessage, { selector: 'button' })).toBeInTheDocument();
+    await waitFor(() => {
+      expect(queryByText(container, messages.addTopicButton.defaultMessage, { selector: 'button' }))
+        .toBeInTheDocument();
+    });
   });
 
   test('calls "onClick" callback when add topic button is clicked', async () => {
@@ -122,10 +123,11 @@ describe('DiscussionTopics', () => {
     createComponent(appConfig);
 
     const addTopicButton = queryByText(container, messages.addTopicButton.defaultMessage, { selector: 'button' });
-
-    expect(queryByText(container, messages.configureAdditionalTopic.defaultMessage)).not.toBeInTheDocument();
-    fireEvent.click(addTopicButton);
-    expect(queryByText(container, messages.configureAdditionalTopic.defaultMessage)).toBeInTheDocument();
+    await waitFor(async () => {
+      expect(queryByText(container, messages.configureAdditionalTopic.defaultMessage)).not.toBeInTheDocument();
+      await act(async () => fireEvent.click(addTopicButton));
+      expect(queryByText(container, messages.configureAdditionalTopic.defaultMessage)).toBeInTheDocument();
+    });
   });
 
   test('updates discussion topic name', async () => {
@@ -133,11 +135,11 @@ describe('DiscussionTopics', () => {
     createComponent(appConfig);
     const topicCard = queryByTestId(container, '13f106c6-6735-4e84-b097-0456cff55960');
 
-    userEvent.click(queryByLabelText(topicCard, 'Expand'));
+    await act(async () => userEvent.click(queryByLabelText(topicCard, 'Expand')));
     await act(async () => {
       fireEvent.change(topicCard.querySelector('input'), { target: { value: 'new name' } });
     });
-    userEvent.click(queryByLabelText(topicCard, 'Collapse'));
+    await act(async () => userEvent.click(queryByLabelText(topicCard, 'Collapse')));
 
     expect(queryByText(topicCard, 'new name')).toBeInTheDocument();
   });
diff --git a/src/pages-and-resources/discussions/app-config-form/apps/shared/discussion-topics/TopicItem.jsx b/src/pages-and-resources/discussions/app-config-form/apps/shared/discussion-topics/TopicItem.jsx
index ed8fa321c1..444dc1fb6e 100644
--- a/src/pages-and-resources/discussions/app-config-form/apps/shared/discussion-topics/TopicItem.jsx
+++ b/src/pages-and-resources/discussions/app-config-form/apps/shared/discussion-topics/TopicItem.jsx
@@ -1,18 +1,16 @@
-import React, { useState, useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+
+import { useFormikContext } from 'formik';
+
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import {
-  Button,
-  Card,
-  Collapsible,
-  Form,
-  Icon,
-  IconButton,
-  TransitionReplace,
-} from '@edx/paragon';
-import { Delete, ExpandLess, ExpandMore } from '@edx/paragon/icons';
-import { useFormikContext } from 'formik';
-import PropTypes from 'prop-types';
-import messages from '../messages';
+  Button, Card, Form,
+} from '@openedx/paragon';
+
+import CollapsableEditor from '../../../../../../generic/CollapsableEditor';
+import messages from '../../../messages';
+import FieldFeedback from '../../../../../../generic/FieldFeedback';
 
 const TopicItem = ({
   intl,
@@ -28,17 +26,16 @@ const TopicItem = ({
   } = useFormikContext();
   const [inFocus, setInFocus] = useState(false);
   const [showDeletePopup, setShowDeletePopup] = useState(false);
-  const [collapseIsOpen, setCollapseOpen] = useState();
+  const [collapseIsOpen, setCollapseOpen] = useState(!name || hasError);
   const isGeneralTopic = id === 'course';
 
   useEffect(() => {
     onFocus(hasError);
   }, [inFocus, hasError]);
 
-  const getHeading = (isOpen = false) => {
-    let heading;
+  const getHeading = (isOpen) => {
     if (isGeneralTopic && isOpen) {
-      heading = (
+      return (
         <div className="h4 py-2 mr-auto">
           {intl.formatMessage(messages.renameGeneralTopic)}
           <div className="small text-muted mt-2">
@@ -46,16 +43,14 @@ const TopicItem = ({
           </div>
         </div>
       );
-    } else if (isOpen) {
-      heading = (
+    } if (isOpen) {
+      return (
         <span className="h4 py-2 mr-auto">
           {intl.formatMessage(messages.configureAdditionalTopic)}
         </span>
       );
-    } else {
-      heading = <span className="py-2">{name}</span>;
     }
-    return heading;
+    return <span className="py-2">{name}</span>;
   };
 
   const handleToggle = (isOpen) => {
@@ -65,137 +60,78 @@ const TopicItem = ({
     return setCollapseOpen(isOpen);
   };
 
-  const deleteDiscussionTopic = (event) => {
-    event.stopPropagation();
+  const deleteDiscussionTopic = () => {
     setShowDeletePopup(true);
   };
 
-  const renderFormFeedback = (message, messageType = 'default') => (
-    <Form.Control.Feedback type={messageType} hasIcon={false}>
-      <div className="small">{message}</div>
-    </Form.Control.Feedback>
-  );
-
   const handleFocusOut = (event) => {
     handleBlur(event);
     setInFocus(false);
   };
 
   const deleteTopicPopup = (
-    <Card className="rounded mb-3 p-1">
+    <Card className="rounded mb-3 px-1">
+      <Card.Header
+        className="text-primary-500"
+        title={intl.formatMessage(messages.discussionTopicDeletionLabel)}
+        size="sm"
+      />
       <Card.Body>
-        <div className="text-primary-500 mb-2 h4">
-          {intl.formatMessage(messages.discussionTopicDeletionLabel)}
-        </div>
-        <Card.Text className="text-justify text-muted">
+        <Card.Section className="text-justify text-muted pt-2 pb-3">
           {intl.formatMessage(messages.discussionTopicDeletionHelp)}
-        </Card.Text>
-        <div className="d-flex justify-content-end">
+        </Card.Section>
+        <Card.Footer>
           <Button variant="tertiary" onClick={() => setShowDeletePopup(false)}>
             {intl.formatMessage(messages.cancelButton)}
           </Button>
           <Button
             variant="outline-brand"
             className="ml-2"
-            onClick={() => onDelete()}
+            onClick={onDelete}
           >
             {intl.formatMessage(messages.deleteButton)}
           </Button>
-        </div>
+        </Card.Footer>
       </Card.Body>
     </Card>
   );
 
-  return (
-    <>
-      {showDeletePopup ? (
-        deleteTopicPopup
-      ) : (
-        <Collapsible.Advanced
-          className="collapsible-card rounded mb-3 px-3 py-2"
-          onToggle={handleToggle}
-          defaultOpen={!name || hasError}
-          open={collapseIsOpen}
-          data-testid={id}
+  return showDeletePopup
+    ? deleteTopicPopup
+    : (
+      <CollapsableEditor
+        open={collapseIsOpen}
+        onToggle={handleToggle}
+        title={getHeading(collapseIsOpen)}
+        onDelete={isGeneralTopic ? null : deleteDiscussionTopic}
+        expandAlt={intl.formatMessage(messages.expandAltText)}
+        collapseAlt={intl.formatMessage(messages.collapseAltText)}
+        deleteAlt={intl.formatMessage(messages.deleteAltText)}
+        data-testid={id}
+      >
+        <Form.Group
+          controlId={`discussionTopics.${index}.name`}
+          isInvalid={hasError && !inFocus}
+          className="m-2"
         >
-          <Collapsible.Trigger
-            className="collapsible-trigger d-flex border-0"
-            style={{ justifyContent: 'unset' }}
-          >
-            <Collapsible.Visible whenClosed>
-              {getHeading(false)}
-              <div className="ml-auto">
-                <IconButton
-                  alt={intl.formatMessage(messages.expandAltText)}
-                  src={ExpandMore}
-                  iconAs={Icon}
-                  onClick={() => {}}
-                  variant="dark"
-                />
-              </div>
-            </Collapsible.Visible>
-            <Collapsible.Visible whenOpen>
-              {getHeading(true)}
-              {!isGeneralTopic && (
-                <div className="pr-4 border-right">
-                  <IconButton
-                    onClick={deleteDiscussionTopic}
-                    alt={intl.formatMessage(messages.deleteAltText)}
-                    src={Delete}
-                    iconAs={Icon}
-                    variant="dark"
-                  />
-                </div>
-              )}
-              <div className="pl-4">
-                <IconButton
-                  alt={intl.formatMessage(messages.collapseAltText)}
-                  src={ExpandLess}
-                  iconAs={Icon}
-                  onClick={() => {}}
-                  variant="dark"
-                />
-              </div>
-            </Collapsible.Visible>
-          </Collapsible.Trigger>
-          <Collapsible.Body className="collapsible-body rounded px-0">
-            <Form.Group
-              controlId={`discussionTopics.${index}.name`}
-              isInvalid={hasError && !inFocus}
-              className="m-2"
-            >
-              <Form.Control
-                floatingLabel="Topic name"
-                onChange={handleChange}
-                onBlur={(event) => handleFocusOut(event)}
-                value={name}
-                controlClassName="bg-white"
-                onFocus={() => setInFocus(true)}
-              />
-              <TransitionReplace key={id} className="mt-1">
-                {inFocus ? (
-                  <React.Fragment key="open">
-                    {renderFormFeedback(intl.formatMessage(messages.addTopicHelpText))}
-                  </React.Fragment>
-                ) : (
-                  <React.Fragment key="closed" />
-                )}
-              </TransitionReplace>
-              <TransitionReplace key={`${name}-${id}`}>
-                {hasError && !inFocus ? (
-                  <React.Fragment key="open">
-                    {renderFormFeedback(errors?.discussionTopics[index].name, 'invalid')}
-                  </React.Fragment>
-                ) : (
-                  <React.Fragment key="closed" />
-                )}
-              </TransitionReplace>
-            </Form.Group>
-          </Collapsible.Body>
-        </Collapsible.Advanced>
-      )}
-    </>
-  );
+          <Form.Control
+            floatingLabel="Topic name"
+            onChange={handleChange}
+            onBlur={(event) => handleFocusOut(event)}
+            value={name}
+            controlClassName="bg-white"
+            onFocus={() => setInFocus(true)}
+          />
+          <FieldFeedback
+            errorCondition={hasError && !inFocus}
+            feedbackCondition={inFocus}
+            feedbackMessage={intl.formatMessage(messages.addTopicHelpText)}
+            errorMessage={errors?.discussionTopics?.[index]?.name || ''}
+            transitionClasses="mt-1"
+          />
+        </Form.Group>
+      </CollapsableEditor>
+    );
 };
 
 TopicItem.propTypes = {
diff --git a/src/pages-and-resources/discussions/app-config-form/apps/shared/discussion-topics/TopicItem.test.jsx b/src/pages-and-resources/discussions/app-config-form/apps/shared/discussion-topics/TopicItem.test.jsx
index 87101d220e..46e122205e 100644
--- a/src/pages-and-resources/discussions/app-config-form/apps/shared/discussion-topics/TopicItem.test.jsx
+++ b/src/pages-and-resources/discussions/app-config-form/apps/shared/discussion-topics/TopicItem.test.jsx
@@ -1,27 +1,30 @@
 import React from 'react';
+
 import {
-  queryByLabelText,
-  queryAllByText,
-  render,
   queryAllByTestId,
+  queryAllByText,
+  queryByRole,
   queryByTestId,
   queryByText,
+  queryByLabelText,
+  render,
 } from '@testing-library/react';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
-import { initializeMockApp } from '@edx/frontend-platform';
-import { AppProvider } from '@edx/frontend-platform/react';
-import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import userEvent from '@testing-library/user-event';
 import MockAdapter from 'axios-mock-adapter';
 import { Formik } from 'formik';
-import userEvent from '@testing-library/user-event';
 
-import TopicItem from './TopicItem';
+import { initializeMockApp } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { AppProvider } from '@edx/frontend-platform/react';
+
 import initializeStore from '../../../../../../store';
-import { getAppsUrl } from '../../../../data/api';
-import { fetchApps } from '../../../../data/thunks';
 import { executeThunk } from '../../../../../../utils';
+import { getDiscussionsProvidersUrl } from '../../../../data/api';
+import { fetchProviders } from '../../../../data/thunks';
 import { legacyApiResponse } from '../../../../factories/mockApiResponses';
-import messages from '../messages';
+import messages from '../../../messages';
+import TopicItem from './TopicItem';
 
 const appConfig = {
   discussionTopics: [
@@ -88,8 +91,8 @@ describe('TopicItem', () => {
   };
 
   const mockStore = async (mockResponse) => {
-    axiosMock.onGet(getAppsUrl(courseId)).reply(200, mockResponse);
-    await executeThunk(fetchApps(courseId), store.dispatch);
+    axiosMock.onGet(getDiscussionsProvidersUrl(courseId)).reply(200, mockResponse);
+    await executeThunk(fetchProviders(courseId), store.dispatch);
   };
 
   test('displays a collapsible card for discussion topic', async () => {
@@ -104,9 +107,8 @@ describe('TopicItem', () => {
     createComponent(generalTopic);
 
     const generalTopicNode = queryByTestId(container, 'course');
-
-    expect(generalTopicNode.querySelector('button[aria-label="Expand"]')).toBeInTheDocument();
-    expect(generalTopicNode.querySelector('button[aria-label="Collapse"]')).not.toBeInTheDocument();
+    expect(queryByLabelText(generalTopicNode, 'Expand')).toBeInTheDocument();
+    expect(queryByLabelText(generalTopicNode, 'Collapse')).not.toBeInTheDocument();
     expect(queryByText(generalTopicNode, 'General')).toBeInTheDocument();
   });
 
@@ -117,9 +119,9 @@ describe('TopicItem', () => {
     const generalTopicNode = queryByTestId(container, 'course');
     userEvent.click(queryByLabelText(generalTopicNode, 'Expand'));
 
-    expect(generalTopicNode.querySelector('button[aria-label="Expand"]')).not.toBeInTheDocument();
-    expect(generalTopicNode.querySelector('button[aria-label="Collapse"]')).toBeInTheDocument();
-    expect(generalTopicNode.querySelector('button[aria-label="Delete Topic"]')).not.toBeInTheDocument();
+    expect(queryByLabelText(generalTopicNode, 'Expand')).not.toBeInTheDocument();
+    expect(queryByLabelText(generalTopicNode, 'Collapse')).toBeInTheDocument();
+    expect(queryByRole(generalTopicNode, 'button', { name: 'Delete Topic' })).not.toBeInTheDocument();
     expect(generalTopicNode.querySelector('input')).toBeInTheDocument();
   });
 
@@ -130,9 +132,9 @@ describe('TopicItem', () => {
     const topicCard = queryByTestId(container, '13f106c6-6735-4e84-b097-0456cff55960');
     userEvent.click(queryByLabelText(topicCard, 'Expand'));
 
-    expect(topicCard.querySelector('button[aria-label="Expand"]')).not.toBeInTheDocument();
-    expect(topicCard.querySelector('button[aria-label="Collapse"]')).toBeInTheDocument();
-    expect(topicCard.querySelector('button[aria-label="Delete Topic"]')).toBeInTheDocument();
+    expect(queryByLabelText(topicCard, 'Expand')).not.toBeInTheDocument();
+    expect(queryByLabelText(topicCard, 'Collapse')).toBeInTheDocument();
+    expect(queryByRole(topicCard, 'button', { name: 'Delete Topic' })).toBeInTheDocument();
     expect(topicCard.querySelector('input')).toBeInTheDocument();
   });
 
@@ -142,7 +144,7 @@ describe('TopicItem', () => {
 
     const topicCard = queryByTestId(container, '13f106c6-6735-4e84-b097-0456cff55960');
     userEvent.click(queryByLabelText(topicCard, 'Expand'));
-    userEvent.click(queryByLabelText(topicCard, 'Delete Topic'));
+    userEvent.click(queryByRole(topicCard, 'button', { name: 'Delete Topic' }));
 
     expect(queryAllByText(container, messages.discussionTopicDeletionLabel.defaultMessage)).toHaveLength(1);
     expect(queryByText(container, messages.discussionTopicDeletionLabel.defaultMessage)).toBeInTheDocument();
diff --git a/src/pages-and-resources/discussions/app-config-form/apps/shared/messages.js b/src/pages-and-resources/discussions/app-config-form/apps/shared/messages.js
deleted file mode 100644
index 9febd8cc5f..0000000000
--- a/src/pages-and-resources/discussions/app-config-form/apps/shared/messages.js
+++ /dev/null
@@ -1,208 +0,0 @@
-import { defineMessages } from '@edx/frontend-platform/i18n';
-
-const messages = defineMessages({
-  // Division by cohort fields
-  divisionByGroup: {
-    id: 'authoring.discussions.builtIn.divisionByGroup',
-    defaultMessage: 'Cohorts',
-  },
-  divideByCohortsLabel: {
-    id: 'authoring.discussions.builtIn.divideByCohorts.label',
-    defaultMessage: 'Divide discussions by cohorts',
-    description: 'Label for a switch that enables dividing discussions by cohorts.  allowDivisionByUnit, divideCourseWideTopics, divideGeneralTopic, and divideQuestionsForTAs are only used if this setting is true.',
-  },
-  divideByCohortsHelp: {
-    id: 'authoring.discussions.builtIn.divideByCohorts.help',
-    defaultMessage: 'Learners will only be able to view and respond to discussions posted by members of their cohort.',
-    description: 'Help text for a switch that enables dividing discussions by cohorts.',
-  },
-  divideCourseTopicsByCohortsLabel: {
-    id: 'authoring.discussions.builtIn.divideCourseTopicsByCohorts.label',
-    defaultMessage: 'Divide course-wide discussion topics',
-    description: 'Label for a switch that enables dividing course wide topics by cohorts.',
-  },
-  divideCourseTopicsByCohortsHelp: {
-    id: 'authoring.discussions.builtIn.divideCourseTopicsByCohorts.help',
-    defaultMessage: 'Choose which of your general course-wide discussion topics you would like to divide.',
-    description: 'Help text asking the user to pick course-wide topics that should be divided by cohort.',
-  },
-  divideGeneralTopic: {
-    id: 'authoring.discussions.builtIn.divideGeneralTopic.label',
-    defaultMessage: 'General',
-    description: 'Label for a checkbox allowing a user to divide the General course wide topic by cohorts.',
-  },
-  divideQuestionsForTAsTopic: {
-    id: 'authoring.discussions.builtIn.divideQuestionsForTAsTopic.label',
-    defaultMessage: 'Questions for the TAs',
-    description: 'Label for a checkbox allowing a user to divide the Questions for the TAs (TA stands for "teaching assistant") course wide topic by cohorts.',
-  },
-
-  // In-context discussion fields
-  visibilityInContext: {
-    id: 'authoring.discussions.builtIn.visibilityInContext',
-    defaultMessage: 'Visibility of in-context discussions',
-  },
-  inContextDiscussionLabel: {
-    id: 'authoring.discussions.builtIn.inContextDiscussion.label',
-    defaultMessage: 'In-context discussion',
-  },
-  inContextDiscussionHelp: {
-    id: 'authoring.discussions.builtIn.inContextDiscussion.help',
-    defaultMessage: 'Learners will be able to view or hide a discussion side panel to engage with discussion on the course unit page.',
-  },
-  gradedUnitPagesLabel: {
-    id: 'authoring.discussions.builtIn.gradedUnitPages.label',
-    defaultMessage: 'Graded unit pages',
-  },
-  gradedUnitPagesHelp: {
-    id: 'authoring.discussions.builtIn.gradedUnitPages.help',
-    defaultMessage: 'Allow learners to engage with discussion on all graded unit pages except timed exams.',
-  },
-  groupInContextSubsectionLabel: {
-    id: 'authoring.discussions.builtIn.groupInContextSubsection.label',
-    defaultMessage: 'Group in context discussion at the subsection level',
-  },
-  groupInContextSubsectionHelp: {
-    id: 'authoring.discussions.builtIn.groupInContextSubsection.help',
-    defaultMessage: 'Learners will be able to view any post in the sub-section no matter which unit page they are viewing. While this is not recommended, if your course has short learning sequences or low enrollment grouping may increase engagement.',
-  },
-  allowUnitLevelVisibilityLabel: {
-    id: 'authoring.discussions.builtIn.allowUnitLevelVisibility.label',
-    defaultMessage: 'Allow visibility configuration for each course unit',
-  },
-  allowUnitLevelVisibilityHelp: {
-    id: 'authoring.discussions.builtIn.allowUnitLevelVisibility.help',
-    defaultMessage: 'With this advanced setting enabled you will be able to override the global visibility setting and turn discussions on or off for each unit from the course outline view..',
-  },
-
-  // Anonymous posting fields
-  anonymousPosting: {
-    id: 'authoring.discussions.builtIn.anonymousPosting',
-    defaultMessage: 'Anonymous posting',
-  },
-  allowAnonymousPostsLabel: {
-    id: 'authoring.discussions.builtIn.allowAnonymous.label',
-    defaultMessage: 'Allow anonymous discussion posts',
-  },
-  allowAnonymousPostsHelp: {
-    id: 'authoring.discussions.builtIn.allowAnonymous.help',
-    defaultMessage: 'If enabled, learners can create posts that are anonymous to all users.',
-  },
-  allowAnonymousPostsPeersLabel: {
-    id: 'authoring.discussions.builtIn.allowAnonymousPeers.label',
-    defaultMessage: 'Allow anonymous discussion posts to peers',
-  },
-  allowAnonymousPostsPeersHelp: {
-    id: 'authoring.discussions.builtIn.allowAnonymousPeers.help',
-    defaultMessage: 'Learners will be able to post anonymously to other peers but all posts will be visible to course staff.',
-  },
-
-  // Discussion Topics
-  discussionTopics: {
-    id: 'authoring.discussions.discussionTopics',
-    defaultMessage: 'Discussion topics',
-  },
-  discussionTopicsLabel: {
-    id: 'authoring.discussions.discussionTopics.label',
-    defaultMessage: 'General discussion topics',
-    description: 'Label for a discussion topic section allowing a user to add new topic.',
-  },
-  discussionTopicsHelp: {
-    id: 'authoring.discussions.discussionTopics.help',
-    defaultMessage: 'Discussions can include general topics not contained to the course structure. All courses have a general topic by default.',
-    description: 'Help text for adding new discussion topics that in general discussion topic section.',
-  },
-  discussionTopicRequired: {
-    id: 'authoring.discussions.discussionTopic.required',
-    defaultMessage: 'Topic name is a required field',
-    description: 'Tells the user that the discussion topic field is required and must have a value.',
-  },
-  discussionTopicNameAlreadyExist: {
-    id: 'authoring.discussions.discussionTopic.alreadyExistError',
-    defaultMessage: 'It looks like this name is already in use',
-    description: 'Tells the user that the discussion topic name already in use and must have a unique name.',
-  },
-  addTopicButton: {
-    id: 'authoring.discussions.addTopicButton',
-    defaultMessage: 'Add topic',
-    description: 'Button label when Add a new discussion topic.',
-  },
-  deleteButton: {
-    id: 'authoring.discussions.deleteButton',
-    defaultMessage: 'Delete',
-    description: 'Button label when delete discussion topic from conformation card.',
-  },
-  cancelButton: {
-    id: 'authoring.discussions.cancelButton',
-    defaultMessage: 'Cancel',
-    description: 'Button label when cancel discussion topic deletion conformation.',
-  },
-  discussionTopicDeletionHelp: {
-    id: 'authoring.discussions.discussionTopicDeletion.help',
-    defaultMessage: 'edX recommends that you do not delete discussion topics once your course is running.',
-    description: 'Help text for delete a discussion topic from discussion topic section.',
-  },
-  discussionTopicDeletionLabel: {
-    id: 'authoring.discussions.discussionTopicDeletion.label',
-    defaultMessage: 'Delete this topic?',
-    description: 'Label for discussion topic delete popup allowing a user to delete a topic.',
-  },
-  renameGeneralTopic: {
-    id: 'authoring.discussions.builtIn.renameGeneralTopic.label',
-    defaultMessage: 'Rename general topic',
-    description: 'Label for default topic allowing user to rename default general topic',
-  },
-  generalTopicHelp: {
-    id: 'authoring.discussions.generalTopicHelp.help',
-    defaultMessage: 'This is the default discussion topic for your course.',
-    description: 'Help text for general discussion topic collapsible card.',
-  },
-  configureAdditionalTopic: {
-    id: 'authoring.discussions.builtIn.configureAdditionalTopic.label',
-    defaultMessage: 'Configure topic',
-    description: 'Label for Additional topic allowing user to configure additional topic name',
-  },
-  addTopicHelpText: {
-    id: 'authoring.discussions.addTopicHelpText',
-    defaultMessage: 'Choose a unique name for your topic',
-    description: 'Help text for input field in adding a discussion topic',
-  },
-  // Blackout dates
-  blackoutDates: {
-    id: 'authoring.discussions.blackoutDates',
-    defaultMessage: 'Discussion blackout dates',
-
-  },
-  blackoutDatesLabel: {
-    id: 'authoring.discussions.builtIn.blackoutDates.label',
-    defaultMessage: 'Blackout dates',
-  },
-  blackoutDatesHelp: {
-    id: 'authoring.discussions.builtIn.blackoutDates.help',
-    defaultMessage:
-      `Enter pairs of dates between which students cannot post to discussion forums. Inside the provided
-      brackets, enter an additional set of square brackets surrounding each pair of dates you add.
-      Format each pair of dates as ["YYYY-MM-DD", "YYYY-MM-DD"]. To specify times as well as dates,
-      format each pair as ["YYYY-MM-DDTHH:MM", "YYYY-MM-DDTHH:MM"]. Be sure to include the "T" between
-      the date and time. For example, an entry defining two blackout periods looks like this, including
-      the outer pair of square brackets: [["2015-09-15", "2015-09-21"], ["2015-10-01", "2015-10-08"]]`,
-  },
-  blackoutDatesFormattingError: {
-    id: 'authoring.discussions.builtIn.blackoutDates.formattingError',
-    defaultMessage: "There's a formatting error in your blackout dates.",
-  },
-  deleteAltText: {
-    id: 'authoring.topics.delete',
-    defaultMessage: 'Delete Topic',
-  },
-  expandAltText: {
-    id: 'authoring.topics.expand',
-    defaultMessage: 'Expand',
-  },
-  collapseAltText: {
-    id: 'authoring.topics.collapse',
-    defaultMessage: 'Collapse',
-  },
-});
-
-export default messages;
diff --git a/src/pages-and-resources/discussions/app-config-form/messages.js b/src/pages-and-resources/discussions/app-config-form/messages.js
index 3aeb92e1ec..4d76c5bec2 100644
--- a/src/pages-and-resources/discussions/app-config-form/messages.js
+++ b/src/pages-and-resources/discussions/app-config-form/messages.js
@@ -28,11 +28,36 @@ const messages = defineMessages({
     defaultMessage: 'Cancel',
     description: 'Button allowing the user to return to discussion provider configurations.',
   },
+  confirm: {
+    id: 'authoring.discussions.confirm',
+    defaultMessage: 'Confirm',
+    description: 'Button allowing the user to confirm Confirmation.',
+  },
   confirmConfigurationChange: {
     id: 'authoring.discussions.confirmConfigurationChange',
     defaultMessage: 'Are you sure you want to change the discussion settings?',
     description: 'Asks the user whether he/she really wants to change settings.',
   },
+  confirmEnableDiscussionsLabel: {
+    id: 'authoring.discussions.confirmEnableDiscussionsLabel',
+    defaultMessage: 'Enable discussions on units in graded subsections?',
+    description: 'Asks the user whether he/she really wants to enable discussions on units in graded subsections.',
+  },
+  cancelEnableDiscussionsLabel: {
+    id: 'authoring.discussions.cancelEnableDiscussionsLabel',
+    defaultMessage: 'Disable discussions on units in graded subsections?',
+    description: 'Asks the user whether he/she really wants to disable discussions on units in graded subsections.',
+  },
+  confirmEnableDiscussions: {
+    id: 'authoring.discussions.confirmEnableDiscussions',
+    defaultMessage: 'Enabling this toggle will automatically enable discussion on all units in graded subsections, that are not timed exams.',
+    description: 'Asks the user whether he/she really wants to enable discussions on units in graded subsections.',
+  },
+  cancelEnableDiscussions: {
+    id: 'authoring.discussions.cancelEnableDiscussions',
+    defaultMessage: 'Disabling this toggle will automatically disable discussion on all units in graded subsections. Discussion topics containing at least 1 thread will be listed and accessible under “Archived” in Topics tab on the Discussions page.',
+    description: 'Asks the user whether he/she really wants to disable discussions on units in graded subsections.',
+  },
   backButton: {
     id: 'authoring.discussions.backButton',
     defaultMessage: 'Back',
@@ -77,14 +102,359 @@ const messages = defineMessages({
   },
   'appName-ed-discuss': {
     id: 'authoring.discussions.appConfigForm.appName-ed-discuss',
-    defaultMessage: 'Ed Discuss',
-    description: 'The name of the Ed Discuss app.',
+    defaultMessage: 'Ed Discussion',
+    description: 'The name of the Ed Discussion app.',
   },
   'appName-legacy': {
     id: 'authoring.discussions.appConfigForm.appName-legacy',
     defaultMessage: 'edX',
     description: 'The name of the Legacy edX Discussions app.',
   },
+  'appName-openedx': {
+    id: 'authoring.discussions.appConfigForm.appName-openedx',
+    defaultMessage: 'edX (new)',
+    description: 'The name of the new edX Discussions app.',
+  },
+  divisionByGroup: {
+    id: 'authoring.discussions.builtIn.divisionByGroup',
+    defaultMessage: 'Cohorts',
+  },
+  divideByCohortsLabel: {
+    id: 'authoring.discussions.builtIn.divideByCohorts.label',
+    defaultMessage: 'Divide discussions by cohorts',
+    description: 'Label for a switch that enables dividing discussions by cohorts.  allowDivisionByUnit, divideCourseWideTopics, divideGeneralTopic, and divideQuestionsForTAs are only used if this setting is true.',
+  },
+  divideByCohortsHelp: {
+    id: 'authoring.discussions.builtIn.divideByCohorts.help',
+    defaultMessage: 'Learners will only be able to view and respond to discussions posted by members of their cohort.',
+    description: 'Help text for a switch that enables dividing discussions by cohorts.',
+  },
+  divideCourseTopicsByCohortsLabel: {
+    id: 'authoring.discussions.builtIn.divideCourseTopicsByCohorts.label',
+    defaultMessage: 'Divide course-wide discussion topics',
+    description: 'Label for a switch that enables dividing course wide topics by cohorts.',
+  },
+  divideCourseTopicsByCohortsHelp: {
+    id: 'authoring.discussions.builtIn.divideCourseTopicsByCohorts.help',
+    defaultMessage: 'Choose which of your general course-wide discussion topics you would like to divide.',
+    description: 'Help text asking the user to pick course-wide topics that should be divided by cohort.',
+  },
+  divideGeneralTopic: {
+    id: 'authoring.discussions.builtIn.divideGeneralTopic.label',
+    defaultMessage: 'General',
+    description: 'Label for a checkbox allowing a user to divide the General course wide topic by cohorts.',
+  },
+  divideQuestionsForTAsTopic: {
+    id: 'authoring.discussions.builtIn.divideQuestionsForTAsTopic.label',
+    defaultMessage: 'Questions for the TAs',
+    description: 'Label for a checkbox allowing a user to divide the Questions for the TAs (TA stands for "teaching assistant") course wide topic by cohorts.',
+  },
+  cohortsEnabled: {
+    id: 'authoring.discussions.builtIn.cohortsEnabled.label',
+    defaultMessage: 'To adjust these settings, enable cohorts on the ',
+    description: 'Label text informing the user to enable cohort',
+  },
+  instructorDashboard: {
+    id: 'authoring.discussions.builtIn.instructorDashboard.label',
+    defaultMessage: 'instructor dashboard',
+    description: 'Label text for instructor dashboard',
+  },
+  // In-context discussion fields
+  visibilityInContext: {
+    id: 'authoring.discussions.builtIn.visibilityInContext',
+    defaultMessage: 'Visibility of in-context discussions',
+  },
+  gradedUnitPagesLabel: {
+    id: 'authoring.discussions.builtIn.gradedUnitPages.label',
+    defaultMessage: 'Enable discussions on units in graded subsections',
+  },
+  gradedUnitPagesHelp: {
+    id: 'authoring.discussions.builtIn.gradedUnitPages.help',
+    defaultMessage: 'Allow learners to engage with discussion on all graded unit pages except timed exams.',
+  },
+  groupInContextSubsectionLabel: {
+    id: 'authoring.discussions.builtIn.groupInContextSubsection.label',
+    defaultMessage: 'Group in context discussion at the subsection level',
+  },
+  groupInContextSubsectionHelp: {
+    id: 'authoring.discussions.builtIn.groupInContextSubsection.help',
+    defaultMessage: 'Learners will be able to view any post in the sub-section no matter which unit page they are viewing. While this is not recommended, if your course has short learning sequences or low enrollment grouping may increase engagement.',
+  },
+
+  // Anonymous posting fields
+  anonymousPosting: {
+    id: 'authoring.discussions.builtIn.anonymousPosting',
+    defaultMessage: 'Anonymous posting',
+  },
+  allowAnonymousPostsLabel: {
+    id: 'authoring.discussions.builtIn.allowAnonymous.label',
+    defaultMessage: 'Allow anonymous discussion posts',
+  },
+  allowAnonymousPostsHelp: {
+    id: 'authoring.discussions.builtIn.allowAnonymous.help',
+    defaultMessage: 'If enabled, learners can create posts that are anonymous to all users.',
+  },
+  allowAnonymousPostsPeersLabel: {
+    id: 'authoring.discussions.builtIn.allowAnonymousPeers.label',
+    defaultMessage: 'Allow anonymous discussion posts to peers',
+  },
+  allowAnonymousPostsPeersHelp: {
+    id: 'authoring.discussions.builtIn.allowAnonymousPeers.help',
+    defaultMessage: 'Learners will be able to post anonymously to other peers but all posts will be visible to course staff.',
+  },
+
+  // Reported Email Notifications
+  reportedContentEmailNotifications: {
+    id: 'authoring.discussions.builtIn.reportedContentEmailNotifications',
+    defaultMessage: 'Notifications',
+  },
+  reportedContentEmailNotificationsLabel: {
+    id: 'authoring.discussions.builtIn.reportedContentEmailNotifications.label',
+    defaultMessage: 'Email notifications for reported content',
+  },
+  reportedContentEmailNotificationsHelp: {
+    id: 'authoring.discussions.builtIn.reportedContentEmailNotifications.help',
+    defaultMessage: 'Discussion Admins, Moderators, Community TAs and Group Community TAs (only for their own cohort) will receive an email notification when content is reported.',
+  },
+
+  // Discussion Topics
+  discussionTopics: {
+    id: 'authoring.discussions.discussionTopics',
+    defaultMessage: 'Discussion topics',
+  },
+  discussionTopicsLabel: {
+    id: 'authoring.discussions.discussionTopics.label',
+    defaultMessage: 'General discussion topics',
+    description: 'Label for a discussion topic section allowing a user to add new topic.',
+  },
+  discussionTopicsHelp: {
+    id: 'authoring.discussions.discussionTopics.help',
+    defaultMessage: 'Discussions can include general topics not contained to the course structure. All courses have a general topic by default.',
+    description: 'Help text for adding new discussion topics that in general discussion topic section.',
+  },
+  discussionTopicRequired: {
+    id: 'authoring.discussions.discussionTopic.required',
+    defaultMessage: 'Topic name is a required field',
+    description: 'Tells the user that the discussion topic field is required and must have a value.',
+  },
+  discussionTopicNameAlreadyExist: {
+    id: 'authoring.discussions.discussionTopic.alreadyExistError',
+    defaultMessage: 'It looks like this name is already in use',
+    description: 'Tells the user that the discussion topic name already in use and must have a unique name.',
+  },
+  addTopicButton: {
+    id: 'authoring.discussions.addTopicButton',
+    defaultMessage: 'Add topic',
+    description: 'Button label when Add a new discussion topic.',
+  },
+  deleteButton: {
+    id: 'authoring.discussions.deleteButton',
+    defaultMessage: 'Delete',
+    description: 'Button label when delete discussion topic from conformation card.',
+  },
+  cancelButton: {
+    id: 'authoring.discussions.cancelButton',
+    defaultMessage: 'Cancel',
+    description: 'Button label when cancel discussion topic deletion conformation.',
+  },
+  discussionTopicDeletionHelp: {
+    id: 'authoring.discussions.discussionTopicDeletion.help',
+    defaultMessage: 'edX recommends that you do not delete discussion topics once your course is running.',
+    description: 'Help text for delete a discussion topic from discussion topic section.',
+  },
+  discussionTopicDeletionLabel: {
+    id: 'authoring.discussions.discussionTopicDeletion.label',
+    defaultMessage: 'Delete this topic?',
+    description: 'Label for discussion topic delete popup allowing a user to delete a topic.',
+  },
+  renameGeneralTopic: {
+    id: 'authoring.discussions.builtIn.renameGeneralTopic.label',
+    defaultMessage: 'Rename general topic',
+    description: 'Label for default topic allowing user to rename default general topic',
+  },
+  generalTopicHelp: {
+    id: 'authoring.discussions.generalTopicHelp.help',
+    defaultMessage: 'This is the default discussion topic for your course.',
+    description: 'Help text for general discussion topic collapsible card.',
+  },
+  configureAdditionalTopic: {
+    id: 'authoring.discussions.builtIn.configureAdditionalTopic.label',
+    defaultMessage: 'Configure topic',
+    description: 'Label for Additional topic allowing user to configure additional topic name',
+  },
+  addTopicHelpText: {
+    id: 'authoring.discussions.addTopicHelpText',
+    defaultMessage: 'Choose a unique name for your topic',
+    description: 'Help text for input field in adding a discussion topic',
+  },
+  // Restricted dates
+  restrictedStartDateHelp: {
+    id: 'authoring.discussions.restrictedStartDate.help',
+    defaultMessage: 'Enter a start date, e.g. 12/10/2023',
+  },
+  restrictedEndDateHelp: {
+    id: 'authoring.discussions.restrictedEndDate.help',
+    defaultMessage: 'Enter an end date, e.g. 12/17/2023',
+  },
+  restrictedStartTimeHelp: {
+    id: 'authoring.discussions.restrictedStartTime.help',
+    defaultMessage: 'Enter a start time, e.g. 09:00 AM',
+  },
+  restrictedEndTimeHelp: {
+    id: 'authoring.discussions.restrictedEndTime.help',
+    defaultMessage: 'Enter an end time, e.g. 05:00 PM',
+  },
+  restrictedDatesStatus: {
+    id: 'authoring.restrictedDates.status',
+    defaultMessage: '{status}',
+  },
+  restrictedStartDateRequired: {
+    id: 'authoring.restrictedDates.startDate.required',
+    defaultMessage: 'Start date is a required field',
+    description: 'Tells the user that the restricted dates must have start date and it is required.',
+  },
+  restrictedEndDateRequired: {
+    id: 'authoring.restrictedDates.endDate.required',
+    defaultMessage: 'End date is a required field',
+    description: 'Tells the user that the restricted dates must have end date and it is required.',
+  },
+  restrictedStartDateInPast: {
+    id: 'authoring.restrictedDates.startDate.inPast',
+    defaultMessage: 'Start date cannot be after end date',
+    description: 'Tells the user that the restricted start date cannot be in past and cannot be after end date',
+  },
+  restrictedEndDateInPast: {
+    id: 'authoring.restrictedDates.endDate.inPast',
+    defaultMessage: 'End date cannot be before start date',
+    description: 'Tells the user that the restricted end date cannot be in past and cannot be before start date',
+  },
+  restrictedStartTimeInPast: {
+    id: 'authoring.restrictedDates.startTime.inPast',
+    defaultMessage: 'Start time cannot be after end time',
+    description: 'Tells the user that the restricted start time cannot be in past and cannot be after end time',
+  },
+  restrictedEndTimeInPast: {
+    id: 'authoring.restrictedDates.endTime.inPast',
+    defaultMessage: 'End time cannot be before start time',
+    description: 'Tells the user that the restricted end time cannot be in past and cannot be before start time',
+  },
+  restrictedStartTimeInValidFormat: {
+    id: 'authoring.restrictedDates.startTime.inValidFormat',
+    defaultMessage: 'Enter a valid start time',
+    description: 'Tells the user that the restricted start time format is in valid',
+  },
+  restrictedEndTimeInValidFormat: {
+    id: 'authoring.restrictedDates.endTime.inValidFormat',
+    defaultMessage: 'Enter a valid end time',
+    description: 'Tells the user that the restricted end time format is in valid',
+  },
+  restrictedStartDateInValidFormat: {
+    id: 'authoring.restrictedDates.startDate.inValidFormat',
+    defaultMessage: 'Enter a valid start Date',
+    description: 'Tells the user that the restricted start date format is in valid',
+  },
+  restrictedEndDateInValidFormat: {
+    id: 'authoring.restrictedDates.endDate.inValidFormat',
+    defaultMessage: 'Enter a valid end date',
+    description: 'Tells the user that the restricted end date format is in valid',
+  },
+  discussionRestrictionLabel: {
+    id: 'authoring.discussions.builtIn.discussionRestriction.label',
+    defaultMessage: 'Discussion restrictions',
+  },
+  discussionRestrictionHelp: {
+    id: 'authoring.discussions.discussionRestriction.help',
+    defaultMessage: 'If enabled, learners will not be able to post in discussions.',
+  },
+  discussionRestrictionDatesHelp: {
+    id: 'authoring.discussions.discussionRestrictionDates.help',
+    defaultMessage: 'If added, learners will not be able to post in discussions between these dates.',
+  },
+  addRestrictedDatesButton: {
+    id: 'authoring.discussions.addRestrictedDatesButton',
+    defaultMessage: 'Add restricted dates',
+  },
+  configureRestrictedDates: {
+    id: 'authoring.discussions.builtIn.configureRestrictedDates.label',
+    defaultMessage: 'Configure restricted date range',
+  },
+  activeRestrictedDatesDeletionLabel: {
+    id: 'authoring.discussions.activeRestrictedDatesDeletion.label',
+    defaultMessage: 'Delete active restricted dates?',
+    description: 'Label for active restricted dates delete popup allowing a user to delete a restricted date range.',
+  },
+  activeRestrictedDatesDeletionHelp: {
+    id: 'authoring.discussions.activeRestrictedDatesDeletion.help',
+    defaultMessage: 'These restricted dates are currently active. If deleted, learners will be able to post in discussions during these dates. Are you sure you want to proceed?',
+    description: 'Help text for delete a active restricted dates from restricted dates section.',
+  },
+  completeRestrictedDatesDeletionHelp: {
+    id: 'authoring.discussions.completeRestrictedDatesDeletion.help',
+    defaultMessage: 'Are you sure you want to delete these restricted dates?',
+    description: 'Help text for delete a complete restricted dates from restricted dates section.',
+  },
+  restrictedDatesDeletionLabel: {
+    id: 'authoring.discussions.restrictedDatesDeletion.label',
+    defaultMessage: 'Delete restricted dates?',
+    description: 'Label for restricted dates delete popup allowing a user to delete a restricted date range.',
+  },
+  restrictedDatesDeletionHelp: {
+    id: 'authoring.discussions.restrictedDatesDeletion.help',
+    defaultMessage: 'If deleted, learners will be able to post in discussions during these dates.',
+    description: 'Help text for delete a upcoming restricted dates from restricted dates section.',
+  },
+  discussionRestrictionOffLabelHelpText: {
+    id: 'authoring.discussions.discussionRestrictionOff.label',
+    defaultMessage: 'If enabled, learners will be able to post in discussions',
+  },
+  discussionRestrictionOnLabelHelpText: {
+    id: 'authoring.discussions.discussionRestrictionOn.label',
+    defaultMessage: 'If enabled, learners will not be able to post in discussions',
+  },
+  discussionRestrictionScheduledLabelHelpText: {
+    id: 'authoring.discussions.discussionRestrictionScheduled.label',
+    defaultMessage: 'If added, learners will not be able to post in discussions between these dates.',
+  },
+  enableRestrictedDatesConfirmationLabel: {
+    id: 'authoring.discussions.enableRestrictedDatesConfirmation.label',
+    defaultMessage: 'Enable restricted dates?',
+  },
+  enableRestrictedDatesConfirmationHelp: {
+    id: 'authoring.discussions.enableRestrictedDatesConfirmation.help',
+    defaultMessage: 'Learners will not be able to post in discussions.',
+  },
+  deleteAltText: {
+    id: 'authoring.topics.delete',
+    defaultMessage: 'Delete Topic',
+  },
+  expandAltText: {
+    id: 'authoring.topics.expand',
+    defaultMessage: 'Expand',
+  },
+  collapseAltText: {
+    id: 'authoring.topics.collapse',
+    defaultMessage: 'Collapse',
+  },
+  startDateLabel: {
+    id: 'authoring.restrictedDates.start.date',
+    defaultMessage: 'Start date',
+    description: 'Label for start date field',
+  },
+  startTimeLabel: {
+    id: 'authoring.restrictedDates.start.time',
+    defaultMessage: 'Start time (optional)',
+    description: 'label for start time field',
+  },
+  endDateLabel: {
+    id: 'authoring.restrictedDates.end.date',
+    defaultMessage: 'End date',
+    description: 'label for end date field',
+  },
+  endTimeLabel: {
+    id: 'authoring.restrictedDates.end.time',
+    defaultMessage: 'End time (optional)',
+    description: 'label for end time field',
+  },
 });
 
 export default messages;
diff --git a/src/pages-and-resources/discussions/app-config-form/utils.js b/src/pages-and-resources/discussions/app-config-form/utils.js
index 232c6e38f3..0584c940b6 100644
--- a/src/pages-and-resources/discussions/app-config-form/utils.js
+++ b/src/pages-and-resources/discussions/app-config-form/utils.js
@@ -1,5 +1,100 @@
-const filterItemFromObject = (array, key, value) => (
+import moment from 'moment';
+import _ from 'lodash';
+import { getIn } from 'formik';
+import { restrictedDatesStatus as constants } from '../data/constants';
+
+export const filterItemFromObject = (array, key, value) => (
   array.filter(item => item[key] !== value)
 );
 
-export default filterItemFromObject;
+export const checkFieldErrors = (touched, errors, fieldPath, propertyName) => {
+  const path = fieldPath ? `${fieldPath}.${propertyName}` : propertyName;
+  return Boolean(getIn(errors, path) && getIn(touched, path));
+};
+
+export const errorExists = (errors, fieldPath, propertyName) => getIn(errors, `${fieldPath}.${propertyName}`);
+
+export const checkStatus = ([startDate, endDate]) => {
+  const today = moment(); let status;
+
+  if (moment(endDate).isBefore(today, 'days')) {
+    status = constants.COMPLETE;
+  } else if (moment(startDate).isAfter(today, 'days')) {
+    status = constants.UPCOMING;
+  } else {
+    status = constants.ACTIVE;
+  }
+  return status;
+};
+
+export const validTimeFormats = ['hh:mm A', 'HH:mm'];
+export const mergeDateTime = (date, time) => ((date && time) ? `${date}T${time}` : date);
+export const isSameDay = (startDate, endDate) => moment(startDate).isSame(endDate, 'day');
+export const isSameMonth = (startDate, endDate) => moment(startDate).isSame(endDate, 'month');
+export const isSameYear = (startDate, endDate) => moment(startDate).isSame(endDate, 'year');
+export const getTime = (dateTime) => (dateTime ? dateTime.split('T')[1] : '');
+export const hasValidDateFormat = (date) => moment(date, ['MM/DD/YYYY', 'YYYY-MM-DD'], true).isValid();
+export const hasValidTimeFormat = (time) => time && moment(time, validTimeFormats, true).isValid();
+export const startOfDayTime = (time) => time || moment().startOf('day').format('HH:mm');
+export const endOfDayTime = (time) => time || moment().endOf('day').format('HH:mm');
+export const normalizeTime = (time) => time && moment(time, validTimeFormats, true).format('HH:mm');
+export const normalizeDate = (date) => moment(date, ['MM/DD/YYYY', 'YYYY-MM-DDTHH:mm', 'YYYY-MM-DD'], true).format('YYYY-MM-DD');
+
+export const decodeDateTime = (date, time) => {
+  const nDate = normalizeDate(date);
+  const nTime = normalizeTime(time);
+
+  return moment(mergeDateTime(nDate, nTime));
+};
+
+export const sortRestrictedDatesByStatus = (data, status, order) => (
+  _.orderBy(
+    data.filter(date => date.status === status),
+    [(obj) => decodeDateTime(obj.startDate, startOfDayTime(obj.startTime))],
+    [order],
+  )
+);
+
+export const formatRestrictedDates = ({
+  startDate, startTime, endDate, endTime,
+}) => {
+  let formattedDate;
+  const hasSameDay = isSameDay(startDate, endDate);
+  const hasSameMonth = isSameMonth(startDate, endDate);
+  const hasSameYear = isSameYear(startDate, endDate);
+  const isTimeAvailable = Boolean(startTime || endTime);
+  const mStartDate = moment(startDate);
+  const mEndDate = moment(endDate);
+  const mStartDateTime = decodeDateTime(startDate, startOfDayTime(startTime));
+  const mEndDateTime = decodeDateTime(endDate, endOfDayTime(endTime));
+
+  if (hasSameDay && !isTimeAvailable) {
+    formattedDate = mStartDate.format('MMMM D, YYYY');
+  } else if (hasSameDay && isTimeAvailable) {
+    formattedDate = `
+      ${mStartDateTime.format('MMMM D, YYYY, h:mma')} -
+      ${mEndDateTime.format('h:mma')}
+    `;
+  } else if (hasSameMonth && !isTimeAvailable) {
+    formattedDate = `
+      ${mStartDate.format('MMMM D')} -
+      ${mEndDate.format('D, YYYY')}
+    `;
+  } else if (!hasSameMonth && hasSameYear && !isTimeAvailable) {
+    formattedDate = `
+      ${mStartDate.format('MMMM D')} -
+      ${mEndDate.format('MMMM D, YYYY')}
+    `;
+  } else if (!hasSameMonth && !hasSameYear && !isTimeAvailable) {
+    formattedDate = `
+      ${mStartDate.format('MMMM D, YYYY')} -
+      ${mEndDate.format('MMMM D, YYYY')}
+    `;
+  } else {
+    formattedDate = `
+      ${mStartDateTime.format('MMMM D, YYYY, h:mma')} -
+      ${mEndDateTime.format('MMMM D, YYYY, h:mma')}
+    `;
+  }
+  return formattedDate;
+};
diff --git a/src/pages-and-resources/discussions/app-list/AppCard.jsx b/src/pages-and-resources/discussions/app-list/AppCard.jsx
index f82fc52312..3fc9d2394e 100644
--- a/src/pages-and-resources/discussions/app-list/AppCard.jsx
+++ b/src/pages-and-resources/discussions/app-list/AppCard.jsx
@@ -6,13 +6,14 @@ import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import Responsive from 'react-responsive';
 import {
   Card, CheckboxControl, breakpoints,
-} from '@edx/paragon';
+} from '@openedx/paragon';
 import messages from './messages';
+import appMessages from '../app-config-form/messages';
 import FeaturesList from './FeaturesList';
 
-function AppCard({
+const AppCard = ({
   app, onClick, intl, selected, features,
-}) {
+}) => {
   const { canChangeProviders } = useSelector(state => state.courseDetail);
   const supportText = app.hasFullSupport
     ? intl.formatMessage(messages.appFullSupport)
@@ -20,50 +21,48 @@ function AppCard({
 
   return (
     <Card
-      tabIndex="-1"
+      isClickable
       onClick={() => canChangeProviders && onClick(app.id)}
       onKeyPress={() => canChangeProviders && onClick(app.id)}
       role="radio"
       aria-checked={selected}
-      style={{
-        cursor: 'pointer',
-      }}
       className={classNames({
         'border-primary': selected,
       }, 'w-100')}
     >
-      <div
-        className="position-absolute mt-3 mr-3"
-        style={{
-          top: '0.75rem',
-          right: '0.75rem',
-        }}
-      >
-        <CheckboxControl
-          checked={selected}
-          disabled={!canChangeProviders}
-          readOnly
-          aria-label={intl.formatMessage(messages.selectApp, {
-            appName: intl.formatMessage(messages[`appName-${app.id}`]),
-          })}
-        />
-      </div>
+      <Card.Header
+        title={<div data-testid="card-title">{intl.formatMessage(appMessages[`appName-${app.id}`])}</div>}
+        subtitle={<div className="h6 text-muted" data-testid="card-subtitle">{supportText}</div>}
+        actions={(
+          <div className="mt-2.5">
+            <CheckboxControl
+              checked={selected}
+              disabled={!canChangeProviders}
+              readOnly
+              aria-label={intl.formatMessage(messages.selectApp, {
+                appName: intl.formatMessage(appMessages[`appName-${app.id}`]),
+              })}
+            />
+          </div>
+        )}
+        size="sm"
+      />
       <Card.Body>
-        <div className="h4 card-title">
-          {intl.formatMessage(messages[`appName-${app.id}`])}
+        <div data-testid="card-text">
+          <Card.Section className="pt-2">
+            {intl.formatMessage(messages[`appDescription-${app.id}`])}
+            <Responsive maxWidth={breakpoints.extraSmall.maxWidth}>
+              <FeaturesList
+                features={features}
+                app={app}
+              />
+            </Responsive>
+          </Card.Section>
         </div>
-        <Card.Subtitle className="mb-3 text-muted">{supportText}</Card.Subtitle>
-        <Card.Text>{intl.formatMessage(messages[`appDescription-${app.id}`])}</Card.Text>
-        <Responsive maxWidth={breakpoints.extraSmall.maxWidth}>
-          <FeaturesList
-            features={features}
-            app={app}
-          />
-        </Responsive>
       </Card.Body>
     </Card>
   );
-}
+};
 
 AppCard.propTypes = {
   app: PropTypes.shape({
@@ -74,7 +73,7 @@ AppCard.propTypes = {
   onClick: PropTypes.func.isRequired,
   selected: PropTypes.bool.isRequired,
   intl: intlShape.isRequired,
-  features: PropTypes.arrayOf(PropTypes.object).isRequired,
+  features: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
 };
 
 export default injectIntl(AppCard);
diff --git a/src/pages-and-resources/discussions/app-list/AppCard.test.jsx b/src/pages-and-resources/discussions/app-list/AppCard.test.jsx
index aee5ee0a1b..7eca374daa 100644
--- a/src/pages-and-resources/discussions/app-list/AppCard.test.jsx
+++ b/src/pages-and-resources/discussions/app-list/AppCard.test.jsx
@@ -4,14 +4,15 @@ import { initializeMockApp } from '@edx/frontend-platform';
 import { AppProvider } from '@edx/frontend-platform/react';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import MockAdapter from 'axios-mock-adapter';
-import { render, queryByLabelText } from '@testing-library/react';
+import { render, queryByLabelText, queryByTestId } from '@testing-library/react';
 
 import AppCard from './AppCard';
 import messages from './messages';
+import appMessages from '../app-config-form/messages';
 import initializeStore from '../../../store';
 import { executeThunk } from '../../../utils';
-import { getAppsUrl } from '../data/api';
-import { fetchApps } from '../data/thunks';
+import { getDiscussionsProvidersUrl } from '../data/api';
+import { fetchProviders } from '../data/thunks';
 import { legacyApiResponse } from '../factories/mockApiResponses';
 
 const courseId = 'course-v1:edX+TestX+Test_Course';
@@ -42,8 +43,8 @@ describe('AppCard', () => {
   });
 
   const mockStore = async (mockResponse) => {
-    axiosMock.onGet(getAppsUrl(courseId)).reply(200, mockResponse);
-    await executeThunk(fetchApps(courseId), store.dispatch);
+    axiosMock.onGet(getDiscussionsProvidersUrl(courseId)).reply(200, mockResponse);
+    await executeThunk(fetchProviders(courseId), store.dispatch);
   };
 
   const createComponent = (data) => {
@@ -64,7 +65,7 @@ describe('AppCard', () => {
   };
 
   test('checkbox input is checked when AppCard is selected', async () => {
-    const labelText = `Select ${messages[`appName-${app.id}`].defaultMessage}`;
+    const labelText = `Select ${appMessages[`appName-${app.id}`].defaultMessage}`;
 
     await mockStore(legacyApiResponse);
     createComponent(app);
@@ -78,14 +79,14 @@ describe('AppCard', () => {
     [false],
   ])('providerName and text from the app are displayed with full support %s', async (hasFullSupport) => {
     const appWithCustomSupport = { ...app, hasFullSupport };
-    const title = messages[`appName-${appWithCustomSupport.id}`].defaultMessage;
+    const title = appMessages[`appName-${appWithCustomSupport.id}`].defaultMessage;
     const text = messages[`appDescription-${appWithCustomSupport.id}`].defaultMessage;
 
     await mockStore(legacyApiResponse);
     createComponent(appWithCustomSupport);
 
-    expect(container.querySelector('.card-title')).toHaveTextContent(title);
-    expect(container.querySelector('.card-text')).toHaveTextContent(text);
+    expect(queryByTestId(container, 'card-title')).toHaveTextContent(title);
+    expect(queryByTestId(container, 'card-text')).toHaveTextContent(text);
   });
 
   test('full support subtitle shown when hasFullSupport is true', async () => {
@@ -94,7 +95,7 @@ describe('AppCard', () => {
     await mockStore(legacyApiResponse);
     createComponent(app);
 
-    expect(container.querySelector('.card-subtitle')).toHaveTextContent(subtitle);
+    expect(queryByTestId(container, 'card-subtitle')).toHaveTextContent(subtitle);
   });
 
   test('partial support subtitle shown when hasFullSupport is false', async () => {
@@ -104,6 +105,6 @@ describe('AppCard', () => {
     await mockStore(legacyApiResponse);
     createComponent(appWithBasicSupport);
 
-    expect(container.querySelector('.card-subtitle')).toHaveTextContent(subtitle);
+    expect(queryByTestId(container, 'card-subtitle')).toHaveTextContent(subtitle);
   });
 });
diff --git a/src/pages-and-resources/discussions/app-list/AppList.jsx b/src/pages-and-resources/discussions/app-list/AppList.jsx
index 39e20914ed..55e2cd87c8 100644
--- a/src/pages-and-resources/discussions/app-list/AppList.jsx
+++ b/src/pages-and-resources/discussions/app-list/AppList.jsx
@@ -1,27 +1,43 @@
-import React, { useCallback, useEffect } from 'react';
+import React, {
+  useCallback, useEffect, useMemo, useState, useContext,
+} from 'react';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { CardGrid, Container, breakpoints } from '@edx/paragon';
+import {
+  CardGrid, Container, breakpoints, Form, ActionRow, AlertModal, Button, StatefulButton,
+} from '@openedx/paragon';
 import { useDispatch, useSelector } from 'react-redux';
 import Responsive from 'react-responsive';
+import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import { useModels } from '../../../generic/model-store';
 import {
-  selectApp, LOADED, LOADING,
-  updateValidationStatus,
+  selectApp, LOADED, LOADING, SAVING, updateValidationStatus,
 } from '../data/slice';
 import AppCard from './AppCard';
 import messages from './messages';
 import FeaturesTable from './FeaturesTable';
 import AppListNextButton from './AppListNextButton';
 import Loading from '../../../generic/Loading';
+import useIsOnSmallScreen from '../data/hook';
+import { saveProviderConfig, fetchDiscussionSettings } from '../data/thunks';
+import { PagesAndResourcesContext } from '../../PagesAndResourcesProvider';
+import { discussionRestriction } from '../data/constants';
 
-function AppList({ intl }) {
+const AppList = ({ intl }) => {
   const dispatch = useDispatch();
-
+  const { courseId } = useContext(PagesAndResourcesContext);
   const {
-    appIds, featureIds, status, activeAppId, selectedAppId,
+    appIds, featureIds, status, saveStatus, activeAppId, selectedAppId, enabled, postingRestrictions,
   } = useSelector(state => state.discussions);
+  const [discussionTabToggle, setDiscussionTabToggle] = useState(enabled);
   const apps = useModels('apps', appIds);
   const features = useModels('features', featureIds);
+  const isGlobalStaff = getAuthenticatedUser().administrator;
+  const ltiProvider = !['openedx', 'legacy'].includes(activeAppId);
+  const isOnSmallScreen = useIsOnSmallScreen();
+
+  const showOneEdxProvider = useMemo(() => apps.filter(app => (
+    activeAppId === 'openedx' ? app.id !== 'legacy' : app.id !== 'openedx'
+  )), [activeAppId]);
 
   // This could be a bit confusing.  activeAppId is the ID of the app that is currently configured
   // according to the server.  selectedAppId is the ID of the app that we _want_ to configure here
@@ -36,9 +52,49 @@ function AppList({ intl }) {
     dispatch(updateValidationStatus({ hasError: false }));
   }, [selectedAppId, activeAppId]);
 
+  useEffect(() => {
+    setDiscussionTabToggle(enabled);
+  }, [enabled]);
+
+  useEffect(() => {
+    if (!postingRestrictions) {
+      dispatch(fetchDiscussionSettings(courseId, selectedAppId));
+    }
+  }, [courseId]);
+
   const handleSelectApp = useCallback((appId) => {
     dispatch(selectApp({ appId }));
-  }, [selectedAppId]);
+  }, []);
+
+  const updateSettings = useCallback((enabledDiscussion) => {
+    dispatch(saveProviderConfig(
+      courseId,
+      selectedAppId,
+      {
+        enabled: enabledDiscussion,
+        postingRestrictions:
+        enabledDiscussion ? postingRestrictions : discussionRestriction.ENABLED,
+      },
+    ));
+  }, [courseId, selectedAppId, postingRestrictions]);
+
+  const handleClose = useCallback(() => {
+    setDiscussionTabToggle(enabled);
+  }, [enabled]);
+
+  const handleOk = useCallback(() => {
+    setDiscussionTabToggle(false);
+    updateSettings(false);
+  }, [updateSettings]);
+
+  const handleChange = useCallback((e) => {
+    const toggleVal = e.target.checked;
+    if (!toggleVal) {
+      updateSettings(!toggleVal);
+    } else {
+      setDiscussionTabToggle(!toggleVal);
+    }
+  }, [updateSettings]);
 
   if (!selectedAppId || status === LOADING) {
     return (
@@ -54,27 +110,43 @@ function AppList({ intl }) {
     );
   }
 
+  const showAppCard = (filteredApps) => filteredApps.map(app => (
+    <AppCard
+      key={app.id}
+      app={app}
+      selected={app.id === selectedAppId}
+      onClick={handleSelectApp}
+      features={features}
+    />
+  ));
+
   return (
-    <div className="m-1  my-sm-5" data-testid="appList">
-      <h3 className="my-sm-5 my-4">
-        {intl.formatMessage(messages.heading)}
-      </h3>
+    <div className="my-sm-4" data-testid="appList">
+      <div className={!isOnSmallScreen ? 'd-flex flex-row justify-content-between align-items-center' : 'mb-4'}>
+        <h3 className={isOnSmallScreen ? 'mb-3' : 'm-0'}>
+          {intl.formatMessage(messages.heading)}
+        </h3>
+        <Form.Switch
+          floatLabelLeft
+          className="text-primary-500 align-items-center"
+          labelClassName="line-height-24"
+          onChange={handleChange}
+          checked={!enabled}
+          data-testid="hide-discussion"
+        >
+          {intl.formatMessage(messages.hideDiscussionTab)}
+        </Form.Switch>
+      </div>
       <CardGrid
         columnSizes={{
           xs: 12,
           sm: 6,
           lg: 4,
+          xl: 4,
         }}
+        className={!isOnSmallScreen && 'mt-5'}
       >
-        {apps.map(app => (
-          <AppCard
-            key={app.id}
-            app={app}
-            selected={app.id === selectedAppId}
-            onClick={handleSelectApp}
-            features={features}
-          />
-        ))}
+        {(isGlobalStaff || ltiProvider) ? showAppCard(apps) : showAppCard(showOneEdxProvider)}
       </CardGrid>
       <Responsive minWidth={breakpoints.small.minWidth}>
         <h3 className="my-sm-5 my-4">
@@ -87,9 +159,36 @@ function AppList({ intl }) {
           />
         </div>
       </Responsive>
+      <AlertModal
+        title={intl.formatMessage(messages.hideDiscussionTabTitle)}
+        isOpen={enabled && !discussionTabToggle}
+        onClose={handleClose}
+        isBlocking
+        className="hide-discussion-modal"
+        footerNode={(
+          <ActionRow>
+            <Button variant="link" className="text-decoration-none bg-black" onClick={handleClose}>
+              {intl.formatMessage(messages.hideDiscussionCancelButton)}
+            </Button>
+            <StatefulButton
+              labels={{
+                default: intl.formatMessage(messages.hideDiscussionOkButton),
+              }}
+              state={saveStatus === SAVING ? 'pending' : 'default'}
+              className="ml-2"
+              variant="primary"
+              onClick={handleOk}
+            />
+          </ActionRow>
+        )}
+      >
+        <p className="bg-black">
+          {intl.formatMessage(messages.hideDiscussionTabMessage)}
+        </p>
+      </AlertModal>
     </div>
   );
-}
+};
 
 AppList.propTypes = {
   intl: intlShape.isRequired,
diff --git a/src/pages-and-resources/discussions/app-list/AppList.scss b/src/pages-and-resources/discussions/app-list/AppList.scss
index 40e2a3c736..83d3c3c915 100644
--- a/src/pages-and-resources/discussions/app-list/AppList.scss
+++ b/src/pages-and-resources/discussions/app-list/AppList.scss
@@ -9,7 +9,8 @@
         background-color: $white;
         text-align: center;
 
-        .d-flex, span {
+        .d-flex,
+        span {
           display: block !important;
         }
       }
@@ -20,7 +21,102 @@
         .pgn__data-table-cell-wrap {
           max-width: unset;
         }
+      }
+    }
+  }
+}
+
+.height-36 {
+  height: 2.25rem !important;
+}
+
+.line-height-20 {
+  line-height: 1.25rem !important;
+}
+
+.font-size-14 {
+  font-size: 14px !important;
+}
+
+.font-weight-500 {
+  font-weight: 500 !important;
+}
+
+.py-7px {
+  padding: 0 7px;
+}
+
+.line-height-24 {
+  line-height: 24px !important;
+}
+
+.hide-discussion-modal {
+  .pgn__modal-header {
+    padding-top: 24px;
+
+    h2 {
+      color: $primary-500;
+      line-height: 28px;
+      font-size: 22px;
+    }
+  }
+
+  .bg-black {
+    color: #000000;
+  }
+
+  .pgn__modal-footer {
+    padding-top: 8px;
+    padding-bottom: 24px;
+  }
+
+  button {
+    font-weight: 500;
+  }
+}
+
+.discussion-restriction {
+  .unselected-button {
+    &:hover {
+      background: #E9E6E4;
+    }
+  }
+
+  .action-btn {
+    padding: 10px 16px;
+    width: 80px;
+    height: 44px;
+    font-weight: 500;
+    font-size: 18px;
+    line-height: 24px;
+  }
+
+  .w-92 {
+    width: 92px;
+  }
+
+  .card-body-section {
+    padding-top: 12px !important;
+    padding-bottom: 20px !important;
+  }
+
+  .form-control {
+    border-radius: 0 !important;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 24px;
+  }
+
+  .collapsible-card {
+    padding: 14px 14px 14px 24px !important;
+    min-height: 100px;
+
+    .collapsible-trigger {
+      padding: 0 !important;
 
+      .badge {
+        font-size: 12px;
+        line-height: 20px;
       }
     }
   }
diff --git a/src/pages-and-resources/discussions/app-list/AppList.test.jsx b/src/pages-and-resources/discussions/app-list/AppList.test.jsx
index 7ff124d606..c8ff8c8a9e 100644
--- a/src/pages-and-resources/discussions/app-list/AppList.test.jsx
+++ b/src/pages-and-resources/discussions/app-list/AppList.test.jsx
@@ -1,107 +1,178 @@
+/* eslint-disable react/jsx-no-constructed-context-values */
 import React from 'react';
-
+import {
+  render, screen, within, queryAllByRole, waitFor, fireEvent,
+} from '@testing-library/react';
 import { initializeMockApp } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { act } from 'react-dom/test-utils';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { AppProvider } from '@edx/frontend-platform/react';
-import { breakpoints } from '@edx/paragon';
-import {
-  queryByText, render, queryAllByRole, queryByRole, getByRole, queryByLabelText, getByLabelText, queryAllByText,
-} from '@testing-library/react';
+import { breakpoints } from '@openedx/paragon';
 import userEvent from '@testing-library/user-event';
 import MockAdapter from 'axios-mock-adapter';
 import { Context as ResponsiveContext } from 'react-responsive';
 
 import initializeStore from '../../../store';
 import { executeThunk } from '../../../utils';
-import { getAppsUrl } from '../data/api';
-import { fetchApps } from '../data/thunks';
-import { emptyAppApiResponse, piazzaApiResponse } from '../factories/mockApiResponses';
+import { getDiscussionsProvidersUrl, getDiscussionsSettingsUrl } from '../data/api';
+import { fetchDiscussionSettings, fetchProviders } from '../data/thunks';
+import {
+  generateProvidersApiResponse,
+  piazzaApiResponse,
+  legacyApiResponse,
+} from '../factories/mockApiResponses';
 import AppList from './AppList';
 import messages from './messages';
 
 const courseId = 'course-v1:edX+TestX+Test_Course';
+let axiosMock;
+let store;
+let container;
+
+const mockStore = async (mockResponse, provider) => {
+  axiosMock.onGet(getDiscussionsProvidersUrl(courseId))
+    .reply(200, generateProvidersApiResponse(false, provider));
+  axiosMock.onGet(getDiscussionsSettingsUrl(courseId)).reply(200, mockResponse);
+  await executeThunk(fetchProviders(courseId), store.dispatch);
+  await executeThunk(fetchDiscussionSettings(courseId), store.dispatch);
+};
+
+function renderComponent(screenWidth = breakpoints.extraLarge.minWidth) {
+  const wrapper = render(
+    <AppProvider store={store}>
+      <ResponsiveContext.Provider value={{ width: screenWidth }}>
+        <IntlProvider locale="en">
+          <AppList />
+        </IntlProvider>
+      </ResponsiveContext.Provider>
+    </AppProvider>,
+  );
+  container = wrapper.container;
+}
 
 describe('AppList', () => {
-  let axiosMock;
-  let store;
-  let container;
-
-  function createComponent(screenWidth = breakpoints.extraLarge.minWidth) {
-    return (
-      <AppProvider store={store}>
-        <ResponsiveContext.Provider value={{ width: screenWidth }}>
-          <IntlProvider locale="en" messages={{}}>
-            <AppList />
-          </IntlProvider>
-        </ResponsiveContext.Provider>
-      </AppProvider>
-    );
-  }
-
-  beforeEach(async () => {
-    initializeMockApp({
-      authenticatedUser: {
-        userId: 3,
-        username: 'abc123',
-        administrator: true,
-        roles: [],
-      },
+  describe('AppList for Admin role', () => {
+    beforeEach(async () => {
+      initializeMockApp({
+        authenticatedUser: {
+          userId: 3,
+          username: 'abc123',
+          administrator: true,
+          roles: [],
+        },
+      });
+
+      store = await initializeStore();
+      axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+      await mockStore(piazzaApiResponse);
     });
 
-    store = await initializeStore();
-    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
-  });
+    test('Successfully shows the disable toggle state of the hide discussion tab by default.', async () => {
+      renderComponent();
 
-  const mockStore = async (mockResponse, screenWidth = breakpoints.extraLarge.minWidth) => {
-    axiosMock.onGet(getAppsUrl(courseId)).reply(200, mockResponse);
-    await executeThunk(fetchApps(courseId), store.dispatch);
-    const component = createComponent(screenWidth);
-    const wrapper = render(component);
-    container = wrapper.container;
-  };
-
-  test('displays a message when there are no apps available', async () => {
-    await mockStore(emptyAppApiResponse);
-    expect(queryByText(container, `${messages.noApps.defaultMessage}`)).toBeInTheDocument();
-  });
+      await waitFor(async () => {
+        const hideDiscussionTab = screen.getByTestId('hide-discussion');
 
-  test('displays loading state when there is no active App', async () => {
-    await mockStore({});
-    expect(queryByRole(container, 'status')).toBeInTheDocument();
-  });
+        expect(hideDiscussionTab).not.toBeChecked();
+      });
+    });
 
-  test('display a card for each available app', async () => {
-    await mockStore(piazzaApiResponse);
-    const appCount = store.getState().discussions.appIds.length;
-    expect(queryAllByRole(container, 'radio')).toHaveLength(appCount);
-  });
+    test.each([
+      { title: 'Ok', description: 'Enable the toggle state by clicking on OK button' },
+      { title: 'Cancel', description: 'Disable the toggle state by clicking on Cancel button' },
+    ])('%s of the hide discussion tab', async ({ title }) => {
+      renderComponent();
 
-  test('displays the FeaturesTable at desktop sizes', async () => {
-    await mockStore(piazzaApiResponse);
-    expect(queryByRole(container, 'table')).toBeInTheDocument();
-  });
+      await waitFor(async () => {
+        let hideDiscussionTab = screen.getByTestId('hide-discussion');
 
-  test('hides the FeaturesTable at mobile sizes', async () => {
-    await mockStore(piazzaApiResponse, breakpoints.extraSmall.maxWidth);
-    expect(queryByRole(container, 'table')).not.toBeInTheDocument();
-  });
+        await act(async () => {
+          fireEvent.click(hideDiscussionTab);
+        });
 
-  test('hides the FeaturesList at desktop sizes', async () => {
-    await mockStore(piazzaApiResponse);
-    expect(queryByText(container, messages['supportedFeatureList-mobile-show'].defaultMessage)).not.toBeInTheDocument();
-  });
+        const actionButton = screen.queryByText(title);
+
+        await act(async () => {
+          fireEvent.click(actionButton);
+        });
+
+        hideDiscussionTab = screen.getByTestId('hide-discussion');
+
+        if (title === 'OK') {
+          expect(hideDiscussionTab).toBeChecked();
+        } else {
+          expect(hideDiscussionTab).not.toBeChecked();
+        }
+      });
+    });
 
-  test('displays the FeaturesList at mobile sizes', async () => {
-    await mockStore(piazzaApiResponse, breakpoints.extraSmall.maxWidth);
-    const appCount = store.getState().discussions.appIds.length;
-    expect(queryAllByText(container, messages['supportedFeatureList-mobile-show'].defaultMessage)).toHaveLength(appCount);
+    test('display a card for each available app', async () => {
+      renderComponent();
+
+      await waitFor(async () => {
+        const appCount = await store.getState().discussions.appIds.length;
+        expect(screen.queryAllByRole('radio')).toHaveLength(appCount);
+      });
+    });
+
+    test('displays the FeaturesTable at desktop sizes', async () => {
+      renderComponent();
+      await waitFor(() => expect(screen.queryByRole('table')).toBeInTheDocument());
+    });
+
+    test('hides the FeaturesTable at mobile sizes', async () => {
+      renderComponent(breakpoints.extraSmall.maxWidth);
+      await waitFor(() => expect(screen.queryByRole('table')).not.toBeInTheDocument());
+    });
+
+    test('hides the FeaturesList at desktop sizes', async () => {
+      renderComponent();
+      await waitFor(() => expect(screen.queryByText(messages['supportedFeatureList-mobile-show'].defaultMessage))
+        .not.toBeInTheDocument());
+    });
+
+    test('displays the FeaturesList at mobile sizes', async () => {
+      renderComponent(breakpoints.extraSmall.maxWidth);
+
+      await waitFor(async () => {
+        const appCount = await store.getState().discussions.appIds.length;
+        expect(screen.queryAllByText(messages['supportedFeatureList-mobile-show'].defaultMessage))
+          .toHaveLength(appCount);
+      });
+    });
+
+    test('selectApp is called when an app is clicked', async () => {
+      renderComponent();
+
+      await waitFor(() => {
+        userEvent.click(screen.getByLabelText('Select Piazza'));
+        const clickedCard = screen.getByRole('radio', { checked: true });
+        expect(within(clickedCard).queryByLabelText('Select Piazza')).toBeInTheDocument();
+      });
+    });
   });
 
-  test('selectApp is called when an app is clicked', async () => {
-    await mockStore(piazzaApiResponse);
-    userEvent.click(getByLabelText(container, 'Select Piazza'));
-    const clickedCard = getByRole(container, 'radio', { checked: true });
-    expect(queryByLabelText(clickedCard, 'Select Piazza')).toBeInTheDocument();
+  describe('AppList for Non Admin role', () => {
+    beforeEach(async () => {
+      initializeMockApp({
+        authenticatedUser: {
+          userId: 3,
+          username: 'abc123',
+          administrator: false,
+          roles: [],
+        },
+      });
+
+      store = await initializeStore();
+      axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+      await mockStore(legacyApiResponse, 'legacy');
+    });
+
+    test('does not display two edx providers card for non admin role', async () => {
+      renderComponent();
+      const appCount = store.getState().discussions.appIds.length;
+      await waitFor(() => expect(queryAllByRole(container, 'radio')).toHaveLength(appCount - 1));
+    });
   });
 });
diff --git a/src/pages-and-resources/discussions/app-list/AppListNextButton.jsx b/src/pages-and-resources/discussions/app-list/AppListNextButton.jsx
index 14642804f7..db1dee3e58 100644
--- a/src/pages-and-resources/discussions/app-list/AppListNextButton.jsx
+++ b/src/pages-and-resources/discussions/app-list/AppListNextButton.jsx
@@ -1,19 +1,20 @@
 import React, { useCallback, useContext } from 'react';
-import { history } from '@edx/frontend-platform';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Button } from '@edx/paragon';
+import { Button } from '@openedx/paragon';
 import { useSelector } from 'react-redux';
+import { useNavigate } from 'react-router-dom';
 
 import { DiscussionsContext } from '../DiscussionsProvider';
 
 import messages from './messages';
 
-function AppListNextButton({ intl }) {
+const AppListNextButton = ({ intl }) => {
   const { selectedAppId } = useSelector(state => state.discussions);
   const { path: discussionsPath } = useContext(DiscussionsContext);
+  const navigate = useNavigate();
 
   const handleStartConfig = useCallback(() => {
-    history.push(`${discussionsPath}/configure/${selectedAppId}`);
+    navigate(`${discussionsPath}/configure/${selectedAppId}`);
   }, [discussionsPath, selectedAppId]);
 
   return (
@@ -24,7 +25,7 @@ function AppListNextButton({ intl }) {
       {intl.formatMessage(messages.nextButton)}
     </Button>
   );
-}
+};
 
 AppListNextButton.propTypes = {
   intl: intlShape.isRequired,
diff --git a/src/pages-and-resources/discussions/app-list/FeatureList.test.jsx b/src/pages-and-resources/discussions/app-list/FeatureList.test.jsx
index ffa7e95333..7b4d7e1dd0 100644
--- a/src/pages-and-resources/discussions/app-list/FeatureList.test.jsx
+++ b/src/pages-and-resources/discussions/app-list/FeatureList.test.jsx
@@ -14,12 +14,6 @@ describe('FeaturesList', () => {
     hasFullSupport: false,
     id: 'legacy',
   };
-  const features = [
-    { id: 'lti-basic-configuration' },
-    { id: 'wcag-2.1' },
-    { id: 'discussion-page' },
-    { id: 'embedded-course-sections' },
-  ];
   let container;
 
   beforeEach(() => {
@@ -27,7 +21,6 @@ describe('FeaturesList', () => {
       <IntlProvider locale="en">
         <FeaturesList
           app={app}
-          features={features}
         />
       </IntlProvider>,
     );
@@ -47,10 +40,8 @@ describe('FeaturesList', () => {
   test('displays a row for each available feature', () => {
     const button = getByRole(container, 'button');
     userEvent.click(button);
-    features.forEach((feature) => {
-      const featureNodes = queryAllByText(
-        container, messages[`featureName-${feature.id}`].defaultMessage,
-      );
+    app.featureIds.forEach((id) => {
+      const featureNodes = queryAllByText(container, messages[`featureName-${id}`].defaultMessage);
       expect(featureNodes.map(node => node.closest('div'))).toHaveLength(1);
     });
   });
@@ -58,22 +49,9 @@ describe('FeaturesList', () => {
   test('A check icon is shown with each supported feature', () => {
     const button = getByRole(container, 'button');
     userEvent.click(button);
-    features.forEach((feature) => {
-      const featureElement = queryByText(container, messages[`featureName-${feature.id}`].defaultMessage);
-      if (app.featureIds.includes(feature.id)) {
-        expect(featureElement.querySelector('svg')).toHaveAttribute('id', 'check-icon');
-      }
-    });
-  });
-
-  test('A dash icon is shown with each unsupported feature', () => {
-    const button = getByRole(container, 'button');
-    userEvent.click(button);
-    features.forEach((feature) => {
-      const featureElement = queryByText(container, messages[`featureName-${feature.id}`].defaultMessage);
-      if (!app.featureIds.includes(feature.id)) {
-        expect(featureElement.querySelector('svg')).toHaveAttribute('id', 'remove-icon');
-      }
+    app.featureIds.forEach((id) => {
+      const featureElement = queryByText(container, messages[`featureName-${id}`].defaultMessage);
+      expect(featureElement.querySelector('svg')).toHaveAttribute('id', 'check-icon');
     });
   });
 });
diff --git a/src/pages-and-resources/discussions/app-list/FeaturesList.jsx b/src/pages-and-resources/discussions/app-list/FeaturesList.jsx
index 9f2f7b9326..18296d8817 100644
--- a/src/pages-and-resources/discussions/app-list/FeaturesList.jsx
+++ b/src/pages-and-resources/discussions/app-list/FeaturesList.jsx
@@ -1,56 +1,40 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Remove, Check } from '@edx/paragon/icons';
-import { Collapsible } from '@edx/paragon';
+import { Collapsible } from '@openedx/paragon';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+
+import SupportedFeature from './SupportedFeature';
 import messages from './messages';
 
-const SupportedFeature = (
-  <span className="mr-3">
-    <Check id="check-icon" className="text-success-500" />
-  </span>
-);
-const NonSupportedFeature = (
-  <span className="mr-3">
-    <Remove id="remove-icon" className="text-light-700" />
-  </span>
+const FeaturesList = ({ app, intl }) => (
+  <Collapsible
+    onClick={(event) => event.stopPropagation()}
+    title={(
+      <>
+        <Collapsible.Visible whenClosed>
+          {intl.formatMessage(messages['supportedFeatureList-mobile-show'])}
+        </Collapsible.Visible>
+        <Collapsible.Visible whenOpen>
+          {intl.formatMessage(messages['supportedFeatureList-mobile-hide'])}
+        </Collapsible.Visible>
+      </>
+    )}
+    styling="basic"
+  >
+    {app.featureIds.map((id) => (
+      <div key={`collapsible-${app.id}&${id}`} className="d-flex mb-1">
+        <SupportedFeature name={intl.formatMessage(messages[`featureName-${id}`])} />
+      </div>
+    ))}
+  </Collapsible>
 );
 
-function FeaturesList({ app, features, intl }) {
-  return (
-    <Collapsible
-      onClick={(event) => event.stopPropagation()}
-      title={(
-        <>
-          <Collapsible.Visible whenClosed>
-            {intl.formatMessage(messages['supportedFeatureList-mobile-show'])}
-          </Collapsible.Visible>
-          <Collapsible.Visible whenOpen>
-            {intl.formatMessage(messages['supportedFeatureList-mobile-hide'])}
-          </Collapsible.Visible>
-        </>
-      )}
-      styling="basic"
-    >
-      {features && features.map((feature) => (
-        <div key={`collapsible-${app.id}&${feature.id}`} className="d-flex mb-1">
-          {app.featureIds.includes(feature.id)
-            ? SupportedFeature
-            : NonSupportedFeature}
-          {intl.formatMessage(messages[`featureName-${feature.id}`])}
-        </div>
-      ))}
-    </Collapsible>
-  );
-}
-
 export default injectIntl(FeaturesList);
 
 FeaturesList.propTypes = {
   app: PropTypes.shape({
     id: PropTypes.string.isRequired,
-    featureIds: PropTypes.array.isRequired,
+    featureIds: PropTypes.shape([]).isRequired,
   }).isRequired,
-  features: PropTypes.arrayOf(PropTypes.object).isRequired,
   intl: intlShape.isRequired,
 };
diff --git a/src/pages-and-resources/discussions/app-list/FeaturesTable.jsx b/src/pages-and-resources/discussions/app-list/FeaturesTable.jsx
index cc14d3a159..011f2bbc84 100644
--- a/src/pages-and-resources/discussions/app-list/FeaturesTable.jsx
+++ b/src/pages-and-resources/discussions/app-list/FeaturesTable.jsx
@@ -1,45 +1,76 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Remove, Check } from '@edx/paragon/icons';
-import { DataTable } from '@edx/paragon';
+import { Remove, Check } from '@openedx/paragon/icons';
+import { DataTable } from '@openedx/paragon';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import _ from 'lodash';
+
 import messages from './messages';
+import appMessages from '../app-config-form/messages';
+import { FEATURE_TYPES } from '../data/constants';
 import './FeaturesTable.scss';
 
-function FeaturesTable({ apps, features, intl }) {
+const FeaturesTable = ({ apps, features, intl }) => {
+  const {
+    basic, partial, full, common,
+  } = _.groupBy(features, (feature) => feature.featureSupportType);
+
+  const createRow = (feature) => {
+    const appCheckmarkCells = {};
+    // DataTable wants 'data' to be    an array of objects where each property of an object
+    // represents a cell in that row, identified by its key.
+    apps.forEach(app => {
+      // If our app's set of feature Ids includes this feature, return a checkmark.
+      // i.e, if this app has the current feature, check it!
+      if (FEATURE_TYPES.includes(feature)) {
+        appCheckmarkCells[app.id] = <div key={feature} data-testid={feature} />;
+      } else {
+        appCheckmarkCells[app.id] = (
+          <div
+            className="text-center"
+            key={`${app.id}&${feature.id}`}
+            data-testid={`${app.id}-${feature.id.replaceAll('.', '-')}`}
+          >
+            {
+              app.featureIds.includes(feature.id)
+                ? <Check id="check-icon" className="text-success-500" />
+                : <Remove id="remove-icon" className="text-light-700" />
+            }
+          </div>
+        );
+      }
+    });
+
+    return {
+      feature: FEATURE_TYPES.includes(feature) ? (
+        <span className="font-weight-bold">
+          {intl.formatMessage(messages[`featureType-${feature}`])}
+        </span>
+      )
+        : intl.formatMessage(messages[`featureName-${feature.id}`]),
+      // 'feature' is the identifier for cells in the first column.
+      // This is spreading the app IDs from appCheckmarkCells into the return array, creating
+      // one object with 'feature' and the app.id keys from above.  The values are the JSX
+      // above with the font awesome checkmarks in 'em
+      ...appCheckmarkCells,
+    };
+  };
+
   return (
     <DataTable
       itemCount={features.length}
-      data={features.map(feature => {
-        const appCheckmarkCells = {};
-        // DataTable wants 'data' to be an array of objects where each property of an object
-        // represents a cell in that row, identified by its key.
-        apps.forEach(app => {
-          // If our app's set of feature Ids includes this feature, return a checkmark.
-          // i.e, if this app has the current feature, check it!
-          appCheckmarkCells[app.id] = (
-            <div
-              className="text-center"
-              key={`${app.id}&${feature.id}`}
-              data-testid={`${app.id}-${feature.id.replaceAll('.', '-')}`}
-            >
-              {
-                app.featureIds.includes(feature.id)
-                  ? <Check id="check-icon" className="text-success-500" />
-                  : <Remove id="remove-icon" className="text-light-700" />
-              }
-            </div>
-          );
-        });
-
-        return {
-          feature: intl.formatMessage(messages[`featureName-${feature.id}`]), // 'feature' is the identifier for cells in the first column.
-          // This is spreading the app IDs from appCheckmarkCells into the return array, creating
-          // one object with 'feature' and the app.id keys from above.  The values are the JSX
-          // above with the font awesome checkmarks in 'em
-          ...appCheckmarkCells,
-        };
-      })}
+      data={
+        [
+          { ...createRow('basic') },
+          ...basic.map((feature) => createRow(feature)),
+          { ...createRow('partial') },
+          ...partial.map((feature) => createRow(feature)),
+          { ...createRow('full') },
+          ...full.map((feature) => createRow(feature)),
+          { ...createRow('common') },
+          ...common.map((feature) => createRow(feature)),
+        ]
+      }
       columns={[
         {
           Header: '',
@@ -48,7 +79,7 @@ function FeaturesTable({ apps, features, intl }) {
         // We're converting our apps array into a bunch of objects with "Header" and "accessor"
         // keys, like DataTable expects.
         ...apps.map(app => ({
-          Header: intl.formatMessage(messages[`appName-${app.id}`]),
+          Header: intl.formatMessage(appMessages[`appName-${app.id}`]),
           accessor: app.id,
         })),
       ]}
@@ -56,12 +87,12 @@ function FeaturesTable({ apps, features, intl }) {
       <DataTable.Table />
     </DataTable>
   );
-}
+};
 
 export default injectIntl(FeaturesTable);
 
 FeaturesTable.propTypes = {
-  apps: PropTypes.arrayOf(PropTypes.object).isRequired,
-  features: PropTypes.arrayOf(PropTypes.object).isRequired,
+  apps: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
+  features: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
   intl: intlShape.isRequired,
 };
diff --git a/src/pages-and-resources/discussions/app-list/FeaturesTable.test.jsx b/src/pages-and-resources/discussions/app-list/FeaturesTable.test.jsx
index 943aa8a407..68a32f901d 100644
--- a/src/pages-and-resources/discussions/app-list/FeaturesTable.test.jsx
+++ b/src/pages-and-resources/discussions/app-list/FeaturesTable.test.jsx
@@ -19,16 +19,16 @@ describe('FeaturesTable', () => {
       },
       {
         externalLinks: {},
-        featureIds: ['discussion-page', 'lti-basic-configuration'],
+        featureIds: ['discussion-page', 'basic-configuration'],
         hasFullSupport: false,
         id: 'piazza',
       }];
 
     features = [
-      { id: 'lti-basic-configuration' },
-      { id: 'wcag-2.1' },
-      { id: 'discussion-page' },
-      { id: 'embedded-course-sections' },
+      { id: 'discussion-page', featureSupportType: 'basic' },
+      { id: 'embedded-course-sections', featureSupportType: 'full' },
+      { id: 'wcag-2.1', featureSupportType: 'partial' },
+      { id: 'basic-configuration', featureSupportType: 'common' },
     ];
 
     const wrapper = render(
@@ -49,7 +49,7 @@ describe('FeaturesTable', () => {
   });
 
   test('displays a row for each available feature', () => {
-    expect(container.querySelectorAll('tbody > tr')).toHaveLength(features.length);
+    expect(container.querySelectorAll('tbody > tr')).toHaveLength(8);
   });
 
   test('apps columns receive a check for each feature they support', () => {
diff --git a/src/pages-and-resources/discussions/app-list/SupportedFeature.jsx b/src/pages-and-resources/discussions/app-list/SupportedFeature.jsx
new file mode 100644
index 0000000000..8c744886c4
--- /dev/null
+++ b/src/pages-and-resources/discussions/app-list/SupportedFeature.jsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Check } from '@openedx/paragon/icons';
+
+const SupportedFeature = ({ name }) => (
+  <>
+    <span className="mr-3">
+      <Check id="check-icon" className="text-success-500" />
+    </span>
+    {name}
+  </>
+);
+
+SupportedFeature.propTypes = {
+  name: PropTypes.string.isRequired,
+};
+
+export default SupportedFeature;
diff --git a/src/pages-and-resources/discussions/app-list/SupportedFeature.test.jsx b/src/pages-and-resources/discussions/app-list/SupportedFeature.test.jsx
new file mode 100644
index 0000000000..f30f5e52fe
--- /dev/null
+++ b/src/pages-and-resources/discussions/app-list/SupportedFeature.test.jsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { render, queryByText } from '@testing-library/react';
+
+import SupportedFeature from './SupportedFeature';
+import messages from './messages';
+
+describe('SupportedFeature', () => {
+  const name = messages['featureName-basic-configuration'].defaultMessage;
+  let container;
+
+  beforeEach(() => {
+    const wrapper = render(
+      <SupportedFeature
+        name={name}
+      />,
+    );
+    container = wrapper.container;
+  });
+
+  test('displays a check icon ', () => {
+    expect(container.querySelector('svg')).toHaveAttribute('id', 'check-icon');
+  });
+
+  test('displays feature name', () => {
+    expect(queryByText(container, name)).toBeInTheDocument();
+  });
+});
diff --git a/src/pages-and-resources/discussions/app-list/messages.js b/src/pages-and-resources/discussions/app-list/messages.js
index 0f34d7357a..ca4dc07422 100644
--- a/src/pages-and-resources/discussions/app-list/messages.js
+++ b/src/pages-and-resources/discussions/app-list/messages.js
@@ -56,6 +56,17 @@ const messages = defineMessages({
     defaultMessage: 'Start conversations with other learners, ask questions, and interact with other learners in the course.',
     description: 'A description of the Legacy edX Discussions app.',
   },
+  // New provider
+  'appName-openedx': {
+    id: 'authoring.discussions.appList.appName-openedx',
+    defaultMessage: 'edX',
+    description: 'The name of the new edX Discussions app.',
+  },
+  'appDescription-openedx': {
+    id: 'authoring.discussions.appList.appDescription-openedx',
+    defaultMessage: 'Enable participation in discussion topics alongside course content.',
+    description: 'A description of the new edX Discussions app.',
+  },
   // Piazza
   'appName-piazza': {
     id: 'authoring.discussions.appList.appName-piazza',
@@ -67,47 +78,21 @@ const messages = defineMessages({
     defaultMessage: 'Piazza is designed to connect students, TAs, and professors so every student can get the help they need when they need it.',
     description: 'A description of the Piazza app.',
   },
-
-  // yellowdig
-  'appName-yellowdig': {
-    id: 'authoring.discussions.appList.appName-yellowdig',
-    defaultMessage: 'Yellowdig',
-    description: 'The name of the yellowdig app.',
-  },
   'appDescription-yellowdig': {
     id: 'authoring.discussions.appList.appDescription-yellowdig',
     defaultMessage: 'Yellowdig offers educators a gameful learning digital solution to improve student engagement by building learning communities for any course modality.',
     description: 'A description of the Yellowdig app.',
   },
-  // edX inscribe
-  'appName-inscribe': {
-    id: 'authoring.discussions.appList.appName-inscribe',
-    defaultMessage: 'InScribe',
-    description: 'The name of the inscribe app.',
-  },
   'appDescription-inscribe': {
     id: 'authoring.discussions.appList.appDescription-inscribe',
     defaultMessage: 'InScribe leverages the power of community + artificial intelligence to connect individuals to the answers, resources, and people they need to succeed.',
     description: 'A description of the inscibe app.',
   },
-  // discourse
-  'appName-discourse': {
-    id: 'authoring.discussions.appList.appName-discourse',
-    defaultMessage: 'Discourse',
-    description: 'The name of the discourse app.',
-  },
   'appDescription-discourse': {
     id: 'authoring.discussions.appList.appDescription-discourse',
     defaultMessage: 'Discourse is modern forum software for your community. Use it as a mailing list, discussion forum, long-form chat room, and more!',
     description: 'A description of the discourse app.',
   },
-
-  // Ed Discuss
-  'appName-ed-discuss': {
-    id: 'authoring.discussions.appList.appName-ed-discuss',
-    defaultMessage: 'Ed Discuss',
-    description: 'The name of the Ed Discuss app.',
-  },
   'appDescription-ed-discuss': {
     id: 'authoring.discussions.appList.appDescription-ed-discus',
     defaultMessage: 'Ed Discussion helps scale class communication in a beautiful and intuitive interface. Questions reach and benefit the whole class. Less emails, more time saved.',
@@ -186,12 +171,12 @@ const messages = defineMessages({
   },
   'featureName-lti-advanced-sharing-mode': {
     id: 'authoring.discussions.featureName-lti-advanced-sharing-mode',
-    defaultMessage: 'LTI advanced sharing mode',
+    defaultMessage: 'LTI advanced sharing',
     description: 'The name of a discussions feature.',
   },
-  'featureName-lti-basic-configuration': {
-    id: 'authoring.discussions.featureName-lti-basic-configuration',
-    defaultMessage: 'LTI basic configuration',
+  'featureName-basic-configuration': {
+    id: 'authoring.discussions.featureName-basic-configuration',
+    defaultMessage: 'Basic configuration',
     description: 'The name of a discussions feature.',
   },
   'featureName-primary-discussion-app-experience': {
@@ -206,7 +191,7 @@ const messages = defineMessages({
   },
   'featureName-report/flag-content-to-moderators': {
     id: 'authoring.discussions.featureName-report/flag-content-to-moderators',
-    defaultMessage: 'Report/flag content to moderators',
+    defaultMessage: 'Report content to moderators',
     description: 'The name of a discussions feature.',
   },
   'featureName-research-data-events': {
@@ -234,6 +219,51 @@ const messages = defineMessages({
     defaultMessage: 'WCAG 2.0 support',
     description: 'The name of a discussions feature.',
   },
+  'featureType-basic': {
+    id: 'authoring.discussions.basic-support',
+    defaultMessage: 'Basic support',
+    description: 'The type of a discussions feature.',
+  },
+  'featureType-partial': {
+    id: 'authoring.discussions.partial-support',
+    defaultMessage: 'Partial support',
+    description: 'The type of a discussions feature.',
+  },
+  'featureType-full': {
+    id: 'authoring.discussions.full-support',
+    defaultMessage: 'Full support',
+    description: 'The type of a discussions feature.',
+  },
+  'featureType-common': {
+    id: 'authoring.discussions.common-support',
+    defaultMessage: 'Commonly requested',
+    description: 'The type of a discussions feature.',
+  },
+  hideDiscussionTab: {
+    id: 'authoring.discussions.hide-discussion-tab',
+    defaultMessage: 'Hide discussion tab',
+    description: 'Title message to hide discussion tab',
+  },
+  hideDiscussionTabTitle: {
+    id: 'authoring.discussions.hide-tab-title',
+    defaultMessage: 'Hide the discussion tab?',
+    description: 'Title message to hide discussion tab',
+  },
+  hideDiscussionTabMessage: {
+    id: 'authoring.discussions.hide-tab-message',
+    defaultMessage: 'The discussion tab will no longer be visible to learners in the LMS. Additionally, posting to the discussion forums will be disabled. Are you sure you want to proceed?',
+    description: 'Help message to hide discussion tab',
+  },
+  hideDiscussionOkButton: {
+    id: 'authoring.discussions.hide-ok-button',
+    defaultMessage: 'Ok',
+    description: 'Ok button title',
+  },
+  hideDiscussionCancelButton: {
+    id: 'authoring.discussions.hide-cancel-button',
+    defaultMessage: 'Cancel',
+    description: 'Cancel button title',
+  },
 });
 
 export default messages;
diff --git a/src/pages-and-resources/discussions/data/api.js b/src/pages-and-resources/discussions/data/api.js
index 751cae1262..706ae44094 100644
--- a/src/pages-and-resources/discussions/data/api.js
+++ b/src/pages-and-resources/discussions/data/api.js
@@ -1,6 +1,23 @@
-import { getConfig } from '@edx/frontend-platform';
+import { camelCaseObject, ensureConfig, getConfig } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
-import _ from 'lodash';
+import { v4 as uuid } from 'uuid';
+import { DivisionSchemes } from '../../../data/constants';
+
+import {
+  checkStatus,
+  endOfDayTime,
+  getTime,
+  mergeDateTime,
+  normalizeDate,
+  normalizeTime,
+  sortRestrictedDatesByStatus,
+  startOfDayTime,
+} from '../app-config-form/utils';
+import { restrictedDatesStatus as constants } from './constants';
+
+ensureConfig([
+  'STUDIO_BASE_URL',
+], 'Course Apps API service');
 
 function normalizeLtiConfig(data) {
   if (!data || Object.keys(data).length < 1) {
@@ -11,49 +28,94 @@ function normalizeLtiConfig(data) {
     consumerKey: data.lti_1p1_client_key,
     consumerSecret: data.lti_1p1_client_secret,
     launchUrl: data.lti_1p1_launch_url,
-    piiSharing: 'pii_share_username' in data || 'pii_share_email' in data,
-    piiShareUsername: data.pii_share_username,
-    piiShareEmail: data.pii_share_email,
   };
 }
 
-function normalizeDiscussionTopic(data) {
-  return Object.entries(data).map(([key, value]) => (
-    {
-      name: key,
-      id: value.id,
-    }
-  ));
-}
+export function normalizeRestrictedDates(data) {
+  if (!data || Object.keys(data).length < 1) {
+    return [];
+  }
 
-function extractDiscussionTopicIds(data) {
-  return Object.entries(
-    data,
-    // eslint-disable-next-line no-unused-vars
-  ).map(([key, value]) => value.id);
+  const normalizeData = data.map(([startDate, endDate]) => ({
+    id: uuid(),
+    startDate: normalizeDate(startDate),
+    startTime: getTime(startDate),
+    endDate: normalizeDate(endDate),
+    endTime: getTime(endDate),
+    status: checkStatus([startDate, endDate]),
+  }));
+
+  return [
+    ...sortRestrictedDatesByStatus(normalizeData, constants.ACTIVE, 'desc'),
+    ...sortRestrictedDatesByStatus(normalizeData, constants.UPCOMING, 'asc'),
+    ...sortRestrictedDatesByStatus(normalizeData, constants.COMPLETE, 'desc'),
+  ];
 }
 
 function normalizePluginConfig(data) {
   if (!data || Object.keys(data).length < 1) {
     return {};
   }
-  const discussionDividedTopicsCount = _.size(data.divided_course_wide_discussions);
-  const discussionTopicsCount = _.size(data.discussion_topics);
-  const enableDivideCourseTopicsByCohorts = (
-    discussionDividedTopicsCount && discussionDividedTopicsCount !== discussionTopicsCount
-  );
+
+  const enableDivideByCohorts = data.always_divide_inline_discussions && data.division_scheme === 'cohort';
+  const enableDivideCourseTopicsByCohorts = enableDivideByCohorts && data.divided_course_wide_discussions.length > 0;
   return {
     allowAnonymousPosts: data.allow_anonymous,
     allowAnonymousPostsPeers: data.allow_anonymous_to_peers,
-    blackoutDates: JSON.stringify(data.discussion_blackouts),
+    reportedContentEmailNotifications: data.reported_content_email_notifications,
+    divisionScheme: data.division_scheme,
+    alwaysDivideInlineDiscussions: data.always_divide_inline_discussions,
+    restrictedDates: normalizeRestrictedDates(data.discussion_blackouts),
     allowDivisionByUnit: false,
-    divideByCohorts: discussionDividedTopicsCount > 0,
+    divideByCohorts: enableDivideByCohorts,
     divideCourseTopicsByCohorts: enableDivideCourseTopicsByCohorts,
+    cohortsEnabled: data.available_division_schemes?.includes('cohort') || false,
+    groupAtSubsection: data.group_at_subsection,
   };
 }
 
-function normalizeApps(data) {
-  const apps = Object.entries(data.providers.available).map(([key, app]) => ({
+function normalizePiiSharing(data) {
+  return {
+    piiSharing: data.pii_sharing_allowed,
+    piiShareUsername: data.pii_sharing_allowed,
+    piiShareEmail: data.pii_sharing_allowed,
+  };
+}
+
+function normalizeAppConfig(data) {
+  return {
+    id: data.provider_type,
+    ...normalizePluginConfig(data.plugin_configuration),
+    ...normalizeLtiConfig(data.lti_configuration),
+  };
+}
+
+function normalizeDiscussionTopic(data) {
+  return Object.entries(data).map(([key, value]) => ({
+    name: key,
+    id: value.id,
+  }));
+}
+
+function extractDiscussionTopicIds(data) {
+  return Object.entries(
+    data,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  ).map(([key, value]) => value.id);
+}
+
+function normalizeFeatures(data, apps) {
+  if (!data || data.length < 1) {
+    return [];
+  }
+
+  return camelCaseObject(
+    data.filter((feature) => apps.map((app) => app.featureIds.includes(feature.id)).some((supported) => supported)),
+  );
+}
+
+function normalizeProviders(data) {
+  const apps = Object.entries(data.available).map(([key, app]) => ({
     id: key,
     messages: app.messages,
     featureIds: app.features,
@@ -68,37 +130,69 @@ function normalizeApps(data) {
     adminOnlyConfig: !!app.admin_only_config,
   }));
   return {
-    courseId: data.context_key,
-    enabled: data.enabled,
-    features: data.features.map(id => ({
-      id,
-    })),
-    appConfig: {
-      id: data.providers.active,
-      ...normalizePluginConfig(data.plugin_configuration),
-      ...normalizeLtiConfig(data.lti_configuration),
-    },
-    activeAppId: data.providers.active,
+    features: normalizeFeatures(data.features, apps),
+    activeAppId: data.active,
     apps,
+  };
+}
+
+function normalizeSettings(data) {
+  return {
+    enabled: data.enabled,
+    enableInContext: data.enable_in_context,
+    enableGradedUnits: data.enable_graded_units,
+    unitLevelVisibility: data.unit_level_visibility,
+    postingRestrictions: data.posting_restrictions,
+    appConfig: normalizeAppConfig(data),
+    piiConfig: normalizePiiSharing(data.lti_configuration),
     discussionTopicIds: data.plugin_configuration.discussion_topics
-      ? extractDiscussionTopicIds(data.plugin_configuration.discussion_topics) : [],
+      ? extractDiscussionTopicIds(data.plugin_configuration.discussion_topics)
+      : [],
     discussionTopics: data.plugin_configuration.discussion_topics
-      ? normalizeDiscussionTopic(data.plugin_configuration.discussion_topics) : [],
+      ? normalizeDiscussionTopic(data.plugin_configuration.discussion_topics)
+      : [],
     divideDiscussionIds: data.plugin_configuration.divided_course_wide_discussions,
   };
 }
 
+export function denormalizeRestrictedDate(restrictedPeriod) {
+  return [
+    mergeDateTime(
+      normalizeDate(restrictedPeriod.startDate),
+      normalizeTime(startOfDayTime(restrictedPeriod.startTime)),
+    ),
+    mergeDateTime(
+      normalizeDate(restrictedPeriod.endDate),
+      normalizeTime(endOfDayTime(restrictedPeriod.endTime)),
+    ),
+  ];
+}
+
 function denormalizeData(courseId, appId, data) {
   const pluginConfiguration = {};
 
-  if (data.allowAnonymousPosts) {
+  if ('allowAnonymousPosts' in data) {
     pluginConfiguration.allow_anonymous = data.allowAnonymousPosts;
   }
-  if (data.allowAnonymousPostsPeers) {
+  if ('allowAnonymousPostsPeers' in data) {
     pluginConfiguration.allow_anonymous_to_peers = data.allowAnonymousPostsPeers;
   }
-  if (data.blackoutDates) {
-    pluginConfiguration.discussion_blackouts = JSON.parse(data.blackoutDates);
+  if ('reportedContentEmailNotifications' in data) {
+    pluginConfiguration.reported_content_email_notifications = data.reportedContentEmailNotifications;
+  }
+  if ('divideByCohorts' in data) {
+    pluginConfiguration.division_scheme = data.divideByCohorts ? DivisionSchemes.COHORT : DivisionSchemes.NONE;
+    pluginConfiguration.always_divide_inline_discussions = data.divideByCohorts;
+  }
+  if ('groupAtSubsection' in data) {
+    pluginConfiguration.group_at_subsection = data.groupAtSubsection;
+  }
+  if (data.restrictedDates?.length) {
+    pluginConfiguration.discussion_blackouts = data.restrictedDates.map((restrictedDates) => (
+      denormalizeRestrictedDate(restrictedDates)
+    ));
+  } else if (data.restrictedDates?.length === 0) {
+    pluginConfiguration.discussion_blackouts = [];
   }
   if (data.discussionTopics?.length) {
     pluginConfiguration.discussion_topics = data.discussionTopics.reduce((topics, currentTopic) => {
@@ -107,8 +201,9 @@ function denormalizeData(courseId, appId, data) {
       return newTopics;
     }, {});
   }
-  if (data.divideDiscussionIds) {
-    pluginConfiguration.divided_course_wide_discussions = data.divideDiscussionIds;
+  if ('divideCourseTopicsByCohorts' in data) {
+    pluginConfiguration.divided_course_wide_discussions = data.divideCourseTopicsByCohorts
+      ? data.divideDiscussionIds : [];
   }
 
   const ltiConfiguration = {};
@@ -135,31 +230,59 @@ function denormalizeData(courseId, appId, data) {
     ltiConfiguration.version = 'lti_1p1';
   }
 
-  return {
+  const apiData = {
     context_key: courseId,
-    enabled: true,
+    enabled: data.enabled,
     lti_configuration: ltiConfiguration,
     plugin_configuration: pluginConfiguration,
     provider_type: appId,
   };
+  if ('enableInContext' in data) {
+    apiData.enable_in_context = data.enableInContext;
+  }
+  if ('enableGradedUnits' in data) {
+    apiData.enable_graded_units = data.enableGradedUnits;
+  }
+  if ('unitLevelVisibility' in data) {
+    apiData.unit_level_visibility = data.unitLevelVisibility;
+  }
+  if ('postingRestrictions' in data) {
+    apiData.posting_restrictions = data.postingRestrictions;
+  }
+  return apiData;
+}
+
+export function getDiscussionsProvidersUrl(courseId) {
+  return `${getConfig().STUDIO_BASE_URL}/api/discussions/v0/course/${courseId}/providers`;
 }
 
-export function getAppsUrl(courseId) {
-  return `${getConfig().LMS_BASE_URL}/discussions/api/v0/${courseId}`;
+export function getDiscussionsSettingsUrl(courseId) {
+  return `${getConfig().STUDIO_BASE_URL}/api/discussions/v0/course/${courseId}/settings`;
 }
 
-export async function getApps(courseId) {
+export async function getDiscussionsProviders(courseId) {
   const { data } = await getAuthenticatedHttpClient()
-    .get(getAppsUrl(courseId));
+    .get(getDiscussionsProvidersUrl(courseId));
 
-  return normalizeApps(data);
+  return normalizeProviders(data);
+}
+
+export async function getDiscussionsSettings(courseId, providerId = null) {
+  const params = {};
+  if (providerId) {
+    params.params = { provider_id: providerId };
+  }
+  const url = getDiscussionsSettingsUrl(courseId);
+  const { data } = await getAuthenticatedHttpClient()
+    .get(url, params);
+  return normalizeSettings(data);
 }
 
-export async function postAppConfig(courseId, appId, values) {
+export async function postDiscussionsSettings(courseId, appId, values) {
   const { data } = await getAuthenticatedHttpClient().post(
-    getAppsUrl(courseId),
+    getDiscussionsSettingsUrl(courseId),
     denormalizeData(courseId, appId, values),
   );
 
-  return normalizeApps(data);
+  return normalizeSettings(data);
 }
diff --git a/src/pages-and-resources/discussions/data/constants.js b/src/pages-and-resources/discussions/data/constants.js
new file mode 100644
index 0000000000..2a1bf010e6
--- /dev/null
+++ b/src/pages-and-resources/discussions/data/constants.js
@@ -0,0 +1,58 @@
+import moment from 'moment';
+
+import messages from '../app-config-form/messages';
+
+export const restrictedDatesStatus = {
+  UPCOMING: 'UPCOMING',
+  COMPLETE: 'COMPLETE',
+  ACTIVE: 'ACTIVE',
+};
+
+export const badgeVariant = {
+  UPCOMING: 'primary',
+  COMPLETE: 'light',
+  ACTIVE: 'success',
+};
+
+export const deleteRestrictedDatesHelperText = {
+  UPCOMING: messages.restrictedDatesDeletionHelp,
+  COMPLETE: messages.completeRestrictedDatesDeletionHelp,
+  ACTIVE: messages.activeRestrictedDatesDeletionHelp,
+};
+
+export const discussionRestriction = {
+  DISABLED: 'disabled',
+  ENABLED: 'enabled',
+  SCHEDULED: 'scheduled',
+};
+
+export const discussionRestrictionLabels = {
+  OFF: 'Off',
+  ON: 'On',
+  SCHEDULED: 'Scheduled',
+};
+
+export const discussionRestrictionOptions = [
+  {
+    value: discussionRestriction.DISABLED,
+    message: messages.discussionRestrictionOffLabelHelpText,
+    label: discussionRestrictionLabels.OFF,
+  },
+  {
+    value: discussionRestriction.ENABLED,
+    message: messages.discussionRestrictionOnLabelHelpText,
+    label: discussionRestrictionLabels.ON,
+  },
+  {
+    value: discussionRestriction.SCHEDULED,
+    message: messages.discussionRestrictionScheduledLabelHelpText,
+    label: discussionRestrictionLabels.SCHEDULED,
+  },
+];
+
+export const today = moment();
+export const active = [today.format('YYYY-MM-DDTHH:mm'), today.add(5, 'hours').format('YYYY-MM-DDTHH:mm')];
+export const upcoming = [today.add(2, 'days').format('YYYY-MM-DD'), today.add(5, 'days').format('YYYY-MM-DD')];
+export const complete = [today.subtract(7, 'days').format('YYYY-MM-DD'), today.subtract(5, 'days').format('YYYY-MM-DD')];
+
+export const FEATURE_TYPES = ['basic', 'partial', 'full', 'common'];
diff --git a/src/pages-and-resources/discussions/data/hook.js b/src/pages-and-resources/discussions/data/hook.js
new file mode 100644
index 0000000000..489fca90c1
--- /dev/null
+++ b/src/pages-and-resources/discussions/data/hook.js
@@ -0,0 +1,6 @@
+import { breakpoints, useWindowSize } from '@openedx/paragon';
+
+export default function useIsOnSmallScreen() {
+  const windowSize = useWindowSize();
+  return windowSize.width < breakpoints.medium.minWidth;
+}
diff --git a/src/pages-and-resources/discussions/data/redux.test.js b/src/pages-and-resources/discussions/data/redux.test.js
index fc6463ccab..7e8f9fea5a 100644
--- a/src/pages-and-resources/discussions/data/redux.test.js
+++ b/src/pages-and-resources/discussions/data/redux.test.js
@@ -1,31 +1,40 @@
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
-import MockAdapter from 'axios-mock-adapter';
 import { initializeMockApp } from '@edx/frontend-platform/testing';
-import { history } from '@edx/frontend-platform';
+import MockAdapter from 'axios-mock-adapter';
+import { waitFor } from '@testing-library/react';
+import { DivisionSchemes } from '../../../data/constants';
+import { LOADED } from '../../../data/slice';
 import initializeStore from '../../../store';
-import { getAppsUrl } from './api';
+import { executeThunk } from '../../../utils';
+import { generateProvidersApiResponse, legacyApiResponse, piazzaApiResponse } from '../factories/mockApiResponses';
+import { getDiscussionsProvidersUrl, getDiscussionsSettingsUrl } from './api';
 import {
-  FAILED, SAVED, DENIED, selectApp, updateValidationStatus,
+  DENIED, FAILED, SAVED, selectApp, updateValidationStatus,
 } from './slice';
-import { fetchApps, saveAppConfig } from './thunks';
-import { LOADED } from '../../../data/slice';
-import { legacyApiResponse, piazzaApiResponse } from '../factories/mockApiResponses';
-import { executeThunk } from '../../../utils';
+import { fetchDiscussionSettings, fetchProviders, saveProviderConfig } from './thunks';
 
 const courseId = 'course-v1:edX+TestX+Test_Course';
 const pagesAndResourcesPath = `/course/${courseId}/pages-and-resources`;
+const mockedNavigator = jest.fn();
+
 const featuresState = {
   'discussion-page': {
     id: 'discussion-page',
+    featureSupportType: 'basic',
   },
   'embedded-course-sections': {
     id: 'embedded-course-sections',
+    featureSupportType: 'full',
   },
   'wcag-2.1': {
     id: 'wcag-2.1',
+    featureSupportType: 'partial',
+
   },
-  'lti-basic-configuration': {
-    id: 'lti-basic-configuration',
+  'basic-configuration': {
+    id: 'basic-configuration',
+    featureSupportType: 'common',
+
   },
 };
 
@@ -33,7 +42,7 @@ const featureIds = [
   'discussion-page',
   'embedded-course-sections',
   'wcag-2.1',
-  'lti-basic-configuration',
+  'basic-configuration',
 ];
 
 const legacyApp = {
@@ -62,7 +71,7 @@ const piazzaApp = {
     'discussion-page',
     'embedded-course-sections',
     'wcag-2.1',
-    'lti-basic-configuration',
+    'basic-configuration',
   ],
   externalLinks: {
     learnMore: '',
@@ -106,13 +115,14 @@ describe('Data layer integration tests', () => {
 
   afterEach(() => {
     axiosMock.reset();
+    jest.clearAllMocks();
   });
 
-  describe('fetchApps', () => {
+  describe('fetchProviders', () => {
     test('network error', async () => {
-      axiosMock.onGet(getAppsUrl(courseId)).networkError();
+      axiosMock.onGet(getDiscussionsProvidersUrl(courseId)).networkError();
 
-      await executeThunk(fetchApps(courseId), store.dispatch);
+      await executeThunk(fetchProviders(courseId), store.dispatch);
 
       expect(store.getState().discussions).toEqual(
         expect.objectContaining({
@@ -128,9 +138,9 @@ describe('Data layer integration tests', () => {
     });
 
     test('permission denied error', async () => {
-      axiosMock.onGet(getAppsUrl(courseId)).reply(403);
+      axiosMock.onGet(getDiscussionsProvidersUrl(courseId)).reply(403);
 
-      await executeThunk(fetchApps(courseId), store.dispatch);
+      await executeThunk(fetchProviders(courseId), store.dispatch);
 
       expect(store.getState().discussions).toEqual(
         expect.objectContaining({
@@ -146,12 +156,14 @@ describe('Data layer integration tests', () => {
     });
 
     test('successfully loads an LTI configuration', async () => {
-      axiosMock.onGet(getAppsUrl(courseId)).reply(200, piazzaApiResponse);
+      axiosMock.onGet(getDiscussionsProvidersUrl(courseId)).reply(200, generateProvidersApiResponse());
+      axiosMock.onGet(getDiscussionsSettingsUrl(courseId)).reply(200, piazzaApiResponse);
 
-      await executeThunk(fetchApps(courseId), store.dispatch);
+      await executeThunk(fetchProviders(courseId), store.dispatch);
+      await executeThunk(fetchDiscussionSettings(courseId), store.dispatch);
 
-      expect(store.getState().discussions).toEqual({
-        appIds: ['legacy', 'piazza', 'discourse'],
+      expect(store.getState().discussions).toEqual(expect.objectContaining({
+        appIds: ['legacy', 'openedx', 'piazza', 'discourse'],
         featureIds,
         activeAppId: 'piazza',
         selectedAppId: null,
@@ -159,7 +171,7 @@ describe('Data layer integration tests', () => {
         saveStatus: SAVED,
         hasValidationError: false,
         discussionTopicIds: [],
-      });
+      }));
       expect(store.getState().models.apps.legacy).toEqual(legacyApp);
       expect(store.getState().models.apps.piazza).toEqual(piazzaApp);
       expect(store.getState().models.features).toEqual(featuresState);
@@ -168,26 +180,26 @@ describe('Data layer integration tests', () => {
         consumerKey: 'client_key_123',
         consumerSecret: 'client_secret_123',
         launchUrl: 'https://localhost/example',
-        piiSharing: false,
-        piiShareUsername: undefined,
-        piiShareEmail: undefined,
       });
     });
 
     test('successfully loads an LTI configuration with PII Sharing', async () => {
-      axiosMock.onGet(getAppsUrl(courseId)).reply(200, {
+      axiosMock.onGet(getDiscussionsProvidersUrl(courseId)).reply(200, generateProvidersApiResponse());
+      axiosMock.onGet(getDiscussionsSettingsUrl(courseId)).reply(200, {
         ...piazzaApiResponse,
         lti_configuration: {
           ...piazzaApiResponse.lti_configuration,
           pii_share_username: true,
           pii_share_email: false,
+          piiSharing: true,
         },
       });
 
-      await executeThunk(fetchApps(courseId), store.dispatch);
+      await executeThunk(fetchProviders(courseId), store.dispatch);
+      await executeThunk(fetchDiscussionSettings(courseId), store.dispatch);
 
-      expect(store.getState().discussions).toEqual({
-        appIds: ['legacy', 'piazza', 'discourse'],
+      expect(store.getState().discussions).toEqual(expect.objectContaining({
+        appIds: ['legacy', 'openedx', 'piazza', 'discourse'],
         featureIds,
         activeAppId: 'piazza',
         selectedAppId: null,
@@ -195,7 +207,7 @@ describe('Data layer integration tests', () => {
         saveStatus: SAVED,
         hasValidationError: false,
         discussionTopicIds: [],
-      });
+      }));
       expect(store.getState().models.apps.legacy).toEqual(legacyApp);
       expect(store.getState().models.apps.piazza).toEqual(piazzaApp);
       expect(store.getState().models.features).toEqual(featuresState);
@@ -204,19 +216,18 @@ describe('Data layer integration tests', () => {
         consumerKey: 'client_key_123',
         consumerSecret: 'client_secret_123',
         launchUrl: 'https://localhost/example',
-        piiSharing: true,
-        piiShareUsername: true,
-        piiShareEmail: false,
       });
     });
 
     test('successfully loads a Legacy configuration', async () => {
-      axiosMock.onGet(getAppsUrl(courseId)).reply(200, legacyApiResponse);
+      axiosMock.onGet(getDiscussionsProvidersUrl(courseId)).reply(200, generateProvidersApiResponse(false, 'legacy'));
+      axiosMock.onGet(getDiscussionsSettingsUrl(courseId)).reply(200, legacyApiResponse);
 
-      await executeThunk(fetchApps(courseId), store.dispatch);
+      await executeThunk(fetchProviders(courseId), store.dispatch);
+      await executeThunk(fetchDiscussionSettings(courseId), store.dispatch);
 
-      expect(store.getState().discussions).toEqual({
-        appIds: ['legacy', 'piazza'],
+      expect(store.getState().discussions).toEqual(expect.objectContaining({
+        appIds: ['legacy', 'openedx', 'piazza', 'discourse'],
         featureIds,
         activeAppId: 'legacy',
         selectedAppId: null,
@@ -224,8 +235,8 @@ describe('Data layer integration tests', () => {
         saveStatus: SAVED,
         hasValidationError: false,
         discussionTopicIds,
-        divideDiscussionIds,
-      });
+        divideDiscussionIds: [],
+      }));
       expect(store.getState().models.apps.legacy).toEqual(legacyApp);
       expect(store.getState().models.apps.piazza).toEqual(piazzaApp);
       expect(store.getState().models.features).toEqual(featuresState);
@@ -233,12 +244,16 @@ describe('Data layer integration tests', () => {
         id: 'legacy',
         allowAnonymousPosts: false,
         allowAnonymousPostsPeers: false,
-        blackoutDates: '[]',
+        reportedContentEmailNotifications: false,
+        restrictedDates: [],
         // TODO: Note!  As of this writing, all the data below this line is NOT returned in the API
         // but we add it in during normalization.
-        divideByCohorts: true,
+        divisionScheme: DivisionSchemes.COHORT,
+        divideByCohorts: false,
+        alwaysDivideInlineDiscussions: false,
         allowDivisionByUnit: false,
         divideCourseTopicsByCohorts: false,
+        cohortsEnabled: false,
       });
     });
   });
@@ -262,21 +277,19 @@ describe('Data layer integration tests', () => {
 
   describe('saveAppConfig', () => {
     test('network error', async () => {
-      history.push(`/course/${courseId}/pages-and-resources/discussions/configure/piazza`);
+      axiosMock.onGet(getDiscussionsProvidersUrl(courseId)).reply(200, generateProvidersApiResponse());
+      axiosMock.onGet(getDiscussionsSettingsUrl(courseId)).reply(200, piazzaApiResponse);
+      axiosMock.onPost(getDiscussionsSettingsUrl(courseId)).networkError();
 
-      axiosMock.onGet(getAppsUrl(courseId)).reply(200, piazzaApiResponse);
-      axiosMock.onPost(getAppsUrl(courseId)).networkError();
-
-      // We call fetchApps and selectApp here too just to get us into a real state.
-      await executeThunk(fetchApps(courseId), store.dispatch);
+      // We call fetchProviders and selectApp here too just to get us into a real state.
+      await executeThunk(fetchProviders(courseId), store.dispatch);
+      await executeThunk(fetchDiscussionSettings(courseId), store.dispatch);
       store.dispatch(selectApp({ appId: 'piazza' }));
-      await executeThunk(saveAppConfig(courseId, 'piazza', {}, pagesAndResourcesPath), store.dispatch);
+      await executeThunk(saveProviderConfig(courseId, 'piazza', {}, pagesAndResourcesPath, mockedNavigator), store.dispatch);
 
-      // Assert we're still on the form.
-      expect(window.location.pathname).toEqual(`/course/${courseId}/pages-and-resources/discussions/configure/piazza`);
       expect(store.getState().discussions).toEqual(
         expect.objectContaining({
-          appIds: ['legacy', 'piazza', 'discourse'],
+          appIds: ['legacy', 'openedx', 'piazza', 'discourse'],
           featureIds,
           activeAppId: 'piazza',
           selectedAppId: 'piazza',
@@ -288,25 +301,22 @@ describe('Data layer integration tests', () => {
     });
 
     test('permission denied error', async () => {
-      history.push(`/course/${courseId}/pages-and-resources/discussions/configure/piazza`);
-
-      axiosMock.onGet(getAppsUrl(courseId)).reply(200, piazzaApiResponse);
-      axiosMock.onPost(getAppsUrl(courseId)).reply(403);
+      axiosMock.onGet(getDiscussionsProvidersUrl(courseId)).reply(200, generateProvidersApiResponse());
+      axiosMock.onGet(getDiscussionsSettingsUrl(courseId)).reply(200, piazzaApiResponse);
+      axiosMock.onPost(getDiscussionsSettingsUrl(courseId)).reply(403);
 
-      // We call fetchApps and selectApp here too just to get us into a real state.
-      await executeThunk(fetchApps(courseId), store.dispatch);
+      // We call fetchProviders and selectApp here too just to get us into a real state.
+      await executeThunk(fetchProviders(courseId), store.dispatch);
       store.dispatch(selectApp({ appId: 'piazza' }));
-      await executeThunk(saveAppConfig(courseId, 'piazza', {}, pagesAndResourcesPath), store.dispatch);
+      await executeThunk(saveProviderConfig(courseId, 'piazza', {}, pagesAndResourcesPath, mockedNavigator), store.dispatch);
 
-      // Assert we're still on the form.
-      expect(window.location.pathname).toEqual(`/course/${courseId}/pages-and-resources/discussions/configure/piazza`);
       expect(store.getState().discussions).toEqual(
         expect.objectContaining({
-          appIds: ['legacy', 'piazza', 'discourse'],
+          appIds: ['legacy', 'openedx', 'piazza', 'discourse'],
           featureIds,
           activeAppId: 'piazza',
           selectedAppId: 'piazza',
-          status: DENIED, // We set BOTH statuses to DENIED for saveAppConfig - this removes the UI.
+          status: DENIED, // We set BOTH statuses to DENIED for saveProviderConfig - this removes the UI.
           saveStatus: DENIED,
           hasValidationError: false,
         }),
@@ -314,10 +324,9 @@ describe('Data layer integration tests', () => {
     });
 
     test('successfully saves an LTI configuration', async () => {
-      history.push(`/course/${courseId}/pages-and-resources/discussions/configure/piazza`);
-
-      axiosMock.onGet(getAppsUrl(courseId)).reply(200, piazzaApiResponse);
-      axiosMock.onPost(getAppsUrl(courseId), {
+      axiosMock.onGet(getDiscussionsProvidersUrl(courseId)).reply(200, generateProvidersApiResponse());
+      axiosMock.onGet(getDiscussionsSettingsUrl(courseId)).reply(200, piazzaApiResponse);
+      axiosMock.onPost(getDiscussionsSettingsUrl(courseId), {
         context_key: courseId,
         enabled: true,
         lti_configuration: {
@@ -339,10 +348,10 @@ describe('Data layer integration tests', () => {
         },
       });
 
-      // We call fetchApps and selectApp here too just to get us into a real state.
-      await executeThunk(fetchApps(courseId), store.dispatch);
+      // We call fetchProviders and selectApp here too just to get us into a real state.
+      await executeThunk(fetchProviders(courseId), store.dispatch);
       store.dispatch(selectApp({ appId: 'piazza' }));
-      await executeThunk(saveAppConfig(
+      await executeThunk(saveProviderConfig(
         courseId,
         'piazza',
         {
@@ -351,43 +360,45 @@ describe('Data layer integration tests', () => {
           launchUrl: 'http://localhost/new_launch_url',
         },
         pagesAndResourcesPath,
+        mockedNavigator,
       ), store.dispatch);
 
-      expect(window.location.pathname).toEqual(pagesAndResourcesPath);
-      expect(store.getState().discussions).toEqual(
-        expect.objectContaining({
-          appIds: ['legacy', 'piazza', 'discourse'],
-          featureIds,
-          activeAppId: 'piazza',
-          selectedAppId: 'piazza',
-          status: LOADED,
-          saveStatus: SAVED,
-          hasValidationError: false,
-        }),
-      );
-      expect(store.getState().models.appConfigs.piazza).toEqual({
-        id: 'piazza',
-        consumerKey: 'new_consumer_key',
-        consumerSecret: 'new_consumer_secret',
-        launchUrl: 'https://localhost/new_launch_url',
-        piiSharing: false,
-        piiShareUsername: undefined,
-        piiShareEmail: undefined,
+      waitFor(() => {
+        expect(mockedNavigator).toHaveBeenCalledWith(pagesAndResourcesPath);
+        expect(store.getState().discussions).toEqual(
+          expect.objectContaining({
+            appIds: ['legacy', 'openedx', 'piazza', 'discourse'],
+            featureIds,
+            activeAppId: 'piazza',
+            selectedAppId: 'piazza',
+            status: LOADED,
+            saveStatus: SAVED,
+            hasValidationError: false,
+          }),
+        );
+        expect(store.getState().models.appConfigs.piazza).toEqual({
+          id: 'piazza',
+          consumerKey: 'new_consumer_key',
+          consumerSecret: 'new_consumer_secret',
+          launchUrl: 'https://localhost/new_launch_url',
+        });
       });
     });
 
     test('successfully saves a Legacy configuration', async () => {
-      history.push(`/course/${courseId}/pages-and-resources/discussions/configure/legacy`);
-
-      axiosMock.onGet(getAppsUrl(courseId)).reply(200, legacyApiResponse);
-      axiosMock.onPost(getAppsUrl(courseId), {
+      axiosMock.onGet(getDiscussionsProvidersUrl(courseId)).reply(200, generateProvidersApiResponse(false, 'legacy'));
+      axiosMock.onGet(getDiscussionsSettingsUrl(courseId)).reply(200, legacyApiResponse);
+      axiosMock.onPost(getDiscussionsSettingsUrl(courseId), {
         context_key: courseId,
         enabled: true,
         lti_configuration: {},
         plugin_configuration: {
           allow_anonymous: true,
           allow_anonymous_to_peers: true,
-          discussion_blackouts: [['2015-09-15', '2015-09-21'], ['2015-10-01', '2015-10-08']],
+          reported_content_email_notifications: true,
+          always_divide_inline_discussions: true,
+          discussion_blackouts: [],
+          division_scheme: DivisionSchemes.COHORT,
           discussion_topics: {
             Edx: { id: '13f106c6-6735-4e84-b097-0456cff55960' },
             General: { id: 'course' },
@@ -404,7 +415,10 @@ describe('Data layer integration tests', () => {
         plugin_configuration: {
           allow_anonymous: true,
           allow_anonymous_to_peers: true,
-          discussion_blackouts: [['2015-09-15', '2015-09-21'], ['2015-10-01', '2015-10-08']],
+          reported_content_email_notifications: true,
+          always_divide_inline_discussions: true,
+          discussion_blackouts: [],
+          division_scheme: DivisionSchemes.COHORT,
           discussion_topics: {
             Edx: { id: '13f106c6-6735-4e84-b097-0456cff55960' },
             General: { id: 'course' },
@@ -416,21 +430,25 @@ describe('Data layer integration tests', () => {
         },
       });
 
-      // We call fetchApps and selectApp here too just to get us into a real state.
-      await executeThunk(fetchApps(courseId), store.dispatch);
+      // We call fetchProviders and selectApp here too just to get us into a real state.
+      await executeThunk(fetchProviders(courseId), store.dispatch);
+      await executeThunk(fetchDiscussionSettings(courseId), store.dispatch);
       store.dispatch(selectApp({ appId: 'legacy' }));
-      await executeThunk(saveAppConfig(
+      await executeThunk(saveProviderConfig(
         courseId,
         'legacy',
         {
           allowAnonymousPosts: true,
           allowAnonymousPostsPeers: true,
-          blackoutDates: '[["2015-09-15","2015-09-21"],["2015-10-01","2015-10-08"]]',
+          reportedContentEmailNotifications: true,
+          restrictedDates: [],
           // TODO: Note!  As of this writing, all the data below this line is NOT returned in the API
           // but we technically send it to the thunk, so here it is.
           divideByCohorts: true,
-          allowDivisionByUnit: true,
-          divideCourseTopicsByCohorts: false,
+          allowDivisionsByUnit: true,
+          alwaysDivideInlineDiscussions: true,
+          divideCourseTopicsByCohorts: true,
+          divisionScheme: DivisionSchemes.COHORT,
           divideDiscussionIds,
           discussionTopics: [
             { name: 'Edx', id: '13f106c6-6735-4e84-b097-0456cff55960' },
@@ -438,33 +456,39 @@ describe('Data layer integration tests', () => {
           ],
         },
         pagesAndResourcesPath,
+        mockedNavigator,
       ), store.dispatch);
-
-      expect(window.location.pathname).toEqual(pagesAndResourcesPath);
-      expect(store.getState().discussions).toEqual(
-        expect.objectContaining({
-          appIds: ['legacy', 'piazza'],
-          featureIds,
-          activeAppId: 'legacy',
-          selectedAppId: 'legacy',
-          status: LOADED,
-          saveStatus: SAVED,
-          hasValidationError: false,
-          divideDiscussionIds,
-          discussionTopicIds,
-        }),
-      );
-      expect(store.getState().models.appConfigs.legacy).toEqual({
-        id: 'legacy',
-        // These three fields should be updated.
-        allowAnonymousPosts: true,
-        allowAnonymousPostsPeers: true,
-        blackoutDates: '[["2015-09-15","2015-09-21"],["2015-10-01","2015-10-08"]]',
-        // TODO: Note!  The values we tried to save were ignored, this test reflects what currently
-        // happens, but NOT what we want to have happen!
-        divideByCohorts: true,
-        allowDivisionByUnit: false,
-        divideCourseTopicsByCohorts: false,
+      waitFor(() => {
+        expect(mockedNavigator).toHaveBeenCalledWith(pagesAndResourcesPath);
+        expect(store.getState().discussions).toEqual(
+          expect.objectContaining({
+            appIds: ['legacy', 'openedx', 'piazza', 'discourse'],
+            featureIds,
+            activeAppId: 'legacy',
+            selectedAppId: 'legacy',
+            status: LOADED,
+            saveStatus: SAVED,
+            hasValidationError: false,
+            divideDiscussionIds,
+            discussionTopicIds,
+          }),
+        );
+        expect(store.getState().models.appConfigs.legacy).toEqual({
+          id: 'legacy',
+          // These three fields should be updated.
+          allowAnonymousPosts: true,
+          allowAnonymousPostsPeers: true,
+          reportedContentEmailNotifications: true,
+          alwaysDivideInlineDiscussions: true,
+          restrictedDates: [],
+          // TODO: Note!  The values we tried to save were ignored, this test reflects what currently
+          // happens, but NOT what we want to have happen!
+          divideByCohorts: true,
+          divisionScheme: DivisionSchemes.COHORT,
+          cohortsEnabled: false,
+          allowDivisionByUnit: false,
+          divideCourseTopicsByCohorts: true,
+        });
       });
     });
   });
diff --git a/src/pages-and-resources/discussions/data/slice.js b/src/pages-and-resources/discussions/data/slice.js
index 1d79b06ed8..8608d30fe4 100644
--- a/src/pages-and-resources/discussions/data/slice.js
+++ b/src/pages-and-resources/discussions/data/slice.js
@@ -25,16 +25,17 @@ const slice = createSlice({
     hasValidationError: false,
     discussionTopicIds: [],
     divideDiscussionIds: [],
+    enableInContext: false,
+    enableGradedUnits: false,
+    unitLevelVisibility: false,
+    postingRestrictions: null,
+    enabled: true,
   },
   reducers: {
     loadApps: (state, { payload }) => {
-      state.activeAppId = payload.activeAppId;
-      state.appIds = payload.appIds;
-      state.featureIds = payload.featureIds;
       state.status = LOADED;
       state.saveStatus = SAVED;
-      state.discussionTopicIds = payload.discussionTopicIds;
-      state.divideDiscussionIds = payload.divideDiscussionIds;
+      Object.assign(state, payload);
     },
     selectApp: (state, { payload }) => {
       const { appId } = payload;
diff --git a/src/pages-and-resources/discussions/data/thunks.js b/src/pages-and-resources/discussions/data/thunks.js
index 129c144183..4e0fc189ce 100644
--- a/src/pages-and-resources/discussions/data/thunks.js
+++ b/src/pages-and-resources/discussions/data/thunks.js
@@ -1,50 +1,62 @@
-import { history } from '@edx/frontend-platform';
 import { addModel, addModels } from '../../../generic/model-store';
-import { getApps, postAppConfig } from './api';
+import { getDiscussionsProviders, getDiscussionsSettings, postDiscussionsSettings } from './api';
 import {
-  FAILED,
-  loadApps,
-  LOADING,
-  SAVED,
-  SAVING,
-  updateStatus,
-  updateSaveStatus,
-  DENIED,
+  DENIED, FAILED, loadApps, LOADING, SAVED, SAVING, updateSaveStatus, updateStatus,
 } from './slice';
 
-function updateAppState({
+function updateDiscussionSettingsState({
+  appConfig,
+  discussionTopics,
+  ...discussionSettings
+}) {
+  return async (dispatch) => {
+    dispatch(addModel({ modelType: 'appConfigs', model: appConfig }));
+    dispatch(addModels({ modelType: 'discussionTopics', models: discussionTopics }));
+    dispatch(loadApps(discussionSettings));
+  };
+}
+
+function updateProviderState({
   apps,
   features,
   activeAppId,
-  appConfig,
-  discussionTopicIds,
-  discussionTopics,
-  divideDiscussionIds,
-  userPermissions,
 }) {
   return async (dispatch) => {
     dispatch(addModels({ modelType: 'apps', models: apps }));
     dispatch(addModels({ modelType: 'features', models: features }));
-    dispatch(addModel({ modelType: 'appConfigs', model: appConfig }));
-    dispatch(addModels({ modelType: 'discussionTopics', models: discussionTopics }));
 
-    dispatch(loadApps({
-      activeAppId,
-      appIds: apps.map(app => app.id),
-      featureIds: features.map(feature => feature.id),
-      discussionTopicIds,
-      divideDiscussionIds,
-      userPermissions,
-    }));
+    dispatch(
+      loadApps({
+        activeAppId,
+        appIds: apps.map((app) => app.id),
+        featureIds: features.map((feature) => feature.id),
+      }),
+    );
+  };
+}
+
+export function fetchProviders(courseId) {
+  return async (dispatch) => {
+    dispatch(updateStatus({ status: LOADING }));
+    try {
+      const apps = await getDiscussionsProviders(courseId);
+      dispatch(updateProviderState(apps));
+    } catch (error) {
+      if (error.response && error.response.status === 403) {
+        dispatch(updateStatus({ status: DENIED }));
+      } else {
+        dispatch(updateStatus({ status: FAILED }));
+      }
+    }
   };
 }
 
-export function fetchApps(courseId) {
+export function fetchDiscussionSettings(courseId, providerId = null) {
   return async (dispatch) => {
     dispatch(updateStatus({ status: LOADING }));
     try {
-      const apps = await getApps(courseId);
-      dispatch(updateAppState(apps));
+      const apps = await getDiscussionsSettings(courseId, providerId);
+      dispatch(updateDiscussionSettingsState(apps));
     } catch (error) {
       if (error.response && error.response.status === 403) {
         dispatch(updateStatus({ status: DENIED }));
@@ -55,17 +67,17 @@ export function fetchApps(courseId) {
   };
 }
 
-export function saveAppConfig(courseId, appId, drafts, successPath) {
+export function saveProviderConfig(courseId, appId, drafts, successPath, navigate) {
   return async (dispatch) => {
     dispatch(updateSaveStatus({ status: SAVING }));
 
     try {
-      const apps = await postAppConfig(courseId, appId, drafts);
-      dispatch(updateAppState(apps));
+      const apps = await postDiscussionsSettings(courseId, appId, drafts);
+      dispatch(updateDiscussionSettingsState(apps));
 
       dispatch(updateSaveStatus({ status: SAVED }));
       // Note that we redirect here to avoid having to work with the promise over in AppConfigForm.
-      history.push(successPath);
+      navigate(successPath);
     } catch (error) {
       if (error.response && error.response.status === 403) {
         dispatch(updateSaveStatus({ status: DENIED }));
diff --git a/src/pages-and-resources/discussions/factories/mockApiResponses.js b/src/pages-and-resources/discussions/factories/mockApiResponses.js
index 15c80e9072..e8ce839eff 100644
--- a/src/pages-and-resources/discussions/factories/mockApiResponses.js
+++ b/src/pages-and-resources/discussions/factories/mockApiResponses.js
@@ -1,105 +1,123 @@
-export const generatePiazzaApiResponse = (piazzaAdminOnlyConfig = false) => ({
+import { DivisionSchemes } from '../../../data/constants';
+
+export const generatePiazzaApiResponse = (piiSharingAllowed = false) => ({
   context_key: 'course-v1:edX+DemoX+Demo_Course',
   enabled: true,
   provider_type: 'piazza',
-  features: [
-    'discussion-page',
-    'embedded-course-sections',
-    'wcag-2.1',
-    'lti-basic-configuration',
-  ],
   lti_configuration: {
     lti_1p1_client_key: 'client_key_123',
     lti_1p1_client_secret: 'client_secret_123',
     lti_1p1_launch_url: 'https://localhost/example',
+    pii_sharing_allowed: piiSharingAllowed,
+    pii_share_email: false,
+    pii_share_username: false,
     version: 'lti_1p1',
   },
   plugin_configuration: {},
-  providers: {
-    active: 'piazza',
-    available: {
-      legacy: {
-        features: [
-          'discussion-page',
-          'embedded-course-sections',
-          'wcag-2.1',
-        ],
-        external_links: {
-          learn_more: '',
-          configuration: '',
-          general: '',
-          accessibility: '',
-          contact_email: '',
-        },
-        messages: [],
-        has_full_support: true,
+});
+
+export const generateProvidersApiResponse = (piazzaAdminOnlyConfig = false, activeProvider = 'piazza') => ({
+  active: activeProvider,
+  features: [
+    { id: 'discussion-page', feature_support_type: 'basic' },
+    { id: 'embedded-course-sections', feature_support_type: 'full' },
+    { id: 'wcag-2.1', feature_support_type: 'partial' },
+    { id: 'basic-configuration', feature_support_type: 'common' },
+  ],
+  available: {
+    legacy: {
+      features: [
+        'discussion-page',
+        'embedded-course-sections',
+        'wcag-2.1',
+      ],
+      external_links: {
+        learn_more: '',
+        configuration: '',
+        general: '',
+        accessibility: '',
+        contact_email: '',
       },
-      piazza: {
-        features: [
-          // We give piazza all features just so we can test our "full support" text.
-          'discussion-page',
-          'embedded-course-sections',
-          'wcag-2.1',
-          'lti-basic-configuration',
-        ],
-        external_links: {
-          learn_more: '',
-          configuration: '',
-          general: '',
-          accessibility: '',
-          contact_email: '',
-        },
-        messages: [],
-        has_full_support: false,
-        admin_only_config: piazzaAdminOnlyConfig,
+      messages: [],
+      has_full_support: true,
+      admin_only_config: false,
+    },
+    openedx: {
+      features: [
+        'basic-configuration',
+        'discussion-page',
+        'embedded-course-sections',
+        'wcag-2.1',
+      ],
+      external_links: {
+        learn_more: '',
+        configuration: '',
+        general: '',
+        accessibility: '',
+        contact_email: '',
       },
-      discourse: {
-        features: [
-          'discussion-page',
-          'embedded-course-sections',
-          'wcag-2.1',
-          'lti',
-        ],
-        external_links: {
-          learn_more: '',
-          configuration: '',
-          general: '',
-          accessibility: '',
-          contact_email: '',
-        },
-        messages: [],
-        has_full_support: false,
+      messages: [],
+      has_full_support: true,
+      admin_only_config: false,
+    },
+    piazza: {
+      features: [
+        // We give piazza all features just so we can test our "full support" text.
+        'discussion-page',
+        'embedded-course-sections',
+        'wcag-2.1',
+        'basic-configuration',
+      ],
+      external_links: {
+        learn_more: '',
+        configuration: '',
+        general: '',
+        accessibility: '',
+        contact_email: '',
+      },
+      messages: [],
+      has_full_support: false,
+      admin_only_config: piazzaAdminOnlyConfig,
+    },
+    discourse: {
+      features: [
+        'discussion-page',
+        'embedded-course-sections',
+        'wcag-2.1',
+        'lti',
+      ],
+      external_links: {
+        learn_more: '',
+        configuration: '',
+        general: '',
+        accessibility: '',
+        contact_email: '',
       },
+      messages: [],
+      has_full_support: false,
+      admin_only_config: false,
     },
   },
 });
 
-export const legacyApiResponse = {
+export const generateLegacyApiResponse = () => ({
   context_key: 'course-v1:edX+DemoX+Demo_Course',
   enabled: true,
+  posting_restrictions: 'scheduled',
   provider_type: 'legacy',
-  features: [
-    'discussion-page',
-    'embedded-course-sections',
-    'wcag-2.1',
-    'lti-basic-configuration',
-  ],
   lti_configuration: {},
   plugin_configuration: {
     allow_anonymous: false,
     allow_anonymous_to_peers: false,
+    reported_content_email_notifications: false,
     always_divide_inline_discussions: false,
     available_division_schemes: ['enrollment_track'],
     discussion_topics: {
       Edx: { id: '13f106c6-6735-4e84-b097-0456cff55960' },
       General: { id: 'course' },
     },
-    divided_course_wide_discussions: [
-      '13f106c6-6735-4e84-b097-0456cff55960',
-      'course',
-    ],
-    divided_inline_discussions: [],
-    division_scheme: 'none',
+    divided_course_wide_discussions: [],
+    division_scheme: DivisionSchemes.COHORT,
     // Note, this gets stringified when normalized into the app, but the API returns it as an
     // actual array.  Argh.
     discussion_blackouts: [],
@@ -129,7 +147,7 @@ export const legacyApiResponse = {
           'discussion-page',
           'embedded-course-sections',
           'wcag-2.1',
-          'lti-basic-configuration',
+          'basic-configuration',
         ],
         external_links: {
           learn_more: '',
@@ -143,7 +161,8 @@ export const legacyApiResponse = {
       },
     },
   },
-};
+});
+export const legacyApiResponse = generateLegacyApiResponse();
 
 export const emptyAppApiResponse = {
   context_key: '',
@@ -159,7 +178,7 @@ export const emptyAppApiResponse = {
   },
 };
 
-export const piazzaApiResponse = generatePiazzaApiResponse(false);
+export const piazzaApiResponse = generatePiazzaApiResponse();
 
 export const courseDetailResponse = {
   blocks_url: 'http://localhost:18000/api/courses/v2/blocks/?course_id=course-v1%3AedX%2BDemoX%2BDemo_Course',
diff --git a/src/pages-and-resources/index.js b/src/pages-and-resources/index.js
index a9bf84cf67..6cf33b0219 100644
--- a/src/pages-and-resources/index.js
+++ b/src/pages-and-resources/index.js
@@ -1,2 +1 @@
-/* eslint-disable import/prefer-default-export */
 export { default as PagesAndResources } from './PagesAndResources';
diff --git a/src/pages-and-resources/messages.js b/src/pages-and-resources/messages.js
index 3fbe5f849f..cd8670dddf 100644
--- a/src/pages-and-resources/messages.js
+++ b/src/pages-and-resources/messages.js
@@ -13,10 +13,18 @@ const messages = defineMessages({
     id: 'course-authoring.pages-resources.viewLive.button',
     defaultMessage: 'View live',
   },
+  errorShowingConfiguration: {
+    id: 'course-authoring.pages-resources.courseAppPlugin.errorMessage',
+    defaultMessage: 'An error occurred when loading the configuration UI for that app.',
+  },
   enabled: {
     id: 'course-authoring.badge.enabled',
     defaultMessage: 'Enabled',
   },
+  contentPermissions: {
+    id: 'course-authoring.pages-resources.content-permissions.heading',
+    defaultMessage: 'Content permissions',
+  },
 });
 
 export default messages;
diff --git a/src/pages-and-resources/pages/PageCard.jsx b/src/pages-and-resources/pages/PageCard.jsx
index 17d25cddc8..c6f428bc07 100644
--- a/src/pages-and-resources/pages/PageCard.jsx
+++ b/src/pages-and-resources/pages/PageCard.jsx
@@ -1,15 +1,11 @@
-import { history } from '@edx/frontend-platform';
 import classNames from 'classnames';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import {
-  Badge, Card, Icon, IconButton, Hyperlink,
-} from '@edx/paragon';
-import { ArrowForward, Settings } from '@edx/paragon/icons';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Badge, Card } from '@openedx/paragon';
 import PropTypes from 'prop-types';
-import React, { useContext } from 'react';
+import React from 'react';
 import messages from '../messages';
-import { PagesAndResourcesContext } from '../PagesAndResourcesProvider';
 import { useIsDesktop } from '../../utils';
+import PageSettingButton from './PageSettingButton';
 import './PageCard.scss';
 
 const CoursePageShape = PropTypes.shape({
@@ -17,84 +13,60 @@ const CoursePageShape = PropTypes.shape({
   name: PropTypes.string.isRequired,
   description: PropTypes.string.isRequired,
   enabled: PropTypes.bool.isRequired,
+  legacyLink: PropTypes.string,
   allowedOperations: PropTypes.shape({
-    enable: PropTypes.bool.isRequired,
-    configure: PropTypes.bool.isRequired,
-  }).isRequired,
+    enable: PropTypes.bool,
+    configure: PropTypes.bool,
+  }),
 });
 
 export { CoursePageShape };
 
-function PageCard({
-  intl,
+const PageCard = ({
   page,
-}) {
-  const { path: pagesAndResourcesPath } = useContext(PagesAndResourcesContext);
+  settingButton,
+  courseId,
+}) => {
+  const { formatMessage } = useIntl();
   const isDesktop = useIsDesktop();
 
-  const SettingsButton = () => {
-    if (page.legacyLink) {
-      return (
-        <Hyperlink destination={page.legacyLink}>
-          <IconButton
-            className="mb-0 mr-1"
-            src={ArrowForward}
-            iconAs={Icon}
-            size="inline"
-            alt={intl.formatMessage(messages.settings)}
-            onClick={() => {}}
-          />
-        </Hyperlink>
-      );
-    }
-    return (page.allowedOperations.configure || page.allowedOperations.enable) && (
-      <IconButton
-        className="mb-0 mr-1"
-        src={Settings}
-        iconAs={Icon}
-        size="inline"
-        alt={intl.formatMessage(messages.settings)}
-        onClick={() => history.push(`${pagesAndResourcesPath}/${page.id}/settings`)}
-      />
-    );
-  };
+  const SettingButton = settingButton || <PageSettingButton courseId={courseId} {...page} />;
 
   return (
     <Card
-      className={classNames(
-        'shadow card',
-        {
-          'desktop-card': isDesktop,
-          'mobile-card': !isDesktop,
-        },
-      )}
+      className={classNames('shadow justify-content-between', {
+        'desktop-card': isDesktop,
+        'mobile-card': !isDesktop,
+      })}
     >
-      <Card.Body className="d-flex flex-column justify-content-between">
-        <div>
-          <Card.Title className="d-flex mb-1 align-items-center justify-content-between">
-            <h4 className="m-0 p-0">{page.name}</h4>
-            <SettingsButton />
-          </Card.Title>
-          {
-            page.enabled && (
-              <Badge variant="success">
-                {intl.formatMessage(messages.enabled)}
-              </Badge>
-            )
-          }
-        </div>
-        <Card.Text className="m-0">
+      <Card.Header
+        title={page.name}
+        subtitle={page.enabled && (
+          <Badge variant="success" className="mt-1">
+            {formatMessage(messages.enabled)}
+          </Badge>
+        )}
+        actions={<div className="mt-1">{SettingButton}</div>}
+        size="sm"
+      />
+      <Card.Body>
+        <Card.Section>
           {page.description}
-        </Card.Text>
-
+        </Card.Section>
       </Card.Body>
     </Card>
   );
-}
+};
+
+PageCard.defaultProps = {
+  settingButton: null,
+  courseId: null,
+};
 
 PageCard.propTypes = {
-  intl: intlShape.isRequired,
   page: CoursePageShape.isRequired,
+  settingButton: PropTypes.node,
+  courseId: PropTypes.string,
 };
 
-export default injectIntl(PageCard);
+export default PageCard;
diff --git a/src/pages-and-resources/pages/PageCard.scss b/src/pages-and-resources/pages/PageCard.scss
index 457fbc7c71..7e27092b1e 100644
--- a/src/pages-and-resources/pages/PageCard.scss
+++ b/src/pages-and-resources/pages/PageCard.scss
@@ -7,3 +7,16 @@
   width: 100%;
   height: 14rem;
 }
+
+.shadow {
+  box-shadow: 0 .125rem .25rem rgb(0 0 0 / .3) !important;
+}
+
+[dir="rtl"] {
+  .desktop-card,
+  .mobile-card {
+    .pgn__card-header-actions .pgn__hyperlink .btn-icon {
+      transform: scaleX(-1);
+    }
+  }
+}
diff --git a/src/pages-and-resources/pages/PageCard.test.jsx b/src/pages-and-resources/pages/PageCard.test.jsx
index 86a7a009a7..6a9c193fa9 100644
--- a/src/pages-and-resources/pages/PageCard.test.jsx
+++ b/src/pages-and-resources/pages/PageCard.test.jsx
@@ -1,5 +1,81 @@
-describe('PageCard', () => {
-  it('will pass because it is an example', () => {
+import { getConfig } from '@edx/frontend-platform';
 
+import {
+  initializeMocks,
+  screen,
+  render,
+  waitFor,
+} from '../../testUtils';
+import PageGrid from './PageGrid';
+import { executeThunk } from '../../utils';
+import { getApiWaffleFlagsUrl } from '../../data/api';
+import { fetchWaffleFlags } from '../../data/thunks';
+
+import PagesAndResourcesProvider from '../PagesAndResourcesProvider';
+
+let container;
+let store;
+let axiosMock;
+const courseId = '123';
+const mockPageConfig = [
+  {
+    id: '1',
+    legacyLink: `${getConfig().STUDIO_BASE_URL}/tabs/course-v1:OpenedX+DemoX+DemoCourse`,
+    name: 'Custom pages',
+  },
+  {
+    id: '2',
+    legacyLink: `${getConfig().STUDIO_BASE_URL}/textbooks/course-v1:OpenedX+DemoX+DemoCourse`,
+    name: 'Textbook',
+    enabled: true,
+  },
+  {
+    name: 'Page',
+    allowedOperations: {
+      enable: true,
+    },
+    id: '3',
+  },
+];
+
+const renderComponent = () => {
+  const wrapper = render(
+    <PagesAndResourcesProvider courseId={courseId}>
+      <PageGrid pages={mockPageConfig} />
+    </PagesAndResourcesProvider>,
+  );
+  container = wrapper.container;
+};
+
+describe('LiveSettings', () => {
+  beforeEach(async () => {
+    const mocks = initializeMocks();
+    store = mocks.reduxStore;
+    axiosMock = mocks.axiosMock;
+    axiosMock
+      .onGet(getApiWaffleFlagsUrl(courseId))
+      .reply(200, {
+        useNewGradingPage: true,
+        useNewCertificatesPage: true,
+        useNewScheduleDetailsPage: true,
+        useNewCourseOutlinePage: true,
+      });
+    await executeThunk(fetchWaffleFlags(courseId), store.dispatch);
+  });
+
+  it('should render three cards', async () => {
+    renderComponent();
+    waitFor(() => {
+      expect(screen.queryAllByRole(container, 'button')).toHaveLength(3);
+    });
+  });
+
+  it('should navigate to legacyLink', async () => {
+    renderComponent();
+    const textbookPagePath = mockPageConfig[0][1];
+    waitFor(() => {
+      const textbookSettingsButton = screen.queryAllByRole(container, 'link')[1];
+      expect(textbookSettingsButton).toHaveAttribute('href', textbookPagePath);
+    });
   });
 });
diff --git a/src/pages-and-resources/pages/PageGrid.jsx b/src/pages-and-resources/pages/PageGrid.jsx
index 99531b3ba2..64079570f3 100644
--- a/src/pages-and-resources/pages/PageGrid.jsx
+++ b/src/pages-and-resources/pages/PageGrid.jsx
@@ -1,29 +1,34 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { injectIntl } from '@edx/frontend-platform/i18n';
-import { CardGrid } from '@edx/paragon';
+import { CardGrid } from '@openedx/paragon';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
 import PageCard, { CoursePageShape } from './PageCard';
 
-function PageGrid({ pages }) {
-  return (
-    <CardGrid columnSizes={{
-      xs: 12,
-      sm: 6,
-      lg: 4,
-      xl: 4,
-    }}
-    >
-      {pages.map((page) => (
-        <div key={page.id} className="justify-content-center w-100 d-flex">
-          <PageCard page={page} />
-        </div>
-      ))}
-    </CardGrid>
-  );
-}
+const PageGrid = ({ pages, pluginSlotId, courseId }) => (
+  <CardGrid columnSizes={{
+    xs: 12,
+    sm: 6,
+    lg: 4,
+    xl: 4,
+  }}
+  >
+    {pages.map((page) => (
+      <PageCard page={page} key={page.id} courseId={courseId} />
+    ))}
+    {pluginSlotId && <PluginSlot id={pluginSlotId} />}
+  </CardGrid>
+);
+
+PageGrid.defaultProps = {
+  pluginSlotId: null,
+  courseId: null,
+};
 
 PageGrid.propTypes = {
   pages: PropTypes.arrayOf(CoursePageShape.isRequired).isRequired,
+  pluginSlotId: PropTypes.string,
+  courseId: PropTypes.string,
 };
 
 export default injectIntl(PageGrid);
diff --git a/src/pages-and-resources/pages/PageSettingButton.jsx b/src/pages-and-resources/pages/PageSettingButton.jsx
new file mode 100644
index 0000000000..039ac14e2d
--- /dev/null
+++ b/src/pages-and-resources/pages/PageSettingButton.jsx
@@ -0,0 +1,89 @@
+import { useContext, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { useSelector } from 'react-redux';
+
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Icon, IconButton } from '@openedx/paragon';
+import { ArrowForward, Settings } from '@openedx/paragon/icons';
+import { useNavigate, Link } from 'react-router-dom';
+
+import { getWaffleFlags } from '../../data/selectors';
+import messages from '../messages';
+import { PagesAndResourcesContext } from '../PagesAndResourcesProvider';
+
+const PageSettingButton = ({
+  id,
+  courseId,
+  legacyLink,
+  allowedOperations,
+}) => {
+  const { formatMessage } = useIntl();
+  const { path: pagesAndResourcesPath } = useContext(PagesAndResourcesContext);
+  const navigate = useNavigate();
+  const waffleFlags = useSelector(getWaffleFlags);
+
+  const determineLinkDestination = useMemo(() => {
+    if (!legacyLink) { return null; }
+
+    if (legacyLink.includes('textbooks')) {
+      return waffleFlags.useNewTextbooksPage
+        ? `/course/${courseId}/${id.replace('_', '-')}`
+        : legacyLink;
+    }
+
+    if (legacyLink.includes('tabs')) {
+      return waffleFlags.useNewCustomPages
+        ? `/course/${courseId}/${id.replace('_', '-')}`
+        : legacyLink;
+    }
+
+    return null;
+  }, [legacyLink, waffleFlags, id]);
+
+  const canConfigureOrEnable = allowedOperations?.configure || allowedOperations?.enable;
+
+  if (determineLinkDestination) {
+    return (
+      <Link to={determineLinkDestination}>
+        <IconButton
+          src={ArrowForward}
+          iconAs={Icon}
+          size="inline"
+          alt={formatMessage(messages.settings)}
+        />
+      </Link>
+    );
+  }
+
+  if (!canConfigureOrEnable) {
+    return null;
+  }
+
+  return (
+    <IconButton
+      src={Settings}
+      iconAs={Icon}
+      size="inline"
+      alt={formatMessage(messages.settings)}
+      onClick={() => navigate(`${pagesAndResourcesPath}/${id}/settings`)}
+    />
+  );
+};
+
+PageSettingButton.defaultProps = {
+  legacyLink: null,
+  allowedOperations: null,
+  courseId: null,
+};
+
+PageSettingButton.propTypes = {
+  id: PropTypes.string.isRequired,
+  courseId: PropTypes.string,
+  legacyLink: PropTypes.string,
+  allowedOperations: PropTypes.shape({
+    configure: PropTypes.bool,
+    enable: PropTypes.bool,
+  }),
+};
+
+export default PageSettingButton;
diff --git a/src/pages-and-resources/pages/PageSettingButton.test.jsx b/src/pages-and-resources/pages/PageSettingButton.test.jsx
new file mode 100644
index 0000000000..cf12b07942
--- /dev/null
+++ b/src/pages-and-resources/pages/PageSettingButton.test.jsx
@@ -0,0 +1,93 @@
+import { screen, render } from '@testing-library/react';
+import { useSelector } from 'react-redux';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import PageSettingButton from './PageSettingButton';
+
+jest.mock('react-redux', () => ({
+  useSelector: jest.fn(),
+}));
+
+jest.mock('react-router-dom', () => {
+  // eslint-disable-next-line global-require
+  const PropTypes = require('prop-types');
+
+  const Link = ({ children, to }) => <a href={to}>{children}</a>;
+
+  Link.propTypes = {
+    children: PropTypes.node.isRequired,
+    to: PropTypes.string.isRequired,
+  };
+
+  return {
+    useNavigate: jest.fn(),
+    Link,
+  };
+});
+
+const mockWaffleFlags = {
+  useNewTextbooksPage: true,
+  useNewCustomPages: true,
+};
+
+const defaultProps = {
+  id: 'page_id',
+  courseId: 'course-v1:edX+DemoX+Demo_Course',
+  legacyLink: 'http://legacylink.com/tabs',
+  allowedOperations: { configure: true, enable: true },
+};
+
+const renderComponent = (props = {}) => render(
+  <IntlProvider locale="en">
+    <PageSettingButton {...defaultProps} {...props} />
+  </IntlProvider>,
+);
+
+describe('PageSettingButton', () => {
+  beforeEach(() => {
+    useSelector.mockClear();
+  });
+
+  it('renders the settings button with the new textbooks page link when useNewTextbooksPage is true', () => {
+    useSelector.mockReturnValue(mockWaffleFlags);
+
+    renderComponent({ legacyLink: 'http://legacylink.com/textbooks' });
+
+    const linkElement = screen.getByRole('link');
+    expect(linkElement).toHaveAttribute('href', `/course/${defaultProps.courseId}/page-id`);
+  });
+
+  it('does not render link when legacyLink prop value incorrect', () => {
+    useSelector.mockReturnValue(mockWaffleFlags);
+
+    renderComponent({ legacyLink: 'http://legacylink.com/some-value' });
+
+    expect(screen.queryByRole('link')).toBeNull();
+  });
+
+  it('renders the settings button with the legacy link when useNewTextbooksPage is false', () => {
+    useSelector.mockReturnValue({ ...mockWaffleFlags, useNewTextbooksPage: false });
+
+    renderComponent({ legacyLink: 'http://legacylink.com/textbooks' });
+
+    const linkElement = screen.getByRole('link');
+    expect(linkElement).toHaveAttribute('href', 'http://legacylink.com/textbooks');
+  });
+
+  it('renders the settings button with the new custom pages link when useNewCustomPages is true', () => {
+    useSelector.mockReturnValue(mockWaffleFlags);
+
+    renderComponent();
+
+    const linkElement = screen.getByRole('link');
+    expect(linkElement).toHaveAttribute('href', `/course/${defaultProps.courseId}/page-id`);
+  });
+
+  it('renders the settings button with the legacy link when useNewCustomPages is false', () => {
+    useSelector.mockReturnValue({ ...mockWaffleFlags, useNewCustomPages: false });
+
+    renderComponent();
+
+    const linkElement = screen.getByRole('link');
+    expect(linkElement).toHaveAttribute('href', defaultProps.legacyLink);
+  });
+});
diff --git a/src/pages-and-resources/utils.test.jsx b/src/pages-and-resources/utils.test.jsx
new file mode 100644
index 0000000000..debd091589
--- /dev/null
+++ b/src/pages-and-resources/utils.test.jsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { render } from '@testing-library/react';
+import { BrowserRouter } from 'react-router-dom';
+import { configureStore } from '@reduxjs/toolkit';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { Provider } from 'react-redux';
+
+import { reducer as modelsReducer } from '../generic/model-store';
+import { reducer as pagesAndResourcesReducer } from './data/slice';
+import PagesAndResourcesProvider from './PagesAndResourcesProvider';
+
+function renderWithProviders(
+  ui,
+  {
+    preloadedState = {},
+    // Automatically create a store instance if no store was passed in
+    store = configureStore(
+      {
+        reducer: { pagesAndResources: pagesAndResourcesReducer, models: modelsReducer }, preloadedState,
+      },
+    ),
+    ...renderOptions
+  } = {},
+) {
+  const Wrapper = ({ children }) => (
+    <IntlProvider locale="en">
+      {/* <MemoryRouter initialEntries={['/pages-and-resources']}> */}
+      <PagesAndResourcesProvider courseId="course-v1:edX+TestX+Test_Course">
+        <BrowserRouter>
+          <Provider store={store}>{children}</Provider>
+        </BrowserRouter>
+      </PagesAndResourcesProvider>
+      {/* </MemoryRouter> */}
+    </IntlProvider>
+  );
+
+  Wrapper.propTypes = {
+    children: PropTypes.node.isRequired,
+  };
+
+  // Return an object with the store and all of RTL's query functions
+  return { store, ...render(ui, { wrapper: Wrapper, ...renderOptions }) };
+}
+
+// We may add additional exports to this file over time, so we will not export render as the default.
+export { renderWithProviders as render };
diff --git a/src/proctored-exam-settings/ProctoredExamSettings.jsx b/src/proctored-exam-settings/ProctoredExamSettings.jsx
deleted file mode 100644
index 02126b94d9..0000000000
--- a/src/proctored-exam-settings/ProctoredExamSettings.jsx
+++ /dev/null
@@ -1,536 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
-import EmailValidator from 'email-validator';
-import moment from 'moment';
-import {
-  Alert, Button, Form, Spinner,
-} from '@edx/paragon';
-import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
-import {
-  injectIntl,
-  intlShape,
-  FormattedMessage,
-} from '@edx/frontend-platform/i18n';
-
-import { getConfig } from '@edx/frontend-platform';
-import messages from './ProctoredExamSettings.messages';
-import StudioApiService from '../data/services/StudioApiService';
-import Loading from '../generic/Loading';
-import ConnectionErrorAlert from '../generic/ConnectionErrorAlert';
-import PermissionDeniedAlert from '../generic/PermissionDeniedAlert';
-
-function ProctoredExamSettings({ courseId, intl }) {
-  const [loading, setLoading] = useState(true);
-  const [loaded, setLoaded] = useState(false);
-  const [loadingConnectionError, setLoadingConnectionError] = useState(false);
-  const [loadingPermissionError, setLoadingPermissionError] = useState(false);
-  const [enableProctoredExams, setEnableProctoredExams] = useState(true);
-  const [allowOptingOut, setAllowOptingOut] = useState(false);
-  const [proctoringProvider, setProctoringProvider] = useState('');
-  const [availableProctoringProviders, setAvailableProctoringProviders] = useState([]);
-  const [proctortrackEscalationEmail, setProctortrackEscalationEmail] = useState('');
-  const [createZendeskTickets, setCreateZendeskTickets] = useState(false);
-  const [courseStartDate, setCourseStartDate] = useState('');
-  const [saveSuccess, setSaveSuccess] = useState(false);
-  const [saveError, setSaveError] = useState(false);
-  const [submissionInProgress, setSubmissionInProgress] = useState(false);
-  const [showProctortrackEscalationEmail, setShowProctortrackEscalationEmail] = useState(false);
-  const isEdxStaff = getAuthenticatedUser().administrator;
-  const [formStatus, setFormStatus] = useState({
-    isValid: true,
-    errors: {},
-  });
-
-  const alertRef = React.createRef();
-  const saveStatusAlertRef = React.createRef();
-  const proctoringEscalationEmailInputRef = useRef(null);
-
-  function onEnableProctoredExamsChange(event) {
-    setEnableProctoredExams(event.target.checked);
-  }
-
-  function onAllowOptingOutChange(value) {
-    setAllowOptingOut(value);
-  }
-
-  function onCreateZendeskTicketsChange(value) {
-    setCreateZendeskTickets(value);
-  }
-
-  function onProctoringProviderChange(event) {
-    const provider = event.target.value;
-    setProctoringProvider(provider);
-
-    if (provider === 'proctortrack') {
-      setCreateZendeskTickets(false);
-      setShowProctortrackEscalationEmail(true);
-    } else {
-      if (provider === 'software_secure') {
-        setCreateZendeskTickets(true);
-      }
-      setShowProctortrackEscalationEmail(false);
-    }
-  }
-
-  function onProctortrackEscalationEmailChange(event) {
-    setProctortrackEscalationEmail(event.target.value);
-  }
-
-  function setFocusToProctortrackEscalationEmailInput() {
-    if (proctoringEscalationEmailInputRef && proctoringEscalationEmailInputRef.current) {
-      proctoringEscalationEmailInputRef.current.focus();
-    }
-  }
-
-  function postSettingsBackToServer() {
-    const dataToPostBack = {
-      proctored_exam_settings: {
-        enable_proctored_exams: enableProctoredExams,
-        proctoring_provider: proctoringProvider,
-        create_zendesk_tickets: createZendeskTickets,
-      },
-    };
-    if (isEdxStaff) {
-      dataToPostBack.proctored_exam_settings.allow_proctoring_opt_out = allowOptingOut;
-    }
-
-    if (proctoringProvider === 'proctortrack') {
-      dataToPostBack.proctored_exam_settings.proctoring_escalation_email = proctortrackEscalationEmail === '' ? null : proctortrackEscalationEmail;
-    }
-
-    setSubmissionInProgress(true);
-    StudioApiService.saveProctoredExamSettingsData(courseId, dataToPostBack).then(() => {
-      setSaveSuccess(true);
-      setSaveError(false);
-      setSubmissionInProgress(false);
-    }).catch(() => {
-      setSaveSuccess(false);
-      setSaveError(true);
-      setSubmissionInProgress(false);
-    });
-  }
-
-  function handleSubmit(event) {
-    event.preventDefault();
-    if (proctoringProvider === 'proctortrack' && !EmailValidator.validate(proctortrackEscalationEmail) && !(proctortrackEscalationEmail === '' && !enableProctoredExams)) {
-      if (proctortrackEscalationEmail === '') {
-        const errorMessage = intl.formatMessage(messages['authoring.examsettings.escalationemail.error.blank']);
-
-        setFormStatus({
-          isValid: false,
-          errors: {
-            formProctortrackEscalationEmail: {
-              dialogErrorMessage: (<Alert.Link onClick={setFocusToProctortrackEscalationEmailInput} href="#formProctortrackEscalationEmail" data-testid="proctorTrackEscalationEmailErrorLink">{errorMessage}</Alert.Link>),
-              inputErrorMessage: errorMessage,
-            },
-          },
-        });
-      } else {
-        const errorMessage = intl.formatMessage(messages['authoring.examsettings.escalationemail.error.invalid']);
-
-        setFormStatus({
-          isValid: false,
-          errors: {
-            formProctortrackEscalationEmail: {
-              dialogErrorMessage: (<Alert.Link onClick={setFocusToProctortrackEscalationEmailInput} href="#formProctortrackEscalationEmail" data-testid="proctorTrackEscalationEmailErrorLink">{errorMessage}</Alert.Link>),
-              inputErrorMessage: errorMessage,
-            },
-          },
-        });
-      }
-    } else {
-      postSettingsBackToServer();
-      const errors = { ...formStatus.errors };
-      delete errors.formProctortrackEscalationEmail;
-      setFormStatus({
-        isValid: true,
-        errors,
-      });
-    }
-  }
-
-  function cannotEditProctoringProvider() {
-    const currentDate = moment(moment()).format('YYYY-MM-DD[T]hh:mm:ss[Z]');
-    const isAfterCourseStart = currentDate > courseStartDate;
-
-    // if the user is not edX staff and it is after the course start date, user cannot edit proctoring provider
-    return !isEdxStaff && isAfterCourseStart;
-  }
-
-  function isDisabledOption(provider) {
-    let markDisabled = false;
-    if (cannotEditProctoringProvider()) {
-      markDisabled = provider !== proctoringProvider;
-    }
-    return markDisabled;
-  }
-
-  function getProctoringProviderOptions(providers) {
-    return providers.map(provider => (
-      <option
-        key={provider}
-        value={provider}
-        disabled={isDisabledOption(provider)}
-        data-testid={provider}
-      >
-        {provider}
-      </option>
-    ));
-  }
-
-  function getFormErrorMessage() {
-    const numOfErrors = Object.keys(formStatus.errors).length;
-    const errors = Object.entries(formStatus.errors).map(([id, error]) => <li key={id}>{error.dialogErrorMessage}</li>);
-    const messageId = numOfErrors > 1 ? 'authoring.examsettings.error.multiple' : 'authoring.examsettings.error.single';
-
-    return (
-      <>
-        <div>{intl.formatMessage(messages[messageId], { numOfErrors })}</div>
-        <ul>
-          {errors}
-        </ul>
-      </>
-    );
-  }
-
-  function renderContent() {
-    return (
-      <Form onSubmit={handleSubmit} data-testid="proctoringForm">
-        {!formStatus.isValid && formStatus.errors.formProctortrackEscalationEmail
-          && (
-            // tabIndex="-1" to make non-focusable element focusable
-            <Alert
-              id="proctortrackEscalationEmailError"
-              variant="danger"
-              tabIndex="-1"
-              data-testid="proctortrackEscalationEmailError"
-              ref={alertRef}
-            >
-              {getFormErrorMessage()}
-            </Alert>
-          )}
-        {/* ENABLE PROCTORED EXAMS */}
-        <Form.Group controlId="formEnableProctoredExam">
-          <Form.Check
-            type="checkbox"
-            id="enableProctoredExams"
-            label={intl.formatMessage(messages['authoring.examsettings.enableproctoredexams.label'])}
-            aria-describedby="enableProctoredExamsHelpText"
-            onChange={onEnableProctoredExamsChange}
-            checked={enableProctoredExams}
-            inline
-          />
-          <Form.Text id="enableProctoredExamsHelpText">
-            <FormattedMessage
-              id="authoring.examsettings.enableproctoredexams.help"
-              defaultMessage="If checked, proctored exams are enabled in your course."
-              description="Help text for checkbox to enable proctored exams."
-            />
-          </Form.Text>
-        </Form.Group>
-
-        {/* ALLOW OPTING OUT OF PROCTORED EXAMS */}
-        { isEdxStaff && enableProctoredExams && (
-          <fieldset aria-describedby="allowOptingOutHelpText">
-            <Form.Group controlId="formAllowingOptingOut">
-              <Form.Label as="legend">
-                <FormattedMessage
-                  id="authoring.examsettings.allowoptout.label"
-                  defaultMessage="Allow Opting Out of Proctored Exams"
-                  description="Label for radio selection allowing proctored exam opt out"
-                />
-              </Form.Label>
-              <Form.Check
-                type="radio"
-                id="allowOptingOutYes"
-                name="allowOptingOut"
-                label={intl.formatMessage(messages['authoring.examsettings.allowoptout.yes'])}
-                inline
-                checked={allowOptingOut}
-                onChange={() => onAllowOptingOutChange(true)}
-                data-testid="allowOptingOutYes"
-              />
-              <Form.Check
-                type="radio"
-                id="allowOptingOutNo"
-                name="allowOptingOut"
-                label={intl.formatMessage(messages['authoring.examsettings.allowoptout.no'])}
-                inline
-                checked={!allowOptingOut}
-                onChange={() => onAllowOptingOutChange(false)}
-                data-testid="allowOptingOutNo"
-              />
-              <Form.Text id="allowOptingOutHelpText">
-                <FormattedMessage
-                  id="authoring.examsettings.allowoptout.help"
-                  defaultMessage={`
-                    If this value is "Yes", learners can choose to take proctored exams without proctoring.
-                    If this value is "No", all learners must take the exam with proctoring.
-                  `}
-                  description="Help text for proctored exam opt out radio selection"
-                />
-              </Form.Text>
-            </Form.Group>
-          </fieldset>
-        )}
-
-        {/* PROCTORING PROVIDER */}
-        { enableProctoredExams && (
-        <Form.Group controlId="formProctoringProvider">
-          <Form.Label as="legend">
-            <FormattedMessage
-              id="authoring.examsettings.provider.label"
-              defaultMessage="Proctoring Provider"
-              description="Label for proctoring provider dropdown selection"
-            />
-          </Form.Label>
-          <Form.Control
-            as="select"
-            value={proctoringProvider}
-            onChange={onProctoringProviderChange}
-            aria-describedby="proctoringProviderHelpText"
-          >
-            {getProctoringProviderOptions(availableProctoringProviders)}
-          </Form.Control>
-          <Form.Text id="proctoringProviderHelpText">
-            {cannotEditProctoringProvider() ? intl.formatMessage(messages['authoring.examsettings.provider.help.aftercoursestart']) : intl.formatMessage(messages['authoring.examsettings.provider.help'])}
-          </Form.Text>
-        </Form.Group>
-        )}
-
-        {/* PROCTORTRACK ESCALATION EMAIL */}
-        {showProctortrackEscalationEmail && enableProctoredExams && (
-          <Form.Group controlId="formProctortrackEscalationEmail">
-            <Form.Label>
-              <FormattedMessage
-                id="authoring.examsettings.escalationemail.label"
-                defaultMessage="Proctortrack Escalation Email"
-                description="Label for escalation email text field"
-              />
-            </Form.Label>
-            <Form.Control
-              ref={proctoringEscalationEmailInputRef}
-              type="email"
-              data-testid="escalationEmail"
-              onChange={onProctortrackEscalationEmailChange}
-              value={proctortrackEscalationEmail}
-              isInvalid={Object.prototype.hasOwnProperty.call(formStatus.errors, 'formProctortrackEscalationEmail')}
-              aria-describedby="proctortrackEscalationEmailHelpText"
-            />
-            <Form.Control.Feedback type="invalid">{formStatus.errors.formProctortrackEscalationEmail && formStatus.errors.formProctortrackEscalationEmail.inputErrorMessage} </Form.Control.Feedback>
-            <Form.Text id="proctortrackEscalationEmailHelpText">
-              <FormattedMessage
-                id="authoring.examsettings.escalationemail.help"
-                defaultMessage={`
-                  Required if "proctortrack" is selected as your proctoring provider. Enter an email address to be
-                  contacted by the support team whenever there are escalations (e.g. appeals, delayed reviews, etc.).
-                `}
-                description="Help text explaining escalation email field."
-              />
-            </Form.Text>
-          </Form.Group>
-        )}
-        {/* CREATE ZENDESK TICKETS */}
-        { isEdxStaff && enableProctoredExams && (
-          <fieldset aria-describedby="createZendeskTicketsText">
-            <Form.Group controlId="formCreateZendeskTickets">
-              <Form.Label as="legend">
-                <FormattedMessage
-                  id="authoring.examsettings.createzendesk.label"
-                  defaultMessage="Create Zendesk Tickets for Suspicious Proctored Exam Attempts"
-                  description="Label for Zendesk ticket creation radio select."
-                />
-              </Form.Label>
-              <Form.Check
-                type="radio"
-                id="createZendeskTicketsYes"
-                label={intl.formatMessage(messages['authoring.examsettings.createzendesk.yes'])}
-                inline
-                name="createZendeskTickets"
-                checked={createZendeskTickets}
-                onChange={() => onCreateZendeskTicketsChange(true)}
-                data-testid="createZendeskTicketsYes"
-              />
-              <Form.Check
-                type="radio"
-                id="createZendeskTicketsNo"
-                label={intl.formatMessage(messages['authoring.examsettings.createzendesk.no'])}
-                inline
-                name="createZendeskTickets"
-                checked={!createZendeskTickets}
-                onChange={() => onCreateZendeskTicketsChange(false)}
-                data-testid="createZendeskTicketsNo"
-              />
-              <Form.Text id="createZendeskTicketsText">
-                <FormattedMessage
-                  id="authoring.examsettings.createzendesk.help"
-                  defaultMessage="If this value is &quot;Yes&quot;, a Zendesk ticket will be created for suspicious proctored exam attempts."
-                  description="Help text for Zendesk ticket creation radio select"
-                />
-              </Form.Text>
-            </Form.Group>
-          </fieldset>
-        )}
-        <Button
-          variant="primary"
-          className="mb-3"
-          data-testid="submissionButton"
-          type="submit"
-          disabled={submissionInProgress}
-        >
-          <FormattedMessage
-            id="authoring.examsettings.submit"
-            defaultMessage="Submit"
-            description="Form submit button"
-          />
-        </Button> {' '}
-        {submissionInProgress && <Spinner animation="border" variant="primary" data-testid="saveInProgress" aria-label="Save in progress" />}
-      </Form>
-    );
-  }
-
-  function renderLoading() {
-    return (
-      <Loading />
-    );
-  }
-
-  function renderConnectionError() {
-    return (
-      <ConnectionErrorAlert />
-    );
-  }
-
-  function renderPermissionError() {
-    return (
-      <PermissionDeniedAlert />
-    );
-  }
-
-  function renderSaveSuccess() {
-    const studioCourseRunURL = StudioApiService.getStudioCourseRunUrl(courseId);
-    return (
-      <Alert
-        variant="success"
-        dismissible
-        data-testid="saveSuccess"
-        tabIndex="-1"
-        ref={saveStatusAlertRef}
-        onClose={() => setSaveSuccess(false)}
-      >
-        <FormattedMessage
-          id="authoring.examsettings.alert.success"
-          defaultMessage={`
-            Proctored exam settings saved successfully.
-            You can go back to your course in Studio {studioCourseRunURL}.
-          `}
-          values={{ studioCourseRunURL: <Alert.Link href={studioCourseRunURL}>here</Alert.Link> }}
-        />
-      </Alert>
-    );
-  }
-
-  function renderSaveError() {
-    return (
-      <Alert
-        variant="danger"
-        dismissible
-        data-testid="saveError"
-        tabIndex="-1"
-        ref={saveStatusAlertRef}
-        onClose={() => setSaveError(false)}
-      >
-        <FormattedMessage
-          id="authoring.examsettings.alert.error"
-          defaultMessage={`
-            We encountered a technical error while trying to save proctored exam settings.
-            This might be a temporary issue, so please try again in a few minutes.
-            If the problem persists,
-            please go to the {support_link} for help.
-          `}
-          values={{
-            support_link: (
-              <Alert.Link href={getConfig().SUPPORT_URL}>
-                {intl.formatMessage(messages['authoring.examsettings.support.text'])}
-              </Alert.Link>
-            ),
-          }}
-        />
-      </Alert>
-    );
-  }
-
-  useEffect(
-    () => {
-      StudioApiService.getProctoredExamSettingsData(courseId)
-        .then(
-          response => {
-            const proctoredExamSettings = response.data.proctored_exam_settings;
-            setLoaded(true);
-            setLoading(false);
-            setSubmissionInProgress(false);
-            setCourseStartDate(response.data.course_start_date);
-            setEnableProctoredExams(proctoredExamSettings.enable_proctored_exams);
-            setAllowOptingOut(proctoredExamSettings.allow_proctoring_opt_out);
-            setProctoringProvider(proctoredExamSettings.proctoring_provider);
-            const isProctortrack = proctoredExamSettings.proctoring_provider === 'proctortrack';
-            setShowProctortrackEscalationEmail(isProctortrack);
-            setAvailableProctoringProviders(response.data.available_proctoring_providers);
-
-            // The backend API may return null for the proctoringEscalationEmail value, which is the default.
-            // In order to keep our email input component controlled, we use the empty string as the default
-            // and perform this conversion during GETs and POSTs.
-            const proctoringEscalationEmail = proctoredExamSettings.proctoring_escalation_email;
-            setProctortrackEscalationEmail(proctoringEscalationEmail === null ? '' : proctoringEscalationEmail);
-
-            setCreateZendeskTickets(proctoredExamSettings.create_zendesk_tickets);
-          },
-        ).catch(
-          error => {
-            if (error.response.status === 403) {
-              setLoadingPermissionError(true);
-            } else {
-              setLoadingConnectionError(true);
-            }
-            setLoading(false);
-            setLoaded(false);
-            setSubmissionInProgress(false);
-          },
-        );
-    }, [],
-  );
-
-  useEffect(() => {
-    if ((saveSuccess || saveError) && !!saveStatusAlertRef.current) {
-      saveStatusAlertRef.current.focus();
-    }
-    if (!formStatus.isValid && !!alertRef.current) {
-      alertRef.current.focus();
-    }
-  }, [formStatus, saveSuccess, saveError]);
-
-  return (
-    <div className="container">
-      <h2 className="mt-3 mb-2">
-        Proctored Exam Settings
-      </h2>
-      <div>
-        {loading ? renderLoading() : null}
-        {saveSuccess ? renderSaveSuccess() : null}
-        {saveError ? renderSaveError() : null}
-        {loaded ? renderContent() : null}
-        {loadingConnectionError ? renderConnectionError() : null}
-        {loadingPermissionError ? renderPermissionError() : null}
-      </div>
-    </div>
-  );
-}
-
-ProctoredExamSettings.propTypes = {
-  courseId: PropTypes.string.isRequired,
-  intl: intlShape.isRequired,
-};
-
-ProctoredExamSettings.defaultProps = {};
-
-export default injectIntl(ProctoredExamSettings);
diff --git a/src/proctored-exam-settings/ProctoredExamSettings.messages.jsx b/src/proctored-exam-settings/ProctoredExamSettings.messages.jsx
deleted file mode 100644
index aa54919542..0000000000
--- a/src/proctored-exam-settings/ProctoredExamSettings.messages.jsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import { defineMessages } from '@edx/frontend-platform/i18n';
-
-const messages = defineMessages({
-  'authoring.examsettings.allowoptout.no': {
-    id: 'authoring.examsettings.allowoptout.no',
-    defaultMessage: 'No',
-    description: '"No" option for yes/no radio button set',
-  },
-  'authoring.examsettings.allowoptout.yes': {
-    id: 'authoring.examsettings.allowoptout.yes',
-    defaultMessage: 'Yes',
-    description: '"Yes" option for yes/no radio button set',
-  },
-  'authoring.examsettings.createzendesk.no': {
-    id: 'authoring.examsettings.createzendesk.no',
-    defaultMessage: 'No',
-    description: '"No" option for yes/no radio button set.',
-  },
-  'authoring.examsettings.createzendesk.yes': {
-    id: 'authoring.examsettings.createzendesk.yes',
-    defaultMessage: 'Yes',
-    description: '"Yes" option for yes/no radio button set.',
-  },
-  'authoring.examsettings.support.text': {
-    id: 'authoring.examsettings.support.text',
-    defaultMessage: 'Support Page',
-    description: 'Text linking to the support page.',
-  },
-  'authoring.examsettings.enableproctoredexams.label': {
-    id: 'authoring.examsettings.escalationemail.enableproctoredexams.label',
-    defaultMessage: 'Enable Proctored Exams',
-    description: 'Label for checkbox to enable proctored exams.',
-  },
-  'authoring.examsettings.escalationemail.error.blank': {
-    id: 'authoring.examsettings.escalationemail.error.blank',
-    defaultMessage: 'The Proctortrack Escalation Email field cannot be empty if proctortrack is the selected provider.',
-    description: 'Error message for missing required email field.',
-  },
-  'authoring.examsettings.escalationemail.error.invalid': {
-    id: 'authoring.examsettings.escalationemail.error.invalid',
-    defaultMessage: 'The Proctortrack Escalation Email field is in the wrong format and is not valid.',
-    description: 'Error message for a invalid email format.',
-  },
-  'authoring.examsettings.error.single': {
-    id: 'authoring.examsettings.error.single',
-    defaultMessage: 'There is 1 error in this form.',
-    description: 'Error alert for one and only one error in the form.',
-  },
-  'authoring.examsettings.error.multiple': {
-    id: 'authoring.examsettings.escalationemail.error.multiple',
-    defaultMessage: 'There are {numOfErrors} errors in this form.',
-    description: 'Error alert for multiple errors in the form.',
-  },
-  'authoring.examsettings.provider.label': {
-    id: 'authoring.examsettings.provider.label',
-    defaultMessage: 'Proctoring Provider',
-    description: 'Label for provider dropdown selection.',
-  },
-  'authoring.examsettings.provider.help': {
-    id: 'authoring.examsettings.provider.help',
-    defaultMessage: 'Select the proctoring provider you want to use for this course run.',
-    description: 'Help text for selecting a proctoring provider.',
-  },
-  'authoring.examsettings.provider.help.aftercoursestart': {
-    id: 'authoring.examsettings.provider.help.aftercoursestart',
-    defaultMessage: 'Proctoring provider cannot be modified after course start date.',
-    description: 'Help text notifying the user that the provider cannot be changed for a course that has already begun.',
-  },
-});
-
-export default messages;
diff --git a/src/proctored-exam-settings/ProctoredExamSettings.test.jsx b/src/proctored-exam-settings/ProctoredExamSettings.test.jsx
deleted file mode 100644
index b697690de4..0000000000
--- a/src/proctored-exam-settings/ProctoredExamSettings.test.jsx
+++ /dev/null
@@ -1,726 +0,0 @@
-import React from 'react';
-import {
-  render, screen, cleanup, waitFor, waitForElementToBeRemoved, fireEvent, act,
-} from '@testing-library/react';
-import { IntlProvider, injectIntl } from '@edx/frontend-platform/i18n';
-// import * as auth from '@edx/frontend-platform/auth';
-import MockAdapter from 'axios-mock-adapter';
-import { initializeMockApp } from '@edx/frontend-platform';
-import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
-import ProctoredExamSettings from './ProctoredExamSettings';
-import StudioApiService from '../data/services/StudioApiService';
-
-const defaultProps = {
-  courseId: 'course-v1%3AedX%2BDemoX%2BDemo_Course',
-};
-
-const IntlProctoredExamSettings = injectIntl(ProctoredExamSettings);
-
-const intlWrapper = children => (
-  <IntlProvider locale="en">
-    {children}
-  </IntlProvider>
-);
-let axiosMock;
-
-describe('ProctoredExamSettings', () => {
-  afterEach(() => {
-    cleanup();
-  });
-
-  describe('Field dependencies', () => {
-    beforeEach(async () => {
-      initializeMockApp({
-        authenticatedUser: {
-          userId: 3,
-          username: 'abc123',
-          administrator: true,
-          roles: [],
-        },
-      });
-
-      axiosMock = new MockAdapter(getAuthenticatedHttpClient());
-
-      axiosMock.onGet(
-        StudioApiService.getProctoredExamSettingsUrl(defaultProps.courseId),
-      ).reply(200, {
-        proctored_exam_settings: {
-          enable_proctored_exams: true,
-          allow_proctoring_opt_out: false,
-          proctoring_provider: 'mockproc',
-          proctoring_escalation_email: 'test@example.com',
-          create_zendesk_tickets: true,
-        },
-        available_proctoring_providers: ['software_secure', 'proctortrack', 'mockproc'],
-        course_start_date: '2070-01-01T00:00:00Z',
-      });
-
-      await act(async () => render(intlWrapper(<IntlProctoredExamSettings {...defaultProps} />)));
-    });
-
-    it('Updates Zendesk ticket field if proctortrack is provider', async () => {
-      await waitFor(() => {
-        screen.getByDisplayValue('mockproc');
-      });
-      const selectElement = screen.getByDisplayValue('mockproc');
-      await act(async () => {
-        fireEvent.change(selectElement, { target: { value: 'proctortrack' } });
-      });
-      const zendeskTicketInput = screen.getByTestId('createZendeskTicketsNo');
-      expect(zendeskTicketInput.checked).toEqual(true);
-    });
-
-    it('Updates Zendesk ticket field if software_secure is provider', async () => {
-      await waitFor(() => {
-        screen.getByDisplayValue('mockproc');
-      });
-      const selectElement = screen.getByDisplayValue('mockproc');
-      await act(async () => {
-        fireEvent.change(selectElement, { target: { value: 'software_secure' } });
-      });
-      const zendeskTicketInput = screen.getByTestId('createZendeskTicketsYes');
-      expect(zendeskTicketInput.checked).toEqual(true);
-    });
-
-    it('Does not update zendesk ticket field for any other provider', async () => {
-      await waitFor(() => {
-        screen.getByDisplayValue('mockproc');
-      });
-      const selectElement = screen.getByDisplayValue('mockproc');
-      await act(async () => {
-        fireEvent.change(selectElement, { target: { value: 'mockproc' } });
-      });
-      const zendeskTicketInput = screen.getByTestId('createZendeskTicketsYes');
-      expect(zendeskTicketInput.checked).toEqual(true);
-    });
-
-    it('Hides all other fields when enabledProctorExam is false when first loaded', async () => {
-      cleanup();
-      // Overrides the handler defined in beforeEach.
-      axiosMock.onGet(
-        StudioApiService.getProctoredExamSettingsUrl(defaultProps.courseId),
-      ).reply(200, {
-        proctored_exam_settings: {
-          enable_proctored_exams: false,
-          allow_proctoring_opt_out: false,
-          proctoring_provider: 'mockproc',
-          proctoring_escalation_email: 'test@example.com',
-          create_zendesk_tickets: true,
-        },
-        available_proctoring_providers: ['software_secure', 'proctortrack', 'mockproc'],
-        course_start_date: '2070-01-01T00:00:00Z',
-      });
-
-      await act(async () => render(intlWrapper(<IntlProctoredExamSettings {...defaultProps} />)));
-      await waitFor(() => {
-        screen.getByLabelText('Enable Proctored Exams');
-      });
-      const enabledProctoredExamCheck = screen.getByLabelText('Enable Proctored Exams');
-      expect(enabledProctoredExamCheck.checked).toEqual(false);
-      expect(screen.queryByText('Allow Opting Out of Proctored Exams')).toBeNull();
-      expect(screen.queryByDisplayValue('mockproc')).toBeNull();
-      expect(screen.queryByTestId('escalationEmail')).toBeNull();
-      expect(screen.queryByTestId('createZendeskTicketsYes')).toBeNull();
-      expect(screen.queryByTestId('createZendeskTicketsNo')).toBeNull();
-    });
-
-    it('Hides all other fields when enableProctoredExams toggled to false', async () => {
-      await waitFor(() => {
-        screen.getByLabelText('Enable Proctored Exams');
-      });
-      expect(screen.queryByText('Allow Opting Out of Proctored Exams')).toBeDefined();
-      expect(screen.queryByDisplayValue('mockproc')).toBeDefined();
-      expect(screen.queryByTestId('escalationEmail')).toBeDefined();
-      expect(screen.queryByTestId('createZendeskTicketsYes')).toBeDefined();
-      expect(screen.queryByTestId('createZendeskTicketsNo')).toBeDefined();
-
-      let enabledProctorExamCheck = screen.getByLabelText('Enable Proctored Exams');
-      expect(enabledProctorExamCheck.checked).toEqual(true);
-      await act(async () => {
-        fireEvent.click(enabledProctorExamCheck, { target: { value: false } });
-      });
-      enabledProctorExamCheck = screen.getByLabelText('Enable Proctored Exams');
-      expect(enabledProctorExamCheck.checked).toEqual(false);
-      expect(screen.queryByText('Allow Opting Out of Proctored Exams')).toBeNull();
-      expect(screen.queryByDisplayValue('mockproc')).toBeNull();
-      expect(screen.queryByTestId('escalationEmail')).toBeNull();
-      expect(screen.queryByTestId('createZendeskTicketsYes')).toBeNull();
-      expect(screen.queryByTestId('createZendeskTicketsNo')).toBeNull();
-    });
-  });
-
-  describe('Validation with invalid escalation email', () => {
-    beforeEach(async () => {
-      initializeMockApp({
-        authenticatedUser: {
-          userId: 3,
-          username: 'abc123',
-          administrator: false,
-          roles: [],
-        },
-      });
-
-      axiosMock = new MockAdapter(getAuthenticatedHttpClient());
-
-      axiosMock.onGet(
-        StudioApiService.getProctoredExamSettingsUrl(defaultProps.courseId),
-      ).reply(200, {
-        proctored_exam_settings: {
-          enable_proctored_exams: true,
-          allow_proctoring_opt_out: false,
-          proctoring_provider: 'proctortrack',
-          proctoring_escalation_email: 'test@example.com',
-          create_zendesk_tickets: true,
-        },
-        available_proctoring_providers: ['software_secure', 'proctortrack', 'mockproc'],
-        course_start_date: '2070-01-01T00:00:00Z',
-      });
-
-      axiosMock.onPost(
-        StudioApiService.getProctoredExamSettingsUrl(defaultProps.courseId),
-      ).reply(200, {});
-
-      await act(async () => render(intlWrapper(<IntlProctoredExamSettings {...defaultProps} />)));
-    });
-
-    it('Creates an alert when no proctoring escalation email is provided with proctortrack selected', async () => {
-      await waitFor(() => {
-        screen.getByDisplayValue('proctortrack');
-      });
-      const selectEscalationEmailElement = screen.getByDisplayValue('test@example.com');
-      await act(async () => {
-        fireEvent.change(selectEscalationEmailElement, { target: { value: '' } });
-      });
-      const selectButton = screen.getByTestId('submissionButton');
-      await act(async () => {
-        fireEvent.click(selectButton);
-      });
-
-      // verify alert content and focus management
-      const escalationEmailError = screen.getByTestId('proctortrackEscalationEmailError');
-      expect(escalationEmailError.textContent).not.toBeNull();
-      expect(document.activeElement).toEqual(escalationEmailError);
-
-      // verify alert link links to offending input
-      const errorLink = screen.getByTestId('proctorTrackEscalationEmailErrorLink');
-      await act(async () => {
-        fireEvent.click(errorLink);
-      });
-      const escalationEmailInput = screen.getByTestId('escalationEmail');
-      expect(document.activeElement).toEqual(escalationEmailInput);
-    });
-
-    it('Creates an alert when invalid proctoring escalation email is provided with proctortrack selected', async () => {
-      await waitFor(() => {
-        screen.getByDisplayValue('proctortrack');
-      });
-      const selectEscalationEmailElement = screen.getByDisplayValue('test@example.com');
-      await act(async () => {
-        fireEvent.change(selectEscalationEmailElement, { target: { value: 'foo.bar' } });
-      });
-      const selectButton = screen.getByTestId('submissionButton');
-      await act(async () => {
-        fireEvent.click(selectButton);
-      });
-
-      // verify alert content and focus management
-      const escalationEmailError = screen.getByTestId('proctortrackEscalationEmailError');
-      expect(document.activeElement).toEqual(escalationEmailError);
-      expect(escalationEmailError.textContent).not.toBeNull();
-      expect(document.activeElement).toEqual(escalationEmailError);
-
-      // verify alert link links to offending input
-      const errorLink = screen.getByTestId('proctorTrackEscalationEmailErrorLink');
-      await act(async () => {
-        fireEvent.click(errorLink);
-      });
-      const escalationEmailInput = screen.getByTestId('escalationEmail');
-      expect(document.activeElement).toEqual(escalationEmailInput);
-    });
-
-    it('Creates an alert when invalid proctoring escalation email is provided with proctoring disabled', async () => {
-      await waitFor(() => {
-        screen.getByDisplayValue('proctortrack');
-      });
-      const selectEscalationEmailElement = screen.getByDisplayValue('test@example.com');
-      await act(async () => {
-        fireEvent.change(selectEscalationEmailElement, { target: { value: 'foo.bar' } });
-      });
-      const enableProctoringElement = screen.getByLabelText('Enable Proctored Exams');
-      await act(async () => fireEvent.click(enableProctoringElement));
-      const selectButton = screen.getByTestId('submissionButton');
-      await act(async () => {
-        fireEvent.click(selectButton);
-      });
-
-      // verify alert content and focus management
-      const escalationEmailError = screen.getByTestId('proctortrackEscalationEmailError');
-      expect(document.activeElement).toEqual(escalationEmailError);
-      expect(escalationEmailError.textContent).not.toBeNull();
-      expect(document.activeElement).toEqual(escalationEmailError);
-    });
-
-    it('Has no error when invalid proctoring escalation email is provided with proctoring disabled', async () => {
-      await waitFor(() => {
-        screen.getByDisplayValue('proctortrack');
-      });
-      const selectEscalationEmailElement = screen.getByDisplayValue('test@example.com');
-      await act(async () => {
-        fireEvent.change(selectEscalationEmailElement, { target: { value: '' } });
-      });
-      const enableProctoringElement = screen.getByLabelText('Enable Proctored Exams');
-      await act(async () => fireEvent.click(enableProctoringElement));
-      const selectButton = screen.getByTestId('submissionButton');
-      await act(async () => {
-        fireEvent.click(selectButton);
-      });
-
-      // verify there is no escalation email alert, and focus has been set on save success alert
-      expect(screen.queryByTestId('proctortrackEscalationEmailError')).toBeNull();
-
-      const errorAlert = screen.getByTestId('saveSuccess');
-      expect(errorAlert.textContent).toEqual(
-        expect.stringContaining('Proctored exam settings saved successfully.'),
-      );
-      expect(document.activeElement).toEqual(errorAlert);
-    });
-
-    it('Has no error when valid proctoring escalation email is provided with proctortrack selected', async () => {
-      await waitFor(() => {
-        screen.getByDisplayValue('proctortrack');
-      });
-      const selectEscalationEmailElement = screen.getByDisplayValue('test@example.com');
-      await act(async () => {
-        fireEvent.change(selectEscalationEmailElement, { target: { value: 'foo@bar.com' } });
-      });
-      const selectButton = screen.getByTestId('submissionButton');
-      await act(async () => {
-        fireEvent.click(selectButton);
-      });
-
-      // verify there is no escalation email alert, and focus has been set on save success alert
-      expect(screen.queryByTestId('proctortrackEscalationEmailError')).toBeNull();
-
-      const errorAlert = screen.getByTestId('saveSuccess');
-      expect(errorAlert.textContent).toEqual(
-        expect.stringContaining('Proctored exam settings saved successfully.'),
-      );
-      expect(document.activeElement).toEqual(errorAlert);
-    });
-
-    it('Escalation email field hidden when proctoring backend is not Proctortrack', async () => {
-      await waitFor(() => {
-        screen.getByDisplayValue('proctortrack');
-      });
-      const proctoringBackendSelect = screen.getByDisplayValue('proctortrack');
-      const selectEscalationEmailElement = screen.getByTestId('escalationEmail');
-      expect(selectEscalationEmailElement.value).toEqual('test@example.com');
-      await act(async () => {
-        fireEvent.change(proctoringBackendSelect, { target: { value: 'software_secure' } });
-      });
-      expect(screen.queryByTestId('escalationEmail')).toBeNull();
-    });
-
-    it('Escalation email Field Show when proctoring backend is switched back to Proctortrack', async () => {
-      await waitFor(() => {
-        screen.getByDisplayValue('proctortrack');
-      });
-      const proctoringBackendSelect = screen.getByDisplayValue('proctortrack');
-      let selectEscalationEmailElement = screen.getByTestId('escalationEmail');
-      await act(async () => {
-        fireEvent.change(proctoringBackendSelect, { target: { value: 'software_secure' } });
-      });
-      expect(screen.queryByTestId('escalationEmail')).toBeNull();
-      await act(async () => {
-        fireEvent.change(proctoringBackendSelect, { target: { value: 'proctortrack' } });
-      });
-      expect(screen.queryByTestId('escalationEmail')).toBeDefined();
-      selectEscalationEmailElement = screen.getByTestId('escalationEmail');
-      expect(selectEscalationEmailElement.value).toEqual('test@example.com');
-    });
-
-    it('Submits form when "Enter" key is hit in the escalation email field', async () => {
-      await waitFor(() => {
-        screen.getByDisplayValue('proctortrack');
-      });
-      const selectEscalationEmailElement = screen.getByDisplayValue('test@example.com');
-      await act(async () => {
-        fireEvent.change(selectEscalationEmailElement, { target: { value: '' } });
-      });
-      await act(async () => {
-        fireEvent.submit(selectEscalationEmailElement);
-      });
-      // if the error appears, the form has been submitted
-      expect(screen.getByTestId('proctortrackEscalationEmailError')).toBeDefined();
-    });
-  });
-
-  describe('Proctoring provider options', () => {
-    const mockGetFutureCourseData = {
-      proctored_exam_settings: {
-        enable_proctored_exams: true,
-        allow_proctoring_opt_out: false,
-        proctoring_provider: 'mockproc',
-        proctoring_escalation_email: 'test@example.com',
-        create_zendesk_tickets: true,
-      },
-      available_proctoring_providers: ['software_secure', 'proctortrack', 'mockproc'],
-      course_start_date: '2099-01-01T00:00:00Z',
-    };
-
-    const mockGetPastCourseData = {
-      proctored_exam_settings: {
-        enable_proctored_exams: true,
-        allow_proctoring_opt_out: false,
-        proctoring_provider: 'mockproc',
-        proctoring_escalation_email: 'test@example.com',
-        create_zendesk_tickets: true,
-      },
-      available_proctoring_providers: ['software_secure', 'proctortrack', 'mockproc'],
-      course_start_date: '2013-01-01T00:00:00Z',
-    };
-
-    function setup(data, isAdmin) {
-      initializeMockApp({
-        authenticatedUser: {
-          userId: 3,
-          username: 'abc123',
-          administrator: isAdmin,
-          roles: [],
-        },
-      });
-
-      axiosMock = new MockAdapter(getAuthenticatedHttpClient());
-      axiosMock.onGet(StudioApiService.getProctoredExamSettingsUrl(defaultProps.courseId)).reply(200, data);
-    }
-
-    it('Disables irrelevant proctoring provider fields when user is not an administrator and it is after start date', async () => {
-      setup(mockGetPastCourseData, false);
-      await act(async () => render(intlWrapper(<IntlProctoredExamSettings {...defaultProps} />)));
-      const providerOption = screen.getByTestId('proctortrack');
-      expect(providerOption.hasAttribute('disabled')).toEqual(true);
-    });
-
-    it('Enables all proctoring provider options if user is not an administrator and it is before start date', async () => {
-      setup(mockGetFutureCourseData, false);
-      await act(async () => render(intlWrapper(<IntlProctoredExamSettings {...defaultProps} />)));
-      const providerOption = screen.getByTestId('proctortrack');
-      expect(providerOption.hasAttribute('disabled')).toEqual(false);
-    });
-
-    it('Enables all proctoring provider options if user administrator and it is after start date', async () => {
-      setup(mockGetPastCourseData, true);
-      await act(async () => render(intlWrapper(<IntlProctoredExamSettings {...defaultProps} />)));
-      const providerOption = screen.getByTestId('proctortrack');
-      expect(providerOption.hasAttribute('disabled')).toEqual(false);
-    });
-
-    it('Enables all proctoring provider options if user administrator and it is before start date', async () => {
-      setup(mockGetFutureCourseData, true);
-      await act(async () => render(intlWrapper(<IntlProctoredExamSettings {...defaultProps} />)));
-      const providerOption = screen.getByTestId('proctortrack');
-      expect(providerOption.hasAttribute('disabled')).toEqual(false);
-    });
-  });
-
-  describe('Toggles field visibility based on user permissions', () => {
-    function setup(isAdmin) {
-      initializeMockApp({
-        authenticatedUser: {
-          userId: 3,
-          username: 'abc123',
-          administrator: isAdmin,
-          roles: [],
-        },
-      });
-
-      axiosMock = new MockAdapter(getAuthenticatedHttpClient());
-      axiosMock.onGet(StudioApiService.getProctoredExamSettingsUrl(defaultProps.courseId)).reply(200, {
-        proctored_exam_settings: {
-          enable_proctored_exams: true,
-          allow_proctoring_opt_out: false,
-          proctoring_provider: 'mockproc',
-          proctoring_escalation_email: 'test@example.com',
-          create_zendesk_tickets: true,
-        },
-        available_proctoring_providers: ['software_secure', 'proctortrack', 'mockproc'],
-        course_start_date: '2070-01-01T00:00:00Z',
-      });
-    }
-
-    it('Hides opting out and zendesk tickets for non edX staff', async () => {
-      setup(false);
-      await act(async () => render(intlWrapper(<IntlProctoredExamSettings {...defaultProps} />)));
-      expect(screen.queryByTestId('allowOptingOutYes')).toBeNull();
-      expect(screen.queryByTestId('createZendeskTicketsYes')).toBeNull();
-    });
-
-    it('Shows opting out and zendesk tickets for edX staff', async () => {
-      setup(true);
-      await act(async () => render(intlWrapper(<IntlProctoredExamSettings {...defaultProps} />)));
-      expect(screen.queryByTestId('allowOptingOutYes')).not.toBeNull();
-      expect(screen.queryByTestId('createZendeskTicketsYes')).not.toBeNull();
-    });
-  });
-
-  describe('Connection states', () => {
-    beforeEach(() => {
-      initializeMockApp({
-        authenticatedUser: {
-          userId: 3,
-          username: 'abc123',
-          administrator: true,
-          roles: [],
-        },
-      });
-      axiosMock = new MockAdapter(getAuthenticatedHttpClient());
-    });
-
-    it('Shows the spinner before the connection is complete', async () => {
-      await act(async () => {
-        render(intlWrapper(<IntlProctoredExamSettings {...defaultProps} />));
-        // This expectation is _inside_ the `act` intentionally, so that it executes immediately.
-        const spinner = screen.getByRole('status');
-        expect(spinner.textContent).toEqual('Loading...');
-      });
-    });
-
-    it('Show connection error message when we suffer server side error', async () => {
-      axiosMock.onGet(
-        StudioApiService.getProctoredExamSettingsUrl(defaultProps.courseId),
-      ).reply(500);
-
-      await act(async () => render(intlWrapper(<IntlProctoredExamSettings {...defaultProps} />)));
-      const connectionError = screen.getByTestId('connectionErrorAlert');
-      expect(connectionError.textContent).toEqual(
-        expect.stringContaining('We encountered a technical error when loading this page.'),
-      );
-    });
-
-    it('Show permission error message when user do not have enough permission', async () => {
-      axiosMock.onGet(
-        StudioApiService.getProctoredExamSettingsUrl(defaultProps.courseId),
-      ).reply(403);
-
-      await act(async () => render(intlWrapper(<IntlProctoredExamSettings {...defaultProps} />)));
-      const permissionError = screen.getByTestId('permissionDeniedAlert');
-      expect(permissionError.textContent).toEqual(
-        expect.stringContaining('You are not authorized to view this page'),
-      );
-    });
-  });
-
-  describe('Save settings', () => {
-    beforeEach(() => {
-      initializeMockApp({
-        authenticatedUser: {
-          userId: 3,
-          username: 'abc123',
-          administrator: true,
-          roles: [],
-        },
-      });
-
-      axiosMock = new MockAdapter(getAuthenticatedHttpClient(), { onNoMatch: 'throwException' });
-      axiosMock.onGet(StudioApiService.getProctoredExamSettingsUrl(defaultProps.courseId)).reply(200, {
-        proctored_exam_settings: {
-          enable_proctored_exams: true,
-          allow_proctoring_opt_out: false,
-          proctoring_provider: 'mockproc',
-          proctoring_escalation_email: 'test@example.com',
-          create_zendesk_tickets: true,
-        },
-        available_proctoring_providers: ['software_secure', 'proctortrack', 'mockproc'],
-      });
-    });
-
-    it('Show spinner while saving', async () => {
-      axiosMock.onPost(
-        StudioApiService.getProctoredExamSettingsUrl(defaultProps.courseId),
-      ).reply(200, 'success');
-
-      await act(async () => render(intlWrapper(<IntlProctoredExamSettings {...defaultProps} />)));
-      const submitButton = screen.getByTestId('submissionButton');
-      expect(screen.queryByTestId('saveInProgress')).toBeFalsy();
-      act(() => {
-        fireEvent.click(submitButton);
-      });
-
-      const submitSpinner = screen.getByTestId('saveInProgress');
-      expect(submitSpinner).toBeDefined();
-
-      await waitForElementToBeRemoved(submitSpinner);
-      expect(axiosMock.history.get.length).toBe(1);
-      expect(axiosMock.history.post.length).toBe(1);
-      expect(screen.queryByTestId('saveInProgress')).toBeFalsy();
-    });
-
-    it('Makes API call successfully with proctoring_escalation_email if proctortrack', async () => {
-      axiosMock.onPost(
-        StudioApiService.getProctoredExamSettingsUrl(defaultProps.courseId),
-      ).reply(200, 'success');
-
-      await act(async () => render(intlWrapper(<IntlProctoredExamSettings {...defaultProps} />)));
-      // Make a change to the provider to proctortrack and set the email
-      const selectElement = screen.getByDisplayValue('mockproc');
-      await act(async () => {
-        fireEvent.change(selectElement, { target: { value: 'proctortrack' } });
-      });
-      const escalationEmail = screen.getByTestId('escalationEmail');
-      expect(escalationEmail.value).toEqual('test@example.com');
-      await act(async () => {
-        fireEvent.change(escalationEmail, { target: { value: 'proctortrack@example.com' } });
-      });
-      expect(escalationEmail.value).toEqual('proctortrack@example.com');
-      const submitButton = screen.getByTestId('submissionButton');
-      await act(async () => {
-        fireEvent.click(submitButton);
-      });
-      expect(axiosMock.history.post.length).toBe(1);
-      expect(JSON.parse(axiosMock.history.post[0].data)).toEqual({
-        proctored_exam_settings: {
-          enable_proctored_exams: true,
-          allow_proctoring_opt_out: false,
-          proctoring_provider: 'proctortrack',
-          proctoring_escalation_email: 'proctortrack@example.com',
-          create_zendesk_tickets: false,
-        },
-      });
-
-      const errorAlert = screen.getByTestId('saveSuccess');
-      expect(errorAlert.textContent).toEqual(
-        expect.stringContaining('Proctored exam settings saved successfully.'),
-      );
-      expect(document.activeElement).toEqual(errorAlert);
-    });
-
-    it('Makes API call successfully without proctoring_escalation_email if not proctortrack', async () => {
-      axiosMock.onPost(
-        StudioApiService.getProctoredExamSettingsUrl(defaultProps.courseId),
-      ).reply(200, 'success');
-
-      await act(async () => render(intlWrapper(<IntlProctoredExamSettings {...defaultProps} />)));
-
-      // make sure we have not selected proctortrack as the proctoring provider
-      expect(screen.getByDisplayValue('mockproc')).toBeDefined();
-
-      const submitButton = screen.getByTestId('submissionButton');
-      await act(async () => {
-        fireEvent.click(submitButton);
-      });
-      expect(axiosMock.history.post.length).toBe(1);
-      expect(JSON.parse(axiosMock.history.post[0].data)).toEqual({
-        proctored_exam_settings: {
-          enable_proctored_exams: true,
-          allow_proctoring_opt_out: false,
-          proctoring_provider: 'mockproc',
-          create_zendesk_tickets: true,
-        },
-      });
-
-      const errorAlert = screen.getByTestId('saveSuccess');
-      expect(errorAlert.textContent).toEqual(
-        expect.stringContaining('Proctored exam settings saved successfully.'),
-      );
-      expect(document.activeElement).toEqual(errorAlert);
-    });
-
-    it('Makes API call generated error', async () => {
-      axiosMock.onPost(
-        StudioApiService.getProctoredExamSettingsUrl(defaultProps.courseId),
-      ).reply(500);
-
-      await act(async () => render(intlWrapper(<IntlProctoredExamSettings {...defaultProps} />)));
-      const submitButton = screen.getByTestId('submissionButton');
-      await act(async () => {
-        fireEvent.click(submitButton);
-      });
-      expect(axiosMock.history.post.length).toBe(1);
-      const errorAlert = screen.getByTestId('saveError');
-      expect(errorAlert.textContent).toEqual(
-        expect.stringContaining('We encountered a technical error while trying to save proctored exam settings'),
-      );
-      expect(document.activeElement).toEqual(errorAlert);
-    });
-
-    it('Manages focus correctly after different save statuses', async () => {
-      // first make a call that will cause a save error
-      axiosMock.onPost(
-        StudioApiService.getProctoredExamSettingsUrl(defaultProps.courseId),
-      ).replyOnce(500);
-
-      await act(async () => render(intlWrapper(<IntlProctoredExamSettings {...defaultProps} />)));
-      const submitButton = screen.getByTestId('submissionButton');
-      await act(async () => {
-        fireEvent.click(submitButton);
-      });
-      expect(axiosMock.history.post.length).toBe(1);
-      const errorAlert = screen.getByTestId('saveError');
-      expect(errorAlert.textContent).toEqual(
-        expect.stringContaining('We encountered a technical error while trying to save proctored exam settings'),
-      );
-      expect(document.activeElement).toEqual(errorAlert);
-
-      // now make a call that will allow for a successful save
-      axiosMock.onPost(
-        StudioApiService.getProctoredExamSettingsUrl(defaultProps.courseId),
-      ).replyOnce(200, 'success');
-      await act(async () => {
-        fireEvent.click(submitButton);
-      });
-
-      expect(axiosMock.history.post.length).toBe(2);
-      const successAlert = screen.getByTestId('saveSuccess');
-      expect(successAlert.textContent).toEqual(
-        expect.stringContaining('Proctored exam settings saved successfully.'),
-      );
-      expect(document.activeElement).toEqual(successAlert);
-    });
-
-    it('Include Zendesk ticket in post request if user is not an admin', async () => {
-      // use non-admin user for test
-      initializeMockApp({
-        authenticatedUser: {
-          userId: 4,
-          username: 'abc1234',
-          administrator: false,
-          roles: [],
-        },
-      });
-      axiosMock = new MockAdapter(getAuthenticatedHttpClient(), { onNoMatch: 'throwException' });
-      axiosMock.onGet(StudioApiService.getProctoredExamSettingsUrl(defaultProps.courseId)).reply(200, {
-        proctored_exam_settings: {
-          enable_proctored_exams: true,
-          allow_proctoring_opt_out: false,
-          proctoring_provider: 'mockproc',
-          proctoring_escalation_email: 'test@example.com',
-          create_zendesk_tickets: true,
-        },
-        available_proctoring_providers: ['software_secure', 'proctortrack', 'mockproc'],
-      });
-      axiosMock.onPost(
-        StudioApiService.getProctoredExamSettingsUrl(defaultProps.courseId),
-      ).reply(200, 'success');
-
-      await act(async () => render(intlWrapper(<IntlProctoredExamSettings {...defaultProps} />)));
-      // Make a change to the proctoring provider
-      const selectElement = screen.getByDisplayValue('mockproc');
-      await act(async () => {
-        fireEvent.change(selectElement, { target: { value: 'proctortrack' } });
-      });
-      const submitButton = screen.getByTestId('submissionButton');
-      await act(async () => {
-        fireEvent.click(submitButton);
-      });
-      expect(axiosMock.history.post.length).toBe(1);
-      expect(JSON.parse(axiosMock.history.post[0].data)).toEqual({
-        proctored_exam_settings: {
-          enable_proctored_exams: true,
-          proctoring_provider: 'proctortrack',
-          proctoring_escalation_email: 'test@example.com',
-          create_zendesk_tickets: false,
-        },
-      });
-    });
-  });
-});
diff --git a/src/proctored-exam-settings/proctoredExamSettings.scss b/src/proctored-exam-settings/proctoredExamSettings.scss
deleted file mode 100644
index 44597e1998..0000000000
--- a/src/proctored-exam-settings/proctoredExamSettings.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-// legend styling should match label styling
-legend {
-    font-size: 1.0rem;
-    font-weight: 700;
-}
-
-// override conflicting browser styles
-select {
-    -webkit-appearance: none;
-    -moz-appearance: none;
-}
diff --git a/src/schedule-and-details/ScheduleAndDetails.scss b/src/schedule-and-details/ScheduleAndDetails.scss
new file mode 100644
index 0000000000..bbaed92e71
--- /dev/null
+++ b/src/schedule-and-details/ScheduleAndDetails.scss
@@ -0,0 +1,36 @@
+@import "./basic-section/BasicSection";
+@import "./credit-section/CreditSection";
+@import "./pacing-section/PacingSection";
+@import "./details-section/DetailsSection";
+@import "./introducing-section/IntroducingSection";
+@import "./schedule-section/ScheduleSection";
+@import "./schedule-section/certificate-display-row/CertificateDisplayRow";
+@import "./learning-outcomes-section/LearningOutcomes";
+@import "./instructors-section/InstructorsSection";
+@import "./requirements-section/RequirementsSection";
+@import "./license-section/LicenseSection";
+
+.schedule-and-details {
+  .help-sidebar {
+    margin-top: 3.438rem;
+  }
+
+  .section-container {
+    &:not(:last-child) {
+      margin-bottom: 1.75rem;
+    }
+
+    .section-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: .75rem;
+      border-bottom: $border-width solid $light-400;
+
+      h2 {
+        color: $black;
+        margin-bottom: .75rem;
+      }
+    }
+  }
+}
diff --git a/src/schedule-and-details/ScheduleAndDetails.test.jsx b/src/schedule-and-details/ScheduleAndDetails.test.jsx
new file mode 100644
index 0000000000..0afee52fee
--- /dev/null
+++ b/src/schedule-and-details/ScheduleAndDetails.test.jsx
@@ -0,0 +1,185 @@
+import React from 'react';
+import { initializeMockApp } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { IntlProvider, injectIntl } from '@edx/frontend-platform/i18n';
+import { AppProvider } from '@edx/frontend-platform/react';
+import {
+  act, render, waitFor, fireEvent,
+} from '@testing-library/react';
+import MockAdapter from 'axios-mock-adapter';
+
+import initializeStore from '../store';
+import { executeThunk } from '../utils';
+import { courseDetailsMock, courseSettingsMock } from './__mocks__';
+import { getCourseDetailsApiUrl, getCourseSettingsApiUrl } from './data/api';
+import { updateCourseDetailsQuery } from './data/thunks';
+import { DATE_FORMAT } from '../constants';
+import creditMessages from './credit-section/messages';
+import pacingMessages from './pacing-section/messages';
+import basicMessages from './basic-section/messages';
+import scheduleMessages from './schedule-section/messages';
+import genericMessages from '../generic/help-sidebar/messages';
+import messages from './messages';
+import ScheduleAndDetails from '.';
+
+let axiosMock;
+let store;
+const courseId = '123';
+
+// Mock the tinymce lib
+jest.mock('@tinymce/tinymce-react', () => {
+  const originalModule = jest.requireActual('@tinymce/tinymce-react');
+  return {
+    __esModule: true,
+    ...originalModule,
+    Editor: () => 'foo bar',
+  };
+});
+
+jest.mock('../editors/sharedComponents/TinyMceWidget', () => ({
+  __esModule: true, // Required to mock a default export
+  default: () => <div>Widget</div>,
+  prepareEditorRef: jest.fn(() => ({
+    refReady: true,
+    setEditorRef: jest.fn().mockName('prepareEditorRef.setEditorRef'),
+  })),
+}));
+
+// Mock the TextareaAutosize component
+jest.mock('react-textarea-autosize', () => jest.fn((props) => (
+  <textarea {...props} onFocus={() => {}} onBlur={() => {}} />
+)));
+
+const RootWrapper = () => (
+  <AppProvider store={store}>
+    <IntlProvider locale="en" messages={{}}>
+      <ScheduleAndDetails intl={injectIntl} courseId={courseId} />
+    </IntlProvider>
+  </AppProvider>
+);
+
+describe('<ScheduleAndDetails />', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+
+    store = initializeStore();
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+    axiosMock
+      .onGet(getCourseDetailsApiUrl(courseId))
+      .reply(200, courseDetailsMock);
+    axiosMock
+      .onGet(getCourseSettingsApiUrl(courseId))
+      .reply(200, courseSettingsMock);
+    axiosMock
+      .onPut(getCourseDetailsApiUrl(courseId))
+      .reply(200);
+  });
+  afterEach(() => {
+    axiosMock.reset();
+  });
+
+  it('should render without errors', async () => {
+    const { getByText, getByRole, getAllByText } = render(<RootWrapper />);
+    await waitFor(() => {
+      const scheduleAndDetailElements = getAllByText(messages.headingTitle.defaultMessage);
+      const scheduleAndDetailTitle = scheduleAndDetailElements[0];
+      expect(
+        getByText(pacingMessages.pacingTitle.defaultMessage),
+      ).toBeInTheDocument();
+      expect(scheduleAndDetailTitle).toBeInTheDocument();
+      expect(
+        getByText(basicMessages.basicTitle.defaultMessage),
+      ).toBeInTheDocument();
+      expect(
+        getByText(creditMessages.creditTitle.defaultMessage),
+      ).toBeInTheDocument();
+      expect(
+        getByText(scheduleMessages.scheduleTitle.defaultMessage),
+      ).toBeInTheDocument();
+      expect(
+        getByRole('navigation', {
+          name: genericMessages.sidebarTitleOther.defaultMessage,
+        }),
+      ).toBeInTheDocument();
+    });
+  });
+
+  it('should hide credit section with condition', async () => {
+    const updatedResponse = {
+      ...courseSettingsMock,
+      creditEligibilityEnabled: false,
+      isCreditCourse: false,
+    };
+    axiosMock
+      .onGet(getCourseSettingsApiUrl(courseId))
+      .reply(200, updatedResponse);
+
+    const { queryAllByText } = render(<RootWrapper />);
+    await waitFor(() => {
+      expect(
+        queryAllByText(creditMessages.creditTitle.defaultMessage).length,
+      ).toBe(0);
+    });
+  });
+
+  it('should show save alert onChange ', async () => {
+    const { getAllByPlaceholderText, getByText } = render(
+      <RootWrapper />,
+    );
+    let inputs;
+    await waitFor(() => {
+      inputs = getAllByPlaceholderText(DATE_FORMAT.toLocaleUpperCase());
+    });
+    fireEvent.change(inputs[0], { target: { value: '06/16/2023' } });
+
+    expect(
+      getByText(messages.alertWarning.defaultMessage),
+    ).toBeInTheDocument();
+  });
+
+  it('should display a success message when course details saves', async () => {
+    const { getByText } = render(<RootWrapper />);
+    await waitFor(() => {
+      executeThunk(updateCourseDetailsQuery(courseId, 'DaTa'), store.dispatch);
+    });
+    expect(getByText(messages.alertSuccess.defaultMessage)).toBeInTheDocument();
+  });
+
+  it('should display an error when GET CourseDetails fails', async () => {
+    axiosMock
+      .onGet(getCourseDetailsApiUrl(courseId))
+      .reply(404, 'error');
+    const { getByText } = render(<RootWrapper />);
+    await waitFor(() => {
+      expect(getByText(messages.alertLoadFail.defaultMessage)).toBeInTheDocument();
+    });
+  });
+
+  it('should display an error when GET CourseSettings fails', async () => {
+    axiosMock
+      .onGet(getCourseSettingsApiUrl(courseId))
+      .reply(404, 'error');
+    const { getByText } = render(<RootWrapper />);
+    await waitFor(() => {
+      expect(getByText(messages.alertLoadFail.defaultMessage)).toBeInTheDocument();
+    });
+  });
+
+  it('should display an error when PUT CourseDetails fails', async () => {
+    axiosMock
+      .onPut(getCourseDetailsApiUrl(courseId))
+      .reply(404, 'error');
+    const { getByText } = render(<RootWrapper />);
+    await act(async () => {
+      await executeThunk(updateCourseDetailsQuery(courseId, 'DaTa'), store.dispatch);
+    });
+    expect(getByText(messages.alertFail.defaultMessage)).toBeInTheDocument();
+  });
+});
diff --git a/src/schedule-and-details/__mocks__/courseDetails.js b/src/schedule-and-details/__mocks__/courseDetails.js
new file mode 100644
index 0000000000..9ebeb718b7
--- /dev/null
+++ b/src/schedule-and-details/__mocks__/courseDetails.js
@@ -0,0 +1,48 @@
+module.exports = {
+  aboutSidebarHtml: '',
+  bannerImageName: 'images_course_image.jpg',
+  bannerImageAssetPath:
+    '/asset-v1:edX+M12+2T2023+type@asset+block@images_courseasdd_image.jpg',
+  certificateAvailableDate: null,
+  certificatesDisplayBehavior: 'end',
+  courseId: 'M12',
+  courseImageAssetPath: '/static/studio/images/pencils.jpg',
+  courseImageName: '',
+  description: 'description',
+  duration: '10h',
+  effort: '10h',
+  endDate: null,
+  enrollmentEnd: null,
+  enrollmentStart: null,
+  entranceExamEnabled: 'true',
+  entranceExamId: '',
+  entranceExamMinimumScorePct: '50',
+  instructorInfo: {
+    instructors: [
+      {
+        name: 'foo bar',
+        title: 'title',
+        organization: 'org',
+        image: 'image',
+        bio: 'biography',
+      },
+    ],
+  },
+  introVideo: null,
+  language: 'creative-commons: ver=4.0 BY NC ND',
+  learningInfo: ['foo'],
+  license: 'creative-commons: ver=4.0 BY NC ND',
+  org: 'edX',
+  overview: "<section class='about'></section>",
+  preRequisiteCourses: [],
+  run: '2T2023',
+  selfPaced: false,
+  shortDescription: '',
+  startDate: '2023-06-14T00:00:00Z',
+  subtitle: 'subtitle',
+  syllabus: null,
+  title: 'title',
+  videoThumbnailImageAssetPath:
+    '/asset-v1:edX+M12+2T2023+type@asset+block@images_course_image.jpg',
+  videoThumbnailImageName: 'images_course_image.jpg',
+};
diff --git a/src/schedule-and-details/__mocks__/courseSettings.js b/src/schedule-and-details/__mocks__/courseSettings.js
new file mode 100644
index 0000000000..fb7ead9680
--- /dev/null
+++ b/src/schedule-and-details/__mocks__/courseSettings.js
@@ -0,0 +1,61 @@
+module.exports = {
+  aboutPageEditable: true,
+  canShowCertificateAvailableDateField: false,
+  courseDisplayName: 'Differential Equations',
+  courseDisplayNameWithDefault: 'Differential Equations',
+  creditEligibilityEnabled: true,
+  creditRequirements: {
+    grade: [
+      {
+        name: 'grade',
+        displayName: 'Minimum Grade',
+        criteria: {
+          minGrade: 0.8,
+        },
+      },
+    ],
+  },
+  enableExtendedCourseDetails: true,
+  enrollmentEndEditable: true,
+  isCreditCourse: true,
+  isEntranceExamsEnabled: true,
+  isPrerequisiteCoursesEnabled: true,
+  languageOptions: [
+    ['en', 'English'],
+    ['uk', 'Ukrainian'],
+  ],
+  lmsLinkForAboutPage:
+    'http://localhost:18000/courses/course-v1:edX+M12+2T2023/about',
+  marketingEnabled: true,
+  mfeProctoredExamSettingsUrl: '',
+  possiblePreRequisiteCourses: [
+    {
+      courseKey: 'course-v1:edX+P315+2T2023',
+      displayName: 'Quantum Entanglement',
+      lmsLink:
+        '//localhost:18000/courses/course-v1:edX+P315+2T2023/jump_to/block-v1:edX+P315+2T2023+type@course+block@course',
+      number: 'P315',
+      org: 'edX',
+      rerunLink: '/course_rerun/course-v1:edX+P315+2T2023',
+      run: '2T2023',
+      url: '/course/course-v1:edX+P315+2T2023',
+    },
+    {
+      courseKey: 'course-v1:edX+DemoX+Demo_Course',
+      displayName: 'Demonstration Course',
+      lmsLink:
+        '//localhost:18000/courses/course-v1:edX+DemoX+Demo_Course/jump_to/block-v1:edX+DemoX+Demo_Course+type@course+block@course',
+      number: 'DemoX',
+      org: 'edX',
+      rerunLink: '/course_rerun/course-v1:edX+DemoX+Demo_Course',
+      run: 'Demo_Course',
+      url: '/course/course-v1:edX+DemoX+Demo_Course',
+    },
+  ],
+  shortDescriptionEditable: true,
+  showMinGradeWarning: false,
+  sidebarHtmlEnabled: true,
+  upgradeDeadline: '2023-07-02T23:59:59+00:00',
+  useV2CertDisplaySettings: false,
+  platformName: 'edX',
+};
diff --git a/src/schedule-and-details/__mocks__/index.js b/src/schedule-and-details/__mocks__/index.js
new file mode 100644
index 0000000000..15c82d9e4f
--- /dev/null
+++ b/src/schedule-and-details/__mocks__/index.js
@@ -0,0 +1,2 @@
+export { default as courseDetailsMock } from './courseDetails';
+export { default as courseSettingsMock } from './courseSettings';
diff --git a/src/schedule-and-details/basic-section/BasicSection.scss b/src/schedule-and-details/basic-section/BasicSection.scss
new file mode 100644
index 0000000000..2d4fc39ea2
--- /dev/null
+++ b/src/schedule-and-details/basic-section/BasicSection.scss
@@ -0,0 +1,31 @@
+.basic-section {
+  .basic-info-list {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 1.75rem;
+    padding-inline-start: 0;
+    list-style-type: none;
+  }
+
+  .pgn__pageBanner-component {
+    @include pgn-box-shadow(1, "down");
+
+    background-color: $white;
+    border-radius: .375rem;
+  }
+
+  .pgn__pageBanner-content {
+    align-items: flex-start;
+    padding: 1.5rem;
+    flex-direction: column;
+  }
+
+  .pgn__pageBanner-dismissButtonContainer {
+    margin: 1.5rem 1.5rem 0 0;
+    align-self: baseline;
+  }
+
+  .pgn__card-header-content {
+    margin-top: .75rem;
+  }
+}
diff --git a/src/schedule-and-details/basic-section/BasicSection.test.jsx b/src/schedule-and-details/basic-section/BasicSection.test.jsx
new file mode 100644
index 0000000000..56befaf719
--- /dev/null
+++ b/src/schedule-and-details/basic-section/BasicSection.test.jsx
@@ -0,0 +1,80 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import { INVITE_STUDENTS_LINK_ID } from './constants';
+import messages from './messages';
+import BasicSection from '.';
+
+describe('<BasicSection />', () => {
+  const RootWrapper = (props) => (
+    <IntlProvider locale="en">
+      <BasicSection {...props} />
+    </IntlProvider>
+  );
+
+  const props = {
+    intl: {},
+    org: 'foo org',
+    courseNumber: 'bar number',
+    run: 'foo run',
+    lmsLinkForAboutPage: 'link://to',
+    marketingEnabled: true,
+    courseDisplayName: 'foo course',
+    platformName: 'Your platform name here',
+  };
+
+  it('renders basic section successfully', () => {
+    const { getByText } = render(<RootWrapper {...props} />);
+    expect(getByText(messages.basicTitle.defaultMessage)).toBeInTheDocument();
+    expect(
+      getByText(messages.basicDescription.defaultMessage),
+    ).toBeInTheDocument();
+    expect(
+      getByText(messages.courseOrganization.defaultMessage),
+    ).toBeInTheDocument();
+    expect(getByText(props.org)).toBeInTheDocument();
+    expect(getByText(messages.courseNumber.defaultMessage)).toBeInTheDocument();
+    expect(getByText(props.courseNumber)).toBeInTheDocument();
+    expect(getByText(messages.courseRun.defaultMessage)).toBeInTheDocument();
+    expect(getByText(props.run)).toBeInTheDocument();
+  });
+
+  it('shows the page banner if the marketingEnabled is true', () => {
+    const { getByText, queryAllByText } = render(<RootWrapper {...props} />);
+    expect(
+      getByText(messages.basicBannerTitle.defaultMessage),
+    ).toBeInTheDocument();
+    expect(
+      getByText(messages.basicBannerText.defaultMessage),
+    ).toBeInTheDocument();
+    expect(queryAllByText('Course summary page').length).toBe(0);
+  });
+
+  it('shows the course promotion if the marketingEnabled is false', () => {
+    const initialProps = { ...props, marketingEnabled: false };
+    const { getByText, getByRole, queryAllByText } = render(
+      <RootWrapper {...initialProps} />,
+    );
+    const inviteButton = getByRole('button', {
+      name: messages.basicPromotionButton.defaultMessage,
+    });
+
+    expect(getByText(/Course Summary Page/i)).toBeInTheDocument();
+    expect(
+      getByText(/(for student enrollment and access)/i),
+    ).toBeInTheDocument();
+    expect(getByText(props.lmsLinkForAboutPage)).toBeInTheDocument();
+    expect(inviteButton).toBeInTheDocument();
+    expect(queryAllByText(messages.basicBannerTitle.defaultMessage).length).toBe(0);
+  });
+
+  it('checks link link to invite', () => {
+    const initialProps = { ...props, marketingEnabled: false };
+    const { getByTestId } = render(<RootWrapper {...initialProps} />);
+    const inviteLink = getByTestId(INVITE_STUDENTS_LINK_ID);
+    expect(decodeURIComponent(inviteLink.href)).toEqual(
+      `mailto:${process.env.INVITE_STUDENTS_EMAIL_TO}?body=The course ${props.courseDisplayName}, provided by ${props.platformName}, is open for enrollment. Please navigate to this course at ${props.lmsLinkForAboutPage} to enroll.&subject=Enroll in ${props.courseDisplayName}.`,
+    );
+  });
+});
diff --git a/src/schedule-and-details/basic-section/constants.js b/src/schedule-and-details/basic-section/constants.js
new file mode 100644
index 0000000000..232b9f4eb9
--- /dev/null
+++ b/src/schedule-and-details/basic-section/constants.js
@@ -0,0 +1 @@
+export const INVITE_STUDENTS_LINK_ID = 'invite-students-link';
diff --git a/src/schedule-and-details/basic-section/index.jsx b/src/schedule-and-details/basic-section/index.jsx
new file mode 100644
index 0000000000..d142835ff5
--- /dev/null
+++ b/src/schedule-and-details/basic-section/index.jsx
@@ -0,0 +1,151 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { useIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
+import {
+  PageBanner, Button, Card, MailtoLink, Hyperlink,
+} from '@openedx/paragon';
+import { Email as EmailIcon } from '@openedx/paragon/icons';
+
+import SectionSubHeader from '../../generic/section-sub-header';
+import { INVITE_STUDENTS_LINK_ID } from './constants';
+import messages from './messages';
+
+const BasicSection = ({
+  org,
+  courseNumber,
+  run,
+  lmsLinkForAboutPage,
+  marketingEnabled,
+  courseDisplayName,
+  platformName,
+}) => {
+  const intl = useIntl();
+  const [showPageBanner, setShowPageBanner] = useState(true);
+  const emailSubject = intl.formatMessage(
+    {
+      id: 'course-authoring.schedule.basic.email.subject',
+      defaultMessage: 'Enroll in {courseDisplayName}.',
+    },
+    { courseDisplayName },
+  );
+
+  const emailBody = intl.formatMessage(
+    {
+      id: 'course-authoring.schedule.basic.email.body',
+      defaultMessage:
+        'The course {courseDisplayName}, provided by {platformName}, is open for enrollment. Please navigate to this course at {lmsLinkForAboutPage} to enroll.',
+    },
+    {
+      courseDisplayName,
+      platformName,
+      lmsLinkForAboutPage,
+    },
+  );
+
+  const promotionTitle = (
+    <FormattedMessage
+      id="course-authoring.schedule.basic.promotion.title"
+      defaultMessage="Course summary page {smallText}"
+      values={{
+        smallText: <small>(for student enrollment and access)</small>,
+      }}
+    />
+  );
+
+  const courseBasicInfo = [
+    {
+      label: `${intl.formatMessage(messages.courseOrganization)}`,
+      prefix: 'basic-organization',
+      value: org,
+    },
+    {
+      label: `${intl.formatMessage(messages.courseNumber)}`,
+      prefix: 'basic-course-number',
+      value: courseNumber,
+    },
+    {
+      label: `${intl.formatMessage(messages.courseRun)}`,
+      prefix: 'basic-course-run',
+      value: run,
+    },
+  ];
+
+  const renderBasicInfo = (info) => (
+    <li key={info.prefix}>
+      <h4 className="mb-0 text-black">{info.label}</h4>
+      <span className="small text-black">{info.value}</span>
+    </li>
+  );
+
+  const renderPageBanner = () => (
+    <PageBanner
+      show={showPageBanner}
+      dismissible
+      onDismiss={() => setShowPageBanner(false)}
+      className="align-items-start"
+    >
+      <h4 className="text-black">{intl.formatMessage(messages.basicBannerTitle)}</h4>
+      <span className="text text-gray-700 text-left">
+        {intl.formatMessage(messages.basicBannerText)}
+      </span>
+    </PageBanner>
+  );
+
+  const renderCoursePromotion = () => (
+    <Card>
+      <Card.Header
+        className="h4 px-3 text-gray-500"
+        title={promotionTitle}
+        size="sm"
+      />
+      <Card.Section className="px-3 py-1">
+        <Hyperlink
+          destination={lmsLinkForAboutPage}
+          className="lead info-500 small text-decoration-none"
+          target="_blank"
+          showLaunchIcon={false}
+        >
+          {lmsLinkForAboutPage}
+        </Hyperlink>
+      </Card.Section>
+      <Card.Divider />
+      <Card.Footer className="p-3 justify-content-start">
+        <MailtoLink
+          to={process.env.INVITE_STUDENTS_EMAIL_TO}
+          subject={emailSubject}
+          body={emailBody}
+          data-testid={INVITE_STUDENTS_LINK_ID}
+        >
+          <Button variant="outline-primary" iconBefore={EmailIcon} size="sm">
+            {intl.formatMessage(messages.basicPromotionButton)}
+          </Button>
+        </MailtoLink>
+      </Card.Footer>
+    </Card>
+  );
+
+  return (
+    <section className="section-container basic-section">
+      <SectionSubHeader
+        title={intl.formatMessage(messages.basicTitle)}
+        description={intl.formatMessage(messages.basicDescription)}
+      />
+      <ul className="basic-info-list">
+        {courseBasicInfo.map(renderBasicInfo)}
+      </ul>
+      {marketingEnabled ? renderPageBanner() : renderCoursePromotion()}
+    </section>
+  );
+};
+
+BasicSection.propTypes = {
+  org: PropTypes.string.isRequired,
+  courseNumber: PropTypes.string.isRequired,
+  run: PropTypes.string.isRequired,
+  lmsLinkForAboutPage: PropTypes.string.isRequired,
+  marketingEnabled: PropTypes.bool.isRequired,
+  courseDisplayName: PropTypes.string.isRequired,
+  platformName: PropTypes.string.isRequired,
+};
+
+export default BasicSection;
diff --git a/src/schedule-and-details/basic-section/messages.js b/src/schedule-and-details/basic-section/messages.js
new file mode 100644
index 0000000000..6b358b5e4e
--- /dev/null
+++ b/src/schedule-and-details/basic-section/messages.js
@@ -0,0 +1,42 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  basicTitle: {
+    id: 'course-authoring.schedule.basic.title',
+    defaultMessage: 'Basic information',
+  },
+  basicDescription: {
+    id: 'course-authoring.schedule.basic.description',
+    defaultMessage: 'The nuts and bolts of this course',
+  },
+  basicEmailIcon: {
+    id: 'course-authoring.schedule.basic.email-icon',
+    defaultMessage: 'Invite your students email icon',
+  },
+  courseOrganization: {
+    id: 'course-authoring.schedule.basic.organization',
+    defaultMessage: 'Organization',
+  },
+  courseNumber: {
+    id: 'course-authoring.schedule.basic.course-number',
+    defaultMessage: 'Course number',
+  },
+  courseRun: {
+    id: 'course-authoring.schedule.basic.course-run',
+    defaultMessage: 'Course run',
+  },
+  basicBannerTitle: {
+    id: 'course-authoring.schedule.basic.banner.title',
+    defaultMessage: 'Promoting your course with edX',
+  },
+  basicBannerText: {
+    id: 'course-authoring.schedule.basic.banner.text',
+    defaultMessage: 'Your course summary page will not be viewable until your course has been announced. To provide content for the page and preview it, follow the instructions provided by your Program Manager. Please note that changes here may take up to a business day to appear on your course summary page.',
+  },
+  basicPromotionButton: {
+    id: 'course-authoring.schedule.basic.promotion.button',
+    defaultMessage: 'Invite your students',
+  },
+});
+
+export default messages;
diff --git a/src/schedule-and-details/constants.js b/src/schedule-and-details/constants.js
new file mode 100644
index 0000000000..55ad66211d
--- /dev/null
+++ b/src/schedule-and-details/constants.js
@@ -0,0 +1 @@
+export const defaultEntranceExamMinimumScorePct = '50';
diff --git a/src/schedule-and-details/credit-section/CreditSection.scss b/src/schedule-and-details/credit-section/CreditSection.scss
new file mode 100644
index 0000000000..2cfbf1c963
--- /dev/null
+++ b/src/schedule-and-details/credit-section/CreditSection.scss
@@ -0,0 +1,15 @@
+.credit-section {
+  .credit-help-text {
+    padding-top: $spacer;
+    margin-bottom: .5rem;
+    font: normal .875rem/1.5rem $font-family-base;
+  }
+
+  .credit-info-list {
+    display: flex;
+    justify-content: space-between;
+    margin: 1.25rem 0 1.75rem;
+    padding-inline-start: 0;
+    list-style-type: none;
+  }
+}
diff --git a/src/schedule-and-details/credit-section/CreditSection.test.jsx b/src/schedule-and-details/credit-section/CreditSection.test.jsx
new file mode 100644
index 0000000000..5c82e98ae7
--- /dev/null
+++ b/src/schedule-and-details/credit-section/CreditSection.test.jsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import messages from './messages';
+import CreditSection from '.';
+
+describe('<CreditSection />', () => {
+  const RootWrapper = (props) => (
+    <IntlProvider locale="en">
+      <CreditSection {...props} />
+    </IntlProvider>
+  );
+
+  const props = {
+    creditRequirements: {
+      grade: [
+        {
+          name: 'grade',
+          displayName: 'Minimum Grade',
+          criteria: {
+            minGrade: 0.8,
+          },
+        },
+      ],
+    },
+  };
+
+  it('renders credit section successfully', () => {
+    const { getByText } = render(<RootWrapper {...props} />);
+    expect(getByText(messages.creditTitle.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.creditDescription.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.creditHelp.defaultMessage)).toBeInTheDocument();
+  });
+
+  it('renders empty requirements', () => {
+    const initialProps = { ...props, creditRequirements: {} };
+    const { getByText } = render(<RootWrapper {...initialProps} />);
+    expect(getByText(messages.creditNotFound.defaultMessage)).toBeInTheDocument();
+  });
+
+  it('renders requirements successfully', () => {
+    const { getByText, queryAllByText } = render(<RootWrapper {...props} />);
+    expect(getByText(messages.creditMinimumGrade.defaultMessage)).toBeInTheDocument();
+    expect(getByText('80%')).toBeInTheDocument();
+    expect(queryAllByText(messages.creditProctoredExam.defaultMessage).length).toBe(0);
+    expect(queryAllByText(messages.creditVerification.defaultMessage).length).toBe(0);
+  });
+});
diff --git a/src/schedule-and-details/credit-section/index.jsx b/src/schedule-and-details/credit-section/index.jsx
new file mode 100644
index 0000000000..02522ce8ad
--- /dev/null
+++ b/src/schedule-and-details/credit-section/index.jsx
@@ -0,0 +1,84 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import SectionSubHeader from '../../generic/section-sub-header';
+import messages from './messages';
+
+const CreditSection = ({ creditRequirements }) => {
+  const intl = useIntl();
+
+  const CREDIT_REQUIREMENTS_TYPES = {
+    grade: intl.formatMessage(messages.creditMinimumGrade),
+    proctoredExam: intl.formatMessage(messages.creditProctoredExam),
+    reverification: intl.formatMessage(messages.creditVerification),
+  };
+
+  const renderRequirementValue = (requirementValue, key) => {
+    const displayValue = key === 'grade'
+      ? `${(parseFloat(requirementValue.criteria.minGrade) || 0) * 100}%`
+      : requirementValue.displayName;
+    return (
+      <span className="small text-black" key={requirementValue.name}>
+        {displayValue}
+      </span>
+    );
+  };
+
+  const renderCreditRequirements = (requirements) => {
+    const creditRequirementsKeys = Object.keys(requirements);
+
+    if (creditRequirementsKeys.length) {
+      return (
+        <ul className="credit-info-list">
+          {creditRequirementsKeys.map((key) => (
+            <li key={key}>
+              <h4 className="mb-0 text-black">
+                {CREDIT_REQUIREMENTS_TYPES[key]}
+              </h4>
+              <div className="d-flex flex-column">
+                {creditRequirements[key].map((value) => renderRequirementValue(value, key))}
+              </div>
+            </li>
+          ))}
+        </ul>
+      );
+    }
+    return <p>{intl.formatMessage(messages.creditNotFound)}</p>;
+  };
+
+  return (
+    <section className="section-container credit-section">
+      <SectionSubHeader
+        title={intl.formatMessage(messages.creditTitle)}
+        description={intl.formatMessage(messages.creditDescription)}
+      />
+      <p className="credit-help-text">{intl.formatMessage(messages.creditHelp)}</p>
+      {renderCreditRequirements(creditRequirements)}
+    </section>
+  );
+};
+
+const creditRequirementsNamespace = PropTypes.shape({
+  name: PropTypes.string,
+  display_name: PropTypes.string,
+  criteria: PropTypes.shape({
+    min_grade: PropTypes.number,
+  }),
+});
+
+const creditRequirementsPropTypes = PropTypes.shape({
+  proctoredExam: PropTypes.arrayOf(creditRequirementsNamespace),
+  grade: PropTypes.arrayOf(creditRequirementsNamespace),
+  reverification: PropTypes.arrayOf(creditRequirementsNamespace),
+});
+
+CreditSection.defaultProps = {
+  creditRequirements: undefined,
+};
+
+CreditSection.propTypes = {
+  creditRequirements: creditRequirementsPropTypes,
+};
+
+export default CreditSection;
diff --git a/src/schedule-and-details/credit-section/messages.js b/src/schedule-and-details/credit-section/messages.js
new file mode 100644
index 0000000000..ea60f2bdc7
--- /dev/null
+++ b/src/schedule-and-details/credit-section/messages.js
@@ -0,0 +1,35 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  creditTitle: {
+    id: 'course-authoring.schedule.credit.title',
+    defaultMessage: 'Course credit requirements',
+  },
+  creditDescription: {
+    id: 'course-authoring.schedule.credit.description',
+    defaultMessage: 'Steps required to earn course credit',
+  },
+  creditHelp: {
+    id: 'course-authoring.schedule.credit.help',
+    defaultMessage:
+      'A requirement appears in this list when you publish the unit that contains the requirement.',
+  },
+  creditMinimumGrade: {
+    id: 'course-authoring.schedule.credit.minimum-grade',
+    defaultMessage: 'Minimum grade',
+  },
+  creditProctoredExam: {
+    id: 'course-authoring.schedule.credit.proctored-exam',
+    defaultMessage: 'Successful proctored exam',
+  },
+  creditVerification: {
+    id: 'course-authoring.schedule.credit.verification',
+    defaultMessage: 'ID Verification',
+  },
+  creditNotFound: {
+    id: 'course-authoring.schedule.credit.not-found',
+    defaultMessage: 'No credit requirements found.',
+  },
+});
+
+export default messages;
diff --git a/src/schedule-and-details/data/api.js b/src/schedule-and-details/data/api.js
new file mode 100644
index 0000000000..23f83db79b
--- /dev/null
+++ b/src/schedule-and-details/data/api.js
@@ -0,0 +1,46 @@
+import { camelCaseObject, getConfig } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { convertObjectToSnakeCase } from '../../utils';
+
+const getApiBaseUrl = () => getConfig().STUDIO_BASE_URL;
+export const getCourseDetailsApiUrl = (courseId) => `${getApiBaseUrl()}/api/contentstore/v1/course_details/${courseId}`;
+export const getCourseSettingsApiUrl = (courseId) => `${getApiBaseUrl()}/api/contentstore/v1/course_settings/${courseId}`;
+export const getUploadAssetsUrl = (courseId) => `${getApiBaseUrl()}/assets/${courseId}/`;
+
+/**
+ * Get course details.
+ * @param {string} courseId
+ * @returns {Promise<Object>}
+ */
+export async function getCourseDetails(courseId) {
+  const { data } = await getAuthenticatedHttpClient().get(
+    `${getCourseDetailsApiUrl(courseId)}`,
+  );
+  return camelCaseObject(data);
+}
+
+/**
+ * Update course details.
+ * @param {string} courseId
+ * @param {object} details
+ * @returns {Promise<Object>}
+ */
+export async function updateCourseDetails(courseId, details) {
+  const { data } = await getAuthenticatedHttpClient().put(
+    `${getCourseDetailsApiUrl(courseId)}`,
+    convertObjectToSnakeCase(details, true),
+  );
+  return camelCaseObject(data);
+}
+
+/**
+ * Get course settings.
+ * @param {string} courseId
+ * @returns {Promise<Object>}
+ */
+export async function getCourseSettings(courseId) {
+  const { data } = await getAuthenticatedHttpClient().get(
+    `${getCourseSettingsApiUrl(courseId)}`,
+  );
+  return camelCaseObject(data);
+}
diff --git a/src/schedule-and-details/data/selectors.js b/src/schedule-and-details/data/selectors.js
new file mode 100644
index 0000000000..cff5c69ba3
--- /dev/null
+++ b/src/schedule-and-details/data/selectors.js
@@ -0,0 +1,5 @@
+export const getLoadingDetailsStatus = (state) => state.scheduleAndDetails.loadingDetailsStatus;
+export const getLoadingSettingsStatus = (state) => state.scheduleAndDetails.loadingSettingsStatus;
+export const getSavingStatus = (state) => state.scheduleAndDetails.savingStatus;
+export const getCourseDetails = state => state.scheduleAndDetails.courseDetails;
+export const getCourseSettings = (state) => state.scheduleAndDetails.courseSettings;
diff --git a/src/schedule-and-details/data/slice.js b/src/schedule-and-details/data/slice.js
new file mode 100644
index 0000000000..ba65e02a18
--- /dev/null
+++ b/src/schedule-and-details/data/slice.js
@@ -0,0 +1,48 @@
+/* eslint-disable no-param-reassign */
+import { createSlice } from '@reduxjs/toolkit';
+
+import { RequestStatus } from '../../data/constants';
+
+const slice = createSlice({
+  name: 'scheduleAndDetails',
+  initialState: {
+    loadingDetailsStatus: RequestStatus.IN_PROGRESS,
+    loadingSettingsStatus: RequestStatus.IN_PROGRESS,
+    savingStatus: '',
+    courseDetails: {},
+    courseSettings: {},
+  },
+  reducers: {
+    updateLoadingDetailsStatus: (state, { payload }) => {
+      state.loadingDetailsStatus = payload.status;
+    },
+    updateLoadingSettingsStatus: (state, { payload }) => {
+      state.loadingSettingsStatus = payload.status;
+    },
+    updateSavingStatus: (state, { payload }) => {
+      state.savingStatus = payload.status;
+    },
+    updateCourseDetailsSuccess: (state, { payload }) => {
+      Object.assign(state.courseDetails, payload);
+    },
+    fetchCourseDetailsSuccess: (state, { payload }) => {
+      Object.assign(state.courseDetails, payload);
+    },
+    fetchCourseSettingsSuccess: (state, { payload }) => {
+      Object.assign(state.courseSettings, payload);
+    },
+  },
+});
+
+export const {
+  updateSavingStatus,
+  updateLoadingDetailsStatus,
+  updateLoadingSettingsStatus,
+  updateCourseDetailsSuccess,
+  fetchCourseDetailsSuccess,
+  fetchCourseSettingsSuccess,
+} = slice.actions;
+
+export const {
+  reducer,
+} = slice;
diff --git a/src/schedule-and-details/data/thunks.js b/src/schedule-and-details/data/thunks.js
new file mode 100644
index 0000000000..9de9e20d6e
--- /dev/null
+++ b/src/schedule-and-details/data/thunks.js
@@ -0,0 +1,68 @@
+import { RequestStatus } from '../../data/constants';
+import {
+  getCourseDetails,
+  updateCourseDetails,
+  getCourseSettings,
+} from './api';
+import {
+  updateSavingStatus,
+  updateLoadingDetailsStatus,
+  updateLoadingSettingsStatus,
+  fetchCourseDetailsSuccess,
+  updateCourseDetailsSuccess,
+  fetchCourseSettingsSuccess,
+} from './slice';
+
+export function fetchCourseDetailsQuery(courseId) {
+  return async (dispatch) => {
+    dispatch(updateLoadingDetailsStatus({ status: RequestStatus.IN_PROGRESS }));
+
+    try {
+      const detailsValues = await getCourseDetails(courseId);
+      dispatch(fetchCourseDetailsSuccess(detailsValues));
+      dispatch(updateLoadingDetailsStatus({ status: RequestStatus.SUCCESSFUL }));
+    } catch (error) {
+      if (error.response && error.response.status === 403) {
+        dispatch(updateLoadingDetailsStatus({ courseId, status: RequestStatus.DENIED }));
+      } else {
+        dispatch(updateLoadingDetailsStatus({ status: RequestStatus.FAILED }));
+      }
+    }
+  };
+}
+
+export function updateCourseDetailsQuery(courseId, details) {
+  return async (dispatch) => {
+    dispatch(updateSavingStatus({ status: RequestStatus.IN_PROGRESS }));
+
+    try {
+      const detailsValues = await updateCourseDetails(courseId, details);
+      dispatch(updateSavingStatus({ status: RequestStatus.SUCCESSFUL }));
+      dispatch(updateCourseDetailsSuccess(detailsValues));
+      return true;
+    } catch (error) {
+      dispatch(updateSavingStatus({ status: RequestStatus.FAILED }));
+      return false;
+    }
+  };
+}
+
+export function fetchCourseSettingsQuery(courseId) {
+  return async (dispatch) => {
+    dispatch(updateLoadingSettingsStatus({ status: RequestStatus.IN_PROGRESS }));
+
+    try {
+      const settingsValues = await getCourseSettings(courseId);
+      dispatch(fetchCourseSettingsSuccess(settingsValues));
+      dispatch(updateLoadingSettingsStatus({ status: RequestStatus.SUCCESSFUL }));
+      return true;
+    } catch (error) {
+      if (error.response && error.response.status === 403) {
+        dispatch(updateLoadingSettingsStatus({ courseId, status: RequestStatus.DENIED }));
+      } else {
+        dispatch(updateLoadingSettingsStatus({ status: RequestStatus.FAILED }));
+      }
+      return false;
+    }
+  };
+}
diff --git a/src/schedule-and-details/details-section/DetailsSection.scss b/src/schedule-and-details/details-section/DetailsSection.scss
new file mode 100644
index 0000000000..f8d4da7bd6
--- /dev/null
+++ b/src/schedule-and-details/details-section/DetailsSection.scss
@@ -0,0 +1,6 @@
+.dropdown-language {
+  .dropdown-menu {
+    overflow: auto;
+    height: 20rem;
+  }
+}
diff --git a/src/schedule-and-details/details-section/DetailsSection.test.jsx b/src/schedule-and-details/details-section/DetailsSection.test.jsx
new file mode 100644
index 0000000000..e048f17fd9
--- /dev/null
+++ b/src/schedule-and-details/details-section/DetailsSection.test.jsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import { fireEvent, render, waitFor } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import { courseSettingsMock } from '../__mocks__';
+import messages from './messages';
+import DetailsSection from '.';
+
+describe('<DetailsSection />', () => {
+  const onChangeMock = jest.fn();
+  const RootWrapper = (props) => (
+    <IntlProvider locale="en">
+      <DetailsSection {...props} />
+    </IntlProvider>
+  );
+
+  const props = {
+    language: courseSettingsMock.languageOptions[1][0],
+    languageOptions: courseSettingsMock.languageOptions,
+    onChange: onChangeMock,
+  };
+
+  it('renders details section successfully', () => {
+    const { getByText, getByRole } = render(
+      <RootWrapper {...props} />,
+    );
+    expect(getByText(messages.detailsTitle.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.detailsDescription.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.dropdownHelpText.defaultMessage)).toBeInTheDocument();
+    expect(
+      getByRole('button', { name: courseSettingsMock.languageOptions[1][1] }),
+    ).toBeInTheDocument();
+  });
+
+  it('should call onChange if dropdown value changed', () => {
+    const { getByRole } = render(<RootWrapper {...props} />);
+    const option = getByRole('button', {
+      name: courseSettingsMock.languageOptions[1][1],
+    });
+    fireEvent.click(option);
+    const anotherOption = getByRole('button', {
+      name: courseSettingsMock.languageOptions[0][1],
+    });
+
+    waitFor(() => expect(anotherOption));
+    fireEvent.click(anotherOption);
+    expect(onChangeMock).toHaveBeenCalledWith(
+      courseSettingsMock.languageOptions[0][0],
+      'language',
+    );
+  });
+
+  it('should render an empty option if no option is selected', () => {
+    const initialProps = { ...props, language: '' };
+    const { getByRole } = render(<RootWrapper {...initialProps} />);
+    expect(
+      getByRole('button', { name: messages.dropdownEmpty.defaultMessage }),
+    ).toBeInTheDocument();
+  });
+});
diff --git a/src/schedule-and-details/details-section/index.jsx b/src/schedule-and-details/details-section/index.jsx
new file mode 100644
index 0000000000..c4c0db2cbf
--- /dev/null
+++ b/src/schedule-and-details/details-section/index.jsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Form, Dropdown } from '@openedx/paragon';
+
+import SectionSubHeader from '../../generic/section-sub-header';
+import messages from './messages';
+
+const DetailsSection = ({
+  language, languageOptions, onChange,
+}) => {
+  const intl = useIntl();
+  const formattedLanguage = () => {
+    const result = languageOptions.find((arr) => arr[0] === language);
+    return result ? result[1] : intl.formatMessage(messages.dropdownEmpty);
+  };
+
+  return (
+    <section className="section-container details-section">
+      <SectionSubHeader
+        title={intl.formatMessage(messages.detailsTitle)}
+        description={intl.formatMessage(messages.detailsDescription)}
+      />
+      <Form.Group className="form-group-custom dropdown-language">
+        <Form.Label>{intl.formatMessage(messages.dropdownLabel)}</Form.Label>
+        <Dropdown className="bg-white">
+          <Dropdown.Toggle variant="outline-primary" id="languageDropdown">
+            {formattedLanguage()}
+          </Dropdown.Toggle>
+          <Dropdown.Menu>
+            {languageOptions.map((option) => (
+              <Dropdown.Item
+                key={option[0]}
+                onClick={() => onChange(option[0], 'language')}
+              >
+                {option[1]}
+              </Dropdown.Item>
+            ))}
+          </Dropdown.Menu>
+        </Dropdown>
+        <Form.Control.Feedback>
+          {intl.formatMessage(messages.dropdownHelpText)}
+        </Form.Control.Feedback>
+      </Form.Group>
+    </section>
+  );
+};
+
+DetailsSection.defaultProps = {
+  language: '',
+};
+
+DetailsSection.propTypes = {
+  language: PropTypes.string,
+  languageOptions: PropTypes.arrayOf(
+    PropTypes.arrayOf(PropTypes.string.isRequired).isRequired,
+  ).isRequired,
+  onChange: PropTypes.func.isRequired,
+};
+
+export default DetailsSection;
diff --git a/src/schedule-and-details/details-section/messages.js b/src/schedule-and-details/details-section/messages.js
new file mode 100644
index 0000000000..21313d99cc
--- /dev/null
+++ b/src/schedule-and-details/details-section/messages.js
@@ -0,0 +1,26 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  detailsTitle: {
+    id: 'course-authoring.schedule-section.details.title',
+    defaultMessage: 'Course details',
+  },
+  detailsDescription: {
+    id: 'course-authoring.schedule-section.details.description',
+    defaultMessage: 'Provide useful information about your course',
+  },
+  dropdownLabel: {
+    id: 'course-authoring.schedule-section.details.dropdown.label',
+    defaultMessage: 'Course language',
+  },
+  dropdownHelpText: {
+    id: 'course-authoring.schedule-section.details.dropdown.help-text',
+    defaultMessage: 'Identify the course language here. This is used to assist users find courses that are taught in a specific language. It is also used to localize the \'From:\' field in bulk emails.',
+  },
+  dropdownEmpty: {
+    id: 'course-authoring.schedule-section.details.dropdown.empty',
+    defaultMessage: 'Select language',
+  },
+});
+
+export default messages;
diff --git a/src/schedule-and-details/hooks.jsx b/src/schedule-and-details/hooks.jsx
new file mode 100644
index 0000000000..218b92dc1c
--- /dev/null
+++ b/src/schedule-and-details/hooks.jsx
@@ -0,0 +1,149 @@
+import { useState, useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import { RequestStatus } from '../data/constants';
+import { getLoadingDetailsStatus, getLoadingSettingsStatus, getSavingStatus } from './data/selectors';
+import { validateScheduleAndDetails, updateWithDefaultValues } from './utils';
+
+const useLoadValuesPrompt = (
+  courseId,
+  fetchCourseDetailsQuery,
+  fetchCourseSettingsQuery,
+) => {
+  const dispatch = useDispatch();
+  const loadingDetailsStatus = useSelector(getLoadingDetailsStatus);
+  const loadingSettingsStatus = useSelector(getLoadingSettingsStatus);
+  const [showLoadFailedAlert, setShowLoadFailedAlert] = useState(false);
+
+  useEffect(() => {
+    dispatch(fetchCourseDetailsQuery(courseId));
+    dispatch(fetchCourseSettingsQuery(courseId));
+  }, [courseId]);
+
+  useEffect(() => {
+    if (loadingDetailsStatus === RequestStatus.FAILED || loadingSettingsStatus === RequestStatus.FAILED) {
+      setShowLoadFailedAlert(true);
+      window.scrollTo({ top: 0, behavior: 'smooth' });
+    }
+  }, [loadingDetailsStatus, loadingSettingsStatus]);
+
+  return {
+    showLoadFailedAlert,
+  };
+};
+
+const useSaveValuesPrompt = (
+  courseId,
+  updateDataQuery,
+  canShowCertificateAvailableDateField,
+  initialEditedData = {},
+) => {
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const savingStatus = useSelector(getSavingStatus);
+  const [editedValues, setEditedValues] = useState(initialEditedData);
+  const [showSuccessfulAlert, setShowSuccessfulAlert] = useState(false);
+  const [showFailedAlert, setShowFailedAlert] = useState(false);
+  const [showModifiedAlert, setShowModifiedAlert] = useState(false);
+  const [isQueryPending, setIsQueryPending] = useState(false);
+  const [isEditableState, setIsEditableState] = useState(false);
+  const [errorFields, setErrorFields] = useState({});
+
+  useEffect(() => {
+    if (!isQueryPending && !isEditableState) {
+      setEditedValues(initialEditedData);
+    }
+  }, [initialEditedData]);
+
+  useEffect(() => {
+    const errors = validateScheduleAndDetails(editedValues, canShowCertificateAvailableDateField, intl);
+    setErrorFields(errors);
+  }, [editedValues]);
+
+  const handleValuesChange = (value, fieldName) => {
+    setIsEditableState(true);
+    setShowSuccessfulAlert(false);
+    setShowFailedAlert(false);
+
+    if (editedValues[fieldName] !== value) {
+      setEditedValues((prevEditedValues) => ({
+        ...prevEditedValues,
+        [fieldName]: value || '',
+      }));
+
+      if (!showModifiedAlert) {
+        setShowModifiedAlert(true);
+      }
+    }
+  };
+
+  const handleResetValues = () => {
+    setIsEditableState(false);
+    setEditedValues(initialEditedData || {});
+    setShowModifiedAlert(false);
+    setShowSuccessfulAlert(false);
+    setShowFailedAlert(false);
+  };
+
+  const handleUpdateValues = () => {
+    setIsQueryPending(true);
+    setIsEditableState(false);
+  };
+
+  const handleInternetConnectionFailed = () => {
+    setShowModifiedAlert(false);
+    setShowSuccessfulAlert(false);
+    setShowFailedAlert(false);
+    setIsQueryPending(false);
+  };
+
+  const handleQueryProcessing = () => {
+    setShowSuccessfulAlert(false);
+    setShowFailedAlert(false);
+    dispatch(updateDataQuery(courseId, updateWithDefaultValues(editedValues)));
+  };
+
+  useEffect(() => {
+    if (savingStatus === RequestStatus.SUCCESSFUL) {
+      setIsQueryPending(false);
+      setShowSuccessfulAlert(true);
+      setShowFailedAlert(false);
+      setTimeout(() => setShowSuccessfulAlert(false), 15000);
+      window.scrollTo({ top: 0, behavior: 'smooth' });
+
+      if (!isEditableState) {
+        setShowModifiedAlert(false);
+      }
+    } else if (savingStatus === RequestStatus.FAILED) {
+      setIsQueryPending(false);
+      setShowSuccessfulAlert(false);
+      setShowFailedAlert(true);
+      window.scrollTo({ top: 0, behavior: 'smooth' });
+
+      if (!isEditableState) {
+        setShowModifiedAlert(false);
+      }
+    }
+  }, [savingStatus]);
+
+  return {
+    errorFields,
+    savingStatus,
+    editedValues,
+    isQueryPending,
+    isEditableState,
+    showModifiedAlert,
+    showSuccessfulAlert,
+    showFailedAlert,
+    dispatch,
+    setErrorFields,
+    handleResetValues,
+    handleValuesChange,
+    handleUpdateValues,
+    handleQueryProcessing,
+    handleInternetConnectionFailed,
+  };
+};
+
+export { useLoadValuesPrompt, useSaveValuesPrompt };
diff --git a/src/schedule-and-details/index.jsx b/src/schedule-and-details/index.jsx
new file mode 100644
index 0000000000..f8d114f44d
--- /dev/null
+++ b/src/schedule-and-details/index.jsx
@@ -0,0 +1,398 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useSelector } from 'react-redux';
+import {
+  Container, Button, Layout, StatefulButton,
+} from '@openedx/paragon';
+import {
+  CheckCircle as CheckCircleIcon,
+  ErrorOutline as ErrorOutlineIcon,
+  Warning as WarningIcon,
+} from '@openedx/paragon/icons';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+
+import Placeholder from '../editors/Placeholder';
+import { RequestStatus } from '../data/constants';
+import { useModel } from '../generic/model-store';
+import AlertMessage from '../generic/alert-message';
+import InternetConnectionAlert from '../generic/internet-connection-alert';
+import { STATEFUL_BUTTON_STATES } from '../constants';
+import getPageHeadTitle from '../generic/utils';
+import { useScrollToHashElement } from '../hooks';
+import {
+  fetchCourseSettingsQuery,
+  fetchCourseDetailsQuery,
+  updateCourseDetailsQuery,
+} from './data/thunks';
+import {
+  getCourseSettings,
+  getCourseDetails,
+  getLoadingDetailsStatus,
+  getLoadingSettingsStatus,
+} from './data/selectors';
+import BasicSection from './basic-section';
+import CreditSection from './credit-section';
+import DetailsSection from './details-section';
+import IntroducingSection from './introducing-section';
+import PacingSection from './pacing-section';
+import ScheduleSection from './schedule-section';
+import LearningOutcomesSection from './learning-outcomes-section';
+import InstructorsSection from './instructors-section';
+import RequirementsSection from './requirements-section';
+import LicenseSection from './license-section';
+import ScheduleSidebar from './schedule-sidebar';
+import messages from './messages';
+import { useLoadValuesPrompt, useSaveValuesPrompt } from './hooks';
+
+const ScheduleAndDetails = ({ intl, courseId }) => {
+  const courseSettings = useSelector(getCourseSettings);
+  const courseDetails = useSelector(getCourseDetails);
+  const loadingDetailsStatus = useSelector(getLoadingDetailsStatus);
+  const loadingSettingsStatus = useSelector(getLoadingSettingsStatus);
+  const isLoading = loadingDetailsStatus === RequestStatus.IN_PROGRESS
+    || loadingSettingsStatus === RequestStatus.IN_PROGRESS;
+
+  const course = useModel('courseDetails', courseId);
+  document.title = getPageHeadTitle(course?.name, intl.formatMessage(messages.headingTitle));
+
+  const {
+    platformName,
+    isCreditCourse,
+    upgradeDeadline,
+    languageOptions,
+    marketingEnabled,
+    licensingEnabled,
+    aboutPageEditable,
+    courseDisplayName,
+    sidebarHtmlEnabled,
+    lmsLinkForAboutPage,
+    enrollmentEndEditable,
+    isEntranceExamsEnabled,
+    creditEligibilityEnabled,
+    shortDescriptionEditable,
+    enableExtendedCourseDetails,
+    isPrerequisiteCoursesEnabled,
+    mfeProctoredExamSettingsUrl,
+    possiblePreRequisiteCourses,
+    canShowCertificateAvailableDateField,
+  } = courseSettings;
+
+  const {
+    showLoadFailedAlert,
+  } = useLoadValuesPrompt(
+    courseId,
+    fetchCourseDetailsQuery,
+    fetchCourseSettingsQuery,
+  );
+
+  const {
+    errorFields,
+    savingStatus,
+    editedValues,
+    isQueryPending,
+    isEditableState,
+    showModifiedAlert,
+    showSuccessfulAlert,
+    showFailedAlert,
+    handleResetValues,
+    handleValuesChange,
+    handleUpdateValues,
+    handleQueryProcessing,
+    handleInternetConnectionFailed,
+  } = useSaveValuesPrompt(
+    courseId,
+    updateCourseDetailsQuery,
+    canShowCertificateAvailableDateField,
+    courseDetails,
+  );
+
+  const {
+    org,
+    courseId: courseNumber,
+    run,
+    title,
+    effort,
+    endDate,
+    license,
+    language,
+    subtitle,
+    overview,
+    duration,
+    selfPaced,
+    startDate,
+    introVideo,
+    description,
+    learningInfo,
+    enrollmentEnd,
+    instructorInfo,
+    enrollmentStart,
+    shortDescription,
+    aboutSidebarHtml,
+    preRequisiteCourses,
+    entranceExamEnabled,
+    courseImageAssetPath,
+    bannerImageAssetPath,
+    certificateAvailableDate,
+    entranceExamMinimumScorePct,
+    certificatesDisplayBehavior,
+    videoThumbnailImageAssetPath,
+  } = editedValues;
+
+  useScrollToHashElement({ isLoading });
+
+  if (isLoading) {
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    return <></>;
+  }
+
+  if (loadingDetailsStatus === RequestStatus.DENIED || loadingSettingsStatus === RequestStatus.DENIED) {
+    return (
+      <div className="row justify-content-center m-6">
+        <Placeholder />
+      </div>
+    );
+  }
+
+  const showCreditSection = creditEligibilityEnabled && isCreditCourse;
+  const showRequirementsSection = aboutPageEditable || isPrerequisiteCoursesEnabled || isEntranceExamsEnabled;
+  const hasErrors = !!Object.keys(errorFields).length;
+  const updateValuesButtonState = {
+    labels: {
+      default: intl.formatMessage(messages.buttonSaveText),
+      pending: intl.formatMessage(messages.buttonSavingText),
+    },
+    disabledStates: [STATEFUL_BUTTON_STATES.pending],
+  };
+  const alertWhileSavingTitle = hasErrors
+    ? intl.formatMessage(messages.alertWarningOnSaveWithError)
+    : intl.formatMessage(messages.alertWarning);
+
+  const alertWhileSavingDescription = hasErrors
+    ? intl.formatMessage(messages.alertWarningDescriptionsOnSaveWithError)
+    : intl.formatMessage(messages.alertWarningDescriptions);
+
+  return (
+    <>
+      <Container size="xl" className="schedule-and-details px-4">
+        <div className="mt-5">
+          <AlertMessage
+            show={showSuccessfulAlert}
+            variant="success"
+            icon={CheckCircleIcon}
+            title={intl.formatMessage(messages.alertSuccess)}
+            aria-hidden="true"
+            aria-labelledby={intl.formatMessage(
+              messages.alertSuccessAriaLabelledby,
+            )}
+            aria-describedby={intl.formatMessage(
+              messages.alertSuccessAriaDescribedby,
+            )}
+          />
+          <AlertMessage
+            show={showLoadFailedAlert}
+            variant="danger"
+            icon={ErrorOutlineIcon}
+            title={intl.formatMessage(messages.alertLoadFail)}
+            aria-hidden="true"
+            aria-labelledby={intl.formatMessage(
+              messages.alertFailAriaLabelledby,
+            )}
+            aria-describedby={intl.formatMessage(
+              messages.alertFailAriaDescribedby,
+            )}
+          />
+          <AlertMessage
+            show={showFailedAlert}
+            variant="danger"
+            icon={ErrorOutlineIcon}
+            title={intl.formatMessage(messages.alertFail)}
+            aria-hidden="true"
+            aria-labelledby={intl.formatMessage(
+              messages.alertFailAriaLabelledby,
+            )}
+            aria-describedby={intl.formatMessage(
+              messages.alertFailAriaDescribedby,
+            )}
+          />
+          <header>
+            <span className="small text-gray-700">
+              {intl.formatMessage(messages.headingSubtitle)}
+            </span>
+            <h2 className="mb-4 pb-1">
+              {intl.formatMessage(messages.headingTitle)}
+            </h2>
+          </header>
+        </div>
+        <section className="setting-items mb-4">
+          <Layout
+            lg={[{ span: 9 }, { span: 3 }]}
+            md={[{ span: 9 }, { span: 3 }]}
+            sm={[{ span: 9 }, { span: 3 }]}
+            xs={[{ span: 9 }, { span: 3 }]}
+            xl={[{ span: 9 }, { span: 3 }]}
+          >
+            <Layout.Element>
+              <article>
+                <div>
+                  <BasicSection
+                    org={org}
+                    courseNumber={courseNumber}
+                    run={run}
+                    lmsLinkForAboutPage={lmsLinkForAboutPage}
+                    marketingEnabled={marketingEnabled}
+                    courseDisplayName={courseDisplayName}
+                    platformName={platformName}
+                  />
+                  {showCreditSection && (
+                    <CreditSection
+                      creditRequirements={courseSettings?.creditRequirements}
+                    />
+                  )}
+                  <PacingSection
+                    selfPaced={selfPaced}
+                    startDate={startDate}
+                    onChange={handleValuesChange}
+                  />
+                  <ScheduleSection
+                    endDate={endDate}
+                    startDate={startDate}
+                    errorFields={errorFields}
+                    platformName={platformName}
+                    enrollmentEnd={enrollmentEnd}
+                    enrollmentStart={enrollmentStart}
+                    upgradeDeadline={upgradeDeadline}
+                    enrollmentEndEditable={enrollmentEndEditable}
+                    certificateAvailableDate={certificateAvailableDate}
+                    certificatesDisplayBehavior={certificatesDisplayBehavior}
+                    canShowCertificateAvailableDateField={canShowCertificateAvailableDateField}
+                    onChange={handleValuesChange}
+                  />
+                  {aboutPageEditable && (
+                    <DetailsSection
+                      language={language}
+                      languageOptions={languageOptions}
+                      onChange={handleValuesChange}
+                    />
+                  )}
+                  <IntroducingSection
+                    title={title}
+                    overview={overview}
+                    duration={duration}
+                    subtitle={subtitle}
+                    introVideo={introVideo}
+                    description={description}
+                    aboutSidebarHtml={aboutSidebarHtml}
+                    shortDescription={shortDescription}
+                    aboutPageEditable={aboutPageEditable}
+                    sidebarHtmlEnabled={sidebarHtmlEnabled}
+                    lmsLinkForAboutPage={lmsLinkForAboutPage}
+                    courseImageAssetPath={courseImageAssetPath}
+                    bannerImageAssetPath={bannerImageAssetPath}
+                    shortDescriptionEditable={shortDescriptionEditable}
+                    enableExtendedCourseDetails={enableExtendedCourseDetails}
+                    videoThumbnailImageAssetPath={videoThumbnailImageAssetPath}
+                    onChange={handleValuesChange}
+                  />
+                  {enableExtendedCourseDetails && (
+                    <>
+                      <LearningOutcomesSection
+                        learningInfo={learningInfo}
+                        onChange={handleValuesChange}
+                      />
+                      <InstructorsSection
+                        instructors={instructorInfo?.instructors}
+                        onChange={handleValuesChange}
+                      />
+                    </>
+                  )}
+                  {showRequirementsSection && (
+                    <RequirementsSection
+                      effort={effort}
+                      errorFields={errorFields}
+                      aboutPageEditable={aboutPageEditable}
+                      entranceExamEnabled={entranceExamEnabled}
+                      preRequisiteCourses={preRequisiteCourses}
+                      isEntranceExamsEnabled={isEntranceExamsEnabled}
+                      possiblePreRequisiteCourses={possiblePreRequisiteCourses}
+                      entranceExamMinimumScorePct={entranceExamMinimumScorePct}
+                      isPrerequisiteCoursesEnabled={
+                        isPrerequisiteCoursesEnabled
+                      }
+                      onChange={handleValuesChange}
+                    />
+                  )}
+                  {licensingEnabled && (
+                    <LicenseSection
+                      license={license}
+                      onChange={handleValuesChange}
+                    />
+                  )}
+                </div>
+              </article>
+            </Layout.Element>
+            <Layout.Element>
+              <ScheduleSidebar
+                courseId={courseId}
+                proctoredExamSettingsUrl={mfeProctoredExamSettingsUrl}
+              />
+            </Layout.Element>
+          </Layout>
+        </section>
+      </Container>
+      <div className="alert-toast">
+        {!isEditableState && (
+          <InternetConnectionAlert
+            isFailed={savingStatus === RequestStatus.FAILED}
+            isQueryPending={isQueryPending}
+            onQueryProcessing={handleQueryProcessing}
+            onInternetConnectionFailed={handleInternetConnectionFailed}
+          />
+        )}
+        <AlertMessage
+          show={showModifiedAlert}
+          aria-hidden={showModifiedAlert}
+          aria-labelledby={intl.formatMessage(
+            messages.alertWarningAriaLabelledby,
+          )}
+          aria-describedby={intl.formatMessage(
+            messages.alertWarningAriaDescribedby,
+          )}
+          role="dialog"
+          actions={[
+            !isQueryPending && (
+              <Button
+                key="cancel-button"
+                variant="tertiary"
+                onClick={handleResetValues}
+              >
+                {intl.formatMessage(messages.buttonCancelText)}
+              </Button>
+            ),
+            <StatefulButton
+              key="save-button"
+              onClick={handleUpdateValues}
+              disabled={hasErrors}
+              state={
+                isQueryPending
+                  ? STATEFUL_BUTTON_STATES.pending
+                  : STATEFUL_BUTTON_STATES.default
+              }
+              {...updateValuesButtonState}
+            />,
+          ].filter(Boolean)}
+          variant="warning"
+          icon={WarningIcon}
+          title={alertWhileSavingTitle}
+          description={alertWhileSavingDescription}
+        />
+      </div>
+    </>
+  );
+};
+
+ScheduleAndDetails.propTypes = {
+  intl: intlShape.isRequired,
+  courseId: PropTypes.string.isRequired,
+};
+
+export default injectIntl(ScheduleAndDetails);
diff --git a/src/schedule-and-details/instructors-section/InstructorsSection.scss b/src/schedule-and-details/instructors-section/InstructorsSection.scss
new file mode 100644
index 0000000000..1581f8e1cc
--- /dev/null
+++ b/src/schedule-and-details/instructors-section/InstructorsSection.scss
@@ -0,0 +1,11 @@
+.instructors-section {
+  .instructors-list {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    gap: 1.875rem;
+    padding-inline-start: 0;
+    list-style-type: none;
+    padding-top: $spacer;
+  }
+}
diff --git a/src/schedule-and-details/instructors-section/InstructorsSection.test.jsx b/src/schedule-and-details/instructors-section/InstructorsSection.test.jsx
new file mode 100644
index 0000000000..1295c71b7d
--- /dev/null
+++ b/src/schedule-and-details/instructors-section/InstructorsSection.test.jsx
@@ -0,0 +1,99 @@
+import React from 'react';
+import {
+  act, fireEvent, render, waitFor,
+} from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import { courseDetailsMock } from '../__mocks__';
+import messages from './messages';
+import instructorMessages from './instructor-container/messages';
+import InstructorsSection from '.';
+
+const onChangeMock = jest.fn();
+const courseIdMock = 'course-id-bar';
+
+// Mock the TextareaAutosize component
+jest.mock('react-textarea-autosize', () => jest.fn((props) => (
+  <textarea
+    {...props}
+    onFocus={() => {}}
+    onBlur={() => {}}
+  />
+)));
+
+jest.mock('react-redux', () => ({
+  useSelector: jest.fn(),
+  useDispatch: jest.fn(),
+}));
+
+jest.mock('react-router', () => ({
+  ...jest.requireActual('react-router'),
+  useParams: () => ({
+    courseId: courseIdMock,
+  }),
+}));
+
+const RootWrapper = (props) => (
+  <IntlProvider locale="en">
+    <InstructorsSection {...props} />
+  </IntlProvider>
+);
+
+const props = {
+  instructors: courseDetailsMock.instructorInfo.instructors,
+  onChange: onChangeMock,
+};
+
+describe('<InstructorsSection />', () => {
+  it('renders section successfully', () => {
+    const { getByText, getByRole } = render(<RootWrapper {...props} />);
+    expect(getByText(messages.instructorsTitle.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.instructorsDescription.defaultMessage)).toBeInTheDocument();
+    expect(getByRole('button', { name: messages.instructorAdd.defaultMessage })).toBeInTheDocument();
+  });
+
+  it('should create another instructor form on click Add new instructor', () => {
+    const { getAllByRole, getByRole } = render(<RootWrapper {...props} />);
+    const addButton = getByRole('button', { name: instructorMessages.instructorDelete.defaultMessage });
+    act(() => {
+      fireEvent.click(addButton);
+    });
+
+    waitFor(() => {
+      const deleteButtons = getAllByRole('button', { name: instructorMessages.instructorDelete.defaultMessage });
+      expect(deleteButtons.length).toBe(2);
+    });
+  });
+
+  it('should delete instructor form on click Delete', () => {
+    const { getAllByRole, getByRole } = render(<RootWrapper {...props} />);
+    const deleteButton = getByRole('button', { name: instructorMessages.instructorDelete.defaultMessage });
+    act(() => {
+      fireEvent.click(deleteButton);
+    });
+
+    expect(onChangeMock).toHaveBeenCalledWith({ instructors: [] }, 'instructorInfo');
+    waitFor(() => {
+      const deleteButtons = getAllByRole('button', { name: instructorMessages.instructorDelete.defaultMessage });
+      expect(deleteButtons.length).toBe(0);
+    });
+  });
+
+  it('should call onChange if input value changed', () => {
+    const { getByPlaceholderText } = render(<RootWrapper {...props} />);
+    const inputName = getByPlaceholderText(instructorMessages.instructorNameInputPlaceholder.defaultMessage);
+    act(() => {
+      fireEvent.change(inputName, { target: { value: 'abc' } });
+    });
+
+    expect(onChangeMock).toHaveBeenCalledWith({
+      instructors: [{
+        bio: props.instructors[0].bio,
+        image: props.instructors[0].image,
+        name: 'abc',
+        organization: props.instructors[0].organization,
+        title: props.instructors[0].title,
+      }],
+    }, 'instructorInfo');
+  });
+});
diff --git a/src/schedule-and-details/instructors-section/index.jsx b/src/schedule-and-details/instructors-section/index.jsx
new file mode 100644
index 0000000000..99dde50d62
--- /dev/null
+++ b/src/schedule-and-details/instructors-section/index.jsx
@@ -0,0 +1,96 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { v4 as uuid } from 'uuid';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Button } from '@openedx/paragon';
+import { Add as AddIcon } from '@openedx/paragon/icons';
+
+import InstructorContainer from './instructor-container';
+import SectionSubHeader from '../../generic/section-sub-header';
+import messages from './messages';
+
+const InstructorsSection = ({ instructors, onChange }) => {
+  const intl = useIntl();
+  const newInstructor = {
+    bio: '',
+    image: '',
+    name: '',
+    organization: '',
+    title: '',
+  };
+
+  const handleChange = (value, idx, field) => {
+    const updatedInstructors = instructors.map((instructor, index) => {
+      if (index === idx) {
+        return {
+          ...instructor,
+          [field]: value,
+        };
+      }
+      return instructor;
+    });
+
+    const updatedInstructorInfo = {
+      instructors: updatedInstructors,
+    };
+    onChange(updatedInstructorInfo, 'instructorInfo');
+  };
+
+  const handleDelete = (idx) => {
+    const updatedInstructorInfo = {
+      instructors: [...instructors],
+    };
+    updatedInstructorInfo.instructors.splice(idx, 1);
+    onChange(updatedInstructorInfo, 'instructorInfo');
+  };
+
+  const handleAdd = () => {
+    const updatedInstructorInfo = {
+      instructors: [...instructors, newInstructor],
+    };
+
+    onChange(updatedInstructorInfo, 'instructorInfo');
+  };
+
+  return (
+    <section className="section-container instructors-section">
+      <SectionSubHeader
+        title={intl.formatMessage(messages.instructorsTitle)}
+        description={intl.formatMessage(messages.instructorsDescription)}
+      />
+      <ul className="instructors-list">
+        {instructors.map((instructor, idx) => (
+          <InstructorContainer
+            instructor={instructor}
+            key={uuid}
+            idx={idx}
+            onDelete={handleDelete}
+            onChange={handleChange}
+          />
+        ))}
+      </ul>
+      <Button iconBefore={AddIcon} variant="primary" onClick={handleAdd}>
+        {intl.formatMessage(messages.instructorAdd)}
+      </Button>
+    </section>
+  );
+};
+
+InstructorsSection.defaultProps = {
+  instructors: [],
+};
+
+InstructorsSection.propTypes = {
+  instructors: PropTypes.arrayOf(
+    PropTypes.shape({
+      bio: PropTypes.string,
+      image: PropTypes.string,
+      name: PropTypes.string,
+      organization: PropTypes.string,
+      title: PropTypes.string,
+    }),
+  ),
+  onChange: PropTypes.func.isRequired,
+};
+
+export default InstructorsSection;
diff --git a/src/schedule-and-details/instructors-section/instructor-container/InstructorContainer.test.jsx b/src/schedule-and-details/instructors-section/instructor-container/InstructorContainer.test.jsx
new file mode 100644
index 0000000000..8d309d240a
--- /dev/null
+++ b/src/schedule-and-details/instructors-section/instructor-container/InstructorContainer.test.jsx
@@ -0,0 +1,129 @@
+import React from 'react';
+import { fireEvent, render, act } from '@testing-library/react';
+import { AppProvider } from '@edx/frontend-platform/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { initializeMockApp } from '@edx/frontend-platform';
+
+import initializeStore from '../../../store';
+
+import { courseDetailsMock } from '../../__mocks__';
+import messages from './messages';
+import InstructorContainer from '.';
+
+let store;
+
+const onDeleteMock = jest.fn();
+const onChangeMock = jest.fn();
+const courseIdMock = 'course-id-bar';
+jest.mock('react-router', () => ({
+  ...jest.requireActual('react-router'),
+  useParams: () => ({
+    courseId: courseIdMock,
+  }),
+}));
+
+// Mock the TextareaAutosize component
+jest.mock('react-textarea-autosize', () => jest.fn((props) => (
+  <textarea
+    {...props}
+    onFocus={() => {}}
+    onBlur={() => {}}
+  />
+)));
+
+const RootWrapper = (props) => (
+  <IntlProvider locale="en">
+    <AppProvider store={store}>
+      <InstructorContainer {...props} />
+    </AppProvider>
+  </IntlProvider>
+);
+
+const props = {
+  instructor: courseDetailsMock.instructorInfo.instructors[0],
+  idx: 0,
+  onChange: onChangeMock,
+  onDelete: onDeleteMock,
+};
+
+describe('<InstructorContainer />', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+
+    store = initializeStore();
+  });
+
+  it('renders successfully', () => {
+    const { getByText, getByPlaceholderText } = render(
+      <RootWrapper {...props} />,
+    );
+    expect(
+      getByText(messages.instructorNameLabel.defaultMessage),
+    ).toBeInTheDocument();
+    expect(
+      getByText(messages.instructorTitleLabel.defaultMessage),
+    ).toBeInTheDocument();
+    expect(
+      getByText(messages.instructorOrganizationLabel.defaultMessage),
+    ).toBeInTheDocument();
+    expect(
+      getByText(messages.instructorBioLabel.defaultMessage),
+    ).toBeInTheDocument();
+    expect(
+      getByText(messages.instructorPhotoLabel.defaultMessage),
+    ).toBeInTheDocument();
+
+    expect(
+      getByPlaceholderText(messages.instructorNameInputPlaceholder.defaultMessage),
+    ).toBeInTheDocument();
+    expect(
+      getByPlaceholderText(messages.instructorTitleInputPlaceholder.defaultMessage),
+    ).toBeInTheDocument();
+    expect(
+      getByPlaceholderText(messages.instructorOrganizationInputPlaceholder.defaultMessage),
+    ).toBeInTheDocument();
+    expect(
+      getByPlaceholderText(messages.instructorBioInputPlaceholder.defaultMessage),
+    ).toBeInTheDocument();
+    expect(
+      getByPlaceholderText(messages.instructorPhotoInputPlaceholder.defaultMessage),
+    ).toBeInTheDocument();
+  });
+
+  it('should display input values', () => {
+    const { getByDisplayValue } = render(
+      <RootWrapper {...props} />,
+    );
+
+    expect(getByDisplayValue(props.instructor.name)).toBeInTheDocument();
+    expect(getByDisplayValue(props.instructor.title)).toBeInTheDocument();
+    expect(getByDisplayValue(props.instructor.organization)).toBeInTheDocument();
+    expect(getByDisplayValue(props.instructor.bio)).toBeInTheDocument();
+    expect(getByDisplayValue(props.instructor.image)).toBeInTheDocument();
+  });
+
+  it('should call onChange if input value changed', async () => {
+    const { getByPlaceholderText } = render(<RootWrapper {...props} />);
+    const nameInput = getByPlaceholderText(messages.instructorNameInputPlaceholder.defaultMessage);
+    await act(() => {
+      fireEvent.change(nameInput, { target: { value: 'abc' } });
+    });
+    expect(onChangeMock).toHaveBeenCalledWith('abc', props.idx, 'name');
+  });
+
+  it('should call onDelete if button delete clicked', async () => {
+    const { getByRole } = render(<RootWrapper {...props} />);
+    const deleteBtn = getByRole('button', { name: messages.instructorDelete.defaultMessage });
+    await act(() => {
+      fireEvent.click(deleteBtn);
+    });
+    expect(onDeleteMock).toHaveBeenCalledWith(props.idx);
+  });
+});
diff --git a/src/schedule-and-details/instructors-section/instructor-container/index.jsx b/src/schedule-and-details/instructors-section/instructor-container/index.jsx
new file mode 100644
index 0000000000..7c28408abb
--- /dev/null
+++ b/src/schedule-and-details/instructors-section/instructor-container/index.jsx
@@ -0,0 +1,120 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import TextareaAutosize from 'react-textarea-autosize';
+import {
+  Card, Form, Col, Button,
+} from '@openedx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import CourseUploadImage from '../../../generic/course-upload-image';
+import messages from './messages';
+
+const InstructorContainer = ({
+  instructor, idx, onDelete, onChange,
+}) => {
+  const intl = useIntl();
+  return (
+    <Card className="p-3.5" key={idx}>
+      <Card.Body>
+        <Form>
+          <Form.Row>
+            <Form.Group as={Col} className="form-group-custom">
+              <Form.Label>
+                {intl.formatMessage(messages.instructorNameLabel)}
+              </Form.Label>
+              <Form.Control
+                value={instructor?.name}
+                placeholder={intl.formatMessage(messages.instructorNameInputPlaceholder)}
+                onChange={(e) => onChange(e.target.value, idx, 'name')}
+              />
+              <Form.Text>
+                {intl.formatMessage(messages.instructorNameHelpText)}
+              </Form.Text>
+            </Form.Group>
+
+            <Form.Group as={Col} className="form-group-custom">
+              <Form.Label>
+                {intl.formatMessage(messages.instructorTitleLabel)}
+              </Form.Label>
+              <Form.Control
+                value={instructor?.title}
+                placeholder={intl.formatMessage(messages.instructorTitleInputPlaceholder)}
+                onChange={(e) => onChange(e.target.value, idx, 'title')}
+              />
+              <Form.Text>
+                {intl.formatMessage(messages.instructorTitleHelpText)}
+              </Form.Text>
+            </Form.Group>
+
+            <Form.Group as={Col} className="form-group-custom">
+              <Form.Label>
+                {intl.formatMessage(messages.instructorOrganizationLabel)}
+              </Form.Label>
+              <Form.Control
+                value={instructor?.organization}
+                placeholder={intl.formatMessage(messages.instructorOrganizationInputPlaceholder)}
+                onChange={(e) => onChange(e.target.value, idx, 'organization')}
+              />
+              <Form.Text>
+                {intl.formatMessage(messages.instructorOrganizationHelpText)}
+              </Form.Text>
+            </Form.Group>
+          </Form.Row>
+          <Form.Row>
+            <Form.Group as={Col} className="form-group-custom">
+              <Form.Label>
+                {intl.formatMessage(messages.instructorBioLabel)}
+              </Form.Label>
+              <Form.Control
+                as={TextareaAutosize}
+                value={instructor?.bio}
+                placeholder={intl.formatMessage(messages.instructorBioInputPlaceholder)}
+                onChange={(e) => onChange(e.target.value, idx, 'bio')}
+              />
+              <Form.Text>
+                {intl.formatMessage(messages.instructorBioHelpText)}
+              </Form.Text>
+            </Form.Group>
+          </Form.Row>
+          <Form.Row className="pl-1 pr-2.5">
+            <CourseUploadImage
+              label={intl.formatMessage(messages.instructorPhotoLabel)}
+              assetImagePath={instructor?.image}
+              assetImageField="image"
+              customInputPlaceholder={intl.formatMessage(
+                messages.instructorPhotoInputPlaceholder,
+              )}
+              customHelpText={intl.formatMessage(messages.instructorPhotoHelpText)}
+              onChange={(value, field) => onChange(value, idx, field)}
+            />
+          </Form.Row>
+        </Form>
+      </Card.Body>
+      <Card.Divider />
+      <Card.Footer className="p-0 mt-2.5">
+        <Button variant="outline-primary" onClick={() => onDelete(idx)}>
+          {intl.formatMessage(messages.instructorDelete)}
+        </Button>
+      </Card.Footer>
+    </Card>
+  );
+};
+
+InstructorContainer.defaultProps = {
+  instructor: {},
+};
+
+InstructorContainer.propTypes = {
+  instructor: PropTypes.shape({
+    bio: PropTypes.string,
+    image: PropTypes.string,
+    name: PropTypes.string,
+    organization: PropTypes.string,
+    title: PropTypes.string,
+  }),
+  idx: PropTypes.number.isRequired,
+  onDelete: PropTypes.func.isRequired,
+  onChange: PropTypes.func.isRequired,
+};
+
+export default InstructorContainer;
diff --git a/src/schedule-and-details/instructors-section/instructor-container/messages.js b/src/schedule-and-details/instructors-section/instructor-container/messages.js
new file mode 100644
index 0000000000..0d195108ad
--- /dev/null
+++ b/src/schedule-and-details/instructors-section/instructor-container/messages.js
@@ -0,0 +1,70 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  instructorNameLabel: {
+    id: 'course-authoring.schedule-section.instructor.name.label',
+    defaultMessage: 'Name',
+  },
+  instructorNameHelpText: {
+    id: 'course-authoring.schedule-section.instructor.name.help-text',
+    defaultMessage: 'Please add the instructor\'s name',
+  },
+  instructorNameInputPlaceholder: {
+    id: 'course-authoring.schedule-section.instructor.name.input.placeholder',
+    defaultMessage: 'Instructor name',
+  },
+  instructorTitleLabel: {
+    id: 'course-authoring.schedule-section.instructor.title.label',
+    defaultMessage: 'Title',
+  },
+  instructorTitleHelpText: {
+    id: 'course-authoring.schedule-section.instructor.title.help-text',
+    defaultMessage: 'Please add the instructor\'s title',
+  },
+  instructorTitleInputPlaceholder: {
+    id: 'course-authoring.schedule-section.instructor.title.input.placeholder',
+    defaultMessage: 'Instructor title',
+  },
+  instructorOrganizationLabel: {
+    id: 'course-authoring.schedule-section.instructor.organization.label',
+    defaultMessage: 'Organization',
+  },
+  instructorOrganizationHelpText: {
+    id: 'course-authoring.schedule-section.instructor.organization.help-text',
+    defaultMessage: 'Please add the institute where the instructor is associated',
+  },
+  instructorOrganizationInputPlaceholder: {
+    id: 'course-authoring.schedule-section.instructor.organization.input.placeholder',
+    defaultMessage: 'Instructor organization',
+  },
+  instructorBioLabel: {
+    id: 'course-authoring.schedule-section.instructor.bio.label',
+    defaultMessage: 'Biography',
+  },
+  instructorBioHelpText: {
+    id: 'course-authoring.schedule-section.instructor.bio.help-text',
+    defaultMessage: 'Please add the instructor\'s biography',
+  },
+  instructorBioInputPlaceholder: {
+    id: 'course-authoring.schedule-section.instructor.bio.input.placeholder',
+    defaultMessage: 'Instructor biography',
+  },
+  instructorPhotoLabel: {
+    id: 'course-authoring.schedule-section.instructor.photo.label',
+    defaultMessage: 'Photo',
+  },
+  instructorPhotoHelpText: {
+    id: 'course-authoring.schedule-section.instructor.photo.help-text',
+    defaultMessage: 'Please add a photo of the instructor (Note: only JPEG or PNG format supported)',
+  },
+  instructorPhotoInputPlaceholder: {
+    id: 'course-authoring.schedule-section.instructor.photo.input.placeholder',
+    defaultMessage: 'Instructor photo URL',
+  },
+  instructorDelete: {
+    id: 'course-authoring.schedule-section.instructor.delete',
+    defaultMessage: 'Delete',
+  },
+});
+
+export default messages;
diff --git a/src/schedule-and-details/instructors-section/messages.js b/src/schedule-and-details/instructors-section/messages.js
new file mode 100644
index 0000000000..2a7e089ca1
--- /dev/null
+++ b/src/schedule-and-details/instructors-section/messages.js
@@ -0,0 +1,18 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  instructorsTitle: {
+    id: 'course-authoring.schedule-section.instructors.title',
+    defaultMessage: 'Instructors',
+  },
+  instructorsDescription: {
+    id: 'course-authoring.schedule-section.instructors.description',
+    defaultMessage: 'Add details about the instructors for this course',
+  },
+  instructorAdd: {
+    id: 'course-authoring.schedule-section.instructors.add-instructor',
+    defaultMessage: 'Add Instructor',
+  },
+});
+
+export default messages;
diff --git a/src/schedule-and-details/introducing-section/IntroducingSection.scss b/src/schedule-and-details/introducing-section/IntroducingSection.scss
new file mode 100644
index 0000000000..e95a5d6e26
--- /dev/null
+++ b/src/schedule-and-details/introducing-section/IntroducingSection.scss
@@ -0,0 +1,7 @@
+@import "./introduction-video/IntroductionVideo";
+
+.introducing-section {
+  .form-group-custom:not(:last-child) {
+    margin-bottom: 2rem;
+  }
+}
diff --git a/src/schedule-and-details/introducing-section/IntroducingSection.test.jsx b/src/schedule-and-details/introducing-section/IntroducingSection.test.jsx
new file mode 100644
index 0000000000..9b7dd765f2
--- /dev/null
+++ b/src/schedule-and-details/introducing-section/IntroducingSection.test.jsx
@@ -0,0 +1,102 @@
+import React from 'react';
+import { AppProvider } from '@edx/frontend-platform/react';
+import { render } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { initializeMockApp } from '@edx/frontend-platform';
+
+import initializeStore from '../../store';
+import { courseSettingsMock, courseDetailsMock } from '../__mocks__';
+import messages from './messages';
+import IntroducingSection from '.';
+
+// Mock the tinymce lib
+jest.mock('@tinymce/tinymce-react', () => {
+  const originalModule = jest.requireActual('@tinymce/tinymce-react');
+  return {
+    __esModule: true,
+    ...originalModule,
+    Editor: () => 'foo bar',
+  };
+});
+
+// Mock the TinyMceWidget
+jest.mock('../../editors/sharedComponents/TinyMceWidget', () => ({
+  __esModule: true, // Required to mock a default export
+  default: () => <div>Widget</div>,
+  prepareEditorRef: jest.fn(() => ({
+    refReady: true,
+    setEditorRef: jest.fn().mockName('prepareEditorRef.setEditorRef'),
+  })),
+}));
+
+let store;
+const onChangeMock = jest.fn();
+const RootWrapper = (props) => (
+  <IntlProvider locale="en">
+    <AppProvider store={store}>
+      <IntroducingSection {...props} />
+    </AppProvider>
+  </IntlProvider>
+);
+
+const {
+  overview,
+  introVideo,
+  aboutSidebarHtml,
+  shortDescription,
+  courseImageAssetPath,
+} = courseDetailsMock;
+
+const {
+  aboutPageEditable, sidebarHtmlEnabled, shortDescriptionEditable, lmsLinkForAboutPage,
+} = courseSettingsMock;
+
+const props = {
+  intl: {},
+  courseId: 'foo-course-id',
+  overview,
+  introVideo,
+  aboutSidebarHtml,
+  shortDescription,
+  aboutPageEditable,
+  sidebarHtmlEnabled,
+  lmsLinkForAboutPage,
+  courseImageAssetPath,
+  shortDescriptionEditable,
+  onChange: onChangeMock,
+};
+
+describe('<IntroducingSection />', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+
+    store = initializeStore();
+  });
+
+  it('renders successfully', () => {
+    const { getByText, getByLabelText } = render(<RootWrapper {...props} />);
+    expect(getByText(messages.introducingTitle.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.introducingDescription.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.courseShortDescriptionLabel.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.courseShortDescriptionHelpText.defaultMessage)).toBeInTheDocument();
+    expect(getByLabelText(messages.courseShortDescriptionLabel.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.courseOverviewLabel.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.courseAboutSidebarLabel.defaultMessage)).toBeInTheDocument();
+  });
+
+  it('should hide components if aboutPageEditable is false', () => {
+    const initialProps = { ...props, aboutPageEditable: false };
+    const { queryAllByText } = render(<RootWrapper {...initialProps} />);
+    expect(queryAllByText(messages.introducingTitle.defaultMessage).length).toBe(0);
+    expect(queryAllByText(messages.introducingDescription.defaultMessage).length).toBe(0);
+    expect(queryAllByText(messages.courseOverviewLabel.defaultMessage).length).toBe(0);
+    expect(queryAllByText(messages.courseAboutSidebarLabel.defaultMessage).length).toBe(0);
+  });
+});
diff --git a/src/schedule-and-details/introducing-section/extended-course-details/ExtendedCourseDetails.test.jsx b/src/schedule-and-details/introducing-section/extended-course-details/ExtendedCourseDetails.test.jsx
new file mode 100644
index 0000000000..b3d4fbc708
--- /dev/null
+++ b/src/schedule-and-details/introducing-section/extended-course-details/ExtendedCourseDetails.test.jsx
@@ -0,0 +1,67 @@
+import React from 'react';
+import { fireEvent, render, act } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import { courseDetailsMock } from '../../__mocks__';
+import messages from './messages';
+import ExtendedCourseDetails from '.';
+
+// Mock the TextareaAutosize component
+jest.mock('react-textarea-autosize', () => jest.fn((props) => (
+  <textarea
+    {...props}
+    onFocus={() => {}}
+    onBlur={() => {}}
+  />
+)));
+
+const onChangeMock = jest.fn();
+
+const RootWrapper = (props) => (
+  <IntlProvider locale="en">
+    <ExtendedCourseDetails {...props} />
+  </IntlProvider>
+);
+
+const props = {
+  title: courseDetailsMock.title,
+  subtitle: courseDetailsMock.subtitle,
+  duration: courseDetailsMock.duration,
+  description: courseDetailsMock.description,
+  onChange: onChangeMock,
+};
+
+describe('<ExtendedCourseDetails />', () => {
+  it('renders successfully', () => {
+    const { getByText, getByLabelText } = render(<RootWrapper {...props} />);
+    expect(getByLabelText(messages.extendedTitleLabel.defaultMessage)).toBeInTheDocument();
+    expect(getByLabelText(messages.extendedSubtitleLabel.defaultMessage)).toBeInTheDocument();
+    expect(getByLabelText(messages.extendedDurationLabel.defaultMessage)).toBeInTheDocument();
+    expect(getByLabelText(messages.extendedDescriptionLabel.defaultMessage)).toBeInTheDocument();
+
+    expect(getByText(messages.extendedTitleHelpText.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.extendedSubtitleHelpText.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.extendedDurationHelpText.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.extendedDescriptionHelpText.defaultMessage)).toBeInTheDocument();
+  });
+
+  it('should display input values', () => {
+    const { getByDisplayValue } = render(
+      <RootWrapper {...props} />,
+    );
+
+    expect(getByDisplayValue(props.title)).toBeInTheDocument();
+    expect(getByDisplayValue(props.subtitle)).toBeInTheDocument();
+    expect(getByDisplayValue(props.duration)).toBeInTheDocument();
+    expect(getByDisplayValue(props.description)).toBeInTheDocument();
+  });
+
+  it('should call onChange if input value changed', async () => {
+    const { getByLabelText } = render(<RootWrapper {...props} />);
+    const input = getByLabelText(messages.extendedTitleAriaLabel.defaultMessage);
+    act(() => {
+      fireEvent.change(input, { target: { value: 'abc' } });
+    });
+    expect(onChangeMock).toHaveBeenCalledWith('abc', 'title');
+  });
+});
diff --git a/src/schedule-and-details/introducing-section/extended-course-details/index.jsx b/src/schedule-and-details/introducing-section/extended-course-details/index.jsx
new file mode 100644
index 0000000000..53f37f19dd
--- /dev/null
+++ b/src/schedule-and-details/introducing-section/extended-course-details/index.jsx
@@ -0,0 +1,87 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import TextareaAutosize from 'react-textarea-autosize';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Form } from '@openedx/paragon';
+
+import messages from './messages';
+
+const ExtendedCourseDetails = ({
+  title,
+  subtitle,
+  duration,
+  description,
+  onChange,
+}) => {
+  const intl = useIntl();
+  const paramsForExtendedFields = [
+    {
+      value: title,
+      label: intl.formatMessage(messages.extendedTitleLabel),
+      helpText: intl.formatMessage(messages.extendedTitleHelpText),
+      ariaLabel: intl.formatMessage(messages.extendedTitleAriaLabel),
+      controlName: 'title',
+      maxLength: 50,
+    },
+    {
+      value: subtitle,
+      label: intl.formatMessage(messages.extendedSubtitleLabel),
+      helpText: intl.formatMessage(messages.extendedSubtitleHelpText),
+      ariaLabel: intl.formatMessage(messages.extendedSubtitleAriaLabel),
+      controlName: 'subtitle',
+      maxLength: 150,
+    },
+    {
+      value: duration,
+      label: intl.formatMessage(messages.extendedDurationLabel),
+      helpText: intl.formatMessage(messages.extendedDurationHelpText),
+      ariaLabel: intl.formatMessage(messages.extendedDurationAriaLabel),
+      controlName: 'duration',
+      maxLength: 50,
+    },
+    {
+      value: description,
+      label: intl.formatMessage(messages.extendedDescriptionLabel),
+      helpText: intl.formatMessage(messages.extendedDescriptionHelpText),
+      ariaLabel: intl.formatMessage(messages.extendedDescriptionAriaLabel),
+      controlName: 'description',
+      maxLength: 1000,
+      asTextarea: true,
+    },
+  ];
+  return (
+    <>
+      {paramsForExtendedFields.map((param) => (
+        <Form.Group className="form-group-custom" key={param.label}>
+          <Form.Label>{param.label}</Form.Label>
+          <Form.Control
+            as={param.asTextarea ? TextareaAutosize : 'input'}
+            value={param.value}
+            name={param.controlName}
+            maxLength={param.maxLength}
+            onChange={(e) => onChange(e.target.value, param.controlName)}
+            aria-label={param.ariaLabel}
+          />
+          <Form.Control.Feedback>{param.helpText}</Form.Control.Feedback>
+        </Form.Group>
+      ))}
+    </>
+  );
+};
+
+ExtendedCourseDetails.defaultProps = {
+  title: '',
+  subtitle: '',
+  duration: '',
+  description: '',
+};
+
+ExtendedCourseDetails.propTypes = {
+  title: PropTypes.string,
+  subtitle: PropTypes.string,
+  duration: PropTypes.string,
+  description: PropTypes.string,
+  onChange: PropTypes.func.isRequired,
+};
+
+export default ExtendedCourseDetails;
diff --git a/src/schedule-and-details/introducing-section/extended-course-details/messages.js b/src/schedule-and-details/introducing-section/extended-course-details/messages.js
new file mode 100644
index 0000000000..2d5f3fe641
--- /dev/null
+++ b/src/schedule-and-details/introducing-section/extended-course-details/messages.js
@@ -0,0 +1,54 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  extendedTitleLabel: {
+    id: 'course-authoring.schedule-section.introducing.title.label',
+    defaultMessage: 'Course title',
+  },
+  extendedTitleHelpText: {
+    id: 'course-authoring.schedule-section.introducing.title.help-text',
+    defaultMessage: 'Displayed as title on the course details page. Limit to 50 characters.',
+  },
+  extendedTitleAriaLabel: {
+    id: 'course-authoring.schedule-section.introducing.title.aria-label',
+    defaultMessage: 'Show course title',
+  },
+  extendedSubtitleLabel: {
+    id: 'course-authoring.schedule-section.introducing.subtitle.label',
+    defaultMessage: 'Course subtitle',
+  },
+  extendedSubtitleHelpText: {
+    id: 'course-authoring.schedule-section.introducing.subtitle.help-text',
+    defaultMessage: 'Displayed as subtitle on the course details page. Limit to 150 characters.',
+  },
+  extendedSubtitleAriaLabel: {
+    id: 'course-authoring.schedule-section.introducing.subtitle.aria-label',
+    defaultMessage: 'Show course subtitle',
+  },
+  extendedDurationLabel: {
+    id: 'course-authoring.schedule-section.introducing.duration.label',
+    defaultMessage: 'Course duration',
+  },
+  extendedDurationHelpText: {
+    id: 'course-authoring.schedule-section.introducing.duration.help-text',
+    defaultMessage: 'Displayed on the course details page. Limit to 50 characters.',
+  },
+  extendedDurationAriaLabel: {
+    id: 'course-authoring.schedule-section.introducing.duration.aria-label',
+    defaultMessage: 'Show course duration',
+  },
+  extendedDescriptionLabel: {
+    id: 'course-authoring.schedule-section.introducing.description.label',
+    defaultMessage: 'Course description',
+  },
+  extendedDescriptionHelpText: {
+    id: 'course-authoring.schedule-section.introducing.description.help-text',
+    defaultMessage: 'Displayed on the course details page. Limit to 1000 characters.',
+  },
+  extendedDescriptionAriaLabel: {
+    id: 'course-authoring.schedule-section.introducing.description.aria-label',
+    defaultMessage: 'Show course description',
+  },
+});
+
+export default messages;
diff --git a/src/schedule-and-details/introducing-section/index.jsx b/src/schedule-and-details/introducing-section/index.jsx
new file mode 100644
index 0000000000..c221e0860c
--- /dev/null
+++ b/src/schedule-and-details/introducing-section/index.jsx
@@ -0,0 +1,205 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  injectIntl,
+  intlShape,
+  FormattedMessage,
+} from '@edx/frontend-platform/i18n';
+import { Form, Hyperlink } from '@openedx/paragon';
+
+import CourseUploadImage from '../../generic/course-upload-image';
+import { WysiwygEditor } from '../../generic/WysiwygEditor';
+import SectionSubHeader from '../../generic/section-sub-header';
+import IntroductionVideo from './introduction-video';
+import ExtendedCourseDetails from './extended-course-details';
+import messages from './messages';
+
+const IntroducingSection = ({
+  intl,
+  title,
+  subtitle,
+  duration,
+  overview,
+  introVideo,
+  description,
+  aboutSidebarHtml,
+  shortDescription,
+  aboutPageEditable,
+  sidebarHtmlEnabled,
+  lmsLinkForAboutPage,
+  courseImageAssetPath,
+  bannerImageAssetPath,
+  shortDescriptionEditable,
+  enableExtendedCourseDetails,
+  videoThumbnailImageAssetPath,
+  onChange,
+}) => {
+  const overviewHelpText = (
+    <FormattedMessage
+      id="course-authoring.schedule-section.introducing.course-overview.help-text"
+      defaultMessage="Introductions, prerequisites, FAQs that are used on {hyperlink} (formatted in HTML)"
+      values={{
+        hyperlink: (
+          <Hyperlink
+            destination={lmsLinkForAboutPage}
+            target="_blank"
+            showLaunchIcon={false}
+          >
+            {intl.formatMessage(messages.courseAboutHyperlink)}
+          </Hyperlink>
+        ),
+      }}
+    />
+  );
+
+  const aboutSidebarHelpText = (
+    <FormattedMessage
+      id="course-authoring.schedule-section.introducing.about-sidebar.help-text"
+      defaultMessage="Custom sidebar content for {hyperlink} (formatted in HTML)"
+      values={{
+        hyperlink: (
+          <Hyperlink
+            destination={lmsLinkForAboutPage}
+            target="_blank"
+            showLaunchIcon={false}
+          >
+            {intl.formatMessage(messages.courseAboutHyperlink)}
+          </Hyperlink>
+        ),
+      }}
+    />
+  );
+
+  return (
+    <section className="section-container introducing-section">
+      {aboutPageEditable && (
+        <SectionSubHeader
+          title={intl.formatMessage(messages.introducingTitle)}
+          description={intl.formatMessage(messages.introducingDescription)}
+        />
+      )}
+      {enableExtendedCourseDetails && (
+        <ExtendedCourseDetails
+          title={title}
+          subtitle={subtitle}
+          duration={duration}
+          description={description}
+          onChange={onChange}
+        />
+      )}
+      {shortDescriptionEditable && (
+        <Form.Group className="form-group-custom">
+          <Form.Label>
+            {intl.formatMessage(messages.courseShortDescriptionLabel)}
+          </Form.Label>
+          <Form.Control
+            as="textarea"
+            value={shortDescription}
+            name="shortDescription"
+            onChange={(e) => onChange(e.target.value, 'shortDescription')}
+            aria-label={intl.formatMessage(
+              messages.courseShortDescriptionAriaLabel,
+            )}
+            maxLength={150}
+          />
+          <Form.Control.Feedback>
+            {intl.formatMessage(messages.courseShortDescriptionHelpText)}
+          </Form.Control.Feedback>
+        </Form.Group>
+      )}
+      {aboutPageEditable && (
+        <>
+          <Form.Group className="form-group-custom">
+            <Form.Label>{intl.formatMessage(messages.courseOverviewLabel)}</Form.Label>
+            <WysiwygEditor
+              initialValue={overview}
+              onChange={(value) => onChange(value, 'overview')}
+            />
+            <Form.Control.Feedback>{overviewHelpText}</Form.Control.Feedback>
+          </Form.Group>
+          {sidebarHtmlEnabled && (
+            <Form.Group className="form-group-custom">
+              <Form.Label>{intl.formatMessage(messages.courseAboutSidebarLabel)}</Form.Label>
+              <WysiwygEditor
+                initialValue={aboutSidebarHtml}
+                onChange={(value) => onChange(value, 'aboutSidebarHtml')}
+              />
+              <Form.Control.Feedback>{aboutSidebarHelpText}</Form.Control.Feedback>
+            </Form.Group>
+          )}
+          <CourseUploadImage
+            label={intl.formatMessage(messages.courseCardImageLabel)}
+            identifierFieldText={intl.formatMessage(messages.courseCardImageIdentifierText)}
+            assetImagePath={courseImageAssetPath}
+            assetImageField="courseImageAssetPath"
+            imageNameField="courseImageName"
+            showImageBodyText
+            onChange={onChange}
+          />
+        </>
+      )}
+      {enableExtendedCourseDetails && (
+        <>
+          <CourseUploadImage
+            label={intl.formatMessage(messages.courseBannerImageLabel)}
+            identifierFieldText={intl.formatMessage(messages.courseBannerImageInsertText)}
+            assetImagePath={bannerImageAssetPath}
+            assetImageField="bannerImageAssetPath"
+            imageNameField="bannerImageName"
+            showImageBodyText
+            onChange={onChange}
+          />
+          <CourseUploadImage
+            label={intl.formatMessage(messages.courseVideoThumbnailLabel)}
+            identifierFieldText={intl.formatMessage(messages.courseVideoThumbnailInsertText)}
+            assetImagePath={videoThumbnailImageAssetPath}
+            assetImageField="videoThumbnailImageAssetPath"
+            imageNameField="videoThumbnailImageName"
+            showImageBodyText
+            onChange={onChange}
+          />
+        </>
+      )}
+      {aboutPageEditable && (
+        <IntroductionVideo introVideo={introVideo} onChange={onChange} />
+      )}
+    </section>
+  );
+};
+
+IntroducingSection.defaultProps = {
+  title: '',
+  subtitle: '',
+  duration: '',
+  description: '',
+  introVideo: '',
+  shortDescription: '',
+  aboutSidebarHtml: '',
+  courseImageAssetPath: '',
+  bannerImageAssetPath: '',
+  videoThumbnailImageAssetPath: '',
+  overview: '',
+};
+
+IntroducingSection.propTypes = {
+  intl: intlShape.isRequired,
+  title: PropTypes.string,
+  subtitle: PropTypes.string,
+  duration: PropTypes.string,
+  description: PropTypes.string,
+  overview: PropTypes.string,
+  introVideo: PropTypes.string,
+  aboutSidebarHtml: PropTypes.string,
+  shortDescription: PropTypes.string,
+  aboutPageEditable: PropTypes.bool.isRequired,
+  sidebarHtmlEnabled: PropTypes.bool.isRequired,
+  lmsLinkForAboutPage: PropTypes.string.isRequired,
+  courseImageAssetPath: PropTypes.string,
+  bannerImageAssetPath: PropTypes.string,
+  shortDescriptionEditable: PropTypes.bool.isRequired,
+  enableExtendedCourseDetails: PropTypes.bool.isRequired,
+  videoThumbnailImageAssetPath: PropTypes.string,
+  onChange: PropTypes.func.isRequired,
+};
+
+export default injectIntl(IntroducingSection);
diff --git a/src/schedule-and-details/introducing-section/introduction-video/IntroductionVideo.scss b/src/schedule-and-details/introducing-section/introduction-video/IntroductionVideo.scss
new file mode 100644
index 0000000000..55dfae6e7e
--- /dev/null
+++ b/src/schedule-and-details/introducing-section/introduction-video/IntroductionVideo.scss
@@ -0,0 +1,10 @@
+.embed-video-container {
+  @include pgn-box-shadow(1, "down");
+
+  border-radius: .1875rem;
+
+  .introduction-video {
+    padding: .75rem;
+    height: 23.375rem;
+  }
+}
diff --git a/src/schedule-and-details/introducing-section/introduction-video/IntroductionVideo.test.jsx b/src/schedule-and-details/introducing-section/introduction-video/IntroductionVideo.test.jsx
new file mode 100644
index 0000000000..28a8df35b2
--- /dev/null
+++ b/src/schedule-and-details/introducing-section/introduction-video/IntroductionVideo.test.jsx
@@ -0,0 +1,65 @@
+import React from 'react';
+import { act, render, fireEvent } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import { courseDetailsMock } from '../../__mocks__';
+import messages from './messages';
+import IntroductionVideo from '.';
+
+describe('<IntroductionVideo />', () => {
+  const onChangeMock = jest.fn();
+  const RootWrapper = (props) => (
+    <IntlProvider locale="en">
+      <IntroductionVideo {...props} />
+    </IntlProvider>
+  );
+
+  const props = {
+    intl: {},
+    introVideo: courseDetailsMock.introVideo,
+    onChange: onChangeMock,
+  };
+
+  it('renders successfully', () => {
+    const {
+      getByText, getByPlaceholderText, getByRole, getByTitle,
+    } = render(
+      <RootWrapper {...props} />,
+    );
+    expect(
+      getByText(messages.courseIntroductionVideoLabel.defaultMessage),
+    ).toBeInTheDocument();
+    expect(
+      getByText(messages.courseIntroductionVideoHelpText.defaultMessage),
+    ).toBeInTheDocument();
+    expect(
+      getByPlaceholderText(messages.courseIntroductionVideoPlaceholder.defaultMessage),
+    ).toBeInTheDocument();
+    expect(
+      getByRole('button', { name: messages.courseIntroductionVideoDelete.defaultMessage }),
+    ).toBeInTheDocument();
+    expect(getByTitle(messages.courseIntroductionVideoLabel.defaultMessage)).toBeInTheDocument();
+  });
+
+  it('should call onChange if video input id changed', async () => {
+    const { getByPlaceholderText } = render(<RootWrapper {...props} />);
+    const input = getByPlaceholderText(
+      messages.courseIntroductionVideoPlaceholder.defaultMessage,
+    );
+    act(() => {
+      fireEvent.change(input, { target: { value: '/assets' } });
+    });
+    expect(onChangeMock).toHaveBeenCalledWith(
+      '/assets',
+      'introVideo',
+    );
+  });
+
+  it('should clear video input if button delete clicked', () => {
+    const initialProps = { ...props, introVideo: 'BvgNgTPTkSo' };
+    const { getByRole } = render(<RootWrapper {...initialProps} />);
+    const button = getByRole('button', { name: messages.courseIntroductionVideoDelete.defaultMessage });
+    fireEvent.click(button);
+    expect(onChangeMock).toHaveBeenCalledWith('', 'introVideo');
+  });
+});
diff --git a/src/schedule-and-details/introducing-section/introduction-video/index.jsx b/src/schedule-and-details/introducing-section/introduction-video/index.jsx
new file mode 100644
index 0000000000..e8c8272cef
--- /dev/null
+++ b/src/schedule-and-details/introducing-section/introduction-video/index.jsx
@@ -0,0 +1,64 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Form, Button, Card } from '@openedx/paragon';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+
+import messages from './messages';
+
+const IntroductionVideo = ({ intl, introVideo, onChange }) => {
+  const embedVideoUrl = introVideo
+    ? `//www.youtube.com/embed/${introVideo}`
+    : '';
+
+  return (
+    <Form.Group className="form-group-custom">
+      <Form.Label>
+        {intl.formatMessage(messages.courseIntroductionVideoLabel)}
+      </Form.Label>
+      <Card>
+        <Card.Body className="embed-video-container">
+          <div className="introduction-video">
+            <iframe
+              title={intl.formatMessage(messages.courseIntroductionVideoLabel)}
+              width="618"
+              height="350"
+              src={embedVideoUrl}
+              frameBorder="0"
+              allowFullScreen
+            />
+          </div>
+        </Card.Body>
+        <Card.Divider />
+        <Card.Footer className="p-2.5">
+          <Form.Control
+            value={introVideo || ''}
+            placeholder={intl.formatMessage(messages.courseIntroductionVideoPlaceholder)}
+            onChange={(e) => onChange(e.target.value, 'introVideo')}
+          />
+          <Button
+            variant="outline-primary"
+            onClick={() => onChange('', 'introVideo')}
+            disabled={!introVideo}
+          >
+            {intl.formatMessage(messages.courseIntroductionVideoDelete)}
+          </Button>
+        </Card.Footer>
+      </Card>
+      <Form.Control.Feedback>
+        {intl.formatMessage(messages.courseIntroductionVideoHelpText)}
+      </Form.Control.Feedback>
+    </Form.Group>
+  );
+};
+
+IntroductionVideo.defaultProps = {
+  introVideo: '',
+};
+
+IntroductionVideo.propTypes = {
+  intl: intlShape.isRequired,
+  introVideo: PropTypes.string,
+  onChange: PropTypes.func.isRequired,
+};
+
+export default injectIntl(IntroductionVideo);
diff --git a/src/schedule-and-details/introducing-section/introduction-video/messages.js b/src/schedule-and-details/introducing-section/introduction-video/messages.js
new file mode 100644
index 0000000000..7189a531f7
--- /dev/null
+++ b/src/schedule-and-details/introducing-section/introduction-video/messages.js
@@ -0,0 +1,22 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  courseIntroductionVideoLabel: {
+    id: 'course-authoring.schedule-section.introducing.introduction-video.label',
+    defaultMessage: 'Course introduction video',
+  },
+  courseIntroductionVideoDelete: {
+    id: 'course-authoring.schedule-section.introducing.introduction-video.delete',
+    defaultMessage: 'Delete current video',
+  },
+  courseIntroductionVideoHelpText: {
+    id: 'course-authoring.schedule-section.introducing.introduction-video.help-text',
+    defaultMessage: 'Enter your YouTube video\'s ID (along with any restriction parameters)',
+  },
+  courseIntroductionVideoPlaceholder: {
+    id: 'course-authoring.schedule-section.introducing.introduction-video.placeholder',
+    defaultMessage: 'YouTube video ID',
+  },
+});
+
+export default messages;
diff --git a/src/schedule-and-details/introducing-section/messages.js b/src/schedule-and-details/introducing-section/messages.js
new file mode 100644
index 0000000000..6ae83ac025
--- /dev/null
+++ b/src/schedule-and-details/introducing-section/messages.js
@@ -0,0 +1,70 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  introducingTitle: {
+    id: 'course-authoring.schedule-section.introducing.title',
+    defaultMessage: 'Introducing your course',
+  },
+  introducingDescription: {
+    id: 'course-authoring.schedule-section.introducing.description',
+    defaultMessage: 'Information for prospective students',
+  },
+  courseShortDescriptionLabel: {
+    id: 'course-authoring.schedule-section.introducing.course-short-description.label',
+    defaultMessage: 'Course short description',
+  },
+  courseShortDescriptionAriaLabel: {
+    id: 'course-authoring.schedule-section.introducing.course-short-description.aria-label',
+    defaultMessage: 'Show course short description',
+  },
+  courseShortDescriptionHelpText: {
+    id: 'course-authoring.schedule-section.introducing.course-short-description.help-text',
+    defaultMessage: 'Appears on the course catalog page when students roll over the course name. Limit to ~150 characters',
+  },
+  courseOverviewLabel: {
+    id: 'course-authoring.schedule-section.introducing.course-overview.label',
+    defaultMessage: 'Course overview',
+  },
+  courseOverviewHelpText: {
+    id: 'course-authoring.schedule-section.introducing.course-overview.help-text',
+    defaultMessage: 'Introductions, prerequisites, FAQs that are used on {hyperlink} (formatted in HTML)',
+  },
+  courseAboutHyperlink: {
+    id: 'course-authoring.schedule-section.introducing.course-about.hyperlink',
+    defaultMessage: 'your course summary page',
+  },
+  courseAboutSidebarLabel: {
+    id: 'course-authoring.schedule-section.introducing.course-about-sidebar.label',
+    defaultMessage: 'Course about sidebar HTML',
+  },
+  courseAboutSidebarHelpText: {
+    id: 'course-authoring.schedule-section.introducing.course-about-sidebar.help-text',
+    defaultMessage: 'Custom sidebar content for {hyperlink} (formatted in HTML)',
+  },
+  courseCardImageLabel: {
+    id: 'course-authoring.schedule-section.introducing.course-card-image.label',
+    defaultMessage: 'Course card image',
+  },
+  courseCardImageIdentifierText: {
+    id: 'course-authoring.schedule-section.introducing.course-card-image.identifier-text',
+    defaultMessage: 'course image',
+  },
+  courseBannerImageLabel: {
+    id: 'course-authoring.schedule-section.introducing.course-banner-image.label',
+    defaultMessage: 'Course banner image',
+  },
+  courseBannerImageInsertText: {
+    id: 'course-authoring.schedule-section.introducing.course-banner-image.insert-banner',
+    defaultMessage: 'banner image',
+  },
+  courseVideoThumbnailLabel: {
+    id: 'course-authoring.schedule-section.introducing.video-thumbnail-image.label',
+    defaultMessage: 'Course video thumbnail image',
+  },
+  courseVideoThumbnailInsertText: {
+    id: 'course-authoring.schedule-section.introducing.video-thumbnail-image.insert-card',
+    defaultMessage: 'video thumbnail image',
+  },
+});
+
+export default messages;
diff --git a/src/schedule-and-details/learning-outcomes-section/InstructorsSection.test.jsx b/src/schedule-and-details/learning-outcomes-section/InstructorsSection.test.jsx
new file mode 100644
index 0000000000..298bf29232
--- /dev/null
+++ b/src/schedule-and-details/learning-outcomes-section/InstructorsSection.test.jsx
@@ -0,0 +1,67 @@
+import React from 'react';
+import {
+  act, fireEvent, render, waitFor,
+} from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import { courseDetailsMock } from '../__mocks__';
+import messages from './messages';
+import LearningOutcomesSection from '.';
+
+const onChangeMock = jest.fn();
+const RootWrapper = (props) => (
+  <IntlProvider locale="en">
+    <LearningOutcomesSection {...props} />
+  </IntlProvider>
+);
+
+const props = {
+  learningInfo: courseDetailsMock.learningInfo,
+  onChange: onChangeMock,
+};
+
+describe('<LearningOutcomesSection />', () => {
+  it('renders section successfully', () => {
+    const { getByText, getByRole } = render(<RootWrapper {...props} />);
+    expect(getByText(messages.outcomesTitle.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.outcomesDescription.defaultMessage)).toBeInTheDocument();
+    expect(getByRole('button', { name: messages.outcomesAdd.defaultMessage })).toBeInTheDocument();
+  });
+
+  it('should create another learning outcome form on click Add learning outcome', () => {
+    const { getAllByRole, getByRole } = render(<RootWrapper {...props} />);
+    const addButton = getByRole('button', { name: messages.outcomesAdd.defaultMessage });
+    act(() => {
+      fireEvent.click(addButton);
+    });
+
+    waitFor(() => {
+      const deleteButtons = getAllByRole('button', { name: messages.outcomesDelete.defaultMessage });
+      expect(deleteButtons.length).toBe(2);
+    });
+  });
+
+  it('should delete learning outcome form on click Delete', () => {
+    const { getAllByRole, getByRole } = render(<RootWrapper {...props} />);
+    const deleteButton = getByRole('button', { name: messages.outcomesDelete.defaultMessage });
+    act(() => {
+      fireEvent.click(deleteButton);
+    });
+
+    expect(onChangeMock).toHaveBeenCalledWith([], 'learningInfo');
+    waitFor(() => {
+      const deleteButtons = getAllByRole('button', { name: messages.outcomesDelete.defaultMessage });
+      expect(deleteButtons.length).toBe(0);
+    });
+  });
+
+  it('should call onChange if input value changed', () => {
+    const { getByPlaceholderText } = render(<RootWrapper {...props} />);
+    const input = getByPlaceholderText(messages.outcomesInputPlaceholder.defaultMessage);
+    act(() => {
+      fireEvent.change(input, { target: { value: 'abc' } });
+    });
+
+    expect(onChangeMock).toHaveBeenCalledWith(['abc'], 'learningInfo');
+  });
+});
diff --git a/src/schedule-and-details/learning-outcomes-section/LearningOutcomes.scss b/src/schedule-and-details/learning-outcomes-section/LearningOutcomes.scss
new file mode 100644
index 0000000000..13b761f01b
--- /dev/null
+++ b/src/schedule-and-details/learning-outcomes-section/LearningOutcomes.scss
@@ -0,0 +1,10 @@
+.learning-outcomes-section {
+  .learning-outcomes-list {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    padding-inline-start: 0;
+    list-style-type: none;
+    padding-top: $spacer;
+  }
+}
diff --git a/src/schedule-and-details/learning-outcomes-section/index.jsx b/src/schedule-and-details/learning-outcomes-section/index.jsx
new file mode 100644
index 0000000000..06409fd5bd
--- /dev/null
+++ b/src/schedule-and-details/learning-outcomes-section/index.jsx
@@ -0,0 +1,77 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Form, Button } from '@openedx/paragon';
+import { Add as AddIcon } from '@openedx/paragon/icons';
+
+import SectionSubHeader from '../../generic/section-sub-header';
+import messages from './messages';
+
+const LearningOutcomesSection = ({ learningInfo, onChange }) => {
+  const intl = useIntl();
+
+  const handleInputChange = (value, index) => {
+    const updatedInfo = [...learningInfo];
+    updatedInfo[index] = value;
+    onChange(updatedInfo, 'learningInfo');
+  };
+
+  const handleDelete = (index) => {
+    const updatedInfo = [...learningInfo];
+    updatedInfo.splice(index, 1);
+    onChange(updatedInfo, 'learningInfo');
+  };
+
+  const handleAdd = () => {
+    const updatedInfo = [...learningInfo, ''];
+    onChange(updatedInfo, 'learningInfo');
+  };
+
+  const renderLearningOutcomeItem = (text, idx) => (
+    <Form.Group
+      className="form-group-custom align-items-center d-flex"
+      key={idx}
+    >
+      <Form.Label isInline>
+        {intl.formatMessage(messages.outcomesLabelIncrement)} {idx + 1}
+      </Form.Label>
+      <Form.Control
+        value={text}
+        placeholder={intl.formatMessage(messages.outcomesInputPlaceholder)}
+        onChange={(e) => handleInputChange(e.target.value, idx)}
+      />
+      <Button
+        variant="outline-primary"
+        onClick={() => handleDelete(idx)}
+      >
+        {intl.formatMessage(messages.outcomesDelete)}
+      </Button>
+    </Form.Group>
+  );
+
+  return (
+    <section className="section-container learning-outcomes-section">
+      <SectionSubHeader
+        title={intl.formatMessage(messages.outcomesTitle)}
+        description={intl.formatMessage(messages.outcomesDescription)}
+      />
+      <ul className="learning-outcomes-list">
+        {learningInfo.map(renderLearningOutcomeItem)}
+      </ul>
+      <Button iconBefore={AddIcon} variant="primary" onClick={handleAdd}>
+        {intl.formatMessage(messages.outcomesAdd)}
+      </Button>
+    </section>
+  );
+};
+
+LearningOutcomesSection.defaultProps = {
+  learningInfo: [],
+};
+
+LearningOutcomesSection.propTypes = {
+  learningInfo: PropTypes.arrayOf(PropTypes.string),
+  onChange: PropTypes.func.isRequired,
+};
+
+export default LearningOutcomesSection;
diff --git a/src/schedule-and-details/learning-outcomes-section/messages.js b/src/schedule-and-details/learning-outcomes-section/messages.js
new file mode 100644
index 0000000000..d5b9105ef6
--- /dev/null
+++ b/src/schedule-and-details/learning-outcomes-section/messages.js
@@ -0,0 +1,30 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  outcomesTitle: {
+    id: 'course-authoring.schedule.learning-outcomes-section.title',
+    defaultMessage: 'Learning outcomes',
+  },
+  outcomesDescription: {
+    id: 'course-authoring.schedule.learning-outcomes-section.description',
+    defaultMessage: 'Add the learning outcomes for this course',
+  },
+  outcomesDelete: {
+    id: 'course-authoring.schedule.learning-outcomes-section.delete',
+    defaultMessage: 'Delete',
+  },
+  outcomesAdd: {
+    id: 'course-authoring.schedule.learning-outcomes-section.add',
+    defaultMessage: 'Add learning outcome',
+  },
+  outcomesInputPlaceholder: {
+    id: 'course-authoring.schedule.learning-outcomes-section.input.placeholder',
+    defaultMessage: 'Add a learning outcome here',
+  },
+  outcomesLabelIncrement: {
+    id: 'course-authoring.schedule.learning-outcomes-section.label-increment',
+    defaultMessage: 'Learning outcome',
+  },
+});
+
+export default messages;
diff --git a/src/schedule-and-details/license-section/LicenseSection.scss b/src/schedule-and-details/license-section/LicenseSection.scss
new file mode 100644
index 0000000000..ab5443192b
--- /dev/null
+++ b/src/schedule-and-details/license-section/LicenseSection.scss
@@ -0,0 +1,9 @@
+.license-section {
+  .license-option {
+    align-self: flex-start;
+  }
+
+  .license-option_clickable {
+    cursor: pointer;
+  }
+}
diff --git a/src/schedule-and-details/license-section/LicenseSection.test.jsx b/src/schedule-and-details/license-section/LicenseSection.test.jsx
new file mode 100644
index 0000000000..488d3d2c14
--- /dev/null
+++ b/src/schedule-and-details/license-section/LicenseSection.test.jsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import { courseDetailsMock } from '../__mocks__';
+import messages from './messages';
+import LicenseSection from '.';
+
+const onChangeMock = jest.fn();
+
+const RootWrapper = (props) => (
+  <IntlProvider locale="en">
+    <LicenseSection {...props} />
+  </IntlProvider>
+);
+
+const props = {
+  license: courseDetailsMock.license,
+  onChange: onChangeMock,
+};
+
+describe('<LicenseSection />', () => {
+  it('renders successfully', () => {
+    const { getByText } = render(<RootWrapper {...props} />);
+    expect(getByText(messages.licenseTitle.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.licenseDescription.defaultMessage)).toBeInTheDocument();
+  });
+});
diff --git a/src/schedule-and-details/license-section/constants.js b/src/schedule-and-details/license-section/constants.js
new file mode 100644
index 0000000000..b07043e575
--- /dev/null
+++ b/src/schedule-and-details/license-section/constants.js
@@ -0,0 +1,18 @@
+const creativeCommonsLicensesURL = 'https://creativecommons.org/licenses';
+const creativeCommonsVersion = '4.0';
+
+const LICENSE_TYPE = {
+  allRightsReserved: 'all-rights-reserved',
+  creativeCommons: 'creative-commons',
+};
+
+const LICENSE_COMMONS_OPTIONS = {
+  attribution: 'BY',
+  nonCommercial: 'NC',
+  noDerivatives: 'ND',
+  shareAlike: 'SA',
+};
+
+export {
+  LICENSE_TYPE, LICENSE_COMMONS_OPTIONS, creativeCommonsLicensesURL, creativeCommonsVersion,
+};
diff --git a/src/schedule-and-details/license-section/hooks.jsx b/src/schedule-and-details/license-section/hooks.jsx
new file mode 100644
index 0000000000..89a84e0918
--- /dev/null
+++ b/src/schedule-and-details/license-section/hooks.jsx
@@ -0,0 +1,112 @@
+import { useEffect, useState } from 'react';
+
+import { LICENSE_TYPE, LICENSE_COMMONS_OPTIONS, creativeCommonsVersion } from './constants';
+import { generateLicenseURL } from './utils';
+
+const useLicenseDetails = (license, onChange) => {
+  const [licenseType, setLicenseType] = useState(null);
+  const [licenseDetails, setLicenseDetails] = useState({});
+  const [licenseURL, setLicenseURL] = useState('');
+
+  const {
+    attribution, nonCommercial, noDerivatives, shareAlike,
+  } = LICENSE_COMMONS_OPTIONS;
+
+  const defaultLicenseDetails = {
+    attribution: true,
+    nonCommercial: true,
+    noDerivatives: true,
+    shareAlike: false,
+  };
+
+  const updateLicense = () => {
+    if (licenseType === LICENSE_TYPE.allRightsReserved) {
+      onChange(LICENSE_TYPE.allRightsReserved, 'license');
+    }
+
+    if (licenseType === LICENSE_TYPE.creativeCommons) {
+      const orderedDetails = Object.entries(licenseDetails)
+        .filter(([, value]) => value)
+        .map(([key]) => LICENSE_COMMONS_OPTIONS[key]);
+
+      const updatedString = `${
+        LICENSE_TYPE.creativeCommons
+      }: ver=${creativeCommonsVersion} ${orderedDetails.join(' ')}`;
+      onChange(updatedString, 'license');
+    }
+  };
+
+  useEffect(() => {
+    if (license?.includes(LICENSE_TYPE.creativeCommons)) {
+      setLicenseType(LICENSE_TYPE.creativeCommons);
+      setLicenseDetails((prevLicenseDetails) => ({
+        ...prevLicenseDetails,
+        attribution: license.includes(attribution),
+        nonCommercial: license.includes(nonCommercial),
+        noDerivatives: license.includes(noDerivatives),
+        shareAlike: license.includes(shareAlike),
+      }));
+    } else if (license?.includes(LICENSE_TYPE.allRightsReserved)) {
+      setLicenseType(LICENSE_TYPE.allRightsReserved);
+      setLicenseDetails({});
+    } else {
+      setLicenseType(null);
+      setLicenseDetails({});
+    }
+  }, [license]);
+
+  useEffect(() => {
+    setLicenseURL(
+      licenseType === LICENSE_TYPE.creativeCommons
+        ? generateLicenseURL(licenseDetails)
+        : '',
+    );
+    updateLicense();
+  }, [licenseType, licenseDetails]);
+
+  const handleToggleCheckbox = (option) => {
+    const toggledLicenseDetail = Object.keys(LICENSE_COMMONS_OPTIONS).find(
+      (key) => LICENSE_COMMONS_OPTIONS[key] === option,
+    );
+
+    setLicenseDetails((prev) => {
+      if (option === noDerivatives) {
+        return {
+          ...prev,
+          noDerivatives: !prev.noDerivatives,
+          shareAlike: false,
+        };
+      }
+
+      if (option === shareAlike) {
+        return {
+          ...prev,
+          shareAlike: !prev.shareAlike,
+          noDerivatives: false,
+        };
+      }
+
+      return {
+        ...prev,
+        [toggledLicenseDetail]: !prev[toggledLicenseDetail],
+      };
+    });
+  };
+
+  const handleChangeLicenseType = (type) => {
+    setLicenseType(type);
+    setLicenseDetails(
+      type === LICENSE_TYPE.creativeCommons ? defaultLicenseDetails : {},
+    );
+  };
+
+  return {
+    licenseURL,
+    licenseType,
+    licenseDetails,
+    handleToggleCheckbox,
+    handleChangeLicenseType,
+  };
+};
+
+export { useLicenseDetails };
diff --git a/src/schedule-and-details/license-section/index.jsx b/src/schedule-and-details/license-section/index.jsx
new file mode 100644
index 0000000000..08e28819ee
--- /dev/null
+++ b/src/schedule-and-details/license-section/index.jsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import SectionSubHeader from '../../generic/section-sub-header';
+import LicenseDisplay from './license-display';
+import LicenseSelector from './license-selector';
+import LicenseCommonsOptions from './license-commons-options';
+import { LICENSE_TYPE } from './constants';
+import messages from './messages';
+import { useLicenseDetails } from './hooks';
+
+const LicenseSection = ({ license, onChange }) => {
+  const intl = useIntl();
+  const {
+    licenseURL,
+    licenseType,
+    licenseDetails,
+    handleToggleCheckbox,
+    handleChangeLicenseType,
+  } = useLicenseDetails(license, onChange);
+
+  return (
+    <section className="section-container license-section">
+      <SectionSubHeader
+        title={intl.formatMessage(messages.licenseTitle)}
+        description={intl.formatMessage(messages.licenseDescription)}
+      />
+      <LicenseSelector
+        licenseType={licenseType}
+        onChangeLicenseType={handleChangeLicenseType}
+      />
+      {licenseType === LICENSE_TYPE.creativeCommons && (
+        <LicenseCommonsOptions
+          licenseDetails={licenseDetails}
+          onToggleCheckbox={handleToggleCheckbox}
+        />
+      )}
+      <LicenseDisplay
+        licenseURL={licenseURL}
+        licenseType={licenseType}
+        licenseDetails={licenseDetails}
+      />
+    </section>
+  );
+};
+
+LicenseSection.defaultProps = {
+  license: null,
+};
+
+LicenseSection.propTypes = {
+  license: PropTypes.string,
+  onChange: PropTypes.func.isRequired,
+};
+
+export default LicenseSection;
diff --git a/src/schedule-and-details/license-section/license-commons-options/LicenseCommonsOptions.test.jsx b/src/schedule-and-details/license-section/license-commons-options/LicenseCommonsOptions.test.jsx
new file mode 100644
index 0000000000..5691049e45
--- /dev/null
+++ b/src/schedule-and-details/license-section/license-commons-options/LicenseCommonsOptions.test.jsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import {
+  render, fireEvent, act, waitFor,
+} from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import { LICENSE_COMMONS_OPTIONS } from '../constants';
+import messages from './messages';
+import LicenseCommonsOptions from '.';
+
+const onToggleCheckboxMock = jest.fn();
+
+const RootWrapper = (props) => (
+  <IntlProvider locale="en">
+    <LicenseCommonsOptions {...props} />
+  </IntlProvider>
+);
+
+const props = {
+  licenseDetails: {
+    attribution: true,
+    nonCommercial: true,
+    noDerivatives: true,
+    shareAlike: false,
+  },
+  onToggleCheckbox: onToggleCheckboxMock,
+};
+
+describe('<LicenseCommonsOptions />', () => {
+  it('renders successfully', () => {
+    const { getByText, getAllByRole } = render(<RootWrapper {...props} />);
+    expect(getByText(messages.licenseCreativeOptionsLabel.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.licenseCreativeOptionsHelpText.defaultMessage)).toBeInTheDocument();
+    expect(getAllByRole('checkbox').length).toBe(4);
+  });
+
+  it('should render checkbox list correct', () => {
+    const { getAllByRole } = render(<RootWrapper {...props} />);
+    const checkboxList = getAllByRole('checkbox');
+    expect(checkboxList[0].checked).toBeTruthy();
+    expect(checkboxList[0].disabled).toBeTruthy();
+    expect(checkboxList[1].checked).toBeTruthy();
+    expect(checkboxList[2].checked).toBeTruthy();
+    expect(checkboxList[3].checked).toBeFalsy();
+  });
+
+  it('should call onToggleCheckbox event onClick', () => {
+    const { getAllByRole } = render(<RootWrapper {...props} />);
+    const checkboxList = getAllByRole('checkbox');
+    act(() => {
+      fireEvent.click(checkboxList[1]);
+    });
+    expect(props.onToggleCheckbox).toHaveBeenCalledWith(LICENSE_COMMONS_OPTIONS.nonCommercial);
+    waitFor(() => {
+      expect(checkboxList[1].checked).toBeFalsy();
+    });
+  });
+});
diff --git a/src/schedule-and-details/license-section/license-commons-options/index.jsx b/src/schedule-and-details/license-section/license-commons-options/index.jsx
new file mode 100644
index 0000000000..092937cc9d
--- /dev/null
+++ b/src/schedule-and-details/license-section/license-commons-options/index.jsx
@@ -0,0 +1,99 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import {
+  ActionRow, Form, Stack, CheckboxControl,
+} from '@openedx/paragon';
+
+import { LICENSE_COMMONS_OPTIONS } from '../constants';
+import messages from './messages';
+
+const LicenseCommonsOptions = ({ licenseDetails, onToggleCheckbox }) => {
+  const optionDetails = [
+    {
+      id: LICENSE_COMMONS_OPTIONS.attribution,
+      label: messages.licenseCreativeOptionBYLabel,
+      description: messages.licenseCreativeOptionBYDescription,
+      disabled: true,
+      checked: licenseDetails.attribution,
+    },
+    {
+      id: LICENSE_COMMONS_OPTIONS.nonCommercial,
+      label: messages.licenseCreativeOptionNCLabel,
+      description: messages.licenseCreativeOptionNCDescription,
+      disabled: false,
+      checked: licenseDetails.nonCommercial,
+    },
+    {
+      id: LICENSE_COMMONS_OPTIONS.noDerivatives,
+      label: messages.licenseCreativeOptionNDLabel,
+      description: messages.licenseCreativeOptionNDDescription,
+      disabled: false,
+      checked: licenseDetails.noDerivatives,
+    },
+    {
+      id: LICENSE_COMMONS_OPTIONS.shareAlike,
+      label: messages.licenseCreativeOptionSALabel,
+      description: messages.licenseCreativeOptionSADescription,
+      disabled: false,
+      checked: licenseDetails.shareAlike,
+    },
+  ];
+
+  const handleCheckboxClick = (option) => {
+    if (!option.disabled) {
+      onToggleCheckbox(option.id);
+    }
+  };
+
+  return (
+    <div className="p-2 mb-2.5">
+      <p className="text-black">
+        <FormattedMessage {...messages.licenseCreativeOptionsLabel} />
+      </p>
+      <p className="small">
+        <FormattedMessage {...messages.licenseCreativeOptionsHelpText} />
+      </p>
+      <Stack gap={1}>
+        {optionDetails.map((option) => (
+          <Form.Group
+            key={option.id}
+            className={classNames('license-option', {
+              'license-option_clickable': !option.disabled,
+            })}
+            onClick={() => handleCheckboxClick(option)}
+          >
+            <ActionRow>
+              <CheckboxControl
+                checked={option.checked}
+                disabled={option.disabled}
+                className="p-1"
+                readOnly
+              />
+              <p className="col-2 text-gray-700 pl-0 ml-0">
+                <FormattedMessage {...option.label} />
+              </p>
+              <ActionRow.Spacer />
+              <p className="small mt-1 text-gray-700">
+                <FormattedMessage {...option.description} />
+              </p>
+            </ActionRow>
+          </Form.Group>
+        ))}
+      </Stack>
+    </div>
+  );
+};
+
+LicenseCommonsOptions.propTypes = {
+  licenseDetails: PropTypes.shape({
+    attribution: PropTypes.bool.isRequired,
+    nonCommercial: PropTypes.bool.isRequired,
+    noDerivatives: PropTypes.bool.isRequired,
+    shareAlike: PropTypes.bool.isRequired,
+  }).isRequired,
+  onToggleCheckbox: PropTypes.func.isRequired,
+};
+
+export default LicenseCommonsOptions;
diff --git a/src/schedule-and-details/license-section/license-commons-options/messages.js b/src/schedule-and-details/license-section/license-commons-options/messages.js
new file mode 100644
index 0000000000..65e67d24e5
--- /dev/null
+++ b/src/schedule-and-details/license-section/license-commons-options/messages.js
@@ -0,0 +1,46 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  licenseCreativeOptionsLabel: {
+    id: 'course-authoring.schedule-section.license.creative-commons.options.label',
+    defaultMessage: 'Options for creative commons',
+  },
+  licenseCreativeOptionsHelpText: {
+    id: 'course-authoring.schedule-section.license.creative-commons.options.help-text',
+    defaultMessage: 'The following options are available for the creative commons license.',
+  },
+  licenseCreativeOptionBYLabel: {
+    id: 'course-authoring.schedule-section.license.creative-commons.option.BY.label',
+    defaultMessage: 'Attribution',
+  },
+  licenseCreativeOptionBYDescription: {
+    id: 'course-authoring.schedule-section.license.creative-commons.option.BY.description',
+    defaultMessage: 'Allow others to copy, distribute, display and perform your copyrighted work but only if they give credit the way you request. Currently, this option is required.',
+  },
+  licenseCreativeOptionNCLabel: {
+    id: 'course-authoring.schedule-section.license.creative-commons.option.NC.label',
+    defaultMessage: 'Noncommercial',
+  },
+  licenseCreativeOptionNCDescription: {
+    id: 'course-authoring.schedule-section.license.creative-commons.option.NC.description',
+    defaultMessage: ' Allow others to copy, distribute, display and perform your work - and derivative works based upon it - but for noncommercial purposes only.',
+  },
+  licenseCreativeOptionNDLabel: {
+    id: 'course-authoring.schedule-section.license.creative-commons.option.ND.label',
+    defaultMessage: 'No derivatives',
+  },
+  licenseCreativeOptionNDDescription: {
+    id: 'course-authoring.schedule-section.license.creative-commons.option.ND.description',
+    defaultMessage: 'Allow others to copy, distribute, display and perform only verbatim copies of your work, not derivative works based upon it. This option is incompatible with "Share Alike".',
+  },
+  licenseCreativeOptionSALabel: {
+    id: 'course-authoring.schedule-section.license.creative-commons.option.SA.label',
+    defaultMessage: 'Share alike',
+  },
+  licenseCreativeOptionSADescription: {
+    id: 'course-authoring.schedule-section.license.creative-commons.option.SA.description',
+    defaultMessage: 'Allow others to distribute derivative works only under a license identical to the license that governs your work. This option is incompatible with "No Derivatives".',
+  },
+});
+
+export default messages;
diff --git a/src/schedule-and-details/license-section/license-display/LicenseDisplay.test.jsx b/src/schedule-and-details/license-section/license-display/LicenseDisplay.test.jsx
new file mode 100644
index 0000000000..5bdb8dbaad
--- /dev/null
+++ b/src/schedule-and-details/license-section/license-display/LicenseDisplay.test.jsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import {
+  render,
+} from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import { LICENSE_TYPE } from '../constants';
+import messages from './messages';
+import LicenseDisplay from '.';
+
+const RootWrapper = (props) => (
+  <IntlProvider locale="en">
+    <LicenseDisplay {...props} />
+  </IntlProvider>
+);
+
+const props = {
+  licenseType: LICENSE_TYPE.allRightsReserved,
+  licenseDetails: {},
+  licenseURL: 'link://to-license.ua',
+};
+
+describe('<LicenseDisplay />', () => {
+  it('renders successfully', () => {
+    const { getByText, queryAllByRole } = render(<RootWrapper {...props} />);
+    expect(getByText(messages.licenseDisplayLabel.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.licenseDisplayParagraph.defaultMessage)).toBeInTheDocument();
+    expect(queryAllByRole('img', { hidden: true }).length).toBe(1);
+  });
+});
diff --git a/src/schedule-and-details/license-section/license-display/index.jsx b/src/schedule-and-details/license-section/license-display/index.jsx
new file mode 100644
index 0000000000..cbefdd689d
--- /dev/null
+++ b/src/schedule-and-details/license-section/license-display/index.jsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import { Form } from '@openedx/paragon';
+
+import { LICENSE_TYPE } from '../constants';
+import LicenseIcons from '../license-icons';
+import messages from './messages';
+
+const LicenseDisplay = ({ licenseType, licenseDetails, licenseURL }) => (
+  <Form.Group className="p-2 mb-2.5">
+    <p className="text-black mb-2.5">
+      <FormattedMessage {...messages.licenseDisplayLabel} />
+    </p>
+    <p className="small text-gray-700">
+      <FormattedMessage {...messages.licenseDisplayParagraph} />
+    </p>
+    <LicenseIcons
+      licenseType={licenseType}
+      licenseDetails={licenseDetails}
+      licenseURL={licenseURL}
+    />
+  </Form.Group>
+);
+
+LicenseDisplay.defaultProps = {
+  licenseURL: '',
+  licenseType: null,
+  licenseDetails: {},
+};
+
+LicenseDisplay.propTypes = {
+  licenseType: PropTypes.oneOf(Object.values(LICENSE_TYPE)),
+  licenseDetails: PropTypes.shape({
+    attribution: PropTypes.bool,
+    nonCommercial: PropTypes.bool,
+    noDerivatives: PropTypes.bool,
+    shareAlike: PropTypes.bool,
+  }),
+  licenseURL: PropTypes.string,
+};
+
+export default LicenseDisplay;
diff --git a/src/schedule-and-details/license-section/license-display/messages.js b/src/schedule-and-details/license-section/license-display/messages.js
new file mode 100644
index 0000000000..f9e7369e4b
--- /dev/null
+++ b/src/schedule-and-details/license-section/license-display/messages.js
@@ -0,0 +1,14 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  licenseDisplayLabel: {
+    id: 'course-authoring.schedule-section.license.license-display.label',
+    defaultMessage: 'License display',
+  },
+  licenseDisplayParagraph: {
+    id: 'course-authoring.schedule-section.license.license-display.paragraph',
+    defaultMessage: 'The following message will be displayed at the bottom of the courseware pages within your course:',
+  },
+});
+
+export default messages;
diff --git a/src/schedule-and-details/license-section/license-icons/LicenseIcons.test.jsx b/src/schedule-and-details/license-section/license-icons/LicenseIcons.test.jsx
new file mode 100644
index 0000000000..29d8bba4d9
--- /dev/null
+++ b/src/schedule-and-details/license-section/license-icons/LicenseIcons.test.jsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import { LICENSE_TYPE } from '../constants';
+import messages from './messages';
+import LicenseIcons from '.';
+
+const RootWrapper = (props) => (
+  <IntlProvider locale="en">
+    <LicenseIcons {...props} />
+  </IntlProvider>
+);
+
+const props = {
+  licenseType: LICENSE_TYPE.allRightsReserved,
+  licenseDetails: {},
+  licenseURL: 'link://to-license.ua',
+};
+
+describe('<LicenseIcons />', () => {
+  it('renders all right reserved successfully', () => {
+    const { getByText, queryAllByText, queryAllByRole } = render(<RootWrapper {...props} />);
+    expect(getByText(messages.allRightReservedLabel.defaultMessage)).toBeInTheDocument();
+    expect(queryAllByText(messages.creativeCommonsReservedLabel.defaultMessage).length).toBe(0);
+    expect(queryAllByRole('img', { hidden: true }).length).toBe(1);
+  });
+
+  it('renders some right reserved successfully', () => {
+    const initialProps = { ...props, licenseType: LICENSE_TYPE.creativeCommons };
+    const {
+      getByText,
+      queryAllByText,
+      queryAllByRole,
+      getByRole,
+    } = render(<RootWrapper {...initialProps} />);
+    expect(getByText(messages.creativeCommonsReservedLabel.defaultMessage)).toBeInTheDocument();
+    expect(queryAllByText(messages.allRightReservedLabel.defaultMessage).length).toBe(0);
+    expect(queryAllByRole('img', { hidden: true }).length).toBe(1);
+    expect(getByRole('link').href).toBe(props.licenseURL);
+  });
+
+  it('should show needed icons following to licenseDetails', () => {
+    const initialProps = {
+      ...props,
+      licenseType: LICENSE_TYPE.creativeCommons,
+      licenseDetails: {
+        attribution: true, nonCommercial: true, noDerivatives: false, shareAlike: false,
+      },
+    };
+    const { getByText, queryAllByRole, debug } = render(<RootWrapper {...initialProps} />);
+    debug(null, 20000);
+    expect(queryAllByRole('img', { hidden: true }).length).toBe(3);
+    expect(getByText(messages.creativeCommonsReservedLabel.defaultMessage)).toBeInTheDocument();
+  });
+});
diff --git a/src/schedule-and-details/license-section/license-icons/index.jsx b/src/schedule-and-details/license-section/license-icons/index.jsx
new file mode 100644
index 0000000000..4cc94387ce
--- /dev/null
+++ b/src/schedule-and-details/license-section/license-icons/index.jsx
@@ -0,0 +1,101 @@
+/* eslint-disable react/no-unstable-nested-components */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import { Icon, Stack, Hyperlink } from '@openedx/paragon';
+import {
+  Attribution, Copyright, Cc, Nd, Nc, Sa,
+} from '@openedx/paragon/icons';
+
+import ApplyWrapper from '../../../generic/ApplyWrapper';
+import { LICENSE_TYPE } from '../constants';
+import messages from './messages';
+
+const LicenseIcons = ({ licenseType, licenseDetails, licenseURL }) => (
+  <ApplyWrapper
+    condition={licenseURL}
+    wrapper={(children) => (
+      <Hyperlink
+        destination={licenseURL}
+        target="_blank"
+        showLaunchIcon={false}
+      >
+        {children}
+      </Hyperlink>
+    )}
+  >
+    <Stack direction="horizontal" gap={1}>
+      {[LICENSE_TYPE.allRightsReserved, null].includes(licenseType) && (
+        <Icon
+          src={Copyright}
+          name="testaa"
+          className="mr-1 text-gray-700"
+          style={{ height: '1.5rem', width: '1.5rem' }}
+        />
+      )}
+      {licenseType === LICENSE_TYPE.creativeCommons && (
+        <Icon
+          src={Cc}
+          className="mr-1 text-gray-700"
+          style={{ height: '1.5rem', width: '1.5rem' }}
+        />
+      )}
+      {licenseDetails?.attribution && (
+        <Icon
+          src={Attribution}
+          className="mr-1 text-gray-700"
+          style={{ height: '1.5rem', width: '1.5rem' }}
+        />
+      )}
+      {licenseDetails?.nonCommercial && (
+        <Icon
+          src={Nc}
+          className="mr-1 text-gray-700"
+          style={{ height: '1.5rem', width: '1.5rem' }}
+        />
+      )}
+      {licenseDetails?.noDerivatives && (
+        <Icon
+          src={Nd}
+          className="mr-1 text-gray-700"
+          style={{ height: '1.5rem', width: '1.5rem' }}
+        />
+      )}
+      {licenseDetails?.shareAlike && (
+        <Icon
+          src={Sa}
+          className="mr-1 text-gray-700"
+          style={{ height: '1.5rem', width: '1.5rem' }}
+        />
+      )}
+      {[LICENSE_TYPE.allRightsReserved, null].includes(licenseType) && (
+        <span className="small text-gray-700">
+          <FormattedMessage {...messages.allRightReservedLabel} />
+        </span>
+      )}
+      {licenseType === LICENSE_TYPE.creativeCommons && (
+        <span className="small text-gray-700">
+          <FormattedMessage {...messages.creativeCommonsReservedLabel} />
+        </span>
+      )}
+    </Stack>
+  </ApplyWrapper>
+);
+
+LicenseIcons.defaultProps = {
+  licenseURL: '',
+  licenseType: null,
+};
+
+LicenseIcons.propTypes = {
+  licenseType: PropTypes.oneOf(Object.values(LICENSE_TYPE)),
+  licenseDetails: PropTypes.shape({
+    attribution: PropTypes.bool,
+    nonCommercial: PropTypes.bool,
+    noDerivatives: PropTypes.bool,
+    shareAlike: PropTypes.bool,
+  }).isRequired,
+  licenseURL: PropTypes.string,
+};
+
+export default LicenseIcons;
diff --git a/src/schedule-and-details/license-section/license-icons/messages.js b/src/schedule-and-details/license-section/license-icons/messages.js
new file mode 100644
index 0000000000..324c286013
--- /dev/null
+++ b/src/schedule-and-details/license-section/license-icons/messages.js
@@ -0,0 +1,14 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  allRightReservedLabel: {
+    id: 'course-authoring.schedule-section.license.all-right-reserved.label',
+    defaultMessage: 'All rights reserved',
+  },
+  creativeCommonsReservedLabel: {
+    id: 'course-authoring.schedule-section.license.creative-commons.label',
+    defaultMessage: 'Some rights reserved',
+  },
+});
+
+export default messages;
diff --git a/src/schedule-and-details/license-section/license-selector/LicenseSelector.test.jsx b/src/schedule-and-details/license-section/license-selector/LicenseSelector.test.jsx
new file mode 100644
index 0000000000..55ed4ef6d2
--- /dev/null
+++ b/src/schedule-and-details/license-section/license-selector/LicenseSelector.test.jsx
@@ -0,0 +1,63 @@
+import React from 'react';
+import {
+  act, fireEvent, render, waitFor,
+} from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import { LICENSE_TYPE } from '../constants';
+import messages from './messages';
+import LicenseSelector from '.';
+
+const onChangeLicenseTypeMock = jest.fn();
+const RootWrapper = (props) => (
+  <IntlProvider locale="en">
+    <LicenseSelector {...props} />
+  </IntlProvider>
+);
+
+const props = {
+  licenseType: LICENSE_TYPE.allRightsReserved,
+  onChangeLicenseType: onChangeLicenseTypeMock,
+};
+
+describe('<LicenseSelector />', () => {
+  it('renders successfully', () => {
+    const { getByText, getByRole } = render(<RootWrapper {...props} />);
+    expect(getByText(messages.licenseType.defaultMessage)).toBeInTheDocument();
+    expect(getByRole('button', { name: messages.licenseChoice1.defaultMessage })).toBeInTheDocument();
+    expect(getByRole('button', { name: messages.licenseChoice2.defaultMessage })).toBeInTheDocument();
+  });
+
+  it('should show active button', () => {
+    const { getByRole } = render(<RootWrapper {...props} />);
+    const activeButton = getByRole('button', { name: messages.licenseChoice1.defaultMessage });
+    const anotherButton = getByRole('button', { name: messages.licenseChoice2.defaultMessage });
+    expect(activeButton).toHaveClass('btn btn-primary');
+    expect(anotherButton).toHaveClass('btn btn-outline-primary');
+  });
+
+  it('should call onChangeLicenseType if button clicked', () => {
+    const { getByRole } = render(<RootWrapper {...props} />);
+    const button = getByRole('button', { name: messages.licenseChoice2.defaultMessage });
+    expect(button).toHaveClass('btn btn-outline-primary');
+    act(() => {
+      fireEvent.click(button);
+    });
+    waitFor(() => {
+      expect(button).toHaveClass('btn btn-primary');
+    });
+    expect(props.onChangeLicenseType).toHaveBeenCalledWith(
+      LICENSE_TYPE.creativeCommons,
+      'license',
+    );
+  });
+
+  it('should show disabled buttons if license is null', () => {
+    const initialProps = { ...props, licenseType: null };
+    const { getByRole } = render(<RootWrapper {...initialProps} />);
+    const buttonFirst = getByRole('button', { name: messages.licenseChoice1.defaultMessage });
+    const buttonSecond = getByRole('button', { name: messages.licenseChoice2.defaultMessage });
+    expect(buttonFirst).toHaveClass('btn btn-outline-primary');
+    expect(buttonSecond).toHaveClass('btn btn-outline-primary');
+  });
+});
diff --git a/src/schedule-and-details/license-section/license-selector/index.jsx b/src/schedule-and-details/license-section/license-selector/index.jsx
new file mode 100644
index 0000000000..d5cf0cb393
--- /dev/null
+++ b/src/schedule-and-details/license-section/license-selector/index.jsx
@@ -0,0 +1,69 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import {
+  Form,
+  ButtonGroup,
+  Button,
+  OverlayTrigger,
+  Tooltip,
+} from '@openedx/paragon';
+
+import { LICENSE_TYPE } from '../constants';
+import messages from './messages';
+
+const LicenseSelector = ({ licenseType, onChangeLicenseType }) => {
+  const LICENSE_BUTTON_GROUP_LABELS = {
+    [LICENSE_TYPE.allRightsReserved]: {
+      label: <FormattedMessage {...messages.licenseChoice1} />,
+      tooltip: <FormattedMessage {...messages.licenseTooltip1} />,
+    },
+    [LICENSE_TYPE.creativeCommons]: {
+      label: <FormattedMessage {...messages.licenseChoice2} />,
+      tooltip: <FormattedMessage {...messages.licenseTooltip2} />,
+    },
+  };
+
+  const renderButton = (type) => {
+    const isActive = licenseType === type;
+
+    return (
+      <OverlayTrigger
+        key={type}
+        overlay={
+          <Tooltip id={`tooltip-${type}`}>{LICENSE_BUTTON_GROUP_LABELS[type].tooltip}</Tooltip>
+        }
+      >
+        <Button
+          variant={isActive ? 'primary' : 'outline-primary'}
+          onClick={() => onChangeLicenseType(type, 'license')}
+        >
+          {LICENSE_BUTTON_GROUP_LABELS[type].label}
+        </Button>
+      </OverlayTrigger>
+    );
+  };
+
+  return (
+    <Form.Group className="p-2 mb-2.5">
+      <p className="text-black mb-2.5">
+        <FormattedMessage {...messages.licenseType} />
+      </p>
+      <ButtonGroup className="bg-white">
+        {renderButton(LICENSE_TYPE.allRightsReserved)}
+        {renderButton(LICENSE_TYPE.creativeCommons)}
+      </ButtonGroup>
+    </Form.Group>
+  );
+};
+
+LicenseSelector.defaultProps = {
+  licenseType: null,
+};
+
+LicenseSelector.propTypes = {
+  licenseType: PropTypes.oneOf(Object.values(LICENSE_TYPE)),
+  onChangeLicenseType: PropTypes.func.isRequired,
+};
+
+export default LicenseSelector;
diff --git a/src/schedule-and-details/license-section/license-selector/messages.js b/src/schedule-and-details/license-section/license-selector/messages.js
new file mode 100644
index 0000000000..08ccb613fa
--- /dev/null
+++ b/src/schedule-and-details/license-section/license-selector/messages.js
@@ -0,0 +1,30 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  licenseType: {
+    id: 'course-authoring.schedule-section.license.type',
+    defaultMessage: 'License type',
+  },
+  licenseChoice1: {
+    id: 'course-authoring.schedule-section.license.choice-1',
+    defaultMessage: 'All rights reserved',
+  },
+  licenseChoice2: {
+    id: 'course-authoring.schedule-section.license.choice-2',
+    defaultMessage: 'Creative commons',
+  },
+  licenseTooltip1: {
+    id: 'course-authoring.schedule-section.license.tooltip-1',
+    defaultMessage: 'You reserve all rights for your work',
+  },
+  licenseTooltip2: {
+    id: 'course-authoring.schedule-section.license.tooltip-2',
+    defaultMessage: 'You waive some rights for your work, such that others can use it too',
+  },
+  creativeCommonsURLParagraph: {
+    id: 'course-authoring.schedule-section.license.creative-commons.url',
+    defaultMessage: 'Learn more about creative commons',
+  },
+});
+
+export default messages;
diff --git a/src/schedule-and-details/license-section/messages.js b/src/schedule-and-details/license-section/messages.js
new file mode 100644
index 0000000000..88470a45fd
--- /dev/null
+++ b/src/schedule-and-details/license-section/messages.js
@@ -0,0 +1,14 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  licenseTitle: {
+    id: 'course-authoring.schedule-section.license.title',
+    defaultMessage: 'Course content license',
+  },
+  licenseDescription: {
+    id: 'course-authoring.schedule-section.license.description',
+    defaultMessage: 'Select the default license for course content',
+  },
+});
+
+export default messages;
diff --git a/src/schedule-and-details/license-section/utils.js b/src/schedule-and-details/license-section/utils.js
new file mode 100644
index 0000000000..ecd0615c53
--- /dev/null
+++ b/src/schedule-and-details/license-section/utils.js
@@ -0,0 +1,16 @@
+import {
+  LICENSE_COMMONS_OPTIONS,
+  creativeCommonsLicensesURL,
+  creativeCommonsVersion,
+} from './constants';
+
+const generateLicenseURL = (details) => {
+  const detailsString = Object.entries(details)
+    .filter(([, value]) => value)
+    .map(([key]) => LICENSE_COMMONS_OPTIONS[key].toLowerCase())
+    .join('-');
+
+  return `${creativeCommonsLicensesURL}/${detailsString}/${creativeCommonsVersion}`;
+};
+
+export { generateLicenseURL };
diff --git a/src/schedule-and-details/messages.js b/src/schedule-and-details/messages.js
new file mode 100644
index 0000000000..b2ba0533d4
--- /dev/null
+++ b/src/schedule-and-details/messages.js
@@ -0,0 +1,118 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  headingTitle: {
+    id: 'course-authoring.schedule.heading.title',
+    defaultMessage: 'Schedule & details',
+  },
+  headingSubtitle: {
+    id: 'course-authoring.schedule.heading.subtitle',
+    defaultMessage: 'Settings',
+  },
+  buttonSaveText: {
+    id: 'course-authoring.schedule.alert.button.save',
+    defaultMessage: 'Save changes',
+  },
+  buttonSavingText: {
+    id: 'course-authoring.schedule.alert.button.saving',
+    defaultMessage: 'Saving',
+  },
+  buttonCancelText: {
+    id: 'course-authoring.schedule.alert.button.cancel',
+    defaultMessage: 'Cancel',
+  },
+  alertWarningAriaLabelledby: {
+    id: 'course-authoring.schedule.alert.warning.aria.labelledby',
+    defaultMessage: 'notification-warning-title',
+  },
+  alertWarningAriaDescribedby: {
+    id: 'course-authoring.schedule.alert.warning.aria.describedby',
+    defaultMessage: 'notification-warning-description',
+  },
+  alertWarning: {
+    id: 'course-authoring.schedule.alert.warning',
+    defaultMessage: 'You\'ve made some changes',
+  },
+  alertWarningOnSaveWithError: {
+    id: 'course-authoring.schedule.alert.warning.save.error',
+    defaultMessage: 'You\'ve made some changes, but there are some errors',
+  },
+  alertWarningDescriptions: {
+    id: 'course-authoring.schedule.alert.warning.descriptions',
+    defaultMessage: 'Your changes will not take effect until you save your progress.',
+  },
+  alertWarningDescriptionsOnSaveWithError: {
+    id: 'course-authoring.schedule.alert.warning.save.descriptions.error',
+    defaultMessage: 'Please address the errors on this page first, and then save your progress.',
+  },
+  alertSuccessAriaLabelledby: {
+    id: 'course-authoring.schedule.alert.success.aria.labelledby',
+    defaultMessage: 'alert-confirmation-title',
+  },
+  alertSuccessAriaDescribedby: {
+    id: 'course-authoring.schedule.alert.success.aria.describedby',
+    defaultMessage: 'alert-confirmation-description',
+  },
+  alertSuccess: {
+    id: 'course-authoring.schedule.alert.success',
+    defaultMessage: 'Your changes have been saved.',
+  },
+  alertLoadFailAriaLabelledby: {
+    id: 'course-authoring.schedule.alert.load.fail.aria.labelledby',
+    defaultMessage: 'alert-confirmation-title',
+  },
+  alertLoadFailAriaDescribedby: {
+    id: 'course-authoring.schedule.alert.load.fail.aria.describedby',
+    defaultMessage: 'alert-confirmation-description',
+  },
+  alertLoadFail: {
+    id: 'course-authoring.schedule.alert.load.fail',
+    defaultMessage: 'We encountered an error when loading your settings.',
+  },
+  alertFailAriaLabelledby: {
+    id: 'course-authoring.schedule.alert.fail.aria.labelledby',
+    defaultMessage: 'alert-confirmation-title',
+  },
+  alertFailAriaDescribedby: {
+    id: 'course-authoring.schedule.alert.fail.aria.describedby',
+    defaultMessage: 'alert-confirmation-description',
+  },
+  alertFail: {
+    id: 'course-authoring.schedule.alert.fail',
+    defaultMessage: 'We encountered an error when saving your changes.',
+  },
+  errorMessage1: {
+    id: 'course-authoring.schedule.schedule-section.error-message-1',
+    defaultMessage: 'The certificates display behavior must be \'A date after the course end date\' if certificate available date is set.',
+  },
+  errorMessage2: {
+    id: 'course-authoring.schedule.schedule-section.error-message-2',
+    defaultMessage: 'The enrollment end date cannot be after the course end date.',
+  },
+  errorMessage3: {
+    id: 'course-authoring.schedule.schedule-section.error-message-3',
+    defaultMessage: 'The enrollment start date cannot be after the enrollment end date.',
+  },
+  errorMessage4: {
+    id: 'course-authoring.schedule.schedule-section.error-message-4',
+    defaultMessage: 'The course start date must be later than the enrollment start date.',
+  },
+  errorMessage5: {
+    id: 'course-authoring.schedule.schedule-section.error-message-5',
+    defaultMessage: 'The course end date must be later than the course start date.',
+  },
+  errorMessage6: {
+    id: 'course-authoring.schedule.schedule-section.error-message-6',
+    defaultMessage: 'The certificate available date must be later than the course end date.',
+  },
+  errorMessage7: {
+    id: 'course-authoring.schedule.schedule-section.error-message-7',
+    defaultMessage: 'The course must have an assigned start date.',
+  },
+  errorMessage8: {
+    id: 'course-authoring.schedule.schedule-section.error-message-8',
+    defaultMessage: 'Please enter an integer between %(min)s and %(max)s.',
+  },
+});
+
+export default messages;
diff --git a/src/schedule-and-details/pacing-section/PacingSection.scss b/src/schedule-and-details/pacing-section/PacingSection.scss
new file mode 100644
index 0000000000..2d4c8a751f
--- /dev/null
+++ b/src/schedule-and-details/pacing-section/PacingSection.scss
@@ -0,0 +1,27 @@
+.pacing-section {
+  .pgn__form-group {
+    p.pgn__form-label {
+      font: normal .875rem/1.5rem $font-family-base;
+    }
+
+    label.pgn__form-label {
+      font: normal $font-weight-bold .75rem/1.25rem $font-family-base;
+      color: $text-color-weak;
+    }
+
+    .pgn__form-control-description {
+      font: normal .75rem/1.5rem $font-family-base;
+      color: $black;
+    }
+  }
+
+  input.pgn__form-radio-input {
+    padding: .5rem;
+    height: $spacer;
+    width: $spacer;
+  }
+
+  .pgn__form-control-set {
+    padding: $spacer 0 0 2.5rem;
+  }
+}
diff --git a/src/schedule-and-details/pacing-section/PacingSection.test.jsx b/src/schedule-and-details/pacing-section/PacingSection.test.jsx
new file mode 100644
index 0000000000..4bbeca6baa
--- /dev/null
+++ b/src/schedule-and-details/pacing-section/PacingSection.test.jsx
@@ -0,0 +1,69 @@
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import messages from './messages';
+import PacingSection from '.';
+
+describe('<PacingSection />', () => {
+  const onChangeMock = jest.fn();
+  const RootWrapper = (props) => (
+    <IntlProvider locale="en">
+      <PacingSection {...props} />
+    </IntlProvider>
+  );
+
+  const props = {
+    intl: {},
+    selfPaced: false,
+    startDate: '2023-06-12',
+    onChange: onChangeMock,
+  };
+
+  it('renders pacing section successfully', () => {
+    const { getByText } = render(<RootWrapper {...props} />);
+    expect(getByText(messages.pacingTitle.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.pacingDescription.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.pacingRestriction.defaultMessage)).toBeInTheDocument();
+
+    expect(getByText(messages.pacingTypeInstructorLabel.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.pacingTypeInstructorDescription.defaultMessage)).toBeInTheDocument();
+
+    expect(getByText(messages.pacingTypeSelfLabel.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.pacingTypeSelfDescription.defaultMessage)).toBeInTheDocument();
+  });
+
+  it('shows radio inputs correctly', () => {
+    const { getAllByRole } = render(<RootWrapper {...props} />);
+    const radioList = getAllByRole('radio');
+    expect(radioList[0].checked).toBeTruthy();
+    expect(radioList[0].disabled).toBeTruthy();
+    expect(radioList[1].checked).toBeFalsy();
+    expect(radioList[1].disabled).toBeTruthy();
+  });
+
+  it('shows disabled radio inputs correctly', () => {
+    const year = new Date().getFullYear() + 1;
+    const pastDate = `${year}-12-31`;
+    const initialProps = { ...props, startDate: pastDate };
+    const { getAllByRole, queryAllByText } = render(
+      <RootWrapper {...initialProps} />,
+    );
+    const radioList = getAllByRole('radio');
+    expect(radioList[0].checked).toBeTruthy();
+    expect(radioList[0].disabled).toBeFalsy();
+    expect(radioList[1].checked).toBeFalsy();
+    expect(radioList[1].disabled).toBeFalsy();
+    expect(queryAllByText(messages.pacingRestriction.defaultMessage).length).toBe(0);
+  });
+
+  it('should call onChange radio input', () => {
+    const pastDate = '2023-12-31';
+    const initialProps = { ...props, startDate: pastDate };
+    const { getAllByRole } = render(<RootWrapper {...initialProps} />);
+    const radioList = getAllByRole('radio');
+    expect(radioList[1].checked).toBeFalsy();
+    fireEvent.click(radioList[1]);
+    expect(onChangeMock).toHaveBeenCalled();
+  });
+});
diff --git a/src/schedule-and-details/pacing-section/index.jsx b/src/schedule-and-details/pacing-section/index.jsx
new file mode 100644
index 0000000000..66dab99ccf
--- /dev/null
+++ b/src/schedule-and-details/pacing-section/index.jsx
@@ -0,0 +1,63 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Form } from '@openedx/paragon';
+
+import SectionSubHeader from '../../generic/section-sub-header';
+import messages from './messages';
+
+const PacingSection = ({
+  selfPaced, startDate, onChange,
+}) => {
+  const intl = useIntl();
+  const canTogglePace = new Date() <= new Date(startDate);
+
+  return (
+    <section className="section-container pacing-section">
+      <SectionSubHeader
+        title={intl.formatMessage(messages.pacingTitle)}
+        description={intl.formatMessage(messages.pacingDescription)}
+      />
+      <Form.Group>
+        {!canTogglePace && (
+          <Form.Label className="text pt-3">
+            {intl.formatMessage(messages.pacingRestriction)}
+          </Form.Label>
+        )}
+        <Form.RadioSet
+          name="selfPaced"
+          onChange={(e) => onChange(e.target.value, e.target.name)}
+          value={selfPaced.toString()}
+        >
+          <Form.Radio
+            value="false"
+            description={intl.formatMessage(messages.pacingTypeInstructorDescription)}
+            disabled={!canTogglePace}
+          >
+            {intl.formatMessage(messages.pacingTypeInstructorLabel)}
+          </Form.Radio>
+          <Form.Radio
+            value="true"
+            description={intl.formatMessage(messages.pacingTypeSelfDescription)}
+            disabled={!canTogglePace}
+          >
+            {intl.formatMessage(messages.pacingTypeSelfLabel)}
+          </Form.Radio>
+        </Form.RadioSet>
+      </Form.Group>
+    </section>
+  );
+};
+
+PacingSection.defaultProps = {
+  selfPaced: '',
+  startDate: '',
+};
+
+PacingSection.propTypes = {
+  startDate: PropTypes.string,
+  selfPaced: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  onChange: PropTypes.func.isRequired,
+};
+
+export default PacingSection;
diff --git a/src/schedule-and-details/pacing-section/messages.js b/src/schedule-and-details/pacing-section/messages.js
new file mode 100644
index 0000000000..4783e61028
--- /dev/null
+++ b/src/schedule-and-details/pacing-section/messages.js
@@ -0,0 +1,35 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  pacingTitle: {
+    id: 'course-authoring.schedule.pacing.title',
+    defaultMessage: 'Course pacing',
+  },
+  pacingDescription: {
+    id: 'course-authoring.schedule.pacing.description',
+    defaultMessage: 'Set the pacing for this course',
+  },
+  pacingRestriction: {
+    id: 'course-authoring.schedule.pacing.restriction',
+    defaultMessage: 'Course pacing cannot be changed once a course has started',
+  },
+  pacingTypeInstructorLabel: {
+    id: 'course-authoring.schedule.pacing.radio.instructor.label',
+    defaultMessage: 'Instructor-paced',
+  },
+  pacingTypeInstructorDescription: {
+    id: 'course-authoring.schedule.pacing.radio.instructor.description',
+    defaultMessage:
+      'Instructor-paced courses progress at the pace that the course author sets. You can configure release dates for course content and due dates for assignments.',
+  },
+  pacingTypeSelfLabel: {
+    id: 'course-authoring.schedule.pacing.radio.self-paced.label',
+    defaultMessage: 'Self-paced',
+  },
+  pacingTypeSelfDescription: {
+    id: 'course-authoring.schedule.pacing.radio.self-paced.description',
+    defaultMessage: 'Self-paced courses offer suggested due dates for assignments or exams based on the learner’s enrollment date and the expected course duration. These courses offer learners flexibility to modify the assignment dates as needed.',
+  },
+});
+
+export default messages;
diff --git a/src/schedule-and-details/requirements-section/RequirementsSection.scss b/src/schedule-and-details/requirements-section/RequirementsSection.scss
new file mode 100644
index 0000000000..bf8a1e8d1e
--- /dev/null
+++ b/src/schedule-and-details/requirements-section/RequirementsSection.scss
@@ -0,0 +1,12 @@
+.requirements-section {
+  .form-group-custom:not(:last-child) {
+    margin-bottom: 2rem;
+  }
+
+  .dropdown-prerequisite {
+    .dropdown-menu {
+      overflow: auto;
+      height: 20rem;
+    }
+  }
+}
diff --git a/src/schedule-and-details/requirements-section/RequirementsSection.test.jsx b/src/schedule-and-details/requirements-section/RequirementsSection.test.jsx
new file mode 100644
index 0000000000..0ed6e6c301
--- /dev/null
+++ b/src/schedule-and-details/requirements-section/RequirementsSection.test.jsx
@@ -0,0 +1,93 @@
+import React from 'react';
+import {
+  render, fireEvent, act,
+} from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import { courseDetailsMock, courseSettingsMock } from '../__mocks__';
+import messages from './messages';
+import entranceExamMessages from './entrance-exam/messages';
+import RequirementsSection from '.';
+
+const onChangeMock = jest.fn();
+const courseIdMock = 'course-id-bar';
+
+jest.mock('react-router', () => ({
+  ...jest.requireActual('react-router'),
+  useParams: () => ({
+    courseId: courseIdMock,
+  }),
+}));
+
+const RootWrapper = (props) => (
+  <IntlProvider locale="en">
+    <RequirementsSection {...props} />
+  </IntlProvider>
+);
+const {
+  effort,
+  entranceExamEnabled,
+  preRequisiteCourses,
+  entranceExamMinimumScorePct,
+} = courseDetailsMock;
+
+const {
+  aboutPageEditable,
+  isEntranceExamsEnabled,
+  possiblePreRequisiteCourses,
+  isPrerequisiteCoursesEnabled,
+} = courseSettingsMock;
+
+const props = {
+  effort,
+  errorFields: {},
+  aboutPageEditable,
+  preRequisiteCourses,
+  entranceExamEnabled,
+  isEntranceExamsEnabled,
+  possiblePreRequisiteCourses,
+  entranceExamMinimumScorePct,
+  isPrerequisiteCoursesEnabled,
+  onChange: onChangeMock,
+};
+
+describe('<RequirementsSection />', () => {
+  it('renders successfully', () => {
+    const {
+      getByText, getByLabelText, getByDisplayValue, getAllByRole,
+    } = render(<RootWrapper {...props} />);
+    const checkboxList = getAllByRole('checkbox');
+    expect(getByText(messages.requirementsTitle.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.requirementsDescription.defaultMessage)).toBeInTheDocument();
+    expect(getByLabelText(messages.timepickerLabel.defaultMessage)).toBeInTheDocument();
+    expect(getByDisplayValue(props.effort)).toBeInTheDocument();
+    expect(getByText(messages.timepickerHelpText.defaultMessage)).toBeInTheDocument();
+    expect(getByLabelText(messages.dropdownLabel.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.dropdownHelpText.defaultMessage)).toBeInTheDocument();
+    expect(getByText(entranceExamMessages.requirementsEntrance.defaultMessage)).toBeInTheDocument();
+    expect(checkboxList.length).toBe(1);
+    expect(checkboxList[0].checked).toBeTruthy();
+  });
+
+  it('should call onChange on input change', () => {
+    const { getByDisplayValue } = render(<RootWrapper {...props} />);
+    const input = getByDisplayValue(props.effort);
+    act(() => {
+      fireEvent.change(input, { target: { value: '12h' } });
+    });
+    expect(props.onChange).toHaveBeenCalledWith('12h', 'effort');
+  });
+
+  it('should hide content depend on flags', () => {
+    const initialProps = {
+      ...props,
+      aboutPageEditable: false,
+      isEntranceExamsEnabled: false,
+      isPrerequisiteCoursesEnabled: false,
+    };
+    const { queryAllByLabelText } = render(<RootWrapper {...initialProps} />);
+    expect(queryAllByLabelText(messages.timepickerLabel.defaultMessage).length).toBe(0);
+    expect(queryAllByLabelText(messages.dropdownLabel.defaultMessage).length).toBe(0);
+    expect(queryAllByLabelText(entranceExamMessages.requirementsEntrance.defaultMessage).length).toBe(0);
+  });
+});
diff --git a/src/schedule-and-details/requirements-section/entrance-exam/EntranceExam.test.jsx b/src/schedule-and-details/requirements-section/entrance-exam/EntranceExam.test.jsx
new file mode 100644
index 0000000000..a6d2a8bbfa
--- /dev/null
+++ b/src/schedule-and-details/requirements-section/entrance-exam/EntranceExam.test.jsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import {
+  render, fireEvent, act, waitFor,
+} from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import { courseDetailsMock } from '../../__mocks__';
+import gradeRequirementsMessages from '../grade-requirements/messages';
+import messages from './messages';
+import EntranceExam from '.';
+
+const onChangeMock = jest.fn();
+const courseIdMock = 'course-id-bar';
+
+jest.mock('react-router', () => ({
+  ...jest.requireActual('react-router'),
+  useParams: () => ({
+    courseId: courseIdMock,
+  }),
+}));
+
+const RootWrapper = (props) => (
+  <IntlProvider locale="en">
+    <EntranceExam {...props} />
+  </IntlProvider>
+);
+
+const props = {
+  errorEffort: '',
+  isCheckedString: courseDetailsMock.entranceExamEnabled,
+  entranceExamMinimumScorePct: courseDetailsMock.entranceExamMinimumScorePct,
+  onChange: onChangeMock,
+};
+
+describe('<EntranceExam />', () => {
+  it('renders successfully', () => {
+    const { getByText, getAllByRole } = render(<RootWrapper {...props} />);
+    const checkboxList = getAllByRole('checkbox');
+    expect(getByText(messages.requirementsEntrance.defaultMessage)).toBeInTheDocument();
+    expect(checkboxList.length).toBe(1);
+    expect(checkboxList[0].checked).toBeTruthy();
+  });
+
+  it('should toggle grade requirements after checkbox click', () => {
+    const { getByText, queryAllByText, getAllByRole } = render(
+      <RootWrapper {...props} />,
+    );
+    const checkbox = getAllByRole('checkbox')[0];
+    expect(
+      getByText(gradeRequirementsMessages.requirementsEntranceCollapseLabel.defaultMessage),
+    ).toBeInTheDocument();
+    act(() => {
+      fireEvent.click(checkbox);
+    });
+    waitFor(() => {
+      expect(
+        queryAllByText(gradeRequirementsMessages.requirementsEntranceCollapseLabel.defaultMessage).length,
+      ).toBe(0);
+    });
+  });
+});
diff --git a/src/schedule-and-details/requirements-section/entrance-exam/index.jsx b/src/schedule-and-details/requirements-section/entrance-exam/index.jsx
new file mode 100644
index 0000000000..717707f186
--- /dev/null
+++ b/src/schedule-and-details/requirements-section/entrance-exam/index.jsx
@@ -0,0 +1,88 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useParams } from 'react-router-dom';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import { Form, Card, Hyperlink } from '@openedx/paragon';
+
+import { getPagePath } from '../../../utils';
+import GradeRequirements from '../grade-requirements';
+import messages from './messages';
+
+const EntranceExam = ({
+  errorEffort,
+  isCheckedString,
+  entranceExamMinimumScorePct,
+  onChange,
+}) => {
+  const { courseId } = useParams();
+  const showEntranceExam = isCheckedString === 'true';
+  const toggleEntranceExam = () => onChange((!showEntranceExam).toString(), 'entranceExamEnabled');
+  const courseOutlineDestination = getPagePath(
+    courseId,
+    'false',
+    'course',
+  );
+
+  return (
+    <Form.Group className="form-group-custom">
+      <Form.Label className="h3">
+        <FormattedMessage {...messages.requirementsEntrance} />
+      </Form.Label>
+      <Card>
+        <Card.Section className="pt-2.5 pb-1 pl-3">
+          <Form.Checkbox
+            checked={showEntranceExam}
+            onChange={toggleEntranceExam}
+          >
+            <FormattedMessage {...messages.requirementsEntranceCollapseTitle} />
+          </Form.Checkbox>
+        </Card.Section>
+        {showEntranceExam && (
+          <>
+            <Card.Divider />
+            <Card.Body className="pl-3 pt-2">
+              <p className="small mb-2">
+                <FormattedMessage
+                  {...messages.requirementsEntranceCollapseParagraph}
+                  values={{
+                    hyperlink: (
+                      <Hyperlink
+                        destination={courseOutlineDestination}
+                        target="_blank"
+                        showLaunchIcon={false}
+                      >
+                        <FormattedMessage
+                          {...messages.requirementsEntranceCollapseHyperlink}
+                        />
+                      </Hyperlink>
+                    ),
+                  }}
+                />
+              </p>
+              <GradeRequirements
+                errorEffort={errorEffort}
+                entranceExamMinimumScorePct={entranceExamMinimumScorePct}
+                onChange={onChange}
+              />
+            </Card.Body>
+          </>
+        )}
+      </Card>
+    </Form.Group>
+  );
+};
+
+EntranceExam.defaultProps = {
+  errorEffort: '',
+  isCheckedString: '',
+  entranceExamMinimumScorePct: '',
+};
+
+EntranceExam.propTypes = {
+  errorEffort: PropTypes.string,
+  isCheckedString: PropTypes.string,
+  entranceExamMinimumScorePct: PropTypes.string,
+  onChange: PropTypes.func.isRequired,
+};
+
+export default EntranceExam;
diff --git a/src/schedule-and-details/requirements-section/entrance-exam/messages.js b/src/schedule-and-details/requirements-section/entrance-exam/messages.js
new file mode 100644
index 0000000000..6f756097e9
--- /dev/null
+++ b/src/schedule-and-details/requirements-section/entrance-exam/messages.js
@@ -0,0 +1,22 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  requirementsEntrance: {
+    id: 'course-authoring.schedule-section.requirements.entrance.label',
+    defaultMessage: 'Entrance exam',
+  },
+  requirementsEntranceCollapseTitle: {
+    id: 'course-authoring.schedule-section.requirements.entrance.collapse.title',
+    defaultMessage: 'Require students to pass an exam before beginning the course.',
+  },
+  requirementsEntranceCollapseParagraph: {
+    id: 'course-authoring.schedule-section.requirements.entrance.collapse.paragraph',
+    defaultMessage: 'You can now view and author your course entrance exam from the {hyperlink}.',
+  },
+  requirementsEntranceCollapseHyperlink: {
+    id: 'course-authoring.schedule-section.requirements.entrance.collapse.hyperlink',
+    defaultMessage: 'course outline',
+  },
+});
+
+export default messages;
diff --git a/src/schedule-and-details/requirements-section/grade-requirements/GradeRequirements.test.jsx b/src/schedule-and-details/requirements-section/grade-requirements/GradeRequirements.test.jsx
new file mode 100644
index 0000000000..dbf3e702b7
--- /dev/null
+++ b/src/schedule-and-details/requirements-section/grade-requirements/GradeRequirements.test.jsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import {
+  render, fireEvent, act, waitFor,
+} from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import { courseDetailsMock } from '../../__mocks__';
+import scheduleMessage from '../../messages';
+import messages from './messages';
+import GradeRequirements from '.';
+
+const onChangeMock = jest.fn();
+
+const RootWrapper = (props) => (
+  <IntlProvider locale="en">
+    <GradeRequirements {...props} />
+  </IntlProvider>
+);
+
+const props = {
+  errorEffort: '',
+  entranceExamMinimumScorePct: courseDetailsMock.entranceExamMinimumScorePct,
+  onChange: onChangeMock,
+};
+
+describe('<GradeRequirements />', () => {
+  it('renders successfully', () => {
+    const { getByText, getByDisplayValue } = render(<RootWrapper {...props} />);
+    expect(getByText(messages.requirementsEntranceCollapseLabel.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.requirementsEntranceCollapseHelpText.defaultMessage)).toBeInTheDocument();
+    expect(getByDisplayValue(props.entranceExamMinimumScorePct)).toBeInTheDocument();
+  });
+
+  it('should call onChange on input change', () => {
+    const { getByDisplayValue } = render(<RootWrapper {...props} />);
+    const input = getByDisplayValue(props.entranceExamMinimumScorePct);
+    act(() => {
+      fireEvent.change(input, { target: { valueAsNumber: '31' } });
+    });
+    expect(props.onChange).toHaveBeenCalledWith('31', 'entranceExamMinimumScorePct');
+  });
+
+  it('should show feedback error', () => {
+    const { getByDisplayValue, getByText } = render(<RootWrapper {...props} />);
+    const input = getByDisplayValue(props.entranceExamMinimumScorePct);
+    act(() => {
+      fireEvent.change(input, { target: { valueAsNumber: '123' } });
+    });
+    waitFor(() => {
+      expect(getByText(scheduleMessage.errorMessage8.defaultMessage)).toBeInTheDocument();
+    });
+  });
+});
diff --git a/src/schedule-and-details/requirements-section/grade-requirements/index.jsx b/src/schedule-and-details/requirements-section/grade-requirements/index.jsx
new file mode 100644
index 0000000000..91772a9d82
--- /dev/null
+++ b/src/schedule-and-details/requirements-section/grade-requirements/index.jsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import { Form, Stack } from '@openedx/paragon';
+
+import messages from './messages';
+
+const GradeRequirements = ({
+  errorEffort,
+  entranceExamMinimumScorePct,
+  onChange,
+}) => (
+  <Form.Group
+    className={classNames('form-group-custom', {
+      'form-group-custom_isInvalid': errorEffort,
+    })}
+  >
+    <Form.Label>
+      <FormattedMessage {...messages.requirementsEntranceCollapseLabel} />
+    </Form.Label>
+    <Stack direction="horizontal" className="w-25">
+      <Form.Control
+        type="number"
+        min={1}
+        max={100}
+        value={entranceExamMinimumScorePct}
+        onChange={(e) => onChange(e.target.value, 'entranceExamMinimumScorePct')}
+        trailingElement="%"
+      />
+    </Stack>
+    {errorEffort && (
+      <Form.Control.Feedback className="feedback-error">
+        {errorEffort}
+      </Form.Control.Feedback>
+    )}
+    <Form.Control.Feedback>
+      <FormattedMessage {...messages.requirementsEntranceCollapseHelpText} />
+    </Form.Control.Feedback>
+  </Form.Group>
+);
+
+GradeRequirements.defaultProps = {
+  errorEffort: '',
+  entranceExamMinimumScorePct: '',
+};
+
+GradeRequirements.propTypes = {
+  errorEffort: PropTypes.string,
+  entranceExamMinimumScorePct: PropTypes.string,
+  onChange: PropTypes.func.isRequired,
+};
+
+export default GradeRequirements;
diff --git a/src/schedule-and-details/requirements-section/grade-requirements/messages.js b/src/schedule-and-details/requirements-section/grade-requirements/messages.js
new file mode 100644
index 0000000000..1993f8f81b
--- /dev/null
+++ b/src/schedule-and-details/requirements-section/grade-requirements/messages.js
@@ -0,0 +1,15 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  requirementsEntranceCollapseLabel: {
+    id: 'course-authoring.schedule-section.requirements.entrance.collapse.label',
+    defaultMessage: 'Grade requirements',
+  },
+  requirementsEntranceCollapseHelpText: {
+    id: 'course-authoring.schedule-section.requirements.entrance.collapse.help-text',
+    defaultMessage:
+      'The score student must meet in order to successfully complete the entrance exam.',
+  },
+});
+
+export default messages;
diff --git a/src/schedule-and-details/requirements-section/index.jsx b/src/schedule-and-details/requirements-section/index.jsx
new file mode 100644
index 0000000000..c7635c10ca
--- /dev/null
+++ b/src/schedule-and-details/requirements-section/index.jsx
@@ -0,0 +1,130 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Form, Dropdown } from '@openedx/paragon';
+
+import { TIME_FORMAT } from '../../constants';
+import SectionSubHeader from '../../generic/section-sub-header';
+import EntranceExam from './entrance-exam';
+import messages from './messages';
+
+const RequirementsSection = ({
+  effort,
+  errorFields,
+  aboutPageEditable,
+  preRequisiteCourses,
+  entranceExamEnabled,
+  isEntranceExamsEnabled,
+  possiblePreRequisiteCourses,
+  entranceExamMinimumScorePct,
+  isPrerequisiteCoursesEnabled,
+  onChange,
+}) => {
+  const intl = useIntl();
+  const selectedItem = possiblePreRequisiteCourses?.find(
+    (course) => course.courseKey === preRequisiteCourses[0],
+  );
+  const formattedSelectedItem = selectedItem?.displayName || intl.formatMessage(messages.dropdownEmptyText);
+
+  const renderPrerequisiteDropdown = () => (
+    <Form.Group
+      className="form-group-custom dropdown-prerequisite"
+      controlId="prerequisiteDropdown"
+    >
+      <Form.Label>{intl.formatMessage(messages.dropdownLabel)}</Form.Label>
+      <Dropdown className="bg-white">
+        <Dropdown.Toggle id="prerequisiteDropdown" variant="outline-primary">
+          {formattedSelectedItem}
+        </Dropdown.Toggle>
+        <Dropdown.Menu>
+          <Dropdown.Item
+            key={intl.formatMessage(messages.dropdownEmptyText)}
+            onClick={() => onChange([], 'preRequisiteCourses')}
+          >
+            {intl.formatMessage(messages.dropdownEmptyText)}
+          </Dropdown.Item>
+          {possiblePreRequisiteCourses.map((course) => (
+            <Dropdown.Item
+              key={course.courseKey}
+              onClick={() => onChange([course.courseKey], 'preRequisiteCourses')}
+            >
+              {course.displayName}
+            </Dropdown.Item>
+          ))}
+        </Dropdown.Menu>
+      </Dropdown>
+      <Form.Control.Feedback>
+        {intl.formatMessage(messages.dropdownHelpText)}
+      </Form.Control.Feedback>
+    </Form.Group>
+  );
+
+  return (
+    <section className="section-container requirements-section">
+      <SectionSubHeader
+        title={intl.formatMessage(messages.requirementsTitle)}
+        description={intl.formatMessage(messages.requirementsDescription)}
+      />
+      {aboutPageEditable && (
+        <Form.Group className="form-group-custom">
+          <Form.Label>
+            {intl.formatMessage(messages.timepickerLabel)}
+          </Form.Label>
+          <Form.Control
+            value={effort || ''}
+            placeholder={TIME_FORMAT.toUpperCase()}
+            onChange={(e) => onChange(e.target.value, 'effort')}
+          />
+          <Form.Control.Feedback>
+            {intl.formatMessage(messages.timepickerHelpText)}
+          </Form.Control.Feedback>
+        </Form.Group>
+      )}
+      {isPrerequisiteCoursesEnabled && renderPrerequisiteDropdown()}
+      {isEntranceExamsEnabled && (
+        <EntranceExam
+          errorEffort={errorFields?.entranceExamMinimumScorePct}
+          isCheckedString={entranceExamEnabled}
+          entranceExamMinimumScorePct={entranceExamMinimumScorePct}
+          onChange={onChange}
+        />
+      )}
+    </section>
+  );
+};
+
+const preRequisitesCourse = {
+  courseKey: PropTypes.string,
+  displayName: PropTypes.string,
+  lmsLink: PropTypes.string,
+  number: PropTypes.string,
+  org: PropTypes.string,
+  rerunLink: PropTypes.string,
+  run: PropTypes.string,
+  url: PropTypes.string,
+};
+
+RequirementsSection.defaultProps = {
+  effort: '',
+  errorFields: {},
+  entranceExamEnabled: '',
+  preRequisiteCourses: [],
+  entranceExamMinimumScorePct: '',
+};
+
+RequirementsSection.propTypes = {
+  effort: PropTypes.string,
+  errorFields: PropTypes.objectOf(PropTypes.string),
+  aboutPageEditable: PropTypes.bool.isRequired,
+  preRequisiteCourses: PropTypes.arrayOf(PropTypes.string),
+  entranceExamEnabled: PropTypes.string,
+  isEntranceExamsEnabled: PropTypes.bool.isRequired,
+  possiblePreRequisiteCourses: PropTypes.arrayOf(
+    PropTypes.shape(preRequisitesCourse),
+  ).isRequired,
+  entranceExamMinimumScorePct: PropTypes.string,
+  isPrerequisiteCoursesEnabled: PropTypes.bool.isRequired,
+  onChange: PropTypes.func.isRequired,
+};
+
+export default RequirementsSection;
diff --git a/src/schedule-and-details/requirements-section/messages.js b/src/schedule-and-details/requirements-section/messages.js
new file mode 100644
index 0000000000..24b04e7f4a
--- /dev/null
+++ b/src/schedule-and-details/requirements-section/messages.js
@@ -0,0 +1,34 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  requirementsTitle: {
+    id: 'course-authoring.schedule-section.requirements.title',
+    defaultMessage: 'Requirements',
+  },
+  requirementsDescription: {
+    id: 'course-authoring.schedule-section.requirements.description',
+    defaultMessage: 'Expectations of the students taking this course',
+  },
+  timepickerLabel: {
+    id: 'course-authoring.schedule-section.requirements.timepicker.label',
+    defaultMessage: 'Hours of effort per week',
+  },
+  timepickerHelpText: {
+    id: 'course-authoring.schedule-section.requirements.timepicker.help-text',
+    defaultMessage: 'Time spent on all course work',
+  },
+  dropdownLabel: {
+    id: 'course-authoring.schedule-section.requirements.dropdown.label',
+    defaultMessage: 'Prerequisite course',
+  },
+  dropdownHelpText: {
+    id: 'course-authoring.schedule-section.requirements.dropdown.help-text',
+    defaultMessage: 'Course that students must complete before beginning this course',
+  },
+  dropdownEmptyText: {
+    id: 'course-authoring.schedule-section.requirements.dropdown.empty-text',
+    defaultMessage: 'None',
+  },
+});
+
+export default messages;
diff --git a/src/schedule-and-details/schedule-section/ScheduleSection.scss b/src/schedule-and-details/schedule-section/ScheduleSection.scss
new file mode 100644
index 0000000000..4d96dd0f64
--- /dev/null
+++ b/src/schedule-and-details/schedule-section/ScheduleSection.scss
@@ -0,0 +1,38 @@
+.schedule-section {
+  .schedule-date-list {
+    display: flex;
+    flex-direction: column;
+    padding-top: $spacer;
+    margin: 0;
+    padding-inline-start: 0;
+    list-style-type: none;
+
+    .pgn__form-group {
+      flex-basis: 48%;
+    }
+  }
+
+  .schedule-date-item {
+    &:not(:last-child) {
+      margin-bottom: 1.19rem;
+    }
+  }
+
+  .schedule-date-item-container {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 1.5rem;
+    border-bottom: .063rem solid rgba(0 0 0 / .1);
+    padding-bottom: .625rem;
+    margin-bottom: .375rem;
+    padding-right: 10%;
+  }
+
+  .schedule-date-item-error {
+    margin: 0;
+    padding: 0;
+    color: $form-feedback-invalid-color;
+    font: normal $font-weight-normal .75rem/1.25rem $font-family-base;
+  }
+}
diff --git a/src/schedule-and-details/schedule-section/ScheduleSection.test.jsx b/src/schedule-and-details/schedule-section/ScheduleSection.test.jsx
new file mode 100644
index 0000000000..6e9b2dc9cb
--- /dev/null
+++ b/src/schedule-and-details/schedule-section/ScheduleSection.test.jsx
@@ -0,0 +1,74 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import { courseDetailsMock, courseSettingsMock } from '../__mocks__';
+import messages from './messages';
+import certificateMessages from './certificate-display-row/messages';
+import ScheduleSection from '.';
+
+describe('<ScheduleSection />', () => {
+  const onChangeMock = jest.fn();
+  const RootWrapper = (props) => (
+    <IntlProvider locale="en">
+      <ScheduleSection {...props} />
+    </IntlProvider>
+  );
+
+  const {
+    platformName,
+    upgradeDeadline,
+    enrollmentEndEditable,
+    canShowCertificateAvailableDateField,
+  } = courseSettingsMock;
+
+  const {
+    endDate,
+    startDate,
+    enrollmentEnd,
+    enrollmentStart,
+    certificateAvailableDate,
+    certificatesDisplayBehavior,
+  } = courseDetailsMock;
+
+  const props = {
+    intl: {},
+    endDate,
+    startDate,
+    errorFields: {},
+    platformName,
+    enrollmentEnd,
+    enrollmentStart,
+    upgradeDeadline,
+    enrollmentEndEditable,
+    certificateAvailableDate,
+    certificatesDisplayBehavior,
+    canShowCertificateAvailableDateField,
+    onChange: onChangeMock,
+  };
+
+  it('renders schedule section successfully', () => {
+    const { getByText, queryAllByText } = render(<RootWrapper {...props} />);
+    expect(getByText(messages.scheduleTitle.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.scheduleDescription.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.scheduleCourseStartDateLabel.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.scheduleCourseStartTimeLabel.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.scheduleCourseEndDateLabel.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.scheduleCourseEndTimeLabel.defaultMessage)).toBeInTheDocument();
+    expect(queryAllByText(certificateMessages.certificateBehaviorLabel.defaultMessage).length).toBe(0);
+    expect(queryAllByText(certificateMessages.certificateAvailableDateLabel.defaultMessage).length).toBe(0);
+    expect(getByText(messages.scheduleEnrollmentStartDateLabel.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.scheduleEnrollmentStartTimeLabel.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.scheduleEnrollmentEndDateLabel.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.scheduleEnrollmentEndTimeLabel.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.scheduleUpgradeDeadlineDateLabel.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.scheduleUpgradeDeadlineTimeLabel.defaultMessage)).toBeInTheDocument();
+  });
+
+  it('renders certificate behavior with condition', () => {
+    const initialProps = { ...props, canShowCertificateAvailableDateField: true };
+    const { getByText, queryAllByText } = render(<RootWrapper {...initialProps} />);
+    expect(getByText(certificateMessages.certificateBehaviorLabel.defaultMessage)).toBeInTheDocument();
+    expect(queryAllByText(certificateMessages.certificateAvailableDateLabel.defaultMessage).length).toBe(0);
+  });
+});
diff --git a/src/schedule-and-details/schedule-section/certificate-display-row/CertificateDisplayRow.jsx b/src/schedule-and-details/schedule-section/certificate-display-row/CertificateDisplayRow.jsx
new file mode 100644
index 0000000000..7b47a99f64
--- /dev/null
+++ b/src/schedule-and-details/schedule-section/certificate-display-row/CertificateDisplayRow.jsx
@@ -0,0 +1,185 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import {
+  Dropdown, Form, Collapsible, Icon,
+} from '@openedx/paragon';
+import { InfoOutline } from '@openedx/paragon/icons';
+
+import { getLabelById } from '../../../utils';
+import { DatepickerControl, DATEPICKER_TYPES } from '../../../generic/datepicker-control';
+import messages from './messages';
+
+export const CERTIFICATE_DISPLAY_BEHAVIOR = {
+  earlyNoInfo: 'early_no_info',
+  end: 'end',
+  endWithDate: 'end_with_date',
+};
+
+const CertificateDisplayRow = ({
+  certificateAvailableDate,
+  availableDateErrorFeedback,
+  certificatesDisplayBehavior,
+  displayBehaviorErrorFeedback,
+  onChange,
+}) => {
+  const intl = useIntl();
+  const dropdownOptions = [
+    {
+      id: CERTIFICATE_DISPLAY_BEHAVIOR.earlyNoInfo,
+      label: intl.formatMessage(messages.certificateBehaviorDropdownOption1),
+    },
+    {
+      id: CERTIFICATE_DISPLAY_BEHAVIOR.end,
+      label: intl.formatMessage(messages.certificateBehaviorDropdownOption2),
+    },
+    {
+      id: CERTIFICATE_DISPLAY_BEHAVIOR.endWithDate,
+      label: intl.formatMessage(messages.certificateBehaviorDropdownOption3),
+    },
+  ];
+
+  const formatCertificateDisplayBehavior = (value) => {
+    if (!value) {
+      return '';
+    }
+
+    if (Object.values(CERTIFICATE_DISPLAY_BEHAVIOR).includes(value)) {
+      return value;
+    }
+
+    return value.split('.')[1].toLowerCase();
+  };
+
+  const handleOnChange = (optionId) => {
+    if (optionId !== CERTIFICATE_DISPLAY_BEHAVIOR.endWithDate) {
+      onChange('', 'certificateAvailableDate');
+    }
+    onChange(optionId, 'certificatesDisplayBehavior');
+  };
+
+  const formattedCertificateBehavior = formatCertificateDisplayBehavior(
+    certificatesDisplayBehavior,
+  );
+
+  const certificateDisplayValue = getLabelById(dropdownOptions, formattedCertificateBehavior)
+    || intl.formatMessage(messages.certificateBehaviorDropdownEmpty);
+
+  const showAvailableDate = formattedCertificateBehavior === CERTIFICATE_DISPLAY_BEHAVIOR.endWithDate;
+
+  const renderReadMoreToggle = () => {
+    const readMore = [
+      {
+        heading: intl.formatMessage(
+          messages.certificateDisplayBehaviorToggleHeading1,
+        ),
+        paragraph: intl.formatMessage(
+          messages.certificateDisplayBehaviorToggleParagraph1,
+        ),
+      },
+      {
+        heading: intl.formatMessage(
+          messages.certificateDisplayBehaviorToggleHeading2,
+        ),
+        paragraph: intl.formatMessage(
+          messages.certificateDisplayBehaviorToggleParagraph2,
+        ),
+      },
+      {
+        heading: intl.formatMessage(
+          messages.certificateDisplayBehaviorToggleHeading3,
+        ),
+        paragraph: intl.formatMessage(
+          messages.certificateDisplayBehaviorToggleParagraph3,
+        ),
+      },
+    ];
+
+    return (
+      <Collapsible.Advanced>
+        <Collapsible.Trigger className="d-flex small text-primary-500 align-items-center mt-3">
+          <Icon className="mr-1" src={InfoOutline} />
+          {intl.formatMessage(messages.certificateDisplayBehaviorToggleTitle)}
+        </Collapsible.Trigger>
+        <Collapsible.Body className="mt-2.5">
+          <p className="x-small text-gray-500">
+            {intl.formatMessage(
+              messages.certificateDisplayBehaviorToggleParagraph,
+            )}
+          </p>
+          {readMore.map(({ heading, paragraph }) => (
+            <div className="mt-2" key={heading}>
+              <p className="h6 text-gray-700 mt-1">{heading}</p>
+              <p className="x-small text-gray-500 mt-1">{paragraph}</p>
+            </div>
+          ))}
+        </Collapsible.Body>
+      </Collapsible.Advanced>
+    );
+  };
+
+  return (
+    <li className="schedule-date-item">
+      <div className="schedule-date-item-container">
+        <Form.Group className="form-group-custom">
+          <Form.Label>
+            {intl.formatMessage(messages.certificateBehaviorLabel)}
+          </Form.Label>
+          <Dropdown claswsName="bg-white">
+            <Dropdown.Toggle id="certificate-behavior-dropdown" variant="outline-primary">
+              {certificateDisplayValue}
+            </Dropdown.Toggle>
+            <Dropdown.Menu>
+              {dropdownOptions.map(({ id, label }) => (
+                <Dropdown.Item key={id} onClick={() => handleOnChange(id)}>
+                  {label}
+                </Dropdown.Item>
+              ))}
+            </Dropdown.Menu>
+          </Dropdown>
+          <Form.Control.Feedback>
+            {intl.formatMessage(messages.certificateBehaviorHelpText)}
+          </Form.Control.Feedback>
+          {showAvailableDate && (
+            <DatepickerControl
+              label={intl.formatMessage(messages.certificateAvailableDateLabel)}
+              value={certificateAvailableDate}
+              type={DATEPICKER_TYPES.date}
+              onChange={(date) => onChange(date, 'certificateAvailableDate')}
+              isInvalid={!!availableDateErrorFeedback}
+              controlName="certificateAvailableDate"
+            />
+          )}
+          {availableDateErrorFeedback && (
+            <span className="schedule-date-item-error">
+              {availableDateErrorFeedback}
+            </span>
+          )}
+          {displayBehaviorErrorFeedback && (
+            <span className="schedule-date-item-error">
+              {displayBehaviorErrorFeedback}
+            </span>
+          )}
+          {renderReadMoreToggle()}
+        </Form.Group>
+      </div>
+    </li>
+  );
+};
+
+CertificateDisplayRow.defaultProps = {
+  certificateAvailableDate: '',
+  availableDateErrorFeedback: '',
+  certificatesDisplayBehavior: '',
+  displayBehaviorErrorFeedback: '',
+};
+
+CertificateDisplayRow.propTypes = {
+  certificateAvailableDate: PropTypes.string,
+  availableDateErrorFeedback: PropTypes.string,
+  certificatesDisplayBehavior: PropTypes.string,
+  displayBehaviorErrorFeedback: PropTypes.string,
+  onChange: PropTypes.func.isRequired,
+};
+
+export default CertificateDisplayRow;
diff --git a/src/schedule-and-details/schedule-section/certificate-display-row/CertificateDisplayRow.scss b/src/schedule-and-details/schedule-section/certificate-display-row/CertificateDisplayRow.scss
new file mode 100644
index 0000000000..e715d7f18f
--- /dev/null
+++ b/src/schedule-and-details/schedule-section/certificate-display-row/CertificateDisplayRow.scss
@@ -0,0 +1,39 @@
+.dropdown-certificate {
+  .dropdown-certificate-label {
+    font: normal $font-weight-bold .75rem/1.25rem $font-family-base;
+    color: $gray-500;
+    margin-bottom: .5rem;
+  }
+
+  .dropdown-certificate-control {
+    .dropdown-certificate-control-toggle {
+      font-size: $input-font-size;
+      font-weight: $input-font-weight;
+      line-height: $input-line-height;
+      background: $input-bg;
+      border-color: $input-border-color;
+      border-width: $input-border-width;
+      box-shadow: $input-box-shadow;
+      border-radius: $input-border-radius;
+      color: $input-color;
+      padding: $input-padding-y $input-padding-x;
+      height: $input-height;
+      justify-content: space-between;
+      width: 100%;
+
+      &:not(:disabled, .disabled):active,
+      &:not(:disabled, .disabled).active,
+      .show & {
+        color: $input-color;
+        border-color: $input-bg;
+        background-color: $input-bg;
+      }
+    }
+  }
+
+  .pgn__form-control-description {
+    font: normal $font-weight-normal .75rem/1.25rem $font-family-base;
+    color: $gray-500;
+    margin-top: .5rem;
+  }
+}
diff --git a/src/schedule-and-details/schedule-section/certificate-display-row/CertificateDisplayRow.test.jsx b/src/schedule-and-details/schedule-section/certificate-display-row/CertificateDisplayRow.test.jsx
new file mode 100644
index 0000000000..7b5a510a59
--- /dev/null
+++ b/src/schedule-and-details/schedule-section/certificate-display-row/CertificateDisplayRow.test.jsx
@@ -0,0 +1,96 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import { courseDetailsMock } from '../../__mocks__';
+import messages from './messages';
+import { CERTIFICATE_DISPLAY_BEHAVIOR, CertificateDisplayRow } from '.';
+
+describe('<CertificateDisplayRow />', () => {
+  const onChangeMock = jest.fn();
+  const RootWrapper = (props) => (
+    <IntlProvider locale="en">
+      <CertificateDisplayRow {...props} />
+    </IntlProvider>
+  );
+
+  const props = {
+    intl: {},
+    certificateAvailableDate: courseDetailsMock.certificateAvailableDate,
+    availableDateErrorFeedback: '',
+    certificatesDisplayBehavior: courseDetailsMock.certificatesDisplayBehavior,
+    displayBehaviorErrorFeedback: '',
+    onChange: onChangeMock,
+  };
+
+  it('renders without crashing', () => {
+    const { getByText, getByRole, queryAllByText } = render(
+      <RootWrapper {...props} />,
+    );
+    const buttonReadMore = getByRole('button', {
+      name: messages.certificateDisplayBehaviorToggleTitle.defaultMessage,
+    });
+    expect(
+      getByText(messages.certificateBehaviorLabel.defaultMessage),
+    ).toBeInTheDocument();
+    expect(
+      getByText(messages.certificateBehaviorHelpText.defaultMessage),
+    ).toBeInTheDocument();
+    expect(buttonReadMore).toBeInTheDocument();
+    expect(
+      queryAllByText(messages.certificateAvailableDateLabel.defaultMessage)
+        .length,
+    ).toBe(0);
+  });
+
+  it('shows more text on click button', () => {
+    const { getByText, getByRole } = render(<RootWrapper {...props} />);
+    const buttonReadMore = getByRole('button', {
+      name: messages.certificateDisplayBehaviorToggleTitle.defaultMessage,
+    });
+    fireEvent.click(buttonReadMore);
+    expect(
+      getByText(
+        messages.certificateDisplayBehaviorToggleHeading1.defaultMessage,
+      ),
+    ).toBeInTheDocument();
+    expect(
+      getByText(
+        messages.certificateDisplayBehaviorToggleHeading2.defaultMessage,
+      ),
+    ).toBeInTheDocument();
+    expect(
+      getByText(
+        messages.certificateDisplayBehaviorToggleHeading3.defaultMessage,
+      ),
+    ).toBeInTheDocument();
+  });
+
+  it('toggles different option', () => {
+    const { getByText, getByRole } = render(<RootWrapper {...props} />);
+    const button = getByRole('button', {
+      name: messages.certificateBehaviorDropdownOption2.defaultMessage,
+    });
+    fireEvent.click(button);
+    const option = getByText(
+      messages.certificateBehaviorDropdownOption3.defaultMessage,
+    );
+    expect(option).toBeInTheDocument();
+    fireEvent.click(option);
+    const updatedButtonReadMore = screen.getByRole('button', {
+      name: messages.certificateBehaviorDropdownOption3.defaultMessage,
+    });
+    expect(updatedButtonReadMore).toBeInTheDocument();
+  });
+
+  it('should show certificate available datepicker', () => {
+    const initialProps = {
+      ...props,
+      certificatesDisplayBehavior: CERTIFICATE_DISPLAY_BEHAVIOR.endWithDate,
+    };
+    const { getByText } = render(<RootWrapper {...initialProps} />);
+    expect(
+      getByText(messages.certificateAvailableDateLabel.defaultMessage),
+    ).toBeInTheDocument();
+  });
+});
diff --git a/src/schedule-and-details/schedule-section/certificate-display-row/index.js b/src/schedule-and-details/schedule-section/certificate-display-row/index.js
new file mode 100644
index 0000000000..2d57fa67ae
--- /dev/null
+++ b/src/schedule-and-details/schedule-section/certificate-display-row/index.js
@@ -0,0 +1,2 @@
+export { default as CertificateDisplayRow } from './CertificateDisplayRow';
+export { CERTIFICATE_DISPLAY_BEHAVIOR } from './CertificateDisplayRow';
diff --git a/src/schedule-and-details/schedule-section/certificate-display-row/messages.js b/src/schedule-and-details/schedule-section/certificate-display-row/messages.js
new file mode 100644
index 0000000000..d6025f6737
--- /dev/null
+++ b/src/schedule-and-details/schedule-section/certificate-display-row/messages.js
@@ -0,0 +1,66 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  certificateBehaviorLabel: {
+    id: 'course-authoring.schedule.schedule-section.certificate-behavior.label',
+    defaultMessage: 'Certificate display behavior',
+  },
+  certificateBehaviorHelpText: {
+    id: 'course-authoring.schedule.schedule-section.certificate-behavior.help-text',
+    defaultMessage: 'Certificates are awarded at the end of a course run',
+  },
+  certificateAvailableDateLabel: {
+    id: 'course-authoring.schedule.schedule-section.certificate-available-date.label',
+    defaultMessage: 'Certificate available date',
+  },
+  certificateDisplayBehaviorToggleTitle: {
+    id: 'course-authoring.schedule.schedule-section.certificate-behavior.toggle.title',
+    defaultMessage: 'Read more about this setting',
+  },
+  certificateDisplayBehaviorToggleParagraph: {
+    id: 'course-authoring.schedule.schedule-section.certificate-behavior.toggle.paragraph',
+    defaultMessage: 'In all configurations of this setting, certificates are generated for learners as soon as they achieve the passing threshold in the course (which can occur before a final assignment based on course design).',
+  },
+  certificateDisplayBehaviorToggleHeading1: {
+    id: 'course-authoring.schedule.schedule-section.certificate-behavior.toggle.heading-1',
+    defaultMessage: 'Immediately upon passing',
+  },
+  certificateDisplayBehaviorToggleParagraph1: {
+    id: 'course-authoring.schedule.schedule-section.certificate-behavior.toggle.paragraph-1',
+    defaultMessage: 'Learners can access their certificate as soon as they achieve a passing grade above the course grade threshold. Note: learners can achieve a passing grade before encountering all assignments in some course configurations.',
+  },
+  certificateDisplayBehaviorToggleHeading2: {
+    id: 'course-authoring.schedule.schedule-section.certificate-behavior.toggle.heading-2',
+    defaultMessage: 'On course end date',
+  },
+  certificateDisplayBehaviorToggleParagraph2: {
+    id: 'course-authoring.schedule.schedule-section.certificate-behavior.toggle.paragraph-2',
+    defaultMessage: 'Learners with passing grades can access their certificate once the end date of the course has elapsed.',
+  },
+  certificateDisplayBehaviorToggleHeading3: {
+    id: 'course-authoring.schedule.schedule-section.certificate-behavior.toggle.heading-3',
+    defaultMessage: 'A date after the course end date',
+  },
+  certificateDisplayBehaviorToggleParagraph3: {
+    id: 'course-authoring.schedule.schedule-section.certificate-behavior.toggle.paragraph-3',
+    defaultMessage: 'Learners with passing grades can access their certificate after the date that you set has elapsed.',
+  },
+  certificateBehaviorDropdownOption1: {
+    id: 'course-authoring.schedule.schedule-section.certificate-behavior.dropdown.option-1',
+    defaultMessage: 'Immediately upon passing',
+  },
+  certificateBehaviorDropdownOption2: {
+    id: 'course-authoring.schedule.schedule-section.certificate-behavior.dropdown.option-2',
+    defaultMessage: 'End date of course',
+  },
+  certificateBehaviorDropdownOption3: {
+    id: 'course-authoring.schedule.schedule-section.certificate-behavior.dropdown.option-3',
+    defaultMessage: 'A date after the course end date',
+  },
+  certificateBehaviorDropdownEmpty: {
+    id: 'course-authoring.schedule.schedule-section.certificate-behavior.dropdown.empty',
+    defaultMessage: 'Select certificate display behavior',
+  },
+});
+
+export default messages;
diff --git a/src/schedule-and-details/schedule-section/index.jsx b/src/schedule-and-details/schedule-section/index.jsx
new file mode 100644
index 0000000000..e7098b3921
--- /dev/null
+++ b/src/schedule-and-details/schedule-section/index.jsx
@@ -0,0 +1,170 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import SectionSubHeader from '../../generic/section-sub-header';
+import { ScheduleRow, SCHEDULE_ROW_TYPES } from './schedule-row';
+import { CertificateDisplayRow } from './certificate-display-row';
+import messages from './messages';
+
+const ScheduleSection = ({
+  endDate,
+  startDate,
+  errorFields,
+  platformName,
+  enrollmentEnd,
+  enrollmentStart,
+  upgradeDeadline,
+  enrollmentEndEditable,
+  certificateAvailableDate,
+  certificatesDisplayBehavior,
+  canShowCertificateAvailableDateField,
+  onChange,
+}) => {
+  const intl = useIntl();
+  const enrollmentEndHelpText = intl.formatMessage(
+    messages.scheduleEnrollmentEndDateHelpText,
+  );
+  const enrollmentEndHelpTexRestricted = intl.formatMessage(
+    messages.scheduleEnrollmentEndDateRestrictedHelpText,
+    { platformName },
+  );
+  const computedEnrollmentEndHelpText = `${enrollmentEndHelpText} ${
+    !enrollmentEndEditable ? enrollmentEndHelpTexRestricted : ''
+  }`;
+
+  const propsForScheduleFields = [
+    {
+      value: startDate,
+      labels: [
+        intl.formatMessage(messages.scheduleCourseStartDateLabel),
+        intl.formatMessage(messages.scheduleCourseStartTimeLabel),
+      ],
+      rowType: SCHEDULE_ROW_TYPES.datetime,
+      helpText: intl.formatMessage(messages.scheduleCourseStartDateHelpText),
+      controlName: 'startDate',
+      errorFeedback: errorFields?.startDate,
+    },
+    {
+      labels: [
+        intl.formatMessage(messages.scheduleCourseEndDateLabel),
+        intl.formatMessage(messages.scheduleCourseEndTimeLabel),
+      ],
+      value: endDate,
+      rowType: SCHEDULE_ROW_TYPES.datetime,
+      helpText: intl.formatMessage(messages.scheduleCourseEndDateHelpText),
+      controlName: 'endDate',
+      errorFeedback: errorFields?.endDate,
+    },
+    {
+      skip: !canShowCertificateAvailableDateField,
+      key: 'certificate-display-row',
+      rowType: SCHEDULE_ROW_TYPES.dropdown,
+      certificateAvailableDate,
+      availableDateErrorFeedback: errorFields?.certificateAvailableDate,
+      certificatesDisplayBehavior,
+      displayBehaviorErrorFeedback: errorFields?.certificatesDisplayBehavior,
+    },
+    {
+      labels: [
+        intl.formatMessage(messages.scheduleEnrollmentStartDateLabel),
+        intl.formatMessage(messages.scheduleEnrollmentStartTimeLabel),
+      ],
+      value: enrollmentStart,
+      rowType: SCHEDULE_ROW_TYPES.datetime,
+      helpText: intl.formatMessage(messages.scheduleEnrollmentStartDateHelpText),
+      controlName: 'enrollmentStart',
+      errorFeedback: errorFields?.enrollmentStart,
+    },
+    {
+      labels: [
+        intl.formatMessage(messages.scheduleEnrollmentEndDateLabel),
+        intl.formatMessage(messages.scheduleEnrollmentEndTimeLabel),
+      ],
+      value: enrollmentEnd,
+      rowType: SCHEDULE_ROW_TYPES.datetime,
+      helpText: computedEnrollmentEndHelpText,
+      readonly: !enrollmentEndEditable,
+      controlName: 'enrollmentEnd',
+      errorFeedback: errorFields?.enrollmentEnd,
+    },
+    {
+      skip: !upgradeDeadline,
+      labels: [
+        intl.formatMessage(messages.scheduleUpgradeDeadlineDateLabel),
+        intl.formatMessage(messages.scheduleUpgradeDeadlineTimeLabel),
+      ],
+      value: upgradeDeadline,
+      rowType: SCHEDULE_ROW_TYPES.datetime,
+      helpText: intl.formatMessage(
+        messages.scheduleUpgradeDeadlineDateHelpText,
+        {
+          platformName,
+        },
+      ),
+      readonly: true,
+      controlName: 'upgradeDeadline',
+      errorFeedback: errorFields?.upgradeDeadline,
+    },
+  ];
+
+  return (
+    <section className="section-container schedule-section" id="schedule">
+      <SectionSubHeader
+        title={intl.formatMessage(messages.scheduleTitle)}
+        description={intl.formatMessage(messages.scheduleDescription)}
+      />
+      <ul className="schedule-date-list">
+        {propsForScheduleFields
+          .filter((field) => !field.skip)
+          .map((fieldProps) => {
+            if (fieldProps.rowType === SCHEDULE_ROW_TYPES.datetime) {
+              const { skip, rowType, ...restProps } = fieldProps;
+              return (
+                <ScheduleRow
+                  {...restProps}
+                  key={fieldProps.controlName}
+                  onChange={onChange}
+                />
+              );
+            }
+            const { rowType, key, ...restProps } = fieldProps;
+            return (
+              <CertificateDisplayRow
+                {...restProps}
+                key={key}
+                onChange={onChange}
+              />
+            );
+          })}
+      </ul>
+    </section>
+  );
+};
+
+ScheduleSection.defaultProps = {
+  endDate: '',
+  startDate: '',
+  errorFields: {},
+  enrollmentEnd: '',
+  enrollmentStart: '',
+  upgradeDeadline: '',
+  certificateAvailableDate: '',
+};
+
+ScheduleSection.propTypes = {
+  endDate: PropTypes.string,
+  startDate: PropTypes.string,
+  errorFields: PropTypes.objectOf(PropTypes.string),
+  platformName: PropTypes.string.isRequired,
+  enrollmentEnd: PropTypes.string,
+  enrollmentStart: PropTypes.string,
+  upgradeDeadline: PropTypes.string,
+  enrollmentEndEditable: PropTypes.bool.isRequired,
+  certificateAvailableDate: PropTypes.string,
+  certificatesDisplayBehavior: PropTypes.string.isRequired,
+  canShowCertificateAvailableDateField: PropTypes.bool.isRequired,
+  onChange: PropTypes.func.isRequired,
+};
+
+export default ScheduleSection;
diff --git a/src/schedule-and-details/schedule-section/messages.js b/src/schedule-and-details/schedule-section/messages.js
new file mode 100644
index 0000000000..aa3da3da71
--- /dev/null
+++ b/src/schedule-and-details/schedule-section/messages.js
@@ -0,0 +1,78 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  scheduleTitle: {
+    id: 'course-authoring.schedule.schedule-section.title',
+    defaultMessage: 'Course schedule',
+  },
+  scheduleDescription: {
+    id: 'course-authoring.schedule.schedule-section.description',
+    defaultMessage: 'Dates that control when your course can be viewed',
+  },
+  scheduleCourseStartDateLabel: {
+    id: 'course-authoring.schedule.schedule-section.course-start.date.label',
+    defaultMessage: 'Course start date',
+  },
+  scheduleCourseStartDateHelpText: {
+    id: 'course-authoring.schedule.schedule-section.course-start.date.help-text',
+    defaultMessage: 'First day the course begins',
+  },
+  scheduleCourseStartTimeLabel: {
+    id: 'course-authoring.schedule.schedule-section.course-start.time.label',
+    defaultMessage: 'Course start time',
+  },
+  scheduleCourseEndDateLabel: {
+    id: 'course-authoring.schedule.schedule-section.course-end.date.label',
+    defaultMessage: 'Course end date',
+  },
+  scheduleCourseEndDateHelpText: {
+    id: 'course-authoring.schedule.schedule-section.course-end.date.help-text',
+    defaultMessage: 'Last day your course is active',
+  },
+  scheduleCourseEndTimeLabel: {
+    id: 'course-authoring.schedule.schedule-section.course-end.time.label',
+    defaultMessage: 'Course end time',
+  },
+  scheduleEnrollmentStartDateLabel: {
+    id: 'course-authoring.schedule.schedule-section.enrollment-start.date.label',
+    defaultMessage: 'Enrollment start date',
+  },
+  scheduleEnrollmentStartDateHelpText: {
+    id: 'course-authoring.schedule.schedule-section.enrollment-start.help-text',
+    defaultMessage: 'First day students can enroll',
+  },
+  scheduleEnrollmentStartTimeLabel: {
+    id: 'course-authoring.schedule.schedule-section.enrollment-start.time.label',
+    defaultMessage: 'Enrollment start time',
+  },
+  scheduleEnrollmentEndDateLabel: {
+    id: 'course-authoring.schedule.schedule-section.enrollment-end.date.label',
+    defaultMessage: 'Enrollment end date',
+  },
+  scheduleEnrollmentEndDateHelpText: {
+    id: 'course-authoring.schedule.schedule-section.enrollment-end.date.help-text',
+    defaultMessage: 'Last day students can enroll.',
+  },
+  scheduleEnrollmentEndDateRestrictedHelpText: {
+    id: 'course-authoring.schedule.schedule-section.enrollment-end.date.restricted.help-text',
+    defaultMessage: 'Contact your {platformName} partner manager to update these settings.',
+  },
+  scheduleEnrollmentEndTimeLabel: {
+    id: 'course-authoring.schedule.schedule-section.enrollment-end.time.label',
+    defaultMessage: 'Enrollment end time',
+  },
+  scheduleUpgradeDeadlineDateLabel: {
+    id: 'course-authoring.schedule.schedule-section.upgrade-deadline.date.label',
+    defaultMessage: 'Upgrade deadline date',
+  },
+  scheduleUpgradeDeadlineDateHelpText: {
+    id: 'course-authoring.schedule.schedule-section.upgrade-deadline.date.help-text',
+    defaultMessage: 'Last day students can upgrade to a verified enrollment. Contact your {platformName} partner manager to update these settings.',
+  },
+  scheduleUpgradeDeadlineTimeLabel: {
+    id: 'course-authoring.schedule.schedule-section.upgrade-deadline.time.label',
+    defaultMessage: 'Upgrade deadline time',
+  },
+});
+
+export default messages;
diff --git a/src/schedule-and-details/schedule-section/schedule-row/ScheduleRow.jsx b/src/schedule-and-details/schedule-section/schedule-row/ScheduleRow.jsx
new file mode 100644
index 0000000000..74456c4117
--- /dev/null
+++ b/src/schedule-and-details/schedule-section/schedule-row/ScheduleRow.jsx
@@ -0,0 +1,66 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { DatepickerControl, DATEPICKER_TYPES } from '../../../generic/datepicker-control';
+
+export const SCHEDULE_ROW_TYPES = {
+  datetime: 'datetime',
+  dropdown: 'dropdown',
+};
+
+export const ScheduleRow = ({
+  value,
+  labels,
+  helpText,
+  readonly,
+  controlName,
+  errorFeedback,
+  onChange,
+}) => (
+  <li className="schedule-date-item">
+    <div className="schedule-date-item-container">
+      <DatepickerControl
+        type={DATEPICKER_TYPES.date}
+        value={value}
+        label={labels[0]}
+        helpText={helpText}
+        readonly={readonly}
+        isInvalid={!!errorFeedback}
+        controlName={`${controlName}-date`}
+        onChange={(date) => onChange(date, controlName)}
+      />
+      <DatepickerControl
+        type={DATEPICKER_TYPES.time}
+        value={value}
+        label={labels[1]}
+        readonly={readonly}
+        isInvalid={!!errorFeedback}
+        controlName={`${controlName}-time`}
+        onChange={(date) => onChange(date, controlName)}
+        showUTC
+      />
+    </div>
+    {errorFeedback && (
+      <span className="schedule-date-item-error">{errorFeedback}</span>
+    )}
+  </li>
+);
+
+ScheduleRow.defaultProps = {
+  value: '',
+  helpText: '',
+  readonly: false,
+  errorFeedback: '',
+};
+
+ScheduleRow.propTypes = {
+  value: PropTypes.string,
+  labels: PropTypes.arrayOf(PropTypes.string).isRequired,
+  helpText: PropTypes.string,
+  readonly: PropTypes.bool,
+  controlName: PropTypes.string.isRequired,
+  errorFeedback: PropTypes.string,
+  onChange: PropTypes.func.isRequired,
+};
+
+export default ScheduleRow;
diff --git a/src/schedule-and-details/schedule-section/schedule-row/ScheduleRow.test.jsx b/src/schedule-and-details/schedule-section/schedule-row/ScheduleRow.test.jsx
new file mode 100644
index 0000000000..7535808182
--- /dev/null
+++ b/src/schedule-and-details/schedule-section/schedule-row/ScheduleRow.test.jsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import { courseDetailsMock } from '../../__mocks__';
+import { ScheduleRow } from '.';
+
+describe('<ScheduleRow />', () => {
+  const onChangeMock = jest.fn();
+  const RootWrapper = (props) => (
+    <IntlProvider locale="en">
+      <ScheduleRow {...props} />
+    </IntlProvider>
+  );
+
+  const props = {
+    value: courseDetailsMock.startDate,
+    labels: ['fooLabelDate', 'fooLabelTime'],
+    helpText: 'barHelpText',
+    readonly: false,
+    controlName: 'startDate',
+    errorFeedback: 'foo bar error',
+    onChange: onChangeMock,
+  };
+
+  it('renders without crashing', () => {
+    const { getByText, queryAllByText } = render(<RootWrapper {...props} />);
+    expect(getByText(props.labels[0])).toBeInTheDocument();
+    expect(getByText(props.labels[1])).toBeInTheDocument();
+    expect(getByText(props.helpText)).toBeInTheDocument();
+    expect(getByText(props.errorFeedback)).toBeInTheDocument();
+    expect(queryAllByText(/(UTC)/i).length).toBe(1);
+  });
+
+  it('calls onChange on datepicker input change', () => {
+    const { getByPlaceholderText } = render(<RootWrapper {...props} />);
+    const input = getByPlaceholderText('MM/DD/YYYY');
+    fireEvent.change(input, { target: { value: '06/15/2023' } });
+    expect(onChangeMock).toHaveBeenCalledWith(
+      '2023-06-15T00:00:00Z',
+      props.controlName,
+    );
+  });
+});
diff --git a/src/schedule-and-details/schedule-section/schedule-row/index.js b/src/schedule-and-details/schedule-section/schedule-row/index.js
new file mode 100644
index 0000000000..65bed35ae7
--- /dev/null
+++ b/src/schedule-and-details/schedule-section/schedule-row/index.js
@@ -0,0 +1,2 @@
+export { default as ScheduleRow } from './ScheduleRow';
+export { SCHEDULE_ROW_TYPES } from './ScheduleRow';
diff --git a/src/schedule-and-details/schedule-sidebar/index.jsx b/src/schedule-and-details/schedule-sidebar/index.jsx
new file mode 100644
index 0000000000..cd6b79d75a
--- /dev/null
+++ b/src/schedule-and-details/schedule-sidebar/index.jsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import PropTypes from 'prop-types';
+
+import { HelpSidebar } from '../../generic/help-sidebar';
+import messages from './messages';
+
+const ScheduleSidebar = ({ courseId, proctoredExamSettingsUrl }) => {
+  const intl = useIntl();
+  return (
+    <HelpSidebar
+      courseId={courseId}
+      proctoredExamSettingsUrl={proctoredExamSettingsUrl}
+      showOtherSettings
+    >
+      <h4 className="help-sidebar-about-title">
+        {intl.formatMessage(messages.scheduleSidebarTitle)}
+      </h4>
+      <p className="help-sidebar-about-descriptions">
+        {intl.formatMessage(messages.scheduleSidebarAbout)}
+      </p>
+    </HelpSidebar>
+  );
+};
+
+ScheduleSidebar.defaultProps = {
+  proctoredExamSettingsUrl: '',
+};
+
+ScheduleSidebar.propTypes = {
+  courseId: PropTypes.string.isRequired,
+  proctoredExamSettingsUrl: PropTypes.string,
+};
+
+export default ScheduleSidebar;
diff --git a/src/schedule-and-details/schedule-sidebar/messages.js b/src/schedule-and-details/schedule-sidebar/messages.js
new file mode 100644
index 0000000000..5df18eab64
--- /dev/null
+++ b/src/schedule-and-details/schedule-sidebar/messages.js
@@ -0,0 +1,14 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  scheduleSidebarTitle: {
+    id: 'course-authoring.schedule.sidebar.about.title',
+    defaultMessage: 'How are these settings used?',
+  },
+  scheduleSidebarAbout: {
+    id: 'course-authoring.schedule.sidebar.about.text',
+    defaultMessage: "Your course's schedule determines when students can enroll in and begin a course. Other information from this page appears on the About page for your course. This information includes the course overview, course image, introduction video, and estimated time requirements. Students use About pages to choose new courses to take.",
+  },
+});
+
+export default messages;
diff --git a/src/schedule-and-details/utils.js b/src/schedule-and-details/utils.js
new file mode 100644
index 0000000000..efee1bf625
--- /dev/null
+++ b/src/schedule-and-details/utils.js
@@ -0,0 +1,86 @@
+import { CERTIFICATE_DISPLAY_BEHAVIOR } from './schedule-section/certificate-display-row';
+import { defaultEntranceExamMinimumScorePct } from './constants';
+import messages from './messages';
+
+const isDateBeforeOrEqual = (
+  dateFormer,
+  dateLatter,
+  allowEqual = false,
+  checkExists = true,
+) => {
+  if (checkExists && (!dateFormer || !dateLatter)) {
+    return false;
+  }
+  if (allowEqual) {
+    return new Date(dateFormer) < new Date(dateLatter);
+  }
+
+  return new Date(dateFormer) <= new Date(dateLatter);
+};
+
+const validateScheduleAndDetails = (courseDetails, canShowCertificateAvailableDate, intl) => {
+  const errors = {};
+  const {
+    endDate,
+    startDate,
+    enrollmentEnd,
+    enrollmentStart,
+    certificateAvailableDate,
+    entranceExamMinimumScorePct,
+    certificatesDisplayBehavior,
+  } = courseDetails;
+
+  if (!startDate) {
+    errors.startDate = intl.formatMessage(messages.errorMessage7);
+  }
+
+  if (isDateBeforeOrEqual(certificateAvailableDate, endDate) && canShowCertificateAvailableDate) {
+    errors.certificateAvailableDate = intl.formatMessage(messages.errorMessage6);
+  }
+
+  if (isDateBeforeOrEqual(endDate, startDate)) {
+    errors.endDate = intl.formatMessage(messages.errorMessage5);
+  }
+
+  if (isDateBeforeOrEqual(startDate, enrollmentStart, true)) {
+    errors.enrollmentStart = intl.formatMessage(messages.errorMessage4);
+  }
+
+  if (isDateBeforeOrEqual(enrollmentEnd, enrollmentStart)) {
+    errors.enrollmentStart = intl.formatMessage(messages.errorMessage3);
+  }
+
+  if (isDateBeforeOrEqual(endDate, enrollmentEnd, true)) {
+    errors.enrollmentEnd = intl.formatMessage(messages.errorMessage2);
+  }
+
+  if (
+    certificatesDisplayBehavior === CERTIFICATE_DISPLAY_BEHAVIOR.endWithDate
+    && !certificateAvailableDate
+  ) {
+    errors.certificateAvailableDate = intl.formatMessage(messages.errorMessage1);
+  }
+
+  if (entranceExamMinimumScorePct) {
+    const number = Number(entranceExamMinimumScorePct);
+    if (Number.isNaN(number) || number < 1 || number > 100) {
+      errors.entranceExamMinimumScorePct = intl.formatMessage(messages.errorMessage8);
+    }
+  }
+
+  return errors;
+};
+
+const updateWithDefaultValues = (values) => {
+  const { entranceExamMinimumScorePct } = values;
+  if (entranceExamMinimumScorePct === '') {
+    return {
+      ...values,
+      entranceExamMinimumScorePct: defaultEntranceExamMinimumScorePct,
+    };
+  }
+
+  return values;
+};
+
+export { updateWithDefaultValues, validateScheduleAndDetails };
diff --git a/src/schedule-and-details/utils.test.js b/src/schedule-and-details/utils.test.js
new file mode 100644
index 0000000000..53d6c37d91
--- /dev/null
+++ b/src/schedule-and-details/utils.test.js
@@ -0,0 +1,294 @@
+import { CERTIFICATE_DISPLAY_BEHAVIOR } from './schedule-section/certificate-display-row';
+import { validateScheduleAndDetails } from './utils';
+
+const intl = { formatMessage: (message) => message };
+
+describe('validateScheduleAndDetails', () => {
+  describe('startDate', () => {
+    it('should return without start date errors', () => {
+      const errors = validateScheduleAndDetails({ startDate: '01/01/1998' }, false, intl);
+      const hasStartDateError = Object.keys(errors).includes('startDate');
+
+      expect(hasStartDateError).toBeFalsy();
+    });
+
+    it('should return with start date error', () => {
+      const errors = validateScheduleAndDetails({ startDate: null }, false, intl);
+      const hasStartDateError = Object.keys(errors).includes('startDate');
+
+      expect(hasStartDateError).toBeTruthy();
+    });
+  });
+
+  describe('endDate', () => {
+    it('should return without end date errors', () => {
+      const errors = validateScheduleAndDetails(
+        { startDate: '01/01/1998', endDate: '01/01/1999' },
+        false,
+        intl,
+      );
+      const hasEndDateError = Object.keys(errors).includes('endDate');
+
+      expect(hasEndDateError).toBeFalsy();
+    });
+
+    it('should return with end date error', () => {
+      const errors = validateScheduleAndDetails(
+        { startDate: '01/01/1998', endDate: '01/01/1997' },
+        false,
+        intl,
+      );
+      const hasEndDateError = Object.keys(errors).includes('endDate');
+
+      expect(hasEndDateError).toBeTruthy();
+    });
+  });
+
+  describe('enrollmentStart', () => {
+    it('should return without enrollment start errors when start dates are equal', () => {
+      const errors = validateScheduleAndDetails(
+        { startDate: '01/01/1998', enrollmentStart: '01/01/1998' },
+        false,
+        intl,
+      );
+      const hasEnrollmentStartError = Object.keys(errors).includes('enrollmentStart');
+
+      expect(hasEnrollmentStartError).toBeFalsy();
+    });
+
+    it('should return without enrollment start error when enrollment start is before course start', () => {
+      const errors = validateScheduleAndDetails(
+        { startDate: '01/01/1999', enrollmentStart: '01/01/1998' },
+        false,
+        intl,
+      );
+      const hasEnrollmentStartError = Object.keys(errors).includes('enrollmentStart');
+
+      expect(hasEnrollmentStartError).toBeFalsy();
+    });
+
+    it('should return without enrollment start error when enrollment start is before enrollment end', () => {
+      const errors = validateScheduleAndDetails(
+        { enrollmentEnd: '01/01/1999', enrollmentStart: '01/01/1998' },
+        false,
+        intl,
+      );
+      const hasEnrollmentStartError = Object.keys(errors).includes('enrollmentStart');
+
+      expect(hasEnrollmentStartError).toBeFalsy();
+    });
+
+    it('should return with enrollment start error when enrolllments starts after course start', () => {
+      const errors = validateScheduleAndDetails(
+        { startDate: '01/01/1998', enrollmentStart: '01/02/1998' },
+        false,
+        intl,
+      );
+      const hasEnrollmentStartError = Object.keys(errors).includes('enrollmentStart');
+
+      expect(hasEnrollmentStartError).toBeTruthy();
+    });
+
+    it('should return with enrollment start error when enrolllments starts after enrollment end', () => {
+      const errors = validateScheduleAndDetails(
+        { enrollmentEnd: '01/01/1998', enrollmentStart: '01/02/1998' },
+        false,
+        intl,
+      );
+      const hasEnrollmentStartError = Object.keys(errors).includes('enrollmentStart');
+
+      expect(hasEnrollmentStartError).toBeTruthy();
+    });
+  });
+
+  describe('enrollmentEnd', () => {
+    it('should return without enrollment start errors when end dates are equal', () => {
+      const errors = validateScheduleAndDetails(
+        { enrollmentEnd: '01/01/1998', endDate: '01/01/1999' },
+        false,
+        intl,
+      );
+      const hasEnrollmentEndError = Object.keys(errors).includes('enrollmentEnd');
+
+      expect(hasEnrollmentEndError).toBeFalsy();
+    });
+
+    it('should return without enrollment start error when enrollment end is before course end', () => {
+      const errors = validateScheduleAndDetails(
+        { enrollmentEnd: '01/01/1998', endDate: '01/01/1999' },
+        false,
+        intl,
+      );
+      const hasEnrollmentEndError = Object.keys(errors).includes('enrollmentEnd');
+
+      expect(hasEnrollmentEndError).toBeFalsy();
+    });
+
+    it('should return with enrollment date error', () => {
+      const errors = validateScheduleAndDetails(
+        { enrollmentEnd: '01/01/1998', endDate: '01/01/1997' },
+        false,
+        intl,
+      );
+      const hasEnrollmentEndError = Object.keys(errors).includes('enrollmentEnd');
+
+      expect(hasEnrollmentEndError).toBeTruthy();
+    });
+  });
+
+  describe('certificateAvailableDate', () => {
+    describe('with canShowCertificateAvailableDate false', () => {
+      it('should return without certificate available errors when dates are vaild', () => {
+        const errors = validateScheduleAndDetails(
+          { certificateAvailableDate: '01/01/1999', endDate: '01/01/1998' },
+          false,
+          intl,
+        );
+        const hasCertificateAvailableError = Object.keys(errors).includes('certificateAvailableDate');
+
+        expect(hasCertificateAvailableError).toBeFalsy();
+      });
+
+      it('should return without certificate available errors when dates are invaild', () => {
+        const errors = validateScheduleAndDetails(
+          { certificateAvailableDate: '01/01/1997', endDate: '01/01/1998' },
+          false,
+          intl,
+        );
+        const hasCertificateAvailableError = Object.keys(errors).includes('certificateAvailableDate');
+
+        expect(hasCertificateAvailableError).toBeFalsy();
+      });
+    });
+
+    describe('with canShowCertificateAvailableDate true', () => {
+      it('should return without certificate available errors when dates are vaild', () => {
+        const errors = validateScheduleAndDetails(
+          { certificateAvailableDate: '01/01/1999', endDate: '01/01/1998' },
+          true,
+          intl,
+        );
+        const hasCertificateAvailableError = Object.keys(errors).includes('certificateAvailableDate');
+
+        expect(hasCertificateAvailableError).toBeFalsy();
+      });
+
+      it('should return with certificate available error', () => {
+        const errors = validateScheduleAndDetails(
+          { certificateAvailableDate: '01/01/1997', endDate: '01/01/1998' },
+          true,
+          intl,
+        );
+        const hasCertificateAvailableError = Object.keys(errors).includes('certificateAvailableDate');
+
+        expect(hasCertificateAvailableError).toBeTruthy();
+      });
+    });
+
+    describe('with certificatesDisplayBehavior equal to end_with_date', () => {
+      it('should return without certificate available errors when date has a value', () => {
+        const errors = validateScheduleAndDetails(
+          {
+            certificateAvailableDate: '01/01/1999',
+            certificatesDisplayBehavior: CERTIFICATE_DISPLAY_BEHAVIOR.endWithDate,
+          },
+          true,
+          intl,
+        );
+        const hasCertificateAvailableError = Object.keys(errors).includes('certificateAvailableDate');
+
+        expect(hasCertificateAvailableError).toBeFalsy();
+      });
+
+      it('should return with certificate available errors when date is empty', () => {
+        const errors = validateScheduleAndDetails(
+          {
+            certificateAvailableDate: '',
+            certificatesDisplayBehavior: CERTIFICATE_DISPLAY_BEHAVIOR.endWithDate,
+          },
+          true,
+          intl,
+        );
+        const hasCertificateAvailableError = Object.keys(errors).includes('certificateAvailableDate');
+
+        expect(hasCertificateAvailableError).toBeTruthy();
+      });
+    });
+
+    describe('with canShowCertificateAvailableDate not equal to end_with_date', () => {
+      it('should return without certificate available errors when date is empty', () => {
+        const errors = validateScheduleAndDetails(
+          {
+            certificateAvailableDate: '',
+            certificatesDisplayBehavior: CERTIFICATE_DISPLAY_BEHAVIOR.end,
+          },
+          true,
+          intl,
+        );
+        const hasCertificateAvailableError = Object.keys(errors).includes('certificateAvailableDate');
+
+        expect(hasCertificateAvailableError).toBeFalsy();
+      });
+
+      it('should return without certificate available errors when date is empty', () => {
+        const errors = validateScheduleAndDetails(
+          {
+            certificateAvailableDate: '',
+            certificatesDisplayBehavior: CERTIFICATE_DISPLAY_BEHAVIOR.earlyNoInfo,
+          },
+          true,
+          intl,
+        );
+        const hasCertificateAvailableError = Object.keys(errors).includes('certificateAvailableDate');
+
+        expect(hasCertificateAvailableError).toBeFalsy();
+      });
+    });
+  });
+
+  describe('entranceExamMinimumScore', () => {
+    it('should return without exam minimum score errors', () => {
+      const errors = validateScheduleAndDetails(
+        { entranceExamMinimumScorePct: '25' },
+        false,
+        intl,
+      );
+      const hasExamMinimumScoreError = Object.keys(errors).includes('entranceExamMinimumScorePct');
+
+      expect(hasExamMinimumScoreError).toBeFalsy();
+    });
+
+    it('should return with exam minimum score error with negative value', () => {
+      const errors = validateScheduleAndDetails(
+        { entranceExamMinimumScorePct: '-1' },
+        false,
+        intl,
+      );
+      const hasExamMinimumScoreError = Object.keys(errors).includes('entranceExamMinimumScorePct');
+
+      expect(hasExamMinimumScoreError).toBeTruthy();
+    });
+
+    it('should return with exam minimum score error with value greater than 100', () => {
+      const errors = validateScheduleAndDetails(
+        { entranceExamMinimumScorePct: '230' },
+        false,
+        intl,
+      );
+      const hasExamMinimumScoreError = Object.keys(errors).includes('entranceExamMinimumScorePct');
+
+      expect(hasExamMinimumScoreError).toBeTruthy();
+    });
+
+    it('should return with exam minimum score error with non-numerical value', () => {
+      const errors = validateScheduleAndDetails(
+        { entranceExamMinimumScorePct: 'test' },
+        false,
+        intl,
+      );
+      const hasExamMinimumScoreError = Object.keys(errors).includes('entranceExamMinimumScorePct');
+
+      expect(hasExamMinimumScoreError).toBeTruthy();
+    });
+  });
+});
diff --git a/src/search-manager/BlockTypeLabel.test.tsx b/src/search-manager/BlockTypeLabel.test.tsx
new file mode 100644
index 0000000000..385278b721
--- /dev/null
+++ b/src/search-manager/BlockTypeLabel.test.tsx
@@ -0,0 +1,73 @@
+import { render, screen } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import BlockTypeLabel from './BlockTypeLabel';
+import messages from './messages';
+
+const testCases = [
+  {
+    blockType: 'annotatable',
+    count: undefined,
+    expectedLabel: messages['blockType.annotatable'].defaultMessage,
+  },
+  {
+    blockType: 'chapter',
+    count: undefined,
+    expectedLabel: messages['blockType.chapter'].defaultMessage,
+  },
+  {
+    blockType: 'chapter',
+    count: 10,
+    expectedLabel: messages['blockType.chapter'].defaultMessage,
+  },
+  {
+    blockType: 'drag-and-drop-v2',
+    count: undefined,
+    expectedLabel: messages['blockType.drag-and-drop-v2'].defaultMessage,
+  },
+  {
+    blockType: 'multiplechoiceresponse',
+    count: undefined,
+    expectedLabel: messages['blockType.multiplechoiceresponse'].defaultMessage,
+  },
+  {
+    blockType: 'html',
+    count: undefined,
+    expectedLabel: messages['blockType.html'].defaultMessage,
+  },
+  {
+    blockType: 'collection',
+    count: undefined,
+    expectedLabel: messages['blockType.collection'].defaultMessage,
+  },
+  {
+    blockType: 'collection',
+    count: 0,
+    expectedLabel: messages['blockType.collection'].defaultMessage,
+  },
+  {
+    blockType: 'collection',
+    count: 10,
+    expectedLabel: 'Collection (10)',
+  },
+  // XBlock types without an explicit label are capitalized using the textTransform style
+  {
+    blockType: 'survey',
+    count: undefined,
+    expectedLabel: 'survey',
+  },
+];
+
+describe('<BlockTypeLabel />', () => {
+  test.each(testCases)(
+    'render BlockTypeLabel for $blockType (count=$count)',
+    ({ blockType, expectedLabel, count }) => {
+      render(
+        <IntlProvider locale="en">
+          <BlockTypeLabel blockType={blockType} count={count} />
+        </IntlProvider>,
+      );
+      expect(screen.getByText(expectedLabel)).toBeInTheDocument();
+    },
+  );
+});
diff --git a/src/search-manager/BlockTypeLabel.tsx b/src/search-manager/BlockTypeLabel.tsx
new file mode 100644
index 0000000000..f9602eb83e
--- /dev/null
+++ b/src/search-manager/BlockTypeLabel.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import messages from './messages';
+
+/**
+ * Displays a friendly, localized text name for the given XBlock/component type
+ * e.g. `vertical` becomes `"Unit"`
+ *
+ * Also accepts an optional `count` number, which will be displayed if
+ * it's non-zero and the block label supports it.
+ */
+const BlockTypeLabel: React.FC<{ blockType: string, count?: number }> = ({ blockType, count }) => {
+  const msg = messages[`blockType.${blockType}`];
+  const msgWithCount = messages[`blockType.${blockType}.with_count`];
+
+  if (count && msgWithCount) {
+    return <FormattedMessage values={{ count }} {...msgWithCount} />;
+  }
+
+  if (msg) {
+    return <FormattedMessage {...msg} />;
+  }
+
+  // Replace underscores and hypens with spaces, then let the browser capitalize this
+  // in a locale-aware way to get a reasonable display value.
+  // e.g. 'drag-and-drop-v2' -> "Drag And Drop V2"
+  return <span style={{ textTransform: 'capitalize' }}>{blockType.replace(/[_-]/g, ' ')}</span>;
+};
+
+export default BlockTypeLabel;
diff --git a/src/search-manager/ClearFiltersButton.tsx b/src/search-manager/ClearFiltersButton.tsx
new file mode 100644
index 0000000000..0328d38616
--- /dev/null
+++ b/src/search-manager/ClearFiltersButton.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import { Button } from '@openedx/paragon';
+import messages from './messages';
+import { useSearchContext } from './SearchManager';
+
+type ClearFiltersButtonProps = {
+  variant?: 'link' | 'primary',
+  size?: 'sm' | 'md' | 'lg' | 'inline',
+};
+
+/**
+ * A button that appears when at least one filter is active, and will clear the filters when clicked.
+ */
+const ClearFiltersButton = ({
+  variant = 'link',
+  size = 'sm',
+}: ClearFiltersButtonProps) => {
+  const { canClearFilters, clearFilters } = useSearchContext();
+  if (canClearFilters) {
+    return (
+      <Button variant={variant} size={size} onClick={clearFilters}>
+        <FormattedMessage {...messages.clearFilters} />
+      </Button>
+    );
+  }
+  return null;
+};
+
+export default ClearFiltersButton;
diff --git a/src/search-manager/FilterBy.scss b/src/search-manager/FilterBy.scss
new file mode 100644
index 0000000000..7579958f6f
--- /dev/null
+++ b/src/search-manager/FilterBy.scss
@@ -0,0 +1,27 @@
+// Options for the "filter by tag/block type" menu
+.pgn__menu.filter-by-refinement-menu {
+  .pgn__menu-item {
+    // Make the "filter by tag/block type" menu expand to fit the tags hierarchy and longer block type names
+    width: 100%;
+  }
+}
+
+.clear-filter-button:hover {
+  color: $info-900 !important;
+}
+
+.problem-menu-item {
+  .pgn__menu-item-text {
+    width: 100%;
+  }
+
+  .pgn__form-checkbox > div:first-of-type {
+    width: 100%;
+  }
+
+  .problem-sub-menu-item {
+    position: absolute;
+    left: 3.8rem;
+    top: -3rem;
+  }
+}
diff --git a/src/search-manager/FilterByBlockType.tsx b/src/search-manager/FilterByBlockType.tsx
new file mode 100644
index 0000000000..cd887e3cc3
--- /dev/null
+++ b/src/search-manager/FilterByBlockType.tsx
@@ -0,0 +1,296 @@
+import React, { useCallback, useEffect } from 'react';
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
+import {
+  Badge,
+  Form,
+  Icon,
+  IconButton,
+  Menu,
+  MenuItem,
+  ModalPopup,
+  useToggle,
+} from '@openedx/paragon';
+import { KeyboardArrowRight, FilterList } from '@openedx/paragon/icons';
+import SearchFilterWidget from './SearchFilterWidget';
+import messages from './messages';
+import BlockTypeLabel from './BlockTypeLabel';
+import { useSearchContext } from './SearchManager';
+
+interface ProblemFilterItemProps {
+  count: number,
+  handleCheckboxChange: Function,
+}
+interface FilterItemProps {
+  blockType: string,
+  count: number,
+}
+
+const ProblemFilterItem = ({ count, handleCheckboxChange } : ProblemFilterItemProps) => {
+  const blockType = 'problem';
+
+  const {
+    setBlockTypesFilter,
+    problemTypes,
+    problemTypesFilter,
+    blockTypesFilter,
+    setProblemTypesFilter,
+  } = useSearchContext();
+  const intl = useIntl();
+
+  const problemTypesLength = Object.values(problemTypes).length;
+
+  const [isProblemItemOpen, openProblemItem, closeProblemItem] = useToggle(false);
+  const [isProblemIndeterminate, setIsProblemIndeterminate] = React.useState(false);
+  const [problemItemTarget, setProblemItemTarget] = React.useState<HTMLButtonElement | null>(null);
+
+  useEffect(() => {
+    /* istanbul ignore next */
+    if (problemTypesFilter.length !== 0
+        && !blockTypesFilter.includes(blockType)) {
+      setIsProblemIndeterminate(true);
+    }
+  }, []);
+
+  const handleCheckBoxChangeOnProblem = React.useCallback((e) => {
+    handleCheckboxChange(e);
+    setIsProblemIndeterminate(false);
+    if (e.target.checked) {
+      setProblemTypesFilter(Object.keys(problemTypes));
+    } else {
+      setProblemTypesFilter([]);
+    }
+  }, [handleCheckboxChange, setProblemTypesFilter]);
+
+  const handleProblemCheckboxChange = React.useCallback((e) => {
+    setProblemTypesFilter(currentFiltersProblem => {
+      let result;
+      if (currentFiltersProblem.includes(e.target.value)) {
+        result = currentFiltersProblem.filter(x => x !== e.target.value);
+      } else {
+        result = [...currentFiltersProblem, e.target.value];
+      }
+      if (e.target.checked) {
+        /* istanbul ignore next */
+        if (result.length === problemTypesLength) {
+          // Add 'problem' to type filter if all problem types are selected.
+          setIsProblemIndeterminate(false);
+          setBlockTypesFilter(currentFilters => [...currentFilters, 'problem']);
+        } else {
+          setIsProblemIndeterminate(true);
+        }
+      } /* istanbul ignore next */ else {
+        // Delete 'problem' filter if a problem is deselected.
+        setBlockTypesFilter(currentFilters => {
+          /* istanbul ignore next */
+          if (currentFilters.includes('problem')) {
+            return currentFilters.filter(x => x !== 'problem');
+          }
+          return [...currentFilters];
+        });
+        setIsProblemIndeterminate(result.length !== 0);
+      }
+      return result;
+    });
+  }, [
+    setProblemTypesFilter,
+    problemTypesFilter,
+    setBlockTypesFilter,
+    problemTypesLength,
+  ]);
+
+  return (
+    <div className="problem-menu-item">
+      <MenuItem
+        as={Form.Checkbox}
+        value={blockType}
+        onChange={handleCheckBoxChangeOnProblem}
+        isIndeterminate={isProblemIndeterminate}
+      >
+        <div className="d-flex justify-content-between align-items-center">
+          <div>
+            <BlockTypeLabel blockType={blockType} />{' '}
+            <Badge variant="light" pill>{count}</Badge>
+          </div>
+          { Object.keys(problemTypes).length !== 0 && (
+            <IconButton
+              ref={setProblemItemTarget}
+              variant="dark"
+              iconAs={Icon}
+              src={KeyboardArrowRight}
+              onClick={openProblemItem}
+              data-testid="open-problem-item-button"
+              alt={intl.formatMessage(messages.openProblemSubmenuAlt)}
+            />
+          )}
+        </div>
+      </MenuItem>
+      <ModalPopup
+        positionRef={problemItemTarget}
+        isOpen={isProblemItemOpen}
+        onClose={closeProblemItem}
+      >
+        <div
+          className="bg-white rounded shadow problem-sub-menu-item"
+        >
+          <Form.Group className="mb-0">
+            <Form.CheckboxSet
+              name="block-type-filter"
+              value={problemTypesFilter}
+            >
+              <Menu>
+                { Object.entries(problemTypes).map(([problemType, problemTypeCount]) => (
+                  <MenuItem
+                    key={problemType}
+                    as={Form.Checkbox}
+                    value={problemType}
+                    onChange={handleProblemCheckboxChange}
+                  >
+                    <div style={{ textAlign: 'start' }}>
+                      <BlockTypeLabel blockType={problemType} />{' '}
+                      <Badge variant="light" pill>{problemTypeCount}</Badge>
+                    </div>
+                  </MenuItem>
+                ))}
+                {
+                  // Show a message if there are no options at all to avoid the
+                  // impression that the dropdown isn't working
+                  Object.keys(problemTypes).length === 0 ? (
+                    /* istanbul ignore next */
+                    <MenuItem disabled><FormattedMessage {...messages['blockTypeFilter.empty']} /></MenuItem>
+                  ) : null
+                }
+              </Menu>
+            </Form.CheckboxSet>
+          </Form.Group>
+        </div>
+      </ModalPopup>
+    </div>
+  );
+};
+
+const FilterItem = ({ blockType, count } : FilterItemProps) => {
+  const {
+    setBlockTypesFilter,
+  } = useSearchContext();
+
+  const handleCheckboxChange = React.useCallback((e) => {
+    setBlockTypesFilter(currentFilters => {
+      if (currentFilters.includes(e.target.value)) {
+        return currentFilters.filter(x => x !== e.target.value);
+      }
+      return [...currentFilters, e.target.value];
+    });
+  }, [setBlockTypesFilter]);
+
+  if (blockType === 'problem') {
+    // Build Capa Problem types filter submenu
+    return (
+      <ProblemFilterItem
+        count={count}
+        handleCheckboxChange={handleCheckboxChange}
+      />
+    );
+  }
+
+  return (
+    <MenuItem
+      as={Form.Checkbox}
+      value={blockType}
+      onChange={handleCheckboxChange}
+    >
+      <div>
+        <BlockTypeLabel blockType={blockType} />{' '}
+        <Badge variant="light" pill>{count}</Badge>
+      </div>
+    </MenuItem>
+  );
+};
+
+/**
+ * A button with a dropdown that allows filtering the current search by component type (XBlock type)
+ * e.g. Limit results to "Text" (html) and "Problem" (problem) components.
+ * The button displays the first type selected, and a count of how many other types are selected, if more than one.
+ */
+const FilterByBlockType: React.FC<Record<never, never>> = () => {
+  const {
+    blockTypes,
+    blockTypesFilter,
+    problemTypesFilter,
+    setBlockTypesFilter,
+    setProblemTypesFilter,
+  } = useSearchContext();
+
+  const clearFilters = useCallback(/* istanbul ignore next */ () => {
+    setBlockTypesFilter([]);
+    setProblemTypesFilter([]);
+  }, []);
+
+  // Sort blocktypes in order of hierarchy followed by alphabetically for components
+  const sortedBlockTypeKeys = Object.keys(blockTypes).sort((a, b) => {
+    const order = {
+      chapter: 1,
+      sequential: 2,
+      vertical: 3,
+    };
+
+    // If both blocktypes are in the order dictionary, sort them based on the order defined
+    if (a in order && b in order) {
+      return order[a] - order[b];
+    }
+
+    // If only blocktype 'a' is in the order dictionary, place it before 'b'
+    if (a in order) {
+      return -1;
+    }
+
+    // If only blocktype 'b' is in the order dictionary, place it before 'a'
+    if (b in order) {
+      return 1;
+    }
+
+    // If neither blocktype is in the order dictionary, sort alphabetically
+    return a.localeCompare(b);
+  });
+
+  // Rebuild sorted blocktypes dictionary
+  const sortedBlockTypes: Record<string, number> = {};
+  sortedBlockTypeKeys.forEach(key => {
+    sortedBlockTypes[key] = blockTypes[key];
+  });
+
+  const appliedFilters = [...blockTypesFilter, ...problemTypesFilter].map(
+    blockType => ({ label: <BlockTypeLabel blockType={blockType} /> }),
+  );
+
+  return (
+    <SearchFilterWidget
+      appliedFilters={appliedFilters}
+      label={<FormattedMessage {...messages.blockTypeFilter} />}
+      clearFilter={clearFilters}
+      icon={FilterList}
+    >
+      <Form.Group className="mb-0">
+        <Form.CheckboxSet
+          name="block-type-filter"
+          value={blockTypesFilter}
+        >
+          <Menu className="block-type-refinement-menu" style={{ boxShadow: 'none' }}>
+            {
+              Object.entries(sortedBlockTypes).map(([blockType, count]) => (
+                <FilterItem key={blockType} blockType={blockType} count={count} />
+              ))
+            }
+            {
+              // Show a message if there are no options at all to avoid the impression that the dropdown isn't working
+              Object.keys(sortedBlockTypes).length === 0 ? (
+                <MenuItem disabled><FormattedMessage {...messages['blockTypeFilter.empty']} /></MenuItem>
+              ) : null
+            }
+          </Menu>
+        </Form.CheckboxSet>
+      </Form.Group>
+    </SearchFilterWidget>
+  );
+};
+
+export default FilterByBlockType;
diff --git a/src/search-manager/FilterByTags.tsx b/src/search-manager/FilterByTags.tsx
new file mode 100644
index 0000000000..9559ff0f28
--- /dev/null
+++ b/src/search-manager/FilterByTags.tsx
@@ -0,0 +1,220 @@
+import React from 'react';
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
+import {
+  Badge,
+  Form,
+  Icon,
+  IconButton,
+  Menu,
+  MenuItem,
+  SearchField,
+} from '@openedx/paragon';
+import {
+  ArrowDropDown,
+  ArrowDropUp,
+  Warning,
+  Tag,
+} from '@openedx/paragon/icons';
+import SearchFilterWidget from './SearchFilterWidget';
+import messages from './messages';
+import { useSearchContext } from './SearchManager';
+import { useTagFilterOptions } from './data/apiHooks';
+import { LoadingSpinner } from '../generic/Loading';
+import { TAG_SEP } from './data/api';
+
+/**
+ * A menu item with a checkbox and an optional ▼ button (to show/hide children)
+ */
+const TagMenuItem: React.FC<{
+  label: string;
+  tagPath: string;
+  isChecked: boolean;
+  onClickCheckbox: () => void;
+  tagCount: number;
+  hasChildren?: boolean;
+  isExpanded?: boolean;
+  onToggleChildren?: (tagPath: string) => void;
+}> = ({
+  label,
+  tagPath,
+  tagCount,
+  isChecked,
+  onClickCheckbox,
+  hasChildren,
+  isExpanded,
+  onToggleChildren,
+}) => {
+  const intl = useIntl();
+  const randomNumber = React.useMemo(() => Math.floor(Math.random() * 1000), []);
+  const checkboxId = tagPath.replace(/[\W]/g, '_') + randomNumber;
+
+  const expandChildrenClick = React.useCallback((e) => {
+    e.preventDefault();
+    onToggleChildren?.(tagPath);
+  }, [onToggleChildren, tagPath]);
+
+  return (
+    <label className="d-inline">
+      <div className="pgn__menu-item pgn__form-checkbox tag-toggle-item" role="group">
+        <input
+          type="checkbox"
+          id={checkboxId}
+          checked={isChecked}
+          onChange={onClickCheckbox}
+          className="pgn__form-checkbox-input flex-shrink-0"
+        />
+        {label}
+        <Badge variant="light" pill className="ml-1">{tagCount}</Badge>
+        {
+          hasChildren
+            ? (
+              <IconButton
+                src={isExpanded ? ArrowDropUp : ArrowDropDown}
+                iconAs={Icon}
+                alt={
+                  intl.formatMessage(
+                    isExpanded ? messages.childTagsCollapse : messages.childTagsExpand,
+                    { tagName: label },
+                  )
+                }
+                onClick={expandChildrenClick}
+                variant="primary"
+                size="sm"
+              />
+            ) : null
+        }
+      </div>
+    </label>
+  );
+};
+
+/**
+ * A list of menu items with all of the options for tags at one level of the hierarchy.
+ */
+const TagOptions: React.FC<{
+  tagSearchKeywords: string;
+  parentTagPath?: string;
+  toggleTagChildren?: (tagPath: string) => void;
+  expandedTags: string[],
+}> = ({
+  parentTagPath = '',
+  tagSearchKeywords,
+  expandedTags,
+  toggleTagChildren,
+}) => {
+  const searchContext = useSearchContext();
+  const { data, isLoading, isError } = useTagFilterOptions({
+    ...searchContext,
+    parentTagPath,
+    tagSearchKeywords,
+  });
+
+  if (isError) {
+    return <MenuItem disabled><FormattedMessage {...messages['blockTagsFilter.error']} /></MenuItem>;
+  }
+  if (isLoading || data.tags === undefined) {
+    return <LoadingSpinner />;
+  }
+
+  // Show a message if there are no options at all to avoid the impression that the dropdown isn't working
+  if (data.tags.length === 0 && !parentTagPath) {
+    return <MenuItem disabled><FormattedMessage {...messages['blockTagsFilter.empty']} /></MenuItem>;
+  }
+
+  return (
+    <div role="group">
+      {
+        data.tags.map(({ tagName, tagPath, ...t }) => {
+          const isExpanded = expandedTags.includes(tagPath);
+          return (
+            <React.Fragment key={tagName}>
+              <TagMenuItem
+                label={tagName}
+                tagCount={t.tagCount}
+                tagPath={tagPath}
+                isChecked={searchContext.tagsFilter.includes(tagPath)}
+                onClickCheckbox={() => {
+                  searchContext.setTagsFilter((tf) => (
+                    tf.includes(tagPath) ? tf.filter(tp => tp !== tagPath) : [...tf, tagPath]
+                  ));
+                }}
+                hasChildren={t.hasChildren}
+                isExpanded={isExpanded}
+                onToggleChildren={toggleTagChildren}
+              />
+              {isExpanded ? (
+                <div className="ml-4">
+                  <TagOptions
+                    parentTagPath={tagPath}
+                    expandedTags={expandedTags}
+                    tagSearchKeywords={tagSearchKeywords}
+                    toggleTagChildren={toggleTagChildren}
+                  />
+                </div>
+              ) : null}
+            </React.Fragment>
+          );
+        })
+      }
+      {
+        // Sometimes, due to limitations of how the search index/API works, we aren't able to retrieve all the options:
+        data.mayBeMissingResults
+          ? (
+            <MenuItem iconBefore={Warning} disabled>
+              <FormattedMessage {...messages['blockTagsFilter.incomplete']} />
+            </MenuItem>
+          ) : null
+      }
+    </div>
+  );
+};
+
+const FilterByTags: React.FC<Record<never, never>> = () => {
+  const intl = useIntl();
+  const { tagsFilter, setTagsFilter } = useSearchContext();
+  const [tagSearchKeywords, setTagSearchKeywords] = React.useState('');
+
+  // e.g. {"Location", "Location > North America"} if those two paths of the tag tree are expanded
+  const [expandedTags, setExpandedTags] = React.useState<string[]>([]);
+  const toggleTagChildren = React.useCallback((tagWithLineage: string) => {
+    setExpandedTags(currentList => {
+      if (currentList.includes(tagWithLineage)) {
+        return currentList.filter(x => x !== tagWithLineage);
+      }
+      return [...currentList, tagWithLineage];
+    });
+  }, [setExpandedTags]);
+
+  return (
+    <SearchFilterWidget
+      appliedFilters={tagsFilter.map(tf => ({ label: tf.split(TAG_SEP).pop() }))}
+      label={<FormattedMessage {...messages.blockTagsFilter} />}
+      clearFilter={() => setTagsFilter([])}
+      icon={Tag}
+    >
+      <Form.Group className="pt-3 mb-0">
+        <SearchField
+          onSubmit={setTagSearchKeywords}
+          onChange={setTagSearchKeywords}
+          onClear={() => setTagSearchKeywords('')}
+          value={tagSearchKeywords}
+          screenReaderText={{
+            label: intl.formatMessage(messages.searchTagsByKeywordPlaceholder),
+            submitButton: intl.formatMessage(messages.submitSearchTagsByKeyword),
+          }}
+          placeholder={intl.formatMessage(messages.searchTagsByKeywordPlaceholder)}
+          className="mx-3 mb-1"
+        />
+        <Menu className="filter-by-refinement-menu" style={{ boxShadow: 'none' }}>
+          <TagOptions
+            tagSearchKeywords={tagSearchKeywords}
+            toggleTagChildren={toggleTagChildren}
+            expandedTags={expandedTags}
+          />
+        </Menu>
+      </Form.Group>
+    </SearchFilterWidget>
+  );
+};
+
+export default FilterByTags;
diff --git a/src/search-manager/Highlight.tsx b/src/search-manager/Highlight.tsx
new file mode 100644
index 0000000000..7c7572bf1a
--- /dev/null
+++ b/src/search-manager/Highlight.tsx
@@ -0,0 +1,25 @@
+/* eslint-disable react/no-array-index-key */
+import React from 'react';
+
+import { HIGHLIGHT_POST_TAG, HIGHLIGHT_PRE_TAG } from './data/api';
+
+/**
+ * Render some text that contains matching words which should be highlighted
+ */
+const Highlight: React.FC<{ text: string }> = ({ text }) => {
+  const parts = text.split(HIGHLIGHT_PRE_TAG);
+  return (
+    <span>
+      {parts.map((part, idx) => {
+        if (idx === 0) { return <React.Fragment key={idx}>{part}</React.Fragment>; }
+        const endIdx = part.indexOf(HIGHLIGHT_POST_TAG);
+        if (endIdx === -1) { return <React.Fragment key={idx}>{part}</React.Fragment>; }
+        const highLightPart = part.substring(0, endIdx);
+        const otherPart = part.substring(endIdx + HIGHLIGHT_POST_TAG.length);
+        return <React.Fragment key={idx}><mark>{highLightPart}</mark>{otherPart}</React.Fragment>;
+      })}
+    </span>
+  );
+};
+
+export default Highlight;
diff --git a/src/search-manager/SearchFilterWidget.tsx b/src/search-manager/SearchFilterWidget.tsx
new file mode 100644
index 0000000000..cdcd1bf710
--- /dev/null
+++ b/src/search-manager/SearchFilterWidget.tsx
@@ -0,0 +1,87 @@
+import React from 'react';
+import { ArrowDropDown } from '@openedx/paragon/icons';
+import {
+  Badge,
+  Button,
+  ModalPopup,
+  useToggle,
+} from '@openedx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import messages from './messages';
+
+/**
+ * A button that represents a filter on the search.
+ * If the filter is active, the button displays the currently applied values.
+ * So when no filter is active it may look like:
+ *  [ Type ▼ ]
+ * Or when a filter is active and limited to two values, it may look like:
+ *  [ Type: HTML, +1 ▼ ]
+ *
+ * When clicked, the button will display a dropdown menu containing this
+ * element's `children`. So use this to wrap a <RefinementList> etc.
+ */
+const SearchFilterWidget: React.FC<{
+  appliedFilters: { label: React.ReactNode }[];
+  label: React.ReactNode;
+  children: React.ReactNode;
+  clearFilter: () => void,
+  icon: React.ComponentType;
+}> = ({ appliedFilters, ...props }) => {
+  const intl = useIntl();
+  const [isOpen, open, close] = useToggle(false);
+  const [target, setTarget] = React.useState<HTMLButtonElement | null>(null);
+
+  const clearAndClose = React.useCallback(() => {
+    props.clearFilter();
+    close();
+  }, [props.clearFilter]);
+
+  return (
+    <>
+      <div className="d-flex mr-3">
+        <Button
+          ref={setTarget}
+          variant={appliedFilters.length ? 'light' : 'outline-primary'}
+          size="sm"
+          onClick={open}
+          iconBefore={props.icon}
+          iconAfter={ArrowDropDown}
+        >
+          {props.label}
+          {appliedFilters.length >= 1 ? <>: {appliedFilters[0].label}</> : null}
+          {appliedFilters.length > 1 ? <>,&nbsp;<Badge variant="secondary">+{appliedFilters.length - 1}</Badge></> : null}
+        </Button>
+      </div>
+      <ModalPopup
+        positionRef={target}
+        isOpen={isOpen}
+        onClose={close}
+      >
+        <div
+          className="bg-white rounded shadow"
+          style={{ textAlign: 'start' }}
+        >
+          {props.children}
+
+          {
+            !!appliedFilters.length
+            && (
+              <div className="d-flex justify-content-end">
+                <Button
+                  onClick={clearAndClose}
+                  variant="link"
+                  className="text-info-500 text-decoration-none clear-filter-button"
+                >
+                  { intl.formatMessage(messages.clearFilter) }
+                </Button>
+              </div>
+            )
+          }
+        </div>
+      </ModalPopup>
+    </>
+  );
+};
+
+export default SearchFilterWidget;
diff --git a/src/search-manager/SearchKeywordsField.tsx b/src/search-manager/SearchKeywordsField.tsx
new file mode 100644
index 0000000000..14a6a06dc9
--- /dev/null
+++ b/src/search-manager/SearchKeywordsField.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { SearchField } from '@openedx/paragon';
+import messages from './messages';
+import { useSearchContext } from './SearchManager';
+
+/**
+ * The "main" input field where users type in search keywords. The search happens as they type (no need to press enter).
+ */
+const SearchKeywordsField: React.FC<{ className?: string, placeholder?: string }> = (props) => {
+  const intl = useIntl();
+  const { searchKeywords, setSearchKeywords, usageKey } = useSearchContext();
+  const defaultPlaceholder = usageKey ? messages.clearUsageKeyToSearch : messages.inputPlaceholder;
+  const { placeholder = intl.formatMessage(defaultPlaceholder) } = props;
+
+  return (
+    <SearchField.Advanced
+      onSubmit={setSearchKeywords}
+      onChange={setSearchKeywords}
+      onClear={() => setSearchKeywords('')}
+      value={searchKeywords}
+      className={props.className}
+      disabled={!!usageKey}
+    >
+      <SearchField.Label />
+      <SearchField.Input
+        autoFocus
+        placeholder={placeholder}
+      />
+      <SearchField.ClearButton />
+      <SearchField.SubmitButton />
+    </SearchField.Advanced>
+  );
+};
+
+export default SearchKeywordsField;
diff --git a/src/search-manager/SearchManager.ts b/src/search-manager/SearchManager.ts
new file mode 100644
index 0000000000..314c90020a
--- /dev/null
+++ b/src/search-manager/SearchManager.ts
@@ -0,0 +1,204 @@
+/**
+ * This is a search manager that provides search functionality similar to the
+ * Instantsearch library. We use it because Instantsearch doesn't support
+ * multiple selections of hierarchical tags.
+ * https://github.com/algolia/instantsearch/issues/1658
+ */
+import React from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { MeiliSearch, type Filter } from 'meilisearch';
+import { union } from 'lodash';
+
+import {
+  CollectionHit, ContentHit, SearchSortOption, forceArray,
+} from './data/api';
+import { useContentSearchConnection, useContentSearchResults } from './data/apiHooks';
+
+export interface SearchContextData {
+  client?: MeiliSearch;
+  indexName?: string;
+  searchKeywords: string;
+  setSearchKeywords: React.Dispatch<React.SetStateAction<string>>;
+  blockTypesFilter: string[];
+  setBlockTypesFilter: React.Dispatch<React.SetStateAction<string[]>>;
+  problemTypesFilter: string[];
+  setProblemTypesFilter: React.Dispatch<React.SetStateAction<string[]>>;
+  tagsFilter: string[];
+  setTagsFilter: React.Dispatch<React.SetStateAction<string[]>>;
+  blockTypes: Record<string, number>;
+  problemTypes: Record<string, number>;
+  extraFilter?: Filter;
+  canClearFilters: boolean;
+  clearFilters: () => void;
+  isFiltered: boolean;
+  searchSortOrder: SearchSortOption;
+  setSearchSortOrder: React.Dispatch<React.SetStateAction<SearchSortOption>>;
+  defaultSearchSortOrder: SearchSortOption;
+  hits: (ContentHit | CollectionHit)[];
+  totalHits: number;
+  isLoading: boolean;
+  hasNextPage: boolean | undefined;
+  isFetchingNextPage: boolean;
+  fetchNextPage: () => void;
+  closeSearchModal: () => void;
+  hasError: boolean;
+  usageKey: string;
+}
+
+const SearchContext = React.createContext<SearchContextData | undefined>(undefined);
+
+/**
+ * Hook which lets you store state variables in the URL search parameters.
+ *
+ * It wraps useState with functions that get/set a query string
+ * search parameter when returning/setting the state variable.
+ *
+ */
+function useStateWithUrlSearchParam<Type>(
+  defaultValue: Type,
+  paramName: string,
+  // Returns the Type equivalent of the given string value, or
+  // undefined if value is invalid.
+  fromString: (value: string | null) => Type | undefined,
+  // Returns the string equivalent of the given Type value.
+  // Returning empty string/undefined will clear the url search paramName.
+  toString: (value: Type) => string | undefined,
+): [value: Type, setter: React.Dispatch<React.SetStateAction<Type>>] {
+  const [searchParams, setSearchParams] = useSearchParams();
+  // The converted search parameter value takes precedence over the state value.
+  const returnValue: Type = fromString(searchParams.get(paramName)) ?? defaultValue;
+  // Function to update the url search parameter
+  const returnSetter: React.Dispatch<React.SetStateAction<Type>> = React.useCallback((value: Type) => {
+    setSearchParams((prevParams) => {
+      const paramValue: string = toString(value) ?? '';
+      const newSearchParams = new URLSearchParams(prevParams);
+      // If using the default paramValue, remove it from the search params.
+      if (paramValue === defaultValue) {
+        newSearchParams.delete(paramName);
+      } else {
+        newSearchParams.set(paramName, paramValue);
+      }
+      return newSearchParams;
+    }, { replace: true });
+  }, [setSearchParams]);
+
+  // Return the computed value and wrapped set state function
+  return [returnValue, returnSetter];
+}
+
+export const SearchContextProvider: React.FC<{
+  extraFilter?: Filter;
+  overrideSearchSortOrder?: SearchSortOption
+  children: React.ReactNode,
+  closeSearchModal?: () => void,
+  skipBlockTypeFetch?: boolean,
+  skipUrlUpdate?: boolean,
+}> = ({
+  overrideSearchSortOrder, skipBlockTypeFetch, skipUrlUpdate, ...props
+}) => {
+  const [searchKeywords, setSearchKeywords] = React.useState('');
+  const [blockTypesFilter, setBlockTypesFilter] = React.useState<string[]>([]);
+  const [problemTypesFilter, setProblemTypesFilter] = React.useState<string[]>([]);
+  const [tagsFilter, setTagsFilter] = React.useState<string[]>([]);
+  const [usageKey, setUsageKey] = useStateWithUrlSearchParam(
+    '',
+    'usageKey',
+    (value: string) => value,
+    (value: string) => value,
+  );
+
+  let extraFilter: string[] = forceArray(props.extraFilter);
+  if (usageKey) {
+    extraFilter = union(extraFilter, [`usage_key = "${usageKey}"`]);
+  }
+
+  // The search sort order can be set via the query string
+  // E.g. ?sort=display_name:desc maps to SearchSortOption.TITLE_ZA.
+  // Default sort by Most Relevant if there's search keyword(s), else by Recently Modified.
+  const defaultSearchSortOrder = searchKeywords ? SearchSortOption.RELEVANCE : SearchSortOption.RECENTLY_MODIFIED;
+  let sortStateManager = React.useState<SearchSortOption>(defaultSearchSortOrder);
+  const sortUrlStateManager = useStateWithUrlSearchParam<SearchSortOption>(
+    defaultSearchSortOrder,
+    'sort',
+    (value: string) => Object.values(SearchSortOption).find((enumValue) => value === enumValue),
+    (value: SearchSortOption) => value.toString(),
+  );
+  if (!skipUrlUpdate) {
+    sortStateManager = sortUrlStateManager;
+  }
+  const [searchSortOrder, setSearchSortOrder] = sortStateManager;
+  // SearchSortOption.RELEVANCE is special, it means "no custom sorting", so we
+  // send it to useContentSearchResults as an empty array.
+  const searchSortOrderToUse = overrideSearchSortOrder ?? searchSortOrder;
+  const sort: SearchSortOption[] = (searchSortOrderToUse === SearchSortOption.RELEVANCE ? [] : [searchSortOrderToUse]);
+  // Selecting SearchSortOption.RECENTLY_PUBLISHED also excludes unpublished components.
+  if (searchSortOrderToUse === SearchSortOption.RECENTLY_PUBLISHED) {
+    extraFilter = union(extraFilter, ['last_published IS NOT NULL']);
+  }
+
+  const canClearFilters = (
+    blockTypesFilter.length > 0
+    || problemTypesFilter.length > 0
+    || tagsFilter.length > 0
+    || !!usageKey
+  );
+  const isFiltered = canClearFilters || (searchKeywords !== '');
+  const clearFilters = React.useCallback(() => {
+    setBlockTypesFilter([]);
+    setTagsFilter([]);
+    setProblemTypesFilter([]);
+    if (usageKey !== '') {
+      setUsageKey('');
+    }
+  }, []);
+
+  // Initialize a connection to Meilisearch:
+  const { client, indexName, hasConnectionError } = useContentSearchConnection();
+
+  // Run the search
+  const result = useContentSearchResults({
+    client,
+    indexName,
+    extraFilter,
+    searchKeywords,
+    blockTypesFilter,
+    problemTypesFilter,
+    tagsFilter,
+    sort,
+    skipBlockTypeFetch,
+  });
+
+  return React.createElement(SearchContext.Provider, {
+    value: {
+      client,
+      indexName,
+      searchKeywords,
+      setSearchKeywords,
+      blockTypesFilter,
+      setBlockTypesFilter,
+      problemTypesFilter,
+      setProblemTypesFilter,
+      tagsFilter,
+      setTagsFilter,
+      extraFilter,
+      isFiltered,
+      canClearFilters,
+      clearFilters,
+      searchSortOrder,
+      setSearchSortOrder,
+      defaultSearchSortOrder,
+      closeSearchModal: props.closeSearchModal ?? (() => { }),
+      hasError: hasConnectionError || result.isError,
+      usageKey,
+      ...result,
+    },
+  }, props.children);
+};
+
+export const useSearchContext = () => {
+  const ctx = React.useContext(SearchContext);
+  if (ctx === undefined) {
+    throw new Error('Cannot use search components outside of <SearchContextProvider>');
+  }
+  return ctx;
+};
diff --git a/src/search-manager/SearchSortWidget.tsx b/src/search-manager/SearchSortWidget.tsx
new file mode 100644
index 0000000000..6f2d78272e
--- /dev/null
+++ b/src/search-manager/SearchSortWidget.tsx
@@ -0,0 +1,114 @@
+import React, { useMemo } from 'react';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Icon, Dropdown } from '@openedx/paragon';
+import { Check, SwapVert } from '@openedx/paragon/icons';
+
+import classNames from 'classnames';
+import messages from './messages';
+import { SearchSortOption } from './data/api';
+import { useSearchContext } from './SearchManager';
+
+export const SearchSortWidget = ({ iconOnly = false }: { iconOnly?: boolean }) => {
+  const intl = useIntl();
+  const {
+    searchSortOrder,
+    setSearchSortOrder,
+    defaultSearchSortOrder,
+  } = useSearchContext();
+
+  const menuItems = useMemo(
+    () => [
+      {
+        id: 'search-sort-option-most-relevant',
+        name: intl.formatMessage(messages.searchSortMostRelevant),
+        value: SearchSortOption.RELEVANCE,
+        show: (defaultSearchSortOrder === SearchSortOption.RELEVANCE),
+      },
+      {
+        id: 'search-sort-option-recently-modified',
+        name: intl.formatMessage(messages.searchSortRecentlyModified),
+        value: SearchSortOption.RECENTLY_MODIFIED,
+        show: true,
+      },
+      {
+        id: 'search-sort-option-recently-published',
+        name: intl.formatMessage(messages.searchSortRecentlyPublished),
+        value: SearchSortOption.RECENTLY_PUBLISHED,
+        show: true,
+      },
+      {
+        id: 'search-sort-option-title-az',
+        name: intl.formatMessage(messages.searchSortTitleAZ),
+        value: SearchSortOption.TITLE_AZ,
+        show: true,
+      },
+      {
+        id: 'search-sort-option-title-za',
+        name: intl.formatMessage(messages.searchSortTitleZA),
+        value: SearchSortOption.TITLE_ZA,
+        show: true,
+      },
+      {
+        id: 'search-sort-option-newest',
+        name: intl.formatMessage(messages.searchSortNewest),
+        value: SearchSortOption.NEWEST,
+        show: true,
+      },
+      {
+        id: 'search-sort-option-oldest',
+        name: intl.formatMessage(messages.searchSortOldest),
+        value: SearchSortOption.OLDEST,
+        show: true,
+      },
+    ],
+    [intl, defaultSearchSortOrder],
+  );
+
+  const menuHeader = intl.formatMessage(messages.searchSortWidgetLabel);
+  const defaultSortOption = menuItems.find(
+    ({ value }) => (value === defaultSearchSortOrder),
+  );
+  const shownMenuItems = menuItems.filter(({ show }) => show);
+
+  // Show the currently selected sort option as the toggle button label.
+  const selectedSortOption = shownMenuItems.find(
+    ({ value }) => (value === searchSortOrder),
+  ) ?? defaultSortOption;
+  const toggleLabel = selectedSortOption ? selectedSortOption.name : menuHeader;
+
+  return (
+    <Dropdown id="search-sort-dropdown">
+      <Dropdown.Toggle
+        id="search-sort-toggle"
+        title={intl.formatMessage(messages.searchSortWidgetAltTitle)}
+        alt={intl.formatMessage(messages.searchSortWidgetAltTitle)}
+        variant="outline-primary"
+        className={classNames('dropdown-toggle-menu-items d-flex', {
+          'border-0': iconOnly,
+        })}
+        size="sm"
+      >
+        <Icon src={SwapVert} className="d-inline" />
+        { !iconOnly && <div className="py-0 px-1">{toggleLabel}</div>}
+      </Dropdown.Toggle>
+      <Dropdown.Menu>
+        <Dropdown.Header>{menuHeader}</Dropdown.Header>
+        {shownMenuItems.map(({ id, name, value }) => (
+          <Dropdown.Item
+            key={id}
+            onClick={() => {
+              // If the selected sort option was re-clicked, de-select it (reset to default)
+              const searchOrder = value === searchSortOrder ? defaultSearchSortOrder : value;
+              setSearchSortOrder(searchOrder);
+            }}
+          >
+            {name}
+            {(value === searchSortOrder) && <Icon src={Check} className="ml-2" />}
+          </Dropdown.Item>
+        ))}
+      </Dropdown.Menu>
+    </Dropdown>
+  );
+};
+
+export default SearchSortWidget;
diff --git a/src/search-manager/Stats.tsx b/src/search-manager/Stats.tsx
new file mode 100644
index 0000000000..4b624e837e
--- /dev/null
+++ b/src/search-manager/Stats.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import messages from './messages';
+import { useSearchContext } from './SearchManager';
+
+/**
+ * Simple component that displays the # of matching results
+ */
+const Stats: React.FC<Record<never, never>> = () => {
+  const { totalHits, searchKeywords, canClearFilters } = useSearchContext();
+
+  if (!searchKeywords && !canClearFilters) {
+    // We haven't started the search yet.
+    return null;
+  }
+
+  return (
+    <FormattedMessage {...messages.numResults} values={{ numResults: totalHits }} />
+  );
+};
+
+export default Stats;
diff --git a/src/search-manager/data/__mocks__/block-types.json b/src/search-manager/data/__mocks__/block-types.json
new file mode 100644
index 0000000000..9d812df91b
--- /dev/null
+++ b/src/search-manager/data/__mocks__/block-types.json
@@ -0,0 +1,24 @@
+{
+  "comment": "This is a mock of the response from Meilisearch, based on an actual search in Studio.",
+  "results": [
+    {
+      "indexUid": "studio",
+      "hits": [],
+      "query": "",
+      "processingTimeMs": 1,
+      "limit": 0,
+      "offset": 0,
+      "estimatedTotalHits": 0,
+      "facetDistribution": {
+        "block_type": {
+          "chapter": 1,
+          "html": 2,
+          "problem": 16,
+          "vertical": 2,
+          "video": 1
+        }
+      },
+      "facetStats": {}
+    }
+  ]
+}
diff --git a/src/search-manager/data/api.mock.ts b/src/search-manager/data/api.mock.ts
new file mode 100644
index 0000000000..e4673dd01b
--- /dev/null
+++ b/src/search-manager/data/api.mock.ts
@@ -0,0 +1,66 @@
+/* istanbul ignore file */
+// eslint-disable-next-line import/no-extraneous-dependencies
+import fetchMock from 'fetch-mock-jest';
+import type { MultiSearchResponse } from 'meilisearch';
+import * as api from './api';
+
+/**
+ * Mock getContentSearchConfig()
+ */
+export async function mockContentSearchConfig(): ReturnType<typeof api.getContentSearchConfig> {
+  return {
+    url: 'http://mock.meilisearch.local',
+    indexName: 'studio',
+    apiKey: 'test-key',
+  };
+}
+mockContentSearchConfig.searchEndpointUrl = 'http://mock.meilisearch.local/multi-search';
+mockContentSearchConfig.applyMock = () => (
+  jest.spyOn(api, 'getContentSearchConfig').mockImplementation(mockContentSearchConfig)
+);
+
+/**
+ * Mock all future Meilisearch searches with the given response.
+ *
+ * For a given test suite, this mock will stay in effect until you call it with
+ * a different mock response, or you call `fetchMock.mockReset()`
+ */
+export function mockSearchResult(mockResponse: MultiSearchResponse) {
+  fetchMock.post(mockContentSearchConfig.searchEndpointUrl, (_url, req) => {
+    const requestData = JSON.parse(req.body?.toString() ?? '');
+    const query = requestData?.queries[0]?.q ?? '';
+    // We have to replace the query (search keywords) in the mock results with the actual query,
+    // because otherwise Instantsearch will update the UI and change the query,
+    // leading to unexpected results in the test cases.
+    const newMockResponse = { ...mockResponse };
+    newMockResponse.results[0].query = query;
+    // And fake the required '_formatted' fields; it contains the highlighting <mark>...</mark> around matched words
+    // eslint-disable-next-line no-underscore-dangle, no-param-reassign
+    mockResponse.results[0]?.hits.forEach((hit) => { hit._formatted = { ...hit }; });
+    return newMockResponse;
+  }, { overwriteRoutes: true });
+}
+
+/**
+ * Mock the block types returned by the API.
+ */
+export async function mockGetBlockTypes(
+  mockResponse: 'noBlocks' | 'someBlocks' | 'moreBlocks',
+) {
+  const mockResponseMap = {
+    noBlocks: {},
+    someBlocks: { problem: 1, html: 2 },
+    moreBlocks: {
+      advanced: 8,
+      discussion: 7,
+      library: 6,
+      drag_and_drop_v2: 5,
+      openassessment: 4,
+      html: 3,
+      problem: 2,
+      video: 1,
+    },
+  };
+  jest.spyOn(api, 'fetchBlockTypes').mockResolvedValue(mockResponseMap[mockResponse]);
+}
+mockGetBlockTypes.applyMock = () => jest.spyOn(api, 'fetchBlockTypes').mockResolvedValue({});
diff --git a/src/search-manager/data/api.ts b/src/search-manager/data/api.ts
new file mode 100644
index 0000000000..0763000f55
--- /dev/null
+++ b/src/search-manager/data/api.ts
@@ -0,0 +1,506 @@
+import { camelCaseObject, getConfig } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import type {
+  Filter, MeiliSearch, MultiSearchQuery,
+} from 'meilisearch';
+
+export const getContentSearchConfigUrl = () => new URL(
+  'api/content_search/v2/studio/',
+  getConfig().STUDIO_BASE_URL,
+).href;
+
+export const HIGHLIGHT_PRE_TAG = '__meili-highlight__'; // Indicate the start of a highlighted (matching) term
+export const HIGHLIGHT_POST_TAG = '__/meili-highlight__'; // Indicate the end of a highlighted (matching) term
+
+/** The separator used for hierarchical tags in the search index, e.g. tags.level1 = "Subject > Math > Calculus" */
+export const TAG_SEP = ' > ';
+
+export enum SearchSortOption {
+  RELEVANCE = '', // Default; sorts results by keyword search ranking
+  TITLE_AZ = 'display_name:asc',
+  TITLE_ZA = 'display_name:desc',
+  NEWEST = 'created:desc',
+  OLDEST = 'created:asc',
+  RECENTLY_PUBLISHED = 'last_published:desc',
+  RECENTLY_MODIFIED = 'modified:desc',
+}
+
+/**
+ * Get the content search configuration from the CMS.
+ */
+export const getContentSearchConfig = async (): Promise<{ url: string, indexName: string, apiKey: string }> => {
+  const url = getContentSearchConfigUrl();
+  const response = await getAuthenticatedHttpClient().get(url);
+  return {
+    url: response.data.url,
+    indexName: response.data.index_name,
+    apiKey: response.data.api_key,
+  };
+};
+
+/**
+ * Detailed "content" of an XBlock/component, from the block's index_dictionary function. Contents depends on the type.
+ */
+export interface ContentDetails {
+  htmlContent?: string;
+  capaContent?: string;
+  [k: string]: any;
+}
+
+/**
+ * Meilisearch filters can be expressed as strings or arrays.
+ * This helper method converts from any supported input format to an array, for consistency.
+ * @param filter A filter expression, e.g. `'foo = bar'` or `[['a = b', 'a = c'], 'd = e']`
+ */
+export function forceArray(filter?: Filter): string[] {
+  if (typeof filter === 'string') {
+    return [filter];
+  }
+  if (Array.isArray(filter)) {
+    return filter as string[];
+  }
+  return [];
+}
+
+/**
+ * Given tag paths like ["Difficulty > Hard", "Subject > Math"], convert them to an array of Meilisearch
+ * filter conditions. The tag filters are all AND conditions (not OR).
+ * @param tagsFilter e.g. `["Difficulty > Hard", "Subject > Math"]`
+ */
+function formatTagsFilter(tagsFilter?: string[]): string[] {
+  const filters: string[] = [];
+
+  tagsFilter?.forEach((tagPath) => {
+    const parts = tagPath.split(TAG_SEP);
+    if (parts.length === 1) {
+      filters.push(`tags.taxonomy = "${tagPath}"`);
+    } else {
+      filters.push(`tags.level${parts.length - 2} = "${tagPath}"`);
+    }
+  });
+
+  return filters;
+}
+
+/**
+ * The tags that are associated with a search result, at various levels of the tag hierarchy.
+ */
+export interface ContentHitTags {
+  taxonomy?: string[];
+  level0?: string[];
+  level1?: string[];
+  level2?: string[];
+  level3?: string[];
+}
+
+/**
+ * Information about a single XBlock returned in the search results
+ * Defined in edx-platform/openedx/core/djangoapps/content/search/documents.py
+ */
+interface BaseContentHit {
+  id: string;
+  type: 'course_block' | 'library_block' | 'collection';
+  displayName: string;
+  usageKey: string;
+  blockId: string;
+  /** The course or library ID */
+  contextKey: string;
+  org: string;
+  breadcrumbs: Array<{ displayName: string }>;
+  tags: ContentHitTags;
+  /** Same fields with <mark>...</mark> highlights */
+  formatted: { displayName: string, content?: ContentDetails, description?: string };
+  created: number;
+  modified: number;
+}
+
+/**
+ * Information about a single XBlock returned in the search results
+ * Defined in edx-platform/openedx/core/djangoapps/content/search/documents.py
+ */
+export interface ContentHit extends BaseContentHit {
+  /** The block_type part of the usage key. What type of XBlock this is. */
+  blockType: string;
+  /**
+   * Breadcrumbs:
+   * - First one is the name of the course/library itself.
+   * - After that is the name and usage key of any parent Section/Subsection/Unit/etc.
+   */
+  type: 'course_block' | 'library_block';
+  breadcrumbs: [{ displayName: string }, ...Array<{ displayName: string, usageKey: string }>];
+  description?: string;
+  content?: ContentDetails;
+  lastPublished: number | null;
+  collections: { displayName?: string[], key?: string[] };
+  published?: ContentPublishedData;
+  formatted: BaseContentHit['formatted'] & { published?: ContentPublishedData, };
+}
+
+/**
+ * Information about the published data of single Xblock returned in search results
+ * Defined in edx-platform/openedx/core/djangoapps/content/search/documents.py
+ */
+export interface ContentPublishedData {
+  description?: string,
+  displayName?: string,
+  numChildren?: number,
+}
+
+/**
+ * Information about a single collection returned in the search results
+ * Defined in edx-platform/openedx/core/djangoapps/content/search/documents.py
+ */
+export interface CollectionHit extends BaseContentHit {
+  type: 'collection';
+  description: string;
+  numChildren?: number;
+  published?: ContentPublishedData;
+}
+
+/**
+ * Convert search hits to camelCase
+ * @param hit A search result directly from Meilisearch
+ */
+export function formatSearchHit(hit: Record<string, any>): ContentHit | CollectionHit {
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  const { _formatted, ...newHit } = hit;
+  newHit.formatted = {
+    displayName: _formatted?.display_name,
+    content: _formatted?.content ?? {},
+    description: _formatted?.description,
+    published: _formatted?.published,
+  };
+  return camelCaseObject(newHit);
+}
+
+interface FetchSearchParams {
+  client: MeiliSearch,
+  indexName: string,
+  searchKeywords: string,
+  blockTypesFilter?: string[],
+  problemTypesFilter?: string[],
+  /** The full path of tags that each result MUST have, e.g. ["Difficulty > Hard", "Subject > Math"] */
+  tagsFilter?: string[],
+  extraFilter?: Filter,
+  sort?: SearchSortOption[],
+  /** How many results to skip, e.g. if limit=20 then passing offset=20 gets the second page. */
+  offset?: number,
+  skipBlockTypeFetch?: boolean,
+}
+
+export async function fetchSearchResults({
+  client,
+  indexName,
+  searchKeywords,
+  blockTypesFilter,
+  problemTypesFilter,
+  tagsFilter,
+  extraFilter,
+  sort,
+  offset = 0,
+  skipBlockTypeFetch = false,
+}: FetchSearchParams): Promise<{
+    hits: (ContentHit | CollectionHit)[],
+    nextOffset: number | undefined,
+    totalHits: number,
+    blockTypes: Record<string, number>,
+    problemTypes: Record<string, number>,
+  }> {
+  const queries: MultiSearchQuery[] = [];
+
+  // Convert 'extraFilter' into an array
+  const extraFilterFormatted = forceArray(extraFilter);
+
+  const blockTypesFilterFormatted = blockTypesFilter?.length ? [blockTypesFilter.map(bt => `block_type = ${bt}`)] : [];
+
+  const problemTypesFilterFormatted = problemTypesFilter?.length ? [problemTypesFilter.map(pt => `content.problem_types = ${pt}`)] : [];
+
+  const tagsFilterFormatted = formatTagsFilter(tagsFilter);
+
+  const limit = 20; // How many results to retrieve per page.
+
+  // To filter normal block types and problem types as 'OR' query
+  const typeFilters = [[
+    ...blockTypesFilterFormatted,
+    ...problemTypesFilterFormatted,
+  ].flat()];
+
+  // First query is always to get the hits, with all the filters applied.
+  queries.push({
+    indexUid: indexName,
+    q: searchKeywords,
+    filter: [
+      // top-level entries in the array are AND conditions and must all match
+      // Inner arrays are OR conditions, where only one needs to match.
+      ...typeFilters,
+      ...extraFilterFormatted,
+      ...tagsFilterFormatted,
+    ],
+    attributesToHighlight: ['display_name', 'description', 'published'],
+    highlightPreTag: HIGHLIGHT_PRE_TAG,
+    highlightPostTag: HIGHLIGHT_POST_TAG,
+    attributesToCrop: ['description', 'published'],
+    sort,
+    offset,
+    limit,
+  });
+
+  // The second query is to get the possible values for the "block types" filter
+  if (!skipBlockTypeFetch) {
+    queries.push({
+      indexUid: indexName,
+      facets: ['block_type', 'content.problem_types'],
+      filter: [
+        ...extraFilterFormatted,
+        // We exclude the block type filter here so we get all the other available options for it.
+        ...tagsFilterFormatted,
+      ],
+      limit: 0, // We don't need any "hits" for this - just the facetDistribution
+    });
+  }
+
+  const { results } = await client.multiSearch(({ queries }));
+  const hitLength = results[0].hits.length;
+  return {
+    hits: results[0].hits.map(formatSearchHit) as ContentHit[],
+    totalHits: results[0].totalHits ?? results[0].estimatedTotalHits ?? hitLength,
+    blockTypes: results[1]?.facetDistribution?.block_type ?? {},
+    problemTypes: results[1]?.facetDistribution?.['content.problem_types'] ?? {},
+    nextOffset: hitLength === limit ? offset + limit : undefined,
+  };
+}
+
+/**
+ * Fetch the block types facet distribution for the search results.
+ */
+export const fetchBlockTypes = async (
+  client: MeiliSearch,
+  indexName: string,
+  extraFilter?: Filter,
+): Promise<Record<string, number>> => {
+  // Convert 'extraFilter' into an array
+  const extraFilterFormatted = forceArray(extraFilter);
+
+  const { results } = await client.multiSearch({
+    queries: [{
+      indexUid: indexName,
+      facets: ['block_type'],
+      filter: extraFilterFormatted,
+      limit: 0, // We don't need any "hits" for this - just the facetDistribution
+    }],
+  });
+
+  return results[0].facetDistribution?.block_type ?? {};
+};
+
+/** Information about a single tag in the tag tree, as returned by fetchAvailableTagOptions() */
+export interface TagEntry {
+  tagName: string;
+  tagPath: string;
+  tagCount: number;
+  hasChildren: boolean;
+}
+
+/**
+ * In the context of a particular search (which may already be filtered to a specific course, specific block types,
+ * and/or have a keyword search applied), get the tree of tags that can be used to further filter/refine the search.
+ */
+export async function fetchAvailableTagOptions({
+  client,
+  indexName,
+  searchKeywords,
+  blockTypesFilter,
+  extraFilter,
+  parentTagPath,
+  // Ideally this would include 'tagSearchKeywords' to filter the tag tree by keyword search but that's not possible yet
+}: {
+  /** The Meilisearch client instance */
+  client: MeiliSearch;
+  /** Which index to search */
+  indexName: string;
+  /** Overall query string for the search; may be empty */
+  searchKeywords: string;
+  /** Filter to only include these block types e.g. ["problem", "html"] */
+  blockTypesFilter?: string[];
+  /** Any other filters to apply, e.g. course ID. */
+  extraFilter?: Filter;
+  /** Only fetch tags below this parent tag/taxonomy e.g. "Places > North America" */
+  parentTagPath?: string;
+}): Promise<{ tags: TagEntry[]; mayBeMissingResults: boolean; }> {
+  const meilisearchFacetLimit = 100; // The 'maxValuesPerFacet' on the index. For Open edX we leave the default, 100.
+
+  // Convert 'extraFilter' into an array
+  const extraFilterFormatted = forceArray(extraFilter);
+
+  const blockTypesFilterFormatted = blockTypesFilter?.length ? [blockTypesFilter.map(bt => `block_type = ${bt}`)] : [];
+
+  // Figure out which "facet" (attribute of the documents in the search index) holds the tags at the level we want.
+  // e.g. "tags.taxonomy" is the facet/attribute that holds the root tags, and "tags.level0" has its child tags.
+  let facetName;
+  let depth;
+  let parentFilter: string[] = [];
+  if (!parentTagPath) {
+    facetName = 'tags.taxonomy';
+    depth = 0;
+  } else {
+    const parentParts = parentTagPath.split(TAG_SEP);
+    depth = parentParts.length;
+    facetName = `tags.level${depth - 1}`;
+    const parentFacetName = parentParts.length === 1 ? 'tags.taxonomy' : `tags.level${parentParts.length - 2}`;
+    parentFilter = [`${parentFacetName} = "${parentTagPath}"`];
+  }
+
+  // As an optimization, start pre-loading the data about "has child tags", if we will need it later.
+  // Notice we don't 'await' the result of this request, so it can happen in parallel with the main request that follows
+  const maybeHasChildren = depth > 0 && depth < 4; // If depth=0, it definitely has children; we don't support depth > 4
+  const nextLevelFacet = `tags.level${depth}`; // This will give the children of the current tags.
+  const preloadChildTagsData = maybeHasChildren ? client.index(indexName).searchForFacetValues({
+    facetName: nextLevelFacet,
+    facetQuery: parentTagPath,
+    q: searchKeywords,
+    filter: [...extraFilterFormatted, ...blockTypesFilterFormatted, ...parentFilter],
+  }) : undefined;
+
+  // Now load the facet values. Doing it with this API gives us much more flexibility in loading than if we just
+  // requested the facets by passing { facets: ["tags"] } into the main search request; that works fine for loading the
+  // root tags but can't load specific child tags like we can using this approach.
+  const tags: TagEntry[] = [];
+  const { facetHits } = await client.index(indexName).searchForFacetValues({
+    facetName,
+    // It's not super clear in the documentation, but facetQuery is basically a "startsWith" query, which is what we
+    // need here to return just the tags below the selected parent tag. However, it's a fuzzy query that may match
+    // more tags than we want it to, so we have to explicitly post-process and reduce the set of results using an
+    // exact match.
+    facetQuery: parentTagPath,
+    q: searchKeywords,
+    filter: [...extraFilterFormatted, ...blockTypesFilterFormatted, ...parentFilter],
+  });
+  facetHits.forEach(({ value: tagPath, count: tagCount }) => {
+    if (!parentTagPath) {
+      tags.push({
+        tagName: tagPath,
+        tagPath,
+        tagCount,
+        hasChildren: true, // You can't tag something with just a taxonomy, so this definitely has child tags.
+      });
+    } else {
+      const parts = tagPath.split(TAG_SEP);
+      const tagName = parts[parts.length - 1];
+      if (tagPath === `${parentTagPath}${TAG_SEP}${tagName}`) {
+        tags.push({
+          tagName,
+          tagPath,
+          tagCount,
+          hasChildren: false, // We'll set this later
+        });
+      } // Else this is a tag from another taxonomy/parent that was included because this search is "fuzzy". Ignore it.
+    }
+  });
+
+  // Figure out if [some of] the tags at this level have children:
+  if (maybeHasChildren) {
+    if (preloadChildTagsData === undefined) { throw new Error('Child tags data unexpectedly not pre-loaded'); }
+    // Retrieve the children of the current tags:
+    const { facetHits: childFacetHits } = await preloadChildTagsData;
+    if (childFacetHits.length >= meilisearchFacetLimit) {
+      // Assume they all have child tags; we can't retrieve more than 100 facet values (per Meilisearch docs) so
+      // we can't say for sure on a tag-by-tag basis, but we know that at least some of them have children, so
+      // it's a safe bet that most/all of them have children. And it's not a huge problem if we say they have children
+      // but they don't.
+      // eslint-disable-next-line no-param-reassign
+      tags.forEach((t) => { t.hasChildren = true; });
+    } else if (childFacetHits.length > 0) {
+      // Some (or maybe all) of these tags have child tags. Let's figure out which ones exactly.
+      const tagsWithChildren = new Set<string>();
+      childFacetHits.forEach(({ value }) => {
+        // Trim the child tag off: 'Places > North America > New York' becomes 'Places > North America'
+        const tagPath = value.split(TAG_SEP).slice(0, -1).join(TAG_SEP);
+        tagsWithChildren.add(tagPath);
+      });
+      // eslint-disable-next-line no-param-reassign
+      tags.forEach((t) => { t.hasChildren = tagsWithChildren.has(t.tagPath); });
+    }
+  }
+
+  // If we hit the limit of facetHits, there are probably even more tags, but there is no API to retrieve
+  // them (no pagination etc.), so just tell the user that not all tags could be displayed. This should be pretty rare.
+  return { tags, mayBeMissingResults: facetHits.length >= meilisearchFacetLimit };
+}
+
+/**
+ * Best-effort search for *all* tags among the search results (with filters applied) that contain the given keyword.
+ *
+ * Unfortunately there is no good Meilisearch API for this, so we just have to do the best we can. If more than 1,000
+ * objects are tagged with matching tags, this will be an incomplete result. For example, if 1,000 XBlocks/components
+ * are tagged with "Tag Alpha 1" and 10 XBlocks are tagged with "Tag Alpha 2", a search for "Alpha" may only return
+ * ["Tag Alpha 1"] instead of the correct result ["Tag Alpha 1", "Tag Alpha 2"] because we are limited to 1,000 matches,
+ * which may all have the same tags.
+ */
+export async function fetchTagsThatMatchKeyword({
+  client,
+  indexName,
+  blockTypesFilter,
+  extraFilter,
+  tagSearchKeywords,
+}: {
+  /** The Meilisearch client instance */
+  client: MeiliSearch;
+  /** Which index to search */
+  indexName: string;
+  /** Filter to only include these block types e.g. `["problem", "html"]` */
+  blockTypesFilter?: string[];
+  /** Any other filters to apply to the overall search. */
+  extraFilter?: Filter;
+  /** Only show taxonomies/tags that match these keywords */
+  tagSearchKeywords?: string;
+}): Promise<{ mayBeMissingResults: boolean; matches: { tagPath: string }[] }> {
+  if (!tagSearchKeywords || tagSearchKeywords.trim() === '') {
+    // This data isn't needed if there is no tag keyword search. Don't bother making a search query.
+    return { matches: [], mayBeMissingResults: false };
+  }
+  // Convert 'extraFilter' into an array
+  const extraFilterFormatted = forceArray(extraFilter);
+
+  const blockTypesFilterFormatted = blockTypesFilter?.length ? [blockTypesFilter.map(bt => `block_type = ${bt}`)] : [];
+
+  const limit = 1000; // This is the most results we can retrieve in a single query.
+
+  // We search for any matches of the keyword in the "tags" field, respecting the current filters like block type filter
+  // or current course filter. (Unfortunately we cannot also include the overall `searchKeywords` so this will match
+  // against more content than it should.)
+  const { hits } = await client.index(indexName).search(tagSearchKeywords, {
+    filter: [...extraFilterFormatted, ...blockTypesFilterFormatted],
+    attributesToSearchOn: ['tags.taxonomy', 'tags.level0', 'tags.level1', 'tags.level2', 'tags.level3'],
+    attributesToRetrieve: ['tags'],
+    limit,
+    // We'd like to use 'showMatchesPosition: true' to know exactly which tags match, but it doesn't provide the
+    // detail we need; it's impossible to tell which tag at a given level matched based on the returned _matchesPosition
+    // data - https://github.com/orgs/meilisearch/discussions/550
+  });
+
+  const tagSearchKeywordsLower = tagSearchKeywords.toLocaleLowerCase();
+
+  const matches = new Set<string>();
+
+  // We have data like this:
+  // hits: [
+  //   {
+  //     tags: {
+  //       taxonomy: ["Competency"],
+  //       level0: ["Competency > Abilities"],
+  //       level1: ["Competency > Abilities > ..."]
+  //     }, ...
+  //   }, ...
+  // ]
+  hits.forEach((hit) => {
+    Object.values(hit.tags).forEach((tagPathList: string[]) => {
+      tagPathList.forEach((tagPath) => {
+        if (tagPath.toLocaleLowerCase().includes(tagSearchKeywordsLower)) {
+          matches.add(tagPath);
+        }
+      });
+    });
+  });
+
+  return { matches: Array.from(matches).map((tagPath) => ({ tagPath })), mayBeMissingResults: hits.length === limit };
+}
diff --git a/src/search-manager/data/apiHooks.test.tsx b/src/search-manager/data/apiHooks.test.tsx
new file mode 100644
index 0000000000..b6fc63f49a
--- /dev/null
+++ b/src/search-manager/data/apiHooks.test.tsx
@@ -0,0 +1,57 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { waitFor } from '@testing-library/react';
+import { renderHook } from '@testing-library/react-hooks';
+import fetchMock from 'fetch-mock-jest';
+
+import mockResult from './__mocks__/block-types.json';
+import { mockContentSearchConfig } from './api.mock';
+import {
+  useGetBlockTypes,
+} from './apiHooks';
+
+mockContentSearchConfig.applyMock();
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+    },
+  },
+});
+
+const wrapper = ({ children }) => (
+  <QueryClientProvider client={queryClient}>
+    {children}
+  </QueryClientProvider>
+);
+
+const fetchMockResponse = () => {
+  fetchMock.post(
+    mockContentSearchConfig.searchEndpointUrl,
+    () => mockResult,
+    { overwriteRoutes: true },
+  );
+};
+
+describe('search manager api hooks', () => {
+  afterEach(() => {
+    fetchMock.reset();
+  });
+
+  it('it should return block types facet', async () => {
+    fetchMockResponse();
+    const { result } = renderHook(() => useGetBlockTypes('filter'), { wrapper });
+    await waitFor(() => {
+      expect(result.current.isLoading).toBeFalsy();
+    });
+    const expectedData = {
+      chapter: 1,
+      html: 2,
+      problem: 16,
+      vertical: 2,
+      video: 1,
+    };
+    expect(result.current.data).toEqual(expectedData);
+    expect(fetchMock.calls().length).toEqual(1);
+  });
+});
diff --git a/src/search-manager/data/apiHooks.ts b/src/search-manager/data/apiHooks.ts
new file mode 100644
index 0000000000..923749b20d
--- /dev/null
+++ b/src/search-manager/data/apiHooks.ts
@@ -0,0 +1,254 @@
+import React from 'react';
+import { useInfiniteQuery, useQuery } from '@tanstack/react-query';
+import { type Filter, MeiliSearch } from 'meilisearch';
+
+import {
+  SearchSortOption,
+  TAG_SEP,
+  fetchAvailableTagOptions,
+  fetchSearchResults,
+  fetchTagsThatMatchKeyword,
+  getContentSearchConfig,
+  fetchBlockTypes,
+} from './api';
+
+/**
+ * Load the Meilisearch connection details from the CMS: the URL to use, the index name, and an API key specific
+ * to the current user that allows it to search all content he have permission to view.
+ *
+ */
+export const useContentSearchConnection = (): {
+  client?: MeiliSearch,
+  indexName?: string,
+  hasConnectionError: boolean;
+} => {
+  const { data: connectionDetails, isError: hasConnectionError } = useQuery({
+    queryKey: ['content_search'],
+    queryFn: getContentSearchConfig,
+    cacheTime: 60 * 60_000, // Even if we're not actively using the search modal, keep it in memory up to an hour
+    staleTime: 60 * 60_000, // If cache is up to one hour old, no need to re-fetch
+    refetchInterval: 60 * 60_000,
+    refetchOnWindowFocus: false, // This doesn't need to be refreshed when the user switches back to this tab.
+    refetchOnMount: false,
+  });
+
+  const indexName = connectionDetails?.indexName;
+  const client = React.useMemo(() => {
+    if (connectionDetails?.apiKey === undefined || connectionDetails?.url === undefined) {
+      return undefined;
+    }
+    return new MeiliSearch({ host: connectionDetails.url, apiKey: connectionDetails.apiKey });
+  }, [connectionDetails?.apiKey, connectionDetails?.url]);
+
+  return { client, indexName, hasConnectionError };
+};
+
+/**
+ * Get the results of a search
+ */
+export const useContentSearchResults = ({
+  client,
+  indexName,
+  extraFilter,
+  searchKeywords,
+  blockTypesFilter = [],
+  problemTypesFilter = [],
+  tagsFilter = [],
+  sort = [],
+  skipBlockTypeFetch = false,
+}: {
+  /** The Meilisearch API client */
+  client?: MeiliSearch;
+  /** Which search index contains the content data */
+  indexName?: string;
+  /** Other filters to apply to the search, e.g. course ID */
+  extraFilter?: Filter;
+  /** The keywords that the user is searching for, if any */
+  searchKeywords: string;
+  /** Only search for these block types (e.g. `["html", "problem"]`) */
+  blockTypesFilter?: string[];
+  /** Only search for these problem types (e.g. `["choiceresponse", "multiplechoiceresponse"]`) */
+  problemTypesFilter?: string[];
+  /** Required tags (all must match), e.g. `["Difficulty > Hard", "Subject > Math"]` */
+  tagsFilter?: string[];
+  /** Sort search results using these options */
+  sort?: SearchSortOption[];
+  /** If true, don't fetch the block types from the server */
+  skipBlockTypeFetch?: boolean;
+}) => {
+  const query = useInfiniteQuery({
+    enabled: client !== undefined && indexName !== undefined,
+    queryKey: [
+      'content_search',
+      'results',
+      client?.config.apiKey,
+      client?.config.host,
+      indexName,
+      extraFilter,
+      searchKeywords,
+      blockTypesFilter,
+      problemTypesFilter,
+      tagsFilter,
+      sort,
+    ],
+    queryFn: ({ pageParam = 0 }) => {
+      // istanbul ignore if: this should never happen
+      if (client === undefined || indexName === undefined) {
+        throw new Error('Required data unexpectedly undefined. Check "enable" condition of useQuery.');
+      }
+      return fetchSearchResults({
+        client,
+        extraFilter,
+        indexName,
+        searchKeywords,
+        blockTypesFilter,
+        problemTypesFilter,
+        tagsFilter,
+        sort,
+        // For infinite pagination of results, we can retrieve additional pages if requested.
+        // Note that if there are 20 results per page, the "second page" has offset=20, not 2.
+        offset: pageParam,
+        skipBlockTypeFetch,
+      });
+    },
+    getNextPageParam: (lastPage) => lastPage.nextOffset,
+    // Avoid flickering results when user is typing... keep old results until new is available.
+    keepPreviousData: true,
+    refetchOnWindowFocus: false, // This doesn't need to be refreshed when the user switches back to this tab.
+  });
+
+  const pages = query.data?.pages;
+  const hits = React.useMemo(
+    () => pages?.reduce((allHits, page) => [...allHits, ...page.hits], []) ?? [],
+    [pages],
+  );
+
+  return {
+    hits,
+    // The distribution of block type filter options
+    blockTypes: pages?.[0]?.blockTypes ?? {},
+    problemTypes: pages?.[0]?.problemTypes ?? {},
+    status: query.status,
+    isLoading: query.isLoading,
+    isError: query.isError,
+    isFetchingNextPage: query.isFetchingNextPage,
+    // Call this to load more pages. We include some "safety" features recommended by the docs: this should never be
+    // called while already fetching a page, and parameters (like 'event') should not be passed into fetchNextPage().
+    // See https://tanstack.com/query/v4/docs/framework/react/guides/infinite-queries
+    fetchNextPage: () => { if (!query.isFetching && !query.isFetchingNextPage) { query.fetchNextPage(); } },
+    hasNextPage: query.hasNextPage,
+    // The last page has the most accurate count of total hits
+    totalHits: pages?.[pages.length - 1]?.totalHits ?? 0,
+  };
+};
+
+/**
+ * Get the available tags that can be used to refine a search, based on the search filters applied so far.
+ * Also the user can use a keyword search to find specific tags.
+ */
+export const useTagFilterOptions = (args: {
+  /** The Meilisearch client instance */
+  client?: MeiliSearch;
+  /** Which index to search */
+  indexName?: string;
+  /** Overall query string for the search; may be empty */
+  searchKeywords: string;
+  /** Filter to only include these block types e.g. `["problem", "html"]` */
+  blockTypesFilter?: string[];
+  /** Any other filters to apply to the overall search. */
+  extraFilter?: Filter;
+  /** Only show taxonomies/tags that match these keywords */
+  tagSearchKeywords?: string;
+  /** Only fetch tags below this parent tag/taxonomy e.g. `"Places > North America"` */
+  parentTagPath?: string;
+}) => {
+  const mainQuery = useQuery({
+    enabled: args.client !== undefined && args.indexName !== undefined,
+    queryKey: [
+      'content_search',
+      'tag_filter_options',
+      args.client?.config.apiKey,
+      args.client?.config.host,
+      args.indexName,
+      args.extraFilter,
+      args.searchKeywords,
+      args.blockTypesFilter,
+      args.parentTagPath,
+    ],
+    queryFn: () => {
+      const { client, indexName } = args;
+      // istanbul ignore if: this should never happen
+      if (client === undefined || indexName === undefined) {
+        throw new Error('Required data unexpectedly undefined. Check "enable" condition of useQuery.');
+      }
+      return fetchAvailableTagOptions({ ...args, client, indexName });
+    },
+    // Avoid flickering results when user is typing... keep old results until new is available.
+    keepPreviousData: true,
+    refetchOnWindowFocus: false, // This doesn't need to be refreshed when the user switches back to this tab.
+  });
+
+  const tagKeywordSearchData = useQuery({
+    enabled: args.client !== undefined && args.indexName !== undefined,
+    queryKey: [
+      'content_search',
+      'tags_keyword_search_data',
+      args.client?.config.apiKey,
+      args.client?.config.host,
+      args.indexName,
+      args.extraFilter,
+      args.blockTypesFilter,
+      args.tagSearchKeywords,
+    ],
+    queryFn: () => {
+      const { client, indexName } = args;
+      // istanbul ignore if: this should never happen
+      if (client === undefined || indexName === undefined) {
+        throw new Error('Required data unexpectedly undefined. Check "enable" condition of useQuery.');
+      }
+      return fetchTagsThatMatchKeyword({ ...args, client, indexName });
+    },
+    // Avoid flickering results when user is typing... keep old results until new is available.
+    keepPreviousData: true,
+    refetchOnWindowFocus: false, // This doesn't need to be refreshed when the user switches back to this tab.
+  });
+
+  const data = React.useMemo(() => {
+    if (!args.tagSearchKeywords || !tagKeywordSearchData.data) {
+      // If there's no keyword search being used to filter the list of available tags, just use the results of the
+      // main query.
+      return { tags: mainQuery.data?.tags, mayBeMissingResults: mainQuery.data?.mayBeMissingResults ?? false };
+    }
+    if (mainQuery.data === undefined) {
+      return { tags: undefined, mayBeMissingResults: false };
+    }
+    // Combine these two queries to filter the list of tags based on the keyword search.
+    const tags = mainQuery.data.tags.filter(
+      ({ tagPath }) => tagKeywordSearchData.data.matches.some(
+        (matchingTag) => matchingTag.tagPath === tagPath || matchingTag.tagPath.startsWith(tagPath + TAG_SEP),
+      ),
+    );
+    return {
+      tags,
+      mayBeMissingResults: mainQuery.data.mayBeMissingResults || tagKeywordSearchData.data.mayBeMissingResults,
+    };
+  }, [mainQuery.data, tagKeywordSearchData.data]);
+
+  return { ...mainQuery, data };
+};
+
+export const useGetBlockTypes = (extraFilters: Filter) => {
+  const { client, indexName } = useContentSearchConnection();
+  return useQuery({
+    enabled: client !== undefined && indexName !== undefined,
+    queryKey: [
+      'content_search',
+      client?.config.apiKey,
+      client?.config.host,
+      indexName,
+      extraFilters,
+      'block_types',
+    ],
+    queryFn: () => fetchBlockTypes(client!, indexName!, extraFilters),
+  });
+};
diff --git a/src/search-manager/index.scss b/src/search-manager/index.scss
new file mode 100644
index 0000000000..2f43789e70
--- /dev/null
+++ b/src/search-manager/index.scss
@@ -0,0 +1 @@
+@import "search-manager/FilterBy";
diff --git a/src/search-manager/index.ts b/src/search-manager/index.ts
new file mode 100644
index 0000000000..e2d4188be1
--- /dev/null
+++ b/src/search-manager/index.ts
@@ -0,0 +1,13 @@
+export { SearchContextProvider, useSearchContext } from './SearchManager';
+export { default as BlockTypeLabel } from './BlockTypeLabel';
+export { default as ClearFiltersButton } from './ClearFiltersButton';
+export { default as FilterByBlockType } from './FilterByBlockType';
+export { default as FilterByTags } from './FilterByTags';
+export { default as Highlight } from './Highlight';
+export { default as SearchKeywordsField } from './SearchKeywordsField';
+export { default as SearchSortWidget } from './SearchSortWidget';
+export { default as Stats } from './Stats';
+export { HIGHLIGHT_PRE_TAG, HIGHLIGHT_POST_TAG } from './data/api';
+export { useGetBlockTypes } from './data/apiHooks';
+
+export type { CollectionHit, ContentHit, ContentHitTags } from './data/api';
diff --git a/src/search-manager/messages.ts b/src/search-manager/messages.ts
new file mode 100644
index 0000000000..aca799f93c
--- /dev/null
+++ b/src/search-manager/messages.ts
@@ -0,0 +1,226 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  clearFilters: {
+    id: 'course-authoring.search-manager.clearFilters',
+    defaultMessage: 'Clear Filters',
+    description: 'Label for the button that removes all applied search filters',
+  },
+  inputPlaceholder: {
+    id: 'course-authoring.search-manager.inputPlaceholder',
+    defaultMessage: 'Search',
+    description: 'Placeholder text shown in the keyword input field when the user has not yet entered a keyword',
+  },
+  clearUsageKeyToSearch: {
+    id: 'course-authoring.search-manager.clearUsageKeyToSearch',
+    defaultMessage: 'Displaying single block, clear filters to search',
+    description: 'Placeholder text shown in the keyword input field when a single block filtered by usage key is shown',
+  },
+  blockTypeFilter: {
+    id: 'course-authoring.search-manager.blockTypeFilter',
+    defaultMessage: 'Type',
+    description: 'Label for the filter that allows limiting results to a specific component type',
+  },
+  'blockTypeFilter.empty': {
+    id: 'course-authoring.search-manager.blockTypeFilter.empty',
+    defaultMessage: 'No matching components',
+    description: 'Label shown when there are no options available to filter by component type',
+  },
+  childTagsExpand: {
+    id: 'course-authoring.search-manager.child-tags-expand',
+    defaultMessage: 'Expand to show child tags of "{tagName}"',
+    description: 'This text describes the ▼ expand toggle button to non-visual users.',
+  },
+  childTagsCollapse: {
+    id: 'course-authoring.search-manager.child-tags-collapse',
+    defaultMessage: 'Collapse to hide child tags of "{tagName}"',
+    description: 'This text describes the ▲ collapse toggle button to non-visual users.',
+  },
+  'blockTagsFilter.empty': {
+    id: 'course-authoring.search-manager.blockTagsFilter.empty',
+    defaultMessage: 'No tags in current results',
+    description: 'Label shown when there are no options available to filter by tags',
+  },
+  'blockTagsFilter.error': {
+    id: 'course-authoring.search-manager.blockTagsFilter.error',
+    defaultMessage: 'Error loading tags',
+    description: 'Label shown when the tags could not be loaded',
+  },
+  'blockTagsFilter.incomplete': {
+    id: 'course-authoring.search-manager.blockTagsFilter.incomplete',
+    defaultMessage: 'Sorry, not all tags could be loaded',
+    description: 'Label shown when the system is not able to display all of the available tag options.',
+  },
+  'blockType.annotatable': {
+    id: 'course-authoring.course-search.blockType.annotatable',
+    defaultMessage: 'Annotation',
+    description: 'Name of the "Annotation" component type in Studio',
+  },
+  'blockType.chapter': {
+    id: 'course-authoring.course-search.blockType.chapter',
+    defaultMessage: 'Section',
+    description: 'Name of the "Section" course outline level in Studio',
+  },
+  'blockType.collection': {
+    id: 'course-authoring.course-search.blockType.collection',
+    defaultMessage: 'Collection',
+    description: 'Collection type text',
+  },
+  'blockType.collection.with_count': {
+    id: 'course-authoring.course-search.blockType.collectionWithCount',
+    defaultMessage: 'Collection ({count})',
+    description: 'Collection type text with children count',
+  },
+  'blockType.discussion': {
+    id: 'course-authoring.course-search.blockType.discussion',
+    defaultMessage: 'Discussion',
+    description: 'Name of the "Discussion" component type in Studio',
+  },
+  'blockType.drag-and-drop-v2': {
+    id: 'course-authoring.course-search.blockType.drag-and-drop-v2',
+    defaultMessage: 'Drag and Drop',
+    description: 'Name of the "Drag and Drop" component type in Studio',
+  },
+  'blockType.html': {
+    id: 'course-authoring.course-search.blockType.html',
+    defaultMessage: 'Text',
+    description: 'Name of the "Text" component type in Studio',
+  },
+  'blockType.library_content': {
+    id: 'course-authoring.course-search.blockType.library_content',
+    defaultMessage: 'Library Content',
+    description: 'Name of the "Library Content" component type in Studio',
+  },
+  'blockType.openassessment': {
+    id: 'course-authoring.course-search.blockType.openassessment',
+    defaultMessage: 'Open Response Assessment',
+    description: 'Name of the "Open Response Assessment" component type in Studio',
+  },
+  'blockType.problem': {
+    id: 'course-authoring.course-search.blockType.problem',
+    defaultMessage: 'Problem',
+    description: 'Name of the "Problem" component type in Studio',
+  },
+  'blockType.sequential': {
+    id: 'course-authoring.course-search.blockType.sequential',
+    defaultMessage: 'Subsection',
+    description: 'Name of the "Subsection" course outline level in Studio',
+  },
+  'blockType.vertical': {
+    id: 'course-authoring.course-search.blockType.vertical',
+    defaultMessage: 'Unit',
+    description: 'Name of the "Unit" course outline level in Studio',
+  },
+  'blockType.video': {
+    id: 'course-authoring.course-search.blockType.video',
+    defaultMessage: 'Video',
+    description: 'Name of the "Video" component type in Studio',
+  },
+  'blockType.choiceresponse': {
+    id: 'course-authoring.course-search.blockType.choiceresponse',
+    defaultMessage: 'Multiple Choice',
+    description: 'Name of the "choiceresponse" component type in Studio',
+  },
+  'blockType.multiplechoiceresponse': {
+    id: 'course-authoring.course-search.blockType.multiplechoiceresponse',
+    defaultMessage: 'Checkboxes',
+    description: 'Name of the "multiplechoiceresponse" component type in Studio',
+  },
+  'blockType.numericalresponse': {
+    id: 'course-authoring.course-search.blockType.numericalresponse',
+    defaultMessage: 'Numerical Input',
+    description: 'Name of the "numericalresponse" component type in Studio',
+  },
+  'blockType.optionresponse': {
+    id: 'course-authoring.course-search.blockType.optionresponse',
+    defaultMessage: 'Dropdown',
+    description: 'Name of the "optionresponse" component type in Studio',
+  },
+  'blockType.stringresponse': {
+    id: 'course-authoring.course-search.blockType.stringresponse',
+    defaultMessage: 'Text Input',
+    description: 'Name of the "stringresponse" component type in Studio',
+  },
+  'blockType.formularesponse': {
+    id: 'course-authoring.course-search.blockType.formularesponse',
+    defaultMessage: 'Math Expression',
+    description: 'Name of the "formularesponse" component type in Studio',
+  },
+  blockTagsFilter: {
+    id: 'course-authoring.search-manager.blockTagsFilter',
+    defaultMessage: 'Tags',
+    description: 'Label for the filter that allows finding components with specific tags',
+  },
+  searchTagsByKeywordPlaceholder: {
+    id: 'course-authoring.search-manager.searchTagsByKeywordPlaceholder',
+    defaultMessage: 'Search tags',
+    description: 'Placeholder text shown in the input field that allows searching through the available tags',
+  },
+  submitSearchTagsByKeyword: {
+    id: 'course-authoring.search-manager.submitSearchTagsByKeyword',
+    defaultMessage: 'Submit tag keyword search',
+    description: 'Text shown to screen reader users for the search button on the tags keyword search',
+  },
+  numResults: {
+    id: 'course-authoring.course-search.num-results',
+    defaultMessage: '{numResults, plural, one {# result} other {# results}} found',
+    description: 'This count displays how many matching results were found from the user\'s search',
+  },
+  clearFilter: {
+    id: 'course-authoring.search-manager.searchFilterWidget.clearFilter',
+    defaultMessage: 'Clear Filter',
+    description: 'Label for the button that removes applied search filters in a specific widget',
+  },
+  searchSortWidgetLabel: {
+    id: 'course-authoring.course-search.searchSortWidget.label',
+    defaultMessage: 'Sort By',
+    description: 'Label displayed to users when default sorting is used by the content search drop-down menu',
+  },
+  searchSortWidgetAltTitle: {
+    id: 'course-authoring.course-search.searchSortWidget.title',
+    defaultMessage: 'Sort search results',
+    description: 'Alt/title text for the content search sort drop-down menu',
+  },
+  searchSortTitleAZ: {
+    id: 'course-authoring.course-search.searchSort.titleAZ',
+    defaultMessage: 'Title, A-Z',
+    description: 'Label for the content search sort drop-down which sorts by content title, ascending',
+  },
+  searchSortTitleZA: {
+    id: 'course-authoring.course-search.searchSort.titleZA',
+    defaultMessage: 'Title, Z-A',
+    description: 'Label for the content search sort drop-down which sorts by content title, descending',
+  },
+  searchSortNewest: {
+    id: 'course-authoring.course-search.searchSort.newest',
+    defaultMessage: 'Newest',
+    description: 'Label for the content search sort drop-down which sorts by creation date, descending',
+  },
+  searchSortOldest: {
+    id: 'course-authoring.course-search.searchSort.oldest',
+    defaultMessage: 'Oldest',
+    description: 'Label for the content search sort drop-down which sorts by creation date, ascending',
+  },
+  searchSortRecentlyPublished: {
+    id: 'course-authoring.course-search.searchSort.recentlyPublished',
+    defaultMessage: 'Recently Published',
+    description: 'Label for the content search sort drop-down which sorts by published date, descending',
+  },
+  searchSortRecentlyModified: {
+    id: 'course-authoring.course-search.searchSort.recentlyModified',
+    defaultMessage: 'Recently Modified',
+    description: 'Label for the content search sort drop-down which sorts by modified date, descending',
+  },
+  openProblemSubmenuAlt: {
+    id: 'course-authoring.filter.problem-submenu.icon-button.alt',
+    defaultMessage: 'Open problem types filters',
+    description: 'Alt of the icon button to open problem types filters',
+  },
+  searchSortMostRelevant: {
+    id: 'course-authoring.course-search.searchSort.mostRelevant',
+    defaultMessage: 'Most Relevant',
+    description: 'Label for the content search sort drop-down which sorts keyword searches by relevance',
+  },
+});
+
+export default messages;
diff --git a/src/search-modal/EmptyStates.tsx b/src/search-modal/EmptyStates.tsx
new file mode 100644
index 0000000000..901aae5b98
--- /dev/null
+++ b/src/search-modal/EmptyStates.tsx
@@ -0,0 +1,69 @@
+import React from 'react';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import type { MessageDescriptor } from 'react-intl';
+import { Alert, Stack } from '@openedx/paragon';
+
+import { useSearchContext } from '../search-manager';
+import EmptySearchImage from './images/empty-search.svg';
+import NoResultImage from './images/no-results.svg';
+import messages from './messages';
+
+interface InfoMessageProps {
+  title: MessageDescriptor;
+  subtitle: MessageDescriptor;
+  image: string;
+}
+
+const InfoMessage = (props: InfoMessageProps) => (
+  <Stack className="d-flex mt-6 align-items-center">
+    <p className="lead"> <FormattedMessage {...props.title} /> </p>
+    <p className="small text-muted"> <FormattedMessage {...props.subtitle} /> </p>
+    <img src={props.image} alt="" />
+  </Stack>
+);
+
+/**
+ * If the user hasn't put any keywords/filters yet, display an "empty state".
+ * Likewise, if the results are empty (0 results), display a special message.
+ * Otherwise, display the results, which are assumed to be the children prop.
+ */
+const EmptyStates: React.FC<{ children: React.ReactElement }> = ({ children }) => {
+  const {
+    canClearFilters: hasFiltersApplied,
+    totalHits,
+    searchKeywords,
+    hasError,
+  } = useSearchContext();
+  const hasQuery = !!searchKeywords;
+
+  if (hasError) {
+    return (
+      <Alert variant="danger">
+        <FormattedMessage {...messages.searchError} />
+      </Alert>
+    );
+  }
+  if (!hasQuery && !hasFiltersApplied) {
+    // We haven't started the search yet. Display the "start your search" empty state
+    return (
+      <InfoMessage
+        title={messages.emptySearchTitle}
+        subtitle={messages.emptySearchSubtitle}
+        image={EmptySearchImage}
+      />
+    );
+  }
+  if (totalHits === 0) {
+    return (
+      <InfoMessage
+        title={messages.noResultsTitle}
+        subtitle={messages.noResultsSubtitle}
+        image={NoResultImage}
+      />
+    );
+  }
+
+  return children;
+};
+
+export default EmptyStates;
diff --git a/src/search-modal/SearchModal.scss b/src/search-modal/SearchModal.scss
new file mode 100644
index 0000000000..d14fdac832
--- /dev/null
+++ b/src/search-modal/SearchModal.scss
@@ -0,0 +1,69 @@
+// Simulate Tailwind-style arbitrary value classNames. We have to hard code this one though.
+.h-\[calc\(100vh-200px\)\] {
+  height: calc(100vh - 200px);
+}
+
+// Helper to set a minimum width for the This Course / All Courses toggle
+.pgn__menu-select.with-min-toggle-width {
+  & > button {
+    min-width: 155px;
+  }
+}
+
+.courseware-search-modal {
+  // Fix so the 'This course' / 'All courses' dropdown is not cut off on the right hand side,
+  // But still preserve correct scrolling behavior for the results list (vertical)
+  // (If we set 'isOverflowVisible: true', the scrolling of the results list is messed up)
+  overflow: visible;
+
+  // Highlight matching terms using bold, not yellow highlighting
+  mark {
+    font-weight: bold;
+    background-color: transparent;
+    padding: 0;
+    display: inline;
+  }
+
+  .pgn__modal-header .pgn__menu-select {
+    // The "All courses" / "This course" toggle button
+    & > button {
+      min-width: 155px;  // Set a minumum width so it doesn't change size when you change the selection
+      // The current Open edX theme makes the search field square but the button round and it looks bad. We need this
+      // hacky override until the theme is fixed to be more consistent.
+      border-radius: 0;
+
+      // Needed so the the focus borders matches the button's borders
+      &:focus::before {
+        border-radius: 0;
+      }
+    }
+  }
+
+  .pgn__menu-item {
+    // Fix a bug in Paragon menu dropdowns: the checkbox currently shrinks if the text is too long.
+    // https://github.com/openedx/paragon/pull/3019
+    // This can be removed once we upgrade Paragon - https://github.com/openedx/frontend-app-course-authoring/pull/933
+    input[type="checkbox"] {
+      flex-grow: 0;
+      flex-shrink: 0;
+    }
+    // Fix a bug in Paragon menu dropdowns: very long text is not truncated with an ellipsis
+    // https://github.com/openedx/paragon/pull/3019
+    // This can be removed once we upgrade Paragon - https://github.com/openedx/frontend-app-course-authoring/pull/933
+    > div {
+      overflow: hidden;
+    }
+  }
+
+  .search-result {
+    &:hover {
+      background-color: $gray-100;
+      cursor: pointer;
+    }
+
+    &:hover.text-muted {
+      cursor: unset;
+      background-color: unset;
+    }
+  }
+}
diff --git a/src/search-modal/SearchModal.test.tsx b/src/search-modal/SearchModal.test.tsx
new file mode 100644
index 0000000000..ef35726395
--- /dev/null
+++ b/src/search-modal/SearchModal.test.tsx
@@ -0,0 +1,76 @@
+import React from 'react';
+
+import { initializeMockApp } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { AppProvider } from '@edx/frontend-platform/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { render } from '@testing-library/react';
+import type { Store } from 'redux';
+import MockAdapter from 'axios-mock-adapter';
+
+import initializeStore from '../store';
+import SearchModal from './SearchModal';
+import { getContentSearchConfigUrl } from '../search-manager/data/api';
+
+let store: Store;
+let axiosMock: MockAdapter;
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+    },
+  },
+});
+
+jest.mock('react-redux', () => ({
+  ...jest.requireActual('react-redux'),
+  useSelector: jest.fn(),
+}));
+
+const RootWrapper = () => (
+  <AppProvider store={store}>
+    <IntlProvider locale="en" messages={{}}>
+      <QueryClientProvider client={queryClient}>
+        <SearchModal courseId="" isOpen onClose={() => undefined} />
+      </QueryClientProvider>
+    </IntlProvider>
+  </AppProvider>
+);
+
+describe('<SearchModal />', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+    store = initializeStore();
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+    queryClient.clear();
+  });
+
+  it('should render the search ui if the config is loaded', async () => {
+    axiosMock.onGet(getContentSearchConfigUrl()).replyOnce(200, {
+      url: 'https://meilisearch.example.com',
+      index: 'test-index',
+      apiKey: 'test-api-key',
+    });
+    const { findByText } = render(<RootWrapper />);
+    expect(await findByText('Start searching to find content')).toBeInTheDocument();
+  });
+
+  it('should render the error message if the api call throws', async () => {
+    axiosMock.onGet(getContentSearchConfigUrl()).networkError();
+    const { findByText } = render(<RootWrapper />);
+    expect(await findByText('An error occurred. Unable to load search results.')).toBeInTheDocument();
+  });
+});
diff --git a/src/search-modal/SearchModal.tsx b/src/search-modal/SearchModal.tsx
new file mode 100644
index 0000000000..2e552fb6e8
--- /dev/null
+++ b/src/search-modal/SearchModal.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { ModalDialog } from '@openedx/paragon';
+
+import messages from './messages';
+import SearchUI from './SearchUI';
+
+const SearchModal: React.FC<{ courseId?: string, isOpen: boolean, onClose: () => void }> = ({ courseId, ...props }) => {
+  const intl = useIntl();
+  const title = intl.formatMessage(messages.title);
+
+  return (
+    <ModalDialog
+      title={title}
+      size="xl"
+      isOpen={props.isOpen}
+      onClose={props.onClose}
+      hasCloseButton
+      // We need isOverflowVisible={false} - see the .scss file in this folder
+      isOverflowVisible={false}
+      isFullscreenOnMobile
+      className="courseware-search-modal"
+    >
+      <SearchUI courseId={courseId} closeSearchModal={props.onClose} />
+    </ModalDialog>
+  );
+};
+
+export default SearchModal;
diff --git a/src/search-modal/SearchResult.tsx b/src/search-modal/SearchResult.tsx
new file mode 100644
index 0000000000..032d5cda1a
--- /dev/null
+++ b/src/search-modal/SearchResult.tsx
@@ -0,0 +1,202 @@
+import React from 'react';
+import { getConfig, getPath } from '@edx/frontend-platform';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import {
+  Icon,
+  IconButton,
+  Stack,
+} from '@openedx/paragon';
+import { OpenInNew } from '@openedx/paragon/icons';
+import { useNavigate } from 'react-router-dom';
+
+import { getItemIcon } from '../generic/block-type-utils';
+import { isLibraryKey } from '../generic/key-utils';
+import { useSearchContext, type ContentHit, Highlight } from '../search-manager';
+import messages from './messages';
+
+/**
+ * Returns the URL Suffix for library/library component hit
+*/
+function getLibraryComponentUrlSuffix(hit: ContentHit): string {
+  const { contextKey } = hit;
+  return `library/${contextKey}`;
+}
+
+/**
+ * Returns the URL Suffix for a unit hit
+*/
+function getUnitUrlSuffix(hit: ContentHit): string {
+  const { contextKey, usageKey } = hit;
+  return `course/${contextKey}/container/${usageKey}`;
+}
+
+/**
+ * Returns the URL Suffix for a unit component hit
+*/
+function getUnitComponentUrlSuffix(hit: ContentHit): string {
+  const { breadcrumbs, contextKey, usageKey } = hit;
+  if (breadcrumbs.length > 1) {
+    let parent = breadcrumbs[breadcrumbs.length - 1];
+
+    if ('usageKey' in parent) {
+      // Handle case for library component in unit
+      let libComponentUsageKey: string | undefined;
+      if (parent.usageKey.includes('type@library_content') && breadcrumbs.length > 2) {
+        libComponentUsageKey = parent.usageKey;
+        parent = breadcrumbs[breadcrumbs.length - 2];
+      }
+
+      if ('usageKey' in parent) {
+        const encodedUsageKey = encodeURIComponent(libComponentUsageKey || usageKey);
+        return `course/${contextKey}/container/${parent.usageKey}?show=${encodedUsageKey}`;
+      }
+    }
+  }
+
+  // istanbul ignore next - This case should never be reached
+  return `course/${contextKey}`;
+}
+
+/**
+ * Returns the URL Suffix for a course component hit
+*/
+function getCourseComponentUrlSuffix(hit: ContentHit): string {
+  const { contextKey, usageKey } = hit;
+  return `course/${contextKey}?show=${encodeURIComponent(usageKey)}`;
+}
+
+/**
+ * Returns the URL Suffix for the search hit param
+*/
+function getUrlSuffix(hit: ContentHit): string {
+  const { blockType, breadcrumbs } = hit;
+
+  // Check if is a unit
+  if (blockType === 'vertical') {
+    return getUnitUrlSuffix(hit);
+  }
+
+  // Check if the parent is a unit or a library component in a unit
+  if (breadcrumbs.length > 1) {
+    const parent = breadcrumbs[breadcrumbs.length - 1];
+
+    if ('usageKey' in parent && (
+      parent.usageKey.includes('type@vertical') || parent.usageKey.includes('type@library_content'))
+    ) {
+      return getUnitComponentUrlSuffix(hit);
+    }
+  }
+
+  return getCourseComponentUrlSuffix(hit);
+}
+
+/**
+ * A single search result (row), usually represents an XBlock/Component
+ */
+const SearchResult: React.FC<{ hit: ContentHit }> = ({ hit }) => {
+  const intl = useIntl();
+  const navigate = useNavigate();
+  const { closeSearchModal } = useSearchContext();
+
+  /**
+   * Returns the URL for the context of the hit
+   */
+  const getContextUrl = React.useCallback((newWindow = false) => {
+    const { contextKey } = hit;
+
+    if (contextKey.startsWith('course-v1:')) {
+      const urlSuffix = getUrlSuffix(hit);
+
+      if (newWindow) {
+        return `${getPath(getConfig().PUBLIC_PATH)}${urlSuffix}`;
+      }
+      return `/${urlSuffix}`;
+    }
+
+    if (isLibraryKey(contextKey)) {
+      const urlSuffix = getLibraryComponentUrlSuffix(hit);
+      if (newWindow) {
+        return `${getPath(getConfig().PUBLIC_PATH)}${urlSuffix}`;
+      }
+      return `/${urlSuffix}`;
+    }
+
+    // istanbul ignore next - This case should never be reached
+    return undefined;
+  }, [hit]);
+
+  /**
+   * Opens the context of the hit in a new window
+   */
+  const openContextInNewWindow = (e: React.MouseEvent): void => {
+    e.stopPropagation();
+    const newWindowUrl = getContextUrl(true);
+    /* istanbul ignore next */
+    if (!newWindowUrl) {
+      return;
+    }
+    window.open(newWindowUrl, '_blank');
+  };
+
+  /**
+   * Navigates to the context of the hit
+   */
+  const navigateToContext = React.useCallback((e: React.MouseEvent | React.KeyboardEvent): void => {
+    e.stopPropagation();
+    const redirectUrl = getContextUrl();
+
+    /* istanbul ignore next */
+    if (!redirectUrl) {
+      // This case is for the library authoring MFE
+      return;
+    }
+
+    if ('key' in e && e.key !== 'Enter' && e.key !== ' ') {
+      return;
+    }
+
+    /* istanbul ignore next */
+    if (redirectUrl.startsWith('http')) {
+      // This case is for the library authoring MFE
+      window.location.href = redirectUrl;
+      return;
+    }
+
+    navigate(redirectUrl);
+    closeSearchModal();
+  }, [getContextUrl]);
+
+  return (
+    <Stack
+      className="border-bottom search-result p-2 align-items-start"
+      direction="horizontal"
+      gap={3}
+      onClick={navigateToContext}
+      onKeyDown={navigateToContext}
+      tabIndex={0}
+      role="button"
+    >
+      <Icon className="text-muted" src={getItemIcon(hit.blockType)} />
+      <Stack>
+        <div className="hit-name small">
+          <Highlight text={hit.formatted.displayName} />
+        </div>
+        <div className="hit-description x-small text-truncate">
+          <Highlight text={hit.formatted.content?.htmlContent ?? ''} />
+          <Highlight text={hit.formatted.content?.capaContent ?? ''} />
+        </div>
+        <div className="text-muted x-small">
+          {hit.breadcrumbs.map(bc => bc.displayName).join(' / ')}
+        </div>
+      </Stack>
+      <IconButton
+        src={OpenInNew}
+        iconAs={Icon}
+        onClick={openContextInNewWindow}
+        alt={intl.formatMessage(messages.openInNewWindow)}
+      />
+    </Stack>
+  );
+};
+
+export default SearchResult;
diff --git a/src/search-modal/SearchResults.tsx b/src/search-modal/SearchResults.tsx
new file mode 100644
index 0000000000..2989621b09
--- /dev/null
+++ b/src/search-modal/SearchResults.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import { StatefulButton } from '@openedx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import { ContentHit, useSearchContext } from '../search-manager';
+import SearchResult from './SearchResult';
+import messages from './messages';
+
+/**
+ * All of the single results ("hits"), based on the user's search.
+ *
+ * Uses "infinite pagination" to load more pages as needed (if users click the
+ * "Show more results" button).
+ */
+const SearchResults: React.FC<Record<never, never>> = () => {
+  const intl = useIntl();
+  const {
+    hits,
+    hasNextPage,
+    isFetchingNextPage,
+    fetchNextPage,
+  } = useSearchContext();
+
+  const labels = {
+    default: intl.formatMessage(messages.showMoreResults),
+    pending: intl.formatMessage(messages.loadingMoreResults),
+  };
+
+  return (
+    <>
+      {hits.filter((hit): hit is ContentHit => hit.type !== 'collection').map(
+        (hit) => <SearchResult key={hit.id} hit={hit} />,
+      )}
+      {hasNextPage
+        ? (
+          <StatefulButton
+            className="mt-2"
+            variant="primary"
+            state={isFetchingNextPage ? 'pending' : 'default'}
+            labels={labels}
+            onClick={fetchNextPage}
+          />
+        ) : null}
+    </>
+  );
+};
+
+export default SearchResults;
diff --git a/src/search-modal/SearchUI.test.tsx b/src/search-modal/SearchUI.test.tsx
new file mode 100644
index 0000000000..2938e9fbd9
--- /dev/null
+++ b/src/search-modal/SearchUI.test.tsx
@@ -0,0 +1,480 @@
+import React from 'react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { initializeMockApp } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { AppProvider } from '@edx/frontend-platform/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import MockAdapter from 'axios-mock-adapter';
+import {
+  fireEvent,
+  render,
+  waitFor,
+  within,
+  type RenderResult,
+} from '@testing-library/react';
+import fetchMock from 'fetch-mock-jest';
+import type { Store } from 'redux';
+
+import initializeStore from '../store';
+import mockResult from './__mocks__/search-result.json';
+import mockEmptyResult from './__mocks__/empty-search-result.json';
+import mockTagsFacetResult from './__mocks__/facet-search.json';
+import mockTagsFacetResultLevel0 from './__mocks__/facet-search-level0.json';
+import mockTagsFacetResultLevel1 from './__mocks__/facet-search-level1.json';
+import mockTagsKeywordSearchResult from './__mocks__/tags-keyword-search.json';
+import SearchUI from './SearchUI';
+import { getContentSearchConfigUrl } from '../search-manager/data/api';
+
+// mockResult contains only a single result - this one:
+const mockResultDisplayName = 'Test HTML Block';
+let store: Store;
+
+const queryClient = new QueryClient();
+
+// Default props for <SearchUI />
+const defaults = {
+  courseId: 'course-v1:org+test+123',
+};
+const searchEndpoint = 'http://mock.meilisearch.local/multi-search';
+const facetSearchEndpoint = 'http://mock.meilisearch.local/indexes/studio/facet-search';
+const tagsKeywordSearchEndpoint = 'http://mock.meilisearch.local/indexes/studio/search';
+
+const mockNavigate = jest.fn();
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'), // use actual for all non-hook parts
+  useNavigate: () => mockNavigate,
+}));
+
+const Wrap: React.FC<{ children:React.ReactNode }> = ({ children }) => (
+  <AppProvider store={store}>
+    <IntlProvider locale="en" messages={{}}>
+      <QueryClientProvider client={queryClient}>
+        {children}
+      </QueryClientProvider>
+    </IntlProvider>
+  </AppProvider>
+);
+let axiosMock: MockAdapter;
+
+const returnEmptyResult = (_url: string, req) => {
+  const requestData = JSON.parse(req.body?.toString() ?? '');
+  const query = requestData?.queries[0]?.q ?? '';
+  // We have to replace the query (search keywords) in the mock results with the actual query,
+  // because otherwise we may have an inconsistent state that causes more queries and unexpected results.
+  mockEmptyResult.results[0].query = query;
+  // And fake the required '_formatted' fields; it contains the highlighting <mark>...</mark> around matched words
+  // eslint-disable-next-line no-underscore-dangle, no-param-reassign
+  mockEmptyResult.results[0]?.hits.forEach((hit: any) => { hit._formatted = { ...hit }; });
+  return mockEmptyResult;
+};
+
+describe('<SearchUI />', () => {
+  beforeEach(async () => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+    store = initializeStore();
+    // The API method to get the Meilisearch connection details uses Axios:
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+    axiosMock.onGet(getContentSearchConfigUrl()).reply(200, {
+      url: 'http://mock.meilisearch.local',
+      index_name: 'studio',
+      api_key: 'test-key',
+    });
+
+    // The Meilisearch client-side API uses fetch, not Axios.
+    fetchMock.post(searchEndpoint, (_url, req) => {
+      const requestData = JSON.parse(req.body?.toString() ?? '');
+      const query = requestData?.queries[0]?.q ?? '';
+      // We have to replace the query (search keywords) in the mock results with the actual query,
+      // because otherwise Instantsearch will update the UI and change the query,
+      // leading to unexpected results in the test cases.
+      mockResult.results[0].query = query;
+      // And fake the required '_formatted' fields; it contains the highlighting <mark>...</mark> around matched words
+      // eslint-disable-next-line no-underscore-dangle, no-param-reassign
+      mockResult.results[0]?.hits.forEach((hit) => { hit._formatted = { ...hit }; });
+      return mockResult;
+    });
+    fetchMock.post(tagsKeywordSearchEndpoint, mockTagsKeywordSearchResult);
+  });
+
+  afterEach(async () => {
+    fetchMock.mockReset();
+  });
+
+  it('should render an empty state', async () => {
+    const { getByText } = render(<Wrap><SearchUI {...defaults} /></Wrap>);
+    // Before the results have even loaded, we see this message:
+    expect(getByText('Start searching to find content')).toBeInTheDocument();
+    // When this UI loads, we do a "placeholder" search to load the filter options
+    await waitFor(() => { expect(fetchMock).toHaveFetchedTimes(1, searchEndpoint, 'post'); });
+    // And that message is still displayed even after the initial results/filters have loaded:
+    expect(getByText('Start searching to find content')).toBeInTheDocument();
+  });
+
+  it('should render an empty state if no result found', async () => {
+    fetchMock.post(searchEndpoint, returnEmptyResult, { overwriteRoutes: true });
+    const { getByText, getByRole } = render(<Wrap><SearchUI {...defaults} /></Wrap>);
+    // Return an empty result set:
+    // Before the results have even loaded, we see this message:
+    expect(getByText('Start searching to find content')).toBeInTheDocument();
+    // When this UI loads, the UI makes a search, to get the available "block type" facet values.
+    await waitFor(() => { expect(fetchMock).toHaveFetchedTimes(1, searchEndpoint, 'post'); });
+    // And that message is still displayed even after the initial results/filters have loaded:
+    expect(getByText('Start searching to find content')).toBeInTheDocument();
+    // Enter a keyword - search for 'noresults':
+    fireEvent.change(getByRole('searchbox'), { target: { value: 'noresults' } });
+    // Wait for the new search request to load all the results:
+    await waitFor(() => { expect(fetchMock).toHaveFetchedTimes(2, searchEndpoint, 'post'); });
+    expect(getByText('We didn\'t find anything matching your search')).toBeInTheDocument();
+  });
+
+  it('defaults to searching "All Courses" if used outside of any particular course', async () => {
+    const { getByText, queryByText, getByRole } = render(<Wrap><SearchUI {...defaults} courseId="" /></Wrap>);
+    // We default to searching all courses:
+    expect(getByText('All courses')).toBeInTheDocument();
+    expect(queryByText('This course')).toBeNull();
+    // Wait for the initial search request that loads all the filter options:
+    await waitFor(() => { expect(fetchMock).toHaveFetchedTimes(1, searchEndpoint, 'post'); });
+    // Enter a keyword - search for 'giraffe':
+    fireEvent.change(getByRole('searchbox'), { target: { value: 'giraffe' } });
+    // Wait for the new search request to load all the results:
+    await waitFor(() => { expect(fetchMock).toHaveFetchedTimes(2, searchEndpoint, 'post'); });
+    // Now we should see the results:
+    expect(queryByText('Enter a keyword')).toBeNull();
+    // The result:
+    expect(getByText('6 results found')).toBeInTheDocument();
+    expect(getByText(mockResultDisplayName)).toBeInTheDocument();
+    // Breadcrumbs showing where the result came from:
+    expect(getByText('TheCourse / Section 2 / Subsection 3 / The Little Unit That Could')).toBeInTheDocument();
+  });
+
+  it('defaults to searching "This Course" if used in a course', async () => {
+    const { getByText, queryByText, getByRole } = render(<Wrap><SearchUI {...defaults} /></Wrap>);
+    // We default to searching all courses:
+    expect(getByText('This course')).toBeInTheDocument();
+    expect(queryByText('All courses')).toBeNull();
+    // Wait for the initial search request that loads all the filter options:
+    await waitFor(() => { expect(fetchMock).toHaveFetchedTimes(1, searchEndpoint, 'post'); });
+    // Enter a keyword - search for 'giraffe':
+    fireEvent.change(getByRole('searchbox'), { target: { value: 'giraffe' } });
+    // Wait for the new search request to load all the results:
+    await waitFor(() => { expect(fetchMock).toHaveFetchedTimes(2, searchEndpoint, 'post'); });
+    // And make sure the request was limited to this course:
+    expect(fetchMock).toHaveLastFetched((_url, req) => {
+      const requestData = JSON.parse(req.body?.toString() ?? '');
+      const requestedFilter = requestData?.queries[0].filter;
+      return requestedFilter?.[1] === 'type = "course_block"'
+        && requestedFilter?.[2] === 'context_key = "course-v1:org+test+123"';
+    });
+    // Now we should see the results:
+    expect(queryByText('Enter a keyword')).toBeNull();
+    // The result:
+    expect(getByText('6 results found')).toBeInTheDocument();
+    expect(getByText(mockResultDisplayName)).toBeInTheDocument();
+    // Breadcrumbs showing where the result came from:
+    expect(getByText('TheCourse / Section 2 / Subsection 3 / The Little Unit That Could')).toBeInTheDocument();
+  });
+
+  describe('results', () => {
+    let rendered: RenderResult;
+    beforeEach(async () => {
+      rendered = render(<Wrap><SearchUI {...defaults} /></Wrap>);
+      const { getByRole } = rendered;
+      fireEvent.change(getByRole('searchbox'), { target: { value: 'giraffe' } });
+    });
+
+    test('click section result navigates to the context', async () => {
+      const { findAllByRole } = rendered;
+
+      const [resultItem] = await findAllByRole('button', { name: /Section 1/ });
+
+      // Clicking the "Open in new window" button should open the result in a new window:
+      const { open } = window;
+      window.open = jest.fn();
+      fireEvent.click(within(resultItem).getByRole('button', { name: 'Open in new window' }));
+      expect(window.open).toHaveBeenCalledWith(
+        '/course/course-v1:SampleTaxonomyOrg1+STC1+2023_1'
+        + '?show=block-v1%3ASampleTaxonomyOrg1%2BSTC1%2B2023_1%2Btype%40chapter%2Bblock%40c7077c8cafcf420dbc0b440bf27bad04',
+        '_blank',
+      );
+      window.open = open;
+
+      // Clicking in the result should navigate to the result's URL:
+      fireEvent.click(resultItem);
+      expect(mockNavigate).toHaveBeenCalledWith(
+        '/course/course-v1:SampleTaxonomyOrg1+STC1+2023_1'
+        + '?show=block-v1%3ASampleTaxonomyOrg1%2BSTC1%2B2023_1%2Btype%40chapter%2Bblock%40c7077c8cafcf420dbc0b440bf27bad04',
+      );
+    });
+
+    test('click subsection result navigates to the context', async () => {
+      const { findAllByRole } = rendered;
+
+      const [resultItem] = await findAllByRole('button', { name: /Subsection 1.1/ });
+
+      // Clicking the "Open in new window" button should open the result in a new window:
+      const { open } = window;
+      window.open = jest.fn();
+      fireEvent.click(within(resultItem).getByRole('button', { name: 'Open in new window' }));
+      expect(window.open).toHaveBeenCalledWith(
+        '/course/course-v1:SampleTaxonomyOrg1+STC1+2023_1'
+        + '?show=block-v1%3ASampleTaxonomyOrg1%2BSTC1%2B2023_1%2Btype%40sequential%2Bblock%4092e3e9ca156c44fa8a735f0e9e7c854f',
+        '_blank',
+      );
+      window.open = open;
+
+      // Clicking in the result should navigate to the result's URL:
+      fireEvent.click(resultItem);
+      expect(mockNavigate).toHaveBeenCalledWith(
+        '/course/course-v1:SampleTaxonomyOrg1+STC1+2023_1'
+        + '?show=block-v1%3ASampleTaxonomyOrg1%2BSTC1%2B2023_1%2Btype%40sequential%2Bblock%4092e3e9ca156c44fa8a735f0e9e7c854f',
+      );
+    });
+
+    test('click unit result navigates to the context', async () => {
+      const { findAllByRole } = rendered;
+
+      const [resultItem] = await findAllByRole('button', { name: /Unit 1.1.1/ });
+
+      // Clicking the "Open in new window" button should open the result in a new window:
+      const { open } = window;
+      window.open = jest.fn();
+      fireEvent.click(within(resultItem).getByRole('button', { name: 'Open in new window' }));
+      expect(window.open).toHaveBeenCalledWith(
+        '/course/course-v1:SampleTaxonomyOrg1+STC1+2023_1/container/block-v1:SampleTaxonomyOrg1+STC1+2023_1+type@vertical+block@aaf8b8eb86b54281aeeab12499d2cb0b',
+        '_blank',
+      );
+      window.open = open;
+
+      // Clicking in the result should navigate to the result's URL:
+      fireEvent.click(resultItem);
+      expect(mockNavigate).toHaveBeenCalledWith(
+        '/course/course-v1:SampleTaxonomyOrg1+STC1+2023_1/container/block-v1:SampleTaxonomyOrg1+STC1+2023_1+type@vertical+block@aaf8b8eb86b54281aeeab12499d2cb0b',
+      );
+    });
+
+    test('click unit component result navigates to the context', async () => {
+      const { findAllByRole } = rendered;
+
+      const [resultItem] = await findAllByRole('button', { name: /Announcement/ });
+
+      // Clicking the "Open in new window" button should open the result in a new window:
+      const { open } = window;
+      window.open = jest.fn();
+      fireEvent.click(within(resultItem).getByRole('button', { name: 'Open in new window' }));
+      expect(window.open).toHaveBeenCalledWith(
+        '/course/course-v1:SampleTaxonomyOrg1+STC1+2023_1/container/block-v1:SampleTaxonomyOrg1+STC1+2023_1+type@vertical+block@aaf8b8eb86b54281aeeab12499d2cb0b'
+        + '?show=block-v1%3ASampleTaxonomyOrg1%2BSTC1%2B2023_1%2Btype%40html%2Bblock%400b2d1c0722f742489602b6d8645205f4',
+        '_blank',
+      );
+      window.open = open;
+
+      // Clicking in the result should navigate to the result's URL:
+      fireEvent.click(resultItem);
+      expect(mockNavigate).toHaveBeenCalledWith(
+        '/course/course-v1:SampleTaxonomyOrg1+STC1+2023_1/container/block-v1:SampleTaxonomyOrg1+STC1+2023_1+type@vertical+block@aaf8b8eb86b54281aeeab12499d2cb0b'
+        + '?show=block-v1%3ASampleTaxonomyOrg1%2BSTC1%2B2023_1%2Btype%40html%2Bblock%400b2d1c0722f742489602b6d8645205f4',
+      );
+    });
+
+    test('click lib component in unit result navigates to the context of encompassing lib component', async () => {
+      const { findAllByRole } = rendered;
+
+      const [resultItem] = await findAllByRole('button', { name: /Text block in Lib Component/ });
+
+      // Clicking the "Open in new window" button should open the result in a new window:
+      const { open } = window;
+      window.open = jest.fn();
+      fireEvent.click(within(resultItem).getByRole('button', { name: 'Open in new window' }));
+
+      expect(window.open).toHaveBeenCalledWith(
+        '/course/course-v1:SampleTaxonomyOrg1+STC1+2023_1/container/block-v1:SampleTaxonomyOrg1+STC1+2023_1+type@vertical+block@aaf8b8eb86b54281aeeab12499d2cb0b'
+        + '?show=block-v1%3ASampleTaxonomyOrg1%2BSTC1%2B2023_1%2Btype%40library_content%2Bblock%40427e5cd03fbe431d9d551c67d4e280ae',
+        '_blank',
+      );
+      window.open = open;
+
+      // Clicking in the result should navigate to the result's URL:
+      fireEvent.click(resultItem);
+      expect(mockNavigate).toHaveBeenCalledWith(
+        '/course/course-v1:SampleTaxonomyOrg1+STC1+2023_1/container/block-v1:SampleTaxonomyOrg1+STC1+2023_1+type@vertical+block@aaf8b8eb86b54281aeeab12499d2cb0b'
+        + '?show=block-v1%3ASampleTaxonomyOrg1%2BSTC1%2B2023_1%2Btype%40library_content%2Bblock%40427e5cd03fbe431d9d551c67d4e280ae',
+      );
+    });
+
+    test('click lib component result navigates to course-authoring/library', async () => {
+      const { findByRole } = rendered;
+
+      const resultItem = await findByRole('button', { name: /Library Content/ });
+
+      // Clicking the "Open in new window" button should open the result in a new window:
+      const { open } = window;
+      window.open = jest.fn();
+      fireEvent.click(within(resultItem).getByRole('button', { name: 'Open in new window' }));
+
+      expect(window.open).toHaveBeenCalledWith(
+        '/library/lib:org1:libafter1',
+        '_blank',
+      );
+      window.open = open;
+
+      // Clicking in the result should navigate to the result's URL:
+      fireEvent.click(resultItem);
+      expect(mockNavigate).toHaveBeenCalledWith(
+        '/library/lib:org1:libafter1',
+      );
+    });
+  });
+
+  describe('filters', () => {
+    let rendered: RenderResult;
+    beforeEach(async () => {
+      fetchMock.post(facetSearchEndpoint, (_path, req) => {
+        const requestData = JSON.parse(req.body?.toString() ?? '');
+        switch (requestData.facetName) {
+          case 'tags.taxonomy': return mockTagsFacetResult;
+          case 'tags.level0': return mockTagsFacetResultLevel0;
+          case 'tags.level1': return mockTagsFacetResultLevel1;
+          default: throw new Error(`Facet ${requestData.facetName} not mocked for testing`);
+        }
+      });
+
+      rendered = render(<Wrap><SearchUI {...defaults} /></Wrap>);
+      const { getByRole, getByText } = rendered;
+      // Wait for the initial search request that loads all the filter options:
+      await waitFor(() => { expect(fetchMock).toHaveFetchedTimes(1, searchEndpoint, 'post'); });
+      // Enter a keyword - search for 'giraffe':
+      fireEvent.change(getByRole('searchbox'), { target: { value: 'giraffe' } });
+      // Wait for the new search request to load all the results and the filter options, based on the search so far:
+      await waitFor(() => { expect(fetchMock).toHaveFetchedTimes(2, searchEndpoint, 'post'); });
+      // And make sure the request was limited to this course:
+      expect(fetchMock).toHaveLastFetched((_url, req) => {
+        const requestData = JSON.parse(req.body?.toString() ?? '');
+        const requestedFilter = requestData?.queries[0].filter;
+        // the filter is:
+        // ['', 'type = "course_block"', 'context_key = "course-v1:org+test+123"']
+        return (requestedFilter?.length === 3);
+      });
+      // Now we should see the results:
+      expect(getByText('6 results found')).toBeInTheDocument();
+      expect(getByText(mockResultDisplayName)).toBeInTheDocument();
+    });
+
+    it('can filter results by component/XBlock type', async () => {
+      const { getByRole, getByText } = rendered;
+      // Now open the filters menu:
+      fireEvent.click(getByRole('button', { name: 'Type' }), {});
+      // The dropdown menu has role="group"
+      await waitFor(() => { expect(getByRole('group')).toBeInTheDocument(); });
+      const problemFilterCheckbox = getByText(/Problem/i);
+      fireEvent.click(problemFilterCheckbox, {});
+      await waitFor(() => {
+        expect(rendered.getByRole('button', { name: /type: problem/i, hidden: true })).toBeInTheDocument();
+      });
+      // Now wait for the filter to be applied and the new results to be fetched.
+      await waitFor(() => { expect(fetchMock).toHaveFetchedTimes(3, searchEndpoint, 'post'); });
+      // Because we're mocking the results, there's no actual changes to the mock results,
+      // but we can verify that the filter was sent in the request
+      expect(fetchMock).toHaveLastFetched((_url, req) => {
+        const requestData = JSON.parse(req.body?.toString() ?? '');
+        const requestedFilter = requestData?.queries[0].filter;
+        return JSON.stringify(requestedFilter) === JSON.stringify([
+          [
+            'block_type = problem',
+            'content.problem_types = choiceresponse',
+            'content.problem_types = multiplechoiceresponse',
+            'content.problem_types = numericalresponse',
+            'content.problem_types = optionresponse',
+            'content.problem_types = stringresponse',
+          ],
+          'type = "course_block"',
+          'context_key = "course-v1:org+test+123"',
+        ]);
+      });
+    });
+
+    it('can filter results by tag', async () => {
+      const { getByRole, getByLabelText } = rendered;
+      // Now open the filters menu:
+      fireEvent.click(getByRole('button', { name: 'Tags' }), {});
+      // The dropdown menu in this case doesn't have a role; let's just assume it's displayed.
+      const checkboxLabel = /^ESDC Skills and Competencies/i;
+      await waitFor(() => { expect(getByLabelText(checkboxLabel)).toBeInTheDocument(); });
+      // In addition to the checkbox, there is another button to show the child tags:
+      expect(getByLabelText(/Expand to show child tags of "ESDC Skills and Competencies"/i)).toBeInTheDocument();
+      const competentciesCheckbox = getByLabelText(checkboxLabel);
+      fireEvent.click(competentciesCheckbox, {});
+      // Now wait for the filter to be applied and the new results to be fetched.
+      await waitFor(() => { expect(fetchMock).toHaveFetchedTimes(3, searchEndpoint, 'post'); });
+      // Because we're mocking the results, there's no actual changes to the mock results,
+      // but we can verify that the filter was sent in the request
+      expect(fetchMock).toBeDone((_url, req) => {
+        const requestData = JSON.parse(req.body?.toString() ?? '');
+        const requestedFilter = requestData?.queries?.[0]?.filter;
+        return JSON.stringify(requestedFilter) === JSON.stringify([
+          [],
+          'type = "course_block"',
+          'context_key = "course-v1:org+test+123"',
+          'tags.taxonomy = "ESDC Skills and Competencies"', // <-- the newly added filter, sent with the request
+        ]);
+      });
+    });
+
+    it('can filter results by a child tag', async () => {
+      const { getByRole, getByLabelText, queryByLabelText } = rendered;
+      // Now open the filters menu:
+      fireEvent.click(getByRole('button', { name: 'Tags' }), {});
+      // The dropdown menu in this case doesn't have a role; let's just assume it's displayed.
+      const expandButtonLabel = /Expand to show child tags of "ESDC Skills and Competencies"/i;
+      await waitFor(() => { expect(getByLabelText(expandButtonLabel)).toBeInTheDocument(); });
+
+      // First, the child tag is not shown:
+      const childTagLabel = /^Abilities/i;
+      expect(queryByLabelText(childTagLabel)).toBeNull();
+      // Click on the button to show children
+      const expandButton = getByLabelText(expandButtonLabel);
+      fireEvent.click(expandButton, {});
+      // Now the child tag is visible:
+      await waitFor(() => { expect(queryByLabelText(childTagLabel)).toBeInTheDocument(); });
+      // Click on it:
+      const abilitiesTagFilterCheckbox = getByLabelText(childTagLabel);
+      fireEvent.click(abilitiesTagFilterCheckbox);
+      // Now wait for the filter to be applied and the new results to be fetched.
+      await waitFor(() => { expect(fetchMock).toHaveFetchedTimes(3, searchEndpoint, 'post'); });
+      // Because we're mocking the results, there's no actual changes to the mock results,
+      // but we can verify that the filter was sent in the request
+      expect(fetchMock).toBeDone((_url, req) => {
+        const requestData = JSON.parse(req.body?.toString() ?? '');
+        const requestedFilter = requestData?.queries?.[0]?.filter;
+        return JSON.stringify(requestedFilter) === JSON.stringify([
+          [],
+          'type = "course_block"',
+          'context_key = "course-v1:org+test+123"',
+          'tags.level0 = "ESDC Skills and Competencies > Abilities"',
+        ]);
+      });
+    });
+
+    it('can do a keyword search of the tag options', async () => {
+      const { getByRole, getByLabelText, queryByLabelText } = rendered;
+      // Now open the filters menu:
+      fireEvent.click(getByRole('button', { name: 'Tags' }), {});
+      // The dropdown menu in this case doesn't have a role; let's just assume it's displayed.
+      const expandButtonLabel = /Expand to show child tags of "ESDC Skills and Competencies"/i;
+      await waitFor(() => { expect(getByLabelText(expandButtonLabel)).toBeInTheDocument(); });
+
+      const input = getByLabelText('Search tags');
+      fireEvent.change(input, { target: { value: 'Lightcast' } });
+
+      await waitFor(() => { expect(queryByLabelText(/^ESDC Skills and Competencies/i)).toBeNull(); });
+      expect(queryByLabelText(/^Lightcast/i)).toBeInTheDocument();
+    });
+  });
+});
diff --git a/src/search-modal/SearchUI.tsx b/src/search-modal/SearchUI.tsx
new file mode 100644
index 0000000000..2df074111c
--- /dev/null
+++ b/src/search-modal/SearchUI.tsx
@@ -0,0 +1,79 @@
+import React from 'react';
+import {
+  MenuItem,
+  ModalDialog,
+  SelectMenu,
+} from '@openedx/paragon';
+import { Check } from '@openedx/paragon/icons';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+
+import {
+  ClearFiltersButton,
+  FilterByBlockType,
+  FilterByTags,
+  SearchContextProvider,
+  SearchKeywordsField,
+  Stats,
+} from '../search-manager';
+import EmptyStates from './EmptyStates';
+import SearchResults from './SearchResults';
+import messages from './messages';
+
+const SearchUI: React.FC<{ courseId?: string, closeSearchModal?: () => void }> = (props) => {
+  const hasCourseId = Boolean(props.courseId);
+  const [searchThisCourseEnabled, setSearchThisCourse] = React.useState(hasCourseId);
+  const switchToThisCourse = React.useCallback(() => setSearchThisCourse(true), []);
+  const switchToAllCourses = React.useCallback(() => setSearchThisCourse(false), []);
+  const searchThisCourse = hasCourseId && searchThisCourseEnabled;
+
+  return (
+    <SearchContextProvider
+      extraFilter={[
+        'type = "course_block"',
+        ...(searchThisCourse ? [`context_key = "${props.courseId}"`] : []),
+      ]}
+      closeSearchModal={props.closeSearchModal}
+    >
+      {/* We need to override z-index here or the <Dropdown.Menu> appears behind the <ModalDialog.Body>
+        * But it can't be more then 9 because the close button has z-index 10. */}
+      <ModalDialog.Header style={{ zIndex: 9 }} className="border-bottom">
+        <ModalDialog.Title><FormattedMessage {...messages.title} /></ModalDialog.Title>
+        <div className="d-flex mt-3">
+          <SearchKeywordsField className="flex-grow-1 mr-2" />
+          <SelectMenu variant="primary">
+            <MenuItem
+              onClick={switchToThisCourse}
+              defaultSelected={searchThisCourse}
+              iconAfter={searchThisCourse ? Check : undefined}
+              disabled={!props.courseId}
+            >
+              <FormattedMessage {...messages.searchThisCourse} />
+            </MenuItem>
+            <MenuItem
+              onClick={switchToAllCourses}
+              defaultSelected={!searchThisCourse}
+              iconAfter={searchThisCourse ? undefined : Check}
+            >
+              <FormattedMessage {...messages.searchAllCourses} />
+            </MenuItem>
+          </SelectMenu>
+        </div>
+        <div className="d-flex mt-3 align-items-center">
+          <FilterByBlockType />
+          <FilterByTags />
+          <ClearFiltersButton />
+          <div className="flex-grow-1" />
+          <div className="text-muted x-small align-middle"><Stats /></div>
+        </div>
+      </ModalDialog.Header>
+      <ModalDialog.Body className="h-[calc(100vh-200px)]">
+        {/* If there are no results (yet), EmptyStates displays a friendly messages. Otherwise we see the results. */}
+        <EmptyStates>
+          <SearchResults />
+        </EmptyStates>
+      </ModalDialog.Body>
+    </SearchContextProvider>
+  );
+};
+
+export default SearchUI;
diff --git a/src/search-modal/__mocks__/empty-search-result.json b/src/search-modal/__mocks__/empty-search-result.json
new file mode 100644
index 0000000000..a0ba5d6db9
--- /dev/null
+++ b/src/search-modal/__mocks__/empty-search-result.json
@@ -0,0 +1,27 @@
+{
+  "comment": "This is a mock of the empty response from Meilisearch, based on an actual search in Studio.",
+  "results": [
+    {
+      "indexUid": "studio",
+      "hits": [],
+      "query": "noresult",
+      "processingTimeMs": 0,
+      "limit": 20,
+      "offset": 0,
+      "estimatedTotalHits": 0
+    },
+    {
+      "indexUid": "studio",
+      "hits": [],
+      "query": "noresult",
+      "processingTimeMs": 0,
+      "limit": 0,
+      "offset": 0,
+      "estimatedTotalHits": 0,
+      "facetDistribution": {
+          "block_type": {}
+      },
+      "facetStats": {}
+    }
+  ]
+}
diff --git a/src/search-modal/__mocks__/facet-search-level0.json b/src/search-modal/__mocks__/facet-search-level0.json
new file mode 100644
index 0000000000..b4201c6d88
--- /dev/null
+++ b/src/search-modal/__mocks__/facet-search-level0.json
@@ -0,0 +1,13 @@
+{
+  "facetHits": [
+    { "value": "ESDC Skills and Competencies > Abilities", "count": 5 },
+    { "value": "ESDC Skills and Competencies > Interests", "count": 1 },
+    { "value": "ESDC Skills and Competencies > Knowledge", "count": 7 },
+    { "value": "ESDC Skills and Competencies > Personal Attributes", "count": 3 },
+    { "value": "ESDC Skills and Competencies > Skills", "count": 8 },
+    { "value": "ESDC Skills and Competencies > Work Activities", "count": 5 },
+    { "value": "ESDC Skills and Competencies > Work Context", "count": 10 }
+  ],
+  "facetQuery": "",
+  "processingTimeMs": 0
+}
diff --git a/src/search-modal/__mocks__/facet-search-level1.json b/src/search-modal/__mocks__/facet-search-level1.json
new file mode 100644
index 0000000000..f6a68e3336
--- /dev/null
+++ b/src/search-modal/__mocks__/facet-search-level1.json
@@ -0,0 +1,8 @@
+{
+  "facetHits": [
+    { "value": "ESDC Skills and Competencies > Abilities > Cognitive Abilities", "count": 3 },
+    { "value": "ESDC Skills and Competencies > Abilities > Physical Abilities", "count": 2 }
+  ],
+  "facetQuery": "",
+  "processingTimeMs": 0
+}
diff --git a/src/search-modal/__mocks__/facet-search.json b/src/search-modal/__mocks__/facet-search.json
new file mode 100644
index 0000000000..71db55107e
--- /dev/null
+++ b/src/search-modal/__mocks__/facet-search.json
@@ -0,0 +1,12 @@
+{
+  "facetHits": [
+      { "value": "ESDC Skills and Competencies", "count": 7 },
+      { "value": "FlatTaxonomy", "count": 7 },
+      { "value": "HierarchicalTaxonomy", "count": 6 },
+      { "value": "Lightcast Open Skills Taxonomy", "count": 6 },
+      { "value": "MultiOrgTaxonomy", "count": 7 },
+      { "value": "TwoLevelTaxonomy", "count": 7 }
+  ],
+  "facetQuery": "",
+  "processingTimeMs": 0
+}
diff --git a/src/search-modal/__mocks__/search-result.json b/src/search-modal/__mocks__/search-result.json
new file mode 100644
index 0000000000..85308e6d30
--- /dev/null
+++ b/src/search-modal/__mocks__/search-result.json
@@ -0,0 +1,379 @@
+{
+  "comment": "This is a mock of the response from Meilisearch, based on an actual search in Studio.",
+  "results": [
+    {
+      "indexUid": "studio",
+      "hits": [
+        {
+          "type": "course_block",
+          "display_name": "Test HTML Block",
+          "block_id": "test_html",
+          "content": {
+            "html_content": "This is the content of the test HTML block. You can do a keyword search and it will find matches within this text."
+          },
+          "id": "block-v1edxTestCourse24typehtmlblocktest_html-e47ff4c0",
+          "usage_key": "block-v1:edx+TestCourse+24+type@html+block@test_html",
+          "block_type": "html",
+          "context_key": "course-v1:edx+TestCourse+24",
+          "org": "edx",
+          "breadcrumbs": [
+            { "display_name": "TheCourse" },
+            { "display_name": "Section 2", "usage_key": "block-v1:edx+TestCourse+24+type@chapter+block@chapter_2" },
+            {
+              "display_name": "Subsection 3",
+              "usage_key": "block-v1:edx+TestCourse+24+type@sequential+block@sequential_3"
+            },
+            {
+              "display_name": "The Little Unit That Could",
+              "usage_key": "block-v1:edx+TestCourse+24+type@vertical+block@vertical_3_1"
+            }
+          ],
+          "tags": {
+            "taxonomy": [
+              "ESDC Skills and Competencies",
+              "FlatTaxonomy",
+              "TwoLevelTaxonomy"
+            ],
+            "level0": [
+              "ESDC Skills and Competencies > Personal Attributes",
+              "ESDC Skills and Competencies > Work Context",
+              "FlatTaxonomy > flat taxonomy tag 589",
+              "TwoLevelTaxonomy > two level tag 1"
+            ],
+            "level1": [
+              "ESDC Skills and Competencies > Personal Attributes > Self-Improvement",
+              "ESDC Skills and Competencies > Work Context > Physical Work Environment",
+              "TwoLevelTaxonomy > two level tag 1 > two level tag 1.1"
+            ],
+            "level2": [
+              "ESDC Skills and Competencies > Personal Attributes > Self-Improvement > Adjustment",
+              "ESDC Skills and Competencies > Personal Attributes > Self-Improvement > Learning Orientation",
+              "ESDC Skills and Competencies > Work Context > Physical Work Environment > Environmental Conditions"
+            ],
+            "level3": [
+              "ESDC Skills and Competencies > Personal Attributes > Self-Improvement > Adjustment > Adaptability",
+              "ESDC Skills and Competencies > Personal Attributes > Self-Improvement > Learning Orientation > Active Learning",
+              "ESDC Skills and Competencies > Work Context > Physical Work Environment > Environmental Conditions > Biological Agents"
+            ]
+          }
+        },
+        {
+          "display_name": "Library Content",
+          "block_id": "a1fa8bdd-dc67-4976-9bf5-0ea75a9bca3d",
+          "content": {
+            "html_content": " Test "
+          },
+          "id": "lborg1libafter1htmla1fa8bdd-dc67-4976-9bf5-0ea75a9bca3d-8c5b26ce",
+          "usage_key": "lb:org1:libafter1:html:a1fa8bdd-dc67-4976-9bf5-0ea75a9bca3d",
+          "block_type": "html",
+          "context_key": "lib:org1:libafter1",
+          "org": "edx",
+          "breadcrumbs": [
+            {
+              "display_name": "libafter2"
+            }
+          ],
+          "type": "library_block"
+        },
+        {
+          "display_name": "Section 1",
+          "block_id": "c7077c8cafcf420dbc0b440bf27bad04",
+          "content": {},
+          "id": "block-v1sampletaxonomyorg1stc12023_1typechapterblockc7077c8cafcf420dbc0b440bf27bad04-2af9d1ac",
+          "type": "course_block",
+          "breadcrumbs": [
+            {
+              "display_name": "Sample Taxonomy Course"
+            }
+          ],
+          "usage_key": "block-v1:SampleTaxonomyOrg1+STC1+2023_1+type@chapter+block@c7077c8cafcf420dbc0b440bf27bad04",
+          "block_type": "chapter",
+          "context_key": "course-v1:SampleTaxonomyOrg1+STC1+2023_1",
+          "org": "SampleTaxonomyOrg1",
+          "access_id": 6,
+          "_formatted": {
+            "display_name": "Section 1",
+            "block_id": "c7077c8cafcf420dbc0b440bf27bad04",
+            "content": {},
+            "id": "block-v1sampletaxonomyorg1stc12023_1typechapterblockc7077c8cafcf420dbc0b440bf27bad04-2af9d1ac",
+            "type": "course_block",
+            "breadcrumbs": [
+              {
+                "display_name": "Sample Taxonomy Course"
+              }
+            ],
+            "usage_key": "block-v1:SampleTaxonomyOrg1+STC1+2023_1+type@chapter+block@c7077c8cafcf420dbc0b440bf27bad04",
+            "block_type": "chapter",
+            "context_key": "course-v1:SampleTaxonomyOrg1+STC1+2023_1",
+            "org": "SampleTaxonomyOrg1",
+            "access_id": "6"
+          }
+        },
+        {
+          "display_name": "Subsection 1.1",
+          "block_id": "92e3e9ca156c44fa8a735f0e9e7c854f",
+          "content": {},
+          "id": "block-v1sampletaxonomyorg1stc12023_1typesequentialblock92e3e9ca156c44fa8a735f0e9e7c854f-ec0fb128",
+          "type": "course_block",
+          "breadcrumbs": [
+            {
+              "display_name": "Sample Taxonomy Course"
+            },
+            {
+              "display_name": "Section 1",
+              "usage_key": "block-v1:SampleTaxonomyOrg1+STC1+2023_1+type@chapter+block@c7077c8cafcf420dbc0b440bf27bad04"
+            }
+          ],
+          "usage_key": "block-v1:SampleTaxonomyOrg1+STC1+2023_1+type@sequential+block@92e3e9ca156c44fa8a735f0e9e7c854f",
+          "block_type": "sequential",
+          "context_key": "course-v1:SampleTaxonomyOrg1+STC1+2023_1",
+          "org": "SampleTaxonomyOrg1",
+          "access_id": 6,
+          "_formatted": {
+            "display_name": "Subsection 1.1",
+            "block_id": "92e3e9ca156c44fa8a735f0e9e7c854f",
+            "content": {},
+            "id": "block-v1sampletaxonomyorg1stc12023_1typesequentialblock92e3e9ca156c44fa8a735f0e9e7c854f-ec0fb128",
+            "type": "course_block",
+            "breadcrumbs": [
+              {
+                "display_name": "Sample Taxonomy Course"
+              },
+              {
+                "display_name": "Section 1",
+                "usage_key": "block-v1:SampleTaxonomyOrg1+STC1+2023_1+type@chapter+block@c7077c8cafcf420dbc0b440bf27bad04"
+              }
+            ],
+            "usage_key": "block-v1:SampleTaxonomyOrg1+STC1+2023_1+type@sequential+block@92e3e9ca156c44fa8a735f0e9e7c854f",
+            "block_type": "sequential",
+            "context_key": "course-v1:SampleTaxonomyOrg1+STC1+2023_1",
+            "org": "SampleTaxonomyOrg1",
+            "access_id": "6"
+          }
+        },
+        {
+          "display_name": "Unit 1.1.1",
+          "block_id": "aaf8b8eb86b54281aeeab12499d2cb0b",
+          "content": {},
+          "id": "block-v1sampletaxonomyorg1stc12023_1typeverticalblockaaf8b8eb86b54281aeeab12499d2cb0b-afa27c6e",
+          "type": "course_block",
+          "breadcrumbs": [
+            {
+              "display_name": "Sample Taxonomy Course"
+            },
+            {
+              "display_name": "Section 1",
+              "usage_key": "block-v1:SampleTaxonomyOrg1+STC1+2023_1+type@chapter+block@c7077c8cafcf420dbc0b440bf27bad04"
+            },
+            {
+              "display_name": "Subsection 1.1",
+              "usage_key": "block-v1:SampleTaxonomyOrg1+STC1+2023_1+type@sequential+block@92e3e9ca156c44fa8a735f0e9e7c854f"
+            }
+          ],
+          "usage_key": "block-v1:SampleTaxonomyOrg1+STC1+2023_1+type@vertical+block@aaf8b8eb86b54281aeeab12499d2cb0b",
+          "block_type": "vertical",
+          "context_key": "course-v1:SampleTaxonomyOrg1+STC1+2023_1",
+          "org": "SampleTaxonomyOrg1",
+          "access_id": 6,
+          "_formatted": {
+            "display_name": "Unit 1.1.1",
+            "block_id": "aaf8b8eb86b54281aeeab12499d2cb0b",
+            "content": {},
+            "id": "block-v1sampletaxonomyorg1stc12023_1typeverticalblockaaf8b8eb86b54281aeeab12499d2cb0b-afa27c6e",
+            "type": "course_block",
+            "breadcrumbs": [
+              {
+                "display_name": "Sample Taxonomy Course"
+              },
+              {
+                "display_name": "Section 1",
+                "usage_key": "block-v1:SampleTaxonomyOrg1+STC1+2023_1+type@chapter+block@c7077c8cafcf420dbc0b440bf27bad04"
+              },
+              {
+                "display_name": "Subsection 1.1",
+                "usage_key": "block-v1:SampleTaxonomyOrg1+STC1+2023_1+type@sequential+block@92e3e9ca156c44fa8a735f0e9e7c854f"
+              }
+            ],
+            "usage_key": "block-v1:SampleTaxonomyOrg1+STC1+2023_1+type@vertical+block@aaf8b8eb86b54281aeeab12499d2cb0b",
+            "block_type": "vertical",
+            "context_key": "course-v1:SampleTaxonomyOrg1+STC1+2023_1",
+            "org": "SampleTaxonomyOrg1",
+            "access_id": "6"
+          }
+        },
+        {
+          "display_name": "Announcement",
+          "block_id": "0b2d1c0722f742489602b6d8645205f4",
+          "content": {
+            "html_content": "To use this template, replace the example text with your own text. When you add the component, be sure to select Settings to specify a Display Name and other values that apply. Announcement Date Short note that introduces the topic Instructor's name Heading for announcement 1 Announcement 1 text Heading for announcement 2 Announcement 2 text "
+          },
+          "id": "block-v1sampletaxonomyorg1stc12023_1typehtmlblock0b2d1c0722f742489602b6d8645205f4-2db56dce",
+          "type": "course_block",
+          "breadcrumbs": [
+            {
+              "display_name": "Sample Taxonomy Course"
+            },
+            {
+              "display_name": "Section 1",
+              "usage_key": "block-v1:SampleTaxonomyOrg1+STC1+2023_1+type@chapter+block@c7077c8cafcf420dbc0b440bf27bad04"
+            },
+            {
+              "display_name": "Subsection 1.1",
+              "usage_key": "block-v1:SampleTaxonomyOrg1+STC1+2023_1+type@sequential+block@92e3e9ca156c44fa8a735f0e9e7c854f"
+            },
+            {
+              "display_name": "Unit 1.1.1",
+              "usage_key": "block-v1:SampleTaxonomyOrg1+STC1+2023_1+type@vertical+block@aaf8b8eb86b54281aeeab12499d2cb0b"
+            }
+          ],
+          "usage_key": "block-v1:SampleTaxonomyOrg1+STC1+2023_1+type@html+block@0b2d1c0722f742489602b6d8645205f4",
+          "block_type": "html",
+          "context_key": "course-v1:SampleTaxonomyOrg1+STC1+2023_1",
+          "org": "SampleTaxonomyOrg1",
+          "access_id": 6,
+          "_formatted": {
+            "display_name": "Announcement",
+            "block_id": "0b2d1c0722f742489602b6d8645205f4",
+            "content": {
+              "html_content": "To use this template, replace the example text with your own text. When you add the component, be sure to…"
+            },
+            "id": "block-v1sampletaxonomyorg1stc12023_1typehtmlblock0b2d1c0722f742489602b6d8645205f4-2db56dce",
+            "type": "course_block",
+            "breadcrumbs": [
+              {
+                "display_name": "Sample Taxonomy Course"
+              },
+              {
+                "display_name": "Section 1",
+                "usage_key": "block-v1:SampleTaxonomyOrg1+STC1+2023_1+type@chapter+block@c7077c8cafcf420dbc0b440bf27bad04"
+              },
+              {
+                "display_name": "Subsection 1.1",
+                "usage_key": "block-v1:SampleTaxonomyOrg1+STC1+2023_1+type@sequential+block@92e3e9ca156c44fa8a735f0e9e7c854f"
+              },
+              {
+                "display_name": "Unit 1.1.1",
+                "usage_key": "block-v1:SampleTaxonomyOrg1+STC1+2023_1+type@vertical+block@aaf8b8eb86b54281aeeab12499d2cb0b"
+              }
+            ],
+            "usage_key": "block-v1:SampleTaxonomyOrg1+STC1+2023_1+type@html+block@0b2d1c0722f742489602b6d8645205f4",
+            "block_type": "html",
+            "context_key": "course-v1:SampleTaxonomyOrg1+STC1+2023_1",
+            "org": "SampleTaxonomyOrg1",
+            "access_id": "6"
+          }
+        },
+        {
+          "display_name": "Text block in Lib Component",
+          "block_id": "b654d61248bcc1f84c08",
+          "content": {
+            "html_content": " This is a text block lib component. "
+          },
+          "id": "block-v1sampletaxonomyorg1stc12023_1typehtmlblockb654d61248bcc1f84c08-77f1f658",
+          "type": "course_block",
+          "breadcrumbs": [
+            {
+              "display_name": "Sample Taxonomy Course"
+            },
+            {
+              "display_name": "Section 1",
+              "usage_key": "block-v1:SampleTaxonomyOrg1+STC1+2023_1+type@chapter+block@c7077c8cafcf420dbc0b440bf27bad04"
+            },
+            {
+              "display_name": "Subsection 1.1",
+              "usage_key": "block-v1:SampleTaxonomyOrg1+STC1+2023_1+type@sequential+block@92e3e9ca156c44fa8a735f0e9e7c854f"
+            },
+            {
+              "display_name": "Unit 1.1.1",
+              "usage_key": "block-v1:SampleTaxonomyOrg1+STC1+2023_1+type@vertical+block@aaf8b8eb86b54281aeeab12499d2cb0b"
+            },
+            {
+              "display_name": "Randomized Content Block",
+              "usage_key": "block-v1:SampleTaxonomyOrg1+STC1+2023_1+type@library_content+block@427e5cd03fbe431d9d551c67d4e280ae"
+            }
+          ],
+          "usage_key": "block-v1:SampleTaxonomyOrg1+STC1+2023_1+type@html+block@b654d61248bcc1f84c08",
+          "block_type": "html",
+          "context_key": "course-v1:SampleTaxonomyOrg1+STC1+2023_1",
+          "org": "SampleTaxonomyOrg1",
+          "access_id": 6,
+          "_formatted": {
+            "display_name": "Text block in Lib Component",
+            "block_id": "b654d61248bcc1f84c08",
+            "content": {
+              "html_content": " This is a text block lib component. "
+            },
+            "id": "block-v1sampletaxonomyorg1stc12023_1typehtmlblockb654d61248bcc1f84c08-77f1f658",
+            "type": "course_block",
+            "breadcrumbs": [
+              {
+                "display_name": "Sample Taxonomy Course"
+              },
+              {
+                "display_name": "Section 1",
+                "usage_key": "block-v1:SampleTaxonomyOrg1+STC1+2023_1+type@chapter+block@c7077c8cafcf420dbc0b440bf27bad04"
+              },
+              {
+                "display_name": "Subsection 1.1",
+                "usage_key": "block-v1:SampleTaxonomyOrg1+STC1+2023_1+type@sequential+block@92e3e9ca156c44fa8a735f0e9e7c854f"
+              },
+              {
+                "display_name": "Unit 1.1.1",
+                "usage_key": "block-v1:SampleTaxonomyOrg1+STC1+2023_1+type@vertical+block@aaf8b8eb86b54281aeeab12499d2cb0b"
+              },
+              {
+                "display_name": "Randomized Content Block",
+                "usage_key": "block-v1:SampleTaxonomyOrg1+STC1+2023_1+type@library_content+block@427e5cd03fbe431d9d551c67d4e280ae"
+              }
+            ],
+            "usage_key": "block-v1:SampleTaxonomyOrg1+STC1+2023_1+type@html+block@b654d61248bcc1f84c08",
+            "block_type": "html",
+            "context_key": "course-v1:SampleTaxonomyOrg1+STC1+2023_1",
+            "org": "SampleTaxonomyOrg1",
+            "access_id": "6"
+          }
+        }
+      ],
+      "query": "learn",
+      "processingTimeMs": 1,
+      "limit": 6,
+      "offset": 0,
+      "estimatedTotalHits": 6
+    },
+    {
+      "indexUid": "studio",
+      "hits": [],
+      "query": "learn",
+      "processingTimeMs": 1,
+      "limit": 0,
+      "offset": 0,
+      "estimatedTotalHits": 0,
+      "facetDistribution": {
+        "block_type": {
+          "chapter": 1,
+          "html": 2,
+          "problem": 16,
+          "vertical": 2,
+          "video": 1
+        },
+        "content.problem_types": {
+          "choiceresponse": 2,
+          "multiplechoiceresponse": 6,
+          "numericalresponse": 3,
+          "optionresponse": 4,
+          "stringresponse": 1
+        }
+      },
+      "facetStats": {}
+    },
+    {
+      "indexUid": "studio",
+      "hits": [],
+      "query": "learn",
+      "processingTimeMs": 1,
+      "limit": 20,
+      "offset": 0,
+      "estimatedTotalHits": 0
+    }
+  ]
+}
diff --git a/src/search-modal/__mocks__/tags-keyword-search.json b/src/search-modal/__mocks__/tags-keyword-search.json
new file mode 100644
index 0000000000..51be970963
--- /dev/null
+++ b/src/search-modal/__mocks__/tags-keyword-search.json
@@ -0,0 +1,48 @@
+{
+  "comment": "Because this document has at least one tag that matches the search 'lightcast', all of its tags get returned.",
+  "hits": [
+    {
+      "tags": {
+        "taxonomy": [
+          "ESDC Skills and Competencies",
+          "FlatTaxonomy",
+          "HierarchicalTaxonomy",
+          "Lightcast Open Skills Taxonomy"
+        ],
+        "level0": [
+          "ESDC Skills and Competencies > Interests",
+          "FlatTaxonomy > flat taxonomy tag 1420",
+          "FlatTaxonomy > flat taxonomy tag 1683",
+          "FlatTaxonomy > flat taxonomy tag 2633",
+          "HierarchicalTaxonomy > hierarchical taxonomy tag 1",
+          "HierarchicalTaxonomy > hierarchical taxonomy tag 2",
+          "HierarchicalTaxonomy > hierarchical taxonomy tag 4",
+          "Lightcast Open Skills Taxonomy > Information Technology Category"
+        ],
+        "level1": [
+          "ESDC Skills and Competencies > Interests > Holland Codes",
+          "HierarchicalTaxonomy > hierarchical taxonomy tag 1 > hierarchical taxonomy tag 1.3",
+          "HierarchicalTaxonomy > hierarchical taxonomy tag 2 > hierarchical taxonomy tag 2.16",
+          "HierarchicalTaxonomy > hierarchical taxonomy tag 4 > hierarchical taxonomy tag 4.8",
+          "Lightcast Open Skills Taxonomy > Information Technology Category > Web Content"
+        ],
+        "level2": [
+          "ESDC Skills and Competencies > Interests > Holland Codes > Interests - Holland Codes",
+          "HierarchicalTaxonomy > hierarchical taxonomy tag 1 > hierarchical taxonomy tag 1.3 > hierarchical taxonomy tag 1.3.7",
+          "HierarchicalTaxonomy > hierarchical taxonomy tag 2 > hierarchical taxonomy tag 2.16 > hierarchical taxonomy tag 2.16.31",
+          "HierarchicalTaxonomy > hierarchical taxonomy tag 4 > hierarchical taxonomy tag 4.8 > hierarchical taxonomy tag 4.8.25",
+          "Lightcast Open Skills Taxonomy > Information Technology Category > Web Content > Web Resource"
+        ],
+        "level3": [
+          "ESDC Skills and Competencies > Interests > Holland Codes > Interests - Holland Codes > Artistic",
+          "ESDC Skills and Competencies > Interests > Holland Codes > Interests - Holland Codes > Investigative"
+        ]
+      }
+    }
+  ],
+  "query": "lightcast",
+  "processingTimeMs": 3,
+  "limit": 1000,
+  "offset": 0,
+  "estimatedTotalHits": 23
+}
diff --git a/src/search-modal/images/empty-search.svg b/src/search-modal/images/empty-search.svg
new file mode 100644
index 0000000000..09d41ba50b
--- /dev/null
+++ b/src/search-modal/images/empty-search.svg
@@ -0,0 +1,51 @@
+<svg width="140" height="138" viewBox="0 0 140 138" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M120.224 67.1057H132.153C133.302 64.7431 133.534 62.0033 133.601 59.3412C133.662 56.9286 133.601 54.4717 132.869 52.1756C131.915 49.2328 129.873 46.7653 127.161 45.2769C124.45 43.7885 121.272 43.3915 118.277 44.1669C117.535 43.3026 116.543 42.6902 115.437 42.4144C114.378 42.187 111.233 42.492 111.2 43.5735C111.214 43.9124 111.317 44.2416 111.5 44.5274C112.581 46.5573 114.273 48.199 115.604 50.0736C118.737 54.3829 119.27 61.1825 120.224 67.1057Z" fill="white"/>
+<path d="M132.154 67.3825H120.225C120.159 67.3822 120.095 67.3588 120.044 67.3162C119.993 67.2736 119.959 67.2147 119.947 67.1495C119.803 66.2233 119.665 65.2749 119.52 64.321C118.766 59.1576 117.984 53.8166 115.377 50.2338C114.906 49.5849 114.379 48.9471 113.874 48.326C112.883 47.1994 112.006 45.9769 111.257 44.6766C111.049 44.3429 110.935 43.9601 110.924 43.5674C110.932 43.4194 110.974 43.2752 111.047 43.1463C111.12 43.0173 111.222 42.9071 111.345 42.8242C112.266 42.0977 114.59 41.9479 115.499 42.142C116.604 42.417 117.602 43.0134 118.367 43.8558C121.206 43.1845 124.189 43.5136 126.813 44.7875C128.298 45.5253 129.621 46.5511 130.706 47.8051C131.79 49.059 132.615 50.5162 133.131 52.0918C133.89 54.4267 133.94 56.9613 133.879 59.3517C133.813 61.9972 133.585 64.7813 132.404 67.2105C132.384 67.2603 132.349 67.3031 132.305 67.3336C132.26 67.3641 132.208 67.3811 132.154 67.3825ZM120.458 66.8279H131.982C133.053 64.5318 133.258 61.8807 133.325 59.3517C133.397 56.6452 133.325 54.4101 132.604 52.2804C131.668 49.4078 129.672 47.0005 127.022 45.5494C124.372 44.0983 121.269 43.7127 118.345 44.4714C118.296 44.484 118.246 44.4835 118.198 44.4698C118.15 44.4561 118.107 44.4299 118.073 44.3938C117.372 43.5714 116.431 42.9895 115.383 42.7299C114.595 42.558 112.432 42.7299 111.684 43.2845C111.484 43.4454 111.478 43.5674 111.478 43.6062C111.499 43.8956 111.591 44.1756 111.745 44.4215C112.48 45.6881 113.336 46.8806 114.301 47.9821C114.812 48.6033 115.344 49.2522 115.827 49.9177C118.511 53.6059 119.304 59.0134 120.069 64.2434C120.197 65.1141 120.325 65.9793 120.458 66.8279Z" fill="#231F20"/>
+<path d="M133.303 43.1517C134.795 41.9704 136.226 40.6504 137.973 39.9073C138.115 39.829 138.277 39.7942 138.439 39.8074C138.591 39.8442 138.726 39.9323 138.822 40.057C139.037 40.3293 139.183 40.649 139.25 40.9895C139.317 41.3301 139.301 41.6815 139.204 42.0148C139.004 42.6798 138.676 43.2995 138.239 43.8395C137.119 45.368 135.8 46.7407 134.318 47.9214C133.35 48.7718 132.194 49.3818 130.946 49.7017C129.238 50.0511 125.311 48.3706 127.064 46.0801C127.563 45.4257 128.728 45.5255 129.415 45.3425C130.843 44.8754 132.164 44.1309 133.303 43.1517Z" fill="white"/>
+<path d="M130.434 50.0174C129.125 50.0174 127.328 49.2964 126.635 48.1983C126.411 47.8473 126.309 47.4324 126.344 47.0174C126.379 46.6024 126.549 46.2105 126.829 45.9022C127.251 45.3476 127.983 45.2644 128.626 45.1812C128.862 45.1587 129.095 45.1198 129.325 45.0647C130.72 44.6042 132.012 43.8772 133.13 42.9239L133.967 42.2528C135.135 41.2101 136.441 40.3346 137.85 39.6517C138.041 39.5535 138.257 39.513 138.471 39.5352C138.69 39.5787 138.886 39.6986 139.025 39.8736C139.273 40.18 139.442 40.5419 139.52 40.9283C139.597 41.3146 139.58 41.7139 139.469 42.092C139.257 42.7925 138.912 43.4458 138.454 44.0165C137.322 45.5656 135.986 46.9554 134.483 48.1484C133.48 49.0251 132.285 49.654 130.994 49.9841C130.81 50.0156 130.622 50.0268 130.434 50.0174ZM133.474 43.3621C132.298 44.3545 130.939 45.108 129.475 45.5805C129.22 45.6447 128.96 45.6892 128.698 45.7136C128.144 45.7857 127.55 45.8578 127.273 46.2183C127.065 46.4384 126.937 46.7209 126.907 47.0219C126.876 47.3229 126.947 47.6254 127.107 47.8822C127.761 48.9304 129.797 49.6236 130.889 49.4018C132.094 49.0898 133.21 48.499 134.145 47.677C135.612 46.5108 136.917 45.1549 138.027 43.6449C138.441 43.1342 138.754 42.5486 138.948 41.9201C139.034 41.6303 139.049 41.3241 138.993 41.0271C138.937 40.73 138.811 40.4506 138.626 40.2119C138.57 40.138 138.493 40.0836 138.404 40.0566C138.296 40.0559 138.189 40.0826 138.094 40.1342C136.72 40.8019 135.445 41.6567 134.306 42.6743L133.485 43.3399L133.474 43.3621Z" fill="#231F20"/>
+<path d="M47.1929 31.1608C46.3055 27.1786 45.1242 23.2353 44.7692 19.17C44.4143 15.1047 44.9689 10.7954 47.2761 7.43442C48.1452 6.03031 49.465 4.9627 51.0197 4.40623C52.3841 3.99027 54.7245 4.75563 54.7245 4.75563C55.8567 3.928 57.0323 3.16154 58.2463 2.45954C60.8364 1.16729 63.7925 0.695867 66.6376 0.418561C70.7251 0.0247857 75.4615 0.235538 78.0571 3.41347C79.965 5.74839 80.1314 9.00397 80.209 12.0155L80.4142 19.7357" fill="white"/>
+<path d="M47.1936 31.4379C47.1285 31.4369 47.0657 31.4139 47.0153 31.3726C46.965 31.3313 46.9301 31.2742 46.9163 31.2105C46.6834 30.1734 46.4338 29.1308 46.1787 28.0936C45.3893 25.17 44.8238 22.1905 44.4871 19.181C44.1987 15.8533 44.4039 11.1003 47.0439 7.25682C47.9471 5.80273 49.3152 4.69652 50.9262 4.11771C52.174 3.74057 54.1207 4.26745 54.6587 4.42829C55.7667 3.62567 56.9184 2.88506 58.1084 2.20984C60.8426 0.851036 63.9374 0.4018 66.5995 0.146678C72.2954 -0.407935 76.1111 0.607006 78.2464 3.24696C80.2985 5.75382 80.3927 9.37544 80.4648 12.0154L80.7255 19.719C80.727 19.7945 80.6988 19.8677 80.6469 19.9226C80.5951 19.9776 80.5237 20.01 80.4482 20.0129C80.4106 20.0144 80.3731 20.0084 80.3378 19.9952C80.3026 19.982 80.2703 19.9619 80.243 19.936C80.2156 19.9102 80.1936 19.8792 80.1784 19.8448C80.1632 19.8103 80.155 19.7732 80.1543 19.7356L79.9491 12.0099C79.8659 8.81528 79.644 5.76491 77.8637 3.58528C75.8394 1.10616 72.1845 0.15777 66.6938 0.690198C64.0816 0.94532 61.0534 1.38347 58.3746 2.70344C57.1741 3.39909 56.0115 4.15813 54.8916 4.97736C54.8552 5.0036 54.8131 5.02081 54.7688 5.02756C54.7244 5.03431 54.6791 5.03041 54.6365 5.01618C54.6365 5.01618 52.3626 4.28409 51.1036 4.66677C49.6182 5.21625 48.3564 6.24204 47.5153 7.58404C44.9696 11.2889 44.7755 15.9032 45.0583 19.1311C45.388 22.1122 45.9442 25.0639 46.7222 27.9605C46.9718 29.0032 47.2269 30.0403 47.4598 31.0885C47.468 31.125 47.4689 31.1626 47.4624 31.1994C47.4559 31.2362 47.4422 31.2713 47.4221 31.3027C47.402 31.3342 47.3759 31.3613 47.3452 31.3826C47.3146 31.4039 47.28 31.419 47.2435 31.4269L47.1936 31.4379Z" fill="#231F20"/>
+<path d="M91.5179 137.491C88.7448 86.4115 93.1373 67.3882 90.9633 62.1305C85.8109 49.7515 55.6178 45.6973 55.6178 45.6973C55.6178 45.6973 22.9455 45.5309 15.6856 62.8293C13.8665 67.1775 1.26569 97.3595 0.0289045 115.983C-0.597808 125.295 9.08573 123.415 17.5159 124.197V137.508L91.5179 137.491Z" fill="#68E1FD"/>
+<path d="M71.1799 68.7367L68.7008 72.142L78.3788 112.751L72.6496 124.281L64.2417 112.751L65.423 72.447L61.8125 68.293L67.0092 64.1777L71.1799 68.7367Z" fill="white"/>
+<path d="M72.6496 124.563C72.6045 124.563 72.5599 124.552 72.5195 124.532C72.4791 124.512 72.4439 124.483 72.4167 124.447L64.0143 112.916C63.9741 112.866 63.9543 112.803 63.9588 112.739L65.1346 72.5458L61.5962 68.475C61.5708 68.4464 61.5513 68.413 61.539 68.3768C61.5266 68.3407 61.5215 68.3024 61.5241 68.2642C61.5349 68.1862 61.5744 68.115 61.635 68.0645L66.8317 63.9549C66.8877 63.9089 66.9591 63.8862 67.0314 63.8913C67.1036 63.8965 67.1711 63.9292 67.22 63.9826L71.3906 68.5415C71.4326 68.5922 71.4555 68.656 71.4555 68.7218C71.4555 68.7876 71.4326 68.8513 71.3906 68.902L69.0114 72.202L78.6561 112.689C78.6811 112.751 78.6811 112.821 78.6561 112.883L72.9047 124.408C72.8832 124.452 72.8502 124.49 72.8093 124.517C72.7684 124.544 72.7209 124.56 72.6718 124.563H72.6496ZM64.5301 112.689L72.5997 123.781L78.0737 112.766L68.4235 72.2796C68.4147 72.2395 68.4146 72.1979 68.4232 72.1577C68.4319 72.1176 68.449 72.0797 68.4734 72.0467L70.8138 68.8299L66.9759 64.637L62.2229 68.3197L65.6393 72.2463C65.688 72.299 65.7139 72.3688 65.7114 72.4404L64.5301 112.689Z" fill="#231F20"/>
+<path d="M74.2752 48.2156L75.5897 56.7566C75.5897 56.7566 73.6485 66.0298 64.2478 63.8501C61.5038 63.2106 58.9391 61.9611 56.7441 60.1944C54.5492 58.4278 52.7805 56.1893 51.5694 53.6453L50.5156 33.7846C50.5156 33.7846 57.4316 30.0077 55.2465 14.9277C55.2465 14.9277 65.7176 19.9914 79.6494 18.089C79.6494 18.089 82.9771 33.6182 81.9344 40.8892C80.8918 48.1601 74.2752 48.2156 74.2752 48.2156Z" fill="white"/>
+<path d="M66.9759 64.465C66.0417 64.4577 65.1114 64.3442 64.2029 64.1266C61.4202 63.4641 58.8205 62.1886 56.5935 60.3934C54.3665 58.5982 52.5684 56.3285 51.3303 53.7498C51.3246 53.7187 51.3246 53.6867 51.3303 53.6555L50.2211 33.7949C50.2183 33.7416 50.231 33.6887 50.2576 33.6425C50.2841 33.5962 50.3234 33.5586 50.3708 33.5342C50.4374 33.4954 57.0872 29.6519 54.9575 14.9713C54.9522 14.9198 54.9602 14.8679 54.9806 14.8204C55.0009 14.7728 55.0331 14.7312 55.0739 14.6995C55.1186 14.6737 55.1693 14.6602 55.2209 14.6602C55.2725 14.6602 55.3232 14.6737 55.3679 14.6995C63.0294 17.8766 71.4001 18.9507 79.6156 17.8109C79.6872 17.8008 79.7601 17.818 79.8197 17.8591C79.8793 17.9002 79.9212 17.9622 79.9372 18.0328C80.0703 18.6706 83.2649 33.6895 82.2222 40.9327C81.2794 47.4162 75.9828 48.3535 74.624 48.481L75.8941 56.7115C75.8996 56.7464 75.8996 56.7819 75.8941 56.8168C75.8553 56.9888 74.9734 61.0264 71.6014 63.1783C70.2185 64.05 68.6104 64.4973 66.9759 64.465ZM51.8516 53.5779C53.0575 56.0627 54.8015 58.2478 56.9571 59.9746C59.1126 61.7014 61.6257 62.9265 64.3138 63.5609C67.0314 64.1932 69.3774 63.8993 71.2686 62.6957C74.2469 60.799 75.1897 57.1995 75.3007 56.7392L73.9918 48.2536C73.9845 48.213 73.9862 48.1713 73.9967 48.1314C74.0073 48.0914 74.0265 48.0543 74.0529 48.0226C74.0793 47.9909 74.1124 47.9654 74.1497 47.9478C74.1871 47.9302 74.2278 47.921 74.2691 47.9209C74.5298 47.9209 80.6305 47.7822 81.6454 40.844C82.616 34.1886 79.8485 20.462 79.427 18.4099C71.3617 19.4441 63.1659 18.4077 55.6119 15.3984C57.431 29.0086 51.8849 33.268 50.809 33.9335L51.8516 53.5779Z" fill="#231F20"/>
+<path d="M69.4557 27.1836C69.4557 27.1836 73.8926 35.3697 72.5671 36.612C71.2415 37.8543 67.8584 36.612 67.8584 36.612" fill="white"/>
+<path d="M70.7032 37.4273C69.701 37.3919 68.7099 37.205 67.7637 36.8727C67.7297 36.8609 67.6984 36.8424 67.6715 36.8184C67.6447 36.7944 67.6229 36.7653 67.6075 36.7328C67.592 36.7003 67.5831 36.665 67.5814 36.629C67.5796 36.5931 67.5851 36.5571 67.5973 36.5233C67.6225 36.454 67.6736 36.3973 67.7399 36.3652C67.8062 36.3331 67.8824 36.3281 67.9523 36.3513C67.9856 36.3513 71.169 37.4606 72.3892 36.3846C73.21 35.6359 71.0304 30.6222 69.2224 27.3056C69.187 27.2409 69.1789 27.1648 69.1997 27.0941C69.2205 27.0233 69.2686 26.9638 69.3333 26.9285C69.398 26.8932 69.4741 26.885 69.5448 26.9058C69.6155 26.9266 69.6751 26.9747 69.7104 27.0394C70.4702 28.437 74.2028 35.4806 72.7663 36.7895C72.1806 37.2489 71.446 37.476 70.7032 37.4273Z" fill="#231F20"/>
+<path d="M62.6288 27.2814C63.1368 27.26 63.5089 26.2974 63.4598 25.1314C63.4107 23.9654 62.9591 23.0376 62.4511 23.0589C61.9431 23.0803 61.571 24.0429 61.6201 25.2089C61.6692 26.3748 62.1208 27.3027 62.6288 27.2814Z" fill="#231F20"/>
+<path d="M76.2938 28.1307C76.8023 28.1104 77.1766 27.1478 77.1299 25.9808C77.0833 24.8138 76.6332 23.8842 76.1248 23.9046C75.6163 23.9249 75.2419 24.8875 75.2886 26.0545C75.3353 27.2215 75.7853 28.1511 76.2938 28.1307Z" fill="#231F20"/>
+<path d="M56.538 29.9008C55.7067 28.4818 54.611 27.2355 53.3102 26.2292C52.6358 25.6371 51.7953 25.2672 50.9031 25.1699C50.1711 25.1765 49.4559 25.3899 48.84 25.7855C47.9165 26.3302 47.1178 27.063 46.4958 27.9363C45.8738 28.8096 45.4423 29.8039 45.2295 30.8547C45.0245 31.8288 45.0626 32.8383 45.3404 33.7942C45.8762 35.2735 46.912 36.5192 48.2687 37.3159C49.6175 38.0956 51.0525 38.7154 52.5448 39.1628" fill="white"/>
+<path d="M52.535 39.4811H52.4407C50.9274 39.0235 49.472 38.3926 48.1036 37.601C46.6892 36.7725 45.6113 35.4727 45.0588 33.9294C44.7654 32.927 44.7254 31.8675 44.9423 30.8458C45.1624 29.7536 45.6107 28.7202 46.2577 27.8132C46.9047 26.9063 47.736 26.1461 48.697 25.5825C49.3588 25.1576 50.129 24.9323 50.9155 24.9336C51.864 25.0347 52.7595 25.4215 53.4834 26.0428C54.822 27.0706 55.9516 28.3451 56.811 29.7976C56.822 29.8581 56.8134 29.9205 56.7864 29.9758C56.7594 30.031 56.7154 30.0762 56.6609 30.1047C56.6064 30.1332 56.5442 30.1435 56.4834 30.1342C56.4226 30.1248 56.3664 30.0963 56.323 30.0527C55.5089 28.665 54.4357 27.4468 53.1617 26.4643C52.5367 25.9202 51.7649 25.5729 50.9432 25.466C50.2674 25.4649 49.6053 25.6574 49.0354 26.0206C48.1443 26.5436 47.3736 27.2486 46.7735 28.0896C46.1733 28.9305 45.7572 29.8886 45.5524 30.9012C45.3586 31.8202 45.3948 32.7727 45.6578 33.6743C46.1618 35.0838 47.1428 36.2727 48.4308 37.0353C49.7524 37.826 51.1613 38.4607 52.6292 38.9265C52.6647 38.9384 52.6974 38.9571 52.7255 38.9817C52.7536 39.0063 52.7766 39.0362 52.7931 39.0697C52.8096 39.1033 52.8193 39.1397 52.8217 39.177C52.824 39.2143 52.8189 39.2517 52.8067 39.287C52.7872 39.3435 52.7505 39.3926 52.7018 39.4274C52.6531 39.4622 52.5948 39.4809 52.535 39.4811Z" fill="#231F20"/>
+<path d="M74.2755 48.2144C68.8767 49.0442 63.354 48.1331 58.5078 45.6133C58.5078 45.6133 66.5442 57.9701 75.5122 56.2286L74.2755 48.2144Z" fill="#231F20"/>
+<path d="M73.7802 56.6729C70.508 56.6729 66.9751 55.0091 63.4589 51.7813C61.5109 49.9755 59.7715 47.957 58.2732 45.7637C58.2372 45.7157 58.2178 45.6573 58.2178 45.5973C58.2178 45.5373 58.2372 45.4789 58.2732 45.4309C58.3136 45.3847 58.3685 45.3534 58.429 45.3423C58.4894 45.3313 58.5518 45.341 58.606 45.3699C63.3994 47.8442 68.8507 48.7446 74.1851 47.9433C74.2222 47.9352 74.2607 47.9349 74.2979 47.9426C74.3352 47.9502 74.3704 47.9656 74.4014 47.9877C74.4323 48.0086 74.4586 48.0356 74.4787 48.0671C74.4987 48.0986 74.512 48.1339 74.5178 48.1707L75.7546 56.1849C75.766 56.2561 75.7492 56.3289 75.7078 56.3879C75.6664 56.4469 75.6036 56.4875 75.5328 56.501C74.9552 56.6125 74.3685 56.6701 73.7802 56.6729ZM59.3603 46.3294C61.3624 49.0526 68.0067 57.1721 75.2056 56.0019L74.0686 48.5368C69.052 49.2248 63.9433 48.4587 59.3492 46.3294H59.3603Z" fill="#231F20"/>
+<path d="M118.239 41.6286L118.112 41.8303C117.839 42.2632 117.405 42.57 116.906 42.6831C116.406 42.7961 115.883 42.7062 115.45 42.4331L102.493 34.2613L104.679 30.7946L117.631 38.9635C118.064 39.2366 118.371 39.6705 118.484 40.1697C118.597 40.6689 118.507 41.1927 118.234 41.6256L118.239 41.6286Z" fill="white"/>
+<path d="M116.464 43.0063C116.049 43.0063 115.642 42.8869 115.293 42.6624L102.354 34.4874C102.322 34.4688 102.294 34.4433 102.273 34.4125C102.252 34.3818 102.238 34.3468 102.232 34.31C102.224 34.2753 102.222 34.2392 102.228 34.204C102.234 34.1687 102.247 34.135 102.266 34.1048L104.451 30.6329C104.49 30.5712 104.553 30.5278 104.625 30.5122C104.697 30.4966 104.772 30.5101 104.833 30.5497L117.773 38.7247C118.266 39.0384 118.616 39.5343 118.746 40.1045C118.875 40.6747 118.775 41.2731 118.466 41.7695L118.338 41.9747C118.025 42.4697 117.528 42.8206 116.957 42.9508C116.795 42.9857 116.63 43.0043 116.464 43.0063ZM102.865 34.1713L115.587 42.191C115.77 42.3091 115.975 42.389 116.189 42.4262C116.404 42.4634 116.623 42.4569 116.835 42.4073C117.265 42.318 117.641 42.0629 117.883 41.6974L118.011 41.4978C118.242 41.1263 118.317 40.6788 118.221 40.2522C118.124 39.8256 117.864 39.4542 117.495 39.2183L104.756 31.1598L102.865 34.1713Z" fill="#231F20"/>
+<path d="M103.243 36.8104L106.753 31.1816L103.59 29.2093L100.08 34.838L103.243 36.8104Z" fill="white"/>
+<path d="M102.91 36.2902C102.857 36.2901 102.805 36.2747 102.76 36.2459L99.6154 34.2603C99.5843 34.2411 99.5575 34.2159 99.5362 34.1862C99.515 34.1565 99.4998 34.123 99.4915 34.0874C99.4833 34.0519 99.4822 34.015 99.4882 33.979C99.4942 33.943 99.5072 33.9086 99.5266 33.8777L103.059 28.2816C103.078 28.25 103.103 28.2226 103.133 28.2009C103.162 28.1792 103.196 28.1638 103.232 28.1555C103.268 28.1472 103.305 28.1462 103.341 28.1526C103.377 28.1591 103.411 28.1728 103.442 28.1929L106.587 30.1784C106.618 30.197 106.645 30.2219 106.666 30.2515C106.687 30.2811 106.702 30.3147 106.709 30.3503C106.726 30.4222 106.714 30.4979 106.676 30.5611L103.137 36.1516C103.098 36.2133 103.036 36.2571 102.965 36.2736L102.91 36.2902ZM100.137 33.9331L102.815 35.597L106.054 30.4668L103.376 28.8029L100.137 33.9331Z" fill="#231F20"/>
+<path d="M134.967 53.4816L136.008 51.8304C136.696 50.7397 136.37 49.2978 135.279 48.6099L117.195 37.2042C116.104 36.5162 114.662 36.8428 113.975 37.9335L112.933 39.5847C112.245 40.6755 112.572 42.1173 113.662 42.8053L131.746 54.211C132.837 54.8989 134.279 54.5724 134.967 53.4816Z" fill="white"/>
+<path d="M132.98 54.8419C132.489 54.8412 132.008 54.7008 131.593 54.4371L113.513 43.0287C113.223 42.8456 112.971 42.6071 112.773 42.3268C112.575 42.0465 112.434 41.7299 112.358 41.3952C112.283 41.0604 112.274 40.7139 112.332 40.3756C112.39 40.0374 112.514 39.7139 112.698 39.4237L113.735 37.7599C114.107 37.1758 114.694 36.7623 115.369 36.6095C116.045 36.4568 116.753 36.5773 117.34 36.9446L135.42 48.353C135.711 48.536 135.962 48.7745 136.16 49.0548C136.358 49.3351 136.499 49.6517 136.575 49.9865C136.651 50.3213 136.66 50.6677 136.601 51.006C136.543 51.3443 136.419 51.6678 136.236 51.9579L135.198 53.6218C135.012 53.9153 134.769 54.1686 134.483 54.3667C134.197 54.5648 133.875 54.7038 133.535 54.7754C133.353 54.8177 133.167 54.84 132.98 54.8419ZM115.948 37.0943C115.599 37.0937 115.256 37.1813 114.951 37.3491C114.645 37.5169 114.387 37.7593 114.201 38.0538L113.164 39.7176C113.018 39.9458 112.92 40.2007 112.874 40.4673C112.828 40.7339 112.836 41.007 112.897 41.2706C112.957 41.5343 113.068 41.7836 113.224 42.0044C113.38 42.2252 113.578 42.4131 113.807 42.5573L131.887 53.9601C132.35 54.2505 132.91 54.3458 133.443 54.2252C133.976 54.1047 134.439 53.7781 134.733 53.3167L135.77 51.6529C135.914 51.4243 136.012 51.1694 136.058 50.9029C136.104 50.6364 136.096 50.3635 136.037 50.0997C135.977 49.836 135.866 49.5867 135.709 49.3659C135.553 49.1452 135.355 48.9574 135.126 48.8133L117.046 37.4104C116.715 37.2107 116.334 37.1088 115.948 37.1165V37.0943Z" fill="#231F20"/>
+<path d="M73.8929 13.7963C72.0385 16.7361 71.0974 20.1599 71.1887 23.6345C71.2799 27.1092 72.3994 30.4788 74.4056 33.3173C76.4117 36.1557 79.2145 38.3356 82.4595 39.5813C85.7045 40.827 89.246 41.0826 92.6362 40.3157C96.0264 39.5487 99.1131 37.7938 101.506 35.2728C103.899 32.7517 105.491 29.5778 106.08 26.1522C106.669 22.7266 106.229 19.2033 104.816 16.0276C103.403 12.852 101.08 10.1667 98.1406 8.31116C94.1972 5.82519 89.4282 5.00652 84.8815 6.03504C80.3348 7.06355 76.3824 9.85512 73.8929 13.7963Z" fill="white"/>
+<path d="M88.7281 41.0282C85.5365 41.026 82.4039 40.1678 79.6569 38.5429C76.9098 36.918 74.649 34.586 73.1099 31.79C71.5709 28.994 70.81 25.8364 70.9066 22.6462C71.0032 19.4561 71.9538 16.3503 73.6592 13.6525C75.3158 11.0255 77.629 8.87609 80.3704 7.41656C83.1118 5.95703 86.1865 5.23788 89.2908 5.33015C92.3952 5.42241 95.4217 6.3229 98.0716 7.94267C100.721 9.56244 102.903 11.8455 104.401 14.5662C105.898 17.287 106.66 20.3513 106.611 23.4567C106.562 26.562 105.704 29.6008 104.121 32.273C102.539 34.9452 100.286 37.1583 97.5868 38.6938C94.8872 40.2292 91.8338 41.0339 88.7281 41.0282ZM74.1251 13.9687C71.9886 17.3543 71.0921 21.376 71.5884 25.3485C72.0847 29.321 73.943 32.9986 76.8468 35.7545C79.7507 38.5104 83.5202 40.1742 87.5132 40.4624C91.5062 40.7506 95.4756 39.6453 98.7451 37.3349C102.015 35.0245 104.382 31.6519 105.443 27.7918C106.505 23.9317 106.195 19.823 104.567 16.1656C102.939 12.5083 100.093 9.5287 96.5138 7.73452C92.935 5.94033 88.8447 5.44258 84.9401 6.32609C80.4656 7.34163 76.5763 10.09 74.1251 13.9687Z" fill="#231F20"/>
+<path d="M96.1767 11.4151C98.5033 12.8817 100.343 15.0053 101.462 17.5173C102.582 20.0294 102.931 22.817 102.467 25.5277C102.002 28.2384 100.743 30.7504 98.8509 32.7459C96.9582 34.7414 94.5163 36.1308 91.834 36.7383C89.1517 37.3458 86.3494 37.1442 83.7817 36.159C81.2139 35.1738 78.996 33.4492 77.4085 31.2033C75.821 28.9575 74.9352 26.2913 74.8632 23.542C74.7911 20.7926 75.536 18.0837 77.0037 15.7578C78.9709 12.6401 82.0957 10.4313 85.6911 9.61697C89.2865 8.80264 93.0581 9.44943 96.1767 11.4151Z" fill="white"/>
+<path d="M88.7396 37.3551C86.5396 37.3555 84.3697 36.844 82.4015 35.8612C80.4332 34.8783 78.7207 33.451 77.3992 31.6921C76.0777 29.9333 75.1835 27.8911 74.7874 25.727C74.3913 23.563 74.5041 21.3365 75.1169 19.2236C75.7297 17.1107 76.8256 15.1693 78.3181 13.553C79.8106 11.9366 81.6586 10.6897 83.7161 9.9108C85.7736 9.13188 87.9841 8.84233 90.1728 9.06504C92.3614 9.28775 94.4683 10.0166 96.3267 11.194C98.9307 12.8334 100.931 15.2756 102.024 18.1518C103.118 21.028 103.246 24.1819 102.389 27.1373C101.533 30.0927 99.7374 32.6891 97.275 34.5344C94.8126 36.3797 91.8167 37.3736 88.7396 37.3662V37.3551ZM88.784 9.53016C87.7633 9.5303 86.7458 9.64377 85.7502 9.86848C82.6739 10.5638 79.9339 12.3044 77.997 14.7935C76.0601 17.2826 75.0462 20.3663 75.128 23.5192C75.2099 26.6721 76.3824 29.699 78.4458 32.0843C80.5093 34.4696 83.3359 36.0656 86.4442 36.6004C89.5525 37.1352 92.75 36.5757 95.492 35.0172C98.234 33.4588 100.351 30.9978 101.482 28.0536C102.613 25.1094 102.688 21.8642 101.694 18.8708C100.701 15.8775 98.6998 13.3213 96.0328 11.6377C93.8652 10.2621 91.3512 9.53117 88.784 9.53016Z" fill="#D1D3D4"/>
+<path d="M74.5586 39.1636C74.5586 39.1636 64.9582 46.612 61.1758 32.1699L74.5586 39.1636Z" fill="white"/>
+<path d="M69.1671 41.365C68.4582 41.3666 67.7538 41.2523 67.0818 41.0266C64.2588 40.0672 62.1845 37.1111 60.9089 32.236C60.8905 32.1625 60.9021 32.0846 60.9411 32.0196C60.9801 31.9546 61.0434 31.9078 61.1169 31.8894C61.1905 31.871 61.2683 31.8826 61.3333 31.9216C61.3983 31.9606 61.4452 32.0238 61.4635 32.0974C62.6837 36.7783 64.6415 39.6068 67.2759 40.4998C70.7866 41.6977 74.3694 38.9746 74.4027 38.9468C74.4314 38.9243 74.4644 38.9076 74.4996 38.8977C74.5348 38.8879 74.5716 38.8851 74.6079 38.8894C74.6442 38.8938 74.6793 38.9053 74.7112 38.9232C74.7431 38.9412 74.7711 38.9652 74.7937 38.994C74.8162 39.0228 74.8329 39.0557 74.8428 39.0909C74.8526 39.1261 74.8554 39.1629 74.8511 39.1993C74.8467 39.2356 74.8352 39.2706 74.8173 39.3025C74.7993 39.3344 74.7753 39.3624 74.7465 39.385C73.1263 40.5875 71.1829 41.2771 69.1671 41.365Z" fill="#231F20"/>
+<path d="M123.541 46.8287C124.14 46.5514 124.306 45.7861 124.328 45.1205C124.366 43.8672 124.153 42.619 123.702 41.449L125.887 46.2575C126.251 47.2195 126.799 48.1012 127.501 48.8531C127.859 49.222 128.314 49.481 128.814 49.5999C129.314 49.7188 129.838 49.6925 130.324 49.5242C131.682 48.9141 131.91 47.0839 131.721 45.6086C131.552 44.2295 131.187 42.8813 130.64 41.6043C130.22 40.4531 129.46 39.457 128.46 38.748C127.423 38.1047 125.948 38.0548 125.077 38.8978C124.123 37.4391 122.154 34.8158 120.047 35.3372C118.666 35.6755 118.827 36.4464 119.104 37.7165C119.486 39.4302 121.112 47.9657 123.541 46.8287Z" fill="white"/>
+<path d="M129.497 49.9722C128.681 49.9441 127.903 49.6164 127.312 49.0516C126.59 48.2725 126.025 47.361 125.648 46.3673L124.595 44.0434C124.624 44.4124 124.633 44.7827 124.622 45.1527C124.589 46.1565 124.262 46.8165 123.674 47.1049C123.496 47.195 123.299 47.242 123.1 47.242C122.901 47.242 122.704 47.195 122.526 47.1049C120.862 46.273 119.753 41.9359 118.949 38.2311L118.849 37.7874C118.588 36.6005 118.339 35.4802 119.997 35.0753C121.655 34.6705 123.375 35.8629 125.149 38.4973C125.669 38.1684 126.271 37.9938 126.885 37.9938C127.5 37.9938 128.102 38.1684 128.621 38.4973C129.673 39.2334 130.472 40.2751 130.912 41.4811C131.468 42.7822 131.841 44.1541 132.021 45.5575C132.121 46.3395 132.298 48.9462 130.463 49.7615C130.16 49.9011 129.831 49.973 129.497 49.9722ZM123.702 41.1705C123.754 41.1702 123.806 41.1853 123.85 41.2139C123.895 41.2424 123.93 41.2832 123.951 41.3314L126.137 46.1399C126.492 47.0654 127.019 47.9158 127.689 48.6467C128.008 48.9792 128.414 49.2141 128.861 49.3241C129.308 49.4341 129.777 49.4146 130.213 49.2679C131.699 48.6023 131.533 46.3229 131.45 45.6407C131.279 44.287 130.92 42.9636 130.385 41.7085C129.99 40.609 129.268 39.6567 128.316 38.9798C127.451 38.4252 126.098 38.3032 125.266 39.0963C125.237 39.1257 125.203 39.148 125.164 39.1615C125.126 39.175 125.084 39.1793 125.044 39.1739C125.004 39.169 124.965 39.1556 124.931 39.1345C124.896 39.1135 124.867 39.0853 124.844 39.0519C123.663 37.2383 121.883 35.1696 120.113 35.6022C119.037 35.8684 119.082 36.3343 119.376 37.6543L119.47 38.1035C119.875 39.9947 121.106 45.7461 122.759 46.5725C122.862 46.6259 122.976 46.6538 123.092 46.6538C123.208 46.6538 123.322 46.6259 123.424 46.5725C123.907 46.3451 124.035 45.6518 124.051 45.1083C124.089 43.8907 123.881 42.678 123.441 41.5421C123.428 41.509 123.421 41.4735 123.421 41.4377C123.421 41.4019 123.428 41.3665 123.442 41.3335C123.456 41.3005 123.476 41.2706 123.502 41.2455C123.527 41.2204 123.558 41.2006 123.591 41.1872C123.626 41.1738 123.664 41.1681 123.702 41.1705Z" fill="#231F20"/>
+<path d="M116.22 44.7754C116.22 44.7754 122.875 47.2434 123.613 54.5699L116.22 44.7754Z" fill="white"/>
+<path d="M123.58 54.8476C123.512 54.8479 123.446 54.8223 123.395 54.776C123.345 54.7298 123.314 54.6662 123.308 54.5981C122.604 47.5379 116.159 45.0587 116.098 45.0365C116.03 45.0093 115.975 44.9563 115.944 44.889C115.914 44.8217 115.912 44.7452 115.937 44.676C115.963 44.6079 116.015 44.5529 116.082 44.5228C116.148 44.4927 116.224 44.4899 116.292 44.5152C116.364 44.5152 123.125 47.1274 123.863 54.5426C123.867 54.5791 123.863 54.6159 123.853 54.651C123.842 54.6861 123.825 54.7188 123.802 54.7472C123.778 54.7755 123.75 54.799 123.717 54.8163C123.685 54.8335 123.65 54.8442 123.613 54.8476H123.58Z" fill="#231F20"/>
+<path d="M86.3045 56.3965C86.3045 56.3965 114.068 82.4633 114.357 80.7551C116.193 70.0677 117.651 60.9277 117.651 60.9277L135.765 61.6653C135.765 61.6653 135.765 112.69 123.563 113.926C114.324 114.858 82.1172 84.7039 82.1172 84.7039L86.3045 56.3965Z" fill="#68E1FD"/>
+<path d="M90.9456 126.693C90.8738 126.692 90.805 126.664 90.7527 126.615C90.7004 126.565 90.6683 126.498 90.6628 126.427L85.5049 65.7133C85.5166 65.6512 85.5485 65.5946 85.5955 65.5524C85.6426 65.5101 85.7022 65.4845 85.7653 65.4794C85.8283 65.4744 85.8912 65.4902 85.9444 65.5244C85.9976 65.5587 86.038 65.6095 86.0595 65.6689L91.2618 126.382C91.2648 126.42 91.2605 126.457 91.249 126.492C91.2375 126.528 91.2191 126.561 91.1949 126.589C91.1707 126.617 91.1411 126.641 91.1078 126.658C91.0745 126.675 91.0383 126.685 91.0011 126.687L90.9456 126.693Z" fill="#231F20"/>
+<path d="M48.5572 125.405L12.6516 124.235C12.6137 124.234 12.5764 124.225 12.542 124.209C12.5075 124.193 12.4766 124.171 12.4508 124.143C12.4251 124.115 12.405 124.082 12.3919 124.047C12.3788 124.011 12.3728 123.973 12.3742 123.936C12.3799 123.86 12.4139 123.79 12.4694 123.738C12.525 123.687 12.598 123.658 12.6737 123.658L48.2965 124.823L49.3115 105.744L24.4704 102.805C24.4307 102.799 24.3926 102.785 24.3584 102.764C24.3241 102.743 24.2943 102.715 24.2707 102.683C24.2486 102.65 24.2332 102.613 24.2256 102.574C24.218 102.535 24.2182 102.494 24.2263 102.455C27.4597 88.7953 32.2571 68.1194 32.2017 67.1488C32.185 67.076 32.1978 66.9996 32.2373 66.9362C32.2768 66.8728 32.3397 66.8276 32.4124 66.8105C32.488 66.7954 32.5665 66.81 32.6316 66.8513C32.6967 66.8927 32.7433 66.9575 32.7618 67.0323C32.9726 67.8753 26.3838 95.8334 24.8586 102.272L49.6442 105.212C49.7163 105.22 49.7824 105.256 49.8289 105.312C49.8753 105.368 49.8986 105.439 49.8938 105.511L48.8511 125.134C48.8468 125.208 48.8138 125.278 48.759 125.329C48.7042 125.379 48.6318 125.407 48.5572 125.405Z" fill="#231F20"/>
+<path d="M72.8604 85.8398L106.708 92.0349L97.0582 137.491L61.8125 133.403L72.8604 85.8398Z" fill="#231F20"/>
+<path d="M97.0648 137.767H97.0315L61.7803 133.686C61.7419 133.68 61.7049 133.667 61.6716 133.647C61.6383 133.627 61.6093 133.6 61.5862 133.569C61.5645 133.537 61.5495 133.501 61.5418 133.463C61.5342 133.424 61.5342 133.385 61.5419 133.347L72.5897 85.778C72.6057 85.7081 72.6481 85.6471 72.7081 85.6078C72.7681 85.5686 72.841 85.554 72.9114 85.5673L106.743 91.7679C106.779 91.7737 106.813 91.7871 106.844 91.8072C106.875 91.8273 106.901 91.8536 106.92 91.8843C106.962 91.9482 106.978 92.0255 106.965 92.1006L97.3144 137.551C97.3015 137.609 97.2703 137.662 97.2253 137.701C97.1804 137.739 97.1241 137.763 97.0648 137.767ZM62.1519 133.164L96.843 137.185L106.377 92.2615L73.0723 86.1607L62.1519 133.164Z" fill="#231F20"/>
+<path d="M77.0483 106.916C76.7876 103.948 67.1595 107.986 67.1595 107.986C67.1595 107.986 69.8772 101.797 68.4185 100.671C66.9599 99.5448 62.0571 106.988 62.0571 106.988C57.9405 107.625 53.7827 107.959 49.6171 107.986L48.752 121.796C62.5618 120.798 71.5188 120.404 71.9459 119.516C72.7889 117.747 77.309 109.883 77.0483 106.916Z" fill="white"/>
+<path d="M48.7519 122.046C48.7189 122.047 48.686 122.041 48.6554 122.029C48.6248 122.016 48.5972 121.998 48.5744 121.974C48.5475 121.949 48.5266 121.919 48.5132 121.886C48.4997 121.852 48.4941 121.816 48.4967 121.78L49.3619 107.97C49.3674 107.905 49.3965 107.845 49.4437 107.801C49.4908 107.757 49.5526 107.732 49.6171 107.731C53.7321 107.706 57.8399 107.38 61.9073 106.755C62.5506 105.796 66.0613 100.621 67.886 100.316C68.0051 100.292 68.128 100.293 68.2465 100.32C68.3651 100.347 68.4766 100.398 68.5737 100.471C69.9214 101.514 68.302 105.884 67.6309 107.52C69.4278 106.816 74.8963 104.819 76.6822 105.895C76.8601 105.998 77.0099 106.142 77.1183 106.316C77.2267 106.491 77.2903 106.689 77.3033 106.894C77.5196 109.412 74.5303 115.119 72.9163 118.186C72.5836 118.812 72.3229 119.295 72.1732 119.622C71.7905 120.426 67.8472 120.731 56.5053 121.508C54.1427 121.669 51.5582 121.846 48.7408 122.062L48.7519 122.046ZM49.8611 108.241L49.0292 121.519L56.4776 121.003C64.7524 120.448 71.2858 119.994 71.7295 119.4C71.8737 119.09 72.1399 118.585 72.4727 117.953C73.9424 115.146 77.0094 109.312 76.8042 106.938C76.7969 106.813 76.7586 106.692 76.6928 106.585C76.6269 106.479 76.5356 106.39 76.427 106.328C74.863 105.385 69.2781 107.371 67.2648 108.219C67.2177 108.239 67.1657 108.245 67.1155 108.235C67.0653 108.225 67.0193 108.2 66.9834 108.163C66.9475 108.127 66.9234 108.08 66.9143 108.03C66.9051 107.98 66.9113 107.928 66.9321 107.881C67.9526 105.563 69.2171 101.603 68.2687 100.871C68.2267 100.841 68.1786 100.82 68.1278 100.81C68.0771 100.801 68.0248 100.802 67.9747 100.815C66.5549 101.054 63.3825 105.452 62.2789 107.132C62.2378 107.19 62.1763 107.229 62.1069 107.243C58.0512 107.861 53.9577 108.198 49.8555 108.253L49.8611 108.241Z" fill="#231F20"/>
+<path d="M112.277 89.7108H112.222C112.185 89.7035 112.149 89.6889 112.118 89.6679C112.087 89.6469 112.06 89.6198 112.039 89.5883C112.019 89.5568 112.005 89.5214 111.998 89.4844C111.991 89.4473 111.992 89.4093 112 89.3724L116.991 65.6406C116.999 65.6036 117.013 65.5684 117.034 65.5371C117.055 65.5059 117.082 65.4791 117.114 65.4584C117.145 65.4378 117.181 65.4236 117.218 65.4168C117.255 65.41 117.293 65.4106 117.33 65.4187C117.404 65.4347 117.468 65.4792 117.51 65.5424C117.551 65.6057 117.566 65.6828 117.551 65.757L112.56 89.4889C112.546 89.5529 112.51 89.6101 112.458 89.6505C112.407 89.691 112.343 89.7123 112.277 89.7108Z" fill="#231F20"/>
+<path d="M80.5928 23.3247C80.7021 23.1803 80.8207 23.0432 80.9477 22.9143L82.2899 21.7329C82.341 21.6597 82.409 21.5999 82.4882 21.5586C82.5674 21.5173 82.6554 21.4958 82.7447 21.4958C82.834 21.4958 82.922 21.5173 83.0011 21.5586C83.0803 21.5999 83.1483 21.6597 83.1995 21.7329L86.6325 25.227C86.6809 25.3123 86.751 25.3833 86.8358 25.4327C86.9206 25.4821 87.0169 25.5081 87.115 25.5081C87.2131 25.5081 87.3095 25.4821 87.3943 25.4327C87.479 25.3833 87.5492 25.3123 87.5975 25.227L95.6339 17.2295C95.6818 17.1428 95.7521 17.0705 95.8375 17.0202C95.9228 16.9699 96.0201 16.9434 96.1192 16.9434C96.2182 16.9434 96.3155 16.9699 96.4008 17.0202C96.4862 17.0705 96.5565 17.1428 96.6045 17.2295L98.0132 18.6493C98.0853 18.7006 98.1441 18.7683 98.1847 18.847C98.2252 18.9256 98.2464 19.0128 98.2464 19.1013C98.2464 19.1898 98.2252 19.277 98.1847 19.3556C98.1441 19.4342 98.0853 19.502 98.0132 19.5533L87.5532 29.9967C87.5013 30.0624 87.4351 30.1156 87.3597 30.1522C87.2843 30.1887 87.2016 30.2077 87.1178 30.2077C87.034 30.2077 86.9513 30.1887 86.8759 30.1522C86.8005 30.1156 86.7343 30.0624 86.6824 29.9967C84.7191 27.9705 82.7576 25.9369 80.798 23.8959C80.7201 23.799 80.6514 23.695 80.5928 23.5853V23.3247Z" fill="#231F20"/>
+<path d="M87.1199 30.484C86.9996 30.4802 86.8814 30.4516 86.7726 30.4001C86.6638 30.3486 86.5668 30.2752 86.4876 30.1845L80.6032 24.0838C80.5342 24.0008 80.4729 23.9117 80.4202 23.8176L80.3647 23.7288C80.3359 23.6842 80.3205 23.6322 80.3203 23.5791V23.3018C80.3195 23.2363 80.3432 23.173 80.3869 23.1243L80.4923 22.9967C80.5753 22.8886 80.6662 22.7866 80.764 22.6917C81.0802 22.3977 81.4074 22.1038 81.729 21.8154L82.1117 21.4771C82.1922 21.3829 82.2926 21.3078 82.4058 21.2574C82.519 21.207 82.642 21.1825 82.7658 21.1857C82.8896 21.1889 83.0112 21.2197 83.1216 21.2758C83.232 21.332 83.3285 21.4121 83.404 21.5104L86.8315 25.0044C86.9074 25.0952 87.0104 25.1594 87.1254 25.1874C87.2208 25.1698 87.3092 25.1255 87.3806 25.0599L95.4113 17.0624C95.4974 16.9622 95.6025 16.8802 95.7206 16.8212C95.8387 16.7621 95.9673 16.7272 96.0991 16.7185C96.3618 16.7416 96.6048 16.8671 96.7757 17.0679L98.1844 18.4877C98.2788 18.5668 98.3548 18.6657 98.4069 18.7773C98.459 18.889 98.4859 19.0107 98.4859 19.1338C98.4859 19.257 98.459 19.3787 98.4069 19.4904C98.3548 19.602 98.2788 19.7008 98.1844 19.78L87.7466 30.1956C87.6671 30.2836 87.5705 30.3545 87.4628 30.4041C87.3551 30.4536 87.2384 30.4808 87.1199 30.484ZM80.8694 23.5236V23.5624C80.8999 23.6172 80.9351 23.6692 80.9748 23.7177C82.9344 25.7476 84.8959 27.7812 86.8592 29.8185C86.9168 29.8912 87.0003 29.9388 87.0922 29.9516C87.1839 29.9376 87.2681 29.8926 87.3306 29.824L97.7906 19.3806C97.9737 19.1976 97.9737 19.0645 97.7906 18.8704L96.3819 17.4561C96.3007 17.373 96.2022 17.3087 96.0935 17.2676C95.9805 17.2967 95.8796 17.3608 95.8051 17.4506L87.791 25.4259C87.7068 25.5236 87.6042 25.6038 87.4891 25.6619C87.3739 25.7199 87.2485 25.7547 87.1199 25.7642C86.9886 25.7547 86.8605 25.7189 86.7433 25.6589C86.6261 25.5988 86.5222 25.5159 86.4377 25.4148L83.0102 21.9208C82.805 21.71 82.7052 21.71 82.4556 21.9208L82.0785 22.2646C81.7568 22.553 81.4351 22.8192 81.119 23.1298C81.0393 23.2077 80.9651 23.2911 80.8971 23.3794L80.8528 23.4349L80.8694 23.5236Z" fill="#231F20"/>
+<path d="M82.1338 88.8007L83.7089 85.168L98.3895 87.7636V91.5959L82.1338 88.8007Z" fill="#231F20"/>
+<path d="M98.3886 91.8733H98.3442L82.0885 89.1002C82.0463 89.0949 82.006 89.0796 81.971 89.0555C81.9359 89.0315 81.9072 88.9994 81.8871 88.9619C81.867 88.9244 81.8562 88.8827 81.8555 88.8402C81.8548 88.7977 81.8644 88.7556 81.8833 88.7175L83.4529 85.0848C83.4772 85.0265 83.5206 84.9782 83.5761 84.9479C83.6316 84.9177 83.6957 84.9073 83.7579 84.9184L98.4385 87.514C98.5031 87.5258 98.5614 87.5602 98.6031 87.611C98.6447 87.6618 98.667 87.7257 98.6659 87.7913V91.6126C98.666 91.6529 98.657 91.6928 98.6397 91.7292C98.6225 91.7657 98.5973 91.7978 98.5661 91.8234C98.5138 91.8586 98.4516 91.8761 98.3886 91.8733ZM82.5322 88.59L98.1113 91.2632V87.991L83.8799 85.4786L82.5322 88.59Z" fill="#231F20"/>
+<path d="M51.8851 75.4804C51.6643 75.4706 51.4533 75.3865 51.2861 75.2419C48.6573 73.212 44.1261 55.3313 44.3868 53.2626C44.6751 50.9886 48.4077 47.8995 48.5685 47.7663C48.6281 47.7186 48.7042 47.6965 48.7801 47.7048C48.856 47.7132 48.9255 47.7512 48.9734 47.8107C48.9972 47.8394 49.015 47.8726 49.026 47.9082C49.0369 47.9439 49.0406 47.9813 49.037 48.0184C49.0334 48.0556 49.0225 48.0916 49.0049 48.1245C48.9874 48.1574 48.9634 48.1864 48.9346 48.21C48.8958 48.2433 45.2131 51.2881 44.958 53.3347C44.7084 55.2924 49.1952 72.9014 51.6134 74.7926C51.7409 74.8869 51.8407 74.9257 51.9184 74.898C54.1368 73.9995 60.1599 65.6082 60.2376 65.5251C60.2821 65.4637 60.3489 65.4224 60.4236 65.4099C60.4983 65.3975 60.5749 65.4149 60.6369 65.4585C60.6679 65.48 60.6942 65.5076 60.7144 65.5395C60.7345 65.5713 60.7481 65.6069 60.7543 65.6441C60.7605 65.6813 60.7592 65.7194 60.7505 65.7561C60.7417 65.7928 60.7258 65.8274 60.7035 65.8578C60.4539 66.2072 54.5362 74.471 52.1458 75.4249C52.0638 75.4617 51.975 75.4806 51.8851 75.4804Z" fill="#231F20"/>
+<path d="M77.8799 72.2799H77.7745C75.9221 72.0747 72.8994 65.8464 72.5611 65.142C72.5289 65.0729 72.5254 64.9938 72.5514 64.9221C72.5774 64.8503 72.6308 64.7918 72.6998 64.7594C72.7674 64.727 72.8452 64.7229 72.9159 64.7478C72.9866 64.7728 73.0446 64.8248 73.0769 64.8925C74.3026 67.4603 76.6764 71.5811 77.8355 71.7087C77.8976 71.7171 77.9609 71.7068 78.0172 71.6791C78.0735 71.6515 78.1203 71.6077 78.1516 71.5534C79.5603 69.7509 81.4793 59.6347 80.1371 54.6543C80.1167 54.5808 80.1262 54.5021 80.1636 54.4356C80.201 54.369 80.2633 54.3201 80.3368 54.2994C80.3732 54.2894 80.4113 54.2868 80.4487 54.2918C80.4862 54.2967 80.5222 54.3091 80.5548 54.3283C80.5874 54.3474 80.6158 54.3728 80.6383 54.4031C80.6609 54.4334 80.6772 54.4679 80.6862 54.5046C82.0949 59.729 80.1039 69.9838 78.6064 71.9083C78.5232 72.0232 78.414 72.1168 78.2878 72.1814C78.1615 72.246 78.0217 72.2797 77.8799 72.2799Z" fill="#231F20"/>
+</svg>
diff --git a/src/search-modal/images/no-results.svg b/src/search-modal/images/no-results.svg
new file mode 100644
index 0000000000..e6d72bed5b
--- /dev/null
+++ b/src/search-modal/images/no-results.svg
@@ -0,0 +1,43 @@
+<svg width="189" height="155" viewBox="0 0 189 155" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M188.261 130.592H8.40427C8.31881 130.592 8.23685 130.558 8.17641 130.497C8.11598 130.437 8.08203 130.355 8.08203 130.27C8.08203 130.184 8.11598 130.102 8.17641 130.042C8.23685 129.981 8.31881 129.947 8.40427 129.947H188.261C188.346 129.947 188.428 129.981 188.489 130.042C188.549 130.102 188.583 130.184 188.583 130.27C188.583 130.355 188.549 130.437 188.489 130.497C188.428 130.558 188.346 130.592 188.261 130.592Z" fill="#D1D3D4"/>
+<path d="M46.5709 71.1188C72.1274 71.1188 92.845 55.269 92.845 35.7173C92.845 16.1655 72.1274 0.315674 46.5709 0.315674C21.0145 0.315674 0.296875 16.1655 0.296875 35.7173C0.296875 55.269 21.0145 71.1188 46.5709 71.1188Z" fill="white"/>
+<path d="M46.5899 71.4412C20.9007 71.4412 0 55.4193 0 35.7174C0 16.0155 20.8813 0 46.5899 0C72.2984 0 93.1861 16.0219 93.1861 35.7174C93.1861 55.4129 72.2662 71.4412 46.5899 71.4412ZM46.5899 0.644485C21.2551 0.644485 0.644485 16.3764 0.644485 35.7174C0.644485 55.0584 21.268 70.7967 46.5899 70.7967C71.9117 70.7967 92.5417 55.0648 92.5417 35.7174C92.5417 16.3699 71.9117 0.644485 46.5899 0.644485Z" fill="#D1D3D4"/>
+<path d="M97.9934 20.4879C97.776 20.4944 97.5598 20.5246 97.3489 20.5781C94.9321 21.2226 94.2554 24.5352 96.9687 25.4246C97.3434 25.5262 97.7354 25.5475 98.1189 25.4872C98.5025 25.4269 98.869 25.2863 99.1944 25.0746C99.5199 24.8629 99.797 24.5848 100.008 24.2587C100.218 23.9325 100.358 23.5655 100.417 23.1818C100.46 22.8406 100.43 22.494 100.327 22.1657C100.225 21.8374 100.053 21.535 99.8227 21.2793C99.5926 21.0236 99.3101 20.8205 98.9944 20.6839C98.6788 20.5473 98.3373 20.4804 97.9934 20.4879Z" fill="white"/>
+<path d="M97.6854 25.8632C97.4054 25.8629 97.1272 25.8194 96.8605 25.7343C96.2824 25.588 95.7713 25.2491 95.4117 24.7735C95.052 24.2978 94.8651 23.7138 94.8819 23.1177C94.9197 22.4497 95.1712 21.8115 95.5995 21.2974C96.0277 20.7833 96.6099 20.4206 97.26 20.2626C97.5 20.201 97.747 20.1706 97.9948 20.1724C98.3827 20.1647 98.7678 20.2406 99.1238 20.3951C99.4798 20.5496 99.7983 20.779 100.058 21.0677C100.317 21.3564 100.511 21.6976 100.627 22.068C100.742 22.4384 100.777 22.8295 100.727 23.2144C100.674 23.6496 100.524 24.0673 100.287 24.4365C100.051 24.8058 99.7341 25.1172 99.3611 25.3476C98.8639 25.6775 98.282 25.8565 97.6854 25.8632ZM97.9948 20.8169C97.8013 20.815 97.6084 20.8389 97.4212 20.8878C96.9058 21.0098 96.4434 21.2944 96.1022 21.6994C95.761 22.1045 95.5591 22.6085 95.5264 23.137C95.5157 23.5936 95.6622 24.04 95.9415 24.4014C96.2207 24.7628 96.6157 25.0172 97.0603 25.1221C97.3891 25.2082 97.7323 25.2245 98.0679 25.17C98.4034 25.1155 98.7238 24.9914 99.0085 24.8056C99.2932 24.6199 99.5358 24.3766 99.7209 24.0915C99.9059 23.8063 100.029 23.4856 100.083 23.1499C100.122 22.8557 100.097 22.5564 100.01 22.2727C99.9224 21.9889 99.7749 21.7274 99.5773 21.5059C99.3796 21.2844 99.1365 21.1081 98.8645 20.9892C98.5925 20.8703 98.298 20.8115 98.0012 20.8169H97.9948Z" fill="#D1D3D4"/>
+<path d="M154.297 86.5025L167.618 83.1254C167.115 82.1716 159.021 57.8809 151.596 53.1569C145.222 47.8592 132.423 47.3565 117.928 46.7765C113.289 46.505 108.635 46.9594 104.136 48.1234C87.2314 52.796 75.3535 76.7708 75.3535 76.7708L92.007 80.0641C92.007 80.0641 89.3582 104.825 87.038 135.013C87.038 135.013 113.578 140.987 155.044 138.661C155.044 138.661 153.903 90.7948 154.297 86.5025Z" fill="#68E1FD"/>
+<path d="M113.76 55.1999L99.9805 137.945L127.983 139.969L134.054 50.4629L113.76 55.1999Z" fill="#231F20"/>
+<path d="M127.981 140.291L99.985 138.268C99.9401 138.264 99.8964 138.251 99.8565 138.23C99.8166 138.209 99.7814 138.18 99.753 138.145C99.6999 138.073 99.6768 137.983 99.6885 137.894L113.468 55.1483C113.477 55.0863 113.504 55.0284 113.547 54.9823C113.589 54.9363 113.645 54.9043 113.706 54.8905L134.007 50.1471C134.056 50.1346 134.107 50.1345 134.155 50.1469C134.204 50.1593 134.248 50.1838 134.285 50.218C134.323 50.2497 134.354 50.2902 134.374 50.3361C134.395 50.3821 134.404 50.4322 134.401 50.4823L128.329 139.988C128.327 140.03 128.316 140.071 128.297 140.109C128.278 140.147 128.252 140.18 128.22 140.208C128.188 140.237 128.15 140.259 128.109 140.273C128.068 140.288 128.025 140.294 127.981 140.291ZM100.359 137.681L127.685 139.66L133.704 50.9012L114.035 55.4964L100.359 137.681Z" fill="#231F20"/>
+<path d="M115.601 43.1094L113.023 53.9175C113.023 53.9175 115.234 61.2066 122.562 60.6459C124.729 60.4618 126.829 59.7972 128.707 58.7002C130.585 57.6032 132.196 56.1015 133.421 54.3041L136.573 34.3895C136.573 34.3895 131.797 30.7482 135.181 19.6437C129.008 21.1843 122.534 21.0351 116.439 19.2119C116.439 19.2119 111.238 31.006 111.199 36.613C111.161 42.22 115.601 43.1094 115.601 43.1094Z" fill="white"/>
+<path d="M121.795 60.9876C114.931 60.9876 112.772 54.0723 112.727 53.9949C112.714 53.9398 112.714 53.8825 112.727 53.8274L115.228 43.3158C114.164 42.9742 110.864 41.4919 110.897 36.5938C110.935 30.9868 115.949 19.5536 116.169 19.0703C116.199 18.9987 116.254 18.9407 116.324 18.9075C116.394 18.8742 116.474 18.8679 116.549 18.8898C122.588 20.6803 128.995 20.8293 135.11 19.3216C135.166 19.3063 135.226 19.306 135.282 19.3206C135.339 19.3353 135.391 19.3646 135.432 19.4054C135.474 19.4467 135.503 19.4987 135.517 19.5556C135.53 19.6125 135.528 19.672 135.51 19.7276C133.802 25.3411 134.221 28.9631 134.917 31.0126C135.256 32.2072 135.913 33.2874 136.818 34.1383C136.863 34.1733 136.899 34.2199 136.92 34.2731C136.942 34.3264 136.949 34.3844 136.94 34.4412L133.782 54.3558C133.778 54.3979 133.763 54.438 133.737 54.4718C132.48 56.3151 130.828 57.8558 128.902 58.9826C126.976 60.1095 124.824 60.7943 122.601 60.9876C122.323 60.9876 122.053 60.9876 121.795 60.9876ZM113.372 53.8982C113.642 54.7167 115.891 60.82 122.555 60.3431C124.659 60.1557 126.695 59.5091 128.522 58.449C130.348 57.3889 131.919 55.9411 133.125 54.2076L136.244 34.5379C135.432 33.8032 131.913 29.9169 134.723 20.1208C128.748 21.4653 122.531 21.2925 116.639 19.6181C115.879 21.3775 111.567 31.6119 111.535 36.6325C111.496 41.885 115.498 42.7744 115.666 42.8131C115.709 42.8189 115.75 42.8348 115.786 42.8594C115.822 42.884 115.851 42.9167 115.872 42.9549C115.897 42.9902 115.913 43.0303 115.921 43.0725C115.929 43.1147 115.928 43.1581 115.917 43.1998L113.372 53.8982Z" fill="#231F20"/>
+<path d="M132.513 33.3716C132.903 32.4461 133.581 31.6709 134.447 31.161C135.284 30.7311 136.188 30.4478 137.121 30.3232C137.626 30.2074 138.15 30.2074 138.655 30.3232C139.001 30.4349 139.321 30.6146 139.596 30.8517C140.299 31.3475 140.8 32.0795 141.007 32.914C141.095 33.5979 141.013 34.2929 140.769 34.9377C140.565 35.6615 140.266 36.355 139.88 37.0001C139.478 37.6334 138.955 38.1807 138.34 38.6101C137.726 39.0395 137.032 39.3425 136.299 39.5014C135.566 39.6603 134.809 39.672 134.072 39.5358C133.334 39.3996 132.632 39.1182 132.004 38.708" fill="white"/>
+<path d="M135.134 39.9195C133.971 39.9212 132.831 39.5854 131.854 38.9528C131.783 38.9056 131.734 38.8323 131.717 38.749C131.7 38.6657 131.717 38.5792 131.764 38.5081C131.786 38.4719 131.815 38.4406 131.85 38.4161C131.885 38.3915 131.924 38.3742 131.966 38.3652C132.007 38.3561 132.05 38.3556 132.092 38.3635C132.133 38.3715 132.173 38.3878 132.209 38.4114C132.8 38.7979 133.463 39.0628 134.158 39.191C134.853 39.3192 135.567 39.308 136.258 39.1581C136.948 39.0082 137.602 38.7226 138.182 38.3178C138.761 37.9131 139.255 37.3972 139.633 36.8002C140.004 36.1812 140.293 35.516 140.49 34.8217C140.714 34.2234 140.791 33.5804 140.716 32.9462C140.519 32.1913 140.062 31.5297 139.427 31.0772C139.183 30.868 138.9 30.7082 138.595 30.6067C138.139 30.5043 137.666 30.5043 137.21 30.6067C136.311 30.7269 135.439 30.9994 134.632 31.4123C133.815 31.8792 133.174 32.6016 132.808 33.4682C132.774 33.5469 132.71 33.6087 132.63 33.6401C132.55 33.6715 132.461 33.67 132.383 33.6358C132.304 33.6016 132.242 33.5376 132.211 33.4578C132.179 33.378 132.181 33.2891 132.215 33.2104C132.641 32.2171 133.378 31.3892 134.316 30.8516C135.184 30.3995 136.124 30.1029 137.094 29.9751C137.644 29.8429 138.219 29.8429 138.769 29.9751C139.155 30.0982 139.513 30.2977 139.82 30.5616C140.58 31.1082 141.116 31.912 141.328 32.8237C141.426 33.5611 141.342 34.3113 141.083 35.0086C140.879 35.7577 140.573 36.4754 140.174 37.1418C139.749 37.8104 139.196 38.3885 138.547 38.843C137.897 39.2975 137.165 39.6196 136.391 39.7906C135.978 39.8784 135.557 39.9216 135.134 39.9195Z" fill="#231F20"/>
+<path d="M114.582 48.5172C115.86 48.8765 117.2 48.9577 118.512 48.7554C119.824 48.5531 121.077 48.0719 122.187 47.3442C125.783 44.8565 125.796 43.0713 125.796 43.0713C125.796 43.0713 120.337 45.0047 115.865 43.3226L114.582 48.5172Z" fill="#231F20"/>
+<path d="M117.162 49.1933C116.255 49.2007 115.352 49.077 114.481 48.8259C114.404 48.8006 114.34 48.7476 114.301 48.6772C114.261 48.6068 114.25 48.5242 114.268 48.4457L115.557 43.2447C115.584 43.1568 115.644 43.0828 115.725 43.0384C115.766 43.0211 115.81 43.0121 115.854 43.0121C115.898 43.0121 115.942 43.0211 115.983 43.0384C120.294 44.6561 125.65 42.8 125.695 42.7806C125.745 42.7641 125.797 42.7596 125.849 42.7674C125.9 42.7753 125.949 42.7953 125.992 42.8257C126.034 42.8548 126.069 42.8944 126.091 42.9408C126.114 42.9871 126.124 43.0385 126.121 43.09C126.121 43.1673 126.063 45.0621 122.376 47.6014C120.844 48.6569 119.023 49.2129 117.162 49.1933ZM114.971 48.291C116.163 48.5798 117.401 48.6213 118.609 48.4129C119.817 48.2045 120.97 47.7506 121.996 47.0794C124.29 45.4939 125.07 44.2114 125.334 43.554C123.852 43.9858 119.74 44.9654 116.086 43.7474L114.971 48.291Z" fill="#231F20"/>
+<path d="M123.367 27.4746C123.367 27.4746 118.605 32.2245 119.288 33.3523C119.971 34.4802 122.51 34.3319 122.51 34.3319" fill="white"/>
+<path d="M122.207 34.6283C121.427 34.6283 119.629 34.5123 118.985 33.4875C118.231 32.2372 121.956 28.3703 123.116 27.2102C123.176 27.1496 123.259 27.1155 123.345 27.1155C123.43 27.1155 123.513 27.1496 123.573 27.2102C123.634 27.2709 123.668 27.3532 123.668 27.439C123.668 27.5249 123.634 27.6072 123.573 27.6678C121.086 30.1491 119.236 32.6561 119.539 33.1524C120.016 33.9387 121.833 34.016 122.491 33.9773C122.533 33.9747 122.575 33.9805 122.616 33.9943C122.656 34.0081 122.693 34.0297 122.724 34.0579C122.756 34.086 122.782 34.1201 122.8 34.1583C122.819 34.1965 122.83 34.2379 122.832 34.2803C122.836 34.3228 122.831 34.3656 122.817 34.406C122.804 34.4465 122.782 34.4839 122.754 34.5158C122.725 34.5477 122.691 34.5736 122.652 34.5918C122.614 34.61 122.572 34.6202 122.529 34.6218L122.207 34.6283Z" fill="#231F20"/>
+<path d="M128.779 28.0339C128.859 27.3194 128.511 26.6939 128.001 26.6368C127.492 26.5798 127.014 27.1128 126.934 27.8273C126.854 28.5418 127.202 29.1673 127.711 29.2244C128.221 29.2814 128.699 28.7484 128.779 28.0339Z" fill="#231F20"/>
+<path d="M120.126 26.6502C120.413 25.991 120.265 25.2907 119.795 25.0861C119.325 24.8814 118.711 25.25 118.424 25.9092C118.137 26.5684 118.285 27.2687 118.755 27.4733C119.225 27.6779 119.839 27.3094 120.126 26.6502Z" fill="#231F20"/>
+<path d="M126.964 40.1708C126.88 40.1699 126.799 40.1378 126.738 40.0805C123.877 37.335 116.143 35.6465 116.065 35.6271C116.024 35.6187 115.985 35.6022 115.95 35.5784C115.915 35.5546 115.886 35.5241 115.863 35.4886C115.84 35.4532 115.824 35.4136 115.817 35.372C115.81 35.3305 115.811 35.288 115.821 35.2469C115.829 35.2054 115.846 35.166 115.869 35.1309C115.893 35.0958 115.923 35.0658 115.959 35.0424C115.994 35.0191 116.033 35.0029 116.075 34.9949C116.117 34.9868 116.159 34.9871 116.201 34.9955C116.523 35.0664 124.186 36.7421 127.157 39.6165C127.203 39.6608 127.235 39.7178 127.248 39.7802C127.262 39.8426 127.257 39.9076 127.233 39.967C127.21 40.0264 127.169 40.0775 127.116 40.1138C127.064 40.15 127.002 40.1699 126.938 40.1708H126.964Z" fill="#231F20"/>
+<path d="M166.981 109.459C166.911 109.46 166.843 109.437 166.787 109.395L157.281 102.099C157.214 102.046 157.17 101.969 157.158 101.884C157.146 101.798 157.167 101.712 157.217 101.642C157.27 101.576 157.347 101.533 157.431 101.522C157.515 101.511 157.6 101.533 157.668 101.584L167.181 108.886C167.232 108.928 167.27 108.984 167.289 109.048C167.307 109.112 167.305 109.18 167.283 109.243C167.261 109.306 167.22 109.361 167.166 109.399C167.112 109.438 167.047 109.459 166.981 109.459Z" fill="#231F20"/>
+<path d="M140.794 29.3238H140.71C140.628 29.3012 140.559 29.2472 140.517 29.1736C140.474 29.1 140.463 29.0127 140.485 28.9307C141.445 25.3602 142.379 21.7253 143.262 18.1162L143.359 17.736C143.804 16.2186 144.05 14.6504 144.094 13.0699C144.055 11.9356 143.54 11.7809 141.915 11.7809C141.873 11.7824 141.83 11.7751 141.79 11.7596C141.75 11.7441 141.714 11.7207 141.683 11.6907C141.623 11.6308 141.589 11.55 141.587 11.4651C141.573 10.6708 141.378 9.89009 141.016 9.18292C140.654 8.47574 140.135 7.86088 139.499 7.38552C137.346 5.80653 134.194 5.45206 130.843 6.50257L130.676 6.55413C127.337 7.57242 124.456 8.44891 120.809 8.58426C120.106 8.58426 119.378 8.58426 118.675 8.58426C117.089 8.51423 115.501 8.62014 113.938 8.90006C112.963 9.14175 112.005 9.44747 111.07 9.81522C110.268 10.0557 109.515 10.4377 108.847 10.9431C108.181 11.5909 107.664 12.376 107.332 13.2439C106.955 14.0024 106.684 14.8091 106.527 15.6414C106.153 18.2193 107.816 20.4815 108.866 21.6222C109.511 22.3311 110.49 23.1238 111.444 22.8661C111.486 22.8546 111.531 22.8516 111.574 22.8573C111.618 22.8629 111.659 22.8771 111.697 22.8989C111.735 22.9208 111.769 22.9499 111.796 22.9846C111.822 23.0193 111.842 23.059 111.853 23.1013C111.865 23.1436 111.868 23.1878 111.862 23.2312C111.857 23.2747 111.842 23.3166 111.821 23.3546C111.799 23.3926 111.77 23.426 111.735 23.4527C111.7 23.4795 111.66 23.4991 111.618 23.5105C110.613 23.7877 109.498 23.2914 108.396 22.0798C107.294 20.8681 105.483 18.3869 105.902 15.5705C106.065 14.6751 106.353 13.8072 106.759 12.9925C107.138 12.0361 107.718 11.1723 108.46 10.4597C109.186 9.90635 110.005 9.48529 110.877 9.21585C111.838 8.83594 112.824 8.52368 113.829 8.28135C115.439 7.9865 117.078 7.87408 118.714 7.94622C119.41 7.94622 120.125 7.94622 120.821 7.94622C124.379 7.81088 127.228 6.94726 130.521 5.94187L130.688 5.89031C134.233 4.81402 137.591 5.17493 139.911 6.86993C140.583 7.3744 141.139 8.01661 141.543 8.75353C141.946 9.49046 142.187 10.3051 142.251 11.1429C143.411 11.1429 144.712 11.2718 144.77 13.0763C144.731 14.7156 144.477 16.3427 144.016 17.9164L143.92 18.2967C143.037 21.9058 142.096 25.5471 141.136 29.124C141.109 29.1905 141.061 29.2463 140.999 29.2825C140.937 29.3187 140.865 29.3332 140.794 29.3238Z" fill="#231F20"/>
+<path d="M130.186 56.1605C130.186 56.1605 126.545 52.6674 125.578 48.3945C124.612 44.1215 124.985 43.1999 124.322 43.0517C123.658 42.9034 122.536 43.3546 121.705 44.8111C120.874 46.2677 121.099 51.3913 122.453 53.4537C123.806 55.516 130.186 56.1605 130.186 56.1605Z" fill="white"/>
+<path d="M130.186 56.4762H130.153C129.889 56.444 123.605 55.7866 122.181 53.6212C120.757 51.4557 120.512 46.2289 121.427 44.6435C122.342 43.058 123.554 42.5489 124.385 42.71C124.985 42.8389 125.03 43.3545 125.204 44.4437C125.313 45.2428 125.474 46.4545 125.893 48.3106C126.828 52.4353 130.372 55.8833 130.405 55.9155C130.451 55.9632 130.482 56.0234 130.495 56.0886C130.508 56.1539 130.501 56.2214 130.476 56.2829C130.45 56.3391 130.41 56.387 130.358 56.4212C130.307 56.4553 130.247 56.4744 130.186 56.4762ZM124.076 43.3481C123.554 43.3481 122.677 43.7476 121.981 44.9593C121.285 46.1709 121.401 51.2623 122.722 53.2667C123.612 54.6266 127.234 55.4128 129.328 55.7222C128.22 54.4977 126.003 51.7199 125.268 48.4588C124.843 46.5898 124.675 45.3589 124.566 44.5468C124.437 43.6123 124.392 43.3932 124.25 43.361C124.192 43.3519 124.134 43.3497 124.076 43.3545V43.3481Z" fill="#231F20"/>
+<path d="M76.3654 77.2222C76.3654 77.2222 60.1759 117.058 66.247 129.174C72.318 141.29 132.03 146.704 132.03 146.704C132.03 146.704 139.622 149.927 141.98 150.416C144.339 150.906 153.285 151.428 153.285 151.428C153.285 151.428 149.908 152.073 151.087 153.11C152.266 154.148 158.821 154.122 159.523 151.763C160.226 149.405 158.344 139.956 156.301 138.435C154.258 136.914 131.334 131.346 129.651 131.185C127.969 131.024 90.1832 117.915 90.1832 117.915L95.0748 80.9215" fill="white"/>
+<path d="M154.316 154.09C152.814 154.09 151.429 153.839 150.881 153.368C150.746 153.277 150.641 153.147 150.58 152.995C150.519 152.843 150.505 152.677 150.539 152.517C150.633 152.315 150.767 152.134 150.933 151.985C151.099 151.837 151.294 151.724 151.506 151.654C148.767 151.48 143.65 151.112 141.916 150.739C139.622 150.249 132.648 147.323 131.952 147.033C128.872 146.749 72.0152 141.413 65.957 129.316C63.3791 124.205 64.3329 113.848 68.7219 98.5546C71.9443 87.1988 76.0303 77.2028 76.069 77.0997C76.1015 77.0202 76.1642 76.9569 76.2434 76.9237C76.3225 76.8904 76.4117 76.89 76.4911 76.9225C76.5706 76.955 76.6339 77.0177 76.6672 77.0968C76.7004 77.176 76.7009 77.2651 76.6684 77.3446C76.5073 77.7442 60.6014 117.154 66.5371 129.032C72.4728 140.91 131.463 146.343 132.062 146.395C132.092 146.388 132.122 146.388 132.152 146.395C132.229 146.427 139.744 149.617 142.051 150.088C144.359 150.558 153.214 151.087 153.304 151.093C153.382 151.098 153.455 151.13 153.511 151.184C153.567 151.239 153.601 151.312 153.607 151.39C153.611 151.468 153.587 151.544 153.54 151.607C153.493 151.669 153.425 151.713 153.349 151.731C152.376 151.924 151.242 152.376 151.164 152.659C151.164 152.704 151.222 152.788 151.3 152.853C151.944 153.407 155.038 153.716 157.345 153.027C158.08 152.801 159.008 152.382 159.214 151.66C159.897 149.276 157.925 140.059 156.127 138.68C154.329 137.301 131.682 131.694 129.639 131.494C127.931 131.32 91.614 118.74 90.093 118.205C90.0234 118.182 89.964 118.135 89.9252 118.072C89.8864 118.01 89.8705 117.936 89.8803 117.863L94.772 80.8635C94.7775 80.8212 94.7913 80.7804 94.8125 80.7434C94.8338 80.7064 94.8622 80.674 94.896 80.6479C94.9298 80.6219 94.9684 80.6028 95.0096 80.5917C95.0508 80.5805 95.0938 80.5777 95.1361 80.5832C95.1784 80.5887 95.2192 80.6025 95.2562 80.6237C95.2932 80.645 95.3257 80.6734 95.3517 80.7072C95.3777 80.741 95.3968 80.7796 95.408 80.8208C95.4191 80.862 95.422 80.905 95.4165 80.9473L90.557 117.683C103.685 122.233 128.414 130.721 129.71 130.85C131.005 130.979 154.31 136.508 156.52 138.165C158.731 139.821 160.529 149.424 159.839 151.841C159.614 152.633 158.814 153.259 157.538 153.645C156.49 153.943 155.406 154.093 154.316 154.09Z" fill="#231F20"/>
+<path d="M144.848 88.8616C144.848 88.8616 133.975 61.0199 130.92 56.4376C127.865 51.8553 114.46 40.667 112.791 41.782C111.122 42.8969 111.611 44.1408 112.307 45.0044C113.004 45.868 116.89 48.5426 116.89 48.5426C116.89 48.5426 112.514 46.5318 112.378 49.1871C112.243 51.8424 115.601 53.4278 115.601 53.4278C115.601 53.4278 111.921 50.7146 111.779 53.6341C111.761 54.4855 111.996 55.3231 112.455 56.0404C112.914 56.7577 113.576 57.3222 114.357 57.6621C114.357 57.6621 110.438 54.3366 110.812 57.8039C111.457 63.5011 122.903 70.3069 122.903 70.3069L127.762 117.657C127.762 117.657 129.502 145.119 147.026 144.287C169.512 143.218 176.028 110.774 164.788 83.3384" fill="white"/>
+<path d="M146.215 144.584C129.303 144.584 127.421 117.902 127.402 117.631L122.562 70.4551C121.183 69.6172 111.064 63.3013 110.459 57.7909C110.355 56.85 110.549 56.2442 111.032 55.9864C111.326 55.8462 111.661 55.8186 111.973 55.909C111.567 55.2013 111.377 54.3904 111.425 53.576C111.402 53.2714 111.466 52.9665 111.608 52.6963C111.751 52.4261 111.967 52.2016 112.231 52.0485C112.517 51.9249 112.832 51.8847 113.14 51.9325C112.421 51.1786 112.029 50.1707 112.05 49.129C112.049 48.8538 112.116 48.5826 112.247 48.3404C112.377 48.0982 112.567 47.8929 112.798 47.7434C113.489 47.4273 114.27 47.3656 115.002 47.5694C113.961 46.8514 112.976 46.0542 112.057 45.1848C111.789 44.9356 111.585 44.6247 111.465 44.2791C111.344 43.9335 111.309 43.5636 111.364 43.2017C111.419 42.8397 111.561 42.4965 111.778 42.2019C111.995 41.9073 112.281 41.6702 112.611 41.5112C113.836 40.6927 118.734 44.4243 121.537 46.7251C125.153 49.6833 129.535 53.7822 131.205 56.257C134.24 60.82 144.739 87.6048 145.164 88.7456C145.193 88.8251 145.19 88.9129 145.155 88.9901C145.12 89.0674 145.056 89.1277 144.977 89.158C144.938 89.1745 144.897 89.1829 144.855 89.1827C144.812 89.1825 144.771 89.1737 144.732 89.1568C144.693 89.1399 144.659 89.1153 144.63 89.0845C144.601 89.0536 144.579 89.0173 144.565 88.9776C144.455 88.7004 133.666 61.1229 130.663 56.618C129.265 54.5169 125.443 50.7402 121.144 47.2214C115.943 42.9613 113.41 41.7819 112.985 42.0655C112.743 42.194 112.531 42.3725 112.363 42.5892C112.195 42.8059 112.076 43.0557 112.012 43.3222C112.001 43.5909 112.044 43.859 112.139 44.1104C112.234 44.3619 112.38 44.5914 112.566 44.7852C113.114 45.4297 116.014 47.5178 117.077 48.2654C117.143 48.3123 117.188 48.3819 117.205 48.4606C117.222 48.5393 117.208 48.6214 117.168 48.6908C117.129 48.7618 117.065 48.8154 116.988 48.8406C116.912 48.8657 116.828 48.8606 116.755 48.8261C116.046 48.4974 114.016 47.7756 113.133 48.3105C112.992 48.4046 112.878 48.5335 112.801 48.6848C112.724 48.8361 112.688 49.0047 112.695 49.1741C112.618 50.6694 113.791 51.8165 114.699 52.4804C115.07 52.6679 115.425 52.8833 115.763 53.1248C115.824 53.1735 115.865 53.2427 115.879 53.3196C115.893 53.3964 115.878 53.4757 115.838 53.5427C115.798 53.6096 115.735 53.6597 115.661 53.6837C115.586 53.7076 115.506 53.7037 115.434 53.6727C115.054 53.4872 114.69 53.2716 114.345 53.0282C113.7 52.6866 112.933 52.4546 112.508 52.6544C112.244 52.7768 112.096 53.1055 112.07 53.6275C112.039 54.1354 112.116 54.644 112.295 55.1203C112.473 55.5966 112.75 56.03 113.107 56.3924C113.609 56.6851 114.086 57.0193 114.532 57.3913C114.59 57.4413 114.628 57.5102 114.64 57.5857C114.652 57.6613 114.636 57.7386 114.596 57.8038C114.556 57.8695 114.494 57.9186 114.42 57.9423C114.347 57.9659 114.268 57.9625 114.197 57.9327C113.665 57.6914 113.181 57.3575 112.766 56.9466C112.179 56.618 111.625 56.4182 111.335 56.5728C111.045 56.7275 111.026 57.1078 111.097 57.7394C111.696 63.211 122.916 69.933 123.026 69.9846C123.07 70.0102 123.107 70.0456 123.135 70.0881C123.163 70.1306 123.181 70.179 123.187 70.2295L128.047 117.58C128.047 117.863 129.941 144.745 146.969 143.92C154.026 143.585 159.891 140.053 163.944 133.686C171.627 121.627 171.833 101.423 164.454 83.4157C164.423 83.3368 164.424 83.2494 164.457 83.1714C164.489 83.0934 164.55 83.0308 164.628 82.9967C164.707 82.9661 164.796 82.967 164.875 82.9994C164.954 83.0317 165.018 83.093 165.053 83.1707C172.503 101.365 172.278 121.801 164.486 134.034C160.322 140.575 154.271 144.216 147.001 144.564L146.215 144.584Z" fill="#231F20"/>
+<path d="M144.287 87.792C144.287 87.792 153.059 111.638 155.308 119.501L144.287 87.792Z" fill="white"/>
+<path d="M155.309 119.823C155.239 119.824 155.171 119.802 155.115 119.76C155.059 119.718 155.018 119.658 155 119.591C152.776 111.825 144.076 88.1398 143.985 87.9013C143.97 87.8612 143.962 87.8184 143.963 87.7753C143.964 87.7322 143.974 87.6898 143.991 87.6506C144.009 87.6113 144.035 87.576 144.066 87.5467C144.098 87.5174 144.135 87.4948 144.176 87.4801C144.216 87.4655 144.259 87.4591 144.302 87.4614C144.345 87.4637 144.387 87.4745 144.426 87.4934C144.465 87.5122 144.499 87.5386 144.528 87.5711C144.556 87.6035 144.578 87.6413 144.591 87.6822C144.675 87.9206 153.388 111.625 155.618 119.417C155.641 119.499 155.63 119.586 155.589 119.661C155.548 119.735 155.48 119.791 155.399 119.816L155.309 119.823Z" fill="#231F20"/>
+<path d="M96.4999 64.8545C96.4999 65.5312 95.1465 78.1244 95.1465 78.1244L96.4999 64.8545Z" fill="#231F20"/>
+<path d="M95.1458 78.4402H95.1135C95.0291 78.4305 94.9519 78.3878 94.8987 78.3214C94.8456 78.255 94.8209 78.1703 94.83 78.0858C95.2038 74.5926 96.1769 65.3958 96.1769 64.8545C96.1769 64.769 96.2109 64.687 96.2713 64.6266C96.3317 64.5662 96.4137 64.5322 96.4992 64.5322C96.5846 64.5322 96.6666 64.5662 96.727 64.6266C96.7875 64.687 96.8214 64.769 96.8214 64.8545C96.8214 65.5376 95.5324 77.6411 95.4744 78.1566C95.4648 78.2364 95.4258 78.3096 95.365 78.3621C95.3042 78.4145 95.226 78.4424 95.1458 78.4402Z" fill="#231F20"/>
+<path d="M38.5197 40.9701C38.1459 36.1558 40.0406 32.9914 45.3834 29.1631C50.1977 25.7731 51.5705 24.0072 51.3643 21.3197C51.1129 18.0973 48.1998 16.325 43.856 16.6601C38.4874 17.079 35.4455 20.8042 35.5292 26.9719L23.7803 27.0105C23.2647 15.2229 30.9534 6.92194 43.1148 5.98099C53.9293 5.14316 62.327 11.0789 63.0166 19.9985C63.4419 25.4444 61.0831 29.5176 55.0443 33.8743C50.1655 37.5092 49.0892 38.94 49.3019 41.7048L49.5146 44.4697L38.8548 45.3139L38.5197 40.9701ZM38.5197 50.8178L51.1 49.8382L52.0474 62.0834L39.4348 63.0502L38.5197 50.8178Z" fill="black"/>
+<path d="M104.496 28.4219C106.346 28.7957 106.546 25.6313 104.593 25.9858C104.304 26.0244 104.038 26.1636 103.842 26.379C103.646 26.5944 103.532 26.8721 103.521 27.1632C103.509 27.4543 103.6 27.7402 103.779 27.9704C103.957 28.2007 104.212 28.3606 104.496 28.4219Z" fill="white"/>
+<path d="M104.793 28.7637C104.671 28.7632 104.55 28.7503 104.432 28.725C104.079 28.6691 103.759 28.4874 103.531 28.2137C103.302 27.9401 103.18 27.5928 103.188 27.2363C103.19 26.8566 103.327 26.4899 103.573 26.201C103.82 25.9121 104.16 25.7196 104.535 25.6573C104.814 25.5857 105.108 25.6017 105.378 25.7032C105.648 25.8047 105.88 25.9866 106.043 26.2244C106.223 26.5168 106.315 26.8554 106.305 27.1988C106.296 27.5423 106.187 27.8756 105.991 28.1579C105.858 28.3509 105.678 28.5075 105.469 28.6133C105.26 28.7191 105.027 28.7708 104.793 28.7637ZM104.593 28.1192C104.759 28.1675 104.935 28.1616 105.098 28.1025C105.26 28.0434 105.399 27.9341 105.495 27.7905C105.61 27.6142 105.674 27.4099 105.68 27.1998C105.687 26.9896 105.637 26.7816 105.534 26.5982C105.439 26.4684 105.306 26.3714 105.154 26.3206C105.001 26.2697 104.837 26.2677 104.683 26.3147C104.457 26.3536 104.252 26.4702 104.102 26.6443C103.953 26.8184 103.869 27.0391 103.865 27.2685C103.858 27.4755 103.929 27.6775 104.064 27.8349C104.199 27.9922 104.387 28.0936 104.593 28.1192Z" fill="#D1D3D4"/>
+<path d="M41.3824 110.613C41.4644 109.525 41.2029 108.438 40.6348 107.507C40.0775 106.876 39.5526 106.218 39.0622 105.535C38.4177 104.246 38.8624 102.783 38.7077 101.397C38.5527 100.203 37.9686 99.1054 37.0643 98.3099C36.2458 97.5752 35.1953 97.0725 34.409 96.3055C33.1201 95.0552 32.7592 93.2894 32.0309 91.7233C30.924 89.4379 29.1181 87.5643 26.875 86.374C28.2735 88.8682 25.0898 92.0391 26.5334 94.5139C26.991 95.2937 27.8611 95.8673 28.1962 96.6987C29.0082 98.703 26.3143 100.875 27.1715 102.866C27.6033 103.859 28.8085 104.433 29.3627 105.373C30.1168 106.662 29.5238 108.183 29.5883 109.621C29.6721 111.599 31.0319 113.365 32.6431 114.738C33.6485 115.589 34.7635 116.33 35.8656 117.097C37.1545 118.018 37.7152 118.991 38.856 117.509C40.4122 115.539 41.2974 113.122 41.3824 110.613Z" fill="#D1D3D4"/>
+<path d="M44.282 111.548C43.8631 110.014 43.5666 108.357 44.282 106.914C45.0812 105.277 47.0597 104.123 47.2917 102.357C47.4464 101.197 46.7826 100.024 47.0404 98.8835C47.2982 97.7427 48.3294 96.95 49.2252 96.1186C51.1858 94.2529 52.3865 91.7276 52.5959 89.0293C53.9204 90.4105 55.0091 91.9999 55.8183 93.734C56.2023 94.5852 56.3607 95.5208 56.2783 96.4509C56.1959 97.381 55.8754 98.2742 55.3478 99.0446C55.0207 99.3957 54.7471 99.7931 54.5358 100.224C54.1426 101.352 55.2318 102.402 55.8247 103.446C56.1573 104.05 56.2979 104.74 56.2277 105.425C56.1574 106.11 55.8797 106.758 55.4316 107.281C54.2909 108.57 52.0932 109.034 51.5647 110.568C51.4238 111.139 51.3566 111.726 51.3649 112.315C51.1979 113.381 50.712 114.371 49.9711 115.156C49.2302 115.94 48.2692 116.482 47.2144 116.71C45.861 116.994 45.9254 116.523 45.6483 115.518C45.2358 114.203 44.6558 112.895 44.282 111.548Z" fill="#D1D3D4"/>
+<path d="M39.9891 100.54C39.0288 97.6007 38.6421 94.5265 37.6367 91.6005C36.7685 89.2996 35.719 87.0713 34.498 84.9365L38.6099 86.4704C39.8988 86.9666 41.3554 87.5467 41.9805 88.6874C43.0633 90.6789 41.1169 93.231 42.2512 95.1967C42.7477 95.8412 43.2928 96.4466 43.8818 97.0077C45.0934 98.5158 44.9065 100.591 44.2427 102.344C43.9591 103.098 42.7088 107.004 41.5938 105.921C41.1491 105.483 41.1105 103.865 40.9493 103.272C40.64 102.357 40.2855 101.455 39.9891 100.54Z" fill="#D1D3D4"/>
+<path d="M39.3963 127.737C38.6745 122.42 38.0494 117.805 38.0429 117.728L37.3984 117.812C37.3984 117.889 38.0429 122.452 38.739 127.737H39.3963Z" fill="#D1D3D4"/>
+<path d="M44.9531 127.737C45.836 120.867 46.7512 115.769 47.2668 115.202L46.7899 114.77C46.0745 115.556 45.1078 121.518 44.3086 127.737H44.9531Z" fill="#D1D3D4"/>
+<path d="M44.1658 127.737C43.4633 115.318 42.2324 102.995 42.2324 102.834L41.5879 102.898C41.5879 103.06 42.8769 115.35 43.5213 127.737H44.1658Z" fill="#D1D3D4"/>
+<path d="M33.0039 120.357H51.23L49.941 134.059C49.7219 136.431 47.0666 138.274 43.8699 138.274H40.3446C37.1222 138.274 34.4927 136.431 34.2671 134.059L33.0039 120.357Z" fill="#D1D3D4"/>
+</svg>
diff --git a/src/search-modal/index.scss b/src/search-modal/index.scss
new file mode 100644
index 0000000000..1daa8a4871
--- /dev/null
+++ b/src/search-modal/index.scss
@@ -0,0 +1 @@
+@import "search-modal/SearchModal";
diff --git a/src/search-modal/index.ts b/src/search-modal/index.ts
new file mode 100644
index 0000000000..31ea5aaaab
--- /dev/null
+++ b/src/search-modal/index.ts
@@ -0,0 +1 @@
+export { default as SearchModal } from './SearchModal';
diff --git a/src/search-modal/messages.ts b/src/search-modal/messages.ts
new file mode 100644
index 0000000000..d354ca8088
--- /dev/null
+++ b/src/search-modal/messages.ts
@@ -0,0 +1,66 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  searchAllCourses: {
+    id: 'course-authoring.course-search.searchAllCourses',
+    defaultMessage: 'All courses',
+    description: 'Option to get search results from all courses.',
+  },
+  searchThisCourse: {
+    id: 'course-authoring.course-search.searchThisCourse',
+    defaultMessage: 'This course',
+    description: 'Option to limit search results to the current course only.',
+  },
+  title: {
+    id: 'course-authoring.course-search.title',
+    defaultMessage: 'Search',
+    description: 'Title for the course search dialog',
+  },
+  showMore: {
+    id: 'course-authoring.course-search.showMore',
+    defaultMessage: 'Show more',
+    description: 'Show more tags / filter options',
+  },
+  showMoreResults: {
+    id: 'course-authoring.course-search.showMoreResults',
+    defaultMessage: 'Show more results',
+    description: 'Show more results - a button to add to the list of results by loading more from the server',
+  },
+  loadingMoreResults: {
+    id: 'course-authoring.course-search.loadingMoreResults',
+    defaultMessage: 'Loading more results',
+    description: 'Loading more results - the button displays this message while more results are loading',
+  },
+  emptySearchTitle: {
+    id: 'course-authoring.course-search.emptySearchTitle',
+    defaultMessage: 'Start searching to find content',
+    description: 'Title shown when the user has not yet entered a keyword',
+  },
+  emptySearchSubtitle: {
+    id: 'course-authoring.course-search.emptySearchSubtitle',
+    defaultMessage: 'Find sections, subsections, units and components',
+    description: 'Subtitle shown when the user has not yet entered a keyword',
+  },
+  noResultsTitle: {
+    id: 'course-authoring.course-search.noResultsTitle',
+    defaultMessage: 'We didn\'t find anything matching your search',
+    description: 'Title shown when the search returned no results',
+  },
+  noResultsSubtitle: {
+    id: 'course-authoring.course-search.noResultsSubtitle',
+    defaultMessage: 'Please try a different search term or filter',
+    description: 'Subtitle shown when the search returned no results',
+  },
+  openInNewWindow: {
+    id: 'course-authoring.course-search.openInNewWindow',
+    defaultMessage: 'Open in new window',
+    description: 'Alt text for the button that opens the search result in a new window',
+  },
+  searchError: {
+    id: 'course-authoring.course-search.searchError',
+    defaultMessage: 'An error occurred. Unable to load search results.',
+    description: 'Error message shown when search is not working.',
+  },
+});
+
+export default messages;
diff --git a/src/selectors/VideoSelectorContainer.jsx b/src/selectors/VideoSelectorContainer.jsx
new file mode 100644
index 0000000000..ea83315d5a
--- /dev/null
+++ b/src/selectors/VideoSelectorContainer.jsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useParams } from 'react-router-dom';
+import { getConfig } from '@edx/frontend-platform';
+import VideoSelectorPage from '../editors/VideoSelectorPage';
+
+const VideoSelectorContainer = ({
+  courseId,
+}) => {
+  const { blockId } = useParams();
+  return (
+    <div className="selector-page">
+      <VideoSelectorPage
+        blockId={blockId}
+        courseId={courseId}
+        studioEndpointUrl={getConfig().STUDIO_BASE_URL}
+        lmsEndpointUrl={getConfig().LMS_BASE_URL}
+      />
+    </div>
+  );
+};
+
+VideoSelectorContainer.propTypes = {
+  courseId: PropTypes.string.isRequired,
+};
+
+export default VideoSelectorContainer;
diff --git a/src/selectors/VideoSelectorContainer.test.jsx b/src/selectors/VideoSelectorContainer.test.jsx
new file mode 100644
index 0000000000..f32053f40f
--- /dev/null
+++ b/src/selectors/VideoSelectorContainer.test.jsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+import VideoSelectorContainer from './VideoSelectorContainer';
+
+jest.mock('../editors/VideoSelectorPage', () => ({
+  default: function VideoSelectorPage() { return 'HeaderTitle'; },
+  __esModule: true, // Required to mock a default export
+}));
+
+jest.mock('react-router', () => ({
+  ...jest.requireActual('react-router'), // use actual for all non-hook parts
+  useParams: () => ({
+    blockId: 'company-id1',
+    blockType: 'html',
+  }),
+}));
+
+const props = { courseId: 'cOuRsEId' };
+
+describe('Video Selector Container', () => {
+  describe('snapshots', () => {
+    test('rendering correctly with expected Input', () => {
+      expect(shallow(<VideoSelectorContainer {...props} />).snapshot).toMatchSnapshot();
+    });
+  });
+});
diff --git a/src/selectors/__snapshots__/VideoSelectorContainer.test.jsx.snap b/src/selectors/__snapshots__/VideoSelectorContainer.test.jsx.snap
new file mode 100644
index 0000000000..a05e8349db
--- /dev/null
+++ b/src/selectors/__snapshots__/VideoSelectorContainer.test.jsx.snap
@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Video Selector Container snapshots rendering correctly with expected Input 1`] = `
+<div
+  className="selector-page"
+>
+  <VideoSelectorPage
+    blockId="company-id1"
+    courseId="cOuRsEId"
+    lmsEndpointUrl="http://localhost:18000"
+    studioEndpointUrl="http://localhost:18010"
+  />
+</div>
+`;
diff --git a/src/setupTest.js b/src/setupTest.js
index 5bffda04cd..4cc847c713 100755
--- a/src/setupTest.js
+++ b/src/setupTest.js
@@ -1,11 +1,23 @@
-import 'core-js/stable';
-import 'regenerator-runtime/runtime';
 import '@testing-library/jest-dom';
 import '@testing-library/jest-dom/extend-expect';
-import ReactDOM from 'react-dom';
 
-// Modal creates a portal.  Overriding ReactDOM.createPortal allows portals to be tested in jest.
-ReactDOM.createPortal = node => node;
+import { mergeConfig } from '@edx/frontend-platform';
+
+/* need to mock window for tinymce on import, as it is JSDOM incompatible */
+
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation(query => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // Deprecated
+    removeListener: jest.fn(), // Deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+});
 
 // Mock Intersection Observer which is unavailable in the context of a test.
 global.IntersectionObserver = jest.fn(function mockIntersectionObserver() {
@@ -18,3 +30,38 @@ global.IntersectionObserver = jest.fn(function mockIntersectionObserver() {
 window.getComputedStyle = jest.fn(() => ({
   getPropertyValue: jest.fn(),
 }));
+
+// Ensure app-specific configs are loaded during tests since
+// initialize() is not called.
+mergeConfig({
+  SUPPORT_URL: process.env.SUPPORT_URL || null,
+  SUPPORT_EMAIL: process.env.SUPPORT_EMAIL || null,
+  LEARNING_BASE_URL: process.env.LEARNING_BASE_URL,
+  EXAMS_BASE_URL: process.env.EXAMS_BASE_URL || null,
+  CALCULATOR_HELP_URL: process.env.CALCULATOR_HELP_URL || null,
+  ENABLE_PROGRESS_GRAPH_SETTINGS: process.env.ENABLE_PROGRESS_GRAPH_SETTINGS || 'false',
+  ENABLE_TEAM_TYPE_SETTING: process.env.ENABLE_TEAM_TYPE_SETTING === 'true',
+  ENABLE_CHECKLIST_QUALITY: process.env.ENABLE_CHECKLIST_QUALITY || 'true',
+  STUDIO_BASE_URL: process.env.STUDIO_BASE_URL || null,
+  LMS_BASE_URL: process.env.LMS_BASE_URL || null,
+  LIBRARY_SUPPORTED_BLOCKS: (process.env.LIBRARY_SUPPORTED_BLOCKS || 'problem,video,html').split(','),
+}, 'CourseAuthoringConfig');
+
+class ResizeObserver {
+  observe() {
+    // do nothing
+  }
+
+  unobserve() {
+    // do nothing
+  }
+
+  disconnect() {
+    // do nothing
+  }
+}
+
+window.ResizeObserver = ResizeObserver;
+
+// Mock the plugins repo so jest will stop complaining about ES6 syntax
+jest.mock('frontend-components-tinymce-advanced-plugins', () => {});
diff --git a/src/store.js b/src/store.js
index e023afd319..bf761aadf7 100644
--- a/src/store.js
+++ b/src/store.js
@@ -1,17 +1,62 @@
 import { configureStore } from '@reduxjs/toolkit';
 
+// FIXME: because the 'live' plugin is using Redux, we have to hard-code a reference to it here.
+// If this app + the plugin were using React-query, there'd be no issues.
+import { reducer as liveReducer } from '@openedx-plugins/course-app-live/data/slice';
+
 import { reducer as modelsReducer } from './generic/model-store';
 import { reducer as courseDetailReducer } from './data/slice';
-import { reducer as discussionsReducer } from './pages-and-resources/discussions';
+import { reducer as discussionsReducer } from './pages-and-resources/discussions/data/slice';
 import { reducer as pagesAndResourcesReducer } from './pages-and-resources/data/slice';
+import { reducer as customPagesReducer } from './custom-pages/data/slice';
+import { reducer as advancedSettingsReducer } from './advanced-settings/data/slice';
+import { reducer as studioHomeReducer } from './studio-home/data/slice';
+import { reducer as scheduleAndDetailsReducer } from './schedule-and-details/data/slice';
+import { reducer as filesReducer } from './files-and-videos/files-page/data/slice';
+import { reducer as courseTeamReducer } from './course-team/data/slice';
+import { reducer as CourseUpdatesReducer } from './course-updates/data/slice';
+import { reducer as processingNotificationReducer } from './generic/processing-notification/data/slice';
+import { reducer as helpUrlsReducer } from './help-urls/data/slice';
+import { reducer as courseExportReducer } from './export-page/data/slice';
+import { reducer as genericReducer } from './generic/data/slice';
+import { reducer as courseImportReducer } from './import-page/data/slice';
+import { reducer as videosReducer } from './files-and-videos/videos-page/data/slice';
+import { reducer as courseOutlineReducer } from './course-outline/data/slice';
+import { reducer as courseUnitReducer } from './course-unit/data/slice';
+import { reducer as courseChecklistReducer } from './course-checklist/data/slice';
+import { reducer as accessibilityPageReducer } from './accessibility-page/data/slice';
+import { reducer as textbooksReducer } from './textbooks/data/slice';
+import { reducer as certificatesReducer } from './certificates/data/slice';
+import { reducer as groupConfigurationsReducer } from './group-configurations/data/slice';
 
 export default function initializeStore(preloadedState = undefined) {
   return configureStore({
     reducer: {
       courseDetail: courseDetailReducer,
+      customPages: customPagesReducer,
       discussions: discussionsReducer,
+      assets: filesReducer,
       pagesAndResources: pagesAndResourcesReducer,
+      scheduleAndDetails: scheduleAndDetailsReducer,
+      advancedSettings: advancedSettingsReducer,
+      studioHome: studioHomeReducer,
       models: modelsReducer,
+      live: liveReducer,
+      courseTeam: courseTeamReducer,
+      courseUpdates: CourseUpdatesReducer,
+      processingNotification: processingNotificationReducer,
+      helpUrls: helpUrlsReducer,
+      courseExport: courseExportReducer,
+      generic: genericReducer,
+      courseImport: courseImportReducer,
+      videos: videosReducer,
+      courseOutline: courseOutlineReducer,
+      courseUnit: courseUnitReducer,
+      courseChecklist: courseChecklistReducer,
+      accessibilityPage: accessibilityPageReducer,
+      certificates: certificatesReducer,
+      groupConfigurations: groupConfigurationsReducer,
+      textbooks: textbooksReducer,
     },
     preloadedState,
   });
diff --git a/src/studio-header/Avatar.jsx b/src/studio-header/Avatar.jsx
deleted file mode 100644
index 1fbe193ca7..0000000000
--- a/src/studio-header/Avatar.jsx
+++ /dev/null
@@ -1,43 +0,0 @@
-// This file was copied from edx/frontend-component-header-edx.
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import { AvatarIcon } from './Icons';
-
-function Avatar({
-  size,
-  src,
-  alt,
-  className,
-}) {
-  const avatar = src ? (
-    <img className="d-block w-100 h-100" src={src} alt={alt} />
-  ) : (
-    <AvatarIcon className="text-muted" style={{ width: size, height: size }} role="img" aria-hidden focusable="false" />
-  );
-
-  return (
-    <span
-      style={{ height: size, width: size }}
-      className={`avatar overflow-hidden d-inline-flex rounded-circle ${className}`}
-    >
-      {avatar}
-    </span>
-  );
-}
-
-Avatar.propTypes = {
-  src: PropTypes.string,
-  size: PropTypes.string,
-  alt: PropTypes.string,
-  className: PropTypes.string,
-};
-
-Avatar.defaultProps = {
-  src: null,
-  size: '2rem',
-  alt: null,
-  className: null,
-};
-
-export default Avatar;
diff --git a/src/studio-header/DesktopHeader.jsx b/src/studio-header/DesktopHeader.jsx
deleted file mode 100644
index ec7b9fbcf2..0000000000
--- a/src/studio-header/DesktopHeader.jsx
+++ /dev/null
@@ -1,154 +0,0 @@
-// This file was copied from edx/frontend-component-header-edx.
-import React from 'react';
-import PropTypes from 'prop-types';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-
-// Local Components
-import { Menu, MenuTrigger, MenuContent } from './Menu';
-import Avatar from './Avatar';
-import { LinkedLogo, Logo } from './Logo';
-
-// i18n
-import messages from './Header.messages';
-
-// Assets
-import { CaretIcon } from './Icons';
-
-class DesktopHeader extends React.Component {
-  constructor(props) { // eslint-disable-line no-useless-constructor
-    super(props);
-  }
-
-  renderMainMenu() {
-    const { mainMenu } = this.props;
-
-    // Nodes are accepted as a prop
-    if (!Array.isArray(mainMenu)) {
-      return mainMenu;
-    }
-
-    return mainMenu.map((menuItem) => {
-      const {
-        type,
-        href,
-        content,
-        submenuContent,
-      } = menuItem;
-
-      if (type === 'item') {
-        return (
-          <a key={`${type}-${content}`} className="nav-link" href={href}>{content}</a>
-        );
-      }
-
-      return (
-        <Menu key={`${type}-${content}`} tag="div" className="nav-item" respondToPointerEvents>
-          <MenuTrigger tag="a" className="nav-link d-inline-flex align-items-center" href={href}>
-            {content} <CaretIcon role="img" aria-hidden focusable="false" />
-          </MenuTrigger>
-          <MenuContent className="pin-left pin-right shadow py-2">
-            {submenuContent}
-          </MenuContent>
-        </Menu>
-      );
-    });
-  }
-
-  renderUserMenu() {
-    const {
-      userMenu,
-      avatar,
-      username,
-      intl,
-    } = this.props;
-
-    return (
-      <Menu transitionClassName="menu-dropdown" transitionTimeout={250}>
-        <MenuTrigger
-          tag="button"
-          aria-label={intl.formatMessage(messages['header.label.account.menu.for'], { username })}
-          className="btn btn-outline-primary d-inline-flex align-items-center pl-2 pr-3"
-        >
-          <Avatar size="1.5em" src={avatar} alt="" className="mr-2" />
-          {username} <CaretIcon role="img" aria-hidden focusable="false" />
-        </MenuTrigger>
-        <MenuContent className="mb-0 dropdown-menu show dropdown-menu-right pin-right shadow py-2">
-          {userMenu.map(({ type, href, content }) => (
-            <a className={`dropdown-${type}`} key={`${type}-${content}`} href={href}>{content}</a>
-          ))}
-        </MenuContent>
-      </Menu>
-    );
-  }
-
-  render() {
-    const {
-      logo,
-      logoAltText,
-      logoDestination,
-      intl,
-    } = this.props;
-    const logoProps = { src: logo, alt: logoAltText, href: logoDestination };
-
-    return (
-      <header className="site-header-desktop">
-        <div className="container-fluid">
-          <div className="nav-container position-relative d-flex align-items-center">
-            {logoDestination === null ? <Logo className="logo" src={logo} alt={logoAltText} /> : <LinkedLogo className="logo" {...logoProps} />}
-            {/* This lockup HTML was copied from edx/frontend-app-learning/src/course-header/Header.jsx. */}
-            { this.props.courseLockUp }
-            <nav
-              aria-label={intl.formatMessage(messages['header.label.main.nav'])}
-              className="nav main-nav"
-            >
-              {this.renderMainMenu()}
-            </nav>
-            <nav
-              aria-label={intl.formatMessage(messages['header.label.secondary.nav'])}
-              className="nav secondary-menu-container align-items-center ml-auto"
-            >
-              {this.renderUserMenu()}
-            </nav>
-          </div>
-        </div>
-      </header>
-    );
-  }
-}
-
-DesktopHeader.propTypes = {
-  mainMenu: PropTypes.oneOfType([
-    PropTypes.node,
-    PropTypes.array,
-  ]),
-  userMenu: PropTypes.arrayOf(PropTypes.shape({
-    type: PropTypes.oneOf(['item', 'menu']),
-    href: PropTypes.string,
-    content: PropTypes.string,
-  })),
-  logo: PropTypes.string,
-  logoAltText: PropTypes.string,
-  logoDestination: PropTypes.string,
-  courseId: PropTypes.string,
-  avatar: PropTypes.string,
-  username: PropTypes.string,
-  loggedIn: PropTypes.bool,
-  courseLockUp: PropTypes.node.isRequired,
-
-  // i18n
-  intl: intlShape.isRequired,
-};
-
-DesktopHeader.defaultProps = {
-  mainMenu: [],
-  userMenu: [],
-  logo: null,
-  logoAltText: null,
-  logoDestination: null,
-  courseId: null,
-  avatar: null,
-  username: null,
-  loggedIn: false,
-};
-
-export default injectIntl(DesktopHeader);
diff --git a/src/studio-header/Header.jsx b/src/studio-header/Header.jsx
deleted file mode 100644
index d4a9f4d853..0000000000
--- a/src/studio-header/Header.jsx
+++ /dev/null
@@ -1,153 +0,0 @@
-/* eslint-disable jsx-a11y/control-has-associated-label */
-/* eslint-disable jsx-a11y/anchor-has-content */
-import PropTypes from 'prop-types';
-import React, { useContext } from 'react';
-import Responsive from 'react-responsive';
-import { AppContext } from '@edx/frontend-platform/react';
-import { ensureConfig } from '@edx/frontend-platform';
-import {
-  injectIntl,
-  intlShape,
-} from '@edx/frontend-platform/i18n';
-
-import DesktopHeader from './DesktopHeader';
-import MobileHeader from './MobileHeader';
-import messages from './Header.messages';
-
-import StudioLogoSVG from './assets/studio-logo.svg';
-
-ensureConfig([
-  'STUDIO_BASE_URL',
-  'LOGOUT_URL',
-  'LOGIN_URL',
-], 'Header component');
-
-function Header({
-  courseId, courseNumber, courseOrg, courseTitle, intl,
-}) {
-  const { authenticatedUser, config } = useContext(AppContext);
-
-  const mainMenu = [
-    {
-      type: 'submenu',
-      content: intl.formatMessage(messages['header.links.content']),
-      submenuContent: (
-        <>
-          <div className="mb-1"><a rel="noopener" href={`${config.STUDIO_BASE_URL}/course/${courseId}`}>{intl.formatMessage(messages['header.links.outline'])}</a></div>
-          <div className="mb-1"><a rel="noopener" href={`${config.STUDIO_BASE_URL}/course_info/${courseId}`}>{intl.formatMessage(messages['header.links.updates'])}</a></div>
-          <div className="mb-1"><a rel="noopener" href={`${config.STUDIO_BASE_URL}/tabs/${courseId}`}>{intl.formatMessage(messages['header.links.pages'])}</a></div>
-          <div className="mb-1"><a rel="noopener" href={`${config.STUDIO_BASE_URL}/assets/${courseId}`}>{intl.formatMessage(messages['header.links.filesAndUploads'])}</a></div>
-          <div className="mb-1"><a rel="noopener" href={`${config.STUDIO_BASE_URL}/textbooks/${courseId}`}>{intl.formatMessage(messages['header.links.textbooks'])}</a></div>
-          <div className="mb-1"><a rel="noopener" href={`${config.STUDIO_BASE_URL}/videos/${courseId}`}>{intl.formatMessage(messages['header.links.videoUploads'])}</a></div>
-        </>
-      ),
-    },
-    {
-      type: 'submenu',
-      content: intl.formatMessage(messages['header.links.settings']),
-      submenuContent: (
-        <>
-          <div className="mb-1"><a rel="noopener" href={`${config.STUDIO_BASE_URL}/settings/details/${courseId}`}>{intl.formatMessage(messages['header.links.scheduleAndDetails'])}</a></div>
-          <div className="mb-1"><a rel="noopener" href={`${config.STUDIO_BASE_URL}/settings/grading/${courseId}`}>{intl.formatMessage(messages['header.links.grading'])}</a></div>
-          <div className="mb-1"><a rel="noopener" href={`${config.STUDIO_BASE_URL}/course_team/${courseId}`}>{intl.formatMessage(messages['header.links.courseTeam'])}</a></div>
-          <div className="mb-1"><a rel="noopener" href={`${config.STUDIO_BASE_URL}/group_configurations/${courseId}`}>{intl.formatMessage(messages['header.links.groupConfigurations'])}</a></div>
-          <div className="mb-1"><a rel="noopener" href={`${config.STUDIO_BASE_URL}/settings/advanced/${courseId}`}>{intl.formatMessage(messages['header.links.advancedSettings'])}</a></div>
-        </>
-      ),
-    },
-    {
-      type: 'submenu',
-      content: intl.formatMessage(messages['header.links.tools']),
-      submenuContent: (
-        <>
-          <div className="mb-1"><a rel="noopener" href={`${config.STUDIO_BASE_URL}/import/${courseId}`}>{intl.formatMessage(messages['header.links.import'])}</a></div>
-          <div className="mb-1"><a rel="noopener" href={`${config.STUDIO_BASE_URL}/export/${courseId}`}>{intl.formatMessage(messages['header.links.export'])}</a></div>
-          <div className="mb-1"><a rel="noopener" href={`${config.STUDIO_BASE_URL}/checklists/${courseId}`}>{intl.formatMessage(messages['header.links.checklists'])}</a></div>
-        </>
-      ),
-    },
-  ];
-
-  const studioHomeItem = {
-    type: 'item',
-    href: config.STUDIO_BASE_URL,
-    content: intl.formatMessage(messages['header.user.menu.studio']),
-  };
-
-  const logoutItem = {
-    type: 'item',
-    href: config.LOGOUT_URL,
-    content: intl.formatMessage(messages['header.user.menu.logout']),
-  };
-
-  let userMenu = [];
-
-  if (authenticatedUser !== null) {
-    if (authenticatedUser.administrator) {
-      userMenu = [
-        studioHomeItem,
-        {
-          type: 'item',
-          href: `${config.STUDIO_BASE_URL}/maintenance`,
-          content: intl.formatMessage(messages['header.user.menu.maintenance']),
-        },
-        logoutItem,
-      ];
-    } else {
-      userMenu = [
-        studioHomeItem,
-        logoutItem,
-      ];
-    }
-  }
-
-  const courseLockUp = (
-    <a
-      className="course-title-lockup"
-      style={{ lineHeight: 1 }}
-      href={`${config.STUDIO_BASE_URL}/course/${courseId}`}
-      aria-label={intl.formatMessage(messages['header.label.courseOutline'])}
-    >
-      <span className="d-block small m-0" data-testid="course-org-number">{courseOrg} {courseNumber}</span>
-      <span className="d-block m-0 font-weight-bold" data-testid="course-title">{courseTitle}</span>
-    </a>
-  );
-
-  const props = {
-    logo: StudioLogoSVG,
-    logoAltText: 'Studio edX',
-    siteName: 'edX',
-    logoDestination: config.STUDIO_BASE_URL,
-    courseLockUp,
-    courseId,
-    username: authenticatedUser !== null ? authenticatedUser.username : null,
-    avatar: authenticatedUser !== null ? authenticatedUser.avatar : null,
-    mainMenu,
-    userMenu,
-  };
-  return (
-    <>
-      <Responsive maxWidth={768}>
-        <MobileHeader {...props} />
-      </Responsive>
-      <Responsive minWidth={769}>
-        <DesktopHeader {...props} />
-      </Responsive>
-    </>
-  );
-}
-
-Header.propTypes = {
-  courseId: PropTypes.string.isRequired,
-  courseNumber: PropTypes.string,
-  courseOrg: PropTypes.string,
-  courseTitle: PropTypes.string.isRequired,
-  intl: intlShape.isRequired,
-};
-
-Header.defaultProps = {
-  courseNumber: null,
-  courseOrg: null,
-};
-
-export default injectIntl(Header);
diff --git a/src/studio-header/Header.test.jsx b/src/studio-header/Header.test.jsx
deleted file mode 100644
index 6263fb531c..0000000000
--- a/src/studio-header/Header.test.jsx
+++ /dev/null
@@ -1,102 +0,0 @@
-// This file was copied from edx/frontend-component-header-edx.
-import React from 'react';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
-import { AppContext } from '@edx/frontend-platform/react';
-import { Context as ResponsiveContext } from 'react-responsive';
-import {
-  cleanup,
-  render,
-  screen,
-} from '@testing-library/react';
-
-import Header from './Header';
-
-describe('<Header />', () => {
-  function createComponent(screenWidth, component) {
-    return (
-      <ResponsiveContext.Provider value={{ width: screenWidth }}>
-        <IntlProvider locale="en" messages={{}}>
-          <AppContext.Provider value={{
-            authenticatedUser: {
-              userId: 'abc123',
-              username: 'edX',
-              roles: [],
-              administrator: false,
-            },
-            config: {
-              STUDIO_BASE_URL: process.env.STUDIO_BASE_URL,
-              LMS_BASE_URL: process.env.LMS_BASE_URL,
-              LOGIN_URL: process.env.LOGIN_URL,
-              LOGOUT_URL: process.env.LOGOUT_URL,
-            },
-          }}
-          >
-            {component}
-          </AppContext.Provider>
-        </IntlProvider>
-      </ResponsiveContext.Provider>
-    );
-  }
-
-  it('renders desktop header correctly with API call', async () => {
-    const component = createComponent(1280, (
-      <Header
-        courseId="course-v1:edX+DemoX+Demo_Course"
-        courseNumber="DemoX"
-        courseOrg="edX"
-        courseTitle="Demonstration Course"
-      />
-    ));
-
-    render(component);
-    expect(screen.getByTestId('course-org-number').textContent).toEqual(expect.stringContaining('edX DemoX'));
-    expect(screen.getByTestId('course-title').textContent).toEqual(expect.stringContaining('Demonstration Course'));
-  });
-
-  it('renders mobile header correctly with API call', async () => {
-    const component = createComponent(500, (
-      <Header
-        courseId="course-v1:edX+DemoX+Demo_Course"
-        courseNumber="DemoX"
-        courseOrg="edX"
-        courseTitle="Demonstration Course"
-      />
-    ));
-
-    render(component);
-    expect(screen.getAllByTestId('course-org-number')[0].textContent).toEqual(expect.stringContaining('edX DemoX'));
-    expect(screen.getAllByTestId('course-title')[0].textContent).toEqual(expect.stringContaining('Demonstration Course'));
-  });
-
-  it('renders desktop header correctly with bad API call', async () => {
-    const component = createComponent(1280, (
-      <Header
-        courseId="course-v1:edX+DemoX+Demo_Course"
-        courseNumber={null}
-        courseOrg={null}
-        courseTitle="course-v1:edX+DemoX+Demo_Course"
-      />
-    ));
-
-    render(component);
-    expect(screen.getByTestId('course-title').textContent).toEqual(expect.stringContaining('course-v1:edX+DemoX+Demo_Course'));
-  });
-
-  it('renders mobile header correctly with bad API call', async () => {
-    const component = createComponent(500, (
-      <Header
-        courseId="course-v1:edX+DemoX+Demo_Course"
-        courseNumber={null}
-        courseOrg={null}
-        courseTitle="course-v1:edX+DemoX+Demo_Course"
-      />
-    ));
-
-    render(component);
-    expect(screen.getAllByTestId('course-title')[0].textContent).toEqual(expect.stringContaining('course-v1:edX+DemoX+Demo_Course'));
-  });
-
-  afterEach(() => {
-    cleanup();
-  });
-});
diff --git a/src/studio-header/Icons.jsx b/src/studio-header/Icons.jsx
deleted file mode 100644
index 0a486b18dc..0000000000
--- a/src/studio-header/Icons.jsx
+++ /dev/null
@@ -1,47 +0,0 @@
-// This file was copied from edx/frontend-component-header-edx.
-import React from 'react';
-
-export const MenuIcon = props => (
-  <svg
-    width="24px"
-    height="24px"
-    viewBox="0 0 24 24"
-    version="1.1"
-    {...props}
-  >
-    <rect fill="currentColor" x="2" y="5" width="20" height="2" />
-    <rect fill="currentColor" x="2" y="11" width="20" height="2" />
-    <rect fill="currentColor" x="2" y="17" width="20" height="2" />
-  </svg>
-);
-
-export const AvatarIcon = props => (
-  <svg
-    width="24px"
-    height="24px"
-    viewBox="0 0 24 24"
-    version="1.1"
-    {...props}
-  >
-    <path
-      d="M4.10255106,18.1351061 C4.7170266,16.0581859 8.01891846,14.4720277 12,14.4720277 C15.9810815,14.4720277 19.2829734,16.0581859 19.8974489,18.1351061 C21.215206,16.4412566 22,14.3122775 22,12 C22,6.4771525 17.5228475,2 12,2 C6.4771525,2 2,6.4771525 2,12 C2,14.3122775 2.78479405,16.4412566 4.10255106,18.1351061 Z M12,24 C5.372583,24 0,18.627417 0,12 C0,5.372583 5.372583,0 12,0 C18.627417,0 24,5.372583 24,12 C24,18.627417 18.627417,24 12,24 Z M12,13 C9.790861,13 8,11.209139 8,9 C8,6.790861 9.790861,5 12,5 C14.209139,5 16,6.790861 16,9 C16,11.209139 14.209139,13 12,13 Z"
-      fill="currentColor"
-    />
-  </svg>
-);
-
-export const CaretIcon = props => (
-  <svg
-    width="16px"
-    height="16px"
-    viewBox="0 0 16 16"
-    version="1.1"
-    {...props}
-  >
-    <path
-      d="M7,4 L7,8 L11,8 L11,10 L5,10 L5,4 L7,4 Z"
-      fill="currentColor"
-      transform="translate(8.000000, 7.000000) rotate(-45.000000) translate(-8.000000, -7.000000) "
-    />
-  </svg>
-);
diff --git a/src/studio-header/Logo.jsx b/src/studio-header/Logo.jsx
deleted file mode 100644
index 6a37bf82c0..0000000000
--- a/src/studio-header/Logo.jsx
+++ /dev/null
@@ -1,36 +0,0 @@
-// This file was copied from edx/frontend-component-header-edx.
-import React from 'react';
-import PropTypes from 'prop-types';
-
-function Logo({ src, alt, ...attributes }) {
-  return (
-    <img src={src} alt={alt} {...attributes} />
-  );
-}
-
-Logo.propTypes = {
-  src: PropTypes.string.isRequired,
-  alt: PropTypes.string.isRequired,
-};
-
-function LinkedLogo({
-  href,
-  src,
-  alt,
-  ...attributes
-}) {
-  return (
-    <a href={href} {...attributes}>
-      <img className="d-block" src={src} alt={alt} />
-    </a>
-  );
-}
-
-LinkedLogo.propTypes = {
-  href: PropTypes.string.isRequired,
-  src: PropTypes.string.isRequired,
-  alt: PropTypes.string.isRequired,
-};
-
-export { LinkedLogo, Logo };
-export default Logo;
diff --git a/src/studio-header/Menu/Menu.jsx b/src/studio-header/Menu/Menu.jsx
deleted file mode 100644
index 1593fb1e51..0000000000
--- a/src/studio-header/Menu/Menu.jsx
+++ /dev/null
@@ -1,279 +0,0 @@
-// This file was copied from edx/frontend-component-header-edx.
-import React from 'react';
-import { CSSTransition } from 'react-transition-group';
-import PropTypes from 'prop-types';
-
-function MenuTrigger({ tag, className, ...attributes }) {
-  return React.createElement(tag, {
-    className: `menu-trigger ${className}`,
-    ...attributes,
-  });
-}
-MenuTrigger.propTypes = {
-  tag: PropTypes.string,
-  className: PropTypes.string,
-};
-MenuTrigger.defaultProps = {
-  tag: 'div',
-  className: null,
-};
-const MenuTriggerType = <MenuTrigger />.type;
-
-function MenuContent({ tag, className, ...attributes }) {
-  return React.createElement(tag, {
-    className: ['menu-content', className].join(' '),
-    ...attributes,
-  });
-}
-MenuContent.propTypes = {
-  tag: PropTypes.string,
-  className: PropTypes.string,
-};
-MenuContent.defaultProps = {
-  tag: 'div',
-  className: null,
-};
-
-class Menu extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.menu = React.createRef();
-    this.state = {
-      expanded: false,
-    };
-
-    this.onTriggerClick = this.onTriggerClick.bind(this);
-    this.onCloseClick = this.onCloseClick.bind(this);
-    this.onKeyDown = this.onKeyDown.bind(this);
-    this.onDocumentClick = this.onDocumentClick.bind(this);
-    this.onMouseEnter = this.onMouseEnter.bind(this);
-    this.onMouseLeave = this.onMouseLeave.bind(this);
-  }
-
-  // Lifecycle Events
-  componentWillUnmount() {
-    document.removeEventListener('touchend', this.onDocumentClick, true);
-    document.removeEventListener('click', this.onDocumentClick, true);
-
-    // Call onClose callback when unmounting and open
-    if (this.state.expanded && this.props.onClose) {
-      this.props.onClose();
-    }
-  }
-
-  // Event handlers
-  onDocumentClick(e) {
-    if (!this.props.closeOnDocumentClick) {
-      return;
-    }
-
-    const clickIsInMenu = this.menu.current === e.target || this.menu.current.contains(e.target);
-    if (clickIsInMenu) {
-      return;
-    }
-
-    this.close();
-  }
-
-  onTriggerClick(e) {
-    // Let the browser follow the link of the trigger if the menu
-    // is already expanded and the trigger has an href attribute
-    if (this.state.expanded && e.target.getAttribute('href')) {
-      return;
-    }
-
-    e.preventDefault();
-    this.toggle();
-  }
-
-  onCloseClick() {
-    this.getFocusableElements()[0].focus();
-    this.close();
-  }
-
-  onKeyDown(e) {
-    if (!this.state.expanded) {
-      return;
-    }
-    switch (e.key) {
-      case 'Escape': {
-        e.preventDefault();
-        e.stopPropagation();
-        this.getFocusableElements()[0].focus();
-        this.close();
-        break;
-      }
-      case 'Enter': {
-        // Using focusable elements instead of a ref to the trigger
-        // because Hyperlink and Button can handle refs as functional components
-        if (document.activeElement === this.getFocusableElements()[0]) {
-          e.preventDefault();
-          this.toggle();
-        }
-        break;
-      }
-      case 'Tab': {
-        e.preventDefault();
-        if (e.shiftKey) {
-          this.focusPrevious();
-        } else {
-          this.focusNext();
-        }
-        break;
-      }
-      case 'ArrowDown': {
-        e.preventDefault();
-        this.focusNext();
-        break;
-      }
-      case 'ArrowUp': {
-        e.preventDefault();
-        this.focusPrevious();
-        break;
-      }
-      default:
-    }
-  }
-
-  onMouseEnter() {
-    if (!this.props.respondToPointerEvents) {
-      return;
-    }
-    this.open();
-  }
-
-  onMouseLeave() {
-    if (!this.props.respondToPointerEvents) {
-      return;
-    }
-    this.close();
-  }
-
-  // Internal functions
-
-  getFocusableElements() {
-    return this.menu.current.querySelectorAll('button:not([disabled]), [href]:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]):not([disabled])');
-  }
-
-  getAttributesFromProps() {
-    // Any extra props are attributes for the menu
-    const attributes = {};
-    Object.keys(this.props)
-      // eslint-disable-next-line react/forbid-foreign-prop-types
-      .filter(property => Menu.propTypes[property] === undefined)
-      .forEach((property) => {
-        attributes[property] = this.props[property];
-      });
-    return attributes;
-  }
-
-  focusNext() {
-    const focusableElements = Array.from(this.getFocusableElements());
-    const activeIndex = focusableElements.indexOf(document.activeElement);
-    const nextIndex = (activeIndex + 1) % focusableElements.length;
-    focusableElements[nextIndex].focus();
-  }
-
-  focusPrevious() {
-    const focusableElements = Array.from(this.getFocusableElements());
-    const activeIndex = focusableElements.indexOf(document.activeElement);
-    const previousIndex = (activeIndex || focusableElements.length) - 1;
-    focusableElements[previousIndex].focus();
-  }
-
-  open() {
-    if (this.props.onOpen) {
-      this.props.onOpen();
-    }
-    this.setState({ expanded: true });
-    // Listen to touchend and click events to ensure the menu
-    // can be closed on mobile, pointer, and mixed input devices
-    document.addEventListener('touchend', this.onDocumentClick, true);
-    document.addEventListener('click', this.onDocumentClick, true);
-  }
-
-  close() {
-    if (this.props.onClose) {
-      this.props.onClose();
-    }
-    this.setState({ expanded: false });
-    document.removeEventListener('touchend', this.onDocumentClick, true);
-    document.removeEventListener('click', this.onDocumentClick, true);
-  }
-
-  toggle() {
-    if (this.state.expanded) {
-      this.close();
-    } else {
-      this.open();
-    }
-  }
-
-  renderTrigger(node) {
-    return React.cloneElement(node, {
-      onClick: this.onTriggerClick,
-      'aria-haspopup': 'menu',
-      'aria-expanded': this.state.expanded,
-    });
-  }
-
-  renderMenuContent(node) {
-    return (
-      <CSSTransition
-        in={this.state.expanded}
-        timeout={this.props.transitionTimeout}
-        classNames={this.props.transitionClassName}
-        unmountOnExit
-      >
-        {node}
-      </CSSTransition>
-    );
-  }
-
-  render() {
-    const { className } = this.props;
-
-    const wrappedChildren = React.Children.map(this.props.children, (child) => {
-      if (child.type === MenuTriggerType) {
-        return this.renderTrigger(child);
-      }
-      return this.renderMenuContent(child);
-    });
-
-    const rootClassName = this.state.expanded ? 'menu expanded' : 'menu';
-
-    return React.createElement(this.props.tag, {
-      className: `${rootClassName} ${className}`,
-      ref: this.menu,
-      onKeyDown: this.onKeyDown,
-      onMouseEnter: this.onMouseEnter,
-      onMouseLeave: this.onMouseLeave,
-      ...this.getAttributesFromProps(),
-    }, wrappedChildren);
-  }
-}
-
-Menu.propTypes = {
-  tag: PropTypes.string,
-  onClose: PropTypes.func,
-  onOpen: PropTypes.func,
-  closeOnDocumentClick: PropTypes.bool,
-  respondToPointerEvents: PropTypes.bool,
-  className: PropTypes.string,
-  transitionTimeout: PropTypes.number,
-  transitionClassName: PropTypes.string,
-  children: PropTypes.arrayOf(PropTypes.node).isRequired,
-};
-Menu.defaultProps = {
-  tag: 'div',
-  className: null,
-  onClose: null,
-  onOpen: null,
-  respondToPointerEvents: false,
-  closeOnDocumentClick: true,
-  transitionTimeout: 250,
-  transitionClassName: 'menu-content',
-};
-
-export { Menu, MenuTrigger, MenuContent };
diff --git a/src/studio-header/Menu/index.jsx b/src/studio-header/Menu/index.jsx
deleted file mode 100644
index 9ad4449bbe..0000000000
--- a/src/studio-header/Menu/index.jsx
+++ /dev/null
@@ -1,4 +0,0 @@
-// This file was copied from edx/frontend-component-header-edx.
-import { Menu, MenuTrigger, MenuContent } from './Menu';
-
-export { Menu, MenuTrigger, MenuContent };
diff --git a/src/studio-header/Menu/menu.scss b/src/studio-header/Menu/menu.scss
deleted file mode 100644
index c8374ff181..0000000000
--- a/src/studio-header/Menu/menu.scss
+++ /dev/null
@@ -1,46 +0,0 @@
-// This file was copied from edx/frontend-component-header-edx.
-.menu {
-  position: relative;
-}
-.menu-content {
-  position: absolute;
-  top: 100%;
-  z-index: 10;
-  background: #fff;
-  min-width: 10rem;
-  &.pin-left {
-    left: 0;
-  }
-  &.pin-right {
-    right: 0;
-  }
-}
-
-
-.menu-dropdown-enter {
-  opacity: 0;
-  transform-origin: 75% 0;
-  transform: scale3d(0.8, 0.8, 1);
-}
-.menu-dropdown-enter-active {
-  transform-origin: 75% 0;
-  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
-  transform: scale3d(1, 1, 1);
-  opacity: 1;
-}
-.menu-dropdown-enter-done {
-}
-
-.menu-dropdown-exit {
-  transform-origin: 75% 0;
-  transform: scale3d(1, 1, 1);
-  opacity: 1;
-}
-.menu-dropdown-exit-active {
-  transform-origin: 75% 0;
-  transform: scale3d(0.8, 0.8, 1);
-  transition: all 250ms cubic-bezier(0.8, 0, 0.6, 1);
-  opacity: 0;
-}
-.menu-dropdown-exit-done {
-}
diff --git a/src/studio-header/MobileHeader.jsx b/src/studio-header/MobileHeader.jsx
deleted file mode 100644
index 374661052c..0000000000
--- a/src/studio-header/MobileHeader.jsx
+++ /dev/null
@@ -1,167 +0,0 @@
-// This file was copied from edx/frontend-component-header-edx.
-import React from 'react';
-import PropTypes from 'prop-types';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-
-// Local Components
-import { Menu, MenuTrigger, MenuContent } from './Menu';
-import Avatar from './Avatar';
-import { LinkedLogo, Logo } from './Logo';
-
-// i18n
-import messages from './Header.messages';
-
-// Assets
-import { MenuIcon } from './Icons';
-
-class MobileHeader extends React.Component {
-  constructor(props) { // eslint-disable-line no-useless-constructor
-    super(props);
-  }
-
-  renderMainMenu() {
-    const { mainMenu } = this.props;
-
-    // Nodes are accepted as a prop
-    if (!Array.isArray(mainMenu)) {
-      return mainMenu;
-    }
-
-    return mainMenu.map((menuItem) => {
-      const {
-        type,
-        href,
-        content,
-        submenuContent,
-      } = menuItem;
-
-      if (type === 'item') {
-        return (
-          <a key={`${type}-${content}`} className="nav-link" href={href}>
-            {content}
-          </a>
-        );
-      }
-
-      return (
-        <Menu key={`${type}-${content}`} tag="div" className="nav-item">
-          <MenuTrigger tag="a" role="button" tabIndex="0" className="nav-link">
-            {content}
-          </MenuTrigger>
-          <MenuContent className="position-static pin-left pin-right py-2">
-            {submenuContent}
-          </MenuContent>
-        </Menu>
-      );
-    });
-  }
-
-  renderUserMenuItems() {
-    const { userMenu } = this.props;
-
-    return userMenu.map(({ type, href, content }) => (
-      <li className="nav-item" key={`${type}-${content}`}>
-        <a className="nav-link" href={href}>{content}</a>
-      </li>
-    ));
-  }
-
-  render() {
-    const {
-      logo,
-      logoAltText,
-      logoDestination,
-      avatar,
-      username,
-      stickyOnMobile,
-      mainMenu,
-      intl,
-    } = this.props;
-    const logoProps = { src: logo, alt: logoAltText, href: logoDestination };
-    const stickyClassName = stickyOnMobile ? 'sticky-top' : '';
-    return (
-      <header
-        aria-label={intl.formatMessage(messages['header.label.main.header'])}
-        className={`site-header-mobile d-flex justify-content-between align-items-center shadow ${stickyClassName}`}
-      >
-        <div className="w-100 d-flex justify-content-start">
-          {mainMenu.length > 0
-            ? (
-              <Menu className="position-static">
-                <MenuTrigger
-                  tag="button"
-                  className="icon-button"
-                  aria-label={intl.formatMessage(messages['header.label.main.menu'])}
-                  title={intl.formatMessage(messages['header.label.main.menu'])}
-                >
-                  <MenuIcon role="img" aria-hidden focusable="false" style={{ width: '1.5rem', height: '1.5rem' }} />
-                </MenuTrigger>
-                <MenuContent
-                  tag="nav"
-                  aria-label={intl.formatMessage(messages['header.label.main.nav'])}
-                  className="nav flex-column pin-left pin-right border-top shadow py-2"
-                >
-                  {this.renderMainMenu()}
-                </MenuContent>
-              </Menu>
-            ) : null}
-        </div>
-        <div className="w-100 d-flex align-items-center mobile-lockup">
-          {logoDestination === null ? <Logo className="logo" src={logo} alt={logoAltText} /> : <LinkedLogo className="logo" {...logoProps} itemType="http://schema.org/Organization" />}
-          { this.props.courseLockUp }
-        </div>
-        <div className="w-100 d-flex justify-content-end align-items-center">
-          <Menu tag="nav" aria-label="Secondary" className="position-static">
-            <MenuTrigger
-              tag="button"
-              className="icon-button"
-              aria-label={intl.formatMessage(messages['header.label.account.menu'])}
-              title={intl.formatMessage(messages['header.label.account.menu'])}
-            >
-              <Avatar size="1.5rem" src={avatar} alt={username} />
-            </MenuTrigger>
-            <MenuContent tag="ul" className="nav flex-column pin-left pin-right border-top shadow py-2">
-              {this.renderUserMenuItems()}
-            </MenuContent>
-          </Menu>
-        </div>
-      </header>
-    );
-  }
-}
-
-MobileHeader.propTypes = {
-  mainMenu: PropTypes.oneOfType([
-    PropTypes.node,
-    PropTypes.array,
-  ]),
-
-  userMenu: PropTypes.arrayOf(PropTypes.shape({
-    type: PropTypes.oneOf(['item', 'menu']),
-    href: PropTypes.string,
-    content: PropTypes.string,
-  })),
-  logo: PropTypes.string,
-  logoAltText: PropTypes.string,
-  logoDestination: PropTypes.string,
-  avatar: PropTypes.string,
-  username: PropTypes.string,
-  stickyOnMobile: PropTypes.bool,
-  courseLockUp: PropTypes.node.isRequired,
-
-  // i18n
-  intl: intlShape.isRequired,
-};
-
-MobileHeader.defaultProps = {
-  mainMenu: [],
-  userMenu: [],
-  logo: null,
-  logoAltText: null,
-  logoDestination: null,
-  avatar: null,
-  username: null,
-  stickyOnMobile: true,
-};
-
-export default injectIntl(MobileHeader);
diff --git a/src/studio-header/assets/studio-logo.svg b/src/studio-header/assets/studio-logo.svg
deleted file mode 100644
index 96d2b94cdf..0000000000
--- a/src/studio-header/assets/studio-logo.svg
+++ /dev/null
@@ -1,77 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 24.1.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 271.93 76.05" style="enable-background:new 0 0 271.93 76.05;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#00262B;}
-	.st1{fill:#FFFFFF;}
-</style>
-<g>
-	<g>
-		<path class="st0" d="M161.07,32.72c-3.8,0-6.52,1.93-6.94,4.57c-0.51,2.96,2.54,4.11,4.83,4.71l2.9,0.78
-			c3.74,0.97,8.35,3.13,7.43,8.7c-0.9,5.24-5.67,9.06-12.93,9.06c-6.93,0-10.72-3.46-10.09-9.06h4.7c-0.31,3.37,2.43,4.97,6.02,4.97
-			c3.97,0,7.19-2.01,7.67-5.01c0.48-2.73-1.9-3.84-5.09-4.71l-3.49-1c-4.73-1.36-7.38-3.87-6.69-8.17
-			c0.92-5.35,6.24-8.88,12.44-8.88c6.28,0,9.98,3.6,9.34,8.73h-4.5C166.73,34.37,164.63,32.72,161.07,32.72z"/>
-		<path class="st0" d="M186.76,40.47h-4.79l-2.13,12.76c-0.42,2.61,0.83,3.09,2.3,3.09c0.72,0,1.28-0.14,1.6-0.19l0.25,3.73
-			c-0.6,0.2-1.62,0.47-3.07,0.48c-3.58,0.06-6.42-1.98-5.71-6.18l2.26-13.69h-3.38l0.59-3.62h3.38l0.92-5.56h4.51l-0.92,5.56h4.77
-			L186.76,40.47z"/>
-		<path class="st0" d="M206.59,36.84h4.53l-3.87,23.19h-4.44l0.68-4.02h-0.24c-1.45,2.48-4.19,4.32-7.67,4.32
-			c-4.46,0-7.1-2.99-6.16-8.74l2.48-14.75h4.51l-2.37,14.21c-0.5,3.16,1.09,5.18,3.88,5.18c2.54,0,5.75-1.87,6.4-5.82L206.59,36.84z
-			"/>
-		<path class="st0" d="M213.82,48.48c1.25-7.52,6.11-11.94,11.73-11.94c4.3,0,5.42,2.63,5.98,4.06h0.27l1.92-11.49h4.51l-5.13,30.93
-			h-4.41l0.6-3.61h-0.36c-1.07,1.48-3.16,4.06-7.37,4.06C215.92,60.49,212.6,55.99,213.82,48.48z M230.6,48.44
-			c0.8-4.85-0.88-8.06-4.83-8.06c-4.06,0-6.6,3.46-7.35,8.06c-0.77,4.65,0.63,8.2,4.68,8.2C226.97,56.64,229.8,53.32,230.6,48.44z"
-			/>
-		<path class="st0" d="M242.97,36.84h4.51l-3.87,23.19h-4.51L242.97,36.84z M243.44,30.53c0.06-1.5,1.41-2.7,2.98-2.7
-			c1.55,0,2.79,1.21,2.72,2.7c-0.06,1.48-1.41,2.69-2.98,2.69C244.6,33.22,243.37,32.01,243.44,30.53z"/>
-		<path class="st0" d="M250.19,48.35c1.13-7.13,6.1-11.81,12.56-11.81c6.61,0,10.13,4.88,8.96,12.2
-			c-1.17,7.08-6.13,11.76-12.57,11.76C252.49,60.5,248.99,55.63,250.19,48.35z M267.25,48.35c0.68-4.36-0.62-8.03-4.76-8.03
-			c-4.36,0-7.13,3.87-7.85,8.41c-0.71,4.35,0.59,7.99,4.76,7.99C263.73,56.71,266.5,52.89,267.25,48.35z"/>
-	</g>
-	<g>
-		<g>
-			<polygon class="st0" points="86.45,12.49 89.06,0.02 12.55,0.02 0,59.95 63.97,59.95 60.45,76.03 121.72,76.03 135.24,12.49 			
-				"/>
-			<path class="st1" d="M26.07,52.3c-1.73,0-3.37-0.28-4.91-0.85c-1.54-0.57-2.89-1.41-4.03-2.51c-1.15-1.11-2.05-2.47-2.72-4.09
-				c-0.67-1.62-1-3.48-1-5.58c0-2.87,0.4-5.49,1.2-7.85c0.8-2.36,1.91-4.38,3.34-6.07c1.43-1.69,3.14-2.99,5.13-3.92
-				c1.99-0.92,4.18-1.39,6.55-1.39c1.6,0,3.12,0.28,4.55,0.84c1.44,0.56,2.69,1.37,3.77,2.44c1.08,1.07,1.94,2.38,2.57,3.95
-				c0.64,1.56,0.95,3.35,0.95,5.38c0,0.31-0.01,0.67-0.03,1.08c-0.02,0.42-0.05,0.84-0.09,1.27c-0.04,0.43-0.08,0.86-0.11,1.27
-				c-0.04,0.41-0.09,0.77-0.14,1.05H18.64c-0.02,0.27-0.03,0.53-0.04,0.78c-0.01,0.25-0.01,0.51-0.01,0.78
-				c0,1.6,0.23,2.96,0.69,4.09c0.46,1.13,1.06,2.05,1.81,2.76c0.74,0.71,1.58,1.23,2.5,1.55s1.86,0.48,2.8,0.48
-				c2.06,0,3.72-0.36,4.97-1.07c1.25-0.71,2.21-1.68,2.86-2.89h5.29c-0.33,1.2-0.87,2.31-1.62,3.35c-0.75,1.04-1.7,1.94-2.85,2.7
-				c-1.15,0.76-2.48,1.36-3.99,1.79C29.55,52.09,27.88,52.3,26.07,52.3z M36.22,33.31c0.02-0.1,0.03-0.27,0.04-0.54
-				c0.01-0.26,0.01-0.52,0.01-0.77c0-1.02-0.15-1.99-0.45-2.91c-0.3-0.91-0.75-1.72-1.35-2.41c-0.6-0.69-1.34-1.24-2.23-1.65
-				c-0.89-0.4-1.92-0.61-3.09-0.61c-1.2,0-2.31,0.21-3.35,0.64c-1.04,0.42-1.99,1.03-2.83,1.81c-0.85,0.78-1.58,1.71-2.2,2.8
-				c-0.62,1.09-1.11,2.3-1.47,3.63L36.22,33.31L36.22,33.31z"/>
-			<path class="st1" d="M55.67,52.3c-1.56,0-3.03-0.29-4.4-0.88c-1.37-0.59-2.57-1.43-3.6-2.53c-1.03-1.1-1.85-2.43-2.44-3.99
-				c-0.6-1.56-0.9-3.3-0.9-5.23c0-1.87,0.19-3.66,0.56-5.36c0.38-1.7,0.91-3.29,1.6-4.74c0.69-1.46,1.53-2.77,2.5-3.95
-				c0.97-1.18,2.05-2.18,3.24-3.01s2.47-1.47,3.85-1.91c1.38-0.44,2.82-0.67,4.32-0.67c1.12,0,2.18,0.15,3.19,0.46
-				c1.01,0.31,1.93,0.74,2.75,1.29c0.82,0.55,1.52,1.21,2.11,1.99c0.59,0.78,1.02,1.63,1.29,2.56h0.46l3.85-18.13h5.06l-9.25,43.54
-				h-4.8l0.9-4.25H65.5c-1.14,1.48-2.56,2.65-4.28,3.51C59.5,51.87,57.65,52.3,55.67,52.3z M57.26,47.82c1.62,0,3.12-0.38,4.5-1.14
-				c1.38-0.76,2.58-1.8,3.6-3.12c1.02-1.32,1.82-2.87,2.4-4.65c0.58-1.78,0.87-3.71,0.87-5.77c0-1.33-0.18-2.52-0.55-3.59
-				c-0.37-1.06-0.89-1.96-1.56-2.7c-0.68-0.74-1.49-1.32-2.46-1.72c-0.96-0.41-2.05-0.61-3.27-0.61c-1.6,0-3.08,0.36-4.45,1.07
-				c-1.37,0.71-2.55,1.7-3.56,2.98c-1,1.27-1.79,2.79-2.37,4.55c-0.58,1.76-0.87,3.7-0.87,5.8c0,1.31,0.19,2.51,0.57,3.61
-				s0.9,2.04,1.58,2.82c0.68,0.78,1.48,1.39,2.43,1.82C55.05,47.6,56.1,47.82,57.26,47.82z"/>
-			<g>
-				<polygon class="st1" points="124.49,20.68 113.2,20.68 100.9,35.92 100.29,35.92 93.78,20.68 82.37,20.68 92.15,42.82 
-					71.03,67.84 82.16,67.84 95.72,51.76 96.63,51.76 103.96,67.84 115.16,67.84 104.33,43.92 				"/>
-			</g>
-		</g>
-		<g>
-			<g>
-				<path class="st0" d="M141.76,20.4c-0.55,0-1.07-0.1-1.55-0.31c-0.48-0.21-0.91-0.49-1.27-0.86c-0.37-0.37-0.65-0.79-0.86-1.27
-					c-0.21-0.48-0.31-1-0.31-1.55c0-0.55,0.1-1.07,0.31-1.55c0.21-0.48,0.49-0.91,0.86-1.27c0.37-0.37,0.79-0.65,1.27-0.86
-					c0.48-0.21,1-0.31,1.55-0.31c0.55,0,1.07,0.1,1.55,0.31c0.48,0.21,0.91,0.49,1.27,0.86c0.37,0.37,0.65,0.79,0.86,1.27
-					c0.21,0.48,0.31,1,0.31,1.55c0,0.55-0.1,1.07-0.31,1.55c-0.21,0.48-0.49,0.91-0.86,1.27s-0.79,0.65-1.27,0.86
-					C142.83,20.3,142.31,20.4,141.76,20.4z M141.76,19.66c0.6,0,1.15-0.15,1.64-0.44c0.49-0.29,0.88-0.69,1.18-1.18
-					c0.29-0.49,0.44-1.04,0.44-1.64c0-0.6-0.15-1.15-0.44-1.64c-0.29-0.49-0.69-0.88-1.18-1.18c-0.49-0.29-1.04-0.44-1.64-0.44
-					s-1.15,0.15-1.64,0.44c-0.49,0.29-0.88,0.69-1.18,1.18c-0.29,0.49-0.44,1.04-0.44,1.64c0,0.6,0.15,1.15,0.44,1.64
-					c0.29,0.49,0.69,0.88,1.18,1.18C140.61,19.51,141.16,19.66,141.76,19.66z M140.4,18.2v-3.69h1.77c0.19,0,0.37,0.04,0.54,0.13
-					c0.18,0.09,0.32,0.22,0.43,0.39c0.12,0.17,0.17,0.38,0.17,0.63c0,0.25-0.06,0.47-0.18,0.65c-0.12,0.18-0.27,0.32-0.45,0.42
-					c-0.18,0.1-0.37,0.14-0.56,0.14h-1.37v-0.5h1.2c0.17,0,0.32-0.06,0.46-0.18c0.13-0.12,0.2-0.3,0.2-0.52c0-0.23-0.07-0.4-0.2-0.5
-					s-0.28-0.15-0.44-0.15h-0.93v3.18H140.4z M142.55,16.49l0.92,1.71h-0.72l-0.89-1.71H142.55z"/>
-			</g>
-		</g>
-	</g>
-</g>
-</svg>
diff --git a/src/studio-header/header.scss b/src/studio-header/header.scss
deleted file mode 100644
index e63c58950e..0000000000
--- a/src/studio-header/header.scss
+++ /dev/null
@@ -1,115 +0,0 @@
-// This SCSS was partly copied from edx/frontend-app-support-tools/src/support-header/index.scss.
-$spacer: 1rem;
-$blue: #007db8;
-$white: #fff;
-
-@import './Menu/menu.scss';
-
-.course-title-lockup {
-  @media only screen and (max-width : 768px) {
-    padding-left: 0.5rem;
-    max-width: 70%;
-  }
-  @media only screen and (min-width : 769px) {
-    padding: 0.5rem;
-    padding-right: 1rem;
-    border-right: 1px solid #e5e5e5;
-  }
-  overflow: hidden;
-    span {
-      color: #333;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-}
-
-.mobile-lockup {
-  max-width: 50%;
-}
-
-.dropdown-item a {
-  text-decoration: none;
-}
-
-.icon-button {
-  display: inline-flex;
-  line-height: 3rem;
-  background: transparent;
-  vertical-align: middle;
-  text-align: center;
-  border: none;
-  height: 3rem;
-  width: 3rem;
-  padding: .75rem;
-  justify-content: center;
-  align-items:center;
-  &:hover, &:focus {
-    background: rgba(0,0,0,.1);
-  }
-}
-
-.site-header-mobile,
-.site-header-desktop {
-  position: relative;
-  z-index: 1000;
-}
-
-.site-header-mobile {
-  .nav-link {
-    text-decoration: none;
-    cursor: pointer;
-  }
-  img {
-    height: 1.5rem;
-  }
-}
-
-
-.site-header-desktop {
-  height: 3.75rem;
-  box-shadow: 0 1px 0 0 rgba(0,0,0,.1);
-  background: $white;
-  .nav-link {
-    text-decoration: none;
-  }
-  .logo {
-    display: block;
-    box-sizing: content-box;
-    position: relative;
-    top: -.05em;
-    height: 1.75rem;
-    padding: 1rem 0;
-    margin-right: 1rem;
-    img {
-      display: block;
-      height: 100%;
-    }
-  }
-  .main-nav {
-    flex-wrap: nowrap;
-    .nav-link {
-      padding: 1.125rem 1rem;
-      text-decoration: none;
-      font-weight: 500;
-      letter-spacing: .01em;
-    }
-    .nav-link:hover,
-    .nav-link:focus,
-    .nav-link.active,
-    .expanded .nav-link {
-      background: $component-active-bg;
-      color: $component-active-color;
-    }
-    .menu {
-      position: relative;
-      .menu-content {
-        border-top: solid 2px $component-active-bg;
-        box-shadow: 0 1px 2px rgba(0,0,0,.25);
-        border-bottom-left-radius: 2px;
-        border-bottom-right-radius: 2px;
-        padding: 1rem;
-      }
-    }
-  }
-}
diff --git a/src/studio-home/StudioHome.test.jsx b/src/studio-home/StudioHome.test.jsx
new file mode 100644
index 0000000000..8e6eca953a
--- /dev/null
+++ b/src/studio-home/StudioHome.test.jsx
@@ -0,0 +1,289 @@
+import { useSelector } from 'react-redux';
+import { MemoryRouter, Routes, Route } from 'react-router-dom';
+
+import { RequestStatus } from '../data/constants';
+import { COURSE_CREATOR_STATES } from '../constants';
+import { studioHomeMock } from './__mocks__';
+import { getStudioHomeApiUrl } from './data/api';
+import {
+  act,
+  fireEvent,
+  render,
+  waitFor,
+  initializeMocks,
+} from '../testUtils';
+import messages from './messages';
+import createNewCourseMessages from './create-new-course-form/messages';
+import createOrRerunCourseMessages from '../generic/create-or-rerun-course/messages';
+import { StudioHome } from '.';
+
+const {
+  studioShortName,
+  studioRequestEmail,
+} = studioHomeMock;
+
+jest.mock('react-redux', () => ({
+  ...jest.requireActual('react-redux'),
+  useSelector: jest.fn(),
+}));
+
+const mockNavigate = jest.fn();
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'), // use actual for all non-hook parts
+  useNavigate: () => mockNavigate,
+}));
+
+const RootWrapper = () => (
+  <MemoryRouter initialEntries={['/home']}>
+    <Routes>
+      <Route
+        path="/home"
+        element={<StudioHome />}
+      />
+      <Route
+        path="/libraries"
+        element={<StudioHome />}
+      />
+      <Route
+        path="/libraries-v1"
+        element={<StudioHome />}
+      />
+    </Routes>,
+  </MemoryRouter>
+);
+
+describe('<StudioHome />', () => {
+  describe('api fetch fails', () => {
+    beforeEach(async () => {
+      const mocks = initializeMocks();
+      mocks.axiosMock.onGet(getStudioHomeApiUrl()).reply(404);
+      useSelector.mockReturnValue({ studioHomeLoadingStatus: RequestStatus.FAILED });
+    });
+
+    it('should render fetch error', () => {
+      const { getByText } = render(<RootWrapper />);
+      waitFor(() => {
+        expect(getByText(messages.homePageLoadFailedMessage.defaultMessage)).toBeInTheDocument();
+      });
+    });
+
+    it('should render Studio home title', () => {
+      const { getByText } = render(<RootWrapper />);
+      waitFor(() => {
+        expect(getByText('Studio home')).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('api fetch succeeds', () => {
+    beforeEach(async () => {
+      const mocks = initializeMocks();
+      mocks.axiosMock.onGet(getStudioHomeApiUrl()).reply(200, studioHomeMock);
+      useSelector.mockReturnValue(studioHomeMock);
+    });
+
+    it('should render page and page title correctly', () => {
+      const { getByText } = render(<RootWrapper />);
+      waitFor(() => {
+        expect(getByText(`${studioShortName} home`)).toBeInTheDocument();
+      });
+    });
+
+    it('should render email staff header button', async () => {
+      useSelector.mockReturnValue({
+        ...studioHomeMock,
+        courseCreatorStatus: COURSE_CREATOR_STATES.disallowedForThisSite,
+      });
+
+      const { getByRole } = render(<RootWrapper />);
+      waitFor(() => {
+        expect(getByRole('link', { name: messages.emailStaffBtnText.defaultMessage }))
+          .toHaveAttribute('href', `mailto:${studioRequestEmail}`);
+      });
+    });
+
+    it('should render create new course button', async () => {
+      useSelector.mockReturnValue({
+        ...studioHomeMock,
+        courseCreatorStatus: COURSE_CREATOR_STATES.granted,
+      });
+
+      const { getByRole } = render(<RootWrapper />);
+      waitFor(() => {
+        expect(getByRole('button', { name: messages.addNewCourseBtnText.defaultMessage })).toBeInTheDocument();
+      });
+    });
+
+    it('should show verify email layout if user inactive', () => {
+      useSelector.mockReturnValue({
+        ...studioHomeMock,
+        userIsActive: false,
+      });
+
+      const { getByText } = render(<RootWrapper />);
+      waitFor(() => {
+        expect(getByText('Thanks for signing up, abc123!', { exact: false })).toBeInTheDocument();
+      });
+    });
+
+    it('shows the spinner before the query is complete', async () => {
+      useSelector.mockReturnValue({
+        studioHomeLoadingStatus: RequestStatus.IN_PROGRESS,
+        userIsActive: true,
+      });
+
+      await act(async () => {
+        const { getByRole } = render(<RootWrapper />);
+        waitFor(() => {
+          const spinner = getByRole('status');
+          expect(spinner.textContent).toEqual('Loading...');
+        });
+      });
+    });
+
+    describe('render new library button', () => {
+      it('should navigate to home_library when libraries-v2 disabled', () => {
+        useSelector.mockReturnValue({
+          ...studioHomeMock,
+          courseCreatorStatus: COURSE_CREATOR_STATES.granted,
+          librariesV2Enabled: false,
+        });
+        const studioBaseUrl = 'http://localhost:18010';
+
+        const { getByTestId } = render(<RootWrapper />);
+        waitFor(() => {
+          const createNewLibraryButton = getByTestId('new-library-button');
+
+          const { open } = window;
+          window.open = jest.fn();
+          fireEvent.click(createNewLibraryButton);
+          expect(window.open).toHaveBeenCalledWith(`${studioBaseUrl}/home_library`);
+          window.open = open;
+        });
+      });
+
+      it('should navigate to the library authoring page in course authoring', () => {
+        useSelector.mockReturnValue({
+          ...studioHomeMock,
+          librariesV1Enabled: false,
+        });
+        const { getByTestId } = render(<RootWrapper />);
+        waitFor(() => {
+          const createNewLibraryButton = getByTestId('new-library-button');
+          fireEvent.click(createNewLibraryButton);
+          expect(mockNavigate).toHaveBeenCalledWith('/library/create');
+        });
+      });
+    });
+
+    it('do not render new library button for "v1 only" mode if showNewLibraryButton is False', () => {
+      useSelector.mockReturnValue({
+        ...studioHomeMock,
+        showNewLibraryButton: false,
+        librariesV2Enabled: false,
+      });
+      const { queryByTestId } = render(<RootWrapper />);
+      expect(queryByTestId('new-library-button')).not.toBeInTheDocument();
+    });
+
+    it('render new library button for "v2 only" mode even if showNewLibraryButton is False', () => {
+      useSelector.mockReturnValue({
+        ...studioHomeMock,
+        showNewLibraryButton: false,
+        librariesV1Enabled: false,
+      });
+      const { queryByTestId } = render(<RootWrapper />);
+      waitFor(() => {
+        expect(queryByTestId('new-library-button')).toBeInTheDocument();
+      });
+    });
+
+    it('should render create new course container', async () => {
+      useSelector.mockReturnValue({
+        ...studioHomeMock,
+        courseCreatorStatus: COURSE_CREATOR_STATES.granted,
+      });
+
+      const { getByRole, getByText } = render(<RootWrapper />);
+      waitFor(() => {
+        const createNewCourseButton = getByRole('button', { name: messages.addNewCourseBtnText.defaultMessage });
+
+        act(() => fireEvent.click(createNewCourseButton));
+        expect(getByText(createNewCourseMessages.createNewCourse.defaultMessage)).toBeInTheDocument();
+      });
+    });
+
+    it('should hide create new course container', async () => {
+      useSelector.mockReturnValue({
+        ...studioHomeMock,
+        courseCreatorStatus: COURSE_CREATOR_STATES.granted,
+      });
+
+      const { getByRole, queryByText, getByText } = render(<RootWrapper />);
+
+      waitFor(() => {
+        const createNewCourseButton = getByRole('button', { name: messages.addNewCourseBtnText.defaultMessage });
+        fireEvent.click(createNewCourseButton);
+        expect(getByText(createNewCourseMessages.createNewCourse.defaultMessage)).toBeInTheDocument();
+      });
+
+      waitFor(() => {
+        const cancelButton = getByRole('button', { name: createOrRerunCourseMessages.cancelButton.defaultMessage });
+        fireEvent.click(cancelButton);
+        expect(queryByText(createNewCourseMessages.createNewCourse.defaultMessage)).not.toBeInTheDocument();
+      });
+    });
+
+    describe('contact administrator card', () => {
+      it('should show contact administrator card with no add course buttons', () => {
+        useSelector.mockReturnValue({
+          ...studioHomeMock,
+          courses: null,
+          courseCreatorStatus: COURSE_CREATOR_STATES.pending,
+        });
+        const { getByText, queryByText } = render(<RootWrapper />);
+        const defaultTitleMessage = messages.defaultSection_1_Title.defaultMessage;
+        waitFor(() => {
+          const titleWithStudioName = defaultTitleMessage.replace('{studioShortName}', 'Studio');
+          const administratorCardTitle = getByText(titleWithStudioName);
+
+          expect(administratorCardTitle).toBeVisible();
+
+          const addCourseButton = queryByText(messages.btnAddNewCourseText.defaultMessage);
+          expect(addCourseButton).toBeNull();
+        });
+      });
+
+      it('should show contact administrator card with add course buttons', () => {
+        useSelector.mockReturnValue({
+          ...studioHomeMock,
+          courses: null,
+          courseCreatorStatus: COURSE_CREATOR_STATES.granted,
+        });
+        const { getByText, getByTestId } = render(<RootWrapper />);
+        const defaultTitleMessage = messages.defaultSection_1_Title.defaultMessage;
+        waitFor(() => {
+          const titleWithStudioName = defaultTitleMessage.replace('{studioShortName}', 'Studio');
+          const administratorCardTitle = getByText(titleWithStudioName);
+
+          expect(administratorCardTitle).toBeVisible();
+
+          const addCourseButton = getByTestId('contact-admin-create-course');
+          expect(addCourseButton).toBeVisible();
+
+          fireEvent.click(addCourseButton);
+          expect(getByTestId('create-course-form')).toBeVisible();
+        });
+      });
+    });
+
+    it('should show footer', () => {
+      const { getByText } = render(<RootWrapper />);
+      waitFor(() => {
+        expect(getByText('Looking for help with Studio?')).toBeInTheDocument();
+        expect(getByText('LMS')).toHaveAttribute('href', process.env.LMS_BASE_URL);
+      });
+    });
+  });
+});
diff --git a/src/studio-home/StudioHome.tsx b/src/studio-home/StudioHome.tsx
new file mode 100644
index 0000000000..9b8bc20a32
--- /dev/null
+++ b/src/studio-home/StudioHome.tsx
@@ -0,0 +1,196 @@
+import React, { useCallback } from 'react';
+import {
+  Button,
+  Container,
+  Icon,
+  Layout,
+  MailtoLink,
+  Row,
+} from '@openedx/paragon';
+import { Add as AddIcon, Error } from '@openedx/paragon/icons';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { StudioFooter } from '@edx/frontend-component-footer';
+import { getConfig } from '@edx/frontend-platform';
+import { useLocation, useNavigate } from 'react-router-dom';
+
+import Loading from '../generic/Loading';
+import InternetConnectionAlert from '../generic/internet-connection-alert';
+import Header from '../header';
+import SubHeader from '../generic/sub-header/SubHeader';
+import HomeSidebar from './home-sidebar';
+import TabsSection from './tabs-section';
+import OrganizationSection from './organization-section';
+import VerifyEmailLayout from './verify-email-layout';
+import CreateNewCourseForm from './create-new-course-form';
+import messages from './messages';
+import { useStudioHome } from './hooks';
+import AlertMessage from '../generic/alert-message';
+
+const StudioHome = () => {
+  const intl = useIntl();
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  const isPaginationCoursesEnabled = getConfig().ENABLE_HOME_PAGE_COURSE_API_V2;
+  const {
+    isLoadingPage,
+    isFailedLoadingPage,
+    studioHomeData,
+    isShowProcessing,
+    anyQueryIsFailed,
+    isShowEmailStaff,
+    anyQueryIsPending,
+    showNewCourseContainer,
+    isShowOrganizationDropdown,
+    hasAbilityToCreateNewCourse,
+    isFiltered,
+    setShowNewCourseContainer,
+    librariesV1Enabled,
+    librariesV2Enabled,
+  } = useStudioHome();
+
+  const v1LibraryTab = librariesV1Enabled && location?.pathname.split('/').pop() === 'libraries-v1';
+  const showV2LibraryURL = librariesV2Enabled && !v1LibraryTab;
+
+  const {
+    userIsActive,
+    studioShortName,
+    studioRequestEmail,
+    showNewLibraryButton,
+    showNewLibraryV2Button,
+  } = studioHomeData;
+
+  const getHeaderButtons = useCallback(() => {
+    const headerButtons: JSX.Element[] = [];
+
+    if (isFailedLoadingPage || !userIsActive) {
+      return headerButtons;
+    }
+
+    if (isShowEmailStaff) {
+      headerButtons.push(
+        <MailtoLink to={studioRequestEmail}>{intl.formatMessage(messages.emailStaffBtnText)}</MailtoLink>,
+      );
+    }
+
+    if (hasAbilityToCreateNewCourse) {
+      headerButtons.push(
+        <Button
+          variant="outline-primary"
+          iconBefore={AddIcon}
+          size="sm"
+          disabled={showNewCourseContainer}
+          onClick={() => setShowNewCourseContainer(true)}
+        >
+          {intl.formatMessage(messages.addNewCourseBtnText)}
+        </Button>,
+      );
+    }
+
+    if ((showNewLibraryButton && !showV2LibraryURL) || (showV2LibraryURL && showNewLibraryV2Button)) {
+      const newLibraryClick = () => {
+        if (showV2LibraryURL) {
+          navigate('/library/create');
+        } else {
+          // Studio home library for legacy libraries
+          window.open(`${getConfig().STUDIO_BASE_URL}/home_library`);
+        }
+      };
+
+      headerButtons.push(
+        <Button
+          variant="outline-primary"
+          iconBefore={AddIcon}
+          size="sm"
+          onClick={newLibraryClick}
+          data-testid="new-library-button"
+        >
+          {intl.formatMessage(messages.addNewLibraryBtnText)}
+        </Button>,
+      );
+    }
+
+    return headerButtons;
+  }, [location, userIsActive, isFailedLoadingPage]);
+
+  const headerButtons = userIsActive ? getHeaderButtons() : [];
+  if (isLoadingPage && !isFiltered) {
+    return (<Loading />);
+  }
+
+  const getMainBody = () => {
+    if (isFailedLoadingPage) {
+      return (
+        <AlertMessage
+          variant="danger"
+          description={(
+            <Row className="m-0 align-items-center">
+              <Icon src={Error} className="text-danger-500 mr-1" />
+              <span>{intl.formatMessage(messages.homePageLoadFailedMessage)}</span>
+            </Row>
+          )}
+        />
+      );
+    }
+    if (!userIsActive) {
+      return <VerifyEmailLayout />;
+    }
+    return (
+      <Layout
+        lg={[{ span: 9 }, { span: 3 }]}
+        md={[{ span: 9 }, { span: 3 }]}
+        sm={[{ span: 9 }, { span: 3 }]}
+        xs={[{ span: 9 }, { span: 3 }]}
+        xl={[{ span: 9 }, { span: 3 }]}
+      >
+        <Layout.Element>
+          <section>
+            {showNewCourseContainer && (
+              <CreateNewCourseForm handleOnClickCancel={() => setShowNewCourseContainer(false)} />
+            )}
+            {isShowOrganizationDropdown && <OrganizationSection />}
+            <TabsSection
+              showNewCourseContainer={showNewCourseContainer}
+              onClickNewCourse={() => setShowNewCourseContainer(true)}
+              isShowProcessing={isShowProcessing && !isFiltered}
+              isPaginationCoursesEnabled={isPaginationCoursesEnabled}
+              librariesV1Enabled={librariesV1Enabled}
+              librariesV2Enabled={librariesV2Enabled}
+            />
+          </section>
+        </Layout.Element>
+        <Layout.Element>
+          <HomeSidebar />
+        </Layout.Element>
+      </Layout>
+    );
+  };
+
+  return (
+    <>
+      <Header isHiddenMainMenu />
+      <Container size="xl" className="p-4 mt-3">
+        <section className="mb-4">
+          <article className="studio-home-sub-header">
+            <section>
+              <SubHeader
+                title={intl.formatMessage(messages.headingTitle, { studioShortName: studioShortName || 'Studio' })}
+                headerActions={headerButtons}
+              />
+            </section>
+          </article>
+          {getMainBody()}
+        </section>
+      </Container>
+      <div className="alert-toast">
+        <InternetConnectionAlert
+          isFailed={anyQueryIsFailed}
+          isQueryPending={anyQueryIsPending}
+        />
+      </div>
+      <StudioFooter />
+    </>
+  );
+};
+
+export default StudioHome;
diff --git a/src/studio-home/__mocks__/index.js b/src/studio-home/__mocks__/index.js
new file mode 100644
index 0000000000..76d31279ac
--- /dev/null
+++ b/src/studio-home/__mocks__/index.js
@@ -0,0 +1 @@
+export { default as studioHomeMock } from './studioHomeMock';
diff --git a/src/studio-home/__mocks__/studioHomeMock.js b/src/studio-home/__mocks__/studioHomeMock.js
new file mode 100644
index 0000000000..dcd313c511
--- /dev/null
+++ b/src/studio-home/__mocks__/studioHomeMock.js
@@ -0,0 +1,79 @@
+module.exports = {
+  activeTab: 'courses',
+  allowCourseReruns: true,
+  allowedOrganizations: ['edx', 'org'],
+  archivedCourses: [
+    {
+      courseKey: 'course-v1:MachineLearning+123+2023',
+      displayName: 'Machine Learning',
+      lmsLink: '//localhost:18000/courses/course-v1:MachineLearning+123+2023/jump_to/block-v1:MachineLearning+123+2023+type@course+block@course',
+      number: '123',
+      org: 'LSE',
+      rerunLink: '/course_rerun/course-v1:MachineLearning+123+2023',
+      run: '2023',
+      url: '/course/course-v1:MachineLearning+123+2023',
+      cmsLink: '//localhost:18010/courses/course-v1:MachineLearning+123+2023',
+    },
+    {
+      courseKey: 'course-v1:Design+123+e.g.2025',
+      displayName: 'Design',
+      lmsLink: '//localhost:18000/courses/course-v1:Design+123+e.g.2025/jump_to/block-v1:Design+123+e.g.2025+type@course+block@course',
+      number: '123',
+      org: 'University of Cape Town',
+      rerunLink: '/course_rerun/course-v1:Design+123+e.g.2025',
+      run: 'e.g.2025',
+      url: '/course/course-v1:Design+123+e.g.2025',
+      cmsLink: '//localhost:18010/courses/course-v1:Design+123+e.g.2025',
+    },
+  ],
+  canCreateOrganizations: true,
+  courseCreatorStatus: 'granted',
+  courses: [
+    {
+      courseKey: 'course-v1:HarvardX+123+2023',
+      displayName: 'Managing Risk in the Information Age',
+      lmsLink: '//localhost:18000/courses/course-v1:HarvardX+123+2023/jump_to/block-v1:HarvardX+123+2023+type@course+block@course',
+      number: '123',
+      org: 'HarvardX',
+      rerunLink: '/course_rerun/course-v1:HarvardX+123+2023',
+      run: '2023',
+      url: '/course/course-v1:HarvardX+123+2023',
+    },
+    {
+      courseKey: 'org.0/course_0/Run_0',
+      displayName: 'Run 0',
+      lmsLink: null,
+      number: 'course_0',
+      org: 'org.0',
+      rerunLink: null,
+      run: 'Run_0',
+      url: '',
+    },
+  ],
+  inProcessCourseActions: [],
+  libraries: [
+    {
+      displayName: 'MBA',
+      libraryKey: 'library-v1:MBA+123',
+      url: '/library/library-v1:MDA+123',
+      org: 'Cambridge',
+      number: '123',
+      canEdit: true,
+    },
+  ],
+  librariesV1Enabled: true,
+  librariesV2Enabled: true,
+  optimizationEnabled: false,
+  requestCourseCreatorUrl: '/request_course_creator',
+  rerunCreatorStatus: true,
+  showNewLibraryButton: true,
+  showNewLibraryV2Button: true,
+  splitStudioHome: false,
+  studioName: 'Studio',
+  studioShortName: 'Studio',
+  studioRequestEmail: 'request@email.com',
+  techSupportEmail: 'technical@example.com',
+  platformName: 'Your Platform Name Here',
+  userIsActive: true,
+  allowToCreateNewOrg: false,
+};
diff --git a/src/studio-home/card-item/CardItem.test.tsx b/src/studio-home/card-item/CardItem.test.tsx
new file mode 100644
index 0000000000..986cb40997
--- /dev/null
+++ b/src/studio-home/card-item/CardItem.test.tsx
@@ -0,0 +1,89 @@
+import * as reactRedux from 'react-redux';
+import { getConfig } from '@edx/frontend-platform';
+
+import { studioHomeMock } from '../__mocks__';
+import messages from '../messages';
+import { trimSlashes } from './utils';
+import {
+  fireEvent,
+  initializeMocks,
+  render,
+  screen,
+} from '../../testUtils';
+import CardItem from '.';
+
+jest.spyOn(reactRedux, 'useSelector').mockImplementation(() => studioHomeMock);
+
+describe('<CardItem />', () => {
+  beforeEach(() => {
+    initializeMocks();
+  });
+  it('should render course details for non-library course', () => {
+    const props = studioHomeMock.archivedCourses[0];
+    render(<CardItem {...props} />);
+    expect(screen.getByText(`${props.org} / ${props.number} / ${props.run}`)).toBeInTheDocument();
+  });
+
+  it('should render correct links for non-library course', () => {
+    const props = studioHomeMock.archivedCourses[0];
+    render(<CardItem {...props} />);
+    const courseTitleLink = screen.getByText(props.displayName);
+    expect(courseTitleLink).toHaveAttribute('href', `${getConfig().STUDIO_BASE_URL}${props.url}`);
+    const btnReRunCourse = screen.getByText(messages.btnReRunText.defaultMessage);
+    expect(btnReRunCourse).toHaveAttribute('href', trimSlashes(props.rerunLink));
+    const viewLiveLink = screen.getByText(messages.viewLiveBtnText.defaultMessage);
+    expect(viewLiveLink).toHaveAttribute('href', props.lmsLink);
+  });
+
+  it('should render correct links for non-library course pagination', () => {
+    const props = studioHomeMock.archivedCourses[0];
+    render(<CardItem {...props} isPaginated />);
+    const courseTitleLink = screen.getByText(props.displayName);
+    expect(courseTitleLink).toHaveAttribute('href', `${getConfig().STUDIO_BASE_URL}${props.url}`);
+    const dropDownMenu = screen.getByTestId('toggle-dropdown');
+    fireEvent.click(dropDownMenu);
+    const btnReRunCourse = screen.getByText(messages.btnReRunText.defaultMessage);
+    expect(btnReRunCourse).toHaveAttribute('href', `/${trimSlashes(props.rerunLink)}`);
+    const viewLiveLink = screen.getByText(messages.viewLiveBtnText.defaultMessage);
+    expect(viewLiveLink).toHaveAttribute('href', props.lmsLink);
+  });
+  it('should render course details for library course', () => {
+    const props = { ...studioHomeMock.archivedCourses[0], isLibraries: true };
+    render(<CardItem {...props} />);
+    const courseTitleLink = screen.getByText(props.displayName);
+    expect(courseTitleLink).toHaveAttribute('href', `${getConfig().STUDIO_BASE_URL}${props.url}`);
+    expect(screen.getByText(`${props.org} / ${props.number}`)).toBeInTheDocument();
+  });
+  it('should hide rerun button if disallowed', () => {
+    const props = studioHomeMock.archivedCourses[0];
+    // Update our mocked redux data:
+    jest.spyOn(reactRedux, 'useSelector').mockImplementation(() => (
+      { ...studioHomeMock, allowCourseReruns: false }
+    ));
+    const { queryByText } = render(<CardItem {...props} />);
+    expect(queryByText(messages.btnReRunText.defaultMessage)).not.toBeInTheDocument();
+  });
+  it('should be read only course if old mongo course', () => {
+    const props = studioHomeMock.courses[1];
+    render(<CardItem {...props} />);
+    expect(screen.queryByText(props.displayName)).not.toHaveAttribute('href');
+    expect(screen.queryByText(messages.btnReRunText.defaultMessage)).not.toBeInTheDocument();
+    expect(screen.queryByText(messages.viewLiveBtnText.defaultMessage)).not.toBeInTheDocument();
+  });
+
+  it('should render course key if displayname is empty', () => {
+    const props = studioHomeMock.courses[1];
+    const courseKeyTest = 'course-key';
+    render(
+      <CardItem
+        {...props}
+        displayName=""
+        courseKey={courseKeyTest}
+        lmsLink="lmsLink"
+        rerunLink="returnLink"
+        url="url"
+      />,
+    );
+    expect(screen.getByText(courseKeyTest)).toBeInTheDocument();
+  });
+});
diff --git a/src/studio-home/card-item/index.tsx b/src/studio-home/card-item/index.tsx
new file mode 100644
index 0000000000..420ae442db
--- /dev/null
+++ b/src/studio-home/card-item/index.tsx
@@ -0,0 +1,143 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import {
+  Card,
+  Hyperlink,
+  Dropdown,
+  IconButton,
+  ActionRow,
+} from '@openedx/paragon';
+import { MoreHoriz } from '@openedx/paragon/icons';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { getConfig } from '@edx/frontend-platform';
+import { Link } from 'react-router-dom';
+
+import { getWaffleFlags } from '../../data/selectors';
+import { COURSE_CREATOR_STATES } from '../../constants';
+import { getStudioHomeData } from '../data/selectors';
+import messages from '../messages';
+import { trimSlashes } from './utils';
+
+interface BaseProps {
+  displayName: string;
+  org: string;
+  number: string;
+  run?: string;
+  lmsLink?: string | null;
+  rerunLink?: string | null;
+  courseKey?: string;
+  isLibraries?: boolean;
+  isPaginated?: boolean;
+}
+type Props = BaseProps & (
+  /** If we should open this course/library in this MFE, this is the path to the edit page, e.g. '/course/foo' */
+  { path: string, url?: never } |
+  /**
+   * If we might be redirecting to the legacy Studio view, this is the URL to redirect to.
+   * URLs starting with '/' are assumed to be relative to the legacy Studio root.
+   */
+  { url: string, path?: never }
+);
+
+/**
+ * A card on the Studio home page that represents a Course or a Library
+ */
+const CardItem: React.FC<Props> = ({
+  displayName,
+  lmsLink = '',
+  rerunLink = '',
+  org,
+  number,
+  run = '',
+  isLibraries = false,
+  courseKey = '',
+  isPaginated = false,
+  path,
+  url,
+}) => {
+  const intl = useIntl();
+  const {
+    allowCourseReruns,
+    courseCreatorStatus,
+    rerunCreatorStatus,
+  } = useSelector(getStudioHomeData);
+  const waffleFlags = useSelector(getWaffleFlags);
+
+  const destinationUrl: string = path ?? (
+    waffleFlags.useNewCourseOutlinePage && !isLibraries
+      ? url
+      : new URL(url, getConfig().STUDIO_BASE_URL).toString()
+  );
+  const subtitle = isLibraries ? `${org} / ${number}` : `${org} / ${number} / ${run}`;
+  const readOnlyItem = !(lmsLink || rerunLink || url || path);
+  const showActions = !(readOnlyItem || isLibraries);
+  const isShowRerunLink = allowCourseReruns
+    && rerunCreatorStatus
+    && courseCreatorStatus === COURSE_CREATOR_STATES.granted;
+  const hasDisplayName = (displayName ?? '').trim().length ? displayName : courseKey;
+
+  return (
+    <Card className="card-item">
+      <Card.Header
+        size="sm"
+        title={!readOnlyItem ? (
+          <Link
+            className="card-item-title"
+            to={destinationUrl}
+          >
+            {hasDisplayName}
+          </Link>
+        ) : (
+          <span className="card-item-title">{displayName}</span>
+        )}
+        subtitle={subtitle}
+        actions={showActions && (
+          isPaginated ? (
+            <Dropdown>
+              <Dropdown.Toggle
+                as={IconButton}
+                iconAs={MoreHoriz}
+                variant="primary"
+                data-testid="toggle-dropdown"
+              />
+              <Dropdown.Menu>
+                {isShowRerunLink && (
+                  <Dropdown.Item
+                    as={Link}
+                    to={rerunLink ?? ''}
+                  >
+                    {messages.btnReRunText.defaultMessage}
+                  </Dropdown.Item>
+                )}
+                <Dropdown.Item href={lmsLink}>
+                  {intl.formatMessage(messages.viewLiveBtnText)}
+                </Dropdown.Item>
+              </Dropdown.Menu>
+            </Dropdown>
+          ) : (
+            <ActionRow>
+              {isShowRerunLink && (
+                <Hyperlink
+                  className="small"
+                  destination={trimSlashes(rerunLink ?? '')}
+                  key={`action-row-rerunLink-${courseKey}`}
+                >
+                  {intl.formatMessage(messages.btnReRunText)}
+                </Hyperlink>
+              )}
+              <Hyperlink
+                className="small ml-3"
+                destination={lmsLink ?? ''}
+                key={`action-row-lmsLink-${courseKey}`}
+              >
+                {intl.formatMessage(messages.viewLiveBtnText)}
+              </Hyperlink>
+            </ActionRow>
+          )
+        )}
+      />
+    </Card>
+  );
+};
+
+export default CardItem;
diff --git a/src/studio-home/card-item/utils.ts b/src/studio-home/card-item/utils.ts
new file mode 100644
index 0000000000..3d22d82dd1
--- /dev/null
+++ b/src/studio-home/card-item/utils.ts
@@ -0,0 +1,6 @@
+/**
+ * Removes leading and trailing slashes from a string.
+ * @param {string} str - The string to trim.
+ * @returns {string} The trimmed string.
+ */
+export const trimSlashes = (str: string): string => str.replace(/^\/|\/$/g, '');
diff --git a/src/studio-home/collapsible-state-with-action/CollapsibleStateWithAction.test.jsx b/src/studio-home/collapsible-state-with-action/CollapsibleStateWithAction.test.jsx
new file mode 100644
index 0000000000..96cc477bc6
--- /dev/null
+++ b/src/studio-home/collapsible-state-with-action/CollapsibleStateWithAction.test.jsx
@@ -0,0 +1,101 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import {
+  render, fireEvent, waitFor, act,
+} from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { initializeMockApp } from '@edx/frontend-platform';
+import { AppProvider } from '@edx/frontend-platform/react';
+import MockAdapter from 'axios-mock-adapter';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+
+import { COURSE_CREATOR_STATES } from '../../constants';
+import initializeStore from '../../store';
+import { executeThunk } from '../../utils';
+import { requestCourseCreatorQuery } from '../data/thunks';
+import { getRequestCourseCreatorUrl } from '../data/api';
+import { studioHomeMock } from '../__mocks__';
+import messages from './messages';
+import CollapsibleStateWithAction from '.';
+
+jest.mock('react-redux', () => ({
+  ...jest.requireActual('react-redux'),
+  useSelector: jest.fn(),
+}));
+
+let store; let
+  axiosMock;
+
+const {
+  studioName,
+  studioShortName,
+} = studioHomeMock;
+
+const RootWrapper = (props) => (
+  <AppProvider store={store}>
+    <IntlProvider locale="en" messages={{}}>
+      <CollapsibleStateWithAction {...props} />
+    </IntlProvider>
+  </AppProvider>
+);
+
+const props = {
+  state: COURSE_CREATOR_STATES.unrequested,
+};
+
+describe('<CollapsibleStateWithAction />', () => {
+  beforeEach(async () => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+    store = initializeStore();
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+    axiosMock.onPost(getRequestCourseCreatorUrl()).reply(200, studioHomeMock);
+    await executeThunk(requestCourseCreatorQuery(), store.dispatch);
+  });
+
+  it('renders collapsible unrequested state successfully closed', () => {
+    useSelector.mockReturnValue(studioHomeMock);
+
+    const { getByText, queryByText } = render(<RootWrapper {...props} />);
+    expect(getByText(`Becoming a course creator in ${studioShortName}`)).toBeInTheDocument();
+    expect(queryByText(`${studioName} is a hosted solution for our xConsortium partners and selected guests.`)).not.toBeInTheDocument();
+  });
+
+  it('renders collapsible pending state successfully closed', () => {
+    useSelector.mockReturnValue(studioHomeMock);
+
+    const initialState = { ...props, state: COURSE_CREATOR_STATES.pending };
+    const { getByText } = render(<RootWrapper {...initialState} />);
+    expect(getByText(messages.pendingCollapsibleTitle.defaultMessage)).toBeInTheDocument();
+  });
+
+  it('renders collapsible denied state successfully closed', () => {
+    useSelector.mockReturnValue(studioHomeMock);
+
+    const initialState = { ...props, state: COURSE_CREATOR_STATES.denied };
+    const { getByText } = render(<RootWrapper {...initialState} />);
+    expect(getByText(messages.deniedCollapsibleTitle.defaultMessage)).toBeInTheDocument();
+  });
+
+  it('renders collapsible denied state successfully opened', () => {
+    useSelector.mockReturnValue(studioHomeMock);
+
+    const initialState = { ...props, state: COURSE_CREATOR_STATES.denied };
+    const { getByText } = render(<RootWrapper {...initialState} />);
+    const container = getByText(messages.deniedCollapsibleTitle.defaultMessage);
+
+    fireEvent.click(container);
+    act(async () => {
+      await waitFor(() => {
+        expect(getByText(messages.deniedCollapsibleState.defaultMessage)).toBeInTheDocument();
+        expect(getByText(messages.deniedCollapsibleActionTitle.defaultMessage)).toBeInTheDocument();
+      });
+    });
+  });
+});
diff --git a/src/studio-home/collapsible-state-with-action/index.jsx b/src/studio-home/collapsible-state-with-action/index.jsx
new file mode 100644
index 0000000000..ee99398a8e
--- /dev/null
+++ b/src/studio-home/collapsible-state-with-action/index.jsx
@@ -0,0 +1,163 @@
+import React from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import {
+  Collapsible,
+  Bubble,
+  Icon,
+  StatefulButton,
+} from '@openedx/paragon';
+import {
+  Add as AddIcon,
+  Minus as MinusIcon,
+} from '@openedx/paragon/icons/es5';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import { RequestStatus } from '../../data/constants';
+import { COURSE_CREATOR_STATES, STATEFUL_BUTTON_STATES } from '../../constants';
+import { getStudioHomeData, getSavingStatuses } from '../data/selectors';
+import { requestCourseCreatorQuery } from '../data/thunks';
+import messages from './messages';
+
+const CollapsibleStateWithAction = ({ state, className }) => {
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const {
+    platformName,
+    studioName,
+    studioShortName,
+  } = useSelector(getStudioHomeData);
+  const { courseCreatorSavingStatus } = useSelector(getSavingStatuses);
+
+  const requestButtonStates = {
+    labels: {
+      default: intl.formatMessage(messages.unrequestedCollapsibleDefaultButton),
+      pending: intl.formatMessage(messages.unrequestedCollapsiblePendingButton),
+      error: intl.formatMessage(messages.unrequestedCollapsibleFailedButton),
+    },
+    disabledStates: [STATEFUL_BUTTON_STATES.pending, STATEFUL_BUTTON_STATES.error],
+  };
+
+  const statusButtonMap = {
+    [RequestStatus.PENDING]: STATEFUL_BUTTON_STATES.pending,
+    [RequestStatus.FAILED]: STATEFUL_BUTTON_STATES.error,
+  };
+
+  const requestButtonCurrentState = statusButtonMap[courseCreatorSavingStatus] || STATEFUL_BUTTON_STATES.default;
+
+  function getTextForStatus() {
+    const matchTextAction = {
+      [COURSE_CREATOR_STATES.denied]: {
+        title: intl.formatMessage(messages.deniedCollapsibleTitle),
+        description: intl.formatMessage(messages.deniedCollapsibleDescription, {
+          studioName,
+          platformName,
+        }),
+        stateName: intl.formatMessage(messages.deniedCollapsibleState),
+        actionTitle: intl.formatMessage(messages.deniedCollapsibleActionTitle),
+        actionText: intl.formatMessage(messages.deniedCollapsibleActionText, {
+          platformName,
+        }),
+      },
+      [COURSE_CREATOR_STATES.unrequested]: {
+        title: intl.formatMessage(messages.unrequestedCollapsibleTitle, {
+          studioShortName,
+        }),
+        description: intl.formatMessage(
+          messages.unrequestedCollapsibleDescription,
+          { studioName, platformName },
+        ),
+      },
+      [COURSE_CREATOR_STATES.pending]: {
+        title: intl.formatMessage(messages.pendingCollapsibleTitle),
+        description: intl.formatMessage(
+          messages.pendingCollapsibleDescription,
+          { studioName, platformName },
+        ),
+        stateName: intl.formatMessage(messages.pendingCollapsibleState),
+        actionTitle: intl.formatMessage(messages.pendingCollapsibleActionTitle),
+        actionText: intl.formatMessage(messages.pendingCollapsibleActionText, {
+          platformName,
+        }),
+      },
+    };
+
+    return matchTextAction[state];
+  }
+
+  const {
+    title,
+    stateName,
+    actionText,
+    description,
+    actionTitle,
+  } = getTextForStatus();
+
+  return (
+    <Collapsible.Advanced
+      className={classNames('collapsible-card rounded-sm', className)}
+      defaultOpen={[COURSE_CREATOR_STATES.denied, COURSE_CREATOR_STATES.pending].includes(state)}
+      data-testid="collapsible-state-with-action"
+    >
+      <Collapsible.Trigger className="collapsible-trigger d-flex py-2.5 px-3.5 bg-gray-700">
+        <span className="flex-grow-1 text-white small">{title}</span>
+        <Collapsible.Visible whenClosed>
+          <Bubble className="bg-light-700">
+            <Icon
+              src={AddIcon}
+              className="text-gray-700"
+              size="xs"
+            />
+          </Bubble>
+        </Collapsible.Visible>
+        <Collapsible.Visible whenOpen>
+          <Bubble className="bg-light-700">
+            <Icon
+              src={MinusIcon}
+              className="text-gray-700"
+              size="xs"
+            />
+          </Bubble>
+        </Collapsible.Visible>
+      </Collapsible.Trigger>
+
+      <Collapsible.Body className="collapsible-body bg-light-white py-3 px-3.5">
+        <p className="small text-gray-700">{description}</p>
+        <h5 className="text-gray-700">{actionTitle}</h5>
+        {[COURSE_CREATOR_STATES.denied, COURSE_CREATOR_STATES.pending].includes(state) ? (
+          <div
+            className={classNames('py-1 px-2.5 rounded-sm', {
+              'bg-danger-100': state === COURSE_CREATOR_STATES.denied,
+              'bg-warning-100': state === COURSE_CREATOR_STATES.pending,
+            })}
+          >
+            <span className="d-inline-block text-black font-weight-bold m-2.5">
+              {stateName}
+            </span>
+            <span className="text-gray-700 small">{actionText}</span>
+          </div>
+        ) : (
+          <StatefulButton
+            key="request-button"
+            size="sm"
+            onClick={() => dispatch(requestCourseCreatorQuery())}
+            state={requestButtonCurrentState}
+            {...requestButtonStates}
+          />
+        )}
+      </Collapsible.Body>
+    </Collapsible.Advanced>
+  );
+};
+
+CollapsibleStateWithAction.defaultProps = {
+  className: undefined,
+};
+
+CollapsibleStateWithAction.propTypes = {
+  state: PropTypes.oneOf(Object.values(COURSE_CREATOR_STATES)).isRequired,
+  className: PropTypes.string,
+};
+
+export default CollapsibleStateWithAction;
diff --git a/src/studio-home/collapsible-state-with-action/messages.js b/src/studio-home/collapsible-state-with-action/messages.js
new file mode 100644
index 0000000000..7dff14be44
--- /dev/null
+++ b/src/studio-home/collapsible-state-with-action/messages.js
@@ -0,0 +1,66 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  deniedCollapsibleTitle: {
+    id: 'course-authoring.studio-home.collapsible.denied.title',
+    defaultMessage: 'Your course creator request status',
+  },
+  deniedCollapsibleDescription: {
+    id: 'course-authoring.studio-home.collapsible.denied.description',
+    defaultMessage: '{studioName} is a hosted solution for our xConsortium partners and selected guests. Courses for which you are a team member appear above for you to edit, while course creator privileges are granted by {platformName}. Our team has completed evaluating your request.',
+  },
+  deniedCollapsibleActionTitle: {
+    id: 'course-authoring.studio-home.collapsible.denied.action.title',
+    defaultMessage: 'Your course creator request status:',
+  },
+  deniedCollapsibleState: {
+    id: 'course-authoring.studio-home.collapsible.denied.state',
+    defaultMessage: 'Denied',
+  },
+  deniedCollapsibleActionText: {
+    id: 'course-authoring.studio-home.collapsible.denied.action.text',
+    defaultMessage: 'Your request did not meet the criteria/guidelines specified by {platformName} Staff.',
+  },
+  pendingCollapsibleTitle: {
+    id: 'course-authoring.studio-home.collapsible.pending.title',
+    defaultMessage: 'Your course creator request status',
+  },
+  pendingCollapsibleDescription: {
+    id: 'course-authoring.studio-home.collapsible.pending.description',
+    defaultMessage: '{studioName} is a hosted solution for our xConsortium partners and selected guests. Courses for which you are a team member appear above for you to edit, while course creator privileges are granted by {platformName}. Our team is currently evaluating your request.',
+  },
+  pendingCollapsibleActionTitle: {
+    id: 'course-authoring.studio-home.collapsible.pending.action.title',
+    defaultMessage: 'Your course creator request status:',
+  },
+  pendingCollapsibleState: {
+    id: 'course-authoring.studio-home.collapsible.pending.state',
+    defaultMessage: 'Pending',
+  },
+  pendingCollapsibleActionText: {
+    id: 'course-authoring.studio-home.collapsible.pending.action.text',
+    defaultMessage: 'Your request is currently being reviewed by {platformName} staff and should be updated shortly.',
+  },
+  unrequestedCollapsibleTitle: {
+    id: 'course-authoring.studio-home.collapsible.unrequested.title',
+    defaultMessage: 'Becoming a course creator in {studioShortName}',
+  },
+  unrequestedCollapsibleDescription: {
+    id: 'course-authoring.studio-home.collapsible.unrequested.description',
+    defaultMessage: '{studioName} is a hosted solution for our xConsortium partners and selected guests. Courses for which you are a team member appear above for you to edit, while course creator privileges are granted by {platformName}. Our team will evaluate your request and provide you feedback within 24 hours during the work week.',
+  },
+  unrequestedCollapsibleDefaultButton: {
+    id: 'course-authoring.studio-home.collapsible.unrequested.button.default',
+    defaultMessage: 'Request the ability to create courses',
+  },
+  unrequestedCollapsiblePendingButton: {
+    id: 'course-authoring.studio-home.collapsible.unrequested.button.pending',
+    defaultMessage: 'Submitting your request',
+  },
+  unrequestedCollapsibleFailedButton: {
+    id: 'course-authoring.studio-home.collapsible.unrequested.button.failed',
+    defaultMessage: 'Sorry, there was error with your request',
+  },
+});
+
+export default messages;
diff --git a/src/studio-home/create-new-course-form/CourseNewCourseForm.test.jsx b/src/studio-home/create-new-course-form/CourseNewCourseForm.test.jsx
new file mode 100644
index 0000000000..26105c39ab
--- /dev/null
+++ b/src/studio-home/create-new-course-form/CourseNewCourseForm.test.jsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { render } from '@testing-library/react';
+import { initializeMockApp } from '@edx/frontend-platform';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { AppProvider } from '@edx/frontend-platform/react';
+
+import { studioHomeMock } from '../__mocks__';
+import initializeStore from '../../store';
+import messages from './messages';
+import CourseNewCourseForm from '.';
+
+jest.mock('react-redux', () => ({
+  ...jest.requireActual('react-redux'),
+  useSelector: jest.fn(),
+}));
+
+let store;
+
+const onClickCancelMock = jest.fn();
+
+const RootWrapper = (props) => (
+  <IntlProvider locale="en">
+    <AppProvider store={store}>
+      <CourseNewCourseForm {...props} />
+    </AppProvider>
+  </IntlProvider>
+);
+
+const props = {
+  onClickCancel: onClickCancelMock,
+};
+
+describe('<CourseNewCourseForm />', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+
+    store = initializeStore();
+    useSelector.mockReturnValue(studioHomeMock);
+  });
+
+  it('renders form successfully', () => {
+    const { getByText } = render(
+      <RootWrapper {...props} />,
+    );
+    expect(getByText(messages.createNewCourse.defaultMessage)).toBeInTheDocument();
+  });
+});
diff --git a/src/studio-home/create-new-course-form/index.jsx b/src/studio-home/create-new-course-form/index.jsx
new file mode 100644
index 0000000000..b4c80f15cf
--- /dev/null
+++ b/src/studio-home/create-new-course-form/index.jsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import { CreateOrRerunCourseForm } from '../../generic/create-or-rerun-course';
+import messages from './messages';
+
+const CreateNewCourseForm = ({ handleOnClickCancel }) => {
+  const intl = useIntl();
+  const initialNewCourseData = {
+    displayName: '',
+    org: '',
+    number: '',
+    run: '',
+  };
+
+  return (
+    <div className="mb-4.5" data-testid="create-course-form">
+      <CreateOrRerunCourseForm
+        title={intl.formatMessage(messages.createNewCourse)}
+        initialValues={initialNewCourseData}
+        onClickCancel={handleOnClickCancel}
+        isCreateNewCourse
+      />
+    </div>
+  );
+};
+
+CreateNewCourseForm.propTypes = {
+  handleOnClickCancel: PropTypes.func.isRequired,
+};
+
+export default CreateNewCourseForm;
diff --git a/src/studio-home/create-new-course-form/messages.js b/src/studio-home/create-new-course-form/messages.js
new file mode 100644
index 0000000000..41e2322eeb
--- /dev/null
+++ b/src/studio-home/create-new-course-form/messages.js
@@ -0,0 +1,10 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  createNewCourse: {
+    id: 'course-authoring.studio-home.new-course.title',
+    defaultMessage: 'Create a new course',
+  },
+});
+
+export default messages;
diff --git a/src/studio-home/data/api.js b/src/studio-home/data/api.js
new file mode 100644
index 0000000000..b70af23ddb
--- /dev/null
+++ b/src/studio-home/data/api.js
@@ -0,0 +1,61 @@
+// @ts-check
+import { camelCaseObject, snakeCaseObject, getConfig } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+
+export const getApiBaseUrl = () => getConfig().STUDIO_BASE_URL;
+export const getStudioHomeApiUrl = () => new URL('api/contentstore/v1/home', getApiBaseUrl()).href;
+export const getRequestCourseCreatorUrl = () => new URL('request_course_creator', getApiBaseUrl()).href;
+export const getCourseNotificationUrl = (url) => new URL(url, getApiBaseUrl()).href;
+
+/**
+ * Get's studio home data.
+ * @returns {Promise<Object>}
+ */
+export async function getStudioHomeData() {
+  const { data } = await getAuthenticatedHttpClient().get(getStudioHomeApiUrl());
+  return camelCaseObject(data);
+}
+
+/** Get list of courses from the deprecated non-paginated API */
+export async function getStudioHomeCourses(search) {
+  const { data } = await getAuthenticatedHttpClient().get(`${getApiBaseUrl()}/api/contentstore/v1/home/courses${search}`);
+  return camelCaseObject(data);
+}
+/**
+ * Get's studio home courses.
+ * @param {string} search - Query string parameters for filtering the courses.
+ * @param {object} customParams - Additional custom parameters for the API request.
+ * @returns {Promise<Object>} - A Promise that resolves to the response data containing the studio home courses.
+ * Note: We are changing /api/contentstore/v1 to /api/contentstore/v2 due to upcoming breaking changes.
+ * Features such as pagination, filtering, and ordering are better handled in the new version.
+ * Please refer to this PR for further details: https://github.com/openedx/edx-platform/pull/34173
+ */
+export async function getStudioHomeCoursesV2(search, customParams) {
+  const customParamsFormat = snakeCaseObject(customParams);
+  const { data } = await getAuthenticatedHttpClient().get(`${getApiBaseUrl()}/api/contentstore/v2/home/courses${search}`, { params: customParamsFormat });
+  return camelCaseObject(data);
+}
+
+export async function getStudioHomeLibraries() {
+  const { data } = await getAuthenticatedHttpClient().get(`${getApiBaseUrl()}/api/contentstore/v1/home/libraries`);
+  return camelCaseObject(data);
+}
+
+/**
+ * Handle course notification requests.
+ * @param {string} url
+ * @returns {Promise<Object>}
+*/
+export async function handleCourseNotification(url) {
+  const { data } = await getAuthenticatedHttpClient().delete(getCourseNotificationUrl(url));
+  return camelCaseObject(data);
+}
+
+/**
+ * Send user request to course creation access for studio home data.
+ * @returns {Promise<Object>}
+ */
+export async function sendRequestForCourseCreator() {
+  const { data } = await getAuthenticatedHttpClient().post(getRequestCourseCreatorUrl());
+  return camelCaseObject(data);
+}
diff --git a/src/studio-home/data/api.test.js b/src/studio-home/data/api.test.js
new file mode 100644
index 0000000000..329d05b3b2
--- /dev/null
+++ b/src/studio-home/data/api.test.js
@@ -0,0 +1,99 @@
+import MockAdapter from 'axios-mock-adapter';
+import { initializeMockApp } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+
+import {
+  getStudioHomeApiUrl,
+  getRequestCourseCreatorUrl,
+  getCourseNotificationUrl,
+  getStudioHomeData,
+  handleCourseNotification,
+  sendRequestForCourseCreator,
+  getApiBaseUrl,
+  getStudioHomeCourses,
+  getStudioHomeCoursesV2,
+  getStudioHomeLibraries,
+} from './api';
+import {
+  generateGetStudioCoursesApiResponse,
+  generateGetStudioHomeDataApiResponse,
+  generateGetStudioHomeLibrariesApiResponse,
+} from '../factories/mockApiResponses';
+
+let axiosMock;
+
+describe('studio-home api calls', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should get studio home data', async () => {
+    axiosMock.onGet(getStudioHomeApiUrl()).reply(200, generateGetStudioHomeDataApiResponse());
+    const result = await getStudioHomeData();
+    const expected = generateGetStudioHomeDataApiResponse();
+
+    expect(axiosMock.history.get[0].url).toEqual(getStudioHomeApiUrl());
+    expect(result).toEqual(expected);
+  });
+
+  it('should get studio courses data', async () => {
+    const apiLink = `${getApiBaseUrl()}/api/contentstore/v1/home/courses`;
+    axiosMock.onGet(apiLink).reply(200, generateGetStudioCoursesApiResponse());
+    const result = await getStudioHomeCourses('');
+    const expected = generateGetStudioCoursesApiResponse();
+
+    expect(axiosMock.history.get[0].url).toEqual(apiLink);
+    expect(result).toEqual(expected);
+  });
+
+  it('should get studio courses data v2', async () => {
+    const apiLink = `${getApiBaseUrl()}/api/contentstore/v2/home/courses`;
+    axiosMock.onGet(apiLink).reply(200, generateGetStudioCoursesApiResponse());
+    const result = await getStudioHomeCoursesV2('');
+    const expected = generateGetStudioCoursesApiResponse();
+
+    expect(axiosMock.history.get[0].url).toEqual(apiLink);
+    expect(result).toEqual(expected);
+  });
+
+  it('should get studio v1 libraries data', async () => {
+    const apiLink = `${getApiBaseUrl()}/api/contentstore/v1/home/libraries`;
+    axiosMock.onGet(apiLink).reply(200, generateGetStudioHomeLibrariesApiResponse());
+    const result = await getStudioHomeLibraries();
+    const expected = generateGetStudioHomeLibrariesApiResponse();
+
+    expect(axiosMock.history.get[0].url).toEqual(apiLink);
+    expect(result).toEqual(expected);
+  });
+
+  it('should handle course notification request', async () => {
+    const dismissLink = 'to://dismiss-link';
+    const successResponse = { status: 'OK' };
+    axiosMock.onDelete(getCourseNotificationUrl(dismissLink)).reply(200, successResponse);
+    const result = await handleCourseNotification(dismissLink);
+
+    expect(axiosMock.history.delete[0].url).toEqual(getCourseNotificationUrl(dismissLink));
+    expect(result).toEqual(successResponse);
+  });
+
+  it('should send request to course creating access', async () => {
+    const successResponse = { status: 'OK' };
+    axiosMock.onPost(getRequestCourseCreatorUrl()).reply(200, successResponse);
+    const result = await sendRequestForCourseCreator();
+
+    expect(axiosMock.history.post[0].url).toEqual(getRequestCourseCreatorUrl());
+    expect(result).toEqual(successResponse);
+  });
+});
diff --git a/src/studio-home/data/selectors.js b/src/studio-home/data/selectors.js
new file mode 100644
index 0000000000..186673edae
--- /dev/null
+++ b/src/studio-home/data/selectors.js
@@ -0,0 +1,4 @@
+export const getStudioHomeData = state => state.studioHome.studioHomeData;
+export const getLoadingStatuses = (state) => state.studioHome.loadingStatuses;
+export const getSavingStatuses = (state) => state.studioHome.savingStatuses;
+export const getStudioHomeCoursesParams = (state) => state.studioHome.studioHomeCoursesRequestParams;
diff --git a/src/studio-home/data/slice.js b/src/studio-home/data/slice.js
new file mode 100644
index 0000000000..89ee211c0f
--- /dev/null
+++ b/src/studio-home/data/slice.js
@@ -0,0 +1,77 @@
+/* eslint-disable no-param-reassign */
+import { createSlice } from '@reduxjs/toolkit';
+
+import { RequestStatus } from '../../data/constants';
+
+const slice = createSlice({
+  name: 'studioHome',
+  initialState: {
+    loadingStatuses: {
+      studioHomeLoadingStatus: RequestStatus.IN_PROGRESS,
+      courseNotificationLoadingStatus: RequestStatus.IN_PROGRESS,
+      courseLoadingStatus: RequestStatus.IN_PROGRESS,
+      libraryLoadingStatus: RequestStatus.IN_PROGRESS,
+    },
+    savingStatuses: {
+      courseCreatorSavingStatus: '',
+      deleteNotificationSavingStatus: '',
+    },
+    studioHomeData: {},
+    studioHomeCoursesRequestParams: {
+      currentPage: 1,
+      search: undefined,
+      order: 'display_name',
+      archivedOnly: undefined,
+      activeOnly: undefined,
+      isFiltered: false,
+      cleanFilters: false,
+    },
+  },
+  reducers: {
+    updateLoadingStatuses: (state, { payload }) => {
+      state.loadingStatuses = { ...state.loadingStatuses, ...payload };
+    },
+    updateSavingStatuses: (state, { payload }) => {
+      state.savingStatuses = { ...state.savingStatuses, ...payload };
+    },
+    fetchStudioHomeDataSuccess: (state, { payload }) => {
+      Object.assign(state.studioHomeData, payload);
+    },
+    fetchCourseDataSuccess: (state, { payload }) => {
+      const { courses, archivedCourses, inProcessCourseActions } = payload;
+      state.studioHomeData.courses = courses;
+      state.studioHomeData.archivedCourses = archivedCourses;
+      state.studioHomeData.inProcessCourseActions = inProcessCourseActions;
+    },
+    fetchCourseDataSuccessV2: (state, { payload }) => {
+      const { courses, archivedCourses = [], inProcessCourseActions } = payload.results;
+      const { numPages, count } = payload;
+      state.studioHomeData.courses = courses;
+      state.studioHomeData.archivedCourses = archivedCourses;
+      state.studioHomeData.inProcessCourseActions = inProcessCourseActions;
+      state.studioHomeData.numPages = numPages;
+      state.studioHomeData.coursesCount = count;
+    },
+    fetchLibraryDataSuccess: (state, { payload }) => {
+      const { libraries } = payload;
+      state.studioHomeData.libraries = libraries;
+    },
+    updateStudioHomeCoursesCustomParams: (state, { payload }) => {
+      Object.assign(state.studioHomeCoursesRequestParams, payload);
+    },
+  },
+});
+
+export const {
+  updateSavingStatuses,
+  updateLoadingStatuses,
+  fetchStudioHomeDataSuccess,
+  fetchCourseDataSuccess,
+  fetchCourseDataSuccessV2,
+  fetchLibraryDataSuccess,
+  updateStudioHomeCoursesCustomParams,
+} = slice.actions;
+
+export const {
+  reducer,
+} = slice;
diff --git a/src/studio-home/data/slice.test.js b/src/studio-home/data/slice.test.js
new file mode 100644
index 0000000000..7340e56793
--- /dev/null
+++ b/src/studio-home/data/slice.test.js
@@ -0,0 +1,61 @@
+import { reducer, updateStudioHomeCoursesCustomParams } from './slice';
+
+import { RequestStatus } from '../../data/constants';
+
+describe('updateStudioHomeCoursesCustomParams action', () => {
+  const initialState = {
+    loadingStatuses: {
+      studioHomeLoadingStatus: RequestStatus.IN_PROGRESS,
+      courseNotificationLoadingStatus: RequestStatus.IN_PROGRESS,
+      courseLoadingStatus: RequestStatus.IN_PROGRESS,
+      libraryLoadingStatus: RequestStatus.IN_PROGRESS,
+    },
+    savingStatuses: {
+      courseCreatorSavingStatus: '',
+      deleteNotificationSavingStatus: '',
+    },
+    studioHomeData: {},
+    studioHomeCoursesRequestParams: {
+      currentPage: 1,
+      search: undefined,
+      order: 'display_name',
+      archivedOnly: undefined,
+      activeOnly: undefined,
+      isFiltered: false,
+      cleanFilters: false,
+    },
+  };
+
+  it('should return the initial state', () => {
+    const result = reducer(undefined, { type: undefined });
+    expect(result).toEqual(initialState);
+  });
+
+  it('should update the payload passed in studioHomeCoursesRequestParams', () => {
+    const newState = {
+      ...initialState,
+      studioHomeCoursesRequestParams: {
+        currentPage: 2,
+        search: 'test',
+        order: 'display_name',
+        archivedOnly: true,
+        activeOnly: true,
+        isFiltered: true,
+        cleanFilters: true,
+      },
+    };
+
+    const payload = {
+      currentPage: 2,
+      search: 'test',
+      order: 'display_name',
+      archivedOnly: true,
+      activeOnly: true,
+      isFiltered: true,
+      cleanFilters: true,
+    };
+
+    const result = reducer(initialState, updateStudioHomeCoursesCustomParams(payload));
+    expect(result).toEqual(newState);
+  });
+});
diff --git a/src/studio-home/data/thunks.js b/src/studio-home/data/thunks.js
new file mode 100644
index 0000000000..495a726aaf
--- /dev/null
+++ b/src/studio-home/data/thunks.js
@@ -0,0 +1,97 @@
+import { RequestStatus } from '../../data/constants';
+import {
+  getStudioHomeData,
+  sendRequestForCourseCreator,
+  handleCourseNotification,
+  getStudioHomeCourses,
+  getStudioHomeLibraries,
+  getStudioHomeCoursesV2,
+} from './api';
+import {
+  fetchStudioHomeDataSuccess,
+  fetchCourseDataSuccess,
+  updateLoadingStatuses,
+  updateSavingStatuses,
+  fetchLibraryDataSuccess,
+  fetchCourseDataSuccessV2,
+} from './slice';
+
+function fetchStudioHomeData(search, hasHomeData, requestParams = {}, isPaginationEnabled = false) {
+  return async (dispatch) => {
+    dispatch(updateLoadingStatuses({ studioHomeLoadingStatus: RequestStatus.IN_PROGRESS }));
+    dispatch(updateLoadingStatuses({ courseLoadingStatus: RequestStatus.IN_PROGRESS }));
+
+    if (!hasHomeData) {
+      try {
+        const studioHomeData = await getStudioHomeData();
+        dispatch(fetchStudioHomeDataSuccess(studioHomeData));
+        dispatch(updateLoadingStatuses({ studioHomeLoadingStatus: RequestStatus.SUCCESSFUL }));
+      } catch (error) {
+        dispatch(updateLoadingStatuses({ studioHomeLoadingStatus: RequestStatus.FAILED }));
+        return;
+      }
+    }
+    try {
+      if (isPaginationEnabled) {
+        const coursesData = await getStudioHomeCoursesV2(search || '', requestParams);
+        dispatch(fetchCourseDataSuccessV2(coursesData));
+      } else {
+        const coursesData = await getStudioHomeCourses(search || '');
+        dispatch(fetchCourseDataSuccess(coursesData));
+      }
+
+      dispatch(updateLoadingStatuses({ courseLoadingStatus: RequestStatus.SUCCESSFUL }));
+    } catch (error) {
+      dispatch(updateLoadingStatuses({ courseLoadingStatus: RequestStatus.FAILED }));
+    }
+  };
+}
+
+function fetchLibraryData() {
+  return async (dispatch) => {
+    dispatch(updateLoadingStatuses({ libraryLoadingStatus: RequestStatus.IN_PROGRESS }));
+
+    try {
+      const libraryData = await getStudioHomeLibraries();
+      dispatch(fetchLibraryDataSuccess(libraryData));
+      dispatch(updateLoadingStatuses({ libraryLoadingStatus: RequestStatus.SUCCESSFUL }));
+    } catch (error) {
+      dispatch(updateLoadingStatuses({ libraryLoadingStatus: RequestStatus.FAILED }));
+    }
+  };
+}
+
+function handleDeleteNotificationQuery(url) {
+  return async (dispatch) => {
+    dispatch(updateSavingStatuses({ deleteNotificationSavingStatus: RequestStatus.PENDING }));
+
+    try {
+      await handleCourseNotification(url);
+      dispatch(updateSavingStatuses({ deleteNotificationSavingStatus: RequestStatus.SUCCESSFUL }));
+    } catch (error) {
+      dispatch(updateSavingStatuses({ deleteNotificationSavingStatus: RequestStatus.FAILED }));
+    }
+  };
+}
+
+function requestCourseCreatorQuery() {
+  return async (dispatch) => {
+    dispatch(updateSavingStatuses({ courseCreatorSavingStatus: RequestStatus.PENDING }));
+
+    try {
+      await sendRequestForCourseCreator();
+      dispatch(updateSavingStatuses({ courseCreatorSavingStatus: RequestStatus.SUCCESSFUL }));
+      return true;
+    } catch (error) {
+      dispatch(updateSavingStatuses({ courseCreatorSavingStatus: RequestStatus.FAILED }));
+      return false;
+    }
+  };
+}
+
+export {
+  fetchStudioHomeData,
+  fetchLibraryData,
+  requestCourseCreatorQuery,
+  handleDeleteNotificationQuery,
+};
diff --git a/src/studio-home/factories/mockApiResponses.jsx b/src/studio-home/factories/mockApiResponses.jsx
new file mode 100644
index 0000000000..4f9ee03eda
--- /dev/null
+++ b/src/studio-home/factories/mockApiResponses.jsx
@@ -0,0 +1,174 @@
+import { RequestStatus } from '../../data/constants';
+
+export const courseId = 'course';
+
+export const initialState = {
+  studioHome: {
+    loadingStatuses: {
+      studioHomeLoadingStatus: RequestStatus.IN_PROGRESS,
+      courseNotificationLoadingStatus: RequestStatus.IN_PROGRESS,
+      courseLoadingStatus: RequestStatus.IN_PROGRESS,
+      libraryLoadingStatus: RequestStatus.IN_PROGRESS,
+    },
+    savingStatuses: {
+      courseCreatorSavingStatus: '',
+      deleteNotificationSavingStatus: '',
+    },
+    studioHomeData: {},
+    studioHomeCoursesRequestParams: {
+      currentPage: 1,
+    },
+  },
+};
+
+export const generateGetStudioHomeDataApiResponse = () => ({
+  activeTab: 'courses',
+  allowCourseReruns: true,
+  allowedOrganizations: ['edx', 'org'],
+  archivedCourses: [],
+  canCreateOrganizations: true,
+  courseCreatorStatus: 'granted',
+  courses: [],
+  inProcessCourseActions: [],
+  libraries: [],
+  librariesV1Enabled: true,
+  librariesV2Enabled: true,
+  optimizationEnabled: false,
+  requestCourseCreatorUrl: '/request_course_creator',
+  rerunCreatorStatus: true,
+  showNewLibraryButton: true,
+  showNewLibraryV2Button: true,
+  splitStudioHome: false,
+  studioName: 'Studio',
+  studioShortName: 'Studio',
+  studioRequestEmail: 'request@email.com',
+  techSupportEmail: 'technical@example.com',
+  platformName: 'Your Platform Name Here',
+  userIsActive: true,
+  allowToCreateNewOrg: false,
+});
+
+/** Mock for the deprecated /api/contentstore/v1/home/courses endpoint. Note this endpoint is NOT paginated. */
+export const generateGetStudioCoursesApiResponse = () => ({
+  archivedCourses: /** @type {any[]} */([]),
+  courses: [
+    {
+      courseKey: 'course-v1:HarvardX+123+2023',
+      displayName: 'Managing Risk in the Information Age',
+      lmsLink: '//localhost:18000/courses/course-v1:HarvardX+123+2023/jump_to/block-v1:HarvardX+123+2023+type@course+block@course',
+      number: '123',
+      org: 'HarvardX',
+      rerunLink: '/course_rerun/course-v1:HarvardX+123+2023',
+      run: '2023',
+      url: '/course/course-v1:HarvardX+123+2023',
+    },
+    {
+      courseKey: 'org.0/course_0/Run_0',
+      displayName: 'Run 0',
+      lmsLink: null,
+      number: 'course_0',
+      org: 'org.0',
+      rerunLink: null,
+      run: 'Run_0',
+      url: null,
+    },
+  ],
+  inProcessCourseActions: [],
+});
+
+export const generateGetStudioCoursesApiResponseV2 = () => ({
+  count: 5,
+  next: null,
+  previous: null,
+  numPages: 2,
+  results: {
+    courses: [
+      {
+        courseKey: 'course-v1:HarvardX+123+2023',
+        displayName: 'Managing Risk in the Information Age',
+        lmsLink: '//localhost:18000/courses/course-v1:HarvardX+123+2023/jump_to/block-v1:HarvardX+123+2023+type@course+block@course',
+        number: '123',
+        org: 'HarvardX',
+        rerunLink: '/course_rerun/course-v1:HarvardX+123+2023',
+        run: '2023',
+        url: '/course/course-v1:HarvardX+123+2023',
+      },
+      {
+        courseKey: 'org.0/course_0/Run_0',
+        displayName: 'Run 0',
+        lmsLink: null,
+        number: 'course_0',
+        org: 'org.0',
+        rerunLink: null,
+        run: 'Run_0',
+        url: null,
+      },
+    ],
+    inProcessCourseActions: [],
+  },
+});
+
+export const generateGetStudioHomeLibrariesApiResponse = () => ({
+  libraries: [
+    {
+      displayName: 'MBA',
+      libraryKey: 'library-v1:MBA+123',
+      url: '/library/library-v1:MDA+123',
+      org: 'Cambridge',
+      number: '123',
+      canEdit: true,
+    },
+  ],
+});
+
+export const generateGetStudioHomeLibrariesV2ApiResponse = () => ({
+  next: null,
+  previous: null,
+  count: 2,
+  numPages: 1,
+  currentPage: 1,
+  start: 0,
+  results: [
+    {
+      id: 'lib:SampleTaxonomyOrg1:AL1',
+      type: 'complex',
+      org: 'SampleTaxonomyOrg1',
+      slug: 'AL1',
+      title: 'Another Library 2',
+      description: '',
+      numBlocks: 0,
+      version: 0,
+      lastPublished: null,
+      allowLti: false,
+      allowPublicLearning: false,
+      allowpublicRead: false,
+      hasUnpublishedChanges: false,
+      hasUnpublishedDeletes: false,
+      license: '',
+    },
+    {
+      id: 'lib:SampleTaxonomyOrg1:TL1',
+      type: 'complex',
+      org: 'SampleTaxonomyOrg1',
+      slug: 'TL1',
+      title: 'Test Library 1',
+      description: '',
+      numBlocks: 0,
+      version: 0,
+      lastPublished: null,
+      allowLti: false,
+      allowPublicLearning: false,
+      allowPublicRead: false,
+      hasUnpublishedChanges: false,
+      hasUnpublishedDeletes: false,
+      license: '',
+    },
+  ],
+});
+
+export const generateNewVideoApiResponse = () => ({
+  files: [{
+    edx_video_id: 'mOckID4',
+    upload_url: 'http://testing.org',
+  }],
+});
diff --git a/src/studio-home/home-sidebar/HomeSidebar.test.jsx b/src/studio-home/home-sidebar/HomeSidebar.test.jsx
new file mode 100644
index 0000000000..38a506dd58
--- /dev/null
+++ b/src/studio-home/home-sidebar/HomeSidebar.test.jsx
@@ -0,0 +1,89 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { render } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { initializeMockApp } from '@edx/frontend-platform';
+import { AppProvider } from '@edx/frontend-platform/react';
+
+import { COURSE_CREATOR_STATES } from '../../constants';
+import initializeStore from '../../store';
+import { studioHomeMock } from '../__mocks__';
+import HomeSidebar from '.';
+
+jest.mock('react-redux', () => ({
+  ...jest.requireActual('react-redux'),
+  useSelector: jest.fn(),
+}));
+
+let store;
+const {
+  studioName,
+  studioShortName,
+} = studioHomeMock;
+
+const RootWrapper = () => (
+  <AppProvider store={store}>
+    <IntlProvider locale="en" messages={{}}>
+      <HomeSidebar intl={{ formatMessage: jest.fn() }} />
+    </IntlProvider>
+  </AppProvider>
+);
+
+describe('<HomeSidebar />', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+    store = initializeStore();
+  });
+
+  it('renders about and other sidebar titles correctly', () => {
+    useSelector.mockReturnValue(studioHomeMock);
+
+    const { getByText } = render(<RootWrapper />);
+    expect(getByText(`New to ${studioName}?`)).toBeInTheDocument();
+    expect(getByText(`Click "Looking for help with Studio" at the bottom of the page to access our continually updated documentation and other ${studioShortName} resources.`)).toBeInTheDocument();
+  });
+
+  it('shows mail to get instruction', () => {
+    const studioHomeInitial = {
+      ...studioHomeMock,
+      courseCreatorStatus: COURSE_CREATOR_STATES.disallowedForThisSite,
+      studioRequestEmail: 'mock@example.com',
+    };
+    useSelector.mockReturnValue(studioHomeInitial);
+
+    const { getByText } = render(<RootWrapper />);
+    expect(getByText(`Can I create courses in ${studioName}?`)).toBeInTheDocument();
+    expect(getByText(`In order to create courses in ${studioName}, you must`)).toBeInTheDocument();
+  });
+
+  it('shows unrequested instructions', () => {
+    const studioHomeInitial = {
+      ...studioHomeMock,
+      courseCreatorStatus: COURSE_CREATOR_STATES.unrequested,
+    };
+    useSelector.mockReturnValue(studioHomeInitial);
+
+    const { getByText } = render(<RootWrapper />);
+    expect(getByText(`Can I create courses in ${studioName}?`)).toBeInTheDocument();
+    expect(getByText(`In order to create courses in ${studioName}, you must have course creator privileges to create your own course.`)).toBeInTheDocument();
+  });
+
+  it('shows denied instructions', () => {
+    const studioHomeInitial = {
+      ...studioHomeMock,
+      courseCreatorStatus: COURSE_CREATOR_STATES.denied,
+    };
+    useSelector.mockReturnValue(studioHomeInitial);
+
+    const { getByText } = render(<RootWrapper />);
+    expect(getByText(`Can I create courses in ${studioName}?`)).toBeInTheDocument();
+    expect(getByText(`Your request to author courses in ${studioName} has been denied.`, { exact: false })).toBeInTheDocument();
+  });
+});
diff --git a/src/studio-home/home-sidebar/index.jsx b/src/studio-home/home-sidebar/index.jsx
new file mode 100644
index 0000000000..671f78d259
--- /dev/null
+++ b/src/studio-home/home-sidebar/index.jsx
@@ -0,0 +1,96 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { MailtoLink } from '@openedx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import { COURSE_CREATOR_STATES } from '../../constants';
+import { useHelpUrls } from '../../help-urls/hooks';
+import { HelpSidebar, HelpSidebarLink } from '../../generic/help-sidebar';
+import { getStudioHomeData } from '../data/selectors';
+import messages from './messages';
+
+const HomeSidebar = () => {
+  const intl = useIntl();
+  const {
+    studioName,
+    platformName,
+    studioShortName,
+    studioRequestEmail,
+    techSupportEmail,
+    courseCreatorStatus,
+  } = useSelector(getStudioHomeData);
+  const { home: aboutHomeLink } = useHelpUrls(['home']);
+
+  // eslint-disable-next-line max-len
+  const isShowMailToGetInstruction = courseCreatorStatus === COURSE_CREATOR_STATES.disallowedForThisSite
+    && !!studioRequestEmail;
+  const isShowUnrequestedInstruction = courseCreatorStatus === COURSE_CREATOR_STATES.unrequested;
+  const isShowDeniedInstruction = courseCreatorStatus === COURSE_CREATOR_STATES.denied;
+
+  return (
+    <HelpSidebar>
+      <h4 className="help-sidebar-about-title">
+        {intl.formatMessage(messages.aboutTitle, { studioName })}
+      </h4>
+      <p className="help-sidebar-about-descriptions">
+        {intl.formatMessage(messages.aboutDescription, { studioShortName })}
+      </p>
+      <HelpSidebarLink
+        as="span"
+        pathToPage={aboutHomeLink || ''}
+        title={intl.formatMessage(messages.studioHomeLinkToGettingStarted, { studioName })}
+      />
+      {isShowMailToGetInstruction && (
+        <>
+          <hr />
+          <h4 className="help-sidebar-about-title">
+            {intl.formatMessage(messages.sidebarHeader2, { studioName })}
+          </h4>
+          <p className="help-sidebar-about-descriptions">
+            {intl.formatMessage(messages.sidebarDescription2, {
+              studioName,
+              mailTo: (
+                <MailtoLink to={studioRequestEmail}>{
+                  intl.formatMessage(messages.sidebarDescription2MailTo, { platformName })
+                }
+                </MailtoLink>
+              ),
+            })}
+          </p>
+        </>
+      )}
+      {isShowUnrequestedInstruction && (
+        <>
+          <hr />
+          <h4 className="help-sidebar-about-title">
+            {intl.formatMessage(messages.sidebarHeader3, { studioName })}
+          </h4>
+          <p className="help-sidebar-about-descriptions">
+            {intl.formatMessage(messages.sidebarDescription3, { studioName })}
+          </p>
+        </>
+      )}
+      {isShowDeniedInstruction && (
+        <>
+          <hr />
+          <h4 className="help-sidebar-about-title">
+            {intl.formatMessage(messages.sidebarHeader4, { studioName })}
+          </h4>
+          <p className="help-sidebar-about-descriptions">
+            {intl.formatMessage(messages.sidebarDescription4, {
+              studioName,
+              mailTo: (
+                <MailtoLink to={techSupportEmail}>{
+                  intl.formatMessage(messages.sidebarDescription4MailTo, { platformName })
+                }
+                </MailtoLink>
+              ),
+            })}
+          </p>
+        </>
+      )}
+    </HelpSidebar>
+  );
+};
+
+export default HomeSidebar;
diff --git a/src/studio-home/home-sidebar/messages.js b/src/studio-home/home-sidebar/messages.js
new file mode 100644
index 0000000000..161ea021a1
--- /dev/null
+++ b/src/studio-home/home-sidebar/messages.js
@@ -0,0 +1,50 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  aboutTitle: {
+    id: 'course-authoring.studio-home.sidebar.about.title',
+    defaultMessage: 'New to {studioName}?',
+  },
+  aboutDescription: {
+    id: 'course-authoring.studio-home.sidebar.about.description',
+    defaultMessage: 'Click "Looking for help with Studio" at the bottom of the page to access our continually updated documentation and other {studioShortName} resources.',
+  },
+  studioHomeLinkToGettingStarted: {
+    id: 'course-authoring.studio-home.sidebar.about.getting-started',
+    defaultMessage: 'Getting started with {studioName}',
+  },
+  sidebarHeader2: {
+    id: 'course-authoring.studio-home.sidebar.about.header-2',
+    defaultMessage: 'Can I create courses in {studioName}?',
+  },
+  sidebarDescription2: {
+    id: 'course-authoring.studio-home.sidebar.about.description-2',
+    defaultMessage: 'In order to create courses in {studioName}, you must {mailTo}',
+  },
+  sidebarDescription2MailTo: {
+    id: 'course-authoring.studio-home.sidebar.about.description-2.mail-to',
+    defaultMessage: 'contact {platformName} staff to help you create a course.',
+  },
+  sidebarHeader3: {
+    id: 'course-authoring.studio-home.sidebar.about.header-3',
+    defaultMessage: 'Can I create courses in {studioName}?',
+  },
+  sidebarDescription3: {
+    id: 'course-authoring.studio-home.sidebar.about.description-3',
+    defaultMessage: 'In order to create courses in {studioName}, you must have course creator privileges to create your own course.',
+  },
+  sidebarHeader4: {
+    id: 'course-authoring.studio-home.sidebar.about.header-4',
+    defaultMessage: 'Can I create courses in {studioName}?',
+  },
+  sidebarDescription4: {
+    id: 'course-authoring.studio-home.sidebar.about.description-4',
+    defaultMessage: 'Your request to author courses in {studioName} has been denied. Please {mailTo}.',
+  },
+  sidebarDescription4MailTo: {
+    id: 'course-authoring.studio-home.sidebar.about.description-4.mail-to',
+    defaultMessage: 'contact {platformName} staff with further questions',
+  },
+});
+
+export default messages;
diff --git a/src/studio-home/hooks.jsx b/src/studio-home/hooks.jsx
new file mode 100644
index 0000000000..9a48fed095
--- /dev/null
+++ b/src/studio-home/hooks.jsx
@@ -0,0 +1,108 @@
+import { useEffect, useState } from 'react';
+import { useLocation } from 'react-router-dom';
+import { useDispatch, useSelector } from 'react-redux';
+import { getConfig } from '@edx/frontend-platform';
+
+import { RequestStatus } from '../data/constants';
+import { COURSE_CREATOR_STATES } from '../constants';
+import { getCourseData, getSavingStatus } from '../generic/data/selectors';
+import { fetchStudioHomeData } from './data/thunks';
+import { fetchWaffleFlags } from '../data/thunks';
+import {
+  getLoadingStatuses,
+  getSavingStatuses,
+  getStudioHomeData,
+  getStudioHomeCoursesParams,
+} from './data/selectors';
+import { updateSavingStatuses } from './data/slice';
+
+const useStudioHome = () => {
+  const location = useLocation();
+  const dispatch = useDispatch();
+  const isPaginated = getConfig().ENABLE_HOME_PAGE_COURSE_API_V2;
+  const studioHomeData = useSelector(getStudioHomeData);
+  const studioHomeCoursesParams = useSelector(getStudioHomeCoursesParams);
+  const { isFiltered } = studioHomeCoursesParams;
+  const newCourseData = useSelector(getCourseData);
+  const { studioHomeLoadingStatus } = useSelector(getLoadingStatuses);
+  const savingCreateRerunStatus = useSelector(getSavingStatus);
+  const {
+    courseCreatorSavingStatus,
+    deleteNotificationSavingStatus,
+  } = useSelector(getSavingStatuses);
+  const [showNewCourseContainer, setShowNewCourseContainer] = useState(false);
+  const isLoadingPage = studioHomeLoadingStatus === RequestStatus.IN_PROGRESS;
+  const isFailedLoadingPage = studioHomeLoadingStatus === RequestStatus.FAILED;
+
+  useEffect(() => {
+    if (!isPaginated) {
+      dispatch(fetchStudioHomeData(location.search ?? ''));
+      setShowNewCourseContainer(false);
+    }
+    dispatch(fetchWaffleFlags());
+  }, [location.search]);
+
+  useEffect(() => {
+    if (isPaginated) {
+      const firstPage = 1;
+      dispatch(fetchStudioHomeData(location.search ?? '', false, { page: firstPage, order: 'display_name' }, true));
+    }
+  }, []);
+
+  useEffect(() => {
+    if (courseCreatorSavingStatus === RequestStatus.SUCCESSFUL) {
+      dispatch(updateSavingStatuses({ courseCreatorSavingStatus: '' }));
+      dispatch(fetchStudioHomeData());
+    }
+  }, [courseCreatorSavingStatus]);
+
+  useEffect(() => {
+    if (deleteNotificationSavingStatus === RequestStatus.SUCCESSFUL) {
+      dispatch(updateSavingStatuses({ courseCreatorSavingStatus: '' }));
+      dispatch(fetchStudioHomeData());
+    } else if (deleteNotificationSavingStatus === RequestStatus.FAILED) {
+      dispatch(updateSavingStatuses({ deleteNotificationSavingStatus: '' }));
+    }
+  }, [deleteNotificationSavingStatus]);
+
+  const {
+    allowCourseReruns,
+    rerunCreatorStatus,
+    optimizationEnabled,
+    studioRequestEmail,
+    inProcessCourseActions,
+    courseCreatorStatus,
+    librariesV1Enabled,
+    librariesV2Enabled,
+  } = studioHomeData;
+
+  const isShowOrganizationDropdown = optimizationEnabled && courseCreatorStatus === COURSE_CREATOR_STATES.granted;
+  const isShowEmailStaff = courseCreatorStatus === COURSE_CREATOR_STATES.disallowedForThisSite && !!studioRequestEmail;
+  const isShowProcessing = allowCourseReruns && rerunCreatorStatus && inProcessCourseActions?.length > 0;
+  const hasAbilityToCreateNewCourse = courseCreatorStatus === COURSE_CREATOR_STATES.granted;
+  const anyQueryIsPending = [deleteNotificationSavingStatus, courseCreatorSavingStatus, savingCreateRerunStatus]
+    .includes(RequestStatus.PENDING);
+  const anyQueryIsFailed = [deleteNotificationSavingStatus, courseCreatorSavingStatus, savingCreateRerunStatus]
+    .includes(RequestStatus.FAILED);
+
+  return {
+    isLoadingPage,
+    isFailedLoadingPage,
+    newCourseData,
+    studioHomeData,
+    isShowProcessing,
+    anyQueryIsFailed,
+    isShowEmailStaff,
+    anyQueryIsPending,
+    showNewCourseContainer,
+    courseCreatorSavingStatus,
+    isShowOrganizationDropdown,
+    hasAbilityToCreateNewCourse,
+    isFiltered,
+    setShowNewCourseContainer,
+    librariesV1Enabled,
+    librariesV2Enabled,
+  };
+};
+
+export { useStudioHome };
diff --git a/src/studio-home/index.ts b/src/studio-home/index.ts
new file mode 100644
index 0000000000..e96abcecea
--- /dev/null
+++ b/src/studio-home/index.ts
@@ -0,0 +1 @@
+export { default as StudioHome } from './StudioHome';
diff --git a/src/studio-home/messages.ts b/src/studio-home/messages.ts
new file mode 100644
index 0000000000..6a0e5ec7e0
--- /dev/null
+++ b/src/studio-home/messages.ts
@@ -0,0 +1,74 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  headingTitle: {
+    id: 'course-authoring.studio-home.heading.title',
+    defaultMessage: '{studioShortName} home',
+  },
+  addNewCourseBtnText: {
+    id: 'course-authoring.studio-home.add-new-course.btn.text',
+    defaultMessage: 'New course',
+  },
+  addNewLibraryBtnText: {
+    id: 'course-authoring.studio-home.add-new-library.btn.text',
+    defaultMessage: 'New library',
+  },
+  homePageLoadFailedMessage: {
+    id: 'course-authoring.studio-home.page-load.failed.message',
+    defaultMessage: 'Failed to load Studio home. Please try again later.',
+  },
+  emailStaffBtnText: {
+    id: 'course-authoring.studio-home.email-staff.btn.text',
+    defaultMessage: 'Email staff to create course',
+  },
+  defaultSection_1_Title: {
+    id: 'course-authoring.studio-home.default-section-1.title',
+    defaultMessage: 'Are you staff on an existing {studioShortName} course?',
+  },
+  defaultSection_1_Description: {
+    id: 'course-authoring.studio-home.default-section-1.description',
+    defaultMessage: 'The course creator must give you access to the course. Contact the course creator or administrator for the course you are helping to author.',
+  },
+  defaultSection_2_Title: {
+    id: 'course-authoring.studio-home.default-section-2.title',
+    defaultMessage: 'Create your first course',
+  },
+  defaultSection_2_Description: {
+    id: 'course-authoring.studio-home.default-section-2.description',
+    defaultMessage: 'Your new course is just a click away!',
+  },
+  btnAddNewCourseText: {
+    id: 'course-authoring.studio-home.btn.add-new-course.text',
+    defaultMessage: 'Create your first course',
+  },
+  btnReRunText: {
+    id: 'course-authoring.studio-home.btn.re-run.text',
+    defaultMessage: 'Re-run course',
+  },
+  viewLiveBtnText: {
+    id: 'course-authoring.studio-home.btn.view-live.text',
+    defaultMessage: 'View live',
+  },
+  organizationTitle: {
+    id: 'course-authoring.studio-home.organization.title',
+    defaultMessage: 'Organization and library settings',
+  },
+  organizationLabel: {
+    id: 'course-authoring.studio-home.organization.label',
+    defaultMessage: 'Show all courses in organization:',
+  },
+  organizationSubmitBtnText: {
+    id: 'course-authoring.studio-home.organization.btn.submit.text',
+    defaultMessage: 'Submit',
+  },
+  organizationInputPlaceholder: {
+    id: 'course-authoring.studio-home.organization.input.placeholder',
+    defaultMessage: 'For example, MITx',
+  },
+  organizationInputNoOptions: {
+    id: 'course-authoring.studio-home.organization.input.no-options',
+    defaultMessage: 'No options',
+  },
+});
+
+export default messages;
diff --git a/src/studio-home/organization-section/OrganizationSection.test.jsx b/src/studio-home/organization-section/OrganizationSection.test.jsx
new file mode 100644
index 0000000000..24a4aa5973
--- /dev/null
+++ b/src/studio-home/organization-section/OrganizationSection.test.jsx
@@ -0,0 +1,85 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { act, fireEvent, render } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { AppProvider } from '@edx/frontend-platform/react';
+import { initializeMockApp } from '@edx/frontend-platform';
+import MockAdapter from 'axios-mock-adapter';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+
+import { fetchOrganizationsQuery } from '../../generic/data/thunks';
+import { getOrganizationsUrl } from '../../generic/data/api';
+import initializeStore from '../../store';
+import { executeThunk } from '../../utils';
+import messages from '../messages';
+import OrganizationSection from '.';
+
+let store;
+let axiosMock;
+
+jest.mock('react-redux', () => ({
+  ...jest.requireActual('react-redux'),
+  useSelector: jest.fn(),
+}));
+
+const RootWrapper = () => (
+  <AppProvider store={store}>
+    <IntlProvider locale="en" messages={{}}>
+      <OrganizationSection intl={{ formatMessage: jest.fn() }} />
+    </IntlProvider>
+  </AppProvider>
+);
+
+describe('<OrganizationSection />', () => {
+  beforeEach(async () => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+    store = initializeStore();
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+    axiosMock.onDelete(getOrganizationsUrl()).reply(200);
+    await executeThunk(fetchOrganizationsQuery(), store.dispatch);
+    useSelector.mockReturnValue(['edX', 'org']);
+  });
+
+  it('renders text content correctly', () => {
+    const { getByText } = render(<RootWrapper />);
+    expect(getByText(messages.organizationTitle.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.organizationLabel.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.organizationSubmitBtnText.defaultMessage)).toBeInTheDocument();
+  });
+
+  it('should change path after selecting org', () => {
+    const selectedOrgStr = 'edX';
+    const {
+      getByPlaceholderText,
+      getByRole,
+      getByText,
+      getByDisplayValue,
+    } = render(<RootWrapper />);
+
+    const orgInput = getByPlaceholderText(messages.organizationInputPlaceholder.defaultMessage);
+    act(() => {
+      fireEvent.click(orgInput);
+    });
+
+    const selectedOrg = getByText(selectedOrgStr);
+    act(() => {
+      fireEvent.click(selectedOrg);
+    });
+
+    const submitButton = getByRole('button', { name: messages.organizationSubmitBtnText.defaultMessage });
+    act(() => {
+      fireEvent.click(submitButton);
+    });
+
+    expect(window.location.pathname).toBe('/home');
+    expect(window.location.search).toBe(`?org=${selectedOrgStr}`);
+    expect(getByDisplayValue(selectedOrgStr)).toBeInTheDocument();
+  });
+});
diff --git a/src/studio-home/organization-section/index.jsx b/src/studio-home/organization-section/index.jsx
new file mode 100644
index 0000000000..c7cd0688cf
--- /dev/null
+++ b/src/studio-home/organization-section/index.jsx
@@ -0,0 +1,77 @@
+import React, { useState, useEffect } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { useDispatch, useSelector } from 'react-redux';
+import { isEmpty } from 'lodash';
+import { Button, Form, FormLabel } from '@openedx/paragon';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+
+import TypeaheadDropdown from '../../editors/sharedComponents/TypeaheadDropdown';
+import { getOrganizations } from '../../generic/data/selectors';
+import { fetchOrganizationsQuery } from '../../generic/data/thunks';
+import messages from '../messages';
+
+const OrganizationSection = ({ intl }) => {
+  const dispatch = useDispatch();
+  const location = useLocation();
+  const navigate = useNavigate();
+  const fieldName = 'org';
+  const searchParams = new URLSearchParams(location.search);
+  const orgURLValue = searchParams.get(fieldName) || '';
+  const [inputValue, setInputValue] = useState('');
+  const organizations = useSelector(getOrganizations);
+
+  useEffect(() => {
+    if (isEmpty(organizations)) {
+      dispatch(fetchOrganizationsQuery());
+    }
+  }, []);
+
+  // We have to set value only after the list of organizations to be received to display the initial state correctly.
+  useEffect(() => {
+    if (organizations.length) {
+      setInputValue(orgURLValue);
+    }
+  }, [orgURLValue, organizations]);
+
+  const handleSubmit = () => {
+    navigate({
+      pathname: '/home',
+      search: `?${fieldName}=${inputValue}`,
+    });
+  };
+
+  return (
+    <div className="organization-section">
+      <h3 className="organization-section-title">
+        {intl.formatMessage(messages.organizationTitle)}
+      </h3>
+      <Form.Group className="organization-section-form d-flex align-items-baseline">
+        <FormLabel isInline className="organization-section-form-label">
+          {intl.formatMessage(messages.organizationLabel)}
+        </FormLabel>
+        <TypeaheadDropdown
+          readOnly={false}
+          name="organizationSearch"
+          value={inputValue}
+          options={organizations}
+          placeholder={intl.formatMessage(messages.organizationInputPlaceholder)}
+          handleBlur={(e) => setInputValue(e.target.value)}
+          handleChange={(value) => setInputValue(value)}
+          noOptionsMessage={intl.formatMessage(messages.organizationInputNoOptions)}
+          helpMessage=""
+          errorMessage=""
+          floatingLabel=""
+        />
+      </Form.Group>
+      <Button onClick={handleSubmit}>
+        {intl.formatMessage(messages.organizationSubmitBtnText)}
+      </Button>
+    </div>
+  );
+};
+
+OrganizationSection.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(OrganizationSection);
diff --git a/src/studio-home/processing-courses/ProcessingCourses.test.jsx b/src/studio-home/processing-courses/ProcessingCourses.test.jsx
new file mode 100644
index 0000000000..c9f2595685
--- /dev/null
+++ b/src/studio-home/processing-courses/ProcessingCourses.test.jsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { render } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { initializeMockApp } from '@edx/frontend-platform';
+import { AppProvider } from '@edx/frontend-platform/react';
+
+import initializeStore from '../../store';
+import { studioHomeMock } from '../__mocks__';
+import messages from './messages';
+import ProcessingCourses from '.';
+
+jest.mock('react-redux', () => ({
+  ...jest.requireActual('react-redux'),
+  useSelector: jest.fn(),
+}));
+
+let store;
+
+const RootWrapper = () => (
+  <AppProvider store={store}>
+    <IntlProvider locale="en" messages={{}}>
+      <ProcessingCourses />
+    </IntlProvider>
+  </AppProvider>
+);
+
+describe('<ProcessingCourses />', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+    store = initializeStore();
+    useSelector.mockReturnValue(studioHomeMock);
+  });
+  it('renders successfully processing courses', () => {
+    const studioHomeInitial = {
+      ...studioHomeMock,
+      inProcessCourseActions: [{ a: '1' }, { b: '2' }],
+    };
+    useSelector.mockReturnValue(studioHomeInitial);
+    const { getByText, queryAllByTestId } = render(<RootWrapper />);
+    expect(getByText(messages.processingTitle.defaultMessage)).toBeInTheDocument();
+    expect(queryAllByTestId('course-item')).toHaveLength(2);
+  });
+
+  it('renders successfully empty list', () => {
+    const { getByText, queryAllByTestId } = render(<RootWrapper />);
+    expect(getByText(messages.processingTitle.defaultMessage)).toBeInTheDocument();
+    expect(queryAllByTestId('course-item')).toHaveLength(0);
+  });
+});
diff --git a/src/studio-home/processing-courses/course-item/CourseItem.test.jsx b/src/studio-home/processing-courses/course-item/CourseItem.test.jsx
new file mode 100644
index 0000000000..125f88a9bd
--- /dev/null
+++ b/src/studio-home/processing-courses/course-item/CourseItem.test.jsx
@@ -0,0 +1,66 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { initializeMockApp } from '@edx/frontend-platform';
+import { AppProvider } from '@edx/frontend-platform/react';
+import MockAdapter from 'axios-mock-adapter';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+
+import initializeStore from '../../../store';
+import { executeThunk } from '../../../utils';
+import { handleDeleteNotificationQuery } from '../../data/thunks';
+import { getCourseNotificationUrl } from '../../data/api';
+import messages from './messages';
+import CourseItem from '.';
+
+let store;
+let axiosMock;
+
+const RootWrapper = (props) => (
+  <AppProvider store={store}>
+    <IntlProvider locale="en" messages={{}}>
+      <CourseItem {...props} />
+    </IntlProvider>
+  </AppProvider>
+);
+
+const course = {
+  displayName: 'course-name-fake',
+  courseKey: 'course-key-fake',
+  org: 'course-org-fake',
+  number: 'course-number-fake',
+  run: 'course-run-fake',
+  isInProgress: true,
+  isFailed: true,
+  dismissLink: 'course-dismiss-link-fake',
+};
+
+const props = { course };
+
+describe('<CourseItem />', () => {
+  beforeEach(async () => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+    store = initializeStore();
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+    axiosMock.onDelete(getCourseNotificationUrl(course.dismissLink)).reply(200);
+    await executeThunk(handleDeleteNotificationQuery(course.dismissLink), store.dispatch);
+  });
+
+  it('renders successfully', () => {
+    const { getByText, getAllByText } = render(<RootWrapper {...props} />);
+    const subtitle = `${course.org} / ${course.number} / ${course.run}`;
+    expect(getAllByText(course.displayName)).toHaveLength(2);
+    expect(getAllByText(subtitle)).toHaveLength(2);
+    expect(getByText(messages.itemInProgressActionText.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.itemIsFailedActionText.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.itemFailedFooterText.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.itemFailedFooterButton.defaultMessage)).toBeInTheDocument();
+  });
+});
diff --git a/src/studio-home/processing-courses/course-item/index.jsx b/src/studio-home/processing-courses/course-item/index.jsx
new file mode 100644
index 0000000000..e93c1927ab
--- /dev/null
+++ b/src/studio-home/processing-courses/course-item/index.jsx
@@ -0,0 +1,102 @@
+import React from 'react';
+import { useDispatch } from 'react-redux';
+import PropTypes from 'prop-types';
+import {
+  ActionRow,
+  Card,
+  Hyperlink,
+  Button,
+  Icon,
+} from '@openedx/paragon';
+import {
+  Close as CloseIcon,
+  Warning as WarningIcon,
+  RotateRight as RotateRightIcon,
+} from '@openedx/paragon/icons';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import { handleDeleteNotificationQuery } from '../../data/thunks';
+import messages from './messages';
+
+const CourseItem = ({ course }) => {
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const {
+    displayName, org, number, run, isInProgress, isFailed, dismissLink,
+  } = course;
+  const subtitle = `${org} / ${number} / ${run}`;
+
+  return (
+    <div data-testid="course-item">
+      {isInProgress && (
+        <Card className="card-item">
+          <Card.Header
+            size="sm"
+            title={<p className="card-item-title">{displayName}</p>}
+            subtitle={subtitle}
+            actions={(
+              <ActionRow>
+                <Icon src={RotateRightIcon} className="spinner-icon" />
+                <ActionRow.Spacer />
+                <span className="small">{intl.formatMessage(messages.itemInProgressActionText)}</span>
+              </ActionRow>
+            )}
+          />
+          <Card.Divider />
+          <Card.Section className="p-3.5 small text-gray-700 bg-light-200">
+            {intl.formatMessage(messages.itemInProgressFooterText, {
+              refresh: (
+                <Hyperlink destination="/home">
+                  {intl.formatMessage(messages.itemInProgressFooterHyperlink)}
+                </Hyperlink>
+              ),
+            })}
+          </Card.Section>
+        </Card>
+      )}
+
+      {isFailed && (
+        <Card className="card-item">
+          <Card.Header
+            size="sm"
+            title={<p className="card-item-title">{displayName}</p>}
+            subtitle={subtitle}
+            actions={(
+              <ActionRow>
+                <Icon src={WarningIcon} className="text-danger-500" />
+                <span className="small">{intl.formatMessage(messages.itemIsFailedActionText)}</span>
+              </ActionRow>
+            )}
+          />
+          <Card.Divider />
+          <Card.Footer className="p-3.5 small text-gray-700 bg-danger-100 align-content-between">
+            <span className="w-75 mr-auto">{intl.formatMessage(messages.itemFailedFooterText)}</span>
+            <Button
+              onClick={() => dispatch(handleDeleteNotificationQuery(dismissLink))}
+              iconBefore={CloseIcon}
+              variant="tertiary"
+              size="sm"
+            >
+              {intl.formatMessage(messages.itemFailedFooterButton)}
+            </Button>
+          </Card.Footer>
+        </Card>
+      )}
+    </div>
+  );
+};
+
+CourseItem.propTypes = {
+  course: PropTypes.shape({
+    displayName: PropTypes.string.isRequired,
+    courseKey: PropTypes.string.isRequired,
+    org: PropTypes.string.isRequired,
+    number: PropTypes.string.isRequired,
+    run: PropTypes.string.isRequired,
+    isFailed: PropTypes.bool.isRequired,
+    isInProgress: PropTypes.bool.isRequired,
+    dismissLink: PropTypes.string.isRequired,
+  }).isRequired,
+};
+
+export default CourseItem;
diff --git a/src/studio-home/processing-courses/course-item/messages.js b/src/studio-home/processing-courses/course-item/messages.js
new file mode 100644
index 0000000000..3543d5af25
--- /dev/null
+++ b/src/studio-home/processing-courses/course-item/messages.js
@@ -0,0 +1,30 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  itemInProgressFooterText: {
+    id: 'course-authoring.studio-home.processing.course-item.footer.in-progress',
+    defaultMessage: 'The new course will be added to your course list in 5-10 minutes. Return to this page or {refresh} to update the course list. The new course will need some manual configuration.',
+  },
+  itemInProgressFooterHyperlink: {
+    id: 'course-authoring.studio-home.processing.course-item.footer.in-progress.hyperlink',
+    defaultMessage: 'refresh it',
+  },
+  itemInProgressActionText: {
+    id: 'course-authoring.studio-home.processing.course-item.action.in-progress',
+    defaultMessage: 'Configuring as re-run',
+  },
+  itemIsFailedActionText: {
+    id: 'course-authoring.studio-home.processing.course-item.action.failed',
+    defaultMessage: 'Configuration error',
+  },
+  itemFailedFooterText: {
+    id: 'course-authoring.studio-home.processing.course-item.footer.failed',
+    defaultMessage: 'A system error occurred while your course was being processed. Please go to the original course to try the re-run again, or contact your PM for assistance.',
+  },
+  itemFailedFooterButton: {
+    id: 'course-authoring.studio-home.processing.course-item.footer.failed.button',
+    defaultMessage: 'Dismiss',
+  },
+});
+
+export default messages;
diff --git a/src/studio-home/processing-courses/index.jsx b/src/studio-home/processing-courses/index.jsx
new file mode 100644
index 0000000000..67003659c6
--- /dev/null
+++ b/src/studio-home/processing-courses/index.jsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { Stack } from '@openedx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import { getStudioHomeData } from '../data/selectors';
+import CourseItem from './course-item';
+import messages from './messages';
+
+const ProcessingCourses = () => {
+  const intl = useIntl();
+  const { inProcessCourseActions } = useSelector(getStudioHomeData);
+
+  return (
+    <>
+      <div className="text-gray-500 small" data-testid="processing-courses-title">
+        {intl.formatMessage(messages.processingTitle)}
+      </div>
+      <hr />
+      <Stack gap={3} className="border-bottom border-light-400 mb-4 px-4 pt-3">
+        {inProcessCourseActions.map((course) => (
+          <CourseItem
+            course={course}
+            key={course.courseKey}
+          />
+        ))}
+      </Stack>
+    </>
+  );
+};
+
+export default ProcessingCourses;
diff --git a/src/studio-home/processing-courses/messages.js b/src/studio-home/processing-courses/messages.js
new file mode 100644
index 0000000000..98d90ccf36
--- /dev/null
+++ b/src/studio-home/processing-courses/messages.js
@@ -0,0 +1,10 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  processingTitle: {
+    id: 'course-authoring.studio-home.processing.title',
+    defaultMessage: 'Courses being processed',
+  },
+});
+
+export default messages;
diff --git a/src/studio-home/scss/StudioHome.scss b/src/studio-home/scss/StudioHome.scss
new file mode 100644
index 0000000000..fd7cee3559
--- /dev/null
+++ b/src/studio-home/scss/StudioHome.scss
@@ -0,0 +1,92 @@
+.studio-home {
+  margin: 3rem 1.5rem 1.5rem;
+
+  .help-sidebar {
+    margin-top: 0;
+  }
+
+  .studio-home-sub-header {
+    margin-bottom: 2rem;
+  }
+}
+
+.organization-section {
+  margin-bottom: 2.25rem;
+
+  .organization-section-title {
+    color: $black;
+  }
+
+  .organization-section-form {
+    margin: $spacer 0 -8px;
+
+    .organization-section-form-label {
+      color: $gray-700;
+      margin-bottom: 0;
+      margin-right: .75rem;
+    }
+
+    .organization-section-form-control {
+      border-color: $gray-500;
+
+      .form-control {
+        font-size: .875rem;
+        line-height: 1.5rem;
+        height: 2.75rem;
+      }
+    }
+  }
+}
+
+.studio-home-tabs {
+  border: none;
+  margin-bottom: 1.625rem;
+
+  .nav-link {
+    border-bottom: .125rem solid $light-400;
+  }
+
+  .nav-link.active {
+    background-color: transparent;
+  }
+}
+
+.courses-tab {
+  margin: 1.625rem 0;
+}
+
+.card-item {
+  margin-bottom: 1.5rem;
+
+  .pgn__card-header {
+    padding: .9375rem 1.25rem;
+
+    .pgn__card-header-content {
+      margin: 0;
+      overflow: hidden;
+    }
+
+    .pgn__card-header-actions {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin: 0;
+    }
+  }
+
+  .card-item-title {
+    font: normal $font-weight-normal 1.125rem/1.75rem $font-family-base;
+    color: $black;
+    margin-bottom: .1875rem;
+  }
+
+  .pgn__card-header-subtitle-md {
+    font: normal $font-weight-normal .75rem/1.25rem $font-family-base;
+    color: $gray-700;
+    margin: 0;
+  }
+}
+
+.spinner-icon {
+  animation: rotate 2s infinite linear;
+}
diff --git a/src/studio-home/tabs-section/TabsSection.test.tsx b/src/studio-home/tabs-section/TabsSection.test.tsx
new file mode 100644
index 0000000000..e35c470109
--- /dev/null
+++ b/src/studio-home/tabs-section/TabsSection.test.tsx
@@ -0,0 +1,465 @@
+import { Routes, Route } from 'react-router-dom';
+import { getConfig, setConfig } from '@edx/frontend-platform';
+
+import { studioHomeMock } from '../__mocks__';
+import messages from '../messages';
+import tabMessages from './messages';
+import TabsSection from '.';
+import {
+  initialState,
+  generateGetStudioHomeDataApiResponse,
+  generateGetStudioCoursesApiResponse,
+  generateGetStudioCoursesApiResponseV2,
+  generateGetStudioHomeLibrariesApiResponse,
+} from '../factories/mockApiResponses';
+import { getApiBaseUrl, getStudioHomeApiUrl } from '../data/api';
+import { executeThunk } from '../../utils';
+import { fetchLibraryData, fetchStudioHomeData } from '../data/thunks';
+import { mockGetContentLibraryV2List } from '../../library-authoring/data/api.mocks';
+import contentLibrariesListV2 from '../../library-authoring/__mocks__/contentLibrariesListV2';
+import {
+  initializeMocks,
+  render as baseRender,
+  fireEvent,
+  screen,
+  waitFor,
+} from '../../testUtils';
+
+const { studioShortName } = studioHomeMock;
+
+let axiosMock;
+let store;
+const courseApiLink = `${getApiBaseUrl()}/api/contentstore/v1/home/courses`;
+const courseApiLinkV2 = `${getApiBaseUrl()}/api/contentstore/v2/home/courses`;
+const libraryApiLink = `${getApiBaseUrl()}/api/contentstore/v1/home/libraries`;
+
+// The Libraries v2 tab title contains a badge, so we need to use regex to match its tab text.
+const librariesBetaTabTitle = /Libraries Beta/;
+
+const tabSectionComponent = (overrideProps) => (
+  <TabsSection
+    isPaginationCoursesEnabled={false}
+    showNewCourseContainer={false}
+    onClickNewCourse={() => {}}
+    isShowProcessing
+    librariesV1Enabled
+    librariesV2Enabled
+    {...overrideProps}
+  />
+);
+
+const render = (overrideProps = {}) => baseRender(
+  <Routes>
+    <Route
+      path="/home"
+      element={tabSectionComponent(overrideProps)}
+    />
+    <Route
+      path="/libraries"
+      element={tabSectionComponent(overrideProps)}
+    />
+    <Route
+      path="/libraries-v1"
+      element={tabSectionComponent(overrideProps)}
+    />
+  </Routes>,
+  { routerProps: { initialEntries: ['/home'] } },
+);
+
+describe('<TabsSection />', () => {
+  beforeEach(() => {
+    const newMocks = initializeMocks({ initialState });
+    store = newMocks.reduxStore;
+    axiosMock = newMocks.axiosMock;
+    mockGetContentLibraryV2List.applyMock();
+  });
+
+  it('should render all tabs correctly', async () => {
+    const data: any = generateGetStudioHomeDataApiResponse();
+    data.archivedCourses = [{
+      courseKey: 'course-v1:MachineLearning+123+2023',
+      displayName: 'Machine Learning',
+      lmsLink: '//localhost:18000/courses/course-v1:MachineLearning+123+2023/jump_to/block-v1:MachineLearning+123+2023+type@course+block@course',
+      number: '123',
+      org: 'LSE',
+      rerunLink: '/course_rerun/course-v1:MachineLearning+123+2023',
+      run: '2023',
+      url: '/course/course-v1:MachineLearning+123+2023',
+    }];
+
+    render();
+    axiosMock.onGet(getStudioHomeApiUrl()).reply(200, data);
+    await executeThunk(fetchStudioHomeData(), store.dispatch);
+
+    expect(screen.getByRole('tab', { name: tabMessages.coursesTabTitle.defaultMessage })).toBeInTheDocument();
+
+    expect(screen.getByRole('tab', { name: librariesBetaTabTitle })).toBeInTheDocument();
+
+    expect(screen.getByRole('tab', { name: tabMessages.legacyLibrariesTabTitle.defaultMessage })).toBeInTheDocument();
+
+    expect(screen.getByRole('tab', { name: tabMessages.archivedTabTitle.defaultMessage })).toBeInTheDocument();
+  });
+
+  it('should render only 1 library tab when libraries-v2 disabled', async () => {
+    const data = generateGetStudioHomeDataApiResponse();
+
+    render({ librariesV2Enabled: false });
+    axiosMock.onGet(getStudioHomeApiUrl()).reply(200, data);
+    await executeThunk(fetchStudioHomeData(), store.dispatch);
+
+    expect(screen.getByText(tabMessages.librariesTabTitle.defaultMessage)).toBeInTheDocument();
+    const librariesTab = screen.getByRole('tab', { name: tabMessages.librariesTabTitle.defaultMessage });
+    expect(librariesTab).toBeInTheDocument();
+    // Check Tab.eventKey
+    expect(librariesTab).toHaveAttribute('data-rb-event-key', 'legacyLibraries');
+
+    expect(screen.queryByText(tabMessages.legacyLibrariesTabTitle.defaultMessage)).not.toBeInTheDocument();
+  });
+
+  it('should render only 1 library tab when libraries-v1 disabled', async () => {
+    const data = generateGetStudioHomeDataApiResponse();
+
+    render({ librariesV1Enabled: false });
+    axiosMock.onGet(getStudioHomeApiUrl()).reply(200, data);
+    await executeThunk(fetchStudioHomeData(), store.dispatch);
+
+    expect(screen.getByText(tabMessages.librariesTabTitle.defaultMessage)).toBeInTheDocument();
+    const librariesTab = screen.getByRole('tab', { name: librariesBetaTabTitle });
+    expect(librariesTab).toBeInTheDocument();
+    // Check Tab.eventKey
+    expect(librariesTab).toHaveAttribute('data-rb-event-key', 'libraries');
+
+    expect(screen.queryByText(tabMessages.legacyLibrariesTabTitle.defaultMessage)).not.toBeInTheDocument();
+  });
+
+  describe('course tab', () => {
+    it('should render specific course details', async () => {
+      render();
+      const data = generateGetStudioCoursesApiResponse();
+      axiosMock.onGet(getStudioHomeApiUrl()).reply(200, generateGetStudioHomeDataApiResponse());
+      axiosMock.onGet(courseApiLink).reply(200, data);
+      await executeThunk(fetchStudioHomeData(), store.dispatch);
+
+      expect(screen.getByText(studioHomeMock.courses[0].displayName)).toBeVisible();
+
+      expect(screen.getByText(
+        `${studioHomeMock.courses[0].org} / ${studioHomeMock.courses[0].number} / ${studioHomeMock.courses[0].run}`,
+      )).toBeVisible();
+    });
+
+    it('should render default sections when courses are empty', async () => {
+      const data = generateGetStudioCoursesApiResponse();
+      data.courses = [];
+
+      render();
+      axiosMock.onGet(getStudioHomeApiUrl()).reply(200, generateGetStudioHomeDataApiResponse());
+      axiosMock.onGet(courseApiLink).reply(200, data);
+      await executeThunk(fetchStudioHomeData(), store.dispatch);
+
+      expect(screen.getByText(`Are you staff on an existing ${studioShortName} course?`)).toBeInTheDocument();
+
+      expect(screen.getByText(messages.defaultSection_1_Description.defaultMessage)).toBeInTheDocument();
+
+      expect(screen.getByRole('button', { name: messages.defaultSection_2_Title.defaultMessage })).toBeInTheDocument();
+
+      expect(screen.getByText(messages.defaultSection_2_Description.defaultMessage)).toBeInTheDocument();
+    });
+
+    it('should render course fetch failure alert', async () => {
+      render();
+      axiosMock.onGet(getStudioHomeApiUrl()).reply(200, generateGetStudioHomeDataApiResponse());
+      axiosMock.onGet(courseApiLink).reply(404);
+      await executeThunk(fetchStudioHomeData(), store.dispatch);
+
+      expect(screen.getByText(tabMessages.courseTabErrorMessage.defaultMessage)).toBeVisible();
+    });
+
+    it('should render pagination when there are courses', async () => {
+      render({ isPaginationCoursesEnabled: true });
+      axiosMock.onGet(getStudioHomeApiUrl()).reply(200, generateGetStudioHomeDataApiResponse());
+      axiosMock.onGet(courseApiLinkV2).reply(200, generateGetStudioCoursesApiResponseV2());
+      await executeThunk(fetchStudioHomeData('', true, {}, true), store.dispatch);
+      const data = generateGetStudioCoursesApiResponseV2();
+      const coursesLength = data.results.courses.length;
+      const totalItems = data.count;
+      const paginationInfoText = `Showing ${coursesLength} of ${totalItems}`;
+
+      expect(screen.getByText(studioHomeMock.courses[0].displayName)).toBeVisible();
+
+      const pagination = screen.getByRole('navigation');
+      const paginationInfo = screen.getByTestId('pagination-info');
+      expect(paginationInfo.textContent).toContain(paginationInfoText);
+      expect(pagination).toBeVisible();
+    });
+
+    it('should not render pagination when there are not courses', async () => {
+      const data = generateGetStudioCoursesApiResponseV2();
+      data.results.courses = [];
+      render();
+      axiosMock.onGet(getStudioHomeApiUrl()).reply(200, generateGetStudioHomeDataApiResponse());
+      axiosMock.onGet(courseApiLinkV2).reply(200, data);
+      await executeThunk(fetchStudioHomeData(), store.dispatch);
+
+      const pagination = screen.queryByRole('navigation');
+      expect(pagination).not.toBeInTheDocument();
+    });
+
+    it('should set the url path to "/home" when switching away then back to courses tab', async () => {
+      const data = generateGetStudioCoursesApiResponseV2();
+      data.results.courses = [];
+      render();
+      axiosMock.onGet(getStudioHomeApiUrl()).reply(200, generateGetStudioHomeDataApiResponse());
+      axiosMock.onGet(courseApiLinkV2).reply(200, data);
+      await executeThunk(fetchStudioHomeData(), store.dispatch);
+
+      // confirm the url path is initially /home
+      waitFor(() => {
+        expect(window.location.href).toContain('/home');
+      });
+
+      // switch to libraries tab
+      axiosMock.onGet(libraryApiLink).reply(200, generateGetStudioHomeLibrariesApiResponse());
+      await executeThunk(fetchLibraryData(), store.dispatch);
+      const librariesTab = screen.getByText(tabMessages.legacyLibrariesTabTitle.defaultMessage);
+      fireEvent.click(librariesTab);
+
+      // confirm that the url path has changed
+      expect(librariesTab).toHaveClass('active');
+      waitFor(() => {
+        expect(window.location.href).toContain('/libraries-v1');
+      });
+
+      // switch back to courses tab
+      const coursesTab = screen.getByText(tabMessages.coursesTabTitle.defaultMessage);
+      fireEvent.click(coursesTab);
+
+      // confirm that the url path is /home
+      expect(coursesTab).toHaveClass('active');
+      waitFor(() => {
+        expect(window.location.href).toContain('/home');
+      });
+    });
+  });
+
+  describe('taxonomies tab', () => {
+    it('should not show taxonomies tab on page if not enabled', async () => {
+      setConfig({
+        ...getConfig(),
+        ENABLE_TAGGING_TAXONOMY_PAGES: 'false',
+      });
+
+      render();
+      axiosMock.onGet(getStudioHomeApiUrl()).reply(200, generateGetStudioHomeDataApiResponse());
+      await executeThunk(fetchStudioHomeData(), store.dispatch);
+
+      expect(screen.getByText(tabMessages.coursesTabTitle.defaultMessage)).toBeInTheDocument();
+      expect(screen.queryByText(tabMessages.taxonomiesTabTitle.defaultMessage)).toBeNull();
+    });
+
+    it('should redirect to taxonomies page', async () => {
+      setConfig({
+        ...getConfig(),
+        ENABLE_TAGGING_TAXONOMY_PAGES: 'true',
+      });
+
+      render();
+      axiosMock.onGet(getStudioHomeApiUrl()).reply(200, generateGetStudioHomeDataApiResponse());
+      await executeThunk(fetchStudioHomeData(), store.dispatch);
+
+      const taxonomiesTab = screen.getByText(tabMessages.taxonomiesTabTitle.defaultMessage);
+      fireEvent.click(taxonomiesTab);
+
+      waitFor(() => {
+        expect(window.location.href).toContain('/taxonomies');
+      });
+    });
+  });
+
+  describe('archived tab', () => {
+    it('should switch to Archived tab and render specific archived course details', async () => {
+      render();
+      const data = generateGetStudioCoursesApiResponse();
+      data.archivedCourses = studioHomeMock.archivedCourses;
+      axiosMock.onGet(getStudioHomeApiUrl()).reply(200, generateGetStudioHomeDataApiResponse());
+      axiosMock.onGet(courseApiLink).reply(200, data);
+      await executeThunk(fetchStudioHomeData(), store.dispatch);
+
+      const archivedTab = screen.getByText(tabMessages.archivedTabTitle.defaultMessage);
+      fireEvent.click(archivedTab);
+
+      expect(screen.getByText(studioHomeMock.archivedCourses[0].displayName)).toBeVisible();
+
+      expect(screen.getByText(
+        `${studioHomeMock.archivedCourses[0].org} / ${studioHomeMock.archivedCourses[0].number} / ${studioHomeMock.archivedCourses[0].run}`,
+      )).toBeVisible();
+    });
+
+    it('should hide Archived tab when archived courses are empty', async () => {
+      const data = generateGetStudioCoursesApiResponse();
+      data.archivedCourses = [];
+
+      render();
+      axiosMock.onGet(getStudioHomeApiUrl()).reply(200, generateGetStudioHomeDataApiResponse());
+      axiosMock.onGet(courseApiLink).reply(200, data);
+      await executeThunk(fetchStudioHomeData(), store.dispatch);
+
+      expect(screen.getByRole('tab', { name: tabMessages.coursesTabTitle.defaultMessage })).toBeInTheDocument();
+
+      expect(screen.getByRole('tab', { name: librariesBetaTabTitle })).toBeInTheDocument();
+
+      expect(screen.getByRole('tab', { name: tabMessages.legacyLibrariesTabTitle.defaultMessage })).toBeInTheDocument();
+
+      expect(screen.queryByRole('tab', { name: tabMessages.archivedTabTitle.defaultMessage })).toBeNull();
+    });
+  });
+
+  describe('library tab', () => {
+    beforeEach(() => {
+      axiosMock.onGet(courseApiLink).reply(200, generateGetStudioCoursesApiResponse());
+    });
+    it('should switch to Legacy Libraries tab and render specific v1 library details', async () => {
+      render();
+      axiosMock.onGet(getStudioHomeApiUrl()).reply(200, generateGetStudioHomeDataApiResponse());
+      axiosMock.onGet(libraryApiLink).reply(200, generateGetStudioHomeLibrariesApiResponse());
+      await executeThunk(fetchStudioHomeData(), store.dispatch);
+      await executeThunk(fetchLibraryData(), store.dispatch);
+
+      const librariesTab = screen.getByText(tabMessages.legacyLibrariesTabTitle.defaultMessage);
+      fireEvent.click(librariesTab);
+
+      expect(librariesTab).toHaveClass('active');
+
+      expect(await screen.findByText(studioHomeMock.libraries[0].displayName)).toBeVisible();
+
+      expect(screen.getByText(`${studioHomeMock.libraries[0].org} / ${studioHomeMock.libraries[0].number}`)).toBeVisible();
+    });
+
+    it('should switch to Libraries tab and render specific v2 library details', async () => {
+      render();
+      axiosMock.onGet(getStudioHomeApiUrl()).reply(200, generateGetStudioHomeDataApiResponse());
+      await executeThunk(fetchStudioHomeData(), store.dispatch);
+
+      const librariesTab = screen.getByRole('tab', { name: librariesBetaTabTitle });
+      fireEvent.click(librariesTab);
+
+      expect(librariesTab).toHaveClass('active');
+
+      expect(screen.getByText('Showing 2 of 2')).toBeVisible();
+
+      expect(screen.getByText(contentLibrariesListV2.results[0].title)).toBeVisible();
+      expect(screen.getByText(
+        `${contentLibrariesListV2.results[0].org} / ${contentLibrariesListV2.results[0].slug}`,
+      )).toBeVisible();
+
+      expect(screen.getByText(contentLibrariesListV2.results[1].title)).toBeVisible();
+      expect(screen.getByText(
+        `${contentLibrariesListV2.results[1].org} / ${contentLibrariesListV2.results[1].slug}`,
+      )).toBeVisible();
+    });
+
+    it('should switch to Libraries tab and render specific v1 library details ("v1 only" mode)', async () => {
+      render({ librariesV2Enabled: false });
+      axiosMock.onGet(getStudioHomeApiUrl()).reply(200, generateGetStudioHomeDataApiResponse());
+      axiosMock.onGet(libraryApiLink).reply(200, generateGetStudioHomeLibrariesApiResponse());
+      await executeThunk(fetchStudioHomeData(), store.dispatch);
+      await executeThunk(fetchLibraryData(), store.dispatch);
+
+      // Libraries v2 tab should not be shown
+      expect(screen.queryByRole('tab', { name: librariesBetaTabTitle })).toBeNull();
+
+      const librariesTab = screen.getByRole('tab', { name: tabMessages.librariesTabTitle.defaultMessage });
+      fireEvent.click(librariesTab);
+
+      expect(librariesTab).toHaveClass('active');
+
+      expect(await screen.findByText(studioHomeMock.libraries[0].displayName)).toBeVisible();
+
+      expect(screen.getByText(`${studioHomeMock.libraries[0].org} / ${studioHomeMock.libraries[0].number}`)).toBeVisible();
+    });
+
+    it('should switch to Libraries tab and render specific v2 library details ("v2 only" mode)', async () => {
+      render({ librariesV1Enabled: false });
+      axiosMock.onGet(getStudioHomeApiUrl()).reply(200, generateGetStudioHomeDataApiResponse());
+      await executeThunk(fetchStudioHomeData(), store.dispatch);
+
+      // Libraries v1 tab should not be shown
+      expect(screen.queryByText(tabMessages.legacyLibrariesTabTitle.defaultMessage)).toBeNull();
+
+      const librariesTab = screen.getByRole('tab', { name: librariesBetaTabTitle });
+      fireEvent.click(librariesTab);
+
+      expect(librariesTab).toHaveClass('active');
+
+      expect(screen.getByText('Showing 2 of 2')).toBeVisible();
+      expect(screen.getByText('Page 1, Current Page, of 2')).toBeVisible();
+
+      expect(screen.getByText(contentLibrariesListV2.results[0].title)).toBeVisible();
+      expect(screen.getByText(
+        `${contentLibrariesListV2.results[0].org} / ${contentLibrariesListV2.results[0].slug}`,
+      )).toBeVisible();
+
+      expect(screen.getByText(contentLibrariesListV2.results[1].title)).toBeVisible();
+      expect(screen.getByText(
+        `${contentLibrariesListV2.results[1].org} / ${contentLibrariesListV2.results[1].slug}`,
+      )).toBeVisible();
+    });
+
+    it('should show a "not found" message if no v2 libraries were loaded', async () => {
+      mockGetContentLibraryV2List.applyMockEmpty();
+      render();
+      axiosMock.onGet(getStudioHomeApiUrl()).reply(200, generateGetStudioHomeDataApiResponse());
+      await executeThunk(fetchStudioHomeData(), store.dispatch);
+
+      const librariesTab = screen.getByRole('tab', { name: librariesBetaTabTitle });
+      fireEvent.click(librariesTab);
+
+      expect(librariesTab).toHaveClass('active');
+
+      expect(await screen.findByText(
+        tabMessages.librariesV2TabLibraryNotFoundAlertMessage.defaultMessage,
+      )).toBeVisible();
+    });
+
+    it('should hide Libraries tab when libraries are disabled', async () => {
+      const data = generateGetStudioHomeDataApiResponse();
+
+      render({ librariesV1Enabled: false });
+      axiosMock.onGet(getStudioHomeApiUrl()).reply(200, data);
+      await executeThunk(fetchStudioHomeData(), store.dispatch);
+
+      expect(screen.getByText(tabMessages.coursesTabTitle.defaultMessage)).toBeInTheDocument();
+      expect(screen.queryByText(tabMessages.legacyLibrariesTabTitle.defaultMessage)).toBeNull();
+    });
+
+    it('should render legacy libraries fetch failure alert', async () => {
+      render();
+      axiosMock.onGet(getStudioHomeApiUrl()).reply(200, generateGetStudioHomeDataApiResponse());
+      axiosMock.onGet(libraryApiLink).reply(404);
+      await executeThunk(fetchStudioHomeData(), store.dispatch);
+      await executeThunk(fetchLibraryData(), store.dispatch);
+
+      const librariesTab = screen.getByText(tabMessages.legacyLibrariesTabTitle.defaultMessage);
+      fireEvent.click(librariesTab);
+
+      expect(librariesTab).toHaveClass('active');
+
+      expect(await screen.findByText(tabMessages.librariesTabErrorMessage.defaultMessage)).toBeVisible();
+    });
+
+    it('should render v2 libraries fetch failure alert', async () => {
+      mockGetContentLibraryV2List.applyMockError();
+      render();
+      axiosMock.onGet(getStudioHomeApiUrl()).reply(200, generateGetStudioHomeDataApiResponse());
+      await executeThunk(fetchStudioHomeData(), store.dispatch);
+
+      const librariesTab = screen.getByRole('tab', { name: librariesBetaTabTitle });
+      fireEvent.click(librariesTab);
+
+      expect(librariesTab).toHaveClass('active');
+
+      expect(await screen.findByText(
+        tabMessages.librariesTabErrorMessage.defaultMessage,
+      )).toBeVisible();
+    });
+  });
+});
diff --git a/src/studio-home/tabs-section/archived-tab/index.jsx b/src/studio-home/tabs-section/archived-tab/index.jsx
new file mode 100644
index 0000000000..19404e2d72
--- /dev/null
+++ b/src/studio-home/tabs-section/archived-tab/index.jsx
@@ -0,0 +1,78 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { Icon, Row } from '@openedx/paragon';
+import { Error } from '@openedx/paragon/icons';
+
+import { LoadingSpinner } from '../../../generic/Loading';
+import CardItem from '../../card-item';
+import { sortAlphabeticallyArray } from '../utils';
+import AlertMessage from '../../../generic/alert-message';
+import messages from '../messages';
+
+const ArchivedTab = ({
+  archivedCoursesData,
+  isLoading,
+  isFailed,
+  // injected
+  intl,
+}) => {
+  if (isLoading) {
+    return (
+      <Row className="m-0 mt-4 justify-content-center">
+        <LoadingSpinner />
+      </Row>
+    );
+  }
+  return (
+    isFailed ? (
+      <AlertMessage
+        variant="danger"
+        description={(
+          <Row className="m-0 align-items-center">
+            <Icon src={Error} className="text-danger-500 mr-1" />
+            <span>{intl.formatMessage(messages.archiveTabErrorMessage)}</span>
+          </Row>
+        )}
+      />
+    ) : (
+      <div className="courses-tab">
+        {sortAlphabeticallyArray(archivedCoursesData).map(({
+          courseKey, displayName, lmsLink, org, rerunLink, number, run, url,
+        }) => (
+          <CardItem
+            key={courseKey}
+            displayName={displayName}
+            lmsLink={lmsLink}
+            rerunLink={rerunLink}
+            org={org}
+            number={number}
+            run={run}
+            url={url}
+          />
+        ))}
+      </div>
+    )
+  );
+};
+
+ArchivedTab.propTypes = {
+  archivedCoursesData: PropTypes.arrayOf(
+    PropTypes.shape({
+      courseKey: PropTypes.string.isRequired,
+      displayName: PropTypes.string.isRequired,
+      lmsLink: PropTypes.string.isRequired,
+      number: PropTypes.string.isRequired,
+      org: PropTypes.string.isRequired,
+      rerunLink: PropTypes.string.isRequired,
+      run: PropTypes.string.isRequired,
+      url: PropTypes.string.isRequired,
+    }),
+  ).isRequired,
+  isLoading: PropTypes.bool.isRequired,
+  isFailed: PropTypes.bool.isRequired,
+  // injected
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(ArchivedTab);
diff --git a/src/studio-home/tabs-section/courses-tab/contact-administrator/index.jsx b/src/studio-home/tabs-section/courses-tab/contact-administrator/index.jsx
new file mode 100644
index 0000000000..ab809d8aed
--- /dev/null
+++ b/src/studio-home/tabs-section/courses-tab/contact-administrator/index.jsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import PropTypes from 'prop-types';
+import { Button, Card } from '@openedx/paragon';
+import { Add as AddIcon } from '@openedx/paragon/icons/es5';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+
+import { getStudioHomeData } from '../../../data/selectors';
+import messages from '../../../messages';
+
+const ContactAdministrator = ({
+  intl, hasAbilityToCreateCourse, showNewCourseContainer, onClickNewCourse,
+}) => {
+  const { studioShortName } = useSelector(getStudioHomeData);
+
+  return (
+    <Card variant="muted">
+      <Card.Section
+        title={intl.formatMessage(messages.defaultSection_1_Title, { studioShortName })}
+        className="small"
+      >
+        {intl.formatMessage(messages.defaultSection_1_Description)}
+      </Card.Section>
+      {hasAbilityToCreateCourse && (
+        <>
+          <Card.Divider />
+          <Card.Section
+            className="small"
+            title={intl.formatMessage(messages.defaultSection_2_Title)}
+            actions={(
+              <Button
+                iconBefore={AddIcon}
+                variant="outline-primary"
+                data-testid="contact-admin-create-course"
+                disabled={!hasAbilityToCreateCourse || showNewCourseContainer}
+                onClick={onClickNewCourse}
+              >
+                {intl.formatMessage(messages.btnAddNewCourseText)}
+              </Button>
+            )}
+          >
+            {intl.formatMessage(messages.defaultSection_2_Description)}
+          </Card.Section>
+        </>
+      )}
+    </Card>
+  );
+};
+
+ContactAdministrator.defaultProps = {
+  hasAbilityToCreateCourse: false,
+};
+
+ContactAdministrator.propTypes = {
+  intl: intlShape.isRequired,
+  hasAbilityToCreateCourse: PropTypes.bool,
+  showNewCourseContainer: PropTypes.bool.isRequired,
+  onClickNewCourse: PropTypes.func.isRequired,
+};
+
+export default injectIntl(ContactAdministrator);
diff --git a/src/studio-home/tabs-section/courses-tab/courses-filters/__snapshots__/index.test.jsx.snap b/src/studio-home/tabs-section/courses-tab/courses-filters/__snapshots__/index.test.jsx.snap
new file mode 100644
index 0000000000..a98777a5ed
--- /dev/null
+++ b/src/studio-home/tabs-section/courses-tab/courses-filters/__snapshots__/index.test.jsx.snap
@@ -0,0 +1,106 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CoursesFilters snapshot 1`] = `
+<div>
+  <div
+    class="d-flex"
+  >
+    <div
+      class="d-flex flex-row"
+    >
+      <div
+        class="pgn__searchfield d-flex mr-4"
+        data-testid="input-filter-courses-search"
+      >
+        <form
+          class="pgn__searchfield-form"
+          role="search"
+        >
+          <label
+            class="m-0"
+            for="pgn-searchfield-input-1"
+          >
+            <span
+              class="sr-only"
+            >
+              search
+            </span>
+          </label>
+          <input
+            class="form-control"
+            id="pgn-searchfield-input-1"
+            name="searchfield-input"
+            placeholder="Search"
+            role="searchbox"
+            type="text"
+            value=""
+          />
+          <button
+            aria-label="submit search"
+            class="btn-icon btn-icon-primary btn-icon-sm pgn__searchfield__iconbutton-submit"
+            type="submit"
+          >
+            <span
+              class="btn-icon__icon-container"
+            >
+              <span
+                class="pgn__icon btn-icon__icon"
+              >
+                <svg
+                  aria-hidden="true"
+                  fill="none"
+                  focusable="false"
+                  height="24"
+                  role="img"
+                  viewBox="0 0 24 24"
+                  width="24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5Zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14Z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </span>
+            </span>
+          </button>
+        </form>
+      </div>
+    </div>
+    <div
+      class="pgn__dropdown pgn__dropdown-light dropdown"
+      data-testid="dropdown"
+      id="dropdown-toggle-dropdown-toggle-course-type-menu"
+    >
+      <button
+        alt="dropdown-toggle-menu-items"
+        aria-expanded="false"
+        aria-haspopup="true"
+        class="dropdown-toggle-menu-items dropdown-toggle btn btn-none"
+        data-testid="dropdown-toggle-course-type-menu"
+        id="dropdown-toggle-course-type-menu"
+        type="button"
+      >
+        All courses
+      </button>
+    </div>
+    <div
+      class="pgn__dropdown pgn__dropdown-light dropdown"
+      data-testid="dropdown"
+      id="dropdown-toggle-dropdown-toggle-courses-order-menu"
+    >
+      <button
+        alt="dropdown-toggle-menu-items"
+        aria-expanded="false"
+        aria-haspopup="true"
+        class="dropdown-toggle-menu-items dropdown-toggle btn btn-none"
+        data-testid="dropdown-toggle-courses-order-menu"
+        id="dropdown-toggle-courses-order-menu"
+        type="button"
+      >
+        Name A-Z
+      </button>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/studio-home/tabs-section/courses-tab/courses-filters/courses-filter-menu/__snapshots__/index.test.jsx.snap b/src/studio-home/tabs-section/courses-tab/courses-filters/courses-filter-menu/__snapshots__/index.test.jsx.snap
new file mode 100644
index 0000000000..1e4a3c3778
--- /dev/null
+++ b/src/studio-home/tabs-section/courses-tab/courses-filters/courses-filter-menu/__snapshots__/index.test.jsx.snap
@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CoursesFilterMenu snapshot 1`] = `
+<div>
+  <div
+    class="pgn__dropdown pgn__dropdown-light dropdown"
+    data-testid="dropdown"
+    id="dropdown-toggle-course-filter-menu-toggle"
+  >
+    <button
+      alt="dropdown-toggle-menu-items"
+      aria-expanded="false"
+      aria-haspopup="true"
+      class="dropdown-toggle-menu-items dropdown-toggle btn btn-none"
+      data-testid="course-filter-menu-toggle"
+      id="course-filter-menu-toggle"
+      type="button"
+    >
+      
+    </button>
+  </div>
+</div>
+`;
diff --git a/src/studio-home/tabs-section/courses-tab/courses-filters/courses-filter-menu/index.jsx b/src/studio-home/tabs-section/courses-tab/courses-filters/courses-filter-menu/index.jsx
new file mode 100644
index 0000000000..9843b65330
--- /dev/null
+++ b/src/studio-home/tabs-section/courses-tab/courses-filters/courses-filter-menu/index.jsx
@@ -0,0 +1,75 @@
+import { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { useSelector } from 'react-redux';
+import { Icon, Dropdown } from '@openedx/paragon';
+import { Check } from '@openedx/paragon/icons';
+import { getStudioHomeCoursesParams } from '../../../../data/selectors';
+
+const CoursesFilterMenu = ({
+  id: idProp,
+  menuItems,
+  onItemMenuSelected,
+  defaultItemSelectedText,
+}) => {
+  const [itemMenuSelected, setItemMenuSelected] = useState(defaultItemSelectedText);
+  const { cleanFilters } = useSelector(getStudioHomeCoursesParams);
+  const handleCourseTypeSelected = (name, value) => {
+    setItemMenuSelected(name);
+    onItemMenuSelected(value);
+  };
+
+  const courseTypeSelectedIcon = (itemValue) => (itemValue === itemMenuSelected ? (
+    <Icon src={Check} className="ml-2" data-testid="menu-item-icon" />
+  ) : null);
+
+  useEffect(() => {
+    if (cleanFilters) {
+      setItemMenuSelected(defaultItemSelectedText);
+    }
+  }, [cleanFilters]);
+
+  return (
+    <Dropdown id={`dropdown-toggle-${idProp}`}>
+      <Dropdown.Toggle
+        alt="dropdown-toggle-menu-items"
+        id={idProp}
+        variant="none"
+        className="dropdown-toggle-menu-items"
+        data-testid={idProp}
+      >
+        {itemMenuSelected}
+      </Dropdown.Toggle>
+      <Dropdown.Menu>
+        {menuItems.map(({ id, name, value }) => (
+          <Dropdown.Item
+            key={id}
+            onClick={() => handleCourseTypeSelected(name, value)}
+            data-testid={`item-menu-${id}`}
+          >
+            {name} {courseTypeSelectedIcon(name)}
+          </Dropdown.Item>
+        ))}
+      </Dropdown.Menu>
+    </Dropdown>
+  );
+};
+
+CoursesFilterMenu.defaultProps = {
+  defaultItemSelectedText: '',
+  menuItems: [],
+};
+
+CoursesFilterMenu.propTypes = {
+  onItemMenuSelected: PropTypes.func.isRequired,
+  defaultItemSelectedText: PropTypes.string,
+  id: PropTypes.string.isRequired,
+  menuItems: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.string.isRequired,
+      name: PropTypes.string.isRequired,
+      value: PropTypes.string.isRequired,
+    }),
+  ),
+};
+
+export default CoursesFilterMenu;
diff --git a/src/studio-home/tabs-section/courses-tab/courses-filters/courses-filter-menu/index.test.jsx b/src/studio-home/tabs-section/courses-tab/courses-filters/courses-filter-menu/index.test.jsx
new file mode 100644
index 0000000000..a66f24e22e
--- /dev/null
+++ b/src/studio-home/tabs-section/courses-tab/courses-filters/courses-filter-menu/index.test.jsx
@@ -0,0 +1,98 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { screen, fireEvent, render } from '@testing-library/react';
+
+import CoursesFilterMenu from '.';
+
+jest.mock('react-redux', () => ({
+  ...jest.requireActual('react-redux'),
+  useSelector: jest.fn(),
+}));
+
+describe('CoursesFilterMenu', () => {
+  const onCourseTypeSelectedMock = jest.fn();
+
+  const menuItemsMock = [
+    {
+      id: 'active-courses',
+      name: 'Active',
+      value: 'active-courses',
+    },
+    {
+      id: 'upcoming-courses',
+      name: 'Upcoming',
+      value: 'upcoming-courses',
+    },
+    {
+      id: 'archived-courses',
+      name: 'Archived',
+      value: 'archived-courses',
+    },
+  ];
+
+  const renderComponent = (overrideProps = {}) => render(
+    <CoursesFilterMenu
+      menuItems={menuItemsMock}
+      onItemMenuSelected={onCourseTypeSelectedMock}
+      id="course-filter-menu-toggle"
+      {...overrideProps}
+    />,
+  );
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    useSelector.mockReturnValue({
+      currentPage: 1,
+      order: 'display_name',
+      search: '',
+      activeOnly: false,
+      archivedOnly: false,
+      cleanFilters: false,
+    });
+  });
+
+  it('snapshot', () => {
+    const { container } = renderComponent();
+    expect(container).toMatchSnapshot();
+  });
+
+  it('should render without crashing', () => {
+    renderComponent();
+    const courseFilterMenuToggle = screen.getByTestId('course-filter-menu-toggle');
+    expect(courseFilterMenuToggle).toBeInTheDocument();
+  });
+
+  it('should show the items when the menu is clicked', () => {
+    renderComponent();
+    const courseFilterMenuToggle = screen.getByTestId('course-filter-menu-toggle');
+    expect(courseFilterMenuToggle).toBeInTheDocument();
+    fireEvent.click(courseFilterMenuToggle);
+    const activeCoursesMenuItem = screen.getByText('Active');
+    const upcomingCoursesMenuItem = screen.getByText('Upcoming');
+    const archiveCoursesMenuItem = screen.getByText('Archived');
+    expect(activeCoursesMenuItem).toBeInTheDocument();
+    expect(upcomingCoursesMenuItem).toBeInTheDocument();
+    expect(archiveCoursesMenuItem).toBeInTheDocument();
+  });
+
+  it('should show an icon when a menu item is selected', () => {
+    renderComponent();
+    const courseFilterMenuToggle = screen.getByTestId('course-filter-menu-toggle');
+    expect(courseFilterMenuToggle).toBeInTheDocument();
+    fireEvent.click(courseFilterMenuToggle);
+    const activeCoursesMenuItem = screen.getByTestId('item-menu-active-courses');
+    fireEvent.click(activeCoursesMenuItem);
+    fireEvent.click(courseFilterMenuToggle);
+    expect(screen.getByTestId('menu-item-icon')).toBeInTheDocument();
+  });
+
+  it('should call onCourseTypeSelected function when a menu item is selected ', () => {
+    renderComponent();
+    const courseFilterMenuToggle = screen.getByTestId('course-filter-menu-toggle');
+    expect(courseFilterMenuToggle).toBeInTheDocument();
+    fireEvent.click(courseFilterMenuToggle);
+    const activeCoursesMenuItem = screen.getByTestId('item-menu-active-courses');
+    fireEvent.click(activeCoursesMenuItem);
+    expect(onCourseTypeSelectedMock).toHaveBeenCalled();
+  });
+});
diff --git a/src/studio-home/tabs-section/courses-tab/courses-filters/courses-order-filter-menu/__snapshots__/index.test.jsx.snap b/src/studio-home/tabs-section/courses-tab/courses-filters/courses-order-filter-menu/__snapshots__/index.test.jsx.snap
new file mode 100644
index 0000000000..ef18a8a53b
--- /dev/null
+++ b/src/studio-home/tabs-section/courses-tab/courses-filters/courses-order-filter-menu/__snapshots__/index.test.jsx.snap
@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CoursesTypesFilterMenu snapshot 1`] = `
+<div>
+  <div
+    class="pgn__dropdown pgn__dropdown-light dropdown"
+    data-testid="dropdown"
+    id="dropdown-toggle-dropdown-toggle-courses-order-menu"
+  >
+    <button
+      alt="dropdown-toggle-menu-items"
+      aria-expanded="false"
+      aria-haspopup="true"
+      class="dropdown-toggle-menu-items dropdown-toggle btn btn-none"
+      data-testid="dropdown-toggle-courses-order-menu"
+      id="dropdown-toggle-courses-order-menu"
+      type="button"
+    >
+      Name A-Z
+    </button>
+  </div>
+</div>
+`;
diff --git a/src/studio-home/tabs-section/courses-tab/courses-filters/courses-order-filter-menu/index.jsx b/src/studio-home/tabs-section/courses-tab/courses-filters/courses-order-filter-menu/index.jsx
new file mode 100644
index 0000000000..837d11dca9
--- /dev/null
+++ b/src/studio-home/tabs-section/courses-tab/courses-filters/courses-order-filter-menu/index.jsx
@@ -0,0 +1,56 @@
+import { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import messages from './messages';
+
+import CoursesFilterMenu from '../courses-filter-menu';
+
+const CoursesOrderFilterMenu = ({ onItemMenuSelected }) => {
+  const intl = useIntl();
+
+  const courseOrders = useMemo(
+    () => [
+      {
+        id: 'az-courses',
+        name: intl.formatMessage(messages.coursesOrderFilterMenuAscendantCurses),
+        value: 'azCourses',
+      },
+      {
+        id: 'za-courses',
+        name: intl.formatMessage(messages.coursesOrderFilterMenuDescendantCurses),
+        value: 'zaCourses',
+      },
+      {
+        id: 'newest-courses',
+        name: intl.formatMessage(messages.coursesOrderFilterMenuNewestCurses),
+        value: 'newestCourses',
+      },
+      {
+        id: 'oldest-courses',
+        name: intl.formatMessage(messages.coursesOrderFilterMenuOldestCurses),
+        value: 'oldestCourses',
+      },
+    ],
+    [intl],
+  );
+
+  const handleCourseTypeSelected = (courseOrder) => {
+    onItemMenuSelected(courseOrder);
+  };
+
+  return (
+    <CoursesFilterMenu
+      id="dropdown-toggle-courses-order-menu"
+      menuItems={courseOrders}
+      onItemMenuSelected={handleCourseTypeSelected}
+      defaultItemSelectedText={intl.formatMessage(messages.coursesOrderFilterMenuAscendantCurses)}
+    />
+  );
+};
+
+CoursesOrderFilterMenu.propTypes = {
+  onItemMenuSelected: PropTypes.func.isRequired,
+};
+
+export default CoursesOrderFilterMenu;
diff --git a/src/studio-home/tabs-section/courses-tab/courses-filters/courses-order-filter-menu/index.test.jsx b/src/studio-home/tabs-section/courses-tab/courses-filters/courses-order-filter-menu/index.test.jsx
new file mode 100644
index 0000000000..dc00320a5b
--- /dev/null
+++ b/src/studio-home/tabs-section/courses-tab/courses-filters/courses-order-filter-menu/index.test.jsx
@@ -0,0 +1,91 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { screen, fireEvent, render } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import CoursesOrderFilterMenu from '.';
+import message from './messages';
+
+jest.mock('react-redux', () => ({
+  ...jest.requireActual('react-redux'),
+  useSelector: jest.fn(),
+}));
+describe('CoursesTypesFilterMenu', () => {
+  // eslint-disable-next-line react/prop-types
+  const IntlProviderWrapper = ({ children }) => (
+    <IntlProvider locale="en" messages={{}}>
+      {children}
+    </IntlProvider>
+  );
+
+  const onItemMenuSelectedMock = jest.fn();
+
+  const renderComponent = (overrideProps = {}) => render(
+    <IntlProviderWrapper>
+      <CoursesOrderFilterMenu
+        onItemMenuSelected={onItemMenuSelectedMock}
+        {...overrideProps}
+      />
+    </IntlProviderWrapper>,
+  );
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    useSelector.mockReturnValue({
+      currentPage: 1,
+      order: 'display_name',
+      search: '',
+      activeOnly: false,
+      archivedOnly: false,
+      cleanFilters: false,
+    });
+  });
+
+  it('snapshot', () => {
+    const { container } = renderComponent();
+    expect(container).toMatchSnapshot();
+  });
+
+  it('should render without crashing', () => {
+    renderComponent();
+    const courseOrderMenu = screen.getByTestId('dropdown-toggle-courses-order-menu');
+    expect(courseOrderMenu).toBeInTheDocument();
+  });
+
+  it('should show the items when the menu is clicked', () => {
+    renderComponent();
+    const courseOrderMenuFilter = screen.getByTestId('dropdown-toggle-courses-order-menu');
+    fireEvent.click(courseOrderMenuFilter);
+    const { defaultMessage: ascendantCoursesMenuText } = message.coursesOrderFilterMenuAscendantCurses;
+    const { defaultMessage: descendantCoursesMenuText } = message.coursesOrderFilterMenuDescendantCurses;
+    const { defaultMessage: newWestCoursesMenuText } = message.coursesOrderFilterMenuNewestCurses;
+    const { defaultMessage: oldestCoursesMenuText } = message.coursesOrderFilterMenuOldestCurses;
+    const ascendantCoursesMenuItem = screen.getByTestId('item-menu-az-courses');
+    const descendantCoursesMenuItem = screen.getByText(descendantCoursesMenuText);
+    const newestCoursesMenuItem = screen.getByText(newWestCoursesMenuText);
+    const oldestCoursesMenuItem = screen.getByText(oldestCoursesMenuText);
+    expect(ascendantCoursesMenuItem.textContent).toContain(ascendantCoursesMenuText);
+    expect(descendantCoursesMenuItem).toBeInTheDocument();
+    expect(newestCoursesMenuItem).toBeInTheDocument();
+    expect(oldestCoursesMenuItem).toBeInTheDocument();
+  });
+
+  it('should show an icon when a menu item is selected ', () => {
+    renderComponent();
+    const courseOrderMenu = screen.getByTestId('dropdown-toggle-courses-order-menu');
+    fireEvent.click(courseOrderMenu);
+    const ascendantCoursesMenuItem = screen.getByTestId('item-menu-az-courses');
+    fireEvent.click(ascendantCoursesMenuItem);
+    fireEvent.click(courseOrderMenu);
+    expect(screen.getByTestId('menu-item-icon')).toBeInTheDocument();
+  });
+
+  it('should call onCourseTypeSelected function when a menu item is selected ', () => {
+    renderComponent();
+    const courseOrderMenu = screen.getByTestId('dropdown-toggle-courses-order-menu');
+    fireEvent.click(courseOrderMenu);
+    const ascendantCoursesMenuItem = screen.getByTestId('item-menu-az-courses');
+    fireEvent.click(ascendantCoursesMenuItem);
+    expect(onItemMenuSelectedMock).toHaveBeenCalled();
+  });
+});
diff --git a/src/studio-home/tabs-section/courses-tab/courses-filters/courses-order-filter-menu/messages.js b/src/studio-home/tabs-section/courses-tab/courses-filters/courses-order-filter-menu/messages.js
new file mode 100644
index 0000000000..4021312b4a
--- /dev/null
+++ b/src/studio-home/tabs-section/courses-tab/courses-filters/courses-order-filter-menu/messages.js
@@ -0,0 +1,22 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  coursesOrderFilterMenuAscendantCurses: {
+    id: 'course-authoring.studio-home.courses.tab.order-filter-menu.ascendant-courses',
+    defaultMessage: 'Name A-Z',
+  },
+  coursesOrderFilterMenuDescendantCurses: {
+    id: 'course-authoring.studio-home.courses.tab.order-filter-menu.descendant-courses',
+    defaultMessage: 'Name Z-A',
+  },
+  coursesOrderFilterMenuNewestCurses: {
+    id: 'course-authoring.studio-home.courses.tab.order-filter-menu.newest-courses',
+    defaultMessage: 'Newest',
+  },
+  coursesOrderFilterMenuOldestCurses: {
+    id: 'course-authoring.studio-home.courses.tab.order-filter-menu.oldest-courses',
+    defaultMessage: 'Oldest',
+  },
+});
+
+export default messages;
diff --git a/src/studio-home/tabs-section/courses-tab/courses-filters/courses-types-filter-menu/__snapshots__/index.test.jsx.snap b/src/studio-home/tabs-section/courses-tab/courses-filters/courses-types-filter-menu/__snapshots__/index.test.jsx.snap
new file mode 100644
index 0000000000..12ba90344f
--- /dev/null
+++ b/src/studio-home/tabs-section/courses-tab/courses-filters/courses-types-filter-menu/__snapshots__/index.test.jsx.snap
@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CoursesTypesFilterMenu snapshot 1`] = `
+<div>
+  <div
+    class="pgn__dropdown pgn__dropdown-light dropdown"
+    data-testid="dropdown"
+    id="dropdown-toggle-dropdown-toggle-course-type-menu"
+  >
+    <button
+      alt="dropdown-toggle-menu-items"
+      aria-expanded="false"
+      aria-haspopup="true"
+      class="dropdown-toggle-menu-items dropdown-toggle btn btn-none"
+      data-testid="dropdown-toggle-course-type-menu"
+      id="dropdown-toggle-course-type-menu"
+      type="button"
+    >
+      All courses
+    </button>
+  </div>
+</div>
+`;
diff --git a/src/studio-home/tabs-section/courses-tab/courses-filters/courses-types-filter-menu/index.jsx b/src/studio-home/tabs-section/courses-tab/courses-filters/courses-types-filter-menu/index.jsx
new file mode 100644
index 0000000000..70189e8fed
--- /dev/null
+++ b/src/studio-home/tabs-section/courses-tab/courses-filters/courses-types-filter-menu/index.jsx
@@ -0,0 +1,51 @@
+import { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import messages from './messages';
+
+import CoursesFilterMenu from '../courses-filter-menu';
+
+const CoursesTypesFilterMenu = ({ onItemMenuSelected }) => {
+  const intl = useIntl();
+
+  const courseTypes = useMemo(
+    () => [
+      {
+        id: 'all-courses',
+        name: intl.formatMessage(messages.coursesTypesFilterMenuAllCurses),
+        value: 'allCourses',
+      },
+      {
+        id: 'active-courses',
+        name: intl.formatMessage(messages.coursesTypesFilterMenuActiveCurses),
+        value: 'activeCourses',
+      },
+      {
+        id: 'archived-courses',
+        name: intl.formatMessage(messages.coursesTypesFilterMenuArchivedCurses),
+        value: 'archivedCourses',
+      },
+    ],
+    [intl],
+  );
+
+  const handleCourseTypeSelected = (courseType) => {
+    onItemMenuSelected(courseType);
+  };
+
+  return (
+    <CoursesFilterMenu
+      id="dropdown-toggle-course-type-menu"
+      menuItems={courseTypes}
+      onItemMenuSelected={handleCourseTypeSelected}
+      defaultItemSelectedText={intl.formatMessage(messages.coursesTypesFilterMenuAllCurses)}
+    />
+  );
+};
+
+CoursesTypesFilterMenu.propTypes = {
+  onItemMenuSelected: PropTypes.func.isRequired,
+};
+
+export default CoursesTypesFilterMenu;
diff --git a/src/studio-home/tabs-section/courses-tab/courses-filters/courses-types-filter-menu/index.test.jsx b/src/studio-home/tabs-section/courses-tab/courses-filters/courses-types-filter-menu/index.test.jsx
new file mode 100644
index 0000000000..ddd2fd9746
--- /dev/null
+++ b/src/studio-home/tabs-section/courses-tab/courses-filters/courses-types-filter-menu/index.test.jsx
@@ -0,0 +1,89 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { screen, fireEvent, render } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import CoursesTypesFilterMenu from '.';
+import message from './messages';
+
+jest.mock('react-redux', () => ({
+  ...jest.requireActual('react-redux'),
+  useSelector: jest.fn(),
+}));
+
+describe('CoursesTypesFilterMenu', () => {
+  // eslint-disable-next-line react/prop-types
+  const IntlProviderWrapper = ({ children }) => (
+    <IntlProvider locale="en" messages={{}}>
+      {children}
+    </IntlProvider>
+  );
+
+  const onItemMenuSelectedMock = jest.fn();
+
+  const renderComponent = (overrideProps = {}) => render(
+    <IntlProviderWrapper>
+      <CoursesTypesFilterMenu
+        onItemMenuSelected={onItemMenuSelectedMock}
+        {...overrideProps}
+      />
+    </IntlProviderWrapper>,
+  );
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    useSelector.mockReturnValue({
+      currentPage: 1,
+      order: 'display_name',
+      search: '',
+      activeOnly: false,
+      archivedOnly: false,
+      cleanFilters: false,
+    });
+  });
+
+  it('snapshot', () => {
+    const { container } = renderComponent();
+    expect(container).toMatchSnapshot();
+  });
+
+  it('should render without crashing', () => {
+    renderComponent();
+    const courseTypesMenu = screen.getByTestId('dropdown-toggle-course-type-menu');
+    expect(courseTypesMenu).toBeInTheDocument();
+  });
+
+  it('should show the items when the menu is clicked', () => {
+    renderComponent();
+    const courseTypeMenuFilter = screen.getByTestId('dropdown-toggle-course-type-menu');
+    fireEvent.click(courseTypeMenuFilter);
+    const { defaultMessage: activeCoursesMenuText } = message.coursesTypesFilterMenuActiveCurses;
+    const { defaultMessage: allCoursesMenuText } = message.coursesTypesFilterMenuAllCurses;
+    const { defaultMessage: archiveCoursesMenuText } = message.coursesTypesFilterMenuArchivedCurses;
+    const activeCoursesMenuItem = screen.getByText(activeCoursesMenuText);
+    const allCoursesMenuItem = screen.getByTestId('item-menu-all-courses');
+    const archiveCoursesMenuItem = screen.getByText(archiveCoursesMenuText);
+    expect(activeCoursesMenuItem).toBeInTheDocument();
+    expect(allCoursesMenuItem.textContent).toContain(allCoursesMenuText);
+    expect(archiveCoursesMenuItem).toBeInTheDocument();
+  });
+
+  it('should show an icon when a menu item is selected ', () => {
+    renderComponent();
+    const courseTypesMenu = screen.getByTestId('dropdown-toggle-course-type-menu');
+    fireEvent.click(courseTypesMenu);
+    const activeCoursesMenuItem = screen.getByTestId('item-menu-active-courses');
+    fireEvent.click(activeCoursesMenuItem);
+    fireEvent.click(courseTypesMenu);
+    expect(screen.getByTestId('menu-item-icon')).toBeInTheDocument();
+  });
+
+  it('should call onCourseTypeSelected function when a menu item is selected ', () => {
+    renderComponent();
+    const courseTypesMenu = screen.getByTestId('dropdown-toggle-course-type-menu');
+    fireEvent.click(courseTypesMenu);
+    const activeCoursesMenuItem = screen.getByTestId('item-menu-active-courses');
+    fireEvent.click(activeCoursesMenuItem);
+    expect(onItemMenuSelectedMock).toHaveBeenCalled();
+  });
+});
diff --git a/src/studio-home/tabs-section/courses-tab/courses-filters/courses-types-filter-menu/messages.js b/src/studio-home/tabs-section/courses-tab/courses-filters/courses-types-filter-menu/messages.js
new file mode 100644
index 0000000000..f75aad8b08
--- /dev/null
+++ b/src/studio-home/tabs-section/courses-tab/courses-filters/courses-types-filter-menu/messages.js
@@ -0,0 +1,18 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  coursesTypesFilterMenuAllCurses: {
+    id: 'course-authoring.studio-home.courses.tab.types-filter-menu.all-courses',
+    defaultMessage: 'All courses',
+  },
+  coursesTypesFilterMenuActiveCurses: {
+    id: 'course-authoring.studio-home.courses.tab.types-filter-menu.active-courses',
+    defaultMessage: 'Active',
+  },
+  coursesTypesFilterMenuArchivedCurses: {
+    id: 'course-authoring.studio-home.courses.tab.types-filter-menu.archived-courses',
+    defaultMessage: 'Archived',
+  },
+});
+
+export default messages;
diff --git a/src/studio-home/tabs-section/courses-tab/courses-filters/index.jsx b/src/studio-home/tabs-section/courses-tab/courses-filters/index.jsx
new file mode 100644
index 0000000000..acd7a8df18
--- /dev/null
+++ b/src/studio-home/tabs-section/courses-tab/courses-filters/index.jsx
@@ -0,0 +1,138 @@
+import { useState, useCallback } from 'react';
+import { useSelector } from 'react-redux';
+import PropTypes from 'prop-types';
+import { SearchField } from '@openedx/paragon';
+import { debounce } from 'lodash';
+
+import { getStudioHomeCoursesParams } from '../../../data/selectors';
+import { updateStudioHomeCoursesCustomParams } from '../../../data/slice';
+import { fetchStudioHomeData } from '../../../data/thunks';
+import { LoadingSpinner } from '../../../../generic/Loading';
+import CoursesTypesFilterMenu from './courses-types-filter-menu';
+import CoursesOrderFilterMenu from './courses-order-filter-menu';
+import './index.scss';
+
+/* regex to check if a string has only whitespace
+  example "    "
+*/
+const regexOnlyWhiteSpaces = /^\s+$/;
+
+const CoursesFilters = ({
+  dispatch,
+  locationValue,
+  onSubmitSearchField,
+  isLoading,
+}) => {
+  const studioHomeCoursesParams = useSelector(getStudioHomeCoursesParams);
+  const {
+    order,
+    search,
+    activeOnly,
+    archivedOnly,
+    cleanFilters,
+  } = studioHomeCoursesParams;
+  const [inputSearchValue, setInputSearchValue] = useState('');
+
+  const getFilterTypeData = (baseFilters) => ({
+    archivedCourses: { ...baseFilters, archivedOnly: true, activeOnly: undefined },
+    activeCourses: { ...baseFilters, activeOnly: true, archivedOnly: undefined },
+    allCourses: { ...baseFilters, archivedOnly: undefined, activeOnly: undefined },
+    azCourses: { ...baseFilters, order: 'display_name' },
+    zaCourses: { ...baseFilters, order: '-display_name' },
+    newestCourses: { ...baseFilters, order: '-created' },
+    oldestCourses: { ...baseFilters, order: 'created' },
+  });
+
+  const handleMenuFilterItemSelected = (filterType) => {
+    const baseFilters = {
+      currentPage: 1,
+      search,
+      order,
+      isFiltered: true,
+      archivedOnly,
+      activeOnly,
+      cleanFilters: false,
+    };
+
+    const filterParams = getFilterTypeData(baseFilters);
+    const filterParamsFormat = filterParams[filterType] || baseFilters;
+    const {
+      coursesOrderLabel,
+      coursesTypesLabel,
+      isFiltered,
+      orderTypeLabel,
+      cleanFilters: cleanFilterParams,
+      currentPage,
+      ...customParams
+    } = filterParamsFormat;
+    dispatch(updateStudioHomeCoursesCustomParams(filterParamsFormat));
+    dispatch(fetchStudioHomeData(locationValue, false, { page: 1, ...customParams }, true));
+  };
+
+  const handleSearchCourses = (searchValueDebounced) => {
+    const valueFormatted = searchValueDebounced.trim();
+    const filterParams = {
+      search: valueFormatted.length > 0 ? valueFormatted : undefined,
+      activeOnly,
+      archivedOnly,
+      order,
+    };
+    const hasOnlySpaces = regexOnlyWhiteSpaces.test(searchValueDebounced);
+
+    if (valueFormatted !== search && !hasOnlySpaces && !cleanFilters) {
+      dispatch(updateStudioHomeCoursesCustomParams({
+        currentPage: 1,
+        isFiltered: true,
+        cleanFilters: false,
+        ...filterParams,
+      }));
+
+      dispatch(fetchStudioHomeData(locationValue, false, { page: 1, ...filterParams }, true));
+    }
+
+    setInputSearchValue(searchValueDebounced);
+  };
+
+  const handleSearchCoursesDebounced = useCallback(
+    debounce((value) => handleSearchCourses(value), 400),
+    [activeOnly, archivedOnly, order, inputSearchValue],
+  );
+
+  return (
+    <div className="d-flex">
+      <div className="d-flex flex-row">
+        <SearchField
+          onSubmit={onSubmitSearchField}
+          onChange={handleSearchCoursesDebounced}
+          value={cleanFilters ? '' : inputSearchValue}
+          className="mr-4"
+          data-testid="input-filter-courses-search"
+          placeholder="Search"
+        />
+        {isLoading && (
+          <span className="search-field-loading" data-testid="loading-search-spinner">
+            <LoadingSpinner size="sm" />
+          </span>
+        )}
+      </div>
+
+      <CoursesTypesFilterMenu onItemMenuSelected={handleMenuFilterItemSelected} />
+      <CoursesOrderFilterMenu onItemMenuSelected={handleMenuFilterItemSelected} />
+    </div>
+  );
+};
+
+CoursesFilters.defaultProps = {
+  locationValue: '',
+  onSubmitSearchField: () => {},
+  isLoading: false,
+};
+
+CoursesFilters.propTypes = {
+  dispatch: PropTypes.func.isRequired,
+  locationValue: PropTypes.string,
+  onSubmitSearchField: PropTypes.func,
+  isLoading: PropTypes.bool,
+};
+
+export default CoursesFilters;
diff --git a/src/studio-home/tabs-section/courses-tab/courses-filters/index.scss b/src/studio-home/tabs-section/courses-tab/courses-filters/index.scss
new file mode 100644
index 0000000000..68902f2b44
--- /dev/null
+++ b/src/studio-home/tabs-section/courses-tab/courses-filters/index.scss
@@ -0,0 +1,4 @@
+.search-field-loading {
+  margin-left: -25%;
+  margin-top: .5rem;
+}
diff --git a/src/studio-home/tabs-section/courses-tab/courses-filters/index.test.jsx b/src/studio-home/tabs-section/courses-tab/courses-filters/index.test.jsx
new file mode 100644
index 0000000000..02d69e284a
--- /dev/null
+++ b/src/studio-home/tabs-section/courses-tab/courses-filters/index.test.jsx
@@ -0,0 +1,167 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import {
+  screen, fireEvent, render, waitFor,
+} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import CoursesFilters from '.';
+
+jest.mock('react-redux', () => ({
+  ...jest.requireActual('react-redux'),
+  useSelector: jest.fn(),
+}));
+
+describe('CoursesFilters', () => {
+  const dispatchMock = jest.fn();
+
+  // eslint-disable-next-line react/prop-types
+  const IntlProviderWrapper = ({ children }) => (
+    <IntlProvider locale="en" messages={{}}>
+      {children}
+    </IntlProvider>
+  );
+
+  const renderComponent = (overrideProps = {}) => render(
+    <IntlProviderWrapper>
+      <CoursesFilters
+        dispatch={dispatchMock}
+        {...overrideProps}
+      />
+    </IntlProviderWrapper>,
+
+  );
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    useSelector.mockReturnValue({
+      currentPage: 1,
+      order: 'display_name',
+      search: '',
+      activeOnly: false,
+      archivedOnly: false,
+      cleanFilters: false,
+    });
+  });
+
+  it('snapshot', () => {
+    const { container } = renderComponent();
+    expect(container).toMatchSnapshot();
+  });
+
+  it('should render without crashing', () => {
+    renderComponent();
+    const searchInput = screen.getByTestId('input-filter-courses-search');
+    expect(searchInput).toBeInTheDocument();
+  });
+
+  it('should render type courses menu and order curses menu', () => {
+    renderComponent();
+    const courseTypeMenuFilter = screen.getByTestId('dropdown-toggle-course-type-menu');
+    const courseOrderMenuFilter = screen.getByTestId('dropdown-toggle-courses-order-menu');
+    expect(courseTypeMenuFilter).toBeInTheDocument();
+    expect(courseOrderMenuFilter).toBeInTheDocument();
+  });
+
+  it('should call dispatch when the search input changes', async () => {
+    renderComponent();
+    const searchInput = screen.getByRole('searchbox');
+    fireEvent.change(searchInput, { target: { value: 'test' } });
+    await waitFor(() => expect(dispatchMock).toHaveBeenCalled());
+  });
+
+  it('should call dispatch when a menu item of course type menu is selected', () => {
+    renderComponent();
+    const courseTypeMenuFilter = screen.getByTestId('dropdown-toggle-course-type-menu');
+    fireEvent.click(courseTypeMenuFilter);
+    const activeCoursesMenuItem = screen.getByTestId('item-menu-active-courses');
+    fireEvent.click(activeCoursesMenuItem);
+    expect(dispatchMock).toHaveBeenCalled();
+  });
+
+  it('should call dispatch when a menu item of course order menu is selected', () => {
+    renderComponent();
+    const courseOrderMenuFilter = screen.getByTestId('dropdown-toggle-courses-order-menu');
+    fireEvent.click(courseOrderMenuFilter);
+    const descendantCoursesMenuItem = screen.getByTestId('item-menu-za-courses');
+    fireEvent.click(descendantCoursesMenuItem);
+    expect(dispatchMock).toHaveBeenCalled();
+  });
+
+  it('should clear the search input when cleanFilters is true', () => {
+    useSelector.mockReturnValue({
+      cleanFilters: true,
+    });
+    renderComponent();
+    const searchInput = screen.getByRole('searchbox');
+    expect(searchInput.value).toBe('');
+  });
+
+  it('should call dispatch with the correct parameters when a menu item of course type menu is selected', () => {
+    renderComponent();
+    const courseTypeMenuFilter = screen.getByTestId('dropdown-toggle-course-type-menu');
+    fireEvent.click(courseTypeMenuFilter);
+    const activeCoursesMenuItem = screen.getByTestId('item-menu-active-courses');
+    fireEvent.click(activeCoursesMenuItem);
+
+    // Check that updateStudioHomeCoursesCustomParams is called with the correct payload
+    expect(dispatchMock).toHaveBeenNthCalledWith(1, expect.objectContaining({
+      payload: {
+        currentPage: 1,
+        search: '',
+        order: 'display_name',
+        isFiltered: true,
+        archivedOnly: undefined,
+        activeOnly: true,
+        cleanFilters: false,
+      },
+    }));
+  });
+
+  it('should handle search input submission', () => {
+    const handleSubmit = jest.fn();
+    renderComponent({ onSubmitSearchField: handleSubmit });
+    const searchInput = screen.getByRole('searchbox');
+    userEvent.type(searchInput, 'testing{enter}');
+    expect(handleSubmit).toHaveBeenCalled();
+  });
+
+  it('should call dispatch after debounce delay when the search input changes', async () => {
+    renderComponent();
+    const searchInput = screen.getByRole('searchbox');
+    fireEvent.change(searchInput, { target: { value: 'test' } });
+    await waitFor(() => expect(dispatchMock).toHaveBeenCalled(), { timeout: 500 });
+    expect(dispatchMock).toHaveBeenCalledWith(expect.anything());
+  });
+
+  it('should not call dispatch when the search input contains only spaces', async () => {
+    renderComponent();
+    const searchInput = screen.getByRole('searchbox');
+    fireEvent.change(searchInput, { target: { value: '   ' } });
+    await waitFor(() => expect(dispatchMock).not.toHaveBeenCalled(), { timeout: 500 });
+    expect(dispatchMock).not.toHaveBeenCalled();
+  });
+
+  it('should display the loading spinner when isLoading is true', () => {
+    renderComponent({ isLoading: true });
+    const spinner = screen.getByTestId('loading-search-spinner');
+    expect(spinner).toBeInTheDocument();
+  });
+
+  it('should not display the loading spinner when isLoading is false', () => {
+    renderComponent({ isLoading: false });
+    const spinner = screen.queryByTestId('loading-search-spinner');
+    expect(spinner).not.toBeInTheDocument();
+  });
+
+  it('should clear the search input and call dispatch when the reset button is clicked', async () => {
+    renderComponent();
+    const searchInput = screen.getByRole('searchbox');
+    fireEvent.change(searchInput, { target: { value: 'test' } });
+    const form = searchInput.closest('form');
+    const resetButton = form.querySelector('button[type="reset"]');
+    fireEvent.click(resetButton);
+    expect(searchInput.value).toBe('');
+  });
+});
diff --git a/src/studio-home/tabs-section/courses-tab/index.scss b/src/studio-home/tabs-section/courses-tab/index.scss
new file mode 100644
index 0000000000..da6d5f7411
--- /dev/null
+++ b/src/studio-home/tabs-section/courses-tab/index.scss
@@ -0,0 +1,3 @@
+.courses-tab-container {
+  min-height: 80vh;
+}
diff --git a/src/studio-home/tabs-section/courses-tab/index.test.tsx b/src/studio-home/tabs-section/courses-tab/index.test.tsx
new file mode 100644
index 0000000000..8c9f1d8dd4
--- /dev/null
+++ b/src/studio-home/tabs-section/courses-tab/index.test.tsx
@@ -0,0 +1,144 @@
+import React from 'react';
+import { initializeMockApp } from '@edx/frontend-platform';
+import { render, screen } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { AppProvider } from '@edx/frontend-platform/react';
+
+import { COURSE_CREATOR_STATES } from '../../../constants';
+import initializeStore from '../../../store';
+import { studioHomeMock } from '../../__mocks__';
+import { initialState } from '../../factories/mockApiResponses';
+
+import CoursesTab from '.';
+
+const onClickNewCourse = jest.fn();
+const isShowProcessing = false;
+const isLoading = false;
+const isFailed = false;
+const numPages = 1;
+const coursesCount = studioHomeMock.courses.length;
+const isEnabledPagination = true;
+const showNewCourseContainer = true;
+
+const renderComponent = (overrideProps = {}, studioHomeState = {}) => {
+  // Generate a custom initial state based on studioHomeCoursesRequestParams
+  const customInitialState: any = { // TODO: remove 'any' once our redux state has proper types
+    ...initialState,
+    studioHome: {
+      ...initialState.studioHome,
+      ...studioHomeState,
+    },
+  };
+
+  // Initialize the store with the custom initial state
+  const store = initializeStore(customInitialState);
+
+  return render(
+    <AppProvider store={store}>
+      <IntlProvider locale="en" messages={{}}>
+        <CoursesTab
+          coursesDataItems={studioHomeMock.courses}
+          showNewCourseContainer={showNewCourseContainer}
+          onClickNewCourse={onClickNewCourse}
+          isShowProcessing={isShowProcessing}
+          isLoading={isLoading}
+          isFailed={isFailed}
+          numPages={numPages}
+          coursesCount={coursesCount}
+          isEnabledPagination={isEnabledPagination}
+          {...overrideProps}
+        />
+      </IntlProvider>
+    </AppProvider>,
+  );
+};
+
+describe('<CoursesTab />', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+  });
+
+  it('should render correctly', async () => {
+    renderComponent();
+    const coursesPaginationInfo = screen.getByTestId('pagination-info');
+    const coursesTypesMenu = screen.getByTestId('dropdown-toggle-course-type-menu');
+    const coursesOrderMenu = screen.getByTestId('dropdown-toggle-courses-order-menu');
+    const coursesFilterSearchInput = screen.getByTestId('input-filter-courses-search');
+    expect(coursesPaginationInfo).toBeInTheDocument();
+    expect(coursesTypesMenu).toBeInTheDocument();
+    expect(coursesOrderMenu).toBeInTheDocument();
+    expect(coursesFilterSearchInput).toBeInTheDocument();
+  });
+
+  it('should not render pagination and filter elements when isEnabledPagination is false', () => {
+    renderComponent({ isEnabledPagination: false });
+    const coursesPaginationInfo = screen.queryByTestId('pagination-info');
+    const coursesTypesMenu = screen.queryByTestId('dropdown-toggle-course-type-menu');
+    const coursesOrderMenu = screen.queryByTestId('dropdown-toggle-courses-order-menu');
+    const coursesFilterSearchInput = screen.queryByTestId('input-filter-courses-search');
+    expect(coursesPaginationInfo).not.toBeInTheDocument();
+    expect(coursesTypesMenu).not.toBeInTheDocument();
+    expect(coursesOrderMenu).not.toBeInTheDocument();
+    expect(coursesFilterSearchInput).not.toBeInTheDocument();
+  });
+
+  it('should render loading spinner when isLoading is true and isFiltered is false', () => {
+    const props = { isLoading: true, coursesDataItems: [] };
+    const customStoreData = { studioHomeCoursesRequestParams: { currentPage: 1, isFiltered: true } };
+    renderComponent(props, customStoreData);
+    const loadingSpinner = screen.getByRole('status');
+    expect(loadingSpinner).toBeInTheDocument();
+  });
+
+  it('should render an error message when something went wrong', () => {
+    const props = { isFailed: true };
+    const customStoreData = { studioHomeCoursesRequestParams: { currentPage: 1, isFiltered: false } };
+    renderComponent(props, customStoreData);
+    const alertErrorFailed = screen.queryByTestId('error-failed-message');
+    expect(alertErrorFailed).toBeInTheDocument();
+  });
+
+  it('should render an alert message when there is not courses found', () => {
+    const props = { isLoading: false, coursesDataItems: [] };
+    const customStoreData = { studioHomeCoursesRequestParams: { currentPage: 1, isFiltered: true } };
+    renderComponent(props, customStoreData);
+    const alertCoursesNotFound = screen.queryByTestId('courses-not-found-alert');
+    expect(alertCoursesNotFound).toBeInTheDocument();
+  });
+
+  it('should render processing courses component when isEnabledPagination is false and isShowProcessing is true', () => {
+    const props = { isShowProcessing: true, isEnabledPagination: false };
+    const customStoreData = {
+      studioHomeData: {
+        inProcessCourseActions: [],
+      },
+      studioHomeCoursesRequestParams: {
+        currentPage: 1,
+        isFiltered: true,
+      },
+    };
+    renderComponent(props, customStoreData);
+    const alertCoursesNotFound = screen.queryByTestId('processing-courses-title');
+    expect(alertCoursesNotFound).toBeInTheDocument();
+  });
+
+  it('should render CollapsibleStateWithAction when courseCreatorStatus is true', () => {
+    const props = { isShowProcessing: true, isEnabledPagination: false };
+    const customStoreData = {
+      studioHomeData: {
+        inProcessCourseActions: [],
+        courseCreatorStatus: COURSE_CREATOR_STATES.denied,
+      },
+    };
+    renderComponent(props, customStoreData);
+    const collapsibleStateWithAction = screen.queryByTestId('collapsible-state-with-action');
+    expect(collapsibleStateWithAction).toBeInTheDocument();
+  });
+});
diff --git a/src/studio-home/tabs-section/courses-tab/index.tsx b/src/studio-home/tabs-section/courses-tab/index.tsx
new file mode 100644
index 0000000000..43e62ec996
--- /dev/null
+++ b/src/studio-home/tabs-section/courses-tab/index.tsx
@@ -0,0 +1,218 @@
+import React from 'react';
+import { useLocation } from 'react-router-dom';
+import { useDispatch, useSelector } from 'react-redux';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import {
+  Icon,
+  Row,
+  Pagination,
+  Alert,
+  Button,
+} from '@openedx/paragon';
+import { Error } from '@openedx/paragon/icons';
+
+import { COURSE_CREATOR_STATES } from '../../../constants';
+import { getStudioHomeData, getStudioHomeCoursesParams } from '../../data/selectors';
+import { updateStudioHomeCoursesCustomParams } from '../../data/slice';
+import { fetchStudioHomeData } from '../../data/thunks';
+import CardItem from '../../card-item';
+import CollapsibleStateWithAction from '../../collapsible-state-with-action';
+import ContactAdministrator from './contact-administrator';
+import CoursesFilters from './courses-filters';
+import ProcessingCourses from '../../processing-courses';
+import { LoadingSpinner } from '../../../generic/Loading';
+import AlertMessage from '../../../generic/alert-message';
+import messages from '../messages';
+import './index.scss';
+
+interface Props {
+  coursesDataItems: {
+    courseKey: string;
+    displayName: string;
+    lmsLink: string | null;
+    number: string;
+    org: string;
+    rerunLink: string | null;
+    run: string;
+    url: string;
+  }[];
+  showNewCourseContainer: boolean;
+  onClickNewCourse: () => void;
+  isShowProcessing: boolean;
+  isLoading: boolean;
+  isFailed: boolean;
+  numPages: number;
+  coursesCount: number;
+  isEnabledPagination?: boolean;
+}
+
+const CoursesTab: React.FC<Props> = ({
+  coursesDataItems,
+  showNewCourseContainer,
+  onClickNewCourse,
+  isShowProcessing,
+  isLoading,
+  isFailed,
+  numPages = 0,
+  coursesCount = 0,
+  isEnabledPagination = false,
+}) => {
+  const dispatch = useDispatch();
+  const intl = useIntl();
+  const location = useLocation();
+  const {
+    courseCreatorStatus,
+    optimizationEnabled,
+  } = useSelector(getStudioHomeData);
+  const studioHomeCoursesParams = useSelector(getStudioHomeCoursesParams);
+  const { currentPage, isFiltered } = studioHomeCoursesParams;
+  const hasAbilityToCreateCourse = courseCreatorStatus === COURSE_CREATOR_STATES.granted;
+  const showCollapsible = [
+    COURSE_CREATOR_STATES.denied,
+    COURSE_CREATOR_STATES.pending,
+    COURSE_CREATOR_STATES.unrequested,
+  ].includes(courseCreatorStatus);
+  const locationValue = location.search ?? '';
+
+  const handlePageSelected = (page) => {
+    const {
+      search,
+      order,
+      archivedOnly,
+      activeOnly,
+    } = studioHomeCoursesParams;
+
+    const customParams = {
+      search,
+      order,
+      archivedOnly,
+      activeOnly,
+    };
+
+    dispatch(fetchStudioHomeData(locationValue, false, { page, ...customParams }, true));
+    dispatch(updateStudioHomeCoursesCustomParams({ currentPage: page, isFiltered: true }));
+  };
+
+  const handleCleanFilters = () => {
+    const customParams = {
+      currentPage: 1,
+      search: undefined,
+      order: 'display_name',
+      isFiltered: true,
+      cleanFilters: true,
+      archivedOnly: undefined,
+      activeOnly: undefined,
+    };
+
+    dispatch(fetchStudioHomeData(locationValue, false, { page: 1, order: 'display_name' }, true));
+    dispatch(updateStudioHomeCoursesCustomParams(customParams));
+  };
+
+  const isNotFilteringCourses = !isFiltered && !isLoading;
+  const hasCourses = coursesDataItems?.length > 0;
+
+  if (isLoading && !isFiltered) {
+    return (
+      <Row className="m-0 mt-4 justify-content-center">
+        <LoadingSpinner />
+      </Row>
+    );
+  }
+
+  return (
+    isFailed && !isFiltered ? (
+      <AlertMessage
+        variant="danger"
+        description={(
+          <Row className="m-0 align-items-center">
+            <Icon src={Error} className="text-danger-500 mr-1" />
+            <span data-testid="error-failed-message">{intl.formatMessage(messages.courseTabErrorMessage)}</span>
+          </Row>
+        )}
+      />
+    ) : (
+      <div className="courses-tab-container">
+        {isShowProcessing && !isEnabledPagination && <ProcessingCourses />}
+        {isEnabledPagination && (
+          <div className="d-flex flex-row justify-content-between my-4">
+            <CoursesFilters dispatch={dispatch} locationValue={locationValue} isLoading={isLoading} />
+            <p data-testid="pagination-info">
+              {intl.formatMessage(messages.coursesPaginationInfo, {
+                length: coursesDataItems.length,
+                total: coursesCount,
+              })}
+            </p>
+          </div>
+        )}
+        {hasCourses ? (
+          <>
+            {coursesDataItems.map(
+              ({
+                courseKey,
+                displayName,
+                lmsLink,
+                org,
+                rerunLink,
+                number,
+                run,
+                url,
+              }) => (
+                <CardItem
+                  key={courseKey}
+                  courseKey={courseKey}
+                  displayName={displayName}
+                  lmsLink={lmsLink}
+                  rerunLink={rerunLink}
+                  org={org}
+                  number={number}
+                  run={run}
+                  url={url}
+                  isPaginated={isEnabledPagination}
+                />
+              ),
+            )}
+
+            {numPages > 1 && isEnabledPagination && (
+              <Pagination
+                className="d-flex justify-content-center"
+                paginationLabel="pagination navigation"
+                pageCount={numPages}
+                currentPage={currentPage}
+                onPageSelect={handlePageSelected}
+              />
+            )}
+          </>
+        ) : (!optimizationEnabled && isNotFilteringCourses && (
+          <ContactAdministrator
+            hasAbilityToCreateCourse={hasAbilityToCreateCourse}
+            showNewCourseContainer={showNewCourseContainer}
+            onClickNewCourse={onClickNewCourse}
+          />
+        )
+        )}
+
+        {isFiltered && !hasCourses && !isLoading && (
+          <Alert className="mt-4">
+            <Alert.Heading>
+              {intl.formatMessage(messages.coursesTabCourseNotFoundAlertTitle)}
+            </Alert.Heading>
+            <p data-testid="courses-not-found-alert">
+              {intl.formatMessage(messages.coursesTabCourseNotFoundAlertMessage)}
+            </p>
+            <Button variant="primary" onClick={handleCleanFilters}>
+              {intl.formatMessage(messages.coursesTabCourseNotFoundAlertCleanFiltersButton)}
+            </Button>
+          </Alert>
+        )}
+        {showCollapsible && (
+          <CollapsibleStateWithAction
+            state={courseCreatorStatus}
+            className="mt-3"
+          />
+        )}
+      </div>
+    )
+  );
+};
+
+export default CoursesTab;
diff --git a/src/studio-home/tabs-section/index.tsx b/src/studio-home/tabs-section/index.tsx
new file mode 100644
index 0000000000..50f2905939
--- /dev/null
+++ b/src/studio-home/tabs-section/index.tsx
@@ -0,0 +1,212 @@
+import React, { useMemo, useState, useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import PropTypes from 'prop-types';
+import {
+  Badge,
+  Stack,
+  Tab,
+  Tabs,
+} from '@openedx/paragon';
+import { getConfig } from '@edx/frontend-platform';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { useNavigate, useLocation } from 'react-router-dom';
+
+import { getLoadingStatuses, getStudioHomeData } from '../data/selectors';
+import messages from './messages';
+import LibrariesTab from './libraries-tab';
+import LibrariesV2Tab from './libraries-v2-tab/index';
+import ArchivedTab from './archived-tab';
+import CoursesTab from './courses-tab';
+import { RequestStatus } from '../../data/constants';
+import { fetchLibraryData } from '../data/thunks';
+
+const TabsSection = ({
+  showNewCourseContainer,
+  onClickNewCourse,
+  isShowProcessing,
+  isPaginationCoursesEnabled,
+  librariesV1Enabled,
+  librariesV2Enabled,
+}) => {
+  const dispatch = useDispatch();
+  const intl = useIntl();
+  const navigate = useNavigate();
+  const { pathname } = useLocation();
+  const TABS_LIST = {
+    courses: 'courses',
+    libraries: 'libraries',
+    legacyLibraries: 'legacyLibraries',
+    archived: 'archived',
+    taxonomies: 'taxonomies',
+  } as const;
+
+  const initTabKeyState = (pname) => {
+    if (pname.includes('/libraries-v1')) {
+      return TABS_LIST.legacyLibraries;
+    }
+
+    if (pname.includes('/libraries')) {
+      return librariesV2Enabled
+        ? TABS_LIST.libraries
+        : TABS_LIST.legacyLibraries;
+    }
+
+    // Default to courses tab
+    return TABS_LIST.courses;
+  };
+
+  const [tabKey, setTabKey] = useState(initTabKeyState(pathname));
+
+  // This is needed to handle navigating using the back/forward buttons in the browser
+  useEffect(() => {
+    // Handle special case when navigating directly to /libraries-v1
+    // we need to call dispatch to fetch library data
+    if (pathname.includes('/libraries-v1')) {
+      dispatch(fetchLibraryData());
+    }
+    setTabKey(initTabKeyState(pathname));
+  }, [pathname]);
+
+  const {
+    courses, libraries, archivedCourses,
+    numPages, coursesCount,
+  } = useSelector(getStudioHomeData);
+  const {
+    courseLoadingStatus,
+    libraryLoadingStatus,
+  } = useSelector(getLoadingStatuses);
+  const isLoadingCourses = courseLoadingStatus === RequestStatus.IN_PROGRESS;
+  const isFailedCoursesPage = courseLoadingStatus === RequestStatus.FAILED;
+  const isLoadingLibraries = libraryLoadingStatus === RequestStatus.IN_PROGRESS;
+  const isFailedLibrariesPage = libraryLoadingStatus === RequestStatus.FAILED;
+
+  // Controlling the visibility of tabs when using conditional rendering is necessary for
+  // the correct operation of iterating over child elements inside the Paragon Tabs component.
+  const visibleTabs = useMemo(() => {
+    const tabs: JSX.Element[] = [];
+    tabs.push(
+      <Tab
+        key={TABS_LIST.courses}
+        eventKey={TABS_LIST.courses}
+        title={intl.formatMessage(messages.coursesTabTitle)}
+      >
+        <CoursesTab
+          coursesDataItems={courses}
+          showNewCourseContainer={showNewCourseContainer}
+          onClickNewCourse={onClickNewCourse}
+          isShowProcessing={isShowProcessing}
+          isLoading={isLoadingCourses}
+          isFailed={isFailedCoursesPage}
+          numPages={numPages}
+          coursesCount={coursesCount}
+          isEnabledPagination={isPaginationCoursesEnabled}
+        />
+      </Tab>,
+    );
+
+    if (archivedCourses?.length) {
+      tabs.push(
+        <Tab
+          key={TABS_LIST.archived}
+          eventKey={TABS_LIST.archived}
+          title={intl.formatMessage(messages.archivedTabTitle)}
+        >
+          <ArchivedTab
+            archivedCoursesData={archivedCourses}
+            isLoading={isLoadingCourses}
+            isFailed={isFailedCoursesPage}
+          />
+        </Tab>,
+      );
+    }
+
+    if (librariesV2Enabled) {
+      tabs.push(
+        <Tab
+          key={TABS_LIST.libraries}
+          eventKey={TABS_LIST.libraries}
+          title={(
+            <Stack gap={2} direction="horizontal">
+              {intl.formatMessage(messages.librariesTabTitle)}
+              <Badge variant="info">{intl.formatMessage(messages.librariesV2TabBetaBadge)}</Badge>
+            </Stack>
+          )}
+        >
+          <LibrariesV2Tab />
+        </Tab>,
+      );
+    }
+
+    if (librariesV1Enabled) {
+      tabs.push(
+        <Tab
+          key={TABS_LIST.legacyLibraries}
+          eventKey={TABS_LIST.legacyLibraries}
+          title={intl.formatMessage(
+            librariesV2Enabled
+              ? messages.legacyLibrariesTabTitle
+              : messages.librariesTabTitle,
+          )}
+        >
+          <LibrariesTab
+            libraries={libraries}
+            isLoading={isLoadingLibraries}
+            isFailed={isFailedLibrariesPage}
+          />
+        </Tab>,
+      );
+    }
+
+    if (getConfig().ENABLE_TAGGING_TAXONOMY_PAGES === 'true') {
+      tabs.push(
+        <Tab
+          key={TABS_LIST.taxonomies}
+          eventKey={TABS_LIST.taxonomies}
+          title={intl.formatMessage(messages.taxonomiesTabTitle)}
+        />,
+      );
+    }
+
+    return tabs;
+  }, [archivedCourses, showNewCourseContainer, isLoadingCourses, isLoadingLibraries]);
+
+  const handleSelectTab = (tab) => {
+    if (tab === TABS_LIST.courses) {
+      navigate('/home');
+    } else if (tab === TABS_LIST.legacyLibraries) {
+      dispatch(fetchLibraryData());
+      navigate('/libraries-v1');
+    } else if (tab === TABS_LIST.libraries) {
+      navigate('/libraries');
+    } else if (tab === TABS_LIST.taxonomies) {
+      navigate('/taxonomies');
+    }
+    setTabKey(tab);
+  };
+
+  return (
+    <Tabs
+      className="studio-home-tabs"
+      variant="tabs"
+      activeKey={tabKey}
+      onSelect={handleSelectTab}
+    >
+      {visibleTabs}
+    </Tabs>
+  );
+};
+
+TabsSection.defaultProps = {
+  isPaginationCoursesEnabled: false,
+};
+
+TabsSection.propTypes = {
+  showNewCourseContainer: PropTypes.bool.isRequired,
+  onClickNewCourse: PropTypes.func.isRequired,
+  isShowProcessing: PropTypes.bool.isRequired,
+  isPaginationCoursesEnabled: PropTypes.bool,
+  librariesV1Enabled: PropTypes.bool,
+  librariesV2Enabled: PropTypes.bool,
+};
+
+export default TabsSection;
diff --git a/src/studio-home/tabs-section/libraries-tab/index.jsx b/src/studio-home/tabs-section/libraries-tab/index.jsx
new file mode 100644
index 0000000000..76a8c0dfe1
--- /dev/null
+++ b/src/studio-home/tabs-section/libraries-tab/index.jsx
@@ -0,0 +1,72 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { Icon, Row } from '@openedx/paragon';
+import { Error } from '@openedx/paragon/icons';
+
+import { LoadingSpinner } from '../../../generic/Loading';
+import CardItem from '../../card-item';
+import { sortAlphabeticallyArray } from '../utils';
+import AlertMessage from '../../../generic/alert-message';
+import messages from '../messages';
+
+const LibrariesTab = ({
+  libraries,
+  isLoading,
+  isFailed,
+  // injected
+  intl,
+}) => {
+  if (isLoading) {
+    return (
+      <Row className="m-0 mt-4 justify-content-center">
+        <LoadingSpinner />
+      </Row>
+    );
+  }
+  return (
+    isFailed ? (
+      <AlertMessage
+        variant="danger"
+        description={(
+          <Row className="m-0 align-items-center">
+            <Icon src={Error} className="text-danger-500 mr-1" />
+            <span>{intl.formatMessage(messages.librariesTabErrorMessage)}</span>
+          </Row>
+        )}
+      />
+    ) : (
+      <div className="courses-tab">
+        {sortAlphabeticallyArray(libraries).map(({
+          displayName, org, number, url,
+        }) => (
+          <CardItem
+            key={`${org}+${number}`}
+            isLibraries
+            displayName={displayName}
+            org={org}
+            number={number}
+            url={url}
+          />
+        ))}
+      </div>
+    )
+  );
+};
+LibrariesTab.propTypes = {
+  libraries: PropTypes.arrayOf(
+    PropTypes.shape({
+      displayName: PropTypes.string.isRequired,
+      libraryKey: PropTypes.string.isRequired,
+      number: PropTypes.string.isRequired,
+      org: PropTypes.string.isRequired,
+      url: PropTypes.string.isRequired,
+    }),
+  ).isRequired,
+  isLoading: PropTypes.bool.isRequired,
+  isFailed: PropTypes.bool.isRequired,
+  // injected
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(LibrariesTab);
diff --git a/src/studio-home/tabs-section/libraries-v2-tab/index.tsx b/src/studio-home/tabs-section/libraries-v2-tab/index.tsx
new file mode 100644
index 0000000000..605ec71416
--- /dev/null
+++ b/src/studio-home/tabs-section/libraries-v2-tab/index.tsx
@@ -0,0 +1,145 @@
+import React, { useState } from 'react';
+import {
+  Icon,
+  Row,
+  Pagination,
+  Alert,
+  Button,
+} from '@openedx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Error } from '@openedx/paragon/icons';
+
+import { useContentLibraryV2List } from '../../../library-authoring';
+import { LoadingSpinner } from '../../../generic/Loading';
+import AlertMessage from '../../../generic/alert-message';
+import CardItem from '../../card-item';
+import messages from '../messages';
+import LibrariesV2Filters from './libraries-v2-filters';
+
+type Props = Record<never, never>;
+
+const LibrariesV2Tab: React.FC<Props> = () => {
+  const intl = useIntl();
+
+  const [currentPage, setCurrentPage] = useState(1);
+  const [filterParams, setFilterParams] = useState({});
+
+  const isFiltered = Object.keys(filterParams).length > 0;
+
+  const handlePageSelect = (page: number) => {
+    setCurrentPage(page);
+  };
+
+  const handleClearFilters = () => {
+    setFilterParams({});
+    setCurrentPage(1);
+  };
+
+  const {
+    data,
+    isLoading,
+    isError,
+  } = useContentLibraryV2List({ page: currentPage, ...filterParams });
+
+  if (isLoading && !isFiltered) {
+    return (
+      <Row className="m-0 mt-4 justify-content-center">
+        <LoadingSpinner />
+      </Row>
+    );
+  }
+
+  const hasV2Libraries = !isLoading && !isError && ((data!.results.length || 0) > 0);
+
+  // TODO: update this link when tutorial is ready.
+  const librariesTutorialLink = (
+    <Alert.Link href="https://docs.openedx.org">
+      {intl.formatMessage(messages.librariesV2TabBetaTutorialLinkText)}
+    </Alert.Link>
+  );
+
+  return (
+    <>
+      <Alert variant="info">
+        {intl.formatMessage(
+          messages.librariesV2TabBetaText,
+          { link: librariesTutorialLink },
+        )}
+      </Alert>
+
+      {isError ? (
+        <AlertMessage
+          variant="danger"
+          description={(
+            <Row className="m-0 align-items-center">
+              <Icon src={Error} className="text-danger-500 mr-1" />
+              <span>{intl.formatMessage(messages.librariesTabErrorMessage)}</span>
+            </Row>
+          )}
+        />
+      ) : (
+        <div className="courses-tab-container">
+          <div className="d-flex flex-row justify-content-between my-4">
+            <LibrariesV2Filters
+              isLoading={isLoading}
+              isFiltered={isFiltered}
+              filterParams={filterParams}
+              setFilterParams={setFilterParams}
+              setCurrentPage={setCurrentPage}
+            />
+            {!isLoading && !isError
+            && (
+              <p>
+                {intl.formatMessage(messages.coursesPaginationInfo, {
+                  length: data!.results.length,
+                  total: data!.count,
+                })}
+              </p>
+            )}
+          </div>
+
+          { hasV2Libraries
+            ? data!.results.map(({
+              id, org, slug, title,
+            }) => (
+              <CardItem
+                key={`${org}+${slug}`}
+                isLibraries
+                displayName={title}
+                org={org}
+                number={slug}
+                path={`/library/${id}`}
+              />
+            )) : isFiltered && !isLoading && (
+              <Alert className="mt-4">
+                <Alert.Heading>
+                  {intl.formatMessage(messages.librariesV2TabLibraryNotFoundAlertTitle)}
+                </Alert.Heading>
+                <p>
+                  {intl.formatMessage(messages.librariesV2TabLibraryNotFoundAlertMessage)}
+                </p>
+                <Button variant="primary" onClick={handleClearFilters}>
+                  {intl.formatMessage(messages.coursesTabCourseNotFoundAlertCleanFiltersButton)}
+                </Button>
+              </Alert>
+            )}
+
+          {
+            hasV2Libraries && (data!.numPages || 0) > 1
+            && (
+              <Pagination
+                className="d-flex justify-content-center"
+                paginationLabel="pagination navigation"
+                pageCount={data!.numPages}
+                currentPage={currentPage}
+                onPageSelect={handlePageSelect}
+              />
+            )
+          }
+        </div>
+      )}
+    </>
+  );
+};
+
+export default LibrariesV2Tab;
diff --git a/src/studio-home/tabs-section/libraries-v2-tab/libraries-v2-filters/index.test.tsx b/src/studio-home/tabs-section/libraries-v2-tab/libraries-v2-filters/index.test.tsx
new file mode 100644
index 0000000000..ca78fa570f
--- /dev/null
+++ b/src/studio-home/tabs-section/libraries-v2-tab/libraries-v2-filters/index.test.tsx
@@ -0,0 +1,144 @@
+import React from 'react';
+import {
+  screen, fireEvent, render, waitFor,
+} from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import LibrariesV2Filters, { LibrariesV2FiltersProps } from '.';
+
+describe('LibrariesV2Filters', () => {
+  const setFilterParamsMock = jest.fn();
+  const setCurrentPageMock = jest.fn();
+
+  const IntlProviderWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+    <IntlProvider locale="en" messages={{}}>
+      {children}
+    </IntlProvider>
+  );
+
+  const renderComponent = (overrideProps: Partial<LibrariesV2FiltersProps> = {}) => render(
+    <IntlProviderWrapper>
+      <LibrariesV2Filters
+        filterParams={{}}
+        setFilterParams={setFilterParamsMock}
+        setCurrentPage={setCurrentPageMock}
+        {...overrideProps}
+      />
+    </IntlProviderWrapper>,
+  );
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render search field and order filter', () => {
+    renderComponent();
+    const searchInput = screen.getByRole('searchbox');
+    expect(searchInput).toBeInTheDocument();
+    const orderFilter = screen.getByText('Name A-Z');
+    expect(orderFilter).toBeInTheDocument();
+  });
+
+  it('should call setFilterParams and setCurrentPage when search input changes', async () => {
+    renderComponent();
+    const searchInput = screen.getByRole('searchbox');
+    fireEvent.change(searchInput, { target: { value: 'test' } });
+    await waitFor(() => expect(setFilterParamsMock).toHaveBeenCalled());
+    await waitFor(() => expect(setCurrentPageMock).toHaveBeenCalled());
+  });
+
+  it('should call setFilterParams and setCurrentPage when a menu item order menu is selected', async () => {
+    renderComponent();
+    const libraryV2OrderMenuFilter = screen.getByText('Name A-Z');
+    fireEvent.click(libraryV2OrderMenuFilter);
+    const newestLibV2sMenuItem = screen.getByText('Newest');
+    fireEvent.click(newestLibV2sMenuItem);
+    expect(setFilterParamsMock).toHaveBeenCalled();
+    expect(setCurrentPageMock).toHaveBeenCalled();
+  });
+
+  it('should clear the search input when filters cleared', async () => {
+    const { rerender } = renderComponent({ isFiltered: true });
+    const searchInput = screen.getByRole('searchbox');
+    fireEvent.change(searchInput, { target: { value: 'test' } });
+    await waitFor(() => expect(setFilterParamsMock).toHaveBeenCalled());
+    await waitFor(() => expect(setCurrentPageMock).toHaveBeenCalled());
+
+    rerender(
+      <IntlProviderWrapper>
+        <LibrariesV2Filters
+          isFiltered={false}
+          filterParams={{}}
+          setFilterParams={setFilterParamsMock}
+          setCurrentPage={setCurrentPageMock}
+        />
+      </IntlProviderWrapper>,
+    );
+
+    await waitFor(() => expect((screen.getByRole('searchbox') as HTMLInputElement).value).toBe(''));
+  });
+
+  it('should update states with the correct parameters when a order menu item is selected', () => {
+    renderComponent();
+    const libraryV2OrderMenuFilter = screen.getByText('Name A-Z');
+    fireEvent.click(libraryV2OrderMenuFilter);
+    const oldestLibV2sMenuItem = screen.getByText('Oldest');
+    fireEvent.click(oldestLibV2sMenuItem);
+
+    // Check that setFilterParams is called with the correct payload
+    expect(setFilterParamsMock).toHaveBeenCalledWith(expect.objectContaining({
+      search: undefined,
+      order: 'created',
+    }));
+
+    // Check that setCurrentPage is called with `1`
+    expect(setCurrentPageMock).toHaveBeenCalledWith(1);
+  });
+
+  it('should call setFilterParams after debounce delay when the search input changes', async () => {
+    renderComponent();
+    const searchInput = screen.getByRole('searchbox');
+    fireEvent.change(searchInput, { target: { value: 'test' } });
+    await waitFor(() => expect(setFilterParamsMock).toHaveBeenCalled(), { timeout: 500 });
+    expect(setFilterParamsMock).toHaveBeenCalledWith(expect.anything());
+  });
+
+  it('should not call setFilterParams with only spaces when search only spaces', async () => {
+    renderComponent();
+    const searchInput = screen.getByRole('searchbox');
+    fireEvent.change(searchInput, { target: { value: '   ' } });
+
+    await waitFor(() => expect(setFilterParamsMock).not.toHaveBeenCalledWith(expect.objectContaining({
+      search: '   ',
+      order: 'created',
+    })), { timeout: 500 });
+  });
+
+  it('should display the loading spinner when isLoading is true', () => {
+    renderComponent({ isLoading: true });
+    const spinner = screen.getByText('Loading...');
+    expect(spinner).toBeInTheDocument();
+  });
+
+  it('should not display the loading spinner when isLoading is false', () => {
+    renderComponent({ isLoading: false });
+    const spinner = screen.queryByText('Loading...');
+    expect(spinner).not.toBeInTheDocument();
+  });
+
+  it('should clear the search input and call dispatch when the reset button is clicked', async () => {
+    renderComponent();
+    const searchInput = screen.getByRole('searchbox') as HTMLInputElement;
+    fireEvent.change(searchInput, { target: { value: 'test' } });
+    const form = searchInput.closest('form');
+    if (!form) {
+      throw new Error('Form not found');
+    }
+    const resetButton = form.querySelector('button');
+    if (!resetButton || !(resetButton instanceof HTMLButtonElement)) {
+      throw new Error('Reset button not found');
+    }
+    fireEvent.click(resetButton);
+    expect(searchInput.value).toBe('');
+  });
+});
diff --git a/src/studio-home/tabs-section/libraries-v2-tab/libraries-v2-filters/index.tsx b/src/studio-home/tabs-section/libraries-v2-tab/libraries-v2-filters/index.tsx
new file mode 100644
index 0000000000..c071c59efa
--- /dev/null
+++ b/src/studio-home/tabs-section/libraries-v2-tab/libraries-v2-filters/index.tsx
@@ -0,0 +1,108 @@
+import React, { useState, useCallback, useEffect } from 'react';
+import { SearchField } from '@openedx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import { LoadingSpinner } from '../../../../generic/Loading';
+import LibrariesV2OrderFilterMenu from './libraries-v2-order-filter-menu';
+import messages from '../../messages';
+
+export interface LibrariesV2FiltersProps {
+  isLoading?: boolean;
+  isFiltered?: boolean;
+  filterParams: { search?: string | undefined, order?: string };
+  setFilterParams: React.Dispatch<React.SetStateAction<{ search: string | undefined, order: string }>>;
+  setCurrentPage: React.Dispatch<React.SetStateAction<number>>;
+}
+
+const LibrariesV2Filters: React.FC<LibrariesV2FiltersProps> = ({
+  isLoading = false,
+  isFiltered = false,
+  filterParams,
+  setFilterParams,
+  setCurrentPage,
+}) => {
+  const intl = useIntl();
+
+  const [search, setSearch] = useState<string | undefined>('');
+  const [order, setOrder] = useState('title');
+
+  // Reset search & order when filters cleared
+  useEffect(() => {
+    if (!isFiltered) {
+      setSearch(filterParams.search);
+      setOrder('title');
+    }
+  }, [isFiltered, setSearch, search, setOrder, filterParams.search]);
+
+  const getOrderFromFilterType = (filterType: string) => {
+    const orders = {
+      sortLibrariesV2AZ: 'title',
+      sortLibrariesV2ZA: '-title',
+      sortLibrariesV2Newest: '-created',
+      sortLibrariesV2Oldest: 'created',
+    };
+
+    // Default to 'A-Z` if invalid filtertype
+    return orders[filterType] || 'title';
+  };
+
+  const getFilterTypeData = (baseFilters: { search: string | undefined; order: string; }) => ({
+    sortLibrariesV2AZ: { ...baseFilters, order: 'title' },
+    sortLibrariesV2ZA: { ...baseFilters, order: '-title' },
+    sortLibrariesV2Newest: { ...baseFilters, order: '-created' },
+    sortLibrariesV2Oldest: { ...baseFilters, order: 'created' },
+  });
+
+  const handleMenuFilterItemSelected = (filterType: string) => {
+    setOrder(getOrderFromFilterType(filterType));
+
+    const baseFilters = {
+      search,
+      order,
+    };
+
+    const menuFilterParams = getFilterTypeData(baseFilters);
+    const filterParamsFormat = menuFilterParams[filterType] || baseFilters;
+
+    setFilterParams(filterParamsFormat);
+    setCurrentPage(1);
+  };
+
+  const handleSearchLibrariesV2 = useCallback((searchValue: string) => {
+    const valueFormatted = searchValue.trim();
+    const updatedFilterParams = {
+      search: valueFormatted.length > 0 ? valueFormatted : undefined,
+      order,
+    };
+
+    // Check if the search is different from the current search and it's not only spaces
+    if (valueFormatted !== search || valueFormatted) {
+      setSearch(valueFormatted);
+      setFilterParams(updatedFilterParams);
+      setCurrentPage(1);
+    }
+  }, [order, search]);
+
+  return (
+    <div className="d-flex">
+      <div className="d-flex flex-row">
+        <SearchField
+          onSubmit={() => {}}
+          onChange={handleSearchLibrariesV2}
+          value={search}
+          className="mr-4"
+          placeholder={intl.formatMessage(messages.librariesV2TabLibrarySearchPlaceholder)}
+        />
+        {isLoading && (
+          <span className="search-field-loading">
+            <LoadingSpinner size="sm" />
+          </span>
+        )}
+      </div>
+
+      <LibrariesV2OrderFilterMenu onItemMenuSelected={handleMenuFilterItemSelected} isFiltered={isFiltered} />
+    </div>
+  );
+};
+
+export default LibrariesV2Filters;
diff --git a/src/studio-home/tabs-section/libraries-v2-tab/libraries-v2-filters/libraries-v2-filter-menu/index.tsx b/src/studio-home/tabs-section/libraries-v2-tab/libraries-v2-filters/libraries-v2-filter-menu/index.tsx
new file mode 100644
index 0000000000..bdc52f5bf1
--- /dev/null
+++ b/src/studio-home/tabs-section/libraries-v2-tab/libraries-v2-filters/libraries-v2-filter-menu/index.tsx
@@ -0,0 +1,58 @@
+import React, { useState, useEffect } from 'react';
+import { Icon, Dropdown } from '@openedx/paragon';
+import { Check } from '@openedx/paragon/icons';
+
+const LibrariesV2FilterMenu: React.FC<{
+  id: string;
+  menuItems: { id: string, name: string, value: string }[];
+  onItemMenuSelected: (value: string) => void;
+  defaultItemSelectedText: string;
+  isFiltered: boolean;
+}> = ({
+  id: idProp,
+  menuItems = [],
+  onItemMenuSelected,
+  defaultItemSelectedText = '',
+  isFiltered,
+}) => {
+  const [itemMenuSelected, setItemMenuSelected] = useState(defaultItemSelectedText);
+  const handleOrderSelected = (name: string, value: string) => {
+    setItemMenuSelected(name);
+    onItemMenuSelected(value);
+  };
+
+  const libraryV2OrderSelectedIcon = (itemValue: string) => (itemValue === itemMenuSelected ? (
+    <Icon src={Check} className="ml-2" />
+  ) : null);
+
+  useEffect(() => {
+    if (!isFiltered) {
+      setItemMenuSelected(defaultItemSelectedText);
+    }
+  }, [isFiltered]);
+
+  return (
+    <Dropdown id={`dropdown-toggle-${idProp}`}>
+      <Dropdown.Toggle
+        alt="dropdown-toggle-menu-items"
+        id={idProp}
+        variant="none"
+        className="dropdown-toggle-menu-items"
+      >
+        {itemMenuSelected}
+      </Dropdown.Toggle>
+      <Dropdown.Menu>
+        {menuItems.map(({ id, name, value }) => (
+          <Dropdown.Item
+            key={id}
+            onClick={() => handleOrderSelected(name, value)}
+          >
+            {name} {libraryV2OrderSelectedIcon(name)}
+          </Dropdown.Item>
+        ))}
+      </Dropdown.Menu>
+    </Dropdown>
+  );
+};
+
+export default LibrariesV2FilterMenu;
diff --git a/src/studio-home/tabs-section/libraries-v2-tab/libraries-v2-filters/libraries-v2-order-filter-menu/index.tsx b/src/studio-home/tabs-section/libraries-v2-tab/libraries-v2-filters/libraries-v2-order-filter-menu/index.tsx
new file mode 100644
index 0000000000..00e5794f23
--- /dev/null
+++ b/src/studio-home/tabs-section/libraries-v2-tab/libraries-v2-filters/libraries-v2-order-filter-menu/index.tsx
@@ -0,0 +1,55 @@
+import React, { useMemo } from 'react';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import messages from './messages';
+
+import LibrariesV2FilterMenu from '../libraries-v2-filter-menu';
+
+const LibrariesV2OrderFilterMenu: React.FC<{
+  onItemMenuSelected: (value: string) => void;
+  isFiltered: boolean;
+}> = ({ onItemMenuSelected, isFiltered }) => {
+  const intl = useIntl();
+
+  const libraryV2Orders = useMemo(
+    () => [
+      {
+        id: 'sort-libraries-v2-az',
+        name: intl.formatMessage(messages.librariesV2OrderFilterMenuAscendantLibrariesV2),
+        value: 'sortLibrariesV2AZ',
+      },
+      {
+        id: 'sort-libraries-v2-za',
+        name: intl.formatMessage(messages.librariesV2OrderFilterMenuDescendantLibrariesV2),
+        value: 'sortLibrariesV2ZA',
+      },
+      {
+        id: 'sort-libraries-v2-newest',
+        name: intl.formatMessage(messages.librariesV2OrderFilterMenuNewestLibrariesV2),
+        value: 'sortLibrariesV2Newest',
+      },
+      {
+        id: 'sort-libraries-v2-oldest',
+        name: intl.formatMessage(messages.librariesV2OrderFilterMenuOldestLibrariesV2),
+        value: 'sortLibrariesV2Oldest',
+      },
+    ],
+    [intl],
+  );
+
+  const handleLibraryV2OrderSelected = (libraryV2Order: string) => {
+    onItemMenuSelected(libraryV2Order);
+  };
+
+  return (
+    <LibrariesV2FilterMenu
+      id="dropdown-toggle-libraries-v2-order-menu"
+      menuItems={libraryV2Orders}
+      onItemMenuSelected={handleLibraryV2OrderSelected}
+      defaultItemSelectedText={intl.formatMessage(messages.librariesV2OrderFilterMenuAscendantLibrariesV2)}
+      isFiltered={isFiltered}
+    />
+  );
+};
+
+export default LibrariesV2OrderFilterMenu;
diff --git a/src/studio-home/tabs-section/libraries-v2-tab/libraries-v2-filters/libraries-v2-order-filter-menu/messages.ts b/src/studio-home/tabs-section/libraries-v2-tab/libraries-v2-filters/libraries-v2-order-filter-menu/messages.ts
new file mode 100644
index 0000000000..de104193dc
--- /dev/null
+++ b/src/studio-home/tabs-section/libraries-v2-tab/libraries-v2-filters/libraries-v2-order-filter-menu/messages.ts
@@ -0,0 +1,22 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  librariesV2OrderFilterMenuAscendantLibrariesV2: {
+    id: 'course-authoring.studio-home.libraries.tab.order-filter-menu.ascendant-librariesv2',
+    defaultMessage: 'Name A-Z',
+  },
+  librariesV2OrderFilterMenuDescendantLibrariesV2: {
+    id: 'course-authoring.studio-home.libraries.tab.order-filter-menu.descendant-librariesv2',
+    defaultMessage: 'Name Z-A',
+  },
+  librariesV2OrderFilterMenuNewestLibrariesV2: {
+    id: 'course-authoring.studio-home.libraries.tab.order-filter-menu.newest-librariesv2',
+    defaultMessage: 'Newest',
+  },
+  librariesV2OrderFilterMenuOldestLibrariesV2: {
+    id: 'course-authoring.studio-home.libraries.tab.order-filter-menu.oldest-librariesv2',
+    defaultMessage: 'Oldest',
+  },
+});
+
+export default messages;
diff --git a/src/studio-home/tabs-section/messages.ts b/src/studio-home/tabs-section/messages.ts
new file mode 100644
index 0000000000..cecac598e1
--- /dev/null
+++ b/src/studio-home/tabs-section/messages.ts
@@ -0,0 +1,93 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  coursesTabTitle: {
+    id: 'course-authoring.studio-home.courses.tab.title',
+    defaultMessage: 'Courses',
+  },
+  courseTabErrorMessage: {
+    id: 'course-authoring.studio-home.courses.tab.error.message',
+    defaultMessage: 'Failed to fetch courses. Please try again later.',
+  },
+  coursesPaginationInfo: {
+    id: 'course-authoring.studio-home.courses.pagination.info',
+    defaultMessage: 'Showing {length} of {total}',
+  },
+  librariesTabErrorMessage: {
+    id: 'course-authoring.studio-home.libraries.tab.error.message',
+    defaultMessage: 'Failed to fetch libraries. Please try again later.',
+  },
+  librariesTabTitle: {
+    id: 'course-authoring.studio-home.libraries.tab.title',
+    defaultMessage: 'Libraries',
+  },
+  legacyLibrariesTabTitle: {
+    id: 'course-authoring.studio-home.legacy.libraries.tab.title',
+    defaultMessage: 'Legacy Libraries',
+  },
+  archivedTabTitle: {
+    id: 'course-authoring.studio-home.archived.tab.title',
+    defaultMessage: 'Archived courses',
+  },
+  archiveTabErrorMessage: {
+    id: 'course-authoring.studio-home.archived.tab.error.message',
+    defaultMessage: 'Failed to fetch archived courses. Please try again later.',
+  },
+  coursesTabCourseNotFoundAlertTitle: {
+    id: 'course-authoring.studio-home.courses.tab.course.not.found.alert.title',
+    defaultMessage: 'We could not find any result',
+  },
+  coursesTabCourseNotFoundAlertMessage: {
+    id: 'course-authoring.studio-home.courses.tab.course.not.found.alert.message',
+    defaultMessage: 'There are no courses with the current filters.',
+  },
+  coursesTabCourseNotFoundAlertCleanFiltersButton: {
+    id: 'course-authoring.studio-home.courses.tab.course.not.found.alert.clean.filters.button',
+    defaultMessage: 'Clear filters',
+  },
+  taxonomiesTabTitle: {
+    id: 'course-authoring.studio-home.taxonomies.tab.title',
+    defaultMessage: 'Taxonomies',
+    description: 'Title of Taxonomies tab on the home page',
+  },
+  libraryV2PlaceholderTitle: {
+    id: 'course-authoring.studio-home.libraries.placeholder.title',
+    defaultMessage: 'Library V2 Placeholder',
+  },
+  libraryV2PlaceholderBody: {
+    id: 'course-authoring.studio-home.libraries.placeholder.body',
+    defaultMessage: 'This is a placeholder page, as the Library Authoring MFE is not enabled.',
+  },
+  librariesV2TabBetaBadge: {
+    id: 'course-authoring.studio-home.libraries.tab.library.beta-badge',
+    defaultMessage: 'Beta',
+    description: 'Text used to mark the Libraries v2 feature as "in beta"',
+  },
+  librariesV2TabBetaText: {
+    id: 'course-authoring.studio-home.libraries.tab.library.beta-text',
+    defaultMessage: 'Welcome to the new Beta Libraries experience! Libraries have been redesigned from the ground up,'
+      + ' making it much easier to reuse and remix course content. The new Libraries space lets you create, organize and'
+      + ' manage new content; reuse your content in as many courses as you\'d like; sync updates centrally; and create'
+      + ' and randomize problem sets. See {link} for details.',
+    description: 'Explanatory text shown on the Libraries v2 tab during the beta release.',
+  },
+  librariesV2TabBetaTutorialLinkText: {
+    id: 'course-authoring.studio-home.libraries.tab.library.beta-link-text',
+    defaultMessage: 'Libraries v2 tutorial',
+    description: 'Text to use as the link in the "course-authoring.studio-home.libraries.tab.library.beta-text" message',
+  },
+  librariesV2TabLibrarySearchPlaceholder: {
+    id: 'course-authoring.studio-home.libraries.tab.library.search-placeholder',
+    defaultMessage: 'Search',
+  },
+  librariesV2TabLibraryNotFoundAlertTitle: {
+    id: 'course-authoring.studio-home.libraries.tab.library.not.found.alert.title',
+    defaultMessage: 'We could not find any result',
+  },
+  librariesV2TabLibraryNotFoundAlertMessage: {
+    id: 'course-authoring.studio-home.libraries.tab.library.not.found.alert.message',
+    defaultMessage: 'There are no libraries with the current filters.',
+  },
+});
+
+export default messages;
diff --git a/src/studio-home/tabs-section/utils.js b/src/studio-home/tabs-section/utils.js
new file mode 100644
index 0000000000..8b19daaaf2
--- /dev/null
+++ b/src/studio-home/tabs-section/utils.js
@@ -0,0 +1,14 @@
+/**
+ * Alphabetical sorting for arrays of courses and libraries.
+ *
+ * @param {array} arr - Array of courses or libraries.
+ * @returns {array} - An array of alphabetically sorted courses or libraries.
+ */
+const sortAlphabeticallyArray = (arr) => [...arr]
+  .sort((firstArrayData, secondArrayData) => {
+    const firstDisplayName = firstArrayData.displayName ?? '';
+    const secondDisplayName = secondArrayData.displayName ?? '';
+    return firstDisplayName.localeCompare(secondDisplayName);
+  });
+
+export { sortAlphabeticallyArray };
diff --git a/src/studio-home/tabs-section/utils.test.js b/src/studio-home/tabs-section/utils.test.js
new file mode 100644
index 0000000000..d10d56a07b
--- /dev/null
+++ b/src/studio-home/tabs-section/utils.test.js
@@ -0,0 +1,26 @@
+import { sortAlphabeticallyArray } from './utils';
+
+const testData = [
+  { displayName: 'Apple' },
+  { displayName: 'Orange' },
+  { displayName: 'Banana' },
+];
+
+describe('sortAlphabeticallyArray', () => {
+  it('sortAlphabeticallyArray sorts array alphabetically', () => {
+    const sortedData = sortAlphabeticallyArray(testData);
+
+    expect(sortedData).toEqual([
+      { displayName: 'Apple' },
+      { displayName: 'Banana' },
+      { displayName: 'Orange' },
+    ]);
+  });
+
+  it('sortAlphabeticallyArray does not mutate the original array', () => {
+    const originalData = [...testData];
+    sortAlphabeticallyArray(testData);
+
+    expect(testData).toEqual(originalData);
+  });
+});
diff --git a/src/studio-home/verify-email-layout/VerifyEmailLayout.test.jsx b/src/studio-home/verify-email-layout/VerifyEmailLayout.test.jsx
new file mode 100644
index 0000000000..785fb484f0
--- /dev/null
+++ b/src/studio-home/verify-email-layout/VerifyEmailLayout.test.jsx
@@ -0,0 +1,74 @@
+import { render } from '@testing-library/react';
+import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { initializeMockApp } from '@edx/frontend-platform';
+import { AppProvider } from '@edx/frontend-platform/react';
+
+import initializeStore from '../../store';
+import messages from './messages';
+import VerifyEmailLayout from '.';
+
+let store;
+
+const mockPathname = '/foo-bar';
+const fakeAuthenticatedUser = {
+  email: 'email@fake.com',
+  username: 'fake-user',
+};
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useLocation: () => ({
+    pathname: mockPathname,
+  }),
+}));
+
+jest.mock('@edx/frontend-platform/auth');
+
+getAuthenticatedUser.mockImplementation(() => fakeAuthenticatedUser);
+
+const RootWrapper = () => (
+  <IntlProvider locale="en" messages={{}}>
+    <AppProvider store={store}>
+      <VerifyEmailLayout />
+    </AppProvider>
+  </IntlProvider>
+);
+
+describe('<VerifyEmailLayout />', () => {
+  beforeEach(async () => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: false,
+        roles: [],
+      },
+    });
+
+    store = initializeStore({
+      courseDetail: {
+        courseId: 'id',
+        status: 'sucessful',
+      },
+    });
+  });
+
+  it('renders successfully', () => {
+    const { getByText } = render(<RootWrapper />);
+
+    expect(
+      getByText(`Thanks for signing up, ${fakeAuthenticatedUser.username}!`, {
+        exact: false,
+      }),
+    ).toBeInTheDocument();
+
+    expect(getByText(
+      `Almost there! In order to complete your sign up we need you to verify your email address (${fakeAuthenticatedUser.email}). An activation message and next steps should be waiting for you there.`,
+      { exact: false },
+    )).toBeInTheDocument();
+
+    expect(getByText(messages.sidebarTitle.defaultMessage)).toBeInTheDocument();
+    expect(getByText(messages.sidebarDescription.defaultMessage)).toBeInTheDocument();
+  });
+});
diff --git a/src/studio-home/verify-email-layout/index.jsx b/src/studio-home/verify-email-layout/index.jsx
new file mode 100644
index 0000000000..f6da5c83de
--- /dev/null
+++ b/src/studio-home/verify-email-layout/index.jsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import { Layout, Card } from '@openedx/paragon';
+import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import { HelpSidebar } from '../../generic/help-sidebar';
+import messages from './messages';
+
+const VerifyEmailLayout = () => {
+  const intl = useIntl();
+  const { email, username } = getAuthenticatedUser();
+
+  return (
+    <Layout
+      lg={[{ span: 9 }, { span: 3 }]}
+      md={[{ span: 9 }, { span: 3 }]}
+      sm={[{ span: 9 }, { span: 3 }]}
+      xs={[{ span: 9 }, { span: 3 }]}
+      xl={[{ span: 9 }, { span: 3 }]}
+    >
+      <Layout.Element>
+        <section>
+          <h3>{intl.formatMessage(messages.headingTitle, { username })}</h3>
+          <Card variant="muted">
+            <Card.Section
+              title={intl.formatMessage(messages.bannerTitle)}
+              className="small"
+            >
+              {intl.formatMessage(messages.bannerDescription, { email })}
+            </Card.Section>
+          </Card>
+        </section>
+      </Layout.Element>
+      <Layout.Element>
+        <HelpSidebar>
+          <h4 className="help-sidebar-about-title">
+            {intl.formatMessage(messages.sidebarTitle)}
+          </h4>
+          <p className="help-sidebar-about-descriptions">
+            {intl.formatMessage(messages.sidebarDescription)}
+          </p>
+        </HelpSidebar>
+      </Layout.Element>
+    </Layout>
+  );
+};
+
+export default VerifyEmailLayout;
diff --git a/src/studio-home/verify-email-layout/messages.js b/src/studio-home/verify-email-layout/messages.js
new file mode 100644
index 0000000000..a7cd32b787
--- /dev/null
+++ b/src/studio-home/verify-email-layout/messages.js
@@ -0,0 +1,26 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  headingTitle: {
+    id: 'course-authoring.studio-home.verify-email.heading',
+    defaultMessage: 'Thanks for signing up, {username}!',
+  },
+  bannerTitle: {
+    id: 'course-authoring.studio-home.verify-email.banner.title',
+    defaultMessage: 'We need to verify your email address',
+  },
+  bannerDescription: {
+    id: 'course-authoring.studio-home.verify-email.banner.description',
+    defaultMessage: 'Almost there! In order to complete your sign up we need you to verify your email address ({email}). An activation message and next steps should be waiting for you there.',
+  },
+  sidebarTitle: {
+    id: 'course-authoring.studio-home.verify-email.sidebar.title',
+    defaultMessage: 'Need help?',
+  },
+  sidebarDescription: {
+    id: 'course-authoring.studio-home.verify-email.sidebar.description',
+    defaultMessage: 'Please check your Junk or Spam folders in case our email isn\'t in your INBOX. Still can\'t find the verification email? Request help via the link below.',
+  },
+});
+
+export default messages;
diff --git a/src/taxonomy/TaxonomyLayout.test.tsx b/src/taxonomy/TaxonomyLayout.test.tsx
new file mode 100644
index 0000000000..09f2398885
--- /dev/null
+++ b/src/taxonomy/TaxonomyLayout.test.tsx
@@ -0,0 +1,82 @@
+import React, { useContext } from 'react';
+
+import { initializeMocks, render } from '../testUtils';
+import { TaxonomyContext } from './common/context';
+import { TaxonomyLayout } from './TaxonomyLayout';
+
+const toastMessage = 'Hello, this is a toast!';
+const alertErrorTitle = 'Error title';
+const alertErrorDescription = 'Error description';
+
+const MockChildComponent = () => {
+  const { setToastMessage, setAlertProps } = useContext(TaxonomyContext);
+
+  return (
+    <div data-testid="mock-content">
+      <button
+        type="button"
+        onClick={() => setToastMessage!(toastMessage)}
+        data-testid="taxonomy-show-toast"
+      >
+        Show Toast
+      </button>
+      <button
+        type="button"
+        onClick={() => setAlertProps!({ title: alertErrorTitle, description: alertErrorDescription })}
+        data-testid="taxonomy-show-alert"
+      >
+        Show Alert
+      </button>
+    </div>
+  );
+};
+
+jest.mock('../header', () => jest.fn(() => <div data-testid="mock-header" />));
+jest.mock('@edx/frontend-component-footer', () => ({
+  StudioFooter: jest.fn(() => <div data-testid="mock-footer" />),
+}));
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  Outlet: () => <MockChildComponent />,
+  ScrollRestoration: jest.fn(() => <div />),
+}));
+
+describe('<TaxonomyLayout />', () => {
+  beforeEach(async () => {
+    initializeMocks();
+  });
+
+  it('should render page correctly', () => {
+    const { getByTestId } = render(<TaxonomyLayout />);
+    expect(getByTestId('mock-header')).toBeInTheDocument();
+    expect(getByTestId('mock-content')).toBeInTheDocument();
+    expect(getByTestId('mock-footer')).toBeInTheDocument();
+  });
+
+  it('should show toast', () => {
+    const { getByTestId, getByText } = render(<TaxonomyLayout />);
+    const button = getByTestId('taxonomy-show-toast');
+    button.click();
+    expect(getByTestId('taxonomy-toast')).toBeInTheDocument();
+    expect(getByText(toastMessage)).toBeInTheDocument();
+  });
+
+  it('should show alert', () => {
+    const {
+      getByTestId,
+      getByText,
+      getByRole,
+      queryByTestId,
+    } = render(<TaxonomyLayout />);
+
+    const button = getByTestId('taxonomy-show-alert');
+    button.click();
+    expect(getByTestId('taxonomy-alert')).toBeInTheDocument();
+    expect(getByText(alertErrorTitle)).toBeInTheDocument();
+    expect(getByText(alertErrorDescription)).toBeInTheDocument();
+
+    const closeAlertButton = getByRole('button', { name: 'Dismiss' });
+    closeAlertButton.click();
+    expect(queryByTestId('taxonomy-alert')).not.toBeInTheDocument();
+  });
+});
diff --git a/src/taxonomy/TaxonomyLayout.tsx b/src/taxonomy/TaxonomyLayout.tsx
new file mode 100644
index 0000000000..ffcefa123e
--- /dev/null
+++ b/src/taxonomy/TaxonomyLayout.tsx
@@ -0,0 +1,52 @@
+import React, { useMemo, useState } from 'react';
+import { StudioFooter } from '@edx/frontend-component-footer';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Outlet, ScrollRestoration } from 'react-router-dom';
+import { Toast } from '@openedx/paragon';
+
+import AlertMessage from '../generic/alert-message';
+import Header from '../header';
+import { type AlertProps, TaxonomyContext } from './common/context';
+import messages from './messages';
+
+export const TaxonomyLayout = () => {
+  const intl = useIntl();
+  // Use `setToastMessage` to show the toast.
+  const [toastMessage, setToastMessage] = useState<string | null>(null);
+  // Use `setToastMessage` to show the alert.
+  const [alertProps, setAlertProps] = useState<AlertProps | null>(null);
+
+  const context = useMemo(() => ({
+    toastMessage, setToastMessage, alertProps, setAlertProps,
+  }), []);
+
+  return (
+    <TaxonomyContext.Provider value={context}>
+      <div className="bg-light-400">
+        <Header isHiddenMainMenu />
+        { alertProps && (
+          <AlertMessage
+            data-testid="taxonomy-alert"
+            className="mb-0"
+            dismissible
+            closeLabel={intl.formatMessage(messages.taxonomyDismissLabel)}
+            onClose={() => setAlertProps(null)}
+            {...alertProps}
+          />
+        )}
+        <Outlet />
+        <StudioFooter />
+        {toastMessage && (
+          <Toast
+            show
+            onClose={() => setToastMessage(null)}
+            data-testid="taxonomy-toast"
+          >
+            {toastMessage}
+          </Toast>
+        )}
+      </div>
+      <ScrollRestoration />
+    </TaxonomyContext.Provider>
+  );
+};
diff --git a/src/taxonomy/TaxonomyListPage.scss b/src/taxonomy/TaxonomyListPage.scss
new file mode 100644
index 0000000000..b501e8a847
--- /dev/null
+++ b/src/taxonomy/TaxonomyListPage.scss
@@ -0,0 +1,7 @@
+.taxonomy-orgs-filter-selector {
+  // Without this, the default bold styling for the focused option
+  // in the org select menu is too thick
+  .pgn__menu-item:focus {
+    font-weight: bold;
+  }
+}
diff --git a/src/taxonomy/TaxonomyListPage.test.tsx b/src/taxonomy/TaxonomyListPage.test.tsx
new file mode 100644
index 0000000000..5c918760d9
--- /dev/null
+++ b/src/taxonomy/TaxonomyListPage.test.tsx
@@ -0,0 +1,216 @@
+import type MockAdapter from 'axios-mock-adapter';
+import {
+  fireEvent,
+  initializeMocks,
+  render as baseRender,
+  waitFor,
+} from '../testUtils';
+
+import { apiUrls } from './data/api';
+import { TaxonomyListPage } from './TaxonomyListPage';
+import { TaxonomyContext } from './common/context';
+
+const taxonomies = [{
+  id: 1,
+  name: 'Taxonomy',
+  description: 'This is a description',
+  showSystemBadge: false,
+  canChangeTaxonomy: true,
+  canDeleteTaxonomy: true,
+  tagsCount: 0,
+}];
+const organizationsListUrl = 'http://localhost:18010/organizations';
+const listTaxonomiesUrl = 'http://localhost:18010/api/content_tagging/v1/taxonomies/?enabled=true';
+const listTaxonomiesUnassignedUrl = `${listTaxonomiesUrl}&unassigned=true`;
+const listTaxonomiesOrg1Url = `${listTaxonomiesUrl}&org=Org+1`;
+const listTaxonomiesOrg2Url = `${listTaxonomiesUrl}&org=Org+2`;
+const organizations = ['Org 1', 'Org 2'];
+
+const context = {
+  toastMessage: null,
+  setToastMessage: jest.fn(),
+  alertProps: null,
+  setAlertProps: jest.fn(),
+};
+
+const render = (ui: React.ReactElement) => baseRender(ui, {
+  extraWrapper: ({ children }) => (
+    <TaxonomyContext.Provider value={context}> { children } </TaxonomyContext.Provider>
+  ),
+});
+let axiosMock: MockAdapter;
+
+describe('<TaxonomyListPage />', () => {
+  beforeEach(async () => {
+    const mocks = initializeMocks();
+    axiosMock = mocks.axiosMock;
+    axiosMock.onGet(organizationsListUrl).reply(200, organizations);
+  });
+
+  it('should render page and page title correctly', () => {
+    const { getByText } = render(<TaxonomyListPage />);
+    expect(getByText('Taxonomies')).toBeInTheDocument();
+  });
+
+  it('shows the spinner before the query is complete', async () => {
+    // Simulate an API request that times out:
+    axiosMock.onGet(listTaxonomiesUrl).reply(200, new Promise(() => {}));
+    const { getByRole } = render(<TaxonomyListPage />);
+    const spinner = getByRole('status');
+    expect(spinner.textContent).toEqual('Loading');
+  });
+
+  it('shows the data table after the query is complete', async () => {
+    axiosMock.onGet(listTaxonomiesUrl).reply(200, { results: taxonomies, canAddTaxonomy: false });
+    const { getByTestId, queryByText } = render(<TaxonomyListPage />);
+    await waitFor(() => { expect(queryByText('Loading')).toEqual(null); });
+    expect(getByTestId('taxonomy-card-1')).toBeInTheDocument();
+  });
+
+  it.each(['csv', 'json'] as const)('downloads the taxonomy template %s', async (fileFormat) => {
+    axiosMock.onGet(listTaxonomiesUrl).reply(200, { results: taxonomies, canAddTaxonomy: false });
+    const { findByRole, queryByText } = render(<TaxonomyListPage />);
+    // Wait until data has been loaded and rendered:
+    await waitFor(() => { expect(queryByText('Loading')).toEqual(null); });
+    const templateMenu = await findByRole('button', { name: 'Download template' });
+    fireEvent.click(templateMenu);
+    const templateButton = await findByRole('link', { name: `${fileFormat.toUpperCase()} template` });
+    fireEvent.click(templateButton);
+
+    expect((templateButton as HTMLAnchorElement).href).toBe(apiUrls.taxonomyTemplate(fileFormat));
+  });
+
+  it('disables the import taxonomy button if not permitted', async () => {
+    axiosMock.onGet(listTaxonomiesUrl).reply(200, { results: [], canAddTaxonomy: false });
+
+    const { queryByText, getByRole } = render(<TaxonomyListPage />);
+    // Wait until data has been loaded and rendered:
+    await waitFor(() => { expect(queryByText('Loading')).toEqual(null); });
+    const importButton = getByRole('button', { name: 'Import' });
+    expect(importButton).toBeDisabled();
+  });
+
+  it('opens the import dialog modal when the import button is clicked', async () => {
+    axiosMock.onGet(listTaxonomiesUrl).reply(200, { results: [], canAddTaxonomy: true });
+
+    const { getByRole, getByText } = render(<TaxonomyListPage />);
+    const importButton = getByRole('button', { name: 'Import' });
+    // Once the API response is received and rendered, the Import button should be enabled:
+    await waitFor(() => { expect(importButton).not.toBeDisabled(); });
+    fireEvent.click(importButton);
+
+    expect(getByText('Upload file')).toBeInTheDocument();
+  });
+
+  it('should show all "All taxonomies", "Unassigned" and org names in taxonomy org filter', async () => {
+    axiosMock.onGet(listTaxonomiesUrl).reply(200, {
+      results: [{
+        id: 1,
+        name: 'Taxonomy',
+        description: 'This is a description',
+        showSystemBadge: false,
+        canChangeTaxonomy: false,
+        canDeleteTaxonomy: false,
+        tagsCount: 0,
+      }],
+      canAddTaxonomy: false,
+    });
+
+    const {
+      getByTestId,
+      getByText,
+      getByRole,
+      getAllByText,
+      queryByText,
+    } = render(<TaxonomyListPage />);
+    // Wait until data has been loaded and rendered:
+    await waitFor(() => { expect(queryByText('Loading')).toEqual(null); });
+
+    expect(getByTestId('taxonomy-orgs-filter-selector')).toBeInTheDocument();
+    // Check that the default filter is set to 'All taxonomies' when page is loaded
+    expect(getByText('All taxonomies')).toBeInTheDocument();
+
+    // Open the taxonomies org filter select menu
+    fireEvent.click(getByRole('button', { name: 'All taxonomies' }));
+
+    // Check that the select menu shows 'All taxonomies' option
+    // along with the default selected one
+    expect(getAllByText('All taxonomies').length).toBe(2);
+    // Check that the select manu shows 'Unassigned' option
+    expect(getByText('Unassigned')).toBeInTheDocument();
+    // Check that the select menu shows the 'Org 1' option
+    expect(getByText('Org 1')).toBeInTheDocument();
+    // Check that the select menu shows the 'Org 2' option
+    expect(getByText('Org 2')).toBeInTheDocument();
+  });
+
+  it('should fetch taxonomies with correct params for org filters', async () => {
+    axiosMock.onGet(listTaxonomiesUrl).reply(200, { results: taxonomies, canAddTaxonomy: false });
+    const defaults = {
+      id: 1,
+      showSystemBadge: false,
+      canChangeTaxonomy: true,
+      canDeleteTaxonomy: true,
+      tagsCount: 0,
+      description: 'Taxonomy description here',
+    };
+    axiosMock.onGet(listTaxonomiesUnassignedUrl).reply(200, {
+      canAddTaxonomy: false,
+      results: [{ name: 'Unassigned Taxonomy A', ...defaults }],
+    });
+    axiosMock.onGet(listTaxonomiesOrg1Url).reply(200, {
+      canAddTaxonomy: false,
+      results: [{ name: 'Org1 Taxonomy B', ...defaults }],
+    });
+    axiosMock.onGet(listTaxonomiesOrg2Url).reply(200, {
+      canAddTaxonomy: false,
+      results: [{ name: 'Org2 Taxonomy C', ...defaults }],
+    });
+
+    const {
+      getByRole,
+      getByText,
+      queryByText,
+      findByRole,
+    } = render(<TaxonomyListPage />);
+
+    // Open the taxonomies org filter select menu
+    const taxonomiesFilterSelectMenu = await getByRole('button', { name: 'All taxonomies' });
+    fireEvent.click(taxonomiesFilterSelectMenu);
+
+    // Check that the 'Unassigned' option is correctly called
+    fireEvent.click(await findByRole('link', { name: 'Unassigned' }));
+    await waitFor(() => {
+      expect(getByText('Unassigned Taxonomy A')).toBeInTheDocument();
+    });
+
+    // Open the taxonomies org filter select menu again
+    fireEvent.click(taxonomiesFilterSelectMenu);
+
+    // Check that the 'Org 1' option is correctly called
+    fireEvent.click(getByRole('link', { name: 'Org 1' }));
+    await waitFor(() => {
+      expect(getByText('Org1 Taxonomy B')).toBeInTheDocument();
+    });
+
+    // Open the taxonomies org filter select menu again
+    fireEvent.click(taxonomiesFilterSelectMenu);
+
+    // Check that the 'Org 2' option is correctly called
+    fireEvent.click(getByRole('link', { name: 'Org 2' }));
+    await waitFor(() => {
+      expect(queryByText('Org1 Taxonomy B')).not.toBeInTheDocument();
+      expect(queryByText('Org2 Taxonomy C')).toBeInTheDocument();
+    });
+
+    // Open the taxonomies org filter select menu again
+    fireEvent.click(taxonomiesFilterSelectMenu);
+
+    // Check that the 'All' option is correctly called, it should show as
+    // 'All' rather than 'All taxonomies' in the select menu since its not selected
+    fireEvent.click(getByRole('link', { name: 'All' }));
+    await waitFor(() => {
+      expect(getByText(taxonomies[0].description)).toBeInTheDocument();
+    });
+  });
+});
diff --git a/src/taxonomy/TaxonomyListPage.tsx b/src/taxonomy/TaxonomyListPage.tsx
new file mode 100644
index 0000000000..99eb7420c1
--- /dev/null
+++ b/src/taxonomy/TaxonomyListPage.tsx
@@ -0,0 +1,247 @@
+import React, { useState } from 'react';
+import {
+  Button,
+  CardView,
+  Container,
+  DataTable,
+  Dropdown,
+  OverlayTrigger,
+  Spinner,
+  Tooltip,
+  SelectMenu,
+  MenuItem,
+  useToggle,
+} from '@openedx/paragon';
+import {
+  Add,
+  Check,
+} from '@openedx/paragon/icons';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import { Helmet } from 'react-helmet';
+
+import { useOrganizationListData } from '../generic/data/apiHooks';
+import SubHeader from '../generic/sub-header/SubHeader';
+import getPageHeadTitle from '../generic/utils';
+import { ALL_TAXONOMIES, apiUrls, UNASSIGNED } from './data/api';
+import { useTaxonomyList } from './data/apiHooks';
+import { ImportTagsWizard } from './import-tags';
+import messages from './messages';
+import TaxonomyCard from './taxonomy-card';
+
+const TaxonomyListHeaderButtons = (props: { canAddTaxonomy: boolean }) => {
+  const intl = useIntl();
+
+  const [isImportModalOpen, importModalOpen, importModalClose] = useToggle(false);
+
+  return (
+    <>
+      {isImportModalOpen && (
+        <ImportTagsWizard
+          isOpen={isImportModalOpen}
+          onClose={importModalClose}
+        />
+      )}
+      <OverlayTrigger
+        placement="top"
+        overlay={(
+          <Tooltip id="download-template-tooltip">
+            {intl.formatMessage(messages.downloadTemplateButtonHint)}
+          </Tooltip>
+        )}
+      >
+        <Dropdown id="download-template-dropdown">
+          <Dropdown.Toggle
+            id="download-template-dropdown-toggle"
+            variant="outline-primary"
+            data-testid="taxonomy-download-template"
+          >
+            {intl.formatMessage(messages.downloadTemplateButtonLabel)}
+          </Dropdown.Toggle>
+          <Dropdown.Menu>
+            <Dropdown.Item
+              href={apiUrls.taxonomyTemplate('csv')}
+              data-testid="taxonomy-download-template-csv"
+            >
+              {intl.formatMessage(messages.downloadTemplateButtonCSVLabel)}
+            </Dropdown.Item>
+            <Dropdown.Item
+              href={apiUrls.taxonomyTemplate('json')}
+              data-testid="taxonomy-download-template-json"
+            >
+              {intl.formatMessage(messages.downloadTemplateButtonJSONLabel)}
+            </Dropdown.Item>
+          </Dropdown.Menu>
+        </Dropdown>
+      </OverlayTrigger>
+      <Button
+        iconBefore={Add}
+        onClick={importModalOpen}
+        data-testid="taxonomy-import-button"
+        disabled={!props.canAddTaxonomy}
+      >
+        {intl.formatMessage(messages.importButtonLabel)}
+      </Button>
+    </>
+  );
+};
+
+const OrganizationFilterSelector = ({
+  isOrganizationListLoaded,
+  organizationListData,
+  selectedOrgFilter,
+  setSelectedOrgFilter,
+}: {
+  isOrganizationListLoaded: boolean;
+  organizationListData?: string[];
+  selectedOrgFilter: string;
+  setSelectedOrgFilter: (org: string) => void,
+}) => {
+  const intl = useIntl();
+  const isOrgSelected = (value) => (value === selectedOrgFilter ? <Check /> : null);
+  const selectOptions = [
+    <MenuItem
+      key="all-orgs-taxonomies"
+      className="x-small"
+      iconAfter={() => isOrgSelected(ALL_TAXONOMIES)}
+      onClick={() => setSelectedOrgFilter(ALL_TAXONOMIES)}
+    >
+      { isOrgSelected(ALL_TAXONOMIES)
+        ? intl.formatMessage(messages.orgInputSelectDefaultValue)
+        : intl.formatMessage(messages.orgAllValue)}
+    </MenuItem>,
+    <MenuItem
+      key="unassigned-taxonomies"
+      className="x-small"
+      iconAfter={() => isOrgSelected(UNASSIGNED)}
+      onClick={() => setSelectedOrgFilter(UNASSIGNED)}
+    >
+      { intl.formatMessage(messages.orgUnassignedValue) }
+    </MenuItem>,
+  ];
+
+  if (isOrganizationListLoaded && organizationListData) {
+    organizationListData.forEach(org => (
+      selectOptions.push(
+        <MenuItem
+          key={`${org}-taxonomies`}
+          className="x-small"
+          iconAfter={() => isOrgSelected(org)}
+          onClick={() => setSelectedOrgFilter(org)}
+        >
+          {org}
+        </MenuItem>,
+      )
+    ));
+  }
+
+  return (
+    <SelectMenu
+      className="flex-d x-small taxonomy-orgs-filter-selector"
+      variant="tertiary"
+      defaultMessage={intl.formatMessage(messages.orgInputSelectDefaultValue)}
+      data-testid="taxonomy-orgs-filter-selector"
+    >
+      { isOrganizationListLoaded
+        ? selectOptions
+        : (
+          <Spinner
+            animation="border"
+            size="xl"
+            screenReaderText={intl.formatMessage(messages.usageLoadingMessage)}
+          />
+        )}
+    </SelectMenu>
+  );
+};
+
+export const TaxonomyListPage = () => {
+  const intl = useIntl();
+  const [selectedOrgFilter, setSelectedOrgFilter] = useState<string>(ALL_TAXONOMIES);
+
+  const {
+    data: organizationListData,
+    isSuccess: isOrganizationListLoaded,
+  } = useOrganizationListData();
+
+  const {
+    data: taxonomyListData,
+    isSuccess: isLoaded,
+  } = useTaxonomyList(selectedOrgFilter);
+  const canAddTaxonomy = taxonomyListData?.canAddTaxonomy ?? false;
+
+  const getOrgSelect = () => (
+    // Initialize organization select component
+    <OrganizationFilterSelector
+      isOrganizationListLoaded={isOrganizationListLoaded}
+      organizationListData={organizationListData}
+      selectedOrgFilter={selectedOrgFilter}
+      setSelectedOrgFilter={setSelectedOrgFilter}
+    />
+  );
+
+  return (
+    <>
+      <Helmet>
+        <title>{getPageHeadTitle('', intl.formatMessage(messages.headerTitle))}</title>
+      </Helmet>
+      <div className="pt-4.5 pr-4.5 pl-4.5 pb-2 bg-light-100 box-shadow-down-2">
+        <Container size="xl">
+          <SubHeader
+            title={intl.formatMessage(messages.headerTitle)}
+            titleActions={getOrgSelect()}
+            headerActions={<TaxonomyListHeaderButtons canAddTaxonomy={canAddTaxonomy} />}
+            hideBorder
+          />
+        </Container>
+      </div>
+      <div className="bg-light-400 mt-1">
+        <Container size="xl">
+          {isLoaded && taxonomyListData && (
+            <DataTable
+              disableElevation
+              data={taxonomyListData.results}
+              itemCount={taxonomyListData.results.length}
+              columns={[
+                {
+                  Header: 'id',
+                  accessor: 'id',
+                },
+                {
+                  Header: 'name',
+                  accessor: 'name',
+                },
+                {
+                  Header: 'description',
+                  accessor: 'description',
+                },
+                {
+                  Header: 'systemDefined',
+                  accessor: 'systemDefined',
+                },
+                {
+                  Header: '',
+                  accessor: 'tagsCount',
+                },
+              ]}
+            >
+              <CardView
+                className="bg-light-400 p-5"
+                CardComponent={(row) => TaxonomyCard(row)}
+              />
+            </DataTable>
+          )}
+          {!isLoaded && (
+            <Container className="d-flex justify-content-center mt-6">
+              <Spinner
+                animation="border"
+                size="xl"
+                screenReaderText={intl.formatMessage(messages.usageLoadingMessage)}
+              />
+            </Container>
+          )}
+        </Container>
+      </div>
+    </>
+  );
+};
diff --git a/src/taxonomy/__mocks__/index.js b/src/taxonomy/__mocks__/index.js
new file mode 100644
index 0000000000..7934cfb72c
--- /dev/null
+++ b/src/taxonomy/__mocks__/index.js
@@ -0,0 +1 @@
+export { default as taxonomyListMock } from './taxonomyListMock';
diff --git a/src/taxonomy/__mocks__/taxonomyListMock.js b/src/taxonomy/__mocks__/taxonomyListMock.js
new file mode 100644
index 0000000000..0e7b24e4f7
--- /dev/null
+++ b/src/taxonomy/__mocks__/taxonomyListMock.js
@@ -0,0 +1,59 @@
+module.exports = {
+  next: null,
+  previous: null,
+  count: 4,
+  numPages: 1,
+  currentPage: 1,
+  start: 0,
+  canAddTaxonomy: true,
+  results: [
+    {
+      id: -2,
+      name: 'Content Authors',
+      description: 'Allows tags for any user ID created on the instance.',
+      enabled: true,
+      allowMultiple: false,
+      allowFreeText: false,
+      systemDefined: true,
+      visibleToAuthors: false,
+      canChangeTaxonomy: false,
+      canDeleteTaxonomy: false,
+    },
+    {
+      id: -1,
+      name: 'Languages',
+      description: 'lang lang lang lang lang lang lang lang',
+      enabled: true,
+      allowMultiple: false,
+      allowFreeText: false,
+      systemDefined: true,
+      visibleToAuthors: true,
+      canChangeTaxonomy: false,
+      canDeleteTaxonomy: false,
+    },
+    {
+      id: 1,
+      name: 'Taxonomy',
+      description: 'This is a Description',
+      enabled: true,
+      allowMultiple: false,
+      allowFreeText: false,
+      systemDefined: false,
+      visibleToAuthors: true,
+      canChangeTaxonomy: true,
+      canDeleteTaxonomy: true,
+    },
+    {
+      id: 2,
+      name: 'Taxonomy long long long long long long long long long long long long long long long long long long long',
+      description: 'This is a Description long lon',
+      enabled: true,
+      allowMultiple: false,
+      allowFreeText: false,
+      systemDefined: false,
+      visibleToAuthors: true,
+      canChangeTaxonomy: true,
+      canDeleteTaxonomy: true,
+    },
+  ],
+};
diff --git a/src/taxonomy/common/context.ts b/src/taxonomy/common/context.ts
new file mode 100644
index 0000000000..502d3e070d
--- /dev/null
+++ b/src/taxonomy/common/context.ts
@@ -0,0 +1,22 @@
+import React from 'react';
+
+export interface AlertProps {
+  /** title of the alert */
+  title: React.ReactNode;
+  /** description of the alert */
+  description: React.ReactNode;
+}
+
+export interface TaxonomyContextData {
+  toastMessage: null | string;
+  setToastMessage: null | React.Dispatch<React.SetStateAction<null | string>>;
+  alertProps: null | AlertProps;
+  setAlertProps: null | React.Dispatch<React.SetStateAction<null | AlertProps>>;
+}
+
+export const TaxonomyContext = React.createContext<TaxonomyContextData>({
+  toastMessage: null,
+  setToastMessage: null,
+  alertProps: null,
+  setAlertProps: null,
+});
diff --git a/src/taxonomy/data/api.test.ts b/src/taxonomy/data/api.test.ts
new file mode 100644
index 0000000000..ed6ef8cdce
--- /dev/null
+++ b/src/taxonomy/data/api.test.ts
@@ -0,0 +1,60 @@
+import { initializeMocks } from '../../testUtils';
+import { taxonomyListMock } from '../__mocks__';
+
+import {
+  apiUrls,
+  getTaxonomyExportFile,
+  getTaxonomyListData,
+  getTaxonomy,
+  deleteTaxonomy,
+} from './api';
+
+describe('taxonomy api calls', () => {
+  it.each([
+    undefined,
+    'All taxonomies',
+    'Unassigned',
+    'testOrg',
+  ])('should get taxonomy list data for \'%s\' org filter', async (org) => {
+    const { axiosMock } = initializeMocks();
+    axiosMock.onGet(apiUrls.taxonomyList(org)).reply(200, taxonomyListMock);
+    const result = await getTaxonomyListData(org);
+
+    expect(axiosMock.history.get[0].url).toEqual(apiUrls.taxonomyList(org));
+    expect(result).toEqual(taxonomyListMock);
+  });
+
+  it('should delete a taxonomy', async () => {
+    const { axiosMock } = initializeMocks();
+    const taxonomyId = 123;
+    axiosMock.onDelete(apiUrls.taxonomy(taxonomyId)).reply(200);
+    await deleteTaxonomy(taxonomyId);
+
+    expect(axiosMock.history.delete[0].url).toEqual(apiUrls.taxonomy(taxonomyId));
+  });
+
+  it('should call get taxonomy', async () => {
+    const { axiosMock } = initializeMocks();
+    axiosMock.onGet(apiUrls.taxonomy(1)).reply(200);
+    await getTaxonomy(1);
+
+    expect(axiosMock.history.get[0].url).toEqual(apiUrls.taxonomy(1));
+  });
+
+  it('Export should set window.location.href correctly', () => {
+    initializeMocks();
+    const origLocation = window.location;
+    // @ts-ignore
+    delete window.location;
+    // @ts-ignore
+    window.location = { href: '' };
+
+    const pk = 1;
+    const format = 'json';
+    getTaxonomyExportFile(pk, format);
+    expect(window.location.href).toEqual(apiUrls.exportTaxonomy(pk, format));
+
+    // Restore the location object of window:
+    window.location = origLocation;
+  });
+});
diff --git a/src/taxonomy/data/api.ts b/src/taxonomy/data/api.ts
new file mode 100644
index 0000000000..60ad85b5c7
--- /dev/null
+++ b/src/taxonomy/data/api.ts
@@ -0,0 +1,111 @@
+import { camelCaseObject, getConfig } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import type { TaxonomyData, TaxonomyListData } from './types';
+
+const getApiBaseUrl = () => getConfig().STUDIO_BASE_URL;
+const getTaxonomiesV1Endpoint = () => new URL('api/content_tagging/v1/taxonomies/', getApiBaseUrl()).href;
+/**
+ * Helper method for creating URLs for the tagging/taxonomy API. Used only in this file.
+ * @param path The subpath within the taxonomies "v1" REST API namespace
+ * @param searchParams Query parameters to include
+ */
+const makeUrl = (path: string, searchParams?: Record<string, string | number>): string => {
+  const url = new URL(path, getTaxonomiesV1Endpoint());
+  if (searchParams) {
+    Object.entries(searchParams).forEach(([k, v]) => url.searchParams.append(k, String(v)));
+  }
+  return url.href;
+};
+
+export const ALL_TAXONOMIES = '__all';
+export const UNASSIGNED = '__unassigned';
+
+export const apiUrls = {
+  /**
+   * Get the URL of the "list all taxonomies" endpoint
+   * @param org Optionally, Filter the list to only show taxonomies assigned to this org
+   */
+  taxonomyList(org?: string) {
+    const params: Record<string, string> = {};
+    if (org !== undefined) {
+      if (org === UNASSIGNED) {
+        params.unassigned = 'true';
+      } else if (org !== ALL_TAXONOMIES) {
+        params.org = org;
+      }
+    }
+    return makeUrl('.', { enabled: 'true', ...params });
+  },
+  /**
+   * Get the URL of the API endpoint to download a taxonomy as a CSV/JSON file.
+   * @param taxonomyId The ID of the taxonomy
+   * @param format Which format to use for the export
+   */
+  exportTaxonomy: (taxonomyId: number, format: 'json' | 'csv') => (
+    makeUrl(`${taxonomyId}/export/`, { output_format: format, download: 1 })
+  ),
+  /**
+   * The the URL of the downloadable template file that shows how to format a
+   * taxonomy file.
+   * @param format The format requested
+   */
+  taxonomyTemplate: (format: 'json' | 'csv') => makeUrl(`import/template.${format}`),
+  /** Get the URL for a Taxonomy */
+  taxonomy: (taxonomyId: number) => makeUrl(`${taxonomyId}/`),
+  /**
+   * Get the URL for listing the tags of a taxonomy
+   * @param pageIndex Zero-indexed page number
+   * @param pageSize How many tags per page to load
+   */
+  tagList: (taxonomyId: number, pageIndex: number, pageSize: number) => makeUrl(`${taxonomyId}/tags/`, {
+    page: (pageIndex + 1), page_size: pageSize,
+  }),
+  /**
+   * Get _all_ tags below a given parent tag. This may be replaced with something more scalable in the future.
+   */
+  allSubtagsOf: (taxonomyId: number, parentTagValue: string) => makeUrl(`${taxonomyId}/tags/`, {
+    // Load as deeply as we can
+    full_depth_threshold: 10000,
+    parent_tag: parentTagValue,
+  }),
+  /** URL to create a new taxonomy from an import file. */
+  createTaxonomyFromImport: () => makeUrl('import/'),
+  /** URL to import tags into an existing taxonomy */
+  tagsImport: (taxonomyId) => makeUrl(`${taxonomyId}/tags/import/`),
+  /** URL to plan (preview what would happen) a taxonomy import */
+  tagsPlanImport: (taxonomyId: number) => makeUrl(`${taxonomyId}/tags/import/plan/`),
+} satisfies Record<string, (...args: any[]) => string>;
+
+/**
+ * Get list of taxonomies.
+ * @param org Optionally, filter the list to only show taxonomies assigned to this org
+ */
+export async function getTaxonomyListData(org?: string): Promise<TaxonomyListData> {
+  const { data } = await getAuthenticatedHttpClient().get(apiUrls.taxonomyList(org));
+  return camelCaseObject(data);
+}
+
+/**
+ * Delete a Taxonomy
+ */
+export async function deleteTaxonomy(taxonomyId: number): Promise<void> {
+  await getAuthenticatedHttpClient().delete(apiUrls.taxonomy(taxonomyId));
+}
+
+/**
+ * Get metadata about a Taxonomy
+ * @param taxonomyId The ID of the taxonomy to get
+ */
+export async function getTaxonomy(taxonomyId: number): Promise<TaxonomyData> {
+  const { data } = await getAuthenticatedHttpClient().get(apiUrls.taxonomy(taxonomyId));
+  return camelCaseObject(data);
+}
+
+/**
+ * Downloads the file of the exported taxonomy
+ * @param taxonomyId The ID of the taxonomy
+ * @param format Which format to use for the export file.
+ */
+export function getTaxonomyExportFile(taxonomyId: number, format: 'json' | 'csv'): void {
+  window.location.href = apiUrls.exportTaxonomy(taxonomyId, format);
+}
diff --git a/src/taxonomy/data/apiHooks.test.jsx b/src/taxonomy/data/apiHooks.test.jsx
new file mode 100644
index 0000000000..5e38e74196
--- /dev/null
+++ b/src/taxonomy/data/apiHooks.test.jsx
@@ -0,0 +1,109 @@
+// @ts-check
+import React from 'react'; // Required to use JSX syntax without type errors
+
+import { initializeMockApp } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { waitFor } from '@testing-library/react';
+import { renderHook } from '@testing-library/react-hooks';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+import MockAdapter from 'axios-mock-adapter';
+
+import { apiUrls } from './api';
+
+import {
+  useImportPlan,
+  useImportTags,
+  useImportNewTaxonomy,
+} from './apiHooks';
+
+let axiosMock;
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+    },
+  },
+});
+
+const wrapper = ({ children }) => (
+  <QueryClientProvider client={queryClient}>
+    {children}
+  </QueryClientProvider>
+);
+
+const emptyFile = new File([], 'empty.csv');
+
+describe('import taxonomy api calls', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should call import new taxonomy', async () => {
+    const mockResult = {
+      id: 8,
+      name: 'Taxonomy name',
+      exportId: 'taxonomy_export_id',
+      description: 'Taxonomy description',
+    };
+    axiosMock.onPost(apiUrls.createTaxonomyFromImport()).reply(201, mockResult);
+    const { result } = renderHook(() => useImportNewTaxonomy(), { wrapper });
+    const mutateResult = await result.current.mutateAsync({
+      name: 'Taxonomy name',
+      description: 'Taxonomy description',
+      file: emptyFile,
+    });
+
+    expect(axiosMock.history.post[0].url).toEqual(apiUrls.createTaxonomyFromImport());
+    expect(mutateResult).toEqual(mockResult);
+  });
+
+  it('should call import tags', async () => {
+    const taxonomy = { id: 1, name: 'taxonomy name' };
+    axiosMock.onPut(apiUrls.tagsImport(1)).reply(200, taxonomy);
+    const mockInvalidateQueries = jest.spyOn(queryClient, 'invalidateQueries');
+    const mockSetQueryData = jest.spyOn(queryClient, 'setQueryData');
+
+    const { result } = renderHook(() => useImportTags(), { wrapper });
+
+    await result.current.mutateAsync({ taxonomyId: 1, file: emptyFile });
+    expect(axiosMock.history.put[0].url).toEqual(apiUrls.tagsImport(1));
+    expect(mockInvalidateQueries).toHaveBeenCalledWith({ queryKey: ['taxonomies', 'taxonomy', 1, 'tags'] });
+    expect(mockSetQueryData).toHaveBeenCalledWith(['taxonomies', 'taxonomy', 1, 'metadata'], taxonomy);
+  });
+
+  it('should call plan import tags', async () => {
+    axiosMock.onPut(apiUrls.tagsPlanImport(1)).reply(200, { plan: 'some plan' });
+    const { result } = renderHook(() => useImportPlan(1, emptyFile), { wrapper });
+
+    await waitFor(() => {
+      expect(result.current.isLoading).toBeFalsy();
+    });
+    expect(axiosMock.history.put[0].url).toEqual(apiUrls.tagsPlanImport(1));
+    expect(result.current.data).toEqual('some plan');
+  });
+
+  it('should handle errors in plan import tags', async () => {
+    axiosMock.onPut(apiUrls.tagsPlanImport(1)).reply(400, { error: 'test error' });
+    const { result } = renderHook(() => useImportPlan(1, emptyFile), { wrapper });
+
+    await waitFor(() => {
+      expect(result.current.isError).toBeTruthy();
+    });
+    expect(result.current.error).toEqual(Error('test error'));
+    expect(axiosMock.history.put[0].url).toEqual(apiUrls.tagsPlanImport(1));
+  });
+});
diff --git a/src/taxonomy/data/apiHooks.ts b/src/taxonomy/data/apiHooks.ts
new file mode 100644
index 0000000000..f8856c86ba
--- /dev/null
+++ b/src/taxonomy/data/apiHooks.ts
@@ -0,0 +1,204 @@
+/**
+ * This is a file used especially in this `taxonomy` module.
+ *
+ * We are using a new approach, using `useQuery` to build and execute the queries to the APIs.
+ * This approach accelerates the development.
+ *
+ * In this file you will find two types of hooks:
+ * - Hooks that builds the query with `useQuery`. These hooks are not used outside of this file.
+ *   Ex. useTaxonomyListData.
+ * - Hooks that calls the query hook, prepare and return the data.
+ *   Ex. useTaxonomyListDataResponse & useIsTaxonomyListDataLoaded.
+ */
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { camelCaseObject } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { apiUrls, ALL_TAXONOMIES } from './api';
+import * as api from './api';
+import type { QueryOptions, TagListData } from './types';
+
+// Query key patterns. Allows an easy way to clear all data related to a given taxonomy.
+// https://github.com/openedx/frontend-app-admin-portal/blob/2ba315d/docs/decisions/0006-tanstack-react-query.rst
+// Inspired by https://tkdodo.eu/blog/effective-react-query-keys#use-query-key-factories.
+export const taxonomyQueryKeys = {
+  all: ['taxonomies'],
+  /**
+   * Key for the list of taxonomies, optionally filtered by org.
+   * @param org Which org we fetched the taxonomy list for (optional)
+   */
+  taxonomyList: (org?: string) => [
+    ...taxonomyQueryKeys.all, 'taxonomyList', ...(org && org !== ALL_TAXONOMIES ? [org] : []),
+  ],
+  /**
+   * Base key for data specific to a single taxonomy. No data is stored directly in this key.
+   * @param taxonomyId ID of the taxonomy
+   */
+  taxonomy: (taxonomyId: number) => [...taxonomyQueryKeys.all, 'taxonomy', taxonomyId],
+  /**
+   * @param taxonomyId ID of the taxonomy
+   */
+  taxonomyMetadata: (taxonomyId: number) => [...taxonomyQueryKeys.taxonomy(taxonomyId), 'metadata'],
+  /**
+   * @param taxonomyId ID of the taxonomy
+   */
+  taxonomyTagList: (taxonomyId: number) => [...taxonomyQueryKeys.taxonomy(taxonomyId), 'tags'],
+  /**
+   * @param taxonomyId ID of the taxonomy
+   * @param pageIndex Which page of tags to load (zero-based)
+   * @param pageSize
+   */
+  taxonomyTagListPage: (taxonomyId: number, pageIndex: number, pageSize: number) => [
+    ...taxonomyQueryKeys.taxonomyTagList(taxonomyId), 'page', pageIndex, pageSize,
+  ],
+  /**
+   * Query for loading _all_ the subtags of a particular parent tag
+   * @param taxonomyId ID of the taxonomy
+   * @param parentTagValue
+   */
+  taxonomyTagSubtagsList: (taxonomyId: number, parentTagValue: string) => [
+    ...taxonomyQueryKeys.taxonomyTagList(taxonomyId), 'subtags', parentTagValue,
+  ],
+  /**
+   * @param taxonomyId ID of the taxonomy
+   * @param fileId Some string to uniquely identify the file we want to upload
+   */
+  importPlan: (taxonomyId: number, fileId: string) => [...taxonomyQueryKeys.all, 'importPlan', taxonomyId, fileId],
+} satisfies Record<string, (string | number)[] | ((...args: any[]) => (string | number)[])>;
+
+/**
+ * Builds the query to get the taxonomy list
+ * @param {string} [org] Filter the list to only show taxonomies assigned to this org
+ */
+export const useTaxonomyList = (org) => (
+  useQuery({
+    queryKey: taxonomyQueryKeys.taxonomyList(org),
+    queryFn: () => api.getTaxonomyListData(org),
+  })
+);
+
+/**
+ * Builds the mutation to delete a taxonomy.
+ * @returns A function that can be used to delete the taxonomy.
+ */
+export const useDeleteTaxonomy = () => {
+  const queryClient = useQueryClient();
+  const { mutateAsync } = useMutation({
+    mutationFn: async ({ pk }: { pk: number }) => api.deleteTaxonomy(pk),
+    onSettled: (_d, _e, args) => {
+      queryClient.invalidateQueries({ queryKey: taxonomyQueryKeys.taxonomyList() });
+      queryClient.removeQueries({ queryKey: taxonomyQueryKeys.taxonomy(args.pk) });
+    },
+  });
+  return mutateAsync;
+};
+
+/** Builds the query to get the taxonomy detail */
+export const useTaxonomyDetails = (taxonomyId: number) => useQuery({
+  queryKey: taxonomyQueryKeys.taxonomyMetadata(taxonomyId),
+  queryFn: () => api.getTaxonomy(taxonomyId),
+});
+
+/**
+ * Use this mutation to import a new taxonomy.
+ */
+export const useImportNewTaxonomy = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async ({
+      name, description, file,
+    }: { name: string, description: string, file: File }) => {
+      const formData = new FormData();
+      formData.append('taxonomy_name', name);
+      formData.append('taxonomy_description', description);
+      formData.append('file', file);
+
+      const { data } = await getAuthenticatedHttpClient().post(apiUrls.createTaxonomyFromImport(), formData);
+      return camelCaseObject(data);
+    },
+    onSuccess: (data) => {
+      // There's a new taxonomy, so the list of taxonomies needs to be refreshed:
+      queryClient.invalidateQueries({
+        queryKey: taxonomyQueryKeys.taxonomyList(),
+      });
+      queryClient.setQueryData(taxonomyQueryKeys.taxonomyMetadata(data.id), data);
+    },
+  });
+};
+
+/**
+ * Build the mutation to import tags to an existing taxonomy
+ */
+export const useImportTags = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async ({ taxonomyId, file }: { taxonomyId: number, file: File }) => {
+      const formData = new FormData();
+      formData.append('file', file);
+
+      try {
+        const { data } = await getAuthenticatedHttpClient().put(apiUrls.tagsImport(taxonomyId), formData);
+        return camelCaseObject(data);
+      } catch (err) {
+        throw new Error((err as any).response?.data?.error || (err as any).message);
+      }
+    },
+    onSuccess: (data) => {
+      queryClient.invalidateQueries({
+        queryKey: taxonomyQueryKeys.taxonomyTagList(data.id),
+      });
+      // In the metadata, 'tagsCount' (and possibly other fields) will have changed:
+      queryClient.setQueryData(taxonomyQueryKeys.taxonomyMetadata(data.id), data);
+    },
+  });
+};
+
+/**
+ * Preview the results of importing the given file into an existing taxonomy.
+ * @param taxonomyId The ID of the taxonomy whose tags we're updating.
+ * @param file The file that we want to import
+ */
+export const useImportPlan = (taxonomyId: number, file: File | null) => useQuery({
+  queryKey: taxonomyQueryKeys.importPlan(taxonomyId, file ? `${file.name}${file.lastModified}${file.size}` : ''),
+  queryFn: async (): Promise<string | null> => {
+    if (!taxonomyId || file === null) {
+      return null;
+    }
+    const formData = new FormData();
+    formData.append('file', file);
+
+    try {
+      const { data } = await getAuthenticatedHttpClient().put(apiUrls.tagsPlanImport(taxonomyId), formData);
+      return data.plan as string;
+    } catch (err) {
+      throw new Error((err as any).response?.data?.error || (err as any).message);
+    }
+  },
+  retry: false, // If there's an error, it's probably a real problem with the file. Don't try again several times!
+});
+
+/**
+ * Use the list of tags in a taxonomy.
+ */
+export const useTagListData = (taxonomyId: number, options: QueryOptions) => {
+  const { pageIndex, pageSize } = options;
+  return useQuery({
+    queryKey: taxonomyQueryKeys.taxonomyTagListPage(taxonomyId, pageIndex, pageSize),
+    queryFn: async () => {
+      const { data } = await getAuthenticatedHttpClient().get(apiUrls.tagList(taxonomyId, pageIndex, pageSize));
+      return camelCaseObject(data) as TagListData;
+    },
+  });
+};
+
+/**
+ * Temporary hook to load *all* the subtags of a given tag in a taxonomy.
+ * Doesn't handle pagination or anything. This is meant to be replaced by
+ * something more sophisticated later, as we improve the "taxonomy details" page.
+ */
+export const useSubTags = (taxonomyId: number, parentTagValue: string) => useQuery({
+  queryKey: taxonomyQueryKeys.taxonomyTagSubtagsList(taxonomyId, parentTagValue),
+  queryFn: async () => {
+    const response = await getAuthenticatedHttpClient().get(apiUrls.allSubtagsOf(taxonomyId, parentTagValue));
+    return camelCaseObject(response.data) as TagListData;
+  },
+});
diff --git a/src/taxonomy/data/types.ts b/src/taxonomy/data/types.ts
new file mode 100644
index 0000000000..dbc7186031
--- /dev/null
+++ b/src/taxonomy/data/types.ts
@@ -0,0 +1,60 @@
+/** Metadata about a taxonomy */
+export interface TaxonomyData {
+  id: number;
+  name: string;
+  description: string;
+  exportId: string;
+  enabled: boolean;
+  allowMultiple: boolean;
+  allowFreeText: boolean;
+  systemDefined: boolean;
+  visibleToAuthors: boolean;
+  tagsCount: number;
+  orgs: string[];
+  allOrgs: boolean;
+  canChangeTaxonomy: boolean;
+  canDeleteTaxonomy: boolean;
+  canTagObject: boolean;
+}
+
+/** The list of taxonomies */
+export interface TaxonomyListData {
+  next: string;
+  previous: string;
+  count: number;
+  numPages: number;
+  currentPage: number;
+  start: number;
+  canAddTaxonomy: boolean;
+  results: TaxonomyData[];
+}
+
+export interface QueryOptions {
+  pageIndex: number;
+  pageSize: number;
+}
+
+export interface TagData {
+  childCount: number;
+  descendantCount: number;
+  depth: number;
+  externalId: string;
+  id: number;
+  parentValue: string | null;
+  subTagsUrl: string | null;
+  /** Unique ID for this tag, also its display text */
+  value: string;
+  usageCount?: number;
+  /** Database ID. Don't rely on this, as it is not present for free-text tags. */
+  _id?: string;
+}
+
+export interface TagListData {
+  count: number;
+  currentPage: number;
+  next: string;
+  numPages: number;
+  previous: string;
+  results: TagData[];
+  start: number;
+}
diff --git a/src/taxonomy/delete-dialog/DeleteDialog.scss b/src/taxonomy/delete-dialog/DeleteDialog.scss
new file mode 100644
index 0000000000..8f05e3ab2c
--- /dev/null
+++ b/src/taxonomy/delete-dialog/DeleteDialog.scss
@@ -0,0 +1,6 @@
+.taxonomy-delete-dialog {
+  .warning-icon {
+    top: 5px;
+    right: 5px;
+  }
+}
diff --git a/src/taxonomy/delete-dialog/index.jsx b/src/taxonomy/delete-dialog/index.jsx
new file mode 100644
index 0000000000..3fb5c9b8e2
--- /dev/null
+++ b/src/taxonomy/delete-dialog/index.jsx
@@ -0,0 +1,100 @@
+// @ts-check
+import React, { useCallback, useState } from 'react';
+import {
+  ActionRow,
+  Button,
+  Container,
+  Form,
+  ModalDialog,
+  Icon,
+} from '@openedx/paragon';
+import PropTypes from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Warning } from '@openedx/paragon/icons';
+import messages from './messages';
+
+const DeleteDialog = ({
+  taxonomyName,
+  tagsCount,
+  isOpen,
+  onClose,
+  onDelete,
+}) => {
+  const intl = useIntl();
+  const [deleteButtonDisabled, setDeleteButtonDisabled] = useState(true);
+  const deleteLabel = intl.formatMessage(messages.deleteDialogConfirmDeleteLabel);
+
+  const handleInputChange = useCallback((event) => {
+    if (event.target.value === deleteLabel) {
+      setDeleteButtonDisabled(false);
+    } else {
+      setDeleteButtonDisabled(true);
+    }
+  }, []);
+
+  const onClickDelete = React.useCallback(() => {
+    onClose();
+    onDelete();
+  }, [onClose, onDelete]);
+
+  return (
+    <Container onClick={(e) => e.stopPropagation() /* This prevents calling onClick handler from the parent */}>
+      <ModalDialog
+        title={intl.formatMessage(messages.deleteDialogTitle, { taxonomyName })}
+        isOpen={isOpen}
+        onClose={onClose}
+        size="md"
+        hasCloseButton={false}
+        variant="warning"
+        className="taxonomy-delete-dialog"
+      >
+        <ModalDialog.Header>
+          <ModalDialog.Title>
+            <Icon src={Warning} className="d-inline-block text-warning warning-icon" />
+            {intl.formatMessage(messages.deleteDialogTitle, { taxonomyName })}
+          </ModalDialog.Title>
+        </ModalDialog.Header>
+        <ModalDialog.Body>
+          <div className="mb-4">
+            {intl.formatMessage(messages.deleteDialogBody, { tagsCount })}
+          </div>
+          <Form.Group>
+            <Form.Label>
+              {intl.formatMessage(messages.deleteDialogConfirmLabel, {
+                deleteLabel: <b>{deleteLabel}</b>,
+              })}
+            </Form.Label>
+            <Form.Control
+              onChange={handleInputChange}
+            />
+          </Form.Group>
+        </ModalDialog.Body>
+        <ModalDialog.Footer>
+          <ActionRow>
+            <ModalDialog.CloseButton variant="tertiary">
+              {intl.formatMessage(messages.deleteDialogCancelLabel)}
+            </ModalDialog.CloseButton>
+            <Button
+              variant="primary"
+              disabled={deleteButtonDisabled}
+              onClick={onClickDelete}
+              data-testid="delete-button"
+            >
+              {intl.formatMessage(messages.deleteDialogDeleteLabel)}
+            </Button>
+          </ActionRow>
+        </ModalDialog.Footer>
+      </ModalDialog>
+    </Container>
+  );
+};
+
+DeleteDialog.propTypes = {
+  taxonomyName: PropTypes.string.isRequired,
+  tagsCount: PropTypes.number.isRequired,
+  isOpen: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  onDelete: PropTypes.func.isRequired,
+};
+
+export default DeleteDialog;
diff --git a/src/taxonomy/delete-dialog/messages.ts b/src/taxonomy/delete-dialog/messages.ts
new file mode 100644
index 0000000000..42654e1c7f
--- /dev/null
+++ b/src/taxonomy/delete-dialog/messages.ts
@@ -0,0 +1,30 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  deleteDialogTitle: {
+    id: 'course-authoring.taxonomy-list.dialog.delete.title',
+    defaultMessage: 'Delete "{taxonomyName}"',
+  },
+  deleteDialogBody: {
+    id: 'course-authoring.taxonomy-list.dialog.delete.body',
+    defaultMessage: 'Warning! You are about to delete a taxonomy containing {tagsCount} tags. Assigned organizations will no longer be able to access the taxonomy, and any tags applied to course content will be removed.',
+  },
+  deleteDialogConfirmLabel: {
+    id: 'course-authoring.taxonomy-list.dialog.delete.confirm.label',
+    defaultMessage: 'Type {deleteLabel} to confirm',
+  },
+  deleteDialogConfirmDeleteLabel: {
+    id: 'course-authoring.taxonomy-list.dialog.delete.confirmDelete.label',
+    defaultMessage: 'DELETE',
+  },
+  deleteDialogCancelLabel: {
+    id: 'course-authoring.taxonomy-list.dialog.delete.cancel.label',
+    defaultMessage: 'Cancel',
+  },
+  deleteDialogDeleteLabel: {
+    id: 'course-authoring.taxonomy-list.dialog.delete.delete.label',
+    defaultMessage: 'Delete',
+  },
+});
+
+export default messages;
diff --git a/src/taxonomy/export-modal/ExportModal.scss b/src/taxonomy/export-modal/ExportModal.scss
new file mode 100644
index 0000000000..a987859ce5
--- /dev/null
+++ b/src/taxonomy/export-modal/ExportModal.scss
@@ -0,0 +1,11 @@
+.taxonomy-export-modal {
+  .pgn__form-radio {
+    // Used to extend the clickable area to all the width of the modal
+    width: 100%;
+  }
+
+  .pgn__form-radio > div {
+    // Used to extend the clickable area to all the width of the modal
+    width: 100%;
+  }
+}
diff --git a/src/taxonomy/export-modal/index.jsx b/src/taxonomy/export-modal/index.jsx
new file mode 100644
index 0000000000..f10eced467
--- /dev/null
+++ b/src/taxonomy/export-modal/index.jsx
@@ -0,0 +1,94 @@
+// @ts-check
+import React, { useState } from 'react';
+import {
+  ActionRow,
+  Button,
+  Container,
+  Form,
+  ModalDialog,
+} from '@openedx/paragon';
+import PropTypes from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import messages from './messages';
+import { getTaxonomyExportFile } from '../data/api';
+
+const ExportModal = ({
+  taxonomyId,
+  isOpen,
+  onClose,
+}) => {
+  const intl = useIntl();
+  const [outputFormat, setOutputFormat] = useState(/** @type {'csv'|'json'} */('csv'));
+
+  const onClickExport = React.useCallback(() => {
+    onClose();
+    getTaxonomyExportFile(taxonomyId, outputFormat);
+  }, [onClose, taxonomyId, outputFormat]);
+
+  return (
+    <Container onClick={(e) => e.stopPropagation() /* This prevents calling onClick handler from the parent */}>
+      <ModalDialog
+        title={intl.formatMessage(messages.exportModalTitle)}
+        isOpen={isOpen}
+        onClose={onClose}
+        size="lg"
+        hasCloseButton
+        isFullscreenOnMobile
+        className="taxonomy-export-modal"
+      >
+        <ModalDialog.Header>
+          <ModalDialog.Title>
+            {intl.formatMessage(messages.exportModalTitle)}
+          </ModalDialog.Title>
+        </ModalDialog.Header>
+        <ModalDialog.Body className="pb-5 mt-2">
+          <Form.Group>
+            <Form.Label>
+              {intl.formatMessage(messages.exportModalBodyDescription)}
+            </Form.Label>
+            <Form.RadioSet
+              name="export-format"
+              value={outputFormat}
+              onChange={(e) => setOutputFormat(e.target.value)}
+            >
+              <Form.Radio
+                key={`export-csv-format-${taxonomyId}`}
+                value="csv"
+              >
+                {intl.formatMessage(messages.taxonomyCSVFormat)}
+              </Form.Radio>
+              <Form.Radio
+                key={`export-json-format-${taxonomyId}`}
+                value="json"
+              >
+                {intl.formatMessage(messages.taxonomyJSONFormat)}
+              </Form.Radio>
+            </Form.RadioSet>
+          </Form.Group>
+        </ModalDialog.Body>
+        <ModalDialog.Footer>
+          <ActionRow>
+            <ModalDialog.CloseButton variant="tertiary">
+              {intl.formatMessage(messages.taxonomyModalsCancelLabel)}
+            </ModalDialog.CloseButton>
+            <Button
+              variant="primary"
+              onClick={onClickExport}
+              data-testid={`export-button-${taxonomyId}`}
+            >
+              {intl.formatMessage(messages.exportModalSubmitButtonLabel)}
+            </Button>
+          </ActionRow>
+        </ModalDialog.Footer>
+      </ModalDialog>
+    </Container>
+  );
+};
+
+ExportModal.propTypes = {
+  taxonomyId: PropTypes.number.isRequired,
+  isOpen: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+};
+
+export default ExportModal;
diff --git a/src/taxonomy/export-modal/messages.ts b/src/taxonomy/export-modal/messages.ts
new file mode 100644
index 0000000000..5992f0557a
--- /dev/null
+++ b/src/taxonomy/export-modal/messages.ts
@@ -0,0 +1,30 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  exportModalTitle: {
+    id: 'course-authoring.taxonomy-list.modal.export.title',
+    defaultMessage: 'Select format to export',
+  },
+  exportModalBodyDescription: {
+    id: 'course-authoring.taxonomy-list.modal.export.body',
+    defaultMessage: 'Select the file format in which you would like the taxonomy to be exported:',
+  },
+  exportModalSubmitButtonLabel: {
+    id: 'course-authoring.taxonomy-list.modal.export.submit.label',
+    defaultMessage: 'Export',
+  },
+  taxonomyCSVFormat: {
+    id: 'course-authoring.taxonomy-list.csv-format',
+    defaultMessage: 'CSV file',
+  },
+  taxonomyJSONFormat: {
+    id: 'course-authoring.taxonomy-list.json-format',
+    defaultMessage: 'JSON file',
+  },
+  taxonomyModalsCancelLabel: {
+    id: 'course-authoring.taxonomy-list.modal.cancel',
+    defaultMessage: 'Cancel',
+  },
+});
+
+export default messages;
diff --git a/src/taxonomy/import-tags/ImportTagsWizard.jsx b/src/taxonomy/import-tags/ImportTagsWizard.jsx
new file mode 100644
index 0000000000..8a67fef46e
--- /dev/null
+++ b/src/taxonomy/import-tags/ImportTagsWizard.jsx
@@ -0,0 +1,569 @@
+// @ts-check
+import React, { useState, useContext, useMemo } from 'react';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import {
+  useToggle,
+  Button,
+  Container,
+  Dropzone,
+  Icon,
+  IconButton,
+  ModalDialog,
+  Stack,
+  Stepper,
+  Form,
+} from '@openedx/paragon';
+import {
+  DeleteOutline,
+  Download,
+  Error as ErrorIcon,
+  InsertDriveFile,
+  Warning,
+} from '@openedx/paragon/icons';
+import PropTypes from 'prop-types';
+
+import LoadingButton from '../../generic/loading-button';
+import { LoadingSpinner } from '../../generic/Loading';
+import { getFileSizeToClosestByte } from '../../utils';
+import { TaxonomyContext } from '../common/context';
+import { getTaxonomyExportFile, apiUrls } from '../data/api';
+import { useImportTags, useImportPlan, useImportNewTaxonomy } from '../data/apiHooks';
+import messages from './messages';
+
+const linebreak = <> <br /> <br /> </>;
+
+const TaxonomyProp = PropTypes.shape({
+  id: PropTypes.number.isRequired,
+  name: PropTypes.string.isRequired,
+});
+
+const ExportStep = ({ taxonomy }) => {
+  const intl = useIntl();
+
+  return (
+    <Stepper.Step eventKey="export" title="export">
+      <Stack gap={3} data-testid="export-step">
+        <p>{intl.formatMessage(messages.importWizardStepExportBody, { br: linebreak })}</p>
+        <Stack gap={3} direction="horizontal">
+          <Button
+            iconBefore={Download}
+            variant="outline-primary"
+            onClick={() => getTaxonomyExportFile(taxonomy.id, 'csv')}
+            data-testid="export-csv-button"
+          >
+            {intl.formatMessage(messages.importWizardStepExportCSVButton)}
+          </Button>
+          <Button
+            iconBefore={Download}
+            variant="outline-primary"
+            onClick={() => getTaxonomyExportFile(taxonomy.id, 'json')}
+            data-testid="export-json-button"
+          >
+            {intl.formatMessage(messages.importWizardStepExportJSONButton)}
+          </Button>
+        </Stack>
+      </Stack>
+    </Stepper.Step>
+  );
+};
+
+ExportStep.propTypes = {
+  taxonomy: TaxonomyProp.isRequired,
+};
+
+const UploadStep = ({
+  file,
+  setFile,
+  importPlanError,
+  reimport,
+}) => {
+  const intl = useIntl();
+
+  const csvTemplateUrl = (
+    <a href={apiUrls.taxonomyTemplate('csv')} download>{intl.formatMessage(messages.csvTemplateTitle)}</a>
+  );
+
+  const jsonTemplateUrl = (
+    <a href={apiUrls.taxonomyTemplate('json')} download>{intl.formatMessage(messages.jsonTemplateTitle)}</a>
+  );
+
+  /** @type {(args: {fileData: FormData}) => void} */
+  const handleFileLoad = ({ fileData }) => {
+    setFile(fileData.get('file'));
+  };
+
+  const clearFile = (e) => {
+    e.stopPropagation();
+    setFile(null);
+  };
+
+  return (
+    <Stepper.Step eventKey="upload" title="upload" hasError={!!importPlanError}>
+      <Stack gap={3} data-testid="upload-step">
+        <p>{
+          reimport
+            ? intl.formatMessage(messages.importWizardStepReuploadBody, { br: linebreak })
+            : intl.formatMessage(
+              messages.importWizardStepUploadBody,
+              { csvTemplateUrl, jsonTemplateUrl, br: linebreak },
+            )
+        }
+        </p>
+        <div>
+          {!file ? (
+            <Dropzone
+              maxSize={100 * 1024 * 1024 /* 100MB */}
+              accept={{
+                'text/csv': ['.csv'],
+                'application/json': ['.json'],
+              }}
+              onProcessUpload={handleFileLoad}
+              data-testid="dropzone"
+              /*
+                  className is working on Dropzone: https://github.com/openedx/paragon/pull/2950
+                  className="h-200px"
+              */
+              style={{ height: '200px' }}
+            />
+          ) : (
+            <Stack
+              gap={3}
+              direction="horizontal"
+              className="h-200px border-top p-4 align-items-start flex-wrap"
+              data-testid="file-info"
+            >
+              <Icon src={InsertDriveFile} style={{ height: '48px', width: '48px' }} />
+              <Stack gap={0} className="align-self-start">
+                <div>{file.name}</div>
+                <div className="x-small text-gray-500">{getFileSizeToClosestByte(file.size)}</div>
+              </Stack>
+              <IconButton
+                src={DeleteOutline}
+                iconAs={Icon}
+                alt={intl.formatMessage(messages.importWizardStepUploadClearFile)}
+                variant="secondary"
+                className="ml-auto"
+                onClick={clearFile}
+                data-testid="clear-file-button"
+              />
+            </Stack>
+          )}
+        </div>
+
+        {importPlanError && <Container className="alert alert-danger">{importPlanError}</Container>}
+      </Stack>
+    </Stepper.Step>
+  );
+};
+
+UploadStep.propTypes = {
+  file: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    size: PropTypes.number.isRequired,
+  }),
+  setFile: PropTypes.func.isRequired,
+  importPlanError: PropTypes.string,
+  reimport: PropTypes.bool,
+};
+
+UploadStep.defaultProps = {
+  file: null,
+  importPlanError: null,
+  reimport: false,
+};
+
+const PopulateStep = ({
+  taxonomyPopulateData,
+  setTaxonomyPopulateData,
+}) => {
+  const intl = useIntl();
+
+  const handleNameChange = (e) => {
+    const updatedState = { ...taxonomyPopulateData };
+    updatedState.taxonomyName = e.target.value;
+    setTaxonomyPopulateData(updatedState);
+  };
+
+  const handleDescChange = (e) => {
+    const updatedState = { ...taxonomyPopulateData };
+    updatedState.taxonomyDesc = e.target.value;
+    setTaxonomyPopulateData(updatedState);
+  };
+
+  return (
+    <Stepper.Step eventKey="populate" title="populate">
+      <Stack gap={3} data-testid="populate-step">
+        <Form.Group>
+          <Form.Label>{ intl.formatMessage(messages.importWizardStepPopulateTaxonomyName) }</Form.Label>
+          <Form.Control value={taxonomyPopulateData.taxonomyName} onChange={handleNameChange} />
+        </Form.Group>
+        <Form.Group>
+          <Form.Label>{ intl.formatMessage(messages.importWizardStepPopulateTaxonomyDesc) }</Form.Label>
+          <Form.Control
+            as="textarea"
+            autoResize
+            value={taxonomyPopulateData.taxonomyDesc}
+            onChange={handleDescChange}
+          />
+        </Form.Group>
+      </Stack>
+    </Stepper.Step>
+  );
+};
+
+PopulateStep.propTypes = {
+  taxonomyPopulateData: PropTypes.shape({
+    taxonomyName: PropTypes.string.isRequired,
+    taxonomyDesc: PropTypes.string.isRequired,
+  }).isRequired,
+  setTaxonomyPopulateData: PropTypes.func.isRequired,
+};
+
+const PlanStep = ({ importPlan }) => {
+  const intl = useIntl();
+
+  return (
+    <Stepper.Step eventKey="plan" title="plan">
+      <Stack gap={3} data-testid="plan-step">
+        {intl.formatMessage(messages.importWizardStepPlanBody, { br: linebreak, changeCount: importPlan?.length })}
+        <ul className="h-200px" style={{ overflow: 'scroll' }}>
+          {importPlan?.length ? (
+            importPlan.map((line) => <li key={line} data-testid="plan-action">{line}</li>)
+          ) : (
+            <li>{intl.formatMessage(messages.importWizardStepPlanNoChanges)}</li>
+          )}
+        </ul>
+      </Stack>
+    </Stepper.Step>
+  );
+};
+
+PlanStep.propTypes = {
+  importPlan: PropTypes.arrayOf(PropTypes.string),
+};
+
+PlanStep.defaultProps = {
+  importPlan: null,
+};
+
+const ConfirmStep = ({ importPlan }) => {
+  const intl = useIntl();
+
+  return (
+    <Stepper.Step eventKey="confirm" title="confirm">
+      <Stack data-testid="confirm-step">
+        {intl.formatMessage(
+          messages.importWizardStepConfirmBody,
+          { br: linebreak, changeCount: importPlan?.length },
+        )}
+      </Stack>
+    </Stepper.Step>
+  );
+};
+
+ConfirmStep.propTypes = {
+  importPlan: PropTypes.arrayOf(PropTypes.string),
+};
+
+ConfirmStep.defaultProps = {
+  importPlan: null,
+};
+
+const DefaultModalHeader = ({ children }) => (
+  <ModalDialog.Header>
+    <ModalDialog.Title>{children}</ModalDialog.Title>
+  </ModalDialog.Header>
+);
+
+DefaultModalHeader.propTypes = {
+  children: PropTypes.string.isRequired,
+};
+
+const ImportTagsWizard = ({
+  taxonomy,
+  isOpen,
+  onClose,
+  reimport,
+}) => {
+  const intl = useIntl();
+  const { setToastMessage, setAlertProps } = useContext(TaxonomyContext);
+
+  const [currentStep, setCurrentStep] = useState(reimport ? 'export' : 'upload');
+
+  const [file, setFile] = useState(/** @type {null|File} */ (null));
+
+  const [isDialogDisabled, disableDialog, enableDialog] = useToggle(false);
+
+  const [taxonomyPopulateData, setTaxonomyPopulateData] = useState({
+    taxonomyName: '',
+    taxonomyDesc: '',
+  });
+
+  const importNewTaxonomyMutation = useImportNewTaxonomy();
+
+  const importNewTaxonomy = async () => {
+    disableDialog();
+    try {
+      const { taxonomyName, taxonomyDesc } = taxonomyPopulateData;
+      if (file) {
+        await importNewTaxonomyMutation.mutateAsync({
+          name: taxonomyName,
+          description: taxonomyDesc,
+          file,
+        });
+      }
+      if (setToastMessage) {
+        setToastMessage(intl.formatMessage(messages.importNewTaxonomyToast, { name: taxonomyName }));
+      }
+    } catch (/** @type {any} */ error) {
+      const alertProps = {
+        variant: 'danger',
+        icon: ErrorIcon,
+        title: intl.formatMessage(messages.importTaxonomyErrorAlert),
+        description: error.message,
+      };
+
+      if (setAlertProps) {
+        setAlertProps(alertProps);
+      }
+    } finally {
+      enableDialog();
+      onClose();
+    }
+  };
+
+  const importPlanResult = useImportPlan(taxonomy?.id, file);
+
+  const importPlan = useMemo(() => {
+    if (!importPlanResult.data) {
+      return null;
+    }
+    let planArrayTemp = importPlanResult.data.split('\n');
+    planArrayTemp = planArrayTemp.slice(2); // Removes the first two lines
+    planArrayTemp = planArrayTemp.slice(0, -1); // Removes the last line
+    const planArray = planArrayTemp
+      .filter((line) => !(line.includes('No changes'))) // Removes the "No changes" lines
+      .map((line) => line.split(':')[1].trim()); // Get only the action message
+    return /** @type {string[]} */(planArray);
+  }, [importPlanResult.data]);
+
+  const importTagsMutation = useImportTags();
+
+  const generatePlan = React.useCallback(() => {
+    setCurrentStep('plan');
+  }, []);
+
+  const populateData = React.useCallback(() => {
+    setCurrentStep('populate');
+  }, []);
+
+  const confirmImportTags = async () => {
+    disableDialog();
+    try {
+      if (file) {
+        await importTagsMutation.mutateAsync({
+          taxonomyId: taxonomy.id,
+          file,
+        });
+      }
+      if (setToastMessage) {
+        setToastMessage(intl.formatMessage(messages.importTaxonomyToast, { name: taxonomy?.name }));
+      }
+    } catch (/** @type {any} */ error) {
+      const alertProps = {
+        variant: 'danger',
+        icon: ErrorIcon,
+        title: intl.formatMessage(messages.importTaxonomyErrorAlert),
+        description: error.message,
+      };
+
+      if (setAlertProps) {
+        setAlertProps(alertProps);
+      }
+    } finally {
+      enableDialog();
+      onClose();
+    }
+  };
+
+  const stepHeaders = {
+    export: (
+      <DefaultModalHeader>
+        {intl.formatMessage(messages.importWizardStepExportTitle, { name: taxonomy?.name })}
+      </DefaultModalHeader>
+    ),
+    upload: (
+      <DefaultModalHeader>
+        {intl.formatMessage(messages.importWizardStepUploadTitle)}
+      </DefaultModalHeader>
+    ),
+    populate: (
+      <DefaultModalHeader>
+        {intl.formatMessage(messages.importWizardStepPopulateTitle)}
+      </DefaultModalHeader>
+    ),
+    plan: (
+      <DefaultModalHeader>
+        {intl.formatMessage(messages.importWizardStepPlanTitle)}
+      </DefaultModalHeader>
+    ),
+    confirm: (
+      <ModalDialog.Header className="bg-warning-100">
+        <Stack gap={2} direction="horizontal">
+          <Icon src={Warning} className="text-warning" />
+          <ModalDialog.Title>
+            {intl.formatMessage(messages.importWizardStepConfirmTitle, { changeCount: importPlan?.length })}
+          </ModalDialog.Title>
+        </Stack>
+      </ModalDialog.Header>
+    ),
+  };
+
+  return (
+    <Container
+      onClick={(e) => e.stopPropagation() /* This prevents calling onClick handler from the parent */}
+    >
+      <ModalDialog
+        title=""
+        isOpen={isOpen}
+        isBlocking
+        onClose={onClose}
+        size="lg"
+      >
+        {(isDialogDisabled) && (
+          // This div is used to prevent the user from interacting with the dialog while the import is happening
+          <div className="position-absolute w-100 h-100 d-block zindex-9" />
+        )}
+
+        {stepHeaders[currentStep]}
+
+        <hr className="mx-4" />
+
+        <Stepper activeKey={currentStep}>
+          <ModalDialog.Body>
+            {reimport && <ExportStep taxonomy={taxonomy} />}
+            <UploadStep
+              file={file}
+              setFile={setFile}
+              importPlanError={/** @type {Error|undefined} */(importPlanResult.error)?.message}
+              reimport={reimport}
+            />
+            <PopulateStep
+              taxonomyPopulateData={taxonomyPopulateData}
+              setTaxonomyPopulateData={setTaxonomyPopulateData}
+            />
+            <PlanStep importPlan={importPlan} />
+            <ConfirmStep importPlan={importPlan} />
+          </ModalDialog.Body>
+
+          <hr className="mx-4" />
+
+          <ModalDialog.Footer>
+
+            <Stepper.ActionRow eventKey="export">
+              <Button variant="tertiary" onClick={onClose} data-testid="cancel-button">
+                {intl.formatMessage(messages.importWizardButtonCancel)}
+              </Button>
+              <Button onClick={() => setCurrentStep('upload')} data-testid="next-button">
+                {intl.formatMessage(messages.importWizardButtonNext)}
+              </Button>
+            </Stepper.ActionRow>
+
+            <Stepper.ActionRow eventKey="upload">
+              {
+                reimport
+                && (
+                  <Button variant="outline-primary" onClick={() => setCurrentStep('export')} data-testid="back-button">
+                    {intl.formatMessage(messages.importWizardButtonPrevious)}
+                  </Button>
+                )
+              }
+              <Stepper.ActionRow.Spacer />
+              <Button variant="tertiary" onClick={onClose}>
+                {intl.formatMessage(messages.importWizardButtonCancel)}
+              </Button>
+              {
+                importPlanResult.isLoading ? <LoadingSpinner />
+                  : (
+                    <LoadingButton
+                      label={
+                        reimport
+                          ? intl.formatMessage(messages.importWizardButtonImport)
+                          : intl.formatMessage(messages.importWizardButtonContinue)
+                      }
+                      disabled={!file || importPlanResult.isLoading || !!importPlanResult.error}
+                      onClick={reimport ? generatePlan : populateData}
+                    />
+                  )
+              }
+            </Stepper.ActionRow>
+
+            <Stepper.ActionRow eventKey="populate">
+              <Button variant="outline-primary" onClick={() => setCurrentStep('upload')} data-testid="back-button">
+                {intl.formatMessage(messages.importWizardButtonPrevious)}
+              </Button>
+              <Stepper.ActionRow.Spacer />
+              <Button variant="tertiary" onClick={onClose}>
+                {intl.formatMessage(messages.importWizardButtonCancel)}
+              </Button>
+              <LoadingButton
+                label={intl.formatMessage(messages.importWizardButtonImport)}
+                disabled={!taxonomyPopulateData.taxonomyName || !taxonomyPopulateData.taxonomyDesc}
+                onClick={importNewTaxonomy}
+                data-testid="import-button"
+              />
+
+            </Stepper.ActionRow>
+
+            <Stepper.ActionRow eventKey="plan">
+              <Button variant="outline-primary" onClick={() => setCurrentStep('upload')} data-testid="back-button">
+                {intl.formatMessage(messages.importWizardButtonPrevious)}
+              </Button>
+              <Stepper.ActionRow.Spacer />
+              <Button variant="tertiary" onClick={onClose}>
+                {intl.formatMessage(messages.importWizardButtonCancel)}
+              </Button>
+              <Button disabled={!importPlan?.length} onClick={() => setCurrentStep('confirm')} data-testid="continue-button">
+                {intl.formatMessage(messages.importWizardButtonContinue)}
+              </Button>
+            </Stepper.ActionRow>
+
+            <Stepper.ActionRow eventKey="confirm">
+              {
+                reimport
+                && (
+                  <Button variant="outline-primary" onClick={() => setCurrentStep('plan')} data-testid="back-button">
+                    {intl.formatMessage(messages.importWizardButtonPrevious)}
+                  </Button>
+                )
+              }
+              <Stepper.ActionRow.Spacer />
+              <Button variant="tertiary" onClick={onClose}>
+                {intl.formatMessage(messages.importWizardButtonCancel)}
+              </Button>
+              <LoadingButton
+                label={intl.formatMessage(messages.importWizardButtonConfirm)}
+                onClick={confirmImportTags}
+              />
+            </Stepper.ActionRow>
+
+          </ModalDialog.Footer>
+        </Stepper>
+      </ModalDialog>
+    </Container>
+  );
+};
+
+ImportTagsWizard.defaultProps = {
+  taxonomy: null,
+  reimport: false,
+};
+
+ImportTagsWizard.propTypes = {
+  taxonomy: TaxonomyProp,
+  isOpen: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  reimport: PropTypes.bool,
+};
+
+export { ImportTagsWizard };
diff --git a/src/taxonomy/import-tags/ImportTagsWizard.test.jsx b/src/taxonomy/import-tags/ImportTagsWizard.test.jsx
new file mode 100644
index 0000000000..b77dc045b5
--- /dev/null
+++ b/src/taxonomy/import-tags/ImportTagsWizard.test.jsx
@@ -0,0 +1,357 @@
+import MockAdapter from 'axios-mock-adapter';
+import React from 'react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { initializeMockApp } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { AppProvider } from '@edx/frontend-platform/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import {
+  act,
+  fireEvent,
+  render,
+  waitFor,
+  screen,
+} from '@testing-library/react';
+import PropTypes from 'prop-types';
+
+import initializeStore from '../../store';
+import { getTaxonomyExportFile } from '../data/api';
+import { TaxonomyContext } from '../common/context';
+import { ImportTagsWizard } from './ImportTagsWizard';
+
+let store;
+
+const queryClient = new QueryClient();
+let axiosMock;
+
+jest.mock('../data/api', () => ({
+  ...jest.requireActual('../data/api'),
+  getTaxonomyExportFile: jest.fn(),
+}));
+
+const mockSetToastMessage = jest.fn();
+const mockSetAlertProps = jest.fn();
+const context = {
+  toastMessage: null,
+  setToastMessage: mockSetToastMessage,
+  alertProps: null,
+  setAlertProps: mockSetAlertProps,
+};
+
+const planImportUrl = 'http://localhost:18010/api/content_tagging/v1/taxonomies/1/tags/import/plan/';
+const doImportUrl = 'http://localhost:18010/api/content_tagging/v1/taxonomies/1/tags/import/';
+const doImportNewTaxonomyUrl = 'http://localhost:18010/api/content_tagging/v1/taxonomies/import/';
+
+const sampleTaxonomy = {
+  id: 1,
+  name: 'Test Taxonomy',
+};
+
+const RootWrapper = ({ onClose, reimport, taxonomy }) => (
+  <AppProvider store={store}>
+    <IntlProvider locale="en" messages={{}}>
+      <QueryClientProvider client={queryClient}>
+        <TaxonomyContext.Provider value={context}>
+          <ImportTagsWizard taxonomy={taxonomy} isOpen onClose={onClose} reimport={reimport} />
+        </TaxonomyContext.Provider>
+      </QueryClientProvider>
+    </IntlProvider>
+  </AppProvider>
+);
+
+RootWrapper.propTypes = {
+  onClose: PropTypes.func.isRequired,
+  reimport: PropTypes.bool.isRequired,
+  taxonomy: PropTypes.shape({
+    id: PropTypes.number.isRequired,
+    name: PropTypes.string.isRequired,
+  }).isRequired,
+};
+
+describe('<ImportTagsWizard />', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+    store = initializeStore();
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+    queryClient.clear();
+  });
+
+  it('render the dialog in the reimport first step can close on cancel', async () => {
+    const onClose = jest.fn();
+    const { findByTestId, getByTestId } = render(<RootWrapper taxonomy={sampleTaxonomy} onClose={onClose} reimport />);
+
+    expect(await findByTestId('export-step')).toBeInTheDocument();
+
+    fireEvent.click(getByTestId('cancel-button'));
+
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it('can export taxonomies from the reimport dialog', async () => {
+    const onClose = jest.fn();
+    const { findByTestId, getByTestId } = render(<RootWrapper taxonomy={sampleTaxonomy} onClose={onClose} reimport />);
+
+    expect(await findByTestId('export-step')).toBeInTheDocument();
+
+    fireEvent.click(getByTestId('export-json-button'));
+
+    expect(getTaxonomyExportFile).toHaveBeenCalledWith(sampleTaxonomy.id, 'json');
+
+    fireEvent.click(getByTestId('export-csv-button'));
+
+    expect(getTaxonomyExportFile).toHaveBeenCalledWith(sampleTaxonomy.id, 'csv');
+  });
+
+  it.each(['success', 'error'])('can upload taxonomies from the reimport dialog (%p)', async (expectedResult) => {
+    const onClose = jest.fn();
+    const {
+      findByTestId, findByText, getByRole, getAllByTestId, getByTestId, getByText,
+    } = render(<RootWrapper taxonomy={sampleTaxonomy} onClose={onClose} reimport />);
+
+    expect(await findByTestId('export-step')).toBeInTheDocument();
+
+    fireEvent.click(getByTestId('next-button'));
+
+    expect(getByTestId('upload-step')).toBeInTheDocument();
+
+    // Test back button
+    fireEvent.click(getByTestId('back-button'));
+    expect(getByTestId('export-step')).toBeInTheDocument();
+    fireEvent.click(getByTestId('next-button'));
+    expect(getByTestId('upload-step')).toBeInTheDocument();
+
+    // Continue flow
+    let importButton = getByRole('button', { name: 'Import' });
+    expect(importButton).toHaveAttribute('aria-disabled', 'true');
+
+    // Invalid file type
+    const fileTarGz = new File(['file contents'], 'example.tar.gz', { type: 'application/gzip' });
+    fireEvent.drop(getByTestId('dropzone'), { dataTransfer: { files: [fileTarGz], types: ['Files'] } });
+    expect(getByTestId('dropzone')).toBeInTheDocument();
+    expect(importButton).toHaveAttribute('aria-disabled', 'true');
+
+    const makeJson = (filename) => new File(['{}'], filename, { type: 'application/json' });
+
+    // Correct file type
+    axiosMock.onPut(planImportUrl).replyOnce(200, { plan: 'Import plan' });
+    fireEvent.drop(getByTestId('dropzone'), { dataTransfer: { files: [makeJson('example1.json')], types: ['Files'] } });
+    expect(await findByTestId('file-info')).toBeInTheDocument();
+    expect(getByText('example1.json')).toBeInTheDocument();
+
+    // Clear file
+    fireEvent.click(getByTestId('clear-file-button'));
+    expect(await findByTestId('dropzone')).toBeInTheDocument();
+
+    // Reselect file
+    // Simulate error (note: React-Query may start to retrieve the import plan as soon as the file is selected)
+    axiosMock.onPut(planImportUrl).replyOnce(400, { error: 'Test error - details here' });
+    fireEvent.drop(getByTestId('dropzone'), { dataTransfer: { files: [makeJson('example2.json')], types: ['Files'] } });
+    expect(await findByTestId('file-info')).toBeInTheDocument();
+
+    // Check error message
+    await waitFor(async () => {
+      // Note: import button gets re-created after showing a spinner while the import plan is loaded.
+      importButton = getByRole('button', { name: 'Import' });
+      expect(await findByText('Test error - details here')).toBeInTheDocument();
+      // Because of the import error, we cannot proceed to the next step
+      expect(importButton).toHaveAttribute('aria-disabled', 'true');
+    });
+    const errorAlert = getByText('Test error - details here');
+
+    // Reselect file to clear the error
+    fireEvent.click(getByTestId('clear-file-button'));
+    expect(errorAlert).not.toBeInTheDocument();
+
+    // Now simulate uploading a correct file.
+    const expectedPlan = 'Import plan for Test import taxonomy\n'
+    + '--------------------------------\n'
+    + '#1: Create a new tag with values (external_id=tag_1, value=Tag 1, parent_id=None).\n'
+    + '#2: Create a new tag with values (external_id=tag_2, value=Tag 2, parent_id=None).\n'
+    + '#3: Create a new tag with values (external_id=tag_3, value=Tag 3, parent_id=None).\n'
+    + '#4: Create a new tag with values (external_id=tag_4, value=Tag 4, parent_id=None).\n'
+    + '#5: Delete tag (external_id=old_tag_1)\n'
+    + '#6: Delete tag (external_id=old_tag_2)\n';
+    axiosMock.onPut(planImportUrl).replyOnce(200, { plan: expectedPlan });
+    fireEvent.drop(getByTestId('dropzone'), { dataTransfer: { files: [makeJson('example3.json')], types: ['Files'] } });
+
+    expect(await findByTestId('file-info')).toBeInTheDocument();
+    await waitFor(() => {
+      // Note: import button gets re-created after showing a spinner while the import plan is loaded.
+      importButton = getByRole('button', { name: 'Import' });
+      expect(importButton).not.toHaveAttribute('aria-disabled', 'true');
+    });
+
+    fireEvent.click(importButton);
+
+    expect(await findByTestId('plan-step')).toBeInTheDocument();
+
+    // Test back button
+    fireEvent.click(getByTestId('back-button'));
+    expect(getByTestId('upload-step')).toBeInTheDocument();
+    fireEvent.click(getByRole('button', { name: 'Import' }));
+    expect(await findByTestId('plan-step')).toBeInTheDocument();
+
+    expect(getAllByTestId('plan-action')).toHaveLength(6);
+
+    fireEvent.click(getByTestId('continue-button'));
+
+    expect(getByTestId('confirm-step')).toBeInTheDocument();
+
+    // Test back button
+    fireEvent.click(getByTestId('back-button'));
+    expect(getByTestId('plan-step')).toBeInTheDocument();
+    fireEvent.click(getByTestId('continue-button'));
+    expect(getByTestId('confirm-step')).toBeInTheDocument();
+
+    if (expectedResult === 'success') {
+      axiosMock.onPut(doImportUrl).replyOnce(200, {});
+    } else {
+      axiosMock.onPut(doImportUrl).replyOnce(400, { error: 'Test error' });
+    }
+
+    const confirmButton = getByRole('button', { name: 'Yes, import file' });
+    await waitFor(() => {
+      expect(confirmButton).not.toHaveAttribute('aria-disabled', 'true');
+    });
+
+    act(() => { fireEvent.click(confirmButton); });
+
+    if (expectedResult === 'success') {
+      // Toast message shown
+      await waitFor(() => {
+        expect(mockSetToastMessage).toBeCalledWith(`"${sampleTaxonomy.name}" updated`);
+      });
+    } else {
+      // Alert message shown
+      await waitFor(() => {
+        expect(mockSetAlertProps).toBeCalledWith(
+          expect.objectContaining({
+            variant: 'danger',
+            title: 'Import error',
+            description: 'Test error',
+          }),
+        );
+      });
+    }
+  });
+
+  it.each(['success', 'error'])('can upload new taxonomies from the dialog (%p)', async (expectedResult) => {
+    const onClose = jest.fn();
+    const {
+      findByTestId, getByRole, getByTestId, getByText, queryByTestId,
+    } = render(<RootWrapper taxonomy={null} onClose={onClose} />);
+
+    // Check that there is no export step
+    expect(await queryByTestId('export-step')).not.toBeInTheDocument();
+    // Check that there is no back button in the upload step
+    expect(await queryByTestId('back-button')).not.toBeInTheDocument();
+
+    // Check that we are on the upload step
+    expect(getByTestId('upload-step')).toBeInTheDocument();
+
+    // Continue flow
+    await waitFor(() => expect(screen.getByRole('button', { name: 'Continue' })).toBeInTheDocument());
+    let continueButton = getByRole('button', { name: 'Continue' });
+    expect(continueButton).toHaveAttribute('aria-disabled', 'true');
+
+    // Invalid file type
+    const fileTarGz = new File(['file contents'], 'example.tar.gz', { type: 'application/gzip' });
+    fireEvent.drop(getByTestId('dropzone'), { dataTransfer: { files: [fileTarGz], types: ['Files'] } });
+    expect(getByTestId('dropzone')).toBeInTheDocument();
+    expect(continueButton).toHaveAttribute('aria-disabled', 'true');
+
+    const makeJson = (filename) => new File(['{}'], filename, { type: 'application/json' });
+
+    // Correct file type
+    fireEvent.drop(getByTestId('dropzone'), { dataTransfer: { files: [makeJson('example1.json')], types: ['Files'] } });
+    expect(await findByTestId('file-info')).toBeInTheDocument();
+    expect(getByText('example1.json')).toBeInTheDocument();
+
+    // Clear file
+    fireEvent.click(getByTestId('clear-file-button'));
+    expect(await findByTestId('dropzone')).toBeInTheDocument();
+
+    // Reselect file
+    fireEvent.drop(getByTestId('dropzone'), { dataTransfer: { files: [makeJson('example1.json')], types: ['Files'] } });
+    expect(await findByTestId('file-info')).toBeInTheDocument();
+    expect(getByText('example1.json')).toBeInTheDocument();
+
+    // Click continue once button enabled
+    await waitFor(() => expect(screen.getByRole('button', { name: 'Continue' })).toBeInTheDocument());
+    continueButton = getByRole('button', { name: 'Continue' });
+    await waitFor(() => {
+      expect(continueButton).not.toHaveAttribute('aria-disabled', 'true');
+    });
+    fireEvent.click(continueButton);
+
+    expect(await findByTestId('populate-step')).toBeInTheDocument();
+
+    // Test back button
+    fireEvent.click(getByTestId('back-button'));
+    expect(getByTestId('upload-step')).toBeInTheDocument();
+    fireEvent.click(getByRole('button', { name: 'Continue' }));
+    expect(await findByTestId('populate-step')).toBeInTheDocument();
+
+    // Check import button is disabled when fields not populated
+    const importButton = getByRole('button', { name: 'Import' });
+    expect(importButton).toHaveAttribute('aria-disabled', 'true');
+
+    // Populate new taxonomy information
+    const newTaxonomyName = 'New Taxonomy';
+    const taxonomyNameInputEl = screen.getByLabelText('Taxonomy Name');
+    fireEvent.change(taxonomyNameInputEl, {
+      target: { value: newTaxonomyName },
+    });
+    const taxonomyDescInputEl = screen.getByLabelText('Taxonomy Description');
+    fireEvent.change(taxonomyDescInputEl, {
+      target: { value: 'New Taxonomy Description' },
+    });
+
+    // Test back button
+    fireEvent.click(getByTestId('back-button'));
+    expect(getByTestId('upload-step')).toBeInTheDocument();
+    fireEvent.click(getByRole('button', { name: 'Continue' }));
+
+    expect(getByTestId('populate-step')).toBeInTheDocument();
+
+    if (expectedResult === 'success') {
+      axiosMock.onPost(doImportNewTaxonomyUrl).replyOnce(200, {});
+    } else {
+      axiosMock.onPost(doImportNewTaxonomyUrl).replyOnce(400);
+    }
+
+    await waitFor(() => {
+      expect(getByRole('button', { name: 'Import' })).not.toHaveAttribute('aria-disabled', 'true');
+    });
+
+    act(() => { fireEvent.click(getByRole('button', { name: 'Import' })); });
+
+    if (expectedResult === 'success') {
+      // Toast message shown
+      await waitFor(() => {
+        expect(mockSetToastMessage).toBeCalledWith(`"${newTaxonomyName}" imported`);
+      });
+    } else {
+      // Alert message shown
+      await waitFor(() => {
+        expect(mockSetAlertProps).toBeCalledWith(
+          expect.objectContaining({
+            variant: 'danger',
+            title: 'Import error',
+          }),
+        );
+      });
+    }
+  });
+});
diff --git a/src/taxonomy/import-tags/__mocks__/index.js b/src/taxonomy/import-tags/__mocks__/index.js
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/taxonomy/import-tags/__mocks__/tagImportMock.js b/src/taxonomy/import-tags/__mocks__/tagImportMock.js
new file mode 100644
index 0000000000..9db45b4a5e
--- /dev/null
+++ b/src/taxonomy/import-tags/__mocks__/tagImportMock.js
@@ -0,0 +1,4 @@
+export default {
+  name: 'Taxonomy name',
+  description: 'Taxonomy description',
+};
diff --git a/src/taxonomy/import-tags/index.ts b/src/taxonomy/import-tags/index.ts
new file mode 100644
index 0000000000..72f293f4b0
--- /dev/null
+++ b/src/taxonomy/import-tags/index.ts
@@ -0,0 +1 @@
+export { ImportTagsWizard } from './ImportTagsWizard';
diff --git a/src/taxonomy/import-tags/messages.ts b/src/taxonomy/import-tags/messages.ts
new file mode 100644
index 0000000000..1561c8a694
--- /dev/null
+++ b/src/taxonomy/import-tags/messages.ts
@@ -0,0 +1,159 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  importWizardButtonCancel: {
+    id: 'course-authoring.import-tags.wizard.button.cancel',
+    defaultMessage: 'Cancel',
+  },
+  importWizardButtonNext: {
+    id: 'course-authoring.import-tags.wizard.button.next',
+    defaultMessage: 'Next',
+  },
+  importWizardButtonPrevious: {
+    id: 'course-authoring.import-tags.wizard.button.previous',
+    defaultMessage: 'Previous',
+  },
+  importWizardButtonImport: {
+    id: 'course-authoring.import-tags.wizard.button.import',
+    defaultMessage: 'Import',
+  },
+  importWizardButtonContinue: {
+    id: 'course-authoring.import-tags.wizard.button.continue',
+    defaultMessage: 'Continue',
+  },
+  importWizardButtonConfirm: {
+    id: 'course-authoring.import-tags.wizard.button.confirm',
+    defaultMessage: 'Yes, import file',
+  },
+  importWizardStepExportTitle: {
+    id: 'course-authoring.import-tags.wizard.step-export.title',
+    defaultMessage: 'Update "{name}"',
+  },
+  importWizardStepExportBody: {
+    id: 'course-authoring.import-tags.wizard.step-export.body',
+    defaultMessage: 'To update this taxonomy you need to import a new CSV or JSON file. The current taxonomy will '
+      + 'be completely replaced by the contents of the imported file (e.g. if a tag in the current taxonomy is not '
+      + 'present in the imported file, it will be removed - both from the taxonomy and from any tagged course '
+      + 'content).'
+      + '{br}You may wish to export the taxonomy in its current state before importing the new file.',
+  },
+  importWizardStepExportCSVButton: {
+    id: 'course-authoring.import-tags.wizard.step-export.button-csv',
+    defaultMessage: 'CSV file',
+  },
+  importWizardStepExportJSONButton: {
+    id: 'course-authoring.import-tags.wizard.step-export.button-json',
+    defaultMessage: 'JSON file',
+  },
+  importWizardStepUploadTitle: {
+    id: 'course-authoring.import-tags.wizard.step-upload.title',
+    defaultMessage: 'Upload file',
+  },
+  importWizardStepUploadClearFile: {
+    id: 'course-authoring.import-tags.wizard.step-upload.clear-file',
+    defaultMessage: 'Clear file',
+  },
+  importWizardStepUploadBody: {
+    id: 'course-authoring.import-tags.wizard.step-upload.body',
+    defaultMessage: 'You can upload a CSV or JSON file to create a new taxonomy. You may use any spreadsheet tool '
+    + '(for CSV files), or any text editor (for JSON files) to create the file that you wish to import. '
+    + 'For an example of the required format, download the {csvTemplateUrl} or {jsonTemplateUrl}.'
+    + '{br}Once the file is ready to be imported, drag and drop it into the box below, or click to upload.',
+  },
+  importWizardStepReuploadBody: {
+    id: 'course-authoring.import-tags.wizard.step-reupload.body',
+    defaultMessage: 'You may use any spreadsheet tool (for CSV files), or any text editor (for JSON files) to create '
+    + 'the file that you wish to import.'
+    + '{br}Once the file is ready to be imported, drag and drop it into the box below, or click to upload.',
+  },
+  csvTemplateTitle: {
+    id: 'course-authoring.import-tags.wizard.step-upload.csv-template',
+    defaultMessage: 'CSV template',
+  },
+  jsonTemplateTitle: {
+    id: 'course-authoring.import-tags.wizard.step-upload.json-template',
+    defaultMessage: 'JSON template',
+  },
+  importWizardStepPopulateTitle: {
+    id: 'course-authoring.import-tags.wizard.step-populate.title',
+    defaultMessage: 'Populate Taxonomy Information',
+  },
+  importWizardStepPopulateTaxonomyName: {
+    id: 'course-authoring.import-tags.wizard.step-populate.name',
+    defaultMessage: 'Taxonomy Name',
+  },
+  importWizardStepPopulateTaxonomyDesc: {
+    id: 'course-authoring.import-tags.wizard.step-populate.desc',
+    defaultMessage: 'Taxonomy Description',
+  },
+  importWizardStepPlanTitle: {
+    id: 'course-authoring.import-tags.wizard.step-plan.title',
+    defaultMessage: 'Differences between files',
+  },
+  importWizardStepPlanBody: {
+    id: 'course-authoring.import-tags.wizard.step-plan.body',
+    defaultMessage: 'Importing this file will make {changeCount} updates to the existing taxonomy. '
+    + 'The content of the imported file will replace any existing values that do not match the new values.'
+    + '{br}Importing this file will cause the following updates:',
+  },
+  importWizardStepPlanNoChanges: {
+    id: 'course-authoring.import-tags.wizard.step-plan.no-changes',
+    defaultMessage: 'No changes',
+  },
+  importWizardStepConfirmTitle: {
+    id: 'course-authoring.import-tags.wizard.step-confirm.title',
+    defaultMessage: 'Import and replace tags',
+  },
+  importWizardStepConfirmBody: {
+    id: 'course-authoring.import-tags.wizard.step-confirm.body',
+    defaultMessage: 'Warning! You are about to make {changeCount} changes to the existing taxonomy. Any tags applied '
+    + 'to course content will be updated or removed. This cannot be undone.'
+    + '{br}Are you sure you want to continue importing this file?',
+  },
+  promptTaxonomyName: {
+    id: 'course-authoring.import-tags.prompt.taxonomy-name',
+    defaultMessage: 'Enter a name for the new taxonomy',
+  },
+  promptTaxonomyNameRequired: {
+    id: 'course-authoring.import-tags.prompt.taxonomy-name.required',
+    defaultMessage: 'You must enter a name for the new taxonomy',
+  },
+  promptTaxonomyExportId: {
+    id: 'course-authoring.import-tags.prompt.taxonomy-export-id',
+    defaultMessage: "Enter a Export ID for the new taxonomy. Should only contain alphanumeric characters or '_' '-' '.'",
+  },
+  promptTaxonomyExportIdRequired: {
+    id: 'course-authoring.import-tags.prompt.taxonomy-export-id.required',
+    defaultMessage: 'You must enter an Export ID for the new taxonomy.',
+  },
+  promptTaxonomyExportIdInvalid: {
+    id: 'course-authoring.import-tags.prompt.taxonomy-export-id.invalid',
+    defaultMessage: "Invalid Export ID. Should only contain alphanumeric characters or '_' '-' '.'",
+  },
+  promptTaxonomyDescription: {
+    id: 'course-authoring.import-tags.prompt.taxonomy-description',
+    defaultMessage: 'Enter a description for the new taxonomy',
+  },
+  importTaxonomySuccess: {
+    id: 'course-authoring.import-tags.success',
+    defaultMessage: 'Taxonomy imported successfully',
+  },
+  importTaxonomyError: {
+    id: 'course-authoring.import-tags.error',
+    defaultMessage: 'Import failed - see details in the browser console',
+  },
+  importNewTaxonomyToast: {
+    id: 'course-authoring.import-tags.new.toast.success',
+    defaultMessage: '"{name}" imported',
+  },
+  importTaxonomyToast: {
+    id: 'course-authoring.import-tags.toast.success',
+    defaultMessage: '"{name}" updated',
+  },
+  importTaxonomyErrorAlert: {
+    id: 'course-authoring.import-tags.error-alert.title',
+    defaultMessage: 'Import error',
+  },
+});
+
+export default messages;
diff --git a/src/taxonomy/index.scss b/src/taxonomy/index.scss
new file mode 100644
index 0000000000..873c0f5495
--- /dev/null
+++ b/src/taxonomy/index.scss
@@ -0,0 +1,6 @@
+@import "taxonomy/TaxonomyListPage";
+@import "taxonomy/taxonomy-card/TaxonomyCard";
+@import "taxonomy/delete-dialog/DeleteDialog";
+@import "taxonomy/system-defined-badge/SystemDefinedBadge";
+@import "taxonomy/export-modal/ExportModal";
+@import "taxonomy/tag-list/TagListTable";
diff --git a/src/taxonomy/index.ts b/src/taxonomy/index.ts
new file mode 100644
index 0000000000..17c09351c8
--- /dev/null
+++ b/src/taxonomy/index.ts
@@ -0,0 +1,3 @@
+export { TaxonomyListPage } from './TaxonomyListPage';
+export { TaxonomyLayout } from './TaxonomyLayout';
+export { TaxonomyDetailPage } from './taxonomy-detail';
diff --git a/src/taxonomy/manage-orgs/ManageOrgsModal.jsx b/src/taxonomy/manage-orgs/ManageOrgsModal.jsx
new file mode 100644
index 0000000000..f8c95a61b9
--- /dev/null
+++ b/src/taxonomy/manage-orgs/ManageOrgsModal.jsx
@@ -0,0 +1,246 @@
+// @ts-check
+import React, { useContext, useEffect, useState } from 'react';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import {
+  useToggle,
+  ActionRow,
+  AlertModal,
+  Button,
+  Chip,
+  Container,
+  Form,
+  ModalDialog,
+  Stack,
+} from '@openedx/paragon';
+import {
+  Close,
+  Warning,
+} from '@openedx/paragon/icons';
+import PropTypes from 'prop-types';
+
+import { useOrganizationListData } from '../../generic/data/apiHooks';
+import { TaxonomyContext } from '../common/context';
+import { useTaxonomyDetails } from '../data/apiHooks';
+import { useManageOrgs } from './data/api';
+import messages from './messages';
+import './ManageOrgsModal.scss';
+
+const ConfirmModal = ({
+  isOpen,
+  onClose,
+  confirm,
+  taxonomyName,
+}) => {
+  const intl = useIntl();
+  return (
+    <AlertModal
+      title={intl.formatMessage(messages.confirmUnassignTitle)}
+      isOpen={isOpen}
+      onClose={onClose}
+      variant="warning"
+      icon={Warning}
+      footerNode={(
+        <ActionRow>
+          <Button variant="tertiary" onClick={onClose}>
+            {intl.formatMessage(messages.cancelButton)}
+          </Button>
+          <Button variant="primary" onClick={confirm}>
+            {intl.formatMessage(messages.continueButton)}
+          </Button>
+        </ActionRow>
+      )}
+    >
+      <p>
+        {intl.formatMessage(messages.confirmUnassignText, { taxonomyName })}
+      </p>
+    </AlertModal>
+  );
+};
+
+ConfirmModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  confirm: PropTypes.func.isRequired,
+  taxonomyName: PropTypes.string.isRequired,
+};
+
+const ManageOrgsModal = ({
+  taxonomyId,
+  isOpen,
+  onClose,
+}) => {
+  const intl = useIntl();
+  const { setToastMessage } = useContext(TaxonomyContext);
+
+  const [selectedOrgs, setSelectedOrgs] = useState(/** @type {null|string[]} */(null));
+  const [allOrgs, setAllOrgs] = useState(/** @type {null|boolean} */(null));
+
+  const [isConfirmModalOpen, openConfirmModal, closeConfirmModal] = useToggle(false);
+
+  const [isDialogDisabled, disableDialog, enableDialog] = useToggle(false);
+
+  const {
+    data: organizationListData,
+  } = useOrganizationListData();
+
+  const { data: taxonomy } = useTaxonomyDetails(taxonomyId);
+
+  const manageOrgMutation = useManageOrgs();
+
+  const saveOrgs = async () => {
+    disableDialog();
+    closeConfirmModal();
+    if (selectedOrgs !== null && allOrgs !== null) {
+      try {
+        await manageOrgMutation.mutateAsync({
+          taxonomyId,
+          orgs: allOrgs ? undefined : selectedOrgs,
+          allOrgs,
+        });
+        if (setToastMessage) {
+          setToastMessage(intl.formatMessage(messages.assignOrgsSuccess));
+        }
+      } catch (error) {
+        // ToDo: display the error to the user
+      } finally {
+        enableDialog();
+        onClose();
+      }
+    }
+  };
+
+  const confirmSave = async () => {
+    if (!selectedOrgs?.length && !allOrgs) {
+      openConfirmModal();
+    } else {
+      await saveOrgs();
+    }
+  };
+
+  useEffect(() => {
+    if (taxonomy) {
+      if (selectedOrgs === null) {
+        setSelectedOrgs([...taxonomy.orgs]);
+      }
+      if (allOrgs === null) {
+        setAllOrgs(taxonomy.allOrgs);
+      }
+    }
+  }, [taxonomy]);
+
+  useEffect(() => {
+    if (selectedOrgs) {
+      // This is a hack to force the Form.Autosuggest to clear its value after a selection is made.
+      const inputRef = /** @type {null|HTMLInputElement} */ (document.querySelector('.manage-orgs .pgn__form-group input'));
+      if (inputRef) {
+        //  @ts-ignore value can be null
+        inputRef.value = null;
+        const event = new Event('change', { bubbles: true });
+        inputRef.dispatchEvent(event);
+      }
+    }
+  }, [selectedOrgs]);
+
+  if (!selectedOrgs || !taxonomy) {
+    return null;
+  }
+
+  return (
+    <Container onClick={(e) => e.stopPropagation() /* This prevents calling onClick handler from the parent */}>
+      <ModalDialog
+        className="manage-orgs"
+        title={intl.formatMessage(messages.headerTitle)}
+        isOpen={isOpen}
+        onClose={onClose}
+        size="lg"
+        hasCloseButton
+        isFullscreenOnMobile
+      >
+        {isDialogDisabled && (
+          // This div is used to prevent the user from interacting with the dialog while it is disabled
+          <div className="position-absolute w-100 h-100 d-block zindex-9" />
+        )}
+
+        <ModalDialog.Header>
+          <ModalDialog.Title>
+            {intl.formatMessage(messages.headerTitle)}
+          </ModalDialog.Title>
+        </ModalDialog.Header>
+
+        <hr className="mx-4" />
+
+        <ModalDialog.Body>
+          <Form.Group>
+            <Stack>
+              <div className="pb-5">{intl.formatMessage(messages.bodyText)}</div>
+              <Form.Label>
+                <div>{intl.formatMessage(messages.currentAssignments)}</div>
+              </Form.Label>
+              <div className="col-9 d-inline-box overflow-auto">
+                {selectedOrgs.length ? selectedOrgs.map((org) => (
+                  <Chip
+                    key={org}
+                    iconAfter={Close}
+                    iconAfterAlt={intl.formatMessage(messages.removeOrg, { org })}
+                    onIconAfterClick={() => setSelectedOrgs(selOrgs => (selOrgs || []).filter((o) => o !== org))}
+                    disabled={!!allOrgs}
+                  >
+                    {org}
+                  </Chip>
+                )) : <span className="text-muted">{intl.formatMessage(messages.noOrganizationAssigned)}</span> }
+              </div>
+            </Stack>
+          </Form.Group>
+          <Form.Group>
+            <Form.Label>
+              {intl.formatMessage(messages.addOrganizations)}
+            </Form.Label>
+            <Form.Autosuggest
+              placeholder={intl.formatMessage(messages.searchOrganizations)}
+              onChange={({ selectionValue }) => {
+                if (selectionValue) {
+                  setSelectedOrgs([...selectedOrgs, selectionValue]);
+                }
+              }}
+              disabled={allOrgs}
+            >
+              {organizationListData ? organizationListData.filter(o => !selectedOrgs?.includes(o)).map((org) => (
+                <Form.AutosuggestOption key={org}>{org}</Form.AutosuggestOption>
+              )) : [] }
+            </Form.Autosuggest>
+          </Form.Group>
+          <Form.Checkbox checked={allOrgs} onChange={(e) => setAllOrgs(e.target.checked)}>
+            {intl.formatMessage(messages.assignAll)}
+          </Form.Checkbox>
+        </ModalDialog.Body>
+
+        <hr className="mx-4" />
+
+        <ModalDialog.Footer>
+          <ActionRow>
+            <ModalDialog.CloseButton onClick={onClose} variant="tertiary">
+              {intl.formatMessage(messages.cancelButton)}
+            </ModalDialog.CloseButton>
+            <Button variant="primary" onClick={confirmSave}>
+              {intl.formatMessage(messages.saveButton)}
+            </Button>
+          </ActionRow>
+        </ModalDialog.Footer>
+      </ModalDialog>
+      <ConfirmModal
+        isOpen={isConfirmModalOpen}
+        onClose={closeConfirmModal}
+        confirm={saveOrgs}
+        taxonomyName={taxonomy.name}
+      />
+    </Container>
+  );
+};
+
+ManageOrgsModal.propTypes = {
+  taxonomyId: PropTypes.number.isRequired,
+  isOpen: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+};
+
+export default ManageOrgsModal;
diff --git a/src/taxonomy/manage-orgs/ManageOrgsModal.scss b/src/taxonomy/manage-orgs/ManageOrgsModal.scss
new file mode 100644
index 0000000000..4ae418ece0
--- /dev/null
+++ b/src/taxonomy/manage-orgs/ManageOrgsModal.scss
@@ -0,0 +1,13 @@
+.manage-orgs {
+  /*
+    This style is needed to override the default overflow: scroll on the modal,
+    preventing the dropdown to overflow the modal.
+    This is being fixed here:
+    https://github.com/openedx/paragon/pull/2939
+  */
+  overflow: visible !important;
+
+  .pgn__modal-body {
+    overflow: visible;
+  }
+}
diff --git a/src/taxonomy/manage-orgs/ManageOrgsModal.test.jsx b/src/taxonomy/manage-orgs/ManageOrgsModal.test.jsx
new file mode 100644
index 0000000000..05f87e91ea
--- /dev/null
+++ b/src/taxonomy/manage-orgs/ManageOrgsModal.test.jsx
@@ -0,0 +1,217 @@
+import React from 'react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { initializeMockApp } from '@edx/frontend-platform';
+import { AppProvider } from '@edx/frontend-platform/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import {
+  fireEvent,
+  render,
+  waitFor,
+} from '@testing-library/react';
+import PropTypes from 'prop-types';
+
+import initializeStore from '../../store';
+import { TaxonomyContext } from '../common/context';
+import ManageOrgsModal from './ManageOrgsModal';
+
+let store;
+
+const taxonomy = {
+  id: 1,
+  name: 'Test Taxonomy',
+  allOrgs: false,
+  orgs: ['org1', 'org2'],
+};
+
+const orgs = ['org1', 'org2', 'org3', 'org4', 'org5'];
+
+jest.mock('../data/api', () => ({
+  ...jest.requireActual('../data/api'),
+  getTaxonomy: jest.fn().mockResolvedValue(taxonomy),
+}));
+
+jest.mock('../../generic/data/api', () => ({
+  ...jest.requireActual('../../generic/data/api'),
+  getOrganizations: jest.fn().mockResolvedValue(orgs),
+}));
+
+const mockUseManageOrgsMutate = jest.fn();
+
+jest.mock('./data/api', () => ({
+  ...jest.requireActual('./data/api'),
+  useManageOrgs: jest.fn(() => ({
+    ...jest.requireActual('./data/api').useManageOrgs(),
+    mutateAsync: mockUseManageOrgsMutate,
+  })),
+}));
+
+const mockSetToastMessage = jest.fn();
+const mockSetAlertProps = jest.fn();
+const context = {
+  toastMessage: null,
+  setToastMessage: mockSetToastMessage,
+  alertProps: null,
+  setAlertProps: mockSetAlertProps,
+};
+
+const queryClient = new QueryClient();
+
+const RootWrapper = ({ onClose }) => (
+  <AppProvider store={store}>
+    <IntlProvider locale="en" messages={{}}>
+      <QueryClientProvider client={queryClient}>
+        <TaxonomyContext.Provider value={context}>
+          <ManageOrgsModal taxonomyId={taxonomy.id} isOpen onClose={onClose} />
+        </TaxonomyContext.Provider>
+      </QueryClientProvider>
+    </IntlProvider>
+  </AppProvider>
+);
+
+RootWrapper.propTypes = {
+  onClose: PropTypes.func.isRequired,
+};
+
+describe('<ManageOrgsModal />', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+    store = initializeStore();
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+    queryClient.clear();
+  });
+
+  const checkDialogRender = async (getByText) => {
+    await waitFor(() => {
+      // Dialog title
+      expect(getByText('Assign to organizations')).toBeInTheDocument();
+      // Orgs assigned to the taxonomy
+      expect(getByText('org1')).toBeInTheDocument();
+      expect(getByText('org2')).toBeInTheDocument();
+    });
+  };
+
+  it('should render the dialog and close on cancel', async () => {
+    const onClose = jest.fn();
+    const { getByText, getByRole } = render(<RootWrapper onClose={onClose} />);
+
+    await checkDialogRender(getByText);
+
+    const cancelButton = getByRole('button', { name: 'Cancel' });
+    fireEvent.click(cancelButton);
+
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it('can assign orgs to taxonomies from the dialog', async () => {
+    const onClose = jest.fn();
+    const {
+      queryAllByTestId,
+      getByTestId,
+      getByText,
+      getByRole,
+      queryByRole,
+    } = render(<RootWrapper onClose={onClose} />);
+
+    // First, org1 and org2 are already added
+    await checkDialogRender(getByText);
+
+    // Remove org2
+    fireEvent.click(getByRole('button', { name: 'Remove org2' }));
+
+    expect(getByRole('button', { name: 'Remove org1' })).toBeInTheDocument();
+    expect(queryByRole('button', { name: 'Remove org2' })).not.toBeInTheDocument();
+
+    const input = getByTestId('autosuggest-iconbutton');
+    fireEvent.click(input);
+
+    // We get the following options in the dropdown list:
+    const list = queryAllByTestId('autosuggest-optionitem');
+    expect(list.length).toBe(4);
+    expect(getByRole('option', { name: 'org2' })).toBeInTheDocument();
+    expect(getByRole('option', { name: 'org3' })).toBeInTheDocument();
+    expect(getByRole('option', { name: 'org4' })).toBeInTheDocument();
+    expect(getByRole('option', { name: 'org5' })).toBeInTheDocument();
+
+    // Select org3
+    fireEvent.click(getByRole('option', { name: 'org3' }));
+    expect(getByRole('button', { name: 'Remove org1' })).toBeInTheDocument();
+    expect(getByRole('button', { name: 'Remove org3' })).toBeInTheDocument();
+
+    fireEvent.click(getByRole('button', { name: 'Save' }));
+
+    await waitFor(() => {
+      expect(mockUseManageOrgsMutate).toHaveBeenCalledWith({
+        taxonomyId: taxonomy.id,
+        orgs: ['org1', 'org3'],
+        allOrgs: false,
+      });
+    });
+
+    // Toast message shown
+    expect(mockSetToastMessage).toBeCalledWith('Assigned organizations updated');
+  });
+
+  it('can assign all orgs to taxonomies from the dialog', async () => {
+    const onClose = jest.fn();
+    const { getByRole, getByText } = render(<RootWrapper onClose={onClose} />);
+
+    await checkDialogRender(getByText);
+
+    const checkbox = getByRole('checkbox', { name: 'Assign to all organizations' });
+    fireEvent.click(checkbox);
+
+    fireEvent.click(getByRole('button', { name: 'Save' }));
+
+    await waitFor(() => {
+      expect(mockUseManageOrgsMutate).toHaveBeenCalledWith({
+        taxonomyId: taxonomy.id,
+        allOrgs: true,
+      });
+    });
+
+    // Toast message shown
+    expect(mockSetToastMessage).toBeCalledWith('Assigned organizations updated');
+  });
+
+  it('can assign no orgs to taxonomies from the dialog', async () => {
+    const onClose = jest.fn();
+    const { getByRole, getByText } = render(<RootWrapper onClose={onClose} />);
+
+    await checkDialogRender(getByText);
+
+    // Remove org1
+    fireEvent.click(getByText('org1').nextSibling);
+    // Remove org2
+    fireEvent.click(getByText('org2').nextSibling);
+
+    fireEvent.click(getByRole('button', { name: 'Save' }));
+
+    await waitFor(() => {
+      // Check confirm modal is open
+      expect(getByText('Unassign taxonomy')).toBeInTheDocument();
+    });
+
+    fireEvent.click(getByRole('button', { name: 'Continue' }));
+
+    await waitFor(() => {
+      expect(mockUseManageOrgsMutate).toHaveBeenCalledWith({
+        taxonomyId: taxonomy.id,
+        allOrgs: false,
+        orgs: [],
+      });
+    });
+
+    // Toast message shown
+    expect(mockSetToastMessage).toBeCalledWith('Assigned organizations updated');
+  });
+});
diff --git a/src/taxonomy/manage-orgs/data/api.js b/src/taxonomy/manage-orgs/data/api.js
new file mode 100644
index 0000000000..499aa3c731
--- /dev/null
+++ b/src/taxonomy/manage-orgs/data/api.js
@@ -0,0 +1,54 @@
+// @ts-check
+import { camelCaseObject, getConfig } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { useQueryClient, useMutation } from '@tanstack/react-query';
+
+const getApiBaseUrl = () => getConfig().STUDIO_BASE_URL;
+
+/**
+ * @param {number} taxonomyId
+ * @returns {string}
+ */
+export const getManageOrgsApiUrl = (taxonomyId) => new URL(
+  `api/content_tagging/v1/taxonomies/${taxonomyId}/orgs/`,
+  getApiBaseUrl(),
+).href;
+
+/**
+ * Build the mutation to assign organizations to a taxonomy.
+ */
+export const useManageOrgs = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    /**
+    * @type {import("@tanstack/react-query").MutateFunction<
+    *   any,
+    *   any,
+    *   {
+    *     taxonomyId: number,
+    *     orgs?: string[],
+    *     allOrgs: boolean,
+    *   }
+    * >}
+    */
+    mutationFn: async ({ taxonomyId, orgs, allOrgs }) => {
+      const { data } = await getAuthenticatedHttpClient().put(
+        getManageOrgsApiUrl(taxonomyId),
+        {
+          all_orgs: allOrgs,
+          orgs: allOrgs ? undefined : orgs,
+        },
+      );
+
+      return camelCaseObject(data);
+    },
+    onSuccess: (_data, variables) => {
+      queryClient.invalidateQueries({
+        queryKey: ['taxonomyList'],
+      });
+      queryClient.invalidateQueries({
+        queryKey: ['taxonomyDetail', variables.taxonomyId],
+      });
+    },
+  });
+};
diff --git a/src/taxonomy/manage-orgs/data/api.test.jsx b/src/taxonomy/manage-orgs/data/api.test.jsx
new file mode 100644
index 0000000000..40f047f6e6
--- /dev/null
+++ b/src/taxonomy/manage-orgs/data/api.test.jsx
@@ -0,0 +1,81 @@
+import { initializeMockApp } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { renderHook } from '@testing-library/react-hooks';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+import MockAdapter from 'axios-mock-adapter';
+
+import {
+  getManageOrgsApiUrl,
+  useManageOrgs,
+
+} from './api';
+
+let axiosMock;
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+    },
+  },
+});
+
+const wrapper = ({ children }) => (
+  <QueryClientProvider client={queryClient}>
+    {children}
+  </QueryClientProvider>
+);
+
+describe('import taxonomy api calls', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should call update taxonomy orgs', async () => {
+    axiosMock.onPut(getManageOrgsApiUrl(1)).reply(200);
+    const mockInvalidateQueries = jest.spyOn(queryClient, 'invalidateQueries');
+
+    const { result } = renderHook(() => useManageOrgs(), { wrapper });
+
+    await result.current.mutateAsync({ taxonomyId: 1, orgs: ['org1', 'org2'], allOrgs: false });
+    expect(axiosMock.history.put[0].url).toEqual(getManageOrgsApiUrl(1));
+    expect(axiosMock.history.put[0].data).toEqual(JSON.stringify({ all_orgs: false, orgs: ['org1', 'org2'] }));
+    expect(mockInvalidateQueries).toHaveBeenCalledWith({
+      queryKey: ['taxonomyList'],
+    });
+    expect(mockInvalidateQueries).toHaveBeenCalledWith({
+      queryKey: ['taxonomyDetail', 1],
+    });
+  });
+
+  it('should call update taxonomy orgs with allOrgs', async () => {
+    axiosMock.onPut(getManageOrgsApiUrl(1)).reply(200);
+    const mockInvalidateQueries = jest.spyOn(queryClient, 'invalidateQueries');
+
+    const { result } = renderHook(() => useManageOrgs(), { wrapper });
+
+    await result.current.mutateAsync({ taxonomyId: 1, orgs: ['org1', 'org2'], allOrgs: true });
+    expect(axiosMock.history.put[0].url).toEqual(getManageOrgsApiUrl(1));
+    // Should not send orgs when allOrgs is true
+    expect(axiosMock.history.put[0].data).toEqual(JSON.stringify({ all_orgs: true }));
+    expect(mockInvalidateQueries).toHaveBeenCalledWith({
+      queryKey: ['taxonomyList'],
+    });
+    expect(mockInvalidateQueries).toHaveBeenCalledWith({
+      queryKey: ['taxonomyDetail', 1],
+    });
+  });
+});
diff --git a/src/taxonomy/manage-orgs/index.ts b/src/taxonomy/manage-orgs/index.ts
new file mode 100644
index 0000000000..2549aa552d
--- /dev/null
+++ b/src/taxonomy/manage-orgs/index.ts
@@ -0,0 +1 @@
+export { default as ManageOrgsModal } from './ManageOrgsModal';
diff --git a/src/taxonomy/manage-orgs/messages.ts b/src/taxonomy/manage-orgs/messages.ts
new file mode 100644
index 0000000000..b422549815
--- /dev/null
+++ b/src/taxonomy/manage-orgs/messages.ts
@@ -0,0 +1,69 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  headerTitle: {
+    id: 'course-authoring.taxonomy-manage-orgs.header.title',
+    defaultMessage: 'Assign to organizations',
+  },
+  bodyText: {
+    id: 'course-authoring.taxonomy-manage-orgs.body.text',
+    defaultMessage: 'Manage which organizations can access the taxonomy by assigning them in the menu below. You can '
+    + 'also choose to assign the taxonomy to all organizations.',
+  },
+  assignOrgs: {
+    id: 'course-authoring.taxonomy-manage-orgs.assign-orgs',
+    defaultMessage: 'Assign organizations',
+  },
+  currentAssignments: {
+    id: 'course-authoring.taxonomy-manage-orgs.current-assignments',
+    defaultMessage: 'Currently assigned:',
+  },
+  addOrganizations: {
+    id: 'course-authoring.taxonomy-manage-orgs.add-orgs',
+    defaultMessage: 'Add another organization:',
+  },
+  searchOrganizations: {
+    id: 'course-authoring.taxonomy-manage-orgs.search-orgs',
+    defaultMessage: 'Search for an organization',
+  },
+  noOrganizationAssigned: {
+    id: 'course-authoring.taxonomy-manage-orgs.no-orgs',
+    defaultMessage: 'No organizations assigned',
+  },
+  assignAll: {
+    id: 'course-authoring.taxonomy-manage-orgs.assign-all',
+    defaultMessage: 'Assign to all organizations',
+  },
+  cancelButton: {
+    id: 'course-authoring.taxonomy-manage-orgs.button.cancel',
+    defaultMessage: 'Cancel',
+  },
+  saveButton: {
+    id: 'course-authoring.taxonomy-manage-orgs.button.save',
+    defaultMessage: 'Save',
+  },
+  confirmUnassignTitle: {
+    id: 'course-authoring.taxonomy-manage-orgs.confirm-dialog.title',
+    defaultMessage: 'Unassign taxonomy',
+  },
+  confirmUnassignText: {
+    id: 'course-authoring.taxonomy-manage-orgs.confirm-dialog.text',
+    defaultMessage: 'Content authors from unassigned organizations will not be able to tag course content with '
+    + '{taxonomyName}. Are you sure you want to continue?',
+  },
+  continueButton: {
+    id: 'course-authoring.taxonomy-manage-orgs.confirm-dialog.button.continue',
+    defaultMessage: 'Continue',
+  },
+  assignOrgsSuccess: {
+    id: 'course-authoring.taxonomy-manage-orgs.toast.assign-orgs-success',
+    defaultMessage: 'Assigned organizations updated',
+  },
+  removeOrg: {
+    id: 'course-authoring.taxonomy-manage-orgs.remove-org',
+    defaultMessage: 'Remove {org}',
+    description: 'button to remove a specific organization from a taxonomy',
+  },
+});
+
+export default messages;
diff --git a/src/taxonomy/messages.ts b/src/taxonomy/messages.ts
new file mode 100644
index 0000000000..d2f669b1d2
--- /dev/null
+++ b/src/taxonomy/messages.ts
@@ -0,0 +1,59 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  headerTitle: {
+    id: 'course-authoring.taxonomy-list.header.title',
+    defaultMessage: 'Taxonomies',
+  },
+  downloadTemplateButtonLabel: {
+    id: 'course-authoring.taxonomy-list.button.download-template.label',
+    defaultMessage: 'Download template',
+  },
+  downloadTemplateButtonCSVLabel: {
+    id: 'course-authoring.taxonomy-list.button.download-template.csv.label',
+    defaultMessage: 'CSV template',
+  },
+  downloadTemplateButtonJSONLabel: {
+    id: 'course-authoring.taxonomy-list.button.download-template.json.label',
+    defaultMessage: 'JSON template',
+  },
+  downloadTemplateButtonHint: {
+    id: 'course-authoring.taxonomy-list.butotn.download-template.hint',
+    defaultMessage: 'Download example taxonomy',
+  },
+  importButtonLabel: {
+    id: 'course-authoring.taxonomy-list.button.import.label',
+    defaultMessage: 'Import',
+  },
+  orgInputSelectDefaultValue: {
+    id: 'course-authoring.taxonomy-list.select.org.default',
+    defaultMessage: 'All taxonomies',
+  },
+  orgAllValue: {
+    id: 'course-authoring.taxonomy-list.select.org.all',
+    defaultMessage: 'All',
+  },
+  orgUnassignedValue: {
+    id: 'course-authoring.taxonomy-list.select.org.unassigned',
+    defaultMessage: 'Unassigned',
+  },
+  usageLoadingMessage: {
+    id: 'course-authoring.taxonomy-list.spinner.loading',
+    defaultMessage: 'Loading',
+  },
+  taxonomyDeleteToast: {
+    id: 'course-authoring.taxonomy-list.toast.delete',
+    defaultMessage: '"{name}" deleted',
+  },
+  taxonomyDismissLabel: {
+    id: 'course-authoring.taxonomy-list.alert.dismiss',
+    defaultMessage: 'Dismiss',
+  },
+  importInProgressAlertDescription: {
+    id: 'course-authoring.import-tags.prompt.in-progress',
+    defaultMessage: 'Please keep this window open. We\'ll let you know when it\'s done.',
+    description: 'Alert message when the taxonomy import is in progress.',
+  },
+});
+
+export default messages;
diff --git a/src/taxonomy/system-defined-badge/SystemDefinedBadge.scss b/src/taxonomy/system-defined-badge/SystemDefinedBadge.scss
new file mode 100644
index 0000000000..dfab7827f4
--- /dev/null
+++ b/src/taxonomy/system-defined-badge/SystemDefinedBadge.scss
@@ -0,0 +1,3 @@
+.system-defined-badge {
+  font-size: 12px;
+}
diff --git a/src/taxonomy/system-defined-badge/index.jsx b/src/taxonomy/system-defined-badge/index.jsx
new file mode 100644
index 0000000000..ed18bdef2a
--- /dev/null
+++ b/src/taxonomy/system-defined-badge/index.jsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import {
+  Badge,
+  OverlayTrigger,
+  Popover,
+} from '@openedx/paragon';
+import messages from './messages';
+
+const SystemDefinedBadge = ({ taxonomyId }) => {
+  const intl = useIntl();
+  const getToolTip = () => (
+    <Popover id={`system-defined-tooltip-${taxonomyId}`} className="mw-300px">
+      <Popover.Title as="h5">
+        {intl.formatMessage(messages.systemTaxonomyPopoverTitle)}
+      </Popover.Title>
+      <Popover.Content>
+        {intl.formatMessage(messages.systemTaxonomyPopoverBody)}
+      </Popover.Content>
+    </Popover>
+  );
+
+  return (
+    <OverlayTrigger
+      key={`system-defined-overlay-${taxonomyId}`}
+      placement="top"
+      overlay={getToolTip()}
+    >
+      <Badge variant="light" className="p-1.5 font-weight-normal system-defined-badge">
+        {intl.formatMessage(messages.systemDefinedBadge)}
+      </Badge>
+    </OverlayTrigger>
+  );
+};
+
+SystemDefinedBadge.propTypes = {
+  taxonomyId: PropTypes.number.isRequired,
+};
+
+export default SystemDefinedBadge;
diff --git a/src/taxonomy/system-defined-badge/messages.ts b/src/taxonomy/system-defined-badge/messages.ts
new file mode 100644
index 0000000000..59642d1e55
--- /dev/null
+++ b/src/taxonomy/system-defined-badge/messages.ts
@@ -0,0 +1,18 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  systemTaxonomyPopoverTitle: {
+    id: 'course-authoring.taxonomy-list.popover.system-defined.title',
+    defaultMessage: 'System taxonomy',
+  },
+  systemTaxonomyPopoverBody: {
+    id: 'course-authoring.taxonomy-list.popover.system-defined.body',
+    defaultMessage: 'This is a system-level taxonomy and is enabled by default.',
+  },
+  systemDefinedBadge: {
+    id: 'course-authoring.taxonomy-list.badge.system-defined.label',
+    defaultMessage: 'System-level',
+  },
+});
+
+export default messages;
diff --git a/src/taxonomy/tag-list/TagListTable.jsx b/src/taxonomy/tag-list/TagListTable.jsx
new file mode 100644
index 0000000000..013fcb6530
--- /dev/null
+++ b/src/taxonomy/tag-list/TagListTable.jsx
@@ -0,0 +1,121 @@
+// @ts-check
+import React, { useState } from 'react';
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
+import { DataTable } from '@openedx/paragon';
+import { isEqual } from 'lodash';
+import Proptypes from 'prop-types';
+
+import { LoadingSpinner } from '../../generic/Loading';
+import messages from './messages';
+import { useTagListData, useSubTags } from '../data/apiHooks';
+
+const SubTagsExpanded = ({ taxonomyId, parentTagValue }) => {
+  const subTagsData = useSubTags(taxonomyId, parentTagValue);
+
+  if (subTagsData.isLoading) {
+    return <LoadingSpinner />;
+  }
+  if (subTagsData.isError) {
+    return <FormattedMessage {...messages.tagListError} />;
+  }
+
+  return (
+    <ul style={{ listStyleType: 'none' }}>
+      {subTagsData.data.results.map(tagData => (
+        <li key={tagData.id} style={{ paddingLeft: `${(tagData.depth - 1) * 30}px` }}>
+          {tagData.value} <span className="text-secondary-500">{tagData.descendantCount > 0 ? `(${tagData.descendantCount})` : null}</span>
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+SubTagsExpanded.propTypes = {
+  taxonomyId: Proptypes.number.isRequired,
+  parentTagValue: Proptypes.string.isRequired,
+};
+
+/**
+ * An "Expand" toggle to show/hide subtags, but one which is hidden if the given tag row has no subtags.
+ */
+const OptionalExpandLink = ({ row }) => (
+  row.original.childCount > 0 ? <div className="d-flex justify-content-end"><DataTable.ExpandRow row={row} /></div> : null
+);
+OptionalExpandLink.propTypes = DataTable.ExpandRow.propTypes;
+
+/**
+ * Custom DataTable cell to join tag value with child count
+ */
+const TagValue = ({ row }) => (
+  <>
+    <span>{row.original.value}</span>
+    <span className="text-secondary-500">{` (${row.original.descendantCount})`}</span>
+  </>
+);
+TagValue.propTypes = {
+  row: Proptypes.shape({
+    original: Proptypes.shape({
+      value: Proptypes.string.isRequired,
+      childCount: Proptypes.number.isRequired,
+      descendantCount: Proptypes.number.isRequired,
+    }).isRequired,
+  }).isRequired,
+};
+
+const TagListTable = ({ taxonomyId }) => {
+  const intl = useIntl();
+  const [options, setOptions] = useState({
+    pageIndex: 0,
+    pageSize: 100,
+  });
+  const { isLoading, data: tagList } = useTagListData(taxonomyId, options);
+
+  const fetchData = (args) => {
+    if (!isEqual(args, options)) {
+      setOptions({ ...args });
+    }
+  };
+
+  return (
+    <div className="tag-list-table">
+      <DataTable
+        isLoading={isLoading}
+        isPaginated
+        manualPagination
+        fetchData={fetchData}
+        data={tagList?.results || []}
+        itemCount={tagList?.count || 0}
+        pageCount={tagList?.numPages || 0}
+        initialState={options}
+        isExpandable
+        // This is a temporary "bare bones" solution for brute-force loading all the child tags. In future we'll match
+        // the Figma design and do something more sophisticated.
+        renderRowSubComponent={({ row }) => (
+          <SubTagsExpanded taxonomyId={taxonomyId} parentTagValue={row.original.value} />
+        )}
+        columns={[
+          {
+            Header: intl.formatMessage(messages.tagListColumnValueHeader),
+            Cell: TagValue,
+          },
+          {
+            id: 'expander',
+            Header: DataTable.ExpandAll,
+            Cell: OptionalExpandLink,
+          },
+        ]}
+      >
+        <DataTable.Table />
+        <DataTable.EmptyTable content={intl.formatMessage(messages.noResultsFoundMessage)} />
+        {tagList?.numPages !== undefined && tagList?.numPages > 1
+          && <DataTable.TableFooter />}
+      </DataTable>
+    </div>
+  );
+};
+
+TagListTable.propTypes = {
+  taxonomyId: Proptypes.number.isRequired,
+};
+
+export default TagListTable;
diff --git a/src/taxonomy/tag-list/TagListTable.scss b/src/taxonomy/tag-list/TagListTable.scss
new file mode 100644
index 0000000000..ad5c23467b
--- /dev/null
+++ b/src/taxonomy/tag-list/TagListTable.scss
@@ -0,0 +1,12 @@
+.tag-list-table {
+  table tr:first-child > th:nth-child(2) > span {
+    // Used to move "Expand all" button to the right.
+    // Find the first <span> of the second <th> of the first <tr> of the <table>.
+    //
+    // The approach of the expand buttons cannot be applied here since the
+    // table headers are rendered differently and at the component level
+    // there is no control of this style.
+    display: flex;
+    justify-content: flex-end;
+  }
+}
diff --git a/src/taxonomy/tag-list/TagListTable.test.jsx b/src/taxonomy/tag-list/TagListTable.test.jsx
new file mode 100644
index 0000000000..41c5b11f56
--- /dev/null
+++ b/src/taxonomy/tag-list/TagListTable.test.jsx
@@ -0,0 +1,164 @@
+import React from 'react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { initializeMockApp } from '@edx/frontend-platform';
+import { AppProvider } from '@edx/frontend-platform/react';
+import {
+  render, waitFor, screen, within,
+} from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import MockAdapter from 'axios-mock-adapter';
+
+import initializeStore from '../../store';
+import TagListTable from './TagListTable';
+
+let store;
+let axiosMock;
+const queryClient = new QueryClient();
+
+const RootWrapper = () => (
+  <AppProvider store={store}>
+    <IntlProvider locale="en" messages={{}}>
+      <QueryClientProvider client={queryClient}>
+        <TagListTable taxonomyId={1} />
+      </QueryClientProvider>
+    </IntlProvider>
+  </AppProvider>
+);
+
+const tagDefaults = { depth: 0, external_id: null, parent_value: null };
+const mockTagsResponse = {
+  next: null,
+  previous: null,
+  count: 3,
+  num_pages: 1,
+  current_page: 1,
+  start: 0,
+  results: [
+    {
+      ...tagDefaults,
+      value: 'root tag 1',
+      child_count: 1,
+      descendant_count: 14,
+      _id: 1001,
+      sub_tags_url: '/request/to/load/subtags/1',
+    },
+    {
+      ...tagDefaults,
+      value: 'root tag 2',
+      child_count: 1,
+      descendant_count: 10,
+      _id: 1002,
+      sub_tags_url: '/request/to/load/subtags/2',
+    },
+    {
+      ...tagDefaults,
+      value: 'root tag 3',
+      child_count: 1,
+      descendant_count: 5,
+      _id: 1003,
+      sub_tags_url: '/request/to/load/subtags/3',
+    },
+  ],
+};
+const mockTagsPaginationResponse = {
+  next: null,
+  previous: null,
+  count: 103,
+  num_pages: 2,
+  current_page: 1,
+  start: 0,
+  results: [],
+};
+const rootTagsListUrl = 'http://localhost:18010/api/content_tagging/v1/taxonomies/1/tags/?page=1&page_size=100';
+const subTagsResponse = {
+  next: null,
+  previous: null,
+  count: 1,
+  num_pages: 1,
+  current_page: 1,
+  start: 0,
+  results: [
+    {
+      ...tagDefaults,
+      depth: 1,
+      value: 'the child tag',
+      child_count: 0,
+      _id: 1111,
+      sub_tags_url: null,
+    },
+  ],
+};
+const subTagsUrl = 'http://localhost:18010/api/content_tagging/v1/taxonomies/1/tags/?full_depth_threshold=10000&parent_tag=root+tag+1';
+
+describe('<TagListTable />', () => {
+  beforeAll(async () => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+  });
+  beforeEach(async () => {
+    store = initializeStore();
+    axiosMock.reset();
+  });
+
+  it('shows the spinner before the query is complete', async () => {
+    // Simulate an actual slow response from the API:
+    let resolveResponse;
+    const promise = new Promise(resolve => { resolveResponse = resolve; });
+    axiosMock.onGet(rootTagsListUrl).reply(() => promise);
+    render(<RootWrapper />);
+    const spinner = screen.getByRole('status');
+    expect(spinner.textContent).toEqual('loading');
+    resolveResponse([200, {}]);
+    const noFoundComponent = await screen.findByText('No results found');
+    expect(noFoundComponent).toBeInTheDocument();
+  });
+
+  it('should render page correctly', async () => {
+    axiosMock.onGet(rootTagsListUrl).reply(200, mockTagsResponse);
+    render(<RootWrapper />);
+    const tag = await screen.findByText('root tag 1');
+    expect(tag).toBeInTheDocument();
+
+    const rows = screen.getAllByRole('row');
+    expect(rows.length).toBe(3 + 1); // 3 items plus header
+    expect(within(rows[0]).getAllByRole('columnheader')[0].textContent).toEqual('Tag name');
+    expect(within(rows[1]).getAllByRole('cell')[0].textContent).toEqual('root tag 1 (14)');
+  });
+
+  it('should render page correctly with subtags', async () => {
+    axiosMock.onGet(rootTagsListUrl).reply(200, mockTagsResponse);
+    axiosMock.onGet(subTagsUrl).reply(200, subTagsResponse);
+    render(<RootWrapper />);
+    const expandButton = screen.getAllByLabelText('Expand row')[0];
+    expandButton.click();
+    const childTag = await screen.findByText('the child tag');
+    expect(childTag).toBeInTheDocument();
+  });
+
+  it('should not render pagination footer', async () => {
+    axiosMock.onGet(rootTagsListUrl).reply(200, mockTagsResponse);
+    render(<RootWrapper />);
+    await waitFor(() => {
+      expect(screen.queryByRole('navigation', {
+        name: /table pagination/i,
+      })).not.toBeInTheDocument();
+    });
+  });
+
+  it('should render pagination footer', async () => {
+    axiosMock.onGet(rootTagsListUrl).reply(200, mockTagsPaginationResponse);
+    render(<RootWrapper />);
+    const tableFooter = await screen.findByRole('navigation', {
+      name: /table pagination/i,
+    });
+    expect(tableFooter).toBeInTheDocument();
+  });
+});
diff --git a/src/taxonomy/tag-list/index.ts b/src/taxonomy/tag-list/index.ts
new file mode 100644
index 0000000000..622ea55769
--- /dev/null
+++ b/src/taxonomy/tag-list/index.ts
@@ -0,0 +1 @@
+export { default as TagListTable } from './TagListTable';
diff --git a/src/taxonomy/tag-list/messages.ts b/src/taxonomy/tag-list/messages.ts
new file mode 100644
index 0000000000..77c0efa11a
--- /dev/null
+++ b/src/taxonomy/tag-list/messages.ts
@@ -0,0 +1,18 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  noResultsFoundMessage: {
+    id: 'course-authoring.tag-list.no-results-found.message',
+    defaultMessage: 'No results found',
+  },
+  tagListColumnValueHeader: {
+    id: 'course-authoring.tag-list.column.value.header',
+    defaultMessage: 'Tag name',
+  },
+  tagListError: {
+    id: 'course-authoring.tag-list.error',
+    defaultMessage: 'Error: unable to load child tags',
+  },
+});
+
+export default messages;
diff --git a/src/taxonomy/taxonomy-card/TaxonomyCard.scss b/src/taxonomy/taxonomy-card/TaxonomyCard.scss
new file mode 100644
index 0000000000..6ed11c542b
--- /dev/null
+++ b/src/taxonomy/taxonomy-card/TaxonomyCard.scss
@@ -0,0 +1,25 @@
+.taxonomy-card {
+  width: 400px;
+  height: 317px;
+
+  .taxonomy-card-body {
+    /*
+      Set overflow to description
+      I added '-webkit-box' to truncate multiple lines
+    */
+    font-size: 18px;
+    display: -webkit-box; /* stylelint-disable-line value-no-vendor-prefix */
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  .taxonomy-card-body-overflow-m {
+    max-height: 220px;
+    -webkit-line-clamp: 7;
+  }
+
+  .taxonomy-card-body-overflow-sm {
+    max-height: 190px;
+    -webkit-line-clamp: 6;
+  }
+}
diff --git a/src/taxonomy/taxonomy-card/TaxonomyCard.test.jsx b/src/taxonomy/taxonomy-card/TaxonomyCard.test.jsx
new file mode 100644
index 0000000000..413623e5bc
--- /dev/null
+++ b/src/taxonomy/taxonomy-card/TaxonomyCard.test.jsx
@@ -0,0 +1,112 @@
+import React from 'react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { initializeMockApp } from '@edx/frontend-platform';
+import { AppProvider } from '@edx/frontend-platform/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { fireEvent, render } from '@testing-library/react';
+
+import initializeStore from '../../store';
+import TaxonomyCard from '.';
+
+let store;
+const taxonomyId = 1;
+
+const data = {
+  id: taxonomyId,
+  name: 'Taxonomy 1',
+  description: 'This is a description',
+  systemDefined: false,
+  canChangeTaxonomy: true,
+  canDeleteTaxonomy: true,
+  tagsCount: 0,
+};
+
+const queryClient = new QueryClient();
+
+const TaxonomyCardComponent = ({ original }) => (
+  <AppProvider store={store}>
+    <IntlProvider locale="en" messages={{}}>
+      <QueryClientProvider client={queryClient}>
+        <TaxonomyCard
+          original={original}
+        />
+      </QueryClientProvider>
+    </IntlProvider>
+  </AppProvider>
+);
+
+TaxonomyCardComponent.propTypes = TaxonomyCard.propTypes;
+
+describe('<TaxonomyCard />', () => {
+  beforeEach(async () => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+    store = initializeStore();
+  });
+
+  it('should render title and description of the card', () => {
+    const { getByText } = render(<TaxonomyCardComponent original={data} />);
+    expect(getByText(data.name)).toBeInTheDocument();
+    expect(getByText(data.description)).toBeInTheDocument();
+  });
+
+  it('should show the ⋮ menu', () => {
+    const { getByTestId, queryByTestId } = render(<TaxonomyCardComponent original={data} />);
+
+    // Menu closed/doesn't exist yet
+    expect(queryByTestId('taxonomy-menu')).not.toBeInTheDocument();
+
+    // Click on the menu button to open
+    fireEvent.click(getByTestId('taxonomy-menu-button'));
+
+    // Menu opened
+    expect(getByTestId('taxonomy-menu')).toBeVisible();
+    expect(getByTestId('taxonomy-menu-import')).toBeVisible();
+    expect(getByTestId('taxonomy-menu-export')).toBeVisible();
+    expect(getByTestId('taxonomy-menu-delete')).toBeVisible();
+
+    // Click on button again to close the menu
+    fireEvent.click(getByTestId('taxonomy-menu-button'));
+
+    // Menu closed
+    // Jest bug: toBeVisible() isn't checking opacity correctly
+    // expect(getByTestId('taxonomy-menu')).not.toBeVisible();
+    expect(getByTestId('taxonomy-menu').style.opacity).toEqual('0');
+
+    // Menu button still visible
+    expect(getByTestId('taxonomy-menu-button')).toBeVisible();
+  });
+
+  it('not show the system-defined badge with normal taxonomies', () => {
+    const { queryByText } = render(<TaxonomyCardComponent original={data} />);
+    expect(queryByText('System-level')).not.toBeInTheDocument();
+  });
+
+  it('shows the system-defined badge with system taxonomies', () => {
+    const cardData = { ...data };
+    cardData.systemDefined = true;
+
+    const { getByText } = render(<TaxonomyCardComponent original={cardData} />);
+    expect(getByText('System-level')).toBeInTheDocument();
+  });
+
+  it('not show org count with taxonomies without orgs', () => {
+    const { queryByText } = render(<TaxonomyCardComponent original={data} />);
+    expect(queryByText('Assigned to 0 orgs')).not.toBeInTheDocument();
+  });
+
+  it('shows org count with taxonomies with orgs', () => {
+    const cardData = {
+      orgsCount: 6,
+      ...data,
+    };
+    const { getByText } = render(<TaxonomyCardComponent original={cardData} />);
+    expect(getByText('Assigned to 6 orgs')).toBeInTheDocument();
+  });
+});
diff --git a/src/taxonomy/taxonomy-card/index.jsx b/src/taxonomy/taxonomy-card/index.jsx
new file mode 100644
index 0000000000..591cb06423
--- /dev/null
+++ b/src/taxonomy/taxonomy-card/index.jsx
@@ -0,0 +1,157 @@
+import React, { useEffect, useRef, useState } from 'react';
+import {
+  Card,
+  OverlayTrigger,
+  Popover,
+} from '@openedx/paragon';
+import PropTypes from 'prop-types';
+import { NavLink } from 'react-router-dom';
+import classNames from 'classnames';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import { TaxonomyMenu } from '../taxonomy-menu';
+import messages from './messages';
+import SystemDefinedBadge from '../system-defined-badge';
+
+const orgsCountEnabled = (orgsCount) => orgsCount !== undefined && orgsCount !== 0;
+
+const HeaderSubtitle = ({
+  id, showSystemBadge, orgsCount,
+}) => {
+  const intl = useIntl();
+
+  // Show system defined badge
+  if (showSystemBadge) {
+    return <SystemDefinedBadge taxonomyId={id} />;
+  }
+
+  // Or show orgs count
+  if (orgsCountEnabled(orgsCount)) {
+    return (
+      <div className="font-italic">
+        {intl.formatMessage(messages.assignedToOrgsLabel, { orgsCount })}
+      </div>
+    );
+  }
+
+  // Or none
+  return null;
+};
+
+HeaderSubtitle.defaultProps = {
+  orgsCount: undefined,
+};
+
+HeaderSubtitle.propTypes = {
+  id: PropTypes.number.isRequired,
+  showSystemBadge: PropTypes.bool.isRequired,
+  orgsCount: PropTypes.number,
+};
+
+const HeaderTitle = ({ taxonomyId, title }) => {
+  const containerRef = useRef(null);
+  const textRef = useRef(null);
+  const [isTruncated, setIsTruncated] = useState(false);
+
+  useEffect(() => {
+    const containerWidth = containerRef.current.clientWidth;
+    const textWidth = textRef.current.offsetWidth;
+    setIsTruncated(textWidth > containerWidth);
+  }, [title]);
+
+  const getToolTip = () => (
+    <Popover
+      id={`taxonomy-card-title-tooltip-${taxonomyId}`}
+      className="mw-300px"
+    >
+      <Popover.Content>
+        {title}
+      </Popover.Content>
+    </Popover>
+  );
+
+  return (
+    <OverlayTrigger
+      key={`taxonomy-card-title-overlay-${taxonomyId}`}
+      placement="top"
+      overlay={getToolTip()}
+      show={!isTruncated ? false : undefined}
+    >
+      <div ref={containerRef} className="text-truncate">
+        <span ref={textRef}>{title}</span>
+      </div>
+    </OverlayTrigger>
+  );
+};
+
+HeaderTitle.propTypes = {
+  taxonomyId: PropTypes.number.isRequired,
+  title: PropTypes.string.isRequired,
+};
+
+const TaxonomyCard = ({ className, original }) => {
+  const {
+    id, name, description, systemDefined, orgsCount,
+  } = original;
+
+  const intl = useIntl();
+
+  const getHeaderActions = () => (
+    <TaxonomyMenu
+      taxonomy={original}
+      iconMenu
+    />
+  );
+
+  return (
+    <Card
+      isClickable
+      as={NavLink}
+      to={`/taxonomy/${id}/`}
+      className={classNames('taxonomy-card', className)}
+      data-testid={`taxonomy-card-${id}`}
+    >
+      <Card.Header
+        title={<HeaderTitle taxonomyId={id} title={name} />}
+        subtitle={(
+          <HeaderSubtitle
+            id={id}
+            showSystemBadge={systemDefined}
+            orgsCount={orgsCount}
+            intl={intl}
+          />
+        )}
+        actions={getHeaderActions()}
+      />
+      <Card.Body className={classNames('taxonomy-card-body', {
+        'taxonomy-card-body-overflow-m': !systemDefined && !orgsCountEnabled(orgsCount),
+        'taxonomy-card-body-overflow-sm': systemDefined || orgsCountEnabled(orgsCount),
+      })}
+      >
+        <Card.Section>
+          {description}
+        </Card.Section>
+      </Card.Body>
+    </Card>
+  );
+};
+
+TaxonomyCard.defaultProps = {
+  className: '',
+};
+
+TaxonomyCard.propTypes = {
+  className: PropTypes.string,
+  original: PropTypes.shape({
+    id: PropTypes.number,
+    name: PropTypes.string,
+    description: PropTypes.string,
+    systemDefined: PropTypes.bool,
+    orgsCount: PropTypes.number,
+    tagsCount: PropTypes.number,
+    canChangeTaxonomy: PropTypes.bool,
+    canDeleteTaxonomy: PropTypes.bool,
+  }).isRequired,
+};
+
+export default TaxonomyCard;
diff --git a/src/taxonomy/taxonomy-card/messages.ts b/src/taxonomy/taxonomy-card/messages.ts
new file mode 100644
index 0000000000..c6c98fcb11
--- /dev/null
+++ b/src/taxonomy/taxonomy-card/messages.ts
@@ -0,0 +1,10 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  assignedToOrgsLabel: {
+    id: 'course-authoring.taxonomy-list.orgs-count.label',
+    defaultMessage: 'Assigned to {orgsCount} orgs',
+  },
+});
+
+export default messages;
diff --git a/src/taxonomy/taxonomy-detail/TaxonomyDetailPage.jsx b/src/taxonomy/taxonomy-detail/TaxonomyDetailPage.jsx
new file mode 100644
index 0000000000..bb9fd89c46
--- /dev/null
+++ b/src/taxonomy/taxonomy-detail/TaxonomyDetailPage.jsx
@@ -0,0 +1,103 @@
+// @ts-check
+import React from 'react';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import {
+  Breadcrumb,
+  Container,
+  Layout,
+} from '@openedx/paragon';
+import { Helmet } from 'react-helmet';
+import { Link, useParams } from 'react-router-dom';
+
+import ConnectionErrorAlert from '../../generic/ConnectionErrorAlert';
+import Loading from '../../generic/Loading';
+import getPageHeadTitle from '../../generic/utils';
+import SubHeader from '../../generic/sub-header/SubHeader';
+import taxonomyMessages from '../messages';
+import { TagListTable } from '../tag-list';
+import { TaxonomyMenu } from '../taxonomy-menu';
+import TaxonomyDetailSideCard from './TaxonomyDetailSideCard';
+import { useTaxonomyDetails } from '../data/apiHooks';
+import SystemDefinedBadge from '../system-defined-badge';
+
+const TaxonomyDetailPage = () => {
+  const intl = useIntl();
+  const { taxonomyId: taxonomyIdString } = useParams();
+  const taxonomyId = Number(taxonomyIdString);
+
+  const {
+    data: taxonomy,
+    isError,
+    isFetched,
+  } = useTaxonomyDetails(taxonomyId);
+
+  if (!isFetched) {
+    return (
+      <Loading />
+    );
+  }
+
+  if (isError || !taxonomy) {
+    return (
+      <ConnectionErrorAlert />
+    );
+  }
+
+  const getHeaderActions = () => (
+    <TaxonomyMenu
+      taxonomy={taxonomy}
+    />
+  );
+
+  const getSystemDefinedBadge = () => {
+    if (taxonomy.systemDefined) {
+      return <SystemDefinedBadge taxonomyId={taxonomyId} />;
+    }
+    return null;
+  };
+
+  return (
+    <>
+      <Helmet>
+        <title>{getPageHeadTitle(intl.formatMessage(taxonomyMessages.headerTitle), taxonomy.name)}</title>
+      </Helmet>
+      <div className="pt-4.5 pr-4.5 pl-4.5 pb-2 bg-light-100 box-shadow-down-2">
+        <Container size="xl">
+          <Breadcrumb
+            links={[
+              { label: intl.formatMessage(taxonomyMessages.headerTitle), to: '/taxonomies/' },
+            ]}
+            activeLabel={taxonomy.name}
+            linkAs={Link}
+          />
+          <SubHeader
+            title={taxonomy.name}
+            titleActions={getSystemDefinedBadge()}
+            hideBorder
+            headerActions={getHeaderActions()}
+          />
+        </Container>
+      </div>
+      <div className="bg-light-400 m-4">
+        <Container size="xl">
+          <Layout
+            lg={[{ span: 9 }, { span: 3 }]}
+            md={[{ span: 9 }, { span: 3 }]}
+            sm={[{ span: 9 }, { span: 3 }]}
+            xs={[{ span: 9 }, { span: 3 }]}
+            xl={[{ span: 9 }, { span: 3 }]}
+          >
+            <Layout.Element>
+              <TagListTable taxonomyId={taxonomyId} />
+            </Layout.Element>
+            <Layout.Element>
+              <TaxonomyDetailSideCard taxonomy={taxonomy} />
+            </Layout.Element>
+          </Layout>
+        </Container>
+      </div>
+    </>
+  );
+};
+
+export default TaxonomyDetailPage;
diff --git a/src/taxonomy/taxonomy-detail/TaxonomyDetailPage.test.jsx b/src/taxonomy/taxonomy-detail/TaxonomyDetailPage.test.jsx
new file mode 100644
index 0000000000..49df3d8a7e
--- /dev/null
+++ b/src/taxonomy/taxonomy-detail/TaxonomyDetailPage.test.jsx
@@ -0,0 +1,142 @@
+import MockAdapter from 'axios-mock-adapter';
+import { initializeMockApp } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { AppProvider } from '@edx/frontend-platform/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { fireEvent, render } from '@testing-library/react';
+
+import { apiUrls } from '../data/api';
+import initializeStore from '../../store';
+import TaxonomyDetailPage from './TaxonomyDetailPage';
+
+let store;
+const mockNavigate = jest.fn();
+const mockMutate = jest.fn();
+let axiosMock;
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'), // use actual for all non-hook parts
+  useParams: () => ({
+    taxonomyId: '1',
+  }),
+  useNavigate: () => mockNavigate,
+}));
+jest.mock('../data/apiHooks', () => ({
+  ...jest.requireActual('../data/apiHooks'),
+  useDeleteTaxonomy: () => mockMutate,
+}));
+
+jest.mock('./TaxonomyDetailSideCard', () => jest.fn(() => <>Mock TaxonomyDetailSideCard</>));
+jest.mock('../tag-list/TagListTable', () => jest.fn(() => <>Mock TagListTable</>));
+
+const queryClient = new QueryClient();
+
+const RootWrapper = () => (
+  <AppProvider store={store}>
+    <IntlProvider locale="en" messages={{}}>
+      <QueryClientProvider client={queryClient}>
+        <TaxonomyDetailPage />
+      </QueryClientProvider>
+    </IntlProvider>
+  </AppProvider>
+);
+
+describe('<TaxonomyDetailPage />', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+    store = initializeStore();
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+    axiosMock.restore();
+    queryClient.clear();
+  });
+
+  it('shows the spinner before the query is complete', () => {
+    // Use unresolved promise to keep the Loading visible
+    axiosMock.onGet(apiUrls.taxonomy(1)).reply(() => new Promise());
+    const { getByRole } = render(<RootWrapper />);
+    const spinner = getByRole('status');
+    expect(spinner.textContent).toEqual('Loading...');
+  });
+
+  it('shows the connector error component if not taxonomy returned', async () => {
+    // Use empty response to trigger the error. Returning an error do not
+    // work because the query will retry.
+    axiosMock.onGet(apiUrls.taxonomy(1)).reply(200);
+
+    const { findByTestId } = render(<RootWrapper />);
+
+    expect(await findByTestId('connectionErrorAlert')).toBeInTheDocument();
+  });
+
+  it('should render page and page title correctly', async () => {
+    await axiosMock.onGet(apiUrls.taxonomy(1)).replyOnce(200, {
+      id: 1,
+      name: 'Test taxonomy',
+      description: 'This is a description',
+      system_defined: false,
+      can_change_taxonomy: true,
+      can_delete_taxonomy: true,
+      tagsCount: 0,
+    });
+
+    const { getByTestId, queryByTestId, findByRole } = render(<RootWrapper />);
+
+    expect(await findByRole('heading')).toHaveTextContent('Test taxonomy');
+
+    // Menu closed/doesn't exist yet
+    expect(queryByTestId('taxonomy-menu')).not.toBeInTheDocument();
+
+    // Click on the menu button to open
+    fireEvent.click(getByTestId('taxonomy-menu-button'));
+
+    // Menu opened
+    expect(getByTestId('taxonomy-menu')).toBeVisible();
+    expect(getByTestId('taxonomy-menu-import')).toBeVisible();
+    expect(getByTestId('taxonomy-menu-export')).toBeVisible();
+    expect(getByTestId('taxonomy-menu-delete')).toBeVisible();
+  });
+
+  it('should show system defined badge', async () => {
+    axiosMock.onGet(apiUrls.taxonomy(1)).replyOnce(200, {
+      id: 1,
+      name: 'Test taxonomy',
+      description: 'This is a description',
+      system_defined: true,
+      can_change_taxonomy: false,
+      can_delete_taxonomy: false,
+    });
+
+    const { findByRole, getByText } = render(<RootWrapper />);
+
+    expect(await findByRole('heading')).toHaveTextContent('Test taxonomy');
+    expect(getByText('System-level')).toBeInTheDocument();
+  });
+
+  it('should not show system defined badge', async () => {
+    axiosMock.onGet(apiUrls.taxonomy(1)).replyOnce(200, {
+      id: 1,
+      name: 'Test taxonomy',
+      description: 'This is a description',
+      system_defined: false,
+      can_change_taxonomy: false,
+      can_delete_taxonomy: false,
+    });
+
+    const { findByRole, queryByText } = render(<RootWrapper />);
+
+    expect(await findByRole('heading')).toHaveTextContent('Test taxonomy');
+    expect(queryByText('System-level')).not.toBeInTheDocument();
+  });
+});
diff --git a/src/taxonomy/taxonomy-detail/TaxonomyDetailSideCard.jsx b/src/taxonomy/taxonomy-detail/TaxonomyDetailSideCard.jsx
new file mode 100644
index 0000000000..9cfe3c669a
--- /dev/null
+++ b/src/taxonomy/taxonomy-detail/TaxonomyDetailSideCard.jsx
@@ -0,0 +1,36 @@
+import { useIntl } from '@edx/frontend-platform/i18n';
+import {
+  Card,
+} from '@openedx/paragon';
+import PropTypes from 'prop-types';
+
+import messages from './messages';
+
+const TaxonomyDetailSideCard = ({ taxonomy }) => {
+  const intl = useIntl();
+  return (
+    <Card>
+      <Card.Header title={intl.formatMessage(messages.taxonomyDetailsHeader)} />
+      <Card.Section title={intl.formatMessage(messages.taxonomyDetailsName)}>
+        {taxonomy.name}
+      </Card.Section>
+      <Card.Divider className="ml-3 mr-3" />
+      <Card.Section title={intl.formatMessage(messages.taxonomyDetailsDescription)}>
+        {taxonomy.description}
+      </Card.Section>
+      <Card.Section title={intl.formatMessage(messages.taxonomyDetailsExportID)}>
+        {taxonomy.exportId}
+      </Card.Section>
+    </Card>
+  );
+};
+
+TaxonomyDetailSideCard.propTypes = {
+  taxonomy: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    exportId: PropTypes.string.isRequired,
+    description: PropTypes.string.isRequired,
+  }).isRequired,
+};
+
+export default TaxonomyDetailSideCard;
diff --git a/src/taxonomy/taxonomy-detail/TaxonomyDetailSideCard.test.jsx b/src/taxonomy/taxonomy-detail/TaxonomyDetailSideCard.test.jsx
new file mode 100644
index 0000000000..bee3c39a4a
--- /dev/null
+++ b/src/taxonomy/taxonomy-detail/TaxonomyDetailSideCard.test.jsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { initializeMockApp } from '@edx/frontend-platform';
+import { AppProvider } from '@edx/frontend-platform/react';
+import { render } from '@testing-library/react';
+
+import initializeStore from '../../store';
+
+import TaxonomyDetailSideCard from './TaxonomyDetailSideCard';
+
+let store;
+
+const data = {
+  id: 1,
+  name: 'Taxonomy 1',
+  description: 'This is a description',
+};
+
+const TaxonomyCardComponent = ({ taxonomy }) => (
+  <AppProvider store={store}>
+    <IntlProvider locale="en" messages={{}}>
+      <TaxonomyDetailSideCard taxonomy={taxonomy} />
+    </IntlProvider>
+  </AppProvider>
+);
+
+TaxonomyCardComponent.propTypes = TaxonomyDetailSideCard.propTypes;
+
+describe('<TaxonomyDetailSideCard/>', () => {
+  beforeEach(async () => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+    store = initializeStore();
+  });
+
+  it('should render title and description of the card', () => {
+    const { getByText } = render(<TaxonomyCardComponent taxonomy={data} />);
+    expect(getByText(data.name)).toBeInTheDocument();
+    expect(getByText(data.description)).toBeInTheDocument();
+  });
+});
diff --git a/src/taxonomy/taxonomy-detail/index.ts b/src/taxonomy/taxonomy-detail/index.ts
new file mode 100644
index 0000000000..0b27a5d2a5
--- /dev/null
+++ b/src/taxonomy/taxonomy-detail/index.ts
@@ -0,0 +1 @@
+export { default as TaxonomyDetailPage } from './TaxonomyDetailPage';
diff --git a/src/taxonomy/taxonomy-detail/messages.ts b/src/taxonomy/taxonomy-detail/messages.ts
new file mode 100644
index 0000000000..3aa7968399
--- /dev/null
+++ b/src/taxonomy/taxonomy-detail/messages.ts
@@ -0,0 +1,22 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  taxonomyDetailsHeader: {
+    id: 'course-authoring.taxonomy-detail.side-card.header',
+    defaultMessage: 'Taxonomy details',
+  },
+  taxonomyDetailsName: {
+    id: 'course-authoring.taxonomy-detail.side-card.name',
+    defaultMessage: 'Title',
+  },
+  taxonomyDetailsDescription: {
+    id: 'course-authoring.taxonomy-detail.side-card.description',
+    defaultMessage: 'Description',
+  },
+  taxonomyDetailsExportID: {
+    id: 'course-authoring.taxonomy-detail.side-card.exportID',
+    defaultMessage: 'Export ID',
+  },
+});
+
+export default messages;
diff --git a/src/taxonomy/taxonomy-menu/TaxonomyMenu.jsx b/src/taxonomy/taxonomy-menu/TaxonomyMenu.jsx
new file mode 100644
index 0000000000..fce069a95d
--- /dev/null
+++ b/src/taxonomy/taxonomy-menu/TaxonomyMenu.jsx
@@ -0,0 +1,191 @@
+// @ts-check
+import React, { useCallback, useContext } from 'react';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import {
+  useToggle,
+  Button,
+  Dropdown,
+  Icon,
+  IconButton,
+} from '@openedx/paragon';
+import { MoreVert } from '@openedx/paragon/icons';
+import { pickBy } from 'lodash';
+import PropTypes from 'prop-types';
+import { useNavigate } from 'react-router-dom';
+
+import ExportModal from '../export-modal';
+import { useDeleteTaxonomy } from '../data/apiHooks';
+import { TaxonomyContext } from '../common/context';
+import DeleteDialog from '../delete-dialog';
+import { ImportTagsWizard } from '../import-tags';
+import { ManageOrgsModal } from '../manage-orgs';
+import messages from './messages';
+
+/** @typedef {import('../data/types.js').TaxonomyData} TaxonomyData */
+// Note: to make mocking easier for tests, the types below only specify the subset of TaxonomyData that we actually use.
+
+/**
+ * A menu that provides actions for editing a specific taxonomy.
+ * @type {React.FC<{
+ *   taxonomy: Pick<TaxonomyData, 'id'|'name'|'tagsCount'|'systemDefined'|'canChangeTaxonomy'|'canDeleteTaxonomy'>,
+ *   iconMenu?: boolean
+ * }>}
+ */
+const TaxonomyMenu = ({
+  taxonomy, iconMenu,
+}) => {
+  const intl = useIntl();
+  const navigate = useNavigate();
+
+  const deleteTaxonomy = useDeleteTaxonomy();
+  const { setToastMessage } = useContext(TaxonomyContext);
+
+  const onDeleteTaxonomy = useCallback(() => {
+    deleteTaxonomy({ pk: taxonomy.id }, {
+      onSuccess: () => {
+        if (setToastMessage) {
+          setToastMessage(intl.formatMessage(messages.taxonomyDeleteToast, { name: taxonomy.name }));
+        }
+        navigate('/taxonomies');
+      },
+      onError: () => {
+        // TODO: display the error to the user
+      },
+    });
+  }, [setToastMessage, taxonomy]);
+
+  const [isDeleteDialogOpen, deleteDialogOpen, deleteDialogClose] = useToggle(false);
+  const [isExportModalOpen, exportModalOpen, exportModalClose] = useToggle(false);
+  const [isImportModalOpen, importModalOpen, importModalClose] = useToggle(false);
+  const [isManageOrgsModalOpen, manageOrgsModalOpen, manageOrgsModalClose] = useToggle(false);
+
+  /**
+    * @typedef {Object} MenuItem
+    * @property {string} title - The title of the menu item
+    * @property {() => void} action - The action to perform when the menu item is clicked
+    * @property {boolean} [show] - Whether or not to show the menu item
+    *
+    * @constant
+    * @type {Record<string, MenuItem>}
+    */
+  let menuItems = {
+    import: {
+      title: intl.formatMessage(messages.importMenu),
+      action: importModalOpen,
+      show: taxonomy.canChangeTaxonomy && !taxonomy.systemDefined,
+    },
+    export: {
+      title: intl.formatMessage(messages.exportMenu),
+      action: exportModalOpen,
+      show: true, // if we can view the taxonomy, we can export it
+    },
+    delete: {
+      title: intl.formatMessage(messages.deleteMenu),
+      action: deleteDialogOpen,
+      show: taxonomy.canDeleteTaxonomy && !taxonomy.systemDefined,
+    },
+    manageOrgs: {
+      title: intl.formatMessage(messages.manageOrgsMenu),
+      action: manageOrgsModalOpen,
+      show: taxonomy.canChangeTaxonomy,
+    },
+  };
+
+  // Remove hidden menu items
+  menuItems = pickBy(menuItems, (value) => value.show);
+
+  const renderModals = () => (
+    <>
+      {isDeleteDialogOpen && (
+        <DeleteDialog
+          isOpen={isDeleteDialogOpen}
+          onClose={deleteDialogClose}
+          onDelete={onDeleteTaxonomy}
+          taxonomyName={taxonomy.name}
+          tagsCount={taxonomy.tagsCount}
+        />
+      )}
+      {isExportModalOpen && (
+        <ExportModal
+          isOpen={isExportModalOpen}
+          onClose={exportModalClose}
+          taxonomyId={taxonomy.id}
+        />
+      )}
+      {isImportModalOpen && (
+        <ImportTagsWizard
+          taxonomy={taxonomy}
+          isOpen={isImportModalOpen}
+          onClose={importModalClose}
+          reimport
+        />
+      )}
+      {isManageOrgsModalOpen && (
+        <ManageOrgsModal
+          isOpen={isManageOrgsModalOpen}
+          onClose={manageOrgsModalClose}
+          taxonomyId={taxonomy.id}
+        />
+      )}
+    </>
+  );
+
+  const toggleProps = iconMenu ? {
+    as: IconButton,
+    src: MoreVert,
+    iconAs: Icon,
+  } : {
+    as: Button,
+  };
+
+  return (
+    <Dropdown id={`taxonomy-menu-${taxonomy.id}`} onToggle={(_isOpen, ev) => ev.preventDefault()}>
+      <Dropdown.Toggle
+        id={`taxonomy-menu-toggle-${taxonomy.id}`}
+        {...toggleProps}
+        variant="primary"
+        alt={intl.formatMessage(messages.actionsButtonAlt, { name: taxonomy.name })}
+        data-testid="taxonomy-menu-button"
+        disabled={Object.keys(menuItems).length === 0}
+      >
+        {intl.formatMessage(messages.actionsButtonLabel)}
+      </Dropdown.Toggle>
+      <Dropdown.Menu data-testid="taxonomy-menu">
+        {Object.keys(menuItems).map((key) => (
+          <Dropdown.Item
+            key={key}
+            data-testid={`taxonomy-menu-${key}`}
+            as="button" // Prevents <a> cannot appear as a descendant of <a> warning
+            onClick={
+              (e) => {
+                e.preventDefault();
+                menuItems[key].action();
+              }
+            }
+          >
+            {menuItems[key].title}
+          </Dropdown.Item>
+        ))}
+      </Dropdown.Menu>
+      {renderModals()}
+    </Dropdown>
+  );
+};
+
+TaxonomyMenu.propTypes = {
+  taxonomy: PropTypes.shape({
+    id: PropTypes.number.isRequired,
+    name: PropTypes.string.isRequired,
+    tagsCount: PropTypes.number.isRequired,
+    systemDefined: PropTypes.bool.isRequired,
+    canChangeTaxonomy: PropTypes.bool.isRequired,
+    canDeleteTaxonomy: PropTypes.bool.isRequired,
+  }).isRequired,
+  iconMenu: PropTypes.bool,
+};
+
+TaxonomyMenu.defaultProps = {
+  iconMenu: false,
+};
+
+export default TaxonomyMenu;
diff --git a/src/taxonomy/taxonomy-menu/TaxonomyMenu.test.tsx b/src/taxonomy/taxonomy-menu/TaxonomyMenu.test.tsx
new file mode 100644
index 0000000000..4c6f3d31fc
--- /dev/null
+++ b/src/taxonomy/taxonomy-menu/TaxonomyMenu.test.tsx
@@ -0,0 +1,298 @@
+import React, { useMemo } from 'react';
+
+import {
+  fireEvent,
+  initializeMocks,
+  render,
+  waitFor,
+} from '../../testUtils';
+import { TaxonomyContext } from '../common/context';
+import { deleteTaxonomy, getTaxonomy, getTaxonomyExportFile } from '../data/api';
+import { TaxonomyMenu } from '.';
+
+const taxonomyId = 1;
+const taxonomyName = 'Taxonomy 1';
+
+jest.mock('../data/api', () => ({
+  ...jest.requireActual('../data/api'),
+  getTaxonomyExportFile: jest.fn(),
+  deleteTaxonomy: jest.fn(),
+  getTaxonomy: jest.fn(),
+}));
+
+const mockSetToastMessage = jest.fn();
+
+/**
+ * @type {}
+ */
+const TaxonomyMenuComponent: React.FC<{
+  iconMenu: boolean,
+  systemDefined?: boolean,
+  canChangeTaxonomy?: boolean,
+  canDeleteTaxonomy?: boolean,
+}> = ({
+  iconMenu,
+  systemDefined = false,
+  canChangeTaxonomy = true,
+  canDeleteTaxonomy = true,
+}) => {
+  const context = useMemo(() => ({
+    toastMessage: null,
+    setToastMessage: mockSetToastMessage,
+    alertProps: null,
+    setAlertProps: null,
+  }), []);
+
+  return (
+    <TaxonomyContext.Provider value={context}>
+      <TaxonomyMenu
+        taxonomy={{
+          id: taxonomyId,
+          name: taxonomyName,
+          tagsCount: 0,
+          systemDefined,
+          canChangeTaxonomy,
+          canDeleteTaxonomy,
+        }}
+        iconMenu={iconMenu}
+      />
+    </TaxonomyContext.Provider>
+  );
+};
+
+describe.each([true, false])('<TaxonomyMenu iconMenu=%s />', (iconMenu) => {
+  beforeEach(async () => {
+    initializeMocks();
+  });
+
+  test('should open and close menu on button click', () => {
+    const { getByRole, getByTestId, queryByLabelText } = render(
+      <TaxonomyMenuComponent iconMenu={iconMenu} />,
+    );
+    const menuLabelText = 'Actions';
+    const menuAltText = `${taxonomyName} actions`;
+    const menuButtonText = iconMenu ? menuAltText : menuLabelText;
+
+    // Menu closed/doesn't exist yet
+    expect(queryByLabelText(menuLabelText)).not.toBeInTheDocument();
+
+    // Click on the menu button to open
+    fireEvent.click(getByRole('button', { name: menuButtonText }));
+
+    // Menu opened
+    expect(getByTestId('taxonomy-menu')).toBeVisible();
+
+    // Click on button again to close the menu
+    fireEvent.click(getByRole('button', { name: menuButtonText }));
+
+    // Menu closed
+    // Jest bug: toBeVisible() isn't checking opacity correctly
+    // expect(getByTestId('taxonomy-menu')).not.toBeVisible();
+    expect(getByTestId('taxonomy-menu').style.opacity).toEqual('0');
+    // TODO: the above should be getByLabelText(menuButtonText) but there is a conflict
+    // when iconMenu={true} because the <button> has aria-label in that case.
+
+    // Menu button still visible
+    expect(getByRole('button', { name: menuButtonText })).toBeVisible();
+  });
+
+  test('Shows menu actions that user is permitted', async () => {
+    const { findByTestId, getByTestId, queryByTestId } = render(
+      <TaxonomyMenuComponent
+        iconMenu={iconMenu}
+      />,
+    );
+
+    // Click on the menu button to open
+    fireEvent.click(await findByTestId('taxonomy-menu-button'));
+
+    // Menu opened
+    expect(getByTestId('taxonomy-menu')).toBeVisible();
+
+    // Ensure expected menu items are found
+    expect(queryByTestId('taxonomy-menu-export')).toBeInTheDocument();
+    expect(queryByTestId('taxonomy-menu-import')).toBeInTheDocument();
+    expect(queryByTestId('taxonomy-menu-manageOrgs')).toBeInTheDocument();
+    expect(queryByTestId('taxonomy-menu-delete')).toBeInTheDocument();
+  });
+
+  test('Hides menu actions that user is not permitted', async () => {
+    const { findByTestId, queryByTestId } = render(
+      <TaxonomyMenuComponent
+        iconMenu={iconMenu}
+        systemDefined={false}
+        canChangeTaxonomy={false}
+        canDeleteTaxonomy={false}
+      />,
+    );
+
+    // Click on the menu button to open
+    fireEvent.click(await findByTestId('taxonomy-menu-button'));
+
+    // Ensure expected menu items are found
+    expect(queryByTestId('taxonomy-menu-export')).toBeInTheDocument();
+    expect(queryByTestId('taxonomy-menu-import')).not.toBeInTheDocument();
+    expect(queryByTestId('taxonomy-menu-manageOrgs')).not.toBeInTheDocument();
+    expect(queryByTestId('taxonomy-menu-delete')).not.toBeInTheDocument();
+  });
+
+  test('Hides import/delete actions for system-defined taxonomies', () => {
+    const systemDefined = true;
+    const { getByTestId, queryByTestId } = render(
+      <TaxonomyMenuComponent
+        iconMenu={iconMenu}
+        systemDefined={systemDefined}
+      />,
+    );
+
+    // Click on the menu button to open
+    fireEvent.click(getByTestId('taxonomy-menu-button'));
+
+    // Ensure expected menu items are found
+    expect(queryByTestId('taxonomy-menu-export')).toBeInTheDocument();
+    expect(queryByTestId('taxonomy-menu-import')).not.toBeInTheDocument();
+    expect(queryByTestId('taxonomy-menu-manageOrgs')).toBeInTheDocument();
+    expect(queryByTestId('taxonomy-menu-delete')).not.toBeInTheDocument();
+  });
+
+  test('should open export modal on export menu click', async () => {
+    const { findByTestId, getByText, queryByText } = render(
+      <TaxonomyMenuComponent iconMenu={iconMenu} />,
+    );
+
+    // Modal closed
+    expect(queryByText('Select format to export')).not.toBeInTheDocument();
+
+    // Click on export menu
+    fireEvent.click(await findByTestId('taxonomy-menu-button'));
+    fireEvent.click(await findByTestId('taxonomy-menu-export'));
+
+    // Modal opened
+    expect(getByText('Select format to export')).toBeInTheDocument();
+
+    // Click on cancel button
+    fireEvent.click(getByText('Cancel'));
+
+    // Modal closed
+    expect(queryByText('Select format to export')).not.toBeInTheDocument();
+  });
+
+  test('should call import tags when menu click', async () => {
+    const { findByTestId, getByText } = render(<TaxonomyMenuComponent iconMenu={iconMenu} />);
+
+    // Click on import menu
+    fireEvent.click(await findByTestId('taxonomy-menu-button'));
+    fireEvent.click(await findByTestId('taxonomy-menu-import'));
+
+    expect(getByText('Update "Taxonomy 1"')).toBeInTheDocument();
+  });
+
+  test('should export a taxonomy', async () => {
+    const {
+      findByTestId, getByTestId, getByText, queryByText,
+    } = render(<TaxonomyMenuComponent iconMenu={iconMenu} />);
+
+    // Click on export menu
+    fireEvent.click(await findByTestId('taxonomy-menu-button'));
+    fireEvent.click(await findByTestId('taxonomy-menu-export'));
+
+    // Select JSON format and click on export
+    fireEvent.click(getByText('JSON file'));
+    fireEvent.click(getByTestId('export-button-1'));
+
+    // Modal closed
+    expect(queryByText('Select format to export')).not.toBeInTheDocument();
+    expect(getTaxonomyExportFile).toHaveBeenCalledWith(taxonomyId, 'json');
+  });
+
+  test('should open delete dialog on delete menu click', async () => {
+    const { findByTestId, getByText, queryByText } = render(
+      <TaxonomyMenuComponent iconMenu={iconMenu} />,
+    );
+
+    // Modal closed
+    expect(queryByText(`Delete "${taxonomyName}"`)).not.toBeInTheDocument();
+
+    // Click on delete menu
+    fireEvent.click(await findByTestId('taxonomy-menu-button'));
+    fireEvent.click(await findByTestId('taxonomy-menu-delete'));
+
+    // Modal opened
+    expect(getByText(`Delete "${taxonomyName}"`)).toBeInTheDocument();
+
+    // Click on cancel button
+    fireEvent.click(getByText('Cancel'));
+
+    // Modal closed
+    expect(queryByText(`Delete "${taxonomyName}"`)).not.toBeInTheDocument();
+  });
+
+  test('should delete a taxonomy', async () => {
+    const {
+      getByTestId, getByLabelText, findByTestId, queryByText,
+    } = render(<TaxonomyMenuComponent iconMenu={iconMenu} />);
+
+    // Click on delete menu
+    fireEvent.click(await findByTestId('taxonomy-menu-button'));
+    fireEvent.click(await findByTestId('taxonomy-menu-delete'));
+
+    const deleteButton = getByTestId('delete-button');
+
+    // The delete button must to be disabled
+    expect(deleteButton).toBeDisabled();
+
+    // Testing delete button enabled/disabled changes
+    const input = getByLabelText('Type DELETE to confirm');
+    fireEvent.change(input, { target: { value: 'DELETE_INVALID' } });
+    expect(deleteButton).toBeDisabled();
+    fireEvent.change(input, { target: { value: 'DELETE' } });
+    expect(deleteButton).toBeEnabled();
+
+    // @ts-ignore
+    deleteTaxonomy.mockResolvedValueOnce({});
+
+    // Click on delete button
+    fireEvent.click(deleteButton);
+
+    // Modal closed
+    expect(queryByText(`Delete "${taxonomyName}"`)).not.toBeInTheDocument();
+
+    await waitFor(async () => {
+      expect(deleteTaxonomy).toBeCalledTimes(1);
+    });
+
+    // Toast message shown
+    expect(mockSetToastMessage).toBeCalledWith(`"${taxonomyName}" deleted`);
+  });
+
+  it('should open manage orgs dialog menu click', async () => {
+    const {
+      findByTestId, findByText, getByText, queryByText,
+    } = render(<TaxonomyMenuComponent iconMenu={iconMenu} />);
+
+    // We need to provide a taxonomy or the modal will not open
+    // @ts-ignore
+    getTaxonomy.mockResolvedValue({
+      id: 1,
+      name: 'Taxonomy 1',
+      orgs: [],
+      allOrgs: true,
+    });
+
+    // Modal closed
+    expect(queryByText('Assign to organizations')).not.toBeInTheDocument();
+
+    // Click on delete menu
+    fireEvent.click(await findByTestId('taxonomy-menu-button'));
+    fireEvent.click(await findByTestId('taxonomy-menu-manageOrgs'));
+
+    // Modal opened
+    expect(await findByText('Assign to organizations')).toBeInTheDocument();
+
+    // Click on cancel button
+    fireEvent.click(getByText('Cancel'));
+
+    // Modal closed
+    expect(queryByText('Assign to organizations')).not.toBeInTheDocument();
+  });
+});
diff --git a/src/taxonomy/taxonomy-menu/index.ts b/src/taxonomy/taxonomy-menu/index.ts
new file mode 100644
index 0000000000..ca59b994a5
--- /dev/null
+++ b/src/taxonomy/taxonomy-menu/index.ts
@@ -0,0 +1 @@
+export { default as TaxonomyMenu } from './TaxonomyMenu';
diff --git a/src/taxonomy/taxonomy-menu/messages.ts b/src/taxonomy/taxonomy-menu/messages.ts
new file mode 100644
index 0000000000..8e8daa8e74
--- /dev/null
+++ b/src/taxonomy/taxonomy-menu/messages.ts
@@ -0,0 +1,34 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  actionsButtonLabel: {
+    id: 'course-authoring.taxonomy-menu.action.button.label',
+    defaultMessage: 'Actions',
+  },
+  actionsButtonAlt: {
+    id: 'course-authoring.taxonomy-menu.action.button.alt',
+    defaultMessage: '{name} actions',
+  },
+  importMenu: {
+    id: 'course-authoring.taxonomy-menu.import.label',
+    defaultMessage: 'Re-import',
+  },
+  manageOrgsMenu: {
+    id: 'course-authoring.taxonomy-menu.assign-orgs.label',
+    defaultMessage: 'Manage Organizations',
+  },
+  exportMenu: {
+    id: 'course-authoring.taxonomy-menu.export.label',
+    defaultMessage: 'Export',
+  },
+  deleteMenu: {
+    id: 'course-authoring.taxonomy-menu.delete.label',
+    defaultMessage: 'Delete',
+  },
+  taxonomyDeleteToast: {
+    id: 'course-authoring.taxonomy-list.toast.delete',
+    defaultMessage: '"{name}" deleted',
+  },
+});
+
+export default messages;
diff --git a/src/testUtils.tsx b/src/testUtils.tsx
new file mode 100644
index 0000000000..b9fdf8e611
--- /dev/null
+++ b/src/testUtils.tsx
@@ -0,0 +1,218 @@
+/* istanbul ignore file */
+/* eslint-disable react/prop-types */
+/* eslint-disable import/no-extraneous-dependencies */
+/**
+ * Helper functions for writing tests.
+ */
+import React from 'react';
+import { AxiosError } from 'axios';
+import { jest } from '@jest/globals';
+import type { Store } from 'redux';
+import { initializeMockApp } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { AppProvider } from '@edx/frontend-platform/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { render, type RenderResult } from '@testing-library/react';
+import MockAdapter from 'axios-mock-adapter';
+import {
+  generatePath,
+  MemoryRouter,
+  MemoryRouterProps,
+  Route,
+  Routes,
+} from 'react-router-dom';
+
+import { ToastContext, type ToastContextData } from './generic/toast-context';
+import initializeReduxStore from './store';
+import { getApiWaffleFlagsUrl } from './data/api';
+
+/** @deprecated Use React Query and/or regular React Context instead of redux */
+let reduxStore: Store;
+let queryClient: QueryClient;
+let axiosMock: MockAdapter;
+
+/** To use this: `const { mockShowToast } = initializeMocks()` and `expect(mockShowToast).toHaveBeenCalled()` */
+let mockToastContext: ToastContextData = {
+  showToast: jest.fn(),
+  closeToast: jest.fn(),
+  toastAction: undefined,
+  toastMessage: null,
+};
+
+export interface RouteOptions {
+  /** The URL path, like '/libraries/:libraryId' */
+  path?: string;
+  /** The URL parameters, like {libraryId: 'lib:org:123'} */
+  params?: Record<string, string>;
+  /** and/or instead of specifying path and params, specify MemoryRouterProps */
+  routerProps?: MemoryRouterProps;
+}
+
+export interface WrapperOptions {
+  extraWrapper?: React.FunctionComponent<{ children: React.ReactNode; }>;
+}
+
+/**
+ * This component works together with the custom `render()` method we have in
+ * this file to provide whatever react-router context you need for your
+ * component.
+ *
+ * In the simplest case, you don't need to worry about the router at all, so
+ * just render your component using `render(<TheComponent />)`.
+ *
+ * The next simplest way to use it is to specify `path` (the route matching rule
+ * that is normally used to determine when to show the component or its parent
+ * page) and `params` like this:
+ *
+ * ```
+ * render(<LibraryLayout />, { path: '/library/:libraryId/*', params: { libraryId: 'lib:Axim:testlib' } });
+ * ```
+ *
+ * In this case, components that use the `useParams` hook will get the right
+ * library ID, and we don't even have to mock anything.
+ *
+ * In other cases, such as when you have routes inside routes, you'll need to
+ * set the router's `initialEntries` (URL history) prop yourself, like this:
+ *
+ * ```
+ * render(<LibraryLayout />, {
+ *   path: '/library/:libraryId/*',
+ *   // The root component is mounted on the above path, as it is in the "real"
+ *   // MFE. But to access the 'settings' sub-route/component for this test, we
+ *   // need tospecify the URL like this:
+ *   routerProps: { initialEntries: [`/library/${libraryId}/settings`] },
+ * });
+ * ```
+ */
+const RouterAndRoute: React.FC<RouteOptions> = ({
+  children,
+  path = '/',
+  params = {},
+  routerProps = {},
+}) => {
+  if (Object.entries(params).length > 0 || path !== '/') {
+    const newRouterProps = { ...routerProps };
+    if (!routerProps.initialEntries) {
+      // Substitute the params into the URL so '/library/:libraryId' becomes '/library/lib:org:123'
+      let pathWithParams = generatePath(path, params);
+      if (pathWithParams.endsWith('/*')) {
+        // Some routes (that contain child routes) need to end with /* in the <Route> but not in the router
+        pathWithParams = pathWithParams.substring(0, pathWithParams.length - 1);
+      }
+      newRouterProps.initialEntries = [pathWithParams];
+    }
+    return (
+      <MemoryRouter {...newRouterProps}>
+        <Routes>
+          <Route path={path} element={children} />
+        </Routes>
+      </MemoryRouter>
+    );
+  }
+  return (
+    <MemoryRouter {...routerProps}>{children}</MemoryRouter>
+  );
+};
+
+function makeWrapper({ extraWrapper, ...routeArgs }: WrapperOptions & RouteOptions) {
+  const AllTheProviders = ({ children }) => (
+    <AppProvider store={reduxStore} wrapWithRouter={false}>
+      <IntlProvider locale="en" messages={{}}>
+        <QueryClientProvider client={queryClient}>
+          <ToastContext.Provider value={mockToastContext}>
+            <RouterAndRoute {...routeArgs}>
+              {extraWrapper ? React.createElement(extraWrapper, undefined, children) : children}
+            </RouterAndRoute>
+          </ToastContext.Provider>
+        </QueryClientProvider>
+      </IntlProvider>
+    </AppProvider>
+  );
+  return AllTheProviders;
+}
+
+/**
+ * Same as render() from `@testing-library/react` but this one provides all the
+ * wrappers our React components need to render properly.
+ */
+function customRender(ui: React.ReactElement, options: WrapperOptions & RouteOptions = {}): RenderResult {
+  return render(ui, { wrapper: makeWrapper(options) });
+}
+
+const defaultUser = {
+  userId: 3,
+  username: 'abc123',
+  administrator: true,
+  roles: [],
+} as const;
+
+/**
+ * Initialize common mocks that many of our React components will require.
+ *
+ * This should be called within each test case, or in `beforeEach()`.
+ *
+ * Returns the new `axiosMock` in case you need to mock out axios requests.
+ */
+export function initializeMocks({ user = defaultUser, initialState = undefined }: {
+  user?: { userId: number, username: string },
+  initialState?: Record<string, any>, // TODO: proper typing for our redux state
+} = {}) {
+  initializeMockApp({
+    authenticatedUser: user,
+  });
+  reduxStore = initializeReduxStore(initialState as any);
+  queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  });
+  axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+
+  axiosMock
+    .onGet(getApiWaffleFlagsUrl())
+    .reply(200, {});
+
+  // Reset `mockToastContext` for this current test
+  mockToastContext = {
+    showToast: jest.fn(),
+    closeToast: jest.fn(),
+    toastMessage: null,
+    toastAction: undefined,
+  };
+
+  // Clear the call counts etc. of all mocks. This doesn't remove the mock's effects; just clears their history.
+  jest.clearAllMocks();
+
+  return {
+    reduxStore,
+    axiosMock,
+    mockShowToast: mockToastContext.showToast,
+    mockToastAction: mockToastContext.toastAction,
+  };
+}
+
+export * from '@testing-library/react';
+export { customRender as render };
+
+/** Simulate a real Axios error (such as we'd see in response to a 404) */
+export function createAxiosError({ code, message, path }: { code: number, message: string, path: string }) {
+  const request = { path };
+  const config = {};
+  const error = new AxiosError(
+    `Mocked request failed with status code ${code}`,
+    AxiosError.ERR_BAD_RESPONSE,
+    config,
+    request,
+    {
+      status: code,
+      data: { detail: message },
+      statusText: 'error',
+      config,
+      headers: {},
+    },
+  );
+  return error;
+}
diff --git a/src/textbooks/Textbook.test.jsx b/src/textbooks/Textbook.test.jsx
new file mode 100644
index 0000000000..60af1e3026
--- /dev/null
+++ b/src/textbooks/Textbook.test.jsx
@@ -0,0 +1,103 @@
+import MockAdapter from 'axios-mock-adapter';
+import { cleanup, render, waitFor } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { AppProvider } from '@edx/frontend-platform/react';
+import { initializeMockApp } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import userEvent from '@testing-library/user-event';
+
+import { RequestStatus } from '../data/constants';
+import initializeStore from '../store';
+import { executeThunk } from '../utils';
+import { getTextbooksApiUrl } from './data/api';
+import { fetchTextbooksQuery } from './data/thunk';
+import { textbooksMock } from './__mocks__';
+import { Textbooks } from '.';
+import messages from './messages';
+
+let axiosMock;
+let store;
+const courseId = 'course-v1:org+101+101';
+const emptyTextbooksMock = { textbooks: [] };
+
+const renderComponent = () => render(
+  <AppProvider store={store}>
+    <IntlProvider locale="en">
+      <Textbooks courseId={courseId} />
+    </IntlProvider>
+  </AppProvider>,
+);
+
+describe('<Textbooks />', () => {
+  beforeEach(async () => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+
+    store = initializeStore();
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+    axiosMock
+      .onGet(getTextbooksApiUrl(courseId))
+      .reply(200, textbooksMock);
+    await executeThunk(fetchTextbooksQuery(courseId), store.dispatch);
+  });
+
+  it('renders Textbooks component correctly', async () => {
+    const {
+      getByText, getByRole, getAllByTestId, queryByTestId,
+    } = renderComponent();
+
+    await waitFor(() => {
+      expect(getByText(messages.headingTitle.defaultMessage)).toBeInTheDocument();
+      expect(getByText(messages.breadcrumbContent.defaultMessage)).toBeInTheDocument();
+      expect(getByText(messages.breadcrumbPagesAndResources.defaultMessage)).toBeInTheDocument();
+      expect(getByRole('button', { name: messages.newTextbookButton.defaultMessage })).toBeInTheDocument();
+      expect(getAllByTestId('textbook-card')).toHaveLength(2);
+      expect(queryByTestId('textbooks-empty-placeholder')).not.toBeInTheDocument();
+    });
+  });
+
+  it('renders textbooks form when "New textbooks" button is clicked', async () => {
+    const { getByTestId, getByRole } = renderComponent();
+
+    await waitFor(() => {
+      const newTextbookButton = getByRole('button', { name: messages.newTextbookButton.defaultMessage });
+      userEvent.click(newTextbookButton);
+      expect(getByTestId('textbook-form')).toBeInTheDocument();
+    });
+  });
+
+  it('renders Textbooks component with empty placeholder correctly', async () => {
+    cleanup();
+    axiosMock
+      .onGet(getTextbooksApiUrl(courseId))
+      .reply(200, emptyTextbooksMock);
+
+    const { getByTestId, queryAllByTestId } = renderComponent();
+
+    await waitFor(() => {
+      expect(getByTestId('textbooks-empty-placeholder')).toBeInTheDocument();
+      expect(queryAllByTestId('textbook-card')).toHaveLength(0);
+    });
+  });
+
+  it('displays an alert and sets status to FAILED when API responds with 403', async () => {
+    axiosMock
+      .onGet(getTextbooksApiUrl(courseId))
+      .reply(403);
+    await executeThunk(fetchTextbooksQuery(courseId), store.dispatch);
+    const { getByTestId } = renderComponent();
+
+    await waitFor(() => {
+      expect(getByTestId('connectionErrorAlert')).toBeInTheDocument();
+      expect(store.getState().textbooks.loadingStatus).toBe(
+        RequestStatus.FAILED,
+      );
+    });
+  });
+});
diff --git a/src/textbooks/Textbooks.jsx b/src/textbooks/Textbooks.jsx
new file mode 100644
index 0000000000..b2c0607976
--- /dev/null
+++ b/src/textbooks/Textbooks.jsx
@@ -0,0 +1,163 @@
+import PropTypes from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import {
+  Breadcrumb,
+  Button,
+  Container,
+  Layout,
+  Row,
+} from '@openedx/paragon';
+import { Add as AddIcon } from '@openedx/paragon/icons';
+import { useSelector } from 'react-redux';
+import { Helmet } from 'react-helmet';
+import { Link } from 'react-router-dom';
+
+import { SavingErrorAlert } from '../generic/saving-error-alert';
+import { getProcessingNotification } from '../generic/processing-notification/data/selectors';
+import { useModel } from '../generic/model-store';
+import { LoadingSpinner } from '../generic/Loading';
+import SubHeader from '../generic/sub-header/SubHeader';
+import ConnectionErrorAlert from '../generic/ConnectionErrorAlert';
+import ProcessingNotification from '../generic/processing-notification';
+import EmptyPlaceholder from './empty-placeholder/EmptyPlaceholder';
+import TextbookCard from './textbook-card/TextbooksCard';
+import TextbookSidebar from './textbook-sidebar/TextbookSidebar';
+import TextbookForm from './textbook-form/TextbookForm';
+import { useTextbooks } from './hooks';
+import { getTextbookFormInitialValues } from './utils';
+import messages from './messages';
+import { getWaffleFlags } from '../data/selectors';
+
+const Textbooks = ({ courseId }) => {
+  const intl = useIntl();
+  const waffleFlags = useSelector(getWaffleFlags);
+
+  const courseDetails = useModel('courseDetails', courseId);
+
+  const {
+    textbooks,
+    isLoading,
+    isLoadingFailed,
+    breadcrumbs,
+    errorMessage,
+    savingStatus,
+    isTextbookFormOpen,
+    openTextbookForm,
+    closeTextbookForm,
+    handleTextbookFormSubmit,
+    handleSavingStatusDispatch,
+    handleTextbookEditFormSubmit,
+    handleTextbookDeleteSubmit,
+  } = useTextbooks(courseId, waffleFlags);
+
+  const {
+    isShow: showProcessingNotification,
+    title: processingNotificationTitle,
+  } = useSelector(getProcessingNotification);
+
+  if (isLoadingFailed) {
+    return (
+      <Container size="xl" className="course-unit px-4 mt-4">
+        <ConnectionErrorAlert />
+      </Container>
+    );
+  }
+
+  if (isLoading) {
+    return (
+      <Row className="m-0 mt-4 justify-content-center">
+        <LoadingSpinner />
+      </Row>
+    );
+  }
+
+  return (
+    <>
+      <Helmet>
+        <title>
+          {`${courseDetails?.name} | ${intl.formatMessage(messages.headingTitle)}`}
+        </title>
+      </Helmet>
+      <Container size="xl" className="px-4">
+        <section className="mb-4 mt-5">
+          <SubHeader
+            title={intl.formatMessage(messages.headingTitle)}
+            breadcrumbs={(
+              <Breadcrumb
+                linkAs={Link}
+                ariaLabel={intl.formatMessage(messages.breadcrumbAriaLabel)}
+                links={breadcrumbs}
+              />
+            )}
+            headerActions={(
+              <Button
+                iconBefore={AddIcon}
+                onClick={openTextbookForm}
+                disabled={isTextbookFormOpen}
+              >
+                {intl.formatMessage(messages.newTextbookButton)}
+              </Button>
+            )}
+          />
+          <Layout
+            lg={[{ span: 9 }, { span: 3 }]}
+            md={[{ span: 9 }, { span: 3 }]}
+            sm={[{ span: 12 }, { span: 12 }]}
+            xs={[{ span: 12 }, { span: 12 }]}
+            xl={[{ span: 9 }, { span: 3 }]}
+          >
+            <Layout.Element>
+              <article>
+                <section className="textbook-section">
+                  <div className="pt-4">
+                    {textbooks.length ? textbooks.map((textbook, index) => (
+                      <TextbookCard
+                        key={textbook.id}
+                        textbook={textbook}
+                        courseId={courseId}
+                        handleSavingStatusDispatch={handleSavingStatusDispatch}
+                        onEditSubmit={handleTextbookEditFormSubmit}
+                        onDeleteSubmit={handleTextbookDeleteSubmit}
+                        textbookIndex={index}
+                      />
+                    )) : (
+                      !isTextbookFormOpen && <EmptyPlaceholder onCreateNewTextbook={openTextbookForm} />
+                    )}
+                    {isTextbookFormOpen && (
+                      <TextbookForm
+                        closeTextbookForm={closeTextbookForm}
+                        initialFormValues={getTextbookFormInitialValues()}
+                        onSubmit={handleTextbookFormSubmit}
+                        onSavingStatus={handleSavingStatusDispatch}
+                        courseId={courseId}
+                      />
+                    )}
+                  </div>
+                </section>
+              </article>
+            </Layout.Element>
+            <Layout.Element>
+              <TextbookSidebar courseId={courseId} />
+            </Layout.Element>
+          </Layout>
+        </section>
+      </Container>
+      <ProcessingNotification
+        isShow={showProcessingNotification}
+        title={processingNotificationTitle}
+      />
+      <div className="alert-toast">
+        <SavingErrorAlert
+          savingStatus={savingStatus}
+          errorMessage={errorMessage}
+        />
+      </div>
+    </>
+  );
+};
+
+Textbooks.propTypes = {
+  courseId: PropTypes.string.isRequired,
+};
+
+export default Textbooks;
diff --git a/src/textbooks/Textbooks.scss b/src/textbooks/Textbooks.scss
new file mode 100644
index 0000000000..e8022dd28d
--- /dev/null
+++ b/src/textbooks/Textbooks.scss
@@ -0,0 +1,7 @@
+@import "./empty-placeholder/EmptyPlaceholder";
+@import "./textbook-card/TextbookCard";
+@import "./textbook-form/TextbookForm";
+
+.alert-toast {
+  z-index: $zindex-tooltip !important;
+}
diff --git a/src/textbooks/__mocks__/index.js b/src/textbooks/__mocks__/index.js
new file mode 100644
index 0000000000..4394d5a362
--- /dev/null
+++ b/src/textbooks/__mocks__/index.js
@@ -0,0 +1 @@
+export { default as textbooksMock } from './textbooksMock';
diff --git a/src/textbooks/__mocks__/textbooksMock.js b/src/textbooks/__mocks__/textbooksMock.js
new file mode 100644
index 0000000000..17b456c9e2
--- /dev/null
+++ b/src/textbooks/__mocks__/textbooksMock.js
@@ -0,0 +1,28 @@
+module.exports = {
+  textbooks: [
+    {
+      tabTitle: 'Textbook Name 1',
+      chapters: [
+        {
+          title: 'Chapter 1',
+          url: '/static/Present-Perfect.pdf',
+        },
+        {
+          title: 'Chapter 2',
+          url: '/static/Present-Simple.pdf',
+        },
+      ],
+      id: '1',
+    },
+    {
+      tabTitle: 'Textbook Name 2',
+      chapters: [
+        {
+          title: 'Chapter 1',
+          url: '/static/Present-Perfect.pdf',
+        },
+      ],
+      id: '2',
+    },
+  ],
+};
diff --git a/src/textbooks/data/api.js b/src/textbooks/data/api.js
new file mode 100644
index 0000000000..3200d88e0c
--- /dev/null
+++ b/src/textbooks/data/api.js
@@ -0,0 +1,62 @@
+import { camelCaseObject, getConfig } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { omit } from 'lodash';
+
+const API_PATH_PATTERN = 'textbooks';
+const getStudioBaseUrl = () => getConfig().STUDIO_BASE_URL;
+
+export const getTextbooksApiUrl = (courseId) => `${getStudioBaseUrl()}/api/contentstore/v1/${API_PATH_PATTERN}/${courseId}`;
+export const getUpdateTextbooksApiUrl = (courseId) => `${getStudioBaseUrl()}/${API_PATH_PATTERN}/${courseId}`;
+export const getEditTextbooksApiUrl = (courseId, textbookId) => `${getStudioBaseUrl()}/${API_PATH_PATTERN}/${courseId}/${textbookId}`;
+
+/**
+ * Get textbooks for course.
+ * @param {string} courseId
+ * @returns {Promise<Object>}
+ */
+export async function getTextbooks(courseId) {
+  const { data } = await getAuthenticatedHttpClient()
+    .get(getTextbooksApiUrl(courseId));
+
+  return camelCaseObject(data);
+}
+
+/**
+ * Create new textbook for course.
+ * @param {string} courseId
+ * @param {tab_title: string, chapters: Array<[title: string: url: string]>} textbook
+ * @returns {Promise<Object>}
+ */
+export async function createTextbook(courseId, textbook) {
+  const { data } = await getAuthenticatedHttpClient()
+    .post(getUpdateTextbooksApiUrl(courseId), textbook);
+
+  return camelCaseObject(data);
+}
+
+/**
+ * Edit textbook for course.
+ * @param {string} courseId
+ * @param {tab_title: string, id: string, chapters: Array<[title: string: url: string]>} textbook
+ * @param {string} textbookId
+ * @returns {Promise<Object>}
+ */
+export async function editTextbook(courseId, textbook) {
+  const { data } = await getAuthenticatedHttpClient()
+    .put(getEditTextbooksApiUrl(courseId, textbook.id), omit(textbook, ['id']));
+
+  return camelCaseObject(data);
+}
+
+/**
+ * Edit textbook for course.
+ * @param {string} courseId
+ * @param {string} textbookId
+ * @returns {Promise<Object>}
+ */
+export async function deleteTextbook(courseId, textbookId) {
+  const { data } = await getAuthenticatedHttpClient()
+    .delete(getEditTextbooksApiUrl(courseId, textbookId));
+
+  return camelCaseObject(data);
+}
diff --git a/src/textbooks/data/api.test.js b/src/textbooks/data/api.test.js
new file mode 100644
index 0000000000..1f773cb23d
--- /dev/null
+++ b/src/textbooks/data/api.test.js
@@ -0,0 +1,82 @@
+import MockAdapter from 'axios-mock-adapter';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { initializeMockApp } from '@edx/frontend-platform';
+
+import { textbooksMock } from 'CourseAuthoring/textbooks/__mocks__';
+import {
+  getTextbooks,
+  createTextbook,
+  editTextbook,
+  deleteTextbook,
+  getTextbooksApiUrl,
+  getUpdateTextbooksApiUrl,
+  getEditTextbooksApiUrl,
+} from './api';
+
+let axiosMock;
+const courseId = 'course-v1:org+101+101';
+
+describe('getTextbooks', () => {
+  beforeEach(async () => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+    axiosMock
+      .onGet(getTextbooksApiUrl(courseId))
+      .reply(200, textbooksMock);
+  });
+
+  afterEach(() => {
+    axiosMock.reset();
+  });
+
+  it('should fetch textbooks for a course', async () => {
+    const textbooksData = [{ id: 1, title: 'Textbook 1' }, { id: 2, title: 'Textbook 2' }];
+    axiosMock.onGet(getTextbooksApiUrl(courseId)).reply(200, textbooksData);
+
+    const result = await getTextbooks(courseId);
+
+    expect(result).toEqual(textbooksData);
+  });
+});
+
+describe('createTextbook', () => {
+  it('should create a new textbook for a course', async () => {
+    const textbookData = { title: 'New Textbook', chapters: [] };
+    axiosMock.onPost(getUpdateTextbooksApiUrl(courseId)).reply(200, textbookData);
+
+    const result = await createTextbook(courseId, textbookData);
+
+    expect(result).toEqual(textbookData);
+  });
+});
+
+describe('editTextbook', () => {
+  it('should edit an existing textbook for a course', async () => {
+    const textbookId = '1';
+    const editedTextbookData = { id: '1', title: 'Edited Textbook', chapters: [] };
+    axiosMock.onPut(getEditTextbooksApiUrl(courseId, textbookId)).reply(200, editedTextbookData);
+
+    const result = await editTextbook(courseId, editedTextbookData);
+
+    expect(result).toEqual(editedTextbookData);
+  });
+});
+
+describe('deleteTextbook', () => {
+  it('should delete an existing textbook for a course', async () => {
+    const textbookId = '1';
+    axiosMock.onDelete(getEditTextbooksApiUrl(courseId, textbookId)).reply(200, {});
+
+    const result = await deleteTextbook(courseId, textbookId);
+
+    expect(result).toEqual({});
+  });
+});
diff --git a/src/textbooks/data/selectors.js b/src/textbooks/data/selectors.js
new file mode 100644
index 0000000000..db2acc36da
--- /dev/null
+++ b/src/textbooks/data/selectors.js
@@ -0,0 +1,5 @@
+export const getTextbooksData = (state) => state.textbooks.textbooks;
+export const getLoadingStatus = (state) => state.textbooks.loadingStatus;
+export const getSavingStatus = (state) => state.textbooks.savingStatus;
+export const getErrorMessage = (state) => state.textbooks.errorMessage;
+export const getCurrentTextbookId = (state) => state.textbooks.currentTextbookId;
diff --git a/src/textbooks/data/slice.js b/src/textbooks/data/slice.js
new file mode 100644
index 0000000000..d7622e42ee
--- /dev/null
+++ b/src/textbooks/data/slice.js
@@ -0,0 +1,54 @@
+/* eslint-disable no-param-reassign */
+import { createSlice } from '@reduxjs/toolkit';
+
+import { RequestStatus } from '../../data/constants';
+
+const slice = createSlice({
+  name: 'textbooks',
+  initialState: {
+    savingStatus: '',
+    loadingStatus: RequestStatus.IN_PROGRESS,
+    textbooks: [],
+    errorMessage: '',
+    currentTextbookId: '',
+  },
+  reducers: {
+    fetchTextbooks: (state, { payload }) => {
+      state.textbooks = payload.textbooks;
+    },
+    updateLoadingStatus: (state, { payload }) => {
+      state.loadingStatus = payload.status;
+    },
+    updateSavingStatus: (state, { payload }) => {
+      const { status, errorMessage } = payload;
+      state.savingStatus = status;
+      state.errorMessage = errorMessage;
+    },
+    createTextbookSuccess: (state, { payload }) => {
+      state.textbooks = [...state.textbooks, payload];
+    },
+    editTextbookSuccess: (state, { payload }) => {
+      state.currentTextbookId = payload.id;
+      state.textbooks = state.textbooks.map((textbook) => {
+        if (textbook.id === payload.id) {
+          return payload;
+        }
+        return textbook;
+      });
+    },
+    deleteTextbookSuccess: (state, { payload }) => {
+      state.textbooks = state.textbooks.filter(({ id }) => id !== payload);
+    },
+  },
+});
+
+export const {
+  fetchTextbooks,
+  updateLoadingStatus,
+  updateSavingStatus,
+  createTextbookSuccess,
+  editTextbookSuccess,
+  deleteTextbookSuccess,
+} = slice.actions;
+
+export const { reducer } = slice;
diff --git a/src/textbooks/data/slice.test.jsx b/src/textbooks/data/slice.test.jsx
new file mode 100644
index 0000000000..95ed0cba35
--- /dev/null
+++ b/src/textbooks/data/slice.test.jsx
@@ -0,0 +1,118 @@
+import {
+  reducer,
+  fetchTextbooks,
+  updateLoadingStatus,
+  updateSavingStatus,
+  createTextbookSuccess,
+  editTextbookSuccess,
+  deleteTextbookSuccess,
+} from './slice';
+
+const initialState = {
+  savingStatus: '',
+  loadingStatus: 'IN_PROGRESS',
+  textbooks: [],
+  currentTextbookId: '',
+};
+
+const textbooks = [
+  {
+    tabTitle: 'Textbook Name 1',
+    chapters: [
+      {
+        title: 'Chapter 1',
+        url: '/static/Present-Perfect.pdf',
+      },
+      {
+        title: 'Chapter 2',
+        url: '/static/Present-Simple.pdf',
+      },
+    ],
+    id: '1',
+  },
+  {
+    tabTitle: 'Textbook Name 2',
+    chapters: [
+      {
+        title: 'Chapter 1',
+        url: '/static/Present-Perfect.pdf',
+      },
+    ],
+    id: '2',
+  },
+];
+
+describe('textbooks slice', () => {
+  it('should handle fetchTextbooks', () => {
+    const nextState = reducer(initialState, fetchTextbooks({ textbooks }));
+
+    expect(nextState.textbooks).toEqual(textbooks);
+  });
+
+  it('should handle updateLoadingStatus', () => {
+    const nextState = reducer(initialState, updateLoadingStatus({ status: 'SUCCESS' }));
+
+    expect(nextState.loadingStatus).toEqual('SUCCESS');
+  });
+
+  it('should handle updateSavingStatus', () => {
+    const nextState = reducer(initialState, updateSavingStatus({ status: 'ERROR' }));
+
+    expect(nextState.savingStatus).toEqual('ERROR');
+  });
+
+  it('should handle createTextbookSuccess', () => {
+    const newTextbook = {
+      tabTitle: 'New Textbook',
+      chapters: [
+        {
+          title: 'Chapter 1',
+          url: '/static/New-Textbook-Chapter-1.pdf',
+        },
+      ],
+      id: '3',
+    };
+    const nextState = reducer(initialState, createTextbookSuccess(newTextbook));
+
+    expect(nextState.textbooks).toContainEqual(newTextbook);
+  });
+
+  it('should handle editTextbookSuccess', () => {
+    const newInitialState = {
+      savingStatus: '',
+      loadingStatus: 'IN_PROGRESS',
+      textbooks,
+      currentTextbookId: '',
+    };
+    const editedTextbook = {
+      tabTitle: 'Edited Textbook Name 1',
+      chapters: [
+        {
+          title: 'Chapter 1',
+          url: '/static/Edited-Chapter-1.pdf',
+        },
+        {
+          title: 'Chapter 2',
+          url: '/static/Edited-Chapter-2.pdf',
+        },
+      ],
+      id: '1',
+    };
+    const nextState = reducer(newInitialState, editTextbookSuccess(editedTextbook));
+
+    expect(nextState.textbooks).toContainEqual(editedTextbook);
+  });
+
+  it('should handle deleteTextbookSuccess', () => {
+    const newInitialState = {
+      savingStatus: '',
+      loadingStatus: 'IN_PROGRESS',
+      textbooks,
+      currentTextbookId: '',
+    };
+    const textbookIdToDelete = '1';
+    const nextState = reducer(newInitialState, deleteTextbookSuccess(textbookIdToDelete));
+
+    expect(nextState.textbooks.some((textbook) => textbook.id === textbookIdToDelete)).toBe(false);
+  });
+});
diff --git a/src/textbooks/data/thunk.js b/src/textbooks/data/thunk.js
new file mode 100644
index 0000000000..9d3538a811
--- /dev/null
+++ b/src/textbooks/data/thunk.js
@@ -0,0 +1,86 @@
+import {
+  hideProcessingNotification,
+  showProcessingNotification,
+} from '../../generic/processing-notification/data/slice';
+import { handleResponseErrors } from '../../generic/saving-error-alert';
+import { RequestStatus } from '../../data/constants';
+import { NOTIFICATION_MESSAGES } from '../../constants';
+import {
+  fetchTextbooks,
+  updateLoadingStatus,
+  updateSavingStatus,
+  createTextbookSuccess,
+  editTextbookSuccess,
+  deleteTextbookSuccess,
+} from './slice';
+import {
+  getTextbooks,
+  createTextbook,
+  editTextbook,
+  deleteTextbook,
+} from './api';
+
+export function fetchTextbooksQuery(courseId) {
+  return async (dispatch) => {
+    dispatch(updateLoadingStatus({ status: RequestStatus.IN_PROGRESS }));
+
+    try {
+      const { textbooks } = await getTextbooks(courseId);
+      dispatch(fetchTextbooks({ textbooks }));
+      dispatch(updateLoadingStatus({ status: RequestStatus.SUCCESSFUL }));
+    } catch (error) {
+      dispatch(updateLoadingStatus({ status: RequestStatus.FAILED }));
+    }
+  };
+}
+
+export function createTextbookQuery(courseId, textbook) {
+  return async (dispatch) => {
+    dispatch(updateSavingStatus({ status: RequestStatus.IN_PROGRESS }));
+    dispatch(showProcessingNotification(NOTIFICATION_MESSAGES.saving));
+
+    try {
+      const data = await createTextbook(courseId, textbook);
+      dispatch(createTextbookSuccess(data));
+      dispatch(updateSavingStatus({ status: RequestStatus.SUCCESSFUL }));
+    } catch (error) {
+      handleResponseErrors(error, dispatch, updateSavingStatus);
+    } finally {
+      dispatch(hideProcessingNotification());
+    }
+  };
+}
+
+export function editTextbookQuery(courseId, textbook) {
+  return async (dispatch) => {
+    dispatch(updateSavingStatus({ status: RequestStatus.IN_PROGRESS }));
+    dispatch(showProcessingNotification(NOTIFICATION_MESSAGES.saving));
+
+    try {
+      const data = await editTextbook(courseId, textbook);
+      dispatch(editTextbookSuccess(data));
+      dispatch(updateSavingStatus({ status: RequestStatus.SUCCESSFUL }));
+    } catch (error) {
+      handleResponseErrors(error, dispatch, updateSavingStatus);
+    } finally {
+      dispatch(hideProcessingNotification());
+    }
+  };
+}
+
+export function deleteTextbookQuery(courseId, textbookId) {
+  return async (dispatch) => {
+    dispatch(updateSavingStatus({ status: RequestStatus.IN_PROGRESS }));
+    dispatch(showProcessingNotification(NOTIFICATION_MESSAGES.deleting));
+
+    try {
+      await deleteTextbook(courseId, textbookId);
+      dispatch(deleteTextbookSuccess(textbookId));
+      dispatch(updateSavingStatus({ status: RequestStatus.SUCCESSFUL }));
+    } catch (error) {
+      handleResponseErrors(error, dispatch, updateSavingStatus);
+    } finally {
+      dispatch(hideProcessingNotification());
+    }
+  };
+}
diff --git a/src/textbooks/data/thunk.test.js b/src/textbooks/data/thunk.test.js
new file mode 100644
index 0000000000..dd3f9ed50c
--- /dev/null
+++ b/src/textbooks/data/thunk.test.js
@@ -0,0 +1,139 @@
+import {
+  hideProcessingNotification,
+  showProcessingNotification,
+} from '../../generic/processing-notification/data/slice';
+import {
+  fetchTextbooksQuery,
+  createTextbookQuery,
+  editTextbookQuery,
+  deleteTextbookQuery,
+} from './thunk';
+import {
+  fetchTextbooks,
+  updateLoadingStatus,
+  updateSavingStatus,
+  createTextbookSuccess,
+  editTextbookSuccess,
+  deleteTextbookSuccess,
+} from './slice';
+import { RequestStatus } from '../../data/constants';
+import { NOTIFICATION_MESSAGES } from '../../constants';
+import {
+  getTextbooks, createTextbook, editTextbook, deleteTextbook,
+} from './api';
+
+jest.mock('./api', () => ({
+  getTextbooks: jest.fn(),
+  createTextbook: jest.fn(),
+  editTextbook: jest.fn(),
+  deleteTextbook: jest.fn(),
+}));
+
+const dispatch = jest.fn();
+
+describe('fetchTextbooksQuery', () => {
+  it('should dispatch fetchTextbooks with textbooks data on success', async () => {
+    const textbooks = [{ id: '1', title: 'Textbook 1' }];
+    getTextbooks.mockResolvedValue({ textbooks });
+
+    await fetchTextbooksQuery('courseId')(dispatch);
+
+    expect(dispatch).toHaveBeenCalledWith(updateLoadingStatus({ status: RequestStatus.IN_PROGRESS }));
+    expect(getTextbooks).toHaveBeenCalledWith('courseId');
+    expect(dispatch).toHaveBeenCalledWith(fetchTextbooks({ textbooks }));
+    expect(dispatch).toHaveBeenCalledWith(updateLoadingStatus({ status: RequestStatus.SUCCESSFUL }));
+  });
+
+  it('should dispatch updateLoadingStatus with RequestStatus.FAILED on failure', async () => {
+    getTextbooks.mockRejectedValue(new Error('Failed to fetch textbooks'));
+
+    await fetchTextbooksQuery('courseId')(dispatch);
+
+    expect(dispatch).toHaveBeenCalledWith(updateLoadingStatus({ status: RequestStatus.IN_PROGRESS }));
+    expect(getTextbooks).toHaveBeenCalledWith('courseId');
+    expect(dispatch).toHaveBeenCalledWith(updateLoadingStatus({ status: RequestStatus.FAILED }));
+  });
+});
+
+describe('createTextbookQuery', () => {
+  it('should dispatch createTextbookSuccess on success', async () => {
+    const textbook = { id: '1', title: 'New Textbook' };
+    createTextbook.mockResolvedValue(textbook);
+
+    await createTextbookQuery('courseId', textbook)(dispatch);
+
+    expect(dispatch).toHaveBeenCalledWith(updateSavingStatus({ status: RequestStatus.IN_PROGRESS }));
+    expect(dispatch).toHaveBeenCalledWith(showProcessingNotification(NOTIFICATION_MESSAGES.saving));
+    expect(createTextbook).toHaveBeenCalledWith('courseId', textbook);
+    expect(dispatch).toHaveBeenCalledWith(createTextbookSuccess(textbook));
+    expect(dispatch).toHaveBeenCalledWith(updateSavingStatus({ status: RequestStatus.SUCCESSFUL }));
+    expect(dispatch).toHaveBeenCalledWith(hideProcessingNotification());
+  });
+
+  it('should dispatch updateSavingStatus with RequestStatus.FAILED on failure', async () => {
+    createTextbook.mockRejectedValue(new Error('Failed to create textbook'));
+
+    await createTextbookQuery('courseId', {})(dispatch);
+
+    expect(dispatch).toHaveBeenCalledWith(updateSavingStatus({ status: RequestStatus.IN_PROGRESS }));
+    expect(dispatch).toHaveBeenCalledWith(showProcessingNotification(NOTIFICATION_MESSAGES.saving));
+    expect(createTextbook).toHaveBeenCalledWith('courseId', {});
+    expect(dispatch).toHaveBeenCalledWith(updateSavingStatus({ status: RequestStatus.FAILED, errorMessage: '' }));
+    expect(dispatch).toHaveBeenCalledWith(hideProcessingNotification());
+  });
+});
+
+describe('editTextbookQuery', () => {
+  it('should dispatch editTextbookSuccess on success', async () => {
+    const textbook = { id: '1', title: 'Edited Textbook' };
+    editTextbook.mockResolvedValue(textbook);
+
+    await editTextbookQuery('courseId', textbook)(dispatch);
+
+    expect(dispatch).toHaveBeenCalledWith(updateSavingStatus({ status: RequestStatus.IN_PROGRESS }));
+    expect(dispatch).toHaveBeenCalledWith(showProcessingNotification(NOTIFICATION_MESSAGES.saving));
+    expect(editTextbook).toHaveBeenCalledWith('courseId', textbook);
+    expect(dispatch).toHaveBeenCalledWith(editTextbookSuccess(textbook));
+    expect(dispatch).toHaveBeenCalledWith(updateSavingStatus({ status: RequestStatus.SUCCESSFUL }));
+    expect(dispatch).toHaveBeenCalledWith(hideProcessingNotification());
+  });
+
+  it('should dispatch updateSavingStatus with RequestStatus.FAILED on failure', async () => {
+    editTextbook.mockRejectedValue(new Error('Failed to edit textbook'));
+
+    await editTextbookQuery('courseId', {})(dispatch);
+
+    expect(dispatch).toHaveBeenCalledWith(updateSavingStatus({ status: RequestStatus.IN_PROGRESS }));
+    expect(dispatch).toHaveBeenCalledWith(showProcessingNotification(NOTIFICATION_MESSAGES.saving));
+    expect(editTextbook).toHaveBeenCalledWith('courseId', {});
+    expect(dispatch).toHaveBeenCalledWith(updateSavingStatus({ status: RequestStatus.FAILED, errorMessage: '' }));
+    expect(dispatch).toHaveBeenCalledWith(hideProcessingNotification());
+  });
+});
+
+describe('deleteTextbookQuery', () => {
+  it('should dispatch deleteTextbookSuccess on success', async () => {
+    deleteTextbook.mockResolvedValue();
+
+    await deleteTextbookQuery('courseId', 'textbookId')(dispatch);
+
+    expect(dispatch).toHaveBeenCalledWith(updateSavingStatus({ status: RequestStatus.IN_PROGRESS }));
+    expect(dispatch).toHaveBeenCalledWith(showProcessingNotification(NOTIFICATION_MESSAGES.deleting));
+    expect(deleteTextbook).toHaveBeenCalledWith('courseId', 'textbookId');
+    expect(dispatch).toHaveBeenCalledWith(deleteTextbookSuccess('textbookId'));
+    expect(dispatch).toHaveBeenCalledWith(updateSavingStatus({ status: RequestStatus.SUCCESSFUL }));
+    expect(dispatch).toHaveBeenCalledWith(hideProcessingNotification());
+  });
+
+  it('should dispatch updateSavingStatus with RequestStatus.FAILED on failure', async () => {
+    deleteTextbook.mockRejectedValue(new Error('Failed to delete textbook'));
+
+    await deleteTextbookQuery('courseId', 'textbookId')(dispatch);
+
+    expect(dispatch).toHaveBeenCalledWith(updateSavingStatus({ status: RequestStatus.IN_PROGRESS }));
+    expect(dispatch).toHaveBeenCalledWith(showProcessingNotification(NOTIFICATION_MESSAGES.deleting));
+    expect(deleteTextbook).toHaveBeenCalledWith('courseId', 'textbookId');
+    expect(dispatch).toHaveBeenCalledWith(updateSavingStatus({ status: RequestStatus.FAILED, errorMessage: '' }));
+    expect(dispatch).toHaveBeenCalledWith(hideProcessingNotification());
+  });
+});
diff --git a/src/textbooks/empty-placeholder/EmptyPlaceholder.jsx b/src/textbooks/empty-placeholder/EmptyPlaceholder.jsx
new file mode 100644
index 0000000000..785726db88
--- /dev/null
+++ b/src/textbooks/empty-placeholder/EmptyPlaceholder.jsx
@@ -0,0 +1,25 @@
+import PropTypes from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Add as IconAdd } from '@openedx/paragon/icons';
+import { Button } from '@openedx/paragon';
+
+import messages from './messages';
+
+const EmptyPlaceholder = ({ onCreateNewTextbook }) => {
+  const intl = useIntl();
+
+  return (
+    <div className="textbooks-empty-placeholder bg-white" data-testid="textbooks-empty-placeholder">
+      <p className="mb-0 small text-gray-700">{intl.formatMessage(messages.title)}</p>
+      <Button iconBefore={IconAdd} onClick={onCreateNewTextbook}>
+        {intl.formatMessage(messages.button)}
+      </Button>
+    </div>
+  );
+};
+
+EmptyPlaceholder.propTypes = {
+  onCreateNewTextbook: PropTypes.func.isRequired,
+};
+
+export default EmptyPlaceholder;
diff --git a/src/textbooks/empty-placeholder/EmptyPlaceholder.scss b/src/textbooks/empty-placeholder/EmptyPlaceholder.scss
new file mode 100644
index 0000000000..9f4290f294
--- /dev/null
+++ b/src/textbooks/empty-placeholder/EmptyPlaceholder.scss
@@ -0,0 +1,10 @@
+.textbooks-empty-placeholder {
+  @include pgn-box-shadow(1, "down");
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1.5rem;
+  border-radius: .375rem;
+  padding: map-get($spacers, 4);
+}
diff --git a/src/textbooks/empty-placeholder/EmptyPlaceholder.test.jsx b/src/textbooks/empty-placeholder/EmptyPlaceholder.test.jsx
new file mode 100644
index 0000000000..e5fc97627b
--- /dev/null
+++ b/src/textbooks/empty-placeholder/EmptyPlaceholder.test.jsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import userEvent from '@testing-library/user-event';
+import EmptyPlaceholder from './EmptyPlaceholder';
+import messages from './messages';
+
+const onCreateNewTextbookMock = jest.fn();
+
+const renderComponent = () => render(
+  <IntlProvider locale="en">
+    <EmptyPlaceholder onCreateNewTextbook={onCreateNewTextbookMock} />
+  </IntlProvider>,
+);
+
+describe('<EmptyPlaceholder />', () => {
+  it('renders EmptyPlaceholder component correctly', () => {
+    const { getByText, getByRole } = renderComponent();
+
+    expect(getByText(messages.title.defaultMessage)).toBeInTheDocument();
+    expect(getByRole('button', { name: messages.button.defaultMessage })).toBeInTheDocument();
+  });
+
+  it('calls the onCreateNewTextbook function when the button is clicked', () => {
+    const { getByRole } = renderComponent();
+
+    const addButton = getByRole('button', { name: messages.button.defaultMessage });
+    userEvent.click(addButton);
+    expect(onCreateNewTextbookMock).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/src/textbooks/empty-placeholder/messages.js b/src/textbooks/empty-placeholder/messages.js
new file mode 100644
index 0000000000..ad07ae1e50
--- /dev/null
+++ b/src/textbooks/empty-placeholder/messages.js
@@ -0,0 +1,14 @@
+const descriptions = {
+  title: {
+    id: 'course-authoring.textbooks.empty-placeholder.title',
+    defaultMessage: 'You haven\'t added any textbooks to this course yet.',
+    description: 'Message displayed when no textbooks are added to the course',
+  },
+  button: {
+    id: 'course-authoring.textbooks.empty-placeholder.button.new-textbook',
+    defaultMessage: 'Add your first textbook',
+    description: 'Text for the button to add the first textbook to the course',
+  },
+};
+
+export default descriptions;
diff --git a/src/textbooks/hooks.jsx b/src/textbooks/hooks.jsx
new file mode 100644
index 0000000000..0d9de3ae3e
--- /dev/null
+++ b/src/textbooks/hooks.jsx
@@ -0,0 +1,95 @@
+import { useDispatch, useSelector } from 'react-redux';
+import { useContext, useEffect } from 'react';
+import { AppContext } from '@edx/frontend-platform/react';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { useToggle } from '@openedx/paragon';
+
+import { updateSavingStatus } from './data/slice';
+import { RequestStatus } from '../data/constants';
+import {
+  getTextbooksData,
+  getLoadingStatus,
+  getSavingStatus,
+  getErrorMessage,
+} from './data/selectors';
+import {
+  createTextbookQuery,
+  fetchTextbooksQuery,
+  editTextbookQuery,
+  deleteTextbookQuery,
+} from './data/thunk';
+import messages from './messages';
+
+const useTextbooks = (courseId, waffleFlags) => {
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const { config } = useContext(AppContext);
+
+  const textbooks = useSelector(getTextbooksData);
+  const loadingStatus = useSelector(getLoadingStatus);
+  const savingStatus = useSelector(getSavingStatus);
+  const errorMessage = useSelector(getErrorMessage);
+
+  const [isTextbookFormOpen, openTextbookForm, closeTextbookForm] = useToggle(false);
+
+  const breadcrumbs = [
+    {
+      label: intl.formatMessage(messages.breadcrumbContent),
+      to: waffleFlags.useNewCourseOutlinePage ? `/course/${courseId}` : `${config.STUDIO_BASE_URL}/course/${courseId}`,
+    },
+    {
+      label: intl.formatMessage(messages.breadcrumbPagesAndResources),
+      to: `/course/${courseId}/pages-and-resources`,
+    },
+    {
+      label: '',
+      to: `/course/${courseId}/textbooks`,
+    },
+  ];
+
+  const handleTextbookFormSubmit = (formValues) => {
+    dispatch(createTextbookQuery(courseId, formValues));
+  };
+
+  const handleTextbookEditFormSubmit = (formValues) => {
+    dispatch(editTextbookQuery(courseId, formValues));
+  };
+
+  const handleTextbookDeleteSubmit = (textbookId) => {
+    dispatch(deleteTextbookQuery(courseId, textbookId));
+  };
+
+  const handleSavingStatusDispatch = (status) => {
+    if (status.status !== RequestStatus.SUCCESSFUL) {
+      dispatch(updateSavingStatus(status));
+    }
+  };
+
+  useEffect(() => {
+    dispatch(fetchTextbooksQuery(courseId));
+  }, [courseId]);
+
+  useEffect(() => {
+    if (savingStatus === RequestStatus.SUCCESSFUL) {
+      closeTextbookForm();
+    }
+  }, [savingStatus]);
+
+  return {
+    isLoading: loadingStatus === RequestStatus.IN_PROGRESS,
+    isLoadingFailed: loadingStatus === RequestStatus.FAILED,
+    savingStatus,
+    errorMessage,
+    textbooks,
+    breadcrumbs,
+    isTextbookFormOpen,
+    openTextbookForm,
+    closeTextbookForm,
+    handleTextbookFormSubmit,
+    handleSavingStatusDispatch,
+    handleTextbookEditFormSubmit,
+    handleTextbookDeleteSubmit,
+  };
+};
+
+export { useTextbooks };
diff --git a/src/textbooks/index.js b/src/textbooks/index.js
new file mode 100644
index 0000000000..360fe7c423
--- /dev/null
+++ b/src/textbooks/index.js
@@ -0,0 +1 @@
+export { default as Textbooks } from './Textbooks';
diff --git a/src/textbooks/messages.js b/src/textbooks/messages.js
new file mode 100644
index 0000000000..d891658116
--- /dev/null
+++ b/src/textbooks/messages.js
@@ -0,0 +1,29 @@
+const descriptions = {
+  headingTitle: {
+    id: 'course-authoring.textbooks.header.title',
+    defaultMessage: 'Textbooks',
+    description: 'Title for the textbooks section',
+  },
+  breadcrumbContent: {
+    id: 'course-authoring.textbooks.header.breadcrumb.content',
+    defaultMessage: 'Content',
+    description: 'Breadcrumb for content',
+  },
+  breadcrumbPagesAndResources: {
+    id: 'course-authoring.textbooks.header.breadcrumb.pages-and-resources',
+    defaultMessage: 'Pages & resources',
+    description: 'Breadcrumb for pages and resources',
+  },
+  breadcrumbAriaLabel: {
+    id: 'course-authoring.textbooks.header.breadcrumb.aria-label',
+    defaultMessage: 'Textbook breadcrumb',
+    description: 'Aria label for the textbook breadcrumb',
+  },
+  newTextbookButton: {
+    id: 'course-authoring.textbooks.header.new-textbook',
+    defaultMessage: 'New textbook',
+    description: 'Text for the button to create a new textbook',
+  },
+};
+
+export default descriptions;
diff --git a/src/textbooks/textbook-card/TextbookCard.scss b/src/textbooks/textbook-card/TextbookCard.scss
new file mode 100644
index 0000000000..e5df569ed9
--- /dev/null
+++ b/src/textbooks/textbook-card/TextbookCard.scss
@@ -0,0 +1,42 @@
+.textbook-card {
+  padding: $spacer $spacer $spacer map-get($spacers, 4);
+
+  & .pgn__card-header {
+    padding: 0;
+    margin-bottom: $spacer;
+  }
+
+  & .pgn__card-header-content {
+    margin-top: 0 !important;
+  }
+
+  & .pgn__card-header-actions {
+    margin: 0 !important;
+  }
+
+  &:not(:last-of-type) {
+    margin-bottom: map-get($spacers, 4);
+  }
+}
+
+.textbook-card__chapters {
+  margin-left: -(map-get($spacers, 2));
+}
+
+.textbook-card__chapter-item {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: $spacer;
+
+  & span:first-of-type {
+    word-break: break-word;
+  }
+
+  & span:last-of-type {
+    word-break: break-all;
+  }
+
+  &:not(:last-of-type) {
+    margin-bottom: map-get($spacers, 2);
+  }
+}
diff --git a/src/textbooks/textbook-card/TextbooksCard.jsx b/src/textbooks/textbook-card/TextbooksCard.jsx
new file mode 100644
index 0000000000..7218a6ddef
--- /dev/null
+++ b/src/textbooks/textbook-card/TextbooksCard.jsx
@@ -0,0 +1,146 @@
+import PropTypes from 'prop-types';
+import { useContext, useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import {
+  ActionRow,
+  Card,
+  Collapsible,
+  Icon,
+  IconButtonWithTooltip,
+  useToggle,
+} from '@openedx/paragon';
+import {
+  EditOutline as EditIcon,
+  RemoveRedEye as ViewIcon,
+  DeleteOutline as DeleteIcon,
+} from '@openedx/paragon/icons';
+import { AppContext } from '@edx/frontend-platform/react';
+
+import DeleteModal from '../../generic/delete-modal/DeleteModal';
+import { RequestStatus } from '../../data/constants';
+import { getCurrentTextbookId, getSavingStatus } from '../data/selectors';
+import TextbookForm from '../textbook-form/TextbookForm';
+import { getTextbookFormInitialValues } from '../utils';
+import messages from './messages';
+
+const TextbookCard = ({
+  textbook,
+  courseId,
+  handleSavingStatusDispatch,
+  onEditSubmit,
+  onDeleteSubmit,
+  textbookIndex,
+}) => {
+  const intl = useIntl();
+  const { config } = useContext(AppContext);
+
+  const savingStatus = useSelector(getSavingStatus);
+  const currentTextbookId = useSelector(getCurrentTextbookId);
+
+  const [isTextbookFormOpen, openTextbookForm, closeTextbookForm] = useToggle(false);
+  const [isDeleteModalOpen, openDeleteModal, closeDeleteModal] = useToggle(false);
+
+  const { tabTitle, chapters, id } = textbook;
+
+  const onPreviewTextbookClick = () => {
+    window.open(`${config.LMS_BASE_URL}/courses/${courseId}/pdfbook/${textbookIndex}/`, '_blank');
+  };
+
+  const handleDeleteButtonSubmit = () => {
+    closeDeleteModal();
+    onDeleteSubmit(id);
+  };
+
+  useEffect(() => {
+    if (savingStatus === RequestStatus.SUCCESSFUL && currentTextbookId === id) {
+      closeTextbookForm();
+    }
+  }, [savingStatus, currentTextbookId]);
+
+  return (
+    <>
+      {isTextbookFormOpen ? (
+        <TextbookForm
+          closeTextbookForm={closeTextbookForm}
+          initialFormValues={getTextbookFormInitialValues(true, { tab_title: tabTitle, chapters, id })}
+          onSubmit={onEditSubmit}
+          onSavingStatus={handleSavingStatusDispatch}
+          courseId={courseId}
+        />
+      ) : (
+        (
+          <Card className="textbook-card" data-testid="textbook-card">
+            <Card.Header
+              title={tabTitle}
+              actions={(
+                <ActionRow>
+                  <IconButtonWithTooltip
+                    tooltipContent={intl.formatMessage(messages.buttonView)}
+                    src={ViewIcon}
+                    iconAs={Icon}
+                    data-testid="textbook-view-button"
+                    onClick={onPreviewTextbookClick}
+                  />
+                  <IconButtonWithTooltip
+                    tooltipContent={intl.formatMessage(messages.buttonEdit)}
+                    src={EditIcon}
+                    iconAs={Icon}
+                    data-testid="textbook-edit-button"
+                    onClick={openTextbookForm}
+                  />
+                  <IconButtonWithTooltip
+                    tooltipContent={intl.formatMessage(messages.buttonDelete)}
+                    src={DeleteIcon}
+                    iconAs={Icon}
+                    data-testid="textbook-delete-button"
+                    onClick={openDeleteModal}
+                  />
+                </ActionRow>
+              )}
+            />
+            <div className="textbook-card__chapters">
+              <Collapsible
+                styling="basic"
+                data-testid="chapters-button"
+                title={intl.formatMessage(messages.chaptersTitle, { count: chapters.length })}
+              >
+                {chapters.map(({ title, url }) => (
+                  <div className="textbook-card__chapter-item" key={title}>
+                    <span className="small">{title}</span>
+                    <span className="small text-gray-700">{url}</span>
+                  </div>
+                ))}
+              </Collapsible>
+            </div>
+          </Card>
+        )
+      )}
+      <DeleteModal
+        isOpen={isDeleteModalOpen}
+        close={closeDeleteModal}
+        title={intl.formatMessage(messages.deleteModalTitle, { textbookTitle: textbook.tabTitle })}
+        description={intl.formatMessage(messages.deleteModalDescription)}
+        onDeleteSubmit={handleDeleteButtonSubmit}
+      />
+    </>
+  );
+};
+
+TextbookCard.propTypes = {
+  textbook: PropTypes.shape({
+    tabTitle: PropTypes.string.isRequired,
+    chapters: PropTypes.arrayOf(PropTypes.shape({
+      title: PropTypes.string.isRequired,
+      url: PropTypes.string.isRequired,
+    })).isRequired,
+    id: PropTypes.string.isRequired,
+  }).isRequired,
+  courseId: PropTypes.string.isRequired,
+  handleSavingStatusDispatch: PropTypes.func.isRequired,
+  onEditSubmit: PropTypes.func.isRequired,
+  onDeleteSubmit: PropTypes.func.isRequired,
+  textbookIndex: PropTypes.string.isRequired,
+};
+
+export default TextbookCard;
diff --git a/src/textbooks/textbook-card/TextbooksCard.test.jsx b/src/textbooks/textbook-card/TextbooksCard.test.jsx
new file mode 100644
index 0000000000..ce1c958ab5
--- /dev/null
+++ b/src/textbooks/textbook-card/TextbooksCard.test.jsx
@@ -0,0 +1,192 @@
+import React from 'react';
+import { AppProvider } from '@edx/frontend-platform/react';
+import { render, waitFor, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import MockAdapter from 'axios-mock-adapter';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { initializeMockApp } from '@edx/frontend-platform';
+
+import { getEditTextbooksApiUrl } from '../data/api';
+import { deleteTextbookQuery, editTextbookQuery } from '../data/thunk';
+import { textbooksMock } from '../__mocks__';
+import initializeStore from '../../store';
+import { executeThunk } from '../../utils';
+import TextbookCard from './TextbooksCard';
+import messages from '../textbook-form/messages';
+import textbookCardMessages from './messages';
+
+let axiosMock;
+let store;
+
+const courseId = 'course-v1:org+101+101';
+const textbook = textbooksMock.textbooks[1];
+const onEditSubmitMock = jest.fn();
+const onDeleteSubmitMock = jest.fn();
+const handleSavingStatusDispatchMock = jest.fn();
+
+const renderComponent = () => render(
+  <AppProvider store={store}>
+    <IntlProvider locale="en">
+      <TextbookCard
+        textbook={textbook}
+        courseId={courseId}
+        onEditSubmit={onEditSubmitMock}
+        onDeleteSubmit={onDeleteSubmitMock}
+        handleSavingStatusDispatch={handleSavingStatusDispatchMock}
+      />
+    </IntlProvider>
+  </AppProvider>,
+);
+
+describe('<TextbookCard />', () => {
+  beforeEach(async () => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+
+    store = initializeStore();
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+  });
+
+  it('render TextbookCard component correctly', () => {
+    const { getByText, getByTestId } = renderComponent();
+
+    expect(getByText(textbook.tabTitle)).toBeInTheDocument();
+    expect(getByTestId('textbook-view-button')).toBeInTheDocument();
+    expect(getByTestId('textbook-edit-button')).toBeInTheDocument();
+    expect(getByTestId('textbook-delete-button')).toBeInTheDocument();
+    expect(getByText('1 PDF chapters')).toBeInTheDocument();
+
+    const collapseButton = document.querySelector('.collapsible-trigger');
+    userEvent.click(collapseButton);
+
+    textbook.chapters.forEach(({ title, url }) => {
+      expect(getByText(title)).toBeInTheDocument();
+      expect(getByText(url)).toBeInTheDocument();
+    });
+  });
+
+  it('renders edit TextbookForm after clicking on edit button', () => {
+    const { getByTestId, queryByTestId } = renderComponent();
+
+    const editButton = getByTestId('textbook-edit-button');
+    userEvent.click(editButton);
+
+    expect(getByTestId('textbook-form')).toBeInTheDocument();
+    expect(queryByTestId('textbook-card')).not.toBeInTheDocument();
+  });
+
+  it('closes edit TextbookForm after clicking on cancel button', () => {
+    const { getByTestId, queryByTestId } = renderComponent();
+
+    const editButton = getByTestId('textbook-edit-button');
+    userEvent.click(editButton);
+
+    expect(getByTestId('textbook-form')).toBeInTheDocument();
+    expect(queryByTestId('textbook-card')).not.toBeInTheDocument();
+
+    const cancelButton = getByTestId('cancel-button');
+    userEvent.click(cancelButton);
+
+    expect(queryByTestId('textbook-form')).not.toBeInTheDocument();
+    expect(getByTestId('textbook-card')).toBeInTheDocument();
+  });
+
+  it('calls onEditSubmit when the "Save" button is clicked with a valid form', async () => {
+    const { getByPlaceholderText, getByRole, getByTestId } = renderComponent();
+
+    const editButton = getByTestId('textbook-edit-button');
+    userEvent.click(editButton);
+
+    const tabTitleInput = getByPlaceholderText(messages.tabTitlePlaceholder.defaultMessage);
+    const chapterInput = getByPlaceholderText(
+      messages.chapterTitlePlaceholder.defaultMessage.replace('{value}', textbooksMock.textbooks[1].chapters.length),
+    );
+    const urlInput = getByPlaceholderText(messages.chapterUrlPlaceholder.defaultMessage);
+
+    const newFormValues = {
+      tab_title: 'Tab title',
+      chapters: [
+        {
+          title: 'Chapter',
+          url: 'Url',
+        },
+      ],
+      id: textbooksMock.textbooks[1].id,
+    };
+
+    userEvent.clear(tabTitleInput);
+    userEvent.type(tabTitleInput, newFormValues.tab_title);
+    userEvent.clear(chapterInput);
+    userEvent.type(chapterInput, newFormValues.chapters[0].title);
+    userEvent.clear(urlInput);
+    userEvent.type(urlInput, newFormValues.chapters[0].url);
+
+    userEvent.click(getByRole('button', { name: messages.saveButton.defaultMessage }));
+
+    await waitFor(() => {
+      expect(onEditSubmitMock).toHaveBeenCalledTimes(1);
+      expect(onEditSubmitMock).toHaveBeenCalledWith(
+        newFormValues,
+        expect.objectContaining({ submitForm: expect.any(Function) }),
+      );
+    });
+
+    axiosMock
+      .onPost(getEditTextbooksApiUrl(courseId, textbooksMock.textbooks[1].id))
+      .reply(200);
+
+    await executeThunk(editTextbookQuery(courseId, newFormValues), store.dispatch);
+  });
+
+  it('DeleteModal is open when delete button is clicked', async () => {
+    const { getByTestId, getByRole } = renderComponent();
+
+    const deleteButton = getByTestId('textbook-delete-button');
+    userEvent.click(deleteButton);
+
+    await waitFor(() => {
+      const deleteModal = getByRole('dialog');
+
+      const modalTitle = within(deleteModal)
+        .getByText(textbookCardMessages.deleteModalTitle.defaultMessage
+          .replace('{textbookTitle}', textbook.tabTitle));
+      const modalDescription = within(deleteModal)
+        .getByText(textbookCardMessages.deleteModalDescription.defaultMessage);
+
+      expect(modalTitle).toBeInTheDocument();
+      expect(modalDescription).toBeInTheDocument();
+    });
+  });
+
+  it('calls onDeleteSubmit when the DeleteModal is open', async () => {
+    const { getByTestId, getByRole } = renderComponent();
+
+    const deleteButton = getByTestId('textbook-delete-button');
+    userEvent.click(deleteButton);
+
+    await waitFor(() => {
+      const deleteModal = getByRole('dialog');
+
+      const modalSubmitButton = within(deleteModal)
+        .getByRole('button', { name: 'Delete' });
+
+      userEvent.click(modalSubmitButton);
+
+      const textbookId = textbooksMock.textbooks[1].id;
+
+      expect(onDeleteSubmitMock).toHaveBeenCalledTimes(1);
+      axiosMock
+        .onDelete(getEditTextbooksApiUrl(courseId, textbookId))
+        .reply(200);
+
+      executeThunk(deleteTextbookQuery(courseId, textbookId), store.dispatch);
+    });
+  });
+});
diff --git a/src/textbooks/textbook-card/messages.js b/src/textbooks/textbook-card/messages.js
new file mode 100644
index 0000000000..b804ec16ad
--- /dev/null
+++ b/src/textbooks/textbook-card/messages.js
@@ -0,0 +1,49 @@
+const descriptions = {
+  chaptersTitle: {
+    id: 'course-authoring.textbooks.chapters.title',
+    defaultMessage: '{count} PDF chapters',
+    description: 'Title for the list of PDF chapters',
+  },
+  buttonView: {
+    id: 'course-authoring.textbooks.button.view',
+    defaultMessage: 'View the PDF live',
+    description: 'Text for the button to view the PDF live',
+  },
+  buttonViewAlt: {
+    id: 'course-authoring.textbooks.button.view.alt',
+    defaultMessage: 'textbook-view-button',
+    description: 'Alt text for the view button',
+  },
+  buttonEdit: {
+    id: 'course-authoring.textbooks.button.edit',
+    defaultMessage: 'Edit',
+    description: 'Text for the edit button',
+  },
+  buttonEditAlt: {
+    id: 'course-authoring.textbooks.button.edit.alt',
+    defaultMessage: 'textbook-edit-button',
+    description: 'Alt text for the edit button',
+  },
+  buttonDelete: {
+    id: 'course-authoring.textbooks.button.delete',
+    defaultMessage: 'Delete',
+    description: 'Text for the delete button',
+  },
+  buttonDeleteAlt: {
+    id: 'course-authoring.textbooks.button.delete.alt',
+    defaultMessage: 'textbook-delete-button',
+    description: 'Alt text for the delete button',
+  },
+  deleteModalTitle: {
+    id: 'course-authoring.textbooks.form.delete-modal.title',
+    defaultMessage: 'Delete “{textbookTitle}”?',
+    description: 'Title for the delete modal',
+  },
+  deleteModalDescription: {
+    id: 'course-authoring.textbooks.form.delete-modal.description',
+    defaultMessage: 'Deleting a textbook cannot be undone and once deleted any reference to it in your courseware\'s navigation will also be removed.',
+    description: 'Description for the delete modal',
+  },
+};
+
+export default descriptions;
diff --git a/src/textbooks/textbook-form/TextbookForm.jsx b/src/textbooks/textbook-form/TextbookForm.jsx
new file mode 100644
index 0000000000..dfc472ce4f
--- /dev/null
+++ b/src/textbooks/textbook-form/TextbookForm.jsx
@@ -0,0 +1,201 @@
+import { useState } from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { FieldArray, Formik } from 'formik';
+import {
+  PictureAsPdf as PdfIcon,
+  Add as AddIcon,
+  DeleteOutline as DeleteIcon,
+  Upload as UploadIcon,
+} from '@openedx/paragon/icons';
+import {
+  ActionRow,
+  Button,
+  Form,
+  Icon,
+  IconButtonWithTooltip,
+  useToggle,
+} from '@openedx/paragon';
+
+import FormikControl from '../../generic/FormikControl';
+import PromptIfDirty from '../../generic/prompt-if-dirty/PromptIfDirty';
+import ModalDropzone from '../../generic/modal-dropzone/ModalDropzone';
+import { useModel } from '../../generic/model-store';
+import { UPLOAD_FILE_MAX_SIZE } from '../../constants';
+import textbookFormValidationSchema from './validations';
+import messages from './messages';
+
+const TextbookForm = ({
+  closeTextbookForm,
+  initialFormValues,
+  onSubmit,
+  onSavingStatus,
+  courseId,
+}) => {
+  const intl = useIntl();
+
+  const courseDetail = useModel('courseDetails', courseId);
+  const courseTitle = courseDetail ? courseDetail?.name : '';
+
+  const [currentTextbookIndex, setCurrentTextbookIndex] = useState(0);
+  const [isUploadModalOpen, openUploadModal, closeUploadModal] = useToggle(false);
+  const [selectedFile, setSelectedFile] = useState('');
+
+  const onCloseUploadModal = () => {
+    closeUploadModal();
+    setSelectedFile('');
+  };
+
+  const onUploadButtonClick = (index) => {
+    setCurrentTextbookIndex(index);
+    openUploadModal();
+  };
+
+  return (
+    <div className="textbook-form" data-testid="textbook-form">
+      <Formik
+        initialValues={initialFormValues}
+        validationSchema={textbookFormValidationSchema(intl)}
+        onSubmit={onSubmit}
+        validateOnBlur
+        validateOnMount
+      >
+        {({
+          values, handleSubmit, isValid, dirty, setFieldValue,
+        }) => (
+          <>
+            <Form.Group size="sm" className="form-field">
+              <Form.Label size="sm" className="font-weight-bold form-main-label text-black">
+                {intl.formatMessage(messages.tabTitleLabel)} *
+              </Form.Label>
+              <FormikControl
+                name="tab_title"
+                value={values.tab_title}
+                placeholder={intl.formatMessage(messages.tabTitlePlaceholder)}
+              />
+              <Form.Control.Feedback className="form-helper-text">
+                {intl.formatMessage(messages.tabTitleHelperText)}
+              </Form.Control.Feedback>
+            </Form.Group>
+            <FieldArray
+              name="chapters"
+              render={(arrayHelpers) => (
+                <>
+                  {!!values?.chapters.length && values.chapters.map(({ title, url }, index) => (
+                    <div className="form-chapters-fields" data-testid="form-chapters-fields">
+                      <Form.Group size="sm" className="form-field">
+                        <Form.Label size="sm" className="form-label font-weight-bold required text-black">
+                          {intl.formatMessage(messages.chapterTitleLabel)} *
+                        </Form.Label>
+                        <FormikControl
+                          name={`chapters[${index}].title`}
+                          value={title}
+                          placeholder={intl.formatMessage(messages.chapterTitlePlaceholder, { value: index + 1 })}
+                        />
+                        <Form.Control.Feedback className="form-helper-text">
+                          {intl.formatMessage(messages.chapterTitleHelperText)}
+                        </Form.Control.Feedback>
+                      </Form.Group>
+                      <Form.Group size="sm" className="form-field">
+                        <div className="d-flex align-items-center mb-1">
+                          <Form.Label size="sm" className="font-weight-bold mb-0 text-black">
+                            {intl.formatMessage(messages.chapterUrlLabel)} *
+                          </Form.Label>
+                          <IconButtonWithTooltip
+                            size="sm"
+                            className="ml-auto field-icon-button"
+                            tooltipContent={intl.formatMessage(messages.uploadButtonTooltip)}
+                            src={UploadIcon}
+                            iconAs={Icon}
+                            data-testid="chapter-upload-button"
+                            alt={intl.formatMessage(messages.uploadButtonAlt)}
+                            onClick={() => onUploadButtonClick(index)}
+                          />
+                          <IconButtonWithTooltip
+                            size="sm"
+                            className="field-icon-button"
+                            tooltipContent={intl.formatMessage(messages.deleteButtonTooltip)}
+                            src={DeleteIcon}
+                            iconAs={Icon}
+                            data-testid="chapter-delete-button"
+                            alt={intl.formatMessage(messages.deleteButtonAlt)}
+                            onClick={() => arrayHelpers.remove(index)}
+                          />
+                        </div>
+                        <FormikControl
+                          name={`chapters[${index}].url`}
+                          value={url}
+                          placeholder={intl.formatMessage(messages.chapterUrlPlaceholder)}
+                        />
+                        <Form.Control.Feedback className="form-helper-text">
+                          {intl.formatMessage(messages.chapterUrlHelperText)}
+                        </Form.Control.Feedback>
+                      </Form.Group>
+                    </div>
+                  ))}
+                  <div>
+                    {!values.chapters.length && (
+                      <Form.Control.Feedback className="pgn__form-text-invalid mb-2">
+                        {intl.formatMessage(messages.addChapterHelperText)}
+                      </Form.Control.Feedback>
+                    )}
+                    <Button
+                      variant="outline-primary"
+                      className="w-100"
+                      iconBefore={AddIcon}
+                      onClick={() => arrayHelpers.push({ title: '', url: '' })}
+                    >
+                      {intl.formatMessage(messages.addChapterButton)}
+                    </Button>
+                  </div>
+                </>
+              )}
+            />
+            <ActionRow>
+              <Button variant="tertiary" onClick={closeTextbookForm} data-testid="cancel-button">
+                {intl.formatMessage(messages.cancelButton)}
+              </Button>
+              <Button onClick={handleSubmit} disabled={!isValid} type="submit">
+                {intl.formatMessage(messages.saveButton)}
+              </Button>
+            </ActionRow>
+            <ModalDropzone
+              isOpen={isUploadModalOpen}
+              onClose={onCloseUploadModal}
+              onCancel={onCloseUploadModal}
+              onChange={(value) => setFieldValue(`chapters[${currentTextbookIndex}].url`, value)}
+              fileTypes={['pdf']}
+              modalTitle={intl.formatMessage(messages.uploadModalTitle, { courseName: courseTitle })}
+              imageDropzoneText={intl.formatMessage(messages.uploadModalDropzoneText)}
+              imageHelpText={intl.formatMessage(messages.uploadModalHelperText)}
+              onSavingStatus={onSavingStatus}
+              invalidFileSizeMore={intl.formatMessage(
+                messages.uploadModalFileInvalidSizeText,
+                { maxSize: UPLOAD_FILE_MAX_SIZE / (1000 * 1000) },
+              )}
+              onSelectFile={setSelectedFile}
+              previewComponent={(
+                <div className="modal-preview">
+                  <Icon src={PdfIcon} className="modal-preview-icon" />
+                  <span className="modal-preview-text">{selectedFile}</span>
+                </div>
+              )}
+              maxSize={UPLOAD_FILE_MAX_SIZE}
+            />
+            <PromptIfDirty dirty={dirty} />
+          </>
+        )}
+      </Formik>
+    </div>
+  );
+};
+
+TextbookForm.propTypes = {
+  closeTextbookForm: PropTypes.func.isRequired,
+  initialFormValues: PropTypes.shape({}).isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  onSavingStatus: PropTypes.func.isRequired,
+  courseId: PropTypes.string.isRequired,
+};
+
+export default TextbookForm;
diff --git a/src/textbooks/textbook-form/TextbookForm.scss b/src/textbooks/textbook-form/TextbookForm.scss
new file mode 100644
index 0000000000..8db5d4c736
--- /dev/null
+++ b/src/textbooks/textbook-form/TextbookForm.scss
@@ -0,0 +1,67 @@
+.textbook-form {
+  @include pgn-box-shadow(1, "centered");
+
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  background-color: $white;
+  padding: map-get($spacers, 4);
+  margin-bottom: map-get($spacers, 4);
+  border-radius: .5rem;
+
+  .form-field {
+    margin-bottom: 0;
+
+    .pgn__form-group {
+      margin-bottom: 0;
+    }
+  }
+
+  .form-title {
+    font-size: 1.5rem;
+    margin-bottom: map-get($spacers, 4);
+  }
+
+  .form-main-label {
+    font-size: 1.375rem;
+    line-height: 1.75rem;
+    margin-bottom: map-get($spacers, 4);
+  }
+
+  .form-label {
+    margin-bottom: map-get($spacers, 2\.5);
+  }
+
+  .form-helper-text {
+    font-size: $font-size-xs;
+  }
+
+  .form-chapters-fields {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 2rem;
+  }
+
+  .field-icon-button:hover {
+    background-color: transparent !important;
+    color: $primary;
+  }
+}
+
+.modal-preview {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: $spacer;
+
+  .modal-preview-icon {
+    height: 6.25rem;
+    width: 6.25rem;
+  }
+
+  .modal-preview-text {
+    font-size: .875rem;
+  }
+}
+
diff --git a/src/textbooks/textbook-form/TextbookForm.test.jsx b/src/textbooks/textbook-form/TextbookForm.test.jsx
new file mode 100644
index 0000000000..238ad57630
--- /dev/null
+++ b/src/textbooks/textbook-form/TextbookForm.test.jsx
@@ -0,0 +1,176 @@
+import { AppProvider } from '@edx/frontend-platform/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { initializeMockApp } from '@edx/frontend-platform';
+import MockAdapter from 'axios-mock-adapter';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { render, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import initializeStore from '../../store';
+import { executeThunk } from '../../utils';
+import { getTextbookFormInitialValues } from '../utils';
+import { getUpdateTextbooksApiUrl } from '../data/api';
+import { createTextbookQuery } from '../data/thunk';
+import TextbookForm from './TextbookForm';
+import messages from './messages';
+
+let axiosMock;
+let store;
+const courseId = 'course-v1:org+101+101';
+
+const closeTextbookFormMock = jest.fn();
+const initialFormValuesMock = getTextbookFormInitialValues();
+const onSubmitMock = jest.fn();
+const onSavingStatus = jest.fn();
+
+const renderComponent = () => render(
+  <AppProvider store={store}>
+    <IntlProvider locale="en">
+      <TextbookForm
+        closeTextbookForm={closeTextbookFormMock}
+        initialFormValues={initialFormValuesMock}
+        onSubmit={onSubmitMock}
+        onSavingStatus={onSavingStatus}
+        courseId={courseId}
+      />
+    </IntlProvider>
+  </AppProvider>,
+);
+
+describe('<TextbookForm />', () => {
+  beforeEach(async () => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+
+    store = initializeStore();
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+  });
+
+  it('renders TextbooksForm component correctly', async () => {
+    const {
+      getByText, getByRole, getByPlaceholderText, getByTestId,
+    } = renderComponent();
+
+    await waitFor(() => {
+      expect(getByText(`${messages.tabTitleLabel.defaultMessage} *`)).toBeInTheDocument();
+      expect(getByPlaceholderText(messages.tabTitlePlaceholder.defaultMessage)).toBeInTheDocument();
+      expect(getByText(messages.tabTitleHelperText.defaultMessage)).toBeInTheDocument();
+
+      expect(getByText(`${messages.chapterTitleLabel.defaultMessage} *`)).toBeInTheDocument();
+      expect(getByPlaceholderText(
+        messages.chapterTitlePlaceholder.defaultMessage.replace('{value}', initialFormValuesMock.chapters.length),
+      )).toBeInTheDocument();
+      expect(getByText(messages.chapterTitleHelperText.defaultMessage)).toBeInTheDocument();
+
+      expect(getByText(`${messages.chapterUrlLabel.defaultMessage} *`)).toBeInTheDocument();
+      expect(getByPlaceholderText(messages.chapterUrlPlaceholder.defaultMessage)).toBeInTheDocument();
+      expect(getByText(messages.chapterUrlHelperText.defaultMessage)).toBeInTheDocument();
+
+      expect(getByTestId('chapter-upload-button')).toBeInTheDocument();
+      expect(getByTestId('chapter-delete-button')).toBeInTheDocument();
+
+      expect(getByRole('button', { name: messages.addChapterButton.defaultMessage }));
+      expect(getByRole('button', { name: messages.cancelButton.defaultMessage }));
+      expect(getByRole('button', { name: messages.saveButton.defaultMessage }));
+    });
+  });
+
+  it('calls onSubmit when the "Save" button is clicked with a valid form', async () => {
+    const { getByPlaceholderText, getByRole } = renderComponent();
+
+    const tabTitleInput = getByPlaceholderText(messages.tabTitlePlaceholder.defaultMessage);
+    const chapterInput = getByPlaceholderText(
+      messages.chapterTitlePlaceholder.defaultMessage.replace('{value}', initialFormValuesMock.chapters.length),
+    );
+    const urlInput = getByPlaceholderText(messages.chapterUrlPlaceholder.defaultMessage);
+
+    const formValues = {
+      tab_title: 'Tab title',
+      chapters: [
+        {
+          title: 'Chapter',
+          url: 'Url',
+        },
+      ],
+    };
+
+    userEvent.type(tabTitleInput, formValues.tab_title);
+    userEvent.type(chapterInput, formValues.chapters[0].title);
+    userEvent.type(urlInput, formValues.chapters[0].url);
+
+    userEvent.click(getByRole('button', { name: messages.saveButton.defaultMessage }));
+
+    await waitFor(() => {
+      expect(onSubmitMock).toHaveBeenCalledTimes(1);
+      expect(onSubmitMock).toHaveBeenCalledWith(
+        formValues,
+        expect.objectContaining({ submitForm: expect.any(Function) }),
+      );
+    });
+
+    axiosMock
+      .onPost(getUpdateTextbooksApiUrl(courseId))
+      .reply(200);
+
+    await executeThunk(createTextbookQuery(courseId, formValues), store.dispatch);
+  });
+
+  it('"Save" button is disabled when the form is empty', async () => {
+    const { getByRole } = renderComponent();
+
+    await waitFor(() => {
+      const saveButton = getByRole('button', { name: messages.saveButton.defaultMessage });
+      expect(saveButton).toBeDisabled();
+    });
+  });
+
+  it('"Save" button is disabled when the chapters length less than 1', async () => {
+    const { getByRole, getByTestId } = renderComponent();
+
+    const deleteChapterButton = getByTestId('chapter-delete-button');
+    const saveButton = getByRole('button', { name: messages.saveButton.defaultMessage });
+
+    userEvent.click(deleteChapterButton);
+
+    await waitFor(() => {
+      expect(saveButton).toBeDisabled();
+    });
+  });
+
+  it('"Cancel" button is disabled when the form is empty', async () => {
+    const { getByRole } = renderComponent();
+
+    await waitFor(() => {
+      const saveButton = getByRole('button', { name: messages.saveButton.defaultMessage });
+      expect(saveButton).toBeDisabled();
+    });
+  });
+
+  it('"Add a chapter" button add new chapters field', async () => {
+    const { getByRole, getAllByTestId } = renderComponent();
+
+    const addChapterButton = getByRole('button', { name: messages.addChapterButton.defaultMessage });
+
+    userEvent.click(addChapterButton);
+
+    await waitFor(() => {
+      expect(getAllByTestId('form-chapters-fields')).toHaveLength(2);
+    });
+  });
+
+  it('open modal dropzone when "Upload" button is clicked', async () => {
+    const { getByTestId } = renderComponent();
+
+    await waitFor(() => {
+      const button = getByTestId('chapter-upload-button');
+      userEvent.click(button);
+      expect(getByTestId('modal-backdrop')).toBeInTheDocument();
+    });
+  });
+});
diff --git a/src/textbooks/textbook-form/messages.js b/src/textbooks/textbook-form/messages.js
new file mode 100644
index 0000000000..b4cac8fba4
--- /dev/null
+++ b/src/textbooks/textbook-form/messages.js
@@ -0,0 +1,124 @@
+const descriptions = {
+  tabTitleLabel: {
+    id: 'course-authoring.textbooks.form.tab-title.label',
+    defaultMessage: 'Textbook name',
+    description: 'Label for the textbook name field in the form',
+  },
+  tabTitlePlaceholder: {
+    id: 'course-authoring.textbooks.form.tab-title.placeholder',
+    defaultMessage: 'Introduction to Cookie Baking',
+    description: 'Placeholder text for the textbook name field in the form',
+  },
+  tabTitleHelperText: {
+    id: 'course-authoring.textbooks.form.tab-title.helper-text',
+    defaultMessage: 'provide the title/name of the textbook as you would like your students to see it',
+    description: 'Helper text for the textbook name field in the form',
+  },
+  tabTitleValidationText: {
+    id: 'course-authoring.textbooks.form.tab-title.validation-text',
+    defaultMessage: 'Textbook name is required',
+    description: 'Validation error message for the textbook name field in the form',
+  },
+  chapterTitleLabel: {
+    id: 'course-authoring.textbooks.form.chapter.title.label',
+    defaultMessage: 'Chapter name',
+    description: 'Label for the chapter name field in the form',
+  },
+  chapterTitlePlaceholder: {
+    id: 'course-authoring.textbooks.form.chapter.title.placeholder',
+    defaultMessage: 'Chapter {value}',
+    description: 'Placeholder text for the chapter name field in the form',
+  },
+  chapterTitleHelperText: {
+    id: 'course-authoring.textbooks.form.chapter.title.helper-text',
+    defaultMessage: 'provide the title/name of the chapter that will be used in navigating',
+    description: 'Helper text for the chapter name field in the form',
+  },
+  chapterTitleValidationText: {
+    id: 'course-authoring.textbooks.form.chapter.title.validation-text',
+    defaultMessage: 'Chapter name is required',
+    description: 'Validation error message for the chapter name field in the form',
+  },
+  chapterUrlLabel: {
+    id: 'course-authoring.textbooks.form.chapter.url.label',
+    defaultMessage: 'Chapter asset',
+    description: 'Label for the chapter asset field in the form',
+  },
+  chapterUrlPlaceholder: {
+    id: 'course-authoring.textbooks.form.chapter.url.placeholder',
+    defaultMessage: 'path/to/introductionToCookieBaking-CH1.pdf',
+    description: 'Placeholder text for the chapter asset field in the form',
+  },
+  chapterUrlHelperText: {
+    id: 'course-authoring.textbooks.form.chapter.url.helper-text',
+    defaultMessage: 'upload a PDF file or provide the path to a Studio asset file',
+    description: 'Helper text for the chapter asset field in the form',
+  },
+  chapterUrlValidationText: {
+    id: 'course-authoring.textbooks.form.chapter.url.validation-text',
+    defaultMessage: 'Chapter asset is required',
+    description: 'Validation error message for the chapter asset field in the form',
+  },
+  addChapterHelperText: {
+    id: 'course-authoring.textbooks.form.add-chapter.helper-text',
+    defaultMessage: 'Please add at least one chapter',
+    description: 'Helper text for adding a new chapter in the form',
+  },
+  addChapterButton: {
+    id: 'course-authoring.textbooks.form.add-chapter.button',
+    defaultMessage: 'Add a chapter',
+    description: 'Text for the button to add a new chapter in the form',
+  },
+  uploadButtonTooltip: {
+    id: 'course-authoring.textbooks.form.upload-button.tooltip',
+    defaultMessage: 'Upload',
+    description: 'Tooltip text for the upload button in the form',
+  },
+  uploadButtonAlt: {
+    id: 'course-authoring.textbooks.form.upload-button.alt',
+    defaultMessage: 'chapter-upload-button',
+    description: 'Alt text for the upload button in the form',
+  },
+  deleteButtonTooltip: {
+    id: 'course-authoring.textbooks.form.delete-button.tooltip',
+    defaultMessage: 'Delete',
+    description: 'Tooltip text for the delete button in the form',
+  },
+  deleteButtonAlt: {
+    id: 'course-authoring.textbooks.form.delete-button.alt',
+    defaultMessage: 'chapter-delete-button',
+    description: 'Alt text for the delete button in the form',
+  },
+  cancelButton: {
+    id: 'course-authoring.textbooks.form.button.cancel',
+    defaultMessage: 'Cancel',
+    description: 'Text for the cancel button in the form',
+  },
+  saveButton: {
+    id: 'course-authoring.textbooks.form.button.save',
+    defaultMessage: 'Save',
+    description: 'Text for the save button in the form',
+  },
+  uploadModalTitle: {
+    id: 'course-authoring.textbooks.form.upload-modal.title',
+    defaultMessage: 'Upload a new PDF to “{courseName}”',
+    description: 'Title for the upload modal in the form',
+  },
+  uploadModalDropzoneText: {
+    id: 'course-authoring.textbooks.form.upload-modal.dropzone-text',
+    defaultMessage: 'Drag and drop your PDF file here or click to upload',
+    description: 'Text for the dropzone in the upload modal',
+  },
+  uploadModalHelperText: {
+    id: 'course-authoring.textbooks.form.upload-modal.help-text',
+    defaultMessage: 'File must be in PDF format',
+    description: 'Helper text for the upload modal',
+  },
+  uploadModalFileInvalidSizeText: {
+    id: 'course-authoring.textbooks.form.upload-modal.file-size-invalid-text',
+    defaultMessage: 'File size must be less than {maxSize}MB.',
+    description: 'Error message for invalid file size in the upload modal',
+  },
+};
+
+export default descriptions;
diff --git a/src/textbooks/textbook-form/validations.js b/src/textbooks/textbook-form/validations.js
new file mode 100644
index 0000000000..43ff181852
--- /dev/null
+++ b/src/textbooks/textbook-form/validations.js
@@ -0,0 +1,15 @@
+import * as Yup from 'yup';
+
+import messages from './messages';
+
+const textbookFormValidationSchema = (intl) => Yup.object().shape({
+  tab_title: Yup.string().required(intl.formatMessage(messages.tabTitleValidationText)).max(255),
+  chapters: Yup.array().of(
+    Yup.object({
+      title: Yup.string().required((intl.formatMessage(messages.chapterTitleValidationText))).max(255),
+      url: Yup.string().required(intl.formatMessage(messages.chapterUrlValidationText)).max(255),
+    }),
+  ).min(1),
+});
+
+export default textbookFormValidationSchema;
diff --git a/src/textbooks/textbook-sidebar/TextbookSidebar.jsx b/src/textbooks/textbook-sidebar/TextbookSidebar.jsx
new file mode 100644
index 0000000000..993a0f2198
--- /dev/null
+++ b/src/textbooks/textbook-sidebar/TextbookSidebar.jsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import PropTypes from 'prop-types';
+
+import { Hyperlink } from '@openedx/paragon';
+import { HelpSidebar } from '../../generic/help-sidebar';
+import messages from './messages';
+import { useHelpUrls } from '../../help-urls/hooks';
+
+const TextbookSidebar = ({ courseId }) => {
+  const intl = useIntl();
+  const { textbooks: textbookUrl } = useHelpUrls(['textbooks']);
+
+  return (
+    <HelpSidebar courseId={courseId} className="pt-4">
+      <h4 className="help-sidebar-about-title">
+        {intl.formatMessage(messages.section_1_title)}
+      </h4>
+      <p className="help-sidebar-about-descriptions">
+        {intl.formatMessage(messages.section_1_descriptions)}
+      </p>
+      <hr className="my-3.5" />
+      <h4 className="help-sidebar-about-title">
+        {intl.formatMessage(messages.section_2_title)}
+      </h4>
+      <p className="help-sidebar-about-descriptions">
+        {intl.formatMessage(messages.section_2_descriptions)}
+      </p>
+      <Hyperlink
+        className="small"
+        destination={textbookUrl}
+        target="_blank"
+        showLaunchIcon={false}
+      >
+        {intl.formatMessage(messages.sectionLink)}
+      </Hyperlink>
+    </HelpSidebar>
+  );
+};
+
+TextbookSidebar.propTypes = {
+  courseId: PropTypes.string.isRequired,
+};
+
+export default TextbookSidebar;
diff --git a/src/textbooks/textbook-sidebar/TextbookSidebar.test.jsx b/src/textbooks/textbook-sidebar/TextbookSidebar.test.jsx
new file mode 100644
index 0000000000..c2d6538ec1
--- /dev/null
+++ b/src/textbooks/textbook-sidebar/TextbookSidebar.test.jsx
@@ -0,0 +1,55 @@
+import MockAdapter from 'axios-mock-adapter';
+import { render, waitFor } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { AppProvider } from '@edx/frontend-platform/react';
+import { initializeMockApp } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+
+import initializeStore from '../../store';
+import { getHelpUrlsApiUrl } from '../../help-urls/data/api';
+import { helpUrls } from '../../help-urls/__mocks__';
+import TextbookSidebar from './TextbookSidebar';
+import messages from './messages';
+
+let axiosMock;
+let store;
+const courseId = 'course-v1:org+101+101';
+
+const renderComponent = () => render(
+  <AppProvider store={store}>
+    <IntlProvider locale="en">
+      <TextbookSidebar courseId={courseId} />
+    </IntlProvider>
+  </AppProvider>,
+);
+
+describe('<TextbookSidebar />', () => {
+  beforeEach(async () => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+
+    store = initializeStore();
+    axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+    axiosMock
+      .onGet(getHelpUrlsApiUrl())
+      .reply(200, helpUrls);
+  });
+
+  it('renders TextbookSidebar component correctly', async () => {
+    const { getByText } = renderComponent();
+
+    await waitFor(() => {
+      expect(getByText(messages.section_1_title.defaultMessage)).toBeInTheDocument();
+      expect(getByText(messages.section_1_descriptions.defaultMessage)).toBeInTheDocument();
+      expect(getByText(messages.section_2_title.defaultMessage)).toBeInTheDocument();
+      expect(getByText(messages.section_2_descriptions.defaultMessage)).toBeInTheDocument();
+      expect(getByText(messages.sectionLink.defaultMessage)).toHaveAttribute('href', helpUrls.textbooks);
+    });
+  });
+});
diff --git a/src/textbooks/textbook-sidebar/messages.js b/src/textbooks/textbook-sidebar/messages.js
new file mode 100644
index 0000000000..b58ac3fc8b
--- /dev/null
+++ b/src/textbooks/textbook-sidebar/messages.js
@@ -0,0 +1,29 @@
+const descriptions = {
+  section_1_title: {
+    id: 'course-authoring.textbooks.sidebar.section-1.title',
+    defaultMessage: 'Why should I break my textbook into chapters?',
+    description: 'Title for section 1 in the textbooks sidebar',
+  },
+  section_1_descriptions: {
+    id: 'course-authoring.textbooks.sidebar.section-1.descriptions',
+    defaultMessage: 'Breaking your textbook into multiple chapters reduces loading times for students, especially those with slow Internet connections. Breaking up textbooks into chapters can also help students more easily find topic-based information.',
+    description: 'Description for section 1 in the textbooks sidebar',
+  },
+  section_2_title: {
+    id: 'course-authoring.textbooks.sidebar.section-2.title',
+    defaultMessage: 'What if my book isn\'t divided into chapters?',
+    description: 'Title for section 2 in the textbooks sidebar',
+  },
+  section_2_descriptions: {
+    id: 'course-authoring.textbooks.sidebar.section-2.descriptions',
+    defaultMessage: 'If your textbook doesn\'t have individual chapters, you can upload the entire text as a single chapter and enter a name of your choice in the Chapter Name field.',
+    description: 'Description for section 2 in the textbooks sidebar',
+  },
+  sectionLink: {
+    id: 'course-authoring.textbooks.sidebar.section-link',
+    defaultMessage: 'Learn more',
+    description: 'Text for the link to learn more in the textbooks sidebar',
+  },
+};
+
+export default descriptions;
diff --git a/src/textbooks/utils.js b/src/textbooks/utils.js
new file mode 100644
index 0000000000..9d8d17649e
--- /dev/null
+++ b/src/textbooks/utils.js
@@ -0,0 +1,21 @@
+/**
+ * Get textbook form initial values
+ * @param {boolean} isEditForm - edit or add new form value
+ * @param {object} textbook - value from api
+ * @returns {object}
+ */
+const getTextbookFormInitialValues = (isEditForm = false, textbook = {}) => (isEditForm
+  ? textbook
+  : {
+    tab_title: '',
+    chapters: [
+      {
+        title: '',
+        url: '',
+      },
+    ],
+  });
+
+export {
+  getTextbookFormInitialValues,
+};
diff --git a/src/utils.js b/src/utils.js
index 24aa4a05ba..1c4f246a3a 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -1,4 +1,19 @@
+import { useContext, useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 import { useMediaQuery } from 'react-responsive';
+import * as Yup from 'yup';
+import { snakeCase } from 'lodash/string';
+import moment from 'moment';
+import { getConfig, getPath } from '@edx/frontend-platform';
+
+import { RequestStatus } from './data/constants';
+import { getCourseAppSettingValue, getLoadingStatus } from './pages-and-resources/data/selectors';
+import { fetchCourseAppSettings, updateCourseAppSetting } from './pages-and-resources/data/thunks';
+import { PagesAndResourcesContext } from './pages-and-resources/PagesAndResourcesProvider';
+import {
+  hasValidDateFormat, hasValidTimeFormat, decodeDateTime, endOfDayTime, startOfDayTime,
+} from './pages-and-resources/discussions/app-config-form/utils';
+import { DATE_TIME_FORMAT } from './constants';
 
 export const executeThunk = async (thunk, dispatch, getState) => {
   await thunk(dispatch, getState);
@@ -12,3 +27,277 @@ export function useIsMobile() {
 export function useIsDesktop() {
   return useMediaQuery({ query: '(min-width: 992px)' });
 }
+
+export function convertObjectToSnakeCase(obj, unpacked = false) {
+  return Object.keys(obj).reduce((snakeCaseObj, key) => {
+    const snakeCaseKey = snakeCase(key);
+    const value = unpacked ? obj[key] : { value: obj[key] };
+    return {
+      ...snakeCaseObj,
+      [snakeCaseKey]: value,
+    };
+  }, {});
+}
+
+export function deepConvertingKeysToCamelCase(obj) {
+  if (typeof obj !== 'object' || obj === null) {
+    return obj;
+  }
+
+  if (Array.isArray(obj)) {
+    return obj.map((item) => deepConvertingKeysToCamelCase(item));
+  }
+
+  const camelCaseObj = {};
+  Object.keys(obj).forEach((key) => {
+    const camelCaseKey = key.replace(/_([a-z])/g, (match, p1) => p1.toUpperCase());
+    camelCaseObj[camelCaseKey] = deepConvertingKeysToCamelCase(obj[key]);
+  });
+  return camelCaseObj;
+}
+
+export function deepConvertingKeysToSnakeCase(obj) {
+  if (typeof obj !== 'object' || obj === null) {
+    return obj;
+  }
+
+  if (Array.isArray(obj)) {
+    return obj.map((item) => deepConvertingKeysToSnakeCase(item));
+  }
+
+  const snakeCaseObj = {};
+  Object.entries(obj).forEach(([key, value]) => {
+    const snakeCaseKey = key.replace(/([a-z])([A-Z])/g, '$1_$2').toLowerCase();
+    snakeCaseObj[snakeCaseKey] = key === 'gradeCutoffs' ? value : deepConvertingKeysToSnakeCase(value);
+  });
+  return snakeCaseObj;
+}
+
+export function transformKeysToCamelCase(obj) {
+  return obj.key.replace(/_([a-z])/g, (match, letter) => letter.toUpperCase());
+}
+
+export function parseArrayOrObjectValues(obj) {
+  const result = {};
+
+  Object.entries(obj).forEach(([key, value]) => {
+    try {
+      if (!Number.isNaN(Number(value))) {
+        result[key] = value;
+      } else {
+        result[key] = JSON.parse(value);
+      }
+    } catch (e) {
+      result[key] = value;
+    }
+  });
+
+  return result;
+}
+
+/**
+ * Create a correct inner path depend on config PUBLIC_PATH.
+ * @param {string} checkPath - the internal route path that is validated
+ * @returns {string} - the correct internal route path
+ */
+export const createCorrectInternalRoute = (checkPath) => {
+  let basePath = getPath(getConfig().PUBLIC_PATH);
+
+  if (basePath.endsWith('/')) {
+    basePath = basePath.slice(0, -1);
+  }
+
+  if (!checkPath.startsWith(basePath)) {
+    return `${basePath}${checkPath}`;
+  }
+
+  return checkPath;
+};
+
+export function getPagePath(courseId, isMfePageEnabled, urlParameter) {
+  if (isMfePageEnabled === 'true') {
+    if (urlParameter === 'tabs') {
+      return `/course/${courseId}/pages-and-resources`;
+    }
+    return `/course/${courseId}/${urlParameter}`;
+  }
+  return `${getConfig().STUDIO_BASE_URL}/${urlParameter}/${courseId}`;
+}
+
+export function useAppSetting(settingName) {
+  const dispatch = useDispatch();
+  const { courseId } = useContext(PagesAndResourcesContext);
+  const settingValue = useSelector(getCourseAppSettingValue(settingName));
+  const loadingStatus = useSelector(getLoadingStatus);
+  useEffect(() => {
+    if ([RequestStatus.DENIED, RequestStatus.FAILED].includes(loadingStatus)) {
+      return;
+    }
+    if (settingValue === undefined || settingValue === null) {
+      dispatch(fetchCourseAppSettings(courseId, [settingName]));
+    }
+  }, [courseId]);
+
+  const saveSetting = async (value) => dispatch(updateCourseAppSetting(courseId, settingName, value));
+  return [settingValue, saveSetting];
+}
+
+export const getLabelById = (options, id) => {
+  const foundOption = options.find((option) => option.id === id);
+  return foundOption ? foundOption.label : '';
+};
+
+/**
+ * Adds additional validation methods to Yup.
+ */
+export function setupYupExtensions() {
+  // Add a uniqueProperty method to arrays that allows validating that the specified property path is unique
+  // across all objects in the array.
+  // Credit: https://github.com/jquense/yup/issues/345#issuecomment-717400071
+  Yup.addMethod(Yup.array, 'uniqueProperty', function uniqueProperty(property, message) {
+    return this.test('unique', '', function testUniqueness(list) {
+      const errors = [];
+
+      list.forEach((item, index) => {
+        const propertyValue = item[property];
+
+        if (propertyValue && list.filter(entry => entry[property] === propertyValue).length > 1) {
+          errors.push(
+            this.createError({
+              path: `${this.path}[${index}].${property}`,
+              message,
+            }),
+          );
+        }
+      });
+
+      if (errors.length > 0) {
+        throw new Yup.ValidationError(errors);
+      }
+
+      return true;
+    });
+  });
+
+  Yup.addMethod(Yup.object, 'uniqueObjectProperty', function uniqueObjectProperty(propertyName, message) {
+    return this.test('unique', message, function testUniqueness(discussionTopic) {
+      if (!discussionTopic || !discussionTopic[propertyName]) {
+        return true;
+      }
+      const isDuplicate = this.parent.filter(topic => topic !== discussionTopic)
+        .some(topic => topic[propertyName]?.toLowerCase() === discussionTopic[propertyName].toLowerCase());
+
+      if (isDuplicate) {
+        throw this.createError({
+          path: `${this.path}.${propertyName}`,
+          error: message,
+        });
+      }
+      return true;
+    });
+  });
+
+  Yup.addMethod(Yup.string, 'compare', function compare(message, type) {
+    return this.test('isGreater', message, function isGreater() {
+      // This function compare 2 dates or 2 times. It return no error if dateInstance/timeInstance is empty
+      // of if startTime or endTime is not present for time comparison
+      // or startDate or endDate is not present for date comparison
+
+      if (!this.parent
+        || (!(this.parent.startTime && this.parent.endTime) && type === 'time')
+        || (!(this.parent.startDate && this.parent.endDate) && type === 'date')
+      ) {
+        return true;
+      }
+
+      const startDateTime = decodeDateTime(this.parent.startDate, startOfDayTime(this.parent.startTime));
+      const endDateTime = decodeDateTime(this.parent.endDate, endOfDayTime(this.parent.endTime));
+      let isInvalidStartDateTime;
+
+      if (type === 'date') {
+        isInvalidStartDateTime = startDateTime.isAfter(endDateTime);
+      } else if (type === 'time') {
+        isInvalidStartDateTime = startDateTime.isSameOrAfter(endDateTime);
+      }
+
+      if (isInvalidStartDateTime) {
+        throw this.createError({
+          path: `${this.path}`,
+          error: message,
+        });
+      }
+      return true;
+    });
+  });
+
+  Yup.addMethod(Yup.string, 'checkFormat', function checkFormat(message, type) {
+    return this.test('isValidFormat', message, function isValidFormat() {
+      if (!this.originalValue) {
+        return true;
+      }
+      let isValid;
+
+      if (type === 'date') {
+        isValid = hasValidDateFormat(this.originalValue);
+      } else if (type === 'time') {
+        isValid = hasValidTimeFormat(this.originalValue);
+      }
+
+      if (!isValid) {
+        throw this.createError({
+          path: `${this.path}`,
+          error: message,
+        });
+      }
+      return true;
+    });
+  });
+}
+
+export const convertToDateFromString = (dateStr) => {
+  /**
+   * Convert UTC to local time for react-datepicker
+   * Note: react-datepicker has a bug where it only interacts with local time
+   * @param {string} dateStr - YYYY-MM-DDTHH:MM:SSZ
+   * @return {Date} date in local time
+   */
+  if (!dateStr) {
+    return '';
+  }
+
+  const stripTimeZone = (stringValue) => stringValue.substring(0, 19);
+
+  return moment(stripTimeZone(String(dateStr))).toDate();
+};
+
+export const convertToStringFromDate = (date) => {
+  /**
+   * Convert local time to UTC from react-datepicker
+   * Note: react-datepicker has a bug where it only interacts with local time
+   * @param {Date} date - date in local time
+   * @return {string} YYYY-MM-DDTHH:MM:SSZ
+   */
+  if (!date) {
+    return '';
+  }
+
+  return moment(date).format(DATE_TIME_FORMAT);
+};
+
+export const isValidDate = (date) => {
+  const formattedValue = convertToStringFromDate(date).split('T')[0];
+
+  return Boolean(formattedValue.length <= 10);
+};
+
+export const getFileSizeToClosestByte = (fileSize) => {
+  let divides = 0;
+  let size = fileSize;
+  while (size > 1000 && divides < 4) {
+    size /= 1000;
+    divides += 1;
+  }
+  const units = ['B', 'KB', 'MB', 'GB', 'TB'];
+  const fileSizeFixedDecimal = Number.parseFloat(size).toFixed(2);
+  return `${fileSizeFixedDecimal} ${units[divides]}`;
+};
diff --git a/src/utils.test.js b/src/utils.test.js
new file mode 100644
index 0000000000..d4fa59d373
--- /dev/null
+++ b/src/utils.test.js
@@ -0,0 +1,178 @@
+import {
+  getFileSizeToClosestByte,
+  convertObjectToSnakeCase,
+  deepConvertingKeysToCamelCase,
+  deepConvertingKeysToSnakeCase,
+  transformKeysToCamelCase,
+  parseArrayOrObjectValues,
+  convertToDateFromString,
+  convertToStringFromDate,
+  isValidDate,
+  getPagePath,
+} from './utils';
+
+jest.mock('@edx/frontend-platform', () => ({
+  getConfig: jest.fn(),
+  ensureConfig: jest.fn(),
+  getPath: jest.fn(),
+}));
+
+describe('FilesAndUploads utils', () => {
+  describe('getFileSizeToClosestByte', () => {
+    it('should return file size with B for bytes', () => {
+      const expectedSize = '219.00 B';
+      const actualSize = getFileSizeToClosestByte(219);
+      expect(expectedSize).toEqual(actualSize);
+    });
+    it('should return file size with KB for kilobytes', () => {
+      const expectedSize = '21.90 KB';
+      const actualSize = getFileSizeToClosestByte(21900);
+      expect(expectedSize).toEqual(actualSize);
+    });
+    it('should return file size with MB for megabytes', () => {
+      const expectedSize = '2.19 MB';
+      const actualSize = getFileSizeToClosestByte(2190000);
+      expect(expectedSize).toEqual(actualSize);
+    });
+    it('should return file size with GB for gigabytes', () => {
+      const expectedSize = '2.03 GB';
+      const actualSize = getFileSizeToClosestByte(2034190000);
+      expect(expectedSize).toEqual(actualSize);
+    });
+    it('should return file size with TB for terabytes', () => {
+      const expectedSize = '1.99 TB';
+      const actualSize = getFileSizeToClosestByte(1988034190000);
+      expect(expectedSize).toEqual(actualSize);
+    });
+    it('should return file size with TB for larger numbers', () => {
+      const expectedSize = '1234.56 TB';
+      const actualSize = getFileSizeToClosestByte(1234560000000000);
+      expect(expectedSize).toEqual(actualSize);
+    });
+  });
+
+  describe('convertObjectToSnakeCase', () => {
+    it('converts object keys to snake_case', () => {
+      const input = { firstName: 'John', lastName: 'Doe' };
+      const expectedOutput = { first_name: { value: 'John' }, last_name: { value: 'Doe' } };
+      expect(convertObjectToSnakeCase(input)).toEqual(expectedOutput);
+    });
+
+    it('converts object keys to snake_case with unpacked values', () => {
+      const input = { firstName: 'John', lastName: 'Doe' };
+      const expectedOutput = { first_name: 'John', last_name: 'Doe' };
+      expect(convertObjectToSnakeCase(input, true)).toEqual(expectedOutput);
+    });
+  });
+
+  describe('deepConvertingKeysToCamelCase', () => {
+    it('converts object keys to camelCase', () => {
+      const input = { first_name: 'John', last_name: 'Doe' };
+      const expectedOutput = { firstName: 'John', lastName: 'Doe' };
+      expect(deepConvertingKeysToCamelCase(input)).toEqual(expectedOutput);
+    });
+
+    it('converts nested object keys to camelCase', () => {
+      const input = { user_info: { first_name: 'John', last_name: 'Doe' } };
+      const expectedOutput = { userInfo: { firstName: 'John', lastName: 'Doe' } };
+      expect(deepConvertingKeysToCamelCase(input)).toEqual(expectedOutput);
+    });
+  });
+
+  describe('deepConvertingKeysToSnakeCase', () => {
+    it('converts object keys to snake_case', () => {
+      const input = { firstName: 'John', lastName: 'Doe' };
+      const expectedOutput = { first_name: 'John', last_name: 'Doe' };
+      expect(deepConvertingKeysToSnakeCase(input)).toEqual(expectedOutput);
+    });
+
+    it('converts nested object keys to snake_case', () => {
+      const input = { userInfo: { firstName: 'John', lastName: 'Doe' } };
+      const expectedOutput = { user_info: { first_name: 'John', last_name: 'Doe' } };
+      expect(deepConvertingKeysToSnakeCase(input)).toEqual(expectedOutput);
+    });
+  });
+
+  describe('transformKeysToCamelCase', () => {
+    it('transforms a single key to camelCase', () => {
+      const input = { key: 'first_name' };
+      const expectedOutput = 'firstName';
+      expect(transformKeysToCamelCase(input)).toEqual(expectedOutput);
+    });
+  });
+
+  describe('parseArrayOrObjectValues', () => {
+    it('parses stringified JSON values', () => {
+      const input = { key1: '123', key2: '{"name":"John"}' };
+      const expectedOutput = { key1: '123', key2: { name: 'John' } };
+      expect(parseArrayOrObjectValues(input)).toEqual(expectedOutput);
+    });
+
+    it('returns non-JSON values as is', () => {
+      const input = { key1: '123', key2: 'John' };
+      const expectedOutput = { key1: '123', key2: 'John' };
+      expect(parseArrayOrObjectValues(input)).toEqual(expectedOutput);
+    });
+  });
+
+  describe('convertToDateFromString', () => {
+    it('converts a date string to a Date object', () => {
+      const dateStr = '2023-10-01T12:00:00Z';
+      const date = convertToDateFromString(dateStr);
+      expect(date).toBeInstanceOf(Date);
+      expect(date.toISOString()).toBe('2023-10-01T12:00:00.000Z');
+    });
+
+    it('returns an empty string for invalid date strings', () => {
+      const dateStr = '';
+      const date = convertToDateFromString(dateStr);
+      expect(date).toBe('');
+    });
+  });
+
+  describe('convertToStringFromDate', () => {
+    it('converts a Date object to a date string', () => {
+      const date = new Date('2023-10-01T12:00:00Z');
+      const dateStr = convertToStringFromDate(date);
+      expect(dateStr).toBe('2023-10-01T12:00:00Z');
+    });
+
+    it('returns an empty string for invalid Date objects', () => {
+      const date = null;
+      const dateStr = convertToStringFromDate(date);
+      expect(dateStr).toBe('');
+    });
+  });
+
+  describe('isValidDate', () => {
+    it('returns true for valid dates', () => {
+      const date = new Date('2023-10-01T12:00:00Z');
+      expect(isValidDate(date)).toBe(true);
+    });
+
+    it('returns false for invalid dates', () => {
+      const date = new Date('invalid-date');
+      expect(isValidDate(date)).toBe(false);
+    });
+  });
+});
+
+describe('getPagePath', () => {
+  it('returns MFE path when isMfePageEnabled is true and urlParameter is "tabs"', () => {
+    const courseId = '12345';
+    const isMfePageEnabled = 'true';
+    const urlParameter = 'tabs';
+
+    const result = getPagePath(courseId, isMfePageEnabled, urlParameter);
+    expect(result).toBe(`/course/${courseId}/pages-and-resources`);
+  });
+
+  it('returns MFE path when isMfePageEnabled is true and urlParameter is not "tabs"', () => {
+    const courseId = '12345';
+    const isMfePageEnabled = 'true';
+    const urlParameter = 'other-page';
+
+    const result = getPagePath(courseId, isMfePageEnabled, urlParameter);
+    expect(result).toBe(`/course/${courseId}/${urlParameter}`);
+  });
+});
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000000..aa88164ad8
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,12 @@
+{
+    "extends": "@edx/typescript-config",
+    "compilerOptions": {
+      "outDir": "dist",
+      "baseUrl": "./src",
+      "paths": {
+        "*": ["*"]
+      }
+    },
+    "include": ["*.js", ".eslintrc.js", "src/**/*", "plugins/**/*"],
+    "exclude": ["dist", "node_modules"]
+}
diff --git a/webpack.dev-tutor.config.js b/webpack.dev-tutor.config.js
new file mode 100755
index 0000000000..e69de29bb2
diff --git a/webpack.dev.config.js b/webpack.dev.config.js
new file mode 100644
index 0000000000..57ee9080e0
--- /dev/null
+++ b/webpack.dev.config.js
@@ -0,0 +1,17 @@
+const path = require('path');
+const { createConfig } = require('@openedx/frontend-build');
+
+const config = createConfig('webpack-dev', {
+  resolve: {
+    alias: {
+      // Plugins can use 'CourseAuthoring' as an import alias for this app:
+      CourseAuthoring: path.resolve(__dirname, 'src/'),
+    },
+    fallback: {
+      fs: false,
+      constants: false,
+    },
+  },
+});
+
+module.exports = config;
diff --git a/webpack.prod.config.js b/webpack.prod.config.js
new file mode 100644
index 0000000000..c5e13b0417
--- /dev/null
+++ b/webpack.prod.config.js
@@ -0,0 +1,17 @@
+const path = require('path');
+const { createConfig } = require('@openedx/frontend-build');
+
+const config = createConfig('webpack-prod', {
+  resolve: {
+    alias: {
+      // Plugins can use 'CourseAuthoring' as an import alias for this app:
+      CourseAuthoring: path.resolve(__dirname, 'src/'),
+    },
+    fallback: {
+      fs: false,
+      constants: false,
+    },
+  },
+});
+
+module.exports = config;